@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/virtual.js

@@ -1,225 +0,0 @@
-import { t as e } from "./useResizeObserver-Bpoi7tRE.js";
-import { computed as t, onMounted as n, onUnmounted as r, ref as i, shallowRef as a, toValue as o, watch as s } from "vue";
-//#region src/composables/virtual/virtualSectionLayout.ts
-function c(e, t) {
-	let n = 0, r = e.map((e) => {
-		let r = Math.max(1, Math.round(t(e))), i = n;
-		return n += r, {
-			item: e,
-			height: r,
-			top: i,
-			bottom: n
-		};
-	}), i = r.slice().sort((e, t) => e.item.id < t.item.id ? -1 : +(e.item.id > t.item.id));
-	return {
-		entries: r,
-		totalHeight: n,
-		byId: i
-	};
-}
-function l(e, t) {
-	if (e.length === 0) return 0;
-	let n = 0, r = e.length - 1;
-	for (; n < r;) {
-		let i = Math.floor((n + r) / 2);
-		e[i].bottom <= t ? n = i + 1 : r = i;
-	}
-	return n;
-}
-function u(e, t) {
-	if (e.length === 0) return 0;
-	let n = 0, r = e.length - 1;
-	for (; n < r;) {
-		let i = Math.ceil((n + r) / 2);
-		e[i].top < t ? n = i : r = i - 1;
-	}
-	return n;
-}
-function d(e, t, n, r, i, a) {
-	if (e.entries.length === 0) return {
-		startIndex: 0,
-		endIndex: -1,
-		topSpacerPx: 0,
-		bottomSpacerPx: 0
-	};
-	let o = Math.max(0, t - r), s = Math.max(0, t + n + i), c = l(e.entries, o), d = u(e.entries, s);
-	return a && (c = Math.min(c, a.startIndex), d = Math.max(d, a.endIndex)), c = Math.max(0, Math.min(c, e.entries.length - 1)), d = Math.max(c, Math.min(d, e.entries.length - 1)), {
-		startIndex: c,
-		endIndex: d,
-		topSpacerPx: e.entries[c]?.top ?? 0,
-		bottomSpacerPx: Math.max(0, e.totalHeight - (e.entries[d]?.bottom ?? 0))
-	};
-}
-function f(e, t) {
-	if (e.entries.length === 0) return null;
-	let n = 0, r = e.entries.length - 1;
-	for (; n < r;) {
-		let i = Math.ceil((n + r) / 2);
-		e.entries[i].top <= t ? n = i : r = i - 1;
-	}
-	return e.entries[n]?.item ?? null;
-}
-function p(e, t) {
-	let n = e.byId, r = 0, i = n.length - 1;
-	for (; r <= i;) {
-		let e = r + i >> 1, a = n[e].item.id;
-		if (a === t) return n[e].top;
-		a < t ? r = e + 1 : i = e - 1;
-	}
-	return null;
-}
-//#endregion
-//#region src/composables/virtual/useVirtualSectionWindow.ts
-var m = /* @__PURE__ */ new Map();
-function h() {
-	m.clear();
-}
-function g(l) {
-	let u = t(() => Array.from(o(l.items))), h = /* @__PURE__ */ new Map(), g = /* @__PURE__ */ new Map(), _ = a({
-		entries: [],
-		totalHeight: 0,
-		byId: []
-	}), v = i({
-		startIndex: 0,
-		endIndex: -1,
-		topSpacerPx: 0,
-		bottomSpacerPx: 0
-	}), y = i(null), b = i(null), x = /* @__PURE__ */ new Map(), S = 0, C = 0, w = 0;
-	function T() {
-		return Math.max(1, l.scrollContainer.value?.clientHeight ?? window.innerHeight ?? 900);
-	}
-	function E() {
-		let e = l.contentEl?.value;
-		if (e) return Math.max(0, -e.getBoundingClientRect().top);
-		let t = l.scrollContainer.value;
-		return t ? t.scrollTop : document.documentElement.scrollTop || document.body.scrollTop || 0;
-	}
-	function D(e) {
-		return h.get(e.id) ?? m.get(e.id) ?? e.estimatedHeight;
-	}
-	function O() {
-		_.value = c(u.value, D);
-	}
-	function k() {
-		let e = T(), t = l.overscanBeforePx ?? e, n = l.overscanAfterPx ?? e * 2, r = E();
-		v.value = d(_.value, r, e, t, n, b.value), y.value = f(_.value, r + e * .2);
-	}
-	function A() {
-		O(), k();
-	}
-	function j() {
-		C ||= requestAnimationFrame(() => {
-			C = 0, A();
-		});
-	}
-	function M() {
-		w && window.clearTimeout(w), w = window.setTimeout(() => {
-			b.value = null, j();
-		}, 320);
-	}
-	function N(e, t) {
-		let n = Math.max(1, Math.round(t));
-		h.get(e) !== n && (h.set(e, n), m.set(e, n), j());
-	}
-	function P(e) {
-		x.delete(e);
-	}
-	function F(e, t) {
-		if (!t) {
-			P(e);
-			return;
-		}
-		if (x.get(e) === t) {
-			N(e, t.offsetHeight);
-			return;
-		}
-		P(e), x.set(e, t), requestAnimationFrame(() => {
-			let t = x.get(e);
-			t && N(e, t.offsetHeight);
-		});
-	}
-	function I(e) {
-		let t = g.get(e);
-		if (t == null) return;
-		let n = l.warmTargetBefore ?? 2, r = l.warmTargetAfter ?? 3;
-		b.value = {
-			startIndex: Math.max(0, t - n),
-			endIndex: Math.min(u.value.length - 1, t + r)
-		}, M(), A();
-	}
-	function L(e) {
-		return p(_.value, e);
-	}
-	function R() {
-		S ||= requestAnimationFrame(() => {
-			S = 0, k();
-		});
-	}
-	let z = null;
-	function B(e) {
-		let t = e ?? window;
-		z !== t && (z && z.removeEventListener("scroll", R), z = t, z.addEventListener("scroll", R, { passive: !0 }), j());
-	}
-	s(u, (e) => {
-		g.clear();
-		for (let t of e) {
-			g.set(t.id, t.index);
-			let e = m.get(t.id);
-			e != null && h.set(t.id, e);
-		}
-		for (let e of [...h.keys()]) g.has(e) || h.delete(e);
-		A();
-	}, { immediate: !0 }), s(l.scrollContainer, (e) => B(e), { immediate: !0 }), e(l.scrollContainer, () => j()), l.contentEl && e(l.contentEl, () => j()), n(() => {
-		j();
-	}), r(() => {
-		S && cancelAnimationFrame(S), C && cancelAnimationFrame(C), w && window.clearTimeout(w), z && z.removeEventListener("scroll", R), x.clear();
-	});
-	let V = t(() => v.value.endIndex < v.value.startIndex ? [] : u.value.slice(v.value.startIndex, v.value.endIndex + 1)), H = t(() => y.value?.id ?? null), U = t(() => y.value?.rootId ?? null);
-	return {
-		visibleItems: V,
-		topSpacerPx: t(() => v.value.topSpacerPx),
-		bottomSpacerPx: t(() => v.value.bottomSpacerPx),
-		measureSection: F,
-		ensureTargetWindow: I,
-		getOffsetFor: L,
-		activeId: H,
-		activeRootId: U,
-		recalculate: A
-	};
-}
-//#endregion
-//#region src/composables/virtual/useWindowedStore.ts
-function _(e) {
-	let t = e?.maxResident ?? 200, n = a([]), r = i(0), o = i(0);
-	function s(e, i = !0) {
-		if (i) n.value = [...e], r.value = 0, o.value++;
-		else {
-			let i = [...n.value, ...e];
-			if (i.length > t) {
-				let e = i.length - t;
-				n.value = i.slice(e), r.value += e;
-			} else n.value = i;
-		}
-	}
-	function c(e, t) {
-		return o.value === t ? (s(e, !1), !0) : !1;
-	}
-	function l(e, i) {
-		let a = [...e, ...n.value];
-		r.value = i, o.value++, a.length > t ? n.value = a.slice(0, t) : n.value = a;
-	}
-	function u() {
-		n.value = [], r.value = 0, o.value++;
-	}
-	return {
-		items: n,
-		windowStart: r,
-		generation: o,
-		set: s,
-		prepend: l,
-		appendIfCurrent: c,
-		clear: u
-	};
-}
-//#endregion
-export { c as buildSectionLayout, h as clearSessionHeightCache, p as findSectionOffset, f as resolveActiveSection, d as resolveSectionWindow, g as useVirtualSectionWindow, _ as useWindowedStore };

