@pixerate/editor 0.18.0 → 0.20.0

package/dist/canvas/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; } var _class; var _class2; var _class3;
 
 
 
@@ -160,7 +160,7 @@ function withStyleOpacity(style, opacity, emptyFormat = "string") {
 }
 function runMultiNodeTransition(transitions, options = {}) {
   if (transitions.length === 0) {
-    _optionalChain([options, 'access', _ => _.onComplete, 'optionalCall', _2 => _2([])]);
+    _optionalChain([options, 'access', _2 => _2.onComplete, 'optionalCall', _3 => _3([])]);
     return () => {
     };
   }
@@ -215,11 +215,11 @@ function runMultiNodeTransition(transitions, options = {}) {
         allCompleted = false;
       }
     }
-    _optionalChain([onUpdate, 'optionalCall', _3 => _3(current.slice())]);
+    _optionalChain([onUpdate, 'optionalCall', _4 => _4(current.slice())]);
     if (!allCompleted) {
       clock.frame().then(frame);
     } else {
-      _optionalChain([onComplete, 'optionalCall', _4 => _4(current.slice())]);
+      _optionalChain([onComplete, 'optionalCall', _5 => _5(current.slice())]);
     }
   }
   frame();
@@ -239,8 +239,8 @@ function computeNodesBoundingBox(nodes, defaultWidth = 200, defaultHeight = 60)
   let maxX = -Infinity;
   let maxY = -Infinity;
   for (const node of nodes) {
-    const width = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _5 => _5.measured, 'optionalAccess', _6 => _6.width]), () => ( node.width)), () => ( defaultWidth));
-    const height = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _7 => _7.measured, 'optionalAccess', _8 => _8.height]), () => ( node.height)), () => ( defaultHeight));
+    const width = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _6 => _6.measured, 'optionalAccess', _7 => _7.width]), () => ( node.width)), () => ( defaultWidth));
+    const height = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _8 => _8.measured, 'optionalAccess', _9 => _9.height]), () => ( node.height)), () => ( defaultHeight));
     minX = Math.min(minX, node.position.x);
     minY = Math.min(minY, node.position.y);
     maxX = Math.max(maxX, node.position.x + width);
@@ -273,8 +273,8 @@ function calculateDirectionalDisplacement(params) {
     return displacedMap;
   }
   const childBounds = getNodesBounds ? getNodesBounds(childNodes) : computeNodesBoundingBox(childNodes);
