dsh-figmark 1.1.3 → 1.2.0

package/lib/client.js

@@ -4,6 +4,7 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		let react_dom = require("react-dom");
 		let react = require("react");
 		let react_jsx_runtime = require("react/jsx-runtime");
 		//#region src/client/locales.ts
@@ -32,11 +33,28 @@ window.__ModuleLoader__.load({
 			summary: "总体目标",
 			summaryPlaceholder: "可选：这张图整体要往哪个方向改（智能体会连同下面逐条说明一起读）",
 			marks: "标注清单",
+			markPage: "{page} 页",
+			markKindLabel: "图形：{kind}",
+			revealMark: "跳到这一处",
 			noMarks: "还没有标注",
 			noMarksHint: "选一个工具，在图上点一下或拖一下就开始。",
 			delete: "删除",
 			close: "关闭",
 			dock: "批注操作",
+			menuLabel: "图片操作",
+			menuSendToAgent: "发送给智能体",
+			menuSendToComposer: "发送到对话框",
+			menuOpen: "用默认应用打开",
+			menuReveal: "在文件管理器中显示",
+			menuCopyImage: "复制图片",
+			menuCopyRelative: "复制相对地址",
+			menuCopyAbsolute: "复制绝对地址",
+			menuOpened: "已请求用默认应用打开",
+			menuOpenFailed: "无法打开，请重试",
+			menuRevealed: "已请求在文件管理器中显示",
+			menuRevealFailed: "无法在文件管理器中显示，请重试",
+			menuCopied: "已复制路径",
+			menuCopyFailed: "复制失败，请重试",
 			sendToAgent: "发送给智能体",
 			sendToComposer: "发送到对话框",
 			sending: "正在发送…",
@@ -55,6 +73,10 @@ window.__ModuleLoader__.load({
 			pdfTitle: "PDF 批注",
 			previousPage: "上一页",
 			nextPage: "下一页",
+			pageJump: "跳转页码",
+			pageOf: "{page} / {pages}",
+			pagerLabel: "翻页",
+			sendNone: "还没有标注可发送",
 			pdfRendering: "正在渲染这一页…",
 			pdfOpenFailed: "打开 PDF 失败：",
 			documentScope: "共 {pages} 页 · {marks} 处批注",
@@ -120,11 +142,28 @@ window.__ModuleLoader__.load({
 			summary: "Overall goal",
 			summaryPlaceholder: "Optional: what this figure should become overall (the agent reads it with the marks below)",
 			marks: "Marks",
+			markPage: "p. {page}",
+			markKindLabel: "Shape: {kind}",
+			revealMark: "Go to this mark",
 			noMarks: "No marks yet",
 			noMarksHint: "Pick a tool, then click or drag on the figure to start.",
 			delete: "Delete",
 			close: "Close",
 			dock: "Annotation actions",
+			menuLabel: "Figure actions",
+			menuSendToAgent: "Send to agent",
+			menuSendToComposer: "Send to composer",
+			menuOpen: "Open with default app",
+			menuReveal: "Reveal in File Manager",
+			menuCopyImage: "Copy image",
+			menuCopyRelative: "Copy relative path",
+			menuCopyAbsolute: "Copy absolute path",
+			menuOpened: "Asked the system to open it",
+			menuOpenFailed: "Could not open it; please try again",
+			menuRevealed: "Asked the file manager to show it",
+			menuRevealFailed: "Could not reveal it; please try again",
+			menuCopied: "Path copied",
+			menuCopyFailed: "Could not copy; please try again",
 			sendToAgent: "Send to agent",
 			sendToComposer: "Send to composer",
 			sending: "Sending…",
@@ -143,6 +182,10 @@ window.__ModuleLoader__.load({
 			pdfTitle: "PDF annotations",
 			previousPage: "Previous page",
 			nextPage: "Next page",
+			pageJump: "Go to page",
+			pageOf: "{page} / {pages}",
+			pagerLabel: "Paging",
+			sendNone: "Nothing to send yet",
 			pdfRendering: "Rendering this page…",
 			pdfOpenFailed: "Opening the PDF failed: ",
 			documentScope: "{pages} pages · {marks} marks",
@@ -3222,6 +3265,182 @@ window.__ModuleLoader__.load({
 				}));
 			} catch {}
 		}
+		/**
+		* Keep a menu wholly inside the window.
+		*
+		* A right-click near the bottom edge would otherwise open rows below it, where
+		* they cannot be reached; the same on the right. Both axes are clamped
+		* independently, so a click in one corner only moves the menu as far as it has
+		* to move.
+		* @param at - the click, in viewport coordinates.
+		* @param viewport - visible width and height.
+		* @param size - the menu's own width and height.
+		* @returns the viewport position to place the menu's top-left corner at.
+		*/
+		function clampMenu(at, viewport, size) {
+			const rightmost = viewport.width - size.width - 8;
+			const bottommost = viewport.height - size.height - 8;
+			return {
+				left: Math.max(8, Math.min(at.x, rightmost)),
+				top: Math.max(8, Math.min(at.y, bottommost))
+			};
+		}
+		/**
+		* Read a path relative to the directory a Session runs in.
+		*
+		* The figure is usually somewhere under the workspace, which is what makes a
+		* relative path worth copying at all — it survives the project being moved. A
+		* figure outside the workspace, or a Session whose directory is unknown, has no
+		* such path, and the menu leaves the row out rather than offering one that would
+		* not resolve.
+		* @param path - absolute path of the figure.
+		* @param cwd - absolute workspace directory, or null when it is unknown.
+		* @returns the relative path, or null when there is not one.
+		*/
+		function relativeTo(path, cwd) {
+			if (cwd === null) return null;
+			const prefix = `${cwd}${cwd.endsWith("/") || cwd.endsWith("\\") ? "" : "/"}`;
+			if (!path.startsWith(prefix)) return null;
+			const rest = path.slice(prefix.length);
+			return rest === "" || rest.startsWith("..") ? null : rest;
+		}
+		/**
+		* The rows this figure's menu should show.
+		*
+		* Three groups, in the order a reader wants them: the two Host gestures (only
+		* where the Host has a desktop to perform them), then the two copies, then — for
+		* a figure outside the workspace — no relative row at all, because there is no
+		* path from the workspace to it.
+		* @param options - what the Host can do, and whether a relative path exists.
+		* @param labels - the four rows' words.
+		* @returns the rows, in the order they are drawn.
+		*/
+		function figureMenuItems(options, labels) {
+			const items = [];
+			if (options.canSend) items.push({
+				id: "sendToAgent",
+				label: labels.sendToAgent
+			}, {
+				id: "sendToComposer",
+				label: labels.sendToComposer
+			});
+			if (options.canOpen) items.push({
+				id: "open",
+				label: labels.open
+			}, {
+				id: "reveal",
+				label: labels.reveal
+			});
+			if (options.hasImage) items.push({
+				id: "copyImage",
+				label: labels.copyImage
+			});
+			if (options.hasRelative) items.push({
+				id: "copyRelative",
+				label: labels.copyRelative
+			});
+			items.push({
+				id: "copyAbsolute",
+				label: labels.copyAbsolute
+			});
+			return items;
+		}
+		/**
+		* Whether a pointer press landed inside the menu.
+		*
+		* A menu closes when the reader presses anywhere else, and "anywhere else" has to
+		* be answered without knowing what was pressed: the event's composed path is the
+		* one list that names every element between the target and the window, including
+		* ones inside a shadow root.
+		* @param event - the press.
+		* @param panel - the menu element, or null before it has been attached.
+		* @returns true when the press belongs to the menu itself.
+		*/
+		function pressedInsideMenu(event, panel) {
+			return panel !== null && event.composedPath().includes(panel);
+		}
+		/**
+		* The text one copy row puts on the clipboard.
+		* @param action - the row that was picked.
+		* @param path - absolute path of the figure.
+		* @param workspace - absolute workspace directory, or null when it is unknown.
+		* @returns the text to copy, or null when the relative row has nothing to copy.
+		*/
+		function copiedText(action, path, workspace) {
+			return action === "copyRelative" ? relativeTo(path, workspace) : path;
+		}
+		//#endregion
+		//#region src/client/host-actions.ts
+		/**
+		* Whether the Host can open paths at all.
+		*
+		* A remote Session has no desktop, and asking it to open a file would fail on
+		* every row. Answering once at mount keeps the menu from offering gestures the
+		* Session cannot perform; a failed probe reads as "no", which loses only the
+		* rows, never a working one.
+		* @param remote - the injected service, if the composition has one.
+		* @returns whether the menu may offer open and reveal.
+		*/
+		async function desktopAvailable(remote) {
+			if (remote === void 0) return false;
+			try {
+				const result = await remote.session.canOpenWorkspacePath();
+				return result.ok && result.value === true;
+			} catch {
+				return false;
+			}
+		}
+		/**
+		* Open one path in its default application.
+		* @param remote - the injected service.
+		* @param path - absolute path on the Host.
+		* @returns whether the Host accepted it.
+		*/
+		async function openOnDesktop(remote, path) {
+			if (remote === void 0) return false;
+			try {
+				return (await remote.session.openWorkspacePath({ path })).ok;
+			} catch {
+				return false;
+			}
+		}
+		/**
+		* Reveal one path in the Host's file manager.
+		* @param remote - the injected service.
+		* @param path - absolute path on the Host.
+		* @returns whether the Host accepted it.
+		*/
+		async function revealOnDesktop(remote, path) {
+			if (remote === void 0) return false;
+			try {
+				return (await remote.session.openWorkspacePath({
+					path,
+					action: "reveal"
+				})).ok;
+			} catch {
+				return false;
+			}
+		}
+		/**
+		* Put a picture on the clipboard.
+		*
+		* The async Clipboard API only accepts a PNG, and only from a user gesture — both
+		* of which a menu row is. A browser without it (or a document that refuses the
+		* write) is reported as a refusal rather than thrown, because the caller's next
+		* move is the same either way: tell the reader it did not work.
+		* @param bytes - the PNG the menu composed.
+		* @returns whether the clipboard took it.
+		*/
+		async function copyImageToClipboard(bytes) {
+			try {
+				const clipboard = navigator.clipboard;
+				if (clipboard === void 0 || typeof clipboard.write !== "function") return false;
+				await clipboard.write([new ClipboardItem({ "image/png": bytes })]);
+				return true;
+			} catch {
+				return false;
+			}
+		}
 		//#endregion
 		//#region src/shared/http.ts
 		/**
@@ -3279,7 +3498,8 @@ window.__ModuleLoader__.load({
 				path: body.figure.path,
 				mediaType: body.figure.mediaType,
 				sha256: body.figure.sha256,
-				annotation: body.annotation ?? null
+				annotation: body.annotation ?? null,
+				workspace: body.figure.workspace ?? null
 			};
 		}
 		/**
@@ -3388,8 +3608,14 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 /* Every small picture in the panel is one stroke set, declared once: without this
    an svg with no fill of its own falls back to a solid black shape, which is what
    turned the dock and the cards into blobs of ink. */
+/* Every icon is drawn on one 24-unit grid, and every one of them is asked to
+   *render* at the same thickness — 1.2px — so the row reads as one set. On a single
+   grid that still means one stroke-width per drawn size, because the number is in
+   the icon's own units: 1.2 x 24 / size. The sizes differ only because the buttons
+   holding them do; the weight does not. */
 .da-ico{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;
-  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
+  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
+.da-tool-icon svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
 
 /* --- the floating tool palette ------------------------------------------- */
 /* The tools float over the figure in a dark rounded pill so they can be parked
@@ -3423,7 +3649,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-palette .da-tool:hover{background:rgba(255,255,255,.14)}
 .da-palette .da-tool[aria-pressed="true"]{background:#176df2;color:#fff}
 .da-palette .da-tool .da-tool-icon{height:auto}
-.da-palette .da-tool .da-tool-icon svg{width:16px;height:16px;stroke-width:1.9}
+.da-palette .da-tool .da-tool-icon svg{width:17px;height:17px;stroke-width:1.7}
 
 /* --- the size rail ------------------------------------------------------- */
 /* A vertical rail along the left edge of the figure: how heavy the pen is, and how
@@ -3491,6 +3717,9 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 /* Parked: placed from the top by the reader's drag, so the bottom anchor that keeps
    it centred while untouched must not also apply — with both set it stretches. */
 .da-bar[data-parked="true"]{bottom:auto}
+/* A bar standing in for the page body's own: it is placed by the pane rather than
+   dragged, because there is no page yet to park it over. */
+.da-bar[data-static="true"]{bottom:8px}
 .da-bar[data-dragging="true"]{opacity:.94;box-shadow:0 12px 32px rgba(10,14,24,.4),0 0 0 1px rgba(255,255,255,.14)}
 .da-bar[data-dragging="true"] *{cursor:move !important}
 /* The bar's buttons are white glyphs on the dark strip. The one filled control is
@@ -3499,8 +3728,6 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-bar .da-dock-btn:hover{background:rgba(255,255,255,.14)}
 .da-bar .da-dock-btn[aria-pressed="true"]{background:#176df2;color:#fff}
 .da-bar .da-dock-sep{background:rgba(255,255,255,.22)}
-.da-bar .da-dock-btn-primary{background:#176df2;color:#fff;border-color:#176df2}
-.da-bar .da-dock-btn-primary:hover{background:#176df2;opacity:.92}
 .da-bar .da-dock-dot{background:#4c8dff}
 .da-bar .da-dock-count{background:#176df2;color:#fff}
 .da-bar .da-style{width:30px;height:28px;padding:0;border:0;border-radius:50%;background:transparent;color:#fff}
@@ -3519,7 +3746,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-btn:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.1))}
 .da-btn:disabled{opacity:.4;cursor:default}
 .da-btn:disabled:hover{background:var(--dsw-alias-bg-base,transparent)}
-.da-btn svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
+.da-btn svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
 /* A quiet button has no frame at all until the pointer is on it: it is an action,
    not a thing, and the row it sits in is already framed. */
 .da-btn-quiet{border-color:transparent;background:transparent;height:24px;padding:0 7px;font-size:11px;color:var(--dsw-alias-label-secondary,inherit)}
@@ -3529,13 +3756,13 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
    picture is what a reader who has used the tool once recognizes without reading. */
 .da-tool{flex-direction:column;justify-content:center;gap:1px;width:40px;height:34px;padding:0;border-color:transparent;background:transparent;font-size:9px;border-radius:9px}
 .da-tool .da-tool-icon{display:flex;align-items:center;justify-content:center;height:14px}
-.da-tool .da-tool-icon svg{width:13px;height:13px;stroke-width:1.8}
+.da-tool .da-tool-icon svg{width:14px;height:14px;stroke-width:2.05}
 .da-tool .da-tool-label{font-size:10px;line-height:1;white-space:nowrap;color:var(--dsw-alias-label-secondary,inherit)}
 /* The armed tool is the one state in this row the reader must never hunt for: it is
    the only tile with a fill, and the only label in the brand colour. */
 .da-tool[aria-pressed="true"]{border-color:transparent;background:var(--da-accent-soft,rgba(23,109,242,.1));color:var(--da-accent,currentColor)}
 .da-tool[aria-pressed="true"] .da-tool-label{color:var(--da-accent,currentColor);font-weight:600}
-.da-tool[aria-pressed="true"] svg{stroke-width:2.1}
+.da-tool[aria-pressed="true"] svg{stroke-width:2.4}
 .da-tool:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08))}
 .da-btn-icon{width:30px;padding:0}
 
@@ -3598,13 +3825,73 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-page{font-size:12px;min-width:44px;text-align:center;color:var(--dsw-alias-label-secondary,inherit)}
 /* The document's toolbar sits above the page body, so the pane is one column of
    definite height and the body takes what is left of it. */
-.da-pdf{display:flex;flex-direction:column;height:100%;min-height:0}
+.da-pdf{position:relative;display:flex;flex-direction:column;height:100%;min-height:0}
 .da-pdf>.da-root{flex:1 1 auto;height:auto;min-height:0}
+/* A document's toolbar is a row of decisions above the page: paging on the left,
+   what the document holds and the hand-off on the right. It is fixed height and
+   never scrolls with the page, so the controls keep where the hand left them. */
+.da-toolbar{display:flex;align-items:center;gap:6px;flex:0 0 auto;
+  padding:6px 10px;border-bottom:0.5px solid var(--dsw-alias-border-l3,currentColor)}
+
+/* The PDF's own strip. It is the same object as the figure's bottom bar — a dark
+   rounded card floating over the page — because a reader who has marked a figure
+   and then opens a document should not have to learn a second set of controls in
+   a second visual language. Everything the page is read with lives on it: where you
+   are, how you move, how it flows, and the way out. */
+/* Paging is one decision, so its three controls sit closer together than the bar's
+   own gap and read as a single reader rather than three buttons. It lives on the
+   page body's bar, which the pane owns — not in a strip of its own. */
+.da-docbar-group{display:flex;align-items:center;gap:1px;flex:0 0 auto}
+/* The page number is the one control the reader reads rather than presses, so it
+   gets a fixed slot: a number that shifts the buttons as it goes 9 to 100 is a
+   toolbar that moves under the pointer. Not a tinted pill — the inverted strip is
+   already the ground, and a second ground inside it reads as a button. */
+/* The page number reads as a caption on the dark card, not as a button: no ground of
+   its own, no frame, just the digits. It is still pressable — pressing is how the
+   reader jumps — but a chip inside a chip is two grounds for one control, and the
+   white box read as a hole punched in the bar. */
+.da-bar button.da-page{display:inline-flex;align-items:center;justify-content:center;
+  min-width:50px;height:28px;padding:0 4px;border:0;border-radius:8px;
+  appearance:none;-webkit-appearance:none;
+  background:transparent;box-shadow:none;color:#fff;cursor:pointer;
+  font:inherit;font-size:12.5px;font-variant-numeric:tabular-nums}
+.da-bar button.da-page:hover{background:rgba(255,255,255,.14)}
+.da-bar button.da-page:focus-visible{outline:2px solid var(--da-accent,#176df2);outline-offset:1px}
+
+.da-bar .da-dock-sep{background:rgba(255,255,255,.22)}
+.da-bar .da-ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;
+  stroke-linecap:round;stroke-linejoin:round}
+/* What the document holds, said quietly: the strip's subject is the page, and the
+   count is a caption on it rather than another control. */
+.da-bar .da-docbar-count{flex:0 0 auto;margin-left:6px;font-size:11.5px;
+  color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums;white-space:nowrap}
+/* The hand-off's note, only shown when there is nothing to hand over. */
+.da-bar .da-docbar-note{flex:0 0 auto;margin-right:2px;font-size:11.5px;color:rgba(255,255,255,.5)}
+/* The page number is the one control the reader reads rather than presses, so it
+   gets a fixed slot: a number that shifts the buttons as it goes 9 → 10 → 100 is a
+   toolbar that moves under the pointer. */
+.da-toolbar .da-page{min-width:52px;padding:0 2px;font-variant-numeric:tabular-nums}
+/* The hand-off sits under the page it describes, right-aligned and on its own
+   ground, so it is not reachable by a stray press on the page controls. */
+.da-send{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:0 0 auto;
+  padding:6px 10px;border-top:0.5px solid var(--dsw-alias-border-l3,currentColor)}
+/* The page a reader types into, to jump. Sized to the widest page count a document
+   can plausibly have, so the slot does not resize as the number grows. */
+.da-page-input{width:52px;height:28px;padding:0 6px;border:0.5px solid rgba(255,255,255,.35);
+  border-radius:8px;background:rgba(255,255,255,.12);color:#fff;
+  font:inherit;font-size:12.5px;line-height:1;text-align:center;font-variant-numeric:tabular-nums}
+.da-page-input:focus{outline:none;border-color:var(--da-accent,#176df2);background:rgba(255,255,255,.18)}
+/* The page number's own denominator: smaller and quieter than the number it follows. */
+.da-page-total{font-size:12px;color:var(--dsw-alias-label-tertiary,inherit);white-space:nowrap}
 /* The page slot before the first raster. It takes the column the body's stage
    takes, so the frame around it — the toolbar above all — is in place from the
    first paint and does not move when the page arrives. */
 .da-placeholder{flex:1 1 auto;min-height:0;background:var(--dsw-alias-bg-document-preview,transparent)}
-
+/* The page-number box and its denominator, held together so the box cannot drift
+   away from the count it is a fraction of. */
+.da-page-field{display:flex;align-items:center;gap:3px}
+/* The hand-off's own note, quiet enough to read as a state rather than a control. */
+.da-send-note{font-size:12px;color:var(--dsw-alias-label-tertiary,inherit);margin-right:2px}
 /* --- the two cards under the figure ------------------------------------- */
 /* --- the dock ------------------------------------------------------------ */
 /* The dock's buttons are quiet circles in the bar: they are the actions that are
@@ -3618,8 +3905,6 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-dock-btn:disabled{opacity:.4;cursor:default}
 .da-dock-btn:disabled:hover{background:transparent}
 /* The one filled control in the panel is the way out of it. */
-.da-dock-btn-primary{border-color:var(--da-accent,#176df2);background:var(--da-accent,#176df2);color:#fff;box-shadow:0 2px 8px rgba(23,109,242,.32)}
-.da-dock-btn-primary:hover{opacity:.92;background:var(--da-accent,#176df2)}
 /* A dot, not a count: "there is a goal written" is all the bar needs to say about
    a field it is not a list of. */
 .da-dock-dot{position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;
@@ -3706,14 +3991,23 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
    sentence as the thing you press, and the sentence's own shape and anchor under it
    in smaller type. A borderless run of text would read as one paragraph of marks. */
 .da-marks{display:flex;flex-direction:column;gap:3px;min-height:0}
-.da-mark{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:8px;
+.da-mark{display:flex;align-items:center;gap:7px;padding:5px 4px;border-radius:7px;
   border:0.5px solid transparent;min-width:0}
 .da-mark:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.08))}
 .da-mark[data-selected="true"]{border-color:var(--da-accent,#176df2);
-  background:var(--dsw-alias-interactive-bg-hover,rgba(23,109,242,.08))}
-.da-mark-index{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
-  width:20px;height:20px;border-radius:6px;color:#fff;font-size:11px;font-weight:700;
-  font-variant-numeric:tabular-nums}
+  background:var(--dsw-alias-interactive-bg-hover,rgba(23,109,242,.06))}
+/* Two light strokes in the mark's colour, not a block of fill.
+   A filled chip on every row is a wall of colour beside a figure that is mostly
+   paper; the list should read as a list. The number keeps a fixed, right-aligned
+   box so a column of rows lines up whether it holds 1 or 12, and the glyph beside
+   it is drawn at the same 1.5px stroke the tools wear. */
+.da-mark-n{flex:0 0 auto;width:14px;text-align:right;font-size:11px;font-weight:600;
+  font-variant-numeric:tabular-nums;line-height:1.35;
+  color:var(--dsw-alias-label-secondary,currentColor)}
+.da-mark-glyph{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
+  width:14px;height:14px}
+.da-mark-glyph svg{width:12px;height:12px;fill:none;stroke:currentColor;
+  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 .da-mark-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;
   padding:0;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
 .da-mark-title{display:block;font-size:12px;line-height:1.35;overflow:hidden;
@@ -3721,9 +4015,25 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-mark-meta{display:block;font-size:10px;line-height:1.35;
   color:var(--dsw-alias-label-tertiary,currentColor);overflow:hidden;
   text-overflow:ellipsis;white-space:nowrap}
-.da-mark-del{flex:0 0 auto;padding:2px 6px;border:0;border-radius:6px;background:transparent;
-  color:var(--dsw-alias-label-tertiary,currentColor);font:inherit;font-size:10px;cursor:pointer}
+/* The page number sits at the row's end rather than under its sentence: it is not
+   part of what the mark says, it is where the mark is, and a list puts that where a
+   table of contents puts it.
+   Its size is the number's, not a step below it. Two sizes in one row — 11px on the
+   left, 10px on the right — read as two different kinds of fact, and the page was
+   the one that looked like it had been shrunk to fit. Weight is what demotes a fact
+   here, not size: 500 against the number's 600, and the tertiary colour. */
+.da-mark-page{flex:0 0 auto;font-size:10px;font-weight:400;line-height:1.35;
+  white-space:nowrap;color:var(--dsw-alias-label-tertiary,currentColor);
+  font-variant-numeric:tabular-nums}
+/* A glyph rather than the word 删除: the row is a card, and a word in the corner of
+   a card reads as another thing to press rather than as the way to get rid of it. */
+.da-mark-del{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
+  width:20px;height:20px;padding:0;border:0;border-radius:6px;background:transparent;
+  color:var(--dsw-alias-label-tertiary,currentColor);font:inherit;font-size:11px;line-height:1;
+  cursor:pointer;opacity:0}
+.da-mark:hover .da-mark-del,.da-mark[data-selected="true"] .da-mark-del{opacity:1}
 .da-mark-del:hover{background:var(--dsw-alias-interactive-bg-hover,rgba(127,127,127,.14));color:inherit}
+.da-mark-del:focus-visible{opacity:1}
 
 /* The empty list is a picture and two lines: a card of grey text reads as broken,
    and "nothing yet" is a state, not an error. */
@@ -3731,6 +4041,16 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 .da-empty-ico{width:46px;height:46px;fill:none;stroke:var(--dsw-alias-border-l4,currentColor);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
 .da-empty-title{font-size:12px;font-weight:650;color:var(--dsw-alias-label-secondary,inherit)}
 .da-empty-hint{font-size:11px;line-height:1.6;color:var(--dsw-alias-label-tertiary,inherit);max-width:190px}
+/* The figure's context menu. Laid out at a fixed width because the placement
+   maths needs one number; rows are the height that maths assumes. */
+.da-menu{position:fixed;z-index:40;display:flex;flex-direction:column;gap:1px;width:208px;
+  padding:4px;border-radius:10px;background:var(--dsw-alias-bg-layer-2,#fff);
+  box-shadow:0 8px 24px rgba(15,17,21,.16),0 0 0 1px var(--dsw-alias-border-l2,rgba(0,0,0,.1))}
+.da-menu-item{display:flex;align-items:center;height:27px;padding:0 8px;border:0;border-radius:6px;
+  background:transparent;color:var(--dsw-alias-label-primary,inherit);font:inherit;font-size:12.5px;
+  text-align:left;cursor:pointer;white-space:nowrap}
+.da-menu-item:hover,.da-menu-item:focus-visible{background:var(--da-accent-soft,rgba(23,109,242,.14));outline:none}
+
 .da-status{flex:0 0 auto;padding:6px 10px;font-size:12px;color:var(--dsw-alias-label-secondary,inherit)}
 .da-status[data-tone="error"]{color:var(--dsw-alias-label-error,var(--dsw-alias-state-error-primary,currentColor))}
 .da-status[data-tone="ok"]{color:var(--dsw-alias-state-success-primary,currentColor)}
@@ -4127,30 +4447,41 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 		/**
 		* The stroke each marking tool draws, so the row says it in pictures as well as words.
 		*
+		* Every icon in the row is drawn on the same 24-unit grid as {@link PointerIcon}. That
+		* is not cosmetic: `stroke-width` in an inline SVG is measured in the icon's own units,
+		* so a 16-unit icon and a 24-unit icon given the same number draw at different
+		* thicknesses. On one grid they cannot drift, and the six read as one set.
+		*
 		* `select` is not a marking tool and never comes here: it draws nothing, so it
-		* wears the pointer instead (see {@link PointerIcon}).
+		* wears the pointer instead.
 		*/
 		function ToolIcon(tool) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
-				children: tool === "arrow" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 3 13 L 13 3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 7 3 h 6 v 6" })] }) : tool === "rect" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-					x: "2.5",
-					y: "3.5",
-					width: "11",
-					height: "9",
-					rx: "1.5"
+				children: tool === "arrow" ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 4.5 19.5 L 19 5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 10 5 h 9 v 9" })] }) : tool === "rect" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+					x: "4",
+					y: "6",
+					width: "16",
+					height: "12",
+					rx: "2"
 				}) : tool === "ellipse" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-					cx: "8",
-					cy: "8",
-					r: "5.5"
-				}) : tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 2.5 13 C 5 4 9 13 13.5 3" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+					cx: "12",
+					cy: "12",
+					r: "8.2"
+				}) : tool === "pen" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 4 18 C 7 6 12 20 20 5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
 					fillRule: "evenodd",
-					d: "M 8 14.6 C 8 14.6 2.9 9.5 2.9 6.4 A 5.1 5.1 0 1 1 13.1 6.4 C 13.1 9.5 8 14.6 8 14.6 Z\n               M 8 8.7 A 2.1 2.1 0 1 0 8 4.5 A 2.1 2.1 0 1 0 8 8.7 Z",
+					d: "M 12 22.4 Q 4.9 15.1 4.1 10.16 A 7.9 7.9 0 1 1 19.9 10.16 Q 19.1 15.1 12 22.4 Z\n                   M 12 16.02 A 5.62 5.62 0 1 0 12 4.78 A 5.62 5.62 0 1 0 12 16.02 Z",
 					fill: "currentColor",
 					stroke: "none"
-				})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+					cx: "12",
+					cy: "10.4",
+					r: "2",
+					fill: "currentColor",
+					stroke: "none"
+				})] })
 			});
 		}
 		/**
@@ -4164,22 +4495,22 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 		function GoalIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				className: "da-ico",
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-						cx: "7",
-						cy: "9",
-						r: "5.2"
+						cx: "10.5",
+						cy: "13.5",
+						r: "7.8"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-						cx: "7",
-						cy: "9",
-						r: "2.3"
+						cx: "10.5",
+						cy: "13.5",
+						r: "3.45"
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 13.8 2.2 L 8.2 7.8" }),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 9.6 2.6 L 13.8 2.2 L 13.4 6.4" })
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 20.7 3.3 L 12.3 11.7" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 14.4 3.9 L 20.7 3.3 L 20.1 9.6" })
 				]
 			});
 		}
@@ -4187,29 +4518,29 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 		function ListIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				className: "da-ico",
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 6 4.5 h 7 M 6 8 h 7 M 6 11.5 h 7" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 9 6.75 h 10.5 M 9 12 h 10.5 M 9 17.25 h 10.5" }),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-						cx: "3.2",
-						cy: "4.5",
-						r: "1",
+						cx: "4.8",
+						cy: "6.75",
+						r: "1.5",
 						fill: "currentColor",
 						stroke: "none"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-						cx: "3.2",
-						cy: "8",
-						r: "1",
+						cx: "4.8",
+						cy: "12",
+						r: "1.5",
 						fill: "currentColor",
 						stroke: "none"
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-						cx: "3.2",
-						cy: "11.5",
-						r: "1",
+						cx: "4.8",
+						cy: "17.25",
+						r: "1.5",
 						fill: "currentColor",
 						stroke: "none"
 					})
@@ -4235,40 +4566,40 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 		function UndoIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				className: "da-ico",
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 3.2 7.5 H 9.5 a 3.4 3.4 0 0 1 0 6.8 H 6" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 5.8 4.4 L 2.7 7.5 L 5.8 10.6" })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 4.8 11.25 H 14.25 a 5.1 5.1 0 0 1 0 10.2 H 9" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 8.7 6.6 L 4.05 11.25 L 8.7 15.9" })]
 			});
 		}
 		/** The same arrow the other way. */
 		function RedoIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				className: "da-ico",
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 12.8 7.5 H 6.5 a 3.4 3.4 0 0 0 0 6.8 H 10" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 10.2 4.4 L 13.3 7.5 L 10.2 10.6" })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 19.2 11.25 H 9.75 a 5.1 5.1 0 0 0 0 10.2 H 15" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 15.3 6.6 L 19.95 11.25 L 15.3 15.9" })]
 			});
 		}
 		/** The primary action's mark: a paper plane, the usual "this leaves here". */
 		function SendIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 				className: "da-ico",
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 2 8 L 14 2.6 L 10.6 14 L 8 9.4 Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 8 9.4 L 14 2.6" })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 3 12 L 21 3.9 L 15.9 21 L 12 14.1 Z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 12 14.1 L 21 3.9" })]
 			});
 		}
 		/** The secondary action's mark: a speech bubble, "this goes to the chat box". */
 		function ChatIcon() {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 				className: "da-ico",
-				viewBox: "0 0 16 16",
+				viewBox: "0 0 24 24",
 				"aria-hidden": "true",
 				focusable: "false",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 2.5 6.5 a 2 2 0 0 1 2 -2 h 7 a 2 2 0 0 1 2 2 v 3 a 2 2 0 0 1 -2 2 h -4 l -3 2.2 v -2.2 a 2 2 0 0 1 -2 -2 z" })
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M 3.75 9.75 a 3 3 0 0 1 3 -3 h 10.5 a 3 3 0 0 1 3 3 v 4.5 a 3 3 0 0 1 -3 3 h -6 l -4.5 3.3 v -3.3 a 3 3 0 0 1 -3 -3 z" })
 			});
 		}
 		/**
@@ -4298,7 +4629,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			const parsedAddress = parseFileAddress(address);
 			const mediaType = figureMediaType(parsedAddress?.path ?? "");
 			const isVector = mediaType === "image/svg+xml";
-			const t = (0, react.useCallback)((key) => resolveTranslate(props, key), [props.t, props.localeId]);
+			const t = (0, react.useCallback)((key, vars) => resolveTranslate(props, key, vars), [props.t, props.localeId]);
 			const sessionId = props.sessionId ?? parsedAddress?.sessionId;
 			/**
 			* A private prefix for the rail's gradient and clip ids.
@@ -4370,6 +4701,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			const surface = props.page;
 			/** Whether this body annotates one page of a document its owner persists. */
 			const isPage = surface !== void 0;
