@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/BandEditor-D8I5Uun-.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BandEditor-D8I5Uun-.js","names":[],"sources":["../../src/components/BandEditor/BandEditor.module.css","../../src/components/BandEditor/scale.ts","../../src/components/BandEditor/bands.ts","../../src/components/BandEditor/BandEditor.tsx"],"sourcesContent":[".root {\n  position: relative;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: none;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.label {\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui);\n  color: var(--wzl-fg-muted);\n}\n\n/* The ruler carries the ticks and is the split affordance: a click anywhere\n * on it divides the band underneath. The band strip below owns selection and\n * body drags, so neither gesture has to guess which the pointer meant. */\n.ruler {\n  position: relative;\n  height: var(--be-ruler-height, 20px);\n  cursor: crosshair;\n}\n\n.tick {\n  position: absolute;\n  left: var(--be-at);\n  bottom: 0;\n  width: 1px;\n  height: 6px;\n  background: var(--wzl-fg-subtle);\n  pointer-events: none;\n}\n\n.tickLabel {\n  position: absolute;\n  bottom: 7px;\n  left: 0;\n  transform: translateX(-50%);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-xs) / var(--wzl-leading-tight) var(--wzl-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);\n  color: var(--wzl-fg-muted);\n  white-space: nowrap;\n}\n\n.bands {\n  position: relative;\n  height: var(--be-band-height, 34px);\n}\n\n.band {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: var(--be-from);\n  width: calc(var(--be-to) - var(--be-from));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  padding: 0 4px;\n  margin: 0;\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font: var(--wzl-font-weight-medium) var(--wzl-font-size-sm) / var(--wzl-leading-tight) var(--wzl-font-ui, ui-sans-serif, system-ui, sans-serif);\n  cursor: grab;\n}\n\n.band:hover {\n  background: var(--wzl-surface-hover);\n}\n\n.band:active {\n  cursor: grabbing;\n}\n\n.band:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: -2px;\n}\n\n/* First and last bands are pinned to `min` / `max`, so their bodies do not\n * translate — the cursor should not promise otherwise. */\n.band:first-of-type,\n.band:last-of-type {\n  cursor: default;\n}\n\n/* Accent mixed toward transparent rather than a flat token, so the tint\n   reads over whatever surface the consumer's theme puts behind it. */\n.selected {\n  background: color-mix(in srgb, var(--wzl-accent) 22%, transparent);\n  border-color: var(--wzl-accent);\n  box-shadow: inset 0 0 0 1px var(--wzl-accent);\n  color: var(--wzl-fg);\n}\n\n.bandContent {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  pointer-events: none;\n}\n\n/* Wider than the line it draws: a 1px seam is unhittable. */\n.seam {\n  position: absolute;\n  left: var(--be-at);\n  top: -3px;\n  bottom: -3px;\n  width: 11px;\n  margin-left: -5px;\n  z-index: 1;\n  cursor: ew-resize;\n  background: none;\n  border: none;\n}\n\n.seam::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 5px;\n  width: 1px;\n  background: var(--wzl-border-strong);\n}\n\n.seam:hover::before,\n.seam:focus-visible::before {\n  background: var(--wzl-accent);\n  width: 2px;\n}\n\n.seam:focus-visible {\n  outline: 2px solid var(--wzl-accent);\n  outline-offset: 0;\n  border-radius: var(--wzl-radius-sm);\n}\n","/** Maps a domain value onto its position along the track, and back. */\nexport interface BandScale {\n  /** Domain → position in [0,1]. Must be monotonic increasing. */\n  toUnit(value: number, min: number, max: number): number;\n  /** Inverse of `toUnit`. */\n  fromUnit(unit: number, min: number, max: number): number;\n}\n\nexport function clamp01(u: number): number {\n  return u < 0 ? 0 : u > 1 ? 1 : u;\n}\n\n/** Even domain steps take even track steps. */\nexport const linearScale: BandScale = {\n  toUnit: (value, min, max) => (max === min ? 0 : (value - min) / (max - min)),\n  fromUnit: (unit, min, max) => min + unit * (max - min),\n};\n\n/** Even *ratios* take even track steps. Requires `min > 0`. */\nexport const logScale: BandScale = {\n  toUnit: (value, min, max) => {\n    const lo = Math.log(min);\n    const hi = Math.log(max);\n    return hi === lo ? 0 : (Math.log(value) - lo) / (hi - lo);\n  },\n  fromUnit: (unit, min, max) => {\n    const lo = Math.log(min);\n    return Math.exp(lo + unit * (Math.log(max) - lo));\n  },\n};\n\nlet warnedNonPositiveMin = false;\n\nfunction isDev(): boolean {\n  return typeof process !== 'undefined' ? process.env.NODE_ENV !== 'production' : true;\n}\n\n/**\n * Resolves the `scale` prop, substituting `linearScale` for a `logScale`\n * that `min` would send to `NaN`.\n */\nexport function resolveScale(\n  scale: 'linear' | 'log' | BandScale | undefined,\n  min: number,\n): BandScale {\n  const requested =\n    scale === undefined || scale === 'log'\n      ? logScale\n      : scale === 'linear'\n        ? linearScale\n        : scale;\n\n  if (requested !== logScale || min > 0) return requested;\n\n  if (isDev() && !warnedNonPositiveMin) {\n    warnedNonPositiveMin = true;\n    console.warn(\n      `BandEditor: a log scale needs min > 0, but min is ${min}. Falling back to a linear scale. ` +\n        `Pass scale=\"linear\" to silence this.`,\n    );\n  }\n  return linearScale;\n}\n","import type { BandScale } from './scale';\nimport { clamp01 } from './scale';\n\nexport interface Band<T> {\n  /** Domain value where this band starts. The first band's is normalized to `min`. */\n  from: number;\n  data: T;\n}\n\n/**\n * A band list covers `[min, max]` exactly: N bands, N−1 interior seams, no\n * gaps and no overlaps. Seam *k* is `bands[k + 1].from`, and lives between\n * `bands[k].from` and the start of the band after next (or `max`).\n *\n * Every function here preserves that. Each returns the array it was given\n * when the edit would be a no-op, so callers can skip a callback with `===`.\n */\n\n/** Pins the first band's start to `min`; leaves the rest alone. */\nexport function normalizeBands<T>(value: readonly Band<T>[], min: number): Band<T>[] {\n  const bands = value.map((b) => ({ ...b }));\n  if (bands.length > 0) bands[0].from = min;\n  return bands;\n}\n\n/** `[from, to]` of band `index` in domain space. */\nexport function bandBounds<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  min: number,\n  max: number,\n): [number, number] {\n  const from = index === 0 ? min : bands[index].from;\n  const to = index === bands.length - 1 ? max : bands[index + 1].from;\n  return [from, to];\n}\n\n/** How far seam `index` can travel before it would cross a neighbour. */\nexport function seamBounds<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  min: number,\n  max: number,\n): [number, number] {\n  const lo = index === 0 ? min : bands[index].from;\n  const hi = index + 2 <= bands.length - 1 ? bands[index + 2].from : max;\n  return [lo, hi];\n}\n\n/** Clamps a target position for seam `index` to its neighbours, inclusive. */\nexport function clampSeamTo<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  to: number,\n  min: number,\n  max: number,\n): number {\n  const [lo, hi] = seamBounds(bands, index, min, max);\n  return Math.max(lo, Math.min(hi, to));\n}\n\nexport function setSeam<T>(bands: readonly Band<T>[], index: number, to: number): Band<T>[] {\n  if (bands[index + 1] === undefined || bands[index + 1].from === to) return bands as Band<T>[];\n  const next = bands.map((b) => ({ ...b }));\n  next[index + 1].from = to;\n  return next;\n}\n\n/** Band edges as track positions: `length + 1` values from 0 to 1. */\nexport function unitEdges<T>(\n  bands: readonly Band<T>[],\n  scale: BandScale,\n  min: number,\n  max: number,\n): number[] {\n  const edges = bands.map((b, i) => (i === 0 ? 0 : clamp01(scale.toUnit(b.from, min, max))));\n  edges.push(1);\n  return edges;\n}\n\n/**\n * Largest part of `shift` band `index` can take without pushing a neighbour's\n * far edge past it. Zero for the first and last band, whose outer edges are\n * `min` and `max` and do not move.\n */\nexport function clampBandShift(edges: readonly number[], index: number, shift: number): number {\n  const isFirst = index === 0;\n  const isLast = index === edges.length - 2;\n  if (isFirst || isLast) return 0;\n  const lo = edges[index - 1] - edges[index];\n  const hi = edges[index + 2] - edges[index + 1];\n  return Math.max(lo, Math.min(hi, shift));\n}\n\n/** Moves both edges of band `index`, which is the same as moving two seams. */\nexport function moveBandEdges<T>(\n  bands: readonly Band<T>[],\n  index: number,\n  from: number,\n  to: number,\n): Band<T>[] {\n  const next = bands.map((b) => ({ ...b }));\n  next[index].from = from;\n  if (next[index + 1] !== undefined) next[index + 1].from = to;\n  return next;\n}\n\n/**\n * Splits the band containing `at` in two, the new band starting there.\n * A position already on a seam or on `min` / `max` splits nothing.\n */\nexport function splitBands<T>(\n  bands: readonly Band<T>[],\n  at: number,\n  min: number,\n  max: number,\n  makeData: (at: number, from: T) => T,\n): Band<T>[] {\n  if (bands.length === 0 || at <= min || at >= max) return bands as Band<T>[];\n  let index = -1;\n  for (let i = 0; i < bands.length; i++) {\n    const [from, to] = bandBounds(bands, i, min, max);\n    if (at > from && at < to) {\n      index = i;\n      break;\n    }\n  }\n  if (index < 0) return bands as Band<T>[];\n  const next = bands.map((b) => ({ ...b }));\n  next.splice(index + 1, 0, { from: at, data: makeData(at, bands[index].data) });\n  return next;\n}\n\n/**\n * Merges band `index` into its left neighbour, which keeps its payload and\n * absorbs the span. The first band has no left neighbour and cannot be\n * merged away — a partition always has at least one part.\n */\nexport function mergeBand<T>(bands: readonly Band<T>[], index: number): Band<T>[] {\n  if (index <= 0 || index >= bands.length) return bands as Band<T>[];\n  return bands.filter((_, i) => i !== index).map((b) => ({ ...b }));\n}\n","import {\n  Fragment,\n  useEffect,\n  useId,\n  useRef,\n  type CSSProperties,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport s from './BandEditor.module.css';\nimport { SNAP_RADIUS_PX, snapToNearest } from '../../snap';\nimport { clamp01, resolveScale, type BandScale } from './scale';\nimport {\n  bandBounds,\n  clampBandShift,\n  clampSeamTo,\n  mergeBand,\n  moveBandEdges,\n  normalizeBands,\n  seamBounds,\n  setSeam,\n  splitBands,\n  unitEdges,\n  type Band,\n} from './bands';\n\nexport type { Band, BandScale };\n\nexport interface BandEditorProps<T> {\n  /** Ascending by `from`. `value[0].from` is normalized to `min` on read. */\n  value: Band<T>[];\n  /** Live during a drag — wire for preview, do not write to history. */\n  onInput?: (next: Band<T>[]) => void;\n  /** Committed at gesture end: one call per gesture. */\n  onChange: (next: Band<T>[]) => void;\n  min: number;\n  max: number;\n  /** Default `'log'`. */\n  scale?: 'linear' | 'log' | BandScale;\n  ticks?: { at: number; label?: ReactNode }[];\n  /** Snap a dragged seam to a tick within ~6px. Default true; `alt` defeats it per-drag. */\n  snap?: boolean;\n  renderBand?: (band: Band<T>, index: number) => ReactNode;\n  selectedIndex?: number | null;\n  onSelect?: (index: number) => void;\n  /** Payload for a band split off an existing one. Default duplicates `from`. */\n  splitBand?: (at: number, from: T) => T;\n  label?: ReactNode;\n  className?: string;\n}\n\n/** One arrow-key step, as a fraction of the track. */\nconst KEY_STEP = 0.01;\n\nfunction pct(unit: number): string {\n  return `${clamp01(unit) * 100}%`;\n}\n\nfunction keepData<T>(_at: number, from: T): T {\n  return from;\n}\n\nfunction isTextEntry(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n  const tag = target.tagName;\n  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';\n}\n\n/**\n * Divides a numeric axis into contiguous bands and lets you drag the seams\n * between them. Each band carries a payload the consumer supplies and\n * renders through `renderBand`; the control itself knows nothing about what\n * a band means.\n *\n * The axis is always fully covered — N bands, N−1 interior seams, no gaps and\n * no overlaps — so editing is editing a sorted list of seam positions. Seams\n * clamp at their neighbours rather than crossing, which means a drag can\n * never destroy a band: removal is only ever the explicit `x` / `Delete`\n * merge. The first band is doubly exceptional, its left edge pinned to `min`\n * and its body immovable, and it has no left neighbour to merge into.\n *\n * | Gesture | Effect |\n * |---|---|\n * | drag a seam | resize the two bands either side |\n * | drag a band body | move both its seams, preserving its span |\n * | click the ruler | split the band under the pointer |\n * | `x` / `Delete` | merge the selected band into its left neighbour |\n * | click a band | select it |\n * | `←` `→` on a focused seam | move it by one step; `shift` for ten |\n *\n * `scale` defaults to `'log'`, because the interesting part of a width axis\n * is usually its narrow end.\n */\nexport function BandEditor<T>(props: BandEditorProps<T>): ReactElement {\n  const {\n    value,\n    onInput,\n    onChange,\n    min,\n    max,\n    scale,\n    ticks,\n    renderBand,\n    selectedIndex,\n    onSelect,\n    label,\n    className,\n  } = props;\n  const snap = props.snap ?? true;\n  const splitBand = props.splitBand ?? keepData;\n\n  const trackRef = useRef<HTMLDivElement | null>(null);\n  const sessionRef = useRef<PointerSession | null>(null);\n  useEffect(() => () => { sessionRef.current?.cancel(); }, []);\n  const labelId = useId();\n  const bands = normalizeBands(value, min);\n  const sc = resolveScale(scale, min);\n  const toUnit = (v: number): number => clamp01(sc.toUnit(v, min, max));\n  const fromUnit = (u: number): number => sc.fromUnit(clamp01(u), min, max);\n\n  const trackWidth = (): number => trackRef.current?.getBoundingClientRect().width ?? 0;\n\n  const unitAt = (clientX: number): number => {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect || rect.width === 0) return 0;\n    return clamp01((clientX - rect.left) / rect.width);\n  };\n\n  const snapped = (unit: number, altKey: boolean): number => {\n    if (!snap || altKey || !ticks || ticks.length === 0) return unit;\n    const width = trackWidth();\n    if (width === 0) return unit;\n    return snapToNearest(unit, ticks.map((tick) => toUnit(tick.at)), SNAP_RADIUS_PX / width);\n  };\n\n  // No pointer capture: a band body is a `<button>` whose content the consumer\n  // renders, and capture would retarget pointerup and kill the click on it.\n  // A drag that ends without a release commits nothing.\n  const drag = (\n    down: ReactPointerEvent<HTMLElement>,\n    onMove: (ev: PointerEvent) => void,\n    onEnd: () => void,\n  ): void => {\n    sessionRef.current?.cancel();\n    sessionRef.current = openPointerSession(down.currentTarget, down, {\n      onMove,\n      onEnd: () => { sessionRef.current = null; onEnd(); },\n      onCancel: () => { sessionRef.current = null; },\n    }, { capture: false });\n  };\n\n  const onSeamPointerDown = (index: number) => (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    e.preventDefault();\n    e.stopPropagation();\n    const base = bands;\n    let latest: Band<T>[] | null = null;\n    drag(\n      e,\n      (ev) => {\n        const to = clampSeamTo(base, index, fromUnit(snapped(unitAt(ev.clientX), ev.altKey)), min, max);\n        latest = setSeam(base, index, to);\n        onInput?.(latest);\n      },\n      () => {\n        if (latest) onChange(latest);\n      },\n    );\n  };\n\n  const onSeamKeyDown = (index: number) => (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    const [lo, hi] = seamBounds(bands, index, min, max);\n    let target: number;\n    if (e.key === 'Home') target = lo;\n    else if (e.key === 'End') target = hi;\n    else {\n      let delta = 0;\n      if (e.key === 'ArrowRight' || e.key === 'ArrowUp') delta = e.shiftKey ? KEY_STEP * 10 : KEY_STEP;\n      else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') delta = e.shiftKey ? -KEY_STEP * 10 : -KEY_STEP;\n      else return;\n      target = fromUnit(toUnit(bands[index + 1].from) + delta);\n    }\n    e.preventDefault();\n    const next = setSeam(bands, index, clampSeamTo(bands, index, target, min, max));\n    if (next !== bands) onChange(next);\n  };\n\n  const onBandPointerDown = (index: number) => (e: ReactPointerEvent<HTMLButtonElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    if (index !== selectedIndex) onSelect?.(index);\n    // The first and last bands' outer edges are `min` and `max`, which do not\n    // move, so their bodies have nothing to translate.\n    if (index === 0 || index === bands.length - 1) return;\n    const base = bands;\n    const edges = unitEdges(base, sc, min, max);\n    const startUnit = unitAt(e.clientX);\n    let latest: Band<T>[] | null = null;\n    drag(\n      e,\n      (ev) => {\n        const shift = clampBandShift(edges, index, unitAt(ev.clientX) - startUnit);\n        latest = moveBandEdges(\n          base,\n          index,\n          fromUnit(edges[index] + shift),\n          fromUnit(edges[index + 1] + shift),\n        );\n        onInput?.(latest);\n      },\n      () => {\n        if (latest) onChange(latest);\n      },\n    );\n  };\n\n  const onBandFocus = (index: number) => (): void => {\n    if (index !== selectedIndex) onSelect?.(index);\n  };\n\n  const onTrackPointerDown = (e: ReactPointerEvent<HTMLDivElement>): void => {\n    if (typeof e.button === 'number' && e.button > 0) return;\n    e.preventDefault();\n    const next = splitBands(bands, fromUnit(unitAt(e.clientX)), min, max, splitBand);\n    if (next !== bands) onChange(next);\n  };\n\n  const onRootKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>): void => {\n    if (e.key !== 'x' && e.key !== 'Delete') return;\n    // `x` is a bare letter and Cmd/Ctrl+X is cut: neither may be swallowed\n    // when the keystroke belongs to something a consumer put in a band.\n    if (e.metaKey || e.ctrlKey || e.altKey) return;\n    if (isTextEntry(e.target)) return;\n    if (selectedIndex === null || selectedIndex === undefined) return;\n    const next = mergeBand(bands, selectedIndex);\n    if (next === bands) return;\n    e.preventDefault();\n    onChange(next);\n    onSelect?.(selectedIndex - 1);\n  };\n\n  return (\n    <div\n      className={[s.root, className].filter(Boolean).join(' ')}\n      role=\"group\"\n      aria-label={typeof label === 'string' ? label : undefined}\n      aria-labelledby={label !== undefined && typeof label !== 'string' ? labelId : undefined}\n      onKeyDown={onRootKeyDown}\n    >\n      {label !== undefined && <div id={labelId} className={s.label}>{label}</div>}\n      <div className={s.ruler} ref={trackRef} data-band-ruler=\"\" onPointerDown={onTrackPointerDown}>\n        {ticks?.map((tick, i) => (\n          <span\n            key={i}\n            className={s.tick}\n            data-tick-at={tick.at}\n            style={{ '--be-at': pct(toUnit(tick.at)) } as CSSProperties}\n          >\n            {tick.label !== undefined && <span className={s.tickLabel}>{tick.label}</span>}\n          </span>\n        ))}\n      </div>\n      <div className={s.bands}>\n        {bands.map((band, i) => {\n          const [from, to] = bandBounds(bands, i, min, max);\n          const isSelected = selectedIndex === i;\n          return (\n            <Fragment key={i}>\n              <button\n                type=\"button\"\n                className={[s.band, isSelected ? s.selected : null].filter(Boolean).join(' ')}\n                style={{ '--be-from': pct(toUnit(from)), '--be-to': pct(toUnit(to)) } as CSSProperties}\n                aria-label={`Band ${i + 1}`}\n                aria-pressed={isSelected}\n                data-band-index={i}\n                onPointerDown={onBandPointerDown(i)}\n                onFocus={onBandFocus(i)}\n              >\n                <span className={s.bandContent}>{renderBand?.(band, i)}</span>\n              </button>\n              {i < bands.length - 1 && (\n                <div\n                  role=\"slider\"\n                  tabIndex={0}\n                  className={s.seam}\n                  style={{ '--be-at': pct(toUnit(bands[i + 1].from)) } as CSSProperties}\n                  aria-label={`Seam ${i + 1}`}\n                  aria-orientation=\"horizontal\"\n                  aria-valuemin={seamBounds(bands, i, min, max)[0]}\n                  aria-valuemax={seamBounds(bands, i, min, max)[1]}\n                  aria-valuenow={bands[i + 1].from}\n                  data-seam-index={i}\n                  onPointerDown={onSeamPointerDown(i)}\n                  onKeyDown={onSeamKeyDown(i)}\n                />\n              )}\n            </Fragment>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/Button-CExdkQcU.js

@@ -1,90 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-var r = {
-	button: "_button_1aa2p_3",
-	size_sm: "_size_sm_1aa2p_110",
-	size_md: "_size_md_1aa2p_111",
-	iconOnly: "_iconOnly_1aa2p_113",
-	variant_primary: "_variant_primary_1aa2p_121",
-	variant_secondary: "_variant_secondary_1aa2p_168",
-	variant_ghost: "_variant_ghost_1aa2p_203",
-	pressed: "_pressed_1aa2p_220",
-	fullWidth: "_fullWidth_1aa2p_228",
-	loading: "_loading_1aa2p_229",
-	label: "_label_1aa2p_229",
-	iconSlot: "_iconSlot_1aa2p_233",
-	spinner: "_spinner_1aa2p_247",
-	"wzl-btn-spin": "_wzl-btn-spin_1aa2p_1"
-};
-//#endregion
-//#region src/components/Button/Button.tsx
-function i() {
-	return /* @__PURE__ */ e("span", {
-		className: r.spinner,
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ t("svg", {
-			viewBox: "0 0 16 16",
-			width: "14",
-			height: "14",
-			children: [/* @__PURE__ */ e("circle", {
-				cx: "8",
-				cy: "8",
-				r: "6",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeOpacity: "0.25"
-			}), /* @__PURE__ */ e("path", {
-				d: "M 8 2 A 6 6 0 0 1 14 8",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round"
-			})]
-		})
-	});
-}
-var a = n(function(n, a) {
-	let { variant: o = "secondary", size: s = "md", pressed: c, disabled: l, loading: u, leadingIcon: d, trailingIcon: f, fullWidth: p, iconOnly: m, ariaLabel: h, type: g = "button", className: _, style: v, children: y, onClick: b } = n;
-	return /* @__PURE__ */ t("button", {
-		ref: a,
-		type: g,
-		className: [
-			r.button,
-			r[`variant_${o}`],
-			r[`size_${s}`],
-			p && r.fullWidth,
-			c && r.pressed,
-			m && r.iconOnly,
-			u && r.loading,
-			_
-		].filter(Boolean).join(" "),
-		style: v,
-		disabled: l,
-		"aria-busy": u ? !0 : void 0,
-		"aria-pressed": c,
-		"aria-label": h,
-		onClick: b,
-		children: [
-			!m && (u || d) && /* @__PURE__ */ e("span", {
-				className: r.iconSlot,
-				children: u ? /* @__PURE__ */ e(i, {}) : d
-			}),
-			m ? u ? /* @__PURE__ */ e(i, {}) : /* @__PURE__ */ e("span", {
-				className: r.iconSlot,
-				children: y
-			}) : y !== void 0 && /* @__PURE__ */ e("span", {
-				className: r.label,
-				children: y
-			}),
-			!m && f && /* @__PURE__ */ e("span", {
-				className: r.iconSlot,
-				children: f
-			})
-		]
-	});
-});
-//#endregion
-export { a as t };
-
-//# sourceMappingURL=Button-CExdkQcU.js.map

package/dist/chunks/Button-CExdkQcU.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button-CExdkQcU.js","names":[],"sources":["../../src/components/Button/Button.module.css","../../src/components/Button/Button.tsx"],"sourcesContent":["/* Aqua-glass button. Every visual parameter is exposed as a CSS custom\n   property so the Button Lab can override per-instance via inline style. */\n.button {\n  /* ---- Tunables (with Aqua-biased defaults) ---- */\n  /* Corner radius = 10% of the button's height (the shorter axis on every\n     realistic button shape). Using calc against --btn-height keeps the\n     corners circular rather than elliptical, which a % value would\n     otherwise produce on a wide-but-short pill. */\n  --btn-radius:       calc(var(--btn-height) * 0.1);\n  --btn-fontweight:   var(--wzl-font-weight-medium);\n  --btn-fontsize:     var(--wzl-font-size);\n  --btn-height:       24px;\n  --btn-padx:         12px;\n\n  /* Body gradient — alpha-laced top, opaque bottom. Percentages are\n     \"color-mix accent ratio\" so 45% = 45% accent + 55% transparent. */\n  --btn-top-alpha:     45%;\n  --btn-upper-alpha:   70%;\n  --btn-equator:       52%;   /* vertical position of the bright-to-deep transition */\n  --btn-equator-spread: 12%;  /* half-width of the equator transition band */\n  --btn-equator-tint:  95%;   /* accent vs white at equator */\n  --btn-base-tint:     70%;   /* accent vs black at base */\n  --btn-blur:          6px;\n  --btn-saturate:      1.3;\n\n  /* Specular gloss (::before) */\n  --btn-gloss-top:     0.42;\n  --btn-gloss-mid:     0.12;\n  --btn-gloss-bottom:  50%;   /* inset from bottom — 50% = upper hemisphere */\n\n  /* 3D shadows */\n  --btn-rim:          0.22;\n  --btn-drop-near:    0.30;\n  --btn-drop-far:     0.18;\n  --btn-inset-hi:     0.42;\n  --btn-inset-lo:     0.3;\n\n  /* Text — main shadow + a second engraving shadow you can angle.\n     `inset-x` / `inset-y` are pre-projected offsets from `inset-angle` so\n     the lab can drive them with a single slider. */\n  --btn-text-shadow:    0.35;\n  --btn-text-inset:     0.55;\n  --btn-text-inset-x:   0px;\n  --btn-text-inset-y:   1px;\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  border: none;\n  border-radius: var(--btn-radius);\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--btn-fontweight);\n  font-style: normal;\n  font-size: var(--btn-fontsize);\n  height: var(--btn-height);\n  padding: 0 var(--btn-padx);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  isolation: isolate;\n  overflow: hidden;\n  transition: filter var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast), transform 80ms;\n}\n\n/* Specular gloss — covers the upper hemisphere of the pill with a bright\n   white sheen that fades to nothing by the equator. The single detail that\n   sells the glass-cylinder illusion. */\n.button::before {\n  content: '';\n  position: absolute;\n  inset: 1px 1px var(--btn-gloss-bottom) 1px;\n  /* Top corners hug the button's outline; bottom corners are flat so the\n     gloss terminates in a straight line at the equator rather than two\n     little arcs that read as `)(` brackets at smaller radii. */\n  border-top-left-radius: var(--btn-radius);\n  border-top-right-radius: var(--btn-radius);\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, var(--btn-gloss-top)) 0%,\n    rgba(255, 255, 255, var(--btn-gloss-mid)) 60%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  pointer-events: none;\n  z-index: 1;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.button > * {\n  position: relative;\n  z-index: 2;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n}\n\n.button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ---------- Sizes — set defaults for the custom props ---------- */\n\n.size_sm { --btn-height: 20px; --btn-padx: 8px; --btn-fontsize: var(--wzl-font-size-sm); }\n.size_md { --btn-height: 24px; --btn-padx: 12px; --btn-fontsize: var(--wzl-font-size); }\n\n.iconOnly.size_sm { width: 20px; --btn-padx: 0; }\n.iconOnly.size_md { width: 24px; --btn-padx: 0; }\n\n/* ---------- Variants ---------- */\n\n/* Primary: tinted aqua glass — body uses --wzl-accent. The upper / equator\n   / lower stops are positioned around --btn-equator so dragging the equator\n   shifts the entire transition zone as one block. */\n.variant_primary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-top-alpha), transparent) 0%,\n    color-mix(in srgb, var(--wzl-accent) var(--btn-upper-alpha), transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-equator-tint), white) var(--btn-equator),\n    var(--wzl-accent) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-accent) var(--btn-base-tint), black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg-on-accent);\n  /* Main shadow below for legibility, then a second engraving shadow at a\n     configurable angle (defaults below) — a near-black, lower-alpha stamp\n     that sits underneath the glyphs and reads as recessed type. */\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, var(--btn-text-shadow)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, var(--btn-text-inset)),\n    0 0 6px rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.5));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, var(--btn-inset-hi)),\n    inset 0 -1px 2px rgba(0, 0, 0, var(--btn-inset-lo)),\n    0 0 0 1px rgba(0, 0, 0, var(--btn-rim)),\n    0 1px 2px rgba(0, 0, 0, var(--btn-drop-near)),\n    0 3px 6px rgba(0, 0, 0, var(--btn-drop-far));\n}\n\n.variant_primary:hover:not(:disabled) {\n  filter: brightness(1.08) saturate(1.06);\n}\n\n.variant_primary:active:not(:disabled) {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-accent) 80%, black) 0%,\n    color-mix(in srgb, var(--wzl-accent) 95%, black) 50%,\n    color-mix(in srgb, var(--wzl-accent) 60%, white) 100%\n  );\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.35),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.06));\n  transform: translateY(0.5px);\n}\n.variant_primary:active::before { opacity: 0.3; }\n\n/* Secondary: neutral glass — drained of color. */\n.variant_secondary {\n  background: linear-gradient(\n    180deg,\n    color-mix(in srgb, var(--wzl-fg) 25%, transparent) 0%,\n    color-mix(in srgb, var(--wzl-fg) 10%, transparent) calc(var(--btn-equator) - var(--btn-equator-spread)),\n    color-mix(in srgb, var(--wzl-surface-raised) 90%, white) var(--btn-equator),\n    var(--wzl-surface-raised) calc(var(--btn-equator) + var(--btn-equator-spread) * 1.6),\n    color-mix(in srgb, var(--wzl-surface-sunken) 80%, black) 100%\n  );\n  backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  -webkit-backdrop-filter: blur(var(--btn-blur)) saturate(var(--btn-saturate));\n  color: var(--wzl-fg);\n  text-shadow:\n    0 1px 0 rgba(0, 0, 0, calc(var(--btn-text-shadow) * 0.7)),\n    var(--btn-text-inset-x) var(--btn-text-inset-y) 0 rgba(0, 0, 0, calc(var(--btn-text-inset) * 0.7));\n  box-shadow:\n    inset 0 1px 0 rgba(255, 255, 255, calc(var(--btn-inset-hi) * 0.5)),\n    inset 0 -1px 2px rgba(0, 0, 0, calc(var(--btn-inset-lo) * 0.83)),\n    0 0 0 1px rgba(0, 0, 0, calc(var(--btn-rim) + 0.03)),\n    0 1px 2px rgba(0, 0, 0, calc(var(--btn-drop-near) * 0.93)),\n    0 3px 6px rgba(0, 0, 0, calc(var(--btn-drop-far) * 0.89));\n}\n\n.variant_secondary:hover:not(:disabled) { filter: brightness(1.1); }\n\n.variant_secondary:active:not(:disabled) {\n  background: linear-gradient(180deg, var(--wzl-surface-sunken) 0%, var(--wzl-surface-raised) 100%);\n  box-shadow:\n    inset 0 2px 4px rgba(0, 0, 0, 0.4),\n    0 0 0 1px rgba(0, 0, 0, 0.3);\n  transform: translateY(0.5px);\n}\n.variant_secondary:active::before { opacity: 0.2; }\n\n/* Ghost: silhouette only — no glass body, no gloss. */\n.variant_ghost {\n  background: transparent;\n  color: var(--wzl-fg);\n  box-shadow: none;\n}\n.variant_ghost::before { display: none; }\n\n.variant_ghost:hover:not(:disabled) {\n  background: var(--wzl-surface-hover);\n}\n\n.variant_ghost:active:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n}\n\n/* ---------- Modifiers ---------- */\n\n.pressed:not(:disabled) {\n  background: var(--wzl-surface-pressed);\n  color: var(--wzl-fg);\n  box-shadow: inset 0 1px 2px rgb(0 0 0 / 18%);\n}\n\n.variant_primary.pressed:not(:disabled) { filter: brightness(0.92); }\n\n.fullWidth { width: 100%; }\n.loading .label { opacity: 0.7; }\n\n/* ---------- Slots ---------- */\n\n.iconSlot {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.size_sm .iconSlot > svg { width: 12px; height: 12px; }\n.size_md .iconSlot > svg { width: 14px; height: 14px; }\n\n.label { display: inline-block; }\n\n/* ---------- Spinner ---------- */\n\n.spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  animation: wzl-btn-spin 0.7s linear infinite;\n}\n\n@keyframes wzl-btn-spin {\n  to { transform: rotate(360deg); }\n}\n","import { forwardRef, type ButtonHTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './Button.module.css';\n\n/** Visual weight of a button. Defaults to `secondary`. */\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost';\n/** Button height and type scale. */\nexport type ButtonSize = 'sm' | 'md';\n\ntype ButtonBase = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  /** A button that stays down: renders `aria-pressed` and holds the active\n   *  treatment while it is on. For a control that reports a state rather than\n   *  firing an action -- a panel toggle, a mode switch. Left off, the button\n   *  announces no pressed state at all, which is what an action button wants. */\n  pressed?: boolean;\n  disabled?: boolean;\n  loading?: boolean;\n  leadingIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  fullWidth?: boolean;\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n  style?: ButtonHTMLAttributes<HTMLButtonElement>['style'];\n  children?: ReactNode;\n  onClick?: ButtonHTMLAttributes<HTMLButtonElement>['onClick'];\n};\n\ntype ButtonRegular = ButtonBase & {\n  iconOnly?: false;\n  ariaLabel?: string;\n};\n\ntype ButtonIconOnly = ButtonBase & {\n  iconOnly: true;\n  ariaLabel: string;\n};\n\n/**\n * Props for {@link Button}. Setting `iconOnly` makes `ariaLabel` required,\n * since an icon-only button has no text for a screen reader to announce.\n */\nexport type ButtonProps = ButtonRegular | ButtonIconOnly;\n\nfunction Spinner(): ReactNode {\n  return (\n    <span className={s.spinner} aria-hidden=\"true\">\n      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\">\n        <circle\n          cx=\"8\"\n          cy=\"8\"\n          r=\"6\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeOpacity=\"0.25\"\n        />\n        <path\n          d=\"M 8 2 A 6 6 0 0 1 14 8\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    </span>\n  );\n}\n\n/**\n * Standard button. `loading` swaps the leading icon for a spinner, marks the\n * button `aria-busy`, and leaves the label in place; it does not disable the\n * button, so pass `disabled` too if the click should be blocked.\n *\n * `ref` forwards to the underlying `<button>`.\n */\nexport const Button = forwardRef(function Button(\n  props: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  const {\n    variant = 'secondary',\n    size = 'md',\n    pressed,\n    disabled,\n    loading,\n    leadingIcon,\n    trailingIcon,\n    fullWidth,\n    iconOnly,\n    ariaLabel,\n    type = 'button',\n    className,\n    style,\n    children,\n    onClick,\n  } = props;\n\n  const cls = [\n    s.button,\n    s[`variant_${variant}`],\n    s[`size_${size}`],\n    fullWidth && s.fullWidth,\n    pressed && s.pressed,\n    iconOnly && s.iconOnly,\n    loading && s.loading,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const showLeading = !iconOnly && (loading || leadingIcon);\n\n  return (\n    <button\n      ref={ref}\n      type={type}\n      className={cls}\n      style={style}\n      disabled={disabled}\n      aria-busy={loading ? true : undefined}\n      aria-pressed={pressed}\n      aria-label={ariaLabel}\n      onClick={onClick}\n    >\n      {showLeading && (\n        <span className={s.iconSlot}>{loading ? <Spinner /> : leadingIcon}</span>\n      )}\n      {iconOnly ? (\n        loading ? <Spinner /> : <span className={s.iconSlot}>{children}</span>\n      ) : (\n        children !== undefined && <span className={s.label}>{children}</span>\n      )}\n      {!iconOnly && trailingIcon && (\n        <span className={s.iconSlot}>{trailingIcon}</span>\n      )}\n    </button>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AC4CA,SAAS,IAAqB;AAC5B,QACE,kBAAC,QAAD;EAAM,WAAW,EAAE;EAAS,eAAY;YACtC,kBAAC,OAAD;GAAK,SAAQ;GAAY,OAAM;GAAK,QAAO;aAA3C,CACE,kBAAC,UAAD;IACE,IAAG;IACH,IAAG;IACH,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,EACF,kBAAC,QAAD;IACE,GAAE;IACF,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,CAAA,CACE;;EACD,CAAA;;AAWX,IAAa,IAAS,EAAW,SAC/B,GACA,GACA;CACA,IAAM,EACJ,aAAU,aACV,UAAO,MACP,YACA,aACA,YACA,gBACA,iBACA,cACA,aACA,cACA,UAAO,UACP,cACA,UACA,aACA,eACE;AAiBJ,QACE,kBAAC,UAAD;EACO;EACC;EACN,WAnBQ;GACV,EAAE;GACF,EAAE,WAAW;GACb,EAAE,QAAQ;GACV,KAAa,EAAE;GACf,KAAW,EAAE;GACb,KAAY,EAAE;GACd,KAAW,EAAE;GACb;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAQO;EACJ;EACG;EACV,aAAW,IAAU,KAAO,KAAA;EAC5B,gBAAc;EACd,cAAY;EACH;YATX;GAHkB,CAAC,MAAa,KAAW,MAevC,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG;IAAmB,CAAA;GAE1E,IACC,IAAU,kBAAC,GAAD,EAAW,CAAA,GAAG,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAW;IAAgB,CAAA,GAEtE,MAAa,KAAA,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAE;IAAQ;IAAgB,CAAA;GAEtE,CAAC,KAAY,KACZ,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAW;IAAoB,CAAA;GAE7C;;EAEX"}

package/dist/chunks/Callout-cx5_CWcW.js

@@ -1,122 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useCallback as i, useEffect as a, useId as o, useRef as s } from "react";
-import { Dialog as c, DialogTrigger as l, Heading as u, OverlayArrow as d, Popover as f } from "react-aria-components";
-import { createPortal as p } from "react-dom";
-var m = {
-	anchor: "_anchor_vtcyj_1",
-	popover: "_popover_vtcyj_6",
-	toneWarning: "_toneWarning_vtcyj_25",
-	toneDanger: "_toneDanger_vtcyj_29",
-	arrow: "_arrow_vtcyj_33",
-	dialog: "_dialog_vtcyj_52",
-	header: "_header_vtcyj_59",
-	title: "_title_vtcyj_66",
-	close: "_close_vtcyj_73",
-	body: "_body_vtcyj_89",
-	footer: "_footer_vtcyj_96"
-}, h = {
-	info: m.toneInfo,
-	warning: m.toneWarning,
-	danger: m.toneDanger
-};
-function g(l) {
-	let { children: g, className: _, title: v, footer: y, tone: b = "info", modal: x = !1, showCloseButton: S, onDismiss: C, triggerRef: w, anchorRect: T, placement: E = "top", offset: D = 12, maxHeight: O = 400, onOpenChange: k, shouldCloseOnInteractOutside: A, "aria-label": j, "aria-labelledby": M, portalContainer: N, ...P } = l, F = s(null), { anchor: I, portalProps: L } = e(N), R = S ?? !x, z = s(C);
-	z.current = C;
-	let B = s((e) => {
-		e.key === "Escape" && z.current?.();
-	}), V = s(null), H = i((e) => {
-		V.current?.removeEventListener("keydown", B.current), V.current = e, e?.addEventListener("keydown", B.current);
-	}, []), U = o(), W = T !== void 0;
-	a(() => {
-		!W || typeof window > "u" || window.dispatchEvent(new Event("resize"));
-	}, [
-		W,
-		T?.x,
-		T?.y,
-		T?.width,
-		T?.height
-	]);
-	let G = x && v !== void 0 ? U : M, K = x ? j : void 0;
-	return /* @__PURE__ */ r(t, { children: [
-		I,
-		T !== void 0 && p(/* @__PURE__ */ n("span", {
-			ref: F,
-			"data-callout-anchor": "",
-			className: m.anchor,
-			"aria-hidden": "true",
-			style: {
-				left: T.x,
-				top: T.y,
-				width: T.width,
-				height: T.height
-			}
-		}), document.body),
-		/* @__PURE__ */ r(f, {
-			...P,
-			triggerRef: T === void 0 ? w : F,
-			isNonModal: !x,
-			placement: E,
-			offset: D,
-			maxHeight: O,
-			onOpenChange: k,
-			shouldCloseOnInteractOutside: A ?? (x ? () => !1 : void 0),
-			"aria-label": K,
-			"aria-labelledby": G,
-			className: [
-				m.popover,
-				h[b],
-				_
-			].filter(Boolean).join(" "),
-			"data-weasel-overlay": "",
-			...L,
-			children: [/* @__PURE__ */ n(d, {
-				className: m.arrow,
-				children: /* @__PURE__ */ n("svg", {
-					width: 12,
-					height: 12,
-					viewBox: "0 0 12 12",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ n("path", { d: "M0 0 L6 6 L12 0" })
-				})
-			}), /* @__PURE__ */ n(c, {
-				role: x ? "alertdialog" : "dialog",
-				className: m.dialog,
-				"aria-label": j,
-				"aria-labelledby": M,
-				ref: H,
-				children: ({ close: e }) => /* @__PURE__ */ r(t, { children: [
-					(v !== void 0 || R) && /* @__PURE__ */ r("header", {
-						className: m.header,
-						children: [v !== void 0 && /* @__PURE__ */ n(u, {
-							id: U,
-							slot: "title",
-							className: m.title,
-							children: v
-						}), R && /* @__PURE__ */ n("button", {
-							type: "button",
-							className: m.close,
-							onClick: () => {
-								e(), k?.(!1), C?.();
-							},
-							"aria-label": "Close callout",
-							children: "×"
-						})]
-					}),
-					/* @__PURE__ */ n("div", {
-						className: m.body,
-						children: g
-					}),
-					y !== void 0 && /* @__PURE__ */ n("footer", {
-						className: m.footer,
-						children: y
-					})
-				] })
-			})]
-		})
-	] });
-}
-//#endregion
-export { l as n, g as t };
-
-//# sourceMappingURL=Callout-cx5_CWcW.js.map

