@embedpdf/viewer-chrome 3.0.0-next.1 → 3.0.0-next.10

package/dist/index.cjs

@@ -171,6 +171,10 @@ const en = {
 				ungroup: "Ungroup",
 				strip: "Annotation actions"
 			},
+			selection: {
+				copy: "Copy",
+				strip: "Text selection actions"
+			},
 			shapes: {
 				rectangle: "Rectangle",
 				circle: "Circle",
@@ -217,6 +221,24 @@ const en = {
 			unknown: "The document could not be opened.",
 			close: "Close document"
 		},
+		annotation: {
+			comment: "Comment",
+			highlight: "Highlight",
+			underline: "Underline",
+			squiggly: "Squiggly",
+			strikeout: "Strikethrough",
+			square: "Square",
+			circle: "Circle",
+			line: "Line",
+			polygon: "Polygon",
+			polyline: "Polyline",
+			ink: "Ink",
+			freeText: "Text",
+			stamp: "Stamp",
+			caret: "Caret",
+			redact: "Redact",
+			fileAttachment: "Attachment"
+		},
 		demo: {
 			starting: "Starting viewer…",
 			opening: "Opening document…",
@@ -233,6 +255,27 @@ const en = {
 			searchNoResults: "No results",
 			searchPage: "Page {page}",
 			commentsTitle: "Comments",
+			commentsForbidden: "You don’t have access to comments on this document.",
+			commentsLoading: "Loading comments…",
+			commentsError: "Comments failed to load.",
+			commentsRetry: "Retry",
+			commentsEmpty: "No comments yet. Use the note tool to start a thread.",
+			commentsAnonymous: "Unknown",
+			commentsPage: "Page {page}",
+			commentCount: "{count} comment",
+			commentCountPlural: "{count} comments",
+			commentsReply: "Reply",
+			commentsReplyPlaceholder: "Reply…",
+			commentsAddPlaceholder: "Add a comment…",
+			commentsDelete: "Delete comment",
+			commentsDeleteThread: "Delete thread",
+			commentsEdit: "Edit comment",
+			commentsStatus: "Status",
+			commentsStatusNone: "No status",
+			commentsStatusAccepted: "Accepted",
+			commentsStatusRejected: "Rejected",
+			commentsStatusCancelled: "Cancelled",
+			commentsStatusCompleted: "Completed",
 			styleTitle: "Style",
 			empty: "Nothing here yet in this demo panel.",
 			page: "Page {current} of {total}",
@@ -1323,19 +1366,129 @@ function AppToolbar({ bar, className }) {
 	});
 }
 //#endregion
-//#region src/ui/annotation-strip.tsx
+//#region src/ui/link-editor.tsx
 /**
-* The annotation selection strip — v2's floating "selection menu" rebuilt as
-* chrome. Three parties, none of them this file's business to compute:
+* The link editor POPOVER — v2's "add a link" popup, reborn. It rides the
+* SAME selection anchor as the action strip (`<AnnotationMenu>` solves
+* WHERE), opening from the strip's link icon (`annotation:link` toggles the
+* `link-editor` shell surface) and rendering IN PLACE of the strip while
+* open — one anchored card at a time.
 *
-*   config/chrome.ts `strips.annotation`  declares WHAT may appear
-*   each command's visible/enabled        decides WHICH items show
-*   <AnnotationMenu>                      solves WHERE (camera transform,
-*                                         rotate-knob dodging, pointer isolation)
-*
-* useStripView is the live intersection: hidden commands drop out, empty
-* groups vanish, null when nothing applies. This file only draws pixels.
-* Mounted in the Stage `overlay` slot.
+* Reads the selection's current target from selection props (the `linkOf`
+* lens — parents derive from their committed child annotations) and writes
+* through the ONE `updateSelection({ link })` path; the plugin's reconciler
+* materializes/retargets the attached children. Links are a VERB on the
+* selection, not a style — which is why this is a popover, not a sidebar
+* section.
+*/
+function ModeToggle({ active, title, onClick, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		title,
+		onClick,
+		className: `rounded border px-2.5 py-1 text-xs font-medium transition-colors ${active ? "border-accent bg-accent text-on-accent" : "border-border bg-surface text-fg hover:bg-hover"}`,
+		children
+	});
+}
+function LinkEditorCard({ onClose }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const kernel = (0, _embedpdf_react_runtime.useKernel)();
+	const anno = (0, _embedpdf_react_annotation.useAnnotation)();
+	const value = (0, _embedpdf_react_annotation.useSelectionProps)().values.link ?? null;
+	const [mode, setMode] = (0, react.useState)(value?.kind === "goto" ? "page" : "uri");
+	const [uri, setUri] = (0, react.useState)(value?.kind === "uri" ? value.uri : "");
+	const [pageNo, setPageNo] = (0, react.useState)("1");
+	const apply = () => {
+		if (mode === "uri") {
+			const trimmed = uri.trim();
+			if (!trimmed) return;
+			anno.updateSelection({ link: {
+				kind: "uri",
+				uri: trimmed
+			} });
+			onClose();
+			return;
+		}
+		const activeId = kernel.documents.activeId();
+		const layout = (activeId ? kernel.getState().core.documents[activeId] : null)?.pages[Math.max(0, Number(pageNo) - 1)];
+		if (!layout) return;
+		anno.updateSelection({ link: {
+			kind: "goto",
+			destination: {
+				kind: "fit",
+				pageObjectNumber: layout.pageObjectNumber
+			}
+		} });
+		onClose();
+	};
+	const inputCls = "border-border bg-surface text-fg focus:border-accent w-full rounded border px-2.5 py-1.5 text-sm outline-none";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border bg-surface w-64 rounded-lg border p-3 shadow-lg",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex items-center justify-between",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "text-fg text-sm font-semibold",
+					children: t("commands.annotate.link")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					onClick: onClose,
+					className: "text-fg-muted hover:bg-hover grid h-6 w-6 place-items-center rounded",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "x",
+						size: 14
+					})
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "mb-2 flex gap-1.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModeToggle, {
+					title: "Link to a URL",
+					active: mode === "uri",
+					onClick: () => setMode("uri"),
+					children: "URL"
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModeToggle, {
+					title: "Link to a page",
+					active: mode === "page",
+					onClick: () => setMode("page"),
+					children: "Page"
+				})]
+			}),
+			mode === "uri" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "url",
+				className: inputCls,
+				placeholder: "https://…",
+				autoFocus: true,
+				value: uri,
+				onChange: (e) => setUri(e.target.value),
+				onKeyDown: (e) => e.key === "Enter" && apply()
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				type: "number",
+				min: 1,
+				className: inputCls,
+				placeholder: "Page number",
+				autoFocus: true,
+				value: pageNo,
+				onChange: (e) => setPageNo(e.target.value),
+				onKeyDown: (e) => e.key === "Enter" && apply()
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "bg-accent text-on-accent mt-2.5 w-full rounded px-2 py-1.5 text-sm font-medium",
+				onClick: apply,
+				children: value == null ? "Add link" : "Update link"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/ui/strip-bar.tsx
+/**
+* The floating strip's PIXELS, shared by every contextual strip (annotation
+* selection, text selection, …): a rounded toolbar of command buttons with
+* derived group separators. The WHERE is each strip's menu component
+* (`<AnnotationMenu>`, `<SelectionMenu>`); the WHICH is the commands'
+* `visible`/`enabled` derivations via `useStripView`. This file only draws.
 */
 function StripButton({ cmd, run }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -1353,24 +1506,76 @@ function StripButton({ cmd, run }) {
 		})
 	});
 }
