@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/Properties-Bbneh1ws.js

@@ -0,0 +1,281 @@
+import { t as e } from "./dlog-CMYiRF3Q.js";
+import { t } from "./stance-CarrcbbP.js";
+import { t as n } from "./Button-Dyp31jMt.js";
+import { r } from "./Disclosure-D79jhmh2.js";
+import { n as i } from "./CurveEditor-f1R4kSbD.js";
+import { t as a } from "./Dialog-GIvjoDQj.js";
+import { c as o, i as s, l as c, o as l } from "./PropertyField-CDb19d3F.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 }) {
+	return /* @__PURE__ */ d("div", {
+		className: o(c.subpanel, {
+			density: i,
+			align: a
+		}, r),
+		...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-Bbneh1ws.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Properties-Bbneh1ws.js","names":[],"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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"}