@inkbar/react 0.4.0 → 0.6.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { InkError, acceptSuggestion, confidenceBucket, createMemorySignatureStore, createSignatureLibrary, createSnapshotHistory, isAbandonedNote, openDocument, repliesTo, threadOf, threadRoot } from "@inkbar/core";
-import { COLOR_COLUMNS, FONT_FAMILIES, MARKUP_ICONS, MARKUP_KINDS, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SIGNATURE_FONTS, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, colorMenuModel, createFocusReturn, createSignatureDraft, createToolOptions, cssVariableDefaults, focusInitialMenuItem, fontFamilyValue, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, lineStyleMenuModel, menuItems, mountViewer, observeAnnotationElement, shapeMenuModel, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle } from "@inkbar/core/dom";
+import { InkError, createMemorySignatureStore, createSignatureLibrary, createSnapshotHistory, isAbandonedNote, openDocument, readonly, repliesTo, threadOf, threadRoot, writable } from "@inkbar/core";
+import { COLOR_COLUMNS, FONT_FAMILIES, MARKUP_ICONS, MARKUP_KINDS, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SIGNATURE_FONTS, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, colorMenuModel, createFocusReturn, createPluginHost, createSignatureDraft, createToolOptions, cssVariableDefaults, focusInitialMenuItem, fontFamilyValue, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, lineStyleMenuModel, menuItems, mountViewer, observeAnnotationElement, shapeMenuModel, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, unknownCommand } from "@inkbar/core/dom";
 import { Dialog, Popover, Select, Slot, Toolbar } from "radix-ui";
 import { createPortal, flushSync } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -19,14 +19,14 @@ function useInkContext(consumer) {
 }
 //#endregion
 //#region src/use-readable.ts
-const noop = () => void 0;
+const noop$1 = () => void 0;
 /**
 * Mirrors a core `Readable` into React. A missing readable yields `fallback`, which must be a
 * stable reference (a module constant): `useSyncExternalStore` compares snapshots by identity
 * and loops on a fresh value. On the server the fallback is rendered.
 */
 function useReadable(readable, fallback) {
-	const subscribe = useCallback((onChange) => readable ? readable.subscribe(() => onChange()) : noop, [readable]);
+	const subscribe = useCallback((onChange) => readable ? readable.subscribe(() => onChange()) : noop$1, [readable]);
 	const get = useCallback(() => readable ? readable.get() : fallback, [readable, fallback]);
 	const server = useCallback(() => fallback, [fallback]);
 	return useSyncExternalStore(subscribe, get, server);
@@ -57,10 +57,7 @@ function useAnnotations() {
 		add: (input) => store?.add(input),
 		update: (id, patch) => store?.update(id, patch),
 		remove: (id) => store?.remove(id) ?? false,
-		select: (ids) => store?.select(ids),
-		/** Keeps a suggested redaction as the user's own, in the default redaction colour. */
-		accept: (id) => store ? acceptSuggestion(store, id) : void 0,
-		dismiss: (id) => store?.remove(id) ?? false
+		select: (ids) => store?.select(ids)
 	}), [store]);
 	return useMemo(() => ({
 		annotations,
@@ -193,6 +190,40 @@ function useEmbedded() {
 	}), [summary]);
 }
 //#endregion
