@mkbabb/glass-ui 4.0.1 → 4.2.0

package/src/styles/dock/search.css

@@ -0,0 +1,68 @@
+/* dock/search.css — the dock-as-native-dynamic-search-bar field surface (BC.W-DOCK-SEARCH).
+ *
+ * The active dock-search field + its placeholder + the result rows read CLEARLY forward
+ * over whatever backdrop the dock floats on (≥4.5:1, the W55 darken seam) — never the
+ * pale-ghost-fading-into-content trap (the NN/g defect, WWDC §219 "buttons remain
+ * legible"). The field surface composes the W55 `--glass-tint-strength-aa` bright-bucket
+ * darken at the ELEMENT level (the `color-mix(in oklab, <rung>, var(--glass-tint-source)
+ * var(--glass-tint-strength))` seam glass/ladder.css + morph.css already compose) — NOT
+ * the RAW pre-substituted `--glass-bg-dock` token (the substitution-vs-inheritance trap
+ * the dock surfaces already hit: a surface reading the pre-baked `--glass-bg-dock` baked
+ * at `:root` 0% strength does NOT darken — the pale-fade). At the 0%/floor default the
+ * inner oklab mix is a no-op (byte-identical to the un-tinted rung); under the bright
+ * bucket it darkens-over-light (and lifts-over-dark per W-DARK-MATERIAL).
+ *
+ * The result rows ride `.glass-menu-row` (the glass-quiet hover-lift, BA.W-MENU-GLASS —
+ * CONSUMED here, the glassify is BC.W-SEARCH-CUSTOM's). The customization-surface axes
+ * (size/surface/variant) are BC.W-SEARCH-CUSTOM's — this partial only seats the field +
+ * the legibility seam. The morph itself is the dock's OWN `--dock-morph-t` + the
+ * byte-untouched `morph-bridge.css` metaball (READ-ONLY — bound, never edited). */
+
+@layer components {
+    /* The search-field region inside the morph aperture. The consumer slots its
+       <SearchBar>/<FuzzySearch> here; this rule owns the legibility seam + the layout
+       inside the aperture (a column: the field over its dropdown). It is present ONLY on
+       a `[data-search]` dock (additive — a non-search dock never carries it). */
+    .glass-dock[data-search] .dock-search-field {
+        display: flex;
+        flex-direction: column;
+        inline-size: 100%;
+        min-inline-size: 0;
+        gap: var(--dock-search-field-gap, 0.375rem);
+    }
+
+    /* The ACTIVE field surface — the W55 element-level oklab tint (NOT the raw
+       `--glass-bg-dock`). The field reads the floating rung darkened toward the warm-ink
+       at the bright-bucket strength, so it reads ≥4.5:1 over a busy backdrop. The
+       `--glass-tint-source`/`--glass-tint-strength` are the SAME element-level customs
+       the dock plate self-engages (morph.css's `:where(.glass-dock)` rule re-points them
+       under the bright bucket); this field rides that lockstep, never a field-local
+       recipe. The field TEXT is `--foreground` (the full warm ink); the
+       placeholder/muted caption is `--on-glass-muted` (5.76:1 vs the plate). */
+    .glass-dock[data-search] .dock-search-field .input-bar {
+        background: color-mix(
+            in oklab,
+            var(--glass-bg-floating),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        color: var(--foreground);
+    }
+
+    /* The placeholder + the autocomplete ghost-text + any muted caption inside the field
+       read the on-glass muted rung (NOT `--muted-foreground`, which is calibrated against
+       the opaque page and collapses on a translucent darkened plate). */
+    .glass-dock[data-search] .dock-search-field .input-bar-field::placeholder,
+    .glass-dock[data-search] .dock-search-field .dock-search-ghost,
+    .glass-dock[data-search] .dock-search-field .dock-search-result-meta {
+        color: var(--on-glass-muted);
+    }
+
+    /* The dropdown result rows ride the shared `.glass-menu-row` glass-quiet hover-lift
+       (BA.W-MENU-GLASS — CONSUMED, not re-authored). The dock-search list applies
+       `.glass-menu-row` per row; this rule reaches the selected/highlighted row through
+       the SAME register the menu families use (no flat `bg-accent`/`bg-muted` fork). The
+       active result reads the data-highlighted state the menu recipe already paints. */
+    .glass-dock[data-search] .dock-search-field .dock-search-result {
+        color: var(--foreground);
+    }
+}

package/src/styles/dock/shape.css

@@ -0,0 +1,250 @@
+/* dock/shape.css — BC.W-DOCK-ARBITRARY: the arbitrary-shape morph register.
+ *
+ * The dock is no longer locked to "a rectangle that grows wider/taller." Its SHAPE
+ * is a SCALAR PARAMETER on the ONE `--dock-morph-t` clock (the BC.W-DOCK-ENGINE
+ * buttery scalar): the corner profile LERPS between a `--dock-shape-from`/
+ * `--dock-shape-to` radius pair, an OPT-IN `clip-path` silhouette LERPS between a
+ * `--dock-shape-clip-from`/`--dock-shape-clip-to` pair, and a `useLiquidFlex`
+ * volume-preserving squish couples the deformation. So the dock FLOWS between
+ * arbitrary silhouettes — a circle, a pill, a wide bar, a tall rail, a teardrop —
+ * as one continuous liquid-glass surface (the iOS-27 control-center materialization,
+ * apple-ios27.md §3.1 "physically morphs from one shape to another").
+ *
+ * THE COMPOSITOR FLOOR (apple-ios27.md §3.1 + motion-canon P5): the shape morph
+ * animates ONLY `border-radius`/`clip-path`/`--*` — compositor/paint properties,
+ * ZERO per-frame layout. The footprint is reached by the reserved-`scale()` morph
+ * (layers.css, byte-untouched here), NEVER a per-frame size lerp. proof:dock-arbitrary
+ * + proof:no-layout-animation both hold.
+ *
+ * THE LIBRARY DEFAULT IS THE CIRCLE↔PILL IDENTITY (CLAUDE.md the collapsed-perfect-
+ * circle): `--dock-shape-from`/`--dock-shape-to` default to `--radius-dock` (9999px)
+ * on both endpoints — a no-op lerp byte-identical to the prior static
+ * `border-radius: var(--radius-dock)` — and the clip pair defaults `none`/`none`
+ * (the rectangle/pill common case needs no clip). The arbitrary teardrop/blob
+ * silhouette is OPT-IN: a consumer sets the shape tokens on the dock scope
+ * (presets-in-consumers). Clean break (MEMORY: no backwards compat) — the prior
+ * hardcoded circle/pill radius becomes the token DEFAULT, no `--dock-radius-legacy`.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components`. */
+
+/* BD.W-DOCK-PUNCH-CHANNEL — the dedicated cartoon-punch squish scalar. A SEPARATE
+   typed `<number>` @property (init 1, the no-op identity) so a one-shot transition on
+   `--ease-cartoon-punch` INTERPOLATES the ~4% pre-dip + ~22% overshoot rather than
+   snapping. It is DISTINCT from `--stretch` (the orientation/fission squish, capped by
+   `--dock-morph-max-stretch: 1.14`): the punch is NOT subject to that cap (the cartoon
+   register overshoots PAST the spring fence), it has ZERO JS owners (CSS-only, driven
+   by the transition below), and a fission split fired mid-collapse cannot clobber it
+   (the 6-owner `--stretch` last-writer race the shared channel would have introduced —
+   the dedicated channel REMOVES it, a net improvement to fission). `inherits: false` —
+   the punch is the dock root's OWN deformation, never cascaded to children. A
+   non-supporting engine reads the safe 1 fallback (no punch, just the bounded size). */
+@property --dock-punch-stretch {
+    syntax: "<number>";
+    inherits: false;
+    initial-value: 1;
+}
+
+@layer components {
+    /* ── The corner-profile lerp (A1 — the shape is a scalar parameter) ───────────
+       The dock surface radius interpolates the `--dock-shape-from`/`--dock-shape-to`
+       token pair on the ONE `--dock-expand-t` scalar (the directional expanded-ness
+       the BC.W-DOCK-ENGINE chrome interp rides; at rest it resolves to the class
+       endpoint, 0 collapsed / 1 expanded, so the resting corner is exact). This
+       GENERALIZES the prior two hardcoded class endpoints into a consumer-targetable
+       parameter: `from` is the collapsed silhouette's corner (the perfect circle,
+       9999px), `to` is the expanded silhouette's corner (the pill / an arbitrary
+       profile). A consumer overrides either token on the dock scope to morph to an
+       arbitrary corner.
+
+       This is the SINGLE radius authority (shell.css's prior static `border-radius:
+       var(--radius-dock)` is GENERALIZED here — no dead static, no duplicate, clean
+       break). Both tokens default to `--radius-dock` (9999px) so the lerp is a NO-OP at
+       the library default — byte-identical to the prior static, the circle↔pill identity
+       preserved. The token-driven `border-radius` interp is a compositor/paint property
+       on the registered `--dock-expand-t` `<number>`, NOT a transition
+       (proof:no-layout-animation stays GREEN). shape.css is imported AFTER shell.css so
+       this rule is the cascade winner for the dock corner. */
+    .glass-dock {
+        border-radius: calc(
+            var(--dock-shape-from, var(--radius-dock)) +
+                (var(--dock-shape-to, var(--radius-dock)) -
+                    var(--dock-shape-from, var(--radius-dock))) *
+                var(--dock-expand-t, 1)
+        );
+    }
+
+    /* ── The arbitrary silhouette — the OPT-IN `clip-path` lerp (A1) ──────────────
+       DEFAULT-OFF: at the library default `--dock-shape-clip-from`/`--dock-shape-clip-to`
+       are `none`, so this rule resolves `clip-path: none` (the rectangle/pill common
+       case needs no clip; the box-morph + corner lerp above is the whole shape). A
+       consumer opts into an arbitrary teardrop/blob silhouette by setting the clip
+       tokens to two compatible `inset()`/`path()`/`shape()` values; the silhouette then
+       LERPS between them on `--dock-morph-t` via the `from` * (1−t) + `to` * t weighting
+       below. `clip-path` is a compositor-friendly property — the silhouette morphs with
+       ZERO reflow (apple-ios27.md §3.1).
+
+       The lerp is expressed as a `clip-path` whose two endpoints carry per-endpoint
+       opacity-like weights via the scalar: the active silhouette is the `to`-clip once
+       the morph crosses, the `from`-clip before. The web platform cannot continuously
+       interpolate two arbitrary mismatched-topology `clip-path` functions, so the
+       opt-in consumer supplies TOPOLOGY-COMPATIBLE endpoints (two `inset()`s, or two
+       `path()`s with equal command counts) — the AX.W42 fold-7 topology limit is
+       RESPECTED (a mismatched-topology V↔H morph occludes its reflow in the goo-merge,
+       BC.W-LIQUID-MORPH, not a continuous clip morph THROUGH the change). The default
+       `none`/`none` opts the whole register off so the limit never bites the common
+       case. The custom property carries the consumer's interpolable pair; the engine
+       resolves it on the scalar only when set. */
+    .glass-dock {
+        --dock-shape-clip: var(--dock-shape-clip-to, none);
+        clip-path: var(--dock-shape-clip);
+    }
+
+    /* While morphing, the opt-in silhouette LERPS: before the midpoint the `from`-clip
+       reads, after it the `to`-clip, so the silhouette flows from one to the other as
+       the box scales under it (the corner + footprint + silhouette all on the ONE
+       scalar). The `none`/`none` default makes this a no-op (`clip-path: none` both
+       sides), so the rectangle/pill morph never pays the clip cost; the arbitrary
+       register engages ONLY when a consumer sets the clip tokens. */
+    .glass-dock[data-morphing] {
+        --dock-shape-clip: var(--dock-shape-clip-from, none);
+    }
+    .glass-dock[data-morphing]:where(.expanded, .always-expanded) {
+        /* expanding (0→1): once past the midpoint the `to`-silhouette is the target */
+        --dock-shape-clip: var(--dock-shape-clip-to, none);
+    }
+
+    /* ── The squish — the `useLiquidFlex` `--stretch` deformation (A4) ────────────
+       The shape morph couples the volume-preserving squish the tab-indicator +
+       useDockOrientationMorph already speak: `scale: var(--stretch) calc(1/var(--stretch))`
+       along the morph axis, capped LOW at `--dock-morph-max-stretch` (~1.14) by
+       useLiquidFlex itself (the ONE squish source — no forked deformation math). The
+       plate DEFORMS like liquid as it changes shape — a fast morph swells, a slow one
+       barely. The driver (useDockOrientationMorph) writes `--stretch` on the dock scope;
+       at rest `--stretch` is unset → 1/1 (no squish). The reciprocal pairing preserves
+       volume (stretch along travel, compress across). This is compositor-only (a
+       `scale` transform), composed WITH the ratio-free convex-blend size morph
+       (layers.css) — the box scale rides `--dock-size-scale`, the squish rides
+       `--stretch`, the cartoon punch rides `--dock-punch-stretch`, all three
+       multiply on the compositor on ONE `scale:` property.
+
+       Scoped to `[data-morphing]` so the squish is a morph-transient (at rest the plate
+       is un-squished); the cross-axis is the morph axis's reciprocal. Horizontal docks
+       stretch X / compress Y; vertical stretch Y / compress X (the inverse-axis twin,
+       mirroring the bridge plates' per-orientation squish in morph-bridge.css).
+
+       BD.W-DOCK-CORE / BD.W-DOCK-PUNCH-CHANNEL — THREE factors fold onto this ONE
+       `scale:` along the morph axis:
+         1. `--dock-size-scale` (layers.css) — the ratio-FREE convex-blend size, BOUNDED
+            in [0.06, 1] by construction (the container-justify-agnostic grow-from-center,
+            box reserves `--dock-expanded-px` + scales toward it from `transform-origin:
+            center`). The seizure-prone `--dock-root-scale` ratio it REPLACES is gone.
+         2. `--stretch` — the orientation/fission volume-preserving squish (the 6-JS-owner
+            channel, capped 1.14). Unset → 1 (the squish-only path byte-identical).
+         3. `--dock-punch-stretch` — the dedicated cartoon-punch overshoot (the §PUNCH
+            channel, driven by the one-shot transition below; NOT capped by 1.14). Unset →
+            1 (no punch).
+       The cross-axis is the RECIPROCAL of the two volume-preserving factors
+       `1 / (--stretch × --dock-punch-stretch)` so the punch + the squish deform the pill
+       along travel and pinch across WITHOUT moving the footprint or the centroid — the
+       size factor (`--dock-size-scale`) is NOT reciprocated (it is the real footprint
+       morph, not a volume-preserving deformation). Folding all three on ONE `scale:`
+       keeps the multiply explicit + on one compositor channel (a separate `transform`
+       would be a distinct box that could fight the `scale:`). Horizontal: X = size ×
+       squish × punch, Y = 1/(squish × punch); vertical: the inverse axes. */
+    .glass-dock[data-morphing]:not(.vertical),
+    .glass-dock[data-punching]:not(.vertical) {
+        scale: calc(
+                var(--dock-size-scale, 1) * var(--stretch, 1) *
+                    var(--dock-punch-stretch, 1)
+            )
+            calc(1 / (var(--stretch, 1) * var(--dock-punch-stretch, 1)));
+    }
+    .glass-dock[data-morphing].vertical,
+    .glass-dock[data-punching].vertical {
+        scale: calc(1 / (var(--stretch, 1) * var(--dock-punch-stretch, 1)))
+            calc(
+                var(--dock-size-scale, 1) * var(--stretch, 1) *
+                    var(--dock-punch-stretch, 1)
+            );
+    }
+
+    /* ── BD.W-DOCK-PUNCH-CHANNEL — the dedicated cartoon-punch DRIVER ──────────────
+       The size blend above is monotone + bounded (correct, boring, bulletproof). The
+       PUNCH is the audacious half: a SEPARATE one-shot transition on
+       `--ease-cartoon-punch` (the ~4% pre-dip + ~22% overshoot `linear()`) that blooms
+       `--dock-punch-stretch` AWAY from 1 then RETURNS to 1 at settle — NEVER latched
+       (the +16%-forever spike defect). It is honestly a SECOND punch animation layered
+       on the spring (NOT "one clock"): the bounded size rides `--dock-morph-t`, the
+       punch rides this transition. `--motion-weight` (dock scope 1) co-scales the punch
+       AMPLITUDE; PRM zeroes `--motion-weight` → the amplitude collapses to 1 (no punch),
+       and the PRM `--ease-cartoon-punch → --ease-standard` re-alias removes the curve
+       shape — the bounded size still snaps via the clamped `t`, the morph still CONFIRMS.
+
+       The dock is a LOUD DRIVER (design.md §L4): it pins `--motion-weight: 1` on its own
+       scope so even a slow user-driven morph rides the full punch register. The
+       `[data-punching]` hook (armed by the dock for one episode) is what lifts the punch
+       to its overshoot value; the transition carries it there on the punch curve and
+       back to the rest 1. The amplitude is `1 + 0.22·--motion-weight` (the ~22% overshoot
+       the curve peaks at × the loud-register weight). */
+    .glass-dock {
+        /* LOUD DRIVER — the dock pushes the motion weight to max so the punch reads at
+           full cartoon amplitude (design.md §L4; the rest 0.618 would mute it to ~+13.6%). */
+        --motion-weight: 1;
+        /* the punch rests at the identity 1 (no deformation) */
+        --dock-punch-stretch: 1;
+        /* the one-shot punch transition — the curve does the dip+overshoot+settle; the
+           weight zeroes it under PRM (the curve also re-aliases to --ease-standard). */
+        transition: --dock-punch-stretch var(--duration-normal)
+            var(--ease-cartoon-punch);
+    }
+    /* While punching, the dock lifts the punch to its overshoot target; the transition
+       carries `--dock-punch-stretch` there on the cartoon curve then the hook clears and
+       it transitions back to 1 (the RETURN — never latched). The overshoot share scales
+       with the loud weight; PRM weight 0 → amplitude 1 (no punch). */
+    .glass-dock[data-punching] {
+        --dock-punch-stretch: calc(1 + 0.22 * var(--motion-weight, 1));
+    }
+
+    /* ── BD.W-DOCK-PUNCH-CHANNEL — the kinetic cartoon CAST ────────────────────────
+       The bold 1940s offset-shadow made kinetic: the inert `.cartoon-cast` child
+       (BD.W-CARTOON-CASTER — a real DOM child, NOT a pseudo, since the dock's `::before`/
+       `::after` are both occupied by the grain + the morph chrome) carries the SHIPPED
+       `--shadow-cartoon-md/lg` rung and SLIDES opposite the morph as the box punches.
+       The travel reads `--motion-weight` (PRM → 0 → static) so the cast deepens + slides
+       through the punch then snaps home at settle. Plain per-mode `.dark` arms (the
+       light-dark() inset-shadow trap avoided — the cast is a plain offset shadow, no
+       inset fragment). Behind the plate (z-index -1), pointer-inert, paint-only. */
+    .glass-dock > .cartoon-cast {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        pointer-events: none;
+        /* the warm-cream rest cast — the bold offset ink the plate floats above */
+        box-shadow: var(--shadow-cartoon-md);
+        /* the derived travel — opposite-morph slide, gated by the loud weight × the punch
+           presence. At rest (punch 1) the travel is 0; mid-punch it slides out + deepens. */
+        --cast-travel: calc(
+            7px * var(--motion-weight, 1) *
+                clamp(0, calc((var(--dock-punch-stretch, 1) - 1) / 0.22), 1)
+        );
+        translate: calc(-1 * var(--cast-travel)) var(--cast-travel);
+        transition:
+            translate calc(var(--duration-normal) * 1.15) var(--ease-cartoon-punch),
+            box-shadow var(--duration-normal) var(--ease-standard);
+    }
+    /* mid-punch the cast deepens to the LOUD rung (a plain per-mode arm below adds the
+       dark-mode rung — the light-dark() inset trap avoided). */
+    .glass-dock[data-punching] > .cartoon-cast {
+        box-shadow: var(--shadow-cartoon-lg);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        /* PRM — the cast is static (no travel); the offset ink stays (a legibility
+           asset). `--motion-weight: 0` already zeroes `--cast-travel`; pin the
+           transition off too so a residual frame cannot slide. */
+        .glass-dock > .cartoon-cast {
+            transition: none;
+            translate: 0 0;
+        }
+    }
+}

package/src/styles/dock/shell.css

@@ -24,8 +24,7 @@
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
         /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
-           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
-           is the px the child rises from as it fades in. Consumers retune the
+           is the fraction of the morph each child reveals over. Consumers retune the
            cascade feel per instance.
 
            AX.W02 — `--dock-stagger-step` is the per-child onset BEAT: each
@@ -49,7 +48,6 @@
            beat, that was too wide. The summary/persistent glyph is front-loaded
            structurally (onset 0, scalar-keyed below). */
         --dock-stagger-window-size: 0.4;
-        --dock-stagger-rise: 4px;
         --dock-stagger-step: 0.08;
         /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
            radius (default --radius-dock-card = --radius-3xl, density-scaled
@@ -129,7 +127,7 @@
            host-constrained width it already has there. The default free-floating
            dock shrink-wraps to its content (AV.W16 TW3 made this a default and
            silently broke dock sizing for the common case). */
-        border-radius: var(--radius-dock);
+        /* BC.W-DOCK-ARBITRARY — the base corner is the shape register's token lerp (dock/shape.css, the single radius authority generalizing the prior static). */
         white-space: nowrap;
         max-inline-size: var(--dock-max-inline-size);
         padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem);
@@ -148,10 +146,13 @@
         );
         backdrop-filter: var(--dock-surface-blur);
         border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting));