+			const chrome = props.chrome !== false;
 			const figure = surface === void 0 ? fileFigure : {
 				kind: "raster",
 				objectUrl: surface.dataUrl,
@@ -4409,12 +4741,46 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			const [color, setColor] = (0, react.useState)(remembered.color ?? COLORS[0]);
 			const [weight, setWeight] = (0, react.useState)(remembered.weight ?? 1);
 			const [marks, setMarks] = (0, react.useState)(() => [...props.draft?.marks ?? []]);
+			/**
+			* What the list shows.
+			*
+			* One page of a paged document is handed the whole file's marks, because the list
+			* is the map of what is about to be sent and what is sent is the file. A body
+			* mounted on its own has only its own marks to show, which is the same thing said
+			* with nothing extra.
+			*/
+			const listedMarks = props.documentMarks ?? marks;
 			const [past, setPast] = (0, react.useState)([]);
 			const [future, setFuture] = (0, react.useState)([]);
-			const [selectedId, setSelectedId] = (0, react.useState)(null);
+			const [ownSelectedId, setOwnSelectedId] = (0, react.useState)(null);
+			/**
+			* The selection, kept by the owner when there is one.
+			*
+			* A column mounts one body per page and moves the chrome between them as the
+			* reader scrolls; a selection held here would be dropped at every page boundary,
+			* and the comment pill would vanish under the sentence it belongs to.
+			*/
+			const selectedId = props.selectedId === void 0 ? ownSelectedId : props.selectedId;
+			const setSelectedId = (0, react.useCallback)((next) => {
+				const value = typeof next === "function" ? next(selectedId) : next;
+				if (props.onSelectedIdChange === void 0) setOwnSelectedId(value);
+				else props.onSelectedIdChange(value);
+			}, [props.onSelectedIdChange, selectedId]);
 			/** The mark whose detail box should take the caret once it is on screen. */
 			const [focusId, setFocusId] = (0, react.useState)(null);
 			/**
+			* Ask the owner to turn to a mark's page, when this body is one page of a document.
+			*
+			* The list is the document's, so a row can name a mark that is not on the page in
+			* view. The owner keeps the page number, so it is the owner that has to turn —
+			* and it must happen before the selection lands, or the pill would be measured
+			* against a page the mark is not on.
+			*/
+			const revealOnPage = (0, react.useCallback)((mark) => {
+				if (props.onRevealMark === void 0 || mark.page === void 0) return;
+				props.onRevealMark(mark);
+			}, [props.onRevealMark]);
+			/**
 			* What the figure shows, as context for the marks below it.
 			*
 			* One per figure rather than one per mark: it is never drawn, and its only job
@@ -4443,7 +4809,14 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			* second one's own close button. Opening any popover closes whatever was open;
 			* opening the one already showing closes it, so the button toggles.
 			*/
-			const [openPanel, setOpenPanel] = (0, react.useState)(null);
+			const [ownPanel, setOwnPanel] = (0, react.useState)(null);
+			/** The open card, kept by the owner when there is one, for the reason above. */
+			const openPanel = props.openPanel === void 0 ? ownPanel : props.openPanel;
+			const setOpenPanel = (0, react.useCallback)((next) => {
+				const value = typeof next === "function" ? next(openPanel) : next;
+				if (props.onOpenPanelChange === void 0) setOwnPanel(value);
+				else props.onOpenPanelChange(value);
+			}, [openPanel, props.onOpenPanelChange]);
 			const styleOpen = openPanel === "style";
 			const goalOpen = openPanel === "goal";
 			const listOpen = openPanel === "list";
@@ -4481,7 +4854,19 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			* the reader picks a colour is the moment it has to be safe. Storage failures are
 			* swallowed inside `rememberPreferences` — losing a colour is not worth an error.
 			*/
-			const [zoom, setZoom] = (0, react.useState)("fit");
+			/**
+			* The factor this figure is drawn at.
+			*
+			* An owner that magnifies the whole document hands the factor in and takes every
+			* gesture back, so the size follows the reader from page to page instead of
+			* restarting at fit on each sheet. A body mounted alone keeps its own.
+			*/
+			const [ownZoom, setOwnZoom] = (0, react.useState)("fit");
+			const zoom = props.zoom ?? ownZoom;
+			const setZoom = (0, react.useCallback)((next) => {
+				if (props.onZoom === void 0) setOwnZoom(next);
+				else props.onZoom(next);
+			}, [props.onZoom]);
 			/**
 			* Whether a drag is currently moving the view.
 			*
@@ -4493,6 +4878,11 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			const [fitWidth, setFitWidth] = (0, react.useState)(0);
 			const [busy, setBusy] = (0, react.useState)(null);
 			const [status, setStatus] = (0, react.useState)(null);
+			/** Where the figure's context menu was asked for, or null when it is closed. */
+			const [menuAt, setMenuAt] = (0, react.useState)(null);
+			/** Whether this Host can open and reveal paths; read once per mount. */
+			const [canOpen, setCanOpen] = (0, react.useState)(false);
+			const menuRef = (0, react.useRef)(null);
 			/** The panel's own box, for placing the cards that float over it. */
 			const rootRef = (0, react.useRef)(null);
 			/**
@@ -4505,6 +4895,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			* off the edge when it narrows.
 			*/
 			const [palette, setPalette] = (0, react.useState)(remembered.palette);
+			const paletteRef = (0, react.useRef)(null);
 			const [dragging, setDragging] = (0, react.useState)(false);
 			const dragFrom = (0, react.useRef)(null);
 			/**
@@ -4550,24 +4941,30 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			* @param from - which strip's press is in progress.
 			* @param write - where its new spot goes.
 			*/
-			const followPointer = (0, react.useCallback)((event, from, write) => {
+			const followPointer = (0, react.useCallback)((event, from, write, strip) => {
 				const held = from.current;
-				const root = rootRef.current;
+				const root = strip?.offsetParent ?? rootRef.current;
 				/* v8 ignore next */
-				if (held === null || root === null) return;
+				if (held === null || root === null || !(root instanceof Element)) return;
 				const bounds = root.getBoundingClientRect();
 				const x = held.origin.x + (event.clientX - held.box.left) / Math.max(1, bounds.width);
 				const y = held.origin.y + (event.clientY - held.box.top) / Math.max(1, bounds.height);
+				/* v8 ignore start -- both call sites hold a live ref for the whole drag. */
+				const width = strip?.offsetWidth ?? 0;
+				const height = strip?.offsetHeight ?? 0;
+				/* v8 ignore stop */
+				const roomX = Math.max(0, bounds.width - width) / Math.max(1, bounds.width);
+				const roomY = Math.max(0, bounds.height - height) / Math.max(1, bounds.height);
 				write({
-					x: Math.min(1, Math.max(0, x)),
-					y: Math.min(1, Math.max(0, y))
+					x: Math.min(roomX, Math.max(0, x)),
+					y: Math.min(roomY, Math.max(0, y))
 				});
 			}, []);
 			const dragPalette = (0, react.useCallback)((event) => {
-				followPointer(event, dragFrom, setPalette);
+				followPointer(event, dragFrom, setPalette, paletteRef.current);
 			}, [followPointer]);
 			const dragBar = (0, react.useCallback)((event) => {
-				followPointer(event, barFrom, setBarSpot);
+				followPointer(event, barFrom, setBarSpot, barRef.current);
 			}, [followPointer]);
 			(0, react.useEffect)(() => {
 				rememberPreferences({
@@ -4819,12 +5216,14 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 			const scale = (0, react.useMemo)(() => {
 				if (size === null) return 1;
 				if (zoom !== "fit") return zoom;
-				if (fitWidth <= 0) return 1;
-				return Math.min(1.5, Math.max(.05, fitWidth / size.width));
+				const target = props.fitWidth ?? fitWidth;
+				if (target <= 0) return 1;
+				return Math.min(1.5, Math.max(.05, target / size.width));
 			}, [
 				zoom,
 				fitWidth,
-				size
+				size,
+				props.fitWidth
 			]);
 			/**
 			* Where the records hang: above the bar, centred on it.
@@ -5013,13 +5412,20 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 				const stage = stageRef.current;
 				if (stage === null) return;
 				/**
-				* A trackpad pinch arrives as a ctrl-modified wheel. The browser would zoom
-				* the whole app for it, and the plugin's own stage is the surface the user is
-				* pointing at, so the event is taken here. A plain two-finger scroll is left
-				* alone: that one pans the scrollport, which is what it means.
+				* The wheel is the magnification, whatever modifier it carries.
+				*
+				* It used to be two gestures in one: a plain wheel panned the scrollport, and
+				* only a ctrl-modified one — which is how a trackpad reports a pinch — zoomed.
+				* That split is what made the gesture ambiguous: over a page that fits the pane
+				* there is nothing to scroll, so a plain wheel looks like a request for another
+				* page, while the reader who wants a closer look makes exactly the same motion.
+				* One motion, one meaning: up magnifies, down shrinks, and a pinch arrives as the
+				* same thing with a modifier on it.
+				*
+				* Panning is still there — a drag with the select tool moves the view — so
+				* nothing is lost by taking the wheel's second job away from it.
 				*/
 				const onWheel = (event) => {
-					if (!event.ctrlKey) return;
 					event.preventDefault();
 					zoomAt(liveScale.current * wheelZoomFactor(event.deltaY, event.deltaMode, stage.clientHeight), event.clientX, event.clientY);
 				};
@@ -5037,9 +5443,17 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 				commit([...marks, mark]);
 			}, [commit, marks]);
 			const removeMark = (0, react.useCallback)((id) => {
+				if (props.onDocumentRemove !== void 0 && !marks.some((mark) => mark.id === id)) {
+					props.onDocumentRemove(id);
+					return;
+				}
 				commit(marks.filter((mark) => mark.id !== id));
 				setSelectedId((current) => current === id ? null : current);
-			}, [commit, marks]);
+			}, [
+				commit,
+				marks,
+				props.onDocumentRemove
+			]);
 			/**
 			* Write one mark's detail.
 			*
@@ -5464,6 +5878,178 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 				size,
 				t
 			]);
+			/**
+			* Probe the Host once, so the menu can offer the gestures it can perform.
+			*
+			* `canOpenWorkspacePath` answers for the whole page, and a probe that fails is
+			* the same answer as "no desktop": rows that would fail every time are left out
+			* rather than shown and refused.
+			*/
+			(0, react.useEffect)(() => {
+				let live = true;
+				desktopAvailable(props.remote).then((available) => {
+					if (live) setCanOpen(available);
+				});
+				return () => {
+					live = false;
+				};
+			}, [props.remote]);
+			/**
+			* The rows this figure's menu offers, decided once per figure and Host.
+			*
+			* Empty until a figure has loaded: the rows all name its path, so there is
+			* nothing to offer before there is one.
+			*/
+			const menuItems = (0, react.useMemo)(() => {
+				if (loaded === null) return [];
+				return figureMenuItems({
+					canOpen,
+					canSend: !isPage && marks.length > 0 && busy === null,
+					hasRelative: relativeTo(loaded.path, loaded.workspace) !== null,
+					hasImage: layer !== null
+				}, {
+					sendToAgent: t("menuSendToAgent"),
+					sendToComposer: t("menuSendToComposer"),
+					open: t("menuOpen"),
+					reveal: t("menuReveal"),
+					copyImage: t("menuCopyImage"),
+					copyRelative: t("menuCopyRelative"),
+					copyAbsolute: t("menuCopyAbsolute")
+				});
+			}, [
+				busy,
+				canOpen,
+				isPage,
+				layer,
+				loaded,
+				marks.length,
+				t
+			]);
+			/**
+			* Open the menu at the pointer, kept inside the window.
+			* @param event - the right-click on the figure.
+			*/
+			const openMenu = (0, react.useCallback)((event) => {
+				/* v8 ignore next -- nothing to act on until a figure loaded. */
+				if (loaded === null) return;
+				event.preventDefault();
+				const height = menuItems.length * 27;
+				const placed = clampMenu({
+					x: event.clientX,
+					y: event.clientY
+				}, {
+					width: window.innerWidth,
+					height: window.innerHeight
+				}, {
+					width: 208,
+					height
+				});
+				setMenuAt({
+					...placed,
+					path: loaded.path,
+					workspace: loaded.workspace
+				});
+			}, [loaded, menuItems]);
+			(0, react.useEffect)(() => {
+				if (menuAt === null) return;
+				const onDown = (event) => {
+					if (pressedInsideMenu(event, menuRef.current)) return;
+					setMenuAt(null);
+				};
+				const onKey = (event) => {
+					if (event.key === "Escape") setMenuAt(null);
+				};
+				document.addEventListener("pointerdown", onDown, true);
+				document.addEventListener("keydown", onKey);
+				return () => {
+					document.removeEventListener("pointerdown", onDown, true);
+					document.removeEventListener("keydown", onKey);
+				};
+			}, [menuAt]);
+			/**
+			* Carry out one menu row.
+			*
+			* The two copies are the only rows that touch the clipboard, and they say so in
+			* the status line: a copy with no feedback reads as a menu that did nothing.
+			* @param id - the row the reader picked.
+			* @param path - the figure's own path, as the Host named it.
+			* @param workspace - the session's working directory, when there is one.
+			*/
+			const runMenu = (0, react.useCallback)((id, path, workspace) => {
+				setMenuAt(null);
+				if (id === "sendToAgent") {
+					run("agent");
+					return;
+				}
+				if (id === "sendToComposer") {
+					run("composer");
+					return;
+				}
+				if (id === "open") {
+					openOnDesktop(props.remote, path).then((ok) => {
+						setStatus(ok ? {
+							tone: "ok",
+							text: t("menuOpened")
+						} : {
+							tone: "error",
+							text: t("menuOpenFailed")
+						});
+					});
+					return;
+				}
+				if (id === "reveal") {
+					revealOnDesktop(props.remote, path).then((ok) => {
+						setStatus(ok ? {
+							tone: "ok",
+							text: t("menuRevealed")
+						} : {
+							tone: "error",
+							text: t("menuRevealFailed")
+						});
+					});
+					return;
+				}
+				if (id === "copyImage") {
+					/* v8 ignore next -- the row is only offered for a figure that has a layer. */
+					if (layer === null) return;
+					exportPng(layer).then(async (image) => {
+						const copied = await copyImageToClipboard(image);
+						setStatus(copied ? {
+							tone: "ok",
+							text: t("menuCopied")
+						} : {
+							tone: "error",
+							text: t("menuCopyFailed")
+						});
+					}, () => {
+						setStatus({
+							tone: "error",
+							text: t("menuCopyFailed")
+						});
+					});
+					return;
+				}
+				const text = copiedText(id, path, workspace);
+				/* v8 ignore next */
+				if (text === null) return;
+				navigator.clipboard.writeText(text).then(() => {
+					setStatus({
+						tone: "ok",
+						text: t("menuCopied")
+					});
+				}, () => {
+					setStatus({
+						tone: "error",
+						text: t("menuCopyFailed")
+					});
+				});
+			}, [
+				exportPng,
+				layer,
+				props.remote,
+				run,
+				t
+			]);
 			/** Whether this body holds a rendered document rather than a figure file. */
 			const isHtml = mediaType === "text/html";
 			/** Name what one figure point landed on, for a surface that holds its own elements. */
@@ -5481,6 +6067,18 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 				role: "alert",
 				children: figureError
 			});
+			/**
+			* Press a row of the list: show that mark and put the pill beside it.
+			*
+			* The selection goes first and the page turn second, because a turn remounts this
+			* body for another page and the mark has to already be the one selected when the
+			* new page's pill is measured — otherwise the row would turn the page and leave
+			* the reader with nothing to read on it.
+			*/
+			const reveal = (mark) => {
+				setSelectedId(mark.id);
+				revealOnPage(mark);
+			};
 			const selected = marks.find((mark) => mark.id === selectedId) ?? null;
 			/**
 			* What the colour control currently means.
@@ -5563,6 +6161,240 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 				width: size?.width,
 				height: size?.height
 			};
+			/**
+			* The floating chrome: the weight rail, the tool palette and the bar.
+			*
+			* Assembled as a value rather than drawn in place because it may be rendered
+			* somewhere else: a paged document hands this body a node of the pane, and a bar
+			* drawn inside a page is a bar that scrolls with that page.
+			*/
+			const chromeStrips = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "da-palette",
+				ref: paletteRef,
+				"data-dragging": dragging ? "true" : void 0,
+				style: paletteStyle,
+				role: "toolbar",
+				"aria-label": t("tools"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "da-palette-grip",
+					title: t("moveTools"),
+					onPointerDown: (event) => {
+						/* v8 ignore next */
+						if (rootRef.current === null) return;
+						/* v8 ignore next -- jsdom has no pointer capture; a browser always does. */
+						event.currentTarget.setPointerCapture?.(event.pointerId);
+						dragFrom.current = {
+							pointerId: event.pointerId,
+							origin: palette ?? DEFAULT_PALETTE,
+							box: {
+								left: event.clientX,
+								top: event.clientY
+							}
+						};
+						setDragging(true);
+					},
+					onPointerMove: (event) => {
+						dragPalette(event);
+					},
+					onPointerUp: (event) => {
+						event.currentTarget.releasePointerCapture?.(event.pointerId);
+						dragFrom.current = null;
+						setDragging(false);
+					},
+					onPointerCancel: () => {
+						dragFrom.current = null;
+						setDragging(false);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripDots, { wide: true })
+				}), TOOLS.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "da-btn da-tool",
+					"aria-pressed": tool === entry.tool,
+					"aria-label": t(entry.label),
+					title: t(entry.label),
+					onClick: () => {
+						setTool(entry.tool);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "da-tool-icon",
+						"aria-hidden": true,
+						children: entry.tool === "select" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointerIcon, {}) : ToolIcon(entry.tool)
+					})
+				}, entry.tool))]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "da-bar",
+				ref: barRef,
+				"data-dragging": barDragging ? "true" : void 0,
+				"data-parked": barSpot === void 0 ? void 0 : "true",
+				style: barStyle,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "da-palette-grip",
+						title: t("moveBar"),
+						onPointerDown: (event) => {
+							/* v8 ignore next */
+							if (rootRef.current === null) return;
+							/* v8 ignore next -- jsdom has no pointer capture; a browser always does. */
+							event.currentTarget.setPointerCapture?.(event.pointerId);
+							barFrom.current = {
+								pointerId: event.pointerId,
+								origin: barSpot ?? DEFAULT_PALETTE,
+								box: {
+									left: event.clientX,
+									top: event.clientY
+								}
+							};
+							setBarDragging(true);
+						},
+						onPointerMove: (event) => {
+							dragBar(event);
+						},
+						onPointerUp: (event) => {
+							event.currentTarget.releasePointerCapture?.(event.pointerId);
+							barFrom.current = null;
+							setBarDragging(false);
+						},
+						onPointerCancel: () => {
+							barFrom.current = null;
+							setBarDragging(false);
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripDots, { wide: false })
+					}),
+					props.pagingSlot === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [props.pagingSlot, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "da-sep",
+						"aria-hidden": true
+					})] }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "da-bar-tools",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							className: "da-btn da-style",
+							"aria-expanded": styleOpen,
+							"aria-label": t("style"),
+							title: t("style"),
+							onClick: () => {
+								setOpenPanel((open) => open === "style" ? null : "style");
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "da-swatch-dot",
+								style: { background: shownColor }
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "da-style-caret",
+								"aria-hidden": true,
+								children: styleOpen ? "▴" : "▾"
+							})]
+						})
+					}),
+					styleOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "da-style-row",
+						role: "group",
+						"aria-label": t("style"),
+						"data-side": foldOpensDown ? "below" : "above",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "da-style-label",
+							children: t("styleColor")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "da-style-colors",
+							children: COLORS.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: "da-swatch",
+								"aria-pressed": shownColor === value,
+								style: { background: value },
+								"aria-label": value,
+								title: value,
+								onClick: () => {
+									chooseColor(value);
+								}
+							}, value))
+						})]
+					}) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "da-sep",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "da-spacer" }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "da-dock-btn",
+						"aria-pressed": goalOpen,
+						"aria-label": t("summary"),
+						title: t("summary"),
+						onClick: () => {
+							setOpenPanel((open) => open === "goal" ? null : "goal");
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GoalIcon, {}), summary.trim() === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "da-dock-dot",
+							"aria-hidden": true
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						className: "da-dock-btn",
+						"aria-pressed": listOpen,
+						"aria-label": t("marks"),
+						title: t("marks"),
+						onClick: () => {
+							setOpenPanel((open) => open === "list" ? null : "list");
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListIcon, {}), listedMarks.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "da-dock-count",
+							children: listedMarks.length
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "da-dock-sep",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "da-dock-btn",
+						"aria-label": t("undo"),
+						title: t("undo"),
+						disabled: past.length === 0,
+						onClick: undo,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UndoIcon, {})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "da-dock-btn",
+						"aria-label": t("redo"),
+						title: t("redo"),
+						disabled: future.length === 0,
+						onClick: redo,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedoIcon, {})
+					}),
+					isPage && props.onSend === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "da-dock-sep",
+							"aria-hidden": true
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "da-dock-btn",
+							disabled: busy !== null,
+							"aria-label": t("sendToAgent"),
+							title: t("sendToAgent"),
+							onClick: () => {
+								if (props.onSend === void 0) run("agent");
+								else props.onSend("agent");
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendIcon, {})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "da-dock-btn",
+							disabled: busy !== null,
+							"aria-label": t("sendToComposer"),
+							title: t("sendToComposer"),
+							onClick: () => {
+								if (props.onSend === void 0) run("composer");
+								else props.onSend("composer");
+							},
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatIcon, {})
+						})
+					] })
+				]
+			})] });
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "da-root",
 				ref: rootRef,
