@mkbabb/glass-ui 4.0.1 → 4.1.0

package/dist/styles/tokens/sizing-config.css

@@ -0,0 +1,110 @@
+/* tokens/sizing-config.css
+   §10 sizing tail — the MetricBadge stacked geometry + the Configurator family
+   (the density ladder, the AZ.W-HIERARCHY section/label/preset vocabulary, the
+   single-column stage floor, the dark-adaptive divider register, the section
+   tonal step) + the component-font override.
+   Carved (BC.W-CARVE6) from the tail of tokens/sizing.css to hold the 500-line
+   no-god-module bound; @import-ed by tokens.css IMMEDIATELY AFTER sizing.css at
+   sizing's own cascade slot — adjacent same-selector :root blocks resolve
+   identically, so the dist is byte-isomorphic.
+   See docs/precepts/design-idioms.md §cohesion-aware partials. */
+:root {
+    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
+       (label / value+unit) wants a taller floor than the inline pill so the
+       label has breathing room above the baseline pair. T.W2.T2 +
+       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
+       min-height with 6px (0.375rem) block padding. The inline ladder
+       keeps its tight defaults via `--metric-badge-min-height` /
+       `--metric-badge-padding-block` (declared inline at the
+       `.metric-badge` selector). */
+    --metric-badge-min-height-stacked: 2.625rem;
+    --metric-badge-padding-block-stacked: 0.375rem;
+
+    /* Configurator — N.W2 Lane A density axis (4 rungs).
+       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
+       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
+       see no visual change. `mobile` halves the vertical breathing room
+       for narrow-viewport studios; `spacious` doubles it for settings-
+       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
+       selector binding. */
+    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
+    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
+    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
+    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
+
+    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
+    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
+    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
+    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
+
+    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
+       NAMED registers the studios (blob, aurora) inherit instead of a flat
+       undifferentiated stack. DISTINCT from the density ladder above (which is
+       the per-row CADENCE, not the section/label/preset register).
+
+       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
+          not a row: the √φ subheading rung at weight 600, lifting off the prior
+          flat `text-small font-semibold`. */
+    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
+    --configurator-section-weight: 600;                   /* the heading weight */
+
+    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
+       Configurator stacks stage-over-aside; a percentage stage height against
+       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
+       phone). The single-column band's `grid-template-rows` floors the stage
+       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
+       the aside row takes the remainder and scrolls internally. */
+    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
+
+    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
+          interaction (C6-10); D6-3's defect is the preset row being spatially
+          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
+          rhythm — its block-padding / gap, NOT a font-weight — so the preset
+          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
+          the vocabulary's "register weight" framing; it lands on the padding/gap
+          slot of `.configurator-presets`, the heavier spatial cadence.) */
+    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
+    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
+
+    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
+       The section + inter-row dividers used to be inline `border-border/40` and
+       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
+       `glass-floating` plate (a luminous transmissive material, --card L16) those
+       near-equal-luminance hairlines effectively VANISHED — "the sections run
+       together". This ONE token is consumed by every divider rule (the
+       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
+       Configurator.vue's aside/preset/footer borders, configurator.css) so the
+       divider weight is retuned from a single override.
+
+       The dark-LIFTING arm is the load-bearing half: the divider must read on
+       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
+       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
+       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
+       visible luminance step survives the dark glass. `light-dark()` carries the
+       arm in ONE declaration (the same :root cascade context as the surface-tint
+       family; an engine without `light-dark()` falls back to the dark-arm.css
+       `.dark` floor minted in lockstep). The SECTION divider runs a touch
+       heavier than the inter-row hairline (a section reads as a section without
+       a second heading rung). */
+    --configurator-divider: light-dark(
+        color-mix(in srgb, var(--border) 55%, transparent),
+        color-mix(in srgb, var(--foreground) 22%, transparent)
+    );
+    --configurator-divider-section: light-dark(
+        color-mix(in srgb, var(--border) 70%, transparent),
+        color-mix(in srgb, var(--foreground) 30%, transparent)
+    );
+    /* The optional faint section-header tonal step — a whisper-light warm wash
+       behind a <ConfiguratorLayer> section so it reads as a grouped section
+       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
+       (transparent) on light where the hairline carries it; a faint
+       foreground-over-transparent lift on dark where the divider alone is
+       subtle. */
+    --configurator-section-tint: light-dark(
+        transparent,
+        color-mix(in srgb, var(--foreground) 3%, transparent)
+    );
+
+    /* Component font override (consumers override locally) */
+    --select-font: inherit;
+}

