@inkbar/react 0.10.0 → 0.12.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, 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 { InkError, createMemoryStorage, createSignatureLibrary, createSnapshotHistory, createStorageSignatureStore, 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, THUMBNAIL_WIDTH, TOOL_LABELS, ZOOM_LEVELS, attachFileKeys, attachHistoryKeys, colorMenuModel, createFocusReturn, createOutlineController, 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, outlineTreeAttrs, 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, Download, ICON_ATTRIBUTES, Italic, Minus, Plus, Printer, Redo2, Search, Signature, SquareDashedMousePointer, TextCursor, Trash2, Underline, Undo2, X, ZoomIn, ZoomOut } from "@inkbar/icons";
+import { ALargeSmall, AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowLeft, ArrowRight, 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);
 /**
@@ -395,7 +395,7 @@ function isDevelopment$1() {
 function setTestHook(el, 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 }) {
+function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsChange, onChange, fields, onFieldsChange, onAction, onFormAction, formHighlight, tool, onToolChange, tools: hostTools, plugins: pluginsProp, decorateAnnotation, fonts: fontsProp, storage: storageProp, 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) => {
@@ -427,6 +427,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		controlled: controlledProp,
 		fields,
 		onFieldsChange,
+		onAction,
 		onFormAction,
 		history,
 		historyEnabled,
@@ -445,7 +446,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		tools
 	});
 	/**
-	* Hands `e` to `onError` one microtask later, as `onFieldsChange` and `onFormAction` are: a
+	* Hands `e` to `onError` one microtask later, as `onFieldsChange` and `onAction` are: a
 	* script or a press reports from inside its own work. Dropped once `doc` is no longer open.
 	*/
 	const reportErrorFor = useCallback((doc, e) => {
@@ -492,6 +493,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 			react: (fn) => active()?.react(fn) ?? noop
 		};
 	}, [snapshotHistory]);
+	const [storage] = useState(() => storageProp ?? createMemoryStorage());
 	const hostRef = useRef(null);
 	const [pluginHost, setPluginHost] = useState(null);
 	const [search, setSearch] = useState(null);
@@ -514,7 +516,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 				root: readonly(plugins.root),
 				decorate: () => latest.current.decorateAnnotation,
 				viewport: () => viewportRef.current,
-				search: viewerSearchOf(search)
+				search: viewerSearchOf(search),
+				storage
 			});
 			hostRef.current = {
 				host,
@@ -701,16 +704,20 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	]);
 	const reportZoom = useCallback((z) => latest.current.onZoomChange?.(z), [latest]);
 	const reportPage = useCallback((p) => latest.current.onPageChange?.(p), [latest]);
-	const reportFormAction = useCallback((a) => {
+	const reportAction = useCallback((a) => {
 		const doc = documentRef.current;
 		queueMicrotask(() => {
 			if (documentRef.current !== doc) return;
-			flushSync(() => latest.current.onFormAction?.(a));
+			flushSync(() => {
+				const { onAction, onFormAction } = latest.current;
+				(onAction ?? onFormAction)?.(a);
+			});
 		});
 	}, [latest]);
 	const reportError = useCallback((e) => {
 		if (documentRef.current) reportErrorFor(documentRef.current, e);
 	}, [reportErrorFor]);
+	const [navigation, setNavigation] = useState(null);
 	const setViewport = useCallback((vp, tc) => {
 		viewportRef.current = vp;
 		setViewportState(vp);
@@ -799,7 +806,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 	]);
 	const fonts = useMemo(() => fontsProp ?? FONT_FAMILIES, [fontsProp]);
 	const signatureFonts = useMemo(() => signatureFontsProp ?? SIGNATURE_FONTS, [signatureFontsProp]);
-	const signatures = useMemo(() => createSignatureLibrary(signatureStore ?? createMemorySignatureStore()), [signatureStore]);
+	const [storageSignatures] = useState(() => createStorageSignatureStore(storage));
+	const signatures = useMemo(() => createSignatureLibrary(signatureStore ?? storageSignatures), [signatureStore, storageSignatures]);
 	useEffect(() => {
 		signatures.refresh();
 	}, [signatures]);
@@ -829,6 +837,8 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		selection,
 		viewport,
 		tools,
+		navigation,
+		setNavigation,
 		tool: internalTool,
 		setTool,
 		hostTools,
@@ -838,6 +848,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		onDecorateAnnotationChange,
 		fonts,
 		toolOptions,
+		storage,
 		signatures,
 		signatureFonts,
 		toolStyle: styleTracker?.toolStyle ?? null,
@@ -854,7 +865,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		rootEl,
 		setViewport,
 		formHighlight,
-		reportFormAction,
+		reportAction,
 		reportError
 	}), [
 		assets,
@@ -864,6 +875,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		selection,
 		viewport,
 		tools,
+		navigation,
 		internalTool,
 		setTool,
 		hostTools,
@@ -872,6 +884,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		onDecorateAnnotationChange,
 		fonts,
 		toolOptions,
+		storage,
 		signatures,
 		signatureFonts,
 		styleTracker,
@@ -888,7 +901,7 @@ function InkRoot({ src, assets, password, defaults, annotations, onAnnotationsCh
 		rootEl,
 		setViewport,
 		formHighlight,
-		reportFormAction,
+		reportAction,
 		reportError
 	]);
 	useEffect(() => {
@@ -1540,7 +1553,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;
@@ -1550,6 +1563,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 		rotation,
 		gap,
 		buffer,
+		pinchZoom,
 		custom
 	});
 	const engine = useRef(null);
@@ -1571,7 +1585,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;
@@ -1583,6 +1597,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));
@@ -1595,6 +1610,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 } : {},
@@ -1608,7 +1624,7 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			customAnnotations: cu,
 			...c.formHighlight === void 0 ? {} : { formHighlight: c.formHighlight },
 			onSignField: (req) => setSignRequest((open) => open?.widget === req.widget ? null : req),