+function StripBar({ view, label }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "toolbar",
+		"aria-label": label,
+		className: "border-border-subtle bg-elevated flex items-center gap-1 rounded-lg border p-1 shadow-xl",
+		children: view.groups.map((g, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [i > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": true,
+			className: "bg-border h-5 w-px"
+		}), g.commands.map((cmd) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StripButton, {
+			cmd,
+			run: () => view.execute(cmd.id)
+		}, cmd.id))] }, g.id))
+	});
+}
+//#endregion
+//#region src/ui/annotation-strip.tsx
+/**
+* The ANNOTATION-selection floating strip:
+*
+*   config/chrome.ts `strips.annotation`  declares WHAT may appear
+*   each command's visible/enabled        decides WHICH items show
+*   <AnnotationMenu>                      solves WHERE (camera transform,
+*                                         rotate-knob dodging, pointer isolation)
+*
+* useStripView is the live intersection: hidden commands drop out, empty
+* groups vanish, null when nothing applies. Mounted in the Stage `overlay`
+* slot. The pixels are the shared <StripBar>.
+*/
 function AnnotationStrip() {
 	const t = (0, _embedpdf_react_i18n.useT)();
 	const view = (0, _embedpdf_react_toolbar.useStripView)(useStripSchema("annotation"));
+	const editor = (0, _embedpdf_react_shell.useSurface)("link-editor");
+	const selection = (0, _embedpdf_react_annotation.useAnnotationSelection)();
+	(0, react.useEffect)(() => {
+		if (!selection.length && editor.isOpen) editor.close();
+	}, [selection.length, editor.isOpen]);
 	if (!view) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_annotation_menu.AnnotationMenu, {
 		placement: "bottom",
 		gap: 15,
-		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			role: "toolbar",
-			"aria-label": t("commands.annotate.strip"),
-			className: "border-border-subtle bg-elevated flex items-center gap-1 rounded-lg border p-1 shadow-xl",
-			children: view.groups.map((g, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [i > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				"aria-hidden": true,
-				className: "bg-border h-5 w-px"
-			}), g.commands.map((cmd) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StripButton, {
-				cmd,
-				run: () => view.execute(cmd.id)
-			}, cmd.id))] }, g.id))
+		children: editor.isOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkEditorCard, { onClose: editor.close }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StripBar, {
+			view,
+			label: t("commands.annotate.strip")
+		})
+	});
+}
+//#endregion
+//#region src/ui/selection-strip.tsx
+/**
+* The TEXT-SELECTION floating strip:
+*
+*   config/chrome.ts `strips.selection`  declares WHAT may appear
+*   each command's visible/enabled       decides WHICH items show
+*   <SelectionMenu>                      solves WHERE (settles on pointer-up,
+*                                        camera transform, pointer isolation)
+*
+* `useStripView` is the live intersection: with copy denied (no
+* doc.text.copy) every command drops out and this renders nothing — no
+* empty bubble. Mounted in the Stage `overlay` slot.
+*/
+function SelectionStrip() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const view = (0, _embedpdf_react_toolbar.useStripView)(useStripSchema("selection"));
+	if (!view) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_selection.SelectionMenu, {
+		placement: "bottom",
+		gap: 12,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StripBar, {
+			view,
+			label: t("commands.selection.strip")
 		})
 	});
 }
