@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/dock/shape.css

@@ -27,22 +27,16 @@
  *
  * @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;
-}
+/* BI.W-DOCK-SPRING-UNIFY (SU2) — the cartoon-punch channel is RETIRED (clean break,
+   no alias). `@property --dock-punch-stretch`, the `[data-punching]` driver, and the
+   per-child punch counter-scale are DEFINITION-ABSENT: the dock morph carries ONE
+   deformation-free box-size scale off `--dock-size-scale` (the box RESERVES its
+   expanded footprint, the visible size rides `scale: var(--dock-size-scale)` from
+   `transform-origin: center`), and the liquid weight lives in the DOCK spring's own
+   overshoot-recovery tail (DOCK-LADDER §8), not a second parallel punch transition on
+   a wrong clock. The orientation/fission `--stretch` squish is likewise gone with its
+   V↔H-goo owner (W-DOCK-RETIRES) — the scale is a pure size morph, ONE compositor
+   channel, ONE clock. */
 
 @layer components {
     /* ── The corner-profile lerp (A1 — the shape is a scalar parameter) ───────────
@@ -69,7 +63,7 @@
             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)
+                var(--dock-expand-t)
         );
     }
 
@@ -113,138 +107,82 @@
         --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.
+    /* ── The box-size morph — the deformation-FREE convex-blend scale ─────────────
+       BI.W-DOCK-SPRING-UNIFY (SU2) — the visible box size rides ONE factor:
+       `--dock-size-scale` (layers.css — the ratio-FREE convex blend of the two
+       measure-ONCE endpoints, BOUNDED [0.06, 1] by construction, grown from
+       `transform-origin: center`). The prior 7-factor product (size × `--stretch`
+       squish × `--dock-punch-stretch` cartoon-punch, reciprocated on the cross axis)
+       is RETIRED (clean break): `--stretch` died with its V↔H-goo owner
+       (W-DOCK-RETIRES) and the punch channel is DEFINITION-ABSENT (above). So the
+       scale is a PURE size morph on ONE compositor channel — no reciprocal squish,
+       no cross-axis deformation, no `[data-punching]` co-driver. Scoped to
+       `[data-morphing]` (a morph-transient); at settle the attr clears → `scale:
+       none` over the TRUE box. Horizontal scales the inline axis; vertical the block
+       axis (the cross axis stays 1 — the size morph moves the footprint, it does not
+       pinch). The liquid weight lives in the DOCK spring's own overshoot tail
+       (DOCK-LADDER §8), not a second parallel punch clock. */
+    .glass-dock[data-morphing]:not(.vertical) {
+        scale: var(--dock-size-scale, 1) 1;
+    }
+    .glass-dock[data-morphing].vertical {
+        scale: 1 var(--dock-size-scale, 1);
+    }
 
-       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).
+    /* ── BG.W-DOCK-GLYPH-RIGID — RIGID CONTENT over the morphing box ───────────────
+       The box-scale rule above scales the WHOLE `.glass-dock` subtree — including the
+       glyphs — by `--dock-size-scale` on the morph axis. The two direct-child CONTENT
+       containers (`.dock-persistent` + `.dock-layers`) carry the PER-FRAME INVERSE of
+       that size factor so the composited glyph reads its intrinsic 1:1 aspect in every
+       frame while the box scales the footprint. A child multiplies its parent's
+       `scale`, so `1 / max(--dock-size-scale, 0.06)` on the morph axis exactly cancels
+       the box's morph-axis scale (→ 1); the cross axis stays 1 (the box no longer
+       reciprocal-squishes, so the child carries no cross-axis counter — the +48.8%
+       `(--stretch × --dock-punch-stretch)²` residual the deformation zoo introduced is
+       structurally gone with it).
 
-       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)));
+       The `max(…, 0.06)` guard matches the layers.css `--dock-size-scale` clamp floor
+       exactly (a math fence, not a masking fallback). The children default
+       `transform-origin: 50% 50%`, the SAME centre the root scales from, so the inverse
+       un-does the box's outward scale about the shared centroid. SCOPED to
+       `[data-morphing]` (the residual transform lives ONLY mid-morph); at settle the
+       attr clears → both rules drop to `scale: none` over the TRUE box, content
+       byte-rigid, ZERO compositing cost at rest (`proof:no-layout-animation` holds). */
+    .glass-dock[data-morphing]:not(.vertical) > .dock-persistent,
+    .glass-dock[data-morphing]:not(.vertical) > .dock-layers {
+        scale: calc(1 / max(var(--dock-size-scale, 1), 0.06)) 1;
+        will-change: transform;
     }
-    .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)
-            );
+    .glass-dock[data-morphing].vertical > .dock-persistent,
+    .glass-dock[data-morphing].vertical > .dock-layers {
+        scale: 1 calc(1 / max(var(--dock-size-scale, 1), 0.06));
+        will-change: transform;
     }
 
