@weasel-js/ui 1.5.2 → 1.6.0

package/dist/chunks/{TokenPanel-BPHq24dc.js → TokenPanel-5ajHEHha.js}

@@ -1,10 +1,10 @@
-import { n as e, t } from "./Tooltip-C4YBczLq.js";
-import { t as n } from "./Button-DRSApvnK.js";
-import { n as r } from "./Disclosure-CILDfWsU.js";
-import { t as i } from "./ToggleBar-CClus5Cd.js";
-import { t as a } from "./Select-BEope086.js";
-import { t as o } from "./Input-DbMKpkXy.js";
-import { n as s } from "./NumberField-CCjEDZCg.js";
+import { n as e, r as t } from "./Tooltip-9XiJF937.js";
+import { t as n } from "./Button-Dyp31jMt.js";
+import { r } from "./Disclosure-D79jhmh2.js";
+import { t as i } from "./Select-DVValBe1.js";
+import { t as a } from "./Input-Bx2cuUbS.js";
+import { n as o } from "./NumberField-C1Y7zP-a.js";
+import { t as s } from "./ToggleBar-Btnl5r7F.js";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 import { memo as d, useCallback as f, useMemo as p, useState as m } from "react";
 import { Focusable as h } from "react-aria-components";
@@ -257,10 +257,10 @@ function Z({ points: e, label: t }) {
 	});
 }
 function Q({ token: e, set: t }) {
-	let { name: n, type: r, value: i } = e, d = `${n} value`, f = p(() => r === "color" ? T(i) : null, [r, i]);
+	let { name: n, type: r, value: s } = e, d = `${n} value`, f = p(() => r === "color" ? T(s) : null, [r, s]);
 	if (r === "dimension" || r === "duration" || r === "number") {
-		let e = U(i);
-		if (e) return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(s, {
+		let e = U(s);
+		if (e) return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l(o, {
 			className: E.number,
 			"aria-label": d,
 			value: e.amount,
@@ -274,24 +274,24 @@ function Q({ token: e, set: t }) {
 			children: e.unit
 		}) : null] });
 	}
-	if (r === "fontWeight") return /* @__PURE__ */ l(a, {
+	if (r === "fontWeight") return /* @__PURE__ */ l(i, {
 		"aria-label": n,
 		width: "fit",
-		selectedKey: i,
-		options: (G.includes(i) ? G : [...G, i]).map((e) => ({
+		selectedKey: s,
+		options: (G.includes(s) ? G : [...G, s]).map((e) => ({
 			value: e,
 			label: e
 		})),
 		onSelectionChange: t
 	});
-	let m = r === "cubicBezier" ? W(i) : null;
+	let m = r === "cubicBezier" ? W(s) : null;
 	return /* @__PURE__ */ u(c, { children: [m ? /* @__PURE__ */ l(Z, {
 		points: m,
 		label: `${n} curve`
-	}) : null, /* @__PURE__ */ l(o, {
+	}) : null, /* @__PURE__ */ l(a, {
 		className: E.field,
 		"aria-label": d,
-		value: i,
+		value: s,
 		onChange: t,
 		leadingAdornment: r === "color" ? f ? /* @__PURE__ */ l("input", {
 			type: "color",
@@ -301,7 +301,7 @@ function Q({ token: e, set: t }) {
 			onChange: (e) => t(e.target.value)
 		}) : /* @__PURE__ */ l("span", {
 			className: E.chip,
-			style: { "--token-color": i },
+			style: { "--token-color": s },
 			"aria-hidden": "true"
 		}) : void 0
 	})] });
@@ -344,7 +344,7 @@ function ee({ group: n, tokens: r, onChange: i }) {
 			}),
 			/* @__PURE__ */ l("div", {
 				className: E.strip,
-				children: r.map((n) => /* @__PURE__ */ u(e, {
+				children: r.map((n) => /* @__PURE__ */ u(t, {
 					delay: 0,
 					children: [/* @__PURE__ */ l(h, { children: /* @__PURE__ */ l("button", {
 						type: "button",
@@ -354,7 +354,7 @@ function ee({ group: n, tokens: r, onChange: i }) {
 						"aria-pressed": n.name === a,
 						"data-overridden": n.overridden ? "" : void 0,
 						onClick: () => o((e) => e === n.name ? null : n.name)
-					}) }), /* @__PURE__ */ l(t, { children: n.name })]
+					}) }), /* @__PURE__ */ l(e, { children: n.name })]
 				}, n.name))
 			}),
 			s ? /* @__PURE__ */ l($, {
@@ -365,8 +365,8 @@ function ee({ group: n, tokens: r, onChange: i }) {
 	});
 }
 function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorChange: a }) {
-	let o = U(e.value);
-	return o ? /* @__PURE__ */ u("div", {
+	let s = U(e.value);
+	return s ? /* @__PURE__ */ u("div", {
 		className: E.step,
 		title: e.description || e.name,
 		"data-overridden": e.overridden ? "" : void 0,
@@ -377,18 +377,18 @@ function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorC
 			}),
 			/* @__PURE__ */ u("span", {
 				className: E.stepEdit,
-				children: [/* @__PURE__ */ l(s, {
+				children: [/* @__PURE__ */ l(o, {
 					className: E.number,
 					"aria-label": `${e.name} value`,
-					value: o.amount,
+					value: s.amount,
 					hideSteppers: !0,
 					formatOptions: K,
 					onChange: (t) => {
-						Number.isFinite(t) && i(e.name, `${t}${o.unit}`);
+						Number.isFinite(t) && i(e.name, `${t}${s.unit}`);
 					}
-				}), n && o.unit ? /* @__PURE__ */ l("span", {
+				}), n && s.unit ? /* @__PURE__ */ l("span", {
 					className: E.unit,
-					children: o.unit
+					children: s.unit
 				}) : null]
 			}),
 			r !== void 0 && a ? /* @__PURE__ */ u("span", {
@@ -396,7 +396,7 @@ function te({ token: e, label: t, showUnit: n, factor: r, onChange: i, onFactorC
 				children: [/* @__PURE__ */ l("span", {
 					className: E.unit,
 					children: "×"
-				}), /* @__PURE__ */ l(s, {
+				}), /* @__PURE__ */ l(o, {
 					className: E.number,
 					"aria-label": `${e.name} factor`,
 					value: r,
@@ -425,13 +425,13 @@ var ne = [
 		label: "step"
 	}
 ];
-function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: a }) {
-	let { rule: o } = t, c = o.kind === "ratio" ? {
+function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: i }) {
+	let { rule: a } = t, c = a.kind === "ratio" ? {
 		key: "ratio",
-		value: o.ratio
-	} : o.kind === "step" ? {
+		value: a.ratio
+	} : a.kind === "step" ? {
 		key: "step",
-		value: o.step
+		value: a.step
 	} : null;
 	return /* @__PURE__ */ u("div", {
 		className: E.rule,
@@ -443,14 +443,14 @@ function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: a }) {
 						className: E.ruleLabel,
 						children: "base"
 					}),
-					/* @__PURE__ */ l(s, {
+					/* @__PURE__ */ l(o, {
 						className: E.number,
 						"aria-label": `${e} base`,
 						value: t.base,
 						hideSteppers: !0,
 						formatOptions: K,
 						onChange: (e) => {
-							Number.isFinite(e) && a({
+							Number.isFinite(e) && i({
 								...t,
 								base: e
 							});
@@ -462,13 +462,13 @@ function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: a }) {
 					}) : null
 				]
 			}),
-			/* @__PURE__ */ l(i, {
+			/* @__PURE__ */ l(s, {
 				ariaLabel: `${e} rule`,
 				size: "sm",
 				items: ne,
-				value: o.kind,
+				value: a.kind,
 				onChange: (e) => {
-					e && e !== o.kind && a(O(t, e, r));
+					e && e !== a.kind && i(O(t, e, r));
 				}
 			}),
 			c ? /* @__PURE__ */ u("span", {
@@ -479,14 +479,14 @@ function re({ group: e, scale: t, unit: n, amounts: r, onScaleChange: a }) {
 				}) : /* @__PURE__ */ l("span", {
 					className: E.unit,
 					children: "+"
-				}), /* @__PURE__ */ l(s, {
+				}), /* @__PURE__ */ l(o, {
 					className: E.number,
 					"aria-label": `${e} ${c.key}`,
 					value: c.value,
 					hideSteppers: !0,
 					formatOptions: K,
 					onChange: (e) => {
-						Number.isFinite(e) && a({
+						Number.isFinite(e) && i({
 							...t,
 							rule: {
 								kind: c.key,
@@ -631,4 +631,4 @@ function oe({ tokens: e, onChange: t, collapsed: n, onCollapsedChange: r, scales
 //#endregion
 export { j as a, O as i, k as n, H as r, oe as t };
 
-//# sourceMappingURL=TokenPanel-BPHq24dc.js.map
+//# sourceMappingURL=TokenPanel-5ajHEHha.js.map

package/dist/chunks/{TokenPanel-BPHq24dc.js.map → TokenPanel-5ajHEHha.js.map}

@@ -1 +1 @@
-{"version":3,"file":"TokenPanel-BPHq24dc.js","names":[],"sources":["../../src/components/TokenPanel/color.ts","../../src/components/TokenPanel/TokenPanel.module.css","../../src/components/TokenPanel/tokenTypes.ts","../../src/components/TokenPanel/TokenPanel.tsx"],"sourcesContent":["const HEX = /^#(?:[\\da-f]{3,4}|[\\da-f]{6}|[\\da-f]{8})$/i;\nconst RGB = /^rgba?\\(\\s*(\\d{1,3})[\\s,]+(\\d{1,3})[\\s,]+(\\d{1,3})\\b/i;\nconst COLOR_FUNCTION = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\\(.+\\)$/i;\nconst KEYWORDS = new Set([\n  'transparent',\n  'currentcolor',\n  'black',\n  'white',\n  'gray',\n  'silver',\n  'red',\n  'orange',\n  'yellow',\n  'gold',\n  'lime',\n  'green',\n  'teal',\n  'cyan',\n  'blue',\n  'navy',\n  'purple',\n  'magenta',\n  'pink',\n  'brown',\n]);\n\ntype Supports = ((value: string) => boolean) | null;\n\nfunction browserSupports(): Supports {\n  return typeof CSS !== 'undefined' && typeof CSS.supports === 'function'\n    ? (value) => CSS.supports('color', value)\n    : null;\n}\n\n/** Whether `value` is a CSS color — the browser's answer where it has `CSS.supports`, a small parser's otherwise. */\nexport function parsesAsColor(value: string, supports: Supports = browserSupports()): boolean {\n  const v = value.trim();\n  // `CSS.supports` accepts any `var()` for any property.\n  if (!v || v.includes('var(')) return false;\n  if (supports) return supports(v);\n  return HEX.test(v) || COLOR_FUNCTION.test(v) || KEYWORDS.has(v.toLowerCase());\n}\n\nfunction hexOf(v: string): string | null {\n  if (HEX.test(v)) {\n    const digits = v.slice(1).toLowerCase();\n    return `#${digits.length <= 4 ? [...digits.slice(0, 3)].map((d) => d + d).join('') : digits.slice(0, 6)}`;\n  }\n  const rgb = RGB.exec(v);\n  return rgb\n    ? `#${rgb\n        .slice(1, 4)\n        .map((n) => Math.min(255, Number(n)).toString(16).padStart(2, '0'))\n        .join('')}`\n    : null;\n}\n\nlet paint: CanvasRenderingContext2D | null | undefined;\n\n/** The browser's serialization of a color, through a canvas fill style; null where it has none or rejects `value`. */\nfunction serialized(value: string): string | null {\n  if (paint === undefined) {\n    try {\n      paint = document.createElement('canvas').getContext('2d');\n    } catch {\n      paint = null;\n    }\n  }\n  if (!paint) return null;\n  // A rejected value leaves the previous fill style, so two different ones tell a rejection apart.\n  paint.fillStyle = '#000000';\n  paint.fillStyle = value;\n  const onBlack = String(paint.fillStyle);\n  paint.fillStyle = '#ffffff';\n  paint.fillStyle = value;\n  return onBlack === String(paint.fillStyle) ? onBlack : null;\n}\n\n/** `value` as the `#rrggbb` a color input takes, alpha dropped; null when it cannot be converted. */\nexport function toHex(value: string): string | null {\n  const v = value.trim();\n  const direct = hexOf(v);\n  if (direct) return direct;\n  const browser = typeof document === 'undefined' ? null : serialized(v);\n  return browser && browser !== v ? hexOf(browser) : null;\n}\n",".panel {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.section + .section {\n  border-top: var(--wzl-border-w) solid var(--wzl-line-subtle);\n}\n\n.sectionHead {\n  padding-block: var(--wzl-space-xs);\n  color: var(--wzl-fg-muted);\n  font-family: var(--wzl-font-display);\n  font-size: var(--wzl-font-size-sm);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-sm);\n  padding-block-end: var(--wzl-space-sm);\n}\n\n.row,\n.family {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  min-width: 0;\n}\n\n.name {\n  overflow: hidden;\n  color: var(--wzl-fg-muted);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.edit {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-xs);\n  min-width: 0;\n}\n\n.field {\n  --wzl-font-ui: var(--wzl-font-mono);\n  flex: 1;\n  min-width: 0;\n}\n\n.number {\n  --wzl-font-ui: var(--wzl-font-mono);\n  flex: 1;\n  min-width: 0;\n}\n\n.unit {\n  color: var(--wzl-fg-muted);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* Padding inflates a native color input past its box in Chrome. */\n.swatchInput {\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 14px;\n  padding: 0;\n  background: transparent;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n}\n\n.chip {\n  flex-shrink: 0;\n  width: 18px;\n  height: 14px;\n  background: var(--token-color);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: inset 0 0 0 1px var(--wzl-line);\n}\n\n.curve {\n  flex-shrink: 0;\n  width: 24px;\n  /* Square easing-curve artwork: not-a-control */\n  height: 24px;\n  color: var(--wzl-fg);\n}\n\n.strip {\n  display: flex;\n  height: var(--wzl-control-h);\n  overflow: hidden;\n  border: var(--wzl-border-w) solid var(--wzl-line);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.swatch {\n  flex: 1 1 0;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  background: var(--token-color);\n  border: 0;\n  border-radius: 0;\n  cursor: pointer;\n}\n\n.swatch[data-overridden] {\n  box-shadow: inset 0 -3px 0 var(--wzl-accent);\n}\n\n.swatch[aria-pressed='true'],\n.swatch:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* A group of sizes: its name over a grid of steps, each labeled by what its name adds. */\n.scale {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  min-width: 0;\n}\n\n.scaleHead {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-xs);\n  min-width: 0;\n}\n\n.steps {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));\n  gap: var(--wzl-space-1) var(--wzl-space-xs);\n}\n\n.rule {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--wzl-space-xs) var(--wzl-space-sm);\n  min-width: 0;\n}\n\n.ruleLabel {\n  color: var(--wzl-fg-subtle);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-2xs);\n}\n\n.rule .number {\n  flex: 0 1 5ch;\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n\n.step {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.stepLabel {\n  overflow: hidden;\n  text-align: end;\n  color: var(--wzl-fg-subtle);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-2xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.step[data-overridden] .stepLabel {\n  color: var(--wzl-accent-fg);\n}\n\n.stepEdit {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-1);\n  min-width: 0;\n}\n\n.step > .stepEdit + .stepEdit {\n  margin-block-start: var(--wzl-space-1);\n}\n\n.stepEdit .number {\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n\n/* Tight: a token to a line, with the names on a fixed rail so the values read\n   down the panel as a column. A stacked row spends its height on the name and\n   lets the field take the whole width, which a set of ninety cannot afford. */\n.tight .sectionBody {\n  gap: var(--wzl-space-1);\n  padding-block-end: var(--wzl-space-xs);\n}\n\n.tight .row {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--wzl-space-xs);\n}\n\n.tight .row > .name {\n  flex: 0 0 11rem;\n}\n\n.tight .edit {\n  flex: 1 1 auto;\n}\n\n.tight .field,\n.tight .number {\n  flex: 0 1 16rem;\n  font-variant-numeric: tabular-nums;\n}\n\n.tight .unit {\n  font-variant-numeric: tabular-nums;\n}\n\n.tight .scale {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr);\n  align-items: start;\n  column-gap: var(--wzl-space-xs);\n}\n\n/* Grid rather than a row, so a picked swatch's editor still spans the full width. */\n.tight .family {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr);\n  align-items: center;\n  column-gap: var(--wzl-space-xs);\n  row-gap: var(--wzl-space-1);\n}\n\n.tight .family > .row {\n  grid-column: 1 / -1;\n}\n\n.tight .strip {\n  height: 16px;\n}\n\n.tight .curve {\n  width: 16px;\n  height: 16px;\n}\n","import { parsesAsColor } from './color';\n\n/** A design token as `TokenPanel` edits it. */\nexport interface TokenEntry {\n  /** The custom property, e.g. `--wzl-gray-50`. */\n  name: string;\n  /** A DTCG type name. A type the panel has no control for edits as text. */\n  type: string;\n  /** Tokens sharing a group sit together; a color group large enough draws as one row of swatches. */\n  group: string;\n  value: string;\n  /** Whether `value` overrides the token's own, which offers Reset. */\n  overridden?: boolean;\n  description?: string;\n}\n\n/** How a scale's steps follow from its base: one multiplier per step, a constant ratio, or a constant step. */\nexport type TokenScaleRule =\n  | { kind: 'factors'; factors: readonly number[] }\n  | { kind: 'ratio'; ratio: number }\n  | { kind: 'step'; step: number };\n\n/** A group whose steps are generated from a base, so the panel edits the base and the rule rather than each step. */\nexport interface TokenScale {\n  /** The generated tokens, smallest first. Anything else in the group draws as an ordinary step. */\n  tokens: readonly string[];\n  base: number;\n  rule: TokenScaleRule;\n}\n\nconst round2 = (n: number) => Math.round(n * 100) / 100;\n\n/**\n * The same scale under another rule, fitted to the amounts its steps have now.\n * A ratio or step counts from the first step, so switching to one moves the\n * base there.\n */\nexport function refitScale(scale: TokenScale, kind: TokenScaleRule['kind'], amounts: readonly number[]): TokenScale {\n  const first = amounts[0] ?? scale.base;\n  const last = amounts.at(-1) ?? first;\n  const spans = Math.max(1, amounts.length - 1);\n  switch (kind) {\n    case 'factors':\n      return { ...scale, rule: { kind, factors: amounts.map((a) => (scale.base ? round2(a / scale.base) : 1)) } };\n    case 'ratio':\n      return { ...scale, base: first, rule: { kind, ratio: first > 0 ? round2((last / first) ** (1 / spans)) : 1 } };\n    case 'step':\n      return { ...scale, base: first, rule: { kind, step: round2((last - first) / spans) } };\n  }\n}\n\nexport type TokenCategory = 'color' | 'type' | 'size' | 'motion' | 'depth' | 'other';\n\n/** The panel's sections, in the order it draws them. */\nexport const TOKEN_CATEGORIES: readonly { id: TokenCategory; title: string }[] = [\n  { id: 'color', title: 'Color' },\n  { id: 'type', title: 'Type' },\n  { id: 'size', title: 'Size' },\n  { id: 'motion', title: 'Motion' },\n  { id: 'depth', title: 'Depth' },\n  { id: 'other', title: 'Other' },\n];\n\nconst TYPE_SCALE = /^(?:font|tracking|leading|letter|line-height)/;\n\n/** The section a token is filed under: by its type, and for a bare dimension or number by its group. */\nexport function tokenCategory(token: TokenEntry): TokenCategory {\n  switch (token.type) {\n    case 'color':\n      return 'color';\n    case 'fontFamily':\n    case 'fontWeight':\n      return 'type';\n    case 'duration':\n    case 'cubicBezier':\n      return 'motion';\n    case 'shadow':\n    case 'gradient':\n      return 'depth';\n    case 'dimension':\n    case 'number':\n      if (TYPE_SCALE.test(token.group)) return 'type';\n      if (token.type === 'number' && (token.group === 'z' || token.group === 'z-index')) return 'depth';\n      return 'size';\n    default:\n      return 'other';\n  }\n}\n\nconst AMOUNT = String.raw`-?(?:\\d+\\.?\\d*|\\.\\d+)`;\nconst DIMENSION = new RegExp(\n  `^${AMOUNT}(?:px|rem|em|%|ch|ex|lh|rlh|vh|vw|vmin|vmax|svh|lvh|dvh|cqw|cqh|pt|pc|cm|mm|in|q)$`,\n  'i',\n);\nconst DURATION = new RegExp(`^${AMOUNT}m?s$`);\nconst NUMBER = new RegExp(`^${AMOUNT}$`);\nconst LENGTH = new RegExp(`^${AMOUNT}(?:px|rem|em)?$`);\nconst BEZIER = new RegExp(`^cubic-bezier\\\\(\\\\s*(${AMOUNT})\\\\s*,\\\\s*(${AMOUNT})\\\\s*,\\\\s*(${AMOUNT})\\\\s*,\\\\s*(${AMOUNT})\\\\s*\\\\)$`, 'i');\nconst GRADIENT = /^(?:repeating-)?(?:linear|radial|conic)-gradient\\(/i;\n/** Commas outside parentheses: a shadow's layers, not a color function's arguments. */\nconst LAYERS = /,(?![^(]*\\))/;\nconst PARTS = /[a-z-]+\\([^)]*\\)|\\S+/gi;\n\nfunction isShadow(value: string): boolean {\n  return value.split(LAYERS).every((layer) => {\n    const parts = layer.trim().replace(/^inset\\s+/i, '').match(PARTS) ?? [];\n    const lengths = parts.filter((part) => LENGTH.test(part));\n    const rest = parts.filter((part) => !LENGTH.test(part));\n    return lengths.length >= 2 && lengths.length <= 4 && rest.length <= 1 && rest.every((part) => parsesAsColor(part));\n  });\n}\n\n/** A DTCG type read off the shape of a value, for a token that arrives without one. `'string'` when nothing fits. */\nexport function inferTokenType(value: string): string {\n  const v = value.trim();\n  if (!v) return 'string';\n  if (DURATION.test(v)) return 'duration';\n  if (DIMENSION.test(v)) return 'dimension';\n  if (NUMBER.test(v)) return 'number';\n  if (BEZIER.test(v)) return 'cubicBezier';\n  if (GRADIENT.test(v)) return 'gradient';\n  if (parsesAsColor(v)) return 'color';\n  if (isShadow(v)) return 'shadow';\n  return 'string';\n}\n\n/** A number and its unit, or null for a value that is not one. */\nexport function splitUnit(value: string): { amount: number; unit: string } | null {\n  const match = new RegExp(`^(${AMOUNT})([a-z%]*)$`, 'i').exec(value.trim());\n  return match ? { amount: Number(match[1]), unit: match[2] ?? '' } : null;\n}\n\n/** The four control points of a `cubic-bezier()`, or null for any other easing. */\nexport function bezierPoints(value: string): readonly [number, number, number, number] | null {\n  const match = BEZIER.exec(value.trim());\n  if (!match) return null;\n  const [x1, y1, x2, y2] = match.slice(1, 5).map(Number) as [number, number, number, number];\n  return [x1, y1, x2, y2];\n}\n","import { type CSSProperties, memo, useCallback, useMemo, useState } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { DisclosureRow } from '../Disclosure';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { Select } from '../Select';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { toHex } from './color';\nimport s from './TokenPanel.module.css';\nimport {\n  bezierPoints,\n  refitScale,\n  splitUnit,\n  TOKEN_CATEGORIES,\n  type TokenCategory,\n  type TokenEntry,\n  type TokenScale,\n  type TokenScaleRule,\n  tokenCategory,\n} from './tokenTypes';\n\ntype OnChange = (name: string, value: string | null) => void;\n\n/** Props for `<TokenPanel>`. */\nexport interface TokenPanelProps {\n  tokens: readonly TokenEntry[];\n  /** A token's new value, or null to drop its override. Keep it stable: rows re-render only when it or their token changes. */\n  onChange: OnChange;\n  /** Sections held closed, by category. Omit to let the panel keep that state itself. */\n  collapsed?: Readonly<Partial<Record<TokenCategory, boolean>>>;\n  onCollapsedChange?: (category: TokenCategory, collapsed: boolean) => void;\n  /** Groups generated from a base, by group name. Such a group edits its base and rule above its steps. */\n  scales?: Readonly<Record<string, TokenScale>>;\n  /** A scale's new base or rule. The panel does not regenerate the steps; the consumer does, through `onChange`. */\n  onScaleChange?: (group: string, scale: TokenScale) => void;\n  /** Files a token under a section. Defaults to `tokenCategory`. */\n  categorize?: (token: TokenEntry) => TokenCategory;\n  /** The fewest colors, or sizes, sharing a group that draw as one row of swatches or one grid of steps. Default 3. */\n  familySize?: number;\n  /**\n   * Row layout. `tight` puts a token on one line — name, control, Reset — with the\n   * names on a fixed rail so the values read down the panel as a column, and caps\n   * the field rather than letting it span the panel. Default `normal` stacks the\n   * control under its name.\n   */\n  density?: 'tight' | 'normal';\n  className?: string;\n}\n\nconst WEIGHTS = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];\nconst NUMBER_FORMAT = { maximumFractionDigits: 4, useGrouping: false } as const;\n\ntype FamilyKind = 'family' | 'scale';\ntype Item = { kind: 'row'; token: TokenEntry } | { kind: FamilyKind; group: string; tokens: TokenEntry[] };\n\nconst SCALAR = new Set(['dimension', 'duration', 'number']);\n\nfunction familyKindOf(token: TokenEntry): FamilyKind | null {\n  if (token.type === 'color') return 'family';\n  return SCALAR.has(token.type) && splitUnit(token.value) ? 'scale' : null;\n}\n\nfunction itemsOf(tokens: readonly TokenEntry[], familySize: number): Item[] {\n  const counts = new Map<string, number>();\n  for (const token of tokens) {\n    const kind = familyKindOf(token);\n    if (kind) counts.set(`${kind}:${token.group}`, (counts.get(`${kind}:${token.group}`) ?? 0) + 1);\n  }\n  const families = new Map<string, Extract<Item, { kind: FamilyKind }>>();\n  const items: Item[] = [];\n  for (const token of tokens) {\n    const kind = familyKindOf(token);\n    const key = `${kind}:${token.group}`;\n    if (!kind || (counts.get(key) ?? 0) < familySize) {\n      items.push({ kind: 'row', token });\n      continue;\n    }\n    let family = families.get(key);\n    if (!family) {\n      family = { kind, group: token.group, tokens: [] };\n      families.set(key, family);\n      items.push(family);\n    }\n    family.tokens.push(token);\n  }\n  return items;\n}\n\n/** Each name's segments past those every name in the set shares; a name that is all shared keeps its last. */\nfunction stepLabels(names: readonly string[]): string[] {\n  const split = names.map((name) => name.replace(/^--/, '').split('-'));\n  let shared = 0;\n  while (split.every((segments) => segments.length > shared && segments[shared] === split[0]?.[shared])) shared++;\n  return split.map((segments) => segments.slice(shared).join('-') || (segments.at(-1) ?? ''));\n}\n\nfunction Curve({ points, label }: { points: readonly [number, number, number, number]; label: string }) {\n  const [x1, y1, x2, y2] = points;\n  // y is flipped so the curve rises, and the box grows to hold an overshoot.\n  const top = Math.min(0, 1 - y1, 1 - y2);\n  const bottom = Math.max(1, 1 - y1, 1 - y2);\n  return (\n    <svg className={s.curve} viewBox={`-0.1 ${top - 0.1} 1.2 ${bottom - top + 0.2}`} role=\"img\" aria-label={label}>\n      <path d={`M0 1 C${x1} ${1 - y1} ${x2} ${1 - y2} 1 0`} fill=\"none\" stroke=\"currentColor\" strokeWidth={0.08} />\n    </svg>\n  );\n}\n\nfunction TokenControl({ token, set }: { token: TokenEntry; set: (value: string) => void }) {\n  const { name, type, value } = token;\n  const label = `${name} value`;\n  const hex = useMemo(() => (type === 'color' ? toHex(value) : null), [type, value]);\n\n  if (type === 'dimension' || type === 'duration' || type === 'number') {\n    const split = splitUnit(value);\n    if (split) {\n      return (\n        <>\n          <NumberField\n            className={s.number}\n            aria-label={label}\n            value={split.amount}\n            hideSteppers\n            formatOptions={NUMBER_FORMAT}\n            onChange={(amount) => {\n              if (Number.isFinite(amount)) set(`${amount}${split.unit}`);\n            }}\n          />\n          {split.unit ? <span className={s.unit}>{split.unit}</span> : null}\n        </>\n      );\n    }\n  }\n\n  if (type === 'fontWeight') {\n    const options = (WEIGHTS.includes(value) ? WEIGHTS : [...WEIGHTS, value]).map((weight) => ({\n      value: weight,\n      label: weight,\n    }));\n    return <Select aria-label={name} width=\"fit\" selectedKey={value} options={options} onSelectionChange={set} />;\n  }\n\n  const points = type === 'cubicBezier' ? bezierPoints(value) : null;\n  return (\n    <>\n      {points ? <Curve points={points} label={`${name} curve`} /> : null}\n      <Input\n        className={s.field}\n        aria-label={label}\n        value={value}\n        onChange={set}\n        leadingAdornment={\n          type !== 'color' ? undefined : hex ? (\n            <input\n              type=\"color\"\n              className={s.swatchInput}\n              aria-label={`${name} color`}\n              value={hex}\n              onChange={(event) => set(event.target.value)}\n            />\n          ) : (\n            <span className={s.chip} style={{ '--token-color': value } as CSSProperties} aria-hidden=\"true\" />\n          )\n        }\n      />\n    </>\n  );\n}\n\nconst TokenRow = memo(\n  function TokenRow({ token, onChange }: { token: TokenEntry; onChange: OnChange }) {\n    const set = useCallback((value: string) => onChange(token.name, value), [onChange, token.name]);\n    return (\n      <div className={s.row} role=\"group\" aria-label={token.name}>\n        <span className={s.name} title={token.description || token.name}>\n          {token.name}\n        </span>\n        <div className={s.edit}>\n          <TokenControl token={token} set={set} />\n          {token.overridden ? (\n            <Button variant=\"ghost\" size=\"sm\" ariaLabel={`Reset ${token.name}`} onClick={() => onChange(token.name, null)}>\n              Reset\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n  // Consumers rebuild their entries each render; a row only has to redraw when what it shows changed.\n  (a, b) =>\n    a.onChange === b.onChange &&\n    a.token.name === b.token.name &&\n    a.token.type === b.token.type &&\n    a.token.value === b.token.value &&\n    a.token.overridden === b.token.overridden &&\n    a.token.description === b.token.description,\n);\n\nfunction Family({ group, tokens, onChange }: { group: string; tokens: readonly TokenEntry[]; onChange: OnChange }) {\n  const [picked, setPicked] = useState<string | null>(null);\n  const token = tokens.find((t) => t.name === picked) ?? null;\n  return (\n    <div className={s.family} role=\"group\" aria-label={group}>\n      <span className={s.name}>{group}</span>\n      <div className={s.strip}>\n        {tokens.map((t) => (\n          <TooltipTrigger key={t.name} delay={0}>\n            <Focusable>\n              <button\n                type=\"button\"\n                className={s.swatch}\n                style={{ '--token-color': t.value } as CSSProperties}\n                aria-label={t.name}\n                aria-pressed={t.name === picked}\n                data-overridden={t.overridden ? '' : undefined}\n                onClick={() => setPicked((current) => (current === t.name ? null : t.name))}\n              />\n            </Focusable>\n            <Tooltip>{t.name}</Tooltip>\n          </TooltipTrigger>\n        ))}\n      </div>\n      {token ? <TokenRow token={token} onChange={onChange} /> : null}\n    </div>\n  );\n}\n\nfunction ScaleStep({\n  token,\n  label,\n  showUnit,\n  factor,\n  onChange,\n  onFactorChange,\n}: {\n  token: TokenEntry;\n  label: string;\n  showUnit: boolean;\n  factor?: number;\n  onChange: OnChange;\n  onFactorChange?: (factor: number) => void;\n}) {\n  const split = splitUnit(token.value);\n  if (!split) return null;\n  return (\n    <div className={s.step} title={token.description || token.name} data-overridden={token.overridden ? '' : undefined}>\n      <span className={s.stepLabel}>{label}</span>\n      <span className={s.stepEdit}>\n        <NumberField\n          className={s.number}\n          aria-label={`${token.name} value`}\n          value={split.amount}\n          hideSteppers\n          formatOptions={NUMBER_FORMAT}\n          onChange={(amount) => {\n            if (Number.isFinite(amount)) onChange(token.name, `${amount}${split.unit}`);\n          }}\n        />\n        {showUnit && split.unit ? <span className={s.unit}>{split.unit}</span> : null}\n      </span>\n      {factor !== undefined && onFactorChange ? (\n        <span className={s.stepEdit}>\n          <span className={s.unit}>×</span>\n          <NumberField\n            className={s.number}\n            aria-label={`${token.name} factor`}\n            value={factor}\n            hideSteppers\n            formatOptions={NUMBER_FORMAT}\n            onChange={(next) => {\n              if (Number.isFinite(next)) onFactorChange(next);\n            }}\n          />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nconst RULES: readonly ToggleBarItem<TokenScaleRule['kind']>[] = [\n  { value: 'factors', label: 'each', ariaLabel: 'factors' },\n  { value: 'ratio', label: 'ratio' },\n  { value: 'step', label: 'step' },\n];\n\nfunction ScaleRuleControls({\n  group,\n  scale,\n  unit,\n  amounts,\n  onScaleChange,\n}: {\n  group: string;\n  scale: TokenScale;\n  unit: string;\n  amounts: readonly number[];\n  onScaleChange: (scale: TokenScale) => void;\n}) {\n  const { rule } = scale;\n  const param =\n    rule.kind === 'ratio'\n      ? { key: 'ratio' as const, value: rule.ratio }\n      : rule.kind === 'step'\n        ? { key: 'step' as const, value: rule.step }\n        : null;\n  return (\n    <div className={s.rule}>\n      <span className={s.stepEdit}>\n        <span className={s.ruleLabel}>base</span>\n        <NumberField\n          className={s.number}\n          aria-label={`${group} base`}\n          value={scale.base}\n          hideSteppers\n          formatOptions={NUMBER_FORMAT}\n          onChange={(base) => {\n            if (Number.isFinite(base)) onScaleChange({ ...scale, base });\n          }}\n        />\n        {unit ? <span className={s.unit}>{unit}</span> : null}\n      </span>\n      <ToggleBar\n        ariaLabel={`${group} rule`}\n        size=\"sm\"\n        items={RULES}\n        value={rule.kind}\n        onChange={(kind) => {\n          if (kind && kind !== rule.kind) onScaleChange(refitScale(scale, kind, amounts));\n        }}\n      />\n      {param ? (\n        <span className={s.stepEdit}>\n          {param.key === 'ratio' ? <span className={s.unit}>×</span> : <span className={s.unit}>+</span>}\n          <NumberField\n            className={s.number}\n            aria-label={`${group} ${param.key}`}\n            value={param.value}\n            hideSteppers\n            formatOptions={NUMBER_FORMAT}\n            onChange={(value) => {\n              if (Number.isFinite(value)) onScaleChange({ ...scale, rule: { kind: param.key, [param.key]: value } as TokenScaleRule });\n            }}\n          />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction Scale({\n  group,\n  tokens,\n  generator,\n  onChange,\n  onScaleChange,\n}: {\n  group: string;\n  tokens: readonly TokenEntry[];\n  generator?: TokenScale;\n  onChange: OnChange;\n  onScaleChange?: (group: string, scale: TokenScale) => void;\n}) {\n  const labels = useMemo(() => stepLabels(tokens.map((t) => t.name)), [tokens]);\n  const units = new Set(tokens.map((t) => splitUnit(t.value)?.unit ?? ''));\n  const unit = units.size === 1 ? [...units][0] : null;\n  const overridden = tokens.filter((t) => t.overridden);\n  return (\n    <div className={s.scale} role=\"group\" aria-label={group}>\n      <span className={s.scaleHead}>\n        <span className={s.name}>{group}</span>\n        {unit ? <span className={s.unit}>{unit}</span> : null}\n        {overridden.length > 0 ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            ariaLabel={`Reset ${group}`}\n            onClick={() => {\n              for (const t of overridden) onChange(t.name, null);\n            }}\n          >\n            Reset\n          </Button>\n        ) : null}\n      </span>\n      {generator && onScaleChange ? (\n        <ScaleRuleControls\n          group={group}\n          scale={generator}\n          unit={unit ?? ''}\n          amounts={generator.tokens.map(\n            (name) => splitUnit(tokens.find((t) => t.name === name)?.value ?? '')?.amount ?? generator.base,\n          )}\n          onScaleChange={(next) => onScaleChange(group, next)}\n        />\n      ) : null}\n      <div className={s.steps}>\n        {tokens.map((t, i) => {\n          const rule = generator?.rule;\n          const at = generator ? generator.tokens.indexOf(t.name) : -1;\n          const factor = rule?.kind === 'factors' && at >= 0 ? rule.factors[at] : undefined;\n          return (\n            <ScaleStep\n              key={t.name}\n              token={t}\n              label={labels[i] ?? t.name}\n              showUnit={unit === null}\n              factor={factor}\n              onChange={onChange}\n              onFactorChange={\n                generator && onScaleChange && rule?.kind === 'factors'\n                  ? (next) =>\n                      onScaleChange(group, {\n                        ...generator,\n                        rule: { kind: 'factors', factors: rule.factors.map((f, j) => (j === at ? next : f)) },\n                      })\n                  : undefined\n              }\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction Section({\n  title,\n  open,\n  onToggle,\n  tokens,\n  familySize,\n  scales,\n  onChange,\n  onScaleChange,\n}: {\n  title: string;\n  open: boolean;\n  onToggle: () => void;\n  tokens: readonly TokenEntry[];\n  familySize: number;\n  scales?: Readonly<Record<string, TokenScale>>;\n  onChange: OnChange;\n  onScaleChange?: (group: string, scale: TokenScale) => void;\n}) {\n  const items = useMemo(() => itemsOf(tokens, familySize), [tokens, familySize]);\n  return (\n    <section className={s.section} aria-label={title}>\n      <DisclosureRow className={s.sectionHead} open={open} onToggle={onToggle} label={title}>\n        <span aria-hidden=\"true\">{title}</span>\n      </DisclosureRow>\n      {open ? (\n        <div className={s.sectionBody}>\n          {items.map((item) =>\n            item.kind === 'row' ? (\n              <TokenRow key={item.token.name} token={item.token} onChange={onChange} />\n            ) : item.kind === 'scale' ? (\n              <Scale\n                key={`scale:${item.group}`}\n                group={item.group}\n                tokens={item.tokens}\n                generator={scales?.[item.group]}\n                onChange={onChange}\n                onScaleChange={onScaleChange}\n              />\n            ) : (\n              <Family key={`family:${item.group}`} group={item.group} tokens={item.tokens} onChange={onChange} />\n            ),\n          )}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\n/**\n * Edits a set of design tokens by type: collapsible sections by category, a\n * color group drawn as one row of swatches sized to fit, a group of sizes drawn\n * as one grid of numbers labeled by step — with its base and rule above it when\n * `scales` says how it is generated — and a control for each\n * type — a number with its unit for dimensions and durations, the nine weights\n * for a font weight, a curve beside a `cubic-bezier()`, a swatch beside a color,\n * and text for everything else.\n */\nexport function TokenPanel({\n  tokens,\n  onChange,\n  collapsed,\n  onCollapsedChange,\n  scales,\n  onScaleChange,\n  categorize = tokenCategory,\n  familySize = 3,\n  density = 'normal',\n  className,\n}: TokenPanelProps) {\n  const [ownCollapsed, setOwnCollapsed] = useState<Partial<Record<TokenCategory, boolean>>>({});\n  const closed = collapsed ?? ownCollapsed;\n  const byCategory = useMemo(() => {\n    const sections = new Map<TokenCategory, TokenEntry[]>();\n    for (const token of tokens) {\n      const category = categorize(token);\n      sections.set(category, [...(sections.get(category) ?? []), token]);\n    }\n    return sections;\n  }, [tokens, categorize]);\n\n  return (\n    <div className={[s.panel, density === 'tight' && s.tight, className].filter(Boolean).join(' ')}>\n      {TOKEN_CATEGORIES.map(({ id, title }) => {\n        const inSection = byCategory.get(id);\n        if (!inSection) return null;\n        const open = !closed[id];\n        return (\n          <Section\n            key={id}\n            title={title}\n            open={open}\n            onToggle={() => {\n              if (collapsed === undefined) setOwnCollapsed((prev) => ({ ...prev, [id]: open }));\n              onCollapsedChange?.(id, open);\n            }}\n            tokens={inSection}\n            familySize={familySize}\n            scales={scales}\n            onChange={onChange}\n            onScaleChange={onScaleChange}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TokenPanel-5ajHEHha.js","names":[],"sources":["../../src/components/TokenPanel/color.ts","../../src/components/TokenPanel/TokenPanel.module.css","../../src/components/TokenPanel/tokenTypes.ts","../../src/components/TokenPanel/TokenPanel.tsx"],"sourcesContent":["const HEX = /^#(?:[\\da-f]{3,4}|[\\da-f]{6}|[\\da-f]{8})$/i;\nconst RGB = /^rgba?\\(\\s*(\\d{1,3})[\\s,]+(\\d{1,3})[\\s,]+(\\d{1,3})\\b/i;\nconst COLOR_FUNCTION = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\\(.+\\)$/i;\nconst KEYWORDS = new Set([\n  'transparent',\n  'currentcolor',\n  'black',\n  'white',\n  'gray',\n  'silver',\n  'red',\n  'orange',\n  'yellow',\n  'gold',\n  'lime',\n  'green',\n  'teal',\n  'cyan',\n  'blue',\n  'navy',\n  'purple',\n  'magenta',\n  'pink',\n  'brown',\n]);\n\ntype Supports = ((value: string) => boolean) | null;\n\nfunction browserSupports(): Supports {\n  return typeof CSS !== 'undefined' && typeof CSS.supports === 'function'\n    ? (value) => CSS.supports('color', value)\n    : null;\n}\n\n/** Whether `value` is a CSS color — the browser's answer where it has `CSS.supports`, a small parser's otherwise. */\nexport function parsesAsColor(value: string, supports: Supports = browserSupports()): boolean {\n  const v = value.trim();\n  // `CSS.supports` accepts any `var()` for any property.\n  if (!v || v.includes('var(')) return false;\n  if (supports) return supports(v);\n  return HEX.test(v) || COLOR_FUNCTION.test(v) || KEYWORDS.has(v.toLowerCase());\n}\n\nfunction hexOf(v: string): string | null {\n  if (HEX.test(v)) {\n    const digits = v.slice(1).toLowerCase();\n    return `#${digits.length <= 4 ? [...digits.slice(0, 3)].map((d) => d + d).join('') : digits.slice(0, 6)}`;\n  }\n  const rgb = RGB.exec(v);\n  return rgb\n    ? `#${rgb\n        .slice(1, 4)\n        .map((n) => Math.min(255, Number(n)).toString(16).padStart(2, '0'))\n        .join('')}`\n    : null;\n}\n\nlet paint: CanvasRenderingContext2D | null | undefined;\n\n/** The browser's serialization of a color, through a canvas fill style; null where it has none or rejects `value`. */\nfunction serialized(value: string): string | null {\n  if (paint === undefined) {\n    try {\n      paint = document.createElement('canvas').getContext('2d');\n    } catch {\n      paint = null;\n    }\n  }\n  if (!paint) return null;\n  // A rejected value leaves the previous fill style, so two different ones tell a rejection apart.\n  paint.fillStyle = '#000000';\n  paint.fillStyle = value;\n  const onBlack = String(paint.fillStyle);\n  paint.fillStyle = '#ffffff';\n  paint.fillStyle = value;\n  return onBlack === String(paint.fillStyle) ? onBlack : null;\n}\n\n/** `value` as the `#rrggbb` a color input takes, alpha dropped; null when it cannot be converted. */\nexport function toHex(value: string): string | null {\n  const v = value.trim();\n  const direct = hexOf(v);\n  if (direct) return direct;\n  const browser = typeof document === 'undefined' ? null : serialized(v);\n  return browser && browser !== v ? hexOf(browser) : null;\n}\n",".panel {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.section {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.section + .section {\n  border-top: var(--wzl-border-w) solid var(--wzl-line-subtle);\n}\n\n.sectionHead {\n  padding-block: var(--wzl-space-xs);\n  color: var(--wzl-fg-muted);\n  font-family: var(--wzl-font-display);\n  font-size: var(--wzl-font-size-sm);\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.sectionBody {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-sm);\n  padding-block-end: var(--wzl-space-sm);\n}\n\n.row,\n.family {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  min-width: 0;\n}\n\n.name {\n  overflow: hidden;\n  color: var(--wzl-fg-muted);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.edit {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-xs);\n  min-width: 0;\n}\n\n.field {\n  --wzl-font-ui: var(--wzl-font-mono);\n  flex: 1;\n  min-width: 0;\n}\n\n.number {\n  --wzl-font-ui: var(--wzl-font-mono);\n  flex: 1;\n  min-width: 0;\n}\n\n.unit {\n  color: var(--wzl-fg-muted);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* Padding inflates a native color input past its box in Chrome. */\n.swatchInput {\n  box-sizing: border-box;\n  flex-shrink: 0;\n  width: 18px;\n  height: 14px;\n  padding: 0;\n  background: transparent;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n}\n\n.chip {\n  flex-shrink: 0;\n  width: 18px;\n  height: 14px;\n  background: var(--token-color);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: inset 0 0 0 1px var(--wzl-line);\n}\n\n.curve {\n  flex-shrink: 0;\n  width: 24px;\n  /* Square easing-curve artwork: not-a-control */\n  height: 24px;\n  color: var(--wzl-fg);\n}\n\n.strip {\n  display: flex;\n  height: var(--wzl-control-h);\n  overflow: hidden;\n  border: var(--wzl-border-w) solid var(--wzl-line);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.swatch {\n  flex: 1 1 0;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  background: var(--token-color);\n  border: 0;\n  border-radius: 0;\n  cursor: pointer;\n}\n\n.swatch[data-overridden] {\n  box-shadow: inset 0 -3px 0 var(--wzl-accent);\n}\n\n.swatch[aria-pressed='true'],\n.swatch:focus-visible {\n  position: relative;\n  z-index: 1;\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n/* A group of sizes: its name over a grid of steps, each labeled by what its name adds. */\n.scale {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  min-width: 0;\n}\n\n.scaleHead {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-xs);\n  min-width: 0;\n}\n\n.steps {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));\n  gap: var(--wzl-space-1) var(--wzl-space-xs);\n}\n\n.rule {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--wzl-space-xs) var(--wzl-space-sm);\n  min-width: 0;\n}\n\n.ruleLabel {\n  color: var(--wzl-fg-subtle);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-2xs);\n}\n\n.rule .number {\n  flex: 0 1 5ch;\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n\n.step {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n\n.stepLabel {\n  overflow: hidden;\n  text-align: end;\n  color: var(--wzl-fg-subtle);\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-2xs);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.step[data-overridden] .stepLabel {\n  color: var(--wzl-accent-fg);\n}\n\n.stepEdit {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-1);\n  min-width: 0;\n}\n\n.step > .stepEdit + .stepEdit {\n  margin-block-start: var(--wzl-space-1);\n}\n\n.stepEdit .number {\n  font-variant-numeric: tabular-nums;\n  text-align: end;\n}\n\n/* Tight: a token to a line, with the names on a fixed rail so the values read\n   down the panel as a column. A stacked row spends its height on the name and\n   lets the field take the whole width, which a set of ninety cannot afford. */\n.tight .sectionBody {\n  gap: var(--wzl-space-1);\n  padding-block-end: var(--wzl-space-xs);\n}\n\n.tight .row {\n  flex-direction: row;\n  align-items: center;\n  gap: var(--wzl-space-xs);\n}\n\n.tight .row > .name {\n  flex: 0 0 11rem;\n}\n\n.tight .edit {\n  flex: 1 1 auto;\n}\n\n.tight .field,\n.tight .number {\n  flex: 0 1 16rem;\n  font-variant-numeric: tabular-nums;\n}\n\n.tight .unit {\n  font-variant-numeric: tabular-nums;\n}\n\n.tight .scale {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr);\n  align-items: start;\n  column-gap: var(--wzl-space-xs);\n}\n\n/* Grid rather than a row, so a picked swatch's editor still spans the full width. */\n.tight .family {\n  display: grid;\n  grid-template-columns: 11rem minmax(0, 1fr);\n  align-items: center;\n  column-gap: var(--wzl-space-xs);\n  row-gap: var(--wzl-space-1);\n}\n\n.tight .family > .row {\n  grid-column: 1 / -1;\n}\n\n.tight .strip {\n  height: 16px;\n}\n\n.tight .curve {\n  width: 16px;\n  height: 16px;\n}\n","import { parsesAsColor } from './color';\n\n/** A design token as `TokenPanel` edits it. */\nexport interface TokenEntry {\n  /** The custom property, e.g. `--wzl-gray-50`. */\n  name: string;\n  /** A DTCG type name. A type the panel has no control for edits as text. */\n  type: string;\n  /** Tokens sharing a group sit together; a color group large enough draws as one row of swatches. */\n  group: string;\n  value: string;\n  /** Whether `value` overrides the token's own, which offers Reset. */\n  overridden?: boolean;\n  description?: string;\n}\n\n/** How a scale's steps follow from its base: one multiplier per step, a constant ratio, or a constant step. */\nexport type TokenScaleRule =\n  | { kind: 'factors'; factors: readonly number[] }\n  | { kind: 'ratio'; ratio: number }\n  | { kind: 'step'; step: number };\n\n/** A group whose steps are generated from a base, so the panel edits the base and the rule rather than each step. */\nexport interface TokenScale {\n  /** The generated tokens, smallest first. Anything else in the group draws as an ordinary step. */\n  tokens: readonly string[];\n  base: number;\n  rule: TokenScaleRule;\n}\n\nconst round2 = (n: number) => Math.round(n * 100) / 100;\n\n/**\n * The same scale under another rule, fitted to the amounts its steps have now.\n * A ratio or step counts from the first step, so switching to one moves the\n * base there.\n */\nexport function refitScale(scale: TokenScale, kind: TokenScaleRule['kind'], amounts: readonly number[]): TokenScale {\n  const first = amounts[0] ?? scale.base;\n  const last = amounts.at(-1) ?? first;\n  const spans = Math.max(1, amounts.length - 1);\n  switch (kind) {\n    case 'factors':\n      return { ...scale, rule: { kind, factors: amounts.map((a) => (scale.base ? round2(a / scale.base) : 1)) } };\n    case 'ratio':\n      return { ...scale, base: first, rule: { kind, ratio: first > 0 ? round2((last / first) ** (1 / spans)) : 1 } };\n    case 'step':\n      return { ...scale, base: first, rule: { kind, step: round2((last - first) / spans) } };\n  }\n}\n\nexport type TokenCategory = 'color' | 'type' | 'size' | 'motion' | 'depth' | 'other';\n\n/** The panel's sections, in the order it draws them. */\nexport const TOKEN_CATEGORIES: readonly { id: TokenCategory; title: string }[] = [\n  { id: 'color', title: 'Color' },\n  { id: 'type', title: 'Type' },\n  { id: 'size', title: 'Size' },\n  { id: 'motion', title: 'Motion' },\n  { id: 'depth', title: 'Depth' },\n  { id: 'other', title: 'Other' },\n];\n\nconst TYPE_SCALE = /^(?:font|tracking|leading|letter|line-height)/;\n\n/** The section a token is filed under: by its type, and for a bare dimension or number by its group. */\nexport function tokenCategory(token: TokenEntry): TokenCategory {\n  switch (token.type) {\n    case 'color':\n      return 'color';\n    case 'fontFamily':\n    case 'fontWeight':\n      return 'type';\n    case 'duration':\n    case 'cubicBezier':\n      return 'motion';\n    case 'shadow':\n    case 'gradient':\n      return 'depth';\n    case 'dimension':\n    case 'number':\n      if (TYPE_SCALE.test(token.group)) return 'type';\n      if (token.type === 'number' && (token.group === 'z' || token.group === 'z-index')) return 'depth';\n      return 'size';\n    default:\n      return 'other';\n  }\n}\n\nconst AMOUNT = String.raw`-?(?:\\d+\\.?\\d*|\\.\\d+)`;\nconst DIMENSION = new RegExp(\n  `^${AMOUNT}(?:px|rem|em|%|ch|ex|lh|rlh|vh|vw|vmin|vmax|svh|lvh|dvh|cqw|cqh|pt|pc|cm|mm|in|q)$`,\n  'i',\n);\nconst DURATION = new RegExp(`^${AMOUNT}m?s$`);\nconst NUMBER = new RegExp(`^${AMOUNT}$`);\nconst LENGTH = new RegExp(`^${AMOUNT}(?:px|rem|em)?$`);\nconst BEZIER = new RegExp(`^cubic-bezier\\\\(\\\\s*(${AMOUNT})\\\\s*,\\\\s*(${AMOUNT})\\\\s*,\\\\s*(${AMOUNT})\\\\s*,\\\\s*(${AMOUNT})\\\\s*\\\\)$`, 'i');\nconst GRADIENT = /^(?:repeating-)?(?:linear|radial|conic)-gradient\\(/i;\n/** Commas outside parentheses: a shadow's layers, not a color function's arguments. */\nconst LAYERS = /,(?![^(]*\\))/;\nconst PARTS = /[a-z-]+\\([^)]*\\)|\\S+/gi;\n\nfunction isShadow(value: string): boolean {\n  return value.split(LAYERS).every((layer) => {\n    const parts = layer.trim().replace(/^inset\\s+/i, '').match(PARTS) ?? [];\n    const lengths = parts.filter((part) => LENGTH.test(part));\n    const rest = parts.filter((part) => !LENGTH.test(part));\n    return lengths.length >= 2 && lengths.length <= 4 && rest.length <= 1 && rest.every((part) => parsesAsColor(part));\n  });\n}\n\n/** A DTCG type read off the shape of a value, for a token that arrives without one. `'string'` when nothing fits. */\nexport function inferTokenType(value: string): string {\n  const v = value.trim();\n  if (!v) return 'string';\n  if (DURATION.test(v)) return 'duration';\n  if (DIMENSION.test(v)) return 'dimension';\n  if (NUMBER.test(v)) return 'number';\n  if (BEZIER.test(v)) return 'cubicBezier';\n  if (GRADIENT.test(v)) return 'gradient';\n  if (parsesAsColor(v)) return 'color';\n  if (isShadow(v)) return 'shadow';\n  return 'string';\n}\n\n/** A number and its unit, or null for a value that is not one. */\nexport function splitUnit(value: string): { amount: number; unit: string } | null {\n  const match = new RegExp(`^(${AMOUNT})([a-z%]*)$`, 'i').exec(value.trim());\n  return match ? { amount: Number(match[1]), unit: match[2] ?? '' } : null;\n}\n\n/** The four control points of a `cubic-bezier()`, or null for any other easing. */\nexport function bezierPoints(value: string): readonly [number, number, number, number] | null {\n  const match = BEZIER.exec(value.trim());\n  if (!match) return null;\n  const [x1, y1, x2, y2] = match.slice(1, 5).map(Number) as [number, number, number, number];\n  return [x1, y1, x2, y2];\n}\n","import { type CSSProperties, memo, useCallback, useMemo, useState } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Button } from '../Button';\nimport { DisclosureRow } from '../Disclosure';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { Select } from '../Select';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { toHex } from './color';\nimport s from './TokenPanel.module.css';\nimport {\n  bezierPoints,\n  refitScale,\n  splitUnit,\n  TOKEN_CATEGORIES,\n  type TokenCategory,\n  type TokenEntry,\n  type TokenScale,\n  type TokenScaleRule,\n  tokenCategory,\n} from './tokenTypes';\n\ntype OnChange = (name: string, value: string | null) => void;\n\n/** Props for `<TokenPanel>`. */\nexport interface TokenPanelProps {\n  tokens: readonly TokenEntry[];\n  /** A token's new value, or null to drop its override. Keep it stable: rows re-render only when it or their token changes. */\n  onChange: OnChange;\n  /** Sections held closed, by category. Omit to let the panel keep that state itself. */\n  collapsed?: Readonly<Partial<Record<TokenCategory, boolean>>>;\n  onCollapsedChange?: (category: TokenCategory, collapsed: boolean) => void;\n  /** Groups generated from a base, by group name. Such a group edits its base and rule above its steps. */\n  scales?: Readonly<Record<string, TokenScale>>;\n  /** A scale's new base or rule. The panel does not regenerate the steps; the consumer does, through `onChange`. */\n  onScaleChange?: (group: string, scale: TokenScale) => void;\n  /** Files a token under a section. Defaults to `tokenCategory`. */\n  categorize?: (token: TokenEntry) => TokenCategory;\n  /** The fewest colors, or sizes, sharing a group that draw as one row of swatches or one grid of steps. Default 3. */\n  familySize?: number;\n  /**\n   * Row layout. `tight` puts a token on one line — name, control, Reset — with the\n   * names on a fixed rail so the values read down the panel as a column, and caps\n   * the field rather than letting it span the panel. Default `normal` stacks the\n   * control under its name.\n   */\n  density?: 'tight' | 'normal';\n  className?: string;\n}\n\nconst WEIGHTS = ['100', '200', '300', '400', '500', '600', '700', '800', '900'];\nconst NUMBER_FORMAT = { maximumFractionDigits: 4, useGrouping: false } as const;\n\ntype FamilyKind = 'family' | 'scale';\ntype Item = { kind: 'row'; token: TokenEntry } | { kind: FamilyKind; group: string; tokens: TokenEntry[] };\n\nconst SCALAR = new Set(['dimension', 'duration', 'number']);\n\nfunction familyKindOf(token: TokenEntry): FamilyKind | null {\n  if (token.type === 'color') return 'family';\n  return SCALAR.has(token.type) && splitUnit(token.value) ? 'scale' : null;\n}\n\nfunction itemsOf(tokens: readonly TokenEntry[], familySize: number): Item[] {\n  const counts = new Map<string, number>();\n  for (const token of tokens) {\n    const kind = familyKindOf(token);\n    if (kind) counts.set(`${kind}:${token.group}`, (counts.get(`${kind}:${token.group}`) ?? 0) + 1);\n  }\n  const families = new Map<string, Extract<Item, { kind: FamilyKind }>>();\n  const items: Item[] = [];\n  for (const token of tokens) {\n    const kind = familyKindOf(token);\n    const key = `${kind}:${token.group}`;\n    if (!kind || (counts.get(key) ?? 0) < familySize) {\n      items.push({ kind: 'row', token });\n      continue;\n    }\n    let family = families.get(key);\n    if (!family) {\n      family = { kind, group: token.group, tokens: [] };\n      families.set(key, family);\n      items.push(family);\n    }\n    family.tokens.push(token);\n  }\n  return items;\n}\n\n/** Each name's segments past those every name in the set shares; a name that is all shared keeps its last. */\nfunction stepLabels(names: readonly string[]): string[] {\n  const split = names.map((name) => name.replace(/^--/, '').split('-'));\n  let shared = 0;\n  while (split.every((segments) => segments.length > shared && segments[shared] === split[0]?.[shared])) shared++;\n  return split.map((segments) => segments.slice(shared).join('-') || (segments.at(-1) ?? ''));\n}\n\nfunction Curve({ points, label }: { points: readonly [number, number, number, number]; label: string }) {\n  const [x1, y1, x2, y2] = points;\n  // y is flipped so the curve rises, and the box grows to hold an overshoot.\n  const top = Math.min(0, 1 - y1, 1 - y2);\n  const bottom = Math.max(1, 1 - y1, 1 - y2);\n  return (\n    <svg className={s.curve} viewBox={`-0.1 ${top - 0.1} 1.2 ${bottom - top + 0.2}`} role=\"img\" aria-label={label}>\n      <path d={`M0 1 C${x1} ${1 - y1} ${x2} ${1 - y2} 1 0`} fill=\"none\" stroke=\"currentColor\" strokeWidth={0.08} />\n    </svg>\n  );\n}\n\nfunction TokenControl({ token, set }: { token: TokenEntry; set: (value: string) => void }) {\n  const { name, type, value } = token;\n  const label = `${name} value`;\n  const hex = useMemo(() => (type === 'color' ? toHex(value) : null), [type, value]);\n\n  if (type === 'dimension' || type === 'duration' || type === 'number') {\n    const split = splitUnit(value);\n    if (split) {\n      return (\n        <>\n          <NumberField\n            className={s.number}\n            aria-label={label}\n            value={split.amount}\n            hideSteppers\n            formatOptions={NUMBER_FORMAT}\n            onChange={(amount) => {\n              if (Number.isFinite(amount)) set(`${amount}${split.unit}`);\n            }}\n          />\n          {split.unit ? <span className={s.unit}>{split.unit}</span> : null}\n        </>\n      );\n    }\n  }\n\n  if (type === 'fontWeight') {\n    const options = (WEIGHTS.includes(value) ? WEIGHTS : [...WEIGHTS, value]).map((weight) => ({\n      value: weight,\n      label: weight,\n    }));\n    return <Select aria-label={name} width=\"fit\" selectedKey={value} options={options} onSelectionChange={set} />;\n  }\n\n  const points = type === 'cubicBezier' ? bezierPoints(value) : null;\n  return (\n    <>\n      {points ? <Curve points={points} label={`${name} curve`} /> : null}\n      <Input\n        className={s.field}\n        aria-label={label}\n        value={value}\n        onChange={set}\n        leadingAdornment={\n          type !== 'color' ? undefined : hex ? (\n            <input\n              type=\"color\"\n              className={s.swatchInput}\n              aria-label={`${name} color`}\n              value={hex}\n              onChange={(event) => set(event.target.value)}\n            />\n          ) : (\n            <span className={s.chip} style={{ '--token-color': value } as CSSProperties} aria-hidden=\"true\" />\n          )\n        }\n      />\n    </>\n  );\n}\n\nconst TokenRow = memo(\n  function TokenRow({ token, onChange }: { token: TokenEntry; onChange: OnChange }) {\n    const set = useCallback((value: string) => onChange(token.name, value), [onChange, token.name]);\n    return (\n      <div className={s.row} role=\"group\" aria-label={token.name}>\n        <span className={s.name} title={token.description || token.name}>\n          {token.name}\n        </span>\n        <div className={s.edit}>\n          <TokenControl token={token} set={set} />\n          {token.overridden ? (\n            <Button variant=\"ghost\" size=\"sm\" ariaLabel={`Reset ${token.name}`} onClick={() => onChange(token.name, null)}>\n              Reset\n            </Button>\n          ) : null}\n        </div>\n      </div>\n    );\n  },\n  // Consumers rebuild their entries each render; a row only has to redraw when what it shows changed.\n  (a, b) =>\n    a.onChange === b.onChange &&\n    a.token.name === b.token.name &&\n    a.token.type === b.token.type &&\n    a.token.value === b.token.value &&\n    a.token.overridden === b.token.overridden &&\n    a.token.description === b.token.description,\n);\n\nfunction Family({ group, tokens, onChange }: { group: string; tokens: readonly TokenEntry[]; onChange: OnChange }) {\n  const [picked, setPicked] = useState<string | null>(null);\n  const token = tokens.find((t) => t.name === picked) ?? null;\n  return (\n    <div className={s.family} role=\"group\" aria-label={group}>\n      <span className={s.name}>{group}</span>\n      <div className={s.strip}>\n        {tokens.map((t) => (\n          <TooltipTrigger key={t.name} delay={0}>\n            <Focusable>\n              <button\n                type=\"button\"\n                className={s.swatch}\n                style={{ '--token-color': t.value } as CSSProperties}\n                aria-label={t.name}\n                aria-pressed={t.name === picked}\n                data-overridden={t.overridden ? '' : undefined}\n                onClick={() => setPicked((current) => (current === t.name ? null : t.name))}\n              />\n            </Focusable>\n            <Tooltip>{t.name}</Tooltip>\n          </TooltipTrigger>\n        ))}\n      </div>\n      {token ? <TokenRow token={token} onChange={onChange} /> : null}\n    </div>\n  );\n}\n\nfunction ScaleStep({\n  token,\n  label,\n  showUnit,\n  factor,\n  onChange,\n  onFactorChange,\n}: {\n  token: TokenEntry;\n  label: string;\n  showUnit: boolean;\n  factor?: number;\n  onChange: OnChange;\n  onFactorChange?: (factor: number) => void;\n}) {\n  const split = splitUnit(token.value);\n  if (!split) return null;\n  return (\n    <div className={s.step} title={token.description || token.name} data-overridden={token.overridden ? '' : undefined}>\n      <span className={s.stepLabel}>{label}</span>\n      <span className={s.stepEdit}>\n        <NumberField\n          className={s.number}\n          aria-label={`${token.name} value`}\n          value={split.amount}\n          hideSteppers\n          formatOptions={NUMBER_FORMAT}\n          onChange={(amount) => {\n            if (Number.isFinite(amount)) onChange(token.name, `${amount}${split.unit}`);\n          }}\n        />\n        {showUnit && split.unit ? <span className={s.unit}>{split.unit}</span> : null}\n      </span>\n      {factor !== undefined && onFactorChange ? (\n        <span className={s.stepEdit}>\n          <span className={s.unit}>×</span>\n          <NumberField\n            className={s.number}\n            aria-label={`${token.name} factor`}\n            value={factor}\n            hideSteppers\n            formatOptions={NUMBER_FORMAT}\n            onChange={(next) => {\n              if (Number.isFinite(next)) onFactorChange(next);\n            }}\n          />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nconst RULES: readonly ToggleBarItem<TokenScaleRule['kind']>[] = [\n  { value: 'factors', label: 'each', ariaLabel: 'factors' },\n  { value: 'ratio', label: 'ratio' },\n  { value: 'step', label: 'step' },\n];\n\nfunction ScaleRuleControls({\n  group,\n  scale,\n  unit,\n  amounts,\n  onScaleChange,\n}: {\n  group: string;\n  scale: TokenScale;\n  unit: string;\n  amounts: readonly number[];\n  onScaleChange: (scale: TokenScale) => void;\n}) {\n  const { rule } = scale;\n  const param =\n    rule.kind === 'ratio'\n      ? { key: 'ratio' as const, value: rule.ratio }\n      : rule.kind === 'step'\n        ? { key: 'step' as const, value: rule.step }\n        : null;\n  return (\n    <div className={s.rule}>\n      <span className={s.stepEdit}>\n        <span className={s.ruleLabel}>base</span>\n        <NumberField\n          className={s.number}\n          aria-label={`${group} base`}\n          value={scale.base}\n          hideSteppers\n          formatOptions={NUMBER_FORMAT}\n          onChange={(base) => {\n            if (Number.isFinite(base)) onScaleChange({ ...scale, base });\n          }}\n        />\n        {unit ? <span className={s.unit}>{unit}</span> : null}\n      </span>\n      <ToggleBar\n        ariaLabel={`${group} rule`}\n        size=\"sm\"\n        items={RULES}\n        value={rule.kind}\n        onChange={(kind) => {\n          if (kind && kind !== rule.kind) onScaleChange(refitScale(scale, kind, amounts));\n        }}\n      />\n      {param ? (\n        <span className={s.stepEdit}>\n          {param.key === 'ratio' ? <span className={s.unit}>×</span> : <span className={s.unit}>+</span>}\n          <NumberField\n            className={s.number}\n            aria-label={`${group} ${param.key}`}\n            value={param.value}\n            hideSteppers\n            formatOptions={NUMBER_FORMAT}\n            onChange={(value) => {\n              if (Number.isFinite(value)) onScaleChange({ ...scale, rule: { kind: param.key, [param.key]: value } as TokenScaleRule });\n            }}\n          />\n        </span>\n      ) : null}\n    </div>\n  );\n}\n\nfunction Scale({\n  group,\n  tokens,\n  generator,\n  onChange,\n  onScaleChange,\n}: {\n  group: string;\n  tokens: readonly TokenEntry[];\n  generator?: TokenScale;\n  onChange: OnChange;\n  onScaleChange?: (group: string, scale: TokenScale) => void;\n}) {\n  const labels = useMemo(() => stepLabels(tokens.map((t) => t.name)), [tokens]);\n  const units = new Set(tokens.map((t) => splitUnit(t.value)?.unit ?? ''));\n  const unit = units.size === 1 ? [...units][0] : null;\n  const overridden = tokens.filter((t) => t.overridden);\n  return (\n    <div className={s.scale} role=\"group\" aria-label={group}>\n      <span className={s.scaleHead}>\n        <span className={s.name}>{group}</span>\n        {unit ? <span className={s.unit}>{unit}</span> : null}\n        {overridden.length > 0 ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            ariaLabel={`Reset ${group}`}\n            onClick={() => {\n              for (const t of overridden) onChange(t.name, null);\n            }}\n          >\n            Reset\n          </Button>\n        ) : null}\n      </span>\n      {generator && onScaleChange ? (\n        <ScaleRuleControls\n          group={group}\n          scale={generator}\n          unit={unit ?? ''}\n          amounts={generator.tokens.map(\n            (name) => splitUnit(tokens.find((t) => t.name === name)?.value ?? '')?.amount ?? generator.base,\n          )}\n          onScaleChange={(next) => onScaleChange(group, next)}\n        />\n      ) : null}\n      <div className={s.steps}>\n        {tokens.map((t, i) => {\n          const rule = generator?.rule;\n          const at = generator ? generator.tokens.indexOf(t.name) : -1;\n          const factor = rule?.kind === 'factors' && at >= 0 ? rule.factors[at] : undefined;\n          return (\n            <ScaleStep\n              key={t.name}\n              token={t}\n              label={labels[i] ?? t.name}\n              showUnit={unit === null}\n              factor={factor}\n              onChange={onChange}\n              onFactorChange={\n                generator && onScaleChange && rule?.kind === 'factors'\n                  ? (next) =>\n                      onScaleChange(group, {\n                        ...generator,\n                        rule: { kind: 'factors', factors: rule.factors.map((f, j) => (j === at ? next : f)) },\n                      })\n                  : undefined\n              }\n            />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction Section({\n  title,\n  open,\n  onToggle,\n  tokens,\n  familySize,\n  scales,\n  onChange,\n  onScaleChange,\n}: {\n  title: string;\n  open: boolean;\n  onToggle: () => void;\n  tokens: readonly TokenEntry[];\n  familySize: number;\n  scales?: Readonly<Record<string, TokenScale>>;\n  onChange: OnChange;\n  onScaleChange?: (group: string, scale: TokenScale) => void;\n}) {\n  const items = useMemo(() => itemsOf(tokens, familySize), [tokens, familySize]);\n  return (\n    <section className={s.section} aria-label={title}>\n      <DisclosureRow className={s.sectionHead} open={open} onToggle={onToggle} label={title}>\n        <span aria-hidden=\"true\">{title}</span>\n      </DisclosureRow>\n      {open ? (\n        <div className={s.sectionBody}>\n          {items.map((item) =>\n            item.kind === 'row' ? (\n              <TokenRow key={item.token.name} token={item.token} onChange={onChange} />\n            ) : item.kind === 'scale' ? (\n              <Scale\n                key={`scale:${item.group}`}\n                group={item.group}\n                tokens={item.tokens}\n                generator={scales?.[item.group]}\n                onChange={onChange}\n                onScaleChange={onScaleChange}\n              />\n            ) : (\n              <Family key={`family:${item.group}`} group={item.group} tokens={item.tokens} onChange={onChange} />\n            ),\n          )}\n        </div>\n      ) : null}\n    </section>\n  );\n}\n\n/**\n * Edits a set of design tokens by type: collapsible sections by category, a\n * color group drawn as one row of swatches sized to fit, a group of sizes drawn\n * as one grid of numbers labeled by step — with its base and rule above it when\n * `scales` says how it is generated — and a control for each\n * type — a number with its unit for dimensions and durations, the nine weights\n * for a font weight, a curve beside a `cubic-bezier()`, a swatch beside a color,\n * and text for everything else.\n */\nexport function TokenPanel({\n  tokens,\n  onChange,\n  collapsed,\n  onCollapsedChange,\n  scales,\n  onScaleChange,\n  categorize = tokenCategory,\n  familySize = 3,\n  density = 'normal',\n  className,\n}: TokenPanelProps) {\n  const [ownCollapsed, setOwnCollapsed] = useState<Partial<Record<TokenCategory, boolean>>>({});\n  const closed = collapsed ?? ownCollapsed;\n  const byCategory = useMemo(() => {\n    const sections = new Map<TokenCategory, TokenEntry[]>();\n    for (const token of tokens) {\n      const category = categorize(token);\n      sections.set(category, [...(sections.get(category) ?? []), token]);\n    }\n    return sections;\n  }, [tokens, categorize]);\n\n  return (\n    <div className={[s.panel, density === 'tight' && s.tight, className].filter(Boolean).join(' ')}>\n      {TOKEN_CATEGORIES.map(({ id, title }) => {\n        const inSection = byCategory.get(id);\n        if (!inSection) return null;\n        const open = !closed[id];\n        return (\n          <Section\n            key={id}\n            title={title}\n            open={open}\n            onToggle={() => {\n              if (collapsed === undefined) setOwnCollapsed((prev) => ({ ...prev, [id]: open }));\n              onCollapsedChange?.(id, open);\n            }}\n            tokens={inSection}\n            familySize={familySize}\n            scales={scales}\n            onChange={onChange}\n            onScaleChange={onScaleChange}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAAA,IAAM,IAAM,8CACN,IAAM,yDACN,IAAiB,oEACjB,IAAW,IAAI,IAAI;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AAIF,SAAS,IAA4B;AACnC,QAAO,OAAO,MAAQ,OAAe,OAAO,IAAI,YAAa,cACxD,MAAU,IAAI,SAAS,SAAS,EAAM,GACvC;;AAIN,SAAgB,EAAc,GAAe,IAAqB,GAAiB,EAAW;CAC5F,IAAM,IAAI,EAAM,MAAM;AAItB,QAFI,CAAC,KAAK,EAAE,SAAS,OAAO,GAAS,KACjC,IAAiB,EAAS,EAAE,GACzB,EAAI,KAAK,EAAE,IAAI,EAAe,KAAK,EAAE,IAAI,EAAS,IAAI,EAAE,aAAa,CAAC;;AAG/E,SAAS,EAAM,GAA0B;AACvC,KAAI,EAAI,KAAK,EAAE,EAAE;EACf,IAAM,IAAS,EAAE,MAAM,EAAE,CAAC,aAAa;AACvC,SAAO,IAAI,EAAO,UAAU,IAAI,CAAC,GAAG,EAAO,MAAM,GAAG,EAAE,CAAC,CAAC,KAAK,MAAM,IAAI,EAAE,CAAC,KAAK,GAAG,GAAG,EAAO,MAAM,GAAG,EAAE;;CAEzG,IAAM,IAAM,EAAI,KAAK,EAAE;AACvB,QAAO,IACH,IAAI,EACD,MAAM,GAAG,EAAE,CACX,KAAK,MAAM,KAAK,IAAI,KAAK,OAAO,EAAE,CAAC,CAAC,SAAS,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,CAClE,KAAK,GAAG,KACX;;AAGN,IAAI;AAGJ,SAAS,EAAW,GAA8B;AAChD,KAAI,MAAU,KAAA,EACZ,KAAI;AACF,MAAQ,SAAS,cAAc,SAAS,CAAC,WAAW,KAAK;SACnD;AACN,MAAQ;;AAGZ,KAAI,CAAC,EAAO,QAAO;AAGnB,CADA,EAAM,YAAY,WAClB,EAAM,YAAY;CAClB,IAAM,IAAU,OAAO,EAAM,UAAU;AAGvC,QAFA,EAAM,YAAY,WAClB,EAAM,YAAY,GACX,MAAY,OAAO,EAAM,UAAU,GAAG,IAAU;;AAIzD,SAAgB,EAAM,GAA8B;CAClD,IAAM,IAAI,EAAM,MAAM,EAChB,IAAS,EAAM,EAAE;AACvB,KAAI,EAAQ,QAAO;CACnB,IAAM,IAAU,OAAO,WAAa,MAAc,OAAO,EAAW,EAAE;AACtE,QAAO,KAAW,MAAY,IAAI,EAAM,EAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;GEtD/C,KAAU,MAAc,KAAK,MAAM,IAAI,IAAI,GAAG;AAOpD,SAAgB,EAAW,GAAmB,GAA8B,GAAwC;CAClH,IAAM,IAAQ,EAAQ,MAAM,EAAM,MAC5B,IAAO,EAAQ,GAAG,GAAG,IAAI,GACzB,IAAQ,KAAK,IAAI,GAAG,EAAQ,SAAS,EAAE;AAC7C,SAAQ,GAAR;EACE,KAAK,UACH,QAAO;GAAE,GAAG;GAAO,MAAM;IAAE;IAAM,SAAS,EAAQ,KAAK,MAAO,EAAM,OAAO,EAAO,IAAI,EAAM,KAAK,GAAG,EAAG;IAAE;GAAE;EAC7G,KAAK,QACH,QAAO;GAAE,GAAG;GAAO,MAAM;GAAO,MAAM;IAAE;IAAM,OAAO,IAAQ,IAAI,GAAQ,IAAO,OAAW,IAAI,GAAO,GAAG;IAAG;GAAE;EAChH,KAAK,OACH,QAAO;GAAE,GAAG;GAAO,MAAM;GAAO,MAAM;IAAE;IAAM,MAAM,GAAQ,IAAO,KAAS,EAAM;IAAE;GAAE;;;AAO5F,IAAa,IAAoE;CAC/E;EAAE,IAAI;EAAS,OAAO;EAAS;CAC/B;EAAE,IAAI;EAAQ,OAAO;EAAQ;CAC7B;EAAE,IAAI;EAAQ,OAAO;EAAQ;CAC7B;EAAE,IAAI;EAAU,OAAO;EAAU;CACjC;EAAE,IAAI;EAAS,OAAO;EAAS;CAC/B;EAAE,IAAI;EAAS,OAAO;EAAS;CAChC,EAEK,IAAa;AAGnB,SAAgB,EAAc,GAAkC;AAC9D,SAAQ,EAAM,MAAd;EACE,KAAK,QACH,QAAO;EACT,KAAK;EACL,KAAK,aACH,QAAO;EACT,KAAK;EACL,KAAK,cACH,QAAO;EACT,KAAK;EACL,KAAK,WACH,QAAO;EACT,KAAK;EACL,KAAK,SAGH,QAFI,EAAW,KAAK,EAAM,MAAM,GAAS,SACrC,EAAM,SAAS,aAAa,EAAM,UAAU,OAAO,EAAM,UAAU,aAAmB,UACnF;EACT,QACE,QAAO;;;AAIb,IAAM,IAAS,OAAO,GAAG,yBACnB,IAAgB,OACpB,IAAI,EAAO,qFACX,IACD,EACK,IAAe,OAAO,IAAI,EAAO,MAAM,EACvC,IAAa,OAAO,IAAI,EAAO,GAAG,EAClC,IAAa,OAAO,IAAI,EAAO,iBAAiB,EAChD,IAAa,OAAO,wBAAwB,EAAO,aAAa,EAAO,aAAa,EAAO,aAAa,EAAO,YAAY,IAAI,EAC/H,IAAW,uDAEX,IAAS,gBACT,IAAQ;AAEd,SAAS,EAAS,GAAwB;AACxC,QAAO,EAAM,MAAM,EAAO,CAAC,OAAO,MAAU;EAC1C,IAAM,IAAQ,EAAM,MAAM,CAAC,QAAQ,cAAc,GAAG,CAAC,MAAM,EAAM,IAAI,EAAE,EACjE,IAAU,EAAM,QAAQ,MAAS,EAAO,KAAK,EAAK,CAAC,EACnD,IAAO,EAAM,QAAQ,MAAS,CAAC,EAAO,KAAK,EAAK,CAAC;AACvD,SAAO,EAAQ,UAAU,KAAK,EAAQ,UAAU,KAAK,EAAK,UAAU,KAAK,EAAK,OAAO,MAAS,EAAc,EAAK,CAAC;GAClH;;AAIJ,SAAgB,EAAe,GAAuB;CACpD,IAAM,IAAI,EAAM,MAAM;AAStB,QARK,IACD,EAAS,KAAK,EAAE,GAAS,aACzB,EAAU,KAAK,EAAE,GAAS,cAC1B,EAAO,KAAK,EAAE,GAAS,WACvB,EAAO,KAAK,EAAE,GAAS,gBACvB,EAAS,KAAK,EAAE,GAAS,aACzB,EAAc,EAAE,GAAS,UACzB,EAAS,EAAE,GAAS,WACjB,WARQ;;AAYjB,SAAgB,EAAU,GAAwD;CAChF,IAAM,IAAY,OAAO,KAAK,EAAO,cAAc,IAAI,CAAC,KAAK,EAAM,MAAM,CAAC;AAC1E,QAAO,IAAQ;EAAE,QAAQ,OAAO,EAAM,GAAG;EAAE,MAAM,EAAM,MAAM;EAAI,GAAG;;AAItE,SAAgB,EAAa,GAAiE;CAC5F,IAAM,IAAQ,EAAO,KAAK,EAAM,MAAM,CAAC;AACvC,KAAI,CAAC,EAAO,QAAO;CACnB,IAAM,CAAC,GAAI,GAAI,GAAI,KAAM,EAAM,MAAM,GAAG,EAAE,CAAC,IAAI,OAAO;AACtD,QAAO;EAAC;EAAI;EAAI;EAAI;EAAG;;;;ACtFzB,IAAM,IAAU;CAAC;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAO;CAAM,EACzE,IAAgB;CAAE,uBAAuB;CAAG,aAAa;CAAO,EAKhE,IAAS,IAAI,IAAI;CAAC;CAAa;CAAY;CAAS,CAAC;AAE3D,SAAS,EAAa,GAAsC;AAE1D,QADI,EAAM,SAAS,UAAgB,WAC5B,EAAO,IAAI,EAAM,KAAK,IAAI,EAAU,EAAM,MAAM,GAAG,UAAU;;AAGtE,SAAS,EAAQ,GAA+B,GAA4B;CAC1E,IAAM,oBAAS,IAAI,KAAqB;AACxC,MAAK,IAAM,KAAS,GAAQ;EAC1B,IAAM,IAAO,EAAa,EAAM;AAChC,EAAI,KAAM,EAAO,IAAI,GAAG,EAAK,GAAG,EAAM,UAAU,EAAO,IAAI,GAAG,EAAK,GAAG,EAAM,QAAQ,IAAI,KAAK,EAAE;;CAEjG,IAAM,oBAAW,IAAI,KAAkD,EACjE,IAAgB,EAAE;AACxB,MAAK,IAAM,KAAS,GAAQ;EAC1B,IAAM,IAAO,EAAa,EAAM,EAC1B,IAAM,GAAG,EAAK,GAAG,EAAM;AAC7B,MAAI,CAAC,MAAS,EAAO,IAAI,EAAI,IAAI,KAAK,GAAY;AAChD,KAAM,KAAK;IAAE,MAAM;IAAO;IAAO,CAAC;AAClC;;EAEF,IAAI,IAAS,EAAS,IAAI,EAAI;AAM9B,EALK,MACH,IAAS;GAAE;GAAM,OAAO,EAAM;GAAO,QAAQ,EAAE;GAAE,EACjD,EAAS,IAAI,GAAK,EAAO,EACzB,EAAM,KAAK,EAAO,GAEpB,EAAO,OAAO,KAAK,EAAM;;AAE3B,QAAO;;AAIT,SAAS,EAAW,GAAoC;CACtD,IAAM,IAAQ,EAAM,KAAK,MAAS,EAAK,QAAQ,OAAO,GAAG,CAAC,MAAM,IAAI,CAAC,EACjE,IAAS;AACb,QAAO,EAAM,OAAO,MAAa,EAAS,SAAS,KAAU,EAAS,OAAY,EAAM,KAAK,GAAQ,EAAE;AACvG,QAAO,EAAM,KAAK,MAAa,EAAS,MAAM,EAAO,CAAC,KAAK,IAAI,KAAK,EAAS,GAAG,GAAG,IAAI,IAAI;;AAG7F,SAAS,EAAM,EAAE,WAAQ,YAA+E;CACtG,IAAM,CAAC,GAAI,GAAI,GAAI,KAAM,GAEnB,IAAM,KAAK,IAAI,GAAG,IAAI,GAAI,IAAI,EAAG,EACjC,IAAS,KAAK,IAAI,GAAG,IAAI,GAAI,IAAI,EAAG;AAC1C,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAO,SAAS,QAAQ,IAAM,GAAI,OAAO,IAAS,IAAM;EAAO,MAAK;EAAM,cAAY;YACtG,kBAAC,QAAD;GAAM,GAAG,SAAS,EAAG,GAAG,IAAI,EAAG,GAAG,EAAG,GAAG,IAAI,EAAG;GAAO,MAAK;GAAO,QAAO;GAAe,aAAa;GAAQ,CAAA;EACzG,CAAA;;AAIV,SAAS,EAAa,EAAE,UAAO,UAA4D;CACzF,IAAM,EAAE,SAAM,SAAM,aAAU,GACxB,IAAQ,GAAG,EAAK,SAChB,IAAM,QAAe,MAAS,UAAU,EAAM,EAAM,GAAG,MAAO,CAAC,GAAM,EAAM,CAAC;AAElF,KAAI,MAAS,eAAe,MAAS,cAAc,MAAS,UAAU;EACpE,IAAM,IAAQ,EAAU,EAAM;AAC9B,MAAI,EACF,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;GACE,WAAW,EAAE;GACb,cAAY;GACZ,OAAO,EAAM;GACb,cAAA;GACA,eAAe;GACf,WAAW,MAAW;AACpB,IAAI,OAAO,SAAS,EAAO,IAAE,EAAI,GAAG,IAAS,EAAM,OAAO;;GAE5D,CAAA,EACD,EAAM,OAAO,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAO,EAAM;GAAY,CAAA,GAAG,KAC5D,EAAA,CAAA;;AAKT,KAAI,MAAS,aAKX,QAAO,kBAAC,GAAD;EAAQ,cAAY;EAAM,OAAM;EAAM,aAAa;EAAgB,UAJzD,EAAQ,SAAS,EAAM,GAAG,IAAU,CAAC,GAAG,GAAS,EAAM,EAAE,KAAK,OAAY;GACzF,OAAO;GACP,OAAO;GACR,EACyE;EAAS,mBAAmB;EAAO,CAAA;CAG/G,IAAM,IAAS,MAAS,gBAAgB,EAAa,EAAM,GAAG;AAC9D,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,IAAS,kBAAC,GAAD;EAAe;EAAQ,OAAO,GAAG,EAAK;EAAW,CAAA,GAAG,MAC9D,kBAAC,GAAD;EACE,WAAW,EAAE;EACb,cAAY;EACL;EACP,UAAU;EACV,kBACE,MAAS,UAAsB,IAC7B,kBAAC,SAAD;GACE,MAAK;GACL,WAAW,EAAE;GACb,cAAY,GAAG,EAAK;GACpB,OAAO;GACP,WAAW,MAAU,EAAI,EAAM,OAAO,MAAM;GAC5C,CAAA,GAEF,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAM,OAAO,EAAE,iBAAiB,GAAO;GAAmB,eAAY;GAAS,CAAA,GATjF,KAAA;EAYrB,CAAA,CACD,EAAA,CAAA;;AAIP,IAAM,IAAW,EACf,SAAkB,EAAE,UAAO,eAAuD;CAChF,IAAM,IAAM,GAAa,MAAkB,EAAS,EAAM,MAAM,EAAM,EAAE,CAAC,GAAU,EAAM,KAAK,CAAC;AAC/F,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAK,MAAK;EAAQ,cAAY,EAAM;YAAtD,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAM,OAAO,EAAM,eAAe,EAAM;aACxD,EAAM;GACF,CAAA,EACP,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACE,kBAAC,GAAD;IAAqB;IAAY;IAAO,CAAA,EACvC,EAAM,aACL,kBAAC,GAAD;IAAQ,SAAQ;IAAQ,MAAK;IAAK,WAAW,SAAS,EAAM;IAAQ,eAAe,EAAS,EAAM,MAAM,KAAK;cAAE;IAEtG,CAAA,GACP,KACA;KACF;;IAIT,GAAG,MACF,EAAE,aAAa,EAAE,YACjB,EAAE,MAAM,SAAS,EAAE,MAAM,QACzB,EAAE,MAAM,SAAS,EAAE,MAAM,QACzB,EAAE,MAAM,UAAU,EAAE,MAAM,SAC1B,EAAE,MAAM,eAAe,EAAE,MAAM,cAC/B,EAAE,MAAM,gBAAgB,EAAE,MAAM,YACnC;AAED,SAAS,GAAO,EAAE,UAAO,WAAQ,eAAkF;CACjH,IAAM,CAAC,GAAQ,KAAa,EAAwB,KAAK,EACnD,IAAQ,EAAO,MAAM,MAAM,EAAE,SAAS,EAAO,IAAI;AACvD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAQ,MAAK;EAAQ,cAAY;YAAnD;GACE,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAO;IAAa,CAAA;GACvC,kBAAC,OAAD;IAAK,WAAW,EAAE;cACf,EAAO,KAAK,MACX,kBAAC,GAAD;KAA6B,OAAO;eAApC,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAE;MACb,OAAO,EAAE,iBAAiB,EAAE,OAAO;MACnC,cAAY,EAAE;MACd,gBAAc,EAAE,SAAS;MACzB,mBAAiB,EAAE,aAAa,KAAK,KAAA;MACrC,eAAe,GAAW,MAAa,MAAY,EAAE,OAAO,OAAO,EAAE,KAAM;MAC3E,CAAA,EACQ,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,EAAE,MAAe,CAAA,CACZ;OAbI,EAAE,KAaN,CACjB;IACE,CAAA;GACL,IAAQ,kBAAC,GAAD;IAAiB;IAAiB;IAAY,CAAA,GAAG;GACtD;;;AAIV,SAAS,GAAU,EACjB,UACA,UACA,aACA,WACA,aACA,qBAQC;CACD,IAAM,IAAQ,EAAU,EAAM,MAAM;AAEpC,QADK,IAEH,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAM,OAAO,EAAM,eAAe,EAAM;EAAM,mBAAiB,EAAM,aAAa,KAAK,KAAA;YAAzG;GACE,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAY;IAAa,CAAA;GAC5C,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAnB,CACE,kBAAC,GAAD;KACE,WAAW,EAAE;KACb,cAAY,GAAG,EAAM,KAAK;KAC1B,OAAO,EAAM;KACb,cAAA;KACA,eAAe;KACf,WAAW,MAAW;AACpB,MAAI,OAAO,SAAS,EAAO,IAAE,EAAS,EAAM,MAAM,GAAG,IAAS,EAAM,OAAO;;KAE7E,CAAA,EACD,KAAY,EAAM,OAAO,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAO,EAAM;KAAY,CAAA,GAAG,KACpE;;GACN,MAAW,KAAA,KAAa,IACvB,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAnB,CACE,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAM;KAAQ,CAAA,EACjC,kBAAC,GAAD;KACE,WAAW,EAAE;KACb,cAAY,GAAG,EAAM,KAAK;KAC1B,OAAO;KACP,cAAA;KACA,eAAe;KACf,WAAW,MAAS;AAClB,MAAI,OAAO,SAAS,EAAK,IAAE,EAAe,EAAK;;KAEjD,CAAA,CACG;QACL;GACA;MAhCW;;AAoCrB,IAAM,KAA0D;CAC9D;EAAE,OAAO;EAAW,OAAO;EAAQ,WAAW;EAAW;CACzD;EAAE,OAAO;EAAS,OAAO;EAAS;CAClC;EAAE,OAAO;EAAQ,OAAO;EAAQ;CACjC;AAED,SAAS,GAAkB,EACzB,UACA,UACA,SACA,YACA,oBAOC;CACD,IAAM,EAAE,YAAS,GACX,IACJ,EAAK,SAAS,UACV;EAAE,KAAK;EAAkB,OAAO,EAAK;EAAO,GAC5C,EAAK,SAAS,SACZ;EAAE,KAAK;EAAiB,OAAO,EAAK;EAAM,GAC1C;AACR,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;YAAlB;GACE,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAnB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAW;MAAW,CAAA;KACzC,kBAAC,GAAD;MACE,WAAW,EAAE;MACb,cAAY,GAAG,EAAM;MACrB,OAAO,EAAM;MACb,cAAA;MACA,eAAe;MACf,WAAW,MAAS;AAClB,OAAI,OAAO,SAAS,EAAK,IAAE,EAAc;QAAE,GAAG;QAAO;QAAM,CAAC;;MAE9D,CAAA;KACD,IAAO,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAO;MAAY,CAAA,GAAG;KAC5C;;GACP,kBAAC,GAAD;IACE,WAAW,GAAG,EAAM;IACpB,MAAK;IACL,OAAO;IACP,OAAO,EAAK;IACZ,WAAW,MAAS;AAClB,KAAI,KAAQ,MAAS,EAAK,QAAM,EAAc,EAAW,GAAO,GAAM,EAAQ,CAAC;;IAEjF,CAAA;GACD,IACC,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAnB,CACG,EAAM,QAAQ,UAAU,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAM;KAAQ,CAAA,GAAG,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAM;KAAQ,CAAA,EAC9F,kBAAC,GAAD;KACE,WAAW,EAAE;KACb,cAAY,GAAG,EAAM,GAAG,EAAM;KAC9B,OAAO,EAAM;KACb,cAAA;KACA,eAAe;KACf,WAAW,MAAU;AACnB,MAAI,OAAO,SAAS,EAAM,IAAE,EAAc;OAAE,GAAG;OAAO,MAAM;QAAE,MAAM,EAAM;SAAM,EAAM,MAAM;QAAO;OAAoB,CAAC;;KAE1H,CAAA,CACG;QACL;GACA;;;AAIV,SAAS,GAAM,EACb,UACA,WACA,cACA,aACA,oBAOC;CACD,IAAM,IAAS,QAAc,EAAW,EAAO,KAAK,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,EAAO,CAAC,EACvE,IAAQ,IAAI,IAAI,EAAO,KAAK,MAAM,EAAU,EAAE,MAAM,EAAE,QAAQ,GAAG,CAAC,EAClE,IAAO,EAAM,SAAS,IAAI,CAAC,GAAG,EAAM,CAAC,KAAK,MAC1C,IAAa,EAAO,QAAQ,MAAM,EAAE,WAAW;AACrD,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAO,MAAK;EAAQ,cAAY;YAAlD;GACE,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAnB;KACE,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAO;MAAa,CAAA;KACtC,IAAO,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAO;MAAY,CAAA,GAAG;KAChD,EAAW,SAAS,IACnB,kBAAC,GAAD;MACE,SAAQ;MACR,MAAK;MACL,WAAW,SAAS;MACpB,eAAe;AACb,YAAK,IAAM,KAAK,EAAY,GAAS,EAAE,MAAM,KAAK;;gBAErD;MAEQ,CAAA,GACP;KACC;;GACN,KAAa,IACZ,kBAAC,IAAD;IACS;IACP,OAAO;IACP,MAAM,KAAQ;IACd,SAAS,EAAU,OAAO,KACvB,MAAS,EAAU,EAAO,MAAM,MAAM,EAAE,SAAS,EAAK,EAAE,SAAS,GAAG,EAAE,UAAU,EAAU,KAC5F;IACD,gBAAgB,MAAS,EAAc,GAAO,EAAK;IACnD,CAAA,GACA;GACJ,kBAAC,OAAD;IAAK,WAAW,EAAE;cACf,EAAO,KAAK,GAAG,MAAM;KACpB,IAAM,IAAO,GAAW,MAClB,IAAK,IAAY,EAAU,OAAO,QAAQ,EAAE,KAAK,GAAG,IACpD,IAAS,GAAM,SAAS,aAAa,KAAM,IAAI,EAAK,QAAQ,KAAM,KAAA;AACxE,YACE,kBAAC,IAAD;MAEE,OAAO;MACP,OAAO,EAAO,MAAM,EAAE;MACtB,UAAU,MAAS;MACX;MACE;MACV,gBACE,KAAa,KAAiB,GAAM,SAAS,aACxC,MACC,EAAc,GAAO;OACnB,GAAG;OACH,MAAM;QAAE,MAAM;QAAW,SAAS,EAAK,QAAQ,KAAK,GAAG,MAAO,MAAM,IAAK,IAAO,EAAG;QAAE;OACtF,CAAC,GACJ,KAAA;MAEN,EAfK,EAAE,KAeP;MAEJ;IACE,CAAA;GACF;;;AAIV,SAAS,GAAQ,EACf,UACA,SACA,aACA,WACA,eACA,WACA,aACA,oBAUC;CACD,IAAM,IAAQ,QAAc,EAAQ,GAAQ,EAAW,EAAE,CAAC,GAAQ,EAAW,CAAC;AAC9E,QACE,kBAAC,WAAD;EAAS,WAAW,EAAE;EAAS,cAAY;YAA3C,CACE,kBAAC,GAAD;GAAe,WAAW,EAAE;GAAmB;GAAgB;GAAU,OAAO;aAC9E,kBAAC,QAAD;IAAM,eAAY;cAAQ;IAAa,CAAA;GACzB,CAAA,EACf,IACC,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAM,KAAK,MACV,EAAK,SAAS,QACZ,kBAAC,GAAD;IAAgC,OAAO,EAAK;IAAiB;IAAY,EAA1D,EAAK,MAAM,KAA+C,GACvE,EAAK,SAAS,UAChB,kBAAC,IAAD;IAEE,OAAO,EAAK;IACZ,QAAQ,EAAK;IACb,WAAW,IAAS,EAAK;IACf;IACK;IACf,EANK,SAAS,EAAK,QAMnB,GAEF,kBAAC,IAAD;IAAqC,OAAO,EAAK;IAAO,QAAQ,EAAK;IAAkB;IAAY,EAAtF,UAAU,EAAK,QAAuE,CAEtG;GACG,CAAA,GACJ,KACI;;;AAad,SAAgB,GAAW,EACzB,WACA,aACA,cACA,sBACA,WACA,kBACA,gBAAa,GACb,gBAAa,GACb,aAAU,UACV,gBACkB;CAClB,IAAM,CAAC,GAAc,KAAmB,EAAkD,EAAE,CAAC,EACvF,IAAS,KAAa,GACtB,IAAa,QAAc;EAC/B,IAAM,oBAAW,IAAI,KAAkC;AACvD,OAAK,IAAM,KAAS,GAAQ;GAC1B,IAAM,IAAW,EAAW,EAAM;AAClC,KAAS,IAAI,GAAU,CAAC,GAAI,EAAS,IAAI,EAAS,IAAI,EAAE,EAAG,EAAM,CAAC;;AAEpE,SAAO;IACN,CAAC,GAAQ,EAAW,CAAC;AAExB,QACE,kBAAC,OAAD;EAAK,WAAW;GAAC,EAAE;GAAO,MAAY,WAAW,EAAE;GAAO;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAC3F,EAAiB,KAAK,EAAE,OAAI,eAAY;GACvC,IAAM,IAAY,EAAW,IAAI,EAAG;AACpC,OAAI,CAAC,EAAW,QAAO;GACvB,IAAM,IAAO,CAAC,EAAO;AACrB,UACE,kBAAC,IAAD;IAES;IACD;IACN,gBAAgB;AAEd,KADI,MAAc,KAAA,KAAW,GAAiB,OAAU;MAAE,GAAG;OAAO,IAAK;MAAM,EAAE,EACjF,IAAoB,GAAI,EAAK;;IAE/B,QAAQ;IACI;IACJ;IACE;IACK;IACf,EAZK,EAYL;IAEJ;EACE,CAAA"}

package/dist/chunks/{ToolButton-9QzJCmuM.js → ToolButton-rzqlFlAc.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./Tooltip-C4YBczLq.js";
+import { n as e, r as t } from "./Tooltip-9XiJF937.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Focusable as i } from "react-aria-components";
 var a = {
@@ -16,7 +16,7 @@ function o(o) {
 		u && a.active,
 		_
 	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ r(e, {
+	return /* @__PURE__ */ r(t, {
 		isDisabled: d,
 		children: [/* @__PURE__ */ n(i, {
 			isDisabled: d,
@@ -45,10 +45,10 @@ function o(o) {
 					})
 				]
 			})
-		}), /* @__PURE__ */ n(t, { children: v })]
+		}), /* @__PURE__ */ n(e, { children: v })]
 	});
 }
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=ToolButton-9QzJCmuM.js.map
+//# sourceMappingURL=ToolButton-rzqlFlAc.js.map

package/dist/chunks/{ToolButton-9QzJCmuM.js.map → ToolButton-rzqlFlAc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolButton-9QzJCmuM.js","names":[],"sources":["../../src/components/ToolButton/ToolButton.module.css","../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":[".button {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--wzl-space-1);\n  min-width: 44px;\n  padding: var(--wzl-space-3) var(--wzl-space-2);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n  font-family: inherit;\n  font-size: var(--wzl-font-size-xs);\n  line-height: 1.1;\n}\n.button:hover:not([disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n.button:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n.button.active {\n  background: var(--wzl-surface-pressed);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n.button[disabled] {\n  opacity: 0.4;\n}\n\n.icon { display: block; }\n.icon > svg { display: block; }\n.label { font-size: var(--wzl-font-size-xs); }\n.shortcut {\n  color: var(--wzl-fg-muted);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: var(--wzl-font-size-2xs);\n}\n","import type { KeyboardEvent, ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './ToolButton.module.css';\n\n/** Props for {@link ToolButton}. */\nexport interface ToolButtonProps {\n  /** Icon node (typically an SVG component). */\n  icon: ReactNode;\n  /** Human-readable label shown under the icon. */\n  label: string;\n  /** Optional shortcut hint (e.g. \"V\" or \"⌘Z\"). */\n  shortcut?: string;\n  /** Selected/active state — toggles the active visual treatment. */\n  active?: boolean;\n  /** Disabled state — passes through to the underlying button. */\n  disabled?: boolean;\n  /**\n   * When true, sets `aria-disabled=\"true\"` on the button without using the\n   * native `disabled` attribute. This keeps the button focusable and reachable\n   * by keyboard (roving-tabindex still applies) while marking it as ineligible\n   * to screen readers. The caller is responsible for making `onClick` a no-op.\n   */\n  ariaDisabled?: boolean;\n  /**\n   * Whether this button is the currently tabbable member of its toolbar.\n   * Toolbars use roving tabindex: exactly one button has `tabIndex=0` at\n   * a time; the rest are `-1`. Caller manages which.\n   */\n  tabbable?: boolean;\n  /** Click handler. */\n  onClick(): void;\n  /** Key handler for the underlying button — a toolbar's roving-tabindex\n   *  navigation attaches here. */\n  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;\n  /**\n   * Tooltip content. Defaults to `label` (plus `shortcut` if provided).\n   */\n  title?: string;\n  /** Additional class for the root button. */\n  className?: string;\n}\n\n/**\n * Generic icon-+-label toolbar button — building block for `ToolPalette`\n * and similar surfaces. Headless about layout direction (parent group\n * supplies flex direction via `ToolGroup`). Theme via `--wzl-*` tokens.\n */\nexport function ToolButton(props: ToolButtonProps) {\n  const {\n    icon, label, shortcut, active, disabled, ariaDisabled, tabbable,\n    onClick, onKeyDown, title, className,\n  } = props;\n  const resolvedTitle = title ?? (shortcut ? `${label} (${shortcut})` : label);\n  const cls = [s.button, active && s.active, className].filter(Boolean).join(' ');\n  return (\n    <TooltipTrigger isDisabled={disabled}>\n      <Focusable isDisabled={disabled}>\n        <button\n          type=\"button\"\n          tabIndex={tabbable ? 0 : -1}\n          className={cls}\n          aria-current={active ? 'true' : undefined}\n          aria-disabled={ariaDisabled ? 'true' : undefined}\n          disabled={disabled}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n        >\n          <span className={s.icon} aria-hidden=\"true\">{icon}</span>\n          <span className={s.label}>{label}</span>\n          {shortcut && <span className={s.shortcut}>{shortcut}</span>}\n        </button>\n      </Focusable>\n      <Tooltip>{resolvedTitle}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;ACgDA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EACJ,SAAM,UAAO,aAAU,WAAQ,aAAU,iBAAc,aACvD,YAAS,cAAW,UAAO,iBACzB,GACE,IAAgB,MAAU,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK,IAChE,IAAM;EAAC,EAAE;EAAQ,KAAU,EAAE;EAAQ;EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAC/E,QACE,kBAAC,GAAD;EAAgB,YAAY;YAA5B,CACE,kBAAC,GAAD;GAAW,YAAY;aACrB,kBAAC,UAAD;IACE,MAAK;IACL,UAAU,IAAW,IAAI;IACzB,WAAW;IACX,gBAAc,IAAS,SAAS,KAAA;IAChC,iBAAe,IAAe,SAAS,KAAA;IAC7B;IACD;IACE;cARb;KAUE,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAM,eAAY;gBAAQ;MAAY,CAAA;KACzD,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAQ;MAAa,CAAA;KACvC,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAW;MAAgB,CAAA;KACpD;;GACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAwB,CAAA,CACnB"}
+{"version":3,"file":"ToolButton-rzqlFlAc.js","names":[],"sources":["../../src/components/ToolButton/ToolButton.module.css","../../src/components/ToolButton/ToolButton.tsx"],"sourcesContent":[".button {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: var(--wzl-space-1);\n  min-width: 44px;\n  padding: var(--wzl-space-3) var(--wzl-space-2);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n  font-family: inherit;\n  font-size: var(--wzl-font-size-xs);\n  line-height: 1.1;\n}\n.button:hover:not([disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n.button:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n.button.active {\n  background: var(--wzl-surface-pressed);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n.button[disabled] {\n  opacity: 0.4;\n}\n\n.icon { display: block; }\n.icon > svg { display: block; }\n.label { font-size: var(--wzl-font-size-xs); }\n.shortcut {\n  color: var(--wzl-fg-muted);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: var(--wzl-font-size-2xs);\n}\n","import type { KeyboardEvent, ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './ToolButton.module.css';\n\n/** Props for {@link ToolButton}. */\nexport interface ToolButtonProps {\n  /** Icon node (typically an SVG component). */\n  icon: ReactNode;\n  /** Human-readable label shown under the icon. */\n  label: string;\n  /** Optional shortcut hint (e.g. \"V\" or \"⌘Z\"). */\n  shortcut?: string;\n  /** Selected/active state — toggles the active visual treatment. */\n  active?: boolean;\n  /** Disabled state — passes through to the underlying button. */\n  disabled?: boolean;\n  /**\n   * When true, sets `aria-disabled=\"true\"` on the button without using the\n   * native `disabled` attribute. This keeps the button focusable and reachable\n   * by keyboard (roving-tabindex still applies) while marking it as ineligible\n   * to screen readers. The caller is responsible for making `onClick` a no-op.\n   */\n  ariaDisabled?: boolean;\n  /**\n   * Whether this button is the currently tabbable member of its toolbar.\n   * Toolbars use roving tabindex: exactly one button has `tabIndex=0` at\n   * a time; the rest are `-1`. Caller manages which.\n   */\n  tabbable?: boolean;\n  /** Click handler. */\n  onClick(): void;\n  /** Key handler for the underlying button — a toolbar's roving-tabindex\n   *  navigation attaches here. */\n  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;\n  /**\n   * Tooltip content. Defaults to `label` (plus `shortcut` if provided).\n   */\n  title?: string;\n  /** Additional class for the root button. */\n  className?: string;\n}\n\n/**\n * Generic icon-+-label toolbar button — building block for `ToolPalette`\n * and similar surfaces. Headless about layout direction (parent group\n * supplies flex direction via `ToolGroup`). Theme via `--wzl-*` tokens.\n */\nexport function ToolButton(props: ToolButtonProps) {\n  const {\n    icon, label, shortcut, active, disabled, ariaDisabled, tabbable,\n    onClick, onKeyDown, title, className,\n  } = props;\n  const resolvedTitle = title ?? (shortcut ? `${label} (${shortcut})` : label);\n  const cls = [s.button, active && s.active, className].filter(Boolean).join(' ');\n  return (\n    <TooltipTrigger isDisabled={disabled}>\n      <Focusable isDisabled={disabled}>\n        <button\n          type=\"button\"\n          tabIndex={tabbable ? 0 : -1}\n          className={cls}\n          aria-current={active ? 'true' : undefined}\n          aria-disabled={ariaDisabled ? 'true' : undefined}\n          disabled={disabled}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n        >\n          <span className={s.icon} aria-hidden=\"true\">{icon}</span>\n          <span className={s.label}>{label}</span>\n          {shortcut && <span className={s.shortcut}>{shortcut}</span>}\n        </button>\n      </Focusable>\n      <Tooltip>{resolvedTitle}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;ACgDA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EACJ,SAAM,UAAO,aAAU,WAAQ,aAAU,iBAAc,aACvD,YAAS,cAAW,UAAO,iBACzB,GACE,IAAgB,MAAU,IAAW,GAAG,EAAM,IAAI,EAAS,KAAK,IAChE,IAAM;EAAC,EAAE;EAAQ,KAAU,EAAE;EAAQ;EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAC/E,QACE,kBAAC,GAAD;EAAgB,YAAY;YAA5B,CACE,kBAAC,GAAD;GAAW,YAAY;aACrB,kBAAC,UAAD;IACE,MAAK;IACL,UAAU,IAAW,IAAI;IACzB,WAAW;IACX,gBAAc,IAAS,SAAS,KAAA;IAChC,iBAAe,IAAe,SAAS,KAAA;IAC7B;IACD;IACE;cARb;KAUE,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAM,eAAY;gBAAQ;MAAY,CAAA;KACzD,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAQ;MAAa,CAAA;KACvC,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAE;gBAAW;MAAgB,CAAA;KACpD;;GACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAU,GAAwB,CAAA,CACnB"}

package/dist/chunks/{ToolGroup-BJiDrH_i.js → ToolGroup-4bUBV5k6.js}

@@ -22,4 +22,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=ToolGroup-BJiDrH_i.js.map
+//# sourceMappingURL=ToolGroup-4bUBV5k6.js.map

package/dist/chunks/{ToolGroup-BJiDrH_i.js.map → ToolGroup-4bUBV5k6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolGroup-BJiDrH_i.js","names":[],"sources":["../../src/components/ToolGroup/ToolGroup.module.css","../../src/components/ToolGroup/ToolGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n}\n.group.horizontal {\n  flex-direction: row;\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolGroup.module.css';\n\n/** Props for {@link ToolGroup}. */\nexport interface ToolGroupProps {\n  children: ReactNode;\n  /**\n   * Lays children along an axis. `'vertical'` (default) stacks them in\n   * a column; `'horizontal'` lays them in a row. Independent of the\n   * parent toolbar's own orientation.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Optional `data-group` attribute — useful for parents that want to\n   * select the group from CSS or tests by name.\n   */\n  groupKey?: string;\n  /** Accessible name for the group (rendered as `aria-label`). */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * Generic toolbar group — a `role=\"group\"` flex container that arranges\n * `<ToolButton>`s (or any children) along a chosen axis. No visual chrome\n * beyond layout; theming lives on the buttons.\n */\nexport function ToolGroup(props: ToolGroupProps) {\n  const { children, orientation = 'vertical', groupKey, ariaLabel, className } = props;\n  const cls = [s.group, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"group\" data-group={groupKey} aria-label={ariaLabel}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AC2BA,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,aAAU,iBAAc,YAAY,aAAU,cAAW,iBAAc;AAG/E,QACE,kBAAC,OAAD;EAAK,WAHK;GAAC,EAAE;GAAO,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC3E,OAAO,QAAQ,CAAC,KAAK,IAEN;EAAK,MAAK;EAAQ,cAAY;EAAU,cAAY;EACjE;EACG,CAAA"}
+{"version":3,"file":"ToolGroup-4bUBV5k6.js","names":[],"sources":["../../src/components/ToolGroup/ToolGroup.module.css","../../src/components/ToolGroup/ToolGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n}\n.group.horizontal {\n  flex-direction: row;\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolGroup.module.css';\n\n/** Props for {@link ToolGroup}. */\nexport interface ToolGroupProps {\n  children: ReactNode;\n  /**\n   * Lays children along an axis. `'vertical'` (default) stacks them in\n   * a column; `'horizontal'` lays them in a row. Independent of the\n   * parent toolbar's own orientation.\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /**\n   * Optional `data-group` attribute — useful for parents that want to\n   * select the group from CSS or tests by name.\n   */\n  groupKey?: string;\n  /** Accessible name for the group (rendered as `aria-label`). */\n  ariaLabel?: string;\n  className?: string;\n}\n\n/**\n * Generic toolbar group — a `role=\"group\"` flex container that arranges\n * `<ToolButton>`s (or any children) along a chosen axis. No visual chrome\n * beyond layout; theming lives on the buttons.\n */\nexport function ToolGroup(props: ToolGroupProps) {\n  const { children, orientation = 'vertical', groupKey, ariaLabel, className } = props;\n  const cls = [s.group, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"group\" data-group={groupKey} aria-label={ariaLabel}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AC2BA,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,aAAU,iBAAc,YAAY,aAAU,cAAW,iBAAc;AAG/E,QACE,kBAAC,OAAD;EAAK,WAHK;GAAC,EAAE;GAAO,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC3E,OAAO,QAAQ,CAAC,KAAK,IAEN;EAAK,MAAK;EAAQ,cAAY;EAAU,cAAY;EACjE;EACG,CAAA"}

package/dist/chunks/{ToolOptionsBar-CAM6RcUH.js → ToolOptionsBar-BF3TNXA3.js}

@@ -1,4 +1,4 @@
-import { a as e, c as t, d as n, u as r } from "./model-13kZ_-mE.js";
+import { a as e, c as t, d as n, u as r } from "./model-BQMvTLnW.js";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 var s = {
 	root: "_root_17mjm_13",
@@ -82,4 +82,4 @@ function f(e, t, n, i, a, o) {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=ToolOptionsBar-CAM6RcUH.js.map
+//# sourceMappingURL=ToolOptionsBar-BF3TNXA3.js.map

package/dist/chunks/{ToolOptionsBar-CAM6RcUH.js.map → ToolOptionsBar-BF3TNXA3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolOptionsBar-CAM6RcUH.js","names":[],"sources":["../../src/components/ToolOptionsBar/ToolOptionsBar.module.css","../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"sourcesContent":["/* Horizontal strip reserved above the workspace for contextual tool\n   options. Fixed height so mounting/unmounting content never resizes\n   the workspace beneath it — that's the whole reason this row exists\n   as permanent chrome rather than an on-demand overlay.\n\n   Overflow: when controls exceed the available width, `.controls`\n   scrolls horizontally rather than wrapping (which would grow the row\n   and defeat the fixed-height guarantee above) or clipping (which\n   would hide controls with no way to reach them). A flyout/long-press\n   affordance was considered and rejected — grouped, directly visible\n   layouts are preferred in this repo. */\n\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 var(--wzl-space-4);\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  color: var(--wzl-fg);\n  overflow: hidden;\n}\n\n.label {\n  flex: 0 0 auto;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n}\n\n/* Firefox gets a thin scrollbar for free via `scrollbar-width` above.\n * Chromium/WebKit need it spelled out — on a classic (non-overlay)\n * scrollbar theme (default on Windows Chrome/Edge), an unstyled\n * horizontal scrollbar is ~15-17px tall and renders *inside* this box,\n * clipping/off-centering the row's controls. That would reintroduce the\n * exact height instability the scroll-over-wrap overflow choice above\n * exists to avoid — just at the row's inner edge instead of its outer\n * one. Pin it thin and out of the way instead. */\n.controls::-webkit-scrollbar {\n  height: 4px;\n}\n.controls::-webkit-scrollbar-track {\n  background: transparent;\n}\n.controls::-webkit-scrollbar-thumb {\n  background: var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n/* A schema-drawn control sits on the line as-is; the cell exists only to keep\n   it from being squeezed by the row's flex context. */\n.cell {\n  display: flex;\n  align-items: center;\n  flex: none;\n}\n\n.cellLabel {\n  flex: none;\n  margin-right: var(--wzl-space-2);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n/* Fields are read beside their label on one line, so they carry only the\n   digits they need rather than the panel's column width. */\n.controls {\n  --wzl-number-field-width: 5ch;\n}\n\n/* The strip decides how much room a control gets, because its budget is one\n   line rather than a column: a field carries the digits it needs and an\n   opacity track stops short of pushing its neighbours off the end. Both are\n   the panel's widths otherwise, which are sized for a two-column grid. */\n.cell input[type='text'] {\n  inline-size: var(--wzl-number-field-width, 5ch);\n}\n\n.cell input[type='range'] {\n  inline-size: 64px;\n  flex: none;\n}\n","import type { ReactNode } from 'react';\nimport type { ToolPrefGroup, ToolPrefLeaf } from '@weasel-js/core';\nimport {\n  renderBuiltin,\n  renderCells,\n  type LeafCell,\n  type PropertyRenderContext,\n  type PropertyRenderer,\n} from '../SelectionPanel/renderLeaf';\nimport { isGroup, pairRows, type PanelLeaf, type PanelRow } from '../SelectionPanel/model';\nimport s from './ToolOptionsBar.module.css';\n\n/** Props for {@link ToolOptionsBar}. */\nexport interface ToolOptionsBarProps {\n  /**\n   * Context label for the row — e.g. the active tool's name. Rendered\n   * before the children and doubles as the toolbar's `aria-label`. Omit\n   * it and the row still renders (it's a permanently reserved slot), just\n   * without an accessible name.\n   *\n   * Using `label` for both the visible text and `aria-label` means a\n   * screen reader announces it twice when landing on the toolbar (\"Text,\n   * toolbar\", then \"Text\" again when browsing into the visible span).\n   * `aria-labelledby` would avoid the echo at the cost of id plumbing and\n   * an awkward no-`id`-to-point-at case when `label` is omitted. The\n   * double-announcement is common enough for labeled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  /**\n   * The active tool's options. Leaves draw through the same leaf → control\n   * mapping `SelectionPanel` uses, so a kind gets its control decided in one\n   * place; groups organize without drawing, since the bar is one line.\n   */\n  schema?: ToolPrefGroup;\n  /** Each leaf's value, keyed by dotted path. A path with no entry is unset. */\n  values?: Readonly<Record<string, unknown>>;\n  /** A leaf edit, as the dotted path it was declared at and its new value. */\n  onChange?: (path: string, value: unknown) => void;\n  /** Paths whose sources disagree — drawn as the control's mixed state. */\n  mixed?: ReadonlySet<string>;\n  /** Control overrides, by dotted path or by leaf kind, as the panel takes. */\n  renderers?: Record<string, PropertyRenderer>;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool options.\n * Given a `schema` it draws the active tool's options itself; the children\n * slot stays open for a tenant that is not a tool's options at all, such as\n * loupe controls.\n *\n * The row always renders, even empty, because the app reserves its height\n * permanently rather than mounting it on demand — mounting mid-edit would\n * resize the workspace under a canvas that's sized to the page.\n *\n * `role=\"toolbar\"` without roving tabindex: the ARIA authoring practices\n * expect arrow-key roving focus across a toolbar's items, but a bar of\n * compound controls (`NumberField`, `Select`, `ColorField`) must leave the\n * arrow keys to them — they edit their own value with them. That is true of\n * schema-drawn controls as much as of arbitrary children, so the bar keeps\n * plain DOM tab order and `useRovingTabIndex` documents this as its opt-out.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, schema, values, onChange, mixed, renderers, children, className } = props;\n  const cls = [s.root, className].filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={label}>\n      {label !== undefined && <span className={s.label}>{label}</span>}\n      <div className={s.controls}>\n        {schema !== undefined &&\n          barRows(schema).map((row) => (\n            <BarRow\n              key={row.leaves[0]!.path}\n              row={row}\n              values={values}\n              mixed={mixed}\n              renderers={renderers}\n              onChange={onChange}\n            />\n          ))}\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * The schema's visible leaves as rows, addressed by dotted path. Groups are\n * organizational here — a bar is one line, so a nested group contributes its\n * leaves and no chrome — but its path segment still names them, so a leaf\n * reads back at the path the tool declared it at.\n */\nfunction barRows(schema: ToolPrefGroup): PanelRow[] {\n  const leaves: PanelLeaf[] = [];\n  const collect = (group: ToolPrefGroup, prefix: string): void => {\n    for (const [key, child] of Object.entries(group.children)) {\n      const path = prefix === '' ? key : `${prefix}.${key}`;\n      if (isGroup(child)) collect(child, path);\n      else if (child.hidden !== true) leaves.push({ path, leaf: child });\n    }\n  };\n  collect(schema, '');\n  return pairRows(leaves);\n}\n\n/** One row of the bar: a single control, or a run of flags as one bar. */\nfunction BarRow({\n  row,\n  values,\n  mixed,\n  renderers,\n  onChange,\n}: {\n  row: PanelRow;\n  values: Readonly<Record<string, unknown>> | undefined;\n  mixed: ReadonlySet<string> | undefined;\n  renderers: Record<string, PropertyRenderer> | undefined;\n  onChange: ((path: string, value: unknown) => void) | undefined;\n}) {\n  // The bar draws no row label, so a control carries its own name rather than\n  // the panel's qualified \"<pair> <leaf>\" — the run's bar carries the pair.\n  const cells = row.leaves.map((panelLeaf) =>\n    barCell(panelLeaf, panelLeaf.leaf.name, values, mixed, renderers, onChange),\n  );\n  return (\n    <>\n      {renderCells(cells, renderers).map((cell) => (\n        <span key={cell.key} className={s.cell}>\n          {needsLabel(cell.leaf) && (\n            <span className={s.cellLabel} aria-hidden=\"true\">\n              {cell.leaf.short ?? cell.leaf.name}\n            </span>\n          )}\n          {cell.content}\n        </span>\n      ))}\n    </>\n  );\n}\n\n/**\n * Whether a control needs telling from its neighbours in words.\n *\n * Only a bare value box does: a number or a string is a box of characters,\n * and two of them side by side are indistinguishable. Everything else shows\n * what it is — a swatch is a color, a font picker names the family, a flag\n * run and a segmented control label their own segments — so a word in front\n * would repeat what the control already says. `name` stays the accessible\n * name either way, so this costs a screen reader nothing.\n */\nfunction needsLabel(leaf: ToolPrefLeaf): boolean {\n  return leaf.kind === 'number' || leaf.kind === 'string';\n}\n\nfunction barCell(\n  panelLeaf: PanelLeaf,\n  ariaLabel: string,\n  values: Readonly<Record<string, unknown>> | undefined,\n  mixed: ReadonlySet<string> | undefined,\n  renderers: Record<string, PropertyRenderer> | undefined,\n  onChange: ((path: string, value: unknown) => void) | undefined,\n): LeafCell {\n  const { path, leaf } = panelLeaf;\n  const isMixed = mixed?.has(path) === true;\n  const ctx: PropertyRenderContext = {\n    path,\n    pref: leaf,\n    value: isMixed ? undefined : values?.[path],\n    mixed: isMixed,\n    unset: !isMixed && values?.[path] === undefined,\n    setValue: (v) => onChange?.(path, v),\n    valueAt: (p) => ({ value: values?.[p], mixed: mixed?.has(p) === true }),\n  };\n  return {\n    key: path,\n    leaf: leaf as ToolPrefLeaf,\n    ctx,\n    ariaLabel,\n    render: () => {\n      const custom = renderers?.[path] ?? renderers?.[leaf.kind];\n      return custom ? custom(ctx) : renderBuiltin(ctx, ariaLabel, renderers, path);\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;ACgEA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,WAAQ,WAAQ,aAAU,UAAO,cAAW,aAAU,iBAAc;AAEnF,QACE,kBAAC,OAAD;EAAK,WAFK,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAEnC;EAAK,MAAK;EAAU,cAAY;YAAhD,CACG,MAAU,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAQ;GAAa,CAAA,EAChE,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAW,KAAA,KACV,EAAQ,EAAO,CAAC,KAAK,MACnB,kBAAC,GAAD;IAEO;IACG;IACD;IACI;IACD;IACV,EANK,EAAI,OAAO,GAAI,KAMpB,CACF,EACH,EACG;KACF;;;AAUV,SAAS,EAAQ,GAAmC;CAClD,IAAM,IAAsB,EAAE,EACxB,KAAW,GAAsB,MAAyB;AAC9D,OAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,SAAS,EAAE;GACzD,IAAM,IAAO,MAAW,KAAK,IAAM,GAAG,EAAO,GAAG;AAChD,GAAI,EAAQ,EAAM,GAAE,EAAQ,GAAO,EAAK,GAC/B,EAAM,WAAW,MAAM,EAAO,KAAK;IAAE;IAAM,MAAM;IAAO,CAAC;;;AAItE,QADA,EAAQ,GAAQ,GAAG,EACZ,EAAS,EAAO;;AAIzB,SAAS,EAAO,EACd,QACA,WACA,UACA,cACA,eAOC;AAMD,QACE,kBAAA,GAAA,EAAA,UACG,EALS,EAAI,OAAO,KAAK,MAC5B,EAAQ,GAAW,EAAU,KAAK,MAAM,GAAQ,GAAO,GAAW,EAAS,CAI5D,EAAO,EAAU,CAAC,KAAK,MAClC,kBAAC,QAAD;EAAqB,WAAW,EAAE;YAAlC,CACG,EAAW,EAAK,KAAK,IACpB,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAW,eAAY;aACvC,EAAK,KAAK,SAAS,EAAK,KAAK;GACzB,CAAA,EAER,EAAK,QACD;IAPI,EAAK,IAOT,CACP,EACD,CAAA;;AAcP,SAAS,EAAW,GAA6B;AAC/C,QAAO,EAAK,SAAS,YAAY,EAAK,SAAS;;AAGjD,SAAS,EACP,GACA,GACA,GACA,GACA,GACA,GACU;CACV,IAAM,EAAE,SAAM,YAAS,GACjB,IAAU,GAAO,IAAI,EAAK,KAAK,IAC/B,IAA6B;EACjC;EACA,MAAM;EACN,OAAO,IAAU,KAAA,IAAY,IAAS;EACtC,OAAO;EACP,OAAO,CAAC,KAAW,IAAS,OAAU,KAAA;EACtC,WAAW,MAAM,IAAW,GAAM,EAAE;EACpC,UAAU,OAAO;GAAE,OAAO,IAAS;GAAI,OAAO,GAAO,IAAI,EAAE,KAAK;GAAM;EACvE;AACD,QAAO;EACL,KAAK;EACC;EACN;EACA;EACA,cAAc;GACZ,IAAM,IAAS,IAAY,MAAS,IAAY,EAAK;AACrD,UAAO,IAAS,EAAO,EAAI,GAAG,EAAc,GAAK,GAAW,GAAW,EAAK;;EAE/E"}
+{"version":3,"file":"ToolOptionsBar-BF3TNXA3.js","names":[],"sources":["../../src/components/ToolOptionsBar/ToolOptionsBar.module.css","../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"sourcesContent":["/* Horizontal strip reserved above the workspace for contextual tool\n   options. Fixed height so mounting/unmounting content never resizes\n   the workspace beneath it — that's the whole reason this row exists\n   as permanent chrome rather than an on-demand overlay.\n\n   Overflow: when controls exceed the available width, `.controls`\n   scrolls horizontally rather than wrapping (which would grow the row\n   and defeat the fixed-height guarantee above) or clipping (which\n   would hide controls with no way to reach them). A flyout/long-press\n   affordance was considered and rejected — grouped, directly visible\n   layouts are preferred in this repo. */\n\n.root {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 var(--wzl-space-4);\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  color: var(--wzl-fg);\n  overflow: hidden;\n}\n\n.label {\n  flex: 0 0 auto;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n}\n\n/* Firefox gets a thin scrollbar for free via `scrollbar-width` above.\n * Chromium/WebKit need it spelled out — on a classic (non-overlay)\n * scrollbar theme (default on Windows Chrome/Edge), an unstyled\n * horizontal scrollbar is ~15-17px tall and renders *inside* this box,\n * clipping/off-centering the row's controls. That would reintroduce the\n * exact height instability the scroll-over-wrap overflow choice above\n * exists to avoid — just at the row's inner edge instead of its outer\n * one. Pin it thin and out of the way instead. */\n.controls::-webkit-scrollbar {\n  height: 4px;\n}\n.controls::-webkit-scrollbar-track {\n  background: transparent;\n}\n.controls::-webkit-scrollbar-thumb {\n  background: var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n/* A schema-drawn control sits on the line as-is; the cell exists only to keep\n   it from being squeezed by the row's flex context. */\n.cell {\n  display: flex;\n  align-items: center;\n  flex: none;\n}\n\n.cellLabel {\n  flex: none;\n  margin-right: var(--wzl-space-2);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n/* Fields are read beside their label on one line, so they carry only the\n   digits they need rather than the panel's column width. */\n.controls {\n  --wzl-number-field-width: 5ch;\n}\n\n/* The strip decides how much room a control gets, because its budget is one\n   line rather than a column: a field carries the digits it needs and an\n   opacity track stops short of pushing its neighbours off the end. Both are\n   the panel's widths otherwise, which are sized for a two-column grid. */\n.cell input[type='text'] {\n  inline-size: var(--wzl-number-field-width, 5ch);\n}\n\n.cell input[type='range'] {\n  inline-size: 64px;\n  flex: none;\n}\n","import type { ReactNode } from 'react';\nimport type { ToolPrefGroup, ToolPrefLeaf } from '@weasel-js/core';\nimport {\n  renderBuiltin,\n  renderCells,\n  type LeafCell,\n  type PropertyRenderContext,\n  type PropertyRenderer,\n} from '../SelectionPanel/renderLeaf';\nimport { isGroup, pairRows, type PanelLeaf, type PanelRow } from '../SelectionPanel/model';\nimport s from './ToolOptionsBar.module.css';\n\n/** Props for {@link ToolOptionsBar}. */\nexport interface ToolOptionsBarProps {\n  /**\n   * Context label for the row — e.g. the active tool's name. Rendered\n   * before the children and doubles as the toolbar's `aria-label`. Omit\n   * it and the row still renders (it's a permanently reserved slot), just\n   * without an accessible name.\n   *\n   * Using `label` for both the visible text and `aria-label` means a\n   * screen reader announces it twice when landing on the toolbar (\"Text,\n   * toolbar\", then \"Text\" again when browsing into the visible span).\n   * `aria-labelledby` would avoid the echo at the cost of id plumbing and\n   * an awkward no-`id`-to-point-at case when `label` is omitted. The\n   * double-announcement is common enough for labeled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  /**\n   * The active tool's options. Leaves draw through the same leaf → control\n   * mapping `SelectionPanel` uses, so a kind gets its control decided in one\n   * place; groups organize without drawing, since the bar is one line.\n   */\n  schema?: ToolPrefGroup;\n  /** Each leaf's value, keyed by dotted path. A path with no entry is unset. */\n  values?: Readonly<Record<string, unknown>>;\n  /** A leaf edit, as the dotted path it was declared at and its new value. */\n  onChange?: (path: string, value: unknown) => void;\n  /** Paths whose sources disagree — drawn as the control's mixed state. */\n  mixed?: ReadonlySet<string>;\n  /** Control overrides, by dotted path or by leaf kind, as the panel takes. */\n  renderers?: Record<string, PropertyRenderer>;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool options.\n * Given a `schema` it draws the active tool's options itself; the children\n * slot stays open for a tenant that is not a tool's options at all, such as\n * loupe controls.\n *\n * The row always renders, even empty, because the app reserves its height\n * permanently rather than mounting it on demand — mounting mid-edit would\n * resize the workspace under a canvas that's sized to the page.\n *\n * `role=\"toolbar\"` without roving tabindex: the ARIA authoring practices\n * expect arrow-key roving focus across a toolbar's items, but a bar of\n * compound controls (`NumberField`, `Select`, `ColorField`) must leave the\n * arrow keys to them — they edit their own value with them. That is true of\n * schema-drawn controls as much as of arbitrary children, so the bar keeps\n * plain DOM tab order and `useRovingTabIndex` documents this as its opt-out.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, schema, values, onChange, mixed, renderers, children, className } = props;\n  const cls = [s.root, className].filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={label}>\n      {label !== undefined && <span className={s.label}>{label}</span>}\n      <div className={s.controls}>\n        {schema !== undefined &&\n          barRows(schema).map((row) => (\n            <BarRow\n              key={row.leaves[0]!.path}\n              row={row}\n              values={values}\n              mixed={mixed}\n              renderers={renderers}\n              onChange={onChange}\n            />\n          ))}\n        {children}\n      </div>\n    </div>\n  );\n}\n\n/**\n * The schema's visible leaves as rows, addressed by dotted path. Groups are\n * organizational here — a bar is one line, so a nested group contributes its\n * leaves and no chrome — but its path segment still names them, so a leaf\n * reads back at the path the tool declared it at.\n */\nfunction barRows(schema: ToolPrefGroup): PanelRow[] {\n  const leaves: PanelLeaf[] = [];\n  const collect = (group: ToolPrefGroup, prefix: string): void => {\n    for (const [key, child] of Object.entries(group.children)) {\n      const path = prefix === '' ? key : `${prefix}.${key}`;\n      if (isGroup(child)) collect(child, path);\n      else if (child.hidden !== true) leaves.push({ path, leaf: child });\n    }\n  };\n  collect(schema, '');\n  return pairRows(leaves);\n}\n\n/** One row of the bar: a single control, or a run of flags as one bar. */\nfunction BarRow({\n  row,\n  values,\n  mixed,\n  renderers,\n  onChange,\n}: {\n  row: PanelRow;\n  values: Readonly<Record<string, unknown>> | undefined;\n  mixed: ReadonlySet<string> | undefined;\n  renderers: Record<string, PropertyRenderer> | undefined;\n  onChange: ((path: string, value: unknown) => void) | undefined;\n}) {\n  // The bar draws no row label, so a control carries its own name rather than\n  // the panel's qualified \"<pair> <leaf>\" — the run's bar carries the pair.\n  const cells = row.leaves.map((panelLeaf) =>\n    barCell(panelLeaf, panelLeaf.leaf.name, values, mixed, renderers, onChange),\n  );\n  return (\n    <>\n      {renderCells(cells, renderers).map((cell) => (\n        <span key={cell.key} className={s.cell}>\n          {needsLabel(cell.leaf) && (\n            <span className={s.cellLabel} aria-hidden=\"true\">\n              {cell.leaf.short ?? cell.leaf.name}\n            </span>\n          )}\n          {cell.content}\n        </span>\n      ))}\n    </>\n  );\n}\n\n/**\n * Whether a control needs telling from its neighbours in words.\n *\n * Only a bare value box does: a number or a string is a box of characters,\n * and two of them side by side are indistinguishable. Everything else shows\n * what it is — a swatch is a color, a font picker names the family, a flag\n * run and a segmented control label their own segments — so a word in front\n * would repeat what the control already says. `name` stays the accessible\n * name either way, so this costs a screen reader nothing.\n */\nfunction needsLabel(leaf: ToolPrefLeaf): boolean {\n  return leaf.kind === 'number' || leaf.kind === 'string';\n}\n\nfunction barCell(\n  panelLeaf: PanelLeaf,\n  ariaLabel: string,\n  values: Readonly<Record<string, unknown>> | undefined,\n  mixed: ReadonlySet<string> | undefined,\n  renderers: Record<string, PropertyRenderer> | undefined,\n  onChange: ((path: string, value: unknown) => void) | undefined,\n): LeafCell {\n  const { path, leaf } = panelLeaf;\n  const isMixed = mixed?.has(path) === true;\n  const ctx: PropertyRenderContext = {\n    path,\n    pref: leaf,\n    value: isMixed ? undefined : values?.[path],\n    mixed: isMixed,\n    unset: !isMixed && values?.[path] === undefined,\n    setValue: (v) => onChange?.(path, v),\n    valueAt: (p) => ({ value: values?.[p], mixed: mixed?.has(p) === true }),\n  };\n  return {\n    key: path,\n    leaf: leaf as ToolPrefLeaf,\n    ctx,\n    ariaLabel,\n    render: () => {\n      const custom = renderers?.[path] ?? renderers?.[leaf.kind];\n      return custom ? custom(ctx) : renderBuiltin(ctx, ariaLabel, renderers, path);\n    },\n  };\n}\n"],"mappings":";;;;;;;;;;;ACgEA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,WAAQ,WAAQ,aAAU,UAAO,cAAW,aAAU,iBAAc;AAEnF,QACE,kBAAC,OAAD;EAAK,WAFK,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAEnC;EAAK,MAAK;EAAU,cAAY;YAAhD,CACG,MAAU,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAQ;GAAa,CAAA,EAChE,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAW,KAAA,KACV,EAAQ,EAAO,CAAC,KAAK,MACnB,kBAAC,GAAD;IAEO;IACG;IACD;IACI;IACD;IACV,EANK,EAAI,OAAO,GAAI,KAMpB,CACF,EACH,EACG;KACF;;;AAUV,SAAS,EAAQ,GAAmC;CAClD,IAAM,IAAsB,EAAE,EACxB,KAAW,GAAsB,MAAyB;AAC9D,OAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,SAAS,EAAE;GACzD,IAAM,IAAO,MAAW,KAAK,IAAM,GAAG,EAAO,GAAG;AAChD,GAAI,EAAQ,EAAM,GAAE,EAAQ,GAAO,EAAK,GAC/B,EAAM,WAAW,MAAM,EAAO,KAAK;IAAE;IAAM,MAAM;IAAO,CAAC;;;AAItE,QADA,EAAQ,GAAQ,GAAG,EACZ,EAAS,EAAO;;AAIzB,SAAS,EAAO,EACd,QACA,WACA,UACA,cACA,eAOC;AAMD,QACE,kBAAA,GAAA,EAAA,UACG,EALS,EAAI,OAAO,KAAK,MAC5B,EAAQ,GAAW,EAAU,KAAK,MAAM,GAAQ,GAAO,GAAW,EAAS,CAI5D,EAAO,EAAU,CAAC,KAAK,MAClC,kBAAC,QAAD;EAAqB,WAAW,EAAE;YAAlC,CACG,EAAW,EAAK,KAAK,IACpB,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAW,eAAY;aACvC,EAAK,KAAK,SAAS,EAAK,KAAK;GACzB,CAAA,EAER,EAAK,QACD;IAPI,EAAK,IAOT,CACP,EACD,CAAA;;AAcP,SAAS,EAAW,GAA6B;AAC/C,QAAO,EAAK,SAAS,YAAY,EAAK,SAAS;;AAGjD,SAAS,EACP,GACA,GACA,GACA,GACA,GACA,GACU;CACV,IAAM,EAAE,SAAM,YAAS,GACjB,IAAU,GAAO,IAAI,EAAK,KAAK,IAC/B,IAA6B;EACjC;EACA,MAAM;EACN,OAAO,IAAU,KAAA,IAAY,IAAS;EACtC,OAAO;EACP,OAAO,CAAC,KAAW,IAAS,OAAU,KAAA;EACtC,WAAW,MAAM,IAAW,GAAM,EAAE;EACpC,UAAU,OAAO;GAAE,OAAO,IAAS;GAAI,OAAO,GAAO,IAAI,EAAE,KAAK;GAAM;EACvE;AACD,QAAO;EACL,KAAK;EACC;EACN;EACA;EACA,cAAc;GACZ,IAAM,IAAS,IAAY,MAAS,IAAY,EAAK;AACrD,UAAO,IAAS,EAAO,EAAI,GAAG,EAAc,GAAK,GAAW,GAAW,EAAK;;EAE/E"}