@ai-matrx/office 0.8.50 → 0.8.52

package/dist/pdf.cjs

@@ -32,27 +32,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var pdf_exports = {};
 __export(pdf_exports, {
   HISTORY_LIMIT: () => HISTORY_LIMIT,
+  MARKUP_KIND_LABEL: () => MARKUP_KIND_LABEL,
+  MARKUP_SIZES: () => MARKUP_SIZES,
+  MARKUP_STYLE_FIELDS: () => MARKUP_STYLE_FIELDS,
+  MARKUP_SWATCHES: () => MARKUP_SWATCHES,
   PDF_COMING_SOON: () => PDF_COMING_SOON,
+  PDF_MARKUP_COMING_SOON: () => PDF_MARKUP_COMING_SOON,
+  PDF_MARKUP_SHORTCUTS: () => PDF_MARKUP_SHORTCUTS,
+  PDF_MARKUP_TOOLS: () => PDF_MARKUP_TOOLS,
   PDF_SHORTCUTS: () => PDF_SHORTCUTS,
   PDF_TOOLS: () => PDF_TOOLS,
   PdfWorkspace: () => PdfWorkspace,
+  TIMELINE_LIMIT: () => TIMELINE_LIMIT,
   canRedo: () => canRedo,
   canUndo: () => canUndo,
   comingSoonIdOf: () => comingSoonIdOf,
   compilePageOps: () => compilePageOps,
   deletePages: () => deletePages,
+  dropOrigin: () => dropOrigin,
+  emptyTimeline: () => emptyTimeline,
   formatKeys: () => formatKeys,
   freshDecisions: () => freshDecisions,
   isDirty: () => isDirty,
   keptOrder: () => keptOrder,
+  markupComingSoonId: () => markupComingSoonId,
+  markupRedoneElsewhere: () => markupRedoneElsewhere,
+  markupUndoneElsewhere: () => markupUndoneElsewhere,
+  matchMarkupKey: () => matchMarkupKey,
   matchShortcut: () => matchShortcut,
+  nextRedo: () => nextRedo,
+  nextUndo: () => nextUndo,
+  pdfMarkupTool: () => pdfMarkupTool,
   pdfTool: () => pdfTool,
   pushStep: () => pushStep,
+  recordStep: () => recordStep,
   redo: () => redo,
   redoLabel: () => redoLabel,
   reorderPages: () => reorderPages,
   restorePages: () => restorePages,
   startHistory: () => startHistory,
+  stepBack: () => stepBack,
+  stepForward: () => stepForward,
   turnPages: () => turnPages,
   undo: () => undo,
   undoLabel: () => undoLabel
@@ -60,10 +80,10 @@ __export(pdf_exports, {
 module.exports = __toCommonJS(pdf_exports);
 
 // src/pdf/PdfWorkspace.tsx
-var import_react3 = require("react");
-var import_cn = require("@ai-matrx/design-system/cn");
-var import_controls4 = require("@ai-matrx/design-system/controls");
-var import_icons2 = require("@ai-matrx/design-system/icons");
+var import_react4 = require("react");
+var import_cn2 = require("@ai-matrx/design-system/cn");
+var import_controls5 = require("@ai-matrx/design-system/controls");
+var import_icons3 = require("@ai-matrx/design-system/icons");
 var import_RenderedFindBar = require("@ai-matrx/rich-content/rich-document/search/RenderedFindBar");
 
 // src/pdf/page-decisions.ts
@@ -430,9 +450,94 @@ var canRedo = (h) => h.future.length > 0;
 var undoLabel = (h) => h.present.label;
 var redoLabel = (h) => h.future[0]?.label ?? "";
 
+// src/pdf/markup.ts
+var PDF_MARKUP_TOOLS = [
+  { id: "highlight", label: "Highlight", key: "h", status: "ready", engineTool: "highlight" },
+  { id: "freetext", label: "Text box", key: "x", status: "ready", engineTool: "freetext" },
+  { id: "ink", label: "Draw", key: "d", status: "ready", engineTool: "ink" },
+  { id: "image", label: "Image", key: "i", status: "ready", engineTool: "stamp" },
+  { id: "signature", label: "Signature", key: "g", status: "ready", engineTool: "stamp", needs: "signaturePad" },
+  { id: "underline", label: "Underline and strike out", status: "soon", reason: "The PDF writer we use makes highlights only." },
+  { id: "shapes", label: "Shapes", status: "soon", reason: "Rectangles, ovals and arrows need their own writer." },
+  { id: "note", label: "Sticky note", status: "soon", reason: "Comment on a highlight, text box or drawing for now." },
+  { id: "links", label: "Links", status: "soon", reason: "The PDF writer we use cannot add or change links." },
+  { id: "edit-text", label: "Edit page text", status: "soon", reason: "Changing the page's own text needs a server edit with a before-and-after check." }
+];
+var pdfMarkupTool = (id) => PDF_MARKUP_TOOLS.find((t) => t.id === id);
+var MARKUP_SWATCHES = [
+  { value: "#ffd400", label: "Yellow" },
+  { value: "#5fe36b", label: "Green" },
+  { value: "#4cc9f0", label: "Blue" },
+  { value: "#ff6fb5", label: "Pink" },
+  { value: "#ff4d4d", label: "Red" },
+  { value: "#1f2937", label: "Black" }
+];
+var MARKUP_STYLE_FIELDS = {
+  highlight: ["color"],
+  freetext: ["color", "size"],
+  ink: ["color", "opacity", "size"],
+  stamp: [],
+  signature: []
+};
+var MARKUP_SIZES = {
+  freetext: [8, 10, 12, 14, 18, 24, 36],
+  ink: [1, 2, 3, 5, 8, 12]
+};
+var MARKUP_KIND_LABEL = {
+  highlight: "Highlight",
+  freetext: "Text box",
+  ink: "Drawing",
+  stamp: "Image",
+  signature: "Signature"
+};
+var MARKUP_PROMISES = {
+  underline: "Underline or strike out text, with the same colors as highlights.",
+  shapes: "Draw rectangles, ovals, lines and arrows on a page.",
+  note: "Pin a sticky note anywhere on a page.",
+  links: "Add, change and remove links to a page or a web address.",
+  "edit-text": "Change the page's own text, see a before-and-after view, then save."
+};
+var markupComingSoonId = (id) => id === "links" ? "pdf.links" : id === "edit-text" ? "pdf.edit-text" : `pdf.markup.${id}`;
+var PDF_MARKUP_COMING_SOON = Object.fromEntries(
+  PDF_MARKUP_TOOLS.filter((t) => t.status === "soon").map((t) => {
+    const id = markupComingSoonId(t.id);
+    return [id, { id, label: t.label, owner: "pdf", promise: MARKUP_PROMISES[t.id] ?? "", stage: "planned", surfaces: ["PDF workspace markup panel"] }];
+  })
+);
+var TIMELINE_LIMIT = 100;
+var emptyTimeline = () => ({ past: [], future: [] });
+function recordStep(t, origin, label) {
+  return { past: [...t.past, { origin, label }].slice(-TIMELINE_LIMIT), future: [] };
+}
+var nextUndo = (t) => t.past[t.past.length - 1] ?? null;
+var nextRedo = (t) => t.future[0] ?? null;
+function stepBack(t) {
+  const last = t.past[t.past.length - 1];
+  return last ? { past: t.past.slice(0, -1), future: [last, ...t.future] } : t;
+}
+function stepForward(t) {
+  const next = t.future[0];
+  return next ? { past: [...t.past, next], future: t.future.slice(1) } : t;
+}
+function markupUndoneElsewhere(t) {
+  for (let i = t.past.length - 1; i >= 0; i--) {
+    if (t.past[i].origin === "markup") return { past: [...t.past.slice(0, i), ...t.past.slice(i + 1)], future: [t.past[i], ...t.future] };
+  }
+  return t;
+}
+function markupRedoneElsewhere(t) {
+  const i = t.future.findIndex((s) => s.origin === "markup");
+  if (i < 0) return t;
+  return { past: [...t.past, t.future[i]], future: [...t.future.slice(0, i), ...t.future.slice(i + 1)] };
+}
+function dropOrigin(t, origin) {
+  return { past: t.past.filter((s) => s.origin !== origin), future: t.future.filter((s) => s.origin !== origin) };
+}
+
 // src/pdf/tools.ts
 var PDF_TOOLS = [
   { id: "browse", label: "Browse", key: "v", status: "ready", opens: "none", group: 0 },
+  { id: "markup", label: "Comment and mark up", key: "m", status: "ready", capability: "client:pdfjs-annotation-editors,save-new-version", opens: "panel", group: 0, hint: "Highlight, write, draw, sign. Saves a new version." },
   { id: "organize", label: "Organize pages", key: "o", status: "ready", capability: "rotate-pages,delete-pages,reorder-pages", opens: "panel", group: 0 },
   { id: "extract-pages", label: "Extract pages", key: "e", status: "ready", capability: "extract-pages", opens: "panel", group: 0 },
   { id: "split", label: "Split", key: "s", status: "ready", capability: "split", opens: "panel", group: 0 },
@@ -453,7 +558,7 @@ var PDF_TOOLS = [
 var pdfTool = (id) => PDF_TOOLS.find((t) => t.id === id);
 var comingSoonIdOf = (id) => `pdf.${id}`;
 var PROMISES = {
-  edit: "Change text and swap images right on the page.",
+  edit: "Change the page's own text and swap images, with a before-and-after view.",
   forms: "Fill in a form and keep the values in the file.",
   protect: "Lock a PDF with a password and limit what others can do.",
   ocr: "Turn a scanned PDF into one you can search and copy from.",
@@ -478,14 +583,15 @@ var PDF_COMING_SOON = {
       return [id, { id, label: t.label, owner: "pdf", promise: PROMISES[t.id] ?? "", stage: "planned", surfaces: ["PDF workspace tool rail"] }];
     })
   ),
-  ...PANEL_PROMISES
+  ...PANEL_PROMISES,
+  ...PDF_MARKUP_COMING_SOON
 };
 
 // src/pdf/shortcuts.ts
 var PDF_SHORTCUTS = [
   { action: "undo", label: "Undo", keys: "Mod+Z", section: "Edit" },
   { action: "redo", label: "Redo", keys: "Mod+Shift+Z", section: "Edit" },
-  { action: "save", label: "Apply page changes", keys: "Mod+S", section: "Edit" },
+  { action: "save", label: "Save markup or apply page changes", keys: "Mod+S", section: "Edit" },
   { action: "find", label: "Find", keys: "Mod+F", section: "Edit" },
   { action: "print", label: "Print", keys: "Mod+P", section: "Edit" },
   { action: "zoom-in", label: "Zoom in", keys: "Mod+=", section: "View" },
@@ -512,6 +618,14 @@ var PDF_SHORTCUTS = [
     section: "Tools"
   }))
 ];
+var PDF_MARKUP_SHORTCUTS = PDF_MARKUP_TOOLS.filter(
+  (t) => t.status === "ready" && t.key
+).map((t) => ({ tool: t.id, label: t.label, keys: t.key.toUpperCase() }));
+function matchMarkupKey(e, typing) {
+  if (typing || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey || e.key.length !== 1) return null;
+  const k = e.key.toLowerCase();
+  return PDF_MARKUP_SHORTCUTS.find((s) => s.keys.toLowerCase() === k)?.tool ?? null;
+}
 function parse(keys) {
   const parts = keys.split("+");
   const key = parts[parts.length - 1] === "" ? "+" : parts[parts.length - 1];
@@ -538,30 +652,222 @@ function formatKeys(keys, mac) {
   return keys.split("+").map((k) => k === "Mod" ? mac ? "\u2318" : "Ctrl" : k === "Shift" ? mac ? "\u21E7" : "Shift" : k === "ArrowRight" ? "\u2192" : k === "ArrowLeft" ? "\u2190" : k).join(mac ? "" : "+");
 }
 
-// src/pdf/tool-icons.tsx
+// src/pdf/markup-panel.tsx
+var import_react3 = require("react");
+var import_cn = require("@ai-matrx/design-system/cn");
+var import_controls4 = require("@ai-matrx/design-system/controls");
 var import_icons = require("@ai-matrx/design-system/icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var MARKUP_ICONS = {
+  highlight: import_icons.HighlighterIcon,
+  freetext: import_icons.TypeIcon,
+  ink: import_icons.PencilIcon,
+  image: import_icons.ImageIcon,
+  signature: import_icons.PenToolIcon,
+  underline: import_icons.WrapTextIcon,
+  shapes: import_icons.ProportionsIcon,
+  note: import_icons.StickyNoteIcon,
+  links: import_icons.Link2Icon,
+  "edit-text": import_icons.TypeIcon
+};
+function Section({ label, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium text-muted-foreground", children: label }),
+    children
+  ] });
+}
+function StyleControls({ kind, style, onChange, compact }) {
+  const fields = MARKUP_STYLE_FIELDS[kind];
+  if (!fields.length) return null;
+  const sizes = kind === "freetext" ? MARKUP_SIZES.freetext : kind === "ink" ? MARKUP_SIZES.ink : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_cn.cn)("flex gap-2", compact ? "items-center" : "flex-col"), children: [
+    fields.includes("color") ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.ColorSwatchRow, { colors: MARKUP_SWATCHES, value: style.color, onChange: (color) => onChange({ color }), "aria-label": "Color" }) : null,
+    fields.includes("opacity") ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: compact ? "w-52 shrink-0" : "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.OpacitySlider, { value: style.opacity, onChange: (opacity) => onChange({ opacity }), className: "w-full" }) }) : null,
+    fields.includes("size") && sizes ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: compact ? "w-24 shrink-0" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_controls4.Select,
+      {
+        "aria-label": kind === "freetext" ? "Font size" : "Line width",
+        value: String(sizes.includes(style.size) ? style.size : sizes[0]),
+        onValueChange: (v) => onChange({ size: Number(v) }),
+        options: sizes.map((n) => ({ value: String(n), label: `${n} pt` }))
+      }
+    ) }) : null
+  ] });
+}
+function MarkupPanel({ host, engine, snapshot, active, onPick, blocked, busy, online, error, onSave, onDiscard, onSoon, goToPage, reloadKey }) {
+  const [confirmDiscard, setConfirmDiscard] = (0, import_react3.useState)(false);
+  const [signature, setSignature] = (0, import_react3.useState)(null);
+  const [existing, setExisting] = (0, import_react3.useState)(null);
+  const pending = snapshot?.pending ?? 0;
+  const tools = PDF_MARKUP_TOOLS.filter((t) => t.needs !== "signaturePad" || host.signaturePad);
+  const ready = tools.filter((t) => t.status === "ready");
+  const soon = tools.filter((t) => t.status === "soon");
+  const def = tools.find((t) => t.id === active);
+  const styleKind = def?.engineTool && def.engineTool !== "stamp" ? def.engineTool : null;
+  const Pad = host.signaturePad;
+  (0, import_react3.useEffect)(() => {
+    let live = true;
+    host.existingAnnotations?.().then((list) => live && setExisting(list), () => live && setExisting([]));
+    return () => {
+      live = false;
+    };
+  }, [host, reloadKey]);
+  (0, import_react3.useEffect)(() => {
+    if (!pending) setConfirmDiscard(false);
+  }, [pending]);
+  const pickImage = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/png,image/jpeg,image/webp,image/gif,image/svg+xml";
+    input.onchange = () => {
+      const f = input.files?.[0];
+      if (f && engine) void engine.addImage(f, "stamp");
+    };
+    input.click();
+  };
+  const row = (t) => {
+    const Icon = MARKUP_ICONS[t.id];
+    const on = t.id === active;
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": t.status === "ready" ? on : void 0,
+          disabled: t.status === "ready" && (!engine || Boolean(blocked)),
+          onClick: () => t.status === "soon" ? onSoon(markupComingSoonId(t.id)) : onPick(t.id),
+          className: (0, import_cn.cn)(
+            "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:text-disabled-foreground",
+            on && "bg-accent"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
+            t.status === "soon" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 whitespace-nowrap text-muted-foreground", children: "Soon" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("kbd", { className: "text-muted-foreground", children: t.key?.toUpperCase() })
+          ]
+        }
+      ),
+      t.status === "soon" && t.reason ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "pl-8 pr-2 text-xs text-muted-foreground", children: t.reason }) : null
+    ] }, t.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-4", "data-pdf-markup-panel": "", children: [
+    blocked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "status", className: "rounded-md border border-border px-2 py-1.5 text-xs", children: blocked }) : null,
+    !engine && !blocked ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "Opening the document\u2026" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "flex flex-col", "aria-label": "Markup tools", children: ready.map(row) }),
+    styleKind && snapshot ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Section, { label: "Look", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyleControls, { kind: styleKind, style: snapshot.styles[styleKind], onChange: (p) => engine?.setStyle(p) }) }) : null,
+    active === "highlight" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "Select text on the page to highlight it." }) : null,
+    active === "freetext" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "Click on the page, then type." }) : null,
+    active === "ink" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "Drag on the page to draw." }) : null,
+    active === "image" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.ImageIcon, {}), disabled: !engine, onClick: pickImage, children: "Choose an image" }) : null,
+    active === "signature" && Pad ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Section, { label: "Signature", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Pad, { value: signature, onChange: setSignature }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.PenToolIcon, {}), disabled: !engine || !signature, onClick: () => signature && engine && void engine.addImage(signature, "signature"), children: "Place on page" })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Section, { label: "Changes", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs", role: "status", "data-pdf-markup-pending": "", children: pending ? `Not saved: ${snapshot?.summary}` : "No unsaved markup" }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", className: "text-xs text-destructive", children: error }) : null,
+      !online ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "You are offline. Markup is kept here until you are back online." }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "primary", disabled: !pending || busy || !online, onClick: onSave, children: busy ? "Saving" : "Save" }),
+        confirmDiscard ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_controls4.Button, { variant: "outline", onClick: () => {
+            setConfirmDiscard(false);
+            onDiscard();
+          }, children: [
+            "Discard ",
+            pending
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "quiet", onClick: () => setConfirmDiscard(false), children: "Keep" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "outline", disabled: !pending || busy, onClick: () => setConfirmDiscard(true), children: "Discard" })
+      ] })
+    ] }),
+    host.existingAnnotations ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Section, { label: "In this file", children: [
+      existing === null ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "Reading\u2026" }) : existing.filter((a) => a.subtype !== "Link" && a.subtype !== "Widget").length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "No comments or markup yet" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "flex flex-col", "aria-label": "Annotations in this file", children: existing.filter((a) => a.subtype !== "Link" && a.subtype !== "Widget").map((a, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("button", { type: "button", onClick: () => goToPage(a.page), className: "flex w-full items-start gap-2 rounded-md px-2 py-1 text-left text-xs hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "w-8 shrink-0 tabular-nums text-muted-foreground", children: [
+          "p. ",
+          a.page
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "block", children: [
+            a.subtype,
+            a.author ? ` \xB7 ${a.author}` : ""
+          ] }),
+          a.contents ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "block truncate text-muted-foreground", children: a.contents }) : null
+        ] })
+      ] }) }, `${a.page}-${i}`)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: "Markup already saved shows on the page; changing it in place is coming." })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Section, { label: "Coming soon", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "flex flex-col", "aria-label": "Markup coming soon", children: soon.map(row) }) })
+  ] });
+}
+function MarkupFloatingToolbar({ engine, snapshot, enabled, onDone }) {
+  const sel = snapshot?.selection ?? null;
+  const [commenting, setCommenting] = (0, import_react3.useState)(false);
+  const [draft, setDraft] = (0, import_react3.useState)("");
+  const selKey = sel ? `${sel.kind}:${Math.round(sel.rect.x)}:${Math.round(sel.rect.y)}` : "";
+  (0, import_react3.useEffect)(() => {
+    setCommenting(false);
+    setDraft(sel?.comment ?? "");
+  }, [selKey]);
+  if (!engine || !enabled || !sel) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.AnchoredToolbar, { open: true, rect: sel.rect, "aria-label": `${MARKUP_KIND_LABEL[sel.kind]} options`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", "data-pdf-markup-toolbar": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyleControls, { compact: true, kind: sel.kind, style: sel.style, onChange: (p) => engine.setStyle(p) }),
+    commenting ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_controls4.Field,
+      {
+        autoFocus: true,
+        value: draft,
+        "aria-label": "Comment",
+        placeholder: "Comment",
+        onChange: (e) => setDraft(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            engine.setComment(draft);
+            setCommenting(false);
+            onDone();
+          }
+          if (e.key === "Escape") {
+            e.stopPropagation();
+            setCommenting(false);
+            onDone();
+          }
+        },
+        onBlur: () => {
+          engine.setComment(draft);
+          setCommenting(false);
+        },
+        width: "md"
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.MessageSquareIcon, {}), "aria-label": sel.comment ? "Edit comment" : "Add comment", title: sel.comment || "Add comment", pressed: Boolean(sel.comment), onClick: () => setCommenting(true) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "quiet", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.Trash2Icon, {}), "aria-label": "Delete", title: "Delete", onClick: () => engine.deleteSelected() })
+  ] }) });
+}
+
+// src/pdf/tool-icons.tsx
+var import_icons2 = require("@ai-matrx/design-system/icons");
 var PDF_TOOL_ICONS = {
-  browse: import_icons.HandIcon,
-  organize: import_icons.LayoutGridIcon,
-  "extract-pages": import_icons.ArrowUpFromLineIcon,
-  split: import_icons.SplitIcon,
-  crop: import_icons.ProportionsIcon,
-  redact: import_icons.EraserIcon,
-  compress: import_icons.ChevronsDownUpIcon,
-  scan: import_icons.CameraIcon,
-  sign: import_icons.PenToolIcon,
-  "extract-data": import_icons.TypeIcon,
-  edit: import_icons.PencilIcon,
-  forms: import_icons.ListChecksIcon,
-  protect: import_icons.LockIcon,
-  ocr: import_icons.CaptionsIcon,
-  convert: import_icons.ArrowLeftRightIcon,
-  compare: import_icons.Columns2Icon,
-  stamp: import_icons.FlagIcon
+  browse: import_icons2.HandIcon,
+  markup: import_icons2.MessageSquareIcon,
+  organize: import_icons2.LayoutGridIcon,
+  "extract-pages": import_icons2.ArrowUpFromLineIcon,
+  split: import_icons2.SplitIcon,
+  crop: import_icons2.ProportionsIcon,
+  redact: import_icons2.EraserIcon,
+  compress: import_icons2.ChevronsDownUpIcon,
+  scan: import_icons2.CameraIcon,
+  sign: import_icons2.PenToolIcon,
+  "extract-data": import_icons2.TypeIcon,
+  edit: import_icons2.PencilIcon,
+  forms: import_icons2.ListChecksIcon,
+  protect: import_icons2.LockIcon,
+  ocr: import_icons2.CaptionsIcon,
+  convert: import_icons2.ArrowLeftRightIcon,
+  compare: import_icons2.Columns2Icon,
+  stamp: import_icons2.FlagIcon
 };
 
 // src/pdf/PdfWorkspace.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var ZOOM_STEPS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3];
 var COMPACT_BELOW_PX = 768;
 var BAR = "flex h-10 shrink-0 items-center gap-1 border-b border-border bg-background px-2";