-			onFormAction: (a) => latest.current.ctx.reportFormAction(a),
+			onAction: (a) => latest.current.ctx.reportAction(a),
 			onFormAlert: (message) => setAlert((prev) => ({
 				message,
 				shown: (prev?.shown ?? 0) + 1
@@ -1662,12 +1678,14 @@ function InkViewport({ mode = "continuous", rotation = 0, gap = 16, buffer = 2,
 			} : p))
 		});
 		engine.current = e;
+		c.setNavigation(e.navigation);
 		return () => {
 			for (const stop of stops) stop();
 			e.destroy();
 			engine.current = null;
 			builtWith.current = null;
 			c.setViewport(null, null);
+			c.setNavigation(null);
 			c.setOpenedToolIds(null);
 			setPages((prev) => prev.length === 0 ? prev : []);
 			setSignRequest(null);
@@ -1693,21 +1711,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(() => {
@@ -2409,6 +2430,182 @@ function InkNextPage({ asChild = false, className, children, disabled, onClick,
 	});
 }
 //#endregion
+//#region src/components/InkBack.tsx
+/** Returns to where the view was before the last jump; disabled while there is nowhere to go. */
+function InkBack({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const ctx = useInkContext("InkBack");
+	const canGoBack = useReadable(ctx.navigation?.canGoBack, false);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-back", className),
+		"data-ink-back": "",
+		"aria-label": "Back",
+		title: "Back",
+		disabled: disabled === true || !canGoBack,
+		...rest,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) ctx.navigation?.back();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ArrowLeft })
+	});
+}
+//#endregion
+//#region src/components/InkForward.tsx
+/** Goes forward again after Back; disabled until Back is used. */
+function InkForward({ asChild = false, className, children, disabled, onClick, ...rest }) {
+	const ctx = useInkContext("InkForward");
+	const canGoForward = useReadable(ctx.navigation?.canGoForward, false);
+	return /* @__PURE__ */ jsx(Toolbar.Button, {
+		asChild,
+		className: cx("ink-forward", className),
+		"data-ink-forward": "",
+		"aria-label": "Forward",
+		title: "Forward",
+		disabled: disabled === true || !canGoForward,
+		...rest,
+		onClick: (e) => {
+			onClick?.(e);
+			if (!e.defaultPrevented) ctx.navigation?.forward();
+		},
+		children: children ?? /* @__PURE__ */ jsx(InkIcon, { icon: ArrowRight })
+	});
+}
+//#endregion
+//#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/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/InkOutline.tsx
+const NO_ITEMS = [];
+const NO_EXPANDED = /* @__PURE__ */ new Set();
+/**
+* The open document's outline as a tree: `createOutline`'s markup on core's outline
+* controller, which holds what is expanded, the Tab stop, the keys, the current item and
+* Back's history. Clicking an item, or Enter on it, follows it; its chevron expands and
+* collapses it. It fills its parent's height and scrolls, and keeps the item the reader has
+* reached in view. `renderItem` replaces an item's title. Inside `InkRoot`; the tree is empty
+* on the server.
+*/
+function InkOutline({ emptyText = "This document has no outline", renderItem, className, ...rest }) {
+	const ctx = useInkContext("InkOutline");
+	const document = useToReadable(ctx.document);
+	const viewport = useToReadable(ctx.viewport);
+	const navigation = useToReadable(ctx.navigation);
+	const root = useRef(null);
+	const [controller, setController] = useState(null);
+	useLayoutEffect(() => {
+		const c = createOutlineController({
+			document,
+			viewport,
+			navigation
+		});
+		setController(c);
+		const unbind = c.bindScroll(root.current);
+		return () => {
+			unbind();
+			c.destroy();
+			setController(null);
+		};
+	}, [
+		document,
+		viewport,
+		navigation
+	]);
+	const items = useReadable(controller?.items, NO_ITEMS);
+	const loading = useReadable(controller?.loading, false);
+	const expanded = useReadable(controller?.expanded, NO_EXPANDED);
+	const current = useReadable(controller?.current, null);
+	useReadable(controller?.focused, null);
+	const level = (id) => id.split(".").length - 1;
+	const renderLevel = (list) => list.map((item) => {
+		const c = controller;
+		const open = expanded.has(item.id);
+		const attrs = {};
+		for (const [name, value] of Object.entries(c.itemAttrs(item.id))) if (value !== void 0) attrs[name] = value;
+		return /* @__PURE__ */ jsxs("li", {
+			className: "ink-outline-item",
+			"data-ink-outline-item": item.id,
+			"data-bold": item.bold ? "" : void 0,
+			"data-italic": item.italic ? "" : void 0,
+			style: { "--ink-outline-level": level(item.id) },
+			...domAttrs(attrs),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "ink-outline-row",
+				...c.rowAttrs(item.id),
+				onClick: () => c.activate(item.id),
+				children: [item.children.length > 0 ? /* @__PURE__ */ jsx("span", {
+					className: "ink-outline-toggle",
+					"aria-hidden": "true",
+					onClick: (e) => {
+						e.stopPropagation();
+						c.toggle(item.id);
+					},
+					children: /* @__PURE__ */ jsx(InkIcon, { icon: ChevronRight })
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "ink-outline-spacer",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "ink-outline-title",
+					...c.titleAttrs(item.id),
+					children: renderItem ? renderItem(item, {
+						current: current === item.id,
+						expanded: open
+					}) : item.title
+				})]
+			}), item.children.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				className: "ink-outline-group",
+				role: "group",
+				hidden: !open,
+				children: renderLevel(item.children)
+			}) : null]
+		}, item.id);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		ref: root,
+		className: cx("ink-outline", className),
+		"data-ink-outline": "",
+		"aria-busy": loading ? "true" : void 0,
+		children: [/* @__PURE__ */ jsx("ul", {
+			className: "ink-outline-tree",
+			...outlineTreeAttrs(),
+			hidden: items.length === 0,
+			onKeyDown: (e) => controller?.onKeydown(e.nativeEvent),
+			children: controller ? renderLevel(items) : null
+		}), controller && !loading && items.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "ink-outline-empty",
+			children: emptyText
+		}) : null]
+	});
+}
+//#endregion
 //#region src/components/InkColorMenu.tsx
 function InkColorMenu({ property, label, className, children, standalone = false, group, fallback, disabled, ...rest }) {
 	const Wrap = standalone ? Fragment : Toolbar.Button;
@@ -3419,21 +3616,6 @@ function ThreadForm({ editingRoot, locked, deleteLabel, onSubmit, onRemove, onCl
 	});
 }
 //#endregion
