@mkbabb/glass-ui 4.0.0 → 4.1.0

package/dist/styles/dock/cta-seat.css

@@ -0,0 +1,87 @@
+/* dock/cta-seat.css — the `[data-cta-pending]` CTA-receive landing SEAT (BC.W-AX-DOCK-
+ * CTA-SEAT; the speedtest-AX BC-W2 + BC-W3 fold).
+ *
+ * THE MOVE. `useDockCtaReceive` (the BB.B2 morph half) flies an EXTERNAL CTA onto a
+ * dock control's rect; this partial makes the control it lands on a SEAT that was
+ * visibly RESERVED for it. While the CTA is in flight (or pending), the target dock
+ * control carries `data-cta-pending` (written by `setPending()` on the
+ * `useDockCtaReceive` return): the control shows a quiet dim GHOST (a placeholder
+ * awaiting its arrival) AND reserves its resting footprint from frame 0 so the dock
+ * box does NOT jump when the CTA lands. On `clearPending()` (the default hand-off
+ * fires it as the CTA lands) the attribute is removed and the seat REVEALS its real
+ * content with a plain `transition: opacity` FLIP.
+ *
+ * THE NO-BOX-JUMP (T2). The reserve is a STATIC `min-inline-size`/`min-block-size`
+ * keyed off `--dock-control-size`/`--dock-layer-height` (the control's resting box) —
+ * a ONE-TIME reservation set the instant `setPending()` fires, NEVER an animated
+ * dimension (the W-DESKTOP-RESERVE static-frame-0 precedent). The dock's shrink-wrap
+ * is already at the seated width, so the CTA lands into an already-sized hole; the box
+ * never grows on reveal. `proof:no-layout-animation` holds — no `transition: width`/
+ * animated min-* anywhere here.
+ *
+ * THE FLIP REVEAL (T3). The seat is a CONTENT swap on an already-sized box, NOT a box
+ * morph — so the reveal is a PLAIN `transition: opacity` on the `--ease-out`
+ * no-overshoot register (a content reveal must not overshoot — W-MOTION-CANON P2). It
+ * does NOT ride the dock collapse/expand morph-stagger (`--dock-expand-t`/the child
+ * stagger); re-using the morph clock would read as a janky stagger-restart on a
+ * content reveal.
+ *
+ * RECT-DRIVEN, LAYOUT-AGNOSTIC (Gate-1 Q5). The seat targets `[data-cta-pending]` on
+ * ANY dock control — it makes NO assumption about a skip-arrow affordance (a
+ * consumer-side functional skip control that may or may not be present). The reserve
+ * is the control's own resting footprint; the seat works with or without arrows.
+ *
+ * COMPOSITOR-ONLY. `setPending`/`clearPending` toggle the data attribute; this partial
+ * paints with `opacity` + the static reserve. No layout property is animated. The
+ * `--cta-seat-*` knobs are the consumer retune seam.
+ *
+ * @import-ed by dock.css in the dock partial cascade, in the SAME `@layer components`. */
+
+@layer components {
+    /* The armed seat — the control is RESERVED. The static min-*-size locks the resting
+       footprint from frame 0 (the no-box-jump); the dim opacity is the placeholder
+       ghost awaiting the CTA's arrival. The `transition: opacity` is declared HERE (not
+       only on the cleared state) so the GHOST→content reveal is a smooth fade in BOTH
+       directions on the SAME compositor-safe register — the box is already sized, only
+       the opacity moves. */
+    [data-cta-pending] {
+        /* The STATIC resting-geometry reserve (T2) — a one-time min-*-size off the
+           control's own resting box. NEVER transitioned (an animated dimension
+           CLS-storms — the proof:no-layout-animation floor). */
+        min-inline-size: var(--dock-control-size, var(--size-icon-btn));
+        min-block-size: var(
+            --dock-layer-height,
+            var(--dock-control-size, var(--size-icon-btn))
+        );
+
+        /* The dim GHOST placeholder — the control awaits its arrival (T3). */
+        opacity: var(--cta-seat-ghost-opacity, 0.35);
+
+        /* The FLIP reveal register — a PLAIN opacity transition on --ease-out
+           (no-overshoot). Default duration tracks the snappy spring envelope so the
+           reveal reads as the same family as the morph that lands the CTA. */
+        transition: opacity
+            var(--cta-seat-reveal-duration, var(--spring-snappy-duration))
+            var(--ease-out);
+    }
+
+    /* The seated CONTENT also dims while pending — the icon/label is the thing that
+       fades back in on reveal. Direct-child targeting keeps the seat layout-agnostic
+       (it does not name a control class — Q5). */
+    [data-cta-pending] > * {
+        opacity: var(--cta-seat-ghost-opacity, 0.35);
+        transition: opacity
+            var(--cta-seat-reveal-duration, var(--spring-snappy-duration))
+            var(--ease-out);
+    }
+
+    /* PRM — the reveal is an INSTANT opacity swap (the vestibular floor; the seat snaps
+       to its content, zero transition frames). The reserve is unchanged (it is static,
+       not a motion). The gesture completes; the animation is off. */
+    @media (prefers-reduced-motion: reduce) {
+        [data-cta-pending],
+        [data-cta-pending] > * {
+            transition: none;
+        }
+    }
+}