@@ -573,8 +879,8 @@ async function announceSoon(id) {
   await announceComingSoon(id);
 }
 function useWidth(ref) {
-  const [size, setSize] = (0, import_react3.useState)({ w: 1200, h: 800 });
-  (0, import_react3.useLayoutEffect)(() => {
+  const [size, setSize] = (0, import_react4.useState)({ w: 1200, h: 800 });
+  (0, import_react4.useLayoutEffect)(() => {
     const node = ref.current;
     if (!node) return void 0;
     const measure = () => setSize({ w: node.clientWidth || 1200, h: node.clientHeight || 800 });
@@ -586,36 +892,36 @@ function useWidth(ref) {
   }, [ref]);
   return size;
 }
-function ToolRows({ tool, hostTools, onPick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    hostTools.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+function ToolRows({ tool, hostTools, onPick, canMarkup = false }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    hostTools.map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
         type: "button",
         role: "menuitem",
         "aria-current": tool === `host:${t.id}` ? "true" : void 0,
-        className: (0, import_cn.cn)("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", tool === `host:${t.id}` && "bg-accent"),
+        className: (0, import_cn2.cn)("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", tool === `host:${t.id}` && "bg-accent"),
         onClick: () => onPick(`host:${t.id}`),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(t.icon, { className: "size-4 shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1 whitespace-nowrap", children: t.label })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(t.icon, { className: "size-4 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 whitespace-nowrap", children: t.label })
         ]
       }
     ) }, `host:${t.id}`)),
