@embedpdf/react 3.0.0-next.14 → 3.0.0-next.16

package/dist/toolbar.js

@@ -1,19 +1,20 @@
-import "./rolldown-runtime-BBjsoOtd.js";
-import { useCapability, useDocumentId, useKernel, useKernelValue } from "./runtime.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { b as useKernel, f as useCapability, h as useDocumentId, x as useKernelValue } from "./runtime-tD5iJU83.js";
+import { t as INERT } from "./inert-D8fkennb.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TOOLBAR_ITEM_ATTRIBUTE, attachMenuKeys, attachToolbarFocus, createToolbarLengths, focusablesIn, observeContentLength, observeLength, observeOutsidePress, paintDefault, toolbarMeasureKey } from "@embedpdf/web";
+import * as React$1 from "react";
 import { useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { filterBar, normalizeBar, projectOverflow, projectStrip, solve } from "@embedpdf/core-ui";
-import { CommandsToken, resolvedCommandsEqual } from "@embedpdf/plugin-commands/contract";
-export * from "@embedpdf/core-ui";
+import { DEFAULT_IMPORTANCE, PINNED, custom, group, groupMenuView, item, layoutToolbar, normalizeBar, sameStripGroups, stripGroupsOf } from "@embedpdf/core-ui";
+import { CommandsToken } from "@embedpdf/plugin-commands/contract/host";
+import { resolvedCommandsEqual, unregisteredCommand } from "@embedpdf/plugin-commands/contract";
 //#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 stripGroupsEqual = (left, right) => sameStripGroups(left, right, resolvedCommandsEqual);
 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
+* un-measured sibling, for contextual strips (a bar over a selection). 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.
@@ -22,41 +23,24 @@ 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);
+	const groups = useKernelValue(() => normalized ? stripGroupsOf(normalized, (id) => commands.resolveCommand(id, documentId ?? void 0)) : NO_STRIP_GROUPS, stripGroupsEqual);
 	return useMemo(() => groups.length === 0 ? null : {
 		groups,
-		execute: (id) => commands.execute(id, documentId ?? void 0)
+		execute: (id) => void commands.execute(id, { documentId: documentId ?? void 0 })
 	}, [
 		groups,
 		commands,
 		documentId
 	]);
 }
