@weasel-js/ui 1.3.0 → 1.4.0-pre.0

package/dist/chunks/{Powerline-Cc-Av8Pc.js.map → Powerline-M1Q3Hx5E.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Powerline-Cc-Av8Pc.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: 12px;\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"}
+{"version":3,"file":"Powerline-M1Q3Hx5E.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: 12px;\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"}

package/dist/chunks/{Prefs-CRTRAud6.js → Prefs-C2qhxnmt.js}

@@ -1,13 +1,13 @@
-import { n as e, t } from "./Tooltip-Di7vxbFa.js";
-import { t as n } from "./ColorField-CSSRv3jG.js";
-import { t as r } from "./Checkbox-Chtrlh19.js";
-import { t as i } from "./Input-BnxOPY4N.js";
-import { t as a } from "./NumberField-BQ-KaK7T.js";
-import { n as o, t as s } from "./RadioGroup-BrtV1Clm.js";
-import { t as c } from "./RangeSlider-CJfhxDn6.js";
-import { t as l } from "./Select-BYhHGmMl.js";
-import { t as u } from "./Switch-BSr-vaAC.js";
-import { t as d } from "./Dialog-RzrboT4Q.js";
+import { n as e, t } from "./Tooltip-Bq8Hvj4r.js";
+import { t as n } from "./ColorField-CKbnsEUN.js";
+import { t as r } from "./Checkbox-BePa_djO.js";
+import { t as i } from "./Input-DRUeowbz.js";
+import { t as a } from "./NumberField-CQ7OJORF.js";
+import { n as o, t as s } from "./RadioGroup-B8eMJ6lu.js";
+import { t as c } from "./RangeSlider-JczhglgA.js";
+import { t as l } from "./Select-g8PhE010.js";
+import { t as u } from "./Switch-QviBb61l.js";
+import { t as d } from "./Dialog-CQAZ7hS7.js";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 import { isBuiltinToolPref as h } from "@weasel-js/core";
 import { useMemo as g } from "react";
@@ -297,4 +297,4 @@ function O(e) {
 //#endregion
 export { S as a, x as i, w as n, v as o, b as r, y as s, O as t };
 
-//# sourceMappingURL=Prefs-CRTRAud6.js.map
+//# sourceMappingURL=Prefs-C2qhxnmt.js.map

package/dist/chunks/{Prefs-CRTRAud6.js.map → Prefs-C2qhxnmt.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Prefs-CRTRAud6.js","names":[],"sources":["../../src/components/paintValue.ts","../../src/components/Prefs/schema.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["// Reading and writing the paint objects a property control may be pointed at.\n//\n// `data.fill` is a `FillStyle` and `data.stroke` a `Stroke`, so a control that\n// assumes either is a hex string reads `undefined` off it and writes a bare\n// string back over it. These helpers are what keep a control honest about the\n// shape it is holding.\n\n/** The color of a solid paint, or `undefined` for anything else — including a\n *  value that isn't a paint at all. `fill` is optional on the solid member of\n *  the union, so the tag alone can't decide it. */\nexport function solidColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null) return undefined;\n  const paint = value as { fill?: string; color?: unknown };\n  if (paint.fill !== undefined && paint.fill !== 'solid') return undefined;\n  return typeof paint.color === 'string' ? paint.color : undefined;\n}\n\n/** The single color a stroke shows, or `undefined` when it has none to show —\n *  a gradient or pattern stroke, or no stroke at all. */\nexport function strokeColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null || !('paint' in value)) return undefined;\n  return solidColorOf((value as { paint: unknown }).paint);\n}\n","// Preference-schema vocabulary for PrefsForm / PrefsDialog / SelectionPanel:\n// core's `ToolPref*` family under this package's names. Never re-declare them\n// here — this was a hand-kept structural copy until it drifted, and the\n// independence from `@weasel-js/core` it bought is long gone anyway.\n\nexport type {\n  ToolPref as BuiltinPref,\n  ToolPrefBoolean as PrefBoolean,\n  ToolPrefBooleanControl as PrefBooleanControl,\n  ToolPrefColor as PrefColor,\n  ToolPrefCustom as PrefCustom,\n  ToolPrefEnum as PrefEnum,\n  ToolPrefEnumControl as PrefEnumControl,\n  ToolPrefEnumEncoding as PrefEnumEncoding,\n  ToolPrefGroup as PrefGroup,\n  ToolPrefKind as PrefKind,\n  ToolPrefLeaf as PrefLeaf,\n  ToolPrefNumber as PrefNumber,\n  ToolPrefNumberControl as PrefNumberControl,\n  ToolPrefNumberUnit as PrefNumberUnit,\n  ToolPrefObject as PrefObject,\n  ToolPrefPaint as PrefPaint,\n  ToolPrefString as PrefString,\n  ToolPrefStringControl as PrefStringControl,\n} from '@weasel-js/core';\n\nimport type { ToolPrefGroup, ToolPrefLeaf } from '@weasel-js/core';\n\n/** Distinguishes a leaf from a group while walking a schema tree. */\nexport function isPrefLeaf(node: ToolPrefLeaf | ToolPrefGroup): node is ToolPrefLeaf {\n  return 'kind' in node;\n}\n\n/** Get the value at a dotted path inside a nested value tree. Returns\n *  `undefined` when a segment is missing or hits a non-object. */\nexport function prefValueAtPath(values: unknown, path: string): unknown {\n  let cur: unknown = values;\n  for (const seg of path.split('.')) {\n    if (cur == null || typeof cur !== 'object') return undefined;\n    cur = (cur as Record<string, unknown>)[seg];\n  }\n  return cur;\n}\n\n/**\n * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups\n * that end up empty. Returns null when the entire subtree is hidden.\n */\nexport function visiblePrefSubtree<T extends ToolPrefLeaf | ToolPrefGroup>(\n  node: T,\n  showHidden: boolean,\n): T | null {\n  if (isPrefLeaf(node)) return node.hidden && !showHidden ? null : node;\n  const group = node as ToolPrefGroup;\n  const children: Record<string, ToolPrefLeaf | ToolPrefGroup> = {};\n  for (const [key, child] of Object.entries(group.children)) {\n    const kept = visiblePrefSubtree(child, showHidden);\n    if (kept) children[key] = kept;\n  }\n  if (Object.keys(children).length === 0) return null;\n  return { ...node, children };\n}\n","/* Ported from WeaselDraw's wd-prefs-* rules (apps/draw/src/app.css),\n * generalized onto theme tokens. Column width is overridable via\n * --wzl-prefs-column-width at any ancestor scope. */\n\n.columns {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 4px;\n}\n\n.column {\n  flex: 0 0 var(--wzl-prefs-column-width, 300px);\n  width: var(--wzl-prefs-column-width, 300px);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 6px;\n  padding: 8px 8px 8px 10px;\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: 2px;\n}\n\n.groupTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.subpanel .groupTitle {\n  font-size: var(--wzl-font-size-sm);\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n.groupDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.rowLabel {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n/* Description affordance — quiet until hovered/focused. */\n.help {\n  flex: 0 0 auto;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n  cursor: help;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.help:hover {\n  color: var(--wzl-fg);\n}\n\n.help:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n  color: var(--wzl-fg);\n}\n\n/* Control slot — fixed width so the label can take the rest of the row.\n * Kit form controls render as block-level flex columns that fill it. */\n.rowControl {\n  flex: 0 0 110px;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.textarea {\n  width: 100%;\n  padding: 4px 8px;\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  resize: vertical;\n}\n\n.unrenderable {\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n/* PrefsDialog header row: title text + optional headerExtra chrome. */\n.titleRow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.titleRow > span:first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n/* An object leaf renders its fields as its own rows. */\n.objectLeaf {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  inline-size: 100%;\n}\n\n.objectRow {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  align-items: center;\n}\n\n.objectLabel {\n  font-size: var(--wzl-font-size-sm);\n  opacity: 0.75;\n}\n\n.objectGroup {\n  margin: 4px 0 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.55;\n}\n","import { useMemo, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Checkbox } from '../Checkbox';\nimport { ColorField } from '../ColorField';\nimport { solidColorOf } from '../paintValue';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { RadioGroup, Radio } from '../RadioGroup';\nimport { RangeSlider } from '../RangeSlider';\nimport { Select } from '../Select';\nimport { Switch } from '../Switch';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { isBuiltinToolPref } from '@weasel-js/core';\nimport {\n  isPrefLeaf,\n  prefValueAtPath,\n  visiblePrefSubtree,\n  type PrefGroup,\n  type PrefLeaf,\n} from './schema';\nimport s from './Prefs.module.css';\n\n/** What a {@link PrefRenderer} is given for the leaf it is rendering. */\nexport interface PrefRenderContext {\n  /** Dotted path of the leaf within the schema root. */\n  path: string;\n  /** The schema node. App renderers narrow this to their own kind shape. */\n  pref: PrefLeaf;\n  /** Current value — `values` at `path`, falling back to `pref.default`. */\n  value: unknown;\n  setValue: (value: unknown) => void;\n}\n\n/**\n * Renders the control cell for one preference leaf. Returning `null`\n * collapses the row.\n */\nexport type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;\n\n/** Props for {@link PrefsForm}. */\nexport interface PrefsFormProps {\n  /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */\n  schema: PrefGroup;\n  /** Nested value tree (shape mirrors the schema). Sparse is fine —\n   *  missing leaves fall back to their schema `default`. */\n  values?: unknown;\n  /** Change callback with the leaf's dotted path. Values apply live;\n   *  there is no dirty/commit state. */\n  onChange: (path: string, value: unknown) => void;\n  /**\n   * Per-kind renderers for app-defined kinds. Entries also override the\n   * built-in kinds when keys collide. A renderer owns the control cell\n   * (the label/tooltip row chrome stays with the form, unless the leaf\n   * sets `block`); returning `null` collapses the row entirely. Unknown\n   * kinds with no renderer show a labeled placeholder instead of\n   * crashing.\n   */\n  renderers?: Record<string, PrefRenderer>;\n  /** Reveal `hidden` leaves (dev tooling). Default false. */\n  showHidden?: boolean;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Top-level groups render as columns,\n * nested groups as indented sub-panels, leaves as label + control rows.\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition,\n * and persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const { schema, values, onChange, renderers, showHidden = false, className } = props;\n  const visibleRoot = useMemo(\n    () => visiblePrefSubtree(schema, showHidden),\n    [schema, showHidden],\n  );\n  const ctx: WalkCtx = { values, onChange, renderers };\n  return (\n    <div className={[s.columns, className].filter(Boolean).join(' ')}>\n      {Object.entries(visibleRoot?.children ?? {}).map(([key, child]) => (\n        <div key={key} className={s.column}>\n          {isPrefLeaf(child) ? (\n            // Top-level leaves are unusual but legal — give each its own\n            // column for symmetry with grouped siblings.\n            <PrefRow ctx={ctx} path={key} pref={child} />\n          ) : (\n            <GroupBody ctx={ctx} group={child} path={key} depth={0} />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n}\n\nfunction GroupBody({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  return (\n    <div className={depth === 0 ? s.panel : s.subpanel}>\n      <div className={s.groupHeader}>\n        <h3 className={s.groupTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.groupDesc}>{group.description}</p>\n        )}\n      </div>\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const childPath = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={childPath} pref={child} />\n          ) : (\n            <GroupBody key={key} ctx={ctx} group={child} path={childPath} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n  };\n\n  const custom = ctx.renderers?.[pref.kind];\n  const control = custom ? custom(renderCtx) : renderBuiltin(renderCtx);\n  if (custom && control === null) return null;\n\n  // `block` leaves own their chrome (embedded editors with their own\n  // header) — no label/tooltip row.\n  if (pref.block) return <>{control}</>;\n\n  return (\n    <label className={s.row}>\n      <span className={s.rowLabel}>\n        {pref.name}\n        {pref.description ? (\n          // Help affordance carries the description tooltip. A tooltip\n          // trigger must be interactive (keyboard-reachable), so this is\n          // a real button — a bare label span would be neither focusable\n          // nor announced.\n          <TooltipTrigger>\n            <Focusable>\n              <button type=\"button\" className={s.help} aria-label={`About ${pref.name}`}>\n                ⓘ\n              </button>\n            </Focusable>\n            <Tooltip>{pref.description}</Tooltip>\n          </TooltipTrigger>\n        ) : null}\n      </span>\n      <span className={s.rowControl}>{control}</span>\n    </label>\n  );\n}\n\nfunction renderBuiltin(\n  ctx: PrefRenderContext,\n  // The object a nested leaf is a field of — what an enum `encoding` reads\n  // and writes against. Undefined for a top-level leaf, which has none.\n  siblings?: Record<string, unknown>,\n): ReactNode {\n  const { pref, value, setValue } = ctx;\n  if (!isBuiltinToolPref(pref)) {\n    // App-defined kind with no `renderers` entry: labeled placeholder, not a\n    // crash — a missing wiring should be visible and recoverable.\n    return <span className={s.unrenderable}>({pref.kind}: no renderer)</span>;\n  }\n  switch (pref.kind) {\n    case 'boolean': {\n      const checked = Boolean(value);\n      return pref.control === 'switch' ? (\n        <Switch isSelected={checked} onChange={setValue} aria-label={pref.name} />\n      ) : (\n        <Checkbox isSelected={checked} onChange={setValue} aria-label={pref.name} />\n      );\n    }\n    case 'number': {\n      const n = typeof value === 'number' && Number.isFinite(value) ? value : 0;\n      if (pref.control === 'slider') {\n        return (\n          <RangeSlider\n            value={n}\n            onChange={(v) => setValue(typeof v === 'number' ? v : v[0])}\n            minValue={pref.min}\n            maxValue={pref.max}\n            step={pref.step ?? 1}\n            aria-label={pref.name}\n          />\n        );\n      }\n      return (\n        <NumberField\n          value={n}\n          onChange={setValue}\n          minValue={pref.min}\n          maxValue={pref.max}\n          step={pref.step ?? 1}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'string': {\n      const text = typeof value === 'string' ? value : '';\n      if (pref.control === 'textarea') {\n        return (\n          <textarea\n            className={s.textarea}\n            value={text}\n            onChange={(e) => setValue(e.target.value)}\n            aria-label={pref.name}\n            rows={3}\n          />\n        );\n      }\n      return <Input value={text} onChange={setValue} aria-label={pref.name} />;\n    }\n    case 'enum': {\n      const encoding = pref.encoding;\n      // An encoded leaf stores something other than the option string (a dash\n      // array), so reading the raw value selects nothing and writing one\n      // replaces the stored form with the option string.\n      const option = encoding\n        ? encoding.read(value, siblings)\n        : typeof value === 'string'\n          ? value\n          : pref.default;\n      const choose = (next: string): void =>\n        setValue(encoding ? encoding.write(next, siblings) : next);\n      if (pref.control === 'radio') {\n        return (\n          <RadioGroup value={option ?? null} onChange={choose} aria-label={pref.name}>\n            {pref.options.map((o) => (\n              <Radio key={o.value} value={o.value} isDisabled={o.disabled}>\n                {o.label}\n              </Radio>\n            ))}\n          </RadioGroup>\n        );\n      }\n      return (\n        <Select<string>\n          options={pref.options.map((o) => ({\n            value: o.value,\n            label: o.label,\n            isDisabled: o.disabled,\n          }))}\n          selectedKey={option ?? null}\n          onSelectionChange={choose}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'color': {\n      const hex = typeof value === 'string' ? value : pref.default;\n      return (\n        <ColorField\n          value={hex}\n          alpha={pref.alpha}\n          onChange={setValue}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'paint': {\n      // A whole `FillStyle`. A gradient or pattern has no single color to\n      // show, so the field goes blank rather than claiming one, and an edit\n      // writes a whole solid union member rather than grafting a `color` key\n      // onto the gradient.\n      const solid = solidColorOf(value) ?? solidColorOf(pref.default);\n      return (\n        <ColorField\n          value={solid}\n          alpha={pref.alpha}\n          onChange={(color) => setValue({ fill: 'solid', color })}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'object': {\n      // One value with its fields hanging off it: each child renders its own\n      // control and commits the parent object whole.\n      const p = pref;\n      const held = typeof value === 'object' && value !== null\n        ? (value as Record<string, unknown>)\n        : undefined;\n      const objectRows = (children: Record<string, PrefLeaf | PrefGroup>): ReactNode[] => {\n        const out: ReactNode[] = [];\n        for (const [key, child] of Object.entries(children)) {\n          if (!isPrefLeaf(child)) {\n            const inner = objectRows(child.children);\n            if (inner.length === 0) continue;\n            out.push(<h4 key={`group:${key}`} className={s.objectGroup}>{child.name}</h4>, ...inner);\n            continue;\n          }\n          out.push(\n            <label key={key} className={s.objectRow}>\n              <span className={s.objectLabel}>{child.name}</span>\n              {renderBuiltin({\n                path: `${ctx.path}.${key}`,\n                pref: child,\n                value: held?.[key],\n                setValue: (v) => {\n                  const base = held ?? p.fromScalar?.(value) ?? {};\n                  setValue({ ...base, [key]: v });\n                },\n              }, held)}\n            </label>,\n          );\n        }\n        return out;\n      };\n      return <div className={s.objectLeaf}>{objectRows(p.children)}</div>;\n    }\n    default: {\n      // Not reachable while every built-in kind has an arm — and a new kind\n      // that lacks one is a compile error here, never a blank row.\n      const _exhaustive: never = pref;\n      throw new Error(\n        `PrefsForm: no control for built-in pref kind \"${(_exhaustive as { kind: string }).kind}\"`,\n      );\n    }\n  }\n}\n","import type { ReactNode } from 'react';\nimport { Dialog } from '../Dialog';\nimport { PrefsForm, type PrefsFormProps } from './PrefsForm';\nimport s from './Prefs.module.css';\n\n/**\n * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus\n * the dialog's own open state and chrome.\n */\nexport interface PrefsDialogProps extends PrefsFormProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Dialog heading. Defaults to the schema root's `name`. */\n  title?: ReactNode;\n  /** Extra chrome rendered inline with the title (e.g. a dev-mode\n   *  \"Show hidden\" switch). */\n  headerExtra?: ReactNode;\n  /** Class applied to the dialog's modal box. */\n  dialogClassName?: string;\n}\n\n/**\n * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply\n * live through `onChange` — there is no OK/Cancel staging. For custom\n * placement (sidebar, popover, inline page), compose `PrefsForm`\n * directly; this wrapper is intentionally thin.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, dialogClassName, ...form } = props;\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      title={\n        headerExtra !== undefined ? (\n          <span className={s.titleRow}>\n            <span>{title ?? form.schema.name}</span>\n            {headerExtra}\n          </span>\n        ) : (\n          title ?? form.schema.name\n        )\n      }\n    >\n      <PrefsForm {...form} />\n    </Dialog>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Prefs-C2qhxnmt.js","names":[],"sources":["../../src/components/paintValue.ts","../../src/components/Prefs/schema.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["// Reading and writing the paint objects a property control may be pointed at.\n//\n// `data.fill` is a `FillStyle` and `data.stroke` a `Stroke`, so a control that\n// assumes either is a hex string reads `undefined` off it and writes a bare\n// string back over it. These helpers are what keep a control honest about the\n// shape it is holding.\n\n/** The color of a solid paint, or `undefined` for anything else — including a\n *  value that isn't a paint at all. `fill` is optional on the solid member of\n *  the union, so the tag alone can't decide it. */\nexport function solidColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null) return undefined;\n  const paint = value as { fill?: string; color?: unknown };\n  if (paint.fill !== undefined && paint.fill !== 'solid') return undefined;\n  return typeof paint.color === 'string' ? paint.color : undefined;\n}\n\n/** The single color a stroke shows, or `undefined` when it has none to show —\n *  a gradient or pattern stroke, or no stroke at all. */\nexport function strokeColorOf(value: unknown): string | undefined {\n  if (typeof value !== 'object' || value === null || !('paint' in value)) return undefined;\n  return solidColorOf((value as { paint: unknown }).paint);\n}\n","// Preference-schema vocabulary for PrefsForm / PrefsDialog / SelectionPanel:\n// core's `ToolPref*` family under this package's names. Never re-declare them\n// here — this was a hand-kept structural copy until it drifted, and the\n// independence from `@weasel-js/core` it bought is long gone anyway.\n\nexport type {\n  ToolPref as BuiltinPref,\n  ToolPrefBoolean as PrefBoolean,\n  ToolPrefBooleanControl as PrefBooleanControl,\n  ToolPrefColor as PrefColor,\n  ToolPrefCustom as PrefCustom,\n  ToolPrefEnum as PrefEnum,\n  ToolPrefEnumControl as PrefEnumControl,\n  ToolPrefEnumEncoding as PrefEnumEncoding,\n  ToolPrefGroup as PrefGroup,\n  ToolPrefKind as PrefKind,\n  ToolPrefLeaf as PrefLeaf,\n  ToolPrefNumber as PrefNumber,\n  ToolPrefNumberControl as PrefNumberControl,\n  ToolPrefNumberUnit as PrefNumberUnit,\n  ToolPrefObject as PrefObject,\n  ToolPrefPaint as PrefPaint,\n  ToolPrefString as PrefString,\n  ToolPrefStringControl as PrefStringControl,\n} from '@weasel-js/core';\n\nimport type { ToolPrefGroup, ToolPrefLeaf } from '@weasel-js/core';\n\n/** Distinguishes a leaf from a group while walking a schema tree. */\nexport function isPrefLeaf(node: ToolPrefLeaf | ToolPrefGroup): node is ToolPrefLeaf {\n  return 'kind' in node;\n}\n\n/** Get the value at a dotted path inside a nested value tree. Returns\n *  `undefined` when a segment is missing or hits a non-object. */\nexport function prefValueAtPath(values: unknown, path: string): unknown {\n  let cur: unknown = values;\n  for (const seg of path.split('.')) {\n    if (cur == null || typeof cur !== 'object') return undefined;\n    cur = (cur as Record<string, unknown>)[seg];\n  }\n  return cur;\n}\n\n/**\n * Recursively drop `hidden` leaves (unless `showHidden`), pruning groups\n * that end up empty. Returns null when the entire subtree is hidden.\n */\nexport function visiblePrefSubtree<T extends ToolPrefLeaf | ToolPrefGroup>(\n  node: T,\n  showHidden: boolean,\n): T | null {\n  if (isPrefLeaf(node)) return node.hidden && !showHidden ? null : node;\n  const group = node as ToolPrefGroup;\n  const children: Record<string, ToolPrefLeaf | ToolPrefGroup> = {};\n  for (const [key, child] of Object.entries(group.children)) {\n    const kept = visiblePrefSubtree(child, showHidden);\n    if (kept) children[key] = kept;\n  }\n  if (Object.keys(children).length === 0) return null;\n  return { ...node, children };\n}\n","/* Ported from WeaselDraw's wd-prefs-* rules (apps/draw/src/app.css),\n * generalized onto theme tokens. Column width is overridable via\n * --wzl-prefs-column-width at any ancestor scope. */\n\n.columns {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px;\n  overflow-y: auto;\n  padding-right: 4px;\n}\n\n.column {\n  flex: 0 0 var(--wzl-prefs-column-width, 300px);\n  width: var(--wzl-prefs-column-width, 300px);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-top: 6px;\n  padding: 8px 8px 8px 10px;\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  padding-bottom: 4px;\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: 2px;\n}\n\n.groupTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n\n.subpanel .groupTitle {\n  font-size: var(--wzl-font-size-sm);\n  text-transform: none;\n  letter-spacing: 0;\n}\n\n.groupDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n.rowLabel {\n  flex: 1 1 auto;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n/* Description affordance — quiet until hovered/focused. */\n.help {\n  flex: 0 0 auto;\n  padding: 0;\n  border: none;\n  background: none;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n  cursor: help;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.help:hover {\n  color: var(--wzl-fg);\n}\n\n.help:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n  color: var(--wzl-fg);\n}\n\n/* Control slot — fixed width so the label can take the rest of the row.\n * Kit form controls render as block-level flex columns that fill it. */\n.rowControl {\n  flex: 0 0 110px;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.textarea {\n  width: 100%;\n  padding: 4px 8px;\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  resize: vertical;\n}\n\n.unrenderable {\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n/* PrefsDialog header row: title text + optional headerExtra chrome. */\n.titleRow {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n  min-width: 0;\n}\n\n.titleRow > span:first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n/* An object leaf renders its fields as its own rows. */\n.objectLeaf {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  inline-size: 100%;\n}\n\n.objectRow {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: 8px;\n  align-items: center;\n}\n\n.objectLabel {\n  font-size: var(--wzl-font-size-sm);\n  opacity: 0.75;\n}\n\n.objectGroup {\n  margin: 4px 0 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.06em;\n  opacity: 0.55;\n}\n","import { useMemo, type ReactNode } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { Checkbox } from '../Checkbox';\nimport { ColorField } from '../ColorField';\nimport { solidColorOf } from '../paintValue';\nimport { Input } from '../Input';\nimport { NumberField } from '../NumberField';\nimport { RadioGroup, Radio } from '../RadioGroup';\nimport { RangeSlider } from '../RangeSlider';\nimport { Select } from '../Select';\nimport { Switch } from '../Switch';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { isBuiltinToolPref } from '@weasel-js/core';\nimport {\n  isPrefLeaf,\n  prefValueAtPath,\n  visiblePrefSubtree,\n  type PrefGroup,\n  type PrefLeaf,\n} from './schema';\nimport s from './Prefs.module.css';\n\n/** What a {@link PrefRenderer} is given for the leaf it is rendering. */\nexport interface PrefRenderContext {\n  /** Dotted path of the leaf within the schema root. */\n  path: string;\n  /** The schema node. App renderers narrow this to their own kind shape. */\n  pref: PrefLeaf;\n  /** Current value — `values` at `path`, falling back to `pref.default`. */\n  value: unknown;\n  setValue: (value: unknown) => void;\n}\n\n/**\n * Renders the control cell for one preference leaf. Returning `null`\n * collapses the row.\n */\nexport type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;\n\n/** Props for {@link PrefsForm}. */\nexport interface PrefsFormProps {\n  /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */\n  schema: PrefGroup;\n  /** Nested value tree (shape mirrors the schema). Sparse is fine —\n   *  missing leaves fall back to their schema `default`. */\n  values?: unknown;\n  /** Change callback with the leaf's dotted path. Values apply live;\n   *  there is no dirty/commit state. */\n  onChange: (path: string, value: unknown) => void;\n  /**\n   * Per-kind renderers for app-defined kinds. Entries also override the\n   * built-in kinds when keys collide. A renderer owns the control cell\n   * (the label/tooltip row chrome stays with the form, unless the leaf\n   * sets `block`); returning `null` collapses the row entirely. Unknown\n   * kinds with no renderer show a labeled placeholder instead of\n   * crashing.\n   */\n  renderers?: Record<string, PrefRenderer>;\n  /** Reveal `hidden` leaves (dev tooling). Default false. */\n  showHidden?: boolean;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Top-level groups render as columns,\n * nested groups as indented sub-panels, leaves as label + control rows.\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition,\n * and persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const { schema, values, onChange, renderers, showHidden = false, className } = props;\n  const visibleRoot = useMemo(\n    () => visiblePrefSubtree(schema, showHidden),\n    [schema, showHidden],\n  );\n  const ctx: WalkCtx = { values, onChange, renderers };\n  return (\n    <div className={[s.columns, className].filter(Boolean).join(' ')}>\n      {Object.entries(visibleRoot?.children ?? {}).map(([key, child]) => (\n        <div key={key} className={s.column}>\n          {isPrefLeaf(child) ? (\n            // Top-level leaves are unusual but legal — give each its own\n            // column for symmetry with grouped siblings.\n            <PrefRow ctx={ctx} path={key} pref={child} />\n          ) : (\n            <GroupBody ctx={ctx} group={child} path={key} depth={0} />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\ninterface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n}\n\nfunction GroupBody({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  return (\n    <div className={depth === 0 ? s.panel : s.subpanel}>\n      <div className={s.groupHeader}>\n        <h3 className={s.groupTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.groupDesc}>{group.description}</p>\n        )}\n      </div>\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const childPath = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={childPath} pref={child} />\n          ) : (\n            <GroupBody key={key} ctx={ctx} group={child} path={childPath} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nfunction PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n  };\n\n  const custom = ctx.renderers?.[pref.kind];\n  const control = custom ? custom(renderCtx) : renderBuiltin(renderCtx);\n  if (custom && control === null) return null;\n\n  // `block` leaves own their chrome (embedded editors with their own\n  // header) — no label/tooltip row.\n  if (pref.block) return <>{control}</>;\n\n  return (\n    <label className={s.row}>\n      <span className={s.rowLabel}>\n        {pref.name}\n        {pref.description ? (\n          // Help affordance carries the description tooltip. A tooltip\n          // trigger must be interactive (keyboard-reachable), so this is\n          // a real button — a bare label span would be neither focusable\n          // nor announced.\n          <TooltipTrigger>\n            <Focusable>\n              <button type=\"button\" className={s.help} aria-label={`About ${pref.name}`}>\n                ⓘ\n              </button>\n            </Focusable>\n            <Tooltip>{pref.description}</Tooltip>\n          </TooltipTrigger>\n        ) : null}\n      </span>\n      <span className={s.rowControl}>{control}</span>\n    </label>\n  );\n}\n\nfunction renderBuiltin(\n  ctx: PrefRenderContext,\n  // The object a nested leaf is a field of — what an enum `encoding` reads\n  // and writes against. Undefined for a top-level leaf, which has none.\n  siblings?: Record<string, unknown>,\n): ReactNode {\n  const { pref, value, setValue } = ctx;\n  if (!isBuiltinToolPref(pref)) {\n    // App-defined kind with no `renderers` entry: labeled placeholder, not a\n    // crash — a missing wiring should be visible and recoverable.\n    return <span className={s.unrenderable}>({pref.kind}: no renderer)</span>;\n  }\n  switch (pref.kind) {\n    case 'boolean': {\n      const checked = Boolean(value);\n      return pref.control === 'switch' ? (\n        <Switch isSelected={checked} onChange={setValue} aria-label={pref.name} />\n      ) : (\n        <Checkbox isSelected={checked} onChange={setValue} aria-label={pref.name} />\n      );\n    }\n    case 'number': {\n      const n = typeof value === 'number' && Number.isFinite(value) ? value : 0;\n      if (pref.control === 'slider') {\n        return (\n          <RangeSlider\n            value={n}\n            onChange={(v) => setValue(typeof v === 'number' ? v : v[0])}\n            minValue={pref.min}\n            maxValue={pref.max}\n            step={pref.step ?? 1}\n            aria-label={pref.name}\n          />\n        );\n      }\n      return (\n        <NumberField\n          value={n}\n          onChange={setValue}\n          minValue={pref.min}\n          maxValue={pref.max}\n          step={pref.step ?? 1}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'string': {\n      const text = typeof value === 'string' ? value : '';\n      if (pref.control === 'textarea') {\n        return (\n          <textarea\n            className={s.textarea}\n            value={text}\n            onChange={(e) => setValue(e.target.value)}\n            aria-label={pref.name}\n            rows={3}\n          />\n        );\n      }\n      return <Input value={text} onChange={setValue} aria-label={pref.name} />;\n    }\n    case 'enum': {\n      const encoding = pref.encoding;\n      // An encoded leaf stores something other than the option string (a dash\n      // array), so reading the raw value selects nothing and writing one\n      // replaces the stored form with the option string.\n      const option = encoding\n        ? encoding.read(value, siblings)\n        : typeof value === 'string'\n          ? value\n          : pref.default;\n      const choose = (next: string): void =>\n        setValue(encoding ? encoding.write(next, siblings) : next);\n      if (pref.control === 'radio') {\n        return (\n          <RadioGroup value={option ?? null} onChange={choose} aria-label={pref.name}>\n            {pref.options.map((o) => (\n              <Radio key={o.value} value={o.value} isDisabled={o.disabled}>\n                {o.label}\n              </Radio>\n            ))}\n          </RadioGroup>\n        );\n      }\n      return (\n        <Select<string>\n          options={pref.options.map((o) => ({\n            value: o.value,\n            label: o.label,\n            isDisabled: o.disabled,\n          }))}\n          selectedKey={option ?? null}\n          onSelectionChange={choose}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'color': {\n      const hex = typeof value === 'string' ? value : pref.default;\n      return (\n        <ColorField\n          value={hex}\n          alpha={pref.alpha}\n          onChange={setValue}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'paint': {\n      // A whole `FillStyle`. A gradient or pattern has no single color to\n      // show, so the field goes blank rather than claiming one, and an edit\n      // writes a whole solid union member rather than grafting a `color` key\n      // onto the gradient.\n      const solid = solidColorOf(value) ?? solidColorOf(pref.default);\n      return (\n        <ColorField\n          value={solid}\n          alpha={pref.alpha}\n          onChange={(color) => setValue({ fill: 'solid', color })}\n          aria-label={pref.name}\n        />\n      );\n    }\n    case 'object': {\n      // One value with its fields hanging off it: each child renders its own\n      // control and commits the parent object whole.\n      const p = pref;\n      const held = typeof value === 'object' && value !== null\n        ? (value as Record<string, unknown>)\n        : undefined;\n      const objectRows = (children: Record<string, PrefLeaf | PrefGroup>): ReactNode[] => {\n        const out: ReactNode[] = [];\n        for (const [key, child] of Object.entries(children)) {\n          if (!isPrefLeaf(child)) {\n            const inner = objectRows(child.children);\n            if (inner.length === 0) continue;\n            out.push(<h4 key={`group:${key}`} className={s.objectGroup}>{child.name}</h4>, ...inner);\n            continue;\n          }\n          out.push(\n            <label key={key} className={s.objectRow}>\n              <span className={s.objectLabel}>{child.name}</span>\n              {renderBuiltin({\n                path: `${ctx.path}.${key}`,\n                pref: child,\n                value: held?.[key],\n                setValue: (v) => {\n                  const base = held ?? p.fromScalar?.(value) ?? {};\n                  setValue({ ...base, [key]: v });\n                },\n              }, held)}\n            </label>,\n          );\n        }\n        return out;\n      };\n      return <div className={s.objectLeaf}>{objectRows(p.children)}</div>;\n    }\n    default: {\n      // Not reachable while every built-in kind has an arm — and a new kind\n      // that lacks one is a compile error here, never a blank row.\n      const _exhaustive: never = pref;\n      throw new Error(\n        `PrefsForm: no control for built-in pref kind \"${(_exhaustive as { kind: string }).kind}\"`,\n      );\n    }\n  }\n}\n","import type { ReactNode } from 'react';\nimport { Dialog } from '../Dialog';\nimport { PrefsForm, type PrefsFormProps } from './PrefsForm';\nimport s from './Prefs.module.css';\n\n/**\n * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus\n * the dialog's own open state and chrome.\n */\nexport interface PrefsDialogProps extends PrefsFormProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Dialog heading. Defaults to the schema root's `name`. */\n  title?: ReactNode;\n  /** Extra chrome rendered inline with the title (e.g. a dev-mode\n   *  \"Show hidden\" switch). */\n  headerExtra?: ReactNode;\n  /** Class applied to the dialog's modal box. */\n  dialogClassName?: string;\n}\n\n/**\n * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply\n * live through `onChange` — there is no OK/Cancel staging. For custom\n * placement (sidebar, popover, inline page), compose `PrefsForm`\n * directly; this wrapper is intentionally thin.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, dialogClassName, ...form } = props;\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      title={\n        headerExtra !== undefined ? (\n          <span className={s.titleRow}>\n            <span>{title ?? form.schema.name}</span>\n            {headerExtra}\n          </span>\n        ) : (\n          title ?? form.schema.name\n        )\n      }\n    >\n      <PrefsForm {...form} />\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{Properties-BRrWSBHM.js → Properties-CFRJ8mYH.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./dlog-CMYiRF3Q.js";
-import { n as t, t as n } from "./Tooltip-Di7vxbFa.js";
-import { i as r, n as i } from "./number-llMRJPJW.js";
-import { n as a } from "./CurveEditor-DiJk0NhK.js";
+import { n as t, t as n } from "./Tooltip-Bq8Hvj4r.js";
+import { i as r, n as i } from "./number-D3TDawLC.js";
+import { n as a } from "./CurveEditor-COJ6WK9K.js";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { useCallback as l, useMemo as u, useState as d } from "react";
 import { Focusable as f } from "react-aria-components";
@@ -152,47 +152,47 @@ function m({ values: t, min: n, max: r, step: i, width: o, height: d = 110, defa
 	});
 }
 var h = {
-	panel: "_panel_1owtf_9",
-	list: "_list_1owtf_3",
-	row: "_row_1owtf_4",
-	group: "_group_1owtf_4",
-	subpanel: "_subpanel_1owtf_3",
-	card: "_card_1owtf_14",
-	cardList: "_cardList_1owtf_15",
-	panelTitle: "_panelTitle_1owtf_35",
-	listPairs: "_listPairs_1owtf_3",
-	rowColor: "_rowColor_1owtf_4",
-	span: "_span_1owtf_66",
-	rowLabel: "_rowLabel_1owtf_94",
-	readout: "_readout_1owtf_120",
-	help: "_help_1owtf_132",
-	readoutInput: "_readoutInput_1owtf_164",
-	readoutGroup: "_readoutGroup_1owtf_202",
-	readoutUnit: "_readoutUnit_1owtf_208",
-	rowInline: "_rowInline_1owtf_268",
-	toggle: "_toggle_1owtf_281",
-	alpha: "_alpha_1owtf_369",
-	alphaDisabled: "_alphaDisabled_1owtf_387",
-	rowCheckbox: "_rowCheckbox_1owtf_409",
-	toggleButton: "_toggleButton_1owtf_441",
-	toggleButtonSelected: "_toggleButtonSelected_1owtf_467",
-	groupTitle: "_groupTitle_1owtf_486",
-	groupBody: "_groupBody_1owtf_4",
-	groupPairs: "_groupPairs_1owtf_517",
-	subpanelTitle: "_subpanelTitle_1owtf_549",
-	cardDragging: "_cardDragging_1owtf_593",
-	cardExpanded: "_cardExpanded_1owtf_597",
-	cardAccented: "_cardAccented_1owtf_601",
-	cardHead: "_cardHead_1owtf_616",
-	cardHandle: "_cardHandle_1owtf_637",
-	cardIndexBadge: "_cardIndexBadge_1owtf_650",
-	cardTitle: "_cardTitle_1owtf_668",
-	cardPrimary: "_cardPrimary_1owtf_678",
-	cardRemove: "_cardRemove_1owtf_693",
-	cardBody: "_cardBody_1owtf_722",
-	cardListWrap: "_cardListWrap_1owtf_734",
-	cardDropHint: "_cardDropHint_1owtf_738",
-	cardListEmpty: "_cardListEmpty_1owtf_746"
+	panel: "_panel_1t04m_9",
+	list: "_list_1t04m_3",
+	row: "_row_1t04m_4",
+	group: "_group_1t04m_4",
+	subpanel: "_subpanel_1t04m_3",
+	card: "_card_1t04m_14",
+	cardList: "_cardList_1t04m_15",
+	panelTitle: "_panelTitle_1t04m_35",
+	listPairs: "_listPairs_1t04m_3",
+	rowColor: "_rowColor_1t04m_4",
+	span: "_span_1t04m_66",
+	rowLabel: "_rowLabel_1t04m_94",
+	readout: "_readout_1t04m_120",
+	help: "_help_1t04m_132",
+	readoutInput: "_readoutInput_1t04m_164",
+	readoutGroup: "_readoutGroup_1t04m_202",
+	readoutUnit: "_readoutUnit_1t04m_208",
+	rowInline: "_rowInline_1t04m_268",
+	toggle: "_toggle_1t04m_286",
+	alpha: "_alpha_1t04m_401",
+	alphaDisabled: "_alphaDisabled_1t04m_419",
+	rowCheckbox: "_rowCheckbox_1t04m_441",
+	toggleButton: "_toggleButton_1t04m_473",
+	toggleButtonSelected: "_toggleButtonSelected_1t04m_499",
+	groupTitle: "_groupTitle_1t04m_518",
+	groupBody: "_groupBody_1t04m_4",
+	groupPairs: "_groupPairs_1t04m_549",
+	subpanelTitle: "_subpanelTitle_1t04m_581",
+	cardDragging: "_cardDragging_1t04m_625",
+	cardExpanded: "_cardExpanded_1t04m_629",
+	cardAccented: "_cardAccented_1t04m_633",
+	cardHead: "_cardHead_1t04m_648",
+	cardHandle: "_cardHandle_1t04m_669",
+	cardIndexBadge: "_cardIndexBadge_1t04m_682",
+	cardTitle: "_cardTitle_1t04m_700",
+	cardPrimary: "_cardPrimary_1t04m_710",
+	cardRemove: "_cardRemove_1t04m_725",
+	cardBody: "_cardBody_1t04m_754",
+	cardListWrap: "_cardListWrap_1t04m_766",
+	cardDropHint: "_cardDropHint_1t04m_770",
+	cardListEmpty: "_cardListEmpty_1t04m_778"
 };
 //#endregion
 //#region src/components/Properties/EffectCard.tsx
@@ -456,9 +456,10 @@ function T({ label: e, description: r }) {
 		children: "ⓘ"
 	}) }), /* @__PURE__ */ s(n, { children: r })] });
 }
