@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/dialog-placement.css

@@ -0,0 +1,68 @@
+/*
+ * dialog-placement.css — the overlay-band Dialog side-slide structural positioning,
+ * precompiled (BI.W-DIALOG-PLACEMENT — the Sheet fold; the BG.W-SHEET-INSET-ROOT
+ * emission INVERSE, terminalized onto Dialog `placement`).
+ *
+ * THE FOLD: Sheet's side-slide is a Dialog PAINT axis now (`<DialogContent placement=
+ * top|right|bottom|left>`), same reka `DialogRoot` + FocusScope. The retired Sheet
+ * authored its STRUCTURAL positioning (position/inset/size/z-index) as CVA Tailwind
+ * utilities — load-bearing GEOMETRY that DIES in any consumer whose Tailwind content-scan
+ * does not reach glass-ui's compiled dist (the D7 configurator-drawer break). This rule
+ * ships that geometry PRECOMPILED as a plain `[data-slot="dialog-content"][data-placement]`
+ * attribute-selector rule, so it ALWAYS emits in dist/glass-ui.css regardless of JIT reach.
+ * DialogContent.vue mints `data-slot="dialog-content"` + `:data-placement` on the portaled
+ * content node for a side placement (center emits NO `data-placement`, so none of these
+ * rules touch a centered modal); the CVA keeps ONLY decoration (glass tier, overlay padding
+ * ladder, per-side rounding/border, the `sheet-animate` + slide-in/out data-state pairs).
+ *
+ * SPECIFICITY — the rules are wrapped in `:where()` (0,0,0). The library ships the DEFAULT
+ * positioning; a consumer's own sizing utility (the demo PresetEditor's `w-full sm:max-w-md`,
+ * a `.w-full`/`.h-full` class at 0,1,0) WINS over the `:where()` default, so the side sheet
+ * stays consumer-overridable (the token-first / consumer-overrides identity). UNLAYERED (like
+ * select.css's [data-slot] bound) so it never loses to an unlayered utility. Locked by
+ * proof:emission (the overlay-band inverse clause).
+ *
+ * PHYSICAL properties (width/height/max-width/top/right/bottom/left) mirror the retired
+ * Sheet CVA utilities EXACTLY (`inset-y-0 right-0 h-full w-3/4 sm:max-w-sm` &c.), so a
+ * consumer's physical sizing override resolves cleanly by SPECIFICITY against the same
+ * property name — no logical-vs-physical cascade ambiguity, and the enter/exit slide travel
+ * is byte-identical to the retired Sheet frame-series.
+ */
+:where([data-slot="dialog-content"][data-placement]) {
+    position: fixed;
+    z-index: var(--z-modal);
+}
+
+/* Top/bottom side sheets span the full width (left:0;right:0), anchor to their edge. */
+:where([data-slot="dialog-content"][data-placement="top"]) {
+    left: 0;
+    right: 0;
+    top: 0;
+}
+:where([data-slot="dialog-content"][data-placement="bottom"]) {
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
+/* Left/right side sheets span the full height (top:0;bottom:0), 3/4 width, capped at sm. */
+:where([data-slot="dialog-content"][data-placement="left"]) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 75%;
+}
+:where([data-slot="dialog-content"][data-placement="right"]) {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 75%;
+}
+@media (min-width: 40rem) {
+    :where([data-slot="dialog-content"][data-placement="left"]),
+    :where([data-slot="dialog-content"][data-placement="right"]) {
+        max-width: 24rem; /* the prior sm:max-w-sm */
+    }
+}

package/src/styles/dock/adaptive-legibility.css

@@ -58,7 +58,7 @@
             calc(
                 var(--glass-tint-strength-floor) +
                 (var(--glass-tint-strength-aa) - var(--glass-tint-strength-floor)) *
-                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee, 0.6)) / (1 - var(--glass-backdrop-luma-knee, 0.6)))
+                max(0, (var(--glass-backdrop-luma, 0) - var(--glass-backdrop-luma-knee)) / (1 - var(--glass-backdrop-luma-knee)))
             ),
             var(--glass-tint-strength-aa)
         );

package/src/styles/dock/crossfade.css