-/** Report this node's border-box width under `k`, live, via ResizeObserver. */
-function Measured({ k, onWidth, children }) {
+/** Report this node's border-box length along the toolbar under `k`, live. */
+function Measured({ k, orientation, onLength, 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]);
+	useLayoutEffect(() => ref.current ? observeLength(ref.current, orientation, (length) => onLength(k, length)) : void 0, [
+		k,
+		orientation,
+		onLength
+	]);
 	return /* @__PURE__ */ jsx("span", {
 		ref,
 		style: {
@@ -70,20 +54,16 @@ function Measured({ k, onWidth, 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.
+* command). Measured live — the projected content lives in the host's world,
+* so its length can only be observed where it actually renders.
 */
-function NativeSlotSocket({ name, k, onWidth, children }) {
+function NativeSlotSocket({ name, k, orientation, onLength, 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]);
+	useLayoutEffect(() => ref.current ? observeLength(ref.current, orientation, (length) => onLength(k, length)) : void 0, [
+		k,
+		orientation,
+		onLength
+	]);
 	return /* @__PURE__ */ jsx("slot", {
 		ref,
 		name,
@@ -95,7 +75,13 @@ function NativeSlotSocket({ name, k, onWidth, children }) {
 		children
 	});
 }
-const measureLayerStyle = {
+/**
+* The hidden measurement layer: a row for a horizontal toolbar, a column for a
+* vertical one, and no height either way, so it never adds to the page. A
+* column keeps each item at its own width, so no text wraps and changes the
+* heights it reports.
+*/
+const measureLayerStyle = (orientation) => ({
 	position: "absolute",
 	left: 0,
 	top: 0,
@@ -104,9 +90,20 @@ const measureLayerStyle = {
 	visibility: "hidden",
 	pointerEvents: "none",
 	display: "flex",
-	whiteSpace: "nowrap"
-};
-const defaultRenderCommand = (cmd, variant, run) => /* @__PURE__ */ jsxs("button", {
+	whiteSpace: "nowrap",
+	...orientation === "vertical" ? {
+		flexDirection: "column",
+		alignItems: "flex-start"
+	} : null
+});
+/** Marks the element around each item of the live row: its first focusable element is a stop. */
+const TOOLBAR_ITEM = { [TOOLBAR_ITEM_ATTRIBUTE]: "" };
+/** The element around an item adds no box, so the item lays out as the section's own child. */
+const ITEM_STYLE = { display: "contents" };
+const SURFACE = paintDefault("toolbar-surface");
+const BORDER = paintDefault("toolbar-border");
+const ACTIVE = paintDefault("toolbar-active");
+const defaultRenderCommand = (cmd, _variant, run) => /* @__PURE__ */ jsx("button", {
 	type: "button",
 	onClick: run,
 	disabled: !cmd.enabled,
@@ -119,20 +116,25 @@ const defaultRenderCommand = (cmd, variant, run) => /* @__PURE__ */ jsxs("button
 		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)",
+		color: "inherit",
+		font: "inherit",
+		background: cmd.active ? ACTIVE : "transparent",
+		border: `1px solid ${BORDER}`,
 		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]
+	children: cmd.label
 });
-const defaultRenderSeparator = () => /* @__PURE__ */ jsx("span", { style: {
-	width: 1,
-	alignSelf: "stretch",
-	background: "currentColor",
-	opacity: .2
-} });
+/** A 1px line across the toolbar: upright in a horizontal one, flat in a vertical one. */
+function DefaultSeparator({ orientation }) {
+	return /* @__PURE__ */ jsx("span", { style: {
+		...orientation === "vertical" ? { height: 1 } : { width: 1 },
+		alignSelf: "stretch",
+		background: "currentColor",
+		opacity: .2
+	} });
+}
 const defaultRenderOverflowTrigger = (isOpen, toggle) => /* @__PURE__ */ jsx("button", {
 	type: "button",
 	onClick: toggle,
@@ -143,39 +145,64 @@ const defaultRenderOverflowTrigger = (isOpen, toggle) => /* @__PURE__ */ jsx("bu
 		display: "inline-flex",
 		alignItems: "center",
 		padding: "4px 8px",
-		border: "1px solid rgba(0,0,0,0.15)",
+		color: "inherit",
+		font: "inherit",
+		border: `1px solid ${BORDER}`,
 		borderRadius: 4,
-		background: isOpen ? "rgba(0,0,0,0.12)" : "transparent",
+		background: isOpen ? ACTIVE : "transparent",
 		cursor: "pointer"
 	},
 	children: "⋯"
 });
-function DefaultOverflowMenu({ view }) {
+/** Where a default menu opens: under a horizontal toolbar's button, beside a vertical one's. */
+const menuPlacement = (orientation) => orientation === "vertical" ? {
+	top: 0,
+	insetInlineStart: "100%"
+} : {
+	top: "100%",
+	insetInlineEnd: 0
+};
+/**
+* The default menu, opened by the button beside it in the same parent: it
+* closes on a press outside that parent, and takes the menu keys while open.
+*/
+function DefaultOverflowMenu({ view, orientation }) {
+	const menu = useRef(null);
+	const close = useRef(view.close);
+	close.current = view.close;
+	useLayoutEffect(() => {
+		const element = menu.current;
+		if (!view.isOpen || !element) return;
+		const container = element.parentElement ?? element;
+		const trigger = focusablesIn(container).find((candidate) => !element.contains(candidate)) ?? null;
+		const stopOutside = observeOutsidePress(container, () => close.current());
+		const detachKeys = attachMenuKeys(element, {
+			trigger,
+			close: () => close.current()
+		});
+		return () => {
+			stopOutside();
+			detachKeys();
+		};
+	}, [view.isOpen]);
 	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", {
+	return /* @__PURE__ */ jsx("div", {
+		ref: menu,
 		role: "menu",
 		style: {
 			position: "absolute",
-			right: 0,
-			top: "100%",
+			...menuPlacement(orientation),
 			zIndex: 41,
 			minWidth: 200,
 			padding: 4,
-			background: "white",
-			border: "1px solid rgba(0,0,0,0.15)",
+			background: SURFACE,
+			border: `1px solid ${BORDER}`,
 			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: {
+		children: view.sections.map((section, i) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("div", { style: {
 			height: 1,
-			background: "rgba(0,0,0,0.1)",
+			background: BORDER,
 			margin: "4px 0"
 		} }), section.rows.map((row) => {
 			const cmd = view.resolve(row.command);
@@ -186,6 +213,7 @@ function DefaultOverflowMenu({ view }) {
 				role: section.role === "radio" ? "menuitemradio" : "menuitem",
 				"aria-checked": section.role === "radio" ? cmd.active : void 0,
 				disabled: !cmd.enabled,
+				tabIndex: -1,
 				onClick: () => {
 					view.execute(row.command);
 					if (!isSubmenu) view.close();
@@ -198,6 +226,8 @@ function DefaultOverflowMenu({ view }) {
 					gap: 16,
 					padding: "6px 8px",
 					border: "none",
+					color: "inherit",
+					font: "inherit",
 					background: "transparent",
 					cursor: cmd.enabled ? "pointer" : "default",
 					opacity: cmd.enabled ? 1 : .4,
@@ -206,61 +236,48 @@ function DefaultOverflowMenu({ view }) {
 				children: [/* @__PURE__ */ jsxs("span", { children: [cmd.active && section.role === "radio" ? "• " : "", cmd.label] }), isSubmenu ? /* @__PURE__ */ jsx("span", { children: "▸" }) : null]
 			}, row.command);
 		})] }, i))
-	})] });
+	});
 }
-function DefaultCollapsed({ view }) {
+function DefaultCollapsed({ view, orientation }) {
 	if (view.collapse === "select") return /* @__PURE__ */ jsx("select", {
-		value: view.commands.find((c) => c.active)?.id ?? "",
-		onChange: (e) => view.execute(e.target.value),
+		value: view.commands.find((command) => command.active)?.id ?? "",
+		onChange: (event) => view.execute(event.target.value),
 		style: {
 			padding: "4px 6px",
-			borderRadius: 4
+			font: "inherit",
+			borderRadius: 4,
+			border: `1px solid ${BORDER}`,
+			background: SURFACE
 		},
-		children: view.commands.map((c) => /* @__PURE__ */ jsx("option", {
-			value: c.id,
-			disabled: !c.enabled,
-			children: c.label
-		}, c.id))
+		children: view.commands.map((command) => /* @__PURE__ */ jsx("option", {
+			value: command.id,
+			disabled: !command.enabled,
+			children: command.label
+		}, command.id))
+	});
+	return /* @__PURE__ */ jsx(CollapsedMenuButton, {
+		view,
+		orientation
 	});
-	return /* @__PURE__ */ jsx(CollapsedMenuButton, { view });
 }
-function CollapsedMenuButton({ view }) {
+function CollapsedMenuButton({ view, orientation }) {
 	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
-		} })]
+		children: [defaultRenderOverflowTrigger(isOpen, () => setOpen((previous) => !previous)), /* @__PURE__ */ jsx(DefaultOverflowMenu, {
+			view: groupMenuView(view, isOpen, () => setOpen(false)),
+			orientation
+		})]
 	});
 }
 /** Default shed-group disclosure: a chevron opening a radio menu of the
-*  hidden children — v2's overflow-tabs-button, derived. */
-function DefaultGroupTrigger({ view }) {
+*  hidden children. */
+function DefaultGroupTrigger({ view, orientation }) {
 	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
-		}))
-	}];
+	const someActive = view.commands.some((command) => command.active);
 	return /* @__PURE__ */ jsxs("span", {
 		style: {
 			position: "relative",
@@ -268,7 +285,7 @@ function DefaultGroupTrigger({ view }) {
 		},
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
-			onClick: () => setOpen((o) => !o),
+			onClick: () => setOpen((previous) => !previous),
 			"aria-haspopup": "menu",
 			"aria-expanded": isOpen,
 			title: "More",
@@ -276,169 +293,138 @@ function DefaultGroupTrigger({ view }) {
 				display: "inline-flex",
 				alignItems: "center",
 				padding: "4px 6px",
-				border: "1px solid rgba(0,0,0,0.15)",
+				color: "inherit",
+				font: "inherit",
+				border: `1px solid ${BORDER}`,
 				borderRadius: 4,
-				background: isOpen || someActive ? "rgba(0,0,0,0.12)" : "transparent",
+				background: isOpen || someActive ? ACTIVE : "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
-		} })]
+		}), /* @__PURE__ */ jsx(DefaultOverflowMenu, {
+			view: groupMenuView(view, isOpen, () => setOpen(false)),
+			orientation
+		})]
 	});
 }
