@weasel-js/ui 1.0.2 → 1.0.4

package/dist/chunks/SelectionPanel-D_wk_8ZN.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionPanel-D_wk_8ZN.js","names":[],"sources":["../../src/components/SelectionPanel/model.ts","../../src/components/SelectionPanel/SelectionPanel.module.css","../../src/components/SelectionPanel/SelectionPanel.tsx"],"sourcesContent":["// Pure selection→panel derivations for SelectionPanel. Kept free of\n// React so intersection/aggregation semantics are unit-testable.\n//\n// Path convention (see core `NodePropertiesEntry`): a leaf's OWN KEY in\n// the schema is its node path — a dotted path of any depth rooted at\n// `pose` or `data` (`pose.x`, `data.fill`, `data.style.fontSize`). Group\n// keys are organizational only.\n\nimport {\n  MIXED,\n  type Mixed,\n  type NodePropertiesEntry,\n  type NodeRoutingEntry,\n  type SceneNode,\n  type ToolPrefGroup,\n  type ToolPrefLeaf,\n} from '@weasel-js/core';\n\n// Re-exported under its existing public name here: the kit-wide \"these\n// values disagree\" sentinel (`@weasel-js/core`'s `MIXED`) also covers\n// multi-node aggregation, so this panel doesn't get its own symbol.\nexport { MIXED };\nexport type { Mixed };\n\nexport type AnyNode = SceneNode<unknown, string, unknown>;\n\n/**\n * One editable property in a {@link SelectionPanel}, paired with the dotted\n * node path it reads and writes.\n */\nexport interface PanelLeaf {\n  /** Dotted node path — the leaf's key in the schema. */\n  path: string;\n  leaf: ToolPrefLeaf;\n}\n\n/**\n * One labeled row of a panel section. Holds several leaves when the schema\n * paired them.\n */\nexport interface PanelRow {\n  label: string;\n  leaves: PanelLeaf[];\n}\n\n/**\n * A titled block of rows, derived from one top-level group of a properties\n * schema. `key` is that group's schema key.\n */\nexport interface PanelSection {\n  key: string;\n  name: string;\n  rows: PanelRow[];\n}\n\n/** Derive a node's kind: containers are `'group'`; leaves classify their\n *  `data` through the routing entries (first match wins, `'unknown'`\n *  otherwise) — same semantics as core's `NodeRouting.classify`. */\nexport function classifyKind(\n  node: AnyNode,\n  routing: readonly NodeRoutingEntry[],\n): string {\n  if (node.kind === 'container') return 'group';\n  for (const entry of routing) {\n    if (entry.matches(node.data)) return entry.name;\n  }\n  return 'unknown';\n}\n\nfunction isGroup(n: ToolPrefLeaf | ToolPrefGroup): n is ToolPrefGroup {\n  return !('kind' in n);\n}\n\n/** Flatten a schema to sections of leaves. Nested groups fold into their\n *  top-level section; top-level leaves get an untitled leading section. */\nfunction flatten(schema: ToolPrefGroup): PanelSection[] {\n  const sections: PanelSection[] = [];\n  const untitled: PanelLeaf[] = [];\n\n  const collect = (group: ToolPrefGroup, into: PanelLeaf[]): void => {\n    for (const [key, child] of Object.entries(group.children)) {\n      if (isGroup(child)) collect(child, into);\n      else into.push({ path: key, leaf: child });\n    }\n  };\n\n  for (const [key, child] of Object.entries(schema.children)) {\n    if (isGroup(child)) {\n      const leaves: PanelLeaf[] = [];\n      collect(child, leaves);\n      sections.push({ key, name: child.name, rows: pairRows(leaves) });\n    } else {\n      untitled.push({ path: key, leaf: child });\n    }\n  }\n  if (untitled.length > 0) {\n    sections.unshift({ key: '', name: '', rows: pairRows(untitled) });\n  }\n  return sections;\n}\n\n/** Merge consecutive leaves sharing a `pair` id into one labeled row. */\nfunction pairRows(leaves: readonly PanelLeaf[]): PanelRow[] {\n  const rows: PanelRow[] = [];\n  for (const item of leaves) {\n    const pair = item.leaf.pair;\n    const prev = rows[rows.length - 1];\n    if (pair !== undefined && prev !== undefined && prev.label === pair) {\n      prev.leaves.push(item);\n    } else {\n      rows.push({ label: pair ?? item.leaf.name, leaves: [item] });\n    }\n  }\n  return rows;\n}\n\n/**\n * The schema the panel shows for a set of kinds: one kind → its full\n * schema; several → the intersection by (path, leaf kind), shaped by the\n * first kind's section/row layout. Kinds without a registered schema\n * contribute nothing, so their presence collapses the intersection.\n */\nexport function effectiveSections(\n  kinds: readonly string[],\n  entries: readonly NodePropertiesEntry[],\n): PanelSection[] {\n  const uniq = [...new Set(kinds)];\n  if (uniq.length === 0) return [];\n  const byName = new Map(entries.map((e) => [e.name, e]));\n  const schemas = uniq.map((k) => byName.get(k)?.schema);\n  if (schemas.some((s) => s === undefined)) return [];\n  const [first, ...rest] = schemas as ToolPrefGroup[];\n\n  const flatFirst = flatten(first);\n  if (rest.length === 0) return flatFirst;\n\n  // '\\0' delimiter: path and kind strings are unconstrained, so a\n  // printable separator could collide with real content.\n  const leafKey = (l: PanelLeaf): string => `${l.path}\\0${l.leaf.kind}`;\n  const restKeys = rest.map(\n    (schema) =>\n      new Set(\n        flatten(schema)\n          .flatMap((s) => s.rows)\n          .flatMap((r) => r.leaves)\n          .map(leafKey),\n      ),\n  );\n  const keep = (l: PanelLeaf): boolean =>\n    restKeys.every((set) => set.has(leafKey(l)));\n\n  return flatFirst\n    .map((section) => ({\n      ...section,\n      rows: section.rows\n        .map((row) => ({ ...row, leaves: row.leaves.filter(keep) }))\n        .filter((row) => row.leaves.length > 0),\n    }))\n    .filter((section) => section.rows.length > 0);\n}\n\n/** Read a node value at a dotted path of any depth (`pose.x`,\n *  `data.style.fontSize`, `data.style.fill.color`). Returns `undefined` if\n *  the path is dotless (mirrors `commit`'s no-op on a malformed schema\n *  key) or if any intermediate segment is missing or not an object. */\nexport function nodeValueAt(node: AnyNode, path: string): unknown {\n  const segments = path.split('.');\n  if (segments.length < 2) return undefined;\n  const head = segments[0];\n  let cursor: unknown = head === 'pose' ? node.pose : head === 'data' ? node.data : undefined;\n  for (let i = 1; i < segments.length; i++) {\n    if (cursor == null || typeof cursor !== 'object') return undefined;\n    cursor = (cursor as Record<string, unknown>)[segments[i]];\n  }\n  return cursor;\n}\n\n/** Immutably set `value` at a dotted path within `root`, cloning each level\n *  on the way down so React sees new object identities. Arrays stay arrays\n *  (an array intermediate is shallow-copied, not flattened into `{0: ...}`)\n *  — this is the write-side twin of `nodeValueAt`, so a schema author who\n *  gets a working read gets a working write. */\nexport function setAtPath(root: object, segments: readonly string[], value: unknown): object {\n  const [head, ...rest] = segments;\n  if (rest.length === 0) {\n    return Array.isArray(root)\n      ? Object.assign([...root], { [head]: value })\n      : { ...root, [head]: value };\n  }\n  const child = (root as Record<string, unknown>)[head];\n  const childObj = Array.isArray(child)\n    ? [...child]\n    : child != null && typeof child === 'object'\n      ? { ...child }\n      : {};\n  const nested = setAtPath(childObj, rest, value);\n  return Array.isArray(root)\n    ? Object.assign([...root], { [head]: nested })\n    : { ...root, [head]: nested };\n}\n\n/** Aggregate a path across nodes: the shared value, or `MIXED`. */\nexport function aggregateValue(\n  nodes: readonly AnyNode[],\n  path: string,\n): unknown | Mixed {\n  let value: unknown;\n  let first = true;\n  for (const node of nodes) {\n    const v = nodeValueAt(node, path);\n    if (first) {\n      value = v;\n      first = false;\n    } else if (!Object.is(v, value)) {\n      return MIXED;\n    }\n  }\n  return value;\n}\n\n/** `'rect ×2 · text'` — kinds in first-seen order with counts. */\nexport function kindBreakdown(kinds: readonly string[]): string {\n  const counts = new Map<string, number>();\n  for (const k of kinds) counts.set(k, (counts.get(k) ?? 0) + 1);\n  return [...counts.entries()]\n    .map(([k, n]) => (n > 1 ? `${k} ×${n}` : k))\n    .join(' · ');\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  font-size: 12px;\n  color: var(--wzl-fg);\n}\n\n.header {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  padding: 8px 10px;\n  border-block-end: 1px solid var(--wzl-border);\n}\n\n.kind {\n  font-weight: 600;\n  font-size: 13px;\n}\n\n.breakdown {\n  font-size: 11px;\n  opacity: 0.6;\n}\n\n.section {\n  padding: 6px 10px 8px;\n  border-block-end: 1px solid var(--wzl-border);\n}\n\n.section:last-child {\n  border-block-end: none;\n}\n\n.sectionTitle {\n  margin: 0 0 6px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.55;\n}\n\n.row {\n  display: grid;\n  grid-template-columns: 64px 1fr;\n  gap: 6px;\n  align-items: center;\n  margin-block-end: 5px;\n}\n\n.rowLabel {\n  opacity: 0.75;\n}\n\n.rowControls {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  min-inline-size: 0;\n}\n\n.rowControls > * {\n  flex: 1;\n  min-inline-size: 0;\n}\n\n.number :global(input),\n.select {\n  font-size: 11px;\n}\n\n.unitSuffix {\n  flex: none;\n  font-size: 11px;\n  opacity: 0.6;\n}\n\n.mixedSwitch {\n  opacity: 0.55;\n}\n\n.unrenderable {\n  font-size: 11px;\n  opacity: 0.5;\n  font-style: italic;\n}\n","import { Fragment, useState, useSyncExternalStore, type ReactNode } from 'react';\nimport {\n  asNodeId,\n  type NodePropertiesEntry,\n  type NodeRoutingEntry,\n  type Scene,\n  type SelectionApi,\n  type ToolPrefColor,\n  type ToolPrefEnum,\n  type ToolPrefLeaf,\n  type ToolPrefNumber,\n  type ToolPrefPaint,\n} from '@weasel-js/core';\nimport { ColorField } from '../ColorField';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { Select } from '../Select';\nimport { Switch } from '../Switch';\nimport {\n  MIXED,\n  aggregateValue,\n  classifyKind,\n  effectiveSections,\n  kindBreakdown,\n  setAtPath,\n  type AnyNode,\n  type PanelLeaf,\n} from './model';\nimport s from './SelectionPanel.module.css';\n\n/** What a {@link PropertyRenderer} is given for the property it is rendering. */\nexport interface PropertyRenderContext {\n  /** Dotted node path of the leaf (`pose.x`, `data.fill`). */\n  path: string;\n  /** The schema leaf. App renderers narrow it to their own kind shape. */\n  pref: ToolPrefLeaf;\n  /** Aggregated value across the selection; `undefined` when mixed. */\n  value: unknown;\n  /** True when selected nodes disagree at this path. */\n  mixed: boolean;\n  /** Commit a value — fans out to every selected node in one undo step. */\n  setValue: (value: unknown) => void;\n}\n\n/**\n * Renders the control for one property across the whole selection.\n * Returning `null` collapses the leaf.\n */\nexport type PropertyRenderer = (ctx: PropertyRenderContext) => ReactNode;\n\n/** Props for {@link SelectionPanel}. */\nexport interface SelectionPanelProps<TData, TLayer extends string, TPose> {\n  /** The scene handle (`useScene`). The panel subscribes itself, so it\n   *  re-renders on scene mutations regardless of parent renders. */\n  scene: Scene<TData, TLayer, TPose>;\n  /** Selection handle (`useSelection`). Only `current` is read. */\n  selection: Pick<SelectionApi, 'current'>;\n  /** Properties-trait entries, e.g. core's `defaultNodeProperties` /\n   *  `inferredNodeProperties` (+ consumer extras). Memoize or hoist. */\n  properties: readonly NodePropertiesEntry[];\n  /** Routing-trait classifiers used to derive each node's kind — pass\n   *  the same list the canvas uses. Memoize or hoist. */\n  routing: readonly NodeRoutingEntry[];\n  /** Control overrides / app-defined kinds (PrefsForm-style). Keys are\n   *  leaf paths (`data.fill`, checked first) or leaf kinds (`color`).\n   *  A renderer returning `null` collapses its leaf (and the row, when\n   *  every leaf in it collapses). */\n  renderers?: Record<string, PropertyRenderer>;\n  /** Kind → header label. Default: capitalized kind name. */\n  kindLabel?: (kind: string) => string;\n  /** Rendered when the selection is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nconst defaultKindLabel = (kind: string): string =>\n  kind.length === 0 ? kind : kind[0].toUpperCase() + kind.slice(1);\n\n/**\n * Pre-baked selection properties panel. Shows the selected nodes' kind\n * and the properties-trait schema for that kind; multi-selections show\n * the intersection of the kinds' schemas with per-field Mixed state.\n * Edits commit as one labeled `scene.batch` fan-out per gesture.\n */\nexport function SelectionPanel<TData, TLayer extends string, TPose>(\n  props: SelectionPanelProps<TData, TLayer, TPose>,\n) {\n  const {\n    scene,\n    selection,\n    properties,\n    routing,\n    renderers,\n    kindLabel = defaultKindLabel,\n    emptyState = null,\n    className,\n  } = props;\n\n  useSyncExternalStore(scene.subscribe, scene.getVersion, scene.getVersion);\n\n  const nodes = selection.current\n    .map((id) => scene.get(asNodeId(id)))\n    .filter((n): n is NonNullable<typeof n> => n != null) as readonly AnyNode[];\n\n  const kinds = nodes.map((n) => classifyKind(n, routing));\n  const sections = effectiveSections(kinds, properties);\n\n  if (nodes.length === 0) {\n    return <div className={[s.root, className].filter(Boolean).join(' ')}>{emptyState}</div>;\n  }\n\n  const commit = (leaf: PanelLeaf, value: unknown): void => {\n    const [head, ...rest] = leaf.path.split('.');\n    if (rest.length === 0) return;\n    const ids = selection.current.map(asNodeId);\n    scene.batch(`Edit ${leaf.leaf.name}`, () => {\n      for (const id of ids) {\n        const node = scene.get(id);\n        if (!node) continue;\n        // `setAtPath` spreads plain objects/arrays down the schema path;\n        // consumer `pose`/`data` are assumed plain-object-shaped along\n        // that path (a class instance's prototype would be dropped by\n        // the spread) — the `as TPose`/`as TData` casts below rely on it.\n        if (head === 'pose') {\n          scene.setPose(id, setAtPath(node.pose as object, rest, value) as TPose);\n        } else if (head === 'data') {\n          scene.update(id, { data: setAtPath(node.data as object, rest, value) as TData });\n        }\n      }\n    });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <header className={s.header}>\n        {nodes.length === 1 ? (\n          <span className={s.kind}>{kindLabel(kinds[0])}</span>\n        ) : (\n          <>\n            <span className={s.kind}>{nodes.length} selected</span>\n            <span className={s.breakdown}>{kindBreakdown(kinds)}</span>\n          </>\n        )}\n      </header>\n      {sections.map((section) => {\n        // Render controls before emitting row chrome so a null-rendering\n        // leaf (custom renderer opting out) collapses its cell — and the\n        // whole row / section when nothing survives. PrefsForm precedent.\n        const rows = section.rows\n          .map((row) => {\n            const controls = row.leaves\n              .map((panelLeaf) => ({\n                panelLeaf,\n                content: renderLeafControl(\n                  panelLeaf,\n                  row.leaves.length > 1\n                    ? `${row.label} ${panelLeaf.leaf.name}`\n                    : panelLeaf.leaf.name,\n                  nodes,\n                  renderers,\n                  commit,\n                ),\n              }))\n              .filter((c) => c.content != null);\n            return { row, controls };\n          })\n          .filter(({ controls }) => controls.length > 0);\n        if (rows.length === 0) return null;\n        return (\n          <section key={section.key} className={s.section}>\n            {section.name !== '' && <h3 className={s.sectionTitle}>{section.name}</h3>}\n            {rows.map(({ row, controls }) => (\n              <div key={row.leaves[0].path} className={s.row}>\n                <span className={s.rowLabel} title={row.leaves[0].leaf.description}>\n                  {row.label}\n                </span>\n                <span className={s.rowControls}>\n                  {controls.map(({ panelLeaf, content }) => (\n                    <Fragment key={panelLeaf.path}>{content}</Fragment>\n                  ))}\n                </span>\n              </div>\n            ))}\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction renderLeafControl(\n  panelLeaf: PanelLeaf,\n  ariaLabel: string,\n  nodes: readonly AnyNode[],\n  renderers: Record<string, PropertyRenderer> | undefined,\n  commit: (leaf: PanelLeaf, value: unknown) => void,\n): ReactNode {\n  const { path, leaf } = panelLeaf;\n  const aggregated = aggregateValue(nodes, path);\n  const mixed = aggregated === MIXED;\n  const value = mixed ? undefined : aggregated;\n\n  const ctx: PropertyRenderContext = {\n    path,\n    pref: leaf,\n    value,\n    mixed,\n    setValue: (v) => commit(panelLeaf, v),\n  };\n\n  const custom = renderers?.[path] ?? renderers?.[leaf.kind];\n  if (custom) return custom(ctx);\n  return renderBuiltin(ctx, ariaLabel);\n}\n\n/** The color of a solid `FillStyle`, or `undefined` for anything else —\n *  including a value that isn't a paint at all. `fill` is optional on the\n *  solid member of the union, so the tag alone can't decide it. */\nfunction solidColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null) return undefined;\n  const paint = value as { fill?: string; color?: unknown };\n  if (paint.fill !== undefined && paint.fill !== 'solid') return undefined;\n  return typeof paint.color === 'string' ? paint.color : undefined;\n}\n\nfunction renderBuiltin(ctx: PropertyRenderContext, ariaLabel: string): ReactNode {\n  const { pref, value, mixed, setValue } = ctx;\n  switch (pref.kind) {\n    case 'number': {\n      const p = pref as ToolPrefNumber;\n      const stored = typeof value === 'number' && Number.isFinite(value) ? value : undefined;\n      const display = stored !== undefined ? (p.unit ? p.unit.toDisplay(stored) : stored) : NaN;\n      const field = (\n        <NumberField\n          className={s.number}\n          value={mixed || stored === undefined ? NaN : display}\n          placeholder={mixed ? 'Mixed' : undefined}\n          minValue={p.min}\n          maxValue={p.max}\n          step={p.step ?? 1}\n          hideSteppers\n          aria-label={ariaLabel}\n          onChange={(n) => {\n            if (Number.isNaN(n)) return;\n            setValue(p.unit ? p.unit.fromDisplay(n) : n);\n          }}\n        />\n      );\n      if (p.unit?.suffix === undefined) return field;\n      return (\n        <>\n          {field}\n          <span className={s.unitSuffix} aria-hidden=\"true\">\n            {p.unit.suffix}\n          </span>\n        </>\n      );\n    }\n    case 'string': {\n      return (\n        <DraftInput\n          text={mixed ? undefined : typeof value === 'string' ? value : ''}\n          placeholder={mixed ? 'Mixed' : undefined}\n          ariaLabel={ariaLabel}\n          onCommit={setValue}\n        />\n      );\n    }\n    case 'boolean': {\n      const control = (\n        <Switch isSelected={Boolean(value)} onChange={setValue} aria-label={ariaLabel} />\n      );\n      // Switch has no indeterminate state; a reduced-opacity wrapper with\n      // a title is the cheap honest cue for a mixed selection.\n      if (!mixed) return control;\n      return (\n        <span className={s.mixedSwitch} title=\"Mixed\">\n          {control}\n        </span>\n      );\n    }\n    case 'enum': {\n      const p = pref as ToolPrefEnum;\n      return (\n        <Select<string>\n          className={s.select}\n          options={p.options.map((o) => ({ value: o.value, label: o.label }))}\n          selectedKey={mixed ? null : typeof value === 'string' ? value : p.default}\n          placeholder={mixed ? 'Mixed' : undefined}\n          onSelectionChange={setValue}\n          aria-label={ariaLabel}\n        />\n      );\n    }\n    case 'color': {\n      const p = pref as ToolPrefColor;\n      return (\n        <ColorField\n          value={mixed ? undefined : typeof value === 'string' ? value : p.default}\n          mixed={mixed}\n          alpha={p.alpha}\n          onChange={setValue}\n          aria-label={ariaLabel}\n        />\n      );\n    }\n    case 'paint': {\n      // The value is a whole `FillStyle`. A solid one has a color to show; a\n      // pattern or gradient does not, and showing the control's default there\n      // would claim a color the shape doesn't have. It gets the same\n      // indeterminate chip a genuinely mixed selection gets — in both cases\n      // the honest statement is \"there is no single color here\".\n      const p = pref as ToolPrefPaint;\n      const solid = solidColorOf(value) ?? (mixed ? undefined : solidColorOf(p.default));\n      return (\n        <ColorField\n          value={mixed ? undefined : solid}\n          mixed={mixed || (value !== undefined && solidColorOf(value) === undefined)}\n          alpha={p.alpha}\n          // Write the whole union member. Setting a `color` key on the\n          // existing paint would leave a `{ fill: 'linear-gradient', stops,\n          // color }` hybrid that every structural `'color' in paint` check\n          // downstream reads as solid.\n          onChange={(color) => setValue({ fill: 'solid', color })}\n          aria-label={ariaLabel}\n        />\n      );\n    }\n    default:\n      return <span className={s.unrenderable}>({pref.kind}: no renderer)</span>;\n  }\n}\n\n/** Text input with commit-on-blur/Enter semantics — live-per-keystroke\n *  writes would emit one undo step per character. */\nfunction DraftInput({\n  text,\n  placeholder,\n  ariaLabel,\n  onCommit,\n}: {\n  text: string | undefined;\n  placeholder?: string;\n  ariaLabel: string;\n  onCommit: (v: string) => void;\n}) {\n  const [draft, setDraft] = useState<string | null>(null);\n  return (\n    <Input\n      value={draft ?? text ?? ''}\n      placeholder={placeholder}\n      aria-label={ariaLabel}\n      onChange={setDraft}\n      onBlur={() => {\n        if (draft !== null && draft !== text) onCommit(draft);\n        setDraft(null);\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') (e.target as HTMLInputElement).blur();\n      }}\n    />\n  );\n}\n"],"mappings":"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"}

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

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

