@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/styles/dock/layers.css

@@ -1,413 +0,0 @@
-/* dock/layers.css — the `.dock-layer` crossfade + hit-test + reveal-stagger
- * 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 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` /
- * rail / stack live in dock/layer-group.css; the overflow strategies in
- * dock/overflow.css.
- *
- * @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). */
-
-@layer components {
-    /* J.W3.A — outer collapsed↔expanded pair drives width via FLIP.
-       `useLayerTransition` measures the natural width before/after the
-       slot swap and animates `width` between fixed pixel values via
-       the `--dock-motion-resize` spring; this eliminates the
-       `width: auto` non-interpolation diagnosed in R1+R6. The two
-       layers stack on a CSS grid (1/1 area) and crossfade opacity
-       in step with the FLIP. Spatial motion (width) is automatically
-       suppressed by the global `prefers-reduced-motion` gate in
-       `utilities.css` (which strips width from transition-property).
-       Opacity transitions remain — the 0.1s shortened cadence in PRM
-       still reads as a snap.
-
-       J.W3.C — when the active layer's natural width exceeds
-       `--dock-max-inline-size`, the dock root clips and the layer
-       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 {
-        display: grid;
-        min-width: 0;
-    }
-
-
-    /* ── 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; the >1
-       excursion routes to the orthogonal `--dock-punch-stretch` channel). 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. The actual `scale:` property is composed in shape.css (folded
-       WITH the `--stretch` squish × the `--dock-punch-stretch` cartoon punch on ONE
-       compositor channel). KEEP `--dock-morph-t` (the shipped token — NO rename). */
-    .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-morph-t, 1), 1)
-        );
-        --dock-size-scale: clamp(
-            0.06,
-            calc(var(--dock-live) / max(var(--dock-expanded-px, 1px), 1px)),
-            1
-        );
-        transform-origin: center center;
-        will-change: transform;
-    }
-
-    /* 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: var(--dock-expanded-px);
-    }
-    .glass-dock[data-morphing].vertical {
-        block-size: var(--dock-expanded-px);
-    }
-
-    /* The inner DockLayerGroup stack has no collapsed/expanded class, so its
-       stagger directional scalar is the per-swap progress directly: `--dock-morph-t`
-       reads onto an inheriting `--dock-expand-t` on the morphing stack so the new
-       pane's children cascade in as it reveals. The geometry scalar
-       (`--dock-morph-t`) stays registered + non-inheriting on the root; this is the
-       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);
-    }
-
-    /* Horizontal dock content grows visibly when the active layer's natural
-       width exceeds the content area (grow-to-fit; consumers needing wrap opt
-       into `overflow="wrap"`). No edge-fade mask — content never clips or scrolls,
-       so a feather has nothing to feather and only bleeds a stray ramp onto
-       the edge controls. */
-    .glass-dock.expanded:not(.dock-overflow-wrap) > .dock-layers {
-        overflow-x: visible;
-    }
-
-    /* ── Layer crossfade + hit-test contract (ONE vocabulary) ──────────────
-       AX.W02 — the outer `.dock-layer` (GlassDock's built-in collapsed↔expanded
-       pair) and the inner `.dock-layer-item-host` (a DockLayer inside a
-       DockLayerGroup) now share ONE active-state vocabulary: `.is-active` /
-       `.is-leaving`. The prior `.layer-active` / `.is-active` / `.is-leaving`
-       TRIPLE collapsed to the pair — both surfaces drive crossfade + hit-test off
-       the same two state classes, and the morph orchestrator fold (one engine per
-       dock) means the box, both panes, and every child stagger ride one
-       `--dock-morph-t` clock. The greppable-sync tombstone that kept the two
-       never-merged vocabularies in lockstep is DELETED — there is nothing to keep
-       in sync once the vocabulary is one.
-
-       The 3-state active/inactive/leaving visibility contract here is LOAD-BEARING
-       (the a11y-006 anchor): the inactive layer leaves the hit-test tree
-       (`visibility:hidden`), the leaving layer stays painted-but-untouchable
-       through its fade (`visibility:visible` + `pointer-events:none`), and the
-       active layer shows IMMEDIATELY (`visibility 0s`, no fade-in delay). One
-       owner governs each concern — size = the spring scalar, opacity = the CSS
-       crossfade below, visibility = this 3-state fork.
-
-       An inactive layer must leave the paint AND hit-test tree: `opacity:0` alone
-       leaves the box answering `elementFromPoint()`, so an inactive layer's button
-       intercepts clicks meant for the active one. `visibility:hidden` removes it
-       from both while KEEPING it in layout flow, so the FLIP measurement still
-       reads its geometry (`display:none` would zero it). The delayed `visibility`
-       transition holds a leaving layer `visible` for the length of the opacity
-       crossfade, then flips it `hidden`.
-
-       AX.W45 DK7 — the crossfade is now on the ONE `--dock-morph-t` scalar (the
-       SAME clock the box size + child stagger ride), NOT a parallel fixed-duration
-       CSS transition. The prior `opacity var(--dock-motion-resize)` was a SECOND
-       clock: a velocity-dependent spring settles its meaningful travel in ~0.18s
-       while the 0.3s CSS transition lingered, so the leaving pane ghosted over the
-       settled box — the "laggy/delayed" layer-switch the user read. Driving the
-       leaving-pane opacity off `calc(1 - var(--dock-morph-t))` makes the fade a pure
-       FUNCTION of the same `t`: an interrupted/retargeted switch carries the
-       crossfade WITH it (no second timer to drift). Visibility is the ONLY surviving
-       CSS-timed leg — a 0s hold over `--duration-normal` keeps the leaving pane
-       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 {
-        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) {
-        opacity: 0;
-        visibility: hidden;
-        pointer-events: none;
-    }
-
-    .dock-layer.is-active,
-    .dock-layer-item-host.is-active {
-        opacity: 1;
-        visibility: visible;
-        pointer-events: auto;
-        /* AW.W2 — the active pane is STATICALLY opacity:1, REVEALED by the clip
-           aperture (the box is the reveal mechanism), never faded. There is ZERO
-           opacity authority on the active pane — the aperture uncovers a layout
-           that is laid out ONCE at natural size behind it. Only `visibility 0s`
-           survives (the active layer must paint at once, no fade-in delay — the
-           AU.W2 governing rule). The leaving pane fades on the scalar below. */
-        transition: visibility 0s;
-    }
-
-    /* AX.W45 DK7 — the leaving pane fades on the ONE `--dock-morph-t` scalar (the
-       single clock the box rides), gated on `[data-morphing]`. At rest (no morph)
-       the leaving class is already gone, so the scalar-fade is only authored DURING
-       the morph. `opacity: calc(1 - var(--dock-morph-t))` runs 1→0 as the box
-       morphs, in perfect lockstep — no ghost, no flash, no second timer. The pane
-       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 {
-        opacity: 0;
-        visibility: visible;
-        pointer-events: none;
-    }
-
-    .glass-dock[data-morphing] .dock-layer.is-leaving,
-    .glass-dock[data-morphing] .dock-layer-item-host.is-leaving {
-        opacity: calc(1 - var(--dock-morph-t));
-    }
-
-    /* AX.W45 — opacity now has ONE owner: the `--dock-morph-t` scalar (the leaving
-       pane via `calc(1 - t)`, the entering pane revealed by the clip aperture +
-       child stagger off the SAME scalar). Visibility keeps ONE owner: the delayed
-       `visibility 0s linear var(--duration-normal)` hold of the 3-state fork above
-       (the a11y-006 hit-test anchor, LOAD-BEARING) released on spring-settle. ONE
-       clock, every axis — the W01/W02 single-scalar thesis FINISHED for opacity. */
-
-    /* ── Base layout — distinct per surface ─────────────────────────── */
-    .dock-layer {
-        display: flex;
-        align-items: center;
-        grid-area: 1 / 1;
-        gap: var(--dock-layer-gap, 0.375rem);
-    }
-
-    /* AW.W2 — content-intrinsic axis follows the MORPH axis. A horizontal dock
-       lays its inline content out ONCE at `width: max-content` (nowrap) so the
-       width aperture uncovers a static row; the fixed `height` keeps the row a
-       single line. Scoped to `:not(.vertical)` so a vertical rail (whose
-       block-axis morph reveals a column) is NOT forced onto one nowrap row — the
-       vertical group's active host block-sizes to `height: max-content` below
-       (the AP.W3 column treatment, KEPT). */
-    /* AY.W-DOCK-NAV B6 — the height is a FLOOR (`min-height`), not a fixed lock. A
-       single-row content pane's intrinsic height already equals
-       `--dock-layer-height` (the controls + line-height sum to it), so `min-height`
-       is byte-identical for the common case. But a horizontal dock hosting a COLUMN
-       switcher-rail (`<DockLayerGroup>` with `show-rail`) lays the rail out as a
-       stack of tabs taller than one row — the prior fixed `height` clipped the
-       rail's lower tabs + the active indicator BELOW the dock floor (the B6 "no rail
-       line / broken" read, measured: 2 of 3 tabs clipped). The floor lets the pane
-       block-size to the rail's natural column height so the dock grows to contain
-       the whole rail. The cross axis keeps `nowrap`. */
-    .glass-dock:not(.vertical) .dock-layer {
-        white-space: nowrap;
-        min-height: var(--dock-layer-height, 2.5rem);
-    }
-
-    .dock-layer.is-active {
-        position: relative;
-    }
-
-    .dock-layer:not(.is-active) {
-        position: absolute;
-        inset: 0;
-    }
-
-    /* AX.W01 — the spring-keyed child stagger, now off the SINGLE morph scalar.
-       The driver writes `--dock-morph-t` to the `.glass-dock` root and arms
-       `[data-morphing]` while the spring runs; `--dock-expand-t` (the inheriting
-       directional expanded-ness derived above — 0 collapsed, 1 expanded) cascades
-       to the active pane's children. Each direct child reveals when `--dock-expand-t`
-       crosses its per-child onset, so the controls cascade IN ON the physical morph
-       — symmetric in both directions (expand fades them in outer→in, collapse fades
-       them back out) and an interrupted morph carries the cascade with it (no
-       orphaned timers). The active PANE stays statically opacity:1 (revealed by the
-       clip aperture); only its CHILDREN ride this per-child onset (the W2
-       clip-reveal contract is NOT regressed).
-
-       The reveal is a pure `calc` ramp: `opacity = clamp(0, (expand-t − onset) /
-       window, 1)`. Gated on the root `[data-morphing]` so at REST the children
-       carry no opacity authority (default cascade → 1). Under PRM the spring's
-       `respectReducedMotion` jumps `--dock-morph-t` 0→1 in one frame → `--dock-expand-t`
-       lands at the endpoint → the cascade collapses to 0 stagger frames; the
-       global PRM gate strips `translate` so the rise snaps too. The inner
-       DockLayerGroup defines its own `--dock-expand-t` (= the per-swap progress)
-       in DockLayerGroup's scope so a pane swap reveals the new pane's children. */
-    .glass-dock[data-morphing] .dock-layer.is-active > *,
-    .glass-dock[data-morphing] .dock-layer-item-host.is-active > * {
-        --dock-stagger-window: var(--dock-stagger-window-size, 0.55);
-        --dock-stagger-onset: 0;
-        /* 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-stagger-window)
-            ),
-            1
-        );
-        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
-       successive control starts `step` later than the one before it (`onset =
-       step × (childIndex − 1)`), so the row fills outer→in on expand. The
-       hand-typed 0.08/0.16/0.24/0.32/0.4 ladder is RETIRED — the onsets are now
-       derived from the single token, so retuning the cascade beat is a one-token
-       override. The set is capped at the 6th child (`nth-child(n + 6)` holds at
-       `step × 5`) so even a long row finishes within the morph window. ONE rule
-       over the unified `.is-active` vocabulary drives both the outer pane and the
-       inner pane-stack — no duplicated comma-group. (`sibling-index()` would
-       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.) */
-    /* 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);
-    }
-    /* 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);
-    }
-    /* 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);
-    }
-
-    /* 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).
-       A plain `overflow: visible` here would lift the clip DURING the morph (the
-       load-bearing sequencing gap), so the `overflow` declarations are dropped
-       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 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%;
-    }
-
-    .glass-dock.expanded:not(.fit-content) .dock-layer--full {
-        width: 100%;
-    }
-
-    .glass-dock.always-expanded {
-        cursor: default;
-    }
-
-    /* ── AW.W3b — `layout="grid"` the 2D auto-grid big dock ──────────────
-       The active layer becomes a self-wrapping tile grid (Launchpad / Stage-Manager
-       track symmetry — `auto-fill` columns floored at `--dock-tile-min`, explicit
-       `grid-auto-rows` so the concentric look holds). DISTINCT from
-       `overflow="wrap"`'s content-ordered flex-wrap. A `layout="grid"` dock is
-       `alwaysExpanded` by contract (GlassDock.vue), so there is NO width morph and
-       hence NO per-frame grid-column reflow. `white-space: normal` releases the
-       single-row nowrap so the tiles wrap. */
-    .glass-dock.layout-grid {
-        white-space: normal;
-    }
-
-    .glass-dock.layout-grid .dock-layer--full {
-        display: grid;
-        grid-template-columns: repeat(
-            auto-fill,
-            minmax(var(--dock-tile-min, 4.5rem), 1fr)
-        );
-        grid-auto-rows: var(--dock-tile-min, 4.5rem);
-        gap: var(--dock-layer-gap, 0.375rem);
-        width: 100%;
-        height: auto;
-        white-space: normal;
-        /* AX.W45 DK4-a — center each fixed-size button in its tile cell on BOTH
-           axes. The grid layer only inherited `align-items: center` (block axis);
-           `justify-items` defaulted to `stretch`, which degenerates to `start` for a
-           fixed-width `inline-flex` button — so every icon hugged the inline-start
-           (left) edge of its tile, ~16px off-center (the "big-dock icons are not
-           aligned" defect). `place-items: center` centers on both axes, MIRRORING the
-           flex-wrap layer's `justify-content: center`. */
-        place-items: center;
-    }
-
-    /* A grid dock fills the inline cap; the active layer is the panel body, not a
-       shrink-to-fit row. The cap is the `--dock-max-inline-size` clamp (KEPT). */
-    .glass-dock.layout-grid .dock-layers {
-        width: 100%;
-    }
-
-    /* CONCENTRIC inner tiles — inner radius = outer card radius − padding (the
-       universal macOS / visionOS / Raycast rule). NEVER nest two pills
-       (stadium-in-stadium); a finite outer + a stepped-down inner. */
-    .glass-dock.layout-grid.shape-card .dock-layer--full > * {
-        border-radius: calc(
-            var(--dock-card-radius) - var(--dock-padding-inline, 0.5rem)
-        );
-    }
-}

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

