@tangle-network/agent-app 0.26.0 → 0.28.0

package/dist/{chunk-LPAVBGVY.js → chunk-YEWTVDDT.js}

@@ -1,564 +1,29 @@
+import {
+  addPageCommand,
+  bindSlotCommand,
+  createSceneCommandStack,
+  deleteElementCommand,
+  deletePageCommand,
+  duplicatePageCommand,
+  groupElementsCommand,
+  multiSetAttrsCommand,
+  reorderElementCommand,
+  reorderPageCommand,
+  setAttrsCommand,
+  setPageGuidesCommand,
+  setPagePropsCommand,
+  ungroupElementCommand
+} from "./chunk-XWJXZ6WE.js";
 import {
   SIZE_PRESETS,
-  applySceneOperation,
-  applySceneOperations,
   findElement,
   matchPreset,
-  requireElement,
   requirePage
-} from "./chunk-JZAJE3JL.js";
+} from "./chunk-M2EBUDZ7.js";
 
 // src/design-canvas-react/components/DesignCanvas.tsx
 import { useCallback as useCallback2, useEffect as useEffect3, useMemo, useRef as useRef5, useState as useState5, useSyncExternalStore } from "react";
 
-// src/design-canvas-react/engine/command-stack.ts
-var SCENE_COMMAND_HISTORY_LIMIT = 200;
-function createSceneCommandStack(document2, activePageId) {
-  let state = {
-    document: document2,
-    activePageId,
-    selectedElementIds: [],
-    zoom: 1,
-    panX: 0,
-    panY: 0,
-    gridEnabled: false,
-    gridSize: 10,
-    snapEnabled: true,
-    showRulers: true,
-    showBleed: false
-  };
-  const undoStack = [];
-  const redoStack = [];
-  const listeners = /* @__PURE__ */ new Set();
-  const notify = () => {
-    for (const listener of [...listeners]) listener();
-  };
-  return {
-    execute(command) {
-      state = command.execute(state);
-      undoStack.push(command);
-      if (undoStack.length > SCENE_COMMAND_HISTORY_LIMIT) {
-        undoStack.splice(0, undoStack.length - SCENE_COMMAND_HISTORY_LIMIT);
-      }
-      redoStack.length = 0;
-      notify();
-    },
-    // Both transforms run BEFORE the stacks move: a throwing transform (e.g.
-    // missing element after reset()) leaves history and state exactly as they
-    // were. The entry is never silently destroyed — the caller can retry after
-    // the next server refresh restores the target.
-    undo() {
-      const command = undoStack[undoStack.length - 1];
-      if (!command) throw new Error("nothing to undo \u2014 guard with canUndo() before calling undo()");
-      state = command.undo(state);
-      undoStack.pop();
-      redoStack.push(command);
-      notify();
-      return command;
-    },
-    redo() {
-      const command = redoStack[redoStack.length - 1];
-      if (!command) throw new Error("nothing to redo \u2014 guard with canRedo() before calling redo()");
-      state = command.execute(state);
-      redoStack.pop();
-      undoStack.push(command);
-      notify();
-      return command;
-    },
-    canUndo() {
-      return undoStack.length > 0;
-    },
-    canRedo() {
-      return redoStack.length > 0;
-    },
-    subscribe(listener) {
-      listeners.add(listener);
-      return () => {
-        listeners.delete(listener);
-      };
-    },
-    getState() {
-      return state;
-    },
-    setView(patch) {
-      state = { ...state, ...patch };
-      notify();
-    },
-    rollback(command) {
-      const idx = undoStack.lastIndexOf(command);
-      if (idx === -1) return;
-      state = command.undo(state);
-      undoStack.splice(idx, 1);
-      redoStack.length = 0;
-      notify();
-    },
-    /** Rebase onto a server-refreshed document. History survives; selection
-     *  drops ids the refresh removed so view state never dangles. */
-    reset(newDocument) {
-      const liveElementIds = /* @__PURE__ */ new Set();
-      for (const page of newDocument.pages) {
-        collectElementIds(page.elements, liveElementIds);
-      }
-      const activePageExists = newDocument.pages.some((p) => p.id === state.activePageId);
-      const activePageId2 = activePageExists ? state.activePageId : newDocument.pages[0]?.id ?? state.activePageId;
-      state = {
-        ...state,
-        document: newDocument,
-        activePageId: activePageId2,
-        selectedElementIds: state.selectedElementIds.filter((id) => liveElementIds.has(id))
-      };
-      notify();
-    }
-  };
-}
-function collectElementIds(elements, ids) {
-  for (const el of elements) {
-    ids.add(el.id);
-    if (el.kind === "group" && Array.isArray(el.children)) {
-      collectElementIds(el.children, ids);
-    }
-  }
-}
-
-// src/design-canvas-react/engine/commands.ts
-function applyOps(state, ops) {
-  return { ...state, document: applySceneOperations(state.document, ops) };
-}
-function applyOp(state, op) {
-  return { ...state, document: applySceneOperation(state.document, op) };
-}
-function addElementCommand(input) {
-  const addOp = {
-    type: "add_element",
-    pageId: input.pageId,
-    element: structuredClone(input.element),
-    ...input.index !== void 0 ? { index: input.index } : {},
-    ...input.parentGroupId !== void 0 ? { parentGroupId: input.parentGroupId } : {}
-  };
-  const deleteOp = {
-    type: "delete_element",
-    pageId: input.pageId,
-    elementId: input.element.id
-  };
-  return {
-    label: `Add ${input.element.kind}`,
-    execute: (state) => applyOp(state, addOp),
-    undo: (state) => applyOp(state, deleteOp),
-    operations: () => [structuredClone(addOp)],
-    inverseOperations: () => [structuredClone(deleteOp)]
-  };
-}
-function setAttrsCommand(input) {
-  const forwardOp = {
-    type: "set_attrs",
-    pageId: input.pageId,
-    elementId: input.elementId,
-    attrs: structuredClone(input.attrs)
-  };
-  const inverseOp = {
-    type: "set_attrs",
-    pageId: input.pageId,
-    elementId: input.elementId,
-    attrs: structuredClone(input.priorAttrs)
-  };
-  return {
-    label: "Edit element",
-    execute: (state) => applyOp(state, forwardOp),
-    undo: (state) => applyOp(state, inverseOp),
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => [structuredClone(inverseOp)]
-  };
-}
-function multiSetAttrsCommand(entries) {
-  if (entries.length === 0) throw new Error("multiSetAttrsCommand: entries must not be empty");
-  const forwardOps = entries.map((e) => ({
-    type: "set_attrs",
-    pageId: e.pageId,
-    elementId: e.elementId,
-    attrs: structuredClone(e.attrs)
-  }));
-  const inverseOps = entries.map((e) => ({
-    type: "set_attrs",
-    pageId: e.pageId,
-    elementId: e.elementId,
-    attrs: structuredClone(e.priorAttrs)
-  }));
-  return {
-    label: `Edit ${entries.length} elements`,
-    execute: (state) => applyOps(state, forwardOps),
-    undo: (state) => applyOps(state, inverseOps),
-    operations: () => structuredClone(forwardOps),
-    inverseOperations: () => structuredClone(inverseOps)
-  };
-}
-function reorderElementCommand(input) {
-  let capturedFromIndex = null;
-  const forwardOp = {
-    type: "reorder_element",
-    pageId: input.pageId,
-    elementId: input.elementId,
-    toIndex: input.toIndex
-  };
-  return {
-    label: "Reorder element",
-    execute: (state) => {
-      if (capturedFromIndex === null) {
-        const page = requirePage(state.document, input.pageId);
-        const { index } = requireElement(page, input.elementId);
-        capturedFromIndex = index;
-      }
-      return applyOp(state, forwardOp);
-    },
-    undo: (state) => {
-      if (capturedFromIndex === null) {
-        throw new Error("reorderElementCommand: undo called before execute");
-      }
-      return applyOp(state, {
-        type: "reorder_element",
-        pageId: input.pageId,
-        elementId: input.elementId,
-        toIndex: capturedFromIndex
-      });
-    },
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => {
-      if (capturedFromIndex === null) {
-        throw new Error("reorderElementCommand: inverseOperations called before execute");
-      }
-      return [{
-        type: "reorder_element",
-        pageId: input.pageId,
-        elementId: input.elementId,
-        toIndex: capturedFromIndex
-      }];
-    }
-  };
-}
-function deleteElementCommand(input) {
-  const page = requirePage(input.document, input.pageId);
-  const { element, owner, index } = requireElement(page, input.elementId);
-  const snapshot = structuredClone(element);
-  const parentGroupId = findParentGroupId(page, owner);
-  const deleteOp = {
-    type: "delete_element",
-    pageId: input.pageId,
-    elementId: input.elementId
-  };
-  const addOp = {
-    type: "add_element",
-    pageId: input.pageId,
-    element: snapshot,
-    index,
-    ...parentGroupId !== void 0 ? { parentGroupId } : {}
-  };
-  return {
-    label: `Delete ${element.kind}`,
-    execute: (state) => {
-      const next = applyOp(state, deleteOp);
-      return {
-        ...next,
-        selectedElementIds: next.selectedElementIds.filter((id) => id !== input.elementId)
-      };
-    },
-    undo: (state) => applyOp(state, addOp),
-    operations: () => [structuredClone(deleteOp)],
-    inverseOperations: () => [structuredClone(addOp)]
-  };
-}
-function findParentGroupId(page, owner) {
-  if (owner === page.elements) return void 0;
-  return findGroupWithChildren(page.elements, owner);
-}
-function findGroupWithChildren(elements, target) {
-  for (const el of elements) {
-    if (el.kind === "group") {
-      if (el.children === target) return el.id;
-      const found = findGroupWithChildren(el.children, target);
-      if (found !== void 0) return found;
-    }
-  }
-  return void 0;
-}
-function groupElementsCommand(input) {
-  if (input.elementIds.length < 2) {
-    throw new Error("groupElementsCommand: requires \u2265 2 elementIds");
-  }
-  const groupOp = {
-    type: "group_elements",
-    pageId: input.pageId,
-    elementIds: input.elementIds.slice(),
-    groupId: input.groupId,
-    ...input.name !== void 0 ? { name: input.name } : {}
-  };
-  const ungroupOp = {
-    type: "ungroup_element",
-    pageId: input.pageId,
-    groupId: input.groupId
-  };
-  return {
-    label: `Group ${input.elementIds.length} elements`,
-    execute: (state) => {
-      const next = applyOp(state, groupOp);
-      return {
-        ...next,
-        selectedElementIds: [input.groupId]
-      };
-    },
-    undo: (state) => {
-      const next = applyOp(state, ungroupOp);
-      return { ...next, selectedElementIds: input.elementIds.slice() };
-    },
-    operations: () => [structuredClone(groupOp)],
-    inverseOperations: () => [structuredClone(ungroupOp)]
-  };
-}
-function ungroupElementCommand(input) {
-  const page = requirePage(input.document, input.pageId);
-  const { element } = requireElement(page, input.groupId);
-  if (element.kind !== "group") {
-    throw new Error(`ungroupElementCommand: element ${input.groupId} is kind ${element.kind}, not group`);
-  }
-  const childIds = element.children.map((c) => c.id);
-  const ungroupOp = {
-    type: "ungroup_element",
-    pageId: input.pageId,
-    groupId: input.groupId
-  };
-  const regroupOp = {
-    type: "group_elements",
-    pageId: input.pageId,
-    elementIds: childIds,
-    groupId: input.groupId,
-    name: element.name
-  };
-  return {
-    label: `Ungroup`,
-    execute: (state) => {
-      const next = applyOp(state, ungroupOp);
-      return { ...next, selectedElementIds: childIds.slice() };
-    },
-    undo: (state) => {
-      const next = applyOp(state, regroupOp);
-      return { ...next, selectedElementIds: [input.groupId] };
-    },
-    operations: () => [structuredClone(ungroupOp)],
-    inverseOperations: () => [structuredClone(regroupOp)]
-  };
-}
-function addPageCommand(input) {
-  const addOp = {
-    type: "add_page",
-    pageId: input.pageId,
-    ...input.options !== void 0 ? { options: input.options } : {},
-    ...input.index !== void 0 ? { index: input.index } : {}
-  };
-  const deleteOp = { type: "delete_page", pageId: input.pageId };
-  return {
-    label: "Add page",
-    execute: (state) => {
-      const next = applyOp(state, addOp);
-      return { ...next, activePageId: input.pageId };
-    },
-    undo: (state) => {
-      const next = applyOp(state, deleteOp);
-      const activeExists = next.document.pages.some((p) => p.id === next.activePageId);
-      return activeExists ? next : { ...next, activePageId: next.document.pages[0].id };
-    },
-    operations: () => [structuredClone(addOp)],
-    inverseOperations: () => [structuredClone(deleteOp)]
-  };
-}
-function duplicatePageCommand(input) {
-  requirePage(input.document, input.sourcePageId);
-  const dupOp = {
-    type: "duplicate_page",
-    sourcePageId: input.sourcePageId,
-    pageId: input.pageId
-  };
-  const deleteOp = { type: "delete_page", pageId: input.pageId };
-  return {
-    label: "Duplicate page",
-    execute: (state) => {
-      const next = applyOp(state, dupOp);
-      return { ...next, activePageId: input.pageId };
-    },
-    undo: (state) => {
-      const next = applyOp(state, deleteOp);
-      const activeExists = next.document.pages.some((p) => p.id === next.activePageId);
-      return activeExists ? next : { ...next, activePageId: input.sourcePageId };
-    },
-    operations: () => [structuredClone(dupOp)],
-    inverseOperations: () => [structuredClone(deleteOp)]
-  };
-}
-function deletePageCommand(input) {
-  if (input.document.pages.length <= 1) {
-    throw new Error("deletePageCommand: cannot delete the last page");
-  }
-  const page = requirePage(input.document, input.pageId);
-  const currentIndex = input.document.pages.findIndex((p) => p.id === input.pageId);
-  const snapshot = structuredClone(page);
-  const deleteOp = { type: "delete_page", pageId: input.pageId };
-  function buildRestoreOps() {
-    const ops = [
-      {
-        type: "add_page",
-        pageId: snapshot.id,
-        options: {
-          name: snapshot.name,
-          width: snapshot.width,
-          height: snapshot.height,
-          background: snapshot.background
-        },
-        index: currentIndex
-      }
-    ];
-    if (snapshot.bleed) {
-      ops.push({ type: "set_page_props", pageId: snapshot.id, bleed: snapshot.bleed });
-    }
-    if (snapshot.guides.vertical.length > 0 || snapshot.guides.horizontal.length > 0) {
-      ops.push({ type: "set_page_guides", pageId: snapshot.id, guides: snapshot.guides });
-    }
-    for (let i = 0; i < snapshot.elements.length; i++) {
-      ops.push({
-        type: "add_element",
-        pageId: snapshot.id,
-        element: structuredClone(snapshot.elements[i]),
-        index: i
-      });
-    }
-    return ops;
-  }
-  return {
-    label: "Delete page",
-    execute: (state) => {
-      const next = applyOp(state, deleteOp);
-      const activeExists = next.document.pages.some((p) => p.id === next.activePageId);
-      if (activeExists) return next;
-      const fallbackIndex = Math.min(currentIndex, next.document.pages.length - 1);
-      return { ...next, activePageId: next.document.pages[fallbackIndex].id };
-    },
-    undo: (state) => {
-      const next = applyOps(state, buildRestoreOps());
-      return { ...next, activePageId: input.pageId };
-    },
-    operations: () => [structuredClone(deleteOp)],
-    inverseOperations: () => buildRestoreOps()
-  };
-}
-function reorderPageCommand(input) {
-  let capturedFromIndex = null;
-  const forwardOp = {
-    type: "reorder_page",
-    pageId: input.pageId,
-    toIndex: input.toIndex
-  };
-  return {
-    label: "Reorder page",
-    execute: (state) => {
-      if (capturedFromIndex === null) {
-        capturedFromIndex = state.document.pages.findIndex((p) => p.id === input.pageId);
-        if (capturedFromIndex === -1) throw new Error(`reorderPageCommand: page ${input.pageId} not found`);
-      }
-      return applyOp(state, forwardOp);
-    },
-    undo: (state) => {
-      if (capturedFromIndex === null) throw new Error("reorderPageCommand: undo called before execute");
-      return applyOp(state, {
-        type: "reorder_page",
-        pageId: input.pageId,
-        toIndex: capturedFromIndex
-      });
-    },
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => {
-      if (capturedFromIndex === null) throw new Error("reorderPageCommand: inverseOperations called before execute");
-      return [{ type: "reorder_page", pageId: input.pageId, toIndex: capturedFromIndex }];
-    }
-  };
-}
-function setPagePropsCommand(input) {
-  const page = requirePage(input.document, input.pageId);
-  const prior = {
-    type: "set_page_props",
-    pageId: input.pageId,
-    ...input.props.name !== void 0 ? { name: page.name } : {},
-    ...input.props.width !== void 0 ? { width: page.width } : {},
-    ...input.props.height !== void 0 ? { height: page.height } : {},
-    ...input.props.background !== void 0 ? { background: page.background } : {},
-    ...input.props.bleed !== void 0 ? { bleed: page.bleed } : {}
-  };
-  const forwardOp = {
-    type: "set_page_props",
-    pageId: input.pageId,
-    ...input.props
-  };
-  return {
-    label: "Edit page",
-    execute: (state) => applyOp(state, forwardOp),
-    undo: (state) => applyOp(state, prior),
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => [structuredClone(prior)]
-  };
-}
-function setPageGuidesCommand(input) {
-  const page = requirePage(input.document, input.pageId);
-  const priorGuides = structuredClone(page.guides);
-  const forwardOp = {
-    type: "set_page_guides",
-    pageId: input.pageId,
-    guides: structuredClone(input.guides)
-  };
-  const inverseOp = {
-    type: "set_page_guides",
-    pageId: input.pageId,
-    guides: priorGuides
-  };
-  return {
-    label: "Edit guides",
-    execute: (state) => applyOp(state, forwardOp),
-    undo: (state) => applyOp(state, inverseOp),
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => [structuredClone(inverseOp)]
-  };
-}
-function bindSlotCommand(input) {
-  const page = requirePage(input.document, input.pageId);
-  const { element } = requireElement(page, input.elementId);
-  const priorSlot = element.slot ?? null;
-  const forwardOp = {
-    type: "bind_slot",
-    pageId: input.pageId,
-    elementId: input.elementId,
-    slot: input.slot
-  };
-  const inverseOp = {
-    type: "bind_slot",
-    pageId: input.pageId,
-    elementId: input.elementId,
-    slot: priorSlot
-  };
-  return {
-    label: input.slot === null ? "Unbind slot" : `Bind slot "${input.slot}"`,
-    execute: (state) => applyOp(state, forwardOp),
-    undo: (state) => applyOp(state, inverseOp),
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => [structuredClone(inverseOp)]
-  };
-}
-function setDocumentTitleCommand(input) {
-  const priorTitle = input.document.title;
-  const forwardOp = { type: "set_document_title", title: input.title };
-  const inverseOp = { type: "set_document_title", title: priorTitle };
-  return {
-    label: `Rename document`,
-    execute: (state) => applyOp(state, forwardOp),
-    undo: (state) => applyOp(state, inverseOp),
-    operations: () => [structuredClone(forwardOp)],
-    inverseOperations: () => [structuredClone(inverseOp)]
-  };
-}
-
 // src/design-canvas-react/components/ruler-math.ts
 var TICK_STEP_CANDIDATES_PX = [1, 2, 5, 10, 25, 50, 100, 250, 500, 1e3, 2500, 5e3];
 function selectTickStep(input) {
@@ -731,6 +196,7 @@ function glyph(paths) {
 }
 var UndoGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M3 7v6h6M3 13a9 9 0 1 0 3-7.7" }));
 var RedoGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M21 7v6h-6M21 13a9 9 0 1 1-3-7.7" }));
+var SwapGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M7 4 3 8l4 4M3 8h14M17 20l4-4-4-4M21 16H7" }));
 var EyeGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" }),
@@ -795,7 +261,6 @@ var BoldGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M6 4h8a4 4 0 0 1 0 8H6z
 var ItalicGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M11 4h6M7 20h6M14 4 8 20" }));
 var PlusGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M12 5v14M5 12h14" }));
 var ChevronDownGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }));
