@weasel-js/ui 1.6.1 → 1.7.0

package/dist/chunks/Select-ClmKtyWg.js

@@ -0,0 +1,229 @@
+import { r as e } from "./portalHost-yTOVuCej.js";
+import { n as t, r as n } from "./segmentTooltip-CStYHKzd.js";
+import { n as r } from "./Field--onYxXTF.js";
+import { pastDragThreshold as i } from "@weasel-js/core";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Children as s, isValidElement as c, useEffect as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import { Button as p, FieldError as m, Header as h, Label as g, ListBox as _, ListBoxItem as v, ListBoxSection as y, Popover as b, Select as x, SelectValue as S, Text as C } from "react-aria-components";
+var w = {
+	field: "_field_1dx3a_1",
+	row: "_row_1dx3a_11",
+	label: "_label_1dx3a_18",
+	fit: "_fit_1dx3a_19",
+	trigger: "_trigger_1dx3a_19",
+	below: "_below_1dx3a_21",
+	value: "_value_1dx3a_63",
+	bare: "_bare_1dx3a_95",
+	chevron: "_chevron_1dx3a_112",
+	underlined: "_underlined_1dx3a_124",
+	plain: "_plain_1dx3a_135",
+	popover: "_popover_1dx3a_148",
+	listbox: "_listbox_1dx3a_157",
+	option: "_option_1dx3a_170",
+	section: "_section_1dx3a_181",
+	sectionHeader: "_sectionHeader_1dx3a_188",
+	optionLabel: "_optionLabel_1dx3a_195",
+	check: "_check_1dx3a_222",
+	sizer: "_sizer_1dx3a_255"
+};
+//#endregion
+//#region src/components/Select/Select.tsx
+function T(e) {
+	return "options" in e;
+}
+function E(i) {
+	let { label: s, orientation: c = "stacked", description: l, errorMessage: u, placeholder: h, options: v, children: y, selectedKey: E, defaultSelectedKey: D, onSelectionChange: k, width: A = "fill", variant: M = "field", indicator: I = M === "bare" ? "underline" : "chevron", popup: L = "over", triggerId: R, className: z, portalContainer: B, shortcut: V, tooltip: H, ...U } = i, { anchor: W, portalProps: G } = e(B), K = d(null), q = d(null), [J, Y] = f(O);
+	return /* @__PURE__ */ o(x, {
+		...U,
+		selectedKey: E,
+		defaultSelectedKey: D,
+		onSelectionChange: k ? (e) => k(e) : void 0,
+		className: [
+			w.field,
+			A === "fit" && w.fit,
+			M === "bare" && w.bare,
+			I === "underline" && w.underlined,
+			I === "none" && w.plain,
+			r.root,
+			c === "row" && r.row,
+			c === "row" && w.row,
+			z
+		].filter(Boolean).join(" "),
+		children: [
+			W,
+			s !== void 0 && /* @__PURE__ */ a(g, {
+				className: `${r.label} ${w.label}`,
+				children: s
+			}),
+			/* @__PURE__ */ a(t, {
+				content: n({
+					tooltip: H,
+					shortcut: V,
+					ariaLabel: U["aria-label"],
+					label: s
+				}),
+				disabled: U.isDisabled,
+				children: /* @__PURE__ */ o(p, {
+					id: R,
+					ref: K,
+					className: w.trigger,
+					onPointerDown: (e) => {
+						q.current = {
+							x: e.clientX,
+							y: e.clientY,
+							at: performance.now()
+						};
+					},
+					children: [
+						/* @__PURE__ */ a(S, {
+							className: w.value,
+							children: ({ defaultChildren: e, isPlaceholder: t }) => t ? h ?? e : e
+						}),
+						A === "fit" && /* @__PURE__ */ o("span", {
+							className: w.sizer,
+							"aria-hidden": "true",
+							children: [h !== void 0 && /* @__PURE__ */ a("span", { children: h }), P(v, y).map((e, t) => /* @__PURE__ */ a("span", { children: e }, t))]
+						}),
+						I === "chevron" && /* @__PURE__ */ a("svg", {
+							className: w.chevron,
+							viewBox: "0 0 10 10",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ a("path", {
+								d: "M2 4 L5 7 L8 4",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.5",
+								strokeLinecap: "round",
+								strokeLinejoin: "round"
+							})
+						})
+					]
+				})
+			}),
+			l !== void 0 && /* @__PURE__ */ a(C, {
+				slot: "description",
+				className: `${r.hint} ${w.below}`,
+				children: l
+			}),
+			/* @__PURE__ */ a(m, {
+				className: `${r.error} ${w.below}`,
+				children: u
+			}),
+			/* @__PURE__ */ o(b, {
+				className: w.popover,
+				"data-weasel-overlay": "",
+				placement: "bottom start",
+				offset: L === "over" ? J.offset : void 0,
+				crossOffset: L === "over" ? J.crossOffset : void 0,
+				shouldFlip: L !== "over",
+				...G,
+				children: [L === "over" && /* @__PURE__ */ a(j, {
+					triggerRef: K,
+					pressRef: q,
+					applied: J,
+					onMeasure: Y
+				}), /* @__PURE__ */ a(_, {
+					className: w.listbox,
+					children: v === void 0 ? y : v.map((e, t) => T(e) ? /* @__PURE__ */ a(F, {
+						title: e.title,
+						children: e.options.map(N)
+					}, `section-${t}`) : N(e))
+				})]
+			})
+		]
+	});
+}
+var D = 500, O = {
+	offset: 0,
+	crossOffset: 0
+}, k = 12, A = {
+	offset: 8,
+	crossOffset: 0
+};
+function j({ triggerRef: e, pressRef: t, applied: n, onMeasure: r }) {
+	let o = d(null), s = d(0);
+	return u(() => {
+		let t = e.current, i = o.current?.closest("[data-weasel-overlay]");
+		if (!t || !i || s.current > 3) return;
+		let a = t.querySelector(`.${w.value}`), c = i.querySelector(`[data-selected] .${w.optionLabel}`);
+		if (!a || !c) {
+			(n.offset !== A.offset || n.crossOffset !== A.crossOffset) && r(A);
+			return;
+		}
+		let l = getComputedStyle(t).getPropertyValue("--wzl-select-align").trim(), u = l === "right" || l === "end";
+		i.dataset.align = u ? "end" : "start";
+		let d = i.getBoundingClientRect(), f = t.getBoundingClientRect(), p = c.getBoundingClientRect(), m = a.getBoundingClientRect(), h = m.top + m.height / 2 - f.top - (p.top + p.height / 2 - d.top) - f.height, g = t.ownerDocument.documentElement.clientHeight - k - d.height - f.bottom, _ = {
+			offset: Math.max(k - f.bottom, Math.min(h, g)),
+			crossOffset: u ? m.right - f.left - (p.right - d.left) : m.left - f.left - (p.left - d.left)
+		};
+		Math.abs(_.offset - n.offset) < .5 && Math.abs(_.crossOffset - n.crossOffset) < .5 || (s.current += 1, r(_));
+	}), l(() => {
+		let n = e.current?.ownerDocument;
+		if (!n) return;
+		let r = (e) => {
+			n.removeEventListener("pointerup", r, !0);
+			let a = t.current;
+			!a || performance.now() - a.at > D || i({
+				clientX: a.x,
+				clientY: a.y
+			}, e) || (e.preventDefault(), e.stopPropagation());
+		};
+		return n.addEventListener("pointerup", r, !0), () => n.removeEventListener("pointerup", r, !0);
+	}, [e, t]), /* @__PURE__ */ a("span", {
+		ref: o,
+		hidden: !0
+	});
+}
+function M() {
+	return /* @__PURE__ */ a("svg", {
+		className: w.check,
+		viewBox: "0 0 10 10",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ a("polyline", {
+			points: "1.5,5 4,7.5 8.5,3",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function N(e) {
+	return /* @__PURE__ */ a(L, {
+		id: e.value,
+		isDisabled: e.isDisabled,
+		textValue: e.textValue,
+		children: e.label
+	}, String(e.value));
+}
+function P(e, t) {
+	return e === void 0 ? s.toArray(t).flatMap((e) => c(e) ? e.type === F ? P(void 0, e.props.children) : [e.props.children] : [e]) : e.flatMap((e) => "options" in e ? e.options.map((e) => e.label) : [e.label]);
+}
+function F({ title: e, children: t, className: n }) {
+	return /* @__PURE__ */ o(y, {
+		className: [w.section, n].filter(Boolean).join(" "),
+		children: [e !== void 0 && /* @__PURE__ */ a(h, {
+			className: w.sectionHeader,
+			children: e
+		}), t]
+	});
+}
+function I(e, t) {
+	return t === void 0 ? typeof e == "string" || typeof e == "number" ? String(e) : void 0 : t;
+}
+function L({ children: e, className: t, textValue: n, ...r }) {
+	return /* @__PURE__ */ o(v, {
+		...r,
+		textValue: I(e, n),
+		className: [w.option, t].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ a(M, {}), /* @__PURE__ */ a("span", {
+			className: w.optionLabel,
+			children: e
+		})]
+	});
+}
+//#endregion
+export { L as n, F as r, E as t };
+
+//# sourceMappingURL=Select-ClmKtyWg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select-ClmKtyWg.js","names":["Select","RACSelect","s","RACButton","RACPopover","RACListBox","RACListBoxSection","RACListBoxItem","useOverlayPortal","TriggerTooltip","segmentTooltipContent","fieldClasses","Select_module_default","isGroup","entry","Select$1","variant","rest","props","portalContainer","triggerRef","useRef","pressRef","nudge","setNudge","useState","NO_NUDGE","Select","onSelectionChange","k","width","indicator","orientation","className","anchor","label","Label","Button","triggerId","SelectValue","isPlaceholder","placeholder","defaultChildren","optionLabels","options","children","l","i","description","Text","FieldError","errorMessage","Popover","popup","portalProps","AlignOverTrigger","ListBox","SelectSection","renderOption","CLICK_MS","EDGE","BELOW","markerRef","passes","useLayoutEffect","trigger","popover","value","applied","onMeasure","align","toEnd","box","seat","row","shown","over","lowest","next","useEffect","doc","onUp","press","pastDragThreshold","CheckMark","SelectItem","o","Children","isValidElement","c","g","ListBoxSection","title","Header","textValueOf","explicit","ListBoxItem","textValue"],"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: var(--wzl-space-2);\n}\n\n/* `orientation='row'`: the label keeps its own width and the trigger takes the\n   rest; description and error wrap onto a line of their own. */\n.field.row {\n  flex-direction: row;\n  align-items: center;\n  flex-wrap: wrap;\n  column-gap: var(--wzl-space-4);\n  row-gap: var(--wzl-space-2);\n}\n.field.row .label { flex: 0 0 auto; }\n.field.row:not(.fit) .trigger { flex: 1 1 0; min-width: 0; }\n.field.row.fit .trigger { width: auto; }\n.field.row .below { flex-basis: 100%; }\n\n.trigger {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  gap: var(--wzl-space-3);\n  /* Hooks, each defaulting to what the trigger already drew: the visible box is\n     this button, not the `.field` a consumer's `className` lands on, so a\n     surface that has to restyle it sets these rather than reaching in here.\n     Together they draw the bare look too, for a surface that wants it from\n     context rather than from `variant`: a transparent fill, no padding, the\n     chevron hidden, the value underlined and an outline for focus. */\n  padding: var(--wzl-select-pad, 0 var(--wzl-space-3) 0 var(--wzl-space-5));\n  background: var(--wzl-select-bg, var(--wzl-input-surface, var(--wzl-surface-sunken)));\n  height: var(--wzl-select-h, var(--wzl-control-h));\n  border: var(--wzl-select-border, 1px solid var(--wzl-border));\n  border-radius: var(--wzl-radius-sm);\n  color: var(--wzl-select-fg, 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-select-focus-border, var(--wzl-focus-ring));\n  box-shadow: var(--wzl-select-focus-shadow, 0 0 0 1px var(--wzl-focus-ring));\n  outline: var(--wzl-select-focus-outline, none);\n  outline-offset: 2px;\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: var(--wzl-select-align, left);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  /* The ellipsis needs `overflow: hidden`, which makes the line box a clip —\n     the trigger's `line-height: 1` would cut this text's ascenders and\n     descenders off. `normal` is the font's own leading, so it never can. */\n  line-height: normal;\n  /* The underline hook: none unless a surface or `indicator` turns it on. */\n  text-decoration-line: var(--wzl-select-underline, none);\n  text-decoration-style: dotted;\n  text-decoration-thickness: 1px;\n  text-decoration-color: var(--wzl-fg-subtle);\n  text-underline-offset: 0.25em;\n  transition: text-decoration-color var(--wzl-motion-fast);\n}\n\n.trigger:hover .value,\n.trigger[data-focus-visible] .value {\n  text-decoration-style: solid;\n  text-decoration-color: var(--wzl-fg-muted);\n}\n\n.field[data-open] .value {\n  text-decoration-style: solid;\n  text-decoration-color: var(--wzl-accent);\n}\n\n/* `variant='bare'`: no box. The focus ring moves to an outline, since there is no border to recolor. */\n.bare .trigger {\n  padding: 0;\n  background: transparent;\n  border: var(--wzl-select-border, 1px solid transparent);\n}\n\n.bare .trigger[data-focus-visible] {\n  border-color: transparent;\n  box-shadow: none;\n  outline: 1px solid var(--wzl-focus-ring);\n  outline-offset: 2px;\n}\n\n.value[data-placeholder] {\n  color: var(--wzl-fg-subtle);\n}\n\n.chevron {\n  display: var(--wzl-select-chevron, block);\n  width: 10px;\n  height: 10px;\n  color: var(--wzl-fg-muted);\n  flex: 0 0 auto;\n}\n\n/* `indicator='underline'`: the value carries the affordance itself. A text\n   decoration rather than a border, so it hugs the word and adds nothing to the\n   box — the row's height and the value's width are the same either way. The\n   rest of the underline's look sits on `.value`, shared with the hook. */\n.underlined .value {\n  text-decoration-line: underline;\n}\n\n.value[data-placeholder] {\n  text-decoration-color: var(--wzl-fg-subtle);\n}\n\n/* Nothing sits beside the value, so the row's gap and the padding kept for a\n   caret are the value's to spend. */\n.underlined .trigger,\n.plain .trigger {\n  gap: 0;\n}\n\n.bare.underlined .trigger,\n.bare.plain .trigger {\n  padding: 0;\n}\n\n/* A list that hangs below its trigger takes the trigger's width, so the two\n   read as one control. One that opens over it is already tied to the trigger\n   by its selected row — widening it to match would only add blank rule beside\n   the labels. `data-align` is set on exactly the ones that do. */\n.popover:not([data-align]) {\n  min-width: var(--trigger-width);\n}\n\n.popover {\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: var(--wzl-space-2);\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: var(--wzl-space-4);\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  border-radius: var(--wzl-radius-sm);\n  cursor: pointer;\n  color: var(--wzl-fg);\n  outline: none;\n}\n\n:is(.option, .section) + .section,\n.section + .option {\n  margin-top: var(--wzl-space-2);\n  padding-top: var(--wzl-space-2);\n  border-top: 1px solid var(--wzl-line-subtle);\n}\n\n.sectionHeader {\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg-subtle);\n}\n\n.optionLabel {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* A trigger that sets its value against its end edge gets a list that does the\n   same, so the row that opened over the value stays on top of it. */\n.popover[data-align='end'] .option {\n  justify-content: flex-end;\n}\n\n.option[data-focused] {\n  background: var(--wzl-surface-hover);\n}\n\n.option[data-selected] {\n  color: var(--wzl-fg);\n  font-weight: var(--wzl-font-weight-medium);\n}\n\n.option[data-disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.check {\n  width: 10px;\n  height: 10px;\n  flex: 0 0 auto;\n  opacity: 0;\n}\n\n.option[data-selected] .check {\n  opacity: 1;\n}\n\n.value .check {\n  display: none;\n}\n\n/* `width='fit'`: a hidden stack of every option label shares the value's grid\n   cell, so the trigger sizes to its widest option and never resizes on select. */\n.fit {\n  width: auto;\n  max-width: 100%;\n}\n\n.fit .trigger {\n  display: grid;\n  grid-template-columns: auto auto;\n}\n\n.fit.underlined .trigger,\n.fit.plain .trigger {\n  grid-template-columns: auto;\n}\n\n.fit .value,\n.fit .sizer {\n  grid-area: 1 / 1;\n}\n\n.fit .chevron {\n  grid-area: 1 / 2;\n}\n\n.sizer {\n  display: grid;\n  height: 0;\n  overflow: hidden;\n  visibility: hidden;\n  white-space: nowrap;\n}\n\n.sizer > * {\n  grid-area: 1 / 1;\n}\n","import {\n  Children,\n  isValidElement,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ReactNode,\n  type RefObject,\n} 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  ListBoxSection as RACListBoxSection,\n  Header,\n  Text,\n  FieldError,\n  type SelectProps as RACSelectProps,\n  type ListBoxItemProps as RACListBoxItemProps,\n  type ValidationResult,\n} from 'react-aria-components';\nimport { pastDragThreshold } from '@weasel-js/core';\nimport { fieldClasses, type FieldOrientation } from '../Field/Field';\nimport { useOverlayPortal, type OverlayPortalProps } from '../../overlays/portalHost';\nimport s from './Select.module.css';\nimport { TriggerTooltip, segmentTooltipContent, type SegmentTooltipFields } from '../segmentTooltip';\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\n/** A titled group of options in a {@link Select}'s `options` list. */\nexport type SelectOptionGroup<T extends Key = string> = {\n  title: ReactNode;\n  options: ReadonlyArray<SelectOption & { value: T }>;\n};\n\ntype Key = string | number;\n\nfunction isGroup<T extends Key>(\n  entry: (SelectOption & { value: T }) | SelectOptionGroup<T>,\n): entry is SelectOptionGroup<T> {\n  return 'options' in entry;\n}\n\n/** How a {@link Select} trigger signals that it opens a list. */\nexport type SelectIndicator = 'chevron' | 'underline' | 'none';\n\n/** Where a {@link Select}'s list opens relative to its trigger. */\nexport type SelectPopup = 'over' | 'below';\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  /**\n   * `'stacked'` (the default) puts the label above the trigger; `'row'` sets it\n   * beside the trigger at its own width, with any description or error on a\n   * line below. Same vocabulary as {@link Field}'s `orientation`.\n   */\n  orientation?: FieldOrientation;\n  description?: ReactNode;\n  errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode);\n  placeholder?: string;\n  /**\n   * Either pass `options` for a quick render, or `children` for full control.\n   * An entry with `title` and `options` of its own is a titled section.\n   */\n  options?: ReadonlyArray<(SelectOption & { value: T }) | SelectOptionGroup<T>>;\n  children?: ReactNode;\n  selectedKey?: T | null;\n  defaultSelectedKey?: T;\n  onSelectionChange?: (key: T) => void;\n  /**\n   * `'fill'` (the default) takes the width of whatever row the select sits in.\n   * `'fit'` sizes the trigger to its widest option, so it neither swallows a\n   * toolbar's slack nor changes width as the selection moves.\n   */\n  width?: 'fill' | 'fit';\n  /** `'bare'` drops the box, for a select set in a row of other chrome such as a property row. */\n  variant?: 'field' | 'bare';\n  /**\n   * How the trigger says it opens a list. `'chevron'` draws the caret beside\n   * the value; `'underline'` marks the value itself, dotted at rest and solid\n   * while it is pointed at or open; `'none'` says nothing. Unset takes the\n   * variant's own: a boxed select shows the caret, a bare one — set in a row\n   * where 10px of caret is a tenth of the value's width — underlines.\n   */\n  indicator?: SelectIndicator;\n  /**\n   * Where the list opens. `'over'` (the default) puts the selected row on the\n   * trigger, its label in the trigger's own text column, so choosing what is\n   * already chosen moves nothing; `'below'` hangs it under the trigger.\n   */\n  popup?: SelectPopup;\n  /**\n   * Id for the trigger button. React Aria puts a plain `id` on the wrapper,\n   * which is not labelable, so an outer `<label for>` needs this to reach a\n   * control the label can actually own.\n   */\n  triggerId?: string;\n  className?: string;\n} & SegmentTooltipFields & OverlayPortalProps;\n\n/**\n * Form select wrapping React Aria's Select. Pass either `options` for a\n * quick declarative render or `children` of `<SelectItem>` for control over\n * each row; `<SelectSection>` (or an `options` entry with a `title`) groups\n * rows under a heading.\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 *\n * `shortcut` puts a kit tooltip on the trigger reading `Name (⌘K)`, named by\n * `aria-label` or a string `label`, as `Button` does; `tooltip` replaces that\n * text.\n */\nexport function Select<T extends Key = string>(props: SelectProps<T>) {\n  const {\n    label,\n    orientation = 'stacked',\n    description,\n    errorMessage,\n    placeholder,\n    options,\n    children,\n    selectedKey,\n    defaultSelectedKey,\n    onSelectionChange,\n    width = 'fill',\n    variant = 'field',\n    indicator = variant === 'bare' ? 'underline' : 'chevron',\n    popup = 'over',\n    triggerId,\n    className,\n    portalContainer,\n    shortcut,\n    tooltip,\n    ...rest\n  } = props;\n\n  const { anchor, portalProps } = useOverlayPortal(portalContainer);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const pressRef = useRef<Press | null>(null);\n  const [nudge, setNudge] = useState(NO_NUDGE);\n\n  return (\n    <RACSelect\n      {...rest}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={onSelectionChange ? (k) => onSelectionChange(k as T) : undefined}\n      className={[\n        s.field,\n        width === 'fit' && s.fit,\n        variant === 'bare' && s.bare,\n        indicator === 'underline' && s.underlined,\n        indicator === 'none' && s.plain,\n        fieldClasses.root,\n        orientation === 'row' && fieldClasses.row,\n        orientation === 'row' && s.row,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {anchor}\n      {label !== undefined && <Label className={`${fieldClasses.label} ${s.label}`}>{label}</Label>}\n      <TriggerTooltip\n        content={segmentTooltipContent({ tooltip, shortcut, ariaLabel: rest['aria-label'], label })}\n        disabled={rest.isDisabled}\n      >\n        <RACButton\n          id={triggerId}\n          ref={triggerRef}\n          className={s.trigger}\n          onPointerDown={(e) => {\n            pressRef.current = { x: e.clientX, y: e.clientY, at: performance.now() };\n          }}\n        >\n          <SelectValue className={s.value}>\n            {({ defaultChildren, isPlaceholder }) =>\n              isPlaceholder ? (placeholder ?? defaultChildren) : defaultChildren\n            }\n          </SelectValue>\n          {width === 'fit' && (\n            <span className={s.sizer} aria-hidden=\"true\">\n              {placeholder !== undefined && <span>{placeholder}</span>}\n              {optionLabels(options, children).map((l, i) => (\n                <span key={i}>{l}</span>\n              ))}\n            </span>\n          )}\n          {indicator === 'chevron' && (\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          )}\n        </RACButton>\n      </TriggerTooltip>\n      {description !== undefined && (\n        <Text slot=\"description\" className={`${fieldClasses.hint} ${s.below}`}>\n          {description}\n        </Text>\n      )}\n      <FieldError className={`${fieldClasses.error} ${s.below}`}>{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\n        className={s.popover}\n        data-weasel-overlay=\"\"\n        placement=\"bottom start\"\n        offset={popup === 'over' ? nudge.offset : undefined}\n        crossOffset={popup === 'over' ? nudge.crossOffset : undefined}\n        shouldFlip={popup !== 'over'}\n        {...portalProps}\n      >\n        {popup === 'over' && (\n          <AlignOverTrigger\n            triggerRef={triggerRef}\n            pressRef={pressRef}\n            applied={nudge}\n            onMeasure={setNudge}\n          />\n        )}\n        <RACListBox className={s.listbox}>\n          {options !== undefined\n            ? options.map((entry, i) =>\n                isGroup(entry) ? (\n                  <SelectSection key={`section-${i}`} title={entry.title}>\n                    {entry.options.map(renderOption)}\n                  </SelectSection>\n                ) : (\n                  renderOption(entry)\n                ),\n              )\n            : children}\n        </RACListBox>\n      </RACPopover>\n    </RACSelect>\n  );\n}\n\ntype Nudge = { offset: number; crossOffset: number };\n\n/** Where and when the pointer went down on the trigger. */\ntype Press = { x: number; y: number; at: number };\n\n/** How long a press may last and how far it may travel and still be a click. */\nconst CLICK_MS = 500;\n\nconst NO_NUDGE: Nudge = { offset: 0, crossOffset: 0 };\n\n/** The gap kept between a list and the viewport edge — React Aria's own\n *  `containerPadding` default. */\nconst EDGE = 12;\n\n/** React Aria's own resting place for a popover: hanging under its trigger. */\nconst BELOW: Nudge = { offset: 8, crossOffset: 0 };\n\n/**\n * Lands the list so its selected row covers the trigger: same text column,\n * same line. The shift is handed back as the popover's own `offset` and\n * `crossOffset` rather than a transform, so React Aria keeps owning the\n * position and still holds the list inside the viewport.\n *\n * Measuring needs the list rendered, and the correction is applied by setting\n * state from a layout effect — React finishes that pass before the browser\n * paints, so the list is never seen at the uncorrected position.\n */\nfunction AlignOverTrigger({\n  triggerRef,\n  pressRef,\n  applied,\n  onMeasure,\n}: {\n  triggerRef: RefObject<HTMLButtonElement | null>;\n  pressRef: RefObject<Press | null>;\n  applied: Nudge;\n  onMeasure: (next: Nudge) => void;\n}) {\n  // React Aria positions the popover but hands out no ref to it, so the\n  // element is reached from inside: this marker's own parent.\n  const markerRef = useRef<HTMLSpanElement>(null);\n  // A measurement that settles takes two passes — one to place the list, one\n  // to confirm. A cap is what keeps a list whose own placement changes its\n  // measurement from renegotiating forever.\n  const passes = useRef(0);\n  useLayoutEffect(() => {\n    const trigger = triggerRef.current;\n    const popover = markerRef.current?.closest<HTMLElement>('[data-weasel-overlay]');\n    if (!trigger || !popover || passes.current > 3) return;\n    const value = trigger.querySelector(`.${s.value}`);\n    // Nothing chosen yet, so there is no row that belongs over the trigger —\n    // and putting an arbitrary one under the pointer arms it. A select showing\n    // its placeholder hangs its list below, like any other dropdown.\n    const label = popover.querySelector(`[data-selected] .${s.optionLabel}`);\n    if (!value || !label) {\n      if (applied.offset !== BELOW.offset || applied.crossOffset !== BELOW.crossOffset)\n        onMeasure(BELOW);\n      return;\n    }\n\n    // The trigger's own text alignment decides which edge the two labels are\n    // matched on, and the list follows it so the selected row reads as the\n    // trigger with the others unfolded around it.\n    const align = getComputedStyle(trigger).getPropertyValue('--wzl-select-align').trim();\n    const toEnd = align === 'right' || align === 'end';\n    popover.dataset.align = toEnd ? 'end' : 'start';\n\n    // Stated against each element's own box rather than measured as a gap to\n    // close: React Aria repositions after this effect, so what is on screen\n    // now is a frame behind, and a correction read off it would be applied to\n    // a position that has already moved — the shift compounds every pass.\n    // `bottom start` puts the list's top at the trigger's bottom and their\n    // left edges together, so the two insets below are the whole story.\n    const box = popover.getBoundingClientRect();\n    const seat = trigger.getBoundingClientRect();\n    const row = label.getBoundingClientRect();\n    const shown = value.getBoundingClientRect();\n    // React Aria holds the list inside the viewport across the trigger but not\n    // along it, and `offset` moves it along: the selected row sits on the\n    // trigger only as far as the rest of the list still fits on screen.\n    const over = shown.top + shown.height / 2 - seat.top - (row.top + row.height / 2 - box.top) - seat.height;\n    const viewHeight = trigger.ownerDocument.documentElement.clientHeight;\n    const lowest = viewHeight - EDGE - box.height - seat.bottom;\n    const next = {\n      offset: Math.max(EDGE - seat.bottom, Math.min(over, lowest)),\n      crossOffset: toEnd\n        ? shown.right - seat.left - (row.right - box.left)\n        : shown.left - seat.left - (row.left - box.left),\n    };\n    if (Math.abs(next.offset - applied.offset) < 0.5 && Math.abs(next.crossOffset - applied.crossOffset) < 0.5)\n      return;\n    passes.current += 1;\n    onMeasure(next);\n  });\n\n  // The list covers the trigger, so the release that ends the click opening it\n  // lands on a row — and a row selects on release, which shuts the list again\n  // before it has been seen. A click is a press and a release in the same\n  // place: that one is the opening gesture and belongs to the trigger, and the\n  // list keeps every release after it. Press, hold, drag and release still\n  // picks a row, which is the gesture a list over its trigger is for.\n  useEffect(() => {\n    const doc = triggerRef.current?.ownerDocument;\n    if (!doc) return;\n    const onUp = (e: PointerEvent) => {\n      doc.removeEventListener('pointerup', onUp, true);\n      const press = pressRef.current;\n      if (!press || performance.now() - press.at > CLICK_MS) return;\n      if (pastDragThreshold({ clientX: press.x, clientY: press.y }, e)) return;\n      e.preventDefault();\n      e.stopPropagation();\n    };\n    doc.addEventListener('pointerup', onUp, true);\n    return () => doc.removeEventListener('pointerup', onUp, true);\n  }, [triggerRef, pressRef]);\n\n  return <span ref={markerRef} hidden />;\n}\n\n/* `SelectValue` copies the selected row into the trigger, mark included; the\n   trigger hides it, so the `width='fit'` sizer leaves it out. */\nfunction CheckMark() {\n  return (\n    <svg className={s.check} viewBox=\"0 0 10 10\" aria-hidden=\"true\">\n      <polyline points=\"1.5,5 4,7.5 8.5,3\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  );\n}\n\nfunction renderOption<T extends Key>(o: SelectOption & { value: T }) {\n  return (\n    <SelectItem key={String(o.value)} id={o.value} isDisabled={o.isDisabled} textValue={o.textValue}>\n      {o.label}\n    </SelectItem>\n  );\n}\n\n/**\n * The labels a `width='fit'` trigger measures itself against. In the children\n * form the label sits one element deep, inside a `SelectItem`, or two inside a\n * `SelectSection`.\n */\nfunction optionLabels(\n  options: ReadonlyArray<SelectOption | SelectOptionGroup<Key>> | undefined,\n  children: ReactNode,\n): ReactNode[] {\n  if (options !== undefined)\n    return options.flatMap((o) => ('options' in o ? o.options.map((g) => g.label) : [o.label]));\n  return Children.toArray(children).flatMap((c) => {\n    if (!isValidElement<{ children?: ReactNode }>(c)) return [c];\n    return c.type === SelectSection ? optionLabels(undefined, c.props.children) : [c.props.children];\n  });\n}\n\n/** Props for {@link SelectSection}. */\nexport type SelectSectionProps = {\n  /** Heading shown above the section's rows; it also names the group for\n   *  screen readers. */\n  title?: ReactNode;\n  children?: ReactNode;\n  className?: string;\n};\n\n/** A titled group of `SelectItem` rows in a {@link Select}'s list. */\nexport function SelectSection({ title, children, className }: SelectSectionProps) {\n  return (\n    <RACListBoxSection className={[s.section, className].filter(Boolean).join(' ')}>\n      {title !== undefined && <Header className={s.sectionHeader}>{title}</Header>}\n      {children}\n    </RACListBoxSection>\n  );\n}\n\n/** Props for {@link SelectItem}, on top of React Aria's `ListBoxItem` props. */\nexport type SelectItemProps = Omit<RACListBoxItemProps, 'className' | 'children'> & {\n  children?: ReactNode;\n  className?: string;\n};\n\n/**\n * Every row renders a check mark beside its label, so from React Aria's\n * side the children are never plain text and it can't derive the string\n * type-to-select and screen readers need — it warns once per row. A string\n * label already *is* that string, so derive it rather than making every\n * call site restate it; anything richer has to say what it reads as.\n */\nfunction textValueOf(children: ReactNode, explicit: string | undefined): string | undefined {\n  if (explicit !== undefined) return explicit;\n  return typeof children === 'string' || typeof children === 'number'\n    ? String(children)\n    : undefined;\n}\n\n/**\n * One row in a {@link Select}'s list, with a leading check mark when\n * selected. A string child supplies its own `textValue`; anything richer must\n * pass one so type-to-select and screen readers have something to read.\n */\nexport function SelectItem({ children, className, textValue, ...rest }: SelectItemProps) {\n  return (\n    <RACListBoxItem\n      {...rest}\n      textValue={textValueOf(children, textValue)}\n      className={[s.option, className].filter(Boolean).join(' ')}\n    >\n      <CheckMark />\n      {/* A box around the label, not just text: landing the list over its\n          trigger means measuring where this row's label sits. */}\n      <span className={s.optionLabel}>{children}</span>\n    </RACListBoxItem>\n  );\n}\n"],"mappings":"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"}

package/dist/chunks/SelectionPanel-BaQnX4Bs.js

@@ -0,0 +1,106 @@
+import { d as e, f as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./model-BaF65rnX.js";
+import { asNodeId as u } from "@weasel-js/core";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Fragment as m, useSyncExternalStore as h } from "react";
+//#region src/components/SelectionPanel/SelectionPanel.tsx
+var g = (e) => e.length === 0 ? e : e[0].toUpperCase() + e.slice(1);
+function _(i) {
+	let { scene: c, selection: l, properties: _, routing: y, renderers: b, kindLabel: x = g, emptyState: S = null, className: C } = i;
+	h(c.subscribe, c.getVersion, c.getVersion);
+	let w = l.current.map((e) => c.get(u(e))).filter((e) => e != null), T = w.map((e) => o(e, y)), E = w.map((e) => e.id).join(","), D = n(T, _);
+	if (w.length === 0) return /* @__PURE__ */ f("div", {
+		className: [t.root, C].filter(Boolean).join(" "),
+		children: S
+	});
+	let O = (e, t) => {
+		let [n, ...i] = e.path.split(".");
+		if (i.length === 0) return;
+		let a = l.current.map(u);
+		c.batch(`Edit ${e.leaf.name}`, () => {
+			for (let o of a) {
+				let a = c.get(o);
+				if (!a) continue;
+				let l = t(s(a, e.path));
+				n === "pose" ? c.setPose(o, r(a.pose, i, l)) : n === "data" && c.update(o, { data: r(a.data, i, l) });
+			}
+		});
+	};
+	return /* @__PURE__ */ p("div", {
+		className: [t.root, C].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ f("header", {
+			className: t.header,
+			children: w.length === 1 ? /* @__PURE__ */ f("span", {
+				className: t.kind,
+				children: x(T[0])
+			}) : /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("span", {
+				className: t.kind,
+				children: [w.length, " selected"]
+			}), /* @__PURE__ */ f("span", {
+				className: t.breakdown,
+				children: a(T)
+			})] })
+		}), D.map((n) => {
+			let r = n.rows.map((t) => ({
+				row: t,
+				controls: e(t.leaves.map((e) => v(e, t.leaves.length > 1 ? `${t.label} ${e.leaf.name}` : e.leaf.name, w, b, O, E)), b)
+			})).filter(({ controls: e }) => e.length > 0);
+			return r.length === 0 ? null : /* @__PURE__ */ p("section", {
+				className: t.section,
+				children: [n.name !== "" && /* @__PURE__ */ f("h3", {
+					className: t.sectionTitle,
+					children: n.name
+				}), r.map(({ row: e, controls: r }) => e.leaves.length === 1 && e.leaves[0].leaf.block ? /* @__PURE__ */ p("div", { children: [n.name === "" && e.leaves[0].leaf.kind !== "object" && /* @__PURE__ */ f("h4", {
+					className: t.sectionTitle,
+					title: e.leaves[0].leaf.description,
+					children: e.leaves[0].leaf.name
+				}), r[0].content] }, e.leaves[0].path) : /* @__PURE__ */ p("div", {
+					className: t.row,
+					children: [/* @__PURE__ */ f("span", {
+						className: t.rowLabel,
+						title: e.leaves[0].leaf.description,
+						children: e.label
+					}), /* @__PURE__ */ f("span", {
+						className: t.rowControls,
+						children: r.map(({ key: e, content: t }) => /* @__PURE__ */ f(m, { children: t }, e))
+					})]
+				}, e.leaves[0].path))]
+			}, n.key);
+		})]
+	});
+}
+function v(e, t, n, r, a, o) {
+	let { path: s, leaf: u } = e, d = i(n, s), f = d === c, p = {
+		path: s,
+		pref: u,
+		value: f ? void 0 : d,
+		mixed: f,
+		unset: !f && d === void 0,
+		setValue: (t) => a(e, () => t),
+		update: (t) => a(e, t),
+		valueAt: (e) => {
+			let t = i(n, e);
+			return t === c ? {
+				value: void 0,
+				mixed: !0
+			} : {
+				value: t,
+				mixed: !1
+			};
+		},
+		selectionKey: o
+	};
+	return {
+		key: s,
+		leaf: u,
+		ctx: p,
+		ariaLabel: t,
+		render: () => {
+			let e = r?.[s] ?? r?.[u.kind];
+			return e ? e(p) : l(p, t, r, o);
+		}
+	};
+}
+//#endregion
+export { _ as t };
+
+//# sourceMappingURL=SelectionPanel-BaQnX4Bs.js.map