-//#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`. */
@@ -3477,6 +3659,16 @@ function SidebarTrigger({ panel, rail }) {
 }
 //#endregion
 //#region src/components/InkSidebar.tsx
+/** The width props the host gave; an undefined one keeps the controller's. */
+function widthOptions(props) {
+	const { defaultWidth, minWidth, maxWidth, width } = props;
+	return {
+		...defaultWidth !== void 0 && { defaultWidth },
+		...minWidth !== void 0 && { minWidth },
+		...maxWidth !== void 0 && { maxWidth },
+		...width !== void 0 && { width }
+	};
+}
 /** Sorts the panels by where their elements sit in the DOM. */
 function inDomOrder(entries) {
 	return [...entries].sort((a, b) => {
@@ -3550,17 +3742,30 @@ function createRegistry(controller) {
 *
 * `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.
+* renders the root, the panels (the open one shown), the stack headers and the resize handle;
+* rail and tab buttons follow once mounted.
+*
+* The handle on the inner edge resizes the sidebar. Its width is saved in `storage`, under
+* `sidebar.<name>.width`; inside `InkRoot` the root's storage is the default. `width` with
+* `onWidthChange` makes the width the host's: drags and keys then only report, and storage is
+* not read or written.
 */
-function InkSidebar({ side = "left", layout = "rail", visible = true, open, defaultOpen, onOpenChange, className, children, ...rest }) {
+function InkSidebar({ side = "left", layout = "rail", visible = true, open, defaultOpen, onOpenChange, storage: storageProp, name, defaultWidth, minWidth, maxWidth, width, onWidthChange, className, style, children, ...rest }) {
 	const controlled = open !== void 0;
 	const [inner, setInner] = useState(defaultOpen);
 	const value = controlled ? open : inner;
 	const latest = useLatest({
 		controlled,
-		onOpenChange
+		onOpenChange,
+		onWidthChange
+	});
+	const widths = widthOptions({
+		defaultWidth,
+		minWidth,
+		maxWidth,
+		width
 	});
+	const inherited = useContext(InkContextObject)?.storage;
 	const idPrefix = useId();
 	const [{ context, mount }] = useState(() => createRegistry(createSidebarController({
 		layout,
@@ -3570,6 +3775,10 @@ function InkSidebar({ side = "left", layout = "rail", visible = true, open, defa
 		...value !== void 0 && { open: value },
 		pending: true,
 		idPrefix,
+		...(storageProp ?? inherited) && { storage: storageProp ?? inherited },
+		...name !== void 0 && { name },
+		...widths,
+		onWidthChange: (next) => latest.current.onWidthChange?.(next),
 		onOpenChange: (next) => {
 			if (!latest.current.controlled) setInner(next);
 			latest.current.onOpenChange?.(next);
@@ -3582,40 +3791,72 @@ function InkSidebar({ side = "left", layout = "rail", visible = true, open, defa
 			layout,
 			side,
 			visible,
-			...value !== void 0 && { open: value }
+			...value !== void 0 && { open: value },
+			...widths
 		});
 	}, [
 		controller,
 		layout,
 		side,
 		visible,
-		value
+		value,
+		defaultWidth,
+		minWidth,
+		maxWidth,
+		width
 	]);
 	const root = useRef(null);
 	useLayoutEffect(() => mount(root.current), [mount]);
+	const handle = useRef(null);
+	const [mounted, setMounted] = useState(false);
+	useLayoutEffect(() => {
+		setMounted(true);
+		const el = handle.current;
+		const unbind = controller.bindHandle(el);
+		for (const [prop, value] of Object.entries(controller.rootStyle())) root.current.style.setProperty(prop, value);
+		for (const [attr, value] of Object.entries(controller.handleAttrs())) if (attr.startsWith("aria-value")) el.setAttribute(attr, value);
+		return unbind;
+	}, [controller]);
+	const handleAttrs = controller.handleAttrs();
+	if (!mounted) delete handleAttrs.hidden;
 	const rail = state.layout === "rail";
 	return /* @__PURE__ */ jsxs("div", {
 		...rest,
 		ref: root,
 		className: cx("ink-sidebar", className),
+		style: {
+			...style,
+			...controller.rootStyle()
+		},
+		suppressHydrationWarning: true,
 		...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
+		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,
+				...state.layout !== "stack" && domAttrs(controller.panelsAttrs()),
+				children: /* @__PURE__ */ jsx(SidebarContextObject.Provider, {
+					value: context,
+					children
 				})
-			}, panel.id))
-		}) : null, /* @__PURE__ */ jsx("div", {
-			className: state.layout !== "stack" ? "ink-sidebar-panels" : void 0,
-			children: /* @__PURE__ */ jsx(SidebarContextObject.Provider, {
-				value: context,
-				children
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: handle,
+				className: "ink-sidebar-handle",
+				suppressHydrationWarning: true,
+				...domAttrs(handleAttrs)
 			})
-		})]
+		]
 	});
 }
 //#endregion
@@ -3681,21 +3922,6 @@ function InkPanel({ id, label, icon, badge, 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
@@ -4119,6 +4345,6 @@ function InkSearchResults({ field = true, className, ...rest }) {
 	});
 }
 //#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 };
+export { InkAnnotation, InkBack, InkColorMenu, InkCommand, InkDownloadButton, InkFindBar, InkForward, InkHighlightMenu, InkIcon, InkLineStyleMenu, InkNextPage, InkOutline, 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