package/dist/styles/tokens/sizing.css

@@ -122,6 +122,24 @@
     --dropdown-text-secondary: var(--control-text-sm);
     --dropdown-input-height:   var(--control-h-md);
 
+    /* ── The search-family magnitude rungs (BC.W-SEARCH-CUSTOM) ───────────────
+       The SearchBar/FuzzySearch compound surfaces read these indirection rungs
+       for the glyph / icon-button / result-label magnitudes — so a consumer
+       retunes the WHOLE search family from ONE `:root` override, not a fork of
+       per-element px literals (`w-3.5 h-3.5`, `!h-6 !w-6`, `text-[0.6rem]`). Each
+       DEFAULTS to the existing cohort it replaces, so the bare search surface is
+       byte-identical to HEAD (the substitution-vs-redeclaration discipline — the
+       NAME is search-local, the magnitude stays the `--ui-glyph`/`--control-*`
+       source). NO parallel magnitude ladder: these are aliases onto the cohort.
+         • PRIMARY result label / field font  → `--control-text` (the `text-sm` register).
+         • SECONDARY type-Badge / footnote    → `--control-text-sm` (the `text-xs` register).
+         • the search/clear/expand glyph       → `--ui-glyph-sm` (the chrome 1.4 glyph).
+         • the icon-button hit-box            → `--control-h-xs` (the HEAD `h-6`/`h-7`). */
+    --search-icon-size:           var(--ui-glyph-sm);
+    --search-button-size:         var(--control-h-xs);
+    --search-result-text:         var(--control-text);
+    --search-result-text-secondary: var(--control-text-sm);
+
     --size-icon-btn: 2.5rem;
     --icon-xs: 0.75rem;
     --icon-sm: 0.875rem;
@@ -224,6 +242,19 @@
         var(--dock-icon-glyph-floor)
     );
 
+    /* BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — `--dock-control-glyph-size` is
+       the ONE in-dock control-glyph retint knob (the dark-toggle SVG `width`/`height`
+       + the `--dark-mode-toggle-padding` inset BOTH read it), defaulting to the
+       `--dock-scale`-keyed `--dock-icon-glyph` the nav icons paint so the docked
+       toggle is optically uniform out of the box. Like `--dock-icon-glyph` this
+       `:root` declaration resolves the fallback ladder; density.css RE-RESOLVES it
+       inside each `[data-density]` scope and overflow.css RE-DECLARES it in the
+       coarse block, so the density-painted + coarse-scaled `--dock-icon-glyph` flows
+       in (the substitution-vs-inheritance trap closed on all three registers — a
+       `:root`-only knob would freeze at the `:root` `--dock-scale` while the glyph
+       lifts). ONE knob; no per-size literal, no `!important`. */
+    --dock-control-glyph-size: var(--dock-icon-glyph);
+
     /* AX.W45-TUNE Q1 — the COLLAPSED-pill floor tokens. The collapsed summary
        used to fall to `--dock-layer-height` (the FULL control height, ~2.5rem) for
        its `min-width` with NO block floor, so the shrunken pill read as an
@@ -315,12 +346,9 @@
        `--dock-rail-extend-length` (declared in rail-extend.css) was RE-SEMANTICIZED:
        it is no longer a one-way connector length but the SYMMETRIC per-side overrun of
        the seam line (the line's cross-extent = dock extent + 2× the knob, centered on
-       the seam). `--dock-rail-retract-stub` is the residual protrusion FRACTION the
-       chips leave past the dock edge on collapse (the macOS fan-out "retract INTO the
-       rail leaving a slight protrusion"; 0 = fully retracted, 1 = no retract). The
-       `--dock-section-zone-gap` is the inter-control rhythm inside a <DockSection> zone
-       (defaults to the dock's own `--dock-gap`, so the section grouping adds no box). */
-    --dock-rail-retract-stub: 0.35;
+       the seam). The `--dock-section-zone-gap` is the inter-control rhythm inside a
+       <DockSection> zone (defaults to the dock's own `--dock-gap`, so the section
+       grouping adds no box). */
     --dock-section-zone-gap: var(--dock-gap, 0.25rem);
 
     /* Dock active-state ladder (O.W6 Lane B)
@@ -389,6 +417,21 @@
        WCAG 2.5.5 floor on touch devices. */
     --dock-touch-target: 2.75rem; /* 44px */
 