+//#region src/hooks/useCommand.ts
+/**
+* A plugin command by its namespaced id (`sandbox.suggest`), for hosts building their own
+* control. Plugins are set up once InkRoot has mounted, so until then (and on the server) the
+* command is disabled with no label; it fills in then. Once they are set up, an id no plugin
+* passed to InkRoot registered stays that way, and logs `InkError('UnknownCommand')` to the
+* console once.
+*/
+function useCommand(id) {
+	const { pluginHost } = useInkContext("useCommand()");
+	const command = pluginHost?.command(id);
+	const logged = useRef(false);
+	useEffect(() => {
+		if (!pluginHost || command || logged.current) return;
+		logged.current = true;
+		console.error(unknownCommand(id, [...pluginHost.commands.keys()]));
+	}, [
+		pluginHost,
+		command,
+		id
+	]);
+	const enabled = useReadable(command?.enabled, false);
+	const busy = useReadable(command?.busy, false);
+	const status = useReadable(command?.status, "");
+	return {
+		run: useCallback(async () => command?.run(), [command]),
+		enabled,
+		busy,
+		status,
+		label: command?.label ?? "",
+		icon: command?.icon
+	};
+}
+//#endregion
 //#region src/use-latest.ts
 /**
 * A ref that always holds the latest render's value, for callbacks that outlive a render
@@ -212,6 +243,7 @@ function useLatest(value) {
 const IDLE$1 = { state: "idle" };
 const NO_ANNOTATIONS = [];
 const NO_IDS = [];
+const noop = () => void 0;
 /** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */
 function identity(src) {
 	if (src === null) return null;
@@ -229,7 +261,7 @@ function isDevelopment() {
 function setTestHook(el, doc) {
 	if (el && isDevelopment()) el.__inkDocument = doc;
 }
-function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, tool, onToolChange, tools: hostTools, fonts: fontsProp, signatures: signatureStore, signatureFonts: signatureFontsProp, page, onPageChange, zoom, onZoomChange, history, asChild = false, onReady, onError, onActivate, children, ref, ...rest }) {
+function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, tool, onToolChange, tools: hostTools, plugins: pluginsProp, decorateAnnotation, fonts: fontsProp, signatures: signatureStore, signatureFonts: signatureFontsProp, page, onPageChange, zoom, onZoomChange, history, asChild = false, onReady, onError, onActivate, children, ref, ...rest }) {
 	const rootElRef = useRef(null);
 	const [rootEl, setRootElState] = useState(null);
 	const setRootEl = useCallback((el) => {
@@ -243,6 +275,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	const [internalTool, setInternalTool] = useState(tool ?? "select-text");
 	const [activated, setActivatedState] = useState(null);
 	const [viewport, setViewportState] = useState(null);
+	/** The viewport as of the last `setViewport`, for the plugin host's `scrollTo`. */
+	const viewportRef = useRef(null);
 	const [tools, setToolsState] = useState(null);
 	const documentStatus = useReadable(document?.status, IDLE$1);
 	const status = override ?? documentStatus;
@@ -268,7 +302,10 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		onPageChange,
 		onZoomChange,
 		hostTools,
-		tool: internalTool
+		plugins: pluginsProp,
+		decorateAnnotation,
+		tool: internalTool,
+		tools
 	});
 	const snapshotHistory = useMemo(() => createSnapshotHistory({
 		apply: (list) => documentRef.current?.annotations.replaceAll(list, "history"),
@@ -277,6 +314,71 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	useLayoutEffect(() => {
 		snapshotHistory.observe(annotations);
 	}, [annotations, snapshotHistory]);
+	/** What the plugin host follows; plain readables, so StrictMode's second render is harmless. */
+	const [plugins] = useState(() => ({
+		document: writable(null),
+		root: writable(null),
+		activated: writable(null)
+	}));
+	const setActivated = useCallback((id) => {
+		setActivatedState(id);
+		plugins.activated.set(id);
+		if (id) latest.current.onActivate?.(id);
+	}, [latest, plugins]);
+	/**
+	* The history the plugins reach, picked by the open document's mode when they call: the host
+	* reads it as soon as a document opens, before this root has rendered with that document.
+	*/
+	const pluginHistory = useMemo(() => {
+		const active = () => {
+			const doc = documentRef.current;
+			if (!doc) return void 0;
+			return doc.annotations.mode === "controlled" ? snapshotHistory : doc.history;
+		};
+		return {
+			batch: (fn) => {
+				const h = active();
+				if (h) h.batch(fn);
+				else fn();
+			},
+			track: (store) => active()?.track(store) ?? noop,
+			react: (fn) => active()?.react(fn) ?? noop
+		};
+	}, [snapshotHistory]);
+	const hostRef = useRef(null);
+	const [pluginHost, setPluginHost] = useState(null);
+	const hostMounts = useRef(0);
+	useLayoutEffect(() => {
+		hostMounts.current += 1;
+		if (!hostRef.current || hostRef.current.destroyed) {
+			const host = createPluginHost({
+				plugins: latest.current.plugins ?? [],
+				document: readonly(plugins.document),
+				history: () => pluginHistory,
+				activated: readonly(plugins.activated),
+				setActivated: (id) => {
+					if (id === null || documentRef.current?.annotations.get(id)) setActivated(id);
+				},
+				root: readonly(plugins.root),
+				decorate: () => latest.current.decorateAnnotation,
+				viewport: () => viewportRef.current
+			});
+			hostRef.current = {
+				host,
+				destroyed: false
+			};
+			setPluginHost(host);
+		}
+		return () => {
+			hostMounts.current -= 1;
+			queueMicrotask(() => {
+				const current = hostRef.current;
+				if (hostMounts.current > 0 || !current || current.destroyed) return;
+				current.destroyed = true;
+				current.host.destroy();
+			});
+		};
+	}, []);
 	const srcIdentity = identity(src);
 	useEffect(() => {
 		let cancelled = false;
@@ -288,6 +390,9 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		}
 		setOverride({ state: "loading" });
 		let opened = null;
+		/** The plugins told of `opened`, and the snapshot history's hold on its store. */
+		let told = null;
+		let detach = noop;
 		const run = async () => {
 			try {
 				const doc = await openDocument(source, {
@@ -317,6 +422,9 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 				const current = latest.current.annotations;
 				if (doc.annotations.mode === "controlled" && current !== void 0) doc.annotations.setControlledValue(current);
 				documentRef.current = doc;
+				if (doc.annotations.mode === "controlled") detach = snapshotHistory.attach(doc.annotations);
+				told = plugins;
+				told.document.set(doc);
 				setDocument(doc);
 				setOverride(null);
 				setTestHook(rootElRef.current, doc);
@@ -338,6 +446,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		});
 		return () => {
 			cancelled = true;
+			told?.document.set(null);
+			detach();
 			opened?.destroy();
 			documentRef.current = null;
 			setDocument(null);
@@ -347,7 +457,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		srcIdentity,
 		password,
 		snapshotHistory,
-		latest
+		latest,
+		plugins
 	]);
 	useLayoutEffect(() => {
 		if (annotations && document?.annotations.mode === "controlled") document.annotations.setControlledValue(annotations);
@@ -356,16 +467,15 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		if (tool) setInternalTool(tool);
 	}, [tool]);
 	const setTool = useCallback((id) => {
+		const tc = latest.current.tools;
+		if (latest.current.tool === id && tc?.active.get() === id) tc.set(id);
 		setInternalTool(id);
 		latest.current.onToolChange?.(id);
 	}, [latest]);
-	const setActivated = useCallback((id) => {
-		setActivatedState(id);
-		if (id) latest.current.onActivate?.(id);
-	}, [latest]);
 	const reportZoom = useCallback((z) => latest.current.onZoomChange?.(z), [latest]);
 	const reportPage = useCallback((p) => latest.current.onPageChange?.(p), [latest]);
 	const setViewport = useCallback((vp, tc) => {
+		viewportRef.current = vp;
 		setViewportState(vp);
 		setToolsState(tc);
 	}, []);
@@ -383,7 +493,9 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 			if (controlled) snapshotHistory.batch(fn);
 			else if (documentRef.current) documentRef.current.history.batch(fn);
 			else fn();
-		}
+		},
+		track: (store) => pluginHistory.track(store),
+		react: (fn) => pluginHistory.react(fn)
 	}), [
 		controlled,
 		historyEnabled,
@@ -391,19 +503,21 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		snapCanRedo,
 		coreCanUndo,
 		coreCanRedo,
-		snapshotHistory
+		snapshotHistory,
+		pluginHistory
 	]);
 	const latestHistory = useLatest(inkHistory);
 	/** The document's tool style; it batches through `history`, whichever mode is on. */
 	const styleTracker = useMemo(() => document ? trackToolStyle({
 		store: document.annotations,
 		history: { batch: (fn) => latestHistory.current.batch(fn) },
-		tools: latest.current.hostTools,
+		tools: [...latest.current.hostTools ?? [], ...pluginHost?.tools ?? []],
 		tool: latest.current.tool
 	}) : null, [
 		document,
 		latest,
-		latestHistory
+		latestHistory,
+		pluginHost
 	]);
 	useEffect(() => {
 		styleTracker?.setTool(internalTool);
@@ -427,6 +541,22 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	}, [signatures]);
 	/** Tool options last as long as the root; the tool style is per document. */
 	const [toolOptions] = useState(createToolOptions);
+	const decorate = useCallback((a) => latest.current.decorateAnnotation?.(a), [latest]);
+	const [decorateListeners] = useState(() => /* @__PURE__ */ new Set());
+	const onDecorateAnnotationChange = useCallback((listener) => {
+		decorateListeners.add(listener);
+		return () => {
+			decorateListeners.delete(listener);
+		};
+	}, [decorateListeners]);
+	const decoratedOnce = useRef(false);
+	useEffect(() => {
+		if (!decoratedOnce.current) {
+			decoratedOnce.current = true;
+			return;
+		}
+		for (const listener of decorateListeners) listener();
+	}, [decorateAnnotation, decorateListeners]);
 	const ctx = useMemo(() => ({
 		assets,
 		document,
@@ -438,6 +568,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		tool: internalTool,
 		setTool,
 		hostTools,
+		decorateAnnotation: decorate,
+		onDecorateAnnotationChange,
 		fonts,
 		toolOptions,
 		signatures,
@@ -449,6 +581,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		reportPage,
 		activated,
 		setActivated,
+		pluginHost,
+		viewportEl: plugins.root,
 		history: inkHistory,
 		rootEl,
 		setViewport
@@ -463,6 +597,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		internalTool,
 		setTool,
 		hostTools,
+		decorate,
+		onDecorateAnnotationChange,
 		fonts,
 		toolOptions,
 		signatures,
@@ -474,6 +610,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		reportPage,
 		activated,
 		setActivated,
+		pluginHost,
+		plugins,
 		inkHistory,
 		rootEl,
 		setViewport
@@ -523,7 +661,6 @@ function InkAnnotation({ annotation, element, children }) {
 		return () => observer.disconnect();
 	}, [element]);
 	const { id } = annotation;
-	const isSuggestion = annotation.type === "redact" && annotation.origin === "suggested";
 	const locked = annotation.locked === true;
 	const selected = ctx.selection.includes(id);
 	const store = ctx.document?.annotations;
@@ -532,21 +669,14 @@ function InkAnnotation({ annotation, element, children }) {
 		state: observed ?? (selected ? "selected" : "idle"),
 		locked,
 		select: () => store?.select([id]),
-		remove: () => void store?.remove(id),
-		accept: () => {
-			if (store && isSuggestion) acceptSuggestion(store, id);
-		},
-		dismiss: () => {
-			if (isSuggestion) store?.remove(id);
-		}
+		remove: () => void store?.remove(id)
 	}), [
 		annotation,
 		observed,
 		selected,
 		locked,
 		store,
-		id,
-		isSuggestion
+		id
 	]);
 	return /* @__PURE__ */ jsx(Fragment$1, { children: children(slotProps) });
 }
