@mkbabb/glass-ui 3.11.2 → 3.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.11.2",
-    "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
+    "version": "3.13.0",
+    "description": "Glassmorphic design system \u2014 Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -79,9 +79,6 @@
             "status-dot": [
                 "dist/status-dot.d.ts"
             ],
-            "deck-progress": [
-                "dist/deck-progress.d.ts"
-            ],
             "pulse": [
                 "dist/pulse.d.ts"
             ],
@@ -91,9 +88,6 @@
             "toggle-chip": [
                 "dist/toggle-chip.d.ts"
             ],
-            "glass-panel": [
-                "dist/glass-panel.d.ts"
-            ],
             "sortable-list": [
                 "dist/sortable-list.d.ts"
             ],
@@ -112,24 +106,27 @@
             "instrument-chassis": [
                 "dist/instrument-chassis.d.ts"
             ],
-            "instrument-rail": [
-                "dist/instrument-rail.d.ts"
-            ],
             "hover-popover": [
                 "dist/hover-popover.d.ts"
             ],
             "configurator": [
                 "dist/configurator.d.ts"
             ],
-            "header-ribbon": [
-                "dist/header-ribbon.d.ts"
-            ],
             "constellation": [
                 "dist/constellation.d.ts"
             ],
             "scrolling-text": [
                 "dist/scrolling-text.d.ts"
             ],
+            "underline": [
+                "dist/underline.d.ts"
+            ],
+            "glass-panel": [
+                "dist/glass-panel.d.ts"
+            ],
+            "header-ribbon": [
+                "dist/header-ribbon.d.ts"
+            ],
             "forms": [
                 "dist/forms.d.ts"
             ],
@@ -154,6 +151,9 @@
             "motion-core": [
                 "dist/motion-core.d.ts"
             ],
+            "motion-curves": [
+                "dist/motion-curves.d.ts"
+            ],
             "button": [
                 "dist/button.d.ts"
             ],
@@ -312,18 +312,10 @@
             "types": "./dist/watercolor-dot.d.ts",
             "import": "./dist/watercolor-dot.js"
         },
-        "./handmark": {
-            "types": "./dist/handmark.d.ts",
-            "import": "./dist/handmark.js"
-        },
         "./configurator": {
             "types": "./dist/configurator.d.ts",
             "import": "./dist/configurator.js"
         },
-        "./header-ribbon": {
-            "types": "./dist/header-ribbon.d.ts",
-            "import": "./dist/header-ribbon.js"
-        },
         "./constellation": {
             "types": "./dist/constellation.d.ts",
             "import": "./dist/constellation.js"
@@ -348,10 +340,6 @@
             "types": "./dist/status-dot.d.ts",
             "import": "./dist/status-dot.js"
         },
-        "./deck-progress": {
-            "types": "./dist/deck-progress.d.ts",
-            "import": "./dist/deck-progress.js"
-        },
         "./pulse": {
             "types": "./dist/pulse.d.ts",
             "import": "./dist/pulse.js"
@@ -364,10 +352,6 @@
             "types": "./dist/toggle-chip.d.ts",
             "import": "./dist/toggle-chip.js"
         },
-        "./glass-panel": {
-            "types": "./dist/glass-panel.d.ts",
-            "import": "./dist/glass-panel.js"
-        },
         "./sortable-list": {
             "types": "./dist/sortable-list.d.ts",
             "import": "./dist/sortable-list.js"
@@ -392,10 +376,6 @@
             "types": "./dist/instrument-chassis.d.ts",
             "import": "./dist/instrument-chassis.js"
         },
-        "./instrument-rail": {
-            "types": "./dist/instrument-rail.d.ts",
-            "import": "./dist/instrument-rail.js"
-        },
         "./hover-popover": {
             "types": "./dist/hover-popover.d.ts",
             "import": "./dist/hover-popover.js"
@@ -404,6 +384,18 @@
             "types": "./dist/scrolling-text.d.ts",
             "import": "./dist/scrolling-text.js"
         },