package/dist/chunks/{SidebarPanel-BpD0ptyg.js → SidebarPanel-BVTQ1ZyM.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 = {
@@ -56,4 +56,4 @@ function o(o) {
 //#endregion
 export { o as t };
 
-//# sourceMappingURL=SidebarPanel-BpD0ptyg.js.map
+//# sourceMappingURL=SidebarPanel-BVTQ1ZyM.js.map

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

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

package/dist/chunks/Slider-DcHnSK5g.js

@@ -0,0 +1,234 @@
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var a = {
+	root: "_root_q2asl_1",
+	row: "_row_q2asl_8",
+	track: "_track_q2asl_14",
+	trackInner: "_trackInner_q2asl_25",
+	thumb: "_thumb_q2asl_35",
+	thumbActive: "_thumbActive_q2asl_74",
+	readoutsBelow: "_readoutsBelow_q2asl_79",
+	readoutBelow: "_readoutBelow_q2asl_85",
+	readoutInline: "_readoutInline_q2asl_93",
+	notched: "_notched_q2asl_101"
+}, o = "−";
+function s(e, t) {
+	return (Number.isFinite(e) ? e.toLocaleString(void 0, t) : String(e)).replace(/^-/, "−");
+}
+//#endregion
+//#region src/components/Slider/Slider.tsx
+function c(e, t, n) {
+	return t === void 0 || t <= 0 ? e : Math.round((e - n) / t) * t + n;
+}
+function l(e, t, n) {
+	return Math.max(t, Math.min(n, e));
+}
+function u(e, t, n) {
+	return e !== void 0 && e > 0 ? e : (n - t) / 100;
+}
+function d(e, t, n, r, i, a) {
+	let o = a !== void 0 && a > 0 ? a : (i - r) / 1e3;
+	return l(e, n > 0 ? t[n - 1].value + o : r, n < t.length - 1 ? t[n + 1].value - o : i);
+}
+function f(e, t, n, r) {
+	if (!e.bounds) return [n, r];
+	let i = typeof e.bounds == "function" ? e.bounds(t) : e.bounds;
+	return [i[0], i[1]];
+}
+function p(e) {
+	return s(e.value, {
+		minimumFractionDigits: 3,
+		maximumFractionDigits: 3
+	});
+}
+function m(o) {
+	let { thumbs: s, onInput: m, onChange: h, min: g, max: _, step: v, constraint: y, trackHeight: b, ariaLabel: x, className: S } = o, C = n(null), w = n(null), T = n(null);
+	t(() => () => {
+		T.current?.();
+	}, []);
+	let E = e((e) => _ === g ? 0 : l((e - g) / (_ - g), 0, 1), [g, _]), D = e((e) => g + l(e, 0, 1) * (_ - g), [g, _]), O = e((e) => {
+		w.current = s.map((e) => ({ ...e }));
+		let t = !1, n = (n) => {
+			let r = C.current, i = w.current;
+			if (!r || !i) return;
+			let a = r.getBoundingClientRect(), s = D(l((n.clientX - a.left) / a.width, 0, 1));
+			s = c(s, v, g), s = l(s, g, _);
+			let [u, p] = f(i[e], {
+				thumbs: i,
+				index: e
+			}, g, _);
+			s = l(s, u, p), y === "ordered" && (s = d(s, i, e, g, _, v));
+			let h = a.height;
+			o.onRemoveThumb && (t = n.clientY < a.top - h || n.clientY > a.bottom + h), i[e] = {
+				...i[e],
+				value: s
+			}, m(i.map((e) => ({ ...e })));
+		}, r = () => {
+			document.removeEventListener("pointermove", n), document.removeEventListener("pointerup", a), document.removeEventListener("pointercancel", i), T.current = null;
+		}, i = () => {
+			r(), w.current = null;
+		}, a = () => {
+			r();
+			let n = w.current;
+			if (w.current = null, n) {
+				if (t && o.onRemoveThumb && o.onRemoveThumb(e)) {
+					let t = n.filter((t, n) => n !== e).map((e) => ({ ...e }));
+					m(t), h?.(t);
+					return;
+				}
+				h?.(n.map((e) => ({ ...e })));
+			}
+		};
+		document.addEventListener("pointermove", n), document.addEventListener("pointerup", a), document.addEventListener("pointercancel", i), T.current = i;
+	}, [
+		s,
+		m,
+		h,
+		D,
+		g,
+		_,
+		v,
+		y,
+		o
+	]), k = e((e) => {
+		let t = s.map((e) => ({ ...e })), n = t.map((e) => e.value);
+		w.current = t;
+		let r = (t) => {
+			let r = C.current, i = w.current;
+			if (!r || !i) return;
+			let a = r.getBoundingClientRect(), o = (t.clientX - e) / a.width * (_ - g);
+			o = c(o, v, 0);
+			let s = -Infinity, u = Infinity;
+			for (let e = 0; e < n.length; e++) s = Math.max(s, g - n[e]), u = Math.min(u, _ - n[e]);
+			o = l(o, s, u);
+			for (let e = 0; e < i.length; e++) i[e] = {
+				...i[e],
+				value: l(n[e] + o, g, _)
+			};
+			m(i.map((e) => ({ ...e })));
+		}, i = () => {
+			document.removeEventListener("pointermove", r), document.removeEventListener("pointerup", o), document.removeEventListener("pointercancel", a), T.current = null;
+		}, a = () => {
+			i(), w.current = null;
+		}, o = () => {
+			i();
+			let e = w.current;
+			w.current = null, e && h?.(e.map((e) => ({ ...e })));
+		};
+		document.addEventListener("pointermove", r), document.addEventListener("pointerup", o), document.addEventListener("pointercancel", a), T.current = a;
+	}, [
+		s,
+		m,
+		h,
+		g,
+		_,
+		v
+	]), A = (e) => (t) => {
+		typeof t.button == "number" && t.button > 0 || (t.currentTarget.focus?.(), t.preventDefault(), t.stopPropagation(), t.shiftKey && o.allowShiftAll ? k(t.clientX) : O(e));
+	}, j = (e) => (t) => {
+		if (!o.onRemoveThumb || (t.preventDefault(), !o.onRemoveThumb(e))) return;
+		let n = s.filter((t, n) => n !== e).map((e) => ({ ...e }));
+		m(n), h?.(n);
+	}, M = (e) => {
+		if (typeof e.button == "number" && e.button > 0 || !o.onAddThumb || e.target.closest(`.${a.thumb}`)) return;
+		e.preventDefault();
+		let t = C.current;
+		if (!t) return;
+		let n = t.getBoundingClientRect(), r = D(l((e.clientX - n.left) / n.width, 0, 1));
+		r = c(r, v, g), r = l(r, g, _);
+		let i = o.onAddThumb(r);
+		if (!i) return;
+		let u = [...s.map((e) => ({ ...e })), i];
+		m(u), h?.(u);
+	}, N = (e) => (t) => {
+		let n = u(v, g, _), r = 0, i = null;
+		switch (t.key) {
+			case "ArrowRight":
+			case "ArrowUp":
+				r = t.shiftKey ? n * 10 : n;
+				break;
+			case "ArrowLeft":
+			case "ArrowDown":
+				r = t.shiftKey ? -n * 10 : -n;
+				break;
+			case "PageUp":
+				r = n * 10;
+				break;
+			case "PageDown":
+				r = -n * 10;
+				break;
+			case "Home":
+				i = "home";
+				break;
+			case "End":
+				i = "end";
+				break;
+			default: return;
+		}
+		t.preventDefault();
+		let a = s.map((e) => ({ ...e })), [o, p] = f(a[e], {
+			thumbs: a,
+			index: e
+		}, g, _), b = Math.max(g, o), x = Math.min(_, p), S;
+		S = i === "home" ? b : i === "end" ? x : a[e].value + r, S = c(S, v, g), S = l(S, b, x), y === "ordered" && (S = d(S, a, e, b, x, v)), a[e] = {
+			...a[e],
+			value: S
+		}, m(a), h?.(a);
+	}, P = o.readoutPlacement ?? "none", F = o.renderReadout;
+	return /* @__PURE__ */ i("div", {
+		className: S ? `${a.root} ${S}` : a.root,
+		style: b === void 0 ? void 0 : { "--rp-track-height": `${b}px` },
+		children: [/* @__PURE__ */ i("div", {
+			className: a.row,
+			children: [/* @__PURE__ */ i("div", {
+				className: a.track,
+				ref: C,
+				onPointerDown: M,
+				children: [o.renderTrack && /* @__PURE__ */ r("div", {
+					className: a.trackInner,
+					children: o.renderTrack({
+						trackWidth: C.current?.getBoundingClientRect().width ?? 0,
+						valueToFraction: E
+					})
+				}), s.map((e, t) => {
+					let n = e.shape === "notched", i = typeof e.shape == "object" && e.shape !== null ? e.shape.render : null, o = `${a.thumb}${n ? ` ${a.notched}` : ""}`;
+					return /* @__PURE__ */ r("div", {
+						role: "slider",
+						tabIndex: 0,
+						"aria-orientation": "horizontal",
+						"aria-valuemin": g,
+						"aria-valuemax": _,
+						"aria-valuenow": e.value,
+						"aria-label": [x, e.label].filter(Boolean).join(" ") || void 0,
+						className: o,
+						style: { left: `${E(e.value) * 100}%` },
+						onPointerDown: A(t),
+						onKeyDown: N(t),
+						onContextMenu: j(t),
+						children: i ? i({
+							width: 14,
+							height: 24,
+							isActive: !1
+						}) : e.label ?? ""
+					}, t);
+				})]
+			}), P === "inline-after" && /* @__PURE__ */ r("span", {
+				"data-readout": "inline",
+				className: a.readoutInline,
+				children: s.map((e, t) => /* @__PURE__ */ i("span", { children: [t > 0 ? " / " : "", F ? F(e, t) : p(e)] }, t))
+			})]
+		}), P === "below-thumb" && /* @__PURE__ */ r("div", {
+			className: a.readoutsBelow,
+			children: s.map((e, t) => /* @__PURE__ */ r("span", {
+				"data-readout": "below",
+				className: a.readoutBelow,
+				style: { left: `${E(e.value) * 100}%` },
+				children: F ? F(e, t) : p(e)
+			}, t))
+		})]
+	});
+}
+//#endregion
+export { o as n, s as r, m as t };
+
+//# sourceMappingURL=Slider-DcHnSK5g.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider-DcHnSK5g.js","names":[],"sources":["../../src/components/Slider/Slider.module.css","../../src/format/number.ts","../../src/components/Slider/Slider.tsx"],"sourcesContent":[".root {\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.track {\n  position: relative;\n  flex: 1;\n  min-width: 0;\n  height: var(--rp-track-height, 24px);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: 3px;\n  cursor: crosshair;\n  /* No `overflow: hidden` here — thumbs at extreme values would get\n   * clipped at the track edges. The gradient/track-paint clip is\n   * applied to `.trackInner` instead, which lets thumbs spill freely. */\n}\n\n.trackInner {\n  position: absolute;\n  inset: 0;\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.thumb {\n  position: absolute;\n  /* Thumb extends 2px above + below the track for grabbability + visual\n   * weight. Track itself stays its natural height; the thumb just spills. */\n  top: -2px;\n  bottom: -2px;\n  width: 14px;\n  margin-left: -7px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: color-mix(in srgb, var(--wzl-fg-muted) 70%, transparent);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 3px;\n  cursor: ew-resize;\n  /* Frosted-glass over the (often colorful) track. Cheap on modern GPUs;\n   * gracefully degrades to just the partial-alpha background on engines\n   * without backdrop-filter support. */\n  backdrop-filter: blur(3px);\n  -webkit-backdrop-filter: blur(3px);\n  /* Subtle raise — sells the \"thumb is on top of the track\" hierarchy. */\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  font: 500 0.65rem/1 ui-sans-serif, system-ui, sans-serif;\n  font-variant-numeric: tabular-nums;\n  /* Thumb text reads against `--wzl-thumb-fill`, which can differ from the\n   * surrounding panel text color. Default = dark; consumers re-skin via\n   * `--wzl-thumb-text` if they pick a dark thumb fill. */\n  color: var(--wzl-fg-inverse);\n  /* White halo so labels stay legible over wildly varying gradient\n   * backgrounds (e.g. labels 'T' / 'P' / 'B' over teal, hue 200° over\n   * yellow-green, etc.). */\n  text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);\n}\n\n.thumb:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 1px;\n}\n\n.thumbActive {\n  /* Visual marker for the dragging/focused thumb; subclass-overridable. */\n  z-index: 1;\n}\n\n.readoutsBelow {\n  position: relative;\n  height: 14px;\n  margin-top: 4px;\n}\n\n.readoutBelow {\n  position: absolute;\n  transform: translateX(-50%);\n  font: 500 0.65rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.readoutInline {\n  display: inline-block;\n  margin-left: 8px;\n  font: 500 0.7rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;\n  color: var(--wzl-fg-muted);\n  vertical-align: middle;\n}\n\n.notched {\n  background: var(--thumb-svg, none);\n  background-size: 100% 100%;\n  background-repeat: no-repeat;\n  background-color: transparent;\n  border: none;\n  /* Notched thumbs need to disable the .thumb defaults that paint to\n   * the bounding box: backdrop-filter and box-shadow both ignore the\n   * SVG's polygon/notch and would render through the notch cutout.\n   * Use filter: drop-shadow instead — it traces the actual rendered\n   * alpha (i.e. the polygon shape including the cut). */\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  box-shadow: none;\n  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));\n  /* Default notched SVG (down-pointing pentagon, matches the perceptual-color experiment). */\n  --thumb-svg: url(\"data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 30' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 2.52,0 7,10.3 11.48,0 14,0 14,30 0,30' fill='rgba(255,255,255,0.62)' stroke='rgba(0,0,0,0.55)' stroke-width='0.75' stroke-linejoin='miter'/%3E%3C/svg%3E\");\n}\n","/**\n * Display-formatter for numbers. Use this anywhere a number is shown to\n * a user. The whole point: negative values get prefixed with the real\n * MINUS SIGN (U+2212) instead of the ASCII HYPHEN-MINUS (U+002D) that\n * `toLocaleString` and template literals produce by default.\n *\n * U+2212 is the same visual width as `+` and reads as a sign rather\n * than a hyphen — columns of signed numbers align cleanly and the\n * glyph doesn't get confused with a bullet or list dash.\n */\nexport const MINUS_SIGN = '−';\n\n/**\n * Formats a number for display, substituting {@link MINUS_SIGN} for the ASCII\n * hyphen `toLocaleString` emits. Non-finite values stringify as-is.\n */\nexport function formatNumber(value: number, options?: Intl.NumberFormatOptions): string {\n  const formatted = Number.isFinite(value)\n    ? value.toLocaleString(undefined, options)\n    : String(value);\n  return formatted.replace(/^-/, MINUS_SIGN);\n}\n","import { useCallback, useEffect, useRef, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactElement, type ReactNode } from 'react';\nimport s from './Slider.module.css';\nimport { formatNumber } from '../../format/number';\n\n/**\n * Passed to a custom thumb renderer: the thumb box in CSS px, and whether\n * this thumb is the one being dragged.\n */\nexport type ThumbRenderCtx = {\n  width: number;\n  height: number;\n  isActive: boolean;\n};\n\n/**\n * A thumb's appearance — one of the two built-in shapes, or a custom\n * renderer.\n */\nexport type ThumbShape =\n  | 'round'\n  | 'notched'\n  | { render: (ctx: ThumbRenderCtx) => ReactNode };\n\n/**\n * One handle on a {@link Slider}. `bounds` narrows the range this particular\n * thumb may move within, either fixed or computed from the current thumb\n * list.\n */\nexport type Thumb = {\n  value: number;\n  label?: string;\n  shape?: ThumbShape;\n  bounds?: [number, number] | ((ctx: BoundsCtx) => [number, number]);\n};\n\n/**\n * Passed to a thumb's `bounds` function: the full thumb list and this thumb's\n * index in it, so a bound can be expressed relative to its neighbors.\n */\nexport type BoundsCtx = {\n  thumbs: readonly Thumb[];\n  index: number;\n};\n\n/**\n * Passed to `renderTrack`: the track's width in CSS px and a mapping from a\n * slider value to its 0..1 position along the track.\n */\nexport type TrackCtx = {\n  trackWidth: number;\n  valueToFraction: (v: number) => number;\n};\n\n/**\n * Props for {@link Slider}.\n *\n * `onInput` fires continuously through a drag; `onChange` fires once when it\n * ends and is the one to write to history.\n *\n * `constraint: 'ordered'` keeps thumbs from crossing each other. Supplying\n * `onAddThumb` makes a click on empty track create a thumb, and supplying\n * `onRemoveThumb` lets a right-click or a drag off the track remove one —\n * both callbacks can decline by returning `null`/`false`. `allowShiftAll`\n * makes shift-drag translate every thumb together.\n */\nexport type SliderProps<T extends Thumb = Thumb> = {\n  thumbs: readonly T[];\n  onInput: (next: T[]) => void;\n  onChange?: (next: T[]) => void;\n  min: number;\n  max: number;\n  step?: number;\n  constraint?: 'free' | 'ordered';\n  onAddThumb?: (atValue: number) => T | null;\n  onRemoveThumb?: (index: number) => boolean;\n  allowShiftAll?: boolean;\n  renderTrack?: (ctx: TrackCtx) => ReactNode;\n  trackHeight?: number;\n  renderReadout?: (thumb: T, index: number) => ReactNode;\n  readoutPlacement?: 'none' | 'inline-after' | 'below-thumb';\n  ariaLabel?: string;\n  className?: string;\n};\n\nfunction snap(v: number, step: number | undefined, min: number): number {\n  if (step === undefined || step <= 0) return v;\n  return Math.round((v - min) / step) * step + min;\n}\n\nfunction clamp(v: number, lo: number, hi: number): number {\n  return Math.max(lo, Math.min(hi, v));\n}\n\nfunction defaultStep(step: number | undefined, min: number, max: number): number {\n  if (step !== undefined && step > 0) return step;\n  return (max - min) / 100;\n}\n\n/** Keep a thumb inside its neighbors when `constraint` is `'ordered'`. */\nfunction clampOrdered(\n  v: number,\n  thumbs: readonly Thumb[],\n  index: number,\n  min: number,\n  max: number,\n  step: number | undefined,\n): number {\n  const gap = step !== undefined && step > 0 ? step : (max - min) / 1000;\n  const lower = index > 0 ? thumbs[index - 1].value + gap : min;\n  const upper = index < thumbs.length - 1 ? thumbs[index + 1].value - gap : max;\n  return clamp(v, lower, upper);\n}\n\nfunction resolveBounds(thumb: Thumb, ctx: BoundsCtx, fallbackMin: number, fallbackMax: number): [number, number] {\n  if (!thumb.bounds) return [fallbackMin, fallbackMax];\n  const tuple = typeof thumb.bounds === 'function' ? thumb.bounds(ctx) : thumb.bounds;\n  return [tuple[0], tuple[1]];\n}\n\nfunction defaultReadout(thumb: Thumb): string {\n  return formatNumber(thumb.value, { minimumFractionDigits: 3, maximumFractionDigits: 3 });\n}\n\n/**\n * Multi-thumb slider over a shared track. The thumb list is fully controlled:\n * every change, live or committed, arrives as a whole new array.\n *\n * Thumbs are draggable, and arrow/Home/End move the focused thumb — those\n * keystrokes fire `onInput` and `onChange` together, since there is no\n * in-flight state to buffer.\n */\nexport function Slider<T extends Thumb = Thumb>(props: SliderProps<T>): ReactElement {\n  const { thumbs, onInput, onChange, min, max, step, constraint, trackHeight, ariaLabel, className } = props;\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  // In-flight thumb buffer during a drag; null when not dragging.\n  const dragBufferRef = useRef<T[] | null>(null);\n  // Teardown for the in-flight drag's document listeners, so unmounting\n  // mid-drag doesn't leave them running against a gone track.\n  const endDragRef = useRef<(() => void) | null>(null);\n\n  useEffect(() => () => { endDragRef.current?.(); }, []);\n\n  const valueToFraction = useCallback(\n    (v: number): number => (max === min ? 0 : clamp((v - min) / (max - min), 0, 1)),\n    [min, max],\n  );\n\n  const fractionToValue = useCallback(\n    (f: number): number => min + clamp(f, 0, 1) * (max - min),\n    [min, max],\n  );\n\n  const beginThumbDrag = useCallback(\n    (index: number) => {\n      const buf: T[] = thumbs.map(t => ({ ...t }));\n      dragBufferRef.current = buf;\n      let droppedOff = false;\n\n      const onMove = (ev: PointerEvent) => {\n        const track = trackRef.current;\n        const buffer = dragBufferRef.current;\n        if (!track || !buffer) return;\n        const rect = track.getBoundingClientRect();\n        const f = clamp((ev.clientX - rect.left) / rect.width, 0, 1);\n        let v = fractionToValue(f);\n        v = snap(v, step, min);\n        v = clamp(v, min, max);\n\n        const [bLo, bHi] = resolveBounds(buffer[index], { thumbs: buffer, index }, min, max);\n        v = clamp(v, bLo, bHi);\n\n        if (constraint === 'ordered') v = clampOrdered(v, buffer, index, min, max, step);\n\n        // Drop-off detection: pointer exits the track vertically by more than trackHeight.\n        const bandHeight = rect.height;\n        if (props.onRemoveThumb) {\n          if (ev.clientY < rect.top - bandHeight || ev.clientY > rect.bottom + bandHeight) {\n            droppedOff = true;\n          } else {\n            droppedOff = false;\n          }\n        }\n\n        buffer[index] = { ...buffer[index], value: v };\n        onInput(buffer.map(t => ({ ...t })));\n      };\n\n      const unlisten = () => {\n        document.removeEventListener('pointermove', onMove);\n        document.removeEventListener('pointerup', onUp);\n        document.removeEventListener('pointercancel', onCancel);\n        endDragRef.current = null;\n      };\n\n      // A canceled pointer never fires `pointerup`; without this the drag\n      // stays live and the thumb tracks a released pointer.\n      const onCancel = () => {\n        unlisten();\n        dragBufferRef.current = null;\n      };\n\n      const onUp = () => {\n        unlisten();\n        const buffer = dragBufferRef.current;\n        dragBufferRef.current = null;\n        if (!buffer) return;\n\n        if (droppedOff && props.onRemoveThumb) {\n          const accepted = props.onRemoveThumb(index);\n          if (accepted) {\n            const next = buffer.filter((_, i) => i !== index).map(t => ({ ...t })) as T[];\n            onInput(next);\n            onChange?.(next);\n            return;\n          }\n        }\n\n        onChange?.(buffer.map(t => ({ ...t })));\n      };\n\n      document.addEventListener('pointermove', onMove);\n      document.addEventListener('pointerup', onUp);\n      document.addEventListener('pointercancel', onCancel);\n      endDragRef.current = onCancel;\n    },\n    [thumbs, onInput, onChange, fractionToValue, min, max, step, constraint, props],\n  );\n\n  const beginShiftAllDrag = useCallback(\n    (anchorX: number) => {\n      const buf: T[] = thumbs.map(t => ({ ...t }));\n      const startValues = buf.map(t => t.value);\n      dragBufferRef.current = buf;\n\n      const onMove = (ev: PointerEvent) => {\n        const track = trackRef.current;\n        const buffer = dragBufferRef.current;\n        if (!track || !buffer) return;\n        const rect = track.getBoundingClientRect();\n        const dxFraction = (ev.clientX - anchorX) / rect.width;\n        let dValue = dxFraction * (max - min);\n        dValue = snap(dValue, step, 0);\n\n        // Clamp delta so no thumb leaves [min, max] (per-thumb bounds intentionally\n        // not enforced — matches the experiment's hue-band shift-translate semantics).\n        let allowedNeg = -Infinity;\n        let allowedPos = Infinity;\n        for (let i = 0; i < startValues.length; i++) {\n          allowedNeg = Math.max(allowedNeg, min - startValues[i]);\n          allowedPos = Math.min(allowedPos, max - startValues[i]);\n        }\n        dValue = clamp(dValue, allowedNeg, allowedPos);\n\n        for (let i = 0; i < buffer.length; i++) {\n          buffer[i] = { ...buffer[i], value: clamp(startValues[i] + dValue, min, max) };\n        }\n        onInput(buffer.map(t => ({ ...t })));\n      };\n\n      const unlisten = () => {\n        document.removeEventListener('pointermove', onMove);\n        document.removeEventListener('pointerup', onUp);\n        document.removeEventListener('pointercancel', onCancel);\n        endDragRef.current = null;\n      };\n\n      const onCancel = () => {\n        unlisten();\n        dragBufferRef.current = null;\n      };\n\n      const onUp = () => {\n        unlisten();\n        const buffer = dragBufferRef.current;\n        dragBufferRef.current = null;\n        if (buffer) onChange?.(buffer.map(t => ({ ...t })));\n      };\n\n      document.addEventListener('pointermove', onMove);\n      document.addEventListener('pointerup', onUp);\n      document.addEventListener('pointercancel', onCancel);\n      endDragRef.current = onCancel;\n    },\n    [thumbs, onInput, onChange, min, max, step],\n  );\n\n  const onThumbPointerDown = (index: number) => (e: ReactPointerEvent) => {\n    // Only bail on explicit non-primary buttons (button > 0). jsdom's PointerEvent\n    // leaves `button` undefined; treat that as primary so tests can drive drags.\n    if (typeof e.button === 'number' && e.button > 0) return;\n    // preventDefault below suppresses the focus the press would otherwise\n    // give the thumb, and the arrow keys are on the thumb.\n    (e.currentTarget as HTMLElement).focus?.();\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.shiftKey && props.allowShiftAll) {\n      beginShiftAllDrag(e.clientX);\n    } else {\n      beginThumbDrag(index);\n    }\n  };\n\n  const onThumbContextMenu = (index: number) => (e: ReactMouseEvent) => {\n    if (!props.onRemoveThumb) return;\n    e.preventDefault();\n    const accepted = props.onRemoveThumb(index);\n    if (!accepted) return;\n    const next = thumbs.filter((_, i) => i !== index).map(t => ({ ...t })) as T[];\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    if (!props.onAddThumb) return;\n    // If the event originated on a thumb, the thumb's own handler ran first; this is a track click.\n    if ((e.target as HTMLElement).closest(`.${s.thumb}`)) return;\n    e.preventDefault();\n    const track = trackRef.current;\n    if (!track) return;\n    const rect = track.getBoundingClientRect();\n    const f = clamp((e.clientX - rect.left) / rect.width, 0, 1);\n    let v = fractionToValue(f);\n    v = snap(v, step, min);\n    v = clamp(v, min, max);\n    const created = props.onAddThumb(v);\n    if (!created) return;\n    const next = [...thumbs.map(t => ({ ...t })), created] as T[];\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const onThumbKeyDown = (index: number) => (e: ReactKeyboardEvent) => {\n    const stepSize = defaultStep(step, min, max);\n    let delta = 0;\n    let snapTo: 'home' | 'end' | null = null;\n\n    switch (e.key) {\n      case 'ArrowRight':\n      case 'ArrowUp':\n        delta = e.shiftKey ? stepSize * 10 : stepSize;\n        break;\n      case 'ArrowLeft':\n      case 'ArrowDown':\n        delta = e.shiftKey ? -stepSize * 10 : -stepSize;\n        break;\n      case 'PageUp':\n        delta = stepSize * 10;\n        break;\n      case 'PageDown':\n        delta = -stepSize * 10;\n        break;\n      case 'Home':\n        snapTo = 'home';\n        break;\n      case 'End':\n        snapTo = 'end';\n        break;\n      default:\n        return;\n    }\n\n    e.preventDefault();\n    const next = thumbs.map(t => ({ ...t }));\n    const [bLo, bHi] = resolveBounds(next[index], { thumbs: next, index }, min, max);\n    const lo = Math.max(min, bLo);\n    const hi = Math.min(max, bHi);\n    let v: number;\n    if (snapTo === 'home') v = lo;\n    else if (snapTo === 'end') v = hi;\n    else v = next[index].value + delta;\n    v = snap(v, step, min);\n    v = clamp(v, lo, hi);\n    if (constraint === 'ordered') v = clampOrdered(v, next, index, lo, hi, step);\n    next[index] = { ...next[index], value: v };\n    onInput(next);\n    onChange?.(next);\n  };\n\n  const placement = props.readoutPlacement ?? 'none';\n  const renderReadout = props.renderReadout;\n\n  return (\n    <div\n      className={className ? `${s.root} ${className}` : s.root}\n      style={trackHeight !== undefined ? ({ ['--rp-track-height' as string]: `${trackHeight}px` } as CSSProperties) : undefined}\n    >\n      <div className={s.row}>\n      <div className={s.track} ref={trackRef} onPointerDown={onTrackPointerDown}>\n        {props.renderTrack && (\n          <div className={s.trackInner}>\n            {props.renderTrack({\n              trackWidth: trackRef.current?.getBoundingClientRect().width ?? 0,\n              valueToFraction,\n            })}\n          </div>\n        )}\n        {thumbs.map((thumb, i) => {\n          const isNotched = thumb.shape === 'notched';\n          const customRender = typeof thumb.shape === 'object' && thumb.shape !== null ? thumb.shape.render : null;\n          const cls = `${s.thumb}${isNotched ? ` ${s.notched}` : ''}`;\n          return (\n            <div\n              key={i}\n              role=\"slider\"\n              tabIndex={0}\n              aria-orientation=\"horizontal\"\n              aria-valuemin={min}\n              aria-valuemax={max}\n              aria-valuenow={thumb.value}\n              aria-label={[ariaLabel, thumb.label].filter(Boolean).join(' ') || undefined}\n              className={cls}\n              style={{ left: `${valueToFraction(thumb.value) * 100}%` }}\n              onPointerDown={onThumbPointerDown(i)}\n              onKeyDown={onThumbKeyDown(i)}\n              onContextMenu={onThumbContextMenu(i)}\n            >\n              {customRender ? customRender({ width: 14, height: 24, isActive: false }) : (thumb.label ?? '')}\n            </div>\n          );\n        })}\n      </div>\n      {placement === 'inline-after' && (\n        <span data-readout=\"inline\" className={s.readoutInline}>\n          {thumbs.map((t, i) => (\n            <span key={i}>{i > 0 ? ' / ' : ''}{renderReadout ? renderReadout(t, i) : defaultReadout(t)}</span>\n          ))}\n        </span>\n      )}\n      </div>\n      {placement === 'below-thumb' && (\n        <div className={s.readoutsBelow}>\n          {thumbs.map((t, i) => (\n            <span\n              key={i}\n              data-readout=\"below\"\n              className={s.readoutBelow}\n              style={{ left: `${valueToFraction(t.value) * 100}%` }}\n            >\n              {renderReadout ? renderReadout(t, i) : defaultReadout(t)}\n            </span>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;GCUa,IAAa;AAM1B,SAAgB,EAAa,GAAe,GAA4C;AAItF,SAHkB,OAAO,SAAS,EAAM,GACpC,EAAM,eAAe,KAAA,GAAW,EAAQ,GACxC,OAAO,EAAM,EACA,QAAQ,MAAA,IAAiB;;;;ACgE5C,SAAS,EAAK,GAAW,GAA0B,GAAqB;AAEtE,QADI,MAAS,KAAA,KAAa,KAAQ,IAAU,IACrC,KAAK,OAAO,IAAI,KAAO,EAAK,GAAG,IAAO;;AAG/C,SAAS,EAAM,GAAW,GAAY,GAAoB;AACxD,QAAO,KAAK,IAAI,GAAI,KAAK,IAAI,GAAI,EAAE,CAAC;;AAGtC,SAAS,EAAY,GAA0B,GAAa,GAAqB;AAE/E,QADI,MAAS,KAAA,KAAa,IAAO,IAAU,KACnC,IAAM,KAAO;;AAIvB,SAAS,EACP,GACA,GACA,GACA,GACA,GACA,GACQ;CACR,IAAM,IAAM,MAAS,KAAA,KAAa,IAAO,IAAI,KAAQ,IAAM,KAAO;AAGlE,QAAO,EAAM,GAFC,IAAQ,IAAI,EAAO,IAAQ,GAAG,QAAQ,IAAM,GAC5C,IAAQ,EAAO,SAAS,IAAI,EAAO,IAAQ,GAAG,QAAQ,IAAM,EAC7C;;AAG/B,SAAS,EAAc,GAAc,GAAgB,GAAqB,GAAuC;AAC/G,KAAI,CAAC,EAAM,OAAQ,QAAO,CAAC,GAAa,EAAY;CACpD,IAAM,IAAQ,OAAO,EAAM,UAAW,aAAa,EAAM,OAAO,EAAI,GAAG,EAAM;AAC7E,QAAO,CAAC,EAAM,IAAI,EAAM,GAAG;;AAG7B,SAAS,EAAe,GAAsB;AAC5C,QAAO,EAAa,EAAM,OAAO;EAAE,uBAAuB;EAAG,uBAAuB;EAAG,CAAC;;AAW1F,SAAgB,EAAgC,GAAqC;CACnF,IAAM,EAAE,WAAQ,YAAS,aAAU,QAAK,QAAK,SAAM,eAAY,gBAAa,cAAW,iBAAc,GAE/F,IAAW,EAA8B,KAAK,EAE9C,IAAgB,EAAmB,KAAK,EAGxC,IAAa,EAA4B,KAAK;AAEpD,eAAsB;AAAE,IAAW,WAAW;IAAK,EAAE,CAAC;CAEtD,IAAM,IAAkB,GACrB,MAAuB,MAAQ,IAAM,IAAI,GAAO,IAAI,MAAQ,IAAM,IAAM,GAAG,EAAE,EAC9E,CAAC,GAAK,EAAI,CACX,EAEK,IAAkB,GACrB,MAAsB,IAAM,EAAM,GAAG,GAAG,EAAE,IAAI,IAAM,IACrD,CAAC,GAAK,EAAI,CACX,EAEK,IAAiB,GACpB,MAAkB;AAEjB,IAAc,UADG,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAClB;EACxB,IAAI,IAAa,IAEX,KAAU,MAAqB;GACnC,IAAM,IAAQ,EAAS,SACjB,IAAS,EAAc;AAC7B,OAAI,CAAC,KAAS,CAAC,EAAQ;GACvB,IAAM,IAAO,EAAM,uBAAuB,EAEtC,IAAI,EADE,GAAO,EAAG,UAAU,EAAK,QAAQ,EAAK,OAAO,GAAG,EAClC,CAAE;AAE1B,GADA,IAAI,EAAK,GAAG,GAAM,EAAI,EACtB,IAAI,EAAM,GAAG,GAAK,EAAI;GAEtB,IAAM,CAAC,GAAK,KAAO,EAAc,EAAO,IAAQ;IAAE,QAAQ;IAAQ;IAAO,EAAE,GAAK,EAAI;AAGpF,GAFA,IAAI,EAAM,GAAG,GAAK,EAAI,EAElB,MAAe,cAAW,IAAI,EAAa,GAAG,GAAQ,GAAO,GAAK,GAAK,EAAK;GAGhF,IAAM,IAAa,EAAK;AAUxB,GATI,EAAM,kBACR,AAGE,IAHE,EAAG,UAAU,EAAK,MAAM,KAAc,EAAG,UAAU,EAAK,SAAS,IAOvE,EAAO,KAAS;IAAE,GAAG,EAAO;IAAQ,OAAO;IAAG,EAC9C,EAAQ,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;KAGhC,UAAiB;AAIrB,GAHA,SAAS,oBAAoB,eAAe,EAAO,EACnD,SAAS,oBAAoB,aAAa,EAAK,EAC/C,SAAS,oBAAoB,iBAAiB,EAAS,EACvD,EAAW,UAAU;KAKjB,UAAiB;AAErB,GADA,GAAU,EACV,EAAc,UAAU;KAGpB,UAAa;AACjB,MAAU;GACV,IAAM,IAAS,EAAc;AAC7B,SAAc,UAAU,MACnB,GAEL;QAAI,KAAc,EAAM,iBACL,EAAM,cAAc,EACjC,EAAU;KACZ,IAAM,IAAO,EAAO,QAAQ,GAAG,MAAM,MAAM,EAAM,CAAC,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE;AAEtE,KADA,EAAQ,EAAK,EACb,IAAW,EAAK;AAChB;;AAIJ,QAAW,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;;;AAMzC,EAHA,SAAS,iBAAiB,eAAe,EAAO,EAChD,SAAS,iBAAiB,aAAa,EAAK,EAC5C,SAAS,iBAAiB,iBAAiB,EAAS,EACpD,EAAW,UAAU;IAEvB;EAAC;EAAQ;EAAS;EAAU;EAAiB;EAAK;EAAK;EAAM;EAAY;EAAM,CAChF,EAEK,IAAoB,GACvB,MAAoB;EACnB,IAAM,IAAW,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EACtC,IAAc,EAAI,KAAI,MAAK,EAAE,MAAM;AACzC,IAAc,UAAU;EAExB,IAAM,KAAU,MAAqB;GACnC,IAAM,IAAQ,EAAS,SACjB,IAAS,EAAc;AAC7B,OAAI,CAAC,KAAS,CAAC,EAAQ;GACvB,IAAM,IAAO,EAAM,uBAAuB,EAEtC,KADgB,EAAG,UAAU,KAAW,EAAK,SACtB,IAAM;AACjC,OAAS,EAAK,GAAQ,GAAM,EAAE;GAI9B,IAAI,IAAa,WACb,IAAa;AACjB,QAAK,IAAI,IAAI,GAAG,IAAI,EAAY,QAAQ,IAEtC,CADA,IAAa,KAAK,IAAI,GAAY,IAAM,EAAY,GAAG,EACvD,IAAa,KAAK,IAAI,GAAY,IAAM,EAAY,GAAG;AAEzD,OAAS,EAAM,GAAQ,GAAY,EAAW;AAE9C,QAAK,IAAI,IAAI,GAAG,IAAI,EAAO,QAAQ,IACjC,GAAO,KAAK;IAAE,GAAG,EAAO;IAAI,OAAO,EAAM,EAAY,KAAK,GAAQ,GAAK,EAAI;IAAE;AAE/E,KAAQ,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;KAGhC,UAAiB;AAIrB,GAHA,SAAS,oBAAoB,eAAe,EAAO,EACnD,SAAS,oBAAoB,aAAa,EAAK,EAC/C,SAAS,oBAAoB,iBAAiB,EAAS,EACvD,EAAW,UAAU;KAGjB,UAAiB;AAErB,GADA,GAAU,EACV,EAAc,UAAU;KAGpB,UAAa;AACjB,MAAU;GACV,IAAM,IAAS,EAAc;AAE7B,GADA,EAAc,UAAU,MACpB,KAAQ,IAAW,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,CAAC;;AAMrD,EAHA,SAAS,iBAAiB,eAAe,EAAO,EAChD,SAAS,iBAAiB,aAAa,EAAK,EAC5C,SAAS,iBAAiB,iBAAiB,EAAS,EACpD,EAAW,UAAU;IAEvB;EAAC;EAAQ;EAAS;EAAU;EAAK;EAAK;EAAK,CAC5C,EAEK,KAAsB,OAAmB,MAAyB;AAGlE,SAAO,EAAE,UAAW,YAAY,EAAE,SAAS,MAG9C,EAAE,cAA8B,SAAS,EAC1C,EAAE,gBAAgB,EAClB,EAAE,iBAAiB,EACf,EAAE,YAAY,EAAM,gBACtB,EAAkB,EAAE,QAAQ,GAE5B,EAAe,EAAM;IAInB,KAAsB,OAAmB,MAAuB;AAIpE,MAHI,CAAC,EAAM,kBACX,EAAE,gBAAgB,EAEd,CADa,EAAM,cAAc,EAChC,EAAU;EACf,IAAM,IAAO,EAAO,QAAQ,GAAG,MAAM,MAAM,EAAM,CAAC,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE;AAEtE,EADA,EAAQ,EAAK,EACb,IAAW,EAAK;IAGZ,KAAsB,MAAyC;AAInE,MAHI,OAAO,EAAE,UAAW,YAAY,EAAE,SAAS,KAC3C,CAAC,EAAM,cAEN,EAAE,OAAuB,QAAQ,IAAI,EAAE,QAAQ,CAAE;AACtD,IAAE,gBAAgB;EAClB,IAAM,IAAQ,EAAS;AACvB,MAAI,CAAC,EAAO;EACZ,IAAM,IAAO,EAAM,uBAAuB,EAEtC,IAAI,EADE,GAAO,EAAE,UAAU,EAAK,QAAQ,EAAK,OAAO,GAAG,EACjC,CAAE;AAE1B,EADA,IAAI,EAAK,GAAG,GAAM,EAAI,EACtB,IAAI,EAAM,GAAG,GAAK,EAAI;EACtB,IAAM,IAAU,EAAM,WAAW,EAAE;AACnC,MAAI,CAAC,EAAS;EACd,IAAM,IAAO,CAAC,GAAG,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EAAE,EAAQ;AAEtD,EADA,EAAQ,EAAK,EACb,IAAW,EAAK;IAGZ,KAAkB,OAAmB,MAA0B;EACnE,IAAM,IAAW,EAAY,GAAM,GAAK,EAAI,EACxC,IAAQ,GACR,IAAgC;AAEpC,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;AACH,QAAQ,EAAE,WAAW,IAAW,KAAK;AACrC;GACF,KAAK;GACL,KAAK;AACH,QAAQ,EAAE,WAAW,CAAC,IAAW,KAAK,CAAC;AACvC;GACF,KAAK;AACH,QAAQ,IAAW;AACnB;GACF,KAAK;AACH,QAAQ,CAAC,IAAW;AACpB;GACF,KAAK;AACH,QAAS;AACT;GACF,KAAK;AACH,QAAS;AACT;GACF,QACE;;AAGJ,IAAE,gBAAgB;EAClB,IAAM,IAAO,EAAO,KAAI,OAAM,EAAE,GAAG,GAAG,EAAE,EAClC,CAAC,GAAK,KAAO,EAAc,EAAK,IAAQ;GAAE,QAAQ;GAAM;GAAO,EAAE,GAAK,EAAI,EAC1E,IAAK,KAAK,IAAI,GAAK,EAAI,EACvB,IAAK,KAAK,IAAI,GAAK,EAAI,EACzB;AASJ,EARA,AAEK,IAFD,MAAW,SAAY,IAClB,MAAW,QAAW,IACtB,EAAK,GAAO,QAAQ,GAC7B,IAAI,EAAK,GAAG,GAAM,EAAI,EACtB,IAAI,EAAM,GAAG,GAAI,EAAG,EAChB,MAAe,cAAW,IAAI,EAAa,GAAG,GAAM,GAAO,GAAI,GAAI,EAAK,GAC5E,EAAK,KAAS;GAAE,GAAG,EAAK;GAAQ,OAAO;GAAG,EAC1C,EAAQ,EAAK,EACb,IAAW,EAAK;IAGZ,IAAY,EAAM,oBAAoB,QACtC,IAAgB,EAAM;AAE5B,QACE,kBAAC,OAAD;EACE,WAAW,IAAY,GAAG,EAAE,KAAK,GAAG,MAAc,EAAE;EACpD,OAAO,MAAgB,KAAA,IAAyF,KAAA,IAA5E,EAAG,qBAAgC,GAAG,EAAY,KAAK;YAF7F,CAIE,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACA,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAO,KAAK;IAAU,eAAe;cAAvD,CACG,EAAM,eACL,kBAAC,OAAD;KAAK,WAAW,EAAE;eACf,EAAM,YAAY;MACjB,YAAY,EAAS,SAAS,uBAAuB,CAAC,SAAS;MAC/D;MACD,CAAC;KACE,CAAA,EAEP,EAAO,KAAK,GAAO,MAAM;KACxB,IAAM,IAAY,EAAM,UAAU,WAC5B,IAAe,OAAO,EAAM,SAAU,YAAY,EAAM,UAAU,OAAO,EAAM,MAAM,SAAS,MAC9F,IAAM,GAAG,EAAE,QAAQ,IAAY,IAAI,EAAE,YAAY;AACvD,YACE,kBAAC,OAAD;MAEE,MAAK;MACL,UAAU;MACV,oBAAiB;MACjB,iBAAe;MACf,iBAAe;MACf,iBAAe,EAAM;MACrB,cAAY,CAAC,GAAW,EAAM,MAAM,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IAAI,KAAA;MAClE,WAAW;MACX,OAAO,EAAE,MAAM,GAAG,EAAgB,EAAM,MAAM,GAAG,IAAI,IAAI;MACzD,eAAe,EAAmB,EAAE;MACpC,WAAW,EAAe,EAAE;MAC5B,eAAe,EAAmB,EAAE;gBAEnC,IAAe,EAAa;OAAE,OAAO;OAAI,QAAQ;OAAI,UAAU;OAAO,CAAC,GAAI,EAAM,SAAS;MACvF,EAfC,EAeD;MAER,CACE;OACL,MAAc,kBACb,kBAAC,QAAD;IAAM,gBAAa;IAAS,WAAW,EAAE;cACtC,EAAO,KAAK,GAAG,MACd,kBAAC,QAAD,EAAA,UAAA,CAAe,IAAI,IAAI,QAAQ,IAAI,IAAgB,EAAc,GAAG,EAAE,GAAG,EAAe,EAAE,CAAQ,EAAA,EAAvF,EAAuF,CAClG;IACG,CAAA,CAEH;MACL,MAAc,iBACb,kBAAC,OAAD;GAAK,WAAW,EAAE;aACf,EAAO,KAAK,GAAG,MACd,kBAAC,QAAD;IAEE,gBAAa;IACb,WAAW,EAAE;IACb,OAAO,EAAE,MAAM,GAAG,EAAgB,EAAE,MAAM,GAAG,IAAI,IAAI;cAEpD,IAAgB,EAAc,GAAG,EAAE,GAAG,EAAe,EAAE;IACnD,EANA,EAMA,CACP;GACE,CAAA,CAEJ"}

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

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

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

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

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

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

package/dist/chunks/Toast-DFw4IrD_.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast-DFw4IrD_.js","names":[],"sources":["../../src/components/Toast/queue.ts","../../src/components/Toast/Toast.module.css","../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { UNSTABLE_ToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\n\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\n/** Kit-owned payload rendered inside each toast. */\nexport interface ToastContent {\n  title: string;\n  description?: string;\n  tone: ToastTone;\n}\n\nexport interface ToastOptions {\n  description?: string;\n  /**\n   * Auto-dismiss delay in ms. Default 8000. `null` — sticky until dismissed.\n   * Must be > 0; RAC treats 0 as no timer (sticky).\n   */\n  ttlMs?: number | null;\n  /** Stable identity: re-adding with the same id replaces the earlier toast. */\n  id?: string;\n}\n\nconst DEFAULT_TTL_MS = 8000;\n\n// Tracks overlapping toast-triggered view transitions so the `:root`\n// marker class survives until the *last* one settles.\nlet activeToastTransitions = 0;\n\n/**\n * RAC's sanctioned toast-animation hook: wrap every queue mutation in a\n * view transition so entry, exit, and the surviving stack's reflow all\n * animate (choreography lives in `toastViewTransitions.css`). Falls back\n * to a plain synchronous update when the browser lacks the API or the\n * user prefers reduced motion — i.e. exactly the pre-animation behavior.\n * The jsdom test environment always takes the fallback path.\n */\nfunction viewTransitionWrapUpdate(fn: () => void): void {\n  const reduceMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (typeof document === 'undefined' || !('startViewTransition' in document) || reduceMotion) {\n    fn();\n    return;\n  }\n  // The marker class scopes the CSS that un-names `:root` (keeps the rest\n  // of the page live and interactive during the transition) to\n  // toast-owned transitions only.\n  const root = document.documentElement;\n  activeToastTransitions++;\n  root.classList.add('wzl-toast-vt');\n  // flushSync: the DOM must reflect the queue change inside the\n  // transition callback, before the browser snapshots the new state.\n  const vt = document.startViewTransition(() => flushSync(fn));\n  // `ready` rejects when the browser skips the transition — routine under\n  // a rapid burst of toasts, where each new transition supersedes the\n  // in-flight one. The DOM update has still applied by then, but an\n  // untouched `ready` surfaces the rejection as a console error, so\n  // consume it.\n  vt.ready.catch(() => {});\n  void vt.finished.finally(() => {\n    if (--activeToastTransitions === 0) root.classList.remove('wzl-toast-vt');\n  });\n}\n\n// The wrapped RAC queue lives in a module-scoped WeakMap so the public\n// class surface carries no RAC (UNSTABLE_) types — see the design spec's\n// containment rule. `racQueueOf` below is the folder-internal accessor.\nconst RAC_QUEUES = new WeakMap<ToastQueue, UNSTABLE_ToastQueue<ToastContent>>();\n\n/**\n * Kit-owned toast queue. Create isolated instances with\n * `createToastQueue()` (tests, secondary roots); most apps use the\n * module-level `defaultToastQueue` via `toast()`.\n *\n * At most 5 toasts are visible at once; adding a 6th shows immediately\n * and hides the oldest (it returns when a slot frees, with its ttl\n * restarted).\n */\nexport class ToastQueue {\n  private keysById = new Map<string, string>();\n\n  constructor() {\n    RAC_QUEUES.set(\n      this,\n      new UNSTABLE_ToastQueue<ToastContent>({\n        maxVisibleToasts: 5,\n        wrapUpdate: viewTransitionWrapUpdate,\n      }),\n    );\n  }\n\n  add(tone: ToastTone, title: string, options: ToastOptions = {}): void {\n    const { description, ttlMs = DEFAULT_TTL_MS, id } = options;\n    const rac = RAC_QUEUES.get(this)!;\n    if (id !== undefined) {\n      const existing = this.keysById.get(id);\n      if (existing !== undefined) rac.close(existing);\n    }\n    let key: string;\n    const racOptions: { timeout?: number; onClose?: () => void } =\n      ttlMs === null ? {} : { timeout: ttlMs };\n    if (id !== undefined) {\n      racOptions.onClose = () => {\n        if (this.keysById.get(id) === key) this.keysById.delete(id);\n      };\n    }\n    key = rac.add({ title, description, tone }, racOptions);\n    if (id !== undefined) this.keysById.set(id, key);\n  }\n\n  /** Dismiss the toast previously added with this `id`. No-op if none is live. */\n  dismiss(id: string): void {\n    const key = this.keysById.get(id);\n    if (key !== undefined) RAC_QUEUES.get(this)!.close(key);\n  }\n\n  /** Dismiss every queued toast. */\n  clear(): void {\n    RAC_QUEUES.get(this)!.clear();\n    this.keysById.clear();\n  }\n}\n\nexport function createToastQueue(): ToastQueue {\n  return new ToastQueue();\n}\n\n/**\n * Folder-internal bridge to the wrapped RAC queue for `ToastRegion`.\n * Deliberately NOT exported from the Toast folder's `index.ts` — the\n * RAC toast surface is unstable and must not leak past this folder.\n */\nexport function racQueueOf(queue: ToastQueue): UNSTABLE_ToastQueue<ToastContent> {\n  return RAC_QUEUES.get(queue)!;\n}\n\n/** Module-level default queue used by `toast()` and `<ToastRegion>`. */\nexport const defaultToastQueue = createToastQueue();\n\ntype ToastFn = {\n  (title: string, options?: ToastOptions): void;\n  info(title: string, options?: ToastOptions): void;\n  success(title: string, options?: ToastOptions): void;\n  warning(title: string, options?: ToastOptions): void;\n  error(title: string, options?: ToastOptions): void;\n};\n\nfunction tonedAdd(tone: ToastTone) {\n  return (title: string, options?: ToastOptions) => defaultToastQueue.add(tone, title, options);\n}\n\n/** Imperative convenience over `defaultToastQueue`. Bare `toast(...)` is `info`. */\nexport const toast: ToastFn = Object.assign(tonedAdd('info'), {\n  info: tonedAdd('info'),\n  success: tonedAdd('success'),\n  warning: tonedAdd('warning'),\n  error: tonedAdd('error'),\n});\n",".region {\n  position: fixed;\n  z-index: 1100;\n  display: flex;\n  /* RAC unshifts new toasts to the front of the DOM (newest-first), and the\n   * ol/li wrappers are display:contents, so the flex direction alone\n   * decides which end of the stack the newest toast lands on. Base\n   * (bottom corners): column-reverse puts DOM-first (newest) at the\n   * bottom, hugging the corner. Top corners override back to column so\n   * DOM-first still hugs the top edge. */\n  flex-direction: column-reverse;\n  gap: 8px;\n  max-width: 360px;\n  outline: none;\n}\n\n.bottomRight { bottom: 16px; right: 16px; }\n.bottomLeft { bottom: 16px; left: 16px; }\n.topRight { top: 16px; right: 16px; flex-direction: column; }\n.topLeft { top: 16px; left: 16px; flex-direction: column; }\n\n.toast {\n  --toast-accent: var(--wzl-accent-strong);\n  /* Groups every toast under one ident so toastViewTransitions.css can\n   * target `::view-transition-new/old(.wzl-toast)` without knowing the\n   * per-toast view-transition-name (set inline in Toast.tsx). */\n  view-transition-class: wzl-toast;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-left: 3px solid var(--toast-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  padding: 10px 12px;\n  outline: none;\n}\n\n.region[data-focus-visible],\n.toast[data-focus-visible] {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.toneInfo { /* default accent — uses --toast-accent fallback */ }\n.toneSuccess { --toast-accent: var(--wzl-success, #2ec27e); }\n.toneWarning { --toast-accent: var(--wzl-warning, #d99a3f); }\n.toneError { --toast-accent: var(--wzl-danger, #d94a3f); }\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.description {\n  display: block;\n  margin-top: 2px;\n  font-size: 12px;\n  color: var(--wzl-fg-muted);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: 16px;\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n","import {\n  UNSTABLE_ToastRegion as RACToastRegion,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n  Text,\n  Button,\n} from 'react-aria-components';\nimport { defaultToastQueue, racQueueOf, type ToastQueue, type ToastTone } from './queue';\nimport s from './Toast.module.css';\nimport './toastViewTransitions.css';\n\nexport type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\nexport interface ToastRegionProps {\n  /** Queue to render. Defaults to the module-level `defaultToastQueue`. */\n  queue?: ToastQueue;\n  /** Screen corner for the stack. Default `bottom-right`. */\n  placement?: ToastPlacement;\n  className?: string;\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'bottom-right': s.bottomRight,\n  'bottom-left': s.bottomLeft,\n  'top-right': s.topRight,\n  'top-left': s.topLeft,\n};\n\nconst toneClass: Record<ToastTone, string> = {\n  info: s.toneInfo,\n  success: s.toneSuccess,\n  warning: s.toneWarning,\n  error: s.toneError,\n};\n\n/**\n * Renders the toast stack for a queue. Mount once, near the app root.\n * From the underlying React Aria region: landmark semantics (keyboard /\n * F6 reachable), screen-reader announcements, and hover pausing the\n * auto-dismiss timers.\n */\nexport function ToastRegion(props: ToastRegionProps) {\n  const { queue = defaultToastQueue, placement = 'bottom-right', className } = props;\n  return (\n    <RACToastRegion\n      queue={racQueueOf(queue)}\n      aria-label=\"Notifications\"\n      className={[s.region, placementClass[placement], className].filter(Boolean).join(' ')}\n    >\n      {({ toast: t }) => (\n        <RACToast\n          toast={t}\n          className={[s.toast, toneClass[t.content.tone]].filter(Boolean).join(' ')}\n          // Inline style is the one sanctioned exception here: each toast\n          // needs a *unique* view-transition-name (so enter/exit/reflow\n          // track per-toast), and a class can't mint unique idents. The\n          // prefix keeps the ident valid (RAC keys can start with digits).\n          style={{ viewTransitionName: `wzl-toast-${t.key.replace(/[^a-zA-Z0-9_-]/g, '_')}` }}\n        >\n          <RACToastContent className={s.content}>\n            <Text slot=\"title\" className={s.title}>{t.content.title}</Text>\n            {t.content.description !== undefined && (\n              <Text slot=\"description\" className={s.description}>{t.content.description}</Text>\n            )}\n          </RACToastContent>\n          <Button slot=\"close\" className={s.close} aria-label=\"Dismiss notification\">\n            ×\n          </Button>\n        </RACToast>\n      )}\n    </RACToastRegion>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Toast-DFw4IrD_.js","names":[],"sources":["../../src/components/Toast/queue.ts","../../src/components/Toast/Toast.module.css","../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { UNSTABLE_ToastQueue } from 'react-aria-components';\nimport { flushSync } from 'react-dom';\n\n/** Severity of a toast, driving its accent color and icon. */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'error';\n\n/** Kit-owned payload rendered inside each toast. */\nexport interface ToastContent {\n  title: string;\n  description?: string;\n  tone: ToastTone;\n}\n\n/** Options for a single toast. */\nexport interface ToastOptions {\n  description?: string;\n  /**\n   * Auto-dismiss delay in ms. Default 8000. `null` — sticky until dismissed.\n   * Must be > 0; RAC treats 0 as no timer (sticky).\n   */\n  ttlMs?: number | null;\n  /** Stable identity: re-adding with the same id replaces the earlier toast. */\n  id?: string;\n}\n\nconst DEFAULT_TTL_MS = 8000;\n\n// Tracks overlapping toast-triggered view transitions so the `:root`\n// marker class survives until the *last* one settles.\nlet activeToastTransitions = 0;\n\n/**\n * RAC's sanctioned toast-animation hook: wrap every queue mutation in a\n * view transition so entry, exit, and the surviving stack's reflow all\n * animate (choreography lives in `toastViewTransitions.css`). Falls back\n * to a plain synchronous update when the browser lacks the API or the\n * user prefers reduced motion — i.e. exactly the pre-animation behavior.\n * The jsdom test environment always takes the fallback path.\n */\nfunction viewTransitionWrapUpdate(fn: () => void): void {\n  const reduceMotion =\n    typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;\n  if (typeof document === 'undefined' || !('startViewTransition' in document) || reduceMotion) {\n    fn();\n    return;\n  }\n  // The marker class scopes the CSS that un-names `:root` (keeps the rest\n  // of the page live and interactive during the transition) to\n  // toast-owned transitions only.\n  const root = document.documentElement;\n  activeToastTransitions++;\n  root.classList.add('wzl-toast-vt');\n  // flushSync: the DOM must reflect the queue change inside the\n  // transition callback, before the browser snapshots the new state.\n  const vt = document.startViewTransition(() => flushSync(fn));\n  // `ready` rejects when the browser skips the transition — routine under\n  // a rapid burst of toasts, where each new transition supersedes the\n  // in-flight one. The DOM update has still applied by then, but an\n  // untouched `ready` surfaces the rejection as a console error, so\n  // consume it.\n  vt.ready.catch(() => {});\n  void vt.finished.finally(() => {\n    if (--activeToastTransitions === 0) root.classList.remove('wzl-toast-vt');\n  });\n}\n\n// The wrapped RAC queue lives in a module-scoped WeakMap so the public\n// class surface carries no RAC (UNSTABLE_) types — see the design spec's\n// containment rule. `racQueueOf` below is the folder-internal accessor.\nconst RAC_QUEUES = new WeakMap<ToastQueue, UNSTABLE_ToastQueue<ToastContent>>();\n\n/**\n * Kit-owned toast queue. Create isolated instances with\n * `createToastQueue()` (tests, secondary roots); most apps use the\n * module-level `defaultToastQueue` via `toast()`.\n *\n * At most 5 toasts are visible at once; adding a 6th shows immediately\n * and hides the oldest (it returns when a slot frees, with its ttl\n * restarted).\n */\nexport class ToastQueue {\n  private keysById = new Map<string, string>();\n\n  constructor() {\n    RAC_QUEUES.set(\n      this,\n      new UNSTABLE_ToastQueue<ToastContent>({\n        maxVisibleToasts: 5,\n        wrapUpdate: viewTransitionWrapUpdate,\n      }),\n    );\n  }\n\n  add(tone: ToastTone, title: string, options: ToastOptions = {}): void {\n    const { description, ttlMs = DEFAULT_TTL_MS, id } = options;\n    const rac = RAC_QUEUES.get(this)!;\n    if (id !== undefined) {\n      const existing = this.keysById.get(id);\n      if (existing !== undefined) rac.close(existing);\n    }\n    let key: string;\n    const racOptions: { timeout?: number; onClose?: () => void } =\n      ttlMs === null ? {} : { timeout: ttlMs };\n    if (id !== undefined) {\n      racOptions.onClose = () => {\n        if (this.keysById.get(id) === key) this.keysById.delete(id);\n      };\n    }\n    key = rac.add({ title, description, tone }, racOptions);\n    if (id !== undefined) this.keysById.set(id, key);\n  }\n\n  /** Dismiss the toast previously added with this `id`. No-op if none is live. */\n  dismiss(id: string): void {\n    const key = this.keysById.get(id);\n    if (key !== undefined) RAC_QUEUES.get(this)!.close(key);\n  }\n\n  /** Dismiss every queued toast. */\n  clear(): void {\n    RAC_QUEUES.get(this)!.clear();\n    this.keysById.clear();\n  }\n}\n\n/**\n * Creates an independent toast queue. Most apps use the module-level\n * `defaultToastQueue` that `toast()` writes to; make your own when a surface\n * needs its own stack, and pass it to `ToastRegion`.\n */\nexport function createToastQueue(): ToastQueue {\n  return new ToastQueue();\n}\n\n/**\n * Folder-internal bridge to the wrapped RAC queue for `ToastRegion`.\n * Deliberately NOT exported from the Toast folder's `index.ts` — the\n * RAC toast surface is unstable and must not leak past this folder.\n */\nexport function racQueueOf(queue: ToastQueue): UNSTABLE_ToastQueue<ToastContent> {\n  return RAC_QUEUES.get(queue)!;\n}\n\n/** Module-level default queue used by `toast()` and `<ToastRegion>`. */\nexport const defaultToastQueue = createToastQueue();\n\ntype ToastFn = {\n  (title: string, options?: ToastOptions): void;\n  info(title: string, options?: ToastOptions): void;\n  success(title: string, options?: ToastOptions): void;\n  warning(title: string, options?: ToastOptions): void;\n  error(title: string, options?: ToastOptions): void;\n};\n\nfunction tonedAdd(tone: ToastTone) {\n  return (title: string, options?: ToastOptions) => defaultToastQueue.add(tone, title, options);\n}\n\n/** Imperative convenience over `defaultToastQueue`. Bare `toast(...)` is `info`. */\nexport const toast: ToastFn = Object.assign(tonedAdd('info'), {\n  info: tonedAdd('info'),\n  success: tonedAdd('success'),\n  warning: tonedAdd('warning'),\n  error: tonedAdd('error'),\n});\n",".region {\n  position: fixed;\n  z-index: 1100;\n  display: flex;\n  /* RAC unshifts new toasts to the front of the DOM (newest-first), and the\n   * ol/li wrappers are display:contents, so the flex direction alone\n   * decides which end of the stack the newest toast lands on. Base\n   * (bottom corners): column-reverse puts DOM-first (newest) at the\n   * bottom, hugging the corner. Top corners override back to column so\n   * DOM-first still hugs the top edge. */\n  flex-direction: column-reverse;\n  gap: 8px;\n  max-width: 360px;\n  outline: none;\n}\n\n.bottomRight { bottom: 16px; right: 16px; }\n.bottomLeft { bottom: 16px; left: 16px; }\n.topRight { top: 16px; right: 16px; flex-direction: column; }\n.topLeft { top: 16px; left: 16px; flex-direction: column; }\n\n.toast {\n  --toast-accent: var(--wzl-accent-strong);\n  /* Groups every toast under one ident so toastViewTransitions.css can\n   * target `::view-transition-new/old(.wzl-toast)` without knowing the\n   * per-toast view-transition-name (set inline in Toast.tsx). */\n  view-transition-class: wzl-toast;\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-left: 3px solid var(--toast-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  padding: 10px 12px;\n  outline: none;\n}\n\n.region[data-focus-visible],\n.toast[data-focus-visible] {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.toneInfo { /* default accent — uses --toast-accent fallback */ }\n.toneSuccess { --toast-accent: var(--wzl-success, #2ec27e); }\n.toneWarning { --toast-accent: var(--wzl-warning, #d99a3f); }\n.toneError { --toast-accent: var(--wzl-danger, #d94a3f); }\n\n.content {\n  flex: 1;\n  min-width: 0;\n}\n\n.title {\n  display: block;\n  font-size: 13px;\n  font-weight: 600;\n}\n\n.description {\n  display: block;\n  margin-top: 2px;\n  font-size: 12px;\n  color: var(--wzl-fg-muted);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: 16px;\n  line-height: 1;\n  padding: 2px 4px;\n  cursor: pointer;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.close:hover {\n  color: var(--wzl-fg);\n}\n","import {\n  UNSTABLE_ToastRegion as RACToastRegion,\n  UNSTABLE_Toast as RACToast,\n  UNSTABLE_ToastContent as RACToastContent,\n  Text,\n  Button,\n} from 'react-aria-components';\nimport { defaultToastQueue, racQueueOf, type ToastQueue, type ToastTone } from './queue';\nimport s from './Toast.module.css';\nimport './toastViewTransitions.css';\n\n/** Screen corner a toast stack anchors to. */\nexport type ToastPlacement = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';\n\n/** Props for {@link ToastRegion}. */\nexport interface ToastRegionProps {\n  /** Queue to render. Defaults to the module-level `defaultToastQueue`. */\n  queue?: ToastQueue;\n  /** Screen corner for the stack. Default `bottom-right`. */\n  placement?: ToastPlacement;\n  className?: string;\n}\n\nconst placementClass: Record<ToastPlacement, string> = {\n  'bottom-right': s.bottomRight,\n  'bottom-left': s.bottomLeft,\n  'top-right': s.topRight,\n  'top-left': s.topLeft,\n};\n\nconst toneClass: Record<ToastTone, string> = {\n  info: s.toneInfo,\n  success: s.toneSuccess,\n  warning: s.toneWarning,\n  error: s.toneError,\n};\n\n/**\n * Renders the toast stack for a queue. Mount once, near the app root.\n * From the underlying React Aria region: landmark semantics (keyboard /\n * F6 reachable), screen-reader announcements, and hover pausing the\n * auto-dismiss timers.\n */\nexport function ToastRegion(props: ToastRegionProps) {\n  const { queue = defaultToastQueue, placement = 'bottom-right', className } = props;\n  return (\n    <RACToastRegion\n      queue={racQueueOf(queue)}\n      aria-label=\"Notifications\"\n      className={[s.region, placementClass[placement], className].filter(Boolean).join(' ')}\n    >\n      {({ toast: t }) => (\n        <RACToast\n          toast={t}\n          className={[s.toast, toneClass[t.content.tone]].filter(Boolean).join(' ')}\n          // Inline style is the one sanctioned exception here: each toast\n          // needs a *unique* view-transition-name (so enter/exit/reflow\n          // track per-toast), and a class can't mint unique idents. The\n          // prefix keeps the ident valid (RAC keys can start with digits).\n          style={{ viewTransitionName: `wzl-toast-${t.key.replace(/[^a-zA-Z0-9_-]/g, '_')}` }}\n        >\n          <RACToastContent className={s.content}>\n            <Text slot=\"title\" className={s.title}>{t.content.title}</Text>\n            {t.content.description !== undefined && (\n              <Text slot=\"description\" className={s.description}>{t.content.description}</Text>\n            )}\n          </RACToastContent>\n          <Button slot=\"close\" className={s.close} aria-label=\"Dismiss notification\">\n            ×\n          </Button>\n        </RACToast>\n      )}\n    </RACToastRegion>\n  );\n}\n"],"mappings":"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"}