-var ChevronRightGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "m9 18 6-6-6-6" }));
 var RectGlyph = glyph(/* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }));
 var EllipseGlyph = glyph(/* @__PURE__ */ jsx2("ellipse", { cx: "12", cy: "12", rx: "10", ry: "7" }));
 var LineGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M5 19 19 5" }));
@@ -819,12 +284,6 @@ var SlotGlyph = glyph(
     /* @__PURE__ */ jsx2("path", { d: "M12 1v4M12 19v4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M1 12h4M19 12h4M4.2 19.8l2.8-2.8M17 7 19.8 4.2" })
   ] })
 );
-var FitGlyph = glyph(
-  /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("path", { d: "M3 3h4v4H3zM17 3h4v4h-4zM3 17h4v4H3zM17 17h4v4h-4z" }),
-    /* @__PURE__ */ jsx2("path", { d: "M7 5h10M5 7v10M19 7v10M7 19h10" })
-  ] })
-);
 var PageGlyph = glyph(
   /* @__PURE__ */ jsxs2(Fragment2, { children: [
     /* @__PURE__ */ jsx2("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
@@ -873,11 +332,24 @@ var ShapesGlyph = glyph(
   ] })
 );
 
+// src/design-canvas-react/components/icon-button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BTN_BASE = "items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-input)] disabled:cursor-default disabled:opacity-40";
+var BTN_ACTIVE_EXTRA = " border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]";
+var BTN = `flex h-7 w-7 ${BTN_BASE}`;
+var BTN_ACTIVE = BTN + BTN_ACTIVE_EXTRA;
+var BTN_SM = `flex h-6 w-6 ${BTN_BASE}`;
+var BTN_SM_ACTIVE = BTN_SM + BTN_ACTIVE_EXTRA;
+var IconButton = forwardRef(function IconButton2({ active = false, size = "md", className = "", type = "button", ...rest }, ref) {
+  const base = size === "sm" ? active ? BTN_SM_ACTIVE : BTN_SM : active ? BTN_ACTIVE : BTN;
+  return /* @__PURE__ */ jsx3("button", { ref, type, className: className ? `${base} ${className}` : base, ...rest });
+});
+
 // src/design-canvas-react/components/PagesStrip.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var THUMBNAIL_W = 80;
 var THUMBNAIL_H = 56;
-var BTN = "flex h-6 w-6 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] disabled:cursor-default disabled:opacity-40";
 function PagesStrip({
   pages,
   activePageId,
@@ -887,7 +359,8 @@ function PagesStrip({
   onAddPage,
   onDuplicatePage,
   onDeletePage,
-  onReorderPage
+  onReorderPage,
+  canManagePages = true
 }) {
   const [thumbnails, setThumbnails] = useState({});
   const thumbnailVersionRef = useRef(0);
@@ -927,10 +400,6 @@ function PagesStrip({
           return /* @__PURE__ */ jsxs3(
             "div",
             {
-              role: "button",
-              tabIndex: 0,
-              "aria-label": `Page ${index + 1}: ${page.name}${isActive ? " (active)" : ""}`,
-              "aria-pressed": isActive,
               draggable: canWrite,
               onDragStart: () => {
                 dragIndexRef.current = index;
@@ -953,38 +422,43 @@ function PagesStrip({
                 dragIndexRef.current = null;
                 setDragOverIndex(null);
               },
-              onClick: () => onSelectPage(page.id),
-              onKeyDown: (event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  event.preventDefault();
-                  onSelectPage(page.id);
-                }
-              },
               className: [
-                "group relative flex shrink-0 cursor-pointer flex-col items-center gap-1 rounded p-1 transition",
+                "group relative flex shrink-0 flex-col items-center gap-1 rounded p-1 transition",
                 isActive ? "ring-2 ring-[var(--brand-primary)]" : "hover:bg-[var(--border-default)]/40",
                 dragOverIndex === index ? "ring-1 ring-[var(--brand-primary)]/60" : ""
               ].join(" "),
               children: [
-                /* @__PURE__ */ jsx3(
-                  "div",
+                /* @__PURE__ */ jsxs3(
+                  "button",
                   {
-                    className: "overflow-hidden rounded border border-[var(--border-default)] bg-white",
-                    style: { width: THUMBNAIL_W, height: THUMBNAIL_H },
-                    children: thumbUrl ? /* @__PURE__ */ jsx3(
-                      "img",
-                      {
-                        src: thumbUrl,
-                        alt: page.name,
-                        className: "h-full w-full object-cover",
-                        draggable: false
-                      }
-                    ) : /* @__PURE__ */ jsx3("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx3(PageGlyph, { className: "h-5 w-5 text-[var(--text-muted)]" }) })
+                    type: "button",
+                    "aria-label": `Page ${index + 1}: ${page.name}${isActive ? " (active)" : ""}`,
+                    "aria-pressed": isActive,
+                    onClick: () => onSelectPage(page.id),
+                    className: "flex cursor-pointer flex-col items-center gap-1 rounded focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
+                    children: [
+                      /* @__PURE__ */ jsx4(
+                        "div",
+                        {
+                          className: "overflow-hidden rounded border border-[var(--border-default)] bg-[hsl(var(--card))]",
+                          style: { width: THUMBNAIL_W, height: THUMBNAIL_H },
+                          children: thumbUrl ? /* @__PURE__ */ jsx4(
+                            "img",
+                            {
+                              src: thumbUrl,
+                              alt: page.name,
+                              className: "h-full w-full object-cover",
+                              draggable: false
+                            }
+                          ) : /* @__PURE__ */ jsx4("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx4(PageGlyph, { className: "h-5 w-5 text-[var(--text-muted)]" }) })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4("span", { className: "max-w-[80px] truncate text-[10px] text-[var(--text-secondary)]", children: page.name })
+                    ]
                   }
                 ),
-                /* @__PURE__ */ jsx3("span", { className: "max-w-[80px] truncate text-[10px] text-[var(--text-secondary)]", children: page.name }),
-                canWrite ? /* @__PURE__ */ jsxs3("div", { className: "pointer-events-none absolute -top-1 right-0 flex gap-0.5 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100", children: [
-                  /* @__PURE__ */ jsx3(
+                canWrite && canManagePages ? /* @__PURE__ */ jsxs3("div", { className: "pointer-events-none absolute -top-1 right-0 flex gap-0.5 opacity-0 transition-opacity group-hover:pointer-events-auto group-hover:opacity-100", children: [
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -993,11 +467,11 @@ function PagesStrip({
                         event.stopPropagation();
                         onDuplicatePage(page.id);
                       },
-                      className: BTN,
-                      children: /* @__PURE__ */ jsx3(DuplicateGlyph, { className: "h-3 w-3" })
+                      className: BTN_SM,
+                      children: /* @__PURE__ */ jsx4(DuplicateGlyph, { className: "h-3 w-3" })
                     }
                   ),
-                  /* @__PURE__ */ jsx3(
+                  /* @__PURE__ */ jsx4(
                     "button",
                     {
                       type: "button",
@@ -1007,8 +481,8 @@ function PagesStrip({
                         event.stopPropagation();
                         if (pages.length > 1) onDeletePage(page.id);
                       },
-                      className: BTN,
-                      children: /* @__PURE__ */ jsx3(TrashGlyph, { className: "h-3 w-3 text-rose-400" })
+                      className: BTN_SM,
+                      children: /* @__PURE__ */ jsx4(TrashGlyph, { className: "h-3 w-3 text-[var(--text-danger)]" })
                     }
                   )
                 ] }) : null
@@ -1017,16 +491,16 @@ function PagesStrip({
             page.id
           );
         }),
-        canWrite ? /* @__PURE__ */ jsxs3(
+        canWrite && canManagePages ? /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
             "aria-label": "Add page",
             onClick: onAddPage,
-            className: "flex h-[72px] w-[80px] shrink-0 flex-col items-center justify-center gap-1 rounded border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)]",
+            className: "flex h-[72px] w-[80px] shrink-0 flex-col items-center justify-center gap-1 rounded border border-dashed border-[var(--border-default)] text-[var(--text-muted)] transition hover:border-[var(--brand-primary)] hover:text-[var(--brand-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
             children: [
-              /* @__PURE__ */ jsx3(PlusGlyph, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx3("span", { className: "text-[10px]", children: "Add page" })
+              /* @__PURE__ */ jsx4(PlusGlyph, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx4("span", { className: "text-[10px]", children: "Add page" })
             ]
           }
         ) : null
@@ -1037,20 +511,20 @@ function PagesStrip({
 
 // src/design-canvas-react/components/Rulers.tsx
 import { useRef as useRef2, useState as useState2 } from "react";
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var RULER_SIZE_PX = 20;
 var DELETE_THRESHOLD_PX = RULER_SIZE_PX + 4;
 function Rulers({ pageWidth, pageHeight, zoom, scrollLeft, scrollTop, showRulers, guides, onGuidesChange }) {
   if (!showRulers) return null;
   return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "div",
       {
         className: "absolute top-0 left-0 z-20 shrink-0 border-b border-r border-[var(--border-default)] bg-[var(--bg-input)]",
         style: { width: RULER_SIZE_PX, height: RULER_SIZE_PX }
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       HorizontalRuler,
       {
         pageWidth,
@@ -1060,7 +534,7 @@ function Rulers({ pageWidth, pageHeight, zoom, scrollLeft, scrollTop, showRulers
         onGuidesChange
       }
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       VerticalRuler,
       {
         pageHeight,
@@ -1148,18 +622,18 @@ function HorizontalRuler({ pageWidth, zoom, scrollLeft, guides, onGuidesChange }
       children: [
         ticks.map((tick) => {
           const screenX = tick.position * zoom - scrollLeft * zoom;
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx5(
             "div",
             {
               className: `absolute bottom-0 w-px bg-[var(--border-default)] ${tick.label !== null ? "top-1.5" : "top-[14px]"}`,
               style: { left: screenX },
-              children: tick.label !== null ? /* @__PURE__ */ jsx4("span", { className: "absolute -top-1 left-0.5 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]", children: tick.label }) : null
+              children: tick.label !== null ? /* @__PURE__ */ jsx5("span", { className: "absolute -top-1 left-0.5 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]", children: tick.label }) : null
             },
             tick.position
           );
         }),
-        pointerX !== null ? /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]/60", style: { left: pointerX } }) : null,
-        dragGuideX !== null ? /* @__PURE__ */ jsx4(
+        pointerX !== null ? /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]/60", style: { left: pointerX } }) : null,
+        dragGuideX !== null ? /* @__PURE__ */ jsx5(
           "div",
           {
             className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]",
@@ -1242,12 +716,12 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
       children: [
         ticks.map((tick) => {
           const screenY = tick.position * zoom - scrollTop * zoom;
-          return /* @__PURE__ */ jsx4(
+          return /* @__PURE__ */ jsx5(
             "div",
             {
               className: `absolute right-0 h-px bg-[var(--border-default)] ${tick.label !== null ? "left-1.5" : "left-[14px]"}`,
               style: { top: screenY },
-              children: tick.label !== null ? /* @__PURE__ */ jsx4(
+              children: tick.label !== null ? /* @__PURE__ */ jsx5(
                 "span",
                 {
                   className: "absolute top-0.5 left-0 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]",
@@ -1259,8 +733,8 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
             tick.position
           );
         }),
-        pointerY !== null ? /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]/60", style: { top: pointerY } }) : null,
-        dragGuideY !== null ? /* @__PURE__ */ jsx4(
+        pointerY !== null ? /* @__PURE__ */ jsx5("div", { className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]/60", style: { top: pointerY } }) : null,
+        dragGuideY !== null ? /* @__PURE__ */ jsx5(
           "div",
           {
             className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]",
@@ -1274,7 +748,7 @@ function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange })
 
 // src/design-canvas-react/components/Toolbar.tsx
 import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
-import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var FONT_FAMILIES = [
   "Inter",
   "Arial",
@@ -1289,9 +763,7 @@ var FONT_FAMILIES = [
   "Brush Script MT",
   "Impact"
 ];
-var BTN2 = "flex h-7 w-7 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] disabled:cursor-default disabled:opacity-40";
-var BTN_ACTIVE = `${BTN2} border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]`;
-var SEP = /* @__PURE__ */ jsx5("div", { className: "mx-1 h-5 w-px shrink-0 bg-[var(--border-default)]" });
+var SEP = /* @__PURE__ */ jsx6("div", { className: "mx-1 h-5 w-px shrink-0 bg-[var(--border-default)]" });
 var POPOVER_PANEL = "absolute top-full left-0 z-50 mt-1 flex flex-col rounded border border-[var(--border-default)] bg-[var(--bg-input)] shadow-lg";
 function Popover({
   open,
@@ -1336,8 +808,8 @@ function NumberInput({
     setRaw(null);
   }
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx6(
       "input",
       {
         type: "number",
@@ -1366,8 +838,8 @@ function SelectControl({
   const [open, setOpen] = useState3(false);
   const current = options.find((o) => o.value === value);
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx6(
       Popover,
       {
         open,
@@ -1382,12 +854,12 @@ function SelectControl({
             onClick: () => setOpen((v) => !v),
             className: `${buttonClassName} flex items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] outline-none hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40`,
             children: [
-              /* @__PURE__ */ jsx5("span", { className: "truncate", children: current?.label ?? value }),
-              /* @__PURE__ */ jsx5("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
+              /* @__PURE__ */ jsx6("span", { className: "truncate", children: current?.label ?? value }),
+              /* @__PURE__ */ jsx6("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
             ]
           }
         ),
-        children: /* @__PURE__ */ jsx5("div", { role: "listbox", className: `${POPOVER_PANEL} max-h-64 w-44 overflow-y-auto py-1`, children: options.map((opt) => /* @__PURE__ */ jsx5(
+        children: /* @__PURE__ */ jsx6("div", { role: "listbox", className: `${POPOVER_PANEL} max-h-64 w-44 overflow-y-auto py-1`, children: options.map((opt) => /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1416,8 +888,8 @@ function FontPicker({
   const families = FONT_FAMILIES.includes(value) ? [...FONT_FAMILIES] : [value, ...FONT_FAMILIES];
   const filtered = families.filter((f) => f.toLowerCase().includes(query.trim().toLowerCase()));
   return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: "Font" }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: "Font" }),
+    /* @__PURE__ */ jsx6(
       Popover,
       {
         open,
@@ -1437,13 +909,13 @@ function FontPicker({
             className: "flex w-28 items-center justify-between gap-1 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-left text-[12px] text-[var(--text-primary)] outline-none hover:border-[var(--brand-primary)] disabled:cursor-default disabled:opacity-40",
             style: { fontFamily: value },
             children: [
-              /* @__PURE__ */ jsx5("span", { className: "truncate", children: value }),
-              /* @__PURE__ */ jsx5("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
+              /* @__PURE__ */ jsx6("span", { className: "truncate", children: value }),
+              /* @__PURE__ */ jsx6("span", { className: "text-[8px] text-[var(--text-muted)]", children: "\u25BE" })
             ]
           }
         ),
         children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-52`, children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "input",
             {
               autoFocus: true,
@@ -1454,7 +926,7 @@ function FontPicker({
               className: "m-1 rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
             }
           ),
-          /* @__PURE__ */ jsx5("div", { role: "listbox", className: "max-h-60 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No matches" }) : filtered.map((family) => /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6("div", { role: "listbox", className: "max-h-60 overflow-y-auto py-1", children: filtered.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "px-3 py-2 text-[11px] text-[var(--text-muted)]", children: "No matches" }) : filtered.map((family) => /* @__PURE__ */ jsx6(
             "button",
             {
               type: "button",
@@ -1480,13 +952,13 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
   const [open, setOpen] = useState3(false);
   const normalized = value.startsWith("#") ? value : "#ffffff";
   return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-0.5", children: [
-    /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: label }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: label }),
+    /* @__PURE__ */ jsx6(
       Popover,
       {
         open,
         onClose: () => setOpen(false),
-        trigger: /* @__PURE__ */ jsx5(
+        trigger: /* @__PURE__ */ jsx6(
           "button",
           {
             type: "button",
@@ -1498,7 +970,7 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
           }
         ),
         children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-40 gap-2 p-2`, children: [
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "input",
             {
               type: "color",
@@ -1508,7 +980,7 @@ function ColorSwatch({ label, value, onCommit, disabled }) {
               className: "h-8 w-full cursor-pointer rounded border border-[var(--border-default)] p-0.5"
             }
           ),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             "input",
             {
               type: "text",
@@ -1527,6 +999,7 @@ function Toolbar({
   page,
   selectedElements,
   canWrite,
+  mode = "edit",
   canUndo,
   canRedo,
   gridEnabled,
@@ -1562,46 +1035,55 @@ function Toolbar({
   const selectedIds = selectedElements.map((e) => e.id);
   const isGroup = single?.kind === "group";
   const groupable = selectedElements.length >= 2;
+  const review = mode === "review";
   return /* @__PURE__ */ jsxs5("div", { className: "flex min-h-11 shrink-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--border-default)] bg-[var(--bg-input)] px-3 py-1", children: [
     /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Undo", disabled: !canUndo || !canWrite, onClick: onUndo, className: BTN2, children: /* @__PURE__ */ jsx5(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Redo", disabled: !canRedo || !canWrite, onClick: onRedo, className: BTN2, children: /* @__PURE__ */ jsx5(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
-      SEP,
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle rulers", "aria-pressed": showRulers, onClick: onToggleRulers, className: showRulers ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(RulerGlyph, { className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle grid", "aria-pressed": gridEnabled, onClick: onToggleGrid, className: gridEnabled ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(GridGlyph, { className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle snap", "aria-pressed": snapEnabled, onClick: onToggleSnap, className: snapEnabled ? BTN_ACTIVE : BTN2, children: /* @__PURE__ */ jsx5(MagnetGlyph, { className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Toggle bleed overlay", "aria-pressed": showBleed, onClick: onToggleBleed, className: showBleed ? BTN_ACTIVE : BTN2, disabled: !page.bleed, children: /* @__PURE__ */ jsx5(BleedGlyph, { className: "h-3.5 w-3.5" }) })
+      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Undo", disabled: !canUndo || !canWrite, onClick: onUndo, className: BTN, children: /* @__PURE__ */ jsx6(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
+      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Redo", disabled: !canRedo || !canWrite, onClick: onRedo, className: BTN, children: /* @__PURE__ */ jsx6(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
+      !review ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        SEP,
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle rulers", "aria-pressed": showRulers, onClick: onToggleRulers, className: showRulers ? BTN_ACTIVE : BTN, children: /* @__PURE__ */ jsx6(RulerGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle grid", "aria-pressed": gridEnabled, onClick: onToggleGrid, className: gridEnabled ? BTN_ACTIVE : BTN, children: /* @__PURE__ */ jsx6(GridGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle snap", "aria-pressed": snapEnabled, onClick: onToggleSnap, className: snapEnabled ? BTN_ACTIVE : BTN, children: /* @__PURE__ */ jsx6(MagnetGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Toggle bleed overlay", "aria-pressed": showBleed, onClick: onToggleBleed, className: showBleed ? BTN_ACTIVE : BTN, disabled: !page.bleed, children: /* @__PURE__ */ jsx6(BleedGlyph, { className: "h-3.5 w-3.5" }) })
+      ] }) : null
     ] }),
-    SEP,
-    /* @__PURE__ */ jsx5("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: hasSelection ? /* @__PURE__ */ jsx5(
-      SelectionControls,
-      {
-        elements: selectedElements,
-        single,
-        isGroup,
-        groupable,
-        allSameKind,
-        firstKind,
-        canWrite,
-        patchAll,
-        reorderSingle,
-        onGroup: () => onGroup(selectedIds),
-        onUngroup: () => {
-          if (single) onUngroup(single.id);
-        },
-        onDelete: () => onDelete(selectedIds),
-        onBindSlot: single ? (slot) => onBindSlot(single.id, slot) : void 0,
-        currentSlot: single?.slot ?? null
-      }
-    ) : /* @__PURE__ */ jsx5(
-      PagePropsControls,
-      {
-        page,
-        canWrite,
-        onSetPageProps,
-        onSetPageGuides
-      }
-    ) })
+    /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: hasSelection ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      SEP,
+      /* @__PURE__ */ jsx6(
+        SelectionControls,
+        {
+          elements: selectedElements,
+          single,
+          isGroup,
+          groupable,
+          allSameKind,
+          firstKind,
+          canWrite,
+          review,
+          patchAll,
+          reorderSingle,
+          onGroup: () => onGroup(selectedIds),
+          onUngroup: () => {
+            if (single) onUngroup(single.id);
+          },
+          onDelete: () => onDelete(selectedIds),
+          onBindSlot: single ? (slot) => onBindSlot(single.id, slot) : void 0,
+          currentSlot: single?.slot ?? null
+        }
+      )
+    ] }) : !review ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      SEP,
+      /* @__PURE__ */ jsx6(
+        PagePropsControls,
+        {
+          page,
+          canWrite,
+          onSetPageProps,
+          onSetPageGuides
+        }
+      )
+    ] }) : null })
   ] });
 }
 function SelectionControls({
@@ -1612,6 +1094,7 @@ function SelectionControls({
   allSameKind,
   firstKind,
   canWrite,
+  review,
   patchAll,
   reorderSingle,
   onGroup,
@@ -1624,12 +1107,12 @@ function SelectionControls({
   const [slotInput, setSlotInput] = useState3("");
   const firstEl = elements[0];
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    allSameKind && firstKind === "text" && single ? /* @__PURE__ */ jsx5(TextControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
-    allSameKind && firstKind === "rect" && single ? /* @__PURE__ */ jsx5(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: true }) : null,
-    allSameKind && firstKind === "ellipse" && single ? /* @__PURE__ */ jsx5(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: false }) : null,
-    allSameKind && firstKind === "image" && single ? /* @__PURE__ */ jsx5(ImageControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
+    allSameKind && firstKind === "text" && single ? /* @__PURE__ */ jsx6(TextControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
+    allSameKind && firstKind === "rect" && single ? /* @__PURE__ */ jsx6(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: true }) : null,
+    allSameKind && firstKind === "ellipse" && single ? /* @__PURE__ */ jsx6(ShapeControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs), showCornerRadius: false }) : null,
+    allSameKind && firstKind === "image" && single ? /* @__PURE__ */ jsx6(ImageControls, { element: single, canWrite, onPatch: (attrs) => patchAll(attrs) }) : null,
     SEP,
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       NumberInput,
       {
         label: "Opacity",
@@ -1639,7 +1122,7 @@ function SelectionControls({
         className: "w-14"
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       NumberInput,
       {
         label: "Rotation",
@@ -1648,152 +1131,225 @@ function SelectionControls({
         className: "w-14"
       }
     ),
-    SEP,
-    single ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Bring to front", disabled: !canWrite, onClick: () => reorderSingle("front"), className: BTN2, children: /* @__PURE__ */ jsx5(BringFrontGlyph, { className: "h-3.5 w-3.5" }) }),
-      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Send to back", disabled: !canWrite, onClick: () => reorderSingle("back"), className: BTN2, children: /* @__PURE__ */ jsx5(SendBackGlyph, { className: "h-3.5 w-3.5" }) }),
-      SEP
-    ] }) : null,
-    groupable ? /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Group elements", disabled: !canWrite, onClick: onGroup, className: BTN2, children: /* @__PURE__ */ jsx5(GroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
-    isGroup ? /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Ungroup", disabled: !canWrite, onClick: onUngroup, className: BTN2, children: /* @__PURE__ */ jsx5(UngroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
-    single ? /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        "aria-label": single.locked ? "Unlock element" : "Lock element",
-        disabled: !canWrite,
-        onClick: () => patchAll({ locked: !single.locked }),
-        className: single.locked ? BTN_ACTIVE : BTN2,
-        children: single.locked ? /* @__PURE__ */ jsx5(LockGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(UnlockGlyph, { className: "h-3.5 w-3.5" })
-      }
-    ) : null,
-    single && onBindSlot ? /* @__PURE__ */ jsx5(
-      Popover,
-      {
-        open: slotPopoverOpen,
-        onClose: () => setSlotPopoverOpen(false),
-        trigger: /* @__PURE__ */ jsx5(
-          "button",
-          {
-            type: "button",
-            "aria-label": currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
-            onClick: () => {
-              setSlotInput(currentSlot ?? "");
-              setSlotPopoverOpen((v) => !v);
-            },
-            className: currentSlot ? BTN_ACTIVE : BTN2,
-            title: currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
-            children: /* @__PURE__ */ jsx5(SlotGlyph, { className: "h-3.5 w-3.5" })
-          }
-        ),
-        children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-48 gap-2 p-2`, children: [
-          /* @__PURE__ */ jsx5(
-            "input",
+    review ? null : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+      SEP,
+      single ? /* @__PURE__ */ jsxs5(Fragment4, { children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Bring to front", disabled: !canWrite, onClick: () => reorderSingle("front"), className: BTN, children: /* @__PURE__ */ jsx6(BringFrontGlyph, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Send to back", disabled: !canWrite, onClick: () => reorderSingle("back"), className: BTN, children: /* @__PURE__ */ jsx6(SendBackGlyph, { className: "h-3.5 w-3.5" }) }),
+        SEP
+      ] }) : null,
+      groupable ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Group elements", disabled: !canWrite, onClick: onGroup, className: BTN, children: /* @__PURE__ */ jsx6(GroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
+      isGroup ? /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Ungroup", disabled: !canWrite, onClick: onUngroup, className: BTN, children: /* @__PURE__ */ jsx6(UngroupGlyph, { className: "h-3.5 w-3.5" }) }) : null,
+      single ? /* @__PURE__ */ jsx6(
+        "button",
+        {
+          type: "button",
+          "aria-label": single.locked ? "Unlock element" : "Lock element",
+          "aria-pressed": !!single.locked,
+          disabled: !canWrite,
+          onClick: () => patchAll({ locked: !single.locked }),
+          className: single.locked ? BTN_ACTIVE : BTN,
+          children: single.locked ? /* @__PURE__ */ jsx6(LockGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(UnlockGlyph, { className: "h-3.5 w-3.5" })
+        }
+      ) : null,
+      single && onBindSlot ? /* @__PURE__ */ jsx6(
+        Popover,
+        {
+          open: slotPopoverOpen,
+          onClose: () => setSlotPopoverOpen(false),
+          trigger: /* @__PURE__ */ jsx6(
+            "button",
             {
-              autoFocus: true,
-              value: slotInput,
-              onChange: (event) => setSlotInput(event.target.value),
-              placeholder: "slot-name",
-              className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+              type: "button",
+              "aria-label": currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
+              "aria-pressed": !!currentSlot,
+              "aria-haspopup": "dialog",
+              "aria-expanded": slotPopoverOpen,
+              onClick: () => {
+                setSlotInput(currentSlot ?? "");
+                setSlotPopoverOpen((v) => !v);
+              },
+              className: currentSlot ? BTN_ACTIVE : BTN,
+              title: currentSlot ? `Slot: ${currentSlot}` : "Bind slot",
+              children: /* @__PURE__ */ jsx6(SlotGlyph, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx5(
-              "button",
+          children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-48 gap-2 p-2`, children: [
+            /* @__PURE__ */ jsx6(
+              "input",
               {
-                type: "button",
-                onClick: () => {
-                  onBindSlot(slotInput.trim() || null);
-                  setSlotPopoverOpen(false);
-                },
-                className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10",
-                children: slotInput.trim() ? "Bind" : "Unbind"
+                autoFocus: true,
+                value: slotInput,
+                onChange: (event) => setSlotInput(event.target.value),
+                placeholder: "slot-name",
+                className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
               }
             ),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                type: "button",
-                onClick: () => setSlotPopoverOpen(false),
-                className: "rounded border border-[var(--border-default)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]",
-                children: "Cancel"
-              }
-            )
+            /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onBindSlot(slotInput.trim() || null);
+                    setSlotPopoverOpen(false);
+                  },
+                  className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10",
+                  children: slotInput.trim() ? "Bind" : "Unbind"
+                }
+              ),
+              /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setSlotPopoverOpen(false),
+                  className: "rounded border border-[var(--border-default)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]",
+                  children: "Cancel"
+                }
+              )
+            ] })
           ] })
-        ] })
-      }
-    ) : null,
-    SEP,
-    /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": "Delete selection", disabled: !canWrite, onClick: onDelete, className: BTN2, children: /* @__PURE__ */ jsx5(TrashGlyph, { className: "h-3.5 w-3.5 text-rose-400" }) })
+        }
+      ) : null,
+      SEP,
+      /* @__PURE__ */ jsx6("button", { type: "button", "aria-label": "Delete selection", disabled: !canWrite, onClick: onDelete, className: BTN, children: /* @__PURE__ */ jsx6(TrashGlyph, { className: "h-3.5 w-3.5 text-[var(--text-danger)]" }) })
+    ] })
   ] });
 }
 function TextControls({ element, canWrite, onPatch }) {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(FontPicker, { value: element.fontFamily, disabled: !canWrite, onChange: (fontFamily) => onPatch({ fontFamily }) }),
-    /* @__PURE__ */ jsx5(NumberInput, { label: "Size", value: element.fontSize, min: 1, onCommit: (v) => onPatch({ fontSize: v }), className: "w-12" }),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(FontPicker, { value: element.fontFamily, disabled: !canWrite, onChange: (fontFamily) => onPatch({ fontFamily }) }),
+    /* @__PURE__ */ jsx6(NumberInput, { label: "Size", value: element.fontSize, min: 1, onCommit: (v) => onPatch({ fontSize: v }), className: "w-12" }),
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         "aria-label": "Bold",
+        "aria-pressed": !!element.fontStyle?.includes("bold"),
         disabled: !canWrite,
         onClick: () => onPatch({ fontStyle: element.fontStyle === "bold" || element.fontStyle === "bold italic" ? element.fontStyle === "bold italic" ? "italic" : "normal" : element.fontStyle === "italic" ? "bold italic" : "bold" }),
-        className: element.fontStyle?.includes("bold") ? BTN_ACTIVE : BTN2,
-        children: /* @__PURE__ */ jsx5(BoldGlyph, { className: "h-3.5 w-3.5" })
+        className: element.fontStyle?.includes("bold") ? BTN_ACTIVE : BTN,
+        children: /* @__PURE__ */ jsx6(BoldGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         "aria-label": "Italic",
+        "aria-pressed": !!element.fontStyle?.includes("italic"),
         disabled: !canWrite,
         onClick: () => onPatch({ fontStyle: element.fontStyle === "italic" || element.fontStyle === "bold italic" ? element.fontStyle === "bold italic" ? "bold" : "normal" : element.fontStyle === "bold" ? "bold italic" : "italic" }),
-        className: element.fontStyle?.includes("italic") ? BTN_ACTIVE : BTN2,
-        children: /* @__PURE__ */ jsx5(ItalicGlyph, { className: "h-3.5 w-3.5" })
+        className: element.fontStyle?.includes("italic") ? BTN_ACTIVE : BTN,
+        children: /* @__PURE__ */ jsx6(ItalicGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
-    ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("div", { role: "radiogroup", "aria-label": "Text alignment", className: "flex items-center gap-2", children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
+        role: "radio",
         "aria-label": `Align ${align}`,
+        "aria-checked": element.align === align,
         disabled: !canWrite,
         onClick: () => onPatch({ align }),
-        className: element.align === align ? BTN_ACTIVE : BTN2,
-        children: align === "left" ? /* @__PURE__ */ jsx5(AlignLeftGlyph, { className: "h-3.5 w-3.5" }) : align === "center" ? /* @__PURE__ */ jsx5(AlignCenterGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(AlignRightGlyph, { className: "h-3.5 w-3.5" })
+        className: element.align === align ? BTN_ACTIVE : BTN,
+        children: align === "left" ? /* @__PURE__ */ jsx6(AlignLeftGlyph, { className: "h-3.5 w-3.5" }) : align === "center" ? /* @__PURE__ */ jsx6(AlignCenterGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx6(AlignRightGlyph, { className: "h-3.5 w-3.5" })
       },
       align
-    )),
-    /* @__PURE__ */ jsx5(NumberInput, { label: "Line H", value: element.lineHeight, step: 0.1, min: 0.5, onCommit: (v) => onPatch({ lineHeight: v }), className: "w-12" }),
-    /* @__PURE__ */ jsx5(NumberInput, { label: "Spacing", value: element.letterSpacing, step: 0.5, onCommit: (v) => onPatch({ letterSpacing: v }), className: "w-14" }),
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite })
+    )) }),
+    /* @__PURE__ */ jsx6(NumberInput, { label: "Line H", value: element.lineHeight, step: 0.1, min: 0.5, onCommit: (v) => onPatch({ lineHeight: v }), className: "w-12" }),
+    /* @__PURE__ */ jsx6(NumberInput, { label: "Spacing", value: element.letterSpacing, step: 0.5, onCommit: (v) => onPatch({ letterSpacing: v }), className: "w-14" }),
+    /* @__PURE__ */ jsx6(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite })
   ] });
 }
 function ShapeControls({ element, canWrite, onPatch, showCornerRadius }) {
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite }),
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite }),
-    /* @__PURE__ */ jsx5(NumberInput, { label: "Stroke W", value: element.strokeWidth ?? 0, min: 0, onCommit: (v) => onPatch({ strokeWidth: v }), className: "w-14" }),
-    showCornerRadius && "cornerRadius" in element ? /* @__PURE__ */ jsx5(NumberInput, { label: "Corner R", value: element.cornerRadius ?? 0, min: 0, onCommit: (v) => onPatch({ cornerRadius: v }), className: "w-14" }) : null
+    /* @__PURE__ */ jsx6(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx6(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx6(NumberInput, { label: "Stroke W", value: element.strokeWidth ?? 0, min: 0, onCommit: (v) => onPatch({ strokeWidth: v }), className: "w-14" }),
+    showCornerRadius && "cornerRadius" in element ? /* @__PURE__ */ jsx6(NumberInput, { label: "Corner R", value: element.cornerRadius ?? 0, min: 0, onCommit: (v) => onPatch({ cornerRadius: v }), className: "w-14" }) : null
   ] });
 }
 function ImageControls({ element, canWrite, onPatch }) {
-  return /* @__PURE__ */ jsx5(
-    SelectControl,
-    {
-      label: "Fit",
-      value: element.fit,
-      disabled: !canWrite,
-      onChange: (fit) => onPatch({ fit }),
-      buttonClassName: "w-24",
-      options: [
-        { value: "fill", label: "Fill" },
-        { value: "cover", label: "Cover" },
-        { value: "contain", label: "Contain" }
-      ]
-    }
-  );
+  const [swapOpen, setSwapOpen] = useState3(false);
+  const [swapUrl, setSwapUrl] = useState3("");
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx6(
+      SelectControl,
+      {
+        label: "Fit",
+        value: element.fit,
+        disabled: !canWrite,
+        onChange: (fit) => onPatch({ fit }),
+        buttonClassName: "w-24",
+        options: [
+          { value: "fill", label: "Fill" },
+          { value: "cover", label: "Cover" },
+          { value: "contain", label: "Contain" }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      Popover,
+      {
+        open: swapOpen,
+        onClose: () => setSwapOpen(false),
+        trigger: /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Replace image",
+            disabled: !canWrite,
+            onClick: () => {
+              setSwapUrl(element.src);
+              setSwapOpen((v) => !v);
+            },
+            className: BTN,
+            title: "Replace image",
+            children: /* @__PURE__ */ jsx6(SwapGlyph, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        children: /* @__PURE__ */ jsxs5("div", { className: `${POPOVER_PANEL} w-64 gap-2 p-2`, children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              autoFocus: true,
+              value: swapUrl,
+              onChange: (event) => setSwapUrl(event.target.value),
+              placeholder: "https://\u2026 image URL",
+              "aria-label": "New image URL",
+              className: "rounded border border-[var(--border-default)] bg-transparent px-2 py-1 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+            }
+          ),
+          /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                disabled: !swapUrl.trim() || swapUrl.trim() === element.src,
+                onClick: () => {
+                  onPatch({ src: swapUrl.trim() });
+                  setSwapOpen(false);
+                },
+                className: "flex-1 rounded border border-[var(--brand-primary)] px-2 py-0.5 text-[11px] text-[var(--brand-primary)] hover:bg-[var(--brand-primary)]/10 disabled:cursor-default disabled:opacity-40",
+                children: "Replace"
+              }
+            ),
+            /* @__PURE__ */ jsx6(
+              "button",
+              {
+                type: "button",
+                onClick: () => setSwapOpen(false),
+                className: "rounded border border-[var(--border-default)] px-2 py-0.5 text-[11px] text-[var(--text-secondary)]",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
 }
 function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides }) {
   const matchedPreset = matchPreset(page.width, page.height);
@@ -1810,7 +1366,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
     ...SIZE_PRESETS.map((p) => ({ value: p.id, label: p.label }))
   ];
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "input",
       {
         type: "text",
@@ -1822,7 +1378,7 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       }
     ),
     SEP,
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       SelectControl,
       {
         label: "Preset",
@@ -1836,8 +1392,8 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       }
     ),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: "W" }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: "W" }),
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "number",
@@ -1854,10 +1410,10 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)]", children: "\xD7" }),
+    /* @__PURE__ */ jsx6("span", { className: "text-[var(--text-muted)]", children: "\xD7" }),
     /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
-      /* @__PURE__ */ jsx5("span", { className: FIELD_LABEL, children: "H" }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6("span", { className: FIELD_LABEL, children: "H" }),
+      /* @__PURE__ */ jsx6(
         "input",
         {
           type: "number",
@@ -1875,9 +1431,9 @@ function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides })
       )
     ] }),
     SEP,
-    /* @__PURE__ */ jsx5(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }), disabled: !canWrite }),
+    /* @__PURE__ */ jsx6(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }), disabled: !canWrite }),
     SEP,
-    /* @__PURE__ */ jsx5(BleedControls, { page, canWrite, onSetPageProps })
+    /* @__PURE__ */ jsx6(BleedControls, { page, canWrite, onSetPageProps })
   ] });
 }
 function BleedControls({ page, canWrite, onSetPageProps }) {
@@ -1887,20 +1443,20 @@ function BleedControls({ page, canWrite, onSetPageProps }) {
     onSetPageProps({ bleed: { ...current, [side]: value } });
   }
   if (!bleed) {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         disabled: !canWrite,
         onClick: () => onSetPageProps({ bleed: { top: 3, right: 3, bottom: 3, left: 3 } }),
-        className: BTN2,
+        className: BTN,
         title: "Enable bleed",
-        children: /* @__PURE__ */ jsx5(BleedGlyph, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx6(BleedGlyph, { className: "h-3.5 w-3.5" })
       }
     );
   }
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsx5(
+    ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsx6(
       NumberInput,
       {
         label: `Bleed ${side[0].toUpperCase()}`,
@@ -1911,13 +1467,13 @@ function BleedControls({ page, canWrite, onSetPageProps }) {
       },
       side
     )),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         disabled: !canWrite,
         onClick: () => onSetPageProps({ bleed: null }),
-        className: BTN2,
+        className: BTN,
         title: "Remove bleed",
         children: "\xD7"
       }
