@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/ToggleBar--9As2PWG.js

@@ -1,75 +0,0 @@
-import { t as e } from "./useRovingTabIndex-Dkpf_KhN.js";
-import { jsx as t } from "react/jsx-runtime";
-import "react";
-var n = {
-	root: "_root_1jvhb_6",
-	segment: "_segment_1jvhb_28",
-	segmentSelected: "_segmentSelected_1jvhb_89",
-	segmentMixed: "_segmentMixed_1jvhb_148",
-	variant_minimal: "_variant_minimal_1jvhb_158",
-	size_sm: "_size_sm_1jvhb_167",
-	variant_flat: "_variant_flat_1jvhb_242"
-};
-//#endregion
-//#region src/components/ToggleBar/ToggleBar.tsx
-function r(r) {
-	let { items: i, ariaLabel: a, className: o, height: s, size: c, variant: l } = r, u = r.mode ?? "single", d = (e) => u === "multiple" ? r.value.includes(e) : r.value === e, f = (e) => {
-		if (u !== "multiple") return !1;
-		let t = r.mixedValues;
-		return t !== void 0 && t.includes(e) && !d(e);
-	}, p = (e) => () => {
-		let t = i[e];
-		if (!t.disabled) if (u === "multiple") {
-			let e = r.value, n = e.includes(t.value) ? e.filter((e) => e !== t.value) : [...e, t.value];
-			r.onChange(n);
-		} else {
-			if (r.value === t.value) {
-				r.allowDeselect && r.onChange(null);
-				return;
-			}
-			r.onChange(t.value);
-		}
-	}, m = u === "single" ? i.findIndex((e) => e.value === r.value) : -1, h = e({
-		items: i,
-		itemClassName: n.segment,
-		tabStopIndex: m >= 0 && !i[m].disabled ? m : void 0,
-		onNavigate: u === "single" ? (e) => r.onChange(i[e].value) : void 0,
-		onActivate: u === "multiple" ? (e) => p(e)() : void 0
-	}), g = s === void 0 ? void 0 : { "--tb-h": `${s}px` }, _ = [
-		n.root,
-		c && n[`size_${c}`],
-		l && n[`variant_${l}`],
-		o
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ t("div", {
-		ref: h.rootRef,
-		className: _,
-		role: u === "multiple" ? "group" : "radiogroup",
-		"aria-label": a,
-		style: g,
-		children: i.map((e, r) => {
-			let i = d(e.value), a = f(e.value), o = [
-				n.segment,
-				i && n.segmentSelected,
-				a && n.segmentMixed
-			].filter(Boolean).join(" ");
-			return /* @__PURE__ */ t("button", {
-				type: "button",
-				role: u === "multiple" ? void 0 : "radio",
-				"aria-checked": u === "multiple" ? void 0 : i,
-				"aria-pressed": u === "multiple" ? a ? "mixed" : i : void 0,
-				"aria-label": e.ariaLabel,
-				disabled: e.disabled,
-				tabIndex: h.tabIndexFor(r),
-				className: o,
-				onClick: p(r),
-				onKeyDown: h.onKeyDown(r),
-				children: e.label
-			}, e.value);
-		})
-	});
-}
-//#endregion
-export { r as t };
-
-//# sourceMappingURL=ToggleBar--9As2PWG.js.map

package/dist/chunks/ToggleBar--9As2PWG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToggleBar--9As2PWG.js","names":[],"sources":["../../src/components/ToggleBar/ToggleBar.module.css","../../src/components/ToggleBar/ToggleBar.tsx"],"sourcesContent":["/* Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--tb-h, var(--wzl-control-h, 24px));\n  padding: 2px;\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: var(--wzl-radius-pill);\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n  /* The track's stretch sizes a segment; without this, labkit's :where(button) height wins and overflows a small bar. */\n  height: auto;\n  padding: 0 12px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-normal);\n  font-size: var(--btn-fontsize, var(--wzl-font-size));\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n/* A glyph label is a fixed box, not text that can reflow: without this it is\n   the only thing in the segment flex can take width from, and three bars in\n   one property row squeeze it to nothing. The side padding drops with it —\n   8px around a 14px glyph is most of a segment. */\n.segment > svg {\n  flex: none;\n}\n\n.segment:has(> svg) {\n  padding: 0 5px;\n}\n\n.segment:first-child {\n  border-radius: var(--wzl-radius-pill) 0 0 var(--wzl-radius-pill);\n}\n\n.segment:last-child {\n  border-radius: 0 var(--wzl-radius-pill) var(--wzl-radius-pill) 0;\n}\n\n.segment:only-child {\n  border-radius: var(--wzl-radius-pill);\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Mixed segment (`aria-pressed=\"mixed\"`) — the sources disagree. Reads as a\n   deliberate third state rather than a dimmed \"on\": a flat accent wash with\n   none of the selected segment's gloss/cylinder treatment, so it can't be\n   mistaken for the glass lozenge at a glance. */\n.segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wzl-accent) 45%, transparent);\n}\n\n.segmentMixed:hover:not(:disabled) {\n  background: color-mix(in srgb, var(--wzl-accent) 32%, transparent);\n}\n\n.variant_minimal .segmentMixed {\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n  box-shadow: none;\n  color: var(--wzl-fg);\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 8px;\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `.size_sm .segment` outranks the glyph rule above on specificity, so a\n   small bar's glyph segments need the tight padding restated to stay\n   near-square rather than reading as wide plates. */\n.size_sm .segment:has(> svg) {\n  padding: 0 3px;\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  gap: 0;\n}\n\n.variant_minimal .segment {\n  padding: 0 6px;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  line-height: 1.4;\n  border-radius: 0;\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n/* Dividers between segments make the mutual-exclusion grouping visible\n   without a heavy track. Only the inner edges get a rule — the outer\n   border on `.variant_minimal` handles the perimeter. */\n.variant_minimal .segment + .segment {\n  border-left: 1px solid var(--wzl-border);\n}\n\n.variant_minimal .segment:first-child,\n.variant_minimal .segment:last-child,\n.variant_minimal .segment:only-child {\n  border-radius: 0;\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-hover);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg, var(--wzl-accent));\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n\n/* Flat variant — no track, no glass, no pill: each segment is its own\n   outlined cell. For property panels, where a bar sits in a row beside\n   inputs and the glass cylinder makes it the loudest thing on the surface. */\n.variant_flat {\n  padding: 0;\n  background: none;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: none;\n  overflow: visible;\n}\n\n.variant_flat .segment {\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 0;\n  /* Sunken, so an unselected cell sits below the panel and the selected one\n     reads as raised without needing the glass treatment back. */\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg-muted);\n}\n\n/* Adjacent cells share one rule rather than stacking two. */\n.variant_flat .segment + .segment {\n  margin-inline-start: -1px;\n}\n\n.variant_flat .segment:first-child {\n  border-start-start-radius: var(--wzl-radius-sm);\n  border-end-start-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:last-child {\n  border-start-end-radius: var(--wzl-radius-sm);\n  border-end-end-radius: var(--wzl-radius-sm);\n}\n\n.variant_flat .segment:hover:not(:disabled):not(.segmentSelected) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.variant_flat .segmentSelected {\n  background: var(--wzl-accent);\n  border-color: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  text-shadow: none;\n  box-shadow: none;\n  /* Its own border rather than the neighbour's overlapping edge. */\n  z-index: 1;\n}\n\n.variant_flat .segmentSelected::before {\n  content: none;\n}\n","import { type CSSProperties, type ReactElement, type ReactNode } from 'react';\nimport s from './ToggleBar.module.css';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\n\n/** One segment of a {@link ToggleBar}, identified by its `value`. */\nexport type ToggleBarItem<V extends string | number = string> = {\n  value: V;\n  label?: ReactNode;\n  ariaLabel?: string;\n  disabled?: boolean;\n};\n\n/** Segment height and type scale for a {@link ToggleBar}. */\nexport type ToggleBarSize = 'sm' | 'md';\n/** Visual treatment of a {@link ToggleBar}. */\nexport type ToggleBarVariant = 'default' | 'minimal' | 'flat';\n\ntype CommonProps = {\n  ariaLabel?: string;\n  className?: string;\n  height?: number;\n  /** Size variant. `sm` is ~60% of the default height with reduced padding\n   *  and font size — sized for dense surfaces like lab control panels. */\n  size?: ToggleBarSize;\n  /** Visual variant. `minimal` strips the pill track and glass treatment;\n   *  selection becomes a flat accent. For dense diagnostic surfaces. */\n  variant?: ToggleBarVariant;\n};\n\n/**\n * Props for {@link ToggleBar}, discriminated on `mode`. Single mode is\n * controlled by one value or `null`; multiple mode by an array, and only it\n * accepts `mixedValues`.\n */\nexport type ToggleBarProps<V extends string | number = string> =\n  | (CommonProps & {\n      mode?: 'single';\n      items: readonly ToggleBarItem<V>[];\n      value: V | null;\n      onChange: (next: V | null) => void;\n      allowDeselect?: boolean;\n    })\n  | (CommonProps & {\n      mode: 'multiple';\n      items: readonly ToggleBarItem<V>[];\n      value: readonly V[];\n      /**\n       * Values that are neither on nor off — the sources this bar\n       * aggregates disagree (a text range that is bold in part of it, a\n       * multi-selection whose nodes differ). Rendered `aria-pressed=\"mixed\"`,\n       * the ARIA tri-state a toggle button actually has, rather than\n       * `SelectionPanel`'s reduced-opacity-plus-`title` workaround for\n       * `Switch`, which has no indeterminate state to render.\n       *\n       * `value` wins where the two lists overlap, so a caller that can't\n       * cheaply keep them disjoint doesn't get an ambiguous segment.\n       *\n       * Clicking a mixed segment turns it fully **on**, matching the\n       * everywhere-else convention (and `toggleFlagInRange`'s rule for a\n       * partially-styled text range) that a mixed toggle resolves toward\n       * the affirmative rather than clearing.\n       */\n      mixedValues?: readonly V[];\n      onChange: (next: V[]) => void;\n    });\n\n/**\n * Segmented control for choosing among a fixed set of values — one of them\n * (`mode: 'single'`, the default) or any number (`mode: 'multiple'`).\n *\n * Single mode ignores a click on the already-selected segment unless\n * `allowDeselect` is set. Arrow keys move focus without changing the value;\n * Space and Enter commit.\n */\nexport function ToggleBar<V extends string | number = string>(props: ToggleBarProps<V>): ReactElement {\n  const { items, ariaLabel, className, height, size, variant } = props;\n  const mode = props.mode ?? 'single';\n\n  const isSelected = (value: V): boolean => {\n    if (mode === 'multiple') return (props.value as readonly V[]).includes(value);\n    return (props.value as V | null) === value;\n  };\n\n  /** Mixed only in multiple mode, and only where `value` doesn't already\n   *  claim the segment. Single mode has nothing to be mixed about — its\n   *  aggregate is one value or none. */\n  const isMixed = (value: V): boolean => {\n    if (mode !== 'multiple') return false;\n    const mixed = (props as { mixedValues?: readonly V[] }).mixedValues;\n    return mixed !== undefined && mixed.includes(value) && !isSelected(value);\n  };\n\n  const handleClick = (index: number) => () => {\n    const item = items[index];\n    if (item.disabled) return;\n    if (mode === 'multiple') {\n      const current = props.value as readonly V[];\n      const next = current.includes(item.value)\n        ? current.filter(v => v !== item.value)\n        : [...current, item.value];\n      (props.onChange as (n: V[]) => void)(next);\n    } else {\n      const current = props.value as V | null;\n      if (current === item.value) {\n        if ((props as { allowDeselect?: boolean }).allowDeselect) {\n          (props.onChange as (n: V | null) => void)(null);\n        }\n        return;\n      }\n      (props.onChange as (n: V | null) => void)(item.value);\n    }\n  };\n\n  const selectedIndex = mode === 'single'\n    ? items.findIndex(it => it.value === (props.value as V | null))\n    : -1;\n\n  const roving = useRovingTabIndex({\n    items,\n    itemClassName: s.segment,\n    // Single mode is a radiogroup: the tab stop is the current value, and\n    // arrow keys move the selection with the focus. Multiple mode is a set of\n    // independent toggles — focus alone moves, and Space/Enter flips.\n    tabStopIndex: selectedIndex >= 0 && !items[selectedIndex].disabled ? selectedIndex : undefined,\n    onNavigate: mode === 'single'\n      ? (index) => (props.onChange as (n: V | null) => void)(items[index].value)\n      : undefined,\n    onActivate: mode === 'multiple' ? (index) => handleClick(index)() : undefined,\n  });\n\n  const style: CSSProperties | undefined = height !== undefined\n    ? ({ ['--tb-h' as string]: `${height}px` } as CSSProperties)\n    : undefined;\n\n  const rootCls = [\n    s.root,\n    size && s[`size_${size}`],\n    variant && s[`variant_${variant}`],\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={rootCls}\n      role={mode === 'multiple' ? 'group' : 'radiogroup'}\n      aria-label={ariaLabel}\n      style={style}\n    >\n      {items.map((item, i) => {\n        const selected = isSelected(item.value);\n        const mixed = isMixed(item.value);\n        const cls = [s.segment, selected && s.segmentSelected, mixed && s.segmentMixed]\n          .filter(Boolean)\n          .join(' ');\n        return (\n          <button\n            key={item.value}\n            type=\"button\"\n            role={mode === 'multiple' ? undefined : 'radio'}\n            aria-checked={mode === 'multiple' ? undefined : selected}\n            aria-pressed={mode === 'multiple' ? (mixed ? 'mixed' : selected) : undefined}\n            aria-label={item.ariaLabel}\n            disabled={item.disabled}\n            tabIndex={roving.tabIndexFor(i)}\n            className={cls}\n            onClick={handleClick(i)}\n            onKeyDown={roving.onKeyDown(i)}\n          >\n            {item.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AC0EA,SAAgB,EAA8C,GAAwC;CACpG,IAAM,EAAE,UAAO,cAAW,cAAW,WAAQ,SAAM,eAAY,GACzD,IAAO,EAAM,QAAQ,UAErB,KAAc,MACd,MAAS,aAAoB,EAAM,MAAuB,SAAS,EAAM,GACrE,EAAM,UAAuB,GAMjC,KAAW,MAAsB;AACrC,MAAI,MAAS,WAAY,QAAO;EAChC,IAAM,IAAS,EAAyC;AACxD,SAAO,MAAU,KAAA,KAAa,EAAM,SAAS,EAAM,IAAI,CAAC,EAAW,EAAM;IAGrE,KAAe,YAAwB;EAC3C,IAAM,IAAO,EAAM;AACf,SAAK,SACT,KAAI,MAAS,YAAY;GACvB,IAAM,IAAU,EAAM,OAChB,IAAO,EAAQ,SAAS,EAAK,MAAM,GACrC,EAAQ,QAAO,MAAK,MAAM,EAAK,MAAM,GACrC,CAAC,GAAG,GAAS,EAAK,MAAM;AAC3B,KAAM,SAA8B,EAAK;SACrC;AAEL,OADgB,EAAM,UACN,EAAK,OAAO;AAC1B,IAAK,EAAsC,iBACxC,EAAM,SAAmC,KAAK;AAEjD;;AAED,KAAM,SAAmC,EAAK,MAAM;;IAInD,IAAgB,MAAS,WAC3B,EAAM,WAAU,MAAM,EAAG,UAAW,EAAM,MAAmB,GAC7D,IAEE,IAAS,EAAkB;EAC/B;EACA,eAAe,EAAE;EAIjB,cAAc,KAAiB,KAAK,CAAC,EAAM,GAAe,WAAW,IAAgB,KAAA;EACrF,YAAY,MAAS,YAChB,MAAW,EAAM,SAAmC,EAAM,GAAO,MAAM,GACxE,KAAA;EACJ,YAAY,MAAS,cAAc,MAAU,EAAY,EAAM,EAAE,GAAG,KAAA;EACrE,CAAC,EAEI,IAAmC,MAAW,KAAA,IAEhD,KAAA,IADC,EAAG,UAAqB,GAAG,EAAO,KAAK,EAGtC,IAAU;EACd,EAAE;EACF,KAAQ,EAAE,QAAQ;EAClB,KAAW,EAAE,WAAW;EACxB;EACD,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAE3B,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAM,MAAS,aAAa,UAAU;EACtC,cAAY;EACL;YAEN,EAAM,KAAK,GAAM,MAAM;GACtB,IAAM,IAAW,EAAW,EAAK,MAAM,EACjC,IAAQ,EAAQ,EAAK,MAAM,EAC3B,IAAM;IAAC,EAAE;IAAS,KAAY,EAAE;IAAiB,KAAS,EAAE;IAAa,CAC5E,OAAO,QAAQ,CACf,KAAK,IAAI;AACZ,UACE,kBAAC,UAAD;IAEE,MAAK;IACL,MAAM,MAAS,aAAa,KAAA,IAAY;IACxC,gBAAc,MAAS,aAAa,KAAA,IAAY;IAChD,gBAAc,MAAS,aAAc,IAAQ,UAAU,IAAY,KAAA;IACnE,cAAY,EAAK;IACjB,UAAU,EAAK;IACf,UAAU,EAAO,YAAY,EAAE;IAC/B,WAAW;IACX,SAAS,EAAY,EAAE;IACvB,WAAW,EAAO,UAAU,EAAE;cAE7B,EAAK;IACC,EAbF,EAAK,MAaH;IAEX;EACE,CAAA"}