@@ -657,6 +787,8 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			buffer: b,
 			tool: c.tool,
 			...c.hostTools ? { tools: c.hostTools } : {},
+			...c.pluginHost ? { plugins: c.pluginHost } : {},
+			decorateAnnotation: (a) => latest.current.ctx.decorateAnnotation(a),
 			...c.toolStyle ? { toolStyle: c.toolStyle } : {},
 			toolHistory: { batch: (fn) => latest.current.ctx.history.batch(fn) },
 			toolOptions: c.toolOptions,
@@ -682,7 +814,14 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 					lastReportedPage.current = p;
 					latest.current.ctx.reportPage(p);
 				};
-				stops = [vp.zoom.subscribe(reportZoom), vp.currentPage.subscribe(reportPage)];
+				const followTool = (id) => {
+					if (id !== latest.current.ctx.tool) latest.current.ctx.setTool(id);
+				};
+				stops = [
+					vp.zoom.subscribe(reportZoom),
+					vp.currentPage.subscribe(reportPage),
+					tc.active.subscribe(followTool)
+				];
 				reportZoom(vp.zoom.get());
 				reportPage(vp.currentPage.get());
 			},
@@ -716,8 +855,19 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 	}, [
 		ctx.document,
 		ctx.status.state,
+		ctx.pluginHost,
 		latest
 	]);
