@mkbabb/glass-ui 4.0.1 → 4.2.0

package/src/styles/dock/cta-seat.css

@@ -0,0 +1,87 @@
+/* dock/cta-seat.css — the `[data-cta-pending]` CTA-receive landing SEAT (BC.W-AX-DOCK-
+ * CTA-SEAT; the speedtest-AX BC-W2 + BC-W3 fold).
+ *
+ * THE MOVE. `useDockCtaReceive` (the BB.B2 morph half) flies an EXTERNAL CTA onto a
+ * dock control's rect; this partial makes the control it lands on a SEAT that was
+ * visibly RESERVED for it. While the CTA is in flight (or pending), the target dock
+ * control carries `data-cta-pending` (written by `setPending()` on the
+ * `useDockCtaReceive` return): the control shows a quiet dim GHOST (a placeholder
+ * awaiting its arrival) AND reserves its resting footprint from frame 0 so the dock
+ * box does NOT jump when the CTA lands. On `clearPending()` (the default hand-off
+ * fires it as the CTA lands) the attribute is removed and the seat REVEALS its real
+ * content with a plain `transition: opacity` FLIP.
+ *
+ * THE NO-BOX-JUMP (T2). The reserve is a STATIC `min-inline-size`/`min-block-size`
+ * keyed off `--dock-control-size`/`--dock-layer-height` (the control's resting box) —
+ * a ONE-TIME reservation set the instant `setPending()` fires, NEVER an animated
+ * dimension (the W-DESKTOP-RESERVE static-frame-0 precedent). The dock's shrink-wrap
+ * is already at the seated width, so the CTA lands into an already-sized hole; the box
+ * never grows on reveal. `proof:no-layout-animation` holds — no `transition: width`/
+ * animated min-* anywhere here.
+ *
+ * THE FLIP REVEAL (T3). The seat is a CONTENT swap on an already-sized box, NOT a box
+ * morph — so the reveal is a PLAIN `transition: opacity` on the `--ease-out`
+ * no-overshoot register (a content reveal must not overshoot — W-MOTION-CANON P2). It
+ * does NOT ride the dock collapse/expand morph-stagger (`--dock-expand-t`/the child
+ * stagger); re-using the morph clock would read as a janky stagger-restart on a
+ * content reveal.
+ *
+ * RECT-DRIVEN, LAYOUT-AGNOSTIC (Gate-1 Q5). The seat targets `[data-cta-pending]` on
+ * ANY dock control — it makes NO assumption about a skip-arrow affordance (a
+ * consumer-side functional skip control that may or may not be present). The reserve
+ * is the control's own resting footprint; the seat works with or without arrows.
+ *
+ * COMPOSITOR-ONLY. `setPending`/`clearPending` toggle the data attribute; this partial
+ * paints with `opacity` + the static reserve. No layout property is animated. The
+ * `--cta-seat-*` knobs are the consumer retune seam.
+ *
+ * @import-ed by dock.css in the dock partial cascade, in the SAME `@layer components`. */
+
+@layer components {
+    /* The armed seat — the control is RESERVED. The static min-*-size locks the resting
+       footprint from frame 0 (the no-box-jump); the dim opacity is the placeholder
+       ghost awaiting the CTA's arrival. The `transition: opacity` is declared HERE (not
+       only on the cleared state) so the GHOST→content reveal is a smooth fade in BOTH
+       directions on the SAME compositor-safe register — the box is already sized, only
+       the opacity moves. */
+    [data-cta-pending] {
+        /* The STATIC resting-geometry reserve (T2) — a one-time min-*-size off the
+           control's own resting box. NEVER transitioned (an animated dimension
+           CLS-storms — the proof:no-layout-animation floor). */
+        min-inline-size: var(--dock-control-size, var(--size-icon-btn));
+        min-block-size: var(
+            --dock-layer-height,
+            var(--dock-control-size, var(--size-icon-btn))
+        );
+
+        /* The dim GHOST placeholder — the control awaits its arrival (T3). */
+        opacity: var(--cta-seat-ghost-opacity, 0.35);
+
+        /* The FLIP reveal register — a PLAIN opacity transition on --ease-out
+           (no-overshoot). Default duration tracks the snappy spring envelope so the
+           reveal reads as the same family as the morph that lands the CTA. */
+        transition: opacity
+            var(--cta-seat-reveal-duration, var(--spring-snappy-duration))
+            var(--ease-out);
+    }
+
+    /* The seated CONTENT also dims while pending — the icon/label is the thing that
+       fades back in on reveal. Direct-child targeting keeps the seat layout-agnostic
+       (it does not name a control class — Q5). */
+    [data-cta-pending] > * {
+        opacity: var(--cta-seat-ghost-opacity, 0.35);
+        transition: opacity
+            var(--cta-seat-reveal-duration, var(--spring-snappy-duration))
+            var(--ease-out);
+    }
+
+    /* PRM — the reveal is an INSTANT opacity swap (the vestibular floor; the seat snaps
+       to its content, zero transition frames). The reserve is unchanged (it is static,
+       not a motion). The gesture completes; the animation is off. */
+    @media (prefers-reduced-motion: reduce) {
+        [data-cta-pending],
+        [data-cta-pending] > * {
+            transition: none;
+        }
+    }
+}