package/dist/chunks/SelectionPanel-BaQnX4Bs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionPanel-BaQnX4Bs.js","names":["s","_Fragment","Fragment","renderCells","SelectionPanel_module_default","effectiveSections","setAtPath","aggregateValue","kindBreakdown","classifyKind","MIXED","renderBuiltin","Fragment$1","defaultKindLabel","kind","SelectionPanel","props","scene","nodes","selection","asNodeId","id","n","kinds","routing","selectionKey","sections","properties","className","emptyState","commit","head","rest","leaf","ids","node","value","next","nodeValueAt","kindLabel","Fragment","rows","section","row","leafCell","panelLeaf","renderers","controls","content","key","aggregated","path","mixed","ctx","v","fn","at","p","custom","ariaLabel"],"sources":["../../src/components/SelectionPanel/SelectionPanel.tsx"],"sourcesContent":["import { Fragment, useSyncExternalStore, type ReactNode } from 'react';\nimport {\n  asNodeId,\n  type NodePropertiesEntry,\n  type NodeRoutingEntry,\n  type Scene,\n  type SelectionApi,\n} from '@weasel-js/core';\nimport {\n  renderBuiltin,\n  renderCells,\n  type LeafCell,\n  type PropertyRenderContext,\n  type PropertyRenderer,\n} from './renderLeaf';\nimport {\n  MIXED,\n  aggregateValue,\n  classifyKind,\n  effectiveSections,\n  kindBreakdown,\n  nodeValueAt,\n  setAtPath,\n  type AnyNode,\n  type PanelLeaf,\n} from './model';\nimport s from './SelectionPanel.module.css';\n\nexport type { PropertyRenderContext, PropertyRenderer } from './renderLeaf';\n\n/** Props for {@link SelectionPanel}. */\nexport interface SelectionPanelProps<TData, TLayer extends string, TPose> {\n  /** The scene handle (`useScene`). The panel subscribes itself, so it\n   *  re-renders on scene mutations regardless of parent renders. */\n  scene: Scene<TData, TLayer, TPose>;\n  /** Selection handle (`useSelection`). Only `current` is read. */\n  selection: Pick<SelectionApi, 'current'>;\n  /** Properties-trait entries, e.g. core's `defaultNodeProperties` /\n   *  `inferredNodeProperties` (+ consumer extras). Memoize or hoist. */\n  properties: readonly NodePropertiesEntry[];\n  /** Routing-trait classifiers used to derive each node's kind — pass\n   *  the same list the canvas uses. Memoize or hoist. */\n  routing: readonly NodeRoutingEntry[];\n  /** Control overrides / app-defined kinds (PrefsForm-style). Keys are\n   *  leaf paths (`data.fill`, checked first) or leaf kinds (`color`).\n   *  A renderer returning `null` collapses its leaf (and the row, when\n   *  every leaf in it collapses). */\n  renderers?: Record<string, PropertyRenderer>;\n  /** Kind → header label. Default: capitalized kind name. */\n  kindLabel?: (kind: string) => string;\n  /** Rendered when the selection is empty. */\n  emptyState?: ReactNode;\n  className?: string;\n}\n\nconst defaultKindLabel = (kind: string): string =>\n  kind.length === 0 ? kind : kind[0].toUpperCase() + kind.slice(1);\n\n/**\n * Pre-baked selection properties panel. Shows the selected nodes' kind\n * and the properties-trait schema for that kind; multi-selections show\n * the intersection of the kinds' schemas with per-field Mixed state.\n * Edits commit as one labeled `scene.batch` fan-out per gesture.\n */\nexport function SelectionPanel<TData, TLayer extends string, TPose>(\n  props: SelectionPanelProps<TData, TLayer, TPose>,\n) {\n  const {\n    scene,\n    selection,\n    properties,\n    routing,\n    renderers,\n    kindLabel = defaultKindLabel,\n    emptyState = null,\n    className,\n  } = props;\n\n  useSyncExternalStore(scene.subscribe, scene.getVersion, scene.getVersion);\n\n  const nodes = selection.current\n    .map((id) => scene.get(asNodeId(id)))\n    .filter((n): n is NonNullable<typeof n> => n != null) as readonly AnyNode[];\n\n  const kinds = nodes.map((n) => classifyKind(n, routing));\n  const selectionKey = nodes.map((n) => n.id).join(',');\n  const sections = effectiveSections(kinds, properties);\n\n  if (nodes.length === 0) {\n    return <div className={[s.root, className].filter(Boolean).join(' ')}>{emptyState}</div>;\n  }\n\n  /** Writes, into every selected node, what `next` derives from the value\n   *  that node holds at the leaf's path. */\n  const commit = (leaf: PanelLeaf, next: (prev: unknown) => unknown): void => {\n    const [head, ...rest] = leaf.path.split('.');\n    if (rest.length === 0) return;\n    const ids = selection.current.map(asNodeId);\n    scene.batch(`Edit ${leaf.leaf.name}`, () => {\n      for (const id of ids) {\n        const node = scene.get(id);\n        if (!node) continue;\n        const value = next(nodeValueAt(node as AnyNode, leaf.path));\n        // `setAtPath` spreads plain objects/arrays down the schema path;\n        // consumer `pose`/`data` are assumed plain-object-shaped along\n        // that path (a class instance's prototype would be dropped by\n        // the spread) — the `as TPose`/`as TData` casts below rely on it.\n        if (head === 'pose') {\n          scene.setPose(id, setAtPath(node.pose as object, rest, value) as TPose);\n        } else if (head === 'data') {\n          scene.update(id, { data: setAtPath(node.data as object, rest, value) as TData });\n        }\n      }\n    });\n  };\n\n  return (\n    <div className={[s.root, className].filter(Boolean).join(' ')}>\n      <header className={s.header}>\n        {nodes.length === 1 ? (\n          <span className={s.kind}>{kindLabel(kinds[0])}</span>\n        ) : (\n          <>\n            <span className={s.kind}>{nodes.length} selected</span>\n            <span className={s.breakdown}>{kindBreakdown(kinds)}</span>\n          </>\n        )}\n      </header>\n      {sections.map((section) => {\n        // Render controls before emitting row chrome so a null-rendering\n        // leaf (custom renderer opting out) collapses its cell — and the\n        // whole row / section when nothing survives. PrefsForm precedent.\n        const rows = section.rows\n          .map((row) => {\n            const controls = renderCells(\n              row.leaves.map((panelLeaf) =>\n                leafCell(\n                  panelLeaf,\n                  row.leaves.length > 1\n                    ? `${row.label} ${panelLeaf.leaf.name}`\n                    : panelLeaf.leaf.name,\n                  nodes,\n                  renderers,\n                  commit,\n                  selectionKey,\n                ),\n              ),\n              renderers,\n            );\n            return { row, controls };\n          })\n          .filter(({ controls }) => controls.length > 0);\n        if (rows.length === 0) return null;\n        return (\n          <section key={section.key} className={s.section}>\n            {section.name !== '' && <h3 className={s.sectionTitle}>{section.name}</h3>}\n            {rows.map(({ row, controls }) => (\n              // A `block` leaf brings its own chrome — it spans the section\n              // instead of sitting in a labeled row's control cell. Under a\n              // headless section nothing else names it, so it heads itself;\n              // an object leaf already renders its own heading.\n              row.leaves.length === 1 && row.leaves[0].leaf.block ? (\n                <div key={row.leaves[0].path}>\n                  {section.name === '' && row.leaves[0].leaf.kind !== 'object' && (\n                    <h4 className={s.sectionTitle} title={row.leaves[0].leaf.description}>\n                      {row.leaves[0].leaf.name}\n                    </h4>\n                  )}\n                  {controls[0].content}\n                </div>\n              ) : (\n              <div key={row.leaves[0].path} className={s.row}>\n                <span className={s.rowLabel} title={row.leaves[0].leaf.description}>\n                  {row.label}\n                </span>\n                <span className={s.rowControls}>\n                  {controls.map(({ key, content }) => (\n                    <Fragment key={key}>{content}</Fragment>\n                  ))}\n                </span>\n              </div>\n              )\n            ))}\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n\n\nfunction leafCell(\n  panelLeaf: PanelLeaf,\n  ariaLabel: string,\n  nodes: readonly AnyNode[],\n  renderers: Record<string, PropertyRenderer> | undefined,\n  commit: (leaf: PanelLeaf, next: (prev: unknown) => unknown) => void,\n  selectionKey: string,\n): LeafCell {\n  const { path, leaf } = panelLeaf;\n  const aggregated = aggregateValue(nodes, path);\n  const mixed = aggregated === MIXED;\n  const value = mixed ? undefined : aggregated;\n\n  const ctx: PropertyRenderContext = {\n    path,\n    pref: leaf,\n    value,\n    mixed,\n    unset: !mixed && aggregated === undefined,\n    setValue: (v) => commit(panelLeaf, () => v),\n    update: (fn) => commit(panelLeaf, fn),\n    valueAt: (p) => {\n      const at = aggregateValue(nodes, p);\n      return at === MIXED ? { value: undefined, mixed: true } : { value: at, mixed: false };\n    },\n    selectionKey,\n  };\n\n  return {\n    key: path,\n    leaf,\n    ctx,\n    ariaLabel,\n    render: () => {\n      const custom = renderers?.[path] ?? renderers?.[leaf.kind];\n      if (custom) return custom(ctx);\n      return renderBuiltin(ctx, ariaLabel, renderers, selectionKey);\n    },\n  };\n}\n\n"],"mappings":"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"}

package/dist/chunks/SidebarPanel-BblDEz4G.js

@@ -0,0 +1,53 @@
+import { t as e } from "./CloseButton-C2J7wVfo.js";
+import { n as t } from "./Disclosure-Ch2KxYuB.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+var i = {
+	panel: "_panel_1sr1g_1",
+	title: "_title_1sr1g_9",
+	titleRow: "_titleRow_1sr1g_17",
+	titleBox: "_titleBox_1sr1g_27",
+	titleButton: "_titleButton_1sr1g_31",
+	hideButton: "_hideButton_1sr1g_47",
+	collapsed: "_collapsed_1sr1g_51",
+	body: "_body_1sr1g_55"
+};
+//#endregion
+//#region src/components/SidebarPanel/SidebarPanel.tsx
+function a(a) {
+	let { title: o, collapsed: s, onToggleCollapse: c, onHide: l, children: u, className: d } = a, f = [
+		i.panel,
+		s && i.collapsed,
+		d
+	].filter(Boolean).join(" "), p = c !== void 0;
+	return /* @__PURE__ */ r("div", {
+		className: f,
+		children: [o !== void 0 && /* @__PURE__ */ r("div", {
+			className: i.titleRow,
+			children: [p ? /* @__PURE__ */ r("button", {
+				type: "button",
+				className: `${i.titleButton} ${i.titleBox}`,
+				onClick: c,
+				"aria-expanded": !s,
+				children: [/* @__PURE__ */ n(t, { open: !s }), /* @__PURE__ */ n("span", {
+					className: i.title,
+					children: o
+				})]
+			}) : /* @__PURE__ */ n("span", {
+				className: `${i.title} ${i.titleBox}`,
+				children: o
+			}), l !== void 0 && /* @__PURE__ */ n(e, {
+				className: i.hideButton,
+				ariaLabel: "Hide panel",
+				tooltip: "Hide panel",
+				onClick: l
+			})]
+		}), !s && /* @__PURE__ */ n("div", {
+			className: i.body,
+			children: u
+		})]
+	});
+}
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=SidebarPanel-BblDEz4G.js.map

package/dist/chunks/SidebarPanel-BblDEz4G.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarPanel-BblDEz4G.js","names":["s","CloseButton","DisclosureMark","SidebarPanel_module_default","SidebarPanel","props","cls","collapsed","className","headerInteractive","onToggleCollapse","title","onHide"],"sources":["../../src/components/SidebarPanel/SidebarPanel.module.css","../../src/components/SidebarPanel/SidebarPanel.tsx"],"sourcesContent":[".panel {\n  /* Vertical only: the body spans the panel's full width, and the title row's\n     own controls carry the horizontal inset. */\n  padding: var(--wzl-space-4) 0;\n  background: var(--wzl-surface);\n  color: var(--wzl-fg);\n}\n\n.title {\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--wzl-fg-muted);\n}\n\n.titleRow {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: var(--wzl-space-2);\n  padding: 0;\n}\n\n/* The title's inset, shared by the static title and the collapse button so the\n   two line up. */\n.titleBox {\n  padding: var(--wzl-space-2) var(--wzl-space-4);\n}\n\n.titleButton {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  flex: 1 1 auto;\n  background: transparent;\n  border: 0;\n  cursor: pointer;\n  color: inherit;\n  font: inherit;\n  text-align: left;\n}\n.titleButton:hover {\n  color: var(--wzl-fg);\n}\n\n.hideButton {\n  margin-inline-end: var(--wzl-space-2);\n}\n\n.panel.collapsed {\n  padding-bottom: var(--wzl-space-2);\n}\n\n.body {\n  padding: 0;\n}\n","import type { ReactNode } from 'react';\nimport { CloseButton } from '../CloseButton';\nimport { DisclosureMark } from '../Disclosure';\nimport s from './SidebarPanel.module.css';\n\n/** Props for {@link SidebarPanel}. */\nexport interface SidebarPanelProps {\n  /** Title rendered in the panel's header row. */\n  title?: ReactNode;\n  /**\n   * Collapsed state — when true, only the header paints; the body is\n   * omitted. Caller owns the state (typically via prefs) and flips it\n   * back via `onToggleCollapse`.\n   */\n  collapsed?: boolean;\n  /**\n   * Click handler for the title row. When provided, the header renders\n   * as a button (fold mark + label) and acts as the collapse toggle.\n   * When omitted, the title is static text and the panel can't collapse.\n   */\n  onToggleCollapse?(): void;\n  /**\n   * Optional close handler — when provided, the header gains a close\n   * button on the trailing edge. Caller flips its \"hidden\" state and\n   * conditionally unmounts the panel from the parent.\n   */\n  onHide?(): void;\n  children?: ReactNode;\n  className?: string;\n}\n\n/**\n * Generic collapsible panel section for sidebars. Pure presentation —\n * caller manages `collapsed`/`hidden` state externally (the pattern is\n * to drive it from app prefs so the Preferences modal and inline\n * fold marks toggle the same map).\n *\n * Pair with `<Sidebar>` for the docked column layout.\n */\nexport function SidebarPanel(props: SidebarPanelProps) {\n  const { title, collapsed, onToggleCollapse, onHide, children, className } = props;\n  const cls = [s.panel, collapsed && s.collapsed, className].filter(Boolean).join(' ');\n  const headerInteractive = onToggleCollapse !== undefined;\n  return (\n    <div className={cls}>\n      {title !== undefined && (\n        <div className={s.titleRow}>\n          {headerInteractive ? (\n            <button\n              type=\"button\"\n              className={`${s.titleButton} ${s.titleBox}`}\n              onClick={onToggleCollapse}\n              aria-expanded={!collapsed}\n            >\n              <DisclosureMark open={!collapsed} />\n              <span className={s.title}>{title}</span>\n            </button>\n          ) : (\n            <span className={`${s.title} ${s.titleBox}`}>{title}</span>\n          )}\n          {onHide !== undefined && (\n            <CloseButton\n              className={s.hideButton}\n              ariaLabel=\"Hide panel\"\n              tooltip=\"Hide panel\"\n              onClick={onHide}\n            />\n          )}\n        </div>\n      )}\n      {!collapsed && <div className={s.body}>{children}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;ACuCA,SAAgBI,EAAa,GAA0B;CACrD,IAAM,EAAE,UAAO,cAAW,qBAAkB,WAAQ,aAAU,iBAAcC,GACtEC,IAAM;EAACN,EAAE;EAAOO,KAAaP,EAAE;EAAWQ;CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GAC7EC,IAAoBC,MAAqB,KAAA;CAC/C,OACE,kBAAC,OAAD;EAAK,WAAWJ;EAAhB,UAAA,CACGK,MAAU,KAAA,KACT,kBAAC,OAAD;GAAK,WAAWX,EAAE;GAAlB,UAAA,CACGS,IACC,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,GAAGT,EAAE,YAAY,GAAGA,EAAE;IACjC,SAASU;IACT,iBAAe,CAACH;IAJlB,UAAA,CAME,kBAACL,GAAD,EAAgB,MAAM,CAACK,EAAY,CAAA,GACnC,kBAAC,QAAD;KAAM,WAAWP,EAAE;KAAQ,UAAAW;IAAY,CAAA,CACjC;GAER,CAAA,IAAA,kBAAC,QAAD;IAAM,WAAW,GAAGX,EAAE,MAAM,GAAGA,EAAE;IAAa,UAAAW;GAAY,CAAA,GAE3DC,MAAW,KAAA,KACV,kBAACX,GAAD;IACE,WAAWD,EAAE;IACb,WAAU;IACV,SAAQ;IACR,SAASY;GACV,CAAA,CAEA;EAEN,CAAA,GAAA,CAACL,KAAa,kBAAC,OAAD;GAAK,WAAWP,EAAE;GAAO;EAAc,CAAA,CACnD;;AAET"}