@mkbabb/glass-ui 4.2.0 → 5.0.0

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;
-        }
-    }
-}

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

@@ -1,352 +0,0 @@
-/* dock/stack-rail.css — BC.W-DOCK-STACK-RAIL — the macOS hover-expand STACK rail
- * (the clean-break rebuild; the divider-carousel chip-strip RETIRED).
- *
- * THE KEPT CHASSIS (glass-dock-codebase.md §2.5 — "that part STAYS"). The `.glass-dock`
- * root carries `contain: paint` + `backdrop-filter` + (on a vertical dock) `overflow` —
- * all three hard-clip every descendant to the dock's border box, so an `#rail` rendered
- * as a dock CHILD could never paint beyond the edge. The escape: GlassDock renders the
- * `#rail` as a SIBLING of `.glass-dock` inside the `.glass-dock-frame` (a `display:contents`
- * shell that becomes a NON-clipping positioning context only when `data-has-rail`). The
- * `.dock-hairline-slot` is `position: absolute` relative to THAT shell — outside the dock's
- * containment — so the stack VISIBLY extends beyond the dock edge into its own gutter. No
- * `contain`, no `backdrop-filter`, no `overflow` on the shell → nothing clips it. This is
- * the load-bearing chassis the rebuild reuses; the box stays INVIOLATE (the slot feeds NO
- * size into the dock's intrinsic box).
- *
- * THE STACK (the verbatim spec — rail-spec-contradicted-divider-carousel). A `<DockStack>`
- * is one stack: a CORE anchor item (the always-visible dock(1) glyph) + N members. On
- * hover/focus of the core, the members FAN OUT next to the rail — a column (vertical dock)
- * / row (horizontal dock) of FULLY-VISIBLE glass icons springing open beside the line,
- * each a `--glass-bg-floating` glass icon (NEVER a shadowed half-tucked chip). The fan-out
- * is compositor-only (scale/translate/opacity/filter — the `proof:no-layout-animation`
- * floor, NO animated width/height/inset), staggered by `--dock-stack-stagger * var(--i)`.
- *
- * CLEARS CONTENT BY TOPOLOGY (THE HEADLINE — ba-dock-shell-gestalt-fail-revoked +
- * ba-chip-graze). The stack lives BEYOND the dock edge in its own gutter (the
- * `chipOverMain: false` topology), the fan extending AWAY from content, never over
- * `<main>` / the `<h1>` / a form field at any y. The chip-graze that revoked the dock/shell
- * PASS cannot recur.
- *
- * @import-ed by dock.css into the SAME `@layer components` as the other partials. */
-@layer components {
-    :root {
-        /* The beyond-edge extent — how far the stack reaches into the gutter past the dock
-           edge. Rides `--dock-scale` so it tracks the coarse-pointer density thread. (KEPT
-           token, re-conceived from the divider-carousel's symmetric overrun to the stack's
-           one-way gutter reach.) */
-        --dock-rail-extend-length: calc(2.5rem * var(--dock-scale, 1));
-        /* The macOS-stack tuning tokens (re-expressed via @theme — Tailwind-first, NEVER a
-           raw macOS-dock CSS paste). */
-        --dock-stack-stagger: 28ms; /* the per-member fan delay (× var(--i)) */
-        --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1));
-        --dock-stack-member-size: calc(2rem * var(--dock-scale, 1));
-        --dock-stack-fold: 0.4; /* the at-rest fold scale (the members tuck behind the core) */
-        /* BE.W-DOCK-RAIL-REALIZE — the facet-carousel accent strength. The per-facet
-           `--glass-accent` hue rides the THIN rim/glint at this bounded whisper (the
-           BB.W-GLASS-ACCENT ≤55% rim ceiling — the warm-cream core + the AA legibility
-           survive). A consumer retunes the whole carousel's accent intensity from one
-           `:root`/scope override; the rest of the rail is byte-identical. */
-        --dock-facet-accent-strength: 48%;
-    }
-
-    /* The dock-frame wrapper — KEPT. DEFAULT (`display: contents`) is layout-transparent
-       (byte-identical no-rail path). When a `#rail` is authored it lifts to a real
-       NON-clipping positioning context so the abs-positioned slot anchors to the dock box
-       yet escapes the dock's clip. */
-    .glass-dock-frame {
-        display: contents;
-    }
-    .glass-dock-frame[data-has-rail],
-    /* BD.W-DOCK-CORE (II.2 — F-1) — a SPLITTABLE dock frame is ALSO a non-clipping
-       positioning context: the fission island + goo neck render as frame siblings of
-       `.glass-dock` and must paint OUTSIDE the dock's `contain: paint` clip box (beside/
-       above/below the source pill). Same escape the rail uses. */
-    .glass-dock-frame[data-splittable] {
-        display: inline-flex;
-        position: relative;
-        /* No containment, no overflow, no blur — the WHOLE point: the stack/island must
-           paint beyond the dock box. The wrapper shrink-wraps the dock (inline-flex) so its
-           box == the dock box and the rail/island anchors to the true edge. */
-        /* BD.W-DOCK-CORE (II.2 — F-1) — the ISLAND REACH resolved on the FRAME (the common
-           ancestor) so BOTH the pieces (inside the dock) AND the island/neck (frame
-           siblings) read ONE reach: the cluster lands exactly where the island plate
-           materializes. A `var(--dock-island-reach, 9rem)` form so a consumer ancestor
-           (a gallery tile) can retune the detach distance via a `:root`/ancestor override
-           — the frame re-PUBLISHES it (not a hard set that would shadow the override). */
-        --dock-island-reach: var(--dock-island-reach-override, 9rem);
-    }
-    .glass-dock-frame[data-has-rail].vertical,
-    .glass-dock-frame[data-splittable].vertical {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    /* The chrome-slot wrapper — a `position: absolute` sibling of `.glass-dock`, anchored
-       to the dock-frame (NOT the dock box), so the dock's clip never reaches it. It paints
-       nothing itself; `<DockStack>` owns the core + fan. The slot seats at the dock EDGE
-       (the `position` start/end), NOT a `[data-rail-anchor]` divider seam (the seam-locator
-       RETIRED). It is pass-through; the controls re-arm pointer events. */
-    .dock-hairline-slot {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        pointer-events: none;
-        z-index: 1;
-    }
-    .dock-hairline-slot > * {
-        pointer-events: auto;
-    }
-
-    /* VERTICAL (column) dock — the stack hangs off the TRAILING (inline-end) edge in its
-       gutter, the core seated at the dock's block-end (the macOS-stack anchor: the
-       bottom-most member at the dock floor, the rest fanning up the rail). The slot starts
-       at the dock's trailing edge + the extend reach, clear of <main> (which is to the
-       inline-start). */
-    .glass-dock-frame[data-has-rail].vertical .dock-hairline-slot {
-        inset-inline-start: 100%;
-        inset-inline-end: auto;
-        inset-block-end: 0;
-        inset-block-start: auto;
-        inline-size: var(--dock-rail-extend-length);
-        block-size: 100%;
-    }
-    /* HORIZONTAL (row) dock — the stack rises off the TOP (block-start) edge in its gutter
-       (a viewport-bottom dock keeps the fan ON-SCREEN above the row), the core at the dock's
-       inline-end, the members fanning up. Clear of <main> (which is above the dock). */
-    .glass-dock-frame[data-has-rail]:not(.vertical) .dock-hairline-slot {
-        inset-block-end: 100%;
-        inset-block-start: auto;
-        inset-inline-end: 0;
-        inset-inline-start: auto;
-        block-size: var(--dock-rail-extend-length);
-        inline-size: 100%;
-    }
-
-    /* ── The stack ────────────────────────────────────────────────────────────────── */
-    .dock-stack {
-        position: relative;
-        display: flex;
-        gap: var(--dock-stack-gap);
-        /* the core anchors at the gutter end nearest the dock; the fan extends AWAY into
-           the gutter (clear of content). */
-    }
-    /* Vertical dock — the stack is a ROW: core nearest the dock edge, members fanning out
-       (inline) into the trailing gutter. Anchored block-end (the bottom-most member at the
-       dock floor — the macOS-stack anchor topology). */
-    .dock-stack.vertical {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-    /* Horizontal dock — the stack is a COLUMN: core nearest the dock edge (block-end),
-       members fanning UP into the gutter above the row. */
-    .dock-stack.horizontal {
-        flex-direction: column-reverse;
-        align-items: center;
-    }
-
-    /* The CORE anchor — the always-visible dock(1) glyph. A floating glass plate (it is
-       chrome OUTSIDE the dock substrate, so it carries its OWN glass register, not the
-       transparent in-dock recipe). */
-    .dock-stack-core {
-        flex: 0 0 auto;
-        z-index: 1;
-    }
-
-    /* The fanned members — the FadingScroll port (the one scroll-fade port). The fan's
-       main-axis extent caps at `--dock-stack-visible` members; an >visibleCount stack
-       scrolls (the port feathers the overflow). */
-    .dock-stack-fan {
-        display: flex;
-        gap: var(--dock-stack-gap);
-        /* scoped main-axis budget — the fan shows `--dock-stack-visible` members then
-           scrolls (the n-stack reachable by scrolling the rail, not the dock box). */
-    }
-    .dock-stack.vertical .dock-stack-fan {
-        flex-direction: row;
-        align-items: flex-end;
-        max-inline-size: calc(
-            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
-                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
-        );
-    }
-    .dock-stack.horizontal .dock-stack-fan {
-        flex-direction: column-reverse;
-        align-items: center;
-        max-block-size: calc(
-            var(--dock-stack-visible, 3) * var(--dock-stack-member-size) +
-                (var(--dock-stack-visible, 3) - 1) * var(--dock-stack-gap)
-        );
-    }
-
-    /* Each member — a FULLY-VISIBLE glass icon (the `--glass-bg-floating` tier + the
-       catch-light rim), NEVER a shadowed half-tucked chip (the "NOT shadowed" verbatim
-       ask). It composes the `.dock-icon-button` base; the stack-scoped surface override
-       (0,2,0) beats the base `.dock-icon-button` (0,1,0) on source-order tie without
-       `!important`. */
-    .dock-stack-fan .dock-stack-member {
-        flex: 0 0 auto;
-        inline-size: var(--dock-stack-member-size);
-        block-size: var(--dock-stack-member-size);
-        background: var(--glass-bg-floating);
-        backdrop-filter: var(--glass-blur-floating);
-        -webkit-backdrop-filter: var(--glass-blur-floating);
-        box-shadow:
-            var(--glass-edge-light),
-            var(--glass-specular),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
-        border-radius: var(--radius-pill);
-        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent);
-        /* THE FAN-OUT — compositor-only (scale/translate/opacity/filter), NO animated
-           width/height/inset (proof:no-layout-animation). At rest each member is folded
-           behind the core: scaled-down, translated toward the rail (the dock edge),
-           transparent, and a slight materialize blur. The hover-expand springs them OUT
-           staggered by `--dock-stack-stagger * var(--i)` in reading order. */
-        opacity: 0;
-        scale: var(--dock-stack-fold);
-        filter: blur(1px);
-        transition:
-            opacity var(--duration-fast) var(--ease-out)
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            scale var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            translate var(--spring-dock-duration, var(--duration-normal)) var(--spring-dock, var(--ease-out))
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            filter var(--duration-fast) var(--ease-out)
-                calc(var(--dock-stack-stagger) * var(--i, 0)),
-            background-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-    /* Vertical dock — at rest the members tuck toward the dock edge (inline-start). */
-    .dock-stack.vertical .dock-stack-member {
-        translate: calc(-1 * var(--dock-rail-extend-length)) 0;
-    }
-    /* Horizontal dock — at rest the members tuck DOWN toward the dock edge (block-end). */
-    .dock-stack.horizontal .dock-stack-member {
-        translate: 0 var(--dock-rail-extend-length);
-    }
-    /* EXPANDED — the members spring OUT to their fanned positions (full scale, in place,
-       opaque, crisp). The stagger lives in the per-member transition-delay. */
-    .dock-stack.is-expanded .dock-stack-member {
-        opacity: 1;
-        scale: 1;
-        translate: 0 0;
-        filter: blur(0);
-    }
-    .dark .dock-stack-fan .dock-stack-member {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-    /* The hover/active register — the floating plate firms, the glyph wakes (NOT a
-       saturated brand hue; the selected-reads-as-glass tier, W-REGISTER-IOS). */
-    .dock-stack-fan .dock-stack-member:hover {
-        background: var(--dock-control-hover-bg, var(--glass-bg-resting));
-        color: var(--dock-fg-on-aurora, var(--foreground));
-    }
-    .dock-stack-fan .dock-stack-member.is-active {
-        background: var(--dock-control-active-bg, var(--glass-bg-floating));
-        color: var(--dock-fg-on-aurora, var(--foreground));
-        box-shadow:
-            var(--glass-edge-light),
-            var(--glass-specular),
-            0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
-    }
-    .dark .dock-stack-fan .dock-stack-member.is-active {
-        box-shadow:
-            var(--glass-edge-light-dark),
-            var(--glass-specular-dark),
-            0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
-    }
-    .dock-stack-fan .dock-stack-member svg {
-        inline-size: 0.875rem;
-        block-size: 0.875rem;
-        flex-shrink: 0;
-    }
-
-    /* ── The FACET-carousel mode (BE.W-DOCK-RAIL-REALIZE) ─────────────────────────────
-       The re-instated AZ context carousel: each member is a context FACET CHIP carrying
-       its OWN `--glass-accent` hue (written per-chip by DockStack in facets mode), so the
-       strip reads as a row of distinct accent-tinted contexts — NOT the macOS un-tinted
-       glyph fan. The chip composes its rim+glint DIRECTLY from the per-instance
-       `--glass-accent`/`--glass-accent-strength` axis (the SAME `color-mix(in oklab, …)`
-       seam `glass/rim.css` composes for `.glass-material` — NOT a fork): the warm rim ink
-       mixes toward the facet hue at the bounded strength, so each facet's RIM + the inner
-       glint carries that context's color. At the resting `transparent`/`0%` no-op this is
-       byte-identical to the stack member; the facet hue is the consumer's context color
-       (presets-in-consumers — never a library token). The active facet stays on the
-       selected-as-glass `--dock-control-active-bg` tier (W-REGISTER-IOS — the lift is the
-       glass tier, the accent is the rim DECORATION; the two are disjoint). */
-    .dock-stack-fan .dock-facet-chip {
-        /* the accent-composed rim — the warm catch-light ink mixed toward the facet hue
-           (the rim.css `--glass-material-rim` seam, inlined for the chip). At 0% it is the
-           bare `--glass-edge-light` rim (the no-op floor). */
-        --dock-facet-rim-ink: color-mix(
-            in oklab,
-            var(--glass-rim-ink, hsl(0 0% 100% / 0.3)),
-            var(--glass-accent) var(--glass-accent-strength, 0%)
-        );
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular),
-            /* the per-facet glint — a soft chromatic halo of the facet's own hue, a
-               whisper at the rim (the §6 calm register; transparent at the 0% no-op). */
-            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent);
-    }
-    .dark .dock-stack-fan .dock-facet-chip {
-        --dock-facet-rim-ink: color-mix(
-            in oklab,
-            var(--glass-rim-ink, hsl(0 0% 100% / 0.4)),
-            var(--glass-accent) var(--glass-accent-strength, 0%)
-        );
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular-dark),
-            0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent);
-    }
-    /* the φ-tier DEPTH read (railProjection.projectFacets) — when the carousel is
-       expanded, each facet seats at its recession scale + opacity (the active forward +
-       full, the neighbours receding). The tier vars default to the 1/1 identity so a
-       non-facet member is byte-identical. Compositor-only (scale/opacity — the
-       proof:no-layout-animation floor). */
-    .dock-stack.is-expanded .dock-facet-chip {
-        scale: var(--dock-facet-tier-scale, 1);
-        opacity: var(--dock-facet-tier-opacity, 1);
-    }
-    /* the active facet — the selected-as-glass tier lift, the accent rim STILL reading
-       (the context's hue marks the active facet on top of the lift). */
-    .dock-stack-fan .dock-facet-chip.is-active {
-        background: var(--dock-control-active-bg, var(--glass-bg-floating));
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular),
-            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent);
-    }
-    .dark .dock-stack-fan .dock-facet-chip.is-active {
-        box-shadow:
-            inset 0 1px 0 var(--dock-facet-rim-ink),
-            var(--glass-specular-dark),
-            0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)),
-            0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent);
-    }
-
-    /* PRM — the fan SNAPS to terminal (the fade survives, the transform drops — P6 /
-       proof:no-layout-animation PRM carve). No spring travel, no stagger, no blur-settle. */
-    @media (prefers-reduced-motion: reduce) {
-        .dock-stack-fan .dock-stack-member {
-            transition:
-                opacity var(--duration-fast) linear,
-                background-color var(--duration-fast) var(--ease-standard),
-                box-shadow var(--duration-fast) var(--ease-standard);
-            scale: 1;
-            translate: 0 0;
-            filter: none;
-        }
-    }
-}

