@cueplusplus/ui 0.8.0 → 0.10.0

package/dist/configurator/_export.js

@@ -43,7 +43,7 @@ const DTCG_ALIASES = { density: "density-factor" };
 * @param name - What the user typed, if anything.
 * @returns A usable CSS identifier.
 * @example
-* exportName({ theme: "terminal", mode: "dark" }); // → "terminal-custom"
+* exportName({ theme: "terminal", mode: "dark", manifest: terminal }); // → "terminal-custom"
 */
 function exportName(scope, name) {
 	const proposed = name?.trim() ?? "";
@@ -51,13 +51,22 @@ function exportName(scope, name) {
 }
 /** A JSON string, printed the way a hand-written source file would print it. */
 const json = (value) => `${JSON.stringify(value, null, 2)}\n`;
-/** Both modes of a scope, so an export can carry the palette the user is not looking at. */
+/**
+* Both modes of a scope, so an export can carry the palette the user is not
+* looking at.
+*
+* Spread rather than rebuilt: a fresh literal would have to restate `manifest`,
+* and the shape of that mistake is a `null` that resolves the off-mode palette
+* to the blank base — so the `dtcg` and `registry` exports would carry the right
+* colours for the mode on screen and the neutral ramp for the other one, with
+* nothing to see until somebody installed the theme.
+*/
 function bothModes(scope) {
 	return [{
-		theme: scope.theme,
+		...scope,
 		mode: "dark"
 	}, {
-		theme: scope.theme,
+		...scope,
 		mode: "light"
 	}];
 }
@@ -71,8 +80,11 @@ function movedTokens(overrides, scope, kind) {
 * ② The DTCG token file.
 *
 * A whole theme rather than a diff: the point of this format is that the result
-* can be dropped into `packages/tokens/src/themes/` (or anyone else's DTCG
-* pipeline) and built, which a patch file cannot. Groups follow the sources —
+* can be dropped into a theme package's `src/` — `cue-theme init` scaffolds one,
+* and `packages/theme-<name>/src/<name>.dark.tokens.json` is the shape — or into
+* anyone else's DTCG pipeline, and built, which a patch file cannot. (It used to
+* say `packages/tokens/src/themes/`; that directory is gone, and a palette is a
+* package now.) Groups follow the sources —
 * `color` for the palette, `type` for the stacks, `density` for the multipliers
 * — and appear only when they carry something.
 */
@@ -121,9 +133,25 @@ function dtcgFile(overrides, scope, name) {
 function quote(value) {
 	return value.includes("\"") && !value.includes("'") && !value.includes("\\") ? `'${value}'` : JSON.stringify(value);
 }
+/** What a JavaScript binding may be called, and what a printed key may go unquoted as. */
+const IDENTIFIER = /^[A-Za-z_$][\w$]*$/;
 /** One `key: "value"` line of an object literal, quoting the key only when it must. */
 function property(key, value, indent) {
-	return `${indent}${/^[A-Za-z_$][\w$]*$/.test(key) ? key : JSON.stringify(key)}: ${quote(value)},`;
+	return `${indent}${IDENTIFIER.test(key) ? key : JSON.stringify(key)}: ${quote(value)},`;
+}
+/**
+* What to call the imported base manifest in the snippet.
+*
+* The theme's own name where that is a legal binding — `terminal` reads as what
+* it is — and `base` where it is not (a theme may be called `acme-dark`, which
+* is a fine `data-theme` value and not an identifier). The suffix exists for the
+* one collision this can produce: a user who names their export exactly what the
+* base theme is called would otherwise get `const terminal = createTheme({ base:
+* terminal })`, which is a snippet that does not run.
+*/
+function baseIdentifier(theme, exported) {
+	const proposed = IDENTIFIER.test(theme) ? theme : "base";
+	return proposed === exported ? `${proposed}Base` : proposed;
 }
 /**
 * ③ The `createTheme()` call.
@@ -134,7 +162,17 @@ function property(key, value, indent) {
 * a snippet that quietly loses half an edit is worse than no snippet.
 */
 function createThemeSnippet(overrides, scope, name) {
-	const lines = [`  name: ${JSON.stringify(name)},`, `  base: ${JSON.stringify(scope.theme)},`];
+	const exported = IDENTIFIER.test(name) ? name : "theme";
+	const base = scope.manifest;
+	let baseImport = null;
+	let baseAnchor = null;
+	if (base !== null) {
+		const ident = baseIdentifier(scope.theme, exported);
+		baseImport = `import ${ident} from ${JSON.stringify(base.package)};`;
+		baseAnchor = `  base: ${ident},`;
+	}
+	const lines = [`  name: ${JSON.stringify(name)},`];
+	if (baseAnchor !== null) lines.push(baseAnchor);
 	const unrepresentable = [];
 	for (const [anchor, token] of DIRECT_ANCHORS) if (isOverridden(overrides, scope, token)) lines.push(property(anchor, resolveValue(overrides, scope, token), "  "));
 	const surfaces = SURFACE_ANCHORS.filter((token) => isOverridden(overrides, scope, token));
@@ -167,17 +205,19 @@ function createThemeSnippet(overrides, scope, name) {
 		if (anchored.has(moved)) continue;
 		unrepresentable.push(`${moved}: ${resolveValue(overrides, scope, moved)}`);
 	}
-	const footer = unrepresentable.length === 0 ? "" : [
+	const notes = [];
+	if (base === null) notes.push(`// no manifest is registered for "${scope.theme}"; this call starts from the blank base.`);
+	if (unrepresentable.length > 0) notes.push("// createTheme() derives these rather than taking them as anchors, so they are not", "// in the call above. Ship the CSS export alongside it — that one is lossless.", ...unrepresentable.map((entry) => `// ${entry}`));
+	const footer = notes.length === 0 ? "" : [
 		"",
-		"// createTheme() derives these rather than taking them as anchors, so they are not",
-		"// in the call above. Ship the CSS export alongside it — that one is lossless.",
-		...unrepresentable.map((entry) => `// ${entry}`),
+		...notes,
 		""
 	].join("\n");
 	return [
 		"import { createTheme } from \"@cueplusplus/ui/theming\";",
+		...baseImport === null ? [] : [baseImport],
 		"",
-		`export const ${/^[A-Za-z_$][\w$]*$/.test(name) ? name : "theme"} = createTheme({`,
+		`export const ${exported} = createTheme({`,
 		...lines,
 		"});",
 		footer

package/dist/configurator/_overrides.d.ts

@@ -1,5 +1,6 @@
 import { ResolvedMode } from "../system/theme-provider.js";
-import { Density, ThemeName } from "@cueplusplus/tokens";
+import { Density } from "@cueplusplus/tokens";
+import { ThemeManifest, ThemeName } from "@cueplusplus/theme-base";
 //#region src/configurator/_overrides.d.ts
 /**
  * The override model behind the theme configurator: what a user may move, where
@@ -68,6 +69,18 @@ interface ThemeScope {
   theme: ThemeName;
   /** The mode as resolved — `"system"` never reaches here. */
   mode: ResolvedMode;
+  /**
+   * The active theme's manifest, or `null` for the blank base.
+   *
+   * Required, not optional, and that is the point. {@link baseValue} branches on
+   * `manifest === null` to mean *the blank base*; an absent field would take
+   * that branch by accident, and normalising `undefined` to `null` would make
+   * every caller that has not been updated resolve blank-base colours under a
+   * name that is not the blank base — silently, and only visibly wrong to
+   * somebody comparing swatches. A compile error naming the property is the
+   * right way for a stale caller to find out. Pass `useTheme().manifest`.
+   */
+  manifest: ThemeManifest | null;
 }
 /** Every override the user has made, ready to serialize. Treat as immutable. */
 interface ThemeOverrides {
@@ -117,15 +130,21 @@ declare function isSafeCssValue(value: string): boolean;
 /**
  * The value a token has before the user touches anything.
  *
- * Colours come from the preset for *this mode*; fonts from the preset's own
- * override, else the base stack; the multipliers are 1 by definition, because
- * what the panel edits is the multiplier and not the ladder underneath it.
+ * Everything a theme actually declares comes from `theme-base`'s `resolve()`,
+ * which is the one implementation of the layering rule — the theme's block for
+ * this mode, the theme's own font override under the base stack — so the panel
+ * and the runtime cannot disagree about what "shipped" means. A `null` manifest
+ * is the blank base, which resolves to the neutral ramp rather than to nothing:
+ * every scope answers, including one naming a theme no manifest was passed for.
+ * The multipliers are 1 by definition, because what the panel edits is the
+ * multiplier and not the ladder underneath it.
  *
- * @param scope - Theme and mode being edited.
+ * @param scope - Theme, mode and manifest being edited.
  * @param token - A bare token name or a `--cue-*` property.
  * @returns The shipped value, as a CSS string.
  * @example
- * baseValue({ theme: "terminal", mode: "dark" }, "accent"); // → "hsl(180 100% 50%)"
+ * baseValue({ theme: "terminal", mode: "dark", manifest: terminal }, "accent");
+ * // → "hsl(180 100% 50%)"
  */
 declare function baseValue(scope: ThemeScope, token: string): string;
 /**

package/dist/configurator/_overrides.js

@@ -1,5 +1,6 @@
-import { BASE_FONT_STACKS, DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS, THEME_PRESETS } from "../theming/_presets.js";
-import { THEME_NAME_PATTERN, assertCssValue, serializeSystemModeAliases, serializeThemeBlock, tokenProperty } from "../theming/serialize.js";
+import { THEME_NAME_PATTERN as THEME_NAME_PATTERN$1, assertCssValue, serializeSystemModeAliases, serializeThemeBlock, tokenProperty } from "../theming/serialize.js";
+import { DEFAULT_DENSITY_LEVEL, DENSITY_RADIUS_SCALE, THEME_COLOR_TOKENS } from "../theming/create-theme.js";
+import { resolve } from "@cueplusplus/theme-base";
 //#region src/configurator/_overrides.ts
 /**
 * The override model behind the theme configurator: what a user may move, where
@@ -55,11 +56,10 @@ const OVERRIDE_BANNER = "@cueplusplus/ui — theme configurator overrides";
 /**
 * The unitless density multiplier each level publishes.
 *
-* A copy of `packages/tokens/src/density/*.tokens.json`, for the same reason
-* `theming/_presets.ts` copies the palettes: the tokens package emits CSS, and a
-* value this module has to *multiply* cannot be read out of a stylesheet.
-* `test/configurator/overrides.test.ts` re-reads the DTCG sources and fails on
-* the first number that has drifted.
+* A copy of `packages/tokens/src/density/*.tokens.json`: the tokens package
+* emits CSS, and a value this module has to *multiply* cannot be read out of a
+* stylesheet. `test/configurator/overrides.test.ts` re-reads the DTCG sources
+* and fails on the first number that has drifted.
 */
 const DENSITY_FACTOR = {
 	"ultra-compact": .85,
@@ -120,13 +120,21 @@ function tokenKind(token) {
 function scopeKey(scope) {
 	return `${scope.theme}/${scope.mode}`;
 }
-/** The inverse of {@link scopeKey}, rejecting anything that would not be safe in a selector. */
+/**
+* The inverse of {@link scopeKey}, rejecting anything that would not be safe in
+* a selector.
+*
+* A bare `{ theme, mode }` rather than a {@link ThemeScope}: a storage key
+* carries a *name*, and this module has no registry to look a manifest up in.
+* Both callers below want only the selector halves. A caller that needs the
+* manifest attaches it from the registry it holds.
+*/
 function parseScopeKey(key) {
 	const slash = key.lastIndexOf("/");
 	if (slash === -1) return null;
 	const theme = key.slice(0, slash);
 	const mode = key.slice(slash + 1);
-	if (!THEME_NAME_PATTERN.test(theme)) return null;
+	if (!THEME_NAME_PATTERN$1.test(theme)) return null;
 	if (mode !== "dark" && mode !== "light") return null;
 	return {
 		theme,
@@ -157,23 +165,28 @@ function isSafeCssValue(value) {
 /**
 * The value a token has before the user touches anything.
 *
-* Colours come from the preset for *this mode*; fonts from the preset's own
-* override, else the base stack; the multipliers are 1 by definition, because
-* what the panel edits is the multiplier and not the ladder underneath it.
+* Everything a theme actually declares comes from `theme-base`'s `resolve()`,
+* which is the one implementation of the layering rule — the theme's block for
+* this mode, the theme's own font override under the base stack — so the panel
+* and the runtime cannot disagree about what "shipped" means. A `null` manifest
+* is the blank base, which resolves to the neutral ramp rather than to nothing:
+* every scope answers, including one naming a theme no manifest was passed for.
+* The multipliers are 1 by definition, because what the panel edits is the
+* multiplier and not the ladder underneath it.
 *
-* @param scope - Theme and mode being edited.
+* @param scope - Theme, mode and manifest being edited.
 * @param token - A bare token name or a `--cue-*` property.
 * @returns The shipped value, as a CSS string.
 * @example
-* baseValue({ theme: "terminal", mode: "dark" }, "accent"); // → "hsl(180 100% 50%)"
+* baseValue({ theme: "terminal", mode: "dark", manifest: terminal }, "accent");
+* // → "hsl(180 100% 50%)"
 */
 function baseValue(scope, token) {
 	const property = tokenProperty(token);
 	const name = property.slice(6);
-	const preset = THEME_PRESETS[scope.theme];
 	switch (tokenKind(property)) {
-		case "color": return ((scope.mode === "light" ? preset?.light : preset?.dark) ?? preset?.dark)?.[name] ?? "";
-		case "font": return preset?.fonts[name] ?? BASE_FONT_STACKS[name] ?? "";
+		case "color": return resolve(scope.manifest, { mode: scope.mode }).colors[name] ?? "";
+		case "font": return resolve(scope.manifest, { mode: scope.mode }).fonts[name] ?? "";
 		case "scaled":
 		case "inline": return "1";
 		case "flat": return BASE_TRACKING_LABEL;

package/dist/configurator/configurator.js

@@ -56,11 +56,16 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 * <ThemeConfigurator position="docked-right" onChange={(tokens) => report(tokens)} />
 */
 function ThemeConfigurator({ position: positionProp, defaultPosition = "floating", onPositionChange, defaultCollapsed = false, storageKey = DEFAULT_CONFIGURATOR_STORAGE_KEY, onChange, zoomShortcuts = true, title = "Theme", className }) {
-	const { theme, resolvedMode } = useTheme();
+	const { theme, resolvedMode, manifest } = useTheme();
 	const scope = React.useMemo(() => ({
 		theme,
-		mode: resolvedMode
-	}), [theme, resolvedMode]);
+		mode: resolvedMode,
+		manifest
+	}), [
+		theme,
+		resolvedMode,
+		manifest
+	]);
 	const [snapshot, setSnapshot] = React.useState(() => {
 		const initial = defaultSnapshot();
 		return {

package/dist/configurator/panel-sections.js

@@ -1,22 +1,20 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Input } from "../forms/input.js";
-import { DENSITY_LEVELS } from "../system/density.js";
+import { useDensities, useThemes } from "../system/theme-registry.js";
 import { SectionHeader } from "../chrome/section-header.js";
 import { SegmentedControl } from "../chrome/segmented-control.js";
 import { Field, FieldLabel } from "../forms/field.js";
 import { Slider } from "../forms/slider.js";
 import { Kbd } from "../primitives/kbd.js";
 import { useTheme } from "../system/use-theme.js";
-import { THEME_PRESETS } from "../theming/_presets.js";
 import { tokenProperty } from "../theming/serialize.js";
 import { COLOR_TOKENS, FONT_TOKENS, isSafeCssValue } from "./_overrides.js";
 import { TokenEditor } from "./token-editor.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { resolve } from "@cueplusplus/theme-base";
 //#region src/configurator/panel-sections.tsx
-/** The presets, in menu order, with the palette each one is announced by. */
-const PRESETS = Object.keys(THEME_PRESETS);
 /** The five colours a preset is recognisable from, in reading order. */
 const SWATCH_TOKENS = [
 	"bg",
@@ -44,13 +42,25 @@ const MODE_ITEMS = [
 * and `Ultra-large` alone are 25 characters — so the segmented control wears
 * the garment sizes and the value it sets is still the ladder's own name.
 */
-const DENSITY_LABELS = {
+const BASE_DENSITY_LABELS = {
 	"ultra-compact": "XS",
 	"compact": "S",
 	"normal": "M",
 	"large": "L",
 	"ultra-large": "XL"
 };
+/**
+* What a rung is called in the panel.
+*
+* A lookup rather than a table, because the ladder is open now: a theme may add
+* a rung, and this package has no garment size to give it. Its own name is the
+* only label that is certainly true — longer than a letter, and honest about
+* being the theme's rather than the ladder's. The base five keep their sizes,
+* so nothing a user has learned moves.
+*/
+function densityLabel(rung) {
+	return BASE_DENSITY_LABELS[rung] ?? rung;
+}
 /** Bounds of the text-scale knob, from spec §6's `fontScale`. */
 const FONT_SCALE = {
 	min: .8,
@@ -77,7 +87,16 @@ const FONT_LABELS = {
 };
 /** Base UI hands a range slider an array; every slider here has one thumb. */
 const single = (value) => Array.isArray(value) ? value[0] ?? 0 : value;
-/** A number knob wired to one token, live on drag and persisted on release. */
+/**
+* A number knob wired to one token, live on drag and persisted on release.
+*
+* The three it is used for are `--cue-radius-scale` and `--cue-density`, both
+* crossed with the density ladder when they are written, and `--cue-font-scale`,
+* which the provider publishes inline. Naming them here is not decoration: the
+* package manifest's token list is scraped for literal `--cue-*` spellings, and
+* a token whose only spelling in this file is the bare `token="radius-scale"`
+* prop is a token the docs page for this section does not list.
+*/
 function ScaleSlider({ label, token, edits, bounds }) {
 	const value = Number(edits.value(token));
 	return /* @__PURE__ */ jsx(Slider, {
@@ -147,16 +166,27 @@ function TextTokenField({ label, token, edits, placeholder }) {
 */
 function PresetSection({ edits, zoom, className }) {
 	const { theme, density, mode, resolvedMode, setTheme, setDensity, setMode } = useTheme();
+	const themes = useThemes();
+	const densities = useDensities();
 	return /* @__PURE__ */ jsxs(SectionHeader, {
 		label: "Preset",
 		collapsible: true,
 		className,
 		children: [
-			/* @__PURE__ */ jsx("div", {
+			themes.length === 0 ? /* @__PURE__ */ jsxs("p", {
+				className: "text-fg-muted text-ui",
+				children: [
+					"No themes registered — pass ",
+					/* @__PURE__ */ jsx("code", { children: "themes" }),
+					" to ",
+					/* @__PURE__ */ jsx("code", { children: "ThemeProvider" }),
+					"."
+				]
+			}) : /* @__PURE__ */ jsx("div", {
 				className: "grid grid-cols-2 gap-(--cue-space-2)",
-				children: PRESETS.map((name) => {
-					const preset = THEME_PRESETS[name];
-					const palette = (resolvedMode === "light" ? preset.light : preset.dark) ?? preset.dark;
+				children: themes.map((manifest) => {
+					const name = manifest.name;
+					const palette = resolve(manifest, { mode: resolvedMode }).colors;
 					const active = name === theme;
 					return /* @__PURE__ */ jsxs("button", {
 						type: "button",
@@ -197,9 +227,9 @@ function PresetSection({ edits, zoom, className }) {
 				itemClassName: "flex-1",
 				value: density,
 				onValueChange: (next) => setDensity(next),
-				items: DENSITY_LEVELS.map((level) => ({
-					value: level,
-					label: DENSITY_LABELS[level]
+				items: densities.map((rung) => ({
+					value: rung.name,
+					label: densityLabel(rung.name)
 				}))
 			}),
 			/* @__PURE__ */ jsx(ScaleSlider, {

package/dist/elements/command-palette.js

@@ -32,7 +32,7 @@ function ElementsCommandPalette({ commands, query, activeId, onQueryChange, onAc
 		if (next) onActiveChange?.(next.id);
 	};
 	useEffect(() => {
-		document.getElementById(optionId(activeId))?.scrollIntoView({ block: "nearest" });
+		document.getElementById(`${listId}-${activeId}`)?.scrollIntoView({ block: "nearest" });
 	}, [activeId, listId]);
 	const onKeyDown = (event) => {
 		if (event.nativeEvent.isComposing) return;

package/dist/elements/flow-graph.js

@@ -47,7 +47,7 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 					const from = nodes.find((node) => node.id === edge.from);
 					const to = nodes.find((node) => node.id === edge.to);
 					if (!from || !to) return null;
-					shownIds.has(edge.from) && shownIds.has(edge.to);
+					const live = shownIds.has(edge.from) && shownIds.has(edge.to);
 					const a = center(from);
 					const b = center(to);
 					const midX = (a.x + b.x) / 2;
@@ -55,7 +55,7 @@ function FlowGraph({ nodes, edges, visibleCount, className, ...props }) {
 						d: `M ${a.x + NODE_W / 2} ${a.y} C ${midX} ${a.y}, ${midX} ${b.y}, ${b.x - NODE_W / 2} ${b.y}`,
 						fill: "none",
 						strokeWidth: "1.5",
-						className: cn("transition-opacity duration-500 motion-reduce:transition-none", "stroke-fg-subtle")
+						className: cn("transition-opacity duration-500 motion-reduce:transition-none", "stroke-fg-subtle", live ? "opacity-100" : "opacity-30")
 					}, `${edge.from}-${edge.to}`);
 				})
 			}), shown.map((node) => /* @__PURE__ */ jsx("div", {

package/dist/elements/markdown.js

@@ -130,7 +130,7 @@ function safeUrl(value) {
 const FENCE = /^ {0,3}(`{3,}|~{3,})/;
 /** Whether a character can sit next to a delimiter run without closing a word. */
 function isBoundary(char) {
-	return char === "" || /[\s!-\/:-@[-`{-~]/.test(char);
+	return char === "" || /[\s!-/:-@[-`{-~]/.test(char);
 }
 /**
 * Where the last block of `source` begins: after the final blank line that is

package/dist/elements/surfaces.js

@@ -80,10 +80,11 @@ function ShimmerLabel({ active = true, className, ...props }) {
 * announced nor copied into a selection.
 */
 function SwapLabel({ active, children, className }) {
-	const layers = [useRef(null), useRef(null)];
+	const restingRef = useRef(null);
+	const activeRef = useRef(null);
 	const [width, setWidth] = useState(null);
 	useLayoutEffect(() => {
-		const target = layers[active]?.current;
+		const target = (active === 0 ? restingRef : activeRef).current;
 		if (!target) return void 0;
 		const measure = () => setWidth(Math.ceil(target.getBoundingClientRect().width));
 		measure();
@@ -96,7 +97,7 @@ function SwapLabel({ active, children, className }) {
 		style: width === null ? void 0 : { width },
 		className: cn("grid overflow-x-clip transition-[width] duration-300 ease-[cubic-bezier(0.23,1,0.32,1)] motion-reduce:transition-none", className),
 		children: children.map((layer, index) => /* @__PURE__ */ jsx("span", {
-			ref: layers[index],
+			ref: index === 0 ? restingRef : activeRef,
 			"aria-hidden": active !== index,
 			className: cn(labelSwap, active === index ? labelSwapIn : labelSwapOut),
 			children: layer

package/dist/index.d.ts

@@ -33,6 +33,7 @@ import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityTo
 import { Toolbar, ToolbarButtonProps, ToolbarGroupProps, ToolbarRootProps, ToolbarSeparatorProps } from "./chrome/toolbar.js";
 import "./chrome/index.js";
 import { ControlVariantProps, FormControlSize, bareControlClasses, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants } from "./forms/_chassis.js";
+import { TokenOverrides, isSafeTokenValue } from "./system/overrides.js";
 import { FontFamilies, ResolvedMode, ThemeContextValue, ThemeProvider, ThemeProviderProps } from "./system/theme-provider.js";
 import { Autocomplete, AutocompleteProps } from "./forms/autocomplete.js";
 import { ButtonGroup, ButtonGroupOrientation, ButtonGroupProps } from "./forms/button-group.js";
@@ -85,11 +86,12 @@ import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/tw
 import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
 import "./instruments/index.js";
 import { Accordion, AccordionHeaderProps, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps } from "./layout/accordion.js";
+import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
+import { Bento, BentoColumns, BentoMinHeight, BentoRootProps, BentoRowSpan, BentoRows, BentoSpan, BentoTileProps } from "./layout/bento.js";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbProps } from "./layout/breadcrumb.js";
 import { Card, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardRootProps, CardTitleProps } from "./layout/card.js";
 import { Collapsible, CollapsiblePanelProps, CollapsibleRootProps, CollapsibleTriggerProps, Disclosure, DisclosureProps } from "./layout/collapsible.js";
 import { DescriptionList, DescriptionListDetailProps, DescriptionListLayout, DescriptionListRootProps, DescriptionListTermProps } from "./layout/description-list.js";
-import { SpaceStep, Stack, StackAlign, StackJustify, StackProps } from "./layout/stack.js";
 import { Grid, GridColumns, GridProps } from "./layout/grid.js";
 import { Item, ItemProps, itemVariants } from "./layout/item.js";
 import { Pagination, PaginationEntry, PaginationProps, paginationRange } from "./layout/pagination.js";
@@ -122,7 +124,9 @@ import "./primitives/index.js";
 import { Density, DensityProps } from "./system/density.js";
 import { CuePortalFrame, CuePortalFrameProps, useCuePortalProps } from "./system/portal.js";
 import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOptions, prepaintScript } from "./system/prepaint.js";
+import { ThemeRegistry } from "./system/vocabulary.js";
+import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
+import { DensityEntry, DensityLevel, FontEntry, FontName, Mode, ThemeManifest, ThemeName } from "./system/index.js";
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, Bento, type BentoColumns, type BentoMinHeight, type BentoRootProps, type BentoRowSpan, type BentoRows, type BentoSpan, type BentoTileProps, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityEntry, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontEntry, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeManifest, type ThemeName, ThemeProvider, type ThemeProviderProps, type ThemeRegistry, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, type TokenOverrides, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/index.js

@@ -24,7 +24,9 @@ import { Separator } from "./primitives/separator.js";
 import { AppBar } from "./chrome/app-bar.js";
 import { Sidebar, useSidebar } from "./layout/sidebar.js";
 import { Density } from "./system/density.js";
+import { isSafeTokenValue } from "./system/overrides.js";
 import { DEFAULT_STORAGE_KEY, prepaintScript } from "./system/prepaint.js";
+import { useDensities, useFonts, useThemes } from "./system/theme-registry.js";
 import { ThemeProvider } from "./system/theme-provider.js";
 import { CuePortalFrame, useCuePortalProps } from "./system/portal.js";
 import { OVERLAY_SIDE_OFFSET, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, scrimClasses } from "./overlays/_surface.js";
@@ -84,11 +86,12 @@ import { TerminalFrame } from "./instruments/terminal-frame.js";
 import { TwoStepButton } from "./instruments/two-step-button.js";
 import { UsageChart } from "./instruments/usage-chart.js";
 import { Accordion } from "./layout/accordion.js";
+import { Stack } from "./layout/stack.js";
+import { Bento } from "./layout/bento.js";
 import { Breadcrumb } from "./layout/breadcrumb.js";
 import { Card } from "./layout/card.js";
 import { Collapsible, Disclosure } from "./layout/collapsible.js";
 import { DescriptionList } from "./layout/description-list.js";
-import { Stack } from "./layout/stack.js";
 import { Grid } from "./layout/grid.js";
 import { Item, itemVariants } from "./layout/item.js";
 import { Pagination, paginationRange } from "./layout/pagination.js";
@@ -112,4 +115,4 @@ import { Kbd } from "./primitives/kbd.js";
 import { Skeleton } from "./primitives/skeleton.js";
 import { useControlHeight, useDensity } from "./system/use-density.js";
 import { useTheme } from "./system/use-theme.js";
-export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
+export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Bento, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, isSafeTokenValue, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensities, useDensity, useFonts, useSidebar, useTheme, useThemes, useToast };

package/dist/instruments/meter.d.ts

@@ -19,7 +19,11 @@ type MeterTone = "ok" | "busy" | "warn" | "danger";
  */
 type MeterProvenance = "vendor" | "estimated" | "unbounded" | "none";
 interface MeterProps extends Omit<React.ComponentPropsWithoutRef<"div">, "children"> {
-  /** How full, 0–100. Clamped; a non-finite value reads as 0. */
+  /**
+   * How full, 0–100. Clamped; a non-finite value reads as 0.
+   * @min 0
+   * @max 100
+   */
   percent: number;
   /** Status colour for the fill. Defaults to `"ok"`. */
   tone?: MeterTone;