-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 }) {
+function Toolbar({ bar, orientation = "horizontal", gap = 8, separatorWidth = 1, "aria-label": ariaLabel, className, style, renderCommand = defaultRenderCommand, renderCustom, renderCollapsed, renderGroupTrigger, renderSeparator, renderOverflowTrigger = defaultRenderOverflowTrigger, renderOverflowMenu }) {
 	const kernel = useKernel();
 	const commands = useCapability(CommandsToken);
 	const documentId = useDocumentId();
+	const vertical = orientation === "vertical";
 	const [, force] = useReducer((x) => x + 1, 0);
 	useEffect(() => kernel.subscribe(force), [kernel]);
 	const containerRef = useRef(null);
-	const [containerWidth, setContainerWidth] = useState(0);
+	const [containerLength, setContainerLength] = useState(0);
+	useLayoutEffect(() => containerRef.current ? observeContentLength(containerRef.current, orientation, setContainerLength) : void 0, [orientation]);
+	const [lengths] = useState(createToolbarLengths);
+	const [, bumpMeasureVersion] = useReducer((version) => version + 1, 0);
+	const onLength = useMemo(() => (key, length) => {
+		if (lengths.report(orientation, key, length)) bumpMeasureVersion();
+	}, [lengths, orientation]);
+	const roving = useRef(null);
 	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 toolbar = containerRef.current;
+		if (!toolbar) return;
+		const focus = attachToolbarFocus(toolbar, orientation);
+		roving.current = focus;
+		return () => {
+			focus.detach();
+			roving.current = null;
+		};
+	}, [orientation]);
+	useLayoutEffect(() => roving.current?.refresh());
+	const resolveCmd = (id) => commands.resolveCommand(id, documentId ?? void 0);
+	const executeCmd = (id) => void commands.execute(id, { documentId: documentId ?? void 0 });
+	const layout = layoutToolbar({
+		bar: useMemo(() => normalizeBar(bar), [bar]),
+		resolve: resolveCmd,
+		unregistered: unregisteredCommand,
+		execute: executeCmd,
+		menuTarget: (id) => commands.getMenuTarget(id),
+		metrics: lengths.metrics(orientation, gap, separatorWidth),
+		measureKey: toolbarMeasureKey,
+		containerLength,
+		orientation
+	});
 	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
