@mkbabb/glass-ui 4.2.0 → 5.0.0

package/src/styles/tokens/property-regs.css

@@ -41,16 +41,8 @@
     initial-value: 0%;
 }
 
-/* BB.W-BORDER-PROGRESS — the masked-conic BORDER ring's sweep fill. The conic
-   gradient (border-progress.css) reads `--border-progress-fill` as the swept
-   extent (`conic-gradient(…, transparent var(--border-progress-fill), …)`), so a
-   determinate progress INTERPOLATES the border ring (a bare unregistered var()
-   snaps the sweep; the registered typed <percentage> lets the engine animate the
-   gradient stop). `inherits: false` — each ring owns its own fill (the per-surface
-   ownership the specular cohort uses; a ringed parent must not push its fill onto a
-   child). `initial-value: 0%` is the safe resting ring (the unregistered fallback
-   paints it; the cross-fade collapses to it on a non-supporting engine). */
-@property --border-progress-fill {
+/* The masked scroll-progress rim's interpolable sweep. */
+@property --scroll-progress-rim-fill {
     syntax: "<percentage>";
     inherits: false;
     initial-value: 0%;
@@ -94,6 +86,25 @@
     initial-value: 0;
 }
 
+/* BI.W-TABS-FACTOR — the iOS-27 eyeglass two-rest-state scalar. SETTLED(0) ⇄ LIVE(1)
+   drives the tab-pill loupe's block-proud magnify (the plate `scaleY` reads
+   `--eyeglass-y`, a calc off this scalar; TABS-GLASS-LADDER §1/§8.1: settled INSET
+   0.84× ⇄ live PROUD 1.12×). It is JS-driven per-frame by `useEyeglassLive`, which
+   CONSUMES `useLeadTrail` (the ONE lead/trail integrator, reading the `eyeglass`
+   SPRING_PRESETS row) — so writing it from the `hi` edge gives fast-energize /
+   slow-decay EMERGENTLY (lead governs the rise, the ~270ms trail governs the
+   deflate; the §2/§8.3 edge-asymmetric release). `inherits: true` so the host writes
+   it on the indicator and the nested `.segmented-indicator__plate` reads it (and a
+   consumer can force it from an ancestor). `initial-value: 0` = the SETTLED long rest
+   (a non-supporting engine / SSR paints the calm inset plate, never broken). The
+   registration lets the CSS transition interpolate it under the DEGRADE floor, but on
+   the live JS path the useLeadTrail integrator is the animator (no CSS transition). */
+@property --eyeglass-live-t {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+
 @property --phase-tint-amount {
     syntax: "<percentage>";
     inherits: true;
@@ -218,29 +229,11 @@
     initial-value: 0px;
 }
 
-/* BD.W-PAGE-FIELD — the warm colorful FIELD drive props (paper.css `.paper-field`).
-   The chassis writes ONE per-route hue (`--field-h-raw`) on the `[data-paper-field]`
-   wrapper; `.paper-field` CLAMPS it warm IN THE CSS (`clamp(25, raw, 95)`) so an
-   inline `--field-h-raw:210` paint-CANNOT go teal — the warm-bound is a paint-layer
-   invariant, not a TS-only convention.
-   • --field-h-raw (<number>, inherits:true) — the route's raw hue request. Inherits so
-     the wrapper sets it once and every `.paper-field` descendant resolves it. Initial 62
-     (warm amber — the canonical cream identity).
-   • --field-intensity (<number>, inherits:true) — the ground/hero rung scalar (0.85
-     ground, 1.0 vivid hero, 0 under prefers-reduced-transparency → the warm stops drop
-     and the decoupled --neutral-0 floor shows). Inherits so a hero surface can lift it
-     on a sub-tree. */
-@property --field-h-raw {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 62;
-}
-
-@property --field-intensity {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0.85;
-}
+/* BD.W-PAGE-FIELD — the warm colorful FIELD drive props (`--field-h-raw` /
+   `--field-intensity`) are RETIRED with the `.paper-field` plane (BG.W-FIELD-AURORA).
+   The shell `<Aurora>` field carries the per-route warm hue now (a JS uniform on the
+   AuroraConfig palette, not a CSS @property), so these registrations are dead. Clean
+   break, no alias — `proof:no-paper-field` asserts both regs ABSENT. */
 
 /* BB.W-LENSING `--glass-refract` axis — RETIRED (DDR-LENS-BAKE, glass-refract.css).
    The axis drove the `feDisplacementMap` `scale` by splicing `var(--glass-refract)`
@@ -371,6 +364,21 @@
     initial-value: 1;
 }
 
+/* BG.W-GLASS-DEFAULT-DEFINITION (GA-1) — the DEFINED-tier engage scalar (the
+   `--glass-level`/`--glass-depth` TWIN). Glass over a FLAT page reads near-gray (chroma
+   0.0138); the defined tier gives a CONTROL a warm rim + warm-cream floor. BOTH legs
+   read this scalar — the floor-fill α + the `--glass-border-defined` rim α
+   (tokens/glass.css) — so it is genuinely load-bearing (dead-knob-proof). `inherits:
+   true` (a host dials definition on any ancestor); `initial-value: 0` is fully
+   TRANSMISSIVE (content default, ladder byte-untouched); `.glass-defined`
+   (glass/defined.css) + `prefers-contrast: more` set it to 1. SEPARATE from
+   `--glass-level`/`--glass-depth`/`--glass-tint-*`. */
+@property --glass-definition {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+
 /* AX.W51 D18 — the master comfortable-sizing scalar registered typed. The
    `<number>` syntax guarantees `calc(<base> * var(--ui-scale))` is always valid (a
    malformed override CLAMPS to the initial value 1, not an invalidated calc — the
@@ -407,160 +415,33 @@
     initial-value: 0.618;
 }
 
-/* ── The specular-intensity magnitude cohort (AX.W09) ──────────────────────
-   The catch-light alpha multiplier at each interaction state, as a SINGLE
-   overridable token cohort (was three buried literals across glass.css —
-   `0.35` rest floor / `0.6` hover / `0.85` active — and the `.dark` arm's
-   `0.22`). `glass.css`'s `.glass-material::before` rest/hover/active rules READ
-   these, so the subtle-vs-extreme magnitude is a knob a consumer (or the dark
-   arm) retunes ON THE CASCADE — never a re-buried literal. Override on `:root`
-   to retune library-wide; the cartoon-shadow override contract is the precedent.
-
-   Re-baselined AGAIN at AX.W52 D19 — with the central screen-disc replaced by a
-   BOUNDED plus-lighter edge gleam (glass.css), the gleam is a whisper at every
-   rung, so the cohort drops further (the W09 0.22/0.32 ceiling still lifted the
-   whole-tile disc on hover):
-     • rest   0    — static, unwired surfaces are CLEAN; the gleam wakes only on
-                     hover/active or on a pointer-wired surface. Aligns the painted
-                     rest with the @property `--specular-intensity { initial-value:
-                     0 }` dormancy.
-     • hover  0.10 — a whisper edge gleam, not a bloom.
-     • active 0.16 — the press whisper. */
-:root {
-    --glass-specular-intensity-rest: 0;
-    --glass-specular-intensity-hover: 0.1;
-    --glass-specular-intensity-active: 0.16;
-    /* BB.W-BUTTON-GLASS (d) — the BUTTON-SCOPED hover gleam bump. The lit glass
-       button should read a notch brighter at the grazing edge than the global
-       hover whisper (0.10). `.btn-glass` re-points its own
-       `--glass-specular-intensity-hover` to this knob (surfaces.css), so ONLY the
-       button lifts — the global cohort above is UNTOUCHED. A consumer retints the
-       button gleam from this ONE override. */
-    --glass-specular-btn-hover: 0.14;
-}
-
-/* Over the deep canvas `plus-lighter` still lifts, so the dark arm runs a touch
-   softer on the interaction rungs (rest already 0). */
-.dark {
-    --glass-specular-intensity-hover: 0.08;
-    --glass-specular-intensity-active: 0.12;
-    /* The button bump rides a touch softer in dark too (the dark hover is 0.08;
-       the button reads ~0.11, still a notch above the global whisper). */
-    --glass-specular-btn-hover: 0.11;
-}
-
-/* BB.W-BUTTON-GLASS (b)/(e) — the press DRIVE scalar. ONE typed 0..1 custom
-   property Button.vue writes off the `useSpringPress` spring (0 released → 1
-   pressed, with the ~5% overshoot the spring carries). It is the SINGLE drive the
-   press SQUISH (the `useLiquidFlex` reciprocal X/Y deform), the coupled specular/
-   brightness lift, and the optional `.glass-refract` lens-swell all read — the "one
-   drive, the glass deforms under press" read. Registered typed so a `transition`/
-   downstream `calc()` interpolates the VALUE (number), not the text. `inherits:
-   true` so the host-written value reaches the `.glass-material::before` pseudo +
-   the coupled rules. `initial-value: 0` so an unwired/SSR button is the static
-   rest frame (the no-JS CSS `.tap-squish` scale floor still presses). */
-@property --glass-btn-press-t {
+/* BI.W-TEMPO (M11 / N6) — the GOVERNING motion TIME scalar (the one application
+   point). ONE registered inheriting number co-scales BOTH the CSS spring clocks
+   (the `--spring-<name>-duration` reader reads `calc(var(--spring-<name>-settle) *
+   var(--motion-tempo))`, scheme-spring.css) AND the JS spring RESPONSES (each spring
+   engine reads it via `motionTempo()` and scales `response *= tempo` at
+   construction). Because `duration ∝ response` (ωₙ = 2π/response), scaling the CSS
+   clock by tempo ≡ scaling response by tempo — so the M1 CSS==JS parity holds at ANY
+   tempo (G2). It serves the "options for longer" clause of UF-G1 (a global motion
+   time knob a consumer sets on `:root`).
+
+   Registered with the EXACT `--ui-scale`/`--motion-weight`/`--glass-level` typed
+   cascading-scalar idiom — `inherits: true` so a consumer sets it on any ancestor
+   and every descendant spring re-reads it (the loud iOS-27 surfaces re-pin
+   `--motion-tempo: 1` on their own scope, scheme-motion.css, so the utility UI
+   tightens/loosens while the deliberate BD.W-ANIM-IOS27-TUNE weight holds where it
+   landed). `initial-value: 1` is the IDENTITY (RATIFIED judgment (c) — the per-
+   register tightening is M1 + REGISTER-TABLE's exit/enter-menu clocks, NOT a global
+   scale): at 1.0 the reader resolves `settle * 1` byte-identical to the flat clock,
+   so the axis is a no-op at rest. A malformed override CLAMPS to the initial 1 (the
+   typed fail-safe; `motionTempo()` mirrors the ≤0 → 1 clamp JS-side).
+
+   THE NAMING FENCE — `--motion-tempo` (TIME) ⟂ `--motion-weight` (MAGNITUDE, default
+   0.618) ⟂ `--ui-scale` (GEOMETRY): three registered inheriting scalars, NEVER
+   folded. PRM is orthogonal (tempo × the universal ~0.01ms carve is still ~0; the JS
+   `respectReducedMotion` snap wins at every tempo). */
+@property --motion-tempo {
     syntax: "<number>";
     inherits: true;
-    initial-value: 0;
-}
-
-/* BC.W-AX-COMPLETION-SEAL — the 4 motion drives of the hero-scale earned-GOLD
-   completion seal (completion-seal.css consumes them). Registered typed so the
-   one-shot draw INTERPOLATES (a bare unregistered var() snaps; the §18 typed-property
-   idiom lets the engine animate the stroke-reveal / settle / glint). The seal is the
-   visual seal of the W-PHASE-PALETTE completion event — its ink reads the earned-gold
-   register; its glint composes the W-AX-METAL-GLOW catch-light. One-shot, PRM-gated,
-   compositor-only.
-
-   • --seal-draw (<percentage>) — the stroke-reveal extent (the stroke-dashoffset wipe
-     drive: 0% undrawn → 100% fully drawn). `inherits: false` (each seal owns its own
-     draw, the per-surface ownership of the specular/border-progress cohort — a sealed
-     parent must not push its draw onto a child seal). `initial-value: 100%` is the
-     SAFE fully-drawn resting seal: on a non-supporting engine (no @property) the seal
-     paints fully drawn, NEVER a blank — the editorial draw-on degrades to the finished
-     mark, never to nothing.
-
-   • --seal-scale (<number>) — the settle scale (the draw-on lands with a small spring
-     overshoot on the seal's own --spring-snappy/--spring-bouncy clock — the SPATIAL
-     leg, W-MOTION-CANON P2 enter-bouncy). `inherits: false` (per-seal). `initial-value:
-     1` is the resting settled scale.
-
-   • --seal-glint (<number>) — the gold catch-light intensity (the one-pass glint that
-     fires once on settle, reading --metal-glow-opacity from W-AX-METAL-GLOW — a glint,
-     not a loop). `inherits: false` (per-seal). `initial-value: 0` so an unwired seal is
-     un-glinting at rest (the calm floor; the glint wakes only on the draw).
-
-   • --seal-ink (<color>) — the seal stroke color. `inherits: true` (the cascading-scalar
-     idiom — a consumer scope re-inks the seal in lockstep with the completion register).
-     The @property `initial-value` MUST be a CONCRETE var-free <color> (the typed-property
-     rule: a registration fallback cannot be a var()), so it is the LITERAL light-gold
-     `oklch(0.751 0.147 84.2)` (scale-paper.css's `--gold` value) — the engine fallback
-     when no cascaded value exists. The RUNTIME cascade default is the TOKEN form the
-     recipe sets: `--seal-ink: var(--phase-complete-color, var(--color-gold))` — the
-     EARNED-gold completion register (Q2: gold is earned at completion, NEVER the running
-     phase spectrum). */
-@property --seal-draw {
-    syntax: "<percentage>";
-    inherits: false;
-    initial-value: 100%;
-}
-
-@property --seal-scale {
-    syntax: "<number>";
-    inherits: false;
     initial-value: 1;
 }
-
-@property --seal-glint {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
-}
-
-@property --seal-ink {
-    syntax: "<color>";
-    inherits: true;
-    initial-value: oklch(0.751 0.147 84.2);
-}
-
-/* BC.W-SCROLL-TRIGGER — the native scroll-ramp custom. The continuous 0..1 scroll
-   progress the `useScrollTrigger` reader exposes rides this registered custom on a
-   `supportsScrollTimeline()` engine: a `.scroll-progress`-style recipe writes it via
-   `animation-timeline: scroll(self)` so a consumer's CSS ramp (the BC.W-SCROLL-CHROME
-   shrink/opacity) reads `--scroll-t` with ZERO JS (the dual-path single-writer — the JS
-   `progress` ref attaches NOTHING on a supporting engine). `inherits: true` (the
-   cascading-scalar idiom — a scroll-driven ancestor exposes the ramp to descendant
-   chrome, the `--ui-scale`/`--glass-level` pattern), distinct from the per-element
-   non-inheriting specular/progress cohort. `initial-value: 0` is the safe resting ramp
-   (the unregistered fallback paints it; on a non-supporting engine the JS reader writes
-   `progress.value` and the consumer reads the ref, not this custom). The typed
-   `<number>` lets the engine interpolate the ramp rather than the textual rep (a bare
-   unregistered var() snaps — the `--border-progress-fill`/`--dock-morph-t` precedent). */
-@property --scroll-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-/* BC.W-SCROLL-CHROME — the floating-chrome COLLAPSE fraction. `--chrome-collapse-t`
-   is the 0..1 collapse scalar `useScrollChrome` ramps off the scroll reader's
-   direction + range (0 = fully expanded, 1 = fully collapsed). The `.scroll-chrome`
-   recipe (scroll-chrome.css) reads it for the COMPOSITOR shrink/quiet ramp:
-   `transform: scale()/translateY()` (the SPATIAL leg), `opacity` (bounded above a
-   never-invisible floor — the NN/g pale-fade trap forbidden), and the shadow LIFT as
-   content scrolls under (Apple "as text scrolls underneath, shadows become more
-   prominent"). It NEVER drives the resting `backdrop-filter` blur (the
-   W-DOCK-SHRINK-BLUR fence — the shrunken bar is crisp glass, not a blurry mess).
-   Registered typed so a bare `var()` INTERPOLATES the ramp rather than snapping (the
-   `--scroll-t`/`--dock-morph-t` precedent); `inherits: true` (the cascading-scalar
-   idiom — a scroll-driven ancestor exposes the collapse to descendant chrome, the
-   `--scroll-t`/`--glass-level` pattern, distinct from the per-element non-inheriting
-   specular cohort). `initial-value: 0` is the PERSISTENT rest (the iOS-27 default — a
-   bare chrome does NOT collapse; the unregistered fallback paints it too, so the
-   recipe is byte-identical to the expanded chrome when unwired). */
-@property --chrome-collapse-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}

package/src/styles/tokens/scale-paper.css

@@ -80,8 +80,10 @@
     --opacity-icon-muted: 0.8;
 
     --focus-ring-width: 2px;
-    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 30%, transparent),
-        0 0 8px color-mix(in srgb, var(--ring) 15%, transparent);
+    /* BG.W-DESHADCN — reads the renamed house `--focus-ring-color` (off the shadcn
+       `--ring`); this is the SOLE `--focus-ring-color` reader (the one retint knob). */
+    --focus-ring-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--focus-ring-color) 30%, transparent),
+        0 0 8px color-mix(in srgb, var(--focus-ring-color) 15%, transparent);
     --focus-ring: var(--focus-ring-shadow);
 
     /* BB.W-INVALID-RING — the destructive twin of --focus-ring-shadow. The
@@ -150,7 +152,8 @@
        — the token-first axis. This is the SINGLE rhythm source: the demo full-bleed
        page grid (`.grid-bg`, story-hero.css) AND the library card-interior register
        (`.paper-grid`, cards.css) both read it (the two-parallel-28px/32px-systems
-       fix). The LIQUID full-bleed sibling (`<PaperGrid>`, BC.W-VIZ-PAPERGRID)
+       fix). The LIQUID full-bleed sibling (`<LiquidGrid>`, BG.W-GRID-AFFINE — the
+       viz renamed off `<PaperGrid>`; the static `.paper-grid` card register is untouched)
        re-uses the SAME rhythm — one pitch, two registers (static page-bg vs liquid). */
     --grid-pitch: 1rem;
     --grid-major: 5rem;

