@weasel-js/ui 1.5.2 → 1.6.0

package/dist/chunks/ItemList-B9zYb0GE.js

@@ -1,42 +0,0 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-var r = {
-	list: "_list_1b7h5_4",
-	row: "_row_1b7h5_14",
-	label: "_label_1b7h5_33",
-	selected: "_selected_1b7h5_39",
-	muted: "_muted_1b7h5_46",
-	empty: "_empty_1b7h5_50"
-}, i = n(function({ rows: n, empty: i, className: a, overlay: o, containerProps: s }, c) {
-	let l = [r.list, a].filter(Boolean).join(" ");
-	return n.length === 0 ? /* @__PURE__ */ e("div", {
-		className: l,
-		ref: c,
-		...s,
-		children: /* @__PURE__ */ e("div", {
-			className: r.empty,
-			children: i ?? "—"
-		})
-	}) : /* @__PURE__ */ t("div", {
-		className: l,
-		ref: c,
-		...s,
-		children: [o, n.map((n) => /* @__PURE__ */ t("div", {
-			className: [
-				r.row,
-				n.selected && r.selected,
-				n.muted && r.muted,
-				n.className
-			].filter(Boolean).join(" "),
-			...n.rowProps,
-			children: [n.leading, /* @__PURE__ */ e("span", {
-				className: r.label,
-				children: n.label
-			})]
-		}, n.id))]
-	});
-});
-//#endregion
-export { i as t };
-
-//# sourceMappingURL=ItemList-B9zYb0GE.js.map