+    /* BC.W-AX-DOCK-COCKPIT — the dock LABEL-tracks-CONTROL ratio (the
+       dock-oversize chronic close, speedtest A-9). The `dock-label`
+       (typography/semantic.css) sizes its font as a PROPORTION of the
+       control height — `calc(var(--dock-control-size) * var(--dock-label-ratio))`
+       — so a tighter control (the `[data-preset="cockpit"]` 2.75rem floor with
+       compact chrome) carries a proportionally tighter label, never the fixed
+       `--type-subheading` rung that read OVERSIZE on a tight pill. The default
+       reproduces `--type-subheading` (1.272rem) at the comfortable `2.5rem`
+       control (1.272 / 2.5 = 0.5088) so the bare default is byte-near-identical
+       — opt into the cockpit preset (or override this knob from `:root`/the
+       `[data-preset]` scope) to retune the whole dock label family in ONE write.
+       The explicit `--dock-label-size` knob STILL wins when set (the dock.css
+       audacious-mobile carve precedent, KEPT — the ratio is the FALLBACK). */
+    --dock-label-ratio: 0.5088;
+
     /* AQ.W3 §7 — canonical WCAG 2.5.5 (44px) touch-target floor for the
        NON-dock coarse-pointer surfaces (`Button size="icon"`,
        ExpandableContainer triggers, SegmentedTabs responsive mobile trigger). One
@@ -398,102 +441,10 @@
        dock floor and the general floor can be retuned independently. */
     --touch-target: 2.75rem; /* 44px */
 
