@inkbar/react 0.2.0 → 0.4.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { createContext, createElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
-import { InkError, acceptSuggestion, confidenceBucket, createSnapshotHistory, isAbandonedNote, openDocument, repliesTo, threadOf, threadRoot } from "@inkbar/core";
-import { TOOL_LABELS, ZOOM_LEVELS, createFocusReturn, cssVariableDefaults, mountViewer, observeAnnotationElement, shouldKeepOpenOnAnnotation } from "@inkbar/core/dom";
-import { Popover, Select, Slot, Toolbar } from "radix-ui";
+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 { Dialog, Popover, Select, Slot, Toolbar } from "radix-ui";
 import { createPortal, flushSync } from "react-dom";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronDown, ChevronLeft, ChevronRight, Hand, Highlighter, ICON_ATTRIBUTES, MessageSquare, MousePointer2, Redo2, Square, Undo2, ZoomIn, ZoomOut } from "@inkbar/icons";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, Check, ChevronDown, ChevronLeft, ChevronRight, Highlighter, ICON_ATTRIBUTES, Italic, MessageSquare, Minus, PenLine, PenTool, Plus, Redo2, Signature, Square, SquareDashedMousePointer, TextCursor, Trash2, Type, Underline, Undo2, ZoomIn, ZoomOut } from "@inkbar/icons";
 //#region src/context.ts
 const InkContextObject = createContext(null);
 /**
@@ -87,6 +87,40 @@ function useTool() {
 	}), [tool, setTool]);
 }
 //#endregion
+//#region src/hooks/useToolStyle.ts
+const NO_STYLE = {};
+const NO_PROPS = /* @__PURE__ */ new Set();
+const EMPTY = {};
+function useToolStyle(group) {
+	const style = useInkContext("useToolStyle()").toolStyle;
+	const scope = group && style ? style.scoped(group) : void 0;
+	const view = scope ?? style;
+	const current = useReadable(view?.current, NO_STYLE);
+	const supported = useReadable(view?.supported, NO_PROPS);
+	return useMemo(() => ({
+		current,
+		supported,
+		set: (patch, opts) => scope ? scope.set(patch) : style?.set(patch, opts),
+		get: (g) => style?.get(g) ?? EMPTY
+	}), [
+		current,
+		supported,
+		style,
+		scope
+	]);
+}
+//#endregion
+//#region src/hooks/useToolOptions.ts
+const NO_OPTIONS = {};
+/**
+* A tool's options and a setter that merges a patch into them without switching tools.
+* Options are empty, and the setter does nothing, until the viewport has mounted.
+*/
+function useToolOptions(id) {
+	const tools = useInkContext("useToolOptions()").tools;
+	return [useReadable(tools?.options(id), NO_OPTIONS), useCallback((patch) => tools?.setOptions(id, patch), [tools, id])];
+}
+//#endregion
 //#region src/hooks/useSelection.ts
 function useSelection() {
 	const { selection, document } = useInkContext("useSelection()");
@@ -175,7 +209,7 @@ function useLatest(value) {
 }
 //#endregion
 //#region src/components/InkRoot.tsx
-const IDLE = { state: "idle" };
+const IDLE$1 = { state: "idle" };
 const NO_ANNOTATIONS = [];
 const NO_IDS = [];
 /** Signed URLs change; the key does not. Bytes and Blobs are their own identity. */
@@ -195,7 +229,7 @@ function isDevelopment() {
 function setTestHook(el, doc) {
 	if (el && isDevelopment()) el.__inkDocument = doc;
 }
-function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, tool, onToolChange, 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, 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) => {
@@ -206,11 +240,11 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	const [document, setDocument] = useState(null);
 	/** Overrides the document's status while opening, and when opening itself failed. */
 	const [override, setOverride] = useState(null);
-	const [internalTool, setInternalTool] = useState(tool ?? "view");
+	const [internalTool, setInternalTool] = useState(tool ?? "select-text");
 	const [activated, setActivatedState] = useState(null);
 	const [viewport, setViewportState] = useState(null);
 	const [tools, setToolsState] = useState(null);
-	const documentStatus = useReadable(document?.status, IDLE);
+	const documentStatus = useReadable(document?.status, IDLE$1);
 	const status = override ?? documentStatus;
 	const annotationList = useReadable(document?.annotations.list, NO_ANNOTATIONS);
 	const selection = useReadable(document?.annotations.selection, NO_IDS);
@@ -232,13 +266,15 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		onActivate,
 		onToolChange,
 		onPageChange,
-		onZoomChange
+		onZoomChange,
+		hostTools,
+		tool: internalTool
 	});
 	const snapshotHistory = useMemo(() => createSnapshotHistory({
 		apply: (list) => documentRef.current?.annotations.replaceAll(list, "history"),
 		enabled: () => latest.current.historyEnabled
 	}), [latest]);
-	useEffect(() => {
+	useLayoutEffect(() => {
 		snapshotHistory.observe(annotations);
 	}, [annotations, snapshotHistory]);
 	const srcIdentity = identity(src);
@@ -357,6 +393,21 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		coreCanRedo,
 		snapshotHistory
 	]);