+        "./underline": {
+            "types": "./dist/underline.d.ts",
+            "import": "./dist/underline.js"
+        },
+        "./glass-panel": {
+            "types": "./dist/glass-panel.d.ts",
+            "import": "./dist/glass-panel.js"
+        },
+        "./header-ribbon": {
+            "types": "./dist/header-ribbon.d.ts",
+            "import": "./dist/header-ribbon.js"
+        },
         "./forms": {
             "types": "./dist/forms.d.ts",
             "import": "./dist/forms.js"
@@ -432,6 +424,10 @@
             "types": "./dist/motion-core.d.ts",
             "import": "./dist/motion-core.js"
         },
+        "./motion-curves": {
+            "types": "./dist/motion-curves.d.ts",
+            "import": "./dist/motion-curves.js"
+        },
         "./button": {
             "types": "./dist/button.d.ts",
             "import": "./dist/button.js"
@@ -575,27 +571,51 @@
         "proof:dock-hold-contract": "node scripts/proof-dock-hold-contract.mjs",
         "proof:dock-opacity-lockstep": "node scripts/proof-dock-opacity-lockstep.mjs",
         "proof:dock-a11y-contract": "vitest run tests/components/custom/dock/DockLayerRail.a11y.test.ts",
-        "proof:dock-collapse-contract": "vitest run tests/components/custom/dock/GlassDock.collapse-contract.test.ts",
-        "proof:expand-reparent-determinism": "vitest run tests/components/custom/expandable-container/single-surface-reparent.test.ts",
-        "proof:dark-flip-settle": "vitest run tests/composables/dark/flip-settle.test.ts",
-        "proof:control-glass-register": "vitest run tests/components/ui/toggle-group/glass-register.test.ts tests/components/ui/slider/track-frost.test.ts",
         "proof:dock-vocabulary": "node scripts/proof-dock-vocabulary.mjs",
         "proof:dock-region-model": "node scripts/proof-dock-region-model.mjs",
         "proof:dock-perfection": "node scripts/proof-dock-perfection.mjs",
         "proof:dock-unify": "node scripts/proof-dock-unify.mjs",
+        "proof:dock-rail-hairline": "node scripts/proof-dock-rail-hairline.mjs",
+        "proof:dock-no-scale-pop": "node scripts/proof-dock-no-scale-pop.mjs",
+        "proof:dock-tap-integrity": "node scripts/proof-dock-tap-integrity.mjs",
+        "proof:dock-taxonomy": "node scripts/proof-dock-taxonomy.mjs",
+        "proof:rail-extend": "node scripts/proof-rail-extend.mjs",
+        "proof:dock-contextual-layers": "node scripts/proof-dock-contextual-layers.mjs",
+        "proof:morph-showcase": "node scripts/proof-morph-showcase.mjs",
+        "proof:blob-page": "node scripts/proof-blob-page.mjs",
+        "proof:blob-page-fence": "node scripts/proof-blob-page-fence.mjs",
+        "proof:motion-demo": "node scripts/proof-motion-demo.mjs",
+        "proof:motion2": "node scripts/proof-motion2.mjs",
+        "proof:rail3": "node scripts/proof-rail3.mjs",
+        "proof:az-reflect": "node scripts/proof-az-reflect.mjs",
+        "proof:az-final": "node scripts/proof-az-final.mjs",
+        "proof:shell-identity": "node scripts/proof-shell-identity.mjs",
+        "proof:blob-studio": "node scripts/proof-blob-studio.mjs",
+        "proof:blob-studio-config": "node scripts/proof-blob-studio-config.mjs",
+        "proof:shell-config": "node scripts/proof-shell-config.mjs",
+        "proof:adaptive-glass-live": "node scripts/proof-adaptive-glass-live.mjs",
+        "proof:adaptive-observer": "node scripts/proof-adaptive-observer.mjs",
+        "proof:register-ios": "node scripts/proof-register-ios.mjs",
         "proof:dock-css-carve": "node scripts/proof-dock-css-carve.mjs",
         "proof:dock-css-split": "node scripts/proof-dock-controls-split.mjs",
         "proof:design-idiom-localization": "node scripts/proof-design-idiom-localization.mjs",
+        "proof:hierarchy": "node scripts/proof-hierarchy.mjs",
+        "proof:suffuse": "node scripts/proof-suffuse.mjs",
+        "proof:colocation": "node scripts/proof-colocation.mjs",
         "proof:tailwind-v4-idiom": "node scripts/proof-tailwind-v4-idiom.mjs",
         "proof:au-w9-consumers": "node scripts/proof-au-w9-consumers.mjs",
         "proof:shadow-contract": "node scripts/proof-shadow-contract.mjs",
         "proof:squircle-language": "node scripts/proof-squircle-language.mjs",
         "proof:card-cartoon-consumers": "node scripts/proof-card-cartoon-consumers.mjs",
+        "proof:card-veil": "node scripts/proof-card-veil.mjs",
+        "proof:glass-panel-tiers": "node scripts/proof-glass-panel-tiers.mjs",
+        "proof:metric-core": "node scripts/proof-metric-core.mjs",
         "proof:doc-consistency": "node scripts/proof-doc-consistency.mjs",
         "proof:au-w0-reground": "node scripts/proof-au-w0-reground.mjs",
         "proof:ay-w0-reground": "node scripts/proof-ay-w0-reground.mjs",
         "proof:au-w1-design": "node scripts/proof-au-w1-design.mjs",
         "proof:au-final": "node scripts/proof-au-final.mjs",
+        "proof:ay-final": "node scripts/proof-ay-final.mjs",
         "proof:strict-templates": "node scripts/proof-strict-templates.mjs",
         "proof:peer-optional": "node scripts/proof-peer-optional.mjs",
         "proof:vueuse-free-root": "node scripts/proof-vueuse-free-root.mjs",
@@ -617,7 +637,7 @@
         "proof:blob-value-free": "node scripts/proof-blob-value-free.mjs",
         "proof:motion-composables-consumer": "node scripts/proof-motion-composables-consumer.mjs",
         "proof:motion-value-free": "node scripts/proof-motion-value-free.mjs",
-        "proof:no-value-default": "node scripts/proof-no-value-default.mjs",
+        "proof:motion-suite": "node scripts/proof-motion-suite.mjs",
         "proof:blob-space-gamma": "node scripts/proof-blob-space-gamma.mjs",
         "proof:blob-smin-normalized": "node scripts/proof-blob-smin-normalized.mjs",
         "proof:blob-gradient-unit-length": "node scripts/proof-blob-gradient-unit-length.mjs",
@@ -629,7 +649,6 @@
         "proof:aurora-space-gamma": "node scripts/proof-aurora-space-gamma.mjs",
         "proof:aurora-oklch-interp": "node scripts/proof-aurora-oklch-interp.mjs",
         "proof:aurora-derive-gamut": "vitest run tests/components/custom/aurora/derive-color.test.ts",
-        "proof:aurora-paper-ground": "vitest run tests/components/custom/aurora/paper-ground.test.ts",
         "proof:aurora-tensor-field": "node scripts/proof-aurora-tensor-field.mjs && vitest run tests/components/custom/aurora/painterly.test.ts",
         "proof:aurora-impasto-relight": "node scripts/proof-aurora-impasto-relight.mjs",
         "proof:aurora-vangogh-preset": "node scripts/proof-aurora-vangogh-preset.mjs",
@@ -647,7 +666,11 @@
         "proof:blob-color-equivalence": "vitest run tests/components/custom/goo-blob/blob-color-equivalence.test.ts",
         "proof:fail-explicit": "node scripts/proof-fail-explicit.mjs",
         "proof:no-god-module": "node scripts/proof-no-god-module.mjs",
+        "proof:composable-return-types": "node scripts/proof-composable-return-types.mjs",
         "proof:no-legacy-commentary": "node scripts/proof-no-legacy-commentary.mjs",
+        "proof:no-retired-survivor": "node scripts/proof-no-retired-survivor.mjs",
+        "proof:tag-parity": "node scripts/proof-tag-parity.mjs",
+        "proof:var-in-arbitrary-guard": "node scripts/proof-var-in-arbitrary-guard.mjs",
         "proof:story-language": "node scripts/proof-story-language.mjs",
         "proof:gate-detrap": "node scripts/proof-gate-detrap.mjs",
         "proof:liquid-glass-tokens": "node scripts/proof-liquid-glass-tokens.mjs",
@@ -655,6 +678,7 @@
         "proof:di-consistency": "node scripts/proof-di-consistency.mjs",
         "proof:no-nested-import": "node scripts/proof-no-nested-import.mjs",
         "proof:no-test-in-src": "node scripts/proof-no-test-in-src.mjs",
+        "proof:no-scoped-global": "node scripts/proof-no-scoped-global.mjs",
         "proof:spring-tokens-synced": "node scripts/proof-spring-tokens-synced.mjs",
         "proof:offscreen-pause": "node scripts/proof-offscreen-pause.mjs",
         "proof:constellation-substrate-single": "node scripts/proof-constellation-substrate-single.mjs",
@@ -669,16 +693,9 @@
         "proof:resolve-canvas-color": "vitest run tests/composables/glass/canvas2d/resolveCanvasColor.test.ts",
         "proof:text-highlight": "vitest run tests/composables/motion/text-highlight-home.test.ts tests/composables/motion/useTextHighlight.test.ts",
         "proof:constellation-field": "vitest run tests/components/custom/constellation/constellationField.test.ts",
+        "proof:constellation-gen": "node scripts/proof-constellation-gen.mjs",
         "proof:input-invalid-aria": "node scripts/proof-input-invalid-aria.mjs",
         "proof:subpath-enumeration": "node scripts/proof-subpath-enumeration.mjs",
-        "proof:handmark-export": "node scripts/proof-handmark-export.mjs",
-        "proof:handmark-tests": "vitest run tests/components/custom/handmark",
-        "proof:no-disco-star": "node scripts/proof-no-disco-star.mjs",
-        "proof:gold-ink-contrast": "node scripts/proof-gold-ink-contrast.mjs",
-        "proof:gold-seal-roundtrip": "node scripts/proof-gold-seal-roundtrip.mjs",
-        "proof:glass-gilt": "node scripts/proof-glass-gilt.mjs",
-        "proof:crayon-wipe-compositor": "node scripts/proof-crayon-wipe-compositor.mjs",
-        "proof:metric-badge-record": "vitest run tests/components/custom/metric-badge/MetricBadge.record.test.ts",
         "proof:no-orphan-composable": "node scripts/proof-no-orphan-composable.mjs",
         "proof:speedtest-boundary": "node scripts/proof-speedtest-boundary.mjs",
         "proof:glass-material-unified": "node scripts/proof-glass-material-unified.mjs",
@@ -689,9 +706,19 @@
         "proof:aurora-chrome-idiomatic": "node scripts/proof-aurora-chrome-idiomatic.mjs",
         "proof:aurora-preset-roster": "node scripts/proof-aurora-preset-roster.mjs",
         "proof:ui-scale": "node scripts/proof-ui-scale.mjs",
+        "proof:touch-target": "node scripts/proof-touch-target.mjs",
+        "proof:webkit-backdrop": "node scripts/proof-webkit-backdrop.mjs",
+        "proof:nested-backdrop-budget": "node scripts/proof-nested-backdrop-budget.mjs",
         "proof:dropdown-type-scale": "node scripts/proof-dropdown-type-scale.mjs",
         "proof:forced-colors-skin": "node scripts/proof-forced-colors-skin.mjs",
         "proof:glass-cohesion": "node scripts/proof-glass-cohesion.mjs",
+        "proof:substrate-cohesion": "node scripts/proof-substrate-cohesion.mjs",
+        "proof:component-orphan": "node scripts/proof-component-orphan.mjs",
+        "proof:substrate-staging": "node scripts/proof-substrate-staging.mjs",
+        "proof:easter-eggs": "node scripts/proof-easter-eggs.mjs",
+        "proof:instrument-scope": "node scripts/proof-instrument-scope.mjs",
+        "proof:readme-meta-clean": "node scripts/proof-readme-meta-clean.mjs",
+        "proof:convergence-fit-coherent": "node scripts/proof-convergence-fit-coherent.mjs",
         "proof:adaptive-glass": "node scripts/proof-adaptive-glass.mjs",
         "proof:dark-semantic-contrast": "node scripts/proof-dark-semantic-contrast.mjs",
         "proof:glass-material-demo": "node scripts/proof-glass-material-demo.mjs",
@@ -715,9 +742,11 @@
         "proof:all": "node scripts/gates.mjs --run local",
         "proof:live-verified-ledger": "node scripts/proof-live-verified-ledger.mjs --tranche=AY",
         "proof:live-verified-ledger:ay": "node scripts/proof-live-verified-ledger.mjs --tranche=AY",
+        "proof:live-verified-ledger:az": "node scripts/proof-live-verified-ledger.mjs --tranche=AZ",
         "proof:live-verified-ledger:ax": "node scripts/proof-live-verified-ledger.mjs --tranche=AX",
         "proof:disposition-live": "node scripts/proof-disposition-live.mjs",
         "proof:gen-ci-fresh": "node scripts/proof-gen-ci-fresh.mjs",
+        "proof:gate-manifest-sound": "node scripts/proof-gate-manifest-sound.mjs",
         "gates:verify-ci": "node scripts/gates.mjs --verify-ci",
         "gates:emit-ci": "node scripts/gates.mjs --emit-ci",
         "profile:bundle": "node scripts/profile-bundle.mjs",
@@ -733,13 +762,11 @@
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
         "@mkbabb/keyframes.js": "^2.2.0 || ^3.0.0 || ^4.0.0",
-        "@mkbabb/pencil-boil": "^0.4.1",
         "@mkbabb/value.js": "^0.10.0 || ^0.11.0",
         "@vueuse/core": "^14.0",
         "class-variance-authority": "^0.7",
         "clsx": "^2.0",
         "embla-carousel-vue": "^8.0",
-        "perfect-freehand": "^1.2.3",
         "reka-ui": "^2.0",
         "tailwindcss": "^4.0",
         "tw-animate-css": "^1.2.5",
@@ -756,23 +783,16 @@
         "@mkbabb/keyframes.js": {
             "optional": true
         },
-        "@mkbabb/pencil-boil": {
-            "optional": true
-        },
         "@mkbabb/value.js": {
             "optional": true
         },
-        "perfect-freehand": {
-            "optional": true
-        },
         "tw-animate-css": {
             "optional": true
         }
     },
     "devDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.2.0",
