@weasel-js/ui 1.5.0 → 1.5.2

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

@@ -1 +0,0 @@
-{"version":3,"file":"Properties-DJaDEJkT.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  /* The subtraction is the unit and its gap at the kit's own font size, so the\n     default is wrong against a much smaller or larger one — override the hook\n     rather than reaching for the hashed class name. */\n  /* The fit is the widest value in `ch`, which is one digit; the box is border-box, so its border\n     comes back on top, with half a `ch` for a glyph wider than a digit. */\n  width: max(\n    var(--wzl-property-readout-w, calc(5em - 24px)),\n    calc(var(--wzl-property-readout-fit, 0px) + 2px + 0.5ch)\n  );\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 {\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Focusable } from 'react-aria-components';\nimport { dlog } from '../../dlog';\nimport { formatCompact, formatNumber, parseNumber } from '../../format/number';\nimport type { PrefNumberFormat } from '../Prefs/schema';\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/**\n * A ref for an input whose commit half has to come off a real listener.\n *\n * A native `range`, `color` or `number` input fires `input` through the\n * interaction and `change` once at the end, but React's synthetic `onChange`\n * sees only the first: its value tracker drops the unchanged second. So a row\n * offering the live/committed split reads the live half from React and the\n * committed half from here.\n *\n * `commit` is `undefined` on a row given one callback, which then fires\n * continuously — what a row with one callback has always done.\n */\nfunction useCommitListener(\n  commit: ((raw: string) => void) | undefined,\n): RefObject<HTMLInputElement | null> {\n  const ref = useRef<HTMLInputElement>(null);\n  const latest = useRef(commit);\n  useEffect(() => {\n    latest.current = commit;\n  });\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const onCommit = () => latest.current?.(el.value);\n    el.addEventListener('change', onCommit);\n    return () => el.removeEventListener('change', onCommit);\n  }, []);\n  return ref;\n}\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  /** A named display for the value: `compact` reads `2.0M`. `format` wins when both are given. */\n  notation?: PrefNumberFormat;\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  notation,\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 = useCommitListener(commit && ((raw) => commit(Number(raw))));\n  const effectiveFormat =\n    format ??\n    (notation === 'compact'\n      ? (n: number) => formatCompact(n, decimals)\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 text = (n: number) => {\n    const formatted = fmt(n);\n    return typeof formatted === 'string' ? formatted : String(formatted);\n  };\n  const displayValue = draft !== null ? draft : text(value);\n  // The widest value the range can show, which the stylesheet widens the box to fit.\n  const fit = { '--wzl-property-readout-fit': `${Math.max(text(min).length, text(max).length)}ch` };\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 = parseNumber(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        style={fit as CSSProperties}\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  /**\n   * The committed color. Given `onInput` as well, it fires once the picker\n   * closes; on its own it fires on every move inside it, which is what a row\n   * with one callback has always done.\n   */\n  onChange: (next: string) => void;\n  /**\n   * The live color, fired continuously while the picker is open. Pass it\n   * alongside `onChange` when the write is expensive — cheap state here, the\n   * costly work there. Mirrors `<Slider>`'s `onInput` / `onChange` pair.\n   */\n  onInput?: (next: string) => void;\n  /** 0..1 alpha. When provided, a translucent slider renders beneath the swatch. */\n  alpha?: number;\n  /** The committed alpha, on the same terms as `onChange`. */\n  onAlphaChange?: (next: number) => void;\n  /** The live alpha, on the same terms as `onInput`. */\n  onAlphaInput?: (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  onInput,\n  alpha,\n  onAlphaChange,\n  onAlphaInput,\n  alphaDisabled,\n  layout,\n  description,\n  span,\n  density,\n  align,\n}: ColorRowProps) {\n  const showAlpha = alpha != null;\n  const liveColor = onInput ?? onChange;\n  const color = useCommitListener(onInput && ((raw) => onChange(raw)));\n  const liveAlpha = onAlphaInput ?? onAlphaChange;\n  const alphaRange = useCommitListener(\n    onAlphaInput && onAlphaChange && ((raw) => onAlphaChange(Number(raw))),\n  );\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\n        ref={color}\n        type=\"color\"\n        value={value}\n        onChange={(e) => liveColor(e.target.value)}\n      />\n      {showAlpha && (\n        <input\n          ref={alphaRange}\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) => liveAlpha?.(Number(e.target.value))}\n        />\n      )}\n    </PropertyRow>\n  );\n}\n\n/** Props for `<CheckboxRow>`. */\nexport interface CheckboxRowProps extends PropertyMetricProps {\n  label: ReactNode;\n  /** Absent reads as unchecked. */\n  value: boolean | undefined;\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 === true} onChange={(e) => onChange(e.target.checked)} />\n    </PropertyRow>\n  );\n}\n\n/** Props for `<TextRow>`. */\nexport interface TextRowProps extends PropertyMetricProps {\n  label: ReactNode;\n  /** Absent reads as an empty field. */\n  value: string | null | undefined;\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  /** Absent reads as an empty field. */\n  value: number | null | undefined;\n  /**\n   * The committed value. Given `onInput` as well, it fires on blur or Enter;\n   * on its own it fires on every keystroke, which is what a row with one\n   * callback has always done.\n   */\n  onChange: (next: number) => void;\n  /**\n   * The live value, fired per keystroke. Pass it alongside `onChange` when the\n   * write is expensive — cheap state here, the costly work there. Mirrors\n   * `<Slider>`'s `onInput` / `onChange` pair.\n   */\n  onInput?: (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  onInput,\n  min,\n  max,\n  step,\n  placeholder,\n  unit,\n  layout,\n  description,\n  span,\n  density,\n  align,\n}: NumberRowProps) {\n  const live = onInput ?? onChange;\n  const field = useCommitListener(onInput && ((raw) => {\n    if (raw === '') return;\n    const n = Number(raw);\n    if (Number.isFinite(n)) onChange(n);\n  }));\n  const input = (\n    <input\n      ref={field}\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)) live(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  /** Absent, or not one of `options`, shows a placeholder rather than the first option. */\n  value: T | undefined;\n  options: ReadonlyArray<PropertyOption<T>>;\n  onChange: (next: T) => void;\n  /** Shown while no option is chosen. Defaults to \"Choose option…\". */\n  placeholder?: string;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n}\n\n/** A 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  placeholder = 'Choose option…',\n  layout,\n  description,\n  span,\n  density,\n  align,\n}: SelectRowProps<T>) {\n  const chosen = options.some((opt) => opt.value === value);\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={chosen ? 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        {!chosen && (\n          <option value=\"\" disabled hidden>\n            {placeholder}\n          </option>\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-B2_LUgDp.js.map

@@ -1 +0,0 @@
-{"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-S2R3zA8N.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"RangeSlider-S2R3zA8N.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  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 *\n * The root is a column flex container and the track stretches to it, so\n * `align-items` on the root or on a wrapper that replaces it governs the\n * *horizontal* axis here and collapses the track to its content width. Style\n * the wrapper around one, not the root.\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":";;;;;;;;;;;;;ACgCA,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/Select-CacMfs4v.js

@@ -1,124 +0,0 @@
-import { r as e } from "./portalHost-CjpCnuGU.js";
-import { n as t } from "./Field-dzlxOGxT.js";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Children as i, isValidElement as a } from "react";
-import { Button as o, FieldError as s, Label as c, ListBox as l, ListBoxItem as u, Popover as d, Select as f, SelectValue as p, Text as m } from "react-aria-components";
-var h = {
-	field: "_field_1wahg_1",
-	trigger: "_trigger_1wahg_9",
-	value: "_value_1wahg_41",
-	chevron: "_chevron_1wahg_54",
-	popover: "_popover_1wahg_61",
-	listbox: "_listbox_1wahg_67",
-	option: "_option_1wahg_80",
-	check: "_check_1wahg_105",
-	fit: "_fit_1wahg_118",
-	sizer: "_sizer_1wahg_129"
-};
-//#endregion
-//#region src/components/Select/Select.tsx
-function g(i) {
-	let { label: a, description: u, errorMessage: g, placeholder: y, options: x, children: S, selectedKey: C, defaultSelectedKey: w, onSelectionChange: T, width: E = "fill", className: D, portalContainer: O, ...k } = i, { anchor: A, portalProps: j } = e(O);
-	return /* @__PURE__ */ r(f, {
-		...k,
-		selectedKey: C,
-		defaultSelectedKey: w,
-		onSelectionChange: T ? (e) => T(e) : void 0,
-		className: [
-			h.field,
-			E === "fit" && h.fit,
-			t.root,
-			D
-		].filter(Boolean).join(" "),
-		children: [
-			A,
-			a !== void 0 && /* @__PURE__ */ n(c, {
-				className: t.label,
-				children: a
-			}),
-			/* @__PURE__ */ r(o, {
-				className: h.trigger,
-				children: [
-					/* @__PURE__ */ n(p, {
-						className: h.value,
-						children: ({ defaultChildren: e, isPlaceholder: t }) => t ? y ?? e : e
-					}),
-					E === "fit" && /* @__PURE__ */ r("span", {
-						className: h.sizer,
-						"aria-hidden": "true",
-						children: [y !== void 0 && /* @__PURE__ */ n("span", { children: y }), v(x, S).map((e, t) => /* @__PURE__ */ r("span", { children: [/* @__PURE__ */ n(_, {}), e] }, t))]
-					}),
-					/* @__PURE__ */ n("svg", {
-						className: h.chevron,
-						viewBox: "0 0 10 10",
-						"aria-hidden": "true",
-						children: /* @__PURE__ */ n("path", {
-							d: "M2 4 L5 7 L8 4",
-							fill: "none",
-							stroke: "currentColor",
-							strokeWidth: "1.5",
-							strokeLinecap: "round",
-							strokeLinejoin: "round"
-						})
-					})
-				]
-			}),
-			u !== void 0 && /* @__PURE__ */ n(m, {
-				slot: "description",
-				className: t.hint,
-				children: u
-			}),
-			/* @__PURE__ */ n(s, {
-				className: t.error,
-				children: g
-			}),
-			/* @__PURE__ */ n(d, {
-				className: h.popover,
-				"data-weasel-overlay": "",
-				...j,
-				children: /* @__PURE__ */ n(l, {
-					className: h.listbox,
-					children: x === void 0 ? S : x.map((e) => /* @__PURE__ */ n(b, {
-						id: e.value,
-						isDisabled: e.isDisabled,
-						textValue: e.textValue,
-						children: e.label
-					}, String(e.value)))
-				})
-			})
-		]
-	});
-}
-function _() {
-	return /* @__PURE__ */ n("svg", {
-		className: h.check,
-		viewBox: "0 0 10 10",
-		"aria-hidden": "true",
-		children: /* @__PURE__ */ n("polyline", {
-			points: "1.5,5 4,7.5 8.5,3",
-			fill: "none",
-			stroke: "currentColor",
-			strokeWidth: "1.6",
-			strokeLinecap: "round",
-			strokeLinejoin: "round"
-		})
-	});
-}
-function v(e, t) {
-	return e === void 0 ? i.toArray(t).map((e) => a(e) ? e.props.children : e) : e.map((e) => e.label);
-}
-function y(e, t) {
-	return t === void 0 ? typeof e == "string" || typeof e == "number" ? String(e) : void 0 : t;
-}
-function b({ children: e, className: t, textValue: i, ...a }) {
-	return /* @__PURE__ */ r(u, {
-		...a,
-		textValue: y(e, i),
-		className: [h.option, t].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ n(_, {}), e]
-	});
-}
-//#endregion
-export { b as n, g as t };
-
-//# sourceMappingURL=Select-CacMfs4v.js.map