+	const { viewportEl } = ctx;
+	useLayoutEffect(() => {
+		const el = scroll.current;
+		viewportEl.set(el);
+		return () => {
+			if (viewportEl.get() === el) viewportEl.set(null);
+		};
+	}, [viewportEl]);
+	const { onDecorateAnnotationChange } = ctx;
+	useEffect(() => onDecorateAnnotationChange(() => engine.current?.redecorate()), [onDecorateAnnotationChange]);
 	useEffect(() => {
 		const built = builtWith.current;
 		if (!engine.current || !built) return;
@@ -854,10 +1004,13 @@ const ICONS = {
 	signature: Signature
 };
 function InkToolButton({ tool, label, asChild = false, className, children, onClick, ...rest }) {
+	const { hostTools, pluginHost } = useInkContext("InkToolButton");
 	const { tool: current, setTool } = useTool();
 	const active = current === tool;
-	const name = label ?? TOOL_LABELS[tool] ?? tool;
-	const icon = ICONS[tool];
+	/** A host or plugin tool by this id, for the name and icon core has none for. */
+	const own = [...hostTools ?? [], ...pluginHost?.tools ?? []].find((t) => t.id === tool);
+	const name = label ?? TOOL_LABELS[tool] ?? own?.label ?? tool;
+	const icon = ICONS[tool] ?? own?.icon;
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
 		asChild,
 		className: cx("ink-tool-button", className),
@@ -879,6 +1032,38 @@ function InkToolButton({ tool, label, asChild = false, className, children, onCl
 	});
 }
 //#endregion
+//#region src/components/InkCommand.tsx
+function InkCommand({ id, asChild = false, children, disabled, onClick, ...rest }) {
+	const { run, enabled, busy, status, label, icon } = useCommand(id);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ink-command",
+		children: [/* @__PURE__ */ jsx(Toolbar.Button, {
+			asChild,
+			type: "button",
+			"data-command": id,
+			"aria-label": label || void 0,
+			title: label || void 0,
+			"aria-hidden": label ? void 0 : true,
+			"aria-busy": busy,
+			"aria-disabled": busy || void 0,
+			...rest,
+			disabled: disabled === true || !enabled && !busy,
+			onClick: (e) => {
+				onClick?.(e);
+				if (!e.defaultPrevented) run();
+			},
+			children: typeof children === "function" ? children({
+				label,
+				busy
+			}) : children ?? (icon ? /* @__PURE__ */ jsx(InkIcon, { icon }) : label)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "ink-command-status",
+			role: "status",
+			children: status
+		})]
+	});
+}
+//#endregion
 //#region src/components/InkToolbarSeparator.tsx
 /**
 * A divider between groups of controls in a horizontal toolbar. Not focusable. A plain div
@@ -1152,11 +1337,11 @@ function InkNextPage({ asChild = false, className, children, disabled, onClick,
 }
 //#endregion
 //#region src/components/InkColorMenu.tsx
-function InkColorMenu({ property, label, className, children, standalone = false, group, disabled, ...rest }) {
+function InkColorMenu({ property, label, className, children, standalone = false, group, fallback, disabled, ...rest }) {
 	const Wrap = standalone ? Fragment : Toolbar.Button;
 	const { current, supported, set } = useToolStyle(group);
 	const [open, setOpen] = useState(false);
-	const model = colorMenuModel(property, current, supported);
+	const model = colorMenuModel(property, current, supported, fallback);
 	const name = label ?? model.label;
 	/** ArrowDown opens on the first item; a click opens on the checked one. */
 	const focusFirst = useRef(false);
@@ -1295,93 +1480,100 @@ function InkShapeMenu({ className, children, ...rest }) {
 	const active = tool === "shape";
 	/** ArrowDown opens on the first item; a click opens on the checked one. */
 	const focusFirst = useRef(false);
-	return /* @__PURE__ */ jsxs("div", {
-		role: "group",
-		"aria-label": "Shape",
-		className: cx("ink-split-button ink-shape-menu", className),
-		"data-ink-shape-menu": "",
-		...rest,
-		children: [/* @__PURE__ */ jsx(Toolbar.Button, {
-			className: "ink-tool-button ink-shape-button",
-			"data-ink-tool-button": "",
-			"data-ink-shape-button": "",
-			"data-tool": "shape",
-			"data-kind": model.kind,
-			"data-state": active ? "on" : "off",
-			"aria-pressed": active,
-			"aria-label": model.label,
-			title: model.label,
-			onClick: () => setTool("shape"),
-			children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: SHAPE_ICONS[model.kind] })
-		}), /* @__PURE__ */ jsxs(Popover.Root, {
-			open,
-			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(Toolbar.Button, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Popover.Trigger, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "ink-menu-trigger ink-shape-menu-trigger",
-						"data-ink-shape-menu-trigger": "",
-						"data-state": open ? "open" : "closed",
-						"aria-label": "Choose shape",
-						title: "Choose shape",
-						"aria-haspopup": "menu",
-						onKeyDown: (e) => {
-							if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(Popover.Anchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": "Shape",
+				className: cx("ink-split-button ink-shape-menu", className),
+				"data-ink-shape-menu": "",
+				...rest,
+				children: [
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						className: "ink-tool-button ink-shape-button",
+						"data-ink-tool-button": "",
+						"data-ink-shape-button": "",
+						"data-tool": "shape",
+						"data-kind": model.kind,
+						"data-state": active ? "on" : "off",
+						"aria-pressed": active,
+						"aria-label": model.label,
+						title: model.label,
+						onClick: () => setTool("shape"),
+						children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: SHAPE_ICONS[model.kind] })
+					}),
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Popover.Trigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ink-menu-trigger ink-shape-menu-trigger",
+								"data-ink-shape-menu-trigger": "",
+								"data-state": open ? "open" : "closed",
+								"aria-label": "Choose shape",
+								title: "Choose shape",
+								"aria-haspopup": "menu",
+								onKeyDown: (e) => {
+									if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
+									e.preventDefault();
+									focusFirst.current = true;
+									setOpen(true);
+								},
+								children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
+							})
+						})
+					}),
+					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+						role: "menu",
+						"aria-label": "Shapes",
+						className: "ink-select-content ink-menu-content",
+						"data-ink-select-content": "",
+						"data-ink-menu": "shape",
+						side: "bottom",
+						align: "start",
+						sideOffset: 4,
+						collisionPadding: 8,
+						onOpenAutoFocus: (e) => {
 							e.preventDefault();
-							focusFirst.current = true;
-							setOpen(true);
-						},
-						children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
-					})
-				})
-			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
-				role: "menu",
-				"aria-label": "Shapes",
-				className: "ink-select-content ink-menu-content",
-				"data-ink-select-content": "",
-				"data-ink-menu": "shape",
-				side: "bottom",
-				align: "start",
-				sideOffset: 4,
-				collisionPadding: 8,
-				onOpenAutoFocus: (e) => {
-					e.preventDefault();
-					const menu = e.currentTarget;
-					if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
-					else focusInitialMenuItem(menu);
-					focusFirst.current = false;
-				},
-				onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
-				children: /* @__PURE__ */ jsx("div", {
-					role: "group",
-					"aria-label": "Shapes",
-					className: "ink-shape-grid",
-					"data-ink-menu-columns": SHAPE_COLUMNS,
-					children: model.items.map((item) => /* @__PURE__ */ jsxs("button", {
-						type: "button",
-						role: "menuitemradio",
-						"aria-checked": item.checked,
-						tabIndex: -1,
-						className: "ink-select-item ink-menu-item ink-shape-item",
-						"data-ink-select-item": "",
-						"data-key": item.kind,
-						"data-state": item.checked ? "checked" : "unchecked",
-						onClick: () => {
-							setOptions({ kind: item.kind });
-							setTool("shape");
-							setOpen(false);
+							const menu = e.currentTarget;
+							if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
+							else focusInitialMenuItem(menu);
+							focusFirst.current = false;
 						},
-						children: [/* @__PURE__ */ jsx(InkIcon, {
-							icon: SHAPE_ICONS[item.kind],
-							size: 16
-						}), item.label]
-					}, item.kind))
-				})
-			}) })]
-		})]
+						onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
+						children: /* @__PURE__ */ jsx("div", {
+							role: "group",
+							"aria-label": "Shapes",
+							className: "ink-shape-grid",
+							"data-ink-menu-columns": SHAPE_COLUMNS,
+							children: model.items.map((item) => /* @__PURE__ */ jsxs("button", {
+								type: "button",
+								role: "menuitemradio",
+								"aria-checked": item.checked,
+								tabIndex: -1,
+								className: "ink-select-item ink-menu-item ink-shape-item",
+								"data-ink-select-item": "",
+								"data-key": item.kind,
+								"data-state": item.checked ? "checked" : "unchecked",
+								onClick: () => {
+									setOptions({ kind: item.kind });
+									setTool("shape");
+									setOpen(false);
+								},
+								children: [/* @__PURE__ */ jsx(InkIcon, {
+									icon: SHAPE_ICONS[item.kind],
+									size: 16
+								}), item.label]
+							}, item.kind))
+						})
+					}) })
+				]
+			})
+		})
 	});
 }
 //#endregion