@@ -1926,11 +1482,10 @@ function BleedControls({ page, canWrite, onSetPageProps }) {
 }
 
 // src/design-canvas-react/components/ZoomControls.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var STEP = 0.1;
 var MIN = 0.05;
 var MAX = 32;
-var BTN3 = "flex h-6 w-6 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] disabled:cursor-default disabled:opacity-40";
 function ZoomControls({ zoom, onZoom, onFit }) {
   function zoomOut() {
     onZoom(Math.max(MIN, parseFloat((zoom - STEP).toFixed(4))));
@@ -1942,26 +1497,26 @@ function ZoomControls({ zoom, onZoom, onFit }) {
     onZoom(1);
   }
   return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-2", children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
         "aria-label": "Fit page to viewport",
         onClick: onFit,
-        className: BTN3,
+        className: BTN_SM,
         title: "Fit page (F)",
-        children: /* @__PURE__ */ jsx6(ZoomFitGlyph, { className: "h-3.5 w-3.5" })
+        children: /* @__PURE__ */ jsx7(ZoomFitGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
         "aria-label": "Zoom out",
         onClick: zoomOut,
         disabled: zoom <= MIN,
-        className: BTN3,
-        children: /* @__PURE__ */ jsx6("span", { className: "text-base leading-none", children: "\u2212" })
+        className: BTN_SM,
+        children: /* @__PURE__ */ jsx7("span", { className: "text-base leading-none", children: "\u2212" })
       }
     ),
     /* @__PURE__ */ jsxs6(
@@ -1970,7 +1525,7 @@ function ZoomControls({ zoom, onZoom, onFit }) {
         type: "button",
         "aria-label": "Reset to 100%",
         onClick: resetHundred,
-        className: "rounded px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-[var(--text-secondary)] transition hover:bg-[var(--border-default)] hover:text-[var(--text-primary)]",
+        className: "rounded px-1.5 py-0.5 font-mono text-[11px] tabular-nums text-[var(--text-secondary)] transition hover:bg-[var(--border-default)] hover:text-[var(--text-primary)] focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--ring))]",
         title: "Reset to 100%",
         children: [
           Math.round(zoom * 100),
@@ -1978,15 +1533,15 @@ function ZoomControls({ zoom, onZoom, onFit }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
         "aria-label": "Zoom in",
         onClick: zoomIn,
         disabled: zoom >= MAX,
-        className: BTN3,
-        children: /* @__PURE__ */ jsx6("span", { className: "text-sm leading-none", children: "+" })
+        className: BTN_SM,
+        children: /* @__PURE__ */ jsx7("span", { className: "text-sm leading-none", children: "+" })
       }
     )
   ] });