+		if (!layout.hasOverflow) setOverflowOpen(false);
+	}, [layout.hasOverflow]);
+	/** External = custom part 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);
+	const isExternalSlot = (part) => part.kind === "custom" && !renderCustom?.[part.name];
+	const renderPart = (part, layer) => {
+		switch (part.kind) {
+			case "command": return renderCommand(part.command, part.variant, part.run);
+			case "custom": {
+				const terminal = () => part.terminal ? renderCommand(part.terminal, "icon", part.runTerminal) : null;
+				const registered = renderCustom?.[part.name];
+				if (registered) {
+					const custom = registered(part.variant, {
+						layer,
+						measure: (length) => onLength(part.measureKey, length)
+					});
+					return custom === void 0 ? terminal() : custom;
+				}
+				if (layer === "measure") return null;
 				return /* @__PURE__ */ jsx(NativeSlotSocket, {
-					name: u.slot,
-					k: unitKey(u, variant),
-					onWidth,
-					children: cmd ? renderCommand(cmd, "icon", () => executeCmd(u.terminal)) : null
+					name: part.name,
+					k: part.measureKey,
+					orientation,
+					onLength,
+					children: terminal()
 				});
-			} else return null;
-			const cmd = resolveCmd(u.terminal);
-			return cmd ? renderCommand(cmd, "icon", () => executeCmd(u.terminal)) : null;
+			}
+			case "collapsed": {
+				const drawn = renderCollapsed?.(part.view);
+				return drawn === void 0 ? /* @__PURE__ */ jsx(DefaultCollapsed, {
+					view: part.view,
+					orientation
+				}) : drawn;
+			}
+			case "disclosure": {
+				const drawn = renderGroupTrigger?.(part.view);
+				return drawn === void 0 ? /* @__PURE__ */ jsx(DefaultGroupTrigger, {
+					view: part.view,
+					orientation
+				}) : drawn;
+			}
 		}
