@weasel-js/ui 1.5.2 → 1.6.1

package/dist/chunks/Properties-D_KzDN9K.js

@@ -0,0 +1,282 @@
+import { t as e } from "./dlog-F0I8KsIW.js";
+import { t } from "./stance-BFQpS_fL.js";
+import { t as n } from "./Button-BIdXHQOx.js";
+import { r } from "./Disclosure-0G0uh2fa.js";
+import { n as i } from "./CurveEditor-BDJXjEvK.js";
+import { t as a } from "./Dialog-BWyNMgpf.js";
+import { c as o, i as s, l as c, o as l } from "./PropertyField-DGCecAnV.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { useCallback as f, useId as p, useMemo as m, useState as h } from "react";
+var g = {
+	field: "_field_18v33_1",
+	plot: "_plot_18v33_12",
+	marks: "_marks_18v33_17",
+	actions: "_actions_18v33_23",
+	action: "_action_18v33_23"
+};
+//#endregion
+//#region src/components/Properties/CurveField.tsx
+function _({ values: t, min: n, max: r, step: a, width: o, height: s = 110, defaults: c, onChange: l, marks: p }) {
+	let h = m(() => {
+		let e = [];
+		for (let n = 0; n + 1 < t.length; n += 2) e.push({
+			x: t[n],
+			y: t[n + 1]
+		});
+		return e;
+	}, [t]), _ = f((t) => {
+		let i = Array(t.length * 2);
+		for (let e = 0; e < t.length; e++) {
+			let o = Math.round(t[e].y / a) * a, s = Math.max(n, Math.min(r, o));
+			i[e * 2] = t[e].x, i[e * 2 + 1] = s;
+		}
+		e("curve-field", "handleChange", {
+			nLen: t.length,
+			flatLen: i.length,
+			sample: i.slice(0, 4)
+		}), l(i);
+	}, [
+		l,
+		n,
+		r,
+		a
+	]), v = f(() => {
+		let e = [];
+		for (let n = 0; n + 1 < t.length; n += 2) e.push({
+			x: 1 - t[n],
+			y: t[n + 1]
+		});
+		e.sort((e, t) => e.x - t.x);
+		let n = [];
+		for (let t of e) n.push(t.x, t.y);
+		l(n);
+	}, [t, l]), y = f(() => {
+		let e = (n + r) / 2, i = Array(t.length);
+		for (let n = 0; n + 1 < t.length; n += 2) i[n] = t[n], i[n + 1] = 2 * e - t[n + 1];
+		l(i);
+	}, [
+		t,
+		n,
+		r,
+		l
+	]);
+	return /* @__PURE__ */ d("div", {
+		className: g.field,
+		children: [/* @__PURE__ */ d("div", {
+			className: g.plot,
+			children: [/* @__PURE__ */ u(i, {
+				value: h,
+				onInput: _,
+				domain: "1d",
+				constrain: "function",
+				xRange: [0, 1],
+				yRange: [n, r],
+				width: o,
+				height: s,
+				endpoints: "pinned-x",
+				addPointMode: "click-curve",
+				minPoints: 2,
+				grid: {},
+				history: !1
+			}), p && p.length > 0 && /* @__PURE__ */ u("svg", {
+				className: g.marks,
+				width: o,
+				height: s,
+				viewBox: `0 0 ${o} ${s}`,
+				"aria-hidden": "true",
+				children: p.map((e) => {
+					let t = e.color ?? "#ffcc00";
+					if (e.kind === "band") {
+						let n = Math.max(0, Math.min(1, e.x[0])) * o, r = Math.max(0, Math.min(1, e.x[1])) * o, i = Math.min(n, r), a = Math.abs(r - n);
+						return /* @__PURE__ */ d("g", { children: [
+							/* @__PURE__ */ u("rect", {
+								x: i,
+								y: 0,
+								width: a,
+								height: s,
+								fill: t,
+								fillOpacity: .4
+							}),
+							/* @__PURE__ */ u("line", {
+								x1: i,
+								y1: 0,
+								x2: i,
+								y2: s,
+								stroke: t,
+								strokeOpacity: .85,
+								strokeWidth: 1
+							}),
+							/* @__PURE__ */ u("line", {
+								x1: i + a,
+								y1: 0,
+								x2: i + a,
+								y2: s,
+								stroke: t,
+								strokeOpacity: .85,
+								strokeWidth: 1
+							})
+						] }, `band-${e.x[0]}-${e.x[1]}-${t}`);
+					}
+					let n = Math.max(0, Math.min(1, e.x)) * o;
+					return /* @__PURE__ */ u("line", {
+						x1: n,
+						y1: 0,
+						x2: n,
+						y2: s,
+						stroke: t,
+						strokeWidth: 1
+					}, `mark-${e.x}-${t}`);
+				})
+			})]
+		}), /* @__PURE__ */ d("div", {
+			className: g.actions,
+			children: [
+				/* @__PURE__ */ u("button", {
+					type: "button",
+					className: g.action,
+					onClick: v,
+					children: "Flip horizontally"
+				}),
+				/* @__PURE__ */ u("button", {
+					type: "button",
+					className: g.action,
+					onClick: y,
+					children: "Flip vertically"
+				}),
+				c && /* @__PURE__ */ u("button", {
+					type: "button",
+					className: g.action,
+					onClick: () => l([...c]),
+					children: "Reset"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/Properties/DialogRow.tsx
+function v({ label: e, summary: t, children: r, title: i, footer: o, layout: s, description: f, readout: p, span: m, density: g, align: _, auto: v, onAutoChange: b }) {
+	let [x, S] = h(!1), C = () => S(!1), w = typeof e == "string" ? e : void 0;
+	return /* @__PURE__ */ d(l, {
+		label: e,
+		readout: p,
+		layout: s,
+		description: f,
+		span: m,
+		density: g,
+		align: _,
+		auto: v,
+		onAutoChange: b,
+		group: !0,
+		children: [/* @__PURE__ */ d("button", {
+			type: "button",
+			className: c.dialogTrigger,
+			"aria-haspopup": "dialog",
+			"aria-label": w === void 0 ? void 0 : `Edit ${w}`,
+			onClick: () => S(!0),
+			children: [/* @__PURE__ */ u("span", {
+				className: c.dialogSummary,
+				children: t
+			}), /* @__PURE__ */ u("span", {
+				className: c.dialogGlyph,
+				"aria-hidden": "true",
+				children: "…"
+			})]
+		}), /* @__PURE__ */ u(a, {
+			isOpen: x,
+			onOpenChange: S,
+			title: i ?? e,
+			footer: o === void 0 ? /* @__PURE__ */ u(n, {
+				variant: "primary",
+				onClick: C,
+				children: "Done"
+			}) : o ?? void 0,
+			children: typeof r == "function" ? /* @__PURE__ */ u(y, {
+				render: r,
+				close: C
+			}) : r
+		})]
+	});
+}
+function y({ render: e, close: t }) {
+	return e(t);
+}
+//#endregion
+//#region src/components/Properties/PropertyGroup.tsx
+function b({ title: e, leading: n, actions: i, description: a, hidden: l, collapsible: f, defaultCollapsed: m, collapsed: g, onCollapsedChange: _, children: v, className: y, span: b, pack: x = "auto-color", density: S, align: C, stance: w, tone: T }) {
+	let E = p(), [D, O] = h(m ?? !1), k = t({
+		stance: w,
+		tone: T
+	});
+	if (l) return null;
+	let A = f ?? (m !== void 0 || g !== void 0 || _ !== void 0), j = A && (g ?? D), M = () => {
+		g === void 0 && O(!j), _?.(!j);
+	}, N = `${c.group}${x === "pairs" ? ` ${c.groupPairs}` : x === "one-up" ? ` ${c.groupOneUp}` : ""}`, P = o(b ? `${N} ${c.span}` : N, {
+		density: S,
+		align: C
+	}, y), F = /* @__PURE__ */ d("h3", {
+		className: c.groupTitle,
+		children: [
+			/* @__PURE__ */ u("hr", {}),
+			/* @__PURE__ */ u("span", { children: e }),
+			/* @__PURE__ */ u("hr", {})
+		]
+	}), I = n === void 0 && i === void 0 ? F : /* @__PURE__ */ d("div", {
+		className: c.groupHeadRow,
+		children: [
+			n === void 0 ? null : /* @__PURE__ */ u("span", {
+				className: c.groupLeading,
+				children: n
+			}),
+			F,
+			i === void 0 ? null : /* @__PURE__ */ u("span", {
+				className: c.groupActions,
+				children: i
+			})
+		]
+	});
+	return /* @__PURE__ */ d("div", {
+		className: P,
+		...k,
+		children: [
+			A ? /* @__PURE__ */ u(r, {
+				className: c.groupHead,
+				open: !j,
+				onToggle: M,
+				label: typeof e == "string" ? e : "this section",
+				controls: E,
+				children: I
+			}) : I,
+			a !== void 0 && a !== "" && /* @__PURE__ */ u(s, { children: a }),
+			/* @__PURE__ */ u("div", {
+				id: E,
+				className: c.groupBody,
+				hidden: j,
+				children: v
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Properties/Subpanel.tsx
+function x({ title: e, children: n, className: r, density: i, align: a, stance: s, tone: l }) {
+	let f = o(c.subpanel, {
+		density: i,
+		align: a
+	}, r);
+	return /* @__PURE__ */ d("div", {
+		className: f,
+		...t({
+			stance: s,
+			tone: l
+		}),
+		children: [/* @__PURE__ */ d("h4", {
+			className: c.subpanelTitle,
+			children: [/* @__PURE__ */ u("span", { children: e }), /* @__PURE__ */ u("hr", {})]
+		}), n]
+	});
+}
+//#endregion
+export { _ as i, b as n, v as r, x as t };
+
+//# sourceMappingURL=Properties-D_KzDN9K.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Properties-D_KzDN9K.js","names":["s","s","s","s","dlog","Button","CurveEditor","Dialog","propertyMetricClass","PropertyNote","Properties_module_default","PropertyRow","CurveField_module_default","CurveField","points","useMemo","out","i","values","handleChange","useCallback","flat","next","ySnap","step","y","min","max","onChange","handleFlip","flipped","a","b","p","handleFlipVertical","mid","marks","width","height","color","m","x0","x1","left","w","x","defaults","DialogRow","open","setOpen","useState","close","name","label","summary","title","footer","children","DialogBody","render","PropertyGroup","bodyId","useId","own","setOwn","defaultCollapsed","stanced","useStance","hidden","folds","collapsible","collapsed","onCollapsedChange","folded","toggle","base","pack","cls","span","className","titled","heading","leading","actions","DisclosureRow","description","Subpanel"],"sources":["../../src/components/Properties/CurveField.module.css","../../src/components/Properties/CurveField.tsx","../../src/components/Properties/DialogRow.tsx","../../src/components/Properties/PropertyGroup.tsx","../../src/components/Properties/Subpanel.tsx"],"sourcesContent":[".field {\n  display: grid;\n  gap: var(--wzl-space-3);\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: var(--wzl-space-3);\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: var(--wzl-space-2) var(--wzl-space-5);\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","import { type ReactNode, useState } from 'react';\nimport { Button } from '../Button';\nimport { Dialog } from '../Dialog';\nimport { type PropertyMetricProps, type PropertyRowLayout, PropertyRow } from './PropertyPanel';\nimport s from './Properties.module.css';\n\n/** Props for `<DialogRow>`. */\nexport interface DialogRowProps extends PropertyMetricProps {\n  label: ReactNode;\n  /** What the row shows of the value, on the button that opens the dialog. One\n   *  line; a longer one is cut off with an ellipsis. */\n  summary: ReactNode;\n  /** The dialog's body. A function runs only while the dialog is open, as a\n   *  component — it may use hooks — and is handed `close`. */\n  children: ReactNode | ((close: () => void) => ReactNode);\n  /** The dialog's heading. Defaults to `label`. */\n  title?: ReactNode;\n  /** Dialog footer. Defaults to a Done button; `null` draws none. */\n  footer?: ReactNode | null;\n  layout?: PropertyRowLayout;\n  description?: string;\n  /** Right-aligned readout shown next to the label — see `<PropertyRow readout>`. */\n  readout?: ReactNode;\n  /** Take the full width of the enclosing grid — see `<PropertyRow span>`. */\n  span?: boolean;\n  /** The row is auto — see `<PropertyRow auto>`. */\n  auto?: boolean;\n  /** Toggles `auto` from the row's label — see `<PropertyRow onAutoChange>`. */\n  onAutoChange?: (next: boolean) => void;\n}\n\n/**\n * A row for a value too big to edit in place: it shows a one-line summary on a\n * button, and the button opens a modal holding whatever editor the row is\n * given. The body edits live — the dialog is room, not a transaction.\n */\nexport function DialogRow({\n  label,\n  summary,\n  children,\n  title,\n  footer,\n  layout,\n  description,\n  readout,\n  span,\n  density,\n  align,\n  auto,\n  onAutoChange,\n}: DialogRowProps) {\n  const [open, setOpen] = useState(false);\n  const close = (): void => setOpen(false);\n  const name = typeof label === 'string' ? label : undefined;\n  return (\n    <PropertyRow\n      label={label}\n      readout={readout}\n      layout={layout}\n      description={description}\n      span={span}\n      density={density}\n      align={align}\n      auto={auto}\n      onAutoChange={onAutoChange}\n      // A `<label>` hands a click on its text to its button, which would open\n      // the dialog from the label — and the label is the auto toggle.\n      group\n    >\n      <button\n        type=\"button\"\n        className={s.dialogTrigger}\n        aria-haspopup=\"dialog\"\n        aria-label={name === undefined ? undefined : `Edit ${name}`}\n        onClick={() => setOpen(true)}\n      >\n        <span className={s.dialogSummary}>{summary}</span>\n        <span className={s.dialogGlyph} aria-hidden=\"true\">\n          …\n        </span>\n      </button>\n      <Dialog\n        isOpen={open}\n        onOpenChange={setOpen}\n        title={title ?? label}\n        footer={\n          footer === undefined ? (\n            <Button variant=\"primary\" onClick={close}>\n              Done\n            </Button>\n          ) : (\n            (footer ?? undefined)\n          )\n        }\n      >\n        {typeof children === 'function' ? <DialogBody render={children} close={close} /> : children}\n      </Dialog>\n    </PropertyRow>\n  );\n}\n\n/** Calls a function body as a component, so it runs only while the dialog is\n *  mounted and may use hooks of its own. */\nfunction DialogBody({\n  render,\n  close,\n}: {\n  render: (close: () => void) => ReactNode;\n  close: () => void;\n}) {\n  return render(close);\n}\n","import { type ReactNode, useId, useState } from 'react';\nimport { DisclosureRow } from '../Disclosure';\nimport { type StanceProps, useStance } from '../stance';\nimport s from './Properties.module.css';\nimport {\n  type PropertyListPack,\n  type PropertyMetricProps,\n  PropertyNote,\n  propertyMetricClass,\n} from './PropertyPanel';\n\n/** Props for `<PropertyGroup>`. */\nexport interface PropertyGroupProps extends PropertyMetricProps, StanceProps {\n  /** Title rendered between two rules at the top of the group. */\n  title: ReactNode;\n  /** Before the title: a drag handle, an ordinal. Clicks here do not fold the group. */\n  leading?: ReactNode;\n  /** After the title: a summary of the group's value, a remove button. Clicks here do not fold the group. */\n  actions?: ReactNode;\n  /** Help text for the whole group, drawn under the title and above the\n   *  rows. `<PropertyRow description>` covers the per-row case. */\n  description?: 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  /** Take the whole width of a packed grid, like `<PropertyRow span>`: a group\n   *  lays its own rows out, so half a column leaves them overlapping. */\n  span?: boolean;\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. `stance` and `tone` work as on\n * `<PropertyPanel>`; a tone also draws the group's leading edge in it, which\n * is how a list of like groups — effects, tails — tells its members apart.\n * `leading` and `actions` put a handle and controls in the title row, and the\n * groups of a `<PropertyList>` reorder with `useReorderDragList`.\n */\nexport function PropertyGroup({\n  title,\n  leading,\n  actions,\n  description,\n  hidden,\n  collapsible,\n  defaultCollapsed,\n  collapsed,\n  onCollapsedChange,\n  children,\n  className,\n  span,\n  pack = 'auto-color',\n  density,\n  align,\n  stance,\n  tone,\n}: PropertyGroupProps) {\n  const bodyId = useId();\n  const [own, setOwn] = useState(defaultCollapsed ?? false);\n  const stanced = useStance({ stance, tone });\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(span ? `${base} ${s.span}` : base, { density, align }, className);\n  const titled = (\n    <h3 className={s.groupTitle}>\n      <hr />\n      <span>{title}</span>\n      <hr />\n    </h3>\n  );\n  const heading =\n    leading === undefined && actions === undefined ? (\n      titled\n    ) : (\n      <div className={s.groupHeadRow}>\n        {leading === undefined ? null : <span className={s.groupLeading}>{leading}</span>}\n        {titled}\n        {actions === undefined ? null : <span className={s.groupActions}>{actions}</span>}\n      </div>\n    );\n  return (\n    <div className={cls} {...stanced}>\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      {description !== undefined && description !== '' && <PropertyNote>{description}</PropertyNote>}\n      <div id={bodyId} className={s.groupBody} hidden={folded}>\n        {children}\n      </div>\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { type StanceProps, useStance } from '../stance';\nimport s from './Properties.module.css';\nimport { type PropertyMetricProps, propertyMetricClass } from './PropertyPanel';\n\n/** Props for `<Subpanel>`. */\nexport interface SubpanelProps extends PropertyMetricProps, StanceProps {\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. A\n *  stance or tone colors the title and rule. */\nexport function Subpanel({ title, children, className, density, align, stance, tone }: SubpanelProps) {\n  const cls = propertyMetricClass(s.subpanel, { density, align }, className);\n  return (\n    <div className={cls} {...useStance({ stance, tone })}>\n      <h4 className={s.subpanelTitle}>\n        <span>{title}</span>\n        <hr />\n      </h4>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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"}