package/src/styles/dock/density.css

@@ -33,6 +33,66 @@
    consumers). NEVER re-point this AT --dock-control-safe-inset (the de-overload). */
 :root {
     --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem);
+
+    /* ── BC.W-DOCK-ARBITRARY — the arbitrary-shape morph tokens ─────────────────
+       The dock morph is no longer locked to circle↔pill. The shape is now a SCALAR
+       PARAMETER: a `--dock-shape-from`/`--dock-shape-to` corner-radius pair the chrome
+       radius arm interpolates on `--dock-morph-t`, an OPT-IN `--dock-shape-clip-from`/
+       `--dock-shape-clip-to` clip-path silhouette pair (compositor-only, no layout),
+       and a `--dock-morph-max-stretch` squish cap. The library DEFAULTS preserve the
+       collapsed-perfect-circle ↔ expanded-pill identity (CLAUDE.md `aspect-ratio: 1` +
+       `--radius-dock` 9999px), so the common case needs no consumer override; a consumer
+       sets these to morph to an arbitrary silhouette (a wide bar, a teardrop, a tall
+       rail). Clean break (MEMORY: no backwards compat) — the prior hardcoded circle/pill
+       endpoints become these token DEFAULTS, no `--dock-radius-legacy`. */
+
+    /* The corner profile span — the `from`-radius (the collapsed perfect circle, a
+       9999px pill that rounds the height-pinned square into a circle) ↔ the `to`-radius
+       (the expanded pill, `--radius-dock`). Consumer-targetable: set either to any
+       radius to morph to an arbitrary corner profile. */
+    --dock-shape-from: var(--radius-dock, 9999px);
+    --dock-shape-to: var(--radius-dock, 9999px);
+
+    /* The arbitrary-silhouette span — an OPT-IN `clip-path` pair (a compositor property,
+       NO layout). DEFAULT-OFF: `none`/`none` means the rectangle/pill morph (the common
+       case) needs no clip. A consumer opts into a teardrop/blob silhouette by setting the
+       clip-from/to to two `inset()`/`path()`/`shape()` values the morph LERPS between on
+       `--dock-morph-t`. */
+    --dock-shape-clip-from: none;
+    --dock-shape-clip-to: none;
+
+    /* The squish cap — the LOW volume-preserving `--stretch` ceiling for the shape-morph
+       deformation, mirroring the tab-indicator's iOS-segmented register. BD.W-ANIM-IOS27-
+       TUNE lifts 1.08 → 1.14 so the box-morph reads as FLOWING MASS (the "MORPH MORE on
+       move" mandate; the dock is the most-visible morph surface) — a fast morph swells
+       the plate then caps, a gooey settle, never a taffy-pull (≤1.2 anti-taffy bar). */
+    --dock-morph-max-stretch: 1.14;
+
+    /* ── BC.W-LIQUID-MORPH — the reserve floor (the white morph can never paint) ──
+       The morph box reserves `inline-size`/`block-size: max(var(--dock-morph-to),
+       var(--dock-morph-min))` (layers.css). A degenerate `to:0` measurement (the
+       BA-VJS-1 nested-group race, glass-dock-codebase.md §2.2) would otherwise reserve
+       a ZERO-width footprint → `overflow: clip` blanks the content → the white/invisible
+       morph the user reports. The floor seats it at the collapsed-pill minimum (~44px,
+       the WCAG touch floor / `--dock-control-floor`), so a missed measurement degrades to
+       "visible at the floor," never "white." A SAFETY NET: on every healthy measurement
+       the `max()` resolves to the real `to` (inert above the floor); it fires ONLY on the
+       degenerate race. Density-scaled, riding `--dock-scale` transitively. */
+    --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px));
+
+    /* ── BC.W-DOCK-SEARCH — the collapse-on-scroll trigger-points ─────────────────
+       The dock-search optional shrink-on-scroll (composing useScrollChrome — the
+       native dual-path reader, persistent-default) reads these two tunable px
+       trigger-points: the shrink BEGINS at `--dock-search-shrink-start` of scroll and
+       reaches the compact form at `--dock-search-shrink-end` (the words
+       `scrollInflectionPoint` generalized into dock-scoped tokens). They ride
+       `--dock-scale` transitively (a coarse-pointer dock's trigger-points scale with
+       its geometry), and a consumer retunes the inflection in ONE write. NOTE the
+       PERSISTENT default — these are inert unless the consumer opts in via
+       `collapseOnScroll`; the morph itself NEVER fires on a passive scroll (the
+       iOS-27 lesson — the scroll path is the distinct compositor shrink). */
+    --dock-search-shrink-start: calc(0rem * var(--dock-scale));
+    --dock-search-shrink-end: calc(7.25rem * var(--dock-scale));
 }
 
 @layer components {
@@ -49,11 +109,14 @@
        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"] {
+        /* 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). */
         --dock-padding-block: calc(
-            var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale)
+            var(--dock-density-compact-padding-block, 0.375rem) * var(--dock-scale)
         );
         --dock-padding-inline: calc(
-            var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale)
+            var(--dock-density-compact-padding-inline, 0.5rem) * var(--dock-scale)
         );
         --dock-control-size: max(
             calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)),
