@mkbabb/glass-ui 2.0.0 → 3.0.0

package/dist/styles/dock.css

@@ -22,6 +22,29 @@
         --dock-motion-resize: var(--duration-normal) var(--spring-snappy);
     }
 
+    /* Shared four-state contract — the focus-visible ring + disabled paint are
+       identical across every dock control, so they are expressed ONCE here as a
+       comma group over the control family rather than copied per rule-set. The
+       group keeps full class+pseudo specificity (NOT `:where()`, which would
+       zero the class and let a per-control :hover box-shadow override the focus
+       ring). Per-control transition extensions (the box-shadow fade on
+       focus-visible) stay with their own selectors below where they differ. */
+    .dock-icon-button:focus-visible,
+    .dock-tab-button:focus-visible,
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-icon-button:disabled,
+    .dock-tab-button:disabled,
+    .dock-select-trigger:disabled,
+    .dock-dropdown-trigger:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
     .glass-dock {
         --dock-surface-blur: var(--glass-blur-dock, var(--glass-blur-wash));
         /* J.W3.C — vertical-rail max-block + horizontal max-inline caps
@@ -68,6 +91,7 @@
         --dock-trigger-padding-inline: var(--dock-density-compact-trigger-padding-inline, 0.4375rem);
         --dock-tab-padding-block: var(--dock-density-compact-tab-padding-block, 0.3125rem);
         --dock-tab-padding-inline: var(--dock-density-compact-tab-padding-inline, 0.625rem);
+        --dock-tab-h: 32px;
     }
 
     /* Comfortable density — the GlassDock default. Sits between compact
@@ -82,6 +106,7 @@
         --dock-trigger-padding-inline: var(--dock-density-comfortable-trigger-padding-inline, 0.5rem);
         --dock-tab-padding-block: var(--dock-density-comfortable-tab-padding-block, 0.4375rem);
         --dock-tab-padding-inline: var(--dock-density-comfortable-tab-padding-inline, 0.75rem);
+        --dock-tab-h: 38px;
     }
 
     .glass-dock[data-density="spacious"] {
@@ -94,6 +119,7 @@
         --dock-trigger-padding-inline: var(--dock-density-spacious-trigger-padding-inline, 0.625rem);
         --dock-tab-padding-block: var(--dock-density-spacious-tab-padding-block, 0.5rem);
         --dock-tab-padding-inline: var(--dock-density-spacious-tab-padding-inline, 0.875rem);
+        --dock-tab-h: 44px;
     }
 
     /* Audacious density — typography-forward chrome where the dock reads as
@@ -111,41 +137,13 @@
         --dock-tab-padding-block: var(--dock-density-audacious-tab-padding-block, 0.5rem);
         --dock-tab-padding-inline: var(--dock-density-audacious-tab-padding-inline, 1.5rem);
         --dock-tab-min-height: var(--dock-density-audacious-tab-min-height, 3.5rem);
+        --dock-tab-h: var(--dock-density-audacious-tab-min-height, 3.5rem);
     }
 
-    /* Dock tab-button density-keyed height (R3-spec / audit-E P0-3;
-       consolidated into dock.css at Q.W3 Lane A — formerly split into
-       utilities.css and surviving only by import-cascade accident).
-       The four bare DockIconButton consumers solve their density-keyed
-       height via `--dock-control-size` (set per density tier above);
-       DockTabButton's analogous `--dock-tab-h` knob lives in the same
-       density rungs so the tab-button row no longer free-floats to the
-       glyph + padding sum. Compact density lands at 32px to match the
-       deployed product's bottom-dock height. The `.dock-tab-button` rule
-       (further down this file) consumes `--dock-tab-h`. */
-    .glass-dock[data-density="compact"] {
-        --dock-tab-h-compact: 32px;
-        --dock-tab-h: var(--dock-tab-h-compact);
-    }
-    .glass-dock[data-density="comfortable"] {
-        --dock-tab-h-comfortable: 38px;
-        --dock-tab-h: var(--dock-tab-h-comfortable);
-    }
-    .glass-dock[data-density="spacious"] {
-        --dock-tab-h-spacious: 44px;
-        --dock-tab-h: var(--dock-tab-h-spacious);
-    }
-    .glass-dock[data-density="audacious"] {
-        --dock-tab-h-audacious: var(--dock-density-audacious-tab-min-height, 3.5rem);
-        --dock-tab-h: var(--dock-tab-h-audacious);
-    }
-
-    /* Density-audacious mobile carve (R3-spec / audit-D D-Rec-5;
-       consolidated into dock.css at Q.W3 Lane A). At narrow viewports
-       the audacious-dock label glyphs compress so the audacious chrome
-       doesn't overflow its host: `≤14px at <480` and `15px at 480–719`.
-       Consumer dock label spans bind `font-size: var(--dock-label-size)`
-       (typography.css `.dock-label` recipe is the canonical consumer). */
+    /* Density-audacious mobile carve — at narrow viewports the audacious-dock
+       label glyphs compress so the chrome doesn't overflow its host
+       (≤14px at <480, 15px at 480–719). Consumer dock label spans bind
+       `font-size: var(--dock-label-size)` (typography.css `.dock-label`). */
     @media (max-width: 479px) {
         .glass-dock[data-density="audacious"] {
             --dock-label-size: 14px;
@@ -188,22 +186,11 @@
             border-color var(--dock-motion-standard);
     }
 
-    /* Z.W2.T2 — vertical rails grow-to-fit + clamp, no scroll. Per A2 §B6
-       + A4 special-focus: canon-intent is grow-and-wrap, not scroll. The
-       prior `overflow-y: auto` produced the "dock scrolls when it
-       shouldn't" regression at narrow viewports; the right escape is to
-       let descendants wrap to multiple rows (consumers opt-in via
-       `dock-wrap`) or to clamp via `--dock-max-block-size` and let the
-       cap fail visibly rather than mask the overflow as a scroll
-       affordance.
-
-       The edge-fade `mask-image` retired here in lockstep with the
-       horizontal `.dock-layers` rule. With grow-to-fit + visible
-       overflow the rail never scrolls, so a scroll-feather mask has
-       nothing to feather — it only bled a transparent ramp onto the
-       top and bottom rail items, casting a stray directional shadow
-       on those edge controls. J.W3.C's auto + mask-fade shape is fully
-       superseded: grow-to-fit is the whole contract, no feather. */
+    /* Vertical rails grow-to-fit + clamp, no scroll: descendants wrap to
+       multiple rows (opt-in via `dock-wrap`) or clamp via
+       `--dock-max-block-size`; the cap fails visibly rather than masking
+       overflow as a scroll affordance. No edge-fade mask — a rail that never
+       scrolls has nothing to feather. */
     .glass-dock.vertical {
         display: inline-flex;
         flex-direction: column;
@@ -382,23 +369,11 @@
         transition: width var(--dock-motion-resize);
     }
 
-    /* Z.W2.T2 — horizontal dock content grows visibly when the active
-       layer's natural width exceeds the dock's content area. Per
-       A2 §B6 + A4 special-focus: the canon-intent for the bottom dock
-       is grow-to-fit; consumers needing wrap opt into `dock-wrap`. The
-       prior `overflow-x: auto` produced the user-reported "dock scrolls
-       when it shouldn't" — the wrong escape valve.
-
-       The edge-fade `mask-image` retired here. Once Z.W2.T2 made the
-       dock grow-to-fit, content is never clipped and never scrolls, so
-       the mask had nothing left to feather — it was kept only "for
-       visual symmetry" with the vertical rule. In practice the 1rem
-       transparent ramp at each edge bled onto the first and last dock
-       items: the rightmost control (e.g. a settings cog) had its outer
-       edge faded into the glass backdrop, which read as a stray
-       directional shadow on that item. A scroll-affordance feather on
-       a surface that never scrolls is pure cosmetic damage, so it is
-       removed at the root rather than masked per-consumer. */
+    /* Horizontal dock content grows visibly when the active layer's natural
+       width exceeds the content area (grow-to-fit; consumers needing wrap opt
+       into `dock-wrap`). No edge-fade mask — content never clips or scrolls,
+       so a feather has nothing to feather and only bleeds a stray ramp onto
+       the edge controls. */
     .glass-dock.expanded:not(.dock-wrap) > .dock-layers {
         overflow-x: visible;
     }
@@ -650,6 +625,23 @@
         min-width: 0;
     }
 
+    /* AP.W3 — axis-aware layer pane. The stack + `useLayerTransition` are
+       axis-aware, but the pane was hardcoded to a no-wrap ROW with
+       `width: max-content` — forcing a `vertical` group's content onto one
+       horizontal line that could not grow down (the vertical-overflow fight).
+       A vertical group stacks in a column, stretches, wraps, and block-sizes
+       to the height the stack animates. Horizontal byte-identical. */
+    .dock-layer-group.vertical .dock-layer-item-host {
+        flex-direction: column;
+        align-items: stretch;
+        white-space: normal;
+    }
+
+    .dock-layer-group.vertical .dock-layer-item-host.is-active {
+        width: auto;
+        height: max-content;
+    }
+
     .dock-icon-button {
         display: inline-flex;
         align-items: center;
@@ -693,9 +685,9 @@
         outline: none;
     }
 
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top; this rule adds only the box-shadow fade transition. */
     .dock-icon-button:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
@@ -704,11 +696,6 @@
             box-shadow var(--dock-motion-fast);
     }
 