-    /* MetricBadge — stacked variant geometry. The 2-row stacked layout
-       (label / value+unit) wants a taller floor than the inline pill so the
-       label has breathing room above the baseline pair. T.W2.T2 +
-       audit B-spec §3.2 vertical-rhythm table land 42px (2.625rem) as the
-       min-height with 6px (0.375rem) block padding. The inline ladder
-       keeps its tight defaults via `--metric-badge-min-height` /
-       `--metric-badge-padding-block` (declared inline at the
-       `.metric-badge` selector). */
-    --metric-badge-min-height-stacked: 2.625rem;
-    --metric-badge-padding-block-stacked: 0.375rem;
-
-    /* Configurator — N.W2 Lane A density axis (4 rungs).
-       The `comfortable` rung restates the pre-N.W2 baked recipe exactly
-       (`gap-1.5 py-2` = 0.375rem / 0.5rem) so unparameterised consumers
-       see no visual change. `mobile` halves the vertical breathing room
-       for narrow-viewport studios; `spacious` doubles it for settings-
-       page hosts. See `<ConfiguratorRow>` scoped CSS for the attribute-
-       selector binding. */
-    --configurator-row-gap-mobile: 0.25rem;        /*  4px — tight */
-    --configurator-row-gap-compact: 0.3125rem;     /*  5px — slightly tighter */
-    --configurator-row-gap-comfortable: 0.375rem;  /*  6px — pre-N.W2 default */
-    --configurator-row-gap-spacious: 0.75rem;      /* 12px — generous */
-
-    --configurator-row-py-mobile: 0.25rem;         /*  4px — tight */
-    --configurator-row-py-compact: 0.375rem;       /*  6px — slightly tighter */
-    --configurator-row-py-comfortable: 0.5rem;     /*  8px — pre-N.W2 default */
-    --configurator-row-py-spacious: 0.875rem;      /* 14px — generous */
-
-    /* Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY — D6-3). The three
-       NAMED registers the studios (blob, aurora) inherit instead of a flat
-       undifferentiated stack. DISTINCT from the density ladder above (which is
-       the per-row CADENCE, not the section/label/preset register).
-
-       1. Section register — the <ConfiguratorLayer> label reads as a SECTION,
-          not a row: the √φ subheading rung at weight 600, lifting off the prior
-          flat `text-small font-semibold`. */
-    --configurator-section-size: var(--type-subheading);  /* 20.4px — √φ section rung */
-    --configurator-section-weight: 600;                   /* the heading weight */
-
-    /* AZ.W-BLOB-REDRESS — the SINGLE-COLUMN stage-row FLOOR. Below `lg` the
-       Configurator stacks stage-over-aside; a percentage stage height against
-       an INDEFINITE auto-row resolves to 0 (the GooBlob hero painted 0×0 on a
-       phone). The single-column band's `grid-template-rows` floors the stage
-       row at this DEFINITE `minmax(…)` minimum so the percentage resolves;
-       the aside row takes the remainder and scrolls internally. */
-    --configurator-stage-min: 18rem;                      /* 288px — the mobile live-specimen stage floor */
-
-    /* 2. Preset-row PRIMARY-AFFORDANCE lift. The preset picker is the primary
-          interaction (C6-10); D6-3's defect is the preset row being spatially
-          CRAMPED. This token's binding SEMANTIC is the preset row's SPATIAL
-          rhythm — its block-padding / gap, NOT a font-weight — so the preset
-          row breathes ABOVE a body ConfiguratorRow. (The `-weight` name follows
-          the vocabulary's "register weight" framing; it lands on the padding/gap
-          slot of `.configurator-presets`, the heavier spatial cadence.) */
-    --configurator-preset-row-weight: 0.625rem;           /* 10px — > a body row's 8px py-comfortable */
-    --configurator-preset-row-gap: 0.5rem;                /*  8px — generous chip gap */
-
-    /* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1 / CFG-4).
-       The section + inter-row dividers used to be inline `border-border/40` and
-       `border-border/30` Tailwind alphas; over the W-DARK-MATERIAL dark
-       `glass-floating` plate (a luminous transmissive material, --card L16) those
-       near-equal-luminance hairlines effectively VANISHED — "the sections run
-       together". This ONE token is consumed by every divider rule (the
-       <ConfiguratorLayer> section border, the dividers-prop inter-row border,
-       Configurator.vue's aside/preset/footer borders, configurator.css) so the
-       divider weight is retuned from a single override.
-
-       The dark-LIFTING arm is the load-bearing half: the divider must read on
-       BOTH plates. On LIGHT it is the resting `--border` warm-neutral at the
-       prior ~40% weight; on DARK it LIFTS off `--border` (L34 over the L16 plate
-       — too close) toward the `--foreground` warm-ink (L90) at a higher α, so a
-       visible luminance step survives the dark glass. `light-dark()` carries the
-       arm in ONE declaration (the same :root cascade context as the surface-tint
-       family; an engine without `light-dark()` falls back to the dark-arm.css
-       `.dark` floor minted in lockstep). The SECTION divider runs a touch
-       heavier than the inter-row hairline (a section reads as a section without
-       a second heading rung). */
-    --configurator-divider: light-dark(
-        color-mix(in srgb, var(--border) 55%, transparent),
-        color-mix(in srgb, var(--foreground) 22%, transparent)
-    );
-    --configurator-divider-section: light-dark(
-        color-mix(in srgb, var(--border) 70%, transparent),
-        color-mix(in srgb, var(--foreground) 30%, transparent)
-    );
-    /* The optional faint section-header tonal step — a whisper-light warm wash
-       behind a <ConfiguratorLayer> section so it reads as a grouped section
-       WITHOUT a new heading rung (within the W-HIERARCHY register). Default off
-       (transparent) on light where the hairline carries it; a faint
-       foreground-over-transparent lift on dark where the divider alone is
-       subtle. */
-    --configurator-section-tint: light-dark(
-        transparent,
-        color-mix(in srgb, var(--foreground) 3%, transparent)
-    );
-
-    /* Component font override (consumers override locally) */
-    --select-font: inherit;
+    /* The MetricBadge stacked geometry + the Configurator family (density ladder,
+       AZ.W-HIERARCHY section/label/preset vocabulary, stage-floor, dark-adaptive
+       divider register, section tonal step) + the --select-font override are carved
+       into tokens/sizing-config.css (a cohesive §10 tail, the no-god-module re-drain)
+       — @import-ed by tokens.css IMMEDIATELY AFTER sizing.css (adjacent same-selector
+       :root blocks, byte-isomorphic). */
 }

package/dist/styles/tokens.css

@@ -33,6 +33,11 @@
 @import "./tokens/on-glass-fg.css";
 @import "./tokens/offsets.css";
 @import "./tokens/sizing.css";
+/* BC.W-CARVE6 — sizing.css's §10 tail (MetricBadge stacked geometry + the
+   Configurator density/HIERARCHY/divider family + the --select-font override)
+   carved into sizing-config.css to hold the 500-line bound, @import-ed IMMEDIATELY
+   AFTER sizing.css (adjacent same-selector :root blocks — byte-isomorphic). */
+@import "./tokens/sizing-config.css";
 @import "./tokens/scale-paper.css";
 @import "./tokens/scroll-tokens.css";
 @import "./tokens/light-dark.css";

package/dist/styles/typography/semantic.css