-    PDF_TOOLS.filter((t) => t.id !== "browse").map((t) => {
+    PDF_TOOLS.filter((t) => t.id !== "browse" && (t.id !== "markup" || canMarkup)).map((t) => {
       const Icon = PDF_TOOL_ICONS[t.id];
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           type: "button",
           role: "menuitem",
           "aria-current": t.id === tool ? "true" : void 0,
-          className: (0, import_cn.cn)("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", t.id === tool && "bg-accent"),
+          className: (0, import_cn2.cn)("flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", t.id === tool && "bg-accent"),
           onClick: () => onPick(t.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "size-4 shrink-0" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-1 whitespace-nowrap", children: t.label }),
-            t.status === "soon" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-muted-foreground", children: "Coming soon" }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { className: "size-4 shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "flex-1 whitespace-nowrap", children: t.label }),
+            t.status === "soon" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", children: "Coming soon" }) : null
           ]
         }
       ) }, t.id);
@@ -623,50 +929,58 @@ function ToolRows({ tool, hostTools, onPick }) {
   ] });
 }
 function PdfWorkspace({ host, className }) {
-  const rootRef = (0, import_react3.useRef)(null);
-  const scrollerRef = (0, import_react3.useRef)(null);
+  const rootRef = (0, import_react4.useRef)(null);
+  const scrollerRef = (0, import_react4.useRef)(null);
   const rootSize = useWidth(rootRef);
   const viewSize = useWidth(scrollerRef);
   const compact = rootSize.w < COMPACT_BELOW_PX;
   const online = host.online !== false;
-  const [pageCount, setPageCount] = (0, import_react3.useState)(0);
-  const [history, setHistory] = (0, import_react3.useState)(() => startHistory(freshDecisions(0)));
+  const [pageCount, setPageCount] = (0, import_react4.useState)(0);
+  const [history, setHistory] = (0, import_react4.useState)(() => startHistory(freshDecisions(0)));
   const decisions = history.present.value;
   const dirty = isDirty(decisions);
-  const [tool, setTool] = (0, import_react3.useState)("browse");
-  const [hostToolId, setHostToolId] = (0, import_react3.useState)(null);
-  const hostTools = (0, import_react3.useMemo)(() => host.tools ?? [], [host.tools]);
+  const [tool, setTool] = (0, import_react4.useState)("browse");
+  const [hostToolId, setHostToolId] = (0, import_react4.useState)(null);
+  const hostTools = (0, import_react4.useMemo)(() => host.tools ?? [], [host.tools]);
   const hostTool = hostToolId ? hostTools.find((t) => t.id === hostToolId) ?? null : null;
   const activeToolKey = hostTool ? `host:${hostTool.id}` : tool;
-  const [leftOpen, setLeftOpen] = (0, import_react3.useState)(true);
-  const [rightOpen, setRightOpen] = (0, import_react3.useState)(true);
-  const [leftTab, setLeftTab] = (0, import_react3.useState)("pages");
-  const [read, setRead] = (0, import_react3.useState)(false);
-  const [spread, setSpread] = (0, import_react3.useState)("single");
-  const [zoomMode, setZoomMode] = (0, import_react3.useState)("fit-width");
-  const [customZoom, setCustomZoom] = (0, import_react3.useState)(1);
-  const [selected, setSelected] = (0, import_react3.useState)([]);
-  const [currentPage, setCurrentPage] = (0, import_react3.useState)(1);
-  const [pageDraft, setPageDraft] = (0, import_react3.useState)("1");
-  const [findOpen, setFindOpen] = (0, import_react3.useState)(false);
-  const [findFocus, setFindFocus] = (0, import_react3.useState)(0);
-  const [pop, setPop] = (0, import_react3.useState)(null);
-  const [sheet, setSheet] = (0, import_react3.useState)(null);
-  const [toolQuery, setToolQuery] = (0, import_react3.useState)("");
-  const [busy, setBusy] = (0, import_react3.useState)(false);
-  const [error, setError] = (0, import_react3.useState)(null);
-  const [result, setResult] = (0, import_react3.useState)(null);
-  const [reloadKey, setReloadKey] = (0, import_react3.useState)(0);
-  const [sizeVersion, setSizeVersion] = (0, import_react3.useState)(0);
-  const sizes = (0, import_react3.useRef)(/* @__PURE__ */ new Map());
-  const [editingName, setEditingName] = (0, import_react3.useState)(false);
-  const [nameDraft, setNameDraft] = (0, import_react3.useState)(host.file.name);
-  const [printMode, setPrintMode] = (0, import_react3.useState)("all");
-  const [printRange, setPrintRange] = (0, import_react3.useState)("");
-  const selectedPages = (0, import_react3.useMemo)(() => selected.map(Number).sort((a, b) => a - b), [selected]);
+  const [leftOpen, setLeftOpen] = (0, import_react4.useState)(true);
+  const [rightOpen, setRightOpen] = (0, import_react4.useState)(true);
+  const [leftTab, setLeftTab] = (0, import_react4.useState)("pages");
+  const [read, setRead] = (0, import_react4.useState)(false);
+  const [spread, setSpread] = (0, import_react4.useState)("single");
+  const [zoomMode, setZoomMode] = (0, import_react4.useState)("fit-width");
+  const [customZoom, setCustomZoom] = (0, import_react4.useState)(1);
+  const [selected, setSelected] = (0, import_react4.useState)([]);
+  const [currentPage, setCurrentPage] = (0, import_react4.useState)(1);
+  const [pageDraft, setPageDraft] = (0, import_react4.useState)("1");
+  const [findOpen, setFindOpen] = (0, import_react4.useState)(false);
+  const [findFocus, setFindFocus] = (0, import_react4.useState)(0);
+  const [pop, setPop] = (0, import_react4.useState)(null);
+  const [sheet, setSheet] = (0, import_react4.useState)(null);
+  const [toolQuery, setToolQuery] = (0, import_react4.useState)("");
+  const [busy, setBusy] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const [result, setResult] = (0, import_react4.useState)(null);
+  const [reloadKey, setReloadKey] = (0, import_react4.useState)(0);
+  const [sizeVersion, setSizeVersion] = (0, import_react4.useState)(0);
+  const sizes = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
+  const [editingName, setEditingName] = (0, import_react4.useState)(false);
+  const [nameDraft, setNameDraft] = (0, import_react4.useState)(host.file.name);
+  const [printMode, setPrintMode] = (0, import_react4.useState)("all");
+  const [printRange, setPrintRange] = (0, import_react4.useState)("");
+  const canMarkup = Boolean(host.saveMarkup);
+  const [engine, setEngine] = (0, import_react4.useState)(null);
+  const [snap, setSnap] = (0, import_react4.useState)(null);
+  const [timeline, setTimeline] = (0, import_react4.useState)(emptyTimeline);
+  const [markupTool, setMarkupTool] = (0, import_react4.useState)("highlight");
+  const [markupBusy, setMarkupBusy] = (0, import_react4.useState)(false);
+  const [markupError, setMarkupError] = (0, import_react4.useState)(null);
+  const markupPending = snap?.pending ?? 0;
+  const selectedPages = (0, import_react4.useMemo)(() => selected.map(Number).sort((a, b) => a - b), [selected]);
   const toolDef = pdfTool(tool);
   const first = sizes.current.get(1);
-  const fitPage = (0, import_react3.useMemo)(() => {
+  const fitPage = (0, import_react4.useMemo)(() => {
     void sizeVersion;
     if (!first) return 1;
     const ratio = first.h / first.w;
@@ -675,7 +989,7 @@ function PdfWorkspace({ host, className }) {
     return clampZoom(availH * cols / (Math.max(1, viewSize.w) * ratio));
   }, [first, spread, viewSize.h, viewSize.w, sizeVersion]);
   const zoom = zoomMode === "fit-width" ? 1 : zoomMode === "fit-page" ? fitPage : customZoom;
-  const stepZoom = (0, import_react3.useCallback)(
+  const stepZoom = (0, import_react4.useCallback)(
     (dir) => {
       const cur = zoomMode === "fit-width" ? 1 : zoomMode === "fit-page" ? fitPage : customZoom;
       const next = dir > 0 ? ZOOM_STEPS.find((s) => s > cur + 0.01) : [...ZOOM_STEPS].reverse().find((s) => s < cur - 0.01);
@@ -685,7 +999,7 @@ function PdfWorkspace({ host, className }) {
     },
     [zoomMode, fitPage, customZoom]
   );
-  const goToPage = (0, import_react3.useCallback)(
+  const goToPage = (0, import_react4.useCallback)(
     (n) => {
       const page = Math.min(Math.max(1, Math.round(n)), Math.max(1, pageCount));
       setCurrentPage(page);
@@ -695,7 +1009,7 @@ function PdfWorkspace({ host, className }) {
     },
     [pageCount]
   );
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const node = scrollerRef.current;
     if (!node) return void 0;
     let raf = 0;
@@ -722,34 +1036,37 @@ function PdfWorkspace({ host, className }) {
       cancelAnimationFrame(raf);
     };
   }, [pageCount]);
-  const commit = (0, import_react3.useCallback)((label, next) => setHistory((h) => pushStep(h, label, next)), []);
-  const targets = (0, import_react3.useCallback)(() => selectedPages.length ? selectedPages : [currentPage], [selectedPages, currentPage]);
-  const turn = (0, import_react3.useCallback)(
+  const commit = (0, import_react4.useCallback)((label, next) => {
+    setHistory((h) => pushStep(h, label, next));
+    setTimeline((t) => recordStep(t, "page", label));
+  }, []);
+  const targets = (0, import_react4.useCallback)(() => selectedPages.length ? selectedPages : [currentPage], [selectedPages, currentPage]);
+  const turn = (0, import_react4.useCallback)(
     (by) => {
       const t = targets();
       commit(`Rotate ${t.length === 1 ? `page ${t[0]}` : `${t.length} pages`}`, turnPages(decisions, t, by));
     },
     [targets, commit, decisions]
   );
-  const del = (0, import_react3.useCallback)(() => {
+  const del = (0, import_react4.useCallback)(() => {
     const t = targets();
     commit(`Delete ${t.length === 1 ? `page ${t[0]}` : `${t.length} pages`}`, deletePages(decisions, t));
   }, [targets, commit, decisions]);
-  const restore = (0, import_react3.useCallback)(() => {
+  const restore = (0, import_react4.useCallback)(() => {
     const t = targets();
     commit(`Restore ${t.length === 1 ? `page ${t[0]}` : `${t.length} pages`}`, restorePages(decisions, t));
   }, [targets, commit, decisions]);
-  const onDocumentLoad = (0, import_react3.useCallback)((n) => {
+  const onDocumentLoad = (0, import_react4.useCallback)((n) => {
     setPageCount(n);
     setHistory((h) => h.present.value.order.length === n ? h : startHistory(freshDecisions(n)));
   }, []);
-  const onPageSize = (0, import_react3.useCallback)((page, w, h) => {
+  const onPageSize = (0, import_react4.useCallback)((page, w, h) => {
     const prev = sizes.current.get(page);
     if (prev && prev.w === w && prev.h === h) return;
     sizes.current.set(page, { w, h });
     if (page === 1) queueMicrotask(() => setSizeVersion((v) => v + 1));
   }, []);
-  const fail = (0, import_react3.useCallback)(
+  const fail = (0, import_react4.useCallback)(
     (e) => {
       const message = e instanceof Error ? e.message : "That did not work.";
       setError(message);
@@ -757,7 +1074,7 @@ function PdfWorkspace({ host, className }) {
     },
     [host]
   );
-  const runTool = (0, import_react3.useCallback)(
+  const runTool = (0, import_react4.useCallback)(
     async (request) => {
       if (!online) {
         setError("You are offline. Changes are not queued; try again when you are back online.");
@@ -783,12 +1100,109 @@ function PdfWorkspace({ host, className }) {
     },
     [host, online, pageCount, fail]
   );
-  const apply = (0, import_react3.useCallback)(() => {
+  const apply = (0, import_react4.useCallback)(() => {
     const ops = compilePageOps(decisions);
-    if (ops.length) void runTool({ tool: "apply-pages", ops });
-  }, [decisions, runTool]);
-  const discard = (0, import_react3.useCallback)(() => setHistory(startHistory(freshDecisions(pageCount))), [pageCount]);
-  const chooseTool = (0, import_react3.useCallback)(
+    if (!ops.length) return;
+    if (markupPending) {
+      setError("Save or discard your markup first: applying page changes reloads the file.");
+      return;
+    }
+    setTimeline((t) => dropOrigin(t, "page"));
+    void runTool({ tool: "apply-pages", ops });
+  }, [decisions, runTool, markupPending]);
+  const discard = (0, import_react4.useCallback)(() => {
+    setHistory(startHistory(freshDecisions(pageCount)));
+    setTimeline((t) => dropOrigin(t, "page"));
+  }, [pageCount]);
+  const onMarkupEngine = (0, import_react4.useCallback)((e) => {
+    setEngine(e);
+    setSnap(e ? e.getSnapshot() : null);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!engine) return void 0;
+    const offSnap = engine.subscribe(setSnap);
+    const offHistory = engine.onHistory((ev) => {
+      if (ev.type === "step") setTimeline((t) => recordStep(t, "markup", ev.label));
+      else if (ev.external) setTimeline((t) => ev.type === "undo" ? markupUndoneElsewhere(t) : markupRedoneElsewhere(t));
+    });
+    return () => {
+      offSnap();
+      offHistory();
+    };
+  }, [engine]);
+  const markupOn = tool === "markup" && !hostTool && !dirty;
+  const markupEngineTool = pdfMarkupTool(markupTool)?.engineTool ?? "highlight";
+  (0, import_react4.useEffect)(() => {
+    if (engine) void engine.setTool(markupOn ? markupEngineTool : "none");
+  }, [engine, markupOn, markupEngineTool]);
+  (0, import_react4.useEffect)(() => {
+    engine?.setCurrentPage(currentPage);
+  }, [engine, currentPage]);
+  const saveMarkup = (0, import_react4.useCallback)(async () => {
+    if (!engine || !host.saveMarkup || !markupPending || markupBusy) return;
+    if (!online) {
+      setMarkupError("You are offline. Your markup is kept here; save when you are back online.");
+      return;
+    }
+    setMarkupBusy(true);
+    setMarkupError(null);
+    try {
+      const summary = engine.getSnapshot().summary;
+      const bytes = await engine.save();
+      const out = await host.saveMarkup(bytes, summary);
+      setResult(out);
+      setTimeline((t) => dropOrigin(t, "markup"));
+      sizes.current.clear();
+      setReloadKey((k) => k + 1);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "The markup was not saved.";
+      setMarkupError(message);
+      host.notify?.(message, "error");
+    } finally {
+      setMarkupBusy(false);
+    }
+  }, [engine, host, markupPending, markupBusy, online]);
+  const discardMarkup = (0, import_react4.useCallback)(() => {
+    setTimeline((t) => dropOrigin(t, "markup"));
+    setMarkupError(null);
+    setReloadKey((k) => k + 1);
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    if (!markupPending) return void 0;
+    const onBeforeUnload = (event) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [markupPending]);
+  const undoAll = (0, import_react4.useCallback)(() => {
+    const step = nextUndo(timeline);
+    if (step?.origin === "markup" && engine) {
+      setTimeline(stepBack);
+      engine.undo();
+      return;
+    }
+    if (step) setTimeline(stepBack);
+    setHistory((h) => undo(h));
+  }, [timeline, engine]);
+  const redoAll = (0, import_react4.useCallback)(() => {
+    const step = nextRedo(timeline);
+    if (step?.origin === "markup" && engine) {
+      setTimeline(stepForward);
+      engine.redo();
+      return;
+    }
+    if (step) setTimeline(stepForward);
+    setHistory((h) => redo(h));
+  }, [timeline, engine]);
+  const undoStep = nextUndo(timeline);
+  const redoStep = nextRedo(timeline);
+  const undoText = undoStep ? `Undo ${undoStep.label}` : undoLabel(history) ? `Undo ${undoLabel(history)}` : "Undo";
+  const redoText = redoStep ? `Redo ${redoStep.label}` : redoLabel(history) ? `Redo ${redoLabel(history)}` : "Redo";
+  const canUndoAll = Boolean(undoStep) || canUndo(history);
+  const canRedoAll = Boolean(redoStep) || canRedo(history);
+  const chooseTool = (0, import_react4.useCallback)(
     (id) => {
       if (id.startsWith("host:")) {
         setHostToolId(id.slice(5));
@@ -799,7 +1213,7 @@ function PdfWorkspace({ host, className }) {
         return;
       }
       const def = pdfTool(id);
-      if (!def) return;
+      if (!def || def.id === "markup" && !host.saveMarkup) return;
       setHostToolId(null);
       if (def.status === "soon") {
         announceSoon(comingSoonIdOf(def.id)).catch(fail);
@@ -817,26 +1231,26 @@ function PdfWorkspace({ host, className }) {
     },
     [host, compact, fail]
   );
-  const railGroups = (0, import_react3.useMemo)(() => {
+  const railGroups = (0, import_react4.useMemo)(() => {
     const groups = [[], [], []];
     for (const t of PDF_TOOLS) {
-      if (t.status !== "ready") continue;
+      if (t.status !== "ready" || t.id === "markup" && !canMarkup) continue;
       groups[t.group].push({ id: t.id, label: t.label, icon: PDF_TOOL_ICONS[t.id], ...t.key ? { shortcut: t.key.toUpperCase() } : null });
     }
     for (const t of hostTools) groups[t.group ?? 1].push({ id: `host:${t.id}`, label: t.label, icon: t.icon });
-    groups[2].push({ id: ALL_TOOLS, label: "All tools", icon: import_icons2.MoreHorizontalIcon });
+    groups[2].push({ id: ALL_TOOLS, label: "All tools", icon: import_icons3.MoreHorizontalIcon });
     return groups.filter((g) => g.length);
-  }, [hostTools]);
-  const runAction = (0, import_react3.useCallback)(
+  }, [hostTools, canMarkup]);
+  const runAction = (0, import_react4.useCallback)(
     (action) => {
       if (action.startsWith("tool:")) return chooseTool(action.slice(5));
       switch (action) {
         case "undo":
-          return setHistory((h) => undo(h));
+          return undoAll();
         case "redo":
-          return setHistory((h) => redo(h));
+          return redoAll();
         case "save":
-          return apply();
+          return markupPending ? void saveMarkup() : apply();
         case "find":
           setFindOpen(true);
           setFindFocus((n) => n + 1);
@@ -881,7 +1295,7 @@ function PdfWorkspace({ host, className }) {
           return void 0;
       }
     },
-    [chooseTool, apply, host.print, stepZoom, goToPage, currentPage, pageCount, turn, del, decisions.order]
+    [chooseTool, apply, host.print, stepZoom, goToPage, currentPage, pageCount, turn, del, decisions.order, undoAll, redoAll, markupPending, saveMarkup]
   );
   const onKeyDown = (e) => {
     const t = e.target;
@@ -893,19 +1307,30 @@ function PdfWorkspace({ host, className }) {
       else if (sheet) setSheet(null);
       return;
     }
+    if (markupOn) {
+      const pick = matchMarkupKey(e.nativeEvent, typing);
+      if (pick && pdfMarkupTool(pick)?.status === "ready" && (pick !== "signature" || host.signaturePad)) {
+        e.preventDefault();
+        setMarkupTool(pick);
+        return;
+      }
+    }
     const action = matchShortcut(e.nativeEvent, typing);
     if (!action) return;
+    if (markupOn && t.closest("[data-pdf-thumbnails]") === null && (action === "delete-pages" || action === "page-next" || action === "page-prev" || action === "select-all-pages")) return;
     if ((action === "page-next" || action === "page-prev") && t !== scrollerRef.current && t !== rootRef.current) return;
     if (action === "delete-pages" && t.closest("[data-pdf-thumbnails]") === null && t !== scrollerRef.current) return;
     e.preventDefault();
+    if (action === "undo" || action === "redo") e.stopPropagation();
     runAction(action);
   };
-  const saveState = !online ? "Offline" : busy ? "Saving" : error && dirty ? "Not saved" : dirty ? "Unsaved" : "Saved";
-  const savePill = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const unsaved = dirty || markupPending > 0;
+  const saveState = !online ? "Offline" : busy || markupBusy ? "Saving" : error && dirty || markupError && markupPending ? "Not saved" : unsaved ? "Unsaved" : "Saved";
+  const savePill = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "span",
     {
       role: "status",
-      className: (0, import_cn.cn)(
+      className: (0, import_cn2.cn)(
         "inline-flex h-6 shrink-0 items-center justify-center whitespace-nowrap rounded-full border px-2 text-xs",
         saveState === "Unsaved" || saveState === "Offline" || saveState === "Not saved" ? "border-border text-foreground" : "border-border text-muted-foreground",
         busy && "animate-pulse"
@@ -913,13 +1338,13 @@ function PdfWorkspace({ host, className }) {
       children: saveState
     }
   );
-  const iconBtn = (label, icon, onClick, opts) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "quiet", icon, "aria-label": label, title: label, onClick, ...opts?.disabled !== void 0 ? { disabled: opts.disabled } : null, ...opts?.pressed !== void 0 ? { pressed: opts.pressed } : null });
+  const iconBtn = (label, icon, onClick, opts) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls5.Button, { variant: "quiet", icon, "aria-label": label, title: label, onClick, ...opts?.disabled !== void 0 ? { disabled: opts.disabled } : null, ...opts?.pressed !== void 0 ? { pressed: opts.pressed } : null });
   const toolHits = toolQuery.trim() ? [
     ...hostTools.map((t) => ({ id: `host:${t.id}`, label: t.label, status: "ready" })),
     ...PDF_TOOLS
   ].filter((t) => t.label.toLowerCase().includes(toolQuery.trim().toLowerCase())) : [];
-  const nameNode = editingName && host.rename ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_controls4.Field,
+  const nameNode = editingName && host.rename ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_controls5.Field,
     {
       autoFocus: true,
       value: nameDraft,
@@ -938,7 +1363,7 @@ function PdfWorkspace({ host, className }) {
       },
       width: "lg"
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "button",
@@ -948,18 +1373,36 @@ function PdfWorkspace({ host, className }) {
       children: host.file.name
     }
   );
-  const rightPanel = hostTool ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-full min-h-0 flex-col", "data-pdf-host-tool": hostTool.id, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "shrink-0 border-b border-border px-3 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-sm font-medium", children: hostTool.label }),
-      hostTool.hint ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: hostTool.hint }) : null
+  const rightPanel = hostTool ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full min-h-0 flex-col", "data-pdf-host-tool": hostTool.id, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "shrink-0 border-b border-border px-3 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm font-medium", children: hostTool.label }),
+      hostTool.hint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-xs text-muted-foreground", children: hostTool.hint }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-h-0 flex-1 overflow-hidden", children: hostTool.render({ currentPage, pageCount, selected: selectedPages, goToPage, reload: () => setReloadKey((k) => k + 1) }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "shrink-0 border-b border-border px-3 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-sm font-medium", children: toolDef.label }),
-      toolDef.hint ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "text-xs text-muted-foreground", children: toolDef.hint }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 overflow-hidden", children: hostTool.render({ currentPage, pageCount, selected: selectedPages, goToPage, reload: () => setReloadKey((k) => k + 1) }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex h-full min-h-0 flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "shrink-0 border-b border-border px-3 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-sm font-medium", children: toolDef.label }),
+      toolDef.hint ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-xs text-muted-foreground", children: toolDef.hint }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto p-3", children: tool === "markup" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      MarkupPanel,
+      {
+        host,
+        engine,
+        snapshot: snap,
+        active: markupTool,
+        onPick: setMarkupTool,
+        blocked: dirty ? "Apply or discard the page changes first." : null,
+        busy: markupBusy,
+        online,
+        error: markupError,
+        onSave: () => void saveMarkup(),
+        onDiscard: discardMarkup,
+        onSoon: (id) => void announceSoon(id).catch(fail),
+        goToPage,
+        reloadKey
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ToolPanel,
       {
         tool: toolDef,
@@ -983,7 +1426,7 @@ function PdfWorkspace({ host, className }) {
       }
     ) })
   ] });
-  const leftPanel = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const leftPanel = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     LeftPanel,
     {
       host,
@@ -1002,13 +1445,13 @@ function PdfWorkspace({ host, className }) {
     }
   );
   const viewerPage = hostTool?.followsPage ? currentPage : 1;
-  const viewer = (0, import_react3.useMemo)(
-    () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Fragment, { children: host.renderViewer({ zoom, spread, rotations: decisions.turns, reloadKey, currentPage: viewerPage, onDocumentLoad, onPageSize }) }, reloadKey),
-    [host, reloadKey, zoom, spread, decisions.turns, viewerPage, onDocumentLoad, onPageSize]
+  const viewer = (0, import_react4.useMemo)(
+    () => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react4.Fragment, { children: host.renderViewer({ zoom, spread, rotations: decisions.turns, reloadKey, currentPage: viewerPage, onDocumentLoad, onPageSize, ...canMarkup ? { onMarkupEngine } : null }) }, reloadKey),
+    [host, reloadKey, zoom, spread, decisions.turns, viewerPage, onDocumentLoad, onPageSize, canMarkup, onMarkupEngine]
   );
   const showChrome = !read;
   const popCard = "absolute right-2 top-11 z-30 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -1016,18 +1459,18 @@ function PdfWorkspace({ host, className }) {
       "data-pdf-workspace": "",
       "data-compact": compact ? "" : void 0,
       onKeyDown,
-      className: (0, import_cn.cn)("relative flex h-full min-h-0 w-full flex-col overflow-hidden bg-background text-foreground outline-none", className),
+      className: (0, import_cn2.cn)("relative flex h-full min-h-0 w-full flex-col overflow-hidden bg-background text-foreground outline-none", className),
       children: [
-        showChrome ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: BAR, "data-pdf-topbar": "", children: [
-          iconBtn("Page thumbnails", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.PanelLeftIcon, {}), () => compact ? setSheet("pages") : setLeftOpen((v) => !v), { pressed: !compact && leftOpen }),
+        showChrome ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: BAR, "data-pdf-topbar": "", children: [
+          iconBtn("Page thumbnails", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.PanelLeftIcon, {}), () => compact ? setSheet("pages") : setLeftOpen((v) => !v), { pressed: !compact && leftOpen }),
           nameNode,
           savePill,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1" }),
-          !compact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative w-56", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_controls4.Field,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1" }),
+          !compact ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-56", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_controls5.Field,
               {
-                icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.SearchIcon, {}),
+                icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.SearchIcon, {}),
                 value: toolQuery,
                 "aria-label": "Search tools",
                 placeholder: "Search tools",
@@ -1045,7 +1488,7 @@ function PdfWorkspace({ host, className }) {
                 }
               }
             ),
-            pop === "tool-search" && toolHits.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { role: "listbox", className: "absolute left-0 right-0 top-9 z-30 rounded-lg border border-border bg-popover p-1 shadow-lg", children: toolHits.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { role: "option", "aria-selected": false, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            pop === "tool-search" && toolHits.length ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { role: "listbox", className: "absolute left-0 right-0 top-9 z-30 rounded-lg border border-border bg-popover p-1 shadow-lg", children: toolHits.map((t) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("li", { role: "option", "aria-selected": false, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "button",
               {
                 type: "button",
@@ -1057,25 +1500,25 @@ function PdfWorkspace({ host, className }) {
                   setPop(null);
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: t.label }),
-                  t.status === "soon" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-muted-foreground", children: "Coming soon" }) : null
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: t.label }),
+                  t.status === "soon" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-muted-foreground", children: "Coming soon" }) : null
                 ]
               }
             ) }, t.id)) }) : null
           ] }) : null,
-          iconBtn(undoLabel(history) ? `Undo ${undoLabel(history)}` : "Undo", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.Undo2Icon, {}), () => runAction("undo"), { disabled: !canUndo(history) }),
-          iconBtn(redoLabel(history) ? `Redo ${redoLabel(history)}` : "Redo", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.Undo2Icon, { className: "-scale-x-100" }), () => runAction("redo"), { disabled: !canRedo(history) }),
-          !compact && iconBtn("Find", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.SearchIcon, {}), () => runAction("find"), { pressed: findOpen }),
-          host.share && !compact ? iconBtn("Share", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.Share2Icon, {}), () => host.share()) : null,
-          iconBtn("Download", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.DownloadIcon, {}), () => host.download()),
-          host.print && !compact ? iconBtn("Print", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.PrinterIcon, {}), () => setPop(pop === "print" ? null : "print"), { pressed: pop === "print" }) : null,
-          !compact ? iconBtn("Keyboard shortcuts", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.KeyboardIcon, {}), () => runAction("shortcuts"), { pressed: pop === "shortcuts" }) : null,
-          compact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "outline", onClick: () => setSheet("tools"), children: "Tools" }) : iconBtn("Properties panel", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.PanelRightIcon, {}), () => setRightOpen((v) => !v), { pressed: rightOpen })
+          iconBtn(undoText, /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Undo2Icon, {}), () => runAction("undo"), { disabled: !canUndoAll }),
+          iconBtn(redoText, /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Undo2Icon, { className: "-scale-x-100" }), () => runAction("redo"), { disabled: !canRedoAll }),
+          !compact && iconBtn("Find", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.SearchIcon, {}), () => runAction("find"), { pressed: findOpen }),
+          host.share && !compact ? iconBtn("Share", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Share2Icon, {}), () => host.share()) : null,
+          iconBtn("Download", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.DownloadIcon, {}), () => host.download()),
+          host.print && !compact ? iconBtn("Print", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.PrinterIcon, {}), () => setPop(pop === "print" ? null : "print"), { pressed: pop === "print" }) : null,
+          !compact ? iconBtn("Keyboard shortcuts", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.KeyboardIcon, {}), () => runAction("shortcuts"), { pressed: pop === "shortcuts" }) : null,
+          compact ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls5.Button, { variant: "outline", onClick: () => setSheet("tools"), children: "Tools" }) : iconBtn("Properties panel", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.PanelRightIcon, {}), () => setRightOpen((v) => !v), { pressed: rightOpen })
         ] }) : null,
