@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/completion-seal.css

@@ -1,205 +0,0 @@
-/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal.
- *
- * A determinate process completes and a HERO-SCALE gold mark DRAWS itself onto the
- * surface: the stroke INKS (a `stroke-dashoffset` wipe on the registered `--seal-draw`
- * <percentage>), settles with a small spring overshoot (the `--seal-scale` SPATIAL leg
- * on the seal's own `--spring-snappy`/`--spring-bouncy` clock), and glints ONCE on
- * settle (the `--seal-glint` + the W-AX-METAL-GLOW gold catch-light). It is GOLD because
- * completion is EARNED — the ink reads the W-PHASE-PALETTE completion register
- * (`--phase-complete-color`/`--color-gold`), so a consumer re-inking completion re-inks
- * the seal in lockstep. The seal mints NO new gold token + does NOT re-author the metal
- * glow — it COMPOSES both (the earned-gold register has ONE home).
- *
- * ONE-SHOT: the draw fires ONCE on `play` (the `.completion-seal[data-play]` arm), then
- * holds the static fully-drawn seal — no looping shimmer (the §6 calm register; the disco
- * family stays gone). PRM-gated: under `prefers-reduced-motion: reduce` the seal appears
- * instantly fully-drawn (`--seal-draw: 100%` snap), no stroke animation, no glint sweep
- * (the seal is correct, the motion off — the vestibular floor).
- *
- * COMPOSITOR-ONLY: the draw rides `stroke-dashoffset` (a paint prop) + `transform` (the
- * scale) + `filter`/`opacity` (the glint) — NO layout property animates
- * (`proof:no-layout-animation` holds). The registrations live in
- * tokens/property-regs.css §18 (the specular/border-progress split: the @property reg
- * there, the consumption here). */
-
-.completion-seal {
-    /* The seal stroke ink — the EARNED-gold completion register (Q2). The runtime
-       cascade default is the token form: a consumer (or any ancestor) re-inking
-       `--phase-complete-color` re-inks the seal. The @property `initial-value` literal
-       light-gold is only the non-supporting-engine fallback. */
-    --seal-ink: var(--phase-complete-color, var(--color-gold));
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    /* The settle scale rides the SPATIAL leg — a small overshoot on the seal's own
-       spring clock (NOT a generic --duration-*). Compositor-only (transform). */
-    transform: scale(var(--seal-scale, 1));
-}
-
-/* The PERSONAL-BEST earned-gold garnish (BG.W-SEAL-DISC) — a result that beat the user's
-   historical best re-points the seal ink onto the brighter earned-gold register. The seal
-   mints NO new gold literal — `--seal-best` COMPOSES the gold FAMILY (`--color-gold-light`,
-   the brighter earned gold), so a consumer re-tuning the gold family re-tunes the
-   best-garnish in lockstep (the earned-gold register has ONE home; the Q2 no-re-author
-   fence). Gold is EARNED — the personal-best coin reads a touch brighter, never a new
-   hue. */
-.completion-seal[data-best] {
-    --seal-best: var(--color-gold-light, var(--gold-light));
-    --seal-ink: var(--seal-best);
-}
-
-/* The DISC gesture — the composed earned-coin (disc→ring→check). The three layers stagger
-   on animation-delay off ONE gold-draw mechanism; the sequencing clocks are token-first
-   (a consumer retunes the cadence). The disc FACE lands, then the ring draws around it,
-   then the check draws inside. */
-.completion-seal[data-shape="disc"] {
-    --seal-ring-delay: var(--spring-snappy-duration, 0.34s);
-    --seal-check-delay: calc(var(--spring-snappy-duration, 0.34s) * 2);
-}
-
-/* The disc FACE — the earned-coin the ring draws around. A translucent glass-gold coin
-   (the warm-cream liquid-glass identity — NOT an opaque slab) so the ring + check read as
-   saturated gold ON the whisper-gold face. The fill defaults visible so a non-animating /
-   PRM / non-supporting seal shows the settled coin. Token-first (`--seal-disc-fill`). */
-.completion-seal__disc {
-    fill: var(
-        --seal-disc-fill,
-        color-mix(in oklab, var(--seal-ink), transparent 82%)
-    );
-    stroke: none;
-}
-
-/* The hero-scale gold-draw glyph — an SVG <path>/<circle> stroked in `--seal-ink`. The
-   stroke INKS itself via the `--seal-draw` wipe (a stroke-dashoffset paint, never a
-   fade). The glint reads the W-AX-METAL-GLOW catch-light (composed, not re-authored). */
-.completion-seal__mark {
-    fill: none;
-    stroke: var(--seal-ink);
-    stroke-width: var(--seal-stroke-width, 6);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    /* The stroke-reveal: the dash array is the full path length, the offset rides the
-       `--seal-draw` extent (100% = drawn → offset 0; 0% = undrawn → offset = full
-       length). pathLength="100" normalizes the glyph so the wipe is path-agnostic. */
-    stroke-dasharray: 100;
-    stroke-dashoffset: calc(100 - var(--seal-draw, 100%) / 1%);
-    /* The one-pass gold glint on settle — the W-AX-METAL-GLOW catch-light, scaled by
-       `--seal-glint` (0 at rest → 1 on settle-pass). A drop-shadow halo of the seal's
-       OWN gold ink at the metal-glow radius/strength — composed, never re-authored.
-       The seal is NOT a `.metal-*` element, so the bare `--metal-glow-blur`/`-opacity`
-       (declared scoped inside `.metal-{gold,silver,bronze}`) do not cascade here; the
-       seal CONSUMES THE REGISTER by chaining to the `:root` `-default` retune seam
-       (glass-fx.css), NOT a hardcoded magic-number copy — a consumer who retunes
-       `--metal-glow-blur-default` re-tunes the seal halo in lockstep. */
-    --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
-        calc(var(--metal-glow-blur) * var(--seal-glint, 0))
-        color-mix(
-            in oklab,
-            var(--seal-ink),
-            transparent
-                calc(100% - var(--metal-glow-opacity) * var(--seal-glint, 0) * 100%)
-        )
-    );
-}
-
-/* THE ONE-SHOT DRAW — fires ONCE on `play`, then holds static. PRM-gated: the whole
-   motion sits inside the no-preference gate (under reduce the seal is the static
-   fully-drawn mark, the @property initial-values). The draw is NOT a loop — a single
-   pass each on the stroke-reveal + the settle + the glint. */
-@media (prefers-reduced-motion: no-preference) {
-    /* Every shape's coin lands with the settle overshoot (the root scale, all shapes). */
-    .completion-seal[data-play] {
-        animation: completion-seal-settle var(--spring-bouncy-duration, 0.57s)
-            var(--spring-bouncy) both;
-    }
-    /* The single-mark shapes (check / ring / wordmark) — the ONE draw + settle-glint. */
-    .completion-seal:not([data-shape="disc"])[data-play] .completion-seal__mark {
-        animation:
-            completion-seal-draw var(--spring-snappy-duration, 0.34s)
-                var(--ease-out, ease-out) both,
-            completion-seal-glint var(--spring-snappy-duration, 0.34s)
-                var(--ease-out, ease-out)
-                var(--spring-snappy-duration, 0.34s) both;
-    }
-
-    /* The disc gesture — the three layers stagger disc→ring→check on the ONE draw
-       mechanism (the staggered animation-delays sequence same-clock passes; no fourth
-       recipe). The FACE fades in (opacity), the ring draws around it, then the check
-       draws inside + glints once on its own arrival. */
-    .completion-seal[data-shape="disc"][data-play] .completion-seal__disc {
-        animation: completion-seal-disc-in var(--spring-snappy-duration, 0.34s)
-            var(--ease-out, ease-out) both;
-    }
-    .completion-seal[data-shape="disc"][data-play] .completion-seal__ring {
-        animation: completion-seal-draw var(--spring-snappy-duration, 0.34s)
-            var(--ease-out, ease-out) var(--seal-ring-delay, 0.34s) both;
-    }
-    .completion-seal[data-shape="disc"][data-play] .completion-seal__check {
-        animation:
-            completion-seal-draw var(--spring-snappy-duration, 0.34s)
-                var(--ease-out, ease-out) var(--seal-check-delay, 0.68s) both,
-            completion-seal-glint var(--spring-snappy-duration, 0.34s)
-                var(--ease-out, ease-out)
-                calc(
-                    var(--seal-check-delay, 0.68s) +
-                        var(--spring-snappy-duration, 0.34s)
-                )
-                both;
-    }
-}
-
-/* The stroke-reveal: the gold INKS itself 0→full (a stroke-dashoffset paint wipe — the
-   editorial draw-on). The registered `--seal-draw` interpolates; the offset reads it. */
-@keyframes completion-seal-draw {
-    from {
-        --seal-draw: 0%;
-    }
-    to {
-        --seal-draw: 100%;
-    }
-}
-
-/* The disc FACE materialize (BG.W-SEAL-DISC) — the earned-coin face fades in before the
-   ring draws around it (the first beat of the disc→ring→check gesture). Compositor-only
-   (opacity — a paint channel, NO layout property). `both` fill holds the settled visible
-   face; under PRM (this whole @media block is inert) the face is the static visible coin
-   (the disc's CSS default opacity 1). */
-@keyframes completion-seal-disc-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-/* The settle: the seal lands with a small overshoot (the SPATIAL enter-bounce). The
-   transform scale rides the `--seal-scale` spring; the keyframe nudges the scale once
-   (the §6 calm overshoot — an ENTER may overshoot on arrival). Compositor-only. */
-@keyframes completion-seal-settle {
-    from {
-        --seal-scale: 0.92;
-    }
-    to {
-        --seal-scale: 1;
-    }
-}
-
-/* The glint: a ONE-PASS gold catch-light sweep on settle (0 → peak → 0). NOT a loop —
-   a single pass, then the seal holds static at glint 0 (the metal-glow whisper is the
-   resting register; the disco family stays gone). */
-@keyframes completion-seal-glint {
-    0% {
-        --seal-glint: 0;
-    }
-    45% {
-        --seal-glint: 1;
-    }
-    100% {
-        --seal-glint: 0;
-    }
-}

