@tangle-network/agent-app 0.11.1 → 0.13.0

package/dist/chunk-2Q73HGDI.js

@@ -0,0 +1,1743 @@
+import {
+  BleedTrimOverlay,
+  DesignCanvas,
+  addElementCommand,
+  createSceneCommandStack,
+  deleteElementCommand,
+  groupElementsCommand,
+  multiSetAttrsCommand,
+  setAttrsCommand,
+  ungroupElementCommand
+} from "./chunk-F5KTWRO7.js";
+import {
+  boundsIntersect,
+  elementAabb,
+  findElement
+} from "./chunk-JZAJE3JL.js";
+
+// src/design-canvas-react/components/Workspace.tsx
+import {
+  useCallback,
+  useEffect as useEffect4,
+  useLayoutEffect,
+  useMemo,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import { Stage, Layer as Layer4, Rect as Rect2, Group as Group2 } from "react-konva";
+
+// src/design-canvas-react/engine/snap.ts
+var KIND_PRIORITY = {
+  "guide": 0,
+  "page-edge": 1,
+  "page-center": 2,
+  "element-edge": 3,
+  "element-center": 4,
+  "grid": 5
+};
+function createSnapEngine() {
+  return {
+    collectTargets(state, excludeIds) {
+      const page = state.document.pages.find((p) => p.id === state.activePageId);
+      if (!page) throw new Error(`collectTargets: active page ${state.activePageId} not found`);
+      const vertical = [];
+      const horizontal = [];
+      const excludeSet = new Set(excludeIds);
+      vertical.push({ position: 0, kind: "page-edge" });
+      vertical.push({ position: page.width, kind: "page-edge" });
+      vertical.push({ position: page.width / 2, kind: "page-center" });
+      horizontal.push({ position: 0, kind: "page-edge" });
+      horizontal.push({ position: page.height, kind: "page-edge" });
+      horizontal.push({ position: page.height / 2, kind: "page-center" });
+      for (const pos of page.guides.vertical) {
+        vertical.push({ position: pos, kind: "guide" });
+      }
+      for (const pos of page.guides.horizontal) {
+        horizontal.push({ position: pos, kind: "guide" });
+      }
+      collectElementTargets(page.elements, excludeSet, vertical, horizontal);
+      return { vertical, horizontal };
+    },
+    apply(bounds, targets, thresholdPx, zoom) {
+      if (!Number.isFinite(zoom) || zoom <= 0) {
+        throw new Error(`snap.apply: zoom must be a positive finite number, got ${zoom}`);
+      }
+      if (!Number.isFinite(thresholdPx) || thresholdPx < 0) {
+        throw new Error(`snap.apply: thresholdPx must be a non-negative finite number, got ${thresholdPx}`);
+      }
+      const threshold = thresholdPx / zoom;
+      const snappedX = snapAxis(bounds.x, bounds.x + bounds.width / 2, bounds.x + bounds.width, targets.vertical, threshold);
+      const snappedY = snapAxis(bounds.y, bounds.y + bounds.height / 2, bounds.y + bounds.height, targets.horizontal, threshold);
+      return {
+        x: snappedX !== null ? snappedX.docPosition - snappedX.elementOffset : bounds.x,
+        y: snappedY !== null ? snappedY.docPosition - snappedY.elementOffset : bounds.y,
+        activeVertical: snappedX !== null ? snappedX.target : null,
+        activeHorizontal: snappedY !== null ? snappedY.target : null
+      };
+    }
+  };
+}
+function collectGridTargets(bounds, gridSize, page, thresholdDocPx) {
+  if (!Number.isFinite(gridSize) || gridSize <= 0) {
+    throw new Error(`collectGridTargets: gridSize must be positive finite, got ${gridSize}`);
+  }
+  const vertical = [];
+  const horizontal = [];
+  const xMin = Math.floor((bounds.x - thresholdDocPx) / gridSize) * gridSize;
+  const xMax = Math.ceil((bounds.x + bounds.width + thresholdDocPx) / gridSize) * gridSize;
+  for (let x = xMin; x <= xMax; x += gridSize) {
+    if (x >= 0 && x <= page.width) vertical.push({ position: x, kind: "grid" });
+  }
+  const yMin = Math.floor((bounds.y - thresholdDocPx) / gridSize) * gridSize;
+  const yMax = Math.ceil((bounds.y + bounds.height + thresholdDocPx) / gridSize) * gridSize;
+  for (let y = yMin; y <= yMax; y += gridSize) {
+    if (y >= 0 && y <= page.height) horizontal.push({ position: y, kind: "grid" });
+  }
+  return { vertical, horizontal };
+}
+function snapAxis(start, center, end, targets, threshold) {
+  const candidates = [
+    { value: start, offset: 0 },
+    { value: center, offset: center - start },
+    { value: end, offset: end - start }
+  ];
+  let best = null;
+  let bestDistance = Infinity;
+  let bestPriority = Infinity;
+  for (const { value, offset } of candidates) {
+    for (const target of targets) {
+      const distance = Math.abs(target.position - value);
+      if (distance > threshold) continue;
+      const priority = KIND_PRIORITY[target.kind];
+      if (distance < bestDistance || distance === bestDistance && priority < bestPriority) {
+        bestDistance = distance;
+        bestPriority = priority;
+        best = { target, docPosition: target.position, elementOffset: offset };
+      }
+    }
+  }
+  return best;
+}
+function collectElementTargets(elements, excludeIds, vertical, horizontal) {
+  for (const el of elements) {
+    if (!el.visible || el.locked) continue;
+    if (excludeIds.has(el.id)) continue;
+    const aabb = elementAabb(el);
+    vertical.push({ position: aabb.x, kind: "element-edge" });
+    vertical.push({ position: aabb.x + aabb.width / 2, kind: "element-center" });
+    vertical.push({ position: aabb.x + aabb.width, kind: "element-edge" });
+    horizontal.push({ position: aabb.y, kind: "element-edge" });
+    horizontal.push({ position: aabb.y + aabb.height / 2, kind: "element-center" });
+    horizontal.push({ position: aabb.y + aabb.height, kind: "element-edge" });
+    if (el.kind === "group") {
+      collectElementTargets(el.children, excludeIds, vertical, horizontal);
+    }
+  }
+}
+
+// src/design-canvas-react/engine/zoom-pan.ts
+function createZoomPanMath(config) {
+  const { minZoom, maxZoom } = config;
+  if (!Number.isFinite(minZoom) || minZoom <= 0) {
+    throw new Error(`minZoom must be a positive finite number, got ${minZoom}`);
+  }
+  if (!Number.isFinite(maxZoom) || maxZoom <= minZoom) {
+    throw new Error(`maxZoom must be finite and greater than minZoom (${minZoom}), got ${maxZoom}`);
+  }
+  return {
+    minZoom,
+    maxZoom,
+    zoomAtPoint(state, factor, screenX, screenY) {
+      if (!Number.isFinite(factor) || factor <= 0) {
+        throw new Error(`zoomAtPoint: factor must be a positive finite number, got ${factor}`);
+      }
+      if (!Number.isFinite(screenX) || !Number.isFinite(screenY)) {
+        throw new Error(`zoomAtPoint: screenX/screenY must be finite numbers`);
+      }
+      if (!Number.isFinite(state.zoom) || state.zoom <= 0) {
+        throw new Error(`zoomAtPoint: state.zoom must be a positive finite number, got ${state.zoom}`);
+      }
+      const newZoom = Math.min(maxZoom, Math.max(minZoom, state.zoom * factor));
+      const docX = (screenX - state.panX) / state.zoom;
+      const docY = (screenY - state.panY) / state.zoom;
+      const panX = screenX - docX * newZoom;
+      const panY = screenY - docY * newZoom;
+      return { zoom: newZoom, panX, panY };
+    },
+    fitPage(page, viewport, paddingPx = 48) {
+      if (!Number.isFinite(page.width) || page.width <= 0) {
+        throw new Error(`fitPage: page.width must be a positive finite number, got ${page.width}`);
+      }
+      if (!Number.isFinite(page.height) || page.height <= 0) {
+        throw new Error(`fitPage: page.height must be a positive finite number, got ${page.height}`);
+      }
+      if (!Number.isFinite(viewport.width) || viewport.width <= 0) {
+        throw new Error(`fitPage: viewport.width must be a positive finite number, got ${viewport.width}`);
+      }
+      if (!Number.isFinite(viewport.height) || viewport.height <= 0) {
+        throw new Error(`fitPage: viewport.height must be a positive finite number, got ${viewport.height}`);
+      }
+      if (!Number.isFinite(paddingPx) || paddingPx < 0) {
+        throw new Error(`fitPage: paddingPx must be a non-negative finite number, got ${paddingPx}`);
+      }
+      const availW = viewport.width - paddingPx * 2;
+      const availH = viewport.height - paddingPx * 2;
+      const zoom = Math.min(maxZoom, Math.max(minZoom, Math.min(availW / page.width, availH / page.height)));
+      const panX = (viewport.width - page.width * zoom) / 2;
+      const panY = (viewport.height - page.height * zoom) / 2;
+      return { zoom, panX, panY };
+    },
+    documentToScreen(state, x, y) {
+      return { x: x * state.zoom + state.panX, y: y * state.zoom + state.panY };
+    },
+    screenToDocument(state, x, y) {
+      if (!Number.isFinite(state.zoom) || state.zoom === 0) {
+        throw new Error(`screenToDocument: zoom must be a non-zero finite number, got ${state.zoom}`);
+      }
+      return { x: (x - state.panX) / state.zoom, y: (y - state.panY) / state.zoom };
+    }
+  };
+}
+
+// src/design-canvas-react/engine/selection.ts
+function marqueeSelect(page, rect, opts = {}) {
+  assertValidBounds(rect, "marqueeSelect rect");
+  const result = [];
+  collectMarqueeIds(page.elements, rect, opts.requireFullContainment ?? false, result);
+  return result;
+}
+function collectMarqueeIds(elements, rect, requireContainment, result) {
+  for (const el of elements) {
+    if (!el.visible || el.locked) continue;
+    const aabb = elementAabb(el);
+    if (el.kind === "group") {
+      if (boundsIntersect(rect, aabb)) {
+        collectMarqueeIds(el.children, rect, requireContainment, result);
+      }
+      continue;
+    }
+    const hit = requireContainment ? boundsContain(rect, aabb) : boundsIntersect(rect, aabb);
+    if (hit) result.push(el.id);
+  }
+}
+function boundsContain(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.width <= outer.x + outer.width && inner.y + inner.height <= outer.y + outer.height;
+}
+var NUDGE_NORMAL_PX = 1;
+var NUDGE_SHIFT_PX = 10;
+function nudgeDelta(key, shift) {
+  const step = shift ? NUDGE_SHIFT_PX : NUDGE_NORMAL_PX;
+  switch (key) {
+    case "ArrowLeft":
+      return { dx: -step, dy: 0 };
+    case "ArrowRight":
+      return { dx: step, dy: 0 };
+    case "ArrowUp":
+      return { dx: 0, dy: -step };
+    case "ArrowDown":
+      return { dx: 0, dy: step };
+  }
+}
+var DUPLICATE_OFFSET = { dx: 10, dy: 10 };
+function assertValidBounds(bounds, label) {
+  if (!Number.isFinite(bounds.x) || !Number.isFinite(bounds.y) || !Number.isFinite(bounds.width) || !Number.isFinite(bounds.height)) {
+    throw new Error(`${label}: all fields must be finite numbers`);
+  }
+}
+
+// src/design-canvas-react/components/ElementNode.tsx
+import { useEffect, useRef, useState } from "react";
+import { Group, Rect, Ellipse, Line, Text, Image as KonvaImage } from "react-konva";
+
+// src/design-canvas-react/components/transform-math.ts
+function bakeRectTransform(node) {
+  return {
+    x: node.x,
+    y: node.y,
+    width: Math.abs(node.width * node.scaleX),
+    height: Math.abs(node.height * node.scaleY),
+    rotation: node.rotation
+  };
+}
+function bakeLineTransform(node) {
+  const points = node.points.map((v, i) => i % 2 === 0 ? v * node.scaleX : v * node.scaleY);
+  return {
+    x: node.x,
+    y: node.y,
+    // Width/height for a line derive from its points; baking is for points only.
+    // We still return them so callers have a uniform shape.
+    width: node.width * Math.abs(node.scaleX),
+    height: node.height * Math.abs(node.scaleY),
+    rotation: node.rotation,
+    points
+  };
+}
+function bakeTextTransform(node) {
+  return {
+    x: node.x,
+    y: node.y,
+    width: Math.abs(node.width * node.scaleX),
+    // Height is excluded — it re-derives from content.
+    height: node.height,
+    rotation: node.rotation,
+    fontSize: Math.max(1, node.fontSize * Math.abs(node.scaleY))
+  };
+}
+function ellipseCenterFromTopLeft(topLeft) {
+  return {
+    x: topLeft.x + topLeft.width / 2,
+    y: topLeft.y + topLeft.height / 2,
+    radiusX: topLeft.width / 2,
+    radiusY: topLeft.height / 2
+  };
+}
+function ellipseTopLeftFromCenter(center) {
+  return {
+    x: center.x - center.radiusX,
+    y: center.y - center.radiusY,
+    width: center.radiusX * 2,
+    height: center.radiusY * 2
+  };
+}
+function normalizeMarquee(startX, startY, endX, endY) {
+  const x = Math.min(startX, endX);
+  const y = Math.min(startY, endY);
+  return {
+    x,
+    y,
+    width: Math.abs(endX - startX),
+    height: Math.abs(endY - startY)
+  };
+}
+function computeTextOverlayPosition(input) {
+  const left = input.panX + input.elementX * input.zoom + input.stageLeft;
+  const top = input.panY + input.elementY * input.zoom + input.stageTop;
+  return {
+    left,
+    top,
+    width: input.elementWidth * input.zoom,
+    fontSize: input.elementFontSize * input.zoom
+  };
+}
+var SNAP_ANGLES_DEG = [0, 45, 90, 135, 180, 225, 270, 315, 360];
+function snapRotation(angleDeg, thresholdDeg = 5) {
+  const normalized = (angleDeg % 360 + 360) % 360;
+  let best = normalized;
+  let bestDist = Infinity;
+  for (const snap of SNAP_ANGLES_DEG) {
+    const dist = Math.abs(normalized - snap);
+    if (dist < bestDist) {
+      bestDist = dist;
+      best = snap % 360;
+    }
+  }
+  return bestDist <= thresholdDeg ? best : normalized;
+}
+function nudgeDelta2(key, shift) {
+  const step = shift ? 10 : 1;
+  switch (key) {
+    case "ArrowLeft":
+      return { dx: -step, dy: 0 };
+    case "ArrowRight":
+      return { dx: step, dy: 0 };
+    case "ArrowUp":
+      return { dx: 0, dy: -step };
+    case "ArrowDown":
+      return { dx: 0, dy: step };
+  }
+}
+function gridVisible(gridSize, zoom, minScreenPx = 4) {
+  return gridSize * zoom >= minScreenPx;
+}
+
+// src/design-canvas-react/components/ElementNode.tsx
+import { jsx } from "react/jsx-runtime";
+var IMAGE_CACHE_MAX = 256;
+var imageCache = /* @__PURE__ */ new Map();
+function imageCacheSet(src, img) {
+  if (imageCache.size >= IMAGE_CACHE_MAX) {
+    const oldest = imageCache.keys().next().value;
+    if (oldest !== void 0) imageCache.delete(oldest);
+  }
+  imageCache.set(src, img);
+}
+function useImage(src) {
+  const [, setVersion] = useState(0);
+  useEffect(() => {
+    if (imageCache.has(src)) return;
+    const img = new window.Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      imageCacheSet(src, img);
+      setVersion((v) => v + 1);
+    };
+    img.onerror = () => {
+      imageCacheSet(src, img);
+      setVersion((v) => v + 1);
+    };
+    img.src = src;
+  }, [src]);
+  return imageCache.get(src) ?? null;
+}
+function ElementNode(props) {
+  const { element } = props;
+  if (!element.visible) return null;
+  switch (element.kind) {
+    case "rect":
+      return /* @__PURE__ */ jsx(RectNode, { ...props, element });
+    case "ellipse":
+      return /* @__PURE__ */ jsx(EllipseNode, { ...props, element });
+    case "line":
+      return /* @__PURE__ */ jsx(LineNode, { ...props, element });
+    case "text":
+      return /* @__PURE__ */ jsx(TextNode, { ...props, element });
+    case "image":
+      return /* @__PURE__ */ jsx(ImageNode, { ...props, element });
+    case "video":
+      return /* @__PURE__ */ jsx(VideoNode, { ...props, element });
+    case "group":
+      return /* @__PURE__ */ jsx(GroupNode, { ...props, element });
+  }
+}
+function useDragBindings(props, originX, originY) {
+  const { element, onClick, onDragStart, onDragMove, onDragEnd, onDoubleClick } = props;
+  const isDraggable = !element.locked && !!onDragEnd;
+  const originRef = useRef({ x: originX, y: originY });
+  originRef.current = { x: originX, y: originY };
+  return {
+    draggable: isDraggable,
+    // locked elements still receive click for selection; listening must be true.
+    listening: true,
+    onDragStart: isDraggable ? () => {
+      onDragStart?.(element.id);
+    } : void 0,
+    onDragMove: isDraggable ? (e) => {
+      onDragMove?.(element.id, e.target.x() - originRef.current.x, e.target.y() - originRef.current.y);
+    } : void 0,
+    onDragEnd: isDraggable ? (e) => {
+      onDragEnd?.(element.id, e.target.x(), e.target.y());
+    } : void 0,
+    onClick: () => onClick?.(element.id),
+    onDblClick: () => onDoubleClick?.(element.id)
+  };
+}
+function RectNode({ element, ...rest }) {
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  return /* @__PURE__ */ jsx(
+    Rect,
+    {
+      name: element.id,
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      height: element.height,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      fill: element.fill,
+      stroke: element.stroke,
+      strokeWidth: element.strokeWidth,
+      cornerRadius: element.cornerRadius ?? 0,
+      ...drag
+    }
+  );
+}
+function EllipseNode({ element, ...rest }) {
+  const { x: cx, y: cy, radiusX, radiusY } = ellipseCenterFromTopLeft(element);
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  return /* @__PURE__ */ jsx(
+    Ellipse,
+    {
+      name: element.id,
+      x: cx,
+      y: cy,
+      radiusX,
+      radiusY,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      fill: element.fill,
+      stroke: element.stroke,
+      strokeWidth: element.strokeWidth,
+      ...drag
+    }
+  );
+}
+function LineNode({ element, ...rest }) {
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  return /* @__PURE__ */ jsx(
+    Line,
+    {
+      name: element.id,
+      x: element.x,
+      y: element.y,
+      points: element.points,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      stroke: element.stroke,
+      strokeWidth: element.strokeWidth,
+      dash: element.dash,
+      ...drag
+    }
+  );
+}
+var FONT_STYLE_MAP = {
+  "normal": { fontStyle: "normal", fontVariant: "normal", fontWeight: "normal" },
+  "bold": { fontStyle: "normal", fontVariant: "normal", fontWeight: "bold" },
+  "italic": { fontStyle: "italic", fontVariant: "normal", fontWeight: "normal" },
+  "bold italic": { fontStyle: "italic", fontVariant: "normal", fontWeight: "bold" }
+};
+function TextNode({ element, ...rest }) {
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { fontStyle, fontWeight } = FONT_STYLE_MAP[element.fontStyle];
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      name: element.id,
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      text: element.text,
+      fontFamily: element.fontFamily,
+      fontSize: element.fontSize,
+      fontStyle: `${fontStyle} ${fontWeight}`.trim(),
+      fill: element.fill,
+      align: element.align,
+      lineHeight: element.lineHeight,
+      letterSpacing: element.letterSpacing,
+      ...drag
+    }
+  );
+}
+var BROKEN_FILL = "#e5e7eb";
+var BROKEN_STROKE = "#9ca3af";
+function ImageNode({ element, ...rest }) {
+  const img = useImage(element.src);
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  if (!img || !img.complete || img.naturalWidth === 0) {
+    return /* @__PURE__ */ jsx(
+      Rect,
+      {
+        name: element.id,
+        x: element.x,
+        y: element.y,
+        width: element.width,
+        height: element.height,
+        rotation: element.rotation,
+        opacity: element.opacity,
+        fill: BROKEN_FILL,
+        stroke: BROKEN_STROKE,
+        strokeWidth: 1,
+        ...drag
+      }
+    );
+  }
+  let cropProps = {};
+  if (element.fit === "cover") {
+    const srcAspect = img.naturalWidth / img.naturalHeight;
+    const dstAspect = element.width / element.height;
+    if (srcAspect > dstAspect) {
+      const visibleW = img.naturalHeight * dstAspect;
+      cropProps = {
+        crop: {
+          x: (img.naturalWidth - visibleW) / 2,
+          y: 0,
+          width: visibleW,
+          height: img.naturalHeight
+        }
+      };
+    } else {
+      const visibleH = img.naturalWidth / dstAspect;
+      cropProps = {
+        crop: {
+          x: 0,
+          y: (img.naturalHeight - visibleH) / 2,
+          width: img.naturalWidth,
+          height: visibleH
+        }
+      };
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    KonvaImage,
+    {
+      name: element.id,
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      height: element.height,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      image: img,
+      ...cropProps,
+      ...drag
+    }
+  );
+}
+function VideoNode({ element, ...rest }) {
+  const img = useImage(element.posterSrc ?? "");
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  if (!element.posterSrc || !img || !img.complete || img.naturalWidth === 0) {
+    return /* @__PURE__ */ jsx(
+      Rect,
+      {
+        name: element.id,
+        x: element.x,
+        y: element.y,
+        width: element.width,
+        height: element.height,
+        rotation: element.rotation,
+        opacity: element.opacity,
+        fill: "#1f2937",
+        stroke: "#374151",
+        strokeWidth: 1,
+        ...drag
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    KonvaImage,
+    {
+      name: element.id,
+      x: element.x,
+      y: element.y,
+      width: element.width,
+      height: element.height,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      image: img,
+      ...drag
+    }
+  );
+}
+function GroupNode({ element, ...rest }) {
+  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      name: element.id,
+      x: element.x,
+      y: element.y,
+      rotation: element.rotation,
+      opacity: element.opacity,
+      ...drag,
+      children: element.children.map((child) => /* @__PURE__ */ jsx(ElementNode, { ...rest, element: child }, child.id))
+    }
+  );
+}
+
+// src/design-canvas-react/components/SelectionLayer.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { Layer, Transformer } from "react-konva";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MIN_SIZE = 4;
+function SelectionLayer({
+  stageRef,
+  selectedIds,
+  selectedElements,
+  canWrite,
+  onTransformEnd,
+  pageId
+}) {
+  const trRef = useRef2(null);
+  useEffect2(() => {
+    const tr = trRef.current;
+    const stage = stageRef.current;
+    if (!tr || !stage) return;
+    const nodes = [];
+    for (const id of selectedIds) {
+      const node = stage.findOne(`[name="${id}"]`);
+      if (node) nodes.push(node);
+    }
+    tr.nodes(nodes);
+    tr.getLayer()?.batchDraw();
+  }, [selectedIds, stageRef]);
+  function handleTransformEnd() {
+    const tr = trRef.current;
+    if (!tr) return;
+    const nodes = tr.nodes();
+    if (nodes.length === 0) return;
+    const entries = [];
+    for (const node of nodes) {
+      const elementId = node.name();
+      const element = selectedElements.find((e) => e.id === elementId);
+      if (!element) continue;
+      const priorAttrs = elementToPriorAttrs(element);
+      const finalAttrs = bakeNodeToAttrs(node, element);
+      if (!finalAttrs) continue;
+      entries.push({ pageId, elementId, attrs: finalAttrs, priorAttrs });
+    }
+    if (entries.length > 0) onTransformEnd(entries);
+  }
+  const multiSelect = selectedIds.length > 1;
+  return /* @__PURE__ */ jsx2(Layer, { name: "overlay:selection", listening: false, children: /* @__PURE__ */ jsx2(
+    Transformer,
+    {
+      ref: trRef,
+      name: "overlay:transformer",
+      keepRatio: multiSelect,
+      rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315],
+      rotationSnapTolerance: 5,
+      boundBoxFunc: (oldBox, newBox) => {
+        if (newBox.width < MIN_SIZE || newBox.height < MIN_SIZE) return oldBox;
+        return newBox;
+      },
+      listening: canWrite,
+      onTransformEnd: canWrite ? handleTransformEnd : void 0
+    }
+  ) });
+}
+function elementToPriorAttrs(element) {
+  const base = {
+    x: element.x,
+    y: element.y,
+    rotation: element.rotation
+  };
+  switch (element.kind) {
+    case "rect":
+    case "image":
+    case "video":
+      return { ...base, width: element.width, height: element.height };
+    case "ellipse":
+      return { ...base, width: element.width, height: element.height };
+    case "line":
+      return { ...base, points: element.points.slice() };
+    case "text":
+      return { ...base, width: element.width, fontSize: element.fontSize };
+    case "group":
+      return { ...base, width: void 0, height: void 0 };
+  }
+}
+function bakeNodeToAttrs(node, element) {
+  const rawRotation = node.rotation();
+  const snappedRotation = snapRotation(rawRotation, 5);
+  const baseNode = {
+    x: node.x(),
+    y: node.y(),
+    width: node.width(),
+    height: node.height(),
+    scaleX: node.scaleX(),
+    scaleY: node.scaleY(),
+    rotation: snappedRotation
+  };
+  switch (element.kind) {
+    case "rect":
+    case "image":
+    case "video":
+    case "group": {
+      const baked = bakeRectTransform(baseNode);
+      return {
+        x: baked.x,
+        y: baked.y,
+        width: Math.max(MIN_SIZE, baked.width),
+        height: Math.max(MIN_SIZE, baked.height),
+        rotation: baked.rotation
+      };
+    }
+    case "ellipse": {
+      const baked = bakeRectTransform(baseNode);
+      const topLeft = ellipseTopLeftFromCenter({
+        x: baked.x,
+        y: baked.y,
+        // radiusX/radiusY = half of baked width/height
+        radiusX: baked.width / 2,
+        radiusY: baked.height / 2
+      });
+      return {
+        x: topLeft.x,
+        y: topLeft.y,
+        width: Math.max(MIN_SIZE, topLeft.width),
+        height: Math.max(MIN_SIZE, topLeft.height),
+        rotation: baked.rotation
+      };
+    }
+    case "line": {
+      const points = node.points();
+      const baked = bakeLineTransform({ ...baseNode, points });
+      return {
+        x: baked.x,
+        y: baked.y,
+        rotation: baked.rotation,
+        points: baked.points
+      };
+    }
+    case "text": {
+      const baked = bakeTextTransform({
+        ...baseNode,
+        fontSize: element.fontSize
+      });
+      return {
+        x: baked.x,
+        y: baked.y,
+        width: Math.max(MIN_SIZE, baked.width),
+        rotation: baked.rotation,
+        fontSize: Math.max(1, baked.fontSize)
+      };
+    }
+  }
+}
+
+// src/design-canvas-react/components/GridLayer.tsx
+import { Layer as Layer2, Line as Line2 } from "react-konva";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function GridLayer({
+  pageWidth,
+  pageHeight,
+  gridSize,
+  zoom,
+  color = "#c0c0c0",
+  opacity = 0.5
+}) {
+  if (!gridVisible(gridSize, zoom, 4)) return null;
+  const verticals = [];
+  for (let x = gridSize; x < pageWidth; x += gridSize) {
+    verticals.push(x);
+  }
+  const horizontals = [];
+  for (let y = gridSize; y < pageHeight; y += gridSize) {
+    horizontals.push(y);
+  }
+  return /* @__PURE__ */ jsxs(Layer2, { name: "overlay:grid", listening: false, children: [
+    verticals.map((x) => /* @__PURE__ */ jsx3(
+      Line2,
+      {
+        name: "overlay:grid-line",
+        points: [x, 0, x, pageHeight],
+        stroke: color,
+        strokeWidth: 1 / zoom,
+        opacity,
+        listening: false,
+        perfectDrawEnabled: false
+      },
+      `v-${x}`
+    )),
+    horizontals.map((y) => /* @__PURE__ */ jsx3(
+      Line2,
+      {
+        name: "overlay:grid-line",
+        points: [0, y, pageWidth, y],
+        stroke: color,
+        strokeWidth: 1 / zoom,
+        opacity,
+        listening: false,
+        perfectDrawEnabled: false
+      },
+      `h-${y}`
+    ))
+  ] });
+}
+
+// src/design-canvas-react/components/SnapGuidesOverlay.tsx
+import { Layer as Layer3, Line as Line3 } from "react-konva";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var KIND_COLOR = {
+  "grid": "#a0a0a0",
+  "guide": "#3b82f6",
+  "page-edge": "#f59e0b",
+  "page-center": "#f59e0b",
+  "element-edge": "#f43f5e",
+  "element-center": "#f43f5e"
+};
+function SnapGuidesOverlay({
+  pageWidth,
+  pageHeight,
+  activeVertical,
+  activeHorizontal,
+  zoom
+}) {
+  if (!activeVertical && !activeHorizontal) return null;
+  const strokeWidth = 1 / zoom;
+  return /* @__PURE__ */ jsxs2(Layer3, { name: "overlay:snap", listening: false, children: [
+    activeVertical && /* @__PURE__ */ jsx4(
+      Line3,
+      {
+        name: "overlay:snap-vertical",
+        points: [activeVertical.position, -99999, activeVertical.position, 99999],
+        stroke: KIND_COLOR[activeVertical.kind],
+        strokeWidth,
+        dash: [4 / zoom, 3 / zoom],
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    ),
+    activeHorizontal && /* @__PURE__ */ jsx4(
+      Line3,
+      {
+        name: "overlay:snap-horizontal",
+        points: [-99999, activeHorizontal.position, 99999, activeHorizontal.position],
+        stroke: KIND_COLOR[activeHorizontal.kind],
+        strokeWidth,
+        dash: [4 / zoom, 3 / zoom],
+        listening: false,
+        perfectDrawEnabled: false
+      }
+    )
+  ] });
+}
+
+// src/design-canvas-react/components/InlineTextEditor.tsx
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function InlineTextEditor({
+  element,
+  zoom,
+  panX,
+  panY,
+  stageRect,
+  onCommit,
+  onCancel
+}) {
+  const ref = useRef3(null);
+  const pos = computeTextOverlayPosition({
+    elementX: element.x,
+    elementY: element.y,
+    elementWidth: element.width,
+    elementHeight: element.fontSize * element.lineHeight * 4,
+    // generous initial height
+    zoom,
+    panX,
+    panY,
+    stageLeft: stageRect.left,
+    stageTop: stageRect.top,
+    elementFontSize: element.fontSize
+  });
+  useEffect3(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.focus();
+    el.select();
+  }, []);
+  function handleKeyDown(e) {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      onCommit(ref.current?.value ?? element.text);
+    }
+  }
+  function handleBlur() {
+    onCommit(ref.current?.value ?? element.text);
+  }
+  const fontWeight = element.fontStyle.includes("bold") ? "bold" : "normal";
+  const fontStyle = element.fontStyle.includes("italic") ? "italic" : "normal";
+  return /* @__PURE__ */ jsx5(
+    "textarea",
+    {
+      ref,
+      defaultValue: element.text,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      style: {
+        position: "absolute",
+        left: pos.left,
+        top: pos.top,
+        width: pos.width,
+        // Height auto-grows via CSS; min so single-line text has room.
+        minHeight: pos.fontSize * element.lineHeight * 1.5,
+        fontSize: pos.fontSize,
+        fontFamily: element.fontFamily,
+        fontWeight,
+        fontStyle,
+        textAlign: element.align,
+        lineHeight: element.lineHeight,
+        letterSpacing: element.letterSpacing * zoom,
+        color: element.fill,
+        background: "rgba(255,255,255,0.95)",
+        border: "2px solid #3b82f6",
+        borderRadius: 2,
+        padding: 2,
+        resize: "none",
+        outline: "none",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        zIndex: 1e3
+        // Do NOT apply rotation — see V1 simplification note in module header.
+      },
+      "aria-label": `Editing text element "${element.name}"`
+    }
+  );
+}
+
+// src/design-canvas-react/components/Workspace.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var SNAP_THRESHOLD_SCREEN_PX = 8;
+var DUPLICATE_OFFSET2 = 10;
+var ZOOM_FACTOR_WHEEL = 0.998;
+var ZOOM_MIN = 0.05;
+var ZOOM_MAX = 32;
+var NO_MARQUEE = { active: false, startDocX: 0, startDocY: 0, endDocX: 0, endDocY: 0 };
+function WorkspaceView({
+  canWrite,
+  onApplyOperations,
+  onSelectionChange,
+  renderAgentPanel,
+  renderSidePanel,
+  className,
+  stack,
+  activePage,
+  onFitRef
+}) {
+  const [, setTick] = useState2(0);
+  const forceRender = useCallback(() => setTick((t) => t + 1), []);
+  useEffect4(() => stack.subscribe(forceRender), [stack, forceRender]);
+  const state = stack.getState();
+  const { document, activePageId, selectedElementIds, zoom, panX, panY, gridEnabled, gridSize, snapEnabled, showBleed } = state;
+  const zoomPanMath = useMemo(() => createZoomPanMath({ minZoom: ZOOM_MIN, maxZoom: ZOOM_MAX }), []);
+  const snapEngine = useMemo(() => createSnapEngine(), []);
+  const containerRef = useRef4(null);
+  const [containerSize, setContainerSize] = useState2({ width: 800, height: 600 });
+  useLayoutEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) return;
+      const { width, height } = entry.contentRect;
+      setContainerSize({ width, height });
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const stageRef = useRef4(null);
+  useEffect4(() => {
+    if (!onFitRef) return;
+    onFitRef.current = () => {
+      const { width, height } = containerSize;
+      if (width <= 0 || height <= 0) return;
+      const view = zoomPanMath.fitPage(activePage, { width, height });
+      stack.setView(view);
+    };
+    return () => {
+      if (onFitRef.current !== null) onFitRef.current = null;
+    };
+  });
+  const gestureRef = useRef4("idle");
+  const panOriginRef = useRef4({ screenX: 0, screenY: 0, panX: 0, panY: 0 });
+  const [marquee, setMarquee] = useState2(NO_MARQUEE);
+  const marqueeRef = useRef4(NO_MARQUEE);
+  const spaceHeldRef = useRef4(false);
+  const dragOriginRef = useRef4(/* @__PURE__ */ new Map());
+  const [activeSnap, setActiveSnap] = useState2(null);
+  const [editingElementId, setEditingElementId] = useState2(null);
+  const editingPreRef = useRef4("");
+  const nudgeHeldRef = useRef4(null);
+  async function persist(command) {
+    if (!canWrite) return;
+    stack.execute(command);
+    try {
+      const result = await onApplyOperations(command.operations());
+      if (result.document) stack.reset(result.document);
+    } catch {
+      stack.rollback(command);
+    }
+  }
+  function handleWheel(e) {
+    e.preventDefault();
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const screenX = e.clientX - rect.left;
+    const screenY = e.clientY - rect.top;
+    const factor = Math.pow(ZOOM_FACTOR_WHEEL, e.deltaY);
+    const next = zoomPanMath.zoomAtPoint({ zoom, panX, panY }, factor, screenX, screenY);
+    stack.setView(next);
+  }
+  function handlePointerDown(e) {
+    if (e.button === 1 || spaceHeldRef.current) {
+      e.preventDefault();
+      e.currentTarget.setPointerCapture(e.pointerId);
+      gestureRef.current = "pan";
+      panOriginRef.current = { screenX: e.clientX, screenY: e.clientY, panX, panY };
+      return;
+    }
+    if (e.button !== 0) return;
+    const stage = stageRef.current;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!stage || !rect) return;
+    const screenX = e.clientX - rect.left;
+    const screenY = e.clientY - rect.top;
+    const hitNode = stage.getIntersection({ x: screenX, y: screenY });
+    if (hitNode && !hitNode.name().startsWith("overlay:") && hitNode.name() !== "page-background") {
+      return;
+    }
+    e.preventDefault();
+    e.currentTarget.setPointerCapture(e.pointerId);
+    gestureRef.current = "marquee";
+    const docPos = zoomPanMath.screenToDocument({ zoom, panX, panY }, screenX, screenY);
+    const m = { active: true, startDocX: docPos.x, startDocY: docPos.y, endDocX: docPos.x, endDocY: docPos.y };
+    marqueeRef.current = m;
+    setMarquee(m);
+    stack.setView({ selectedElementIds: [] });
+  }
+  function handlePointerMove(e) {
+    const mode = gestureRef.current;
+    const rect = containerRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    if (mode === "pan") {
+      const dx = e.clientX - panOriginRef.current.screenX;
+      const dy = e.clientY - panOriginRef.current.screenY;
+      stack.setView({ panX: panOriginRef.current.panX + dx, panY: panOriginRef.current.panY + dy });
+      return;
+    }
+    if (mode === "marquee") {
+      const screenX = e.clientX - rect.left;
+      const screenY = e.clientY - rect.top;
+      const docPos = zoomPanMath.screenToDocument({ zoom, panX, panY }, screenX, screenY);
+      const m = { ...marqueeRef.current, active: true, endDocX: docPos.x, endDocY: docPos.y };
+      marqueeRef.current = m;
+      setMarquee(m);
+      const normalized = normalizeMarquee(m.startDocX, m.startDocY, m.endDocX, m.endDocY);
+      const ids = marqueeSelect(activePage, normalized);
+      stack.setView({ selectedElementIds: ids });
+    }
+  }
+  function handlePointerUp(e) {
+    gestureRef.current = "idle";
+    setMarquee(NO_MARQUEE);
+    marqueeRef.current = NO_MARQUEE;
+    setActiveSnap(null);
+    e.currentTarget.releasePointerCapture(e.pointerId);
+  }
+  function handleElementDragStart(elementId) {
+    if (!canWrite) return;
+    const ids = selectedElementIds.includes(elementId) ? selectedElementIds : [elementId];
+    const origins = /* @__PURE__ */ new Map();
+    for (const id of ids) {
+      const found = findElement(activePage, id);
+      if (found) {
+        const aabb = elementAabb(found.element);
+        origins.set(id, { x: found.element.x, y: found.element.y, width: aabb.width, height: aabb.height });
+      }
+    }
+    dragOriginRef.current = origins;
+    gestureRef.current = "drag";
+    if (!selectedElementIds.includes(elementId)) {
+      stack.setView({ selectedElementIds: [elementId] });
+    }
+  }
+  function handleElementDragMove(elementId, dx, dy) {
+    if (!canWrite) return;
+    const origin = dragOriginRef.current.get(elementId);
+    if (!origin) return;
+    const dragging = selectedElementIds.includes(elementId) ? selectedElementIds : [elementId];
+    const proposedX = origin.x + dx;
+    const proposedY = origin.y + dy;
+    const snapBounds = { x: proposedX, y: proposedY, width: origin.width, height: origin.height };
+    if (snapEnabled) {
+      const targets = snapEngine.collectTargets(state, dragging);
+      if (gridEnabled) {
+        const thresholdDoc = SNAP_THRESHOLD_SCREEN_PX / zoom;
+        const gt = collectGridTargets(snapBounds, gridSize, activePage, thresholdDoc);
+        targets.vertical.push(...gt.vertical);
+        targets.horizontal.push(...gt.horizontal);
+      }
+      const snapResult = snapEngine.apply(snapBounds, targets, SNAP_THRESHOLD_SCREEN_PX, zoom);
+      setActiveSnap(snapResult);
+    }
+  }
+  async function handleElementDragEnd(elementId, finalX, finalY) {
+    if (!canWrite) return;
+    gestureRef.current = "idle";
+    setActiveSnap(null);
+    const origin = dragOriginRef.current.get(elementId);
+    if (!origin) return;
+    const dx = finalX - origin.x;
+    const dy = finalY - origin.y;
+    const draggingIds = selectedElementIds.includes(elementId) ? selectedElementIds : [elementId];
+    if (draggingIds.length === 1) {
+      const el = findElement(activePage, elementId)?.element;
+      if (!el) return;
+      await persist(
+        setAttrsCommand({
+          pageId: activePageId,
+          elementId,
+          attrs: { x: finalX, y: finalY },
+          priorAttrs: { x: el.x, y: el.y }
+        })
+      );
+    } else {
+      const entries = [];
+      for (const id of draggingIds) {
+        const el = findElement(activePage, id)?.element;
+        const orig = dragOriginRef.current.get(id);
+        if (!el || !orig) continue;
+        entries.push({
+          pageId: activePageId,
+          elementId: id,
+          attrs: { x: orig.x + dx, y: orig.y + dy },
+          priorAttrs: { x: orig.x, y: orig.y }
+        });
+      }
+      if (entries.length > 0) await persist(multiSetAttrsCommand(entries));
+    }
+    dragOriginRef.current = /* @__PURE__ */ new Map();
+  }
+  function handleElementClick(elementId) {
+    stack.setView({ selectedElementIds: [elementId] });
+  }
+  function handleElementDoubleClick(elementId) {
+    if (!canWrite) return;
+    const found = findElement(activePage, elementId);
+    if (!found || found.element.kind !== "text") return;
+    editingPreRef.current = found.element.text;
+    setEditingElementId(elementId);
+  }
+  async function handleTextCommit(text) {
+    const id = editingElementId;
+    setEditingElementId(null);
+    if (!id || !canWrite) return;
+    const found = findElement(activePage, id);
+    if (!found || found.element.kind !== "text") return;
+    if (text === editingPreRef.current) return;
+    await persist(
+      setAttrsCommand({
+        pageId: activePageId,
+        elementId: id,
+        attrs: { text },
+        priorAttrs: { text: editingPreRef.current }
+      })
+    );
+  }
+  function handleTextCancel() {
+    setEditingElementId(null);
+  }
+  async function handleTransformEnd(entries) {
+    if (!canWrite || entries.length === 0) return;
+    await persist(multiSetAttrsCommand(entries));
+  }
+  function handleKeyDown(e) {
+    if (e.key === " ") {
+      e.preventDefault();
+      spaceHeldRef.current = true;
+      return;
+    }
+    const mod = e.metaKey || e.ctrlKey;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      if (gestureRef.current !== "idle") {
+        gestureRef.current = "idle";
+        setMarquee(NO_MARQUEE);
+        setActiveSnap(null);
+      } else if (editingElementId) {
+        setEditingElementId(null);
+      } else {
+        stack.setView({ selectedElementIds: [] });
+      }
+      return;
+    }
+    if (editingElementId) return;
+    if ((e.key === "Delete" || e.key === "Backspace") && selectedElementIds.length > 0) {
+      e.preventDefault();
+      for (const id of [...selectedElementIds]) {
+        try {
+          persist(deleteElementCommand({ document, pageId: activePageId, elementId: id }));
+        } catch {
+        }
+      }
+      stack.setView({ selectedElementIds: [] });
+      return;
+    }
+    if (mod && e.key === "z" && !e.shiftKey) {
+      e.preventDefault();
+      if (stack.canUndo()) stack.undo();
+      return;
+    }
+    if (mod && (e.key === "z" && e.shiftKey || e.key === "y")) {
+      e.preventDefault();
+      if (stack.canRedo()) stack.redo();
+      return;
+    }
+    if (mod && e.key === "a") {
+      e.preventDefault();
+      const ids = activePage.elements.filter((el) => !el.locked && el.visible).map((el) => el.id);
+      stack.setView({ selectedElementIds: ids });
+      return;
+    }
+    if (mod && e.key === "d" && selectedElementIds.length > 0) {
+      e.preventDefault();
+      for (const id of selectedElementIds) {
+        const found = findElement(activePage, id);
+        if (!found) continue;
+        const clone = {
+          ...structuredClone(found.element),
+          id: crypto.randomUUID(),
+          x: found.element.x + DUPLICATE_OFFSET2,
+          y: found.element.y + DUPLICATE_OFFSET2
+        };
+        persist(addElementCommand({ pageId: activePageId, element: clone }));
+      }
+      return;
+    }
+    if (mod && !e.shiftKey && e.key === "g" && selectedElementIds.length >= 2) {
+      e.preventDefault();
+      persist(groupElementsCommand({
+        document,
+        pageId: activePageId,
+        elementIds: selectedElementIds,
+        groupId: crypto.randomUUID()
+      }));
+      return;
+    }
+    if (mod && e.shiftKey && e.key === "g" && selectedElementIds.length === 1) {
+      e.preventDefault();
+      const id = selectedElementIds[0];
+      persist(ungroupElementCommand({ document, pageId: activePageId, groupId: id }));
+      return;
+    }
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key) && selectedElementIds.length > 0) {
+      e.preventDefault();
+      const key = e.key;
+      if (nudgeHeldRef.current && nudgeHeldRef.current.key !== key) {
+        flushNudge();
+      }
+      if (!nudgeHeldRef.current) {
+        const origins = /* @__PURE__ */ new Map();
+        for (const id of selectedElementIds) {
+          const found = findElement(activePage, id);
+          if (found) origins.set(id, { x: found.element.x, y: found.element.y });
+        }
+        nudgeHeldRef.current = { key, ids: selectedElementIds.slice(), origin: origins };
+      }
+      const { dx, dy } = nudgeDelta2(key, e.shiftKey);
+      const entries = [];
+      for (const [id, orig] of nudgeHeldRef.current.origin) {
+        const found = findElement(activePage, id);
+        if (!found) continue;
+        entries.push({
+          pageId: activePageId,
+          elementId: id,
+          attrs: { x: found.element.x + dx, y: found.element.y + dy },
+          priorAttrs: { x: found.element.x, y: found.element.y }
+        });
+      }
+      if (entries.length > 0) {
+        stack.execute(multiSetAttrsCommand(entries));
+      }
+    }
+  }
+  function handleKeyUp(e) {
+    if (e.key === " ") {
+      spaceHeldRef.current = false;
+      return;
+    }
+    if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(e.key)) {
+      flushNudge();
+    }
+  }
+  function flushNudge() {
+    const held = nudgeHeldRef.current;
+    if (!held) return;
+    nudgeHeldRef.current = null;
+    if (!canWrite || held.ids.length === 0) return;
+    const entries = [];
+    for (const id of held.ids) {
+      const orig = held.origin.get(id);
+      const found = findElement(activePage, id);
+      if (!orig || !found) continue;
+      entries.push({
+        pageId: activePageId,
+        elementId: id,
+        attrs: { x: found.element.x, y: found.element.y },
+        priorAttrs: { x: orig.x, y: orig.y }
+      });
+    }
+    if (entries.length > 0) {
+      onApplyOperations(multiSetAttrsCommand(entries).operations()).catch(() => {
+        for (const [id, orig] of held.origin) {
+          const found = findElement(activePage, id);
+          if (!found) continue;
+          persist(setAttrsCommand({
+            pageId: activePageId,
+            elementId: id,
+            attrs: { x: orig.x, y: orig.y },
+            priorAttrs: { x: found.element.x, y: found.element.y }
+          }));
+        }
+      });
+    }
+  }
+  useEffect4(() => {
+    if (!onSelectionChange) return;
+    const elements = selectedElementIds.map((id) => findElement(activePage, id)?.element).filter((el) => !!el);
+    onSelectionChange(elements);
+  }, [selectedElementIds, activePage, onSelectionChange]);
+  const selectedElements = useMemo(
+    () => selectedElementIds.map((id) => findElement(activePage, id)?.element).filter((el) => !!el),
+    [selectedElementIds, activePage]
+  );
+  const editingTextElement = editingElementId ? findElement(activePage, editingElementId)?.element ?? null : null;
+  const stageRect = containerRef.current?.getBoundingClientRect() ?? { left: 0, top: 0 };
+  const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1;
+  const pageScreenX = panX;
+  const pageScreenY = panY;
+  const pageScreenW = activePage.width * zoom;
+  const pageScreenH = activePage.height * zoom;
+  const activeVerticalGuide = activeSnap?.activeVertical ?? null;
+  const activeHorizontalGuide = activeSnap?.activeHorizontal ?? null;
+  const normalizedMarquee = marquee.active ? normalizeMarquee(marquee.startDocX, marquee.startDocY, marquee.endDocX, marquee.endDocY) : null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: `design-canvas-workspace relative overflow-hidden bg-[#1a1a1a] outline-none ${className ?? ""}`,
+      ref: containerRef,
+      tabIndex: 0,
+      onWheel: handleWheel,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      style: { cursor: spaceHeldRef.current ? "grab" : "default" },
+      children: [
+        renderSidePanel && /* @__PURE__ */ jsx6("div", { className: "absolute left-0 top-0 bottom-0 z-20 w-60 pointer-events-auto", children: renderSidePanel() }),
+        /* @__PURE__ */ jsxs3(
+          Stage,
+          {
+            ref: stageRef,
+            width: containerSize.width,
+            height: containerSize.height,
+            pixelRatio: dpr,
+            listening: true,
+            children: [
+              gridEnabled && /* @__PURE__ */ jsx6(
+                GridLayer,
+                {
+                  pageWidth: activePage.width,
+                  pageHeight: activePage.height,
+                  gridSize,
+                  zoom
+                }
+              ),
+              /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsxs3(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: [
+                /* @__PURE__ */ jsx6(
+                  Rect2,
+                  {
+                    name: "page-background",
+                    x: 0,
+                    y: 0,
+                    width: activePage.width,
+                    height: activePage.height,
+                    fill: activePage.background,
+                    shadowColor: "rgba(0,0,0,0.4)",
+                    shadowBlur: 24 / zoom,
+                    shadowOffset: { x: 0, y: 4 / zoom },
+                    listening: false
+                  }
+                ),
+                /* @__PURE__ */ jsx6(
+                  Group2,
+                  {
+                    clipX: 0,
+                    clipY: 0,
+                    clipWidth: activePage.width,
+                    clipHeight: activePage.height,
+                    children: activePage.elements.map((element) => /* @__PURE__ */ jsx6(
+                      ElementNode,
+                      {
+                        element,
+                        isSelected: selectedElementIds.includes(element.id),
+                        zoom,
+                        onClick: handleElementClick,
+                        onDragStart: handleElementDragStart,
+                        onDragMove: handleElementDragMove,
+                        onDragEnd: handleElementDragEnd,
+                        onDoubleClick: handleElementDoubleClick
+                      },
+                      element.id
+                    ))
+                  }
+                )
+              ] }) }),
+              (activeVerticalGuide || activeHorizontalGuide) && /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsx6(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx6(
+                SnapGuidesOverlay,
+                {
+                  pageWidth: activePage.width,
+                  pageHeight: activePage.height,
+                  activeVertical: activeVerticalGuide,
+                  activeHorizontal: activeHorizontalGuide,
+                  zoom
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx6(
+                SelectionLayer,
+                {
+                  stageRef,
+                  selectedIds: selectedElementIds,
+                  selectedElements,
+                  canWrite,
+                  onTransformEnd: handleTransformEnd,
+                  pageId: activePageId
+                }
+              )
+            ]
+          }
+        ),
+        showBleed && activePage.bleed && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "pointer-events-none absolute",
+            style: { left: pageScreenX, top: pageScreenY, width: pageScreenW, height: pageScreenH },
+            children: /* @__PURE__ */ jsx6(
+              BleedTrimOverlay,
+              {
+                pageWidthPx: pageScreenW,
+                pageHeightPx: pageScreenH,
+                bleed: {
+                  top: activePage.bleed.top * zoom,
+                  right: activePage.bleed.right * zoom,
+                  bottom: activePage.bleed.bottom * zoom,
+                  left: activePage.bleed.left * zoom
+                }
+              }
+            )
+          }
+        ),
+        normalizedMarquee && /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: "pointer-events-none absolute border border-blue-400 bg-blue-400/10",
+            style: {
+              left: panX + normalizedMarquee.x * zoom,
+              top: panY + normalizedMarquee.y * zoom,
+              width: normalizedMarquee.width * zoom,
+              height: normalizedMarquee.height * zoom
+            }
+          }
+        ),
+        editingTextElement && /* @__PURE__ */ jsx6(
+          InlineTextEditor,
+          {
+            element: editingTextElement,
+            zoom,
+            panX,
+            panY,
+            stageRect: { left: stageRect.left, top: stageRect.top },
+            onCommit: handleTextCommit,
+            onCancel: handleTextCancel
+          }
+        ),
+        renderAgentPanel && /* @__PURE__ */ jsx6("div", { className: "absolute right-0 top-0 bottom-0 z-20 w-80 pointer-events-auto", children: renderAgentPanel({ selectedElements, activePageId }) })
+      ]
+    }
+  );
+}
+function Workspace(props) {
+  const stackRef = useRef4(
+    createSceneCommandStack(
+      props.document,
+      props.document.pages[0]?.id ?? ""
+    )
+  );
+  const [, setTick] = useState2(0);
+  const forceRender = useCallback(() => setTick((t) => t + 1), []);
+  useEffect4(() => {
+    return stackRef.current.subscribe(forceRender);
+  }, [forceRender]);
+  const prevRevRef = useRef4(props.rev);
+  useEffect4(() => {
+    if (props.rev !== prevRevRef.current) {
+      prevRevRef.current = props.rev;
+      stackRef.current.reset(props.document);
+    }
+  }, [props.rev, props.document]);
+  const state = stackRef.current.getState();
+  const activePage = state.document.pages.find((p) => p.id === state.activePageId) ?? state.document.pages[0];
+  if (!activePage) return null;
+  return /* @__PURE__ */ jsx6(
+    WorkspaceView,
+    {
+      stack: stackRef.current,
+      activePage,
+      canWrite: props.canWrite,
+      onApplyOperations: props.onApplyOperations,
+      onSelectionChange: props.onSelectionChange,
+      renderAgentPanel: props.renderAgentPanel,
+      renderSidePanel: props.renderSidePanel,
+      className: props.className
+    }
+  );
+}
+
+// src/design-canvas-react/components/DesignCanvasEditor.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var THUMBNAIL_HEIGHT_PX = 96;
+var thumbnailCache = /* @__PURE__ */ new Map();
+var THUMBNAIL_CACHE_LIMIT = 200;
+function evictIfNeeded() {
+  if (thumbnailCache.size < THUMBNAIL_CACHE_LIMIT) return;
+  const toDrop = Math.floor(THUMBNAIL_CACHE_LIMIT * 0.2);
+  let dropped = 0;
+  for (const key of thumbnailCache.keys()) {
+    if (dropped >= toDrop) break;
+    thumbnailCache.delete(key);
+    dropped++;
+  }
+}
+function cheapHash(value) {
+  const s = JSON.stringify(value) ?? "";
+  let h = 2166136261;
+  for (let i = 0; i < s.length; i++) {
+    h ^= s.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return (h >>> 0).toString(36);
+}
+async function renderPageThumbnail(page) {
+  const cacheKey = `${page.id}:${cheapHash(page.elements)}`;
+  const cached = thumbnailCache.get(cacheKey);
+  if (cached !== void 0) return cached;
+  let Konva;
+  try {
+    const mod = await import("konva");
+    Konva = mod.default;
+  } catch {
+    return null;
+  }
+  const aspectRatio = page.width > 0 ? page.width / page.height : 1;
+  const thumbH = THUMBNAIL_HEIGHT_PX;
+  const thumbW = Math.round(thumbH * aspectRatio);
+  const scale = page.height > 0 ? thumbH / page.height : 1;
+  let stage = null;
+  try {
+    const container = globalThis.document?.createElement("div");
+    if (!container) return null;
+    container.style.position = "absolute";
+    container.style.left = "-9999px";
+    container.style.top = "-9999px";
+    globalThis.document.body.appendChild(container);
+    stage = new Konva.Stage({ container, width: thumbW, height: thumbH });
+    const layer = new Konva.Layer();
+    stage.add(layer);
+    layer.add(new Konva.Rect({
+      x: 0,
+      y: 0,
+      width: thumbW,
+      height: thumbH,
+      fill: page.background,
+      listening: false
+    }));
+    const group = new Konva.Group({ x: 0, y: 0, scaleX: scale, scaleY: scale, listening: false });
+    layer.add(group);
+    paintElements(Konva, group, page.elements);
+    const dataUrl = stage.toDataURL({ mimeType: "image/png", pixelRatio: 1 });
+    evictIfNeeded();
+    thumbnailCache.set(cacheKey, dataUrl);
+    return dataUrl;
+  } catch {
+    return null;
+  } finally {
+    if (stage) {
+      stage.destroy();
+      const el = stage.container();
+      el.parentNode?.removeChild(el);
+    }
+  }
+}
+function paintElements(Konva, parent, elements) {
+  for (const el of elements) {
+    if (!el.visible) continue;
+    switch (el.kind) {
+      case "rect":
+        parent.add(new Konva.Rect({
+          x: el.x,
+          y: el.y,
+          width: el.width,
+          height: el.height,
+          rotation: el.rotation,
+          opacity: el.opacity,
+          fill: el.fill ?? void 0,
+          cornerRadius: el.cornerRadius ?? 0,
+          listening: false
+        }));
+        break;
+      case "ellipse":
+        parent.add(new Konva.Ellipse({
+          x: el.x + el.width / 2,
+          y: el.y + el.height / 2,
+          radiusX: el.width / 2,
+          radiusY: el.height / 2,
+          rotation: el.rotation,
+          opacity: el.opacity,
+          fill: el.fill ?? void 0,
+          listening: false
+        }));
+        break;
+      case "text":
+        parent.add(new Konva.Text({
+          x: el.x,
+          y: el.y,
+          width: el.width,
+          rotation: el.rotation,
+          opacity: el.opacity,
+          text: el.text,
+          fontSize: el.fontSize,
+          fontFamily: el.fontFamily,
+          fill: el.fill,
+          align: el.align,
+          listening: false
+        }));
+        break;
+      case "group": {
+        const g = new Konva.Group({
+          x: el.x,
+          y: el.y,
+          rotation: el.rotation,
+          opacity: el.opacity,
+          listening: false
+        });
+        parent.add(g);
+        paintElements(Konva, g, el.children);
+        break;
+      }
+      // image and video: skip — async loading not viable in sync thumbnail render
+      default:
+        break;
+    }
+  }
+}
+function DesignCanvasEditor(props) {
+  return /* @__PURE__ */ jsx7(
+    DesignCanvas,
+    {
+      ...props,
+      renderWorkspace: (ctx) => {
+        if (!ctx.activePage) return null;
+        return /* @__PURE__ */ jsx7(
+          WorkspaceView,
+          {
+            stack: ctx.stack,
+            activePage: ctx.activePage,
+            canWrite: ctx.canWrite,
+            onApplyOperations: props.onApplyOperations,
+            onSelectionChange: props.onSelectionChange,
+            renderAgentPanel: props.renderAgentPanel,
+            renderSidePanel: props.renderSidePanel,
+            onFitRef: ctx.onFitRef
+          }
+        );
+      },
+      renderThumbnail: renderPageThumbnail
+    }
+  );
+}
+
+export {
+  createSnapEngine,
+  collectGridTargets,
+  marqueeSelect,
+  nudgeDelta,
+  DUPLICATE_OFFSET,
+  createZoomPanMath,
+  bakeRectTransform,
+  bakeLineTransform,
+  bakeTextTransform,
+  ElementNode,
+  SelectionLayer,
+  GridLayer,
+  WorkspaceView,
+  Workspace,
+  DesignCanvasEditor
+};
+//# sourceMappingURL=chunk-2Q73HGDI.js.map