-        showChrome ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: BAR, "data-pdf-viewbar": "", children: [
-          iconBtn("Previous page", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ChevronLeftIcon, {}), () => goToPage(currentPage - 1), { disabled: currentPage <= 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_controls4.Field,
+        showChrome ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: BAR, "data-pdf-viewbar": "", children: [
+          iconBtn("Previous page", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ChevronLeftIcon, {}), () => goToPage(currentPage - 1), { disabled: currentPage <= 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_controls5.Field,
             {
               type: "number",
               min: 1,
@@ -1088,17 +1531,17 @@ function PdfWorkspace({ host, className }) {
               className: compact ? "w-12" : "w-16"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "whitespace-nowrap text-xs text-muted-foreground", children: [
             "of ",
             pageCount || "-"
           ] }),
-          iconBtn("Next page", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ChevronRightIcon, {}), () => goToPage(currentPage + 1), { disabled: currentPage >= pageCount }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-1 h-5 w-px bg-border" }),
-          iconBtn("Zoom out", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.MinusIcon, {}), () => stepZoom(-1)),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: (0, import_cn.cn)("min-w-[3rem] text-center text-xs tabular-nums", compact && "hidden"), "data-pdf-zoom": "", children: `${Math.round(zoom * 100)}%` }),
-          iconBtn("Zoom in", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.PlusIcon, {}), () => stepZoom(1)),
-          !compact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_controls4.SegmentedControl,
+          iconBtn("Next page", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ChevronRightIcon, {}), () => goToPage(currentPage + 1), { disabled: currentPage >= pageCount }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-1 h-5 w-px bg-border" }),
+          iconBtn("Zoom out", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.MinusIcon, {}), () => stepZoom(-1)),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: (0, import_cn2.cn)("min-w-[3rem] text-center text-xs tabular-nums", compact && "hidden"), "data-pdf-zoom": "", children: `${Math.round(zoom * 100)}%` }),
+          iconBtn("Zoom in", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.PlusIcon, {}), () => stepZoom(1)),
+          !compact ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_controls5.SegmentedControl,
             {
               value: zoomMode === "custom" ? null : zoomMode,
               onValueChange: (v) => setZoomMode(v),
@@ -1106,39 +1549,40 @@ function PdfWorkspace({ host, className }) {
               "aria-label": "Fit"
             }
           ) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex-1" }),
