npm - @weasel-js/ui - Versions diffs - 1.4.1 → 1.4.2 - Mend

@weasel-js/ui 1.4.1 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/dist/chunks/Properties-BuNzy7Hb.js.map DELETED Viewed

@@ -1 +0,0 @@

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

package/dist/chunks/Select-D1uP21db.js DELETED Viewed

@@ -1,103 +0,0 @@
-import { n as e } from "./Field-Bc6Nuc3p.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Button as r, FieldError as i, Label as a, ListBox as o, ListBoxItem as s, Popover as c, Select as l, SelectValue as u, Text as d } from "react-aria-components";
-var f = {
-	field: "_field_1dbmd_1",
-	trigger: "_trigger_1dbmd_9",
-	value: "_value_1dbmd_41",
-	chevron: "_chevron_1dbmd_54",
-	popover: "_popover_1dbmd_61",
-	listbox: "_listbox_1dbmd_67",
-	option: "_option_1dbmd_80",
-	check: "_check_1dbmd_105"
-};
-//#endregion
-//#region src/components/Select/Select.tsx
-function p(s) {
-	let { label: p, description: m, errorMessage: g, placeholder: _, options: v, children: y, selectedKey: b, defaultSelectedKey: x, onSelectionChange: S, className: C, ...w } = s;
-	return /* @__PURE__ */ n(l, {
-		...w,
-		selectedKey: b,
-		defaultSelectedKey: x,
-		onSelectionChange: S ? (e) => S(e) : void 0,
-		className: [
-			f.field,
-			e.root,
-			C
-		].filter(Boolean).join(" "),
-		children: [
-			p !== void 0 && /* @__PURE__ */ t(a, {
-				className: e.label,
-				children: p
-			}),
-			/* @__PURE__ */ n(r, {
-				className: f.trigger,
-				children: [/* @__PURE__ */ t(u, {
-					className: f.value,
-					children: ({ defaultChildren: e, isPlaceholder: t }) => t ? _ ?? e : e
-				}), /* @__PURE__ */ t("svg", {
-					className: f.chevron,
-					viewBox: "0 0 10 10",
-					"aria-hidden": "true",
-					children: /* @__PURE__ */ t("path", {
-						d: "M2 4 L5 7 L8 4",
-						fill: "none",
-						stroke: "currentColor",
-						strokeWidth: "1.5",
-						strokeLinecap: "round",
-						strokeLinejoin: "round"
-					})
-				})]
-			}),
-			m !== void 0 && /* @__PURE__ */ t(d, {
-				slot: "description",
-				className: e.hint,
-				children: m
-			}),
-			/* @__PURE__ */ t(i, {
-				className: e.error,
-				children: g
-			}),
-			/* @__PURE__ */ t(c, {
-				className: f.popover,
-				"data-weasel-overlay": "",
-				children: /* @__PURE__ */ t(o, {
-					className: f.listbox,
-					children: v === void 0 ? y : v.map((e) => /* @__PURE__ */ t(h, {
-						id: e.value,
-						isDisabled: e.isDisabled,
-						textValue: e.textValue,
-						children: e.label
-					}, String(e.value)))
-				})
-			})
-		]
-	});
-}
-function m(e, t) {
-	return t === void 0 ? typeof e == "string" || typeof e == "number" ? String(e) : void 0 : t;
-}
-function h({ children: e, className: r, textValue: i, ...a }) {
-	return /* @__PURE__ */ n(s, {
-		...a,
-		textValue: m(e, i),
-		className: [f.option, r].filter(Boolean).join(" "),
-		children: [/* @__PURE__ */ t("svg", {
-			className: f.check,
-			viewBox: "0 0 10 10",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ t("polyline", {
-				points: "1.5,5 4,7.5 8.5,3",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: "1.6",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
-			})
-		}), e]
-	});
-}
-//#endregion
-export { h as n, p as t };
-//# sourceMappingURL=Select-D1uP21db.js.map

