@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/components/carousel/CarouselNext.vue.d.ts

@@ -0,0 +1,21 @@
+import type { WithClassAsProps } from './interface';
+import { type ButtonVariants } from '../button';
+type __VLS_Props = {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "link" | "default" | "glass" | "accent" | "secondary" | "outline" | "primary-audacious" | "gold-audacious" | "ghost" | "glass-wash" | "ai" | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/carousel/CarouselPrevious.vue.d.ts

@@ -0,0 +1,21 @@
+import type { WithClassAsProps } from './interface';
+import { type ButtonVariants } from '../button';
+type __VLS_Props = {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "link" | "default" | "glass" | "accent" | "secondary" | "outline" | "primary-audacious" | "gold-audacious" | "ghost" | "glass-wash" | "ai" | null;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,8 @@
+export { default as Carousel } from './Carousel.vue';
+export { default as CarouselContent } from './CarouselContent.vue';
+export { default as CarouselItem } from './CarouselItem.vue';
+export { default as CarouselNext } from './CarouselNext.vue';
+export { default as CarouselPager } from './CarouselPager.vue';
+export { default as CarouselPrevious } from './CarouselPrevious.vue';
+export type { UnwrapRefCarouselApi as CarouselApi, } from './interface';
+export { useCarousel } from './useCarousel';

package/dist/components/carousel/useCarousel.d.ts

@@ -0,0 +1,21 @@
+import type { CarouselEmits, CarouselProps } from './interface';
+declare const CAROUSEL_WEIGHTY_DURATION = 30;
+declare const useProvideCarousel: (args_0: CarouselProps, emits: CarouselEmits) => {
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    orientation: "vertical" | "horizontal" | undefined;
+};
+declare function useCarousel(): {
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    orientation: "vertical" | "horizontal" | undefined;
+};
+export { useCarousel, useProvideCarousel, CAROUSEL_WEIGHTY_DURATION };

package/dist/components/chip/Chip.vue.d.ts

@@ -0,0 +1,20 @@
+import { type ToggleProps } from "reka-ui";
+import type { ChipProps } from "./types";
+type __VLS_Props = ToggleProps & ChipProps;
+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, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/chip/chipVariants.d.ts

@@ -0,0 +1,43 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * chipVariants — the ONE congruent chip recipe (BI.W-CHIP-FOLD; BD.W-CHIP-CONGRUENT-GLASS).
+ *
+ * The chip family (the retired ToggleChip + SelectableChip + the toggle-group
+ * children) is FOLDED onto ONE `<Chip shape × tone>`: a stadium-pill warm-glass
+ * LENS that PUNCHES when you pick it. The Kronecker factorization (BI.W-CHIP-FOLD)
+ * observed that ToggleChip's `variant` (`chip`/`cell`) was a pure NAME-SYNONYM of
+ * SelectableChip's `shape` (`pill`/`cell`) over the SAME CVA — so the two surfaces
+ * merge compile-time onto this ONE recipe (clean break, no alias — the no-legacy
+ * law; the `selectableChipVariants`/`SelectableChipVariants` shim was SWEPT at
+ * BG.W-DEAD-SWEEP). The tonal-accent register (`tone`) is a per-instance style
+ * layered ON this recipe by `Chip.vue`, not a CVA axis.
+ *
+ * The recipe is STRUCTURE + the shared-register hooks: it COMPOSES the read-only
+ * shared registers, never re-forks a parallel glass/cartoon/motion system —
+ *   · `.glass-chip`         — the chip-family material/motion layer (the warm idle
+ *                             floor + the `--glass-fill-tint` plate tint + the ONE
+ *                             scale write + the `::after` colour-flood punch).
+ *   · `.glass-capsule`      — the warm-transmissive lozenge BODY (fill + rim +
+ *                             shadow + blur, on `--radius-pill` → the stadium
+ *                             end-cap at every rung). Radius is INVARIANT — the
+ *                             capsule re-rounds itself at every height; no
+ *                             `rounded-*` rung (retires the 4/6/10px grab-bag).
+ *   · `.glass-capsule-hover`— the SHARED specular-lift + press-snap on hover.
+ *   · `.accent-tone`        — the contrast-floored tonal channels (idle fill /
+ *                             active band / active edge / contrast-safe ink).
+ *
+ * The geometry: radius invariant (the capsule's `--radius-pill`); only padding/
+ * text vary, on a √φ ladder (φ≈1.618). The `cell` is the ONE documented exception
+ * (`.glass-chip--cell` → `--radius-card`): a 72px icon+label tile is a CARD, not a
+ * pill — a DELIBERATE 2-silhouette family, composing the SAME material + motion.
+ *
+ * NO scale CVA — the ONE `scale` write lives on `.glass-chip` (hover/press/punch
+ * folded into a single source of truth; a CVA `hover:scale-*` would collide).
+ * The CVA carries no `color-mix(…--primary…)` literal — the tonal COLOUR is the
+ * `.accent-tone` register's (driven by the `tone` prop's per-instance style).
+ */
+export declare const chipVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    shape?: "cell" | "pill" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ChipVariants = VariantProps<typeof chipVariants>;

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

@@ -0,0 +1,3 @@
+export { default as Chip } from "./Chip.vue";
+export { chipVariants, type ChipVariants } from "./chipVariants";
+export type { ChipProps } from "./types";

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

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from "vue";
+import type { Surface } from "../_shared/useSurfaceAxis";
+import type { ChipVariants } from "./chipVariants";
+/**
+ * ChipProps — the public prop contract of the folded `<Chip>` (BI.W-CHIP-FOLD).
+ * The chip-specific surface; the reka `Toggle` contract (`modelValue` /
+ * `defaultValue` / `pressed` / `disabled` …) composes ON TOP via `v-model` and is
+ * documented by the reka `Toggle` primitive. `<Chip>` unifies the retired
+ * ToggleChip (`shape`, the plain warm-floor toggle) + SelectableChip (`tone`, the
+ * contrast-floored tonal-accent register) onto ONE surface.
+ */
+export interface ChipProps {
+    /**
+     * The silhouette shape — `pill` (default, the stadium capsule; the retired
+     * ToggleChip `variant="chip"`) | `cell` (the square icon+label tile; the
+     * retired `variant="cell"`). A SILHOUETTE word, not a scale rung.
+     */
+    shape?: ChipVariants["shape"];
+    /** The structural size rung — `sm` | `md` (default) | `lg`. */
+    size?: ChipVariants["size"];
+    /**
+     * The accent COLOUR identity — a complete `<color>` (e.g.
+     * `var(--section-color-7)` or a concrete `oklch(…)`). OPT-IN: unset ⇒ the plain
+     * warm-floor glass toggle (the ToggleChip register). Set ⇒ the tonal-accent
+     * register — the per-instance plate hue + the contrast-safe INK label (the
+     * SelectableChip register). The SEMANTIC choice is a prop; the strength
+     * MAGNITUDES are tokens (no over-prop).
+     */
+    tone?: string;
+    /**
+     * The shared {glass·veil·opaque} surface-decoration axis (BA.W-SURFACE-AXIS).
+     * OPT-IN: unset ⇒ the capsule's own glass material (byte-identical default).
+     * Set ⇒ binds `:data-surface`, and the shared `surface-axis.css` seam applies
+     * the veil/opaque decoration UNIFORMLY.
+     */
+    surface?: Surface;
+    class?: HTMLAttributes["class"];
+}

package/dist/components/combobox/Combobox.vue.d.ts

@@ -0,0 +1,32 @@
+import { type ComboboxRootProps } from 'reka-ui';
+type __VLS_Props = ComboboxRootProps;
+declare var __VLS_9: {
+    open: boolean;
+    modelValue: string | number | bigint | Record<string, any> | (string | number | bigint | Record<string, any> | null)[] | null;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    highlight: (payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    onHighlight?: ((payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/combobox/ComboboxList.vue.d.ts

@@ -0,0 +1,32 @@
+import type { ComboboxContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = ComboboxContentProps & {
+    class?: HTMLAttributes['class'];
+};
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, 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<{
+    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;
+}>, {
+    position: "inline" | "popper";
+    sideOffset: number;
+    align: "end" | "start" | "center";
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,9 @@
+export { default as Combobox } from './Combobox.vue';
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue';
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue';
+export { default as ComboboxGroup } from './ComboboxGroup.vue';
+export { default as ComboboxInput } from './ComboboxInput.vue';
+export { default as ComboboxItem } from './ComboboxItem.vue';
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue';
+export { default as ComboboxList } from './ComboboxList.vue';
+export { ComboboxTrigger } from 'reka-ui';

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

@@ -0,0 +1,38 @@
+import { type HTMLAttributes } from 'vue';
+import type { ComboboxRootProps } from 'reka-ui';
+import { type Surface } from '../_shared/useSurfaceAxis';
+type __VLS_Props = ComboboxRootProps & {
+    class?: HTMLAttributes['class'];
+    surface?: Surface;
+};
+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, {
+    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    highlight: (payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    onHighlight?: ((payload: {
+        ref: HTMLElement;
+        value: import("reka-ui").AcceptableValue;
+    } | undefined) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    modelValue: import("reka-ui").AcceptableValue | import("reka-ui").AcceptableValue[];
+    open: boolean;
+    surface: Surface;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,27 @@
+import type { ComboboxRootProps, DialogRootProps } from 'reka-ui';
+import type { Surface } from '../_shared/useSurfaceAxis';
+type CommandDialogProps = DialogRootProps & {
+    surface?: Surface;
+    modelValue?: ComboboxRootProps['modelValue'];
+};
+declare var __VLS_24: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_24) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<CommandDialogProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("reka-ui").AcceptableValue) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CommandDialogProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("reka-ui").AcceptableValue) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    surface: Surface;
+}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +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';

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

@@ -0,0 +1,28 @@
+import { type CompletionSealShape } from "./constants";
+export interface CompletionSealProps {
+    /** The seal glyph — `check` (default) | `ring` | `disc` | `wordmark`. */
+    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.
+     */
+    label?: string;
+    /**
+     * The draw trigger — the consumer fires it on completion. When it flips truthy the
+     * seal draws ONCE. Default (unset) plays on mount (the seal draws when it appears —
+     * the canonical completion moment).
+     */
+    play?: boolean;
+    /**
+     * The earned-gold garnish (BG.W-SEAL-DISC) — 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.
+     */
+    personalBest?: boolean;
+    /** Pass-through class on the root. */
+    class?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<CompletionSealProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CompletionSealProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,66 @@
+/**
+ * The seal glyph axis — the mark the gold stroke draws:
+ *  - `check` (default) — a checkmark (the canonical "done" garnish).
+ *  - `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).
+ *  - `wordmark` — a self-contained seal mark (a stylized seal glyph).
+ *
+ * `check`/`ring`/`wordmark` share the ONE gold-draw mechanism (the `--seal-draw`
+ * stroke-reveal on the `--seal-ink` gold stroke) — a `shape`-scoped path, NOT a second
+ * recipe. `disc` COMPOSES that same mechanism across three layers (the disc face fades
+ * in, then the ring RE-USES the ring geometry to draw around, then the check RE-USES the
+ * check path to draw in) — no fourth recipe, the layers stagger on animation-delay off
+ * the `--seal-ring-delay`/`--seal-check-delay` seam. The seal is the GOLD-DRAW completion
+ * register, distinct from the HandMark hand-voice family.
+ */
+export type CompletionSealShape = "check" | "ring" | "disc" | "wordmark";
+/** The default seal glyph — the checkmark "done" garnish. */
+export declare const COMPLETION_SEAL_DEFAULT_SHAPE: CompletionSealShape;
+/**
+ * The normalized SVG viewBox the glyphs are authored in. The mark `pathLength="100"`
+ * normalizes every glyph's draw length so the `stroke-dashoffset` wipe is path-agnostic
+ * (the recipe reads `--seal-draw` 0..100% against the normalized length).
+ */
+export declare const COMPLETION_SEAL_VIEWBOX = "0 0 64 64";
+/**
+ * The per-shape SVG path/element the gold stroke draws. `check`/`wordmark` are <path>
+ * `d`-strings; `ring` is drawn as a <circle> and `disc` COMPOSES the ring geometry + the
+ * check path (the SFC branches on shape), so neither authors its own path here. Authored
+ * in the 64×64 viewBox, `pathLength="100"` normalized at the element.
+ */
+export declare const COMPLETION_SEAL_PATHS: Record<Exclude<CompletionSealShape, "ring" | "disc">, string>;
+/**
+ * The `ring` glyph geometry (a <circle>) — the centre + radius in the 64×64 viewBox.
+ * A near-perimeter ring so the seal reads hero-scale. The `disc` shape REUSES this same
+ * circle for its stroke-draw affirmation ring (one geometry, two reads).
+ */
+export declare const COMPLETION_SEAL_RING: {
+    readonly cx: 32;
+    readonly cy: 32;
+    readonly r: 24;
+};
+/**
+ * The `disc` glyph FACE geometry (a filled <circle>) — the earned-coin face the ring
+ * draws around. Inset 3px inside the ring radius so the drawn ring reads as a clean rim
+ * around the coin (the disc→ring→check gesture: face → rim → mark). The check path
+ * (COMPLETION_SEAL_PATHS.check) fits inside this radius.
+ */
+export declare const COMPLETION_SEAL_DISC: {
+    readonly cx: 32;
+    readonly cy: 32;
+    readonly r: 21;
+};
+/**
+ * The SPRING register the draw rides (SPRING-EASE / W-MOTION-CANON 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)
+ *    so the gold inks crisply, not languidly.
+ * The seal mints NO new spring token — it READS the SPRING-EASE register (the no-new-clock
+ * fence). These names are the recorded register choice; the actual curves live in the
+ * cascade (tokens/scheme-motion.css) and the recipe (completion-seal.css) reads them.
+ */
+export declare const COMPLETION_SEAL_SETTLE_SPRING = "--spring-bouncy";
+export declare const COMPLETION_SEAL_DRAW_SPRING = "--spring-snappy";

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

@@ -0,0 +1,160 @@
+import { type HTMLAttributes } from "vue";
+import { type ConfiguratorSize } from "./size";
+/**
+ * Scroll behavior for the controls column.
+ *
+ * - `auto`   — the controls column renders a <FadingScroll axis="y"> scroll-port
+ *              (sharp at rest, feathered while overflowing); controls scroll when
+ *              their intrinsic height exceeds the host. Default.
+ * - `always` — same <FadingScroll> scroll-port + thin scrollbar. Use when
+ *              authors want a fixed-height studio regardless of content.
+ * - `never`  — controls do not scroll; host grows to content height. Renders a
+ *              plain div (no FadingScroll). Use for popover/sheet hosts that
+ *              already manage their own overflow.
+ */
+export type ConfiguratorScrollMode = "auto" | "always" | "never";
+/**
+ * Which side the aside (preset row + controls) sits on at `lg`+ width.
+ *
+ * `right` (default) is the inspector idiom — stage left, controls right.
+ * `left` is a reversible, taste-level flip: the aside renders on the
+ * left while DOM/tab order stays stage→aside (the flip is grid-column
+ * placement + border-side only, no source reorder — no a11y regression).
+ * Below `lg` the layout is a single column and the side has no meaning.
+ */
+export type ConfiguratorAsideSide = "left" | "right";
+/**
+ * Where the preset gallery sits.
+ *
+ * `aside` (default) keeps the preset row inside the right-hand aside (the
+ * inspector idiom — the legacy placement, unchanged).
+ *
+ * `top` lifts the gallery OUT of the 360px aside and pins it as a large,
+ * full-width, horizontally-scrollable glass dock across the TOP of the studio
+ * 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).
+ */
+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
+ * `useConfiguratorState<T>` composable.
+ */
+export interface ConfiguratorPreset<T> {
+    readonly key: string;
+    readonly label: string;
+    readonly sub?: string;
+    /** Optional baked thumbnail (data URL or static path). */
+    readonly thumb?: string;
+    readonly config: T;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<{
+        /** Optional preset table; presented to the `presets` slot fallback. */
+        presets?: readonly ConfiguratorPreset<T>[];
+        /** Currently active preset key — display only; selection is the consumer's. */
+        activePreset?: string;
+        /** Optional layer descriptors; presented to `controls` slot fallback. */
+        layers?: readonly {
+            id: string;
+            label: string;
+        }[];
+        /** Active layer id — display only; switching is the consumer's. */
+        activeLayer?: string;
+        /** Scroll behavior for the controls column. Default: `auto`. */
+        scrollMode?: ConfiguratorScrollMode;
+        /**
+         * Row-level density axis (N.W2 Lane A). 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
+         * `gap-1.5 py-2` recipe exactly.
+         */
+        size?: ConfiguratorSize;
+        /**
+         * Which side the aside sits on at `lg`+ width. Default `"right"`
+         * (the inspector idiom). `"left"` flips the visual column via
+         * grid-column placement + border-side swap only — DOM/tab order
+         * stays stage→aside. No effect below `lg` (single-column).
+         */
+        asideSide?: ConfiguratorAsideSide;
+        /**
+         * Where the preset gallery sits. Default `"aside"` (the inspector idiom).
+         * `"top"` pins the gallery as a large full-width scrollable glass dock
+         * across the top of the studio (the §2.1 up-top reflow), driven by the
+         * precompiled `[data-gallery="top"]` rule in configurator.css.
+         */
+        galleryPlacement?: ConfiguratorGalleryPlacement;
+        /**
+         * 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`
+         * via the cascade. Default band is `280px`/`360px`. Pass a single
+         * length to pin the band (`min === max`), or a `[min, max]` pair.
+         */
+        asideWidth?: string | readonly [min: string, max: string];
+        /** Optional outer container override. */
+        class?: HTMLAttributes["class"];
+    } & {
+        onReset?: (() => any) | undefined;
+        "onSelect-preset"?: ((key: string) => any) | undefined;
+        "onSelect-layer"?: ((id: string) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        presets?: (props: {
+            presets: readonly ConfiguratorPreset<T>[] | undefined;
+            activePreset: string | undefined;
+        }) => any;
+    } & {
+        stage?: (props: {}) => any;
+    } & {
+        controls?: (props: {
+            layers: readonly {
+                id: string;
+                label: string;
+            }[] | undefined;
+            activeLayer: string | undefined;
+            selectLayer: (id: string) => void;
+        }) => any;
+    } & {
+        default?: (props: {}) => any;
+    } & {
+        controls?: (props: {
+            layers: readonly {
+                id: string;
+                label: string;
+            }[] | undefined;
+            activeLayer: string | undefined;
+            selectLayer: (id: string) => void;
+        }) => any;
+    } & {
+        default?: (props: {}) => any;
+    } & {
+        footer?: (props: {
+            reset: () => void;
+        }) => any;
+    };
+    emit: {
+        (e: "select-preset", key: string): void;
+        (e: "select-layer", id: string): void;
+        (e: "reset"): void;
+    };
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};