@weasel-js/ui 1.5.1 → 1.6.0

package/dist/chunks/Prefs-Ctu0H4-b.js

@@ -0,0 +1,475 @@
+import { t as e } from "./Dialog-GIvjoDQj.js";
+import { o as t, t as n } from "./PropertyField-CDb19d3F.js";
+import { t as r } from "./Input-Bx2cuUbS.js";
+import { t as i } from "./useRovingTabIndex-B4uJqiKP.js";
+import { a, n as o, o as s, r as c, s as l, t as u } from "./prefField-CLkhrvYl.js";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useCallback as m, useEffect as h, useMemo as g, useRef as _, useState as v } from "react";
+//#region src/useScrollSpy.ts
+function y(e, t = 8) {
+	let n = null;
+	for (let { id: r, top: i } of e) {
+		if (i - t > 0) break;
+		n = r;
+	}
+	return n;
+}
+var b = 700;
+function x(e) {
+	let { rootRef: t, ids: n, slack: r } = e, [i, a] = v(null), o = _(null), s = _(null), c = _(null), l = m(() => {
+		let e = t.current;
+		if (!e) return;
+		if (o.current !== null) {
+			a(o.current);
+			return;
+		}
+		let i = e.getBoundingClientRect().top, s = [];
+		for (let t of n) {
+			let n = e.querySelector(`[data-spy-section="${CSS.escape(t)}"]`);
+			n && s.push({
+				id: t,
+				top: n.getBoundingClientRect().top - i
+			});
+		}
+		a(y(s, r));
+	}, [
+		t,
+		n.join("\0"),
+		r
+	]);
+	h(() => {
+		let e = t.current;
+		if (e) return l(), e.addEventListener("scroll", l, { passive: !0 }), () => e.removeEventListener("scroll", l);
+	}, [t, l]);
+	let u = m((e) => {
+		let n = t.current;
+		if (!n) return;
+		let r = n.querySelector(`[data-spy-section="${CSS.escape(e)}"]`);
+		o.current = e, a(e);
+		let i = () => {
+			o.current = null, n.removeEventListener("scrollend", i), l();
+		};
+		if (c.current?.(), s.current !== null && clearTimeout(s.current), c.current = i, s.current = setTimeout(i, b), n.addEventListener("scrollend", i), !r) return;
+		let u = r.getBoundingClientRect().top - n.getBoundingClientRect().top + n.scrollTop;
+		n.scrollTo?.({
+			top: u,
+			behavior: S() ? "auto" : "smooth"
+		});
+	}, [t, l]);
+	return h(() => () => {
+		s.current !== null && clearTimeout(s.current), c.current?.();
+	}, []), {
+		active: i,
+		scrollTo: u
+	};
+}
+function S() {
+	return typeof matchMedia == "function" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var C = {
+	columns: "_columns_145px_5",
+	column: "_column_145px_5",
+	panel: "_panel_145px_23",
+	subpanel: "_subpanel_145px_34",
+	groupHeader: "_groupHeader_145px_46",
+	groupTitle: "_groupTitle_145px_59",
+	groupDesc: "_groupDesc_145px_68",
+	rows: "_rows_145px_75",
+	row: "_row_145px_75",
+	rowControl: "_rowControl_145px_90",
+	unrenderable: "_unrenderable_145px_97",
+	titleRow: "_titleRow_145px_104",
+	objectLeaf: "_objectLeaf_145px_118",
+	objectRow: "_objectRow_145px_126",
+	objectGroup: "_objectGroup_145px_133",
+	columnsLayout: "_columnsLayout_145px_148",
+	railLayout: "_railLayout_145px_155",
+	railBody: "_railBody_145px_168",
+	rail: "_rail_145px_155",
+	railList: "_railList_145px_199",
+	railItem: "_railItem_145px_205",
+	railSub: "_railSub_145px_229",
+	railOpen: "_railOpen_145px_234",
+	railInView: "_railInView_145px_240",
+	railName: "_railName_145px_245",
+	railCount: "_railCount_145px_254",
+	pane: "_pane_145px_23",
+	paneHead: "_paneHead_145px_268",
+	paneTitle: "_paneTitle_145px_275",
+	paneDesc: "_paneDesc_145px_282",
+	paneSection: "_paneSection_145px_289",
+	paneSubsection: "_paneSubsection_145px_296",
+	sectionTitle: "_sectionTitle_145px_305",
+	subsectionTitle: "_subsectionTitle_145px_323",
+	filter: "_filter_145px_349",
+	noMatches: "_noMatches_145px_353",
+	clearFilter: "_clearFilter_145px_367"
+};
+//#endregion
+//#region src/components/Prefs/PrefsRow.tsx
+function w({ ctx: e, path: n, pref: r }) {
+	let i = s(e.values, n), a = {
+		path: n,
+		pref: r,
+		value: i === void 0 ? r.default : i,
+		setValue: (t) => e.onChange(n, t),
+		auto: !1,
+		setAuto: () => {}
+	}, o = e.renderers?.[r.kind], c = o ? o(a) : T(a);
+	return o && c === null ? null : r.block ? /* @__PURE__ */ f(d, { children: c }) : /* @__PURE__ */ f(t, {
+		label: r.name,
+		description: r.description,
+		layout: "inline",
+		chrome: "framed",
+		className: C.row,
+		children: /* @__PURE__ */ f("span", {
+			className: C.rowControl,
+			children: c
+		})
+	});
+}
+function T(e, t) {
+	let { pref: r, value: i, setValue: a } = e;
+	if (r.kind === "object") return /* @__PURE__ */ f(E, { ctx: e });
+	let o = u(r, {
+		value: i,
+		siblings: t,
+		setValue: a
+	});
+	return o === null ? /* @__PURE__ */ p("span", {
+		className: C.unrenderable,
+		children: [
+			"(",
+			r.kind,
+			": no renderer)"
+		]
+	}) : /* @__PURE__ */ f(n, {
+		...o,
+		chrome: "framed",
+		name: r.name
+	});
+}
+function E({ ctx: e }) {
+	let n = e.pref, { value: r, setValue: i } = e, a = typeof r == "object" && r ? r : void 0, o = (s) => {
+		let l = [];
+		for (let [u, d] of Object.entries(s)) {
+			if (!c(d)) {
+				let e = o(d.children);
+				if (e.length === 0) continue;
+				l.push(/* @__PURE__ */ f("h4", {
+					className: C.objectGroup,
+					children: d.name
+				}, `group:${u}`), ...e);
+				continue;
+			}
+			l.push(/* @__PURE__ */ f(t, {
+				label: d.name,
+				layout: "inline",
+				chrome: "framed",
+				className: C.objectRow,
+				children: /* @__PURE__ */ f("span", {
+					className: C.rowControl,
+					children: T({
+						path: `${e.path}.${u}`,
+						pref: d,
+						value: a?.[u],
+						setValue: (e) => {
+							i({
+								...a ?? n.fromScalar?.(r) ?? {},
+								[u]: e
+							});
+						},
+						auto: e.auto,
+						setAuto: e.setAuto
+					}, a)
+				})
+			}, u));
+		}
+		return l;
+	};
+	return /* @__PURE__ */ f("div", {
+		className: C.objectLeaf,
+		children: o(n.children)
+	});
+}
+//#endregion
+//#region src/components/Prefs/PrefsPane.tsx
+function D(e) {
+	let { ctx: t, group: n, path: r, scrollRef: i, className: a } = e, o = Object.entries(n.children).filter((e) => c(e[1])), s = Object.entries(n.children).filter((e) => !c(e[1])), l = (e) => r === "" ? e : `${r}.${e}`;
+	return /* @__PURE__ */ p("div", {
+		className: [C.pane, a].filter(Boolean).join(" "),
+		ref: i,
+		children: [
+			/* @__PURE__ */ p("div", {
+				className: C.paneHead,
+				children: [/* @__PURE__ */ f("h3", {
+					className: C.paneTitle,
+					children: n.name
+				}), n.description !== void 0 && /* @__PURE__ */ f("p", {
+					className: C.paneDesc,
+					children: n.description
+				})]
+			}),
+			o.length > 0 && /* @__PURE__ */ f("div", {
+				className: C.rows,
+				children: o.map(([e, n]) => /* @__PURE__ */ f(w, {
+					ctx: t,
+					path: l(e),
+					pref: n
+				}, e))
+			}),
+			s.map(([e, n]) => /* @__PURE__ */ f(O, {
+				ctx: t,
+				group: n,
+				path: l(e),
+				depth: 0
+			}, e))
+		]
+	});
+}
+function O({ ctx: e, group: t, path: n, depth: r }) {
+	let i = r === 0 ? "h4" : "h5";
+	return /* @__PURE__ */ p("section", {
+		className: r === 0 ? C.paneSection : C.paneSubsection,
+		"data-spy-section": r === 0 ? n : void 0,
+		"aria-label": t.name,
+		children: [
+			/* @__PURE__ */ f(i, {
+				className: r === 0 ? C.sectionTitle : C.subsectionTitle,
+				children: t.name
+			}),
+			t.description !== void 0 && /* @__PURE__ */ f("p", {
+				className: C.paneDesc,
+				children: t.description
+			}),
+			/* @__PURE__ */ f("div", {
+				className: C.rows,
+				children: Object.entries(t.children).map(([t, i]) => {
+					let a = `${n}.${t}`;
+					return c(i) ? /* @__PURE__ */ f(w, {
+						ctx: e,
+						path: a,
+						pref: i
+					}, t) : /* @__PURE__ */ f(O, {
+						ctx: e,
+						group: i,
+						path: a,
+						depth: r + 1
+					}, t);
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/Prefs/PrefsRail.tsx
+function k(e) {
+	let { items: t, section: n, current: r, onOpen: a, onScrollTo: o, ariaLabel: s, header: c, showCounts: l } = e, u = (e) => {
+		let n = t[e];
+		n && (n.depth === 0 ? a(n.path) : o(n.path));
+	}, d = i({
+		items: t.map(() => ({})),
+		itemClassName: C.railItem,
+		tabStopIndex: Math.max(0, t.findIndex((e) => e.path === n))
+	});
+	return /* @__PURE__ */ p("nav", {
+		className: C.rail,
+		"aria-label": s,
+		children: [c, /* @__PURE__ */ f("div", {
+			className: C.railList,
+			ref: d.rootRef,
+			children: t.map((e, t) => {
+				let i = e.depth === 0 && e.path === n, a = e.depth === 1 && e.path === r;
+				return /* @__PURE__ */ p("button", {
+					type: "button",
+					className: [
+						C.railItem,
+						e.depth === 1 && C.railSub,
+						i && C.railOpen,
+						a && C.railInView
+					].filter(Boolean).join(" "),
+					"aria-current": i ? "page" : a ? "location" : void 0,
+					tabIndex: d.tabIndexFor(t),
+					onKeyDown: d.onKeyDown(t),
+					onClick: () => u(t),
+					children: [/* @__PURE__ */ f("span", {
+						className: C.railName,
+						children: e.name
+					}), l ? /* @__PURE__ */ f("span", {
+						className: C.railCount,
+						children: e.matches
+					}) : null]
+				}, e.path === "" ? "\0root" : e.path);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/Prefs/PrefsForm.tsx
+function A(e) {
+	let { schema: t, values: n, onChange: i, renderers: a, showHidden: s = !1, layout: u = "columns", filterable: d = !1, className: m } = e, [h, _] = v(""), y = g(() => {
+		let e = l(t, s);
+		return e === null ? null : o(e, h);
+	}, [
+		t,
+		s,
+		h
+	]), b = {
+		values: n,
+		onChange: i,
+		renderers: a
+	}, x = d ? /* @__PURE__ */ f("div", {
+		className: C.filter,
+		children: /* @__PURE__ */ f(r, {
+			value: h,
+			onChange: _,
+			"aria-label": `Filter ${t.name}`,
+			placeholder: "Filter settings"
+		})
+	}) : null;
+	return u === "rail" ? /* @__PURE__ */ f(j, {
+		...e,
+		root: y,
+		ctx: b,
+		query: h,
+		filterField: x,
+		onClearFilter: () => _("")
+	}) : /* @__PURE__ */ p("div", {
+		className: [C.columnsLayout, m].filter(Boolean).join(" "),
+		children: [x, y === null ? /* @__PURE__ */ f(N, {
+			query: h,
+			onClear: () => _("")
+		}) : /* @__PURE__ */ f("div", {
+			className: C.columns,
+			children: Object.entries(y.children).map(([e, t]) => /* @__PURE__ */ f("div", {
+				className: C.column,
+				children: c(t) ? /* @__PURE__ */ f(w, {
+					ctx: b,
+					path: e,
+					pref: t
+				}) : /* @__PURE__ */ f(P, {
+					ctx: b,
+					group: t,
+					path: e,
+					depth: 0
+				})
+			}, e))
+		})]
+	});
+}
+function j(e) {
+	let { schema: t, root: n, ctx: r, query: i, filterField: o, onClearFilter: s, className: c } = e, l = g(() => n === null ? [] : a(n), [n]), [u, d] = v(() => e.defaultSection ?? ""), m = e.section ?? u, h = l.some((e) => e.path === m && e.depth === 0) ? m : l.find((e) => e.depth === 0)?.path ?? "", y = _(null), b = x({
+		rootRef: y,
+		ids: g(() => l.filter((e) => e.depth === 1 && e.section === h).map((e) => e.path), [l, h])
+	}), S = (t) => {
+		e.section === void 0 && d(t), e.onSectionChange?.(t), y.current?.scrollTo?.({ top: 0 });
+	}, w = n === null ? null : M(n, h, t.name);
+	return /* @__PURE__ */ p("div", {
+		className: [C.railLayout, c].filter(Boolean).join(" "),
+		children: [/* @__PURE__ */ f(k, {
+			items: l,
+			section: h,
+			current: b.active,
+			onOpen: S,
+			onScrollTo: b.scrollTo,
+			ariaLabel: t.name,
+			header: o,
+			showCounts: i.trim() !== ""
+		}), w === null ? /* @__PURE__ */ f("div", {
+			className: C.pane,
+			children: /* @__PURE__ */ f(N, {
+				query: i,
+				onClear: s
+			})
+		}) : /* @__PURE__ */ f(D, {
+			ctx: r,
+			group: w,
+			path: h,
+			scrollRef: y
+		})]
+	});
+}
+function M(e, t, n) {
+	if (t === "") {
+		let t = Object.fromEntries(Object.entries(e.children).filter(([, e]) => c(e)));
+		return Object.keys(t).length === 0 ? null : {
+			...e,
+			name: n,
+			children: t
+		};
+	}
+	let r, i = e;
+	for (let e of t.split(".")) {
+		let t = i.children[e];
+		if (t === void 0 || c(t)) return null;
+		r = t, i = t;
+	}
+	return r ?? null;
+}
+function N({ query: e, onClear: t }) {
+	return /* @__PURE__ */ p("div", {
+		className: C.noMatches,
+		children: [/* @__PURE__ */ p("p", { children: [
+			"No settings match “",
+			e.trim(),
+			"”."
+		] }), /* @__PURE__ */ f("button", {
+			type: "button",
+			className: C.clearFilter,
+			onClick: t,
+			children: "Clear filter"
+		})]
+	});
+}
+function P({ ctx: e, group: t, path: n, depth: r }) {
+	return /* @__PURE__ */ p("div", {
+		className: r === 0 ? C.panel : C.subpanel,
+		children: [/* @__PURE__ */ p("div", {
+			className: C.groupHeader,
+			children: [/* @__PURE__ */ f("h3", {
+				className: C.groupTitle,
+				children: t.name
+			}), t.description !== void 0 && /* @__PURE__ */ f("p", {
+				className: C.groupDesc,
+				children: t.description
+			})]
+		}), /* @__PURE__ */ f("div", {
+			className: C.rows,
+			children: Object.entries(t.children).map(([t, i]) => {
+				let a = `${n}.${t}`;
+				return c(i) ? /* @__PURE__ */ f(w, {
+					ctx: e,
+					path: a,
+					pref: i
+				}, t) : /* @__PURE__ */ f(P, {
+					ctx: e,
+					group: i,
+					path: a,
+					depth: r + 1
+				}, t);
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/Prefs/PrefsDialog.tsx
+function F(t) {
+	let { isOpen: n, onOpenChange: r, title: i, headerExtra: a, footer: o, dialogClassName: s, ...c } = t, l = c.layout === "rail";
+	return /* @__PURE__ */ f(e, {
+		isOpen: n,
+		onOpenChange: r,
+		"aria-label": typeof i == "string" ? i : c.schema.name,
+		className: s,
+		footer: o,
+		bodyClassName: l ? C.railBody : void 0,
+		title: a === void 0 ? i ?? c.schema.name : /* @__PURE__ */ p("span", {
+			className: C.titleRow,
+			children: [/* @__PURE__ */ f("span", { children: i ?? c.schema.name }), a]
+		}),
+		children: /* @__PURE__ */ f(A, { ...c })
+	});
+}
+//#endregion
+export { y as a, D as i, A as n, x as o, k as r, F as t };
+
+//# sourceMappingURL=Prefs-Ctu0H4-b.js.map

package/dist/chunks/Prefs-Ctu0H4-b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Prefs-Ctu0H4-b.js","names":[],"sources":["../../src/useScrollSpy.ts","../../src/components/Prefs/Prefs.module.css","../../src/components/Prefs/PrefsRow.tsx","../../src/components/Prefs/PrefsPane.tsx","../../src/components/Prefs/PrefsRail.tsx","../../src/components/Prefs/PrefsForm.tsx","../../src/components/Prefs/PrefsDialog.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type RefObject } from 'react';\n\n/** One observed section: its id and its top edge, in the container's\n *  coordinates (its `getBoundingClientRect().top` less the container's). */\nexport interface SectionOffset {\n  id: string;\n  top: number;\n}\n\n/**\n * The section a reader is looking at: the last one whose top edge has passed\n * the container's, within `slack` of it so a heading flush with the top counts\n * as arrived. Null until one has — the settings above the first section belong\n * to the group itself, and marking a section the reader has not reached yet\n * points them at the wrong place.\n *\n * Offsets arrive in document order and are not re-sorted — a caller reading\n * them off the DOM already has them that way, and sorting would hide a\n * measurement that came back wrong.\n */\nexport function pickActiveSection(\n  offsets: readonly SectionOffset[],\n  slack = 8,\n): string | null {\n  let active: string | null = null;\n  for (const { id, top } of offsets) {\n    if (top - slack > 0) break;\n    active = id;\n  }\n  return active;\n}\n\n/** Options for {@link useScrollSpy}. */\nexport interface UseScrollSpyOptions {\n  /** The scrolling element holding the sections. */\n  rootRef: RefObject<HTMLElement | null>;\n  /** Section element ids, in document order. */\n  ids: readonly string[];\n  /** Pixels of tolerance at the container's top edge. */\n  slack?: number;\n}\n\n/** What {@link useScrollSpy} returns. */\nexport interface ScrollSpy {\n  /** Id of the section in view, or null before anything is measured. */\n  active: string | null;\n  /**\n   * Scroll `id` to the container's top and hold that answer until the scroll\n   * settles. Without the hold, the scroll the click causes is observed on its\n   * way past every intervening section and the rail flickers through them.\n   */\n  scrollTo: (id: string) => void;\n}\n\n/** How long to keep a programmatic scroll's answer when `scrollend` never\n *  arrives — Safari and Firefox have not shipped it. Comfortably longer than a\n *  smooth scroll, short enough that a reader who then scrolls by hand is not\n *  left looking at a stale highlight. */\nconst SETTLE_MS = 700;\n\n/**\n * Which of a scrolling container's sections is in view, for a navigation rail\n * that follows the reader. Positions are read on the container's own `scroll`\n * event — already throttled to the frame by the browser — rather than through\n * `IntersectionObserver`, so the decision stays a pure function of measured\n * offsets ({@link pickActiveSection}) and is testable apart from the DOM.\n */\nexport function useScrollSpy(options: UseScrollSpyOptions): ScrollSpy {\n  const { rootRef, ids, slack } = options;\n  const [active, setActive] = useState<string | null>(null);\n  // Set while a programmatic scroll runs: what to report, instead of what the\n  // moving container would say.\n  const heldRef = useRef<string | null>(null);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const releaseRef = useRef<(() => void) | null>(null);\n  const key = ids.join('\\u0000');\n\n  const measure = useCallback((): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    if (heldRef.current !== null) {\n      setActive(heldRef.current);\n      return;\n    }\n    const rootTop = root.getBoundingClientRect().top;\n    const offsets: SectionOffset[] = [];\n    for (const id of ids) {\n      const el = root.querySelector<HTMLElement>(`[data-spy-section=\"${CSS.escape(id)}\"]`);\n      if (el) offsets.push({ id, top: el.getBoundingClientRect().top - rootTop });\n    }\n    setActive(pickActiveSection(offsets, slack));\n    // `ids` is compared by content through `key`: a caller deriving the array\n    // each render would otherwise resubscribe on every one.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [rootRef, key, slack]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    measure();\n    root.addEventListener('scroll', measure, { passive: true });\n    return () => root.removeEventListener('scroll', measure);\n  }, [rootRef, measure]);\n\n  const scrollTo = useCallback((id: string): void => {\n    const root = rootRef.current;\n    if (!root) return;\n    const el = root.querySelector<HTMLElement>(`[data-spy-section=\"${CSS.escape(id)}\"]`);\n    heldRef.current = id;\n    setActive(id);\n    const release = (): void => {\n      heldRef.current = null;\n      root.removeEventListener('scrollend', release);\n      measure();\n    };\n    // A scroll interrupted by the next one would otherwise leave its\n    // `scrollend` listener behind to fire against a later scroll.\n    releaseRef.current?.();\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    releaseRef.current = release;\n    timerRef.current = setTimeout(release, SETTLE_MS);\n    root.addEventListener('scrollend', release);\n    if (!el) return;\n    const top = el.getBoundingClientRect().top - root.getBoundingClientRect().top + root.scrollTop;\n    root.scrollTo?.({ top, behavior: prefersReducedMotion() ? 'auto' : 'smooth' });\n  }, [rootRef, measure]);\n\n  useEffect(() => () => {\n    if (timerRef.current !== null) clearTimeout(timerRef.current);\n    releaseRef.current?.();\n  }, []);\n\n  return { active, scrollTo };\n}\n\nfunction prefersReducedMotion(): boolean {\n  return typeof matchMedia === 'function'\n    && matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n","/* Ported from WeaselDraw's wd-prefs-* rules (apps/draw/src/app.css),\n * generalized onto theme tokens. Column width is overridable via\n * --wzl-prefs-column-width at any ancestor scope. */\n\n.columns {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: var(--wzl-space-6);\n  overflow-y: auto;\n  padding-right: var(--wzl-space-2);\n}\n\n.column {\n  flex: 0 0 var(--wzl-prefs-column-width, 300px);\n  width: var(--wzl-prefs-column-width, 300px);\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n}\n\n.panel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  padding: var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.subpanel {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  margin-top: var(--wzl-space-3);\n  padding: var(--wzl-space-4) var(--wzl-space-4) var(--wzl-space-4) var(--wzl-space-5);\n  background: var(--wzl-surface-sunken);\n  border-left: 2px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.groupHeader {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  padding-bottom: var(--wzl-space-2);\n  border-bottom: 1px solid var(--wzl-border);\n}\n\n.subpanel .groupHeader {\n  border-bottom: none;\n  padding-bottom: var(--wzl-space-1);\n}\n\n.groupTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wider));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n.groupDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n}\n\n/* A leaf's row is a PropertyRow, inline; this only sets the form's type. */\n.row {\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg);\n  cursor: default;\n}\n\n/* Control slot — fixed width so the label can take the rest of the row.\n * Kit form controls render as block-level flex columns that fill it. */\n.rowControl {\n  flex: 0 0 110px;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n}\n\n.unrenderable {\n  font-family: var(--wzl-font-mono);\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n/* PrefsDialog header row: title text + optional headerExtra chrome. */\n.titleRow {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-6);\n  flex: 1;\n  min-width: 0;\n}\n\n.titleRow > span:first-child {\n  flex: 1;\n  min-width: 0;\n}\n\n/* An object leaf renders its fields as its own rows. */\n.objectLeaf {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  inline-size: 100%;\n}\n\n/* Outranks the PropertyRow it styles, which is a flex row. */\n.objectLeaf .objectRow {\n  display: grid;\n  grid-template-columns: 96px 1fr;\n  gap: var(--wzl-space-4);\n  align-items: center;\n}\n\n.objectGroup {\n  margin: var(--wzl-space-2) 0 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  text-transform: var(--wzl-params-label-case, uppercase);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  opacity: 0.55;\n}\n\n/* ---------------------------------------------------------------------------\n * Rail layout. The rail is the only chrome: no panels, because the surface\n * the form sits on already has a border and a card inside it restates one.\n * Width is overridable via --wzl-prefs-rail-width at any ancestor scope.\n * ------------------------------------------------------------------------ */\n\n.columnsLayout {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-4);\n  min-height: 0;\n}\n\n.railLayout {\n  display: flex;\n  flex-direction: row;\n  align-items: stretch;\n  min-height: 0;\n  block-size: 100%;\n  /* The pane scrolls, not the layout: a rail that scrolled away with the\n     settings would be useless exactly when it is needed. */\n  overflow: hidden;\n}\n\n/* What `PrefsDialog` hands `Dialog` for its body in rail layout: the pane\n   inside does the scrolling and the rail meets the dialog's own edges. */\n.railBody {\n  padding: 0;\n  overflow: hidden;\n  /* A settled height: without one the dialog grows and shrinks as the reader\n     moves between a two-row group and a twenty-row one, and the rail entry\n     they are aiming at moves while they aim at it. */\n  min-block-size: min(60vh, 420px);\n  /* Same reason across: a filter that narrows the schema to two rows should\n     not pull the dialog's edges in around them. */\n  min-inline-size: min(760px, 90vw);\n}\n\n.rail {\n  /* Never more than two fifths of the box: at its full width in a narrow\n     container the rail takes the space the settings need and leaves a pane\n     too thin to hold a row. The clamp belongs on the flex basis — an\n     `inline-size` here is simply ignored, which is what made a first attempt\n     at this look right and do nothing. */\n  flex: 0 1 min(var(--wzl-prefs-rail-width, 216px), 40%);\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  padding: var(--wzl-space-3) var(--wzl-space-2);\n  background: var(--wzl-surface-sunken);\n  border-right: 1px solid var(--wzl-border);\n  overflow-y: auto;\n  /* The rail is itself sunken, so a field taking the default surface would be\n     the same color as the rail behind it. */\n  --wzl-input-surface: var(--wzl-surface);\n}\n\n.railList {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.railItem {\n  display: flex;\n  align-items: center;\n  gap: var(--wzl-space-2);\n  padding: var(--wzl-space-2) var(--wzl-space-3);\n  border: none;\n  border-radius: var(--wzl-radius-sm);\n  background: none;\n  color: var(--wzl-fg);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n  text-align: start;\n  cursor: default;\n}\n\n.railItem:hover {\n  background: var(--wzl-surface-raised);\n}\n\n.railItem:focus-visible {\n  outline: 2px solid var(--wzl-focus-ring);\n  outline-offset: -2px;\n}\n\n.railSub {\n  padding-left: var(--wzl-space-7);\n  color: var(--wzl-fg-subtle);\n}\n\n.railOpen,\n.railOpen:hover {\n  background: var(--wzl-accent);\n  color: var(--wzl-fg-on-accent);\n}\n\n.railInView {\n  color: var(--wzl-fg);\n  box-shadow: inset 2px 0 0 var(--wzl-accent);\n}\n\n.railName {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Last in the row: a count that changes as the reader types would otherwise\n   shove the name on every keystroke. */\n.railCount {\n  margin-left: auto;\n  font-size: var(--wzl-font-size-xs);\n  font-variant-numeric: tabular-nums;\n  opacity: 0.6;\n}\n\n.pane {\n  flex: 1;\n  min-width: 0;\n  overflow-y: auto;\n  padding: var(--wzl-space-5) var(--wzl-space-6);\n}\n\n.paneHead {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-1);\n  margin-bottom: var(--wzl-space-5);\n}\n\n.paneTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-lg);\n  font-weight: var(--wzl-font-weight-medium);\n  color: var(--wzl-fg);\n}\n\n.paneDesc {\n  margin: 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n  line-height: 1.35;\n}\n\n.paneSection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-3);\n  margin-top: var(--wzl-space-6);\n}\n\n.paneSubsection {\n  display: flex;\n  flex-direction: column;\n  gap: var(--wzl-space-2);\n  margin-top: var(--wzl-space-4);\n  padding-left: var(--wzl-space-4);\n  border-left: 2px solid var(--wzl-border);\n}\n\n.sectionTitle {\n  position: sticky;\n  /* Sticky offsets are measured from the scrollport's edge, not from inside\n     the pane's padding, so this is 0 and the heading's own padding is what\n     keeps the text off the edge. */\n  top: 0;\n  z-index: 1;\n  margin: 0;\n  padding: var(--wzl-space-3) 0 var(--wzl-space-2);\n  background: var(--wzl-surface);\n  border-bottom: 1px solid var(--wzl-border);\n  font-size: var(--wzl-font-size-sm);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-subtle);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wider));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n.subsectionTitle {\n  margin: 0;\n  font-size: var(--wzl-font-size-xs);\n  font-weight: var(--wzl-font-weight-bold);\n  color: var(--wzl-fg-subtle);\n  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));\n  text-transform: var(--wzl-params-label-case, uppercase);\n}\n\n/* In the rail layout a row is a grid, so the control track grows with the\n   pane instead of holding at the columns layout's fixed slot. */\n.railLayout .row {\n  display: grid;\n  /* The control track is capped rather than taking the rest: a number field\n     as wide as the pane reads as a text area, and every row's control starts\n     at the same x either way. */\n  grid-template-columns:\n    minmax(140px, var(--wzl-params-label-width, 240px))\n    minmax(180px, 260px);\n  align-items: center;\n}\n\n.railLayout .rowControl {\n  flex: 1 1 auto;\n}\n\n.filter {\n  padding: 0 var(--wzl-space-1) var(--wzl-space-2);\n}\n\n.noMatches {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--wzl-space-3);\n  padding: var(--wzl-space-6) 0;\n  font-size: var(--wzl-font-size-sm);\n  color: var(--wzl-fg-subtle);\n}\n\n.noMatches p {\n  margin: 0;\n}\n\n.clearFilter {\n  padding: var(--wzl-space-1) var(--wzl-space-3);\n  border: 1px solid var(--wzl-border);\n  border-radius: var(--wzl-radius-sm);\n  background: var(--wzl-surface-raised);\n  color: var(--wzl-fg);\n  font: inherit;\n  font-size: var(--wzl-font-size-sm);\n}\n","import { type ReactNode } from 'react';\nimport { PropertyControl } from '../Properties/PropertyField';\nimport { PropertyRow } from '../Properties/PropertyPanel';\nimport { prefFieldProps } from './prefField';\nimport {\n  isPrefLeaf,\n  prefValueAtPath,\n  type PrefGroup,\n  type PrefLeaf,\n  type PrefObject,\n} from './schema';\nimport s from './Prefs.module.css';\n\n/** What a {@link PrefRenderer} is given for the leaf it is rendering. */\nexport interface PrefRenderContext {\n  /** Dotted path of the leaf within the schema root. */\n  path: string;\n  /** The schema node. App renderers narrow this to their own kind shape. */\n  pref: PrefLeaf;\n  /** Current value — `values` at `path`, falling back to `pref.default`. */\n  value: unknown;\n  setValue: (value: unknown) => void;\n  /** Whether this leaf is currently auto — not pinned, computed by the owner. */\n  auto: boolean;\n  /** Toggle this leaf's auto state. */\n  setAuto: (next: boolean) => void;\n}\n\n/**\n * Renders the control cell for one preference leaf. Returning `null`\n * collapses the row.\n */\nexport type PrefRenderer = (ctx: PrefRenderContext) => ReactNode;\n\nexport interface WalkCtx {\n  values: unknown;\n  onChange: (path: string, value: unknown) => void;\n  renderers?: Record<string, PrefRenderer>;\n}\n\nexport function PrefRow({ ctx, path, pref }: { ctx: WalkCtx; path: string; pref: PrefLeaf }) {\n  const stored = prefValueAtPath(ctx.values, path);\n  const renderCtx: PrefRenderContext = {\n    path,\n    pref,\n    value: stored !== undefined ? stored : pref.default,\n    setValue: (v) => ctx.onChange(path, v),\n    // A prefs form pins every leaf: it has no computed state to hand back.\n    auto: false,\n    setAuto: () => {},\n  };\n\n  const custom = ctx.renderers?.[pref.kind];\n  const control = custom ? custom(renderCtx) : renderBuiltin(renderCtx);\n  if (custom && control === null) return null;\n\n  // `block` leaves own their chrome (embedded editors with their own\n  // header) — no label/tooltip row.\n  if (pref.block) return <>{control}</>;\n\n  return (\n    <PropertyRow\n      label={pref.name}\n      description={pref.description}\n      layout=\"inline\"\n      chrome=\"framed\"\n      className={s.row}\n    >\n      <span className={s.rowControl}>{control}</span>\n    </PropertyRow>\n  );\n}\n\nfunction renderBuiltin(\n  ctx: PrefRenderContext,\n  // The object a nested leaf is a field of — what an enum `encoding` and a\n  // font's weight and slant read against. Undefined for a top-level leaf.\n  siblings?: Record<string, unknown>,\n): ReactNode {\n  const { pref, value, setValue } = ctx;\n  if (pref.kind === 'object') return <ObjectLeaf ctx={ctx} />;\n  const field = prefFieldProps(pref, { value, siblings, setValue });\n  if (field === null) {\n    // App-defined kind with no `renderers` entry: labeled placeholder, not a\n    // crash — a missing wiring should be visible and recoverable.\n    return <span className={s.unrenderable}>({pref.kind}: no renderer)</span>;\n  }\n  return <PropertyControl {...field} chrome=\"framed\" name={pref.name} />;\n}\n\n/** One value with its fields hanging off it: each field renders its own\n *  control and commits the parent object whole. */\nfunction ObjectLeaf({ ctx }: { ctx: PrefRenderContext }) {\n  const pref = ctx.pref as PrefObject;\n  const { value, setValue } = ctx;\n  const held = typeof value === 'object' && value !== null\n    ? (value as Record<string, unknown>)\n    : undefined;\n  const objectRows = (children: Record<string, PrefLeaf | PrefGroup>): ReactNode[] => {\n    const out: ReactNode[] = [];\n    for (const [key, child] of Object.entries(children)) {\n      if (!isPrefLeaf(child)) {\n        const inner = objectRows(child.children);\n        if (inner.length === 0) continue;\n        out.push(<h4 key={`group:${key}`} className={s.objectGroup}>{child.name}</h4>, ...inner);\n        continue;\n      }\n      out.push(\n        <PropertyRow\n          key={key}\n          label={child.name}\n          layout=\"inline\"\n          chrome=\"framed\"\n          className={s.objectRow}\n        >\n          <span className={s.rowControl}>\n            {renderBuiltin({\n              path: `${ctx.path}.${key}`,\n              pref: child,\n              value: held?.[key],\n              setValue: (v) => {\n                const base = held ?? pref.fromScalar?.(value) ?? {};\n                setValue({ ...base, [key]: v });\n              },\n              // A field is not pinned on its own — it shares the state of\n              // the object leaf it hangs off.\n              auto: ctx.auto,\n              setAuto: ctx.setAuto,\n            }, held)}\n          </span>\n        </PropertyRow>,\n      );\n    }\n    return out;\n  };\n  return <div className={s.objectLeaf}>{objectRows(pref.children)}</div>;\n}\n","import { type RefObject } from 'react';\nimport { isPrefLeaf, type PrefGroup, type PrefLeaf } from './schema';\nimport { PrefRow, type WalkCtx } from './PrefsRow';\nimport s from './Prefs.module.css';\n\n/** Props for {@link PrefsPane}. */\nexport interface PrefsPaneProps {\n  ctx: WalkCtx;\n  /** The open group, or a synthetic one holding the root's loose leaves. */\n  group: PrefGroup;\n  /** Dotted path of `group`. Empty for the loose-leaf pane. */\n  path: string;\n  /** The pane's scroll container, for the rail's scroll spy. */\n  scrollRef: RefObject<HTMLDivElement | null>;\n  className?: string;\n}\n\n/**\n * One rail section's settings: the group's own leaves, then one headed\n * section per nested group.\n *\n * Nothing here draws a panel. The rail is the layout's structure, and a card\n * inside a dialog that already has a border only restates it — the columns\n * layout's sunken panels are what this is the alternative to.\n */\nexport function PrefsPane(props: PrefsPaneProps) {\n  const { ctx, group, path, scrollRef, className } = props;\n  const leaves = Object.entries(group.children).filter(\n    (entry): entry is [string, PrefLeaf] => isPrefLeaf(entry[1]),\n  );\n  const groups = Object.entries(group.children).filter(\n    (entry): entry is [string, PrefGroup] => !isPrefLeaf(entry[1]),\n  );\n  const childPath = (key: string): string => (path === '' ? key : `${path}.${key}`);\n\n  return (\n    <div className={[s.pane, className].filter(Boolean).join(' ')} ref={scrollRef}>\n      <div className={s.paneHead}>\n        <h3 className={s.paneTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.paneDesc}>{group.description}</p>\n        )}\n      </div>\n      {leaves.length > 0 && (\n        <div className={s.rows}>\n          {leaves.map(([key, leaf]) => (\n            <PrefRow key={key} ctx={ctx} path={childPath(key)} pref={leaf} />\n          ))}\n        </div>\n      )}\n      {groups.map(([key, child]) => (\n        <PaneSection\n          key={key}\n          ctx={ctx}\n          group={child}\n          path={childPath(key)}\n          depth={0}\n        />\n      ))}\n    </div>\n  );\n}\n\n/**\n * A nested group inside a pane. Depth 0 sections are the ones the rail links\n * to and carry `data-spy-section`; deeper ones indent and are reached only by\n * scrolling, which is what keeps the rail two levels deep whatever the schema\n * does.\n */\nfunction PaneSection({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  const Heading = depth === 0 ? 'h4' : 'h5';\n  return (\n    <section\n      className={depth === 0 ? s.paneSection : s.paneSubsection}\n      data-spy-section={depth === 0 ? path : undefined}\n      aria-label={group.name}\n    >\n      <Heading className={depth === 0 ? s.sectionTitle : s.subsectionTitle}>\n        {group.name}\n      </Heading>\n      {group.description !== undefined && (\n        <p className={s.paneDesc}>{group.description}</p>\n      )}\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const p = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={p} pref={child} />\n          ) : (\n            <PaneSection key={key} ctx={ctx} group={child} path={p} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { useRovingTabIndex } from '../../useRovingTabIndex';\nimport type { PrefRailItem } from './schema';\nimport s from './Prefs.module.css';\n\n/** Props for {@link PrefsRail}. */\nexport interface PrefsRailProps {\n  items: readonly PrefRailItem[];\n  /** Path of the open depth-0 group. */\n  section: string;\n  /** Path of the depth-1 group in view, from the pane's scroll spy. */\n  current: string | null;\n  /** A depth-0 entry was chosen: open its pane. */\n  onOpen: (path: string) => void;\n  /** A depth-1 entry was chosen: scroll the open pane to it. */\n  onScrollTo: (path: string) => void;\n  /** Accessible name for the rail's landmark. */\n  ariaLabel: string;\n  /** Rendered above the list — the filter field, when there is one. */\n  header?: ReactNode;\n  /** Show each entry's match count. Only meaningful while filtering. */\n  showCounts?: boolean;\n}\n\n/**\n * The rail beside a `PrefsForm` pane: depth-0 groups, each followed by the\n * depth-1 groups that scroll within it.\n *\n * A list of buttons rather than a tablist, because only half of these entries\n * switch anything — the nested ones scroll the pane the selected entry already\n * opened, and a tab that does not own a panel has no honest role. The open\n * group is `aria-current=\"page\"`; the nested group in view is\n * `aria-current=\"location\"`.\n */\nexport function PrefsRail(props: PrefsRailProps) {\n  const { items, section, current, onOpen, onScrollTo, ariaLabel, header, showCounts } = props;\n  const activate = (index: number): void => {\n    const item = items[index];\n    if (!item) return;\n    if (item.depth === 0) onOpen(item.path);\n    else onScrollTo(item.path);\n  };\n  const roving = useRovingTabIndex<HTMLDivElement>({\n    items: items.map(() => ({})),\n    itemClassName: s.railItem,\n    tabStopIndex: Math.max(0, items.findIndex((i) => i.path === section)),\n  });\n\n  return (\n    <nav className={s.rail} aria-label={ariaLabel}>\n      {header}\n      <div className={s.railList} ref={roving.rootRef}>\n        {items.map((item, index) => {\n          const open = item.depth === 0 && item.path === section;\n          const inView = item.depth === 1 && item.path === current;\n          return (\n            <button\n              key={item.path === '' ? '\\u0000root' : item.path}\n              type=\"button\"\n              className={[s.railItem, item.depth === 1 && s.railSub, open && s.railOpen, inView && s.railInView]\n                .filter(Boolean)\n                .join(' ')}\n              aria-current={open ? 'page' : inView ? 'location' : undefined}\n              tabIndex={roving.tabIndexFor(index)}\n              onKeyDown={roving.onKeyDown(index)}\n              onClick={() => activate(index)}\n            >\n              <span className={s.railName}>{item.name}</span>\n              {showCounts ? <span className={s.railCount}>{item.matches}</span> : null}\n            </button>\n          );\n        })}\n      </div>\n    </nav>\n  );\n}\n","import { useMemo, useRef, useState, type ReactNode } from 'react';\nimport { Input } from '../Input';\nimport { useScrollSpy } from '../../useScrollSpy';\nimport {\n  filterPrefSubtree,\n  isPrefLeaf,\n  prefRailItems,\n  visiblePrefSubtree,\n  type PrefGroup,\n} from './schema';\nimport { PrefRow, type PrefRenderer, type WalkCtx } from './PrefsRow';\nimport { PrefsPane } from './PrefsPane';\nimport { PrefsRail } from './PrefsRail';\nimport s from './Prefs.module.css';\n\nexport type { PrefRenderer, PrefRenderContext } from './PrefsRow';\n\n/** How a {@link PrefsForm} lays its groups out. */\nexport type PrefsLayout = 'columns' | 'rail';\n\n/** Props for {@link PrefsForm}. */\nexport interface PrefsFormProps {\n  /** Root of the schema tree. Core `ToolPrefGroup`s assign structurally. */\n  schema: PrefGroup;\n  /** Nested value tree (shape mirrors the schema). Sparse is fine —\n   *  missing leaves fall back to their schema `default`. */\n  values?: unknown;\n  /** Change callback with the leaf's dotted path. Values apply live;\n   *  there is no dirty/commit state. */\n  onChange: (path: string, value: unknown) => void;\n  /**\n   * Per-kind renderers for app-defined kinds. Entries also override the\n   * built-in kinds when keys collide. A renderer owns the control cell\n   * (the label/tooltip row chrome stays with the form, unless the leaf\n   * sets `block`); returning `null` collapses the row entirely. Unknown\n   * kinds with no renderer show a labeled placeholder instead of\n   * crashing.\n   */\n  renderers?: Record<string, PrefRenderer>;\n  /** Reveal `hidden` leaves (dev tooling). Default false. */\n  showHidden?: boolean;\n  /**\n   * `'columns'` (the default) wraps each top-level group into its own panel\n   * column. `'rail'` puts a two-level navigation rail beside one group's\n   * settings at a time — what a dialog-sized surface wants, since columns\n   * overflow sideways once there are more than two.\n   */\n  layout?: PrefsLayout;\n  /** Show a filter field that narrows the form to matching leaves. */\n  filterable?: boolean;\n  /** Rail layout: path of the open top-level group. Controlled. */\n  section?: string;\n  /** Rail layout: path of the group open before the reader picks one.\n   *  Defaults to the first in the schema. */\n  defaultSection?: string;\n  onSectionChange?: (path: string) => void;\n  className?: string;\n}\n\n/**\n * Schema-driven preferences form. Leaves render as label + control rows;\n * how the groups around them are arranged is `layout`'s to say — columns of\n * panels, or a navigation rail beside one group at a time.\n *\n * Storage-agnostic: pair with `PrefsDialog` for the modal composition, and\n * persist however the app likes via `onChange`.\n */\nexport function PrefsForm(props: PrefsFormProps) {\n  const {\n    schema,\n    values,\n    onChange,\n    renderers,\n    showHidden = false,\n    layout = 'columns',\n    filterable = false,\n    className,\n  } = props;\n  const [query, setQuery] = useState('');\n  const root = useMemo(() => {\n    const visible = visiblePrefSubtree(schema, showHidden);\n    return visible === null ? null : filterPrefSubtree(visible, query);\n  }, [schema, showHidden, query]);\n\n  const ctx: WalkCtx = { values, onChange, renderers };\n  const field = filterable ? (\n    <div className={s.filter}>\n      <Input\n        value={query}\n        onChange={setQuery}\n        aria-label={`Filter ${schema.name}`}\n        placeholder=\"Filter settings\"\n      />\n    </div>\n  ) : null;\n\n  if (layout === 'rail') {\n    return (\n      <RailLayout\n        {...props}\n        root={root}\n        ctx={ctx}\n        query={query}\n        filterField={field}\n        onClearFilter={() => setQuery('')}\n      />\n    );\n  }\n\n  return (\n    <div className={[s.columnsLayout, className].filter(Boolean).join(' ')}>\n      {field}\n      {root === null ? (\n        <NoMatches query={query} onClear={() => setQuery('')} />\n      ) : (\n        <div className={s.columns}>\n          {Object.entries(root.children).map(([key, child]) => (\n            <div key={key} className={s.column}>\n              {isPrefLeaf(child) ? (\n                // Top-level leaves are unusual but legal — give each its own\n                // column for symmetry with grouped siblings.\n                <PrefRow ctx={ctx} path={key} pref={child} />\n              ) : (\n                <GroupBody ctx={ctx} group={child} path={key} depth={0} />\n              )}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/** The rail layout's own state: which group is open, and where the pane is\n *  scrolled to within it. Split out so the columns layout runs none of it. */\nfunction RailLayout(props: PrefsFormProps & {\n  root: PrefGroup | null;\n  ctx: WalkCtx;\n  query: string;\n  filterField: ReactNode;\n  onClearFilter: () => void;\n}) {\n  const { schema, root, ctx, query, filterField, onClearFilter, className } = props;\n  const items = useMemo(() => (root === null ? [] : prefRailItems(root)), [root]);\n  const [uncontrolled, setUncontrolled] = useState(\n    () => props.defaultSection ?? '',\n  );\n  const requested = props.section ?? uncontrolled;\n  // A filter can take the open group out of the rail entirely, and a section\n  // the schema never had can arrive from a consumer's stale state. Either way\n  // the first surviving entry is what the reader should be looking at.\n  const open = items.some((i) => i.path === requested && i.depth === 0)\n    ? requested\n    : (items.find((i) => i.depth === 0)?.path ?? '');\n\n  const scrollRef = useRef<HTMLDivElement | null>(null);\n  const sectionIds = useMemo(\n    () => items.filter((i) => i.depth === 1 && i.section === open).map((i) => i.path),\n    [items, open],\n  );\n  const spy = useScrollSpy({ rootRef: scrollRef, ids: sectionIds });\n\n  const setOpen = (path: string): void => {\n    if (props.section === undefined) setUncontrolled(path);\n    props.onSectionChange?.(path);\n    // Optional-called: jsdom's elements have no `scrollTo`, and neither does\n    // a pane that is not the scrolling box in some consumer's layout.\n    scrollRef.current?.scrollTo?.({ top: 0 });\n  };\n\n  const group = root === null ? null : paneGroup(root, open, schema.name);\n\n  return (\n    <div className={[s.railLayout, className].filter(Boolean).join(' ')}>\n      <PrefsRail\n        items={items}\n        section={open}\n        current={spy.active}\n        onOpen={setOpen}\n        onScrollTo={spy.scrollTo}\n        ariaLabel={schema.name}\n        header={filterField}\n        showCounts={query.trim() !== ''}\n      />\n      {group === null ? (\n        <div className={s.pane}>\n          <NoMatches query={query} onClear={onClearFilter} />\n        </div>\n      ) : (\n        <PrefsPane ctx={ctx} group={group} path={open} scrollRef={scrollRef} />\n      )}\n    </div>\n  );\n}\n\n/**\n * The group a rail path opens. The empty path is the root's loose leaves,\n * which belong to no group of their own and are handed back as one named for\n * the schema — the rail lists them under the same name.\n */\nfunction paneGroup(root: PrefGroup, path: string, rootName: string): PrefGroup | null {\n  if (path === '') {\n    const children = Object.fromEntries(\n      Object.entries(root.children).filter(([, child]) => isPrefLeaf(child)),\n    );\n    return Object.keys(children).length === 0\n      ? null\n      : { ...root, name: rootName, children };\n  }\n  let node: PrefGroup | undefined;\n  let cursor = root;\n  for (const seg of path.split('.')) {\n    const next = cursor.children[seg];\n    if (next === undefined || isPrefLeaf(next)) return null;\n    node = next;\n    cursor = next;\n  }\n  return node ?? null;\n}\n\n/** What a filter matching nothing leaves behind. */\nfunction NoMatches({ query, onClear }: { query: string; onClear: () => void }) {\n  return (\n    <div className={s.noMatches}>\n      <p>No settings match “{query.trim()}”.</p>\n      <button type=\"button\" className={s.clearFilter} onClick={onClear}>\n        Clear filter\n      </button>\n    </div>\n  );\n}\n\nfunction GroupBody({ ctx, group, path, depth }: {\n  ctx: WalkCtx;\n  group: PrefGroup;\n  path: string;\n  depth: number;\n}) {\n  return (\n    <div className={depth === 0 ? s.panel : s.subpanel}>\n      <div className={s.groupHeader}>\n        <h3 className={s.groupTitle}>{group.name}</h3>\n        {group.description !== undefined && (\n          <p className={s.groupDesc}>{group.description}</p>\n        )}\n      </div>\n      <div className={s.rows}>\n        {Object.entries(group.children).map(([key, child]) => {\n          const childPath = `${path}.${key}`;\n          return isPrefLeaf(child) ? (\n            <PrefRow key={key} ctx={ctx} path={childPath} pref={child} />\n          ) : (\n            <GroupBody key={key} ctx={ctx} group={child} path={childPath} depth={depth + 1} />\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\n","import type { ReactNode } from 'react';\nimport { Dialog } from '../Dialog';\nimport { PrefsForm, type PrefsFormProps } from './PrefsForm';\nimport s from './Prefs.module.css';\n\n/**\n * Props for {@link PrefsDialog} — everything {@link PrefsForm} takes, plus\n * the dialog's own open state and chrome.\n */\nexport interface PrefsDialogProps extends PrefsFormProps {\n  isOpen: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Dialog heading. Defaults to the schema root's `name`. */\n  title?: ReactNode;\n  /** Extra chrome rendered at the end of the title row (e.g. a dev-mode\n   *  \"Show hidden\" switch). An action the reader acts on when they are done\n   *  — resetting, importing — belongs in `footer` instead, where a dialog's\n   *  actions live. */\n  headerExtra?: ReactNode;\n  /** Footer slot, passed through to `Dialog` — typically a reset or done\n   *  action. */\n  footer?: ReactNode;\n  /** Class applied to the dialog's modal box. */\n  dialogClassName?: string;\n}\n\n/**\n * The kit's preferences dialog: `Dialog` + `PrefsForm`. Changes apply\n * live through `onChange` — there is no OK/Cancel staging. For custom\n * placement (sidebar, popover, inline page), compose `PrefsForm`\n * directly; this wrapper is intentionally thin.\n *\n * `layout=\"rail\"` is what a dialog usually wants: the default columns wrap\n * sideways past two groups, and this box is 900px at its widest.\n */\nexport function PrefsDialog(props: PrefsDialogProps) {\n  const { isOpen, onOpenChange, title, headerExtra, footer, dialogClassName, ...form } = props;\n  const rail = form.layout === 'rail';\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onOpenChange}\n      aria-label={typeof title === 'string' ? title : form.schema.name}\n      className={dialogClassName}\n      footer={footer}\n      bodyClassName={rail ? s.railBody : undefined}\n      title={\n        headerExtra !== undefined ? (\n          <span className={s.titleRow}>\n            <span>{title ?? form.schema.name}</span>\n            {headerExtra}\n          </span>\n        ) : (\n          title ?? form.schema.name\n        )\n      }\n    >\n      <PrefsForm {...form} />\n    </Dialog>\n  );\n}\n"],"mappings":"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"}