-    /* ── 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). */
+    /* ── The dock is a LOUD MOTION DRIVER (design.md §L4) ──────────────────────────
+       The dock pins `--motion-weight: 1` on its own scope so the descendant control
+       motion (the glass-atom / btn cartoon-press punch recipes, which read
+       `--motion-weight` for their amplitude) reads at the full loud register inside
+       the dock chrome. The dock's OWN cartoon box-punch is RETIRED (SU2 above —
+       `--dock-punch-stretch` DEFINITION-ABSENT), so this pin now serves ONLY the
+       descendant register; the PRM carve below still collapses the loud weight to 0
+       under reduce (the cards.css / glass-atom.css pattern — descendant motion
+       confirms without the cartoon overshoot). */
     .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);
-    }
+    /* ── BG.W-GLASS-CLIP-DISCIPLINE (absorbs W-DOCK-CAST-RETIRE) — the dock cast
+       is RETIRED ───────────────────────────────────────────────────────────────
+       The kinetic `.cartoon-cast` offset-shadow CHILD is GONE from the dock; the
+       dock's elevation is carried by `--shadow-dock` (the omni drop-shadow painted
+       from the dock box, so it escapes the radius correctly + in-gamut) +
+       `--glass-key` (the cel rim) — both KEPT. The shared `.cartoon-cast` base rule
+       (cards.css) + its glass-atom / btn-punch consumers are UNTOUCHED — only the
+       DOCK cast is retired. */
     @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;
+        .glass-dock {
+            --motion-weight: 0;
         }
     }
 }

package/src/styles/dock/shell-regions.css

@@ -0,0 +1,73 @@
+/* dock/shell-regions.css — the dock `#persistent` region + the vertical layer-stack
+ * body (AX.W45 D13-a / AZ.W-DOCK-TAXONOMY).
+ *
+ * Carved from dock/shell.css at BG.W-CLOSEFIX-9SITE to hold the no-god-module 500-line
+ * bound. This partial owns the always-present `.dock-persistent` rail beside the
+ * expand-on-demand morph region (the iOS Now-Playing / Stage-Manager idiom done
+ * STRUCTURALLY) + the vertical dock's column layer-stack. The `.glass-dock` structural
+ * skeleton (root + morph aperture + shape plates + position helpers) stays in shell.css.
+ *
+ * @import-ed by dock.css in cascade order IMMEDIATELY AFTER dock/shell.css and BEFORE
+ * dock/morph.css, in the SAME `@layer components` — the persistent-region block was the
+ * tail of shell.css (disjoint `.dock-persistent` / `.glass-dock.vertical .dock-layer`
+ * selectors), so the carve is isomorphic (same layer, same source order → ZERO visual
+ * delta). */
+@layer components {
+    /* AX.W45 D13-a — the PERSISTENT region (the iOS Now-Playing / Stage-Manager
+       idiom done STRUCTURALLY). The `#persistent` slot lives in-flow as a root flex
+       SIBLING of the morph-region (`.dock-layers`) in BOTH collapsed AND expanded —
+       NEVER `:inert`, NEVER a crossfade pane, NEVER a `registerGroup` morph target.
+       It is a stable always-present rail beside the expand-on-demand content region,
+       so a consumer keeps a control visible while collapsed WITHOUT hand-duplicating
+       it into both the `#default` and `#collapsed` slots. The region co-laid by the
+       root flex/grid; the morph scalar `--dock-morph-t` co-drives only its chrome
+       (it inherits the root padding/radius morph), it is NOT a morph TARGET. It holds
+       steady (no jitter) while the morph-region's aperture animates on the ONE
+       spring. `align-items: center` keeps it on the dock's centerline; the
+       `--dock-layer-gap` separates it from the morph region (same rhythm both
+       orientations). */
+    .dock-persistent {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: var(--dock-layer-gap, 0.375rem);
+    }
+
+    .glass-dock:not(.vertical) .dock-persistent {
+        flex-direction: row;
+    }
+
+    .glass-dock.vertical .dock-persistent {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    /* The persistent region + the morph region share the dock's gap rhythm. The
+       region renders only when the consumer authors a `#persistent` slot
+       (GlassDock.vue guards it with `v-if="$slots.persistent"`), so a dock with no
+       persistent controls is byte-identical to before (no empty flex item). */
+    .glass-dock:not(.vertical) .dock-persistent + .dock-layers {
+        margin-inline-start: var(--dock-layer-gap, 0.375rem);
+    }
+
+    .glass-dock.vertical .dock-persistent + .dock-layers {
+        margin-block-start: var(--dock-layer-gap, 0.375rem);
+    }
+
+    /* AZ.W-DOCK-TAXONOMY (move 2) — the VERTICAL dock's layer panes lay their content
+       out as a COLUMN. The dock body is now the SAME orientation-agnostic
+       `.dock-layers` full/summary morph pair the horizontal dock uses (the prior
+       static `.dock-layer--vertical-body` single-stack RETIRED — a vertical dock now
+       collapses its block axis too). The base `.dock-layer { display: flex;
+       align-items: center }` is row by default; here the full/summary panes flip to a
+       stretched column stack carrying the dock's `--dock-layer-gap` rhythm, so
+       authored item groups + `<DockSeparator>` rules read with the correct vertical
+       cadence. The block-axis morph aperture is owned by `.dock-layers` (layers.css —
+       `.glass-dock.vertical[data-morphing] .dock-layers` morphs `block-size`). */
+    .glass-dock.vertical .dock-layer {
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--dock-layer-gap, 0.375rem);
+        min-width: 0;
+    }
+}