package/dist/chunks/Callout-cx5_CWcW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Callout-cx5_CWcW.js","names":[],"sources":["../../src/components/Callout/Callout.module.css","../../src/components/Callout/Callout.tsx"],"sourcesContent":[".anchor {\n  position: fixed;\n  pointer-events: none;\n}\n\n.popover {\n  /* Above Dialog overlay (1000) and ToastRegion (1100) — RAC sets no z-index. */\n  z-index: 1200;\n  --callout-accent: var(--wzl-accent-strong);\n  background: var(--wzl-surface);\n  border: 1px solid var(--callout-accent);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: 320px;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.popover[data-entering],\n.popover[data-exiting] {\n  opacity: 0;\n}\n\n.toneWarning {\n  --callout-accent: var(--wzl-warning, #d99a3f);\n}\n\n.toneDanger {\n  --callout-accent: var(--wzl-danger);\n}\n\n.arrow svg {\n  display: block;\n  fill: var(--wzl-surface);\n  stroke: var(--callout-accent);\n  stroke-width: 1;\n}\n\n.arrow[data-placement='bottom'] svg {\n  transform: rotate(180deg);\n}\n\n.arrow[data-placement='left'] svg {\n  transform: rotate(-90deg);\n}\n\n.arrow[data-placement='right'] svg {\n  transform: rotate(90deg);\n}\n\n.dialog {\n  outline: none;\n  max-height: inherit;\n  display: flex;\n  flex-direction: column;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 10px 12px 0;\n}\n\n.title {\n  margin: 0;\n  flex: 1;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n}\n\n.close {\n  flex: 0 0 auto;\n  background: none;\n  border: none;\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-lg);\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\n.body {\n  padding: 8px 12px 10px;\n  font-size: var(--wzl-font-size);\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 0 12px 10px;\n}\n","import { useCallback, useEffect, useId, useRef, type ReactNode, type RefObject } from 'react';\nimport { createPortal } from 'react-dom';\nimport {\n  DialogTrigger,\n  Popover as RACPopover,\n  OverlayArrow,\n  Dialog as RACDialog,\n  Heading,\n  type PopoverProps as RACPopoverProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport s from './Callout.module.css';\n\n/** Accent color of a {@link Callout}'s border and arrow. */\nexport type CalloutTone = 'info' | 'warning' | 'danger';\n\n/**\n * Composition wrapper for press-to-open callouts:\n * `<CalloutTrigger><Pressable>…</Pressable><Callout>…</Callout></CalloutTrigger>`.\n * Re-exported RAC DialogTrigger — non-RAC trigger elements must be wrapped\n * in `<Pressable>` from react-aria-components.\n * In composed mode, put `defaultOpen` on `CalloutTrigger`, not `Callout` —\n * RAC detaches to local open state on the trigger, not the popover.\n */\nexport { DialogTrigger as CalloutTrigger };\n\n/** Props for {@link Callout}, on top of React Aria's `Popover` props. */\nexport type CalloutProps = Omit<\n  WithoutPortalTarget<RACPopoverProps>,\n  'children' | 'className' | 'isNonModal' | 'triggerRef'\n> &\n  OverlayPortalProps & {\n  children?: ReactNode;\n  className?: string;\n  /** Optional heading rendered above the body. */\n  title?: ReactNode;\n  /** Footer slot — typically action buttons. */\n  footer?: ReactNode;\n  /** Accent tone for border + arrow. Default `info`. */\n  tone?: CalloutTone;\n  /**\n   * `true` — blocks interaction with the rest of the app until dismissed;\n   * inner dialog is `role=\"alertdialog\"`. `false` (default) — non-blocking:\n   * the app stays interactive; Esc / outside click / close button dismiss.\n   */\n  modal?: boolean;\n  /**\n   * Show the × button. Defaults to `!modal`. In programmatic\n   * `triggerRef`/`anchorRect` modes the close button needs controlled open\n   * (`isOpen` + `onOpenChange`); with only `defaultOpen` it has no open-state\n   * setter to call and cannot close.\n   */\n  showCloseButton?: boolean;\n  /**\n   * The user asked for this callout to go away — the × button or Escape.\n   *\n   * Distinct from `onOpenChange`, which a non-modal popover *also* fires when\n   * interaction or focus merely leaves it. On a canvas that's every click on\n   * the artwork, so a consumer that pins `isOpen` and treats `onOpenChange`\n   * as dismissal retires messages nobody read. Use this instead: it fires\n   * only on a deliberate act, and never on incidental focus loss.\n   */\n  onDismiss?: () => void;\n  /** Anchor to an arbitrary element (programmatic use, with `isOpen`). */\n  triggerRef?: RefObject<Element | null>;\n  /**\n   * Anchor to a client-coordinate rect — e.g. a scene node's on-screen box.\n   * The callout re-anchors whenever this rect changes, so a consumer that\n   * recomputes it on pan, zoom, or scene edits keeps the arrow on its target.\n   * Takes precedence over `triggerRef`.\n   */\n    anchorRect?: { x: number; y: number; width: number; height: number };\n  };\n\nconst toneClass: Record<CalloutTone, string> = {\n  info: s.toneInfo,\n  warning: s.toneWarning,\n  danger: s.toneDanger,\n};\n\n/**\n * Anchored callout with an arrow pointing at its source — a trigger\n * element, an arbitrary `triggerRef`, or a client-space `anchorRect`.\n * Wraps React Aria Popover + Dialog; positioning, collision flipping,\n * dismissal, and focus behavior come from the underlying primitives.\n */\nexport function Callout(props: CalloutProps) {\n  const {\n    children,\n    className,\n    title,\n    footer,\n    tone = 'info',\n    modal = false,\n    showCloseButton,\n    onDismiss,\n    triggerRef,\n    anchorRect,\n    placement = 'top',\n    offset = 12,\n    maxHeight = 400,\n    onOpenChange,\n    shouldCloseOnInteractOutside,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    portalContainer,\n    ...rest\n  } = props;\n  const anchorRef = useRef<HTMLSpanElement>(null);\n  const { anchor: portalAnchor, portalProps } = useOverlayPortal(portalContainer);\n  const showClose = showCloseButton ?? !modal;\n  // Escape is a dismissal like the × is. It can't ride on a React `onKeyDown`:\n  // RAC's Dialog runs its props through filterDOMProps, which drops handlers\n  // it doesn't know, so the listener goes on the section itself. RAC's own\n  // Escape handling is untouched — this only adds the signal.\n  const onDismissRef = useRef(onDismiss);\n  onDismissRef.current = onDismiss;\n  const escapeListener = useRef((e: KeyboardEvent) => {\n    if (e.key === 'Escape') onDismissRef.current?.();\n  });\n  const listeningTo = useRef<HTMLElement | null>(null);\n  const dialogRef = useCallback((node: HTMLElement | null) => {\n    listeningTo.current?.removeEventListener('keydown', escapeListener.current);\n    listeningTo.current = node;\n    node?.addEventListener('keydown', escapeListener.current);\n  }, []);\n  const titleId = useId();\n  // RAC positions on open and recomputes on scroll, resize, and a\n  // ResizeObserver on the anchor — none of which fire when `anchorRect` is\n  // merely *translated*, as it is when a consumer tracks a scene node across a\n  // pan. (Zoom happens to work, since scaling also changes the anchor's size.)\n  // Nudging RAC's own resize listener is the supported way to make it\n  // recompute; there's no public updatePosition on Popover.\n  const hasAnchorRect = anchorRect !== undefined;\n  useEffect(() => {\n    if (!hasAnchorRect || typeof window === 'undefined') return;\n    window.dispatchEvent(new Event('resize'));\n  }, [hasAnchorRect, anchorRect?.x, anchorRect?.y, anchorRect?.width, anchorRect?.height]);\n  // RAC's popover role-heuristic misses alertdialog; label the outer role\n  // it stamps. Upstream: react-spectrum Popover.mjs querySelector('[role=dialog]').\n  const popoverAriaLabelledby =\n    modal && title !== undefined ? titleId : ariaLabelledby;\n  const popoverAriaLabel = modal ? ariaLabel : undefined;\n  return (\n    <>\n      {portalAnchor}\n      {/* Harmless while closed — RAC reads the ref only when the popover is open. */}\n      {anchorRect !== undefined &&\n        createPortal(\n          <span\n            ref={anchorRef}\n            data-callout-anchor=\"\"\n            className={s.anchor}\n            aria-hidden=\"true\"\n            // Dynamic geometry — inline style is the mechanism here, not styling.\n            style={{\n              left: anchorRect.x,\n              top: anchorRect.y,\n              width: anchorRect.width,\n              height: anchorRect.height,\n            }}\n          />,\n          document.body,\n        )}\n      <RACPopover\n        {...rest}\n        triggerRef={anchorRect !== undefined ? anchorRef : triggerRef}\n        isNonModal={!modal}\n        placement={placement}\n        offset={offset}\n        maxHeight={maxHeight}\n        onOpenChange={onOpenChange}\n        shouldCloseOnInteractOutside={\n          shouldCloseOnInteractOutside ?? (modal ? () => false : undefined)\n        }\n        aria-label={popoverAriaLabel}\n        aria-labelledby={popoverAriaLabelledby}\n        className={[s.popover, toneClass[tone], className].filter(Boolean).join(' ')}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <OverlayArrow className={s.arrow}>\n          <svg width={12} height={12} viewBox=\"0 0 12 12\" aria-hidden=\"true\">\n            <path d=\"M0 0 L6 6 L12 0\" />\n          </svg>\n        </OverlayArrow>\n        <RACDialog\n          role={modal ? 'alertdialog' : 'dialog'}\n          className={s.dialog}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          ref={dialogRef}\n        >\n          {({ close }) => (\n            <>\n              {(title !== undefined || showClose) && (\n                <header className={s.header}>\n                  {title !== undefined && (\n                    <Heading id={titleId} slot=\"title\" className={s.title}>\n                      {title}\n                    </Heading>\n                  )}\n                  {showClose && (\n                    <button\n                      type=\"button\"\n                      className={s.close}\n                      onClick={() => {\n                        // `close()` resolves OverlayTriggerStateContext, only\n                        // provided by DialogTrigger (composed mode). In\n                        // triggerRef/anchorRect modes there is no such\n                        // context, so `close()` is a no-op there — the\n                        // controlled-open fallback below does the work.\n                        close();\n                        onOpenChange?.(false);\n                        onDismiss?.();\n                      }}\n                      aria-label=\"Close callout\"\n                    >\n                      ×\n                    </button>\n                  )}\n                </header>\n              )}\n              <div className={s.body}>{children}</div>\n              {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n            </>\n          )}\n        </RACDialog>\n      </RACPopover>\n    </>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/Checkbox-BZZsPaVF.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox-BZZsPaVF.js","names":[],"sources":["../../src/components/Checkbox/Checkbox.module.css","../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":[".checkbox {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.checkbox[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.box {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: var(--wzl-radius-sm);\n  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.checkbox[data-focus-visible] .box {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.checkbox[data-hovered]:not([data-disabled]) .box {\n  border-color: var(--wzl-fg-muted);\n}\n\n.checkbox[data-selected] .box,\n.checkbox[data-indeterminate] .box {\n  background: var(--wzl-accent-strong);\n  border-color: var(--wzl-accent-strong);\n}\n\n.checkbox[data-invalid] .box {\n  border-color: var(--wzl-danger);\n}\n\n.checkmark {\n  position: absolute;\n  inset: 0;\n  color: var(--wzl-fg-on-accent);\n  opacity: 0;\n  pointer-events: none;\n}\n\n.checkbox[data-selected] .checkmark,\n.checkbox[data-indeterminate] .checkmark {\n  opacity: 1;\n}\n\n.label {\n  line-height: 1.2;\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  Checkbox as RACCheckbox,\n  type CheckboxProps as RACCheckboxProps,\n} from 'react-aria-components';\nimport s from './Checkbox.module.css';\n\n/**\n * Props for {@link Checkbox}, on top of React Aria's `Checkbox` props. The\n * label is passed as children.\n */\nexport type CheckboxProps = Omit<RACCheckboxProps, 'children' | 'className'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Single checkbox wrapping React Aria's Checkbox. Supports indeterminate\n * via `isIndeterminate`. The label is supplied as children.\n */\nexport const Checkbox = forwardRef(function Checkbox(\n  props: CheckboxProps,\n  ref: Ref<HTMLLabelElement>,\n) {\n  const { children, className, ...rest } = props;\n  return (\n    <RACCheckbox\n      {...rest}\n      ref={ref}\n      className={[s.checkbox, className].filter(Boolean).join(' ')}\n    >\n      {({ isIndeterminate }) => (\n        <>\n          <span className={s.box}>\n            <svg className={s.checkmark} viewBox=\"0 0 14 14\" aria-hidden=\"true\">\n              {isIndeterminate ? (\n                <line x1=\"3\" y1=\"7\" x2=\"11\" y2=\"7\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n              ) : (\n                <polyline\n                  points=\"3,7.5 6,10.5 11,4.5\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                />\n              )}\n            </svg>\n          </span>\n          {children !== undefined && <span className={s.label}>{children}</span>}\n        </>\n      )}\n    </RACCheckbox>\n  );\n});\n"],"mappings":";;;;;;;;GCoBa,IAAW,EAAW,SACjC,GACA,GACA;CACA,IAAM,EAAE,aAAU,cAAW,GAAG,MAAS;AACzC,QACE,kBAAC,GAAD;EACE,GAAI;EACC;EACL,WAAW,CAAC,EAAE,UAAU,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aAE1D,EAAE,yBACF,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAW,EAAE;aACjB,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAW,SAAQ;IAAY,eAAY;cAC1D,IACC,kBAAC,QAAD;KAAM,IAAG;KAAI,IAAG;KAAI,IAAG;KAAK,IAAG;KAAI,QAAO;KAAe,aAAY;KAAI,eAAc;KAAU,CAAA,GAEjG,kBAAC,YAAD;KACE,QAAO;KACP,MAAK;KACL,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;KACf,CAAA;IAEA,CAAA;GACD,CAAA,EACN,MAAa,KAAA,KAAa,kBAAC,QAAD;GAAM,WAAW,EAAE;GAAQ;GAAgB,CAAA,CACrE,EAAA,CAAA;EAEO,CAAA;EAEhB"}

package/dist/chunks/ComboBox-D57tNYDD.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComboBox-D57tNYDD.js","names":[],"sources":["../../src/components/ComboBox/ComboBox.module.css","../../src/components/ComboBox/ComboBox.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.frame {\n  display: flex;\n  align-items: stretch;\n  height: var(--wzl-field-h, var(--wzl-control-h));\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  overflow: hidden;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.frame:focus-within {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .frame {\n  border-color: var(--wzl-danger);\n}\n\n.field[data-disabled] .frame {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.frame input {\n  flex: 1;\n  min-width: 0;\n  background: transparent;\n  border: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.frame input::placeholder {\n  color: var(--wzl-fg-subtle);\n}\n\n/* A request is out: the rows on screen are the previous query's, so mark them\n   stale rather than clearing the list out from under the arrow keys. */\n.frame:has(input[aria-busy='true'])::after {\n  content: '';\n  align-self: center;\n  flex: none;\n  width: 10px;\n  height: 10px;\n  margin-right: 4px;\n  border: 1.5px solid var(--wzl-fg-subtle);\n  border-top-color: transparent;\n  border-radius: 50%;\n  animation: spin 700ms linear infinite;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(1turn);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .frame:has(input[aria-busy='true'])::after {\n    animation: none;\n    border-top-color: var(--wzl-fg-subtle);\n    opacity: 0.5;\n  }\n}\n\n.openButton {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  background: transparent;\n  border: none;\n  border-left: 1px solid var(--wzl-border);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n}\n\n.openButton[data-hovered]:not([data-disabled]) {\n  color: var(--wzl-fg);\n}\n\n.openButton svg {\n  width: 10px;\n  height: 10px;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  padding: 4px 8px;\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.empty {\n  padding: 6px 8px;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n}\n\n.error {\n  padding: 6px 8px;\n  color: var(--wzl-danger);\n  font-size: var(--wzl-font-size-sm);\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the input's grid\n   cell, so the field is wide enough for whichever option is chosen and takes\n   no more of the row than that. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .frame {\n  display: grid;\n  grid-template-columns: auto auto;\n  width: fit-content;\n  max-width: 100%;\n}\n\n/* `width: 0` keeps the input's 20-character intrinsic width out of the track\n   sizing — the sizer is what the column measures — and `min-width` then\n   stretches it back across whatever that came to. */\n.fit .frame input {\n  grid-area: 1 / 1;\n  width: 0;\n  min-width: 100%;\n}\n\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .openButton {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  display: grid;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  white-space: nowrap;\n  padding: 0 var(--wzl-field-pad-x);\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import { Children, isValidElement, useContext, type KeyboardEvent, type ReactNode } from 'react';\nimport {\n  ComboBox as RACComboBox,\n  ComboBoxStateContext,\n  Label,\n  Input as RACInput,\n  Button as RACButton,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type ComboBoxProps as RACComboBoxProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './ComboBox.module.css';\n\n/**\n * One option in a {@link ComboBox}'s `options` list. `textValue` is the\n * plain-text form used for filtering and screen readers, needed only when\n * `label` isn't a bare string.\n */\nexport type ComboBoxOption = {\n  value: string;\n  label: ReactNode;\n  textValue?: string;\n  isDisabled?: boolean;\n};\n\ntype Key = string | number;\n\n/**\n * How the typed text narrows the options.\n *\n * `'contains'` is a locale-aware substring match over each option's text.\n * `'none'` shows every option given — what a list a server already filtered\n * and ranked needs, since a second pass would drop rows that do not contain\n * the query and reorder whatever survived.\n */\nexport type ComboBoxFilter = 'contains' | 'none' | ((textValue: string, inputValue: string) => boolean);\n\n/** What the user committed: an option they picked, or text they typed. */\nexport type ComboBoxCommit<T extends Key = string> =\n  | { source: 'option'; key: T }\n  | { source: 'text'; text: string };\n\nconst admitEverything = () => true;\n\n/**\n * Props for {@link ComboBox}, on top of React Aria's `ComboBox` props, with\n * the selection key narrowed to the option value type.\n */\nexport type ComboBoxProps<T extends Key = string> = Omit<RACComboBoxProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  options?: ReadonlyArray<ComboBoxOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T | null) => void;\n  emptyLabel?: ReactNode;\n  /** Shown in place of `emptyLabel` while `loadError` is set. */\n  errorLabel?: ReactNode;\n  /**\n   * How typed text narrows `options`. Defaults to `'contains'`. `'none'` also\n   * keeps the popover open on an empty collection: a list the kit does not\n   * filter can arrive empty from a server mid-query, and without that the\n   * popover closes and `emptyLabel` is never seen.\n   */\n  filter?: ComboBoxFilter;\n  /** Marks the options as out of date while the next set is being fetched. */\n  isLoading?: boolean;\n  /** A failed load, shown as `errorLabel` rather than as an empty corpus. */\n  loadError?: unknown | null;\n  /**\n   * Fires when the user commits — Enter on the active option, a click on one,\n   * or Enter on text matching none of them when `allowsCustomValue` is set.\n   * Empty text commits nothing.\n   */\n  onCommit?: (commit: ComboBoxCommit<T>) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the combo box sits\n   * in. `'fit'` sizes the input to its widest option, so it neither swallows a\n   * toolbar's slack nor cuts a selection off once one is made.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Filterable single-select wrapping React Aria's ComboBox. The user can\n * type to filter; selection commits to `onSelectionChange`. When no value\n * is in the input, selection clears (key becomes null).\n */\nexport function ComboBox<T extends Key = string>(props: ComboBoxProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    emptyLabel = 'No matches',\n    errorLabel = \"Couldn't load options\",\n    filter = 'contains',\n    isLoading,\n    loadError = null,\n    onCommit,\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACComboBox\n      {...rest}\n      // 'contains' leaves this unset so React Aria uses its own locale-aware\n      // match rather than a reimplementation of it.\n      defaultFilter={filter === 'none' ? admitEverything : filter === 'contains' ? undefined : filter}\n      allowsEmptyCollection={rest.allowsEmptyCollection ?? filter === 'none'}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(k) => {\n        onSelectionChange?.(k as T | null);\n        if (k !== null) onCommit?.({ source: 'option', key: k as T });\n      }}\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <ComboBoxFrame\n        placeholder={placeholder}\n        isLoading={isLoading}\n        onCommitText={onCommit && ((text) => onCommit({ source: 'text', text }))}\n      >\n        {width === 'fit' && (\n          <span className={s.sizer} aria-hidden=\"true\">\n            {placeholder !== undefined && <span>{placeholder}</span>}\n            {optionLabels(options, children).map((l, i) => (\n              <span key={i}>{l}</span>\n            ))}\n          </span>\n        )}\n      </ComboBoxFrame>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACListBox\n          className={s.listbox}\n          renderEmptyState={() =>\n            loadError !== null ? (\n              <div className={s.error} role=\"alert\">{errorLabel}</div>\n            ) : (\n              <div className={s.empty}>{emptyLabel}</div>\n            )\n          }\n        >\n          {options !== undefined\n            ? options.map((o) => (\n                <ComboBoxItem key={String(o.value)} id={o.value} textValue={o.textValue} isDisabled={o.isDisabled}>\n                  {o.label}\n                </ComboBoxItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACComboBox>\n  );\n}\n\n/**\n * The input and its trigger. Split out so it can read `ComboBoxStateContext`,\n * which only exists below `RACComboBox`.\n */\nfunction ComboBoxFrame({\n  placeholder,\n  isLoading,\n  onCommitText,\n  children,\n}: {\n  placeholder?: string;\n  isLoading?: boolean;\n  onCommitText?: (text: string) => void;\n  children?: ReactNode;\n}) {\n  const state = useContext(ComboBoxStateContext);\n\n  // Capture, not bubble: React Aria's own Enter handler runs on the way up and\n  // clears the focused key, so by then there is no way to tell an option\n  // commit from a text one.\n  const onKeyDownCapture = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key !== 'Enter' || e.nativeEvent.isComposing) return;\n    if (state?.isOpen && state.selectionManager.focusedKey != null) return;\n    const text = e.currentTarget.value;\n    if (text !== '') onCommitText?.(text);\n  };\n\n  return (\n    <div className={s.frame}>\n      <RACInput\n        placeholder={placeholder}\n        aria-busy={isLoading || undefined}\n        onKeyDownCapture={onCommitText ? onKeyDownCapture : undefined}\n      />\n      {children}\n      <RACButton className={s.openButton} aria-label=\"Show options\">\n        <svg viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n          <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </RACButton>\n    </div>\n  );\n}\n\n/**\n * The labels a `width='fit'` input measures itself against. In the children\n * form the label sits one element deep, inside a `ComboBoxItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<ComboBoxOption> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined) return options.map((o) => o.label);\n  return Children.toArray(children).map((c) =>\n    isValidElement<{ children?: ReactNode }>(c) ? c.props.children : c,\n  );\n}\n\n/** Props for {@link ComboBoxItem}, on top of React Aria's `ListBoxItem` props. */\nexport type ComboBoxItemProps = Omit<RACListBoxItemProps, 'className'> & {\n  className?: string;\n};\n\n/** One row in a {@link ComboBox}'s filtered list. */\nexport function ComboBoxItem({ className, ...rest }: ComboBoxItemProps) {\n  return <RACListBoxItem {...rest} className={[s.option, className].filter(Boolean).join(' ')} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;GCiDM,UAAwB;AAkD9B,SAAgB,EAAiC,GAAyB;CACxE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,gBAAa,cACb,gBAAa,yBACb,YAAS,YACT,cACA,eAAY,MACZ,aACA,WAAQ,QACR,cACA,oBACA,GAAG,MACD,GAEE,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AAEjE,QACE,kBAAC,GAAD;EACE,GAAI;EAGJ,eAAe,MAAW,SAAS,IAAkB,MAAW,aAAa,KAAA,IAAY;EACzF,uBAAuB,EAAK,yBAAyB,MAAW;EACnD;EACO;EACpB,oBAAoB,MAAM;AAExB,GADA,IAAoB,EAAc,EAC9B,MAAM,QAAM,IAAW;IAAE,QAAQ;IAAU,KAAK;IAAQ,CAAC;;EAE/D,WAAW;GAAC,EAAE;GAAO,MAAU,SAAS,EAAE;GAAK,EAAa;GAAM;GAAU,CACzE,OAAO,QAAQ,CACf,KAAK,IAAI;YAdd;GAgBG;GACA,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IACe;IACF;IACX,cAAc,OAAc,MAAS,EAAS;KAAE,QAAQ;KAAQ;KAAM,CAAC;cAEtE,MAAU,SACT,kBAAC,QAAD;KAAM,WAAW,EAAE;KAAO,eAAY;eAAtC,CACG,MAAgB,KAAA,KAAa,kBAAC,QAAD,EAAA,UAAO,GAAmB,CAAA,EACvD,EAAa,GAAS,EAAS,CAAC,KAAK,GAAG,MACvC,kBAAC,QAAD,EAAA,UAAe,GAAS,EAAb,EAAa,CACxB,CACG;;IAEK,CAAA;GACf,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;IAAG,GAAI;cAC3D,kBAAC,GAAD;KACE,WAAW,EAAE;KACb,wBACE,MAAc,OAGZ,kBAAC,OAAD;MAAK,WAAW,EAAE;gBAAQ;MAAiB,CAAA,GAF3C,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAO,MAAK;gBAAS;MAAiB,CAAA;eAM3D,MAAY,KAAA,IAMT,IALA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAAoC,IAAI,EAAE;MAAO,WAAW,EAAE;MAAW,YAAY,EAAE;gBACpF,EAAE;MACU,EAFI,OAAO,EAAE,MAAM,CAEnB,CACf;KAEK,CAAA;IACF,CAAA;GACD;;;AAQlB,SAAS,EAAc,EACrB,gBACA,cACA,iBACA,eAMC;CACD,IAAM,IAAQ,EAAW,EAAqB;AAY9C,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;YAAlB;GACE,kBAAC,GAAD;IACe;IACb,aAAW,KAAa,KAAA;IACxB,kBAAkB,KAZE,MAAuC;AAE/D,SADI,EAAE,QAAQ,WAAW,EAAE,YAAY,eACnC,GAAO,UAAU,EAAM,iBAAiB,cAAc,KAAM;KAChE,IAAM,IAAO,EAAE,cAAc;AAC7B,KAAI,MAAS,MAAI,IAAe,EAAK;QAQmB,KAAA;IACpD,CAAA;GACD;GACD,kBAAC,GAAD;IAAW,WAAW,EAAE;IAAY,cAAW;cAC7C,kBAAC,OAAD;KAAK,SAAQ;KAAY,eAAY;eACnC,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACxH,CAAA;IACI,CAAA;GACR;;;AAQV,SAAS,EACP,GACA,GACa;AAEb,QADI,MAAY,KAAA,IACT,EAAS,QAAQ,EAAS,CAAC,KAAK,MACrC,EAAyC,EAAE,GAAG,EAAE,MAAM,WAAW,EAClE,GAHiC,EAAQ,KAAK,MAAM,EAAE,MAAM;;AAY/D,SAAgB,EAAa,EAAE,cAAW,GAAG,KAA2B;AACtE,QAAO,kBAAC,GAAD;EAAgB,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAI,CAAA"}

package/dist/chunks/DataGrid-BVdDMZkQ.js

@@ -1,104 +0,0 @@
-import { t as e } from "./useReorderDragList-CSQGd7zQ.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { useMemo as i, useState as a } from "react";
-var o = {
-	grid: "_grid_1k5rv_1",
-	table: "_table_1k5rv_6",
-	sortButton: "_sortButton_1k5rv_32",
-	sortActive: "_sortActive_1k5rv_44",
-	empty: "_empty_1k5rv_46",
-	handleCol: "_handleCol_1k5rv_54",
-	handleCell: "_handleCell_1k5rv_55",
-	dragging: "_dragging_1k5rv_64",
-	dropBefore: "_dropBefore_1k5rv_66",
-	dropAfter: "_dropAfter_1k5rv_67"
-};
-//#endregion
-//#region src/components/DataGrid/DataGrid.tsx
-function s(s) {
-	let { rows: c, columns: l, defaultSort: u, onReorder: d, empty: f = "—", className: p } = s, [m, h] = a(u ?? null), g = i(() => {
-		if (!m) return [...c];
-		let e = l.find((e) => e.id === m.columnId);
-		if (!e) return [...c];
-		let t = e.accessor ?? ((t) => t[e.id]), n = m.direction === "asc" ? 1 : -1;
-		return [...c].sort((e, r) => {
-			let i = t(e), a = t(r);
-			return i == null && a == null ? 0 : i == null ? 1 : a == null ? -1 : i < a ? -1 * n : i > a ? 1 * n : 0;
-		});
-	}, [
-		c,
-		l,
-		m
-	]), _ = (e) => {
-		h((t) => !t || t.columnId !== e ? {
-			columnId: e,
-			direction: "asc"
-		} : t.direction === "asc" ? {
-			columnId: e,
-			direction: "desc"
-		} : null);
-	}, v = e({
-		items: g.map((e) => ({
-			id: e.id,
-			label: ""
-		})),
-		selectedIds: [],
-		onReorder: d ?? (() => {})
-	}), y = !!d;
-	return /* @__PURE__ */ n("div", {
-		className: [o.grid, p].filter(Boolean).join(" "),
-		children: /* @__PURE__ */ r("table", {
-			className: o.table,
-			children: [/* @__PURE__ */ n("thead", { children: /* @__PURE__ */ r("tr", { children: [y && /* @__PURE__ */ n("th", {
-				className: o.handleCol,
-				"aria-label": "drag"
-			}), l.map((e) => {
-				let i = e.sortable !== !1, a = m?.columnId === e.id, s = a ? m.direction === "asc" ? " ↑" : " ↓" : "";
-				return /* @__PURE__ */ n("th", {
-					className: [e.className, a ? o.sortActive : ""].filter(Boolean).join(" "),
-					"aria-sort": i ? a ? m.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
-					children: i ? /* @__PURE__ */ r("button", {
-						type: "button",
-						className: o.sortButton,
-						onClick: () => _(e.id),
-						children: [e.header, s]
-					}) : /* @__PURE__ */ r(t, { children: [e.header, s] })
-				}, e.id);
-			})] }) }), /* @__PURE__ */ r("tbody", {
-				ref: y ? v.containerProps.ref : void 0,
-				children: [g.length === 0 && /* @__PURE__ */ n("tr", { children: /* @__PURE__ */ n("td", {
-					colSpan: l.length + +!!y,
-					className: o.empty,
-					children: f
-				}) }), g.map((e, t) => {
-					let i = v.state.draggedIds?.includes(e.id) ?? !1, a = v.state.targetIndex;
-					return /* @__PURE__ */ r("tr", {
-						className: [
-							i && o.dragging,
-							a === t && o.dropBefore,
-							a === g.length && t === g.length - 1 && o.dropAfter
-						].filter(Boolean).join(" ") || void 0,
-						children: [y && /* @__PURE__ */ n("td", {
-							className: o.handleCell,
-							onPointerDown: (n) => v.rowProps(e.id, t).onPointerDown(n),
-							children: /* @__PURE__ */ n("span", {
-								"aria-hidden": "true",
-								children: "⋮⋮"
-							})
-						}), l.map((t) => {
-							let r = t.accessor ?? ((e) => e[t.id]), i = t.render ? t.render(e) : String(r(e) ?? "");
-							return /* @__PURE__ */ n("td", {
-								className: t.className,
-								children: i
-							}, t.id);
-						})]
-					}, e.id);
-				})]
-			})]
-		})
-	});
-}
-//#endregion
-export { s as t };
-
-//# sourceMappingURL=DataGrid-BVdDMZkQ.js.map

package/dist/chunks/DataGrid-BVdDMZkQ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataGrid-BVdDMZkQ.js","names":[],"sources":["../../src/components/DataGrid/DataGrid.module.css","../../src/components/DataGrid/DataGrid.tsx"],"sourcesContent":[".grid {\n  position: relative;\n  width: 100%;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--wzl-font-size-sm);\n}\n\n.table th,\n.table td {\n  text-align: left;\n  padding: 3px 6px;\n  vertical-align: middle;\n}\n.table tbody tr {\n  border-bottom: 1px solid var(--wzl-line-subtle);\n}\n\n.table th {\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-muted);\n  position: sticky;\n  top: 0;\n  background: var(--wzl-surface, #2a2018);\n  z-index: 1;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.sortButton {\n  all: unset;\n  cursor: pointer;\n  user-select: none;\n  display: block;\n  width: 100%;\n}\n.sortButton:hover { color: var(--wzl-fg, #e6e7e9); }\n.sortButton:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent, #7fb069));\n  outline-offset: -2px;\n}\n.sortActive { color: var(--wzl-fg, #e6e7e9); }\n\n.empty {\n  color: var(--wzl-fg-muted);\n  font-style: italic;\n  padding: 8px 0;\n  text-align: center;\n}\n\n/* Drag-handle column. */\n.handleCol { width: 14px; }\n.handleCell {\n  width: 14px;\n  cursor: grab;\n  color: var(--wzl-fg-muted);\n  user-select: none;\n  text-align: center;\n}\n.handleCell:active { cursor: grabbing; }\n\n.dragging { opacity: 0.4; }\n\n.dropBefore > td { box-shadow: inset 0 2px 0 0 var(--wzl-accent, #7fb069); }\n.dropAfter > td { box-shadow: inset 0 -2px 0 0 var(--wzl-accent, #7fb069); }\n","/**\n * Lightweight sortable data grid. Use for inspector tables — action\n * registries, route maps, telemetry rows. Intentionally narrow:\n *\n * - Sortable columns (click header to cycle asc → desc → none)\n * - Custom cell render via per-column `render`\n * - Optional drag handles for row reordering (when `onReorder` is set)\n *\n * Not: virtual scrolling, column resizing, multi-column sort, filtering,\n * inline editing. Reach for a real grid library when you need those.\n */\nimport { useMemo, useState } from 'react';\nimport type { ReactNode } from 'react';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport s from './DataGrid.module.css';\n\n/**\n * One column of a {@link DataGrid}. `id` doubles as the default property name\n * read off each row when no `accessor` is given.\n */\nexport interface DataGridColumn<Row> {\n  id: string;\n  header: ReactNode;\n  /** Pull a sortable value from the row. Defaults to `(row as any)[column.id]`. */\n  accessor?: (row: Row) => string | number | null | undefined;\n  /** Render the cell. Defaults to `String(accessor(row) ?? '')`. */\n  render?: (row: Row) => ReactNode;\n  /** Default true. Set false to suppress the sort affordance on this column. */\n  sortable?: boolean;\n  /** Optional CSS class on every <td> in this column. */\n  className?: string;\n}\n\n/** Props for {@link DataGrid}. */\nexport interface DataGridProps<Row extends { id: string }> {\n  rows: readonly Row[];\n  columns: readonly DataGridColumn<Row>[];\n  /** Initial sort. Omit for unsorted (rows render in input order). */\n  defaultSort?: { columnId: string; direction: 'asc' | 'desc' };\n  /** Enable drag handles in a leading column. Receives the reorder spec\n   *  (the existing `useReorderDragList` semantics — see weasel-ui). */\n  onReorder?: (ids: string[], targetIndex: number) => void;\n  /** Empty-state row text. Default `'—'`. */\n  empty?: ReactNode;\n  className?: string;\n}\n\ntype SortState = { columnId: string; direction: 'asc' | 'desc' } | null;\n\n/**\n * Sortable table for inspector-style data. Rows are keyed by `id`. Clicking a\n * sortable header cycles ascending, descending, unsorted; nullish values sort\n * last regardless of direction. Passing `onReorder` adds a leading drag-handle\n * column — note that the drag indices it reports are into the *sorted* row\n * order, not the input order.\n */\nexport function DataGrid<Row extends { id: string }>(props: DataGridProps<Row>) {\n  const { rows, columns, defaultSort, onReorder, empty = '—', className } = props;\n  const [sort, setSort] = useState<SortState>(defaultSort ?? null);\n\n  const sortedRows = useMemo(() => {\n    if (!sort) return [...rows];\n    const col = columns.find((c) => c.id === sort.columnId);\n    if (!col) return [...rows];\n    const get = col.accessor ?? ((row: Row) => (row as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n    const dir = sort.direction === 'asc' ? 1 : -1;\n    return [...rows].sort((a, b) => {\n      const av = get(a);\n      const bv = get(b);\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      if (av < bv) return -1 * dir;\n      if (av > bv) return 1 * dir;\n      return 0;\n    });\n  }, [rows, columns, sort]);\n\n  const cycleSort = (columnId: string) => {\n    setSort((cur) => {\n      if (!cur || cur.columnId !== columnId) return { columnId, direction: 'asc' };\n      if (cur.direction === 'asc') return { columnId, direction: 'desc' };\n      return null;\n    });\n  };\n\n  // Drag handles via useReorderDragList. Adapter: the hook expects\n  // `{ id, label }`-shaped items; we map our rows to that shape (label\n  // unused — the hook only uses id and locked).\n  const drag = useReorderDragList({\n    items: sortedRows.map((r) => ({ id: r.id, label: '' })),\n    selectedIds: [],\n    onReorder: onReorder ?? (() => {}),\n  });\n  const dragEnabled = !!onReorder;\n\n  const cls = [s.grid, className].filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n    >\n      <table className={s.table}>\n        <thead>\n          <tr>\n            {dragEnabled && <th className={s.handleCol} aria-label=\"drag\" />}\n            {columns.map((col) => {\n              const sortable = col.sortable !== false;\n              const active = sort?.columnId === col.id;\n              const indicator = active ? (sort.direction === 'asc' ? ' ↑' : ' ↓') : '';\n              return (\n                <th\n                  key={col.id}\n                  className={[col.className, active ? s.sortActive : ''].filter(Boolean).join(' ')}\n                  aria-sort={sortable ? (active ? (sort.direction === 'asc' ? 'ascending' : 'descending') : 'none') : undefined}\n                >\n                  {sortable ? (\n                    <button type=\"button\" className={s.sortButton} onClick={() => cycleSort(col.id)}>\n                      {col.header}{indicator}\n                    </button>\n                  ) : (\n                    <>{col.header}{indicator}</>\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        </thead>\n        <tbody ref={dragEnabled ? (drag.containerProps.ref as React.RefCallback<HTMLTableSectionElement>) : undefined}>\n          {sortedRows.length === 0 && (\n            <tr>\n              <td colSpan={columns.length + (dragEnabled ? 1 : 0)} className={s.empty}>\n                {empty}\n              </td>\n            </tr>\n          )}\n          {sortedRows.map((row, i) => {\n            const isDragging = drag.state.draggedIds?.includes(row.id) ?? false;\n            const target = drag.state.targetIndex;\n            const rowCls = [\n              isDragging && s.dragging,\n              target === i && s.dropBefore,\n              target === sortedRows.length && i === sortedRows.length - 1 && s.dropAfter,\n            ].filter(Boolean).join(' ');\n            return (\n              <tr key={row.id} className={rowCls || undefined}>\n                {dragEnabled && (\n                  <td\n                    className={s.handleCell}\n                    onPointerDown={(e) => drag.rowProps(row.id, i).onPointerDown(e)}\n                  >\n                    <span aria-hidden=\"true\">⋮⋮</span>\n                  </td>\n                )}\n                {columns.map((col) => {\n                  const get = col.accessor ?? ((r: Row) => (r as unknown as Record<string, unknown>)[col.id] as string | number | null | undefined);\n                  const content = col.render ? col.render(row) : String(get(row) ?? '');\n                  return (\n                    <td key={col.id} className={col.className}>\n                      {content}\n                    </td>\n                  );\n                })}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/Dialog-DuOzsR2g.js

@@ -1,61 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Dialog as i, Heading as a, Modal as o, ModalOverlay as s } from "react-aria-components";
-var c = {
-	overlay: "_overlay_1og89_1",
-	modal: "_modal_1og89_29",
-	dialog: "_dialog_1og89_43",
-	header: "_header_1og89_51",
-	title: "_title_1og89_60",
-	close: "_close_1og89_68",
-	body: "_body_1og89_90",
-	footer: "_footer_1og89_97"
-};
-//#endregion
-//#region src/components/Dialog/Dialog.tsx
-function l(l) {
-	let { title: u, showCloseButton: d, children: f, footer: p, role: m = "dialog", className: h, isOpen: g, onOpenChange: _, portalContainer: v, ...y } = l, b = d ?? !!_, { anchor: x, portalProps: S } = e(v);
-	return /* @__PURE__ */ r(t, { children: [x, /* @__PURE__ */ n(s, {
-		...y,
-		isOpen: g,
-		onOpenChange: _,
-		className: c.overlay,
-		"data-weasel-overlay": "",
-		...S,
-		children: /* @__PURE__ */ n(o, {
-			className: [c.modal, h].filter(Boolean).join(" "),
-			children: /* @__PURE__ */ n(i, {
-				role: m,
-				className: c.dialog,
-				children: ({ close: e }) => /* @__PURE__ */ r(t, { children: [
-					(u !== void 0 || b) && /* @__PURE__ */ r("header", {
-						className: c.header,
-						children: [u !== void 0 && /* @__PURE__ */ n(a, {
-							slot: "title",
-							className: c.title,
-							children: u
-						}), b && /* @__PURE__ */ n("button", {
-							type: "button",
-							className: c.close,
-							onClick: e,
-							"aria-label": "Close dialog",
-							children: "×"
-						})]
-					}),
-					/* @__PURE__ */ n("div", {
-						className: c.body,
-						children: f
-					}),
-					p !== void 0 && /* @__PURE__ */ n("footer", {
-						className: c.footer,
-						children: p
-					})
-				] })
-			})
-		})
-	})] });
-}
-//#endregion
-export { l as t };
-
-//# sourceMappingURL=Dialog-DuOzsR2g.js.map

package/dist/chunks/Dialog-DuOzsR2g.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Dialog-DuOzsR2g.js","names":[],"sources":["../../src/components/Dialog/Dialog.module.css","../../src/components/Dialog/Dialog.tsx"],"sourcesContent":[".overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  opacity: 0;\n  transition: opacity var(--wzl-motion-fast);\n}\n\n.overlay[data-entering] {\n  opacity: 0;\n}\n\n.overlay[data-entering][data-rac] {\n  opacity: 1;\n}\n\n.overlay[data-exiting] {\n  opacity: 0;\n}\n\n.overlay[data-rac]:not([data-entering]):not([data-exiting]) {\n  opacity: 1;\n}\n\n.modal {\n  background: var(--wzl-surface);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  max-width: min(900px, calc(100vw - 32px));\n  max-height: calc(100vh - 32px);\n  display: flex;\n  flex-direction: column;\n  outline: none;\n}\n\n.dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  flex: 1;\n  outline: none;\n}\n\n.header {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--wzl-border);\n  flex: 0 0 auto;\n}\n\n.title {\n  flex: 1;\n  margin: 0;\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n}\n\n.close {\n  flex: 0 0 auto;\n  width: 22px;\n  height: 22px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-lg);\n  line-height: 1;\n}\n\n.close:hover {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.body {\n  flex: 1;\n  min-height: 0;\n  overflow: auto;\n  padding: 16px;\n}\n\n.footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid var(--wzl-border);\n  flex: 0 0 auto;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Modal as RACModal,\n  ModalOverlay,\n  Dialog as RACDialog,\n  Heading,\n  type ModalOverlayProps,\n  type DialogProps as RACDialogProps,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps, type WithoutPortalTarget } from '../../overlays/portalHost';\nimport s from './Dialog.module.css';\n\n/** Props for {@link Dialog}, on top of React Aria's `ModalOverlay` props. */\nexport type DialogProps = Omit<\n  WithoutPortalTarget<ModalOverlayProps>,\n  'children' | 'className'\n> &\n  OverlayPortalProps & {\n    /** Heading rendered in the dialog's default header. Omit when supplying\n     *  a custom `header` slot via children. */\n    title?: ReactNode;\n    /** Show the built-in close button. Defaults to true when `onOpenChange`\n     *  is wired so the user has an escape hatch. */\n    showCloseButton?: boolean;\n    /** Body content. */\n    children?: ReactNode;\n    /** Footer slot — typically action buttons. */\n    footer?: ReactNode;\n    /** ARIA role. Defaults to `dialog`. Use `alertdialog` for confirms. */\n    role?: RACDialogProps['role'];\n    /** Class applied to the modal box (inside the overlay). */\n    className?: string;\n  };\n\n/**\n * Modal dialog wrapping React Aria. Supplies a default header (title +\n * close), scrollable body, and footer slot. Pass `isOpen` + `onOpenChange`\n * for controlled visibility, or omit both and use a `<DialogTrigger>` from\n * `react-aria-components` upstream of this component.\n *\n * Escape, click-outside, focus trap, and scroll lock all come from the\n * underlying primitives.\n */\nexport function Dialog(props: DialogProps) {\n  const {\n    title,\n    showCloseButton,\n    children,\n    footer,\n    role = 'dialog',\n    className,\n    isOpen,\n    onOpenChange,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const showClose = showCloseButton ?? Boolean(onOpenChange);\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <>\n      {anchor}\n      <ModalOverlay\n        {...rest}\n        isOpen={isOpen}\n        onOpenChange={onOpenChange}\n        className={s.overlay}\n        data-weasel-overlay=\"\"\n        {...portalProps}\n      >\n        <RACModal className={[s.modal, className].filter(Boolean).join(' ')}>\n          <RACDialog role={role} className={s.dialog}>\n            {({ close }) => (\n              <>\n                {(title !== undefined || showClose) && (\n                  <header className={s.header}>\n                    {title !== undefined && (\n                      <Heading slot=\"title\" className={s.title}>{title}</Heading>\n                    )}\n                    {showClose && (\n                      <button\n                        type=\"button\"\n                        className={s.close}\n                        onClick={close}\n                        aria-label=\"Close dialog\"\n                      >\n                        ×\n                      </button>\n                    )}\n                  </header>\n                )}\n                <div className={s.body}>{children}</div>\n                {footer !== undefined && <footer className={s.footer}>{footer}</footer>}\n              </>\n            )}\n          </RACDialog>\n        </RACModal>\n      </ModalOverlay>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC2CA,SAAgB,EAAO,GAAoB;CACzC,IAAM,EACJ,UACA,oBACA,aACA,WACA,UAAO,UACP,cACA,WACA,iBACA,oBACA,GAAG,MACD,GAEE,IAAY,KAAmB,EAAQ,GACvC,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AAEjE,QACE,kBAAA,GAAA,EAAA,UAAA,CACG,GACD,kBAAC,GAAD;EACE,GAAI;EACI;EACM;EACd,WAAW,EAAE;EACb,uBAAoB;EACpB,GAAI;YAEJ,kBAAC,GAAD;GAAU,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;aACjE,kBAAC,GAAD;IAAiB;IAAM,WAAW,EAAE;eAChC,EAAE,eACF,kBAAA,GAAA,EAAA,UAAA;MACI,MAAU,KAAA,KAAa,MACvB,kBAAC,UAAD;MAAQ,WAAW,EAAE;gBAArB,CACG,MAAU,KAAA,KACT,kBAAC,GAAD;OAAS,MAAK;OAAQ,WAAW,EAAE;iBAAQ;OAAgB,CAAA,EAE5D,KACC,kBAAC,UAAD;OACE,MAAK;OACL,WAAW,EAAE;OACb,SAAS;OACT,cAAW;iBACZ;OAEQ,CAAA,CAEJ;;KAEX,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAO;MAAe,CAAA;KACvC,MAAW,KAAA,KAAa,kBAAC,UAAD;MAAQ,WAAW,EAAE;gBAAS;MAAgB,CAAA;KACtE,EAAA,CAAA;IAEK,CAAA;GACH,CAAA;EACE,CAAA,CACd,EAAA,CAAA"}