@@ -157,13 +157,26 @@ body {
 /* Canonical dock control label register — text labels INSIDE
    `.dock-tab-button` (Start, Next, Submit, …) that want an emphatic character
    without `.text-heading`'s `font-weight: 700` (which reads as literal bold in
-   a dock pill). Composes the `--dock-label-size` knob when set (dock.css
-   audacious mobile carve), else `--type-subheading`. Weight 400 — Plus Jakarta
-   reads heavier than its numeric weight at pill size, so regular is the
-   not-bold register. */
+   a dock pill). Weight 400 — Plus Jakarta reads heavier than its numeric weight
+   at pill size, so regular is the not-bold register.
+
+   BC.W-AX-DOCK-COCKPIT — the label TRACKS the control height by ratio (the
+   dock-oversize chronic close, speedtest A-9): the font is a PROPORTION of the
+   control (`calc(var(--dock-control-size) * var(--dock-label-ratio))`) so a
+   tighter control (the `[data-preset="cockpit"]` 2.75rem floor + compact chrome)
+   carries a proportionally tighter label — never the fixed `--type-subheading`
+   rung that read OVERSIZE on a tight pill. The explicit `--dock-label-size` knob
+   STILL wins when set (the dock.css audacious-mobile carve precedent, KEPT — the
+   ratio is the FALLBACK). The `--dock-label-ratio` default reproduces
+   `--type-subheading` at the comfortable `2.5rem` control (sizing.css), so the
+   bare default is byte-near-identical; the `--dock-control-size` fallback `2.5rem`
+   mirrors the comfortable rung for a label outside a density-painted scope. */
 @utility dock-label {
     font-family: var(--font-text);
-    font-size: var(--dock-label-size, var(--type-subheading));
+    font-size: var(
+        --dock-label-size,
+        calc(var(--dock-control-size, 2.5rem) * var(--dock-label-ratio))
+    );
     line-height: var(--type-leading-body);
     font-weight: 400;
     letter-spacing: var(--type-tracking-normal);

package/dist/styles/utilities/a11y-overrides.css

@@ -114,7 +114,7 @@ html.no-transition *:not([data-allow-motion])::after {
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
     [data-size="icon"],
-    .expandable-container__trigger,
+    [data-part="trigger"],
     .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);
         min-inline-size: var(--touch-target, 2.75rem);
@@ -160,10 +160,25 @@ html.no-transition *:not([data-allow-motion])::after {
             translate: -50% -50%;
             min-width: var(--touch-target, 2.75rem);
             min-height: var(--touch-target, 2.75rem);
-            /* Inherit the host's pointer-events so a tap within the halo
-               registers on the atom; the overlay itself is decorative (no
-               paint), so it never occludes the host's own interaction. */
-            pointer-events: auto;
+            /* BC.W-RADIO-FIX — the swallow-fix (the §F headline binding bug).
+               An absolutely-positioned `::before` over the atom with
+               `pointer-events: auto` becomes the topmost hit target across the
+               whole 44px box and INTERCEPTS the real pointer event before it
+               reaches the host's listener — reka's RadioGroupItem / Checkbox /
+               Switch / SliderRoot bind their toggle/drag handler on the HOST
+               button (Radio.vue `onClick`), and the swallowing overlay was the
+               root of "radios don't work" (a synthetic .click() on the host
+               still fired, but a real coarse tap landed on the pseudo and
+               no-op'd). `pointer-events: none` frees the pointer to fall
+               through to the host so the tap reaches reka on EVERY input path,
+               while the 44px GEOMETRY still satisfies the WCAG-2.5.5 readback
+               (getComputedStyle reads min-width/height, not pointer-events —
+               the hit FLOOR is the box, never a pointer-swallowing overlay).
+               The same integrity discipline `useDockClickIntegrity` applies to
+               the dock + the Slider's own `.slider-thumb.touch-hit-area::before`
+               override already discovered (AY.W-SCALE2) — now ONE source for
+               the whole six-atom hit-area family. */
+            pointer-events: none;
         }
     }
 }

package/dist/styles/utilities/base-misc.css

@@ -212,6 +212,27 @@
         scroll-timeline: --card-scroll block;
     }
 
