feat(site): add TimeSlider, VolumeSlider, Popover API references

[decepulis]

Closes #469, closes #470, closes #682, closes #683, closes #684

Summary

Add CSS custom properties extraction to the API docs builder, create reference pages for TimeSlider, VolumeSlider, and Popover, and fix builder issues blocking generation of these three components. Adds framework-divergent part rendering (React-only parts hidden in HTML docs), re-export resolution for shared sub-parts, sub-part data attribute inheritance, and sub-part React props extraction.

Changes

API docs builder (site/scripts/api-docs-builder/)

• CSS vars handler extracts {Name}CSSVars exports with JSDoc descriptions
• Builder resolves re-exported parts back to their origin component for HTML element files, React JSDoc descriptions, and shared data attributes
• Sub-parts that reference stateAttrMap inherit the parent component's data attributes
• Non-primary parts get custom React-specific props extracted from their Props interface
• Core-instantiation primary detection replaces fragile first-match-wins
• New ApiCSSVarsTable and CSSVarRow Astro components for rendering CSS custom properties tables
• componentReferenceModel updated with CSS vars support and expanded tests

Core (packages/core/)

• TimeSlider and VolumeSlider moved to own directories under core/ui/ with per-component CSS vars and data-attrs files
• New time-slider-css-vars.ts and volume-slider-css-vars.ts exports

React (packages/react/)

• JSDoc descriptions added to Slider sub-parts (SliderBuffer, SliderFill, SliderThumb, SliderTrack, SliderValue) and Popover sub-parts (PopoverArrow, PopoverPopup, PopoverTrigger)
• usePopoverContext exported directly from react/index.ts instead of as a component part

Reference pages

• TimeSlider — seek slider with buffer indicator, CSS vars, data attributes, WithParts demo
• VolumeSlider — volume control with muted state, CSS vars, data attributes, WithParts demo
• Popover — multi-part component (Root HTML+React, Arrow/Popup/Trigger React-only)

Demos

• Popover: working HTML markup with proper open/close behavior
• Volume slider: added mute button, corrected --media-slider-fill CSS var usage (percentage-based)
• Time slider: corrected CSS var usage
• 12 new WithParts demo files for time-slider and volume-slider (HTML + React, each with CSS)

Design doc & skill docs

• internal/design/site/api-docs-builder.md updated with re-export resolution, sub-part data attribute inheritance, sub-part props extraction, and corrected intro paragraph
• builder-conventions.md and mdx-structure.md updated with CSS vars and sub-part conventions

Site config

• docs.config.ts updated with new reference page entries

Future work

• React PopoverTrigger doesn't apply anchor-name to trigger element #696 — React PopoverTrigger doesn't apply anchor-name to trigger element
• fix: tsdown unbundle strips side-effect imports + context upgrade order bug #688 — tsdown unbundle strips side-effect imports + context upgrade order bug

Implementation details

Re-export resolution: When index.parts.ts re-exports parts from another component (source path doesn't start with ./), the builder resolves the re-export back to its origin, parses the origin's index.parts.ts, matches each re-exported name to the original local export, then derives the kebab segment and HTML element file from the origin component.

Sub-part data attributes: A usesDataAttrs() helper checks if a React file references stateAttrMap. When it does, the sub-part inherits the parent component's data attributes in the generated reference.

Sub-part props extraction: extractSubPartProps() walks syntactic own members of {localName}Props interfaces (excluding inherited UIComponentProps members and children) to extract custom React-specific props for non-primary parts.

Testing

• pnpm -F @videojs/core build passes
• pnpm -F @videojs/core test passes (7 pre-existing slider failures)
• pnpm -F @videojs/react build passes
• pnpm -F site api-docs generates all 15 component JSONs correctly
• pnpm -F site test — all 368 tests pass
• Visual check: all three pages render in both HTML and React modes
• Popover HTML view shows only Root; React view shows all 4 parts

[netlify]

✅ Deploy Preview for vjs10-site ready!

Name	Link
🔨 Latest commit	19b7f3a
🔍 Latest deploy log	https://app.netlify.com/projects/vjs10-site/deploys/69a76df949f6700008f20d10
😎 Deploy Preview	https://deploy-preview-685--vjs10-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

📦 Bundle Size Report

Package	Size	Diff		%
@videojs/core	10.31 kB	+26 B	████████	+0.2%	🔺
@videojs/element	1.60 kB	0 B	░░░░░░░░	0%	✅
@videojs/html	18.39 kB	+36 B	██████░░	+0.2%	🔺
@videojs/icons	3.79 kB	0 B	░░░░░░░░	0%	✅
@videojs/react	14.94 kB	-20 B	████░░░░	-0.1%	🔽
@videojs/store	1.95 kB	0 B	░░░░░░░░	0%	✅
@videojs/utils	2.81 kB	0 B	░░░░░░░░	0%	✅

Total: 53.79 kB · +42 B · +0.1%

---

Entry Breakdown

Subpath sizes are the additional bytes on top of the root entry point, measured by bundling root + subpath together and subtracting the root-only size.

@videojs/core

Entry	Base	PR	Diff	%
.	4.28 kB	4.28 kB	+6 B	+0.1%	🔺
./dom	6.01 kB	6.03 kB	+20 B	+0.3%	🔺
total	10.28 kB	10.31 kB	+26 B	+0.2%

@videojs/element

Entry	Base	PR	Diff	%
.	817 B	817 B	0 B	0%	✅
./context	823 B	823 B	0 B	0%	✅
total	1.60 kB	1.60 kB	0 B	0%

@videojs/html

Entry	Base	PR	Diff	%
.	15.20 kB	15.18 kB	-16 B	-0.1%	🔽
./video	1.06 kB	1.08 kB	+23 B	+2.1%	🔺
./audio	1.06 kB	1.06 kB	+5 B	+0.5%	🔺
./background	1.05 kB	1.07 kB	+24 B	+2.2%	🔺
total	18.36 kB	18.39 kB	+36 B	+0.2%

@videojs/icons

Entry	Base	PR	Diff	%
./react	2.27 kB	2.27 kB	0 B	0%	✅
./html	1.52 kB	1.52 kB	0 B	0%	✅
total	3.79 kB	3.79 kB	0 B	0%

@videojs/store

Entry	Base	PR	Diff	%
.	1.29 kB	1.29 kB	0 B	0%	✅
./html	468 B	468 B	0 B	0%	✅
./react	204 B	204 B	0 B	0%	✅
total	1.95 kB	1.95 kB	0 B	0%

@videojs/utils

Entry	Base	PR	Diff	%
./array	104 B	104 B	0 B	0%	✅
./dom	928 B	928 B	0 B	0%	✅
./events	227 B	227 B	0 B	0%	✅
./function	261 B	261 B	0 B	0%	✅
./object	119 B	119 B	0 B	0%	✅
./predicate	265 B	265 B	0 B	0%	✅
./string	148 B	148 B	0 B	0%	✅
./style	185 B	185 B	0 B	0%	✅
./time	478 B	478 B	0 B	0%	✅
./number	158 B	158 B	0 B	0%	✅
total	2.81 kB	2.81 kB	0 B	0%

---

ℹ️ How to interpret

Sizes are minified + brotli, measured with esbuild.
Package totals are computed as root size + marginal subpath costs.
Subpath marginal cost = (root + subpath bundled together) − root alone.

Icon	Meaning
✅	No change
🔺	Increased ≤ 10%
🔴	Increased > 10%
🔽	Decreased
🆕	New (no baseline)

Run pnpm size locally to check current sizes.