package/src/styles/tokens/scheme-motion.css

@@ -149,6 +149,16 @@
     --motion-stagger-default: 80ms;
     --motion-stagger-relaxed: 120ms;
 
+    /* Per-GLYPH stagger increment (BG.W-SECTION-TYPEWRITER-FADEUP). The DENSER
+       cadence for a per-CHARACTER cascade (a word/heading typing itself in) —
+       tighter than the per-ROW `--motion-stagger-*` tiers because dozens of
+       glyphs ride it and a row-scale gap would drag the tail past the eye. The
+       single source the `.char-stagger` recipe (typography/utilities.css) AND
+       the demo's `.story-section__heading` per-glyph reveal (story-hero.css)
+       both read — DRY, retune the whole per-glyph rhythm from ONE `:root`
+       override. Was a hardcoded `30ms` literal at both sites. */
+    --char-stagger-step: 30ms;
+
     /* ═══════════════════════════════════════════════
        §2.W BD.W-MOTION-WEIGHT — the GOVERNING motion scalar (rest decl)
 
@@ -200,6 +210,11 @@
         1.16 78%, 1.06 86%, 1.012 92%, 1
     );
 
+    /* §2.Y BG.W-VIZ-REVEAL-BLOOM — the procedural-viz entrance-bloom clock (the ONE
+       consumer-retune knob for the one-shot `@keyframes substrate-reveal-bloom` in
+       viz-reveal.css; rides `--ease-cartoon-punch` for the ~+13% brightness overshoot). */
+    --substrate-reveal-duration: 1100ms;
+
     /* ═══════════════════════════════════════════════
        §2.A AMBIENT MOTION — Pulse aura tokens
 
@@ -341,6 +356,42 @@
     --motion-weight: 0;
 }
 
+/* ═══════════════════════════════════════════════
+   BI.W-TEMPO — the loud-scope tempo re-pin (the deliberate-weight carve, M11).
+
+   `--motion-tempo` (property-regs.css, initial 1.0 identity) is the global motion
+   TIME knob — a consumer sets `:root { --motion-tempo: 0.85 }` (the "options for
+   longer" clause of UF-G1) and every utility-UI spring clock + JS response tightens
+   in lockstep. The loud iOS-27 surfaces — the DOCK morph, the DRAWER sheet, the DECK
+   slide (composing `.liquid-stage`) — re-pin `--motion-tempo: 1` on their OWN scope
+   so the deliberately-landed BD.W-ANIM-IOS27-TUNE weight HOLDS where it was tuned,
+   while the ambient utility chrome follows the consumer's global scale (the SAME
+   `.liquid-stage { --motion-weight: 1 }` loud-driver carve pattern, for the TIME
+   axis). `:where()` keeps the specificity at 0 so a consumer's explicit per-instance
+   override still wins. At the 1.0 identity default this is a byte-no-op; it engages
+   ONLY when a consumer scales tempo globally.
+
+   ⟂ `--motion-weight` (magnitude) ⟂ `--ui-scale` (geometry) — the three scalars stay
+   disjoint (the NAMING FENCE). */
+:where(.glass-dock, .glass-drawer, .liquid-stage) {
+    --motion-tempo: 1;
+}
+
+/* ═══════════════════════════════════════════════
+   BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the calm opt-out
+
+   The DEFAULT interactive-transition SPATIAL register is now spring-derived
+   (`--transition-liquid-spatial` = the `smooth` spring, generated in scheme-spring.css),
+   so every interactive surface inherits weight on its scale/translate/rotate legs by
+   default — weight is a property of the transition VOCABULARY, not a per-site
+   `--motion-weight` checklist. A surface that wants the flat no-weight register opts
+   OUT explicitly via `.motion-calm` (the `<Card>` calm register, a data-dense table,
+   any consumer scope). The swap is scoped to the SPATIAL token; the EFFECTS legs keep
+   their `--ease-standard` bezier either way (the motion-canon P1 split). */
+.motion-calm {
+    --transition-liquid-spatial: var(--ease-standard);
+}
+
 /* ═══════════════════════════════════════════════
    BD.W-MOTION-WEIGHT / BD.W-CARTOON-PUNCH — the PRM carve
 
@@ -359,5 +410,13 @@
     :root {
         --motion-weight: 0;
         --ease-cartoon-punch: var(--ease-standard);
+        /* BG.W-LIQUID-WEIGHT-DEFAULT (F5.2) — the interactive-spatial DEFAULT loses its
+           overshoot under reduce (the vestibular floor). The re-alias is homed in
+           scheme-spring.css BESIDE its base `--transition-liquid-spatial: var(--spring-*)`
+           default (NOT here): both target `:root` at equal specificity, and scheme-spring.css
+           is @import-ed LAST of the token partials, so a re-alias parked in THIS earlier-
+           imported partial LOSES the source-order cascade to scheme-spring's base default and
+           the overshoot survives under reduce (the F5.2 paint-judge FAIL). The winning home is
+           the last-imported partial, after the base default — see scheme-spring.css. */
     }
 }