package/dist/styles/floating-panel.css

@@ -1,51 +0,0 @@
-/* Floating panel — teleported action menus, swatch popovers */
-
-@layer components {
-    .floating-panel {
-        position: fixed;
-        z-index: var(--z-overlay);
-        border-radius: var(--radius-panel);
-        border: 1px solid var(--glass-border-resting);
-        background: var(--glass-bg-resting);
-        -webkit-backdrop-filter: var(--glass-blur-resting);
-
-        backdrop-filter: var(--glass-blur-resting);
-        color: var(--popover-foreground);
-        box-shadow: var(--glass-shadow-resting);
-        /* AZ.R5-4 — the comfortable panel inner-pad rung (consumer-verified the
-           tight default). Token-first: a consumer retunes every floating panel +
-           dropdown surface from `--panel-padding`. */
-        padding: var(--panel-padding);
-        pointer-events: auto;
-        /* V.W3.T9 — animation grammar routes through the canonical
-           Tailwind `animate-floating-panel-in` utility (defined in
-           `theme.css` as `--animate-floating-panel-in`), NOT the raw
-           `animation:` shorthand that bypassed the cascade. */
-        @apply animate-floating-panel-in;
-    }
-}
-
-/* Dropdown-menu font knob (Q.W3 Lane C / Qβ-F3).
-   Migrated out of the lone scoped `<style>` blocks on
-   `DropdownMenuContent.vue` + `DropdownMenuSubContent.vue` — those were the
-   only scoped styles in an otherwise fully-global menu family, so the family
-   is now uniformly global-CSS. The `--dropdown-menu-font` token is the
-   consumer-facing knob (value.js overrides it to `var(--font-mono)`); the
-   `, inherit` fall-through MUST be preserved verbatim per the Qθ binding
-   constraint. Unlayered, like the retired scoped block — no other rule sets
-   `font-family` on these surfaces, so the cascade effect is identical. */
-.dropdown-menu-content,
-.dropdown-sub-content {
-    font-family: var(--dropdown-menu-font, inherit);
-}
-
-/* AZ.R5-4 — the comfortable menu inner-pad rung. The dropdown content family
-   reads the shared `--panel-padding` token (the prior hand-set `p-1` was the
-   tight floor the user flagged on the slides deck). Token-first: one override
-   retunes every teleported menu surface. Unlayered like the font rule above —
-   the `p-1`/literal Tailwind pad was removed from the SFC `cn()` chains so this
-   is the sole padding authority. */
-.dropdown-menu-content,
-.dropdown-sub-content {
-    padding: var(--panel-padding);
-}