package/dist/chunks/Select-CacMfs4v.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Select-CacMfs4v.js","names":[],"sources":["../../src/components/Select/Select.module.css","../../src/components/Select/Select.tsx"],"sourcesContent":[".field {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 0;\n  gap: 4px;\n}\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: 6px;\n  height: var(--wzl-control-h);\n  padding: 0 6px 0 10px;\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-fg);\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n  line-height: 1;\n  cursor: pointer;\n  transition: border-color var(--wzl-motion-fast), box-shadow var(--wzl-motion-fast);\n}\n\n.trigger[data-focus-visible] {\n  border-color: var(--wzl-focus-ring);\n  box-shadow: 0 0 0 1px var(--wzl-focus-ring);\n}\n\n.field[data-invalid] .trigger {\n  border-color: var(--wzl-danger);\n}\n\n.trigger[data-disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.value {\n  flex: 1;\n  min-width: 0;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.value[data-placeholder] {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n.popover {\n  min-width: var(--trigger-width);\n  max-height: inherit;\n  outline: none;\n}\n\n.listbox {\n  background: var(--wzl-surface-raised);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-md);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);\n  padding: 4px;\n  max-height: 280px;\n  overflow: auto;\n  outline: none;\n  font-family: var(--wzl-font-ui);\n  font-size: var(--wzl-font-size);\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 8px;\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.check {\n  width: 10px;\n  height: 10px;\n  flex: 0 0 auto;\n  opacity: 0;\n}\n\n.option[data-selected] .check {\n  opacity: 1;\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the value's grid\n   cell, so the trigger sizes to its widest option and never resizes on select. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .trigger {\n  display: grid;\n  grid-template-columns: auto auto;\n}\n\n.fit .value,\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .chevron {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  display: grid;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  white-space: nowrap;\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import { Children, isValidElement, type ReactNode } from 'react';\nimport {\n  Select as RACSelect,\n  Label,\n  Button as RACButton,\n  SelectValue,\n  Popover as RACPopover,\n  ListBox as RACListBox,\n  ListBoxItem as RACListBoxItem,\n  Text,\n  FieldError,\n  type SelectProps as RACSelectProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { fieldClasses } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './Select.module.css';\n\n/** One option in a {@link Select}'s `options` list. */\nexport type SelectOption = {\n  value: string;\n  label: ReactNode;\n  isDisabled?: boolean;\n  /**\n   * Plain-text form of `label`, for type-to-select and screen readers.\n   * Only needed when `label` isn't a bare string — a label built from\n   * elements has no text React Aria can read off it. A string label\n   * supplies this itself.\n   */\n  textValue?: string;\n};\n\ntype Key = string | number;\n\n/**\n * Props for {@link Select}, on top of React Aria's `Select` props, with the\n * selection key narrowed to the option value type.\n */\nexport type SelectProps<T extends Key = string> = Omit<RACSelectProps<object>, 'children' | 'className' | 'selectedKey' | 'defaultSelectedKey' | 'onSelectionChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  /** Either pass `options` for a quick render, or `children` for full control. */\n  options?: ReadonlyArray<SelectOption & { value: T }>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the select sits in.\n   * `'fit'` sizes the trigger to its widest option, so it neither swallows a\n   * toolbar's slack nor changes width as the selection moves.\n   */\n  width?: 'fill' | 'fit';\n  className?: string;\n} & OverlayPortalProps;\n\n/**\n * Form select wrapping React Aria's Select. Pass either `options` for a\n * quick declarative render or `children` of `<SelectItem>` for control over\n * each row.\n *\n * The selection key type is parameterized so consumers with a string-literal\n * union for `value` (e.g. `'r' | 'g' | 'b'`) get a typed `onSelectionChange`.\n */\nexport function Select<T extends Key = string>(props: SelectProps<T>) {\n  const {\n    label,\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    width = 'fill',\n    className,\n    portalContainer,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n\n  return (\n    <RACSelect\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T) : undefined}\n      className={[s.field, width === 'fit' && s.fit, fieldClasses.root, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={fieldClasses.label}>{label}</Label>}\n      <RACButton className={s.trigger}>\n        <SelectValue className={s.value}>\n          {({ defaultChildren, isPlaceholder }) =>\n            isPlaceholder ? (placeholder ?? defaultChildren) : defaultChildren\n          }\n        </SelectValue>\n        {width === 'fit' && (\n          <span className={s.sizer} aria-hidden=\"true\">\n            {placeholder !== undefined && <span>{placeholder}</span>}\n            {optionLabels(options, children).map((l, i) => (\n              <span key={i}>\n                <CheckMark />\n                {l}\n              </span>\n            ))}\n          </span>\n        )}\n        <svg className={s.chevron} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n          <path d=\"M2 4 L5 7 L8 4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      </RACButton>\n      {description !== undefined && (\n        <Text slot=\"description\" className={fieldClasses.hint}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={fieldClasses.error}>{errorMessage}</FieldError>\n      {/* `data-weasel-overlay` marks DOM that belongs to this control but\n          renders in a portal, outside the subtree the trigger sits in. Any\n          consumer reasoning about \"did focus leave my component?\" via\n          `closest()` gets the wrong answer without it — a text editor whose\n          font menu lives here would end its session the moment the menu is\n          clicked. */}\n      <RACPopover className={s.popover} data-weasel-overlay=\"\" {...portalProps}>\n        <RACListBox className={s.listbox}>\n          {options !== undefined\n            ? options.map((o) => (\n                <SelectItem\n                  key={String(o.value)}\n                  id={o.value}\n                  isDisabled={o.isDisabled}\n                  textValue={o.textValue}\n                >\n                  {o.label}\n                </SelectItem>\n              ))\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\n/* A selected row's mark travels into the trigger with its label, so a\n   `width='fit'` sizer has to allow for it too. */\nfunction CheckMark() {\n  return (\n    <svg className={s.check} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n      <polyline points=\"1.5,5 4,7.5 8.5,3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\n/**\n * The labels a `width='fit'` trigger measures itself against. In the children\n * form the label sits one element deep, inside a `SelectItem`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<SelectOption> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined) return options.map((o) => o.label);\n  return Children.toArray(children).map((c) =>\n    isValidElement<{ children?: ReactNode }>(c) ? c.props.children : c,\n  );\n}\n\n/** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */\nexport type SelectItemProps = Omit<RACListBoxItemProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Every row renders a check mark beside its label, so from React Aria's\n * side the children are never plain text and it can't derive the string\n * type-to-select and screen readers need — it warns once per row. A string\n * label already *is* that string, so derive it rather than making every\n * call site restate it; anything richer has to say what it reads as.\n */\nfunction textValueOf(children: ReactNode, explicit: string | undefined): string | undefined {\n  if (explicit !== undefined) return explicit;\n  return typeof children === 'string' || typeof children === 'number'\n    ? String(children)\n    : undefined;\n}\n\n/**\n * One row in a {@link Select}'s list, with a leading check mark when\n * selected. A string child supplies its own `textValue`; anything richer must\n * pass one so type-to-select and screen readers have something to read.\n */\nexport function SelectItem({ children, className, textValue, ...rest }: SelectItemProps) {\n  return (\n    <RACListBoxItem\n      {...rest}\n      textValue={textValueOf(children, textValue)}\n      className={[s.option, className].filter(Boolean).join(' ')}\n    >\n      <CheckMark />\n      {children}\n    </RACListBoxItem>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;ACmEA,SAAgB,EAA+B,GAAuB;CACpE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,WAAQ,QACR,cACA,oBACA,GAAG,MACD,GAEE,EAAE,WAAQ,mBAAgB,EAAiB,EAAgB;AAEjE,QACE,kBAAC,GAAD;EACE,GAAI;EACS;EACO;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAO,GAAG,KAAA;EAC1E,WAAW;GAAC,EAAE;GAAO,MAAU,SAAS,EAAE;GAAK,EAAa;GAAM;GAAU,CACzE,OAAO,QAAQ,CACf,KAAK,IAAI;YAPd;GASG;GACA,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAW,WAAW,EAAE;cAAxB;KACE,kBAAC,GAAD;MAAa,WAAW,EAAE;iBACtB,EAAE,oBAAiB,uBACnB,IAAiB,KAAe,IAAmB;MAEzC,CAAA;KACb,MAAU,SACT,kBAAC,QAAD;MAAM,WAAW,EAAE;MAAO,eAAY;gBAAtC,CACG,MAAgB,KAAA,KAAa,kBAAC,QAAD,EAAA,UAAO,GAAmB,CAAA,EACvD,EAAa,GAAS,EAAS,CAAC,KAAK,GAAG,MACvC,kBAAC,QAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAa,CAAA,EACZ,EACI,EAAA,EAHI,EAGJ,CACP,CACG;;KAET,kBAAC,OAAD;MAAK,WAAW,EAAE;MAAS,SAAQ;MAAY,eAAY;gBACzD,kBAAC,QAAD;OAAM,GAAE;OAAiB,MAAK;OAAO,QAAO;OAAe,aAAY;OAAM,eAAc;OAAQ,gBAAe;OAAU,CAAA;MACxH,CAAA;KACI;;GACX,MAAgB,KAAA,KACf,kBAAC,GAAD;IAAM,MAAK;IAAc,WAAW,EAAa;cAC9C;IACI,CAAA;GAET,kBAAC,GAAD;IAAY,WAAW,EAAa;cAAQ;IAA0B,CAAA;GAOtE,kBAAC,GAAD;IAAY,WAAW,EAAE;IAAS,uBAAoB;IAAG,GAAI;cAC3D,kBAAC,GAAD;KAAY,WAAW,EAAE;eACtB,MAAY,KAAA,IAWT,IAVA,EAAQ,KAAK,MACX,kBAAC,GAAD;MAEE,IAAI,EAAE;MACN,YAAY,EAAE;MACd,WAAW,EAAE;gBAEZ,EAAE;MACQ,EANN,OAAO,EAAE,MAAM,CAMT,CACb;KAEK,CAAA;IACF,CAAA;GACH;;;AAMhB,SAAS,IAAY;AACnB,QACE,kBAAC,OAAD;EAAK,WAAW,EAAE;EAAO,SAAQ;EAAY,eAAY;YACvD,kBAAC,YAAD;GAAU,QAAO;GAAoB,MAAK;GAAO,QAAO;GAAe,aAAY;GAAM,eAAc;GAAQ,gBAAe;GAAU,CAAA;EACpI,CAAA;;AAQV,SAAS,EACP,GACA,GACa;AAEb,QADI,MAAY,KAAA,IACT,EAAS,QAAQ,EAAS,CAAC,KAAK,MACrC,EAAyC,EAAE,GAAG,EAAE,MAAM,WAAW,EAClE,GAHiC,EAAQ,KAAK,MAAM,EAAE,MAAM;;AAmB/D,SAAS,EAAY,GAAqB,GAAkD;AAE1F,QADI,MAAa,KAAA,IACV,OAAO,KAAa,YAAY,OAAO,KAAa,WACvD,OAAO,EAAS,GAChB,KAAA,IAH+B;;AAWrC,SAAgB,EAAW,EAAE,aAAU,cAAW,cAAW,GAAG,KAAyB;AACvF,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAY,GAAU,EAAU;EAC3C,WAAW,CAAC,EAAE,QAAQ,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAH5D,CAKE,kBAAC,GAAD,EAAa,CAAA,EACZ,EACc"}