@@ -2223,99 +2428,6 @@ function Toggle({ active, title, onClick, children }) {
 		children
 	});
 }
-/**
-* The link-target editor — v2's "Link / Go to link / Remove link" menu items,
-* rebuilt on the schema: any kind whose table declares the `link` spec gets
-* this control, and every write is the ONE `updateSelection({ link })` path
-* (the plugin materializes/retargets/deletes the attached children).
-*/
-function LinkTargetControl({ label, value, mixed, onChange }) {
-	const kernel = (0, _embedpdf_react_runtime.useKernel)();
-	const link = (0, _embedpdf_react_runtime.useOptionalCapability)(_embedpdf_react_link.LinkToken);
-	const [mode, setMode] = (0, react.useState)(value?.kind === "goto" ? "page" : "uri");
-	const [uri, setUri] = (0, react.useState)(value?.kind === "uri" ? value.uri : "");
-	const [pageNo, setPageNo] = (0, react.useState)("1");
-	(0, react.useEffect)(() => {
-		setMode(value?.kind === "goto" ? "page" : "uri");
-		if (value?.kind === "uri") setUri(value.uri);
-	}, [value]);
-	const apply = () => {
-		if (mode === "uri") {
-			const trimmed = uri.trim();
-			if (trimmed) onChange({ link: {
-				kind: "uri",
-				uri: trimmed
-			} });
-			return;
-		}
-		const activeId = kernel.documents.activeId();
-		const layout = (activeId ? kernel.getState().core.documents[activeId] : null)?.pages[Math.max(0, Number(pageNo) - 1)];
-		if (layout) onChange({ link: {
-			kind: "goto",
-			destination: {
-				kind: "fit",
-				pageObjectNumber: layout.pageObjectNumber
-			}
-		} });
-	};
-	const inputCls = "border-border bg-surface text-fg w-full rounded border px-3 py-1.5 text-sm";
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Field, {
-		label,
-		mixed,
-		children: [
-			value != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mb-2 flex items-center gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "border-border bg-surface text-fg flex-1 rounded border px-2 py-1.5 text-sm",
-					onClick: () => link?.activate(value),
-					children: "Go to link"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					className: "border-border bg-surface text-fg flex-1 rounded border px-2 py-1.5 text-sm",
-					onClick: () => onChange({ link: null }),
-					children: "Remove link"
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "mb-2 flex gap-2",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-					title: "Link to a URL",
-					active: mode === "uri",
-					onClick: () => setMode("uri"),
-					children: "URL"
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Toggle, {
-					title: "Link to a page",
-					active: mode === "page",
-					onClick: () => setMode("page"),
-					children: "Page"
-				})]
-			}),
-			mode === "uri" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: "url",
-				className: inputCls,
-				placeholder: "https://…",
-				value: uri,
-				onChange: (e) => setUri(e.target.value),
-				onKeyDown: (e) => e.key === "Enter" && apply()
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-				type: "number",
-				min: 1,
-				className: inputCls,
-				placeholder: "Page number",
-				value: pageNo,
-				onChange: (e) => setPageNo(e.target.value),
-				onKeyDown: (e) => e.key === "Enter" && apply()
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-				type: "button",
-				className: "border-border bg-surface text-fg mt-2 w-full rounded border px-2 py-1.5 text-sm font-medium",
-				onClick: apply,
-				children: value == null ? "Add link" : "Update link"
-			})
-		]
-	});
-}
 function PropControl({ spec, value, mixed, onChange }) {
 	switch (spec.key) {
 		case "color":
@@ -2458,12 +2570,7 @@ function PropControl({ spec, value, mixed, onChange }) {
 				onChange: (blendMode) => onChange({ blendMode })
 			})
 		});