@@ -5585,6 +6417,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						className: "da-stage",
 						ref: attachStage,
+						onContextMenu: openMenu,
 						"data-hand": tool === "select" ? "true" : void 0,
 						"data-panning": panning ? "true" : void 0,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -5658,6 +6491,25 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 							})
 						})
 					}),
+					menuAt === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "da-menu",
+						ref: menuRef,
+						role: "menu",
+						"aria-label": t("menuLabel"),
+						style: {
+							left: menuAt.left,
+							top: menuAt.top
+						},
+						children: menuItems.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: "da-menu-item",
+							role: "menuitem",
+							onClick: () => {
+								runMenu(item.id, menuAt.path, menuAt.workspace);
+							},
+							children: item.label
+						}, item.id))
+					}),
 					goalOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "da-float da-float-record da-float-goal",
 						role: "group",
@@ -5715,14 +6567,14 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 										t("marks"),
 										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "da-card-count",
-											children: marks.length
+											children: listedMarks.length
 										})
 									]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
 									className: "da-btn da-btn-quiet",
-									disabled: marks.length === 0,
+									disabled: listedMarks.length === 0,
 									onClick: () => {
 										discard();
 									},
@@ -5741,7 +6593,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 							]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "da-marks",
-							children: marks.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							children: listedMarks.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "da-empty",
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BoxIcon, {}),
@@ -5754,41 +6606,56 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 										children: t("noMarksHint")
 									})
 								]
