@mkbabb/glass-ui 5.0.0 → 7.0.0

package/README.md

@@ -22,31 +22,33 @@ import { Input, Textarea, Combobox } from "@mkbabb/glass-ui/forms";
 
 // per-package subpaths — one component family per dist chunk
 import { GlassDock, DockLayerGroup, DockLayer } from "@mkbabb/glass-ui/dock";
-import { DarkModeToggle } from "@mkbabb/glass-ui/controls";
+import { DarkModeToggle } from "@mkbabb/glass-ui/dark-mode-toggle";
 import { Configurator, useConfiguratorState } from "@mkbabb/glass-ui/configurator";
-import { HoverPopover } from "@mkbabb/glass-ui/hover-popover";
+import { Popover, PopoverTrigger, PopoverContent } from "@mkbabb/glass-ui/popover";
 
 // public types + constants live on their OWNING subpath (the 5.0.0 export reshape
 // dropped the `/api` discovery layer — every symbol re-homes to its family subpath)
 import type { AuroraConfig } from "@mkbabb/glass-ui/aurora";
-import type { ButtonVariants } from "@mkbabb/glass-ui/button";
+import type { ButtonEmphasis, ButtonProps } from "@mkbabb/glass-ui/button";
 import type { CardTier } from "@mkbabb/glass-ui/card";
 import { DEFAULT_AURORA_CONFIG, MAX_NUCLEI } from "@mkbabb/glass-ui/aurora";
 ```
 
 ```vue
-<HoverPopover :hover-open-delay="120" content="Quicker reveal for chassis dock labels">
-    <DockIconButton :icon="Settings" />
-</HoverPopover>
-
-<Button variant="primary-audacious" size="lg">Run audit</Button>
+<Popover trigger="hover" :open-delay="120">
+    <PopoverTrigger as-child>
+        <Button emphasis="primary" size="lg">Run audit</Button>
+    </PopoverTrigger>
+    <PopoverContent>Quicker reveal for chassis actions</PopoverContent>
+</Popover>
 ```
 
 ```css
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "@mkbabb/glass-ui/styles";
-@source "../node_modules/@mkbabb/glass-ui/dist";   /* template-utility content-scan */
+@import "@mkbabb/glass-ui/styles/fonts";
+@source "../node_modules/@mkbabb/glass-ui/dist"; /* template-utility content-scan */
 @variant dark (&:where(.dark, .dark *));
 
 /* override tokens locally for your project */