-  const originWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([originNode, 'access', _9 => _9.measured, 'optionalAccess', _10 => _10.width]), () => ( originNode.width)), () => ( 200));
-  const originHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([originNode, 'access', _11 => _11.measured, 'optionalAccess', _12 => _12.height]), () => ( originNode.height)), () => ( 60));
+  const originWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([originNode, 'access', _10 => _10.measured, 'optionalAccess', _11 => _11.width]), () => ( originNode.width)), () => ( 200));
+  const originHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([originNode, 'access', _12 => _12.measured, 'optionalAccess', _13 => _13.height]), () => ( originNode.height)), () => ( 60));
   const deltaPrimary = direction === "right" || direction === "left" ? childBounds.width + gap : childBounds.height + gap;
   const deltaUp = Math.max(0, originNode.position.y - childBounds.y + gap);
   const deltaDown = Math.max(
@@ -382,8 +382,8 @@ function calculateDagreReflowDisplacement(params) {
   g.setGraph({ rankdir: direction, ranksep, nodesep });
   const nodeIds = new Set(futureNodes.map((n) => n.id));
   futureNodes.forEach((node) => {
-    const nodeWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _13 => _13.measured, 'optionalAccess', _14 => _14.width]), () => ( node.width)), () => ( defaultNodeWidth));
-    const nodeHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _15 => _15.measured, 'optionalAccess', _16 => _16.height]), () => ( node.height)), () => ( defaultNodeHeight));
+    const nodeWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _14 => _14.measured, 'optionalAccess', _15 => _15.width]), () => ( node.width)), () => ( defaultNodeWidth));
+    const nodeHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _16 => _16.measured, 'optionalAccess', _17 => _17.height]), () => ( node.height)), () => ( defaultNodeHeight));
     g.setNode(node.id, { width: nodeWidth, height: nodeHeight });
   });
   futureEdges.forEach((edge) => {
@@ -394,8 +394,8 @@ function calculateDagreReflowDisplacement(params) {
   _dagre2.default.layout(g);
   const anchorLayoutPos = g.node(anchorNodeId);
   if (!anchorLayoutPos) return /* @__PURE__ */ new Map();
-  const anchorWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([anchorNode, 'access', _17 => _17.measured, 'optionalAccess', _18 => _18.width]), () => ( anchorNode.width)), () => ( defaultNodeWidth));
-  const anchorHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([anchorNode, 'access', _19 => _19.measured, 'optionalAccess', _20 => _20.height]), () => ( anchorNode.height)), () => ( defaultNodeHeight));
+  const anchorWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([anchorNode, 'access', _18 => _18.measured, 'optionalAccess', _19 => _19.width]), () => ( anchorNode.width)), () => ( defaultNodeWidth));
+  const anchorHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([anchorNode, 'access', _20 => _20.measured, 'optionalAccess', _21 => _21.height]), () => ( anchorNode.height)), () => ( defaultNodeHeight));
   const anchorLayoutUpperLeft = {
     x: anchorLayoutPos.x - anchorWidth / 2,
     y: anchorLayoutPos.y - anchorHeight / 2
@@ -407,8 +407,8 @@ function calculateDagreReflowDisplacement(params) {
     if (node.id === anchorNodeId) return;
     const layoutNode = g.node(node.id);
     if (!layoutNode) return;
-    const nodeWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _21 => _21.measured, 'optionalAccess', _22 => _22.width]), () => ( node.width)), () => ( defaultNodeWidth));
-    const nodeHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _23 => _23.measured, 'optionalAccess', _24 => _24.height]), () => ( node.height)), () => ( defaultNodeHeight));
+    const nodeWidth = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _22 => _22.measured, 'optionalAccess', _23 => _23.width]), () => ( node.width)), () => ( defaultNodeWidth));
+    const nodeHeight = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _24 => _24.measured, 'optionalAccess', _25 => _25.height]), () => ( node.height)), () => ( defaultNodeHeight));
     const upperLeftX = layoutNode.x - nodeWidth / 2 + deltaX;
     const upperLeftY = layoutNode.y - nodeHeight / 2 + deltaY;
     if (Math.abs(upperLeftX - node.position.x) > 1 || Math.abs(upperLeftY - node.position.y) > 1) {
@@ -422,7 +422,7 @@ function calculateDagreReflowDisplacement(params) {
 function isEventFromTextInput(event) {
   const target = event.target;
   if (!target) return false;
-  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || _optionalChain([target, 'access', _25 => _25.closest, 'optionalCall', _26 => _26('[contenteditable="true"]')]) || _optionalChain([target, 'access', _27 => _27.closest, 'optionalCall', _28 => _28(".ProseMirror")])) {
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || _optionalChain([target, 'access', _26 => _26.closest, 'optionalCall', _27 => _27('[contenteditable="true"]')]) || _optionalChain([target, 'access', _28 => _28.closest, 'optionalCall', _29 => _29(".ProseMirror")])) {
     return true;
   }
   return false;
@@ -469,8 +469,8 @@ function parseCanvasClipboardData(raw) {
 function remapPastedNodes(nodes, edges = [], offset = { x: 30, y: 30 }, idGenerator = () => `node-${Math.random().toString(36).substring(2, 9)}`) {
   const validNodes = (Array.isArray(nodes) ? nodes : []).filter(isValidCanvasNode);
   const validEdges = (Array.isArray(edges) ? edges : []).filter(isValidCanvasEdge);
-  const dx = Number.isFinite(_optionalChain([offset, 'optionalAccess', _29 => _29.x])) ? offset.x : 0;
-  const dy = Number.isFinite(_optionalChain([offset, 'optionalAccess', _30 => _30.y])) ? offset.y : 0;
+  const dx = Number.isFinite(_optionalChain([offset, 'optionalAccess', _30 => _30.x])) ? offset.x : 0;
+  const dy = Number.isFinite(_optionalChain([offset, 'optionalAccess', _31 => _31.y])) ? offset.y : 0;
   const idMap = /* @__PURE__ */ new Map();
   for (const node of validNodes) {
     idMap.set(node.id, idGenerator());
@@ -547,7 +547,7 @@ function layoutBounds(nodes) {
   return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
 }
 function canvasHeight(nodes, options) {
-  return clampHeight(_nullishCoalesce(_optionalChain([layoutBounds, 'call', _31 => _31(nodes), 'optionalAccess', _32 => _32.height]), () => ( 0)), options);
+  return clampHeight(_nullishCoalesce(_optionalChain([layoutBounds, 'call', _32 => _32(nodes), 'optionalAccess', _33 => _33.height]), () => ( 0)), options);
 }
 var DEFAULT_RANK_HEIGHT = 80 + 72;
 var NODES_PER_RANK = 2;
@@ -683,7 +683,7 @@ var StreamingLayoutManager = (_class2 = class {
     this.targetPositions = nextPositions;
     if (transitions.length === 0) {
       this.livePositions = new Map(nextPositions);
-      _optionalChain([this, 'access', _33 => _33.onLayoutUpdated, 'optionalCall', _34 => _34(nextPositions)]);
+      _optionalChain([this, 'access', _34 => _34.onLayoutUpdated, 'optionalCall', _35 => _35(nextPositions)]);
       return;
     }
     const live = new Map(nextPositions);
@@ -700,13 +700,13 @@ var StreamingLayoutManager = (_class2 = class {
           frame.set(node.id, { ...node.position });
         }
         this.livePositions = frame;
-        _optionalChain([this, 'access', _35 => _35.onLayoutUpdated, 'optionalCall', _36 => _36(frame)]);
+        _optionalChain([this, 'access', _36 => _36.onLayoutUpdated, 'optionalCall', _37 => _37(frame)]);
       },
       onComplete: () => {
         finished = true;
         this.activeTransitionCancel = null;
         this.livePositions = new Map(nextPositions);
-        _optionalChain([this, 'access', _37 => _37.onLayoutUpdated, 'optionalCall', _38 => _38(nextPositions)]);
+        _optionalChain([this, 'access', _38 => _38.onLayoutUpdated, 'optionalCall', _39 => _39(nextPositions)]);
       }
     });
     this.activeTransitionCancel = finished ? null : cancel;
@@ -720,6 +720,1224 @@ var StreamingLayoutManager = (_class2 = class {
   }
 }, _class2);
 
+// src/canvas/arrange.ts
+var LOCKED_DATA_KEY = "locked";
+var LOCKED_PREVIOUS_FLAGS_KEY = "lockedPrevious";
+function parsePx(value) {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string") {
+    const match = /^\s*(-?\d+(?:\.\d+)?)(px)?\s*$/i.exec(value);
+    if (match) return Number(match[1]);
+  }
+  return void 0;
+}
+function readStyleSize(style) {
+  if (!style) return {};
+  if (typeof style === "object") {
+    return { width: parsePx(style.width), height: parsePx(style.height) };
+  }
+  const read = (prop) => {
+    const match = new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, "i").exec(style);
+    return match ? parsePx(match[1]) : void 0;
+  };
+  return { width: read("width"), height: read("height") };
+}
+function withStyleSize(style, size) {
+  if (!style) return _nullishCoalesce(style, () => ( void 0));
+  if (typeof style === "object") {
+    const next2 = { ...style };
+    if (size.width !== void 0 && "width" in next2) next2.width = size.width;
+    if (size.height !== void 0 && "height" in next2) next2.height = size.height;
+    return next2;
+  }
+  let next = style;
+  for (const prop of ["width", "height"]) {
+    const value = size[prop];
+    if (value === void 0) continue;
+    next = next.replace(
+      new RegExp(`((?:^|;)\\s*${prop}\\s*:\\s*)[^;]+`, "i"),
+      `$1${value}px`
+    );
+  }
+  return next;
+}
+function getNodeSize(node, options = {}) {
+  const styleSize = readStyleSize(node.style);
+  let width = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _40 => _40.measured, 'optionalAccess', _41 => _41.width]), () => ( node.width)), () => ( styleSize.width));
+  let height = _nullishCoalesce(_nullishCoalesce(_optionalChain([node, 'access', _42 => _42.measured, 'optionalAccess', _43 => _43.height]), () => ( node.height)), () => ( styleSize.height));
+  if (width === void 0 || height === void 0) {
+    const fallback = options.estimate === false ? { width: _nullishCoalesce(options.defaultWidth, () => ( 200)), height: _nullishCoalesce(options.defaultHeight, () => ( 60)) } : _chunkWADCJ7A7cjs.estimateNodeSize.call(void 0, node, options.defaultWidth, options.defaultHeight);
+    width ??= fallback.width;
+    height ??= fallback.height;
+  }
+  return { width, height };
+}
+function getAbsolutePosition(node, lookup) {
+  let x = node.position.x;
+  let y = node.position.y;
+  const seen = /* @__PURE__ */ new Set([node.id]);
+  let parentId = node.parentId;
+  while (parentId && !seen.has(parentId)) {
+    const parent = lookup.get(parentId);
+    if (!parent) break;
+    seen.add(parentId);
+    x += parent.position.x;
+    y += parent.position.y;
+    parentId = parent.parentId;
+  }
+  return { x, y };
+}
+function createNodeLookup(nodes) {
+  return new Map(nodes.map((n) => [n.id, n]));
+}
+function getNodeRect(node, lookup, options) {
+  const { x, y } = node.parentId && lookup ? getAbsolutePosition(node, lookup) : node.position;
+  return { x, y, ...getNodeSize(node, options) };
+}
+function isLocked(node) {
+  return _optionalChain([node, 'optionalAccess', _44 => _44.data, 'optionalAccess', _45 => _45[LOCKED_DATA_KEY]]) === true;
+}
+function lockNodes(nodes, ids) {
+  const idSet = new Set(ids);
+  return nodes.map((node) => {
+    if (!idSet.has(node.id) || isLocked(node)) return node;
+    const previous = {};
+    if (node.draggable !== void 0) previous.draggable = node.draggable;
+    if (node.deletable !== void 0) previous.deletable = node.deletable;
+    return {
+      ...node,
+      draggable: false,
+      deletable: false,
+      data: { ...node.data, [LOCKED_DATA_KEY]: true, [LOCKED_PREVIOUS_FLAGS_KEY]: previous }
+    };
+  });
+}
+function unlockNodes(nodes, ids) {
+  const idSet = new Set(ids);
+  return nodes.map((node) => {
+    if (!idSet.has(node.id) || !isLocked(node)) return node;
+    const {
+      [LOCKED_DATA_KEY]: _locked,
+      [LOCKED_PREVIOUS_FLAGS_KEY]: previous = {},
+      ...data
+    } = node.data;
+    const next = { ...node, data };
+    delete next.draggable;
+    delete next.deletable;
+    if (previous.draggable !== void 0) next.draggable = previous.draggable;
+    if (previous.deletable !== void 0) next.deletable = previous.deletable;
+    return next;
+  });
+}
+function toggleLockNodes(nodes, ids) {
+  const idSet = new Set(ids);
+  const anyUnlocked = nodes.some((n) => idSet.has(n.id) && !isLocked(n));
+  return anyUnlocked ? lockNodes(nodes, idSet) : unlockNodes(nodes, idSet);
+}
+function collect(nodes, ids, options) {
+  const lookup = createNodeLookup(nodes);
+  const items = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const id of ids) {
+    const node = lookup.get(id);
+    if (!node || seen.has(id)) continue;
+    seen.add(id);
+    items.push({ node, rect: getNodeRect(node, lookup, options), locked: isLocked(node) });
+  }
+  return { lookup, items };
+}
+function toPositionUpdates(lookup, targets) {
+  const updates = [];
+  for (const [id, abs] of targets) {
+    const node = lookup.get(id);
+    let position = abs;
+    if (node.parentId && lookup.has(node.parentId)) {
+      const parent = lookup.get(node.parentId);
+      const parentAbs = _nullishCoalesce(targets.get(parent.id), () => ( getAbsolutePosition(parent, lookup)));
+      position = { x: abs.x - parentAbs.x, y: abs.y - parentAbs.y };
+    }
+    if (position.x !== node.position.x || position.y !== node.position.y) {
+      updates.push({ id, position });
+    }
+  }
+  return updates;
+}
+function alignNodes(nodes, ids, edge, options = {}) {
+  const { lookup, items } = collect(nodes, ids, options);
+  const fixed = typeof options.to === "object" ? options.to : null;
+  if (items.length === 0 || !fixed && items.length < 2) return [];
+  const bounds = _nullishCoalesce(fixed, () => ( _chunkWADCJ7A7cjs.boundsOf.call(void 0, items.map((i) => i.rect))));
+  const targets = /* @__PURE__ */ new Map();
+  for (const { node, rect, locked } of items) {
+    if (locked) continue;
+    let { x, y } = rect;
+    switch (edge) {
+      case "left":
+        x = bounds.x;
+        break;
+      case "center":
+        x = bounds.x + bounds.width / 2 - rect.width / 2;
+        break;
+      case "right":
+        x = bounds.x + bounds.width - rect.width;
+        break;
+      case "top":
+        y = bounds.y;
+        break;
+      case "middle":
+        y = bounds.y + bounds.height / 2 - rect.height / 2;
+        break;
+      case "bottom":
+        y = bounds.y + bounds.height - rect.height;
+        break;
+    }
+    targets.set(node.id, { x, y });
+  }
+  return toPositionUpdates(lookup, targets);
+}
+function distributeAxis(items, horizontal, mode, gapOverride, targets) {
+  const start = (r) => horizontal ? r.x : r.y;
+  const size = (r) => horizontal ? r.width : r.height;
+  const sorted = [...items].sort(
+    (a, b) => start(a.rect) + size(a.rect) / 2 - (start(b.rect) + size(b.rect) / 2)
+  );
+  const first = sorted[0].rect;
+  const last = sorted[sorted.length - 1].rect;
+  const n = sorted.length;
+  const set = (item, value) => {
+    if (item.locked) return;
+    const current = _nullishCoalesce(targets.get(item.node.id), () => ( { x: item.rect.x, y: item.rect.y }));
+    targets.set(item.node.id, horizontal ? { ...current, x: value } : { ...current, y: value });
+  };
+  if (mode === "centres") {
+    const c0 = start(first) + size(first) / 2;
+    const c1 = start(last) + size(last) / 2;
+    const step = (c1 - c0) / (n - 1);
+    sorted.forEach((item, i) => set(item, c0 + step * i - size(item.rect) / 2));
+    return;
+  }
+  const span = start(last) + size(last) - start(first);
+  const total = sorted.reduce((sum, item) => sum + size(item.rect), 0);
+  const gap = _nullishCoalesce(gapOverride, () => ( (span - total) / (n - 1)));
+  let cursor = start(first);
+  for (const item of sorted) {
+    set(item, cursor);
+    cursor += size(item.rect) + gap;
+  }
+}
+function distributeNodes(nodes, ids, axis, mode = "gaps", options = {}) {
+  const { lookup, items } = collect(nodes, ids, options);
+  const minimum = options.gap !== void 0 && mode === "gaps" ? 2 : 3;
+  if (items.length < minimum) return [];
+  const targets = /* @__PURE__ */ new Map();
+  if (axis !== "vertical") distributeAxis(items, true, mode, options.gap, targets);
+  if (axis !== "horizontal") distributeAxis(items, false, mode, options.gap, targets);
+  return toPositionUpdates(lookup, targets);
+}
+function matchSize(nodes, ids, dimension, options = {}) {
+  const { items } = collect(nodes, ids, options);
+  if (items.length < 2) return [];
+  const reference = _nullishCoalesce(options.reference, () => ( "largest"));
+  const pick = (dim) => {
+    if (typeof reference === "object") {
+      const item = items.find((i) => i.node.id === reference.id);
+      if (item) return item.rect[dim];
+    }
+    if (reference === "first") return items[0].rect[dim];
+    const values = items.map((i) => i.rect[dim]);
+    return reference === "smallest" ? Math.min(...values) : Math.max(...values);
+  };
+  const width = dimension !== "height" ? pick("width") : void 0;
+  const height = dimension !== "width" ? pick("height") : void 0;
+  const updates = [];
+  for (const { node, rect, locked } of items) {
+    if (locked) continue;
+    const update = { id: node.id };
+    if (width !== void 0 && width !== rect.width) update.width = width;
+    if (height !== void 0 && height !== rect.height) update.height = height;
+    if (update.width === void 0 && update.height === void 0) continue;
+    if (options.keepCentre) {
+      update.position = {
+        x: node.position.x - ((_nullishCoalesce(update.width, () => ( rect.width))) - rect.width) / 2,
+        y: node.position.y - ((_nullishCoalesce(update.height, () => ( rect.height))) - rect.height) / 2
+      };
+    }
+    updates.push(update);
+  }
+  return updates;
+}
+function reorderNodes(nodes, ids, operation, options = {}) {
+  const lookup = createNodeLookup(nodes);
+  const targetIds = new Set(
+    [...ids].filter((id) => lookup.has(id) && !isLocked(lookup.get(id)))
+  );
+  if (targetIds.size === 0) return [];
+  const groups = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const key = _nullishCoalesce(node.parentId, () => ( ""));
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(node);
+  }
+  const updates = [];
+  for (const siblings of groups.values()) {
+    if (!siblings.some((n) => targetIds.has(n.id))) continue;
+    const order = siblings.map((node, index) => ({ node, index, z: typeof node.zIndex === "number" ? node.zIndex : 0 })).sort((a, b) => a.z - b.z || a.index - b.index).map((entry) => entry.node);
+    const isTarget = (n) => targetIds.has(n.id);
+    let next;
+    if (operation === "bringToFront") {
+      next = [...order.filter((n) => !isTarget(n)), ...order.filter(isTarget)];
+    } else if (operation === "sendToBack") {
+      next = [...order.filter(isTarget), ...order.filter((n) => !isTarget(n))];
+    } else {
+      next = [...order];
+      const forward = operation === "bringForward";
+      const rects = new Map(next.map((n) => [n.id, getNodeRect(n, lookup, options)]));
+      const intersects = (a, b) => a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
+      const indices = next.map((_, i) => i);
+      if (forward) indices.reverse();
+      for (const i of indices) {
+        const node = next[i];
+        if (!isTarget(node)) continue;
+        const step = forward ? 1 : -1;
+        let j = i + step;
+        let swapWith = -1;
+        let firstNonTarget = -1;
+        while (j >= 0 && j < next.length) {
+          if (!isTarget(next[j])) {
+            if (firstNonTarget === -1) firstNonTarget = j;
+            if (intersects(rects.get(node.id), rects.get(next[j].id))) {
+              swapWith = j;
+              break;
+            }
+          }
+          j += step;
+        }
+        if (swapWith === -1) swapWith = firstNonTarget;
+        if (swapWith === -1) continue;
+        next.splice(i, 1);
+        next.splice(swapWith, 0, node);
+      }
+    }
+    if (next.every((node, i) => node === order[i])) continue;
+    next.forEach((node, rank) => {
+      const current = typeof node.zIndex === "number" ? node.zIndex : 0;
+      if (current !== rank) updates.push({ id: node.id, zIndex: rank });
+    });
+  }
+  return updates;
+}
+function applyNodeUpdates(nodes, updates) {
+  if (updates.length === 0) return nodes;
+  const byId = /* @__PURE__ */ new Map();
+  for (const update of updates) {
+    byId.set(update.id, { ...byId.get(update.id), ...update });
+  }
+  return nodes.map((node) => {
+    const update = byId.get(node.id);
+    if (!update) return node;
+    const next = { ...node };
+    if (update.position) next.position = { ...update.position };
+    if (update.zIndex !== void 0) next.zIndex = update.zIndex;
+    if (update.width !== void 0 || update.height !== void 0) {
+      if (update.width !== void 0) next.width = update.width;
+      if (update.height !== void 0) next.height = update.height;
+      if (node.style) next.style = withStyleSize(node.style, update);
+      if (node.measured) {
+        next.measured = {
+          ...node.measured,
+          ...update.width !== void 0 ? { width: update.width } : {},
+          ...update.height !== void 0 ? { height: update.height } : {}
+        };
+      }
+    }
+    return next;
+  });
+}
+function invertNodeUpdates(nodes, updates) {
+  const lookup = createNodeLookup(nodes);
+  const inverse = [];
+  for (const update of updates) {
+    const node = lookup.get(update.id);
+    if (!node) continue;
+    const back = { id: node.id };
+    if (update.position) back.position = { ...node.position };
+    if (update.zIndex !== void 0) back.zIndex = typeof node.zIndex === "number" ? node.zIndex : 0;
+    if (update.width !== void 0 || update.height !== void 0) {
+      const size = getNodeSize(node);
+      if (update.width !== void 0) back.width = size.width;
+      if (update.height !== void 0) back.height = size.height;
+    }
+    inverse.push(back);
+  }
+  return inverse;
+}
+
+// src/canvas/guides.ts
+function buildAxis(entries) {
+  entries.sort((a, b) => a.value - b.value);
+  return {
+    values: Float64Array.from(entries.map((e) => e.value)),
+    rects: entries.map((e) => e.rect)
+  };
+}
+function lowerBound(values, v) {
+  let lo = 0;
+  let hi = values.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (values[mid] < v) lo = mid + 1;
+    else hi = mid;
+  }
+  return lo;
+}
+function createGuideIndex(rects) {
+  const edgeX = [];
+  const centreX = [];
+  const edgeY = [];
+  const centreY = [];
+  for (const rect of rects) {
+    edgeX.push({ value: rect.x, rect }, { value: rect.x + rect.width, rect });
+    centreX.push({ value: rect.x + rect.width / 2, rect });
+    edgeY.push({ value: rect.y, rect }, { value: rect.y + rect.height, rect });
+    centreY.push({ value: rect.y + rect.height / 2, rect });
+  }
+  return {
+    rects,
+    edgeX: buildAxis(edgeX),
+    centreX: buildAxis(centreX),
+    edgeY: buildAxis(edgeY),
+    centreY: buildAxis(centreY)
+  };
+}
+function nearest(axis, v, tolerance) {
+  const { values } = axis;
+  let best = null;
+  for (let i = lowerBound(values, v - tolerance); i < values.length && values[i] <= v + tolerance; i++) {
+    const delta = values[i] - v;
+    if (best === null || Math.abs(delta) < Math.abs(best)) best = delta;
+  }
+  return best;
+}
+function matches(axis, v, eps) {
+  const { values, rects } = axis;
+  const out = [];
+  for (let i = lowerBound(values, v - eps); i < values.length && values[i] <= v + eps; i++) {
+    out.push(rects[i]);
+  }
+  return out;
+}
+function spacingCandidate(rects, moving, horizontal, tolerance) {
+  const start = (r) => horizontal ? r.x : r.y;
+  const end = (r) => horizontal ? r.x + r.width : r.y + r.height;
+  const crossStart = (r) => horizontal ? r.y : r.x;
+  const crossEnd = (r) => horizontal ? r.y + r.height : r.x + r.width;
+  const size = end(moving) - start(moving);
+  const inLane = (r, lane2) => crossStart(r) < crossEnd(lane2) && crossEnd(r) > crossStart(lane2);
+  const lane = rects.filter((r) => inLane(r, moving));
+  if (lane.length === 0) return null;
+  let before = null;
+  let after = null;
+  for (const r of lane) {
+    if (end(r) <= start(moving) + tolerance && (!before || end(r) > end(before))) before = r;
+    if (start(r) >= end(moving) - tolerance && (!after || start(r) < start(after))) after = r;
+  }
+  const neighbourOf = (r, forward) => {
+    let best2 = null;
+    for (const other of lane) {
+      if (other === r || !inLane(other, r)) continue;
+      if (forward ? start(other) >= end(r) : end(other) <= start(r)) {
+        if (!best2 || (forward ? start(other) < start(best2) : end(other) > end(best2))) best2 = other;
+      }
+    }
+    return best2;
+  };
+  const crossMid = (a, b) => (Math.max(crossStart(a), crossStart(b)) + Math.min(crossEnd(a), crossEnd(b))) / 2;
+  const segment = (from, to, cross) => horizontal ? { orientation: "horizontal", kind: "spacing", x1: from, y1: cross, x2: to, y2: cross } : { orientation: "vertical", kind: "spacing", x1: cross, y1: from, x2: cross, y2: to };
+  const candidates = [];
+  if (before && after) {
+    const b = before;
+    const a = after;
+    const pos = (end(b) + start(a) - size) / 2;
+    if (pos >= end(b)) {
+      candidates.push({
+        pos,
+        guides: (p) => [
+          segment(end(b), p, crossMid(b, moving)),
+          segment(p + size, start(a), crossMid(a, moving))
+        ]
+      });
+    }
+  }
+  if (before) {
+    const b = before;
+    const prev = neighbourOf(b, false);
+    if (prev) {
+      const gap = start(b) - end(prev);
+      candidates.push({
+        pos: end(b) + gap,
+        guides: (p) => [segment(end(prev), start(b), crossMid(prev, b)), segment(end(b), p, crossMid(b, moving))]
+      });
+    }
+  }
+  if (after) {
+    const a = after;
+    const next = neighbourOf(a, true);
+    if (next) {
+      const gap = start(next) - end(a);
+      candidates.push({
+        pos: start(a) - gap - size,
+        guides: (p) => [segment(p + size, start(a), crossMid(a, moving)), segment(end(a), start(next), crossMid(a, next))]
+      });
+    }
+  }
+  let best = null;
+  for (const c of candidates) {
+    const delta = c.pos - start(moving);
+    if (Math.abs(delta) <= tolerance && (!best || Math.abs(delta) < Math.abs(best.delta))) {
+      best = { delta, guides: c.guides(c.pos) };
+    }
+  }
+  return best;
+}
+function computeSnapGuides(moving, targets, options = {}) {
+  const index = Array.isArray(targets) ? createGuideIndex(targets) : targets;
+  const zoom = options.zoom && options.zoom > 0 ? options.zoom : 1;
+  const tolerance = (_nullishCoalesce(options.threshold, () => ( 6))) / zoom;
+  const useEdges = options.edges !== false;
+  const useCentres = options.centres !== false;
+  const useSpacing = options.spacing !== false;
+  const eps = 0.5 / zoom;
+  const snapAxis = (horizontal) => {
+    const start = horizontal ? moving.x : moving.y;
+    const size = horizontal ? moving.width : moving.height;
+    const edgeAxis = horizontal ? index.edgeX : index.edgeY;
+    const centreAxis = horizontal ? index.centreX : index.centreY;
+    let delta = null;
+    const consider = (d) => {
+      if (d !== null && (delta === null || Math.abs(d) < Math.abs(delta))) delta = d;
+    };
+    if (useEdges) {
+      consider(nearest(edgeAxis, start, tolerance));
+      consider(nearest(edgeAxis, start + size, tolerance));
+    }
+    if (useCentres) consider(nearest(centreAxis, start + size / 2, tolerance));
+    const spacing = useSpacing ? spacingCandidate(index.rects, moving, horizontal, tolerance) : null;
+    if (spacing && (delta === null || Math.abs(spacing.delta) < Math.abs(delta) - eps)) {
+      return { delta: spacing.delta, spacing };
+    }
+    return { delta, spacing: null };
+  };
+  const sx = snapAxis(true);
+  const sy = snapAxis(false);
+  const dx = _nullishCoalesce(sx.delta, () => ( 0));
+  const dy = _nullishCoalesce(sy.delta, () => ( 0));
+  const snapped = { x: moving.x + dx, y: moving.y + dy, width: moving.width, height: moving.height };
+  const guides = [];
+  const alignmentGuides = (horizontal) => {
+    const start = horizontal ? snapped.x : snapped.y;
+    const size = horizontal ? snapped.width : snapped.height;
+    const lines = [];
+    if (useEdges) {
+      const axis = horizontal ? index.edgeX : index.edgeY;
+      lines.push({ value: start, kind: "edge", axis }, { value: start + size, kind: "edge", axis });
+    }
+    if (useCentres) {
+      lines.push({ value: start + size / 2, kind: "centre", axis: horizontal ? index.centreX : index.centreY });
+    }
+    for (const line of lines) {
+      const aligned = matches(line.axis, line.value, eps);
+      if (aligned.length === 0) continue;
+      const span = _chunkWADCJ7A7cjs.boundsOf.call(void 0, [snapped, ...aligned]);
+      guides.push(
+        horizontal ? { orientation: "vertical", kind: line.kind, x1: line.value, y1: span.y, x2: line.value, y2: span.y + span.height } : { orientation: "horizontal", kind: line.kind, x1: span.x, y1: line.value, x2: span.x + span.width, y2: line.value }
+      );
+    }
+  };
+  if (sx.delta !== null) {
+    if (sx.spacing) guides.push(...shiftGuides(sx.spacing.guides, 0, dy));
+    else alignmentGuides(true);
+  }
+  if (sy.delta !== null) {
+    if (sy.spacing) guides.push(...shiftGuides(sy.spacing.guides, dx, 0));
+    else alignmentGuides(false);
+  }
+  return {
+    position: { x: snapped.x, y: snapped.y },
+    offset: { x: dx, y: dy },
+    guides,
+    snappedX: sx.delta !== null,
+    snappedY: sy.delta !== null
+  };
+}
+function shiftGuides(guides, dx, dy) {
+  return guides.map(
+    (g) => g.orientation === "horizontal" ? { ...g, y1: g.y1 + dy, y2: g.y2 + dy } : { ...g, x1: g.x1 + dx, x2: g.x2 + dx }
+  );
+}
+function collectDescendantIds(nodes, ids) {
+  const result = new Set(ids);
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const node of nodes) {
+      if (node.parentId && result.has(node.parentId) && !result.has(node.id)) {
+        result.add(node.id);
+        grew = true;
+      }
+    }
+  }
+  return result;
+}
+function createNodeGuideIndex(nodes, draggingIds, options = {}) {
+  const exclude = collectDescendantIds(nodes, draggingIds);
+  const lookup = createNodeLookup(nodes);
+  const rects = [];
+  for (const node of nodes) {
+    if (exclude.has(node.id) || node.hidden === true) continue;
+    if (options.filter && !options.filter(node)) continue;
+    rects.push(getNodeRect(node, lookup, options));
+  }
+  return createGuideIndex(rects);
+}
+function snapNodeDrag(nodes, draggingIds, options = {}) {
+  const ids = new Set(draggingIds);
+  const lookup = createNodeLookup(nodes);
+  const dragged = [...ids].map((id) => lookup.get(id)).filter((n) => !!n);
+  const empty = {
+    position: { x: 0, y: 0 },
+    offset: { x: 0, y: 0 },
+    guides: [],
+    snappedX: false,
+    snappedY: false,
+    updates: []
+  };
+  if (dragged.length === 0) return empty;
+  const bounds = _chunkWADCJ7A7cjs.boundsOf.call(void 0, dragged.map((n) => getNodeRect(n, lookup, options)));
+  const index = _nullishCoalesce(options.index, () => ( createNodeGuideIndex(nodes, ids, options)));
+  const result = computeSnapGuides(bounds, index, options);
+  const { x: dx, y: dy } = result.offset;
+  const updates = [];
+  if (dx !== 0 || dy !== 0) {
+    for (const node of dragged) {
+      if (node.parentId && ids.has(node.parentId)) continue;
+      updates.push({ id: node.id, position: { x: node.position.x + dx, y: node.position.y + dy } });
+    }
+  }
+  return { ...result, updates };
+}
+
+// src/canvas/connectors.ts
+var CONNECTION_LINE_TYPES = [
+  "default",
+  "straight",
+  "step",
+  "smoothstep",
+  "simplebezier"
+];
+function positionToSide(position) {
+  switch (position) {
+    case "top":
+      return "above";
+    case "bottom":
+      return "below";
+    default:
+      return position;
+  }
+}
+function sideToPosition(side) {
+  switch (side) {
+    case "above":
+      return "top";
+    case "below":
+      return "bottom";
+    default:
+      return side;
+  }
+}
+function oppositePosition(position) {
+  switch (position) {
+    case "top":
+      return "bottom";
+    case "bottom":
+      return "top";
+    case "left":
+      return "right";
+    default:
+      return "left";
+  }
+}
+function handlePoint(rect, position) {
+  switch (position) {
+    case "top":
+      return { x: rect.x + rect.width / 2, y: rect.y };
+    case "bottom":
+      return { x: rect.x + rect.width / 2, y: rect.y + rect.height };
+    case "left":
+      return { x: rect.x, y: rect.y + rect.height / 2 };
+    default:
+      return { x: rect.x + rect.width, y: rect.y + rect.height / 2 };
+  }
+}
+function findConnectorSnap(pointer, targets, options = {}) {
+  const zoom = options.zoom && options.zoom > 0 ? options.zoom : 1;
+  const radius = (_nullishCoalesce(options.radius, () => ( 24))) / zoom;
+  const exclude = new Set(_nullishCoalesce(options.excludeIds, () => ( [])));
+  const all = ["top", "right", "bottom", "left"];
+  let best = null;
+  for (const target of targets) {
+    if (exclude.has(target.id)) continue;
+    const { rect } = target;
+    if (pointer.x < rect.x - radius || pointer.x > rect.x + rect.width + radius || pointer.y < rect.y - radius || pointer.y > rect.y + rect.height + radius) {
+      continue;
+    }
+    const inside = pointer.x >= rect.x && pointer.x <= rect.x + rect.width && pointer.y >= rect.y && pointer.y <= rect.y + rect.height;
+    for (const position of _nullishCoalesce(target.positions, () => ( all))) {
+      const point = options.mode === "edge" ? closestPointOnSide(rect, position, pointer) : handlePoint(rect, position);
+      const sidePoint = closestPointOnSide(rect, position, pointer);
+      const rank = Math.hypot(pointer.x - sidePoint.x, pointer.y - sidePoint.y);
+      const distance = Math.hypot(pointer.x - point.x, pointer.y - point.y);
+      if (!inside && rank > radius) continue;
+      const better = !best || inside && !best.inside || inside === best.inside && rank < best.rank;
+      if (better) {
+        best = { nodeId: target.id, position, side: positionToSide(position), point, distance, inside, rank };
+      }
+    }
+  }
+  if (!best) return null;
+  const { inside: _inside, rank: _rank, ...snap } = best;
+  return snap;
+}
+function closestPointOnSide(rect, position, p) {
+  const clampX = Math.min(rect.x + rect.width, Math.max(rect.x, p.x));
+  const clampY = Math.min(rect.y + rect.height, Math.max(rect.y, p.y));
+  switch (position) {
+    case "top":
+      return { x: clampX, y: rect.y };
+    case "bottom":
+      return { x: clampX, y: rect.y + rect.height };
+    case "left":
+      return { x: rect.x, y: clampY };
+    default:
+      return { x: rect.x + rect.width, y: clampY };
+  }
+}
+function nearestHandlePositions(source, target) {
+  const a = _chunkWADCJ7A7cjs.centre.call(void 0, source);
+  const b = _chunkWADCJ7A7cjs.centre.call(void 0, target);
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  if (Math.abs(dx) >= Math.abs(dy)) {
+    return dx >= 0 ? { source: "right", target: "left" } : { source: "left", target: "right" };
+  }
+  return dy >= 0 ? { source: "bottom", target: "top" } : { source: "top", target: "bottom" };
+}
+
+// src/canvas/scenes.ts
+var fallbackCounter = 0;
+function defaultId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  fallbackCounter += 1;
+  return `scene-${Date.now().toString(36)}-${fallbackCounter}`;
+}
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function isValidCanvasScene(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const scene = value;
+  const vp = scene.viewport;
+  return typeof scene.id === "string" && typeof scene.name === "string" && typeof vp === "object" && vp !== null && isFiniteNumber(vp.x) && isFiniteNumber(vp.y) && isFiniteNumber(vp.zoom) && vp.zoom > 0 && (scene.nodeIds === void 0 || Array.isArray(scene.nodeIds) && scene.nodeIds.every((id) => typeof id === "string"));
+}
+function cloneScene(scene) {
+  const copy = {
+    id: scene.id,
+    name: scene.name,
+    viewport: { x: scene.viewport.x, y: scene.viewport.y, zoom: scene.viewport.zoom }
+  };
+  if (scene.nodeIds) copy.nodeIds = [...scene.nodeIds];
+  return copy;
+}
+function parseCanvasScenes(input) {
+  let value = input;
+  if (typeof input === "string") {
+    try {
+      value = JSON.parse(input);
+    } catch (e4) {
+      return [];
+    }
+  }
+  const list = Array.isArray(value) ? value : typeof value === "object" && value !== null && Array.isArray(value.scenes) ? value.scenes : [];
+  const seen = /* @__PURE__ */ new Set();
+  const scenes = [];
+  for (const entry of list) {
+    if (!isValidCanvasScene(entry) || seen.has(entry.id)) continue;
+    seen.add(entry.id);
+    scenes.push(cloneScene(entry));
+  }
+  return scenes;
+}
+var CanvasScenesStore = (_class3 = class {
+  
+  __init10() {this.currentId = null}
+  
+  __init11() {this.listeners = /* @__PURE__ */ new Set()}
+  
+  
+  
+  constructor(options = {}) {;_class3.prototype.__init10.call(this);_class3.prototype.__init11.call(this);
+    this.scenes = parseCanvasScenes(_nullishCoalesce(options.initialScenes, () => ( [])));
+    this.createId = _nullishCoalesce(options.createId, () => ( defaultId));
+    this.wrap = _nullishCoalesce(options.wrap, () => ( false));
+    this.onChange = options.onChange;
+    this.cached = this.snapshot();
+  }
+  snapshot() {
+    const currentIndex = this.currentId ? this.scenes.findIndex((s) => s.id === this.currentId) : -1;
+    return {
+      scenes: this.scenes,
+      currentId: currentIndex === -1 ? null : this.currentId,
+      currentIndex
+    };
+  }
+  commit(scenes = this.scenes) {
+    this.scenes = scenes;
+    if (this.currentId && !scenes.some((s) => s.id === this.currentId)) this.currentId = null;
+    this.cached = this.snapshot();
+    _optionalChain([this, 'access', _46 => _46.onChange, 'optionalCall', _47 => _47(this.cached)]);
+    for (const listener of this.listeners) listener(this.cached);
+  }
+  getState() {
+    return this.cached;
+  }
+  getScene(id) {
+    return this.scenes.find((s) => s.id === id);
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  /** First unused "Scene N" name. */
+  nextDefaultName() {
+    const names = new Set(this.scenes.map((s) => s.name));
+    let n = this.scenes.length + 1;
+    while (names.has(`Scene ${n}`)) n += 1;
+    return `Scene ${n}`;
+  }
+  /**
+   * Adds a scene (appended, or inserted at `index`) and makes it current.
+   */
+  add(input, index) {
+    const scene = cloneScene({
+      id: input.id && !this.getScene(input.id) ? input.id : this.createId(),
+      name: _optionalChain([input, 'access', _48 => _48.name, 'optionalAccess', _49 => _49.trim, 'call', _50 => _50()]) || this.nextDefaultName(),
+      viewport: input.viewport,
+      nodeIds: input.nodeIds
+    });
+    if (!isValidCanvasScene(scene)) throw new Error("[CanvasScenesStore] Invalid scene viewport.");
+    const scenes = [...this.scenes];
+    const at = index === void 0 ? scenes.length : Math.max(0, Math.min(scenes.length, index));
+    scenes.splice(at, 0, scene);
+    this.currentId = scene.id;
+    this.commit(scenes);
+    return scene;
+  }
+  /** Patches a scene's name, viewport or node ids. Returns the updated scene. */
+  update(id, patch) {
+    const index = this.scenes.findIndex((s) => s.id === id);
+    if (index === -1) return void 0;
+    const current = this.scenes[index];
+    const next = cloneScene({
+      ...current,
+      ...patch,
+      name: patch.name !== void 0 ? patch.name.trim() || current.name : current.name,
+      viewport: _nullishCoalesce(patch.viewport, () => ( current.viewport)),
+      id
+    });
+    if (!isValidCanvasScene(next)) throw new Error("[CanvasScenesStore] Invalid scene viewport.");
+    const scenes = [...this.scenes];
+    scenes[index] = next;
+    this.commit(scenes);
+    return next;
+  }
+  rename(id, name) {
+    return this.update(id, { name });
+  }
+  /** Moves a scene to `toIndex` (clamped). */
+  move(id, toIndex) {
+    const from = this.scenes.findIndex((s) => s.id === id);
+    if (from === -1) return;
+    const to = Math.max(0, Math.min(this.scenes.length - 1, Math.trunc(toIndex)));
+    if (from === to) return;
+    const scenes = [...this.scenes];
+    const [scene] = scenes.splice(from, 1);
+    scenes.splice(to, 0, scene);
+    this.commit(scenes);
+  }
+  /** Reorders scenes to match `ids`; unknown ids are ignored and missing scenes keep their relative order at the end. */
+  reorder(ids) {
+    const byId = new Map(this.scenes.map((s) => [s.id, s]));
+    const ordered = [];
+    for (const id of ids) {
+      const scene = byId.get(id);
+      if (scene) {
+        ordered.push(scene);
+        byId.delete(id);
+      }
+    }
+    this.commit([...ordered, ...this.scenes.filter((s) => byId.has(s.id))]);
+  }
+  remove(id) {
+    if (!this.getScene(id)) return;
+    this.commit(this.scenes.filter((s) => s.id !== id));
+  }
+  clear() {
+    this.currentId = null;
+    this.commit([]);
+  }
+  /** Marks a scene as current and returns it. */
+  goTo(id) {
+    const scene = this.getScene(id);
+    if (!scene) return void 0;
+    if (this.currentId !== id) {
+      this.currentId = id;
+      this.commit();
+    }
+    return scene;
+  }
+  step(direction) {
+    const count = this.scenes.length;
+    if (count === 0) return void 0;
+    const index = this.cached.currentIndex;
+    let next;
+    if (index === -1) next = direction === 1 ? 0 : count - 1;
+    else next = index + direction;
+    if (next < 0 || next >= count) {
+      if (!this.wrap) return void 0;
+      next = (next + count) % count;
+    }
+    return this.goTo(this.scenes[next].id);
+  }
+  /** Shows the next scene. Returns `undefined` at the end unless `wrap` is on. */
+  next() {
+    return this.step(1);
+  }
+  /** Shows the previous scene. Returns `undefined` at the start unless `wrap` is on. */
+  previous() {
+    return this.step(-1);
+  }
+  toJSON() {
+    return { version: 1, scenes: this.scenes.map(cloneScene) };
+  }
+  serialize() {
+    return JSON.stringify(this.toJSON());
+  }
+  /** Replaces all scenes from serialized data (see `parseCanvasScenes`). */
+  load(input) {
+    this.currentId = null;
+    this.commit(parseCanvasScenes(input));
+  }
+}, _class3);
+function createCanvasScenesStore(options) {
+  return new CanvasScenesStore(options);
+}
+function fitViewportToRect(rect, size, options = {}) {
+  const { padding = 0.1, minZoom = 0.1, maxZoom = 2 } = options;
+  const paddedWidth = Math.max(rect.width * (1 + padding * 2), 1);
+  const paddedHeight = Math.max(rect.height * (1 + padding * 2), 1);
+  const raw = Math.min(size.width / paddedWidth, size.height / paddedHeight);
+  const zoom = Math.min(maxZoom, Math.max(minZoom, raw));
+  const cx = rect.x + rect.width / 2;
+  const cy = rect.y + rect.height / 2;
+  return { x: size.width / 2 - cx * zoom, y: size.height / 2 - cy * zoom, zoom };
+}
+function fitViewportToNodes(nodes, size, ids, options = {}) {
+  const lookup = createNodeLookup(nodes);
+  const wanted = ids ? new Set(ids) : null;
+  const rects = nodes.filter((n) => wanted ? wanted.has(n.id) : true).map((n) => getNodeRect(n, lookup, options));
+  const bounds = _chunkWADCJ7A7cjs.boundsOf.call(void 0, rects);
+  return bounds ? fitViewportToRect(bounds, size, options) : null;
+}
+
+// src/canvas/arrangeShortcuts.ts
+var DEFAULT_ARRANGE_SHORTCUTS = [
+  { action: "alignLeft", code: "KeyA", alt: true, label: "Alt+A" },
+  { action: "alignCenter", code: "KeyH", alt: true, label: "Alt+H" },
+  { action: "alignRight", code: "KeyD", alt: true, label: "Alt+D" },
+  { action: "alignTop", code: "KeyW", alt: true, label: "Alt+W" },
+  { action: "alignMiddle", code: "KeyV", alt: true, label: "Alt+V" },
+  { action: "alignBottom", code: "KeyS", alt: true, label: "Alt+S" },
+  { action: "distributeHorizontal", code: "KeyH", alt: true, shift: true, label: "Alt+Shift+H" },
+  { action: "distributeVertical", code: "KeyV", alt: true, shift: true, label: "Alt+Shift+V" },
+  { action: "lock", code: "KeyL", mod: true, label: "Mod+L" },
+  { action: "unlock", code: "KeyL", mod: true, alt: true, label: "Mod+Alt+L" },
+  { action: "bringForward", code: "BracketRight", mod: true, label: "Mod+]" },
+  { action: "sendBackward", code: "BracketLeft", mod: true, label: "Mod+[" },
+  { action: "bringToFront", code: "BracketRight", mod: true, alt: true, label: "Mod+Alt+]" },
+  { action: "sendToBack", code: "BracketLeft", mod: true, alt: true, label: "Mod+Alt+[" },
+  { action: "nextScene", code: "PageDown", label: "PageDown" },
+  { action: "previousScene", code: "PageUp", label: "PageUp" }
+];
+var KEY_TO_CODE = {
+  "]": "BracketRight",
+  "[": "BracketLeft",
+  PageDown: "PageDown",
+  PageUp: "PageUp"
+};
+function eventCode(event) {
+  if (event.code) return event.code;
+  if (KEY_TO_CODE[event.key]) return KEY_TO_CODE[event.key];
+  if (/^[a-z]$/i.test(event.key)) return `Key${event.key.toUpperCase()}`;
+  return event.key;
+}
+function matchArrangeShortcut(event, bindings = DEFAULT_ARRANGE_SHORTCUTS) {
+  if (isEventFromTextInput(event)) return null;
+  const code = eventCode(event);
+  const mod = event.metaKey || event.ctrlKey;
+  for (const binding of bindings) {
+    if (binding.code === code && !!binding.mod === mod && !!binding.alt === event.altKey && !!binding.shift === event.shiftKey) {
+      return binding.action;
+    }
+  }
+  return null;
+}
+
+// src/canvas/arrangeController.ts
+function createCanvasArrangeController(options) {
+  let guides = [];
+  let dragIndex = null;
+  let dragKey = "";
+  const selectedIds = (ids) => ids ? [...ids] : _nullishCoalesce(_optionalChain([options, 'access', _51 => _51.getSelectedIds, 'optionalCall', _52 => _52()]), () => ( options.getNodes().filter((n) => n.selected).map((n) => n.id)));
+  const setGuides = (next) => {
+    if (next.length === 0 && guides.length === 0) return;
+    guides = next;
+    _optionalChain([options, 'access', _53 => _53.onGuidesChange, 'optionalCall', _54 => _54(guides)]);
+  };
+  function apply(name, updates) {
+    if (updates.length === 0) return updates;
+    const inverse = invertNodeUpdates(options.getNodes(), updates);
+    const run = (u) => options.setNodes(applyNodeUpdates(options.getNodes(), u));
+    if (options.history) {
+      options.history.execute({ name, execute: () => run(updates), undo: () => run(inverse) });
+    } else {
+      run(updates);
+    }
+    return updates;
+  }
+  function setLocked(name, ids, locked) {
+    const nodes = options.getNodes();
+    const set = new Set(ids);
+    const changed = nodes.filter((n) => set.has(n.id) && isLocked(n) !== locked).map((n) => n.id);
+    if (changed.length === 0) return changed;
+    const lock = () => options.setNodes(lockNodes(options.getNodes(), changed));
+    const unlock = () => options.setNodes(unlockNodes(options.getNodes(), changed));
+    if (options.history) {
+      options.history.execute({ name, execute: locked ? lock : unlock, undo: locked ? unlock : lock });
+    } else if (locked) lock();
+    else unlock();
+    return changed;
+  }
+  const rect = () => _nullishCoalesce(options.rectOptions, () => ( {}));
+  const controller = {
+    get guides() {
+      return guides;
+    },
+    apply,
+    align(edge, ids, alignOptions = {}) {
+      return apply(`Align ${edge}`, alignNodes(options.getNodes(), selectedIds(ids), edge, { ...rect(), ...alignOptions }));
+    },
+    distribute(axis, mode = "gaps", ids, distributeOptions = {}) {
+      return apply(
+        `Distribute ${axis}`,
+        distributeNodes(options.getNodes(), selectedIds(ids), axis, mode, { ...rect(), ...distributeOptions })
+      );
+    },
+    matchSize(dimension, ids, sizeOptions = {}) {
+      return apply(
+        "Make Same Size",
+        matchSize(options.getNodes(), selectedIds(ids), dimension, { ...rect(), ...sizeOptions })
+      );
+    },
+    reorder(operation, ids) {
+      return apply(operation, reorderNodes(options.getNodes(), selectedIds(ids), operation, rect()));
+    },
+    bringForward: (ids) => controller.reorder("bringForward", ids),
+    sendBackward: (ids) => controller.reorder("sendBackward", ids),
+    bringToFront: (ids) => controller.reorder("bringToFront", ids),
+    sendToBack: (ids) => controller.reorder("sendToBack", ids),
+    lock: (ids) => setLocked("Lock", selectedIds(ids), true),
+    unlock: (ids) => setLocked("Unlock", selectedIds(ids), false),
+    toggleLock(ids) {
+      const list = selectedIds(ids);
+      const set = new Set(list);
+      const anyUnlocked = options.getNodes().some((n) => set.has(n.id) && !isLocked(n));
+      return anyUnlocked ? controller.lock(list) : controller.unlock(list);
+    },
+    isLocked: (id) => isLocked(options.getNodes().find((n) => n.id === id)),
+    /**
+     * Runs a shortcut action. Scene actions are not handled here (see the scenes store);
+     * returns `false` for them and for unknown actions.
+     */
+    runAction(action) {
+      switch (action) {
+        case "alignLeft":
+          controller.align("left");
+          return true;
+        case "alignCenter":
+          controller.align("center");
+          return true;
+        case "alignRight":
+          controller.align("right");
+          return true;
+        case "alignTop":
+          controller.align("top");
+          return true;
+        case "alignMiddle":
+          controller.align("middle");
+          return true;
+        case "alignBottom":
+          controller.align("bottom");
+          return true;
+        case "distributeHorizontal":
+          controller.distribute("horizontal");
+          return true;
+        case "distributeVertical":
+          controller.distribute("vertical");
+          return true;
+        case "lock":
+          controller.lock();
+          return true;
+        case "unlock":
+          controller.unlock();
+          return true;
+        case "bringForward":
+          controller.bringForward();
+          return true;
+        case "sendBackward":
+          controller.sendBackward();
+          return true;
+        case "bringToFront":
+          controller.bringToFront();
+          return true;
+        case "sendToBack":
+          controller.sendToBack();
+          return true;
+        default:
+          return false;
+      }
+    },
+    /** Caches the snap targets for a drag. Optional: `drag` builds them lazily. */
+    beginDrag(ids) {
+      const list = selectedIds(ids);
+      dragKey = list.slice().sort().join("\0");
+      dragIndex = createNodeGuideIndex(options.getNodes(), list, rect());
+    },
+    /**
+     * Snaps the dragged nodes (as currently positioned in `getNodes()`) to the other
+     * nodes, writes the snapped positions back through `setNodes` (not recorded in
+     * history) and updates `guides`.
+     */
+    drag(ids) {
+      if (options.snapping === false) return null;
+      const list = selectedIds(ids);
+      const key = list.slice().sort().join("\0");
+      if (!dragIndex || key !== dragKey) controller.beginDrag(list);
+      const result = snapNodeDrag(options.getNodes(), list, {
+        ...rect(),
+        ...options.guides,
+        zoom: _nullishCoalesce(_optionalChain([options, 'access', _55 => _55.getZoom, 'optionalCall', _56 => _56()]), () => ( 1)),
+        index: dragIndex
+      });
+      if (result.updates.length > 0) {
+        options.setNodes(applyNodeUpdates(options.getNodes(), result.updates));
+      }
+      setGuides(result.guides);
+      return result;
+    },
+    /**
+     * React Flow style: adjusts dragging `position` changes in an `onNodesChange` batch so
+     * the dragged nodes snap, and updates `guides`. Returns the (possibly new) changes array.
+     * A batch without a dragging position change ends the drag and clears the guides.
+     */
+    snapPositionChanges(changes) {
+      const dragging = changes.filter((c) => c.type === "position" && c.position && c.dragging);
+      if (dragging.length === 0) {
+        if (changes.some((c) => c.type === "position" && c.dragging === false)) controller.endDrag();
+        return changes;
+      }
+      if (options.snapping === false) return changes;
+      const ids = dragging.map((c) => c.id);
+      const key = ids.slice().sort().join("\0");
+      if (!dragIndex || key !== dragKey) controller.beginDrag(ids);
+      const proposed = new Map(dragging.map((c) => [c.id, c.position]));
+      const nodes = options.getNodes().map((n) => proposed.has(n.id) ? { ...n, position: proposed.get(n.id) } : n);
+      const result = snapNodeDrag(nodes, ids, {
+        ...rect(),
+        ...options.guides,
+        zoom: _nullishCoalesce(_optionalChain([options, 'access', _57 => _57.getZoom, 'optionalCall', _58 => _58()]), () => ( 1)),
+        index: dragIndex
+      });
+      setGuides(result.guides);
+      const { x: dx, y: dy } = result.offset;
+      if (dx === 0 && dy === 0) return changes;
+      const parents = new Map(nodes.map((n) => [n.id, n.parentId]));
+      const shift = new Set(ids.filter((id) => !proposed.has(_nullishCoalesce(parents.get(id), () => ( "")))));
+      return changes.map(
+        (c) => c.type === "position" && c.position && c.dragging && shift.has(c.id) ? { ...c, position: { x: c.position.x + dx, y: c.position.y + dy } } : c
+      );
+    },
+    /** Clears guides and the cached snap targets. */
+    endDrag() {
+      dragIndex = null;
+      dragKey = "";
+      setGuides([]);
+    }
+  };
+  return controller;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -760,5 +1978,5 @@ var StreamingLayoutManager = (_class2 = class {
 
 
 
-exports.DEFAULT_NODE_HEIGHT = _chunkWADCJ7A7cjs.DEFAULT_NODE_HEIGHT; exports.DEFAULT_NODE_WIDTH = _chunkWADCJ7A7cjs.DEFAULT_NODE_WIDTH; exports.DEFAULT_PLACEMENT_GAP = _chunkWADCJ7A7cjs.DEFAULT_PLACEMENT_GAP; exports.ManualClock = ManualClock; exports.StreamingLayoutManager = StreamingLayoutManager; exports.blendLayout = blendLayout; exports.boundsOf = _chunkWADCJ7A7cjs.boundsOf; exports.calculateDagreReflowDisplacement = calculateDagreReflowDisplacement; exports.calculateDirectionalDisplacement = calculateDirectionalDisplacement; exports.canvasHeight = canvasHeight; exports.centerNodes = _chunkWADCJ7A7cjs.centerNodes; exports.centre = _chunkWADCJ7A7cjs.centre; exports.computeNodesBoundingBox = computeNodesBoundingBox; exports.connectedOnly = connectedOnly; exports.createBezierTrajectory = createBezierTrajectory; exports.createFanOutTrajectory = createFanOutTrajectory; exports.defaultEasing = defaultEasing; exports.ensureLayout = _chunkWADCJ7A7cjs.ensureLayout; exports.estimateCanvasHeight = estimateCanvasHeight; exports.estimateNodeSize = _chunkWADCJ7A7cjs.estimateNodeSize; exports.flowSide = _chunkWADCJ7A7cjs.flowSide; exports.getCenteredNodePosition = _chunkWADCJ7A7cjs.getCenteredNodePosition; exports.getLayoutedNodes = _chunkWADCJ7A7cjs.getLayoutedNodes; exports.isEventFromTextInput = isEventFromTextInput; exports.isValidCanvasEdge = isValidCanvasEdge; exports.isValidCanvasNode = isValidCanvasNode; exports.isValidUrl = isValidUrl; exports.layoutBounds = layoutBounds; exports.linearPositionTrajectory = linearPositionTrajectory; exports.linearTrajectory = linearTrajectory; exports.overlaps = _chunkWADCJ7A7cjs.overlaps; exports.pageHidden = pageHidden; exports.parseCanvasClipboardData = parseCanvasClipboardData; exports.placeBeside = _chunkWADCJ7A7cjs.placeBeside; exports.realClock = realClock; exports.remapPastedNodes = remapPastedNodes; exports.repositionNodesTo = repositionNodesTo; exports.runMultiNodeTransition = runMultiNodeTransition; exports.serializeCanvasNodes = serializeCanvasNodes; exports.withStyleOpacity = withStyleOpacity;
+exports.CONNECTION_LINE_TYPES = CONNECTION_LINE_TYPES; exports.CanvasScenesStore = CanvasScenesStore; exports.DEFAULT_ARRANGE_SHORTCUTS = DEFAULT_ARRANGE_SHORTCUTS; exports.DEFAULT_NODE_HEIGHT = _chunkWADCJ7A7cjs.DEFAULT_NODE_HEIGHT; exports.DEFAULT_NODE_WIDTH = _chunkWADCJ7A7cjs.DEFAULT_NODE_WIDTH; exports.DEFAULT_PLACEMENT_GAP = _chunkWADCJ7A7cjs.DEFAULT_PLACEMENT_GAP; exports.LOCKED_DATA_KEY = LOCKED_DATA_KEY; exports.LOCKED_PREVIOUS_FLAGS_KEY = LOCKED_PREVIOUS_FLAGS_KEY; exports.ManualClock = ManualClock; exports.StreamingLayoutManager = StreamingLayoutManager; exports.alignNodes = alignNodes; exports.applyNodeUpdates = applyNodeUpdates; exports.blendLayout = blendLayout; exports.boundsOf = _chunkWADCJ7A7cjs.boundsOf; exports.calculateDagreReflowDisplacement = calculateDagreReflowDisplacement; exports.calculateDirectionalDisplacement = calculateDirectionalDisplacement; exports.canvasHeight = canvasHeight; exports.centerNodes = _chunkWADCJ7A7cjs.centerNodes; exports.centre = _chunkWADCJ7A7cjs.centre; exports.collectDescendantIds = collectDescendantIds; exports.computeNodesBoundingBox = computeNodesBoundingBox; exports.computeSnapGuides = computeSnapGuides; exports.connectedOnly = connectedOnly; exports.createBezierTrajectory = createBezierTrajectory; exports.createCanvasArrangeController = createCanvasArrangeController; exports.createCanvasScenesStore = createCanvasScenesStore; exports.createFanOutTrajectory = createFanOutTrajectory; exports.createGuideIndex = createGuideIndex; exports.createNodeGuideIndex = createNodeGuideIndex; exports.createNodeLookup = createNodeLookup; exports.defaultEasing = defaultEasing; exports.distributeNodes = distributeNodes; exports.ensureLayout = _chunkWADCJ7A7cjs.ensureLayout; exports.estimateCanvasHeight = estimateCanvasHeight; exports.estimateNodeSize = _chunkWADCJ7A7cjs.estimateNodeSize; exports.findConnectorSnap = findConnectorSnap; exports.fitViewportToNodes = fitViewportToNodes; exports.fitViewportToRect = fitViewportToRect; exports.flowSide = _chunkWADCJ7A7cjs.flowSide; exports.getAbsolutePosition = getAbsolutePosition; exports.getCenteredNodePosition = _chunkWADCJ7A7cjs.getCenteredNodePosition; exports.getLayoutedNodes = _chunkWADCJ7A7cjs.getLayoutedNodes; exports.getNodeRect = getNodeRect; exports.getNodeSize = getNodeSize; exports.handlePoint = handlePoint; exports.invertNodeUpdates = invertNodeUpdates; exports.isEventFromTextInput = isEventFromTextInput; exports.isLocked = isLocked; exports.isValidCanvasEdge = isValidCanvasEdge; exports.isValidCanvasNode = isValidCanvasNode; exports.isValidCanvasScene = isValidCanvasScene; exports.isValidUrl = isValidUrl; exports.layoutBounds = layoutBounds; exports.linearPositionTrajectory = linearPositionTrajectory; exports.linearTrajectory = linearTrajectory; exports.lockNodes = lockNodes; exports.matchArrangeShortcut = matchArrangeShortcut; exports.matchSize = matchSize; exports.nearestHandlePositions = nearestHandlePositions; exports.oppositePosition = oppositePosition; exports.overlaps = _chunkWADCJ7A7cjs.overlaps; exports.pageHidden = pageHidden; exports.parseCanvasClipboardData = parseCanvasClipboardData; exports.parseCanvasScenes = parseCanvasScenes; exports.placeBeside = _chunkWADCJ7A7cjs.placeBeside; exports.positionToSide = positionToSide; exports.readStyleSize = readStyleSize; exports.realClock = realClock; exports.remapPastedNodes = remapPastedNodes; exports.reorderNodes = reorderNodes; exports.repositionNodesTo = repositionNodesTo; exports.runMultiNodeTransition = runMultiNodeTransition; exports.serializeCanvasNodes = serializeCanvasNodes; exports.sideToPosition = sideToPosition; exports.snapNodeDrag = snapNodeDrag; exports.toggleLockNodes = toggleLockNodes; exports.unlockNodes = unlockNodes; exports.withStyleOpacity = withStyleOpacity; exports.withStyleSize = withStyleSize;
 //# sourceMappingURL=index.cjs.map