@embedpdf/viewer-chrome 3.0.0-next.0

package/dist/index.js

@@ -0,0 +1,3529 @@
+import { defaultChrome, getMenu, getModeBar, getStrip } from "./chrome.js";
+import { TOOL_ICONS, defaultCommands } from "./commands.js";
+import { Fragment, createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { DocumentGate, DocumentsToken, Viewer, createCapabilityToken, definePlugin, useCapability, useDocumentId, useDocumentStatus, useDocuments, useKernel, useOptionalCapability, useOptionalSelector, useSelector } from "@embedpdf/react/runtime";
+import { Stage, StageToken, StageToken as StageToken$1, stagePlugin, usePages } from "@embedpdf/react/stage";
+import { RenderLayer, TileLayer, renderPlugin } from "@embedpdf/react/render";
+import { pageEditPlugin } from "@embedpdf/react/page-edit";
+import { InteractionToken, InteractionToken as InteractionToken$1, interactionPlugin, useTool, useToolCursor } from "@embedpdf/react/interaction";
+import { SelectionLayer, SelectionToken, selectionPlugin } from "@embedpdf/react/selection";
+import { AnnotationLayer, AnnotationToken, AnnotationToken as AnnotationToken$1, annotationPlugin, useAnnotation, useAnnotationDefaults, useAnnotationSelected, useFilePickerProvider, useSelectionFlags, useSelectionProps } from "@embedpdf/react/annotation";
+import { RedactionToken, RedactionToken as RedactionToken$1, redactionPlugin, usePendingRedactions, useRedaction } from "@embedpdf/react/redaction";
+import { FormToken, formPlugin, formWidgetRenderer, useFormScriptingProvider } from "@embedpdf/react/form";
+import { LinkLayer, LinkToken, linkPlugin } from "@embedpdf/react/link";
+import { SearchLayer, SearchToken, SearchToken as SearchToken$1, searchPlugin, useSearch, useSearchState, validateSearchQuery } from "@embedpdf/react/search";
+import { I18nToken, i18nPlugin, negotiateLocale, useT } from "@embedpdf/react/i18n";
+import { CommandsToken, CommandsToken as CommandsToken$1, commandsPlugin, resolvedCommandsEqual, useCommand, useCommandShortcuts, useCommands } from "@embedpdf/react/commands";
+import { ShellToken, ShellToken as ShellToken$1, shellPlugin, useMenus, useSurface } from "@embedpdf/react/shell";
+import { Toolbar, addItem, chromeHelpers, chromeHelpers as chromeHelpers$1, custom, defineChrome, group, item, removeItems, replaceItem, useStripView, validateChrome, validateChrome as validateChrome$1 } from "@embedpdf/react/toolbar";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Scrollbar } from "@embedpdf/react/scrollbar";
+import { AnnotationMenu } from "@embedpdf/react/annotation-menu";
+import { MetadataToken } from "@embedpdf/react/metadata";
+//#region src/config/stage.ts
+/**
+* The Stage is a LENS: one document can be viewed through several at once. The
+* thumbnail sidebar is a second lens over the SAME document — a single-column,
+* fixed-zoom grid with its own camera, fully independent of the main view.
+*
+* The token lives here (not in App.tsx) because two places need it: App wires the
+* `stagePlugin` lens with it, and the sidebar renders `<Stage token={...}>` off it.
+*/
+const ThumbsStageToken = createCapabilityToken("stage-thumbs");
+//#endregion
+//#region src/config/demo-tools.plugin.ts
+/**
+* Example-only: register the insert / redact authoring tools as INERT
+* interaction tools. v3 doesn't yet ship signature or redaction plugins, but
+* this is a CHROME demo — its job is selection state and layout, not the
+* tool's effect. Registering them as real (behaviourless) tools lets every
+* tool button in every mode band go through the SAME path
+* (`InteractionToken.activateTool`), so `active` is uniform and honest: the
+* button really is the active tool; it just has no handler behind it.
+*
+* The annotate + shapes tools are NOT here — those are real tools the
+* annotation plugin registers (highlight, ink, square, circle, …) — and
+* neither are the form palette tools (the form plugin's draw-to-place).
+*/
+const INERT_TOOLS = [{
+	id: "signature",
+	cursor: "copy"
+}, {
+	id: "image",
+	cursor: "copy"
+}];
+const demoToolsPlugin = () => definePlugin({
+	id: "demo-tools",
+	scope: "document",
+	requires: [InteractionToken$1],
+	init: (ctx) => {
+		const interaction = ctx.get(InteractionToken$1);
+		for (const tool of INERT_TOOLS) interaction.registerTool({
+			id: tool.id,
+			cursor: tool.cursor,
+			enables: /* @__PURE__ */ new Set()
+		});
+	}
+});
+//#endregion
+//#region src/locales/en.ts
+/**
+* English pack. Strings belong to the PRODUCT, not the plugins — the
+* `commands.*` namespace mirrors the v2 snippet packs so translations carry
+* over; `demo.*` is this example's own chrome.
+*/
+const en = {
+	code: "en",
+	name: "English",
+	translations: {
+		commands: {
+			zoom: {
+				in: "Zoom In",
+				out: "Zoom Out",
+				fitPage: "Fit to Page",
+				fitWidth: "Fit to Width",
+				automatic: "Automatic",
+				menu: "Zoom",
+				level: "Zoom Level",
+				p50: "50%",
+				p100: "100%",
+				p150: "150%",
+				p200: "200%",
+				p400: "400%"
+			},
+			pan: "Pan",
+			pointer: "Pointer",
+			sidebar: "Sidebar",
+			search: "Search",
+			comment: "Comment",
+			style: "Style",
+			menu: "Menu",
+			viewControls: "View Controls",
+			download: "Download",
+			print: "Print",
+			fullscreen: "Full Screen",
+			spread: {
+				group: "Page Layout",
+				none: "Single Page",
+				odd: "Two Page",
+				even: "Cover Page"
+			},
+			scroll: {
+				group: "Scrolling",
+				vertical: "Vertical",
+				horizontal: "Horizontal"
+			},
+			rotate: {
+				group: "Rotate",
+				clockwise: "Rotate Clockwise",
+				counterclockwise: "Rotate Counter-Clockwise"
+			},
+			mode: {
+				group: "Mode",
+				view: "View",
+				annotate: "Annotate",
+				shapes: "Shapes",
+				insert: "Insert",
+				form: "Form",
+				redact: "Redact"
+			},
+			annotate: {
+				highlight: "Highlight",
+				strikeout: "Strikeout",
+				underline: "Underline",
+				squiggly: "Squiggly",
+				ink: "Draw",
+				inkHighlight: "Ink Highlighter",
+				text: "Text",
+				insertText: "Insert Text",
+				replaceText: "Replace Text",
+				callout: "Callout",
+				note: "Comment",
+				link: "Link",
+				gotoLink: "Go to link",
+				removeLink: "Remove link",
+				delete: "Delete",
+				group: "Group",
+				ungroup: "Ungroup",
+				strip: "Annotation actions"
+			},
+			shapes: {
+				rectangle: "Rectangle",
+				circle: "Circle",
+				line: "Line",
+				arrow: "Arrow",
+				polygon: "Polygon",
+				polyline: "Polyline"
+			},
+			insert: {
+				stamp: "Rubber Stamp",
+				attachment: "Attach File",
+				signature: "Signature",
+				image: "Image"
+			},
+			form: {
+				textfield: "Text Field",
+				checkbox: "Checkbox",
+				radio: "Radio Button",
+				select: "Dropdown",
+				listbox: "List Box"
+			},
+			redact: {
+				mark: "Mark for Redaction",
+				applyAll: "Apply Redactions",
+				clearAll: "Clear Marks",
+				panel: "Redactions"
+			},
+			undo: "Undo",
+			redo: "Redo"
+		},
+		passwordPrompt: {
+			title: "Password required",
+			required: "This document is password protected. Enter the password to open it.",
+			incorrect: "The password was incorrect. Please try again.",
+			incorrectWarning: "Incorrect password",
+			label: "Password",
+			placeholder: "Enter password",
+			cancel: "Cancel",
+			open: "Open",
+			opening: "Opening…"
+		},
+		documentError: {
+			title: "Couldn’t open document",
+			unknown: "The document could not be opened.",
+			close: "Close document"
+		},
+		demo: {
+			starting: "Starting viewer…",
+			opening: "Opening document…",
+			more: "More",
+			thumbnails: "Thumbnails",
+			outline: "Outline",
+			searchPlaceholder: "Search document…",
+			searchTitle: "Search",
+			searchCaseSensitive: "Case sensitive",
+			searchWholeWord: "Whole word",
+			searchRegex: "Regular expression",
+			searchSearching: "Searching…",
+			searchResults: "{count} results found",
+			searchNoResults: "No results",
+			searchPage: "Page {page}",
+			commentsTitle: "Comments",
+			styleTitle: "Style",
+			empty: "Nothing here yet in this demo panel.",
+			page: "Page {current} of {total}",
+			cancel: "Cancel",
+			pageBadge: "p. {page}",
+			redactionTitle: "Redactions",
+			redactionEmpty: "No pending redactions. Use the Redact tool to mark text or areas.",
+			redactionArea: "Area mark",
+			redactionText: "Text mark",
+			redactionRemove: "Remove mark",
+			redactConfirmTitle: "Apply redactions?",
+			redactConfirmBody: "Permanently remove the content under {count} redaction marks. This cannot be undone.",
+			redactConfirmCollateral: "{count} other annotations will also be removed.",
+			redactApply: "Apply",
+			redactApplying: "Applying…",
+			redactLabelTitle: "Redaction label",
+			redactLabelPlaceholder: "e.g. REDACTED",
+			redactLabelRepeat: "Repeat label across region"
+		}
+	}
+};
+//#endregion
+//#region src/config-context.tsx
+/**
+* The resolved customization, as React context. The chrome schema and the
+* user's extra icons are RESOLVED ONCE in <FullViewer> and read here by the
+* shell, menus, and strips — no component imports the default schema value
+* directly, so "the host replaced the chrome" is invisible below this line.
+*
+* The default context value is the default config: components render correctly
+* in tests and stories without a provider.
+*/
+const ViewerConfigContext = createContext({
+	chrome: defaultChrome,
+	icons: {}
+});
+const ViewerConfigProvider = ViewerConfigContext.Provider;
+function useChromeSchema() {
+	return useContext(ViewerConfigContext).chrome;
+}
+function useMenuSchema(id) {
+	return getMenu(useContext(ViewerConfigContext).chrome, id);
+}
+function useStripSchema(id) {
+	return getStrip(useContext(ViewerConfigContext).chrome, id);
+}
+function useCustomIcons() {
+	return useContext(ViewerConfigContext).icons;
+}
+//#endregion
+//#region src/handle.ts
+function createViewerHandle(kernel) {
+	const watch = (select, cb, isEqual = Object.is) => {
+		let previous = select();
+		return kernel.subscribe(() => {
+			const next = select();
+			if (isEqual(previous, next)) return;
+			const before = previous;
+			previous = next;
+			cb(next, before);
+		});
+	};
+	const commands = () => kernel.capability(CommandsToken$1);
+	return {
+		documents: kernel.documents,
+		get: (token) => kernel.capability(token),
+		tryGet: (token) => kernel.tryCapability(token),
+		forDocument: (documentId) => ({
+			get: (token) => kernel.capability(token, documentId),
+			tryGet: (token) => kernel.tryCapability(token, documentId)
+		}),
+		watch,
+		execute: (id, documentId) => commands().execute(id, documentId),
+		resolve: (id, documentId) => commands().resolve(id, documentId) ?? null,
+		watchCommand: (id, cb) => watch(() => commands().resolve(id) ?? null, cb, resolvedCommandsEqual)
+	};
+}
+//#endregion
+//#region src/ui/icons.tsx
+const ICON_PATHS = {
+	alertTriangle: ["M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"],
+	alignBottom: [
+		"M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+		"M11 17h2",
+		"M9 14h6",
+		"M10 11h4"
+	],
+	alignCenter: [
+		"M4 6l16 0",
+		"M8 12l8 0",
+		"M6 18l12 0"
+	],
+	alignLeft: [
+		"M4 6l16 0",
+		"M4 12l10 0",
+		"M4 18l14 0"
+	],
+	alignMiddle: [
+		"M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+		"M11 15h2",
+		"M9 12h6",
+		"M10 9h4"
+	],
+	alignRight: [
+		"M4 6l16 0",
+		"M10 12l10 0",
+		"M6 18l14 0"
+	],
+	alignTop: [
+		"M3 19v-14a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+		"M11 13h2",
+		"M9 10h6",
+		"M10 7h4"
+	],
+	arrowBackUp: ["M9 14l-4 -4l4 -4", "M5 10h11a4 4 0 1 1 0 8h-1"],
+	arrowForwardUp: ["M15 14l4 -4l-4 -4", "M19 10h-11a4 4 0 1 0 0 8h1"],
+	bold: ["M7 5h6a3.5 3.5 0 0 1 0 7h-6z", "M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7"],
+	book: [
+		"M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0",
+		"M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0",
+		"M3 6l0 13",
+		"M12 6l0 13",
+		"M21 6l0 13"
+	],
+	book2: [
+		"M19 4v16h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12z",
+		"M19 16h-12a2 2 0 0 0 -2 2",
+		"M9 8h6"
+	],
+	callout: [
+		{
+			d: "M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1",
+			stroke: "primary",
+			fill: "secondary"
+		},
+		{
+			d: "M17 11v6h-9",
+			stroke: "primary"
+		},
+		{
+			d: "M8 15l-2 2l2 2",
+			stroke: "primary"
+		}
+	],
+	check: ["M5 12l5 5l10 -10"],
+	chevronDown: ["M6 9l6 6l6 -6"],
+	chevronLeft: ["M15 6l-6 6l6 6"],
+	chevronRight: ["M9 6l6 6l-6 6"],
+	circle: [{
+		d: "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0",
+		stroke: "primary",
+		fill: "secondary"
+	}],
+	comment: [
+		"M12 11v.01",
+		"M8 11v.01",
+		"M16 11v.01",
+		"M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3z"
+	],
+	copy: ["M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1"],
+	deviceFloppy: [
+		"M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2",
+		"M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M14 4l0 4l-6 0l0 -4"
+	],
+	dots: [
+		"M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+		"M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+		"M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+	],
+	doublePage: ["M3 3m0 1a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1zm9 -1v18"],
+	download: [
+		"M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2",
+		"M7 11l5 5l5 -5",
+		"M12 4l0 12"
+	],
+	externalLink: [
+		"M12 6h-6a2 2 0 0 0 -2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-6",
+		"M11 13l9 -9",
+		"M15 4h5v5"
+	],
+	eye: ["M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"],
+	file: ["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"],
+	fileImport: ["M14 3v4a1 1 0 0 0 1 1h4", "M5 13v-8a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-5.5m-9.5 -2h7m-3 -3l3 3l-3 3"],
+	fitToPage: [
+		"M12 20h-6a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h6",
+		"M18 14v7",
+		"M18 3v7",
+		"M15 18l3 3l3 -3",
+		"M15 6l3 -3l3 3"
+	],
+	fitToWidth: [
+		"M4 12v-6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v6",
+		"M10 18h-7",
+		"M21 18h-7",
+		"M6 15l-3 3l3 3",
+		"M18 15l3 3l-3 3"
+	],
+	formCheckbox: ["M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14", "M9 12l2 2l4 -4"],
+	formListbox: [
+		"M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14",
+		"M11 8h6",
+		"M11 12h6",
+		"M11 16h6",
+		"M7 8l0 .01",
+		"M7 12l0 .01",
+		"M7 16l0 .01"
+	],
+	formRadio: [{
+		d: "M9 12a2 2 0 1 0 6 0a2 2 0 1 0 -6 0",
+		fill: true
+	}, "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"],
+	formSelect: ["M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14", "M9 11l3 3l3 -3"],
+	formTextfield: [
+		"M12 3a3 3 0 0 0 -3 3v12a3 3 0 0 0 3 3",
+		"M6 3a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3",
+		"M13 7h7a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-7",
+		"M5 7h-1a1 1 0 0 0 -1 1v8a1 1 0 0 0 1 1h1",
+		"M17 12h.01",
+		"M13 12h.01"
+	],
+	freeText: [
+		{
+			d: "M4 7v-2h12v2",
+			stroke: "primary"
+		},
+		{
+			d: "M10 5v14",
+			stroke: "primary"
+		},
+		{
+			d: "M12 19h-4",
+			stroke: "primary"
+		},
+		{
+			d: "M15 13v-1h6v1",
+			stroke: "primary"
+		},
+		{
+			d: "M18 12v7",
+			stroke: "primary"
+		},
+		{
+			d: "M17 19h2",
+			stroke: "primary"
+		}
+	],
+	fullscreen: [
+		"M4 8v-2a2 2 0 0 1 2 -2h2",
+		"M4 16v2a2 2 0 0 0 2 2h2",
+		"M16 4h2a2 2 0 0 1 2 2v2",
+		"M16 20h2a2 2 0 0 0 2 -2v-2"
+	],
+	fullscreenExit: [
+		"M4 8v-2c0 -.551 .223 -1.05 .584 -1.412",
+		"M4 16v2a2 2 0 0 0 2 2h2",
+		"M16 4h2a2 2 0 0 1 2 2v2",
+		"M16 20h2c.545 0 1.04 -.218 1.4 -.572",
+		"M3 3l18 18"
+	],
+	group: [
+		"M3 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M17 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M3 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M17 19a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M5 7v10",
+		"M19 7v10",
+		"M7 5h10",
+		"M7 19h10",
+		"M8 8H12.8V11.2H16V16H11.2V12.8H8V8Z"
+	],
+	hand: [
+		"M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5",
+		"M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5",
+		"M14 5.5a1.5 1.5 0 0 1 3 0v6.5",
+		"M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47"
+	],
+	highlight: [
+		{
+			d: "M4 6h16a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2H4a2 2 0 0 1 -2 -2V8a2 2 0 0 1 2 -2z",
+			fill: "primary"
+		},
+		"M8 16v-8a4 4 0 1 1 8 0v8",
+		"M8 10h8"
+	],
+	horizontal: [
+		"M7 8l-4 4l4 4",
+		"M17 8l4 4l-4 4",
+		"M3 12l18 0"
+	],
+	inkHighlighter: [
+		"M3 19h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4",
+		"M12.5 5.5l4 4",
+		"M4.5 13.5l4 4",
+		{
+			d: "M21 15v4h-8l4 -4l4 0",
+			stroke: "primary",
+			fill: "primary"
+		}
+	],
+	insertText: [
+		{
+			d: "M3 7v-2h12v2",
+			stroke: "primary"
+		},
+		{
+			d: "M9 5v14",
+			stroke: "primary"
+		},
+		{
+			d: "M7 19h4",
+			stroke: "primary"
+		},
+		{
+			d: "M18 15l2 2h-5",
+			stroke: "primary"
+		},
+		{
+			d: "M18 19l2 -2",
+			stroke: "primary"
+		}
+	],
+	italic: [
+		"M11 5l6 0",
+		"M7 19l6 0",
+		"M14 5l-4 14"
+	],
+	line: [{
+		d: "M20 4l-16 16",
+		stroke: "primary"
+	}],
+	lineArrow: [{
+		d: "M20 4l-16 16",
+		stroke: "primary"
+	}, {
+		d: "M16 3h5v5",
+		stroke: "primary"
+	}],
+	link: [
+		"M9 15l6 -6",
+		"M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464",
+		"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"
+	],
+	linkOff: [
+		"M9 15l3 -3m2 -2l1 -1",
+		"M11 6l.463 -.536a5 5 0 0 1 7.072 7.071l-.534 .464",
+		"M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463",
+		"M3 3l18 18"
+	],
+	listTree: [
+		"M9 6h11",
+		"M12 12h8",
+		"M15 18h5",
+		"M5 6v.01",
+		"M8 12v.01",
+		"M11 18v.01"
+	],
+	lock: ["M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1 -2 2H5a2 2 0 0 1 -2 -2v-7a2 2 0 0 1 2 -2z", "M7 11V7a5 5 0 0 1 10 0v4"],
+	marqueeSelect: [
+		"M17 20h6",
+		"M20 17v6",
+		"M4 13v-2",
+		"M4 6v-1a1 1 0 0 1 1 -1h1",
+		"M6 20h-1a1 1 0 0 1 -1 -1v-1",
+		"M11 4h2",
+		"M11 20h2",
+		"M18 4h1a1 1 0 0 1 1 1v1",
+		"M20 11v2"
+	],
+	menu: ["M4 8l16 0", "M4 16l16 0"],
+	message: [
+		"M8 9h8",
+		"M8 13h6",
+		"M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"
+	],
+	palette: [
+		"M12 21a9 9 0 0 1 0 -18c4.97 0 9 3.582 9 8c0 1.06 -.474 2.078 -1.318 2.828c-.844 .75 -1.989 1.172 -3.182 1.172h-2.5a2 2 0 0 0 -1 3.75a1.3 1.3 0 0 1 -1 2.25",
+		"M8.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+		"M12.5 7.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0",
+		"M16.5 10.5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"
+	],
+	paperclip: ["M15 7l-6.5 6.5a1.5 1.5 0 0 0 3 3l6.5 -6.5a3 3 0 0 0 -6 -6l-6.5 6.5a4.5 4.5 0 0 0 9 9l6.5 -6.5"],
+	pencilMarker: ["m9.109 16.275 8.856-8.097c.812-.743.87-2.014.127-2.826s-2.014-.869-2.826-.127L6.41 13.322l-.127 2.826zM13.79 6.575l2.7 2.952", {
+		d: "M19.375 20.125c.569.063-4.05-.562-6.412-.437s-4.759 1.229-6.857 1.625c-1.764.687-3.404-.938-1.981-2.5",
+		stroke: "primary"
+	}],
+	photo: [
+		"M15 8h.01",
+		"M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z",
+		"M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5",
+		"M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"
+	],
+	plus: ["M12 5l0 14", "M5 12l14 0"],
+	pointer: ["M7.904 17.563a1.2 1.2 0 0 0 2.228 .308l2.09 -3.093l4.907 4.907a1.067 1.067 0 0 0 1.509 0l1.047 -1.047a1.067 1.067 0 0 0 0 -1.509l-4.907 -4.907l3.113 -2.09a1.2 1.2 0 0 0 -.309 -2.228l-13.582 -3.904l3.904 13.563z"],
+	polygon: [{
+		d: "M13.163 2.168l8.021 5.828c.694 .504 .984 1.397 .719 2.212l-3.064 9.43a1.978 1.978 0 0 1 -1.881 1.367h-9.916a1.978 1.978 0 0 1 -1.881 -1.367l-3.064 -9.43a1.978 1.978 0 0 1 .719 -2.212l8.021 -5.828a1.978 1.978 0 0 1 2.326 0z",
+		stroke: "primary",
+		fill: "secondary"
+	}],
+	print: [
+		"M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2",
+		"M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4",
+		"M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z"
+	],
+	redact: [
+		"M7 4h10",
+		"M12 4v8",
+		"M-7 24l12 -12",
+		"M-3 24l12 -12",
+		"M1 24l12 -12",
+		"M5 24l12 -12",
+		"M9 24l12 -12",
+		"M13 24l12 -12",
+		"M17 24l12 -12",
+		"M21 24l12 -12",
+		"M25 24l12 -12"
+	],
+	redactArea: [
+		"M6 20h-1a2 2 0 0 1 -2 -2v-1",
+		"M3 13v-3",
+		"M3 6v-1a2 2 0 0 1 2 -2h1",
+		"M10 3h3",
+		"M17 3h1a2 2 0 0 1 2 2v1",
+		"M12 10h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z",
+		"M10 12l2 -2",
+		"M10 16l6 -6",
+		"M10 20l10 -10",
+		"M12 22l10 -10",
+		"M16 22l6 -6",
+		"M20 22l2 -2"
+	],
+	redactCombined: [
+		"M6 20h-1a2 2 0 0 1 -2 -2v-1",
+		"M3 13v-3",
+		"M20 13v-3",
+		"M3 6v-1a2 2 0 0 1 2 -2h1",
+		"M10 3h3",
+		"M17 3h1a2 2 0 0 1 2 2v1",
+		"M8 8h8",
+		"M12 8v7",
+		"M6 19l12 -12",
+		"M6 23l12 -12",
+		"M10 23l12 -12",
+		"M14 27l12 -12",
+		"M14 23l12 -12"
+	],
+	redactionSidebar: [
+		"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z",
+		"M15 4v16",
+		"M7 8h5",
+		"M7 11h5",
+		"M7 14h4"
+	],
+	replaceText: [
+		{
+			d: "M3 7v-2h12v2",
+			stroke: "primary"
+		},
+		{
+			d: "M9 5v14",
+			stroke: "primary"
+		},
+		{
+			d: "M7 19h4",
+			stroke: "primary"
+		},
+		{
+			d: "M20 14l2 2h-3",
+			stroke: "primary"
+		},
+		{
+			d: "M20 18l2 -2",
+			stroke: "primary"
+		},
+		{
+			d: "M19 16a3 3 0 1 0 2 5.236",
+			stroke: "primary"
+		}
+	],
+	rotateClockwise: ["M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5"],
+	rotateCounterClockwise: ["M19.95 11a8 8 0 1 0 -.5 4m.5 5v-5h-5"],
+	rubberStamp: ["M21 17.85h-18c0 -4.05 1.421 -4.05 3.79 -4.05c5.21 0 1.21 -4.59 1.21 -6.8a4 4 0 1 1 8 0c0 2.21 -4 6.8 1.21 6.8c2.369 0 3.79 0 3.79 4.05", "M5 21h14"],
+	rubberStampPlus: [
+		"M21 17.85h-18c0 -4.05 1.421 -4.05 3.79 -4.05c5.21 0 1.21 -4.59 1.21 -6.8a4 4 0 0 1 4.9 -4.1",
+		"M16 10c0 1.2 -4 3.8 1.21 3.8c2.369 0 3.79 0 3.79 4.05",
+		"M5 21h14",
+		"M16 5h6",
+		"M19 2v6"
+	],
+	save: [
+		"M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2",
+		"M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M14 4l0 4l-6 0l0 -4"
+	],
+	screenshot: [
+		"M7 19a2 2 0 0 1 -2 -2",
+		"M5 13v-2",
+		"M5 7a2 2 0 0 1 2 -2",
+		"M11 5h2",
+		"M17 5a2 2 0 0 1 2 2",
+		"M19 11v2",
+		"M19 17v4",
+		"M21 19h-4",
+		"M13 19h-2"
+	],
+	search: ["M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0", "M21 21l-6 -6"],
+	settings: ["M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z", "M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"],
+	sidebar: ["M4 18v-12a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z", "M10 18v-12a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z"],
+	signature: ["M3 17c3.333 -3.333 5 -6 5 -8c0 -3 -1 -3 -2 -3s-2.032 1.085 -2 3c.034 2.048 1.658 4.877 2.5 6c1.5 2 2.5 2.5 3.5 1l2 -3c.333 2.667 1.333 4 3 4c.53 0 2.639 -2 3 -2c.517 0 1.517 .667 3 2"],
+	singlePage: ["M5 3m0 1a1 1 0 0 1 1 -1h12a1 1 0 0 1 1 1v16a1 1 0 0 1 -1 1h-12a1 1 0 0 1 -1 -1z"],
+	square: [{
+		d: "M3 3m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
+		stroke: "primary",
+		fill: "secondary"
+	}],
+	squares: ["M8 10a2 2 0 0 1 2 -2h9a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-9a2 2 0 0 1 -2 -2z", "M16 8v-3a2 2 0 0 0 -2 -2h-9a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h3"],
+	squiggly: [
+		"M8 16v-8a4 4 0 1 1 8 0v8",
+		"M8 10h8",
+		{
+			d: "M4 20c1.5 -1.5 3.5 -1.5 5 0s3.5 1.5 5 0 3.5 -1.5 5 0",
+			stroke: "primary"
+		}
+	],
+	strikethrough: ["M8 16v-8a4 4 0 1 1 8 0v8", {
+		d: "M4 10h16",
+		stroke: "primary"
+	}],
+	text: [
+		"M6.5 15.5m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0",
+		"M14 19v-10.5a3.5 3.5 0 0 1 7 0v10.5",
+		"M14 13h7",
+		"M10 12v7"
+	],
+	trash: [
+		"M4 7l16 0",
+		"M10 11l0 6",
+		"M14 11l0 6",
+		"M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12",
+		"M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"
+	],
+	underline: [
+		{
+			d: "M4 20h16",
+			stroke: "primary"
+		},
+		"M8 16v-8a4 4 0 1 1 8 0v8",
+		"M8 10h8"
+	],
+	ungroup: ["M4 5a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z", "M13 14a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z"],
+	unlock: ["M7 11V7a5 5 0 0 1 9.9-1"],
+	vertical: [
+		"M8 7l4 -4l4 4",
+		"M8 17l4 4l4 -4",
+		"M12 3l0 18"
+	],
+	viewSettings: [
+		"M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0",
+		"M12 10.5v1.5",
+		"M12 16v1.5",
+		"M15.031 12.25l-1.299 .75",
+		"M10.268 15l-1.3 .75",
+		"M15 15.803l-1.285 -.773",
+		"M10.285 12.97l-1.285 -.773",
+		"M14 3v4a1 1 0 0 0 1 1h4",
+		"M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
+	],
+	widgetEdit: [
+		"M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1",
+		"M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415",
+		"M16 5l3 3"
+	],
+	x: ["M18 6l-12 12", "M6 6l12 12"],
+	zigzag: [{
+		d: "M12 2.4L21.36 11.76L2.64 12.24L12 21.6",
+		stroke: "primary"
+	}],
+	zoomIn: [
+		"M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0",
+		"M9 12h6",
+		"M12 9v6"
+	],
+	zoomInArea: [
+		"M15 13v4",
+		"M13 15h4",
+		"M15 15m-5 0a5 5 0 1 0 10 0a5 5 0 1 0 -10 0",
+		"M22 22l-3 -3",
+		"M6 18h-1a2 2 0 0 1 -2 -2v-1",
+		"M3 11v-1",
+		"M3 6v-1a2 2 0 0 1 2 -2h1",
+		"M10 3h1",
+		"M15 3h1a2 2 0 0 1 2 2v1"
+	],
+	zoomOut: ["M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", "M9 12l6 0"]
+};
+/** One SVG renderer for every icon. Unknown names render nothing (caller shows
+*  a text fallback), so a missing glyph never throws. */
+function Icon({ name, size = 20, strokeWidth = 2, className, title, accent }) {
+	const paths = useCustomIcons()[name] ?? ICON_PATHS[name];
+	if (!paths) return null;
+	return /* @__PURE__ */ jsx("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		className,
+		role: "img",
+		"aria-hidden": title ? void 0 : true,
+		"aria-label": title,
+		children: paths.map((p, i) => {
+			if (typeof p === "string") return /* @__PURE__ */ jsx("path", { d: p }, i);
+			const fill = p.fill === true ? "currentColor" : p.fill ? accent?.[p.fill] : void 0;
+			const stroke = p.stroke ? accent?.[p.stroke] : p.fill ? "none" : void 0;
+			return /* @__PURE__ */ jsx("path", {
+				d: p.d,
+				fill: fill ?? "none",
+				stroke
+			}, i);
+		})
+	});
+}
+//#endregion
+//#region src/ui/theme.tsx
+/**
+* Light/dark theme — one class, and the CSS variables in styles.css do the
+* rest (both toolbars, sidebars, popovers, and the canvas re-theme from it).
+* The mode comes from the embedder's `theme` preference; the chrome ships no
+* switch of its own, so a host that wants one drives this through `set`. The
+* class lands on <html> by default; a delivery that must not touch the page
+* (the <embedpdf-viewer> shadow root) passes `target` and the class stays
+* inside its own subtree. An explicit preference outranks the OS setting.
+*/
+const ThemeCtx = createContext(null);
+const systemMode = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+function ThemeProvider({ children, preference = "system", target }) {
+	const [mode, setMode] = useState(() => preference === "system" ? systemMode() : preference);
+	useEffect(() => {
+		(target ?? document.documentElement).classList.toggle("dark", mode === "dark");
+	}, [mode, target]);
+	const value = useMemo(() => ({
+		mode,
+		toggle: () => setMode((m) => m === "dark" ? "light" : "dark"),
+		set: setMode
+	}), [mode]);
+	return /* @__PURE__ */ jsx(ThemeCtx.Provider, {
+		value,
+		children
+	});
+}
+//#endregion
+//#region src/ui/menu.tsx
+/**
+* Menu rendering — a MenuSchema (a tree of command ids) rendered as rows.
+* Reused by the toolbar dropdowns (document / zoom / page-settings) AND by the
+* overflow menu's inline submenu expansion, so a command's menu form is
+* identical wherever it surfaces. Rows resolve live through the command
+* registry: label, icon, active tick, enabled state.
+*/
+function MenuRow({ commandId, onRun }) {
+	const cmd = useCommand(commandId);
+	const commands = useCommands();
+	if (!cmd || !cmd.visible) return null;
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: cmd.active ? "menuitemradio" : "menuitem",
+		part: cmd.active ? "menu-item menu-item-active" : "menu-item",
+		"aria-checked": cmd.active || void 0,
+		disabled: !cmd.enabled,
+		onClick: () => {
+			commands.execute(commandId);
+			onRun?.();
+		},
+		className: `flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors disabled:pointer-events-none disabled:opacity-40 ${cmd.active ? "bg-selected text-accent" : "text-fg-secondary hover:bg-hover"}`,
+		children: [cmd.icon && /* @__PURE__ */ jsx(Icon, {
+			name: cmd.icon,
+			size: 16,
+			accent: cmd.iconAccent,
+			className: cmd.active ? "" : "text-fg-muted"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate",
+			children: cmd.label
+		})]
+	});
+}
+/** One section-separated menu, by schema id. */
+function MenuBody({ menuId, onRun }) {
+	const t = useT();
+	const menu = useMenuSchema(menuId);
+	if (!menu) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-w-52 p-1",
+		children: menu.sections.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
+			i > 0 && /* @__PURE__ */ jsx("div", { className: "bg-border-subtle my-1 h-px" }),
+			section.labelKey && /* @__PURE__ */ jsx("div", {
+				className: "text-fg-muted px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide",
+				children: t(section.labelKey)
+			}),
+			section.items.map((id) => /* @__PURE__ */ jsx(MenuRow, {
+				commandId: id,
+				onRun
+			}, id))
+		] }, i))
+	});
+}
+/** The popover shell: a floating surface + click-away scrim. */
+function Popover({ children, onClose, align = "start" }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-40",
+		onClick: onClose
+	}), /* @__PURE__ */ jsx("div", {
+		part: "menu",
+		className: `border-border-subtle bg-elevated absolute top-full z-50 mt-1 rounded-lg border shadow-xl ${align === "end" ? "right-0" : "left-0"}`,
+		children
+	})] });
+}
+/** A menu dropdown that expands inline (used inside the overflow menu, where a
+*  submenu can't anchor to an off-screen trigger). */
+function InlineSubmenu({ menuId, label }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => setOpen((o) => !o),
+		className: "text-fg-secondary hover:bg-hover flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 text-left text-sm",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "flex-1 truncate",
+			children: label
+		}), /* @__PURE__ */ jsx(Icon, {
+			name: open ? "chevronDown" : "chevronRight",
+			size: 16
+		})]
+	}), open && /* @__PURE__ */ jsx("div", {
+		className: "border-border-subtle ml-3 border-l pl-1",
+		children: /* @__PURE__ */ jsx(MenuBody, { menuId })
+	})] });
+}
+//#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.
+*
+* Styling is a 1:1 port of the v2 snippet's components:
+*   Button      → viewers/snippet/src/components/ui/button.tsx
+*   TabButton   → viewers/snippet/src/components/ui/tab-button.tsx (underline)
+*   zoom widget → viewers/snippet/src/components/custom-zoom-toolbar.tsx
+*   mode select → viewers/snippet/src/components/mode-select-button.tsx
+*/
+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}`;
+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 button = /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: run,
+		disabled: !cmd.enabled,
+		"aria-pressed": cmd.active || void 0,
+		"aria-haspopup": cmd.menu ? "menu" : void 0,
+		"aria-label": cmd.label,
+		title: cmd.label,
+		part: isTab ? `mode-tab${cmd.active ? " mode-tab-active" : ""}` : `toolbar-button${cmd.active ? " toolbar-button-active" : ""}`,
+		className: isTab ? tabClass(cmd.active, cmd.enabled) : buttonClass(cmd.active, cmd.enabled),
+		children: isTab ? /* @__PURE__ */ jsx("span", {
+			className: "whitespace-nowrap px-1",
+			children: cmd.label
+		}) : variant === "icon+label" ? /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center whitespace-nowrap text-sm",
+			children: [cmd.icon && /* @__PURE__ */ jsx(Icon, {
+				name: cmd.icon,
+				size: 20,
+				accent: cmd.iconAccent,
+				className: "mr-1.5 shrink-0"
+			}), /* @__PURE__ */ jsx("span", { children: cmd.label })]
+		}) : cmd.icon ? /* @__PURE__ */ jsx(Icon, {
+			name: cmd.icon,
+			size: 20,
+			accent: cmd.iconAccent
+		}) : /* @__PURE__ */ jsx("span", {
+			className: "text-sm",
+			children: cmd.label
+		})
+	});
+	if (!cmd.menu) return button;
+	return /* @__PURE__ */ jsx(MenuAnchoredButton, {
+		cmd,
+		children: button
+	});
+}
+function MenuAnchoredButton({ cmd, children }) {
+	const menus = useMenus();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex",
+		children: [children, (cmd.menu ? menus.isOpen(cmd.menu) : false) && cmd.menu && /* @__PURE__ */ jsx(Popover, {
+			onClose: () => menus.close(cmd.menu),
+			children: /* @__PURE__ */ jsx(MenuBody, {
+				menuId: cmd.menu,
+				onRun: () => menus.close(cmd.menu)
+			})
+		})]
+	});
+}
+function ZoomControls() {
+	const commands = useCommands();
+	const menus = useMenus();
+	const stage = useOptionalCapability(StageToken$1);
+	const level = useOptionalSelector(StageToken$1, (c) => c.zoomLevel(), 1);
+	const pct = Math.round((level ?? 1) * 100);
+	const [inputValue, setInputValue] = useState(String(pct));
+	useEffect(() => setInputValue(String(pct)), [pct]);
+	const submit = (e) => {
+		e.preventDefault();
+		const value = parseFloat(inputValue);
+		if (!isNaN(value) && value > 0) stage?.zoomTo({ level: value / 100 });
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "bg-hover flex items-center rounded",
+			children: [
+				/* @__PURE__ */ jsxs("form", {
+					onSubmit: submit,
+					className: "flex min-w-0 flex-nowrap items-center overflow-hidden whitespace-nowrap",
+					children: [/* @__PURE__ */ jsx("input", {
+						name: "zoom",
+						type: "text",
+						inputMode: "numeric",
+						pattern: "\\d*",
+						"aria-label": "Set zoom",
+						className: "h-6 w-8 min-w-0 shrink border-0 bg-transparent p-0 text-right text-sm outline-none focus:outline-none",
+						value: inputValue,
+						onChange: (e) => setInputValue(e.target.value.replace(/[^0-9]/g, "")),
+						onBlur: () => {
+							if (!inputValue || parseFloat(inputValue) <= 0) setInputValue(String(pct));
+						}
+					}), /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-sm",
+						children: "%"
+					})]
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-haspopup": "menu",
+					"aria-expanded": menus.isOpen("zoom"),
+					title: "Zoom options",
+					className: buttonClass(false),
+					onClick: () => menus.toggle("zoom"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "chevronDown",
+						size: 20
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					title: "Zoom out",
+					className: buttonClass(false),
+					onClick: () => commands.execute("zoom:out"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "zoomOut",
+						size: 20
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					title: "Zoom in",
+					className: buttonClass(false),
+					onClick: () => commands.execute("zoom:in"),
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "zoomIn",
+						size: 20
+					})
+				})
+			]
+		}), menus.isOpen("zoom") && /* @__PURE__ */ jsx(Popover, {
+			onClose: () => menus.close("zoom"),
+			children: /* @__PURE__ */ jsx(MenuBody, {
+				menuId: "zoom",
+				onRun: () => menus.close("zoom")
+			})
+		})]
+	});
+}
+/** The 'button' variant of the zoom slot — a single icon that opens the menu. */
+function ZoomButton() {
+	const menus = useMenus();
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			title: "Zoom",
+			"aria-haspopup": "menu",
+			"aria-expanded": menus.isOpen("zoom"),
+			className: buttonClass(menus.isOpen("zoom")),
+			onClick: () => menus.toggle("zoom"),
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "zoomIn",
+				size: 20
+			})
+		}), menus.isOpen("zoom") && /* @__PURE__ */ jsx(Popover, {
+			onClose: () => menus.close("zoom"),
+			children: /* @__PURE__ */ jsx(MenuBody, {
+				menuId: "zoom",
+				onRun: () => menus.close("zoom")
+			})
+		})]
+	});
+}
+function GroupTrigger({ view }) {
+	const [open, setOpen] = useState(false);
+	const activeHidden = view.commands.some((c) => c.active);
+	return /* @__PURE__ */ jsxs("span", {
+		className: "relative inline-flex",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			className: tabClass(activeHidden),
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: "chevronDown",
+				size: 18
+			})
+		}), open && /* @__PURE__ */ jsx(Popover, {
+			onClose: () => setOpen(false),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-w-44 p-1",
+				children: view.commands.map((c) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: view.role === "tabs" ? "menuitemradio" : "menuitem",
+					"aria-checked": view.role === "tabs" ? c.active : void 0,
+					disabled: !c.enabled,
+					onClick: () => {
+						view.execute(c.id);
+						setOpen(false);
+					},
+					className: `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm disabled:cursor-not-allowed disabled:opacity-50 ${c.active ? "bg-selected text-accent" : "text-fg-secondary hover:bg-hover"}`,
+					children: c.label
+				}, c.id))
+			})
+		})]
+	});
+}
+function CollapsedModes({ view }) {
+	const [open, setOpen] = useState(false);
+	const active = view.commands.find((c) => c.active) ?? view.commands[0];
+	const isActive = Boolean(active?.active && active.id !== "mode:view");
+	return /* @__PURE__ */ jsxs("div", {
+		style: { width: 100 },
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			"aria-haspopup": "menu",
+			"aria-expanded": open,
+			className: "bg-surface hover:bg-hover flex w-full cursor-pointer appearance-none items-center rounded-md py-1.5 pl-3 pr-2 text-[13px] transition-colors",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: `min-w-0 flex-1 truncate text-left ${isActive ? "text-accent" : "text-fg"}`,
+				children: active?.label
+			}), /* @__PURE__ */ jsx(Icon, {
+				name: "chevronDown",
+				size: 16,
+				className: isActive ? "text-accent" : "text-fg-secondary"
+			})]
+		}), open && /* @__PURE__ */ jsx(Popover, {
+			onClose: () => setOpen(false),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "min-w-44 p-1",
+				children: view.commands.map((c) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": c.active,
+					onClick: () => {
+						view.execute(c.id);
+						setOpen(false);
+					},
+					className: `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm ${c.active ? "bg-selected text-accent" : "text-fg-secondary hover:bg-hover"}`,
+					children: c.label
+				}, c.id))
+			})
+		})]
+	});
+}
+function OverflowMenu({ view }) {
+	const t = useT();
+	if (!view.isOpen) return null;
+	return /* @__PURE__ */ jsx(Popover, {
+		onClose: view.close,
+		align: "end",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-w-56 p-1",
+			children: view.sections.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
+				i > 0 && /* @__PURE__ */ jsx("div", { className: "bg-border-subtle my-1 h-px" }),
+				section.labelKey && /* @__PURE__ */ jsx("div", {
+					className: "text-fg-muted px-2.5 pb-1 pt-1.5 text-[11px] font-semibold uppercase tracking-wide",
+					children: t(section.labelKey)
+				}),
+				section.rows.map((row) => {
+					const cmd = view.resolve(row.command);
+					if (!cmd) return null;
+					if (row.type === "submenu") return /* @__PURE__ */ jsx(InlineSubmenu, {
+						menuId: row.menu,
+						label: cmd.label
+					}, row.command);
+					return /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						role: section.role === "radio" ? "menuitemradio" : "menuitem",
+						"aria-checked": section.role === "radio" ? cmd.active : void 0,
+						disabled: !cmd.enabled,
+						onClick: () => {
+							view.execute(row.command);
+							view.close();
+						},
+						className: `flex w-full items-center gap-3 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${cmd.active ? "bg-selected text-accent" : "text-fg-secondary hover:bg-hover"}`,
+						children: [cmd.icon && /* @__PURE__ */ jsx(Icon, {
+							name: cmd.icon,
+							size: 16,
+							className: cmd.active ? "" : "text-fg-muted"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "flex-1 truncate",
+							children: cmd.label
+						})]
+					}, row.command);
+				})
+			] }, i))
+		})
+	});
+}
+function OverflowTrigger({ isOpen, toggle }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: toggle,
+		"aria-haspopup": "menu",
+		"aria-expanded": isOpen,
+		title: useT()("demo.more"),
+		className: buttonClass(isOpen),
+		children: /* @__PURE__ */ jsx(Icon, {
+			name: "dots",
+			size: 20
+		})
+	});
+}
+function AppToolbar({ bar, className }) {
+	return /* @__PURE__ */ jsx(Toolbar, {
+		bar,
+		gap: 8,
+		separatorWidth: 1,
+		className,
+		renderCommand: (cmd, variant, run) => /* @__PURE__ */ jsx(CommandButton, {
+			cmd,
+			variant,
+			run
+		}),
+		renderCustom: { "zoom-controls": (variant) => variant === "inline" ? /* @__PURE__ */ jsx(ZoomControls, {}) : /* @__PURE__ */ jsx(ZoomButton, {}) },
+		renderCollapsed: (view) => view.id === "modes" ? /* @__PURE__ */ jsx(CollapsedModes, { view }) : void 0,
+		renderGroupTrigger: (view) => /* @__PURE__ */ jsx(GroupTrigger, { view }),
+		renderSeparator: () => /* @__PURE__ */ jsx("span", { className: "bg-border h-6 w-px self-center" }),
+		renderOverflowTrigger: (isOpen, toggle) => /* @__PURE__ */ jsx(OverflowTrigger, {
+			isOpen,
+			toggle
+		}),
+		renderOverflowMenu: (view) => /* @__PURE__ */ jsx(OverflowMenu, { view })
+	});
+}
+//#endregion
+//#region src/ui/annotation-strip.tsx
+/**
+* The annotation selection strip — v2's floating "selection menu" rebuilt as
+* chrome. Three parties, none of them this file's business to compute:
+*
+*   config/chrome.ts `strips.annotation`  declares WHAT may appear
+*   each command's visible/enabled        decides WHICH items show
+*   <AnnotationMenu>                      solves WHERE (camera transform,
+*                                         rotate-knob dodging, pointer isolation)
+*
+* useStripView is the live intersection: hidden commands drop out, empty
+* groups vanish, null when nothing applies. This file only draws pixels.
+* Mounted in the Stage `overlay` slot.
+*/
+function StripButton({ cmd, run }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: run,
+		disabled: !cmd.enabled,
+		"aria-pressed": cmd.active || void 0,
+		"aria-label": cmd.label,
+		title: cmd.label,
+		className: buttonClass(cmd.active, cmd.enabled),
+		children: cmd.icon && /* @__PURE__ */ jsx(Icon, {
+			name: cmd.icon,
+			size: 20,
+			accent: cmd.iconAccent
+		})
+	});
+}
+function AnnotationStrip() {
+	const t = useT();
+	const view = useStripView(useStripSchema("annotation"));
+	if (!view) return null;
+	return /* @__PURE__ */ jsx(AnnotationMenu, {
+		placement: "bottom",
+		gap: 15,
+		children: () => /* @__PURE__ */ jsx("div", {
+			role: "toolbar",
+			"aria-label": t("commands.annotate.strip"),
+			className: "border-border-subtle bg-elevated flex items-center gap-1 rounded-lg border p-1 shadow-xl",
+			children: view.groups.map((g, i) => /* @__PURE__ */ jsxs(Fragment, { children: [i > 0 && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				className: "bg-border h-5 w-px"
+			}), g.commands.map((cmd) => /* @__PURE__ */ jsx(StripButton, {
+				cmd,
+				run: () => view.execute(cmd.id)
+			}, cmd.id))] }, g.id))
+		})
+	});
+}
+//#endregion
+//#region src/ui/tab-bar.tsx
+/**
+* The document tab bar — a 1:1 port of v2's tab-bar.tsx
+* (viewers/snippet/src/components/tab-bar.tsx): rounded-top tabs on the
+* surface-alt strip, the active tab merging into the toolbar surface below,
+* close-× on the active tab, and a + button opening a real file dialog.
+*
+* v2 needed a DocumentManager capability; here the kernel's document registry
+* (useDocuments) already is the tab model — open/close/setActive, reactive.
+*/
+function TabBar({ visibility = "always", allowOpenFile = true }) {
+	const { docs, activeId, setActive, close, open } = useDocuments();
+	const fileInput = useRef(null);
+	if (!(visibility === "always" || visibility === "multiple" && docs.length > 1)) return null;
+	const openFile = async (file) => {
+		const bytes = new Uint8Array(await file.arrayBuffer());
+		const source = {
+			kind: "bytes",
+			id: `${file.name}-${Date.now()}`,
+			bytes
+		};
+		await open(source, { name: file.name });
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-surface-alt flex items-end pr-2 pt-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 items-end overflow-x-auto pl-4",
+			children: [docs.map((doc) => {
+				const isActive = activeId === doc.id;
+				return /* @__PURE__ */ jsxs("div", {
+					onClick: () => setActive(doc.id),
+					role: "tab",
+					part: isActive ? "tab tab-active" : "tab",
+					tabIndex: 0,
+					"aria-selected": isActive,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							setActive(doc.id);
+						}
+					},
+					className: `group relative flex min-w-[120px] max-w-[240px] cursor-pointer items-center gap-2 rounded-t-lg px-4 py-2 text-sm font-medium transition-all ${isActive ? "bg-surface text-fg z-10" : "bg-surface-alt text-fg-secondary hover:bg-hover hover:text-fg"}`,
+					children: [
+						doc.status === "loading" && /* @__PURE__ */ jsx("span", {
+							className: "border-border-subtle border-t-accent h-3 w-3 flex-shrink-0 animate-spin rounded-full border",
+							"aria-label": "Loading"
+						}),
+						doc.status === "locked" && /* @__PURE__ */ jsx(Icon, {
+							name: "lock",
+							size: 13,
+							className: "text-fg-muted flex-shrink-0"
+						}),
+						doc.status === "error" && /* @__PURE__ */ jsx(Icon, {
+							name: "alertTriangle",
+							size: 13,
+							className: "flex-shrink-0 text-red-500"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: doc.name ?? `Document ${doc.id.slice(0, 8)}`
+						}),
+						isActive && docs.length > 1 && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								close(doc.id);
+							},
+							"aria-label": `Close ${doc.name ?? "document"}`,
+							className: "hover:bg-hover flex-shrink-0 cursor-pointer rounded-full p-1 opacity-100 transition-all",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "x",
+								size: 14
+							})
+						})
+					]
+				}, doc.id);
+			}), allowOpenFile && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => fileInput.current?.click(),
+				"aria-label": "Open File",
+				title: "Open File",
+				className: "text-fg-secondary hover:bg-hover hover:text-fg mb-1.5 ml-1 flex-shrink-0 cursor-pointer rounded p-1.5 transition-colors",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "plus",
+					size: 14
+				})
+			}), /* @__PURE__ */ jsx("input", {
+				ref: fileInput,
+				type: "file",
+				accept: ".pdf,application/pdf",
+				className: "hidden",
+				onChange: (e) => {
+					const file = e.target.files?.[0];
+					if (file) openFile(file);
+					e.target.value = "";
+				}
+			})] })]
+		})
+	});
+}
+//#endregion
+//#region src/ui/tool-cursor.tsx
+/**
+* THIS viewer's armed-tool cursor: the toolbar's own icon riding the pointer
+* as a real CSS cursor (OS-composited — zero lag, unlike any DOM follower).
+* The library owns arbitration (unmapped hover claims win, page gaps fall
+* back to the arrow — see `useToolCursor`); this module only decides what the
+* cursor LOOKS like. It reuses the SAME icon set and the SAME accent
+* derivation as the toolbar buttons (TOOL_ICONS is recorded by the command
+* definitions), so the cursor is pixel-identical to the button the user just
+* pressed — recolor the tool and both follow. A tool without a command icon
+* keeps its declared keyword cursor.
+*
+* ONE table decides the shape ({@link GLYPHS}): cursor KEYWORDS are the
+* affordances — a tool declares its base ('crosshair' to draw, 'copy' to
+* place), the selection handler claims 'text' over text — and each mapped
+* keyword is redrawn as its glyph + the tool's icon. Keywords the table omits
+* stay native: a markup tool's 'default' base is the bare arrow (identity
+* appears exactly where the action is possible — over text), a foreign 'move'
+* over an annotation drops the icon. A new tool gets the right cursor from
+* what it declares; nothing tool-specific lives here.
+*
+* The image: a white-haloed glyph at the hotspot (readable on any page color)
+* with the icon at its top right — 40px, under the 128px cursor ceiling;
+* Chromium may briefly show the default arrow when a >32px cursor would
+* overlap browser UI (anti-spoofing), which is fine mid-viewport.
+*/
+const SIZE = 40;
+const HOTSPOT = {
+	x: 8,
+	y: 28
+};
+const INK = "#1a1a1a";
+const HALO = "#ffffff";
+/** The drag-and-drop "will place a copy" green (Chrome's DnD badge). */
+const PLACE_GREEN = "#34a853";
+/** The icon's paths as SVG markup — the string twin of `<Icon>`'s render loop
+*  (same fill/stroke slot rules), with a white halo pass underneath so the
+*  glyph stays readable over page content. */
+function iconGlyph(name, accent) {
+	const paths = ICON_PATHS[name];
+	if (!paths) return null;
+	const halo = [];
+	const draw = [];
+	for (const p of paths) {
+		const spec = typeof p === "string" ? {
+			d: p,
+			fill: void 0,
+			stroke: void 0
+		} : p;
+		const fill = spec.fill === true ? INK : spec.fill ? accent?.[spec.fill] : void 0;
+		const stroke = spec.stroke ? accent?.[spec.stroke] ?? INK : spec.fill ? "none" : INK;
+		halo.push(`<path d="${spec.d}" fill="none" stroke="${HALO}" stroke-width="3.5"/>`);
+		draw.push(`<path d="${spec.d}" fill="${fill ?? "none"}" stroke="${stroke}"/>`);
+	}
+	return halo.join("") + draw.join("");
+}
+const haloed = (x1, y1, x2, y2) => `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${HALO}" stroke-width="3"/><line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${INK}" stroke-width="1.25"/>`;
+function actionGlyph(glyph) {
+	const { x, y } = HOTSPOT;
+	if (glyph === "crosshair") return haloed(x, y - 6, x, y + 6) + haloed(x - 6, y, x + 6, y);
+	if (glyph === "ibeam") return haloed(x, y - 6.5, x, y + 6.5) + haloed(x - 2.5, y - 6.5, x + 2.5, y - 6.5) + haloed(x - 2.5, y + 6.5, x + 2.5, y + 6.5);
+	return `<circle cx="${x}" cy="${y}" r="7.5" fill="${PLACE_GREEN}" stroke="${HALO}" stroke-width="1.5"/><line x1="${x}" y1="${y - 3.5}" x2="${x}" y2="${y + 3.5}" stroke="${HALO}" stroke-width="2"/><line x1="${x - 3.5}" y1="${y}" x2="${x + 3.5}" y2="${y}" stroke="${HALO}" stroke-width="2"/>`;
+}
+function cursorSvg(glyph, icon, accent) {
+	const g = iconGlyph(icon, accent);
+	return `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}" fill="none" stroke-linecap="round" stroke-linejoin="round">` + actionGlyph(glyph) + (g ? `<g transform="translate(17 3) scale(${(20 / 24).toFixed(4)})" stroke-width="2">${g}</g>` : "") + `</svg>`;
+}
+/** keyword → glyph: how each affordance is drawn when a tool icon rides
+*  along. Draw tools declare 'crosshair', place tools (stamp/signature/image)
+*  declare 'copy', and the selection handler claims 'text' over text — which
+*  keywords ever SHOW is decided by those declarations and claims, never
+*  here. 'default' is deliberately absent: the bare arrow means "no action
+*  here", so it never carries an icon. */
+const GLYPHS = {
+	crosshair: "crosshair",
+	text: "ibeam",
+	copy: "plus"
+};
+/** Mount once (renders nothing): keeps the armed tool's cursor skin in sync
+*  with its toolbar icon + live defaults. */
+function ArmedToolCursor() {
+	const { activeToolId } = useTool();
+	const d = useAnnotationDefaults(activeToolId);
+	const entry = TOOL_ICONS[activeToolId];
+	const accent = entry?.accent ? {
+		primary: d[entry.accent.primary] ?? void 0,
+		secondary: entry.accent.secondary ? d[entry.accent.secondary] ?? void 0 : void 0
+	} : void 0;
+	useToolCursor(entry ? {
+		toolId: activeToolId,
+		cursors: Object.fromEntries(Object.entries(GLYPHS).map(([keyword, glyph]) => [keyword, {
+			svg: cursorSvg(glyph, entry.icon, accent),
+			hotspot: HOTSPOT
+		}]))
+	} : null);
+	return null;
+}
+//#endregion
+//#region src/ui/annotation-flags.tsx
+/**
+* The annotation FLAGS section — a live test surface for `/F` (ISO 32000
+* Table 167). Select any annotation(s) and toggle flags; the writes go through
+* the plugin's `updateSelectionFlags` (optimistic, flags-only engine patch),
+* and the reads come from `useSelectionFlags` (per-flag value, `null` when the
+* selection disagrees → indeterminate checkbox).
+*
+* Things to try:
+*   - `locked`: the selection keeps its outline but loses handles/knob; move,
+*     restyle and delete are refused; unchecking it here still works.
+*   - `hidden` / `noView`: the annotation disappears (it stays selected, so
+*     this panel can bring it back).
+*   - `readOnly`: visible but no longer clickable — deselect and try.
+*   - `noZoom` / `noRotate`: zoom or rotate the page; the body keeps its
+*     screen size / stays upright, anchored at its top-left corner.
+*   - `print`: flip it off and print/flatten elsewhere — the annotation is
+*     excluded (viewer rendering is unaffected).
+*/
+const FLAG_ROWS = [
+	{
+		key: "print",
+		label: "Print",
+		hint: "Include when the page is printed"
+	},
+	{
+		key: "hidden",
+		label: "Hidden",
+		hint: "Gone everywhere: screen, clicks, print"
+	},
+	{
+		key: "noView",
+		label: "No view",
+		hint: "Hidden on screen, may still print"
+	},
+	{
+		key: "toggleNoView",
+		label: "Toggle no view",
+		hint: "Reveal a no-view annotation while selected"
+	},
+	{
+		key: "readOnly",
+		label: "Read only",
+		hint: "Visible but not clickable"
+	},
+	{
+		key: "locked",
+		label: "Locked",
+		hint: "No move / resize / delete / restyle"
+	},
+	{
+		key: "lockedContents",
+		label: "Locked contents",
+		hint: "Text cannot change; geometry can"
+	},
+	{
+		key: "noZoom",
+		label: "No zoom",
+		hint: "Screen-constant size (anchored top-left)"
+	},
+	{
+		key: "noRotate",
+		label: "No rotate",
+		hint: "Stays upright when the page rotates"
+	},
+	{
+		key: "invisible",
+		label: "Invisible",
+		hint: "Legacy: hide unknown subtypes"
+	}
+];
+function FlagRow({ label, hint, value, onToggle }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (ref.current) ref.current.indeterminate = value === null;
+	}, [value]);
+	return /* @__PURE__ */ jsxs("label", {
+		className: "hover:bg-hover flex cursor-pointer items-start gap-2.5 rounded px-1.5 py-1.5",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			type: "checkbox",
+			className: "accent-accent mt-0.5",
+			checked: value === true,
+			onChange: () => onToggle(value !== true)
+		}), /* @__PURE__ */ jsxs("span", {
+			className: "min-w-0",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg block text-sm leading-tight",
+				children: label
+			}), /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted block text-xs leading-tight",
+				children: hint
+			})]
+		})]
+	});
+}
+/** The `/F` flags of the current selection, live-editable. Renders nothing
+*  when nothing is selected (the style panel shows its tool defaults then). */
+function AnnotationFlagsSection() {
+	const annotation = useAnnotation();
+	const flags = useSelectionFlags();
+	if (!flags) return null;
+	return /* @__PURE__ */ jsxs("section", {
+		className: "border-border mt-2 border-t pt-4",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-fg-muted mb-2 text-[11px] font-semibold uppercase tracking-wide",
+			children: "Flags (/F)"
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: FLAG_ROWS.map((row) => /* @__PURE__ */ jsx(FlagRow, {
+				label: row.label,
+				hint: row.hint,
+				value: flags[row.key],
+				onToggle: (next) => annotation.updateSelectionFlags({ [row.key]: next })
+			}, row.key))
+		})]
+	});
+}
+//#endregion
+//#region src/ui/annotation-style.tsx
+/**
+* The annotation style panel — the v2 snippet's style sidebar, rebuilt the v3
+* way. The plugin owns the schema AND the state; this file owns only how each
+* PropSpec renders and the flat patch it writes back. There is NO per-subtype
+* branching here: a new annotation kind that declares its `PropSpec[]` in the
+* kind table gets a working style panel for free.
+*
+* Data flow (mirrors examples/react's AnnotationSidebar):
+*   selection present → useSelectionProps() specs/values, write updateSelection()
+*   nothing selected  → propsForTool(tool) specs + useAnnotationDefaults(tool)
+*                        values, write setDefaults(tool, …)
+*
+* The look is ported 1:1 from viewers/snippet's annotation-sidebar (six-column
+* swatch grid, range slider, SVG stroke / line-ending dropdowns, font-size
+* combo, align toggles), retinted from v2's `bg-bg-input`/`text-fg-primary`
+* tokens to this app's semantic ones (bg-surface / text-fg / border-border …).
+*/
+const PRESET_COLORS = [
+	"#000000",
+	"#5f6368",
+	"#e44234",
+	"#ff8b00",
+	"#ffd500",
+	"#00cc66",
+	"#00b8d9",
+	"#4a90e2",
+	"#9b51e0",
+	"#f272c8",
+	"#a0522d",
+	"#ffffff"
+];
+const FONT_OPTIONS = [
+	{
+		v: "helvetica",
+		label: "Helvetica"
+	},
+	{
+		v: "helvetica-bold",
+		label: "Helvetica Bold"
+	},
+	{
+		v: "times-roman",
+		label: "Times Roman"
+	},
+	{
+		v: "courier",
+		label: "Courier"
+	}
+];
+const FONT_SIZES = [
+	8,
+	9,
+	10,
+	11,
+	12,
+	14,
+	16,
+	18,
+	24,
+	36,
+	48,
+	72
+];
+const BORDER_OPTS = [
+	{
+		key: "solid",
+		make: () => ({ kind: "solid" })
+	},
+	{
+		key: "dashed-6-2",
+		make: () => ({
+			kind: "dashed",
+			dash: [6, 2]
+		})
+	},
+	{
+		key: "dashed-3-3",
+		make: () => ({
+			kind: "dashed",
+			dash: [3, 3]
+		})
+	},
+	{
+		key: "dashed-1-2",
+		make: () => ({
+			kind: "dashed",
+			dash: [1, 2]
+		})
+	},
+	{
+		key: "cloudy-1",
+		make: () => ({
+			kind: "cloudy",
+			intensity: 1
+		})
+	},
+	{
+		key: "cloudy-2",
+		make: () => ({
+			kind: "cloudy",
+			intensity: 2
+		})
+	}
+];
+const borderKey = (b) => b.kind === "cloudy" ? `cloudy-${b.intensity >= 2 ? 2 : 1}` : b.kind === "dashed" ? `dashed-${b.dash.join("-")}` : "solid";
+const LINE_ENDINGS = [
+	{
+		v: "none",
+		label: "None"
+	},
+	{
+		v: "open-arrow",
+		label: "Open arrow"
+	},
+	{
+		v: "closed-arrow",
+		label: "Closed arrow"
+	},
+	{
+		v: "r-open-arrow",
+		label: "Reverse open"
+	},
+	{
+		v: "r-closed-arrow",
+		label: "Reverse closed"
+	},
+	{
+		v: "circle",
+		label: "Circle"
+	},
+	{
+		v: "square",
+		label: "Square"
+	},
+	{
+		v: "diamond",
+		label: "Diamond"
+	},
+	{
+		v: "butt",
+		label: "Butt"
+	},
+	{
+		v: "slash",
+		label: "Slash"
+	}
+];
+const BLEND_MODES = [
+	{
+		v: "normal",
+		label: "Normal"
+	},
+	{
+		v: "multiply",
+		label: "Multiply"
+	},
+	{
+		v: "screen",
+		label: "Screen"
+	},
+	{
+		v: "overlay",
+		label: "Overlay"
+	},
+	{
+		v: "darken",
+		label: "Darken"
+	},
+	{
+		v: "lighten",
+		label: "Lighten"
+	},
+	{
+		v: "color-dodge",
+		label: "Color Dodge"
+	},
+	{
+		v: "color-burn",
+		label: "Color Burn"
+	},
+	{
+		v: "hard-light",
+		label: "Hard Light"
+	},
+	{
+		v: "soft-light",
+		label: "Soft Light"
+	},
+	{
+		v: "difference",
+		label: "Difference"
+	},
+	{
+		v: "exclusion",
+		label: "Exclusion"
+	},
+	{
+		v: "hue",
+		label: "Hue"
+	},
+	{
+		v: "saturation",
+		label: "Saturation"
+	},
+	{
+		v: "color",
+		label: "Color"
+	},
+	{
+		v: "luminosity",
+		label: "Luminosity"
+	}
+];
+function Field({ label, mixed, children }) {
+	return /* @__PURE__ */ jsxs("section", {
+		className: "mb-5",
+		children: [/* @__PURE__ */ jsxs("label", {
+			className: "text-fg mb-2 block text-sm font-medium",
+			children: [label, mixed && /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted ml-1.5 text-xs font-normal",
+				children: "(mixed)"
+			})]
+		}), children]
+	});
+}
+const isTransparent = (c) => c == null || c === "transparent" || /^#([0-9a-f]{8})$/i.test(c) && c.slice(-2).toLowerCase() === "00";
+function Swatch({ color, active, onSelect }) {
+	const style = isTransparent(color) ? {
+		backgroundColor: "#fff",
+		backgroundImage: "linear-gradient(45deg, transparent 40%, #ef4444 40%, #ef4444 60%, transparent 60%)",
+		backgroundSize: "100% 100%"
+	} : { backgroundColor: color };
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title: color,
+		onClick: () => onSelect(color),
+		className: `border-border-strong h-5 w-5 rounded-full border ${active ? "outline-accent outline outline-2 outline-offset-2" : ""}`,
+		style
+	});
+}
+function SwatchGrid({ value, onSelect, allowTransparent }) {
+	const active = (c) => c.toLowerCase() === (value ?? "").toLowerCase();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-6 gap-x-1 gap-y-3",
+		children: [PRESET_COLORS.map((c) => /* @__PURE__ */ jsx(Swatch, {
+			color: c,
+			active: active(c),
+			onSelect
+		}, c)), allowTransparent && /* @__PURE__ */ jsx(Swatch, {
+			color: "transparent",
+			active: isTransparent(value ?? null),
+			onSelect
+		})]
+	});
+}
+function RangeSlider({ value, min, max, step, onChange }) {
+	return /* @__PURE__ */ jsx("input", {
+		type: "range",
+		className: "accent-accent mb-1.5 h-1 w-full cursor-pointer",
+		value,
+		min,
+		max,
+		step,
+		onChange: (e) => onChange(parseFloat(e.target.value))
+	});
+}
+function useOutsideClose(open, close) {
+	const rootRef = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const onDoc = (e) => {
+			if (rootRef.current && !e.composedPath().includes(rootRef.current)) close();
+		};
+		document.addEventListener("mousedown", onDoc);
+		return () => document.removeEventListener("mousedown", onDoc);
+	}, [open, close]);
+	return rootRef;
+}
+function DropdownShell({ trigger, children }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useOutsideClose(open, () => setOpen(false)),
+		className: "relative w-full",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			className: "border-border bg-surface text-fg flex w-full items-center justify-between gap-2 rounded border px-3 py-1.5",
+			children: [trigger, /* @__PURE__ */ jsx(Icon, {
+				name: "chevronDown",
+				size: 16,
+				className: "text-fg-secondary shrink-0"
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: "border-border bg-elevated absolute z-10 mt-1 max-h-60 w-full overflow-y-auto rounded border p-1 shadow-lg",
+			children: children(() => setOpen(false))
+		})]
+	});
+}
+function OptionRow({ selected, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick,
+		className: `hover:bg-hover flex w-full items-center rounded px-2 py-1.5 text-left text-sm ${selected ? "bg-selected text-accent" : "text-fg"}`,
+		children
+	});
+}
+function borderSvg(b) {
+	if (b.kind === "cloudy") {
+		const r = b.intensity >= 2 ? 5 : 3;
+		const n = Math.ceil(80 / (r * 2));
+		const step = 80 / n;
+		const baseline = r + 1;
+		const viewH = r * 2 + 2;
+		const parts = [`M 0 ${baseline}`];
+		for (let i = 0; i < n; i++) parts.push(`A ${r} ${r} 0 0 1 ${step * (i + 1)} ${baseline}`);
+		return /* @__PURE__ */ jsx("svg", {
+			width: "80",
+			height: viewH,
+			viewBox: `0 0 80 ${viewH}`,
+			children: /* @__PURE__ */ jsx("path", {
+				d: parts.join(" "),
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				strokeLinejoin: "round",
+				strokeLinecap: "round"
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("svg", {
+		width: "80",
+		height: "8",
+		viewBox: "0 0 80 8",
+		children: /* @__PURE__ */ jsx("line", {
+			x1: "0",
+			y1: "4",
+			x2: "80",
+			y2: "4",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeDasharray: b.kind === "dashed" ? b.dash.join(" ") : void 0
+		})
+	});
+}
+function BorderSelect({ value, cloudy, onChange }) {
+	const opts = cloudy ? BORDER_OPTS : BORDER_OPTS.filter((o) => !o.key.startsWith("cloudy"));
+	return /* @__PURE__ */ jsx(DropdownShell, {
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "text-fg-secondary",
+			children: borderSvg(value)
+		}),
+		children: (close) => opts.map((o) => {
+			const b = o.make();
+			return /* @__PURE__ */ jsx(OptionRow, {
+				selected: borderKey(value) === o.key,
+				onClick: () => {
+					onChange(b);
+					close();
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-fg-secondary",
+					children: borderSvg(b)
+				})
+			}, o.key);
+		})
+	});
+}
+const LE_MARKERS = {
+	square: /* @__PURE__ */ jsx("path", { d: "M68 -4 L76 -4 L76 4 L68 4 Z" }),
+	circle: /* @__PURE__ */ jsx("circle", {
+		cx: "72",
+		cy: "0",
+		r: "4"
+	}),
+	diamond: /* @__PURE__ */ jsx("path", { d: "M72 -5 L77 0 L72 5 L67 0 Z" }),
+	"open-arrow": /* @__PURE__ */ jsx("path", {
+		d: "M67 -5 L77 0 L67 5",
+		fill: "none"
+	}),
+	"closed-arrow": /* @__PURE__ */ jsx("path", { d: "M67 -5 L77 0 L67 5 Z" }),
+	"r-open-arrow": /* @__PURE__ */ jsx("path", {
+		d: "M77 -5 L67 0 L77 5",
+		fill: "none"
+	}),
+	"r-closed-arrow": /* @__PURE__ */ jsx("path", { d: "M77 -5 L67 0 L77 5 Z" }),
+	butt: /* @__PURE__ */ jsx("path", {
+		d: "M72 -5 L72 5",
+		fill: "none"
+	}),
+	slash: /* @__PURE__ */ jsx("path", {
+		d: "M67 -5 L77 5",
+		fill: "none"
+	})
+};
+const LE_LINE_END = {
+	square: 68,
+	circle: 68,
+	diamond: 67,
+	"open-arrow": 76,
+	"closed-arrow": 67,
+	"r-open-arrow": 67,
+	"r-closed-arrow": 67,
+	butt: 72,
+	slash: 72
+};
+function LineEndingPreview({ name, side }) {
+	const marker = LE_MARKERS[name];
+	const lineEndX = LE_LINE_END[name] ?? 77;
+	return /* @__PURE__ */ jsx("svg", {
+		width: "80",
+		height: "20",
+		viewBox: "0 0 80 20",
+		className: "text-fg",
+		children: /* @__PURE__ */ jsxs("g", {
+			transform: side === "start" ? "rotate(180 40 10)" : void 0,
+			children: [/* @__PURE__ */ jsx("line", {
+				x1: "4",
+				y1: "10",
+				x2: lineEndX,
+				y2: "10",
+				stroke: "currentColor",
+				strokeWidth: "1.5"
+			}), marker && /* @__PURE__ */ jsx("g", {
+				transform: "translate(0, 10)",
+				fill: "currentColor",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				children: marker
+			})]
+		})
+	});
+}
+function LineEndingSelect({ side, value, onChange }) {
+	return /* @__PURE__ */ jsx(DropdownShell, {
+		trigger: /* @__PURE__ */ jsx(LineEndingPreview, {
+			name: value,
+			side
+		}),
+		children: (close) => LINE_ENDINGS.map((o) => /* @__PURE__ */ jsx(OptionRow, {
+			selected: value === o.v,
+			onClick: () => {
+				onChange(o.v);
+				close();
+			},
+			children: /* @__PURE__ */ jsx(LineEndingPreview, {
+				name: o.v,
+				side
+			})
+		}, o.v))
+	});
+}
+function FontFamilySelect({ value, onChange }) {
+	return /* @__PURE__ */ jsx(DropdownShell, {
+		trigger: /* @__PURE__ */ jsx("span", {
+			className: "text-fg text-sm",
+			children: FONT_OPTIONS.find((o) => o.v === value)?.label ?? value
+		}),
+		children: (close) => FONT_OPTIONS.map((o) => /* @__PURE__ */ jsx(OptionRow, {
+			selected: o.v === value,
+			onClick: () => {
+				onChange(o.v);
+				close();
+			},
+			children: o.label
+		}, o.v))
+	});
+}
+function FontSizeCombo({ value, onChange }) {
+	const [open, setOpen] = useState(false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: useOutsideClose(open, () => setOpen(false)),
+		className: "relative w-full",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				type: "number",
+				min: 1,
+				value,
+				onChange: (e) => {
+					const n = parseInt(e.target.value, 10);
+					if (Number.isFinite(n) && n > 0) onChange(n);
+				},
+				onClick: () => setOpen(true),
+				className: "border-border bg-surface text-fg w-full rounded border px-2 py-1.5 pr-7 text-sm"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				tabIndex: -1,
+				onClick: () => setOpen((o) => !o),
+				className: "absolute inset-y-0 right-1 flex items-center",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "chevronDown",
+					size: 16,
+					className: "text-fg-secondary"
+				})
+			}),
+			open && /* @__PURE__ */ jsx("div", {
+				className: "border-border bg-elevated absolute z-10 mt-1 max-h-48 w-full overflow-y-auto rounded border p-1 shadow-lg",
+				children: FONT_SIZES.map((sz) => /* @__PURE__ */ jsx(OptionRow, {
+					selected: sz === value,
+					onClick: () => {
+						onChange(sz);
+						setOpen(false);
+					},
+					children: sz
+				}, sz))
+			})
+		]
+	});
+}
+function BlendModeSelect({ value, onChange }) {
+	return /* @__PURE__ */ jsx("select", {
+		value,
+		onChange: (event) => onChange(event.target.value),
+		className: "border-border bg-surface text-fg w-full rounded border px-3 py-1.5 text-sm",
+		children: BLEND_MODES.map((mode) => /* @__PURE__ */ jsx("option", {
+			value: mode.v,
+			children: mode.label
+		}, mode.v))
+	});
+}
+function Toggle({ active, title, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		title,
+		onClick,
+		className: `flex h-9 w-9 items-center justify-center rounded border transition-colors ${active ? "border-accent bg-accent text-on-accent" : "border-border bg-surface text-fg hover:bg-hover"}`,
+		children
+	});
+}
+/**
+* The link-target editor — v2's "Link / Go to link / Remove link" menu items,
+* rebuilt on the schema: any kind whose table declares the `link` spec gets
+* this control, and every write is the ONE `updateSelection({ link })` path
+* (the plugin materializes/retargets/deletes the attached children).
+*/
+function LinkTargetControl({ label, value, mixed, onChange }) {
+	const kernel = useKernel();
+	const link = useOptionalCapability(LinkToken);
+	const [mode, setMode] = useState(value?.kind === "goto" ? "page" : "uri");
+	const [uri, setUri] = useState(value?.kind === "uri" ? value.uri : "");
+	const [pageNo, setPageNo] = useState("1");
+	useEffect(() => {
+		setMode(value?.kind === "goto" ? "page" : "uri");
+		if (value?.kind === "uri") setUri(value.uri);
+	}, [value]);
+	const apply = () => {
+		if (mode === "uri") {
+			const trimmed = uri.trim();
+			if (trimmed) onChange({ link: {
+				kind: "uri",
+				uri: trimmed
+			} });
+			return;
+		}
+		const activeId = kernel.documents.activeId();
+		const layout = (activeId ? kernel.getState().core.documents[activeId] : null)?.pages[Math.max(0, Number(pageNo) - 1)];
+		if (layout) onChange({ link: {
+			kind: "goto",
+			destination: {
+				kind: "fit",
+				pageObjectNumber: layout.pageObjectNumber
+			}
+		} });
+	};
+	const inputCls = "border-border bg-surface text-fg w-full rounded border px-3 py-1.5 text-sm";
+	return /* @__PURE__ */ jsxs(Field, {
+		label,
+		mixed,
+		children: [
+			value != null && /* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "border-border bg-surface text-fg flex-1 rounded border px-2 py-1.5 text-sm",
+					onClick: () => link?.activate(value),
+					children: "Go to link"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "border-border bg-surface text-fg flex-1 rounded border px-2 py-1.5 text-sm",
+					onClick: () => onChange({ link: null }),
+					children: "Remove link"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-2 flex gap-2",
+				children: [/* @__PURE__ */ jsx(Toggle, {
+					title: "Link to a URL",
+					active: mode === "uri",
+					onClick: () => setMode("uri"),
+					children: "URL"
+				}), /* @__PURE__ */ jsx(Toggle, {
+					title: "Link to a page",
+					active: mode === "page",
+					onClick: () => setMode("page"),
+					children: "Page"
+				})]
+			}),
+			mode === "uri" ? /* @__PURE__ */ jsx("input", {
+				type: "url",
+				className: inputCls,
+				placeholder: "https://…",
+				value: uri,
+				onChange: (e) => setUri(e.target.value),
+				onKeyDown: (e) => e.key === "Enter" && apply()
+			}) : /* @__PURE__ */ jsx("input", {
+				type: "number",
+				min: 1,
+				className: inputCls,
+				placeholder: "Page number",
+				value: pageNo,
+				onChange: (e) => setPageNo(e.target.value),
+				onKeyDown: (e) => e.key === "Enter" && apply()
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "border-border bg-surface text-fg mt-2 w-full rounded border px-2 py-1.5 text-sm font-medium",
+				onClick: apply,
+				children: value == null ? "Add link" : "Update link"
+			})
+		]
+	});
+}
+function PropControl({ spec, value, mixed, onChange }) {
+	switch (spec.key) {
+		case "color":
+		case "fontColor": return /* @__PURE__ */ jsx(Field, {
+			label: spec.label,
+			mixed,
+			children: /* @__PURE__ */ jsx(SwatchGrid, {
+				value,
+				onSelect: (c) => onChange({ [spec.key]: c })
+			})
+		});
+		case "interiorColor": return /* @__PURE__ */ jsx(Field, {
+			label: spec.label,
+			mixed,
+			children: /* @__PURE__ */ jsx(SwatchGrid, {
+				value,
+				allowTransparent: true,
+				onSelect: (c) => onChange({ interiorColor: c === "transparent" ? null : c })
+			})
+		});
+		case "opacity": {
+			const v = value ?? 1;
+			return /* @__PURE__ */ jsxs(Field, {
+				label: spec.label,
+				mixed,
+				children: [/* @__PURE__ */ jsx(RangeSlider, {
+					value: v,
+					min: spec.min,
+					max: spec.max,
+					step: spec.step,
+					onChange: (n) => onChange({ opacity: n })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-fg-muted text-xs",
+					children: [Math.round(v * 100), "%"]
+				})]
+			});
+		}
+		case "strokeWidth": {
+			const v = value ?? spec.min;
+			return /* @__PURE__ */ jsxs(Field, {
+				label: spec.label,
+				mixed,
+				children: [/* @__PURE__ */ jsx(RangeSlider, {
+					value: v,
+					min: spec.min,
+					max: spec.max,
+					step: spec.step,
+					onChange: (n) => onChange({ strokeWidth: n })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "text-fg-muted text-xs",
+					children: [v, "px"]
+				})]
+			});
+		}
+		case "fontSize": return /* @__PURE__ */ jsx(Field, {
+			label: spec.label,
+			mixed,
+			children: /* @__PURE__ */ jsx(FontSizeCombo, {
+				value: value ?? 12,
+				onChange: (n) => onChange({ fontSize: n })
+			})
+		});
+		case "border": return /* @__PURE__ */ jsx(Field, {
+			label: spec.label,
+			mixed,
+			children: /* @__PURE__ */ jsx(BorderSelect, {
+				value: value ?? { kind: "solid" },
+				cloudy: spec.cloudy,
+				onChange: (b) => onChange({ border: b })
+			})
+		});
+		case "lineEndings": {
+			const le = value ?? {
+				start: "none",
+				end: "none"
+			};
+			return /* @__PURE__ */ jsx(Field, {
+				label: spec.label,
+				mixed,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-2 gap-3",
+					children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-fg-muted mb-1.5 text-xs",
+						children: "Start"
+					}), /* @__PURE__ */ jsx(LineEndingSelect, {
+						side: "start",
+						value: le.start,
+						onChange: (v) => onChange({ lineEndings: { start: v } })
+					})] }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+						className: "text-fg-muted mb-1.5 text-xs",
+						children: "End"
+					}), /* @__PURE__ */ jsx(LineEndingSelect, {
+						side: "end",
+						value: le.end,
+						onChange: (v) => onChange({ lineEndings: { end: v } })
+					})] })]
+				})
+			});
+		}
+		case "fontFamily": return /* @__PURE__ */ jsx(Field, {
+			label: spec.label,
+			mixed,
+			children: /* @__PURE__ */ jsx(FontFamilySelect, {
+				value: value ?? "helvetica",
+				onChange: (v) => onChange({ fontFamily: v })
+			})
+		});
+		case "textAlign": {
+			const alignIcon = {
+				left: "alignLeft",
+				center: "alignCenter",
+				right: "alignRight"
+			};
+			return /* @__PURE__ */ jsx(Field, {
+				label: spec.label,
+				mixed,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex gap-2",
+					children: [
+						"left",
+						"center",
+						"right"
+					].map((al) => /* @__PURE__ */ jsx(Toggle, {
+						title: `Align ${al}`,
+						active: value === al,
+						onClick: () => onChange({ textAlign: al }),
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: alignIcon[al],
+							size: 18
+						})
+					}, al))
+				})
+			});
+		}
+		case "blendMode": return /* @__PURE__ */ jsx(Field, {
+			label: spec.label,
+			mixed,
+			children: /* @__PURE__ */ jsx(BlendModeSelect, {
+				value: value ?? "normal",
+				onChange: (blendMode) => onChange({ blendMode })
+			})
+		});
+		case "link": return /* @__PURE__ */ jsx(LinkTargetControl, {
+			label: spec.label,
+			value: value ?? null,
+			mixed,
+			onChange
+		});
+		default: return null;
+	}
+}
+function EmptyState() {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "text-fg-muted flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: "palette",
+			size: 40,
+			className: "text-fg-disabled"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "max-w-[180px] text-sm",
+			children: "Pick a draw tool or select an annotation to edit its style."
+		})]
+	});
+}
+/**
+* The schema-driven style panel. Rendered inside the right sidebar's
+* `annotation-style` surface (see ui/panels.tsx). Owns its own scroll.
+*/
+function AnnotationStylePanel() {
+	const annotation = useAnnotation();
+	const { activeToolId } = useTool();
+	const sel = useSelectionProps();
+	const defaults = useAnnotationDefaults(activeToolId);
+	const selected = useAnnotationSelected();
+	const hasSel = sel.specs.length > 0;
+	const specs = hasSel ? sel.specs : annotation.propsForTool(activeToolId);
+	const values = hasSel ? sel.values : defaults;
+	const write = (patch) => hasSel ? annotation.updateSelection(patch) : annotation.setDefaults(activeToolId, patch);
+	if (specs.length === 0 && selected.length === 0) return /* @__PURE__ */ jsx(EmptyState, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 overflow-y-auto p-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted mb-4 text-[11px] font-semibold uppercase tracking-wide",
+				children: hasSel ? `${selected.length} selected` : `${activeToolId} defaults`
+			}),
+			specs.map((spec) => /* @__PURE__ */ jsx(PropControl, {
+				spec,
+				value: values[spec.key],
+				mixed: hasSel && sel.mixed.includes(spec.key),
+				onChange: write
+			}, spec.key)),
+			/* @__PURE__ */ jsx(RedactionLabelSection, {}),
+			/* @__PURE__ */ jsx(AnnotationFlagsSection, {})
+		]
+	});
+}
+/**
+* Label editor shown when exactly one redaction mark is selected. The text is
+* what the destructive apply paints over the region (white-on-black by the
+* tool defaults); `repeat` tiles it. Writes ride the annotation update verb
+* via the redaction plugin, which preserves the label's `/DA` styling.
+*/
+function RedactionLabelSection() {
+	const t = useT();
+	const redaction = useOptionalCapability(RedactionToken$1);
+	const selected = useAnnotationSelected();
+	const mark = selected.length === 1 && selected[0].subtype === "redact" ? selected[0] : null;
+	const [draft, setDraft] = useState(null);
+	useEffect(() => setDraft(null), [mark?.ref && refKeyOfRedact(mark.ref)]);
+	if (!redaction || !mark || mark.subtype !== "redact") return null;
+	const value = draft ?? mark.overlayText ?? "";
+	const commit = () => {
+		if (draft === null) return;
+		redaction.setLabel(mark.ref, { overlayText: draft.length > 0 ? draft : null });
+		setDraft(null);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-border-subtle mt-4 border-t pt-4",
+		children: [
+			/* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted mb-2 text-[11px] font-semibold uppercase tracking-wide",
+				children: t("demo.redactLabelTitle")
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				value,
+				placeholder: t("demo.redactLabelPlaceholder"),
+				onChange: (e) => setDraft(e.target.value),
+				onBlur: commit,
+				onKeyDown: (e) => e.key === "Enter" && commit(),
+				className: "border-border bg-surface text-fg w-full rounded-md border px-2 py-1.5 text-sm"
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "text-fg mt-2 flex items-center gap-2 text-sm",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: mark.repeat,
+					onChange: (e) => void redaction.setLabel(mark.ref, { repeat: e.target.checked })
+				}), t("demo.redactLabelRepeat")]
+			})
+		]
+	});
+}
+/** Stable key for the effect dep — mirrors the annotation model's ref keys. */
+function refKeyOfRedact(ref) {
+	return JSON.stringify(ref);
+}
+//#endregion
+//#region src/ui/redaction-panel.tsx
+/**
+* The pending-redactions review panel (right sidebar). The list is a LIVE view
+* over the annotation plane — deleting a mark here is deleting the annotation.
+* "Apply all" routes through the confirm modal: the apply is irreversible.
+*/
+function RedactionPanel() {
+	const t = useT();
+	const redaction = useRedaction();
+	const pending = usePendingRedactions();
+	const anno = useCapability(AnnotationToken$1);
+	const confirm = useSurface("redact-confirm");
+	useEffect(() => {
+		redaction.preparePending();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto p-2",
+			children: pending.length === 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center gap-3 px-4 py-10 text-center",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "redactionSidebar",
+					size: 32,
+					className: "text-fg-muted"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted text-sm",
+					children: t("demo.redactionEmpty")
+				})]
+			}) : /* @__PURE__ */ jsx("ul", {
+				className: "flex flex-col gap-1",
+				children: pending.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => anno.select(item.ref),
+					onKeyDown: (e) => e.key === "Enter" && anno.select(item.ref),
+					className: "hover:bg-hover group flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							name: item.kind === "area" ? "redactArea" : "redact",
+							size: 16,
+							className: "text-fg-muted shrink-0"
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg min-w-0 flex-1 truncate text-sm",
+							children: item.overlayText ?? t(item.kind === "area" ? "demo.redactionArea" : "demo.redactionText")
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-fg-muted shrink-0 text-xs",
+							children: t("demo.pageBadge", { params: { page: item.pageIndex >= 0 ? String(item.pageIndex + 1) : "?" } })
+						}),
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								anno.delete(item.ref);
+							},
+							className: "text-fg-muted hover:text-fg grid h-6 w-6 shrink-0 place-items-center rounded opacity-0 group-hover:opacity-100",
+							title: t("demo.redactionRemove"),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "trash",
+								size: 14
+							})
+						})
+					]
+				}) }, item.id))
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "border-border-subtle flex shrink-0 gap-2 border-t p-3",
+			children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: pending.length === 0,
+				onClick: () => {
+					for (const item of pending) anno.delete(item.ref);
+				},
+				className: "border-border text-fg hover:bg-hover flex-1 rounded-md border px-3 py-1.5 text-sm disabled:opacity-40",
+				children: t("commands.redact.clearAll")
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				disabled: pending.length === 0 || !redaction.canApply() || redaction.applying,
+				onClick: () => confirm.open(),
+				className: "flex-1 rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-40",
+				children: t("commands.redact.applyAll")
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/ui/search-panel.tsx
+/**
+* The search panel — the v2 snippet's search sidebar on the v3 plugin-search
+* capability. ONE shape end to end: the flat `SearchQuery` {text, regex,
+* matchCase, wholeWord} is what the engine matches, what the plugin stores
+* (document-scoped, survives the sidebar closing), and what this box renders.
+* The panel keeps only a DRAFT of it for keystroke/debounce echo.
+*
+* Data flow:
+*   type / toggle → validateSearchQuery → (debounced) search(draftQuery)
+*   useSearchState() → query / status / hitCount / activeIndex (reactive)
+*   useSelector(SearchToken, c => c.hits()) → the streamed hit list
+*   click a hit / prev / next → goTo/prev/next (capability reveals it on-page)
+*
+* The look is ported 1:1 from viewers/snippet's search-sidebar (magnifier
+* input with clear button, option checkboxes, results-found counter with
+* prev/next, per-page grouped snippet list with the match bolded and the
+* active hit accented), retinted to this app's semantic tokens. The regex
+* toggle is new in v3 (v2 had no pattern search); matchDiacritics exists in
+* the engine but is deliberately not exposed here — v2 parity.
+*/
+const DEBOUNCE_MS = 300;
+/** Field-wise equality on the flat query — the mount/echo no-op guard. */
+const sameQuery = (a, b) => a != null && a.text === b.text && !!a.regex === !!b.regex && !!a.matchCase === !!b.matchCase && !!a.wholeWord === !!b.wholeWord;
+function Checkbox({ label, checked, onChange }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "text-fg-secondary flex cursor-pointer select-none items-center gap-2 text-xs font-medium",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "relative flex h-4 w-4 items-center justify-center",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				checked,
+				onChange: (e) => onChange(e.target.checked),
+				className: "border-border bg-surface checked:border-accent checked:bg-accent peer h-4 w-4 shrink-0 appearance-none rounded-[3px] border transition-colors"
+			}), /* @__PURE__ */ jsx("svg", {
+				viewBox: "0 0 24 24",
+				className: "text-on-accent pointer-events-none absolute h-3 w-3 opacity-0 peer-checked:opacity-100",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 3,
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+			})]
+		}), label]
+	});
+}
+function renderSnippet(s) {
+	if (!s) return null;
+	const end = s.matchStart + s.matchLength;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		s.text.slice(0, s.matchStart),
+		/* @__PURE__ */ jsx("span", {
+			className: "text-accent font-semibold",
+			children: s.text.slice(s.matchStart, end)
+		}),
+		s.text.slice(end)
+	] });
+}
+function HitLine({ hit, active, onClick }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (active) ref.current?.scrollIntoView({
+			behavior: "smooth",
+			block: "nearest"
+		});
+	}, [active]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		onClick,
+		className: `w-full rounded border p-2 text-left text-sm transition-colors ${active ? "border-accent bg-accent-light text-fg" : "border-border-subtle bg-surface text-fg-secondary hover:bg-hover"}`,
+		children: /* @__PURE__ */ jsx("span", { children: renderSnippet(hit.snippet) })
+	});
+}
+function SearchPanel() {
+	const t = useT();
+	const search = useSearch();
+	const { query, status, hitCount, activeIndex } = useSearchState();
+	const hits = useSelector(SearchToken$1, (c) => c.hits());
+	const [draft, setDraft] = useState(() => query?.text ?? "");
+	const [matchCase, setMatchCase] = useState(() => query?.matchCase ?? false);
+	const [wholeWord, setWholeWord] = useState(() => query?.wholeWord ?? false);
+	const [regex, setRegex] = useState(() => query?.regex ?? false);
+	const inputRef = useRef(null);
+	const draftQuery = {
+		text: draft,
+		regex,
+		matchCase,
+		wholeWord
+	};
+	const validation = draft && regex ? validateSearchQuery(draftQuery) : { ok: true };
+	useEffect(() => {
+		if (!validation.ok || sameQuery(query, draftQuery)) return;
+		if (draft === "" && query === null) return;
+		const id = setTimeout(() => search.search(draftQuery), DEBOUNCE_MS);
+		return () => clearTimeout(id);
+	}, [
+		draft,
+		matchCase,
+		wholeWord,
+		regex,
+		query,
+		validation.ok,
+		search
+	]);
+	const grouped = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		hits.forEach((hit, index) => {
+			const arr = map.get(hit.pageIndex);
+			if (arr) arr.push({
+				hit,
+				index
+			});
+			else map.set(hit.pageIndex, [{
+				hit,
+				index
+			}]);
+		});
+		return [...map.entries()].sort((a, b) => a[0] - b[0]);
+	}, [hits]);
+	const searching = status === "searching";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "p-3",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "text-fg-muted pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2.5",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "search",
+								size: 16
+							})
+						}),
+						/* @__PURE__ */ jsx("input", {
+							ref: inputRef,
+							type: "text",
+							value: draft,
+							placeholder: t("demo.searchPlaceholder"),
+							onChange: (e) => setDraft(e.target.value),
+							className: `bg-surface text-fg w-full rounded-md border py-1.5 pl-8 pr-9 text-sm outline-none focus:ring-1 ${validation.ok ? "border-border focus:border-accent focus:ring-accent" : "border-red-400 focus:border-red-400 focus:ring-red-400"}`
+						}),
+						draft && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: () => {
+								setDraft("");
+								inputRef.current?.focus();
+							},
+							className: "text-fg-muted hover:text-fg-secondary absolute inset-y-0 right-0 flex items-center pr-2.5",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "x",
+								size: 16
+							})
+						})
+					]
+				}),
+				!validation.ok && /* @__PURE__ */ jsx("p", {
+					className: "mt-1.5 text-xs text-red-500",
+					children: validation.message
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex flex-col gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Checkbox, {
+							label: t("demo.searchCaseSensitive"),
+							checked: matchCase,
+							onChange: setMatchCase
+						}),
+						/* @__PURE__ */ jsx(Checkbox, {
+							label: t("demo.searchWholeWord"),
+							checked: wholeWord,
+							onChange: setWholeWord
+						}),
+						/* @__PURE__ */ jsx(Checkbox, {
+							label: t("demo.searchRegex"),
+							checked: regex,
+							onChange: setRegex
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("hr", { className: "border-border-subtle mb-2 mt-4" }),
+				status !== "idle" && /* @__PURE__ */ jsxs("div", {
+					className: "flex h-8 items-center justify-between",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-fg-muted text-xs",
+						children: hitCount === 0 ? t(searching ? "demo.searchSearching" : "demo.searchNoResults") : t("demo.searchResults", { params: { count: hitCount } })
+					}), hitCount > 1 && /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
+							title: "Previous",
+							className: buttonClass(false),
+							onClick: () => search.prev(),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "chevronLeft",
+								size: 20
+							})
+						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
+							title: "Next",
+							className: buttonClass(false),
+							onClick: () => search.next(),
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "chevronRight",
+								size: 20
+							})
+						})]
+					})]
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto px-3 pb-3",
+			children: grouped.map(([pageIndex, items]) => /* @__PURE__ */ jsxs("div", {
+				className: "mt-2 first:mt-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bg-surface/80 text-fg-muted py-2 text-xs backdrop-blur",
+					children: t("demo.searchPage", { params: { page: pageIndex + 1 } })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-2",
+					children: items.map(({ hit, index }) => /* @__PURE__ */ jsx(HitLine, {
+						hit,
+						active: index === activeIndex,
+						onClick: () => search.goTo(index)
+					}, index))
+				})]
+			}, pageIndex))
+		})]
+	});
+}
+//#endregion
+//#region src/ui/panels.tsx
+/**
+* The static chrome around the toolbars: the left/right sidebars (shell
+* surfaces) and the bottom page-controls overlay. Deliberately minimal —
+* chrome-parity scope. Panels read their open state from plugin-shell; the
+* app owns their DOM.
+*
+* There is no built-in header: branding, a locale picker and a theme switch
+* are the EMBEDDER's chrome, not the viewer's. The frame keeps a `header`
+* socket for a slotted one (see Shell).
+*/
+function LeftSidebar() {
+	const t = useT();
+	const sidebar = useSurface("sidebar");
+	if (!sidebar.isOpen) return null;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "border-border-subtle bg-surface flex w-60 shrink-0 flex-col border-r",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border-border-subtle flex items-center gap-1 border-b p-2",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "bg-accent-light text-accent rounded-md px-2 py-1 text-xs font-medium",
+					children: t("demo.thumbnails")
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-fg-muted rounded-md px-2 py-1 text-xs font-medium",
+					children: t("demo.outline")
+				}),
+				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: sidebar.close,
+					className: "text-fg-muted hover:bg-hover grid h-7 w-7 place-items-center rounded-md",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "x",
+						size: 16
+					})
+				})
+			]
+		}), /* @__PURE__ */ jsx(ThumbnailList, {})]
+	});
+}
+function ThumbnailList() {
+	const { currentPage, goToPage } = usePages();
+	const { reveal } = usePages(ThumbsStageToken);
+	useEffect(() => reveal(currentPage), [currentPage, reveal]);
+	return /* @__PURE__ */ jsx(Stage, {
+		token: ThumbsStageToken,
+		zoomGestures: false,
+		className: "flex-1",
+		style: { position: "relative" },
+		pageChrome: (page) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => goToPage(page.pageIndex),
+			title: `Page ${page.pageIndex + 1}`,
+			style: {
+				position: "absolute",
+				top: page.frame.top,
+				left: page.frame.left,
+				right: page.frame.right,
+				bottom: page.frame.bottom,
+				cursor: "pointer",
+				boxSizing: "border-box",
+				borderRadius: 4,
+				border: page.pageIndex === currentPage ? "2px solid var(--ep-accent)" : "1px solid var(--ep-border-subtle)",
+				boxShadow: page.pageIndex === currentPage ? "0 0 0 2px var(--ep-accent-light)" : "none"
+			}
+		}), /* @__PURE__ */ jsx("div", {
+			style: {
+				position: "absolute",
+				bottom: 0,
+				left: 0,
+				right: 0,
+				height: page.frame.bottom,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				fontSize: 11,
+				color: "var(--ep-fg-muted)",
+				pointerEvents: "none"
+			},
+			children: page.pageIndex + 1
+		})] }),
+		children: () => /* @__PURE__ */ jsx(RenderLayer, {})
+	});
+}
+function RightSidebar() {
+	const t = useT();
+	const documentId = useDocumentId();
+	const search = useSurface("search");
+	const comment = useSurface("comment");
+	const style = useSurface("annotation-style");
+	const redaction = useSurface("redaction");
+	const active = search.isOpen ? "search" : comment.isOpen ? "comment" : style.isOpen ? "style" : redaction.isOpen ? "redaction" : null;
+	if (!active) return null;
+	const titleKey = active === "search" ? "demo.searchTitle" : active === "comment" ? "demo.commentsTitle" : active === "redaction" ? "demo.redactionTitle" : "demo.styleTitle";
+	const close = active === "search" ? search.close : active === "comment" ? comment.close : active === "redaction" ? redaction.close : style.close;
+	return /* @__PURE__ */ jsxs("aside", {
+		className: "border-border-subtle bg-surface flex w-72 shrink-0 flex-col border-l",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "border-border-subtle flex items-center justify-between border-b p-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-fg text-sm font-semibold",
+				children: t(titleKey)
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: close,
+				className: "text-fg-muted hover:bg-hover grid h-7 w-7 place-items-center rounded-md",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "x",
+					size: 16
+				})
+			})]
+		}), active === "style" ? /* @__PURE__ */ jsx(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ jsx(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ jsx(RedactionPanel, {}) : /* @__PURE__ */ jsx("div", {
+			className: "p-3",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "text-fg-muted text-sm",
+				children: t("demo.empty")
+			})
+		})]
+	});
+}
+function PageControls() {
+	const t = useT();
+	const current = useSelector(StageToken$1, (c) => c.currentPage() + 1);
+	const total = useSelector(StageToken$1, (c) => c.pageCount());
+	if (!total) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute inset-x-0 bottom-5 flex justify-center",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "border-border-subtle bg-elevated/95 text-fg-secondary pointer-events-auto rounded-full border px-4 py-1.5 text-sm shadow-lg backdrop-blur",
+			children: t("demo.page", { params: {
+				current,
+				total
+			} })
+		})
+	});
+}
+//#endregion
+//#region src/ui/redact-confirm.tsx
+/**
+* The apply-all confirm modal (`redact-confirm` shell surface, `exclusive:
+* 'modal'` via the command router). Shows the pending count and the
+* CLIENT-SIDE collateral estimate — other annotations the apply will destroy —
+* before anything irreversible happens. The authoritative collateral count
+* comes back on the result.
+*/
+function RedactConfirmModal() {
+	const t = useT();
+	const surface = useSurface("redact-confirm");
+	const redaction = useRedaction();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState(null);
+	if (!surface.isOpen) return null;
+	const count = redaction.pendingCount();
+	const collateral = redaction.estimateCollateral();
+	const apply = async () => {
+		setBusy(true);
+		setError(null);
+		try {
+			await redaction.applyAll();
+			surface.close();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : String(err));
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "fixed inset-0 z-50 grid place-items-center bg-black/40",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "border-border bg-surface w-96 rounded-lg border p-4 shadow-xl",
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					className: "text-fg text-base font-semibold",
+					children: t("demo.redactConfirmTitle")
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted mt-2 text-sm",
+					children: t("demo.redactConfirmBody", { params: { count } })
+				}),
+				collateral > 0 ? /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm font-medium text-red-600",
+					children: t("demo.redactConfirmCollateral", { params: { count: collateral } })
+				}) : null,
+				error ? /* @__PURE__ */ jsx("p", {
+					className: "mt-2 text-sm text-red-600",
+					children: error
+				}) : null,
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-4 flex justify-end gap-2",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: busy,
+						onClick: surface.close,
+						className: "border-border text-fg hover:bg-hover rounded-md border px-3 py-1.5 text-sm",
+						children: t("demo.cancel")
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						disabled: busy,
+						onClick: () => void apply(),
+						className: "rounded-md bg-red-600 px-3 py-1.5 text-sm text-white hover:bg-red-700 disabled:opacity-60",
+						children: busy ? t("demo.redactApplying") : t("demo.redactApply")
+					})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/ui/document-boot.tsx
+/**
+* Boot-state panes for the document area — what renders INSTEAD of the Stage
+* while the selected tab's document isn't ready:
+*
+*   `locked` → <PasswordPrompt/>  (per-tab, v2's document-password-prompt port)
+*   `error`  → <DocumentError/>
+*
+* Both are per-TAB, not modal: several tabs can be locked/broken at once and
+* switching tabs stays free. The prompt drives ONE call —
+* `documents.unlock(id, { password })` — identical on the local (worker loads
+* the parked bytes) and cloud (/access grant) engines. The "incorrect" copy
+* keys on a real rejection: either this session's failed attempt, or
+* `passwordProvided` (a config-supplied password the engine already rejected).
+*/
+function PasswordPrompt() {
+	const docId = useDocumentId();
+	const { docs, unlock, close } = useDocuments();
+	const t = useT();
+	const [password, setPassword] = useState("");
+	const [rejected, setRejected] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const doc = docs.find((d) => d.id === docId);
+	if (!docId || !doc) return null;
+	const incorrect = rejected || doc.passwordProvided === true;
+	const submit = async () => {
+		if (busy || !password.trim()) return;
+		setBusy(true);
+		try {
+			await unlock(docId, { password });
+		} catch {
+			setRejected(true);
+			setPassword("");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-app flex h-full w-full items-center justify-center p-8",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bg-surface border-border w-full max-w-sm rounded-xl border p-6 shadow-lg",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col items-center text-center",
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "bg-accent-light mb-4 rounded-full p-4",
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "lock",
+								size: 28,
+								className: "text-accent"
+							})
+						}),
+						/* @__PURE__ */ jsx("h3", {
+							className: "text-fg text-lg font-semibold",
+							children: t("passwordPrompt.title")
+						}),
+						doc.name && /* @__PURE__ */ jsx("p", {
+							className: "text-fg-muted mt-1 text-sm",
+							children: doc.name
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-fg-secondary mt-4 text-center text-sm",
+					children: incorrect ? t("passwordPrompt.incorrect") : t("passwordPrompt.required")
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-5",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "text-fg mb-1.5 block text-sm font-medium",
+						htmlFor: "doc-password",
+						children: t("passwordPrompt.label")
+					}), /* @__PURE__ */ jsx("input", {
+						id: "doc-password",
+						type: "password",
+						value: password,
+						onChange: (e) => setPassword(e.target.value),
+						onKeyDown: (e) => e.key === "Enter" && void submit(),
+						disabled: busy,
+						placeholder: t("passwordPrompt.placeholder"),
+						className: "bg-surface border-border focus:border-accent focus:ring-accent text-fg placeholder:text-fg-muted block w-full rounded-md border px-3 py-2.5 text-sm focus:outline-none focus:ring-1 disabled:opacity-50",
+						autoFocus: true
+					})]
+				}),
+				incorrect && /* @__PURE__ */ jsxs("div", {
+					className: "mt-3 flex items-center gap-2 rounded-md border border-red-500/40 bg-red-500/10 p-3",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						name: "alertTriangle",
+						size: 16,
+						className: "flex-shrink-0 text-red-500"
+					}), /* @__PURE__ */ jsx("p", {
+						className: "text-sm text-red-500",
+						children: t("passwordPrompt.incorrectWarning")
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "mt-6 flex gap-3",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => void close(docId),
+						disabled: busy,
+						className: "border-border text-fg-secondary hover:bg-hover flex-1 cursor-pointer rounded-md border px-4 py-2.5 text-sm font-medium transition-colors disabled:opacity-50",
+						children: t("passwordPrompt.cancel")
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => void submit(),
+						disabled: busy || !password.trim(),
+						className: "bg-accent text-on-accent flex-1 cursor-pointer rounded-md px-4 py-2.5 text-sm font-medium transition-colors hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50",
+						children: busy ? t("passwordPrompt.opening") : t("passwordPrompt.open")
+					})]
+				})
+			]
+		})
+	});
+}
+function DocumentError() {
+	const docId = useDocumentId();
+	const { docs, close } = useDocuments();
+	const t = useT();
+	const doc = docs.find((d) => d.id === docId);
+	if (!docId || !doc) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-app flex h-full w-full items-center justify-center p-8",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "bg-surface border-border flex max-w-sm flex-col items-center rounded-xl border p-6 text-center shadow-lg",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "mb-4 rounded-full bg-red-500/10 p-4",
+					children: /* @__PURE__ */ jsx(Icon, {
+						name: "alertTriangle",
+						size: 28,
+						className: "text-red-500"
+					})
+				}),
+				/* @__PURE__ */ jsx("h3", {
+					className: "text-fg text-lg font-semibold",
+					children: t("documentError.title")
+				}),
+				doc.name && /* @__PURE__ */ jsx("p", {
+					className: "text-fg-muted mt-1 text-sm",
+					children: doc.name
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-fg-secondary mt-2 text-sm",
+					children: t("documentError.unknown")
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => void close(docId),
+					className: "bg-accent text-on-accent mt-5 w-full cursor-pointer rounded-md px-4 py-2.5 text-sm font-medium transition-colors hover:opacity-90",
+					children: t("documentError.close")
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/Shell.tsx
+/**
+* The viewer shell — the snippet's layout, driven entirely by the v3 commands
+* + measured-toolbar system.
+*
+*   ── header socket (empty unless a child fills it) ─────────
+*   ── main toolbar (measured; auto-overflows) ───────────────
+*   ── mode band (DERIVED from the shell's open mode surface) ─
+*   left sidebar │        Stage (pages)        │ right sidebar
+*   ──────────── page-controls overlay ──────────────────────
+*
+* The workspace/document split is structural: header + toolbars are
+* workspace-scoped and render at t≈0 (translated, measured) while the wasm
+* engine still boots; everything document-scoped sits inside <DocumentGate>,
+* whose fallback is the empty-workspace state (v2's loader, but UNDER a live
+* toolbar instead of replacing the whole app).
+*
+* Which mode band shows is not stored anywhere: it's a projection of
+* plugin-shell's exclusive 'mode' surface, read null-safely so the band simply
+* doesn't exist without a document.
+*/
+const ANNOTATION_RENDERERS = [formWidgetRenderer];
+function ModeBand({ edge }) {
+	const schema = useChromeSchema();
+	const modeSurfaces = useMemo(() => Object.keys(schema.modeBars ?? {}), [schema]);
+	const activeMode = useOptionalSelector(ShellToken$1, (s) => modeSurfaces.find((m) => s.isOpen(m)) ?? null, null);
+	if (!activeMode) return null;
+	const bar = getModeBar(schema, activeMode);
+	if (!bar) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: `border-border bg-surface-alt flex shrink-0 items-center px-4 py-2 ${edge === "top" ? "border-b" : "border-t"}`,
+		children: /* @__PURE__ */ jsx(AppToolbar, {
+			bar,
+			className: "w-full"
+		})
+	});
+}
+/** The empty-workspace state: shown while the initial documents (and the
+*  engine behind them) are still loading — or if the user closes every tab. */
+function OpeningDocuments() {
+	const t = useT();
+	return /* @__PURE__ */ jsx("div", {
+		className: "grid h-full w-full place-items-center",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "text-fg-muted flex flex-col items-center gap-3",
+			children: [/* @__PURE__ */ jsx("div", { className: "border-border-subtle border-t-accent h-8 w-8 animate-spin rounded-full border-2" }), /* @__PURE__ */ jsx("div", {
+				className: "text-sm",
+				children: t("demo.opening")
+			})]
+		})
+	});
+}
+/**
+* The document area's lifecycle switch. A `locked` tab shows its password
+* prompt, an `error` tab its error pane — per TAB (keyed by document), so
+* several can coexist and tab switching stays free. Everything else is the
+* ready-gated Stage; the gate's fallback covers `loading`.
+*/
+function DocumentArea({ children }) {
+	const docId = useDocumentId();
+	const status = useDocumentStatus();
+	if (status === "locked") return /* @__PURE__ */ jsx(PasswordPrompt, {}, docId);
+	if (status === "error") return /* @__PURE__ */ jsx(DocumentError, {}, docId);
+	return /* @__PURE__ */ jsx(DocumentGate, {
+		fallback: /* @__PURE__ */ jsx(OpeningDocuments, {}),
+		children
+	});
+}
+function Shell() {
+	useCommandShortcuts();
+	useFilePickerProvider();
+	useFormScriptingProvider();
+	const schema = useChromeSchema();
+	const frame = schema.frame ?? {};
+	const toolbarEdge = frame.toolbar ?? "top";
+	const toolbarBand = schema.bars.main && /* @__PURE__ */ jsx("div", {
+		part: "toolbar",
+		className: `border-border bg-surface flex shrink-0 items-center px-4 py-2 ${toolbarEdge === "top" ? "border-b" : "border-t"}`,
+		children: /* @__PURE__ */ jsx(AppToolbar, {
+			bar: schema.bars.main,
+			className: "w-full"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-app text-fg flex h-full flex-col",
+		children: [
+			(frame.header ?? true) && /* @__PURE__ */ jsx("slot", { name: "header" }),
+			(frame.tabs ?? "always") !== "never" && /* @__PURE__ */ jsx("slot", {
+				name: "tabs",
+				children: /* @__PURE__ */ jsx(TabBar, { visibility: frame.tabs ?? "always" })
+			}),
+			toolbarEdge === "top" && /* @__PURE__ */ jsxs(Fragment$1, { children: [toolbarBand, /* @__PURE__ */ jsx(ModeBand, { edge: "top" })] }),
+			/* @__PURE__ */ jsx("div", {
+				className: "relative flex min-h-0 flex-1",
+				children: /* @__PURE__ */ jsxs(DocumentArea, { children: [
+					/* @__PURE__ */ jsx(LeftSidebar, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "relative min-w-0 flex-1",
+						children: [
+							/* @__PURE__ */ jsx(ArmedToolCursor, {}),
+							/* @__PURE__ */ jsx(Stage, {
+								interaction: true,
+								overlay: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx(AnnotationStrip, {}),
+									/* @__PURE__ */ jsx(Scrollbar, { axis: "y" }),
+									/* @__PURE__ */ jsx(Scrollbar, { axis: "x" })
+								] }),
+								className: "h-full w-full",
+								style: { background: "var(--ep-canvas)" },
+								children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+									/* @__PURE__ */ jsx(RenderLayer, { annotations: false }),
+									/* @__PURE__ */ jsx(TileLayer, { annotations: false }),
+									/* @__PURE__ */ jsx(SelectionLayer, {}),
+									/* @__PURE__ */ jsx(SearchLayer, {}),
+									/* @__PURE__ */ jsx(LinkLayer, {}),
+									/* @__PURE__ */ jsx(AnnotationLayer, { renderers: ANNOTATION_RENDERERS })
+								] })
+							}),
+							/* @__PURE__ */ jsx(PageControls, {})
+						]
+					}),
+					/* @__PURE__ */ jsx(RightSidebar, {}),
+					/* @__PURE__ */ jsx(RedactConfirmModal, {})
+				] })
+			}),
+			toolbarEdge === "bottom" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ModeBand, { edge: "bottom" }), toolbarBand] })
+		]
+	});
+}
+//#endregion
+//#region src/viewer.tsx
+/**
+* The full viewer, as a component — and the customization CONTRACT. The
+* `ViewerCustomization` surface here is the exact shape that later powers
+* `EmbedPDF.init({...})` and every framework wrapper, because all of it is
+* plain data (see README.md).
+*
+* Two semantics, on purpose:
+*  - REGISTRIES (commands / icons / strings) merge ADDITIVELY over the
+*    defaults by id; a colliding id overrides.
+*  - STRUCTURE (chrome) is an owned VALUE: the default, a transform of it,
+*    or the host's own schema — never merged.
+*
+* The engine stays a prop — choosing local-wasm vs cloud is the host's
+* decision, and each delivery wires its own. The chrome —
+* toolbars, translations, theme — renders at t≈0; only the pages wait on
+* the engine. Customization is mount-time (exactly like v2's init config);
+* changing these props on a mounted viewer does not rebuild the workspace.
+*/
+/** Lazy built-in packs — a strings override for one of these wraps its loader. */
+const BUILTIN_LOADERS = { es: () => import("./es-D0PzYE9Z.js").then((m) => m.es) };
+const isDict = (v) => typeof v === "object" && v !== null;
+/**
+* Deep-merge `over` into `base` (immutably), expanding dotted keys —
+* `{ 'acme.send': 'X' }` and `{ acme: { send: 'X' } }` are the same override.
+*/
+function mergeTranslations(base, over) {
+	const out = { ...base };
+	for (const [key, value] of Object.entries(over)) {
+		const path = key.split(".");
+		let node = out;
+		for (let i = 0; i < path.length - 1; i++) {
+			const prev = node[path[i]];
+			node = node[path[i]] = isDict(prev) ? { ...prev } : {};
+		}
+		const leaf = path[path.length - 1];
+		const prev = node[leaf];
+		node[leaf] = typeof value === "string" ? value : mergeTranslations(isDict(prev) ? prev : {}, value);
+	}
+	return out;
+}
+const mergeLocale = (pack, over) => over ? {
+	...pack,
+	translations: mergeTranslations(pack.translations, over)
+} : pack;
+/** Normalize the shorthand — deliveries use this to read one shape. */
+const themeConfigOf = (theme) => typeof theme === "string" ? { preference: theme } : theme ?? {};
+/** Inside <Viewer>: mints the handle from the live kernel, reports it up. */
+function HandleBridge({ onViewer }) {
+	const kernel = useKernel();
+	useEffect(() => {
+		onViewer(createViewerHandle(kernel));
+	}, [kernel]);
+	return null;
+}
+function Booting() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "bg-app text-fg-muted grid h-full place-items-center",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "animate-pulse text-sm",
+			children: useT()("demo.starting")
+		})
+	});
+}
+function FullViewer({ engine, initialDocuments, fallback, commands, icons, strings, locale = "auto", disabledCategories, chrome, theme, themeTarget, onViewer }) {
+	const [resolved] = useState(() => {
+		const byId = new Map(defaultCommands.map((c) => [c.id, c]));
+		for (const c of commands ?? []) byId.set(c.id, c);
+		const resolvedCommands = [...byId.values()];
+		const resolvedChrome = typeof chrome === "function" ? chrome(defaultChrome, chromeHelpers$1) : chrome ?? defaultChrome;
+		const overrides = strings ?? {};
+		const locales = [mergeLocale(en, overrides.en)];
+		const loaders = {};
+		for (const [code, load] of Object.entries(BUILTIN_LOADERS)) {
+			const over = overrides[code];
+			loaders[code] = over ? () => load().then((pack) => mergeLocale(pack, over)) : load;
+		}
+		for (const [code, over] of Object.entries(overrides)) {
+			if (code === "en" || code in BUILTIN_LOADERS) continue;
+			locales.push({
+				code,
+				name: code,
+				translations: mergeTranslations({}, over)
+			});
+		}
+		const codes = [.../* @__PURE__ */ new Set([
+			"en",
+			...Object.keys(BUILTIN_LOADERS),
+			...Object.keys(overrides)
+		])];
+		const initial = locale === "auto" ? negotiateLocale(codes, typeof navigator !== "undefined" ? navigator.languages : []) ?? "en" : locale;
+		return {
+			commands: resolvedCommands,
+			chrome: resolvedChrome,
+			icons: icons ?? {},
+			i18n: {
+				locales,
+				loaders,
+				initial
+			}
+		};
+	});
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		const ids = new Set(resolved.commands.map((c) => c.id));
+		for (const problem of validateChrome$1(resolved.chrome, ids)) console.warn(`[embedpdf] chrome: ${problem}`);
+		for (const c of resolved.commands) if (c.icon && !(c.icon in ICON_PATHS) && !(c.icon in resolved.icons)) console.warn(`[embedpdf] command "${c.id}": unknown icon "${c.icon}"`);
+	}, [resolved]);
+	const [plugins] = useState(() => [
+		stagePlugin({
+			layout: "vertical",
+			interaction: true
+		}),
+		stagePlugin({
+			id: "stage-thumbs",
+			token: ThumbsStageToken,
+			layout: "grid",
+			columns: 1,
+			sizing: "uniform",
+			zoom: { pageWidth: 150 },
+			padding: 12,
+			gap: { px: 16 },
+			pageFrame: {
+				top: 0,
+				right: 0,
+				bottom: 20,
+				left: 0
+			},
+			fitAlign: {
+				x: "center",
+				y: "start"
+			},
+			scrollBehavior: "instant"
+		}),
+		renderPlugin(),
+		pageEditPlugin(),
+		interactionPlugin({ defaultTool: "pointer" }),
+		selectionPlugin(),
+		annotationPlugin({ tools: [{
+			id: "arrow",
+			extends: "line",
+			defaults: { lineEndings: {
+				start: "none",
+				end: "open-arrow"
+			} }
+		}] }),
+		formPlugin({ scripting: { enabled: true } }),
+		linkPlugin(),
+		redactionPlugin(),
+		searchPlugin(),
+		demoToolsPlugin(),
+		i18nPlugin({
+			locale: resolved.i18n.initial,
+			fallbackLocale: "en",
+			locales: resolved.i18n.locales,
+			loaders: resolved.i18n.loaders
+		}),
+		commandsPlugin({
+			commands: resolved.commands,
+			disabledCategories: disabledCategories ? [...disabledCategories] : void 0
+		}),
+		shellPlugin()
+	]);
+	const config = resolved;
+	return /* @__PURE__ */ jsx(ThemeProvider, {
+		preference: themeConfigOf(theme).preference,
+		target: themeTarget,
+		children: /* @__PURE__ */ jsx(Viewer, {
+			engine,
+			plugins,
+			initialDocuments,
+			fallback: fallback ?? /* @__PURE__ */ jsx(Booting, {}),
+			children: /* @__PURE__ */ jsxs(ViewerConfigProvider, {
+				value: config,
+				children: [onViewer && /* @__PURE__ */ jsx(HandleBridge, { onViewer }), /* @__PURE__ */ jsx(Shell, {})]
+			})
+		})
+	});
+}
+//#endregion
+export { AnnotationToken, CommandsToken, DocumentsToken, FormToken, FullViewer, I18nToken, InteractionToken, MetadataToken, RedactionToken, SearchToken, SelectionToken, ShellToken, StageToken, addItem, chromeHelpers, createViewerHandle, custom, defaultChrome, defaultCommands, ICON_PATHS as defaultIcons, defineChrome, group, item, removeItems, replaceItem, themeConfigOf, validateChrome };
+
+//# sourceMappingURL=index.js.map