package/src/styles/configurator.css

@@ -1,359 +0,0 @@
-/* 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.
- */
-
-/* BI.W-CONFIG-IN-SHEET — the ONE section-vs-chrome inline padding anchor + the
- * inter-section card gap. `--configurator-pad-inline` is the SINGLE inline anchor
- * BOTH the sheet chrome (SheetHeader/footer) AND the section rows read, so the
- * section content aligns with the chrome content (UF-A5/GEO-9: the section body no
- * longer indents 12px while the chrome sits at 24px). Inheriting on :root so the
- * gear sheet's `px-(--configurator-pad-inline)` chrome utilities resolve it; a
- * consumer retunes the whole chassis inline rhythm from one override. */
-:root {
-    --configurator-pad-inline: 1rem; /* 16px — the unified section+chrome inline anchor */
-    --configurator-section-gap: 0.5rem; /* 8px — the inter-section card breath */
-}
-
-/* 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);
-}
-/* The gallery track gap — the toggle-button group (BD.W-CONFIG-GALLERY-DOCK
- * retired the `role="tablist"`/`role="tab"` ARIA-contradiction for the
- * toggle-button `role="group"` + `aria-pressed` pattern). The token drives the
- * inter-tile rhythm. */
-.configurator-presets .configurator-gallery-track,
-.configurator-presets [role="group"] {
-    gap: var(--configurator-preset-row-gap);
-}
-
-/* 3. The DIVIDER register — dark-adaptive (BA.W-CONFIG-CHASSIS.1, CFG-4). The
- *    section + inter-row dividers were inline `border-border/40` / `/30` Tailwind
- *    alphas that VANISHED over the W-DARK-MATERIAL dark glass-floating plate
- *    ("the sections run together"). They now read the ONE dark-adaptive
- *    --configurator-divider{,-section} token (minted in tokens/offsets-sizing.css
- *    with a light-dark() arm + the dark-arm.css `.dark` floor) so a visible
- *    luminance step survives BOTH plates. These rules paint only the COLOR; the
- *    `border-b`/`border-t` WIDTH stays on the Tailwind utilities in the SFCs.
- *
- *    Cascade: configurator.css imports after utilities.css, and these element-
- *    targeting selectors override the Tailwind `border-color` default the dropped
- *    `border-border/N` utilities used to set (the utilities are GONE from the SFC
- *    class lists, so there is no competing utility to lose to). The faint section
- *    tonal step (--configurator-section-tint, default transparent on light) reads
- *    behind a <ConfiguratorLayer> so a section reads as a section without a second
- *    heading rung. */
-.configurator-layer {
-    border-color: var(--configurator-divider-section);
-    background-color: var(--configurator-section-tint);
-    /* BI.W-CONFIG-IN-SHEET (Law 1 — the concentric-radius RELAY reader; ruling 11,
-     * sites #1 + #3). A multi-row section wears a CARD radius, never a flush-square
-     * hairline block (UF-A4 / Law 2). The section derives its own corner concentric
-     * with its PARENT ctx — the <Configurator> root (site #1, publishes
-     * --radius-ctx=--radius-panel) OR the gear Sheet (site #3, W-SHEET-RADIUS
-     * publishes --radius-ctx=--radius-dialog) — across the parent's inner pad:
-     *   border-radius = max(floor, ctx − inset)
-     * so the inner corner stays concentric with the outer and never rounds below the
-     * 4px floor. This SUPERSEDES the prior "no per-section radius / flush border-b"
-     * contract (ConfiguratorLayer.vue) — a clean break: the section is now a full
-     * (all-side) bordered card, not a bottom-hairline-divided flat block. NO
-     * `overflow: hidden` on the card: the section-header trigger's OUTSET `.focus-ring`
-     * (box-shadow) must NOT be clipped by the card box (a keyboard-a11y regression), and
-     * at the concentric card radius the header hover-fill's rounded-corner poke is
-     * sub-perceptual — the rounded border + section tint carry the card read. */
-    border-radius: max(
-        var(--radius-floor),
-        calc(var(--radius-ctx) - var(--radius-inset))
-    );
-}
-/* The inter-section card breath — a gap between stacked section cards (replacing the
- * retired flush `border-b last:border-b-0` divider). Adjacent-sibling so only the
- * INTER-section seams get the gap; the first card stays flush to its container top. */
-.configurator-layer + .configurator-layer {
-    margin-block-start: var(--configurator-section-gap);
-}
-/* The ONE inline-padding anchor (BI.W-CONFIG-IN-SHEET) — the section header trigger
- * AND the section body read var(--configurator-pad-inline), the SAME anchor the sheet
- * chrome reads, so the section content aligns with the chrome content (UF-A5/GEO-9).
- * The section SFC drops its raw `px-3` (12px) literal; the vertical `py-2` stays. */
-.configurator-layer-trigger {
-    padding-inline: var(--configurator-pad-inline);
-}
-.configurator-layer-body {
-    padding-inline: var(--configurator-pad-inline);
-}
-.configurator-layer-body[data-dividers] > * + * {
-    border-color: var(--configurator-divider);
-}
-
-/* The Configurator.vue chrome dividers (the aside top rule, the preset-row +
- * footer separators) read the inter-row divider token — the SAME dark-adaptive
- * register, so the whole instrument's hairline grammar lifts in lockstep. The
- * SFC drops the inline `border-border/40` from these elements; this rule paints
- * the color. */
-.configurator-aside,
-.configurator-presets,
-.configurator-footer {
-    border-color: var(--configurator-divider);
-}
-
-/* 4. The DESKTOP TWO-COLUMN LAYOUT — controls on the RIGHT (BC.W-CONFIG-RIGHT).
- *
- * The configurator's own desktop grid was the next victim of the BA.W-EMISSION
- * self-emission class (CLAUDE.md): the SFC carried the structural layout as a
- * `lg:grid-cols-[minmax(0,1fr)_minmax(var(--configurator-aside-min,280px),var(--configurator-aside-max,360px))]`
- * arbitrary utility — a `lg:` arbitrary bracket with NESTED `var()` + commas +
- * `minmax()` that dies in a consumer's content-scan (the same failure that killed
- * the Select collision-bound). So every studio rendered SINGLE-column (controls
- * stacked BELOW the stage) on desktop: `getComputedStyle(cfg).gridTemplateColumns`
- * read ONE `1131px` track at 1280px width, the aside below the stage, never right.
- *
- * The fix is the BA.W-EMISSION discipline: the structural layout lives in SHIPPED
- * CSS as a precompiled rule scoped to `[data-slot="configurator"]`, NEVER
- * load-bearing on a content-scan reach (the SAME mechanism the Select bound got in
- * select.css). Below `lg` the base `grid grid-cols-1` + the mobile row template
- * (emitted fine — a plain utility) keeps the single-column stack: stage above,
- * controls below (a narrow viewport has no room for side-by-side). At `lg`+ this
- * rule sets the two-column geometry off the SAME `--configurator-aside-{min,max}`
- * token band (default 280px/360px, retunable via the `asideWidth` prop) the dead
- * utility read — the token contract is byte-identical, only the MECHANISM moves
- * onto shipped CSS. The explicit mobile rows reset to `none` so one auto row
- * stretches to the taller column. */
-/* The MOBILE / base placement of the three section-level children (the gallery
- * moved OUT of the aside to a grid sibling — BD.W-CONFIG-GALLERY-DOCK). Single
- * column, three rows: gallery → stage → aside. The base `grid-template-rows`
- * (`auto minmax(stage-min,auto) 1fr`) ships from the SFC; these rules pin each
- * child to its row so the source order (gallery, stage, aside) reads correctly.
- * When no gallery renders the `auto` row collapses to 0 (an empty track). */
-[data-slot="configurator"] > [data-gallery-dock] {
-    grid-row: 1;
-    grid-column: 1;
-}
-[data-slot="configurator"] > .configurator-stage {
-    grid-row: 2;
-    grid-column: 1;
-}
-[data-slot="configurator"] > .configurator-aside {
-    grid-row: 3;
-    grid-column: 1;
-}
-
-@media (min-width: 1024px) {
-    /* The DESKTOP TWO-COLUMN geometry. Two columns (stage 1fr | aside band) and
-     * two rows: the gallery row (auto) over the body row (1fr). The placement of
-     * the gallery dock is the ONLY thing the `data-gallery` axis swaps. */
-    [data-slot="configurator"] {
-        grid-template-columns: minmax(0, 1fr)
-            minmax(
-                var(--configurator-aside-min, 280px),
-                var(--configurator-aside-max, 360px)
-            );
-        grid-template-rows: auto minmax(0, 1fr);
-    }
-
-    /* data-gallery="aside" (the default, inspector idiom) — the gallery sits in
-     * the ASIDE column, row 1, above the controls; the stage spans BOTH rows on
-     * the left. Byte-equivalent to the legacy "preset row inside the aside top". */
-    [data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
-        grid-row: 1;
-        grid-column: 2;
-    }
-    [data-slot="configurator"][data-gallery="aside"] > .configurator-stage {
-        grid-row: 1 / span 2;
-        grid-column: 1;
-    }
-    [data-slot="configurator"][data-gallery="aside"] > .configurator-aside {
-        grid-row: 2;
-        grid-column: 2;
-    }
-
-    /* data-gallery="top" (the §2.1 reflow) — the gallery is a LARGE full-width
-     * dock spanning BOTH columns up-top; the stage (col 1) + controls (col 2)
-     * reclaim the full height in row 2. The gallery is now ~studio-width, not the
-     * 360px gutter — ~5 φ-tall tiles visible, horizontally scrollable. */
-    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
-        grid-row: 1;
-        grid-column: 1 / span 2;
-    }
-    [data-slot="configurator"][data-gallery="top"] > .configurator-stage {
-        grid-row: 2;
-        grid-column: 1;
-    }
-    [data-slot="configurator"][data-gallery="top"] > .configurator-aside {
-        grid-row: 2;
-        grid-column: 2;
-    }
-}
-
-/* The gallery-dock chrome divider — the hairline under the up-top dock / the
- * left edge of the aside-placed dock. A dark-adaptive border off the same token
- * the rest of the instrument reads, so it survives both glass plates. */
-[data-slot="configurator"] > [data-gallery-dock] {
-    border-color: var(--configurator-divider);
-}
-[data-slot="configurator"][data-gallery="aside"] > [data-gallery-dock] {
-    border-bottom-width: 1px;
-}
-@media (min-width: 1024px) {
-    /* The up-top dock carries a bottom hairline; the aside-placed dock carries it
-     * too (above the controls). */
-    [data-slot="configurator"][data-gallery="top"] > [data-gallery-dock] {
-        border-bottom-width: 1px;
-    }
-}
-
-/* ── The WARM-GLASS gallery tiles + the device-free field-well ────────────────
- * BD.W-CONFIG-GALLERY-DOCK §5/§B1. The tile is a `.glass-capsule` warm-glass cel
- * (composed in the SFC class list) — the §3 colourful field reads THROUGH, never
- * a flat opaque bg-card scrim. These rules add the GEOMETRY the capsule register
- * doesn't carry: the φ-tall card shape, the rounded field-well, the active ring,
- * the loading shimmer. No new material is minted — the transmissive composite is
- * the shared `.glass-capsule`; the cartoon cast is the shared `.cartoon-cast`. */
-
-/* The big field-well tile (the PresetPickerRow / baked-thumbnail form). A φ-tall
- * card: a 16:10 field-well crowned by a label band. The capsule register paints
- * the warm-glass body; this rule sets the card radius + the column flex so the
- * well meets the rounded crown with zero bg leak. */
-.configurator-preset-tile {
-    inline-size: clamp(160px, 22vw, 232px);
-    border-radius: var(--radius-card);
-    /* The capsule fill is a warm-glass PILL by default (--radius-pill); a TILE is
-     * a card, so re-point the geometry to the card radius here. The transmissive
-     * fill + rim + cast all carry from .glass-capsule. */
-}
-
-/* BG.W-PRESET-RIBBON-TOP (F7.6) — the LARGE full-width TOP RIBBON tile floor. When
- * the gallery is pinned up-top (data-gallery="top") the presets span the whole studio
- * width, not the 360px aside gutter, so the tiles read one rung LARGER than the aside
- * form — the "LARGE ribbon" the aurora studio wants. Still the SAME
- * .configurator-preset-tile card (no new material, the warm-glass capsule + cast carry
- * from the base rule); only the inline-size floor lifts, and it is scoped to the top
- * placement so the aside inspector idiom stays byte-unchanged. The clamp MIN (200px)
- * clears the ≥72px LARGE-ribbon floor with headroom; the FadingScroll port (the
- * .configurator-gallery-track) still clips the horizontal overflow. */
-[data-slot="configurator"][data-gallery="top"] .configurator-preset-tile {
-    inline-size: clamp(200px, 20vw, 288px);
-}
-
-/* The §3 field-well — the device-free `auroraFallbackGround` background-image is
- * set inline per tile; this rule sets the cover sizing + the rounded inner crown.
- * The well is the COLOURFUL field; the warm-glass capsule frames it. */
-.configurator-preset-well {
-    background-size: cover;
-    background-position: center;
-    /* a smooth bilinear upscale of the tiny raster (the per-quadrant mean
-     * luminance is preserved — the certify band reads true). */
-    image-rendering: auto;
-}
-
-/* The loading state — a warm shimmer until the field build lands (the field
- * build is synchronous + cheap, so this is a sub-frame flicker at most). */
-.configurator-preset-well.is-loading {
-    background-image: linear-gradient(
-        100deg,
-        color-mix(in oklab, var(--card) 84%, transparent) 30%,
-        color-mix(in oklab, var(--foreground) 8%, var(--card)) 50%,
-        color-mix(in oklab, var(--card) 84%, transparent) 70%
-    );
-    background-size: 200% 100%;
-    animation: configurator-preset-shimmer 1.2s ease-in-out infinite;
-}
-@media (prefers-reduced-motion: reduce) {
-    .configurator-preset-well.is-loading {
-        animation: none;
-    }
-}
-@keyframes configurator-preset-shimmer {
-    from {
-        background-position: 200% 0;
-    }
-    to {
-        background-position: -200% 0;
-    }
-}
-
-/* The active tile ring — a 2px foreground-keyed inset crown over the warm-glass
- * cel (an inset ring never clips on the scroll axis, the PresetPickerRow note).
- * Composes with the capsule's own rim; the cast deepens to `-lg` in the SFC. */
-.configurator-preset-tile.is-active {
-    box-shadow:
-        /* BG.W-DESHADCN — the active-tile crown reads the renamed house
-           `--focus-ring-color` (off the shadcn `--ring`; value unchanged). */
-        inset 0 0 0 2px var(--focus-ring-color),
-        var(--shadow-cartoon-lg);
-}
-
-/* The compact CHIP form (the default fallback gallery — text-only preset pills).
- * The capsule register paints the warm-glass body; this rule restores the pill
- * radius the capsule already ships, and the active chip reads a selected fill via
- * the `--glass-capsule-fill` override hook (no fork). */
-.configurator-preset-chip {
-    border-radius: var(--radius-pill);
-}
-.configurator-preset-chip.is-active {
-    /* the selected rung — re-point the capsule fill toward the quiet glass-tint
-     * selected register via the documented override hook (NO new composite). */
-    --glass-capsule-fill: var(--glass-bg-quiet);
-}
-
-/* 5. The SIDE FLIP — a data-attr, default RIGHT (BC.W-CONFIG-RIGHT).
- *
- * The aside side moves off the dead `lg:col-start-*` arbitrary utility (gated
- * behind the same silent-JIT-failure class) onto a `data-aside-side` attr the SFC
- * binds. `right` (the default) is the NATURAL source order — stage in column 1,
- * aside in column 2 — so it needs NO override (the bare desktop rule above already
- * places them left→right). `left` is the reversible taste-level flip: it swaps the
- * grid-COLUMN targets so the aside paints on the LEFT, while the DOM/tab order
- * stays stage→aside (the side is grid-cell PLACEMENT + border-side only, never an
- * `order:`/`row-reverse` that would desync the visual order from the DOM reading
- * order — WCAG 1.3.2/2.4.3 inviolate, the AM.W0 contract). Below `lg` (single
- * column) neither side has meaning. */
-@media (min-width: 1024px) {
-    /* The flip swaps the two BODY columns (stage ↔ aside) while DOM/tab order stays
-     * gallery→stage→aside. The selectors carry `>`-child specificity to match the
-     * `data-gallery` placement rules above (which also use `>`); a bare descendant
-     * selector would lose the cascade to those and the flip would no-op. The aside
-     * keeps its body row (row 2); only the column target moves. The aside-placed
-     * gallery dock follows the aside to column 1. */
-    [data-slot="configurator"][data-aside-side="left"] > .configurator-stage {
-        grid-column: 2;
-    }
-    [data-slot="configurator"][data-aside-side="left"] > .configurator-aside {
-        grid-column: 1;
-    }
-    [data-slot="configurator"][data-aside-side="left"][data-gallery="aside"]
-        > [data-gallery-dock] {
-        grid-column: 1;
-    }
-}