@@ -1654,153 +1846,157 @@ function InkSignatureMenu({ className, children, fonts, ...rest }) {
 			removedRow.current = null;
 		});
 	};
-	return /* @__PURE__ */ jsxs("div", {
-		role: "group",
-		"aria-label": SIGNATURE_LABELS.sign,
-		className: cx("ink-split-button ink-signature-menu", className),
-		"data-ink-signature-menu": "",
-		...rest,
-		children: [
-			/* @__PURE__ */ jsx(Toolbar.Button, {
-				ref: main,
-				className: "ink-tool-button ink-signature-button",
-				"data-ink-tool-button": "",
-				"data-ink-signature-button": "",
-				"data-tool": "signature",
-				"data-state": active ? "on" : "off",
-				"aria-pressed": active,
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(Popover.Anchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "group",
 				"aria-label": SIGNATURE_LABELS.sign,
-				title: SIGNATURE_LABELS.sign,
-				onClick: () => {
-					if (model.selected) setTool("signature");
-					else setOpen(true);
-				},
-				children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Signature })
-			}),
-			/* @__PURE__ */ jsxs(Popover.Root, {
-				open,
-				onOpenChange: setOpen,
-				children: [/* @__PURE__ */ jsx(Toolbar.Button, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx(Popover.Trigger, {
+				className: cx("ink-split-button ink-signature-menu", className),
+				"data-ink-signature-menu": "",
+				...rest,
+				children: [
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						ref: main,
+						className: "ink-tool-button ink-signature-button",
+						"data-ink-tool-button": "",
+						"data-ink-signature-button": "",
+						"data-tool": "signature",
+						"data-state": active ? "on" : "off",
+						"aria-pressed": active,
+						"aria-label": SIGNATURE_LABELS.sign,
+						title: SIGNATURE_LABELS.sign,
+						onClick: () => {
+							if (model.selected) setTool("signature");
+							else setOpen(true);
+						},
+						children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Signature })
+					}),
+					/* @__PURE__ */ jsx(Toolbar.Button, {
 						asChild: true,
-						children: /* @__PURE__ */ jsx("button", {
-							type: "button",
-							className: "ink-menu-trigger ink-signature-menu-trigger",
-							"data-ink-signature-menu-trigger": "",
-							"data-state": open ? "open" : "closed",
-							"aria-label": SIGNATURE_LABELS.trigger,
-							title: SIGNATURE_LABELS.trigger,
-							"aria-haspopup": "menu",
-							onKeyDown: (e) => {
-								if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
-								e.preventDefault();
-								focusFirst.current = true;
-								setOpen(true);
-							},
-							children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
+						children: /* @__PURE__ */ jsx(Popover.Trigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ink-menu-trigger ink-signature-menu-trigger",
+								"data-ink-signature-menu-trigger": "",
+								"data-state": open ? "open" : "closed",
+								"aria-label": SIGNATURE_LABELS.trigger,
+								title: SIGNATURE_LABELS.trigger,
+								"aria-haspopup": "menu",
+								onKeyDown: (e) => {
+									if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
+									e.preventDefault();
+									focusFirst.current = true;
+									setOpen(true);
+								},
+								children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
+							})
 						})
-					})
-				}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-					ref: menu,
-					role: "menu",
-					"aria-label": SIGNATURE_LABELS.menu,
-					className: "ink-select-content ink-menu-content",
-					"data-ink-select-content": "",
-					"data-ink-menu": "signature",
-					side: "bottom",
-					align: "start",
-					sideOffset: 4,
-					collisionPadding: 8,
-					onOpenAutoFocus: (e) => {
-						e.preventDefault();
-						const el = e.currentTarget;
-						if (focusFirst.current) menuItems(el)[0]?.focus({ preventScroll: true });
-						else focusInitialMenuItem(el);
-						focusFirst.current = false;
-					},
-					onCloseAutoFocus: (e) => {
-						if (toDialog.current) e.preventDefault();
-						toDialog.current = false;
-					},
-					onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
-					children: [
-						model.items.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
-							role: "group",
-							"aria-label": SIGNATURE_LABELS.saved,
-							className: "ink-signature-list",
-							"data-ink-menu-columns": 2,
-							children: model.items.map((item, row) => [/* @__PURE__ */ jsx("button", {
+					}),
+					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+						ref: menu,
+						role: "menu",
+						"aria-label": SIGNATURE_LABELS.menu,
+						className: "ink-select-content ink-menu-content",
+						"data-ink-select-content": "",
+						"data-ink-menu": "signature",
+						side: "bottom",
+						align: "start",
+						sideOffset: 4,
+						collisionPadding: 8,
+						onOpenAutoFocus: (e) => {
+							e.preventDefault();
+							const el = e.currentTarget;
+							if (focusFirst.current) menuItems(el)[0]?.focus({ preventScroll: true });
+							else focusInitialMenuItem(el);
+							focusFirst.current = false;
+						},
+						onCloseAutoFocus: (e) => {
+							if (toDialog.current) e.preventDefault();
+							toDialog.current = false;
+						},
+						onKeyDown: (e) => handleMenuKeys(e.nativeEvent, e.currentTarget),
+						children: [
+							model.items.length > 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+								role: "group",
+								"aria-label": SIGNATURE_LABELS.saved,
+								className: "ink-signature-list",
+								"data-ink-menu-columns": 2,
+								children: model.items.map((item, row) => [/* @__PURE__ */ jsx("button", {
+									type: "button",
+									role: "menuitemradio",
+									"aria-checked": item.checked,
+									"aria-label": item.label,
+									tabIndex: -1,
+									className: "ink-select-item ink-menu-item ink-signature-item",
+									"data-ink-select-item": "",
+									"data-key": item.id,
+									"data-state": item.checked ? "checked" : "unchecked",
+									onClick: () => {
+										setOptions({ templateId: item.id });
+										setTool("signature");
+										setOpen(false);
+									},
+									children: /* @__PURE__ */ jsx(SignaturePreview, { template: item.template })
+								}, `${item.id}-choose`), /* @__PURE__ */ jsx("button", {
+									type: "button",
+									role: "menuitem",
+									"aria-label": item.removeLabel,
+									title: item.removeLabel,
+									tabIndex: -1,
+									className: "ink-menu-item ink-signature-remove",
+									"data-ink-signature-remove": "",
+									"data-key": item.id,
+									onClick: () => remove(item.id, row),
+									children: /* @__PURE__ */ jsx(InkIcon, {
+										icon: Trash2,
+										size: 16
+									})
+								}, `${item.id}-remove`)])
+							}), /* @__PURE__ */ jsx("div", {
+								role: "separator",
+								className: "ink-select-separator"
+							})] }) : null,
+							/* @__PURE__ */ jsxs("button", {
 								type: "button",
-								role: "menuitemradio",
-								"aria-checked": item.checked,
-								"aria-label": item.label,
+								role: "menuitem",
 								tabIndex: -1,
-								className: "ink-select-item ink-menu-item ink-signature-item",
+								className: "ink-select-item ink-menu-item ink-signature-create",
 								"data-ink-select-item": "",
-								"data-key": item.id,
-								"data-state": item.checked ? "checked" : "unchecked",
+								"data-ink-signature-create": "",
 								onClick: () => {
-									setOptions({ templateId: item.id });
-									setTool("signature");
+									toDialog.current = true;
 									setOpen(false);
+									setCreating(true);
 								},
-								children: /* @__PURE__ */ jsx(SignaturePreview, { template: item.template })
-							}, `${item.id}-choose`), /* @__PURE__ */ jsx("button", {
-								type: "button",
-								role: "menuitem",
-								"aria-label": item.removeLabel,
-								title: item.removeLabel,
-								tabIndex: -1,
-								className: "ink-menu-item ink-signature-remove",
-								"data-ink-signature-remove": "",
-								"data-key": item.id,
-								onClick: () => remove(item.id, row),
-								children: /* @__PURE__ */ jsx(InkIcon, {
-									icon: Trash2,
+								children: [/* @__PURE__ */ jsx(InkIcon, {
+									icon: Plus,
 									size: 16
-								})
-							}, `${item.id}-remove`)])
-						}), /* @__PURE__ */ jsx("div", {
-							role: "separator",
-							className: "ink-select-separator"
-						})] }) : null,
-						/* @__PURE__ */ jsxs("button", {
-							type: "button",
-							role: "menuitem",
-							tabIndex: -1,
-							className: "ink-select-item ink-menu-item ink-signature-create",
-							"data-ink-select-item": "",
-							"data-ink-signature-create": "",
-							onClick: () => {
-								toDialog.current = true;
-								setOpen(false);
-								setCreating(true);
-							},
-							children: [/* @__PURE__ */ jsx(InkIcon, {
-								icon: Plus,
-								size: 16
-							}), SIGNATURE_LABELS.create]
-						}),
-						removeError ? /* @__PURE__ */ jsx("p", {
-							className: "ink-field-error ink-signature-remove-error",
-							role: "alert",
-							"data-ink-signature-remove-error": "",
-							children: removeError
-						}) : null
-					]
-				}) })]
-			}),
-			/* @__PURE__ */ jsx(InkSignatureDialog, {
-				open: creating,
-				onOpenChange: setCreating,
-				fonts,
-				onCloseAutoFocus: (e) => {
-					e.preventDefault();
-					main.current?.focus({ preventScroll: true });
-				}
+								}), SIGNATURE_LABELS.create]
+							}),
+							removeError ? /* @__PURE__ */ jsx("p", {
+								className: "ink-field-error ink-signature-remove-error",
+								role: "alert",
+								"data-ink-signature-remove-error": "",
+								children: removeError
+							}) : null
+						]
+					}) }),
+					/* @__PURE__ */ jsx(InkSignatureDialog, {
+						open: creating,
+						onOpenChange: setCreating,
+						fonts,
+						onCloseAutoFocus: (e) => {
+							e.preventDefault();
+							main.current?.focus({ preventScroll: true });
+						}
+					})
+				]
 			})