package/dist/chunks/Select-D1uP21db.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"Select-D1uP21db.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","import 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 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 className?: string;\n};\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 className,\n ...rest\n } = props;\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, fieldClasses.root, className].filter(Boolean).join(' ')}\n >\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 <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=\"\">\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/** 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 <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 {children}\n </RACListBoxItem>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;AC4DA,SAAgB,EAA+B,GAAuB;CACpE,IAAM,EACJ,UACA,gBACA,iBACA,gBACA,YACA,aACA,gBACA,uBACA,sBACA,cACA,GAAG,MACD;AAEJ,QACE,kBAAC,GAAD;EACE,GAAI;EACS;EACO;EACpB,mBAAmB,KAAqB,MAAM,EAAkB,EAAO,GAAG,KAAA;EAC1E,WAAW;GAAC,EAAE;GAAO,EAAa;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;YAL9E;GAOG,MAAU,KAAA,KAAa,kBAAC,GAAD;IAAO,WAAW,EAAa;cAAQ;IAAc,CAAA;GAC7E,kBAAC,GAAD;IAAW,WAAW,EAAE;cAAxB,CACE,kBAAC,GAAD;KAAa,WAAW,EAAE;gBACtB,EAAE,oBAAiB,uBACnB,IAAiB,KAAe,IAAmB;KAEzC,CAAA,EACd,kBAAC,OAAD;KAAK,WAAW,EAAE;KAAS,SAAQ;KAAY,eAAY;eACzD,kBAAC,QAAD;MAAM,GAAE;MAAiB,MAAK;MAAO,QAAO;MAAe,aAAY;MAAM,eAAc;MAAQ,gBAAe;MAAU,CAAA;KACxH,CAAA,CACI;;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;cACpD,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;;;AAiBhB,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,OAAD;GAAK,WAAW,EAAE;GAAO,SAAQ;GAAY,eAAY;aACvD,kBAAC,YAAD;IAAU,QAAO;IAAoB,MAAK;IAAO,QAAO;IAAe,aAAY;IAAM,eAAc;IAAQ,gBAAe;IAAU,CAAA;GACpI,CAAA,EACL,EACc"}