+    /* ── Stable scroll gutter — the no-shift discipline for overlay-hosting
+       route scrollers (BC.W-DROPDOWN-FIX) ──────────────────────────────────
+       An app-shell route scroller that hosts portaled picker/menu overlays
+       (Select / DropdownMenu / any reka overlay that locks body scroll on open)
+       RESERVES a stable scrollbar gutter so the lock-induced scrollbar removal
+       removes no layout space — the centred content does not reflow and the
+       trigger does not twitch left/right (USER-DEFECTS §F, the classic
+       space-taking-scrollbar reflow).
+
+       PRESETS-IN-CONSUMERS: the library ships the named discipline; the CONSUMER
+       app-shell opts its OWN route scroller in (the demo `.demo-main-scroller`
+       is the reference adoption). glass-ui does not force `scrollbar-gutter` on
+       every consumer's scroller — it provides this utility + the canon note.
+
+       Baseline-newly-available: Chrome 94+, Firefox 97+, Safari 18.2+ — a
+       non-supporting engine ignores the property (the gutter just isn't
+       reserved, the legacy behaviour). */
+    .scroll-gutter-stable {
+        scrollbar-gutter: stable;
+    }
+
     /* ── Shimmer text effects ──
        BB.W-METAL-SHIMMER — the gold-only `gold-shimmer-slide` is RETIRED (clean
        break, no alias); `.gold-shimmer` re-points onto the metal-PARAMETERIZED
@@ -253,3 +274,34 @@
     }
 
 }
+
+/* ── @utility ghost-slot (BC.W-GHOST-DASHED) ────────────────────────────────
+   The ONE dashed-outline placeholder register: everywhere a slot is empty / a
+   thing is a placeholder / an affordance is "add something here", the surface
+   reads this — a dashed-outline plate, consistently rounded (--radius-card),
+   calm-muted, that reads unmistakably "this is a placeholder, not a filled
+   surface." The 6 ad-hoc `rounded-{md,2xl,card} border border-dashed
+   border-border bg-{card,background}` forks (three radii, three hosts, three
+   pads) COLLAPSE onto this ONE register: ONE radius, ONE faint-wash host, ONE
+   muted ink, ONE warm dashed hairline.
+
+   WARM-NOT-GREY (BA.W-NO-GRAY): the dashed hairline is the warm-ink at 22%
+   (a color-mix off --foreground, the warm identity), NEVER a grey
+   `border-border` — the ghost must read warm-material, not grey.
+
+   GLASS-ADJACENT, not opaque: the host is a faint glass-wash (the rebuilt W55
+   material reads THROUGH it), NOT a flat opaque `bg-card` slab — so the ghost
+   reads "empty," not "filled," and the D1 grey-plate regression cannot re-enter
+   through the placeholder.
+
+   THE FENCE (binding both ways): this is the RECTANGULAR-placeholder register.
+   The `WatercolorDot variant="ghost"` (the seeded-blob SILHOUETTE traced as a
+   dashed stroke — the empty-PALETTE-slot affordance) is a DISTINCT register;
+   neither forks the other. .ghost-slot is never applied to a blob-silhouette
+   slot, and the watercolor ghost never adopts this rectangle recipe. */
+@utility ghost-slot {
+    border: 1px dashed color-mix(in srgb, var(--foreground) 22%, transparent);
+    border-radius: var(--radius-card);
+    background: color-mix(in oklab, var(--glass-bg-wash), transparent 40%);
+    color: var(--muted-foreground);
+}

package/dist/styles/utilities/btn.css

@@ -49,12 +49,23 @@
    Shared compound transition for interactive controls that animate their
    surface (background-color/color/box-shadow/border-color) on the four-state
    contract. Replaces the per-site
-   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-fast)] ease-[var(--ease-standard)]`
+   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-control)] ease-[var(--ease-standard)]`
    arbitrary wraps at ≥2 sites (TabsTrigger, SelectTrigger, Toggle `card`
-   variant). Binds the canonical --duration-fast + --ease-standard tokens. */
+   variant).
+
+   BC.W-CONTROL-SMOOTH — the surface legs read the QUICK control clock
+   `--duration-control` (0.12s, the named iOS control-press surface beat,
+   scheme-motion.css), NOT the 0.2s calm `--duration-fast`. A control the user
+   actively pokes wants the ~100-120ms quick beat that tracks the cursor; the
+   prior 0.2s dragged the colour/border/shadow VISIBLY behind the press (the §F
+   "super laggy" read). The bezier `--ease-standard` STAYS (a colour cross-fade
+   on a spring wobbles — §6 binding); the property list stays SURFACE-ONLY (no
+   `transform` leg — the press-squish is `.tap-squish`/`useSpringPress`'s spring
+   job, the canonical split). One token re-times the whole 12-consumer control
+   family. */
 @utility transition-control {
     transition-property: background-color, color, box-shadow, border-color;
-    transition-duration: var(--duration-fast);
+    transition-duration: var(--duration-control);
     transition-timing-function: var(--ease-standard);
 }
 

