@inkbar/react 0.9.0 → 0.11.0

package/dist/index.mjs

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { InkError, createMemorySignatureStore, createSignatureLibrary, createSnapshotHistory, isAbandonedNote, openDocument, readonly, repliesTo, signField, threadOf, threadRoot, writable } from "@inkbar/core";
-import { COLOR_COLUMNS, FONT_FAMILIES, FORM_LABELS, MARKUP_ICONS, MARKUP_KINDS, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SIGNATURE_FONTS, SIGNATURE_LABELS, SIGNATURE_TABS, TOOL_LABELS, ZOOM_LEVELS, attachHistoryKeys, colorMenuModel, createFocusReturn, createPluginHost, createSearchController, createSignatureDraft, createToolOptions, cssVariableDefaults, findAnnouncer, findCountText, focusInitialMenuItem, fontFamilyValue, handleFindKey, handleMenuKeys, handleRadioKeys, handleTabKeys, highlightMenuModel, keepHistoryFocus, lineStyleMenuModel, menuItems, mountViewer, observeAnnotationElement, pageSelectionText, shapeMenuModel, shouldKeepOpenOnAnnotation, signatureMenuModel, signaturePreview, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, unknownCommand, unknownTool, viewerSearchOf, watchDetached, withHostTools } from "@inkbar/core/dom";
+import { COLOR_COLUMNS, FONT_FAMILIES, FORM_LABELS, MARKUP_ICONS, MARKUP_KINDS, SHAPE_COLUMNS, SHAPE_ICONS, SHAPE_KINDS, SIGNATURE_FONTS, SIGNATURE_LABELS, SIGNATURE_TABS, THUMBNAIL_WIDTH, TOOL_LABELS, ZOOM_LEVELS, attachFileKeys, attachHistoryKeys, colorMenuModel, createFocusReturn, createPluginHost, createRecordListController, createSearchController, createSidebarController, createSignatureDraft, createThumbnailPainter, createThumbnailsController, createToolOptions, cssVariableDefaults, downloadDocument, findAnnouncer, findCountText, focusInitialMenuItem, fontFamilyValue, handleFindKey, handleMenuKeys, handleRadioKeys, handleResultsFieldKey, handleTabKeys, highlightMenuModel, isBlankQuery, keepHistoryFocus, lineStyleMenuModel, menuItems, mountViewer, observeAnnotationElement, pageSelectionText, printDocument, recordsSource, searchSource, shapeMenuModel, shouldKeepOpenOnAnnotation, sidebarBadge, signatureMenuModel, signaturePreview, textStyleMenuModel, threadDeleteLabel, threadPopoverLabel, trackToolStyle, unknownCommand, unknownTool, viewerSearchOf, watchDetached, withHostTools } from "@inkbar/core/dom";
 import { Dialog, Popover, Select, Slot, Toolbar } from "radix-ui";
 import { createPortal, flushSync } from "react-dom";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, CaseSensitive, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ICON_ATTRIBUTES, Italic, Minus, Plus, Redo2, Search, Signature, SquareDashedMousePointer, TextCursor, Trash2, Underline, Undo2, X, ZoomIn, ZoomOut } from "@inkbar/icons";