package/dist/chunks/useReorderDragList-UvHJFjTZ.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"useReorderDragList-UvHJFjTZ.js","names":[],"sources":["../../src/useReorderDragList.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport type { ReactNode, PointerEvent as ReactPointerEvent, RefCallback } from 'react';\nimport { openPointerSession, type PointerSession } from '@weasel-js/core';\n\n/** One row in a reorderable list. */\nexport interface LayerListItem {\n id: string;\n label: ReactNode;\n /** Locked rows cannot be dragged, cannot be crossed by drops, and\n * never combine with other rows in a multi-selection. */\n locked?: boolean;\n /** Optional color swatch rendered before the label. Any CSS color string. */\n swatch?: string;\n}\n\n/**\n * Options for {@link useReorderDragList}. `onReorder` receives the dragged ids\n * and the index they were dropped at, measured against the pre-drag `items`.\n */\nexport interface UseReorderDragListOptions {\n items: LayerListItem[];\n selectedIds: string[];\n onReorder(ids: string[], targetIndex: number): void;\n /** A press that was released without ever engaging a drag — the click a\n * list row means by it. Fires for locked rows too, which can be selected\n * but not dragged. Modifiers are read at press, not at release. */\n onPress?(id: string, mods: PressModifiers): void;\n /** Pointer-move distance (px) before pending drag engages. Default 4. */\n threshold?: number;\n}\n\n/** Modifier keys held when a press began. */\nexport interface PressModifiers {\n shiftKey: boolean;\n ctrlKey: boolean;\n metaKey: boolean;\n altKey: boolean;\n}\n\n/**\n * Live drag state for rendering feedback: which ids are being dragged and the\n * insertion index the drop would use. Both `null` when no drag is engaged.\n */\nexport interface ReorderDragState {\n draggedIds: string[] | null;\n targetIndex: number | null;\n}\n\n/**\n * A `ref` for the list container, an `onPointerDown` for each row, and the\n * live {@link ReorderDragState}. The container ref is required, not optional\n * decoration: it is what the drop index is measured against and what the\n * pointer session is opened on.\n */\nexport interface ReorderDragHandlers {\n rowProps(id: string, index: number): { onPointerDown(e: ReactPointerEvent): void };\n containerProps: {\n ref: RefCallback<HTMLElement>;\n };\n state: ReorderDragState;\n}\n\n/**\n * The half-open run of indices a row at `sourceIndex` may be dropped into:\n * bounded by the nearest locked row above and below it, so a locked row is a\n * wall in both directions rather than a global ceiling.\n */\nfunction unlockedSegment(items: readonly LayerListItem[], sourceIndex: number): [number, number] {\n let lo = 0;\n for (let i = sourceIndex - 1; i >= 0; i--) {\n if (items[i]?.locked) { lo = i + 1; break; }\n }\n let hi = items.length;\n for (let i = sourceIndex + 1; i < items.length; i++) {\n if (items[i]?.locked) { hi = i; break; }\n }\n return [lo, hi];\n}\n\n/** Would dropping `draggedIds` at `targetIndex` leave a contiguous block where it already is? */\nfunction isNoopDrop(items: readonly LayerListItem[], draggedIds: readonly string[], targetIndex: number): boolean {\n const indices = draggedIds\n .map((id) => items.findIndex((it) => it.id === id))\n .filter((i) => i >= 0)\n .sort((a, b) => a - b);\n const contiguous =\n indices.length > 0 &&\n indices.every((v, i) => {\n if (i === 0) return true;\n const prev = indices[i - 1];\n return prev !== undefined && v === prev + 1;\n });\n const first = indices[0];\n const last = indices[indices.length - 1];\n return contiguous\n && first !== undefined\n && last !== undefined\n && targetIndex >= first\n && targetIndex <= last + 1;\n}\n\n/**\n * Drag-to-reorder for a vertical list of rows. Dragging a row that is part of\n * the current selection drags the whole selection; dragging any other row\n * drags just that row. Locked rows can neither be dragged nor crossed by a\n * drop. A drop that would leave a contiguous block where it already is does\n * not call `onReorder`.\n *\n * A press opens an `openPointerSession` on the *container*, which owns the\n * rest of the gesture: a drag that leaves the list still tracks, a release\n * anywhere still drops, and a release the window never delivered still ends\n * the drag. The container is the origin rather than the row because rows come\n * and go as the list re-renders, and a drag must outlive the row it grabbed.\n */\nexport function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers {\n const optsRef = useRef(opts);\n optsRef.current = opts;\n const containerRef = useRef<HTMLElement | null>(null);\n const sessionRef = useRef<PointerSession | null>(null);\n const [state, setState] = useState<ReorderDragState>({ draggedIds: null, targetIndex: null });\n\n useEffect(() => () => { sessionRef.current?.cancel(); }, []);\n\n const computeTargetIndex = useCallback((clientY: number, sourceIndex: number): number => {\n const [lo, hi] = unlockedSegment(optsRef.current.items, sourceIndex);\n const c = containerRef.current;\n if (!c) return lo;\n const rows = Array.from(c.children) as HTMLElement[];\n let raw = rows.length;\n for (let i = 0; i < rows.length; i++) {\n const row = rows[i];\n if (!row) continue;\n const r = row.getBoundingClientRect();\n if (clientY < r.bottom) { raw = i; break; }\n }\n return Math.max(lo, Math.min(raw, hi));\n }, []);\n\n const refCb = useCallback<RefCallback<HTMLElement>>((el) => {\n containerRef.current = el;\n }, []);\n\n const reset = useCallback(() => {\n sessionRef.current = null;\n setState({ draggedIds: null, targetIndex: null });\n }, []);\n\n const onPointerDownRow = useCallback((id: string, index: number, e: ReactPointerEvent) => {\n const container = containerRef.current;\n if (!container || sessionRef.current) return;\n\n // A locked row still opens a session: it cannot be dragged, but the press\n // has to reach `onPress` for the row to be selectable at all.\n const draggable = !optsRef.current.items[index]?.locked;\n const startX = e.clientX;\n const startY = e.clientY;\n const mods: PressModifiers = {\n shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey, altKey: e.altKey,\n };\n let active: { draggedIds: string[]; targetIndex: number } | null = null;\n\n sessionRef.current = openPointerSession(container, e, {\n onMove: (ev) => {\n if (active) {\n const targetIndex = computeTargetIndex(ev.clientY, index);\n if (targetIndex === active.targetIndex) return;\n active.targetIndex = targetIndex;\n setState({ draggedIds: active.draggedIds, targetIndex });\n return;\n }\n if (!draggable) return;\n if (Math.hypot(ev.clientX - startX, ev.clientY - startY) < (optsRef.current.threshold ?? 4)) return;\n const selected = optsRef.current.selectedIds;\n const [lo, hi] = unlockedSegment(optsRef.current.items, index);\n const draggedIds = (selected.includes(id) ? [...selected] : [id]).filter((x) => {\n const i = optsRef.current.items.findIndex((it) => it.id === x);\n return i >= lo && i < hi;\n });\n const targetIndex = computeTargetIndex(ev.clientY, index);\n active = { draggedIds, targetIndex };\n setState({ draggedIds, targetIndex });\n },\n onEnd: (ev) => {\n if (active) {\n const targetIndex = computeTargetIndex(ev.clientY, index);\n if (!isNoopDrop(optsRef.current.items, active.draggedIds, targetIndex)) {\n optsRef.current.onReorder(active.draggedIds, targetIndex);\n }\n } else {\n optsRef.current.onPress?.(id, mods);\n }\n reset();\n },\n // Every cancel reason — the browser's, a lost capture, an unmount —\n // says the gesture was interrupted rather than aimed, so the rows stay\n // where they were.\n onCancel: reset,\n });\n }, [computeTargetIndex, reset]);\n\n return {\n rowProps: (id, index) => ({\n onPointerDown: (e) => onPointerDownRow(id, index, e),\n }),\n containerProps: {\n ref: refCb,\n },\n state,\n };\n}\n"],"mappings":"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"}