@scrawl-board/board 0.1.0-beta.10 → 0.1.0-beta.11

package/dist/index.js

@@ -5939,12 +5939,35 @@ function toDataUri(bytes, mediaType) {
 	return `data:${mediaType};base64,${btoa(binary)}`;
 }
 //#endregion
+//#region src/persistence/adapters/imageDecode.ts
+var ORIENTED = { imageOrientation: "from-image" };
+/**
+* Decodes image bytes the way a browser displays them: EXIF orientation
+* applied, so a phone photo comes out upright and its width/height are the
+* displayed ones.
+*
+* `"from-image"` is already the default in every browser this SDK supports
+* (Chrome/Edge 112+, Firefox 111+, Safari 16+); passing it just makes that
+* explicit. Engines from before `"none"` was renamed to `"from-image"` reject
+* the value with a TypeError — they get their own default decode instead of
+* no image at all.
+*/
+async function decodeImageBitmap(blob) {
+	try {
+		return await createImageBitmap(blob, ORIENTED);
+	} catch (error) {
+		if (error instanceof TypeError) return createImageBitmap(blob);
+		throw error;
+	}
+}
+//#endregion
 //#region src/persistence/adapters/assetIngestion.ts
+/** Displayed dimensions — EXIF orientation applied, so a portrait phone photo measures as portrait. */
 async function decodeDimensionsWithImageBitmap(bytes, mediaType) {
 	const blob = new Blob([bytes], { type: mediaType });
 	let bitmap;
 	try {
-		bitmap = await createImageBitmap(blob);
+		bitmap = await decodeImageBitmap(blob);
 	} catch (cause) {
 		throw new AssetResolutionError("decode-failed", false, cause instanceof Error ? cause.message : String(cause));
 	}
@@ -6134,10 +6157,7 @@ var AssetTextureCache = class {
 			}
 			let texture;
 			try {
-				const bitmap = await createImageBitmap(new Blob([outcome.bytes], { type: outcome.mediaType }));
-				texture = new THREE.Texture(bitmap);
-				texture.colorSpace = THREE.SRGBColorSpace;
-				texture.needsUpdate = true;
+				texture = uprightBitmapTexture(await decodeImageBitmap(new Blob([outcome.bytes], { type: outcome.mediaType })));
 			} catch (cause) {
 				onError(toDecodeError(cause, ref));
 				return;
@@ -6192,6 +6212,23 @@ var AssetTextureCache = class {
 function toDecodeError(cause, ref) {
 	return new AssetResolutionError("decode-failed", false, cause instanceof Error ? cause.message : String(cause), ref);
 }
+/**
+* A texture that shows `bitmap` the right way up. Three.js normally flips an
+* image vertically on upload (`flipY`) to match WebGL's bottom-up texture
+* rows, but WebGL ignores that flag for ImageBitmap sources — so every
+* bitmap-backed image drew upside-down. The flip happens in the texture's UV
+* transform instead, which every material using this shared texture (built-in
+* images and Custom SceneImages alike) picks up.
+*/
+function uprightBitmapTexture(bitmap) {
+	const texture = new THREE.Texture(bitmap);
+	texture.colorSpace = THREE.SRGBColorSpace;
+	texture.flipY = false;
+	texture.repeat.set(1, -1);
+	texture.offset.set(0, 1);
+	texture.needsUpdate = true;
+	return texture;
+}
 //#endregion
 //#region src/renderer/canvas/raycast.ts
 var origin$1 = new THREE.Vector3();
@@ -19469,7 +19506,7 @@ var ScrawlEngine = class {
 		this.eraserRadius = 2;
 		this.tableRows = 3;
 		this.tableCols = 3;
-		this.tool = "marker";
+		this.tool = "select";
 		this.voter = null;
 		this.stampKind = "emoji:grinning";
 		this.timerDurationMs = TIMER_DEFAULT_DURATION_MS;
@@ -21302,7 +21339,8 @@ function createBoardControllerWithEngine(options, existingEngine) {
 	const storeListeners = /* @__PURE__ */ new Set();
 	const eventListeners = /* @__PURE__ */ new Map();
 	const documentListeners = /* @__PURE__ */ new Set();
-	let tool = "marker";
+	let tool = "select";
+	let inlineEditing = null;
 	let style = Object.freeze({
 		inkColor: "#1C1C1E",
 		highlightColor: HIGHLIGHT_COLORS.yellow,
@@ -21877,6 +21915,7 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			readOnly,
 			selection: Object.freeze([...selection]),
 			focusedItem: computeFocusedItem(),
+			inlineEditing,
 			strokeCount: [...document.all()].length,
 			objectCount: allObjects().length,
 			canUndo: history.canUndo,
@@ -22503,6 +22542,8 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			setInlineEditing(target) {
 				assertActive();
 				engine?.setInlineEditing(target);
+				inlineEditing = target ? { ...target } : null;
+				changed();
 			},
 			centerOn(point) {
 				assertActive();
@@ -22948,6 +22989,15 @@ function createBoardControllerWithEngine(options, existingEngine) {
 		query: {
 			get: readObject,
 			all: () => allObjects(),
+			bounds: (id) => {
+				const box = document.bbox(id);
+				return box ? {
+					minX: box.minX,
+					minY: box.minY,
+					maxX: box.maxX,
+					maxY: box.maxY
+				} : void 0;
+			},
 			search: (query) => searchBoard(query, {
 				notes: document.allNotes(),
 				texts: document.allTexts(),
@@ -22958,6 +23008,7 @@ function createBoardControllerWithEngine(options, existingEngine) {
 			})
 		},
 		comments: {
+			list: () => comments,
 			sync(next) {
 				comments = Object.freeze([...next]);
 				if (engine) engine.setComments(comments);
@@ -24402,9 +24453,17 @@ var PATHS = {
 	"shape:curved-connector": "M5 18C5 8 19 16 19 6M3 18h4v4H3ZM17 2h4v4h-4Z",
 	"shape:polyline-connector": "m5 12 7-7 7 5-4 9-10-7M3 10h4v4H3ZM10 3h4v4h-4ZM17 8h4v4h-4ZM13 17h4v4h-4Z",
 	chevronDown: "m6 9 6 6 6-6",
+	chevronRight: "m9 6 6 6-6 6",
+	notebook: "M4 4.5A1.5 1.5 0 0 1 5.5 3H18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H6a2 2 0 0 1-2-2ZM4 19a2 2 0 0 1 2-2h13",
+	section: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z",
+	page: "M7 3h7l4 4v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM14 3v4h4",
 	pages: "M7 3h13v16H7ZM4 7H2v15h13v-1M10 7h7M10 11h7M10 15h4",
 	close: "M5 5l14 14M19 5 5 19",
 	check: "m5 12 5 5L20 7",
+	activity: "M3 12h4l3-8 4 16 3-8h4",
+	shield: "M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6Z",
+	moreVertical: "M12 5h.01M12 12h.01M12 19h.01",
+	share: "M18 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM6 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM18 16a3 3 0 1 0 0 6 3 3 0 0 0 0-6ZM8.6 10.6l6.8-3.2M8.6 13.4l6.8 3.2",
 	lock: "M5 10h14v11H5ZM8 10V6a4 4 0 0 1 8 0v4",
 	unlock: "M5 10h14v11H5ZM8 10V6a4 4 0 0 1 8 0",
 	duplicate: "M8 8h13v13H8ZM16 8V3H3v13h5",
@@ -24414,8 +24473,8 @@ var PATHS = {
 	color: "M12 3C9 8 5 11 5 15a7 7 0 0 0 14 0c0-4-4-7-7-12Z",
 	none: "M4 4l16 16M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18Z",
 	search: "M10 3a7 7 0 1 0 0 14 7 7 0 0 0 0-14ZM15 15l6 6",
-	import: "M12 3v12M7 10l5 5 5-5M4 16v5h16v-5",
-	export: "M12 16V3M7 8l5-5 5 5M4 16v5h16v-5",
+	import: "M12 16V3M7 8l5-5 5 5M4 16v5h16v-5",
+	export: "M12 3v12M7 10l5 5 5-5M4 16v5h16v-5",
 	fit: "M3 9V3h6M15 3h6v6M21 15v6h-6M9 21H3v-6M8 8h8v8H8Z",
 	select: "m5 3 14 9-7 1-3 7Z",
 	marker: "m4 20 2-6L16 4a2 2 0 0 1 3 3L9 17Zm2-6 3 3M14 6l3 3",
@@ -24444,7 +24503,8 @@ var PATHS = {
 	undo: "M9 5 4 10l5 5M4 10h10a6 6 0 0 1 6 6v3",
 	redo: "m15 5 5 5-5 5M20 10H10a6 6 0 0 0-6 6v3",
 	addRow: "M4 6h16M4 12h16M4 18h10M17 16v5M14.5 18.5h5",
-	addColumn: "M6 4v16M12 4v16M18 4v10M16 16.5h5M18.5 14v5"
+	addColumn: "M6 4v16M12 4v16M18 4v10M16 16.5h5M18.5 14v5",
+	deleteRow: "M4 6h16M4 12h16M4 18h10M15 16.5l5 5M20 16.5l-5 5"
 };
 function ToolIcon({ tool }) {
 	return /* @__PURE__ */ jsx("svg", {
@@ -24501,127 +24561,197 @@ function NavigatorName({ name, kind, onRename }) {
 		children: /* @__PURE__ */ jsx(ToolIcon, { tool: "marker" })
 	});
 }
-/**
-* The notebook header across the top of the board (notebook switcher on the
-* left) and a breadcrumb on the canvas, just past the sidebar and tool rail.
-* Both stay visible whether or not the sidebar is open.
-*/
-function NotebookNavigation({ controller, snapshot, onOpen }) {
+/** A crumb (or the switcher) with its menu: pick an item, rename one, or add one. */
+function NavigatorMenu({ label, items, activeId, kind, mutable, onSelect, onAdd, onRename, children, className, triggerLabel, triggerProps }) {
 	const [open, setOpen] = useState(false);
 	const root = useRef(null);
 	const trigger = useRef(null);
 	const menuId = useId();
-	const notebook = snapshot.notebooks.find((item) => item.id === snapshot.activeNotebookId);
-	const section = snapshot.sections.find((item) => item.id === snapshot.activeSectionId);
-	const page = snapshot.pages.find((item) => item.id === snapshot.activePageId);
-	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
 	useEffect(() => {
 		if (!open) return;
 		const outside = (event) => {
 			if (!root.current?.contains(event.target)) setOpen(false);
 		};
+		const escape = (event) => {
+			if (event.key !== "Escape") return;
+			setOpen(false);
+			trigger.current?.focus();
+		};
 		document.addEventListener("pointerdown", outside);
-		return () => document.removeEventListener("pointerdown", outside);
+		document.addEventListener("keydown", escape);
+		return () => {
+			document.removeEventListener("pointerdown", outside);
+			document.removeEventListener("keydown", escape);
+		};
 	}, [open]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "scrawl-board__header",
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "scrawl-board__notebook-switcher",
-			ref: root,
-			onKeyDown: (event) => {
-				event.stopPropagation();
-				if (event.key === "Escape") {
-					event.preventDefault();
-					setOpen(false);
-					trigger.current?.focus();
-				}
-			},
-			children: [/* @__PURE__ */ jsxs("button", {
-				className: "scrawl-board__notebook-trigger",
-				ref: trigger,
-				type: "button",
-				"aria-label": "Choose notebook",
-				"aria-expanded": open,
-				"aria-controls": menuId,
-				onClick: () => setOpen((value) => !value),
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "scrawl-board__notebook-color",
-						style: { background: notebook?.color }
-					}),
-					/* @__PURE__ */ jsx("span", { children: notebook?.name ?? "Notebooks" }),
-					/* @__PURE__ */ jsx(ToolIcon, { tool: "chevronDown" })
-				]
-			}), open && /* @__PURE__ */ jsxs("div", {
-				className: "scrawl-board__notebook-dropdown",
-				id: menuId,
-				role: "group",
-				"aria-label": "Notebooks",
-				children: [/* @__PURE__ */ jsx("div", {
-					className: "scrawl-board__notebook-options",
-					children: snapshot.notebooks.map((item) => /* @__PURE__ */ jsxs("div", {
-						className: "scrawl-board__page-row",
-						"data-active": item.id === snapshot.activeNotebookId,
-						children: [/* @__PURE__ */ jsxs("button", {
-							className: "scrawl-board__page-select",
-							type: "button",
-							"aria-pressed": item.id === snapshot.activeNotebookId,
-							onClick: () => {
-								controller.notebooks.select(item.id);
-								setOpen(false);
-								onOpen();
-								trigger.current?.focus();
-							},
-							children: [/* @__PURE__ */ jsx("span", {
+	const close = () => {
+		setOpen(false);
+		trigger.current?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-open": open ? "" : void 0,
+		ref: root,
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Escape") {
+				event.preventDefault();
+				close();
+			}
+		},
+		children: [/* @__PURE__ */ jsx("button", {
+			...triggerProps,
+			ref: trigger,
+			type: "button",
+			"aria-label": triggerLabel,
+			"aria-expanded": open,
+			"aria-controls": menuId,
+			"aria-haspopup": "true",
+			onClick: () => setOpen((value) => !value),
+			children
+		}), open && /* @__PURE__ */ jsxs("div", {
+			className: "scrawl-board__navigator-menu",
+			id: menuId,
+			role: "group",
+			"aria-label": label,
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "scrawl-board__navigator-options",
+				children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+					className: "scrawl-board__page-row",
+					"data-active": item.id === activeId,
+					children: [/* @__PURE__ */ jsxs("button", {
+						className: "scrawl-board__page-select",
+						type: "button",
+						"aria-pressed": item.id === activeId,
+						onClick: () => {
+							onSelect(item.id);
+							close();
+						},
+						children: [
+							item.color !== void 0 ? /* @__PURE__ */ jsx("span", {
 								className: "scrawl-board__notebook-color",
 								style: { background: item.color }
-							}), /* @__PURE__ */ jsx("span", { children: item.name })]
-						}), mutable && /* @__PURE__ */ jsx(NavigatorName, {
-							name: item.name,
-							kind: "Notebook",
-							onRename: (name) => controller.notebooks.rename(item.id, name)
-						})]
-					}, item.id))
-				}), /* @__PURE__ */ jsxs("button", {
-					className: "scrawl-board__add-notebook",
-					type: "button",
-					disabled: !mutable,
-					onClick: () => {
-						controller.notebooks.add();
-						setOpen(false);
-						onOpen();
-						trigger.current?.focus();
-					},
-					children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "more" }), /* @__PURE__ */ jsx("span", { children: "New notebook" })]
-				})]
+							}) : /* @__PURE__ */ jsx(ToolIcon, { tool: kind === "Section" ? "section" : "page" }),
+							/* @__PURE__ */ jsx("span", {
+								className: "scrawl-board__navigator-label",
+								children: item.name
+							}),
+							item.id === activeId && /* @__PURE__ */ jsx(ToolIcon, { tool: "check" })
+						]
+					}), mutable && /* @__PURE__ */ jsx(NavigatorName, {
+						name: item.name,
+						kind,
+						onRename: (name) => onRename(item.id, name)
+					})]
+				}, item.id))
+			}), /* @__PURE__ */ jsxs("button", {
+				className: "scrawl-board__navigator-add",
+				type: "button",
+				disabled: !mutable,
+				onClick: () => {
+					onAdd();
+					close();
+				},
+				children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "more" }), /* @__PURE__ */ jsxs("span", { children: ["New ", kind.toLowerCase()] })]
 			})]
-		})
+		})]
+	});
+}
+/**
+* The floating navigator: a notebook switcher in the top-left corner, and a
+* breadcrumb across the top whose notebook, section and page crumbs each open
+* their own menu (pick, rename, or add one).
+*/
+function NotebookNavigation({ controller, snapshot }) {
+	const notebook = snapshot.notebooks.find((item) => item.id === snapshot.activeNotebookId);
+	const section = snapshot.sections.find((item) => item.id === snapshot.activeSectionId);
+	const page = snapshot.pages.find((item) => item.id === snapshot.activePageId);
+	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
+	const sections = snapshot.sections.filter((item) => item.notebookId === snapshot.activeNotebookId);
+	const pages = snapshot.pages.filter((item) => item.sectionId === snapshot.activeSectionId);
+	const notebookMenu = {
+		items: snapshot.notebooks,
+		activeId: snapshot.activeNotebookId,
+		kind: "Notebook",
+		mutable,
+		onSelect: (id) => controller.notebooks.select(id),
+		onAdd: () => controller.notebooks.add(),
+		onRename: (id, name) => controller.notebooks.rename(id, name)
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(NavigatorMenu, {
+		...notebookMenu,
+		label: "Notebooks",
+		className: "scrawl-board__notebook-switcher",
+		triggerLabel: "Choose notebook",
+		triggerProps: { className: "scrawl-board__notebook-trigger" },
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "scrawl-board__notebook-color",
+				style: { background: notebook?.color }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "scrawl-board__navigator-label",
+				children: notebook?.name ?? "Notebooks"
+			}),
+			/* @__PURE__ */ jsx(ToolIcon, { tool: "chevronDown" })
+		]
 	}), /* @__PURE__ */ jsx("nav", {
 		className: "scrawl-board__breadcrumb",
 		"aria-label": "Breadcrumb",
 		children: /* @__PURE__ */ jsxs("ol", { children: [
-			/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: () => {
-					setOpen(true);
-					trigger.current?.focus();
-				},
-				children: notebook?.name ?? "Notebook"
+			/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(NavigatorMenu, {
+				...notebookMenu,
+				label: "Notebooks",
+				className: "scrawl-board__crumb-group",
+				triggerLabel: `Notebook: ${notebook?.name ?? "Notebook"}`,
+				triggerProps: { className: "scrawl-board__crumb" },
+				children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "notebook" }), /* @__PURE__ */ jsx("span", {
+					className: "scrawl-board__navigator-label",
+					children: notebook?.name ?? "Notebook"
+				})]
 			}) }),
