@weasel-js/ui 1.4.2 → 1.4.3

package/dist/chunks/{Properties-fLSEE65J.js.map → Properties-CMLua9mU.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Properties-fLSEE65J.js","names":[],"sources":["../../src/components/Properties/CurveField.module.css","../../src/components/Properties/CurveField.tsx","../../src/components/Properties/Properties.module.css","../../src/components/Properties/PropertyPanel.tsx","../../src/components/Properties/EffectCard.tsx","../../src/components/Properties/PropertyGroup.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/* ── Container metrics ──────────────────────────────────────────────\n   Every spacing number the family lays out with is read from a `--wzl-prop-*`\n   custom property with its own value as the fallback, so a consumer can move\n   any of them from an ancestor without selector surgery. The `density` classes\n   below set them in preset bundles; nothing in this file declares one, so an\n   inherited value always reaches the use site. */\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: var(--wzl-prop-panel-pad, 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 var(--wzl-prop-panel-title-gap, 12px);\n}\n\n.list {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: var(--wzl-prop-column-gap, 10px);\n  row-gap: var(--wzl-prop-row-gap, 4px);\n  align-items: stretch;\n  /* A property panel is dense: its fields are shorter and tighter than a\n     standalone Input. Mapped here, on the container, so one declaration moves\n     every field in the panel — and read from the container-level name so a\n     density set further up is not shadowed by this declaration. */\n  --wzl-field-h: var(--wzl-prop-field-h, 20px);\n  --wzl-field-pad-x: var(--wzl-prop-field-pad-x, 6px);\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/* `pack=\"one-up\"` gives every row the full width, color rows included — the\n   one packing a palette can be built from. */\n.listOneUp > * {\n  grid-column: 1 / -1;\n}\n\n/* ── density ────────────────────────────────────────────────────────\n   Preset bundles for the container metrics above. Set on whichever container\n   the consumer puts `density` on; every metric inherits down from there, so a\n   panel sets the whole family and a single group can still differ. `normal`\n   states its values rather than omitting them, so a group can go back to the\n   default inside a tighter panel. */\n\n.densityTight {\n  --wzl-prop-row-gap: 2px;\n  --wzl-prop-subpanel-row-gap: 2px;\n  --wzl-prop-column-gap: 8px;\n  --wzl-prop-panel-pad: 10px 12px;\n  --wzl-prop-panel-title-gap: 8px;\n  --wzl-prop-group-pad: 4px 8px 6px;\n  --wzl-prop-group-title-gap: 2px;\n  --wzl-prop-field-h: 18px;\n  --wzl-prop-field-pad-x: 5px;\n}\n\n.densityNormal {\n  --wzl-prop-row-gap: 4px;\n  --wzl-prop-subpanel-row-gap: 3px;\n  --wzl-prop-column-gap: 10px;\n  --wzl-prop-panel-pad: 14px 16px;\n  --wzl-prop-panel-title-gap: 12px;\n  --wzl-prop-group-pad: 6px 10px 8px;\n  --wzl-prop-group-title-gap: 4px;\n  --wzl-prop-field-h: 20px;\n  --wzl-prop-field-pad-x: 6px;\n}\n\n.densityRoomy {\n  --wzl-prop-row-gap: 8px;\n  --wzl-prop-subpanel-row-gap: 7px;\n  --wzl-prop-column-gap: 14px;\n  --wzl-prop-panel-pad: 18px 20px;\n  --wzl-prop-panel-title-gap: 16px;\n  --wzl-prop-group-pad: 10px 14px 12px;\n  --wzl-prop-group-title-gap: 6px;\n  --wzl-prop-field-h: 24px;\n  --wzl-prop-field-pad-x: 8px;\n}\n\n/* ── align ──────────────────────────────────────────────────────────\n   Where an inline row's label and control sit on the row's cross axis.\n   Inherits like density does, so a column of color rows lines its swatches up\n   on one edge from a single declaration on the list.\n\n   Two names, because a color row aligns twice: its items within their grid row,\n   and the whole grid within the row's box. They agree except at `baseline`,\n   which `align-content` does not take — there the grid goes to the top and the\n   items find the label's baseline inside it. */\n\n.alignStart {\n  --wzl-prop-row-align: start;\n  --wzl-prop-row-align-content: start;\n}\n\n.alignCenter {\n  --wzl-prop-row-align: center;\n  --wzl-prop-row-align-content: center;\n}\n\n.alignEnd {\n  --wzl-prop-row-align: end;\n  --wzl-prop-row-align-content: end;\n}\n\n.alignBaseline {\n  --wzl-prop-row-align: baseline;\n  --wzl-prop-row-align-content: start;\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.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-focus-ring);\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.fieldUnitGroup {\n  display: inline-block;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.fieldUnitGroup .readoutUnit {\n  margin-left: 4px;\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.fieldUnitGroup sup {\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-2xs);\n  pointer-events: none;\n}\n\n/* ── Inline layout: label sits to the left of the control. ────── */\n.rowInline {\n  flex-direction: row;\n  align-items: var(--wzl-prop-row-align, 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  -moz-appearance: textfield;\n  appearance: textfield;\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-field-h, var(--wzl-control-h));\n  padding: 0 var(--wzl-field-pad-x);\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/* Numbers right-align so a column of them shares a decimal position; text does\n   not, so this cannot live in the rule the two share. */\n.row input[type='number'] {\n  text-align: right;\n}\n\n/* Chrome reserves the spin-button gutter at the right edge whether or not the\n   arrows are painted, so a right-aligned value stops ~20px short of its own\n   border and the row reads as if something is missing from that space. The\n   panel drives numbers by typing and dragging, never by the steppers.\n   `.readoutInput` has always dropped them; this is the same removal for the\n   typed field beside it. */\n.row input[type='number']::-webkit-inner-spin-button,\n.row input[type='number']::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.row input[type='text']:not(.readoutInput):focus,\n.row input[type='number']:focus {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\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-field-h, var(--wzl-control-h));\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/* An outline rather than the boxed family's inset ring: a property-row select\n   is borderless, so there is no border to recolour. */\n.row select:focus {\n  outline: 1px solid var(--wzl-focus-ring);\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/* `align-content: end` sinks the whole grid so a color row paired with a\n   taller sibling keeps its alpha track on the neighbour's bottom edge. An\n   explicit `align` overrides both that and the per-item alignment below, which\n   is what a column of swatches read as a group needs. */\n.rowColor {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto;\n  align-content: var(--wzl-prop-row-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: var(--wzl-prop-row-align, 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: var(--wzl-prop-row-align, 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/* `layout=\"block\"` stacks the color row: label, then swatch, then alpha. */\n.rowColor.rowBlock {\n  grid-template-columns: 1fr;\n}\n\n.rowColor.rowBlock .rowLabel {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n.rowColor.rowBlock input[type='color'] {\n  grid-column: 1;\n  grid-row: 2;\n  justify-self: start;\n}\n\n.rowColor.rowBlock input[type='range'].alpha {\n  grid-row: 3;\n}\n\n/* ── Checkbox variant: control-first inline layout, no uppercase label. */\n.rowCheckbox {\n  flex-direction: row;\n  align-items: var(--wzl-prop-row-align, 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/* `layout=\"block\"` stacks the checkbox row: label above, box beneath, both on\n   the leading edge — a block row's cross axis is the horizontal one. */\n.rowCheckbox.rowBlock {\n  flex-direction: column;\n  align-items: var(--wzl-prop-row-align, start);\n}\n\n.rowCheckbox.rowBlock .rowLabel {\n  order: 0;\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: var(--wzl-prop-group-pad, 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 var(--wzl-prop-group-title-gap, 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/* A twisty leads the title, so the head takes over the title's bottom gap and\n   the two sit on one line. */\n.groupHead {\n  margin-bottom: var(--wzl-prop-group-title-gap, 4px);\n}\n\n.groupHead .groupTitle {\n  margin-bottom: 0;\n}\n\n/* `hidden` on its own loses to the body's `display: grid` below. */\n.groupBody[hidden] {\n  display: none;\n}\n\n.groupBody {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: var(--wzl-prop-column-gap, 10px);\n  row-gap: var(--wzl-prop-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.groupOneUp .groupBody > * {\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: var(--wzl-prop-column-gap, 10px);\n  row-gap: var(--wzl-prop-subpanel-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 ReactNode, useEffect, useRef, 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 shared from '../range.module.css';\nimport s from './Properties.module.css';\n\n/**\n * How much room a container gives its rows — gaps, padding, and field height,\n * moved together. Set on any container in the family; it reaches every\n * descendant, so an inner group can differ from the panel around it.\n */\nexport type PropertyDensity = 'tight' | 'normal' | 'roomy';\n\n/** Where an inline row's label and control sit on the row's cross axis. Set on\n *  a container to line a whole column of them up. */\nexport type PropertyAlign = 'start' | 'center' | 'end' | 'baseline';\n\n/** Metric props every container in the family takes. Both reach descendants,\n *  so the nearest container that states one wins. */\nexport interface PropertyMetricProps {\n  /** Room the rows get. Unset inherits from an outer container, else `normal`. */\n  density?: PropertyDensity;\n  /**\n   * Cross-axis alignment of an inline row's label and control. `baseline` sits\n   * the control on the label's first-line baseline, which is what lines a\n   * column of swatches up against labels of different heights. Unset keeps each\n   * variant's own alignment — a color row centers its label and swatch and\n   * sinks the pair to the row's bottom edge, which keeps a paired alpha track\n   * level with its neighbour.\n   */\n  align?: PropertyAlign;\n}\n\nconst DENSITY_CLASS: Record<PropertyDensity, string> = {\n  tight: s.densityTight,\n  normal: s.densityNormal,\n  roomy: s.densityRoomy,\n};\n\nconst ALIGN_CLASS: Record<PropertyAlign, string> = {\n  start: s.alignStart,\n  center: s.alignCenter,\n  end: s.alignEnd,\n  baseline: s.alignBaseline,\n};\n\n/** Joins a container's base class with its metric classes and the consumer's.\n *  Exported for the family's other files, which share the same two props. */\nexport function propertyMetricClass(\n  base: string,\n  { density, align }: PropertyMetricProps,\n  className?: string,\n): string {\n  return [base, density && DENSITY_CLASS[density], align && ALIGN_CLASS[align], className]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/** Props for `<PropertyPanel>`. */\nexport interface PropertyPanelProps extends PropertyMetricProps {\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({\n  title,\n  children,\n  className,\n  density,\n  align,\n}: PropertyPanelProps) {\n  return (\n    <div className={propertyMetricClass(s.panel, { density, align }, className)}>\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' | 'one-up';\n\n/** Props for `<PropertyList>`. */\nexport interface PropertyListProps extends PropertyMetricProps {\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   *   - `'one-up'`: every row spans the full width, color rows included. Right\n   *     for a palette — a column of swatches read as a group.\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({\n  children,\n  className,\n  pack = 'auto-color',\n  density,\n  align,\n}: PropertyListProps) {\n  const base = `${s.list}${pack === 'pairs' ? ` ${s.listPairs}` : pack === 'one-up' ? ` ${s.listOneUp}` : ''}`;\n  return <div className={propertyMetricClass(base, { density, align }, className)}>{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 extends PropertyMetricProps {\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. Unset takes the variant's own\n   * orientation: `block` — label above control — for the default variant, and\n   * `inline` for the color and checkbox variants, which read as a row.\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,\n  span,\n  children,\n  htmlFor,\n  className,\n  density,\n  align,\n}: PropertyRowProps) {\n  const variantClass = variant === 'color' ? s.rowColor : variant === 'checkbox' ? s.rowCheckbox : '';\n  // Each variant already lays out one way; a class is only needed for the\n  // other one. The default variant stacks, so it needs `.rowInline`; color and\n  // checkbox read as a row, so they need `.rowBlock`.\n  const intrinsic: PropertyRowLayout = variant === 'default' ? 'block' : 'inline';\n  const resolved = layout ?? intrinsic;\n  const layoutClass =\n    resolved === intrinsic ? '' : resolved === 'inline' ? s.rowInline : s.rowBlock;\n  const cls = propertyMetricClass(\n    [s.row, variantClass, layoutClass, span && s.span].filter(Boolean).join(' '),\n    { density, align },\n    className,\n  );\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 extends PropertyMetricProps {\n  label: ReactNode;\n  value: number;\n  min: number;\n  max: number;\n  step?: number;\n  /**\n   * The committed value. Given `onInput` as well, it fires once a drag ends\n   * or a typed readout is accepted; on its own it fires on every move, which\n   * is what a row with one callback has always done.\n   */\n  onChange: (next: number) => void;\n  /**\n   * The live value, fired continuously through a drag. Pass it alongside\n   * `onChange` when the write is expensive — cheap state here, the costly\n   * work there. Mirrors `<Slider>`'s `onInput` / `onChange` pair.\n   */\n  onInput?: (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  onInput,\n  format,\n  unit,\n  layout,\n  description,\n  span,\n  density,\n  align,\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 live = onInput ?? onChange;\n  const commit = onInput ? onChange : undefined;\n  const range = useRef<HTMLInputElement>(null);\n  const latestCommit = useRef(commit);\n  useEffect(() => {\n    latestCommit.current = commit;\n  });\n  useEffect(() => {\n    const el = range.current;\n    if (!el) return;\n    // The commit half is the platform's: a range input fires `input` through\n    // the drag and `change` once, on release. React's synthetic onChange sees\n    // only the first, since its value tracker drops the unchanged second.\n    const onCommit = () => latestCommit.current?.(Number(el.value));\n    el.addEventListener('change', onCommit);\n    return () => el.removeEventListener('change', onCommit);\n  }, []);\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={(next) => {\n            live(next);\n            commit?.(next);\n          }}\n        />\n      }\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      <input\n        ref={range}\n        type=\"range\"\n        className={shared.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          live(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 extends PropertyMetricProps {\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  /** Label beside the swatch (default) or above it. */\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 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  layout,\n  description,\n  span,\n  density,\n  align,\n}: ColorRowProps) {\n  const showAlpha = alpha != null;\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      variant=\"color\"\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      <input type=\"color\" value={value} onChange={(e) => onChange(e.target.value)} />\n      {showAlpha && (\n        <input\n          type=\"range\"\n          className={`${shared.range} ${shared.alpha} ${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 extends PropertyMetricProps {\n  label: ReactNode;\n  value: boolean;\n  onChange: (next: boolean) => void;\n  /** Label beside the box (default) or above it. */\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 boolean checkbox. */\nexport function CheckboxRow({\n  label,\n  value,\n  onChange,\n  layout,\n  span,\n  description,\n  density,\n  align,\n}: CheckboxRowProps) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      variant=\"checkbox\"\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      <input type=\"checkbox\" checked={value} onChange={(e) => onChange(e.target.checked)} />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<TextRow>`. */\nexport interface TextRowProps extends PropertyMetricProps {\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  density,\n  align,\n}: TextRowProps) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\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 extends PropertyMetricProps {\n  label: ReactNode;\n  value: number;\n  onChange: (next: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  placeholder?: string;\n  /**\n   * Optional suffix rendered after the field. A string becomes a dim \"word\"\n   * unit (e.g. \"px\"); pass JSX like `<sup>°</sup>` for symbol units. Display\n   * only — it never participates in parsing, and the value stays a number.\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 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  unit,\n  layout,\n  description,\n  span,\n  density,\n  align,\n}: NumberRowProps) {\n  const input = (\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  );\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      {unit == null ? (\n        input\n      ) : (\n        <span className={s.fieldUnitGroup}>\n          {input}\n          {typeof unit === 'string' ? <span className={s.readoutUnit}>{unit}</span> : unit}\n        </span>\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> extends PropertyMetricProps {\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  density,\n  align,\n}: SelectRowProps<T>) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\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> extends PropertyMetricProps {\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  density,\n  align,\n}: ToggleRowProps<T>) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\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","import { type CSSProperties, type ReactNode, useState } from 'react';\nimport s from './Properties.module.css';\nimport { type PropertyMetricProps, propertyMetricClass } from './PropertyPanel';\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 extends PropertyMetricProps {\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, density, align }: SubpanelProps) {\n  const cls = propertyMetricClass(s.subpanel, { density, align }, className);\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, useId, useState } from 'react';\nimport { DisclosureRow } from '../Disclosure';\nimport s from './Properties.module.css';\nimport {\n  type PropertyListPack,\n  type PropertyMetricProps,\n  propertyMetricClass,\n} from './PropertyPanel';\n\n/** Props for `<PropertyGroup>`. */\nexport interface PropertyGroupProps extends PropertyMetricProps {\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  /**\n   * Give the title a twisty that folds the rows away. Implied by any of the\n   * three props below, so it is only needed for a group that starts open and\n   * keeps its own state.\n   */\n  collapsible?: boolean;\n  /** Start folded. Read once; the group owns the state from then on. */\n  defaultCollapsed?: boolean;\n  /**\n   * Folded or not, as the consumer holds it. Given, the group keeps no state\n   * of its own and every toggle arrives at `onCollapsedChange` instead — which\n   * is what a panel that remembers its sections past a reload needs.\n   */\n  collapsed?: boolean;\n  onCollapsedChange?: (next: boolean) => void;\n  children: ReactNode;\n  className?: string;\n  /** How rows pack into the 2-column grid — see `<PropertyList pack>`. */\n  pack?: PropertyListPack;\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 *\n * A collapsible group keeps its rows mounted and hides them, so a control's\n * local state survives being folded away.\n */\nexport function PropertyGroup({\n  title,\n  hidden,\n  collapsible,\n  defaultCollapsed,\n  collapsed,\n  onCollapsedChange,\n  children,\n  className,\n  pack = 'auto-color',\n  density,\n  align,\n}: PropertyGroupProps) {\n  const bodyId = useId();\n  const [own, setOwn] = useState(defaultCollapsed ?? false);\n  if (hidden) return null;\n\n  const folds =\n    collapsible ??\n    (defaultCollapsed !== undefined || collapsed !== undefined || onCollapsedChange !== undefined);\n  const folded = folds && (collapsed ?? own);\n  const toggle = () => {\n    if (collapsed === undefined) setOwn(!folded);\n    onCollapsedChange?.(!folded);\n  };\n\n  const base = `${s.group}${pack === 'pairs' ? ` ${s.groupPairs}` : pack === 'one-up' ? ` ${s.groupOneUp}` : ''}`;\n  const cls = propertyMetricClass(base, { density, align }, className);\n  const heading = (\n    <h3 className={s.groupTitle}>\n      <hr />\n      <span>{title}</span>\n      <hr />\n    </h3>\n  );\n  return (\n    <div className={cls}>\n      {folds ? (\n        <DisclosureRow\n          className={s.groupHead}\n          open={!folded}\n          onToggle={toggle}\n          label={typeof title === 'string' ? title : 'this section'}\n          controls={bodyId}\n        >\n          {heading}\n        </DisclosureRow>\n      ) : (\n        heading\n      )}\n      <div id={bodyId} className={s.groupBody} hidden={folded}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Properties-CMLua9mU.js","names":[],"sources":["../../src/components/Properties/CurveField.module.css","../../src/components/Properties/CurveField.tsx","../../src/components/Properties/Properties.module.css","../../src/components/Properties/PropertyPanel.tsx","../../src/components/Properties/EffectCard.tsx","../../src/components/Properties/PropertyGroup.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/* ── Container metrics ──────────────────────────────────────────────\n   Every spacing number the family lays out with is read from a `--wzl-prop-*`\n   custom property with its own value as the fallback, so a consumer can move\n   any of them from an ancestor without selector surgery. The `density` classes\n   below set them in preset bundles; nothing in this file declares one, so an\n   inherited value always reaches the use site. */\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: var(--wzl-prop-panel-pad, 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 var(--wzl-prop-panel-title-gap, 12px);\n}\n\n.list {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: var(--wzl-prop-column-gap, 10px);\n  row-gap: var(--wzl-prop-row-gap, 4px);\n  align-items: stretch;\n  /* A property panel is dense: its fields are shorter and tighter than a\n     standalone Input. Mapped here, on the container, so one declaration moves\n     every field in the panel — and read from the container-level name so a\n     density set further up is not shadowed by this declaration. */\n  --wzl-field-h: var(--wzl-prop-field-h, 20px);\n  --wzl-field-pad-x: var(--wzl-prop-field-pad-x, 6px);\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/* `pack=\"one-up\"` gives every row the full width, color rows included — the\n   one packing a palette can be built from. */\n.listOneUp > * {\n  grid-column: 1 / -1;\n}\n\n/* ── density ────────────────────────────────────────────────────────\n   Preset bundles for the container metrics above. Set on whichever container\n   the consumer puts `density` on; every metric inherits down from there, so a\n   panel sets the whole family and a single group can still differ. `normal`\n   states its values rather than omitting them, so a group can go back to the\n   default inside a tighter panel. */\n\n.densityTight {\n  --wzl-prop-row-gap: 2px;\n  --wzl-prop-subpanel-row-gap: 2px;\n  --wzl-prop-column-gap: 8px;\n  --wzl-prop-panel-pad: 10px 12px;\n  --wzl-prop-panel-title-gap: 8px;\n  --wzl-prop-group-pad: 4px 8px 6px;\n  --wzl-prop-group-title-gap: 2px;\n  --wzl-prop-field-h: 18px;\n  --wzl-prop-field-pad-x: 5px;\n}\n\n.densityNormal {\n  --wzl-prop-row-gap: 4px;\n  --wzl-prop-subpanel-row-gap: 3px;\n  --wzl-prop-column-gap: 10px;\n  --wzl-prop-panel-pad: 14px 16px;\n  --wzl-prop-panel-title-gap: 12px;\n  --wzl-prop-group-pad: 6px 10px 8px;\n  --wzl-prop-group-title-gap: 4px;\n  --wzl-prop-field-h: 20px;\n  --wzl-prop-field-pad-x: 6px;\n}\n\n.densityRoomy {\n  --wzl-prop-row-gap: 8px;\n  --wzl-prop-subpanel-row-gap: 7px;\n  --wzl-prop-column-gap: 14px;\n  --wzl-prop-panel-pad: 18px 20px;\n  --wzl-prop-panel-title-gap: 16px;\n  --wzl-prop-group-pad: 10px 14px 12px;\n  --wzl-prop-group-title-gap: 6px;\n  --wzl-prop-field-h: 24px;\n  --wzl-prop-field-pad-x: 8px;\n}\n\n/* ── align ──────────────────────────────────────────────────────────\n   Where an inline row's label and control sit on the row's cross axis.\n   Inherits like density does, so a column of color rows lines its swatches up\n   on one edge from a single declaration on the list.\n\n   Two names, because a color row aligns twice: its items within their grid row,\n   and the whole grid within the row's box. They agree except at `baseline`,\n   which `align-content` does not take — there the grid goes to the top and the\n   items find the label's baseline inside it. */\n\n.alignStart {\n  --wzl-prop-row-align: start;\n  --wzl-prop-row-align-content: start;\n}\n\n.alignCenter {\n  --wzl-prop-row-align: center;\n  --wzl-prop-row-align-content: center;\n}\n\n.alignEnd {\n  --wzl-prop-row-align: end;\n  --wzl-prop-row-align-content: end;\n}\n\n.alignBaseline {\n  --wzl-prop-row-align: baseline;\n  --wzl-prop-row-align-content: start;\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.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-focus-ring);\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.fieldUnitGroup {\n  display: inline-block;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.fieldUnitGroup .readoutUnit {\n  margin-left: 4px;\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.fieldUnitGroup sup {\n  color: var(--wzl-fg-muted);\n  font-size: var(--wzl-font-size-2xs);\n  pointer-events: none;\n}\n\n/* ── Inline layout: label sits to the left of the control. ────── */\n.rowInline {\n  flex-direction: row;\n  align-items: var(--wzl-prop-row-align, 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  -moz-appearance: textfield;\n  appearance: textfield;\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-field-h, var(--wzl-control-h));\n  padding: 0 var(--wzl-field-pad-x);\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/* Numbers right-align so a column of them shares a decimal position; text does\n   not, so this cannot live in the rule the two share. */\n.row input[type='number'] {\n  text-align: right;\n}\n\n/* Chrome reserves the spin-button gutter at the right edge whether or not the\n   arrows are painted, so a right-aligned value stops ~20px short of its own\n   border and the row reads as if something is missing from that space. The\n   panel drives numbers by typing and dragging, never by the steppers.\n   `.readoutInput` has always dropped them; this is the same removal for the\n   typed field beside it. */\n.row input[type='number']::-webkit-inner-spin-button,\n.row input[type='number']::-webkit-outer-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n\n.row input[type='text']:not(.readoutInput):focus,\n.row input[type='number']:focus {\n  outline: none;\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\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-field-h, var(--wzl-control-h));\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/* An outline rather than the boxed family's inset ring: a property-row select\n   is borderless, so there is no border to recolour. */\n.row select:focus {\n  outline: 1px solid var(--wzl-focus-ring);\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/* `align-content: end` sinks the whole grid so a color row paired with a\n   taller sibling keeps its alpha track on the neighbour's bottom edge. An\n   explicit `align` overrides both that and the per-item alignment below, which\n   is what a column of swatches read as a group needs. */\n.rowColor {\n  display: grid;\n  grid-template-columns: 1fr auto;\n  grid-template-rows: auto;\n  align-content: var(--wzl-prop-row-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: var(--wzl-prop-row-align, 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: var(--wzl-prop-row-align, 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/* `layout=\"block\"` stacks the color row: label, then swatch, then alpha. */\n.rowColor.rowBlock {\n  grid-template-columns: 1fr;\n}\n\n.rowColor.rowBlock .rowLabel {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n.rowColor.rowBlock input[type='color'] {\n  grid-column: 1;\n  grid-row: 2;\n  justify-self: start;\n}\n\n.rowColor.rowBlock input[type='range'].alpha {\n  grid-row: 3;\n}\n\n/* ── Checkbox variant: control-first inline layout, no uppercase label. */\n.rowCheckbox {\n  flex-direction: row;\n  align-items: var(--wzl-prop-row-align, 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/* `layout=\"block\"` stacks the checkbox row: label above, box beneath, both on\n   the leading edge — a block row's cross axis is the horizontal one. */\n.rowCheckbox.rowBlock {\n  flex-direction: column;\n  align-items: var(--wzl-prop-row-align, start);\n}\n\n.rowCheckbox.rowBlock .rowLabel {\n  order: 0;\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: var(--wzl-prop-group-pad, 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 var(--wzl-prop-group-title-gap, 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/* A twisty leads the title, so the head takes over the title's bottom gap and\n   the two sit on one line. */\n.groupHead {\n  margin-bottom: var(--wzl-prop-group-title-gap, 4px);\n}\n\n.groupHead .groupTitle {\n  margin-bottom: 0;\n}\n\n/* `hidden` on its own loses to the body's `display: grid` below. */\n.groupBody[hidden] {\n  display: none;\n}\n\n.groupBody {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  column-gap: var(--wzl-prop-column-gap, 10px);\n  row-gap: var(--wzl-prop-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.groupOneUp .groupBody > * {\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: var(--wzl-prop-column-gap, 10px);\n  row-gap: var(--wzl-prop-subpanel-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 ReactNode, useEffect, useRef, 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 shared from '../range.module.css';\nimport s from './Properties.module.css';\n\n/**\n * How much room a container gives its rows — gaps, padding, and field height,\n * moved together. Set on any container in the family; it reaches every\n * descendant, so an inner group can differ from the panel around it.\n */\nexport type PropertyDensity = 'tight' | 'normal' | 'roomy';\n\n/** Where an inline row's label and control sit on the row's cross axis. Set on\n *  a container to line a whole column of them up. */\nexport type PropertyAlign = 'start' | 'center' | 'end' | 'baseline';\n\n/** Metric props every container in the family takes. Both reach descendants,\n *  so the nearest container that states one wins. */\nexport interface PropertyMetricProps {\n  /** Room the rows get. Unset inherits from an outer container, else `normal`. */\n  density?: PropertyDensity;\n  /**\n   * Cross-axis alignment of an inline row's label and control. `baseline` sits\n   * the control on the label's first-line baseline, which is what lines a\n   * column of swatches up against labels of different heights. Unset keeps each\n   * variant's own alignment — a color row centers its label and swatch and\n   * sinks the pair to the row's bottom edge, which keeps a paired alpha track\n   * level with its neighbour.\n   */\n  align?: PropertyAlign;\n}\n\nconst DENSITY_CLASS: Record<PropertyDensity, string> = {\n  tight: s.densityTight,\n  normal: s.densityNormal,\n  roomy: s.densityRoomy,\n};\n\nconst ALIGN_CLASS: Record<PropertyAlign, string> = {\n  start: s.alignStart,\n  center: s.alignCenter,\n  end: s.alignEnd,\n  baseline: s.alignBaseline,\n};\n\n/** Joins a container's base class with its metric classes and the consumer's.\n *  Exported for the family's other files, which share the same two props. */\nexport function propertyMetricClass(\n  base: string,\n  { density, align }: PropertyMetricProps,\n  className?: string,\n): string {\n  return [base, density && DENSITY_CLASS[density], align && ALIGN_CLASS[align], className]\n    .filter(Boolean)\n    .join(' ');\n}\n\n/** Props for `<PropertyPanel>`. */\nexport interface PropertyPanelProps extends PropertyMetricProps {\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({\n  title,\n  children,\n  className,\n  density,\n  align,\n}: PropertyPanelProps) {\n  return (\n    <div className={propertyMetricClass(s.panel, { density, align }, className)}>\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' | 'one-up';\n\n/** Props for `<PropertyList>`. */\nexport interface PropertyListProps extends PropertyMetricProps {\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   *   - `'one-up'`: every row spans the full width, color rows included. Right\n   *     for a palette — a column of swatches read as a group.\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({\n  children,\n  className,\n  pack = 'auto-color',\n  density,\n  align,\n}: PropertyListProps) {\n  const base = `${s.list}${pack === 'pairs' ? ` ${s.listPairs}` : pack === 'one-up' ? ` ${s.listOneUp}` : ''}`;\n  return <div className={propertyMetricClass(base, { density, align }, className)}>{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 extends PropertyMetricProps {\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. Unset takes the variant's own\n   * orientation: `block` — label above control — for the default variant, and\n   * `inline` for the color and checkbox variants, which read as a row.\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,\n  span,\n  children,\n  htmlFor,\n  className,\n  density,\n  align,\n}: PropertyRowProps) {\n  const variantClass = variant === 'color' ? s.rowColor : variant === 'checkbox' ? s.rowCheckbox : '';\n  // Each variant already lays out one way; a class is only needed for the\n  // other one. The default variant stacks, so it needs `.rowInline`; color and\n  // checkbox read as a row, so they need `.rowBlock`.\n  const intrinsic: PropertyRowLayout = variant === 'default' ? 'block' : 'inline';\n  const resolved = layout ?? intrinsic;\n  const layoutClass =\n    resolved === intrinsic ? '' : resolved === 'inline' ? s.rowInline : s.rowBlock;\n  const cls = propertyMetricClass(\n    [s.row, variantClass, layoutClass, span && s.span].filter(Boolean).join(' '),\n    { density, align },\n    className,\n  );\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 extends PropertyMetricProps {\n  label: ReactNode;\n  value: number;\n  min: number;\n  max: number;\n  step?: number;\n  /**\n   * The committed value. Given `onInput` as well, it fires once a drag ends\n   * or a typed readout is accepted; on its own it fires on every move, which\n   * is what a row with one callback has always done.\n   */\n  onChange: (next: number) => void;\n  /**\n   * The live value, fired continuously through a drag. Pass it alongside\n   * `onChange` when the write is expensive — cheap state here, the costly\n   * work there. Mirrors `<Slider>`'s `onInput` / `onChange` pair.\n   */\n  onInput?: (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  onInput,\n  format,\n  unit,\n  layout,\n  description,\n  span,\n  density,\n  align,\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 live = onInput ?? onChange;\n  const commit = onInput ? onChange : undefined;\n  const range = useRef<HTMLInputElement>(null);\n  const latestCommit = useRef(commit);\n  useEffect(() => {\n    latestCommit.current = commit;\n  });\n  useEffect(() => {\n    const el = range.current;\n    if (!el) return;\n    // The commit half is the platform's: a range input fires `input` through\n    // the drag and `change` once, on release. React's synthetic onChange sees\n    // only the first, since its value tracker drops the unchanged second.\n    const onCommit = () => latestCommit.current?.(Number(el.value));\n    el.addEventListener('change', onCommit);\n    return () => el.removeEventListener('change', onCommit);\n  }, []);\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={(next) => {\n            live(next);\n            commit?.(next);\n          }}\n        />\n      }\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      <input\n        ref={range}\n        type=\"range\"\n        className={shared.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          live(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 extends PropertyMetricProps {\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  /** Label beside the swatch (default) or above it. */\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 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  layout,\n  description,\n  span,\n  density,\n  align,\n}: ColorRowProps) {\n  const showAlpha = alpha != null;\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      variant=\"color\"\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      <input type=\"color\" value={value} onChange={(e) => onChange(e.target.value)} />\n      {showAlpha && (\n        <input\n          type=\"range\"\n          className={`${shared.range} ${shared.alpha} ${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 extends PropertyMetricProps {\n  label: ReactNode;\n  value: boolean;\n  onChange: (next: boolean) => void;\n  /** Label beside the box (default) or above it. */\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 boolean checkbox. */\nexport function CheckboxRow({\n  label,\n  value,\n  onChange,\n  layout,\n  span,\n  description,\n  density,\n  align,\n}: CheckboxRowProps) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      variant=\"checkbox\"\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      <input type=\"checkbox\" checked={value} onChange={(e) => onChange(e.target.checked)} />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<TextRow>`. */\nexport interface TextRowProps extends PropertyMetricProps {\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  density,\n  align,\n}: TextRowProps) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\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 extends PropertyMetricProps {\n  label: ReactNode;\n  value: number;\n  onChange: (next: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  placeholder?: string;\n  /**\n   * Optional suffix rendered after the field. A string becomes a dim \"word\"\n   * unit (e.g. \"px\"); pass JSX like `<sup>°</sup>` for symbol units. Display\n   * only — it never participates in parsing, and the value stays a number.\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 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  unit,\n  layout,\n  description,\n  span,\n  density,\n  align,\n}: NumberRowProps) {\n  const input = (\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  );\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\n      {unit == null ? (\n        input\n      ) : (\n        <span className={s.fieldUnitGroup}>\n          {input}\n          {typeof unit === 'string' ? <span className={s.readoutUnit}>{unit}</span> : unit}\n        </span>\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> extends PropertyMetricProps {\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  density,\n  align,\n}: SelectRowProps<T>) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\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> extends PropertyMetricProps {\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  density,\n  align,\n}: ToggleRowProps<T>) {\n  return (\n    <PropertyRow\n      span={span}\n      label={label}\n      layout={layout}\n      description={description}\n      density={density}\n      align={align}\n    >\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","import { type CSSProperties, type ReactNode, useState } from 'react';\nimport s from './Properties.module.css';\nimport { type PropertyMetricProps, propertyMetricClass } from './PropertyPanel';\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 extends PropertyMetricProps {\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, density, align }: SubpanelProps) {\n  const cls = propertyMetricClass(s.subpanel, { density, align }, className);\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, useId, useState } from 'react';\nimport { DisclosureRow } from '../Disclosure';\nimport s from './Properties.module.css';\nimport {\n  type PropertyListPack,\n  type PropertyMetricProps,\n  propertyMetricClass,\n} from './PropertyPanel';\n\n/** Props for `<PropertyGroup>`. */\nexport interface PropertyGroupProps extends PropertyMetricProps {\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  /**\n   * Give the title a twisty that folds the rows away. Implied by any of the\n   * three props below, so it is only needed for a group that starts open and\n   * keeps its own state.\n   */\n  collapsible?: boolean;\n  /** Start folded. Read once; the group owns the state from then on. */\n  defaultCollapsed?: boolean;\n  /**\n   * Folded or not, as the consumer holds it. Given, the group keeps no state\n   * of its own and every toggle arrives at `onCollapsedChange` instead — which\n   * is what a panel that remembers its sections past a reload needs.\n   */\n  collapsed?: boolean;\n  onCollapsedChange?: (next: boolean) => void;\n  children: ReactNode;\n  className?: string;\n  /** How rows pack into the 2-column grid — see `<PropertyList pack>`. */\n  pack?: PropertyListPack;\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 *\n * A collapsible group keeps its rows mounted and hides them, so a control's\n * local state survives being folded away.\n */\nexport function PropertyGroup({\n  title,\n  hidden,\n  collapsible,\n  defaultCollapsed,\n  collapsed,\n  onCollapsedChange,\n  children,\n  className,\n  pack = 'auto-color',\n  density,\n  align,\n}: PropertyGroupProps) {\n  const bodyId = useId();\n  const [own, setOwn] = useState(defaultCollapsed ?? false);\n  if (hidden) return null;\n\n  const folds =\n    collapsible ??\n    (defaultCollapsed !== undefined || collapsed !== undefined || onCollapsedChange !== undefined);\n  const folded = folds && (collapsed ?? own);\n  const toggle = () => {\n    if (collapsed === undefined) setOwn(!folded);\n    onCollapsedChange?.(!folded);\n  };\n\n  const base = `${s.group}${pack === 'pairs' ? ` ${s.groupPairs}` : pack === 'one-up' ? ` ${s.groupOneUp}` : ''}`;\n  const cls = propertyMetricClass(base, { density, align }, className);\n  const heading = (\n    <h3 className={s.groupTitle}>\n      <hr />\n      <span>{title}</span>\n      <hr />\n    </h3>\n  );\n  return (\n    <div className={cls}>\n      {folds ? (\n        <DisclosureRow\n          className={s.groupHead}\n          open={!folded}\n          onToggle={toggle}\n          label={typeof title === 'string' ? title : 'this section'}\n          controls={bodyId}\n        >\n          {heading}\n        </DisclosureRow>\n      ) : (\n        heading\n      )}\n      <div id={bodyId} className={s.groupBody} hidden={folded}>\n        {children}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/{RadioGroup-VGAaLYaR.js → RadioGroup-B2_LUgDp.js}

@@ -1,4 +1,4 @@
-import { n as e } from "./Field-BUroh92b.js";
+import { n as e } from "./Field-dzlxOGxT.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-VGAaLYaR.js.map
+//# sourceMappingURL=RadioGroup-B2_LUgDp.js.map

package/dist/chunks/{RadioGroup-VGAaLYaR.js.map → RadioGroup-B2_LUgDp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup-VGAaLYaR.js","names":[],"sources":["../../src/components/RadioGroup/RadioGroup.module.css","../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  gap: 16px;\n}\n\n.legend {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.radio[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dot {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.radio[data-focus-visible] .dot {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.radio[data-hovered]:not([data-disabled]) .dot {\n  border-color: var(--wzl-fg-muted);\n}\n\n.radio[data-selected] .dot {\n  border-color: var(--wzl-accent-strong);\n}\n\n.dot::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: var(--wzl-accent-strong);\n  transform: scale(0);\n  transition: transform var(--wzl-motion-fast);\n}\n\n.radio[data-selected] .dot::after {\n  transform: scale(1);\n}\n","import type { ReactNode } from 'react';\nimport {\n  RadioGroup as RACRadioGroup,\n  Radio as RACRadio,\n  Label,\n  Text,\n  FieldError,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RACRadioProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './RadioGroup.module.css';\n\n/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */\nexport type RadioGroupProps = Omit<RACRadioGroupProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * A set of mutually exclusive choices, wrapping React Aria's RadioGroup and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Holds {@link Radio} children.\n */\nexport function RadioGroup(props: RadioGroupProps) {\n  const { label, description, errorMessage, children, className, ...rest } = props;\n  return (\n    <RACRadioGroup\n      {...rest}\n      className={[s.group, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={s.legend}>{label}</Label>}\n      {children}\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACRadioGroup>\n  );\n}\n\n/** Props for {@link Radio}, on top of React Aria's `Radio` props. */\nexport type RadioProps = Omit<RACRadioProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One choice in a {@link RadioGroup}. The label is passed as children. */\nexport function Radio({ children, className, ...rest }: RadioProps) {\n  return (\n    <RACRadio {...rest} className={[s.radio, className].filter(Boolean).join(' ')}>\n      <span className={s.dot} />\n      {children !== undefined && <span>{children}</span>}\n    </RACRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;AC4BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,gBAAa,iBAAc,aAAU,cAAW,GAAG,MAAS;AAC3E,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAS;IAAc,CAAA;GAClE;GACA,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACxD;;;AAWpB,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAoB;AAClE,QACE,kBAAC,GAAD;EAAU,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7E,CACE,kBAAC,QAAD,EAAM,WAAW,EAAE,KAAO,CAAA,EACzB,MAAa,KAAA,KAAa,kBAAC,QAAD,EAAO,aAAgB,CAAA,CACzC"}
+{"version":3,"file":"RadioGroup-B2_LUgDp.js","names":[],"sources":["../../src/components/RadioGroup/RadioGroup.module.css","../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":[".group {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.group[data-orientation=\"horizontal\"] {\n  flex-direction: row;\n  gap: 16px;\n}\n\n.legend {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: var(--wzl-font-size);\n  color: var(--wzl-fg);\n  user-select: none;\n  -webkit-user-select: none;\n}\n\n.radio[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.dot {\n  position: relative;\n  flex: 0 0 auto;\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.radio[data-focus-visible] .dot {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.radio[data-hovered]:not([data-disabled]) .dot {\n  border-color: var(--wzl-fg-muted);\n}\n\n.radio[data-selected] .dot {\n  border-color: var(--wzl-accent-strong);\n}\n\n.dot::after {\n  content: '';\n  position: absolute;\n  inset: 3px;\n  border-radius: 50%;\n  background: var(--wzl-accent-strong);\n  transform: scale(0);\n  transition: transform var(--wzl-motion-fast);\n}\n\n.radio[data-selected] .dot::after {\n  transform: scale(1);\n}\n","import type { ReactNode } from 'react';\nimport {\n  RadioGroup as RACRadioGroup,\n  Radio as RACRadio,\n  Label,\n  Text,\n  FieldError,\n  type RadioGroupProps as RACRadioGroupProps,\n  type RadioProps as RACRadioProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport s from './RadioGroup.module.css';\n\n/** Props for {@link RadioGroup}, on top of React Aria's `RadioGroup` props. */\nexport type RadioGroupProps = Omit<RACRadioGroupProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * A set of mutually exclusive choices, wrapping React Aria's RadioGroup and\n * supplying the same label / description / errorMessage slots as `Input`.\n * Holds {@link Radio} children.\n */\nexport function RadioGroup(props: RadioGroupProps) {\n  const { label, description, errorMessage, children, className, ...rest } = props;\n  return (\n    <RACRadioGroup\n      {...rest}\n      className={[s.group, fieldClasses.root, className].filter(Boolean).join(' ')}\n    >\n      {label !== undefined && <Label className={s.legend}>{label}</Label>}\n      {children}\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n    </RACRadioGroup>\n  );\n}\n\n/** Props for {@link Radio}, on top of React Aria's `Radio` props. */\nexport type RadioProps = Omit<RACRadioProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/** One choice in a {@link RadioGroup}. The label is passed as children. */\nexport function Radio({ children, className, ...rest }: RadioProps) {\n  return (\n    <RACRadio {...rest} className={[s.radio, className].filter(Boolean).join(' ')}>\n      <span className={s.dot} />\n      {children !== undefined && <span>{children}</span>}\n    </RACRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;AC4BA,SAAgB,EAAW,GAAwB;CACjD,IAAM,EAAE,UAAO,gBAAa,iBAAc,aAAU,cAAW,GAAG,MAAS;AAC3E,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAF9E;GAIG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAS;IAAc,CAAA;GAClE;GACA,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GACxD;;;AAWpB,SAAgB,EAAM,EAAE,aAAU,cAAW,GAAG,KAAoB;AAClE,QACE,kBAAC,GAAD;EAAU,GAAI;EAAM,WAAW,CAAC,EAAE,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA7E,CACE,kBAAC,QAAD,EAAM,WAAW,EAAE,KAAO,CAAA,EACzB,MAAa,KAAA,KAAa,kBAAC,QAAD,EAAO,aAAgB,CAAA,CACzC"}

package/dist/chunks/{RangeSlider-DefoAOsh.js → RangeSlider-C3to8A52.js}

@@ -49,4 +49,4 @@ function l(l) {
 //#endregion
 export { l as t };
 
-//# sourceMappingURL=RangeSlider-DefoAOsh.js.map
+//# sourceMappingURL=RangeSlider-C3to8A52.js.map

package/dist/chunks/{RangeSlider-DefoAOsh.js.map → RangeSlider-C3to8A52.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RangeSlider-DefoAOsh.js","names":[],"sources":["../../src/components/RangeSlider/RangeSlider.module.css","../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":[".slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 4px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.slider[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  align-items: stretch;\n  width: 28px;\n  height: 160px;\n}\n\n.head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.label {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.output {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-variant-numeric: tabular-nums;\n}\n\n.track {\n  position: relative;\n  height: 6px;\n  min-width: 80px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.slider[data-orientation=\"vertical\"] .track {\n  width: 6px;\n  height: 100%;\n}\n\n.fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--wzl-accent-strong);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.thumb {\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-fg-muted);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  cursor: ew-resize;\n  outline: none;\n  transition: box-shadow var(--wzl-motion-fast);\n}\n\n.slider[data-orientation=\"vertical\"] .thumb {\n  cursor: ns-resize;\n}\n\n.thumb[data-focus-visible] {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.thumb[data-dragging] {\n  background: var(--wzl-accent-strong);\n}\n\n.slider[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Slider as RACSlider,\n  SliderOutput,\n  SliderTrack,\n  SliderThumb,\n  Label,\n  type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport s from './RangeSlider.module.css';\n\n/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */\nexport type RangeSliderProps = Omit<RACSliderProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /** Show the current value next to the label. Defaults to true when a\n   *  label is supplied. */\n  showOutput?: boolean;\n  /** Format the rendered value(s). Useful for units (`v => `${v}%``). */\n  formatOutput?: (v: number | number[]) => ReactNode;\n  className?: string;\n};\n\n/**\n * Linear range slider on React Aria. Single-value by default; pass an array\n * to `value` / `defaultValue` for multi-thumb. Distinct from `Slider`, which\n * is fully controlled and gives each thumb its own bounds and readout.\n */\nexport function RangeSlider(props: RangeSliderProps) {\n  const { label, showOutput, formatOutput, className, ...rest } = props;\n  const wantOutput = showOutput ?? label !== undefined;\n  return (\n    <RACSlider {...rest} className={[s.slider, className].filter(Boolean).join(' ')}>\n      {(label !== undefined || wantOutput) && (\n        <div className={s.head}>\n          {label !== undefined && <Label className={s.label}>{label}</Label>}\n          {wantOutput && (\n            <SliderOutput className={s.output}>\n              {({ state }) => {\n                const v = state.values.length === 1 ? state.values[0] : state.values;\n                return formatOutput ? formatOutput(v) : Array.isArray(v) ? v.join(' – ') : String(v);\n              }}\n            </SliderOutput>\n          )}\n        </div>\n      )}\n      <SliderTrack className={s.track}>\n        {({ state }) => {\n          // Single-thumb: fill from start to thumb. Multi-thumb: fill\n          // between adjacent thumbs (simplest = between first and last).\n          const fillStart = state.values.length > 1 ? state.getThumbPercent(0) * 100 : 0;\n          const fillEnd = state.getThumbPercent(state.values.length - 1) * 100;\n          return (\n            <>\n              <div\n                className={s.fill}\n                style={{ left: `${fillStart}%`, right: `${100 - fillEnd}%` }}\n              />\n              {state.values.map((_, i) => (\n                <SliderThumb key={i} index={i} className={s.thumb} />\n              ))}\n            </>\n          );\n        }}\n      </SliderTrack>\n    </RACSlider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AC2BA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,UAAO,eAAY,iBAAc,cAAW,GAAG,MAAS,GAC1D,IAAa,KAAc,MAAU,KAAA;AAC3C,QACE,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA/E,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAQ;IAAc,CAAA,EACjE,KACC,kBAAC,GAAD;IAAc,WAAW,EAAE;eACvB,EAAE,eAAY;KACd,IAAM,IAAI,EAAM,OAAO,WAAW,IAAI,EAAM,OAAO,KAAK,EAAM;AAC9D,YAAO,IAAe,EAAa,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,EAAE;;IAEzE,CAAA,CAEb;MAER,kBAAC,GAAD;GAAa,WAAW,EAAE;cACtB,EAAE,eAAY;IAGd,IAAM,IAAY,EAAM,OAAO,SAAS,IAAI,EAAM,gBAAgB,EAAE,GAAG,MAAM,GACvE,IAAU,EAAM,gBAAgB,EAAM,OAAO,SAAS,EAAE,GAAG;AACjE,WACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KACE,WAAW,EAAE;KACb,OAAO;MAAE,MAAM,GAAG,EAAU;MAAI,OAAO,GAAG,MAAM,EAAQ;MAAI;KAC5D,CAAA,EACD,EAAM,OAAO,KAAK,GAAG,MACpB,kBAAC,GAAD;KAAqB,OAAO;KAAG,WAAW,EAAE;KAAS,EAAnC,EAAmC,CACrD,CACD,EAAA,CAAA;;GAGK,CAAA,CACJ"}
+{"version":3,"file":"RangeSlider-C3to8A52.js","names":[],"sources":["../../src/components/RangeSlider/RangeSlider.module.css","../../src/components/RangeSlider/RangeSlider.tsx"],"sourcesContent":[".slider {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  gap: 4px;\n  font-family: var(--wzl-font-ui);\n  color: var(--wzl-fg);\n}\n\n.slider[data-orientation=\"vertical\"] {\n  flex-direction: row;\n  align-items: stretch;\n  width: 28px;\n  height: 160px;\n}\n\n.head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 8px;\n}\n\n.label {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.output {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  font-variant-numeric: tabular-nums;\n}\n\n.track {\n  position: relative;\n  height: 6px;\n  min-width: 80px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.slider[data-orientation=\"vertical\"] .track {\n  width: 6px;\n  height: 100%;\n}\n\n.fill {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  background: var(--wzl-accent-strong);\n  border-radius: var(--wzl-radius-sm);\n}\n\n.thumb {\n  width: 14px;\n  height: 14px;\n  background: var(--wzl-fg-muted);\n  border: 1px solid var(--wzl-border-strong);\n  border-radius: 50%;\n  cursor: ew-resize;\n  outline: none;\n  transition: box-shadow var(--wzl-motion-fast);\n}\n\n.slider[data-orientation=\"vertical\"] .thumb {\n  cursor: ns-resize;\n}\n\n.thumb[data-focus-visible] {\n  box-shadow: 0 0 0 2px var(--wzl-focus-ring);\n}\n\n.thumb[data-dragging] {\n  background: var(--wzl-accent-strong);\n}\n\n.slider[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n","import type { ReactNode } from 'react';\nimport {\n  Slider as RACSlider,\n  SliderOutput,\n  SliderTrack,\n  SliderThumb,\n  Label,\n  type SliderProps as RACSliderProps,\n} from 'react-aria-components';\nimport s from './RangeSlider.module.css';\n\n/** Props for {@link RangeSlider}, on top of React Aria's `Slider` props. */\nexport type RangeSliderProps = Omit<RACSliderProps, 'children' | 'className'> & {\n  label?: ReactNode;\n  /** Show the current value next to the label. Defaults to true when a\n   *  label is supplied. */\n  showOutput?: boolean;\n  /** Format the rendered value(s). Useful for units (`v => `${v}%``). */\n  formatOutput?: (v: number | number[]) => ReactNode;\n  className?: string;\n};\n\n/**\n * Linear range slider on React Aria. Single-value by default; pass an array\n * to `value` / `defaultValue` for multi-thumb. Distinct from `Slider`, which\n * is fully controlled and gives each thumb its own bounds and readout.\n */\nexport function RangeSlider(props: RangeSliderProps) {\n  const { label, showOutput, formatOutput, className, ...rest } = props;\n  const wantOutput = showOutput ?? label !== undefined;\n  return (\n    <RACSlider {...rest} className={[s.slider, className].filter(Boolean).join(' ')}>\n      {(label !== undefined || wantOutput) && (\n        <div className={s.head}>\n          {label !== undefined && <Label className={s.label}>{label}</Label>}\n          {wantOutput && (\n            <SliderOutput className={s.output}>\n              {({ state }) => {\n                const v = state.values.length === 1 ? state.values[0] : state.values;\n                return formatOutput ? formatOutput(v) : Array.isArray(v) ? v.join(' – ') : String(v);\n              }}\n            </SliderOutput>\n          )}\n        </div>\n      )}\n      <SliderTrack className={s.track}>\n        {({ state }) => {\n          // Single-thumb: fill from start to thumb. Multi-thumb: fill\n          // between adjacent thumbs (simplest = between first and last).\n          const fillStart = state.values.length > 1 ? state.getThumbPercent(0) * 100 : 0;\n          const fillEnd = state.getThumbPercent(state.values.length - 1) * 100;\n          return (\n            <>\n              <div\n                className={s.fill}\n                style={{ left: `${fillStart}%`, right: `${100 - fillEnd}%` }}\n              />\n              {state.values.map((_, i) => (\n                <SliderThumb key={i} index={i} className={s.thumb} />\n              ))}\n            </>\n          );\n        }}\n      </SliderTrack>\n    </RACSlider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AC2BA,SAAgB,EAAY,GAAyB;CACnD,IAAM,EAAE,UAAO,eAAY,iBAAc,cAAW,GAAG,MAAS,GAC1D,IAAa,KAAc,MAAU,KAAA;AAC3C,QACE,kBAAC,GAAD;EAAW,GAAI;EAAM,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAA/E,EACI,MAAU,KAAA,KAAa,MACvB,kBAAC,OAAD;GAAK,WAAW,EAAE;aAAlB,CACG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAE;cAAQ;IAAc,CAAA,EACjE,KACC,kBAAC,GAAD;IAAc,WAAW,EAAE;eACvB,EAAE,eAAY;KACd,IAAM,IAAI,EAAM,OAAO,WAAW,IAAI,EAAM,OAAO,KAAK,EAAM;AAC9D,YAAO,IAAe,EAAa,EAAE,GAAG,MAAM,QAAQ,EAAE,GAAG,EAAE,KAAK,MAAM,GAAG,OAAO,EAAE;;IAEzE,CAAA,CAEb;MAER,kBAAC,GAAD;GAAa,WAAW,EAAE;cACtB,EAAE,eAAY;IAGd,IAAM,IAAY,EAAM,OAAO,SAAS,IAAI,EAAM,gBAAgB,EAAE,GAAG,MAAM,GACvE,IAAU,EAAM,gBAAgB,EAAM,OAAO,SAAS,EAAE,GAAG;AACjE,WACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,OAAD;KACE,WAAW,EAAE;KACb,OAAO;MAAE,MAAM,GAAG,EAAU;MAAI,OAAO,GAAG,MAAM,EAAQ;MAAI;KAC5D,CAAA,EACD,EAAM,OAAO,KAAK,GAAG,MACpB,kBAAC,GAAD;KAAqB,OAAO;KAAG,WAAW,EAAE;KAAS,EAAnC,EAAmC,CACrD,CACD,EAAA,CAAA;;GAGK,CAAA,CACJ"}

package/dist/chunks/{ResizeHandle-DMJdqRud.js → ResizeHandle-BrCO0JrH.js}

@@ -76,4 +76,4 @@ function c(o) {
 //#endregion
 export { c as t };
 
-//# sourceMappingURL=ResizeHandle-DMJdqRud.js.map
+//# sourceMappingURL=ResizeHandle-BrCO0JrH.js.map

package/dist/chunks/{ResizeHandle-DMJdqRud.js.map → ResizeHandle-BrCO0JrH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ResizeHandle-DMJdqRud.js","names":[],"sources":["../../src/components/ResizeHandle/ResizeHandle.module.css","../../src/components/ResizeHandle/ResizeHandle.tsx"],"sourcesContent":[".handle {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  cursor: ew-resize;\n  background: transparent;\n  border-left: 1px solid var(--wzl-border);\n  /* The bar is 4px of hit area — thin enough to read as a seam, wide\n     enough to grab. `touch-action: none` keeps a touch drag from being\n     stolen by the scroll container it usually sits inside. */\n  touch-action: none;\n}\n\n.handle.horizontal {\n  width: auto;\n  height: 4px;\n  align-self: auto;\n  cursor: ns-resize;\n  border-left: none;\n  border-top: 1px solid var(--wzl-border);\n}\n\n.handle:hover {\n  background: var(--wzl-border);\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent));\n  outline-offset: -1px;\n}\n","import { useCallback, useEffect, useRef, type KeyboardEvent, type PointerEvent } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport s from './ResizeHandle.module.css';\n\n/**\n * Props for {@link ResizeHandle}. `onInput` fires throughout the drag and\n * `onChange` once at the end.\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which way the handle *runs*, matching `aria-orientation` on the\n   * separator role: a `vertical` handle is a vertical bar between two\n   * side-by-side panes and drags horizontally. `horizontal` is the\n   * stacked case (a bar between rows, dragged up and down).\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /** Current size of the pane being resized, in pixels. */\n  value: number;\n  min: number;\n  max: number;\n  /**\n   * Flip the sign of the drag. Panes docked to the *trailing* edge (a\n   * right sidebar, a bottom drawer) grow as the pointer moves toward the\n   * start of the axis, so they want `invert`. Leading-edge panes don't.\n   */\n  invert?: boolean;\n  /**\n   * Fires continuously while dragging and on each keyboard step, always\n   * clamped to [min, max]. Drive the live size from this.\n   */\n  onInput(next: number): void;\n  /**\n   * Fires once when a drag ends or a keyboard step settles, with the final\n   * size. Persist here rather than in `onInput` — one write per gesture\n   * instead of one per pointer sample.\n   */\n  onChange?(next: number): void;\n  /**\n   * The granularity of `value`. Arrow keys move by one step (Shift by\n   * eight), and pointer drags snap to the same grid — a pointer reports\n   * fractional coordinates on a scaled display, and nobody wants\n   * `362.9453125` in their persisted layout. Set a fractional step for a\n   * pane measured in something finer than whole pixels.\n   */\n  step?: number;\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (n: number, min: number, max: number): number => Math.min(max, Math.max(min, n));\n\n/**\n * Snap to the step grid, then clamp. Bounds win over the grid: `min`/`max`\n * are hard limits, so a range that isn't a whole number of steps clips to\n * the bound rather than overshooting it.\n */\nfunction settle(n: number, min: number, max: number, step: number): number {\n  const snapped = step > 0 ? Math.round(n / step) * step : n;\n  // Re-round to kill the float dust `x / 0.1 * 0.1` leaves behind.\n  const precise = Number.isInteger(step) ? snapped : Number(snapped.toFixed(10));\n  return clamp(precise, min, max);\n}\n\n/**\n * Draggable divider for resizing a pane — the \"window splitter\" pattern.\n * Owns no size of its own: the consumer holds `value` and applies it\n * (typically as a CSS custom property on the pane), which keeps the handle\n * usable for flex, grid, and absolutely-positioned layouts alike.\n *\n * Keyboard-operable as a matter of course: it's focusable, arrows step by\n * `step` (Shift for a coarse step), Home/End jump to the bounds. A splitter\n * that only responds to a pointer drag strands anyone who can't make one.\n */\nexport function ResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation = 'vertical', value, min, max, invert, onInput, onChange,\n    step = 1, ariaLabel, className,\n  } = props;\n\n  // The session reads current props rather than the ones the pointerdown\n  // closed over, so a bound or a step changed mid-drag takes effect.\n  const latest = useRef(props);\n  latest.current = props;\n\n  // Drag origin. Measured on pointerdown so every move is measured against\n  // the gesture's start rather than the previous sample — accumulating\n  // per-sample deltas drifts once the pointer leaves the clamped range.\n  const drag = useRef<{ origin: number; startValue: number; last: number } | null>(null);\n  const session = useRef<PointerSession | null>(null);\n  useEffect(() => () => { session.current?.cancel(); }, []);\n\n  const valueAt = (axis: number): number => {\n    const d = drag.current!;\n    const p = latest.current;\n    const delta = axis - d.origin;\n    return settle(d.startValue + (p.invert ? -delta : delta), p.min, p.max, p.step ?? 1);\n  };\n\n  const finish = (next: number) => {\n    drag.current = null;\n    session.current = null;\n    latest.current.onChange?.(next);\n  };\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0 || session.current) return;\n    const p = latest.current;\n    const vertical = (p.orientation ?? 'vertical') === 'vertical';\n    const axisOf = (ev: { clientX: number; clientY: number }) => (vertical ? ev.clientX : ev.clientY);\n    drag.current = {\n      origin: axisOf(e),\n      startValue: p.value,\n      last: settle(p.value, p.min, p.max, p.step ?? 1),\n    };\n    session.current = openPointerSession(e.currentTarget, e, {\n      onMove: (ev) => {\n        const next = valueAt(axisOf(ev));\n        drag.current!.last = next;\n        latest.current.onInput(next);\n      },\n      onEnd: (ev) => { finish(valueAt(axisOf(ev))); },\n      // A cancelled resize settles where it was left: `onInput` has already\n      // moved the pane there and the consumer owns the value, so abandoning\n      // the commit would persist a size the user is no longer looking at.\n      onCancel: () => { finish(drag.current!.last); },\n    });\n    e.preventDefault();\n  }, []);\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    const grow = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';\n    const shrink = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';\n    const amount = step * (e.shiftKey ? 8 : 1) * (invert ? -1 : 1);\n    let next: number | undefined;\n    if (e.key === grow) next = value + amount;\n    else if (e.key === shrink) next = value - amount;\n    else if (e.key === 'Home') next = invert ? max : min;\n    else if (e.key === 'End') next = invert ? min : max;\n    if (next === undefined) return;\n    e.preventDefault();\n    const settled = settle(next, min, max, step);\n    onInput(settled);\n    onChange?.(settled);\n  }, [invert, max, min, onInput, onChange, orientation, step, value]);\n\n  const cls = [s.handle, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-orientation={orientation}\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"mappings":";;;;;;GCiDM,KAAS,GAAW,GAAa,MAAwB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;AAO9F,SAAS,EAAO,GAAW,GAAa,GAAa,GAAsB;CACzE,IAAM,IAAU,IAAO,IAAI,KAAK,MAAM,IAAI,EAAK,GAAG,IAAO;AAGzD,QAAO,EADS,OAAO,UAAU,EAAK,GAAG,IAAU,OAAO,EAAQ,QAAQ,GAAG,CAAC,EACxD,GAAK,EAAI;;AAajC,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,iBAAc,YAAY,UAAO,QAAK,QAAK,WAAQ,YAAS,aAC5D,UAAO,GAAG,cAAW,iBACnB,GAIE,IAAS,EAAO,EAAM;AAC5B,GAAO,UAAU;CAKjB,IAAM,IAAO,EAAoE,KAAK,EAChF,IAAU,EAA8B,KAAK;AACnD,eAAsB;AAAE,IAAQ,SAAS,QAAQ;IAAK,EAAE,CAAC;CAEzD,IAAM,KAAW,MAAyB;EACxC,IAAM,IAAI,EAAK,SACT,IAAI,EAAO,SACX,IAAQ,IAAO,EAAE;AACvB,SAAO,EAAO,EAAE,cAAc,EAAE,SAAS,CAAC,IAAQ,IAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;IAGhF,KAAU,MAAiB;AAG/B,EAFA,EAAK,UAAU,MACf,EAAQ,UAAU,MAClB,EAAO,QAAQ,WAAW,EAAK;IAG3B,IAAgB,GAAa,MAAoC;AACrE,MAAI,EAAE,WAAW,KAAK,EAAQ,QAAS;EACvC,IAAM,IAAI,EAAO,SACX,KAAY,EAAE,eAAe,gBAAgB,YAC7C,KAAU,MAA8C,IAAW,EAAG,UAAU,EAAG;AAkBzF,EAjBA,EAAK,UAAU;GACb,QAAQ,EAAO,EAAE;GACjB,YAAY,EAAE;GACd,MAAM,EAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;GACjD,EACD,EAAQ,UAAU,EAAmB,EAAE,eAAe,GAAG;GACvD,SAAS,MAAO;IACd,IAAM,IAAO,EAAQ,EAAO,EAAG,CAAC;AAEhC,IADA,EAAK,QAAS,OAAO,GACrB,EAAO,QAAQ,QAAQ,EAAK;;GAE9B,QAAQ,MAAO;AAAE,MAAO,EAAQ,EAAO,EAAG,CAAC,CAAC;;GAI5C,gBAAgB;AAAE,MAAO,EAAK,QAAS,KAAK;;GAC7C,CAAC,EACF,EAAE,gBAAgB;IACjB,EAAE,CAAC,EAEA,IAAY,GAAa,MAAqC;EAClE,IAAM,IAAO,MAAgB,aAAa,eAAe,aACnD,IAAS,MAAgB,aAAa,cAAc,WACpD,IAAS,KAAQ,EAAE,WAAW,IAAI,MAAM,IAAS,KAAK,IACxD;AAKJ,MAJI,EAAE,QAAQ,IAAM,IAAO,IAAQ,IAC1B,EAAE,QAAQ,IAAQ,IAAO,IAAQ,IACjC,EAAE,QAAQ,SAAQ,IAAO,IAAS,IAAM,IACxC,EAAE,QAAQ,UAAO,IAAO,IAAS,IAAM,IAC5C,MAAS,KAAA,EAAW;AACxB,IAAE,gBAAgB;EAClB,IAAM,IAAU,EAAO,GAAM,GAAK,GAAK,EAAK;AAE5C,EADA,EAAQ,EAAQ,EAChB,IAAW,EAAQ;IAClB;EAAC;EAAQ;EAAK;EAAK;EAAS;EAAU;EAAa;EAAM;EAAM,CAAC;AAKnE,QACE,kBAAC,OAAD;EACE,WALQ;GAAC,EAAE;GAAQ,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC5E,OAAO,QAAQ,CAAC,KAAK,IAIT;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACA;EACJ;EACX,CAAA"}
+{"version":3,"file":"ResizeHandle-BrCO0JrH.js","names":[],"sources":["../../src/components/ResizeHandle/ResizeHandle.module.css","../../src/components/ResizeHandle/ResizeHandle.tsx"],"sourcesContent":[".handle {\n  flex-shrink: 0;\n  width: 4px;\n  align-self: stretch;\n  cursor: ew-resize;\n  background: transparent;\n  border-left: 1px solid var(--wzl-border);\n  /* The bar is 4px of hit area — thin enough to read as a seam, wide\n     enough to grab. `touch-action: none` keeps a touch drag from being\n     stolen by the scroll container it usually sits inside. */\n  touch-action: none;\n}\n\n.handle.horizontal {\n  width: auto;\n  height: 4px;\n  align-self: auto;\n  cursor: ns-resize;\n  border-left: none;\n  border-top: 1px solid var(--wzl-border);\n}\n\n.handle:hover {\n  background: var(--wzl-border);\n}\n\n.handle:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring, var(--wzl-accent));\n  outline-offset: -1px;\n}\n","import { useCallback, useEffect, useRef, type KeyboardEvent, type PointerEvent } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\nimport s from './ResizeHandle.module.css';\n\n/**\n * Props for {@link ResizeHandle}. `onInput` fires throughout the drag and\n * `onChange` once at the end.\n */\nexport interface ResizeHandleProps {\n  /**\n   * Which way the handle *runs*, matching `aria-orientation` on the\n   * separator role: a `vertical` handle is a vertical bar between two\n   * side-by-side panes and drags horizontally. `horizontal` is the\n   * stacked case (a bar between rows, dragged up and down).\n   */\n  orientation?: 'vertical' | 'horizontal';\n  /** Current size of the pane being resized, in pixels. */\n  value: number;\n  min: number;\n  max: number;\n  /**\n   * Flip the sign of the drag. Panes docked to the *trailing* edge (a\n   * right sidebar, a bottom drawer) grow as the pointer moves toward the\n   * start of the axis, so they want `invert`. Leading-edge panes don't.\n   */\n  invert?: boolean;\n  /**\n   * Fires continuously while dragging and on each keyboard step, always\n   * clamped to [min, max]. Drive the live size from this.\n   */\n  onInput(next: number): void;\n  /**\n   * Fires once when a drag ends or a keyboard step settles, with the final\n   * size. Persist here rather than in `onInput` — one write per gesture\n   * instead of one per pointer sample.\n   */\n  onChange?(next: number): void;\n  /**\n   * The granularity of `value`. Arrow keys move by one step (Shift by\n   * eight), and pointer drags snap to the same grid — a pointer reports\n   * fractional coordinates on a scaled display, and nobody wants\n   * `362.9453125` in their persisted layout. Set a fractional step for a\n   * pane measured in something finer than whole pixels.\n   */\n  step?: number;\n  ariaLabel?: string;\n  className?: string;\n}\n\nconst clamp = (n: number, min: number, max: number): number => Math.min(max, Math.max(min, n));\n\n/**\n * Snap to the step grid, then clamp. Bounds win over the grid: `min`/`max`\n * are hard limits, so a range that isn't a whole number of steps clips to\n * the bound rather than overshooting it.\n */\nfunction settle(n: number, min: number, max: number, step: number): number {\n  const snapped = step > 0 ? Math.round(n / step) * step : n;\n  // Re-round to kill the float dust `x / 0.1 * 0.1` leaves behind.\n  const precise = Number.isInteger(step) ? snapped : Number(snapped.toFixed(10));\n  return clamp(precise, min, max);\n}\n\n/**\n * Draggable divider for resizing a pane — the \"window splitter\" pattern.\n * Owns no size of its own: the consumer holds `value` and applies it\n * (typically as a CSS custom property on the pane), which keeps the handle\n * usable for flex, grid, and absolutely-positioned layouts alike.\n *\n * Keyboard-operable as a matter of course: it's focusable, arrows step by\n * `step` (Shift for a coarse step), Home/End jump to the bounds. A splitter\n * that only responds to a pointer drag strands anyone who can't make one.\n */\nexport function ResizeHandle(props: ResizeHandleProps) {\n  const {\n    orientation = 'vertical', value, min, max, invert, onInput, onChange,\n    step = 1, ariaLabel, className,\n  } = props;\n\n  // The session reads current props rather than the ones the pointerdown\n  // closed over, so a bound or a step changed mid-drag takes effect.\n  const latest = useRef(props);\n  latest.current = props;\n\n  // Drag origin. Measured on pointerdown so every move is measured against\n  // the gesture's start rather than the previous sample — accumulating\n  // per-sample deltas drifts once the pointer leaves the clamped range.\n  const drag = useRef<{ origin: number; startValue: number; last: number } | null>(null);\n  const session = useRef<PointerSession | null>(null);\n  useEffect(() => () => { session.current?.cancel(); }, []);\n\n  const valueAt = (axis: number): number => {\n    const d = drag.current!;\n    const p = latest.current;\n    const delta = axis - d.origin;\n    return settle(d.startValue + (p.invert ? -delta : delta), p.min, p.max, p.step ?? 1);\n  };\n\n  const finish = (next: number) => {\n    drag.current = null;\n    session.current = null;\n    latest.current.onChange?.(next);\n  };\n\n  const onPointerDown = useCallback((e: PointerEvent<HTMLDivElement>) => {\n    if (e.button !== 0 || session.current) return;\n    const p = latest.current;\n    const vertical = (p.orientation ?? 'vertical') === 'vertical';\n    const axisOf = (ev: { clientX: number; clientY: number }) => (vertical ? ev.clientX : ev.clientY);\n    drag.current = {\n      origin: axisOf(e),\n      startValue: p.value,\n      last: settle(p.value, p.min, p.max, p.step ?? 1),\n    };\n    session.current = openPointerSession(e.currentTarget, e, {\n      onMove: (ev) => {\n        const next = valueAt(axisOf(ev));\n        drag.current!.last = next;\n        latest.current.onInput(next);\n      },\n      onEnd: (ev) => { finish(valueAt(axisOf(ev))); },\n      // A cancelled resize settles where it was left: `onInput` has already\n      // moved the pane there and the consumer owns the value, so abandoning\n      // the commit would persist a size the user is no longer looking at.\n      onCancel: () => { finish(drag.current!.last); },\n    });\n    e.preventDefault();\n  }, []);\n\n  const onKeyDown = useCallback((e: KeyboardEvent<HTMLDivElement>) => {\n    const grow = orientation === 'vertical' ? 'ArrowRight' : 'ArrowDown';\n    const shrink = orientation === 'vertical' ? 'ArrowLeft' : 'ArrowUp';\n    const amount = step * (e.shiftKey ? 8 : 1) * (invert ? -1 : 1);\n    let next: number | undefined;\n    if (e.key === grow) next = value + amount;\n    else if (e.key === shrink) next = value - amount;\n    else if (e.key === 'Home') next = invert ? max : min;\n    else if (e.key === 'End') next = invert ? min : max;\n    if (next === undefined) return;\n    e.preventDefault();\n    const settled = settle(next, min, max, step);\n    onInput(settled);\n    onChange?.(settled);\n  }, [invert, max, min, onInput, onChange, orientation, step, value]);\n\n  const cls = [s.handle, orientation === 'horizontal' && s.horizontal, className]\n    .filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      role=\"separator\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-orientation={orientation}\n      aria-valuenow={value}\n      aria-valuemin={min}\n      aria-valuemax={max}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    />\n  );\n}\n"],"mappings":";;;;;;GCiDM,KAAS,GAAW,GAAa,MAAwB,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,EAAE,CAAC;AAO9F,SAAS,EAAO,GAAW,GAAa,GAAa,GAAsB;CACzE,IAAM,IAAU,IAAO,IAAI,KAAK,MAAM,IAAI,EAAK,GAAG,IAAO;AAGzD,QAAO,EADS,OAAO,UAAU,EAAK,GAAG,IAAU,OAAO,EAAQ,QAAQ,GAAG,CAAC,EACxD,GAAK,EAAI;;AAajC,SAAgB,EAAa,GAA0B;CACrD,IAAM,EACJ,iBAAc,YAAY,UAAO,QAAK,QAAK,WAAQ,YAAS,aAC5D,UAAO,GAAG,cAAW,iBACnB,GAIE,IAAS,EAAO,EAAM;AAC5B,GAAO,UAAU;CAKjB,IAAM,IAAO,EAAoE,KAAK,EAChF,IAAU,EAA8B,KAAK;AACnD,eAAsB;AAAE,IAAQ,SAAS,QAAQ;IAAK,EAAE,CAAC;CAEzD,IAAM,KAAW,MAAyB;EACxC,IAAM,IAAI,EAAK,SACT,IAAI,EAAO,SACX,IAAQ,IAAO,EAAE;AACvB,SAAO,EAAO,EAAE,cAAc,EAAE,SAAS,CAAC,IAAQ,IAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;IAGhF,KAAU,MAAiB;AAG/B,EAFA,EAAK,UAAU,MACf,EAAQ,UAAU,MAClB,EAAO,QAAQ,WAAW,EAAK;IAG3B,IAAgB,GAAa,MAAoC;AACrE,MAAI,EAAE,WAAW,KAAK,EAAQ,QAAS;EACvC,IAAM,IAAI,EAAO,SACX,KAAY,EAAE,eAAe,gBAAgB,YAC7C,KAAU,MAA8C,IAAW,EAAG,UAAU,EAAG;AAkBzF,EAjBA,EAAK,UAAU;GACb,QAAQ,EAAO,EAAE;GACjB,YAAY,EAAE;GACd,MAAM,EAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE;GACjD,EACD,EAAQ,UAAU,EAAmB,EAAE,eAAe,GAAG;GACvD,SAAS,MAAO;IACd,IAAM,IAAO,EAAQ,EAAO,EAAG,CAAC;AAEhC,IADA,EAAK,QAAS,OAAO,GACrB,EAAO,QAAQ,QAAQ,EAAK;;GAE9B,QAAQ,MAAO;AAAE,MAAO,EAAQ,EAAO,EAAG,CAAC,CAAC;;GAI5C,gBAAgB;AAAE,MAAO,EAAK,QAAS,KAAK;;GAC7C,CAAC,EACF,EAAE,gBAAgB;IACjB,EAAE,CAAC,EAEA,IAAY,GAAa,MAAqC;EAClE,IAAM,IAAO,MAAgB,aAAa,eAAe,aACnD,IAAS,MAAgB,aAAa,cAAc,WACpD,IAAS,KAAQ,EAAE,WAAW,IAAI,MAAM,IAAS,KAAK,IACxD;AAKJ,MAJI,EAAE,QAAQ,IAAM,IAAO,IAAQ,IAC1B,EAAE,QAAQ,IAAQ,IAAO,IAAQ,IACjC,EAAE,QAAQ,SAAQ,IAAO,IAAS,IAAM,IACxC,EAAE,QAAQ,UAAO,IAAO,IAAS,IAAM,IAC5C,MAAS,KAAA,EAAW;AACxB,IAAE,gBAAgB;EAClB,IAAM,IAAU,EAAO,GAAM,GAAK,GAAK,EAAK;AAE5C,EADA,EAAQ,EAAQ,EAChB,IAAW,EAAQ;IAClB;EAAC;EAAQ;EAAK;EAAK;EAAS;EAAU;EAAa;EAAM;EAAM,CAAC;AAKnE,QACE,kBAAC,OAAD;EACE,WALQ;GAAC,EAAE;GAAQ,MAAgB,gBAAgB,EAAE;GAAY;GAAU,CAC5E,OAAO,QAAQ,CAAC,KAAK,IAIT;EACX,MAAK;EACL,UAAU;EACV,cAAY;EACZ,oBAAkB;EAClB,iBAAe;EACf,iBAAe;EACf,iBAAe;EACA;EACJ;EACX,CAAA"}