@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/components/command/CommandItem.vue.d.ts

@@ -1,16 +1,12 @@
-import { type HTMLAttributes } from 'vue';
-import type { ComboboxItemProps } from 'reka-ui';
-type __VLS_Props = ComboboxItemProps & {
-    class?: HTMLAttributes['class'];
-};
-declare var __VLS_8: {};
+import type { ComboboxItemProps } from "../combobox/types";
+declare var __VLS_10: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_10) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    select: (event: import("reka-ui").ListboxItemSelectEvent<import("reka-ui").AcceptableValue>) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSelect?: ((event: import("reka-ui").ListboxItemSelectEvent<import("reka-ui").AcceptableValue>) => any) | undefined;
+declare const __VLS_base: import("vue").DefineComponent<ComboboxItemProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (event: import("../_shared/interaction").ListboxItemSelectEvent<import("../_shared/selection").SelectionValue>) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxItemProps> & Readonly<{
+    onSelect?: ((event: import("../_shared/interaction").ListboxItemSelectEvent<import("../_shared/selection").SelectionValue>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/command/CommandList.vue.d.ts

@@ -1,27 +1,20 @@
-import { type HTMLAttributes } from 'vue';
-import type { ComboboxContentProps } from 'reka-ui';
-import { type Surface } from '../_shared/useSurfaceAxis';
-type __VLS_Props = ComboboxContentProps & {
-    class?: HTMLAttributes['class'];
-    surface?: Surface;
-};
-declare var __VLS_8: {};
+import type { CommandListProps } from "./types";
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<CommandListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     escapeKeyDown: (event: KeyboardEvent) => any;
-    pointerDownOutside: (event: import("reka-ui").PointerDownOutsideEvent) => any;
-    focusOutside: (event: import("reka-ui").FocusOutsideEvent) => any;
-    interactOutside: (event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    pointerDownOutside: (event: import("../_shared/interaction").PointerDownOutsideEvent) => any;
+    focusOutside: (event: import("../_shared/interaction").FocusOutsideEvent) => any;
+    interactOutside: (event: import("../_shared/interaction").PointerDownOutsideEvent | import("../_shared/interaction").FocusOutsideEvent) => any;
+}, string, import("vue").PublicProps, Readonly<CommandListProps> & Readonly<{
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-    onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
-    onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
-    onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: import("../_shared/interaction").PointerDownOutsideEvent) => any) | undefined;
+    onFocusOutside?: ((event: import("../_shared/interaction").FocusOutsideEvent) => any) | undefined;
+    onInteractOutside?: ((event: import("../_shared/interaction").PointerDownOutsideEvent | import("../_shared/interaction").FocusOutsideEvent) => any) | undefined;
 }>, {
-    surface: Surface;
-    disableOutsidePointerEvents: boolean;
+    surface: import("../..").Surface;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/command/CommandSeparator.vue.d.ts

@@ -1,13 +1,9 @@
-import { type HTMLAttributes } from 'vue';
-import type { ComboboxSeparatorProps } from 'reka-ui';
-type __VLS_Props = ComboboxSeparatorProps & {
-    class?: HTMLAttributes['class'];
-};
+import type { ComboboxSeparatorProps } from "../combobox/types";
 declare var __VLS_8: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<ComboboxSeparatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComboboxSeparatorProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/command/CommandShortcut.vue.d.ts

@@ -1,6 +1,6 @@
-import type { HTMLAttributes } from 'vue';
+import type { HTMLAttributes } from "vue";
 type __VLS_Props = {
-    class?: HTMLAttributes['class'];
+    class?: HTMLAttributes["class"];
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/components/command/dialogContext.d.ts

@@ -0,0 +1,6 @@
+type CommandDialogContext = {
+    dismiss: () => void;
+};
+export declare function provideCommandDialogContext(dismiss: () => void): void;
+export declare function useOptionalCommandDialogContext(): CommandDialogContext | null;
+export {};

package/dist/components/command/index.d.ts

@@ -1,10 +1,10 @@
-export { default as Command } from './Command.vue';
-export { default as CommandDialog } from './CommandDialog.vue';
-export { default as CommandEmpty } from './CommandEmpty.vue';
-export { default as CommandGroup } from './CommandGroup.vue';
-export { default as CommandInput } from './CommandInput.vue';
-export { default as CommandItem } from './CommandItem.vue';
-export { default as CommandList } from './CommandList.vue';
-export { default as CommandSeparator } from './CommandSeparator.vue';
-export { default as CommandShortcut } from './CommandShortcut.vue';
-export type { MenuItemVariants } from '../_shared';
+export { default as Command } from "./Command.vue";
+export { default as CommandDialog } from "./CommandDialog.vue";
+export { default as CommandEmpty } from "./CommandEmpty.vue";
+export { default as CommandGroup } from "./CommandGroup.vue";
+export { default as CommandInput } from "./CommandInput.vue";
+export { default as CommandItem } from "./CommandItem.vue";
+export { default as CommandList } from "./CommandList.vue";
+export { default as CommandSeparator } from "./CommandSeparator.vue";
+export { default as CommandShortcut } from "./CommandShortcut.vue";
+export type { CommandDialogEmits, CommandDialogProps, CommandEmits, CommandListProps, CommandProps, } from "./types";

package/dist/components/command/styles.css

@@ -0,0 +1 @@
+.command { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; border-radius: var(--radius-panel); color: var(--popover-foreground); } .command-dialog__content { overflow: hidden; padding: 0; } .command__input-wrapper { display: flex; align-items: center; border-block-end: 1px solid var(--border); padding-inline: 0.75rem; } .command__input-icon { width: 1rem; height: 1rem; flex: none; margin-inline-end: 0.5rem; opacity: 0.5; } .command-dialog__content .command__input-icon, .command-dialog__content .command__item > svg { width: 1.25rem; height: 1.25rem; } .command__input { width: 100%; height: var(--dropdown-input-height); border: 0; border-radius: var(--radius-input); outline: 0; background: transparent; padding-block: 0.75rem; color: inherit; font: inherit; font-size: var(--dropdown-text); } .command-dialog__content .command__input { height: 3rem; } .command__input::placeholder { color: var(--muted-foreground); } .command__input:disabled { cursor: not-allowed; opacity: var(--opacity-disabled); } .command__list { max-height: var(--overlay-max-block); overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; padding: var(--panel-padding); } .command__group { overflow: hidden; padding: 0.25rem; color: var(--foreground); } .command__group-label { padding: 0.375rem 0.5rem; color: var(--muted-foreground); font-size: var(--dropdown-text-secondary); font-weight: 500; } .command__item { position: relative; display: flex; width: 100%; align-items: center; padding: 0.375rem 0.5rem; cursor: default; outline: none; color: inherit; font-size: var(--dropdown-text); user-select: none; } .command-dialog__content .command__item { padding-block: 0.75rem; } .command__item[data-disabled] { pointer-events: none; cursor: not-allowed; opacity: var(--opacity-disabled); } .command__empty { padding-block: 1.5rem; text-align: center; font-size: var(--dropdown-text); } .command__separator { height: 1px; margin-inline: -0.25rem; background: var(--border); } .command__shortcut { margin-inline-start: auto; color: var(--muted-foreground); font-size: var(--dropdown-text-secondary); letter-spacing: 0.1em; }

package/dist/components/command/types.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLAttributes } from "vue";
+import type { Surface } from "../_shared/axes";
+import type { DialogProps } from "../dialog/Dialog.vue";
+import type { ComboboxValue } from "../combobox/types";
+export interface CommandProps {
+    modelValue?: ComboboxValue;
+    open?: boolean;
+    disabled?: boolean;
+    class?: HTMLAttributes["class"];
+    surface?: Surface;
+}
+export interface CommandEmits {
+    "update:modelValue": [value: ComboboxValue];
+    "update:open": [value: boolean];
+}
+export interface CommandDialogProps extends DialogProps {
+    surface?: Surface;
+    modelValue?: ComboboxValue;
+}
+export interface CommandDialogEmits {
+    "update:open": [value: boolean];
+    "update:modelValue": [value: ComboboxValue];
+}
+export interface CommandListProps {
+    class?: HTMLAttributes["class"];
+    surface?: Surface;
+}

package/dist/components/completion-seal/CompletionSeal.vue.d.ts

@@ -4,7 +4,7 @@ export interface CompletionSealProps {
     shape?: CompletionSealShape;
     /**
      * The accessible completion announcement (the `role="status"`/`aria-live` text — a
-     * screen reader hears "Speedtest complete", etc.). The gold mark is the visual.
+     * screen reader hears "Task complete", etc.). The gold mark is the visual.
      */
     label?: string;
     /**
@@ -14,7 +14,7 @@ export interface CompletionSealProps {
      */
     play?: boolean;
     /**
-     * The earned-gold garnish (BG.W-SEAL-DISC) — the result exceeded the user's
+     * The earned-gold garnish — the result exceeded the user's
      * historical best. Arms `[data-best]`, which re-points `--seal-ink` onto the brighter
      * `--seal-best` earned-gold register (a colour LIFT within the gold family — gold is
      * EARNED, Q2). Compositor-only; the base seal ink stays the completion register.

package/dist/components/completion-seal/constants.d.ts

@@ -4,7 +4,7 @@
  *  - `ring`  — a ring/circle around the completion (a seal around the event).
  *  - `disc`  — the composed earned-coin gesture: a filled gold disc FACE with the ring
  *    stroke-draw affirmation around it and the check draw-in inside, SEQUENCED
- *    disc→ring→check (the hero completion coin — BG.W-SEAL-DISC / SPEEDTEST-AX #1).
+ *    disc→ring→check (the hero completion coin).
  *  - `wordmark` — a self-contained seal mark (a stylized seal glyph).
  *
  * `check`/`ring`/`wordmark` share the ONE gold-draw mechanism (the `--seal-draw`
@@ -53,7 +53,7 @@ export declare const COMPLETION_SEAL_DISC: {
     readonly r: 21;
 };
 /**
- * The SPRING register the draw rides (SPRING-EASE / W-MOTION-CANON P2 enter-bouncy):
+ * The SPRING register the draw rides (SPRING-EASE, P2 enter-bouncy):
  *  - the SETTLE leg (the spatial overshoot) rides `--spring-bouncy` (an ENTER may
  *    overshoot on arrival);
  *  - the DRAW + GLINT legs ride the `--spring-snappy` CLOCK (the snappy settle duration)

package/dist/components/completion-seal/styles.css

@@ -0,0 +1 @@
+.completion-seal { --seal-ink: var(--phase-complete-color, var(--color-gold)); display: inline-flex; align-items: center; justify-content: center; transform: scale(var(--seal-scale, 1)); } .completion-seal[data-best] { --seal-best: var(--color-gold-light, var(--gold-light)); --seal-ink: var(--seal-best); } .completion-seal[data-shape="disc"] { --seal-ring-delay: var(--spring-snappy-duration, 0.34s); --seal-check-delay: calc(var(--spring-snappy-duration, 0.34s) * 2); } .completion-seal__disc { fill: var(--seal-disc-fill, color-mix(in oklab, var(--seal-ink), transparent 82%)); stroke: none; } .completion-seal__mark { fill: none; stroke: var(--seal-ink); stroke-width: var(--seal-stroke-width, 6); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%); --metal-glow-blur: var(--metal-glow-blur-default, 0.5em); --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35); filter: drop-shadow( 0 0 calc(var(--metal-glow-blur) * var(--seal-glint, 0)) color-mix( in oklab, var(--seal-ink), transparent calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%) ) ); } @media (prefers-reduced-motion: no-preference) { .completion-seal[data-play] { animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s) var(--spring-bouncy) both; } .completion-seal:not([data-shape="disc"])[data-play] .completion-seal__mark { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) both, completion-seal-glint var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--spring-snappy-duration, 0.34s) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__disc { animation: completion-seal-disc-in var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__ring { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--seal-ring-delay, 0.34s) both; } .completion-seal[data-shape="disc"][data-play] .completion-seal__check { animation: completion-seal-draw var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) var(--seal-check-delay, 0.68s) both, completion-seal-glint var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out) calc( var(--seal-check-delay, 0.68s) + var(--spring-snappy-duration, 0.34s) ) both; } } @keyframes completion-seal-draw { from { --seal-draw: 0%; } to { --seal-draw: 100%; } } @keyframes completion-seal-disc-in { from { opacity: 0; } to { opacity: 1; } } @keyframes completion-seal-settle { from { --seal-scale: 0.92; } to { --seal-scale: 1; } } @keyframes completion-seal-glint { 0% { --seal-glint: 0; } 45% { --seal-glint: 1; } 100% { --seal-glint: 0; } }

package/dist/components/configurator/Configurator.vue.d.ts

@@ -34,14 +34,14 @@ export type ConfiguratorAsideSide = "left" | "right";
  * frame — the §2.1 reflow (gallery up-top + larger + scrollable). The stage +
  * controls reclaim the full height below it. An additive axis: the grid arm is
  * the precompiled `[data-slot=configurator][data-gallery=top]` rule in
- * configurator.css (never a dead JIT bracket — the BC.W-CONFIG-RIGHT lesson).
+ * configurator.css (never a dead JIT bracket — the lesson).
  */
 export type ConfiguratorGalleryPlacement = "aside" | "top";
 /**
  * Generic preset descriptor. Consumers pass `T` as the live config shape.
  * The primitive carries no preset semantics beyond `key + label` for
  * the picker row and `config: T` for the active payload — preset
- * selection / diff-from-preset / reset semantics live in the optional
+ * selection, diff-from-preset, reset semantics live in the optional
  * `useConfiguratorState<T>` composable.
  */
 export interface ConfiguratorPreset<T> {
@@ -68,10 +68,10 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         /** Scroll behavior for the controls column. Default: `auto`. */
         scrollMode?: ConfiguratorScrollMode;
         /**
-         * Row-level density axis (N.W2 Lane A). Cascades to descendant
+         * Row-level density axis. Cascades to descendant
          * `<ConfiguratorRow>` children via provide/inject. A row may
          * override locally by setting its own `size` prop (prop wins
-         * over inject). Default `"md"` preserves the prior
+         * over inject). Default `"md"` uses the
          * `gap-1.5 py-2` recipe exactly.
          */
         size?: ConfiguratorSize;
@@ -93,7 +93,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
          * Aside width band at `lg`+ width, as a CSS length pair driving
          * `minmax(--configurator-aside-min, --configurator-aside-max)`. The
          * prop sets the two inline custom properties; consumers may instead
-         * (or also) set `--configurator-aside-min` / `--configurator-aside-max`
+         * (or also) set `--configurator-aside-min`, `--configurator-aside-max`
          * via the cascade. Default band is `280px`/`360px`. Pass a single
          * length to pin the band (`min === max`), or a `[min, max]` pair.
          */
@@ -149,7 +149,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         (e: "reset"): void;
     };
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/configurator/ConfiguratorLayer.vue.d.ts

@@ -11,25 +11,21 @@ import { type HTMLAttributes } from "vue";
  * SegmentedTabs / DockLayerGroup at the parent governs which layer is
  * active).
  *
- * # M.W2 Lane A (F-ε-3 fix) — recursion-free reveal
+ * Recursion-free reveal
  *
- * Earlier versions composed `<Collapsible>` + `<CollapsibleContent>` from
- * reka-ui to drive the height transition. Under Lighthouse's strict cold-
- * load discipline (CPU throttle + network throttle + headless Chrome
- * stable layout gating) this surfaced a watcher-graph race inside reka-
- * ui's `<Presence>` + `<CollapsibleContent>` height-measurement watchers
- * — `getComputedStyle(node).animationName` + `getBoundingClientRect()`
- * reads inside a `watch([isOpen, presentRef.value?.present])` callback
- * created a non-convergent loop that tripped Vue's 100-iteration
- * recursion cap on `<Configurator>`.
- *
- * This component now uses the canonical CSS-only animated-reveal pattern
+ * The reveal is the canonical CSS-only animated-reveal pattern
  * (`grid-template-rows: 0fr ↔ 1fr` with `transition-[grid-template-rows]`)
- * which requires no JS watchers and produces no reactive graph. The
- * a11y surface (`role="button"` + `aria-expanded` + `aria-controls`)
- * matches the prior reka-ui shape; consumers do not need to migrate.
- *
- * Cf. `docs/tranches/M/audit/W2-Lane-A-F-eps-3-proof.md`.
+ * which requires no JS watchers and produces no reactive graph. A
+ * JS-watcher collapsible (a reka-ui `<Collapsible>` + `<CollapsibleContent>`
+ * height transition) is deliberately NOT used: under Lighthouse's strict cold-
+ * load discipline (CPU throttle + network throttle + headless Chrome
+ * stable layout gating) reka-ui's `<Presence>` + `<CollapsibleContent>`
+ * height-measurement watchers — `getComputedStyle(node).animationName` +
+ * `getBoundingClientRect()` reads inside a `watch([isOpen,
+ * presentRef.value?.present])` callback — form a non-convergent loop that
+ * trips Vue's 100-iteration recursion cap on `<Configurator>`. The
+ * a11y surface (`role="button"` + `aria-expanded` + `aria-controls`) is the
+ * standard collapsible shape.
  */
 type __VLS_Props = {
     /** Header label (large, semantic). */
@@ -43,7 +39,7 @@ type __VLS_Props = {
     /**
      * Opt-in inter-row hairline. When set, sibling rows inside the body
      * are separated by a `border-border/30` top rule (the first row stays
-     * flush). Default `false` keeps the body gap-only (pre-AU.W9 visual).
+     * flush). Default `false` keeps the body gap-only.
      */
     dividers?: boolean;
     class?: HTMLAttributes["class"];

package/dist/components/configurator/ConfiguratorRow.vue.d.ts

@@ -13,15 +13,14 @@ import { type ConfiguratorSize } from "./size";
  *
  * # The double-label API (value.js L14)
  *
- * The label header is a first-class TRIPLE: `label` (the primary, sans /
- * medium), the optional `sub` (a SECONDARY descriptive label — sans, muted —
- * paired inline with the primary), and the optional `name` (the mono token /
- * spec reference, or a live numeric readout). All three are declarative props,
+ * The label header is a first-class triple: `label` (primary sans medium), the optional
+ * `sub` (secondary descriptive text paired inline), and the optional `name` (a mono token,
+ * specification reference, or live numeric readout). All three are declarative props,
  * so a consumer expresses a "double-label" row (primary + secondary) WITHOUT a
  * `:deep()` reach into the slot or a hand-rolled in-slot sans+mono pair. Use
  * `sub` for a descriptive secondary label and `name` for a mono token/value.
  *
- * # Size axis (BH.W-SIZE-UNIFY)
+ * # Size axis
  *
  * The row honors a three-rung size axis (`sm` | `md` | `lg`).
  * Resolution order:
@@ -36,21 +35,19 @@ import { type ConfiguratorSize } from "./size";
  * `"md"` rung is functionally identical to the no-size
  * fallback; it exists so consumers can be explicit.
  *
- * # ConfiguratorRow vs LabeledField — recorded divergence (AZ.W-METRIC-UNIFY §B)
+ * # ConfiguratorRow vs LabeledField
  *
  * Both are "label (+ meta) above/beside a slotted control", but they are NOT
  * interchangeable — they emphasize DIFFERENT features:
- *  - **ConfiguratorRow** (this) — for TOKEN / PRESET controls. Carries the
+ *  - **ConfiguratorRow** (this) — for TOKEN, PRESET controls. Carries the
  *    token-`name` reference, the opt-in `reset` affordance (`canReset`), and the
  *    three-rung `size` axis (local-prop-over-inject). No a11y for/id wiring.
- *  - **LabeledField** — for FORM fields. Carries the `for`/`id` label↔control
- *    a11y wiring (`controlId`/`labelId`/`errorId`), the `tooltip`, the `required`
- *    asterisk, and the `aria-live` `error` region.
+ *  - **LabeledField** — for form controls. Carries stable label, description,
+ *    error, requirement, state, and layout associations without styling the control.
  *
- * Reach for ConfiguratorRow inside a `<Configurator>` for token sliders/selects;
- * reach for LabeledField for accessible form inputs. The divergence is recorded
- * (NOT a forced merge — no ≥2-consumer shared-chassis need surfaced) in
- * `docs/precepts/design-idioms.md §9`, alongside the `cn`/`focus-ring` keeps.
+ * Reach for ConfiguratorRow only when token metadata or reset is the content;
+ * use LabeledField directly for an accessible form control, including inside a
+ * Configurator. Never nest both solely to repeat a label.
  */
 type __VLS_Props = {
     /** Display label (top-left, primary). */
@@ -62,16 +59,16 @@ type __VLS_Props = {
      * a two-part label declaratively — no `:deep()` reach, no in-slot label pair.
      */
     sub?: string;
-    /** Optional token name / spec reference (right of label, monospaced). */
+    /** Optional token name, spec reference (right of label, monospaced). */
     name?: string;
-    /** Optional helper / value description (below the control). */
+    /** Optional helper, value description (below the control). */
     description?: string;
     /** Show the reset affordance (top-right). */
     canReset?: boolean;
     /**
      * Size rung. Overrides the value injected by an ancestor
      * `<Configurator>` when set. Omit to follow the inject (or to fall
-     * back to the pre-N.W2 `gap-1.5 py-2` recipe when there is no
+     * back to the `gap-1.5 py-2` recipe when there is no
      * ancestor configurator).
      */
     size?: ConfiguratorSize;

package/dist/components/configurator/size.d.ts

@@ -1,13 +1,11 @@
 import type { ComputedRef } from "vue";
 /**
- * Size axis for `<Configurator>` + `<ConfiguratorRow>` (BH.W-SIZE-UNIFY — the
- * clean-break of the size/density collision onto the shared Size ordinal). The old
- * `"mobile"` rung is DROPPED — a coarse-pointer state is a `@media(pointer:coarse)`
- * concern, never a scale rung (axes.ts §sub-range-law).
+ * Size axis for `<Configurator>` and `<ConfiguratorRow>`. Coarse-pointer state is a
+ * `@media(pointer:coarse)` concern, not a scale rung.
  *
- * - `"sm"`  — slightly tighter than the default; dense studios (was `"compact"`).
- * - `"md"`  — current default; matches the `gap-1.5 py-2` recipe (was `"comfortable"`).
- * - `"lg"`  — generous gap; demo / settings-page surface (was `"spacious"`).
+ * - `"sm"` — slightly tighter than the default for dense studios.
+ * - `"md"` — the default; matches the `gap-1.5 py-2` recipe.
+ * - `"lg"` — generous gap for demos and settings surfaces.
  *
  * The `<Configurator>` provides its `size` prop to descendants via
  * `provide`/`inject` (key: `configuratorSize`). A `<ConfiguratorRow>` may override

package/dist/components/configurator/styles.css

@@ -0,0 +1 @@
+:root { --configurator-pad-inline: 1rem; --configurator-section-gap: 0.5rem; } .configurator { -webkit-backdrop-filter: none; backdrop-filter: none; } .configurator > .configurator-presets, .configurator > .configurator-aside { -webkit-backdrop-filter: var(--glass-blur-floating); backdrop-filter: var(--glass-blur-floating); } .configurator-section-label { font-family: var(--font-text); font-size: var(--configurator-section-size); line-height: var(--type-leading-body); font-weight: var(--configurator-section-weight); letter-spacing: var(--type-tracking-tight); color: var(--foreground); } .configurator-presets { padding-block: var(--configurator-preset-row-weight); } .configurator-presets .configurator-gallery-track, .configurator-presets [role="group"] { gap: var(--configurator-preset-row-gap); } .configurator-layer { border-color: var(--configurator-divider-section); background-color: var(--configurator-section-tint); border-radius: max( var(--radius-floor), calc(var(--radius-ctx) - var(--radius-inset)) ); } .configurator-layer + .configurator-layer { margin-block-start: var(--configurator-section-gap); } .configurator-layer-trigger { padding-inline: var(--configurator-pad-inline); } .configurator-layer-body { padding-inline: var(--configurator-pad-inline); } .configurator-layer-body[data-dividers] > * + * { border-color: var(--configurator-divider); } .configurator-aside, .configurator-presets, .configurator-footer { border-color: var(--configurator-divider); } [data-slot="configurator"] > [data-gallery-dock] { grid-row: 1; grid-column: 1; } [data-slot="configurator"] > .configurator-stage { grid-row: 2; grid-column: 1; } [data-slot="configurator"] > .configurator-aside { grid-row: 3; grid-column: 1; } @media (min-width: 1024px) { [data-slot="configurator"] { grid-template-columns: minmax(0, 1fr) minmax( var(--configurator-aside-min, 280px), var(--configurator-aside-max, 360px) ); grid-template-rows: auto minmax(0, 1fr); } [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] { grid-row: 1; grid-column: 2; } [data-slot="configurator"][data-gallery="aside"] > .configurator-stage { grid-row: 1 / span 2; grid-column: 1; } [data-slot="configurator"][data-gallery="aside"] > .configurator-aside { grid-row: 2; grid-column: 2; } [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] { grid-row: 1; grid-column: 1 / span 2; } [data-slot="configurator"][data-gallery="top"] > .configurator-stage { grid-row: 2; grid-column: 1; } [data-slot="configurator"][data-gallery="top"] > .configurator-aside { grid-row: 2; grid-column: 2; } } [data-slot="configurator"] > [data-gallery-dock] { border-color: var(--configurator-divider); } [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] { border-bottom-width: 1px; } @media (min-width: 1024px) { [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] { border-bottom-width: 1px; } } .configurator-preset-tile { inline-size: clamp(160px, 22vw, 232px); border-radius: var(--radius-card); } [data-slot="configurator"][data-gallery="top"] .configurator-preset-tile { inline-size: clamp(200px, 20vw, 288px); } .configurator-preset-well { background-size: cover; background-position: center; image-rendering: auto; } .configurator-preset-well.is-loading { background-image: linear-gradient( 100deg, color-mix(in oklab, var(--card) 84%, transparent) 30%, color-mix(in oklab, var(--foreground) 8%, var(--card)) 50%, color-mix(in oklab, var(--card) 84%, transparent) 70% ); background-size: 200% 100%; animation: configurator-preset-shimmer 1.2s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .configurator-preset-well.is-loading { animation: none; } } @keyframes configurator-preset-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .configurator-preset-tile.is-active { box-shadow: inset 0 0 0 2px var(--focus-ring-color), var(--shadow-cartoon-lg); } .configurator-preset-chip { border-radius: var(--radius-pill); } .configurator-preset-chip.is-active { --glass-capsule-fill: var(--glass-bg-quiet); } @media (min-width: 1024px) { [data-slot="configurator"][data-aside-side="left"] > .configurator-stage { grid-column: 2; } [data-slot="configurator"][data-aside-side="left"] > .configurator-aside { grid-column: 1; } [data-slot="configurator"][data-aside-side="left"][data-gallery="aside"] > [data-gallery-dock] { grid-column: 1; } }

package/dist/components/constellation/Constellation.vue.d.ts

@@ -1,9 +1,14 @@
 import { type ConstellationProps } from "./constellationField";
-declare const __VLS_export: import("vue").DefineComponent<ConstellationProps, import("./composables/useConstellation").ConstellationExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ConstellationProps> & Readonly<{}>, {
+import type { RendererStatus } from "../../composables/glass/webgpu/rendererStatus";
+declare const __VLS_export: import("vue").DefineComponent<ConstellationProps, import("./composables/useConstellation").ConstellationExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    rendererStatus: (status: RendererStatus) => any;
+}, string, import("vue").PublicProps, Readonly<ConstellationProps> & Readonly<{
+    onRendererStatus?: ((status: RendererStatus) => any) | undefined;
+}>, {
     link: number;
     speed: number;
-    count: number;
     opacityCeiling: number;
+    count: number;
     parallax: number;
     pointerReactive: boolean;
     warpOnClick: boolean;

package/dist/components/constellation/composables/createConstellationField.d.ts

@@ -28,10 +28,10 @@ export interface ConstellationFieldState {
     wellOverride: Exclude<GravityWellProp, boolean>;
 }
 /**
- * Build the per-instance field state. The focal node (AX.W17) is engine-owned:
+ * Build the per-instance field state. The focal node is engine-owned:
  * `focalIndex` names the pinned node, `warp` is the per-axis critically-damped
  * spring the engine steps inside `stepField`. `wander`/`gravityWell` absent/false
- * leaves `field.wander`/`field.well` undefined (byte-identical to HEAD — stepField
+ * leaves `field.wander`/`field.well` undefined (the plain field — stepField
  * skips the cadence / force pass); `true` / an object seeds the cold state with the
  * built-in defaults + any prop override layered on (the on-mount
  * `readInteractionConfig` token read re-points the un-overridden members, with the

package/dist/components/constellation/composables/useConstellation.d.ts

@@ -1,32 +1,18 @@
 import { type Ref } from "vue";
-import { type GpuBackend } from "../../../composables/glass/webgpu/useGpuSubstrate";
 import { type ConstellationField, type ConstellationProps } from "../constellationField";
-/** The route-pointer read a background constellation feeds its own field from. */
+import { type RendererStatus } from "../../../composables/glass/webgpu/rendererStatus";
 export interface ConstellationRoutePointerRead {
-    /** Viewport-normalized route pointer (0..1). */
     x: number;
     y: number;
-    /** True while a live pointer is over the viewport (and not PRM/paused-silenced). */
     active: boolean;
 }
-/** The optional composable seams (BI.W-CONSTELLATION-DEDUPE — the interactive-bg feed). */
 export interface UseConstellationOptions {
-    /**
-     * The interactive-BACKGROUND feed. When provided, the constellation reads the route
-     * chassis broadcaster each frame and drives a SUBTLE pointer WELL over the KEPT
-     * per-node integrator via `constellationWellMapping` (a longer-half-life field, so
-     * the background lean is ~2–6%, not the foreground gravity-well pull). Undefined for
-     * a foreground demo (which owns its own host listeners). Passed by `Constellation.vue`
-     * off the `backgroundInteractive` prop.
-     */
+    /** Optional route-owned pointer feed for a non-interactive background field. */
     routePointer?: () => ConstellationRoutePointerRead | null;
 }
-/** The imperative seam the SFC re-exposes via `defineExpose`. */
 export interface ConstellationExpose {
     field: ConstellationField;
     isFrozen: Ref<boolean>;
-    /** The resolved backend (`"webgpu"` where supported, else the WebGL2 instanced twin). */
-    backend: () => GpuBackend;
     warpTo(a: {
         x: number;
         y: number;
@@ -35,5 +21,6 @@ export interface ConstellationExpose {
     releaseWell(): void;
     warpSettled(): boolean;
     pinNode(idx: number): void;
+    rendererStatus: Readonly<Ref<RendererStatus>>;
 }
 export declare function useConstellation(props: ConstellationProps, hostRef: Ref<HTMLElement | null>, canvasRef: Ref<HTMLCanvasElement | null>, options?: UseConstellationOptions): ConstellationExpose;

package/dist/components/constellation/constants.d.ts

@@ -10,7 +10,7 @@ export declare const BASE_WIDTH = 1280;
  * color/alpha tokens are absent (SSR / no-token mount). The fallbacks mirror the §5c
  * light-arm token defaults so a no-token mount still reads recessive-but-legible.
  *
- * `accent`/`edgeFloor`/`edgeAccentAlpha` (AZ.W-CON-GEN G3) are the ACCENT-edge skin
+ * `accent`/`edgeFloor`/`edgeAccentAlpha` are the accent-edge skin
  * weights the optional `drawEdges(…, accentIndex)` pass reads — the flagged-node EDGE
  * tint. `accent` mirrors the `--constellation-accent` neutral library default;
  * `edgeFloor: 0` is the byte-identity (no floor by default — a consumer lifts it so a
@@ -26,7 +26,7 @@ export declare const DEFAULT_PALETTE: ConstellationPalette;
 export declare const WARP_RESPONSE = 0.55;
 export declare const WARP_ZETA = 1;
 /**
- * Gravity-well tuning DEFAULTS (AY.W-CON2). The `--constellation-well-*` tokens
+ * Gravity-well tuning defaults. The `--constellation-well-*` tokens
  * override these on mount via `field.well.cfg`; these stay the fallback. SET by the
  * §6 egg-live π readback (the field-perturbs-then-cools capture is the binding
  * truth) — a moderate gain over a generous reach, a brisk ramp, a tight no-slingshot
@@ -34,7 +34,7 @@ export declare const WARP_ZETA = 1;
  */
 export declare const DEFAULT_WELL_CONFIG: ConstellationWellConfig;
 /**
- * Auto-DRIFT cadence DEFAULTS (AY.W-CON1 source; tokenised in AY.W-CON2). The
+ * Auto-drift cadence defaults. The
  * `--constellation-wander-idle`/`-wander-jitter` tokens override these on mount; a
  * prop `{ minIdle, jitter }` still wins over the token. The 8s/8s default rhythm
  * re-targets the focal mark every 8–16s (the slides cadence).
@@ -42,7 +42,7 @@ export declare const DEFAULT_WELL_CONFIG: ConstellationWellConfig;
 export declare const DEFAULT_WANDER_IDLE = 8000;
 export declare const DEFAULT_WANDER_JITTER = 8000;
 /**
- * Autonomous PINNED-ANCHOR drift cadence DEFAULTS (AZ.W-CON-GEN G5). DISTINCT from
+ * Autonomous pinned-anchor drift cadence defaults. Distinct from
  * `wander` (which re-targets the WARP spring among random nodes): this gently eases
  * the PINNED node (`field.pinnedIndex`) around its seeded ANCHOR on a jittered
  * cadence — the flagged point breathes its neighborhood without leaving it. The
@@ -55,43 +55,33 @@ export declare const DEFAULT_PINNED_DRIFT_FRAC = 0.14;
 export declare const DEFAULT_PINNED_DRIFT_DUR = 2600;
 export declare const DEFAULT_PINNED_DRIFT_IDLE = 6000;
 export declare const DEFAULT_PINNED_DRIFT_JITTER = 8000;
-/** R5-8 — the shipped visual-size floor: `kVisOf` === `k` for every canvas
+/** The visual-size floor: `kVisOf` === `k` for every canvas
  *  ≥ ~0.72·BASE_WIDTH ≈ 922px (incl. the 1280 export frame — byte-identical
  *  there by construction); below it the marks stop crushing sub-pixel. */
 export declare const DEFAULT_K_FLOOR = 0.72;
-/**
- * The maximum node count the points/edges buffers pre-size for (the slider cap — a count
- * above this is clamped at upload). ≫ this BOOKS the compute neighbor-bin path.
- */
+/** Maximum public node count; keeps the quadratic proximity scan bounded. */
 export declare const MAX_NODES = 256;
 /**
- * The per-node max degree budget — the edge buffer is pre-sized at `MAX_NODES · MAX_DEGREE`
- * so the CPU all-pairs scan never overflows it (a denser-than-degree neighborhood drops the
- * weakest edges, never re-allocates). 12 is a generous incident-edge ceiling for a
- * distance-threshold ε-proximity graph at the default link/count.
+ * Per-node paint-density budget. A denser neighborhood drops its weakest edges so a
+ * pathological link radius cannot turn the quiet lattice into an opaque mesh.
  */
 export declare const MAX_DEGREE = 12;
-/** The pre-sized edge instance budget (`MAX_NODES · MAX_DEGREE`). */
+/** Maximum painted edges (`MAX_NODES · MAX_DEGREE`). */
 export declare const E_MAX: number;
 /**
  * The pointer-parallax depth default (§6). Each node carries a seeded depth `z ∈ [0,1]`;
  * the pointer offsets node screen positions by `parallax · z · (pointer − center)` — a
  * cheap pointer-parallax giving the flat lattice apparent depth (the Awwwards "living
- * network" register). DEFAULT-OFF (`0` — the flat lattice). The prior default-on `0.08`
- * slid the WHOLE lattice ~58px on a center→corner pointer sweep (every node tracked the
- * cursor, read as a bug, not depth — `proof` D1-constellation live measure). Depth is now
+ * network" register). DEFAULT-OFF (`0` — the flat lattice). A default-on `0.08`
+ * slides the WHOLE lattice ~58px on a center→corner pointer sweep (every node tracks the
+ * cursor, reads as a bug, not depth). Depth is
  * OPT-IN: a consumer that wants the living-network parallax passes `parallax` (e.g. a
  * sub-perceptual `0.02`); the bare lattice never tracks the cursor.
  */
 export declare const DEFAULT_PARALLAX = 0;
 /**
- * The base node radius band (CSS px) the DPR-aware SDF circle sizes within (the §1 "Node
- * size" config axis). `seedField` rolls each node's radius in `[NODE_R_MIN, NODE_R_MIN +
- * NODE_R_SPREAD)` (the prior `1.6 + rng()*1.6` band, named); the WGSL/GLSL fragment SDF
- * sizes `half = radius · uKVis · uDpr / uResolution` so the disc samples at full device
- * resolution and is AA'd by the pixel-footprint derivative — crisp at ANY DPR.
+ * Base Canvas2D node-radius band in CSS px. `seedField` rolls each node's radius in
+ * `[NODE_R_MIN, NODE_R_MIN + NODE_R_SPREAD)`.
  */
 export declare const NODE_R_MIN = 1.6;
 export declare const NODE_R_SPREAD = 1.6;
-/** The hairline edge half-width (CSS px) the instanced segment-quad fragment AAs. */
-export declare const DEFAULT_LINE_WIDTH = 1;