-							}) : marks.map((mark, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							}) : listedMarks.map((mark, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: "da-mark",
 								"data-selected": mark.id === selectedId,
 								onClick: () => {
-									setSelectedId(mark.id);
+									reveal(mark);
 								},
 								children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "da-mark-index",
-										style: { background: mark.color },
+										className: "da-mark-n",
 										children: index + 1
 									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "da-mark-glyph",
+										style: { color: mark.color },
+										title: t("markKindLabel", { kind: t(TOOL_COPY[mark.kind]) }),
+										children: ToolIcon(mark.kind)
+									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 										type: "button",
 										className: "da-mark-text",
 										onClick: (event) => {
 											event.stopPropagation();
-											setSelectedId(mark.id);
+											reveal(mark);
 										},
 										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "da-mark-title",
 											children: mark.detail !== void 0 && mark.detail.trim() !== "" ? mark.detail : t("emptyDetail")
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										}), anchorName(mark) === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 											className: "da-mark-meta",
-											children: [t(TOOL_COPY[mark.kind]), anchorName(mark)].filter((part) => part !== "").join(" · ")
+											children: anchorName(mark)
 										})]
 									}),
+									mark.page === void 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "da-mark-page",
+										children: t("markPage", { page: mark.page })
+									}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: "da-mark-del",
+										"aria-label": t("delete"),
+										title: t("delete"),
 										onClick: (event) => {
 											event.stopPropagation();
 											removeMark(mark.id);
 										},