-        "@mkbabb/pencil-boil": "^0.4.1",
+        "@mkbabb/keyframes.js": "^4.1.0",
         "@mkbabb/value.js": "^0.10.0",
         "@tailwindcss/postcss": "^4.3.0",
         "@tailwindcss/vite": "^4.3.0",

package/src/styles/animations.css

@@ -141,129 +141,33 @@
     100% { background-position: -200% 0; }
 }
 
-/* ── Gold ONE-SHOT round-trip: the pressed seal (E7c — the to-AND-fro) ──────────
+/* ── Sparkle sweep: four-point star traverses a surface diagonally ──
  *
- * A seal is PRESSED, catches the light ONCE, and RECEDES — a full ease-IN-AND-OUT
- * envelope, not a fire-and-yank. The defect this replaces: `.text-gilt` used the
- * infinite `gold-shimmer-slide` (`1 forwards`), which HELD its gilt terminal frame
- * forever, and the consumer ripped the class off on a `setTimeout` — but the gold
- * gradient lives in `background-image`, which no transition covers, so it SNAPPED
- * off in one frame.
- *
- * This keyframe owns the WHOLE envelope and RESOLVES TO THE RESTING INK — there is
- * nothing left to yank when it ends:
- *   - `-webkit-text-fill-color` (and `color`) ride from the figure's OWN ink
- *     (`currentColor` — the consumer's data-pole green/red) → `transparent` (the
- *     gilt gradient shows through `background-clip:text`) → back to `currentColor`.
- *     So the gilt FADES UP and FADES DOWN; at 0% and 100% the figure paints its own
- *     ink and the gradient is occluded — the resting state, by construction.
- *   - `background-position` slides the gradient across through the same window.
- * No `forwards` is needed (the final keyframe IS rest), so on completion the class
- * may simply stop mattering — the snap is structurally impossible. */
-@keyframes gold-shimmer-pulse {
+ * Reserved for the chassis primary-action hover (dock-tab-button[data-tier="primary"])
+ * and the `Complete!` shimmer cycle. Single keyframe, ~600ms per pass; the
+ * consumer rule sets the duration and easing. Reduced-motion guard at the
+ * consumer site (per surface — not all sparkle uses share the same gate).
+ */
+@keyframes sparkle-sweep {
     0% {
-        background-position: 150% 0;
-        color: currentColor;
-        -webkit-text-fill-color: currentColor;
+        transform: translate(-30%, -30%) scale(0.5);
+        opacity: 0;
     }
     25% {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
-    }
-    75% {
-        color: transparent;
-        -webkit-text-fill-color: transparent;
+        opacity: 1;
     }
     100% {
-        background-position: -150% 0;
-        color: currentColor;
-        -webkit-text-fill-color: currentColor;
-    }
-}
-
-/* ── Crayon-wipe: the scroll-scrubbed draw-on (D6.c M1) ──────────────────────
- *
- * The bidirectional, scroll-scrubbed DRAW-ON of a hand-mark (the crayon/pen
- * underline, a drawn rule). The wipe is a `clip-path: inset()` of the LEFT edge
- * only — the mark draws from inset(0 100% 0 0) (fully clipped from the right, so
- * NOTHING shows) to inset(0) (fully revealed) — so the underline DRAWS as the
- * figure scrolls into view and UN-DRAWS as it scrolls back up. `clip-path` is the
- * compositor-eligible, FILTER-STABLE wipe (the medium's grain `feTurbulence`
- * rasters ONCE and is untouched by the clip — the cardinal "no per-frame raster"
- * discipline ds2-motion-field M1 names): clip-path animates on the compositor and
- * never re-runs the static filter, unlike a `stroke-dashoffset` draw under the
- * grain filter (which re-rasters per frame). The grammar mirrors scroll-driven.css
- * (the `view()`/`scroll()` timeline home): the keyframe lives here (the shared
- * @keyframes register); a consumer binds it to a NAMED `view-timeline` so the
- * draw-on SCRUBS bidirectionally with scroll (forward → draws, back → un-draws),
- * never a one-shot. The `.crayon-wipe` utility below is the binding.
- *
- * The keyframe itself is timeline-agnostic — it is equally a load-clock draw-on
- * (bound to a keyframes.js Sequence) or a scroll scrub (bound to a view-timeline).
- * The DEFAULT consumer is the scroll scrub (the figure-item underline drawing into
- * the lower third), hence the utility's `view()` binding.
- *
- * Reduced-motion: the utility (NOT the keyframe) gates — under PRM the mark is SET
- * to inset(0) (fully drawn, never animated), the correct degrade for a permanent
- * structural draw (information parity: the underline is present, just not drawn).
- */
-@keyframes crayon-wipe {
-    from {
-        /* clipped from the RIGHT by 100% → the mark is fully hidden (nothing
-           drawn yet); the left edge is the pen-tip about to move right. */
-        clip-path: inset(0 100% 0 0);
-    }
-    to {
-        /* fully revealed — the mark is wholly drawn. */
-        clip-path: inset(0 0 0 0);
+        transform: translate(180%, 180%) scale(1.2);
+        opacity: 0;
     }
 }
 
-/* ── .crayon-wipe — bind the wipe to a scroll view-timeline (D6.c M1) ──────────
- * The scroll-scrubbed draw-on utility. A consumer puts `.crayon-wipe` on a
- * hand-mark surface (the underline span, a drawn rule) and the mark draws/un-draws
- * as it scrolls through its OWN `view()` timeline — a bidirectional scrub, free,
- * off the main thread. The animation is `paused` with `animation-timeline: view()`
- * so the scroll position IS the playhead (the native scroll-driven model — the
- * timeline drives the frame, time does not). The named timeline is overridable
- * (`--crayon-wipe-timeline`, default the element's own `view()`) so a consumer can
- * scrub off a SHARED beat timeline (the §--beat-tl the atlas scroll-driven.css
- * names) instead of the per-element view — that is the "named view-timeline so a
- * consumer scrubs a draw-on bidirectionally" contract.
- *
- * @supports-gated + PRM-OUTER-gated, mirroring scroll-driven.css exactly: the
- * whole binding sits under `prefers-reduced-motion: no-preference`, so under PRM
- * the animation never attaches and the mark renders in its terminal `inset(0)`
- * (fully-drawn) state — the static-draw degrade. The draw range is `entry`-keyed
- * (the mark draws as it ENTERS the lower viewport), tunable via
- * `--crayon-wipe-range-{start,end}`. */
-@media (prefers-reduced-motion: no-preference) {
-    @supports ((animation-timeline: view()) and (animation-range: entry)) {
-        .crayon-wipe {
-            animation: crayon-wipe auto linear both;
-            animation-timeline: var(--crayon-wipe-timeline, view(block));
-            animation-range: var(--crayon-wipe-range-start, entry 0%)
-                var(--crayon-wipe-range-end, cover 35%);
-        }
+@media (prefers-reduced-motion: reduce) {
+    @keyframes sparkle-sweep {
+        0%, 100% { opacity: 0; transform: none; }
     }
 }
 
-/* ── Sparkle sweep: TOMBSTONE (D6.b — the disco-star excision) ──
- *
- * @deprecated 3.10 — DELETE in 3.11. The four-point `✦` star sweep was the one
- * garish gesture in the library; the user named it for removal ("remove the disco
- * star from all glass-ui elements"). Every in-tree consumer is re-homed: the
- * `btn-audacious` hover affirmation now rides the specular catch-light alone; the
- * gold-CTA rides the `btn-gold-bg-sweep` metal-catch; the chassis `complete`
- * celebration re-homes to the `.text-gilt` one-shot (utilities.css). The keyframe
- * body is EMPTIED rather than deleted for ONE minor so any out-of-tree consumer
- * (the slides decks) fails SOFT — a no-op animation, not an unknown-animation
- * error. The `--duration-sparkle` token is `@deprecated` alongside (tokens.css).
- * Full delete (this block + the token + the theme bridge) lands in 3.11. */
-@keyframes sparkle-sweep {
-    /* intentionally empty — tombstoned, see deprecation note above */
-}
-
 /* ── Pulse dot bounce: dots variant of <Pulse> ──
  *
  * Three-dot loading indicator. Opacity 0.35 ↔ 1, scale 0.8 ↔ 1.2. Consumer
@@ -451,16 +355,27 @@
      * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
      * non-modal — correct, no scrim). */
     dialog.glass-top-layer::backdrop {
-        background-color: hsl(var(--background) / 0);
+        /* AZ.W-ADAPTIVE-AUTO A5-1 — the modal-scrim dim is the house alpha-derivative
+           `color-mix(in srgb, var(--background) Npct, transparent)`, NOT the invalid
+           `hsl(var(--background) / α)` double-wrap (`--background` is a complete
+           `hsl()` color = `hsl(48 12% 98%)`, so `hsl(hsl(…)/α)` evaluates to nothing
+           and the dim silently did not paint). The `in srgb` axis only — the
+           `--surface-tint-*` house family + the `in oklab` glass tint axis are
+           untouched. */
+        background-color: color-mix(in srgb, var(--background) 0%, transparent);
         backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px));
         transition: display var(--duration-normal) allow-discrete,
                     overlay var(--duration-normal) allow-discrete,
                     background-color var(--duration-normal) var(--ease-standard);
     }
     dialog.glass-top-layer[open]::backdrop {
-        background-color: hsl(var(--background) / var(--top-layer-backdrop-dim, 0.5));
+        background-color: color-mix(
+            in srgb,
+            var(--background) calc(var(--top-layer-backdrop-dim, 0.5) * 100%),
+            transparent
+        );
         @starting-style {
-            background-color: hsl(var(--background) / 0);
+            background-color: color-mix(in srgb, var(--background) 0%, transparent);
         }
     }
 }

