@mkbabb/glass-ui 3.13.0 → 4.0.1

package/src/styles/dock/shell.css

@@ -80,7 +80,39 @@
            backdrop-filter sample does not escape the dock box (the standard nested-
            backdrop-cost mitigation; the Button-in-glass-in-dock stack re-samples the
            already-blurred buffer at each level without it). */
-        contain: paint;
+        /* BA.W-DOCK-GEOMETRY contain:paint AUDIT verdict (a) — the control-plate
+           clearance fix (the `--dock-control-safe-inset` painted-plate inset, scope
+           1) + the scroll-port cross-axis un-clip (scope 2) keep the maximal
+           hover/active control plate INSIDE the dock padding box: the inset plate is
+           centered in its cell (≥1px slack/side at hover), the cell sits flush at the
+           dock content edge, and the `--dock-padding-block` (≈6px) padding holds the
+           plate ≥7px clear of the `contain: paint` border-box edge on the block axis.
+           So the `paint` clip axis is the NON-proximate second clip box (the lane's
+           `probe-bottomdock-nocontain.png` forced-root probe proved the inner
+           scroll-port box was proximate, not this) and the `paint` axis is RETAINED
+           here — the inset + freed cross axis suffice, no containment LIFT on the
+           control-plate band. (BB.W-PERF-PRODUCER A′-4 widens the value to
+           `contain: layout style paint` — the restyle-scope axes ALONGSIDE the paint
+           clip box, see below — but never lifts `paint`.) The π readback
+           (W-DOCK-GEOMETRY-DELTA.md) records the live plate-inside-padding margin
+           number that binds this verdict. */
+        /* BB.W-PERF-PRODUCER A′-4 — the `--dock-morph-t` restyle-scope narrowing.
+           The per-frame morph scalar write recomputes the inheriting `calc()` group
+           across the dock subtree (dock.css's 10-selector `:where()` consumers); add
+           the `layout` + `style` containment axes so a scalar write recomputes
+           layout/style WITHIN the dock subtree, not up the document (the value.js A′-4
+           ~13fps restyle-cost trace). RECONCILED with the existing axes: `paint`
+           (above, the BA.W-DOCK-GEOMETRY clip box) composes — `contain: layout style
+           paint` is the union, NEVER `size` (which `container-type: inline-size` carries
+           as `inline-size` ONLY on the OPT-IN `containerName` host below; the default
+           free-floating dock must stay shrink-to-fit, so `size`/`inline-size` is
+           DELIBERATELY excluded here — adding it would re-introduce the 3.3.0 sliver
+           regression the §99 comment documents). The morph-axis `overflow: clip`
+           (the reveal aperture) + the `.glass-dock-frame` rail-escape are UNAFFECTED:
+           `layout`/`style` containment scopes RECALC, it does not establish a paint
+           clip beyond the already-present `paint` axis. The `DOCK_SPRING` clock is
+           byte-fenced (the value.js letter) — this is restyle COST, not a re-tune. */
+        contain: layout style paint;
         display: inline-flex;
         align-items: center;
         /* AW.W1 — the dock does NOT establish a default inline-size container.
@@ -184,17 +216,33 @@
        scrolls — the scroll port only engages on real over-cap content. The
        block-axis morph clip stays `data-morphing`-gated above; this is the
        AT-REST port only. Consumers set `--dock-max-block-size` per-instance to
-       anchor the column to the viewport without re-deriving the scroll plumbing. */
-    .glass-dock.vertical.always-expanded:not([data-morphing]),
-    .glass-dock.vertical.expanded:not([data-morphing]) {
+       anchor the column to the viewport without re-deriving the scroll plumbing.
+
+       BA.W-DOCK-GEOMETRY (DC-1) — the port is now GATED behind the `dock-scroll-y`
+       opt-in (`overflow="scroll"`), NOT unconditional on every `.vertical.
+       always-expanded`. THE ROOT: `overflow-y: auto` is a scroll value, and CSS
+       Overflow §3 FORCES the sibling `overflow-x: visible` to COMPUTE to `auto` —
+       so the F6 pin never survived, and EVERY at-rest vertical dock (even a
+       fit-content shell that never scrolls) paid the cross-axis inline clip,
+       slicing a control's inset plate left/right (the live π readback measured
+       `overflow-x: auto` on the grow-to-fit SidebarDock). A vertical dock that
+       genuinely needs the cap+scroll opts IN via `overflow="scroll"` (the
+       `.dock-scroll-y` port in overflow.css, the SAME plumbing the F6 comment names);
+       a grow-to-fit vertical shell stays `overflow: visible` (line 186) on BOTH axes
+       so its inset control plate paints past the track. The fit-content shell pays
+       NO cross-axis clip for zero scroll benefit — the goal criterion's "the
+       scroll-port cross-axis clip no longer fires on a fit-content shell that never
+       scrolls", honored at the geometry root. */
+    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing]),
+    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing]) {
         overflow-x: visible;
         overflow-y: auto;
         scrollbar-width: none;
         overscroll-behavior-y: contain;
     }
 