-          !compact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            iconBtn("Rotate left", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.RotateCcwIcon, {}), () => turn(-90)),
-            iconBtn("Rotate right", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.RotateCwIcon, {}), () => turn(90)),
-            iconBtn("Delete page", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.Trash2Icon, {}), del, { disabled: decisions.order.length - decisions.deleted.length <= 1 }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mx-1 h-5 w-px bg-border" }),
-            iconBtn("Two pages side by side", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.Columns2Icon, {}), () => runAction("two-up"), { pressed: spread === "two-up" })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1" }),
+          !compact ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            iconBtn("Rotate left", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.RotateCcwIcon, {}), () => turn(-90)),
+            iconBtn("Rotate right", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.RotateCwIcon, {}), () => turn(90)),
+            iconBtn("Delete page", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Trash2Icon, {}), del, { disabled: decisions.order.length - decisions.deleted.length <= 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mx-1 h-5 w-px bg-border" }),
+            iconBtn("Two pages side by side", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.Columns2Icon, {}), () => runAction("two-up"), { pressed: spread === "two-up" })
           ] }) : null,
-          iconBtn("Reading mode", /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.ExpandIcon, {}), () => setRead(true))
+          iconBtn("Reading mode", /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.ExpandIcon, {}), () => setRead(true))
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative flex min-h-0 flex-1", children: [
-          showChrome && !compact ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex w-10 shrink-0 flex-col items-center border-r border-border bg-background py-2", "data-pdf-rail": "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.ToolRail, { groups: railGroups, value: pop === "all-tools" ? ALL_TOOLS : activeToolKey, onValueChange: (id) => id === ALL_TOOLS ? setPop((p) => p === "all-tools" ? null : "all-tools") : id && chooseTool(id), "aria-label": "PDF tools" }) }) : null,
-          showChrome && !compact && leftOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("aside", { className: "w-56 shrink-0 border-r border-border bg-background", "aria-label": "Pages", "data-pdf-left": "", children: leftPanel }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("main", { className: "relative flex min-w-0 flex-1 flex-col", children: [
-            findOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-4 top-2 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_RenderedFindBar.RenderedFindBar, { rootRef: scrollerRef, onClose: () => setFindOpen(false), label: "Find in document", focusRequest: findFocus, compact: true }) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: scrollerRef, tabIndex: 0, "data-pdf-scroller": "", className: "min-h-0 flex-1 overflow-auto bg-muted outline-none", children: viewer }),
-            read ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute right-3 top-3 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons2.XIcon, {}), onClick: () => setRead(false), children: "Exit reading mode" }) }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex min-h-0 flex-1", children: [
+          showChrome && !compact ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex w-10 shrink-0 flex-col items-center border-r border-border bg-background py-2", "data-pdf-rail": "", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls5.ToolRail, { groups: railGroups, value: pop === "all-tools" ? ALL_TOOLS : activeToolKey, onValueChange: (id) => id === ALL_TOOLS ? setPop((p) => p === "all-tools" ? null : "all-tools") : id && chooseTool(id), "aria-label": "PDF tools" }) }) : null,
+          showChrome && !compact && leftOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("aside", { className: "w-56 shrink-0 border-r border-border bg-background", "aria-label": "Pages", "data-pdf-left": "", children: leftPanel }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("main", { className: "relative flex min-w-0 flex-1 flex-col", children: [
+            findOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute right-4 top-2 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_RenderedFindBar.RenderedFindBar, { rootRef: scrollerRef, onClose: () => setFindOpen(false), label: "Find in document", focusRequest: findFocus, compact: true }) }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref: scrollerRef, tabIndex: 0, "data-pdf-scroller": "", className: "min-h-0 flex-1 overflow-auto bg-muted outline-none", children: viewer }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MarkupFloatingToolbar, { engine, snapshot: snap, enabled: markupOn && !read, onDone: () => scrollerRef.current?.focus({ preventScroll: true }) }),
+            read ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute right-3 top-3 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls5.Button, { variant: "outline", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_icons3.XIcon, {}), onClick: () => setRead(false), children: "Exit reading mode" }) }) : null
           ] }),