-function E({ label: t, value: n, min: r, max: a, step: o = 1, onChange: c, format: l, unit: u, layout: d, description: f }) {
-	let p = o >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(o))));
+function E({ label: t, value: n, min: r, max: a, step: o = 1, onChange: c, format: l, unit: u, layout: d, description: f, span: p }) {
+	let m = o >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(o))));
 	return /* @__PURE__ */ s(w, {
+		span: p,
 		label: t,
 		readout: /* @__PURE__ */ s(D, {
 			value: n,
@@ -466,8 +467,8 @@ function E({ label: t, value: n, min: r, max: a, step: o = 1, onChange: c, forma
 			max: a,
 			format: l ?? ((e) => i(e, {
 				useGrouping: !1,
-				minimumFractionDigits: p,
-				maximumFractionDigits: p
+				minimumFractionDigits: m,
+				maximumFractionDigits: m
 			})),
 			unit: u,
 			onCommit: c
@@ -531,9 +532,10 @@ function D({ value: e, min: t, max: n, format: a, unit: o, onCommit: l }) {
 		}), g]
 	});
 }
-function O({ label: e, value: t, onChange: n, alpha: r, onAlphaChange: i, alphaDisabled: a, description: o }) {
-	let l = r != null;
+function O({ label: e, value: t, onChange: n, alpha: r, onAlphaChange: i, alphaDisabled: a, description: o, span: l }) {
+	let u = r != null;
 	return /* @__PURE__ */ c(w, {
+		span: l,
 		label: e,
 		variant: "color",
 		className: a ? h.alphaDisabled : void 0,
@@ -542,7 +544,7 @@ function O({ label: e, value: t, onChange: n, alpha: r, onAlphaChange: i, alphaD
 			type: "color",
 			value: t,
 			onChange: (e) => n(e.target.value)
-		}), l && /* @__PURE__ */ s("input", {
+		}), u && /* @__PURE__ */ s("input", {
 			type: "range",
 			className: h.alpha,
 			min: 0,
@@ -554,11 +556,12 @@ function O({ label: e, value: t, onChange: n, alpha: r, onAlphaChange: i, alphaD
 		})]
 	});
 }
-function k({ label: e, value: t, onChange: n, description: r }) {
+function k({ label: e, value: t, onChange: n, span: r, description: i }) {
 	return /* @__PURE__ */ s(w, {
+		span: r,
 		label: e,
 		variant: "checkbox",
-		description: r,
+		description: i,
 		children: /* @__PURE__ */ s("input", {
 			type: "checkbox",
 			checked: t,
@@ -566,8 +569,9 @@ function k({ label: e, value: t, onChange: n, description: r }) {
 		})
 	});
 }
-function A({ label: e, value: t, onChange: n, placeholder: r, maxLength: i, layout: a, description: o }) {
+function A({ label: e, value: t, onChange: n, placeholder: r, maxLength: i, layout: a, description: o, span: c }) {
 	return /* @__PURE__ */ s(w, {
+		span: c,
 		label: e,
 		layout: a,
 		description: o,
@@ -580,8 +584,9 @@ function A({ label: e, value: t, onChange: n, placeholder: r, maxLength: i, layo
 		})
 	});
 }
-function j({ label: e, value: t, onChange: n, min: r, max: i, step: a, placeholder: o, layout: c, description: l }) {
+function j({ label: e, value: t, onChange: n, min: r, max: i, step: a, placeholder: o, layout: c, description: l, span: u }) {
 	return /* @__PURE__ */ s(w, {
+		span: u,
 		label: e,
 		layout: c,
 		description: l,
@@ -601,8 +606,9 @@ function j({ label: e, value: t, onChange: n, min: r, max: i, step: a, placehold
 		})
 	});
 }
-function M({ label: t, value: n, options: r, onChange: i, layout: a, description: o }) {
+function M({ label: t, value: n, options: r, onChange: i, layout: a, description: o, span: c }) {
 	return /* @__PURE__ */ s(w, {
+		span: c,
 		label: t,
 		layout: a,
 		description: o,
@@ -622,8 +628,9 @@ function M({ label: t, value: n, options: r, onChange: i, layout: a, description
 		})
 	});
 }
-function N({ label: e, value: t, options: n, onChange: r, layout: i, description: a }) {
+function N({ label: e, value: t, options: n, onChange: r, layout: i, description: a, span: o }) {
 	return /* @__PURE__ */ s(w, {
+		span: o,
 		label: e,
 		layout: i,
 		description: a,
@@ -645,4 +652,4 @@ function N({ label: e, value: t, options: n, onChange: r, layout: i, description
 //#endregion
 export { x as a, M as c, N as d, b as f, m as g, g as h, S as i, E as l, y as m, O as n, w as o, _ as p, j as r, C as s, k as t, A as u };
 
-//# sourceMappingURL=Properties-BRrWSBHM.js.map
+//# sourceMappingURL=Properties-CFRJ8mYH.js.map

package/dist/chunks/Properties-CFRJ8mYH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Properties-CFRJ8mYH.js","names":[],"sources":["../../src/components/Properties/CurveField.module.css","../../src/components/Properties/CurveField.tsx","../../src/components/Properties/Properties.module.css","../../src/components/Properties/EffectCard.tsx","../../src/components/Properties/PropertyGroup.tsx","../../src/components/Properties/PropertyPanel.tsx"],"sourcesContent":[".field {\n  display: grid;\n  gap: 6px;\n  grid-column: 1 / -1;\n  box-sizing: border-box;\n}\n\n.field * {\n  box-sizing: border-box;\n}\n\n.plot {\n  position: relative;\n  width: 100%;\n}\n\n.marks {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n\n.actions {\n  display: flex;\n  gap: 6px;\n  justify-self: start;\n}\n\n.action {\n  background: transparent;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  padding: 4px 10px;\n  font-size: var(--wzl-font-size-sm);\n  cursor: pointer;\n}\n\n.action:hover {\n  background: var(--wzl-surface-raised);\n}\n","import { useCallback, useMemo } from 'react';\nimport { dlog } from '../../dlog';\nimport { type ControlPoint, CurveEditor } from '../CurveEditor';\nimport s from './CurveField.module.css';\n\n/** An annotation drawn over a curve plot: a shaded band across a range of x,\n *  or a vertical line at one x. */\nexport type CurveMark =\n  | { kind: 'band'; x: [number, number]; color?: string }\n  | { kind: 'line'; x: number; color?: string };\n\n/** Props for `<CurveField>`. */\nexport interface CurveFieldProps {\n  /** Flat [x0, y0, x1, y1, …] — matches how curve-as-array configs\n   *  serialize in JSON snapshots. */\n  values: number[];\n  min: number;\n  max: number;\n  step: number;\n  /** Plot width in CSS px. Caller sizes (typically uses a ResizeObserver). */\n  width: number;\n  /** Plot height in CSS px. Default 110. */\n  height?: number;\n  /** Flat default curve. When provided, a Reset button restores it. */\n  defaults?: readonly number[];\n  onChange: (next: number[]) => void;\n  /** Optional vertical marks overlaid on the plot (e.g. landmarks). */\n  marks?: readonly CurveMark[];\n}\n\n/**\n * A function-domain (y = f(x), x ∈ [0,1]) curve editor with per-stop\n * numeric readouts and flip buttons. Wraps weasel-ui's\n * `CurveEditor`; consumers wanting the raw editor (2D paths,\n * custom anchors) should import that instead.\n */\nexport function CurveField({\n  values,\n  min,\n  max,\n  step,\n  width,\n  height = 110,\n  defaults,\n  onChange,\n  marks,\n}: CurveFieldProps) {\n  const points: ControlPoint[] = useMemo(() => {\n    const out: ControlPoint[] = [];\n    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });\n    return out;\n  }, [values]);\n\n  const handleChange = useCallback(\n    (next: ControlPoint[]) => {\n      const flat: number[] = new Array(next.length * 2);\n      for (let i = 0; i < next.length; i++) {\n        const ySnap = Math.round(next[i].y / step) * step;\n        const y = Math.max(min, Math.min(max, ySnap));\n        flat[i * 2] = next[i].x;\n        flat[i * 2 + 1] = y;\n      }\n      dlog('curve-field', 'handleChange', {\n        nLen: next.length,\n        flatLen: flat.length,\n        sample: flat.slice(0, 4),\n      });\n      onChange(flat);\n    },\n    [onChange, min, max, step],\n  );\n\n  const handleFlip = useCallback(() => {\n    const flipped: Array<{ x: number; y: number }> = [];\n    for (let i = 0; i + 1 < values.length; i += 2) {\n      flipped.push({ x: 1 - values[i], y: values[i + 1] });\n    }\n    flipped.sort((a, b) => a.x - b.x);\n    const out: number[] = [];\n    for (const p of flipped) out.push(p.x, p.y);\n    onChange(out);\n  }, [values, onChange]);\n\n  const handleFlipVertical = useCallback(() => {\n    const mid = (min + max) / 2;\n    const flipped: number[] = new Array(values.length);\n    for (let i = 0; i + 1 < values.length; i += 2) {\n      flipped[i] = values[i];\n      flipped[i + 1] = 2 * mid - values[i + 1];\n    }\n    onChange(flipped);\n  }, [values, min, max, onChange]);\n\n  return (\n    <div className={s.field}>\n      <div className={s.plot}>\n        <CurveEditor\n          value={points}\n          onInput={handleChange}\n          domain=\"1d\"\n          constrain=\"function\"\n          xRange={[0, 1]}\n          yRange={[min, max]}\n          width={width}\n          height={height}\n          endpoints=\"pinned-x\"\n          addPointMode=\"click-curve\"\n          minPoints={2}\n          grid={{}}\n          history={false}\n        />\n        {marks && marks.length > 0 && (\n          <svg\n            className={s.marks}\n            width={width}\n            height={height}\n            viewBox={`0 0 ${width} ${height}`}\n            aria-hidden=\"true\"\n          >\n            {marks.map((m) => {\n              const color = m.color ?? '#ffcc00';\n              if (m.kind === 'band') {\n                const x0 = Math.max(0, Math.min(1, m.x[0])) * width;\n                const x1 = Math.max(0, Math.min(1, m.x[1])) * width;\n                const left = Math.min(x0, x1);\n                const w = Math.abs(x1 - x0);\n                return (\n                  <g key={`band-${m.x[0]}-${m.x[1]}-${color}`}>\n                    <rect x={left} y={0} width={w} height={height} fill={color} fillOpacity={0.4} />\n                    <line\n                      x1={left}\n                      y1={0}\n                      x2={left}\n                      y2={height}\n                      stroke={color}\n                      strokeOpacity={0.85}\n                      strokeWidth={1}\n                    />\n                    <line\n                      x1={left + w}\n                      y1={0}\n                      x2={left + w}\n                      y2={height}\n                      stroke={color}\n                      strokeOpacity={0.85}\n                      strokeWidth={1}\n                    />\n                  </g>\n                );\n              }\n              const x = Math.max(0, Math.min(1, m.x)) * width;\n              return (\n                <line\n                  key={`mark-${m.x}-${color}`}\n                  x1={x}\n                  y1={0}\n                  x2={x}\n                  y2={height}\n                  stroke={color}\n                  strokeWidth={1}\n                />\n              );\n            })}\n          </svg>\n        )}\n      </div>\n      <div className={s.actions}>\n        <button type=\"button\" className={s.action} onClick={handleFlip}>\n          Flip horizontally\n        </button>\n        <button type=\"button\" className={s.action} onClick={handleFlipVertical}>\n          Flip vertically\n        </button>\n        {defaults && (\n          <button\n            type=\"button\"\n            className={s.action}\n            onClick={() => onChange([...defaults])}\n          >\n            Reset\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n","/* One stylesheet for the whole property-panel family. PropertyList, PropertyRow,\n   PropertyGroup and Subpanel/EffectCard are styled together because the grid\n   rules genuinely cross components — `.listPairs > .subpanel` and\n   `.groupBody > :not(.rowColor)` name two components in one selector, and a CSS\n   Module can only compose local names within its own file. */\n\n/* Authored against a border-box reset (labkit's `.lk-root *`). weasel-ui has no\n   global reset, so the family restates it over its own subtrees. */\n.panel,\n.list,\n.row,\n.group,\n.subpanel,\n.card,\n.cardList,\n.panel *,\n.list *,\n.row *,\n.group *,\n.subpanel *,\n.card *,\n.cardList * {\n  box-sizing: border-box;\n}\n\n.panel {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-lg);\n  padding: 14px 16px;\n  backdrop-filter: blur(var(--wzl-glass-blur));\n  -webkit-backdrop-filter: blur(var(--wzl-glass-blur));\n}\n\n.panelTitle {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-lg);\n  line-height: var(--wzl-leading-snug);\n  letter-spacing: 0.01em;\n  color: var(--wzl-fg);\n  margin: 0 0 12px;\n}\n\n.list {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n  row-gap: 4px;\n  align-items: stretch;\n}\n\n/* Default packing: only color rows pair, everything else spans full width.\n   Scoped to NOT apply in pairs mode (otherwise this 0,2,0 selector beats the\n   pairs override below, which is only 0,1,0). */\n.list:not(.listPairs) > :not(.rowColor) {\n  grid-column: 1 / -1;\n}\n\n/* `pack=\"pairs\"` flips that: every row auto-places into the 2-col grid two\n   per row, and explicit full-width children opt in via the span helper class. */\n.listPairs > * {\n  min-width: 0;\n}\n\n.listPairs > .span,\n.listPairs > .subpanel,\n.listPairs > h3 {\n  grid-column: 1 / -1;\n}\n\n/* ── Row ────────────────────────────────────────────────────────\n   Default shape: label on top (with optional right-aligned readout),\n   control below. */\n\n.row {\n  display: flex;\n  flex-direction: column;\n  /* No gap by default — controls sit flush under their label, matching\n     speech-balloons `.field { gap: 0 }`. Slider rows pull tighter still\n     via a negative margin on the label below. */\n  gap: 0;\n  min-width: 0;\n}\n\n/* Slider rows: pull the track up under the label so the row reads as one\n   tight block rather than a label + a separate horizontal strip. Also\n   bottom-align the track within the row so paired rows in a 2-col grid\n   keep their tracks lined up even when one label wraps to two lines. */\n.row:has(> input[type='range']) {\n  justify-content: flex-end;\n}\n\n.row:has(> input[type='range']) > .rowLabel {\n  /* Baseline-align (not center) so the readout input doesn't inflate the\n     label-group height past the text baseline. */\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 4px;\n  margin-bottom: -4px;\n}\n\n.row > input[type='range'] {\n  margin-top: auto;\n}\n\n.rowLabel {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-snug);\n  color: var(--wzl-fg-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.readout {\n  font-style: normal;\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-accent);\n  margin-left: auto;\n}\n\n/* ⓘ help affordance beside a row label. Every dimension is stated because a\n   host app's bare-element defaults can be authored at zero specificity —\n   labkit's `:where(.lk-root) :where(button)` sets `height: var(--wzl-control-h)`\n   and horizontal padding, which would otherwise stretch a one-glyph button into\n   a full-height control. */\n.help {\n  flex: 0 0 auto;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.15em;\n  height: 1.15em;\n  padding: 0;\n  border: 0;\n  background: none;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n  color: var(--wzl-fg-subtle);\n  font-size: var(--wzl-font-size-sm);\n  line-height: 1;\n  letter-spacing: normal;\n  cursor: help;\n  border-radius: var(--wzl-radius-sm);\n}\n\n.help:hover {\n  color: var(--wzl-fg);\n  border-color: transparent;\n}\n\n.help:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: 1px;\n  color: var(--wzl-fg);\n}\n\n/* Single always-rendered <input> styled to read as a text label until focused. */\n.readoutInput {\n  font: inherit;\n  font-weight: var(--wzl-font-weight-medium);\n  /* Force leading-tight — the label parent inherits 1.2, which would make the\n     input box ~3px taller than the speech-balloons reference. */\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-accent);\n  background: transparent;\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  padding: 1px 0;\n  margin: 0;\n  width: calc(5em - 24px);\n  text-align: right;\n  cursor: text;\n  outline: none;\n  transition: background 80ms ease, border-color 80ms ease;\n  -moz-appearance: textfield;\n}\n\n.readoutInput:hover {\n  background: color-mix(in srgb, currentColor 8%, transparent);\n}\n\n.readoutInput:focus {\n  background: var(--wzl-surface-sunken);\n  border-color: var(--wzl-accent);\n}\n\n.readoutInput::-webkit-inner-spin-button,\n.readoutInput::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n/* Inline-block (not flex) so the browser's native vertical-align for\n   <sub>/<sup> still works inside — flex collapses baseline semantics\n   and sinks superscripts onto the baseline. */\n.readoutGroup {\n  display: inline-block;\n  white-space: nowrap;\n}\n\n/* Word-style units (e.g. \"px\") read as a small dim suffix next to the digits. */\n.readoutUnit {\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-2xs);\n  line-height: var(--wzl-leading-tight);\n  pointer-events: none;\n}\n\n/* Symbol units (e.g. `<sup>°</sup>`) lean on the browser's native super\n   positioning. Just dim them to match — do NOT set line-height: 0, that\n   would re-collapse the glyph onto the baseline. */\n.readoutGroup sup {\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-2xs);\n  pointer-events: none;\n}\n\n.row input[type='range'] {\n  /* Hairline track + small translucent thumb, tinted with the active --wzl-accent. */\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  width: 100%;\n  height: 12px;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n}\n\n.row input[type='range']::-webkit-slider-runnable-track {\n  height: 4px;\n  border-radius: var(--wzl-radius-sm);\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n}\n\n.row input[type='range']::-moz-range-track {\n  height: 4px;\n  border-radius: var(--wzl-radius-sm);\n  background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);\n}\n\n.row input[type='range']::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) 70%, transparent);\n  border: none;\n  margin-top: -2px;\n}\n\n.row input[type='range']::-moz-range-thumb {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: color-mix(in srgb, var(--wzl-accent) 70%, transparent);\n  border: none;\n}\n\n/* ── Inline layout: label sits to the left of the control. ────── */\n.rowInline {\n  flex-direction: row;\n  align-items: center;\n  /* Label on the left edge, field on the right: fields of different widths\n     still line up as one rail down the column. */\n  justify-content: space-between;\n  gap: 6px;\n}\n\n.rowInline .rowLabel {\n  /* The label never gives: shrinking it breaks a name like `silhouette_width`\n     mid-word, since it carries no break opportunity of its own. The field is\n     what yields as the column narrows. */\n  flex: 0 0 auto;\n}\n\n.rowInline > input,\n.rowInline > select,\n.rowInline > .toggle {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n/* Fields size to their content, not to the row they happen to sit in: a number\n   is a handful of digits and a short string is a word. Stated as a width and\n   not as a `min(100%, …)`, because an auto-width sidebar sizes to what its\n   fields ask for and a percentage asks for an input's 20-character default. */\n.row input[type='number']:not(.readoutInput) {\n  width: var(--wzl-prop-number-width, 9ch);\n  max-width: 100%;\n}\n\n.row input[type='text']:not(.readoutInput) {\n  width: var(--wzl-prop-text-width, 16ch);\n  max-width: 100%;\n}\n\n/* An inline row stays on one line: the field gives up width to the label as the\n   column narrows, down to a floor that still shows a value. */\n.rowInline > input:not(.readoutInput),\n.rowInline > select {\n  flex: 0 1 auto;\n  min-width: 4ch;\n}\n\n.rowInline input[type='range'] {\n  width: auto;\n}\n\n.row input[type='text']:not(.readoutInput),\n.row input[type='number'] {\n  background: var(--wzl-surface-sunken);\n  color: var(--wzl-fg);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  /* Height is stated rather than padded to, because the display face's line box\n     is half again its font size — padding a field to size makes it 27px tall\n     around 13px of text and no amount of trimming the padding fixes that. */\n  height: var(--wzl-prop-field-height, 20px);\n  padding: 0 6px;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size);\n  line-height: var(--wzl-leading-tight);\n}\n\n.row input[type='text']:not(.readoutInput):focus,\n.row input[type='number']:focus {\n  outline: 1px solid var(--wzl-accent);\n}\n\n/* Selects in property rows render borderless — chevron only, transparent\n   background, no chrome. Keep the native arrow via appearance: auto so users\n   still see something clickable. */\n.row select {\n  background: transparent;\n  color: var(--wzl-fg);\n  border: 0;\n  border-radius: 0;\n  height: var(--wzl-prop-field-height, 20px);\n  padding: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size);\n  line-height: var(--wzl-leading-tight);\n  cursor: pointer;\n}\n\n.row select:focus {\n  outline: 1px solid var(--wzl-accent);\n  outline-offset: 2px;\n}\n\n/* ── Color variant: label and swatch side-by-side, two per row in the grid.\n   Switches to a 2-row grid when an alpha slider is rendered beneath. */\n.rowColor {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto;\n  align-content: end;\n  column-gap: 8px;\n  row-gap: 0;\n  min-width: 0;\n}\n\n.rowColor .rowLabel {\n  grid-column: 1;\n  grid-row: 1;\n  align-self: center;\n  flex: initial;\n  min-width: 0;\n}\n\n/* 36×24, hairline border, no padding. Padding: 0 is important — the native\n   <input type=\"color\"> in some browsers (esp. Chrome) inflates beyond its\n   declared box when given padding, which expands the grid row and pushes\n   the paired slider track out of bottom alignment. */\n.rowColor input[type='color'] {\n  grid-column: 2;\n  grid-row: 1;\n  align-self: center;\n  box-sizing: border-box;\n  width: 36px;\n  height: 18px;\n  background: transparent;\n  border: 0;\n  border-radius: var(--wzl-radius-sm);\n  padding: 0;\n  cursor: pointer;\n  flex-shrink: 0;\n}\n\n/* Alpha slider: full-width second row beneath the color swatch. */\n.rowColor input[type='range'].alpha {\n  grid-column: 1 / -1;\n  grid-row: 2;\n  height: 12px;\n  width: 100%;\n  margin: 0;\n}\n\n.rowColor input[type='range'].alpha::-webkit-slider-runnable-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n.rowColor input[type='range'].alpha::-moz-range-track {\n  background: color-mix(in srgb, var(--wzl-accent) 10%, transparent);\n}\n\n/* Disabled state: dim the track, hide the thumb, swap the cursor — used when\n   the consumer of the color drops alpha so the affordance reads as inert. */\n.rowColor.alphaDisabled input[type='range'].alpha {\n  cursor: not-allowed;\n  opacity: 0.55;\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-webkit-slider-runnable-track {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-moz-range-track {\n  background: rgba(255, 255, 255, 0.05);\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-webkit-slider-thumb {\n  background: transparent;\n}\n\n.rowColor.alphaDisabled input[type='range'].alpha::-moz-range-thumb {\n  background: transparent;\n}\n\n/* ── Checkbox variant: control-first inline layout, no uppercase label. */\n.rowCheckbox {\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n\n.rowCheckbox .rowLabel {\n  text-transform: none;\n  letter-spacing: normal;\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  /* Place the label after the checkbox visually. */\n  order: 1;\n}\n\n.rowCheckbox input[type='checkbox'] {\n  accent-color: var(--wzl-accent);\n  width: 14px;\n  height: 14px;\n  cursor: pointer;\n}\n\n/* ── Segmented toggle group ───────────────────────────────────── */\n.toggle {\n  display: flex;\n  width: 100%;\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  overflow: hidden;\n}\n\n.toggleButton {\n  flex: 1;\n  height: 26px;\n  padding: 0 8px;\n  background: rgba(0, 0, 0, 0.25);\n  color: var(--wzl-fg-muted);\n  border: 0;\n  border-radius: 0;\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-tight);\n  cursor: pointer;\n  backdrop-filter: none;\n  -webkit-backdrop-filter: none;\n}\n\n.toggleButton + .toggleButton {\n  border-left: 1px solid var(--wzl-border);\n}\n\n.toggleButton:hover {\n  color: var(--wzl-fg);\n  border-color: var(--wzl-border);\n}\n\n.toggleButtonSelected {\n  background: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.toggleButtonSelected:hover {\n  color: var(--wzl-fg-on-accent);\n}\n\n/* ── PropertyGroup ──────────────────────────────────────────────────\n   Bordered, sunken section inside a list. */\n.group {\n  grid-column: 1 / -1;\n  background: var(--wzl-surface-sunken);\n  border-radius: var(--wzl-radius-md);\n  padding: 6px 10px 8px;\n}\n\n.groupTitle {\n  display: grid;\n  grid-template-columns: 1fr auto 1fr;\n  align-items: center;\n  gap: 8px;\n  margin: 0 0 4px;\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  letter-spacing: var(--wzl-tracking-wider);\n  text-transform: uppercase;\n  color: var(--wzl-fg-subtle);\n}\n\n.groupTitle hr {\n  border: 0;\n  border-top: 1px solid var(--wzl-border);\n  margin: 0;\n}\n\n.groupBody {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n  row-gap: 4px;\n  /* Stretch so paired rows match in height — slider rows then bottom-align\n     their tracks (via `margin-top: auto`) and stay lined up even when one\n     sibling's label wraps to two lines. */\n  align-items: stretch;\n}\n\n.group:not(.groupPairs) .groupBody > :not(.rowColor) {\n  grid-column: 1 / -1;\n}\n\n.groupPairs .groupBody > * {\n  grid-column: auto;\n}\n\n.groupPairs .groupBody > h3,\n.groupPairs .groupBody > .span {\n  grid-column: 1 / -1;\n}\n\n/* ── Subpanel ────────────────────────────────────────────────────────\n   Headered group of controls inside a list. The header is a typographic\n   label flanked by a horizontal rule — no card chrome, just the divider. */\n.subpanel {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: 10px;\n  row-gap: 3px;\n  align-items: stretch;\n  background: transparent;\n  border: 0;\n  padding: 0;\n  margin: 0;\n}\n\n.subpanel > * {\n  min-width: 0;\n}\n\n.subpanel > .subpanelTitle,\n.subpanel > .span {\n  grid-column: 1 / -1;\n}\n\n.subpanelTitle {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-fg);\n  text-transform: uppercase;\n  letter-spacing: var(--wzl-tracking-wider);\n  margin: 0;\n  padding: 6px 0 4px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.subpanelTitle > span {\n  flex: 0 0 auto;\n}\n\n.subpanelTitle > hr {\n  flex: 1 1 auto;\n  border: 0;\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\n  margin: 0;\n}\n\n/* ── EffectCard ──────────────────────────────────────────────────────\n   Draggable, collapsible card. Optional --wzl-effect-card-accent re-binds the\n   local --wzl-accent so every descendant control auto-tints. */\n.card {\n  background: rgba(0, 0, 0, 0.25);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  transition: background 120ms ease, border-color 120ms ease;\n}\n\n.cardDragging {\n  opacity: 0.45;\n}\n\n.cardExpanded {\n  background: rgba(0, 0, 0, 0.3);\n}\n\n.cardAccented {\n  /* Re-bind --wzl-accent inside the card so every descendant style that paints\n     with var(--wzl-accent) (readouts, slider thumb, etc.) picks up the\n     per-card tint automatically. */\n  --wzl-accent: var(--wzl-effect-card-accent);\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 4%, rgba(0, 0, 0, 0.28));\n  border-color: color-mix(in srgb, var(--wzl-effect-card-accent) 28%, var(--wzl-border));\n  border-left-width: 4px;\n  border-left-color: var(--wzl-effect-card-accent);\n}\n\n.cardAccented.cardExpanded {\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 5%, rgba(0, 0, 0, 0.35));\n}\n\n.cardAccented .cardHead {\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 38%, rgba(0, 0, 0, 0.4));\n}\n\n.cardAccented .cardHead:hover {\n  background: color-mix(in srgb, var(--wzl-effect-card-accent) 48%, rgba(0, 0, 0, 0.35));\n}\n\n.cardHead {\n  display: flex;\n  align-items: baseline;\n  gap: 8px;\n  padding: 2px 10px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.cardHead:hover {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n.cardHandle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--wzl-fg-muted);\n  cursor: grab;\n  padding: 0 2px;\n}\n\n.cardHandle:active {\n  cursor: grabbing;\n}\n\n.cardIndexBadge {\n  /* Rendered as a <button> (keyboard-operable drag/toggle handle); strip the\n     native button chrome so it matches the surrounding badge styling. */\n  appearance: none;\n  border: 0;\n  background: none;\n  display: inline-flex;\n  align-items: baseline;\n  justify-content: center;\n  min-width: 14px;\n  padding: 0 2px;\n  color: var(--wzl-effect-card-accent, var(--wzl-fg-muted));\n  font-size: var(--wzl-font-size);\n  font-weight: var(--wzl-font-weight-bold);\n  font-family: var(--wzl-font-mono);\n  line-height: 1;\n}\n\n.cardTitle {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size);\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-fg);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.cardPrimary {\n  font-family: var(--wzl-font-ui);\n  font-weight: var(--wzl-font-weight-medium);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading-tight);\n  color: var(--wzl-fg);\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  padding: 2px 6px;\n  margin-left: auto;\n}\n\n/* Push the remove button to the right edge — whether it follows a primary\n   chip or sits alone after the title. */\n.cardHead .cardRemove,\n.cardHead .cardPrimary + .cardRemove {\n  margin-left: auto;\n}\n\n.cardHead .cardPrimary ~ .cardRemove {\n  margin-left: 4px;\n}\n\n.cardRemove {\n  background: transparent;\n  color: var(--wzl-fg-muted);\n  border: 1px solid transparent;\n  border-radius: var(--wzl-radius-sm);\n  width: 22px;\n  height: 22px;\n  font-size: var(--wzl-font-size);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.cardRemove:hover {\n  color: var(--wzl-danger-fg, var(--wzl-danger));\n  border-color: color-mix(in srgb, var(--wzl-danger) 40%, transparent);\n  background: color-mix(in srgb, var(--wzl-danger) 8%, transparent);\n}\n\n.cardBody {\n  padding: 4px 12px 12px;\n  border-top: 1px solid var(--wzl-border);\n}\n\n/* ── EffectCardList ────────────────────────────────────────────────── */\n.cardList {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.cardListWrap {\n  position: relative;\n}\n\n.cardDropHint {\n  height: 0;\n  border-top: 2px solid var(--wzl-accent);\n  border-radius: var(--wzl-radius-sm);\n  margin: 2px 0;\n  box-shadow: 0 0 6px color-mix(in srgb, var(--wzl-accent) 60%, transparent);\n}\n\n.cardListEmpty {\n  font-family: var(--wzl-font-display);\n  font-weight: var(--wzl-font-weight-light);\n  font-size: var(--wzl-font-size-sm);\n  line-height: var(--wzl-leading);\n  color: var(--wzl-fg-muted);\n  text-align: center;\n  padding: 16px 12px;\n  border: 1px dashed var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n","import { type CSSProperties, type ReactNode, useState } from 'react';\nimport s from './Properties.module.css';\n\n// ── Subpanel ─────────────────────────────────────────────────────────\n// Headered group of controls inside a wider panel/list. The header is a\n// label flanked by a horizontal rule — no background, padding, or border;\n// purely a typographic divider. Ported from speech-balloons styles.css:277-313.\n\n/** Props for `<Subpanel>`. */\nexport interface SubpanelProps {\n  title: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** A typographic divider inside a property list: a small title flanked by a\n *  rule. Purely a heading — use `<PropertyGroup>` for a bordered section. */\nexport function Subpanel({ title, children, className }: SubpanelProps) {\n  const cls = className ? `${s.subpanel} ${className}` : s.subpanel;\n  return (\n    <div className={cls}>\n      <h4 className={s.subpanelTitle}>\n        <span>{title}</span>\n        <hr />\n      </h4>\n      {children}\n    </div>\n  );\n}\n\n// ── EffectCard ───────────────────────────────────────────────────────\n// Draggable, collapsible card for stacked effect editors. Optional\n// --wzl-effect-card-accent per-instance recolors the title bar, border-left, and\n// (via re-binding --wzl-accent inside the card) every descendant control that\n// reads from the accent token.\n\n/** Props for `<EffectCard>`. */\nexport interface EffectCardProps {\n  /** Card title rendered in the title bar (e.g. effect kind label or a select). */\n  title: ReactNode;\n  /** Optional badge/chip displayed before the remove button (e.g. primary value summary). */\n  primary?: ReactNode;\n  /** Optional accent color in any CSS color form. Sets --wzl-effect-card-accent on the card. */\n  accent?: string;\n  /** Optional ordinal badge that doubles as the drag handle (used by tail cards in SB). */\n  index?: number;\n  expanded?: boolean;\n  onToggleExpanded?: () => void;\n  onRemove?: () => void;\n  /**\n   * Drag-handle wiring. When provided, an inline handle (⋮⋮ icon or `index`)\n   * activates HTML5 drag on press. Consumer owns the drag/drop coordination —\n   * see EffectCardList for the batteries-included wrapper.\n   */\n  draggable?: boolean;\n  onPressHandle?: () => void;\n  onReleaseHandle?: () => void;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDragOver?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDragLeave?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n  dragging?: boolean;\n  children?: ReactNode;\n  className?: string;\n}\n\n/** An accented, collapsible card for one item in a list of like things —\n *  effects, layers, tails. The accent color rebinds the theme accent token\n *  within the card, so its controls pick it up too. */\nexport function EffectCard({\n  title,\n  primary,\n  accent,\n  index,\n  expanded = true,\n  onToggleExpanded,\n  onRemove,\n  draggable,\n  onPressHandle,\n  onReleaseHandle,\n  onDragStart,\n  onDragEnd,\n  onDragOver,\n  onDragLeave,\n  onDrop,\n  dragging,\n  children,\n  className,\n}: EffectCardProps) {\n  const stateClass = `${expanded ? ` ${s.cardExpanded}` : ''}${dragging ? ` ${s.cardDragging}` : ''}${accent ? ` ${s.cardAccented}` : ''}`;\n  const cls = `${s.card}${stateClass}${className ? ` ${className}` : ''}`;\n  // Per-instance dynamic color → CSS custom property requires inline style.\n  // The card's CSS re-binds --wzl-accent to it so descendants tint.\n  const style = accent ? ({ '--wzl-effect-card-accent': accent } as CSSProperties) : undefined;\n\n  // When a toggle handler is supplied the header acts as a disclosure button:\n  // role + tab stop + Enter/Space. Bundled together so the interactive props are\n  // applied as a set (no half-interactive element when onToggleExpanded is absent).\n  const headProps = onToggleExpanded\n    ? {\n        role: 'button' as const,\n        tabIndex: 0,\n        onClick: onToggleExpanded,\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onToggleExpanded();\n          }\n        },\n      }\n    : {};\n\n  return (\n    // biome-ignore lint/a11y/noStaticElementInteractions: native HTML5 drag-and-drop container — drag events are not click/keyboard interactions and have no semantic element; the in-card handle and header carry the a11y affordances.\n    <div\n      className={cls}\n      style={style}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragEnd={onDragEnd}\n      onDragOver={onDragOver}\n      onDragLeave={onDragLeave}\n      onDrop={onDrop}\n    >\n      <div className={s.cardHead} {...headProps}>\n        {index != null ? (\n          <button\n            type=\"button\"\n            className={`${s.cardIndexBadge} ${s.cardHandle}`}\n            title=\"Drag to reorder · click to toggle\"\n            aria-label={`Item ${index + 1} — drag to reorder, click to toggle`}\n            onMouseDown={onPressHandle}\n            onMouseUp={onReleaseHandle}\n            onClick={(e) => {\n              e.stopPropagation();\n              onToggleExpanded?.();\n            }}\n          >\n            {index + 1}\n          </button>\n        ) : (\n          <span\n            className={s.cardHandle}\n            aria-hidden=\"true\"\n            title=\"Drag to reorder\"\n            onMouseDown={onPressHandle}\n            onMouseUp={onReleaseHandle}\n          >\n            <DragHandleIcon />\n          </span>\n        )}\n        <span className={s.cardTitle}>{title}</span>\n        {primary != null && <span className={s.cardPrimary}>{primary}</span>}\n        {onRemove && (\n          <button\n            type=\"button\"\n            className={s.cardRemove}\n            onClick={(e) => {\n              e.stopPropagation();\n              onRemove();\n            }}\n            title=\"Remove\"\n            aria-label=\"Remove\"\n          >\n            ✕\n          </button>\n        )}\n      </div>\n      {expanded && <div className={s.cardBody}>{children}</div>}\n    </div>\n  );\n}\n\nfunction DragHandleIcon() {\n  return (\n    <svg width=\"10\" height=\"14\" viewBox=\"0 0 10 14\" aria-hidden=\"true\">\n      <circle cx=\"3\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"7\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"3\" cy=\"7\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"7\" cy=\"7\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"3\" cy=\"11\" r=\"1.3\" fill=\"currentColor\" />\n      <circle cx=\"7\" cy=\"11\" r=\"1.3\" fill=\"currentColor\" />\n    </svg>\n  );\n}\n\n// ── EffectCardList ───────────────────────────────────────────────────\n// Batteries-included list wrapper that coordinates HTML5 drag-and-drop across\n// a list of EffectCards. Consumer supplies items + a renderItem callback;\n// onReorder fires with (sourceId, targetId, position) on drop. Mirrors the\n// LayerStack pattern from speech-balloons Lab.tsx:630-707.\n\n/** The minimum an item must carry to appear in an `<EffectCardList>`. */\nexport interface EffectCardListItem {\n  id: string | number;\n}\n\n/** Props for `<EffectCardList>`. */\nexport interface EffectCardListProps<T extends EffectCardListItem> {\n  items: ReadonlyArray<T>;\n  renderItem: (\n    item: T,\n    helpers: {\n      isExpanded: boolean;\n      isDragging: boolean;\n      toggleExpanded: () => void;\n      cardProps: Pick<\n        EffectCardProps,\n        | 'expanded'\n        | 'dragging'\n        | 'draggable'\n        | 'onToggleExpanded'\n        | 'onPressHandle'\n        | 'onReleaseHandle'\n        | 'onDragStart'\n        | 'onDragEnd'\n        | 'onDragOver'\n        | 'onDragLeave'\n        | 'onDrop'\n      >;\n    },\n  ) => ReactNode;\n  onReorder: (sourceId: T['id'], targetId: T['id'], position: 'before' | 'after') => void;\n  /** Optional rendered when the list is empty. */\n  empty?: ReactNode;\n  /** IDs to render expanded on first mount. Defaults to all collapsed. */\n  defaultExpandedIds?: ReadonlyArray<T['id']>;\n}\n\n/** A drag-reorderable list of `<EffectCard>`s. Owns the expanded and dragging\n *  state and hands it back to `renderItem`, so the caller only supplies each\n *  card's contents. */\nexport function EffectCardList<T extends EffectCardListItem>({\n  items,\n  renderItem,\n  onReorder,\n  empty,\n  defaultExpandedIds,\n}: EffectCardListProps<T>) {\n  const [expanded, setExpanded] = useState<Set<T['id']>>(() => new Set(defaultExpandedIds ?? []));\n  const [draggingId, setDraggingId] = useState<T['id'] | null>(null);\n  const [pressedId, setPressedId] = useState<T['id'] | null>(null);\n  const [dropHint, setDropHint] = useState<{ id: T['id']; position: 'before' | 'after' } | null>(\n    null,\n  );\n\n  if (items.length === 0) {\n    return <>{empty ?? <div className={s.cardListEmpty}>No items.</div>}</>;\n  }\n\n  return (\n    <div className={s.cardList}>\n      {items.map((item) => {\n        const isExpanded = expanded.has(item.id);\n        const isDragging = draggingId === item.id;\n        const isPressed = pressedId === item.id;\n        const showHintBefore =\n          dropHint && dropHint.id === item.id && dropHint.position === 'before';\n        const showHintAfter = dropHint && dropHint.id === item.id && dropHint.position === 'after';\n\n        const toggleExpanded = () =>\n          setExpanded((prev) => {\n            const next = new Set(prev);\n            if (next.has(item.id)) next.delete(item.id);\n            else next.add(item.id);\n            return next;\n          });\n\n        return (\n          <div key={String(item.id)} className={s.cardListWrap}>\n            {showHintBefore && <div className={s.cardDropHint} />}\n            {renderItem(item, {\n              isExpanded,\n              isDragging,\n              toggleExpanded,\n              cardProps: {\n                expanded: isExpanded,\n                dragging: isDragging,\n                draggable: isPressed,\n                onToggleExpanded: toggleExpanded,\n                onPressHandle: () => setPressedId(item.id),\n                onReleaseHandle: () => setPressedId(null),\n                onDragStart: (e) => {\n                  e.dataTransfer.effectAllowed = 'move';\n                  e.dataTransfer.setData('text/plain', String(item.id));\n                  setDraggingId(item.id);\n                },\n                onDragEnd: () => {\n                  setDraggingId(null);\n                  setPressedId(null);\n                  setDropHint(null);\n                },\n                onDragOver: (e) => {\n                  if (draggingId === null || draggingId === item.id) return;\n                  e.preventDefault();\n                  e.dataTransfer.dropEffect = 'move';\n                  const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n                  const position: 'before' | 'after' =\n                    e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';\n                  setDropHint({ id: item.id, position });\n                },\n                onDragLeave: () => {\n                  setDropHint((h) => (h && h.id === item.id ? null : h));\n                },\n                onDrop: (e) => {\n                  e.preventDefault();\n                  if (draggingId === null || draggingId === item.id) {\n                    setDropHint(null);\n                    return;\n                  }\n                  const rect = (e.currentTarget as HTMLDivElement).getBoundingClientRect();\n                  const position: 'before' | 'after' =\n                    e.clientY < rect.top + rect.height / 2 ? 'before' : 'after';\n                  onReorder(draggingId, item.id, position);\n                  setDropHint(null);\n                },\n              },\n            })}\n            {showHintAfter && <div className={s.cardDropHint} />}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport s from './Properties.module.css';\n\n/** Props for `<PropertyGroup>`. */\nexport interface PropertyGroupProps {\n  /** Title rendered between two rules at the top of the group. */\n  title: ReactNode;\n  /** When true the group renders nothing — useful for conditional sections. */\n  hidden?: boolean;\n  children: ReactNode;\n  className?: string;\n  /**\n   * How rows pack into the 2-column grid.\n   *   - `'auto-color'` (default): only color rows pair side-by-side; everything\n   *     else spans the full width.\n   *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.\n   */\n  pack?: 'auto-color' | 'pairs';\n}\n\n/**\n * Visually-bordered group inside a PropertyList. Use to scope a set of\n * related rows under a heading (e.g. \"Aqua\", \"Bevel\", \"Dome\" sections\n * inside a fill effect's controls).\n */\nexport function PropertyGroup({\n  title,\n  hidden,\n  children,\n  className,\n  pack = 'auto-color',\n}: PropertyGroupProps) {\n  if (hidden) return null;\n  const packClass = pack === 'pairs' ? ` ${s.groupPairs}` : '';\n  const cls = `${s.group}${packClass}${className ? ` ${className}` : ''}`;\n  return (\n    <div className={cls}>\n      <h3 className={s.groupTitle}>\n        <hr />\n        <span>{title}</span>\n        <hr />\n      </h3>\n      <div className={s.groupBody}>{children}</div>\n    </div>\n  );\n}\n","import { type ReactNode, useState } from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { dlog } from '../../dlog';\nimport { formatNumber, parseSignedNumber } from '../../format/number';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport s from './Properties.module.css';\n\n/** Props for `<PropertyPanel>`. */\nexport interface PropertyPanelProps {\n  title?: ReactNode;\n  children: ReactNode;\n  className?: string;\n}\n\n/** A titled panel holding property rows — the sidebar container the rest of\n *  this module's components fill. */\nexport function PropertyPanel({ title, children, className }: PropertyPanelProps) {\n  const cls = className ? `${s.panel} ${className}` : s.panel;\n  return (\n    <div className={cls}>\n      {title != null && <h2 className={s.panelTitle}>{title}</h2>}\n      {children}\n    </div>\n  );\n}\n\n/** How a property list packs its rows into two columns. */\nexport type PropertyListPack = 'auto-color' | 'pairs';\n\n/** Props for `<PropertyList>`. */\nexport interface PropertyListProps {\n  children: ReactNode;\n  className?: string;\n  /**\n   * How rows pack into the 2-column grid.\n   *   - `'auto-color'` (default): only color rows pair side-by-side; everything\n   *     else spans the full width. Right for sparse top-level panels.\n   *   - `'pairs'`: every row auto-places into the 2-column grid two-per-row.\n   *     Headers and subpanels still span the full width; wrap any other\n   *     full-width child in `<PropertySpan>`. Right for dense effect bodies.\n   */\n  pack?: PropertyListPack;\n}\n\n/**\n * Grid container for PropertyRows. Use standalone for chrome-less layouts, or\n * nest inside <PropertyPanel/> for the standard glass card.\n */\nexport function PropertyList({ children, className, pack = 'auto-color' }: PropertyListProps) {\n  const packClass = pack === 'pairs' ? ` ${s.listPairs}` : '';\n  const cls = `${s.list}${packClass}${className ? ` ${className}` : ''}`;\n  return <div className={cls}>{children}</div>;\n}\n\n/** Props for `<PropertySpan>`. */\nexport interface PropertySpanProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Wrapper that makes an arbitrary child span both columns of a\n * `<PropertyList pack=\"pairs\">`, a `<PropertyGroup pack=\"pairs\">` body, or a\n * `<Subpanel>`. `<PropertyRow span>` covers the row case; this covers\n * everything else a consumer puts in the grid.\n */\nexport function PropertySpan({ children, className }: PropertySpanProps) {\n  return <div className={className ? `${s.span} ${className}` : s.span}>{children}</div>;\n}\n\n/** Which control shape a row holds, which decides its intrinsic layout. */\nexport type PropertyRowVariant = 'default' | 'color' | 'checkbox';\n/** Whether a row's label sits above its control or beside it. */\nexport type PropertyRowLayout = 'block' | 'inline';\n\n/** Props for `<PropertyRow>`. */\nexport interface PropertyRowProps {\n  label: ReactNode;\n  /** Right-aligned readout shown next to the label (e.g. current value). */\n  readout?: ReactNode;\n  /**\n   * Help text for the row, shown in a tooltip off an ⓘ affordance beside the\n   * label. Empty or absent renders no affordance.\n   */\n  description?: string;\n  variant?: PropertyRowVariant;\n  /**\n   * Label position relative to the control. \"block\" (default) stacks\n   * label above control; \"inline\" places the label to the left.\n   * Color and checkbox variants are always inline by their own nature.\n   */\n  layout?: PropertyRowLayout;\n  /**\n   * Take the full width of the enclosing grid. Only has an effect inside a\n   * `<PropertyList pack=\"pairs\">` or a `<Subpanel>`; elsewhere rows are already\n   * full width.\n   */\n  span?: boolean;\n  children: ReactNode;\n  htmlFor?: string;\n  className?: string;\n}\n\n/** The label-plus-control frame every typed row below is built from. Use it\n *  directly for a control this module does not cover. */\nexport function PropertyRow({\n  label,\n  readout,\n  description,\n  variant = 'default',\n  layout = 'block',\n  span,\n  children,\n  htmlFor,\n  className,\n}: PropertyRowProps) {\n  const variantClass = variant === 'color' ? ` ${s.rowColor}` : variant === 'checkbox' ? ` ${s.rowCheckbox}` : '';\n  // Layout only meaningfully applies to the default variant; color and\n  // checkbox have their own intrinsic orientation.\n  const layoutClass = variant === 'default' && layout === 'inline' ? ` ${s.rowInline}` : '';\n  const spanClass = span ? ` ${s.span}` : '';\n  const cls = `${s.row}${variantClass}${layoutClass}${spanClass}${className ? ` ${className}` : ''}`;\n  return (\n    <label className={cls} htmlFor={htmlFor}>\n      <span className={s.rowLabel}>\n        {label}\n        {description ? <PropertyRowHelp label={label} description={description} /> : null}\n        {readout != null && <em className={s.readout}>{readout}</em>}\n      </span>\n      {children}\n    </label>\n  );\n}\n\n/** Tooltip trigger for a row's `description`. A tooltip trigger has to be\n *  interactive to be keyboard-reachable, so this is a real button. */\nfunction PropertyRowHelp({ label, description }: { label: ReactNode; description: string }) {\n  const name = typeof label === 'string' ? label : 'this setting';\n  return (\n    <TooltipTrigger>\n      <Focusable>\n        <button\n          type=\"button\"\n          className={s.help}\n          aria-label={`About ${name}`}\n          onClick={(e) => {\n            // The wrapping <label> would otherwise actuate the row's control.\n            e.preventDefault();\n            e.stopPropagation();\n          }}\n          onMouseDown={(e) => e.stopPropagation()}\n        >\n          ⓘ\n        </button>\n      </Focusable>\n      <Tooltip>{description}</Tooltip>\n    </TooltipTrigger>\n  );\n}\n\n// ── Row implementations ──────────────────────────────────────────────\n\n/** Props for `<SliderRow>`. */\nexport interface SliderRowProps {\n  label: ReactNode;\n  value: number;\n  min: number;\n  max: number;\n  step?: number;\n  onChange: (next: number) => void;\n  /** Override how the value is rendered next to the label. Defaults to `value.toString()`. */\n  format?: (value: number) => ReactNode;\n  /**\n   * Optional suffix rendered next to the readout. A string becomes a\n   * baseline-aligned dim \"word\" unit (e.g. \"px\"); pass JSX like `<sup>°</sup>`\n   * to get the browser's native super positioning for symbol units.\n   */\n  unit?: ReactNode;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A bounded number edited by dragging, with a live readout whose precision\n *  follows `step`. */\nexport function SliderRow({\n  label,\n  value,\n  min,\n  max,\n  step = 1,\n  onChange,\n  format,\n  unit,\n  layout,\n  description,\n  span,\n}: SliderRowProps) {\n  // Default readout precision tracks `step`: integer steps → 0 decimals,\n  // 0.1 → 1 decimal, 0.05/0.02/0.01 → 2 decimals, 0.005 → 3, etc. Callers\n  // can still pass an explicit `format` to override (e.g. for a custom\n  // unit string or a non-decimal display like fractions).\n  const decimals = step >= 1 ? 0 : Math.min(6, Math.max(0, Math.ceil(-Math.log10(step))));\n  const effectiveFormat =\n    format ??\n    ((n: number) =>\n      formatNumber(n, {\n        useGrouping: false,\n        minimumFractionDigits: decimals,\n        maximumFractionDigits: decimals,\n      }));\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      readout={\n        <EditableReadout\n          value={value}\n          min={min}\n          max={max}\n          format={effectiveFormat}\n          unit={unit}\n          onCommit={onChange}\n        />\n      }\n      layout={layout}\n      description={description}\n    >\n      <input\n        type=\"range\"\n        tabIndex={-1}\n        min={min}\n        max={max}\n        step={step}\n        value={value}\n        onChange={(e) => {\n          const v = Number(e.target.value);\n          dlog('property-panel', 'slider', { label, value: v });\n          onChange(v);\n        }}\n      />\n    </PropertyRow>\n  );\n}\n\ninterface EditableReadoutProps {\n  value: number;\n  min: number;\n  max: number;\n  format?: (value: number) => ReactNode;\n  unit?: ReactNode;\n  onCommit: (next: number) => void;\n}\n\n/**\n * Readout that swaps to a number input on click, commits on Enter/blur,\n * cancels on Escape. Clicks are stopped so the wrapping <label> doesn't\n * forward focus to the slider thumb.\n */\nfunction EditableReadout({ value, min, max, format, unit, onCommit }: EditableReadoutProps) {\n  // Draft is non-null only while the input is focused. Live value mirrors\n  // into the input otherwise. Pattern mirrors speech-balloons Lab.tsx:893-942.\n  const [draft, setDraft] = useState<string | null>(null);\n  const fmt = (n: number) =>\n    format ? format(n) : formatNumber(n, { useGrouping: false, maximumFractionDigits: 20 });\n  const displayValue =\n    draft !== null\n      ? draft\n      : (() => {\n          const formatted = fmt(value);\n          return typeof formatted === 'string' ? formatted : String(formatted);\n        })();\n\n  const suffix =\n    unit == null ? null : typeof unit === 'string' ? (\n      <span className={s.readoutUnit}>{unit}</span>\n    ) : (\n      unit\n    );\n\n  const commit = () => {\n    if (draft !== null) {\n      const n = parseSignedNumber(draft);\n      if (Number.isFinite(n)) onCommit(Math.min(max, Math.max(min, n)));\n    }\n    setDraft(null);\n  };\n\n  return (\n    <span className={s.readoutGroup}>\n      <input\n        type=\"text\"\n        inputMode=\"decimal\"\n        className={s.readoutInput}\n        value={displayValue}\n        onFocus={(e) => {\n          const formatted = fmt(value);\n          setDraft(typeof formatted === 'string' ? formatted : String(formatted));\n          e.currentTarget.select();\n        }}\n        onChange={(e) => setDraft(e.target.value.replace(/-/g, '−'))}\n        onBlur={commit}\n        onClick={(e) => {\n          // Stop the click from reaching the wrapping <label> (which would\n          // forward focus to the slider thumb).\n          e.preventDefault();\n          e.stopPropagation();\n          e.currentTarget.focus();\n        }}\n        onMouseDown={(e) => e.stopPropagation()}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            commit();\n            e.currentTarget.blur();\n          } else if (e.key === 'Escape') {\n            setDraft(null);\n            e.currentTarget.blur();\n          }\n        }}\n      />\n      {suffix}\n    </span>\n  );\n}\n\n/** Props for `<ColorRow>`. */\nexport interface ColorRowProps {\n  label: ReactNode;\n  value: string;\n  onChange: (next: string) => void;\n  /** 0..1 alpha. When provided, a translucent slider renders beneath the swatch. */\n  alpha?: number;\n  onAlphaChange?: (next: number) => void;\n  /**\n   * Render the alpha track as inert (dimmed, no thumb, not-allowed cursor).\n   * Use when the color's consumer drops alpha so the affordance reads dead.\n   */\n  alphaDisabled?: boolean;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A color swatch, optionally with an alpha slider beneath it. */\nexport function ColorRow({\n  label,\n  value,\n  onChange,\n  alpha,\n  onAlphaChange,\n  alphaDisabled,\n  description,\n  span,\n}: ColorRowProps) {\n  const showAlpha = alpha != null;\n  const className = alphaDisabled ? s.alphaDisabled : undefined;\n  return (\n    <PropertyRow span={span} label={label} variant=\"color\" className={className} description={description}>\n      <input type=\"color\" value={value} onChange={(e) => onChange(e.target.value)} />\n      {showAlpha && (\n        <input\n          type=\"range\"\n          className={s.alpha}\n          min={0}\n          max={1}\n          step={0.01}\n          value={alpha}\n          disabled={alphaDisabled}\n          onChange={(e) => onAlphaChange?.(Number(e.target.value))}\n        />\n      )}\n    </PropertyRow>\n  );\n}\n\n/** Props for `<CheckboxRow>`. */\nexport interface CheckboxRowProps {\n  label: ReactNode;\n  value: boolean;\n  onChange: (next: boolean) => void;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A boolean checkbox. */\nexport function CheckboxRow({ label, value, onChange, span, description }: CheckboxRowProps) {\n  return (\n    <PropertyRow span={span} label={label} variant=\"checkbox\" description={description}>\n      <input type=\"checkbox\" checked={value} onChange={(e) => onChange(e.target.checked)} />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<TextRow>`. */\nexport interface TextRowProps {\n  label: ReactNode;\n  value: string;\n  onChange: (next: string) => void;\n  placeholder?: string;\n  maxLength?: number;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A single-line text input. */\nexport function TextRow({\n  label,\n  value,\n  onChange,\n  placeholder,\n  maxLength,\n  layout,\n  description,\n  span,\n}: TextRowProps) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <input\n        type=\"text\"\n        value={value}\n        placeholder={placeholder}\n        maxLength={maxLength}\n        onChange={(e) => onChange(e.target.value)}\n      />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<NumberRow>`. */\nexport interface NumberRowProps {\n  label: ReactNode;\n  value: number;\n  onChange: (next: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  placeholder?: string;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A number typed directly. Reach for `<SliderRow>` when the range matters\n *  more than the exact value. */\nexport function NumberRow({\n  label,\n  value,\n  onChange,\n  min,\n  max,\n  step,\n  placeholder,\n  layout,\n  description,\n  span,\n}: NumberRowProps) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <input\n        type=\"number\"\n        value={value}\n        min={min}\n        max={max}\n        step={step}\n        placeholder={placeholder}\n        onChange={(e) => {\n          const raw = e.target.value;\n          if (raw === '') return;\n          const n = Number(raw);\n          if (Number.isFinite(n)) onChange(n);\n        }}\n      />\n    </PropertyRow>\n  );\n}\n\nexport interface PropertyOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/** Props for `<SelectRow>`. */\nexport interface SelectRowProps<T extends string> {\n  label: ReactNode;\n  value: T;\n  options: ReadonlyArray<PropertyOption<T>>;\n  onChange: (next: T) => void;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A dropdown over a fixed set of choices. Prefer `<ToggleRow>` when there\n *  are only two or three and they should all stay visible. */\nexport function SelectRow<T extends string>({\n  label,\n  value,\n  options,\n  onChange,\n  layout,\n  description,\n  span,\n}: SelectRowProps<T>) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <select\n        value={value}\n        onChange={(e) => {\n          const v = e.target.value as T;\n          dlog('property-panel', 'select', { label, value: v });\n          onChange(v);\n        }}\n      >\n        {options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {/* HTML <option> only renders text; ReactNode → string coerce */}\n            {opt.label as string}\n          </option>\n        ))}\n      </select>\n    </PropertyRow>\n  );\n}\n\n/** Props for `<ToggleRow>`. */\nexport interface ToggleRowProps<T extends string> {\n  label: ReactNode;\n  value: T;\n  options: ReadonlyArray<PropertyOption<T>>;\n  onChange: (next: T) => void;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A segmented control: the same choice as a select, with every option\n *  visible at once. */\nexport function ToggleRow<T extends string>({\n  label,\n  value,\n  options,\n  onChange,\n  layout,\n  description,\n  span,\n}: ToggleRowProps<T>) {\n  return (\n    <PropertyRow span={span} label={label} layout={layout} description={description}>\n      <div className={s.toggle}>\n        {options.map((opt) => {\n          const selected = opt.value === value;\n          return (\n            <button\n              key={opt.value}\n              type=\"button\"\n              aria-pressed={selected}\n              className={\n                selected ? `${s.toggleButton} ${s.toggleButtonSelected}` : s.toggleButton\n              }\n              onClick={() => onChange(opt.value)}\n            >\n              {opt.label}\n            </button>\n          );\n        })}\n      </div>\n    </PropertyRow>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{RadioGroup-BrtV1Clm.js → RadioGroup-B8eMJ6lu.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./Field-DrRby9vo.js";
+import { n as e } from "./Field-BCcTt6Fd.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { FieldError as r, Label as i, Radio as a, RadioGroup as o, Text as s } from "react-aria-components";
 var c = {
@@ -46,4 +46,4 @@ function u({ children: e, className: r, ...i }) {
 //#endregion
 export { l as n, u as t };
 
-//# sourceMappingURL=RadioGroup-BrtV1Clm.js.map
+//# sourceMappingURL=RadioGroup-B8eMJ6lu.js.map