@embedpdf/viewer-chrome 3.0.0-next.13 → 3.0.0-next.15

package/dist/toolbar-CJu2wKTU.cjs

@@ -0,0 +1,1659 @@
+const require_icons = require("./icons-x0Tc05bs.cjs");
+const require_sheet = require("./sheet-BDsa_Sup.cjs");
+const require_stamp_store = require("./stamp-store-BHvRs-Do.cjs");
+let react = require("react");
+let _embedpdf_react_runtime = require("@embedpdf/react/runtime");
+let _embedpdf_react_stage = require("@embedpdf/react/stage");
+let _embedpdf_react_page_edit = require("@embedpdf/react/page-edit");
+let _embedpdf_react_interaction = require("@embedpdf/react/interaction");
+let _embedpdf_react_annotation = require("@embedpdf/react/annotation");
+let _embedpdf_react_stamp = require("@embedpdf/react/stamp");
+let _embedpdf_react_measurement = require("@embedpdf/react/measurement");
+let _embedpdf_react_redaction = require("@embedpdf/react/redaction");
+let _embedpdf_react_form = require("@embedpdf/react/form");
+let _embedpdf_react_signature = require("@embedpdf/react/signature");
+let _embedpdf_react_i18n = require("@embedpdf/react/i18n");
+let _embedpdf_react_commands = require("@embedpdf/react/commands");
+let _embedpdf_react_shell = require("@embedpdf/react/shell");
+let _embedpdf_core_ui = require("@embedpdf/core-ui");
+let _embedpdf_web = require("@embedpdf/web");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _embedpdf_react_toolbar = require("@embedpdf/react/toolbar");
+//#region src/features.ts
+/** Every built-in feature and its parts: the names `disable` takes, as All features lists them. */
+const FEATURE_PARTS = {
+	annotations: [
+		"highlight",
+		"markup",
+		"drawing",
+		"text",
+		"notes",
+		"links"
+	],
+	shapes: [],
+	stamps: [],
+	comments: ["writing"],
+	forms: ["filling", "building"],
+	signatures: ["signing", "checking"],
+	redaction: [],
+	measurement: [],
+	pages: [],
+	attachments: ["adding"],
+	text: ["selection", "copy"],
+	search: [],
+	thumbnails: [],
+	outline: [],
+	documents: [
+		"open",
+		"download",
+		"print",
+		"tabs"
+	]
+};
+/** The features that change the document: what `readOnly` turns off. */
+const READ_ONLY_FEATURES = [
+	"annotations",
+	"shapes",
+	"stamps",
+	"comments.writing",
+	"forms",
+	"signatures.signing",
+	"redaction",
+	"measurement",
+	"pages",
+	"attachments.adding"
+];
+const isInside = (feature, outer) => feature === outer || feature.startsWith(`${outer}.`);
+/**
+* Whether nothing that changes the document is left, `isOff` saying which features are off (the
+* commands plugin's `isCategoryDisabled`): what the View only label shows for.
+*/
+const leavesNothingToChange = (isOff) => READ_ONLY_FEATURES.every(isOff);
+/**
+* The annotations each feature makes, by the names the annotation plugin's `editable` setting
+* takes: a subtype, or a measurement's intent. Every subtype people can change is here; a popup
+* or an unsupported annotation is never changed by hand. A signature placed off a field is a
+* stamp; one drawn into a field is the field's value.
+*/
+const FEATURE_ANNOTATIONS = {
+	"annotations.highlight": ["highlight"],
+	"annotations.markup": [
+		"underline",
+		"strikeout",
+		"squiggly"
+	],
+	"annotations.drawing": ["ink"],
+	"annotations.text": ["free-text", "caret"],
+	"annotations.notes": ["text"],
+	"annotations.links": ["link"],
+	shapes: [
+		"square",
+		"circle",
+		"line",
+		"polygon",
+		"polyline"
+	],
+	stamps: ["stamp"],
+	redaction: ["redact"],
+	measurement: [
+		"line-dimension",
+		"polyline-dimension",
+		"polygon-dimension"
+	],
+	"attachments.adding": ["file-attachment"],
+	"forms.building": ["widget"]
+};
+/** The fields each feature fills in, by the families the form plugin's `fillable` setting takes. */
+const FEATURE_FIELDS = {
+	"forms.filling": [
+		"text",
+		"checkbox",
+		"radio",
+		"combobox",
+		"listbox",
+		"pushbutton"
+	],
+	"signatures.signing": ["signature"]
+};
+/** `true` while no feature of `table` is off, `false` once every one is, else what the ones on hold. */
+function stillOn(table, off) {
+	const features = Object.keys(table);
+	const on = features.filter((feature) => !off.some((name) => isInside(feature, name)));
+	if (on.length === features.length) return true;
+	if (on.length === 0) return false;
+	return on.flatMap((feature) => table[feature]);
+}
+const partsOf = (feature) => FEATURE_PARTS[feature] ?? [];
+/**
+* The features `readOnly` turns off, minus `except`. An exception inside a feature splits it
+* into its parts, so `except: ['forms.filling']` leaves `forms.building` off.
+*/
+function readOnlyFeaturesOf(readOnly) {
+	if (!readOnly) return [];
+	const except = readOnly === true ? [] : readOnly.except;
+	const off = [];
+	const subtract = (feature) => {
+		if (except.some((kept) => isInside(feature, kept))) return;
+		const parts = partsOf(feature);
+		if (parts.length === 0 || !except.some((kept) => isInside(kept, feature))) {
+			off.push(feature);
+			return;
+		}
+		for (const part of parts) subtract(`${feature}.${part}`);
+	};
+	for (const feature of READ_ONLY_FEATURES) subtract(feature);
+	return off;
+}
+/** The features `disable` and `readOnly` turn off: the names without a colon, and `readOnly`'s. */
+function featuresOffOf(disable, readOnly) {
+	const features = (disable ?? []).filter((name) => !name.includes(":"));
+	return [.../* @__PURE__ */ new Set([...features, ...readOnlyFeaturesOf(readOnly)])];
+}
+/**
+* The commands plugin's settings for a `disable` list and a `readOnly` value: the names with a
+* colon are command ids, the rest features, and `readOnly` adds its own features.
+*/
+function disabledSettingsOf(disable, readOnly) {
+	const commands = new Set((disable ?? []).filter((name) => name.includes(":")));
+	return {
+		disabledCategories: featuresOffOf(disable, readOnly),
+		disabledCommands: [...commands]
+	};
+}
+/**
+* What people may still change by hand for a `disable` list and a `readOnly` value: the
+* annotations and fields of the features left on. A single command turned off leaves them.
+*/
+function byHandSettingsOf(disable, readOnly) {
+	const off = featuresOffOf(disable, readOnly);
+	return {
+		editable: stillOn(FEATURE_ANNOTATIONS, off),
+		fillable: stillOn(FEATURE_FIELDS, off)
+	};
+}
+/**
+* What two `editable` or `fillable` values both allow: `true` is everything, `false` nothing,
+* and a list its names, in the order of `left`. The viewer's own value and the app's setting
+* meet here, so each can only take away.
+*/
+function bothAllow(left, right) {
+	if (left === true) return right;
+	if (right === true) return left;
+	if (left === false || right === false) return false;
+	return left.filter((name) => right.includes(name));
+}
+/** Whether two `editable` or `fillable` values say the same. */
+const sameByHand = (left, right) => typeof left === "boolean" || typeof right === "boolean" ? left === right : left.length === right.length && left.every((name, index) => name === right[index]);
+//#endregion
+//#region src/ui/bar-edge.tsx
+/**
+* Where a bar is, for what opens from it. The shell wraps each bar it draws in
+* a `BarEdgeProvider` naming the viewer edge the bar sits on; a menu (and the
+* toolbar's own "More") reads it with `useBarEdge()` and opens away from that
+* edge: a bottom bar's menus open upward, a start bar's to the side, a
+* floating bar's toward the middle of the viewer.
+*
+* A floating bar names the half of the viewer it floats in (`float-top`,
+* `float-bottom`), since its menus open toward the other half; a bar over a
+* selection says `selection`, and its menus open on the side the bar sits,
+* above or below what's selected, away from it. Outside any provider the edge
+* is `'top'`, the main bar's.
+*/
+const BarEdgeContext = (0, react.createContext)("top");
+/** Names the edge of the bar drawn inside it. */
+const BarEdgeProvider = BarEdgeContext.Provider;
+/** The edge of the bar this component is drawn in (`'top'` outside any bar). */
+function useBarEdge() {
+	return (0, react.useContext)(BarEdgeContext);
+}
+//#endregion
+//#region src/ui/measurement-scale.tsx
+/**
+* The Measure bar's scale button: the current page's drawing scale, which opens the measurement
+* panel. Apart from the panel and the calibration dialog (measurement.tsx), so the bar draws it
+* without loading them.
+*/
+const button = "border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm disabled:opacity-50";
+function MeasurementScaleButton() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const scale = (0, _embedpdf_react_measurement.usePageScale)((0, _embedpdf_react_runtime.useSelector)(_embedpdf_react_stage.StageToken, (stage) => stage.getCurrentPage()));
+	const surface = (0, _embedpdf_react_shell.useSurface)("measurement");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		part: "toolbar-button",
+		className: `${button} inline-flex items-center gap-1.5 whitespace-nowrap`,
+		onClick: () => surface.open(),
+		title: t("measurement.title"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+			name: "updateScale",
+			size: 20,
+			className: "shrink-0"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+			t("measurement.scale"),
+			":",
+			" ",
+			scale?.measure?.subtype === "rectilinear" ? scale.measure.ratio ?? t("measurement.custom") : t("measurement.unavailable")
+		] })]
+	});
+}
+function PageNumber() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const stage = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_stage.StageToken);
+	const current = (0, _embedpdf_react_stage.useStageState)((state) => state.currentPageIndex + 1);
+	const total = (0, _embedpdf_react_stage.useStageState)((state) => state.pageCount);
+	/** What the field holds while it is open, or `null` while the number shows. */
+	const [draft, setDraft] = (0, react.useState)(null);
+	const field = (0, react.useRef)(null);
+	const button = (0, react.useRef)(null);
+	/** Whether the field closed from the keyboard, so focus goes back to the number. */
+	const refocus = (0, react.useRef)(false);
+	const editing = draft !== null;
+	(0, react.useEffect)(() => {
+		if (editing) {
+			field.current?.focus();
+			field.current?.select();
+		} else if (refocus.current) {
+			refocus.current = false;
+			button.current?.focus();
+		}
+	}, [editing]);
+	if (!total) return null;
+	/** Closes the field from the keyboard: focus goes back to the number. */
+	const close = () => {
+		refocus.current = true;
+		setDraft(null);
+	};
+	const go = () => {
+		const page = Number.parseInt(draft ?? "", 10);
+		if (Number.isFinite(page)) stage?.goToPage(Math.min(Math.max(page, 1), total) - 1);
+		close();
+	};
+	const [before, after = ""] = t("demo.page", { params: {
+		current: "",
+		total
+	} }).split("");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "text-fg-secondary block whitespace-nowrap px-3.5 text-sm leading-7",
+		children: [
+			before,
+			editing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: field,
+				type: "text",
+				inputMode: "numeric",
+				"aria-label": t("demo.goToPage"),
+				value: draft,
+				onChange: (event) => setDraft(event.target.value.replace(/[^0-9]/g, "")),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						go();
+					} else if (event.key === "Escape") {
+						event.preventDefault();
+						close();
+					}
+				},
+				onBlur: () => setDraft(null),
+				style: { width: `${String(total).length + 1}ch` },
+				className: "bg-hover ring-accent text-fg rounded text-center tabular-nums outline-none ring-1"
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				ref: button,
+				type: "button",
+				title: t("demo.goToPage"),
+				onClick: () => setDraft(String(current)),
+				className: "hover:bg-hover hover:text-fg -mx-0.5 cursor-pointer rounded px-0.5 tabular-nums",
+				children: current
+			}),
+			after
+		]
+	});
+}
+//#endregion
+//#region src/ui/quick-stamps.tsx
+/**
+* Quick marks in the toolbar: a row of stamp thumbnails that arm on click —
+* the checkmark, the cross, whatever the embedder configured
+* (`plugins.stamp.quick`: `library:name`, `standard` for the standard stamps). The hover ghost and
+* the click placement are the annotation plugin's, exactly as from the
+* sidebar; only the picker moved. Renders nothing until the assets exist.
+* Lives in the workspace toolbar, so it reads the active document's tool.
+*/
+function QuickStamps() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const stamp = (0, _embedpdf_react_stamp.useStamp)();
+	const { standard, quick } = require_icons.useStampSettings();
+	const { locale } = (0, _embedpdf_react_i18n.useI18nState)();
+	const assets = (0, _embedpdf_react_stamp.useStampAssets)();
+	const documentId = (0, _embedpdf_react_runtime.useDocumentId)();
+	const activeToolId = (0, _embedpdf_react_runtime.useOptionalSelector)(_embedpdf_react_interaction.InteractionToken, (interaction) => interaction.getActiveToolId(), null);
+	const armedId = (0, _embedpdf_react_stamp.useStampState)((state) => state.armedAsset?.id ?? null);
+	const ids = (quick ?? []).map(require_stamp_store.quickStampAssetIdOf);
+	const wantsDefault = ids.some((id) => id.startsWith(`${require_stamp_store.DEFAULT_LIBRARY_ID}:`));
+	(0, react.useEffect)(() => {
+		if (!wantsDefault) return;
+		require_stamp_store.restoreStampLibrariesOnce(stamp).then(() => require_stamp_store.ensureDefaultLibrary(stamp, require_stamp_store.resolveStampsLocale(locale), standard)).catch((error) => console.error("[embedpdf] quick stamps failed:", error));
+	}, [
+		stamp,
+		locale,
+		wantsDefault
+	]);
+	const shown = ids.map((id) => assets.find((asset) => asset.id === id)).filter((asset) => !!asset);
+	if (shown.length === 0 || !documentId) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center gap-1",
+		role: "group",
+		"aria-label": t("demo.quickStampsLabel"),
+		children: shown.map((asset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickStampButton, {
+			asset,
+			active: activeToolId === "stamp" && armedId === asset.id,
+			onArm: () => void stamp.armAsset(asset.id).catch((error) => console.error("[embedpdf] arm failed", error))
+		}, asset.id))
+	});
+}
+function QuickStampButton({ asset, active, onArm }) {
+	const url = (0, _embedpdf_react_stamp.useStampAssetPreviewUrl)(asset.id);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: onArm,
+		title: asset.label,
+		"aria-label": asset.label,
+		"aria-pressed": active || void 0,
+		part: buttonPart(active),
+		className: buttonClass(active, true),
+		children: url ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+			src: url,
+			alt: "",
+			className: "h-5 w-5 object-contain",
+			draggable: false
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-xs",
+			children: asset.label
+		})
+	});
+}
+//#endregion
+//#region src/ui/view-only.tsx
+/**
+* The View only label: the `{ custom: 'view-only' }` item, in the main bar by default. It says why
+* the tools are gone, while nothing that changes the document is on (`readOnly`, or `disable`
+* naming every such feature), or while the scope lets this user change nothing in the open
+* document. Otherwise it draws nothing.
+*/
+/** Whether the scope lets this user change an annotation: make one, or change or delete one there. */
+function mayChangeAnnotations(annotation) {
+	if (annotation.canCreate()) return true;
+	return annotation.list().some(({ ref }) => annotation.canUpdate(ref) || annotation.canDelete(ref));
+}
+/** Whether the scope lets this user change the form: its fields, a value, or a signature. */
+function mayChangeForm(form, signature) {
+	if (form.canDesign()) return true;
+	return form.list().some((field) => field.family === "signature" ? signature?.canSign(field.ref) ?? false : form.canFill(field.ref));
+}
+/**
+* Whether the scope lets this user change nothing in the open document: no annotation to make,
+* change or delete (comments included), no field to fill in, sign or design, no page to edit and
+* no redaction to apply. Asked of the plugins' `can*` twins; `false` while no document is open.
+*/
+function useNothingAllowed() {
+	const open = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_annotation.AnnotationToken) !== null;
+	const signature = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_signature.SignatureToken);
+	const annotates = (0, _embedpdf_react_runtime.useOptionalSelector)(_embedpdf_react_annotation.AnnotationToken, mayChangeAnnotations, false);
+	const fills = (0, _embedpdf_react_runtime.useOptionalSelector)(_embedpdf_react_form.FormToken, (form) => mayChangeForm(form, signature), false);
+	const editsPages = (0, _embedpdf_react_runtime.useOptionalSelector)(_embedpdf_react_page_edit.PageEditToken, (pageEdit) => pageEdit.canEdit(), false);
+	const redacts = (0, _embedpdf_react_runtime.useOptionalSelector)(_embedpdf_react_redaction.RedactionToken, (redaction) => redaction.canApply(), false);
+	return open && !annotates && !fills && !editsPages && !redacts;
+}
+/**
+* The label; `compact` draws its icon alone (a narrow bar, or a vertical one), its words still
+* there for a screen reader. Plain text, not a live region: it says what the viewer is, and the
+* refusal notice stays the viewer's one status message. Its tooltip says why.
+*/
+function ViewOnlyLabel({ compact = false }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const commands = (0, _embedpdf_react_commands.useCommands)();
+	(0, _embedpdf_react_commands.useCommandsSettings)((settings) => settings.disabledCategories);
+	const turnedOff = leavesNothingToChange((feature) => commands.isCategoryDisabled(feature));
+	const nothingAllowed = useNothingAllowed();
+	if (!turnedOff && !nothingAllowed) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		title: t(turnedOff ? "viewOnly.turnedOff" : "viewOnly.notAllowed"),
+		className: "bg-hover text-fg-secondary flex h-7 shrink-0 select-none items-center gap-1.5 whitespace-nowrap rounded-full px-2.5 text-xs font-medium",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+			name: "eye",
+			size: 16,
+			className: "shrink-0"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: compact ? "sr-only" : void 0,
+			children: t("viewOnly.label")
+		})]
+	});
+}
+//#endregion
+//#region src/ui/item-context.ts
+/** The attribute each field of a {@link ToolbarItemContext} is written to. */
+const TOOLBAR_ITEM_CONTEXT_ATTRIBUTES = {
+	orientation: "data-orientation",
+	edge: "data-edge",
+	variant: "data-variant",
+	size: "data-size"
+};
+/** The public place of a bar on `edge`: a floating bar is `float`, whichever half it floats in. */
+const toolbarItemEdgeOf = (edge) => edge === "float-top" || edge === "float-bottom" ? "float" : edge;
+/** Write `context` on `element`, changing only the attributes that differ. */
+function writeToolbarItemContext(element, context) {
+	for (const [field, attribute] of Object.entries(TOOLBAR_ITEM_CONTEXT_ATTRIBUTES)) {
+		const value = context[field];
+		if (value === null) element.removeAttribute(attribute);
+		else if (element.getAttribute(attribute) !== value) element.setAttribute(attribute, value);
+	}
+}
+//#endregion
+//#region src/ui/slotted-edges.ts
+/**
+* The edge of the bar each slotted toolbar item is in, by the element slotted
+* there, for the viewer's own components inside it: they're drawn apart from
+* the bar (`placed-components.tsx`), and a menu among them opens away from
+* the bar's edge like the bar's own. The item sockets write it
+* (`item-socket.tsx`); outside any item, a component opens its menus like the
+* main bar's.
+*/
+/** The element `node` is a child of: its parent, or the host of the shadow root it is in. */
+const parentOf = (node) => node.parentElement ?? node.getRootNode().host ?? null;
+function createSlottedEdges() {
+	const edges = /* @__PURE__ */ new WeakMap();
+	const listeners = /* @__PURE__ */ new Set();
+	let version = 0;
+	return {
+		set(element, edge) {
+			if (edges.get(element) === edge) return;
+			edges.set(element, edge);
+			version += 1;
+			for (const listener of [...listeners]) listener();
+		},
+		edgeOf(element) {
+			for (let node = element; node; node = parentOf(node)) {
+				const edge = edges.get(node);
+				if (edge) return edge;
+			}
+			return "top";
+		},
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		version: () => version
+	};
+}
+const SlottedEdgesContext = (0, react.createContext)(createSlottedEdges());
+/** Gives the item sockets and the viewer's own components inside it one {@link SlottedEdges}. */
+const SlottedEdgesProvider = SlottedEdgesContext.Provider;
+function useSlottedEdges() {
+	return (0, react.useContext)(SlottedEdgesContext);
+}
+//#endregion
+//#region src/ui/item-socket.tsx
+/**
+* Your own toolbar item, in its bar: a `<slot name="item:<id>">` the browser
+* shows your element in, with what the item stands for when nothing is
+* slotted (its command's button). What's slotted lives in the page, so the
+* socket is measured where it renders; the toolbar's measurement layer can't
+* hold it. It tells what's slotted where it sits (`item-context.ts`), and the
+* viewer's own components inside it learn the bar's edge from it, so their
+* menus open away from the bar.
+*/
+/** The socket's box: a row of what's slotted, at its own size along the bar. */
+const SOCKET_STYLE = {
+	display: "inline-flex",
+	alignItems: "center",
+	flexShrink: 0
+};
+function ItemSocket({ id, variant, orientation, measure, children }) {
+	const slot = (0, react.useRef)(null);
+	const edge = useBarEdge();
+	const { size } = require_icons.useLayoutEnv();
+	const edges = useSlottedEdges();
+	const report = (0, react.useRef)(measure);
+	report.current = measure;
+	const resizes = (0, react.useRef)(null);
+	const hasVariants = variant !== null;
+	(0, react.useLayoutEffect)(() => {
+		const element = slot.current;
+		if (!element) return;
+		const side = orientation === "vertical" ? "height" : "width";
+		const measureNow = () => report.current(element.getBoundingClientRect()[side]);
+		if (!hasVariants) measureNow();
+		const observer = new ResizeObserver(measureNow);
+		observer.observe(element);
+		resizes.current = observer;
+		return () => {
+			observer.disconnect();
+			resizes.current = null;
+		};
+	}, [orientation, hasVariants]);
+	(0, react.useLayoutEffect)(() => {
+		const element = slot.current;
+		const observer = resizes.current;
+		if (!element || !observer) return;
+		observer.unobserve(element);
+		observer.observe(element);
+	}, [variant]);
+	(0, react.useLayoutEffect)(() => {
+		const element = slot.current;
+		if (!element) return;
+		const context = {
+			orientation,
+			edge: toolbarItemEdgeOf(edge),
+			variant,
+			size
+		};
+		const tell = () => {
+			for (const slotted of element.assignedElements()) {
+				writeToolbarItemContext(slotted, context);
+				edges.set(slotted, edge);
+			}
+		};
+		tell();
+		element.addEventListener("slotchange", tell);
+		return () => element.removeEventListener("slotchange", tell);
+	}, [
+		orientation,
+		edge,
+		variant,
+		size,
+		edges
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("slot", {
+		ref: slot,
+		name: `item:${id}`,
+		style: SOCKET_STYLE,
+		children
+	});
+}
+//#endregion
+//#region src/ui/menu-placement.ts
+/**
+* The placement of a menu opened from a button in a bar on `edge`: below a
+* top bar's button, above a bottom bar's, beside a start or end bar's (on the
+* side of the pages), toward the middle from a floating bar, and from a bar
+* over a selection on the side the bar sits (`selectionBar`), away from
+* what's selected.
+*/
+function menuPlacementOf(edge, direction, align = "start", selectionBar = "above") {
+	if (edge === "start" || edge === "end") return `${edge === "start" === (direction === "ltr") ? "right" : "left"}-${align}`;
+	return `${edge === "bottom" || edge === "float-bottom" || edge === "selection" && selectionBar === "above" ? "top" : "bottom"}-${align === "start" === (direction === "ltr") ? "start" : "end"}`;
+}
+/** The placement of a submenu: beside its row, on the side the text runs toward, tops lined up. */
+function submenuPlacementOf(direction) {
+	return direction === "ltr" ? "right-start" : "left-start";
+}
+/** The key that opens a submenu from its row, and the one that closes it again. */
+function submenuKeysOf(direction) {
+	return direction === "ltr" ? {
+		open: "ArrowRight",
+		close: "ArrowLeft"
+	} : {
+		open: "ArrowLeft",
+		close: "ArrowRight"
+	};
+}
+//#endregion
+//#region src/ui/menu.tsx
+/**
+* The chrome's menus: a layout menu (sections of command ids) and the menus
+* the toolbar derives (the "More" menu, a folded group's), drawn as rows in a
+* popover that opens away from its bar's edge (`menu-placement.ts`). The
+* popover is in the browser's top layer, so no bar, panel or the viewer's own
+* box clips it, and it takes the menu keys from `@embedpdf/web`. Rows resolve
+* live through the command registry: label, icon, shortcut, whether it's the
+* current choice, enabled state; a row whose command isn't visible is gone, and a section
+* with none left goes with its line. A row whose command opens a menu opens
+* it beside it. On a phone (a compact viewer) every menu is a sheet from the
+* bottom of the viewer instead, and a submenu slides in over the menu it
+* opened from, with a row that goes back.
+*/
+/** Px between a menu and its button, and between a menu and the window's edges. */
+const MENU_GAP_PX = 4;
+/** The `popover` attribute, which React's types don't list yet. */
+const POPOVER = { popover: "manual" };
+/** The rows of a menu, the elements the menu keys move between. */
+const MENU_ITEM_SELECTOR = "[role=\"menuitem\"], [role=\"menuitemradio\"], [role=\"menuitemcheckbox\"]";
+/** A copy no one can use: the toolbar's hidden measurement layer draws every button twice. */
+const HIDDEN_COPY_SELECTOR = "[inert], [aria-hidden=\"true\"]";
+/** Inside a menu, a menu is a submenu: it opens beside its row. */
+const InMenuContext = (0, react.createContext)(false);
+/** The rows of `menu` itself, not those of a submenu open inside it. */
+const itemsOf = (menu) => [...menu.querySelectorAll(MENU_ITEM_SELECTOR)].filter((item) => item.closest("[role=\"menu\"]") === menu);
+/** The button that opens the menu: the one beside it that says it has a popup. */
+const triggerOf = (holder, menu) => [...holder.querySelectorAll("[aria-haspopup]")].find((candidate) => !menu.contains(candidate)) ?? null;
+/**
+* Where the bar over a selection that `element` is in sits now: its anchored wrapper says so
+* in `data-placement` (`Anchored` in `@embedpdf/react`), `bottom…` once it went below.
+*/
+const selectionBarSideOf = (element) => element.closest("[data-placement]")?.getAttribute("data-placement")?.startsWith("bottom") ? "below" : "above";
+const boxOf = (element) => {
+	const rect = element.getBoundingClientRect();
+	return {
+		x: rect.left,
+		y: rect.top,
+		width: rect.width,
+		height: rect.height
+	};
+};
+/**
+* What a submenu opens beside: its row, across the whole width of the menu
+* the row is in, and raised by the submenu's own padding so its first row
+* lines up with the row that opened it.
+*/
+function submenuBoxOf(holder, submenu) {
+	const row = boxOf(holder);
+	const parent = holder.closest("[role=\"menu\"]");
+	const across = parent ? boxOf(parent) : row;
+	const inset = submenu.clientTop + parseFloat(getComputedStyle(submenu).paddingTop || "0");
+	return {
+		x: across.x,
+		y: row.y - inset,
+		width: across.width,
+		height: row.height
+	};
+}
+/**
+* Place `menu` around `box` in the window: on the side `placement` asks for,
+* or the other side when that has no room, moved to stay on screen, and never
+* taller than the window.
+*/
+function placeMenu(menu, box, placement, gap) {
+	const view = (0, _embedpdf_web.anchoredViewOf)(menu, "client");
+	if (!view) return;
+	menu.style.maxHeight = `${Math.max(0, view.height - 2 * MENU_GAP_PX)}px`;
+	const { left, top } = (0, _embedpdf_web.fitAnchoredRect)(box, placement, gap, {
+		size: {
+			width: menu.offsetWidth,
+			height: menu.offsetHeight
+		},
+		view
+	});
+	menu.style.left = `${left}px`;
+	menu.style.top = `${top}px`;
+	const landed = menu.getBoundingClientRect();
+	if (Math.abs(landed.left - left) > .5 || Math.abs(landed.top - top) > .5) {
+		menu.style.left = `${2 * left - landed.left}px`;
+		menu.style.top = `${2 * top - landed.top}px`;
+	}
+}
+/**
+* Open `menu` from the button beside it in `holder`: show it in the top layer,
+* place it and keep it placed, close it on a press outside it and its button,
+* and drive it from the keyboard (a submenu's row also opens it with the arrow
+* toward it, and the arrow back closes it). Returns the close.
+*/
+function openMenu(menu, holder, options) {
+	const { nested, close } = options;
+	const trigger = triggerOf(holder, menu);
+	const direction = (0, _embedpdf_web.directionOf)(holder);
+	const placement = options.placement(direction);
+	const name = trigger?.getAttribute("aria-label") || trigger?.getAttribute("title") || trigger?.textContent?.trim();
+	if (name) menu.setAttribute("aria-label", name);
+	if (typeof menu.showPopover === "function") menu.showPopover();
+	const place = () => placeMenu(menu, nested ? submenuBoxOf(holder, menu) : boxOf(holder), placement, nested ? 0 : MENU_GAP_PX);
+	place();
+	const resizes = new ResizeObserver(place);
+	resizes.observe(menu);
+	resizes.observe(holder);
+	const stopGeometry = (0, _embedpdf_web.observeClientGeometry)(place);
+	const stopOutside = (0, _embedpdf_web.observeOutsidePress)(menu, (event) => {
+		if (!trigger || !event.composedPath().includes(trigger)) close();
+	});
+	const detachKeys = (0, _embedpdf_web.attachMenuKeys)(menu, {
+		trigger,
+		close,
+		items: () => itemsOf(menu)
+	});
+	const keys = submenuKeysOf(direction);
+	const onKeyDown = (event) => {
+		const item = event.target;
+		const free = !event.defaultPrevented;
+		const opensMenu = item.getAttribute("aria-haspopup") === "menu";
+		if (free && event.key === keys.open && opensMenu && itemsOf(menu).includes(item)) {
+			event.preventDefault();
+			if (item.getAttribute("aria-expanded") !== "true") item.click();
+			else {
+				const submenu = item.parentElement?.querySelector("[role=\"menu\"]");
+				if (submenu) itemsOf(submenu)[0]?.focus();
+			}
+		} else if (free && event.key === keys.close && nested) {
+			event.preventDefault();
+			close();
+			trigger?.focus();
+		}
+		if (nested && event.key !== "Tab") event.stopPropagation();
+	};
+	menu.addEventListener("keydown", onKeyDown);
+	return () => {
+		menu.removeEventListener("keydown", onKeyDown);
+		detachKeys();
+		stopOutside();
+		stopGeometry();
+		resizes.disconnect();
+		if (typeof menu.hidePopover === "function" && menu.matches(":popover-open")) menu.hidePopover();
+	};
+}
+/**
+* A menu's surface, opened by the button beside it in the same parent (the
+* one with `aria-haspopup`). It opens away from its bar's edge, or beside its
+* row in another menu, and closes on Escape, Tab or a press anywhere outside
+* it and its button. In a compact viewer it opens as a sheet.
+*/
+function MenuPopover(props) {
+	const probe = (0, react.useRef)(null);
+	const [usable, setUsable] = (0, react.useState)(false);
+	const compact = require_icons.useLayoutEnv().size === "compact";
+	(0, react.useLayoutEffect)(() => {
+		const holder = probe.current?.parentElement;
+		if (holder && !holder.closest(HIDDEN_COPY_SELECTOR)) setUsable(true);
+	}, []);
+	if (!usable) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		ref: probe,
+		hidden: true
+	});
+	return compact ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSheet, { ...props }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OpenMenu, { ...props });
+}
+function OpenMenu({ children, onClose, align = "start" }) {
+	const surface = (0, react.useRef)(null);
+	const edge = useBarEdge();
+	const nested = (0, react.useContext)(InMenuContext);
+	const close = (0, react.useRef)(onClose);
+	close.current = onClose;
+	(0, react.useLayoutEffect)(() => {
+		const menu = surface.current;
+		const holder = menu?.parentElement;
+		if (!menu || !holder) return;
+		return openMenu(menu, holder, {
+			placement: (direction) => nested ? submenuPlacementOf(direction) : menuPlacementOf(edge, direction, align, edge === "selection" ? selectionBarSideOf(holder) : void 0),
+			nested,
+			close: () => close.current()
+		});
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: surface,
+		...POPOVER,
+		role: "menu",
+		part: "menu",
+		className: "border-border-subtle bg-elevated text-fg z-50 overflow-y-auto rounded-lg border shadow-xl",
+		style: {
+			position: "fixed",
+			right: "auto",
+			bottom: "auto",
+			margin: 0
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InMenuContext.Provider, {
+			value: true,
+			children
+		})
+	});
+}
+/** In a menu's sheet: how a row opens its submenu, over the menu. Null outside a sheet. */
+const MenuSheetContext = (0, react.createContext)(null);
+/** The button a menu's sheet opened from: the one beside the sheet that says it has a popup. */
+function sheetTriggerOf(menu) {
+	const layer = menu.closest("[data-epdf-layer]");
+	const holder = layer?.parentElement;
+	return layer && holder ? triggerOf(holder, layer) : null;
+}
+/**
+* A menu as a sheet: its rows in a sheet from the bottom of the viewer, which closes on a tap
+* above it, Escape or a pick. A row that opens a menu slides that menu in over this one, with a
+* row (or the arrow key back) that goes back to where it was.
+*/
+function MenuSheet({ children, onClose }) {
+	const [submenus, setSubmenus] = (0, react.useState)([]);
+	const current = (0, react.useRef)(submenus);
+	current.current = submenus;
+	/** The row to give focus back to once the submenu over it has gone. */
+	const refocus = (0, react.useRef)(null);
+	const close = (0, react.useRef)(onClose);
+	close.current = onClose;
+	const open = (submenu) => setSubmenus([...current.current, submenu]);
+	const back = () => {
+		const shown = current.current;
+		if (shown.length === 0) return;
+		refocus.current = shown[shown.length - 1].opener;
+		setSubmenus(shown.slice(0, -1));
+	};
+	(0, react.useLayoutEffect)(() => {
+		refocus.current?.focus();
+		refocus.current = null;
+	}, [submenus]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_sheet.Sheet, {
+		label: "",
+		onClose,
+		trapFocus: false,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuSheetContext.Provider, {
+			value: open,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetMenu, {
+					covered: submenus.length > 0,
+					close: () => close.current(),
+					children
+				}), submenus.map((submenu, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetMenu, {
+					covered: i < submenus.length - 1,
+					close: back,
+					opener: submenu.opener,
+					label: submenu.label,
+					onBack: back,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuBody, {
+						menuId: submenu.menuId,
+						onRun: submenu.onRun
+					})
+				}, i))]
+			})
+		})
+	});
+}
+/**
+* One menu in a menu's sheet: the first one, or a submenu over it with a row that goes back.
+* It takes the menu keys while it's on top; covered, it can't take focus or presses.
+*/
+function SheetMenu({ covered, close, opener, label, onBack, children }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const menu = (0, react.useRef)(null);
+	const actions = (0, react.useRef)({
+		close,
+		onBack
+	});
+	actions.current = {
+		close,
+		onBack
+	};
+	(0, react.useLayoutEffect)(() => {
+		const element = menu.current;
+		if (!element) return;
+		const trigger = opener ?? sheetTriggerOf(element);
+		const name = label ?? (trigger?.getAttribute("aria-label") || trigger?.getAttribute("title"));
+		if (name) element.setAttribute("aria-label", name);
+		const detachKeys = (0, _embedpdf_web.attachMenuKeys)(element, {
+			trigger,
+			close: () => actions.current.close(),
+			items: () => itemsOf(element),
+			initialFocus: "none"
+		});
+		queueMicrotask(() => {
+			if (element.isConnected && !element.inert) itemsOf(element).find((item) => !(0, _embedpdf_web.isUnavailable)(item))?.focus();
+		});
+		const keys = submenuKeysOf((0, _embedpdf_web.directionOf)(element));
+		const onKeyDown = (event) => {
+			if (event.defaultPrevented) return;
+			const item = event.target;
+			if (event.key === keys.open && item.getAttribute("aria-haspopup") === "menu") {
+				event.preventDefault();
+				item.click();
+			} else if (event.key === keys.close && actions.current.onBack) {
+				event.preventDefault();
+				actions.current.onBack();
+			}
+		};
+		element.addEventListener("keydown", onKeyDown);
+		return () => {
+			element.removeEventListener("keydown", onKeyDown);
+			detachKeys();
+		};
+	}, []);
+	(0, react.useLayoutEffect)(() => {
+		if (menu.current) menu.current.inert = covered;
+	}, [covered]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: menu,
+		role: "menu",
+		part: "menu",
+		className: `bg-elevated col-start-1 row-start-1 min-w-0 ${onBack ? "starting:translate-x-full rtl:starting:-translate-x-full transition-[translate] duration-200 ease-out motion-reduce:transition-none" : ""}`,
+		children: [onBack && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "p-1 pb-0",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				type: "button",
+				tabIndex: -1,
+				role: "menuitem",
+				part: "menu-item",
+				"data-epdf-menu-back": "",
+				onClick: onBack,
+				className: ROW_CLASS,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+					name: "chevronLeft",
+					size: 16,
+					className: "text-fg-muted rtl:-scale-x-100"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1 truncate",
+					children: t("menu.back")
+				})]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "text-fg px-2.5 pb-1 pt-2 text-sm font-semibold",
+				children: label
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InMenuContext.Provider, {
+			value: true,
+			children
+		})]
+	});
+}
+/**
+* Which button each open menu opened from, per viewer (its shell). The shell
+* keeps a menu open by its id, and several buttons can name one (the zoom menu
+* in the main bar and in a floating bar): it opens at the button pressed, or
+* at the first one drawn when code opened it.
+*/
+const openers = /* @__PURE__ */ new WeakMap();
+function openersOf(shell) {
+	let byMenu = openers.get(shell);
+	if (!byMenu) {
+		byMenu = /* @__PURE__ */ new Map();
+		openers.set(shell, byMenu);
+	}
+	return byMenu;
+}
+/**
+* A button that opens the layout menu `menuId`, and the menu when it's open
+* there. `children` draws the button, told whether its menu is open at it; the
+* menu lines up with this wrapper (`className`), so it can hold more than the
+* button, like the zoom field around its chevron.
+*/
+function MenuAnchor({ menuId, className = "relative inline-flex", children }) {
+	const shell = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_shell.ShellToken);
+	const open = (0, _embedpdf_react_shell.useShellState)((state) => state.openMenus.includes(menuId));
+	const anchor = (0, react.useRef)(null);
+	const [, claim] = (0, react.useReducer)((count) => count + 1, 0);
+	const opener = shell ? openersOf(shell).get(menuId) : void 0;
+	const openHere = open && opener !== void 0 && opener === anchor.current;
+	(0, react.useLayoutEffect)(() => {
+		const element = anchor.current;
+		if (!shell || !element) return;
+		const byMenu = openersOf(shell);
+		const current = byMenu.get(menuId);
+		if (!open) {
+			if (current === element) byMenu.delete(menuId);
+			return;
+		}
+		if (!current?.isConnected && !element.closest(HIDDEN_COPY_SELECTOR)) {
+			byMenu.set(menuId, element);
+			claim();
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		ref: anchor,
+		className,
+		onClickCapture: (event) => {
+			const target = event.target;
+			const pressedButton = target.closest("[aria-haspopup]") && !target.closest("[role=\"menu\"]");
+			if (shell && anchor.current && pressedButton) openersOf(shell).set(menuId, anchor.current);
+		},
+		children: [children(openHere), openHere && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPopover, {
+			onClose: () => shell?.closeMenu(menuId),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuBody, {
+				menuId,
+				onRun: () => shell?.closeMenu(menuId)
+			})
+		})]
+	});
+}
+const choiceOf = (rows) => {
+	const choosable = rows.filter((row) => !row.menu);
+	const active = choosable.filter((row) => row.active).length;
+	if (active === 0) return "none";
+	return active === 1 && choosable.length > 1 ? "radio" : "checkbox";
+};
+const ROLE_OF = {
+	none: "menuitem",
+	radio: "menuitemradio",
+	checkbox: "menuitemcheckbox"
+};
+const ROW_BASE = "flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 text-start text-sm outline-none transition-colors aria-disabled:cursor-not-allowed aria-disabled:opacity-40";
+/** A row, the pointer over it and the keyboard on it: the neutral hover look. */
+const ROW_CLASS = `${ROW_BASE} text-fg-secondary hover:bg-hover focus-visible:bg-hover aria-disabled:hover:bg-transparent`;
+/**
+* The current choice: the accent look of an active toolbar button, so "on" reads the same
+* everywhere and never looks like the row the keyboard is on. The keyboard on it adds an inset
+* ring; with forced colors, where backgrounds go, an outline marks it.
+*/
+const CHOSEN_ROW_CLASS = `${ROW_BASE} bg-selected text-accent focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-accent forced-colors:outline-2 forced-colors:outline-solid forced-colors:-outline-offset-2`;
+/**
+* One row: the command's icon, label and shortcut, in the accent look when it
+* is the current choice. A row that can't run says why in its tooltip, and
+* stays where it is, greyed out.
+*/
+function MenuItem({ command, choice, onSelect }) {
+	const checked = choice !== "none" && command.active;
+	const [shortcut] = command.shortcuts;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		type: "button",
+		tabIndex: -1,
+		role: ROLE_OF[choice],
+		"aria-checked": choice === "none" ? void 0 : command.active,
+		"aria-disabled": command.enabled ? void 0 : true,
+		title: command.enabled ? void 0 : command.disabledReason,
+		part: checked ? "menu-item menu-item-active" : "menu-item",
+		onClick: () => {
+			if (command.enabled) onSelect();
+		},
+		className: checked ? CHOSEN_ROW_CLASS : ROW_CLASS,
+		children: [
+			command.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: command.icon,
+				size: 16,
+				accent: command.iconAccent,
+				className: checked ? "text-accent" : "text-fg-muted"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "flex-1 truncate",
+				children: command.label
+			}),
+			shortcut && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-fg-muted ms-4 text-xs",
+				children: (0, _embedpdf_react_commands.formatShortcut)(shortcut)
+			})
+		]
+	});
+}
+/**
+* A row whose command opens a menu: it opens that menu beside it, with a
+* click or the arrow key toward it. Picking a row in there runs `onRun` too,
+* so the whole menu closes.
+*/
+function SubmenuItem({ command, menuId, onRun }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const openInSheet = (0, react.useContext)(MenuSheetContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "none",
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			tabIndex: -1,
+			role: "menuitem",
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-disabled": command.enabled ? void 0 : true,
+			title: command.enabled ? void 0 : command.disabledReason,
+			part: "menu-item",
+			onClick: (event) => {
+				if (!command.enabled) return;
+				if (openInSheet) openInSheet({
+					menuId,
+					label: command.label,
+					opener: event.currentTarget,
+					onRun
+				});
+				else setOpen((previous) => !previous);
+			},
+			className: `${ROW_CLASS} ${open ? "bg-hover" : ""}`,
+			children: [
+				command.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+					name: command.icon,
+					size: 16,
+					accent: command.iconAccent,
+					className: "text-fg-muted"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "flex-1 truncate",
+					children: command.label
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+					name: "chevronRight",
+					size: 16,
+					className: "text-fg-muted rtl:-scale-x-100"
+				})
+			]
+		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPopover, {
+			onClose: () => setOpen(false),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuBody, {
+				menuId,
+				onRun
+			})
+		})]
+	});
+}
+/** A layout menu's row, by command id. */
+function MenuRow({ commandId, choice, onRun }) {
+	const command = (0, _embedpdf_react_commands.useCommand)(commandId);
+	if (!command.visible) return null;
+	if (command.menu) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItem, {
+		command,
+		menuId: command.menu,
+		onRun
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
+		command,
+		choice,
+		onSelect: () => {
+			command.run();
+			onRun?.();
+		}
+	});
+}
+/** A section: its rows as a group named by its title, after a line when it isn't the first. */
+function MenuGroup({ title, first, children }) {
+	const titleId = (0, react.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!first && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "separator",
+		className: "bg-border-subtle my-1 h-px"
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "group",
+		"aria-labelledby": title ? titleId : void 0,
+		children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			id: titleId,
+			className: "text-fg-muted px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide",
+			children: title
+		}), children]
+	})] });
+}
+const sameChoices = (left, right) => left.length === right.length && left.every((choice, i) => choice === right[i]);
+/** One section-separated menu, by its id in the layout. */
+function MenuBody({ menuId, onRun }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const menu = require_icons.useMenu(menuId);
+	const commands = (0, _embedpdf_react_commands.useCommands)();
+	const documentId = (0, _embedpdf_react_runtime.useDocumentId)() ?? void 0;
+	const choices = (0, _embedpdf_react_runtime.useKernelValue)(() => (menu ?? []).map((section) => {
+		const rows = section.items.map((id) => commands.resolveCommand(id, documentId)).filter((command) => command?.visible === true);
+		return rows.length === 0 ? null : choiceOf(rows);
+	}), sameChoices);
+	if (!menu) return null;
+	const shown = menu.flatMap((section, i) => {
+		const choice = choices[i];
+		return choice ? [{
+			section,
+			choice
+		}] : [];
+	});
+	if (shown.length === 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "min-w-52 p-1",
+		children: shown.map(({ section, choice }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuGroup, {
+			first: i === 0,
+			title: section.title ?? (section.titleKey ? t(section.titleKey) : void 0),
+			children: section.items.map((id) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuRow, {
+				commandId: id,
+				choice,
+				onRun
+			}, id))
+		}, i))
+	});
+}
+/**
+* A menu the toolbar derives (the "More" menu, a folded group's): its
+* sections in bar order, the bar's groups as titled sections, and a row for
+* each command; a command that opens a menu opens it beside its row.
+*/
+function ToolbarMenu({ view, align }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	if (!view.isOpen) return null;
+	const sections = view.sections.map((section) => {
+		const rows = section.rows.flatMap((row) => {
+			const command = view.resolve(row.command);
+			return command ? [{
+				row,
+				command
+			}] : [];
+		});
+		return {
+			section,
+			rows,
+			choice: section.role === "radio" ? "radio" : choiceOf(rows.map(({ command }) => command))
+		};
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuPopover, {
+		onClose: view.close,
+		align,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "min-w-56 p-1",
+			children: sections.map(({ section, rows, choice }, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuGroup, {
+				first: i === 0,
+				title: section.labelKey ? t(section.labelKey) : void 0,
+				children: rows.map(({ row, command }) => row.type === "submenu" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SubmenuItem, {
+					command,
+					menuId: row.menu,
+					onRun: view.close
+				}, row.command) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuItem, {
+					command,
+					choice,
+					onSelect: () => {
+						view.execute(row.command);
+						view.close();
+					}
+				}, row.command))
+			}, i))
+		})
+	});
+}
+//#endregion
+//#region src/ui/toolbar.tsx
+/**
+* The app's toolbar look — Tailwind render props over the headless <Toolbar>.
+* The app owns the pixels; ui-core owns the physics (measure → solve →
+* overflow). Nothing here knows about breakpoints or widths.
+*/
+const BTN_BASE = "flex h-8 w-auto min-w-8 cursor-pointer items-center justify-center rounded-md p-[5px] transition-colors";
+const BTN_HOVER = "hover:bg-hover hover:ring hover:ring-accent";
+const BTN_ACTIVE = "border-none bg-selected text-accent shadow ring ring-accent";
+const BTN_DISABLED = "cursor-not-allowed opacity-50 hover:bg-transparent hover:ring-0";
+const buttonClass = (active, enabled = true) => `${BTN_BASE} ${active ? BTN_ACTIVE : BTN_HOVER} ${enabled ? "" : BTN_DISABLED}`;
+/**
+* The part name of a button in a bar, for page CSS through `::part()`: `toolbar-button`, and
+* `toolbar-button-active` too while it's pressed or its menu is open. Part names are public, as
+* the Theming page lists them.
+*/
+const buttonPart = (active) => active ? "toolbar-button toolbar-button-active" : "toolbar-button";
+/** The part name of a mode tab: `mode-tab`, and `mode-tab-active` too for the open mode. */
+const modeTabPart = (active) => active ? "mode-tab mode-tab-active" : "mode-tab";
+const TAB_BASE = "flex h-8 w-auto min-w-8 cursor-pointer items-center justify-center rounded-none border-b-2 px-2 py-1 text-sm transition-colors hover:bg-transparent hover:border-b-fg-muted";
+const TAB_ACTIVE = "border-b-accent text-accent hover:border-b-accent";
+const TAB_INACTIVE = "border-b-transparent";
+const tabClass = (active, enabled = true) => `${TAB_BASE} ${active ? TAB_ACTIVE : TAB_INACTIVE} ${enabled ? "" : "cursor-not-allowed opacity-50"}`;
+function CommandButton({ cmd, variant, run }) {
+	const isTab = variant === "label";
+	const draw = (active) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: run,
+		disabled: !cmd.enabled,
+		"aria-pressed": cmd.menu ? void 0 : active || void 0,
+		"aria-haspopup": cmd.menu ? "menu" : void 0,
+		"aria-expanded": cmd.menu ? active : void 0,
+		"aria-label": cmd.label,
+		title: cmd.disabledReason ?? cmd.label,
+		part: isTab ? modeTabPart(active) : buttonPart(active),
+		className: isTab ? tabClass(active, cmd.enabled) : buttonClass(active, cmd.enabled),
+		children: isTab ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "whitespace-nowrap px-1",
+			children: cmd.label
+		}) : variant === "icon+label" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: "flex items-center whitespace-nowrap text-sm",
+			children: [cmd.icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: cmd.icon,
+				size: 20,
+				accent: cmd.iconAccent,
+				className: "me-1.5 shrink-0"
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: cmd.label })]
+		}) : cmd.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+			name: cmd.icon,
+			size: 20,
+			accent: cmd.iconAccent
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "text-sm",
+			children: cmd.label
+		})
+	});
+	if (!cmd.menu) return draw(cmd.active);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuAnchor, {
+		menuId: cmd.menu,
+		children: draw
+	});
+}
+/**
+* Makes a control inside an item one more stop of the toolbar's arrow keys: the zoom field's
+* buttons are reached with the arrows, like the bar's own, and the bar stays one Tab stop.
+*/
+const ARROW_STOP = {
+	[_embedpdf_web.TOOLBAR_ITEM_ATTRIBUTE]: "",
+	className: "contents"
+};
+function ZoomControls() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const commands = (0, _embedpdf_react_commands.useCommands)();
+	const zoomIn = (0, _embedpdf_react_commands.useCommand)("zoom:in");
+	const zoomOut = (0, _embedpdf_react_commands.useCommand)("zoom:out");
+	const zoomMenu = (0, _embedpdf_react_commands.useCommand)("menu:zoom");
+	const shell = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_shell.ShellToken);
+	const stage = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_stage.StageToken);
+	const level = (0, _embedpdf_react_runtime.useOptionalSelector)(_embedpdf_react_stage.StageToken, (stage) => stage.getZoomLevel(), 1);
+	const pct = Math.round((level ?? 1) * 100);
+	const [inputValue, setInputValue] = (0, react.useState)(String(pct));
+	(0, react.useEffect)(() => setInputValue(String(pct)), [pct]);
+	const submit = (event) => {
+		event.preventDefault();
+		const value = parseFloat(inputValue);
+		if (!isNaN(value) && value > 0) stage?.zoomTo({ level: value / 100 });
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuAnchor, {
+		menuId: "zoom",
+		className: "relative block",
+		children: (zoomOpen) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "bg-hover flex items-center rounded",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+					onSubmit: submit,
+					className: "flex min-w-0 flex-nowrap items-center overflow-hidden whitespace-nowrap",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						name: "zoom",
+						type: "text",
+						inputMode: "numeric",
+						pattern: "\\d*",
+						"aria-label": t("commands.zoom.level"),
+						className: "h-6 w-8 min-w-0 shrink border-0 bg-transparent p-0 text-end text-sm outline-none focus:outline-none",
+						value: inputValue,
+						onChange: (event) => setInputValue(event.target.value.replace(/[^0-9]/g, "")),
+						onBlur: () => {
+							if (!inputValue || parseFloat(inputValue) <= 0) setInputValue(String(pct));
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "shrink-0 text-sm",
+						children: "%"
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...ARROW_STOP,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"aria-haspopup": "menu",
+						"aria-expanded": zoomOpen,
+						title: zoomMenu.label,
+						part: buttonPart(false),
+						className: buttonClass(false),
+						onClick: () => shell?.toggleMenu("zoom"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+							name: "chevronDown",
+							size: 20
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...ARROW_STOP,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						title: zoomOut.label,
+						part: buttonPart(false),
+						className: buttonClass(false),
+						onClick: () => commands.execute("zoom:out"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+							name: "zoomOut",
+							size: 20
+						})
+					})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					...ARROW_STOP,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						title: zoomIn.label,
+						part: buttonPart(false),
+						className: buttonClass(false),
+						onClick: () => commands.execute("zoom:in"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+							name: "zoomIn",
+							size: 20
+						})
+					})
+				})
+			]
+		})
+	});
+}
+/** The 'button' variant of the zoom slot — a single icon that opens the menu. */
+function ZoomButton() {
+	const shell = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_shell.ShellToken);
+	const zoomMenu = (0, _embedpdf_react_commands.useCommand)("menu:zoom");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuAnchor, {
+		menuId: "zoom",
+		children: (zoomOpen) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			title: zoomMenu.label,
+			"aria-haspopup": "menu",
+			"aria-expanded": zoomOpen,
+			part: buttonPart(zoomOpen),
+			className: buttonClass(zoomOpen),
+			onClick: () => shell?.toggleMenu("zoom"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: "zoomIn",
+				size: 20
+			})
+		})
+	});
+}
+function GroupTrigger({ view }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const activeHidden = view.commands.some((command) => command.active);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "relative inline-flex",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: () => setOpen((previous) => !previous),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			part: view.id === "modes" ? modeTabPart(activeHidden) : buttonPart(open),
+			className: tabClass(activeHidden),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: "chevronDown",
+				size: 18
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarMenu, { view: (0, _embedpdf_core_ui.groupMenuView)(view, open, () => setOpen(false)) })]
+	});
+}
+function CollapsedModes({ view }) {
+	const [open, setOpen] = (0, react.useState)(false);
+	const active = view.commands.find((command) => command.active) ?? view.commands[0];
+	const isActive = Boolean(active?.active && active.id !== _embedpdf_core_ui.VIEW_MODE_COMMAND);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { width: 100 },
+		className: "relative",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: () => setOpen((previous) => !previous),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			part: buttonPart(open),
+			className: "bg-surface hover:bg-hover flex w-full cursor-pointer appearance-none items-center rounded-md py-1.5 pe-2 ps-3 text-[13px] transition-colors",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `min-w-0 flex-1 truncate text-start ${isActive ? "text-accent" : "text-fg"}`,
+				children: active?.label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: "chevronDown",
+				size: 16,
+				className: isActive ? "text-accent" : "text-fg-secondary"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarMenu, { view: (0, _embedpdf_core_ui.groupMenuView)(view, open, () => setOpen(false)) })]
+	});
+}
+function CollapsedMenu({ view }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const [open, setOpen] = (0, react.useState)(false);
+	const shown = view.commands.find((command) => command.active) ?? view.commands[0];
+	const label = view.labelKey ? t(view.labelKey) : shown?.label;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "relative inline-flex",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			onClick: () => setOpen((previous) => !previous),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			"aria-label": label,
+			title: label,
+			part: buttonPart(open),
+			className: buttonClass(open),
+			children: [shown?.icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: shown.icon,
+				size: 20,
+				accent: shown.iconAccent
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "whitespace-nowrap px-1 text-sm",
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+				name: "chevronDown",
+				size: 14,
+				className: "text-fg-secondary"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarMenu, { view: (0, _embedpdf_core_ui.groupMenuView)(view, open, () => setOpen(false)) })]
+	});
+}
+function OverflowMenu({ view }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarMenu, {
+		view,
+		align: "end"
+	});
+}
+function OverflowTrigger({ isOpen, toggle }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		onClick: toggle,
+		"aria-haspopup": "menu",
+		"aria-expanded": isOpen,
+		title: (0, _embedpdf_react_i18n.useT)()("demo.more"),
+		part: buttonPart(isOpen),
+		className: buttonClass(isOpen),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.Icon, {
+			name: "dots",
+			size: 20
+		})
+	});
+}
+/** The custom items in `bar`, in order. */
+function customItemsOf(bar) {
+	return [
+		...bar.sections.start ?? [],
+		...bar.sections.center ?? [],
+		...bar.sections.end ?? []
+	].flatMap((group) => group.items.filter((child) => typeof child === "object" && "slot" in child));
+}
+/** What your item stands for while nothing is slotted into it: its command's button. */
+function StandIn({ commandId }) {
+	const command = (0, _embedpdf_react_commands.useCommand)(commandId);
+	if (!command.visible) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandButton, {
+		cmd: command,
+		variant: "icon",
+		run: () => void command.run()
+	});
+}
+function AppToolbar({ bar, orientation = "horizontal", className }) {
+	const vertical = orientation === "vertical";
+	const builtIn = {
+		"measurement-scale": () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MeasurementScaleButton, {}),
+		zoom: (variant) => variant === "button" || vertical ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomButton, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomControls, {}),
+		"quick-stamps": () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(QuickStamps, {}),
+		"page-number": () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PageNumber, {}),
+		"view-only": (variant) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ViewOnlyLabel, { compact: variant === "icon" || vertical })
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_toolbar.Toolbar, {
+		bar,
+		orientation,
+		gap: 8,
+		separatorWidth: 1,
+		className,
+		renderCommand: (cmd, variant, run) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommandButton, {
+			cmd,
+			variant,
+			run
+		}),
+		renderCustom: {
+			...Object.fromEntries(customItemsOf(bar).filter((item) => !Object.prototype.hasOwnProperty.call(builtIn, item.slot)).map((item) => [item.slot, (variant, ctx) => ctx.layer === "measure" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ItemSocket, {
+				id: item.slot,
+				variant: item.variants ? variant : null,
+				orientation,
+				measure: ctx.measure,
+				children: item.terminal ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StandIn, { commandId: item.terminal }) : null
+			})])),
+			...builtIn
+		},
+		renderCollapsed: (view) => view.id === "modes" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsedModes, { view }) : view.collapse === "menu" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CollapsedMenu, { view }) : void 0,
+		renderGroupTrigger: (view) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GroupTrigger, { view }),
+		renderSeparator: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `bg-border self-center ${vertical ? "h-px w-6" : "h-6 w-px"}` }),
+		renderOverflowTrigger: (isOpen, toggle) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowTrigger, {
+			isOpen,
+			toggle
+		}),
+		renderOverflowMenu: (view) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowMenu, { view })
+	});
+}
+//#endregion
+Object.defineProperty(exports, "AppToolbar", {
+	enumerable: true,
+	get: function() {
+		return AppToolbar;
+	}
+});
+Object.defineProperty(exports, "BarEdgeProvider", {
+	enumerable: true,
+	get: function() {
+		return BarEdgeProvider;
+	}
+});
+Object.defineProperty(exports, "CommandButton", {
+	enumerable: true,
+	get: function() {
+		return CommandButton;
+	}
+});
+Object.defineProperty(exports, "MenuAnchor", {
+	enumerable: true,
+	get: function() {
+		return MenuAnchor;
+	}
+});
+Object.defineProperty(exports, "MenuItem", {
+	enumerable: true,
+	get: function() {
+		return MenuItem;
+	}
+});
+Object.defineProperty(exports, "MenuPopover", {
+	enumerable: true,
+	get: function() {
+		return MenuPopover;
+	}
+});
+Object.defineProperty(exports, "SlottedEdgesProvider", {
+	enumerable: true,
+	get: function() {
+		return SlottedEdgesProvider;
+	}
+});
+Object.defineProperty(exports, "TOOLBAR_ITEM_CONTEXT_ATTRIBUTES", {
+	enumerable: true,
+	get: function() {
+		return TOOLBAR_ITEM_CONTEXT_ATTRIBUTES;
+	}
+});
+Object.defineProperty(exports, "bothAllow", {
+	enumerable: true,
+	get: function() {
+		return bothAllow;
+	}
+});
+Object.defineProperty(exports, "buttonClass", {
+	enumerable: true,
+	get: function() {
+		return buttonClass;
+	}
+});
+Object.defineProperty(exports, "buttonPart", {
+	enumerable: true,
+	get: function() {
+		return buttonPart;
+	}
+});
+Object.defineProperty(exports, "byHandSettingsOf", {
+	enumerable: true,
+	get: function() {
+		return byHandSettingsOf;
+	}
+});
+Object.defineProperty(exports, "createSlottedEdges", {
+	enumerable: true,
+	get: function() {
+		return createSlottedEdges;
+	}
+});
+Object.defineProperty(exports, "disabledSettingsOf", {
+	enumerable: true,
+	get: function() {
+		return disabledSettingsOf;
+	}
+});
+Object.defineProperty(exports, "sameByHand", {
+	enumerable: true,
+	get: function() {
+		return sameByHand;
+	}
+});
+Object.defineProperty(exports, "useSlottedEdges", {
+	enumerable: true,
+	get: function() {
+		return useSlottedEdges;
+	}
+});
+
+//# sourceMappingURL=toolbar-CJu2wKTU.cjs.map