@mkbabb/glass-ui 0.3.0 → 2.1.0

package/src/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: hsl(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: hsl(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/src/styles/floating-panel.css

@@ -5,45 +5,30 @@
         position: fixed;
         z-index: var(--z-overlay);
         border-radius: var(--radius-panel);
-        border: 1px solid var(--glass-border-medium);
-        background: var(--glass-bg-medium);
-        backdrop-filter: var(--glass-blur-medium);
-        -webkit-backdrop-filter: var(--glass-blur-medium);
+        border: 1px solid var(--glass-border-resting);
+        background: var(--glass-bg-resting);
+        backdrop-filter: var(--glass-blur-resting);
         color: var(--popover-foreground);
-        box-shadow: var(--glass-shadow-medium);
+        box-shadow: var(--glass-shadow-resting);
         pointer-events: auto;
-        animation: floating-panel-in var(--duration-fast) var(--ease-out);
-    }
-
-    .floating-panel-item {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 0.5rem;
-        padding: 0.375rem;
-        border-radius: var(--radius-pill);
-        color: inherit;
-        cursor: pointer;
-        transition:
-            background-color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
-    }
-
-    .floating-panel-item:hover {
-        background-color: color-mix(in srgb, var(--foreground) 6%, transparent);
-    }
-
-    .floating-panel-item:focus-visible {
-        outline: none;
-        border-radius: var(--radius-pill);
-        box-shadow: var(--focus-ring-shadow);
+        /* V.W3.T9 — animation grammar routes through the canonical
+           Tailwind `animate-floating-panel-in` utility (defined in
+           `theme.css` as `--animate-floating-panel-in`), NOT the raw
+           `animation:` shorthand that bypassed the cascade. */
+        @apply animate-floating-panel-in;
     }
+}
 
-    .floating-panel-item:active:not(:disabled) {
-        transform: scale(0.95);
-    }
-    .floating-panel-item:disabled {
-        opacity: 0.35;
-        pointer-events: none;
-    }
+/* Dropdown-menu font knob (Q.W3 Lane C / Qβ-F3).
+   Migrated out of the lone scoped `<style>` blocks on
+   `DropdownMenuContent.vue` + `DropdownMenuSubContent.vue` — those were the
+   only scoped styles in an otherwise fully-global menu family, so the family
+   is now uniformly global-CSS. The `--dropdown-menu-font` token is the
+   consumer-facing knob (value.js overrides it to `var(--font-mono)`); the
+   `, inherit` fall-through MUST be preserved verbatim per the Qθ binding
+   constraint. Unlayered, like the retired scoped block — no other rule sets
+   `font-family` on these surfaces, so the cascade effect is identical. */
+.dropdown-menu-content,
+.dropdown-sub-content {
+    font-family: var(--dropdown-menu-font, inherit);
 }

package/src/styles/fonts.css