-		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);
+	const renderLiveSection = (section) => section.groups.map((group, i) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [i > 0 && (renderSeparator ? renderSeparator() : /* @__PURE__ */ jsx(DefaultSeparator, { orientation })), group.parts.map((part) => /* @__PURE__ */ jsx("span", {
+		...TOOLBAR_ITEM,
+		style: ITEM_STYLE,
+		children: renderPart(part, "live")
+	}, part.key))] }, group.id));
 	/**
-	* 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
+	* Segment layout, along the toolbar's axis. 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 lengths +
+	* per-unit gaps) is exactly the layout's minimum length: 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.
+	* Segments never grow or shrink: fit is the solver's job, not flexbox's.
 	*/
 	const sectionStyle = (position) => ({
 		display: "flex",
+		flexDirection: vertical ? "column" : "row",
 		alignItems: "center",
 		gap,
 		flex: "0 0 auto",
-		...position === "center" ? {
+		...position !== "center" ? null : vertical ? {
+			marginTop: "auto",
+			marginBottom: "auto"
+		} : {
 			marginLeft: "auto",
 			marginRight: "auto"
-		} : null
+		}
 	});
 	const overflowView = {
-		sections: overflowSections,
+		sections: layout.overflow,
 		isOpen: overflowOpen,
 		close: () => setOverflowOpen(false),
 		resolve: resolveCmd,
@@ -446,61 +432,53 @@ function Toolbar({ bar, gap = 8, separatorWidth = 1, className, style, renderCom
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: containerRef,
+		role: "toolbar",
+		"aria-orientation": orientation,
+		"aria-label": ariaLabel,
 		className,
 		style: {
 			position: "relative",
 			display: "flex",
+			flexDirection: vertical ? "column" : "row",
 			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, () => {})
+		children: [layout.sections.map((section) => /* @__PURE__ */ jsxs("div", {
+			style: sectionStyle(section.name),
+			children: [renderLiveSection(section), section.name === "end" && layout.hasOverflow && /* @__PURE__ */ jsxs("span", {
+				...TOOLBAR_ITEM,
+				style: {
+					position: "relative",
+					display: "inline-flex"
+				},
+				children: [renderOverflowTrigger(overflowOpen, () => setOverflowOpen((previous) => !previous)), renderOverflowMenu ? renderOverflowMenu(overflowView) : /* @__PURE__ */ jsx(DefaultOverflowMenu, {
+					view: overflowView,
+					orientation
 				})]
-			})
-		]
+			})]
+		}, section.name)), /* @__PURE__ */ jsxs("div", {
+			"aria-hidden": true,
+			...INERT,
+			style: measureLayerStyle(orientation),
+			children: [layout.measured.filter((part) => !isExternalSlot(part)).map((part) => {
+				const drawn = renderPart(part, "measure");
+				if (part.kind === "custom" && drawn === null) return null;
+				return /* @__PURE__ */ jsx(Measured, {
+					k: part.measureKey,
+					orientation,
+					onLength,
+					children: drawn
+				}, part.measureKey);
+			}), /* @__PURE__ */ jsx(Measured, {
+				k: toolbarMeasureKey.overflowTrigger,
+				orientation,
+				onLength,
+				children: renderOverflowTrigger(false, () => {})
+			})]
+		})]
 	});
 }
 //#endregion
-export { Toolbar, useStripView };
+export { DEFAULT_IMPORTANCE, PINNED, Toolbar, custom, group, item, useStripView };
 
 //# sourceMappingURL=toolbar.js.map