-          showChrome && !compact && rightOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("aside", { className: (0, import_cn.cn)("shrink-0 border-l border-border bg-background", hostTool?.wide ? "w-[28rem]" : "w-72"), "aria-label": "Properties", "data-pdf-right": "", children: rightPanel }) : null,
-          pop === "all-tools" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { role: "menu", "aria-label": "All tools", className: "absolute left-12 top-2 z-30 w-72 rounded-lg border border-border bg-popover p-1 shadow-lg", "data-pdf-all-tools": "", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToolRows, { tool: activeToolKey, hostTools, onPick: (id) => {
+          showChrome && !compact && rightOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("aside", { className: (0, import_cn2.cn)("shrink-0 border-l border-border bg-background", hostTool?.wide ? "w-[28rem]" : "w-72"), "aria-label": "Properties", "data-pdf-right": "", children: rightPanel }) : null,
+          pop === "all-tools" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { role: "menu", "aria-label": "All tools", className: "absolute left-12 top-2 z-30 w-72 rounded-lg border border-border bg-popover p-1 shadow-lg", "data-pdf-all-tools": "", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToolRows, { tool: activeToolKey, hostTools, canMarkup, onPick: (id) => {
             setPop(null);
             chooseTool(id);
           } }) }) : null,
-          pop === "print" && host.print ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_cn.cn)(popCard, "w-72"), role: "dialog", "aria-label": "Print", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.SegmentedControl, { fill: true, value: printMode, onValueChange: setPrintMode, data: [{ value: "all", label: "All pages" }, { value: "pages", label: "Pages" }], "aria-label": "What to print" }),
-            printMode === "pages" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_controls4.PageRangeInput, { value: printRange, onChange: (t) => setPrintRange(t), pageCount }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_controls4.Button,
+          pop === "print" && host.print ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: (0, import_cn2.cn)(popCard, "w-72"), role: "dialog", "aria-label": "Print", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls5.SegmentedControl, { fill: true, value: printMode, onValueChange: setPrintMode, data: [{ value: "all", label: "All pages" }, { value: "pages", label: "Pages" }], "aria-label": "What to print" }),
+            printMode === "pages" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_controls5.PageRangeInput, { value: printRange, onChange: (t) => setPrintRange(t), pageCount }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_controls5.Button,
               {
                 variant: "primary",
-                disabled: busy || printMode === "pages" && !(0, import_controls4.parsePageRanges)(printRange, pageCount).valid,
+                disabled: busy || printMode === "pages" && !(0, import_controls5.parsePageRanges)(printRange, pageCount).valid,
                 onClick: () => {
-                  const pages = printMode === "pages" ? (0, import_controls4.parsePageRanges)(printRange, pageCount).pages : null;
+                  const pages = printMode === "pages" ? (0, import_controls5.parsePageRanges)(printRange, pageCount).pages : null;
                   setBusy(true);
                   host.print(pages).then(() => setPop(null), fail).finally(() => setBusy(false));
                 },
@@ -1146,18 +1590,27 @@ function PdfWorkspace({ host, className }) {
               }
             )
           ] }) }) : null,