-		]
+		})
 	});
 }
 //#endregion
@@ -1808,122 +2004,131 @@ function InkSignatureMenu({ className, children, fonts, ...rest }) {
 function InkHighlightMenu({ className, children, ...rest }) {
 	const { tool, setTool } = useTool();
 	const [options, setOptions] = useToolOptions("highlight");
+	const { document: doc } = useDocument();
 	const [open, setOpen] = useState(false);
 	const model = highlightMenuModel(options, MARKUP_KINDS);
 	const active = tool === "highlight";
 	/** ArrowDown opens on the first item; a click opens on the checked one. */
 	const focusFirst = useRef(false);
-	return /* @__PURE__ */ jsxs("div", {
-		role: "group",
-		"aria-label": "Highlight",
-		className: cx("ink-split-button ink-highlight-menu", className),
-		"data-ink-highlight-menu": "",
-		...rest,
-		children: [/* @__PURE__ */ jsx(Toolbar.Button, {
-			className: "ink-tool-button ink-highlight-button",
-			"data-ink-tool-button": "",
-			"data-ink-highlight-button": "",
-			"data-tool": "highlight",
-			"data-kind": model.kind,
-			"data-state": active ? "on" : "off",
-			"aria-pressed": active,
-			"aria-label": model.label,
-			title: model.label,
-			onClick: () => setTool("highlight"),
-			children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: MARKUP_ICONS[model.kind] })
-		}), /* @__PURE__ */ jsxs(Popover.Root, {
-			open,
-			onOpenChange: setOpen,
-			children: [/* @__PURE__ */ jsx(Toolbar.Button, {
-				asChild: true,
-				children: /* @__PURE__ */ jsx(Popover.Trigger, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "ink-menu-trigger ink-highlight-menu-trigger",
-						"data-ink-highlight-menu-trigger": "",
-						"data-state": open ? "open" : "closed",
-						"aria-label": "Choose highlight",
-						title: "Choose highlight",
-						"aria-haspopup": "menu",
-						onKeyDown: (e) => {
-							if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
-							e.preventDefault();
-							focusFirst.current = true;
-							setOpen(true);
-						},
-						children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
-					})
-				})
-			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
-				role: "menu",
-				"aria-label": "Highlights",
-				className: "ink-select-content ink-menu-content",
-				"data-ink-select-content": "",
-				"data-ink-menu": "highlight",
-				side: "bottom",
-				align: "start",
-				sideOffset: 4,
-				collisionPadding: 8,
-				onOpenAutoFocus: (e) => {
-					e.preventDefault();
-					const menu = e.currentTarget;
-					if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
-					else focusInitialMenuItem(menu);
-					focusFirst.current = false;
-				},
-				onKeyDownCapture: (e) => {
-					if (e.currentTarget.contains(e.target)) handleMenuKeys(e.nativeEvent, e.currentTarget);
-				},
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(Popover.Anchor, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": "Highlight",
+				className: cx("ink-split-button ink-highlight-menu", className),
+				"data-ink-highlight-menu": "",
+				...rest,
 				children: [
-					/* @__PURE__ */ jsx("div", {
-						role: "group",
-						"aria-label": "Kinds",
-						className: "ink-highlight-kinds",
-						children: model.items.map((item) => /* @__PURE__ */ jsxs("button", {
-							type: "button",
-							role: "menuitemradio",
-							"aria-checked": item.checked,
-							tabIndex: -1,
-							className: "ink-select-item ink-menu-item ink-highlight-item",
-							"data-ink-select-item": "",
-							"data-key": item.kind,
-							"data-state": item.checked ? "checked" : "unchecked",
-							onClick: () => {
-								setOptions({ kind: item.kind });
-								setTool("highlight");
-								setOpen(false);
-							},
-							children: [/* @__PURE__ */ jsx(InkIcon, {
-								icon: MARKUP_ICONS[item.kind],
-								size: 16
-							}), item.label]
-						}, item.kind))
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						className: "ink-tool-button ink-highlight-button",
+						"data-ink-tool-button": "",
+						"data-ink-highlight-button": "",
+						"data-tool": "highlight",
+						"data-kind": model.kind,
+						"data-state": active ? "on" : "off",
+						"aria-pressed": active,
+						"aria-label": model.label,
+						title: model.label,
+						onClick: () => setTool("highlight"),
+						children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: MARKUP_ICONS[model.kind] })
 					}),
-					/* @__PURE__ */ jsx("div", {
-						role: "separator",
-						className: "ink-select-separator"
+					/* @__PURE__ */ jsx(Toolbar.Button, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Popover.Trigger, {
+							asChild: true,
+							children: /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ink-menu-trigger ink-highlight-menu-trigger",
+								"data-ink-highlight-menu-trigger": "",
+								"data-state": open ? "open" : "closed",
+								"aria-label": "Choose highlight",
+								title: "Choose highlight",
+								"aria-haspopup": "menu",
+								onKeyDown: (e) => {
+									if (e.key !== "ArrowDown" || e.defaultPrevented || open) return;
+									e.preventDefault();
+									focusFirst.current = true;
+									setOpen(true);
+								},
+								children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronDown })
+							})
+						})
 					}),
-					/* @__PURE__ */ jsxs("div", {
-						role: "group",
-						"aria-label": "Colour",
-						className: "ink-highlight-colour",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "ink-highlight-colour-label",
-							"aria-hidden": "true",
-							children: "Colour"
-						}), /* @__PURE__ */ jsx(InkColorMenu, {
-							property: "border",
-							group: "markup",
-							label: "Highlight colour",
-							standalone: true,
-							role: "menuitem",
-							tabIndex: -1
-						})]
-					})
+					/* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+						role: "menu",
+						"aria-label": "Highlights",
+						className: "ink-select-content ink-menu-content",
+						"data-ink-select-content": "",
+						"data-ink-menu": "highlight",
+						side: "bottom",
+						align: "start",
+						sideOffset: 4,
+						collisionPadding: 8,
+						onOpenAutoFocus: (e) => {
+							e.preventDefault();
+							const menu = e.currentTarget;
+							if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
+							else focusInitialMenuItem(menu);
+							focusFirst.current = false;
+						},
+						onKeyDownCapture: (e) => {
+							if (e.currentTarget.contains(e.target)) handleMenuKeys(e.nativeEvent, e.currentTarget);
+						},
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								role: "group",
+								"aria-label": "Kinds",
+								className: "ink-highlight-kinds",
+								children: model.items.map((item) => /* @__PURE__ */ jsxs("button", {
+									type: "button",
+									role: "menuitemradio",
+									"aria-checked": item.checked,
+									tabIndex: -1,
+									className: "ink-select-item ink-menu-item ink-highlight-item",
+									"data-ink-select-item": "",
+									"data-key": item.kind,
+									"data-state": item.checked ? "checked" : "unchecked",
+									onClick: () => {
+										setOptions({ kind: item.kind });
+										setTool("highlight");
+										setOpen(false);
+									},
+									children: [/* @__PURE__ */ jsx(InkIcon, {
+										icon: MARKUP_ICONS[item.kind],
+										size: 16
+									}), item.label]
+								}, item.kind))
+							}),
+							/* @__PURE__ */ jsx("div", {
+								role: "separator",
+								className: "ink-select-separator"
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								role: "group",
+								"aria-label": "Colour",
+								className: "ink-highlight-colour",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "ink-highlight-colour-label",
+									"aria-hidden": "true",
+									children: "Colour"
+								}), /* @__PURE__ */ jsx(InkColorMenu, {
+									property: "border",
+									group: "markup",
+									label: "Highlight colour",
+									standalone: true,
+									fallback: doc?.annotations.defaults.color(model.kind),
+									role: "menuitem",
+									tabIndex: -1
+								})]
+							})
+						]
+					}) })
 				]