+	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,
+		tool: latest.current.tool
+	}) : null, [
+		document,
+		latest,
+		latestHistory
+	]);
+	useEffect(() => {
+		styleTracker?.setTool(internalTool);
+	}, [styleTracker, internalTool]);
 	useImperativeHandle(ref, () => ({
 		document,
 		status,
@@ -368,6 +419,14 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		rootEl,
 		inkHistory
 	]);
+	const fonts = useMemo(() => fontsProp ?? FONT_FAMILIES, [fontsProp]);
+	const signatureFonts = useMemo(() => signatureFontsProp ?? SIGNATURE_FONTS, [signatureFontsProp]);
+	const signatures = useMemo(() => createSignatureLibrary(signatureStore ?? createMemorySignatureStore()), [signatureStore]);
+	useEffect(() => {
+		signatures.refresh();
+	}, [signatures]);
+	/** Tool options last as long as the root; the tool style is per document. */
+	const [toolOptions] = useState(createToolOptions);
 	const ctx = useMemo(() => ({
 		assets,
 		document,
@@ -378,6 +437,12 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		tools,
 		tool: internalTool,
 		setTool,
+		hostTools,
+		fonts,
+		toolOptions,
+		signatures,
+		signatureFonts,
+		toolStyle: styleTracker?.toolStyle ?? null,
 		zoomModel: zoom,
 		pageModel: page,
 		reportZoom,
@@ -397,6 +462,12 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		tools,
 		internalTool,
 		setTool,
+		hostTools,
+		fonts,
+		toolOptions,
+		signatures,
+		signatureFonts,
+		styleTracker,
 		zoom,
 		page,
 		reportZoom,
@@ -477,7 +548,7 @@ function InkAnnotation({ annotation, element, children }) {
 		id,
 		isSuggestion
 	]);
-	return /* @__PURE__ */ jsx(Fragment, { children: children(slotProps) });
+	return /* @__PURE__ */ jsx(Fragment$1, { children: children(slotProps) });
 }
 //#endregion
 //#region src/components/InkPage.tsx
@@ -511,14 +582,14 @@ function InkPage({ page, host, mount, error, customAnnotations = false, renderAn
 		mount,
 		customAnnotations
 	]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [error ? createPortal(/* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [error ? createPortal(/* @__PURE__ */ jsx("div", {
 		className: "ink-page-error",
 		"data-ink-page-error": "",
 		role: "alert",
 		children: renderPageError ? renderPageError({
 			error,
 			page
-		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("p", { children: [
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", { children: [
 			"Page ",
 			page + 1,
 			" could not be shown."
@@ -585,6 +656,12 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			gap: g,
 			buffer: b,
 			tool: c.tool,
+			...c.hostTools ? { tools: c.hostTools } : {},
+			...c.toolStyle ? { toolStyle: c.toolStyle } : {},
+			toolHistory: { batch: (fn) => latest.current.ctx.history.batch(fn) },
+			toolOptions: c.toolOptions,
+			fonts: [...c.fonts],
+			signatureLibrary: () => latest.current.ctx.signatures,
 			customAnnotations: cu,
 			onActivate: (id) => latest.current.ctx.setActivated(id),
 			onBuild: (vp, tc) => {
@@ -700,7 +777,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			}) : err ? /* @__PURE__ */ jsx("div", {
 				className: "ink-status ink-error",
 				role: "alert",
-				children: typeof error === "function" ? error({ error: err }) : error !== void 0 ? error : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("p", {
+				children: typeof error === "function" ? error({ error: err }) : error !== void 0 ? error : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", {
 					className: "ink-error-title",
 					children: "This document could not be opened."
 				}), /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("code", {
@@ -766,16 +843,21 @@ function InkIcon({ icon, size = 18 }) {
 //#endregion
 //#region src/components/InkToolButton.tsx
 const ICONS = {
-	view: Hand,
-	select: MousePointer2,
+	"select-text": TextCursor,
+	select: SquareDashedMousePointer,
 	highlight: Highlighter,
 	"redact-area": Square,
-	note: MessageSquare
+	sketch: PenTool,
+	draw: PenLine,
+	note: MessageSquare,
+	freetext: Type,
+	signature: Signature
 };
 function InkToolButton({ tool, label, asChild = false, className, children, onClick, ...rest }) {
 	const { tool: current, setTool } = useTool();
 	const active = current === tool;
-	const name = label ?? TOOL_LABELS[tool];
+	const name = label ?? TOOL_LABELS[tool] ?? tool;
+	const icon = ICONS[tool];
 	return /* @__PURE__ */ jsx(Toolbar.Button, {
 		asChild,
 		className: cx("ink-tool-button", className),
@@ -793,7 +875,7 @@ function InkToolButton({ tool, label, asChild = false, className, children, onCl
 		children: typeof children === "function" ? children({
 			active,
 			label: name
-		}) : children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ICONS[tool] })
+		}) : children ?? (icon ? /* @__PURE__ */ jsx(InkIcon, { icon }) : null)
 	});
 }
 //#endregion
@@ -897,7 +979,7 @@ const FITS = [{
 	value: "fit-page",
 	label: "Fit page"
 }];
-function Item({ value, label }) {
+function Item$1({ value, label }) {
 	return /* @__PURE__ */ jsxs(Select.Item, {
 		value,
 		className: "ink-select-item",
@@ -955,12 +1037,12 @@ function InkZoomSelect({ className, ...rest }) {
 			side: "top",
 			sideOffset: 4,
 			children: /* @__PURE__ */ jsxs(Select.Viewport, { children: [
-				FITS.map((o) => /* @__PURE__ */ jsx(Item, {
+				FITS.map((o) => /* @__PURE__ */ jsx(Item$1, {
 					value: o.value,
 					label: o.label
 				}, o.value)),
 				/* @__PURE__ */ jsx(Select.Separator, { className: "ink-select-separator" }),
-				levels.map((o) => /* @__PURE__ */ jsx(Item, {
+				levels.map((o) => /* @__PURE__ */ jsx(Item$1, {
 					value: o.value,
 					label: o.label
 				}, o.value))
@@ -1069,6 +1151,1074 @@ 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 }) {
+	const Wrap = standalone ? Fragment : Toolbar.Button;
+	const { current, supported, set } = useToolStyle(group);
+	const [open, setOpen] = useState(false);
+	const model = colorMenuModel(property, current, supported);
+	const name = label ?? model.label;
+	/** ArrowDown opens on the first item; a click opens on the checked one. */
+	const focusFirst = useRef(false);
+	const input = useRef(null);
+	const apply = useRef((_hex) => {});
+	apply.current = (hex) => set(model.custom(hex));
+	const bindInput = useCallback((el) => {
+		input.current = el;
+		el?.addEventListener("change", () => apply.current(el.value));
+	}, []);
+	useEffect(() => {
+		if (input.current) input.current.value = model.customValue.toLowerCase();
+	}, [model.customValue]);
+	useEffect(() => {
+		if (!model.enabled) setOpen(false);
+	}, [model.enabled]);
+	const trigger = model.trigger;
+	const swatchStyle = trigger.kind === "color" ? { "--ink-swatch": trigger.color } : void 0;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsx(Wrap, {
+			...standalone ? {} : { asChild: true },
+			children: /* @__PURE__ */ jsx(Popover.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("ink-menu-trigger ink-color-menu", className),
+					"data-ink-color-menu": property,
+					"data-state": open ? "open" : "closed",
+					"data-mixed": model.mixed ? "" : void 0,
+					"aria-label": name,
+					title: name,
+					"aria-haspopup": "menu",
+					disabled: disabled === true || !model.enabled,
+					...rest,
+					onKeyDown: (e) => {
+						rest.onKeyDown?.(e);
+						if (e.key !== "ArrowDown" || e.defaultPrevented || open || !model.enabled) return;
+						e.preventDefault();
+						focusFirst.current = true;
+						setOpen(true);
+					},
+					children: children ?? /* @__PURE__ */ jsx("span", {
+						className: "ink-swatch",
+						"data-ink-swatch": "",
+						"data-property": property,
+						"data-kind": trigger.kind,
+						"data-color": trigger.kind === "color" ? trigger.color : void 0,
+						style: swatchStyle,
+						"aria-hidden": "true"
+					})
+				})
+			})
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			role: "menu",
+			"aria-label": name,
+			className: "ink-select-content ink-menu-content",
+			"data-ink-select-content": "",
+			"data-ink-menu": `color-${property}`,
+			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: [
+				model.noFill ? /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					role: "menuitemradio",
+					"aria-checked": model.noFill.checked,
+					tabIndex: -1,
+					className: "ink-select-item ink-menu-item",
+					"data-ink-select-item": "",
+					"data-state": model.noFill.checked ? "checked" : "unchecked",
+					onClick: () => set(model.noFill.patch),
+					children: ["No fill", model.noFill.checked ? /* @__PURE__ */ jsx("span", {
+						className: "ink-select-indicator",
+						children: /* @__PURE__ */ jsx(InkIcon, {
+							icon: Check,
+							size: 16
+						})
+					}) : null]
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					role: "group",
+					"aria-label": "Colours",
+					className: "ink-color-grid",
+					"data-ink-menu-columns": COLOR_COLUMNS,
+					children: model.swatches.map((sw) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "menuitemradio",
+						"aria-label": sw.label,
+						"aria-checked": sw.checked,
+						tabIndex: -1,
+						className: "ink-swatch-item",
+						"data-state": sw.checked ? "checked" : "unchecked",
+						style: { "--ink-swatch": sw.color },
+						onClick: () => set(sw.patch)
+					}, sw.key))
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "menuitem",
+					tabIndex: -1,
+					className: "ink-select-item ink-menu-item",
+					"data-ink-select-item": "",
+					onClick: () => input.current?.click(),
+					children: "Custom…"
+				})
+			]
+		}) })]
+	}), /* @__PURE__ */ jsx("input", {
+		ref: bindInput,
+		type: "color",
+		className: "ink-color-input",
+		"aria-label": "Custom colour",
+		"data-ink-color-input": property,
+		tabIndex: -1,
+		defaultValue: model.customValue.toLowerCase()
+	})] });
+}
+//#endregion
+//#region src/components/InkShapeMenu.tsx
+function InkShapeMenu({ className, children, ...rest }) {
+	const { tool, setTool } = useTool();
+	const [options, setOptions] = useToolOptions("shape");
+	const [open, setOpen] = useState(false);
+	const model = shapeMenuModel(options, SHAPE_KINDS);
+	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;
+							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);
+						},
+						children: [/* @__PURE__ */ jsx(InkIcon, {
+							icon: SHAPE_ICONS[item.kind],
+							size: 16
+						}), item.label]
+					}, item.kind))
+				})
+			}) })]
+		})]
+	});
+}
+//#endregion
+//#region src/components/InkSignatureDialog.tsx
+function InkSignatureDialog({ open, onOpenChange, fonts, onSave, onCloseAutoFocus, className }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(Dialog.Overlay, {
+			className: "ink-dialog-overlay",
+			"data-ink-dialog-overlay": ""
+		}), /* @__PURE__ */ jsxs(Dialog.Content, {
+			className: cx("ink-dialog ink-signature-dialog", className),
+			"data-ink-signature-dialog": "",
+			"aria-modal": "true",
+			"aria-describedby": void 0,
+			onOpenAutoFocus: (e) => {
+				e.preventDefault();
+				e.currentTarget.querySelector("[role=\"tab\"][aria-selected=\"true\"]")?.focus({ preventScroll: true });
+			},
+			onCloseAutoFocus,
+			children: [/* @__PURE__ */ jsx(Dialog.Title, {
+				className: "ink-dialog-title",
+				children: SIGNATURE_LABELS.dialog
+			}), /* @__PURE__ */ jsx(SignatureForm, {
+				fonts,
+				onSave,
+				onClose: () => onOpenChange(false)
+			})]
+		})] })
+	});
+}
+const IDLE = {
+	tab: "draw",
+	padEmpty: true,
+	name: "",
+	font: "",
+	image: void 0,
+	imageError: void 0,
+	saveError: void 0,
+	canSave: false,
+	saving: false
+};
+/** The dialog's body, mounted while it is open: one draft per opening. */
+function SignatureForm({ fonts, onSave, onClose }) {
+	const ctx = useInkContext("InkSignatureDialog");
+	const { setTool } = useTool();
+	const [, setOptions] = useToolOptions("signature");
+	const [draft] = useState(() => createSignatureDraft({ fonts: fonts ?? ctx.signatureFonts }));
+	const s = useReadable(draft.state, IDLE);
+	const uid = useId();
+	const padHost = useRef(null);
+	useEffect(() => {
+		const host = padHost.current;
+		const detach = host ? draft.attachPad(host) : void 0;
+		return () => {
+			detach?.();
+			draft.destroy();
+		};
+	}, [draft]);
+	const save = () => {
+		draft.save(ctx.signatures).then((t) => {
+			if (!t) return;
+			setOptions({ templateId: t.id });
+			setTool("signature");
+			onSave?.(t);
+			onClose();
+		}, () => {});
+	};
+	const tabId = (tab) => `${uid}-tab-${tab}`;
+	const panelId = (tab) => `${uid}-panel-${tab}`;
+	const panel = (tab) => ({
+		role: "tabpanel",
+		id: panelId(tab),
+		"aria-labelledby": tabId(tab),
+		className: "ink-tab-panel",
+		"data-key": tab,
+		hidden: s.tab !== tab
+	});
+	const shown = s.name.trim() || SIGNATURE_LABELS.namePlaceholder;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("div", {
+			role: "tablist",
+			"aria-label": SIGNATURE_LABELS.tabs,
+			className: "ink-tabs",
+			onKeyDown: (e) => handleTabKeys(e.nativeEvent, e.currentTarget),
+			children: SIGNATURE_TABS.map((tab) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				id: tabId(tab),
+				"aria-controls": panelId(tab),
+				"aria-selected": s.tab === tab,
+				tabIndex: s.tab === tab ? 0 : -1,
+				className: "ink-tab",
+				"data-key": tab,
+				"data-state": s.tab === tab ? "active" : "inactive",
+				onClick: () => draft.setTab(tab),
+				children: SIGNATURE_LABELS[tab]
+			}, tab))
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			...panel("draw"),
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: padHost,
+				className: "ink-signature-pad-host",
+				"data-ink-signature-pad-host": "",
+				role: "img",
+				"aria-label": SIGNATURE_LABELS.pad
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ink-dialog-row",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ink-button",
+					"data-ink-signature-clear": "",
+					disabled: s.padEmpty,
+					onClick: () => draft.clearPad(),
+					children: SIGNATURE_LABELS.clear
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			...panel("type"),
+			children: [/* @__PURE__ */ jsxs("label", {
+				className: "ink-field",
+				children: [/* @__PURE__ */ jsx("span", { children: SIGNATURE_LABELS.name }), /* @__PURE__ */ jsx("input", {
+					type: "text",
+					className: "ink-input",
+					"data-ink-signature-name": "",
+					autoComplete: "name",
+					placeholder: SIGNATURE_LABELS.namePlaceholder,
+					value: s.name,
+					onChange: (e) => draft.setName(e.target.value)
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				role: "radiogroup",
+				"aria-label": SIGNATURE_LABELS.fonts,
+				className: "ink-signature-fonts",
+				onKeyDown: (e) => handleRadioKeys(e.nativeEvent, e.currentTarget),
+				children: draft.fonts.map((font) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					role: "radio",
+					"aria-checked": s.font === font,
+					"aria-label": font,
+					tabIndex: s.font === font ? 0 : -1,
+					className: "ink-signature-font",
+					"data-key": font,
+					"data-state": s.font === font ? "checked" : "unchecked",
+					onClick: () => draft.setFont(font),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "ink-signature-font-sample",
+						style: { fontFamily: fontFamilyValue(font) },
+						children: shown
+					})
+				}, font))
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			...panel("image"),
+			children: [
+				/* @__PURE__ */ jsxs("label", {
+					className: "ink-field",
+					children: [/* @__PURE__ */ jsx("span", { children: SIGNATURE_LABELS.file }), /* @__PURE__ */ jsx("input", {
+						type: "file",
+						accept: "image/png,image/jpeg",
+						className: "ink-input",
+						"data-ink-signature-file": "",
+						onChange: (e) => void draft.chooseFile(e.target.files?.[0])
+					})]
+				}),
+				s.image?.kind === "image" ? /* @__PURE__ */ jsx("img", {
+					className: "ink-signature-image",
+					src: s.image.imagedata,
+					alt: ""
+				}) : null,
+				s.imageError ? /* @__PURE__ */ jsx("p", {
+					className: "ink-field-error",
+					role: "alert",
+					children: s.imageError
+				}) : null
+			]
+		}),
+		s.saveError ? /* @__PURE__ */ jsx("p", {
+			className: "ink-field-error",
+			role: "alert",
+			"data-ink-signature-save-error": "",
+			children: s.saveError
+		}) : null,
+		/* @__PURE__ */ jsxs("div", {
+			className: "ink-dialog-actions",
+			children: [/* @__PURE__ */ jsx(Dialog.Close, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "ink-button",
+					"data-ink-signature-cancel": "",
+					children: SIGNATURE_LABELS.cancel
+				})
+			}), /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "ink-button",
+				"data-variant": "primary",
+				"data-ink-signature-save": "",
+				disabled: !s.canSave,
+				onClick: save,
+				children: SIGNATURE_LABELS.save
+			})]
+		})
+	] });
+}
+//#endregion
+//#region src/components/InkSignatureMenu.tsx
+const NO_TEMPLATES = [];
+/** A saved signature drawn small: ink as filled outlines, an image as itself. */
+function SignaturePreview({ template }) {
+	if (template.kind === "image") return /* @__PURE__ */ jsx("span", {
+		className: "ink-signature-preview",
+		"data-kind": "image",
+		children: /* @__PURE__ */ jsx("img", {
+			src: template.imagedata,
+			alt: "",
+			draggable: false
+		})
+	});
+	const { viewBox, paths } = signaturePreview(template);
+	return /* @__PURE__ */ jsx("span", {
+		className: "ink-signature-preview",
+		"data-kind": "ink",
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox,
+			"aria-hidden": "true",
+			children: paths.map((d, i) => /* @__PURE__ */ jsx("path", {
+				d,
+				fill: "currentColor"
+			}, i))
+		})
+	});
+}
+function InkSignatureMenu({ className, children, fonts, ...rest }) {
+	const { tool, setTool } = useTool();
+	const [options, setOptions] = useToolOptions("signature");
+	const { signatures } = useInkContext("InkSignatureMenu");
+	const templates = useReadable(signatures.templates, NO_TEMPLATES);
+	const removeError = useReadable(signatures.removeError, void 0);
+	const model = signatureMenuModel(templates, options);
+	const [open, setOpen] = useState(false);
+	const [creating, setCreating] = useState(false);
+	const active = tool === "signature";
+	const main = useRef(null);
+	const menu = useRef(null);
+	/** ArrowDown opens on the first item; a click opens on the checked one. */
+	const focusFirst = useRef(false);
+	/** Set while the menu closes for the dialog, which takes focus instead of the trigger. */
+	const toDialog = useRef(false);
+	/** The row of a removed signature, until focus lands on what took its place. */
+	const removedRow = useRef(null);
+	useEffect(() => {
+		if (open) signatures.clearRemoveError();
+	}, [open, signatures]);
+	useEffect(() => {
+		const row = removedRow.current;
+		const panel = menu.current;
+		if (row === null || !panel) return;
+		removedRow.current = null;
+		const rows = panel.querySelectorAll(".ink-signature-item");
+		(rows[Math.min(row, rows.length - 1)] ?? panel.querySelector("[data-ink-signature-create]"))?.focus({ preventScroll: true });
+	}, [templates]);
+	const remove = (id, row) => {
+		removedRow.current = row;
+		signatures.remove(id).catch(() => {
+			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,
+				"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, {
+						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", {
+								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: "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 });
+				}
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/InkHighlightMenu.tsx
+function InkHighlightMenu({ className, children, ...rest }) {
+	const { tool, setTool } = useTool();
+	const [options, setOptions] = useToolOptions("highlight");
+	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);
+				},
+				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,
+							role: "menuitem",
+							tabIndex: -1
+						})]
+					})
+				]
+			}) })]
+		})]
+	});
+}
+//#endregion
+//#region src/components/InkTextStyleMenu.tsx
+const TOGGLE_ICONS = {
+	bold: Bold,
+	italic: Italic,
+	underline: Underline
+};
+const ALIGN_ICONS = {
+	left: AlignLeft,
+	center: AlignCenter,
+	right: AlignRight,
+	justify: AlignJustify
+};
+function InkTextStyleMenu({ className, children, disabled, ...rest }) {
+	const { fonts } = useInkContext("InkTextStyleMenu");
+	const { current, supported, set } = useToolStyle();
+	const [open, setOpen] = useState(false);
+	/** The size as typed, until it is committed with Enter or blur. */
+	const [draft, setDraft] = useState(null);
+	const model = textStyleMenuModel(current, supported, fonts);
+	useEffect(() => {
+		if (model.enabled) return;
+		setOpen(false);
+		setDraft(null);
+	}, [model.enabled]);
+	const commitSize = () => {
+		if (draft === null) return;
+		if (draft.trim() !== "") {
+			const patch = model.size.commit(Number(draft));
+			if (patch) set(patch);
+		}
+		setDraft(null);
+	};
+	const nudge = (direction) => {
+		const patch = model.size.nudge(direction);
+		if (patch) set(patch);
+		setDraft(null);
+	};
+	const sizeShown = draft ?? (model.size.value === null ? "" : String(model.size.value));
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		open,
+		onOpenChange: (next) => {
+			if (!next) commitSize();
+			setOpen(next);
+		},
+		children: [/* @__PURE__ */ jsx(Toolbar.Button, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Popover.Trigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cx("ink-menu-trigger ink-text-style-menu", className),
+					"data-ink-text-style-menu": "",
+					"data-state": open ? "open" : "closed",
+					"data-mixed": model.mixed ? "" : void 0,
+					"aria-label": model.label,
+					title: model.label,
+					"aria-haspopup": "dialog",
+					disabled: disabled === true || !model.enabled,
+					...rest,
+					onKeyDown: (e) => {
+						rest.onKeyDown?.(e);
+						if (e.key !== "ArrowDown" || e.defaultPrevented || open || !model.enabled) return;
+						e.preventDefault();
+						setOpen(true);
+					},
+					children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ALargeSmall })
+				})
+			})
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(Popover.Content, {
+			"aria-label": model.label,
+			className: "ink-select-content ink-menu-content ink-text-style-content",
+			"data-ink-select-content": "",
+			"data-ink-menu": "text-style",
+			side: "bottom",
+			align: "start",
+			sideOffset: 4,
+			collisionPadding: 8,
+			children: [
+				/* @__PURE__ */ jsxs("select", {
+					className: "ink-text-style-font",
+					"aria-label": model.font.label,
+					value: model.font.value,
+					onChange: (e) => set(model.font.patch(e.target.value)),
+					children: [model.font.value === "" ? /* @__PURE__ */ jsx("option", {
+						value: "",
+						disabled: true,
+						hidden: true,
+						children: "Mixed"
+					}) : null, model.font.options.map((f) => /* @__PURE__ */ jsx("option", {
+						value: f,
+						children: f
+					}, f))]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "ink-text-style-row",
+					children: [/* @__PURE__ */ jsx(InkColorMenu, {
+						property: "textColor",
+						standalone: true
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "ink-text-style-size",
+						role: "group",
+						"aria-label": "Size",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ink-text-style-button",
+								"aria-label": "Decrease font size",
+								onClick: () => nudge(-1),
+								children: /* @__PURE__ */ jsx(InkIcon, {
+									icon: Minus,
+									size: 16
+								})
+							}),
+							/* @__PURE__ */ jsx("input", {
+								type: "number",
+								className: "ink-text-style-input",
+								"aria-label": model.size.label,
+								min: model.size.min,
+								max: model.size.max,
+								step: model.size.step,
+								value: sizeShown,
+								onChange: (e) => setDraft(e.target.value),
+								onBlur: commitSize,
+								onKeyDown: (e) => {
+									if (e.key === "Enter") {
+										e.preventDefault();
+										commitSize();
+									}
+								}
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "ink-text-style-button",
+								"aria-label": "Increase font size",
+								onClick: () => nudge(1),
+								children: /* @__PURE__ */ jsx(InkIcon, {
+									icon: Plus,
+									size: 16
+								})
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "ink-text-style-row",
+					role: "group",
+					"aria-label": "Emphasis",
+					children: model.toggles.map((t) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "ink-text-style-button",
+						"aria-label": t.label,
+						title: t.label,
+						"aria-pressed": t.pressed,
+						"data-state": t.pressed === true ? "on" : "off",
+						"data-mixed": t.pressed === "mixed" ? "" : void 0,
+						onClick: () => set(t.patch),
+						children: /* @__PURE__ */ jsx(InkIcon, {
+							icon: TOGGLE_ICONS[t.key],
+							size: 16
+						})
+					}, t.key))
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "ink-text-style-row",
+					role: "radiogroup",
+					"aria-label": model.align.label,
+					onKeyDown: (e) => handleRadioKeys(e.nativeEvent, e.currentTarget),
+					children: model.align.choices.map((c) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "radio",
+						className: "ink-text-style-button",
+						"aria-label": c.label,
+						title: c.label,
+						"aria-checked": c.checked,
+						tabIndex: c.tabStop ? 0 : -1,
+						"data-state": c.checked ? "on" : "off",
+						onClick: () => set(c.patch),
+						children: /* @__PURE__ */ jsx(InkIcon, {
+							icon: ALIGN_ICONS[c.key],
+							size: 16
+						})
+					}, c.key))
+				})
+			]
+		}) })]
+	});
+}
+//#endregion
+//#region src/components/InkLineStyleMenu.tsx
+function Item({ label, checked, disabled, onSelect, children }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		role: "menuitemradio",
+		"aria-checked": checked,
+		disabled,
+		tabIndex: -1,
+		className: "ink-select-item ink-menu-item",
+		"data-ink-select-item": "",
+		"data-state": checked ? "checked" : "unchecked",
+		onClick: onSelect,
+		children: [children ?? label, checked ? /* @__PURE__ */ jsx("span", {
+			className: "ink-select-indicator",
+			children: /* @__PURE__ */ jsx(InkIcon, {
+				icon: Check,
+				size: 16
+			})
+		}) : null]
+	});
+}
+function Group({ label, disabled, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": label,
+		"aria-disabled": disabled || void 0,
+		"data-disabled": disabled ? "" : void 0,
+		className: "ink-menu-group",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "ink-menu-label",
+			"aria-hidden": "true",
+			children: label
+		}), children]
+	});
+}
+function InkLineStyleMenu({ className, children, disabled, ...rest }) {
+	const { current, supported, set } = useToolStyle();
+	const [open, setOpen] = useState(false);
+	const model = lineStyleMenuModel(current, supported);
+	/** ArrowDown opens on the first item; a click opens on the checked one. */
+	const focusFirst = useRef(false);
+	useEffect(() => {
+		if (!model.enabled) setOpen(false);
+	}, [model.enabled]);
+	return /* @__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: cx("ink-menu-trigger ink-line-style-menu", className),
+					"data-ink-line-style-menu": "",
+					"data-state": open ? "open" : "closed",
+					"data-mixed": model.mixed ? "" : void 0,
+					"aria-label": "Line style",
+					title: "Line style",
+					"aria-haspopup": "menu",
+					disabled: disabled === true || !model.enabled,
+					...rest,
+					onKeyDown: (e) => {
+						rest.onKeyDown?.(e);
+						if (e.key !== "ArrowDown" || e.defaultPrevented || open || !model.enabled) return;
+						e.preventDefault();
+						focusFirst.current = true;
+						setOpen(true);
+					},
+					children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Minus })
+				})
+			})
+		}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Content, {
+			role: "menu",
+			"aria-label": "Line style",
+			className: "ink-select-content ink-menu-content",
+			"data-ink-select-content": "",
+			"data-ink-menu": "line-style",
+			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: model.sections.map((section) => /* @__PURE__ */ jsx(Group, {
+				label: section.label,
+				disabled: section.disabled,
+				children: section.items.map((item) => /* @__PURE__ */ jsx(Item, {
+					label: item.label,
+					checked: item.checked,
+					disabled: section.disabled,
+					onSelect: () => set(item.patch)
+				}, item.key))
+			}, section.label))
+		}) })]
+	});
+}
+//#endregion
 //#region src/components/annotation-element.ts
 /**
 * The overlay element core draws for an annotation, for anchoring a popover to it. Core
@@ -1100,13 +2250,13 @@ function useFocusReturn(ctx) {
 	}), [latest]);
 }
 //#endregion
-//#region src/components/InkNotePopover.tsx
-function InkNotePopover({ children }) {
-	const ctx = useInkContext("InkNotePopover");
+//#region src/components/InkThreadPopover.tsx
+function InkThreadPopover({ children }) {
+	const ctx = useInkContext("InkThreadPopover");
 	const { annotations, add, update, remove } = useAnnotations();
 	const note = useMemo(() => {
 		const a = ctx.activated ? annotations.find((x) => x.id === ctx.activated) : void 0;
-		return a?.type === "note" ? threadRoot(annotations, a) : null;
+		return a ? threadRoot(annotations, a) : null;
 	}, [annotations, ctx.activated]);
 	const anchor = useAnnotationElement(ctx.rootEl, note?.id ?? null);
 	const anchorRef = useMemo(() => ({ current: anchor }), [anchor]);
@@ -1114,10 +2264,10 @@ function InkNotePopover({ children }) {
 	const open = note !== null && anchor !== null;
 	/** The root, then every reply below it, depth first, each level in creation order. */
 	const thread = useMemo(() => note ? threadOf(annotations, note) : [], [annotations, note]);
