@weasel-js/ui 1.6.1 → 1.7.1

package/dist/chunks/{Properties-D_KzDN9K.js → Properties-D15c8NP-.js}

@@ -1,18 +1,18 @@
 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 { t as n } from "./Button-XB-T75YL.js";
+import { t as r } from "./Disclosure-Ch2KxYuB.js";
+import { n as i } from "./CurveEditor-jVBEqqdv.js";
+import { t as a } from "./Dialog-DKfsk5VN.js";
+import { a as o, l as s, s as c, u as l } from "./PropertyField-CV_Gw57S.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"
+	field: "_field_d25so_1",
+	plot: "_plot_d25so_12",
+	marks: "_marks_d25so_17",
+	actions: "_actions_d25so_23",
+	action: "_action_d25so_23"
 };
 //#endregion
 //#region src/components/Properties/CurveField.tsx
@@ -157,7 +157,7 @@ function _({ values: t, min: n, max: r, step: a, width: o, height: s = 110, defa
 //#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, {
+	return /* @__PURE__ */ d(c, {
 		label: e,
 		readout: p,
 		layout: s,
@@ -170,15 +170,15 @@ function v({ label: e, summary: t, children: r, title: i, footer: o, layout: s,
 		group: !0,
 		children: [/* @__PURE__ */ d("button", {
 			type: "button",
-			className: c.dialogTrigger,
+			className: l.dialogTrigger,
 			"aria-haspopup": "dialog",
 			"aria-label": w === void 0 ? void 0 : `Edit ${w}`,
 			onClick: () => S(!0),
 			children: [/* @__PURE__ */ u("span", {
-				className: c.dialogSummary,
+				className: l.dialogSummary,
 				children: t
 			}), /* @__PURE__ */ u("span", {
-				className: c.dialogGlyph,
+				className: l.dialogGlyph,
 				"aria-hidden": "true",
 				children: "…"
 			})]
@@ -203,55 +203,61 @@ function y({ render: e, close: 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({
+function b({ title: e, leading: n, actions: i, description: a, hidden: c, 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 = p(), [O, k] = h(m ?? !1), A = 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, {
+	if (c) return null;
+	let j = f ?? (m !== void 0 || g !== void 0 || _ !== void 0), M = j && (g ?? O), N = () => {
+		g === void 0 && k(!M), _?.(!M);
+	}, P = `${l.group}${x === "pairs" ? ` ${l.groupPairs}` : x === "one-up" ? ` ${l.groupOneUp}` : ""}`, F = s(b ? `${P} ${l.span}` : P, {
 		density: S,
 		align: C
-	}, y), F = /* @__PURE__ */ d("h3", {
-		className: c.groupTitle,
+	}, y), I = /* @__PURE__ */ d("h3", {
+		className: l.groupTitle,
+		"aria-labelledby": j ? D : void 0,
 		children: [
 			/* @__PURE__ */ u("hr", {}),
-			/* @__PURE__ */ u("span", { children: e }),
+			/* @__PURE__ */ d("span", {
+				className: l.groupTitleMid,
+				children: [j ? /* @__PURE__ */ u(r, {
+					open: !M,
+					onToggle: N,
+					label: typeof e == "string" ? e : "this section",
+					controls: E,
+					className: l.groupTwisty
+				}) : null, /* @__PURE__ */ u("span", {
+					id: D,
+					children: e
+				})]
+			}),
 			/* @__PURE__ */ u("hr", {})
 		]
-	}), I = n === void 0 && i === void 0 ? F : /* @__PURE__ */ d("div", {
-		className: c.groupHeadRow,
+	}), L = n === void 0 && i === void 0 ? I : /* @__PURE__ */ d("div", {
+		className: l.groupHeadRow,
 		children: [
 			n === void 0 ? null : /* @__PURE__ */ u("span", {
-				className: c.groupLeading,
+				className: l.groupLeading,
 				children: n
 			}),
-			F,
+			I,
 			i === void 0 ? null : /* @__PURE__ */ u("span", {
-				className: c.groupActions,
+				className: l.groupActions,
 				children: i
 			})
 		]
 	});
 	return /* @__PURE__ */ d("div", {
-		className: P,
-		...k,
+		className: F,
+		...A,
 		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 }),
+			L,
+			a !== void 0 && a !== "" && /* @__PURE__ */ u(o, { children: a }),
 			/* @__PURE__ */ u("div", {
 				id: E,
-				className: c.groupBody,
-				hidden: j,
+				className: l.groupBody,
+				hidden: M,
 				children: v
 			})
 		]
@@ -259,19 +265,19 @@ function b({ title: e, leading: n, actions: i, description: a, hidden: l, collap
 }
 //#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, {
+function x({ title: e, children: n, className: r, density: i, align: a, stance: o, tone: c }) {
+	let f = s(l.subpanel, {
 		density: i,
 		align: a
 	}, r);
 	return /* @__PURE__ */ d("div", {
 		className: f,
 		...t({
-			stance: s,
-			tone: l
+			stance: o,
+			tone: c
 		}),
 		children: [/* @__PURE__ */ d("h4", {
-			className: c.subpanelTitle,
+			className: l.subpanelTitle,
 			children: [/* @__PURE__ */ u("span", { children: e }), /* @__PURE__ */ u("hr", {})]
 		}), n]
 	});
@@ -279,4 +285,4 @@ function x({ title: e, children: n, className: r, density: i, align: a, stance:
 //#endregion
 export { _ as i, b as n, v as r, x as t };
 
-//# sourceMappingURL=Properties-D_KzDN9K.js.map
+//# sourceMappingURL=Properties-D15c8NP-.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Properties-D15c8NP-.js","names":["s","s","s","s","dlog","Button","Disclosure","CurveEditor","Dialog","PropertyNote","propertyMetricClass","PropertyRow","Properties_module_default","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","titleId","own","setOwn","defaultCollapsed","stanced","useStance","hidden","folds","collapsible","collapsed","onCollapsedChange","folded","toggle","base","pack","cls","span","className","titled","heading","leading","actions","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: inherit;\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 { Disclosure } 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 titleId = 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  // The twisty sits in the title, between the rules, so the two read as one\n  // unit, without moving the centered text. The heading is named by the title\n  // alone, not the twisty's label too.\n  const titled = (\n    <h3 className={s.groupTitle} aria-labelledby={folds ? titleId : undefined}>\n      <hr />\n      <span className={s.groupTitleMid}>\n        {folds ? (\n          <Disclosure\n            open={!folded}\n            onToggle={toggle}\n            label={typeof title === 'string' ? title : 'this section'}\n            controls={bodyId}\n            className={s.groupTwisty}\n          />\n        ) : null}\n        <span id={titleId}>{title}</span>\n      </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      {heading}\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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"}