@mkbabb/glass-ui 4.0.0 → 4.1.0

package/dist/components/custom/spa-view/SpaView.vue.d.ts

@@ -0,0 +1,50 @@
+import type { Component } from "vue";
+export interface SpaViewProps {
+    /**
+     * The active view. Either a component (`<component :is>`) or a string key the
+     * default-slot resolves against. When `view`/`is` is set, SpaView renders the
+     * dynamic component directly; when unset, the default slot is the active view
+     * (the consumer drives `:is` inside the slot themselves).
+     */
+    view?: Component | string;
+    /** Alias of `view` (the `:is` ergonomics — same dynamic-component target). */
+    is?: Component | string;
+    /**
+     * The LRU cap — the max number of cached inactive view instances. Threaded
+     * straight onto `<KeepAlive :max>`; when unset, KeepAlive's default (unbounded)
+     * applies. The visual-load-bearing register: a bounded admin shell sets `:max`
+     * to its tab count so the cache never grows without bound.
+     */
+    max?: number;
+    /** KeepAlive include allowlist (component name / RegExp / array — pass-through). */
+    include?: string | RegExp | (string | RegExp)[];
+    /** KeepAlive exclude denylist (component name / RegExp / array — pass-through). */
+    exclude?: string | RegExp | (string | RegExp)[];
+    /**
+     * The Vue <Transition> recipe name driving the out-in cross-fade. Defaults to
+     * `"fade"` — the shared opacity-only compositor recipe (transitions.css). A
+     * consumer overrides it with another `mode="out-in"`-safe recipe name.
+     */
+    transition?: string;
+    /**
+     * The stable key the transition keys off (a re-render WITHOUT a key change is
+     * not a view swap). Defaults to the resolved `view`/`is` target. A consumer
+     * driving the active view from the default slot supplies its own `:view-key`.
+     */
+    viewKey?: string | number;
+}
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<SpaViewProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SpaViewProps> & Readonly<{}>, {
+    transition: string;
+}, {}, {}, {}, 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/custom/spa-view/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SpaView } from "./SpaView.vue";
+export type { SpaViewProps } from "./SpaView.vue";

package/dist/components/custom/split-chars/SplitChars.vue.d.ts

