@weasel-js/ui 1.5.1 → 1.5.2

package/dist/chunks/Select-BEope086.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select-BEope086.js","names":[],"sources":["../../src/components/Select/Select.module.css","../../src/components/Select/Select.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: var(--wzl-space-2);\n}\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  padding: 0 var(--wzl-space-3) 0 var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  /* Hooks, each defaulting to what the trigger already drew: the visible box is\n     this button, not the `.field` a consumer's `className` lands on, so a\n     surface that has to restyle it sets these rather than reaching in here. */\n  height: var(--wzl-select-h, var(--wzl-control-h));\n  border: var(--wzl-select-border, 1px solid var(--wzl-border));\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-select-fg, var(--wzl-fg));\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .trigger {\n  border-color: var(--wzl-danger);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  text-align: var(--wzl-select-align, left);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  /* The ellipsis needs `overflow: hidden`, which makes the line box a clip —\n     the trigger's `line-height: 1` would cut this text's ascenders and\n     descenders off. `normal` is the font's own leading, so it never can. */\n  line-height: normal;\n}\n\n/* `variant='bare'`: no box. The focus ring moves to an outline, since there is no border to recolor. */\n.bare .trigger {\n  padding: 0;\n  background: transparent;\n  border: var(--wzl-select-border, 1px solid transparent);\n}\n\n.bare .trigger[data-focus-visible] {\n  border-color: transparent;\n  box-shadow: none;\n  outline: 1px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.value[data-placeholder] {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n/* `indicator='underline'`: the value carries the affordance itself. A text\n   decoration rather than a border, so it hugs the word and adds nothing to the\n   box — the row's height and the value's width are the same either way. */\n.underlined .value {\n  text-decoration: underline;\n  text-decoration-style: dotted;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--wzl-fg-subtle);\n  text-underline-offset: 0.25em;\n  transition: text-decoration-color var(--wzl-motion-fast);\n}\n\n.underlined .trigger:hover .value,\n.underlined .trigger[data-focus-visible] .value {\n  text-decoration-style: solid;\n  text-decoration-color: var(--wzl-fg-muted);\n}\n\n.underlined[data-open] .value {\n  text-decoration-style: solid;\n  text-decoration-color: var(--wzl-accent);\n}\n\n.underlined .value[data-placeholder] {\n  text-decoration-color: var(--wzl-fg-subtle);\n}\n\n/* Nothing sits beside the value, so the row's gap and the padding kept for a\n   caret are the value's to spend. */\n.underlined .trigger,\n.plain .trigger {\n  gap: 0;\n}\n\n.bare.underlined .trigger,\n.bare.plain .trigger {\n  padding: 0;\n}\n\n/* A list that hangs below its trigger takes the trigger's width, so the two\n   read as one control. One that opens over it is already tied to the trigger\n   by its selected row — widening it to match would only add blank rule beside\n   the labels. `data-align` is set on exactly the ones that do. */\n.popover:not([data-align]) {\n  min-width: var(--trigger-width);\n}\n\n.popover {\n  max-height: inherit;\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: var(--wzl-space-2);\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.optionLabel {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* A trigger that sets its value against its end edge gets a list that does the\n   same, so the row that opened over the value stays on top of it. */\n.popover[data-align='end'] .option {\n  justify-content: flex-end;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.check {\n  width: 10px;\n  height: 10px;\n  flex: 0 0 auto;\n  opacity: 0;\n}\n\n.option[data-selected] .check {\n  opacity: 1;\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the value's grid\n   cell, so the trigger sizes to its widest option and never resizes on select. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .trigger {\n  display: grid;\n  grid-template-columns: auto auto;\n}\n\n.fit.underlined .trigger,\n.fit.plain .trigger {\n  grid-template-columns: auto;\n}\n\n.fit .value,\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .chevron {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  display: grid;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  white-space: nowrap;\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import {\n  Children,\n  isValidElement,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n  type RefObject,\n} from 'react';\nimport {\n  Select as RACSelect,\n  Label,\n  Button as RACButton,\n  SelectValue,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type SelectProps as RACSelectProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './Select.module.css';\n\n/** One option in a {@link Select}'s `options` list. */\nexport type SelectOption = {\n  value: string;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /**\n   * Plain-text form of `label`, for type-to-select and screen readers.\n   * Only needed when `label` isn't a bare string — a label built from\n   * elements has no text React Aria can read off it. A string label\n   * supplies this itself.\n   */\n  textValue?: string;\n};\n\ntype Key = string | number;\n\n/** How a {@link Select} trigger signals that it opens a list. */\nexport type SelectIndicator = 'chevron' | 'underline' | 'none';\n\n/** Where a {@link Select}'s list opens relative to its trigger. */\nexport type SelectPopup = 'over' | 'below';\n\n/**\n * Props for {@link Select}, on top of React Aria's `Select` props, with the\n * selection key narrowed to the option value type.\n */\nexport type SelectProps<T extends Key = string> = Omit<RACSelectProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  /** Either pass `options` for a quick render, or `children` for full control. */\n  options?: ReadonlyArray<SelectOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the select sits in.\n   * `'fit'` sizes the trigger to its widest option, so it neither swallows a\n   * toolbar's slack nor changes width as the selection moves.\n   */\n  width?: 'fill' | 'fit';\n  /** `'bare'` drops the box, for a select set in a row of other chrome such as a property row. */\n  variant?: 'field' | 'bare';\n  /**\n   * How the trigger says it opens a list. `'chevron'` draws the caret beside\n   * the value; `'underline'` marks the value itself, dotted at rest and solid\n   * while it is pointed at or open; `'none'` says nothing. Unset takes the\n   * variant's own: a boxed select shows the caret, a bare one — set in a row\n   * where 10px of caret is a tenth of the value's width — underlines.\n   */\n  indicator?: SelectIndicator;\n  /**\n   * Where the list opens. `'over'` (the default) puts the selected row on the\n   * trigger, its label in the trigger's own text column, so choosing what is\n   * already chosen moves nothing; `'below'` hangs it under the trigger.\n   */\n  popup?: SelectPopup;\n  /**\n   * Id for the trigger button. React Aria puts a plain `id` on the wrapper,\n   * which is not labelable, so an outer `<label for>` needs this to reach a\n   * control the label can actually own.\n   */\n  triggerId?: string;\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Form select wrapping React Aria's Select. Pass either `options` for a\n * quick declarative render or `children` of `<SelectItem>` for control over\n * each row.\n *\n * The selection key type is parameterized so consumers with a string-literal\n * union for `value` (e.g. `'r' | 'g' | 'b'`) get a typed `onSelectionChange`.\n */\nexport function Select<T extends Key = string>(props: SelectProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    width = 'fill',\n    variant = 'field',\n    indicator = variant === 'bare' ? 'underline' : 'chevron',\n    popup = 'over',\n    triggerId,\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const pressRef = useRef<Press | null>(null);\n  const [nudge, setNudge] = useState(NO_NUDGE);\n\n  return (\n    <RACSelect\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T) : undefined}\n      className={[\n        s.field,\n        width === 'fit' && s.fit,\n        variant === 'bare' && s.bare,\n        indicator === 'underline' && s.underlined,\n        indicator === 'none' && s.plain,\n        fieldClasses.root,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <RACButton\n        id={triggerId}\n        ref={triggerRef}\n        className={s.trigger}\n        onPointerDown={(e) => {\n          pressRef.current = { x: e.clientX, y: e.clientY, at: performance.now() };\n        }}\n      >\n        <SelectValue className={s.value}>\n          {({ defaultChildren, isPlaceholder }) =>\n            isPlaceholder ? (placeholder ?? defaultChildren) : defaultChildren\n          }\n        </SelectValue>\n        {width === 'fit' && (\n          <span className={s.sizer} aria-hidden=\"true\">\n            {placeholder !== undefined && <span>{placeholder}</span>}\n            {optionLabels(options, children).map((l, i) => (\n              <span key={i}>\n                <CheckMark />\n                {l}\n              </span>\n            ))}\n          </span>\n        )}\n        {indicator === 'chevron' && (\n          <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n            <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        )}\n      </RACButton>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      {/* `data-weasel-overlay` marks DOM that belongs to this control but\n          renders in a portal, outside the subtree the trigger sits in. Any\n          consumer reasoning about \"did focus leave my component?\" via\n          `closest()` gets the wrong answer without it — a text editor whose\n          font menu lives here would end its session the moment the menu is\n          clicked. */}\n      <RACPopover\n        className={s.popover}\n        data-weasel-overlay=\"\"\n        placement=\"bottom start\"\n        offset={popup === 'over' ? nudge.offset : undefined}\n        crossOffset={popup === 'over' ? nudge.crossOffset : undefined}\n        shouldFlip={popup !== 'over'}\n        {...portalProps}\n      >\n        {popup === 'over' && (\n          <AlignOverTrigger\n            triggerRef={triggerRef}\n            pressRef={pressRef}\n            applied={nudge}\n            onMeasure={setNudge}\n          />\n        )}\n        <RACListBox className={s.listbox}>\n          {options !== undefined\n            ? options.map((o) => (\n                <SelectItem\n                  key={String(o.value)}\n                  id={o.value}\n                  isDisabled={o.isDisabled}\n                  textValue={o.textValue}\n                >\n                  {o.label}\n                </SelectItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\ntype Nudge = { offset: number; crossOffset: number };\n\n/** Where and when the pointer went down on the trigger. */\ntype Press = { x: number; y: number; at: number };\n\n/** How long a press may last and how far it may travel and still be a click. */\nconst CLICK_MS = 500;\nconst CLICK_SLOP = 4;\n\nconst NO_NUDGE: Nudge = { offset: 0, crossOffset: 0 };\n\n/** React Aria's own resting place for a popover: hanging under its trigger. */\nconst BELOW: Nudge = { offset: 8, crossOffset: 0 };\n\n/**\n * Lands the list so its selected row covers the trigger: same text column,\n * same line. The shift is handed back as the popover's own `offset` and\n * `crossOffset` rather than a transform, so React Aria keeps owning the\n * position and still holds the list inside the viewport.\n *\n * Measuring needs the list rendered, and the correction is applied by setting\n * state from a layout effect — React finishes that pass before the browser\n * paints, so the list is never seen at the uncorrected position.\n */\nfunction AlignOverTrigger({\n  triggerRef,\n  pressRef,\n  applied,\n  onMeasure,\n}: {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  pressRef: RefObject<Press | null>;\n  applied: Nudge;\n  onMeasure: (next: Nudge) => void;\n}) {\n  // React Aria positions the popover but hands out no ref to it, so the\n  // element is reached from inside: this marker's own parent.\n  const markerRef = useRef<HTMLSpanElement>(null);\n  // A measurement that settles takes two passes — one to place the list, one\n  // to confirm. A cap is what keeps a list whose own placement changes its\n  // measurement from renegotiating forever.\n  const passes = useRef(0);\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const popover = markerRef.current?.closest<HTMLElement>('[data-weasel-overlay]');\n    if (!trigger || !popover || passes.current > 3) return;\n    const value = trigger.querySelector(`.${s.value}`);\n    // Nothing chosen yet, so there is no row that belongs over the trigger —\n    // and putting an arbitrary one under the pointer arms it. A select showing\n    // its placeholder hangs its list below, like any other dropdown.\n    const label = popover.querySelector(`[data-selected] .${s.optionLabel}`);\n    if (!value || !label) {\n      if (applied.offset !== BELOW.offset || applied.crossOffset !== BELOW.crossOffset)\n        onMeasure(BELOW);\n      return;\n    }\n\n    // The trigger's own text alignment decides which edge the two labels are\n    // matched on, and the list follows it so the selected row reads as the\n    // trigger with the others unfolded around it.\n    const align = getComputedStyle(trigger).getPropertyValue('--wzl-select-align').trim();\n    const toEnd = align === 'right' || align === 'end';\n    popover.dataset.align = toEnd ? 'end' : 'start';\n\n    // Stated against each element's own box rather than measured as a gap to\n    // close: React Aria repositions after this effect, so what is on screen\n    // now is a frame behind, and a correction read off it would be applied to\n    // a position that has already moved — the shift compounds every pass.\n    // `bottom start` puts the list's top at the trigger's bottom and their\n    // left edges together, so the two insets below are the whole story.\n    const box = popover.getBoundingClientRect();\n    const seat = trigger.getBoundingClientRect();\n    const row = label.getBoundingClientRect();\n    const shown = value.getBoundingClientRect();\n    const next = {\n      offset:\n        shown.top + shown.height / 2 - seat.top - (row.top + row.height / 2 - box.top) - seat.height,\n      crossOffset: toEnd\n        ? shown.right - seat.left - (row.right - box.left)\n        : shown.left - seat.left - (row.left - box.left),\n    };\n    if (Math.abs(next.offset - applied.offset) < 0.5 && Math.abs(next.crossOffset - applied.crossOffset) < 0.5)\n      return;\n    passes.current += 1;\n    onMeasure(next);\n  });\n\n  // The list covers the trigger, so the release that ends the click opening it\n  // lands on a row — and a row selects on release, which shuts the list again\n  // before it has been seen. A click is a press and a release in the same\n  // place: that one is the opening gesture and belongs to the trigger, and the\n  // list keeps every release after it. Press, hold, drag and release still\n  // picks a row, which is the gesture a list over its trigger is for.\n  useEffect(() => {\n    const doc = triggerRef.current?.ownerDocument;\n    if (!doc) return;\n    const onUp = (e: PointerEvent) => {\n      doc.removeEventListener('pointerup', onUp, true);\n      const press = pressRef.current;\n      if (!press || performance.now() - press.at > CLICK_MS) return;\n      if (Math.hypot(e.clientX - press.x, e.clientY - press.y) > CLICK_SLOP) return;\n      e.preventDefault();\n      e.stopPropagation();\n    };\n    doc.addEventListener('pointerup', onUp, true);\n    return () => doc.removeEventListener('pointerup', onUp, true);\n  }, [triggerRef, pressRef]);\n\n  return <span ref={markerRef} hidden />;\n}\n\n/* A selected row's mark travels into the trigger with its label, so a\n   `width='fit'` sizer has to allow for it too. */\nfunction CheckMark() {\n  return (\n    <svg className={s.check} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n      <polyline points=\"1.5,5 4,7.5 8.5,3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * The labels a `width='fit'` trigger measures itself against. In the children\n * form the label sits one element deep, inside a `SelectItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<SelectOption> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined) return options.map((o) => o.label);\n  return Children.toArray(children).map((c) =>\n    isValidElement<{ children?: ReactNode }>(c) ? c.props.children : c,\n  );\n}\n\n/** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */\nexport type SelectItemProps = Omit<RACListBoxItemProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Every row renders a check mark beside its label, so from React Aria's\n * side the children are never plain text and it can't derive the string\n * type-to-select and screen readers need — it warns once per row. A string\n * label already *is* that string, so derive it rather than making every\n * call site restate it; anything richer has to say what it reads as.\n */\nfunction textValueOf(children: ReactNode, explicit: string | undefined): string | undefined {\n  if (explicit !== undefined) return explicit;\n  return typeof children === 'string' || typeof children === 'number'\n    ? String(children)\n    : undefined;\n}\n\n/**\n * One row in a {@link Select}'s list, with a leading check mark when\n * selected. A string child supplies its own `textValue`; anything richer must\n * pass one so type-to-select and screen readers have something to read.\n */\nexport function SelectItem({ children, className, textValue, ...rest }: SelectItemProps) {\n  return (\n    <RACListBoxItem\n      {...rest}\n      textValue={textValueOf(children, textValue)}\n      className={[s.option, className].filter(Boolean).join(' ')}\n    >\n      <CheckMark />\n      {/* A box around the label, not just text: landing the list over its\n          trigger means measuring where this row's label sits. */}\n      <span className={s.optionLabel}>{children}</span>\n    </RACListBoxItem>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/SelectionPanel-CEbLS-0D.js

@@ -0,0 +1,102 @@
+import { d as e, f as t, i as n, l as r, n as i, o as a, r as o, t as s, u as c } from "./model-13kZ_-mE.js";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { asNodeId as f } from "@weasel-js/core";
+import { Fragment as p, useSyncExternalStore as m } from "react";
+//#region src/components/SelectionPanel/SelectionPanel.tsx
+var h = (e) => e.length === 0 ? e : e[0].toUpperCase() + e.slice(1);
+function g(i) {
+	let { scene: s, selection: c, properties: g, routing: v, renderers: y, kindLabel: b = h, emptyState: x = null, className: S } = i;
+	m(s.subscribe, s.getVersion, s.getVersion);
+	let C = c.current.map((e) => s.get(f(e))).filter((e) => e != null), w = C.map((e) => o(e, v)), T = C.map((e) => e.id).join(","), E = n(w, g);
+	if (C.length === 0) return /* @__PURE__ */ u("div", {
+		className: [t.root, S].filter(Boolean).join(" "),
+		children: x
+	});
+	let D = (e, t) => {
+		let [n, ...i] = e.path.split(".");
+		if (i.length === 0) return;
+		let a = c.current.map(f);
+		s.batch(`Edit ${e.leaf.name}`, () => {
+			for (let e of a) {
+				let a = s.get(e);
+				a && (n === "pose" ? s.setPose(e, r(a.pose, i, t)) : n === "data" && s.update(e, { data: r(a.data, i, t) }));
+			}
+		});
+	};
+	return /* @__PURE__ */ d("div", {
+		className: [t.root, S].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ u("header", {
+			className: t.header,
+			children: C.length === 1 ? /* @__PURE__ */ u("span", {
+				className: t.kind,
+				children: b(w[0])
+			}) : /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ d("span", {
+				className: t.kind,
+				children: [C.length, " selected"]
+			}), /* @__PURE__ */ u("span", {
+				className: t.breakdown,
+				children: a(w)
+			})] })
+		}), E.map((n) => {
+			let r = n.rows.map((t) => ({
+				row: t,
+				controls: e(t.leaves.map((e) => _(e, t.leaves.length > 1 ? `${t.label} ${e.leaf.name}` : e.leaf.name, C, y, D, T)), y)
+			})).filter(({ controls: e }) => e.length > 0);
+			return r.length === 0 ? null : /* @__PURE__ */ d("section", {
+				className: t.section,
+				children: [n.name !== "" && /* @__PURE__ */ u("h3", {
+					className: t.sectionTitle,
+					children: n.name
+				}), r.map(({ row: e, controls: r }) => e.leaves.length === 1 && e.leaves[0].leaf.block ? /* @__PURE__ */ d("div", { children: [n.name === "" && e.leaves[0].leaf.kind !== "object" && /* @__PURE__ */ u("h4", {
+					className: t.sectionTitle,
+					title: e.leaves[0].leaf.description,
+					children: e.leaves[0].leaf.name
+				}), r[0].content] }, e.leaves[0].path) : /* @__PURE__ */ d("div", {
+					className: t.row,
+					children: [/* @__PURE__ */ u("span", {
+						className: t.rowLabel,
+						title: e.leaves[0].leaf.description,
+						children: e.label
+					}), /* @__PURE__ */ u("span", {
+						className: t.rowControls,
+						children: r.map(({ key: e, content: t }) => /* @__PURE__ */ u(p, { children: t }, e))
+					})]
+				}, e.leaves[0].path))]
+			}, n.key);
+		})]
+	});
+}
+function _(e, t, n, r, a, o) {
+	let { path: l, leaf: u } = e, d = i(n, l), f = d === s, p = {
+		path: l,
+		pref: u,
+		value: f ? void 0 : d,
+		mixed: f,
+		unset: !f && d === void 0,
+		setValue: (t) => a(e, t),
+		valueAt: (e) => {
+			let t = i(n, e);
+			return t === s ? {
+				value: void 0,
+				mixed: !0
+			} : {
+				value: t,
+				mixed: !1
+			};
+		}
+	};
+	return {
+		key: l,
+		leaf: u,
+		ctx: p,
+		ariaLabel: t,
+		render: () => {
+			let e = r?.[l] ?? r?.[u.kind];
+			return e ? e(p) : c(p, t, r, o);
+		}
+	};
+}
+//#endregion
+export { g as t };
+
+//# sourceMappingURL=SelectionPanel-CEbLS-0D.js.map

package/dist/chunks/SelectionPanel-CEbLS-0D.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionPanel-CEbLS-0D.js","names":[],"sources":["../../src/components/SelectionPanel/SelectionPanel.tsx"],"sourcesContent":["import { Fragment, useSyncExternalStore, type ReactNode } from 'react';\nimport {\n  asNodeId,\n  type NodePropertiesEntry,\n  type NodeRoutingEntry,\n  type Scene,\n  type SelectionApi,\n} from '@weasel-js/core';\nimport {\n  renderBuiltin,\n  renderCells,\n  type LeafCell,\n  type PropertyRenderContext,\n  type PropertyRenderer,\n} from './renderLeaf';\nimport {\n  MIXED,\n  aggregateValue,\n  classifyKind,\n  effectiveSections,\n  kindBreakdown,\n  setAtPath,\n  type AnyNode,\n  type PanelLeaf,\n} from './model';\nimport s from './SelectionPanel.module.css';\n\nexport type { PropertyRenderContext, PropertyRenderer } from './renderLeaf';\n\n/** Props for {@link SelectionPanel}. */\nexport interface SelectionPanelProps<TData, TLayer extends string, TPose> {\n  /** The scene handle (`useScene`). The panel subscribes itself, so it\n   *  re-renders on scene mutations regardless of parent renders. */\n  scene: Scene<TData, TLayer, TPose>;\n  /** Selection handle (`useSelection`). Only `current` is read. */\n  selection: Pick<SelectionApi, 'current'>;\n  /** Properties-trait entries, e.g. core's `defaultNodeProperties` /\n   *  `inferredNodeProperties` (+ consumer extras). Memoize or hoist. */\n  properties: readonly NodePropertiesEntry[];\n  /** Routing-trait classifiers used to derive each node's kind — pass\n   *  the same list the canvas uses. Memoize or hoist. */\n  routing: readonly NodeRoutingEntry[];\n  /** Control overrides / app-defined kinds (PrefsForm-style). Keys are\n   *  leaf paths (`data.fill`, checked first) or leaf kinds (`color`).\n   *  A renderer returning `null` collapses its leaf (and the row, when\n   *  every leaf in it collapses). */\n  renderers?: Record<string, PropertyRenderer>;\n  /** Kind → header label. Default: capitalized kind name. */\n  kindLabel?: (kind: string) => string;\n  /** Rendered when the selection is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nconst defaultKindLabel = (kind: string): string =>\n  kind.length === 0 ? kind : kind[0].toUpperCase() + kind.slice(1);\n\n/**\n * Pre-baked selection properties panel. Shows the selected nodes' kind\n * and the properties-trait schema for that kind; multi-selections show\n * the intersection of the kinds' schemas with per-field Mixed state.\n * Edits commit as one labeled `scene.batch` fan-out per gesture.\n */\nexport function SelectionPanel<TData, TLayer extends string, TPose>(\n  props: SelectionPanelProps<TData, TLayer, TPose>,\n) {\n  const {\n    scene,\n    selection,\n    properties,\n    routing,\n    renderers,\n    kindLabel = defaultKindLabel,\n    emptyState = null,\n    className,\n  } = props;\n\n  useSyncExternalStore(scene.subscribe, scene.getVersion, scene.getVersion);\n\n  const nodes = selection.current\n    .map((id) => scene.get(asNodeId(id)))\n    .filter((n): n is NonNullable<typeof n> => n != null) as readonly AnyNode[];\n\n  const kinds = nodes.map((n) => classifyKind(n, routing));\n  const selectionKey = nodes.map((n) => n.id).join(',');\n  const sections = effectiveSections(kinds, properties);\n\n  if (nodes.length === 0) {\n    return <div className={[s.root, className].filter(Boolean).join(' ')}>{emptyState}</div>;\n  }\n\n  const commit = (leaf: PanelLeaf, value: unknown): void => {\n    const [head, ...rest] = leaf.path.split('.');\n    if (rest.length === 0) return;\n    const ids = selection.current.map(asNodeId);\n    scene.batch(`Edit ${leaf.leaf.name}`, () => {\n      for (const id of ids) {\n        const node = scene.get(id);\n        if (!node) continue;\n        // `setAtPath` spreads plain objects/arrays down the schema path;\n        // consumer `pose`/`data` are assumed plain-object-shaped along\n        // that path (a class instance's prototype would be dropped by\n        // the spread) — the `as TPose`/`as TData` casts below rely on it.\n        if (head === 'pose') {\n          scene.setPose(id, setAtPath(node.pose as object, rest, value) as TPose);\n        } else if (head === 'data') {\n          scene.update(id, { data: setAtPath(node.data as object, rest, value) as TData });\n        }\n      }\n    });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <header className={s.header}>\n        {nodes.length === 1 ? (\n          <span className={s.kind}>{kindLabel(kinds[0])}</span>\n        ) : (\n          <>\n            <span className={s.kind}>{nodes.length} selected</span>\n            <span className={s.breakdown}>{kindBreakdown(kinds)}</span>\n          </>\n        )}\n      </header>\n      {sections.map((section) => {\n        // Render controls before emitting row chrome so a null-rendering\n        // leaf (custom renderer opting out) collapses its cell — and the\n        // whole row / section when nothing survives. PrefsForm precedent.\n        const rows = section.rows\n          .map((row) => {\n            const controls = renderCells(\n              row.leaves.map((panelLeaf) =>\n                leafCell(\n                  panelLeaf,\n                  row.leaves.length > 1\n                    ? `${row.label} ${panelLeaf.leaf.name}`\n                    : panelLeaf.leaf.name,\n                  nodes,\n                  renderers,\n                  commit,\n                  selectionKey,\n                ),\n              ),\n              renderers,\n            );\n            return { row, controls };\n          })\n          .filter(({ controls }) => controls.length > 0);\n        if (rows.length === 0) return null;\n        return (\n          <section key={section.key} className={s.section}>\n            {section.name !== '' && <h3 className={s.sectionTitle}>{section.name}</h3>}\n            {rows.map(({ row, controls }) => (\n              // A `block` leaf brings its own chrome — it spans the section\n              // instead of sitting in a labeled row's control cell. Under a\n              // headless section nothing else names it, so it heads itself;\n              // an object leaf already renders its own heading.\n              row.leaves.length === 1 && row.leaves[0].leaf.block ? (\n                <div key={row.leaves[0].path}>\n                  {section.name === '' && row.leaves[0].leaf.kind !== 'object' && (\n                    <h4 className={s.sectionTitle} title={row.leaves[0].leaf.description}>\n                      {row.leaves[0].leaf.name}\n                    </h4>\n                  )}\n                  {controls[0].content}\n                </div>\n              ) : (\n              <div key={row.leaves[0].path} className={s.row}>\n                <span className={s.rowLabel} title={row.leaves[0].leaf.description}>\n                  {row.label}\n                </span>\n                <span className={s.rowControls}>\n                  {controls.map(({ key, content }) => (\n                    <Fragment key={key}>{content}</Fragment>\n                  ))}\n                </span>\n              </div>\n              )\n            ))}\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n\n\nfunction leafCell(\n  panelLeaf: PanelLeaf,\n  ariaLabel: string,\n  nodes: readonly AnyNode[],\n  renderers: Record<string, PropertyRenderer> | undefined,\n  commit: (leaf: PanelLeaf, value: unknown) => void,\n  selectionKey: string,\n): LeafCell {\n  const { path, leaf } = panelLeaf;\n  const aggregated = aggregateValue(nodes, path);\n  const mixed = aggregated === MIXED;\n  const value = mixed ? undefined : aggregated;\n\n  const ctx: PropertyRenderContext = {\n    path,\n    pref: leaf,\n    value,\n    mixed,\n    unset: !mixed && aggregated === undefined,\n    setValue: (v) => commit(panelLeaf, v),\n    valueAt: (p) => {\n      const at = aggregateValue(nodes, p);\n      return at === MIXED ? { value: undefined, mixed: true } : { value: at, mixed: false };\n    },\n  };\n\n  return {\n    key: path,\n    leaf,\n    ctx,\n    ariaLabel,\n    render: () => {\n      const custom = renderers?.[path] ?? renderers?.[leaf.kind];\n      if (custom) return custom(ctx);\n      return renderBuiltin(ctx, ariaLabel, renderers, selectionKey);\n    },\n  };\n}\n\n"],"mappings":"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"}

package/dist/chunks/{Sidebar-BlUjn8lD.js → Sidebar-qn_oSCNX.js}

@@ -1,8 +1,8 @@
 import { jsx as e } from "react/jsx-runtime";
 var t = {
-	sidebar: "_sidebar_toyo8_1",
-	left: "_left_toyo8_9",
-	right: "_right_toyo8_12"
+	sidebar: "_sidebar_1vns0_1",
+	left: "_left_1vns0_9",
+	right: "_right_1vns0_12"
 };
 //#endregion
 //#region src/components/Sidebar/Sidebar.tsx
@@ -23,4 +23,4 @@ function n(n) {
 //#endregion
 export { n as t };
 
-//# sourceMappingURL=Sidebar-BlUjn8lD.js.map
+//# sourceMappingURL=Sidebar-qn_oSCNX.js.map

package/dist/chunks/Sidebar-qn_oSCNX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar-qn_oSCNX.js","names":[],"sources":["../../src/components/Sidebar/Sidebar.module.css","../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":[".sidebar {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n}\n\n.sidebar.left {\n  border-right: 1px solid var(--wzl-border);\n}\n.sidebar.right {\n  border-left: 1px solid var(--wzl-border);\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport s from './Sidebar.module.css';\n\n/** Props for {@link Sidebar}. */\nexport interface SidebarProps {\n  /**\n   * Edge the sidebar docks to. Adds a class hook (`s.left` / `s.right`)\n   * so consumers can target either edge for borders, shadows, etc.\n   * Purely cosmetic — layout is the parent's job.\n   */\n  side?: 'left' | 'right';\n  /**\n   * Accessible label — rendered onto the `<aside>`. Without it, screen\n   * readers fall back to \"complementary landmark,\" which is fine for\n   * apps with a single sidebar but ambiguous when there's both a left\n   * and a right.\n   */\n  ariaLabel?: string;\n  children?: ReactNode;\n  className?: string;\n  /** Inline style — useful for width-as-custom-property handles or any\n   *  other one-off CSS property the consumer wants to set dynamically. */\n  style?: CSSProperties;\n}\n\n/**\n * Generic sidebar shell — `<aside>` with column layout and token-driven\n * surface treatment. Width, sticky positioning, and resize handles stay\n * the consumer's concern (every app has its own layout grid); the kit\n * just provides the chrome.\n *\n * Pair with `<SidebarPanel>` for collapsible sections.\n */\nexport function Sidebar(props: SidebarProps) {\n  const { side, ariaLabel, children, className, style } = props;\n  const cls = [s.sidebar, side === 'left' && s.left, side === 'right' && s.right, className]\n    .filter(Boolean).join(' ');\n  return (\n    <aside className={cls} aria-label={ariaLabel} style={style}>\n      {children}\n    </aside>\n  );\n}\n"],"mappings":";;;;;;;;ACiCA,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EAAE,SAAM,cAAW,aAAU,cAAW,aAAU;AAGxD,QACE,kBAAC,SAAD;EAAO,WAHG;GAAC,EAAE;GAAS,MAAS,UAAU,EAAE;GAAM,MAAS,WAAW,EAAE;GAAO;GAAU,CACvF,OAAO,QAAQ,CAAC,KAAK,IAEJ;EAAK,cAAY;EAAkB;EAClD;EACK,CAAA"}

package/dist/chunks/{SidebarPanel-BqHfz6VK.js → SidebarPanel-Bs6V21hg.js}

@@ -1,17 +1,17 @@
-import { i as e } from "./icons-Btrs-JD7.js";
-import { n as t, t as n } from "./Tooltip-BHre_vbI.js";
+import { i as e } from "./icons-DFLytcui.js";
+import { n as t, t as n } from "./Tooltip-C4YBczLq.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Focusable as a } from "react-aria-components";
 var o = {
-	panel: "_panel_1dobg_1",
-	title: "_title_1dobg_9",
-	titleRow: "_titleRow_1dobg_17",
-	titleButton: "_titleButton_1dobg_25",
-	chevron: "_chevron_1dobg_42",
-	chevronCollapsed: "_chevronCollapsed_1dobg_47",
-	hideButton: "_hideButton_1dobg_51",
-	collapsed: "_collapsed_1dobg_64",
-	body: "_body_1dobg_68"
+	panel: "_panel_is5c3_1",
+	title: "_title_is5c3_9",
+	titleRow: "_titleRow_is5c3_17",
+	titleButton: "_titleButton_is5c3_25",
+	chevron: "_chevron_is5c3_42",
+	chevronCollapsed: "_chevronCollapsed_is5c3_47",
+	hideButton: "_hideButton_is5c3_51",
+	collapsed: "_collapsed_is5c3_64",
+	body: "_body_is5c3_68"
 };
 //#endregion
 //#region src/components/SidebarPanel/SidebarPanel.tsx
@@ -56,4 +56,4 @@ function s(s) {
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=SidebarPanel-BqHfz6VK.js.map
+//# sourceMappingURL=SidebarPanel-Bs6V21hg.js.map

package/dist/chunks/SidebarPanel-Bs6V21hg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarPanel-Bs6V21hg.js","names":[],"sources":["../../src/components/SidebarPanel/SidebarPanel.module.css","../../src/components/SidebarPanel/SidebarPanel.tsx"],"sourcesContent":[".panel {\n  /* Vertical only: the body spans the panel's full width, and the title row's\n     own controls carry the horizontal inset. */\n  padding: var(--wzl-space-4) 0;\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n}\n\n.title {\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}\n\n.titleRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--wzl-space-2);\n  padding: 0;\n}\n\n.titleButton {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  flex: 1 1 auto;\n  background: transparent;\n  border: 0;\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n}\n.titleButton:hover {\n  color: var(--wzl-fg);\n}\n\n.chevron {\n  flex: none;\n  color: var(--wzl-fg-muted);\n  transition: transform var(--wzl-motion-fast) ease;\n}\n.chevronCollapsed {\n  transform: rotate(-90deg);\n}\n\n.hideButton {\n  background: transparent;\n  border: 0;\n  padding: 0 var(--wzl-space-4);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n}\n.hideButton:hover {\n  color: var(--wzl-fg);\n}\n\n.panel.collapsed {\n  padding-bottom: var(--wzl-space-2);\n}\n\n.body {\n  padding: 0;\n}\n","import type { ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { ChevronIcon } from '../../icons';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './SidebarPanel.module.css';\n\n/** Props for {@link SidebarPanel}. */\nexport interface SidebarPanelProps {\n  /** Title rendered in the panel's header row. */\n  title?: ReactNode;\n  /**\n   * Collapsed state — when true, only the header paints; the body is\n   * omitted. Caller owns the state (typically via prefs) and flips it\n   * back via `onToggleCollapse`.\n   */\n  collapsed?: boolean;\n  /**\n   * Click handler for the title row. When provided, the header renders\n   * as a button (chevron + label) and acts as the collapse toggle.\n   * When omitted, the title is static text and the panel can't collapse.\n   */\n  onToggleCollapse?(): void;\n  /**\n   * Optional close handler — when provided, the header gains a `×`\n   * button on the trailing edge. Caller flips its \"hidden\" state and\n   * conditionally unmounts the panel from the parent.\n   */\n  onHide?(): void;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Generic collapsible panel section for sidebars. Pure presentation —\n * caller manages `collapsed`/`hidden` state externally (the pattern is\n * to drive it from app prefs so the Preferences modal and inline\n * chevrons toggle the same map).\n *\n * Pair with `<Sidebar>` for the docked column layout.\n */\nexport function SidebarPanel(props: SidebarPanelProps) {\n  const { title, collapsed, onToggleCollapse, onHide, children, className } = props;\n  const cls = [s.panel, collapsed && s.collapsed, className].filter(Boolean).join(' ');\n  const headerInteractive = onToggleCollapse !== undefined;\n  return (\n    <div className={cls}>\n      {title !== undefined && (\n        <div className={s.titleRow}>\n          {headerInteractive ? (\n            <button\n              type=\"button\"\n              className={s.titleButton}\n              onClick={onToggleCollapse}\n              aria-expanded={!collapsed}\n            >\n              <ChevronIcon\n                size={16}\n                className={[s.chevron, collapsed && s.chevronCollapsed].filter(Boolean).join(' ')}\n              />\n              <span className={s.title}>{title}</span>\n            </button>\n          ) : (\n            <span className={s.title}>{title}</span>\n          )}\n          {onHide !== undefined && (\n            <TooltipTrigger>\n              <Focusable>\n                <button\n                  type=\"button\"\n                  className={s.hideButton}\n                  onClick={onHide}\n                  aria-label=\"Hide panel\"\n                >\n                  ×\n                </button>\n              </Focusable>\n              <Tooltip>Hide panel</Tooltip>\n            </TooltipTrigger>\n          )}\n        </div>\n      )}\n      {!collapsed && <div className={s.body}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;ACwCA,SAAgB,EAAa,GAA0B;CACrD,IAAM,EAAE,UAAO,cAAW,qBAAkB,WAAQ,aAAU,iBAAc,GACtE,IAAM;EAAC,EAAE;EAAO,KAAa,EAAE;EAAW;EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,EAC9E,IAAoB,MAAqB,KAAA;AAC/C,QACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACG,MAAU,KAAA,KACT,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,IACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAE;IACb,SAAS;IACT,iBAAe,CAAC;cAJlB,CAME,kBAAC,GAAD;KACE,MAAM;KACN,WAAW,CAAC,EAAE,SAAS,KAAa,EAAE,iBAAiB,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACjF,CAAA,EACF,kBAAC,QAAD;KAAM,WAAW,EAAE;eAAQ;KAAa,CAAA,CACjC;QAET,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ;IAAa,CAAA,EAEzC,MAAW,KAAA,KACV,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAE;IACb,SAAS;IACT,cAAW;cACZ;IAEQ,CAAA,EACC,CAAA,EACZ,kBAAC,GAAD,EAAA,UAAS,cAAoB,CAAA,CACd,EAAA,CAAA,CAEf;MAEP,CAAC,KAAa,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAO;GAAe,CAAA,CACnD"}

package/dist/chunks/{Slider-B2ywUZH6.js → Slider-CIIrqiFS.js}

@@ -1,24 +1,24 @@
-import { r as e } from "./number-f6PydOZK.js";
+import { r as e } from "./number-BHz66zQO.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { openPointerSession as r } from "@weasel-js/core";
 import { useCallback as i, useEffect as a, useMemo as o, useRef as s } from "react";
 var c = {
-	root: "_root_18r74_1",
-	row: "_row_18r74_8",
-	track: "_track_18r74_14",
-	trackInner: "_trackInner_18r74_25",
-	thumb: "_thumb_18r74_35",
-	slim: "_slim_18r74_68",
-	thumbActive: "_thumbActive_18r74_86",
-	readoutsBelow: "_readoutsBelow_18r74_94",
-	readoutBelow: "_readoutBelow_18r74_100",
-	readoutInline: "_readoutInline_18r74_108",
-	notched: "_notched_18r74_116",
-	ticks: "_ticks_18r74_135",
-	tick: "_tick_18r74_135",
-	withStopLabels: "_withStopLabels_18r74_156",
-	stopLabels: "_stopLabels_18r74_160",
-	stopLabel: "_stopLabel_18r74_160"
+	root: "_root_1nxpz_1",
+	row: "_row_1nxpz_8",
+	track: "_track_1nxpz_14",
+	trackInner: "_trackInner_1nxpz_25",
+	thumb: "_thumb_1nxpz_35",
+	slim: "_slim_1nxpz_68",
+	thumbActive: "_thumbActive_1nxpz_86",
+	readoutsBelow: "_readoutsBelow_1nxpz_94",
+	readoutBelow: "_readoutBelow_1nxpz_100",
+	readoutInline: "_readoutInline_1nxpz_108",
+	notched: "_notched_1nxpz_116",
+	ticks: "_ticks_1nxpz_135",
+	tick: "_tick_1nxpz_135",
+	withStopLabels: "_withStopLabels_1nxpz_156",
+	stopLabels: "_stopLabels_1nxpz_160",
+	stopLabel: "_stopLabel_1nxpz_160"
 };
 //#endregion
 //#region src/components/Slider/Slider.tsx
@@ -378,4 +378,4 @@ function b(e) {
 //#endregion
 export { b as t };
 
-//# sourceMappingURL=Slider-B2ywUZH6.js.map
+//# sourceMappingURL=Slider-CIIrqiFS.js.map

package/dist/chunks/Slider-CIIrqiFS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-CIIrqiFS.js","names":[],"sources":["../../src/components/Slider/Slider.module.css","../../src/components/Slider/Slider.tsx"],"sourcesContent":[".root {\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n}\n\n.track {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  height: var(--rp-track-height, 24px);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  cursor: var(--rp-track-cursor, crosshair);\n  /* No `overflow: hidden` here — thumbs at extreme values would get\n   * clipped at the track edges. The gradient/track-paint clip is\n   * applied to `.trackInner` instead, which lets thumbs spill freely. */\n}\n\n.trackInner {\n  position: absolute;\n  inset: 0;\n  border-radius: var(--wzl-radius-sm);\n  overflow: hidden;\n}\n\n.thumb {\n  position: absolute;\n  /* Thumb extends 2px above + below the track for grabbability + visual\n   * weight. Track itself stays its natural height; the thumb just spills. */\n  top: -2px;\n  bottom: -2px;\n  width: var(--rp-thumb-size, 14px);\n  margin-left: calc(var(--rp-thumb-size, 14px) / -2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--wzl-fg-muted) 70%, transparent);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  cursor: ew-resize;\n  /* Frosted-glass over the (often colorful) track. Cheap on modern GPUs;\n   * gracefully degrades to just the partial-alpha background on engines\n   * without backdrop-filter support. */\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  /* Subtle raise — sells the \"thumb is on top of the track\" hierarchy. */\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs)/var(--wzl-leading-tight) ui-sans-serif, system-ui, sans-serif;\n  font-variant-numeric: tabular-nums;\n  color: var(--wzl-fg-inverse);\n  /* White halo so labels stay legible over wildly varying gradient\n   * backgrounds (e.g. labels 'T' / 'P' / 'B' over teal, hue 200° over\n   * yellow-green, etc.). */\n  text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);\n}\n\n/* A slim slider's thumb is round and flush with the track, matching the\n   property rows. The default thumb keeps its 2px spill and rounded-rect face. */\n.slim .thumb {\n  top: 50%;\n  bottom: auto;\n  height: var(--rp-thumb-size);\n  transform: translateY(-50%);\n  border-radius: 50%;\n  border: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: none;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-mix, 70%), transparent);\n}\n\n.thumb:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 1px;\n}\n\n.thumbActive {\n  /* Visual marker for the dragging/focused thumb; subclass-overridable. */\n  z-index: 1;\n}\n\n/* The row holds absolutely-positioned labels, so it has to state its own\n   height: the text's, not the thumb's. It said 14px — the default thumb's\n   size — which left 4px of dead space under the labels at either density. */\n.readoutsBelow {\n  position: relative;\n  height: calc(var(--wzl-font-size-xs) * var(--wzl-leading-tight));\n  margin-top: var(--wzl-space-2);\n}\n\n.readoutBelow {\n  position: absolute;\n  transform: translateX(-50%);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs)/var(--wzl-leading-tight) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.readoutInline {\n  display: inline-block;\n  margin-left: var(--wzl-space-4);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm)/var(--wzl-leading-tight) ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: var(--wzl-fg-muted);\n  vertical-align: middle;\n}\n\n.notched {\n  background: var(--thumb-svg, none);\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  background-color: transparent;\n  border: none;\n  /* Notched thumbs need to disable the .thumb defaults that paint to\n   * the bounding box: backdrop-filter and box-shadow both ignore the\n   * SVG's polygon/notch and would render through the notch cutout.\n   * Use filter: drop-shadow instead — it traces the actual rendered\n   * alpha (i.e. the polygon shape including the cut). */\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: none;\n  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));\n  /* Default notched SVG (down-pointing pentagon, matches the perceptual-color experiment). */\n  --thumb-svg: url(\"data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 30' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 2.52,0 7,10.3 11.48,0 14,0 14,30 0,30' fill='rgba(255,255,255,0.62)' stroke='rgba(0,0,0,0.55)' stroke-width='0.75' stroke-linejoin='miter'/%3E%3C/svg%3E\");\n}\n\n.ticks {\n  position: absolute;\n  inset: 0;\n  /* A mark must never eat the track click that adds a thumb, nor the\n   * pointerdown that starts a drag through it. */\n  pointer-events: none;\n}\n\n.tick {\n  position: absolute;\n  top: var(--rp-tick-inset, 20%);\n  bottom: var(--rp-tick-inset, 20%);\n  width: var(--rp-tick-width, 1px);\n  margin-left: calc(var(--rp-tick-width, 1px) / -2);\n  border-radius: var(--wzl-radius-pill);\n  background: var(--rp-tick-color, var(--wzl-border-strong));\n}\n\n/* The labels hang below the track out of flow, so the row reserves their\n * height and anything after it — the below-thumb readouts — clears them.\n * Padding, not margin: a margin would collapse into whatever follows. */\n.withStopLabels .row {\n  padding-bottom: calc(var(--wzl-space-xs) + var(--wzl-font-size-xs) * var(--wzl-leading-tight));\n}\n\n.stopLabels {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: calc(100% + var(--wzl-space-xs));\n  height: calc(var(--wzl-font-size-xs) * var(--wzl-leading-tight));\n  pointer-events: none;\n}\n\n.stopLabel {\n  position: absolute;\n  transform: translateX(-50%);\n  white-space: nowrap;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-xs);\n  line-height: var(--wzl-leading-tight);\n  font-variant-numeric: tabular-nums;\n  color: var(--wzl-fg-subtle);\n}\n\n/* The end labels are pinned inside the track rather than centered on it, so a\n * wide one can't spill past the control and misalign whatever sits beside it. */\n.stopLabel[data-edge=\"start\"] {\n  transform: none;\n}\n\n.stopLabel[data-edge=\"end\"] {\n  transform: translateX(-100%);\n}\n\n.stopLabel[data-selected] {\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n","import { useCallback, useEffect, useMemo, useRef, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport s from './Slider.module.css';\nimport { formatNumber } from '../../format/number';\n\n/**\n * Passed to a custom thumb renderer: the thumb box in CSS px, and whether\n * this thumb is the one being dragged.\n */\nexport type ThumbRenderCtx = {\n  width: number;\n  height: number;\n  isActive: boolean;\n};\n\n/**\n * A thumb's appearance — one of the two built-in shapes, or a custom\n * renderer.\n */\nexport type ThumbShape =\n  | 'round'\n  | 'notched'\n  | { render: (ctx: ThumbRenderCtx) => ReactNode };\n\n/**\n * One handle on a {@link Slider}. `bounds` narrows the range this particular\n * thumb may move within, either fixed or computed from the current thumb\n * list.\n */\nexport type Thumb = {\n  value: number;\n  label?: string;\n  shape?: ThumbShape;\n  bounds?: [number, number] | ((ctx: BoundsCtx) => [number, number]);\n  /**\n   * Spoken form of `value`, published as `aria-valuetext`. Required by ARIA\n   * whenever `value` is not the quantity the user is choosing — an index into\n   * a value list, a log-scaled position — since `aria-valuenow` alone then\n   * announces a number that means nothing.\n   */\n  valueText?: string;\n};\n\n/**\n * Passed to a thumb's `bounds` function: the full thumb list and this thumb's\n * index in it, so a bound can be expressed relative to its neighbors.\n */\nexport type BoundsCtx = {\n  thumbs: readonly Thumb[];\n  index: number;\n};\n\n/**\n * Passed to `renderTrack`: the track's width in CSS px and a mapping from a\n * slider value to its 0..1 position along the track.\n */\nexport type TrackCtx = {\n  trackWidth: number;\n  valueToFraction: (v: number) => number;\n};\n\n/** A {@link Slider} stop that carries a label, drawn under the track at the stop. */\nexport type SliderStop = {\n  value: number;\n  label?: ReactNode;\n};\n\n/**\n * Props for {@link Slider}.\n *\n * `onInput` fires continuously through a drag; `onChange` fires once when it\n * ends and is the one to write to history.\n *\n * `stops` are attractors: a drag that passes within a few pixels of one lands\n * on it, and the arrow keys move stop to stop. `step` still quantizes the\n * values between them. Each one is drawn on the track as a mark; pass\n * `showStops: false` for a track whose own paint already reads as the stops.\n * A stop given as a {@link SliderStop} with a `label` gets that label drawn\n * under it; `stopLabels` narrows the row to the two ends or turns it off.\n *\n * `snap: 'strict'` makes every stop a detent the thumb must rest on: drags and\n * track presses land on the nearest one, and `step` no longer applies.\n * `spacing: 'even'` places the stops at equal intervals, runs the track from\n * the first stop to the last, and maps values linearly within each gap — so a\n * geometric list (0.25/0.5/1/2/4) gets usable room for every stop instead of\n * four crowded into the first fifth. Both need stops; with fewer than two,\n * `'even'` falls back to linear.\n *\n * `trackClick: 'move-nearest'` makes a press on bare track send the closest\n * thumb there and continue as a drag. It is off by default because on a\n * multi-thumb editor a stray click would yank a stop the user was not aiming\n * at; `onAddThumb`, where it is set, keeps the track press.\n *\n * `constraint: 'ordered'` keeps thumbs from crossing each other. Supplying\n * `onAddThumb` makes a click on empty track create a thumb, and supplying\n * `onRemoveThumb` lets a right-click or a drag off the track remove one —\n * both callbacks can decline by returning `null`/`false`. `allowShiftAll`\n * makes shift-drag translate every thumb together.\n */\nexport type SliderProps<T extends Thumb = Thumb> = {\n  thumbs: readonly T[];\n  onInput: (next: T[]) => void;\n  onChange?: (next: T[]) => void;\n  min: number;\n  max: number;\n  step?: number;\n  stops?: readonly (number | SliderStop)[];\n  showStops?: boolean;\n  stopLabels?: 'all' | 'ends' | 'none';\n  snap?: 'magnetic' | 'strict';\n  spacing?: 'linear' | 'even';\n  trackClick?: 'none' | 'move-nearest';\n  constraint?: 'free' | 'ordered';\n  onAddThumb?: (atValue: number) => T | null;\n  onRemoveThumb?: (index: number) => boolean;\n  allowShiftAll?: boolean;\n  renderTrack?: (ctx: TrackCtx) => ReactNode;\n  trackHeight?: number;\n  /** `'slim'` drives the track and thumb from the kit's slider tokens, so a\n   *  Slider matches the property rows. `trackHeight` still wins if given. */\n  density?: 'default' | 'slim';\n  renderReadout?: (thumb: T, index: number) => ReactNode;\n  readoutPlacement?: 'none' | 'inline-after' | 'below-thumb';\n  ariaLabel?: string;\n  className?: string;\n};\n\nfunction quantize(v: number, step: number | undefined, min: number): number {\n  if (step === undefined || step <= 0) return v;\n  return Math.round((v - min) / step) * step + min;\n}\n\nfunction clamp(v: number, lo: number, hi: number): number {\n  return Math.max(lo, Math.min(hi, v));\n}\n\n/** How close a drag has to come to a stop, in track pixels, to land on it. */\nconst STOP_SNAP_PX = 8;\n\n/** A custom `ThumbShape.render` may put interactive content inside the thumb,\n *  and capture would retarget pointerup and kill the click on it. */\nconst NO_CAPTURE = { capture: false } as const;\n\n/** The stops that are actually reachable: inside the range, deduped, ascending.\n *  A duplicate keeps the first label given for its value. */\nfunction usableStops(stops: SliderProps['stops'], min: number, max: number): SliderStop[] {\n  if (!stops || stops.length === 0) return [];\n  const byValue = new Map<number, SliderStop>();\n  for (const stop of stops) {\n    const s = typeof stop === 'number' ? { value: stop } : stop;\n    if (s.value < min || s.value > max) continue;\n    const seen = byValue.get(s.value);\n    if (!seen || (seen.label === undefined && s.label !== undefined)) byValue.set(s.value, s);\n  }\n  return [...byValue.values()].sort((a, b) => a.value - b.value);\n}\n\n/** The stop nearest `v` along the track, or `v` itself when none lies within\n *  `tolerance` (a track fraction). Measured on the track rather than in value\n *  units so evenly spaced stops attract over the same distance. */\nfunction attract(v: number, stops: number[], tolerance: number, toFraction: (v: number) => number): number {\n  const f = toFraction(v);\n  let best = v;\n  let bestGap = tolerance;\n  for (const stop of stops) {\n    const gap = Math.abs(toFraction(stop) - f);\n    if (gap <= bestGap) {\n      best = stop;\n      bestGap = gap;\n    }\n  }\n  return best;\n}\n\n/** The stop `count` places past `v` in `direction`, saturating at either end. */\nfunction stepStops(stops: number[], v: number, direction: 1 | -1, count: number): number {\n  if (direction > 0) {\n    const first = stops.findIndex(stop => stop > v);\n    if (first === -1) return stops[stops.length - 1];\n    return stops[Math.min(stops.length - 1, first + count - 1)];\n  }\n  let first = -1;\n  for (let i = stops.length - 1; i >= 0; i--) {\n    if (stops[i] < v) {\n      first = i;\n      break;\n    }\n  }\n  if (first === -1) return stops[0];\n  return stops[Math.max(0, first - (count - 1))];\n}\n\nfunction defaultStep(step: number | undefined, min: number, max: number): number {\n  if (step !== undefined && step > 0) return step;\n  return (max - min) / 100;\n}\n\n/** Keep a thumb inside its neighbors when `constraint` is `'ordered'`. */\nfunction clampOrdered(\n  v: number,\n  thumbs: readonly Thumb[],\n  index: number,\n  min: number,\n  max: number,\n  step: number | undefined,\n): number {\n  const gap = step !== undefined && step > 0 ? step : (max - min) / 1000;\n  const lower = index > 0 ? thumbs[index - 1].value + gap : min;\n  const upper = index < thumbs.length - 1 ? thumbs[index + 1].value - gap : max;\n  return clamp(v, lower, upper);\n}\n\nfunction resolveBounds(thumb: Thumb, ctx: BoundsCtx, fallbackMin: number, fallbackMax: number): [number, number] {\n  if (!thumb.bounds) return [fallbackMin, fallbackMax];\n  const tuple = typeof thumb.bounds === 'function' ? thumb.bounds(ctx) : thumb.bounds;\n  return [tuple[0], tuple[1]];\n}\n\nfunction defaultReadout(thumb: Thumb): string {\n  return formatNumber(thumb.value, { minimumFractionDigits: 3, maximumFractionDigits: 3 });\n}\n\n/**\n * Multi-thumb slider over a shared track. The thumb list is fully controlled:\n * every change, live or committed, arrives as a whole new array.\n *\n * Thumbs are draggable, and arrow/Home/End move the focused thumb — those\n * keystrokes fire `onInput` and `onChange` together, since there is no\n * in-flight state to buffer.\n */\nexport function Slider<T extends Thumb = Thumb>(props: SliderProps<T>): ReactElement {\n  const { thumbs, onInput, onChange, step, constraint, trackHeight, density, ariaLabel, className } = props;\n\n  const stopList = useMemo(() => usableStops(props.stops, props.min, props.max), [props.stops, props.min, props.max]);\n  const stops = useMemo(() => stopList.map(stop => stop.value), [stopList]);\n  const even = props.spacing === 'even' && stops.length >= 2;\n  const strict = props.snap === 'strict' && stops.length > 0;\n  const min = even ? stops[0] : props.min;\n  const max = even ? stops[stops.length - 1] : props.max;\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  // In-flight thumb buffer during a drag; null when not dragging.\n  const dragBufferRef = useRef<T[] | null>(null);\n  const sessionRef = useRef<PointerSession | null>(null);\n\n  useEffect(() => () => { sessionRef.current?.cancel(); }, []);\n\n  const valueToFraction = useCallback(\n    (v: number): number => {\n      if (max === min) return 0;\n      if (!even) return clamp((v - min) / (max - min), 0, 1);\n      const gaps = stops.length - 1;\n      const x = clamp(v, min, max);\n      let i = 0;\n      while (i < gaps - 1 && x > stops[i + 1]) i++;\n      return (i + (x - stops[i]) / (stops[i + 1] - stops[i])) / gaps;\n    },\n    [min, max, even, stops],\n  );\n\n  const fractionToValue = useCallback(\n    (f: number): number => {\n      const c = clamp(f, 0, 1);\n      if (!even) return min + c * (max - min);\n      const gaps = stops.length - 1;\n      const i = Math.min(gaps - 1, Math.floor(c * gaps));\n      return stops[i] + (c * gaps - i) * (stops[i + 1] - stops[i]);\n    },\n    [min, max, even, stops],\n  );\n\n  /** The value a pointer at track fraction `f` chooses, before bounds. */\n  const valueAt = useCallback(\n    (f: number, trackWidth: number): number => {\n      const v = fractionToValue(f);\n      if (strict) return attract(v, stops, Infinity, valueToFraction);\n      const q = clamp(quantize(v, step, min), min, max);\n      return stops.length > 0 ? attract(q, stops, STOP_SNAP_PX / trackWidth, valueToFraction) : q;\n    },\n    [fractionToValue, valueToFraction, strict, stops, step, min, max],\n  );\n\n  // `seed` replaces the thumb list the drag starts from. A track press moves a\n  // thumb before the drag begins, and without seeding, a release with no\n  // movement would commit the stale buffer and undo that move.\n  const beginThumbDrag = useCallback(\n    (origin: Element, down: ReactPointerEvent, index: number, seed?: readonly T[]) => {\n      sessionRef.current?.cancel();\n      const buf: T[] = (seed ?? thumbs).map(t => ({ ...t }));\n      dragBufferRef.current = buf;\n      let droppedOff = false;\n\n      const onMove = (ev: PointerEvent) => {\n        const track = trackRef.current;\n        const buffer = dragBufferRef.current;\n        if (!track || !buffer) return;\n        const rect = track.getBoundingClientRect();\n        let v = valueAt((ev.clientX - rect.left) / rect.width, rect.width);\n\n        const [bLo, bHi] = resolveBounds(buffer[index], { thumbs: buffer, index }, min, max);\n        v = clamp(v, bLo, bHi);\n\n        if (constraint === 'ordered') v = clampOrdered(v, buffer, index, min, max, step);\n\n        // Drop-off detection: pointer exits the track vertically by more than trackHeight.\n        const bandHeight = rect.height;\n        if (props.onRemoveThumb) {\n          if (ev.clientY < rect.top - bandHeight || ev.clientY > rect.bottom + bandHeight) {\n            droppedOff = true;\n          } else {\n            droppedOff = false;\n          }\n        }\n\n        buffer[index] = { ...buffer[index], value: v };\n        onInput(buffer.map(t => ({ ...t })));\n      };\n\n      // A drag that ends without a release — cancelled pointer, lost capture,\n      // an unmount — drops the buffer without committing.\n      const onCancel = () => {\n        sessionRef.current = null;\n        dragBufferRef.current = null;\n      };\n\n      const onEnd = () => {\n        sessionRef.current = null;\n        const buffer = dragBufferRef.current;\n        dragBufferRef.current = null;\n        if (!buffer) return;\n\n        if (droppedOff && props.onRemoveThumb) {\n          const accepted = props.onRemoveThumb(index);\n          if (accepted) {\n            const next = buffer.filter((_, i) => i !== index).map(t => ({ ...t })) as T[];\n            onInput(next);\n            onChange?.(next);\n            return;\n          }\n        }\n\n        onChange?.(buffer.map(t => ({ ...t })));\n      };\n\n      sessionRef.current = openPointerSession(origin, down, { onMove, onEnd, onCancel }, NO_CAPTURE);\n    },\n    [thumbs, onInput, onChange, valueAt, min, max, step, constraint, props],\n  );\n\n  const beginShiftAllDrag = useCallback(\n    (origin: Element, down: ReactPointerEvent, anchorX: number) => {\n      sessionRef.current?.cancel();\n      const buf: T[] = thumbs.map(t => ({ ...t }));\n      const startValues = buf.map(t => t.value);\n      dragBufferRef.current = buf;\n\n      const onMove = (ev: PointerEvent) => {\n        const track = trackRef.current;\n        const buffer = dragBufferRef.current;\n        if (!track || !buffer) return;\n        const rect = track.getBoundingClientRect();\n        const dxFraction = (ev.clientX - anchorX) / rect.width;\n        // Evenly spaced gaps span different amounts of value, so equal value\n        // offsets would pull the thumbs apart; move them by track distance.\n        if (even) {\n          const starts = startValues.map(valueToFraction);\n          const df = clamp(dxFraction, -Math.min(...starts), 1 - Math.max(...starts));\n          for (let i = 0; i < buffer.length; i++) {\n            buffer[i] = { ...buffer[i], value: fractionToValue(starts[i] + df) };\n          }\n          onInput(buffer.map(t => ({ ...t })));\n          return;\n        }\n        let dValue = dxFraction * (max - min);\n        dValue = quantize(dValue, step, 0);\n\n        // Clamp delta so no thumb leaves [min, max] (per-thumb bounds intentionally\n        // not enforced — matches the experiment's hue-band shift-translate semantics).\n        let allowedNeg = -Infinity;\n        let allowedPos = Infinity;\n        for (let i = 0; i < startValues.length; i++) {\n          allowedNeg = Math.max(allowedNeg, min - startValues[i]);\n          allowedPos = Math.min(allowedPos, max - startValues[i]);\n        }\n        dValue = clamp(dValue, allowedNeg, allowedPos);\n\n        for (let i = 0; i < buffer.length; i++) {\n          buffer[i] = { ...buffer[i], value: clamp(startValues[i] + dValue, min, max) };\n        }\n        onInput(buffer.map(t => ({ ...t })));\n      };\n\n      const onCancel = () => {\n        sessionRef.current = null;\n        dragBufferRef.current = null;\n      };\n\n      const onEnd = () => {\n        sessionRef.current = null;\n        const buffer = dragBufferRef.current;\n        dragBufferRef.current = null;\n        if (buffer) onChange?.(buffer.map(t => ({ ...t })));\n      };\n\n      sessionRef.current = openPointerSession(origin, down, { onMove, onEnd, onCancel }, NO_CAPTURE);\n    },\n    [thumbs, onInput, onChange, min, max, step, even, valueToFraction, fractionToValue],\n  );\n\n  const onThumbPointerDown = (index: number) => (e: ReactPointerEvent) => {\n    // Only bail on explicit non-primary buttons (button > 0). jsdom's PointerEvent\n    // leaves `button` undefined; treat that as primary so tests can drive drags.\n    if (typeof e.button === 'number' && e.button > 0) return;\n    // preventDefault below suppresses the focus the press would otherwise\n    // give the thumb, and the arrow keys are on the thumb.\n    (e.currentTarget as HTMLElement).focus?.();\n    e.preventDefault();\n    e.stopPropagation();\n    const origin = e.currentTarget as HTMLElement;\n    if (e.shiftKey && props.allowShiftAll) {\n      beginShiftAllDrag(origin, e, e.clientX);\n    } else {\n      beginThumbDrag(origin, e, index);\n    }\n  };\n\n  const onThumbContextMenu = (index: number) => (e: ReactMouseEvent) => {\n    if (!props.onRemoveThumb) return;\n    e.preventDefault();\n    const accepted = props.onRemoveThumb(index);\n    if (!accepted) return;\n    const next = thumbs.filter((_, i) => i !== index).map(t => ({ ...t })) as T[];\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    const wantsMove = (props.trackClick ?? 'none') === 'move-nearest' && thumbs.length > 0;\n    if (!props.onAddThumb && !wantsMove) return;\n    // If the event originated on a thumb, the thumb's own handler ran first; this is a track click.\n    if ((e.target as HTMLElement).closest(`.${s.thumb}`)) return;\n    e.preventDefault();\n    const track = trackRef.current;\n    if (!track) return;\n    const rect = track.getBoundingClientRect();\n    const v = valueAt((e.clientX - rect.left) / rect.width, rect.width);\n\n    if (props.onAddThumb) {\n      const created = props.onAddThumb(v);\n      if (!created) return;\n      const next = [...thumbs.map(t => ({ ...t })), created] as T[];\n      onInput(next);\n      onChange?.(next);\n      return;\n    }\n\n    let index = 0;\n    for (let i = 1; i < thumbs.length; i++) {\n      if (Math.abs(thumbs[i].value - v) < Math.abs(thumbs[index].value - v)) index = i;\n    }\n    const next = thumbs.map(t => ({ ...t })) as T[];\n    const [bLo, bHi] = resolveBounds(next[index], { thumbs: next, index }, min, max);\n    let moved = clamp(v, bLo, bHi);\n    if (constraint === 'ordered') moved = clampOrdered(moved, next, index, min, max, step);\n    next[index] = { ...next[index], value: moved };\n    onInput(next);\n    beginThumbDrag(track, e, index, next);\n  };\n\n  const onThumbKeyDown = (index: number) => (e: ReactKeyboardEvent) => {\n    const stepSize = defaultStep(step, min, max);\n    let delta = 0;\n    // With stops, a keystroke moves by whole stops rather than by value.\n    let stopDelta = 0;\n    let snapTo: 'home' | 'end' | null = null;\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        delta = e.shiftKey ? stepSize * 10 : stepSize;\n        stopDelta = e.shiftKey ? 10 : 1;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        delta = e.shiftKey ? -stepSize * 10 : -stepSize;\n        stopDelta = e.shiftKey ? -10 : -1;\n        break;\n      case 'PageUp':\n        delta = stepSize * 10;\n        stopDelta = 10;\n        break;\n      case 'PageDown':\n        delta = -stepSize * 10;\n        stopDelta = -10;\n        break;\n      case 'Home':\n        snapTo = 'home';\n        break;\n      case 'End':\n        snapTo = 'end';\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const next = thumbs.map(t => ({ ...t }));\n    const [bLo, bHi] = resolveBounds(next[index], { thumbs: next, index }, min, max);\n    const lo = Math.max(min, bLo);\n    const hi = Math.min(max, bHi);\n    let v: number;\n    if (snapTo === 'home') v = lo;\n    else if (snapTo === 'end') v = hi;\n    else if (stops.length > 0) {\n      v = stepStops(stops, next[index].value, stopDelta > 0 ? 1 : -1, Math.abs(stopDelta));\n    } else {\n      v = quantize(next[index].value + delta, step, min);\n    }\n    v = clamp(v, lo, hi);\n    if (constraint === 'ordered') v = clampOrdered(v, next, index, lo, hi, step);\n    next[index] = { ...next[index], value: v };\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const placement = props.readoutPlacement ?? 'none';\n  const renderReadout = props.renderReadout;\n\n  const slim = density === 'slim';\n  const rootVars: Record<string, string> = {};\n  if (slim) {\n    rootVars['--rp-track-height'] = 'var(--wzl-slider-track-h)';\n    rootVars['--rp-thumb-size'] = 'var(--wzl-slider-thumb-size)';\n  }\n  // An explicit trackHeight wins: a caller who named a number meant it.\n  if (trackHeight !== undefined) rootVars['--rp-track-height'] = `${trackHeight}px`;\n\n  const labelMode = props.stopLabels ?? 'all';\n  const lastStop = stopList.length - 1;\n  const labeledStops = labelMode === 'none'\n    ? []\n    : stopList\n        .map((stop, i) => ({ stop, i }))\n        .filter(({ stop, i }) => stop.label !== undefined && (labelMode === 'all' || i === 0 || i === lastStop));\n  // Inside the track so it shares the track's width, not the row's — an inline\n  // readout beside the track would otherwise shift every label off its stop.\n  const stopLabelRow = labeledStops.length > 0 && (\n    <div className={s.stopLabels} data-slider-stop-labels aria-hidden=\"true\">\n      {labeledStops.map(({ stop, i }) => (\n        <span\n          key={stop.value}\n          className={s.stopLabel}\n          data-slider-stop-label\n          data-selected={thumbs.some(t => t.value === stop.value) ? 'true' : undefined}\n          data-edge={i === 0 ? 'start' : i === lastStop ? 'end' : undefined}\n          style={{ left: `${valueToFraction(stop.value) * 100}%` }}\n        >\n          {stop.label}\n        </span>\n      ))}\n    </div>\n  );\n  const rootClass = [s.root, slim && s.slim, stopLabelRow && s.withStopLabels, className].filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={rootClass}\n      style={Object.keys(rootVars).length > 0 ? (rootVars as CSSProperties) : undefined}\n    >\n      <div className={s.row}>\n      <div className={s.track} ref={trackRef} onPointerDown={onTrackPointerDown}>\n        {props.renderTrack && (\n          <div className={s.trackInner}>\n            {props.renderTrack({\n              trackWidth: trackRef.current?.getBoundingClientRect().width ?? 0,\n              valueToFraction,\n            })}\n          </div>\n        )}\n        {(props.showStops ?? true) && stops.length > 0 && (\n          <div className={s.ticks} data-slider-ticks aria-hidden=\"true\">\n            {stops.map(v => {\n              const f = valueToFraction(v);\n              return (\n                <span\n                  key={v}\n                  className={s.tick}\n                  data-slider-tick\n                  data-fraction={String(f)}\n                  style={{ left: `${f * 100}%` }}\n                />\n              );\n            })}\n          </div>\n        )}\n        {stopLabelRow}\n        {thumbs.map((thumb, i) => {\n          const isNotched = thumb.shape === 'notched';\n          const customRender = typeof thumb.shape === 'object' && thumb.shape !== null ? thumb.shape.render : null;\n          const cls = `${s.thumb}${isNotched ? ` ${s.notched}` : ''}`;\n          return (\n            <div\n              key={i}\n              role=\"slider\"\n              tabIndex={0}\n              aria-orientation=\"horizontal\"\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={thumb.value}\n              aria-valuetext={thumb.valueText}\n              aria-label={[ariaLabel, thumb.label].filter(Boolean).join(' ') || undefined}\n              className={cls}\n              style={{ left: `${valueToFraction(thumb.value) * 100}%` }}\n              onPointerDown={onThumbPointerDown(i)}\n              onKeyDown={onThumbKeyDown(i)}\n              onContextMenu={onThumbContextMenu(i)}\n            >\n              {customRender ? customRender({ width: 14, height: 24, isActive: false }) : (thumb.label ?? '')}\n            </div>\n          );\n        })}\n      </div>\n      {placement === 'inline-after' && (\n        <span data-readout=\"inline\" className={s.readoutInline}>\n          {thumbs.map((t, i) => (\n            <span key={i}>{i > 0 ? ' / ' : ''}{renderReadout ? renderReadout(t, i) : defaultReadout(t)}</span>\n          ))}\n        </span>\n      )}\n      </div>\n      {placement === 'below-thumb' && (\n        <div className={s.readoutsBelow}>\n          {thumbs.map((t, i) => (\n            <span\n              key={i}\n              data-readout=\"below\"\n              className={s.readoutBelow}\n              style={{ left: `${valueToFraction(t.value) * 100}%` }}\n            >\n              {renderReadout ? renderReadout(t, i) : defaultReadout(t)}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AC+HA,SAAS,EAAS,GAAW,GAA0B,GAAqB;AAE1E,QADI,MAAS,KAAA,KAAa,KAAQ,IAAU,IACrC,KAAK,OAAO,IAAI,KAAO,EAAK,GAAG,IAAO;;AAG/C,SAAS,EAAM,GAAW,GAAY,GAAoB;AACxD,QAAO,KAAK,IAAI,GAAI,KAAK,IAAI,GAAI,EAAE,CAAC;;AAItC,IAAM,IAAe,GAIf,IAAa,EAAE,SAAS,IAAO;AAIrC,SAAS,EAAY,GAA6B,GAAa,GAA2B;AACxF,KAAI,CAAC,KAAS,EAAM,WAAW,EAAG,QAAO,EAAE;CAC3C,IAAM,oBAAU,IAAI,KAAyB;AAC7C,MAAK,IAAM,KAAQ,GAAO;EACxB,IAAM,IAAI,OAAO,KAAS,WAAW,EAAE,OAAO,GAAM,GAAG;AACvD,MAAI,EAAE,QAAQ,KAAO,EAAE,QAAQ,EAAK;EACpC,IAAM,IAAO,EAAQ,IAAI,EAAE,MAAM;AACjC,GAAI,CAAC,KAAS,EAAK,UAAU,KAAA,KAAa,EAAE,UAAU,KAAA,MAAY,EAAQ,IAAI,EAAE,OAAO,EAAE;;AAE3F,QAAO,CAAC,GAAG,EAAQ,QAAQ,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM;;AAMhE,SAAS,EAAQ,GAAW,GAAiB,GAAmB,GAA2C;CACzG,IAAM,IAAI,EAAW,EAAE,EACnB,IAAO,GACP,IAAU;AACd,MAAK,IAAM,KAAQ,GAAO;EACxB,IAAM,IAAM,KAAK,IAAI,EAAW,EAAK,GAAG,EAAE;AAC1C,EAAI,KAAO,MACT,IAAO,GACP,IAAU;;AAGd,QAAO;;AAIT,SAAS,EAAU,GAAiB,GAAW,GAAmB,GAAuB;AACvF,KAAI,IAAY,GAAG;EACjB,IAAM,IAAQ,EAAM,WAAU,MAAQ,IAAO,EAAE;AAE/C,SADI,MAAU,KAAW,EAAM,EAAM,SAAS,KACvC,EAAM,KAAK,IAAI,EAAM,SAAS,GAAG,IAAQ,IAAQ,EAAE;;CAE5D,IAAI,IAAQ;AACZ,MAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,IACrC,KAAI,EAAM,KAAK,GAAG;AAChB,MAAQ;AACR;;AAIJ,QADI,MAAU,KAAW,EAAM,KACxB,EAAM,KAAK,IAAI,GAAG,KAAS,IAAQ,GAAG;;AAG/C,SAAS,EAAY,GAA0B,GAAa,GAAqB;AAE/E,QADI,MAAS,KAAA,KAAa,IAAO,IAAU,KACnC,IAAM,KAAO;;AAIvB,SAAS,EACP,GACA,GACA,GACA,GACA,GACA,GACQ;CACR,IAAM,IAAM,MAAS,KAAA,KAAa,IAAO,IAAI,KAAQ,IAAM,KAAO;AAGlE,QAAO,EAAM,GAFC,IAAQ,IAAI,EAAO,IAAQ,GAAG,QAAQ,IAAM,GAC5C,IAAQ,EAAO,SAAS,IAAI,EAAO,IAAQ,GAAG,QAAQ,IAAM,EAC7C;;AAG/B,SAAS,EAAc,GAAc,GAAgB,GAAqB,GAAuC;AAC/G,KAAI,CAAC,EAAM,OAAQ,QAAO,CAAC,GAAa,EAAY;CACpD,IAAM,IAAQ,OAAO,EAAM,UAAW,aAAa,EAAM,OAAO,EAAI,GAAG,EAAM;AAC7E,QAAO,CAAC,EAAM,IAAI,EAAM,GAAG;;AAG7B,SAAS,EAAe,GAAsB;AAC5C,QAAO,EAAa,EAAM,OAAO;EAAE,uBAAuB;EAAG,uBAAuB;EAAG,CAAC;;AAW1F,SAAgB,EAAgC,GAAqC;CACnF,IAAM,EAAE,WAAQ,YAAS,aAAU,SAAM,eAAY,gBAAa,YAAS,eAAW,iBAAc,GAE9F,IAAW,QAAc,EAAY,EAAM,OAAO,EAAM,KAAK,EAAM,IAAI,EAAE;EAAC,EAAM;EAAO,EAAM;EAAK,EAAM;EAAI,CAAC,EAC7G,IAAQ,QAAc,EAAS,KAAI,MAAQ,EAAK,MAAM,EAAE,CAAC,EAAS,CAAC,EACnE,IAAO,EAAM,YAAY,UAAU,EAAM,UAAU,GACnD,IAAS,EAAM,SAAS,YAAY,EAAM,SAAS,GACnD,IAAM,IAAO,EAAM,KAAK,EAAM,KAC9B,IAAM,IAAO,EAAM,EAAM,SAAS,KAAK,EAAM,KAE7C,IAAW,EAA8B,KAAK,EAE9C,IAAgB,EAAmB,KAAK,EACxC,IAAa,EAA8B,KAAK;AAEtD,eAAsB;AAAE,IAAW,SAAS,QAAQ;IAAK,EAAE,CAAC;CAE5D,IAAM,IAAkB,GACrB,MAAsB;AACrB,MAAI,MAAQ,EAAK,QAAO;AACxB,MAAI,CAAC,EAAM,QAAO,GAAO,IAAI,MAAQ,IAAM,IAAM,GAAG,EAAE;EACtD,IAAM,IAAO,EAAM,SAAS,GACtB,IAAI,EAAM,GAAG,GAAK,EAAI,EACxB,IAAI;AACR,SAAO,IAAI,IAAO,KAAK,IAAI,EAAM,IAAI,IAAI;AACzC,UAAQ,KAAK,IAAI,EAAM,OAAO,EAAM,IAAI,KAAK,EAAM,OAAO;IAE5D;EAAC;EAAK;EAAK;EAAM;EAAM,CACxB,EAEK,IAAkB,GACrB,MAAsB;EACrB,IAAM,IAAI,EAAM,GAAG,GAAG,EAAE;AACxB,MAAI,CAAC,EAAM,QAAO,IAAM,KAAK,IAAM;EACnC,IAAM,IAAO,EAAM,SAAS,GACtB,IAAI,KAAK,IAAI,IAAO,GAAG,KAAK,MAAM,IAAI,EAAK,CAAC;AAClD,SAAO,EAAM,MAAM,IAAI,IAAO,MAAM,EAAM,IAAI,KAAK,EAAM;IAE3D;EAAC;EAAK;EAAK;EAAM;EAAM,CACxB,EAGK,IAAU,GACb,GAAW,MAA+B;EACzC,IAAM,IAAI,EAAgB,EAAE;AAC5B,MAAI,EAAQ,QAAO,EAAQ,GAAG,GAAO,UAAU,EAAgB;EAC/D,IAAM,IAAI,EAAM,EAAS,GAAG,GAAM,EAAI,EAAE,GAAK,EAAI;AACjD,SAAO,EAAM,SAAS,IAAI,EAAQ,GAAG,GAAO,IAAe,GAAY,EAAgB,GAAG;IAE5F;EAAC;EAAiB;EAAiB;EAAQ;EAAO;EAAM;EAAK;EAAI,CAClE,EAKK,IAAiB,GACpB,GAAiB,GAAyB,GAAe,MAAwB;AAGhF,EAFA,EAAW,SAAS,QAAQ,EAE5B,EAAc,WADI,KAAQ,GAAQ,KAAI,OAAM,EAAE,GAAG,GAAG,EAC5B;EACxB,IAAI,IAAa;AAsDjB,IAAW,UAAU,EAAmB,GAAQ,GAAM;GAAE,SApDxC,MAAqB;IACnC,IAAM,IAAQ,EAAS,SACjB,IAAS,EAAc;AAC7B,QAAI,CAAC,KAAS,CAAC,EAAQ;IACvB,IAAM,IAAO,EAAM,uBAAuB,EACtC,IAAI,GAAS,EAAG,UAAU,EAAK,QAAQ,EAAK,OAAO,EAAK,MAAM,EAE5D,CAAC,GAAK,KAAO,EAAc,EAAO,IAAQ;KAAE,QAAQ;KAAQ;KAAO,EAAE,GAAK,EAAI;AAGpF,IAFA,IAAI,EAAM,GAAG,GAAK,EAAI,EAElB,MAAe,cAAW,IAAI,EAAa,GAAG,GAAQ,GAAO,GAAK,GAAK,EAAK;IAGhF,IAAM,IAAa,EAAK;AAUxB,IATI,EAAM,kBACR,AAGE,IAHE,EAAG,UAAU,EAAK,MAAM,KAAc,EAAG,UAAU,EAAK,SAAS,IAOvE,EAAO,KAAS;KAAE,GAAG,EAAO;KAAQ,OAAO;KAAG,EAC9C,EAAQ,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;;GA6B0B,aAnB5C;AAClB,MAAW,UAAU;IACrB,IAAM,IAAS,EAAc;AAC7B,UAAc,UAAU,MACnB,GAEL;SAAI,KAAc,EAAM,iBACL,EAAM,cAAc,EACjC,EAAU;MACZ,IAAM,IAAO,EAAO,QAAQ,GAAG,MAAM,MAAM,EAAM,CAAC,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE;AAEtE,MADA,EAAQ,EAAK,EACb,IAAW,EAAK;AAChB;;AAIJ,SAAW,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;;;GAG8B,gBAxBhD;AAErB,IADA,EAAW,UAAU,MACrB,EAAc,UAAU;;GAsBuD,EAAE,EAAW;IAEhG;EAAC;EAAQ;EAAS;EAAU;EAAS;EAAK;EAAK;EAAM;EAAY;EAAM,CACxE,EAEK,IAAoB,GACvB,GAAiB,GAAyB,MAAoB;AAC7D,IAAW,SAAS,QAAQ;EAC5B,IAAM,IAAW,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EACtC,IAAc,EAAI,KAAI,MAAK,EAAE,MAAM;AAmDzC,EAlDA,EAAc,UAAU,GAkDxB,EAAW,UAAU,EAAmB,GAAQ,GAAM;GAAE,SAhDxC,MAAqB;IACnC,IAAM,IAAQ,EAAS,SACjB,IAAS,EAAc;AAC7B,QAAI,CAAC,KAAS,CAAC,EAAQ;IACvB,IAAM,IAAO,EAAM,uBAAuB,EACpC,KAAc,EAAG,UAAU,KAAW,EAAK;AAGjD,QAAI,GAAM;KACR,IAAM,IAAS,EAAY,IAAI,EAAgB,EACzC,IAAK,EAAM,GAAY,CAAC,KAAK,IAAI,GAAG,EAAO,EAAE,IAAI,KAAK,IAAI,GAAG,EAAO,CAAC;AAC3E,UAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,IACjC,GAAO,KAAK;MAAE,GAAG,EAAO;MAAI,OAAO,EAAgB,EAAO,KAAK,EAAG;MAAE;AAEtE,OAAQ,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;AACpC;;IAEF,IAAI,IAAS,KAAc,IAAM;AACjC,QAAS,EAAS,GAAQ,GAAM,EAAE;IAIlC,IAAI,IAAa,WACb,IAAa;AACjB,SAAK,IAAI,IAAI,GAAG,IAAI,EAAY,QAAQ,IAEtC,CADA,IAAa,KAAK,IAAI,GAAY,IAAM,EAAY,GAAG,EACvD,IAAa,KAAK,IAAI,GAAY,IAAM,EAAY,GAAG;AAEzD,QAAS,EAAM,GAAQ,GAAY,EAAW;AAE9C,SAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,IACjC,GAAO,KAAK;KAAE,GAAG,EAAO;KAAI,OAAO,EAAM,EAAY,KAAK,GAAQ,GAAK,EAAI;KAAE;AAE/E,MAAQ,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;;GAe0B,aAP5C;AAClB,MAAW,UAAU;IACrB,IAAM,IAAS,EAAc;AAE7B,IADA,EAAc,UAAU,MACpB,KAAQ,IAAW,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;;GAGkB,gBAZhD;AAErB,IADA,EAAW,UAAU,MACrB,EAAc,UAAU;;GAUuD,EAAE,EAAW;IAEhG;EAAC;EAAQ;EAAS;EAAU;EAAK;EAAK;EAAM;EAAM;EAAiB;EAAgB,CACpF,EAEK,KAAsB,OAAmB,MAAyB;AAGtE,MAAI,OAAO,EAAE,UAAW,YAAY,EAAE,SAAS,EAAG;AAKlD,EAFC,EAAE,cAA8B,SAAS,EAC1C,EAAE,gBAAgB,EAClB,EAAE,iBAAiB;EACnB,IAAM,IAAS,EAAE;AACjB,EAAI,EAAE,YAAY,EAAM,gBACtB,EAAkB,GAAQ,GAAG,EAAE,QAAQ,GAEvC,EAAe,GAAQ,GAAG,EAAM;IAI9B,KAAsB,OAAmB,MAAuB;AAIpE,MAHI,CAAC,EAAM,kBACX,EAAE,gBAAgB,EAEd,CADa,EAAM,cAAc,EAChC,EAAU;EACf,IAAM,IAAO,EAAO,QAAQ,GAAG,MAAM,MAAM,EAAM,CAAC,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE;AAEtE,EADA,EAAQ,EAAK,EACb,IAAW,EAAK;IAGZ,KAAsB,MAAyC;AACnE,MAAI,OAAO,EAAE,UAAW,YAAY,EAAE,SAAS,EAAG;EAClD,IAAM,KAAa,EAAM,cAAc,YAAY,kBAAkB,EAAO,SAAS;AAGrF,MAFI,CAAC,EAAM,cAAc,CAAC,KAErB,EAAE,OAAuB,QAAQ,IAAI,EAAE,QAAQ,CAAE;AACtD,IAAE,gBAAgB;EAClB,IAAM,IAAQ,EAAS;AACvB,MAAI,CAAC,EAAO;EACZ,IAAM,IAAO,EAAM,uBAAuB,EACpC,IAAI,GAAS,EAAE,UAAU,EAAK,QAAQ,EAAK,OAAO,EAAK,MAAM;AAEnE,MAAI,EAAM,YAAY;GACpB,IAAM,IAAU,EAAM,WAAW,EAAE;AACnC,OAAI,CAAC,EAAS;GACd,IAAM,IAAO,CAAC,GAAG,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EAAE,EAAQ;AAEtD,GADA,EAAQ,EAAK,EACb,IAAW,EAAK;AAChB;;EAGF,IAAI,IAAQ;AACZ,OAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,IACjC,CAAI,KAAK,IAAI,EAAO,GAAG,QAAQ,EAAE,GAAG,KAAK,IAAI,EAAO,GAAO,QAAQ,EAAE,KAAE,IAAQ;EAEjF,IAAM,IAAO,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EAClC,CAAC,GAAK,KAAO,EAAc,EAAK,IAAQ;GAAE,QAAQ;GAAM;GAAO,EAAE,GAAK,EAAI,EAC5E,IAAQ,EAAM,GAAG,GAAK,EAAI;AAI9B,EAHI,MAAe,cAAW,IAAQ,EAAa,GAAO,GAAM,GAAO,GAAK,GAAK,EAAK,GACtF,EAAK,KAAS;GAAE,GAAG,EAAK;GAAQ,OAAO;GAAO,EAC9C,EAAQ,EAAK,EACb,EAAe,GAAO,GAAG,GAAO,EAAK;IAGjC,KAAkB,OAAmB,MAA0B;EACnE,IAAM,IAAW,EAAY,GAAM,GAAK,EAAI,EACxC,IAAQ,GAER,IAAY,GACZ,IAAgC;AAEpC,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AAEH,IADA,IAAQ,EAAE,WAAW,IAAW,KAAK,GACrC,IAAY,EAAE,WAAW,KAAK;AAC9B;GACF,KAAK;GACL,KAAK;AAEH,IADA,IAAQ,EAAE,WAAW,CAAC,IAAW,KAAK,CAAC,GACvC,IAAY,EAAE,WAAW,MAAM;AAC/B;GACF,KAAK;AAEH,IADA,IAAQ,IAAW,IACnB,IAAY;AACZ;GACF,KAAK;AAEH,IADA,IAAQ,CAAC,IAAW,IACpB,IAAY;AACZ;GACF,KAAK;AACH,QAAS;AACT;GACF,KAAK;AACH,QAAS;AACT;GACF,QACE;;AAGJ,IAAE,gBAAgB;EAClB,IAAM,IAAO,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EAClC,CAAC,GAAK,KAAO,EAAc,EAAK,IAAQ;GAAE,QAAQ;GAAM;GAAO,EAAE,GAAK,EAAI,EAC1E,IAAK,KAAK,IAAI,GAAK,EAAI,EACvB,IAAK,KAAK,IAAI,GAAK,EAAI,EACzB;AAYJ,EAXA,AAKE,IALE,MAAW,SAAY,IAClB,MAAW,QAAW,IACtB,EAAM,SAAS,IAClB,EAAU,GAAO,EAAK,GAAO,OAAO,IAAY,IAAI,IAAI,IAAI,KAAK,IAAI,EAAU,CAAC,GAEhF,EAAS,EAAK,GAAO,QAAQ,GAAO,GAAM,EAAI,EAEpD,IAAI,EAAM,GAAG,GAAI,EAAG,EAChB,MAAe,cAAW,IAAI,EAAa,GAAG,GAAM,GAAO,GAAI,GAAI,EAAK,GAC5E,EAAK,KAAS;GAAE,GAAG,EAAK;GAAQ,OAAO;GAAG,EAC1C,EAAQ,EAAK,EACb,IAAW,EAAK;IAGZ,IAAY,EAAM,oBAAoB,QACtC,IAAgB,EAAM,eAEtB,IAAO,MAAY,QACnB,IAAmC,EAAE;AAM3C,CALI,MACF,EAAS,uBAAuB,6BAChC,EAAS,qBAAqB,iCAG5B,MAAgB,KAAA,MAAW,EAAS,uBAAuB,GAAG,EAAY;CAE9E,IAAM,IAAY,EAAM,cAAc,OAChC,IAAW,EAAS,SAAS,GAC7B,IAAe,MAAc,SAC/B,EAAE,GACF,EACG,KAAK,GAAM,OAAO;EAAE;EAAM;EAAG,EAAE,CAC/B,QAAQ,EAAE,SAAM,WAAQ,EAAK,UAAU,KAAA,MAAc,MAAc,SAAS,MAAM,KAAK,MAAM,GAAU,EAGxG,IAAe,EAAa,SAAS,KACzC,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAY,2BAAA;EAAwB,eAAY;YAC/D,EAAa,KAAK,EAAE,SAAM,WACzB,kBAAC,QAAD;GAEE,WAAW,EAAE;GACb,0BAAA;GACA,iBAAe,EAAO,MAAK,MAAK,EAAE,UAAU,EAAK,MAAM,GAAG,SAAS,KAAA;GACnE,aAAW,MAAM,IAAI,UAAU,MAAM,IAAW,QAAQ,KAAA;GACxD,OAAO,EAAE,MAAM,GAAG,EAAgB,EAAK,MAAM,GAAG,IAAI,IAAI;aAEvD,EAAK;GACD,EARA,EAAK,MAQL,CACP;EACE,CAAA;AAIR,QACE,kBAAC,OAAD;EACE,WAJc;GAAC,EAAE;GAAM,KAAQ,EAAE;GAAM,KAAgB,EAAE;GAAgB;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAI9F;EACX,OAAO,OAAO,KAAK,EAAS,CAAC,SAAS,IAAK,IAA6B,KAAA;YAF1E,CAIE,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACA,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAO,KAAK;IAAU,eAAe;cAAvD;KACG,EAAM,eACL,kBAAC,OAAD;MAAK,WAAW,EAAE;gBACf,EAAM,YAAY;OACjB,YAAY,EAAS,SAAS,uBAAuB,CAAC,SAAS;OAC/D;OACD,CAAC;MACE,CAAA;MAEN,EAAM,aAAa,OAAS,EAAM,SAAS,KAC3C,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAO,qBAAA;MAAkB,eAAY;gBACpD,EAAM,KAAI,MAAK;OACd,IAAM,IAAI,EAAgB,EAAE;AAC5B,cACE,kBAAC,QAAD;QAEE,WAAW,EAAE;QACb,oBAAA;QACA,iBAAe,OAAO,EAAE;QACxB,OAAO,EAAE,MAAM,GAAG,IAAI,IAAI,IAAI;QAC9B,EALK,EAKL;QAEJ;MACE,CAAA;KAEP;KACA,EAAO,KAAK,GAAO,MAAM;MACxB,IAAM,IAAY,EAAM,UAAU,WAC5B,IAAe,OAAO,EAAM,SAAU,YAAY,EAAM,UAAU,OAAO,EAAM,MAAM,SAAS,MAC9F,IAAM,GAAG,EAAE,QAAQ,IAAY,IAAI,EAAE,YAAY;AACvD,aACE,kBAAC,OAAD;OAEE,MAAK;OACL,UAAU;OACV,oBAAiB;OACjB,iBAAe;OACf,iBAAe;OACf,iBAAe,EAAM;OACrB,kBAAgB,EAAM;OACtB,cAAY,CAAC,IAAW,EAAM,MAAM,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI,KAAA;OAClE,WAAW;OACX,OAAO,EAAE,MAAM,GAAG,EAAgB,EAAM,MAAM,GAAG,IAAI,IAAI;OACzD,eAAe,EAAmB,EAAE;OACpC,WAAW,EAAe,EAAE;OAC5B,eAAe,EAAmB,EAAE;iBAEnC,IAAe,EAAa;QAAE,OAAO;QAAI,QAAQ;QAAI,UAAU;QAAO,CAAC,GAAI,EAAM,SAAS;OACvF,EAhBC,EAgBD;OAER;KACE;OACL,MAAc,kBACb,kBAAC,QAAD;IAAM,gBAAa;IAAS,WAAW,EAAE;cACtC,EAAO,KAAK,GAAG,MACd,kBAAC,QAAD,EAAA,UAAA,CAAe,IAAI,IAAI,QAAQ,IAAI,IAAgB,EAAc,GAAG,EAAE,GAAG,EAAe,EAAE,CAAQ,EAAA,EAAvF,EAAuF,CAClG;IACG,CAAA,CAEH;MACL,MAAc,iBACb,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAO,KAAK,GAAG,MACd,kBAAC,QAAD;IAEE,gBAAa;IACb,WAAW,EAAE;IACb,OAAO,EAAE,MAAM,GAAG,EAAgB,EAAE,MAAM,GAAG,IAAI,IAAI;cAEpD,IAAgB,EAAc,GAAG,EAAE,GAAG,EAAe,EAAE;IACnD,EANA,EAMA,CACP;GACE,CAAA,CAEJ"}

package/dist/chunks/{StatusBar-BFt7Yw5O.js → StatusBar-B4L15DSm.js}

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 var t = {
-	bar: "_bar_49hmb_1",
-	item: "_item_49hmb_14",
-	muted: "_muted_49hmb_18",
-	hasTitle: "_hasTitle_49hmb_23",
-	spacer: "_spacer_49hmb_27"
+	bar: "_bar_mhnnl_1",
+	item: "_item_mhnnl_14",
+	muted: "_muted_mhnnl_18",
+	hasTitle: "_hasTitle_mhnnl_23",
+	spacer: "_spacer_mhnnl_27"
 };
 //#endregion
 //#region src/components/StatusBar/StatusBar.tsx
@@ -38,4 +38,4 @@ function i() {
 //#endregion
 export { r as n, i as r, n as t };
 
-//# sourceMappingURL=StatusBar-BFt7Yw5O.js.map
+//# sourceMappingURL=StatusBar-B4L15DSm.js.map

package/dist/chunks/StatusBar-B4L15DSm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar-B4L15DSm.js","names":[],"sources":["../../src/components/StatusBar/StatusBar.module.css","../../src/components/StatusBar/StatusBar.tsx"],"sourcesContent":[".bar {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-8);\n  flex-shrink: 0;\n  padding: var(--wzl-space-2) var(--wzl-space-6);\n  font-family: var(--wzl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-muted);\n  background: var(--wzl-surface);\n  border-top: 1px solid var(--wzl-border);\n}\n\n.item {\n  white-space: nowrap;\n}\n\n.muted {\n  opacity: 0.6;\n  font-variant-numeric: tabular-nums;\n}\n\n.hasTitle {\n  cursor: help;\n}\n\n.spacer {\n  margin-left: auto;\n}\n","import type { ReactNode } from 'react';\nimport s from './StatusBar.module.css';\n\n/** Props for {@link StatusBar}. */\nexport interface StatusBarProps {\n  /**\n   * Accessible label for the bar. Deliberately not a live region — a status\n   * bar's readouts change on every pointer move (zoom, cursor position,\n   * selection count), and announcing each one would make a screen reader\n   * unusable. Screen-reader users reach the same facts through the controls\n   * that own them.\n   */\n  ariaLabel?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * The thin readout strip along the bottom of an editor window: monospace,\n * one row, items separated by a fixed gap, with an optional spacer that\n * pushes everything after it to the trailing edge.\n *\n * Pure presentation — it holds whatever the app puts in it. Compose with\n * `<StatusBarItem>` and `<StatusBarSpacer>`.\n */\nexport function StatusBar(props: StatusBarProps) {\n  const { ariaLabel, children, className } = props;\n  return (\n    <footer className={[s.bar, className].filter(Boolean).join(' ')} aria-label={ariaLabel}>\n      {children}\n    </footer>\n  );\n}\n\n/** Props for {@link StatusBarItem}. */\nexport interface StatusBarItemProps {\n  /**\n   * Hover text. Items that carry one also get a `help` cursor, so the\n   * affordance is discoverable rather than hidden behind a hover delay.\n   */\n  title?: string;\n  /**\n   * Dim the item and use tabular figures. For reference material that\n   * shouldn't compete with live readouts — build stamps, hints, units.\n   */\n  muted?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\n/** One readout in a `<StatusBar>`. */\nexport function StatusBarItem(props: StatusBarItemProps) {\n  const { title, muted, children, className } = props;\n  const cls = [s.item, muted && s.muted, title !== undefined && s.hasTitle, className]\n    .filter(Boolean).join(' ');\n  return <span className={cls} title={title}>{children}</span>;\n}\n\n/**\n * Splits a status bar into leading and trailing runs — everything after the\n * spacer is pushed to the trailing edge. Decorative, so it's hidden from the\n * accessibility tree.\n */\nexport function StatusBarSpacer() {\n  return <span className={s.spacer} aria-hidden=\"true\" />;\n}\n"],"mappings":";;;;;;;;;;ACyBA,SAAgB,EAAU,GAAuB;CAC/C,IAAM,EAAE,cAAW,aAAU,iBAAc;AAC3C,QACE,kBAAC,UAAD;EAAQ,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,cAAY;EAC1E;EACM,CAAA;;AAqBb,SAAgB,EAAc,GAA2B;CACvD,IAAM,EAAE,UAAO,UAAO,aAAU,iBAAc;AAG9C,QAAO,kBAAC,QAAD;EAAM,WAFD;GAAC,EAAE;GAAM,KAAS,EAAE;GAAO,MAAU,KAAA,KAAa,EAAE;GAAU;GAAU,CACjF,OAAO,QAAQ,CAAC,KAAK,IACA;EAAY;EAAQ;EAAgB,CAAA;;AAQ9D,SAAgB,IAAkB;AAChC,QAAO,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAQ,eAAY;EAAS,CAAA"}

package/dist/chunks/{Switch-Om3t3ASc.js → Switch-DH5POG0T.js}

@@ -2,10 +2,10 @@ import { jsx as e, jsxs as t } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
 import { Switch as r } from "react-aria-components";
 var i = {
-	switch: "_switch_4x0jo_1",
-	track: "_track_4x0jo_18",
-	thumb: "_thumb_4x0jo_38",
-	label: "_label_4x0jo_54"
+	switch: "_switch_hpqn1_1",
+	track: "_track_hpqn1_18",
+	thumb: "_thumb_hpqn1_38",
+	label: "_label_hpqn1_54"
 }, a = n(function(n, a) {
 	let { children: o, className: s, ...c } = n;
 	return /* @__PURE__ */ t(r, {
@@ -24,4 +24,4 @@ var i = {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=Switch-Om3t3ASc.js.map
+//# sourceMappingURL=Switch-DH5POG0T.js.map

package/dist/chunks/Switch-DH5POG0T.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch-DH5POG0T.js","names":[],"sources":["../../src/components/Switch/Switch.module.css","../../src/components/Switch/Switch.tsx"],"sourcesContent":[".switch {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  cursor: pointer;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.switch[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.track {\n  position: relative;\n  flex: 0 0 auto;\n  width: 28px;\n  height: 16px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-pill);\n  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.switch[data-focus-visible] .track {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.switch[data-selected] .track {\n  background: var(--wzl-accent-strong);\n  border-color: var(--wzl-accent-strong);\n}\n\n.thumb {\n  position: absolute;\n  top: 1px;\n  left: 1px;\n  width: 12px;\n  height: 12px;\n  background: var(--wzl-fg);\n  border-radius: 50%;\n  transition: transform var(--wzl-motion-fast);\n}\n\n.switch[data-selected] .thumb {\n  transform: translateX(12px);\n  background: var(--wzl-fg-on-accent);\n}\n\n.label {\n  line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  Switch as RACSwitch,\n  type SwitchProps as RACSwitchProps,\n} from 'react-aria-components';\nimport s from './Switch.module.css';\n\n/**\n * Props for {@link Switch}, on top of React Aria's `Switch` props. The label\n * is passed as children.\n */\nexport type SwitchProps = Omit<RACSwitchProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * On/off toggle wrapping React Aria's Switch, skinned against the `--wzl-*`\n * tokens. Use for a setting that takes effect immediately; use `Checkbox`\n * for one that is submitted with a form.\n *\n * `ref` forwards to the underlying label element.\n */\nexport const Switch = forwardRef(function Switch(\n  props: SwitchProps,\n  ref: Ref<HTMLLabelElement>,\n) {\n  const { children, className, ...rest } = props;\n  return (\n    <RACSwitch\n      {...rest}\n      ref={ref}\n      className={[s.switch, className].filter(Boolean).join(' ')}\n    >\n      <span className={s.track}>\n        <span className={s.thumb} />\n      </span>\n      {children !== undefined && <span className={s.label}>{children}</span>}\n    </RACSwitch>\n  );\n});\n"],"mappings":";;;;;;;;GCuBa,IAAS,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAG,MAAS;AACzC,QACE,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAH5D,CAKE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,QAAD,EAAM,WAAW,EAAE,OAAS,CAAA;GACvB,CAAA,EACN,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAQ;GAAgB,CAAA,CAC5D;;EAEd"}

package/dist/chunks/{Tabs-EAvYywil.js → Tabs-BFHikpml.js}

@@ -1,10 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
 import { Tab as t, TabList as n, TabPanel as r, Tabs as i } from "react-aria-components";
 var a = {
-	tabs: "_tabs_1mx31_1",
-	list: "_list_1mx31_18",
-	tab: "_tab_1mx31_1",
-	panel: "_panel_1mx31_81"
+	tabs: "_tabs_14q9c_1",
+	list: "_list_14q9c_18",
+	tab: "_tab_14q9c_1",
+	panel: "_panel_14q9c_81"
 };
 //#endregion
 //#region src/components/Tabs/Tabs.tsx
@@ -38,4 +38,4 @@ function l({ children: t, className: n, ...i }) {
 //#endregion
 export { o as i, s as n, l as r, c as t };
 
-//# sourceMappingURL=Tabs-EAvYywil.js.map
+//# sourceMappingURL=Tabs-BFHikpml.js.map

package/dist/chunks/Tabs-BFHikpml.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs-BFHikpml.js","names":[],"sources":["../../src/components/Tabs/Tabs.module.css","../../src/components/Tabs/Tabs.tsx"],"sourcesContent":[".tabs {\n  display: flex;\n  flex-direction: column;\n  gap: 0;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.tabs[data-orientation=\"horizontal\"] {\n  flex-direction: column;\n}\n\n.tabs[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  gap: var(--wzl-space-6);\n}\n\n.list {\n  display: flex;\n  gap: var(--wzl-space-1);\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.tabs[data-orientation=\"vertical\"] .list {\n  flex-direction: column;\n  border-bottom: none;\n  border-right: 1px solid var(--wzl-border);\n  padding-right: var(--wzl-space-4);\n}\n\n.tab {\n  position: relative;\n  padding: var(--wzl-space-3) var(--wzl-space-5);\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n  outline: none;\n  transition: color var(--wzl-motion-fast);\n}\n\n.tab[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.tab[data-selected] {\n  color: var(--wzl-fg);\n}\n\n.tab[data-selected]::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  height: 2px;\n  background: var(--wzl-accent-strong);\n}\n\n.tabs[data-orientation=\"vertical\"] .tab[data-selected]::after {\n  left: auto;\n  right: -9px;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  height: auto;\n}\n\n.tab[data-focus-visible] {\n  box-shadow: inset 0 0 0 2px var(--wzl-focus-ring);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.tab[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.panel {\n  padding: var(--wzl-space-6) 0;\n  outline: none;\n}\n\n.panel[data-focus-visible] {\n  box-shadow: inset 0 0 0 2px var(--wzl-focus-ring);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport {\n  Tabs as RACTabs,\n  TabList as RACTabList,\n  Tab as RACTab,\n  TabPanel as RACTabPanel,\n  type TabsProps as RACTabsProps,\n  type TabListProps as RACTabListProps,\n  type TabProps as RACTabProps,\n  type TabPanelProps as RACTabPanelProps,\n} from 'react-aria-components';\nimport s from './Tabs.module.css';\n\n/** Props for {@link Tabs}, on top of React Aria's `Tabs` props. */\nexport type TabsProps = Omit<RACTabsProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Tab set wrapping React Aria's Tabs, skinned against the `--wzl-*` tokens.\n * Holds a {@link TabList} and one {@link TabPanel} per tab.\n */\nexport function Tabs({ children, className, ...rest }: TabsProps) {\n  return (\n    <RACTabs {...rest} className={[s.tabs, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTabs>\n  );\n}\n\n/** Props for {@link TabList}, on top of React Aria's `TabList` props. */\nexport type TabListProps<T extends object> = Omit<RACTabListProps<T>, 'className'> & {\n  className?: string;\n};\n\n/** The row of tab buttons inside a {@link Tabs}. */\nexport function TabList<T extends object>({ className, ...rest }: TabListProps<T>) {\n  return <RACTabList<T> {...rest} className={[s.list, className].filter(Boolean).join(' ')} />;\n}\n\n/** Props for {@link Tab}, on top of React Aria's `Tab` props. */\nexport type TabProps = Omit<RACTabProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One tab button. Its `id` selects the {@link TabPanel} it reveals. */\nexport function Tab({ children, className, ...rest }: TabProps) {\n  return (\n    <RACTab {...rest} className={[s.tab, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTab>\n  );\n}\n\n/** Props for {@link TabPanel}, on top of React Aria's `TabPanel` props. */\nexport type TabPanelProps = Omit<RACTabPanelProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** The content shown for the {@link Tab} whose `id` matches this panel's. */\nexport function TabPanel({ children, className, ...rest }: TabPanelProps) {\n  return (\n    <RACTabPanel {...rest} className={[s.panel, className].filter(Boolean).join(' ')}>\n      {children}\n    </RACTabPanel>\n  );\n}\n"],"mappings":";;;;;;;;;;ACuBA,SAAgB,EAAK,EAAE,aAAU,cAAW,GAAG,KAAmB;AAChE,QACE,kBAAC,GAAD;EAAS,GAAI;EAAM,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACxE;EACO,CAAA;;AAUd,SAAgB,EAA0B,EAAE,cAAW,GAAG,KAAyB;AACjF,QAAO,kBAAC,GAAD;EAAe,GAAI;EAAM,WAAW,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA;;AAU9F,SAAgB,EAAI,EAAE,aAAU,cAAW,GAAG,KAAkB;AAC9D,QACE,kBAAC,GAAD;EAAQ,GAAI;EAAM,WAAW,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EACtE;EACM,CAAA;;AAWb,SAAgB,EAAS,EAAE,aAAU,cAAW,GAAG,KAAuB;AACxE,QACE,kBAAC,GAAD;EAAa,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC7E;EACW,CAAA"}