@@ -104,11 +167,14 @@
     /* Comfortable density — the GlassDock default. Sits between compact
        and spacious. */
     .glass-dock[data-density="comfortable"] {
+        /* 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. */
         --dock-padding-block: calc(
-            var(--dock-density-comfortable-padding-block, 0.375rem) * var(--dock-scale)
+            var(--dock-density-comfortable-padding-block, 0.5rem) * var(--dock-scale)
         );
         --dock-padding-inline: calc(
-            var(--dock-density-comfortable-padding-inline, 0.5rem) * var(--dock-scale)
+            var(--dock-density-comfortable-padding-inline, 0.75rem) * var(--dock-scale)
         );
         --dock-control-size: max(
             calc(
@@ -152,11 +218,12 @@
     }
 
     .glass-dock[data-density="spacious"] {
+        /* BD.W-DOCK-CORE (A11) — the spacious rung breathes in lockstep (~+33%). */
         --dock-padding-block: calc(
-            var(--dock-density-spacious-padding-block, 0.5rem) * var(--dock-scale)
+            var(--dock-density-spacious-padding-block, 0.625rem) * var(--dock-scale)
         );
         --dock-padding-inline: calc(
-            var(--dock-density-spacious-padding-inline, 0.75rem) * var(--dock-scale)
+            var(--dock-density-spacious-padding-inline, 1rem) * var(--dock-scale)
         );
         --dock-control-size: max(
             calc(
@@ -246,6 +313,91 @@
         );
     }
 
+    /* ── BC.W-AX-DOCK-COCKPIT — the `cockpit` geometry PRESET ─────────────────────
+       The tight instrument-cockpit register: a FIXED `2.75rem` control floor (the
+       Gate-1 Q6 fixed value — NOT a range) with COMPACT-tight chrome (the tightest
+       padding/gap/tile-pad, distinct from `spacious`'s LOOSE chrome at the SAME
+       2.75rem control). It closes the dock-oversize chronic (speedtest A-9): a
+       consumer opts into a dense, proportioned instrument strip — `2.75rem` control,
+       compact chrome, the label tracking the control by `--dock-label-ratio` (so the
+       label never reads OVERSIZE on the tight pill).
+
+       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
+       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
+       cockpit geometry. An ancestor `[data-preset="cockpit"]` scope re-declares these
+       tokens too (the substitution-vs-inheritance discipline) so descendant docks inherit.
+
+       The control floor rides the SAME `* var(--dock-scale)` thread + the `max(…,
+       --dock-control-floor)` WCAG 2.5.5 clamp as the rungs — the cockpit is tight, but
+       the coarse-pointer touch target NEVER drops below the 44px floor. */
+    .glass-dock[data-preset="cockpit"] {
+        /* The FIXED 2.75rem control floor (Q6) — the cockpit register, riding
+           `--dock-scale` + the 44px clamp. NOT a `clamp(2.5rem, …, 3rem)` range. */
+        --dock-control-size: max(
+            calc(2.75rem * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-height: max(
+            calc(2.75rem * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        /* The TIGHT chrome — the COMPACT-rung tightness (the cockpit is a dense
+           instrument strip, NOT the spacious loosening). This is the distinction
+           from `spacious` (same control, LOOSE chrome). */
+        --dock-padding-block: calc(
+            var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale)
+        );
+        --dock-padding-inline: calc(
+            var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale)
+        );
+        --dock-layer-gap: calc(
+            var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
+        );
+        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset, in lockstep with
+           the rungs (the 10%-per-side painted-plate inset). */
+        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
+        --dock-tile-min: calc(
+            var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale)
+        );
+        --dock-trigger-padding-block: calc(
+            var(--dock-density-compact-trigger-padding-block, 0.1875rem) *
+                var(--dock-scale)
+        );
+        --dock-trigger-padding-inline: calc(
+            var(--dock-density-compact-trigger-padding-inline, 0.4375rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-block: calc(
+            var(--dock-density-compact-tab-padding-block, 0.3125rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-inline: calc(
+            var(--dock-density-compact-tab-padding-inline, 0.625rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-h: calc(32px * var(--dock-scale));
+        /* The cockpit-tight label ratio — the label reads EVEN tighter relative to
+           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;
+        /* 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]`
+           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. */
+        --dock-icon-glyph: max(
+            calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)),
+            var(--dock-icon-glyph-floor)
+        );
+        --dock-control-glyph-size: var(--dock-icon-glyph);
+    }
+
     /* 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
@@ -265,6 +417,15 @@
             calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
             var(--dock-icon-glyph-floor)
         );
+        /* BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — RE-RESOLVE the in-dock
+           control-glyph knob against the density-painted `--dock-icon-glyph` (the
+           same substitution-vs-inheritance trap as the glyph above: a `:root`-only
+           `--dock-control-glyph-size` would freeze at the `:root` glyph while
+           `--dock-icon-glyph` lifts per density). Re-declaring it HERE keeps the
+           docked dark-toggle glyph + its inset pad on the density axis with the nav
+           glyphs. Identical to the `:root` default; only the resolution element
+           moves so the density-painted glyph flows in. */
+        --dock-control-glyph-size: var(--dock-icon-glyph);
     }
 
     /* Density-audacious narrow-box carve (AV.W16 TW3) — when the dock's OWN