@@ -0,0 +1,139 @@
+/* dock/crossfade.css — the ONE crossfade-slot rule (BI.W-DOCK-CROSSFADE).
+ *
+ * `DockLayerGroup`/`DockLayer`/`useLayerTransition` FOLD to ONE crossfade slot
+ * (PASS-1 §2.6): the content layer hosts ONE active face; a switch is a two-child
+ * OPACITY OVERLAP on the per-face `--dock-t` scalar (written by `useDockSpring` in
+ * `DockCrossfade.vue` — velocity-continuous + interruptible, NOT a UA-eased View
+ * Transition; G6 CLOSED). The reserved box is sized to the PEAK face as a MEASURE-ONCE
+ * `min-block-size` (set inline by the crossfade slot — a running max, never a per-swap
+ * FLIP). The clip-era `.dock-layer-item-host` FLIP crossfade in `layers.css`/
+ * `layer-group.css` is superseded (its element no longer renders — DockLayer renders
+ * `.dock-face`).
+ *
+ * `--dock-t` is `@property`-registered `inherits: false` (dock.css, the plate scalar),
+ * so writing it per-FACE is local to that face — each face reads its OWN `--dock-t` for
+ * its opacity, and the plate's own `--dock-t` (the collapse clip) never collides. The
+ * G12 content clip rides the SEPARATE inheriting `--dock-morph-t` collapse scalar.
+ */
+@layer components {
+    /* The crossfade slot: a relative grid whose cells (faces) stack at 1/1. The
+       peak-reserve `min-block-size` is set inline by `DockCrossfade.vue` (measure-once
+       running max), so the box holds the tallest face from frame 0 — no jump when a
+       shorter face becomes active nor when the plate collapses over it (the compound). */
+    .dock-crossfade {
+        position: relative;
+        display: grid;
+    }
+
+    /* A face host — the grid cell + the crossfade opacity channel (the INTERACTIVE run:
+       hover plates overflow it, NEVER clipped here). The inactive default is
+       out-of-flow (absolute + inset:0, opacity 0, inert) so the grid shrink-wraps to
+       the ACTIVE face while the peak reserve holds the box. */
+    .dock-crossfade > .dock-face {
+        grid-area: 1 / 1;
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        will-change: opacity;
+    }
+
+    /* ACTIVE — in flow, fully painted AT REST (`opacity: 1`; `--dock-t` is a registered
+       `initial-value: 0` property, so a `var(--dock-t, 1)` at-rest read would resolve the
+       registered 0, not the fallback — the active pane would vanish). The two-child
+       opacity OVERLAP engages ONLY while the crossfade slot is mid-swap
+       (`[data-crossfading]`, below). */
+    .dock-crossfade > .dock-face.is-active {
+        position: relative;
+        inset: auto;
+        inline-size: max-content;
+        min-inline-size: 0;
+        opacity: 1;
+    }
+
+    /* LEAVING — out of flow (the entering active face sizes the box); stays painted +
+       untouchable through the dissolve (the crossfading rule below drives its fade). */
+    .dock-crossfade > .dock-face.is-leaving {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        visibility: visible;
+    }
+
+    /* THE TWO-CHILD OPACITY OVERLAP ON `--dock-t` — engaged ONLY mid-swap. The crossfade
+       slot arms `[data-crossfading]` at the swap start (cleared on settle) + writes the
+       per-face `--dock-t` spring progress (`useDockSpring`, velocity-continuous). The
+       entering face reads `opacity: var(--dock-t)` (0→1), the leaving `calc(1 -
+       var(--dock-t))` (1→0) — co-present through the overlap, no blank-plate dead-zone.
+       Higher-specificity than the at-rest rules (the extra `[data-crossfading]` attr), so
+       they win while a swap runs and hand back to `opacity: 1`/idle on settle. */
+    .dock-crossfade[data-crossfading] > .dock-face.is-active {
+        opacity: var(--dock-t);
+    }
+
+    .dock-crossfade[data-crossfading] > .dock-face.is-leaving {
+        opacity: calc(1 - var(--dock-t));
+    }
+
+    /* The content flex — the controls / glyphs / labels a face authors. The
+       orientation flips to a stacked column when the crossfade lives in a vertical
+       dock or layer group (matching the box axis). */
+    .dock-crossfade > .dock-face > .dock-face-content {
+        display: flex;
+        align-items: center;
+        gap: var(--dock-layer-gap, 0.375rem);
+        white-space: nowrap;
+        block-size: 100%;
+    }
+
+    :where(.glass-dock, .dock-layer-group).vertical
+        .dock-crossfade
+        > .dock-face
+        > .dock-face-content {
+        flex-direction: column;
+        align-items: stretch;
+        white-space: normal;
+    }
+
+    :where(.glass-dock, .dock-layer-group).vertical
+        .dock-crossfade
+        > .dock-face.is-active {
+        inline-size: auto;
+        block-size: max-content;
+    }
+
+    /* G12 — the content-wrapper clip. Lands on `.dock-face-content` ONLY (the
+       non-interactive content wrapper), NEVER on the `.dock-face` interactive run, and
+       ONLY while a SIMULTANEOUS plate collapse is in flight (`.glass-dock[data-morphing]`
+       ancestor). So a face's row that spills past the narrowing plate is clipped
+       mid-collapse WHILE hover plates overflow freely at rest (no `[data-morphing]` → no
+       clip). The clip rides the inheriting `--dock-morph-t` collapse scalar (DISTINCT
+       from the per-face `--dock-t` opacity scalar): at `--dock-morph-t: 1` (expanded)
+       `inset(0)` — no clip; toward `0` (collapsing) the trailing/​bottom remainder is
+       clipped away as the aperture narrows. Compositor-only (`clip-path`) — the
+       `proof:no-layout-animation` floor. PRM snaps the collapse, so the clip is a single
+       frame. This is the COMPOUND the synthetic prototypes never composed: a face-swap
+       crossfade coexisting with a collapse-morph clip on the same face. */
+    .glass-dock[data-morphing]
+        .dock-crossfade
+        > .dock-face.is-active
+        > .dock-face-content {
+        clip-path: inset(0 calc((1 - var(--dock-morph-t)) * 100%) 0 0);
+        will-change: clip-path;
+    }
+
+    .glass-dock.vertical[data-morphing]
+        .dock-crossfade
+        > .dock-face.is-active
+        > .dock-face-content {
+        clip-path: inset(0 0 calc((1 - var(--dock-morph-t)) * 100%) 0);
+    }
+
+    /* PRM — the opacity crossfade snaps (the spring's `respectReducedMotion` jumps
+       `--dock-t` 0→1 in one frame). The reserved box + the discrete active/leaving
+       presence stay correct (fade-keeps / transform-drops; there is no transform here). */
+    @media (prefers-reduced-motion: reduce) {
+        .dock-crossfade > .dock-face {
+            will-change: auto;
+        }
+    }
+}

