@mkbabb/glass-ui 4.0.1 → 4.1.0

package/src/styles/dock/search.css

@@ -0,0 +1,68 @@
+/* dock/search.css — the dock-as-native-dynamic-search-bar field surface (BC.W-DOCK-SEARCH).
+ *
+ * The active dock-search field + its placeholder + the result rows read CLEARLY forward
+ * over whatever backdrop the dock floats on (≥4.5:1, the W55 darken seam) — never the
+ * pale-ghost-fading-into-content trap (the NN/g defect, WWDC §219 "buttons remain
+ * legible"). The field surface composes the W55 `--glass-tint-strength-aa` bright-bucket
+ * darken at the ELEMENT level (the `color-mix(in oklab, <rung>, var(--glass-tint-source)
+ * var(--glass-tint-strength))` seam glass/ladder.css + morph.css already compose) — NOT
+ * the RAW pre-substituted `--glass-bg-dock` token (the substitution-vs-inheritance trap
+ * the dock surfaces already hit: a surface reading the pre-baked `--glass-bg-dock` baked
+ * at `:root` 0% strength does NOT darken — the pale-fade). At the 0%/floor default the
+ * inner oklab mix is a no-op (byte-identical to the un-tinted rung); under the bright
+ * bucket it darkens-over-light (and lifts-over-dark per W-DARK-MATERIAL).
+ *
+ * The result rows ride `.glass-menu-row` (the glass-quiet hover-lift, BA.W-MENU-GLASS —
+ * CONSUMED here, the glassify is BC.W-SEARCH-CUSTOM's). The customization-surface axes
+ * (size/surface/variant) are BC.W-SEARCH-CUSTOM's — this partial only seats the field +
+ * the legibility seam. The morph itself is the dock's OWN `--dock-morph-t` + the
+ * byte-untouched `morph-bridge.css` metaball (READ-ONLY — bound, never edited). */
+
+@layer components {
+    /* The search-field region inside the morph aperture. The consumer slots its
+       <SearchBar>/<FuzzySearch> here; this rule owns the legibility seam + the layout
+       inside the aperture (a column: the field over its dropdown). It is present ONLY on
+       a `[data-search]` dock (additive — a non-search dock never carries it). */
+    .glass-dock[data-search] .dock-search-field {
+        display: flex;
+        flex-direction: column;
+        inline-size: 100%;
+        min-inline-size: 0;
+        gap: var(--dock-search-field-gap, 0.375rem);
+    }
+
+    /* The ACTIVE field surface — the W55 element-level oklab tint (NOT the raw
+       `--glass-bg-dock`). The field reads the floating rung darkened toward the warm-ink
+       at the bright-bucket strength, so it reads ≥4.5:1 over a busy backdrop. The
+       `--glass-tint-source`/`--glass-tint-strength` are the SAME element-level customs
+       the dock plate self-engages (morph.css's `:where(.glass-dock)` rule re-points them
+       under the bright bucket); this field rides that lockstep, never a field-local
+       recipe. The field TEXT is `--foreground` (the full warm ink); the
+       placeholder/muted caption is `--on-glass-muted` (5.76:1 vs the plate). */
+    .glass-dock[data-search] .dock-search-field .input-bar {
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        color: var(--foreground);
+    }
+
+    /* The placeholder + the autocomplete ghost-text + any muted caption inside the field
+       read the on-glass muted rung (NOT `--muted-foreground`, which is calibrated against
+       the opaque page and collapses on a translucent darkened plate). */
+    .glass-dock[data-search] .dock-search-field .input-bar-field::placeholder,
+    .glass-dock[data-search] .dock-search-field .dock-search-ghost,
+    .glass-dock[data-search] .dock-search-field .dock-search-result-meta {
+        color: var(--on-glass-muted);
+    }
+
+    /* The dropdown result rows ride the shared `.glass-menu-row` glass-quiet hover-lift
+       (BA.W-MENU-GLASS — CONSUMED, not re-authored). The dock-search list applies
+       `.glass-menu-row` per row; this rule reaches the selected/highlighted row through
+       the SAME register the menu families use (no flat `bg-accent`/`bg-muted` fork). The
+       active result reads the data-highlighted state the menu recipe already paints. */
+    .glass-dock[data-search] .dock-search-field .dock-search-result {
+        color: var(--foreground);
+    }
+}

package/src/styles/dock/shape.css