package/dist/chunks/TokenPanel-BL9hlq7x.js

@@ -1,374 +0,0 @@
-import { t as e } from "./Button-CExdkQcU.js";
-import { n as t } from "./Disclosure-9UgDzc7Z.js";
-import { t as n } from "./Select-BMYVh10x.js";
-import { t as r } from "./Input-B9Vh7ASP.js";
-import { n as i } from "./NumberField-CQzS6TjF.js";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import { memo as c, useCallback as l, useMemo as u, useState as d } from "react";
-//#region src/components/TokenPanel/color.ts
-var f = /^#(?:[\da-f]{3,4}|[\da-f]{6}|[\da-f]{8})$/i, p = /^rgba?\(\s*(\d{1,3})[\s,]+(\d{1,3})[\s,]+(\d{1,3})\b/i, m = /^(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color|color-mix)\(.+\)$/i, h = new Set([
-	"transparent",
-	"currentcolor",
-	"black",
-	"white",
-	"gray",
-	"silver",
-	"red",
-	"orange",
-	"yellow",
-	"gold",
-	"lime",
-	"green",
-	"teal",
-	"cyan",
-	"blue",
-	"navy",
-	"purple",
-	"magenta",
-	"pink",
-	"brown"
-]);
-function g() {
-	return typeof CSS < "u" && typeof CSS.supports == "function" ? (e) => CSS.supports("color", e) : null;
-}
-function _(e, t = g()) {
-	let n = e.trim();
-	return !n || n.includes("var(") ? !1 : t ? t(n) : f.test(n) || m.test(n) || h.has(n.toLowerCase());
-}
-function v(e) {
-	if (f.test(e)) {
-		let t = e.slice(1).toLowerCase();
-		return `#${t.length <= 4 ? [...t.slice(0, 3)].map((e) => e + e).join("") : t.slice(0, 6)}`;
-	}
-	let t = p.exec(e);
-	return t ? `#${t.slice(1, 4).map((e) => Math.min(255, Number(e)).toString(16).padStart(2, "0")).join("")}` : null;
-}
-var y;
-function b(e) {
-	if (y === void 0) try {
-		y = document.createElement("canvas").getContext("2d");
-	} catch {
-		y = null;
-	}
-	if (!y) return null;
-	y.fillStyle = "#000000", y.fillStyle = e;
-	let t = String(y.fillStyle);
-	return y.fillStyle = "#ffffff", y.fillStyle = e, t === String(y.fillStyle) ? t : null;
-}
-function x(e) {
-	let t = e.trim(), n = v(t);
-	if (n) return n;
-	let r = typeof document > "u" ? null : b(t);
-	return r && r !== t ? v(r) : null;
-}
-var S = {
-	panel: "_panel_1vnnk_1",
-	section: "_section_1vnnk_7",
-	sectionHead: "_sectionHead_1vnnk_17",
-	sectionBody: "_sectionBody_1vnnk_26",
-	row: "_row_1vnnk_33",
-	family: "_family_1vnnk_34",
-	name: "_name_1vnnk_41",
-	edit: "_edit_1vnnk_50",
-	field: "_field_1vnnk_57",
-	number: "_number_1vnnk_63",
-	unit: "_unit_1vnnk_69",
-	swatchInput: "_swatchInput_1vnnk_76",
-	chip: "_chip_1vnnk_88",
-	curve: "_curve_1vnnk_97",
-	strip: "_strip_1vnnk_104",
-	swatch: "_swatch_1vnnk_76",
-	tight: "_tight_1vnnk_138"
-}, C = [
-	{
-		id: "color",
-		title: "Color"
-	},
-	{
-		id: "type",
-		title: "Type"
-	},
-	{
-		id: "size",
-		title: "Size"
-	},
-	{
-		id: "motion",
-		title: "Motion"
-	},
-	{
-		id: "depth",
-		title: "Depth"
-	},
-	{
-		id: "other",
-		title: "Other"
-	}
-], w = /^(?:font|tracking|leading|letter|line-height)/;
-function T(e) {
-	switch (e.type) {
-		case "color": return "color";
-		case "fontFamily":
-		case "fontWeight": return "type";
-		case "duration":
-		case "cubicBezier": return "motion";
-		case "shadow":
-		case "gradient": return "depth";
-		case "dimension":
-		case "number": return w.test(e.group) ? "type" : e.type === "number" && (e.group === "z" || e.group === "z-index") ? "depth" : "size";
-		default: return "other";
-	}
-}
-var E = String.raw`-?(?:\d+\.?\d*|\.\d+)`, D = RegExp(`^${E}(?:px|rem|em|%|ch|ex|lh|rlh|vh|vw|vmin|vmax|svh|lvh|dvh|cqw|cqh|pt|pc|cm|mm|in|q)$`, "i"), O = RegExp(`^${E}m?s$`), k = RegExp(`^${E}$`), A = RegExp(`^${E}(?:px|rem|em)?$`), j = RegExp(`^cubic-bezier\\(\\s*(${E})\\s*,\\s*(${E})\\s*,\\s*(${E})\\s*,\\s*(${E})\\s*\\)$`, "i"), M = /^(?:repeating-)?(?:linear|radial|conic)-gradient\(/i, N = /,(?![^(]*\))/, P = /[a-z-]+\([^)]*\)|\S+/gi;
-function F(e) {
-	return e.split(N).every((e) => {
-		let t = e.trim().replace(/^inset\s+/i, "").match(P) ?? [], n = t.filter((e) => A.test(e)), r = t.filter((e) => !A.test(e));
-		return n.length >= 2 && n.length <= 4 && r.length <= 1 && r.every((e) => _(e));
-	});
-}
-function I(e) {
-	let t = e.trim();
-	return t ? O.test(t) ? "duration" : D.test(t) ? "dimension" : k.test(t) ? "number" : j.test(t) ? "cubicBezier" : M.test(t) ? "gradient" : _(t) ? "color" : F(t) ? "shadow" : "string" : "string";
-}
-function L(e) {
-	let t = RegExp(`^(${E})([a-z%]*)$`, "i").exec(e.trim());
-	return t ? {
-		amount: Number(t[1]),
-		unit: t[2] ?? ""
-	} : null;
-}
-function R(e) {
-	let t = j.exec(e.trim());
-	if (!t) return null;
-	let [n, r, i, a] = t.slice(1, 5).map(Number);
-	return [
-		n,
-		r,
-		i,
-		a
-	];
-}
-//#endregion
-//#region src/components/TokenPanel/TokenPanel.tsx
-var z = [
-	"100",
-	"200",
-	"300",
-	"400",
-	"500",
-	"600",
-	"700",
-	"800",
-	"900"
-], B = {
-	maximumFractionDigits: 4,
-	useGrouping: !1
-};
-function V(e, t) {
-	let n = /* @__PURE__ */ new Map();
-	for (let t of e) t.type === "color" && n.set(t.group, (n.get(t.group) ?? 0) + 1);
-	let r = /* @__PURE__ */ new Map(), i = [];
-	for (let a of e) {
-		if (a.type !== "color" || (n.get(a.group) ?? 0) < t) {
-			i.push({
-				kind: "row",
-				token: a
-			});
-			continue;
-		}
-		let e = r.get(a.group);
-		e || (e = {
-			kind: "family",
-			group: a.group,
-			tokens: []
-		}, r.set(a.group, e), i.push(e)), e.tokens.push(a);
-	}
-	return i;
-}
-function H({ points: e, label: t }) {
-	let [n, r, i, a] = e, s = Math.min(0, 1 - r, 1 - a), c = Math.max(1, 1 - r, 1 - a);
-	return /* @__PURE__ */ o("svg", {
-		className: S.curve,
-		viewBox: `-0.1 ${s - .1} 1.2 ${c - s + .2}`,
-		role: "img",
-		"aria-label": t,
-		children: /* @__PURE__ */ o("path", {
-			d: `M0 1 C${n} ${1 - r} ${i} ${1 - a} 1 0`,
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: .08
-		})
-	});
-}
-function U({ token: e, set: t }) {
-	let { name: c, type: l, value: d } = e, f = `${c} value`, p = u(() => l === "color" ? x(d) : null, [l, d]);
-	if (l === "dimension" || l === "duration" || l === "number") {
-		let e = L(d);
-		if (e) return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(i, {
-			className: S.number,
-			"aria-label": f,
-			value: e.amount,
-			hideSteppers: !0,
-			formatOptions: B,
-			onChange: (n) => {
-				Number.isFinite(n) && t(`${n}${e.unit}`);
-			}
-		}), e.unit ? /* @__PURE__ */ o("span", {
-			className: S.unit,
-			children: e.unit
-		}) : null] });
-	}
-	if (l === "fontWeight") return /* @__PURE__ */ o(n, {
-		"aria-label": c,
-		width: "fit",
-		selectedKey: d,
-		options: (z.includes(d) ? z : [...z, d]).map((e) => ({
-			value: e,
-			label: e
-		})),
-		onSelectionChange: t
-	});
-	let m = l === "cubicBezier" ? R(d) : null;
-	return /* @__PURE__ */ s(a, { children: [m ? /* @__PURE__ */ o(H, {
-		points: m,
-		label: `${c} curve`
-	}) : null, /* @__PURE__ */ o(r, {
-		className: S.field,
-		"aria-label": f,
-		value: d,
-		onChange: t,
-		leadingAdornment: l === "color" ? p ? /* @__PURE__ */ o("input", {
-			type: "color",
-			className: S.swatchInput,
-			"aria-label": `${c} color`,
-			value: p,
-			onChange: (e) => t(e.target.value)
-		}) : /* @__PURE__ */ o("span", {
-			className: S.chip,
-			style: { "--token-color": d },
-			"aria-hidden": "true"
-		}) : void 0
-	})] });
-}
-var W = c(function({ token: t, onChange: n }) {
-	let r = l((e) => n(t.name, e), [n, t.name]);
-	return /* @__PURE__ */ s("div", {
-		className: S.row,
-		role: "group",
-		"aria-label": t.name,
-		children: [/* @__PURE__ */ o("span", {
-			className: S.name,
-			title: t.description || t.name,
-			children: t.name
-		}), /* @__PURE__ */ s("div", {
-			className: S.edit,
-			children: [/* @__PURE__ */ o(U, {
-				token: t,
-				set: r
-			}), t.overridden ? /* @__PURE__ */ o(e, {
-				variant: "ghost",
-				size: "sm",
-				ariaLabel: `Reset ${t.name}`,
-				onClick: () => n(t.name, null),
-				children: "Reset"
-			}) : null]
-		})]
-	});
-}, (e, t) => e.onChange === t.onChange && e.token.name === t.token.name && e.token.type === t.token.type && e.token.value === t.token.value && e.token.overridden === t.token.overridden && e.token.description === t.token.description);
-function G({ group: e, tokens: t, onChange: n }) {
-	let [r, i] = d(null), a = t.find((e) => e.name === r) ?? null;
-	return /* @__PURE__ */ s("div", {
-		className: S.family,
-		role: "group",
-		"aria-label": e,
-		children: [
-			/* @__PURE__ */ o("span", {
-				className: S.name,
-				children: e
-			}),
-			/* @__PURE__ */ o("div", {
-				className: S.strip,
-				children: t.map((e) => /* @__PURE__ */ o("button", {
-					type: "button",
-					className: S.swatch,
-					style: { "--token-color": e.value },
-					"aria-label": e.name,
-					"aria-pressed": e.name === r,
-					title: `${e.name}: ${e.value}`,
-					"data-overridden": e.overridden ? "" : void 0,
-					onClick: () => i((t) => t === e.name ? null : e.name)
-				}, e.name))
-			}),
-			a ? /* @__PURE__ */ o(W, {
-				token: a,
-				onChange: n
-			}) : null
-		]
-	});
-}
-function K({ title: e, open: n, onToggle: r, tokens: i, familySize: a, onChange: c }) {
-	let l = u(() => V(i, a), [i, a]);
-	return /* @__PURE__ */ s("section", {
-		className: S.section,
-		"aria-label": e,
-		children: [/* @__PURE__ */ o(t, {
-			className: S.sectionHead,
-			open: n,
-			onToggle: r,
-			label: e,
-			children: /* @__PURE__ */ o("span", {
-				"aria-hidden": "true",
-				children: e
-			})
-		}), n ? /* @__PURE__ */ o("div", {
-			className: S.sectionBody,
-			children: l.map((e) => e.kind === "row" ? /* @__PURE__ */ o(W, {
-				token: e.token,
-				onChange: c
-			}, e.token.name) : /* @__PURE__ */ o(G, {
-				group: e.group,
-				tokens: e.tokens,
-				onChange: c
-			}, `family:${e.group}`))
-		}) : null]
-	});
-}
-function q({ tokens: e, onChange: t, collapsed: n, onCollapsedChange: r, categorize: i = T, familySize: a = 3, density: s = "normal", className: c }) {
-	let [l, f] = d({}), p = n ?? l, m = u(() => {
-		let t = /* @__PURE__ */ new Map();
-		for (let n of e) {
-			let e = i(n);
-			t.set(e, [...t.get(e) ?? [], n]);
-		}
-		return t;
-	}, [e, i]);
-	return /* @__PURE__ */ o("div", {
-		className: [
-			S.panel,
-			s === "tight" && S.tight,
-			c
-		].filter(Boolean).join(" "),
-		children: C.map(({ id: e, title: i }) => {
-			let s = m.get(e);
-			if (!s) return null;
-			let c = !p[e];
-			return /* @__PURE__ */ o(K, {
-				title: i,
-				open: c,
-				onToggle: () => {
-					n === void 0 && f((t) => ({
-						...t,
-						[e]: c
-					})), r?.(e, c);
-				},
-				tokens: s,
-				familySize: a,
-				onChange: t
-			}, e);
-		})
-	});
-}
-//#endregion
-export { T as i, C as n, I as r, q as t };
-
-//# sourceMappingURL=TokenPanel-BL9hlq7x.js.map