package/src/styles/dialog-placement.css

@@ -1,68 +0,0 @@
-/*
- * dialog-placement.css — the overlay-band Dialog side-slide structural positioning,
- * precompiled (BI.W-DIALOG-PLACEMENT — the Sheet fold; the BG.W-SHEET-INSET-ROOT
- * emission INVERSE, terminalized onto Dialog `placement`).
- *
- * THE FOLD: Sheet's side-slide is a Dialog PAINT axis now (`<DialogContent placement=
- * top|right|bottom|left>`), same reka `DialogRoot` + FocusScope. The retired Sheet
- * authored its STRUCTURAL positioning (position/inset/size/z-index) as CVA Tailwind
- * utilities — load-bearing GEOMETRY that DIES in any consumer whose Tailwind content-scan
- * does not reach glass-ui's compiled dist (the D7 configurator-drawer break). This rule
- * ships that geometry PRECOMPILED as a plain `[data-slot="dialog-content"][data-placement]`
- * attribute-selector rule, so it ALWAYS emits in dist/glass-ui.css regardless of JIT reach.
- * DialogContent.vue mints `data-slot="dialog-content"` + `:data-placement` on the portaled
- * content node for a side placement (center emits NO `data-placement`, so none of these
- * rules touch a centered modal); the CVA keeps ONLY decoration (glass tier, overlay padding
- * ladder, per-side rounding/border, the `sheet-animate` + slide-in/out data-state pairs).
- *
- * SPECIFICITY — the rules are wrapped in `:where()` (0,0,0). The library ships the DEFAULT
- * positioning; a consumer's own sizing utility (the demo PresetEditor's `w-full sm:max-w-md`,
- * a `.w-full`/`.h-full` class at 0,1,0) WINS over the `:where()` default, so the side sheet
- * stays consumer-overridable (the token-first / consumer-overrides identity). UNLAYERED (like
- * select.css's [data-slot] bound) so it never loses to an unlayered utility. Locked by
- * proof:emission (the overlay-band inverse clause).
- *
- * PHYSICAL properties (width/height/max-width/top/right/bottom/left) mirror the retired
- * Sheet CVA utilities EXACTLY (`inset-y-0 right-0 h-full w-3/4 sm:max-w-sm` &c.), so a
- * consumer's physical sizing override resolves cleanly by SPECIFICITY against the same
- * property name — no logical-vs-physical cascade ambiguity, and the enter/exit slide travel
- * is byte-identical to the retired Sheet frame-series.
- */
-:where([data-slot="dialog-content"][data-placement]) {
-    position: fixed;
-    z-index: var(--z-modal);
-}
-
-/* Top/bottom side sheets span the full width (left:0;right:0), anchor to their edge. */
-:where([data-slot="dialog-content"][data-placement="top"]) {
-    left: 0;
-    right: 0;
-    top: 0;
-}
-:where([data-slot="dialog-content"][data-placement="bottom"]) {
-    left: 0;
-    right: 0;
-    bottom: 0;
-}
-
-/* Left/right side sheets span the full height (top:0;bottom:0), 3/4 width, capped at sm. */
-:where([data-slot="dialog-content"][data-placement="left"]) {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    height: 100%;
-    width: 75%;
-}
-:where([data-slot="dialog-content"][data-placement="right"]) {
-    top: 0;
-    bottom: 0;
-    right: 0;
-    height: 100%;
-    width: 75%;
-}
-@media (min-width: 40rem) {
-    :where([data-slot="dialog-content"][data-placement="left"]),
-    :where([data-slot="dialog-content"][data-placement="right"]) {
-        max-width: 24rem; /* the prior sm:max-w-sm */
-    }
-}