-        /* AV.W15 M3 — the full-perimeter `--glass-edge-light` rim rides as the
-           leading inset layer of the dock shadow stack (the navigation-band
-           silhouette catch-light, distinct from the top-only highlight). */
-        box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock));
+        /* BC.W-BLACK-BAR D2 — the dock rim is the DIRECTIONAL pair (bright catch-light
+           on the TOP edge, faint warm under-shadow on the BOTTOM — glass-fx.css), the
+           leading inset layers of the dock shadow stack. RETIRES the omnidirectional
+           `--glass-edge-light` ring that fought the (now ≤4% α) `--glass-border-dock`
+           perimeter; the navigation band reads its rim from the SAME corrected token
+           source as cards/dialogs (no dock-local dark rim re-paste). */
+        box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock));
     }
 
     /* AW.W2 — the box IS the reveal aperture (clip-reveal one-clock morph).
@@ -311,6 +312,21 @@
             scale var(--dock-motion-resize);
     }
 
+    /* BC.W-DOCK-ENGINE move 2 — the rail polish transition is COMPOSITOR-PROMOTED
+       only while its hover/press/held state is ARMED (the transform/scale legs ride
+       the compositor channel; `will-change: transform` hints the layer for the
+       gesture). NEVER a resting `will-change` (a permanent promotion pins a wasted
+       compositor layer at rest — the motion-canon P5 no-resting-promotion floor):
+       the hint lives on the `:hover`/`:active`/`[data-held]` armed selectors and is
+       cleared the instant the state releases. PRM keeps no pinned layer either — the
+       universal a11y carve strips the spatial transform under reduce, and a
+       non-animating rail needs no promotion. */
+    .glass-dock.vertical:hover,
+    .glass-dock.vertical:active,
+    .glass-dock.vertical[data-held] {
+        will-change: transform;
+    }
+
     /* AZ.W-DOCK-TAXONOMY — the vertical dock's surface plate (the prior
        `.variant-rail` block; "rail-ness" is now `orientation="vertical"` + a
        shape/density choice, not a variant). */