@weasel-js/ui 1.0.2 → 1.0.4

package/dist/chunks/ToggleBar-BP1zFcvg.js.map

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

package/dist/chunks/{ToolButton-DpT-mukU.js → ToolButton-ClPz5L6j.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./Tooltip-Clgn4trm.js";
+import { n as e, t } from "./Tooltip-DXJbdR5B.js";
 import { Focusable as n } from "react-aria-components";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 var a = {
@@ -51,4 +51,4 @@ function o(o) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=ToolButton-DpT-mukU.js.map
+//# sourceMappingURL=ToolButton-ClPz5L6j.js.map

package/dist/chunks/ToolButton-ClPz5L6j.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolButton-ClPz5L6j.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: 3px;\n  color: var(--wzl-fg);\n  cursor: default;\n  font-family: inherit;\n  font-size: 10px;\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: 10px; }\n.shortcut {\n  color: var(--wzl-fg-muted);\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 9px;\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-BTIwd4U4.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolGroup-BTIwd4U4.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\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":";;;;;;;AC0BA,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-BTIwd4U4.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-JvmY7iNe.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolOptionsBar-JvmY7iNe.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: 11px;\n  font-weight: 600;\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: 2px;\n}\n","import type { ReactNode } from 'react';\nimport s from './ToolOptionsBar.module.css';\n\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":";;;;;;;;AC6CA,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-JvmY7iNe.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: 11px;\n  font-weight: 600;\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: 2px;\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-DPn0owno.js → ToolPalette-DAiVhdtV.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./keyGlyph-BDH5fqkO.js";
 import { t } from "./useRovingTabIndex-DBZtq4IH.js";
-import { t as n } from "./ToolButton-DpT-mukU.js";
+import { t as n } from "./ToolButton-ClPz5L6j.js";
 import { t as r } from "./ToolGroup-BTIwd4U4.js";
 import { Fragment as i } from "react";
 import { UnknownIcon as a } from "@weasel-js/core";
@@ -94,4 +94,4 @@ function _(e) {
 //#endregion
 export { d as n, u as r, _ as t };
 
-//# sourceMappingURL=ToolPalette-DPn0owno.js.map
+//# sourceMappingURL=ToolPalette-DAiVhdtV.js.map

package/dist/chunks/ToolPalette-DAiVhdtV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolPalette-DAiVhdtV.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: 4px;\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":";;;;;;;;;;;;;;;;;ACaA,SAAgB,EAAoB,GAA6D;AAC/F,KAAI,CAAC,EAAG;CACR,IAAM,IAAS,MAAM,QAAQ,EAAE,IAAI,GAAG,EAAE,IAAI,KAAM,EAAE,KAC9C,IAAkB,EAAE;AAK1B,QAJI,EAAE,OAAK,EAAM,KAAK,IAAI,EACtB,EAAE,UAAU,MAAM,EAAM,KAAK,IAAI,EACjC,EAAE,OAAK,EAAM,KAAK,IAAI,EAC1B,EAAM,KAAK,EAAS,EAAO,CAAC,EACrB;;AAOT,SAAgB,EAAe,GAAkD;CAC/E,IAAM,IAAQ,EAAoB,EAAE;AACpC,QAAO,IAAQ,EAAM,KAAK,GAAG,GAAG,KAAA;;;;ACpBlC,IAAM,IAAsB;CAAC;CAAU;CAAS;CAAQ;CAAQ;CAAO,EACjE,IAAO;AAEb,SAAS,EAAiB,GAAyC;CACjE,IAAM,oBAAS,IAAI,KAAwB;AAC3C,MAAK,IAAM,KAAQ,GAAM;EACvB,IAAM,IAAI,EAAK,cAAc,SAAS,GAChC,IAAS,EAAO,IAAI,EAAE,IAAI,EAAE;AAElC,EADA,EAAO,KAAK,EAAK,EACjB,EAAO,IAAI,GAAG,EAAO;;AAEvB,QAAO;;AAGT,SAAS,EACP,GACA,GACU;CACV,IAAM,IAAO,IAAI,IAAI,EAAO,MAAM,CAAC,EAC7B,IAAoB,EAAE;AAC5B,MAAK,IAAM,KAAS,EAClB,CAAI,EAAK,IAAI,EAAM,KACjB,EAAQ,KAAK,EAAM,EACnB,EAAK,OAAO,EAAM;AAItB,MAAK,IAAM,KAAO,EAAO,MAAM,CAC7B,CAAI,EAAK,IAAI,EAAI,IAAI,MAAQ,MAC3B,EAAQ,KAAK,EAAI,EACjB,EAAK,OAAO,EAAI;AAIpB,QADI,EAAK,IAAI,EAAK,IAAE,EAAQ,KAAK,EAAK,EAC/B;;AAGT,SAAS,EAAY,GAA0B;CAC7C,IAAM,IAAU,EAAK,cAAc;AAGnC,QAFI,KAAW,OAAa,kBAAC,GAAD,EAAe,CAAA,GACvC,OAAO,KAAY,aAAmB,EAAQ,KAAA,EAAU,GACrD;;AAmCT,SAAgB,EAAY,GAAyB;CACnD,IAAM,EACJ,UAAO,iBAAc,YAAY,cAAW,mBAAgB,iBAC5D,gBAAa,MACX,GAEE,IAAS,EADF,OAAO,OAAO,EAAM,SACD,CAAK,EAC/B,IAAY,EAAiB,GAAQ,EAAW,EAChD,IAAM;EAAC,EAAE;EAAS,MAAgB,gBAAgB,EAAE;EAAY;EAAU,CAC7E,OAAO,QAAQ,CAAC,KAAK,IAAI,EAGtB,IAAU,EAAU,SAAS,MAAM,EAAO,IAAI,EAAE,CAAE,EAClD,IAAc,EAAQ,KACzB,MAAU,IAAe,EAAqB,GAAc,EAAK,GAAG,GACtE,EACK,IAAc,EAAQ,WAAW,MAAM,EAAE,OAAO,EAAM,OAAO,EAC7D,IAAS,EAAkB;EAC/B,OAAO,EAAY,KAAK,OAAa,EAAE,UAAU,CAAC,GAAS,EAAE;EAC7D,eAAe,EAAE;EAGjB,GAAI,KAAe,KAAK,EAAY,KAAe,EAAE,cAAc,GAAa,GAAG,EAAE;EACtF,CAAC,EACE,IAAQ;AAEZ,QACE,kBAAC,OAAD;EACE,KAAK,EAAO;EACZ,WAAW;EACX,MAAK;EACL,cAAW;YAEV,EAAU,KAAK,GAAK,MACnB,kBAAC,GAAD,EAAA,UAAA,CACG,IAAI,KACH,kBAAC,OAAD;GACE,WAAW,EAAE;GACb,MAAK;GACL,oBAAkB,MAAgB,eAAe,aAAa;GAC9D,CAAA,EAEJ,kBAAC,GAAD;GAAwB;GAAa,UAAU;aAC5C,EAAO,IAAI,EAAI,CAAE,KAAK,MAAS;IAC9B,IAAM,IAAI,EAAE,GACN,IAAQ,EAAK,cAAc,SAAS,EAAK,IACzC,IAAW,EAAK,cAAc,YAC/B,EAAe,IAAiB,EAAe,EAAK,GAAG,GAAG,EAAK,WAAW,EACzE,IAAU,EAAY,IACtB,IAAW,IAAe,EAAa,SAAS,CAAC,KAAK,KAAA,GACtD,IAAgB,CAAC,KAAW,IAC9B,GAAG,IAAQ,IAAW,KAAK,EAAS,KAAK,GAAG,iBAAiB,EAAS,SACtE,KAAA;AACJ,WACE,kBAAC,GAAD;KAEE,MAAM,EAAY,EAAK;KAChB;KACG;KACV,QAAQ,EAAM,WAAW,EAAK;KAC9B,UAAU,EAAO,YAAY,EAAE,KAAK;KACpC,cAAc,CAAC;KACf,WAAW,CAAC,EAAE,YAAY,CAAC,KAAW,EAAE,cAAc,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KAChF,OAAO;KACP,SAAS,UAAgB,EAAM,UAAU,EAAK,GAAG,SAAS;KAC1D,WAAW,EAAO,UAAU,EAAE;KAC9B,EAXK,EAAK,GAWV;KAEJ;GACQ,CAAA,CACH,EAAA,EApCI,EAoCJ,CACX;EACE,CAAA"}

package/dist/chunks/{Tooltip-Clgn4trm.js → Tooltip-DXJbdR5B.js}

@@ -21,6 +21,7 @@ function s(n) {
 		placement: c,
 		offset: l,
 		className: [a.tooltip, s].filter(Boolean).join(" "),
+		"data-weasel-overlay": "",
 		children: [/* @__PURE__ */ r(e, {
 			className: a.arrow,
 			children: /* @__PURE__ */ r("svg", {
@@ -36,4 +37,4 @@ function s(n) {
 //#endregion
 export { o as n, s as t };
 
-//# sourceMappingURL=Tooltip-Clgn4trm.js.map
+//# sourceMappingURL=Tooltip-DXJbdR5B.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip-DXJbdR5B.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: 12px;\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 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<RACTooltipProps, 'children' | 'className'> & {\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, ...rest } = props;\n  return (\n    <RACTooltip\n      {...rest}\n      placement={placement}\n      offset={offset}\n      className={[s.tooltip, className].filter(Boolean).join(' ')}\n      data-weasel-overlay=\"\"\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"],"mappings":";;;;;;;;AC0BA,SAAgB,EAAe,GAA4B;CACzD,IAAM,EAAE,WAAQ,KAAK,gBAAa,GAAG,GAAG,MAAS;AACjD,QAAO,kBAAC,GAAD;EAA0B;EAAmB;EAAY,GAAI;EAAQ,CAAA;;AAa9E,SAAgB,EAAQ,GAAqB;CAC3C,IAAM,EAAE,aAAU,cAAW,eAAY,OAAO,YAAS,GAAG,GAAG,MAAS;AACxE,QACE,kBAAC,GAAD;EACE,GAAI;EACO;EACH;EACR,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC3D,uBAAoB;YALtB,CAOE,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"}

package/dist/chunks/useRovingTabIndex-DBZtq4IH.js.map

@@ -1 +1 @@
-{"version":3,"file":"useRovingTabIndex-DBZtq4IH.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\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\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":";;AAiCA,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-DBZtq4IH.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/color/oklch.d.ts

@@ -1,3 +1,9 @@
+/**
+ * A chroma envelope over lightness, as three linear segments: flat at `cBot`
+ * below `lRange[0]`, rising to `cPeak` at `midL`, falling to `cTop` at
+ * `lRange[1]`, flat beyond. Keeps a color ramp inside gamut at the light and
+ * dark ends while staying saturated through the middle.
+ */
 export type ChromaCurve = {
     lRange: [number, number];
     midL: number;
@@ -5,10 +11,16 @@ export type ChromaCurve = {
     cPeak: number;
     cTop: number;
 };
+/** A single lightness/chroma sample. */
 export type ChromaCurvePoint = {
     L: number;
     C: number;
 };
+/**
+ * Converts an OKLCH color to a gamut-clipped `#rrggbb` string. Hue is in
+ * degrees, unlike the kit's OKLab helpers which take radians.
+ */
 export declare function oklchToHex(L: number, C: number, Hdeg: number): string;
+/** Evaluates a {@link ChromaCurve} at a lightness, clamping outside its range. */
 export declare function chromaAt(L: number, curve: ChromaCurve): number;
 //# sourceMappingURL=oklch.d.ts.map

package/dist/color/oklch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"oklch.d.ts","sourceRoot":"","sources":["../../src/color/oklch.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAMrE;AAED,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,MAAM,CAM9D"}
+{"version":3,"file":"oklch.d.ts","sourceRoot":"","sources":["../../src/color/oklch.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,wCAAwC;AACxC,MAAM,MAAM,gBAAgB,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAMrE;AAED,kFAAkF;AAClF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,MAAM,CAM9D"}

package/dist/components/ActionBar/ActionBar.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+/** Props for {@link ActionBar}. */
 export interface ActionBarProps {
     /** Group key — only actions with `action.group === group` are rendered. */
     group: string;

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../src/components/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAc7D,MAAM,WAAW,cAAc;IAC7B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkE9C"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../src/components/ActionBar/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAc7D,mCAAmC;AACnC,MAAM,WAAW,cAAc;IAC7B,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAaD;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkE9C"}

package/dist/components/ActionBar/index.js

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

package/dist/components/ActionsBar/ActionsBar.d.ts

@@ -1,4 +1,8 @@
 import { type ReactElement, type ReactNode } from 'react';
+/**
+ * One button in an {@link ActionsBar}. `value` is only a React key; the item
+ * carries no selected state.
+ */
 export type ActionsBarItem<V extends string | number = string> = {
     value: V;
     label?: ReactNode;
@@ -6,8 +10,11 @@ export type ActionsBarItem<V extends string | number = string> = {
     disabled?: boolean;
     onAction: () => void;
 };
+/** Segment height and type scale for an {@link ActionsBar}. */
 export type ActionsBarSize = 'sm' | 'md';
+/** Visual treatment of an {@link ActionsBar}. */
 export type ActionsBarVariant = 'default' | 'minimal';
+/** Props for {@link ActionsBar}. */
 export type ActionsBarProps<V extends string | number = string> = {
     items: readonly ActionsBarItem<V>[];
     ariaLabel?: string;
@@ -16,5 +23,13 @@ export type ActionsBarProps<V extends string | number = string> = {
     size?: ActionsBarSize;
     variant?: ActionsBarVariant;
 };
+/**
+ * Segmented strip of momentary buttons — each press fires and nothing stays
+ * selected. Shares the look and the arrow-key navigation of `ToggleBar` and
+ * `OptionsBar`.
+ *
+ * This is a plain callback bar. For buttons driven by the kit's actions
+ * registry, use `ActionBar` instead.
+ */
 export declare function ActionsBar<V extends string | number = string>(props: ActionsBarProps<V>): ReactElement;
 //# sourceMappingURL=ActionsBar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionsBar.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsBar/ActionsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IAC/D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IAChE,KAAK,EAAE,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CA8CtG"}
+{"version":3,"file":"ActionsBar.d.ts","sourceRoot":"","sources":["../../../src/components/ActionsBar/ActionsBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,YAAY,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9E;;;GAGG;AACH,MAAM,MAAM,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IAC/D,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,+DAA+D;AAC/D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,iDAAiD;AACjD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEtD,oCAAoC;AACpC,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAAI;IAChE,KAAK,EAAE,SAAS,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CA8CtG"}

package/dist/components/Badge/Badge.d.ts

@@ -44,7 +44,21 @@ type BadgePropsByShape = {
         shapeParams?: BadgeShapeParams[S];
     };
 }[BadgeShape];
+/**
+ * Props for {@link Badge}. Discriminated on `shape` so `shapeParams` is typed
+ * to the chosen shape's own parameters.
+ */
 export type BadgeProps = BadgePropsByShape;
+/**
+ * A small labelled chip. Renders as a `<span>`, or as a `<button>`/`<a>` when
+ * given `onClick`/`href` — override with `as`.
+ *
+ * Beyond the built-in {@link BadgeShape} silhouettes, a badge can be composed:
+ * `base` picks the underlying outline and `effects` layer perimeter treatments
+ * over it, which stack additively. `bloat` pushes the whole silhouette outward
+ * along its normals before effects run, and `crawl` animates perimeter
+ * patterns.
+ */
 export declare function Badge(props: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuD,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhH,OAAO,EAAU,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAW,KAAK,UAAU,EAAoB,MAAM,WAAW,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE9E,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;wCAEoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,mGAAmG;IACnG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACxC,oEAAoE;IACpE,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,GAAG,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;iFAC6E;IAC7E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,KAAK,iBAAiB,GAAG;KACtB,CAAC,IAAI,UAAU,GAAG,cAAc,GAAG;QAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;KAAE;CACrF,CAAC,UAAU,CAAC,CAAC;AAEd,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAS3C,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqQtC"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuD,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAEhH,OAAO,EAAU,KAAK,gBAAgB,EAAE,MAAM,UAAU,CAAC;AACzD,OAAO,EAAS,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AACtE,OAAO,EAAW,KAAK,UAAU,EAAoB,MAAM,WAAW,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE9E,UAAU,cAAc;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;wCAEoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC/B,+GAA+G;IAC/G,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,mGAAmG;IACnG,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,UAAU,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IACxC,oEAAoE;IACpE,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,GAAG,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;iFAC6E;IAC7E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,KAAK,iBAAiB,GAAG;KACtB,CAAC,IAAI,UAAU,GAAG,cAAc,GAAG;QAAE,KAAK,CAAC,EAAE,CAAC,CAAC;QAAC,WAAW,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;KAAE;CACrF,CAAC,UAAU,CAAC,CAAC;AAEd;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAS3C;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,2CAqQtC"}

package/dist/components/Badge/bases/edgeProfiles.d.ts

@@ -1,6 +1,14 @@
+/**
+ * Shapes one vertical edge of a badge base. Given a position down the edge
+ * (`t`, 0 at the top to 1 at the bottom) and the configured depth in CSS px,
+ * returns the horizontal displacement of that point, positive to the right.
+ */
 export type EdgeProfile = (t: number, depth: number) => number;
+/** The named edge profiles in {@link EDGE_PROFILES}. */
 export type BuiltInEdgeName = 'flat' | 'chevron' | 'slant' | 'slant-up' | 'round' | 'scallop' | 'concave-chevron';
+/** An edge profile, either by name or as a function. */
 export type EdgeCap = BuiltInEdgeName | EdgeProfile;
+/** The built-in {@link EdgeProfile} implementations, by name. */
 export declare const EDGE_PROFILES: Record<BuiltInEdgeName, EdgeProfile>;
 export declare function resolveEdge(cap: EdgeCap): EdgeProfile;
 //# sourceMappingURL=edgeProfiles.d.ts.map

package/dist/components/Badge/bases/edgeProfiles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edgeProfiles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/bases/edgeProfiles.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAE/D,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,OAAO,GACP,UAAU,GACV,OAAO,GACP,SAAS,GACT,iBAAiB,CAAC;AAEtB,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,WAAW,CAAC;AAEpD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAQ9D,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,WAAW,CAGrD"}
+{"version":3,"file":"edgeProfiles.d.ts","sourceRoot":"","sources":["../../../../src/components/Badge/bases/edgeProfiles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;AAE/D,wDAAwD;AACxD,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,SAAS,GACT,OAAO,GACP,UAAU,GACV,OAAO,GACP,SAAS,GACT,iBAAiB,CAAC;AAEtB,wDAAwD;AACxD,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,WAAW,CAAC;AAEpD,iEAAiE;AACjE,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,eAAe,EAAE,WAAW,CAQ9D,CAAC;AAEF,wBAAgB,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,WAAW,CAGrD"}

package/dist/components/Badge/types.d.ts

@@ -1,7 +1,18 @@
 import type { ReactNode } from 'react';
+/**
+ * Built-in badge silhouettes. `pill`, `plain` and `square` are drawn in CSS;
+ * the rest are SVG outlines, several of which route through the compose
+ * pipeline (a base shape plus perimeter effects).
+ */
 export type BadgeShape = 'pill' | 'plain' | 'square' | 'notched' | 'perforated' | 'hexagon' | 'starburst' | 'scalloped' | 'shield' | 'ribbon' | 'beavis' | 'sparkler' | 'postage' | 'cloud' | 'house' | 'plaque' | 'crest' | 'urn' | 'coffin' | 'receipt' | 'wood' | 'quatrefoil';
+/**
+ * Semantic color of a badge. `custom` paints from the `--badge-edge` custom
+ * property instead of a theme token, so a call site can supply its own color.
+ */
 export type BadgeTone = 'accent' | 'info' | 'warn' | 'danger' | 'muted' | 'neutral' | 'custom';
+/** How a badge's tone is applied: outline only, filled, or a soft tinted fill. */
 export type BadgeVariant = 'outline' | 'solid' | 'subtle';
+/** Badge type scale and padding step. */
 export type BadgeSize = 'sm' | 'md';
 export interface ShapeRenderProps<P = Record<string, never>> {
     variant: BadgeVariant;

package/dist/components/Badge/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,UAAU,GAClB,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,GACtD,SAAS,GACT,WAAW,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAC1D,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GACrD,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;AAEnE,MAAM,MAAM,SAAS,GACjB,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE3E,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IACzD,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,CAAC;IACV,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAAG,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AAEzF;yGACyG;AACzG,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,EAAE,CAAC;CAChE;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IACpD,2HAA2H;IAC3H,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,gBAAgB,CAAC;IAC1C,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,WAAW,CAAC,CAAC;IACnD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC;CACd"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAClB,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,GACtD,SAAS,GACT,WAAW,GAAG,WAAW,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,GAC1D,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GACrD,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,YAAY,CAAC;AAEnE;;;GAGG;AACH,MAAM,MAAM,SAAS,GACjB,QAAQ,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE3E,kFAAkF;AAClF,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC1D,yCAAyC;AACzC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,MAAM,WAAW,gBAAgB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IACzD,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,CAAC,CAAC;IACV,0FAA0F;IAC1F,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAAG,GAAG,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AAEzF;yGACyG;AACzG,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,EAAE,CAAC;CAChE;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC;IACpD,2HAA2H;IAC3H,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,gBAAgB,CAAC;IAC1C,MAAM,EAAE,WAAW,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,WAAW,CAAC,CAAC;IACnD,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,CAAC;CACd"}

package/dist/components/BandEditor/BandEditor.d.ts

@@ -0,0 +1,56 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type BandScale } from './scale';
+import { type Band } from './bands';
+export type { Band, BandScale };
+export interface BandEditorProps<T> {
+    /** Ascending by `from`. `value[0].from` is normalized to `min` on read. */
+    value: Band<T>[];
+    /** Live during a drag — wire for preview, do not write to history. */
+    onInput?: (next: Band<T>[]) => void;
+    /** Committed at gesture end: one call per gesture. */
+    onChange: (next: Band<T>[]) => void;
+    min: number;
+    max: number;
+    /** Default `'log'`. */
+    scale?: 'linear' | 'log' | BandScale;
+    ticks?: {
+        at: number;
+        label?: ReactNode;
+    }[];
+    /** Snap a dragged seam to a tick within ~6px. Default true; `alt` defeats it per-drag. */
+    snap?: boolean;
+    renderBand?: (band: Band<T>, index: number) => ReactNode;
+    selectedIndex?: number | null;
+    onSelect?: (index: number) => void;
+    /** Payload for a band split off an existing one. Default duplicates `from`. */
+    splitBand?: (at: number, from: T) => T;
+    label?: ReactNode;
+    className?: string;
+}
+/**
+ * Divides a numeric axis into contiguous bands and lets you drag the seams
+ * between them. Each band carries a payload the consumer supplies and
+ * renders through `renderBand`; the control itself knows nothing about what
+ * a band means.
+ *
+ * The axis is always fully covered — N bands, N−1 interior seams, no gaps and
+ * no overlaps — so editing is editing a sorted list of seam positions. Seams
+ * clamp at their neighbours rather than crossing, which means a drag can
+ * never destroy a band: removal is only ever the explicit `x` / `Delete`
+ * merge. The first band is doubly exceptional, its left edge pinned to `min`
+ * and its body immovable, and it has no left neighbour to merge into.
+ *
+ * | Gesture | Effect |
+ * |---|---|
+ * | drag a seam | resize the two bands either side |
+ * | drag a band body | move both its seams, preserving its span |
+ * | click the ruler | split the band under the pointer |
+ * | `x` / `Delete` | merge the selected band into its left neighbour |
+ * | click a band | select it |
+ * | `←` `→` on a focused seam | move it by one step; `shift` for ten |
+ *
+ * `scale` defaults to `'log'`, because the interesting part of a width axis
+ * is usually its narrow end.
+ */
+export declare function BandEditor<T>(props: BandEditorProps<T>): ReactElement;
+//# sourceMappingURL=BandEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BandEditor.d.ts","sourceRoot":"","sources":["../../../src/components/BandEditor/BandEditor.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAChE,OAAO,EAWL,KAAK,IAAI,EACV,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;AAEhC,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,2EAA2E;IAC3E,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;IACjB,sEAAsE;IACtE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,sDAAsD;IACtD,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,uBAAuB;IACvB,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IAC5C,0FAA0F;IAC1F,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;IACzD,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,YAAY,CA6NrE"}

package/dist/components/BandEditor/bands.d.ts

@@ -0,0 +1,45 @@
+import type { BandScale } from './scale';
+export interface Band<T> {
+    /** Domain value where this band starts. The first band's is normalized to `min`. */
+    from: number;
+    data: T;
+}
+/**
+ * A band list covers `[min, max]` exactly: N bands, N−1 interior seams, no
+ * gaps and no overlaps. Seam *k* is `bands[k + 1].from`, and lives between
+ * `bands[k].from` and the start of the band after next (or `max`).
+ *
+ * Every function here preserves that. Each returns the array it was given
+ * when the edit would be a no-op, so callers can skip a callback with `===`.
+ */
+/** Pins the first band's start to `min`; leaves the rest alone. */
+export declare function normalizeBands<T>(value: readonly Band<T>[], min: number): Band<T>[];
+/** `[from, to]` of band `index` in domain space. */
+export declare function bandBounds<T>(bands: readonly Band<T>[], index: number, min: number, max: number): [number, number];
+/** How far seam `index` can travel before it would cross a neighbour. */
+export declare function seamBounds<T>(bands: readonly Band<T>[], index: number, min: number, max: number): [number, number];
+/** Clamps a target position for seam `index` to its neighbours, inclusive. */
+export declare function clampSeamTo<T>(bands: readonly Band<T>[], index: number, to: number, min: number, max: number): number;
+export declare function setSeam<T>(bands: readonly Band<T>[], index: number, to: number): Band<T>[];
+/** Band edges as track positions: `length + 1` values from 0 to 1. */
+export declare function unitEdges<T>(bands: readonly Band<T>[], scale: BandScale, min: number, max: number): number[];
+/**
+ * Largest part of `shift` band `index` can take without pushing a neighbour's
+ * far edge past it. Zero for the first and last band, whose outer edges are
+ * `min` and `max` and do not move.
+ */
+export declare function clampBandShift(edges: readonly number[], index: number, shift: number): number;
+/** Moves both edges of band `index`, which is the same as moving two seams. */
+export declare function moveBandEdges<T>(bands: readonly Band<T>[], index: number, from: number, to: number): Band<T>[];
+/**
+ * Splits the band containing `at` in two, the new band starting there.
+ * A position already on a seam or on `min` / `max` splits nothing.
+ */
+export declare function splitBands<T>(bands: readonly Band<T>[], at: number, min: number, max: number, makeData: (at: number, from: T) => T): Band<T>[];
+/**
+ * Merges band `index` into its left neighbour, which keeps its payload and
+ * absorbs the span. The first band has no left neighbour and cannot be
+ * merged away — a partition always has at least one part.
+ */
+export declare function mergeBand<T>(bands: readonly Band<T>[], index: number): Band<T>[];
+//# sourceMappingURL=bands.d.ts.map

package/dist/components/BandEditor/bands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bands.d.ts","sourceRoot":"","sources":["../../../src/components/BandEditor/bands.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,WAAW,IAAI,CAAC,CAAC;IACrB,oFAAoF;IACpF,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,CAAC,CAAC;CACT;AAED;;;;;;;GAOG;AAEH,mEAAmE;AACnE,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAInF;AAED,oDAAoD;AACpD,wBAAgB,UAAU,CAAC,CAAC,EAC1B,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,CAAC,MAAM,EAAE,MAAM,CAAC,CAIlB;AAED,yEAAyE;AACzE,wBAAgB,UAAU,CAAC,CAAC,EAC1B,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,CAAC,MAAM,EAAE,MAAM,CAAC,CAIlB;AAED,8EAA8E;AAC9E,wBAAgB,WAAW,CAAC,CAAC,EAC3B,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,KAAK,EAAE,MAAM,EACb,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,MAAM,CAGR;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAK1F;AAED,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,CAAC,EACzB,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,KAAK,EAAE,SAAS,EAChB,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,GACV,MAAM,EAAE,CAIV;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAO7F;AAED,+EAA+E;AAC/E,wBAAgB,aAAa,CAAC,CAAC,EAC7B,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACT,IAAI,CAAC,CAAC,CAAC,EAAE,CAKX;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAC1B,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EACzB,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,CAAC,GACnC,IAAI,CAAC,CAAC,CAAC,EAAE,CAcX;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,CAGhF"}

package/dist/components/BandEditor/index.d.ts

@@ -0,0 +1,4 @@
+export { BandEditor } from './BandEditor';
+export type { Band, BandEditorProps, BandScale } from './BandEditor';
+export { linearScale, logScale } from './scale';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/BandEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BandEditor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC"}

package/dist/components/BandEditor/index.js

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

package/dist/components/BandEditor/scale.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Maps a domain value onto its position along the track, and back.
+ *
+ * Deliberately narrow — two functions over an explicit `[min, max]` — rather
+ * than a general scale type for the package. `Plot2D`, `CurveEditor` and
+ * `@weasel-js/core` each already use "scale" or "domain" to mean something
+ * else; generalizing is a job for a second consumer that needs one.
+ */
+export interface BandScale {
+    /** Domain → position in [0,1]. Must be monotonic increasing. */
+    toUnit(value: number, min: number, max: number): number;
+    /** Inverse of `toUnit`. */
+    fromUnit(unit: number, min: number, max: number): number;
+}
+export declare function clamp01(u: number): number;
+/** Even domain steps take even track steps. */
+export declare const linearScale: BandScale;
+/** Even *ratios* take even track steps. Requires `min > 0`. */
+export declare const logScale: BandScale;
+/**
+ * Resolves the `scale` prop, substituting `linearScale` for a `logScale`
+ * that `min` would send to `NaN`.
+ */
+export declare function resolveScale(scale: 'linear' | 'log' | BandScale | undefined, min: number): BandScale;
+//# sourceMappingURL=scale.d.ts.map

package/dist/components/BandEditor/scale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scale.d.ts","sourceRoot":"","sources":["../../../src/components/BandEditor/scale.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,MAAM,WAAW,SAAS;IACxB,gEAAgE;IAChE,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;IACxD,2BAA2B;IAC3B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1D;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,+CAA+C;AAC/C,eAAO,MAAM,WAAW,EAAE,SAGzB,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,QAAQ,EAAE,SAUtB,CAAC;AAQF;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,SAAS,EAC/C,GAAG,EAAE,MAAM,GACV,SAAS,CAkBX"}