package/dist/styles/utilities/components.css

@@ -31,11 +31,17 @@
         background: var(--metric-badge-bg, var(--glass-bg-quiet));
         backdrop-filter: var(--metric-badge-blur, var(--glass-blur-quiet));
         box-shadow: var(--metric-badge-shadow, 0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent), var(--glass-highlight));
+        /* SPATIAL/EFFECTS split (motion-canon P1): the EFFECTS legs
+           (background/border-color/box-shadow) ride the bezier --ease-standard;
+           the SPATIAL hover-lift legs (translate/scale) ride the --spring-smooth
+           hover register on its own settle clock --spring-smooth-duration (the
+           ONE interactive transform register .btn-pill/.glass-btn settle on). */
         transition:
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard);
+            translate var(--spring-smooth-duration) var(--spring-smooth),
+            scale var(--spring-smooth-duration) var(--spring-smooth);
     }
 
     .metric-badge > span {
@@ -49,11 +55,17 @@
 
     .metric-badge:hover {
         /* Hover lifts to the `resting` rung — one step up the canonical
-           ladder (audit U.W0.C-c §7.2). */
+           ladder (audit U.W0.C-c §7.2). BC.W-AX-METRIC-HOVER lifts the badge
+           into a tactile VALUE-LIFT: it nudges UP (--metric-badge-hover-translate
+           -2px) + scales a hair more (1.04) + casts the cartoon-sticker offset
+           shadow (--shadow-cartoon-sm) — token-first, so a consumer zeroes the
+           lift from :root (--metric-badge-hover-translate: 0). Compositor-only
+           (translate/scale/box-shadow — proof:no-layout-animation holds). */
         border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
         background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
-        box-shadow: var(--metric-badge-hover-shadow, 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent), var(--glass-highlight));
-        scale: var(--metric-badge-hover-scale, 1.02);
+        box-shadow: var(--metric-badge-hover-shadow, var(--shadow-cartoon-sm), var(--glass-highlight));
+        translate: 0 var(--metric-badge-hover-translate, -2px);
+        scale: var(--metric-badge-hover-scale, 1.04);
     }
 
     .metric-badge:active {
@@ -212,7 +224,14 @@
         backdrop-filter: var(--glass-blur-floating);
 
         padding: 0 0.75rem;
-        height: 2.25rem;
+        /* BC.W-SEARCH-CUSTOM — the height reads the shared `--control-pill-h`
+           element-override seam (the SAME rung `.input-pill` reads), DEFAULTING to
+           `--control-h-sm` so a bare search bar is byte-identical to the HEAD
+           2.25rem pill. `controlSizeClass(size)` (_shared/useControlSize.ts) re-points
+           the seam per rung (sm→`--control-h-xs`-ish via the cohort, lg→`--control-h-lg`),
+           so the SearchBar/FuzzySearch `size` prop retunes the field height WITHOUT a
+           recipe fork — ONE substitution rung, the cohort is still the source. */
+        height: var(--control-pill-h, var(--control-h-sm));
         max-width: var(--max-width-input);
         width: 100%;
         transition:
@@ -226,7 +245,13 @@
 
     .input-bar-field {
         font-family: var(--font-mono, monospace);
-        font-size: var(--type-small);
+        /* BC.W-SEARCH-CUSTOM — the field font reads the shared `--control-pill-text`
+           seam (the SAME rung `.input-pill` reads), DEFAULTING to `--control-text`
+           (≈ the prior `--type-small` register at scale 1 — byte-near-identical). The
+           `controlSizeClass("sm")` rung re-points it to `--control-text-sm` (quieter);
+           `default`/`lg` keep `--control-text`. So the search field type tracks the
+           cohort under `--ui-scale`, NOT a static `--type-small` literal. */
+        font-size: var(--control-pill-text, var(--control-text));
         background: transparent;
         border: none;
         outline: none;

package/dist/styles/utilities/metal.css

@@ -57,6 +57,32 @@
         background-clip: text;
         -webkit-background-clip: text;
         color: transparent;
+
+        /* ── BC.W-AX-METAL-GLOW — the gold catch-light (the lit-metal halo) ──────
+           A soft glow halo of the metal's OWN base hue behind the gradient text-clip
+           so the gold reads as LIT metal (light catching its surface), not a flat
+           gradient fill. Because `background-clip: text` makes the text transparent,
+           a `filter: drop-shadow` follows the clipped glyph shape — the halo hugs the
+           letters. ONE recipe on the shared selector (every metal lit, never a per-
+           metal re-paste); the glow reads `--metal-stop-base` so gold halos gold,
+           silver halos silver, bronze halos bronze (NOT a fixed gold-on-every-metal
+           mismatch). The earned-gold register (Q2): `.metal-gold`'s base is
+           `--color-gold`, so the gold catch-light is the earned-gold warm glow.
+
+           PRM-STATIC: the glow paints HERE, at rest, OUTSIDE the no-preference
+           bracket — the lit metal reads for PRM users; ONLY the sweep `animation:`
+           is gated (the §6 calm register; the disco family stays gone — this is a
+           soft warm whisper bounded by `--metal-glow-opacity`, not a neon bloom). */
+        --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 var(--metal-glow-blur)
+                color-mix(
+                    in srgb,
+                    var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%),
+                    transparent
+                )
+        );
     }
 
     /* Per-metal: set the channel marker + re-bind the stop slots to the quad. */

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-CwYNf8bo.js";
+import { t as e } from "./Switch-B8RscmRu.js";
 export { e as Switch };

