@embedpdf/react 3.0.0-next.0

package/dist/toolbar.js

@@ -0,0 +1,505 @@
+import { useCapability, useDocumentId, useKernel, useKernelValue } from "./runtime.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
+import { CommandsToken, resolvedCommandsEqual } from "@embedpdf/plugin-commands";
+import { filterBar, normalizeBar, projectOverflow, projectStrip, solve } from "@embedpdf/core-ui";
+export * from "@embedpdf/core-ui";
+//#region src/toolbar.tsx
+const stripGroupsEqual = (a, b) => a.length === b.length && a.every((g, i) => g.id === b[i].id && g.commands.length === b[i].commands.length && g.commands.every((c, j) => resolvedCommandsEqual(c, b[i].commands[j])));
+const NO_STRIP_GROUPS = [];
+/**
+* The live projection of a bar through the command registry — <Toolbar>'s
+* un-measured sibling, for contextual strips (ChromeSchema.strips). The schema
+* declares what COULD appear; each command's `visible` derivation decides what
+* DOES; null means nothing currently applies, so `if (!view) return null` is
+* the caller's entire show/hide logic. `execute` is pre-bound to this
+* subtree's document. Reads are value-equal (resolvedCommandsEqual), so
+* consumers re-render on real change, not on every store action.
+*/
+function useStripView(bar) {
+	const commands = useCapability(CommandsToken);
+	const documentId = useDocumentId();
+	const normalized = useMemo(() => bar ? normalizeBar(bar) : null, [bar]);
+	const groups = useKernelValue(() => {
+		if (!normalized) return NO_STRIP_GROUPS;
+		const resolved = /* @__PURE__ */ new Map();
+		const visible = (id) => {
+			const cmd = commands.resolve(id, documentId ?? void 0);
+			if (cmd) resolved.set(id, cmd);
+			return cmd?.visible === true;
+		};
+		return projectStrip(normalized, visible).map((g) => ({
+			id: g.id,
+			labelKey: g.labelKey,
+			commands: g.commands.map((id) => resolved.get(id))
+		}));
+	}, stripGroupsEqual);
+	return useMemo(() => groups.length === 0 ? null : {
+		groups,
+		execute: (id) => commands.execute(id, documentId ?? void 0)
+	}, [
+		groups,
+		commands,
+		documentId
+	]);
+}
+/** Report this node's border-box width under `k`, live, via ResizeObserver. */
+function Measured({ k, onWidth, children }) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const report = () => onWidth(k, el.getBoundingClientRect().width);
+		report();
+		const observer = new ResizeObserver(report);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [k, onWidth]);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		style: {
+			display: "inline-flex",
+			flexShrink: 0
+		},
+		children
+	});
+}
+/**
+* The socket for an unregistered custom unit: a real `<slot>` element. Inside
+* the <embedpdf-viewer> shadow root the browser projects same-named light-DOM
+* children into it; anywhere else it just displays its fallback (the terminal
+* command). Measured live — the projected content lives in the HOST's world,
+* so its width can only be observed where it actually renders.
+*/
+function NativeSlotSocket({ name, k, onWidth, children }) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const report = () => onWidth(k, el.getBoundingClientRect().width);
+		report();
+		const observer = new ResizeObserver(report);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [k, onWidth]);
+	return /* @__PURE__ */ jsx("slot", {
+		ref,
+		name,
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			flexShrink: 0
+		},
+		children
+	});
+}
+const measureLayerStyle = {
+	position: "absolute",
+	left: 0,
+	top: 0,
+	height: 0,
+	overflow: "hidden",
+	visibility: "hidden",
+	pointerEvents: "none",
+	display: "flex",
+	whiteSpace: "nowrap"
+};
+const defaultRenderCommand = (cmd, variant, run) => /* @__PURE__ */ jsxs("button", {
+	type: "button",
+	onClick: run,
+	disabled: !cmd.enabled,
+	"aria-pressed": cmd.active || void 0,
+	"aria-haspopup": cmd.menu ? "menu" : void 0,
+	title: cmd.label,
+	style: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 4,
+		padding: "4px 8px",
+		whiteSpace: "nowrap",
+		background: cmd.active ? "rgba(0,0,0,0.12)" : "transparent",
+		border: "1px solid rgba(0,0,0,0.15)",
+		borderRadius: 4,
+		cursor: cmd.enabled ? "pointer" : "default",
+		opacity: cmd.enabled ? 1 : .4
+	},
+	children: [variant === "label" ? cmd.label : cmd.icon ?? cmd.label, variant === "icon+label" ? ` ${cmd.label}` : null]
+});
+const defaultRenderSeparator = () => /* @__PURE__ */ jsx("span", { style: {
+	width: 1,
+	alignSelf: "stretch",
+	background: "currentColor",
+	opacity: .2
+} });
+const defaultRenderOverflowTrigger = (isOpen, toggle) => /* @__PURE__ */ jsx("button", {
+	type: "button",
+	onClick: toggle,
+	"aria-haspopup": "menu",
+	"aria-expanded": isOpen,
+	title: "More",
+	style: {
+		display: "inline-flex",
+		alignItems: "center",
+		padding: "4px 8px",
+		border: "1px solid rgba(0,0,0,0.15)",
+		borderRadius: 4,
+		background: isOpen ? "rgba(0,0,0,0.12)" : "transparent",
+		cursor: "pointer"
+	},
+	children: "⋯"
+});
+function DefaultOverflowMenu({ view }) {
+	if (!view.isOpen) return null;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 40
+		},
+		onClick: view.close
+	}), /* @__PURE__ */ jsx("div", {
+		role: "menu",
+		style: {
+			position: "absolute",
+			right: 0,
+			top: "100%",
+			zIndex: 41,
+			minWidth: 200,
+			padding: 4,
+			background: "white",
+			border: "1px solid rgba(0,0,0,0.15)",
+			borderRadius: 6,
+			boxShadow: "0 4px 16px rgba(0,0,0,0.15)"
+		},
+		children: view.sections.map((section, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("div", { style: {
+			height: 1,
+			background: "rgba(0,0,0,0.1)",
+			margin: "4px 0"
+		} }), section.rows.map((row) => {
+			const cmd = view.resolve(row.command);
+			if (!cmd) return null;
+			const isSubmenu = row.type === "submenu";
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				role: section.role === "radio" ? "menuitemradio" : "menuitem",
+				"aria-checked": section.role === "radio" ? cmd.active : void 0,
+				disabled: !cmd.enabled,
+				onClick: () => {
+					view.execute(row.command);
+					if (!isSubmenu) view.close();
+				},
+				style: {
+					display: "flex",
+					width: "100%",
+					alignItems: "center",
+					justifyContent: "space-between",
+					gap: 16,
+					padding: "6px 8px",
+					border: "none",
+					background: "transparent",
+					cursor: cmd.enabled ? "pointer" : "default",
+					opacity: cmd.enabled ? 1 : .4,
+					whiteSpace: "nowrap"
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [cmd.active && section.role === "radio" ? "• " : "", cmd.label] }), isSubmenu ? /* @__PURE__ */ jsx("span", { children: "▸" }) : null]
+			}, row.command);
+		})] }, i))
+	})] });
+}
+function DefaultCollapsed({ view }) {
+	if (view.collapse === "select") return /* @__PURE__ */ jsx("select", {
+		value: view.commands.find((c) => c.active)?.id ?? "",
+		onChange: (e) => view.execute(e.target.value),
+		style: {
+			padding: "4px 6px",
+			borderRadius: 4
+		},
+		children: view.commands.map((c) => /* @__PURE__ */ jsx("option", {
+			value: c.id,
+			disabled: !c.enabled,
+			children: c.label
+		}, c.id))
+	});
+	return /* @__PURE__ */ jsx(CollapsedMenuButton, { view });
+}
+function CollapsedMenuButton({ view }) {
+	const [isOpen, setOpen] = useState(false);
+	const sections = [{
+		labelKey: view.labelKey,
+		role: view.role === "tabs" ? "radio" : void 0,
+		rows: view.commands.map((c) => ({
+			type: "command",
+			command: c.id
+		}))
+	}];
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			position: "relative",
+			display: "inline-flex"
+		},
+		children: [defaultRenderOverflowTrigger(isOpen, () => setOpen((o) => !o)), /* @__PURE__ */ jsx(DefaultOverflowMenu, { view: {
+			sections,
+			isOpen,
+			close: () => setOpen(false),
+			resolve: (id) => view.commands.find((c) => c.id === id) ?? null,
+			execute: view.execute
+		} })]
+	});
+}
+/** Default shed-group disclosure: a chevron opening a radio menu of the
+*  hidden children — v2's overflow-tabs-button, derived. */
+function DefaultGroupTrigger({ view }) {
+	const [isOpen, setOpen] = useState(false);
+	const someActive = view.commands.some((c) => c.active);
+	const sections = [{
+		labelKey: view.labelKey,
+		role: view.role === "tabs" ? "radio" : void 0,
+		rows: view.commands.map((c) => ({
+			type: "command",
+			command: c.id
+		}))
+	}];
+	return /* @__PURE__ */ jsxs("span", {
+		style: {
+			position: "relative",
+			display: "inline-flex"
+		},
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			"aria-haspopup": "menu",
+			"aria-expanded": isOpen,
+			title: "More",
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				padding: "4px 6px",
+				border: "1px solid rgba(0,0,0,0.15)",
+				borderRadius: 4,
+				background: isOpen || someActive ? "rgba(0,0,0,0.12)" : "transparent",
+				cursor: "pointer"
+			},
+			children: "▾"
+		}), /* @__PURE__ */ jsx(DefaultOverflowMenu, { view: {
+			sections,
+			isOpen,
+			close: () => setOpen(false),
+			resolve: (id) => view.commands.find((c) => c.id === id) ?? null,
+			execute: view.execute
+		} })]
+	});
+}
+const unitKey = (u, variant) => `u:${u.key}@${variant}`;
+const groupKey = (id) => `g:${id}`;
+const groupTriggerKey = (id) => `gt:${id}`;
+const TRIGGER_KEY = "t:";
+function Toolbar({ bar, gap = 8, separatorWidth = 1, className, style, renderCommand = defaultRenderCommand, renderCustom, renderCollapsed, renderGroupTrigger, renderSeparator = defaultRenderSeparator, renderOverflowTrigger = defaultRenderOverflowTrigger, renderOverflowMenu }) {
+	const kernel = useKernel();
+	const commands = useCapability(CommandsToken);
+	const documentId = useDocumentId();
+	const [, force] = useReducer((x) => x + 1, 0);
+	useEffect(() => kernel.subscribe(force), [kernel]);
+	const containerRef = useRef(null);
+	const [containerWidth, setContainerWidth] = useState(0);
+	useLayoutEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const observer = new ResizeObserver((entries) => {
+			const w = entries[entries.length - 1]?.contentRect.width;
+			if (w !== void 0) setContainerWidth((prev) => Math.abs(prev - w) > .5 ? w : prev);
+		});
+		observer.observe(el);
+		setContainerWidth(el.clientWidth);
+		return () => observer.disconnect();
+	}, []);
+	const widthsRef = useRef(/* @__PURE__ */ new Map());
+	const [, bumpMeasureVersion] = useReducer((x) => x + 1, 0);
+	const onWidth = useMemo(() => (key, width) => {
+		const prev = widthsRef.current.get(key);
+		if (prev !== void 0 && Math.abs(prev - width) <= .5) return;
+		widthsRef.current.set(key, width);
+		bumpMeasureVersion();
+	}, []);
+	const resolveCmd = (id) => commands.resolve(id, documentId ?? void 0);
+	const executeCmd = (id) => commands.execute(id, documentId ?? void 0);
+	const commandOf = (u) => u.kind === "command" ? u.command : u.terminal;
+	const visibleBar = filterBar(useMemo(() => normalizeBar(bar), [bar]), (u) => resolveCmd(commandOf(u))?.visible === true);
+	const fit = solve(visibleBar, {
+		unit: (key, variant) => widthsRef.current.get(`u:${key}@${variant}`),
+		groupCollapsed: (id) => widthsRef.current.get(groupKey(id)),
+		groupTrigger: (id) => widthsRef.current.get(groupTriggerKey(id)),
+		overflowTrigger: widthsRef.current.get(TRIGGER_KEY) ?? 32,
+		gap,
+		separator: separatorWidth + gap
+	}, containerWidth);
+	const overflowSections = projectOverflow(visibleBar, fit, (id) => commands.menuTarget(id));
+	const [overflowOpen, setOverflowOpen] = useState(false);
+	useEffect(() => {
+		if (!fit.hasOverflow) setOverflowOpen(false);
+	}, [fit.hasOverflow]);
+	/** External = custom unit with no registered renderer → native socket,
+	*  live-measured (it must NOT appear in the measurement layer: only the
+	*  first same-named <slot> in tree order receives the projected nodes). */
+	const isExternalSlot = (u) => u.kind === "custom" && !renderCustom?.[u.slot];
+	const renderUnitAt = (u, variant, layer) => {
+		if (u.kind === "custom") {
+			const registered = renderCustom?.[u.slot];
+			if (registered) {
+				const custom = registered(variant, {
+					layer,
+					measure: (width) => onWidth(unitKey(u, variant), width)
+				});
+				if (custom !== void 0) return custom;
+			} else if (layer === "live") {
+				const cmd = resolveCmd(u.terminal);
+				return /* @__PURE__ */ jsx(NativeSlotSocket, {
+					name: u.slot,
+					k: unitKey(u, variant),
+					onWidth,
+					children: cmd ? renderCommand(cmd, "icon", () => executeCmd(u.terminal)) : null
+				});
+			} else return null;
+			const cmd = resolveCmd(u.terminal);
+			return cmd ? renderCommand(cmd, "icon", () => executeCmd(u.terminal)) : null;
+		}
+		const cmd = resolveCmd(u.command);
+		if (!cmd) return renderCommand({
+			id: u.command,
+			label: u.command,
+			shortcuts: [],
+			enabled: false,
+			active: false,
+			visible: true,
+			categories: []
+		}, variant, () => {});
+		return renderCommand(cmd, variant, () => executeCmd(u.command));
+	};
+	const collapsedView = (g) => ({
+		id: g.id,
+		labelKey: g.labelKey,
+		collapse: g.collapse ?? "menu",
+		role: g.role,
+		commands: g.units.map((u) => resolveCmd(commandOf(u))).filter((c) => c !== null && c.visible),
+		execute: executeCmd
+	});
+	const renderCollapsedGroup = (g) => renderCollapsed ? renderCollapsed(collapsedView(g)) : /* @__PURE__ */ jsx(DefaultCollapsed, { view: collapsedView(g) });
+	/** The disclosure view: shed children for the live trigger; the WHOLE group
+	*  for the measured trigger, so width is budgeted at its fullest content. */
+	const disclosureView = (g, allChildren) => ({
+		id: g.id,
+		labelKey: g.labelKey,
+		role: g.role,
+		commands: g.units.filter((u) => allChildren || fit.units.get(u.key)?.kind === "shed").map((u) => resolveCmd(commandOf(u))).filter((c) => c !== null && c.visible),
+		execute: executeCmd
+	});
+	const renderDisclosure = (g, allChildren) => renderGroupTrigger ? renderGroupTrigger(disclosureView(g, allChildren)) : /* @__PURE__ */ jsx(DefaultGroupTrigger, { view: disclosureView(g, allChildren) });
+	const renderLiveGroup = (g) => {
+		const assignment = fit.groups.get(g.id);
+		if (!assignment || assignment.overflowed) return [];
+		if (assignment.collapsed) return [/* @__PURE__ */ jsx(React.Fragment, { children: renderCollapsedGroup(g) }, g.id)];
+		const nodes = [];
+		for (const u of g.units) {
+			const a = fit.units.get(u.key);
+			if (a?.kind !== "variant") continue;
+			nodes.push(/* @__PURE__ */ jsx(React.Fragment, { children: renderUnitAt(u, a.variant, "live") }, u.key));
+		}
+		if (assignment.shedCount > 0) nodes.push(/* @__PURE__ */ jsx(React.Fragment, { children: renderDisclosure(g, false) }, `${g.id}::trigger`));
+		return nodes.length ? [/* @__PURE__ */ jsx(React.Fragment, { children: nodes }, g.id)] : [];
+	};
+	const renderLiveSection = (section) => {
+		if (!section) return null;
+		return section.groups.map((g) => ({
+			id: g.id,
+			nodes: renderLiveGroup(g)
+		})).filter((g) => g.nodes.length > 0).map((g, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i > 0 && renderSeparator(), g.nodes] }, g.id));
+	};
+	const sectionByName = (name) => visibleBar.sections.find((s) => s.name === name);
+	/**
+	* Segment layout — v2's spacer model, natively. The center segment carries
+	* auto margins: it BALANCES in the leftover space (true center when the
+	* flanks are symmetric) and yields when they aren't, collapsing to zero
+	* before anything can overlap. The container itself has NO gap — segments
+	* space themselves — so the solver's global budget (sum of unit widths +
+	* per-unit gaps) is exactly the layout's minimum width: what the solver
+	* says fits, fits. Its cross-segment gap allowance (≤ 2×gap) becomes slack
+	* the auto margins absorb, keeping ≥ gap between segments at the floor.
+	* Segments never grow or shrink: fit is the SOLVER's job, not flexbox's.
+	*/
+	const sectionStyle = (position) => ({
+		display: "flex",
+		alignItems: "center",
+		gap,
+		flex: "0 0 auto",
+		...position === "center" ? {
+			marginLeft: "auto",
+			marginRight: "auto"
+		} : null
+	});
+	const overflowView = {
+		sections: overflowSections,
+		isOpen: overflowOpen,
+		close: () => setOverflowOpen(false),
+		resolve: resolveCmd,
+		execute: executeCmd
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className,
+		style: {
+			position: "relative",
+			display: "flex",
+			alignItems: "center",
+			...style
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: sectionStyle("start"),
+				children: renderLiveSection(sectionByName("start"))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: sectionStyle("center"),
+				children: renderLiveSection(sectionByName("center"))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: sectionStyle("end"),
+				children: [renderLiveSection(sectionByName("end")), fit.hasOverflow && /* @__PURE__ */ jsxs("span", {
+					style: {
+						position: "relative",
+						display: "inline-flex"
+					},
+					children: [renderOverflowTrigger(overflowOpen, () => setOverflowOpen((o) => !o)), renderOverflowMenu ? renderOverflowMenu(overflowView) : /* @__PURE__ */ jsx(DefaultOverflowMenu, { view: overflowView })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": true,
+				style: measureLayerStyle,
+				children: [visibleBar.sections.flatMap((s) => s.groups.flatMap((g) => [
+					...g.units.filter((u) => !isExternalSlot(u)).flatMap((u) => u.variants.map((variant) => /* @__PURE__ */ jsx(Measured, {
+						k: unitKey(u, variant),
+						onWidth,
+						children: renderUnitAt(u, variant, "measure")
+					}, unitKey(u, variant)))),
+					...g.collapse ? [/* @__PURE__ */ jsx(Measured, {
+						k: groupKey(g.id),
+						onWidth,
+						children: renderCollapsedGroup(g)
+					}, groupKey(g.id))] : [],
+					...g.shed ? [/* @__PURE__ */ jsx(Measured, {
+						k: groupTriggerKey(g.id),
+						onWidth,
+						children: renderDisclosure(g, true)
+					}, groupTriggerKey(g.id))] : []
+				])), /* @__PURE__ */ jsx(Measured, {
+					k: TRIGGER_KEY,
+					onWidth,
+					children: renderOverflowTrigger(false, () => {})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { Toolbar, useStripView };
+
+//# sourceMappingURL=toolbar.js.map

package/dist/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.js","names":[],"sources":["../src/toolbar.tsx"],"sourcesContent":["/**\n * The headless <Toolbar> — where measurement meets the pure solver.\n *\n * The schema is structure-only; what fits is OBSERVED, not configured:\n *\n *   1. a hidden measurement layer renders every unit in every variant (plus\n *      collapsed group forms and the overflow trigger), each wrapped in a\n *      ResizeObserver — so locale flips, font loads, browser zoom, and\n *      embedder CSS all re-measure themselves with zero handling code;\n *   2. ui-core's solve() assigns each unit a variant / collapsed / overflow —\n *      pure, deterministic, tested in isolation;\n *   3. the live row renders the assignment; the overflow menu is DERIVED\n *      (projectOverflow) — the complement of the visible set, never authored.\n *\n * Rendering is render-prop driven with functional defaults: the app owns the\n * pixels, this component owns the physics.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/core-ui';\nimport * as React from 'react';\nimport { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from 'react';\nimport { filterBar, normalizeBar, projectOverflow, projectStrip, solve } from '@embedpdf/core-ui';\nimport type {\n  BarSchema,\n  FitMetrics,\n  NormalizedGroup,\n  NormalizedSection,\n  NormalizedUnit,\n  OverflowSection,\n} from '@embedpdf/core-ui';\nimport { CommandsToken, resolvedCommandsEqual } from '@embedpdf/plugin-commands';\nimport type { ResolvedCommand } from '@embedpdf/plugin-commands';\nimport { useCapability, useDocumentId, useKernel, useKernelValue } from './runtime';\n\n// ── public render-prop contracts ─────────────────────────────────────────────\n\nexport interface CollapsedGroupView {\n  readonly id: string;\n  readonly labelKey?: string;\n  readonly collapse: 'menu' | 'select';\n  readonly role: 'buttons' | 'tabs';\n  /** The group's commands (custom items via their terminal), resolved live. */\n  readonly commands: readonly ResolvedCommand[];\n  execute(id: string): void;\n}\n\nexport interface OverflowMenuView {\n  readonly sections: readonly OverflowSection[];\n  readonly isOpen: boolean;\n  close(): void;\n  resolve(id: string): ResolvedCommand | null;\n  execute(id: string): void;\n}\n\n/**\n * A shed group's disclosure — the derived trigger rendered INSIDE the group\n * (v2's overflow-tabs-button). `commands` is what sits behind the trigger:\n * the shed children in bar order, resolved live. In the measurement layer the\n * trigger is measured with the FULL group as content, so a count-dependent\n * trigger (e.g. a \"+3\" badge) is budgeted at its widest form.\n */\nexport interface GroupDisclosureView {\n  readonly id: string;\n  readonly labelKey?: string;\n  readonly role: 'buttons' | 'tabs';\n  readonly commands: readonly ResolvedCommand[];\n  execute(id: string): void;\n}\n\n// ── the strip view — a bar projected through the registry, live ──────────────\n\nexport interface StripViewGroup {\n  readonly id: string;\n  readonly labelKey?: string;\n  /** Visible commands, bar order. Groups are separator boundaries. */\n  readonly commands: readonly ResolvedCommand[];\n}\n\n/** A contextual strip, resolved: only visible commands, only non-empty groups. */\nexport interface StripView {\n  readonly groups: readonly StripViewGroup[];\n  execute(id: string): void;\n}\n\nconst stripGroupsEqual = (a: readonly StripViewGroup[], b: readonly StripViewGroup[]): boolean =>\n  a.length === b.length &&\n  a.every(\n    (g, i) =>\n      g.id === b[i].id &&\n      g.commands.length === b[i].commands.length &&\n      g.commands.every((c, j) => resolvedCommandsEqual(c, b[i].commands[j])),\n  );\n\nconst NO_STRIP_GROUPS: readonly StripViewGroup[] = [];\n\n/**\n * The live projection of a bar through the command registry — <Toolbar>'s\n * un-measured sibling, for contextual strips (ChromeSchema.strips). The schema\n * declares what COULD appear; each command's `visible` derivation decides what\n * DOES; null means nothing currently applies, so `if (!view) return null` is\n * the caller's entire show/hide logic. `execute` is pre-bound to this\n * subtree's document. Reads are value-equal (resolvedCommandsEqual), so\n * consumers re-render on real change, not on every store action.\n */\nexport function useStripView(bar: BarSchema | undefined): StripView | null {\n  const commands = useCapability(CommandsToken);\n  const documentId = useDocumentId();\n  const normalized = useMemo(() => (bar ? normalizeBar(bar) : null), [bar]);\n  const groups = useKernelValue(() => {\n    if (!normalized) return NO_STRIP_GROUPS;\n    const resolved = new Map<string, ResolvedCommand>();\n    const visible = (id: string) => {\n      const cmd = commands.resolve(id, documentId ?? undefined);\n      if (cmd) resolved.set(id, cmd);\n      return cmd?.visible === true;\n    };\n    return projectStrip(normalized, visible).map((g) => ({\n      id: g.id,\n      labelKey: g.labelKey,\n      commands: g.commands.map((id) => resolved.get(id)!),\n    }));\n  }, stripGroupsEqual);\n  return useMemo(\n    () =>\n      groups.length === 0\n        ? null\n        : { groups, execute: (id: string) => commands.execute(id, documentId ?? undefined) },\n    [groups, commands, documentId],\n  );\n}\n\nexport interface ToolbarProps {\n  bar: BarSchema;\n  /** Px between adjacent items (CSS flex gap; the solver budgets the same number). */\n  gap?: number;\n  /** Width of the separator ELEMENT your renderSeparator draws. Default 1. */\n  separatorWidth?: number;\n  className?: string;\n  style?: React.CSSProperties;\n  /** A command button at a given variant. Default: a plain <button>. */\n  renderCommand?: (cmd: ResolvedCommand, variant: string, run: () => void) => React.ReactNode;\n  /**\n   * Renderers for custom slots, per named variant. A custom unit with NO\n   * entry here renders as a native `<slot name={slot}>` socket with its\n   * terminal command as fallback content: in light DOM that displays the\n   * fallback (today's behavior); inside a shadow root the host's light-DOM\n   * children project into it — the children-as-slots contract. Sockets are\n   * measured LIVE (they can't be duplicated into the measurement layer:\n   * only the first same-named slot in tree order gets the projected nodes).\n   */\n  renderCustom?: Record<string, (variant: string, ctx: CustomSlotCtx) => React.ReactNode>;\n  /** A group in its collapsed form. Default: <select> for 'select', menu button for 'menu'. */\n  renderCollapsed?: (view: CollapsedGroupView) => React.ReactNode;\n  /** A shed group's disclosure trigger (+ its popover — the renderer owns the\n   *  open state). Default: a chevron button opening a radio menu. */\n  renderGroupTrigger?: (view: GroupDisclosureView) => React.ReactNode;\n  /** Derived separator between adjacent visible groups. Default: a 1px line. */\n  renderSeparator?: () => React.ReactNode;\n  renderOverflowTrigger?: (isOpen: boolean, toggle: () => void) => React.ReactNode;\n  /** The derived overflow menu. Default: a minimal popover. */\n  renderOverflowMenu?: (view: OverflowMenuView) => React.ReactNode;\n}\n\n/** Passed to custom-slot renderers alongside the variant. */\nexport interface CustomSlotCtx {\n  /** 'live' = the visible row; 'measure' = the hidden measurement layer. */\n  layer: 'live' | 'measure';\n  /** Report this unit's width to the solver — for content the measurement\n   *  layer can't duplicate. Identity is NOT stable across renders; capture\n   *  via ref if used in an effect. */\n  measure: (width: number) => void;\n}\n\n// ── measurement ───────────────────────────────────────────────────────────────\n\n/** Report this node's border-box width under `k`, live, via ResizeObserver. */\nfunction Measured({\n  k,\n  onWidth,\n  children,\n}: {\n  k: string;\n  onWidth: (key: string, width: number) => void;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const report = () => onWidth(k, el.getBoundingClientRect().width);\n    report();\n    const observer = new ResizeObserver(report);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [k, onWidth]);\n  return (\n    <span ref={ref} style={{ display: 'inline-flex', flexShrink: 0 }}>\n      {children}\n    </span>\n  );\n}\n\n/**\n * The socket for an unregistered custom unit: a real `<slot>` element. Inside\n * the <embedpdf-viewer> shadow root the browser projects same-named light-DOM\n * children into it; anywhere else it just displays its fallback (the terminal\n * command). Measured live — the projected content lives in the HOST's world,\n * so its width can only be observed where it actually renders.\n */\nfunction NativeSlotSocket({\n  name,\n  k,\n  onWidth,\n  children,\n}: {\n  name: string;\n  k: string;\n  onWidth: (key: string, width: number) => void;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSlotElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const report = () => onWidth(k, el.getBoundingClientRect().width);\n    report();\n    // Projection changes (a child slotted in/out) resize the socket's\n    // inline-flex box, so one observer covers both content and assignment.\n    const observer = new ResizeObserver(report);\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [k, onWidth]);\n  return (\n    <slot\n      ref={ref}\n      name={name}\n      style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}\n    >\n      {children}\n    </slot>\n  );\n}\n\nconst measureLayerStyle: React.CSSProperties = {\n  position: 'absolute',\n  left: 0,\n  top: 0,\n  height: 0,\n  overflow: 'hidden',\n  visibility: 'hidden',\n  pointerEvents: 'none',\n  display: 'flex',\n  whiteSpace: 'nowrap',\n};\n\n// ── defaults (functional, unstyled-ish; products replace them) ───────────────\n\nconst defaultRenderCommand = (\n  cmd: ResolvedCommand,\n  variant: string,\n  run: () => void,\n): React.ReactNode => (\n  <button\n    type=\"button\"\n    onClick={run}\n    disabled={!cmd.enabled}\n    aria-pressed={cmd.active || undefined}\n    aria-haspopup={cmd.menu ? 'menu' : undefined}\n    title={cmd.label}\n    style={{\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: 4,\n      padding: '4px 8px',\n      whiteSpace: 'nowrap',\n      background: cmd.active ? 'rgba(0,0,0,0.12)' : 'transparent',\n      border: '1px solid rgba(0,0,0,0.15)',\n      borderRadius: 4,\n      cursor: cmd.enabled ? 'pointer' : 'default',\n      opacity: cmd.enabled ? 1 : 0.4,\n    }}\n  >\n    {variant === 'label' ? cmd.label : (cmd.icon ?? cmd.label)}\n    {variant === 'icon+label' ? ` ${cmd.label}` : null}\n  </button>\n);\n\nconst defaultRenderSeparator = (): React.ReactNode => (\n  <span style={{ width: 1, alignSelf: 'stretch', background: 'currentColor', opacity: 0.2 }} />\n);\n\nconst defaultRenderOverflowTrigger = (isOpen: boolean, toggle: () => void): React.ReactNode => (\n  <button\n    type=\"button\"\n    onClick={toggle}\n    aria-haspopup=\"menu\"\n    aria-expanded={isOpen}\n    title=\"More\"\n    style={{\n      display: 'inline-flex',\n      alignItems: 'center',\n      padding: '4px 8px',\n      border: '1px solid rgba(0,0,0,0.15)',\n      borderRadius: 4,\n      background: isOpen ? 'rgba(0,0,0,0.12)' : 'transparent',\n      cursor: 'pointer',\n    }}\n  >\n    ⋯\n  </button>\n);\n\nfunction DefaultOverflowMenu({ view }: { view: OverflowMenuView }) {\n  if (!view.isOpen) return null;\n  return (\n    <>\n      <div style={{ position: 'fixed', inset: 0, zIndex: 40 }} onClick={view.close} />\n      <div\n        role=\"menu\"\n        style={{\n          position: 'absolute',\n          right: 0,\n          top: '100%',\n          zIndex: 41,\n          minWidth: 200,\n          padding: 4,\n          background: 'white',\n          border: '1px solid rgba(0,0,0,0.15)',\n          borderRadius: 6,\n          boxShadow: '0 4px 16px rgba(0,0,0,0.15)',\n        }}\n      >\n        {view.sections.map((section, i) => (\n          <React.Fragment key={i}>\n            {i > 0 && <div style={{ height: 1, background: 'rgba(0,0,0,0.1)', margin: '4px 0' }} />}\n            {section.rows.map((row) => {\n              const cmd = view.resolve(row.command);\n              if (!cmd) return null;\n              const isSubmenu = row.type === 'submenu';\n              return (\n                <button\n                  key={row.command}\n                  type=\"button\"\n                  role={section.role === 'radio' ? 'menuitemradio' : 'menuitem'}\n                  aria-checked={section.role === 'radio' ? cmd.active : undefined}\n                  disabled={!cmd.enabled}\n                  onClick={() => {\n                    view.execute(row.command);\n                    if (!isSubmenu) view.close();\n                  }}\n                  style={{\n                    display: 'flex',\n                    width: '100%',\n                    alignItems: 'center',\n                    justifyContent: 'space-between',\n                    gap: 16,\n                    padding: '6px 8px',\n                    border: 'none',\n                    background: 'transparent',\n                    cursor: cmd.enabled ? 'pointer' : 'default',\n                    opacity: cmd.enabled ? 1 : 0.4,\n                    whiteSpace: 'nowrap',\n                  }}\n                >\n                  <span>\n                    {cmd.active && section.role === 'radio' ? '• ' : ''}\n                    {cmd.label}\n                  </span>\n                  {isSubmenu ? <span>▸</span> : null}\n                </button>\n              );\n            })}\n          </React.Fragment>\n        ))}\n      </div>\n    </>\n  );\n}\n\nfunction DefaultCollapsed({ view }: { view: CollapsedGroupView }) {\n  if (view.collapse === 'select') {\n    const active = view.commands.find((c) => c.active);\n    return (\n      <select\n        value={active?.id ?? ''}\n        onChange={(e) => view.execute(e.target.value)}\n        style={{ padding: '4px 6px', borderRadius: 4 }}\n      >\n        {view.commands.map((c) => (\n          <option key={c.id} value={c.id} disabled={!c.enabled}>\n            {c.label}\n          </option>\n        ))}\n      </select>\n    );\n  }\n  // 'menu': reuse the overflow popover, scoped to this group's commands.\n  return <CollapsedMenuButton view={view} />;\n}\n\nfunction CollapsedMenuButton({ view }: { view: CollapsedGroupView }) {\n  const [isOpen, setOpen] = useState(false);\n  const sections: OverflowSection[] = [\n    {\n      labelKey: view.labelKey,\n      role: view.role === 'tabs' ? 'radio' : undefined,\n      rows: view.commands.map((c) => ({ type: 'command' as const, command: c.id })),\n    },\n  ];\n  return (\n    <span style={{ position: 'relative', display: 'inline-flex' }}>\n      {defaultRenderOverflowTrigger(isOpen, () => setOpen((o) => !o))}\n      <DefaultOverflowMenu\n        view={{\n          sections,\n          isOpen,\n          close: () => setOpen(false),\n          resolve: (id) => view.commands.find((c) => c.id === id) ?? null,\n          execute: view.execute,\n        }}\n      />\n    </span>\n  );\n}\n\n/** Default shed-group disclosure: a chevron opening a radio menu of the\n *  hidden children — v2's overflow-tabs-button, derived. */\nfunction DefaultGroupTrigger({ view }: { view: GroupDisclosureView }) {\n  const [isOpen, setOpen] = useState(false);\n  const someActive = view.commands.some((c) => c.active);\n  const sections: OverflowSection[] = [\n    {\n      labelKey: view.labelKey,\n      role: view.role === 'tabs' ? 'radio' : undefined,\n      rows: view.commands.map((c) => ({ type: 'command' as const, command: c.id })),\n    },\n  ];\n  return (\n    <span style={{ position: 'relative', display: 'inline-flex' }}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((o) => !o)}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        title=\"More\"\n        style={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          padding: '4px 6px',\n          border: '1px solid rgba(0,0,0,0.15)',\n          borderRadius: 4,\n          // hint that the active item is hiding in here\n          background: isOpen || someActive ? 'rgba(0,0,0,0.12)' : 'transparent',\n          cursor: 'pointer',\n        }}\n      >\n        ▾\n      </button>\n      <DefaultOverflowMenu\n        view={{\n          sections,\n          isOpen,\n          close: () => setOpen(false),\n          resolve: (id) => view.commands.find((c) => c.id === id) ?? null,\n          execute: view.execute,\n        }}\n      />\n    </span>\n  );\n}\n\n// ── the toolbar ───────────────────────────────────────────────────────────────\n\nconst unitKey = (u: NormalizedUnit, variant: string) => `u:${u.key}@${variant}`;\nconst groupKey = (id: string) => `g:${id}`;\nconst groupTriggerKey = (id: string) => `gt:${id}`;\nconst TRIGGER_KEY = 't:';\n\nexport function Toolbar({\n  bar,\n  gap = 8,\n  separatorWidth = 1,\n  className,\n  style,\n  renderCommand = defaultRenderCommand,\n  renderCustom,\n  renderCollapsed,\n  renderGroupTrigger,\n  renderSeparator = defaultRenderSeparator,\n  renderOverflowTrigger = defaultRenderOverflowTrigger,\n  renderOverflowMenu,\n}: ToolbarProps) {\n  const kernel = useKernel();\n  const commands = useCapability(CommandsToken);\n  const documentId = useDocumentId();\n\n  // Command state is derived-on-read; re-render on the kernel's change stream\n  // so labels/active/visible (and thus the hidden layer's measurements) stay\n  // live. The toolbar is small — a per-action render is the simple, correct\n  // baseline.\n  const [, force] = useReducer((x: number) => x + 1, 0);\n  useEffect(() => kernel.subscribe(force), [kernel]);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [containerWidth, setContainerWidth] = useState(0);\n  useLayoutEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const observer = new ResizeObserver((entries) => {\n      const w = entries[entries.length - 1]?.contentRect.width;\n      if (w !== undefined) setContainerWidth((prev) => (Math.abs(prev - w) > 0.5 ? w : prev));\n    });\n    observer.observe(el);\n    setContainerWidth(el.clientWidth);\n    return () => observer.disconnect();\n  }, []);\n\n  const widthsRef = useRef(new Map<string, number>());\n  const [, bumpMeasureVersion] = useReducer((x: number) => x + 1, 0);\n  const onWidth = useMemo(\n    () => (key: string, width: number) => {\n      const prev = widthsRef.current.get(key);\n      if (prev !== undefined && Math.abs(prev - width) <= 0.5) return;\n      widthsRef.current.set(key, width);\n      bumpMeasureVersion();\n    },\n    [],\n  );\n\n  const resolveCmd = (id: string): ResolvedCommand | null =>\n    commands.resolve(id, documentId ?? undefined);\n  const executeCmd = (id: string) => commands.execute(id, documentId ?? undefined);\n  const commandOf = (u: NormalizedUnit) => (u.kind === 'command' ? u.command : u.terminal);\n\n  // Structure → visible structure → fit. Cheap enough to run per render; all\n  // heavy lifting is O(items), and items is ~dozens.\n  const normalized = useMemo(() => normalizeBar(bar), [bar]);\n  // `=== true` and not `!== false`: an UNREGISTERED command resolves to null,\n  // and a unit the registry can't name must not render or consume budget —\n  // the schema validator's dev warning is the feedback channel, not raw text\n  // in the toolbar.\n  const visibleBar = filterBar(normalized, (u) => resolveCmd(commandOf(u))?.visible === true);\n  const metrics: FitMetrics = {\n    unit: (key, variant) => widthsRef.current.get(`u:${key}@${variant}`),\n    groupCollapsed: (id) => widthsRef.current.get(groupKey(id)),\n    groupTrigger: (id) => widthsRef.current.get(groupTriggerKey(id)),\n    overflowTrigger: widthsRef.current.get(TRIGGER_KEY) ?? 32,\n    gap,\n    // The separator is one extra flex child: its element width plus one flex gap.\n    separator: separatorWidth + gap,\n  };\n  const fit = solve(visibleBar, metrics, containerWidth);\n  const overflowSections = projectOverflow(visibleBar, fit, (id) => commands.menuTarget(id));\n\n  const [overflowOpen, setOverflowOpen] = useState(false);\n  useEffect(() => {\n    if (!fit.hasOverflow) setOverflowOpen(false);\n  }, [fit.hasOverflow]);\n\n  /** External = custom unit with no registered renderer → native socket,\n   *  live-measured (it must NOT appear in the measurement layer: only the\n   *  first same-named <slot> in tree order receives the projected nodes). */\n  const isExternalSlot = (u: NormalizedUnit): boolean =>\n    u.kind === 'custom' && !renderCustom?.[u.slot];\n\n  // ── unit / group rendering (shared by live row and measure layer) ──────────\n  const renderUnitAt = (\n    u: NormalizedUnit,\n    variant: string,\n    layer: 'live' | 'measure',\n  ): React.ReactNode => {\n    if (u.kind === 'custom') {\n      const registered = renderCustom?.[u.slot];\n      if (registered) {\n        const custom = registered(variant, {\n          layer,\n          measure: (width) => onWidth(unitKey(u, variant), width),\n        });\n        if (custom !== undefined) return custom;\n      } else if (layer === 'live') {\n        const cmd = resolveCmd(u.terminal);\n        return (\n          <NativeSlotSocket name={u.slot} k={unitKey(u, variant)} onWidth={onWidth}>\n            {cmd ? renderCommand(cmd, 'icon', () => executeCmd(u.terminal)) : null}\n          </NativeSlotSocket>\n        );\n      } else {\n        return null;\n      }\n      const cmd = resolveCmd(u.terminal);\n      return cmd ? renderCommand(cmd, 'icon', () => executeCmd(u.terminal)) : null;\n    }\n    const cmd = resolveCmd(u.command);\n    if (!cmd)\n      return renderCommand(\n        {\n          id: u.command,\n          label: u.command,\n          shortcuts: [],\n          enabled: false,\n          active: false,\n          visible: true,\n          categories: [],\n        },\n        variant,\n        () => {},\n      );\n    return renderCommand(cmd, variant, () => executeCmd(u.command));\n  };\n\n  const collapsedView = (g: NormalizedGroup): CollapsedGroupView => ({\n    id: g.id,\n    labelKey: g.labelKey,\n    collapse: g.collapse ?? 'menu',\n    role: g.role,\n    commands: g.units\n      .map((u) => resolveCmd(commandOf(u)))\n      .filter((c): c is ResolvedCommand => c !== null && c.visible),\n    execute: executeCmd,\n  });\n\n  const renderCollapsedGroup = (g: NormalizedGroup): React.ReactNode =>\n    renderCollapsed ? (\n      renderCollapsed(collapsedView(g))\n    ) : (\n      <DefaultCollapsed view={collapsedView(g)} />\n    );\n\n  /** The disclosure view: shed children for the live trigger; the WHOLE group\n   *  for the measured trigger, so width is budgeted at its fullest content. */\n  const disclosureView = (g: NormalizedGroup, allChildren: boolean): GroupDisclosureView => ({\n    id: g.id,\n    labelKey: g.labelKey,\n    role: g.role,\n    commands: g.units\n      .filter((u) => allChildren || fit.units.get(u.key)?.kind === 'shed')\n      .map((u) => resolveCmd(commandOf(u)))\n      .filter((c): c is ResolvedCommand => c !== null && c.visible),\n    execute: executeCmd,\n  });\n\n  const renderDisclosure = (g: NormalizedGroup, allChildren: boolean): React.ReactNode =>\n    renderGroupTrigger ? (\n      renderGroupTrigger(disclosureView(g, allChildren))\n    ) : (\n      <DefaultGroupTrigger view={disclosureView(g, allChildren)} />\n    );\n\n  const renderLiveGroup = (g: NormalizedGroup): React.ReactNode[] => {\n    const assignment = fit.groups.get(g.id);\n    if (!assignment || assignment.overflowed) return [];\n    if (assignment.collapsed)\n      return [<React.Fragment key={g.id}>{renderCollapsedGroup(g)}</React.Fragment>];\n    const nodes: React.ReactNode[] = [];\n    for (const u of g.units) {\n      const a = fit.units.get(u.key);\n      if (a?.kind !== 'variant') continue;\n      nodes.push(<React.Fragment key={u.key}>{renderUnitAt(u, a.variant, 'live')}</React.Fragment>);\n    }\n    // The derived group-local disclosure (v2's overflow-tabs-button).\n    if (assignment.shedCount > 0) {\n      nodes.push(\n        <React.Fragment key={`${g.id}::trigger`}>{renderDisclosure(g, false)}</React.Fragment>,\n      );\n    }\n    return nodes.length ? [<React.Fragment key={g.id}>{nodes}</React.Fragment>] : [];\n  };\n\n  const renderLiveSection = (section: NormalizedSection | undefined): React.ReactNode => {\n    if (!section) return null;\n    const rendered = section.groups\n      .map((g) => ({ id: g.id, nodes: renderLiveGroup(g) }))\n      .filter((g) => g.nodes.length > 0);\n    return rendered.map((g, i) => (\n      <React.Fragment key={g.id}>\n        {i > 0 && renderSeparator()}\n        {g.nodes}\n      </React.Fragment>\n    ));\n  };\n\n  const sectionByName = (name: 'start' | 'center' | 'end') =>\n    visibleBar.sections.find((s) => s.name === name);\n\n  /**\n   * Segment layout — v2's spacer model, natively. The center segment carries\n   * auto margins: it BALANCES in the leftover space (true center when the\n   * flanks are symmetric) and yields when they aren't, collapsing to zero\n   * before anything can overlap. The container itself has NO gap — segments\n   * space themselves — so the solver's global budget (sum of unit widths +\n   * per-unit gaps) is exactly the layout's minimum width: what the solver\n   * says fits, fits. Its cross-segment gap allowance (≤ 2×gap) becomes slack\n   * the auto margins absorb, keeping ≥ gap between segments at the floor.\n   * Segments never grow or shrink: fit is the SOLVER's job, not flexbox's.\n   */\n  const sectionStyle = (position: 'start' | 'center' | 'end'): React.CSSProperties => ({\n    display: 'flex',\n    alignItems: 'center',\n    gap,\n    flex: '0 0 auto',\n    ...(position === 'center' ? { marginLeft: 'auto', marginRight: 'auto' } : null),\n  });\n\n  const overflowView: OverflowMenuView = {\n    sections: overflowSections,\n    isOpen: overflowOpen,\n    close: () => setOverflowOpen(false),\n    resolve: resolveCmd,\n    execute: executeCmd,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={{ position: 'relative', display: 'flex', alignItems: 'center', ...style }}\n    >\n      <div style={sectionStyle('start')}>{renderLiveSection(sectionByName('start'))}</div>\n      <div style={sectionStyle('center')}>{renderLiveSection(sectionByName('center'))}</div>\n      <div style={sectionStyle('end')}>\n        {renderLiveSection(sectionByName('end'))}\n        {fit.hasOverflow && (\n          <span style={{ position: 'relative', display: 'inline-flex' }}>\n            {renderOverflowTrigger(overflowOpen, () => setOverflowOpen((o) => !o))}\n            {renderOverflowMenu ? (\n              renderOverflowMenu(overflowView)\n            ) : (\n              <DefaultOverflowMenu view={overflowView} />\n            )}\n          </span>\n        )}\n      </div>\n\n      {/* The measurement layer: every unit in every variant, every collapsed\n          group form, and the trigger — hidden, inert, observed. Text reflow\n          (locale, fonts, zoom) fires the observers; no change-handling code. */}\n      <div aria-hidden style={measureLayerStyle}>\n        {visibleBar.sections.flatMap((s) =>\n          s.groups.flatMap((g) => [\n            // External sockets are excluded: they are live-measured, and a\n            // duplicate <slot> here would steal the projection from the row.\n            ...g.units\n              .filter((u) => !isExternalSlot(u))\n              .flatMap((u) =>\n                u.variants.map((variant) => (\n                  <Measured key={unitKey(u, variant)} k={unitKey(u, variant)} onWidth={onWidth}>\n                    {renderUnitAt(u, variant, 'measure')}\n                  </Measured>\n                )),\n              ),\n            ...(g.collapse\n              ? [\n                  <Measured key={groupKey(g.id)} k={groupKey(g.id)} onWidth={onWidth}>\n                    {renderCollapsedGroup(g)}\n                  </Measured>,\n                ]\n              : []),\n            ...(g.shed\n              ? [\n                  <Measured key={groupTriggerKey(g.id)} k={groupTriggerKey(g.id)} onWidth={onWidth}>\n                    {renderDisclosure(g, true)}\n                  </Measured>,\n                ]\n              : []),\n          ]),\n        )}\n        <Measured k={TRIGGER_KEY} onWidth={onWidth}>\n          {renderOverflowTrigger(false, () => {})}\n        </Measured>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAqFA,MAAM,oBAAoB,GAA8B,MACtD,EAAE,WAAW,EAAE,UACf,EAAE,OACC,GAAG,MACF,EAAE,OAAO,EAAE,EAAE,CAAC,MACd,EAAE,SAAS,WAAW,EAAE,EAAE,CAAC,SAAS,UACpC,EAAE,SAAS,OAAO,GAAG,MAAM,sBAAsB,GAAG,EAAE,EAAE,CAAC,SAAS,EAAE,CAAC,CACzE;AAEF,MAAM,kBAA6C,CAAC;;;;;;;;;;AAWpD,SAAgB,aAAa,KAA8C;CACzE,MAAM,WAAW,cAAc,aAAa;CAC5C,MAAM,aAAa,cAAc;CACjC,MAAM,aAAa,cAAe,MAAM,aAAa,GAAG,IAAI,MAAO,CAAC,GAAG,CAAC;CACxE,MAAM,SAAS,qBAAqB;EAClC,IAAI,CAAC,YAAY,OAAO;EACxB,MAAM,2BAAW,IAAI,IAA6B;EAClD,MAAM,WAAW,OAAe;GAC9B,MAAM,MAAM,SAAS,QAAQ,IAAI,cAAc,KAAA,CAAS;GACxD,IAAI,KAAK,SAAS,IAAI,IAAI,GAAG;GAC7B,OAAO,KAAK,YAAY;EAC1B;EACA,OAAO,aAAa,YAAY,OAAO,CAAC,CAAC,KAAK,OAAO;GACnD,IAAI,EAAE;GACN,UAAU,EAAE;GACZ,UAAU,EAAE,SAAS,KAAK,OAAO,SAAS,IAAI,EAAE,CAAE;EACpD,EAAE;CACJ,GAAG,gBAAgB;CACnB,OAAO,cAEH,OAAO,WAAW,IACd,OACA;EAAE;EAAQ,UAAU,OAAe,SAAS,QAAQ,IAAI,cAAc,KAAA,CAAS;CAAE,GACvF;EAAC;EAAQ;EAAU;CAAU,CAC/B;AACF;;AA+CA,SAAS,SAAS,EAChB,GACA,SACA,YAKC;CACD,MAAM,MAAM,OAAwB,IAAI;CACxC,sBAAsB;EACpB,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,MAAM,eAAe,QAAQ,GAAG,GAAG,sBAAsB,CAAC,CAAC,KAAK;EAChE,OAAO;EACP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,SAAS,QAAQ,EAAE;EACnB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,GAAG,OAAO,CAAC;CACf,OACE,oBAAC,QAAD;EAAW;EAAK,OAAO;GAAE,SAAS;GAAe,YAAY;EAAE;EAC5D;CACG,CAAA;AAEV;;;;;;;;AASA,SAAS,iBAAiB,EACxB,MACA,GACA,SACA,YAMC;CACD,MAAM,MAAM,OAAwB,IAAI;CACxC,sBAAsB;EACpB,MAAM,KAAK,IAAI;EACf,IAAI,CAAC,IAAI;EACT,MAAM,eAAe,QAAQ,GAAG,GAAG,sBAAsB,CAAC,CAAC,KAAK;EAChE,OAAO;EAGP,MAAM,WAAW,IAAI,eAAe,MAAM;EAC1C,SAAS,QAAQ,EAAE;EACnB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,GAAG,OAAO,CAAC;CACf,OACE,oBAAC,QAAD;EACO;EACC;EACN,OAAO;GAAE,SAAS;GAAe,YAAY;GAAU,YAAY;EAAE;EAEpE;CACG,CAAA;AAEV;AAEA,MAAM,oBAAyC;CAC7C,UAAU;CACV,MAAM;CACN,KAAK;CACL,QAAQ;CACR,UAAU;CACV,YAAY;CACZ,eAAe;CACf,SAAS;CACT,YAAY;AACd;AAIA,MAAM,wBACJ,KACA,SACA,QAEA,qBAAC,UAAD;CACE,MAAK;CACL,SAAS;CACT,UAAU,CAAC,IAAI;CACf,gBAAc,IAAI,UAAU,KAAA;CAC5B,iBAAe,IAAI,OAAO,SAAS,KAAA;CACnC,OAAO,IAAI;CACX,OAAO;EACL,SAAS;EACT,YAAY;EACZ,KAAK;EACL,SAAS;EACT,YAAY;EACZ,YAAY,IAAI,SAAS,qBAAqB;EAC9C,QAAQ;EACR,cAAc;EACd,QAAQ,IAAI,UAAU,YAAY;EAClC,SAAS,IAAI,UAAU,IAAI;CAC7B;CAlBF,UAAA,CAoBG,YAAY,UAAU,IAAI,QAAS,IAAI,QAAQ,IAAI,OACnD,YAAY,eAAe,IAAI,IAAI,UAAU,IACxC;;AAGV,MAAM,+BACJ,oBAAC,QAAD,EAAM,OAAO;CAAE,OAAO;CAAG,WAAW;CAAW,YAAY;CAAgB,SAAS;AAAI,EAAI,CAAA;AAG9F,MAAM,gCAAgC,QAAiB,WACrD,oBAAC,UAAD;CACE,MAAK;CACL,SAAS;CACT,iBAAc;CACd,iBAAe;CACf,OAAM;CACN,OAAO;EACL,SAAS;EACT,YAAY;EACZ,SAAS;EACT,QAAQ;EACR,cAAc;EACd,YAAY,SAAS,qBAAqB;EAC1C,QAAQ;CACV;CACD,UAAA;AAEO,CAAA;AAGV,SAAS,oBAAoB,EAAE,QAAoC;CACjE,IAAI,CAAC,KAAK,QAAQ,OAAO;CACzB,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD;EAAK,OAAO;GAAE,UAAU;GAAS,OAAO;GAAG,QAAQ;EAAG;EAAG,SAAS,KAAK;CAAQ,CAAA,GAC/E,oBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,UAAU;GACV,OAAO;GACP,KAAK;GACL,QAAQ;GACR,UAAU;GACV,SAAS;GACT,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;EACb;EAEC,UAAA,KAAK,SAAS,KAAK,SAAS,MAC3B,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,oBAAC,OAAD,EAAK,OAAO;GAAE,QAAQ;GAAG,YAAY;GAAmB,QAAQ;EAAQ,EAAI,CAAA,GACrF,QAAQ,KAAK,KAAK,QAAQ;GACzB,MAAM,MAAM,KAAK,QAAQ,IAAI,OAAO;GACpC,IAAI,CAAC,KAAK,OAAO;GACjB,MAAM,YAAY,IAAI,SAAS;GAC/B,OACE,qBAAC,UAAD;IAEE,MAAK;IACL,MAAM,QAAQ,SAAS,UAAU,kBAAkB;IACnD,gBAAc,QAAQ,SAAS,UAAU,IAAI,SAAS,KAAA;IACtD,UAAU,CAAC,IAAI;IACf,eAAe;KACb,KAAK,QAAQ,IAAI,OAAO;KACxB,IAAI,CAAC,WAAW,KAAK,MAAM;IAC7B;IACA,OAAO;KACL,SAAS;KACT,OAAO;KACP,YAAY;KACZ,gBAAgB;KAChB,KAAK;KACL,SAAS;KACT,QAAQ;KACR,YAAY;KACZ,QAAQ,IAAI,UAAU,YAAY;KAClC,SAAS,IAAI,UAAU,IAAI;KAC3B,YAAY;IACd;IAtBF,UAAA,CAwBE,qBAAC,QAAD,EAAA,UAAA,CACG,IAAI,UAAU,QAAQ,SAAS,UAAU,OAAO,IAChD,IAAI,KACD,EAAA,CAAA,GACL,YAAY,oBAAC,QAAD,EAAA,UAAM,IAAO,CAAA,IAAI,IACxB;GA5BD,GAAA,IAAI,OA4BH;EAEZ,CAAC,CACa,EAAA,GAvCK,CAuCL,CACjB;CACE,CAAA,CACL,EAAA,CAAA;AAEN;AAEA,SAAS,iBAAiB,EAAE,QAAsC;CAChE,IAAI,KAAK,aAAa,UAEpB,OACE,oBAAC,UAAD;EACE,OAHW,KAAK,SAAS,MAAM,MAAM,EAAE,MAG3B,CAAC,EAAE,MAAM;EACrB,WAAW,MAAM,KAAK,QAAQ,EAAE,OAAO,KAAK;EAC5C,OAAO;GAAE,SAAS;GAAW,cAAc;EAAE;EAE5C,UAAA,KAAK,SAAS,KAAK,MAClB,oBAAC,UAAD;GAAmB,OAAO,EAAE;GAAI,UAAU,CAAC,EAAE;GAC1C,UAAA,EAAE;EACG,GAFK,EAAE,EAEP,CACT;CACK,CAAA;CAIZ,OAAO,oBAAC,qBAAD,EAA2B,KAAO,CAAA;AAC3C;AAEA,SAAS,oBAAoB,EAAE,QAAsC;CACnE,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,WAA8B,CAClC;EACE,UAAU,KAAK;EACf,MAAM,KAAK,SAAS,SAAS,UAAU,KAAA;EACvC,MAAM,KAAK,SAAS,KAAK,OAAO;GAAE,MAAM;GAAoB,SAAS,EAAE;EAAG,EAAE;CAC9E,CACF;CACA,OACE,qBAAC,QAAD;EAAM,OAAO;GAAE,UAAU;GAAY,SAAS;EAAc;EAA5D,UAAA,CACG,6BAA6B,cAAc,SAAS,MAAM,CAAC,CAAC,CAAC,GAC9D,oBAAC,qBAAD,EACE,MAAM;GACJ;GACA;GACA,aAAa,QAAQ,KAAK;GAC1B,UAAU,OAAO,KAAK,SAAS,MAAM,MAAM,EAAE,OAAO,EAAE,KAAK;GAC3D,SAAS,KAAK;EAChB,EACD,CAAA,CACG;;AAEV;;;AAIA,SAAS,oBAAoB,EAAE,QAAuC;CACpE,MAAM,CAAC,QAAQ,WAAW,SAAS,KAAK;CACxC,MAAM,aAAa,KAAK,SAAS,MAAM,MAAM,EAAE,MAAM;CACrD,MAAM,WAA8B,CAClC;EACE,UAAU,KAAK;EACf,MAAM,KAAK,SAAS,SAAS,UAAU,KAAA;EACvC,MAAM,KAAK,SAAS,KAAK,OAAO;GAAE,MAAM;GAAoB,SAAS,EAAE;EAAG,EAAE;CAC9E,CACF;CACA,OACE,qBAAC,QAAD;EAAM,OAAO;GAAE,UAAU;GAAY,SAAS;EAAc;EAA5D,UAAA,CACE,oBAAC,UAAD;GACE,MAAK;GACL,eAAe,SAAS,MAAM,CAAC,CAAC;GAChC,iBAAc;GACd,iBAAe;GACf,OAAM;GACN,OAAO;IACL,SAAS;IACT,YAAY;IACZ,SAAS;IACT,QAAQ;IACR,cAAc;IAEd,YAAY,UAAU,aAAa,qBAAqB;IACxD,QAAQ;GACV;GACD,UAAA;EAEO,CAAA,GACR,oBAAC,qBAAD,EACE,MAAM;GACJ;GACA;GACA,aAAa,QAAQ,KAAK;GAC1B,UAAU,OAAO,KAAK,SAAS,MAAM,MAAM,EAAE,OAAO,EAAE,KAAK;GAC3D,SAAS,KAAK;EAChB,EACD,CAAA,CACG;;AAEV;AAIA,MAAM,WAAW,GAAmB,YAAoB,KAAK,EAAE,IAAI,GAAG;AACtE,MAAM,YAAY,OAAe,KAAK;AACtC,MAAM,mBAAmB,OAAe,MAAM;AAC9C,MAAM,cAAc;AAEpB,SAAgB,QAAQ,EACtB,KACA,MAAM,GACN,iBAAiB,GACjB,WACA,OACA,gBAAgB,sBAChB,cACA,iBACA,oBACA,kBAAkB,wBAClB,wBAAwB,8BACxB,sBACe;CACf,MAAM,SAAS,UAAU;CACzB,MAAM,WAAW,cAAc,aAAa;CAC5C,MAAM,aAAa,cAAc;CAMjC,MAAM,GAAG,SAAS,YAAY,MAAc,IAAI,GAAG,CAAC;CACpD,gBAAgB,OAAO,UAAU,KAAK,GAAG,CAAC,MAAM,CAAC;CAEjD,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,CAAC;CACtD,sBAAsB;EACpB,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,IAAI;EACT,MAAM,WAAW,IAAI,gBAAgB,YAAY;GAC/C,MAAM,IAAI,QAAQ,QAAQ,SAAS,EAAE,EAAE,YAAY;GACnD,IAAI,MAAM,KAAA,GAAW,mBAAmB,SAAU,KAAK,IAAI,OAAO,CAAC,IAAI,KAAM,IAAI,IAAK;EACxF,CAAC;EACD,SAAS,QAAQ,EAAE;EACnB,kBAAkB,GAAG,WAAW;EAChC,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,MAAM,YAAY,uBAAO,IAAI,IAAoB,CAAC;CAClD,MAAM,GAAG,sBAAsB,YAAY,MAAc,IAAI,GAAG,CAAC;CACjE,MAAM,UAAU,eACP,KAAa,UAAkB;EACpC,MAAM,OAAO,UAAU,QAAQ,IAAI,GAAG;EACtC,IAAI,SAAS,KAAA,KAAa,KAAK,IAAI,OAAO,KAAK,KAAK,IAAK;EACzD,UAAU,QAAQ,IAAI,KAAK,KAAK;EAChC,mBAAmB;CACrB,GACA,CAAC,CACH;CAEA,MAAM,cAAc,OAClB,SAAS,QAAQ,IAAI,cAAc,KAAA,CAAS;CAC9C,MAAM,cAAc,OAAe,SAAS,QAAQ,IAAI,cAAc,KAAA,CAAS;CAC/E,MAAM,aAAa,MAAuB,EAAE,SAAS,YAAY,EAAE,UAAU,EAAE;CAS/E,MAAM,aAAa,UALA,cAAc,aAAa,GAAG,GAAG,CAAC,GAAG,CAKlB,IAAI,MAAM,WAAW,UAAU,CAAC,CAAC,CAAC,EAAE,YAAY,IAAI;CAU1F,MAAM,MAAM,MAAM,YAAY;EAR5B,OAAO,KAAK,YAAY,UAAU,QAAQ,IAAI,KAAK,IAAI,GAAG,SAAS;EACnE,iBAAiB,OAAO,UAAU,QAAQ,IAAI,SAAS,EAAE,CAAC;EAC1D,eAAe,OAAO,UAAU,QAAQ,IAAI,gBAAgB,EAAE,CAAC;EAC/D,iBAAiB,UAAU,QAAQ,IAAI,WAAW,KAAK;EACvD;EAEA,WAAW,iBAAiB;CAEM,GAAG,cAAc;CACrD,MAAM,mBAAmB,gBAAgB,YAAY,MAAM,OAAO,SAAS,WAAW,EAAE,CAAC;CAEzF,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CACtD,gBAAgB;EACd,IAAI,CAAC,IAAI,aAAa,gBAAgB,KAAK;CAC7C,GAAG,CAAC,IAAI,WAAW,CAAC;;;;CAKpB,MAAM,kBAAkB,MACtB,EAAE,SAAS,YAAY,CAAC,eAAe,EAAE;CAG3C,MAAM,gBACJ,GACA,SACA,UACoB;EACpB,IAAI,EAAE,SAAS,UAAU;GACvB,MAAM,aAAa,eAAe,EAAE;GACpC,IAAI,YAAY;IACd,MAAM,SAAS,WAAW,SAAS;KACjC;KACA,UAAU,UAAU,QAAQ,QAAQ,GAAG,OAAO,GAAG,KAAK;IACxD,CAAC;IACD,IAAI,WAAW,KAAA,GAAW,OAAO;GACnC,OAAO,IAAI,UAAU,QAAQ;IAC3B,MAAM,MAAM,WAAW,EAAE,QAAQ;IACjC,OACE,oBAAC,kBAAD;KAAkB,MAAM,EAAE;KAAM,GAAG,QAAQ,GAAG,OAAO;KAAY;KAC9D,UAAA,MAAM,cAAc,KAAK,cAAc,WAAW,EAAE,QAAQ,CAAC,IAAI;IAClD,CAAA;GAEtB,OACE,OAAO;GAET,MAAM,MAAM,WAAW,EAAE,QAAQ;GACjC,OAAO,MAAM,cAAc,KAAK,cAAc,WAAW,EAAE,QAAQ,CAAC,IAAI;EAC1E;EACA,MAAM,MAAM,WAAW,EAAE,OAAO;EAChC,IAAI,CAAC,KACH,OAAO,cACL;GACE,IAAI,EAAE;GACN,OAAO,EAAE;GACT,WAAW,CAAC;GACZ,SAAS;GACT,QAAQ;GACR,SAAS;GACT,YAAY,CAAC;EACf,GACA,eACM,CAAC,CACT;EACF,OAAO,cAAc,KAAK,eAAe,WAAW,EAAE,OAAO,CAAC;CAChE;CAEA,MAAM,iBAAiB,OAA4C;EACjE,IAAI,EAAE;EACN,UAAU,EAAE;EACZ,UAAU,EAAE,YAAY;EACxB,MAAM,EAAE;EACR,UAAU,EAAE,MACT,KAAK,MAAM,WAAW,UAAU,CAAC,CAAC,CAAC,CAAC,CACpC,QAAQ,MAA4B,MAAM,QAAQ,EAAE,OAAO;EAC9D,SAAS;CACX;CAEA,MAAM,wBAAwB,MAC5B,kBACE,gBAAgB,cAAc,CAAC,CAAC,IAEhC,oBAAC,kBAAD,EAAkB,MAAM,cAAc,CAAC,EAAI,CAAA;;;CAK/C,MAAM,kBAAkB,GAAoB,iBAA+C;EACzF,IAAI,EAAE;EACN,UAAU,EAAE;EACZ,MAAM,EAAE;EACR,UAAU,EAAE,MACT,QAAQ,MAAM,eAAe,IAAI,MAAM,IAAI,EAAE,GAAG,CAAC,EAAE,SAAS,MAAM,CAAC,CACnE,KAAK,MAAM,WAAW,UAAU,CAAC,CAAC,CAAC,CAAC,CACpC,QAAQ,MAA4B,MAAM,QAAQ,EAAE,OAAO;EAC9D,SAAS;CACX;CAEA,MAAM,oBAAoB,GAAoB,gBAC5C,qBACE,mBAAmB,eAAe,GAAG,WAAW,CAAC,IAEjD,oBAAC,qBAAD,EAAqB,MAAM,eAAe,GAAG,WAAW,EAAI,CAAA;CAGhE,MAAM,mBAAmB,MAA0C;EACjE,MAAM,aAAa,IAAI,OAAO,IAAI,EAAE,EAAE;EACtC,IAAI,CAAC,cAAc,WAAW,YAAY,OAAO,CAAC;EAClD,IAAI,WAAW,WACb,OAAO,CAAC,oBAAC,MAAM,UAAP,EAAA,UAA4B,qBAAqB,CAAC,EAAkB,GAA/C,EAAE,EAA6C,CAAC;EAC/E,MAAM,QAA2B,CAAC;EAClC,KAAK,MAAM,KAAK,EAAE,OAAO;GACvB,MAAM,IAAI,IAAI,MAAM,IAAI,EAAE,GAAG;GAC7B,IAAI,GAAG,SAAS,WAAW;GAC3B,MAAM,KAAK,oBAAC,MAAM,UAAP,EAAA,UAA6B,aAAa,GAAG,EAAE,SAAS,MAAM,EAAkB,GAA3D,EAAE,GAAyD,CAAC;EAC9F;EAEA,IAAI,WAAW,YAAY,GACzB,MAAM,KACJ,oBAAC,MAAM,UAAP,EAAA,UAA0C,iBAAiB,GAAG,KAAK,EAAkB,GAAhE,GAAG,EAAE,GAAG,UAAwD,CACvF;EAEF,OAAO,MAAM,SAAS,CAAC,oBAAC,MAAM,UAAP,EAAA,UAA4B,MAAsB,GAA7B,EAAE,EAA2B,CAAC,IAAI,CAAC;CACjF;CAEA,MAAM,qBAAqB,YAA4D;EACrF,IAAI,CAAC,SAAS,OAAO;EAIrB,OAHiB,QAAQ,OACtB,KAAK,OAAO;GAAE,IAAI,EAAE;GAAI,OAAO,gBAAgB,CAAC;EAAE,EAAE,CAAC,CACrD,QAAQ,MAAM,EAAE,MAAM,SAAS,CACpB,CAAC,CAAC,KAAK,GAAG,MACtB,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,IAAI,KAAK,gBAAgB,GACzB,EAAE,KACW,EAAA,GAHK,EAAE,EAGP,CACjB;CACH;CAEA,MAAM,iBAAiB,SACrB,WAAW,SAAS,MAAM,MAAM,EAAE,SAAS,IAAI;;;;;;;;;;;;CAajD,MAAM,gBAAgB,cAA+D;EACnF,SAAS;EACT,YAAY;EACZ;EACA,MAAM;EACN,GAAI,aAAa,WAAW;GAAE,YAAY;GAAQ,aAAa;EAAO,IAAI;CAC5E;CAEA,MAAM,eAAiC;EACrC,UAAU;EACV,QAAQ;EACR,aAAa,gBAAgB,KAAK;EAClC,SAAS;EACT,SAAS;CACX;CAEA,OACE,qBAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GAAE,UAAU;GAAY,SAAS;GAAQ,YAAY;GAAU,GAAG;EAAM;EAHjF,UAAA;GAKE,oBAAC,OAAD;IAAK,OAAO,aAAa,OAAO;IAAI,UAAA,kBAAkB,cAAc,OAAO,CAAC;GAAO,CAAA;GACnF,oBAAC,OAAD;IAAK,OAAO,aAAa,QAAQ;IAAI,UAAA,kBAAkB,cAAc,QAAQ,CAAC;GAAO,CAAA;GACrF,qBAAC,OAAD;IAAK,OAAO,aAAa,KAAK;IAA9B,UAAA,CACG,kBAAkB,cAAc,KAAK,CAAC,GACtC,IAAI,eACH,qBAAC,QAAD;KAAM,OAAO;MAAE,UAAU;MAAY,SAAS;KAAc;KAA5D,UAAA,CACG,sBAAsB,oBAAoB,iBAAiB,MAAM,CAAC,CAAC,CAAC,GACpE,qBACC,mBAAmB,YAAY,IAE/B,oBAAC,qBAAD,EAAqB,MAAM,aAAe,CAAA,CAExC;IAEL,CAAA,CAAA;;GAKL,qBAAC,OAAD;IAAK,eAAA;IAAY,OAAO;IAAxB,UAAA,CACG,WAAW,SAAS,SAAS,MAC5B,EAAE,OAAO,SAAS,MAAM;KAGtB,GAAG,EAAE,MACF,QAAQ,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC,CACjC,SAAS,MACR,EAAE,SAAS,KAAK,YACd,oBAAC,UAAD;MAAoC,GAAG,QAAQ,GAAG,OAAO;MAAY;MAClE,UAAA,aAAa,GAAG,SAAS,SAAS;KAC3B,GAFK,QAAQ,GAAG,OAAO,CAEvB,CACX,CACH;KACF,GAAI,EAAE,WACF,CACE,oBAAC,UAAD;MAA+B,GAAG,SAAS,EAAE,EAAE;MAAY;MACxD,UAAA,qBAAqB,CAAC;KACf,GAFK,SAAS,EAAE,EAAE,CAElB,CACZ,IACA,CAAC;KACL,GAAI,EAAE,OACF,CACE,oBAAC,UAAD;MAAsC,GAAG,gBAAgB,EAAE,EAAE;MAAY;MACtE,UAAA,iBAAiB,GAAG,IAAI;KACjB,GAFK,gBAAgB,EAAE,EAAE,CAEzB,CACZ,IACA,CAAC;IACP,CAAC,CACH,GACA,oBAAC,UAAD;KAAU,GAAG;KAAsB;KAChC,UAAA,sBAAsB,aAAa,CAAC,CAAC;IAC9B,CAAA,CACP;;EACF;;AAET"}

package/dist/views.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("./rolldown-runtime-DDXJien1.cjs");
+const require_runtime = require("./runtime.cjs");
+let _embedpdf_plugin_view_manager = require("@embedpdf/plugin-view-manager");
+//#region src/views.ts
+const sameView = (a, b) => a.id === b.id && a.activeDocumentId === b.activeDocumentId && a.documentIds.length === b.documentIds.length && a.documentIds.every((d, i) => d === b.documentIds[i]);
+function useViews() {
+	const vm = require_runtime.useKernel().capability(_embedpdf_plugin_view_manager.ViewManagerToken);
+	return {
+		views: require_runtime.useKernelValue(() => vm.list(), (a, b) => a.length === b.length && a.every((v, i) => sameView(v, b[i]))),
+		focusedViewId: require_runtime.useKernelValue(() => vm.focusedViewId()),
+		documentView: vm.documentView,
+		createView: vm.createView,
+		removeView: vm.removeView,
+		moveView: vm.moveView,
+		setFocused: vm.setFocused,
+		setActiveDocument: vm.setActiveDocument,
+		addDocument: vm.addDocument,
+		removeDocument: vm.removeDocument,
+		moveDocumentWithin: vm.moveDocumentWithin,
+		moveDocumentBetween: vm.moveDocumentBetween
+	};
+}
+//#endregion
+exports.useViews = useViews;
+Object.keys(_embedpdf_plugin_view_manager).forEach(function(k) {
+	if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function() {
+			return _embedpdf_plugin_view_manager[k];
+		}
+	});
+});
+
+//# sourceMappingURL=views.cjs.map

package/dist/views.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.cjs","names":["useKernel","ViewManagerToken","useKernelValue"],"sources":["../src/views.ts"],"sourcesContent":["/**\n * useViews — the React view of @embedpdf/plugin-view-manager.\n *\n * Reactive pane list + intents. The adapter stays headless: it gives you the\n * views; YOU lay them out (split, grid, stacked), render each pane's tab strip\n * over `view.documentIds`, and wrap the body in a <DocumentScope id={activeId}>\n * so its Stage binds to that pane's active document.\n */\n\n// One-line-per-feature: registration travels with the UI.\nexport * from '@embedpdf/plugin-view-manager';\nimport { ViewManagerToken } from '@embedpdf/plugin-view-manager';\nimport type { ViewInfo } from '@embedpdf/plugin-view-manager';\nimport { useKernel, useKernelValue } from './runtime';\n\nexport interface UseViews {\n  views: ViewInfo[];\n  focusedViewId: string | null;\n  documentView: (documentId: string) => string | null;\n  createView: () => string;\n  removeView: (id: string) => void;\n  moveView: (id: string, toIndex: number) => void;\n  setFocused: (id: string) => void;\n  setActiveDocument: (viewId: string, documentId: string | null) => void;\n  addDocument: (viewId: string, documentId: string, index?: number) => void;\n  removeDocument: (viewId: string, documentId: string) => void;\n  moveDocumentWithin: (viewId: string, documentId: string, toIndex: number) => void;\n  moveDocumentBetween: (\n    fromViewId: string,\n    toViewId: string,\n    documentId: string,\n    toIndex?: number,\n  ) => void;\n}\n\nconst sameView = (a: ViewInfo, b: ViewInfo): boolean =>\n  a.id === b.id &&\n  a.activeDocumentId === b.activeDocumentId &&\n  a.documentIds.length === b.documentIds.length &&\n  a.documentIds.every((d, i) => d === b.documentIds[i]);\n\nexport function useViews(): UseViews {\n  const kernel = useKernel();\n  const vm = kernel.capability(ViewManagerToken);\n  const views = useKernelValue(\n    () => vm.list(),\n    (a, b) => a.length === b.length && a.every((v, i) => sameView(v, b[i])),\n  );\n  const focusedViewId = useKernelValue(() => vm.focusedViewId());\n  return {\n    views,\n    focusedViewId,\n    documentView: vm.documentView,\n    createView: vm.createView,\n    removeView: vm.removeView,\n    moveView: vm.moveView,\n    setFocused: vm.setFocused,\n    setActiveDocument: vm.setActiveDocument,\n    addDocument: vm.addDocument,\n    removeDocument: vm.removeDocument,\n    moveDocumentWithin: vm.moveDocumentWithin,\n    moveDocumentBetween: vm.moveDocumentBetween,\n  };\n}\n"],"mappings":";;;;;AAmCA,MAAM,YAAY,GAAa,MAC7B,EAAE,OAAO,EAAE,MACX,EAAE,qBAAqB,EAAE,oBACzB,EAAE,YAAY,WAAW,EAAE,YAAY,UACvC,EAAE,YAAY,OAAO,GAAG,MAAM,MAAM,EAAE,YAAY,EAAE;AAEtD,SAAgB,WAAqB;CAEnC,MAAM,KADSA,gBAAAA,UACC,CAAC,CAAC,WAAWC,8BAAAA,gBAAgB;CAM7C,OAAO;EACL,OANYC,gBAAAA,qBACN,GAAG,KAAK,IACb,GAAG,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,GAAG,MAAM,SAAS,GAAG,EAAE,EAAE,CAAC,CAIlE;EACJ,eAHoBA,gBAAAA,qBAAqB,GAAG,cAAc,CAG9C;EACZ,cAAc,GAAG;EACjB,YAAY,GAAG;EACf,YAAY,GAAG;EACf,UAAU,GAAG;EACb,YAAY,GAAG;EACf,mBAAmB,GAAG;EACtB,aAAa,GAAG;EAChB,gBAAgB,GAAG;EACnB,oBAAoB,GAAG;EACvB,qBAAqB,GAAG;CAC1B;AACF"}

package/dist/views.d.cts

@@ -0,0 +1,21 @@
+import { ViewInfo } from "@embedpdf/plugin-view-manager";
+export * from "@embedpdf/plugin-view-manager";
+//#region src/views.d.ts
+interface UseViews {
+  views: ViewInfo[];
+  focusedViewId: string | null;
+  documentView: (documentId: string) => string | null;
+  createView: () => string;
+  removeView: (id: string) => void;
+  moveView: (id: string, toIndex: number) => void;
+  setFocused: (id: string) => void;
+  setActiveDocument: (viewId: string, documentId: string | null) => void;
+  addDocument: (viewId: string, documentId: string, index?: number) => void;
+  removeDocument: (viewId: string, documentId: string) => void;
+  moveDocumentWithin: (viewId: string, documentId: string, toIndex: number) => void;
+  moveDocumentBetween: (fromViewId: string, toViewId: string, documentId: string, toIndex?: number) => void;
+}
+declare function useViews(): UseViews;
+//#endregion
+export { UseViews, useViews };
+//# sourceMappingURL=views.d.cts.map