@@ -0,0 +1,124 @@
+/* dock/shape.css — BC.W-DOCK-ARBITRARY: the arbitrary-shape morph register.
+ *
+ * The dock is no longer locked to "a rectangle that grows wider/taller." Its SHAPE
+ * is a SCALAR PARAMETER on the ONE `--dock-morph-t` clock (the BC.W-DOCK-ENGINE
+ * buttery scalar): the corner profile LERPS between a `--dock-shape-from`/
+ * `--dock-shape-to` radius pair, an OPT-IN `clip-path` silhouette LERPS between a
+ * `--dock-shape-clip-from`/`--dock-shape-clip-to` pair, and a `useLiquidFlex`
+ * volume-preserving squish couples the deformation. So the dock FLOWS between
+ * arbitrary silhouettes — a circle, a pill, a wide bar, a tall rail, a teardrop —
+ * as one continuous liquid-glass surface (the iOS-27 control-center materialization,
+ * apple-ios27.md §3.1 "physically morphs from one shape to another").
+ *
+ * THE COMPOSITOR FLOOR (apple-ios27.md §3.1 + motion-canon P5): the shape morph
+ * animates ONLY `border-radius`/`clip-path`/`--*` — compositor/paint properties,
+ * ZERO per-frame layout. The footprint is reached by the reserved-`scale()` morph
+ * (layers.css, byte-untouched here), NEVER a per-frame size lerp. proof:dock-arbitrary
+ * + proof:no-layout-animation both hold.
+ *
+ * THE LIBRARY DEFAULT IS THE CIRCLE↔PILL IDENTITY (CLAUDE.md the collapsed-perfect-
+ * circle): `--dock-shape-from`/`--dock-shape-to` default to `--radius-dock` (9999px)
+ * on both endpoints — a no-op lerp byte-identical to the prior static
+ * `border-radius: var(--radius-dock)` — and the clip pair defaults `none`/`none`
+ * (the rectangle/pill common case needs no clip). The arbitrary teardrop/blob
+ * silhouette is OPT-IN: a consumer sets the shape tokens on the dock scope
+ * (presets-in-consumers). Clean break (MEMORY: no backwards compat) — the prior
+ * hardcoded circle/pill radius becomes the token DEFAULT, no `--dock-radius-legacy`.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components`. */
+
+@layer components {
+    /* ── The corner-profile lerp (A1 — the shape is a scalar parameter) ───────────
+       The dock surface radius interpolates the `--dock-shape-from`/`--dock-shape-to`
+       token pair on the ONE `--dock-expand-t` scalar (the directional expanded-ness
+       the BC.W-DOCK-ENGINE chrome interp rides; at rest it resolves to the class
+       endpoint, 0 collapsed / 1 expanded, so the resting corner is exact). This
+       GENERALIZES the prior two hardcoded class endpoints into a consumer-targetable
+       parameter: `from` is the collapsed silhouette's corner (the perfect circle,
+       9999px), `to` is the expanded silhouette's corner (the pill / an arbitrary
+       profile). A consumer overrides either token on the dock scope to morph to an
+       arbitrary corner.
+
+       This is the SINGLE radius authority (shell.css's prior static `border-radius:
+       var(--radius-dock)` is GENERALIZED here — no dead static, no duplicate, clean
+       break). Both tokens default to `--radius-dock` (9999px) so the lerp is a NO-OP at
+       the library default — byte-identical to the prior static, the circle↔pill identity
+       preserved. The token-driven `border-radius` interp is a compositor/paint property
+       on the registered `--dock-expand-t` `<number>`, NOT a transition
+       (proof:no-layout-animation stays GREEN). shape.css is imported AFTER shell.css so
+       this rule is the cascade winner for the dock corner. */
+    .glass-dock {
+        border-radius: calc(
+            var(--dock-shape-from, var(--radius-dock)) +
+                (var(--dock-shape-to, var(--radius-dock)) -
+                    var(--dock-shape-from, var(--radius-dock))) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
+    /* ── The arbitrary silhouette — the OPT-IN `clip-path` lerp (A1) ──────────────
+       DEFAULT-OFF: at the library default `--dock-shape-clip-from`/`--dock-shape-clip-to`
+       are `none`, so this rule resolves `clip-path: none` (the rectangle/pill common
+       case needs no clip; the box-morph + corner lerp above is the whole shape). A
+       consumer opts into an arbitrary teardrop/blob silhouette by setting the clip
+       tokens to two compatible `inset()`/`path()`/`shape()` values; the silhouette then
+       LERPS between them on `--dock-morph-t` via the `from` * (1−t) + `to` * t weighting
+       below. `clip-path` is a compositor-friendly property — the silhouette morphs with
+       ZERO reflow (apple-ios27.md §3.1).
+
+       The lerp is expressed as a `clip-path` whose two endpoints carry per-endpoint
+       opacity-like weights via the scalar: the active silhouette is the `to`-clip once
+       the morph crosses, the `from`-clip before. The web platform cannot continuously
+       interpolate two arbitrary mismatched-topology `clip-path` functions, so the
+       opt-in consumer supplies TOPOLOGY-COMPATIBLE endpoints (two `inset()`s, or two
+       `path()`s with equal command counts) — the AX.W42 fold-7 topology limit is
+       RESPECTED (a mismatched-topology V↔H morph occludes its reflow in the goo-merge,
+       BC.W-LIQUID-MORPH, not a continuous clip morph THROUGH the change). The default
+       `none`/`none` opts the whole register off so the limit never bites the common
+       case. The custom property carries the consumer's interpolable pair; the engine
+       resolves it on the scalar only when set. */
+    .glass-dock {
+        --dock-shape-clip: var(--dock-shape-clip-to, none);
+        clip-path: var(--dock-shape-clip);
+    }
+
+    /* While morphing, the opt-in silhouette LERPS: before the midpoint the `from`-clip
+       reads, after it the `to`-clip, so the silhouette flows from one to the other as
+       the box scales under it (the corner + footprint + silhouette all on the ONE
+       scalar). The `none`/`none` default makes this a no-op (`clip-path: none` both
+       sides), so the rectangle/pill morph never pays the clip cost; the arbitrary
+       register engages ONLY when a consumer sets the clip tokens. */
+    .glass-dock[data-morphing] {
+        --dock-shape-clip: var(--dock-shape-clip-from, none);
+    }
+    .glass-dock[data-morphing]:where(.expanded, .always-expanded) {
+        /* expanding (0→1): once past the midpoint the `to`-silhouette is the target */
+        --dock-shape-clip: var(--dock-shape-clip-to, none);
+    }
+
+    /* ── The squish — the `useLiquidFlex` `--stretch` deformation (A4) ────────────
+       The shape morph couples the volume-preserving squish the tab-indicator +
+       useDockOrientationMorph already speak: `scale: var(--stretch) calc(1/var(--stretch))`
+       along the morph axis, capped LOW at `--dock-morph-max-stretch` (~1.08) by
+       useLiquidFlex itself (the ONE squish source — no forked deformation math). The
+       plate DEFORMS like liquid as it changes shape — a fast morph swells, a slow one
+       barely. The driver (useDockOrientationMorph) writes `--stretch` on the dock scope;
+       at rest `--stretch` is unset → 1/1 (no squish). The reciprocal pairing preserves
+       volume (stretch along travel, compress across). This is compositor-only (a
+       `scale` transform), composed WITH the reserved-footprint `scaleX/scaleY` morph
+       (layers.css) — the box scale rides `--dock-morph-scale`, the squish rides
+       `--stretch`, both transforms multiply on the compositor.
+
+       Scoped to `[data-morphing]` so the squish is a morph-transient (at rest the plate
+       is un-squished); the cross-axis is the morph axis's reciprocal. Horizontal docks
+       stretch X / compress Y; vertical stretch Y / compress X (the inverse-axis twin,
+       mirroring the bridge plates' per-orientation squish in morph-bridge.css). The
+       squish multiplies onto the dock's OWN transform box (the shell), distinct from the
+       inner `.dock-layers` reserved-scale box, so the two do not fight. */
+    .glass-dock[data-morphing]:not(.vertical) {
+        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
+    }
+    .glass-dock[data-morphing].vertical {
+        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
+    }
+}

package/src/styles/dock/shell.css

@@ -129,7 +129,7 @@
            host-constrained width it already has there. The default free-floating
            dock shrink-wraps to its content (AV.W16 TW3 made this a default and
            silently broke dock sizing for the common case). */
-        border-radius: var(--radius-dock);
+        /* BC.W-DOCK-ARBITRARY — the base corner is the shape register's token lerp (dock/shape.css, the single radius authority generalizing the prior static). */
         white-space: nowrap;
         max-inline-size: var(--dock-max-inline-size);
         padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem);
@@ -148,10 +148,13 @@
         );
         backdrop-filter: var(--dock-surface-blur);
         border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting));