@@ -1994,7 +1549,7 @@ function ZoomControls({ zoom, onZoom, onFit }) {
 
 // src/design-canvas-react/components/ExportControl.tsx
 import { useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 var FORMATS = [
   { id: "png", label: "PNG" },
   { id: "jpeg", label: "JPEG" }
@@ -2028,9 +1583,9 @@ function ExportControl({ defaults, onExport, className }) {
         },
         className: "flex h-8 items-center gap-1.5 rounded-md border border-[var(--border-default)] px-2.5 text-xs font-medium text-[var(--text-primary)] transition-colors hover:border-[var(--brand-primary)]/40",
         children: [
-          /* @__PURE__ */ jsx7(ExportGlyph, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx8(ExportGlyph, { className: "h-3.5 w-3.5" }),
           "Export",
-          /* @__PURE__ */ jsx7(ChevronDownGlyph, { className: "h-3 w-3 text-[var(--text-muted)]" })
+          /* @__PURE__ */ jsx8(ChevronDownGlyph, { className: "h-3 w-3 text-[var(--text-muted)]" })
         ]
       }
     ),
@@ -2047,8 +1602,8 @@ function ExportControl({ defaults, onExport, className }) {
         className: "absolute right-0 top-full z-50 mt-1 flex w-52 flex-col gap-3 rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] p-3 shadow-lg",
         children: [
           /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Format" }),
-            /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5", children: FORMATS.map((f) => /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Format" }),
+            /* @__PURE__ */ jsx8("div", { className: "flex gap-1.5", children: FORMATS.map((f) => /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -2061,8 +1616,8 @@ function ExportControl({ defaults, onExport, className }) {
             )) })
           ] }),
           /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx7("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Scale" }),
