@inkbar/react 0.4.0 → 0.5.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "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 { InkError, 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 { Dialog, Popover, Select, Slot, Toolbar } from "radix-ui";
 import { createPortal, flushSync } from "react-dom";
@@ -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,
@@ -229,7 +226,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, 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) => {
@@ -268,7 +265,9 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		onPageChange,
 		onZoomChange,
 		hostTools,
-		tool: internalTool
+		decorateAnnotation,
+		tool: internalTool,
+		tools
 	});
 	const snapshotHistory = useMemo(() => createSnapshotHistory({
 		apply: (list) => documentRef.current?.annotations.replaceAll(list, "history"),
@@ -356,6 +355,8 @@ 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]);
@@ -427,6 +428,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 +455,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		tool: internalTool,
 		setTool,
 		hostTools,
+		decorateAnnotation: decorate,
+		onDecorateAnnotationChange,
 		fonts,
 		toolOptions,
 		signatures,
@@ -463,6 +482,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		internalTool,
 		setTool,
 		hostTools,
+		decorate,
+		onDecorateAnnotationChange,
 		fonts,
 		toolOptions,
 		signatures,
@@ -523,7 +544,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 +552,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 +670,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			buffer: b,
 			tool: c.tool,
 			...c.hostTools ? { tools: c.hostTools } : {},
+			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 +696,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());
 			},
@@ -718,6 +739,8 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 		ctx.status.state,
 		latest
 	]);
+	const { onDecorateAnnotationChange } = ctx;
+	useEffect(() => onDecorateAnnotationChange(() => engine.current?.redecorate()), [onDecorateAnnotationChange]);
 	useEffect(() => {
 		const built = builtWith.current;
 		if (!engine.current || !built) return;
@@ -1152,11 +1175,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 +1318,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);
+							const menu = e.currentTarget;
+							if (focusFirst.current) menuItems(menu)[0]?.focus({ preventScroll: true });
+							else focusInitialMenuItem(menu);
+							focusFirst.current = false;
 						},
-						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);
-						},
-						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 +1684,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 +1842,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 +2472,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, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkShapeMenu, InkSignatureDialog, InkSignatureMenu, InkTextStyleMenu, InkThreadPopover, InkToolButton, InkToolbar, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useDocument, useEmbedded, useHistory, useInkContext, usePage, useReadable, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
 
 //# sourceMappingURL=index.mjs.map