-        /* AV.W15 M3 — the full-perimeter `--glass-edge-light` rim rides as the
-           leading inset layer of the dock shadow stack (the navigation-band
-           silhouette catch-light, distinct from the top-only highlight). */
-        box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock));
+        /* BC.W-BLACK-BAR D2 — the dock rim is the DIRECTIONAL pair (bright catch-light
+           on the TOP edge, faint warm under-shadow on the BOTTOM — glass-fx.css), the
+           leading inset layers of the dock shadow stack. RETIRES the omnidirectional
+           `--glass-edge-light` ring that fought the (now ≤4% α) `--glass-border-dock`
+           perimeter; the navigation band reads its rim from the SAME corrected token
+           source as cards/dialogs (no dock-local dark rim re-paste). */
+        box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock));
     }
 
     /* AW.W2 — the box IS the reveal aperture (clip-reveal one-clock morph).
@@ -311,6 +314,21 @@
             scale var(--dock-motion-resize);
     }
 
+    /* BC.W-DOCK-ENGINE move 2 — the rail polish transition is COMPOSITOR-PROMOTED
+       only while its hover/press/held state is ARMED (the transform/scale legs ride
+       the compositor channel; `will-change: transform` hints the layer for the
+       gesture). NEVER a resting `will-change` (a permanent promotion pins a wasted
+       compositor layer at rest — the motion-canon P5 no-resting-promotion floor):
+       the hint lives on the `:hover`/`:active`/`[data-held]` armed selectors and is
+       cleared the instant the state releases. PRM keeps no pinned layer either — the
+       universal a11y carve strips the spatial transform under reduce, and a
+       non-animating rail needs no promotion. */
+    .glass-dock.vertical:hover,
+    .glass-dock.vertical:active,
+    .glass-dock.vertical[data-held] {
+        will-change: transform;
+    }
+
     /* AZ.W-DOCK-TAXONOMY — the vertical dock's surface plate (the prior
        `.variant-rail` block; "rail-ness" is now `orientation="vertical"` + a
        shape/density choice, not a variant). */