package/src/styles/cards.css

@@ -46,3 +46,56 @@
         box-shadow: var(--shadow-cartoon-lg);
     }
 }
+
+/* ── Veil surface decoration (R5-7) ──────────────────────────────
+   The text-legibility PLATE register, ratified by three slides sites (the
+   deck cover subtitle / standfirst / closer lede). Conceptually the W55
+   adaptive-legibility tint applied as a LOCAL plate: a translucent glass
+   fill + blur that darkens content-on-glass over a busy/bright backdrop so
+   text clears AA, but with the BOXED look STRIPPED — no border, no rim, no
+   highlight (the user's read: the border+rim "reads as a dividing line on a
+   text plate"). It is the `surface` sibling of `cartoon` — a decoration-only
+   utility, NOT a tier of its own.
+
+   It routes the glass MATERIAL through the `--glass-*` ladder (`--veil-bg`
+   defaults to the `quiet` rung's adaptive-tint mix, `--veil-blur` to the
+   quiet blur), so the glass-cohesion model sees a sanctioned glass register
+   (the level knob scales the blur; the W55 bright-bucket darkens the fill via
+   the same inheriting tint axis the rung already reads). What it carries on TOP
+   of a bare rung is the THREE veil deltas, each a `--veil-*` knob a consumer
+   retunes:
+
+     border  : none            (--veil-border, the dividing-line strip)
+     shadow  : none            (--veil-shadow, the rim/highlight strip)
+     feather : none (default)  (--veil-feather — an OPTIONAL radial mask that
+               fades the plate edges into the backdrop; off by default so the
+               plate is a clean rectangle, on when a consumer wants the
+               soft-edged "bleed into the page" text-plate look)
+
+   <Card surface="veil"> selects it; `--veil-bg`/`--veil-blur` ride the same
+   `--glass-*` rungs as the ladder, so one `--glass-level` / `--glass-backdrop`
+   override retunes it in lockstep with every other glass surface. */
+@utility veil-surface {
+    /* The glass material — routed through the `--glass-*` ladder so the
+       cohesion model reads a sanctioned glass register, and the W55 adaptive
+       darken (the inheriting `--glass-tint-*` axis) + the `--glass-level` clarity
+       knob reach the plate with NO veil-local recipe. Defaults to the `quiet`
+       rung; a consumer re-points `--veil-bg`/`--veil-blur` to any other rung. */
+    --veil-bg: color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength));
+    --veil-blur: var(--glass-blur-quiet);
+    /* The three veil deltas over a bare rung — each overridable. */
+    --veil-border: none;
+    --veil-shadow: none;
+    --veil-feather: none;
+
+    background: var(--veil-bg);
+    backdrop-filter: var(--veil-blur);
+    border: var(--veil-border);
+    box-shadow: var(--veil-shadow);
+    /* The optional radial feather — a `mask-image` only painted when
+       `--veil-feather` is set to a gradient (default `none` = no mask = a clean
+       rectangle). `mask-image: none` is the identity, so the default plate is
+       unmasked. `mask-image` Baseline 2023-12 — a non-supporting engine ignores
+       it and keeps the clean rectangle. */
+    mask-image: var(--veil-feather);
+}