package/dist/chunks/TokenPanel-BL9hlq7x.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TokenPanel-BL9hlq7x.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: 2px;\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  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/* 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: 2px;\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/* 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: 2px;\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\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 { Button } from '../Button';\nimport { DisclosureRow } from '../Disclosure';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { Select } from '../Select';\nimport { toHex } from './color';\nimport s from './TokenPanel.module.css';\nimport {\n  bezierPoints,\n  splitUnit,\n  TOKEN_CATEGORIES,\n  type TokenCategory,\n  type TokenEntry,\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  /** Files a token under a section. Defaults to `tokenCategory`. */\n  categorize?: (token: TokenEntry) => TokenCategory;\n  /** The fewest colors sharing a group that draw as one row of swatches. 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 Item = { kind: 'row'; token: TokenEntry } | { kind: 'family'; group: string; tokens: TokenEntry[] };\n\nfunction itemsOf(tokens: readonly TokenEntry[], familySize: number): Item[] {\n  const colors = new Map<string, number>();\n  for (const token of tokens) if (token.type === 'color') colors.set(token.group, (colors.get(token.group) ?? 0) + 1);\n  const families = new Map<string, Extract<Item, { kind: 'family' }>>();\n  const items: Item[] = [];\n  for (const token of tokens) {\n    if (token.type !== 'color' || (colors.get(token.group) ?? 0) < familySize) {\n      items.push({ kind: 'row', token });\n      continue;\n    }\n    let family = families.get(token.group);\n    if (!family) {\n      family = { kind: 'family', group: token.group, tokens: [] };\n      families.set(token.group, family);\n      items.push(family);\n    }\n    family.tokens.push(token);\n  }\n  return items;\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          <button\n            key={t.name}\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            title={`${t.name}: ${t.value}`}\n            data-overridden={t.overridden ? '' : undefined}\n            onClick={() => setPicked((current) => (current === t.name ? null : t.name))}\n          />\n        ))}\n      </div>\n      {token ? <TokenRow token={token} onChange={onChange} /> : null}\n    </div>\n  );\n}\n\nfunction Section({\n  title,\n  open,\n  onToggle,\n  tokens,\n  familySize,\n  onChange,\n}: {\n  title: string;\n  open: boolean;\n  onToggle: () => void;\n  tokens: readonly TokenEntry[];\n  familySize: number;\n  onChange: OnChange;\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            ) : (\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, 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  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            onChange={onChange}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/ToolButton-Dd-1T5aX.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolButton-Dd-1T5aX.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: 2px;\n  min-width: 44px;\n  padding: 6px 4px;\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-BBI-W-Gm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolGroup-BBI-W-Gm.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: 2px;\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-B2xPWzJf.js

@@ -1,27 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var n = {
-	root: "_root_cfvzx_13",
-	label: "_label_cfvzx_25",
-	controls: "_controls_cfvzx_6"
-};
-//#endregion
-//#region src/components/ToolOptionsBar/ToolOptionsBar.tsx
-function r(r) {
-	let { label: i, children: a, className: o } = r;
-	return /* @__PURE__ */ t("div", {
-		className: [n.root, o].filter(Boolean).join(" "),
-		role: "toolbar",
-		"aria-label": i,
-		children: [i !== void 0 && /* @__PURE__ */ e("span", {
-			className: n.label,
-			children: i
-		}), /* @__PURE__ */ e("div", {
-			className: n.controls,
-			children: a
-		})]
-	});
-}
-//#endregion
-export { r as t };
-
-//# sourceMappingURL=ToolOptionsBar-B2xPWzJf.js.map

package/dist/chunks/ToolOptionsBar-B2xPWzJf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ToolOptionsBar-B2xPWzJf.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: 8px;\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 8px;\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: 6px;\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","import type { ReactNode } from 'react';\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 labelled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool\n * options — its first tenant is the character controls a text tool\n * exposes while a caret range is active. Pure chrome: it renders an\n * optional label and a children slot, nothing else. It knows nothing\n * about text, or about any specific tool — any tool can fill it.\n *\n * The row always renders, even with no `label` and no `children`,\n * because the app reserves its height permanently rather than mounting\n * it on demand — mounting mid-edit would resize the workspace under a\n * 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 this\n * component doesn't own or know the shape of its children — they're\n * arbitrary, possibly compound controls (`NumberField`, `Select`,\n * `ColorField`) that already use arrow keys for their own value editing.\n * Imposing roving focus here would fight those controls' own key\n * handling. Tab order falls back to normal DOM order for now; revisit\n * once the first tenant's control set is concrete and a roving-focus\n * contract can be designed in coordination with those controls.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, 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}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AC8CA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,aAAU,iBAAc;AAEvC,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;GAAW;GAAe,CAAA,CACxC"}