@tangle-network/agent-app 0.11.1 → 0.13.0

package/dist/chunk-F5KTWRO7.js

@@ -0,0 +1,2276 @@
+import {
+  SIZE_PRESETS,
+  applySceneOperation,
+  applySceneOperations,
+  findElement,
+  matchPreset,
+  requireElement,
+  requirePage
+} from "./chunk-JZAJE3JL.js";
+
+// src/design-canvas-react/components/DesignCanvas.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef4, useState as useState4, useSyncExternalStore } from "react";
+
+// src/design-canvas-react/engine/command-stack.ts
+var SCENE_COMMAND_HISTORY_LIMIT = 200;
+function createSceneCommandStack(document, activePageId) {
+  let state = {
+    document,
+    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) {
+  if (!Number.isFinite(input.zoom) || input.zoom <= 0) {
+    throw new Error(`zoom must be a positive finite number, got ${input.zoom}`);
+  }
+  const minMajor = input.minMajorSpacingPx ?? 40;
+  const minMinor = input.minMinorSpacingPx ?? 8;
+  let major = TICK_STEP_CANDIDATES_PX[TICK_STEP_CANDIDATES_PX.length - 1];
+  for (const candidate of TICK_STEP_CANDIDATES_PX) {
+    if (candidate * input.zoom >= minMajor) {
+      major = candidate;
+      break;
+    }
+  }
+  while (major * input.zoom < minMajor) {
+    major = major * 2;
+  }
+  const minor = major / 5;
+  const drawMinor = minor * input.zoom >= minMinor;
+  return { major, minor, drawMinor };
+}
+function buildRulerTicks(input) {
+  if (input.documentLength <= 0) return [];
+  const { major, minor, drawMinor } = input.step;
+  const ticks = [];
+  for (let pos = 0; pos <= input.documentLength; pos += major) {
+    ticks.push({ position: pos, label: formatRulerLabel(pos) });
+    if (!drawMinor) continue;
+    for (let m = 1; m < 5; m += 1) {
+      const minorPos = pos + m * minor;
+      if (minorPos >= input.documentLength) break;
+      ticks.push({ position: minorPos, label: null });
+    }
+  }
+  return ticks;
+}
+function formatRulerLabel(value) {
+  if (!Number.isFinite(value)) return "";
+  if (Math.abs(value) >= 1e3) {
+    const k = value / 1e3;
+    return `${Number.isInteger(k) ? k : k.toFixed(1)}k`;
+  }
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+function screenToDocumentPosition(input) {
+  if (!Number.isFinite(input.zoom) || input.zoom <= 0) {
+    throw new Error(`zoom must be a positive finite number, got ${input.zoom}`);
+  }
+  return input.pointerScreenPx / input.zoom + input.scrollOffset;
+}
+function topIndex(ownerLength) {
+  return ownerLength - 1;
+}
+function indexForward(current, ownerLength) {
+  return Math.min(current + 1, ownerLength - 1);
+}
+function indexBackward(current) {
+  return Math.max(current - 1, 0);
+}
+function clampIndex(target, ownerLength) {
+  return Math.max(0, Math.min(target, ownerLength - 1));
+}
+
+// src/design-canvas-react/components/BleedTrimOverlay.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TRIM_MARK_PX = 12;
+var TRIM_MARK_OFFSET_PX = 4;
+function BleedTrimOverlay({ pageWidthPx, pageHeightPx, bleed }) {
+  const totalW = bleed.left + pageWidthPx + bleed.right;
+  const totalH = bleed.top + pageHeightPx + bleed.bottom;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-node": "overlay:bleed",
+      className: "pointer-events-none absolute",
+      style: {
+        top: -bleed.top,
+        left: -bleed.left,
+        width: totalW,
+        height: totalH
+      },
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bg-rose-500/10",
+            style: { top: 0, left: 0, width: totalW, height: bleed.top }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bg-rose-500/10",
+            style: { bottom: 0, left: 0, width: totalW, height: bleed.bottom }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bg-rose-500/10",
+            style: { top: bleed.top, left: 0, width: bleed.left, height: pageHeightPx }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute bg-rose-500/10",
+            style: { top: bleed.top, right: 0, width: bleed.right, height: pageHeightPx }
+          }
+        ),
+        /* @__PURE__ */ jsx(TrimMark, { corner: "tl", bleed }),
+        /* @__PURE__ */ jsx(TrimMark, { corner: "tr", bleed, pageWidthPx }),
+        /* @__PURE__ */ jsx(TrimMark, { corner: "bl", bleed, pageHeightPx }),
+        /* @__PURE__ */ jsx(TrimMark, { corner: "br", bleed, pageWidthPx, pageHeightPx })
+      ]
+    }
+  );
+}
+function TrimMark({ corner, bleed, pageWidthPx = 0, pageHeightPx = 0 }) {
+  const isRight = corner === "tr" || corner === "br";
+  const isBottom = corner === "bl" || corner === "br";
+  const xBase = isRight ? bleed.left + pageWidthPx : bleed.left;
+  const yBase = isBottom ? bleed.top + pageHeightPx : bleed.top;
+  const hX = isRight ? xBase + TRIM_MARK_OFFSET_PX : xBase - TRIM_MARK_OFFSET_PX - TRIM_MARK_PX;
+  const hY = yBase - 0.5;
+  const vX = xBase - 0.5;
+  const vY = isBottom ? yBase + TRIM_MARK_OFFSET_PX : yBase - TRIM_MARK_OFFSET_PX - TRIM_MARK_PX;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute bg-[var(--text-muted)]",
+        style: { left: hX, top: hY, width: TRIM_MARK_PX, height: 1 }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute bg-[var(--text-muted)]",
+        style: { left: vX, top: vY, width: 1, height: TRIM_MARK_PX }
+      }
+    )
+  ] });
+}
+
+// src/design-canvas-react/components/PagesStrip.tsx
+import { useEffect, useRef, useState } from "react";
+
+// src/design-canvas-react/components/glyphs.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function glyph(paths) {
+  return function Glyph({ className }) {
+    return /* @__PURE__ */ jsx2(
+      "svg",
+      {
+        className,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": true,
+        children: 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 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" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" })
+  ] })
+);
+var EyeOffGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94" }),
+    /* @__PURE__ */ jsx2("path", { d: "M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19" }),
+    /* @__PURE__ */ jsx2("path", { d: "m1 1 22 22" })
+  ] })
+);
+var LockGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
+  ] })
+);
+var UnlockGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 11V7a4 4 0 1 1 8 0" })
+  ] })
+);
+var TrashGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 6h18M19 6l-1 14H6L5 6M10 6V4h4v2" }) })
+);
+var GroupGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "14", y: "2", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "14", width: "8", height: "8", rx: "1" }),
+    /* @__PURE__ */ jsx2("rect", { x: "14", y: "14", width: "8", height: "8", rx: "1" })
+  ] })
+);
+var UngroupGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2" }) })
+);
+var BringFrontGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "8", y: "8", width: "12", height: "12", rx: "1" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 4h12v4H4z", opacity: ".4" })
+  ] })
+);
+var SendBackGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "12", height: "12", rx: "1", opacity: ".4" }),
+    /* @__PURE__ */ jsx2("path", { d: "M8 8h12v12H8z" })
+  ] })
+);
+var AlignLeftGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 4v16M7 8h10M7 16h6" }) })
+);
+var AlignCenterGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M12 4v16M7 8h10M9 16h6" }) })
+);
+var AlignRightGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M21 4v16M7 8h10M11 16h6" }) })
+);
+var BoldGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M6 4h8a4 4 0 0 1 0 8H6zM6 12h9a4 4 0 0 1 0 8H6z", fill: "currentColor", stroke: "none" }));
+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" }));
+var TextGlyph = glyph(/* @__PURE__ */ jsx2("path", { d: "M4 7V4h16v3M9 20h6M12 4v16" }));
+var ImageGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
+  ] })
+);
+var VideoGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "2", y: "3", width: "20", height: "18", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "m10 8 6 4-6 4z", fill: "currentColor", stroke: "none" })
+  ] })
+);
+var SlotGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("circle", { cx: "12", cy: "12", r: "3" }),
+    /* @__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" }),
+    /* @__PURE__ */ jsx2("polyline", { points: "14 2 14 8 20 8" })
+  ] })
+);
+var GridGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M3 3h18v18H3zM3 9h18M3 15h18M9 3v18M15 3v18" }) })
+);
+var RulerGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "M1 9v6l12 6V9L1 3z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m13 15 9-4.5V4.5L13 9" }),
+    /* @__PURE__ */ jsx2("path", { d: "M5 12v3M8 13.5v2.5M11 15v3" })
+  ] })
+);
+var MagnetGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("path", { d: "m6 15-4-4 6.75-6.77a7.79 7.79 0 0 1 11 11L13 22l-4-4 6.39-6.36a2.14 2.14 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsx2("path", { d: "m5 8 4 4M12 15l4 4" })
+  ] })
+);
+var BleedGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "4", y: "4", width: "16", height: "16", strokeDasharray: "3 2" }),
+    /* @__PURE__ */ jsx2("rect", { x: "7", y: "7", width: "10", height: "10" })
+  ] })
+);
+var DuplicateGlyph = glyph(
+  /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsx2("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+    /* @__PURE__ */ jsx2("path", { d: "M4 16V4a2 2 0 0 1 2-2h12" })
+  ] })
+);
+var ZoomFitGlyph = glyph(
+  /* @__PURE__ */ jsx2(Fragment2, { children: /* @__PURE__ */ jsx2("path", { d: "M15 3h6v6M14 10l6.1-6.1M9 21H3v-6M10 14l-6.1 6.1" }) })
+);
+
+// src/design-canvas-react/components/PagesStrip.tsx
+import { jsx as jsx3, 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,
+  canWrite,
+  renderThumbnail,
+  onSelectPage,
+  onAddPage,
+  onDuplicatePage,
+  onDeletePage,
+  onReorderPage
+}) {
+  const [thumbnails, setThumbnails] = useState({});
+  const thumbnailVersionRef = useRef(0);
+  useEffect(() => {
+    const version = ++thumbnailVersionRef.current;
+    let cancelled = false;
+    async function generate() {
+      const results = {};
+      for (const page of pages) {
+        if (cancelled) return;
+        try {
+          results[page.id] = await renderThumbnail(page);
+        } catch {
+          results[page.id] = null;
+        }
+      }
+      if (!cancelled && thumbnailVersionRef.current === version) {
+        setThumbnails(results);
+      }
+    }
+    void generate();
+    return () => {
+      cancelled = true;
+    };
+  }, [pages]);
+  const dragIndexRef = useRef(null);
+  const [dragOverIndex, setDragOverIndex] = useState(null);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "flex h-[84px] shrink-0 items-center gap-2 overflow-x-auto border-t border-[var(--border-default)] bg-[var(--bg-input)] px-2",
+      "aria-label": "Pages",
+      children: [
+        pages.map((page, index) => {
+          const isActive = page.id === activePageId;
+          const thumbUrl = thumbnails[page.id];
+          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;
+              },
+              onDragOver: (event) => {
+                if (dragIndexRef.current === null) return;
+                event.preventDefault();
+                setDragOverIndex(index);
+              },
+              onDragLeave: () => setDragOverIndex(null),
+              onDrop: () => {
+                const from = dragIndexRef.current;
+                if (from !== null && from !== index) {
+                  onReorderPage(pages[from].id, index);
+                }
+                dragIndexRef.current = null;
+                setDragOverIndex(null);
+              },
+              onDragEnd: () => {
+                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",
+                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",
+                  {
+                    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)]" }) })
+                  }
+                ),
+                /* @__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(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Duplicate page ${page.name}`,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        onDuplicatePage(page.id);
+                      },
+                      className: BTN,
+                      children: /* @__PURE__ */ jsx3(DuplicateGlyph, { className: "h-3 w-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": `Delete page ${page.name}`,
+                      disabled: pages.length <= 1,
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        if (pages.length > 1) onDeletePage(page.id);
+                      },
+                      className: BTN,
+                      children: /* @__PURE__ */ jsx3(TrashGlyph, { className: "h-3 w-3 text-rose-400" })
+                    }
+                  )
+                ] }) : null
+              ]
+            },
+            page.id
+          );
+        }),
+        canWrite ? /* @__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)]",
+            children: [
+              /* @__PURE__ */ jsx3(PlusGlyph, { className: "h-4 w-4" }),
+              /* @__PURE__ */ jsx3("span", { className: "text-[10px]", children: "Add page" })
+            ]
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// 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";
+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(
+      "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(
+      HorizontalRuler,
+      {
+        pageWidth,
+        zoom,
+        scrollLeft,
+        guides,
+        onGuidesChange
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      VerticalRuler,
+      {
+        pageHeight,
+        zoom,
+        scrollTop,
+        guides,
+        onGuidesChange
+      }
+    )
+  ] });
+}
+function HorizontalRuler({ pageWidth, zoom, scrollLeft, guides, onGuidesChange }) {
+  const ref = useRef2(null);
+  const [pointerX, setPointerX] = useState2(null);
+  const [dragGuideX, setDragGuideX] = useState2(null);
+  const dragGuideIndexRef = useRef2(null);
+  const step = selectTickStep({ zoom, minMajorSpacingPx: 40 });
+  const ticks = buildRulerTicks({ documentLength: pageWidth, step });
+  function screenXToDoc(clientX) {
+    if (!ref.current) return 0;
+    const rect = ref.current.getBoundingClientRect();
+    return screenToDocumentPosition({ pointerScreenPx: clientX - rect.left, scrollOffset: scrollLeft, zoom });
+  }
+  function handlePointerDown(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const docX = screenXToDoc(event.clientX);
+    const threshold = 4 / zoom;
+    const nearIdx = guides.vertical.findIndex((g) => Math.abs(g - docX) <= threshold);
+    if (nearIdx >= 0) {
+      dragGuideIndexRef.current = nearIdx;
+    } else {
+      dragGuideIndexRef.current = null;
+    }
+    setDragGuideX(docX);
+  }
+  function handlePointerMove(event) {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const localY = event.clientY - rect.top;
+    setPointerX(event.clientX - rect.left);
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    const docX = screenXToDoc(event.clientX);
+    if (localY > DELETE_THRESHOLD_PX) {
+      setDragGuideX(docX);
+    } else {
+      setDragGuideX(null);
+    }
+  }
+  function handlePointerUp(event) {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    const rect = ref.current?.getBoundingClientRect();
+    const localY = rect ? event.clientY - rect.top : 0;
+    const deletingExisting = dragGuideIndexRef.current !== null;
+    const docX = screenXToDoc(event.clientX);
+    const vertical = [...guides.vertical];
+    if (localY <= DELETE_THRESHOLD_PX && deletingExisting) {
+      vertical.splice(dragGuideIndexRef.current, 1);
+    } else if (localY > DELETE_THRESHOLD_PX) {
+      if (deletingExisting) {
+        vertical[dragGuideIndexRef.current] = docX;
+      } else {
+        vertical.push(docX);
+      }
+    }
+    dragGuideIndexRef.current = null;
+    setDragGuideX(null);
+    onGuidesChange({ ...guides, vertical });
+  }
+  function handlePointerLeave() {
+    setPointerX(null);
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref,
+      className: "absolute top-0 left-0 right-0 z-10 cursor-ew-resize select-none overflow-hidden border-b border-[var(--border-default)] bg-[var(--bg-input)]",
+      style: { height: RULER_SIZE_PX, marginLeft: RULER_SIZE_PX },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerLeave,
+      children: [
+        ticks.map((tick) => {
+          const screenX = tick.position * zoom - scrollLeft * zoom;
+          return /* @__PURE__ */ jsx4(
+            "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
+            },
+            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(
+          "div",
+          {
+            className: "pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--brand-primary)]",
+            style: { left: dragGuideX * zoom - scrollLeft * zoom }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function VerticalRuler({ pageHeight, zoom, scrollTop, guides, onGuidesChange }) {
+  const ref = useRef2(null);
+  const [pointerY, setPointerY] = useState2(null);
+  const [dragGuideY, setDragGuideY] = useState2(null);
+  const dragGuideIndexRef = useRef2(null);
+  const step = selectTickStep({ zoom, minMajorSpacingPx: 40 });
+  const ticks = buildRulerTicks({ documentLength: pageHeight, step });
+  function screenYToDoc(clientY) {
+    if (!ref.current) return 0;
+    const rect = ref.current.getBoundingClientRect();
+    return screenToDocumentPosition({ pointerScreenPx: clientY - rect.top, scrollOffset: scrollTop, zoom });
+  }
+  function handlePointerDown(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const docY = screenYToDoc(event.clientY);
+    const threshold = 4 / zoom;
+    const nearIdx = guides.horizontal.findIndex((g) => Math.abs(g - docY) <= threshold);
+    dragGuideIndexRef.current = nearIdx >= 0 ? nearIdx : null;
+    setDragGuideY(docY);
+  }
+  function handlePointerMove(event) {
+    if (!ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const localX = event.clientX - rect.left;
+    setPointerY(event.clientY - rect.top);
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    const docY = screenYToDoc(event.clientY);
+    if (localX > DELETE_THRESHOLD_PX) {
+      setDragGuideY(docY);
+    } else {
+      setDragGuideY(null);
+    }
+  }
+  function handlePointerUp(event) {
+    if (!event.currentTarget.hasPointerCapture(event.pointerId)) return;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    const rect = ref.current?.getBoundingClientRect();
+    const localX = rect ? event.clientX - rect.left : 0;
+    const deletingExisting = dragGuideIndexRef.current !== null;
+    const docY = screenYToDoc(event.clientY);
+    const horizontal = [...guides.horizontal];
+    if (localX <= DELETE_THRESHOLD_PX && deletingExisting) {
+      horizontal.splice(dragGuideIndexRef.current, 1);
+    } else if (localX > DELETE_THRESHOLD_PX) {
+      if (deletingExisting) {
+        horizontal[dragGuideIndexRef.current] = docY;
+      } else {
+        horizontal.push(docY);
+      }
+    }
+    dragGuideIndexRef.current = null;
+    setDragGuideY(null);
+    onGuidesChange({ ...guides, horizontal });
+  }
+  function handlePointerLeave() {
+    setPointerY(null);
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref,
+      className: "absolute top-0 left-0 bottom-0 z-10 cursor-ns-resize select-none overflow-hidden border-r border-[var(--border-default)] bg-[var(--bg-input)]",
+      style: { width: RULER_SIZE_PX, marginTop: RULER_SIZE_PX },
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerLeave: handlePointerLeave,
+      children: [
+        ticks.map((tick) => {
+          const screenY = tick.position * zoom - scrollTop * zoom;
+          return /* @__PURE__ */ jsx4(
+            "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(
+                "span",
+                {
+                  className: "absolute top-0.5 left-0 whitespace-nowrap font-mono text-[9px] leading-none text-[var(--text-muted)]",
+                  style: { transform: "rotate(-90deg)", transformOrigin: "0 0", marginTop: 4 },
+                  children: tick.label
+                }
+              ) : null
+            },
+            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(
+          "div",
+          {
+            className: "pointer-events-none absolute left-0 right-0 h-px bg-[var(--brand-primary)]",
+            style: { top: dragGuideY * zoom - scrollTop * zoom }
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/design-canvas-react/components/Toolbar.tsx
+import { useState as useState3 } from "react";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+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 bg-[var(--border-default)]" });
+function NumberInput({
+  label,
+  value,
+  onCommit,
+  min,
+  step = 1,
+  className = "w-16"
+}) {
+  const [raw, setRaw] = useState3(null);
+  function commit(v) {
+    const n = parseFloat(v);
+    if (Number.isFinite(n) && (min === void 0 || n >= min)) onCommit(n);
+    setRaw(null);
+  }
+  return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: label }),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "number",
+        value: raw ?? value,
+        min,
+        step,
+        onChange: (event) => setRaw(event.target.value),
+        onBlur: (event) => commit(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") commit(event.target.value);
+          if (event.key === "Escape") setRaw(null);
+        },
+        className: `${className} rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]`
+      }
+    )
+  ] });
+}
+function ColorSwatch({ label, value, onCommit }) {
+  return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5 cursor-pointer", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: label }),
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "color",
+        value: value.startsWith("#") ? value : "#ffffff",
+        onChange: (event) => onCommit(event.target.value),
+        className: "h-6 w-10 cursor-pointer rounded border border-[var(--border-default)] p-0.5"
+      }
+    )
+  ] });
+}
+function Toolbar({
+  page,
+  selectedElements,
+  canWrite,
+  canUndo,
+  canRedo,
+  gridEnabled,
+  snapEnabled,
+  showRulers,
+  showBleed,
+  onUndo,
+  onRedo,
+  onToggleGrid,
+  onToggleSnap,
+  onToggleRulers,
+  onToggleBleed,
+  onSetAttrs,
+  onSetPageProps,
+  onSetPageGuides,
+  onReorder,
+  onGroup,
+  onUngroup,
+  onDelete,
+  onBindSlot
+}) {
+  const hasSelection = selectedElements.length > 0;
+  const single = selectedElements.length === 1 ? selectedElements[0] : null;
+  const allSameKind = selectedElements.length > 0 && selectedElements.every((e) => e.kind === selectedElements[0].kind);
+  const firstKind = selectedElements[0]?.kind;
+  function patchAll(attrs) {
+    for (const el of selectedElements) onSetAttrs(el.id, attrs);
+  }
+  function reorderSingle(direction) {
+    if (!single) return;
+    onReorder(single.id, 0, page.elements.length, direction);
+  }
+  const selectedIds = selectedElements.map((e) => e.id);
+  const isGroup = single?.kind === "group";
+  const groupable = selectedElements.length >= 2;
+  return /* @__PURE__ */ jsxs5("div", { className: "flex h-11 shrink-0 items-center gap-2 overflow-x-auto border-b border-[var(--border-default)] bg-[var(--bg-input)] px-3", 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" }) }),
+    SEP,
+    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
+      }
+    )
+  ] });
+}
+function SelectionControls({
+  elements,
+  single,
+  isGroup,
+  groupable,
+  allSameKind,
+  firstKind,
+  canWrite,
+  patchAll,
+  reorderSingle,
+  onGroup,
+  onUngroup,
+  onDelete,
+  onBindSlot,
+  currentSlot
+}) {
+  const [slotPopoverOpen, setSlotPopoverOpen] = useState3(false);
+  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,
+    SEP,
+    /* @__PURE__ */ jsx5(
+      NumberInput,
+      {
+        label: "Opacity",
+        value: Math.round((firstEl.opacity ?? 1) * 100),
+        min: 0,
+        onCommit: (v) => patchAll({ opacity: Math.max(0, Math.min(1, v / 100)) }),
+        className: "w-14"
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      NumberInput,
+      {
+        label: "Rotation",
+        value: Math.round(firstEl.rotation ?? 0),
+        onCommit: (v) => patchAll({ rotation: v }),
+        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__ */ jsxs5("div", { className: "relative", children: [
+      /* @__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" })
+        }
+      ),
+      slotPopoverOpen ? /* @__PURE__ */ jsxs5("div", { className: "absolute top-full left-0 z-50 mt-1 flex w-48 flex-col gap-2 rounded border border-[var(--border-default)] bg-[var(--bg-input)] p-2 shadow-lg", children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            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__ */ jsxs5("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx5(
+            "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__ */ 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"
+            }
+          )
+        ] })
+      ] }) : null
+    ] }) : 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" }) })
+  ] });
+}
+function TextControls({ element, canWrite, onPatch }) {
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "text",
+        "aria-label": "Font family",
+        value: element.fontFamily,
+        disabled: !canWrite,
+        onChange: (event) => onPatch({ fontFamily: event.target.value }),
+        className: "w-28 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]",
+        placeholder: "Font"
+      }
+    ),
+    /* @__PURE__ */ jsx5(NumberInput, { label: "Size", value: element.fontSize, min: 1, onCommit: (v) => onPatch({ fontSize: v }), className: "w-12" }),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": "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" })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": "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" })
+      }
+    ),
+    ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        "aria-label": `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" })
+      },
+      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 }) })
+  ] });
+}
+function ShapeControls({ element, canWrite, onPatch, showCornerRadius }) {
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Fill", value: element.fill, onCommit: (v) => onPatch({ fill: v }) }),
+    /* @__PURE__ */ jsx5(ColorSwatch, { label: "Stroke", value: element.stroke ?? "#000000", onCommit: (v) => onPatch({ stroke: v }) }),
+    /* @__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
+  ] });
+}
+function ImageControls({ element, canWrite, onPatch }) {
+  return /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
+    /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "Fit" }),
+    /* @__PURE__ */ jsxs5(
+      "select",
+      {
+        value: element.fit,
+        disabled: !canWrite,
+        onChange: (event) => onPatch({ fit: event.target.value }),
+        className: "rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]",
+        children: [
+          /* @__PURE__ */ jsx5("option", { value: "fill", children: "Fill" }),
+          /* @__PURE__ */ jsx5("option", { value: "cover", children: "Cover" }),
+          /* @__PURE__ */ jsx5("option", { value: "contain", children: "Contain" })
+        ]
+      }
+    )
+  ] });
+}
+function PagePropsControls({ page, canWrite, onSetPageProps, onSetPageGuides }) {
+  const matchedPreset = matchPreset(page.width, page.height);
+  const [customW, setCustomW] = useState3(null);
+  const [customH, setCustomH] = useState3(null);
+  function commitDimension(dim, raw) {
+    const v = parseFloat(raw);
+    if (Number.isFinite(v) && v > 0) onSetPageProps({ [dim]: v });
+    if (dim === "width") setCustomW(null);
+    else setCustomH(null);
+  }
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        type: "text",
+        "aria-label": "Page name",
+        value: page.name,
+        disabled: !canWrite,
+        onChange: (event) => onSetPageProps({ name: event.target.value }),
+        className: "w-28 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-2 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+      }
+    ),
+    SEP,
+    /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "Preset" }),
+      /* @__PURE__ */ jsxs5(
+        "select",
+        {
+          value: matchedPreset?.id ?? "custom",
+          disabled: !canWrite,
+          onChange: (event) => {
+            const preset = SIZE_PRESETS.find((p) => p.id === event.target.value);
+            if (preset) onSetPageProps({ width: preset.width, height: preset.height });
+          },
+          className: "rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]",
+          children: [
+            /* @__PURE__ */ jsx5("option", { value: "custom", children: "Custom" }),
+            SIZE_PRESETS.map((p) => /* @__PURE__ */ jsx5("option", { value: p.id, children: p.label }, p.id))
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("label", { className: "flex flex-col items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx5("span", { className: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "W" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "number",
+          value: customW ?? page.width,
+          min: 1,
+          disabled: !canWrite,
+          onChange: (event) => setCustomW(event.target.value),
+          onBlur: (event) => commitDimension("width", event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") commitDimension("width", event.target.value);
+            if (event.key === "Escape") setCustomW(null);
+          },
+          className: "w-16 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx5("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: "text-[9px] uppercase tracking-wide text-[var(--text-muted)]", children: "H" }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          type: "number",
+          value: customH ?? page.height,
+          min: 1,
+          disabled: !canWrite,
+          onChange: (event) => setCustomH(event.target.value),
+          onBlur: (event) => commitDimension("height", event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Enter") commitDimension("height", event.target.value);
+            if (event.key === "Escape") setCustomH(null);
+          },
+          className: "w-16 rounded border border-[var(--border-default)] bg-[var(--bg-input)] px-1 py-0.5 text-center text-[12px] text-[var(--text-primary)] outline-none focus:border-[var(--brand-primary)]"
+        }
+      )
+    ] }),
+    SEP,
+    /* @__PURE__ */ jsx5(ColorSwatch, { label: "BG", value: page.background, onCommit: (v) => onSetPageProps({ background: v }) }),
+    SEP,
+    /* @__PURE__ */ jsx5(BleedControls, { page, canWrite, onSetPageProps })
+  ] });
+}
+function BleedControls({ page, canWrite, onSetPageProps }) {
+  const bleed = page.bleed;
+  function setBleedSide(side, value) {
+    const current = bleed ?? { top: 0, right: 0, bottom: 0, left: 0 };
+    onSetPageProps({ bleed: { ...current, [side]: value } });
+  }
+  if (!bleed) {
+    return /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        disabled: !canWrite,
+        onClick: () => onSetPageProps({ bleed: { top: 3, right: 3, bottom: 3, left: 3 } }),
+        className: BTN2,
+        title: "Enable bleed",
+        children: /* @__PURE__ */ jsx5(BleedGlyph, { className: "h-3.5 w-3.5" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(Fragment4, { children: [
+    ["top", "right", "bottom", "left"].map((side) => /* @__PURE__ */ jsx5(
+      NumberInput,
+      {
+        label: `Bleed ${side[0].toUpperCase()}`,
+        value: bleed[side],
+        min: 0,
+        onCommit: (v) => setBleedSide(side, v),
+        className: "w-12"
+      },
+      side
+    )),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        disabled: !canWrite,
+        onClick: () => onSetPageProps({ bleed: null }),
+        className: BTN2,
+        title: "Remove bleed",
+        children: "\xD7"
+      }
+    )
+  ] });
+}
+
+// src/design-canvas-react/components/ZoomControls.tsx
+import { jsx as jsx6, 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))));
+  }
+  function zoomIn() {
+    onZoom(Math.min(MAX, parseFloat((zoom + STEP).toFixed(4))));
+  }
+  function resetHundred() {
+    onZoom(1);
+  }
+  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 px-2", children: [
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Fit page to viewport",
+        onClick: onFit,
+        className: BTN3,
+        title: "Fit page (F)",
+        children: /* @__PURE__ */ jsx6(ZoomFitGlyph, { className: "h-3.5 w-3.5" })
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "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" })
+      }
+    ),
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        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)]",
+        title: "Reset to 100%",
+        children: [
+          Math.round(zoom * 100),
+          "%"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Zoom in",
+        onClick: zoomIn,
+        disabled: zoom >= MAX,
+        className: BTN3,
+        children: /* @__PURE__ */ jsx6("span", { className: "text-sm leading-none", children: "+" })
+      }
+    )
+  ] });
+}
+
+// src/design-canvas-react/components/DesignCanvas.tsx
+import { jsx as jsx7, jsxs as jsxs7 } 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)}`}`;
+}
+function isTypingTarget(target) {
+  return target instanceof Element && target.closest('input, textarea, select, [contenteditable="true"]') !== null;
+}
+function useCommitCommand(stack, onApplyOperations, canWrite, setError) {
+  return useCallback2(
+    (command) => {
+      if (!canWrite) return;
+      try {
+        stack.execute(command);
+      } catch (error) {
+        setError(error instanceof Error ? error.message : String(error));
+        return;
+      }
+      const ops = command.operations();
+      void onApplyOperations(ops).then((result) => {
+        if (result.document) {
+          stack.reset(result.document);
+        }
+      }).catch((error) => {
+        stack.rollback(command);
+        setError(error instanceof Error ? error.message : String(error));
+      });
+    },
+    [stack, onApplyOperations, canWrite, setError]
+  );
+}
+function DesignCanvas({
+  document: initialDocument,
+  rev: initialRev,
+  canWrite,
+  onApplyOperations,
+  onSelectionChange,
+  renderAgentPanel,
+  renderSidePanel,
+  onExport,
+  className,
+  renderWorkspace,
+  renderThumbnail
+}) {
+  const stack = useMemo(
+    () => createSceneCommandStack(initialDocument, initialDocument.pages[0]?.id ?? "page-1"),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const editorState = useSyncExternalStore(stack.subscribe, stack.getState, stack.getState);
+  const appliedDocumentRef = useRef4(initialDocument);
+  useEffect2(() => {
+    if (appliedDocumentRef.current === initialDocument) return;
+    appliedDocumentRef.current = initialDocument;
+    stack.reset(initialDocument);
+  }, [initialDocument, stack]);
+  const [commitError, setCommitError] = useState4(null);
+  const commit = useCommitCommand(stack, onApplyOperations, canWrite, setCommitError);
+  const selectionChangeRef = useRef4(onSelectionChange);
+  selectionChangeRef.current = onSelectionChange;
+  useEffect2(() => {
+    const page = editorState.document.pages.find((p) => p.id === editorState.activePageId);
+    if (!page) return;
+    const selected = editorState.selectedElementIds.map((id) => page.elements.find((el) => el.id === id)).filter((el) => el !== void 0);
+    selectionChangeRef.current?.(selected);
+  }, [editorState.selectedElementIds, editorState.activePageId, editorState.document]);
+  const fitRef = useRef4(null);
+  const setZoom = useCallback2((zoom) => stack.setView({ zoom }), [stack]);
+  const setPan = useCallback2((panX, panY) => stack.setView({ panX, panY }), [stack]);
+  const setActivePage = useCallback2((activePageId) => stack.setView({ activePageId, selectedElementIds: [] }), [stack]);
+  const setSelectedElements = useCallback2(
+    (ids, additive) => {
+      if (!additive) {
+        stack.setView({ selectedElementIds: ids });
+        return;
+      }
+      const current = new Set(editorState.selectedElementIds);
+      for (const id of ids) {
+        if (current.has(id)) current.delete(id);
+        else current.add(id);
+      }
+      stack.setView({ selectedElementIds: [...current] });
+    },
+    [stack, editorState.selectedElementIds]
+  );
+  const handleSetAttrs = useCallback2(
+    (elementId, attrs) => {
+      const page = requirePage(editorState.document, editorState.activePageId);
+      const found = findElement(page, elementId);
+      if (!found) return;
+      if (found.element.locked) return;
+      const priorAttrs = Object.fromEntries(
+        Object.keys(attrs).map((k) => [k, found.element[k]])
+      );
+      commit(
+        setAttrsCommand({
+          pageId: editorState.activePageId,
+          elementId,
+          attrs,
+          priorAttrs
+        })
+      );
+    },
+    [commit, editorState.activePageId, editorState.document]
+  );
+  const handleMultiSetAttrs = useCallback2(
+    (patches) => {
+      const page = requirePage(editorState.document, editorState.activePageId);
+      const entries = patches.flatMap(({ elementId, attrs }) => {
+        const found = findElement(page, elementId);
+        if (!found || found.element.locked) return [];
+        const priorAttrs = Object.fromEntries(
+          Object.keys(attrs).map((k) => [k, found.element[k]])
+        );
+        return [{ pageId: editorState.activePageId, elementId, attrs, priorAttrs }];
+      });
+      if (entries.length === 0) return;
+      commit(multiSetAttrsCommand(entries));
+    },
+    [commit, editorState.activePageId, editorState.document]
+  );
+  const handleReorder = useCallback2(
+    (elementId, toIndex, ownerLength, direction) => {
+      const page = requirePage(editorState.document, editorState.activePageId);
+      const found = findElement(page, elementId);
+      if (!found) return;
+      const currentIndex = found.index;
+      const target = direction === "front" ? topIndex(ownerLength) : direction === "back" ? 0 : direction === "forward" ? indexForward(currentIndex, ownerLength) : indexBackward(currentIndex);
+      const clamped = clampIndex(target, ownerLength);
+      if (clamped === currentIndex) return;
+      commit(reorderElementCommand({ pageId: editorState.activePageId, elementId, toIndex: clamped }));
+    },
+    [commit, editorState.activePageId, editorState.document]
+  );
+  const handleDelete = useCallback2(
+    (elementIds) => {
+      for (const elementId of elementIds) {
+        commit(
+          deleteElementCommand({
+            document: editorState.document,
+            pageId: editorState.activePageId,
+            elementId
+          })
+        );
+      }
+    },
+    [commit, editorState.document, editorState.activePageId]
+  );
+  const handleGroup = useCallback2(
+    (elementIds) => {
+      commit(
+        groupElementsCommand({
+          document: editorState.document,
+          pageId: editorState.activePageId,
+          elementIds,
+          groupId: mintId()
+        })
+      );
+    },
+    [commit, editorState.document, editorState.activePageId]
+  );
+  const handleUngroup = useCallback2(
+    (groupId) => {
+      commit(ungroupElementCommand({ document: editorState.document, pageId: editorState.activePageId, groupId }));
+    },
+    [commit, editorState.document, editorState.activePageId]
+  );
+  const handleBindSlot = useCallback2(
+    (elementId, slot) => {
+      commit(bindSlotCommand({ document: editorState.document, pageId: editorState.activePageId, elementId, slot }));
+    },
+    [commit, editorState.document, editorState.activePageId]
+  );
+  const handleSetPageProps = useCallback2(
+    (props) => {
+      commit(setPagePropsCommand({ document: editorState.document, pageId: editorState.activePageId, props }));
+    },
+    [commit, editorState.document, editorState.activePageId]
+  );
+  const handleSetPageGuides = useCallback2(
+    (guides) => {
+      commit(setPageGuidesCommand({ document: editorState.document, pageId: editorState.activePageId, guides }));
+    },
+    [commit, editorState.document, editorState.activePageId]
+  );
+  const handleAddPage = useCallback2(() => {
+    const pageId = mintId();
+    commit(addPageCommand({ pageId }));
+    setActivePage(pageId);
+  }, [commit, setActivePage]);
+  const handleDuplicatePage = useCallback2(
+    (sourcePageId) => {
+      const pageId = mintId();
+      commit(duplicatePageCommand({ document: editorState.document, sourcePageId, pageId }));
+      setActivePage(pageId);
+    },
+    [commit, editorState.document, setActivePage]
+  );
+  const handleDeletePage = useCallback2(
+    (pageId) => {
+      commit(deletePageCommand({ document: editorState.document, pageId }));
+    },
+    [commit, editorState.document]
+  );
+  const handleReorderPage = useCallback2(
+    (pageId, toIndex) => {
+      commit(reorderPageCommand({ pageId, toIndex }));
+    },
+    [commit]
+  );
+  const handleUndo = useCallback2(() => {
+    if (!canWrite || !stack.canUndo()) return;
+    let command;
+    try {
+      command = stack.undo();
+    } catch (error) {
+      setCommitError(`Undo failed: ${error instanceof Error ? error.message : String(error)}`);
+      return;
+    }
+    void onApplyOperations(command.inverseOperations()).then((result) => {
+      if (result.document) stack.reset(result.document);
+    }).catch((error) => {
+      if (stack.canRedo()) {
+        try {
+          stack.redo();
+        } catch {
+        }
+      }
+      setCommitError(error instanceof Error ? error.message : String(error));
+    });
+  }, [stack, canWrite, onApplyOperations]);
+  const handleRedo = useCallback2(() => {
+    if (!canWrite || !stack.canRedo()) return;
+    let command;
+    try {
+      command = stack.redo();
+    } catch (error) {
+      setCommitError(`Redo failed: ${error instanceof Error ? error.message : String(error)}`);
+      return;
+    }
+    void onApplyOperations(command.operations()).then((result) => {
+      if (result.document) stack.reset(result.document);
+    }).catch((error) => {
+      if (stack.canUndo()) {
+        try {
+          stack.undo();
+        } catch {
+        }
+      }
+      setCommitError(error instanceof Error ? error.message : String(error));
+    });
+  }, [stack, canWrite, onApplyOperations]);
+  useEffect2(() => {
+    function onKeyDown(event) {
+      const mod = event.metaKey || event.ctrlKey;
+      if (mod && !isTypingTarget(event.target)) {
+        if (event.key.toLowerCase() === "z") {
+          event.preventDefault();
+          if (event.shiftKey) handleRedo();
+          else handleUndo();
+          return;
+        }
+        if (event.key.toLowerCase() === "y") {
+          event.preventDefault();
+          handleRedo();
+          return;
+        }
+      }
+      if ((event.key === "Delete" || event.key === "Backspace") && !isTypingTarget(event.target)) {
+        if (!canWrite || editorState.selectedElementIds.length === 0) return;
+        event.preventDefault();
+        handleDelete(editorState.selectedElementIds);
+        return;
+      }
+      if (event.key.toLowerCase() === "f" && !isTypingTarget(event.target)) {
+        event.preventDefault();
+        fitRef.current?.();
+      }
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  });
+  const activePage = useMemo(
+    () => editorState.document.pages.find((p) => p.id === editorState.activePageId),
+    [editorState.document, editorState.activePageId]
+  );
+  const selectedElements = useMemo(() => {
+    if (!activePage) return [];
+    return editorState.selectedElementIds.map((id) => activePage.elements.find((el) => el.id === id)).filter((el) => el !== void 0);
+  }, [activePage, editorState.selectedElementIds]);
+  if (!activePage) {
+    return /* @__PURE__ */ jsx7("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,
+    right: activePage.bleed.right * editorState.zoom,
+    bottom: activePage.bleed.bottom * editorState.zoom,
+    left: activePage.bleed.left * editorState.zoom
+  } : null;
+  return /* @__PURE__ */ jsxs7("div", { className: `flex h-full min-h-0 bg-[var(--bg-input)] text-[var(--text-primary)] ${className ?? ""}`, children: [
+    renderSidePanel ? /* @__PURE__ */ jsx7("aside", { className: "flex w-64 shrink-0 flex-col overflow-hidden border-r border-[var(--border-default)]", children: renderSidePanel() }) : null,
+    /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx7(
+        Toolbar,
+        {
+          page: activePage,
+          selectedElements,
+          canWrite,
+          canUndo: stack.canUndo(),
+          canRedo: stack.canRedo(),
+          gridEnabled: editorState.gridEnabled,
+          snapEnabled: editorState.snapEnabled,
+          showRulers: editorState.showRulers,
+          showBleed: editorState.showBleed,
+          onUndo: handleUndo,
+          onRedo: handleRedo,
+          onToggleGrid: () => stack.setView({ gridEnabled: !editorState.gridEnabled }),
+          onToggleSnap: () => stack.setView({ snapEnabled: !editorState.snapEnabled }),
+          onToggleRulers: () => stack.setView({ showRulers: !editorState.showRulers }),
+          onToggleBleed: () => stack.setView({ showBleed: !editorState.showBleed }),
+          onSetAttrs: handleSetAttrs,
+          onSetPageProps: handleSetPageProps,
+          onSetPageGuides: handleSetPageGuides,
+          onReorder: handleReorder,
+          onGroup: handleGroup,
+          onUngroup: handleUngroup,
+          onDelete: handleDelete,
+          onBindSlot: handleBindSlot
+        }
+      ),
+      commitError ? /* @__PURE__ */ jsxs7(
+        "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",
+          role: "alert",
+          children: [
+            /* @__PURE__ */ jsx7("span", { className: "min-w-0 truncate", children: commitError }),
+            /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: () => setCommitError(null),
+                className: "shrink-0 underline-offset-2 hover:underline",
+                children: "Dismiss"
+              }
+            )
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs7("div", { className: "relative min-h-0 flex-1", children: [
+        /* @__PURE__ */ jsx7(
+          Rulers,
+          {
+            pageWidth: activePage.width,
+            pageHeight: activePage.height,
+            zoom: editorState.zoom,
+            scrollLeft: -editorState.panX / editorState.zoom,
+            scrollTop: -editorState.panY / editorState.zoom,
+            showRulers: editorState.showRulers,
+            guides: activePage.guides,
+            onGuidesChange: handleSetPageGuides
+          }
+        ),
+        bleedScreen && activePage.bleed ? /* @__PURE__ */ jsx7(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0 z-10 overflow-hidden",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx7(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: editorState.panX,
+                  top: editorState.panY
+                },
+                children: /* @__PURE__ */ jsx7(
+                  BleedTrimOverlay,
+                  {
+                    pageWidthPx: activePage.width * editorState.zoom,
+                    pageHeightPx: activePage.height * editorState.zoom,
+                    bleed: bleedScreen
+                  }
+                )
+              }
+            )
+          }
+        ) : null,
+        renderWorkspace({
+          document: editorState.document,
+          activePageId: editorState.activePageId,
+          selectedElementIds: editorState.selectedElementIds,
+          zoom: editorState.zoom,
+          panX: editorState.panX,
+          panY: editorState.panY,
+          gridEnabled: editorState.gridEnabled,
+          gridSize: editorState.gridSize,
+          snapEnabled: editorState.snapEnabled,
+          showBleed: editorState.showBleed,
+          canWrite,
+          stack,
+          activePage,
+          onFitRef: fitRef,
+          onZoomChange: setZoom,
+          onPanChange: setPan,
+          onSelectElements: setSelectedElements
+        })
+      ] }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-stretch border-t border-[var(--border-default)]", children: [
+        /* @__PURE__ */ jsx7("div", { className: "min-w-0 flex-1 overflow-hidden", children: /* @__PURE__ */ jsx7(
+          PagesStrip,
+          {
+            pages: editorState.document.pages,
+            activePageId: editorState.activePageId,
+            canWrite,
+            renderThumbnail,
+            onSelectPage: setActivePage,
+            onAddPage: handleAddPage,
+            onDuplicatePage: handleDuplicatePage,
+            onDeletePage: handleDeletePage,
+            onReorderPage: handleReorderPage
+          }
+        ) }),
+        /* @__PURE__ */ jsx7("div", { className: "flex shrink-0 items-center border-l border-[var(--border-default)]", children: /* @__PURE__ */ jsx7(
+          ZoomControls,
+          {
+            zoom: editorState.zoom,
+            onZoom: setZoom,
+            onFit: () => fitRef.current?.()
+          }
+        ) })
+      ] })
+    ] }),
+    renderAgentPanel ? /* @__PURE__ */ jsx7("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,
+  BleedTrimOverlay,
+  EyeGlyph,
+  EyeOffGlyph,
+  LockGlyph,
+  UnlockGlyph,
+  GroupGlyph,
+  RectGlyph,
+  EllipseGlyph,
+  LineGlyph,
+  TextGlyph,
+  ImageGlyph,
+  VideoGlyph,
+  SlotGlyph,
+  PagesStrip,
+  Rulers,
+  Toolbar,
+  ZoomControls,
+  DesignCanvas,
+  DesignCanvas_default
+};
+//# sourceMappingURL=chunk-F5KTWRO7.js.map