@@ -58,10 +60,14 @@ import { DEFAULT_AURORA_CONFIG, MAX_NUCLEI } from "@mkbabb/glass-ui/aurora";
 }
 ```
 
+The optional `styles/fonts` entry carries the packaged Plus Jakarta Sans and
+Fira Code faces as self-contained WOFF2 data URLs. Consumers that need raw font
+files can address the same built assets through `@mkbabb/glass-ui/fonts/*`.
+
 ## Documentation
 
-The authoritative canon lives under [`docs/canon/`](./docs/canon/) (regenerated /
-gate-locked homes), with the consumer-facing migration path in [`MIGRATION.md`](./MIGRATION.md):
+The authoritative canon lives under [`docs/canon/`](./docs/canon/), with the
+consumer-facing migration path in [`MIGRATION.md`](./MIGRATION.md):
 
 - [`docs/canon/structure.md`](./docs/canon/structure.md) — the generated `src/` tree (the machine-truth source; never hand-maintained)
 - [`docs/canon/glass-system.md`](./docs/canon/glass-system.md) — the glass tier ladder + adaptive-legibility axes
@@ -77,7 +83,7 @@ gate-locked homes), with the consumer-facing migration path in [`MIGRATION.md`](
 npm run dev             # storybook demo (multi-page, dock + carousel navigation)
 npm run build           # library → dist/glass-ui.js + glass-ui.css + index.d.ts + per-subpath chunks
 npm run typecheck       # vue-tsc --noEmit
-npm run profile:budget  # bundle-budget gate (--enforce in CI)
+npm run profile:bundle  # inspect bundle sizes and exact value.js capability imports
 ```
 
 ## Storybook
@@ -86,26 +92,25 @@ npm run profile:budget  # bundle-budget gate (--enforce in CI)
 
 ## Structure
 
-The `src/` tree is machine-generated into [`docs/canon/structure.md`](./docs/canon/structure.md) (regenerated by `npm run gen:structure`, gate-locked by `proof:claude-structure-sync`). At a glance:
+The source tree follows the concise ownership map in [`docs/canon/structure.md`](./docs/canon/structure.md):
 
 ```
 src/
-├── index.ts          # vueuse-FREE curated root barrel
-├── api/              # (removed at 5.0.0 — types re-home to their owning subpath)
-├── components/
-│   ├── ui/           # shadcn-vue / reka-ui base component packages + _shared
-│   └── custom/       # custom composite packages (each a colocated feature dir)
-├── composables/      # public composables across coherent sub-trees
-│   │                 # (motion/ glass/ dark/ keyboard/ sortable/ sidebar/ dom/
-│   │                 #  reactive/ color/ virtual/ …)
-├── subpaths/         # trivial one-line per-package subpath mirror barrels
-├── styles/           # token cascade + glass ladder + component recipes
-└── utils/            # cn() + shared prng leaf
+├── index.ts          # curated root barrel
+├── forms.ts          # input-family entry
+├── components/       # flat, owner-colocated component families + _shared
+├── composables/      # shared composable families
+├── styles/           # global tokens, glass substrate, and utilities
+├── fonts/            # packaged font assets
+└── html-attributes.d.ts
 ```
 
 ## Subpath imports
 
-Beyond the vueuse-FREE root barrel, the library ships a large set of flat per-package JS subpaths (one `dist/<name>.js` chunk per subpath, each tree-shaking independently) plus the CSS/font bundle entries. The exact subpath count is machine-truth, not prose: **`proof:subpath-enumeration`** is the source of truth (it re-derives the count from `package.json` exports ↔ `dist/` chunks ↔ the `libraryEntries` map, so a hardcoded figure here would only drift). See `package.json` `exports` for the full map; resolution is verified at every release by `scripts/release.sh`'s synthetic-consumer probe.
+Beyond the vueuse-free root barrel, the library ships flat, independently
+tree-shakable JS subpaths plus CSS and font entries. The semantic entry graph in
+`scripts/lib/subpath-policy.mjs` feeds the build and generated `package.json`
+exports; `scripts/verify-export-types.mjs` checks the emitted declaration paths.
 
 ```ts
 // vueuse-bearing subpaths (the SCC-trap closure — the root barrel does not
@@ -117,30 +122,33 @@ import { Input, Textarea, Combobox } from "@mkbabb/glass-ui/forms";
 
 // per-package subpaths — substrate isolation
 import { GlassDock, DockLayerGroup, DockLayer } from "@mkbabb/glass-ui/dock";
-import { DarkModeToggle } from "@mkbabb/glass-ui/controls";
+import { DarkModeToggle } from "@mkbabb/glass-ui/dark-mode-toggle";
 import { Aurora, useAurora } from "@mkbabb/glass-ui/aurora";
 import { Configurator, useConfiguratorState } from "@mkbabb/glass-ui/configurator";
-import { HoverPopover } from "@mkbabb/glass-ui/hover-popover";
-import { InstrumentChassis, RegionDivider } from "@mkbabb/glass-ui/instrument-chassis";
-import { Sidebar } from "@mkbabb/glass-ui/sidebar";
-import { ScrollingText } from "@mkbabb/glass-ui/scrolling-text";
+import { Popover, PopoverTrigger, PopoverContent } from "@mkbabb/glass-ui/popover";
+import { InstrumentChassis } from "@mkbabb/glass-ui/instrument-chassis";
+import { useSidebarState } from "@mkbabb/glass-ui/sidebar";
 ```
 
-The v0.9.x nested subpaths `@mkbabb/glass-ui/composables/dark` + `.../composables/keyboard` were flattened to `/dark` + `/keyboard` at v1.0, and the demo-only `@mkbabb/glass-ui/pagination` subpath was retired (zero production consumers). The `@mkbabb/glass-ui/virtual` subpath is LIVE at 5.0.0 — retired at v1.0, it RETURNED at BC (the windowing engine's homecoming) and ships OFF the root barrel; see `docs/consumer-evidence/use-virtual-section-window.md` for its honest consumer status. The 5.0.0 export reshape dropped the pure-types `/api` discovery layer (a clean break; every symbol re-homes to its owning family subpath). See `MIGRATION.md` for the full per-symbol re-home table.
+The v0.9.x nested subpaths `@mkbabb/glass-ui/composables/dark` and
+`.../composables/keyboard` were flattened to `/dark` and `/keyboard` at v1.0.
+The demo-only `/pagination` and `/virtual` subpaths are retired. The 5.0.0 export
+reshape also dropped the pure-types `/api` discovery layer; see `MIGRATION.md`
+for the owning-family re-home table.
 
 ## Glass Token System
 
 Five tiers with 1:1 alignment across opacity, blur, background, border, and shadow. Each tier defines `--glass-{opacity,blur,bg,border,shadow}-{tier}`; consumers override the primitives at `:root` to tune intensity. `--glass-level` (a typed inheriting `@property`) is the ONE opacity+blur knob — `level=1` is the hand-tuned ladder, `level=0` is the opaque escape.
 
-| Tier | Class | Use |
-|------|-------|-----|
-| Wash | `.glass-wash` | Dock backgrounds, input fills, hover overlays |
-| Quiet | `.glass-quiet` | Inline workspace chrome |
-| Resting | `.glass-resting` | Cards, content containers |
-| Floating | `.glass-floating` | Popovers, tooltips, dropdowns |
-| Overlay | `.glass-overlay` | Dialogs, command palette, modals |
+| Tier     | Class             | Use                                           |
+| -------- | ----------------- | --------------------------------------------- |
+| Wash     | `.glass-wash`     | Dock backgrounds, input fills, hover overlays |
+| Quiet    | `.glass-quiet`    | Inline workspace chrome                       |
+| Resting  | `.glass-resting`  | Cards, content containers                     |
+| Floating | `.glass-floating` | Popovers, tooltips, dropdowns                 |
+| Overlay  | `.glass-overlay`  | Dialogs, command palette, modals              |
 
-Convenience classes bundle a tier with a shape: `.glass-card` (resting + `--radius-card` + offset card shadow), `.glass-pill` (resting + pill radius + press feedback), `.glass-btn`. See [`docs/canon/glass-system.md`](./docs/canon/glass-system.md) for the adaptive-legibility axes (`--glass-tint-*`, `--glass-accent`, the dark transmissive-material arm).
+Convenience classes bundle a tier with a shape: `.glass-card` (resting + `--radius-card` + offset card shadow) and `.glass-pill` (resting + pill radius + press feedback). Commands use `<Button>` so geometry, semantics, focus, and press behavior retain one owner. See [`docs/canon/glass-system.md`](./docs/canon/glass-system.md) for the adaptive-legibility axes (`--glass-tint-*`, `--glass-accent`, the dark transmissive-material arm).
 
 ## Design Tokens
 
@@ -154,9 +162,9 @@ Type scale based on √φ ≈ 1.272 (modulated golden ratio); each step is φ^(n
 
 - TypeScript `strict:true`, `verbatimModuleSyntax:true`; `moduleResolution:bundler`, `target:ES2022`, `lib:ES2023`
 - `import type` for all type-only imports; named exports only, no defaults
-- shadcn-vue component pattern: reka-ui `Primitive` / `useForwardPropsEmits`, CVA for variants, `cn()` for class composition
+- reka-ui primitives for polymorphic/accessibility behavior; typed semantic props and owner-colocated CSS for component appearance
 - Color tokens are **complete `hsl()` colors** — `--primary: hsl(24 10% 10%)`, consumed directly as `var(--primary)`. NEVER `hsl(var(--token))` (double-wrapping is invalid and never paints); for an alpha derivative use `color-mix(in srgb, var(--token) N%, transparent)`
-- `cn()` is `clsx` + a hand-rolled conflict-bucket deduplicator (replaced `tailwind-merge` at v0.9.2 — a deliberate keep, not a gap to re-upgrade)
+- `cn()` normalizes Vue-compatible class values and applies a small conflict-bucket deduplicator
 
 See [`docs/canon/conventions.md`](./docs/canon/conventions.md) for the full set.
 
@@ -164,21 +172,18 @@ See [`docs/canon/conventions.md`](./docs/canon/conventions.md) for the full set.
 
 All runtime deps are peer — glass-ui declares them in `peerDependencies` and ships none in its own `dependencies` bundle, so the consumer's single Vue / Tailwind / reka-ui spine is reused rather than re-vendored.
 
-| Package | Role |
-|---------|------|
-| `vue` ^3.5 | Framework |
-| `reka-ui` ^2.0 | Headless UI primitives |
-| `@vueuse/core` ^14.0 | useDark, createGlobalState, useEventListener (optional peer) |
-| `tailwindcss` ^4.0 | Utility CSS |
-| `class-variance-authority` ^0.7 | Component variant definitions |
-| `clsx` ^2.0 | Conditional class joining (`cn()` ships its own deduplicator) |
-| `embla-carousel-vue` ^8.0 | Carousel substrate (optional peer) |
-| `@lucide/vue` ^1.16.0 | Icon set (the renamed v1 package; was `lucide-vue-next` pre-v1.0) |
-| `@mkbabb/keyframes.js` ^5.2.0 | Spring/keyframe runtime (optional peer) |
-| `@mkbabb/value.js` ^3.1.0 | Color/value normalization (optional peer) |
-| `@mkbabb/pencil-boil` ^0.4.1 | Hand-mark freehand core (optional peer) |
-| `perfect-freehand` ^1.2.3 | Variable-width stroke geometry (optional peer) |
-| `tw-animate-css` ^1.2.5 | `animate-in`/`animate-out` data-state utilities (optional peer) |
+| Package                         | Role                                                              |
+| ------------------------------- | ----------------------------------------------------------------- |
+| `vue` ^3.5                      | Framework                                                         |
+| `reka-ui` ^2.0                  | Headless UI primitives                                            |
+| `@vueuse/core` ^14.0            | useDark, createGlobalState, useEventListener (optional peer)      |
+| `tailwindcss` ^4.0              | Utility CSS                                                       |
+| `embla-carousel-vue` ^8.0       | Carousel substrate (optional peer)                                |
+| `@lucide/vue` ^1.16.0           | Icon set (the renamed v1 package; was `lucide-vue-next` pre-v1.0) |
+| `@mkbabb/keyframes.js` ^6.0.0   | Spring/keyframe runtime (optional peer)                           |
+| `@mkbabb/value.js` ^4.0.0       | Color and easing capabilities (optional peer)                     |
+| `@mkbabb/pencil-boil` ^0.9.2    | Hand-mark freehand core (optional peer)                           |
+| `tw-animate-css` ^1.2.5         | `animate-in`/`animate-out` data-state utilities (optional peer)   |
 
 `tw-animate-css` is required only for the animated overlay surfaces (Dialog / Sheet / Popover / DropdownMenu emit `animate-in`/`animate-out` data-state utilities); a Button-only consumer never needs it. See [`docs/canon/dependencies.md`](./docs/canon/dependencies.md).
 

package/dist/DropdownMenuTrigger-ClIq8RJE.js

@@ -0,0 +1,93 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./primitive-B2t2jdqM.js";
+import { computed as n, createBlock as r, defineComponent as i, inject as a, isRef as o, mergeProps as s, openBlock as c, provide as l, renderSlot as u, resolveDynamicComponent as d, unref as f, useAttrs as p, withCtx as m } from "vue";
+import { ContextMenuCheckboxItem as h, ContextMenuContent as g, ContextMenuGroup as _, ContextMenuItem as v, ContextMenuItemIndicator as y, ContextMenuLabel as b, ContextMenuPortal as x, ContextMenuRadioGroup as S, ContextMenuRadioItem as C, ContextMenuSeparator as w, ContextMenuSub as T, ContextMenuSubContent as E, ContextMenuSubTrigger as D, ContextMenuTrigger as O, DropdownMenuCheckboxItem as k, DropdownMenuContent as A, DropdownMenuGroup as j, DropdownMenuItem as M, DropdownMenuItemIndicator as N, DropdownMenuLabel as P, DropdownMenuPortal as F, DropdownMenuRadioGroup as I, DropdownMenuRadioItem as L, DropdownMenuSeparator as R, DropdownMenuSub as z, DropdownMenuSubContent as B, DropdownMenuSubTrigger as V, DropdownMenuTrigger as H, injectDropdownMenuRootContext as U } from "reka-ui";
+//#region src/components/dropdown-menu/useMenuTrigger.ts
+var W = Symbol("glass-menu-trigger");
+function G(e) {
+	l(W, e);
+}
+function K() {
+	let e = a(W, null);
+	if (!e) throw Error("DropdownMenu parts must be used within DropdownMenu");
+	return e;
+}
+var q = {
+	Trigger: [H, O],
+	Portal: [F, x],
+	Content: [A, g],
+	Item: [M, v],
+	CheckboxItem: [k, h],
+	RadioItem: [L, C],
+	RadioGroup: [I, S],
+	Group: [j, _],
+	Separator: [R, w],
+	Label: [P, b],
+	Sub: [z, T],
+	SubTrigger: [V, D],
+	SubContent: [B, E],
+	ItemIndicator: [N, y]
+};
+function J(e) {
+	let t = K();
+	return n(() => q[e][+(t.value === "context")]);
+}
+//#endregion
+//#region src/components/dropdown-menu/DropdownMenuTrigger.vue
+var Y = /* @__PURE__ */ i({
+	name: "DropdownMenuTrigger",
+	inheritAttrs: !1,
+	__name: "DropdownMenuTrigger",
+	props: {
+		asChild: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		action: { default: "click" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(i) {
+		let a = i, l = p(), h = n(() => {
+			let e = t(l);
+			return a.asChild ? e : {
+				...e,
+				type: "button"
+			};
+		}), g = K(), _ = J("Trigger"), v = U(null), y = !1;
+		function b(e) {
+			a.action !== "pointerdown" || g.value !== "click" || !v || a.disabled || e.button !== 0 || e.ctrlKey || (y = !0, v.onOpenToggle(), v.open.value && e.preventDefault());
+		}
+		function x(e) {
+			y && (y = !1, e.detail !== 0 && (e.preventDefault(), e.stopImmediatePropagation()));
+		}
+		return (t, n) => (c(), r(d(f(_)), s(h.value, {
+			as: "button",
+			"as-child": i.asChild,
+			disabled: i.disabled,
+			class: f(e)("dropdown-menu__trigger", a.class),
+			"data-slot": "dropdown-menu-trigger",
+			onPointerdownCapture: b,
+			onPointercancelCapture: n[0] ||= (e) => o(y) ? y.value = !1 : y = !1,
+			onClickCapture: x
+		}), {
+			default: m(() => [u(t.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as-child",
+			"disabled",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { K as i, G as n, J as r, Y as t };

package/dist/FeedbackMark-DZq5001h.js

@@ -0,0 +1,23 @@
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
+import { createElementBlock as t, defineComponent as n, openBlock as r } from "vue";
+//#region src/components/_shared/FeedbackMark.vue?vue&type=script&setup=true&lang.ts
+var i = ["data-state", "data-motion"], a = /*#__PURE__*/ e(/* @__PURE__ */ n({
+	__name: "FeedbackMark",
+	props: {
+		state: { default: "active" },
+		motion: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(e) {
+		return (n, a) => (r(), t("span", {
+			class: "feedback-mark",
+			"data-state": e.state,
+			"data-motion": e.motion && e.state === "active" ? "" : void 0,
+			"aria-hidden": "true"
+		}, null, 8, i));
+	}
+}), [["__scopeId", "data-v-d7e1d5a7"]]);
+//#endregion
+export { a as t };

package/dist/Input-9BlLluik.js

@@ -0,0 +1,77 @@
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { n as t } from "./field-control.css_vue_type_style_index_0_src_true_lang-CeLay9Tk.js";
+import { computed as n, createElementBlock as r, defineComponent as i, isRef as a, mergeProps as o, openBlock as s, unref as c, useAttrs as l, vModelDynamic as u, withDirectives as d } from "vue";
+import { useVModel as f } from "@vueuse/core";
+//#region src/components/input/Input.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"data-size",
+	"data-state",
+	"aria-invalid"
+], m = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "Input",
+	props: {
+		autocomplete: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		defaultValue: {},
+		disabled: { type: Boolean },
+		enterkeyhint: {},
+		form: {},
+		inputmode: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		maxlength: {},
+		minlength: {},
+		modelValue: {},
+		name: {},
+		pattern: {},
+		placeholder: {},
+		readonly: { type: Boolean },
+		required: { type: Boolean },
+		size: { default: "md" },
+		type: { default: "text" }
+	},
+	emits: ["update:modelValue"],
+	setup(i, { emit: m }) {
+		let h = i, g = m, { ariaInvalid: _, forwardedAttrs: v, state: y } = t(h, l()), b = f(h, "modelValue", g, {
+			passive: !0,
+			defaultValue: h.defaultValue
+		}), x = n(() => ({
+			autocomplete: h.autocomplete,
+			disabled: h.disabled,
+			enterkeyhint: h.enterkeyhint,
+			form: h.form,
+			inputmode: h.inputmode,
+			maxlength: h.maxlength,
+			minlength: h.minlength,
+			name: h.name,
+			pattern: h.pattern,
+			placeholder: h.placeholder,
+			readonly: h.readonly,
+			required: h.required,
+			type: h.type
+		}));
+		return (t, n) => d((s(), r("input", o({
+			...c(v),
+			...x.value
+		}, {
+			"onUpdate:modelValue": n[0] ||= (e) => a(b) ? b.value = e : null,
+			"data-slot": "input",
+			"data-kind": "input",
+			"data-size": i.size,
+			"data-state": c(y),
+			"aria-invalid": c(_),
+			class: c(e)("field-control glass-defined", h.class)
+		}), null, 16, p)), [[u, c(b)]]);
+	}
+});
+//#endregion
+export { m as t };