-			/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "›"
-			}), /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: onOpen,
-				children: section?.name ?? "Section"
+			/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "chevronRight" }), /* @__PURE__ */ jsxs(NavigatorMenu, {
+				label: "Sections",
+				items: sections,
+				activeId: snapshot.activeSectionId,
+				kind: "Section",
+				mutable: true,
+				onSelect: (id) => controller.sections.select(id),
+				onAdd: () => controller.sections.add(),
+				onRename: (id, name) => controller.sections.rename(id, name),
+				className: "scrawl-board__crumb-group",
+				triggerLabel: `Section: ${section?.name ?? "Section"}`,
+				triggerProps: { className: "scrawl-board__crumb" },
+				children: [
+					/* @__PURE__ */ jsx(ToolIcon, { tool: "section" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "scrawl-board__navigator-label",
+						children: section?.name ?? "Section"
+					}),
+					/* @__PURE__ */ jsx(ToolIcon, { tool: "chevronDown" })
+				]
 			})] }),
-			/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				children: "›"
-			}), /* @__PURE__ */ jsx("span", {
-				"aria-current": "page",
-				children: page?.name ?? "Page"
+			/* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "chevronRight" }), /* @__PURE__ */ jsxs(NavigatorMenu, {
+				label: "Pages",
+				items: pages,
+				activeId: snapshot.activePageId,
+				kind: "Page",
+				mutable: true,
+				onSelect: (id) => controller.pages.select(id),
+				onAdd: () => controller.pages.add(),
+				onRename: (id, name) => controller.pages.rename(id, name),
+				className: "scrawl-board__crumb-group",
+				triggerLabel: `Page: ${page?.name ?? "Page"}`,
+				triggerProps: { className: "scrawl-board__crumb scrawl-board__crumb--current" },
+				children: [
+					/* @__PURE__ */ jsx(ToolIcon, { tool: "page" }),
+					/* @__PURE__ */ jsx("span", {
+						className: "scrawl-board__navigator-label",
+						"aria-current": "page",
+						children: page?.name ?? "Page"
+					}),
+					/* @__PURE__ */ jsx(ToolIcon, { tool: "chevronDown" })
+				]
 			})] })
 		] })
 	})] });
@@ -24710,14 +24840,6 @@ function PagesPanel({ controller, snapshot, open, onClose }) {
 						onClick: () => controller.sections.add(),
 						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "more" })
 					}),