@@ -0,0 +1,143 @@
+/*
+ * fonts.css — payload-bearing @font-face declarations (OFL woff2 faces)
+ *
+ * AM-W1-α (entry-path weight split) — these are the ONLY @font-face rules
+ * that carry a font binary. At publish time the build plugin
+ * (vite.config.ts → publishStyleAssets) base64-inlines each
+ * `url("@mkbabb/glass-ui/fonts/<family>/<face>.woff2")` into a
+ * `data:font/woff2;base64,…` URI sourced from `src/fonts/`. That payload
+ * is ~99 KB gzipped — over half of the entire `./styles` critical CSS
+ * weight.
+ *
+ * This file is DELIBERATELY NOT `@import`ed by `styles/index.css`. The
+ * critical first-paint entry path (`@mkbabb/glass-ui/styles`) therefore no
+ * longer carries the font binary. Consumers import the faces once,
+ * separately and off the critical path:
+ *
+ *   @import "@mkbabb/glass-ui/styles";        (critical — no font payload)
+ *   @import "@mkbabb/glass-ui/styles/fonts";  (font corpus, loaded once)
+ *
+ * The calibrated `local()` fallback faces (San Francisco / Segoe UI /
+ * Roboto / Arial for the sans; SF Mono / Menlo / … for the mono) carry NO
+ * payload and remain in `typography.css` on the critical path — they are
+ * what paints during the `font-display: optional`/`swap` window, so they
+ * are genuinely first-paint critical. The metric overrides on those
+ * fallback faces (Capsize-calibrated; AC.W6b) reference the exact
+ * geometry of the faces declared here, so the split is purely a
+ * load-order/weight concern: the cascade is identical once both files load.
+ *
+ * Contract-v2 (docs/precepts/cross-repo-dev-resolution.md §2.1): this file
+ * is published into `dist/styles/fonts.css` and is reachable via the
+ * `./styles/fonts` exports key → `./dist/styles/fonts.css`. The build
+ * plugin walks EVERY `dist/styles/*.css` (not just index's transitive
+ * closure), so the inline rewrite applies here exactly as it did when these
+ * faces lived in typography.css. No `url()` resolves out of `dist/`.
+ *
+ * AM-W7-δ separate-files refinement — DEFERRED (base64 KEPT). The W1-close
+ * audit proposed de-base64ing THIS file to dist-relative
+ * `url("../fonts/<face>.woff2")` (referencing the already-shipped
+ * `dist/fonts/*` woff2 via the `./fonts/*` export), so the browser would
+ * fetch only the USED faces — unicode-range-deferring the ~35 KB latin-ext
+ * pair + gaining per-face HTTP caching. That refinement is STRUCTURALLY
+ * BLOCKED by the consumer's font-delivery idiom, verified at AM-W7-δ:
+ *
+ *   speedtest's W1-α.2 consumer loads this file via a Vite `?url` import
+ *   (`import fontsHref from "@mkbabb/glass-ui/styles/fonts?url"`), which
+ *   emits fonts.css VERBATIM as a content-hashed asset into the consumer's
+ *   OWN `dist/assets/fonts-<hash>.css` and injects it as an async `<link>`.
+ *   `?url` does NOT parse the CSS or follow its `url()` refs — so the
+ *   referenced woff2 are NEVER copied across the package boundary into the
+ *   consumer's dist (confirmed: zero `*.woff2` in speedtest/dist). A
+ *   dist-relative `url("../fonts/…")` inside the emitted
+ *   `/assets/fonts-<hash>.css` would resolve at runtime to `/fonts/…` on
+ *   the CONSUMER's origin, which has no such file → 404 on every face,
+ *   broken fonts. (This is the same symlink-realpath axis that defeated
+ *   "Option A" for the publisher in vite.config.ts → publishStyleAssets;
+ *   the `?url` consumer path inherits it.) The CSP also gates here:
+ *   `font-src 'self' data:` admits the `data:` URI but the dist-relative
+ *   file would not be present on `'self'`.
+ *
+ *   Base64 keeps the face request layer entirely self-contained: the woff2
+ *   travel INSIDE the emitted CSS, so the async `<link>` is the only
+ *   network fetch and it works regardless of how the consumer re-emits the
+ *   file. The unicode-range split below is preserved either way — it still
+ *   defers latin-ext glyph SHAPING — but with base64 the latin-ext bytes
+ *   ship in the (once-cached, off-critical-path) CSS rather than as a lazy
+ *   separate request. Working fonts > the marginal lazy-fetch win. Revisit
+ *   only if a consumer adopts a delivery that DOES bundle/copy `url()`
+ *   targets across the boundary (e.g. a real `@import` of the dist file).
+ */
+
+/* ═══════════════════════════════════════════════
+   OFL FACE FILES — Plus Jakarta Sans (brand display)
+   ═══════════════════════════════════════════════ */
+
+/* Plus Jakarta Sans — Latin subset (basic Latin + ASCII punctuation +
+   common diacritics). Variable font: a single woff2 covers wght 200..800.
+   `font-display: optional` keeps the LCP off the font-load critical path
+   — combined with the calibrated fallback face in typography.css, the swap
+   is no-shift on geometry and never disrupts paint. */
+@font-face {
+    font-family: "Plus Jakarta Sans";
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: optional;
+    src: url("@mkbabb/glass-ui/fonts/plus-jakarta-sans/plus-jakarta-sans-latin.woff2") format("woff2");
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Plus Jakarta Sans — Latin-ext subset (extended Latin diacritics, IPA,
+   wider Latin script). Carried because speedtest's ISP-name register
+   may surface non-ASCII Latin (e.g., Spectrum, Frontier, AT&T variants
+   transliterated). Lazy: only loads if a glyph in the range renders. */
+@font-face {
+    font-family: "Plus Jakarta Sans";
+    font-style: normal;
+    font-weight: 200 800;
+    font-display: optional;
+    src: url("@mkbabb/glass-ui/fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext.woff2") format("woff2");
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
+        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
+        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* ═══════════════════════════════════════════════
+   OFL FACE FILES — Fira Code (canonical mono)
+   ═══════════════════════════════════════════════ */
+
+/* Fira Code — Latin subset (ASCII + ligatures + box-drawing prereqs).
+   Variable font: a single woff2 covers wght 300..700. `font-display:
+   swap` is acceptable here because Fira Code is post-LCP (mono-register
+   admin labels + tabular numerics render below the fold; FOUT is a
+   minor visual blip, not a layout shift since the system mono fallback
+   matches geometry via the calibrated fallback face in typography.css). */
+@font-face {
+    font-family: "Fira Code";
+    font-style: normal;
+    font-weight: 300 700;
+    font-display: swap;
+    src: url("@mkbabb/glass-ui/fonts/fira-code/fira-code-latin.woff2") format("woff2");
+    unicode-range:
+        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
+        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Fira Code — Latin-ext subset. Carried for parity with the sans
+   coverage (admin labels may surface non-ASCII strings on
+   internationalized variants). */
+@font-face {
+    font-family: "Fira Code";
+    font-style: normal;
+    font-weight: 300 700;
+    font-display: swap;
+    src: url("@mkbabb/glass-ui/fonts/fira-code/fira-code-latin-ext.woff2") format("woff2");
+    unicode-range:
+        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
+        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
+        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}