package/src/styles/dock/stack-rail.css

@@ -0,0 +1,264 @@
+/* dock/stack-rail.css — BC.W-DOCK-STACK-RAIL — the macOS hover-expand STACK rail
+ * (the clean-break rebuild; the divider-carousel chip-strip RETIRED).
+ *
+ * THE KEPT CHASSIS (glass-dock-codebase.md §2.5 — "that part STAYS"). The `.glass-dock`
+ * root carries `contain: paint` + `backdrop-filter` + (on a vertical dock) `overflow` —
+ * all three hard-clip every descendant to the dock's border box, so an `#rail` rendered
+ * as a dock CHILD could never paint beyond the edge. The escape: GlassDock renders the
+ * `#rail` as a SIBLING of `.glass-dock` inside the `.glass-dock-frame` (a `display:contents`
+ * shell that becomes a NON-clipping positioning context only when `data-has-rail`). The
+ * `.dock-hairline-slot` is `position: absolute` relative to THAT shell — outside the dock's
+ * containment — so the stack VISIBLY extends beyond the dock edge into its own gutter. No
+ * `contain`, no `backdrop-filter`, no `overflow` on the shell → nothing clips it. This is
+ * the load-bearing chassis the rebuild reuses; the box stays INVIOLATE (the slot feeds NO
+ * size into the dock's intrinsic box).
+ *
+ * THE STACK (the verbatim spec — rail-spec-contradicted-divider-carousel). A `<DockStack>`
+ * is one stack: a CORE anchor item (the always-visible dock(1) glyph) + N members. On
+ * hover/focus of the core, the members FAN OUT next to the rail — a column (vertical dock)
+ * / row (horizontal dock) of FULLY-VISIBLE glass icons springing open beside the line,
+ * each a `--glass-bg-floating` glass icon (NEVER a shadowed half-tucked chip). The fan-out
+ * is compositor-only (scale/translate/opacity/filter — the `proof:no-layout-animation`
+ * floor, NO animated width/height/inset), staggered by `--dock-stack-stagger * var(--i)`.
+ *
+ * CLEARS CONTENT BY TOPOLOGY (THE HEADLINE — ba-dock-shell-gestalt-fail-revoked +
+ * ba-chip-graze). The stack lives BEYOND the dock edge in its own gutter (the
+ * `chipOverMain: false` topology), the fan extending AWAY from content, never over
+ * `<main>` / the `<h1>` / a form field at any y. The chip-graze that revoked the dock/shell
+ * PASS cannot recur.
+ *
+ * @import-ed by dock.css into the SAME `@layer components` as the other partials. */
+@layer components {
+    :root {
+        /* The beyond-edge extent — how far the stack reaches into the gutter past the dock
+           edge. Rides `--dock-scale` so it tracks the coarse-pointer density thread. (KEPT
+           token, re-conceived from the divider-carousel's symmetric overrun to the stack's
+           one-way gutter reach.) */
+        --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
+        /* The macOS-stack tuning tokens (re-expressed via @theme — Tailwind-first, NEVER a
+           raw macOS-dock CSS paste). */
+        --dock-stack-stagger: 28ms; /* the per-member fan delay (× var(--i)) */
+        --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1));
+        --dock-stack-member-size: calc(2rem * var(--dock-scale, 1));
+        --dock-stack-fold: 0.4; /* the at-rest fold scale (the members tuck behind the core) */
+    }
+
+    /* The dock-frame wrapper — KEPT. DEFAULT (`display: contents`) is layout-transparent
+       (byte-identical no-rail path). When a `#rail` is authored it lifts to a real
+       NON-clipping positioning context so the abs-positioned slot anchors to the dock box
+       yet escapes the dock's clip. */
+    .glass-dock-frame {
+        display: contents;
+    }
+    .glass-dock-frame[data-has-rail] {
+        display: inline-flex;
+        position: relative;
+        /* No containment, no overflow, no blur — the WHOLE point: the stack must paint
+           beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its box
+           == the dock box and the rail anchors to the true edge. */
+    }
+    .glass-dock-frame[data-has-rail].vertical {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The chrome-slot wrapper — a `position: absolute` sibling of `.glass-dock`, anchored
+       to the dock-frame (NOT the dock box), so the dock's clip never reaches it. It paints
+       nothing itself; `<DockStack>` owns the core + fan. The slot seats at the dock EDGE
+       (the `position` start/end), NOT a `[data-rail-anchor]` divider seam (the seam-locator
+       RETIRED). It is pass-through; the controls re-arm pointer events. */
+    .dock-hairline-slot {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        pointer-events: none;
+        z-index: 1;
+    }
+    .dock-hairline-slot > * {
+        pointer-events: auto;
+    }
+
+    /* VERTICAL (column) dock — the stack hangs off the TRAILING (inline-end) edge in its
+       gutter, the core seated at the dock's block-end (the macOS-stack anchor: the
+       bottom-most member at the dock floor, the rest fanning up the rail). The slot starts
+       at the dock's trailing edge + the extend reach, clear of <main> (which is to the
+       inline-start). */
+    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
+        inset-inline-start: 100%;
+        inset-inline-end: auto;
+        inset-block-end: 0;
+        inset-block-start: auto;
+        inline-size: var(--dock-rail-extend-length);
+        block-size: 100%;
+    }
+    /* HORIZONTAL (row) dock — the stack rises off the TOP (block-start) edge in its gutter
+       (a viewport-bottom dock keeps the fan ON-SCREEN above the row), the core at the dock's
+       inline-end, the members fanning up. Clear of <main> (which is above the dock). */
+    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
+        inset-block-end: 100%;
+        inset-block-start: auto;
+        inset-inline-end: 0;
+        inset-inline-start: auto;
+        block-size: var(--dock-rail-extend-length);
+        inline-size: 100%;
+    }
+
+    /* ── The stack ────────────────────────────────────────────────────────────────── */
+    .dock-stack {
+        position: relative;
+        display: flex;
+        gap: var(--dock-stack-gap);
+        /* the core anchors at the gutter end nearest the dock; the fan extends AWAY into
+           the gutter (clear of content). */
+    }
+    /* Vertical dock — the stack is a ROW: core nearest the dock edge, members fanning out
+       (inline) into the trailing gutter. Anchored block-end (the bottom-most member at the
+       dock floor — the macOS-stack anchor topology). */
+    .dock-stack.vertical {
+        flex-direction: row;
+        align-items: flex-end;
+    }
+    /* Horizontal dock — the stack is a COLUMN: core nearest the dock edge (block-end),
+       members fanning UP into the gutter above the row. */
+    .dock-stack.horizontal {
+        flex-direction: column-reverse;
+        align-items: center;
+    }
+
+    /* The CORE anchor — the always-visible dock(1) glyph. A floating glass plate (it is
+       chrome OUTSIDE the dock substrate, so it carries its OWN glass register, not the
+       transparent in-dock recipe). */
+    .dock-stack-core {
+        flex: 0 0 auto;
+        z-index: 1;
+    }
+
+    /* The fanned members — the FadingScroll port (the one scroll-fade port). The fan's
+       main-axis extent caps at `--dock-stack-visible` members; an >visibleCount stack
+       scrolls (the port feathers the overflow). */
+    .dock-stack-fan {
+        display: flex;
+        gap: var(--dock-stack-gap);
+        /* scoped main-axis budget — the fan shows `--dock-stack-visible` members then
+           scrolls (the n-stack reachable by scrolling the rail, not the dock box). */
+    }
+    .dock-stack.vertical .dock-stack-fan {
+        flex-direction: row;
+        align-items: flex-end;
+        max-inline-size: calc(
+            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
+                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
+        );
+    }
+    .dock-stack.horizontal .dock-stack-fan {
+        flex-direction: column-reverse;
+        align-items: center;
+        max-block-size: calc(
+            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
+                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
+        );
+    }
+
+    /* Each member — a FULLY-VISIBLE glass icon (the `--glass-bg-floating` tier + the
+       catch-light rim), NEVER a shadowed half-tucked chip (the "NOT shadowed" verbatim
+       ask). It composes the `.dock-icon-button` base; the stack-scoped surface override
+       (0,2,0) beats the base `.dock-icon-button` (0,1,0) on source-order tie without
+       `!important`. */
+    .dock-stack-fan .dock-stack-member {
+        flex: 0 0 auto;
+        inline-size: var(--dock-stack-member-size);
+        block-size: var(--dock-stack-member-size);
+        background: var(--glass-bg-floating);
+        backdrop-filter: var(--glass-blur-floating);
+        -webkit-backdrop-filter: var(--glass-blur-floating);
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
+        border-radius: var(--radius-pill);
+        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent);
+        /* THE FAN-OUT — compositor-only (scale/translate/opacity/filter), NO animated
+           width/height/inset (proof:no-layout-animation). At rest each member is folded
+           behind the core: scaled-down, translated toward the rail (the dock edge),
+           transparent, and a slight materialize blur. The hover-expand springs them OUT
+           staggered by `--dock-stack-stagger * var(--i)` in reading order. */
+        opacity: 0;
+        scale: var(--dock-stack-fold);
+        filter: blur(1px);
+        transition:
+            opacity var(--duration-fast) var(--ease-out)
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            scale var(--duration-normal) var(--spring-dock, var(--ease-out))
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            translate var(--duration-normal) var(--spring-dock, var(--ease-out))
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            filter var(--duration-fast) var(--ease-out)
+                calc(var(--dock-stack-stagger) * var(--i, 0)),
+            background-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard);
+    }
+    /* Vertical dock — at rest the members tuck toward the dock edge (inline-start). */
+    .dock-stack.vertical .dock-stack-member {
+        translate: calc(-1 * var(--dock-rail-extend-length)) 0;
+    }
+    /* Horizontal dock — at rest the members tuck DOWN toward the dock edge (block-end). */
+    .dock-stack.horizontal .dock-stack-member {
+        translate: 0 var(--dock-rail-extend-length);
+    }
+    /* EXPANDED — the members spring OUT to their fanned positions (full scale, in place,
+       opaque, crisp). The stagger lives in the per-member transition-delay. */
+    .dock-stack.is-expanded .dock-stack-member {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+        filter: blur(0);
+    }
+    .dark .dock-stack-fan .dock-stack-member {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
+    }
+    /* The hover/active register — the floating plate firms, the glyph wakes (NOT a
+       saturated brand hue; the selected-reads-as-glass tier, W-REGISTER-IOS). */
+    .dock-stack-fan .dock-stack-member:hover {
+        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+    }
+    .dock-stack-fan .dock-stack-member.is-active {
+        background: var(--dock-control-active-bg, var(--glass-bg-floating));
+        color: var(--dock-fg-on-aurora, var(--foreground));
+        box-shadow:
+            var(--glass-edge-light),
+            var(--glass-specular),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
+    }
+    .dark .dock-stack-fan .dock-stack-member.is-active {
+        box-shadow:
+            var(--glass-edge-light-dark),
+            var(--glass-specular-dark),
+            0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent),
+            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
+    }
+    .dock-stack-fan .dock-stack-member svg {
+        inline-size: 0.875rem;
+        block-size: 0.875rem;
+        flex-shrink: 0;
+    }
+
+    /* PRM — the fan SNAPS to terminal (the fade survives, the transform drops — P6 /
+       proof:no-layout-animation PRM carve). No spring travel, no stagger, no blur-settle. */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-stack-fan .dock-stack-member {
+            transition:
+                opacity var(--duration-fast) linear,
+                background-color var(--duration-fast) var(--ease-standard),
+                box-shadow var(--duration-fast) var(--ease-standard);
+            scale: 1;
+            translate: 0 0;
+            filter: none;
+        }
+    }
+}

