@imfusion/web-ui 0.6.4-dev.8.g41d03f2f → 0.6.4-dev.84.gbfc0d437

package/dist/{tabs-DIe1Utiy.js → tabs-By5ir2pt.js}

@@ -7,7 +7,17 @@ import { Switch as a } from "@base-ui/react/switch";
 import { Toggle as o } from "@base-ui/react/toggle";
 import { ToggleGroup as s } from "@base-ui/react/toggle-group";
 import { Tabs as c } from "@base-ui/react/tabs";
-var l = {
+//#region src/utils/resolve-state-props.ts
+function l(e, t) {
+	return e instanceof Function ? e(t) : e;
+}
+function u(e, t) {
+	return l(e, t);
+}
+function d(e, t) {
+	return l(e, t);
+}
+var f = {
 	control: "imf-ui-slider-module-control",
 	indicator: "imf-ui-slider-module-indicator",
 	label: "imf-ui-slider-module-label",
@@ -15,21 +25,21 @@ var l = {
 	thumb: "imf-ui-slider-module-thumb",
 	track: "imf-ui-slider-module-track",
 	value: "imf-ui-slider-module-value"
-}, u = /* @__PURE__ */ e({
-	Control: () => x,
-	Indicator: () => C,
-	Label: () => y,
-	Root: () => v,
-	Thumb: () => w,
-	Track: () => S,
-	Value: () => b
-}), d = t(l.root), f = t(l.label), p = t(l.value), m = t(l.control), h = t(l.track), g = t(l.indicator), _ = t(l.thumb);
-function v({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: u = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, className: b, ...x }) {
+}, p = /* @__PURE__ */ e({
+	Control: () => C,
+	Indicator: () => T,
+	Label: () => x,
+	Root: () => b,
+	Thumb: () => E,
+	Track: () => w,
+	Value: () => S
+}), ee = t(f.root), m = t(f.label), h = t(f.value), g = t(f.control), _ = t(f.track), v = t(f.indicator), y = t(f.thumb);
+function b({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, min: o = 0, max: s = 100, step: c = 1, largeStep: l = 10, minStepsBetweenValues: d = 0, disabled: f = !1, orientation: p = "horizontal", name: m, form: h, locale: g, thumbAlignment: _ = "edge", thumbCollisionBehavior: v = "push", format: y, ...b }) {
 	return /* @__PURE__ */ n(i.Root, {
-		...x,
+		...b,
 		"data-imf-ui-component": "Slider.Root",
 		"data-orientation": p,
-		className: (e) => d({ className: typeof b == "function" ? b(e) : b }),
+		className: (e) => ee({ className: u(b.className, e) }),
 		value: e,
 		defaultValue: t,
 		onValueChange: r,
@@ -38,7 +48,7 @@ function v({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, m
 		max: s,
 		step: c,
 		largeStep: l,
-		minStepsBetweenValues: u,
+		minStepsBetweenValues: d,
 		disabled: f,
 		orientation: p,
 		name: m,
@@ -46,124 +56,119 @@ function v({ value: e, defaultValue: t, onValueChange: r, onValueCommitted: a, m
 		locale: g,
 		thumbAlignment: _,
 		thumbCollisionBehavior: v,
-		format: y,
-		children: x.children
+		format: y
 	});
 }
-v.displayName = "Slider.Root";
-function y({ className: e, ...t }) {
+b.displayName = "Slider.Root";
+function x(e) {
 	return /* @__PURE__ */ n(i.Label, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Label",
-		className: (t) => f({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => m({ className: u(e.className, t) })
 	});
 }
-y.displayName = "Slider.Label";
-function b({ className: e, children: t, ...r }) {
+x.displayName = "Slider.Label";
+function S({ children: e, ...t }) {
 	return /* @__PURE__ */ n(i.Value, {
-		...r,
+		...t,
 		"data-imf-ui-component": "Slider.Value",
-		className: (t) => p({ className: typeof e == "function" ? e(t) : e }),
-		children: t
+		className: (e) => h({ className: u(t.className, e) }),
+		children: e
 	});
 }
-b.displayName = "Slider.Value";
-function x({ className: e, ...t }) {
+S.displayName = "Slider.Value";
+function C(e) {
 	return /* @__PURE__ */ n(i.Control, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Control",
-		className: (t) => m({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => g({ className: u(e.className, t) })
 	});
 }
-x.displayName = "Slider.Control";
-function S({ className: e, ...t }) {
+C.displayName = "Slider.Control";
+function w(e) {
 	return /* @__PURE__ */ n(i.Track, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Track",
-		className: (t) => h({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => _({ className: u(e.className, t) })
 	});
 }
-S.displayName = "Slider.Track";
-function C({ className: e, ...t }) {
+w.displayName = "Slider.Track";
+function T(e) {
 	return /* @__PURE__ */ n(i.Indicator, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Slider.Indicator",
-		className: (t) => g({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => v({ className: u(e.className, t) })
 	});
 }
-C.displayName = "Slider.Indicator";
-function w({ index: e, className: t, ...r }) {
+T.displayName = "Slider.Indicator";
+function E({ index: e, ...t }) {
 	return /* @__PURE__ */ n(i.Thumb, {
-		...r,
+		...t,
 		"data-imf-ui-component": "Slider.Thumb",
-		className: (e) => _({ className: typeof t == "function" ? t(e) : t }),
+		className: (e) => y({ className: u(t.className, e) }),
 		index: e
 	});
 }
-w.displayName = "Slider.Thumb";
-var T = {
+E.displayName = "Slider.Thumb";
+var D = {
 	root: "imf-ui-switch-module-root",
 	thumb: "imf-ui-switch-module-thumb"
-}, E = /* @__PURE__ */ e({
-	Root: () => O,
-	Thumb: () => k
-}), D = t(T.root), ee = t(T.thumb);
-function O({ className: e, ...t }) {
+}, te = /* @__PURE__ */ e({
+	Root: () => A,
+	Thumb: () => j
+}), O = t(D.root), k = t(D.thumb);
+function A(e) {
 	return /* @__PURE__ */ n(a.Root, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Switch.Root",
-		className: (t) => D({ className: typeof e == "function" ? e(t) : e }),
-		children: t.children
+		className: (t) => O({ className: u(e.className, t) })
 	});
 }
-O.displayName = "Switch.Root";
-function k({ className: e, ...t }) {
+A.displayName = "Switch.Root";
+function j(e) {
 	return /* @__PURE__ */ n(a.Thumb, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Switch.Thumb",
-		className: (t) => ee({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => k({ className: u(e.className, t) })
 	});
 }
-k.displayName = "Switch.Thumb";
+j.displayName = "Switch.Thumb";
 //#endregion
 //#region src/components/toggle/toggle.tsx
-var A = t({ root: "imf-ui-toggle-module-root" }.root), j = 2;
-function M(e) {
+var M = t({ root: "imf-ui-toggle-module-root" }.root), N = 2;
+function P(e) {
 	let t = 0;
 	return r.forEach(e, (e) => {
-		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += j);
+		typeof e == "string" || typeof e == "number" ? t += String(e).trim().length : e != null && typeof e != "boolean" && (t += N);
 	}), t;
 }
-function N({ className: e, style: t, children: r, ...i }) {
-	let a = {
-		"--glyph-count": M(r),
-		"--max-glyphs": j
+function F({ style: e, children: t, ...r }) {
+	let i = {
+		"--glyph-count": P(t),
+		"--max-glyphs": N
 	};
 	return /* @__PURE__ */ n(o, {
-		...i,
+		...r,
 		"data-imf-ui-component": "Toggle",
-		style: (e) => ({
-			...a,
-			...typeof t == "function" ? t(e) : t
+		style: (t) => ({
+			...i,
+			...d(e, t)
 		}),
-		className: (t) => A({ className: typeof e == "function" ? e(t) : e }),
-		children: r
+		className: (e) => M({ className: u(r.className, e) }),
+		children: t
 	});
 }
 //#endregion
 //#region src/components/toggle-group/toggle-group.tsx
-var te = t({ root: "imf-ui-toggle-group-module-root" }.root);
-function ne({ className: e, ...t }) {
+var I = t({ root: "imf-ui-toggle-group-module-root" }.root);
+function L(e) {
 	return /* @__PURE__ */ n(s, {
-		...t,
+		...e,
 		"data-imf-ui-component": "ToggleGroup",
-		className: (t) => te({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => I({ className: u(e.className, t) })
 	});
 }
-var P = {
+var R = {
 	alignCenter: "imf-ui-row-module-alignCenter",
 	alignEnd: "imf-ui-row-module-alignEnd",
 	alignStart: "imf-ui-row-module-alignStart",
@@ -186,53 +191,52 @@ var P = {
 	justifyStart: "imf-ui-row-module-justifyStart",
 	root: "imf-ui-row-module-root",
 	wrap: "imf-ui-row-module-wrap"
-}, F = t(P.root, { variants: {
+}, z = t(R.root, { variants: {
 	gap: {
-		1: P.gap1,
-		2: P.gap2,
-		3: P.gap3,
-		4: P.gap4,
-		5: P.gap5,
-		6: P.gap6,
-		7: P.gap7,
-		8: P.gap8,
-		9: P.gap9,
-		10: P.gap10
+		1: R.gap1,
+		2: R.gap2,
+		3: R.gap3,
+		4: R.gap4,
+		5: R.gap5,
+		6: R.gap6,
+		7: R.gap7,
+		8: R.gap8,
+		9: R.gap9,
+		10: R.gap10
 	},
 	align: {
-		start: P.alignStart,
-		center: P.alignCenter,
-		end: P.alignEnd,
-		stretch: P.alignStretch
+		start: R.alignStart,
+		center: R.alignCenter,
+		end: R.alignEnd,
+		stretch: R.alignStretch
 	},
 	justify: {
-		start: P.justifyStart,
-		center: P.justifyCenter,
-		end: P.justifyEnd,
-		between: P.justifyBetween,
-		around: P.justifyAround,
-		evenly: P.justifyEvenly
+		start: R.justifyStart,
+		center: R.justifyCenter,
+		end: R.justifyEnd,
+		between: R.justifyBetween,
+		around: R.justifyAround,
+		evenly: R.justifyEvenly
 	},
 	wrap: {
-		true: P.wrap,
+		true: R.wrap,
 		false: null
 	}
 } });
-function I({ gap: e = "2", align: t = "stretch", justify: r = "start", wrap: i = !1, className: a, ...o }) {
+function B({ gap: e = "2", align: t = "stretch", justify: r = "start", wrap: i = !1, ...a }) {
 	return /* @__PURE__ */ n("div", {
-		...o,
+		...a,
 		"data-imf-ui-component": "Row",
-		className: F({
+		className: z({
 			gap: e,
 			align: t,
 			justify: r,
 			wrap: i,
-			className: a
-		}),
-		children: o.children
+			className: a.className
+		})
 	});
 }
-var L = {
+var V = {
 	alignCenter: "imf-ui-stack-module-alignCenter",
 	alignEnd: "imf-ui-stack-module-alignEnd",
 	alignStart: "imf-ui-stack-module-alignStart",
@@ -255,49 +259,48 @@ var L = {
 	justifyEvenly: "imf-ui-stack-module-justifyEvenly",
 	justifyStart: "imf-ui-stack-module-justifyStart",
 	root: "imf-ui-stack-module-root"
-}, R = t(L.root, { variants: {
+}, H = t(V.root, { variants: {
 	gap: {
-		0: L.gap0,
-		1: L.gap1,
-		2: L.gap2,
-		3: L.gap3,
-		4: L.gap4,
-		5: L.gap5,
-		6: L.gap6,
-		7: L.gap7,
-		8: L.gap8,
-		9: L.gap9,
-		10: L.gap10
+		0: V.gap0,
+		1: V.gap1,
+		2: V.gap2,
+		3: V.gap3,
+		4: V.gap4,
+		5: V.gap5,
+		6: V.gap6,
+		7: V.gap7,
+		8: V.gap8,
+		9: V.gap9,
+		10: V.gap10
 	},
 	align: {
-		start: L.alignStart,
-		center: L.alignCenter,
-		end: L.alignEnd,
-		stretch: L.alignStretch
+		start: V.alignStart,
+		center: V.alignCenter,
+		end: V.alignEnd,
+		stretch: V.alignStretch
 	},
 	justify: {
-		start: L.justifyStart,
-		center: L.justifyCenter,
-		end: L.justifyEnd,
-		between: L.justifyBetween,
-		around: L.justifyAround,
-		evenly: L.justifyEvenly
+		start: V.justifyStart,
+		center: V.justifyCenter,
+		end: V.justifyEnd,
+		between: V.justifyBetween,
+		around: V.justifyAround,
+		evenly: V.justifyEvenly
 	}
 } });
-function z({ gap: e = "4", align: t = "stretch", justify: r = "start", className: i, ...a }) {
+function U({ gap: e = "4", align: t = "stretch", justify: r = "start", ...i }) {
 	return /* @__PURE__ */ n("div", {
-		...a,
+		...i,
 		"data-imf-ui-component": "Stack",
-		className: R({
+		className: H({
 			gap: e,
 			align: t,
 			justify: r,
-			className: i
-		}),
-		children: a.children
+			className: i.className
+		})
 	});
 }
-var B = {
+var W = {
 	indicator: "imf-ui-tabs-module-indicator",
 	list: "imf-ui-tabs-module-list",
 	listFill: "imf-ui-tabs-module-listFill",
@@ -305,67 +308,67 @@ var B = {
 	panelViewport: "imf-ui-tabs-module-panelViewport",
 	root: "imf-ui-tabs-module-root",
 	tab: "imf-ui-tabs-module-tab"
-}, V = /* @__PURE__ */ e({
+}, G = /* @__PURE__ */ e({
 	Indicator: () => Z,
 	List: () => Y,
 	Panel: () => $,
 	PanelViewport: () => Q,
 	Root: () => J,
 	Tab: () => X
-}), H = t(B.list, { variants: { fill: {
-	true: B.listFill,
+}), K = t(W.list, { variants: { fill: {
+	true: W.listFill,
 	false: null
-} } }), U = t(B.root), W = t(B.tab), G = t(B.indicator), K = t(B.panelViewport), q = t(B.panel);
-function J({ className: e, ...t }) {
+} } }), q = t(W.root), ne = t(W.tab), re = t(W.indicator), ie = t(W.panelViewport), ae = t(W.panel);
+function J(e) {
 	return /* @__PURE__ */ n(c.Root, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Root",
-		className: (t) => U({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => q({ className: u(e.className, t) })
 	});
 }
 J.displayName = "Tabs.Root";
-function Y({ fill: e = !1, className: t, ...r }) {
+function Y({ fill: e = !1, ...t }) {
 	return /* @__PURE__ */ n(c.List, {
-		...r,
+		...t,
 		"data-imf-ui-component": "Tabs.List",
-		className: (n) => H({
+		className: (n) => K({
 			fill: e,
-			className: typeof t == "function" ? t(n) : t
+			className: u(t.className, n)
 		})
 	});
 }
 Y.displayName = "Tabs.List";
-function X({ className: e, ...t }) {
+function X(e) {
 	return /* @__PURE__ */ n(c.Tab, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Tab",
-		className: (t) => W({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => ne({ className: u(e.className, t) })
 	});
 }
 X.displayName = "Tabs.Tab";
-function Z({ className: e, ...t }) {
+function Z(e) {
 	return /* @__PURE__ */ n(c.Indicator, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Indicator",
-		className: (t) => G({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => re({ className: u(e.className, t) })
 	});
 }
 Z.displayName = "Tabs.Indicator";
-function Q({ className: e, ...t }) {
+function Q(e) {
 	return /* @__PURE__ */ n("div", {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.PanelViewport",
-		className: K({ className: e })
+		className: ie({ className: e.className })
 	});
 }
 Q.displayName = "Tabs.PanelViewport";
-function $({ className: e, ...t }) {
+function $(e) {
 	return /* @__PURE__ */ n(c.Panel, {
-		...t,
+		...e,
 		"data-imf-ui-component": "Tabs.Panel",
-		className: (t) => q({ className: typeof e == "function" ? e(t) : e })
+		className: (t) => ae({ className: u(e.className, t) })
 	});
 }
 $.displayName = "Tabs.Panel";
 //#endregion
-export { u as S, y as _, J as a, S as b, z as c, N as d, O as f, C as g, x as h, Q as i, I as l, E as m, Y as n, X as o, k as p, $ as r, V as s, Z as t, ne as u, v, b as x, w as y };
+export { u as C, p as S, x as _, J as a, w as b, U as c, F as d, A as f, T as g, C as h, Q as i, B as l, te as m, Y as n, X as o, j as p, $ as r, G as s, Z as t, L as u, b as v, S as x, E as y };

package/dist/tokens/apply.d.ts

@@ -5,12 +5,8 @@ import { TokenOverrides } from './types';
  * Pure token-application layer — no React, no router, no DOM ownership beyond the one imperative
  * writer ({@link applyTokenOverrides}). The stateful, persistence-agnostic hook is `useTokenControls`.
  */
-/** Flatten a possibly scheme-keyed numeric value to the active scheme. */
 export declare function resolveScheme(field: number | Record<ColorScheme, number>, scheme: ColorScheme): number;
-/**
- * A control resolved to the active scheme — the panel-facing view. Slider controls carry numeric
- * bounds; select controls carry options.
- */
+/** A control resolved to the active scheme — the panel-facing view of a token control. */
 export type ResolvedControl = {
     id: TokenId;
     cssVar: string;
@@ -47,9 +43,8 @@ export declare function resolve(control: TokenControl, scheme: ColorScheme): Res
  */
 export declare function deriveAll(live: TokenOverrides): TokenOverrides;
 /**
- * Imperative core — reconcile `documentElement`'s inline custom properties to `overrides`. Sets
- * present vars, removes every registry var absent from `overrides` (both `-light`/`-dark`), so reset
- * and scheme switches leave nothing stale. This is the one DOM writer; `useTokenControls` calls it in
- * a layout effect, and hosts (Storybook, consumers) can call it directly.
+ * Reconciles `documentElement`'s inline custom properties to `overrides`: sets present vars, removes
+ * every registry var absent from `overrides` (both `-light`/`-dark`), so reset and scheme switches
+ * leave nothing stale. This is the one DOM writer.
  */
 export declare function applyTokenOverrides(overrides: TokenOverrides, root?: HTMLElement): void;

package/dist/tokens/control-registry.d.ts

@@ -1,10 +1,7 @@
 import { TokenControl } from './token-registry';
 /**
- * The control registry — every {@link TokenControl}, i.e. every token that has a live adjuster. Each
- * entry spreads its token's data (including `label`/`description`) from `TOKEN_REGISTRY` and adds
- * only the control-specific metadata its UI needs.
- *
- * Not every token appears here: the semantic font aliases (`font-family-heading` / `-body` / `-ui`
- * / `-code`) are `var()` indirections with no direct control, so they have no entry.
+ * Every {@link TokenControl}: a token with a live adjuster, spreading its data from
+ * `TOKEN_REGISTRY`. Semantic font aliases (`font-family-heading`/`-body`/`-ui`/`-code`) are
+ * `var()` indirections with no direct control, so they have no entry here.
  */
 export declare const TOKEN_CONTROLS: readonly TokenControl[];

package/dist/tokens/types.d.ts

@@ -1,13 +1,5 @@
 import { ColorScheme } from '../types/theme';
-/**
- * A **token** is a CSS custom property under `--imf-ui-` carrying a design value; every token lives
- * in `TOKEN_REGISTRY`. A **TokenControl** is a live adjuster *bound to* a token, not a kind of token —
- * it carries the token's own fields plus the control's `id`. Not every token has a control.
- *
- * The shapes below are generic over the id type to avoid an import cycle with the registry that
- * defines the concrete `TokenId` union. Import `Token` / `TokenControl` from `./token-registry` (bound
- * to the concrete id), not from here directly.
- */
+/** Import `Token` / `TokenControl` from `./token-registry`, not from here directly. */
 /** A continuous or per-scheme numeric value (slider tokens) or a fixed string (select tokens). */
 export type TokenValue = number | string | Record<ColorScheme, number>;
 /** A numeric value that may be resolved per color scheme (min / max / default on slider controls). */
@@ -15,14 +7,9 @@ export type NumericTokenValue = number | Record<ColorScheme, number>;
 /** Grouping for panel layout. */
 export type TokenGroup = "brand" | "surface" | "primary" | "status" | "accent" | "shadow" | "shape" | "font";
 /**
- * The canonical token id vocabulary — **hand-authored** (not derived from the registry). This is the
- * source of truth for what a `--imf-ui-*` token may be called, so:
- * - the registry definition site gets autocomplete and rejects typos (`TOKEN_REGISTRY` is a
- *   `Record<TokenId, Token>`, so every key and every `id` is checked against it);
- * - every `id` / `derivedFrom` on a control is checked against it.
- *
- * Adding or renaming a token is a deliberate two-step edit: this union **and** `TOKEN_REGISTRY`. The
- * `token-registry.test.ts` "union ↔ registry agree" test fails loudly if the two drift.
+ * Hand-authored, not derived from the registry. This is the source of truth for valid `--imf-ui-*` token ids.
+ * Adding or renaming a token requires updating this union and `TOKEN_REGISTRY` together;
+ * `token-registry.test.ts` fails if the two drift.
  */
 export type TokenId = "color-brand-luma" | "color-brand-chroma" | "color-brand-hue" | "color-surface-bg-luma" | "color-surface-fg-luma" | "color-surface-chroma" | "color-surface-main-hue" | "color-surface-support-hue" | "color-surface-minor-hue" | "color-primary-bg-luma" | "color-primary-fg-luma" | "color-primary-chroma" | "color-primary-hue" | "color-status-bg-luma" | "color-status-fg-luma" | "color-status-chroma" | "color-status-positive-hue" | "color-status-negative-hue" | "color-status-warning-hue" | "color-status-info-hue" | "color-accent-1-bg-luma" | "color-accent-1-fg-luma" | "color-accent-1-chroma" | "color-accent-1-hue" | "color-accent-2-bg-luma" | "color-accent-2-fg-luma" | "color-accent-2-chroma" | "color-accent-2-hue" | "color-accent-3-bg-luma" | "color-accent-3-fg-luma" | "color-accent-3-chroma" | "color-accent-3-hue" | "shadow-angle" | "shadow-hardness" | "shadow-spread" | "shadow-intensity" | "corner-radius" | "font-family-sans" | "font-family-mono" | "font-family-heading" | "font-family-body" | "font-family-ui" | "font-family-code";
 /**
@@ -43,13 +30,9 @@ export interface Token {
     description: string;
 }
 /**
- * A live adjuster bound to a token — the token's own fields plus kind-specific control metadata.
- * Discriminated on `kind`:
- * - `slider` — a continuous numeric control (min/max/step); may derive from another token.
- * - `select` — a discrete choice from an enumerated option list (e.g. font stacks).
- *
- * The finer constraint — slider ↔ numeric token, select ↔ string token — is a runtime/test guard, not
- * encoded here (encoding it would add cryptic type machinery for little gain).
+ * A live adjuster bound to a token, carrying the token's own fields plus kind-specific control metadata.
+ * The finer constraint (slider ↔ numeric token, select ↔ string token) is enforced by a
+ * runtime/test guard, not encoded in the type; that would add cryptic generics for little gain.
  */
 export type TokenControl = Token & ({
     kind: "slider";

package/dist/tokens/use-token-controls.d.ts

@@ -14,18 +14,9 @@ export interface UseTokenControlsResult {
     reset: () => void;
 }
 /**
- * The persistence-agnostic token editor. It derives effective values, resolves each control for the
- * active `scheme`, mirrors the effective map onto `documentElement`, and exposes mutators that
- * commit through the injected `overrides`/`onChange` pair.
- *
- * `useTokenControls` owns *no* persistence — the host decides where `overrides` lives and how writes
- * are debounced, then passes the current map and a commit callback in on every render.
- *
- * **Contract — synchronous read-back:** each mutator builds its next map by spreading the current
- * `overrides`. If the host debounces persistence, it must still surface each committed map as
- * `overrides` *synchronously* (e.g. a `useState` working copy) so back-to-back `setControl` calls in
- * one tick don't clobber each other. A host that only reflects the committed map after an async
- * round trip will drop rapid successive edits.
+ * Owns no persistence — the host supplies `overrides`/`onChange`. Contract: each mutator spreads the
+ * current `overrides`, so the host must surface each committed map back synchronously (e.g. a
+ * `useState` working copy) or back-to-back calls in one tick will clobber each other.
  */
 export declare function useTokenControls({ overrides, onChange, scheme }: {
     /** Current overrides, keyed by full CSS custom property name. Must update synchronously on commit. */