-		case "link": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkTargetControl, {
-			label: spec.label,
-			value: value ?? null,
-			mixed,
-			onChange
-		});
+		case "link": return null;
 		default: return null;
 	}
 }
@@ -2565,6 +2672,493 @@ function refKeyOfRedact(ref) {
 	return JSON.stringify(ref);
 }
 //#endregion
+//#region src/ui/comment-config.ts
+/** `/C`-style Color → CSS. */
+const cssColor = (c) => c ? `rgb(${c.r}, ${c.g}, ${c.b})` : void 0;
+const TYPE_CONFIG = {
+	text: {
+		icon: "message",
+		labelKey: "annotation.comment",
+		label: "Comment"
+	},
+	highlight: {
+		icon: "highlight",
+		labelKey: "annotation.highlight",
+		label: "Highlight"
+	},
+	underline: {
+		icon: "underline",
+		labelKey: "annotation.underline",
+		label: "Underline"
+	},
+	squiggly: {
+		icon: "squiggly",
+		labelKey: "annotation.squiggly",
+		label: "Squiggly"
+	},
+	strikeout: {
+		icon: "strikethrough",
+		labelKey: "annotation.strikeout",
+		label: "Strikethrough"
+	},
+	square: {
+		icon: "square",
+		labelKey: "annotation.square",
+		label: "Square"
+	},
+	circle: {
+		icon: "circle",
+		labelKey: "annotation.circle",
+		label: "Circle"
+	},
+	line: {
+		icon: "line",
+		labelKey: "annotation.line",
+		label: "Line"
+	},
+	polygon: {
+		icon: "polygon",
+		labelKey: "annotation.polygon",
+		label: "Polygon"
+	},
+	polyline: {
+		icon: "zigzag",
+		labelKey: "annotation.polyline",
+		label: "Polyline"
+	},
+	ink: {
+		icon: "pencilMarker",
+		labelKey: "annotation.ink",
+		label: "Ink"
+	},
+	"free-text": {
+		icon: "freeText",
+		labelKey: "annotation.freeText",
+		label: "Text"
+	},
+	stamp: {
+		icon: "rubberStamp",
+		labelKey: "annotation.stamp",
+		label: "Stamp"
+	},
+	caret: {
+		icon: "insertText",
+		labelKey: "annotation.caret",
+		label: "Caret"
+	},
+	redact: {
+		icon: "redact",
+		labelKey: "annotation.redact",
+		label: "Redact"
+	},
+	"file-attachment": {
+		icon: "paperclip",
+		labelKey: "annotation.fileAttachment",
+		label: "Attachment"
+	}
+};
+const FALLBACK = {
+	icon: "message",
+	labelKey: "annotation.comment",
+	label: "Comment"
+};
+const commentTypeConfig = (a) => TYPE_CONFIG[a.subtype] ?? FALLBACK;
+/**
+* The glyph's tint slots, read off the annotation itself — this is what makes
+* a card recognizable as "that yellow highlight on page 3". Free-text prefers
+* its `fontColor` override, since that is the color a reader actually sees.
+*/
+const commentIconAccent = (a) => {
+	const anyA = a;
+	const primary = cssColor(anyA.fontColor ?? anyA.color);
+	const secondary = cssColor(anyA.interiorColor);
+	return {
+		...primary ? { primary } : {},
+		...secondary ? { secondary } : {}
+	};
+};
+//#endregion
+//#region src/ui/comments-panel.tsx
+/**
+* The comments sidebar (right panel): a live view over the conversation
+* plane, in the shape v2's reviewers knew — page-grouped sections, and a
+* card that identifies its annotation at a glance by the type's glyph tinted
+* with that annotation's own colors. What v2 lacked, and this adds, is the
+* ISO 32000 §12.5.6.3 review status per thread.
+*
+* There is no per-page loading dance: the plugin hydrates the WHOLE document
+* at open (`listRawAll`), so the list is complete the moment `hydration()`
+* says so, whether or not a page was ever scrolled to.
+*
+* Selection is two-way, as in v2: clicking a card selects the annotation and
+* flies the camera to it (`stage.reveal`, the same verb search hits use);
+* selecting in the document scrolls that card into view here.
+*
+* Every action routes through the `comments` verbs — plain annotation writes
+* on the one optimistic pipeline — and every control is gated by
+* `permissionsFor`, the engine's own collab-resolver mirrors: what shows here
+* is what the engine will allow.
+*/
+const REVIEW_STATES = [
+	"none",
+	"accepted",
+	"rejected",
+	"cancelled",
+	"completed"
+];
+const dateLabel = (iso) => {
+	if (!iso) return "";
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return "";
+	return d.toLocaleDateString(void 0, {
+		month: "short",
+		day: "numeric"
+	});
+};
+function CommentsPanel() {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const hydration = (0, _embedpdf_react_annotation.useCommentsHydration)();
+	const comments = (0, _embedpdf_react_annotation.useComments)();
+	const threads = (0, _embedpdf_react_annotation.useCommentThreads)();
+	const anno = (0, _embedpdf_react_runtime.useCapability)(_embedpdf_react_annotation.AnnotationToken);
+	const stage = (0, _embedpdf_react_runtime.useCapability)(_embedpdf_react_stage.StageToken);
+	const selection = (0, _embedpdf_react_annotation.useAnnotationSelection)();
+	const scrollRef = (0, react.useRef)(null);
+	const cardRefs = (0, react.useRef)({});
+	/** Which thread the document's selection points at — ANY member counts, so
+	*  selecting a reply's parent shape highlights the same card. */
+	const selectedThreadKey = (0, react.useMemo)(() => {
+		for (const id of selection) {
+			const ref = anno.getSelected().find((a) => (0, _embedpdf_react_annotation.refKey)(a.ref) === id || a.nm === id)?.ref ?? null;
+			const thread = ref ? comments.thread(ref) : null;
+			if (thread) return (0, _embedpdf_react_annotation.refKey)(thread.root.ref);
+		}
+		return null;
+	}, [
+		selection,
+		anno,
+		comments
+	]);
+	(0, react.useEffect)(() => {
+		if (!selectedThreadKey || !scrollRef.current) return;
+		const el = cardRefs.current[selectedThreadKey];
+		if (!el) return;
+		const container = scrollRef.current;
+		const top = el.offsetTop - container.clientHeight / 2 + el.clientHeight / 2 - container.offsetTop;
+		container.scrollTo({
+			top,
+			behavior: "smooth"
+		});
+	}, [selectedThreadKey]);
+	/** Click a card: select the annotation AND fly the camera to it. */
+	const goTo = (view) => {
+		anno.select(view.root.ref);
+		if (view.pageIndex < 0) return;
+		stage?.reveal(view.pageIndex, {
+			...view.contentRect ? { rect: view.contentRect } : {},
+			anchor: {
+				x: "center",
+				y: .35
+			},
+			behavior: "smooth"
+		});
+	};
+	const byPage = (0, react.useMemo)(() => {
+		const groups = /* @__PURE__ */ new Map();
+		for (const v of threads) {
+			const arr = groups.get(v.pageIndex);
+			if (arr) arr.push(v);
+			else groups.set(v.pageIndex, [v]);
+		}
+		return [...groups.entries()].sort((a, b) => a[0] - b[0]);
+	}, [threads]);
+	if (hydration.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		icon: "comment",
+		text: t("demo.commentsLoading")
+	});
+	if (hydration.status === "forbidden") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		icon: "lock",
+		text: t("demo.commentsForbidden")
+	});
+	if (hydration.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		icon: "alertTriangle",
+		text: t("demo.commentsError"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			onClick: () => void comments.rehydrate(),
+			className: "bg-accent text-on-accent rounded-md px-3 py-1.5 text-sm font-medium",
+			children: t("demo.commentsRetry")
+		})
+	});
+	if (threads.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Empty, {
+		icon: "comment",
+		text: t("demo.commentsEmpty")
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref: scrollRef,
+		className: "min-h-0 flex-1 overflow-y-auto",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "flex flex-col gap-5 p-3",
+			children: byPage.map(([pageIndex, group]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-surface sticky top-0 z-10",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "border-border-subtle border-b pb-1.5",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: "text-fg text-sm font-semibold",
+							children: t("demo.commentsPage", { params: { page: group[0].pageLabel } })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "text-fg-muted text-xs",
+							children: t(group.length === 1 ? "demo.commentCount" : "demo.commentCountPlural", { params: { count: String(group.length) } })
+						})]
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+					className: "flex flex-col gap-2",
+					children: group.map((view) => {
+						const key = (0, _embedpdf_react_annotation.refKey)(view.root.ref);
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ThreadCard, {
+							view,
+							selected: selectedThreadKey === key,
+							onSelect: () => goTo(view),
+							cardRef: (el) => {
+								cardRefs.current[key] = el;
+							}
+						}, key);
+					})
+				})]
+			}, pageIndex))
+		})
+	});
+}
+function Empty({ icon, text, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col items-center gap-3 px-4 py-10 text-center",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+				name: icon,
+				size: 32,
+				className: "text-fg-muted"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-fg-muted text-sm",
+				children: text
+			}),
+			children
+		]
+	});
+}
+function ThreadCard({ view, selected, onSelect, cardRef }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const comments = (0, _embedpdf_react_annotation.useComments)();
+	const [reply, setReply] = (0, react.useState)("");
+	const perms = comments.permissionsFor(view.root.ref);
+	const config = commentTypeConfig(view.root);
+	const status = view.review.mine?.state ?? "none";
+	const latest = view.review.lastChange;
+	const sendReply = () => {
+		const text = reply.trim();
+		if (!text) return;
+		setReply("");
+		comments.reply(view.root.ref, text);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		ref: cardRef,
+		onClick: onSelect,
+		className: `bg-surface cursor-pointer rounded-lg border shadow-sm transition-all hover:shadow-md ${selected ? "border-accent ring-accent/40 ring-2" : "border-border-subtle"}`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex flex-col gap-2 p-3",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex items-start gap-2.5",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "bg-hover mt-0.5 grid h-8 w-8 shrink-0 place-items-center rounded-full",
+							title: t(config.labelKey, { fallback: config.label }),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+								name: config.icon,
+								size: 18,
+								accent: commentIconAccent(view.root)
+							})
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-baseline gap-2",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-fg truncate text-sm font-medium",
+									children: view.root.author ?? t("demo.commentsAnonymous")
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "text-fg-muted ml-auto shrink-0 text-xs",
+									children: dateLabel(view.root.modified ?? view.root.created)
+								})]
+							}), latest && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "bg-accent-light text-accent mt-1 inline-block rounded px-1.5 py-0.5 text-[11px] font-medium",
+								children: [statusLabel(t, latest.state), latest.by ? ` — ${latest.by}` : ""]
+							})]
+						}),
+						perms.canDeleteThread && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: (e) => {
+								e.stopPropagation();
+								comments.removeThread(view.root.ref);
+							},
+							className: "text-fg-muted hover:text-fg grid h-6 w-6 shrink-0 place-items-center rounded",
+							title: t("demo.commentsDeleteThread"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+								name: "trash",
+								size: 14
+							})
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentBody, {
+					annotationRef: view.root.ref,
+					text: view.root.contents ?? "",
+					deletable: false
+				}),
+				view.replies.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "border-border-subtle flex flex-col gap-2 border-t pt-2",
+					children: view.replies.map((r) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Reply, { dto: r }, (0, _embedpdf_react_annotation.refKey)(r.ref)))
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-border-subtle flex flex-col gap-1.5 border-t pt-2",
+					children: [perms.canSetStatus && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "text-fg-muted flex items-center gap-2 text-xs",
+						onClick: (e) => e.stopPropagation(),
+						children: [t("demo.commentsStatus"), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+							value: status,
+							onChange: (e) => void comments.setStatus(view.root.ref, e.target.value),
+							className: "border-border bg-surface text-fg flex-1 rounded-md border px-1.5 py-1 text-xs outline-none",
+							children: REVIEW_STATES.map((s) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								value: s,
+								children: statusLabel(t, s)
+							}, s))
+						})]
+					}), perms.canReply && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5",
+						onClick: (e) => e.stopPropagation(),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "text",
+							value: reply,
+							placeholder: view.root.contents || view.replies.length ? t("demo.commentsReplyPlaceholder") : t("demo.commentsAddPlaceholder"),
+							onChange: (e) => setReply(e.target.value),
+							onKeyDown: (e) => e.key === "Enter" && sendReply(),
+							className: "border-border bg-surface text-fg focus:border-accent w-full min-w-0 flex-1 rounded-md border px-2 py-1 text-sm outline-none"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: sendReply,
+							disabled: !reply.trim(),
+							className: "text-accent disabled:text-fg-muted grid h-7 w-7 shrink-0 place-items-center rounded-md",
+							title: t("demo.commentsReply"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+								name: "arrowForwardUp",
+								size: 16
+							})
+						})]
+					})]
+				})
+			]
+		})
+	});
+}
+function Reply({ dto }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "border-border-subtle ml-1 border-l-2 pl-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-baseline gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-fg-secondary text-xs font-medium",
+				children: dto.author ?? t("demo.commentsAnonymous")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-fg-muted text-[11px]",
+				children: dateLabel(dto.modified ?? dto.created)
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentBody, {
+			annotationRef: dto.ref,
+			text: dto.contents ?? "",
+			deletable: true
+		})]
+	});
+}
+/** One comment's text with inline edit (own, unlocked) and delete (replies). */
+function CommentBody({ annotationRef, text, deletable }) {
+	const t = (0, _embedpdf_react_i18n.useT)();
+	const comments = (0, _embedpdf_react_annotation.useComments)();
+	const perms = comments.permissionsFor(annotationRef);
+	const [draft, setDraft] = (0, react.useState)(null);
+	if (draft !== null) {
+		const save = () => {
+			const next = draft.trim();
+			setDraft(null);
+			if (next && next !== text) comments.edit(annotationRef, next);
+		};
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			value: draft,
+			autoFocus: true,
+			rows: 2,
+			onClick: (e) => e.stopPropagation(),
+			onChange: (e) => setDraft(e.target.value),
+			onBlur: save,
+			onKeyDown: (e) => {
+				if (e.key === "Enter" && !e.shiftKey) {
+					e.preventDefault();
+					save();
+				}
+				if (e.key === "Escape") setDraft(null);
+			},
+			className: "border-accent bg-surface text-fg w-full resize-none rounded-md border px-2 py-1 text-sm outline-none"
+		});
+	}
+	if (!text && !perms.canEditText && !deletable) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "group/body flex items-start gap-1",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: "text-fg min-w-0 flex-1 whitespace-pre-wrap text-sm",
+				children: text
+			}),
+			perms.canEditText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					setDraft(text);
+				},
+				className: "text-fg-muted hover:text-fg grid h-5 w-5 shrink-0 place-items-center rounded opacity-0 group-hover/body:opacity-100",
+				title: t("demo.commentsEdit"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "pencilMarker",
+					size: 12
+				})
+			}),
+			deletable && perms.canDelete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: (e) => {
+					e.stopPropagation();
+					comments.remove(annotationRef);
+				},
+				className: "text-fg-muted hover:text-fg grid h-5 w-5 shrink-0 place-items-center rounded opacity-0 group-hover/body:opacity-100",
+				title: t("demo.commentsDelete"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "trash",
+					size: 12
+				})
+			})
+		]
+	});
+}
+function statusLabel(t, state) {
+	switch (state) {
+		case "none": return t("demo.commentsStatusNone");
+		case "accepted": return t("demo.commentsStatusAccepted");
+		case "rejected": return t("demo.commentsStatusRejected");
+		case "cancelled": return t("demo.commentsStatusCancelled");
+		case "completed": return t("demo.commentsStatusCompleted");
+		default: return state;
+	}
+}
+//#endregion
 //#region src/ui/redaction-panel.tsx
 /**
 * The pending-redactions review panel (right sidebar). The list is a LIVE view
@@ -2999,13 +3593,7 @@ function RightSidebar() {
 					size: 16
 				})
 			})]
-		}), active === "style" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedactionPanel, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: "p-3",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: "text-fg-muted text-sm",
-				children: t("demo.empty")
-			})
-		})]
+		}), active === "style" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationStylePanel, {}) : active === "search" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchPanel, {}, documentId ?? "none") : active === "redaction" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedactionPanel, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CommentsPanel, {}, documentId ?? "none")]
 	});
 }
 function PageControls() {
@@ -3354,10 +3942,12 @@ function Shell() {
 						className: "relative min-w-0 flex-1",
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ArmedToolCursor, {}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_selection.SelectionClipboard, {}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_stage.Stage, {
-								interaction: true,
 								overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnnotationStrip, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionStrip, {}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_selection.SelectionHandles, {}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_scrollbar.Scrollbar, { axis: "y" }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_scrollbar.Scrollbar, { axis: "x" })
 								] }),
@@ -3365,7 +3955,6 @@ function Shell() {
 								style: { background: "var(--ep-canvas)" },
 								children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_render.RenderLayer, { annotations: false }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_render.TileLayer, { annotations: false }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_selection.SelectionLayer, {}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_search.SearchLayer, {}),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_embedpdf_react_link.LinkLayer, {}),
@@ -3404,7 +3993,7 @@ function Shell() {
 * changing these props on a mounted viewer does not rebuild the workspace.
 */
 /** Lazy built-in packs — a strings override for one of these wraps its loader. */