package/src/styles/dock-controls/dark-mode-toggle.css

@@ -73,13 +73,26 @@
            padding fell to `var(--dock-icon-padding, 0)` (the token is never defined →
            0 pad → the glyph filled the whole 40px box edge-to-edge, ~2.5× the 16-20px
            nav glyphs — the user's "too large" read). Pad the box by HALF the box↔glyph
-           difference so the `h-full` SVG lands at exactly `--dock-icon-glyph` (the
-           `--dock-scale`-keyed size the nav icons paint) — optically UNIFORM with the
-           nav glyphs through the utility-win path, not fighting it. */
+           difference so the `h-full` SVG lands at exactly `--dock-control-glyph-size`
+           (default `--dock-icon-glyph`, the `--dock-scale`-keyed size the nav icons
+           paint) — optically UNIFORM with the nav glyphs through the utility-win path,
+           not fighting it.
+
+           BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — the inset subtracts
+           `--dock-control-glyph-size`, the SAME ONE knob the SVG `width`/`height`
+           reads below, so the pad and the glyph stay LOCKED (a consumer retinting
+           `--dock-control-glyph-size` moves both in lockstep — no drift between the
+           box pad and the painted glyph). `--dock-control-size` AND
+           `--dock-control-glyph-size` both INHERIT from `.glass-dock[data-density]`,
+           where the coarse `--dock-scale` re-declare (overflow.css) re-resolves them
+           in lockstep — so the calc reads the coarse-scaled values on a coarse
+           pointer too (the AZ.R5-TOKENS substitution-vs-inheritance trap closed for
+           the toggle glyph: the var() resolves at the toggle button, reading the
+           coarse-re-resolved inherited tokens, never the frozen `:root` scale). */
         --dark-mode-toggle-padding: calc(
             (
                     var(--dock-control-size, var(--size-icon-btn)) -
-                        var(--dock-icon-glyph, 1.25rem)
+                        var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem))
                 ) / 2
         );
     }