package/dist/styles/dock/density.css

@@ -11,6 +11,89 @@
  * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
  * carve is isomorphic (same layer, same source order → ZERO visual delta). */
 
+/* ── BB.W-HIERARCHY2 — the CONTENT-side anti-collision gutter ───────────────────
+   `--dock-content-safe-inset` is the structural CONTENT-side counterpart to the
+   dock-collision SEAT fix (W-CHIP-GRAZE + W-DOCK-RAIL-SEAT-FINAL own the chip-fan
+   SEAT — the chips fan off-canvas into the rail's dead gutter, chipOverMain:false on
+   EVERY route by topology). This token reserves a guaranteed safe-inset gutter on the
+   CONTENT column so the page-title band is structurally clear of any chip reach even
+   on a route added WITHOUT a per-route audit (the anti-gameability the gestalt gate
+   wants). It is keyed to the dock reach (`--dock-rail-extend-length`, the rail's
+   beyond-edge overrun) so the content gutter tracks the dock geometry in lockstep,
+   and it rides `--dock-scale` transitively through that reach token.
+
+   THE DE-OVERLOAD IS BINDING (distinct geometry concerns, distinct tokens):
+   `--dock-control-safe-inset` (per-density, below) is the dock CONTROL plate-clearance
+   inset (the painted plate floors a notch below its track cell — BA.W-DOCK-GEOMETRY,
+   owned by proof:dock-plate-clearance); `--dock-content-safe-inset` is the CONTENT-band
+   gutter (the content column reserves dead inline space the chips can never share).
+   The two close the collision from BOTH sides — the chip seat (the SEAT waves) AND the
+   content gutter (this token) — coordinated on the SAME dead inline gutter: the content
+   gutter is the RESERVE, the gutter-fan lands the chips in it (ONE gutter, two
+   consumers). NEVER re-point this AT --dock-control-safe-inset (the de-overload). */
+:root {
+    --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem);
+
+    /* ── BC.W-DOCK-ARBITRARY — the arbitrary-shape morph tokens ─────────────────
+       The dock morph is no longer locked to circle↔pill. The shape is now a SCALAR
+       PARAMETER: a `--dock-shape-from`/`--dock-shape-to` corner-radius pair the chrome
+       radius arm interpolates on `--dock-morph-t`, an OPT-IN `--dock-shape-clip-from`/
+       `--dock-shape-clip-to` clip-path silhouette pair (compositor-only, no layout),
+       and a `--dock-morph-max-stretch` squish cap. The library DEFAULTS preserve the
+       collapsed-perfect-circle ↔ expanded-pill identity (CLAUDE.md `aspect-ratio: 1` +
+       `--radius-dock` 9999px), so the common case needs no consumer override; a consumer
+       sets these to morph to an arbitrary silhouette (a wide bar, a teardrop, a tall
+       rail). Clean break (MEMORY: no backwards compat) — the prior hardcoded circle/pill
+       endpoints become these token DEFAULTS, no `--dock-radius-legacy`. */
+
+    /* The corner profile span — the `from`-radius (the collapsed perfect circle, a
+       9999px pill that rounds the height-pinned square into a circle) ↔ the `to`-radius
+       (the expanded pill, `--radius-dock`). Consumer-targetable: set either to any
+       radius to morph to an arbitrary corner profile. */
+    --dock-shape-from: var(--radius-dock, 9999px);
+    --dock-shape-to: var(--radius-dock, 9999px);
+
+    /* The arbitrary-silhouette span — an OPT-IN `clip-path` pair (a compositor property,
+       NO layout). DEFAULT-OFF: `none`/`none` means the rectangle/pill morph (the common
+       case) needs no clip. A consumer opts into a teardrop/blob silhouette by setting the
+       clip-from/to to two `inset()`/`path()`/`shape()` values the morph LERPS between on
+       `--dock-morph-t`. */
+    --dock-shape-clip-from: none;
+    --dock-shape-clip-to: none;
+
+    /* The squish cap — the LOW volume-preserving `--stretch` ceiling for the shape-morph
+       deformation, mirroring the tab-indicator's iOS-segmented register (the
+       `DEFAULT_INDICATOR_MAX_STRETCH` 1.08). A fast morph swells the plate then caps —
+       a lively settle, never a taffy-pull. */
+    --dock-morph-max-stretch: 1.08;
+
+    /* ── BC.W-LIQUID-MORPH — the reserve floor (the white morph can never paint) ──
+       The morph box reserves `inline-size`/`block-size: max(var(--dock-morph-to),
+       var(--dock-morph-min))` (layers.css). A degenerate `to:0` measurement (the
+       BA-VJS-1 nested-group race, glass-dock-codebase.md §2.2) would otherwise reserve
+       a ZERO-width footprint → `overflow: clip` blanks the content → the white/invisible
+       morph the user reports. The floor seats it at the collapsed-pill minimum (~44px,
+       the WCAG touch floor / `--dock-control-floor`), so a missed measurement degrades to
+       "visible at the floor," never "white." A SAFETY NET: on every healthy measurement
+       the `max()` resolves to the real `to` (inert above the floor); it fires ONLY on the
+       degenerate race. Density-scaled, riding `--dock-scale` transitively. */
+    --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px));
+
+    /* ── BC.W-DOCK-SEARCH — the collapse-on-scroll trigger-points ─────────────────
+       The dock-search optional shrink-on-scroll (composing useScrollChrome — the
+       native dual-path reader, persistent-default) reads these two tunable px
+       trigger-points: the shrink BEGINS at `--dock-search-shrink-start` of scroll and
+       reaches the compact form at `--dock-search-shrink-end` (the words
+       `scrollInflectionPoint` generalized into dock-scoped tokens). They ride
+       `--dock-scale` transitively (a coarse-pointer dock's trigger-points scale with
+       its geometry), and a consumer retunes the inflection in ONE write. NOTE the
+       PERSISTENT default — these are inert unless the consumer opts in via
+       `collapseOnScroll`; the morph itself NEVER fires on a passive scroll (the
+       iOS-27 lesson — the scroll path is the distinct compositor shrink). */
+    --dock-search-shrink-start: calc(0rem * var(--dock-scale));
+    --dock-search-shrink-end: calc(7.25rem * var(--dock-scale));
+}
+
 @layer components {
     /* AX.W45 — the density cascade is threaded by the ONE `--dock-scale`
        multiplier (default 1, lifted to `--dock-mobile-scale` on coarse pointers).
@@ -222,6 +305,121 @@
         );
     }
 
+    /* ── BC.W-AX-DOCK-COCKPIT — the `cockpit` geometry PRESET ─────────────────────
+       The tight instrument-cockpit register: a FIXED `2.75rem` control floor (the
+       Gate-1 Q6 fixed value — NOT a range) with COMPACT-tight chrome (the tightest
+       padding/gap/tile-pad, distinct from `spacious`'s LOOSE chrome at the SAME
+       2.75rem control). It closes the dock-oversize chronic (speedtest A-9): a
+       consumer opts into a dense, proportioned instrument strip — `2.75rem` control,
+       compact chrome, the label tracking the control by `--dock-label-ratio` (so the
+       label never reads OVERSIZE on the tight pill).
+
+       It is a NAMED preset, NOT a 5th density rung — the density axis stays FOUR rungs
+       (`proof:dock-unify`'s density census is unaffected). The preset is a geometry
+       OVERRIDE composing WITH a `data-density` base: `[data-preset="cockpit"]` wins the
+       control-size/layer-height/chrome by source-order (this block comes AFTER the rungs),
+       so a `<GlassDock data-density="comfortable" data-preset="cockpit">` resolves the
+       cockpit geometry. An ancestor `[data-preset="cockpit"]` scope re-declares these
+       tokens too (the substitution-vs-inheritance discipline) so descendant docks inherit.
+
+       The control floor rides the SAME `* var(--dock-scale)` thread + the `max(…,
+       --dock-control-floor)` WCAG 2.5.5 clamp as the rungs — the cockpit is tight, but
+       the coarse-pointer touch target NEVER drops below the 44px floor. */
+    .glass-dock[data-preset="cockpit"] {
+        /* The FIXED 2.75rem control floor (Q6) — the cockpit register, riding
+           `--dock-scale` + the 44px clamp. NOT a `clamp(2.5rem, …, 3rem)` range. */
+        --dock-control-size: max(
+            calc(2.75rem * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-height: max(
+            calc(2.75rem * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        /* The TIGHT chrome — the COMPACT-rung tightness (the cockpit is a dense
+           instrument strip, NOT the spacious loosening). This is the distinction
+           from `spacious` (same control, LOOSE chrome). */
+        --dock-padding-block: calc(
+            var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale)
+        );
+        --dock-padding-inline: calc(
+            var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale)
+        );
+        --dock-layer-gap: calc(
+            var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
+        );
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset, in lockstep with
+           the rungs (the 10%-per-side painted-plate inset). */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
+        --dock-tile-min: calc(
+            var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale)
+        );
+        --dock-trigger-padding-block: calc(
+            var(--dock-density-compact-trigger-padding-block, 0.1875rem) *
+                var(--dock-scale)
+        );
+        --dock-trigger-padding-inline: calc(
+            var(--dock-density-compact-trigger-padding-inline, 0.4375rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-block: calc(
+            var(--dock-density-compact-tab-padding-block, 0.3125rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-inline: calc(
+            var(--dock-density-compact-tab-padding-inline, 0.625rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-h: calc(32px * var(--dock-scale));
+        /* The cockpit-tight label ratio — the label reads EVEN tighter relative to
+           its control than the `:root` default (the A-9 close). The `dock-label`
+           font-size is `calc(--dock-control-size * --dock-label-ratio)`; the cockpit
+           tunes the ratio DOWN so a 2.75rem cockpit control carries a label sized for
+           the dense strip, not the comfortable-default proportion. */
+        --dock-label-ratio: 0.42;
+        /* RE-RESOLVE the density-painted glyph tokens against the cockpit
+           `--dock-layer-height` (the same substitution-vs-inheritance trap the
+           `.glass-dock[data-density]` re-resolve below fixes — a `[data-preset]`
+           scope paints its OWN `--dock-layer-height`, so the `:root`-derived glyph
+           would freeze at the fallback). Identical formula to the density re-resolve;
+           only the resolution element moves so the cockpit height flows into the glyph. */
+        --dock-icon-glyph: max(
+            calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)),
+            var(--dock-icon-glyph-floor)
+        );
+        --dock-control-glyph-size: var(--dock-icon-glyph);
+    }
+
+    /* BB.W-PERF-PRODUCER A′-6 — RE-RESOLVE the glyph token inside the density-painted
+       scope. `--dock-icon-glyph` (offsets-sizing.css) is a RATIO of
+       `--dock-layer-height`, but density.css paints `--dock-layer-height` ONLY on
+       `.glass-dock[data-density]` — the `:root` `--dock-icon-glyph` definition reads
+       `--dock-layer-height` at `:root` (the inline fallback ladder), so it would
+       FREEZE at the fallback rather than track the per-rung painted height (the SAME
+       substitution-vs-inheritance trap the R5-1 sweep fixed for
+       `--dock-collapsed-summary-min-size` in overflow.css). Re-resolving it HERE, on
+       the element that paints `--dock-layer-height`, lets the per-density height flow
+       into the glyph so a `spacious` dock's glyph grows in lockstep with the shelf
+       (the value.js D5-1 defect). The formula is IDENTICAL to the `:root` definition;
+       only the resolution element moves. The WCAG floor + the `--dock-icon-glyph-ratio`
+       knob ride through unchanged; the `.dark-mode-toggle-button > svg` mirror reads
+       the same re-resolved token so both glyphs track the density axis. */
+    .glass-dock[data-density] {
+        --dock-icon-glyph: max(
+            calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
+            var(--dock-icon-glyph-floor)
+        );
+        /* BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — RE-RESOLVE the in-dock
+           control-glyph knob against the density-painted `--dock-icon-glyph` (the
+           same substitution-vs-inheritance trap as the glyph above: a `:root`-only
+           `--dock-control-glyph-size` would freeze at the `:root` glyph while
+           `--dock-icon-glyph` lifts per density). Re-declaring it HERE keeps the
+           docked dark-toggle glyph + its inset pad on the density axis with the nav
+           glyphs. Identical to the `:root` default; only the resolution element
+           moves so the density-painted glyph flows in. */
+        --dock-control-glyph-size: var(--dock-icon-glyph);
+    }
+
     /* Density-audacious narrow-box carve (AV.W16 TW3) — when the dock's OWN
        box is narrow the audacious-dock label glyphs compress so the chrome
        doesn't overflow its host (≤14px below 30rem, 15px 30–45rem). Keyed off

package/dist/styles/dock/layers.css

@@ -3,7 +3,9 @@
  *
  * Carved from the dock.css god-module (slice 25). This partial owns the dock's
  * layer model: the `.dock-layers` grid container + the FLIP-driven box-size morph
- * (the `--dock-morph-size` calc off the ONE `--dock-morph-t` scalar), the unified
+ * (BB.W-DOCK-MORPH-FAMILY — a `transform: scale()` over a reserved settled `to`
+ * footprint, the live `--dock-morph-scale` derived off the ONE `--dock-morph-t`
+ * scalar; NO per-frame layout-axis lerp), the unified
  * `.is-active` / `.is-leaving` 3-state crossfade + hit-test contract (the
  * a11y-006 anchor), the per-child reveal stagger (the `--dock-stagger-*` ramp),
  * and the `layout="grid"` 2D tile-grid arrangement. The `.dock-layer-group` /
@@ -37,46 +39,114 @@
     }
 
 
-    /* AX.W01 — the box size morph reads the SAME `--dock-morph-t` scalar as the
-       root chrome (ONE clock, co-temporal by construction). `useLayerTransition`
-       measures the from→to size ONCE per swap (the allowed one-time FLIP
-       measurement) and writes `--dock-morph-from`/`--dock-morph-to` px on the
-       morphing element; the live scalar interpolates between them. The size lands
-       on the morph AXIS — `inline-size` for a horizontal `.dock-layers` (always
-       inline) + a horizontal inner stack, `block-size` for a vertical inner stack.
-       Gated on the root `[data-morphing]`, so at REST the intrinsic / `width:100%`
-       rules below hold (the morph vars are cleared on settle). Replaces the prior
-       `transition: width var(--dock-motion-resize)` inline-FLIP — there is NO CSS
-       transition on the size axis; the spring writes the scalar, CSS reads it. The
-       active pane is REVEALED through the clip aperture as the box grows (the W2
-       clip-reveal contract). */
+    /* BB.W-DOCK-MORPH-FAMILY (a)/(b) — the box morph is now a COMPOSITOR TRANSFORM
+       over a RESERVED SETTLED footprint, NOT a per-frame `inline-size` lerp (the C3
+       "too slow and laggy" relayout-every-frame defect). `useLayerTransition` /
+       the orchestrator still measure the from→to size ONCE per swap (the allowed
+       one-time FLIP measurement) and write `--dock-morph-from`/`--dock-morph-to` px
+       on the morphing element — but the layout axis is set to the SETTLED `to`
+       value (ONE layout solve, the box reserves its end footprint from frame 0), and
+       the live `--dock-morph-t` scalar drives a `transform: scale()` between the
+       from/to RATIO and 1. The content lays out COMPLETE at `to` behind the
+       `overflow: clip` aperture (shell.css), and the scaled-down box reads as the
+       smaller in-flight footprint (the clip uncovers the scaled box, never a
+       half-painted growing layout — the reveal-seat (b) fix). `--dock-morph-ratio`
+       is `from/to` (guarded: `to:0` → ratio 0); `--dock-morph-scale` runs
+       `ratio → 1` as `t: 0 → 1`. `transform-origin` anchors the pinned edge
+       (inline-start for the horizontal aperture) so the box grows from the correct
+       side. NO `inline-size`/`block-size` reads the live scalar — the CDP Layout
+       track stays FLAT through the morph (the F1 compositor-bound floor). */
     .glass-dock[data-morphing] .dock-layers,
     .glass-dock[data-morphing] .dock-layer-stack {
-        --dock-morph-size: calc(
-            var(--dock-morph-from, 0px) +
-                (var(--dock-morph-to, 0px) - var(--dock-morph-from, 0px)) *
+        --dock-morph-ratio: calc(
+            var(--dock-morph-from, 0px) / max(var(--dock-morph-to, 1px), 1px)
+        );
+        /* BC.W-LIQUID-MORPH — the SCALE FLOOR (the white morph can never paint). A
+           degenerate `from:0`/`to:0` measurement (the BA-VJS-1 nested-group race)
+           drives `--dock-morph-ratio` to 0 → `scaleX(0)` at t=0 → the zero-width void
+           `overflow: clip` blanks (the white/invisible morph, glass-dock-codebase.md
+           §2.2 fix (2)). Flooring the scale at ~6% bottoms a degenerate ratio at a
+           thin-but-VISIBLE glass sliver (clipped, but never white), recovered by the
+           next correct measurement one frame later. A SAFETY NET: a real measurement is
+           always well above 6%, so the `max()` is inert on the healthy path (the
+           gestalt of a healthy morph is byte-unchanged). */
+        --dock-morph-scale: max(
+            calc(
+                var(--dock-morph-ratio) +
+                    (1 - var(--dock-morph-ratio)) * var(--dock-morph-t, 0)
+            ),
+            0.06
+        );
+        /* The box RESERVES its settled `to` footprint — a single layout solve, NOT
+           the live scalar calc. The transform composites over it.
+           BC.W-LIQUID-MORPH — the RESERVE FLOOR: `max(var(--dock-morph-to),
+           var(--dock-morph-min))` so a `to:0` measurement reserves the collapsed-pill
+           minimum (~44px), never a zero-width box (the white morph root). Inert above
+           the floor on every healthy measurement. */
+        inline-size: max(var(--dock-morph-to), var(--dock-morph-min, 2.75rem));
+        transform: scaleX(var(--dock-morph-scale));
+        transform-origin: left center;
+        will-change: transform;
+    }
+
+    /* BC.W-DOCK-ROOT-MORPH — the ROOT box rides the scalar (THE snap fix). The inner
+       `.dock-layers` above reserves its settled `to` + morphs via `scaleX()` (paint-
+       only), so the root `.glass-dock` (inline-flex) shrink-wraps to that reserved full
+       `to` and SNAPS on frame 0 while the inner scales smoothly — yet the gate + the
+       page reflow both read the ROOT box. The orchestrator (dockMorphContext.ts)
+       measures + writes the root's own `--dock-root-morph-{from,to}` px span; this
+       drives the morph-axis size as a `calc()` of the SAME `--dock-morph-t` scalar the
+       spring glides — NOT a `transition: width` (proof:no-layout-animation stays GREEN;
+       a `calc()` over the scalar is not a transition). The span is armed inline ONLY by
+       the outer collapse↔expand swap; a nested-only pane-swap leaves it unset → the
+       fallback-less `var()` invalidates the rule → the box returns to its at-rest
+       shrink-wrap (the inert path). Horizontal morphs `inline-size`, vertical morphs
+       `block-size` (matching the orchestrator's `morphAxisProp` axis pick). */
+    .glass-dock[data-morphing]:not(.vertical) {
+        inline-size: calc(
+            var(--dock-root-morph-from) +
+                (var(--dock-root-morph-to) - var(--dock-root-morph-from)) *
+                var(--dock-morph-t, 0)
+        );
+    }
+    .glass-dock[data-morphing].vertical {
+        block-size: calc(
+            var(--dock-root-morph-from) +
+                (var(--dock-root-morph-to) - var(--dock-root-morph-from)) *
                 var(--dock-morph-t, 0)
         );
-        inline-size: var(--dock-morph-size);
     }
 
     /* AZ.W-DOCK-TAXONOMY (move 2) — a VERTICAL dock's outer `.dock-layers` morphs the
        BLOCK axis (its collapse↔expand shrinks `height`, not `width`). The orchestrator
        measures/writes the same `--dock-morph-from/to` span on the block axis
        (`outerLayerAxis` is now the resolved orientation; `morphAxisProp` maps
-       vertical→`block-size`), so the CSS lands the scalar on `block-size` and lets the
-       inline axis stay intrinsic. This is the wiring that gives a collapsible vertical
-       dock the height-morph the mandate names. */
+       vertical→`block-size`).
+       BB.W-DOCK-MORPH-FAMILY (a)/(b) — the vertical box reserves its settled `to`
+       BLOCK footprint + composites a `scaleY()` over it on the SAME `--dock-morph-t`
+       scalar (the inverse axis of the horizontal `scaleX`), `transform-origin` at the
+       block-start pinned edge. NO live-scalar `block-size` calc → no per-frame
+       relayout on the vertical axis either. */
     .glass-dock.vertical[data-morphing] .dock-layers {
         inline-size: auto;
-        block-size: var(--dock-morph-size);
+        /* BC.W-LIQUID-MORPH — the vertical RESERVE FLOOR (the inverse axis twin of the
+           horizontal floor above): a `to:0` block measurement reserves the collapsed-pill
+           minimum, never a zero-height void. Inert above the floor on every healthy read. */
+        block-size: max(var(--dock-morph-to), var(--dock-morph-min, 2.75rem));
+        transform: scaleY(var(--dock-morph-scale));
+        transform-origin: center top;
+        will-change: transform;
     }
 
-    /* A vertical inner group morphs the BLOCK axis — the same span lands on
-       block-size, and the inline axis stays intrinsic. */
+    /* A vertical inner group morphs the BLOCK axis — the same settled-footprint
+       reserve + `scaleY()` composite over it. */
     .glass-dock[data-morphing] .dock-layer-group.vertical .dock-layer-stack {
         inline-size: auto;
-        block-size: var(--dock-morph-size);
+        /* BC.W-LIQUID-MORPH — the nested vertical group's reserve is floored too. */
+        block-size: max(var(--dock-morph-to), var(--dock-morph-min, 2.75rem));
+        transform: scaleY(var(--dock-morph-scale));
+        transform-origin: center top;
+        will-change: transform;
     }
 
     /* The inner DockLayerGroup stack has no collapsed/expanded class, so its
@@ -311,10 +381,12 @@
        from these state rules; they keep only their non-overflow concerns.
 
        AX.W01 — `:not([data-morphing])` gate: at REST expanded the layers fill the
-       box (`width:100%`), but DURING the morph the FLIP from→to px (the
-       `--dock-morph-size` calc above) is the SOLE size authority — a `width:100%`
-       here would win on specificity and snap the box past the spring. The gate
-       hands the size to the scalar for the morph and back to 100% on settle. */
+       box (`width:100%`), but DURING the morph the reserved `to`-footprint +
+       `transform: scale()` (BB.W-DOCK-MORPH-FAMILY, above) is the SOLE size
+       authority — a `width:100%` here would win on specificity and fight the
+       reserved footprint. The gate hands the box to the transform for the morph and
+       back to 100% on settle (the transform/reserve vanish when `[data-morphing]`
+       clears). */
     .glass-dock.expanded:not(.fit-content):not([data-morphing]) .dock-layers {
         width: 100%;
     }

package/dist/styles/dock/morph-bridge.css

@@ -76,36 +76,72 @@
             color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
         );
         border-radius: 999px;
-        /* The volume-preserving teardrop squish — stretch along the travel axis,
-           compress reciprocally. Reads `--stretch` (the liquid-flex derivative). The
-           vertical plate squishes on Y, the horizontal on X (set per-plate below). */
-        will-change: width, height, transform;
+        /* BC.W-GLASS-GLOW-FIX (Atlas A-8 root, CANDIDATE 4) — BOUND the 120%×120% radial
+           to the plate box. The gradient SIZE (120%) reaches past the plate's content box
+           so the domed droplet would over-paint were the silhouette ever un-clipped;
+           `overflow: clip` keeps the radial fill inside the teardrop silhouette (the
+           `border-radius: 999px` capsule), so the oversized radial can NEVER paint a giant
+           cream blob past the plate. The domed-droplet read is PRESERVED — the radial still
+           fills the plate; only the past-bounds escape is killed. Defensive, structural,
+           zero visual change (the border-radius already clips the fill — this makes the
+           bound explicit so the leak-class gate holds). */
+        overflow: clip;
+        /* BC.W-LIQUID-MORPH — the teardrop silhouette is the COMPOSITOR `clip-path`
+           inset (NOT a per-frame `width`/`height` — the layout-jank root, glass-dock-
+           codebase.md §2.2 fix (3)). Each plate RESERVES its MAX footprint (a single
+           layout solve, the settled box) and the silhouette necks via a `clip-path:
+           inset()` interpolated on `--dock-morph-t`. The volume-preserving squish reads
+           `--stretch` (the liquid-flex derivative) on `scale`. NO `width`/`height`
+           animation — only `clip-path`/`scale`/`opacity` (compositor/paint), so the
+           CDP Layout track stays FLAT across the morph (proof:no-layout-animation +
+           proof:liquid-morph M4). will-change promotes the compositor channels ONLY. */
+        will-change: clip-path, transform, opacity;
     }
 
-    /* The VERTICAL plate — a tall capsule (the t=0 silhouette). It collapses its height
-       toward the center as t: 0 → 0.5, where it has merged into the teardrop. Width is
-       the dock's inline footprint; height interpolates full → a thin neck. */
+    /* The VERTICAL plate — a tall capsule (the t=0 silhouette). It RESERVES its full
+       tall footprint (a one-time layout solve, NOT a per-frame height lerp) and necks
+       its silhouette toward the center via a `clip-path: inset()` whose block insets
+       GROW as t: 0 → 0.5 (the tall capsule collapses to a thin neck at the midpoint
+       where the goo merges, gone by t=1). `--dock-bridge-v-neck` is the inset travel:
+       0 at t=0 (full height shows) → ~half the reserved height by t=0.5 (necked to a
+       circle ~the width). The box footprint is static; the clip carves the silhouette
+       on the compositor. */
     .dock-morph-bridge-plate--vertical {
         width: var(--dock-bridge-v-w, 3.25rem);
-        /* full height at t=0, necking to ~the width (a circle) by t=0.5, gone by t=1 */
-        height: calc(
-            var(--dock-bridge-v-h, 16rem) *
-                (1 - clamp(0, var(--dock-morph-t, 0), 1)) +
-                var(--dock-bridge-v-w, 3.25rem) * clamp(0, var(--dock-morph-t, 0), 1)
+        height: var(--dock-bridge-v-h, 16rem);
+        /* the block-axis inset travel: 0 → (half the reserved height − half the width)
+           so the necked silhouette is ~a circle (the width) at t=0.5. */
+        --dock-bridge-v-neck: calc(
+            (var(--dock-bridge-v-h, 16rem) - var(--dock-bridge-v-w, 3.25rem)) / 2 *
+                clamp(0, calc(var(--dock-morph-t, 0) * 2), 1)
+        );
+        clip-path: inset(
+            var(--dock-bridge-v-neck) 0 var(--dock-bridge-v-neck) 0 round 999px
         );
         opacity: calc(1 - clamp(0, calc((var(--dock-morph-t, 0) - 0.5) * 2), 1));
         /* squish Y on travel (the tall plate stretches along its collapse axis) */
         scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
     }
 
-    /* The HORIZONTAL plate — a wide capsule (the t=1 silhouette). It grows its width
-       from the center as t: 0.5 → 1. Height is the dock's block footprint; width
-       interpolates a thin neck → full. */
+    /* The HORIZONTAL plate — a wide capsule (the t=1 silhouette). It RESERVES its full
+       wide footprint (a one-time layout solve) and grows its silhouette from the center
+       via a `clip-path: inset()` whose inline insets SHRINK as t: 0.5 → 1 (a thin neck
+       at the midpoint → the full wide bar at t=1). `--dock-bridge-h-neck` is the inset
+       travel: ~half the reserved width − half the height at t=0.5 (necked to a circle)
+       → 0 at t=1 (full width shows). NO per-frame width — the clip carves the silhouette
+       on the compositor. */
     .dock-morph-bridge-plate--horizontal {
+        width: var(--dock-bridge-h-w, 18rem);
         height: var(--dock-bridge-h-h, 3.25rem);
-        width: calc(
-            var(--dock-bridge-h-h, 3.25rem) * (1 - clamp(0, var(--dock-morph-t, 0), 1)) +
-                var(--dock-bridge-h-w, 18rem) * clamp(0, var(--dock-morph-t, 0), 1)
+        /* the inline-axis inset travel: (half the reserved width − half the height) at
+           t=0.5 → 0 at t=1, so the necked silhouette is ~a circle (the height) at the
+           midpoint and the full bar at t=1. */
+        --dock-bridge-h-neck: calc(
+            (var(--dock-bridge-h-w, 18rem) - var(--dock-bridge-h-h, 3.25rem)) / 2 *
+                (1 - clamp(0, calc((var(--dock-morph-t, 0) - 0.5) * 2), 1))
+        );
+        clip-path: inset(
+            0 var(--dock-bridge-h-neck) 0 var(--dock-bridge-h-neck) round 999px
         );
         opacity: clamp(0, calc(var(--dock-morph-t, 0) * 2), 1);
         /* squish X on travel (the wide plate stretches along its growth axis) */