-    .dock-icon-button:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-
     /* O.W6 Lane B — token-ladder active paint. Defaults match the prior
        hardcoded recipe (--muted bg + --foreground color, no transform / border
        / shadow). Consumers override the active variant via the
@@ -841,15 +828,8 @@
         box-shadow: none;
     }
 
-    .dock-tab-button:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-    }
-
-    .dock-tab-button:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top. */
 
     .dock-tab-button:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
         background: var(--surface-tint-10);
@@ -998,10 +978,10 @@
         outline: none;
     }
 
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top; this rule adds only the box-shadow fade transition. */
     .dock-select-trigger:focus-visible,
     .dock-dropdown-trigger:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
@@ -1010,12 +990,6 @@
             box-shadow var(--dock-motion-fast);
     }
 
-    .dock-select-trigger:disabled,
-    .dock-dropdown-trigger:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-
     .dock-select-trigger:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]),
     .dock-dropdown-trigger:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
         background: var(--muted);
@@ -1072,12 +1046,15 @@
        that wires `var(--size-icon-btn)` for trigger sizing) inherit
        the same floor.
 
-       Density overrides (`[data-density="compact"]` etc.) still win
-       inside `@layer components` ordering — consumers that explicitly
-       opt into compact density on touch devices get their compact size
-       back. The media-query only lifts the *default* path. */
+       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare
+       `.glass-dock`: the always-present density setter (0,2,0) shadowed a
+       bare (0,1,0) coarse floor, pinning the touch box at 40px. The
+       presence-selector (0,2,0) wins by source order, lifting
+       `--dock-control-size` to 44px — read by both the button box and the
+       dock width-math, so the slot reserves 44px (no overflow). Fine pointer
+       byte-identical. Proof: design/W1.2-motion-carve-and-dock.md §B.2. */
     @media (pointer: coarse) {
-        .glass-dock {
+        .glass-dock[data-density] {
             --dock-control-size: var(--dock-touch-target, 2.75rem);
             --size-icon-btn: var(--dock-touch-target, 2.75rem);
         }

package/dist/styles/drawer.css

@@ -0,0 +1,138 @@
+/*
+ * drawer.css — Detented bottom-sheet grammar (AN.W3).
+ *
+ * vaul-vue owns the snap math (the spring transform between snap-points, the
+ * drag-resistance overshoot, the `data-vaul-*` state attributes). glass-ui owns
+ * the LOOK: the glass sheet surface, the rounded peek handle, the snap-stop
+ * indicator rules, and the drag-resistance feel-tuning. This file is the
+ * substrate so a consumer mounting `<Drawer mode="live-behind">` does not
+ * re-author the three detents from scratch.
+ *
+ * Token-first — every visual axis reads a custom property. Consumers retune
+ * the sheet by overriding the rungs below, never by editing this file.
+ */
+
+:root {
+    /* Detent grammar knobs — overridable per-consumer */
+    --drawer-handle-w: 2.25rem;
+    --drawer-handle-h: 0.3125rem; /* 5px — vaul's hit-target rhythm */
+    --drawer-handle-color: var(--muted-foreground);
+    --drawer-handle-opacity: 0.45;
+    --drawer-handle-opacity-active: 0.85;
+    --drawer-snap-rule-color: color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+/*
+ * The sheet surface. Replaces the prior inline-Tailwind triplet on
+ * DrawerContent.vue so the glass tier + the snap transform feel live in one
+ * token-driven place. The fixed/inset/z-index layout stays here too.
+ *
+ * NOTE: vaul-vue sets `transition: transform .5s cubic-bezier(.32,.72,0,1)` and
+ * `touch-action: none` on `[data-vaul-drawer]` from its injected stylesheet —
+ * that IS the drag-resistance spring curve. We do NOT override `transition` so
+ * the snap feel is preserved; we layer border-radius + glass surface on top.
+ */
+.glass-drawer {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: var(--z-modal);
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    max-height: 97vh;
+    margin-top: 6rem;
+    border: 1px solid var(--border);
+    border-bottom: 0;
+    border-start-start-radius: var(--radius-panel);
+    border-start-end-radius: var(--radius-panel);
+    background-color: var(--background);
+    box-shadow: var(--shadow-2xl);
+}
+
+/*
+ * Detented (snap-point) sheets fill the viewport height. vaul positions the
+ * sheet by translating it DOWN by `innerHeight - (fraction * innerHeight)` —
+ * so for a snap fraction to read as that fraction OF THE VIEWPORT, the sheet's
+ * top must sit at the viewport top when fully open (offset 0). A `height: auto`
+ * content sheet would instead translate off-screen. vaul tags the snap case via
+ * `[data-vaul-snap-points=true]`; we fill height there and let the content
+ * scroll inside.
+ */
+.glass-drawer[data-vaul-snap-points="true"] {
+    height: 100%;
+    max-height: 100%;
+    margin-top: 0;
+}
+
+/* Live-behind direction variants — vaul tags the root with the drag axis.
+   Bottom is the default + the F-side pattern; the others ride the same surface
+   so a top/side live-behind sheet inherits the grammar. */
+.glass-drawer[data-vaul-drawer-direction="top"] {
+    bottom: auto;
+    top: 0;
+    margin-top: 0;
+    margin-bottom: 6rem;
+    border-top: 0;
+    border-bottom: 1px solid var(--border);
+    border-radius: 0 0 var(--radius-panel) var(--radius-panel);
+}
+
+/*
+ * Peek handle — the rounded grip at the top of the sheet. It is the visual
+ * affordance the user drags to cycle peek → half → full. vaul-vue intensifies
+ * the grip on `:active` via its own `[data-vaul-handle]` rules when the consumer
+ * uses `<DrawerHandle>`; this is the glass-ui default grip for the common case.
+ */
+.glass-drawer-handle {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-block: 0.75rem 0.5rem;
+    touch-action: none;
+}
+
+.glass-drawer-grip {
+    display: block;
+    width: var(--drawer-handle-w);
+    height: var(--drawer-handle-h);
+    border-radius: var(--radius-pill);
+    background-color: var(--drawer-handle-color);
+    opacity: var(--drawer-handle-opacity);
+    transition: opacity var(--duration-fast) var(--ease-out),
+        width var(--duration-fast) var(--ease-out);
+}
+
+/* While the sheet is being dragged vaul exposes the gesture; intensify the grip
+   so the affordance reads as "live". `:active` covers the pointer-held case for
+   the default grip; consumers using vaul's `<DrawerHandle>` get its own active
+   rule in addition. */
+.glass-drawer-handle:active .glass-drawer-grip,
+.glass-drawer:hover .glass-drawer-grip {
+    opacity: var(--drawer-handle-opacity-active);
+    width: calc(var(--drawer-handle-w) * 1.15);
+}
+
+/*
+ * Snap-stop indicators — subtle full-width hairline rules that mark where the
+ * sheet content sections break across detents. A consumer opts in by adding
+ * `.glass-drawer-snap-rule` to a separator element inside the sheet; it reads as
+ * the detent boundary line without competing with the content. This is the
+ * "snap-stop visual indicator" the spec asks for, expressed as an opt-in class
+ * (the detents themselves are positional, owned by vaul; the RULE is the look).
+ */
+.glass-drawer-snap-rule {
+    height: 1px;
+    margin-inline: calc(var(--radius-panel) * -0.5);
+    border: 0;
+    background-color: var(--drawer-snap-rule-color);
+}
+
+/* Reduced-motion — vaul's transform transition is its own; we only suppress the
+   grip's affordance animation so the handle does not pulse for PRM users. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-drawer-grip {
+        transition: none;
+    }
+}

package/dist/styles/index.css

@@ -4,9 +4,18 @@
  * Import this in your project's main CSS file:
  *   @import "tailwindcss";
  *   @import "tw-animate-css";
- *   @import "@mkbabb/glass-ui/styles";        (critical — no font payload)
+ *   @import "@mkbabb/glass-ui/styles";        (token cascade + SFC scoped CSS)
  *   @import "@mkbabb/glass-ui/styles/fonts";  (OFL woff2 corpus, loaded once)
  *   (then add your project-specific token overrides locally)
+ *
+ * AN.W1 — the single `@mkbabb/glass-ui/styles` import resolves the COMPLETE
+ * stylesheet: this @import cascade PLUS the per-component `<style scoped>`
+ * payload (Aurora grid layering, Progress/Slider/Notification/… scoped rules).
+ * The build folds the SFC bundle (`dist/glass-ui.css`) into the dist copy of
+ * this file (vite.config.ts `publishStyleAssets`), so a consumer never needs
+ * a second `@import "@mkbabb/glass-ui/styles.css"` line. The `./styles.css`
+ * export stays reachable as a transparent SFC-only entry (NOT a back-compat
+ * alias) for a cascade-free consumer.
  */
 
 /*
@@ -69,8 +78,10 @@
  *  14. glyph-face.css        — P-tranche component CSS (cap + backplate).
  *  15. disco-glyph.css       — P-tranche component CSS (layered fills).
  *  16. hover-popover.css     — V.W3 popover-animation grammar.
+ *  17. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *                             sheet surface + peek handle + snap-stop rules).
  *
- * Per-package component CSS lives at (12)-(16) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(17) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -90,7 +101,12 @@
 @import "./glyph-face.css";
 @import "./disco-glyph.css";
 @import "./hover-popover.css";
+@import "./drawer.css";
 
 /* Ensure consumer's Tailwind scans glass-ui components for utility classes
    (e.g. CVA button variants like text-destructive-foreground) */
+/* AN.W1 — SFC scoped component CSS (folded so a single
+   @import "@mkbabb/glass-ui/styles" carries cascade + components) */
+@import "../glass-ui.css";
+
 @source "../components";

package/dist/styles/instrument-chassis.css

@@ -292,7 +292,34 @@
     @media (max-width: 720px) {
         .instrument-chassis .instrument-dial {
             grid-template-columns: 1fr;
-            grid-template-rows: auto auto auto;
+            /* R0G-2 (AO.W3) — reserve the dial's FINAL box from frame 0. The
+               desktop axis is already CLS-clean (the 3-column `align-items:
+               center` grid reserves row height from intrinsic min + the AP-Pγ
+               transform-only idle recentre). The mobile reflow previously
+               collapsed to `grid-template-rows: auto auto auto`, which reserves
+               NO height — the meter row, divider, and readout column sit at
+               zero height until the consumer's meter <canvas> + readout
+               numbers hydrate, then grow collapsed → final and push everything
+               below down ~326-331px → mobile-390 CLS 0.32-0.38.
+
+               The fix pins the dial box from frame 0: the meter row carries the
+               dominant reserve (`minmax(0, 1fr)` — it expands to fill the
+               envelope the `min-height` establishes), divider + readout stay
+               intrinsic (`auto`). The load-bearing reserve is `min-height` —
+               it fixes the dial's outer box so the rows distribute WITHIN a
+               reserved envelope rather than growing it post-hydration.
+
+               Both knobs are CSS custom properties (token-first). The
+               `--instrument-dial-min-height-mobile` canonical rung lands in
+               tokens.css at AO.W4; until then the inline `24rem` fallback IS
+               the default and carries the contract. A consumer whose meter is
+               a different size retunes the token — a tuning knob, not a
+               workaround for a missing reserve. */
+            grid-template-rows:
+                var(--instrument-dial-meter-reserve-mobile, minmax(0, 1fr))
+                auto
+                auto;
+            min-height: var(--instrument-dial-min-height-mobile, 24rem);
             gap: var(--instrument-dial-gap-mobile, 1.5rem);
         }
 

package/dist/styles/theme.css

@@ -81,6 +81,9 @@
     --color-card: var(--card);
     --color-card-foreground: var(--card-foreground);
 
+    /* R0G-5 — bg-surface-public-data-panel utility. */
+    --color-surface-public-data-panel: var(--surface-public-data-panel);
+
     --color-shadow: var(--shadow);
 
     /* Semantic foregrounds — bg-{success,warning,info}-foreground +