-			}) })]
-		})]
+			})
+		})
 	});
 }
 //#endregion
@@ -2429,84 +2634,6 @@ function ThreadForm({ editingRoot, locked, deleteLabel, onSubmit, onRemove, onCl
 	});
 }
 //#endregion
-//#region src/components/InkSuggestionCard.tsx
-function InkSuggestionCard({ children }) {
-	const ctx = useInkContext("InkSuggestionCard");
-	const { annotations, selection, accept: acceptId, dismiss: dismissId, select } = useAnnotations();
-	function suggestion(id) {
-		const a = id ? annotations.find((x) => x.id === id) : void 0;
-		return a?.type === "redact" && a.origin === "suggested" ? a : null;
-	}
-	const target = suggestion(ctx.activated) ?? (selection.length === 1 ? suggestion(selection[0]) : null);
-	const anchor = useAnnotationElement(ctx.rootEl, target?.id ?? null);
-	const anchorRef = useMemo(() => ({ current: anchor }), [anchor]);
-	const focusReturn = useFocusReturn(ctx);
-	const open = target !== null && anchor !== null;
-	const bucket = target?.suggestion ? confidenceBucket(target.suggestion.confidence) : void 0;
-	function close() {
-		ctx.setActivated(null);
-		select([]);
-	}
-	function accept() {
-		if (target) acceptId(target.id);
-		close();
-	}
-	/** Locked annotations cannot be removed: dismissing one does nothing and keeps the card. */
-	function dismiss() {
-		if (!target || target.locked) return;
-		focusReturn.beforeRemove(anchor, "[data-origin=\"suggested\"]");
-		dismissId(target.id);
-		close();
-	}
-	return /* @__PURE__ */ jsxs(Popover.Root, {
-		open,
-		onOpenChange: (next) => !next && close(),
-		children: [/* @__PURE__ */ jsx(Popover.Anchor, { virtualRef: anchorRef }), /* @__PURE__ */ jsx(Popover.Portal, { children: target && anchor ? /* @__PURE__ */ jsx(Popover.Content, {
-			className: "ink-suggestion-card",
-			"data-ink-suggestion-card": "",
-			side: "bottom",
-			sideOffset: 6,
-			collisionPadding: 8,
-			"aria-label": "Suggested redaction",
-			onInteractOutside: keepOpenOnAnnotation,
-			onCloseAutoFocus: (e) => focusReturn.onCloseAutoFocus(e, anchor),
-			children: children ? children({
-				annotation: target,
-				suggestion: target.suggestion,
-				bucket,
-				accept,
-				dismiss,
-				close
-			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsxs("p", {
-					className: "ink-suggestion-reason",
-					children: [/* @__PURE__ */ jsx("strong", { children: target.suggestion?.reason ?? "Suggested redaction" }), bucket ? /* @__PURE__ */ jsxs("span", {
-						className: "ink-suggestion-confidence",
-						"data-confidence": bucket,
-						children: [bucket, " confidence"]
-					}) : null]
-				}),
-				target.suggestion?.explanation ? /* @__PURE__ */ jsx("p", {
-					className: "ink-suggestion-explanation",
-					children: target.suggestion.explanation
-				}) : null,
-				/* @__PURE__ */ jsxs("div", {
-					className: "ink-suggestion-actions",
-					children: [/* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: accept,
-						children: "Accept"
-					}), !target.locked ? /* @__PURE__ */ jsx("button", {
-						type: "button",
-						onClick: dismiss,
-						children: "Dismiss"
-					}) : null]
-				})
-			] })
-		}) : null })]
-	});
-}
-//#endregion
-export { InkAnnotation, InkColorMenu, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkShapeMenu, InkSignatureDialog, InkSignatureMenu, InkSuggestionCard, InkTextStyleMenu, InkThreadPopover, InkToolButton, InkToolbar, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useDocument, useEmbedded, useHistory, useInkContext, usePage, useReadable, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
+export { InkAnnotation, InkColorMenu, InkCommand, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkShapeMenu, InkSignatureDialog, InkSignatureMenu, InkTextStyleMenu, InkThreadPopover, InkToolButton, InkToolbar, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useCommand, useDocument, useEmbedded, useHistory, useInkContext, usePage, useReadable, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
 
 //# sourceMappingURL=index.mjs.map