package/src/styles/border-progress.css

@@ -1,109 +0,0 @@
-/* BB.W-BORDER-PROGRESS — progress IS the element's border.
- *
- * The masked-conic ring consumption (the registration lives in
- * tokens/property-regs.css §18, mirroring the specular split: the @property reg
- * there, the consumption here). The ring paints a `conic-gradient` MASK-COMPOSITED
- * into the border band so ONLY the band paints AND it FOLLOWS the host
- * `border-radius` — a `border-image` SQUARES the corners (measured inferior,
- * forbidden), a floating-bar child re-introduces allocation (forbidden). The host
- * INTERIOR is untouched: a glass card still transmits the backdrop THROUGH its
- * content box (the AX.W54 glass-first identity — the ring is a border-band cut-out,
- * not an opaque overlay).
- *
- * Compositor-only: the sweep rides the registered `--border-progress-fill`
- * <percentage>; no layout property animates (`proof:no-layout-animation`). The
- * unregistered fallback is safe (the `initial-value` paints the resting ring; the
- * cross-fade collapses to it on a non-supporting engine — Chromium 85+/Safari
- * 16.4+, within the deployment floor). */
-
-.border-progress {
-    position: relative;
-    display: block;
-    border-radius: var(--border-progress-radius, 16px);
-    /* The host reserves the border band the ring paints into (allocation-free —
-       the content box is untouched, no reflow). */
-    padding: 0;
-}
-
-/* The ring layer — inset over the host, the border band the conic paints into.
-   The `border` width IS the band thickness; the conic is mask-composited so the
-   padding-box (interior) is EXCLUDED from the border-box (the radius-following
-   cut-out). */
-.border-progress__ring {
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    border: var(--border-progress-width, 12px) solid transparent;
-    pointer-events: none;
-    /* The spectrum conic, swept to --border-progress-fill. The colored arc runs
-       from the top (12 o'clock) clockwise to the fill fraction; past it is
-       transparent so the resting band shows ONLY the filled spectrum. */
-    background:
-        conic-gradient(
-            from 0deg,
-            var(--border-progress-spectrum, var(--section-color-7)),
-            transparent var(--border-progress-fill, 0%),
-            transparent 100%
-        );
-    /* THE RADIUS-FOLLOWING CUT-OUT — the house border-ring idiom: paint a
-       border-box fill, EXCLUDE a padding-box fill, leaving only the border band,
-       which follows `border-radius` exactly (a border-image cannot). */
-    -webkit-mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box;
-    -webkit-mask-composite: xor;
-    mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box;
-    mask-composite: exclude;
-}
-
-/* THE COVERAGE AXIS — ONE conic-mask mechanism, two coverage masks (NOT a second
-   recipe). `bottom-edge` adds a SECOND mask layer scoping the painted band to the
-   bottom edge only; it composes WITH the border-band cut-out above (the mask
-   stack intersects), so the bottom register reuses the exact conic + radius
-   cut-out — the dock-orientation `dim`-idiom discipline (no parallel fork). */
-.border-progress[data-coverage="bottom-edge"] .border-progress__ring {
-    -webkit-mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box,
-        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
-    -webkit-mask-composite: xor, source-in;
-    mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0) border-box,
-        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
-    mask-composite: exclude, intersect;
-}
-
-/* The content box — the host's own surface (a glass card, a chassis). It is
-   untouched by the ring (backdrop-intact); the ring sits over the border band
-   only. */
-.border-progress__content {
-    position: relative;
-    z-index: 1;
-    border-radius: inherit;
-    height: 100%;
-}
-
-/* THE MILESTONE PULSE — a brief brightness bloom on a crossed phase edge. The
-   pulse is PRM-gated (no edge-pulse under reduced motion — the ring snaps to the
-   new value). Compositor-only (filter brightness, never a layout property). */
-@media (prefers-reduced-motion: no-preference) {
-    .border-progress[data-milestone] .border-progress__ring {
-        animation: border-progress-milestone-pulse
-            var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out);
-    }
-}
-
-@keyframes border-progress-milestone-pulse {
-    0% {
-        filter: brightness(1);
-    }
-    40% {
-        filter: brightness(1.35);
-    }
-    100% {
-        filter: brightness(1);
-    }
-}

