@abuzareal/contour-ui 0.6.0 → 0.6.2

package/README.md

@@ -6,7 +6,7 @@ Use it when you want this visual style with typed controls, feedback, navigation
 
 [Live catalogue](https://contour.abuzr.in/) · [npm package](https://www.npmjs.com/package/@abuzareal/contour-ui) · [Maintainer](https://github.com/abuzareal)
 
-This source checkout targets **0.6.0**. Package publication and application upgrades are separate; check the npm registry for release availability and each application's manifest for its installed version. Catalogue examples include application patterns as well as package components. Check the exports below before treating an example as an importable component.
+This source checkout targets **0.6.2**. Package publication and application upgrades are separate; check the npm registry for release availability and each application's manifest for its installed version. Catalogue examples include application patterns as well as package components. Check the exports below before treating an example as an importable component.
 
 [Public API and maturity register](PUBLIC-API.md) · [Architecture, scope and compatibility](CONTRACTS.md)
 
@@ -23,7 +23,7 @@ Version 0.6 adds a single-select [Combobox](COMBOBOX.md) backed by pinned Base U
 Use an existing React application with a bundler that resolves package CSS imports. Contour ships ESM and TypeScript declarations. The package declares Node.js 22 or newer; repository tooling uses Vite 8, which needs Node.js 22.12+ or 24+.
 
 ```sh
-npm install @abuzareal/contour-ui@0.6.0 --save-exact
+npm install @abuzareal/contour-ui@0.6.2 --save-exact
 ```
 
 Your app must provide matching `react` and `react-dom` versions: **18.3.1 or React 19**. The compatibility script covers 18.3.1, 19.0.0, and 19.3.0; it doesn't establish support for every framework or React Server Component setup. Put interactive components inside a client boundary when your framework requires one.
@@ -180,7 +180,7 @@ Give scenes a sized container and a usable static fallback. `SceneBoundary` hide
 **0.2.0** adds native field refs, controlled tabs and popover/menu open state, menu keyboard improvements, native reset synchronization, Three.js lifecycle fixes and a tested Next.js App Router integration. Existing uncontrolled defaults and React 18/19 support remain. `fonts-latin.css`, introduced in 0.1.2, now uses packaged relative font URLs for webpack resolution. `CHANGELOG.md` is included in the package archive and [npm's Code view](https://www.npmjs.com/package/@abuzareal/contour-ui?activeTab=code); it contains the upgrade details for each version.
 
 ```sh
-npm install @abuzareal/contour-ui@0.6.0 --save-exact
+npm install @abuzareal/contour-ui@0.6.2 --save-exact
 ```
 
 Commit your manifest and lockfile, run your application's checks, and review both themes, dialogs, forms, and motion before deploying. Version 0.1.1 includes a document scroll lock for dialogs and drawers. Review any app-level lock before removing it, including nested dialogs and short screens. Package publication doesn't update deployed consumers automatically.
@@ -259,3 +259,5 @@ Legacy aggregate styles remain global. The new isolated CSS path is documented i
 Menus and popovers remain local panels without portals or collision detection; use them where the container can accommodate their content. No submenu or arbitrary trigger-composition contract is claimed. BrandMark and page/editorial helpers preserve existing identity and layout assumptions; they are optional exports rather than universal primitives. Do not copy private internals or deep-import them.
 
 For contribution setup and review expectations, see [CONTRIBUTING.md](CONTRIBUTING.md). Contour currently provides React components; no Vue, Svelte or Angular adapter is included.
+
+Public references: [hooks](HOOKS.md), [helpers](HELPERS.md), [optional Three](THREE.md), [prop metadata](PROP-REFERENCE.md), [export register](REFERENCE.md), [migration/history](MIGRATION.md), [support evidence](SUPPORT.md) and [manual QA](MANUAL-QA.md).

package/RECIPES.md

@@ -1,6 +1,6 @@
-# Application recipes — 0.6.0
+# Application recipes — 0.6.1
 
-The source linked here is the code copied, compiled and exercised by the package checks. These files are application code, not additional exports. Import components directly from the public package; copy only the recipe needed. There are no live services or fabricated successful operations. [Source at this release](https://github.com/abuzareal/contour-ui/tree/v0.6.0/examples/recipes).
+The source linked here is the code copied, compiled and exercised by the package checks. These files are application code, not additional exports. Import components directly from the public package; copy only the recipe needed. There are no live services or fabricated successful operations. [Source at this release](https://github.com/abuzareal/contour-ui/tree/v0.6.1/examples/recipes).
 
 ## Async single-select
 
@@ -40,4 +40,4 @@ The optional **password visibility recipe** keeps the same input mounted, name a
 
 Use native p/span and h1–h6 with [typography tokens](STYLING.md). Heading level follows the document outline; size/weight are CSS choices. No Text/Heading wrappers are added without an independent semantic/variant contract. These explicit scope decisions do not complete deferred NumberField, full grid, calendar or other optional features.
 
-[Report Table/recipes 0.6.0](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&title=Table%20recipes%200.6.0%3A%20&component=Table%20recipes&version=0.6.0); [standalone reproduction](examples/reproduction). See [public API](PUBLIC-API.md) for exact types, [styling](STYLING.md) and [onboarding](GETTING-STARTED.md). Release source links become available with the published tag.
+[Report Table/recipes 0.6.2](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&title=Table%20recipes%200.6.2%3A%20&component=Table%20recipes&version=0.6.2); [standalone reproduction](examples/reproduction). See [public API](PUBLIC-API.md) for exact types, [styling](STYLING.md) and [onboarding](GETTING-STARTED.md). Release source links become available with the published tag.

package/REFERENCE.md

@@ -0,0 +1,193 @@
+# Export reference register
+
+Generated for 0.6.2 from actual source/runtime declarations and the manifest. This register maps all symbols and CSS/data entry points; it does not promote every component page. Human behavior guidance lives in the linked references. Source and exact types remain in [PUBLIC-API.md](PUBLIC-API.md). Run npm run check:reference; newly added hook/helper sources need an authored mapping before this register can update.
+
+| Entry | Symbol | Kind | Reference |
+| --- | --- | --- | --- |
+| . | Alert | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Avatar | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Badge | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | BrandMark | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Breadcrumbs | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Button | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Card | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Checkbox | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | CountUp | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | DataTable | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | DepthButton | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Dialog | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Disclosure | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Divider | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | DropdownMenu | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | EmptyState | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | ExternalLink | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Field | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | FlipCard | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | IconButton | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Kbd | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Magnetic | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Marquee | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Pagination | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Popover | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | ProgressBar | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | RadioGroup | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Reveal | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | RevealHeading | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | ScrollProgress | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | SectionLabel | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | SegmentedControl | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | SelectField | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Skeleton | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Slider | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | GitHubIcon | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | LinkedInIcon | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Spinner | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Stat | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Stepper | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Switch | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Tabs | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Tag | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | TextArea | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | TextField | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | ThemeToggle | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | TiltCard | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Timeline | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | ToastProvider | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | Tooltip | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | useClipboardCopy | runtime | [HOOKS.md#clipboard](HOOKS.md#clipboard) |
+| . | useDismiss | runtime | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
+| . | useHeaderScroll | runtime | [HOOKS.md#scroll-and-navigation](HOOKS.md#scroll-and-navigation) |
+| . | useIdleTrigger | runtime | [HOOKS.md#idle-and-print](HOOKS.md#idle-and-print) |
+| . | useInitialHashScroll | runtime | [HOOKS.md#scroll-and-navigation](HOOKS.md#scroll-and-navigation) |
+| . | useMobileMenu | runtime | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
+| . | useMotionPreference | runtime | [HOOKS.md#motion](HOOKS.md#motion) |
+| . | usePrintPreparation | runtime | [HOOKS.md#idle-and-print](HOOKS.md#idle-and-print) |
+| . | useScrollSpy | runtime | [HOOKS.md#scroll-and-navigation](HOOKS.md#scroll-and-navigation) |
+| . | useTheme | runtime | [HOOKS.md#theme](HOOKS.md#theme) |
+| . | useToast | runtime | [HOOKS.md#toast](HOOKS.md#toast) |
+| . | Section | type | [HELPERS.md#public-types](HELPERS.md#public-types) |
+| . | SceneBoundary | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | safeHref | runtime | [HELPERS.md](HELPERS.md) |
+| . | ThemeScope | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | FloatingOptions | type | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
+| . | PanelFocusOptions | type | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
+| . | DismissReason | type | [HELPERS.md#public-types](HELPERS.md#public-types) |
+| . | Table | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | TableProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | Combobox | runtime | [PUBLIC-API.md](PUBLIC-API.md) |
+| . | ComboboxProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | ComboboxOption | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | AlertTone | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | AlertProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | AvatarProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | BadgeTone | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | BadgeProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | BrandMarkProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | BreadcrumbsProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | ButtonProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | CardProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | CheckboxProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | CountUpProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TableColumn | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | DataTableProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | DepthButtonProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | DialogProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | DisclosureProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | DividerProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | MenuItem | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | DropdownMenuProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | EmptyStateProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | ExternalLinkProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | FieldProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | FlipCardProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | IconButtonProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | MagneticProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | MarqueeProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | PaginationProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | PopoverProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | ProgressBarProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | RadioGroupProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | RevealProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | HeadingLine | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | RevealHeadingProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SectionLabelProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SegmentedControlProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SelectFieldProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SkeletonProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SliderProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SocialIconProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SpinnerProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | StatProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | StepperProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | SwitchProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TabItem | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TabsProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TagProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TextAreaProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TextFieldProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | ThemeToggleProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TiltCardProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TimelineProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | ToastProviderProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | TooltipProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| . | CopyStatus | type | [HOOKS.md#clipboard](HOOKS.md#clipboard) |
+| . | DismissOptions | type | [HOOKS.md#dismissal-and-mobile-menus](HOOKS.md#dismissal-and-mobile-menus) |
+| . | Theme | type | [HOOKS.md#theme](HOOKS.md#theme) |
+| . | ToastInput | type | [HOOKS.md#toast](HOOKS.md#toast) |
+| . | ToastContextValue | type | [HOOKS.md#toast](HOOKS.md#toast) |
+| . | ToastContext | type | [HOOKS.md#toast](HOOKS.md#toast) |
+| . | cx | runtime | [HELPERS.md](HELPERS.md) |
+| . | ccx | runtime | [HELPERS.md](HELPERS.md) |
+| . | ButtonVariant | type | [HELPERS.md](HELPERS.md) |
+| . | ButtonSize | type | [HELPERS.md](HELPERS.md) |
+| . | buttonClassName | runtime | [HELPERS.md](HELPERS.md) |
+| . | formatIndex | runtime | [HELPERS.md](HELPERS.md) |
+| . | readStorage | runtime | [HELPERS.md](HELPERS.md) |
+| . | writeStorage | runtime | [HELPERS.md](HELPERS.md) |
+| . | storageKeys | runtime | [HELPERS.md](HELPERS.md) |
+| . | nextIndexForKey | runtime | [HELPERS.md](HELPERS.md) |
+| . | fieldDescribedBy | runtime | [HELPERS.md](HELPERS.md) |
+| . | motionDisabledFor | runtime | [HOOKS.md#motion](HOOKS.md#motion) |
+| . | ThemeScopeProps | type | [PROP-REFERENCE.md](PROP-REFERENCE.md) |
+| ./three | Sculpture | runtime | [THREE.md](THREE.md) |
+| ./three | ObjectStudy | runtime | [THREE.md](THREE.md) |
+| ./three | useThreeStage | runtime | [THREE.md](THREE.md) |
+| ./three | StageFrame | type | [THREE.md](THREE.md) |
+| ./three | StageScene | type | [THREE.md](THREE.md) |
+| ./three | StageContext | type | [THREE.md](THREE.md) |
+| ./three | SculptureProps | type | [THREE.md](THREE.md) |
+| ./three | ObjectStudyProps | type | [THREE.md](THREE.md) |
+| ./three | createLinkGeometry | runtime | [THREE.md](THREE.md) |
+| ./three | createChrome | runtime | [THREE.md](THREE.md) |
+| ./three | createLime | runtime | [THREE.md](THREE.md) |
+| ./three | createInk | runtime | [THREE.md](THREE.md) |
+| ./three | createGlass | runtime | [THREE.md](THREE.md) |
+| ./three | createMaterialSet | runtime | [THREE.md](THREE.md) |
+| ./three | createGeometrySet | runtime | [THREE.md](THREE.md) |
+| ./three | ObjectSet | type | [THREE.md](THREE.md) |
+| ./three | objectStudies | runtime | [THREE.md](THREE.md) |
+| ./three | ObjectStudyKind | type | [THREE.md](THREE.md) |
+| ./scroll | useSmoothScroll | runtime | [HOOKS.md#optional-scroll](HOOKS.md#optional-scroll) |
+| ./theme-bootstrap | themeColors | runtime | [HOOKS.md#theme](HOOKS.md#theme) |
+| ./theme-bootstrap | themeBootstrapScript | runtime | [HOOKS.md#theme](HOOKS.md#theme) |
+
+## Styles and data
+
+| Public path | Contract |
+| --- | --- |
+| ./styles.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./reset.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./tokens.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./fonts.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./fonts-latin.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./scoped.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./scoped-tokens.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./minimal-reset.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./tokens.json | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./actions.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./forms.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./navigation.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./data-display.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./feedback.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./overlays.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |
+| ./effects.css | [STYLING.md](STYLING.md), [SIZE.md](SIZE.md) |

package/RELEASING.md

@@ -9,7 +9,7 @@ Use [the public contract and compatibility policy](CONTRACTS.md#change-deprecati
 1. Obtain maintainer authorization to publish; validation alone is not authorization.
 2. Select an unused registry version and update package.json, its lockfile and release notes. Never reuse an existing registry version; a locally verified archive does not make it publishable under an already released version. Use a reviewed release commit on main and a matching `vVERSION` tag. The hosted workflow checks the tag version and that its source is an ancestor of origin/main. It cannot publish from a pull request.
 3. Run `npm ci --ignore-scripts`; install Chromium once with `npx playwright install chromium`. Use Node 22.12+ or 24+.
-4. Set `CONTOUR_RELEASE_DIR` to a temporary directory and run `npm run verify:release`. It runs validate once, packs one archive, tests that archive in clean React 18/19 core and optional consumers plus the pinned Next App Router fixtures, checks public API/documentation/generated styles and production size budgets, audits dependencies, and writes `verified-archive.json` with its SHA-256. Core consumers must have no Three.js, Lenis, RHF, TanStack Table or optional date peers installed. Copied adoption recipes run on React 18/19; standalone Vite/Next/reproduction folders run from that archive with their exact versions and production CSP. Review failures and advisories instead of bypassing gates.
+4. Set `CONTOUR_RELEASE_DIR` to a fresh temporary directory without an existing verified-archive.json identity and run `npm run verify:release`. It runs validate once, packs one archive, tests that archive in clean React 18/19 core and optional consumers plus the pinned Next App Router fixtures, checks public API/documentation/generated styles and production size budgets, audits dependencies, runs the mandatory strict accessibility/visual QA for the shipped component, and writes `verified-archive.json` with its SHA-256. Core consumers must have no Three.js, Lenis, RHF, TanStack Table or optional date peers installed. Copied adoption recipes run on React 18/19; standalone Vite/Next/reproduction folders run from that archive with their exact versions and production CSP. Review failures and advisories instead of bypassing gates.
 5. Inspect the archive contents, verify its checksum against `verified-archive.json`, and publish that exact path using `npm publish /absolute/path/to/archive.tgz --ignore-scripts --access public`. `--ignore-scripts` is appropriate here because that exact archive has already passed the release gates; it is not permission to publish an unchecked package. Source `npm publish` retains a prepublishOnly guard. The hosted workflow verifies the checksum again and publishes the archive with provenance, avoiding duplicate source gates.
 6. The owner completes npm authentication/2FA personally. Never put tokens, OTPs or credentials in this repository or logs. Prefer configured trusted publishing and short-lived identity over persistent tokens.
 7. Verify registry version, tarball/integrity and publication date; install that exact registry version in each affected consumer, commit its manifest/lockfile, and run its required checks before deployment. Before closing the starter publication gate, run `CONTOUR_STARTER_REGISTRY=1 npm run test:starters` to verify clean published-package installs; the prepublish archive run alone does not satisfy that gate. Do not substitute a local link or source copy for release validation.
@@ -21,3 +21,9 @@ The tag workflow is configured for a public repository on main. Configuration do
 Browser checks remain for native dialog, reset timing and graphics lifecycle behavior. jsdom does not reproduce all browser default actions. Compatibility checks reuse one archive and avoid another library build when `CONTOUR_ARCHIVE` is provided. Documentation-only diffs retain types, lint, build, archive checks and audit; runtime diffs keep component, browser and complete compatibility checks. Changes to components, hooks, entries, styles, build/package configuration or the Next fixture also run the pinned Next check. Unknown history falls back to complete gates. No measured CI speedup is claimed until the updated workflow has run.
 
 Dependabot proposes dependency/action changes for review; changes are not auto-merged. Actions use pinned revisions and minimal permissions. Do not enable paid runners or private distribution as part of a release. Contributor and application checks remain separate from registry/deployment verification.
+
+## Strict QA and publisher verification
+
+The current candidate adds test:qa as a final release gate. Known violations remain failures; do not write verified-archive.json or publish a candidate after that gate fails. SUPPORT.md names current findings and manual gaps. The separate test:diagnostic:upstream command retains a strict reproduction for the unmodified upstream Popup composition, which the fixed Contour component no longer uses. Do not confuse that diagnostic with the shipped component gate or remove findings from either assertion. Earlier0.6.0 verification predates this stronger gate and is not re-labelled as a clean accessibility result. Visual baseline changes need review of the actual rendered images; do not regenerate them merely to pass a changed UI.
+
+`npm trust list @abuzareal/contour-ui --json` can inspect active publisher relationships without creating one, but npm may require owner browser authorization even for that read. EOTP or unavailable browser access means unverified, not enabled/disabled. The release workflow's id-token:write/provenance flag alone proves neither the active relationship nor an artifact attestation. Review actual registry dist.attestations for the specific release before claiming provenance. Never retrieve/record tokens or change trust relationships as a side effect of verification.

package/STYLING.md

@@ -66,3 +66,7 @@ Caller content/labels remain application-owned. New local overrides cover Button
 Promoted forms, horizontal Tabs/SegmentedControl, pagination icons, menu placement and text alignment are checked in RTL; the keyboard helper accepts an optional direction while retaining LTR defaults. CSS uses logical inline spacing/borders where applicable. Coordinate-driven tab indicators remain physical measurements. No universal RTL promise is made for experimental 3D/effects or application scenes.
 
 Forced-color rules preserve focus, selected control outlines, radio marks, invalid field borders and floating panel boundaries. Production emulation checks both themes and focus; they do not certify every Windows theme or manual screen-reader workflow. Branded paper/ink/lime colors, outlines, typography and depth are retained by compatibility mode and by the isolated branded-font recipe; system-font first use is an intentional option.
+
+## Version and reproduction
+
+Reference version **0.6.2**. A source version does not establish publication; check the npm registry for availability. [Versioned source](https://github.com/abuzareal/contour-ui/tree/v0.6.2/src) and [emitted type inventory](PUBLIC-API.md) describe this contract; tag links resolve after release. [Report Styles 0.6.2](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&component=Styles&version=0.6.2), using the [public minimal reproduction](examples/reproduction) and synthetic data.

package/SUPPORT.md

@@ -0,0 +1,36 @@
+# Support and validation evidence
+
+This matrix describes the current QA work on14 October2026. It is a dated record of selected fixtures, not certification or a claim that every component/browser combination passes. Candidate source and published0.6.0 must not be confused; release artifact/registry evidence is recorded separately. No manual screen-reader session has been completed for this batch.
+
+| Environment / check                                   | Current evidence                                                                                                                                      | Limits / disposition                                                                                                                                           |
+| ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Chromium153.0.8010.12                                 | Production native forms/reset, selected layouts and axe scans exercised. Four light/dark390/1440 layouts passed the initial run.                      | Open and closed Combobox whole-page scans pass after the non-modal popup correction. Visual baselines are authored/reviewed separately, not a full-site audit. |
+| Playwright WebKit26.6                                 | Production selected forms/layout scans exercised; four light/dark narrow/desktop layouts pass.                                                        | Open and closed Combobox scans pass. Playwright WebKit is not physical Safari or VoiceOver proof. Forced-colors emulation is scoped to Chromium.               |
+| Firefox installed1543 build                           | Launch fails before page load: “Could not find profile folder”.                                                                                       | Local environment-blocked, not an application/browser pass. A different working runner is needed for browser evidence.                                         |
+| VoiceOver + Safari                                    | Not tested manually.                                                                                                                                  | QA-13 remains pending; see MANUAL-QA.md.                                                                                                                       |
+| NVDA + Firefox                                        | Not tested manually.                                                                                                                                  | QA-14 remains pending; see MANUAL-QA.md.                                                                                                                       |
+| Physical mobile keyboard, Japanese IME, touch devices | No fresh physical session.                                                                                                                            | Browser touch/composition emulation is a separate bounded result, not device certification.                                                                    |
+| React/framework/package matrix                        | Published0.6.0 has archived same-artifact React18.3.1/19.0.0/19.3.0, optional, Vite and pinned Next App Router/webpack evidence.                      | This is inherited release evidence. The final 0.6.1 archive must pass its own release matrix before publication. Other frameworks remain unverified.           |
+| Hook lifecycles                                       | Print repeat/unmount/absent-theme restoration, delayed hash cancellation and delimiter-safe scroll IDs have failing-before/passing-after regressions. | Unit/component evidence does not verify printer hardware, lazy router mounting or every document ownership composition.                                        |
+
+## Combobox correction and retained diagnostic
+
+The initial 0.6.1 whole-document scan reproduced **aria-hidden-focus** (serious), **page-has-heading-one** and **region** (moderate best-practice findings) in Chromium and WebKit. The input-outside-popup composition used Base UI's Popup focus manager, which hid background content even with Root modal=false. The failed scans are retained as before-fix evidence.
+
+Contour now composes Base UI's public Root, Input, Positioner, List and Item parts with its own **non-modal, labelled popup region**. The listbox shares the visible field label; the popup is hidden when closed. The public Root actions ref completes the immediate closing phase and restores controlled query text to the selected label. Selection, active-descendant navigation, native forms and positioning still use the pinned foundation. The enclosing Dialog remains responsible for modal focus containment. No ARIA is stripped, private upstream internals patched, or axe rule excluded. Whole-document open/closed scans and Tab/Shift+Tab journeys pass in Chromium and WebKit; the existing native-modal, iframe, touch, CSS zoom and form regressions also pass.
+
+`npm run test:diagnostic:upstream` retains the unmodified Base UI 1.9.0 Popup reproduction, including its strict zero-violation assertion. It currently fails in both tested engines. This diagnostic exercises a composition Contour no longer ships; `test:qa` remains the mandatory strict gate for the actual Contour component. A dependency reproduction is not a manual AT result or a universal upstream defect claim. Manual VoiceOver/Safari and NVDA/Firefox reviews remain pending.
+
+## Commands and evidence layers
+
+- `npm test`: deterministic state/helpers/component/lifecycle behavior; no arbitrary coverage target.
+- `npm run test:browser`: existing native dialog/forms/overlay/style/optional scene journeys in Chromium.
+- `npm run test:qa`: production fixture, strict axe assertion, focus/forms/overlay journeys and a small visual baseline. Any finding in the shipped fixture produces a failing result. Set CONTOUR_QA_ENGINES=webkit or a comma-separated engine set to exercise other installed browsers; browser launch failures remain visible.
+- `npm run test:compat`: the packed React/optional/source-declaration matrix and copied recipes, using one archive when CONTOUR_ARCHIVE is set.
+- Exact Vite/Next starter, Next integration, size and registry checks have separate scripts in RELEASING.md. Passing build/types does not prove a browser/deployment.
+
+Every result should name package/commit/archive, date, OS/browser/tool versions, checked components/states and passed/failed/skipped/blocked outcomes. Keep failed first-pass evidence, identify authored fixture corrections and rerun only affected work. A screenshot baseline cannot establish accessible names/announcements; axe cannot certify WCAG or physical AT. Important errors need persistent text and chart data needs meaningful text/table alternatives in their applications.
+
+## Version and reproduction
+
+Reference version **0.6.2**. A source version does not establish publication; check the npm registry for availability. [Versioned source](https://github.com/abuzareal/contour-ui/tree/v0.6.2/src) and [emitted type inventory](PUBLIC-API.md) describe this contract; tag links resolve after release. [Report Support matrix 0.6.2](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&component=Support%20matrix&version=0.6.2), using the [public minimal reproduction](examples/reproduction) and synthetic data.

package/THREE.md

@@ -0,0 +1,40 @@
+# Optional Three reference
+
+These experimental exports live at `@abuzareal/contour-ui/three`. Core components do not import Three or Lenis. Install the declared Three peer (and matching @types/three for TypeScript), load the entry lazily and import component styles deliberately. [GETTING-STARTED.md](GETTING-STARTED.md) contains the actual lazy static-fallback/sizing/pause recipe. [PUBLIC-API.md](PUBLIC-API.md) links exact source and types; experimental does not mean unversioned or safe to deep-import.
+
+## Scene components
+
+Sculpture requires `{motionEnabled: boolean}` and renders the fixed three-link brand scene in a loading/ready/unavailable host. ObjectStudy requires `{label: string, motionEnabled: boolean, study: "materials" | "geometry"}` and renders an aria-labelled image host with four related objects. These are authored visual studies, not a general model viewer, arbitrary asset loader or application data visualization. The caller supplies block sizing and adjacent meaningful text. No native ref/imperative scene API is exposed by these two components. Key/remount when setup inputs such as study must change; current scene setup is captured at mount.
+
+Unavailable WebGL or partial setup leaves an unavailable host; it does not manufacture a fallback. Keep useful static DOM/SVG outside SceneBoundary/Suspense. SceneBoundary catches React descendant errors and hides failed scene content; it has no fallback prop and does not replace domain content. Headless success does not certify physical GPUs, every browser or context restoration with custom resources.
+
+## useThreeStage
+
+`useThreeStage(hostRef, {motionEnabled, setup, cameraDistance})` returns void. hostRef targets a connected sized HTMLDivElement. setup(context) and cameraDistance(aspect) are captured once per mount; remount for a new setup/framing contract. motionEnabled updates without remounting. Camera distance must be finite and appropriate for the scene/aspect; no automatic framing of arbitrary external objects is promised.
+
+StageContext contains scene, PerspectiveCamera, WebGLRenderer and optional onDispose(cleanup). Register each allocated resource immediately, before later code can throw. StageScene requires update(frame), rest() and dispose(); resize() is optional. StageFrame contains delta seconds (bounded to 0–0.05), accumulated running elapsed seconds and a Vector2 pointer offset in -0.5..0.5. Do not dispose the same material/geometry through both onDispose and dispose; register one owner. When shared among meshes, dispose shared resources once.
+
+The stage owns renderer/canvas, neutral tone mapping, studio lights/environment, resize/intersection/visibility/context listeners and its animation frame. Device pixel ratio is capped at 1.75. Frames run only with motion enabled, intersection visibility, visible document and usable context; pause snaps to rest and redraws. The application combines system reduced motion and app pause before passing motionEnabled. Context loss marks unavailable and stops updates; restoration redraws/resumes. Setup failures and unmount run registered disposers in reverse order, including allocations registered before setup returned. A failing disposer is reported and does not prevent later cleanup. The caller owns custom resource allocation, cleanup, fetching, asset rights and fallback meaning.
+
+## Material and geometry factories
+
+| Export             | Result and ownership                                                                                                                                          |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| createChrome       | New MeshStandardMaterial: neutral chrome, metalness1/roughness0.19. Caller disposes it.                                                                       |
+| createLime         | New MeshStandardMaterial: authored lime, metalness0.25/roughness0.26. Caller disposes it.                                                                     |
+| createInk          | New MeshStandardMaterial: dark matte, metalness0.1/roughness0.62. Caller disposes it.                                                                         |
+| createGlass        | New MeshPhysicalMaterial with transmission/thickness/attenuation; caller disposes it. It is not a general physically validated optical simulation.            |
+| createLinkGeometry | New centred beveled/extruded rounded-square link geometry; caller disposes it.                                                                                |
+| createMaterialSet  | ObjectSet of four meshes sharing link geometry with chrome/lime/ink/glass materials. Call set.dispose once; do not also dispose shared members independently. |
+| createGeometrySet  | ObjectSet of torus knot, icosahedron, rounded box and capsule meshes with authored materials. Call set.dispose once.                                          |
+| objectStudies      | Selection mapping materials→createMaterialSet, geometry→createGeometrySet. Factories create new owned sets; this is not an allocated global scene.            |
+
+ObjectSet is `{objects: THREE.Object3D[]; dispose: () => void}`. Disposal releases factory-owned geometry/materials; it does not remove caller-added objects from a scene or dispose unrelated textures. ObjectStudyKind is `keyof typeof objectStudies`. Factories do not create render loops, fetch files or install event listeners. Future shape/material additions remain demand-led and measured; importing optional helpers does not justify making Three a core dependency.
+
+## Setup and lifecycle limits
+
+Use one stage owner per host, stable setup and deliberate size. Product controls, labels, keyboard alternatives and observed data belong outside decorative canvas. There is no animation-control timeline, general object selection, scene editor, SSR WebGL renderer or universally verified third-party modal interoperability. Optional declaration/build and sampled lifecycle checks are distinct from the [dated support matrix](SUPPORT.md). Inspect public code and reproduce with synthetic scenes rather than private assets.
+
+## Version and reproduction
+
+Reference version **0.6.2**. A source version does not establish publication; check the npm registry for availability. [Versioned source](https://github.com/abuzareal/contour-ui/tree/v0.6.2/src) and [emitted type inventory](PUBLIC-API.md) describe this contract; tag links resolve after release. [Report Three 0.6.2](https://github.com/abuzareal/contour-ui/issues/new?template=bug_report.yml&component=Three&version=0.6.2), using the [public minimal reproduction](examples/reproduction) and synthetic data.

package/dist/components/ui/Combobox.js

@@ -31,6 +31,13 @@ const Combobox = forwardRef(function Combobox({ label, options, filteredOptions,
     const { ref: input, attach } = useControlRef(forwardedRef);
     const [anchor, setAnchor] = useState(null);
     const attachInput = useMemo(() => composeRefs(attach, inputProps?.ref, setAnchor), [attach, inputProps?.ref]);
+    const actions = useRef(null);
+    // The custom non-modal popup has no exit animation. Complete the public close
+    // lifecycle after it is hidden so controlled query text returns to the selected label.
+    useLayoutEffect(() => {
+        if (!visible)
+            actions.current?.unmount();
+    }, [visible]);
     const root = useRef(null);
     const attachRoot = useMemo(() => composeRefs(root, rootProps?.ref), [rootProps?.ref]);
     const positioner = useRef(null);
@@ -65,8 +72,8 @@ const Combobox = forwardRef(function Combobox({ label, options, filteredOptions,
     const results = loading || searchError ? [] : filteredOptions;
     const statusId = `${id}-search-status`;
     const positioning = useComboboxAnchor(anchor, positioner);
-    const popup = (_jsx(FloatingScope, { anchor: anchor, open: visible, target: target, onDirectionChange: setDirection, children: _jsx(BaseCombobox.Positioner, { ...positioning, ref: attachPositioner, className: ccx("combobox-positioner"), positionMethod: "fixed", side: side, align: align, sideOffset: Number.isFinite(sideOffset) ? sideOffset : 8, collisionPadding: Number.isFinite(collisionPadding) ? Math.max(0, collisionPadding) : 8, children: _jsxs(BaseCombobox.Popup, { ...popupProps, className: ccx("combobox-popup", popupProps?.className), children: [_jsx(BaseCombobox.Empty, { className: ccx("combobox-status"), children: loading ? loadingText : (searchError ?? emptyText) }), searchError && onRetry && (_jsx("button", { type: "button", className: ccx("combobox-retry"), onClick: onRetry, children: retryLabel })), _jsx(BaseCombobox.List, { className: ccx("combobox-list"), children: (option) => (_jsxs(BaseCombobox.Item, { className: ccx("combobox-option"), value: option.value, disabled: option.disabled, children: [_jsx("span", { children: option.label }), _jsx(BaseCombobox.ItemIndicator, { children: _jsx(Check, { size: 14, "aria-hidden": "true" }) })] }, option.value)) })] }) }) }));
-    return (_jsx(DirectionProvider, { direction: direction, children: _jsx("div", { ...rootProps, ref: attachRoot, className: ccx("combobox", rootProps?.className), children: _jsxs(BaseCombobox.Root, { items: collection, filteredItems: results, value: missing ? null : value, onValueChange: (next) => {
+    const popup = (_jsx(FloatingScope, { anchor: anchor, open: visible, target: target, onDirectionChange: setDirection, children: _jsx(BaseCombobox.Positioner, { ...positioning, ref: attachPositioner, className: ccx("combobox-positioner"), positionMethod: "fixed", side: side, align: align, sideOffset: Number.isFinite(sideOffset) ? sideOffset : 8, collisionPadding: Number.isFinite(collisionPadding) ? Math.max(0, collisionPadding) : 8, children: _jsxs("div", { role: "region", "aria-labelledby": `${id}-label`, ...popupProps, className: ccx("combobox-popup", popupProps?.className), hidden: !visible, children: [_jsx(BaseCombobox.Empty, { className: ccx("combobox-status"), children: loading ? loadingText : (searchError ?? emptyText) }), searchError && onRetry && (_jsx("button", { type: "button", className: ccx("combobox-retry"), onClick: onRetry, children: retryLabel })), _jsx(BaseCombobox.List, { className: ccx("combobox-list"), "aria-labelledby": `${id}-label`, children: (option) => (_jsxs(BaseCombobox.Item, { className: ccx("combobox-option"), value: option.value, disabled: option.disabled, children: [_jsx("span", { children: option.label }), _jsx(BaseCombobox.ItemIndicator, { children: _jsx(Check, { size: 14, "aria-hidden": "true" }) })] }, option.value)) })] }) }) }));
+    return (_jsx(DirectionProvider, { direction: direction, children: _jsx("div", { ...rootProps, ref: attachRoot, className: ccx("combobox", rootProps?.className), children: _jsxs(BaseCombobox.Root, { actionsRef: actions, items: collection, filteredItems: results, value: missing ? null : value, onValueChange: (next) => {
                     if (controlledValue === undefined)
                         setInternalValue(next);
                     setQuery(null);
@@ -86,8 +93,10 @@ const Combobox = forwardRef(function Combobox({ label, options, filteredOptions,
                         details.cancel();
                         return;
                     }
-                    if (!next)
+                    if (!next) {
+                        details.preventUnmountOnClose();
                         setQuery(null);
+                    }
                     changeOpen(next);
                 }, name: name, form: form, required: required, disabled: disabled, readOnly: readOnly, children: [_jsx(Field, { id: id, label: label, hint: hint, error: fieldError, required: required, disabled: disabled, hideLabel: hideLabel, children: _jsxs(BaseCombobox.InputGroup, { className: ccx("field-control combobox-control"), children: [_jsx(BaseCombobox.Input, { ...inputProps, onMouseDown: (event) => {
                                         inputProps?.onMouseDown?.(event);
@@ -104,6 +113,12 @@ const Combobox = forwardRef(function Combobox({ label, options, filteredOptions,
                                         if (event.defaultPrevented ||
                                             (event.key === "Escape" && !visible))
                                             event.preventBaseUIHandler();
+                                        else if (event.key === "Tab" && visible) {
+                                            // Close even when native traversal leaves the document (for example Safari's last field).
+                                            // Do not preventDefault: the browser still owns the next keyboard target.
+                                            event.preventBaseUIHandler();
+                                            close();
+                                        }
                                     }, ref: attachInput, id: id, form: form, "aria-labelledby": [
                                         `${id}-label`,
                                         inputProps?.["aria-labelledby"],

package/dist/components/ui/Tooltip.js

@@ -73,5 +73,5 @@ export default function Tooltip({ content, children, placement = "top", align =
                     collisionPadding,
                     portal,
                     container,
-                }, children: _jsx("span", { ref: panel, id: id, role: "tooltip", className: ccx("tooltip mono", `tooltip-${placement}`, open && "is-open"), onPointerEnter: enter, onPointerLeave: leave, children: content }) })] }));
+                }, children: _jsx("span", { ref: panel, id: id, role: "tooltip", hidden: !open, className: ccx("tooltip mono", `tooltip-${placement}`, open && "is-open"), onPointerEnter: enter, onPointerLeave: leave, children: content }) })] }));
 }

package/dist/hooks/useInitialHashScroll.js

@@ -24,6 +24,10 @@ export default function useInitialHashScroll() {
         align();
         userScrollEvents.forEach((event) => window.addEventListener(event, markScrolled, { passive: true }));
         document.fonts.ready.then(align);
-        return () => userScrollEvents.forEach((event) => window.removeEventListener(event, markScrolled));
+        return () => {
+            // Font readiness cannot be cancelled; an unmounted owner must not scroll a later page.
+            userScrolled = true;
+            userScrollEvents.forEach((event) => window.removeEventListener(event, markScrolled));
+        };
     }, []);
 }

package/dist/hooks/usePrintPreparation.js

@@ -6,7 +6,12 @@ export default function usePrintPreparation() {
         const root = document.documentElement;
         let expanded = [];
         let screenTheme;
+        let printing = false;
         const prepare = () => {
+            // Some browsers repeat beforeprint while the same print preview is open.
+            if (printing)
+                return;
+            printing = true;
             expanded = [
                 ...document.querySelectorAll("details:not([open])"),
             ];
@@ -15,9 +20,14 @@ export default function usePrintPreparation() {
             root.dataset.theme = "light";
         };
         const restore = () => {
+            if (!printing)
+                return;
+            printing = false;
             expanded.forEach((details) => (details.open = false));
             expanded = [];
-            if (screenTheme)
+            if (screenTheme === undefined)
+                delete root.dataset.theme;
+            else
                 root.dataset.theme = screenTheme;
         };
         window.addEventListener("beforeprint", prepare);
@@ -25,6 +35,7 @@ export default function usePrintPreparation() {
         return () => {
             window.removeEventListener("beforeprint", prepare);
             window.removeEventListener("afterprint", restore);
+            restore();
         };
     }, []);
 }

package/dist/hooks/useScrollSpy.js

@@ -5,10 +5,13 @@ import { useEffect, useState } from "react";
 const activationLine = 0.3;
 export default function useScrollSpy(ids) {
     const [activeId, setActiveId] = useState("");
-    const key = ids.join("|");
+    const key = JSON.stringify(ids);
     useEffect(() => {
-        const elements = key
-            .split("|")
+        const parsed = JSON.parse(key);
+        if (!Array.isArray(parsed) ||
+            !parsed.every((id) => typeof id === "string"))
+            return;
+        const elements = parsed
             .map((id) => document.getElementById(id))
             .filter((element) => element !== null);
         let frame = 0;