@mkbabb/glass-ui 6.0.0 → 7.0.0

package/src/styles/utilities/metal.css

@@ -1,272 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════════════
-   BB.W-METAL-SHIMMER — the brand-metal utility family
-   ═══════════════════════════════════════════════════════════════════════════
-   ONE single-home partial for the gold·silver·bronze metal register (so a new
-   metal pop is ONE class, not a re-paste — the W-SUFFUSE icon-chip consolidation
-   discipline). Three registers, ALL metal-PARAMETERIZED off the SAME shared recipe
-   reading the `--metal-shimmer-color` channel + its four resolved stop slots:
-
-     • `.metal-{gold,silver,bronze}` — the text-clip metal gradient (the
-       `.gold-shimmer` recipe GENERALIZED): a `linear-gradient(90deg, dark, light,
-       base, light, dark)` band off the bound metal quad, `background-clip: text`.
-     • `.metal-{gold,silver,bronze}-border` — the swept metallic RIM (the §N6
-       selected-item-border consumer): the SAME `--metal-shimmer-color`-bound
-       gradient painted as a MASKED BAND on a `::before` overlay (the house
-       border-ring idiom, BI.W-METAL-RIM-BAND), swept by the SAME keyframe — so the
-       rim FOLLOWS `border-radius` (a `border-image` squared the corners).
-     • `.metal-rainbow-rim` — the prismatic gilt-figure / record-badge rim: it
-       COMPOSES W-GLASS-ACCENT's `--glass-accent` rim seam (it does NOT re-author
-       the rim) by binding the accent channel to a swept rainbow hue.
-
-   The PARAMETERIZATION: `--metal-shimmer-color` is the metal-NAME marker each
-   `.metal-{name}` SETS (`gold`/`silver`/`bronze`); the shared recipe resolves the
-   gradient off the four `--metal-stop-*` slots each class binds to its quad. The
-   `metal-shimmer-sweep` keyframe (animations.css) is PURE position — ZERO baked
-   metal color — so the SAME keyframe sweeps any of the three metals depending only
-   on which slots the class bound. A silver/bronze sweep is a NEW CLASS that binds
-   the slots, NEVER a forked keyframe (the N-copy this wave exists to kill).
-
-   THE PRM-STATIC BRACKET (the §6 calm register, the `.gold-shimmer` model byte-
-   faithfully): every utility paints the FULL static metal gradient at REST (the
-   load-bearing visual — the metal sheen itself); ONLY the `animation:` line sits
-   inside `@media (prefers-reduced-motion: no-preference)`. A PRM user sees the
-   full static metal gradient WITHOUT the slide — the metal still READS as metal,
-   the motion is the only thing gated. The sweep is a slow `--duration-metal` (6s)
-   one-pass — the disco family is GONE and STAYS gone (no sparkle/grain/ripple). */
-
-@layer components {
-    /* ── The shared metal recipe (the metal-agnostic engine) ─────────────────
-       The four stop slots default to GOLD (the neutral metal — so a bare
-       `--metal-shimmer-color`-bearing surface paints gold, matching the
-       `.gold-shimmer` precedent); each `.metal-{name}` re-binds them to its quad.
-       The `--metal-shimmer-color` marker carries the metal NAME for the gate's
-       parameterization assert + for any consumer query. */
-    .metal-gold,
-    .metal-silver,
-    .metal-bronze {
-        --metal-stop-dark: var(--color-gold-dark);
-        --metal-stop-light: var(--color-gold-light);
-        --metal-stop-base: var(--color-gold);
-        background: linear-gradient(
-            90deg,
-            var(--metal-stop-dark),
-            var(--metal-stop-light),
-            var(--metal-stop-base),
-            var(--metal-stop-light),
-            var(--metal-stop-dark)
-        );
-        background-size: 250% 100%;
-        background-clip: text;
-        -webkit-background-clip: text;
-        color: transparent;
-
-        /* ── BC.W-AX-METAL-GLOW — the gold catch-light (the lit-metal halo) ──────
-           A soft glow halo of the metal's OWN base hue behind the gradient text-clip
-           so the gold reads as LIT metal (light catching its surface), not a flat
-           gradient fill. Because `background-clip: text` makes the text transparent,
-           a `filter: drop-shadow` follows the clipped glyph shape — the halo hugs the
-           letters. ONE recipe on the shared selector (every metal lit, never a per-
-           metal re-paste); the glow reads `--metal-stop-base` so gold halos gold,
-           silver halos silver, bronze halos bronze (NOT a fixed gold-on-every-metal
-           mismatch). The earned-gold register (Q2): `.metal-gold`'s base is
-           `--color-gold`, so the gold catch-light is the earned-gold warm glow.
-
-           PRM-STATIC: the glow paints HERE, at rest, OUTSIDE the no-preference
-           bracket — the lit metal reads for PRM users; ONLY the sweep `animation:`
-           is gated (the §6 calm register; the disco family stays gone — this is a
-           soft warm whisper bounded by `--metal-glow-opacity`, not a neon bloom). */
-        --metal-glow-blur: var(--metal-glow-blur-default, 0.5em);
-        --metal-glow-opacity: var(--metal-glow-opacity-default, 0.35);
-        filter: drop-shadow(
-            0 0 var(--metal-glow-blur)
-                color-mix(
-                    in srgb,
-                    var(--metal-stop-base) calc(var(--metal-glow-opacity) * 100%),
-                    transparent
-                )
-        );
-    }
-
-    /* Per-metal: set the channel marker + re-bind the stop slots to the quad. */
-    .metal-gold {
-        --metal-shimmer-color: gold;
-        --metal-stop-dark: var(--color-gold-dark);
-        --metal-stop-light: var(--color-gold-light);
-        --metal-stop-base: var(--color-gold);
-    }
-    .metal-silver {
-        --metal-shimmer-color: silver;
-        --metal-stop-dark: var(--color-silver-dark);
-        --metal-stop-light: var(--color-silver-light);
-        --metal-stop-base: var(--color-silver);
-    }
-    .metal-bronze {
-        --metal-shimmer-color: bronze;
-        --metal-stop-dark: var(--color-bronze-dark);
-        --metal-stop-light: var(--color-bronze-light);
-        --metal-stop-base: var(--color-bronze);
-    }
-
-    /* ── The swept metallic RIM — a MASKED BAND on a dedicated ::before overlay ──
-       (BI.W-METAL-RIM-BAND — the ruling-10 band-on-overlay reform.)
-
-       `border-image` SQUARES the corners on a rounded host (UF-A7 / FAM-4 — the
-       exact defect BorderProgress's masked-conic avoided), so the swept rim is
-       re-expressed as the house border-ring idiom (the in-repo precedent at
-       border-progress.css:55-66): a `--metal-shimmer-color`-bound gradient painted
-       on a `::before` OVERLAY whose `mask-composite: exclude` cuts a border-box
-       fill AGAINST a padding-box fill, leaving ONLY the border band — which FOLLOWS
-       `border-radius` exactly. The band lives on the OVERLAY, never the host
-       (ruling 10): the host's own content/backdrop is untouched (a glass card
-       keeps its interior; the rim hugs its radii — the pass-4b direct-host
-       application was the regression pass-5 re-forms).
-
-       The `metal-shimmer-sweep` keyframe (pure `background-position`, animations.css)
-       rides the ::before band UNCHANGED — ONE keyframe, both registers (text-clip +
-       rim). `border-image` is DELETED (clean break, no alias). */
-    .metal-gold-border,
-    .metal-silver-border,
-    .metal-bronze-border {
-        --metal-stop-dark: var(--color-gold-dark);
-        --metal-stop-light: var(--color-gold-light);
-        --metal-stop-base: var(--color-gold);
-    }
-
-    /* ── The masked-band overlay — MANDATORY @supports gate ──────────────────
-       Without the gate a mask-composite gap engine would paint the gradient as a
-       FULL BOX fill (a real break). With it the rim reads on the genuine band; the
-       `@supports not (…)` fall (below) keeps a solid metal inset ring so the rim
-       still READS (only the travelling sheen is lost — an honest degrade, the
-       primary rim present; NOT a masking fallback). Safari 26 takes this path. */
-    @supports (mask-composite: exclude) {
-        .metal-gold-border,
-        .metal-silver-border,
-        .metal-bronze-border {
-            /* the positioning context the inset:0 overlay resolves against. */
-            position: relative;
-        }
-        .metal-gold-border::before,
-        .metal-silver-border::before,
-        .metal-bronze-border::before {
-            content: "";
-            position: absolute;
-            inset: 0;
-            border-radius: inherit;
-            /* the `border` width IS the band thickness the mask cuts out. */
-            border: var(--metal-border-width, 2px) solid transparent;
-            pointer-events: none;
-            /* the swept metal gradient — the SAME --metal-stop-* slots the
-               text-clip metals resolve, off the host's --metal-shimmer-color quad
-               (custom properties inherit onto the ::before). */
-            background: linear-gradient(
-                90deg,
-                var(--metal-stop-dark),
-                var(--metal-stop-light),
-                var(--metal-stop-base),
-                var(--metal-stop-light),
-                var(--metal-stop-dark)
-            );
-            background-size: 250% 100%;
-            /* THE RADIUS-FOLLOWING CUT-OUT — paint a border-box fill, EXCLUDE a
-               padding-box fill, leaving only the border band (follows radius; a
-               border-image cannot). The house border-ring idiom. */
-            -webkit-mask:
-                linear-gradient(#fff 0 0) padding-box,
-                linear-gradient(#fff 0 0) border-box;
-            -webkit-mask-composite: xor;
-            mask:
-                linear-gradient(#fff 0 0) padding-box,
-                linear-gradient(#fff 0 0) border-box;
-            mask-composite: exclude;
-        }
-    }
-
-    /* ── The honest degrade (metal-base inset ring) ──────────────────────────
-       On a gap engine (no `mask-composite`) the rim paints a SOLID inset ring in
-       the metal's OWN base hue — it follows the host `border-radius` (box-shadow
-       inset does) and still READS as a metal rim; only the travelling sheen is
-       lost. The primary rim is present — this is NOT a masking fallback. */
-    @supports not (mask-composite: exclude) {
-        .metal-gold-border,
-        .metal-silver-border,
-        .metal-bronze-border {
-            box-shadow: inset 0 0 0 var(--metal-border-width, 2px)
-                var(--metal-stop-base);
-        }
-    }
-
-    .metal-gold-border {
-        --metal-shimmer-color: gold;
-        --metal-stop-dark: var(--color-gold-dark);
-        --metal-stop-light: var(--color-gold-light);
-        --metal-stop-base: var(--color-gold);
-    }
-    .metal-silver-border {
-        --metal-shimmer-color: silver;
-        --metal-stop-dark: var(--color-silver-dark);
-        --metal-stop-light: var(--color-silver-light);
-        --metal-stop-base: var(--color-silver);
-    }
-    .metal-bronze-border {
-        --metal-shimmer-color: bronze;
-        --metal-stop-dark: var(--color-bronze-dark);
-        --metal-stop-light: var(--color-bronze-light);
-        --metal-stop-base: var(--color-bronze);
-    }
-
-    /* ── The prismatic rainbow rim (the gilt-figure / record-badge sheen) ─────
-       COMPOSES W-GLASS-ACCENT's `--glass-accent` rim seam (it binds the accent
-       channel, it does NOT re-author the rim `color-mix`/`::before`). The host is
-       a glass surface (carrying the `--glass-material-rim` ring + the
-       `--glass-border-accent` border W-GLASS-ACCENT minted); this utility drives
-       the accent through the spectrum so the rim sheen SHIFTS through the rainbow.
-       `--glass-accent` is a typed `<color>` `@property` (NOT animatable as a
-       conic per-frame), so the prismatic shift is the swept metal-gradient overlay
-       PLUS the accent engaged at a metal-warm hue — the rim reads as a shifting
-       metallic sheen over the W-GLASS-ACCENT rim. The accent STRENGTH lifts to a
-       rim whisper (the demo specimen engages ~45%, the accent's documented ceiling
-       for the rim/glint). The sweep is the SAME `metal-shimmer-sweep` over the
-       rainbow band on the host's own background. */
-    .metal-rainbow-rim {
-        /* Engage W-GLASS-ACCENT's rim seam at a warm-metal hue + the rim whisper
-           strength (the accent channel — NOT a second rim recipe). */
-        --glass-accent: var(--color-gold);
-        --glass-accent-strength: 45%;
-        --metal-shimmer-color: rainbow;
-        /* The swept prismatic band rides the host's own background-image (the rim
-           ring + border come from the W-GLASS-ACCENT seam the host already carries). */
-        background-image: linear-gradient(
-            90deg,
-            var(--rainbow-red),
-            var(--rainbow-orange),
-            var(--rainbow-yellow),
-            var(--rainbow-green),
-            var(--rainbow-blue),
-            var(--rainbow-indigo),
-            var(--rainbow-violet),
-            var(--rainbow-red)
-        );
-        background-size: 250% 100%;
-        background-clip: border-box;
-    }
-
-    /* ── The PRM-static bracket: the ONLY motion declaration ──────────────────
-       Every metal utility paints the static gradient above (un-bracketed — the
-       metal READS for PRM users); the `animation:` is the sole thing gated. The
-       slow `--duration-metal` (6s) clock — the calm dignified pass. */
-    @media (prefers-reduced-motion: no-preference) {
-        /* the text-clip metals + the rainbow rim sweep on the HOST background; the
-           `-border` metals sweep on their `::before` band overlay (BI.W-METAL-RIM-
-           BAND — the band now lives on the overlay, so the sweep does too). ONE
-           keyframe, both registers. */
-        .metal-gold,
-        .metal-silver,
-        .metal-bronze,
-        .metal-rainbow-rim,
-        .metal-gold-border::before,
-        .metal-silver-border::before,
-        .metal-bronze-border::before {
-            animation: metal-shimmer-sweep var(--duration-metal) linear infinite;
-        }
-    }
-}

package/src/styles/utilities.css

@@ -1,24 +0,0 @@
-/* Shared utility classes
- *
- * ── Thin @import ROOT (cohesion-aware carve) ───────────────────────────────
- * The utility body is carved into cohesive `utilities/*.css` partials (each
- * under the 500-line no-god-module bound), @import-ed below in CASCADE ORDER.
- * The @layer components base block (split at the metric-badge seam into
- * base/components AND, at BB.W-CARVE3, at the
- * post-tap-squish seam into base/base-misc — all adjacent same-layer blocks,
- * isomorphic), and the @utility button cluster keep their source order.
- * Accessibility modes load once at the end of styles/index.css. See
- * docs/precepts/design-idioms.md §cohesion-aware partials.
- */
-
-/* CSS @import rules must precede every other rule. The partials @import in
-   cascade order (base.css's post-tap-squish tail was carved into base-misc.css at
-   BB.W-CARVE3 — an adjacent same-`@layer components` block at the next slot, so
-   the cascade is unchanged). BB.W-METAL-SHIMMER homes `metal.css` right after
-   `base-misc.css` (its `.gold-shimmer` sibling — both `@layer components` metal
-   registers; the metal family is cohesive with the re-pointed gold-shimmer): */
-@import "./utilities/base.css";
-@import "./utilities/base-misc.css";
-@import "./utilities/metal.css";
-@import "./utilities/components.css";
-@import "./utilities/btn.css";

package/src/styles/view-transition.css

@@ -1,67 +0,0 @@
-/*
- * view-transition.css — the View-Transitions CSS substrate (AQ.W5 §Design 3b).
- *
- * Cascade rung after scroll-driven.css. Token-first shared-class recipes for the
- * group-transition case — the substrate the `useViewTransition` helper
- * (`@mkbabb/glass-ui/motion-core`) pairs with. The helper wraps the DOM
- * mutation; this CSS owns the LOOK of the cross-fade/slide. The consumer adds
- * `view-transition-class: gl-list-item` plus a UNIQUE `view-transition-name`
- * per tracked element (the runtime MANDATORY — ≤ 1 element per name per state,
- * else the transition is skipped silently).
- *
- * Consumed across the AQ↔muster J seam: J.W5's verdict re-rank tags each row
- * `view-transition-class: gl-list-item; view-transition-name: row-<id>` and
- * calls `startViewTransition(() => render())`; the dock layer swap (W6) reuses
- * the same group recipe.
- *
- * Baseline: same-document `view-transitions` + `view-transition-class` = Newly
- * Available. The helper's instant-update fallback (calls `mutate()` synchronously
- * when `document.startViewTransition` is absent) is the ≤ 20-LOC feature-detected
- * fallback — no CSS counterpart is needed because a non-supporting engine simply
- * never generates the `::view-transition*` pseudo tree.
- *
- * Reduced-motion: `animation: none` on every VT pseudo. The native swap still
- * runs (state mutates instantly), just without motion — the correct PRM degrade.
- */
-
-@media (prefers-reduced-motion: reduce) {
-    ::view-transition-group(*),
-    ::view-transition-old(*),
-    ::view-transition-new(*) {
-        animation: none !important;
-    }
-}
-
-/* Shared group class — consumers add `view-transition-class: gl-list-item` on
- * each tracked element plus a unique `view-transition-name` per element. */
-::view-transition-group(.gl-list-item) {
-    /* BA.W-GLASS-CAL Unit 3 — the duration fallback rides the bouncy spring's
-       OWN settle clock (`--spring-bouncy-duration`) so the default VT bounce
-       plays at its physical settle; a consumer still overrides via `--vt-duration`. */
-    animation-duration: var(--vt-duration, var(--spring-bouncy-duration));
-    animation-timing-function: var(--vt-ease, var(--spring-bouncy));
-}
-
-/* Added / removed members — the `:only-child` trick from the group guide: a
- * member present in only ONE of the old/new states slides instead of cross-fades. */
-::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; }
-::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; }
-
-/* AX.W01 — the dock COLLAPSE View-Transitions recipe is RETIRED. The
- * `::view-transition-group(.gl-dock-layer)` group + its `:active-view-transition-type
- * (dock-expand|dock-collapse|layer-forward|layer-back)` asymmetric curve fork are
- * DELETED: VT crossfades RASTERIZED snapshots — the wrong primitive for a layout
- * morph (the "taffy"-stretch + text-blur + uncaptured-animating-ancestor desync +
- * the co-mounted-docks snapshot-DROP). The dock collapse↔expand (and inner
- * pane-swap) now morphs off the ONE `--dock-morph-t` spring scalar
- * (`useLayerTransition` + `dock.css`), one clock on every engine. The SEPARABLE
- * per-instance `view-transition-name` ROUTE-morph seam on the dock root stays
- * (GlassDock.vue `rootVtStyle`) for the consumer's page/route geometry-morph — it
- * is no longer the dock's own collapse mechanism. The `.gl-list-item` group recipe
- * (non-dock) is UNTOUCHED above. */
-
-@keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
-@keyframes gl-vt-slide-out { to   { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
-
-/* Keep the non-transitioned UI interactive while the snapshot animates. */
-::view-transition { pointer-events: none; }

package/src/styles/viz-reveal.css

@@ -1,63 +0,0 @@
-/* BI.W-E10-AURORA-ENTRANCE (value.js T-60) — the PALETTE-HONEST one-shot
- * cold-first-VISIBLE procedural-viz entrance.
- *
- * A procedural-viz CANVAS materializes: it fades in from transparent (`opacity`) with
- * a gentle warm LIFT (`filter: brightness()/saturate()` PULSES up and settles). The
- * whole ramp is PALETTE-HONEST — brightness and saturate NEVER dip below 1, so the
- * entrance never transits a `brightness<1`/`saturate<1` GRAY VEIL over the chromatic
- * field (the T-60 condemned form: the prior `from { brightness(0.4) saturate(0.7) }`
- * dim floor, which — stamped while the canvas still sat at the consumer's `opacity:0`
- * — opened the visible arrival INSIDE a `brightness 0.54–0.83` desaturated stage: the
- * "pulses to gray" the owner named). The field's OWN colors carry the entrance; the
- * bloom only lifts their light, it never dims or desaturates them.
- *
- * A FIELD bloom — the canvas rect stays scale(1) (no box-zoom gutter). Compositor-only
- * (opacity + filter, the W-MOTION-CANON P5 EFFECTS channel). The peak is EXPLICIT in
- * the keyframe (the 55% stop), so the animation rides a monotone `--ease-out` (NOT the
- * extrapolating `--ease-cartoon-punch`, whose overshoot would dip the settle segment
- * BELOW 1 and re-introduce the condemned dim tail).
- *
- * THE DOOR (BI.W-E10 / T-60): the aurora runtime opts OUT of this bloom by default
- * (`revealBloom: false`) — the aurora materializes as its palette-derived GROUND with
- * the canvas OPACITY cross-fade over it, so a second `filter`-bloom would double the
- * entrance; it never sets `data-substrate-reveal`. The blob + the line-art vizzes keep
- * it (now palette-honest). Both runtimes expose the `revealBloom` consumer door.
- *
- * THE TARGET is the CANVAS ([data-substrate-reveal]) — NOT a `.viz-canvas-host`
- * wrapper: the blob's resting `drop-shadow` filter lives on ITS wrapper, so targeting
- * the canvas never collides with a resting wrapper filter. NO `animation-fill-mode`
- * that PERMANENTLY holds a settle filter — the animation reverts to the canvas's own
- * (no) filter post-settle (brightness(1) saturate(1) opacity(1) == no filter/full
- * opacity, a seamless revert).
- *
- * THE LEAF (createCanvasLifecycle.ts) sets the one-shot `data-substrate-reveal` attr
- * the moment the canvas FIRST becomes visible (a dedicated one-shot IntersectionObserver
- * — never at arm(), which a content-skipped / below-fold viz would burn invisibly). The
- * `revealFired` guard keeps it ONE-SHOT → ZERO second bloom on scroll-off-and-back.
- *
- * PRM — the `animation:` line sits inside `@media (prefers-reduced-motion: no-preference)`
- * AND the leaf skips the attr under reduce, so the field paints settled from frame 0
- * (no fade, no luminance pulse — instant settled). The vestibular floor. */
-
-@keyframes substrate-reveal-bloom {
-    from {
-        opacity: 0;
-        filter: brightness(1) saturate(1);
-    }
-    55% {
-        /* the lit bloom peak — a warm luminance + saturation LIFT, NEVER a dim
-           veil: brightness and saturate stay ≥ 1 the whole way (palette-honest). */
-        filter: brightness(1.08) saturate(1.05);
-    }
-    to {
-        opacity: 1;
-        filter: brightness(1) saturate(1);
-    }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-    canvas[data-substrate-reveal] {
-        animation: substrate-reveal-bloom var(--substrate-reveal-duration)
-            var(--ease-out);
-    }
-}