package/src/styles/configurator.css

@@ -0,0 +1,42 @@
+/* configurator.css — the Configurator HIERARCHY VOCABULARY (AZ.W-HIERARCHY, D6-3).
+ *
+ * The Configurator is the controls chassis the blob + aurora studios compose;
+ * this partial lands the three NAMED hierarchy registers ONCE so every studio
+ * INHERITS a vocabulary (section weight / label register / control rhythm)
+ * rather than a flat undifferentiated stack. The token definitions live in
+ * tokens/offsets-sizing.css (`--configurator-section-*`, `--configurator-preset-row-*`);
+ * this file is where the classes that CONSUME them paint.
+ *
+ * Cascade rung: imported AFTER utilities.css so the `.configurator-section-label`
+ * size/weight overrides the prior flat `text-small font-semibold` register, and
+ * the `.configurator-presets` block-padding override wins over the `py-2`
+ * Tailwind utility on the preset-row wrapper.
+ */
+
+/* 1. Section register — the <ConfiguratorLayer> header label reads as a SECTION
+ *    (√φ subheading, 20.4px / 600), NOT a row. Replaces the flat
+ *    `text-small font-semibold text-foreground` span (D6-3: "section labels read
+ *    flat + undifferentiated"). The two tokens are retunable on the cascade so a
+ *    host can scale the whole section register from one override. */
+.configurator-section-label {
+    font-family: var(--font-text);
+    font-size: var(--configurator-section-size);
+    line-height: var(--type-leading-body);
+    font-weight: var(--configurator-section-weight);
+    letter-spacing: var(--type-tracking-tight);
+    color: var(--foreground);
+}
+
+/* 2. Preset-row PRIMARY-AFFORDANCE lift — the preset picker is the primary
+ *    interaction, so its row breathes ABOVE a body ConfiguratorRow. The token
+ *    drives the SPATIAL rhythm (block-padding + the chip gap), NOT a font-weight
+ *    (D6-3: "the preset row is tight"). `.configurator-presets` ships
+ *    `px-3 py-2` from Tailwind; this rule lifts the block padding to the
+ *    `--configurator-preset-row-weight` floor (10px > the 8px body py) and sets
+ *    the inner chip-list gap to `--configurator-preset-row-gap`. */
+.configurator-presets {
+    padding-block: var(--configurator-preset-row-weight);
+}
+.configurator-presets [role="tablist"] {
+    gap: var(--configurator-preset-row-gap);
+}