package/dist/tabs.js

@@ -1,11 +1,11 @@
 import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./useLiquidFlex-mZPMiNXh.js";
-import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-CrA8F0iV.js";
-import { i as s, n as c, r as l, t as u } from "./TooltipProvider-rzvnXz60.js";
-import { t as d } from "./useDragMorph-DgxnsVJz.js";
+import { t } from "./useLiquidFlex-UmA6LMZu.js";
+import { a as n, i as r, o as i, r as a, s as o } from "./SelectScrollDownButton-DAKCBEdW.js";
+import { i as s, n as c, r as l, t as u } from "./TooltipProvider-BJ_Y5EGX.js";
+import { t as d } from "./useDragMorph-BUgAC-zK.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeModels as x, mergeProps as S, nextTick as C, normalizeClass as w, normalizeStyle as ee, onBeforeUnmount as te, onMounted as T, onUnmounted as E, openBlock as D, ref as O, renderList as k, renderSlot as A, toDisplayString as j, unref as M, useModel as ne, watch as N, withCtx as P } from "vue";
 //#region src/components/custom/tabs/constants.ts
-var F = 1.08, I = .82;
+var F = 1.15, I = .82;
 //#endregion
 //#region src/components/custom/tabs/composables/useTabIndicator.ts
 function re(e) {
@@ -67,7 +67,7 @@ function re(e) {
 		let a = i.value[m], o = i.value[e];
 		if (m = e, !a || !o) return;
 		let s = u.value ? n.value?.offsetHeight || o.offsetParent?.offsetHeight || 1 : n.value?.offsetWidth || o.offsetParent?.offsetWidth || 1, c = u.value ? Math.abs(o.offsetTop - a.offsetTop) : Math.abs(o.offsetLeft - a.offsetLeft), l = s > 0 ? Math.min(c / s, 1) : 0, d = getComputedStyle(t).getPropertyValue("--tab-indicator-max-stretch").trim();
-		g = Number(d) || 1.08, _.squish(l), h && clearTimeout(h), t.style.setProperty("--stretch", String(_.stretch.value));
+		g = Number(d) || 1.15, _.squish(l), h && clearTimeout(h), t.style.setProperty("--stretch", String(_.stretch.value));
 		let f = y(t) * I;
 		h = setTimeout(() => {
 			_.squish(0), t.style.setProperty("--stretch", String(_.stretch.value)), h = null;
@@ -98,7 +98,7 @@ function ie(e) {
 		let e = t.value;
 		if (!e) return F;
 		let n = getComputedStyle(e).getPropertyValue("--tab-indicator-max-stretch").trim();
-		return Number(n) || 1.08;
+		return Number(n) || 1.15;
 	}
 	function u() {
 		return a.value.map((e, t) => {
@@ -156,7 +156,7 @@ var ae = ["role", "aria-orientation"], oe = [
 		},
 		draggable: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		class: { type: [
 			Boolean,

package/dist/timeline.js

@@ -1,5 +1,5 @@
 import { t as e } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { t } from "./HoverPopover-CbqbNwgU.js";
+import { t } from "./HoverPopover-BcIxvyqZ.js";
 import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createSlots as c, createVNode as l, defineComponent as u, guardReactiveProps as d, normalizeClass as f, normalizeProps as p, normalizeStyle as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region src/components/custom/timeline/geometry.ts
 function S(e) {