package/src/styles/dock-controls/icon-button.css

@@ -113,6 +113,20 @@
             border: var(--dock-active-border);
             box-shadow: var(--dock-active-shadow);
         }
+
+        /* BC.W-DOCK-ENGINE cross-repo fold (fourier-M #10) — the `<DockIconButton
+           :active>` selectable register. The `data-active` hook the component stamps
+           reads the rail's "selected reads as glass" tier (`--dock-control-active-bg`,
+           default `--glass-bg-floating` — a GLASS tier ABOVE the rest fill, NEVER a
+           saturated brand hue, per W-REGISTER-IOS). Distinct from the consumer
+           `--dock-active-*` cohort above (a parent-scoped audacious override): this is
+           the library's default selected glass, ergonomic sugar over the shipped
+           register so a selectable dock control needs no hand-rolled active paint. The
+           glyph/label firm to the full warm-ink, mirroring the rail's `.is-active`. */
+        &[data-active] {
+            background: var(--dock-control-active-bg, var(--glass-bg-floating));
+            color: var(--dock-fg-on-aurora, var(--foreground));
+        }
     }
 
     /* focus-visible ring + disabled paint hoisted to the shared `:where()`

package/src/styles/dock.css

@@ -37,12 +37,22 @@
 @import "./dock/shell.css";
 @import "./dock/morph.css";
 @import "./dock/density.css";
+@import "./dock/shape.css";
 @import "./dock/layers.css";
 @import "./dock/layer-group.css";
 @import "./dock/overflow.css";
-@import "./dock/rail-extend.css";
+@import "./dock/stack-rail.css";
 @import "./dock/section.css";
 @import "./dock/morph-bridge.css";
+/* BC.W-AX-DOCK-CTA-SEAT — the [data-cta-pending] CTA-receive landing seat (the static
+   resting-geometry reserve + the plain transition:opacity FLIP reveal). Last in the
+   dock cascade — a net-new surface around the byte-untouched useDockCtaReceive morph. */
+@import "./dock/cta-seat.css";
+/* BC.W-DOCK-SEARCH — the dock-as-native-dynamic-search-bar field surface (the W55
+   active-field tint legibility seam + the `.glass-menu-row` result rows). A net-new
+   surface on a `[data-search]` dock around the byte-untouched morph-bridge metaball;
+   CONSUMES the W55 tint seam + the menu-row recipe, re-authors neither. */
+@import "./dock/search.css";
 
 /* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
    to the `.glass-dock` root; EVERY morph axis (box size, padding, radius, scale,

package/src/styles/glass/accent-tone.css

@@ -0,0 +1,66 @@
+/* glass/accent-tone.css
+   BC.W-ACCENT-TONE — the contrast-floored 3-channel tonal-accent register.
+
+   ONE `--tone` (a complete `<color>`, default `var(--primary)`) → a coherent,
+   contrast-SAFE four-channel tonal set:
+
+     --accent-fill  idle FILL  — faint but FLOORED (≥3:1 at rest, the load-bearing
+                                 new behavior fourier named: "not just hover/active").
+     --accent-band  active BAND — the bolder selected fill.
+     --accent-edge  active EDGE — the active rim hairline.
+     --accent-ink   label INK  — the contrast-SAFE label colour ON the band, written
+                                 by useAccentTone (the JS half) via value.js
+                                 safeAccentColor; the CSS fallback is the warm ink.
+
+   The mix space is `in oklab` (the perceptual glass-tint family, W55/W-NO-GRAY) —
+   NOT `in srgb` (the `--surface-tint-*` brand-overlay fence, AW.W26). This is the
+   CONTROL tonal-FILL register (the plate background + the contrast-safe ink), a
+   DISTINCT seam from the BB `--glass-accent` glass-RIM axis (decoration on a glass
+   plate) — the two COMPOSE on a chip that is both a glass surface and a tonal
+   control (the rim from `--glass-accent`, the fill from `--accent-tone`); they
+   never fork, never write each other's channels.
+
+   The strength MAGNITUDES are TOKENS a `:root`/scope override retunes (NOT props —
+   the no-over-prop fence, component-customizability §5): `--accent-fill-strength`
+   (idle, the ~6-8% fourier names) / `--accent-band-strength` (active) /
+   `--accent-edge-strength` (rim). The idle floor is the strength default — the
+   8% over the warm-cream `--card` clears ≥3:1; proof:accent-tone A4 measures the
+   resolved idle fill against the surface (a strength that drops it below 3:1 reds).
+
+   @import-ed by glass.css in cascade order IMMEDIATELY AFTER ladder.css (the same
+   @layer components; this is the SOLE writer of the `--accent-*` channels, read at
+   use-time on the chip elements, so the placement is cascade-order-invariant). */
+@layer components {
+    .accent-tone {
+        /* `--surface` is an OPTIONAL consumer-retarget hook (NOT a declared HEAD
+           token) — a consumer sets it on the scope to point the accent at a
+           non-`--card` surface; it defaults to the declared `--card` so the recipe
+           resolves at HEAD with zero consumer wiring. */
+        --accent-fill-strength: 8%;
+        --accent-band-strength: 18%;
+        --accent-edge-strength: 55%;
+
+        /* idle: faint but FLOORED — the resting tint stays ≥3:1 by the strength
+           floor + the perceptual `in oklab` mix (the glass-tint family). */
+        --accent-fill: color-mix(
+            in oklab,
+            var(--surface, var(--card)),
+            var(--tone, var(--primary)) var(--accent-fill-strength)
+        );
+        --accent-band: color-mix(
+            in oklab,
+            var(--surface, var(--card)),
+            var(--tone, var(--primary)) var(--accent-band-strength)
+        );
+        --accent-edge: color-mix(
+            in oklab,
+            transparent,
+            var(--tone, var(--primary)) var(--accent-edge-strength)
+        );
+        /* ink is the contrast-SAFE label colour ON the active band — written by
+           useAccentTone (the JS half) via safeAccentColor onto
+           `--accent-ink-resolved`; the CSS fallback is the warm ink (CSS cannot
+           call value.js at the token tier). */
+        --accent-ink: var(--accent-ink-resolved, var(--foreground));
+    }
+}