-    .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar,
-    .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar {
+    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing])::-webkit-scrollbar,
+    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing])::-webkit-scrollbar {
         display: none;
     }
 
@@ -244,16 +292,19 @@
            shell above; the cross axis stays visible there. */
         padding: var(--dock-padding-block, 0.375rem);
         border-radius: var(--radius-dock);
-        /* AX.W01 — a vertical rail is ALWAYS-EXPANDED (no collapse↔expand morph),
-           so its root padding/background/border-color never morph; the prior
-           `padding/background/border-color var(--dock-motion-*)` transition arms
-           are DELETED (a residual root CSS-transition on the morph-chrome props is
-           the second-clock smell the single-scalar rebuild retires). The block-axis
-           (height) morph is owned by the inner `.dock-layer-stack` / DockLayerGroup
-           via the `--dock-morph-t` scalar (the size `calc()` above), never a CSS
-           transition here. KEPT: the DECORATIVE hover-scale + press-squish (the
-           individual `scale`/`transform`) and the box-shadow fade — these are
-           interaction polish on the static rail, NOT the morph. */
+        /* BB.W-DOCK-MORPH-FAMILY (f) — the stale "a vertical rail is ALWAYS-EXPANDED
+           (no collapse↔expand morph)" assumption is RETIRED (it was false since
+           vertical-collapse shipped: `alwaysExpanded` defaults FALSE, so a vertical
+           dock genuinely collapses its `block-size`). The vertical plate's
+           bg/border/padding/radius now MORPH on the SAME `--dock-expand-t` scalar
+           the horizontal chrome rides (the morph.css `.glass-dock.vertical` interp +
+           padding axis-inverse + the radius arm below) — the chrome follows the
+           box-size morph, no discrete snap. NO root CSS-transition on the morph-
+           chrome props is re-added (a `transition: padding/background/border-color`
+           arm is the second-clock smell the single-scalar rebuild forbids — the
+           `--dock-expand-t` interp is the single authority). KEPT: the DECORATIVE
+           hover-scale + press-squish (the individual `scale`/`transform`) and the
+           box-shadow fade — interaction polish on the rail, NOT the morph chrome. */
         transition:
             box-shadow var(--dock-motion-standard),
             transform var(--dock-motion-resize),
@@ -289,6 +340,22 @@
         border-radius: var(--radius-xl);
     }
 