-	/** True while the default form writes the root note's own text rather than a reply. */
+	/** True while the default form writes the root's own text rather than a reply. */
 	const editingRoot = note !== null && !note.locked && !note.contents?.trim();
 	/**
-	* Notes this popover wrote text or a reply for. In controlled mode the write is a proposal
+	* Roots this popover wrote text or a reply for. In controlled mode the write is a proposal
 	* the host may not have applied yet, so the applied list still shows the note empty; these
 	* are never dropped as abandoned.
 	*/
@@ -1129,7 +2279,9 @@ function InkNotePopover({ children }) {
 		remove
 	});
 	function dropIfEmpty(id) {
-		if (dropped.current.has(id) || written.current.has(id) || !isAbandonedNote(latest.current.annotations, id)) return false;
+		const list = latest.current.annotations;
+		const a = list.find((x) => x.id === id);
+		if (!a || dropped.current.has(id) || written.current.has(id) || !isAbandonedNote(a, list)) return false;
 		dropped.current.add(id);
 		latest.current.remove(id);
 		return true;
@@ -1148,15 +2300,16 @@ function InkNotePopover({ children }) {
 		if (!root || !contents) return;
 		written.current.add(root.id);
 		add({
-			type: "note",
+			type: "text",
 			page: root.page,
 			rect: root.rect,
 			contents,
 			inReplyTo: root.id
 		});
 	}
+	/** A note that closing now would remove. */
 	function isEmptyRoot(root) {
-		return !written.current.has(root.id) && !root.locked && !root.contents?.trim() && thread.length === 1;
+		return !written.current.has(root.id) && isAbandonedNote(root, annotations);
 	}
 	function close() {
 		const root = note;
@@ -1171,7 +2324,7 @@ function InkNotePopover({ children }) {
 		if (contents.trim()) written.current.add(note.id);
 		update(note.id, { contents });
 	}
-	/** Locked notes cannot be removed: removing one does nothing and keeps the popover. */
+	/** Locked roots cannot be removed: removing one does nothing and keeps the popover. */
 	function removeThread() {
 		const root = note;
 		if (!root || root.locked) return;
@@ -1184,22 +2337,22 @@ function InkNotePopover({ children }) {
 		open,
 		onOpenChange: (next) => !next && close(),
 		children: [/* @__PURE__ */ jsx(Popover.Anchor, { virtualRef: anchorRef }), /* @__PURE__ */ jsx(Popover.Portal, { children: note && anchor ? /* @__PURE__ */ jsx(Popover.Content, {
-			className: "ink-note-popover",
-			"data-ink-note-popover": "",
+			className: "ink-thread-popover",
+			"data-ink-thread-popover": "",
 			side: "right",
 			sideOffset: 8,
 			collisionPadding: 8,
-			"aria-label": "Note thread",
+			"aria-label": threadPopoverLabel(note),
 			onInteractOutside: keepOpenOnAnnotation,
 			onCloseAutoFocus: (e) => focusReturn.onCloseAutoFocus(e, anchor),
 			children: children ? children({
-				note,
+				root: note,
 				replies: thread.slice(1),
 				reply,
 				update: updateContents,
 				remove: removeThread,
 				close
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [!editingRoot || thread.length > 1 ? /* @__PURE__ */ jsx("ol", {
+			}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!editingRoot || thread.length > 1 ? /* @__PURE__ */ jsx("ol", {
 				className: "ink-thread",
 				"data-ink-thread": "",
 				children: thread.map((item) => /* @__PURE__ */ jsxs("li", {
@@ -1225,6 +2378,7 @@ function InkNotePopover({ children }) {
 			}) : null, /* @__PURE__ */ jsx(ThreadForm, {
 				editingRoot,
 				locked: !!note.locked,
+				deleteLabel: threadDeleteLabel(note),
 				onSubmit: (text) => editingRoot ? updateContents(text) : reply(text),
 				onRemove: removeThread,
 				onClose: close
@@ -1232,8 +2386,8 @@ function InkNotePopover({ children }) {
 		}) : null })]
 	});
 }
-/** The default form: the root note's own text while it is empty, replies after that. */
-function ThreadForm({ editingRoot, locked, onSubmit, onRemove, onClose }) {
+/** The default form: the root's own text while it is empty, replies after that. */
+function ThreadForm({ editingRoot, locked, deleteLabel, onSubmit, onRemove, onClose }) {
 	const [draft, setDraft] = useState("");
 	function submit(e) {
 		e.preventDefault();
@@ -1263,7 +2417,7 @@ function ThreadForm({ editingRoot, locked, onSubmit, onRemove, onClose }) {
 				!locked ? /* @__PURE__ */ jsx("button", {
 					type: "button",
 					onClick: onRemove,
-					children: "Delete"
+					children: deleteLabel
 				}) : null,
 				/* @__PURE__ */ jsx("button", {
 					type: "button",
@@ -1323,7 +2477,7 @@ function InkSuggestionCard({ children }) {
 				accept,
 				dismiss,
 				close
-			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			}) : /* @__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", {
@@ -1353,6 +2507,6 @@ function InkSuggestionCard({ children }) {
 	});
 }
 //#endregion
-export { InkAnnotation, InkIcon, InkNextPage, InkNotePopover, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkSuggestionCard, InkToolButton, InkToolbar, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useDocument, useEmbedded, useHistory, useInkContext, usePage, useReadable, useSelection, useTool, useZoom };
+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 };
 
 //# sourceMappingURL=index.mjs.map