-          pop === "shortcuts" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: (0, import_cn.cn)(popCard, "max-h-[70%] w-80 overflow-y-auto"), role: "dialog", "aria-label": "Keyboard shortcuts", "data-pdf-shortcuts": "", children: ["Edit", "View", "Pages", "Tools"].map((section) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "mb-3 last:mb-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: section }),
-            PDF_SHORTCUTS.filter((s) => s.section === section).map((s) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-between gap-2 py-0.5 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: s.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("kbd", { className: "rounded border border-border px-1 text-muted-foreground", children: formatKeys(s.keys, isMac()) })
-            ] }, s.action))
-          ] }, section)) }) : null,
-          compact && sheet ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "aria-label": "Close", className: "absolute inset-0 z-30 bg-background/60", onClick: () => setSheet(null) }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute inset-x-0 bottom-0 z-40 flex max-h-[75%] flex-col rounded-t-xl border-t border-border bg-background", role: "dialog", "aria-label": sheet === "pages" ? "Pages" : "Tools", children: sheet === "pages" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "h-[60vh] min-h-0", children: leftPanel }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-h-0 flex-col overflow-y-auto", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "p-2", role: "menu", "aria-label": "Tools", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToolRows, { tool: activeToolKey, hostTools, onPick: chooseTool }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-border", children: rightPanel })
+          pop === "shortcuts" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_cn2.cn)(popCard, "max-h-[70%] w-80 overflow-y-auto"), role: "dialog", "aria-label": "Keyboard shortcuts", "data-pdf-shortcuts": "", children: [
+            ["Edit", "View", "Pages", "Tools"].map((section) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-3 last:mb-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: section }),
+              PDF_SHORTCUTS.filter((s) => s.section === section).map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between gap-2 py-0.5 text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: s.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("kbd", { className: "rounded border border-border px-1 text-muted-foreground", children: formatKeys(s.keys, isMac()) })
+              ] }, s.action))
+            ] }, section)),
+            canMarkup ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Markup" }),
+              PDF_MARKUP_SHORTCUTS.filter((s) => s.tool !== "signature" || host.signaturePad).map((s) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between gap-2 py-0.5 text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: s.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("kbd", { className: "rounded border border-border px-1 text-muted-foreground", children: s.keys })
+              ] }, s.tool))
+            ] }) : null
+          ] }) : null,
+          compact && sheet ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", "aria-label": "Close", className: "absolute inset-0 z-30 bg-background/60", onClick: () => setSheet(null) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute inset-x-0 bottom-0 z-40 flex max-h-[75%] flex-col rounded-t-xl border-t border-border bg-background", role: "dialog", "aria-label": sheet === "pages" ? "Pages" : "Tools", children: sheet === "pages" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-[60vh] min-h-0", children: leftPanel }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex min-h-0 flex-col overflow-y-auto", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "p-2", role: "menu", "aria-label": "Tools", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToolRows, { tool: activeToolKey, hostTools, canMarkup, onPick: chooseTool }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-border", children: rightPanel })
             ] }) })
           ] }) : null
         ] })