+    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL big-dock CARD radius MORPHS on the
+       SAME `--dock-expand-t` scalar the horizontal `.shape-card` rides (the radius
+       arm of the vertical chrome un-gate; it lives in shell.css beside the horizontal
+       arm, not morph.css). `--radius-pill` at expand-t 0 (collapsed), the finite
+       `--dock-card-radius` at expand-t 1 (expanded) — the radius follows the box-size
+       block morph, no discrete snap. The static `.shape-pill`/`.shape-rounded` rest
+       radii above are the rest endpoints for those shapes; this is the card shape's
+       interpolated radius (mirroring the horizontal `:not(.vertical).shape-card`). */
+    .glass-dock.vertical.shape-card {
+        border-radius: calc(
+            var(--radius-pill) +
+                (var(--dock-card-radius) - var(--radius-pill)) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
     /* AW.W3b — horizontal-root shape rules. The `shape-*` class once bound ONLY under
        the vertical surface; on a horizontal dock the prop silently no-op'd (the root
        hardwired `--radius-dock` = `--radius-pill`). These rules close that

package/src/styles/dock-controls/icon-button.css

@@ -20,10 +20,20 @@
         scale: 1;
         width: var(--dock-control-size, var(--size-icon-btn));
         height: var(--dock-control-size, var(--size-icon-btn));
-        padding: var(--dock-icon-padding, 0);
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The HIT
+           BOX stays the full `--dock-control-size` (the WCAG 2.5.5 touch floor on
+           the CELL), while the inset padding + `background-clip: content-box`
+           insets the PAINTED plate within it: the hover/active fill paints only the
+           content box (the cell minus the inset on every side), so the maximal
+           hover (×1.1) / active circle clears the cross-axis clip edge with ≥1px
+           margin — the lozenge dies at the plate diameter, not at the clip box. The
+           inset falls back to the prior `--dock-icon-padding` (0) when no dock
+           ancestor sets `--dock-control-safe-inset` (a standalone icon button). */
+        padding: var(--dock-icon-padding, var(--dock-control-safe-inset, 0));
         cursor: pointer;
         border: none;
         background: transparent;
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Foreground base routes through `--dock-fg-on-aurora` (defaults to
            `--foreground`, byte-identical to before) so a consumer floating the

package/src/styles/dock-controls/tab-button.css

@@ -2,10 +2,10 @@
    (AZ.W-CARVE partial 3 of 5; carved out of dock-controls.css).
 
    The base rule (density-keyed height knob, padding, glass hover/active/press
-   cohort), the PRIMARY tier (the dock extension over `@utility btn-audacious` —
-   structural shell + the `--phase-color` disco-grain hover radial + the
-   `[data-phase]` backplate halo), and the SECONDARY tier (the quieter
-   edge-light/edge-shadow cross-control comma-group over tab + icon button).
+   cohort), the PRIMARY tier (the structural shell — taller min-height + wider
+   padding + a stronger base tint; the disco grain/halo RETIRED at BA.W-GLASS-CAL,
+   it now inherits the base glass hover register), and the SECONDARY tier (the
+   quieter edge-light/edge-shadow cross-control comma-group over tab + icon button).
    Opens its OWN `@layer components`; @import-ed after dark-mode-toggle.css. */
 
 @layer components {
@@ -29,6 +29,14 @@
         padding-block: var(--dock-tab-padding-block, 0.375rem);
         border: none;
         background: transparent;
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The tab's
+           OWN padding already insets a content box within the row-locked border box;
+           `background-clip: content-box` realizes that as a PAINTED-plate inset, so
+           the hover (×1.1) / active pill clears the cross-axis clip edge with margin
+           — the same plate-inset-within-cell principle the icon-button consumes via
+           `--dock-control-safe-inset`. The text + min-height keep the box at the row;
+           only the painted fill insets (no box growth, no glyph reflow). */
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Default font-size carries through to text-only tab content; consumers
            wrapping content in an explicit type utility (e.g. `text-hero`,
@@ -86,91 +94,24 @@
 
     /* Tier — primary ────────────────────────────────────────────
      *
-     * Per W2.7 §9, §12, §13, §17. The primary tier composes three at-rest
-     * marks (top-highlight, bottom under-shadow, baseline glass) with three
-     * disco accents on hover (specular swap, sparkle sweep, disco-grain).
-     *
-     * Reservation: disco fires on hover only. At rest the button reads as
-     * a Vignelli-restrained composed glass surface. The `--phase-color`
-     * cascade (provided by `<InstrumentChassis>` via `data-phase`) tints
-     * the disco-grain radial only on hover; idle is neutral.
-     *
-     * K.W6 Lane B — the canonical disco-grain + sparkle-sweep + specular
-     * recipe lifted to `@utility btn-audacious` (utilities.css). The Vue
-     * <DockTabButton> attaches `btn-audacious` automatically when the
-     * consumer passes `data-tier="primary"`. The dock-local rules below
-     * are STRICTLY the dock extension: structural shell (padding, base
-     * surface tint, min-height) + phase-tint extensions (hover radial
-     * uses `--phase-color`, plus the `[data-phase]` `::before` halo).
+     * BA.W-GLASS-CAL (H2a) — the disco COLLAPSED. The primary tier was a SECOND
+     * disco surface: it composed `@utility btn-audacious` (auto-attached by
+     * <DockTabButton> on `data-tier="primary"`) PLUS a dock-local phase-grain
+     * (the `--glass-grain-opacity-disco` + `--paper-clean-texture`/`--phase-color`
+     * radial hover) PLUS a `[data-phase]` `::before` rest-halo. With the disco
+     * retired, the primary tier keeps ONLY its STRUCTURAL shell (taller min-height,
+     * wider padding, the slightly-stronger base tint that distinguishes it from the
+     * secondary tier) and inherits the plain de-red'd dock-control glass hover
+     * register from the base `.dock-tab-button` rule above (bg → `--dock-control-
+     * hover-bg`, scale → `--scale-hover-dock`, the specular gleam — the SAME register
+     * `.dock-icon-button` speaks). No grain, no phase-radial, no rest-halo. The
+     * <DockTabButton> auto-attach of `btn-audacious` is removed (the utility is gone).
      */
     .dock-tab-button[data-tier="primary"] {
         --dock-tab-min-height: 4rem;
         padding-inline: 1.5rem;
         background: color-mix(in srgb, var(--card) 60%, transparent);
         color: var(--foreground);
-
-        /* Phase-tint hover override — same disco-grain composition as
-         * `btn-audacious`, but the radial uses `--phase-color` (instrument-
-         * cluster axis) instead of the canonical `--primary`. The `--paper-
-         * clean-texture` overlay and `--glass-specular` shadow stack are
-         * inherited from the underlying `btn-audacious` utility. */
-        /* AX.W52 D19 — the phase-tint hover radial DEMOTED: the prior
-         * `ellipse at 30% 30%` at 18% was a loud top-LEFT corner hotspot. Toned to
-         * 8% and the anchor shifted off the hard corner toward a softer top-biased
-         * ellipse (`40% 25%`) with a tighter `transparent 55%` falloff, so it reads
-         * as a surface lift rather than a corner glow — the disco hover identity
-         * survives, the egregious corner bloom does not. */
-        &:hover:not(:disabled) {
-            --glass-grain-opacity: var(--glass-grain-opacity-disco, 0.08);
-            background-image:
-                var(--paper-clean-texture),
-                radial-gradient(
-                    ellipse at 40% 25%,
-                    color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    ),
-                    transparent 55%
-                );
-            background-blend-mode: overlay, normal;
-            background-size: var(--paper-texture-size), auto;
-        }
-
-        /* Q.W3.A.4 — phase-tint backplate halo at the pill wrapper.
-         *
-         * An inner glyph wrapper's own halo would be clipped by the pill's
-         * `overflow: hidden` and never escape the glyph box. This `::before`
-         * lifts the phase-tint to the pill itself so the glow composes with the
-         * whole CTA. Scoped to active phases — at idle / ready the pill stays
-         * neutral and inherits the W2.7 reservation ("disco fires on hover
-         * only"). */
-        /* AX.W52 D19 — the REST phase-halo `::before` (fires during a speedtest run
-         * on the most prominent dock control) DEMOTED on the same axis as the hover
-         * radial: 18%→8%, the hard `30% 30%` corner shifted to a softer `40% 25%`
-         * top-biased ellipse with a tighter `transparent 55%` falloff, and the
-         * `opacity: 1` dropped to 0.5 so the persistent run-time halo is a subtle
-         * surface lift, not a corner bloom that washes the pill for the whole run. */
-        &[data-phase]:not([data-phase="ready"]):not([data-phase="idle"])::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            background: radial-gradient(
-                ellipse at 40% 25%,
-                color-mix(
-                        in srgb,
-                        var(--phase-color, var(--foreground)) 8%,
-                        transparent
-                    )
-                    0%,
-                transparent 55%
-            );
-            pointer-events: none;
-            z-index: -1;
-            opacity: 0.5;
-            transition: opacity var(--duration-fast) var(--ease-standard);
-        }
     }
 
     /* Tier — secondary ──────────────────────────────────────────

package/src/styles/dock-controls/triggers.css

@@ -26,6 +26,13 @@
         cursor: pointer;
         border: none;
         background: transparent;
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). As on the
+           tab button: the trigger's OWN padding insets a content box within the
+           row-locked border box, and `background-clip: content-box` realizes that
+           as a PAINTED-plate inset so the hover (×1.1) / open pill clears the
+           cross-axis clip edge — the same plate-inset-within-cell principle the
+           icon-button consumes via `--dock-control-safe-inset`. No box growth. */
+        background-clip: content-box;
         border-radius: var(--dock-control-radius, var(--radius-pill));
         /* Shares the dock-icon-button legibility base (`--dock-fg-on-aurora`). */
         color: color-mix(

package/src/styles/dock.css

@@ -41,6 +41,7 @@
 @import "./dock/layer-group.css";
 @import "./dock/overflow.css";
 @import "./dock/rail-extend.css";
+@import "./dock/section.css";
 @import "./dock/morph-bridge.css";
 
 /* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
@@ -66,6 +67,38 @@
     initial-value: 0;
 }
 
+/* BB.W-DOCK-MORPH-FAMILY (e) — the `@property`-registered dock-scale axis. The
+   dock-scale cascade is `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale,
+   1))` (tokens/sizing.css). UNregistered, that `calc()` substitutes ONCE at `:root`
+   against the `:root` identity `--dock-local-scale: 1`, so a consumer-scope
+   `--dock-local-scale` override is INHERITED but never RE-EVALUATED — the dock keeps
+   `--dock-scale: calc(1 * 1)` and stays at the unscaled base (the 3rd recurrence of
+   the AX.W55 substitution-vs-inheritance trap; the documented-but-broken `:root`
+   preset). Registering `--dock-local-scale` as an INHERITING `@property <number>`
+   makes a registered inheriting custom property re-substitute PER-ELEMENT, so a
+   `--dock-local-scale` override on ANY dock scope re-evaluates the `calc()` at that
+   scope and threads the whole geometry cascade (box·pad·gap·tab·tile·glyph) down in
+   lockstep — the `:root` preset made real (the `@property --dock-morph-t` house
+   idiom above is the precedent). `--dock-scale` itself is ALSO registered (the
+   derived axis) so its `calc()` re-resolves per-element when `--dock-local-scale`
+   shifts. ADDITIVE ONLY: `initial-value: 1` is the identity, so at the default
+   `--dock-local-scale: 1` the resolved `--dock-scale` is byte-IDENTICAL to HEAD (no
+   rung re-tune); the `@media (pointer: coarse)` re-declare (overflow.css) STAYS the
+   `:root`-equivalent re-resolve, and this registration is the complementary
+   non-`:root`-scope thread. DOCK_SPRING is untouched (this is a token registration,
+   not a clock). */
+@property --dock-local-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
+@property --dock-scale {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 1;
+}
+
 @layer components {
     :where(
         .glass-dock,
@@ -81,10 +114,12 @@
         --dock-motion-fast: var(--duration-fast) var(--ease-standard);
         --dock-motion-standard: var(--duration-normal) var(--ease-standard);
         /* AT.W6-dock-c — the FLIP-fallback timing. `--dock-resize-spring` (the
-           `--spring-snappy` linear()) is the single source curve the native
+           `--spring-dock` linear()) is the single source curve the native
            View-Transition path ALSO consumes, so the morph is timing-identical
-           across engines. */
-        --dock-motion-resize: var(--duration-normal) var(--dock-resize-spring);
+           across engines. BA.W-GLASS-CAL Unit 3 — the duration leg re-times off
+           the generic `--duration-normal` (0.3s) onto `--spring-dock-duration`
+           (0.28s, the dock spring's OWN 2%-band envelope settle). */
+        --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring);
     }
 
     /* Shared four-state contract — the focus-visible ring + disabled paint are

package/src/styles/drawer.css

@@ -1,21 +1,35 @@
 /*
- * drawer.css — Detented bottom-sheet grammar (AN.W3).
+ * drawer.css — Detented bottom-sheet grammar (AN.W3; BB.W-DRAWER-ABROGATE).
  *
- * vaul-vue owns the snap math (the spring transform between snap-points, the
- * drag-resistance overshoot, the `data-vaul-*` state attributes). glass-ui owns
- * the LOOK: the glass sheet surface, the rounded peek handle, the snap-stop
- * indicator rules, and the drag-resistance feel-tuning. This file is the
- * substrate so a consumer mounting `<Drawer mode="live-behind">` does not
- * re-author the three detents from scratch.
+ * THE HOUSE owns the snap math end-to-end now (vaul-vue ABROGATED). The Drawer
+ * family composes the reka `DialogRoot`/`DialogPortal`/`DialogContent` headless
+ * substrate (the SAME vueuse-free substrate every other compound wrapper binds),
+ * and the snap settle is driven by ONE house `SpringProgress` on the `DRAWER_SNAP`
+ * register (`useDrawerSnap.ts`, the §6 dock-morph `linear()` clock — NOT a bespoke
+ * `cubic-bezier(.32,.72,0,1)` transition; that was vaul's). The engine writes the
+ * `--glass-drawer-t` snap-fraction scalar (0 = closed/offscreen, 1 = the fullest
+ * detent) the content root reads as its translate; this file owns the LOOK: the
+ * glass sheet surface, the rounded peek handle, the snap-stop indicator rules, and
+ * the detent-fill geometry. This file is the substrate so a consumer mounting
+ * `<Drawer mode="live-behind">` does not re-author the three detents from scratch.
  *
  * Token-first — every visual axis reads a custom property. Consumers retune
  * the sheet by overriding the rungs below, never by editing this file.
  */
 
+/* The snap-fraction scalar the house `useDrawerSnap` engine writes per frame. The
+ * content root's inline `transform` reads it (DrawerContent.vue) — typed so the
+ * default (1 = fully open) keeps a no-snap content-sized sheet seated open. */
+@property --glass-drawer-t {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 1;
+}
+
 :root {
     /* Detent grammar knobs — overridable per-consumer */
     --drawer-handle-w: 2.25rem;
-    --drawer-handle-h: 0.3125rem; /* 5px — vaul's hit-target rhythm */
+    --drawer-handle-h: 0.3125rem; /* 5px — the iOS grip hit-target rhythm */
     --drawer-handle-color: var(--muted-foreground);
     --drawer-handle-opacity: 0.45;
     --drawer-handle-opacity-active: 0.85;
@@ -23,14 +37,15 @@
 }
 
 /*
- * The sheet surface. Replaces the prior inline-Tailwind triplet on
- * DrawerContent.vue so the glass tier + the snap transform feel live in one
+ * The sheet surface. The glass tier + the snap-translate feel live in one
  * token-driven place. The fixed/inset/z-index layout stays here too.
  *
- * NOTE: vaul-vue sets `transition: transform .5s cubic-bezier(.32,.72,0,1)` and
- * `touch-action: none` on `[data-vaul-drawer]` from its injected stylesheet —
- * that IS the drag-resistance spring curve. We do NOT override `transition` so
- * the snap feel is preserved; we layer border-radius + glass surface on top.
+ * NOTE: the snap motion is the house `useDrawerSnap` `SpringProgress` writing
+ * `--glass-drawer-t`, which the content root's inline `transform` reads (the §6
+ * doctrine — ONE motion vocabulary, no `transition: transform` curve injected on
+ * `[data-glass-drawer]`). `touch-action: none` on the handle keeps the drag gesture
+ * from scrolling the page. We layer border-radius + glass surface on top of the
+ * spring-driven translate.
  */
 .glass-drawer {
     position: fixed;
@@ -59,24 +74,68 @@
 }
 
 /*
- * Detented (snap-point) sheets fill the viewport height. vaul positions the
- * sheet by translating it DOWN by `innerHeight - (fraction * innerHeight)` —
- * so for a snap fraction to read as that fraction OF THE VIEWPORT, the sheet's
- * top must sit at the viewport top when fully open (offset 0). A `height: auto`
- * content sheet would instead translate off-screen. vaul tags the snap case via
- * `[data-vaul-snap-points=true]`; we fill height there and let the content
+ * BA.W-SURFACE-AXIS — the shared {glass·veil·opaque} surface decoration ON TOP of
+ * the `.glass-drawer` recipe. `.glass-drawer` is UNLAYERED (this file), so the
+ * `@layer components` `[data-surface]` seam in glass/surface-axis.css would LOSE
+ * to it (an unlayered rule always beats a layered one — the AZ.W-DOCK-RAIL
+ * cascade-win trap). The fix is the SAME-LAYER carve: these `.glass-drawer[data-
+ * surface=…]` rules sit unlayered alongside `.glass-drawer` and win by specificity
+ * (attr+class > class), composing the SAME veil/opaque deltas the shared seam
+ * declares — NO `glass-drawer`-local recipe fork (they read the same `--veil-*` /
+ * `--glass-level` machinery). The `glass` rung is the identity (no rule).
+ */
+.glass-drawer[data-surface="veil"] {
+    --veil-bg: color-mix(
+        in oklab,
+        var(--glass-bg-quiet),
+        var(--glass-tint-source) var(--glass-tint-strength)
+    );
+    --veil-blur: var(--glass-blur-quiet);
+    background: var(--veil-bg);
+    backdrop-filter: var(--veil-blur);
+    -webkit-backdrop-filter: var(--veil-blur);
+    border: none;
+    box-shadow: none;
+}
+
+.glass-drawer[data-surface="opaque"] {
+    /* The solid-card escape. The `.glass-drawer` background reads the `:root`-baked
+       `--glass-bg-overlay` token (which substitutes `--glass-level` at :root), so a
+       per-element `--glass-level: 0` cannot re-resolve it — the substitution-vs-
+       inheritance trap (mirrors surface-axis.css). Set the SOLID plate AT THE
+       ELEMENT; still flip the level/tint knobs for a nested glass descendant. */
+    --glass-level: 0;
+    --glass-tint-strength: 0%;
+    /* The SOLID --card plate via the house color-mix idiom (solid --card, expressed
+       as the cohesion-sanctioned mix the token ladder speaks — NOT the bare
+       `var(--card)` the cohesion D1 check forbids for the always-on drawer plate;
+       this is the EXPLICIT opt-out behind `surface="opaque"`, not the default). */
+    background: color-mix(in srgb, var(--card), transparent 0%);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+}
+
+/*
+ * Detented (snap-point) sheets fill the viewport height. The house engine positions
+ * the sheet by translating it along its drag axis by `(1 - --glass-drawer-t) * 100%`
+ * (DrawerContent.vue's inline transform) — so for a snap fraction to read as that
+ * fraction OF THE VIEWPORT, the sheet's top must sit at the viewport top when fully
+ * open (translate 0). A `height: auto` content sheet would instead translate
+ * off-screen. The content root tags the multi-detent case via
+ * `[data-glass-drawer-snap-points=true]`; we fill height there and let the content
  * scroll inside.
  */
-.glass-drawer[data-vaul-snap-points="true"] {
+.glass-drawer[data-glass-drawer-snap-points="true"] {
     height: 100%;
     max-height: 100%;
     margin-top: 0;
 }
 
-/* Live-behind direction variants — vaul tags the root with the drag axis.
-   Bottom is the default + the F-side pattern; the others ride the same surface
-   so a top/side live-behind sheet inherits the grammar. */
-.glass-drawer[data-vaul-drawer-direction="top"] {
+/* Direction variants — the content root tags itself with the drag axis
+   (`data-glass-drawer-direction`). Bottom is the default; the others ride the same
+   surface so a top/side sheet inherits the grammar. The side-lens (left/right) is
+   the BB-2 full-slide axis — it pins to its edge + fills the cross axis. */
+.glass-drawer[data-glass-drawer-direction="top"] {
     bottom: auto;
     top: 0;
     margin-top: 0;
@@ -86,11 +145,35 @@
     border-radius: 0 0 var(--radius-panel) var(--radius-panel);
 }
 
+.glass-drawer[data-glass-drawer-direction="left"],
+.glass-drawer[data-glass-drawer-direction="right"] {
+    inset-inline: auto;
+    inset-block: 0;
+    height: 100%;
+    max-height: 100%;
+    width: min(24rem, 92vw);
+    margin: 0;
+    border: 1px solid var(--glass-border-overlay);
+}
+
+.glass-drawer[data-glass-drawer-direction="left"] {
+    left: 0;
+    border-left: 0;
+    border-radius: 0 var(--radius-panel) var(--radius-panel) 0;
+}
+
+.glass-drawer[data-glass-drawer-direction="right"] {
+    right: 0;
+    border-right: 0;
+    border-radius: var(--radius-panel) 0 0 var(--radius-panel);
+}
+
 /*
  * Peek handle — the rounded grip at the top of the sheet. It is the visual
- * affordance the user drags to cycle peek → half → full. vaul-vue intensifies
- * the grip on `:active` via its own `[data-vaul-handle]` rules when the consumer
- * uses `<DrawerHandle>`; this is the glass-ui default grip for the common case.
+ * affordance the user drags to cycle peek → half → full. The house snap engine
+ * (`useDrawerSnap`) binds the pointer-drag gesture directly on this handle (the
+ * `[data-glass-drawer-handle]` element) and flags it `[data-dragging]` while a drag
+ * is in flight, so the grip intensifies "live" during the gesture.
  */
 .glass-drawer-handle {
     flex-shrink: 0;
@@ -112,10 +195,11 @@
         width var(--duration-fast) var(--ease-out);
 }
 
-/* While the sheet is being dragged vaul exposes the gesture; intensify the grip
-   so the affordance reads as "live". `:active` covers the pointer-held case for
-   the default grip; consumers using vaul's `<DrawerHandle>` get its own active
-   rule in addition. */
+/* While the sheet is being dragged the house engine flags the handle
+   `[data-dragging]`; intensify the grip so the affordance reads as "live".
+   `:active` covers the pointer-held case + `[data-dragging]` covers the captured
+   drag; the hover lift is the rest affordance. */
+.glass-drawer-handle[data-dragging] .glass-drawer-grip,
 .glass-drawer-handle:active .glass-drawer-grip,
 .glass-drawer:hover .glass-drawer-grip {
     opacity: var(--drawer-handle-opacity-active);
@@ -128,7 +212,8 @@
  * `.glass-drawer-snap-rule` to a separator element inside the sheet; it reads as
  * the detent boundary line without competing with the content. This is the
  * "snap-stop visual indicator" the spec asks for, expressed as an opt-in class
- * (the detents themselves are positional, owned by vaul; the RULE is the look).
+ * (the detents themselves are positional, owned by the house snap engine; the
+ * RULE is the look).
  */
 .glass-drawer-snap-rule {
     height: 1px;
@@ -137,8 +222,11 @@
     background-color: var(--drawer-snap-rule-color);
 }
 
-/* Reduced-motion — vaul's transform transition is its own; we only suppress the
-   grip's affordance animation so the handle does not pulse for PRM users. */
+/* Reduced-motion — the house `SpringProgress` snaps the detent deterministically
+   under `prefers-reduced-motion: reduce` (its `respectReducedMotion` jumps the
+   `--glass-drawer-t` scalar to target in one frame, zero motion frames); here we
+   only suppress the grip's affordance animation so the handle does not pulse for
+   PRM users. */
 @media (prefers-reduced-motion: reduce) {
     .glass-drawer-grip {
         transition: none;