package/src/styles/critical-partition.mjs

@@ -1,162 +0,0 @@
-/*
- * critical-partition.mjs — the CRITICAL_PARTITION boundary manifest
- * (BB.W-CSS-CRITICAL — the render-blocking `/styles` split).
- *
- * The SINGLE source of the critical/deferred partition of the resolved
- * `@mkbabb/glass-ui/styles` draw. The build (vite.style-assets.ts
- * publishStyleAssets) reads it to emit `dist/styles/critical.css` +
- * `dist/styles/deferred.css`; the gate (scripts/proof-css-critical.mjs) reads
- * it to assert the partition is byte-complete + manifest-driven. There is NO
- * second hand-extracted critical block (W4 — the manifest is the sole source).
- *
- * The partition is drawn at the EXISTING thin-root-over-partials cascade
- * boundary (AY.W-CSS1) — whole `src/styles/index.css` @import partials are
- * bucketed, never a partial-content re-author (the partial CONTENTS are
- * untouched; a cross-partial rule move is a triumvirate trigger, see the wave
- * spec §Triumvirate). The two emitted files each @import their bucket's
- * partials in the SAME cascade order the monolith index.css declares (load
- * order is load-bearing), and CRITICAL loads BEFORE DEFERRED in the consumer
- * so the deferred component recipes still cascade-correctly over the critical
- * glass ladder.
- *
- * CRITICAL (./styles/critical) — the above-the-fold paint surface a consumer's
- * FIRST PAINT requires: the whole token cascade (every visual axis is a custom
- * property the chrome reads), the √φ typography scale + semantic type classes,
- * the @theme aliases + the `.dark` variant selector, and the 5-rung glass
- * ladder + specular/refract. Small (the token + ladder + type surface, not the
- * component recipes) — under the recorded gzip ceiling (W3).
- *
- * DEFERRED (./styles/deferred) — the below-the-fold + late-mount tail: every
- * component recipe + the transitions/animations/scroll-driven/scroll-chrome/
- * view-transition grammar + utilities + the menu/configurator/instrument-chassis/
- * hover-popover/drawer/segmented-tabs/select/icon-chip/border-progress/
- * completion-seal component partials, PLUS the folded SFC `<style scoped>`
- * payload (`../glass-ui.css`) and the emitted Tailwind component-utility surface
- * (`components.css`). These decorate components that mount after first paint or
- * sit below the fold; their late arrival shifts no above-the-fold pixel (the
- * FOUC-safe floor, W5). The BC-added `scroll-chrome.css` (the scroll-driven
- * floating-CHROME collapse recipe — a late-mount surface decoration) and
- * `completion-seal.css` (the one-shot earned-gold feedback seal — a focal opt-in
- * surface that mounts on a completion event) are BOTH deferred: neither paints
- * an above-the-fold first-paint chrome pixel.
- *
- * The `paper.css` partial is bucketed DEFERRED — the paper underpaint/grain
- * utilities pair with glass for paper-on-glass compositions that mount with the
- * content surfaces (below-the-fold), not the chrome's first paint.
- */
-
-/**
- * The two non-fold buckets — each entry is a `src/styles/*.css` partial that the
- * monolith `src/styles/index.css` @imports at the top level (lines 149-182).
- * The order within each list mirrors the monolith's declared cascade order.
- */
-export const CRITICAL_PARTIALS = Object.freeze([
-    "tokens.css",
-    "typography.css",
-    "theme.css",
-    "glass.css",
-    "glass-specular-track.css",
-    "glass-refract.css",
-]);
-
-export const DEFERRED_PARTIALS = Object.freeze([
-    "paper.css",
-    "dock.css",
-    "dock-controls.css",
-    "cards.css",
-    "feedback-tone.css",
-    "floating-panel.css",
-    "transitions.css",
-    "animations.css",
-    "scroll-driven.css",
-    "scroll-choreography.css",
-    "scroll-chrome.css",
-    "view-transition.css",
-    "utilities.css",
-    "menu.css",
-    "configurator.css",
-    "instrument-chassis.css",
-    "hover-popover.css",
-    "drawer.css",
-    "segmented-tabs.css",
-    "select.css",
-    "icon-chip.css",
-    "border-progress.css",
-    "completion-seal.css",
-]);
-
-/**
- * The build-time folds that land in DEFERRED (NOT a `src/styles/*.css` partial;
- * the publishStyleAssets folds appended to the dist copy of index.css). The SFC
- * scoped payload (`../glass-ui.css`) + the Tailwind component-utility surface
- * (`./components.css`) are below-the-fold component decoration — they MUST NOT
- * leak into critical (the W2 byte-complete-in-one-bucket + W3 ceiling bite).
- * Relative to `dist/styles/` (where critical.css/deferred.css are emitted).
- */
-export const DEFERRED_FOLDS = Object.freeze([
-    "../glass-ui.css",
-    "./components.css",
-]);
-
-/**
- * The `@source` build-scan backstop directive (the consumer-JIT content-scan
- * reach for glass-ui's own component utilities — a backstop for the
- * components.css self-emit). It backstops the DEFERRED component utilities, so
- * it rides DEFERRED. The value is the exact directive the monolith index.css
- * carries (re-grounded at HEAD: `@source "../*.js";`).
- */
-export const DEFERRED_SOURCE_DIRECTIVE = '@source "../*.js";';
-
-/**
- * The recorded critical-subset gzip ceiling (bytes), measured on the FULLY
- * RESOLVED consumer draw (the critical partials' @import roots resolved
- * RECURSIVELY through their nested tokens/* + glass/* sub-partials — the real
- * first-paint byte a consumer's bundler emits, NOT the one-level approximation
- * profile-bundle uses for the monolith budget). The committed, reviewed
- * baseline (the profile-bundle read-baseline discipline): a regression that
- * folds a component recipe back into critical climbs the emitted critical.css
- * resolved gzip over this → RED (W3). Re-base via the gate's `--rebaseline`
- * flag with a recorded rationale, never silently.
- *
- * Measured at this authoring (HEAD bdbcd479, post-build): the critical subset
- * resolved to raw 347266 / gzip 105460 — the token cascade (tokens.css gzip
- * ~62KiB) + the 5-rung glass ladder (glass.css gzip ~27KiB) + typography +
- * theme + specular/refract. It is roughly half the monolith's fully-resolved
- * gzip (~230KiB), so the deferred tail (component recipes + SFC scoped payload
- * + components.css utility surface, ~125KiB gzip) loads NON-blocking after
- * first paint — the render-block win. The ceiling carries ~4% headroom over
- * the measured baseline (the profile-bundle re-base convention). If the
- * re-measured render-block under W-LIGHTHOUSE shows this critical subset is
- * STILL over the mobile-ms floor, the inline-critical-head-block path routes to
- * the named BB.W-CSS-CRITICAL-INLINE successor (a triumvirate trigger, NOT a
- * token-value edit here).
- *
- * RE-BASE (BB liquid-glass band): the critical subset grew to raw 427015 / gzip
- * 131469 — NOT a component-recipe leak (the critical bucket is still the 6
- * documented token+glass+type partials; w2 partials-disjoint + w4 hold), but the
- * legitimate GROWTH of the critical token cascade + glass ladder by the BB
- * liquid-glass band: the deep-glass token family (tokens/glass-deep.css), the
- * --glass-accent rim axis, the W-LENSING refract evolution, the W-DARK-MATERIAL
- * dark-arm + the on-glass-fg / surface-axis registers — all of which live in the
- * critical tokens/* + glass/* sub-partials by construction. Ceiling lifted
- * 110000 → 137000 (~4.2% headroom over the measured 131469, the profile-bundle
- * re-base convention) to carry the BB glass-band critical surface.
- *
- * RE-BASE (BC.W-CSS-CRITICAL — re-measured over the SETTLED BC cascade): the
- * critical subset grew to raw 482228 / gzip 149748 — AGAIN not a component-recipe
- * leak (the critical bucket is STILL the 6 documented token+glass+type partials;
- * the BC visual bands 1-7 + 9 re-authored the critical tokens/* + glass/* sub-
- * partials — the warm-cream page chassis tokens, the on-glass-fg/surface-axis
- * registers, the calm/deep glass ladder, the scroll/motion token additions in
- * scale-paper.css — all of which live in the critical token cascade by
- * construction; the two BC-added PARTIALS scroll-chrome.css + completion-seal.css
- * are bucketed DEFERRED, NOT critical). The critical subset is 47.3% of the
- * settled monolith's resolved gzip (316614) — the spec's ~46% small-above-the-
- * fold-subset bar HELD over the settled cascade. Ceiling re-pinned 137000 →
- * 156000 (~4.2% headroom over the measured 149748, the profile-bundle re-base
- * convention — the reviewed write, NEVER a silent component-recipe swallow to
- * stay under the old number). The render-block FLOOR stays W-LIGHTHOUSE's
- * W3-arm-1 mobile-ms gate (the binding perf truth); this ceiling guards against a
- * recipe revert-toward-monolith.
- */
-export const CRITICAL_GZIP_CEILING = 156000;

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

@@ -1,159 +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);
-        /* 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 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. */
-        --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) */
-        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;
-        }
-    }
-}