@@ -1,172 +0,0 @@
-/* dock/morph-bridge.css — the AZ.W-MORPH-SHOWCASE metaball-teardrop bridge (H4 arm a).
- *
- * The net-new CSS SVG-goo filter that hides the V↔H dock topology jump-cut. The
- * fleet's Arch B picks "the existing goo-blob mounted behind the docks OR a net-new
- * CSS SVG-goo filter … the implementation picks per perf/browser." This wave picks the
- * CSS SVG-goo filter — the M5-DETERMINISTIC choice: the bridge has NO free-running
- * `uTime` (the goo-blob's three wall-clock channels would RED the M5 scalar-binding
- * clause), NO WebGL pass at all (so the HG5 frame budget clears trivially — zero shader
- * frames), and its teardrop aspect is a PURE function of `--dock-morph-t`. The classic
- * gooey-CSS trick: blur two plates so their alpha bleeds together, then threshold the
- * blurred alpha back to a sharp edge (feColorMatrix on the A channel) so the merge
- * reads as one amorphous metaball silhouette.
- *
- * The bridge is DECORATIVE only (the contained-creature constraint — it hosts no dock
- * children; the real DOM docks crossfade UNDER it). It paints BEHIND the two docks and
- * fully occludes the reflow at the `t≈0.5` midpoint where both plates are at their
- * dimmest.
- *
- * Determinism (HG4/M5): every animated axis below is `f(var(--dock-morph-t))` (the ONE
- * inheriting scalar the morph spring writes) or `f(var(--stretch))` (the scalar's
- * DERIVATIVE the liquid-flex squish writes) — NEVER a CSS animation/transition with its
- * own clock. A frame captured at a given `--dock-morph-t` is byte-reproducible. */
-
-@layer components {
-    /* The bridge host — sits absolutely behind the two docks, isolation-safe so the
-       goo filter does not leak onto siblings. The two plates inside it are merged by
-       the SVG goo filter referenced via `filter: url(#…)`. */
-    .dock-morph-bridge {
-        position: absolute;
-        inset: 0;
-        display: grid;
-        place-items: center;
-        pointer-events: none;
-        z-index: 0;
-        /* The goo: blur-then-threshold the child plates' alpha. The filter id is
-           authored once in the showcase SFC (a hidden <svg><filter>); the consumer
-           binds it here. `isolation: isolate` keeps the blur/threshold scoped to the
-           plates, not the page behind. */
-        isolation: isolate;
-        /* Under reduced motion the bridge is hidden — the morph snaps (no teardrop). */
-        opacity: var(--dock-bridge-opacity, 1);
-    }
-
-    /* The goo container the filter applies to — only the plates inside it merge.
-       SCOPED to a TIGHT centered box just larger than the max plate footprint (NOT
-       inset:0 over the whole stage) so the per-frame `feGaussianBlur` repaint covers
-       a small region, not the full stage — the morph frame budget (HG5) clears. The
-       box is sized off the morph spans (the consumer passes --dock-bridge-h-w /
-       --dock-bridge-v-h); `contain: paint` clips the filter work to it. */
-    .dock-morph-bridge-goo {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        translate: -50% -50%;
-        width: calc(var(--dock-bridge-h-w, 18rem) + 2.5rem);
-        height: calc(var(--dock-bridge-v-h, 16rem) + 2.5rem);
-        display: grid;
-        place-items: center;
-        contain: layout paint;
-        filter: var(--dock-bridge-goo-filter, none);
-    }
-
-    /* A bridge plate — a warm-glass capsule. TWO plates: one tracks the vertical dock
-       footprint (tall capsule), one the horizontal (wide capsule); both shrink toward
-       the shared center as the morph crosses the midpoint so the blur fuses them into
-       ONE teardrop. The size + corner radius are `f(--dock-morph-t)`; the
-       volume-preserving squish reads `--stretch` (the scalar derivative). */
-    .dock-morph-bridge-plate {
-        position: absolute;
-        /* The warm-cream gel body — the metaball-teardrop fill (a soft radial so the
-           blur threshold reads a domed droplet, not a flat slab). */
-        background: radial-gradient(
-            120% 120% at 50% 38%,
-            var(--glass-bg-floating, color-mix(in oklab, var(--card), white 8%)) 0%,
-            var(--glass-bg-resting, var(--card)) 62%,
-            color-mix(in oklab, var(--card), var(--foreground) 6%) 100%
-        );
-        border-radius: 999px;
-        /* 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 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);
-        height: var(--dock-bridge-v-h, 16rem);
-        /* BD.W-MORPH-FIELD-WELD — the GAP-RELATIVE waist (the scale-blind-threshold fix /
-           the user's 296px→dot defect). The prior travel necked the tall plate ALL the way
-           to a 52px circle at t=0.5, so the goo threshold over-ate the two thin overlapping
-           circles to a lone white dot. The neck now travels only `--morph-neck-frac` (0.62)
-           of the way to the circle, so the midpoint silhouette holds a FAT fused mass with a
-           real waist (≤0.45 of body), not a pinched dot — the goo blur fuses it into one
-           teardrop barbell instead of eating it. */
-        --morph-neck-frac: 0.62;
-        --dock-bridge-v-neck: calc(
-            (var(--dock-bridge-v-h, 16rem) - var(--dock-bridge-v-w, 3.25rem)) / 2 *
-                var(--morph-neck-frac) *
-                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 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);
-        /* 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. */
-        /* BD.W-MORPH-FIELD-WELD — gap-relative waist (the symmetric arm of the V-plate fix
-           above): the wide plate necks only `--morph-neck-frac` of the way to its small
-           dimension at the midpoint, so the fused mass stays fat (a real teardrop, not a
-           dot). */
-        --morph-neck-frac: 0.62;
-        --dock-bridge-h-neck: calc(
-            (var(--dock-bridge-h-w, 18rem) - var(--dock-bridge-h-h, 3.25rem)) / 2 *
-                var(--morph-neck-frac) *
-                (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) */
-        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
-    }
-
-    /* PRM — the bridge is removed; the morph snaps to the target dock (the spring's
-       respectReducedMotion jumps the scalar 0→1 in one frame, the docks land at their
-       endpoints, the goo teardrop never paints). */
-    @media (prefers-reduced-motion: reduce) {
-        .dock-morph-bridge {
-            --dock-bridge-opacity: 0;
-        }
-    }
-}