@tangle-network/agent-app 0.26.0 → 0.28.0

package/dist/{chunk-FSUR2752.js → chunk-7I37CO5D.js}

@@ -1,6 +1,19 @@
 import {
   BleedTrimOverlay,
-  DesignCanvas,
+  DesignCanvas
+} from "./chunk-YEWTVDDT.js";
+import {
+  collectGridTargets,
+  createSnapEngine,
+  createZoomPanMath,
+  documentCropToStageCoords,
+  hitTestPoint,
+  identifyTaintedSrc,
+  isExportHiddenNodeName,
+  marqueeSelect,
+  resolveExportParams
+} from "./chunk-V5XZKHCL.js";
+import {
   addElementCommand,
   createSceneCommandStack,
   deleteElementCommand,
@@ -8,15 +21,16 @@ import {
   multiSetAttrsCommand,
   setAttrsCommand,
   ungroupElementCommand
-} from "./chunk-LPAVBGVY.js";
+} from "./chunk-XWJXZ6WE.js";
 import {
   SCENE_SCHEMA_VERSION,
-  bleedAwareExportBounds,
   boundsIntersect,
   elementAabb,
-  findElement,
-  scaleForPreset
-} from "./chunk-JZAJE3JL.js";
+  findElement
+} from "./chunk-M2EBUDZ7.js";
+import {
+  lightTheme
+} from "./chunk-Y2SZVW35.js";
 
 // src/design-canvas-react/components/Workspace.tsx
 import {
@@ -27,42 +41,7 @@ import {
   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/export-math.ts
-function isExportHiddenNodeName(name) {
-  return name.startsWith("overlay:") || name === "Transformer";
-}
-function resolveExportParams(page, opts) {
-  const includeBleed = opts.preset !== void 0 ? opts.preset.includeBleed : opts.includeBleed ?? false;
-  const cropRect = bleedAwareExportBounds(page, includeBleed);
-  const pixelRatio = opts.preset !== void 0 ? scaleForPreset(opts.preset, cropRect) : opts.pixelRatio ?? 1;
-  const format = opts.preset !== void 0 ? opts.preset.format : opts.format;
-  const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
-  return {
-    cropRect,
-    pixelRatio,
-    mimeType,
-    quality: format === "jpeg" ? 0.92 : void 0
-  };
-}
-function identifyTaintedSrc(imageSrcs) {
-  for (const { src } of imageSrcs) {
-    if (isCrossOriginSrc(src)) return src;
-  }
-  return null;
-}
-function isCrossOriginSrc(src) {
-  return /^https?:\/\//i.test(src);
-}
-function documentCropToStageCoords(cropRect, stageScale, stageX, stageY) {
-  return {
-    x: stageX + cropRect.x * stageScale,
-    y: stageY + cropRect.y * stageScale,
-    width: cropRect.width * stageScale,
-    height: cropRect.height * stageScale
-  };
-}
+import { Stage, Layer as Layer4, Rect as Rect2, Group as Group3 } from "react-konva";
 
 // src/design-canvas-react/export.ts
 async function exportPageDataUrl(stage, page, opts) {
@@ -144,227 +123,8 @@ function downloadDataUrl(dataUrl, filename) {
   globalThis.document.body.removeChild(a);
 }
 
-// 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 { memo, 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
@@ -451,7 +211,7 @@ function snapRotation(angleDeg, thresholdDeg = 5) {
   }
   return bestDist <= thresholdDeg ? best : normalized;
 }
-function nudgeDelta2(key, shift) {
+function nudgeDelta(key, shift) {
   const step = shift ? 10 : 1;
   switch (key) {
     case "ArrowLeft":
@@ -497,7 +257,7 @@ function useImage(src) {
   }, [src]);
   return imageCache.get(src) ?? null;
 }
-function ElementNode(props) {
+function ElementNodeImpl(props) {
   const { element } = props;
   if (!element.visible) return null;
   switch (element.kind) {
@@ -517,33 +277,55 @@ function ElementNode(props) {
       return /* @__PURE__ */ jsx(GroupNode, { ...props, element });
   }
 }
+var ElementNode = memo(ElementNodeImpl);
 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 };
+  const [dragging, setDragging] = useState(false);
   return {
     draggable: isDraggable,
     // locked elements still receive click for selection; listening must be true.
     listening: true,
+    dragging,
     onDragStart: isDraggable ? () => {
+      setDragging(true);
       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) => {
+      setDragging(false);
       onDragEnd?.(element.id, e.target.x(), e.target.y());
     } : void 0,
     onClick: () => onClick?.(element.id),
     onDblClick: () => onDoubleClick?.(element.id)
   };
 }
+function useNodeCache(ref, isSelected, dragging, zoom, invalidateKey) {
+  useEffect(() => {
+    const node = ref.current;
+    if (!node) return;
+    if (isSelected || dragging) {
+      node.clearCache();
+      return;
+    }
+    node.cache();
+    return () => {
+      node.clearCache();
+    };
+  }, [ref, isSelected, dragging, zoom, invalidateKey]);
+}
 function RectNode({ element, ...rest }) {
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  const ref = useRef(null);
+  useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
   return /* @__PURE__ */ jsx(
     Rect,
     {
+      ref,
       name: element.id,
       x: element.x,
       y: element.y,
@@ -561,10 +343,13 @@ function RectNode({ element, ...rest }) {
 }
 function EllipseNode({ element, ...rest }) {
   const { x: cx, y: cy, radiusX, radiusY } = ellipseCenterFromTopLeft(element);
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  const ref = useRef(null);
+  useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
   return /* @__PURE__ */ jsx(
     Ellipse,
     {
+      ref,
       name: element.id,
       x: cx,
       y: cy,
@@ -580,10 +365,13 @@ function EllipseNode({ element, ...rest }) {
   );
 }
 function LineNode({ element, ...rest }) {
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  const ref = useRef(null);
+  useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
   return /* @__PURE__ */ jsx(
     Line,
     {
+      ref,
       name: element.id,
       x: element.x,
       y: element.y,
@@ -604,11 +392,14 @@ var FONT_STYLE_MAP = {
   "bold italic": { fontStyle: "italic", fontVariant: "normal", fontWeight: "bold" }
 };
 function TextNode({ element, ...rest }) {
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  const ref = useRef(null);
+  useNodeCache(ref, rest.isSelected, dragging, rest.zoom, element);
   const { fontStyle, fontWeight } = FONT_STYLE_MAP[element.fontStyle];
   return /* @__PURE__ */ jsx(
     Text,
     {
+      ref,
       name: element.id,
       x: element.x,
       y: element.y,
@@ -627,15 +418,24 @@ function TextNode({ element, ...rest }) {
     }
   );
 }
-var BROKEN_FILL = "#e5e7eb";
-var BROKEN_STROKE = "#9ca3af";
 function ImageNode({ element, ...rest }) {
+  const render = rest.render ?? lightTheme.canvasRender;
   const img = useImage(element.src);
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  const ref = useRef(null);
+  const imgReady = !!img && img.complete && img.naturalWidth > 0;
+  useNodeCache(
+    ref,
+    rest.isSelected,
+    dragging,
+    rest.zoom,
+    `${imgReady}:${element.src}:${element.width}x${element.height}:${element.fit}`
+  );
   if (!img || !img.complete || img.naturalWidth === 0) {
     return /* @__PURE__ */ jsx(
       Rect,
       {
+        ref,
         name: element.id,
         x: element.x,
         y: element.y,
@@ -643,8 +443,8 @@ function ImageNode({ element, ...rest }) {
         height: element.height,
         rotation: element.rotation,
         opacity: element.opacity,
-        fill: BROKEN_FILL,
-        stroke: BROKEN_STROKE,
+        fill: render.brokenFill,
+        stroke: render.brokenStroke,
         strokeWidth: 1,
         ...drag
       }
@@ -679,6 +479,7 @@ function ImageNode({ element, ...rest }) {
   return /* @__PURE__ */ jsx(
     KonvaImage,
     {
+      ref,
       name: element.id,
       x: element.x,
       y: element.y,
@@ -693,12 +494,23 @@ function ImageNode({ element, ...rest }) {
   );
 }
 function VideoNode({ element, ...rest }) {
+  const render = rest.render ?? lightTheme.canvasRender;
   const img = useImage(element.posterSrc ?? "");
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  const ref = useRef(null);
+  const posterReady = !!element.posterSrc && !!img && img.complete && img.naturalWidth > 0;
+  useNodeCache(
+    ref,
+    rest.isSelected,
+    dragging,
+    rest.zoom,
+    `${posterReady}:${element.posterSrc ?? ""}:${element.width}x${element.height}`
+  );
   if (!element.posterSrc || !img || !img.complete || img.naturalWidth === 0) {
     return /* @__PURE__ */ jsx(
       Rect,
       {
+        ref,
         name: element.id,
         x: element.x,
         y: element.y,
@@ -706,8 +518,8 @@ function VideoNode({ element, ...rest }) {
         height: element.height,
         rotation: element.rotation,
         opacity: element.opacity,
-        fill: "#1f2937",
-        stroke: "#374151",
+        fill: render.placeholderFill,
+        stroke: render.placeholderStroke,
         strokeWidth: 1,
         ...drag
       }
@@ -716,6 +528,7 @@ function VideoNode({ element, ...rest }) {
   return /* @__PURE__ */ jsx(
     KonvaImage,
     {
+      ref,
       name: element.id,
       x: element.x,
       y: element.y,
@@ -729,7 +542,8 @@ function VideoNode({ element, ...rest }) {
   );
 }
 function GroupNode({ element, ...rest }) {
-  const drag = useDragBindings({ element, ...rest }, element.x, element.y);
+  const { dragging: _dragging, ...drag } = useDragBindings({ element, ...rest }, element.x, element.y);
+  void _dragging;
   return /* @__PURE__ */ jsx(
     Group,
     {
@@ -755,7 +569,8 @@ function SelectionLayer({
   selectedElements,
   canWrite,
   onTransformEnd,
-  pageId
+  pageId,
+  render = lightTheme.canvasRender
 }) {
   const trRef = useRef2(null);
   useEffect2(() => {
@@ -788,22 +603,35 @@ function SelectionLayer({
     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
-    }
-  ) });
+  return (
+    // The Layer must participate in the hit graph (listening) or the Transformer
+    // anchors below receive no pointer events and resize/rotate is dead. We scope
+    // listening to canWrite so a read-only canvas stays fully click-through.
+    // Click-through to elements for selection is preserved: this layer paints
+    // only the Transformer, whose anchors are the sole hit targets — empty
+    // regions have no shapes, so pointer hits fall through to the content layer.
+    // Export exclusion is unaffected: export.ts hides nodes by the 'overlay:'
+    // name prefix, not by `listening` (see export-math.isExportHiddenNodeName).
+    /* @__PURE__ */ jsx2(Layer, { name: "overlay:selection", listening: canWrite, children: /* @__PURE__ */ jsx2(
+      Transformer,
+      {
+        ref: trRef,
+        name: "overlay:transformer",
+        keepRatio: multiSelect,
+        rotationSnaps: [0, 45, 90, 135, 180, 225, 270, 315],
+        rotationSnapTolerance: 5,
+        borderStroke: render.selectionStroke,
+        anchorStroke: render.selectionStroke,
+        anchorFill: render.selectionAnchorFill,
+        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 = {
@@ -896,78 +724,89 @@ function bakeNodeToAttrs(node, element) {
 }
 
 // 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";
+import { Layer as Layer2, Group as Group2, Shape } from "react-konva";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function gridVerticalLines(pageWidth, gridSize) {
+  const out = [];
+  if (gridSize <= 0) return out;
+  for (let x = gridSize; x < pageWidth; x += gridSize) out.push(x);
+  return out;
+}
+function gridHorizontalLines(pageHeight, gridSize) {
+  const out = [];
+  if (gridSize <= 0) return out;
+  for (let y = gridSize; y < pageHeight; y += gridSize) out.push(y);
+  return out;
+}
 function GridLayer({
   pageWidth,
   pageHeight,
   gridSize,
   zoom,
+  panX,
+  panY,
   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}`
-    ))
-  ] });
+  const verticals = gridVerticalLines(pageWidth, gridSize);
+  const horizontals = gridHorizontalLines(pageHeight, gridSize);
+  const sceneFunc = (ctx, shape) => {
+    ctx.beginPath();
+    for (const x of verticals) {
+      ctx.moveTo(x, 0);
+      ctx.lineTo(x, pageHeight);
+    }
+    for (const y of horizontals) {
+      ctx.moveTo(0, y);
+      ctx.lineTo(pageWidth, y);
+    }
+    ctx.setAttr("strokeStyle", color);
+    ctx.setAttr("lineWidth", 1 / zoom);
+    ctx.stroke();
+    void shape;
+  };
+  return /* @__PURE__ */ jsx3(Layer2, { name: "overlay:grid", listening: false, children: /* @__PURE__ */ jsx3(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx3(
+    Shape,
+    {
+      name: "overlay:grid-shape",
+      sceneFunc,
+      stroke: color,
+      strokeWidth: 1 / zoom,
+      opacity,
+      listening: false,
+      perfectDrawEnabled: false
+    }
+  ) }) });
 }
 
 // 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"
-};
+import { Layer as Layer3, Line as Line2 } from "react-konva";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+function kindColors(render) {
+  return {
+    "grid": render.snapGrid,
+    "guide": render.snapGuide,
+    "page-edge": render.snapPage,
+    "page-center": render.snapPage,
+    "element-edge": render.snapElement,
+    "element-center": render.snapElement
+  };
+}
 function SnapGuidesOverlay({
   pageWidth,
   pageHeight,
   activeVertical,
   activeHorizontal,
-  zoom
+  zoom,
+  render = lightTheme.canvasRender
 }) {
   if (!activeVertical && !activeHorizontal) return null;
+  const KIND_COLOR = kindColors(render);
   const strokeWidth = 1 / zoom;
-  return /* @__PURE__ */ jsxs2(Layer3, { name: "overlay:snap", listening: false, children: [
+  return /* @__PURE__ */ jsxs(Layer3, { name: "overlay:snap", listening: false, children: [
     activeVertical && /* @__PURE__ */ jsx4(
-      Line3,
+      Line2,
       {
         name: "overlay:snap-vertical",
         points: [activeVertical.position, -99999, activeVertical.position, 99999],
@@ -979,7 +818,7 @@ function SnapGuidesOverlay({
       }
     ),
     activeHorizontal && /* @__PURE__ */ jsx4(
-      Line3,
+      Line2,
       {
         name: "overlay:snap-horizontal",
         points: [-99999, activeHorizontal.position, 99999, activeHorizontal.position],
@@ -1080,9 +919,9 @@ function InlineTextEditor({
 }
 
 // src/design-canvas-react/components/Workspace.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var SNAP_THRESHOLD_SCREEN_PX = 8;
-var DUPLICATE_OFFSET2 = 10;
+var DUPLICATE_OFFSET = 10;
 var ZOOM_FACTOR_WHEEL = 0.998;
 var ZOOM_MIN = 0.05;
 var ZOOM_MAX = 32;
@@ -1098,7 +937,8 @@ function WorkspaceView({
   onExport,
   onExportRef,
   fitOnMount = true,
-  onReady
+  onReady,
+  render = lightTheme.canvasRender
 }) {
   const [, setTick] = useState2(0);
   const forceRender = useCallback(() => setTick((t) => t + 1), []);
@@ -1195,19 +1035,17 @@ function WorkspaceView({
       return;
     }
     if (e.button !== 0) return;
-    const stage = stageRef.current;
     const rect = containerRef.current?.getBoundingClientRect();
-    if (!stage || !rect) return;
+    if (!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") {
+    const docPos = zoomPanMath.screenToDocument({ zoom, panX, panY }, screenX, screenY);
+    if (hitTestPoint(activePage, docPos.x, docPos.y) !== null) {
       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);
@@ -1285,9 +1123,24 @@ function WorkspaceView({
     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];
+    let snappedX = finalX;
+    let snappedY = finalY;
+    if (snapEnabled) {
+      const snapBounds = { x: finalX, y: finalY, width: origin.width, height: origin.height };
+      const targets = snapEngine.collectTargets(state, draggingIds);
+      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);
+      snappedX = snapResult.x;
+      snappedY = snapResult.y;
+    }
+    const dx = snappedX - origin.x;
+    const dy = snappedY - origin.y;
     if (draggingIds.length === 1) {
       const el = findElement(activePage, elementId)?.element;
       if (!el) return;
@@ -1295,7 +1148,7 @@ function WorkspaceView({
         setAttrsCommand({
           pageId: activePageId,
           elementId,
-          attrs: { x: finalX, y: finalY },
+          attrs: { x: snappedX, y: snappedY },
           priorAttrs: { x: el.x, y: el.y }
         })
       );
@@ -1372,6 +1225,7 @@ function WorkspaceView({
     if (editingElementId) return;
     if ((e.key === "Delete" || e.key === "Backspace") && selectedElementIds.length > 0) {
       e.preventDefault();
+      e.stopPropagation();
       for (const id of [...selectedElementIds]) {
         try {
           persist(deleteElementCommand({ document, pageId: activePageId, elementId: id }));
@@ -1383,11 +1237,13 @@ function WorkspaceView({
     }
     if (mod && e.key === "z" && !e.shiftKey) {
       e.preventDefault();
+      e.stopPropagation();
       if (stack.canUndo()) stack.undo();
       return;
     }
     if (mod && (e.key === "z" && e.shiftKey || e.key === "y")) {
       e.preventDefault();
+      e.stopPropagation();
       if (stack.canRedo()) stack.redo();
       return;
     }
@@ -1405,8 +1261,8 @@ function WorkspaceView({
         const clone = {
           ...structuredClone(found.element),
           id: crypto.randomUUID(),
-          x: found.element.x + DUPLICATE_OFFSET2,
-          y: found.element.y + DUPLICATE_OFFSET2
+          x: found.element.x + DUPLICATE_OFFSET,
+          y: found.element.y + DUPLICATE_OFFSET
         };
         persist(addElementCommand({ pageId: activePageId, element: clone }));
       }
@@ -1442,7 +1298,7 @@ function WorkspaceView({
         }
         nudgeHeldRef.current = { key, ids: selectedElementIds.slice(), origin: origins };
       }
-      const { dx, dy } = nudgeDelta2(key, e.shiftKey);
+      const { dx, dy } = nudgeDelta(key, e.shiftKey);
       const entries = [];
       for (const [id, orig] of nudgeHeldRef.current.origin) {
         const found = findElement(activePage, id);
@@ -1518,7 +1374,40 @@ function WorkspaceView({
   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(
+  const handlerImplRef = useRef4({
+    onClick: handleElementClick,
+    onDragStart: handleElementDragStart,
+    onDragMove: handleElementDragMove,
+    onDragEnd: handleElementDragEnd,
+    onDoubleClick: handleElementDoubleClick
+  });
+  handlerImplRef.current = {
+    onClick: handleElementClick,
+    onDragStart: handleElementDragStart,
+    onDragMove: handleElementDragMove,
+    onDragEnd: handleElementDragEnd,
+    onDoubleClick: handleElementDoubleClick
+  };
+  const onElementClick = useCallback((id) => handlerImplRef.current.onClick(id), []);
+  const onElementDragStart = useCallback((id) => handlerImplRef.current.onDragStart(id), []);
+  const onElementDragMove = useCallback(
+    (id, dx, dy) => handlerImplRef.current.onDragMove(id, dx, dy),
+    []
+  );
+  const onElementDragEnd = useCallback(
+    (id, x, y) => handlerImplRef.current.onDragEnd(id, x, y),
+    []
+  );
+  const onElementDoubleClick = useCallback((id) => handlerImplRef.current.onDoubleClick(id), []);
+  const visibleElements = useMemo(() => {
+    const pageRect = { x: 0, y: 0, width: activePage.width, height: activePage.height };
+    const pinned = new Set(selectedElementIds);
+    if (editingElementId) pinned.add(editingElementId);
+    return activePage.elements.filter(
+      (el) => pinned.has(el.id) || boundsIntersect(elementAabb(el), pageRect)
+    );
+  }, [activePage.elements, activePage.width, activePage.height, selectedElementIds, editingElementId]);
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: `design-canvas-workspace relative overflow-hidden bg-[var(--canvas-backdrop,#1a1a1a)] outline-none ${className ?? ""}`,
@@ -1532,7 +1421,7 @@ function WorkspaceView({
       onKeyUp: handleKeyUp,
       style: { cursor: spaceHeldRef.current ? "grab" : "default" },
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs2(
           Stage,
           {
             ref: stageRef,
@@ -1547,10 +1436,13 @@ function WorkspaceView({
                   pageWidth: activePage.width,
                   pageHeight: activePage.height,
                   gridSize,
-                  zoom
+                  zoom,
+                  panX,
+                  panY,
+                  color: render.grid
                 }
               ),
-              /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsxs3(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: [
+              /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsxs2(Group3, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: [
                 /* @__PURE__ */ jsx6(
                   Rect2,
                   {
@@ -1567,37 +1459,39 @@ function WorkspaceView({
                   }
                 ),
                 /* @__PURE__ */ jsx6(
-                  Group2,
+                  Group3,
                   {
                     clipX: 0,
                     clipY: 0,
                     clipWidth: activePage.width,
                     clipHeight: activePage.height,
-                    children: activePage.elements.map((element) => /* @__PURE__ */ jsx6(
+                    children: visibleElements.map((element) => /* @__PURE__ */ jsx6(
                       ElementNode,
                       {
                         element,
                         isSelected: selectedElementIds.includes(element.id),
                         zoom,
-                        onClick: handleElementClick,
-                        onDragStart: handleElementDragStart,
-                        onDragMove: handleElementDragMove,
-                        onDragEnd: handleElementDragEnd,
-                        onDoubleClick: handleElementDoubleClick
+                        render,
+                        onClick: onElementClick,
+                        onDragStart: onElementDragStart,
+                        onDragMove: onElementDragMove,
+                        onDragEnd: onElementDragEnd,
+                        onDoubleClick: onElementDoubleClick
                       },
                       element.id
                     ))
                   }
                 )
               ] }) }),
-              (activeVerticalGuide || activeHorizontalGuide) && /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsx6(Group2, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx6(
+              (activeVerticalGuide || activeHorizontalGuide) && /* @__PURE__ */ jsx6(Layer4, { children: /* @__PURE__ */ jsx6(Group3, { x: panX, y: panY, scaleX: zoom, scaleY: zoom, children: /* @__PURE__ */ jsx6(
                 SnapGuidesOverlay,
                 {
                   pageWidth: activePage.width,
                   pageHeight: activePage.height,
                   activeVertical: activeVerticalGuide,
                   activeHorizontal: activeHorizontalGuide,
-                  zoom
+                  zoom,
+                  render
                 }
               ) }) }),
               /* @__PURE__ */ jsx6(
@@ -1608,7 +1502,8 @@ function WorkspaceView({
                   selectedElements,
                   canWrite,
                   onTransformEnd: handleTransformEnd,
-                  pageId: activePageId
+                  pageId: activePageId,
+                  render
                 }
               )
             ]
@@ -1691,7 +1586,8 @@ function Workspace(props) {
       canWrite: props.canWrite,
       onApplyOperations: props.onApplyOperations,
       onSelectionChange: props.onSelectionChange,
-      className: props.className
+      className: props.className,
+      render: props.render
     }
   );
 }
@@ -1852,7 +1748,8 @@ function DesignCanvasEditor(props) {
             onExport: props.onExport,
             onExportRef: ctx.onExportRef,
             fitOnMount: ctx.fitOnMount,
-            onReady: ctx.onReady
+            onReady: ctx.onReady,
+            render: ctx.render
           }
         );
       },
@@ -1862,17 +1759,6 @@ function DesignCanvasEditor(props) {
 }
 
 export {
-  createSnapEngine,
-  collectGridTargets,
-  marqueeSelect,
-  nudgeDelta,
-  DUPLICATE_OFFSET,
-  createZoomPanMath,
-  isExportHiddenNodeName,
-  resolveExportParams,
-  identifyTaintedSrc,
-  isCrossOriginSrc,
-  documentCropToStageCoords,
   exportPageDataUrl,
   exportDocumentJson,
   downloadDataUrl,
@@ -1886,4 +1772,4 @@ export {
   Workspace,
   DesignCanvasEditor
 };
-//# sourceMappingURL=chunk-FSUR2752.js.map
+//# sourceMappingURL=chunk-7I37CO5D.js.map