+import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, Bold, CaseSensitive, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Download, ICON_ATTRIBUTES, Italic, Minus, Plus, Printer, Redo2, Search, Signature, SquareDashedMousePointer, TextCursor, Trash2, Underline, Undo2, X, ZoomIn, ZoomOut } from "@inkbar/icons";
 //#region src/context.ts
 const InkContextObject = createContext(null);
 /**
@@ -19,14 +19,14 @@ function useInkContext(consumer) {
 }
 //#endregion
 //#region src/use-readable.ts
-const noop$2 = () => void 0;
+const noop$3 = () => void 0;
 /**
 * Mirrors a core `Readable` into React. A missing readable yields `fallback`, which must be a
 * stable reference (a module constant): `useSyncExternalStore` compares snapshots by identity
 * and loops on a fresh value. On the server the fallback is rendered.
 */
 function useReadable(readable, fallback) {
-	const subscribe = useCallback((onChange) => readable ? readable.subscribe(() => onChange()) : noop$2, [readable]);
+	const subscribe = useCallback((onChange) => readable ? readable.subscribe(() => onChange()) : noop$3, [readable]);
 	const get = useCallback(() => readable ? readable.get() : fallback, [readable, fallback]);
 	const server = useCallback(() => fallback, [fallback]);
 	return useSyncExternalStore(subscribe, get, server);
@@ -87,7 +87,7 @@ function useTool() {
 //#region src/hooks/useToolStyle.ts
 const NO_STYLE = {};
 const NO_PROPS = /* @__PURE__ */ new Set();
-const EMPTY = {};
+const EMPTY$1 = {};
 function useToolStyle(group) {
 	const style = useInkContext("useToolStyle()").toolStyle;
 	const scope = group && style ? style.scoped(group) : void 0;
@@ -98,7 +98,7 @@ function useToolStyle(group) {
 		current,
 		supported,
 		set: (patch, opts) => scope ? scope.set(patch) : style?.set(patch, opts),
-		get: (g) => style?.get(g) ?? EMPTY
+		get: (g) => style?.get(g) ?? EMPTY$1
 	}), [
 		current,
 		supported,
@@ -156,7 +156,7 @@ const CLOSED = {
 	current: -1,
 	scanning: false
 };
-const noop$1 = () => void 0;
+const noop$2 = () => void 0;
 /**
 * The document search for hosts building their own control: the state, and the actions the
 * find bar uses. Search is set up once InkRoot has mounted, so until then (and on the server)
@@ -167,12 +167,13 @@ function useSearch() {
 	const search = useInkContext("useSearch()").search;
 	return {
 		state: useReadable(search?.state, CLOSED),
-		open: search ? (query) => search.open(query) : noop$1,
-		setQuery: search ? (query) => search.setQuery(query) : noop$1,
-		setMatchCase: search ? (on) => search.setMatchCase(on) : noop$1,
-		next: search ? () => search.next() : noop$1,
-		previous: search ? () => search.previous() : noop$1,
-		close: search ? () => search.close() : noop$1
+		open: search ? (query) => search.open(query) : noop$2,
+		setQuery: search ? (query) => search.setQuery(query) : noop$2,
+		setMatchCase: search ? (on) => search.setMatchCase(on) : noop$2,
+		next: search ? () => search.next() : noop$2,
+		previous: search ? () => search.previous() : noop$2,
+		select: search ? (index) => search.select(index) : noop$2,
+		close: search ? () => search.close() : noop$2
 	};
 }
 //#endregion
@@ -209,9 +210,9 @@ function useHistory() {
 }
 //#endregion
 //#region src/hooks/useEmbedded.ts
-const NONE = [];
+const NONE$1 = [];
 function useEmbedded() {
-	const summary = useInkContext("useEmbedded()").document?.embedded ?? NONE;
+	const summary = useInkContext("useEmbedded()").document?.embedded ?? NONE$1;
 	return useMemo(() => ({
 		summary,
 		total: summary.reduce((n, s) => n + s.count, 0),
@@ -277,6 +278,41 @@ function useForm() {
 	]);
 }
 //#endregion
+//#region src/hooks/useRecords.ts
+const NONE = Object.freeze([]);
+/**
+* The records a plugin keeps under `key` (`<plugin>.<name>`), for host components: the live list
+* for the open document, and the handle to read and write them, each write one undo step.
+* Plugins are set up once InkRoot has mounted, so until then (and on the server) `handle` is
+* null and `records` is empty. `T` is the plugin's record type.
+*/
+function useRecords(key) {
+	const { pluginHost } = useInkContext("useRecords()");
+	const handle = pluginHost?.records(key) ?? null;
+	return {
+		records: useReadable(handle?.list, NONE),
+		handle
+	};
+}
+//#endregion
+//#region src/hooks/useRecordSelection.ts
+const noop$1 = () => void 0;
+/**
+* The selected record under `key` (`<plugin>.<name>`): the one selection the marks and every
+* record list over those records share. `select` takes an id, or null to clear; an id that has
+* no mark changes nothing. Until InkRoot has mounted (and on the server) nothing is selected
+* and `select` does nothing.
+*/
+function useRecordSelection(key) {
+	const { pluginHost } = useInkContext("useRecordSelection()");
+	const selection = pluginHost?.selection(key) ?? null;
+	const select = useCallback((id) => selection ? selection.select(id) : noop$1(), [selection]);
+	return {
+		selected: useReadable(selection?.selected, null),
+		select
+	};
+}
+//#endregion
 //#region src/use-latest.ts
 /**
 * A ref that always holds the latest render's value, for callbacks that outlive a render
@@ -349,7 +385,7 @@ function identity(src) {
 	if ("key" in src) return src.key;
 	return src;
 }
-function isDevelopment() {
+function isDevelopment$1() {
 	try {
 		return process.env.NODE_ENV !== "production";
 	} catch {
@@ -357,7 +393,7 @@ function isDevelopment() {
 	}
 }
 function setTestHook(el, doc) {
-	if (el && isDevelopment()) el.__inkDocument = doc;
+	if (el && isDevelopment$1()) el.__inkDocument = doc;
 }
 function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, fields, onFieldsChange, onFormAction, formHighlight, tool, onToolChange, tools: hostTools, plugins: pluginsProp, decorateAnnotation, fonts: fontsProp, signatures: signatureStore, signatureFonts: signatureFontsProp, page, onPageChange, zoom, onZoomChange, history, asChild = false, onReady, onError, onActivate, children, ref, ...rest }) {
 	const rootElRef = useRef(null);
@@ -723,9 +759,11 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 			};
 		});
 		const stopFocus = keepHistoryFocus(rootEl, () => rootEl.querySelector("[data-ink-scroll]"));
+		const stopFileKeys = attachFileKeys(rootEl, () => documentRef.current);
 		return () => {
 			stopKeys();
 			stopFocus();
+			stopFileKeys();
 		};
 	}, [
 		rootEl,
@@ -1502,7 +1540,7 @@ function documentKey(doc) {
 	}
 	return key;
 }
-function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2, loading, empty, error, renderAnnotation, renderPageError, className, ...rest }) {
+function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2, pinchZoom = true, loading, empty, error, renderAnnotation, renderPageError, className, ...rest }) {
 	const ctx = useInkContext("InkViewport");
 	const scroll = useRef(null);
 	const custom = !!renderAnnotation;
@@ -1512,6 +1550,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 		rotation,
 		gap,
 		buffer,
+		pinchZoom,
 		custom
 	});
 	const engine = useRef(null);
@@ -1533,7 +1572,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 	/** The form script's message on show, and how many have been shown. */
 	const [alert, setAlert] = useState(null);
 	useEffect(() => {
-		const { ctx: c, mode: m, rotation: r, gap: g, buffer: b, custom: cu } = latest.current;
+		const { ctx: c, mode: m, rotation: r, gap: g, buffer: b, pinchZoom: pz, custom: cu } = latest.current;
 		const doc = c.document;
 		const el = scroll.current;
 		lastReportedZoom.current = void 0;
@@ -1545,6 +1584,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 		builtWith.current = {
 			gap: g,
 			buffer: b,
+			pinchZoom: pz,
 			custom: cu
 		};
 		c.setOpenedToolIds(toolIdsOf(c.hostTools, c.pluginHost));
@@ -1557,6 +1597,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			rotation: r,
 			gap: g,
 			buffer: b,
+			pinchZoom: pz,
 			tool: c.tool,
 			...c.hostTools ? { tools: c.hostTools } : {},
 			...c.pluginHost ? { plugins: c.pluginHost } : {},
@@ -1655,21 +1696,24 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 	useEffect(() => {
 		const built = builtWith.current;
 		if (!engine.current || !built) return;
-		if (built.gap === gap && built.buffer === buffer && built.custom === custom) return;
+		if (built.gap === gap && built.buffer === buffer && built.pinchZoom === pinchZoom && built.custom === custom) return;
 		buildCount.current += 1;
 		builtWith.current = {
 			gap,
 			buffer,
+			pinchZoom,
 			custom
 		};
 		engine.current.rebuild({
 			gap,
 			buffer,
+			pinchZoom,
 			customAnnotations: custom
 		});
 	}, [
 		gap,
 		buffer,
+		pinchZoom,
 		custom
 	]);
 	useEffect(() => {
@@ -1895,6 +1939,56 @@ function InkUndo({ asChild = false, className, children, disabled, onClick, ...r
 	});
 }
 //#endregion
+//#region src/components/InkDownloadButton.tsx
+/**
+* Saves the open document's file through the browser's download, under its `fileName` or
+* `filename`. Disabled until the document is ready. Today that is the file as it was opened,
+* without this session's annotations.
+*/
+function InkDownloadButton({ asChild = false, filename, className, children, disabled, onClick, ...rest }) {
+	const { document: doc, status } = useInkContext("InkDownloadButton");
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-download", className),
+		"data-ink-download": "",
+		"aria-label": "Download",
+		title: "Download",
+		...rest,
+		disabled: disabled === true || doc === null || status.state !== "ready",
+		onClick: (e) => {
+			onClick?.(e);
+			if (e.defaultPrevented || !doc) return;
+			downloadDocument(doc, filename === void 0 ? {} : { filename }).catch(() => void 0);
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Download })
+	});
+}
+//#endregion
+//#region src/components/InkPrintButton.tsx
+/**
+* Prints the open document's file with the browser's own PDF viewer (on iOS, in a new tab).
+* Disabled until the document is ready. Today that is the file as it was opened, without this
+* session's annotations.
+*/
+function InkPrintButton({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const { document: doc, status } = useInkContext("InkPrintButton");
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-print", className),
+		"data-ink-print": "",
+		"aria-label": "Print",
+		title: "Print",
+		...rest,
+		disabled: disabled === true || doc === null || status.state !== "ready",
+		onClick: (e) => {
+			onClick?.(e);
+			if (e.defaultPrevented || !doc) return;
+			printDocument(doc).catch(() => void 0);
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: Printer })
+	});
+}
+//#endregion
 //#region src/components/InkRedo.tsx
 function InkRedo({ asChild = false, className, children, disabled, onClick, ...rest }) {
 	const { canRedo, redo } = useHistory();
@@ -2034,19 +2128,25 @@ function InkFindBar({ className, ...rest }) {
 		role: "search",
 		hidden: !state.open,
 		children: [
-			/* @__PURE__ */ jsx("input", {
-				ref: field,
-				type: "text",
-				"aria-label": "Find in document",
-				autoComplete: "off",
-				spellCheck: false,
-				onInput: (e) => setQuery(e.currentTarget.value),
-				onKeyDown: (e) => {
-					if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
-					e.preventDefault();
-					if (e.shiftKey) previous();
-					else next();
-				}
+			/* @__PURE__ */ jsxs("div", {
+				className: "ink-input-group",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "ink-input-accessory",
+					children: /* @__PURE__ */ jsx(InkIcon, { icon: Search })
+				}), /* @__PURE__ */ jsx("input", {
+					ref: field,
+					type: "text",
+					"aria-label": "Find in document",
+					autoComplete: "off",
+					spellCheck: false,
+					onInput: (e) => setQuery(e.currentTarget.value),
+					onKeyDown: (e) => {
+						if (e.key !== "Enter" || e.nativeEvent.isComposing) return;
+						e.preventDefault();
+						if (e.shiftKey) previous();
+						else next();
+					}
+				})]
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "ink-find-count",
@@ -2183,7 +2283,7 @@ function InkZoomSelect({ className, ...rest }) {
 		value,
 		onValueChange,
 		children: [/* @__PURE__ */ jsxs(Select.Trigger, {
-			className: cx("ink-zoom-select ink-select-trigger", className),
+			className: cx("ink-select ink-select-trigger ink-zoom-select", className),
 			"data-ink-zoom-select": "",
 			"aria-label": "Zoom",
 			...rest,
@@ -3325,6 +3425,706 @@ function ThreadForm({ editingRoot, locked, deleteLabel, onSubmit, onRemove, onCl
 	});
 }
 //#endregion
-export { InkAnnotation, InkColorMenu, InkCommand, InkFindBar, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPrevPage, InkRedo, InkRoot, InkSearchButton, InkShapeMenu, InkSignatureDialog, InkSignatureMenu, InkTextStyleMenu, InkThreadPopover, InkToolButton, InkToolbar, InkToolbarButton, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useCommand, useDocument, useEmbedded, useForm, useHistory, useInkContext, usePage, useReadable, useSearch, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
+//#region src/dom-attrs.ts
+/**
+* Core's attributes (`rootAttrs()`, `triggerAttrs(id)`, `panelAttrs(id)` and the like) as React
+* props. Core names them as the DOM does; React wants `hidden` as a boolean and `tabindex` as
+* `tabIndex`. `aria-*`, `data-*`, `id`, `role`, `type` and `title` pass through as they are.
+* Every component that spreads core's attributes goes through this, so the mapping lives once.
+*/
+function domAttrs(attrs) {
+	const out = {};
+	for (const [name, value] of Object.entries(attrs)) if (name === "hidden") out.hidden = true;
+	else if (name === "tabindex") out.tabIndex = Number(value);
+	else out[name] = value;
+	return out;
+}
+//#endregion
+//#region src/components/sidebar-context.ts
+const SidebarContextObject = createContext(null);
+/** The sidebar context: throws a readable error outside `InkSidebar`. */
+function useSidebarContext(consumer) {
+	const ctx = useContext(SidebarContextObject);
+	if (!ctx) throw new Error(`[inkbar] ${consumer} must be rendered inside <InkSidebar>.`);
+	return ctx;
+}
+/**
+* The controller's state, re-rendering as it changes. Unlike `useReadable` it reads the live
+* state on the server too: the sidebar works without a document, so its markup is known there.
+*/
+function useSidebarState(controller) {
+	const { state } = controller;
+	const subscribe = useCallback((onChange) => state.subscribe(() => onChange()), [state]);
+	const get = useCallback(() => state.get(), [state]);
+	return useSyncExternalStore(subscribe, get, get);
+}
+//#endregion
+//#region src/components/SidebarTrigger.tsx
+/**
+* A sidebar trigger's content: `createSidebar`'s markup, so the theme styles both alike. The
+* rail shows the icon alone (the trigger's `title` carries the label); tabs and stack headers
+* show the label too. The badge is hidden from assistive technology: the trigger's name has it.
+*/
+function SidebarTrigger({ panel, rail }) {
+	const badge = sidebarBadge(panel.badge);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		panel.icon ? /* @__PURE__ */ jsx(InkIcon, { icon: panel.icon }) : null,
+		!panel.icon || !rail ? /* @__PURE__ */ jsx("span", {
+			className: "ink-sidebar-label",
+			children: panel.label
+		}) : null,
+		/* @__PURE__ */ jsx("span", {
+			className: "ink-sidebar-badge",
+			"aria-hidden": "true",
+			hidden: badge === null,
+			children: badge
+		})
+	] });
+}
+//#endregion
+//#region src/components/InkSidebar.tsx
+/** Sorts the panels by where their elements sit in the DOM. */
+function inDomOrder(entries) {
+	return [...entries].sort((a, b) => {
+		const x = a.element();
+		const y = b.element();
+		if (!x || !y || x === y) return 0;
+		return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+	});
+}
+/**
+* The panels' registry around the controller. Before the first mount, panels preregister as
+* they render, in render order, so the server and the browser's first render show the panel
+* core opens. From then on they register from layout effects, ordered by DOM position. A
+* removal is applied a microtask later: a panel remounted in the same commit (a new `key`) is
+* back by then, so its open state does not fall back. While the sidebar itself is unmounted
+* (on its way out, or StrictMode and `<Activity>` replaying effects) nothing is applied.
+*/
+function createRegistry(controller) {
+	let mounted = false;
+	let started = false;
+	const early = [];
+	let entries = [];
+	const flush = () => {
+		if (!mounted) return;
+		controller.update({ panels: inDomOrder(entries).map((e) => e.info) });
+	};
+	const context = {
+		controller,
+		preregister(info) {
+			if (started) return;
+			const at = early.findIndex((p) => p.id === info.id);
+			if (at < 0) early.push(info);
+			else early[at] = info;
+			controller.update({ panels: [...early] });
+		},
+		register(entry) {
+			entries = [...entries, entry];
+			flush();
+			return () => {
+				entries = entries.filter((e) => e !== entry);
+				queueMicrotask(flush);
+			};
+		},
+		changed: flush
+	};
+	/** Binds the triggers and ends the controller's pending state; returns the unbind. */
+	function mount(el) {
+		mounted = true;
+		started = true;
+		const unbind = controller.bindTriggers(el);
+		controller.update({
+			panels: inDomOrder(entries).map((e) => e.info),
+			pending: false
+		});
+		return () => {
+			mounted = false;
+			unbind();
+		};
+	}
+	return {
+		context,
+		mount
+	};
+}
+/**
+* A sidebar of `InkPanel`s: `createSidebar`'s markup on core's sidebar controller, which holds
+* the open state, the ARIA, the keys and the clicks. Rail and tabs render their triggers here;
+* in a stack each panel renders its own header. Panels take their place in DOM order, so a
+* panel rendered later slots in where it stands. A closed panel stays mounted and hidden, and
+* the panels' content stays in place across layouts, so its state survives switching.
+*
+* `open` with `onOpenChange` controls it; `defaultOpen` starts it uncontrolled; with neither,
+* the first panel starts open. It needs no document, so it works outside `InkRoot`. The server
+* renders the root, the panels (the open one shown) and the stack headers; rail and tab
+* buttons follow once mounted.
+*/
+function InkSidebar({ side = "left", layout = "rail", visible = true, open, defaultOpen, onOpenChange, className, children, ...rest }) {
+	const controlled = open !== void 0;
+	const [inner, setInner] = useState(defaultOpen);
+	const value = controlled ? open : inner;
+	const latest = useLatest({
+		controlled,
+		onOpenChange
+	});
+	const idPrefix = useId();
+	const [{ context, mount }] = useState(() => createRegistry(createSidebarController({
+		layout,
+		side,
+		visible,
+		panels: [],
+		...value !== void 0 && { open: value },
+		pending: true,
+		idPrefix,
+		onOpenChange: (next) => {
+			if (!latest.current.controlled) setInner(next);
+			latest.current.onOpenChange?.(next);
+		}
+	})));
+	const { controller } = context;
+	const state = useSidebarState(controller);
+	useLayoutEffect(() => {
+		controller.update({
+			layout,
+			side,
+			visible,
+			...value !== void 0 && { open: value }
+		});
+	}, [
+		controller,
+		layout,
+		side,
+		visible,
+		value
+	]);
+	const root = useRef(null);
+	useLayoutEffect(() => mount(root.current), [mount]);
+	const rail = state.layout === "rail";
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: root,
+		className: cx("ink-sidebar", className),
+		...domAttrs(controller.rootAttrs()),
+		children: [state.layout !== "stack" ? /* @__PURE__ */ jsx("div", {
+			className: rail ? "ink-sidebar-rail" : "ink-sidebar-tabs",
+			...domAttrs(controller.tablistAttrs()),
+			children: state.panels.map((panel) => /* @__PURE__ */ jsx("button", {
+				...domAttrs(controller.triggerAttrs(panel.id)),
+				children: /* @__PURE__ */ jsx(SidebarTrigger, {
+					panel,
+					rail
+				})
+			}, panel.id))
+		}) : null, /* @__PURE__ */ jsx("div", {
+			className: state.layout !== "stack" ? "ink-sidebar-panels" : void 0,
+			children: /* @__PURE__ */ jsx(SidebarContextObject.Provider, {
+				value: context,
+				children
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/InkPanel.tsx
+/**
+* One panel of an `InkSidebar`, holding `children` as its content. Closed, the panel stays
+* mounted and hidden. In a stack it renders its own header above its content.
+*/
+function InkPanel({ id, label, icon, badge, children }) {
+	const ctx = useSidebarContext("InkPanel");
+	const { controller } = ctx;
+	const info = useMemo(() => ({
+		id,
+		label,
+		...icon !== void 0 && { icon },
+		...badge !== void 0 && { badge }
+	}), [
+		id,
+		label,
+		icon,
+		badge
+	]);
+	ctx.preregister(info);
+	const state = useSidebarState(controller);
+	const wrapper = useRef(null);
+	const [entry] = useState(() => ({
+		info,
+		element: () => wrapper.current
+	}));
+	useLayoutEffect(() => ctx.register(entry), [ctx, entry]);
+	useLayoutEffect(() => {
+		if (entry.info === info) return;
+		entry.info = info;
+		ctx.changed();
+	}, [
+		ctx,
+		entry,
+		info
+	]);
+	const stack = state.layout === "stack";
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapper,
+		className: cx("ink-sidebar-slot", stack && "ink-sidebar-section"),
+		children: [stack ? /* @__PURE__ */ jsx("button", {
+			className: "ink-sidebar-header",
+			...domAttrs(controller.triggerAttrs(id)),
+			children: /* @__PURE__ */ jsx(SidebarTrigger, {
+				panel: info,
+				rail: false
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: "ink-sidebar-panel",
+			...domAttrs(controller.panelAttrs(id)),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "ink-sidebar-panel-title",
+				"aria-hidden": "true",
+				children: label
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ink-sidebar-panel-body",
+				children
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/to-readable.ts
+/**
+* A core `Readable` that follows a React value, for the core controllers and painters that
+* components build on. The same readable for the component's life; it takes each new value in
+* a layout effect, so declare it before the effects that hand it to core.
+*/
+function useToReadable(value) {
+	const [store] = useState(() => writable(value));
+	useLayoutEffect(() => {
+		store.set(value);
+	}, [store, value]);
+	const [view] = useState(() => readonly(store));
+	return view;
+}
+//#endregion
+//#region src/components/InkThumbnail.tsx
+/**
+* One page as a static image, with its live annotations and plugin marks: core's thumbnail
+* painter on this element, which sizes it, names it ("Page N" unless `label` says otherwise)
+* and draws it once it nears the visible area. It is not focusable and does nothing on click:
+* wrap it in the control you need. Inside `InkRoot`; it renders empty on the server.
+*/
+function InkThumbnail({ page, width, height, annotations = true, marks = true, label, className, ...rest }) {
+	const ctx = useInkContext("InkThumbnail");
+	const document = useToReadable(ctx.document);
+	const pluginHost = useToReadable(ctx.pluginHost);
+	const options = useMemo(() => ({
+		page,
+		width,
+		height,
+		annotations,
+		marks,
+		label
+	}), [
+		page,
+		width,
+		height,
+		annotations,
+		marks,
+		label
+	]);
+	const latest = useLatest(options);
+	const el = useRef(null);
+	const painter = useRef(null);
+	useLayoutEffect(() => {
+		painter.current?.update(options);
+	}, [options]);
+	useLayoutEffect(() => {
+		const p = createThumbnailPainter(el.current, {
+			document,
+			pluginHost
+		}, latest.current);
+		painter.current = p;
+		return () => {
+			p.destroy();
+			painter.current = null;
+		};
+	}, [
+		document,
+		pluginHost,
+		latest
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		ref: el,
+		className: cx("ink-thumbnail", className)
+	});
+}
+//#endregion
+//#region src/components/InkThumbnails.tsx
+/** Until the list mounts, and on the server: nothing listed. */
+const EMPTY = {
+	pages: [],
+	current: -1,
+	window: {
+		start: 0,
+		end: 0
+	},
+	offsets: [0],
+	width: THUMBNAIL_WIDTH
+};
+/**
+* The pages as a list of thumbnails: `createThumbnails`' markup on core's thumbnails
+* controller, which holds the current page, the keys, the clicks, the Tab stop and the window.
+* Only the items near the visible part are mounted, each placed at its offset over a spacer of
+* the full height, and each holds an `InkThumbnail`. An item is a button that scrolls the
+* viewport to its page; the current page's has `aria-current="page"`. Inside `InkRoot`; it
+* renders empty on the server.
+*/
+function InkThumbnails({ pages, width, annotations = true, marks = true, renderItem, className, ...rest }) {
+	const ctx = useInkContext("InkThumbnails");
+	const document = useToReadable(ctx.document);
+	const pluginHost = useToReadable(ctx.pluginHost);
+	const viewport = useToReadable(ctx.viewport);
+	const options = useMemo(() => ({
+		pages,
+		width,
+		annotations,
+		marks
+	}), [
+		pages,
+		width,
+		annotations,
+		marks
+	]);
+	const latest = useLatest(options);
+	const scroller = useRef(null);
+	const [controller, setController] = useState(null);
+	useLayoutEffect(() => {
+		controller?.update(options);
+	}, [controller, options]);
+	useLayoutEffect(() => {
+		const c = createThumbnailsController({
+			document,
+			pluginHost,
+			viewport
+		}, latest.current);
+		setController(c);
+		c.attach(scroller.current);
+		return () => {
+			c.destroy();
+			setController(null);
+		};
+	}, [
+		document,
+		pluginHost,
+		viewport,
+		latest
+	]);
+	const state = useReadable(controller?.state, EMPTY);
+	const { window: win, offsets } = state;
+	const items = state.pages.slice(win.start, win.end).map((page, k) => {
+		const top = offsets[win.start + k];
+		const bottom = offsets[win.start + k + 1];
+		const attrs = controller?.itemAttrs(win.start + k) ?? {};
+		return {
+			page,
+			current: page === state.current,
+			top,
+			height: bottom - top,
+			attrs
+		};
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: scroller,
+		className: cx("ink-thumbnails", className),
+		"data-ink-thumbnails": "",
+		role: "list",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "ink-thumbnails-spacer",
+			"aria-hidden": "true",
+			style: { height: `${offsets.at(-1) ?? 0}px` }
+		}), items.map((item) => /* @__PURE__ */ jsx("div", {
+			className: "ink-thumbnails-entry",
+			...domAttrs(item.attrs),
+			style: {
+				top: `${item.top}px`,
+				height: `${item.height}px`
+			},
+			children: /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "ink-thumbnails-item",
+				"data-ink-thumbnail-item": item.page,
+				"aria-current": item.current ? "page" : void 0,
+				children: [
+					/* @__PURE__ */ jsx(InkThumbnail, {
+						page: item.page,
+						width: state.width,
+						annotations,
+						marks
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "ink-thumbnails-label",
+						"aria-hidden": "true",
+						children: item.page + 1
+					}),
+					renderItem?.({
+						page: item.page,
+						current: item.current
+					})
+				]
+			})
+		}, item.page))]
+	});
+}
+//#endregion
+//#region src/components/RecordCards.tsx
+const NO_ROWS = Object.freeze([]);
+const actionButtons = (row) => [...row.querySelectorAll(".ink-card-actions > button")];
+/**
+* A record list's markup on core's record list controller, shared by `InkRecordList` and
+* `InkSearchResults`: `createRecordList`'s `div.ink-records` holding `ul.ink-record-list` with
+* one `li.ink-record` card per row, the empty text and a polite live region. The controller
+* holds the rows, the count and the announcement, and handles the clicks, keys, Tab stop,
+* focus and scrolling. Empty, with no empty text, until there is a source.
+*/
+function RecordCards({ source, emptyShown = true, empty, onCountChange, className, ...rest }) {
+	const root = useRef(null);
+	const [controller, setController] = useState(null);
+	const latest = useLatest(onCountChange);
+	/** The count last reported, across sources and StrictMode's replayed effects. */
+	const reported = useRef(null);
+	const held = useRef(null);
+	useLayoutEffect(() => {
+		const el = root.current;
+		if (!source || !el) return;
+		const c = createRecordListController(source);
+		const report = (count) => {
+			if (count === reported.current) return;
+			reported.current = count;
+			latest.current?.(count);
+		};
+		/**
+		* Before the rows re-render under a focused action whose button goes (its card lost that
+		* action), note where it was; the layout effect below focuses the same place in the card,
+		* else the row. A row that goes is the controller's to re-home.
+		*/
+		const holdActionFocus = () => {
+			const active = el.ownerDocument.activeElement;
+			if (!(active instanceof HTMLButtonElement) || !el.contains(active)) return;
+			const row = active.closest("[data-ink-record]");
+			const id = row?.dataset.inkRecord;
+			if (!row || id === void 0) return;
+			held.current = {
+				button: active,
+				id,
+				index: actionButtons(row).indexOf(active)
+			};
+		};
+		setController(c);
+		report(c.count.get());
+		const stops = [c.rows.subscribe(holdActionFocus), c.count.subscribe(report)];
+		const detach = c.attach(el);
+		return () => {
+			for (const stop of stops) stop();
+			detach();
+			c.destroy();
+			setController(null);
+		};
+	}, [source, latest]);
+	const rows = useReadable(controller?.rows, NO_ROWS);
+	const announcement = useReadable(controller?.announcement, "");
+	const showEmpty = controller !== null && rows.length === 0 && emptyShown;
+	useLayoutEffect(() => {
+		const focus = held.current;
+		const el = root.current;
+		held.current = null;
+		if (!focus || !el || focus.button.isConnected) return;
+		const row = [...el.querySelectorAll("[data-ink-record]")].find((r) => r.dataset.inkRecord === focus.id);
+		if (row) (actionButtons(row)[focus.index] ?? row).focus({ preventScroll: true });
+	}, [rows]);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: root,
+		className: cx("ink-records", className),
+		"data-ink-records": "",
+		tabIndex: -1,
+		children: [
+			/* @__PURE__ */ jsx("ul", {
+				className: "ink-record-list",
+				role: "list",
+				hidden: rows.length === 0,
+				children: rows.map(({ item, card, selected }) => /* @__PURE__ */ jsx("li", {
+					className: "ink-record",
+					"data-ink-record": item.id,
+					"aria-current": selected ? "true" : void 0,
+					"data-selected": selected ? "" : void 0,
+					children: /* @__PURE__ */ jsx("div", {
+						className: cx("ink-card", card?.className),
+						children: card ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "ink-card-title",
+								children: card.title
+							}),
+							card.meta !== void 0 ? /* @__PURE__ */ jsxs("p", {
+								className: "ink-card-meta",
+								children: [card.swatch !== void 0 ? /* @__PURE__ */ jsx("span", {
+									className: "ink-card-swatch",
+									style: { background: card.swatch }
+								}) : null, card.meta]
+							}) : null,
+							card.body !== void 0 ? /* @__PURE__ */ jsx("p", {
+								className: "ink-card-body",
+								children: card.body
+							}) : null,
+							card.excerpt !== void 0 ? /* @__PURE__ */ jsxs("p", {
+								className: "ink-card-excerpt",
+								children: [
+									card.excerpt.before,
+									/* @__PURE__ */ jsx("mark", { children: card.excerpt.match }),
+									card.excerpt.after
+								]
+							}) : null,
+							/* @__PURE__ */ jsx("div", {
+								className: "ink-card-actions",
+								children: Object.keys(card.actions).map((label) => /* @__PURE__ */ jsx("button", {
+									type: "button",
+									onClick: () => controller?.act(item.id, label),
+									children: label
+								}, label))
+							})
+						] }) : null
+					})
+				}, item.id))
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "ink-record-list-empty",
+				hidden: !showEmpty,
+				children: empty === void 0 ? "Nothing here yet." : empty
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ink-visually-hidden",
+				"aria-live": "polite",
+				"data-ink-record-status": "",
+				children: announcement
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/InkRecordList.tsx
+function isDevelopment() {
+	try {
+		return process.env.NODE_ENV !== "production";
+	} catch {
+		return false;
+	}
+}
+/**
+* The records a plugin keeps under `records` (`<plugin>.<name>`) as a list of cards, the same
+* cards their marks open, with the same actions: `createRecordList` on core's record list
+* controller. The list, the marks and `useRecordSelection` share one selection. `card`, `where`
+* and `sort` replace the marks' card, filter and reading order; a new function rebuilds the
+* list, so keep them stable (`useCallback`, or defined outside the component).
+* `onCountChange` gets the number listed whenever it changes; `empty` replaces "Nothing here
+* yet.". It fills its parent's height. Inside `InkRoot`; it renders empty on the server.
+*
+* In place of `records`, `source` takes a host's own `RecordListSource` and lists it with the
+* same controller and cards. Give one of the two: with both, `source` wins and a development
+* build warns.
+*/
+function InkRecordList({ records, source, card, where, sort, onCountChange, empty, ...rest }) {
+	const ctx = useInkContext("InkRecordList");
+	const viewport = useToReadable(ctx.viewport);
+	const { pluginHost } = ctx;
+	const both = records !== void 0 && source !== void 0;
+	useEffect(() => {
+		if (both && isDevelopment()) console.warn("[inkbar] InkRecordList takes `records` or `source`, not both: it lists `source`.");
+	}, [both]);
+	const listed = useMemo(() => {
+		if (source) return source;
+		if (!pluginHost || records === void 0) return null;
+		const opts = {};
+		if (card) opts.card = card;
+		if (where) opts.where = where;
+		if (sort) opts.sort = sort;
+		return recordsSource({
+			pluginHost,
+			viewport
+		}, records, opts);
+	}, [
+		source,
+		pluginHost,
+		records,
+		card,
+		where,
+		sort,
+		viewport
+	]);
+	return /* @__PURE__ */ jsx(RecordCards, {
+		...rest,
+		source: listed,
+		onCountChange,
+		empty
+	});
+}
+//#endregion
+//#region src/components/InkSearchResults.tsx
+/**
+* The search hits as a list of cards, for a sidebar panel: `createSearchResults` on core's
+* record list controller over the root's search. One card per hit, with its page and the text
+* around it. Choosing a card makes its hit current, as the find bar's next and previous do, and
+* the current hit is the selected card. Above the cards, a query field (`field={false}`
+* leaves it out when a find bar is on the page); under them, the find bar's match count.
+* Field and find bar share the search state, so they never disagree. It fills its parent's
+* height. Inside `InkRoot`; it renders empty on the server.
+*/
+function InkSearchResults({ field = true, className, ...rest }) {
+	const ctx = useInkContext("InkSearchResults");
+	const search = useSearch();
+	const { state } = search;
+	const source = useMemo(() => ctx.search ? searchSource(ctx.search) : null, [ctx.search]);
+	const input = useRef(null);
+	useLayoutEffect(() => {
+		const el = input.current;
+		if (el && el.value !== state.query) el.value = state.query;
+	}, [state.query, field]);
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		className: cx("ink-search-results", className),
+		"data-ink-search-results": "",
+		children: [
+			field ? /* @__PURE__ */ jsx("div", {
+				className: "ink-search-results-bar",
+				role: "search",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "ink-input-group",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "ink-input-accessory",
+						children: /* @__PURE__ */ jsx(InkIcon, { icon: Search })
+					}), /* @__PURE__ */ jsx("input", {
+						ref: input,
+						type: "text",
+						"aria-label": "Find in document",
+						placeholder: "Search for a word or phrase",
+						autoComplete: "off",
+						spellCheck: false,
+						defaultValue: state.query,
+						onInput: (e) => search.setQuery(e.currentTarget.value),
+						onKeyDown: (e) => handleResultsFieldKey(e.nativeEvent, search)
+					})]
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(RecordCards, {
+				source,
+				emptyShown: isBlankQuery(state.query),
+				empty: "Search to list every match."
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ink-search-results-count",
+				"data-ink-search-results-count": "",
+				children: findCountText(state)
+			})
+		]
+	});
+}
+//#endregion
+export { InkAnnotation, InkColorMenu, InkCommand, InkDownloadButton, InkFindBar, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkPage, InkPageCount, InkPageInput, InkPanel, InkPrevPage, InkPrintButton, InkRecordList, InkRedo, InkRoot, InkSearchButton, InkSearchResults, InkShapeMenu, InkSidebar, InkSignatureDialog, InkSignatureMenu, InkTextStyleMenu, InkThreadPopover, InkThumbnail, InkThumbnails, InkToolButton, InkToolbar, InkToolbarButton, InkToolbarSeparator, InkUndo, InkViewport, InkZoomIn, InkZoomOut, InkZoomSelect, useAnnotations, useCommand, useDocument, useEmbedded, useForm, useHistory, useInkContext, usePage, useReadable, useRecordSelection, useRecords, useSearch, useSelection, useTool, useToolOptions, useToolStyle, useZoom };
 
 //# sourceMappingURL=index.mjs.map