@anuma/sdk 1.0.0 → 1.1.0

package/dist/design/index.cjs

@@ -0,0 +1,1523 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/design/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CanvasOverlays: () => CanvasOverlays,
+  NON_SELECTABLE_TAGS: () => NON_SELECTABLE_TAGS,
+  RESIZE_HANDLE_CURSORS: () => RESIZE_HANDLE_CURSORS,
+  RESIZE_HANDLE_DIRS: () => RESIZE_HANDLE_DIRS,
+  canMultiDrag: () => canMultiDrag,
+  commitDrop: () => commitDrop,
+  commitMultiDrag: () => commitMultiDrag,
+  commitResize: () => commitResize,
+  commitRotation: () => commitRotation,
+  commitTextChange: () => commitTextChange,
+  computeFlexDropTarget: () => computeFlexDropTarget,
+  computeSnap: () => computeSnap,
+  containerLayoutMode: () => containerLayoutMode,
+  findContainerAt: () => findContainerAt,
+  findElementIdFromEvent: () => findElementIdFromEvent,
+  findElementsInRect: () => findElementsInRect,
+  findResizeHandleFromEvent: () => findResizeHandleFromEvent,
+  findRotateHandleFromEvent: () => findRotateHandleFromEvent,
+  getLayoutModeOf: () => getLayoutModeOf,
+  getStageRelativeBounds: () => getStageRelativeBounds,
+  getTextContent: () => getTextContent,
+  isFlexChild: () => isFlexChild,
+  resolveDropTarget: () => resolveDropTarget,
+  unionBounds: () => unionBounds,
+  useCanvasGestures: () => useCanvasGestures,
+  useCanvasKeyboard: () => useCanvasKeyboard,
+  useDeckHistory: () => useDeckHistory,
+  useMultiSelectionBounds: () => useMultiSelectionBounds,
+  useSelectionBounds: () => useSelectionBounds
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/tools/slides/jsx.ts
+var import_parser = require("@babel/parser");
+var ANUMA_TAGS = [
+  "Deck",
+  "Slide",
+  "Screen",
+  "Group",
+  "Text",
+  "Span",
+  "Image",
+  "Rect",
+  "Circle",
+  "Line",
+  "Icon"
+];
+var ANUMA_TAG_SET = new Set(ANUMA_TAGS);
+var STYLE_ALLOWED_KEYS = /* @__PURE__ */ new Set([
+  "alignItems",
+  "alignSelf",
+  "background",
+  "backgroundColor",
+  "backgroundImage",
+  "backgroundPosition",
+  "backgroundRepeat",
+  "backgroundSize",
+  "border",
+  "borderColor",
+  "borderRadius",
+  "borderStyle",
+  "borderWidth",
+  "bottom",
+  "boxShadow",
+  "boxSizing",
+  "color",
+  "display",
+  "filter",
+  "flex",
+  "flexBasis",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "gap",
+  "height",
+  "justifyContent",
+  "left",
+  "letterSpacing",
+  "lineHeight",
+  "listStyle",
+  "margin",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+  "marginTop",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "objectFit",
+  "objectPosition",
+  "opacity",
+  "overflow",
+  "overflowX",
+  "overflowY",
+  "padding",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+  "paddingTop",
+  "position",
+  "right",
+  "textAlign",
+  "textDecoration",
+  "textTransform",
+  "top",
+  "transform",
+  "transformOrigin",
+  "verticalAlign",
+  "visibility",
+  "whiteSpace",
+  "width",
+  "wordBreak",
+  "wordSpacing",
+  "zIndex"
+]);
+var STYLE_KEY_LOWER_TO_CAMEL = new Map(
+  Array.from(STYLE_ALLOWED_KEYS, (k) => [k.toLowerCase(), k])
+);
+function getId(node) {
+  const id = node.attrs.id;
+  return typeof id === "string" ? id : void 0;
+}
+function walk(root, visitor) {
+  function visit(node, parent) {
+    const cont = visitor(node, parent);
+    if (cont === false) return;
+    for (const child of node.children) {
+      if (typeof child !== "string") visit(child, node);
+    }
+  }
+  visit(root, null);
+}
+function findById(root, id) {
+  let found = null;
+  walk(root, (node) => {
+    if (getId(node) === id) {
+      found = node;
+      return false;
+    }
+    return void 0;
+  });
+  return found;
+}
+function findParentOfId(root, id) {
+  let parent = null;
+  walk(root, (node, p) => {
+    if (getId(node) === id) {
+      parent = p;
+      return false;
+    }
+    return void 0;
+  });
+  return parent;
+}
+function removeById(root, id) {
+  let removed = false;
+  walk(root, (node) => {
+    if (removed) return false;
+    for (let i = 0; i < node.children.length; i++) {
+      const child = node.children[i];
+      if (typeof child !== "string" && getId(child) === id) {
+        node.children.splice(i, 1);
+        removed = true;
+        return false;
+      }
+    }
+    return void 0;
+  });
+  return removed;
+}
+
+// src/design/dragLogic.ts
+var NON_SELECTABLE_TAGS = /* @__PURE__ */ new Set(["Deck", "Slide", "Screen"]);
+function getLayoutModeOf(deck, childId) {
+  const parent = findParentOfId(deck, childId);
+  if (!parent) return "absolute";
+  const layout = parent.attrs.layout;
+  if (layout === "row") return "flex-row";
+  if (layout === "column") return "flex-column";
+  return "absolute";
+}
+function isFlexChild(deck, childId) {
+  const mode = getLayoutModeOf(deck, childId);
+  return mode === "flex-row" || mode === "flex-column";
+}
+function clone(deck) {
+  return structuredClone(deck);
+}
+function containerLayoutMode(node) {
+  if (node.attrs.layout === "row") return "flex-row";
+  if (node.attrs.layout === "column") return "flex-column";
+  return "absolute";
+}
+function commitDrop(deck, elementId, target) {
+  const elOrig = findById(deck, elementId);
+  const parentOrig = findParentOfId(deck, elementId);
+  if (!elOrig || !parentOrig) return deck;
+  if (!findById(deck, target.parentId)) return deck;
+  const sameParentOrig = getId2(parentOrig) === target.parentId;
+  if (sameParentOrig) {
+    if (target.kind === "absolute") {
+      if (elOrig.attrs.x === target.x && elOrig.attrs.y === target.y && elOrig.attrs.w === target.w && elOrig.attrs.h === target.h) {
+        return deck;
+      }
+    } else {
+      const currentIdx = parentOrig.children.findIndex(
+        (c) => typeof c !== "string" && getId2(c) === elementId
+      );
+      if (target.dropIndex === currentIdx && elOrig.attrs.x === void 0 && elOrig.attrs.y === void 0) {
+        return deck;
+      }
+    }
+  }
+  const next = clone(deck);
+  const el = findById(next, elementId);
+  const currentParent = findParentOfId(next, elementId);
+  const newParent = findById(next, target.parentId);
+  if (!el || !currentParent || !newParent) return deck;
+  const currentParentId = getId2(currentParent);
+  const sameParent = currentParentId === target.parentId;
+  if (target.kind === "absolute") {
+    el.attrs.x = target.x;
+    el.attrs.y = target.y;
+    el.attrs.w = target.w;
+    el.attrs.h = target.h;
+    if (sameParent) {
+      return next;
+    }
+  } else {
+    delete el.attrs.x;
+    delete el.attrs.y;
+  }
+  const oldIdx = currentParent.children.findIndex(
+    (c) => typeof c !== "string" && getId2(c) === elementId
+  );
+  if (oldIdx === -1) return deck;
+  currentParent.children.splice(oldIdx, 1);
+  if (target.kind === "flex") {
+    const np = findById(next, target.parentId);
+    if (!np) return deck;
+    const clamped = Math.max(0, Math.min(target.dropIndex, np.children.length));
+    np.children.splice(clamped, 0, el);
+  } else {
+    const np = findById(next, target.parentId);
+    if (!np) return deck;
+    np.children.push(el);
+  }
+  return next;
+}
+function getId2(node) {
+  return typeof node.attrs.id === "string" ? node.attrs.id : void 0;
+}
+var RESIZE_HANDLE_DIRS = {
+  nw: { dx: -1, dy: -1 },
+  n: { dx: 0, dy: -1 },
+  ne: { dx: 1, dy: -1 },
+  e: { dx: 1, dy: 0 },
+  se: { dx: 1, dy: 1 },
+  s: { dx: 0, dy: 1 },
+  sw: { dx: -1, dy: 1 },
+  w: { dx: -1, dy: 0 }
+};
+var RESIZE_HANDLE_CURSORS = {
+  nw: "nwse-resize",
+  se: "nwse-resize",
+  ne: "nesw-resize",
+  sw: "nesw-resize",
+  n: "ns-resize",
+  s: "ns-resize",
+  e: "ew-resize",
+  w: "ew-resize"
+};
+function commitResize(deck, elementId, bounds) {
+  const next = clone(deck);
+  const el = findById(next, elementId);
+  if (!el) return deck;
+  const parent = findParentOfId(next, elementId);
+  const layout = parent?.attrs.layout;
+  if (layout === "column") {
+    el.attrs.h = bounds.h;
+  } else if (layout === "row") {
+    el.attrs.w = bounds.w;
+  } else {
+    el.attrs.x = bounds.x;
+    el.attrs.y = bounds.y;
+    el.attrs.w = bounds.w;
+    el.attrs.h = bounds.h;
+  }
+  return next;
+}
+function commitRotation(deck, elementId, rotation) {
+  const next = clone(deck);
+  const el = findById(next, elementId);
+  if (!el) return deck;
+  el.attrs.rotation = rotation;
+  return next;
+}
+function canMultiDrag(deck, ids) {
+  if (ids.length <= 1) return false;
+  const firstId = ids[0];
+  if (firstId === void 0) return false;
+  const firstParent = findParentOfId(deck, firstId);
+  if (!firstParent) return false;
+  if (firstParent.attrs.layout === "row" || firstParent.attrs.layout === "column") return false;
+  for (const id of ids) {
+    if (findParentOfId(deck, id) !== firstParent) return false;
+  }
+  return true;
+}
+function commitMultiDrag(deck, elementIds, delta) {
+  if (elementIds.length === 0) return deck;
+  if (delta.x === 0 && delta.y === 0) return deck;
+  const next = clone(deck);
+  let any = false;
+  for (const id of elementIds) {
+    const el = findById(next, id);
+    if (!el) continue;
+    if (typeof el.attrs.x !== "number" || typeof el.attrs.y !== "number") continue;
+    el.attrs.x += delta.x;
+    el.attrs.y += delta.y;
+    any = true;
+  }
+  return any ? next : deck;
+}
+function commitTextChange(deck, elementId, newText) {
+  const existing = findById(deck, elementId);
+  if (!existing) return deck;
+  if (getTextContent(existing) === newText) return deck;
+  const next = clone(deck);
+  const el = findById(next, elementId);
+  if (!el) return deck;
+  el.children = [newText];
+  return next;
+}
+function getTextContent(node) {
+  return node.children.filter((c) => typeof c === "string").join("");
+}
+
+// src/design/dropTarget.ts
+function computeFlexDropTarget(stage, parentId, draggedId, axis, pointerClient, scale) {
+  const parentEl = stage.querySelector(`[data-id="${parentId}"]`);
+  if (!parentEl) return { index: 0, bounds: null };
+  const stageRect = stage.getBoundingClientRect();
+  const siblings = Array.from(parentEl.children).filter(
+    (el) => el instanceof HTMLElement && typeof el.dataset.id === "string" && el.dataset.id !== draggedId
+  );
+  if (siblings.length === 0) {
+    const pr = parentEl.getBoundingClientRect();
+    return {
+      index: 0,
+      bounds: {
+        x: (pr.left - stageRect.left) / scale,
+        y: (pr.top - stageRect.top) / scale,
+        w: pr.width / scale,
+        h: 2
+      }
+    };
+  }
+  const siblingRects = siblings.map((el) => el.getBoundingClientRect());
+  let dropIndex = siblings.length;
+  for (let i = 0; i < siblingRects.length; i++) {
+    const r = siblingRects[i];
+    const center = axis === "column" ? r.top + r.height / 2 : r.left + r.width / 2;
+    const p = axis === "column" ? pointerClient.y : pointerClient.x;
+    if (p < center) {
+      dropIndex = i;
+      break;
+    }
+  }
+  const parentRect = parentEl.getBoundingClientRect();
+  const first = siblingRects[0];
+  const last = siblingRects[siblingRects.length - 1];
+  let lineClient;
+  if (axis === "column") {
+    let yClient;
+    if (dropIndex === 0) yClient = first.top;
+    else if (dropIndex === siblingRects.length) yClient = last.bottom;
+    else {
+      const a = siblingRects[dropIndex - 1];
+      const b = siblingRects[dropIndex];
+      yClient = (a.bottom + b.top) / 2;
+    }
+    lineClient = {
+      left: parentRect.left,
+      top: yClient,
+      width: parentRect.width,
+      height: 2
+    };
+  } else {
+    let xClient;
+    if (dropIndex === 0) xClient = first.left;
+    else if (dropIndex === siblingRects.length) xClient = last.right;
+    else {
+      const a = siblingRects[dropIndex - 1];
+      const b = siblingRects[dropIndex];
+      xClient = (a.right + b.left) / 2;
+    }
+    lineClient = {
+      left: xClient,
+      top: parentRect.top,
+      width: 2,
+      height: parentRect.height
+    };
+  }
+  return {
+    index: dropIndex,
+    bounds: {
+      x: (lineClient.left - stageRect.left) / scale,
+      y: (lineClient.top - stageRect.top) / scale,
+      w: lineClient.width / scale,
+      h: lineClient.height / scale
+    }
+  };
+}
+function findContainerAt(stage, draggedId, pointerClient) {
+  if (typeof document === "undefined") return null;
+  const draggedEl = stage.querySelector(`[data-id="${draggedId}"]`);
+  const candidates = document.elementsFromPoint(pointerClient.x, pointerClient.y);
+  for (const el of candidates) {
+    if (!(el instanceof HTMLElement)) continue;
+    if (!stage.contains(el)) continue;
+    if (draggedEl && (el === draggedEl || draggedEl.contains(el))) continue;
+    const tag = el.dataset.anumaTag;
+    if (tag === "Slide" || tag === "Screen" || tag === "Group") return el;
+  }
+  return null;
+}
+function resolveDropTarget(deck, stage, draggedId, pointerClient, scale) {
+  const containerEl = findContainerAt(stage, draggedId, pointerClient);
+  if (!containerEl) return null;
+  const parentId = containerEl.dataset.id;
+  if (!parentId) return null;
+  const parentNode = findById(deck, parentId);
+  if (!parentNode) return null;
+  const layout = parentNode.attrs.layout;
+  if (layout === "row" || layout === "column") {
+    const t = computeFlexDropTarget(stage, parentId, draggedId, layout, pointerClient, scale);
+    return {
+      drop: { kind: "flex", parentId, dropIndex: t.index },
+      indicatorBounds: t.bounds
+    };
+  }
+  const draggedEl = stage.querySelector(`[data-id="${draggedId}"]`);
+  if (!draggedEl) return null;
+  const dr = draggedEl.getBoundingClientRect();
+  const cr = containerEl.getBoundingClientRect();
+  const draggedNode = findById(deck, draggedId);
+  const w = typeof draggedNode?.attrs.w === "number" ? draggedNode.attrs.w : dr.width / scale;
+  const h = typeof draggedNode?.attrs.h === "number" ? draggedNode.attrs.h : dr.height / scale;
+  const centerClientX = dr.left + dr.width / 2;
+  const centerClientY = dr.top + dr.height / 2;
+  const topLeftClientX = centerClientX - w * scale / 2;
+  const topLeftClientY = centerClientY - h * scale / 2;
+  return {
+    drop: {
+      kind: "absolute",
+      parentId,
+      x: (topLeftClientX - cr.left) / scale,
+      y: (topLeftClientY - cr.top) / scale,
+      w,
+      h
+    },
+    indicatorBounds: null
+  };
+}
+
+// src/design/eventHelpers.ts
+function findElementIdFromEvent(e, root) {
+  const native = "nativeEvent" in e ? e.nativeEvent : e;
+  const path = typeof native.composedPath === "function" ? native.composedPath() : [];
+  for (const node of path) {
+    if (root && node === root) break;
+    if (!(node instanceof HTMLElement)) continue;
+    const id = node.dataset.id;
+    const tag = node.dataset.anumaTag;
+    if (id && tag && !NON_SELECTABLE_TAGS.has(tag)) return id;
+  }
+  return null;
+}
+var RESIZE_HANDLE_NAMES = /* @__PURE__ */ new Set(["nw", "n", "ne", "e", "se", "s", "sw", "w"]);
+function findResizeHandleFromEvent(e) {
+  const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+  for (const node of path) {
+    if (!(node instanceof HTMLElement)) continue;
+    const dir = node.dataset.resizeHandle;
+    if (dir && RESIZE_HANDLE_NAMES.has(dir)) return dir;
+  }
+  return null;
+}
+function findRotateHandleFromEvent(e) {
+  const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+  for (const node of path) {
+    if (!(node instanceof HTMLElement)) continue;
+    if (node.dataset.rotateHandle === "true") return true;
+  }
+  return false;
+}
+function findElementsInRect(stage, rect) {
+  const ids = [];
+  const els = stage.querySelectorAll("[data-id]");
+  for (const el of els) {
+    const tag = el.dataset.anumaTag;
+    if (tag && NON_SELECTABLE_TAGS.has(tag)) continue;
+    const id = el.dataset.id;
+    if (!id) continue;
+    const er = el.getBoundingClientRect();
+    const cx = er.left + er.width / 2;
+    const cy = er.top + er.height / 2;
+    if (cx >= rect.left && cx <= rect.right && cy >= rect.top && cy <= rect.bottom) {
+      ids.push(id);
+    }
+  }
+  return ids;
+}
+
+// src/design/overlays.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var HANDLE_SIZE = 10;
+var ROTATE_HANDLE_OFFSET = 28;
+var PRIMARY_COLOR = "#2563eb";
+var SNAP_COLOR = "#ec4899";
+function CanvasOverlays({
+  gesture,
+  selectedId,
+  selectedIds,
+  selectionBounds,
+  multiBounds,
+  editingId,
+  deck,
+  scale
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SelectionWithHandles,
+      {
+        selectedId,
+        selectionBounds,
+        gesture,
+        deck,
+        scale,
+        editingId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      MultiSelectionOutlines,
+      {
+        bounds: multiBounds,
+        scale,
+        visible: selectedIds.size > 1 && !editingId && !isDragOrRotate(gesture)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MarqueeRect, { gesture }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SnapGuideLines, { gesture, scale }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FlexDropIndicator, { gesture, scale })
+  ] });
+}
+function isDragOrRotate(gesture) {
+  return gesture?.phase === "dragging" || gesture?.phase === "rotating";
+}
+function MultiSelectionOutlines({
+  bounds,
+  scale,
+  visible
+}) {
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: bounds.map((b) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: b.x * scale,
+        top: b.y * scale,
+        width: b.w * scale,
+        height: b.h * scale,
+        transform: b.rotation !== 0 ? `rotate(${b.rotation}deg)` : void 0,
+        transformOrigin: "50% 50%",
+        border: `1.5px solid ${PRIMARY_COLOR}`,
+        boxSizing: "border-box",
+        pointerEvents: "none"
+      }
+    },
+    b.id
+  )) });
+}
+function MarqueeRect({ gesture }) {
+  if (gesture?.phase !== "marquee") return null;
+  const left = Math.min(gesture.startClient.x, gesture.currentClient.x);
+  const top = Math.min(gesture.startClient.y, gesture.currentClient.y);
+  const width = Math.abs(gesture.currentClient.x - gesture.startClient.x);
+  const height = Math.abs(gesture.currentClient.y - gesture.startClient.y);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        left,
+        top,
+        width,
+        height,
+        border: `1px solid ${PRIMARY_COLOR}`,
+        background: "rgba(37, 99, 235, 0.08)",
+        pointerEvents: "none"
+      }
+    }
+  );
+}
+function SnapGuideLines({ gesture, scale }) {
+  if (gesture?.phase !== "dragging") return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: gesture.guides.map((g, i) => {
+    const isVertical = g.axis === "x";
+    const style = isVertical ? {
+      position: "absolute",
+      left: g.position * scale - 0.5,
+      top: g.start * scale,
+      width: 1,
+      height: (g.end - g.start) * scale,
+      background: SNAP_COLOR,
+      pointerEvents: "none"
+    } : {
+      position: "absolute",
+      left: g.start * scale,
+      top: g.position * scale - 0.5,
+      width: (g.end - g.start) * scale,
+      height: 1,
+      background: SNAP_COLOR,
+      pointerEvents: "none"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style }, i);
+  }) });
+}
+function FlexDropIndicator({ gesture, scale }) {
+  if (gesture?.phase !== "dragging" || !gesture.indicatorBounds) return null;
+  const { x, y, w, h } = gesture.indicatorBounds;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: x * scale,
+        top: y * scale,
+        width: Math.max(w * scale, 2),
+        height: Math.max(h * scale, 2),
+        background: PRIMARY_COLOR,
+        pointerEvents: "none",
+        borderRadius: 1
+      }
+    }
+  );
+}
+function visibleResizeHandles(deck, selectedId) {
+  const mode = getLayoutModeOf(deck, selectedId);
+  if (mode === "absolute") return ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+  if (mode === "flex-column") return ["s"];
+  return ["e"];
+}
+function SelectionWithHandles({
+  selectedId,
+  selectionBounds,
+  gesture,
+  deck,
+  scale,
+  editingId
+}) {
+  if (!selectedId || editingId || isDragOrRotate(gesture)) return null;
+  const bounds = gesture?.phase === "resizing" ? gesture.currentBounds : selectionBounds;
+  if (!bounds) return null;
+  const rotation = gesture?.phase === "resizing" ? gesture.rotation : selectionBounds?.rotation ?? 0;
+  const visibleHandles = visibleResizeHandles(deck, selectedId);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: bounds.x * scale,
+        top: bounds.y * scale,
+        width: bounds.w * scale,
+        height: bounds.h * scale,
+        transform: rotation !== 0 ? `rotate(${rotation}deg)` : void 0,
+        transformOrigin: "50% 50%",
+        // Outline frame is non-interactive; only the handles below are.
+        // Lets clicks fall through to the element body for drag selection.
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              border: `2px solid ${PRIMARY_COLOR}`,
+              boxSizing: "border-box"
+            }
+          }
+        ),
+        visibleHandles.map((handle) => {
+          const dir = RESIZE_HANDLE_DIRS[handle];
+          const cxLocal = bounds.w * (dir.dx + 1) / 2;
+          const cyLocal = bounds.h * (dir.dy + 1) / 2;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              "data-resize-handle": handle,
+              style: {
+                position: "absolute",
+                left: cxLocal * scale - HANDLE_SIZE / 2,
+                top: cyLocal * scale - HANDLE_SIZE / 2,
+                width: HANDLE_SIZE,
+                height: HANDLE_SIZE,
+                background: "#fff",
+                border: `1.5px solid ${PRIMARY_COLOR}`,
+                borderRadius: "50%",
+                cursor: RESIZE_HANDLE_CURSORS[handle],
+                boxSizing: "border-box",
+                pointerEvents: "auto"
+              }
+            },
+            handle
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            "data-rotate-handle": "true",
+            style: {
+              position: "absolute",
+              left: bounds.w / 2 * scale - HANDLE_SIZE / 2,
+              top: -ROTATE_HANDLE_OFFSET * scale - HANDLE_SIZE / 2,
+              width: HANDLE_SIZE,
+              height: HANDLE_SIZE,
+              background: "#fff",
+              border: `1.5px solid ${PRIMARY_COLOR}`,
+              borderRadius: "50%",
+              cursor: "grab",
+              boxSizing: "border-box",
+              pointerEvents: "auto"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/design/snap.ts
+function getStageRelativeBounds(el, stage, scale) {
+  const sr = stage.getBoundingClientRect();
+  const er = el.getBoundingClientRect();
+  return {
+    left: (er.left - sr.left) / scale,
+    right: (er.right - sr.left) / scale,
+    top: (er.top - sr.top) / scale,
+    bottom: (er.bottom - sr.top) / scale,
+    cx: (er.left + er.width / 2 - sr.left) / scale,
+    cy: (er.top + er.height / 2 - sr.top) / scale
+  };
+}
+function unionBounds(arr) {
+  if (arr.length === 0) return null;
+  let left = Infinity;
+  let right = -Infinity;
+  let top = Infinity;
+  let bottom = -Infinity;
+  for (const b of arr) {
+    if (b.left < left) left = b.left;
+    if (b.right > right) right = b.right;
+    if (b.top < top) top = b.top;
+    if (b.bottom > bottom) bottom = b.bottom;
+  }
+  return {
+    left,
+    right,
+    top,
+    bottom,
+    cx: (left + right) / 2,
+    cy: (top + bottom) / 2
+  };
+}
+var X_KEYS = ["left", "cx", "right"];
+var Y_KEYS = ["top", "cy", "bottom"];
+function findBestAxisMatch(moved, others, keys, thresholdSlide) {
+  let best = null;
+  for (const o of others) {
+    for (const dk of keys) {
+      for (const ok of keys) {
+        const adjust = o[ok] - moved[dk];
+        if (Math.abs(adjust) > thresholdSlide) continue;
+        if (!best || Math.abs(adjust) < Math.abs(best.adjust)) {
+          best = { adjust, pos: o[ok], other: o };
+        }
+      }
+    }
+  }
+  return best;
+}
+function computeSnap(start, rawDelta, others, thresholdSlide) {
+  const moved = {
+    left: start.left + rawDelta.x,
+    right: start.right + rawDelta.x,
+    cx: start.cx + rawDelta.x,
+    top: start.top + rawDelta.y,
+    bottom: start.bottom + rawDelta.y,
+    cy: start.cy + rawDelta.y
+  };
+  const bestX = findBestAxisMatch(moved, others, X_KEYS, thresholdSlide);
+  const bestY = findBestAxisMatch(moved, others, Y_KEYS, thresholdSlide);
+  const delta = {
+    x: rawDelta.x + (bestX?.adjust ?? 0),
+    y: rawDelta.y + (bestY?.adjust ?? 0)
+  };
+  const guides = [];
+  if (bestX) {
+    const top = start.top + delta.y;
+    const bottom = start.bottom + delta.y;
+    guides.push({
+      axis: "x",
+      position: bestX.pos,
+      start: Math.min(top, bestX.other.top),
+      end: Math.max(bottom, bestX.other.bottom)
+    });
+  }
+  if (bestY) {
+    const left = start.left + delta.x;
+    const right = start.right + delta.x;
+    guides.push({
+      axis: "y",
+      position: bestY.pos,
+      start: Math.min(left, bestY.other.left),
+      end: Math.max(right, bestY.other.right)
+    });
+  }
+  return { delta, guides };
+}
+
+// src/design/useCanvasGestures.ts
+var import_react = require("react");
+
+// src/design/transitions.ts
+var RESIZE_MIN = 8;
+var DRAG_THRESHOLD_SQ = 4 * 4;
+var SNAP_THRESHOLD_CLIENT = 5;
+function detectHandleGesture(e, deck, selectedId, stage, pointer, scale) {
+  if (!selectedId || !stage) return null;
+  if (findRotateHandleFromEvent(e)) {
+    return startRotateGesture(deck, stage, selectedId, pointer);
+  }
+  const handle = findResizeHandleFromEvent(e);
+  if (handle) {
+    return startResizeGesture(deck, stage, selectedId, handle, pointer, scale);
+  }
+  return null;
+}
+function startRotateGesture(deck, stage, selectedId, pointer) {
+  const el = stage.querySelector(`[data-id="${selectedId}"]`);
+  if (!el) return null;
+  const er = el.getBoundingClientRect();
+  const centerClient = {
+    x: er.left + er.width / 2,
+    y: er.top + er.height / 2
+  };
+  const startAngle = Math.atan2(pointer.y - centerClient.y, pointer.x - centerClient.x);
+  const node = findById(deck, selectedId);
+  const startRotation = typeof node?.attrs.rotation === "number" ? node.attrs.rotation : 0;
+  return {
+    phase: "rotating",
+    elementId: selectedId,
+    centerClient,
+    startAngle,
+    startRotation,
+    currentRotation: startRotation
+  };
+}
+function startResizeGesture(deck, stage, selectedId, handle, pointer, scale) {
+  const el = stage.querySelector(`[data-id="${selectedId}"]`);
+  if (!el) return null;
+  const node = findById(deck, selectedId);
+  if (!node) return null;
+  const sr = stage.getBoundingClientRect();
+  const er = el.getBoundingClientRect();
+  const startCenter = {
+    x: (er.left + er.width / 2 - sr.left) / scale,
+    y: (er.top + er.height / 2 - sr.top) / scale
+  };
+  const w = typeof node.attrs.w === "number" ? node.attrs.w : er.width / scale;
+  const h = typeof node.attrs.h === "number" ? node.attrs.h : er.height / scale;
+  const rotation = typeof node.attrs.rotation === "number" ? node.attrs.rotation : 0;
+  const startBounds = {
+    x: startCenter.x - w / 2,
+    y: startCenter.y - h / 2,
+    w,
+    h
+  };
+  return {
+    phase: "resizing",
+    elementId: selectedId,
+    handle,
+    startClient: pointer,
+    startBounds,
+    startCenter,
+    rotation,
+    layoutMode: getLayoutModeOf(deck, selectedId),
+    currentBounds: startBounds
+  };
+}
+function promotePendingToDragging(pending, deck, stage, pointer, scale, currentSelection) {
+  if (pending.elementId === null) return null;
+  const elementId = pending.elementId;
+  const resolved = resolveDropTarget(deck, stage, elementId, pointer, scale);
+  const ids = Array.from(currentSelection);
+  const elementIds = canMultiDrag(deck, ids) ? ids : [elementId];
+  const startBoundsList = [];
+  for (const id of elementIds) {
+    const el = stage.querySelector(`[data-id="${id}"]`);
+    if (el) startBoundsList.push(getStageRelativeBounds(el, stage, scale));
+  }
+  return {
+    phase: "dragging",
+    elementId,
+    elementIds,
+    startClient: pending.startClient,
+    delta: {
+      x: (pointer.x - pending.startClient.x) / scale,
+      y: (pointer.y - pending.startClient.y) / scale
+    },
+    drop: resolved?.drop ?? null,
+    indicatorBounds: resolved?.indicatorBounds ?? null,
+    startGroupBounds: unionBounds(startBoundsList),
+    guides: []
+  };
+}
+function promotePendingToMarquee(pending, pointer, currentSelection) {
+  return {
+    phase: "marquee",
+    startClient: pending.startClient,
+    currentClient: pointer,
+    additive: pending.shiftKey,
+    initialSelection: currentSelection
+  };
+}
+function transitionMarqueeOnMove(marquee, pointer, stage) {
+  const left = Math.min(marquee.startClient.x, pointer.x);
+  const right = Math.max(marquee.startClient.x, pointer.x);
+  const top = Math.min(marquee.startClient.y, pointer.y);
+  const bottom = Math.max(marquee.startClient.y, pointer.y);
+  const hits = findElementsInRect(stage, { left, right, top, bottom });
+  const selection = marquee.additive ? new Set(marquee.initialSelection) : /* @__PURE__ */ new Set();
+  for (const id of hits) selection.add(id);
+  return {
+    gesture: { ...marquee, currentClient: pointer },
+    selection
+  };
+}
+function transitionDraggingOnMove(drag, pointer, deck, stage, scale) {
+  const rawDx = (pointer.x - drag.startClient.x) / scale;
+  const rawDy = (pointer.y - drag.startClient.y) / scale;
+  const resolved = resolveDropTarget(deck, stage, drag.elementId, pointer, scale);
+  let snappedDelta = { x: rawDx, y: rawDy };
+  let guides = [];
+  if (drag.startGroupBounds) {
+    const draggedSet = new Set(drag.elementIds);
+    const others = [];
+    for (const el of stage.querySelectorAll("[data-id]")) {
+      const id = el.dataset.id;
+      if (!id || draggedSet.has(id)) continue;
+      others.push(getStageRelativeBounds(el, stage, scale));
+    }
+    const result = computeSnap(
+      drag.startGroupBounds,
+      { x: rawDx, y: rawDy },
+      others,
+      SNAP_THRESHOLD_CLIENT / scale
+    );
+    snappedDelta = result.delta;
+    guides = result.guides;
+  }
+  return {
+    ...drag,
+    delta: snappedDelta,
+    drop: resolved?.drop ?? null,
+    indicatorBounds: resolved?.indicatorBounds ?? null,
+    guides
+  };
+}
+function transitionResizingOnMove(resize, pointer, scale) {
+  const cdxS = (pointer.x - resize.startClient.x) / scale;
+  const cdyS = (pointer.y - resize.startClient.y) / scale;
+  const Rrad = resize.rotation * Math.PI / 180;
+  const cosR = Math.cos(Rrad);
+  const sinR = Math.sin(Rrad);
+  const cdxL = cdxS * cosR + cdyS * sinR;
+  const cdyL = -cdxS * sinR + cdyS * cosR;
+  const dir = RESIZE_HANDLE_DIRS[resize.handle];
+  const sb = resize.startBounds;
+  const newW = dir.dx !== 0 ? Math.max(RESIZE_MIN, sb.w + dir.dx * cdxL) : sb.w;
+  const newH = dir.dy !== 0 ? Math.max(RESIZE_MIN, sb.h + dir.dy * cdyL) : sb.h;
+  const dw = newW - sb.w;
+  const dh = newH - sb.h;
+  const lsx = dir.dx * dw / 2;
+  const lsy = dir.dy * dh / 2;
+  const isAbs = resize.layoutMode === "absolute";
+  const centerShiftX = isAbs ? lsx * cosR - lsy * sinR : lsx;
+  const centerShiftY = isAbs ? lsx * sinR + lsy * cosR : lsy;
+  const newCenterX = resize.startCenter.x + centerShiftX;
+  const newCenterY = resize.startCenter.y + centerShiftY;
+  return {
+    ...resize,
+    currentBounds: {
+      x: newCenterX - newW / 2,
+      y: newCenterY - newH / 2,
+      w: newW,
+      h: newH
+    }
+  };
+}
+function transitionRotatingOnMove(rotate, pointer) {
+  const angle = Math.atan2(pointer.y - rotate.centerClient.y, pointer.x - rotate.centerClient.x);
+  let d = angle - rotate.startAngle;
+  while (d > Math.PI) d -= 2 * Math.PI;
+  while (d < -Math.PI) d += 2 * Math.PI;
+  const newRotation = rotate.startRotation + d * 180 / Math.PI;
+  return { ...rotate, currentRotation: newRotation };
+}
+function buildSelectionAfterClick(prev, id, shiftKey) {
+  if (shiftKey) {
+    const next = new Set(prev);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  }
+  return prev.has(id) ? prev : /* @__PURE__ */ new Set([id]);
+}
+function gestureCommit(gesture) {
+  if (gesture.phase === "resizing") {
+    const { elementId, startBounds, currentBounds } = gesture;
+    const moved = currentBounds.x !== startBounds.x || currentBounds.y !== startBounds.y || currentBounds.w !== startBounds.w || currentBounds.h !== startBounds.h;
+    return moved ? (d) => commitResize(d, elementId, currentBounds) : null;
+  }
+  if (gesture.phase === "rotating") {
+    const { elementId, startRotation, currentRotation } = gesture;
+    return currentRotation !== startRotation ? (d) => commitRotation(d, elementId, currentRotation) : null;
+  }
+  if (gesture.phase === "dragging") {
+    if (gesture.elementIds.length > 1) {
+      const { elementIds, delta } = gesture;
+      return (d) => commitMultiDrag(d, elementIds, delta);
+    }
+    if (gesture.drop) {
+      const { drop, elementId } = gesture;
+      return (d) => commitDrop(d, elementId, drop);
+    }
+  }
+  return null;
+}
+
+// src/design/useCanvasGestures.ts
+function useCanvasGestures(opts) {
+  const {
+    stageRef,
+    deck,
+    setDeck,
+    scale,
+    disabled = false,
+    selectedIds: selectedIdsControlled,
+    onSelectionChange,
+    onTextDoubleClick,
+    shouldIgnorePointerDown,
+    beforePointerDown
+  } = opts;
+  const [selectedIdsInternal, setSelectedIdsInternal] = (0, import_react.useState)(
+    () => /* @__PURE__ */ new Set()
+  );
+  const selectedIds = selectedIdsControlled ?? selectedIdsInternal;
+  const selectedId = selectedIds.size === 1 ? Array.from(selectedIds)[0] ?? null : null;
+  const setSelectedIds = (0, import_react.useCallback)(
+    (next) => {
+      if (typeof next === "function") {
+        const fn = next;
+        setSelectedIdsInternal((prev) => {
+          const resolved = selectedIdsControlled ?? prev;
+          const updated = fn(resolved);
+          if (onSelectionChange) onSelectionChange(updated);
+          return updated;
+        });
+      } else {
+        setSelectedIdsInternal(next);
+        if (onSelectionChange) onSelectionChange(next);
+      }
+    },
+    [selectedIdsControlled, onSelectionChange]
+  );
+  const [gesture, setGesture] = (0, import_react.useState)(null);
+  const selectedIdsRef = (0, import_react.useRef)(selectedIds);
+  selectedIdsRef.current = selectedIds;
+  const handlePointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      if (shouldIgnorePointerDown?.(e)) return;
+      beforePointerDown?.();
+      const stage = stageRef.current;
+      const sel = selectedIdsRef.current;
+      const selId = sel.size === 1 ? Array.from(sel)[0] ?? null : null;
+      const pointer = { x: e.clientX, y: e.clientY };
+      const handleGesture = detectHandleGesture(e.nativeEvent, deck, selId, stage, pointer, scale);
+      if (handleGesture) {
+        e.currentTarget.setPointerCapture(e.pointerId);
+        setGesture(handleGesture);
+        return;
+      }
+      const id = findElementIdFromEvent(e.nativeEvent, stage);
+      if (id !== null) {
+        setSelectedIds((prev) => buildSelectionAfterClick(prev, id, e.shiftKey));
+      }
+      if (id !== null && e.shiftKey) {
+        setGesture(null);
+        return;
+      }
+      setGesture({ phase: "pending", elementId: id, startClient: pointer, shiftKey: e.shiftKey });
+    },
+    [disabled, shouldIgnorePointerDown, beforePointerDown, stageRef, deck, scale, setSelectedIds]
+  );
+  const handleDoubleClick = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      const id = findElementIdFromEvent(e.nativeEvent, stageRef.current);
+      if (!id) return;
+      const node = findById(deck, id);
+      if (!node || node.tag !== "Text") return;
+      setSelectedIds(/* @__PURE__ */ new Set([id]));
+      setGesture(null);
+      onTextDoubleClick?.(id);
+    },
+    [disabled, stageRef, deck, setSelectedIds, onTextDoubleClick]
+  );
+  const handlePointerMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!gesture) return;
+      const stage = stageRef.current;
+      if (!stage) return;
+      const pointer = { x: e.clientX, y: e.clientY };
+      if (gesture.phase === "pending") {
+        const dx = pointer.x - gesture.startClient.x;
+        const dy = pointer.y - gesture.startClient.y;
+        if (dx * dx + dy * dy < DRAG_THRESHOLD_SQ) return;
+        try {
+          e.currentTarget.setPointerCapture(e.pointerId);
+        } catch {
+        }
+        if (gesture.elementId === null) {
+          setGesture(promotePendingToMarquee(gesture, pointer, selectedIdsRef.current));
+        } else {
+          const next = promotePendingToDragging(
+            gesture,
+            deck,
+            stage,
+            pointer,
+            scale,
+            selectedIdsRef.current
+          );
+          if (next) setGesture(next);
+        }
+        return;
+      }
+      if (gesture.phase === "marquee") {
+        const result = transitionMarqueeOnMove(gesture, pointer, stage);
+        setGesture(result.gesture);
+        setSelectedIds(result.selection);
+        return;
+      }
+      if (gesture.phase === "dragging") {
+        setGesture(transitionDraggingOnMove(gesture, pointer, deck, stage, scale));
+        return;
+      }
+      if (gesture.phase === "resizing") {
+        setGesture(transitionResizingOnMove(gesture, pointer, scale));
+        return;
+      }
+      setGesture(transitionRotatingOnMove(gesture, pointer));
+    },
+    [gesture, stageRef, deck, scale, setSelectedIds]
+  );
+  const handlePointerUp = (0, import_react.useCallback)(
+    (e) => {
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (!gesture) return;
+      if (gesture.phase === "pending" && gesture.elementId === null && !gesture.shiftKey) {
+        setSelectedIds(/* @__PURE__ */ new Set());
+      }
+      const updater = gestureCommit(gesture);
+      if (updater) setDeck(updater);
+      setGesture(null);
+    },
+    [gesture, setDeck, setSelectedIds]
+  );
+  const handlePointerCancel = (0, import_react.useCallback)((e) => {
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+    setGesture(null);
+  }, []);
+  useDragPreviewEffect(stageRef, gesture, deck);
+  const renderedDeck = useRenderedDeck(deck, gesture);
+  return {
+    selectedIds,
+    selectedId,
+    setSelectedIds,
+    gesture,
+    renderedDeck,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onDoubleClick: handleDoubleClick
+  };
+}
+function useDragPreviewEffect(stageRef, gesture, deck) {
+  (0, import_react.useLayoutEffect)(() => {
+    if (!gesture || gesture.phase !== "dragging") return;
+    const stage = stageRef.current;
+    if (!stage) return;
+    const { elementIds, delta } = gesture;
+    const restorers = [];
+    for (const elementId of elementIds) {
+      const el = stage.querySelector(`[data-id="${elementId}"]`);
+      if (!el) continue;
+      const node = findById(deck, elementId);
+      const rot = typeof node?.attrs.rotation === "number" ? node.attrs.rotation : 0;
+      const rotateStr = rot !== 0 ? ` rotate(${rot}deg)` : "";
+      const prevTransform = el.style.transform;
+      const prevOpacity = el.style.opacity;
+      el.style.transform = `translate(${delta.x}px, ${delta.y}px)${rotateStr}`;
+      el.style.opacity = "0.7";
+      restorers.push(() => {
+        const currentEl = stageRef.current?.querySelector(`[data-id="${elementId}"]`);
+        if (!currentEl) return;
+        currentEl.style.transform = prevTransform;
+        currentEl.style.opacity = prevOpacity;
+      });
+    }
+    return () => {
+      for (const fn of restorers) fn();
+    };
+  }, [gesture, deck, stageRef]);
+}
+function useRenderedDeck(deck, gesture) {
+  return (0, import_react.useMemo)(() => {
+    if (!gesture) return deck;
+    if (gesture.phase !== "resizing" && gesture.phase !== "rotating") return deck;
+    const next = structuredClone(deck);
+    const el = findById(next, gesture.elementId);
+    if (!el) return deck;
+    if (gesture.phase === "resizing") {
+      const cb = gesture.currentBounds;
+      const layout = findParentOfId(next, gesture.elementId)?.attrs.layout;
+      if (layout === "column") {
+        el.attrs.h = cb.h;
+      } else if (layout === "row") {
+        el.attrs.w = cb.w;
+      } else {
+        el.attrs.x = cb.x;
+        el.attrs.y = cb.y;
+        el.attrs.w = cb.w;
+        el.attrs.h = cb.h;
+      }
+    } else {
+      el.attrs.rotation = gesture.currentRotation;
+    }
+    return next;
+  }, [deck, gesture]);
+}
+
+// src/design/useCanvasKeyboard.ts
+var import_react2 = require("react");
+function isEditableTarget(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  if (target instanceof HTMLInputElement) return true;
+  if (target instanceof HTMLTextAreaElement) return true;
+  if (target instanceof HTMLSelectElement) return true;
+  return target.isContentEditable;
+}
+function arrowKeyDelta(key, shiftKey) {
+  const step = shiftKey ? 10 : 1;
+  if (key === "ArrowLeft") return { dx: -step, dy: 0 };
+  if (key === "ArrowRight") return { dx: step, dy: 0 };
+  if (key === "ArrowUp") return { dx: 0, dy: -step };
+  if (key === "ArrowDown") return { dx: 0, dy: step };
+  return null;
+}
+function handleModifierShortcut(e, undo, redo) {
+  const k = e.key.toLowerCase();
+  if (k === "z") {
+    e.preventDefault();
+    if (e.shiftKey) redo?.();
+    else undo?.();
+    return true;
+  }
+  if (k === "y") {
+    e.preventDefault();
+    redo?.();
+    return true;
+  }
+  return false;
+}
+function applyDelete(ids) {
+  return (d) => {
+    const next = structuredClone(d);
+    let any = false;
+    for (const id of ids) {
+      if (removeById(next, id)) any = true;
+    }
+    return any ? next : d;
+  };
+}
+function applyArrowNudge(ids, dx, dy) {
+  return (d) => {
+    const next = structuredClone(d);
+    let any = false;
+    for (const id of ids) {
+      if (getLayoutModeOf(d, id) !== "absolute") continue;
+      const el = findById(next, id);
+      if (!el) continue;
+      const x = typeof el.attrs.x === "number" ? el.attrs.x : 0;
+      const y = typeof el.attrs.y === "number" ? el.attrs.y : 0;
+      el.attrs.x = x + dx;
+      el.attrs.y = y + dy;
+      any = true;
+    }
+    return any ? next : d;
+  };
+}
+function useCanvasKeyboard(opts) {
+  const { setDeck, selectedIds, setSelectedIds, disabled = false, undo, redo } = opts;
+  (0, import_react2.useEffect)(() => {
+    if (disabled) return;
+    const handler = (e) => {
+      if (isEditableTarget(e.target)) return;
+      if (e.metaKey || e.ctrlKey) {
+        handleModifierShortcut(e, undo, redo);
+        return;
+      }
+      if (e.altKey) return;
+      if (selectedIds.size === 0) return;
+      if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        setDeck(applyDelete(selectedIds));
+        setSelectedIds(/* @__PURE__ */ new Set());
+        return;
+      }
+      const arrow = arrowKeyDelta(e.key, e.shiftKey);
+      if (arrow) {
+        e.preventDefault();
+        setDeck(applyArrowNudge(selectedIds, arrow.dx, arrow.dy));
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [disabled, setDeck, selectedIds, setSelectedIds, undo, redo]);
+}
+
+// src/design/useDeckHistory.ts
+var import_react3 = require("react");
+function useDeckHistory(initial) {
+  const [history, setHistory] = (0, import_react3.useState)(() => ({
+    snapshots: [initial],
+    index: 0
+  }));
+  const deck = history.snapshots[history.index] ?? initial;
+  const setDeck = (0, import_react3.useCallback)(
+    (updater) => {
+      setHistory((prev) => {
+        const current = prev.snapshots[prev.index] ?? initial;
+        const next = typeof updater === "function" ? updater(current) : updater;
+        if (next === current) return prev;
+        const snapshots = prev.snapshots.slice(0, prev.index + 1);
+        snapshots.push(next);
+        return { snapshots, index: prev.index + 1 };
+      });
+    },
+    [initial]
+  );
+  const undo = (0, import_react3.useCallback)(() => {
+    setHistory((prev) => prev.index > 0 ? { ...prev, index: prev.index - 1 } : prev);
+  }, []);
+  const redo = (0, import_react3.useCallback)(() => {
+    setHistory(
+      (prev) => prev.index < prev.snapshots.length - 1 ? { ...prev, index: prev.index + 1 } : prev
+    );
+  }, []);
+  return {
+    deck,
+    setDeck,
+    undo,
+    redo,
+    canUndo: history.index > 0,
+    canRedo: history.index < history.snapshots.length - 1,
+    undoCount: history.index,
+    redoCount: history.snapshots.length - 1 - history.index
+  };
+}
+
+// src/design/useSelectionBounds.ts
+var import_react4 = require("react");
+function useSelectionBounds(stageRef, selectedId, deck, scale) {
+  const [bounds, setBounds] = (0, import_react4.useState)(null);
+  (0, import_react4.useLayoutEffect)(() => {
+    const stage = stageRef.current;
+    if (!stage || !selectedId) {
+      setBounds(null);
+      return;
+    }
+    const el = stage.querySelector(`[data-id="${selectedId}"]`);
+    const node = findById(deck, selectedId);
+    if (!el || !node) {
+      setBounds(null);
+      return;
+    }
+    const sr = stage.getBoundingClientRect();
+    const er = el.getBoundingClientRect();
+    const centerX = (er.left + er.width / 2 - sr.left) / scale;
+    const centerY = (er.top + er.height / 2 - sr.top) / scale;
+    const w = typeof node.attrs.w === "number" ? node.attrs.w : er.width / scale;
+    const h = typeof node.attrs.h === "number" ? node.attrs.h : er.height / scale;
+    const rotation = typeof node.attrs.rotation === "number" ? node.attrs.rotation : 0;
+    setBounds({
+      x: centerX - w / 2,
+      y: centerY - h / 2,
+      w,
+      h,
+      rotation
+    });
+  }, [stageRef, selectedId, deck, scale]);
+  return bounds;
+}
+function useMultiSelectionBounds(stageRef, selectedIds, deck, scale) {
+  const [bounds, setBounds] = (0, import_react4.useState)([]);
+  (0, import_react4.useLayoutEffect)(() => {
+    const stage = stageRef.current;
+    if (!stage || selectedIds.size === 0) {
+      setBounds([]);
+      return;
+    }
+    const sr = stage.getBoundingClientRect();
+    const out = [];
+    for (const id of selectedIds) {
+      const el = stage.querySelector(`[data-id="${id}"]`);
+      const node = findById(deck, id);
+      if (!el || !node) continue;
+      const er = el.getBoundingClientRect();
+      const centerX = (er.left + er.width / 2 - sr.left) / scale;
+      const centerY = (er.top + er.height / 2 - sr.top) / scale;
+      const w = typeof node.attrs.w === "number" ? node.attrs.w : er.width / scale;
+      const h = typeof node.attrs.h === "number" ? node.attrs.h : er.height / scale;
+      const rotation = typeof node.attrs.rotation === "number" ? node.attrs.rotation : 0;
+      out.push({ id, x: centerX - w / 2, y: centerY - h / 2, w, h, rotation });
+    }
+    setBounds(out);
+  }, [stageRef, selectedIds, deck, scale]);
+  return bounds;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CanvasOverlays,
+  NON_SELECTABLE_TAGS,
+  RESIZE_HANDLE_CURSORS,
+  RESIZE_HANDLE_DIRS,
+  canMultiDrag,
+  commitDrop,
+  commitMultiDrag,
+  commitResize,
+  commitRotation,
+  commitTextChange,
+  computeFlexDropTarget,
+  computeSnap,
+  containerLayoutMode,
+  findContainerAt,
+  findElementIdFromEvent,
+  findElementsInRect,
+  findResizeHandleFromEvent,
+  findRotateHandleFromEvent,
+  getLayoutModeOf,
+  getStageRelativeBounds,
+  getTextContent,
+  isFlexChild,
+  resolveDropTarget,
+  unionBounds,
+  useCanvasGestures,
+  useCanvasKeyboard,
+  useDeckHistory,
+  useMultiSelectionBounds,
+  useSelectionBounds
+});