-										children: t("delete")
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: "da-mark-del-x",
+											"aria-hidden": "true",
+											children: "✕"
+										})
 									})
 								]
 							}, mark.id))
@@ -5837,7 +6704,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 							})]
 						})]
 					}),
-					shownWeight === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+					!chrome || shownWeight === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 						className: "da-weight",
 						title: t(selected?.kind === "point" || tool === "point" ? "pinSize" : "weight"),
 						children: [
@@ -5895,227 +6762,7 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 							})
 						]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "da-palette",
-						"data-dragging": dragging ? "true" : void 0,
-						style: paletteStyle,
-						role: "toolbar",
-						"aria-label": t("tools"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "da-palette-grip",
-							title: t("moveTools"),
-							onPointerDown: (event) => {
-								/* v8 ignore next */
-								if (rootRef.current === null) return;
-								/* v8 ignore next -- jsdom has no pointer capture; a browser always does. */
-								event.currentTarget.setPointerCapture?.(event.pointerId);
-								dragFrom.current = {
-									pointerId: event.pointerId,
-									origin: palette ?? DEFAULT_PALETTE,
-									box: {
-										left: event.clientX,
-										top: event.clientY
-									}
-								};
-								setDragging(true);
-							},
-							onPointerMove: (event) => {
-								dragPalette(event);
-							},
-							onPointerUp: (event) => {
-								event.currentTarget.releasePointerCapture?.(event.pointerId);
-								dragFrom.current = null;
-								setDragging(false);
-							},
-							onPointerCancel: () => {
-								dragFrom.current = null;
-								setDragging(false);
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripDots, { wide: true })
-						}), TOOLS.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: "da-btn da-tool",
-							"aria-pressed": tool === entry.tool,
-							"aria-label": t(entry.label),
-							title: t(entry.label),
-							onClick: () => {
-								setTool(entry.tool);
-							},
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "da-tool-icon",
-								"aria-hidden": true,
-								children: entry.tool === "select" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PointerIcon, {}) : ToolIcon(entry.tool)
-							})
-						}, entry.tool))]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "da-bar",
-						ref: barRef,
-						"data-dragging": barDragging ? "true" : void 0,
-						"data-parked": barSpot === void 0 ? void 0 : "true",
-						style: barStyle,
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "da-palette-grip",
-								title: t("moveBar"),
-								onPointerDown: (event) => {
-									/* v8 ignore next */
-									if (rootRef.current === null) return;
-									/* v8 ignore next -- jsdom has no pointer capture; a browser always does. */
-									event.currentTarget.setPointerCapture?.(event.pointerId);
-									barFrom.current = {
-										pointerId: event.pointerId,
-										origin: barSpot ?? DEFAULT_PALETTE,
-										box: {
-											left: event.clientX,
-											top: event.clientY
-										}
-									};
-									setBarDragging(true);
-								},
-								onPointerMove: (event) => {
-									dragBar(event);
-								},
-								onPointerUp: (event) => {
-									event.currentTarget.releasePointerCapture?.(event.pointerId);
-									barFrom.current = null;
-									setBarDragging(false);
-								},
-								onPointerCancel: () => {
-									barFrom.current = null;
-									setBarDragging(false);
-								},
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GripDots, { wide: false })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: "da-bar-tools",
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-									type: "button",
-									className: "da-btn da-style",
-									"aria-expanded": styleOpen,
-									"aria-label": t("style"),
-									title: t("style"),
-									onClick: () => {
-										setOpenPanel((open) => open === "style" ? null : "style");
-									},
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "da-swatch-dot",
-										style: { background: shownColor }
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-										className: "da-style-caret",
-										"aria-hidden": true,
-										children: styleOpen ? "▴" : "▾"
-									})]
-								})
-							}),
-							styleOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								className: "da-style-row",
-								role: "group",
-								"aria-label": t("style"),
-								"data-side": foldOpensDown ? "below" : "above",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "da-style-label",
-									children: t("styleColor")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									className: "da-style-colors",
-									children: COLORS.map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										className: "da-swatch",
-										"aria-pressed": shownColor === value,
-										style: { background: value },
-										"aria-label": value,
-										title: value,
-										onClick: () => {
-											chooseColor(value);
-										}
-									}, value))
-								})]
-							}) : null,
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "da-sep",
-								"aria-hidden": true
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "da-spacer" }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: "da-dock-btn",
-								"aria-pressed": goalOpen,
-								"aria-label": t("summary"),
-								title: t("summary"),
-								onClick: () => {
-									setOpenPanel((open) => open === "goal" ? null : "goal");
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(GoalIcon, {}), summary.trim() === "" ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "da-dock-dot",
-									"aria-hidden": true
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-								type: "button",
-								className: "da-dock-btn",
-								"aria-pressed": listOpen,
-								"aria-label": t("marks"),
-								title: t("marks"),
-								onClick: () => {
-									setOpenPanel((open) => open === "list" ? null : "list");
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListIcon, {}), marks.length === 0 ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "da-dock-count",
-									children: marks.length
-								})]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								className: "da-dock-sep",
-								"aria-hidden": true
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "da-dock-btn",
-								"aria-label": t("undo"),
-								title: t("undo"),
-								disabled: past.length === 0,
-								onClick: undo,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UndoIcon, {})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: "da-dock-btn",
-								"aria-label": t("redo"),
-								title: t("redo"),
-								disabled: future.length === 0,
-								onClick: redo,
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedoIcon, {})
-							}),
-							isPage ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: "da-dock-sep",
-									"aria-hidden": true
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "da-dock-btn da-dock-btn-primary",
-									disabled: busy !== null,
-									"aria-label": t("sendToAgent"),
-									title: t("sendToAgent"),
-									onClick: () => {
-										run("agent");
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SendIcon, {})
-								}),
-								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									className: "da-dock-btn",
-									disabled: busy !== null,
-									"aria-label": t("sendToComposer"),
-									title: t("sendToComposer"),
-									onClick: () => {
-										run("composer");
-									},
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatIcon, {})
-								})
-							] })
-						]
-					})
+					!chrome ? null : props.chromeHost === void 0 || props.chromeHost === null ? chromeStrips : (0, react_dom.createPortal)(chromeStrips, props.chromeHost)
 				]
 			});
 		}
@@ -6739,7 +7386,8 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 					sessions: ctx.get("sessions"),
 					conversation: ctx.get("conversation"),
 					sessionId: String(sessionId),
-					localeId: locale.getLocale().locale ?? "zh"
+					localeId: locale.getLocale().locale ?? "zh",
+					remote: ctx.get("remote")
 				})
 			}, AnnotatorBody)), "dsh-figmark: document body");
 			ctx.effect(() => previews.register({
@@ -6805,7 +7453,8 @@ body[data-ds-dark-theme] .da-root{--da-accent:#4c8dff;--da-accent-soft:rgba(76,1
 					sessions: ctx.get("sessions"),
 					conversation: ctx.get("conversation"),
 					sessionId: String(sessionId),
-					localeId: locale.getLocale().locale ?? "zh"
+					localeId: locale.getLocale().locale ?? "zh",
+					remote: ctx.get("remote")
 				})
 			}, AnnotatorBody)), "dsh-figmark: html document body");
 		}