-					/* @__PURE__ */ jsx("button", {
-						"aria-label": "New page",
-						"data-tooltip": "New page",
-						type: "button",
-						disabled: !mutable,
-						onClick: addPage,
-						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "more" })
-					}),
 					/* @__PURE__ */ jsx("button", {
 						"aria-label": "Close pages",
 						"data-tooltip": "Close pages",
@@ -25138,298 +25260,425 @@ async function insertImageFile(controller, file) {
 	return id;
 }
 //#endregion
-//#region src/ui/dialogs/inline-editing.tsx
-/** Inline note, text, and table-cell editors — driven entirely by public controller events and commands. */
-function InlineEditors({ controller, renderPortal }) {
-	const [editor, setEditor] = useState(null);
-	const anchorRef = useRef(null);
-	const textAreaRef = useRef(null);
-	const measureRef = useRef(null);
-	const coveredRow = editor?.kind === "table-cell" ? editor.row : void 0;
-	const coveredCol = editor?.kind === "table-cell" ? editor.col : void 0;
-	const coveredId = editor && editor.kind !== "note" ? editor.id : null;
+//#region src/ui/panels/board-panels.tsx
+/** A floating drawer under the header (a bottom sheet on narrow boards). */
+function BoardDrawer({ label, icon, subtitle, onClose, onMarkAllRead, markAllDisabled, footer, children }) {
+	const headingId = useId();
+	const ref = useRef(null);
+	const closeRef = useRef(onClose);
 	useEffect(() => {
-		if (!coveredId) return;
-		controller.view.setInlineEditing(coveredRow === void 0 ? { id: coveredId } : {
-			id: coveredId,
-			row: coveredRow,
-			col: coveredCol
-		});
-		return () => {
-			if (controller.getSnapshot().status !== "disposed") controller.view.setInlineEditing(null);
+		closeRef.current = onClose;
+	});
+	useEffect(() => {
+		ref.current?.querySelector("button:not(:disabled), [tabindex='0']")?.focus({ preventScroll: true });
+		const outside = (event) => {
+			const target = event.target;
+			if (!ref.current?.contains(target) && !target.closest?.(".scrawl-board__actions")) closeRef.current();
 		};
-	}, [
-		controller,
-		coveredId,
-		coveredRow,
-		coveredCol
-	]);
-	const textValue = editor?.kind === "text" ? editor.text : null;
-	useLayoutEffect(() => {
-		const el = textAreaRef.current;
-		if (textValue === null || !el) return;
-		const cs = getComputedStyle(el);
-		measureRef.current ??= document.createElement("canvas").getContext("2d");
-		const measure = measureRef.current;
-		if (measure) {
-			measure.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
-			const widest = Math.max(...textValue.split("\n").map((line) => measure.measureText(line || " ").width));
-			const chrome = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight) + parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
-			const cap = Math.min(window.innerWidth * .6, 640);
-			el.style.width = `${Math.ceil(Math.min(cap, widest + chrome + 4))}px`;
-		}
-		el.style.height = "auto";
-		el.style.height = `${el.scrollHeight + parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)}px`;
-	}, [textValue, editor?.kind === "text" ? editor.fontSizePx : null]);
-	/** Portal children are positioned relative to the Board root, not the viewport. */
-	const rootOffset = () => {
-		const rootRect = (anchorRef.current?.closest("[data-scrawl-root]"))?.getBoundingClientRect();
-		return {
-			left: rootRect?.left ?? 0,
-			top: rootRect?.top ?? 0
+		const escape = (event) => {
+			if (event.key !== "Escape" || event.defaultPrevented || document.activeElement && document.activeElement !== document.body) return;
+			event.preventDefault();
+			closeRef.current();
+		};
+		document.addEventListener("pointerdown", outside);
+		document.addEventListener("keydown", escape);
+		return () => {
+			document.removeEventListener("pointerdown", outside);
+			document.removeEventListener("keydown", escape);
 		};
+	}, []);
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		className: "scrawl-board__drawer",
+		ref,
+		role: "dialog",
+		tabIndex: -1,
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+			}
+		},
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "scrawl-board__drawer-header",
+				children: [
+					icon && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "scrawl-board__drawer-icon",
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: icon })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "scrawl-board__drawer-titles",
+						children: [/* @__PURE__ */ jsx("h2", {
+							id: headingId,
+							children: label
+						}), subtitle && /* @__PURE__ */ jsx("p", { children: subtitle })]
+					}),
+					onMarkAllRead && /* @__PURE__ */ jsx("button", {
+						className: "scrawl-board__drawer-link",
+						disabled: markAllDisabled,
+						onClick: () => {
+							onMarkAllRead();
+							ref.current?.focus();
+						},
+						type: "button",
+						children: "Mark all as read"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						"aria-label": `Close ${label}`,
+						className: "scrawl-board__drawer-close",
+						onClick: onClose,
+						type: "button",
+						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "close" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "scrawl-board__drawer-body",
+				children
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "scrawl-board__drawer-footer",
+				children: footer
+			})
+		]
+	});
+}
+function DrawerEmpty({ icon, title, hint }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "scrawl-board__drawer-empty",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ToolIcon, { tool: icon })
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "scrawl-board__drawer-empty-title",
+				children: title
+			}),
+			/* @__PURE__ */ jsx("p", { children: hint })
+		]
+	});
+}
+function CommentsDrawer({ controller, comments, unread, onMarkAllRead, onClose }) {
+	return /* @__PURE__ */ jsx(BoardDrawer, {
+		icon: "comment",
+		label: "Comments",
+		markAllDisabled: unread === 0,
+		onClose,
+		onMarkAllRead,
+		children: comments.length === 0 ? /* @__PURE__ */ jsx(DrawerEmpty, {
+			hint: "Pick the Comment tool and click the board to start a conversation.",
+			icon: "comment",
+			title: "No comments yet"
+		}) : /* @__PURE__ */ jsx("ul", {
+			className: "scrawl-board__drawer-list",
+			children: comments.map((comment) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", {
+				"aria-label": `Open comment by ${comment.authorName}: ${comment.text}`,
+				className: "scrawl-board__drawer-row",
+				type: "button",
+				onClick: () => {
+					onClose();
+					controller.view.centerOn({
+						x: comment.x,
+						y: comment.y
+					});
+					controller.comments.open(comment.id);
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "scrawl-board__comment-avatar",
+					style: { background: comment.authorColor },
+					children: comment.authorName.slice(0, 1).toUpperCase()
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "scrawl-board__drawer-row-text",
+					children: [
+						/* @__PURE__ */ jsxs("strong", { children: [comment.authorName, comment.resolved ? " · Resolved" : ""] }),
+						/* @__PURE__ */ jsx("span", { children: comment.text }),
+						comment.replies.length > 0 && /* @__PURE__ */ jsxs("small", { children: [
+							comment.replies.length,
+							" ",
+							comment.replies.length === 1 ? "reply" : "replies"
+						] })
+					]
+				})]
+			}) }, comment.id))
+		})
+	});
+}
+var KIND_ICON = {
+	added: "more",
+	removed: "delete",
+	updated: "marker",
+	commented: "comment",
+	shared: "share",
+	exported: "export"
+};
+function timeLabels(at, now) {
+	const date = new Date(at);
+	const seconds = Math.max(0, Math.round((now - date.getTime()) / 1e3));
+	return {
+		relative: seconds < 45 ? "just now" : seconds < 3600 ? `${Math.round(seconds / 60)} min ago` : seconds < 86400 ? `${Math.round(seconds / 3600)} h ago` : `${Math.round(seconds / 86400)} d ago`,
+		absolute: date.toLocaleString(void 0, {
+			dateStyle: "medium",
+			timeStyle: "short"
+		})
 	};
-	useEffect(() => controller.on("edit-request", (event) => {
-		const offset = rootOffset();
-		if (event.kind === "text" && event.id === null) {
-			const newId = controller.content.add({
-				type: "text",
-				x: event.boardX,
-				y: event.boardY,
-				text: "",
-				color: event.color,
-				fontSize: TEXT_DEFAULT_SIZE
-			});
-			controller.content.select([newId]);
-			setEditor({
-				...event,
-				id: newId,
-				left: event.screenRect.left - offset.left,
-				top: event.screenRect.top - offset.top
-			});
-			return;
-		}
-		setEditor({
-			...event,
-			left: event.screenRect.left - offset.left,
-			top: event.screenRect.top - offset.top
-		});
-	}), [controller]);
-	const commitNote = () => {
-		if (editor?.kind === "note") controller.content.update(editor.id, { text: editor.text });
-		setEditor(null);
-	};
-	const commitText = () => {
-		if (editor?.kind === "text" && editor.id !== null) {
-			const text = editor.text;
-			const existing = controller.query.get(editor.id);
-			if (!text.trim()) controller.content.remove([editor.id]);
-			else if (existing?.type !== "text" || existing.text !== text) controller.content.update(editor.id, { text });
-		}
-		setEditor(null);
-	};
-	const commitTableCell = () => {
-		if (editor?.kind === "table-cell") controller.content.table.commitCell(editor.id, editor.row, editor.col, editor.text);
-		setEditor(null);
-	};
-	useEffect(() => controller.on("page-changing", () => {
-		if (editor?.kind === "note") commitNote();
-		else if (editor?.kind === "text") commitText();
-		else if (editor?.kind === "table-cell") commitTableCell();
+}
+function ActivityDrawer({ entries, unread, onMarkAllRead, onJump, onClose }) {
+	const [now] = useState(() => Date.now());
+	return /* @__PURE__ */ jsx(BoardDrawer, {
+		footer: /* @__PURE__ */ jsxs("span", { children: [
+			entries.length,
+			" ",
+			entries.length === 1 ? "entry" : "entries"
+		] }),
+		icon: "activity",
+		label: "Recent Activities",
+		markAllDisabled: unread === 0,
+		onClose,
+		onMarkAllRead,
+		subtitle: "Track board actions",
+		children: entries.length === 0 ? /* @__PURE__ */ jsx(DrawerEmpty, {
+			hint: "Changes to this board will show up here.",
+			icon: "activity",
+			title: "No activity yet"
+		}) : /* @__PURE__ */ jsx("ol", {
+			className: "scrawl-board__drawer-list scrawl-board__timeline",
+			children: entries.map((entry) => {
+				const time = timeLabels(entry.at, now);
+				const content = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "scrawl-board__timeline-icon",
+					"data-kind": entry.kind,
+					children: /* @__PURE__ */ jsx(ToolIcon, { tool: KIND_ICON[entry.kind] })
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "scrawl-board__drawer-row-text",
+					children: [
+						/* @__PURE__ */ jsx("strong", { children: entry.title }),
+						entry.actorName && /* @__PURE__ */ jsxs("span", { children: ["by ", entry.actorName] }),
+						/* @__PURE__ */ jsx("small", { children: /* @__PURE__ */ jsxs("time", {
+							dateTime: new Date(entry.at).toISOString(),
+							children: [
+								time.relative,
+								" · ",
+								time.absolute
+							]
+						}) })
+					]
+				})] });
+				return /* @__PURE__ */ jsx("li", { children: entry.location ? /* @__PURE__ */ jsx("button", {
+					"aria-label": `${entry.title}${entry.actorName ? ` by ${entry.actorName}` : ""} — show on board`,
+					className: "scrawl-board__drawer-row",
+					type: "button",
+					onClick: () => {
+						onClose();
+						onJump(entry.location);
+					},
+					children: content
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "scrawl-board__drawer-row",
+					children: content
+				}) }, entry.id);
+			})
+		})
+	});
+}
+var ROLE_LABEL = {
+	viewer: "View",
+	editor: "Edit",
+	admin: "Admin"
+};
+var ROLES = [
+	"viewer",
+	"editor",
+	"admin"
+];
+function PermissionsDrawer({ permissions, onClose }) {
+	const [pending, setPending] = useState({});
+	const saveRef = useRef(null);
+	const [status, setStatus] = useState({ kind: "idle" });
+	const changes = permissions.members.filter((member) => pending[member.id] && pending[member.id] !== member.role).map((member) => ({
+		memberId: member.id,
+		role: pending[member.id]
 	}));
-	const navigateTableCell = (dRow, dCol) => {
-		if (editor?.kind !== "table-cell") return;
-		controller.content.table.commitCell(editor.id, editor.row, editor.col, editor.text);
-		const table = controller.query.get(editor.id);
-		if (!table || table.type !== "table") {
-			setEditor(null);
-			return;
-		}
-		let nextCol = editor.col + dCol;
-		let nextRow = editor.row + dRow;
-		if (nextCol >= table.cols) {
-			nextCol = 0;
-			nextRow += 1;
-		} else if (nextCol < 0) {
-			nextCol = table.cols - 1;
-			nextRow -= 1;
+	useEffect(() => {
+		if (status.kind !== "saved") return;
+		const timer = setTimeout(() => setStatus({ kind: "idle" }), 1800);
+		return () => clearTimeout(timer);
+	}, [status]);
+	const save = async () => {
+		setStatus({ kind: "saving" });
+		try {
+			await permissions.onSave(changes);
+			setPending({});
+			setStatus({ kind: "saved" });
+			saveRef.current?.closest(".scrawl-board__drawer")?.focus();
+		} catch (error) {
+			setStatus({
+				kind: "error",
+				message: error instanceof Error ? error.message : "Your changes weren't saved."
+			});
 		}
-		if (nextRow >= table.rows) nextRow = 0;
-		if (nextRow < 0) nextRow = table.rows - 1;
-		let leftBoard = table.x;
-		for (let c = 0; c < nextCol; c++) leftBoard += table.colWidths[c] ?? 8;
-		let topBoard = table.y;
-		for (let r = 0; r < nextRow; r++) topBoard -= table.rowHeights[r] ?? 3.6;
-		const colWidth = table.colWidths[nextCol] ?? 8;
-		const rowHeight = table.rowHeights[nextRow] ?? 3.6;
-		const topLeft = controller.view.boardToScreen({
-			x: leftBoard,
-			y: topBoard
-		});
-		const bottomRight = controller.view.boardToScreen({
-			x: leftBoard + colWidth,
-			y: topBoard - rowHeight
-		});
-		const offset = rootOffset();
-		setEditor({
-			kind: "table-cell",
-			id: editor.id,
-			row: nextRow,
-			col: nextCol,
-			text: table.cells[`${nextRow},${nextCol}`] ?? "",
-			fontSizePx: editor.fontSizePx,
-			screenRect: {
-				left: topLeft.x,
-				top: topLeft.y,
-				width: Math.max(40, bottomRight.x - topLeft.x),
-				height: Math.max(24, bottomRight.y - topLeft.y)
-			},
-			left: topLeft.x - offset.left,
-			top: topLeft.y - offset.top
-		});
 	};
-	const focusEditor = useCallback((el) => {
-		textAreaRef.current = el;
-		if (!el) return;
-		const doFocus = () => {
-			try {
-				el.focus({ preventScroll: true });
-				el.setSelectionRange(el.value.length, el.value.length);
-			} catch {}
+	return /* @__PURE__ */ jsxs(BoardDrawer, {
+		icon: "shield",
+		label: "Pod Member Permissions",
+		onClose,
+		subtitle: "Manage whiteboard access",
+		footer: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-live": "polite",
+			className: "scrawl-board__drawer-status",
+			"data-kind": status.kind,
+			children: status.kind === "saved" ? "Saved" : status.kind === "error" ? status.message : status.kind === "saving" ? "Saving…" : ""
+		}), /* @__PURE__ */ jsx("button", {
+			className: "scrawl-board__drawer-primary",
+			ref: saveRef,
+			disabled: changes.length === 0 || status.kind === "saving",
+			onClick: () => void save(),
+			type: "button",
+			children: "Save Permissions"
+		})] }),
+		children: [/* @__PURE__ */ jsxs("dl", {
+			className: "scrawl-board__role-legend",
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "View Only" }), /* @__PURE__ */ jsx("dd", { children: "Can see the board but not change it." })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Edit Access" }), /* @__PURE__ */ jsx("dd", { children: "Can draw, add and change content." })] }),
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("dt", { children: "Admin Access" }), /* @__PURE__ */ jsx("dd", { children: "Can edit and manage who has access." })] })
+			]
+		}), /* @__PURE__ */ jsx("ul", {
+			className: "scrawl-board__member-list",
+			children: permissions.members.map((member) => {
+				const role = pending[member.id] ?? member.role;
+				const isYou = member.id === permissions.currentUserId;
+				return /* @__PURE__ */ jsxs("li", {
+					className: "scrawl-board__member",
+					children: [
+						member.avatarUrl ? /* @__PURE__ */ jsx("img", {
+							alt: "",
+							className: "scrawl-board__member-avatar",
+							src: member.avatarUrl
+						}) : /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "scrawl-board__member-avatar",
+							children: initials(member.name)
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "scrawl-board__member-info",
+							children: [/* @__PURE__ */ jsxs("p", { children: [
+								/* @__PURE__ */ jsx("strong", { children: member.name }),
+								isYou && /* @__PURE__ */ jsx("span", {
+									className: "scrawl-board__member-you",
+									children: " (you)"
+								}),
+								member.online !== void 0 && /* @__PURE__ */ jsx("span", {
+									className: "scrawl-board__member-status",
+									"data-online": member.online,
+									children: member.online ? "Online" : "Offline"
+								})
+							] }), member.email && /* @__PURE__ */ jsx("p", {
+								className: "scrawl-board__member-email",
+								children: member.email
+							})]
+						}),
+						/* @__PURE__ */ jsx("div", {
+							"aria-label": `Access for ${member.name}`,
+							className: "scrawl-board__segmented",
+							role: "radiogroup",
+							children: ROLES.map((option) => /* @__PURE__ */ jsx("button", {
+								"aria-checked": role === option,
+								disabled: isYou,
+								role: "radio",
+								type: "button",
+								onClick: () => {
+									setStatus({ kind: "idle" });
+									setPending((current) => ({
+										...current,
+										[member.id]: option
+									}));
+								},
+								children: ROLE_LABEL[option]
+							}, option))
+						})
+					]
+				}, member.id);
+			})
+		})]
+	});
+}
+function initials(name) {
+	return name.split(/\s+/).filter(Boolean).slice(0, 2).map((part) => part[0].toUpperCase()).join("");
+}
+/** The ⋮ overflow menu in the board actions. */
+function BoardMoreMenu({ items, onSelect, onClose }) {
+	const ref = useRef(null);
+	const closeRef = useRef(onClose);
+	useEffect(() => {
+		closeRef.current = onClose;
+	});
+	useEffect(() => {
+		ref.current?.querySelector("button")?.focus({ preventScroll: true });
+		const outside = (event) => {
+			const target = event.target;
+			if (!ref.current?.contains(target) && !target.closest?.("[aria-label=\"More board actions\"]")) closeRef.current();
 		};
-		doFocus();
-		requestAnimationFrame(doFocus);
+		document.addEventListener("pointerdown", outside);
+		return () => document.removeEventListener("pointerdown", outside);
 	}, []);
-	if (!editor) return /* @__PURE__ */ jsx("div", {
-		ref: anchorRef,
-		style: { display: "none" }
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		ref: anchorRef,
-		style: { display: "none" }
-	}), renderPortal(editor.kind === "note" ? /* @__PURE__ */ jsx("textarea", {
-		"aria-label": "Edit note",
-		autoFocus: true,
-		className: "scrawl-board__inline-editor scrawl-board__inline-editor--note",
-		onBlur: commitNote,
-		onChange: (event) => setEditor({
-			...editor,
-			text: event.currentTarget.value
-		}),
-		onKeyDown: (event) => {
-			event.stopPropagation();
-			if (event.key === "Escape") commitNote();
-			if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) commitNote();
-		},
-		ref: focusEditor,
-		style: {
-			left: editor.left,
-			top: editor.top,
-			width: editor.screenRect.width,
-			height: editor.screenRect.height,
-			backgroundColor: editor.color,
-			fontSize: Math.max(12, editor.screenRect.width * 42 / 512),
-			lineHeight: 1.3,
-			padding: editor.screenRect.width * 40 / 512
-		},
-		value: editor.text
-	}) : editor.kind === "text" ? /* @__PURE__ */ jsx("textarea", {
-		"aria-label": "Edit text",
-		autoFocus: true,
-		className: "scrawl-board__inline-editor scrawl-board__inline-editor--text",
-		onBlur: commitText,
-		onChange: (event) => setEditor({
-			...editor,
-			text: event.currentTarget.value
-		}),
+	return /* @__PURE__ */ jsx("div", {
+		"aria-label": "More board actions",
+		className: "scrawl-board__more-menu",
+		ref,
+		role: "menu",
 		onKeyDown: (event) => {
 			event.stopPropagation();
-			if (event.key === "Escape") commitText();
-			if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) commitText();
-		},
-		ref: focusEditor,
-		rows: Math.max(1, editor.text.split("\n").length),
-		style: {
-			left: editor.left,
-			top: editor.top,
-			color: editor.color,
-			fontSize: Math.max(12, editor.fontSizePx)
-		},
-		value: editor.text
-	}) : /* @__PURE__ */ jsxs("div", {
-		className: "scrawl-board__inline-editor--table-cell",
-		style: {
-			left: editor.left,
-			top: editor.top,
-			width: editor.screenRect.width,
-			minHeight: editor.screenRect.height
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+			}
+			if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+				event.preventDefault();
+				const buttons = [...ref.current?.querySelectorAll("button") ?? []];
+				buttons[(buttons.indexOf(document.activeElement) + (event.key === "ArrowDown" ? 1 : -1) + buttons.length) % buttons.length]?.focus();
+			}
 		},
-		children: [/* @__PURE__ */ jsx("textarea", {
-			"aria-label": `Edit table cell ${editor.row + 1}, ${editor.col + 1}`,
-			autoFocus: true,
-			className: "scrawl-board__inline-editor",
-			onBlur: commitTableCell,
-			onChange: (event) => setEditor({
-				...editor,
-				text: event.currentTarget.value
-			}),
-			onKeyDown: (event) => {
-				event.stopPropagation();
-				if (event.key === "Tab") {
-					event.preventDefault();
-					navigateTableCell(0, event.shiftKey ? -1 : 1);
-				} else if (event.key === "Enter" && !event.shiftKey) {
-					event.preventDefault();
-					navigateTableCell(1, 0);
-				} else if (event.key === "Escape") commitTableCell();
+		children: items.map((item) => /* @__PURE__ */ jsxs("button", {
+			onClick: () => {
+				onClose();
+				onSelect(item.id);
 			},
-			ref: focusEditor,
-			style: { fontSize: Math.max(11, editor.fontSizePx) },
-			value: editor.text
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "scrawl-board__inline-editor-actions",
-			children: [
-				/* @__PURE__ */ jsxs("span", { children: [
-					"Cell (",
-					editor.row + 1,
-					", ",
-					editor.col + 1,
-					")"
-				] }),
-				/* @__PURE__ */ jsx("button", {
-					"aria-label": "Add row",
-					onMouseDown: (event) => {
-						event.preventDefault();
-						controller.content.table.addRow(editor.id);
-					},
-					"data-tooltip": "Add row",
-					type: "button",
-					children: /* @__PURE__ */ jsx(ToolIcon, { tool: "addRow" })
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"aria-label": "Add column",
-					onMouseDown: (event) => {
-						event.preventDefault();
-						controller.content.table.addCol(editor.id);
-					},
-					"data-tooltip": "Add column",
-					type: "button",
-					children: /* @__PURE__ */ jsx(ToolIcon, { tool: "addColumn" })
-				}),
-				/* @__PURE__ */ jsx("button", {
-					"aria-label": "Delete row",
-					onMouseDown: (event) => {
-						event.preventDefault();
-						controller.content.table.deleteRow(editor.id, editor.row);
-						setEditor(null);
-					},
-					"data-tooltip": "Delete row",
-					type: "button",
-					children: /* @__PURE__ */ jsx(ToolIcon, { tool: "delete" })
-				})
-			]
-		})]
-	}))] });
+			role: "menuitem",
+			type: "button",
+			children: [item.icon ?? /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "scrawl-board__menu-icon-space"
+			}), /* @__PURE__ */ jsx("span", { children: item.label })]
+		}, item.id))
+	});
+}
+/** A persistent pin where the last activity jump landed, with a pulse on arrival. */
+function JumpPin({ controller, location, arrival }) {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const place = () => {
+			const pin = ref.current;
+			if (!pin) return;
+			const root = pin.closest("[data-scrawl-root]")?.getBoundingClientRect();
+			const screen = controller.view.boardToScreen(location);
+			pin.style.left = `${screen.x - (root?.left ?? 0)}px`;
+			pin.style.top = `${screen.y - (root?.top ?? 0)}px`;
+		};
+		place();
+		return controller.on("view-change", place);
+	}, [controller, location]);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "scrawl-board__jump-pin",
+		ref,
+		children: /* @__PURE__ */ jsx("span", { className: "scrawl-board__jump-pulse" }, arrival)
+	});
 }
 //#endregion
 //#region src/ui/toolbar/compact-picker.tsx
