@mkbabb/glass-ui 4.1.0 → 5.0.0

package/src/styles/dock/layer-group.css

@@ -99,7 +99,13 @@
        edge: a thin rule between the switcher column and the dock body. The
        hover/active affordance reads the `--dock-layer-rail-{hover,active}` glass
        tints, so the whole rail ladder is tunable from §sizing. */
-    .dock-layer-rail {
+    /* BG.W-DOCK-CONSUMER-FENCE — the switcher-rail + stack + pane internal parts carry
+       the dock-root ANCESTRY anchor (`:where(.glass-dock, .dock-layer-group)`, specificity
+       0,0,0) so a consumer element with a coincidental `.dock-layer-*` class OUTSIDE a dock
+       is never painted/repositioned. Every internal part here lives under `.dock-layer-group`
+       (a standalone `<DockLayerGroup>` too) — byte-identical match, same cascade/source order.
+       The `.dock-layer-group`-keyed rules ABOVE stay bare (the component-root identity). */
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail {
         display: flex;
         flex-direction: column;
         flex-shrink: 0;
@@ -149,11 +155,11 @@
        `.dock-layer-tab-indicator` (the reka TabsIndicator) now carries the
        active affordance; the rail is `position: relative` so the indicator's
        absolute placement is rail-local. */
-    .dock-layer-rail {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail {
         position: relative;
     }
 
-    .dock-layer-rail .dock-layer-tab {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab {
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -194,13 +200,13 @@
        `width`/`flex-shrink`, the un-floored SVG collapsed to a 4px sliver
        (F2-R3-1). This rule floors BOTH axes to 1rem (16px) and pins
        `flex-shrink: 0` so the glyph never re-squishes inside the flex tab. */
-    .dock-layer-rail .dock-layer-tab svg {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab svg {
         width: 1rem;
         height: 1rem;
         flex-shrink: 0;
     }
 
-    .dock-layer-rail .dock-layer-tab:hover {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab:hover {
         background: var(
             --dock-layer-rail-hover,
             color-mix(in srgb, var(--accent) 30%, transparent)
@@ -215,7 +221,7 @@
        nav-glyph contrast canon), deferring the exact accent to W-REGISTER-IOS's
        root via `--dock-rail-active-accent` (defaults to the dock foreground, NOT
        a saturated brand `--primary`). */
-    .dock-layer-rail .dock-layer-tab[data-state="active"] {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab[aria-selected="true"] {
         color: var(--dock-rail-active-accent, var(--dock-fg-on-aurora, var(--foreground)));
     }
 
@@ -223,48 +229,39 @@
        `.dock-layer-tab` (the rail tab is not in the `.dock-icon-button` family).
        The roving tabindex means only the active tab is in the tab order; a
        focus-visible tab paints the shared dock ring. */
-    .dock-layer-rail [role="tab"]:focus-visible {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail [role="tab"]:focus-visible {
         box-shadow: var(--focus-ring-shadow);
         outline: none;
     }
 
-    /* AX.W45 DK8 — the travelling indicator is now AXIS-AWARE. reka computes
-       `--reka-tabs-indicator-position`/`-size` for the axis the `<Tabs orientation>`
-       names; DockLayerGroup threads the group axis into it (`orientation="vertical"`
-       for the DEFAULT column rail, `"horizontal"` for the `.vertical` group's row
-       rail). The DEFAULT (horizontal-group) rail is a COLUMN of stacked tabs, so the
-       indicator travels the BLOCK (Y) axis — the prior `translateX` + `top:0` pinned
-       it at the top tab and it NEVER reached the active tab below (the mis-alignment
-       the user screenshotted). The default rule below travels Y; the `.vertical`
-       group's ROW rail overrides back to X. The active-tab plate reads the tunable
+    /* BI.W-DOCK-FOLD — the travelling indicator is AXIS-AWARE and driven by the ONE
+       traveling-indicator writer (`useSelectionIndicator`, via `useSelectionGroup`),
+       NOT the retired reka `--reka-tabs-indicator-*` path. The writer emits the
+       travel-axis size + a center-anchored `transform` + `opacity` as an INLINE style
+       on this element (Chrome ≡ Safari by construction — one code path, no anchor
+       branch). The DEFAULT (horizontal-group) rail is a COLUMN of stacked tabs, so the
+       indicator travels the BLOCK (Y) axis: the base rule fixes the CROSS-axis size
+       (width) + the resting look; the inline writer fills height + translateY. The
+       `.vertical` group's ROW rail overrides the cross axis (height) and the writer
+       fills width + translateX. The active-tab plate reads the tunable
        `--dock-layer-rail-active` rung.
 
-       AY.W-DOCK2 (D5 one-clock) — the rail indicator travel moves OFF the fixed-
-       linear `--dock-motion-resize` SECOND clock (DK7 killed exactly this pattern
-       for the leaving-pane opacity but left it alive on the rail; H-dock §D7 L2) onto
-       the `--spring-snappy` register. DECISION: a rail tab switch is a DISCRETE
-       selection (the user picks a pane), NOT the box collapse↔expand morph — so it
-       does NOT fold onto `--dock-morph-t` (the morph scalar). It uses the iOS
-       segmented-control register (`--spring-snappy`, the SAME curve `SegmentedTabs`'
-       indicator rides — the confirmed discrete-selection register), so the rail
-       indicator glides between tabs on the house spring, never a fixed-linear timer.
-       The binding outcome: NO `--dock-motion-resize` survives on the rail (recorded
-       in W-DOCK2-DELTA.md). */
-    .dock-layer-rail .dock-layer-tab-indicator {
+       AY.W-DOCK2 (D5 one-clock) — a rail tab switch is a DISCRETE selection (the user
+       picks a pane), NOT the box collapse↔expand morph, so the indicator glides on the
+       `--spring-snappy` register (the SAME curve `SegmentedTabs`' indicator rides),
+       never a fixed-linear `--dock-motion-resize` timer. */
+    :where(.glass-dock, .dock-layer-group) .dock-layer-rail .dock-layer-tab-indicator {
         position: absolute;
         left: 0;
         top: 0;
         width: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
-        height: var(--reka-tabs-indicator-size);
-        transform: translateY(var(--reka-tabs-indicator-position));
+        opacity: 0;
         border-radius: var(--dock-layer-tab-radius, var(--radius-sm));
         /* AZ.W-DOCK-RAIL — the travelling indicator paints the glass-register
            `--dock-layer-rail-active` (defaults to `--glass-bg-floating`, the
            "selected reads as glass" register). The inline fallback is the SAME
-           glass tier — NOT the saturated `--primary 15%` warm-red mix the prior
-           register baked. The baked-plate utilities the reka `<TabsIndicator>`
-           wrapper used to render are suppressed via `:surface="false"` in
-           DockLayerGroup.vue, so THIS token rule is the sole paint. */
+           glass tier — NOT the saturated `--primary 15%` warm-red mix. This token
+           rule is the sole paint (no baked plate utility to inherit). */
         background: var(--dock-layer-rail-active, var(--glass-bg-floating));
         transition:
             width var(--duration-fast) var(--spring-snappy),
@@ -274,15 +271,14 @@
     }
 
     /* The `.vertical` group's rail is a ROW of tabs (flex-direction: row), so the
-       indicator travels the INLINE (X) axis — the row layout, reka
-       `orientation="horizontal"`. */
+       indicator travels the INLINE (X) axis. The cross axis (height) is the base
+       size; the writer fills width + translateX. */
     .dock-layer-group.vertical .dock-layer-rail .dock-layer-tab-indicator {
+        width: auto;
         height: var(--dock-layer-tab-size, var(--dock-control-size, 1.75rem));
-        width: var(--reka-tabs-indicator-size);
-        transform: translateX(var(--reka-tabs-indicator-position));
     }
 
-    .dock-layer-stack {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-stack {
         position: relative;
         display: grid;
         /* AW.W2 — the morph axis (width for a horizontal group, height for a
@@ -297,7 +293,7 @@
     /* Base layout — the crossfade + hit-test contract is shared with
        `.dock-layer` above (see "Layer crossfade + hit-test contract"). The
        default state is inactive: absolute + inset:0. */
-    .dock-layer-item-host {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-item-host {
         grid-area: 1 / 1;
         display: flex;
         align-items: center;
@@ -307,7 +303,7 @@
         inset: 0;
     }
 
-    .dock-layer-item-host.is-active {
+    :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active {
         position: relative;
         inset: auto;
         width: max-content;

package/src/styles/dock/layers.css

@@ -2,10 +2,11 @@
  * contract (AX.W06 carve).
  *
  * 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
- * (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
+ * layer model: the `.dock-layers` grid container + the ratio-FREE convex-blend
+ * box-size morph (BD.W-DOCK-CORE — `scale: var(--dock-size-scale)` from a
+ * `--dock-live` blend of two measure-ONCE endpoints `--dock-expanded-px`/
+ * `--dock-collapsed-px`, BOUNDED by construction off the ONE `--dock-morph-t`
+ * scalar; NO per-swap `from/to` ratio, 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` /
@@ -33,120 +34,94 @@
        scrolls horizontally with a mask-fade. `min-width: 0` lets the
        grid item shrink under the cap (default min-content is the
        child's intrinsic width which would prevent the clamp). */
-    .dock-layers {
+    /* BG.W-DOCK-CONSUMER-FENCE — the internal-part rules carry a dock-root ANCESTRY
+       anchor at ZERO specificity cost (`:where(.glass-dock, .dock-layer-group)`), so a
+       consumer element carrying a coincidental `.dock-layers`/`.dock-layer`-family class
+       OUTSIDE a dock is never matched (the namespace-leak `visibility:hidden` /
+       `position:absolute` that silently hid consumer UI). `.dock-layers` + `.dock-layer`
+       live under `.glass-dock`; `.dock-layer-item-host` lives under `.dock-layer-group`
+       (a standalone `<DockLayerGroup>` too) — the OR-anchor matches EVERY internal use,
+       byte-identical (`:where()` is specificity 0,0,0 → same cascade, same source order).
+       Rules keyed on `.glass-dock`/`.dock-layer-group` ITSELF (the component roots) stay
+       bare (the identity-collision is the consumer's, out of scope). */
+    :where(.glass-dock, .dock-layer-group) .dock-layers {
         display: grid;
         min-width: 0;
     }
 
 
-    /* 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-ratio: calc(
-            var(--dock-morph-from, 0px) / max(var(--dock-morph-to, 1px), 1px)
+    /* ── BD.W-DOCK-CORE — the ratio-FREE convex-blend SIZE (the width-seizure cure) ──
+       THE BUG THIS RETIRES: the prior morph drove the visible size by an UNBOUNDED
+       per-swap `from/to` ratio — `--dock-root-scale = max(ratio + (1−ratio)·t, 0.06)`,
+       a FLOOR with NO CEILING. A degenerate `to` (the FLIP measure racing the content
+       layout) ran `ratio = from/max(to,1px)` to ~56 → `scaleX(56)` ≈ 2451px on
+       collapse, or an inversion at the spring's >1 overshoot peak. `transform-origin:
+       center` kept the centroid clean (cxRange 0), which is exactly why every prior
+       judge measuring the centroid PASSED while the WIDTH detonated. The whole
+       per-swap measure-and-arm pipeline + the `--dock-root-*`/`--dock-morph-ratio/scale`
+       rules are DELETED (clean break, no legacy).
+
+       THE CURE — a convex blend of two POSITIVE measure-ONCE endpoints. The dock
+       measures its expanded content span + its collapsed box ONCE per content change
+       (`useDockExpandedSize` writes `--dock-expanded-px`/`--dock-collapsed-px`, NOT a
+       per-swap rAF race) and the visible size is `--dock-live = collapsed +
+       (expanded − collapsed)·clamp(0, --dock-morph-t, 1)` → BOUNDED by construction:
+       a convex blend can NEVER exceed the larger endpoint nor invert below the smaller,
+       regardless of spring overshoot (the `clamp(0,t,1)` caps the size term). No ratio,
+       no `from>to` degeneracy, no floor guard (the two endpoints ARE the floors). The box
+       RESERVES `--dock-expanded-px` (ONE layout solve, CDP-Layout-flat) and the visible
+       size rides `scale: var(--dock-size-scale)` from `transform-origin: center` —
+       container-justify-agnostic, center-out by construction (left-anchored / centred /
+       auto-margin docks ALL grow center-out, no justify detection, no translate). The
+       endpoints default to a no-op (`expanded == collapsed → scale 1`) so an unmeasured
+       dock paints neutral. BI.W-DOCK-SPRING-UNIFY (SU2) — the actual `scale:` property is
+       composed in shape.css as a PURE size morph off `--dock-size-scale` ALONE (the
+       `--stretch` squish × `--dock-punch-stretch` cartoon-punch deformation zoo is
+       DEFINITION-ABSENT — one compositor channel, no reciprocal squish). KEEP
+       `--dock-morph-t` (the shipped token — NO rename).
+
+       BG.W-DOCK-COLLAPSE-DIR — the size blend reads the DIRECTIONAL `--dock-expand-t`
+       (the expanded-ness 0=collapsed/1=expanded `morph.css` derives: expand `t`, collapse
+       `1−t`), NOT the raw morph PROGRESS `--dock-morph-t` (always 0→1). The raw progress is
+       direction-AGNOSTIC, so reading it made the convex blend `collapsed + Δ·t` play
+       collapsed→expanded for BOTH directions — correct on expand, but on COLLAPSE it
+       ballooned the box UP to the full expanded footprint, held there as the spring settled
+       at t=1, then SNAPPED to the resting collapsed size when `[data-morphing]` cleared (a
+       reproducible ~440px width reversal, the live "morph hover flicker"). The chrome
+       (bg/border/blur — `morph.css`) and the child stagger (`--dock-expand-t` reads below)
+       were ALREADY on the directional scalar; this aligns the SIZE with them. Expand is
+       byte-identical (`.expanded[data-morphing]` derives `--dock-expand-t: --dock-morph-t`);
+       only `.collapsed[data-morphing]` (`1−t`) is corrected, so the box now shrinks
+       monotonically expanded→collapsed with NO snap. */
+    .glass-dock[data-morphing] {
+        --dock-live: calc(
+            var(--dock-collapsed-px, var(--dock-expanded-px, 0px)) +
+                (
+                    var(--dock-expanded-px, 0px) -
+                        var(--dock-collapsed-px, var(--dock-expanded-px, 0px))
+                ) *
+                clamp(0, var(--dock-expand-t), 1)
         );
-        /* 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
+        --dock-size-scale: clamp(
+            0.06,
+            calc(var(--dock-live) / max(var(--dock-expanded-px, 1px), 1px)),
+            1
         );
-        /* 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;
+        transform-origin: center 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). */
+    /* The box RESERVES its expanded footprint (ONE layout solve — the page reflows
+       ONCE to the final size, CDP-Layout stays FLAT) while the visible size scales
+       toward it. Horizontal reserves `inline-size`, vertical reserves `block-size`,
+       matching the morph axis. The `.dock-layers` content lays out at its natural
+       size behind the clip (shell.css) — that natural span is the `--dock-expanded-px`
+       the ResizeObserver reads. */
     .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)
-        );
+        inline-size: var(--dock-expanded-px);
     }
     .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)
-        );
-    }
-
-    /* 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`).
-       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;
-        /* 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 settled-footprint
-       reserve + `scaleY()` composite over it. */
-    .glass-dock[data-morphing] .dock-layer-group.vertical .dock-layer-stack {
-        inline-size: auto;
-        /* 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;
+        block-size: var(--dock-expanded-px);
     }
 
     /* The inner DockLayerGroup stack has no collapsed/expanded class, so its
@@ -157,7 +132,7 @@
        small-subtree inheriting alias the stagger reads (the inheritance-bomb guard
        only concerns the `:root`-wide write, which never happens). */
     .glass-dock[data-morphing] .dock-layer-stack {
-        --dock-expand-t: var(--dock-morph-t, 1);
+        --dock-expand-t: var(--dock-morph-t);
     }
 
     /* Horizontal dock content grows visibly when the active layer's natural
@@ -210,20 +185,20 @@
        paintable through the fade, then flips it hidden (the a11y-006 hit-test
        anchor); the spring-settle clears the morph state so the hold releases in
        lockstep. The base rule keeps NO opacity transition (the scalar IS the clock). */
-    .dock-layer,
-    .dock-layer-item-host {
+    :where(.glass-dock, .dock-layer-group) .dock-layer,
+    :where(.glass-dock, .dock-layer-group) .dock-layer-item-host {
         transition: visibility 0s linear var(--duration-normal);
     }
 
-    .dock-layer:not(.is-active):not(.is-leaving),
-    .dock-layer-item-host:not(.is-active):not(.is-leaving) {
+    :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active):not(.is-leaving),
+    :where(.glass-dock, .dock-layer-group) .dock-layer-item-host:not(.is-active):not(.is-leaving) {
         opacity: 0;
         visibility: hidden;
         pointer-events: none;
     }
 
-    .dock-layer.is-active,
-    .dock-layer-item-host.is-active {
+    :where(.glass-dock, .dock-layer-group) .dock-layer.is-active,
+    :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-active {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
@@ -244,8 +219,8 @@
        stays painted (visibility:visible) + untouchable (pointer-events:none) through
        the fade; the base-rule `visibility 0s linear var(--duration-normal)` hold
        flips it hidden once the morph state clears on spring-settle. */
-    .dock-layer.is-leaving,
-    .dock-layer-item-host.is-leaving {
+    :where(.glass-dock, .dock-layer-group) .dock-layer.is-leaving,
+    :where(.glass-dock, .dock-layer-group) .dock-layer-item-host.is-leaving {
         opacity: 0;
         visibility: visible;
         pointer-events: none;
@@ -264,7 +239,7 @@
        clock, every axis — the W01/W02 single-scalar thesis FINISHED for opacity. */
 
     /* ── Base layout — distinct per surface ─────────────────────────── */
-    .dock-layer {
+    :where(.glass-dock, .dock-layer-group) .dock-layer {
         display: flex;
         align-items: center;
         grid-area: 1 / 1;
@@ -293,11 +268,11 @@
         min-height: var(--dock-layer-height, 2.5rem);
     }
 
-    .dock-layer.is-active {
+    :where(.glass-dock, .dock-layer-group) .dock-layer.is-active {
         position: relative;
     }
 
-    .dock-layer:not(.is-active) {
+    :where(.glass-dock, .dock-layer-group) .dock-layer:not(.is-active) {
         position: absolute;
         inset: 0;
     }
@@ -326,19 +301,25 @@
     .glass-dock[data-morphing] .dock-layer-item-host.is-active > * {
         --dock-stagger-window: var(--dock-stagger-window-size, 0.55);
         --dock-stagger-onset: 0;
-        opacity: clamp(
+        /* BD.W-DOCK-CORE (A6) — factor the reveal ramp into ONE named var so opacity AND
+           the center-coupled scale read the SAME clamp (W-MOTION-CANON P3, fade coupled to
+           transform). */
+        --child-reveal: clamp(
             0,
             calc(
-                (var(--dock-expand-t, 1) - var(--dock-stagger-onset)) /
+                (var(--dock-expand-t) - var(--dock-stagger-onset)) /
                     var(--dock-stagger-window)
             ),
             1
         );
-        translate: 0
-            calc(
-                (1 - clamp(0, calc((var(--dock-expand-t, 1) - var(--dock-stagger-onset)) / var(--dock-stagger-window)), 1)) *
-                    var(--dock-stagger-rise, 4px)
-            );
+        opacity: var(--child-reveal);
+        /* BD.W-DOCK-CORE (A6) — the rise is a center-coupled SCALE pop (0.82 → 1 on the
+           reveal ramp, transform-origin center), NOT the prior independent `translate: 0
+           4px` vertical hop. The children inherit the SAME center-anchored read as the box
+           — a small inertial pop FROM the center, coupled to opacity. The global PRM gate
+           strips `scale` → snap. */
+        scale: calc(0.82 + 0.18 * var(--child-reveal));
+        transform-origin: center;
     }
 
     /* AX.W02 — per-child onsets off the ONE `--dock-stagger-step` token. Each
@@ -353,26 +334,34 @@
        collapse this to a single declaration, but it is not yet Baseline across
        Safari/Firefox — the token-keyed nth-child set is the cross-engine form, and
        the magic ladder is gone either way.) */
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2) {
+    /* BD.W-DOCK-CORE (A6) — the SYMMETRIC center-out stagger (the index-cascade RETIRED,
+       clean break). The onset ladders by DISTANCE FROM THE ROW CENTER (center pair = onset
+       0 via the base rule, then ±1, ±2 …) so the reveal radiates center-out in lockstep
+       with the center-out box morph (I.2) — never the prior left-to-right index cascade
+       that desynced from the centered grow. `--dock-stagger-step` is the per-ring beat;
+       `nth-child(N of *)` + `nth-last-child(N of *)` reach BOTH ends (the row is short —
+       ≤8 controls is the dock norm), the central rule holds the deep middle. The `of *`
+       syntax is Safari 16.4+/Chrome 111+. The rule is duplicated for the inner pane-stack
+       host (identical onsets). */
+    /* ring ±1 — 2nd-from-center each side */
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(2 of *),
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(2 of *),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(2 of *),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(2 of *) {
         --dock-stagger-onset: calc(var(--dock-stagger-step) * 1);
     }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3) {
+    /* ring ±2 — 3rd-from-center each side */
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(3 of *),
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-last-child(3 of *),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(3 of *),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-last-child(3 of *) {
         --dock-stagger-onset: calc(var(--dock-stagger-step) * 2);
     }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(4),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(4) {
+    /* ring ±3 — the deep-middle 4th/5th-from-edge cap (a long row finishes in-window) */
+    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 4):nth-child(-n + 5),
+    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 4):nth-child(-n + 5) {
         --dock-stagger-onset: calc(var(--dock-stagger-step) * 3);
     }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(5),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(5) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 4);
-    }
-    .glass-dock[data-morphing] .dock-layer.is-active > *:nth-child(n + 6),
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > *:nth-child(n + 6) {
-        --dock-stagger-onset: calc(var(--dock-stagger-step) * 5);
-    }
 
     /* AW.W2 — the at-rest clip-lift moved to `.expanded:not([data-morphing])` /
        `.always-expanded:not([data-morphing])` (the clip-shell block at the top).