@weasel-js/ui 1.4.2 → 1.4.3

package/dist/chunks/{ToolButton-DpqTcgLa.js.map → ToolButton-CtDkqUIc.js.map}

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

package/dist/chunks/{ToolGroup-DOrObiiA.js → ToolGroup-zDtqt0QJ.js}

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

package/dist/chunks/{ToolGroup-DOrObiiA.js.map → ToolGroup-zDtqt0QJ.js.map}

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

package/dist/chunks/{ToolOptionsBar-f6b5u99i.js → ToolOptionsBar-B2xPWzJf.js}

@@ -24,4 +24,4 @@ function r(r) {
 //#endregion
 export { r as t };
 
-//# sourceMappingURL=ToolOptionsBar-f6b5u99i.js.map
+//# sourceMappingURL=ToolOptionsBar-B2xPWzJf.js.map

package/dist/chunks/{ToolOptionsBar-f6b5u99i.js.map → ToolOptionsBar-B2xPWzJf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolOptionsBar-f6b5u99i.js","names":[],"sources":["../../src/components/ToolOptionsBar/ToolOptionsBar.module.css","../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"sourcesContent":["/* Horizontal strip reserved above the workspace for contextual tool\n   options. Fixed height so mounting/unmounting content never resizes\n   the workspace beneath it — that's the whole reason this row exists\n   as permanent chrome rather than an on-demand overlay.\n\n   Overflow: when controls exceed the available width, `.controls`\n   scrolls horizontally rather than wrapping (which would grow the row\n   and defeat the fixed-height guarantee above) or clipping (which\n   would hide controls with no way to reach them). A flyout/long-press\n   affordance was considered and rejected — grouped, directly visible\n   layouts are preferred in this repo. */\n\n.root {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 8px;\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  color: var(--wzl-fg);\n  overflow: hidden;\n}\n\n.label {\n  flex: 0 0 auto;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n}\n\n/* Firefox gets a thin scrollbar for free via `scrollbar-width` above.\n * Chromium/WebKit need it spelled out — on a classic (non-overlay)\n * scrollbar theme (default on Windows Chrome/Edge), an unstyled\n * horizontal scrollbar is ~15-17px tall and renders *inside* this box,\n * clipping/off-centering the row's controls. That would reintroduce the\n * exact height instability the scroll-over-wrap overflow choice above\n * exists to avoid — just at the row's inner edge instead of its outer\n * one. Pin it thin and out of the way instead. */\n.controls::-webkit-scrollbar {\n  height: 4px;\n}\n.controls::-webkit-scrollbar-track {\n  background: transparent;\n}\n.controls::-webkit-scrollbar-thumb {\n  background: var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolOptionsBar.module.css';\n\n/** Props for {@link ToolOptionsBar}. */\nexport interface ToolOptionsBarProps {\n  /**\n   * Context label for the row — e.g. the active tool's name. Rendered\n   * before the children and doubles as the toolbar's `aria-label`. Omit\n   * it and the row still renders (it's a permanently reserved slot), just\n   * without an accessible name.\n   *\n   * Using `label` for both the visible text and `aria-label` means a\n   * screen reader announces it twice when landing on the toolbar (\"Text,\n   * toolbar\", then \"Text\" again when browsing into the visible span).\n   * `aria-labelledby` would avoid the echo at the cost of id plumbing and\n   * an awkward no-`id`-to-point-at case when `label` is omitted. The\n   * double-announcement is common enough for labelled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool\n * options — its first tenant is the character controls a text tool\n * exposes while a caret range is active. Pure chrome: it renders an\n * optional label and a children slot, nothing else. It knows nothing\n * about text, or about any specific tool — any tool can fill it.\n *\n * The row always renders, even with no `label` and no `children`,\n * because the app reserves its height permanently rather than mounting\n * it on demand — mounting mid-edit would resize the workspace under a\n * canvas that's sized to the page.\n *\n * `role=\"toolbar\"` without roving tabindex: the ARIA authoring practices\n * expect arrow-key roving focus across a toolbar's items, but this\n * component doesn't own or know the shape of its children — they're\n * arbitrary, possibly compound controls (`NumberField`, `Select`,\n * `ColorField`) that already use arrow keys for their own value editing.\n * Imposing roving focus here would fight those controls' own key\n * handling. Tab order falls back to normal DOM order for now; revisit\n * once the first tenant's control set is concrete and a roving-focus\n * contract can be designed in coordination with those controls.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, children, className } = props;\n  const cls = [s.root, className].filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={label}>\n      {label !== undefined && <span className={s.label}>{label}</span>}\n      <div className={s.controls}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AC8CA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,aAAU,iBAAc;AAEvC,QACE,kBAAC,OAAD;EAAK,WAFK,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAEnC;EAAK,MAAK;EAAU,cAAY;YAAhD,CACG,MAAU,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAQ;GAAa,CAAA,EAChE,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAW;GAAe,CAAA,CACxC"}
+{"version":3,"file":"ToolOptionsBar-B2xPWzJf.js","names":[],"sources":["../../src/components/ToolOptionsBar/ToolOptionsBar.module.css","../../src/components/ToolOptionsBar/ToolOptionsBar.tsx"],"sourcesContent":["/* Horizontal strip reserved above the workspace for contextual tool\n   options. Fixed height so mounting/unmounting content never resizes\n   the workspace beneath it — that's the whole reason this row exists\n   as permanent chrome rather than an on-demand overlay.\n\n   Overflow: when controls exceed the available width, `.controls`\n   scrolls horizontally rather than wrapping (which would grow the row\n   and defeat the fixed-height guarantee above) or clipping (which\n   would hide controls with no way to reach them). A flyout/long-press\n   affordance was considered and rejected — grouped, directly visible\n   layouts are preferred in this repo. */\n\n.root {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: var(--wzl-tb-height, 28px);\n  padding: 0 8px;\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  color: var(--wzl-fg);\n  overflow: hidden;\n}\n\n.label {\n  flex: 0 0 auto;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.controls {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n}\n\n/* Firefox gets a thin scrollbar for free via `scrollbar-width` above.\n * Chromium/WebKit need it spelled out — on a classic (non-overlay)\n * scrollbar theme (default on Windows Chrome/Edge), an unstyled\n * horizontal scrollbar is ~15-17px tall and renders *inside* this box,\n * clipping/off-centering the row's controls. That would reintroduce the\n * exact height instability the scroll-over-wrap overflow choice above\n * exists to avoid — just at the row's inner edge instead of its outer\n * one. Pin it thin and out of the way instead. */\n.controls::-webkit-scrollbar {\n  height: 4px;\n}\n.controls::-webkit-scrollbar-track {\n  background: transparent;\n}\n.controls::-webkit-scrollbar-thumb {\n  background: var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolOptionsBar.module.css';\n\n/** Props for {@link ToolOptionsBar}. */\nexport interface ToolOptionsBarProps {\n  /**\n   * Context label for the row — e.g. the active tool's name. Rendered\n   * before the children and doubles as the toolbar's `aria-label`. Omit\n   * it and the row still renders (it's a permanently reserved slot), just\n   * without an accessible name.\n   *\n   * Using `label` for both the visible text and `aria-label` means a\n   * screen reader announces it twice when landing on the toolbar (\"Text,\n   * toolbar\", then \"Text\" again when browsing into the visible span).\n   * `aria-labelledby` would avoid the echo at the cost of id plumbing and\n   * an awkward no-`id`-to-point-at case when `label` is omitted. The\n   * double-announcement is common enough for labelled landmark regions\n   * that it's left as-is — considered, not missed.\n   */\n  label?: string;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Horizontal strip reserved above the workspace for contextual tool\n * options — its first tenant is the character controls a text tool\n * exposes while a caret range is active. Pure chrome: it renders an\n * optional label and a children slot, nothing else. It knows nothing\n * about text, or about any specific tool — any tool can fill it.\n *\n * The row always renders, even with no `label` and no `children`,\n * because the app reserves its height permanently rather than mounting\n * it on demand — mounting mid-edit would resize the workspace under a\n * canvas that's sized to the page.\n *\n * `role=\"toolbar\"` without roving tabindex: the ARIA authoring practices\n * expect arrow-key roving focus across a toolbar's items, but this\n * component doesn't own or know the shape of its children — they're\n * arbitrary, possibly compound controls (`NumberField`, `Select`,\n * `ColorField`) that already use arrow keys for their own value editing.\n * Imposing roving focus here would fight those controls' own key\n * handling. Tab order falls back to normal DOM order for now; revisit\n * once the first tenant's control set is concrete and a roving-focus\n * contract can be designed in coordination with those controls.\n */\nexport function ToolOptionsBar(props: ToolOptionsBarProps) {\n  const { label, children, className } = props;\n  const cls = [s.root, className].filter(Boolean).join(' ');\n  return (\n    <div className={cls} role=\"toolbar\" aria-label={label}>\n      {label !== undefined && <span className={s.label}>{label}</span>}\n      <div className={s.controls}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AC8CA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,UAAO,aAAU,iBAAc;AAEvC,QACE,kBAAC,OAAD;EAAK,WAFK,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAEnC;EAAK,MAAK;EAAU,cAAY;YAAhD,CACG,MAAU,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;aAAQ;GAAa,CAAA,EAChE,kBAAC,OAAD;GAAK,WAAW,EAAE;GAAW;GAAe,CAAA,CACxC"}

package/dist/chunks/{ToolPalette-B_Zjw6dC.js → ToolPalette-BbrMHfQ9.js}

@@ -1,7 +1,7 @@
-import { t as e } from "./keyGlyph-L5bsDQe5.js";
-import { t } from "./useRovingTabIndex-DqXFNDaD.js";
-import { t as n } from "./ToolButton-DpqTcgLa.js";
-import { t as r } from "./ToolGroup-DOrObiiA.js";
+import { t as e } from "./keyGlyph-Bp0wnLHn.js";
+import { t } from "./useRovingTabIndex-Dkpf_KhN.js";
+import { t as n } from "./ToolButton-CtDkqUIc.js";
+import { t as r } from "./ToolGroup-zDtqt0QJ.js";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { UnknownIcon as o } from "@weasel-js/core";
 import { Fragment as s } from "react";
@@ -94,4 +94,4 @@ function _(e) {
 //#endregion
 export { d as n, u as r, _ as t };
 
-//# sourceMappingURL=ToolPalette-B_Zjw6dC.js.map
+//# sourceMappingURL=ToolPalette-BbrMHfQ9.js.map

package/dist/chunks/{ToolPalette-B_Zjw6dC.js.map → ToolPalette-BbrMHfQ9.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ToolPalette-B_Zjw6dC.js","names":[],"sources":["../../src/components/ToolPalette/ToolPalette.module.css","../../src/components/ToolPalette/formatShortcut.ts","../../src/components/ToolPalette/ToolPalette.tsx"],"sourcesContent":[".palette {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 4px;\n  user-select: none;\n}\n.palette.horizontal {\n  flex-direction: row;\n}\n\n/* Marker only — `useRovingTabIndex` finds the palette's buttons by this class.\n   Carries no styles; deleting it breaks keyboard navigation. */\n.paletteBtn {}\n\n/* Applied to ineligible tool buttons in the active mode. */\n.ineligibleBtn {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.separator {\n  background: var(--wzl-border);\n}\n.palette:not(.horizontal) .separator {\n  height: 1px;\n  margin: 2px 0;\n}\n.palette.horizontal .separator {\n  width: 1px;\n  margin: 0 2px;\n}\n","import { keyGlyph } from '../Keycaps/keyGlyph';\n\nexport interface ShortcutInput {\n  key: string | readonly string[];\n  mod?: boolean;\n  alt?: boolean;\n  shift?: boolean | 'optional';\n}\n\n/** Format a shortcut as an array of display chips, one per key — modifier\n *  icons (⌘, ↑, ⌥) followed by the key glyph. UIs that want a boxed\n *  per-key look render each chip in its own element. `shift: 'optional'` is\n *  treated as falsy. */\nexport function formatShortcutParts(b: ShortcutInput | undefined): readonly string[] | undefined {\n  if (!b) return undefined;\n  const rawKey = Array.isArray(b.key) ? b.key[0] : (b.key as string);\n  const parts: string[] = [];\n  if (b.mod) parts.push('⌘');\n  if (b.shift === true) parts.push('⇧');\n  if (b.alt) parts.push('⌥');\n  parts.push(keyGlyph(rawKey));\n  return parts;\n}\n\n/** Format a shortcut as a single display string. Order: mod, shift, alt,\n *  key. Returns `undefined` for `undefined` input so callers can `??` a\n *  fallback. When `key` is an array, the first element is used. `shift: 'optional'`\n *  is treated as falsy. */\nexport function formatShortcut(b: ShortcutInput | undefined): string | undefined {\n  const parts = formatShortcutParts(b);\n  return parts ? parts.join('') : undefined;\n}\n","import { Fragment, type ReactNode } from 'react';\nimport { UnknownIcon } from '@weasel-js/core';\nimport type { AnyTool, ToolsApi } from '@weasel-js/core';\nimport { eligibleContribution, type ModeRegistry } from '@weasel-js/modes';\nimport { ToolButton } from '../ToolButton';\nimport { ToolGroup } from '../ToolGroup';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport s from './ToolPalette.module.css';\nimport { formatShortcut, type ShortcutInput } from './formatShortcut';\n\nconst DEFAULT_GROUP_ORDER = ['select', 'shape', 'draw', 'type', 'view'] as const;\nconst MISC = 'misc';\n\nfunction partitionByGroup(list: AnyTool[]): Map<string, AnyTool[]> {\n  const groups = new Map<string, AnyTool[]>();\n  for (const tool of list) {\n    const g = tool.presentation?.group ?? MISC;\n    const bucket = groups.get(g) ?? [];\n    bucket.push(tool);\n    groups.set(g, bucket);\n  }\n  return groups;\n}\n\nfunction orderedGroupKeys(\n  groups: Map<string, AnyTool[]>,\n  groupOrder: readonly string[],\n): string[] {\n  const seen = new Set(groups.keys());\n  const ordered: string[] = [];\n  for (const known of groupOrder) {\n    if (seen.has(known)) {\n      ordered.push(known);\n      seen.delete(known);\n    }\n  }\n  // Unknown groups in insertion order (Map preserves it), misc last.\n  for (const key of groups.keys()) {\n    if (seen.has(key) && key !== MISC) {\n      ordered.push(key);\n      seen.delete(key);\n    }\n  }\n  if (seen.has(MISC)) ordered.push(MISC);\n  return ordered;\n}\n\nfunction resolveIcon(tool: AnyTool): ReactNode {\n  const rawIcon = tool.presentation?.icon;\n  if (rawIcon == null) return <UnknownIcon />;\n  if (typeof rawIcon === 'function') return rawIcon(undefined);\n  return rawIcon;\n}\n\n/** Props for {@link ToolPalette}. */\nexport interface ToolPaletteProps {\n  tools: ToolsApi;\n  orientation?: 'vertical' | 'horizontal';\n  className?: string;\n  /** Derive the keyboard shortcut for a tool button from the action registry.\n   *  Called with the tool's id; return `undefined` to suppress a chip. When\n   *  omitted, falls back to `tool.keybinding` (legacy path). */\n  lookupShortcut?: (toolId: string) => ShortcutInput | undefined;\n  /**\n   * Optional mode registry. When provided, tools whose `capabilities` do not\n   * match the current mode are rendered greyed-out, aria-disabled, and their\n   * onClick is suppressed. When omitted, all tools are treated as eligible\n   * (preserves existing behaviour in consumers that haven't wired a registry).\n   */\n  modeRegistry?: ModeRegistry;\n  /**\n   * Presentation-group display order. Groups not listed keep their registry\n   * insertion order after the listed ones; `misc` always renders last.\n   * Defaults to `['select', 'shape', 'draw', 'type', 'view']`.\n   */\n  groupOrder?: readonly string[];\n}\n\n/**\n * Toolbar of the registered tools, split into separator-divided groups by\n * each tool's presentation group and navigable by arrow keys. Clicking a\n * button makes that tool active.\n *\n * Given a `modeRegistry`, tools whose capabilities the current mode does not\n * allow render greyed out and inert rather than disappearing.\n */\nexport function ToolPalette(props: ToolPaletteProps) {\n  const {\n    tools, orientation = 'vertical', className, lookupShortcut, modeRegistry,\n    groupOrder = DEFAULT_GROUP_ORDER,\n  } = props;\n  const list = Object.values(tools.registry);\n  const groups = partitionByGroup(list);\n  const groupKeys = orderedGroupKeys(groups, groupOrder);\n  const cls = [s.palette, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  // Flat, in DOM order — the roving-tabindex hook indexes by this order.\n  const ordered = groupKeys.flatMap((k) => groups.get(k)!);\n  const eligibility = ordered.map(\n    (tool) => (modeRegistry ? eligibleContribution(modeRegistry, tool) : true),\n  );\n  const activeIndex = ordered.findIndex((t) => t.id === tools.active);\n  const roving = useRovingTabIndex({\n    items: eligibility.map((enabled) => ({ disabled: !enabled })),\n    itemClassName: s.paletteBtn,\n    // An ineligible active tool can't hold the tab stop; fall back to the\n    // hook's first-enabled default.\n    ...(activeIndex >= 0 && eligibility[activeIndex] ? { tabStopIndex: activeIndex } : {}),\n  });\n  let index = -1;\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={cls}\n      role=\"toolbar\"\n      aria-label=\"Tools\"\n    >\n      {groupKeys.map((key, i) => (\n        <Fragment key={key}>\n          {i > 0 && (\n            <div\n              className={s.separator}\n              role=\"separator\"\n              aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n            />\n          )}\n          <ToolGroup orientation={orientation} groupKey={key}>\n            {groups.get(key)!.map((tool) => {\n              const i = ++index;\n              const label = tool.presentation?.label ?? tool.id;\n              const shortcut = tool.presentation?.shortcut\n                ?? formatShortcut(lookupShortcut ? lookupShortcut(tool.id) : tool.keybinding);\n              const enabled = eligibility[i];\n              const modeName = modeRegistry ? modeRegistry.current().id : undefined;\n              const resolvedTitle = !enabled && modeName\n                ? `${label}${shortcut ? ` (${shortcut})` : ''} — disabled in ${modeName} mode`\n                : undefined;\n              return (\n                <ToolButton\n                  key={tool.id}\n                  icon={resolveIcon(tool)}\n                  label={label}\n                  shortcut={shortcut}\n                  active={tools.active === tool.id}\n                  tabbable={roving.tabIndexFor(i) === 0}\n                  ariaDisabled={!enabled}\n                  className={[s.paletteBtn, !enabled && s.ineligibleBtn].filter(Boolean).join(' ')}\n                  title={resolvedTitle}\n                  onClick={enabled ? () => tools.setActive(tool.id) : () => {}}\n                  onKeyDown={roving.onKeyDown(i)}\n                />\n              );\n            })}\n          </ToolGroup>\n        </Fragment>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToolPalette-BbrMHfQ9.js","names":[],"sources":["../../src/components/ToolPalette/ToolPalette.module.css","../../src/components/ToolPalette/formatShortcut.ts","../../src/components/ToolPalette/ToolPalette.tsx"],"sourcesContent":[".palette {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 4px;\n  user-select: none;\n}\n.palette.horizontal {\n  flex-direction: row;\n}\n\n/* Marker only — `useRovingTabIndex` finds the palette's buttons by this class.\n   Carries no styles; deleting it breaks keyboard navigation. */\n.paletteBtn {}\n\n/* Applied to ineligible tool buttons in the active mode. */\n.ineligibleBtn {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n\n.separator {\n  background: var(--wzl-border);\n}\n.palette:not(.horizontal) .separator {\n  height: 1px;\n  margin: 2px 0;\n}\n.palette.horizontal .separator {\n  width: 1px;\n  margin: 0 2px;\n}\n","import { keyGlyph } from '../Keycaps/keyGlyph';\n\nexport interface ShortcutInput {\n  key: string | readonly string[];\n  mod?: boolean;\n  alt?: boolean;\n  shift?: boolean | 'optional';\n}\n\n/** Format a shortcut as an array of display chips, one per key — modifier\n *  icons (⌘, ↑, ⌥) followed by the key glyph. UIs that want a boxed\n *  per-key look render each chip in its own element. `shift: 'optional'` is\n *  treated as falsy. */\nexport function formatShortcutParts(b: ShortcutInput | undefined): readonly string[] | undefined {\n  if (!b) return undefined;\n  const rawKey = Array.isArray(b.key) ? b.key[0] : (b.key as string);\n  const parts: string[] = [];\n  if (b.mod) parts.push('⌘');\n  if (b.shift === true) parts.push('⇧');\n  if (b.alt) parts.push('⌥');\n  parts.push(keyGlyph(rawKey));\n  return parts;\n}\n\n/** Format a shortcut as a single display string. Order: mod, shift, alt,\n *  key. Returns `undefined` for `undefined` input so callers can `??` a\n *  fallback. When `key` is an array, the first element is used. `shift: 'optional'`\n *  is treated as falsy. */\nexport function formatShortcut(b: ShortcutInput | undefined): string | undefined {\n  const parts = formatShortcutParts(b);\n  return parts ? parts.join('') : undefined;\n}\n","import { Fragment, type ReactNode } from 'react';\nimport { UnknownIcon } from '@weasel-js/core';\nimport type { AnyTool, ToolsApi } from '@weasel-js/core';\nimport { eligibleContribution, type ModeRegistry } from '@weasel-js/modes';\nimport { ToolButton } from '../ToolButton';\nimport { ToolGroup } from '../ToolGroup';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport s from './ToolPalette.module.css';\nimport { formatShortcut, type ShortcutInput } from './formatShortcut';\n\nconst DEFAULT_GROUP_ORDER = ['select', 'shape', 'draw', 'type', 'view'] as const;\nconst MISC = 'misc';\n\nfunction partitionByGroup(list: AnyTool[]): Map<string, AnyTool[]> {\n  const groups = new Map<string, AnyTool[]>();\n  for (const tool of list) {\n    const g = tool.presentation?.group ?? MISC;\n    const bucket = groups.get(g) ?? [];\n    bucket.push(tool);\n    groups.set(g, bucket);\n  }\n  return groups;\n}\n\nfunction orderedGroupKeys(\n  groups: Map<string, AnyTool[]>,\n  groupOrder: readonly string[],\n): string[] {\n  const seen = new Set(groups.keys());\n  const ordered: string[] = [];\n  for (const known of groupOrder) {\n    if (seen.has(known)) {\n      ordered.push(known);\n      seen.delete(known);\n    }\n  }\n  // Unknown groups in insertion order (Map preserves it), misc last.\n  for (const key of groups.keys()) {\n    if (seen.has(key) && key !== MISC) {\n      ordered.push(key);\n      seen.delete(key);\n    }\n  }\n  if (seen.has(MISC)) ordered.push(MISC);\n  return ordered;\n}\n\nfunction resolveIcon(tool: AnyTool): ReactNode {\n  const rawIcon = tool.presentation?.icon;\n  if (rawIcon == null) return <UnknownIcon />;\n  if (typeof rawIcon === 'function') return rawIcon(undefined);\n  return rawIcon;\n}\n\n/** Props for {@link ToolPalette}. */\nexport interface ToolPaletteProps {\n  tools: ToolsApi;\n  orientation?: 'vertical' | 'horizontal';\n  className?: string;\n  /** Derive the keyboard shortcut for a tool button from the action registry.\n   *  Called with the tool's id; return `undefined` to suppress a chip. When\n   *  omitted, falls back to `tool.keybinding` (legacy path). */\n  lookupShortcut?: (toolId: string) => ShortcutInput | undefined;\n  /**\n   * Optional mode registry. When provided, tools whose `capabilities` do not\n   * match the current mode are rendered greyed-out, aria-disabled, and their\n   * onClick is suppressed. When omitted, all tools are treated as eligible\n   * (preserves existing behaviour in consumers that haven't wired a registry).\n   */\n  modeRegistry?: ModeRegistry;\n  /**\n   * Presentation-group display order. Groups not listed keep their registry\n   * insertion order after the listed ones; `misc` always renders last.\n   * Defaults to `['select', 'shape', 'draw', 'type', 'view']`.\n   */\n  groupOrder?: readonly string[];\n}\n\n/**\n * Toolbar of the registered tools, split into separator-divided groups by\n * each tool's presentation group and navigable by arrow keys. Clicking a\n * button makes that tool active.\n *\n * Given a `modeRegistry`, tools whose capabilities the current mode does not\n * allow render greyed out and inert rather than disappearing.\n */\nexport function ToolPalette(props: ToolPaletteProps) {\n  const {\n    tools, orientation = 'vertical', className, lookupShortcut, modeRegistry,\n    groupOrder = DEFAULT_GROUP_ORDER,\n  } = props;\n  const list = Object.values(tools.registry);\n  const groups = partitionByGroup(list);\n  const groupKeys = orderedGroupKeys(groups, groupOrder);\n  const cls = [s.palette, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  // Flat, in DOM order — the roving-tabindex hook indexes by this order.\n  const ordered = groupKeys.flatMap((k) => groups.get(k)!);\n  const eligibility = ordered.map(\n    (tool) => (modeRegistry ? eligibleContribution(modeRegistry, tool) : true),\n  );\n  const activeIndex = ordered.findIndex((t) => t.id === tools.active);\n  const roving = useRovingTabIndex({\n    items: eligibility.map((enabled) => ({ disabled: !enabled })),\n    itemClassName: s.paletteBtn,\n    // An ineligible active tool can't hold the tab stop; fall back to the\n    // hook's first-enabled default.\n    ...(activeIndex >= 0 && eligibility[activeIndex] ? { tabStopIndex: activeIndex } : {}),\n  });\n  let index = -1;\n\n  return (\n    <div\n      ref={roving.rootRef}\n      className={cls}\n      role=\"toolbar\"\n      aria-label=\"Tools\"\n    >\n      {groupKeys.map((key, i) => (\n        <Fragment key={key}>\n          {i > 0 && (\n            <div\n              className={s.separator}\n              role=\"separator\"\n              aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}\n            />\n          )}\n          <ToolGroup orientation={orientation} groupKey={key}>\n            {groups.get(key)!.map((tool) => {\n              const i = ++index;\n              const label = tool.presentation?.label ?? tool.id;\n              const shortcut = tool.presentation?.shortcut\n                ?? formatShortcut(lookupShortcut ? lookupShortcut(tool.id) : tool.keybinding);\n              const enabled = eligibility[i];\n              const modeName = modeRegistry ? modeRegistry.current().id : undefined;\n              const resolvedTitle = !enabled && modeName\n                ? `${label}${shortcut ? ` (${shortcut})` : ''} — disabled in ${modeName} mode`\n                : undefined;\n              return (\n                <ToolButton\n                  key={tool.id}\n                  icon={resolveIcon(tool)}\n                  label={label}\n                  shortcut={shortcut}\n                  active={tools.active === tool.id}\n                  tabbable={roving.tabIndexFor(i) === 0}\n                  ariaDisabled={!enabled}\n                  className={[s.paletteBtn, !enabled && s.ineligibleBtn].filter(Boolean).join(' ')}\n                  title={resolvedTitle}\n                  onClick={enabled ? () => tools.setActive(tool.id) : () => {}}\n                  onKeyDown={roving.onKeyDown(i)}\n                />\n              );\n            })}\n          </ToolGroup>\n        </Fragment>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/Tooltip-BHre_vbI.js

@@ -0,0 +1,42 @@
+import { r as e } from "./portalHost-CjpCnuGU.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { OverlayArrow as i, Tooltip as a, TooltipTrigger as o } from "react-aria-components";
+var s = {
+	tooltip: "_tooltip_1ev6z_1",
+	arrow: "_arrow_1ev6z_22"
+};
+//#endregion
+//#region src/components/Tooltip/Tooltip.tsx
+function c(e) {
+	let { delay: t = 600, closeDelay: r = 0, ...i } = e;
+	return /* @__PURE__ */ n(o, {
+		delay: t,
+		closeDelay: r,
+		...i
+	});
+}
+function l(o) {
+	let { children: c, className: l, placement: u = "top", offset: d = 8, portalContainer: f, ...p } = o, { anchor: m, portalProps: h } = e(f);
+	return /* @__PURE__ */ r(t, { children: [m, /* @__PURE__ */ r(a, {
+		...p,
+		placement: u,
+		offset: d,
+		className: [s.tooltip, l].filter(Boolean).join(" "),
+		"data-weasel-overlay": "",
+		...h,
+		children: [/* @__PURE__ */ n(i, {
+			className: s.arrow,
+			children: /* @__PURE__ */ n("svg", {
+				width: 8,
+				height: 8,
+				viewBox: "0 0 8 8",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ n("path", { d: "M0 0 L4 4 L8 0" })
+			})
+		}), c]
+	})] });
+}
+//#endregion
+export { c as n, l as t };
+
+//# sourceMappingURL=Tooltip-BHre_vbI.js.map

package/dist/chunks/Tooltip-BHre_vbI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-BHre_vbI.js","names":[],"sources":["../../src/components/Tooltip/Tooltip.module.css","../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":[".tooltip {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1.3;\n  padding: 4px 8px;\n  max-width: 260px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.tooltip[data-entering],\n.tooltip[data-exiting] {\n  opacity: 0;\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--wzl-border);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n","import type { ReactNode } from 'react';\nimport {\n  TooltipTrigger as RACTooltipTrigger,\n  Tooltip as RACTooltip,\n  OverlayArrow,\n  type TooltipProps as RACTooltipProps,\n  type TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport s from './Tooltip.module.css';\n\n/**\n * Props for {@link TooltipTrigger} — React Aria's `TooltipTrigger` props\n * unchanged.\n */\nexport type TooltipTriggerProps = TooltipTriggerComponentProps;\n\n/**\n * TooltipTrigger with kit defaults: ~600 ms open delay, instant close.\n * Wrap a focusable trigger plus a `<Tooltip>`. Non-RAC triggers (plain\n * `<button>` etc.) must be wrapped in `<Focusable>` from\n * react-aria-components so hover/focus props reach the DOM node.\n *\n * Caveat: while a tooltip is open, react-aria captures the first Escape\n * keydown (document-level, capture phase) to dismiss it — app-level\n * Escape handlers (deselect, cancel gesture) see only the second press.\n */\nexport function TooltipTrigger(props: TooltipTriggerProps) {\n  const { delay = 600, closeDelay = 0, ...rest } = props;\n  return <RACTooltipTrigger delay={delay} closeDelay={closeDelay} {...rest} />;\n}\n\n/** Props for {@link Tooltip}, on top of React Aria's `Tooltip` props. */\nexport type TooltipProps = Omit<WithoutPortalTarget<RACTooltipProps>, 'children' | 'className'> &\n  OverlayPortalProps & {\n    children?: ReactNode;\n    className?: string;\n  };\n\n/**\n * Tooltip bubble with an arrow pointing at the trigger. Non-interactive\n * content only (ARIA tooltip semantics). Use inside `<TooltipTrigger>`.\n */\nexport function Tooltip(props: TooltipProps) {\n  const { children, className, placement = 'top', offset = 8, portalContainer, ...rest } = props;\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  return (\n    <>\n      {anchor}\n      <RACTooltip\n        {...rest}\n        placement={placement}\n        offset={offset}\n        className={[s.tooltip, className].filter(Boolean).join(' ')}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={8} height={8} viewBox=\"0 0 8 8\" aria-hidden=\"true\">\n            <path d=\"M0 0 L4 4 L8 0\" />\n          </svg>\n        </OverlayArrow>\n        {children}\n      </RACTooltip>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;AC2BA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,WAAQ,KAAK,gBAAa,GAAG,GAAG,MAAS;AACjD,QAAO,kBAAC,GAAD;EAA0B;EAAmB;EAAY,GAAI;EAAQ,CAAA;;AAc9E,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EAAE,aAAU,cAAW,eAAY,OAAO,YAAS,GAAG,oBAAiB,GAAG,MAAS,GACnF,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AACjE,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,GAAD;EACE,GAAI;EACO;EACH;EACR,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC3D,uBAAoB;EACpB,GAAI;YANN,CAQE,kBAAC,GAAD;GAAc,WAAW,EAAE;aACzB,kBAAC,OAAD;IAAK,OAAO;IAAG,QAAQ;IAAG,SAAQ;IAAU,eAAY;cACtD,kBAAC,QAAD,EAAM,GAAE,kBAAmB,CAAA;IACvB,CAAA;GACO,CAAA,EACd,EACU;IACZ,EAAA,CAAA"}

package/dist/chunks/{keyGlyph-L5bsDQe5.js → keyGlyph-Bp0wnLHn.js}

@@ -19,4 +19,4 @@ function e(e) {
 //#endregion
 export { e as t };
 
-//# sourceMappingURL=keyGlyph-L5bsDQe5.js.map
+//# sourceMappingURL=keyGlyph-Bp0wnLHn.js.map

package/dist/chunks/{keyGlyph-L5bsDQe5.js.map → keyGlyph-Bp0wnLHn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"keyGlyph-L5bsDQe5.js","names":[],"sources":["../../src/components/Keycaps/keyGlyph.ts"],"sourcesContent":["/** Apple-style glyph for a DOM `KeyboardEvent.key` value. Covers escape,\n *  delete/backspace, arrows, enter/return, tab, space. Unknown keys are\n *  upper-cased (so `'a'` reads as `A` on a keycap) and returned unchanged\n *  otherwise — making this safe to apply uniformly without a `has-glyph`\n *  check at the call site. */\nexport function keyGlyph(rawKey: string): string {\n  switch (rawKey) {\n    case 'Escape': return '⎋';\n    case 'Backspace': return '⌫';\n    case 'Delete': return '⌦';\n    case 'ArrowUp': return '↑';\n    case 'ArrowDown': return '↓';\n    case 'ArrowLeft': return '←';\n    case 'ArrowRight': return '→';\n    case 'Enter':\n    case 'Return': return '↵';\n    case 'Tab': return '⇥';\n    case ' ':\n    case 'Space': return '␣';\n    default: return rawKey.toUpperCase();\n  }\n}\n"],"mappings":";AAKA,SAAgB,EAAS,GAAwB;AAC/C,SAAQ,GAAR;EACE,KAAK,SAAU,QAAO;EACtB,KAAK,YAAa,QAAO;EACzB,KAAK,SAAU,QAAO;EACtB,KAAK,UAAW,QAAO;EACvB,KAAK,YAAa,QAAO;EACzB,KAAK,YAAa,QAAO;EACzB,KAAK,aAAc,QAAO;EAC1B,KAAK;EACL,KAAK,SAAU,QAAO;EACtB,KAAK,MAAO,QAAO;EACnB,KAAK;EACL,KAAK,QAAS,QAAO;EACrB,QAAS,QAAO,EAAO,aAAa"}
+{"version":3,"file":"keyGlyph-Bp0wnLHn.js","names":[],"sources":["../../src/components/Keycaps/keyGlyph.ts"],"sourcesContent":["/** Apple-style glyph for a DOM `KeyboardEvent.key` value. Covers escape,\n *  delete/backspace, arrows, enter/return, tab, space. Unknown keys are\n *  upper-cased (so `'a'` reads as `A` on a keycap) and returned unchanged\n *  otherwise — making this safe to apply uniformly without a `has-glyph`\n *  check at the call site. */\nexport function keyGlyph(rawKey: string): string {\n  switch (rawKey) {\n    case 'Escape': return '⎋';\n    case 'Backspace': return '⌫';\n    case 'Delete': return '⌦';\n    case 'ArrowUp': return '↑';\n    case 'ArrowDown': return '↓';\n    case 'ArrowLeft': return '←';\n    case 'ArrowRight': return '→';\n    case 'Enter':\n    case 'Return': return '↵';\n    case 'Tab': return '⇥';\n    case ' ':\n    case 'Space': return '␣';\n    default: return rawKey.toUpperCase();\n  }\n}\n"],"mappings":";AAKA,SAAgB,EAAS,GAAwB;AAC/C,SAAQ,GAAR;EACE,KAAK,SAAU,QAAO;EACtB,KAAK,YAAa,QAAO;EACzB,KAAK,SAAU,QAAO;EACtB,KAAK,UAAW,QAAO;EACvB,KAAK,YAAa,QAAO;EACzB,KAAK,YAAa,QAAO;EACzB,KAAK,aAAc,QAAO;EAC1B,KAAK;EACL,KAAK,SAAU,QAAO;EACtB,KAAK,MAAO,QAAO;EACnB,KAAK;EACL,KAAK,QAAS,QAAO;EACrB,QAAS,QAAO,EAAO,aAAa"}

package/dist/chunks/{number-Dy633mrx.js → number-Bv1nbhOJ.js}

@@ -15,4 +15,4 @@ function i(e) {
 //#endregion
 export { n as i, t as n, i as r, e as t };
 
-//# sourceMappingURL=number-Dy633mrx.js.map
+//# sourceMappingURL=number-Bv1nbhOJ.js.map

package/dist/chunks/{number-Dy633mrx.js.map → number-Bv1nbhOJ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"number-Dy633mrx.js","names":[],"sources":["../../src/format/number.ts"],"sourcesContent":["/**\n * Display-formatter for numbers. Use this anywhere a number is shown to\n * a user. The whole point: negative values get prefixed with the real\n * MINUS SIGN (U+2212) instead of the ASCII HYPHEN-MINUS (U+002D) that\n * `toLocaleString` and template literals produce by default.\n *\n * U+2212 is the same visual width as `+` and reads as a sign rather\n * than a hyphen — columns of signed numbers align cleanly and the\n * glyph doesn't get confused with a bullet or list dash.\n */\nexport const MINUS_SIGN = '−';\n\n/**\n * Formats a number for display, substituting {@link MINUS_SIGN} for the ASCII\n * hyphen `toLocaleString` emits. Non-finite values stringify as-is.\n */\nexport function formatNumber(value: number, options?: Intl.NumberFormatOptions): string {\n  const formatted = Number.isFinite(value)\n    ? value.toLocaleString(undefined, options)\n    : String(value);\n  return formatted.replace(/^-/, MINUS_SIGN);\n}\n\n/**\n * Parses a string that may carry {@link MINUS_SIGN} in place of the ASCII\n * hyphen. The inverse of {@link formatNumber} for any editing surface that\n * renders its value through it and reads the edited text back.\n */\nexport function parseSignedNumber(text: string): number {\n  return Number(text.replace(MINUS_SIGN, '-'));\n}\n\n/** {@link String} with the leading ASCII hyphen swapped for {@link MINUS_SIGN}.\n *  Locale-independent, unlike `toLocaleString`. */\nfunction signedString(value: number): string {\n  return String(value).replace(/^-/, MINUS_SIGN);\n}\n\n/**\n * Formats a zoom factor for display. Below 2x a percentage reads naturally;\n * past it the numbers get long and a multiplier is what people say out loud,\n * so 250% shows as `2.5x`. Past 100x a tenth is noise, so the decimal is\n * dropped and thousands are grouped: `1009.74` reads as `1,010x`.\n */\nexport function formatZoom(zoom: number): string {\n  if (!Number.isFinite(zoom)) return String(zoom);\n  if (zoom <= 2) return `${signedString(Math.round(zoom * 100))}%`;\n  if (zoom >= 100) return `${Math.round(zoom).toLocaleString('en-US')}x`;\n  return `${signedString(Math.round(zoom * 10) / 10)}x`;\n}\n"],"mappings":";AAUA,IAAa,IAAa;AAM1B,SAAgB,EAAa,GAAe,GAA4C;AAItF,SAHkB,OAAO,SAAS,EAAM,GACpC,EAAM,eAAe,KAAA,GAAW,EAAQ,GACxC,OAAO,EAAM,EACA,QAAQ,MAAA,IAAiB;;AAQ5C,SAAgB,EAAkB,GAAsB;AACtD,QAAO,OAAO,EAAK,QAAA,KAAoB,IAAI,CAAC;;AAK9C,SAAS,EAAa,GAAuB;AAC3C,QAAO,OAAO,EAAM,CAAC,QAAQ,MAAA,IAAiB;;AAShD,SAAgB,EAAW,GAAsB;AAI/C,QAHK,OAAO,SAAS,EAAK,GACtB,KAAQ,IAAU,GAAG,EAAa,KAAK,MAAM,IAAO,IAAI,CAAC,CAAC,KAC1D,KAAQ,MAAY,GAAG,KAAK,MAAM,EAAK,CAAC,eAAe,QAAQ,CAAC,KAC7D,GAAG,EAAa,KAAK,MAAM,IAAO,GAAG,GAAG,GAAG,CAAC,KAHhB,OAAO,EAAK"}
+{"version":3,"file":"number-Bv1nbhOJ.js","names":[],"sources":["../../src/format/number.ts"],"sourcesContent":["/**\n * Display-formatter for numbers. Use this anywhere a number is shown to\n * a user. The whole point: negative values get prefixed with the real\n * MINUS SIGN (U+2212) instead of the ASCII HYPHEN-MINUS (U+002D) that\n * `toLocaleString` and template literals produce by default.\n *\n * U+2212 is the same visual width as `+` and reads as a sign rather\n * than a hyphen — columns of signed numbers align cleanly and the\n * glyph doesn't get confused with a bullet or list dash.\n */\nexport const MINUS_SIGN = '−';\n\n/**\n * Formats a number for display, substituting {@link MINUS_SIGN} for the ASCII\n * hyphen `toLocaleString` emits. Non-finite values stringify as-is.\n */\nexport function formatNumber(value: number, options?: Intl.NumberFormatOptions): string {\n  const formatted = Number.isFinite(value)\n    ? value.toLocaleString(undefined, options)\n    : String(value);\n  return formatted.replace(/^-/, MINUS_SIGN);\n}\n\n/**\n * Parses a string that may carry {@link MINUS_SIGN} in place of the ASCII\n * hyphen. The inverse of {@link formatNumber} for any editing surface that\n * renders its value through it and reads the edited text back.\n */\nexport function parseSignedNumber(text: string): number {\n  return Number(text.replace(MINUS_SIGN, '-'));\n}\n\n/** {@link String} with the leading ASCII hyphen swapped for {@link MINUS_SIGN}.\n *  Locale-independent, unlike `toLocaleString`. */\nfunction signedString(value: number): string {\n  return String(value).replace(/^-/, MINUS_SIGN);\n}\n\n/**\n * Formats a zoom factor for display. Below 2x a percentage reads naturally;\n * past it the numbers get long and a multiplier is what people say out loud,\n * so 250% shows as `2.5x`. Past 100x a tenth is noise, so the decimal is\n * dropped and thousands are grouped: `1009.74` reads as `1,010x`.\n */\nexport function formatZoom(zoom: number): string {\n  if (!Number.isFinite(zoom)) return String(zoom);\n  if (zoom <= 2) return `${signedString(Math.round(zoom * 100))}%`;\n  if (zoom >= 100) return `${Math.round(zoom).toLocaleString('en-US')}x`;\n  return `${signedString(Math.round(zoom * 10) / 10)}x`;\n}\n"],"mappings":";AAUA,IAAa,IAAa;AAM1B,SAAgB,EAAa,GAAe,GAA4C;AAItF,SAHkB,OAAO,SAAS,EAAM,GACpC,EAAM,eAAe,KAAA,GAAW,EAAQ,GACxC,OAAO,EAAM,EACA,QAAQ,MAAA,IAAiB;;AAQ5C,SAAgB,EAAkB,GAAsB;AACtD,QAAO,OAAO,EAAK,QAAA,KAAoB,IAAI,CAAC;;AAK9C,SAAS,EAAa,GAAuB;AAC3C,QAAO,OAAO,EAAM,CAAC,QAAQ,MAAA,IAAiB;;AAShD,SAAgB,EAAW,GAAsB;AAI/C,QAHK,OAAO,SAAS,EAAK,GACtB,KAAQ,IAAU,GAAG,EAAa,KAAK,MAAM,IAAO,IAAI,CAAC,CAAC,KAC1D,KAAQ,MAAY,GAAG,KAAK,MAAM,EAAK,CAAC,eAAe,QAAQ,CAAC,KAC7D,GAAG,EAAa,KAAK,MAAM,IAAO,GAAG,GAAG,GAAG,CAAC,KAHhB,OAAO,EAAK"}

package/dist/chunks/portalHost-CjpCnuGU.js

@@ -0,0 +1,28 @@
+import { jsx as e } from "react/jsx-runtime";
+import { createContext as t, useContext as n, useState as r } from "react";
+//#region src/overlays/portalHost.tsx
+var i = "[data-wzl-portal-host],[data-wzl-theme],[data-wzl-mode]";
+function a(e) {
+	return e?.closest(i) ?? null;
+}
+var o = t(void 0);
+function s({ container: t, children: n }) {
+	return /* @__PURE__ */ e(o.Provider, {
+		value: t,
+		children: n
+	});
+}
+function c(t) {
+	let [i, s] = r(null), c = n(o), l = t === void 0 ? c === void 0 ? a(i) : c : t;
+	return {
+		anchor: /* @__PURE__ */ e("span", {
+			hidden: !0,
+			ref: s
+		}),
+		portalProps: { UNSTABLE_portalContainer: l ?? void 0 }
+	};
+}
+//#endregion
+export { a as n, c as r, s as t };
+
+//# sourceMappingURL=portalHost-CjpCnuGU.js.map

package/dist/chunks/portalHost-CjpCnuGU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portalHost-CjpCnuGU.js","names":[],"sources":["../../src/overlays/portalHost.tsx"],"sourcesContent":["import { createContext, useContext, useState, type ReactElement, type ReactNode } from 'react';\n\n/**\n * Elements an overlay may portal into: anything a theme has been stamped on\n * (`applyTheme` / `<ThemeProvider>` write both attributes), plus anything\n * opting in with `data-wzl-portal-host`. The opt-in exists for a styling root\n * that sits *below* the themed element — labkit's `.lk-root` carries element\n * defaults the themed wrapper does not.\n */\nconst HOST_SELECTOR = '[data-wzl-portal-host],[data-wzl-theme],[data-wzl-mode]';\n\n/**\n * The nearest element `from` sits inside that can host a portalled overlay,\n * or `null` when there is none and the body is the only answer.\n */\nexport function nearestPortalHost(from: Element | null | undefined): HTMLElement | null {\n  return (from?.closest(HOST_SELECTOR) as HTMLElement | null) ?? null;\n}\n\n/** `undefined` distinguishes \"no provider\" from a provider saying `null`. */\nconst OverlayPortalContext = createContext<Element | null | undefined>(undefined);\n\n/** Props for {@link OverlayPortalProvider}. */\nexport interface OverlayPortalProviderProps {\n  /** Where overlays in this subtree portal. `null` means `document.body`. */\n  container: Element | null;\n  children: ReactNode;\n}\n\n/**\n * Sets the portal container for every weasel overlay rendered below it,\n * overriding the nearest-themed-ancestor default. An individual overlay's\n * own `portalContainer` prop still wins.\n */\nexport function OverlayPortalProvider({ container, children }: OverlayPortalProviderProps) {\n  return (\n    <OverlayPortalContext.Provider value={container}>{children}</OverlayPortalContext.Provider>\n  );\n}\n\n/** The `portalContainer` prop every weasel overlay accepts. */\nexport interface OverlayPortalProps {\n  /**\n   * Where the overlay's portal mounts. Defaults to the nearest ancestor of\n   * the overlay's own position that carries a weasel theme, so the overlay\n   * resolves the same `--wzl-*` tokens as the control it belongs to. Pass\n   * `null` for `document.body`.\n   */\n  portalContainer?: Element | null;\n}\n\n/** React Aria props minus the portal key a weasel overlay owns. */\nexport type WithoutPortalTarget<T> = Omit<T, 'UNSTABLE_portalContainer'>;\n\n/** Spread onto the React Aria overlay. The unstable key is spelled here and\n *  nowhere else in the package, so an upstream rename lands in one file. */\nexport interface OverlayPortalTarget {\n  UNSTABLE_portalContainer: Element | undefined;\n}\n\n/**\n * Resolves where an overlay should portal, and the anchor that answers it.\n *\n * The result goes to React Aria as `UNSTABLE_portalContainer`. Its documented\n * replacement, `UNSAFE_PortalProvider`, is not re-exported by\n * react-aria-components 1.18, and reaching past it to `react-aria` for the\n * provider risks a second copy of that package whose context the overlays\n * never read — a failure that shows up as an unthemed overlay, not an error.\n *\n * Render `anchor` at the component's own position in the tree — outside the\n * portal — and spread `portalProps` onto the React Aria overlay. The anchor\n * is what \"nearest themed ancestor\" is measured from; the first render has\n * none yet, so an overlay that mounts already open lands in its host on the\n * following render, before paint.\n */\nexport function useOverlayPortal(explicit?: Element | null): {\n  anchor: ReactElement;\n  portalProps: OverlayPortalTarget;\n} {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n  const fromProvider = useContext(OverlayPortalContext);\n\n  const resolved =\n    explicit !== undefined\n      ? explicit\n      : fromProvider !== undefined\n        ? fromProvider\n        : nearestPortalHost(anchorEl);\n\n  return {\n    anchor: <span hidden ref={setAnchorEl} />,\n    portalProps: { UNSTABLE_portalContainer: resolved ?? undefined },\n  };\n}\n"],"mappings":";;;AASA,IAAM,IAAgB;AAMtB,SAAgB,EAAkB,GAAsD;AACtF,QAAQ,GAAM,QAAQ,EAAc,IAA2B;;AAIjE,IAAM,IAAuB,EAA0C,KAAA,EAAU;AAcjF,SAAgB,EAAsB,EAAE,cAAW,eAAwC;AACzF,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;EAAY;EAAyC,CAAA;;AAuC/F,SAAgB,EAAiB,GAG/B;CACA,IAAM,CAAC,GAAU,KAAe,EAA6B,KAAK,EAC5D,IAAe,EAAW,EAAqB,EAE/C,IACJ,MAAa,KAAA,IAET,MAAiB,KAAA,IAEf,EAAkB,EAAS,GAD3B,IAFF;AAKN,QAAO;EACL,QAAQ,kBAAC,QAAD;GAAM,QAAA;GAAO,KAAK;GAAe,CAAA;EACzC,aAAa,EAAE,0BAA0B,KAAY,KAAA,GAAW;EACjE"}

package/dist/chunks/{range.module-CO59aXEH.js → range.module-CgURq-Ua.js}

@@ -5,4 +5,4 @@ var e = {
 //#endregion
 export { e as t };
 
-//# sourceMappingURL=range.module-CO59aXEH.js.map
+//# sourceMappingURL=range.module-CgURq-Ua.js.map

package/dist/chunks/{range.module-CO59aXEH.js.map → range.module-CgURq-Ua.js.map}

@@ -1 +1 @@
-{"version":3,"file":"range.module-CO59aXEH.js","names":[],"sources":["../../src/components/range.module.css"],"sourcesContent":["/* The one skin for a native <input type=\"range\">. Imported by InlineRange and\n   by the property rows, which render the same DOM and used to carry three\n   independently authored copies of these rules.\n\n   The track is painted here rather than left to `accent-color`: a UA fills the\n   left of the track with the accent but draws the remainder near-white on a\n   dark surface whatever `color-scheme` says, and overriding the track's\n   background removes the accent fill instead of recolouring the remainder. */\n.range {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 100%;\n  min-inline-size: 48px;\n  /* The box is taller than the track so the thumb has room to spill; a surface\n     where the element itself IS the track overrides this. */\n  height: var(--wzl-range-box-h, 12px);\n  margin: 0;\n  padding: 0;\n  /* Transparent so the track pseudo-element shows; a surface that paints the element itself overrides it. */\n  background: var(--wzl-range-bg, transparent);\n  cursor: pointer;\n}\n\n.range::-webkit-slider-runnable-track {\n  height: var(--wzl-slider-track-h);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent)\n  );\n}\n\n.range::-moz-range-track {\n  height: var(--wzl-slider-track-h);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent)\n  );\n}\n\n.range::-webkit-slider-thumb {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--wzl-slider-thumb-size);\n  height: var(--wzl-slider-thumb-size);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);\n  /* Centres an 8px thumb on a 4px track. Webkit does not centre it for you. */\n  margin-top: calc((var(--wzl-slider-track-h) - var(--wzl-slider-thumb-size)) / 2);\n}\n\n.range::-moz-range-thumb {\n  width: var(--wzl-slider-thumb-size);\n  height: var(--wzl-slider-thumb-size);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);\n}\n\n.range:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.range:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n/* Alpha variant: a fainter track, used where the row already carries a colour\n   swatch and the slider must not compete with it. */\n.alpha::-webkit-slider-runnable-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n.alpha::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n/* A dead alpha track keeps its groove but loses its thumb, so the affordance\n   reads inert rather than merely dimmed. Keyed off `:disabled`, which ColorRow\n   already sets on the input — not off a class on the row. */\n.alpha:disabled::-webkit-slider-runnable-track,\n.alpha:disabled::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-fg) 5%, transparent);\n}\n\n.alpha:disabled::-webkit-slider-thumb,\n.alpha:disabled::-moz-range-thumb {\n  background: transparent;\n}\n"],"mappings":""}
+{"version":3,"file":"range.module-CgURq-Ua.js","names":[],"sources":["../../src/components/range.module.css"],"sourcesContent":["/* The one skin for a native <input type=\"range\">. Imported by InlineRange and\n   by the property rows, which render the same DOM and used to carry three\n   independently authored copies of these rules.\n\n   The track is painted here rather than left to `accent-color`: a UA fills the\n   left of the track with the accent but draws the remainder near-white on a\n   dark surface whatever `color-scheme` says, and overriding the track's\n   background removes the accent fill instead of recolouring the remainder. */\n.range {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 100%;\n  min-inline-size: 48px;\n  /* The box is taller than the track so the thumb has room to spill; a surface\n     where the element itself IS the track overrides this. */\n  height: var(--wzl-range-box-h, 12px);\n  margin: 0;\n  padding: 0;\n  /* Transparent so the track pseudo-element shows; a surface that paints the element itself overrides it. */\n  background: var(--wzl-range-bg, transparent);\n  cursor: pointer;\n}\n\n.range::-webkit-slider-runnable-track {\n  height: var(--wzl-slider-track-h);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent)\n  );\n}\n\n.range::-moz-range-track {\n  height: var(--wzl-slider-track-h);\n  border-radius: var(--wzl-radius-sm);\n  background: var(\n    --wzl-range-track-bg,\n    color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-track-tint), transparent)\n  );\n}\n\n.range::-webkit-slider-thumb {\n  appearance: none;\n  -webkit-appearance: none;\n  width: var(--wzl-slider-thumb-size);\n  height: var(--wzl-slider-thumb-size);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);\n  /* Centres an 8px thumb on a 4px track. Webkit does not centre it for you. */\n  margin-top: calc((var(--wzl-slider-track-h) - var(--wzl-slider-thumb-size)) / 2);\n}\n\n.range::-moz-range-thumb {\n  width: var(--wzl-slider-thumb-size);\n  height: var(--wzl-slider-thumb-size);\n  border: none;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) var(--wzl-slider-thumb-tint), transparent);\n}\n\n.range:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.range:disabled {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n/* Alpha variant: a fainter track, used where the row already carries a colour\n   swatch and the slider must not compete with it. */\n.alpha::-webkit-slider-runnable-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n.alpha::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n/* A dead alpha track keeps its groove but loses its thumb, so the affordance\n   reads inert rather than merely dimmed. Keyed off `:disabled`, which ColorRow\n   already sets on the input — not off a class on the row. */\n.alpha:disabled::-webkit-slider-runnable-track,\n.alpha:disabled::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-fg) 5%, transparent);\n}\n\n.alpha:disabled::-webkit-slider-thumb,\n.alpha:disabled::-moz-range-thumb {\n  background: transparent;\n}\n"],"mappings":""}

package/dist/chunks/schema-CtWwGbqJ.js

@@ -0,0 +1,41 @@
+//#region src/components/Prefs/schema.ts
+function e(e) {
+	if (!e.unit) return {
+		min: e.min,
+		max: e.max,
+		step: e.step ?? 1
+	};
+	let { toDisplay: t } = e.unit, n = e.min === void 0 ? void 0 : t(e.min), r = e.max === void 0 ? void 0 : t(e.max), i = n !== void 0 && r !== void 0 && n > r, a = e.step === void 0 ? 1 : Math.abs(t(e.step) - t(0)) || e.step;
+	return {
+		min: i ? r : n,
+		max: i ? n : r,
+		step: a
+	};
+}
+function t(e) {
+	return "kind" in e;
+}
+function n(e, t) {
+	let n = e;
+	for (let e of t.split(".")) {
+		if (typeof n != "object" || !n) return;
+		n = n[e];
+	}
+	return n;
+}
+function r(e, n) {
+	if (t(e)) return e.hidden && !n ? null : e;
+	let i = e, a = {};
+	for (let [e, t] of Object.entries(i.children)) {
+		let i = r(t, n);
+		i && (a[e] = i);
+	}
+	return Object.keys(a).length === 0 ? null : {
+		...e,
+		children: a
+	};
+}
+//#endregion
+export { r as i, e as n, n as r, t };
+
+//# sourceMappingURL=schema-CtWwGbqJ.js.map

package/dist/chunks/schema-CtWwGbqJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema-CtWwGbqJ.js","names":[],"sources":["../../src/components/Prefs/schema.ts"],"sourcesContent":["// Preference-schema vocabulary for PrefsForm / PrefsDialog / SelectionPanel:\n// core's `ToolPref*` family under this package's names. Never re-declare them\n// here — this was a hand-kept structural copy until it drifted, and the\n// independence from `@weasel-js/core` it bought is long gone anyway.\n\nexport type {\n  ToolPref as BuiltinPref,\n  ToolPrefBoolean as PrefBoolean,\n  ToolPrefBooleanControl as PrefBooleanControl,\n  ToolPrefColor as PrefColor,\n  ToolPrefCustom as PrefCustom,\n  ToolPrefEnum as PrefEnum,\n  ToolPrefEnumControl as PrefEnumControl,\n  ToolPrefEnumEncoding as PrefEnumEncoding,\n  ToolPrefGroup as PrefGroup,\n  ToolPrefKind as PrefKind,\n  ToolPrefLeaf as PrefLeaf,\n  ToolPrefNumber as PrefNumber,\n  ToolPrefNumberControl as PrefNumberControl,\n  ToolPrefNumberUnit as PrefNumberUnit,\n  ToolPrefObject as PrefObject,\n  ToolPrefPaint as PrefPaint,\n  ToolPrefString as PrefString,\n  ToolPrefStringControl as PrefStringControl,\n} from '@weasel-js/core';\n\nimport type { ToolPrefGroup, ToolPrefLeaf, ToolPrefNumber } from '@weasel-js/core';\n\n/**\n * A number leaf's bounds in the unit it is displayed in.\n *\n * Only what the leaf declares converts: an omitted bound has no stored\n * counterpart to put through the conversion, and its fallback — 0..100 for a\n * slider's track, a step of 1 — is a display-space number already. `min` and\n * `max` are points, so they convert the way the value does; `step` is a\n * distance, and a unit with an offset maps zero somewhere else, so converting\n * it as a point would scale it wrong. A decreasing conversion swaps which end\n * is the lower one.\n */\nexport function prefDisplayBounds(\n  p: ToolPrefNumber,\n): { min?: number; max?: number; step: number } {\n  if (!p.unit) return { min: p.min, max: p.max, step: p.step ?? 1 };\n  const { toDisplay } = p.unit;\n  const lo = p.min === undefined ? undefined : toDisplay(p.min);\n  const hi = p.max === undefined ? undefined : toDisplay(p.max);\n  const flipped = lo !== undefined && hi !== undefined && lo > hi;\n  const step = p.step === undefined\n    ? 1\n    : Math.abs(toDisplay(p.step) - toDisplay(0)) || p.step;\n  return { min: flipped ? hi : lo, max: flipped ? lo : hi, step };\n}\n\n/** Distinguishes a leaf from a group while walking a schema tree. */\nexport function isPrefLeaf(node: ToolPrefLeaf | ToolPrefGroup): node is ToolPrefLeaf {\n  return 'kind' in node;\n}\n\n/** Get the value at a dotted path inside a nested value tree. Returns\n *  `undefined` when a segment is missing or hits a non-object. */\nexport function prefValueAtPath(values: unknown, path: string): unknown {\n  let cur: unknown = values;\n  for (const seg of path.split('.')) {\n    if (cur == null || typeof cur !== 'object') return undefined;\n    cur = (cur as Record<string, unknown>)[seg];\n  }\n  return cur;\n}\n\n/**\n * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups\n * that end up empty. Returns null when the entire subtree is hidden.\n */\nexport function visiblePrefSubtree<T extends ToolPrefLeaf | ToolPrefGroup>(\n  node: T,\n  showHidden: boolean,\n): T | null {\n  if (isPrefLeaf(node)) return node.hidden && !showHidden ? null : node;\n  const group = node as ToolPrefGroup;\n  const children: Record<string, ToolPrefLeaf | ToolPrefGroup> = {};\n  for (const [key, child] of Object.entries(group.children)) {\n    const kept = visiblePrefSubtree(child, showHidden);\n    if (kept) children[key] = kept;\n  }\n  if (Object.keys(children).length === 0) return null;\n  return { ...node, children };\n}\n"],"mappings":";AAuCA,SAAgB,EACd,GAC8C;AAC9C,KAAI,CAAC,EAAE,KAAM,QAAO;EAAE,KAAK,EAAE;EAAK,KAAK,EAAE;EAAK,MAAM,EAAE,QAAQ;EAAG;CACjE,IAAM,EAAE,iBAAc,EAAE,MAClB,IAAK,EAAE,QAAQ,KAAA,IAAY,KAAA,IAAY,EAAU,EAAE,IAAI,EACvD,IAAK,EAAE,QAAQ,KAAA,IAAY,KAAA,IAAY,EAAU,EAAE,IAAI,EACvD,IAAU,MAAO,KAAA,KAAa,MAAO,KAAA,KAAa,IAAK,GACvD,IAAO,EAAE,SAAS,KAAA,IACpB,IACA,KAAK,IAAI,EAAU,EAAE,KAAK,GAAG,EAAU,EAAE,CAAC,IAAI,EAAE;AACpD,QAAO;EAAE,KAAK,IAAU,IAAK;EAAI,KAAK,IAAU,IAAK;EAAI;EAAM;;AAIjE,SAAgB,EAAW,GAA0D;AACnF,QAAO,UAAU;;AAKnB,SAAgB,EAAgB,GAAiB,GAAuB;CACtE,IAAI,IAAe;AACnB,MAAK,IAAM,KAAO,EAAK,MAAM,IAAI,EAAE;AACjC,MAAmB,OAAO,KAAQ,aAA9B,EAAwC;AAC5C,MAAO,EAAgC;;AAEzC,QAAO;;AAOT,SAAgB,EACd,GACA,GACU;AACV,KAAI,EAAW,EAAK,CAAE,QAAO,EAAK,UAAU,CAAC,IAAa,OAAO;CACjE,IAAM,IAAQ,GACR,IAAyD,EAAE;AACjE,MAAK,IAAM,CAAC,GAAK,MAAU,OAAO,QAAQ,EAAM,SAAS,EAAE;EACzD,IAAM,IAAO,EAAmB,GAAO,EAAW;AAClD,EAAI,MAAM,EAAS,KAAO;;AAG5B,QADI,OAAO,KAAK,EAAS,CAAC,WAAW,IAAU,OACxC;EAAE,GAAG;EAAM;EAAU"}

package/dist/chunks/{segmentedControl.module-pcPOsNey.js → segmentedControl.module-BgvAPkSZ.js}

@@ -8,4 +8,4 @@ var e = {
 //#endregion
 export { e as t };
 
-//# sourceMappingURL=segmentedControl.module-pcPOsNey.js.map
+//# sourceMappingURL=segmentedControl.module-BgvAPkSZ.js.map

package/dist/chunks/{segmentedControl.module-pcPOsNey.js.map → segmentedControl.module-BgvAPkSZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"segmentedControl.module-pcPOsNey.js","names":[],"sources":["../../src/components/segmentedControl.module.css"],"sourcesContent":["/* Shared by ActionsBar and OptionsBar, which look identical and differ only\n   in what a segment does. Lives here rather than in either component so\n   neither owns the other's styling.\n\n   Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--tb-h, var(--wzl-control-h, 24px));\n  padding: 2px;\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: var(--wzl-radius-pill);\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 12px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-normal);\n  font-size: var(--btn-fontsize, var(--wzl-font-size));\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n.segment:first-child {\n  border-radius: var(--wzl-radius-pill) 0 0 var(--wzl-radius-pill);\n}\n\n.segment:last-child {\n  border-radius: 0 var(--wzl-radius-pill) var(--wzl-radius-pill) 0;\n}\n\n.segment:only-child {\n  border-radius: var(--wzl-radius-pill);\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 8px;\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border-radius: 0;\n  box-shadow: none;\n  gap: 2px;\n}\n\n.variant_minimal .segment {\n  padding: 0 4px;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  line-height: 1.4;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n.variant_minimal .segment:first-child,\n.variant_minimal .segment:last-child,\n.variant_minimal .segment:only-child {\n  border-radius: var(--wzl-radius-sm);\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-hover);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg, var(--wzl-accent));\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n"],"mappings":""}
+{"version":3,"file":"segmentedControl.module-BgvAPkSZ.js","names":[],"sources":["../../src/components/segmentedControl.module.css"],"sourcesContent":["/* Shared by ActionsBar and OptionsBar, which look identical and differ only\n   in what a segment does. Lives here rather than in either component so\n   neither owns the other's styling.\n\n   Aqua-glass segmented control. The track is a pill-shaped well; the\n   selected segment becomes a tinted glass cylinder that reads as the same\n   \"lozenge\" family as the standalone Button. Visual params come from the\n   `--btn-*` custom properties (see Button.module.css) so the Button Lab\n   can tune both surfaces with one set of sliders. */\n.root {\n  display: inline-flex;\n  height: var(--tb-h, var(--wzl-control-h, 24px));\n  padding: 2px;\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 0.18) 0%,\n    rgba(0, 0, 0, 0.05) 100%\n  );\n  border-radius: var(--wzl-radius-pill);\n  /* Clip segments to the track outline so interior corners read crisp and\n     the selected segment's glass treatment doesn't paint over the rounded\n     outer pixels. */\n  overflow: hidden;\n  box-shadow:\n    inset 0 1px 2px rgba(0, 0, 0, 0.4),\n    0 1px 0 rgba(255, 255, 255, 0.06);\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.segment {\n  position: relative;\n  flex: 1 1 0;\n  min-width: 0;\n  padding: 0 12px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  margin: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-normal);\n  font-size: var(--btn-fontsize, var(--wzl-font-size));\n  line-height: 1;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  /* Only round the outer corners of the bar — middle segments stay square\n     so the seams between them don't render as facing parentheses. */\n  border-radius: 0;\n  isolation: isolate;\n  overflow: hidden;\n  transition: color var(--wzl-motion-fast);\n}\n\n.segment:first-child {\n  border-radius: var(--wzl-radius-pill) 0 0 var(--wzl-radius-pill);\n}\n\n.segment:last-child {\n  border-radius: 0 var(--wzl-radius-pill) var(--wzl-radius-pill) 0;\n}\n\n.segment:only-child {\n  border-radius: var(--wzl-radius-pill);\n}\n\n.segment:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n.segment:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n}\n\n/* Selected segment — full Aqua glass cylinder. Mirrors Button.variant_primary. */\n.segmentSelected {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha, 45%), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha, 70%), transparent) calc(var(--btn-equator, 52%) - var(--btn-equator-spread, 12%)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint, 95%), white) var(--btn-equator, 52%),\n    var(--wzl-accent) calc(var(--btn-equator, 52%) + var(--btn-equator-spread, 12%) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint, 70%), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  -webkit-backdrop-filter: blur(var(--btn-blur, 6px)) saturate(var(--btn-saturate, 1.3));\n  color: var(--wzl-fg-on-accent);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow, 0.35)),\n    var(--btn-text-inset-x, 0px) var(--btn-text-inset-y, 1px) 0 rgba(0, 0, 0, var(--btn-text-inset, 0.55)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow, 0.35) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi, 0.42)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo, 0.3)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim, 0.22)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near, 0.3)),\n    0 2px 4px rgba(0, 0, 0, calc(var(--btn-drop-far, 0.18) * 0.8));\n}\n\n/* Specular gloss on the selected segment. Top corners inherit the\n   segment's radius so they hug the upper edge cleanly; bottom corners\n   are flattened so the gloss ends in a straight line at the equator\n   instead of two little curves that read as `)(` brackets. */\n.segmentSelected::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom, 50%) 1px;\n  border-radius: inherit;\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top, 0.42)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid, 0.12)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n}\n\n.segmentSelected > * {\n  position: relative;\n  z-index: 2;\n}\n\n/* Small variant — ~60% of the default height, with proportionally reduced\n   padding and font. Sized for dense surfaces (lab control panels, inline\n   filters, etc.). */\n.size_sm {\n  height: 17px;\n  padding: 1px;\n}\n\n.size_sm .segment {\n  padding: 0 8px;\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* Minimal variant — strips the pill track, glass selected state, inset\n   shadows, and outer padding. Used in dense diagnostic surfaces (dispatch\n   trace, lab inspectors) where the bar must read as plain text controls. */\n.variant_minimal {\n  height: auto;\n  padding: 0;\n  background: none;\n  border-radius: 0;\n  box-shadow: none;\n  gap: 2px;\n}\n\n.variant_minimal .segment {\n  padding: 0 4px;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  line-height: 1.4;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg-muted);\n  transition: none;\n}\n\n.variant_minimal .segment:first-child,\n.variant_minimal .segment:last-child,\n.variant_minimal .segment:only-child {\n  border-radius: var(--wzl-radius-sm);\n}\n\n.variant_minimal .segment:hover:not(:disabled):not(.segmentSelected) {\n  color: var(--wzl-fg);\n  background: var(--wzl-surface-hover);\n}\n\n.variant_minimal .segmentSelected {\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-accent-fg, var(--wzl-accent));\n  text-shadow: none;\n  box-shadow: none;\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.variant_minimal .segmentSelected::before {\n  content: none;\n}\n"],"mappings":""}

package/dist/chunks/{useReorderDragList-C2fhvbU1.js → useReorderDragList-CSQGd7zQ.js}

@@ -99,4 +99,4 @@ function s(s) {
 //#endregion
 export { s as t };
 
-//# sourceMappingURL=useReorderDragList-C2fhvbU1.js.map
+//# sourceMappingURL=useReorderDragList-CSQGd7zQ.js.map

package/dist/chunks/{useReorderDragList-C2fhvbU1.js.map → useReorderDragList-CSQGd7zQ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useReorderDragList-C2fhvbU1.js","names":[],"sources":["../../src/useReorderDragList.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent, RefCallback } from 'react';\nimport { startThresholdDrag, type ThresholdDragHandle } from '@weasel-js/core';\n\n/** One row in a reorderable list. */\nexport interface LayerListItem {\n  id: string;\n  label: ReactNode;\n  /** Locked rows cannot be dragged, cannot be crossed by drops, and\n   *  never combine with other rows in a multi-selection. */\n  locked?: boolean;\n  /** Optional color swatch rendered before the label. Any CSS color string. */\n  swatch?: string;\n}\n\n/**\n * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids\n * and the index they were dropped at, measured against the pre-drag `items`.\n */\nexport interface UseReorderDragListOptions {\n  items: LayerListItem[];\n  selectedIds: string[];\n  onReorder(ids: string[], targetIndex: number): void;\n  /** A press that was released without ever engaging a drag — the click a\n   *  list row means by it. Fires for locked rows too, which can be selected\n   *  but not dragged. Modifiers are read at press, not at release. */\n  onPress?(id: string, mods: PressModifiers): void;\n  /** Pointer-move distance (px) before pending drag engages. Default 4. */\n  threshold?: number;\n}\n\n/** Modifier keys held when a press began. */\nexport interface PressModifiers {\n  shiftKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n}\n\n/**\n * Live drag state for rendering feedback: which ids are being dragged and the\n * insertion index the drop would use. Both `null` when no drag is engaged.\n */\nexport interface ReorderDragState {\n  draggedIds: string[] | null;\n  targetIndex: number | null;\n}\n\n/**\n * A `ref` for the list container, an `onPointerDown` for each row, and the\n * live {@link ReorderDragState}. The container ref is required, not optional\n * decoration: it is what the drop index is measured against and what the\n * pointer session is opened on.\n */\nexport interface ReorderDragHandlers {\n  rowProps(id: string, index: number): { onPointerDown(e: ReactPointerEvent): void };\n  containerProps: {\n    ref: RefCallback<HTMLElement>;\n  };\n  state: ReorderDragState;\n}\n\n/**\n * The half-open run of indices a row at `sourceIndex` may be dropped into:\n * bounded by the nearest locked row above and below it, so a locked row is a\n * wall in both directions rather than a global ceiling.\n */\nfunction unlockedSegment(items: readonly LayerListItem[], sourceIndex: number): [number, number] {\n  let lo = 0;\n  for (let i = sourceIndex - 1; i >= 0; i--) {\n    if (items[i]?.locked) { lo = i + 1; break; }\n  }\n  let hi = items.length;\n  for (let i = sourceIndex + 1; i < items.length; i++) {\n    if (items[i]?.locked) { hi = i; break; }\n  }\n  return [lo, hi];\n}\n\n/** Would dropping `draggedIds` at `targetIndex` leave a contiguous block where it already is? */\nfunction isNoopDrop(items: readonly LayerListItem[], draggedIds: readonly string[], targetIndex: number): boolean {\n  const indices = draggedIds\n    .map((id) => items.findIndex((it) => it.id === id))\n    .filter((i) => i >= 0)\n    .sort((a, b) => a - b);\n  const contiguous =\n    indices.length > 0 &&\n    indices.every((v, i) => {\n      if (i === 0) return true;\n      const prev = indices[i - 1];\n      return prev !== undefined && v === prev + 1;\n    });\n  const first = indices[0];\n  const last = indices[indices.length - 1];\n  return contiguous\n    && first !== undefined\n    && last !== undefined\n    && targetIndex >= first\n    && targetIndex <= last + 1;\n}\n\n/**\n * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of\n * the current selection drags the whole selection; dragging any other row\n * drags just that row. Locked rows can neither be dragged nor crossed by a\n * drop. A drop that would leave a contiguous block where it already is does\n * not call `onReorder`.\n *\n * A press opens a `startThresholdDrag` on the *container*, which owns the\n * rest of the gesture: a drag that leaves the list still tracks, a release\n * anywhere still drops, and a release the window never delivered still ends\n * the drag. The container is the origin rather than the row because rows come\n * and go as the list re-renders, and a drag must outlive the row it grabbed.\n */\nexport function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers {\n  const optsRef = useRef(opts);\n  optsRef.current = opts;\n  const containerRef = useRef<HTMLElement | null>(null);\n  const dragRef = useRef<ThresholdDragHandle | null>(null);\n  const [state, setState] = useState<ReorderDragState>({ draggedIds: null, targetIndex: null });\n\n  useEffect(() => () => { dragRef.current?.cancel(); }, []);\n\n  const computeTargetIndex = useCallback((clientY: number, sourceIndex: number): number => {\n    const [lo, hi] = unlockedSegment(optsRef.current.items, sourceIndex);\n    const c = containerRef.current;\n    if (!c) return lo;\n    const rows = Array.from(c.children) as HTMLElement[];\n    let raw = rows.length;\n    for (let i = 0; i < rows.length; i++) {\n      const row = rows[i];\n      if (!row) continue;\n      const r = row.getBoundingClientRect();\n      if (clientY < r.bottom) { raw = i; break; }\n    }\n    return Math.max(lo, Math.min(raw, hi));\n  }, []);\n\n  const refCb = useCallback<RefCallback<HTMLElement>>((el) => {\n    containerRef.current = el;\n  }, []);\n\n  const reset = useCallback(() => {\n    dragRef.current = null;\n    setState({ draggedIds: null, targetIndex: null });\n  }, []);\n\n  const onPointerDownRow = useCallback((id: string, index: number, e: ReactPointerEvent) => {\n    const container = containerRef.current;\n    if (!container || dragRef.current) return;\n\n    const mods: PressModifiers = {\n      shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey,\n    };\n    let draggedIds: string[] = [];\n    let targetIndex = 0;\n\n    dragRef.current = startThresholdDrag(e, {\n      origin: container,\n      // A locked row still opens a drag so its release reaches `onPress`, and\n      // a threshold nothing can cross is what keeps it from ever engaging.\n      threshold: optsRef.current.items[index]?.locked\n        ? Number.POSITIVE_INFINITY\n        : (optsRef.current.threshold ?? 4),\n      onActivate: (ev) => {\n        const selected = optsRef.current.selectedIds;\n        const [lo, hi] = unlockedSegment(optsRef.current.items, index);\n        draggedIds = (selected.includes(id) ? [...selected] : [id]).filter((x) => {\n          const i = optsRef.current.items.findIndex((it) => it.id === x);\n          return i >= lo && i < hi;\n        });\n        targetIndex = computeTargetIndex(ev.clientY, index);\n        setState({ draggedIds, targetIndex });\n      },\n      onMove: (ev) => {\n        const next = computeTargetIndex(ev.clientY, index);\n        if (next === targetIndex) return;\n        targetIndex = next;\n        setState({ draggedIds, targetIndex });\n      },\n      onCommit: (ev) => {\n        const drop = computeTargetIndex(ev.clientY, index);\n        if (!isNoopDrop(optsRef.current.items, draggedIds, drop)) {\n          optsRef.current.onReorder(draggedIds, drop);\n        }\n        reset();\n      },\n      onClick: () => {\n        optsRef.current.onPress?.(id, mods);\n        reset();\n      },\n      // Every cancel reason — the browser's, a lost capture, an unmount —\n      // says the gesture was interrupted rather than aimed, so the rows stay\n      // where they were.\n      onCancel: reset,\n    });\n  }, [computeTargetIndex, reset]);\n\n  return {\n    rowProps: (id, index) => ({\n      onPointerDown: (e) => onPointerDownRow(id, index, e),\n    }),\n    containerProps: {\n      ref: refCb,\n    },\n    state,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"useReorderDragList-CSQGd7zQ.js","names":[],"sources":["../../src/useReorderDragList.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent, RefCallback } from 'react';\nimport { startThresholdDrag, type ThresholdDragHandle } from '@weasel-js/core';\n\n/** One row in a reorderable list. */\nexport interface LayerListItem {\n  id: string;\n  label: ReactNode;\n  /** Locked rows cannot be dragged, cannot be crossed by drops, and\n   *  never combine with other rows in a multi-selection. */\n  locked?: boolean;\n  /** Optional color swatch rendered before the label. Any CSS color string. */\n  swatch?: string;\n}\n\n/**\n * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids\n * and the index they were dropped at, measured against the pre-drag `items`.\n */\nexport interface UseReorderDragListOptions {\n  items: LayerListItem[];\n  selectedIds: string[];\n  onReorder(ids: string[], targetIndex: number): void;\n  /** A press that was released without ever engaging a drag — the click a\n   *  list row means by it. Fires for locked rows too, which can be selected\n   *  but not dragged. Modifiers are read at press, not at release. */\n  onPress?(id: string, mods: PressModifiers): void;\n  /** Pointer-move distance (px) before pending drag engages. Default 4. */\n  threshold?: number;\n}\n\n/** Modifier keys held when a press began. */\nexport interface PressModifiers {\n  shiftKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  altKey: boolean;\n}\n\n/**\n * Live drag state for rendering feedback: which ids are being dragged and the\n * insertion index the drop would use. Both `null` when no drag is engaged.\n */\nexport interface ReorderDragState {\n  draggedIds: string[] | null;\n  targetIndex: number | null;\n}\n\n/**\n * A `ref` for the list container, an `onPointerDown` for each row, and the\n * live {@link ReorderDragState}. The container ref is required, not optional\n * decoration: it is what the drop index is measured against and what the\n * pointer session is opened on.\n */\nexport interface ReorderDragHandlers {\n  rowProps(id: string, index: number): { onPointerDown(e: ReactPointerEvent): void };\n  containerProps: {\n    ref: RefCallback<HTMLElement>;\n  };\n  state: ReorderDragState;\n}\n\n/**\n * The half-open run of indices a row at `sourceIndex` may be dropped into:\n * bounded by the nearest locked row above and below it, so a locked row is a\n * wall in both directions rather than a global ceiling.\n */\nfunction unlockedSegment(items: readonly LayerListItem[], sourceIndex: number): [number, number] {\n  let lo = 0;\n  for (let i = sourceIndex - 1; i >= 0; i--) {\n    if (items[i]?.locked) { lo = i + 1; break; }\n  }\n  let hi = items.length;\n  for (let i = sourceIndex + 1; i < items.length; i++) {\n    if (items[i]?.locked) { hi = i; break; }\n  }\n  return [lo, hi];\n}\n\n/** Would dropping `draggedIds` at `targetIndex` leave a contiguous block where it already is? */\nfunction isNoopDrop(items: readonly LayerListItem[], draggedIds: readonly string[], targetIndex: number): boolean {\n  const indices = draggedIds\n    .map((id) => items.findIndex((it) => it.id === id))\n    .filter((i) => i >= 0)\n    .sort((a, b) => a - b);\n  const contiguous =\n    indices.length > 0 &&\n    indices.every((v, i) => {\n      if (i === 0) return true;\n      const prev = indices[i - 1];\n      return prev !== undefined && v === prev + 1;\n    });\n  const first = indices[0];\n  const last = indices[indices.length - 1];\n  return contiguous\n    && first !== undefined\n    && last !== undefined\n    && targetIndex >= first\n    && targetIndex <= last + 1;\n}\n\n/**\n * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of\n * the current selection drags the whole selection; dragging any other row\n * drags just that row. Locked rows can neither be dragged nor crossed by a\n * drop. A drop that would leave a contiguous block where it already is does\n * not call `onReorder`.\n *\n * A press opens a `startThresholdDrag` on the *container*, which owns the\n * rest of the gesture: a drag that leaves the list still tracks, a release\n * anywhere still drops, and a release the window never delivered still ends\n * the drag. The container is the origin rather than the row because rows come\n * and go as the list re-renders, and a drag must outlive the row it grabbed.\n */\nexport function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers {\n  const optsRef = useRef(opts);\n  optsRef.current = opts;\n  const containerRef = useRef<HTMLElement | null>(null);\n  const dragRef = useRef<ThresholdDragHandle | null>(null);\n  const [state, setState] = useState<ReorderDragState>({ draggedIds: null, targetIndex: null });\n\n  useEffect(() => () => { dragRef.current?.cancel(); }, []);\n\n  const computeTargetIndex = useCallback((clientY: number, sourceIndex: number): number => {\n    const [lo, hi] = unlockedSegment(optsRef.current.items, sourceIndex);\n    const c = containerRef.current;\n    if (!c) return lo;\n    const rows = Array.from(c.children) as HTMLElement[];\n    let raw = rows.length;\n    for (let i = 0; i < rows.length; i++) {\n      const row = rows[i];\n      if (!row) continue;\n      const r = row.getBoundingClientRect();\n      if (clientY < r.bottom) { raw = i; break; }\n    }\n    return Math.max(lo, Math.min(raw, hi));\n  }, []);\n\n  const refCb = useCallback<RefCallback<HTMLElement>>((el) => {\n    containerRef.current = el;\n  }, []);\n\n  const reset = useCallback(() => {\n    dragRef.current = null;\n    setState({ draggedIds: null, targetIndex: null });\n  }, []);\n\n  const onPointerDownRow = useCallback((id: string, index: number, e: ReactPointerEvent) => {\n    const container = containerRef.current;\n    if (!container || dragRef.current) return;\n\n    const mods: PressModifiers = {\n      shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey,\n    };\n    let draggedIds: string[] = [];\n    let targetIndex = 0;\n\n    dragRef.current = startThresholdDrag(e, {\n      origin: container,\n      // A locked row still opens a drag so its release reaches `onPress`, and\n      // a threshold nothing can cross is what keeps it from ever engaging.\n      threshold: optsRef.current.items[index]?.locked\n        ? Number.POSITIVE_INFINITY\n        : (optsRef.current.threshold ?? 4),\n      onActivate: (ev) => {\n        const selected = optsRef.current.selectedIds;\n        const [lo, hi] = unlockedSegment(optsRef.current.items, index);\n        draggedIds = (selected.includes(id) ? [...selected] : [id]).filter((x) => {\n          const i = optsRef.current.items.findIndex((it) => it.id === x);\n          return i >= lo && i < hi;\n        });\n        targetIndex = computeTargetIndex(ev.clientY, index);\n        setState({ draggedIds, targetIndex });\n      },\n      onMove: (ev) => {\n        const next = computeTargetIndex(ev.clientY, index);\n        if (next === targetIndex) return;\n        targetIndex = next;\n        setState({ draggedIds, targetIndex });\n      },\n      onCommit: (ev) => {\n        const drop = computeTargetIndex(ev.clientY, index);\n        if (!isNoopDrop(optsRef.current.items, draggedIds, drop)) {\n          optsRef.current.onReorder(draggedIds, drop);\n        }\n        reset();\n      },\n      onClick: () => {\n        optsRef.current.onPress?.(id, mods);\n        reset();\n      },\n      // Every cancel reason — the browser's, a lost capture, an unmount —\n      // says the gesture was interrupted rather than aimed, so the rows stay\n      // where they were.\n      onCancel: reset,\n    });\n  }, [computeTargetIndex, reset]);\n\n  return {\n    rowProps: (id, index) => ({\n      onPointerDown: (e) => onPointerDownRow(id, index, e),\n    }),\n    containerProps: {\n      ref: refCb,\n    },\n    state,\n  };\n}\n"],"mappings":"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"}

package/dist/chunks/{useRovingTabIndex-DqXFNDaD.js → useRovingTabIndex-Dkpf_KhN.js}

@@ -62,4 +62,4 @@ function a(a) {
 //#endregion
 export { a as t };
 
-//# sourceMappingURL=useRovingTabIndex-DqXFNDaD.js.map
+//# sourceMappingURL=useRovingTabIndex-Dkpf_KhN.js.map

package/dist/chunks/{useRovingTabIndex-DqXFNDaD.js.map → useRovingTabIndex-Dkpf_KhN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"useRovingTabIndex-DqXFNDaD.js","names":[],"sources":["../../src/useRovingTabIndex.ts"],"sourcesContent":["import { useRef, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';\n\n/** The only thing the hook needs to know about a bar's items: which are\n *  skipped by arrow navigation. */\nexport type RovingItem = { disabled?: boolean };\n\n/** Options for {@link useRovingTabIndex}. */\nexport type UseRovingTabIndexOptions = {\n  /** In the same order as the elements carrying `itemClassName`. */\n  items: readonly RovingItem[];\n  /** Class on the focusable element of each item, inside the container the\n   *  returned `rootRef` is attached to. Their DOM order must match `items`. */\n  itemClassName: string;\n  /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a\n   *  radiogroup-style bar passes its selected index so Tab lands on the\n   *  current value. */\n  tabStopIndex?: number;\n  /** Called with the new index as arrow/Home/End focus moves, before focus\n   *  moves. This is where a selection-follows-focus bar commits the value. */\n  onNavigate?: (index: number) => void;\n  /** Space/Enter on the item at `index`. When omitted the keypress is left\n   *  alone, which on a native `<button>` produces an ordinary click. */\n  onActivate?: (index: number) => void;\n};\n\n/**\n * What {@link useRovingTabIndex} returns: a container ref plus the per-item\n * `tabIndex` and `onKeyDown` values to spread onto each item.\n */\nexport type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {\n  /** Attach to the container element that holds the items. */\n  rootRef: RefObject<T | null>;\n  /** `tabIndex` value for the item at `index`. */\n  tabIndexFor: (index: number) => 0 | -1;\n  /** `onKeyDown` for the item at `index`. */\n  onKeyDown: (index: number) => (e: ReactKeyboardEvent<HTMLElement>) => void;\n};\n\nfunction firstEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = 0; i < items.length; i++) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction lastEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction nextEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from + k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nfunction prevEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from - k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\n/**\n * Roving tabindex for a bar of items: one item is in the tab order, and the\n * arrow keys move focus among the rest, skipping disabled ones and wrapping\n * at both ends. Home and End go to the first and last enabled item. Both axes\n * navigate, so the same bar works laid out either way.\n *\n * Backs `ActionsBar`, `OptionsBar`, and `ToggleBar`.\n *\n * **When a bar should not use this.** Only when the bar owns its items. A\n * container of arbitrary compound controls — a number field, a select, a\n * color field — must leave the arrow keys alone, because those controls edit\n * their own value with them; taking the arrows over would break the control\n * to navigate between controls. `ToolOptionsBar` is that case and keeps plain\n * DOM tab order. A bar whose items are all simple buttons is the case this\n * hook is for.\n *\n * With every item disabled there is no tab stop and the bar drops out of the\n * tab order entirely.\n */\nexport function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(\n  options: UseRovingTabIndexOptions,\n): RovingTabIndex<T> {\n  const { items, itemClassName, onNavigate, onActivate } = options;\n  const rootRef = useRef<T | null>(null);\n\n  const tabStopIndex = options.tabStopIndex ?? firstEnabledIndex(items);\n\n  const focusItem = (index: number): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const elements = root.querySelectorAll<HTMLElement>(`.${itemClassName}`);\n    elements[index]?.focus();\n  };\n\n  const onKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLElement>): void => {\n    let nextIndex = -1;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        nextIndex = prevEnabledIndex(items, index);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        nextIndex = nextEnabledIndex(items, index);\n        break;\n      case 'Home':\n        nextIndex = firstEnabledIndex(items);\n        break;\n      case 'End':\n        nextIndex = lastEnabledIndex(items);\n        break;\n      case ' ':\n      case 'Enter':\n        if (onActivate) {\n          e.preventDefault();\n          onActivate(index);\n        }\n        return;\n      default:\n        return;\n    }\n    if (nextIndex < 0 || nextIndex === index) return;\n    e.preventDefault();\n    onNavigate?.(nextIndex);\n    focusItem(nextIndex);\n  };\n\n  return {\n    rootRef,\n    tabIndexFor: (index: number) => (index === tabStopIndex ? 0 : -1),\n    onKeyDown,\n  };\n}\n"],"mappings":";;AAsCA,SAAS,EAAkB,GAAsC;AAC/D,MAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AACtE,QAAO;;AAGT,SAAS,EAAiB,GAAsC;AAC9D,MAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AAC3E,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAsBT,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,UAAO,kBAAe,eAAY,kBAAe,GACnD,IAAU,EAAiB,KAAK,EAEhC,IAAe,EAAQ,gBAAgB,EAAkB,EAAM,EAE/D,KAAa,MAAwB;EACzC,IAAM,IAAO,EAAQ;AAChB,OACY,EAAK,iBAA8B,IAAI,IACxD,CAAS,IAAQ,OAAO;;AAoC1B,QAAO;EACL;EACA,cAAc,MAAmB,MAAU,IAAe,IAAI;EAC9D,YApCiB,OAAmB,MAA6C;GACjF,IAAI,IAAY;AAChB,WAAQ,EAAE,KAAV;IACE,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;AACH,SAAY,EAAkB,EAAM;AACpC;IACF,KAAK;AACH,SAAY,EAAiB,EAAM;AACnC;IACF,KAAK;IACL,KAAK;AACH,KAAI,MACF,EAAE,gBAAgB,EAClB,EAAW,EAAM;AAEnB;IACF,QACE;;AAEA,OAAY,KAAK,MAAc,MACnC,EAAE,gBAAgB,EAClB,IAAa,EAAU,EACvB,EAAU,EAAU;;EAOrB"}
+{"version":3,"file":"useRovingTabIndex-Dkpf_KhN.js","names":[],"sources":["../../src/useRovingTabIndex.ts"],"sourcesContent":["import { useRef, type KeyboardEvent as ReactKeyboardEvent, type RefObject } from 'react';\n\n/** The only thing the hook needs to know about a bar's items: which are\n *  skipped by arrow navigation. */\nexport type RovingItem = { disabled?: boolean };\n\n/** Options for {@link useRovingTabIndex}. */\nexport type UseRovingTabIndexOptions = {\n  /** In the same order as the elements carrying `itemClassName`. */\n  items: readonly RovingItem[];\n  /** Class on the focusable element of each item, inside the container the\n   *  returned `rootRef` is attached to. Their DOM order must match `items`. */\n  itemClassName: string;\n  /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a\n   *  radiogroup-style bar passes its selected index so Tab lands on the\n   *  current value. */\n  tabStopIndex?: number;\n  /** Called with the new index as arrow/Home/End focus moves, before focus\n   *  moves. This is where a selection-follows-focus bar commits the value. */\n  onNavigate?: (index: number) => void;\n  /** Space/Enter on the item at `index`. When omitted the keypress is left\n   *  alone, which on a native `<button>` produces an ordinary click. */\n  onActivate?: (index: number) => void;\n};\n\n/**\n * What {@link useRovingTabIndex} returns: a container ref plus the per-item\n * `tabIndex` and `onKeyDown` values to spread onto each item.\n */\nexport type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {\n  /** Attach to the container element that holds the items. */\n  rootRef: RefObject<T | null>;\n  /** `tabIndex` value for the item at `index`. */\n  tabIndexFor: (index: number) => 0 | -1;\n  /** `onKeyDown` for the item at `index`. */\n  onKeyDown: (index: number) => (e: ReactKeyboardEvent<HTMLElement>) => void;\n};\n\nfunction firstEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = 0; i < items.length; i++) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction lastEnabledIndex(items: readonly RovingItem[]): number {\n  for (let i = items.length - 1; i >= 0; i--) if (!items[i].disabled) return i;\n  return -1;\n}\n\nfunction nextEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from + k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\nfunction prevEnabledIndex(items: readonly RovingItem[], from: number): number {\n  const n = items.length;\n  for (let k = 1; k <= n; k++) {\n    const i = (from - k + n) % n;\n    if (!items[i].disabled) return i;\n  }\n  return from;\n}\n\n/**\n * Roving tabindex for a bar of items: one item is in the tab order, and the\n * arrow keys move focus among the rest, skipping disabled ones and wrapping\n * at both ends. Home and End go to the first and last enabled item. Both axes\n * navigate, so the same bar works laid out either way.\n *\n * Backs `ActionsBar`, `OptionsBar`, and `ToggleBar`.\n *\n * **When a bar should not use this.** Only when the bar owns its items. A\n * container of arbitrary compound controls — a number field, a select, a\n * color field — must leave the arrow keys alone, because those controls edit\n * their own value with them; taking the arrows over would break the control\n * to navigate between controls. `ToolOptionsBar` is that case and keeps plain\n * DOM tab order. A bar whose items are all simple buttons is the case this\n * hook is for.\n *\n * With every item disabled there is no tab stop and the bar drops out of the\n * tab order entirely.\n */\nexport function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(\n  options: UseRovingTabIndexOptions,\n): RovingTabIndex<T> {\n  const { items, itemClassName, onNavigate, onActivate } = options;\n  const rootRef = useRef<T | null>(null);\n\n  const tabStopIndex = options.tabStopIndex ?? firstEnabledIndex(items);\n\n  const focusItem = (index: number): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const elements = root.querySelectorAll<HTMLElement>(`.${itemClassName}`);\n    elements[index]?.focus();\n  };\n\n  const onKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLElement>): void => {\n    let nextIndex = -1;\n    switch (e.key) {\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        nextIndex = prevEnabledIndex(items, index);\n        break;\n      case 'ArrowRight':\n      case 'ArrowDown':\n        nextIndex = nextEnabledIndex(items, index);\n        break;\n      case 'Home':\n        nextIndex = firstEnabledIndex(items);\n        break;\n      case 'End':\n        nextIndex = lastEnabledIndex(items);\n        break;\n      case ' ':\n      case 'Enter':\n        if (onActivate) {\n          e.preventDefault();\n          onActivate(index);\n        }\n        return;\n      default:\n        return;\n    }\n    if (nextIndex < 0 || nextIndex === index) return;\n    e.preventDefault();\n    onNavigate?.(nextIndex);\n    focusItem(nextIndex);\n  };\n\n  return {\n    rootRef,\n    tabIndexFor: (index: number) => (index === tabStopIndex ? 0 : -1),\n    onKeyDown,\n  };\n}\n"],"mappings":";;AAsCA,SAAS,EAAkB,GAAsC;AAC/D,MAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AACtE,QAAO;;AAGT,SAAS,EAAiB,GAAsC;AAC9D,MAAK,IAAI,IAAI,EAAM,SAAS,GAAG,KAAK,GAAG,IAAK,KAAI,CAAC,EAAM,GAAG,SAAU,QAAO;AAC3E,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAGT,SAAS,EAAiB,GAA8B,GAAsB;CAC5E,IAAM,IAAI,EAAM;AAChB,MAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK;EAC3B,IAAM,KAAK,IAAO,IAAI,KAAK;AAC3B,MAAI,CAAC,EAAM,GAAG,SAAU,QAAO;;AAEjC,QAAO;;AAsBT,SAAgB,EACd,GACmB;CACnB,IAAM,EAAE,UAAO,kBAAe,eAAY,kBAAe,GACnD,IAAU,EAAiB,KAAK,EAEhC,IAAe,EAAQ,gBAAgB,EAAkB,EAAM,EAE/D,KAAa,MAAwB;EACzC,IAAM,IAAO,EAAQ;AAChB,OACY,EAAK,iBAA8B,IAAI,IACxD,CAAS,IAAQ,OAAO;;AAoC1B,QAAO;EACL;EACA,cAAc,MAAmB,MAAU,IAAe,IAAI;EAC9D,YApCiB,OAAmB,MAA6C;GACjF,IAAI,IAAY;AAChB,WAAQ,EAAE,KAAV;IACE,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;IACL,KAAK;AACH,SAAY,EAAiB,GAAO,EAAM;AAC1C;IACF,KAAK;AACH,SAAY,EAAkB,EAAM;AACpC;IACF,KAAK;AACH,SAAY,EAAiB,EAAM;AACnC;IACF,KAAK;IACL,KAAK;AACH,KAAI,MACF,EAAE,gBAAgB,EAClB,EAAW,EAAM;AAEnB;IACF,QACE;;AAEA,OAAY,KAAK,MAAc,MACnC,EAAE,gBAAgB,EAClB,IAAa,EAAU,EACvB,EAAU,EAAU;;EAOrB"}

package/dist/components/ActionBar/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/ActionBar-D4N1o4LB.js";
+import { t as e } from "../../chunks/ActionBar-DxGp3WuZ.js";
 export { e as ActionBar };

package/dist/components/ActionsBar/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/ActionsBar-C2oXIJk-.js";
+import { t as e } from "../../chunks/ActionsBar-D1VFreoj.js";
 export { e as ActionsBar };

package/dist/components/Badge/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/Badge-7yQseqZb.js";
+import { t as e } from "../../chunks/Badge-Bf8Rd1R6.js";
 export { e as Badge };

package/dist/components/BandEditor/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../../chunks/BandEditor-CqiMlSF9.js";
+import { n as e, r as t, t as n } from "../../chunks/BandEditor-CUlbOlJi.js";
 export { n as BandEditor, e as linearScale, t as logScale };

package/dist/components/Button/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/Button-0OdcoOMx.js";
+import { t as e } from "../../chunks/Button-Cq5LBUMD.js";
 export { e as Button };

package/dist/components/Callout/Callout.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode, type RefObject } from 'react';
 import { DialogTrigger, type PopoverProps as RACPopoverProps } from 'react-aria-components';
+import { type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';
 /** Accent color of a {@link Callout}'s border and arrow. */
 export type CalloutTone = 'info' | 'warning' | 'danger';
 /**
@@ -12,7 +13,7 @@ export type CalloutTone = 'info' | 'warning' | 'danger';
  */
 export { DialogTrigger as CalloutTrigger };
 /** Props for {@link Callout}, on top of React Aria's `Popover` props. */
-export type CalloutProps = Omit<RACPopoverProps, 'children' | 'className' | 'isNonModal' | 'triggerRef'> & {
+export type CalloutProps = Omit<WithoutPortalTarget<RACPopoverProps>, 'children' | 'className' | 'isNonModal' | 'triggerRef'> & OverlayPortalProps & {
     children?: ReactNode;
     className?: string;
     /** Optional heading rendered above the body. */

package/dist/components/Callout/Callout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/Callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,EACL,aAAa,EAKb,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAG/B,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExD;;;;;;;GAOG;AACH,OAAO,EAAE,aAAa,IAAI,cAAc,EAAE,CAAC;AAE3C,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,eAAe,EACf,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,YAAY,CACvD,GAAG;IACF,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wEAAwE;IACxE,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;;;OAKG;IACH,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACtE,CAAC;AAQF;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CA6I1C"}
+{"version":3,"file":"Callout.d.ts","sourceRoot":"","sources":["../../../src/components/Callout/Callout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9F,OAAO,EACL,aAAa,EAKb,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAoB,KAAK,kBAAkB,EAAE,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGhH,4DAA4D;AAC5D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;AAExD;;;;;;;GAOG;AACH,OAAO,EAAE,aAAa,IAAI,cAAc,EAAE,CAAC;AAE3C,yEAAyE;AACzE,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,mBAAmB,CAAC,eAAe,CAAC,EACpC,UAAU,GAAG,WAAW,GAAG,YAAY,GAAG,YAAY,CACvD,GACC,kBAAkB,GAAG;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sDAAsD;IACtD,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,wEAAwE;IACxE,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;;;OAKG;IACD,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CACtE,CAAC;AAQJ;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,2CAiJ1C"}

package/dist/components/Callout/index.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "../../chunks/Callout-63z0T-w3.js";
+import { n as e, t } from "../../chunks/Callout-Dvt6lqVn.js";
 export { t as Callout, e as CalloutTrigger };

package/dist/components/Checkbox/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../chunks/Checkbox-CkcngYWa.js";
+import { t as e } from "../../chunks/Checkbox-D-pVpobU.js";
 export { e as Checkbox };