@@ -25570,9 +25819,11 @@ var HANDLE_CORNERS = [
 * Floating toolbar above the focused note, shape, text block, or semantic
 * Rectangle/Ellipse — Colour, Size (note/text) or Width (shape), Fill/Stroke
 * (Rectangle/Ellipse), Lock/Unlock, Duplicate, Delete. Images (photos and
-* placed emoji/icons) get Lock/Duplicate/Delete only — the native gizmo
-* already resizes them. Table/timer/custom objects and plain (non-shape) ink
-* strokes never get a toolbar here — out of scope for this destination.
+* placed emoji/icons) and tables get Lock/Duplicate/Delete only — each
+* already has its own resize affordance (the native gizmo for images, edge
+* handles for tables), and a table's row/column actions live in its cell
+* editor. Timer/custom objects and plain (non-shape) ink strokes never get a
+* toolbar here — out of scope for this destination.
 *
 * Rectangle/Ellipse (Phase 2) are a second, parallel "shape" concept from
 * the legacy ink-stroke shape below: both draw from the same toolbar
@@ -25636,7 +25887,8 @@ function FocusedItemToolbar({ controller, snapshot }) {
 		locked: focused.locked,
 		anchor: focused.screenPosition
 	}, obj.id);
-	if (obj.type === "image") return /* @__PURE__ */ jsx(ToolbarShell, {
+	if (obj.type === "table" && snapshot.inlineEditing?.id === obj.id) return null;
+	if (obj.type === "image" || obj.type === "table") return /* @__PURE__ */ jsx(ToolbarShell, {
 		anchor: focused.screenPosition,
 		children: /* @__PURE__ */ jsx(LockDuplicateDelete, {
 			controller,
@@ -25657,8 +25909,8 @@ function ToolbarShell({ anchor, children }) {
 			const board = root?.getBoundingClientRect();
 			const left = Math.max(8, board?.left ?? 0);
 			const right = Math.min(window.innerWidth, board?.right ?? window.innerWidth) - 8;
-			const header = root?.querySelector(".scrawl-board__header")?.getBoundingClientRect();
-			const top = Math.max(8, header ? header.bottom + 8 : board?.top ?? 0);
+			const navigator = root?.querySelector(".scrawl-board__breadcrumb ol")?.getBoundingClientRect();
+			const top = Math.max(8, navigator ? navigator.bottom + 8 : board?.top ?? 0);
 			toolbar.style.left = `${Math.max(left, Math.min(anchor.x - toolbar.offsetWidth / 2, right - toolbar.offsetWidth))}px`;
 			toolbar.style.top = `${Math.max(top, anchor.y - toolbar.offsetHeight - 12)}px`;
 		};
@@ -26017,140 +26269,451 @@ function ShapeObjectToolbar({ controller, snapshot, shape, locked, anchor }) {
 		/* @__PURE__ */ jsxs(ToolbarShell, {
 			anchor,
 			children: [
-				/* @__PURE__ */ jsx(ColorPicker, {
-					label: "Shape fill",
-					color: shape.fill,
-					colors: INK_COLORS,
-					disabled: locked_,
-					itemLabel: "fill",
-					allowNone: true,
-					onChange: (value) => controller.content.update(shape.id, { fill: value })
+				/* @__PURE__ */ jsx(ColorPicker, {
+					label: "Shape fill",
+					color: shape.fill,
+					colors: INK_COLORS,
+					disabled: locked_,
+					itemLabel: "fill",
+					allowNone: true,
+					onChange: (value) => controller.content.update(shape.id, { fill: value })
+				}),
+				/* @__PURE__ */ jsx(ColorPicker, {
+					label: "Shape stroke",
+					color: shape.stroke,
+					colors: INK_COLORS,
+					disabled: locked_,
+					itemLabel: "stroke",
+					onChange: (value) => controller.content.update(shape.id, { stroke: value })
+				}),
+				/* @__PURE__ */ jsx(LockDuplicateDelete, {
+					controller,
+					mutable,
+					locked,
+					ids: [shape.id]
+				})
+			]
+		})
+	] });
+}
+/** One corner: drags the board point directly under the pointer, keeping the opposite corner fixed — independent width/height, no proportional lock. */
+function ShapeResizeHandle({ controller, shape, corner, x, y }) {
+	const [dragging, setDragging] = useState(false);
+	const fixedCorner = () => {
+		return {
+			x: corner === "nw" || corner === "sw" ? shape.x + shape.width : shape.x,
+			y: corner === "nw" || corner === "ne" ? shape.y - shape.height : shape.y
+		};
+	};
+	const resizeTo = (boardX, boardY) => {
+		const fixed = fixedCorner();
+		const width = Math.max(SHAPE_MIN_SIZE, Math.abs(boardX - fixed.x));
+		const height = Math.max(SHAPE_MIN_SIZE, Math.abs(boardY - fixed.y));
+		const nextX = Math.min(boardX, fixed.x);
+		const nextY = Math.max(boardY, fixed.y);
+		controller.content.update(shape.id, {
+			x: nextX,
+			y: nextY,
+			width,
+			height
+		});
+	};
+	const nudge = (dx, dy) => {
+		resizeTo((corner === "ne" || corner === "se" ? shape.x + shape.width : shape.x) + dx, (corner === "nw" || corner === "ne" ? shape.y : shape.y - shape.height) + dy);
+	};
+	return /* @__PURE__ */ jsx("span", {
+		"aria-label": `Resize shape (${corner})`,
+		role: "slider",
+		"aria-valuemin": SHAPE_MIN_SIZE,
+		"aria-valuemax": 9999,
+		"aria-valuenow": Math.round(shape.width),
+		tabIndex: 0,
+		className: "scrawl-board__focus-handle",
+		"data-orientation": corner === "nw" || corner === "se" ? "nwse" : "nesw",
+		style: {
+			left: x,
+			top: y
+		},
+		onKeyDown: (event) => {
+			if (event.key === "ArrowUp") {
+				event.preventDefault();
+				nudge(0, .5);
+			} else if (event.key === "ArrowDown") {
+				event.preventDefault();
+				nudge(0, -.5);
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				nudge(.5, 0);
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				nudge(-.5, 0);
+			}
+		},
+		onPointerDown: (event) => {
+			event.stopPropagation();
+			event.currentTarget.setPointerCapture(event.pointerId);
+			setDragging(true);
+		},
+		onPointerMove: (event) => {
+			if (!dragging) return;
+			const board = controller.view.screenToBoard({
+				x: event.clientX,
+				y: event.clientY
+			});
+			resizeTo(board.x, board.y);
+		},
+		onPointerUp: (event) => {
+			event.currentTarget.releasePointerCapture(event.pointerId);
+			setDragging(false);
+		}
+	});
+}
+function LockDuplicateDelete({ controller, mutable, locked, ids }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "scrawl-board__style-group",
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": locked ? "Unlock" : "Lock",
+				disabled: !mutable,
+				onClick: () => {
+					for (const id of ids) controller.content.update(id, locked ? { locked: false } : { locked: true });
+				},
+				"data-tooltip": locked ? "Unlock" : "Lock",
+				type: "button",
+				children: /* @__PURE__ */ jsx(ToolIcon, { tool: locked ? "lock" : "unlock" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Duplicate",
+				disabled: !mutable || locked,
+				onClick: () => {
+					const newIds = controller.content.duplicate(ids);
+					if (newIds.length) controller.content.select(newIds);
+				},
+				"data-tooltip": "Duplicate",
+				type: "button",
+				children: /* @__PURE__ */ jsx(ToolIcon, { tool: "duplicate" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": "Delete",
+				disabled: !mutable || locked,
+				onClick: () => controller.content.remove(ids),
+				"data-tooltip": "Delete",
+				type: "button",
+				children: /* @__PURE__ */ jsx(ToolIcon, { tool: "delete" })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui/dialogs/inline-editing.tsx
+/** Inline note, text, and table-cell editors — driven entirely by public controller events and commands. */
+function InlineEditors({ controller, renderPortal }) {
+	const [editor, setEditor] = useState(null);
+	const [snapshot, setSnapshot] = useState(() => controller.getSnapshot());
+	useEffect(() => controller.subscribe(() => setSnapshot(controller.getSnapshot())), [controller]);
+	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
+	const editedTable = editor?.kind === "table-cell" ? controller.query.get(editor.id) : void 0;
+	const locked = editedTable?.type === "table" && Boolean(editedTable.locked);
+	const anchorRef = useRef(null);
+	const textAreaRef = useRef(null);
+	const measureRef = useRef(null);
+	const coveredRow = editor?.kind === "table-cell" ? editor.row : void 0;
+	const coveredCol = editor?.kind === "table-cell" ? editor.col : void 0;
+	const coveredId = editor && editor.kind !== "note" ? editor.id : null;
+	useEffect(() => {
+		if (!coveredId) return;
+		controller.view.setInlineEditing(coveredRow === void 0 ? { id: coveredId } : {
+			id: coveredId,
+			row: coveredRow,
+			col: coveredCol
+		});
+		return () => {
+			if (controller.getSnapshot().status !== "disposed") controller.view.setInlineEditing(null);
+		};
+	}, [
+		controller,
+		coveredId,
+		coveredRow,
+		coveredCol
+	]);
+	const textValue = editor?.kind === "text" ? editor.text : null;
+	useLayoutEffect(() => {
+		const el = textAreaRef.current;
+		if (textValue === null || !el) return;
+		const cs = getComputedStyle(el);
+		measureRef.current ??= document.createElement("canvas").getContext("2d");
+		const measure = measureRef.current;
+		if (measure) {
+			measure.font = `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+			const widest = Math.max(...textValue.split("\n").map((line) => measure.measureText(line || " ").width));
+			const chrome = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight) + parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
+			const cap = Math.min(window.innerWidth * .6, 640);
+			el.style.width = `${Math.ceil(Math.min(cap, widest + chrome + 4))}px`;
+		}
+		el.style.height = "auto";
+		el.style.height = `${el.scrollHeight + parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth)}px`;
+	}, [textValue, editor?.kind === "text" ? editor.fontSizePx : null]);
+	/** Portal children are positioned relative to the Board root, not the viewport. */
+	const rootOffset = () => {
+		const rootRect = (anchorRef.current?.closest("[data-scrawl-root]"))?.getBoundingClientRect();
+		return {
+			left: rootRect?.left ?? 0,
+			top: rootRect?.top ?? 0
+		};
+	};
+	useEffect(() => controller.on("edit-request", (event) => {
+		const offset = rootOffset();
+		if (event.kind === "text" && event.id === null) {
+			const newId = controller.content.add({
+				type: "text",
+				x: event.boardX,
+				y: event.boardY,
+				text: "",
+				color: event.color,
+				fontSize: TEXT_DEFAULT_SIZE
+			});
+			controller.content.select([newId]);
+			setEditor({
+				...event,
+				id: newId,
+				left: event.screenRect.left - offset.left,
+				top: event.screenRect.top - offset.top
+			});
+			return;
+		}
+		setEditor({
+			...event,
+			left: event.screenRect.left - offset.left,
+			top: event.screenRect.top - offset.top
+		});
+	}), [controller]);
+	const commitNote = () => {
+		if (editor?.kind === "note") controller.content.update(editor.id, { text: editor.text });
+		setEditor(null);
+	};
+	const commitText = () => {
+		if (editor?.kind === "text" && editor.id !== null) {
+			const text = editor.text;
+			const existing = controller.query.get(editor.id);
+			if (!text.trim()) controller.content.remove([editor.id]);
+			else if (existing?.type !== "text" || existing.text !== text) controller.content.update(editor.id, { text });
+		}
+		setEditor(null);
+	};
+	const commitTableCell = () => {
+		if (editor?.kind === "table-cell") controller.content.table.commitCell(editor.id, editor.row, editor.col, editor.text);
+		setEditor(null);
+	};
+	useEffect(() => controller.on("page-changing", () => {
+		if (editor?.kind === "note") commitNote();
+		else if (editor?.kind === "text") commitText();
+		else if (editor?.kind === "table-cell") commitTableCell();
+	}));
+	const navigateTableCell = (dRow, dCol) => {
+		if (editor?.kind !== "table-cell") return;
+		controller.content.table.commitCell(editor.id, editor.row, editor.col, editor.text);
+		const table = controller.query.get(editor.id);
+		if (!table || table.type !== "table") {
+			setEditor(null);
+			return;
+		}
+		let nextCol = editor.col + dCol;
+		let nextRow = editor.row + dRow;
+		if (nextCol >= table.cols) {
+			nextCol = 0;
+			nextRow += 1;
+		} else if (nextCol < 0) {
+			nextCol = table.cols - 1;
+			nextRow -= 1;
+		}
+		if (nextRow >= table.rows) nextRow = 0;
+		if (nextRow < 0) nextRow = table.rows - 1;
+		let leftBoard = table.x;
+		for (let c = 0; c < nextCol; c++) leftBoard += table.colWidths[c] ?? 8;
+		let topBoard = table.y;
+		for (let r = 0; r < nextRow; r++) topBoard -= table.rowHeights[r] ?? 3.6;
+		const colWidth = table.colWidths[nextCol] ?? 8;
+		const rowHeight = table.rowHeights[nextRow] ?? 3.6;
+		const topLeft = controller.view.boardToScreen({
+			x: leftBoard,
+			y: topBoard
+		});
+		const bottomRight = controller.view.boardToScreen({
+			x: leftBoard + colWidth,
+			y: topBoard - rowHeight
+		});
+		const offset = rootOffset();
+		setEditor({
+			kind: "table-cell",
+			id: editor.id,
+			row: nextRow,
+			col: nextCol,
+			text: table.cells[`${nextRow},${nextCol}`] ?? "",
+			fontSizePx: editor.fontSizePx,
+			screenRect: {
+				left: topLeft.x,
+				top: topLeft.y,
+				width: Math.max(40, bottomRight.x - topLeft.x),
+				height: Math.max(24, bottomRight.y - topLeft.y)
+			},
+			left: topLeft.x - offset.left,
+			top: topLeft.y - offset.top
+		});
+	};
+	const focusEditor = useCallback((el) => {
+		textAreaRef.current = el;
+		if (!el) return;
+		const doFocus = () => {
+			try {
+				el.focus({ preventScroll: true });
+				el.setSelectionRange(el.value.length, el.value.length);
+			} catch {}
+		};
+		doFocus();
+		requestAnimationFrame(doFocus);
+	}, []);
+	if (!editor) return /* @__PURE__ */ jsx("div", {
+		ref: anchorRef,
+		style: { display: "none" }
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: anchorRef,
+		style: { display: "none" }
+	}), renderPortal(editor.kind === "note" ? /* @__PURE__ */ jsx("textarea", {
+		"aria-label": "Edit note",
+		autoFocus: true,
+		className: "scrawl-board__inline-editor scrawl-board__inline-editor--note",
+		onBlur: commitNote,
+		onChange: (event) => setEditor({
+			...editor,
+			text: event.currentTarget.value
+		}),
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Escape") commitNote();
+			if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) commitNote();
+		},
+		ref: focusEditor,
+		style: {
+			left: editor.left,
+			top: editor.top,
+			width: editor.screenRect.width,
+			height: editor.screenRect.height,
+			backgroundColor: editor.color,
+			fontSize: Math.max(12, editor.screenRect.width * 42 / 512),
+			lineHeight: 1.3,
+			padding: editor.screenRect.width * 40 / 512
+		},
+		value: editor.text
+	}) : editor.kind === "text" ? /* @__PURE__ */ jsx("textarea", {
+		"aria-label": "Edit text",
+		autoFocus: true,
+		className: "scrawl-board__inline-editor scrawl-board__inline-editor--text",
+		onBlur: commitText,
+		onChange: (event) => setEditor({
+			...editor,
+			text: event.currentTarget.value
+		}),
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Escape") commitText();
+			if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) commitText();
+		},
+		ref: focusEditor,
+		rows: Math.max(1, editor.text.split("\n").length),
+		style: {
+			left: editor.left,
+			top: editor.top,
+			color: editor.color,
+			fontSize: Math.max(12, editor.fontSizePx)
+		},
+		value: editor.text
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "scrawl-board__inline-editor--table-cell",
+		style: {
+			left: editor.left,
+			top: editor.top,
+			width: editor.screenRect.width,
+			minHeight: editor.screenRect.height
+		},
+		children: [/* @__PURE__ */ jsx("textarea", {
+			"aria-label": `Edit table cell ${editor.row + 1}, ${editor.col + 1}`,
+			autoFocus: true,
+			className: "scrawl-board__inline-editor",
+			onBlur: commitTableCell,
+			onChange: (event) => setEditor({
+				...editor,
+				text: event.currentTarget.value
+			}),
+			onKeyDown: (event) => {
+				event.stopPropagation();
+				if (event.key === "Tab") {
+					event.preventDefault();
+					navigateTableCell(0, event.shiftKey ? -1 : 1);
+				} else if (event.key === "Enter" && !event.shiftKey) {
+					event.preventDefault();
+					navigateTableCell(1, 0);
+				} else if (event.key === "Escape") commitTableCell();
+			},
+			ref: focusEditor,
+			style: { fontSize: Math.max(11, editor.fontSizePx) },
+			value: editor.text
+		}), /* @__PURE__ */ jsxs("div", {
+			"aria-label": "Selected object",
+			className: "scrawl-board__inline-editor-actions",
+			role: "toolbar",
+			children: [
+				/* @__PURE__ */ jsxs("span", { children: [
+					"Cell (",
+					editor.row + 1,
+					", ",
+					editor.col + 1,
+					")"
+				] }),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": "Add row",
+					onMouseDown: (event) => {
+						event.preventDefault();
+						controller.content.table.addRow(editor.id);
+					},
+					"data-tooltip": "Add row",
+					type: "button",
+					children: /* @__PURE__ */ jsx(ToolIcon, { tool: "addRow" })
 				}),
-				/* @__PURE__ */ jsx(ColorPicker, {
-					label: "Shape stroke",
-					color: shape.stroke,
-					colors: INK_COLORS,
-					disabled: locked_,
-					itemLabel: "stroke",
-					onChange: (value) => controller.content.update(shape.id, { stroke: value })
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": "Add column",
+					onMouseDown: (event) => {
+						event.preventDefault();
+						controller.content.table.addCol(editor.id);
+					},
+					"data-tooltip": "Add column",
+					type: "button",
+					children: /* @__PURE__ */ jsx(ToolIcon, { tool: "addColumn" })
+				}),
+				/* @__PURE__ */ jsx("button", {
+					"aria-label": "Delete row",
+					onMouseDown: (event) => {
+						event.preventDefault();
+						controller.content.table.deleteRow(editor.id, editor.row);
+						setEditor(null);
+					},
+					"data-tooltip": "Delete row",
+					type: "button",
+					children: /* @__PURE__ */ jsx(ToolIcon, { tool: "deleteRow" })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "scrawl-board__toolbar-divider"
 				}),
 				/* @__PURE__ */ jsx(LockDuplicateDelete, {
 					controller,
-					mutable,
+					ids: [editor.id],
 					locked,
-					ids: [shape.id]
+					mutable
 				})
 			]
-		})
-	] });
-}
-/** One corner: drags the board point directly under the pointer, keeping the opposite corner fixed — independent width/height, no proportional lock. */
-function ShapeResizeHandle({ controller, shape, corner, x, y }) {
-	const [dragging, setDragging] = useState(false);
-	const fixedCorner = () => {
-		return {
-			x: corner === "nw" || corner === "sw" ? shape.x + shape.width : shape.x,
-			y: corner === "nw" || corner === "ne" ? shape.y - shape.height : shape.y
-		};
-	};
-	const resizeTo = (boardX, boardY) => {
-		const fixed = fixedCorner();
-		const width = Math.max(SHAPE_MIN_SIZE, Math.abs(boardX - fixed.x));
-		const height = Math.max(SHAPE_MIN_SIZE, Math.abs(boardY - fixed.y));
-		const nextX = Math.min(boardX, fixed.x);
-		const nextY = Math.max(boardY, fixed.y);
-		controller.content.update(shape.id, {
-			x: nextX,
-			y: nextY,
-			width,
-			height
-		});
-	};
-	const nudge = (dx, dy) => {
-		resizeTo((corner === "ne" || corner === "se" ? shape.x + shape.width : shape.x) + dx, (corner === "nw" || corner === "ne" ? shape.y : shape.y - shape.height) + dy);
-	};
-	return /* @__PURE__ */ jsx("span", {
-		"aria-label": `Resize shape (${corner})`,
-		role: "slider",
-		"aria-valuemin": SHAPE_MIN_SIZE,
-		"aria-valuemax": 9999,
-		"aria-valuenow": Math.round(shape.width),
-		tabIndex: 0,
-		className: "scrawl-board__focus-handle",
-		"data-orientation": corner === "nw" || corner === "se" ? "nwse" : "nesw",
-		style: {
-			left: x,
-			top: y
-		},
-		onKeyDown: (event) => {
-			if (event.key === "ArrowUp") {
-				event.preventDefault();
-				nudge(0, .5);
-			} else if (event.key === "ArrowDown") {
-				event.preventDefault();
-				nudge(0, -.5);
-			} else if (event.key === "ArrowRight") {
-				event.preventDefault();
-				nudge(.5, 0);
-			} else if (event.key === "ArrowLeft") {
-				event.preventDefault();
-				nudge(-.5, 0);
-			}
-		},
-		onPointerDown: (event) => {
-			event.stopPropagation();
-			event.currentTarget.setPointerCapture(event.pointerId);
-			setDragging(true);
-		},
-		onPointerMove: (event) => {
-			if (!dragging) return;
-			const board = controller.view.screenToBoard({
-				x: event.clientX,
-				y: event.clientY
-			});
-			resizeTo(board.x, board.y);
-		},
-		onPointerUp: (event) => {
-			event.currentTarget.releasePointerCapture(event.pointerId);
-			setDragging(false);
-		}
-	});
-}
-function LockDuplicateDelete({ controller, mutable, locked, ids }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "scrawl-board__style-group",
-		children: [
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": locked ? "Unlock" : "Lock",
-				disabled: !mutable,
-				onClick: () => {
-					for (const id of ids) controller.content.update(id, locked ? { locked: false } : { locked: true });
-				},
-				"data-tooltip": locked ? "Unlock" : "Lock",
-				type: "button",
-				children: /* @__PURE__ */ jsx(ToolIcon, { tool: locked ? "lock" : "unlock" })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Duplicate",
-				disabled: !mutable || locked,
-				onClick: () => {
-					const newIds = controller.content.duplicate(ids);
-					if (newIds.length) controller.content.select(newIds);
-				},
-				"data-tooltip": "Duplicate",
-				type: "button",
-				children: /* @__PURE__ */ jsx(ToolIcon, { tool: "duplicate" })
-			}),
-			/* @__PURE__ */ jsx("button", {
-				"aria-label": "Delete",
-				disabled: !mutable || locked,
-				onClick: () => controller.content.remove(ids),
-				"data-tooltip": "Delete",
-				type: "button",
-				children: /* @__PURE__ */ jsx(ToolIcon, { tool: "delete" })
-			})
-		]
-	});
+		})]
+	}))] });
 }
 //#endregion
 //#region src/ui/toolbar/board-tooltips.tsx
@@ -26212,7 +26775,7 @@ function BoardTooltips({ renderPortal }) {
 		document.addEventListener("focusin", show);
 		document.addEventListener("focusout", leave);
 		document.addEventListener("pointerdown", hide);
-		document.addEventListener("keydown", key);
+		document.addEventListener("keydown", key, true);
 		window.addEventListener("scroll", hide, true);
 		window.addEventListener("resize", hide);
 		return () => {
@@ -26222,11 +26785,22 @@ function BoardTooltips({ renderPortal }) {
 			document.removeEventListener("focusin", show);
 			document.removeEventListener("focusout", leave);
 			document.removeEventListener("pointerdown", hide);
-			document.removeEventListener("keydown", key);
+			document.removeEventListener("keydown", key, true);
 			window.removeEventListener("scroll", hide, true);
 			window.removeEventListener("resize", hide);
 		};
 	}, []);
+	useEffect(() => {
+		if (!active) return;
+		const observer = new MutationObserver(() => {
+			if (!active.element.isConnected) setActive(null);
+		});
+		observer.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [active]);
 	useLayoutEffect(() => {
 		if (!active || !tooltip.current) return;
 		const box = active.element.getBoundingClientRect();
@@ -26745,9 +27319,18 @@ var INKS = [
 	["Forest", "#315d46"],
 	["Oxblood", "#773f3b"]
 ];
-function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons, commentAuthor }) {
+var ACTIVITY_KIND = {
+	create: "added",
+	update: "updated",
+	delete: "removed",
+	comment: "commented",
+	share: "shared",
+	export: "exported"
+};
+function DefaultBoardChrome({ controller, snapshot, renderPortal, className, style, regions, slots, icons, commentAuthor, onShare, activity, commentFeed, permissions, menuItems }) {
 	const [welcomeDismissed, setWelcomeDismissed] = useState(false);
 	const [panel, setPanel] = useState(null);
+	const [searchOpen, setSearchOpen] = useState(false);
 	const [pagesOpen, setPagesOpen] = useState(false);
 	const [moreOpen, setMoreOpen] = useState(false);
 	const [query, setQuery] = useState("");
@@ -26768,8 +27351,17 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 	const enabled = (region) => regions?.[region] !== false;
 	const mutable = snapshot.status === "ready" && !snapshot.readOnly;
 	useEffect(() => {
-		if (panel === "search") searchRef.current?.focus();
-	}, [panel]);
+		if (searchOpen) searchRef.current?.focus();
+	}, [searchOpen]);
+	useEffect(() => {
+		if (!searchOpen) return;
+		const dismiss = (event) => {
+			if (searchRef.current?.value) return;
+			if (!event.target.closest?.(".scrawl-board__actions")) setSearchOpen(false);
+		};
+		document.addEventListener("pointerdown", dismiss);
+		return () => document.removeEventListener("pointerdown", dismiss);
+	}, [searchOpen]);
 	useEffect(() => {
 		const root = chromeRef.current;
 		if (!root) return;
@@ -26866,10 +27458,90 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 			root.removeEventListener("drop", drop);
 		};
 	}, [imagesEnabled]);
+	const [localActivity, setLocalActivity] = useState([]);
+	const [localActivityUnread, setLocalActivityUnread] = useState(0);
+	const hostActivity = activity?.entries;
+	const actorName = commentAuthor?.name ?? "You";
+	useEffect(() => {
+		if (hostActivity) return;
+		let sequence = 0;
+		return controller.on("audit", (payload) => {
+			const event = payload;
+			queueMicrotask(() => {
+				const selected = controller.getSnapshot().selection[0];
+				const box = selected && event.action !== "delete" ? controller.query.bounds(selected) : void 0;
+				const entry = {
+					id: `session-${Date.now()}-${sequence++}`,
+					kind: ACTIVITY_KIND[event.action] ?? "updated",
+					title: event.summary.charAt(0).toUpperCase() + event.summary.slice(1),
+					actorName,
+					at: Date.now(),
+					...box ? { location: {
+						x: (box.minX + box.maxX) / 2,
+						y: (box.minY + box.maxY) / 2
+					} } : {}
+				};
+				setLocalActivity((list) => [entry, ...list].slice(0, 200));
+				setLocalActivityUnread((count) => count + 1);
+			});
+		});
+	}, [
+		controller,
+		hostActivity,
+		actorName
+	]);
+	const activityEntries = hostActivity ?? localActivity;
+	const activityUnread = activity?.unreadCount ?? (hostActivity ? 0 : localActivityUnread);
+	const commentsUnread = commentFeed?.unreadCount ?? 0;
+	const markActivityRead = () => {
+		setLocalActivityUnread(0);
+		if (activityUnread > 0) activity?.onMarkAllRead?.();
+	};
+	const markCommentsRead = () => {
+		if (commentsUnread > 0) commentFeed?.onMarkAllRead?.();
+	};
+	const showComments = enabled("comments");
+	const showActivity = enabled("activity");
+	const [jumpPin, setJumpPin] = useState(null);
+	const jumpTo = (location) => {
+		controller.view.centerOn(location);
+		setJumpPin({
+			location,
+			arrival: Date.now()
+		});
+	};
+	const moreItems = [
+		...enabled("import") && mutable ? [{
+			id: "scrawl:import",
+			label: "Import board JSON",
+			icon: /* @__PURE__ */ jsx(ToolIcon, { tool: "import" })
+		}] : [],
+		...permissions?.canManage ? [{
+			id: "scrawl:permissions",
+			label: "Manage permissions",
+			icon: /* @__PURE__ */ jsx(ToolIcon, { tool: "shield" })
+		}] : [],
+		...menuItems ?? []
+	];
+	const selectMoreItem = (id) => {
+		if (id === "scrawl:import") importRef.current?.click();
+		else if (id === "scrawl:permissions") {
+			const more = chromeRef.current?.querySelector("[aria-label=\"More board actions\"]");
+			if (more) open("permissions", more);
+		} else menuItems?.find((item) => item.id === id)?.onSelect();
+	};
 	const open = (next, opener) => {
 		setMoreOpen(false);
+		if (!searchRef.current?.value) setSearchOpen(false);
 		openerRef.current = opener;
 		setPanel(next);
+		if (next === "comments") markCommentsRead();
+		if (next === "activity") markActivityRead();
+	};
+	/** A header button opens its own panel, or closes it if it's already open. */
+	const toggle = (next, opener) => {
+		if (panel === next) close();
+		else open(next, opener);
 	};
 	const close = useCallback(() => {
 		setPanel(null);
@@ -26914,12 +27586,9 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 			return;
 		}
 		if (modifier && event.key.toLowerCase() === "f" && enabled("search")) {
-			const opener = chromeRef.current?.querySelector("[aria-label=\"Search Board\"]");
-			if (opener) {
-				event.preventDefault();
-				event.stopPropagation();
-				open("search", opener);
-			}
+			event.preventDefault();
+			event.stopPropagation();
+			setSearchOpen(true);
 			return;
 		}
 		if (editing) return;
@@ -26981,14 +27650,149 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 		ref: chromeRef,
 		style,
 		children: [
-			enabled("pages") && /* @__PURE__ */ jsx(NotebookNavigation, {
-				controller,
-				snapshot,
-				onOpen: () => {
-					setPagesOpen(true);
-					setMoreOpen(false);
-					setPanel(null);
-				}
+			/* @__PURE__ */ jsxs("div", {
+				className: "scrawl-board__topbar",
+				children: [enabled("pages") && /* @__PURE__ */ jsx("div", {
+					className: "scrawl-board__navigator",
+					children: /* @__PURE__ */ jsx(NotebookNavigation, {
+						controller,
+						snapshot
+					})
+				}), renderSlot(slots?.topBar, (enabled("search") || enabled("export") || showComments || showActivity || moreItems.length > 0 || onShare) && /* @__PURE__ */ jsxs("div", {
+					className: "scrawl-board__header-actions",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							"aria-label": "Board actions",
+							className: "scrawl-board__actions",
+							role: "toolbar",
+							children: [
+								enabled("search") && /* @__PURE__ */ jsxs("div", {
+									className: "scrawl-board__search",
+									"data-open": searchOpen ? "" : void 0,
+									"data-scrawl-search": "",
+									children: [
+										/* @__PURE__ */ jsx("button", {
+											"aria-label": "Search Board",
+											"aria-expanded": searchOpen,
+											"data-tooltip": "Search",
+											type: "button",
+											onClick: () => {
+												if (searchOpen && !query) setSearchOpen(false);
+												else setSearchOpen(true);
+												searchRef.current?.focus();
+											},
+											children: /* @__PURE__ */ jsx(ToolIcon, { tool: "search" })
+										}),
+										/* @__PURE__ */ jsx("input", {
+											"aria-label": "Search Board",
+											className: "scrawl-board__search-input",
+											placeholder: "Search this board…",
+											ref: searchRef,
+											tabIndex: searchOpen ? void 0 : -1,
+											type: "search",
+											value: query,
+											onChange: (event) => setQuery(event.currentTarget.value),
+											onKeyDown: (event) => {
+												event.stopPropagation();
+												if (event.key !== "Escape") return;
+												event.preventDefault();
+												setQuery("");
+												setSearchOpen(false);
+												chromeRef.current?.querySelector("[aria-label=\"Search Board\"]")?.focus();
+											}
+										}),
+										searchOpen && query && /* @__PURE__ */ jsx("div", {
+											"aria-live": "polite",
+											className: "scrawl-board__search-results",
+											"data-scrawl-search-results": "",
+											children: results.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No matching Board content." }) : results.map((result) => /* @__PURE__ */ jsxs("button", {
+												type: "button",
+												onClick: () => {
+													if (result.kind === "comment") controller.comments.open(result.id);
+													else controller.content.select([result.id]);
+													controller.view.centerOn({
+														x: result.x,
+														y: result.y
+													});
+													setAnnouncement(`${result.title} selected`);
+													setQuery("");
+													setSearchOpen(false);
+												},
+												children: [/* @__PURE__ */ jsx("strong", { children: result.title }), /* @__PURE__ */ jsx("span", { children: result.snippet })]
+											}, `${result.kind}:${result.id}`))
+										})
+									]
+								}),
+								enabled("export") && /* @__PURE__ */ jsx("button", {
+									"aria-label": "Export Board",
+									"aria-expanded": panel === "export",
+									onClick: (event) => toggle("export", event.currentTarget),
+									"data-tooltip": "Export",
+									type: "button",
+									children: /* @__PURE__ */ jsx(ToolIcon, { tool: "export" })
+								}),
+								showComments && /* @__PURE__ */ jsxs("button", {
+									"aria-expanded": panel === "comments",
+									"aria-label": commentsUnread > 0 ? `Comments (${commentsUnread} unread)` : "Comments",
+									"data-tooltip": "Comments",
+									type: "button",
+									onClick: (event) => toggle("comments", event.currentTarget),
+									children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "comment" }), commentsUnread > 0 && /* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										className: "scrawl-board__badge",
+										children: commentsUnread > 99 ? "99+" : commentsUnread
+									})]
+								}),
+								showActivity && /* @__PURE__ */ jsxs("button", {
+									"aria-expanded": panel === "activity",
+									"aria-label": activityUnread > 0 ? `Recent activity (${activityUnread} unread)` : "Recent activity",
+									"data-tooltip": "Recent activity",
+									type: "button",
+									onClick: (event) => toggle("activity", event.currentTarget),
+									children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "activity" }), activityUnread > 0 && /* @__PURE__ */ jsx("span", {
+										"aria-hidden": "true",
+										className: "scrawl-board__badge",
+										children: activityUnread > 99 ? "99+" : activityUnread
+									})]
+								}),
+								moreItems.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "scrawl-board__actions-divider"
+								}), /* @__PURE__ */ jsx("button", {
+									"aria-expanded": panel === "more",
+									"aria-haspopup": "menu",
+									"aria-label": "More board actions",
+									"data-tooltip": "More",
+									type: "button",
+									onClick: (event) => toggle("more", event.currentTarget),
+									children: /* @__PURE__ */ jsx(ToolIcon, { tool: "moreVertical" })
+								})] })
+							]
+						}),
+						onShare && /* @__PURE__ */ jsxs("button", {
+							className: "scrawl-board__share",
+							onClick: onShare,
+							type: "button",
+							children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "share" }), /* @__PURE__ */ jsx("span", { children: "Share" })]
+						}),
+						enabled("import") && /* @__PURE__ */ jsx("input", {
+							accept: "application/json,.json",
+							"aria-label": "Choose Board JSON",
+							className: "scrawl-board__file-input",
+							onChange: (event) => {
+								importDocument(event.currentTarget.files?.[0]);
+								event.currentTarget.value = "";
+							},
+							ref: importRef,
+							type: "file"
+						}),
+						panel === "more" && /* @__PURE__ */ jsx(BoardMoreMenu, {
+							items: moreItems,
+							onClose: close,
+							onSelect: selectMoreItem
+						})
+					]
+				}))]
 			}),
 			enabled("pages") && /* @__PURE__ */ jsx(PagesPanel, {
 				controller,
@@ -27090,45 +27894,29 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 					})]
 				})]
 			}),
-			renderSlot(slots?.topBar, (enabled("search") || enabled("import") || enabled("export")) && /* @__PURE__ */ jsxs("div", {
-				"aria-label": "Board actions",
-				className: "scrawl-board__actions",
-				role: "toolbar",
-				children: [
-					enabled("search") && /* @__PURE__ */ jsx("button", {
-						"aria-label": "Search Board",
-						onClick: (event) => open("search", event.currentTarget),
-						"data-tooltip": "Search",
-						type: "button",
-						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "search" })
-					}),
-					enabled("import") && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-						"aria-label": "Import Board JSON",
-						disabled: !mutable,
-						onClick: () => importRef.current?.click(),
-						"data-tooltip": "Import",
-						type: "button",
-						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "import" })
-					}), /* @__PURE__ */ jsx("input", {
-						accept: "application/json,.json",
-						"aria-label": "Choose Board JSON",
-						className: "scrawl-board__file-input",
-						onChange: (event) => {
-							importDocument(event.currentTarget.files?.[0]);
-							event.currentTarget.value = "";
-						},
-						ref: importRef,
-						type: "file"
-					})] }),
-					enabled("export") && /* @__PURE__ */ jsx("button", {
-						"aria-label": "Export Board",
-						onClick: (event) => open("export", event.currentTarget),
-						"data-tooltip": "Export",
-						type: "button",
-						children: /* @__PURE__ */ jsx(ToolIcon, { tool: "export" })
-					})
-				]
-			})),
+			panel === "comments" && /* @__PURE__ */ jsx(CommentsDrawer, {
+				comments: controller.comments.list(),
+				controller,
+				onClose: close,
+				onMarkAllRead: markCommentsRead,
+				unread: commentsUnread
+			}),
+			panel === "activity" && /* @__PURE__ */ jsx(ActivityDrawer, {
+				entries: activityEntries,
+				onClose: close,
+				onJump: jumpTo,
+				onMarkAllRead: markActivityRead,
+				unread: activityUnread
+			}),
+			panel === "permissions" && permissions && /* @__PURE__ */ jsx(PermissionsDrawer, {
+				onClose: close,
+				permissions
+			}),
+			jumpPin && /* @__PURE__ */ jsx(JumpPin, {
+				arrival: jumpPin.arrival,
+				controller,
+				location: jumpPin.location
+			}),
 			renderSlot(slots?.toolbar, (enabled("tools") || enabled("style") || enabled("history") || enabled("pages")) && /* @__PURE__ */ jsxs("div", {
 				"aria-label": "Board tools",
 				className: "scrawl-board__tools",
@@ -27334,47 +28122,16 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 					}, color))
 				})
 			})),
-			panel === "search" && renderPortal(/* @__PURE__ */ jsx(ChromePanel, {
-				anchor: "actions",
-				label: "Search Board",
-				onClose: close,
-				slot: slots?.dialogs,
-				children: /* @__PURE__ */ jsxs("div", {
-					"data-scrawl-search": "",
-					children: [/* @__PURE__ */ jsxs("label", { children: ["Search Board", /* @__PURE__ */ jsx("input", {
-						onChange: (event) => setQuery(event.currentTarget.value),
-						ref: searchRef,
-						type: "search",
-						value: query
-					})] }), /* @__PURE__ */ jsx("div", {
-						"aria-live": "polite",
-						"data-scrawl-search-results": "",
-						children: query && results.length === 0 ? /* @__PURE__ */ jsx("p", { children: "No matching Board content." }) : results.map((result) => /* @__PURE__ */ jsxs("button", {
-							onClick: () => {
-								if (result.kind === "comment") controller.comments.open(result.id);
-								else controller.content.select([result.id]);
-								controller.view.centerOn({
-									x: result.x,
-									y: result.y
-								});
-								setAnnouncement(`${result.title} selected`);
-								close();
-							},
-							type: "button",
-							children: [/* @__PURE__ */ jsx("strong", { children: result.title }), /* @__PURE__ */ jsx("span", { children: result.snippet })]
-						}, `${result.kind}:${result.id}`))
-					})]
-				})
-			})),
 			panel === "export" && renderPortal(/* @__PURE__ */ jsx(ChromePanel, {
 				anchor: "actions",
+				headless: true,
 				label: "Export Board",
 				onClose: close,
 				slot: slots?.dialogs,
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "scrawl-board__export-options",
 					children: [
-						/* @__PURE__ */ jsx("button", {
+						/* @__PURE__ */ jsxs("button", {
 							"aria-label": "Export PNG",
 							onClick: () => {
 								controller.export.png().then((blob) => blob && download(blob, `${snapshot.documentId}.png`));
@@ -27382,9 +28139,9 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 								close();
 							},
 							type: "button",
-							children: "PNG image"
+							children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "image" }), /* @__PURE__ */ jsx("span", { children: "Export as PNG" })]
 						}),
-						/* @__PURE__ */ jsx("button", {
+						/* @__PURE__ */ jsxs("button", {
 							"aria-label": "Export SVG",
 							onClick: () => {
 								download(new Blob([controller.export.svg()], { type: "image/svg+xml" }), `${snapshot.documentId}.svg`);
@@ -27392,9 +28149,9 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 								close();
 							},
 							type: "button",
-							children: "SVG vector"
+							children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "shape:triangle" }), /* @__PURE__ */ jsx("span", { children: "Export as SVG" })]
 						}),
-						/* @__PURE__ */ jsx("button", {
+						/* @__PURE__ */ jsxs("button", {
 							"aria-label": "Export JSON",
 							onClick: () => {
 								download(new Blob([JSON.stringify(controller.export.json(), null, 2)], { type: "application/json" }), `${snapshot.documentId}.json`);
@@ -27402,7 +28159,7 @@ function DefaultBoardChrome({ controller, snapshot, renderPortal, className, sty
 								close();
 							},
 							type: "button",
-							children: "Board JSON"
+							children: [/* @__PURE__ */ jsx(ToolIcon, { tool: "page" }), /* @__PURE__ */ jsx("span", { children: "Export as JSON" })]
 						})
 					]
 				})
@@ -27719,7 +28476,7 @@ function ScrawlProvider({ controller, children, preset = "light", theme, portalC
 * field except `canvas` (pass `canvas={null}` for a headless board, or an
 * existing `<canvas>` element to control its identity yourself).
 */
-function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, icons, ...options }) {
+function Scrawl({ children, preset, theme, portalContainer, className, style, onReady, onError, onThemeDiagnostic, canvas: suppliedCanvas, icons, onShare, activity, commentFeed, permissions, menuItems, ...options }) {
 	const [runtime, setRuntime] = useState(null);
 	const runtimeRef = useRef(null);
 	const ownedCanvasRef = useRef(null);
@@ -27816,8 +28573,13 @@ function Scrawl({ children, preset, theme, portalContainer, className, style, on
 		className,
 		style,
 		children: [runtime.canvas && /* @__PURE__ */ jsx(ScrawlCanvas, { element: runtime.canvas }), children ?? /* @__PURE__ */ jsx(ScrawlDefaultUI, {
+			activity,
 			commentAuthor: options.identity,
-			icons
+			commentFeed,
+			icons,
+			menuItems,
+			onShare,
+			permissions
 		})]
 	});
 }
@@ -27854,12 +28616,17 @@ function ScrawlCanvas({ element, className, style, "aria-label": ariaLabel = "Sc
 		style
 	});
 }
-function ScrawlDefaultUI({ className, style, regions, slots, icons, commentAuthor }) {
+function ScrawlDefaultUI({ className, style, regions, slots, icons, commentAuthor, onShare, activity, commentFeed, permissions, menuItems }) {
 	return /* @__PURE__ */ jsx(DefaultBoardChrome, {
+		activity,
 		className,
 		commentAuthor,
+		commentFeed,
 		controller: useScrawlController(),
 		icons,
+		menuItems,
+		onShare,
+		permissions,
 		regions,
 		renderPortal: (children) => /* @__PURE__ */ jsx(ScrawlPortal, { children }),
 		slots,