-const BUILTIN_LOADERS = { es: () => Promise.resolve().then(() => require("./es-C5084JO6.cjs")).then((m) => m.es) };
+const BUILTIN_LOADERS = { es: () => Promise.resolve().then(() => require("./es-B7b8KjR3.cjs")).then((m) => m.es) };
 const isDict = (v) => typeof v === "object" && v !== null;
 /**
 * Deep-merge `over` into `base` (immutably), expanding dotted keys —
@@ -3493,10 +4082,7 @@ function FullViewer({ engine, initialDocuments, fallback, commands, icons, strin
 		for (const c of resolved.commands) if (c.icon && !(c.icon in ICON_PATHS) && !(c.icon in resolved.icons)) console.warn(`[embedpdf] command "${c.id}": unknown icon "${c.icon}"`);
 	}, [resolved]);
 	const [plugins] = (0, react.useState)(() => [
-		(0, _embedpdf_react_stage.stagePlugin)({
-			layout: "vertical",
-			interaction: true
-		}),
+		(0, _embedpdf_react_stage.stagePlugin)({ layout: "vertical" }),
 		(0, _embedpdf_react_stage.stagePlugin)({
 			id: "stage-thumbs",
 			token: ThumbsStageToken,
@@ -3520,7 +4106,8 @@ function FullViewer({ engine, initialDocuments, fallback, commands, icons, strin
 		}),
 		(0, _embedpdf_react_render.renderPlugin)(),
 		(0, _embedpdf_react_page_edit.pageEditPlugin)(),
-		(0, _embedpdf_react_interaction.interactionPlugin)({ defaultTool: "pointer" }),
+		(0, _embedpdf_react_interaction.interactionPlugin)(),
+		(0, _embedpdf_react_interaction.feedbackPlugin)({ provider: _embedpdf_react_interaction.vibrationFeedback }),
 		(0, _embedpdf_react_selection.selectionPlugin)(),
 		(0, _embedpdf_react_annotation.annotationPlugin)({ tools: [{
 			id: "arrow",