@@ -0,0 +1,39 @@
+/**
+ * SplitChars — the component face of the per-glyph split. It renders the `text`
+ * prop into per-glyph `.char` spans (each carrying `--char-index`), wraps them in
+ * the shipped `.char-stagger` host (so the library CSS staggers them into a
+ * kinetic entrance on the per-spring `--spring-smooth` clock), and — by
+ * construction — keeps the word as ONE accessible name: the wrapper carries
+ * `aria-label="{text}"`, every glyph span is `aria-hidden`. AT hears "Fourier",
+ * never the spell-out.
+ *
+ * Usage:
+ *   <SplitChars text="Fourier" />
+ *   <SplitChars text="Hello World" by="word" as="h1" />
+ *
+ * The `text` PROP is the single source for BOTH the split AND the label — there
+ * is NO default slot (a slot would split arbitrary markup, so the accessible name
+ * would be ambiguous). The split re-runs on a `text` change (the watcher →
+ * `split()`). Engine-free: it composes `useCharStagger` (vue-only) + the shipped
+ * CSS; it adds NO animation engine and NO PRM logic (it inherits the recipe's
+ * carve — the split is structural, only the CSS `fade-in` is PRM-gated).
+ */
+import { type Component, type HTMLAttributes } from "vue";
+import { type UseCharStaggerOptions } from "../../../composables/motion/useCharStagger";
+type __VLS_Props = {
+    /** The word to split — REQUIRED. It is the single source for both the
+     *  per-glyph split AND the accessible label (the load-bearing a11y fact). */
+    text: string;
+    /** The split unit. Default `"char"`. */
+    by?: UseCharStaggerOptions["by"];
+    /** Host tag/component (reka-ui Primitive `as`; default `"span"`) — set
+     *  `as="h1"` to render the kinetic word as a heading. */
+    as?: string | Component;
+    class?: HTMLAttributes["class"];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    as: string | Component;
+    by: "char" | "word" | "grapheme";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/custom/split-chars/index.d.ts

@@ -0,0 +1 @@
+export { default as SplitChars } from "./SplitChars.vue";

package/dist/components/custom/tabs/SegmentedTabs.vue.d.ts

@@ -49,6 +49,17 @@ export interface SegmentedTabsProps {
      * accessible name.
      */
     responsive?: boolean | SegmentedTabsResponsive;
+    /**
+     * BC.W-LIQUID-TAB — the LIQUID TAB. The `pill` indicator is a physical lozenge
+     * you can GRAB and PULL: it follows the finger ~1:1, squishes on drag velocity,
+     * and flings to the nearest tab on release (`useDragMorph`). DEFAULT `true` — the
+     * pull is the iOS-27 primary affordance, ADDITIVE OVER the click/keyboard path
+     * (which stays byte-identical + fully operable — the drag is a pointer
+     * ENHANCEMENT, never the sole selection mechanism, WCAG 2.1.1). A consumer who
+     * wants click-only opts out with `:draggable="false"`. No-op on `underline` (the
+     * ink hairline has no indicator element to deform — `dragEnabled` gates it).
+     */
+    draggable?: boolean;
     class?: HTMLAttributes["class"];
 }
 type __VLS_Props = SegmentedTabsProps;
@@ -75,6 +86,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }>, {
     orientation: SegmentedTabsOrientation;
     variant: SegmentedTabsVariant;
+    draggable: boolean;
     responsive: boolean | SegmentedTabsResponsive;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/custom/tabs/composables/useTabDragMorph.d.ts

@@ -0,0 +1,42 @@
+import type { ComputedRef, Ref } from "vue";
+import { type UseDragMorphReturn } from "../../../../composables/motion/useDragMorph";
+import type { SegmentedTabOption } from "../SegmentedTabs.vue";
+/**
+ * Package-private composable for `SegmentedTabs.vue` — BB.W-DRAG-MORPH, the LIQUID
+ * TAB (the `:draggable` axis). Carved out of the SFC at BB.W-CARVE4 to hold the
+ * no-god-module bound, mirroring the `useTabIndicator` colocation sibling; the SFC
+ * IMPORTS it and binds `drag.dragStyle`/`drag.dragging` in its template.
+ *
+ * When `:draggable`, the `pill` indicator is wired to `useDragMorph` with the snap
+ * targets resolved off the CENTER-ANCHORED button geometry (the SAME measure
+ * `useTabIndicator` runs — reused, never re-measured). Dragging the indicator follows
+ * the finger, squishes on velocity, and flings to the nearest tab center on release →
+ * `onSnap` writes the `model`. The drag is the `pill` material ONLY (the `underline`
+ * ink hairline has no `indicatorRef` element to deform). The squish reads the SAME
+ * `--tab-indicator-max-stretch` live cap the click squish does (the SOLE cap source);
+ * the drag's `--stretch` write composes the existing reciprocal CSS pairing — no
+ * second squish recipe.
+ */
+export interface UseTabDragMorphParams {
+    /** The active indicator element (the drag follow + squish target). */
+    indicatorRef: Ref<HTMLElement | null>;
+    /** True for the vertical (block-axis) orientation. */
+    isVertical: ComputedRef<boolean>;
+    /** True for the underline material (drag is a no-op there). */
+    isUnderline: ComputedRef<boolean>;
+    /** The `:draggable` prop (ADDITIVE, default false). */
+    draggable: () => boolean;
+    /** The strip's rendered options (the snap targets + the refresh trigger). */
+    stripOptions: ComputedRef<SegmentedTabOption[]>;
+    /** Per-option button refs, index-aligned to `stripOptions`. */
+    buttonRefs: Ref<HTMLElement[]>;
+    /** The single-select model — the fling-to-nearest commits the selection. */
+    model: Ref<string | undefined>;
+}
+export interface UseTabDragMorphReturn {
+    /** True when the drag is live (the `pill` material + the `:draggable` prop). */
+    dragEnabled: ComputedRef<boolean>;
+    /** The `useDragMorph` handle (the SFC binds `dragStyle`/`dragging`). */
+    drag: UseDragMorphReturn;
+}
+export declare function useTabDragMorph(params: UseTabDragMorphParams): UseTabDragMorphReturn;

package/dist/components/custom/tabs/constants.d.ts

@@ -1,10 +1,18 @@
 /**
  * Fallback for `--tab-indicator-max-stretch` when the cascade leaves it unset — the
- * default ≈+8% travel-squish cap (AX.W53). `--stretch = 1 + frac · (cap − 1)`, so a
+ * default ≈+15% travel-squish cap. `--stretch = 1 + frac · (cap − 1)`, so a
  * full-width jump reaches the cap and a tiny hop stays near 1. The token is the
  * authority; this is the no-token floor.
+ *
+ * BC.W-LIQUID-TAB — lifted 1.08 → 1.15 so a FAST liquid-tab pull visibly swells the
+ * pill (the gel-squish READS as liquid, glass-dock-codebase.md §3.4) — still capped
+ * LOW (≤1.2, the anti-taffy-pull bar). The cap is shared by the click travel-squish
+ * AND the drag pull-morph (the SOLE cap source — the constant + the token in
+ * lockstep, never a fork); the volume-preserving reciprocal pairing
+ * (`scale: var(--stretch) calc(1/var(--stretch))`) is unchanged — only the magnitude
+ * lifts.
  */
-export declare const DEFAULT_INDICATOR_MAX_STRETCH = 1.08;
+export declare const DEFAULT_INDICATOR_MAX_STRETCH = 1.15;
 /**
  * The travel-progress fraction at which the squish RELEASES — the Material
  * "grow then shrink" close, keyed to ARRIVAL (BA.W-TABS). The squish opens with
@@ -14,5 +22,15 @@ export declare const DEFAULT_INDICATOR_MAX_STRETCH = 1.08;
  * release schedules off the calibrated clock (`--spring-snappy-duration`) scaled
  * by this fraction, so the stretch peaks during travel and shrinks to fit AT
  * arrival, never before.
+ *
+ * BC.W-UNDERLINE-TUNE — VERIFIED against the eased `snappy` (response 0.42 / ζ 0.78,
+ * the BC.W-SPRING-EASE re-derive). On that curve the position arrives (≥99% travel)
+ * at ~74% of the `--spring-snappy-duration` clock and the 90%-travel point lands at
+ * ~57% (mid-clock — the front-load gone). 0.82 releases the squish at ~279ms (= 0.82
+ * × 340ms), i.e. AT arrival (just past the ~74% arrival), so the stretch peaks DURING
+ * travel and shrinks to fit AT arrival — never before (0.82 ≥ the 0.74 arrival point).
+ * The position + squish now read ONE matched window: the desync (HEAD position-at-16%
+ * vs squish-at-82%) collapsed because the eased curve actually travels across the clock.
+ * KEPT at 0.82 — the eased arrival sits inside the release fraction; no nudge needed.
  */
 export declare const INDICATOR_RELEASE_AT_ARRIVAL = 0.82;

package/dist/components/custom/watercolor-dot/WatercolorDot.vue.d.ts

@@ -1,32 +1,45 @@
 /**
- * WatercolorDot — an organic pastel blob swatch (AU.W7 lift). A CSS/SVG primitive
- * (no WebGL): the blob shape is a deterministic per-vertex `border-radius` morph
- * (seeded by `color + seed`), and the wet, bleeding edge is an SVG turbulence +
- * displacement filter that is INTERNALISED — the component mounts its own
- * namespaced `<filter>` so there is zero consumer plumbing. Mount the dot and the
- * filter just works.
+ * WatercolorDot — an organic pastel blob swatch. A CSS/SVG primitive (NO drawing
+ * context — no WebGL/WebGPU/Canvas2D; the deliberate suite counterexample, the mark
+ * that documents WHY it is not a GPU context): the blob shape is a deterministic
+ * per-vertex `border-radius` morph (seeded by `color + seed`), and the wet, bleeding
+ * edge is an SVG turbulence + displacement filter that is INTERNALISED — the component
+ * mounts its own namespaced `<filter>` so there is zero consumer plumbing. Mount the
+ * dot and the filter just works.
+ *
+ * Safari-safe by construction (USER-DEFECTS §H): the SVG `<filter>` rasterizes ONCE
+ * + caches (the HandMark `texture.ts` idiom) and NEVER re-rasterizes per frame; the
+ * `animate` liveness rides a seeded COMPOSITOR `transform` wobble the compositor
+ * accelerates without touching the filter graph (a per-frame `border-radius` paint
+ * under the filter is the §H Safari flash, retired here). The filter `seed` is
+ * per-instance off `hashString(color + seed)` so each dot's wet edge is uniquely
+ * displaced (no twelve-clones).
  *
  * Color arrives as a CSS string painted straight onto the swatch background — the
  * dot needs no resolver because it does not feed a shader; the injected-color seam
- * shape is "pass the CSS color in".
+ * shape is "pass the CSS color in". Warm-cream identity by default (the dot bakes no
+ * hue; the demo palette is presets-in-consumers).
  */
 type __VLS_Props = {
     /** CSS color painted as the swatch background (any CSS color form). */
     color: string;
     /**
-     * Render mode (BA.W-EMISSION / BA-VJS-C2):
+     * Render mode:
      *   `solid` (default) — the filled organic blob (the swatch background IS the
      *                       color; the existing register, unchanged).
-     *   `ghost`  — the SAME seeded blob SILHOUETTE rendered as a STROKE: a
-     *              `color` border over a low-alpha `color` fill, the irregular-blob
-     *              outline (NOT a CSS dashed rectangle). A `ghost` of a given
-     *              `color + seed` matches the SAME silhouette the `solid` dot of
-     *              that seed renders — both read the same `useWatercolorBlob`
-     *              border-radius morph; the stroke is the only delta. The
+     *   `ghost`  — the SAME seeded blob SILHOUETTE traced as a DASHED outline: an
+     *              SVG <ellipse> `stroke-dasharray` carrying the SAME wet
+     *              `feDisplacementMap` filter, so the displacement wobbles the
+     *              dashed ellipse INTO the seeded organic outline (a dashed
+     *              OUTLINE following the silhouette — NOT a solid ring, NOT a CSS
+     *              dashed rectangle). A low-alpha `color` fill is kept behind the
+     *              stroke. A `ghost` of a given `color + seed` carries the SAME
+     *              seeded `border-radius` silhouette the `solid` dot of that seed
+     *              renders (both read the same `useWatercolorBlob` morph). The
      *              empty-palette-slot / placeholder affordance.
      */
     variant?: "solid" | "ghost";
-    /** Run the rAF-driven shape morph (default false → static, hover-morph only). */
+    /** Run the rAF-driven compositor transform wobble (default false → static). */
     animate?: boolean;
     /** Host tag — `div` (decorative) or `button` (interactive). */
     tag?: "div" | "button";
@@ -34,7 +47,7 @@ type __VLS_Props = {
     cycleDuration?: number;
     /** Border-radius range [lo, hi] as percentages (default [20, 80]). */
     range?: [number, number];
-    /** Extra seed string mixed into the shape PRNG for reproducible uniqueness. */
+    /** Extra seed string mixed into the shape + wet-edge PRNG for uniqueness. */
     seed?: string;
 };
 declare var __VLS_11: {};
@@ -43,9 +56,9 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     animate: boolean;
+    range: [number, number];
     variant: "solid" | "ghost";
     seed: string;
-    range: [number, number];
     tag: "div" | "button";
     cycleDuration: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/custom/watercolor-dot/useWatercolorBlob.d.ts

@@ -1,6 +1,6 @@
 import { type Ref } from "vue";
 export interface UseWatercolorBlobOptions {
-    /** Enable the rAF animation loop. */
+    /** Enable the rAF animation loop (drives a COMPOSITOR transform wobble). */
     animate?: boolean;
     /** Base cycle duration in ms (default 4000). */
     cycleDuration?: number;
@@ -11,14 +11,19 @@ export interface UseWatercolorBlobOptions {
 }
 /**
  * Drives a watercolor dot's organic blob shape. Deterministic given `color + seed`
- * (seeds the PRNG), so the same color reproduces the same shape across mounts. In
- * static mode it emits a base + hover `border-radius`; in `animate` mode it runs an
- * rAF loop morphing each of the 8 radii independently. `nudge()` retargets all
- * vertices for a quick jiggle.
+ * (seeds the PRNG), so the same color reproduces the same shape across mounts. The
+ * seeded `border-radius` silhouette is set ONCE (the dot's identity) and is STATIC —
+ * the box never re-paints its radius per frame (the §H Safari fix: a per-frame
+ * `border-radius` write under the SVG filter forces the filter graph to RE-RASTERIZE
+ * every frame, which flashes Safari). In `animate` mode the liveness rides a seeded
+ * COMPOSITOR `transform` wobble (scale/skew/rotate) the compositor handles WITHOUT
+ * touching the cached filter — the HandMark static-filter idiom. `nudge()` retargets
+ * the wobble for a quick jiggle on hover.
  */
 export declare function useWatercolorBlob(color: Ref<string> | (() => string), options?: UseWatercolorBlobOptions): {
     borderRadius: Ref<string, string>;
     hoverBorderRadius: Ref<string, string>;
+    transform: Ref<string, string>;
     nudge: () => void;
 };
 export type WatercolorBlob = ReturnType<typeof useWatercolorBlob>;

package/dist/components/ui/_shared/index.d.ts

@@ -2,3 +2,5 @@ export { menuItemVariants } from "./menuItemVariants";
 export type { MenuItemVariants } from "./menuItemVariants";
 export { surfaceClass } from "./useSurfaceAxis";
 export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+export { controlSizeClass, switchSizeClass } from "./useControlSize";
+export type { ControlSize } from "./useControlSize";

package/dist/components/ui/_shared/menuItemVariants.d.ts

@@ -44,7 +44,7 @@ import { type VariantProps } from "class-variance-authority";
  *   opts in via `surface="accent"`.
  */
 export declare const menuItemVariants: (props?: ({
-    surface?: "accent" | "glass" | null | undefined;
+    surface?: "glass" | "accent" | null | undefined;
     indicator?: "start" | "none" | "start-wide" | null | undefined;
     density?: "comfortable" | "audacious" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/ui/_shared/useControlSize.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The shared control-size axis — three rungs, ONE grammar. The meaningful
+ * control-size hierarchy rungs the input register needs (Button's `xs`/icon rungs
+ * are Button-specific — an input has no icon-only register, so they are NOT here).
+ *
+ *   sm      — the quieter/secondary control: the `--control-h-sm` height +
+ *             `--control-text-sm` font (shorter + quieter).
+ *   default — the canonical golden pill: the `--control-h-md` height +
+ *             `--control-text` font (byte-identical to HEAD).
+ *   lg      — the primary/emphatic control: the `--control-h-lg` height with the
+ *             base `--control-text` font (taller, same workhorse weight — matching
+ *             Button's `lg`, where only the height grows).
+ */
+export type ControlSize = "sm" | "default" | "lg";
+/**
+ * Resolve a `ControlSize` to the element-level token-override class string the
+ * `.input-pill` recipe reads. The `default` rung emits NO override (so the recipe
+ * falls back to the cohort `--control-h-md` / `--control-text` — byte-identical to
+ * HEAD); `sm`/`lg` re-point `--control-pill-h` / `--control-pill-text` to the
+ * chosen cohort rung.
+ *
+ *   controlSizeClass()        → ""                                              (golden default)
+ *   controlSizeClass("sm")    → "[--control-pill-h:var(--control-h-sm)] [--control-pill-text:var(--control-text-sm)]"
+ *   controlSizeClass("lg")    → "[--control-pill-h:var(--control-h-lg)]"
+ *
+ * @param size the control-size rung (`default` · `sm` · `lg`)
+ */
+export declare function controlSizeClass(size?: ControlSize): string;
+/**
+ * The Switch geometry rung. A Switch is a control-height-DERIVED geometry (the
+ * track/thumb/throw are NOT the bare cohort height — a switch track is shorter
+ * than an input), so it derives its `--switch-track-h` from the chosen
+ * `--control-h-*` rung (×0.6, the iOS proportion) and the rest of the
+ * `--switch-*` quad follows in Switch.vue:
+ *
+ *   --switch-thumb   = --switch-track-h − 0.25rem   (the 2px×2 track border)
+ *   --switch-track-w = --switch-track-h × 11/6      (the iOS track aspect)
+ *   --switch-throw   = --switch-track-w − --switch-thumb − 0.25rem
+ *
+ * The `default` rung (`--control-h-md`) resolves the HEAD `h-6 w-11` track +
+ * `h-5 w-5` thumb + `translate-x-5` throw EXACTLY (byte-identical). `sm`/`lg`
+ * re-point the anchor `--switch-track-h` so the whole quad scales in lockstep.
+ *
+ * @param size the control-size rung (`default` · `sm` · `lg`)
+ */
+export declare function switchSizeClass(size?: ControlSize): string;

package/dist/components/ui/badge/index.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export { default as Badge } from './Badge.vue';
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | null | undefined;
+    variant?: "default" | "outline" | "destructive" | "secondary" | "success" | "warning" | "info" | null | undefined;
     size?: "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/dist/components/ui/button/Button.vue.d.ts

@@ -1,16 +1,19 @@
 import type { ButtonHTMLAttributes, HTMLAttributes } from 'vue';
 import { type PrimitiveProps } from 'reka-ui';
 import { type ButtonVariants } from '.';
+import type { Surface } from '../_shared/useSurfaceAxis';
 interface Props extends PrimitiveProps {
     variant?: ButtonVariants['variant'];
     size?: ButtonVariants['size'];
     class?: HTMLAttributes['class'];
+    surface?: Surface;
+    liquid?: boolean;
     type?: ButtonHTMLAttributes['type'];
     disabled?: ButtonHTMLAttributes['disabled'];
 }
-declare var __VLS_8: {};
+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<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     as: import("reka-ui").AsTag | import("vue").Component;

package/dist/components/ui/button/index.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export { default as Button } from './Button.vue';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "solid" | "primary-audacious" | "gold-audacious" | "destructive" | "outline" | "secondary" | "accent" | "ghost" | "glass" | "glass-wash" | "ai" | null | undefined;
-    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
+    variant?: "link" | "default" | "glass" | "outline" | "primary-audacious" | "gold-audacious" | "destructive" | "secondary" | "accent" | "ghost" | "glass-wash" | "ai" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/components/ui/card/Card.vue.d.ts

@@ -11,8 +11,13 @@ import { type PrimitiveProps } from "reka-ui";
  *   overlay  — heaviest (~0.95α + blur) : modal-on-modal, dialog over content
  *   opaque   — `--glass-level:0` escape : the solid-card opt-out (AX.W54), maps to
  *              `.glass-opaque` through the same `glass-${tier}` rung as the rest
+ *   deep     — `--glass-blur-deep-*` OPT-IN : the maximal iOS-27 Liquid-Glass tier
+ *              ABOVE the W-GLASS-CAL calm default (Apple saturate-1.5/blur-16px),
+ *              maps to `.glass-floating glass-deep` (a base rung + the deep
+ *              decoration, mirroring opaque) — the hero glass / CTA register
+ *              (BB.W-DEEP-GLASS). The calm content default is byte-unchanged.
  */
-export type CardTier = "wash" | "quiet" | "resting" | "floating" | "overlay" | "opaque";
+export type CardTier = "wash" | "quiet" | "resting" | "floating" | "overlay" | "opaque" | "deep";
 /**
  * Surface decoration register — orthogonal to `tier`/`shadow`/`grain`.
  *
@@ -46,6 +51,23 @@ export type CardSurface = "glass" | "cartoon" | "veil";
  *            was originally authored over (a local intensity-token override).
  */
 export type CardSpecular = "off" | "subtle" | "full";
+/**
+ * Decoration variant — the ONE new Atlas component (BC.W-SELECTION-CARD, the I5
+ * selection card). Default UNSET: a bare `<Card>` is byte-identical to HEAD; the
+ * variant is additive default-OFF (the no-op floor). `selection` binds
+ * `:data-variant="selection"` on the root and ROUTES the chromatic-rim (A-2,
+ * `--glass-accent`) + selected metal-shimmer (A-3, `.metal-*-border`) decoration
+ * through the SHARED BUILT seams — it mints NO new sub-system. The shape mirrors
+ * the `surface` axis exactly: a data-attr the CSS seam reads, ORTHOGONAL to
+ * `tier`/`surface`/`pressable` (a `variant="selection" surface="glass"
+ * tier="resting" pressable` card is valid). The hue is a CONSUMER value
+ * (`data-hue`/`data-hue-strength` per-instance); NO consumer hue enters a token.
+ */
+export type CardVariant = "selection";
+/** The earned metal for a SELECTED selection-card (gold default — BA.W-PHASE-PALETTE
+ *  "gold is earned" for the chosen item). Composes the BUILT `.metal-{name}-border`
+ *  utility; NO forked keyframe, NO baked metal color. */
+export type CardMetal = "gold" | "silver" | "bronze";
 interface Props extends PrimitiveProps {
     /** Surface tier; selects one rung of the glass ladder. Default `resting`. */
     tier?: CardTier;
@@ -62,6 +84,15 @@ interface Props extends PrimitiveProps {
     /** `::after` paper-grain overlay. Off for scroll panes (the grain conflicts
      *  with overflow:auto repaints). */
     grain?: boolean;
+    /** BB.W-PAPER-GRID-TEXTURE — the GEOMETRIC paper register: a `::after`
+     *  blueprint/graph-paper grid felt THROUGH the card interior (the math/grid
+     *  brand pillar, read through the plate rather than only in the page
+     *  margin). Default **OFF** — a bare card is byte-identical to HEAD; a
+     *  document-register card opts in. ORTHOGONAL to `grain` (organic) — a card
+     *  may carry BOTH the turbulence grain and the geometric grid. The register
+     *  doctrine (paper-register cards opt in, instrument-glass surfaces do NOT)
+     *  is a CONSUMER choice the default-OFF honors by construction. */
+    grid?: boolean;
     /** Specular catch-light register (AX.W09). `off` (default) keeps the card
      *  CLEAN — no pointer-anchored lens, clean over any backplate (the §24
      *  three-consumer-confirmed default for a data/content card). `subtle` wakes
@@ -69,19 +100,63 @@ interface Props extends PrimitiveProps {
      *  hero/chrome opt-in); `full` runs the brighter pre-tune rung set for a busy
      *  backdrop. Only `glass` surfaces wire it; `cartoon` owns its own sticker lift. */
     specular?: CardSpecular;
+    /** BB.W-PRESS-UNIFY — the interactive PRESS register, default **OFF**. A bare
+     *  Card is a static content PLATE and never presses (a press on a static surface
+     *  is the visual-load-bearing anti-pattern). A `:pressable` Card is a TAPPABLE
+     *  LIST-CARD (a selectable result row, a navigable tile) — it gains the ONE
+     *  interruptible coupled spring-press (`useLiquidPress`): the reciprocal X/Y squish
+     *  + a sub-perceptual brightness lift on the `--card-press-t` drive, on the
+     *  `--spring-snappy`-class clock, INTERRUPTIBLE (a rapid re-tap re-seats the spring
+     *  velocity-continuously), PRM-instant (the press snaps with zero in-between
+     *  frames). Card is the SECOND binary the dead `useSpringPress` primitive reaches
+     *  (Button is the first — direct; Card via `useLiquidPress` which composes it — the
+     *  J-inv-10 ≥2-consumer bar met; the dock control is the booked third). The press is
+     *  compositor-only (`scale` + a custom property); the `.glass-press` CSS `:active`
+     *  scale is the no-JS / SSR floor. */
+    pressable?: boolean;
+    /** BC.W-SELECTION-CARD — the selection decoration axis (the ONE new Atlas
+     *  component). `selection` ROUTES the per-instance data-hue rim (A-2) +
+     *  the selected metal-shimmer border (A-3) through the BUILT seams; default
+     *  UNSET (a bare Card is byte-identical to HEAD). ORTHOGONAL to
+     *  `tier`/`surface`/`pressable`. */
+    variant?: CardVariant;
+    /** BC.W-SELECTION-CARD — the chosen state of a `variant="selection"` card.
+     *  When `true` the card composes the earned `.metal-${metal}-border` swept
+     *  rim + lifts the accent-strength toward `--selection-accent-strength-selected`
+     *  (rim-not-fill — the plate stays warm-cream translucent). The consumer wires
+     *  the matching `aria-selected`/`aria-checked` role contract on the card. */
+    selected?: boolean;
+    /** BC.W-SELECTION-CARD — the metal of the SELECTED-state swept rim. `gold`
+     *  (default) is earned for the chosen item; `silver`/`bronze` are the other
+     *  two BUILT `.metal-*-border` quads. Only read when `variant="selection"` +
+     *  `selected`. */
+    metal?: CardMetal;
+    /** BC.W-SELECTION-CARD — the per-instance data hue (a complete `<color>`) a
+     *  `variant="selection"` card tints its RIM + catch-light glint toward (the
+     *  A-2 `--glass-accent` consumer). The hue NEVER tints the plate background
+     *  (the distinct-axis fence); unset → the neutral `transparent` no-op floor. */
+    dataHue?: string;
+    /** BC.W-SELECTION-CARD — the bounded accent strength override (a `<percentage>`,
+     *  e.g. `"20%"`). Unset → the calm `--selection-accent-strength` default
+     *  (≤ the W-GLASS-ACCENT rim ceiling). Bounded — a whisper at the rim, never a
+     *  flooded plate. */
+    dataHueStrength?: string;
     class?: HTMLAttributes["class"];
 }
-declare var __VLS_10: {};
+declare var __VLS_13: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_13) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     shadow: boolean;
-    as: import("reka-ui").AsTag | import("vue").Component;
+    grid: boolean;
     surface: CardSurface;
+    as: import("reka-ui").AsTag | import("vue").Component;
     tier: CardTier;
     grain: boolean;
     specular: CardSpecular;
+    pressable: boolean;
+    metal: CardMetal;
 }, {}, {}, {}, 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/ui/card/CardHeader.vue.d.ts

@@ -5,30 +5,56 @@ import type { HTMLAttributes } from 'vue';
  * AI.W1-α additive `shrink` modifier — when true, the header binds to the
  * `--card-scroll` named scroll-timeline (emitted by the canonical
  * `.card-scroll-host` utility on a scroll-overflow ancestor) and runs a
- * 3-lane choreography as the host scrolls:
+ * 3-lane choreography as the host scrolls. The 3 lanes are now
+ * COMPOSITOR-SAFE (transform/opacity only — BB.W-CARD-COMPOSITE) so ZERO
+ * reflow fires per scroll frame (the A'-3 CLS 1.03 worst-cluster killed):
  *
- *   1. Header padding shrink (0..120px scroll range) — top/bottom padding
- *      collapses from 1rem/0.5rem to 0.5rem/0.25rem.
- *   2. Title font-size shrink (0..120px) — `[data-slot="card-title"]`
- *      glyph scales from `--type-heading` down to `--type-prose`.
- *   3. Description grid-row collapse (0..80px, faster fade) —
- *      `[data-slot="card-description"]` collapses its 1fr → 0fr grid
- *      row while fading opacity → 0; the slot retires entirely past the
- *      80px boundary, freeing vertical real estate for the body.
+ *   1. Header content compress (0..120px scroll range) — the header content
+ *      slides up via `transform: translateY` as the host scrolls so the top
+ *      breathing room visually compresses; the header box keeps its layout
+ *      size (no padding reflow). The visual gestalt — ~0.5rem of top space
+ *      collapses — reads identically.
+ *   2. Title shrink (0..120px) — `[data-slot="card-title"]` scales DOWN via
+ *      `transform: scale(--card-title-shrink-ratio)` (origin: leading edge),
+ *      so the glyph visually shrinks from `--type-heading` to roughly
+ *      `--type-prose` while the text run lays out ONCE (no per-frame
+ *      `font-size` text re-measure — the worst reflow lane, killed).
+ *   3. Description retire (0..80px, faster fade) —
+ *      `[data-slot="card-description"]` fades `opacity: 1 → 0` AND collapses
+ *      `transform: scaleY(1 → 0)` (origin: top) so the slot visually retires
+ *      upward; the real-estate reclaim is the composited scaleY, NOT a
+ *      `grid-template-rows` relayout.
+ *   4. Header background lift (0..120px — BB.W-SCROLL-CARD) — a `::before`
+ *      BACKPLATE carrying the `--card-header-bg` tint fades `opacity: 0 → 1`
+ *      on the same timeline, so a stuck header reads transparent over the
+ *      body at scroll-top and lifts to the painted tint as it sticks. The
+ *      opacity channel keeps the lift compositor-safe.
  *
- * The choreography migrates verbatim from value.js's `PaneHeader.vue`
- * (the load-bearing pane-scroll-fade pattern that ran across the 9 panes)
- * — same `--card-scroll` timeline, same `0..120px` / `0..80px` ranges,
- * same animation keyframes (renamed `pane-*` → `card-*`).
+ * BB.W-SCROLL-CARD — the two text lanes (2 + 3) re-target via `:slotted()`
+ * (the precise Vue scoped-CSS slotted-content selector, the MetricRow.vue
+ * idiom) so they MATCH a consumer-SLOTTED <CardTitle>/<CardDescription>; the
+ * prior `:deep()` enabler was the W-CARD-COMPOSITE minimal stopgap, replaced
+ * here by the precise tool (no descendant-leak sledgehammer).
+ *
+ * The choreography ORIGINALLY migrated verbatim from value.js's
+ * `PaneHeader.vue`, which animated LAYOUT properties (padding/font-size/
+ * grid-template-rows/margin) — a per-scroll-frame reflow storm (CLS 1.03,
+ * the A'-3 P0 that shipped at 4.0.0). BB.W-CARD-COMPOSITE re-expresses each
+ * lane as the compositor-transform equivalent the house already speaks
+ * (the `scroll-driven.css` scaleX/translateY/opacity idiom) — the visual
+ * choreography is IDENTICAL; only the mechanism changed. The
+ * `proof:no-layout-animation` gate makes the layout-property class
+ * structurally impossible to re-ship.
  *
  * **Required ancestor**: when `shrink` is true, `.card-scroll-host` MUST
  * sit on the scroll-overflow ancestor (typically the same `<Card>` host's
  * scroll wrapper). Without that host the named timeline never emits and
  * the choreography sits idle. Documented in DESIGN.md `## Card` section.
  *
- * Sticky positioning + background tint stay consumer-side (the consumer
- * adds `class="sticky top-0 backdrop-blur-md"` etc. via `props.class`);
- * `--card-header-bg` is the canonical tint token for that backdrop.
+ * Sticky positioning stays consumer-side (the consumer adds
+ * `class="sticky top-0 backdrop-blur-md"` etc. via `props.class`); the
+ * background TINT is now scroll-driven by lane 4 (the `::before` backplate),
+ * reading `--card-header-bg` as the canonical tint token.
  */
 type __VLS_Props = {
     /**