-            /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5", children: SCALES.map((s) => /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("span", { className: "text-[11px] font-medium text-[var(--text-muted)]", children: "Scale" }),
+            /* @__PURE__ */ jsx8("div", { className: "flex gap-1.5", children: SCALES.map((s) => /* @__PURE__ */ jsx8(
               "button",
               {
                 type: "button",
@@ -2074,7 +1629,7 @@ function ExportControl({ defaults, onExport, className }) {
               s.value
             )) })
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
@@ -2091,7 +1646,7 @@ function ExportControl({ defaults, onExport, className }) {
 }
 
 // src/design-canvas-react/components/DesignCanvas.tsx
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function mintId() {
   const uuid = globalThis.crypto && "randomUUID" in globalThis.crypto ? globalThis.crypto.randomUUID() : null;
   return `local-${uuid ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`}`;
@@ -2126,6 +1681,7 @@ function DesignCanvas({
   document: initialDocument,
   rev: initialRev,
   canWrite,
+  mode = "edit",
   onApplyOperations,
   onSelectionChange,
   renderAgentPanel,
@@ -2135,6 +1691,7 @@ function DesignCanvas({
   className,
   fitOnMount,
   onReady,
+  render,
   renderWorkspace,
   renderThumbnail
 }) {
@@ -2317,12 +1874,7 @@ function DesignCanvas({
     void onApplyOperations(command.inverseOperations()).then((result) => {
       if (result.document) stack.reset(result.document);
     }).catch((error) => {
-      if (stack.canRedo()) {
-        try {
-          stack.redo();
-        } catch {
-        }
-      }
+      stack.reexecute(command);
       setCommitError(error instanceof Error ? error.message : String(error));
     });
   }, [stack, canWrite, onApplyOperations]);
@@ -2338,12 +1890,7 @@ function DesignCanvas({
     void onApplyOperations(command.operations()).then((result) => {
       if (result.document) stack.reset(result.document);
     }).catch((error) => {
-      if (stack.canUndo()) {
-        try {
-          stack.undo();
-        } catch {
-        }
-      }
+      stack.reundo(command);
       setCommitError(error instanceof Error ? error.message : String(error));
     });
   }, [stack, canWrite, onApplyOperations]);
@@ -2385,8 +1932,9 @@ function DesignCanvas({
     if (!activePage) return [];
     return editorState.selectedElementIds.map((id) => activePage.elements.find((el) => el.id === id)).filter((el) => el !== void 0);
   }, [activePage, editorState.selectedElementIds]);
+  const review = mode === "review";
   if (!activePage) {
-    return /* @__PURE__ */ jsx8("div", { className: `flex h-full items-center justify-center bg-[var(--bg-input)] text-[var(--text-muted)] ${className ?? ""}`, children: "No pages in document" });
+    return /* @__PURE__ */ jsx9("div", { className: `flex h-full items-center justify-center bg-[var(--bg-input)] text-[var(--text-muted)] ${className ?? ""}`, children: "No pages in document" });
   }
   const bleedScreen = editorState.showBleed && activePage.bleed ? {
     top: activePage.bleed.top * editorState.zoom,
@@ -2395,15 +1943,16 @@ function DesignCanvas({
     left: activePage.bleed.left * editorState.zoom
   } : null;
   return /* @__PURE__ */ jsxs8("div", { className: `flex h-full min-h-0 bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ""}`, children: [
-    renderSidePanel ? /* @__PURE__ */ jsx8("aside", { className: "flex w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)]", children: renderSidePanel() }) : null,
+    renderSidePanel && !review ? /* @__PURE__ */ jsx9("aside", { className: "flex w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)]", children: renderSidePanel() }) : null,
     /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-stretch", children: [
-        /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx9(
           Toolbar,
           {
             page: activePage,
             selectedElements,
             canWrite,
+            mode,
             canUndo: stack.canUndo(),
             canRedo: stack.canRedo(),
             gridEnabled: editorState.gridEnabled,
@@ -2426,7 +1975,7 @@ function DesignCanvas({
             onBindSlot: handleBindSlot
           }
         ) }),
-        onExport ? /* @__PURE__ */ jsx8("div", { className: "flex shrink-0 items-center border-b border-l border-[var(--border-default)] bg-[var(--bg-input)] px-2", children: /* @__PURE__ */ jsx8(
+        onExport ? /* @__PURE__ */ jsx9("div", { className: "flex shrink-0 items-center border-b border-l border-[var(--border-default)] bg-[var(--bg-input)] px-2", children: /* @__PURE__ */ jsx9(
           ExportControl,
           {
             defaults: exportDefaults,
@@ -2437,11 +1986,11 @@ function DesignCanvas({
       commitError ? /* @__PURE__ */ jsxs8(
         "div",
         {
-          className: "flex shrink-0 items-center justify-between gap-3 border-b border-rose-500/30 bg-rose-500/10 px-3 py-1.5 text-xs text-rose-300",
+          className: "flex shrink-0 items-center justify-between gap-3 border-b border-[hsl(var(--destructive)/0.3)] bg-[hsl(var(--destructive)/0.1)] px-3 py-1.5 text-xs text-[var(--text-danger)]",
           role: "alert",
           children: [
-            /* @__PURE__ */ jsx8("span", { className: "min-w-0 truncate", children: commitError }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: commitError }),
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -2454,7 +2003,7 @@ function DesignCanvas({
         }
       ) : null,
       /* @__PURE__ */ jsxs8("div", { className: "relative min-h-0 flex-1", children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           Rulers,
           {
             pageWidth: activePage.width,
@@ -2467,12 +2016,12 @@ function DesignCanvas({
             onGuidesChange: handleSetPageGuides
           }
         ),
-        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx8(
+        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx9(
           "div",
           {
             className: "pointer-events-none absolute inset-0 z-10 overflow-hidden",
             "aria-hidden": true,
-            children: /* @__PURE__ */ jsx8(
+            children: /* @__PURE__ */ jsx9(
               "div",
               {
                 style: {
@@ -2480,7 +2029,7 @@ function DesignCanvas({
                   left: editorState.panX,
                   top: editorState.panY
                 },
-                children: /* @__PURE__ */ jsx8(
+                children: /* @__PURE__ */ jsx9(
                   BleedTrimOverlay,
                   {
                     pageWidthPx: activePage.width * editorState.zoom,
@@ -2510,18 +2059,20 @@ function DesignCanvas({
           onExportRef: exportRef,
           fitOnMount,
           onReady,
+          render,
           onZoomChange: setZoom,
           onPanChange: setPan,
           onSelectElements: setSelectedElements
         })
       ] }),
       /* @__PURE__ */ jsxs8("div", { className: "flex shrink-0 items-stretch border-t border-[var(--border-default)]", children: [
-        /* @__PURE__ */ jsx8("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx9(
           PagesStrip,
           {
             pages: editorState.document.pages,
             activePageId: editorState.activePageId,
             canWrite,
+            canManagePages: !review,
             renderThumbnail,
             onSelectPage: setActivePage,
             onAddPage: handleAddPage,
@@ -2530,7 +2081,7 @@ function DesignCanvas({
             onReorderPage: handleReorderPage
           }
         ) }),
-        /* @__PURE__ */ jsx8("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx9(
           ZoomControls,
           {
             zoom: editorState.zoom,
@@ -2540,29 +2091,12 @@ function DesignCanvas({
         ) })
       ] })
     ] }),
-    renderAgentPanel ? /* @__PURE__ */ jsx8("aside", { className: "flex w-80 shrink-0 flex-col overflow-hidden border-l border-[var(--border-default)]", children: renderAgentPanel({ selectedElements, activePageId: editorState.activePageId }) }) : null
+    renderAgentPanel ? /* @__PURE__ */ jsx9("aside", { className: "flex w-80 shrink-0 flex-col overflow-hidden border-l border-[var(--border-default)]", children: renderAgentPanel({ selectedElements, activePageId: editorState.activePageId }) }) : null
   ] });
 }
 var DesignCanvas_default = DesignCanvas;
 
 export {
-  SCENE_COMMAND_HISTORY_LIMIT,
-  createSceneCommandStack,
-  addElementCommand,
-  setAttrsCommand,
-  multiSetAttrsCommand,
-  reorderElementCommand,
-  deleteElementCommand,
-  groupElementsCommand,
-  ungroupElementCommand,
-  addPageCommand,
-  duplicatePageCommand,
-  deletePageCommand,
-  reorderPageCommand,
-  setPagePropsCommand,
-  setPageGuidesCommand,
-  bindSlotCommand,
-  setDocumentTitleCommand,
   selectTickStep,
   buildRulerTicks,
   formatRulerLabel,
@@ -2580,6 +2114,11 @@ export {
   VideoGlyph,
   SlotGlyph,
   ShapesGlyph,
+  BTN,
+  BTN_ACTIVE,
+  BTN_SM,
+  BTN_SM_ACTIVE,
+  IconButton,
   PagesStrip,
   Rulers,
   Toolbar,
@@ -2588,4 +2127,4 @@ export {
   DesignCanvas,
   DesignCanvas_default
 };
-//# sourceMappingURL=chunk-LPAVBGVY.js.map
+//# sourceMappingURL=chunk-YEWTVDDT.js.map