package/src/styles/dock/density.css

@@ -108,7 +108,7 @@
        tile-min` is now IN the cascade (DK4-b) so the grid tile scales with the
        control + glyph; it is a proportional `calc(control-size + tile-pad)` so the
        icon-to-tile margin is ONE knob, not a per-density literal. */
-    .glass-dock[data-density="compact"] {
+    .glass-dock[data-size="sm"] {
         /* BD.W-DOCK-CORE (A11) — the OUTER pill pad floors lifted ~+50% for the generous
            warm-cream liquid breath (the sliver-pill defect). The inner
            `--dock-control-safe-inset` plate clearance is untouched (a distinct axis). */
@@ -166,7 +166,7 @@
 
     /* Comfortable density — the GlassDock default. Sits between compact
        and spacious. */
-    .glass-dock[data-density="comfortable"] {
+    .glass-dock[data-size="md"] {
         /* BD.W-DOCK-CORE (A11) — the generous liquid-pill pad: inline 0.5 → 0.75rem (+8px
            total breath), block 0.375 → 0.5rem (softer). The vertical sliver-around-40px
            becomes a soft warm-cream capsule. */
@@ -217,7 +217,7 @@
         --dock-tab-h: calc(38px * var(--dock-scale));
     }
 
-    .glass-dock[data-density="spacious"] {
+    .glass-dock[data-size="lg"] {
         /* BD.W-DOCK-CORE (A11) — the spacious rung breathes in lockstep (~+33%). */
         --dock-padding-block: calc(
             var(--dock-density-spacious-padding-block, 0.625rem) * var(--dock-scale)
@@ -267,7 +267,7 @@
        a primary surface, not a tray. Tab buttons set their own min-height so
        consumer-bumped fonts no longer drift the button height — the
        `--dock-tab-min-height` token reserves the row regardless of glyph rise. */
-    .glass-dock[data-density="audacious"] {
+    .glass-dock[data-size="xl"] {
         --dock-padding-block: calc(
             var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale)
         );
@@ -324,9 +324,9 @@
 
        It is a NAMED preset, NOT a 5th density rung — the density axis stays FOUR rungs
        (`proof:dock-unify`'s density census is unaffected). The preset is a geometry
-       OVERRIDE composing WITH a `data-density` base: `[data-preset="cockpit"]` wins the
+       OVERRIDE composing WITH a `data-size` base: `[data-preset="cockpit"]` wins the
        control-size/layer-height/chrome by source-order (this block comes AFTER the rungs),
-       so a `<GlassDock data-density="comfortable" data-preset="cockpit">` resolves the
+       so a `<GlassDock data-size="md" data-preset="cockpit">` resolves the
        cockpit geometry. An ancestor `[data-preset="cockpit"]` scope re-declares these
        tokens too (the substitution-vs-inheritance discipline) so descendant docks inherit.
 
@@ -383,11 +383,14 @@
            its control than the `:root` default (the A-9 close). The `dock-label`
            font-size is `calc(--dock-control-size * --dock-label-ratio)`; the cockpit
            tunes the ratio DOWN so a 2.75rem cockpit control carries a label sized for
-           the dense strip, not the comfortable-default proportion. */
-        --dock-label-ratio: 0.42;
+           the dense strip, not the comfortable-default proportion.
+           BI.W-DOCK-CONTROLS (§Inbound speedtest) — adopts the consumer-calibrated
+           0.275 (their measured cockpit ask; was 0.42) so the greenfield cockpit
+           matches the shipped speedtest SurveyResultDock label proportion. */
+        --dock-label-ratio: 0.275;
         /* RE-RESOLVE the density-painted glyph tokens against the cockpit
            `--dock-layer-height` (the same substitution-vs-inheritance trap the
-           `.glass-dock[data-density]` re-resolve below fixes — a `[data-preset]`
+           `.glass-dock[data-size]` re-resolve below fixes — a `[data-preset]`
            scope paints its OWN `--dock-layer-height`, so the `:root`-derived glyph
            would freeze at the fallback). Identical formula to the density re-resolve;
            only the resolution element moves so the cockpit height flows into the glyph. */
@@ -401,7 +404,7 @@
     /* BB.W-PERF-PRODUCER A′-6 — RE-RESOLVE the glyph token inside the density-painted
        scope. `--dock-icon-glyph` (offsets-sizing.css) is a RATIO of
        `--dock-layer-height`, but density.css paints `--dock-layer-height` ONLY on
-       `.glass-dock[data-density]` — the `:root` `--dock-icon-glyph` definition reads
+       `.glass-dock[data-size]` — the `:root` `--dock-icon-glyph` definition reads
        `--dock-layer-height` at `:root` (the inline fallback ladder), so it would
        FREEZE at the fallback rather than track the per-rung painted height (the SAME
        substitution-vs-inheritance trap the R5-1 sweep fixed for
@@ -412,7 +415,7 @@
        only the resolution element moves. The WCAG floor + the `--dock-icon-glyph-ratio`
        knob ride through unchanged; the `.dark-mode-toggle-button > svg` mirror reads
        the same re-resolved token so both glyphs track the density axis. */
-    .glass-dock[data-density] {
+    .glass-dock[data-size] {
         --dock-icon-glyph: max(
             calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
             var(--dock-icon-glyph-floor)
@@ -443,12 +446,12 @@
        the prior 479/719px viewport cadence as box widths (30rem ≈ 480px,
        45rem ≈ 720px at the 16px root). */
     @container dock (max-width: 29.9375rem) {
-        .glass-dock[data-density="audacious"] .dock-label {
+        .glass-dock[data-size="xl"] .dock-label {
             --dock-label-size: 14px;
         }
     }
     @container dock (min-width: 30rem) and (max-width: 44.9375rem) {
-        .glass-dock[data-density="audacious"] .dock-label {
+        .glass-dock[data-size="xl"] .dock-label {
             --dock-label-size: 15px;
         }
     }

package/src/styles/dock/dock.css

@@ -0,0 +1,199 @@
+/* dock/dock.css — the GREENFIELD three-z-layer plate SPINE (BI.W-DOCK-SPINE).
+ *
+ * THE FAM-3 dock-disease terminal cure (PASS-1 §0/§2.1/§2.2). The unanimous root
+ * cause: `.glass-dock` was SIMULTANEOUSLY the glass surface, the morph clip aperture
+ * (`overflow: clip` + `contain: layout style paint`, shell.css), AND the interactive
+ * item container — every named clip/morph defect (UF-C5/C6/C7) was a downstream
+ * compensation for that triple identity. This partial SPLITS it into three z-layers so
+ * the defects become UNREPRESENTABLE, not patched:
+ *
+ *   L0 — THE PLATE (`.dock-plate`).  ONE absolute element owning `backdrop-filter` + the
+ *        `--glass-*` glass surface + rim + grain (the shipped ladder verbatim — reads the
+ *        inheriting `--dock-surface-blur`/`--glass-tint-*` tokens the shell + adaptive-
+ *        legibility partials re-point on `.glass-dock`, so the AZ self-engage darken +
+ *        the dark-arm glow reach the plate via inheritance, ZERO re-author). Its VISIBLE
+ *        EXTENT morphs via `clip-path: inset(… )` off the ONE plate-scoped `@property
+ *        --dock-t` (paint-only, compositor-composited, ZERO endpoint measurement — self-
+ *        describing over the reserved box). It is a SIBLING of the control run, NEVER its
+ *        ancestor — so a control hover plate overhangs the plate edge UN-CLIPPED
+ *        (UF-C6/C7 unrepresentable). The drop-shadow ELEVATION stays on `.glass-dock`
+ *        (box-shadow OUTSIDE the border box would be clipped by the plate's clip-path).
+ *
+ *   L1 — THE CONTROLS (`.dock-controls`).  A normal-flow flex run OVER the plate,
+ *        `overflow: visible` BOTH axes ALWAYS. No ancestor clips it — "afford enough room
+ *        from first principles" (UF-C6) IS this layer.
+ *
+ *   L2 — TRANSIENT SURFACES.  Top-layer popovers (W-DOCK-ESCAPE) — nothing to escape FROM.
+ *
+ * ONE ENGINE, ONE SCALAR (PASS-1 §2.2). `--dock-t` is `@property`-registered `<number>`
+ * (initial 0), `inherits: false` + scoped to the PLATE — the A′-4 restyle-scope cure (a
+ * per-frame write recomputes the plate clip only, not the 10-selector control subtree).
+ *
+ * TRANSITIONAL COEXISTENCE (the interlock, forbidden-at-close). Until W-DOCK-SPRING-UNIFY
+ * re-points `useDockSpring` to write `--dock-t` directly + deletes the scalar zoo, the
+ * plate ALIASES `--dock-t` to the live `--dock-morph-t` progress (the honest bridge — a
+ * registered scalar, never a masking fallback) and the collapse insets are gated behind
+ * `--dock-plate-collapse-inset` (default `0px` → the clip is a corner-safe no-op, the box-
+ * size morph still drives the visible extent). SPRING-UNIFY sets the collapse geometry +
+ * `round`-radius tracking and the plate clip becomes the sole extent driver.
+ *
+ * @import-ed by dock.css AFTER shell.css/shell-regions.css and BEFORE morph.css, in the
+ * SAME `@layer components` — the plate BASE surface here, the collapsed↔expanded surface
+ * INTERP retargeted onto `.dock-plate` in morph.css (source-order + specificity win). */
+
+@layer components {
+    /* ── L0 — THE PLATE (the lens) ─────────────────────────────────────────────── */
+    .dock-plate {
+        position: absolute;
+        inset: 0;
+        /* Paint BELOW the in-flow control run, ABOVE the box's (empty) bg/border +
+           drop-shadow: `.glass-dock` mints a stacking context at rest (`scale: 1`,
+           shell.css), so a negative-z child stays WITHIN that context — the plate seats
+           at the bottom (glass lens), the `display: contents` control run paints over it.
+           This keeps the control LAYOUT byte-identical to HEAD (the controls stay direct
+           flex children of `.glass-dock`) with the plate added behind. */
+        z-index: -1;
+        /* The pill IS a surface — clicks on the glass between controls are absorbed by
+           the dock, NOT passed through (the reserved-footprint pass-through is the
+           TRANSPARENT MARGIN's job below, never the plate's). */
+        pointer-events: auto;
+        /* Corner rounding follows the box shape exactly (shell.css shape rules set the
+           `.glass-dock` border-radius; the plate inherits it) so the plate's bg/border/
+           backdrop round-clip to the same silhouette on every shape. */
+        border-radius: inherit;
+        /* The backdrop lens — reads the dock-scoped resolved blur the shell composes
+           (`--dock-surface-blur: var(--glass-blur-resting)`, the 8px peer-locked
+           material + its saturate companion; the `.dark .glass-dock` glow arm + the
+           `prefers-reduced-transparency` → `--glass-level: 0` bracket both reach it via
+           the inheriting token). ONE backdrop-filter in the dock — the box no longer
+           carries it (no double-blur). */
+        backdrop-filter: var(--dock-surface-blur);
+        /* The glass surface — the element-level oklab adaptive tint (the AZ.W-ADAPTIVE-
+           AUTO self-engage re-points the inheriting `--glass-tint-source`/`-strength` on
+           `.glass-dock`; the plate composes them AT THE ELEMENT so the darken-over-light
+           reaches the plate). Zero-delta at the 0% rest default. morph.css OVERRIDES this
+           with the collapsed↔expanded interp on `.glass-dock:not(.vertical) .dock-plate`. */
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-dock, var(--glass-bg-resting)),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting));
+        /* THE VISIBLE-EXTENT MORPH — paint-only clip off the ONE plate scalar. Reads
+           `--dock-t` (S2: the plate is the sole reader). Transitionally the collapse
+           insets are `0px` (the box-size morph drives the extent, shape.css) so this is a
+           corner-safe no-op that still tracks the scalar; SPRING-UNIFY sets the collapse
+           geometry + `round` radius. No `round` here yet: an inset(0) clip on the
+           border-radius-rounded plate keeps the rounded corners (they sit inside the
+           bounding box) on EVERY shape, so no fixed-radius over/under-round regression. */
+        --dock-t: var(--dock-morph-t);
+        --dock-plate-inset-inline: calc(
+            (1 - var(--dock-t)) * var(--dock-plate-collapse-inset, 0px)
+        );
+        --dock-plate-inset-block: calc(
+            (1 - var(--dock-t)) * var(--dock-plate-collapse-inset-block, 0px)
+        );
+        clip-path: inset(
+            var(--dock-plate-inset-block) var(--dock-plate-inset-inline)
+        );
+    }
+
+    /* The paper-grain overlay — MOVED off `.glass-dock::after` onto the plate (the grain
+       belongs on the glass surface, which is the plate now). Same recipe, byte-identical. */
+    .dock-plate::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background: var(--paper-clean-texture);
+        background-repeat: repeat;
+        background-size: var(--paper-texture-size);
+        opacity: var(--glass-grain-opacity);
+        pointer-events: none;
+        mix-blend-mode: overlay;
+    }
+
+    .dark .dock-plate::after {
+        mix-blend-mode: soft-light;
+    }
+
+    /* ── L1 — THE CONTROLS ─────────────────────────────────────────────────────────
+       A normal-flow run OVER the plate, `overflow: visible` BOTH axes ALWAYS. A hover/
+       press plate on an edge control overhangs the plate edge freely — NO ancestor clips
+       it, so UF-C6/C7 ("Dock hover items clip") are structurally impossible. The control
+       run inherits the box's flex layout via `display: contents` (it groups the controls
+       the SFC places without interposing a flex context of its own — the dock's own
+       `display: inline-flex` on `.glass-dock` lays the controls out). */
+    .dock-controls {
+        display: contents;
+        overflow: visible;
+        pointer-events: auto;
+    }
+
+    /* When a consumer needs the control run to be a real box (a scroll port lands here at
+       W-DOCK-OVERFLOW), it stays `overflow: visible` on the cross axis — never a clip. */
+    .glass-dock > .dock-controls {
+        overflow-x: visible;
+        overflow-y: visible;
+    }
+
+    /* ── Reserved-footprint pass-through (G3, PASS-1 §2.1) ──────────────────────────
+       A collapse-morphing dock that reserves its EXPANDED footprint out of flow (a
+       floating pill) must let click/wheel over the TRANSPARENT reserved margin fall
+       THROUGH to the page — `pointer-events: none` on the reserve wrapper, `auto` on the
+       plate + control run. Opt-in via a class-neutral `[data-reserve]` wrapper a genuine
+       reserved-footprint host (SPRING-UNIFY / OVERFLOW) sets. BI.W-DOCK-RETIRES retired the
+       `.glass-dock-frame` `display:contents` rail-escape (the fan/menu/search surfaces are
+       TOP-LAYER popovers now — W-DOCK-ESCAPE — nothing to escape from), so the reserve is a
+       plain `[data-reserve]` attribute, never the retired escape frame. */
+    [data-reserve] {
+        pointer-events: none;
+    }
+
+    [data-reserve] > .glass-dock,
+    [data-reserve] .dock-plate,
+    [data-reserve] .dock-controls {
+        pointer-events: auto;
+    }
+
+    /* ── Transform-free centering (PASS-4B ruling 2 — the SAF-1 landmine fence) ──────
+       The fixed floating dock centers `inset-inline: 0; margin-inline: auto; inline-size:
+       max-content` — NEVER `translateX(-50%)`. Load-bearing: the top-layer escape
+       (W-DOCK-ESCAPE) mis-resolves native `anchor()` through ANY transformed ancestor
+       chain, so a transform-free dock keeps that door open. GlassDock.vue's fixed class
+       chain (`fixed bottom-(--dock-pos) inset-x-0 mx-auto w-max`) resolves to this; the
+       rule is the explicit CSS witness the gate reads. A fixed/absolute element is
+       blockified (its `inline-flex` computes to `flex`), so the auto inline-margins
+       center it over its `max-content` width with no transform. */
+    .glass-dock.fixed {
+        inset-inline: 0;
+        margin-inline: auto;
+        inline-size: max-content;
+        width: max-content;
+    }
+}
+
+/* ── §Inbound U-F4 (value.js, A-class) — the desktop-PRM SNAP-TO-END-STATE ───────────
+   Under `prefers-reduced-motion: reduce` the reduced-motion cure is SNAP-TO-END-STATE,
+   NEVER freeze-at-start (WCAG 2.4.3/2.4.7/1.4.13). The EXPANDED / always-expanded dock
+   resolves its EXPANDED plate geometry STATICALLY — the plate scalar pins to its END
+   state so the clip reveals the FULL plate (every control reachable, full-width desktop
+   viewport), never the collapsed-from sliver the frozen morph clock left (HEAD's
+   `--dock-expand-t = 0` freeze). The plate-scalar pin is the GREENFIELD guarantee: when
+   W-DOCK-SPRING-UNIFY re-points the plate clip to be the sole extent driver, this arm
+   makes the PRM end-state correct BY CONSTRUCTION (independent of the JS morph seat). Not
+   inside the `@layer components` block (an `@media` at-rule sits at the stylesheet root;
+   it re-declares the `.dock-plate` scalar with the same class-specificity so it wins over
+   the transitional `--dock-t: var(--dock-morph-t)` alias under reduce). The oracle is REAL
+   GPU (2 headless false-reds on this surface distrusted — verified on Chromium+Metal). */
+@media (prefers-reduced-motion: reduce) {
+    @layer components {
+        .glass-dock.expanded .dock-plate,
+        .glass-dock.always-expanded .dock-plate {
+            --dock-t: 1;
+        }
+        .glass-dock.collapsed .dock-plate {
+            --dock-t: 0;
+        }
+    }
+}

package/src/styles/dock/fisheye.css

@@ -0,0 +1,81 @@
+/* dock/fisheye.css — the fits-branch pure-CSS Gaussian fisheye (BI.W-DOCK-OVERFLOW,
+ * G4 CLOSED with measured WebKit evidence: 60fps at 15 items, 0.058ms/write).
+ *
+ * The EXCLUSIVE-mode overflow ENHANCEMENT (PASS-4B ruling 1 — the composition break,
+ * decided). Fisheye engages IFF the row FITS (`:not([data-dock-overflow])`); a
+ * scrollable row (`[data-dock-overflow]`) runs the native scroll track (overflow.css)
+ * with fisheye OFF — they are NEVER composed (the codebase's own cross-axis clip trap
+ * makes an on-top-of-scroll hump structurally hostile; macOS magnifies because its dock
+ * never scrolls). The native scroll track is the UNIVERSAL FLOOR that ships regardless;
+ * the fisheye is OPT-IN behind `[data-dock-fisheye]` and its default-ON ship rides the
+ * visible-Metal 60fps verdict (W-DOCK-DEVICE — if the sweep misses 60fps the fisheye
+ * PARKS, the honest degrade, never a masking fallback).
+ *
+ * THE MECHANISM. One rAF-coalesced pointermove (`useDockFisheye`) writes ONE `--dock-px`
+ * (the pointer's inline position, a UNITLESS number) on the dock; each item carries a
+ * layout-time `--x` (its center, unitless — written on the RO, NOT per frame) and scales
+ * by a pure-CSS Gaussian off its distance `--d` from the pointer. `exp()`/`pow()` are
+ * Baseline 2026-06 (Safari 15.4+); `--dock-px` is `@property`-registered `<number>` so
+ * the per-frame write INTERPOLATES (`transition: --dock-px 80ms linear` eases the hump —
+ * buttery, not stair-step).
+ *
+ * HIT-BOX INVARIANT (O4). The fisheye is TRANSFORM/scale ONLY — it writes NO layout
+ * property (width/height/padding/inline-size/…), so the hit CELL holds its base geometry
+ * (`--dock-control-size` ≥ the 44px `--dock-touch-target` floor) and the fisheye can
+ * NEVER breach the touch floor. `hover: none` (coarse pointer) → flat; PRM → off.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components`. */
+
+/* The per-frame pointer scalar — REGISTERED `<number>` so it interpolates (an unregistered
+   bare `var()` would SNAP between writes; the `--fade-start`/`--dock-morph-t` registered-
+   property precedent). `inherits: true` so every item reads the ONE dock-level write.
+   `initial-value: -99999` seats the pointer "infinitely far" so at rest (no pointer) every
+   item's Gaussian resolves to ~0 → `scale: 1` (flat). @property sits at the stylesheet root
+   (not inside @layer). */
+@property --dock-px {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: -99999;
+}
+
+@layer components {
+    /* The dock hosts the interpolated pointer write (eases the hump). Only armed on the
+       opt-in fisheye dock; a plain dock never transitions `--dock-px`. */
+    .glass-dock[data-dock-fisheye] {
+        transition: --dock-px var(--dock-fisheye-duration) linear;
+    }
+
+    /* The Gaussian scale — FITS branch only (`:not([data-dock-overflow])`, the exclusive-
+       mode gate, O3) + fine-hover pointer only (a coarse/touch pointer has no hover hump —
+       `hover: none` → flat by the media gate). Each item reads its own `--x` (layout-time)
+       and the shared `--dock-px` (per-frame); `--d` is their UNITLESS difference so
+       `pow()`/`exp()` operate on `<number>`. TRANSFORM ONLY (scale) — the hit box is
+       untouched (O4). */
+    @media (hover: hover) and (pointer: fine) {
+        .glass-dock[data-dock-fisheye]:not([data-dock-overflow])
+            .dock-fisheye-item {
+            --d: calc(var(--x, 0) - var(--dock-px, -99999));
+            scale: calc(
+                1 +
+                    var(--dock-fisheye-amp, 0.6) *
+                    exp(
+                        -1 * pow(var(--d), 2) /
+                            (2 * pow(var(--dock-fisheye-sigma, 64), 2))
+                    )
+            );
+            transform-origin: center bottom;
+        }
+    }
+
+    /* PRM → OFF (the fisheye is non-essential magnification; the WCAG 2.3.3 / vestibular
+       floor). Flat scale, no transition — the item confirms interaction via its own
+       hover/press register, not the hump. */
+    @media (prefers-reduced-motion: reduce) {
+        .glass-dock[data-dock-fisheye] {
+            transition: none;
+        }
+        .glass-dock[data-dock-fisheye] .dock-fisheye-item {
+            scale: 1;
+        }
+    }
+}