package/dist/chunks/ItemList-B9zYb0GE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ItemList-B9zYb0GE.js","names":[],"sources":["../../src/components/ItemList/ItemList.module.css","../../src/components/ItemList/ItemList.tsx"],"sourcesContent":["/* One height and one inset for every sidebar list. A panel stacking two of\n   them has to have their rows line up, which is what a private copy of this\n   file per list stopped happening. */\n.list {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  user-select: none;\n  -webkit-user-select: none;\n  position: relative;\n  width: 100%;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n  padding: 0 var(--wzl-space-4);\n  height: var(--wzl-control-h);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  background: transparent;\n  border-radius: var(--wzl-radius-sm);\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.row:hover {\n  background: var(--wzl-surface);\n}\n\n.label {\n  flex: 1 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.selected,\n.selected:hover {\n  background: var(--wzl-border);\n  color: var(--wzl-fg);\n}\n\n/* Present but not in effect. */\n.muted {\n  color: var(--wzl-fg-subtle);\n}\n\n.empty {\n  padding: var(--wzl-space-6) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-style: italic;\n}\n","/**\n * The row chrome behind a sidebar list — layers, history, anything that is a\n * flat column of selectable rows in a panel.\n *\n * It owns the container, the row box and the empty state, and nothing else:\n * what a row *means* stays with the consumer. History dims its redo entries\n * and rules a line under the current one; a layer list drags to reorder and\n * leads each row with a swatch. Both reach that through `className` and\n * `rowProps` rather than through options here, so this does not grow a flag\n * per consumer.\n *\n * Rows are one height and one inset for every list, which is the point: two\n * panels stacked in the same sidebar have to agree, and they did not while\n * each owned a private copy of the same CSS.\n */\nimport { forwardRef, type HTMLAttributes, type ReactNode, type Ref } from 'react';\nimport s from './ItemList.module.css';\n\n/** One row. `id` is the React key. */\nexport interface ItemListRow {\n  id: string;\n  label: ReactNode;\n  /** Fixed-size content before the label — a color swatch, a checkbox. */\n  leading?: ReactNode;\n  /** The row the list considers current. */\n  selected?: boolean;\n  /** Present but not in effect — history's redo entries. */\n  muted?: boolean;\n  /** Consumer classes for states this component has no opinion about. */\n  className?: string;\n  /** Handlers and data attributes for this row's element. `data-*` is\n   *  spelled out because `HTMLAttributes` does not admit it, and every\n   *  consumer here marks its rows up with one. */\n  rowProps?: HTMLAttributes<HTMLDivElement> & Record<`data-${string}`, unknown>;\n}\n\nexport interface ItemListProps {\n  rows: readonly ItemListRow[];\n  /** Shown in place of the rows when there are none. */\n  empty?: ReactNode;\n  className?: string;\n  /** Rendered inside the container above the rows — a drop indicator. */\n  overlay?: ReactNode;\n  /** Spread onto the container: pointer handlers for a drag, `aria-label`. */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n}\n\nexport const ItemList = forwardRef(function ItemList(\n  { rows, empty, className, overlay, containerProps }: ItemListProps,\n  ref: Ref<HTMLDivElement>,\n) {\n  const cls = [s.list, className].filter(Boolean).join(' ');\n  if (rows.length === 0) {\n    return (\n      <div className={cls} ref={ref} {...containerProps}>\n        <div className={s.empty}>{empty ?? '—'}</div>\n      </div>\n    );\n  }\n  return (\n    <div className={cls} ref={ref} {...containerProps}>\n      {overlay}\n      {rows.map((row) => (\n        <div\n          key={row.id}\n          className={[\n            s.row,\n            row.selected && s.selected,\n            row.muted && s.muted,\n            row.className,\n          ].filter(Boolean).join(' ')}\n          {...row.rowProps}\n        >\n          {row.leading}\n          <span className={s.label}>{row.label}</span>\n        </div>\n      ))}\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;GC+Ca,IAAW,EAAW,SACjC,EAAE,SAAM,UAAO,cAAW,YAAS,qBACnC,GACA;CACA,IAAM,IAAM,CAAC,EAAE,MAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;AAQzD,QAPI,EAAK,WAAW,IAEhB,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YACjC,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAQ,KAAS;GAAU,CAAA;EACzC,CAAA,GAIR,kBAAC,OAAD;EAAK,WAAW;EAAU;EAAK,GAAI;YAAnC,CACG,GACA,EAAK,KAAK,MACT,kBAAC,OAAD;GAEE,WAAW;IACT,EAAE;IACF,EAAI,YAAY,EAAE;IAClB,EAAI,SAAS,EAAE;IACf,EAAI;IACL,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3B,GAAI,EAAI;aARV,CAUG,EAAI,SACL,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAI;IAAa,CAAA,CACxC;KAXC,EAAI,GAWL,CACN,CACE;;EAER"}

package/dist/chunks/Keycaps-DunVpejA.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Keycaps-DunVpejA.js","names":[],"sources":["../../src/components/Keycaps/Keycaps.module.css","../../src/components/Keycaps/Keycap.tsx","../../src/components/Keycaps/Keycaps.tsx","../../src/components/Keycaps/keySpecsFromMods.ts"],"sourcesContent":["/* Keystroke \"key cap\" styling — each modifier and key in its own bordered chip. */\n.keys,\n.key {\n  --key-h: var(--wzl-control-h-xs);\n}\n\n.keys {\n  display: inline-flex;\n  gap: 3px;\n  /* Bottom-align so chips with text labels and chips with icon glyphs\n     (arrows, modifier symbols) line up at the same bottom edge. Baseline\n     drifts because text baselines sit above icon centers. */\n  align-items: flex-end;\n  /* When this whole sequence sits inline in surrounding text (e.g.\n     \"Press <KeySequence> to confirm.\"), the row anchors to the\n     surrounding line's bottom edge, not its baseline. */\n  vertical-align: bottom;\n  flex-wrap: wrap;\n}\n\n.keysEmpty {\n  color: var(--wzl-fg-muted);\n}\n\n.sep {\n  /* A key's height, so the glyph centers on the keys rather than riding the\n     row's bottom edge. */\n  display: inline-flex;\n  align-items: center;\n  height: var(--key-h);\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n}\n\n.key {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  height: var(--key-h);\n  padding: 0 var(--wzl-space-2);\n  /* Light face, slightly-darker-than-face border, dark glyph — reads as\n     a real keycap rather than a recessed slot in the panel. */\n  background: var(--wzl-fg, #e6e7e9);\n  border: 1px solid #25272c;\n  border-bottom-width: 2px;\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-surface);\n  /* Keycaps are a deliberate exception to the site theme — the design-\n     system UI font (often a display face like Oswald) is wrong for\n     keyboard chips. Use a neutral sans stack so labels read like real\n     key legends. Consumers wanting a specific face per chip pass the\n     `font` prop on KeyCap. */\n  font-family: ui-sans-serif, system-ui, sans-serif;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  line-height: 1;\n}\n\n/* Default chip is square — letters, digits, and single glyphs (⎋ ⌫ ↑ etc.)\n   sit in a uniform key-cap box. */\n.key[data-kind='square'] {\n  width: var(--key-h);\n  padding: 0;\n}\n\n/* Modifiers (⌘ ⇪ ⌥ ⌃) are wider to match the visual weight of how they\n   appear on a real keyboard — and to differentiate them from the keys\n   they modify in a stack. */\n.key[data-kind='modifier'] {\n  min-width: 26px;\n  padding: 0 var(--wzl-space-3);\n}\n\n/* Tab / Enter / Space — actual wide keys on a real keyboard. */\n.key[data-kind='wide'] {\n  min-width: 32px;\n  padding: 0 var(--wzl-space-4);\n}\n\n/* Optional/inverted (default variant): face flips to dark; legend drops\n   to 60% opacity; dotted border drops to 40% opacity. Three soft cues\n   stacked for \"may be held but isn't required.\" */\n.key[data-inverted] {\n  background: var(--wzl-surface);\n  color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 60%, transparent);\n  border-style: dotted;\n  border-color: color-mix(in srgb, var(--wzl-fg, #e6e7e9) 40%, transparent);\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n\n/* Minimal variant — no fill, borders and legend follow currentColor.\n   Useful inline in colored prose / next to colored badges where the\n   chip should take the surrounding text color. */\n.key[data-variant='minimal'] {\n  background: transparent;\n  border-color: currentColor;\n  color: currentColor;\n}\n\n/* Optional + minimal: dotted border at full currentColor, legend at full\n   currentColor. The dotted pattern alone carries the \"optional\" cue here\n   — minimal's whole point is to defer color to the surrounding context,\n   so dimming would fight that. (Default variant uses graded opacity as a\n   stacked cue; minimal keeps it crisp.) */\n.key[data-variant='minimal'][data-inverted] {\n  border-style: dotted;\n  border-color: currentColor;\n  color: currentColor;\n  border-width: 1.5px;\n  border-bottom-width: 1.5px;\n}\n","import type { CSSProperties } from 'react';\nimport s from './Keycaps.module.css';\n\nconst MODIFIER_GLYPHS = new Set(['⌘', '⇪', '⌥', '⌃', '⇧']);\nconst WIDE_GLYPHS = new Set(['⇥', '↵', '␣']);\n\n/**\n * Width class of a keycap: a modifier glyph, a multi-character legend that\n * needs a wider chip, or a single character in a square one.\n */\nexport type KeycapKind = 'modifier' | 'wide' | 'square';\n\n/**\n * Picks the chip width for a legend — modifier glyphs and anything longer\n * than one character get the wider forms.\n */\nexport function inferKeycapKind(label: string): KeycapKind {\n  if (MODIFIER_GLYPHS.has(label)) return 'modifier';\n  if (WIDE_GLYPHS.has(label)) return 'wide';\n  if (label.length > 1) return 'wide';\n  return 'square';\n}\n\n/** Visual style of a keycap chip. */\nexport type KeyCapVariant = 'default' | 'minimal';\n\n/** Props for {@link KeyCap}. */\nexport interface KeyCapProps {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** Marks the chip as not required to trigger the action. In the default\n   *  variant the chip face inverts (dark face / light glyph) for\n   *  emphasis. In the `'minimal'` variant the chip's border becomes\n   *  dotted to read as \"may be held, but isn't required.\" */\n  inverted?: boolean;\n  /** Visual style. `'default'` (default) renders a filled chip; `'minimal'`\n   *  renders an unfilled chip whose border and legend are `currentColor`\n   *  — useful inline in colored prose / next to colored badges where the\n   *  chip should take the surrounding text color. */\n  variant?: KeyCapVariant;\n  className?: string;\n  /** Optional inline style. Useful for one-off width overrides (e.g.\n   *  building a keyboard-layout where the space bar spans several\n   *  standard-key widths). The component sets no inline styles of its\n   *  own — everything else comes from the CSS module. */\n  style?: CSSProperties;\n  /** Override the chip's font-family. Accepts any CSS font-family\n   *  string. When omitted, the chip inherits from the design-system\n   *  UI font token (`--wzl-font-ui`). Useful for one-off cases where\n   *  a different face is desired — though the canonical move is to\n   *  override the CSS variable at the consumer's scope, not the prop. */\n  font?: string;\n}\n\n/** Single bordered keycap chip for one glyph (modifier or key). Use\n *  `KeySequence` to render a full shortcut. */\nexport function KeyCap({ label, inverted = false, variant = 'default', className, style, font }: KeyCapProps) {\n  const resolvedStyle = font ? { ...style, fontFamily: font } : style;\n  return (\n    <kbd\n      className={[s.key, className].filter(Boolean).join(' ')}\n      data-kind={inferKeycapKind(label)}\n      data-variant={variant === 'default' ? undefined : variant}\n      data-inverted={inverted || undefined}\n      style={resolvedStyle}\n    >\n      {label}\n    </kbd>\n  );\n}\n","import { Fragment } from 'react';\nimport s from './Keycaps.module.css';\nimport { KeyCap, inferKeycapKind, type KeyCapVariant } from './Keycap';\n\n/** One key in a shortcut. */\nexport interface KeySpec {\n  /** Glyph rendered in the chip (modifier or key). */\n  label: string;\n  /** When true, the chip renders inverted to mark it as not required to\n   *  trigger the action (e.g. an optional modifier). Defaults to false. */\n  optional?: boolean;\n}\n\n/** Props for {@link KeySequence}. */\nexport interface KeySequenceProps {\n  /** Keys to render. `undefined` or empty renders a muted em-dash.\n   *  Modifiers are always rendered first regardless of input order; relative\n   *  order within each group is preserved. */\n  keys: readonly KeySpec[] | undefined;\n  /** Character inserted between the trailing modifier chip and the first\n   *  non-modifier chip (e.g. `'+'` renders `⌘ + K`). `null` or `''`\n   *  suppresses it. Defaults to `'+'`. */\n  separator?: string | null;\n  /** Forwarded to every `KeyCap` in the sequence. `'minimal'` renders\n   *  unfilled chips whose border + legend are `currentColor`. */\n  variant?: KeyCapVariant;\n  /** Forwarded to every `KeyCap` in the sequence. Overrides the design-\n   *  system UI font for that chip only. */\n  font?: string;\n  className?: string;\n}\n\n/** Renders a shortcut as a row of `KeyCap` chips, one per key. Optional\n *  keys render inverted to distinguish them from required ones. */\nexport function KeySequence({ keys, separator = '+', variant = 'default', font, className }: KeySequenceProps) {\n  if (!keys || keys.length === 0) {\n    return <span className={[s.keysEmpty, className].filter(Boolean).join(' ')}>—</span>;\n  }\n  const ordered = keys\n    .map((k, i) => ({ k, i }))\n    .sort((a, b) => {\n      const am = inferKeycapKind(a.k.label) === 'modifier' ? 0 : 1;\n      const bm = inferKeycapKind(b.k.label) === 'modifier' ? 0 : 1;\n      return am - bm || a.i - b.i;\n    })\n    .map(({ k }) => k);\n  const sepIdx = ordered.findIndex((k) => inferKeycapKind(k.label) !== 'modifier');\n  const showSep = !!separator && sepIdx > 0 && sepIdx < ordered.length;\n  return (\n    <span className={[s.keys, className].filter(Boolean).join(' ')}>\n      {ordered.map((k, i) => (\n        <Fragment key={i}>\n          {showSep && i === sepIdx ? <span className={s.sep}>{separator}</span> : null}\n          <KeyCap label={k.label} inverted={k.optional ?? false} variant={variant} font={font} />\n        </Fragment>\n      ))}\n    </span>\n  );\n}\n","import type { KeySpec } from './Keycaps';\n\n/** Logical modifier name. Matches the kit's `ModifierKey` in shape — kept as a\n *  local type so `weasel-ui` stays independent of `@weasel-js/core`. */\nexport type LogicalMod = 'mod' | 'shift' | 'alt' | 'ctrl' | 'meta';\n\n/** Detected (or overridden) platform. `'mod'` resolves to ⌘ on macOS,\n *  Ctrl on Windows / Linux. */\nexport type Platform = 'macos' | 'windows' | 'linux';\n\n/** Visual form of a modifier or named-key label.\n *\n *  - `'auto'` (default): the per-entry, per-platform default — whatever\n *    label is actually printed on the physical key. macOS keys show the\n *    Apple glyphs (⌘ ⌥ ⌃ ⇧ ⎋ ↵ ⇥). Windows keys mostly show text\n *    (Ctrl, Alt, Shift) BUT the Win key shows its logo (⊞) and the\n *    context-menu key shows ▤. Linux mirrors Windows with Super (⊞).\n *  - `'symbol'` forces the Apple-style glyph everywhere a symbolic form\n *    exists. Entries without a widely-recognized symbol still fall\n *    back to text.\n *  - `'text'` always spells the label out (Cmd / Option / Esc / Enter). */\nexport type LegendStyle = 'auto' | 'symbol' | 'text';\n\n/** A modifier to render, named platform-independently. */\nexport interface LogicalModSpec {\n  name: LogicalMod;\n  /** Marks this modifier as optional (may be held but isn't required).\n   *  Forwarded as the resulting `KeySpec.optional`. */\n  optional?: boolean;\n}\n\n/** Options for {@link keySpecsFromMods}. */\nexport interface KeySpecsFromModsOptions {\n  /** Override OS detection. Defaults to the detected platform, or\n   *  `'macos'` when detection is unavailable (e.g. in tests, or when\n   *  `navigator` is missing). */\n  platform?: Platform;\n  /** Defaults to `'auto'` (symbol on macOS, text everywhere else). Pass\n   *  `'symbol'` or `'text'` to force a specific style regardless of\n   *  platform. */\n  legend?: LegendStyle;\n}\n\nconst MOD_BY_PLATFORM: Record<LogicalMod, Record<Platform, Record<LegendStyle, string>>> = {\n  mod: {\n    macos:   { auto: '⌘',    symbol: '⌘',    text: 'Cmd' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  shift: {\n    macos:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    windows: { auto: '⇧', symbol: '⇧', text: 'Shift' },\n    linux:   { auto: '⇧', symbol: '⇧', text: 'Shift' },\n  },\n  alt: {\n    macos:   { auto: '⌥',   symbol: '⌥',   text: 'Option' },\n    windows: { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n    linux:   { auto: 'Alt', symbol: 'Alt', text: 'Alt' },\n  },\n  ctrl: {\n    macos:   { auto: '⌃',    symbol: '⌃',    text: 'Control' },\n    windows: { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n    linux:   { auto: 'Ctrl', symbol: 'Ctrl', text: 'Ctrl' },\n  },\n  // Windows/Linux Meta has a recognized symbol on the physical key (⊞ Win\n  // logo / Super logo), so `auto` shows it. Use `text` for Win / Super.\n  meta: {\n    macos:   { auto: '⌘', symbol: '⌘', text: 'Cmd' },\n    windows: { auto: '⊞', symbol: '⊞', text: 'Win' },\n    linux:   { auto: '⊞', symbol: '⊞', text: 'Super' },\n  },\n};\n\n/** Detect the user's OS from the browser environment. UA sniffing — not\n *  100% reliable, but adequate for picking a modifier-glyph convention.\n *  Falls back to `'macos'` (matches the kit's docs convention) when\n *  `navigator` is unavailable. */\nexport function detectPlatform(): Platform {\n  if (typeof navigator === 'undefined') return 'macos';\n  // Prefer the modern userAgentData when available (Chromium-only today).\n  const uaData = (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData;\n  const raw = (uaData?.platform ?? navigator.userAgent ?? '').toLowerCase();\n  if (raw.includes('mac') || raw.includes('darwin') || raw.includes('iphone') || raw.includes('ipad')) return 'macos';\n  if (raw.includes('win')) return 'windows';\n  if (raw.includes('linux') || raw.includes('x11')) return 'linux';\n  return 'macos';\n}\n\n/**\n * Map a list of **logical** modifiers (`'mod'`, `'shift'`, …) to **visual**\n * `KeySpec`s appropriate for the current platform.\n *\n * The kit-side gesture grammar uses logical names so the same route reads\n * correctly on every OS — `'mod'` means \"Cmd on Mac, Ctrl on Win/Linux\".\n * `KeySequence` is purely visual and renders the labels you give it; this\n * helper is the bridge.\n *\n * ```ts\n * <KeySequence\n *   keys={keySpecsFromMods([{ name: 'mod' }, { name: 'shift', optional: true }])}\n * />\n * ```\n *\n * On a Mac: renders `⌘ ⇧`. On Windows: renders `Ctrl Shift`. Pass an\n * explicit `platform` to override detection (e.g. for docs that always\n * show the macOS form). Pass `legend: 'text'` to force \"Cmd\" over \"⌘\"\n * even on macOS.\n */\nexport function keySpecsFromMods(\n  mods: readonly LogicalModSpec[],\n  opts: KeySpecsFromModsOptions = {},\n): readonly KeySpec[] {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  return mods.map((m) => {\n    const label = MOD_BY_PLATFORM[m.name][platform][legend];\n    return m.optional ? { label, optional: true } : { label };\n  });\n}\n\n/** Per-platform × per-legend table for named, non-modifier keys. `auto`\n *  is whatever's printed on the physical key for that platform. Arrows\n *  are universal symbols on every platform. */\nconst NAMED_KEY: Record<string, Record<Platform, Record<LegendStyle, string>>> = {\n  Escape:      { macos: { auto: '⎋',    symbol: '⎋',        text: 'Esc' },       windows: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' },       linux: { auto: 'Esc',       symbol: 'Esc',       text: 'Esc' } },\n  Enter:       { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Return:      { macos: { auto: '↵',    symbol: '↵',        text: 'Return' },    windows: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' },     linux: { auto: 'Enter',     symbol: 'Enter',     text: 'Enter' } },\n  Tab:         { macos: { auto: '⇥',    symbol: '⇥',        text: 'Tab' },       windows: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' },       linux: { auto: 'Tab',       symbol: 'Tab',       text: 'Tab' } },\n  Space:       { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  ' ':         { macos: { auto: '␣',    symbol: '␣',        text: 'Space' },     windows: { auto: 'Space',     symbol: 'Space',     text: 'Space' },     linux: { auto: 'Space',     symbol: 'Space',     text: 'Space' } },\n  Backspace:   { macos: { auto: '⌫',    symbol: '⌫',        text: 'Backspace' }, windows: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' }, linux: { auto: 'Backspace', symbol: 'Backspace', text: 'Backspace' } },\n  Delete:      { macos: { auto: '⌦',    symbol: '⌦',        text: 'Delete' },    windows: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' },    linux: { auto: 'Delete',    symbol: 'Delete',    text: 'Delete' } },\n  // Context-menu key (the right-Ctrl-area key on Windows / Linux keyboards\n  // with a ▤ icon). Mac has no equivalent; falls back to text 'Menu'.\n  ContextMenu: { macos: { auto: 'Menu', symbol: 'Menu',     text: 'Menu' },      windows: { auto: '▤',         symbol: '▤',         text: 'Menu' },      linux: { auto: '▤',         symbol: '▤',         text: 'Menu' } },\n  ArrowUp:     { macos: { auto: '↑',    symbol: '↑',        text: '↑' },         windows: { auto: '↑',         symbol: '↑',         text: '↑' },         linux: { auto: '↑',         symbol: '↑',         text: '↑' } },\n  ArrowDown:   { macos: { auto: '↓',    symbol: '↓',        text: '↓' },         windows: { auto: '↓',         symbol: '↓',         text: '↓' },         linux: { auto: '↓',         symbol: '↓',         text: '↓' } },\n  ArrowLeft:   { macos: { auto: '←',    symbol: '←',        text: '←' },         windows: { auto: '←',         symbol: '←',         text: '←' },         linux: { auto: '←',         symbol: '←',         text: '←' } },\n  ArrowRight:  { macos: { auto: '→',    symbol: '→',        text: '→' },         windows: { auto: '→',         symbol: '→',         text: '→' },         linux: { auto: '→',         symbol: '→',         text: '→' } },\n};\n\n/**\n * Render a raw `KeyboardEvent.key` value as a platform-appropriate\n * `KeySpec`. Named non-modifier keys (Esc, Enter, Tab, Space, Backspace,\n * Delete, arrows) get the platform's conventional form. Letter / digit /\n * other keys pass through upper-cased.\n *\n * ```ts\n * keySpecFromKey('Escape', { platform: 'macos' })   // { label: '⎋' }\n * keySpecFromKey('Escape', { platform: 'windows' }) // { label: 'Esc' }\n * keySpecFromKey('p')                               // { label: 'P' }\n * ```\n *\n * Symbol mode is only meaningful on macOS — Windows / Linux keyboards\n * print the text form on the physical key, so symbol mode there falls\n * back to text.\n */\nexport function keySpecFromKey(\n  raw: string,\n  opts: KeySpecsFromModsOptions & { optional?: boolean } = {},\n): KeySpec {\n  const platform = opts.platform ?? detectPlatform();\n  const legend = opts.legend ?? 'auto';\n  const entry = NAMED_KEY[raw];\n  const label = entry ? entry[platform][legend] : raw.length === 1 ? raw.toUpperCase() : raw;\n  return opts.optional ? { label, optional: true } : { label };\n}\n"],"mappings":"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"}

package/dist/chunks/LayerStack-CfQ6GsRz.js

@@ -1,142 +0,0 @@
-import { t as e } from "./dlog-CMYiRF3Q.js";
-import { t } from "./useReorderDragList-CSQGd7zQ.js";
-import { t as n } from "./DragHandleGlyph-CppAz4_8.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useEffect as a, useState as o } from "react";
-var s = {
-	stack: "_stack_us2jl_4",
-	head: "_head_us2jl_14",
-	title: "_title_us2jl_21",
-	palette: "_palette_us2jl_29",
-	add: "_add_us2jl_34",
-	list: "_list_us2jl_51",
-	dropHint: "_dropHint_us2jl_56",
-	empty: "_empty_us2jl_62",
-	card: "_card_us2jl_69",
-	cardAccented: "_cardAccented_us2jl_76",
-	cardDragging: "_cardDragging_us2jl_84",
-	cardHead: "_cardHead_us2jl_88",
-	handle: "_handle_us2jl_95",
-	kind: "_kind_us2jl_121",
-	primary: "_primary_us2jl_122",
-	remove: "_remove_us2jl_136",
-	cardBody: "_cardBody_us2jl_151"
-};
-//#endregion
-//#region src/components/LayerStack/LayerStack.tsx
-function c({ className: c, title: l, items: u, paletteKinds: d, onAdd: f, onRemove: p, onReorder: m, onPrimaryChange: h, renderBody: g, emptyLabel: _, hideHead: v }) {
-	let [y, b] = o(() => new Set(u.filter((e) => e.defaultExpanded !== !1).map((e) => e.id)));
-	a(() => {
-		b((e) => {
-			let t = null;
-			for (let n of u) n.defaultExpanded !== !1 && (e.has(n.id) || (t === null && (t = new Set(e)), t.add(n.id)));
-			return t ?? e;
-		});
-	}, [u]);
-	let x = t({
-		items: u.map((e) => ({
-			id: String(e.id),
-			label: e.label ?? e.kind ?? String(e.id)
-		})),
-		selectedIds: [],
-		onReorder: (t, n) => {
-			e("layer-stack", "onReorder", {
-				ids: t,
-				targetIndex: n
-			});
-			let r = u.map((e) => e.id), i = new Set(t), a = r.filter((e) => !i.has(String(e))), o = u.map((e) => e.id).filter((e) => i.has(String(e))), s = n - r.filter((e, t) => i.has(String(e)) && t < n).length, c = [...a];
-			c.splice(s, 0, ...o), m(c);
-		}
-	}), S = (e) => {
-		b((t) => {
-			let n = new Set(t);
-			return n.has(e) ? n.delete(e) : n.add(e), n;
-		});
-	}, C = f ? d ?? [] : [], w = !v && (l !== void 0 || C.length > 0);
-	return /* @__PURE__ */ i("div", {
-		className: c ? `${s.stack} ${c}` : s.stack,
-		children: [w && /* @__PURE__ */ i("div", {
-			className: s.head,
-			children: [l !== void 0 && /* @__PURE__ */ r("h2", {
-				className: s.title,
-				children: l
-			}), /* @__PURE__ */ r("div", {
-				className: s.palette,
-				children: C.map((t) => /* @__PURE__ */ r("button", {
-					type: "button",
-					className: s.add,
-					onClick: () => {
-						e("layer-stack", "onAdd", { kind: t }), f?.(t);
-					},
-					"aria-label": `Add ${t}`,
-					children: t
-				}, t))
-			})]
-		}), /* @__PURE__ */ i("div", {
-			className: s.list,
-			ref: x.containerProps.ref,
-			children: [u.map((e, t) => {
-				let a = y.has(e.id), o = x.state.draggedIds?.[0], c = o === String(e.id), l = x.state.targetIndex === t && o !== String(e.id), d = x.state.targetIndex === u.length && t === u.length - 1, f = [
-					s.card,
-					c ? s.cardDragging : "",
-					e.accent ? s.cardAccented : ""
-				].filter(Boolean).join(" "), m = e.accent ? { "--wzl-layer-stack-accent": e.accent } : void 0, { onPointerDown: _ } = x.rowProps(String(e.id), t);
-				return /* @__PURE__ */ i("div", { children: [
-					l && /* @__PURE__ */ r("div", { className: s.dropHint }),
-					/* @__PURE__ */ i("div", {
-						className: f,
-						"data-testid": `layer-card-${e.id}`,
-						style: m,
-						children: [/* @__PURE__ */ i("div", {
-							className: s.cardHead,
-							children: [
-								/* @__PURE__ */ r("button", {
-									type: "button",
-									className: s.handle,
-									"aria-label": `Drag to reorder layer ${e.id}`,
-									onPointerDown: _,
-									onClick: () => S(e.id),
-									children: e.badge ?? /* @__PURE__ */ r(n, {})
-								}),
-								e.primaryValue !== void 0 && e.primaryOptions && h ? /* @__PURE__ */ r("select", {
-									className: s.primary,
-									value: e.primaryValue,
-									"aria-label": `Primary select for layer ${e.id}`,
-									onChange: (t) => h(e.id, t.target.value),
-									onClick: (e) => e.stopPropagation(),
-									children: e.primaryOptions.map((e) => /* @__PURE__ */ r("option", {
-										value: e,
-										children: e
-									}, e))
-								}) : /* @__PURE__ */ r("span", {
-									className: s.kind,
-									children: e.label ?? e.kind
-								}),
-								p && /* @__PURE__ */ r("button", {
-									type: "button",
-									className: s.remove,
-									"aria-label": "Remove layer",
-									onClick: (t) => {
-										t.stopPropagation(), p(e.id);
-									},
-									children: "✕"
-								})
-							]
-						}), a && /* @__PURE__ */ r("div", {
-							className: s.cardBody,
-							children: g(e)
-						})]
-					}),
-					d && /* @__PURE__ */ r("div", { className: s.dropHint })
-				] }, e.id);
-			}), u.length === 0 && /* @__PURE__ */ r("div", {
-				className: s.empty,
-				children: _ ?? (C.length > 0 ? "No layers — add one above." : "No layers.")
-			})]
-		})]
-	});
-}
-//#endregion
-export { c as t };
-
-//# sourceMappingURL=LayerStack-CfQ6GsRz.js.map

package/dist/chunks/LayerStack-CfQ6GsRz.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LayerStack-CfQ6GsRz.js","names":[],"sources":["../../src/components/LayerStack/LayerStack.module.css","../../src/components/LayerStack/LayerStack.tsx"],"sourcesContent":["/* Authored against labkit's `.lk-root`, which supplied a border-box reset and a\n   set of bare-button defaults. weasel-ui has neither, so the stack restates\n   both over its own subtree rather than depending on an ancestor class. */\n.stack,\n.stack * {\n  box-sizing: border-box;\n}\n\n.stack {\n  display: grid;\n  gap: var(--wzl-space-4);\n}\n\n.head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--wzl-space-4);\n}\n\n.title {\n  margin: 0;\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-lg);\n  color: var(--wzl-fg);\n}\n\n.palette {\n  display: flex;\n  gap: var(--wzl-space-2);\n}\n\n.add {\n  font: inherit;\n  height: var(--wzl-control-h);\n  background: transparent;\n  border: 1px dashed var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: var(--wzl-space-1) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  cursor: pointer;\n}\n\n.add:hover {\n  background: var(--wzl-surface-raised);\n  color: var(--wzl-fg);\n}\n\n.list {\n  display: grid;\n  gap: var(--wzl-space-3);\n}\n\n.dropHint {\n  height: 2px;\n  background: var(--wzl-accent);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.empty {\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size);\n  padding: var(--wzl-space-4);\n  text-align: center;\n}\n\n.card {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  overflow: hidden;\n}\n\n.cardAccented {\n  /* Re-bind --wzl-accent inside the card so descendant controls (slider tracks\n     and thumbs, readouts, etc.) tint to the per-card accent instead of the\n     global theme accent. Mirrors EffectCard's behavior. */\n  --wzl-accent: var(--wzl-layer-stack-accent);\n  border-left: 3px solid var(--wzl-layer-stack-accent);\n}\n\n.cardDragging {\n  opacity: 0.5;\n}\n\n.cardHead {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  padding: var(--wzl-space-3) var(--wzl-space-4);\n}\n\n.handle {\n  font: inherit;\n  background: transparent;\n  border: 0;\n  color: var(--wzl-fg-subtle);\n  padding: var(--wzl-space-1) var(--wzl-space-2);\n  cursor: grab;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--wzl-icon-button-size);\n  height: var(--wzl-icon-button-size);\n  border-radius: var(--wzl-radius-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  font-size: var(--wzl-font-size);\n}\n\n.cardAccented .handle {\n  background: var(--wzl-layer-stack-accent);\n  color: white;\n}\n\n.handle:active {\n  cursor: grabbing;\n}\n\n.kind,\n.primary {\n  flex: 1;\n  font-size: var(--wzl-font-size);\n}\n\n.primary {\n  background: transparent;\n  border: 0;\n  color: var(--wzl-fg);\n  font: inherit;\n  text-transform: uppercase;\n  letter-spacing: var(--wzl-tracking-wide);\n}\n\n.remove {\n  font: inherit;\n  height: var(--wzl-control-h);\n  background: transparent;\n  border: 0;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-lg);\n  cursor: pointer;\n  padding: var(--wzl-space-1) var(--wzl-space-3);\n}\n\n.remove:hover {\n  color: var(--wzl-fg);\n}\n\n.cardBody {\n  padding: var(--wzl-space-4);\n  border-top: 1px solid var(--wzl-border);\n}\n","import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';\nimport { dlog } from '../../dlog';\nimport { useReorderDragList } from '../../useReorderDragList';\nimport { DragHandleGlyph } from '../DragHandleGlyph';\nimport s from './LayerStack.module.css';\n\n/** One card in a layer stack: its identity, the label shown when collapsed,\n *  and the optional select hoisted into its header. */\nexport interface LayerStackItem {\n  /** Stable id used for keys, onRemove, onReorder. Numeric to match\n   *  common id-from-nextId conventions; string ids also work. */\n  id: number | string;\n  /** Short kind label rendered in the header when no primary select\n   *  is hoisted (e.g. \"shadow\", \"stroke\"). Omit it for items that have no\n   *  kind; `label` then names the card. */\n  kind?: string;\n  /** Header text, when the item's name is not its kind. Falls back to\n   *  `kind`. */\n  label?: string;\n  /** When present, hoist this select into the card header so the user\n   *  can switch mode/shape without expanding. */\n  primaryValue?: string;\n  primaryOptions?: string[];\n  /** Accent CSS color used as the left border / index-badge fill. Sets\n   *  --wzl-layer-stack-accent on the card, which re-binds --wzl-accent\n   *  for everything inside it. */\n  accent?: string;\n  /** Optional badge text rendered before the primary control\n   *  (e.g. tail index \"1\", \"2\", \"3\"). When omitted a drag handle\n   *  glyph renders in its place. */\n  badge?: string;\n  /** Initial expanded state. Defaults to true for newly-added items. */\n  defaultExpanded?: boolean;\n}\n\n/** Props for `<LayerStack>`. */\nexport interface LayerStackProps {\n  /** Heading above the list. Omit it, along with the palette, for a stack\n   *  whose surroundings already name it. */\n  title?: string;\n  items: LayerStackItem[];\n  /** Kinds the user can add via the header palette. Omit both this and\n   *  `onAdd` for a stack the user cannot add to. */\n  paletteKinds?: string[];\n  onAdd?: (kind: string) => void;\n  /** Omit for items the user cannot remove; the card then has no ✕. */\n  onRemove?: (id: number | string) => void;\n  onReorder: (orderedIds: Array<number | string>) => void;\n  /** Required for `primaryValue` to render as a select — without a handler\n   *  the control could not be changed. */\n  onPrimaryChange?: (id: number | string, nextValue: string) => void;\n  /** Render the body controls for each item. */\n  renderBody: (item: LayerStackItem) => ReactNode;\n  /** Shown in place of the list when `items` is empty. Defaults to a line\n   *  that points at the palette, or a bare one when there is no palette. */\n  emptyLabel?: ReactNode;\n  /** Hide the title + palette row (used when an outer wrap renders its\n   *  own head — see speech-balloons Tails panel). */\n  hideHead?: boolean;\n  /** Appended to the root element's class list. The module's own class names\n   *  are hashed, so this is the supported way to reach the stack from a\n   *  consumer stylesheet. */\n  className?: string;\n}\n\n/** A drag-reorderable stack of expandable cards, with a palette in the header\n *  for adding more. The body of each card is the caller's to render. */\nexport function LayerStack({\n  className,\n  title,\n  items,\n  paletteKinds,\n  onAdd,\n  onRemove,\n  onReorder,\n  onPrimaryChange,\n  renderBody,\n  emptyLabel,\n  hideHead,\n}: LayerStackProps) {\n  const [expandedIds, setExpandedIds] = useState<Set<number | string>>(\n    () => new Set(items.filter((i) => i.defaultExpanded !== false).map((i) => i.id)),\n  );\n\n  useEffect(() => {\n    setExpandedIds((prev) => {\n      let next: Set<number | string> | null = null;\n      for (const item of items) {\n        if (item.defaultExpanded === false) continue;\n        if (prev.has(item.id)) continue;\n        if (next === null) next = new Set(prev);\n        next.add(item.id);\n      }\n      return next ?? prev;\n    });\n  }, [items]);\n\n  const dragItems = items.map((it) => ({\n    id: String(it.id),\n    label: it.label ?? it.kind ?? String(it.id),\n  }));\n  const drag = useReorderDragList({\n    items: dragItems,\n    selectedIds: [],\n    onReorder: (ids, targetIndex) => {\n      dlog('layer-stack', 'onReorder', { ids, targetIndex });\n      const orig = items.map((i) => i.id);\n      const moving = new Set(ids);\n      const remaining = orig.filter((id) => !moving.has(String(id)));\n      const movedIds = items.map((i) => i.id).filter((id) => moving.has(String(id)));\n      // weasel reports targetIndex against the original list (which includes\n      // the dragged row). Each moved item that originally sat before\n      // targetIndex needs to shift the insertion point left by one.\n      const shift = orig.filter((id, idx) => moving.has(String(id)) && idx < targetIndex).length;\n      const adjusted = targetIndex - shift;\n      const out = [...remaining];\n      out.splice(adjusted, 0, ...movedIds);\n      onReorder(out);\n    },\n  });\n\n  const toggleExpanded = (id: number | string) => {\n    setExpandedIds((current) => {\n      const n = new Set(current);\n      if (n.has(id)) n.delete(id);\n      else n.add(id);\n      return n;\n    });\n  };\n\n  const palette = onAdd ? (paletteKinds ?? []) : [];\n  const showHead = !hideHead && (title !== undefined || palette.length > 0);\n\n  return (\n    <div className={className ? `${s.stack} ${className}` : s.stack}>\n      {showHead && (\n        <div className={s.head}>\n          {title !== undefined && <h2 className={s.title}>{title}</h2>}\n          <div className={s.palette}>\n            {palette.map((k) => (\n              <button\n                key={k}\n                type=\"button\"\n                className={s.add}\n                onClick={() => {\n                  dlog('layer-stack', 'onAdd', { kind: k });\n                  onAdd?.(k);\n                }}\n                aria-label={`Add ${k}`}\n              >\n                {k}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n      <div\n        className={s.list}\n        ref={drag.containerProps.ref as RefCallback<HTMLDivElement>}\n      >\n        {items.map((item, i) => {\n          const expanded = expandedIds.has(item.id);\n          const draggedId = drag.state.draggedIds?.[0];\n          const isDragging = draggedId === String(item.id);\n          const showHintBefore = drag.state.targetIndex === i && draggedId !== String(item.id);\n          const showHintAfter = drag.state.targetIndex === items.length && i === items.length - 1;\n          const cardCls = [\n            s.card,\n            isDragging ? s.cardDragging : '',\n            item.accent ? s.cardAccented : '',\n          ]\n            .filter(Boolean)\n            .join(' ');\n          const cardStyle = item.accent\n            ? ({ '--wzl-layer-stack-accent': item.accent } as CSSProperties)\n            : undefined;\n          const { onPointerDown } = drag.rowProps(String(item.id), i);\n          return (\n            <div key={item.id}>\n              {showHintBefore && <div className={s.dropHint} />}\n              <div className={cardCls} data-testid={`layer-card-${item.id}`} style={cardStyle}>\n                <div className={s.cardHead}>\n                  <button\n                    type=\"button\"\n                    className={s.handle}\n                    aria-label={`Drag to reorder layer ${item.id}`}\n                    onPointerDown={onPointerDown}\n                    onClick={() => toggleExpanded(item.id)}\n                  >\n                    {item.badge ?? <DragHandleGlyph />}\n                  </button>\n                  {item.primaryValue !== undefined && item.primaryOptions && onPrimaryChange ? (\n                    <select\n                      className={s.primary}\n                      value={item.primaryValue}\n                      aria-label={`Primary select for layer ${item.id}`}\n                      onChange={(e) => onPrimaryChange(item.id, e.target.value)}\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      {item.primaryOptions.map((o) => (\n                        <option key={o} value={o}>\n                          {o}\n                        </option>\n                      ))}\n                    </select>\n                  ) : (\n                    <span className={s.kind}>{item.label ?? item.kind}</span>\n                  )}\n                  {onRemove && (\n                    <button\n                      type=\"button\"\n                      className={s.remove}\n                      aria-label=\"Remove layer\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        onRemove(item.id);\n                      }}\n                    >\n                      ✕\n                    </button>\n                  )}\n                </div>\n                {expanded && <div className={s.cardBody}>{renderBody(item)}</div>}\n              </div>\n              {showHintAfter && <div className={s.dropHint} />}\n            </div>\n          );\n        })}\n        {items.length === 0 && (\n          <div className={s.empty}>\n            {emptyLabel ?? (palette.length > 0 ? 'No layers — add one above.' : 'No layers.')}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/MenuButton-C_4nox39.js

@@ -1,60 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Button as r, Menu as i, MenuItem as a, MenuTrigger as o, Popover as s } from "react-aria-components";
-var c = {
-	trigger: "_trigger_1wmxr_1",
-	label: "_label_1wmxr_30",
-	chevron: "_chevron_1wmxr_34",
-	popover: "_popover_1wmxr_41",
-	menu: "_menu_1wmxr_47",
-	item: "_item_1wmxr_60"
-};
-//#endregion
-//#region src/components/MenuButton/MenuButton.tsx
-function l({ label: l, items: u, onAction: d, isDisabled: f, className: p, "aria-label": m, portalContainer: h }) {
-	let { anchor: g, portalProps: _ } = e(h);
-	return /* @__PURE__ */ n(o, { children: [
-		g,
-		/* @__PURE__ */ n(r, {
-			className: [c.trigger, p].filter(Boolean).join(" "),
-			isDisabled: f,
-			"aria-label": m,
-			children: [/* @__PURE__ */ t("span", {
-				className: c.label,
-				children: l
-			}), /* @__PURE__ */ t("svg", {
-				className: c.chevron,
-				viewBox: "0 0 10 10",
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ t("path", {
-					d: "M2 4 L5 7 L8 4",
-					fill: "none",
-					stroke: "currentColor",
-					strokeWidth: "1.5",
-					strokeLinecap: "round",
-					strokeLinejoin: "round"
-				})
-			})]
-		}),
-		/* @__PURE__ */ t(s, {
-			className: c.popover,
-			"data-weasel-overlay": "",
-			..._,
-			children: /* @__PURE__ */ t(i, {
-				className: c.menu,
-				onAction: (e) => d(e),
-				children: u.map((e) => /* @__PURE__ */ t(a, {
-					id: e.value,
-					className: c.item,
-					isDisabled: e.isDisabled,
-					textValue: e.textValue ?? (typeof e.label == "string" ? e.label : void 0),
-					children: e.label
-				}, e.value))
-			})
-		})
-	] });
-}
-//#endregion
-export { l as t };
-
-//# sourceMappingURL=MenuButton-C_4nox39.js.map

package/dist/chunks/MenuButton-C_4nox39.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MenuButton-C_4nox39.js","names":[],"sources":["../../src/components/MenuButton/MenuButton.module.css","../../src/components/MenuButton/MenuButton.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  height: var(--wzl-control-h);\n  padding: 0 var(--wzl-space-3) 0 var(--wzl-space-5);\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  white-space: nowrap;\n  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.label {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\n  outline: none;\n}\n\n.menu {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: var(--wzl-space-2);\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.item {\n  display: flex;\n  align-items: center;\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  white-space: nowrap;\n  outline: none;\n}\n\n.item[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.item[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Button as RACButton,\n  Menu as RACMenu,\n  MenuItem as RACMenuItem,\n  MenuTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './MenuButton.module.css';\n\n/** One row in a {@link MenuButton}'s list. */\nexport type MenuButtonItem<T extends string = string> = {\n  value: T;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /** Plain-text form of `label`, for type-to-select and screen readers. A\n   *  string label supplies this itself. */\n  textValue?: string;\n};\n\n/** Props for {@link MenuButton}. */\nexport type MenuButtonProps<T extends string = string> = {\n  /** What the button says. It never changes to show a chosen row. */\n  label: ReactNode;\n  items: ReadonlyArray<MenuButtonItem<T>>;\n  /** Fired with the value of the row chosen. */\n  onAction: (value: T) => void;\n  isDisabled?: boolean;\n  className?: string;\n  'aria-label'?: string;\n} & OverlayPortalProps;\n\n/**\n * A button that opens a list and acts on the row chosen — \"Add trial…\",\n * \"Load…\". Unlike a {@link Select} it holds no value, so it sizes to its own\n * label rather than to its widest row.\n */\nexport function MenuButton<T extends string = string>({\n  label,\n  items,\n  onAction,\n  isDisabled,\n  className,\n  'aria-label': ariaLabel,\n  portalContainer,\n}: MenuButtonProps<T>) {\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  return (\n    <MenuTrigger>\n      {anchor}\n      <RACButton\n        className={[s.trigger, className].filter(Boolean).join(' ')}\n        isDisabled={isDisabled}\n        aria-label={ariaLabel}\n      >\n        <span className={s.label}>{label}</span>\n        <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n          <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </RACButton>\n      {/* `data-weasel-overlay`: see Select — the list renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACMenu className={s.menu} onAction={(key) => onAction(key as T)}>\n          {items.map((item) => (\n            <RACMenuItem\n              key={item.value}\n              id={item.value}\n              className={s.item}\n              isDisabled={item.isDisabled}\n              textValue={item.textValue ?? (typeof item.label === 'string' ? item.label : undefined)}\n            >\n              {item.label}\n            </RACMenuItem>\n          ))}\n        </RACMenu>\n      </RACPopover>\n    </MenuTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;ACsCA,SAAgB,EAAsC,EACpD,UACA,UACA,aACA,eACA,cACA,cAAc,GACd,sBACqB;CACrB,IAAM,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AACjE,QACE,kBAAC,GAAD,EAAA,UAAA;EACG;EACD,kBAAC,GAAD;GACE,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC/C;GACZ,cAAY;aAHd,CAKE,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ;IAAa,CAAA,EACxC,kBAAC,OAAD;IAAK,WAAW,EAAE;IAAS,SAAQ;IAAY,eAAY;cACzD,kBAAC,QAAD;KAAM,GAAE;KAAiB,MAAK;KAAO,QAAO;KAAe,aAAY;KAAM,eAAc;KAAQ,gBAAe;KAAU,CAAA;IACxH,CAAA,CACI;;EAGZ,kBAAC,GAAD;GAAY,WAAW,EAAE;GAAS,uBAAoB;GAAG,GAAI;aAC3D,kBAAC,GAAD;IAAS,WAAW,EAAE;IAAM,WAAW,MAAQ,EAAS,EAAS;cAC9D,EAAM,KAAK,MACV,kBAAC,GAAD;KAEE,IAAI,EAAK;KACT,WAAW,EAAE;KACb,YAAY,EAAK;KACjB,WAAW,EAAK,cAAc,OAAO,EAAK,SAAU,WAAW,EAAK,QAAQ,KAAA;eAE3E,EAAK;KACM,EAPP,EAAK,MAOE,CACd;IACM,CAAA;GACC,CAAA;EACD,EAAA,CAAA"}

package/dist/chunks/MeshEditor-Bipz-Ocl.js

@@ -1,123 +0,0 @@
-import { t as e } from "./ToggleBar-CClus5Cd.js";
-import { t } from "./ColorField-BYzgZM9o.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { asPaint as i, isMeshGradientFill as a, sampleGradientStops as o } from "@weasel-js/core";
-import "react";
-//#region src/paintPreview.ts
-var s = 24;
-function c(e) {
-	let t = e.patches?.[0]?.colors;
-	if (!t || t.length < 4) return;
-	let n = (e) => `color-mix(in srgb, ${e} 0%, transparent)`, r = [
-		["0% 0%", t[0]],
-		["100% 0%", t[1]],
-		["100% 100%", t[2]],
-		["0% 100%", t[3]]
-	].map(([e, t]) => `radial-gradient(farthest-corner at ${e}, ${t}, ${n(t)})`);
-	return r.push(`linear-gradient(to bottom, ${t[0]}, ${t[2]})`), r.join(", ");
-}
-function l(e) {
-	let t = e.interpolate ?? "rgb", n = [];
-	for (let r = 0; r <= s; r++) {
-		let i = r / s;
-		n.push(`${o(e.stops, i, t)} ${(i * 100).toFixed(1)}%`);
-	}
-	return n.join(", ");
-}
-var u = 180 / Math.PI;
-function d(e) {
-	return `${(e * 100).toFixed(1)}%`;
-}
-function f(e) {
-	if (e != null) {
-		if ((e.fill ?? "solid") === "solid") return e.color;
-		if (e.fill === "linear-gradient") {
-			let t = e.to.x - e.from.x, n = e.to.y - e.from.y;
-			return `linear-gradient(${(t === 0 && n === 0 ? 90 : Math.atan2(t, -n) * u).toFixed(1)}deg, ${l(e)})`;
-		}
-		if (e.fill === "radial-gradient") return `radial-gradient(circle ${`at ${d(e.center.x)} ${d(e.center.y)}`}, ${l(e)})`;
-		if (e.fill === "mesh-gradient") return c(e);
-		if (e.fill === "conic-gradient") return `conic-gradient(from ${(e.angle * u + 90).toFixed(1)}deg at ${d(e.center.x)} ${d(e.center.y)}, ${l(e)})`;
-	}
-}
-var p = {
-	root: "_root_g12ri_1",
-	patch: "_patch_g12ri_7",
-	preview: "_preview_g12ri_13",
-	corners: "_corners_g12ri_21",
-	corner: "_corner_g12ri_21"
-}, m = [
-	{
-		value: "rgb",
-		label: "sRGB"
-	},
-	{
-		value: "oklab",
-		label: "OKLab"
-	},
-	{
-		value: "oklch",
-		label: "OKLCh"
-	}
-];
-function h(a) {
-	let { value: o, onInput: s, onChange: c, spaceSwitch: l = !0, className: u } = a, d = o.interpolate ?? "rgb", f = (e, t, n) => i({
-		...o,
-		patches: o.patches.map((r, i) => {
-			if (i !== e) return r;
-			let [a, o, s, c] = r.colors, l = [
-				a,
-				o,
-				s,
-				c
-			];
-			return l[t] = n, {
-				...r,
-				colors: l
-			};
-		})
-	});
-	return /* @__PURE__ */ r("div", {
-		className: [p.root, u].filter(Boolean).join(" "),
-		children: [o.patches.map((e, i) => /* @__PURE__ */ r("div", {
-			className: p.patch,
-			children: [/* @__PURE__ */ n("span", {
-				className: p.preview,
-				"aria-hidden": "true",
-				style: { background: g(o, i) }
-			}), /* @__PURE__ */ n("div", {
-				className: p.corners,
-				children: e.colors.map((e, r) => /* @__PURE__ */ n(t, {
-					value: e,
-					alpha: !0,
-					"aria-label": `Patch ${i + 1} corner ${r + 1}`,
-					className: p.corner,
-					onInput: (e) => s?.(f(i, r, e)),
-					onChange: (e) => c(f(i, r, e))
-				}, r))
-			})]
-		}, i)), l && /* @__PURE__ */ n(e, {
-			items: m,
-			value: d,
-			size: "sm",
-			ariaLabel: "Blend space",
-			onChange: (e) => e && c(i({
-				...o,
-				interpolate: e
-			}))
-		})]
-	});
-}
-function g(e, t) {
-	return f({
-		...e,
-		patches: [e.patches[t]]
-	});
-}
-function _(e) {
-	return a(e);
-}
-//#endregion
-export { _ as n, f as r, h as t };
-
-//# sourceMappingURL=MeshEditor-Bipz-Ocl.js.map

package/dist/chunks/MeshEditor-Bipz-Ocl.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MeshEditor-Bipz-Ocl.js","names":[],"sources":["../../src/paintPreview.ts","../../src/components/MeshEditor/MeshEditor.module.css","../../src/components/MeshEditor/MeshEditor.tsx"],"sourcesContent":["// A `FillStyle` as one CSS background string, for the swatches and chips that\n// stand in for a paint in a panel.\n//\n// The gradient kinds are sampled rather than translated stop for stop: CSS\n// blends its own stops in sRGB, so an OKLCh gradient handed over as two stops\n// would preview as the sRGB blend of its ends. Sampling through\n// `sampleGradientStops` in the paint's own space puts the curve into the\n// stops themselves, and the browser only interpolates the short hops between.\n\nimport { sampleGradientStops, type FillStyle } from '@weasel-js/core';\n\n/** Sample count along a previewed gradient. Enough that a hue arc reads as a\n *  curve at chip size; a straight sRGB ramp would need a fraction of it. */\nconst SAMPLES = 24;\n\n/**\n * A mesh patch as four corner radials over a flat base.\n *\n * This is an approximation and cannot be anything else — CSS has no mesh, and\n * the real surface only exists once the renderer has baked it. Each corner\n * fades out across the chip and they composite to something bilinear-ish,\n * which is enough for a swatch to say \"this one, not that one\". Zero alpha is\n * written as `color-mix` with `transparent` so a named or packed-alpha color\n * works without being parsed here.\n */\nfunction meshPreview(paint: { patches?: { colors: string[] }[] }): string | undefined {\n  const colors = paint.patches?.[0]?.colors;\n  if (!colors || colors.length < 4) return undefined;\n  const fade = (c: string): string => `color-mix(in srgb, ${c} 0%, transparent)`;\n  const at: [string, string][] = [\n    ['0% 0%', colors[0]], ['100% 0%', colors[1]],\n    ['100% 100%', colors[2]], ['0% 100%', colors[3]],\n  ];\n  const layers = at.map(([pos, c]) =>\n    `radial-gradient(farthest-corner at ${pos}, ${c}, ${fade(c)})`);\n  // The base keeps the middle opaque where the four fades have all thinned.\n  layers.push(`linear-gradient(to bottom, ${colors[0]}, ${colors[2]})`);\n  return layers.join(', ');\n}\n\n/** CSS color stops across the whole ramp, in the gradient's own blend space. */\nfunction sampledStops(paint: Extract<FillStyle, { stops: unknown }>): string {\n  const space = paint.interpolate ?? 'rgb';\n  const out: string[] = [];\n  for (let i = 0; i <= SAMPLES; i++) {\n    const t = i / SAMPLES;\n    out.push(`${sampleGradientStops(paint.stops, t, space)} ${(t * 100).toFixed(1)}%`);\n  }\n  return out.join(', ');\n}\n\nconst DEG = 180 / Math.PI;\n\n/** A fraction of the box as a CSS percentage. A gradient in absolute units has\n *  no box to be a fraction of, so its geometry only ever approximates here. */\nfunction pct(v: number): string {\n  return `${(v * 100).toFixed(1)}%`;\n}\n\n/**\n * `paint` as a CSS `background` value, or `undefined` for a paint with no CSS\n * form — a pattern, a registered kind — which a caller shows as a checker or\n * a placeholder rather than as an invented color.\n *\n * Gradient geometry is honored as far as CSS can carry it: the angle of a\n * linear gradient, the center of a radial or conic one. A paint in `'world'`\n * or `'local'` units is measured in the scene rather than in the chip, so its\n * preview shows the ramp and not the placement.\n */\nexport function paintPreviewCss(paint: FillStyle | null | undefined): string | undefined {\n  if (paint == null) return undefined;\n  const kind = paint.fill ?? 'solid';\n  if (kind === 'solid') return (paint as { color: string }).color;\n\n  if (paint.fill === 'linear-gradient') {\n    const dx = paint.to.x - paint.from.x;\n    const dy = paint.to.y - paint.from.y;\n    // CSS measures from \"to top\", clockwise; the paint measures in a\n    // y-down plane from +x.\n    const angle = dx === 0 && dy === 0 ? 90 : Math.atan2(dx, -dy) * DEG;\n    return `linear-gradient(${angle.toFixed(1)}deg, ${sampledStops(paint)})`;\n  }\n  if (paint.fill === 'radial-gradient') {\n    const at = `at ${pct(paint.center.x)} ${pct(paint.center.y)}`;\n    return `radial-gradient(circle ${at}, ${sampledStops(paint)})`;\n  }\n  if ((paint.fill as string) === 'mesh-gradient') {\n    return meshPreview(paint as unknown as { patches?: { colors: string[] }[] });\n  }\n  if (paint.fill === 'conic-gradient') {\n    // CSS starts a conic gradient at \"to top\"; the paint starts at +x.\n    const from = (paint.angle * DEG + 90).toFixed(1);\n    return `conic-gradient(from ${from}deg at ${pct(paint.center.x)} ${pct(paint.center.y)}, ${sampledStops(paint)})`;\n  }\n  return undefined;\n}\n",".root {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n}\n\n.patch {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-4);\n}\n\n.preview {\n  inline-size: 34px;\n  block-size: 34px;\n  flex: 0 0 auto;\n  border-radius: var(--wzl-radius-sm);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n.corners {\n  display: grid;\n  grid-template-columns: repeat(2, auto);\n  gap: var(--wzl-space-2) var(--wzl-space-3);\n  min-inline-size: 0;\n}\n\n.corner {\n  min-inline-size: 0;\n}\n","import { type ReactElement } from 'react';\nimport {\n  asPaint,\n  isMeshGradientFill,\n  type ColorSpace,\n  type FillStyle,\n  type MeshGradientFill,\n} from '@weasel-js/core';\nimport { ColorField } from '../ColorField';\nimport { ToggleBar, type ToggleBarItem } from '../ToggleBar';\nimport { paintPreviewCss } from '../../paintPreview';\nimport s from './MeshEditor.module.css';\n\nconst SPACES: readonly ToggleBarItem<ColorSpace>[] = [\n  { value: 'rgb', label: 'sRGB' },\n  { value: 'oklab', label: 'OKLab' },\n  { value: 'oklch', label: 'OKLCh' },\n];\n\n/** Props for {@link MeshEditor}. `onInput` fires throughout a gesture and\n *  `onChange` once at its end. */\nexport interface MeshEditorProps {\n  value: MeshGradientFill;\n  /** Emitted as a `FillStyle`, which is what every paint control passes\n   *  around — `FillStyle`'s discriminant stays closed over the built-in\n   *  members, so a registered kind's own shape only travels through it. */\n  onInput?: (next: FillStyle) => void;\n  onChange: (next: FillStyle) => void;\n  /** Show the sRGB / OKLab / OKLCh switch. Default true. */\n  spaceSwitch?: boolean;\n  className?: string;\n}\n\n/**\n * Editor for a mesh gradient's colors.\n *\n * Geometry is absent for the same reason it is absent from `GradientEditor`:\n * a patch's twelve control points are a thing to drag on the artwork, not a\n * column of numbers in a panel. What is left is what a panel is good at — the\n * color at each corner, and the space the four of them blend through.\n *\n * Corners are numbered in the patch's own walk order, which is the order the\n * paint stores them in, so a corner's number is stable while it is dragged.\n */\nexport function MeshEditor(props: MeshEditorProps): ReactElement {\n  const { value, onInput, onChange, spaceSwitch = true, className } = props;\n  const space = value.interpolate ?? 'rgb';\n\n  const withCorner = (patchIndex: number, corner: number, color: string): FillStyle => asPaint({\n    ...value,\n    patches: value.patches.map((patch, i) => {\n      if (i !== patchIndex) return patch;\n      const [a, b, c, d] = patch.colors;\n      const next: [string, string, string, string] = [a, b, c, d];\n      next[corner] = color;\n      return { ...patch, colors: next };\n    }),\n  });\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      {value.patches.map((patch, patchIndex) => (\n        // A patch has no id; its position in the list is its identity, the way\n        // a gradient stop's is.\n        <div key={patchIndex} className={s.patch}>\n          <span\n            className={s.preview}\n            aria-hidden=\"true\"\n            style={{ background: previewOf(value, patchIndex) }}\n          />\n          <div className={s.corners}>\n            {patch.colors.map((color, corner) => (\n              <ColorField\n                key={corner}\n                value={color}\n                alpha\n                aria-label={`Patch ${patchIndex + 1} corner ${corner + 1}`}\n                className={s.corner}\n                onInput={(next) => onInput?.(withCorner(patchIndex, corner, next))}\n                onChange={(next) => onChange(withCorner(patchIndex, corner, next))}\n              />\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {spaceSwitch && (\n        <ToggleBar<ColorSpace>\n          items={SPACES}\n          value={space}\n          size=\"sm\"\n          ariaLabel=\"Blend space\"\n          onChange={(next) => next && onChange(asPaint({ ...value, interpolate: next }))}\n        />\n      )}\n    </div>\n  );\n}\n\n/** One patch as a swatch: the paint with the other patches taken out, so a\n *  multi-patch mesh shows which row belongs to which part of it. */\nfunction previewOf(value: MeshGradientFill, patchIndex: number): string | undefined {\n  return paintPreviewCss(\n    { ...value, patches: [value.patches[patchIndex]] } as unknown as FillStyle,\n  );\n}\n\n/** Narrowing for a consumer rendering this behind a kind switch. */\nexport function isMeshPaint(fill: FillStyle | null | undefined): fill is FillStyle & MeshGradientFill {\n  return isMeshGradientFill(fill);\n}\n"],"mappings":"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"}

package/dist/chunks/NumberField-CCjEDZCg.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberField-CCjEDZCg.js","names":[],"sources":["../../src/components/NumberField/NumberField.module.css","../../src/components/NumberField/NumberField.tsx","../../src/components/NumberField/UnitField.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: var(--wzl-space-2);\n}\n\n.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  text-align: right;\n  -moz-appearance: textfield;\n}\n\n.frame input::-webkit-outer-spin-button,\n.frame input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.steppers {\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid var(--wzl-border);\n}\n\n.stepper {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--wzl-control-h-xs);\n  flex: 1;\n  background: transparent;\n  border: none;\n  color: var(--wzl-fg-muted);\n  cursor: pointer;\n  padding: 0;\n  font-size: var(--wzl-font-size-2xs);\n  line-height: 1;\n}\n\n.stepper:not(:last-child) {\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.stepper[data-hovered]:not([data-disabled]) {\n  background: var(--wzl-surface-hover);\n  color: var(--wzl-fg);\n}\n\n.stepper[data-pressed]:not([data-disabled]) {\n  background: var(--wzl-surface-pressed);\n}\n\n.stepper[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n/* Mirrors the property rows' editable readout (`.readoutInput`), so a number\n   sitting inside other chrome does not draw a second box around itself. */\n.ghost {\n  height: auto;\n  background: transparent;\n  border-color: transparent;\n  color: var(--wzl-accent);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.ghost input {\n  padding: 1px 0;\n}\n\n.ghost:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.ghost:focus-within {\n  background: var(--wzl-surface-sunken);\n  border-color: var(--wzl-focus-ring);\n  box-shadow: none;\n}\n\n/* `width='fit'` states the field's width in characters: left alone an `<input>`\n   asks for its 20-character intrinsic width, wider than most rows it sits in. */\n.fit {\n  width: auto;\n  max-width: 100%;\n  align-items: flex-start;\n}\n\n.fit .frame {\n  width: fit-content;\n  max-width: 100%;\n}\n\n.fit .frame input {\n  flex: 0 0 auto;\n  width: var(--wzl-number-field-width, 9ch);\n}\n","import { forwardRef, type ReactNode, type Ref } from 'react';\nimport {\n  NumberField as RACNumberField,\n  Label,\n  Input as RACInput,\n  Group,\n  Button as RACButton,\n  Text,\n  FieldError,\n  type NumberFieldProps as RACNumberFieldProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './NumberField.module.css';\n\n/** Props for {@link NumberField}, on top of React Aria's `NumberField` props. */\nexport type NumberFieldProps = Omit<RACNumberFieldProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  /** Hide the up/down stepper buttons. Defaults to false. */\n  hideSteppers?: boolean;\n  /** Render with no box until focused — the readout treatment the property\n   *  rows use, for a value that sits inside other chrome rather than in a form. */\n  ghost?: boolean;\n  /** Native input placeholder — e.g. `'Mixed'` for a multi-selection\n   *  editor with no shared value. */\n  placeholder?: string;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the field sits in.\n   * `'fit'` sizes it to `--wzl-number-field-width` (`9ch` by default) plus its\n   * own chrome, rather than to the input's 20-character intrinsic width.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n};\n\n/**\n * Numeric input with stepper buttons, wrapping React Aria's NumberField and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Arrow keys and scroll step the value; parsing and formatting are React\n * Aria's.\n *\n * `ref` forwards to the underlying `<input>`.\n */\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: Ref<HTMLInputElement>,\n) {\n  const {\n    label,\n    description,\n    errorMessage,\n    hideSteppers,\n    ghost,\n    placeholder,\n    width = 'fill',\n    className,\n    ...rest\n  } = props;\n  return (\n    <RACNumberField\n      {...rest}\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <Group className={ghost ? `${s.frame} ${s.ghost}` : s.frame}>\n        <RACInput ref={ref} placeholder={placeholder} />\n        {!hideSteppers && (\n          <div className={s.steppers}>\n            <RACButton slot=\"increment\" className={s.stepper} aria-label=\"Increment\">▲</RACButton>\n            <RACButton slot=\"decrement\" className={s.stepper} aria-label=\"Decrement\">▼</RACButton>\n          </div>\n        )}\n      </Group>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACNumberField>\n  );\n});\n","import { useRef, useState } from 'react';\nimport { formatNumber, parseNumber, type UnitTable } from '../../format/number';\nimport { fieldClasses } from '../Field/Field';\nimport s from './NumberField.module.css';\n\n/** Props for {@link UnitField}. */\nexport interface UnitFieldProps {\n  /** The value in the unit the field shows. NaN shows an empty field. */\n  value: number;\n  /** Fired with a value the field read and clamped, in the unit it shows. */\n  onChange: (value: number) => void;\n  minValue?: number;\n  maxValue?: number;\n  /** What an arrow key adds or takes away. Defaults to 1. */\n  step?: number;\n  /** Units a person may type, each mapped to the factor that turns a number\n   *  in it into the unit the field shows: `{ mm: 0.1, cm: 1 }`. */\n  accepts?: Readonly<UnitTable>;\n  placeholder?: string;\n  /** Render with no box until focused, as {@link NumberField}'s `ghost` does. */\n  ghost?: boolean;\n  /** As {@link NumberField}'s `width`. */\n  width?: 'fill' | 'fit';\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A number typed as text, so it can carry a unit: `12mm` in a field showing\n * centimeters commits `1.2`. Commits on blur or Enter, reverts on Escape or on\n * text it cannot read, clamps to its bounds, and steps with the arrow keys.\n * React Aria's `NumberField` refuses letters as they are typed, which is why\n * this is not that.\n */\nexport function UnitField({\n  value,\n  onChange,\n  minValue,\n  maxValue,\n  step = 1,\n  accepts,\n  placeholder,\n  ghost,\n  width = 'fill',\n  className,\n  'aria-label': ariaLabel,\n}: UnitFieldProps) {\n  const [draft, setDraft] = useState<string | null>(null);\n  const canceled = useRef(false);\n  const text = Number.isFinite(value)\n    ? formatNumber(value, { useGrouping: false, maximumFractionDigits: 20 })\n    : '';\n  const clamp = (n: number) =>\n    Math.min(maxValue ?? Infinity, Math.max(minValue ?? -Infinity, n));\n  const commit = (n: number) => {\n    const next = clamp(n);\n    if (next !== value) onChange(next);\n  };\n\n  return (\n    <div\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <div className={ghost ? `${s.frame} ${s.ghost}` : s.frame}>\n        <input\n          type=\"text\"\n          inputMode=\"decimal\"\n          aria-label={ariaLabel}\n          placeholder={placeholder}\n          value={draft ?? text}\n          onChange={(e) => setDraft(e.target.value)}\n          onFocus={() => {\n            canceled.current = false;\n          }}\n          onBlur={() => {\n            if (draft !== null && !canceled.current) {\n              const n = parseNumber(draft, accepts);\n              if (Number.isFinite(n)) commit(n);\n            }\n            setDraft(null);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.currentTarget.blur();\n            } else if (e.key === 'Escape') {\n              canceled.current = true;\n              e.currentTarget.blur();\n            } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n              e.preventDefault();\n              const typed = draft === null ? value : parseNumber(draft, accepts);\n              const from = Number.isFinite(typed) ? typed : 0;\n              const next = clamp(from + (e.key === 'ArrowUp' ? step : -step));\n              setDraft(null);\n              if (next !== value) onChange(next);\n            }\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;GC6Ca,IAAc,EAAW,SACpC,GACA,GACA;CACA,IAAM,EACJ,UACA,gBACA,iBACA,iBACA,UACA,gBACA,WAAQ,QACR,cACA,GAAG,MACD;AACJ,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,MAAU,SAAS,EAAE;GAAK,EAAa;GAAM;GAAU,CACzE,OAAO,QAAQ,CACf,KAAK,IAAI;YAJd;GAMG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAO,WAAW,IAAQ,GAAG,EAAE,MAAM,GAAG,EAAE,UAAU,EAAE;cAAtD,CACE,kBAAC,GAAD;KAAe;KAAkB;KAAe,CAAA,EAC/C,CAAC,KACA,kBAAC,OAAD;KAAK,WAAW,EAAE;eAAlB,CACE,kBAAC,GAAD;MAAW,MAAK;MAAY,WAAW,EAAE;MAAS,cAAW;gBAAY;MAAa,CAAA,EACtF,kBAAC,GAAD;MAAW,MAAK;MAAY,WAAW,EAAE;MAAS,cAAW;gBAAY;MAAa,CAAA,CAClF;OAEF;;GACP,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACvD;;EAEnB;;;ACnDF,SAAgB,EAAU,EACxB,UACA,aACA,aACA,aACA,UAAO,GACP,YACA,gBACA,UACA,WAAQ,QACR,cACA,cAAc,KACG;CACjB,IAAM,CAAC,GAAO,KAAY,EAAwB,KAAK,EACjD,IAAW,EAAO,GAAM,EACxB,IAAO,OAAO,SAAS,EAAM,GAC/B,EAAa,GAAO;EAAE,aAAa;EAAO,uBAAuB;EAAI,CAAC,GACtE,IACE,KAAS,MACb,KAAK,IAAI,KAAY,UAAU,KAAK,IAAI,KAAY,WAAW,EAAE,CAAC,EAC9D,KAAU,MAAc;EAC5B,IAAM,IAAO,EAAM,EAAE;AACrB,EAAI,MAAS,KAAO,EAAS,EAAK;;AAGpC,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAE;GAAO,MAAU,SAAS,EAAE;GAAK,EAAa;GAAM;GAAU,CACzE,OAAO,QAAQ,CACf,KAAK,IAAI;YAEZ,kBAAC,OAAD;GAAK,WAAW,IAAQ,GAAG,EAAE,MAAM,GAAG,EAAE,UAAU,EAAE;aAClD,kBAAC,SAAD;IACE,MAAK;IACL,WAAU;IACV,cAAY;IACC;IACb,OAAO,KAAS;IAChB,WAAW,MAAM,EAAS,EAAE,OAAO,MAAM;IACzC,eAAe;AACb,OAAS,UAAU;;IAErB,cAAc;AACZ,SAAI,MAAU,QAAQ,CAAC,EAAS,SAAS;MACvC,IAAM,IAAI,EAAY,GAAO,EAAQ;AACrC,MAAI,OAAO,SAAS,EAAE,IAAE,EAAO,EAAE;;AAEnC,OAAS,KAAK;;IAEhB,YAAY,MAAM;AAChB,SAAI,EAAE,QAAQ,QACZ,GAAE,cAAc,MAAM;cACb,EAAE,QAAQ,SAEnB,CADA,EAAS,UAAU,IACnB,EAAE,cAAc,MAAM;cACb,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AACvD,QAAE,gBAAgB;MAClB,IAAM,IAAQ,MAAU,OAAO,IAAQ,EAAY,GAAO,EAAQ,EAE5D,IAAO,GADA,OAAO,SAAS,EAAM,GAAG,IAAQ,MACnB,EAAE,QAAQ,YAAY,IAAO,CAAC,GAAM;AAE/D,MADA,EAAS,KAAK,EACV,MAAS,KAAO,EAAS,EAAK;;;IAGtC,CAAA;GACE,CAAA;EACF,CAAA"}

package/dist/chunks/PaintField-jBOJ32rL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PaintField-jBOJ32rL.js","names":[],"sources":["../../src/components/PaintField/PaintField.module.css","../../src/components/PaintField/PaintField.tsx"],"sourcesContent":[".trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  padding: 1px var(--wzl-space-3) 1px 1px;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.trigger[data-unset] {\n  opacity: 0.6;\n}\n\n.trigger[data-focus-visible] {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.swatch {\n  /* A paint preview at a fixed 26:18 aspect, not a control box. */\n  inline-size: 26px;\n  block-size: 18px; /* not-a-control */\n  flex: 0 0 auto;\n  border-radius: calc(var(--wzl-radius-sm) - var(--wzl-border-w));\n  /* Checker under the paint, so a translucent one reads as translucent. */\n  background-color: var(--wzl-surface-raised);\n  box-shadow: inset 0 0 0 1px var(--wzl-border);\n}\n\n/* No paint to show: the checker stands in rather than an invented color. */\n.swatch[data-empty],\n.trigger[data-mixed] .swatch {\n  background: repeating-conic-gradient(\n      var(--wzl-border) 0% 25%,\n      var(--wzl-surface) 0% 50%\n    )\n    50% / 8px 8px;\n}\n\n.label {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: start;\n}\n\n.popover {\n  outline: none;\n}\n\n.body {\n  inline-size: 240px;\n  padding: var(--wzl-space-4);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  background: var(--wzl-surface-raised);\n  box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n","import { type ReactElement } from 'react';\nimport {\n  Button as RACButton,\n  Dialog as RACDialog,\n  DialogTrigger,\n  Popover as RACPopover,\n} from 'react-aria-components';\nimport { getPaintKind, type FillStyle, type PaintKind } from '@weasel-js/core';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport { paintPreviewCss } from '../../paintPreview';\nimport { PaintInput } from '../PaintInput';\nimport s from './PaintField.module.css';\n\n/** Props for {@link PaintField}. `onInput` fires throughout a gesture inside\n *  the popover and `onChange` once at its end. */\nexport interface PaintFieldProps extends OverlayPortalProps {\n  /** The paint being edited. `null` is an explicit \"no paint\"; `undefined` is\n   *  no value to show. */\n  value: FillStyle | null | undefined;\n  /** Indeterminate presentation: the trigger says \"Mixed\" and the editor\n   *  lights no kind. */\n  mixed?: boolean;\n  /** Dim the trigger — a value is in effect but was never chosen. */\n  unset?: boolean;\n  /** Restrict the editor's kind bar. Default: every registered kind. */\n  kinds?: readonly PaintKind[];\n  /** Offer \"None\" in the editor. Default `true`. */\n  allowNone?: boolean;\n  onInput?: (next: FillStyle | null) => void;\n  onChange: (next: FillStyle | null) => void;\n  /** Names the paint this field edits — `Fill`, `Color`. */\n  'aria-label'?: string;\n  className?: string;\n}\n\n/** What the trigger says it is holding. */\nfunction kindLabel(paint: FillStyle | null | undefined, mixed: boolean): string {\n  if (mixed) return 'Mixed';\n  if (paint === null) return 'None';\n  if (paint === undefined) return '—';\n  return getPaintKind(paint.fill ?? 'solid')?.label ?? (paint.fill ?? 'solid');\n}\n\n/**\n * A whole `FillStyle` in one control slot: a swatch that says which kind it\n * holds, and a popover holding {@link PaintInput}.\n *\n * `PaintInput` itself is a kind bar over a body — six segments and a stop\n * editor — which a property row's control column cannot hold. This is the\n * shape for a narrow slot, and the difference that matters is fidelity: a\n * `ColorField` in that slot reads a gradient's first stop and writes a solid\n * back, so touching the control loses the paint.\n */\nexport function PaintField(props: PaintFieldProps): ReactElement {\n  const {\n    value, mixed = false, unset = false, kinds, allowNone = true,\n    onInput, onChange, className, portalContainer,\n  } = props;\n  const ariaLabel = props['aria-label'];\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const preview = mixed ? undefined : paintPreviewCss(value);\n\n  return (\n    <DialogTrigger>\n      {anchor}\n      <RACButton\n        className={[s.trigger, className].filter(Boolean).join(' ')}\n        aria-label={ariaLabel}\n        {...(unset ? { 'data-unset': '' } : {})}\n        {...(mixed ? { 'data-mixed': '' } : {})}\n      >\n        <span\n          className={s.swatch}\n          aria-hidden=\"true\"\n          {...(preview ? { style: { background: preview } } : { 'data-empty': '' })}\n        />\n        <span className={s.label}>{kindLabel(value, mixed)}</span>\n      </RACButton>\n      {/* `data-weasel-overlay`: see Select — the popover renders in a portal,\n          outside the subtree the trigger sits in. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACDialog className={s.body} aria-label={ariaLabel ? `${ariaLabel} editor` : 'Paint editor'}>\n          <PaintInput\n            value={value}\n            mixed={mixed}\n            unset={unset}\n            kinds={kinds}\n            allowNone={allowNone}\n            onInput={onInput}\n            onChange={onChange}\n            aria-label={ariaLabel}\n          />\n        </RACDialog>\n      </RACPopover>\n    </DialogTrigger>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;ACoCA,SAAS,EAAU,GAAqC,GAAwB;AAI9E,QAHI,IAAc,UACd,MAAU,OAAa,SACvB,MAAU,KAAA,IAAkB,MACzB,EAAa,EAAM,QAAQ,QAAQ,EAAE,SAAU,EAAM,QAAQ;;AAatE,SAAgB,EAAW,GAAsC;CAC/D,IAAM,EACJ,UAAO,WAAQ,IAAO,WAAQ,IAAO,UAAO,eAAY,IACxD,YAAS,aAAU,cAAW,uBAC5B,GACE,IAAY,EAAM,eAClB,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB,EAC3D,IAAU,IAAQ,KAAA,IAAY,EAAgB,EAAM;AAE1D,QACE,kBAAC,GAAD,EAAA,UAAA;EACG;EACD,kBAAC,GAAD;GACE,WAAW,CAAC,EAAE,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GAC3D,cAAY;GACZ,GAAK,IAAQ,EAAE,cAAc,IAAI,GAAG,EAAE;GACtC,GAAK,IAAQ,EAAE,cAAc,IAAI,GAAG,EAAE;aAJxC,CAME,kBAAC,QAAD;IACE,WAAW,EAAE;IACb,eAAY;IACZ,GAAK,IAAU,EAAE,OAAO,EAAE,YAAY,GAAS,EAAE,GAAG,EAAE,cAAc,IAAI;IACxE,CAAA,EACF,kBAAC,QAAD;IAAM,WAAW,EAAE;cAAQ,EAAU,GAAO,EAAM;IAAQ,CAAA,CAChD;;EAGZ,kBAAC,GAAD;GAAY,WAAW,EAAE;GAAS,uBAAoB;GAAG,GAAI;aAC3D,kBAAC,GAAD;IAAW,WAAW,EAAE;IAAM,cAAY,IAAY,GAAG,EAAU,WAAW;cAC5E,kBAAC,GAAD;KACS;KACA;KACA;KACA;KACI;KACF;KACC;KACV,cAAY;KACZ,CAAA;IACQ,CAAA;GACD,CAAA;EACC,EAAA,CAAA"}

package/dist/chunks/Powerline-Ak5AWUlK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Powerline-Ak5AWUlK.js","names":[],"sources":["../../src/components/Powerline/Powerline.module.css","../../src/components/Powerline/Powerline.tsx"],"sourcesContent":[".row {\n  display: inline-flex;\n  align-items: stretch;\n  gap: var(--powerline-gap, 0.2em);\n}\n\n.matrix {\n  display: grid;\n  gap: var(--wzl-space-6);\n}\n\n/* Reset Badge's opinionated text defaults — Powerline segments should pick up\n * the surrounding text style instead of forcing uppercase / 10px / extra\n * tracking. Consumers can still override via className on Powerline. */\n.segment {\n  font-size: inherit;\n  text-transform: none;\n  letter-spacing: normal;\n}\n","import type { CSSProperties, ReactNode } from 'react';\nimport { Badge } from '../Badge/Badge';\nimport type { BadgeSize, BadgeTone, BadgeVariant } from '../Badge/types';\nimport type { EdgeCap } from '../Badge/bases/edgeProfiles';\nimport s from './Powerline.module.css';\n\n/**\n * One segment of a {@link Powerline}. Giving it `onClick` or `href` makes it\n * interactive, the same way it does on a `Badge`.\n */\nexport interface PowerlineSegment {\n  text: ReactNode;\n  /** Cap on this segment's right edge. Next segment's left edge adopts the same profile. */\n  endCap?: EdgeCap;\n  tone?: BadgeTone;\n  variant?: BadgeVariant;\n  size?: BadgeSize;\n  onClick?: () => void;\n  href?: string;\n  'aria-label'?: string;\n}\n\n/** Props for {@link Powerline}. */\nexport interface PowerlineProps {\n  segments: PowerlineSegment[];\n  /** Left edge of the first segment. Defaults to 'flat'. */\n  startCap?: EdgeCap;\n  /** Default size for every segment (per-segment `size` wins). */\n  size?: BadgeSize;\n  /** Default variant for every segment (per-segment `variant` wins). */\n  variant?: BadgeVariant;\n  /** Protrusion depth in CSS px, passed through to every segment's base. */\n  depth?: number;\n  /** Visible gap between adjacent segments. Number → px; string → literal CSS length.\n   *  Default: `0.2em` (scales with the row's font size). Pass `0` for flush. */\n  gap?: number | string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * A row of chevron-linked badge segments, in the style of a shell powerline\n * prompt. Each segment's `endCap` shapes both its own right edge and the next\n * segment's left edge, so the run reads as one continuous chain.\n *\n * Built for showing a path through a sequence of steps — the inspector uses\n * it to display how input routes from tool to gesture to action to target.\n */\nexport function Powerline({\n  segments,\n  startCap = 'flat',\n  size,\n  variant,\n  depth,\n  gap,\n  className,\n  ...rest\n}: PowerlineProps) {\n  const cls = [s.row, className].filter(Boolean).join(' ');\n  const style: CSSProperties | undefined = gap !== undefined\n    ? { ['--powerline-gap' as never]: typeof gap === 'number' ? `${gap}px` : gap }\n    : undefined;\n  return (\n    <span className={cls} style={style} aria-label={rest['aria-label']}>\n      {segments.map((seg, i) => {\n        const leftEdge: EdgeCap = i === 0 ? startCap : (segments[i - 1].endCap ?? 'flat');\n        const rightEdge: EdgeCap = seg.endCap ?? 'flat';\n        return (\n          <Badge\n            key={i}\n            base=\"powerline\"\n            baseParams={{ leftEdge, rightEdge, ...(depth !== undefined && { depth }) }}\n            tone={seg.tone}\n            variant={seg.variant ?? variant}\n            size={seg.size ?? size}\n            onClick={seg.onClick}\n            href={seg.href}\n            aria-label={seg['aria-label']}\n            className={s.segment}\n          >\n            {seg.text}\n          </Badge>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;ACgDA,SAAgB,EAAU,EACxB,aACA,cAAW,QACX,SACA,YACA,UACA,QACA,cACA,GAAG,KACc;AAKjB,QACE,kBAAC,QAAD;EAAM,WALI,CAAC,EAAE,KAAK,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAKjC;EAAY,OAJU,MAAQ,KAAA,IAE7C,KAAA,IADA,EAAG,mBAA6B,OAAO,KAAQ,WAAW,GAAG,EAAI,MAAM,GAAK;EAG1C,cAAY,EAAK;YAClD,EAAS,KAAK,GAAK,MAIhB,kBAAC,GAAD;GAEE,MAAK;GACL,YAAY;IAAE,UANQ,MAAM,IAAI,IAAY,EAAS,IAAI,GAAG,UAAU;IAM9C,WALD,EAAI,UAAU;IAKF,GAAI,MAAU,KAAA,KAAa,EAAE,UAAO;IAAG;GAC1E,MAAM,EAAI;GACV,SAAS,EAAI,WAAW;GACxB,MAAM,EAAI,QAAQ;GAClB,SAAS,EAAI;GACb,MAAM,EAAI;GACV,cAAY,EAAI;GAChB,WAAW,EAAE;aAEZ,EAAI;GACC,EAZD,EAYC,CAEV;EACG,CAAA"}