@pixerate/editor 0.9.0 → 0.10.0

package/dist/canvas/index.cjs

@@ -0,0 +1,797 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/canvas/index.ts
+var canvas_exports = {};
+__export(canvas_exports, {
+  DEFAULT_NODE_HEIGHT: () => DEFAULT_NODE_HEIGHT,
+  DEFAULT_NODE_WIDTH: () => DEFAULT_NODE_WIDTH,
+  DEFAULT_PLACEMENT_GAP: () => DEFAULT_PLACEMENT_GAP,
+  StreamingLayoutManager: () => StreamingLayoutManager,
+  boundsOf: () => boundsOf,
+  calculateDagreReflowDisplacement: () => calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement: () => calculateDirectionalDisplacement,
+  centerNodes: () => centerNodes,
+  centre: () => centre,
+  computeNodesBoundingBox: () => computeNodesBoundingBox,
+  createBezierTrajectory: () => createBezierTrajectory,
+  createFanOutTrajectory: () => createFanOutTrajectory,
+  defaultEasing: () => defaultEasing,
+  ensureLayout: () => ensureLayout,
+  estimateNodeSize: () => estimateNodeSize,
+  flowSide: () => flowSide,
+  getCenteredNodePosition: () => getCenteredNodePosition,
+  getLayoutedNodes: () => getLayoutedNodes,
+  isEventFromTextInput: () => isEventFromTextInput,
+  isValidCanvasNode: () => isValidCanvasNode,
+  isValidUrl: () => isValidUrl,
+  linearPositionTrajectory: () => linearPositionTrajectory,
+  linearTrajectory: () => linearTrajectory,
+  overlaps: () => overlaps,
+  parseCanvasClipboardData: () => parseCanvasClipboardData,
+  placeBeside: () => placeBeside,
+  remapPastedNodes: () => remapPastedNodes,
+  repositionNodesTo: () => repositionNodesTo,
+  runMultiNodeTransition: () => runMultiNodeTransition,
+  serializeCanvasNodes: () => serializeCanvasNodes
+});
+module.exports = __toCommonJS(canvas_exports);
+
+// src/canvas/layout.ts
+var import_dagre = __toESM(require("@dagrejs/dagre"), 1);
+var DEFAULT_NODE_WIDTH = 200;
+var DEFAULT_NODE_HEIGHT = 60;
+var DEFAULT_PLACEMENT_GAP = 48;
+function getCenteredNodePosition(width = 0, height = 0, screenToFlowPosition, screenDimensions) {
+  const rect = screenDimensions ?? (typeof document !== "undefined" ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight } : { width: 1920, height: 1080 });
+  const flowPos = screenToFlowPosition({ x: rect.width / 2, y: rect.height / 2 });
+  return {
+    x: flowPos.x - width / 2,
+    y: flowPos.y - height / 2
+  };
+}
+function centerNodes(nodes, screenToFlowPosition, getNodesBounds, screenDimensions) {
+  if (nodes.length === 0) {
+    return [];
+  }
+  const bounds = getNodesBounds(nodes);
+  const boundingBoxOrigin = { x: bounds.x, y: bounds.y };
+  const centeredPosition = getCenteredNodePosition(
+    bounds.width,
+    bounds.height,
+    screenToFlowPosition,
+    screenDimensions
+  );
+  const deltaX = centeredPosition.x - boundingBoxOrigin.x;
+  const deltaY = centeredPosition.y - boundingBoxOrigin.y;
+  return nodes.map((node) => ({
+    ...node,
+    position: {
+      x: node.position.x + deltaX,
+      y: node.position.y + deltaY
+    }
+  }));
+}
+function getLayoutedNodes(nodes, edges, getNodesBounds, options = {}) {
+  if (nodes.length === 0) return [];
+  const {
+    direction = "LR",
+    ranksep = 100,
+    nodesep = 25,
+    defaultNodeWidth = DEFAULT_NODE_WIDTH,
+    defaultNodeHeight = DEFAULT_NODE_HEIGHT
+  } = options;
+  const dagreGraph = new import_dagre.default.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  nodes.forEach((node) => {
+    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
+    dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+  edges.forEach((edge) => {
+    if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+  });
+  import_dagre.default.layout(dagreGraph);
+  return nodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
+    return {
+      ...node,
+      position: {
+        x: nodeWithPosition.x - nodeWidth / 2,
+        y: nodeWithPosition.y - nodeHeight / 2
+      }
+    };
+  });
+}
+function estimateNodeSize(node, defaultWidth = DEFAULT_NODE_WIDTH, defaultHeight = DEFAULT_NODE_HEIGHT) {
+  const label = String(node.data?.label ?? node.data?.title ?? node.id ?? "");
+  const lines = label.split(/\n|<br\s*\/?>/);
+  const longest = Math.max(...lines.map((l) => l.replace(/<[^>]+>/g, "").length), 1);
+  const width = Math.min(480, Math.max(defaultWidth, longest * 8 + 48));
+  const height = Math.max(defaultHeight, lines.length * 20 + 24);
+  return { width, height };
+}
+function boundsOf(rects) {
+  if (!rects.length) return null;
+  const minX = Math.min(...rects.map((r) => r.x));
+  const minY = Math.min(...rects.map((r) => r.y));
+  const maxX = Math.max(...rects.map((r) => r.x + r.width));
+  const maxY = Math.max(...rects.map((r) => r.y + r.height));
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function centre(r) {
+  return { x: r.x + r.width / 2, y: r.y + r.height / 2 };
+}
+function overlaps(a, b, pad = 16) {
+  return a.x < b.x + b.width + pad && a.x + a.width + pad > b.x && a.y < b.y + b.height + pad && a.y + a.height + pad > b.y;
+}
+function flowSide(direction = "LR") {
+  switch (direction) {
+    case "LR":
+      return "right";
+    case "RL":
+      return "left";
+    case "BT":
+      return "above";
+    case "TB":
+    default:
+      return "below";
+  }
+}
+function ensureLayout(nodes, edges, options = {}) {
+  if (nodes.length === 0) return [];
+  const stored = options.storedPositions ?? {};
+  const missing = nodes.filter((n) => !stored[n.id]);
+  if (missing.length === 0) {
+    return nodes.map((n) => ({
+      ...n,
+      position: { ...stored[n.id] }
+    }));
+  }
+  const autoLayouted = getLayoutedNodes(nodes, edges, void 0, options);
+  const autoMap = new Map(
+    autoLayouted.map((n) => [n.id, n.position])
+  );
+  const both = nodes.filter((n) => stored[n.id] && autoMap.has(n.id));
+  if (both.length === 0) {
+    return autoLayouted;
+  }
+  let dx = 0;
+  let dy = 0;
+  for (const n of both) {
+    const s = stored[n.id];
+    const a = autoMap.get(n.id);
+    dx += s.x - a.x;
+    dy += s.y - a.y;
+  }
+  dx /= both.length;
+  dy /= both.length;
+  return nodes.map((node) => {
+    if (stored[node.id]) {
+      return {
+        ...node,
+        position: { ...stored[node.id] }
+      };
+    }
+    const autoPos = autoMap.get(node.id) ?? { x: 0, y: 0 };
+    return {
+      ...node,
+      position: {
+        x: Math.round(autoPos.x + dx),
+        y: Math.round(autoPos.y + dy)
+      }
+    };
+  });
+}
+function placeBeside(rects, size, side, nearNodeId, options = {}) {
+  const {
+    gap = DEFAULT_PLACEMENT_GAP,
+    ignore = [],
+    maxAttempts = 32
+  } = options;
+  const skip = new Set([nearNodeId, ...ignore].filter(Boolean));
+  const obstacles = Object.entries(rects).filter(([id]) => !skip.has(id)).map(([, r]) => r);
+  const anchor = nearNodeId && rects[nearNodeId] || boundsOf(Object.values(rects)) || { x: 0, y: 0, width: 0, height: 0 };
+  const anchorCenter = centre(anchor);
+  let baseX;
+  let baseY;
+  switch (side) {
+    case "right":
+      baseX = anchor.x + anchor.width + gap;
+      baseY = anchorCenter.y - size.height / 2;
+      break;
+    case "left":
+      baseX = anchor.x - gap - size.width;
+      baseY = anchorCenter.y - size.height / 2;
+      break;
+    case "above":
+      baseX = anchorCenter.x - size.width / 2;
+      baseY = anchor.y - gap - size.height;
+      break;
+    case "below":
+    default:
+      baseX = anchorCenter.x - size.width / 2;
+      baseY = anchor.y + anchor.height + gap;
+      break;
+  }
+  const isHorizontal = side === "right" || side === "left";
+  const step = (isHorizontal ? size.height : size.width) + 20;
+  for (let i = 0; i < maxAttempts; i++) {
+    const offset = i === 0 ? 0 : Math.ceil(i / 2) * step * (i % 2 === 1 ? 1 : -1);
+    const candidateBox = {
+      x: isHorizontal ? baseX : baseX + offset,
+      y: isHorizontal ? baseY + offset : baseY,
+      width: size.width,
+      height: size.height
+    };
+    if (!obstacles.some((obstacle) => overlaps(candidateBox, obstacle, 8))) {
+      return {
+        x: Math.round(candidateBox.x),
+        y: Math.round(candidateBox.y)
+      };
+    }
+  }
+  return {
+    x: Math.round(baseX),
+    y: Math.round(baseY)
+  };
+}
+
+// src/canvas/trajectory.ts
+var defaultEasing = (t) => --t * t * t + 1;
+var linearTrajectory = (origin, target, progress) => {
+  return {
+    position: {
+      x: origin.x + (target.x - origin.x) * progress,
+      y: origin.y + (target.y - origin.y) * progress
+    },
+    scale: progress,
+    opacity: Math.min(1, progress * 1.5)
+  };
+};
+var linearPositionTrajectory = (origin, target, progress) => {
+  return {
+    position: {
+      x: origin.x + (target.x - origin.x) * progress,
+      y: origin.y + (target.y - origin.y) * progress
+    }
+  };
+};
+function createFanOutTrajectory(options = {}) {
+  const {
+    curvature = 0.4,
+    startScale = 0,
+    endScale = 1,
+    startOpacity = 0,
+    endOpacity = 1
+  } = options;
+  return (origin, target, progress, index, total) => {
+    const dx = target.x - origin.x;
+    const dy = target.y - origin.y;
+    const normIndex = total > 1 ? (index - (total - 1) / 2) / ((total - 1) / 2) : 0;
+    const midX = origin.x + dx * 0.4;
+    const midY = origin.y + dy * 0.1 - normIndex * Math.abs(dx) * 0.15 * curvature;
+    const t = progress;
+    const oneMinusT = 1 - t;
+    const x = oneMinusT * oneMinusT * origin.x + 2 * oneMinusT * t * midX + t * t * target.x;
+    const y = oneMinusT * oneMinusT * origin.y + 2 * oneMinusT * t * midY + t * t * target.y;
+    const scale = startScale + (endScale - startScale) * progress;
+    const opacity = startOpacity + (endOpacity - startOpacity) * progress;
+    return {
+      position: { x, y },
+      scale,
+      opacity
+    };
+  };
+}
+function createBezierTrajectory(getControlPoint) {
+  return (origin, target, progress) => {
+    const cp = getControlPoint(origin, target);
+    const t = progress;
+    const oneMinusT = 1 - t;
+    const x = oneMinusT * oneMinusT * origin.x + 2 * oneMinusT * t * cp.x + t * t * target.x;
+    const y = oneMinusT * oneMinusT * origin.y + 2 * oneMinusT * t * cp.y + t * t * target.y;
+    return {
+      position: { x, y },
+      scale: progress,
+      opacity: progress
+    };
+  };
+}
+function runMultiNodeTransition(transitions, options = {}) {
+  if (transitions.length === 0) {
+    options.onComplete?.();
+    return () => {
+    };
+  }
+  const { defaultDuration = 400, defaultEasing: easingFunc = defaultEasing, onUpdate, onComplete } = options;
+  let isCancelled = false;
+  const startTime = Date.now();
+  const items = transitions.map((tr, i) => ({
+    ...tr,
+    index: tr.index ?? i,
+    total: tr.total ?? transitions.length,
+    duration: tr.duration ?? defaultDuration,
+    easing: tr.easing ?? easingFunc,
+    delay: tr.delay ?? 0,
+    trajectory: tr.trajectory ?? linearTrajectory
+  }));
+  function frame() {
+    if (isCancelled) return;
+    const now = Date.now();
+    let allCompleted = true;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const elapsed = now - (startTime + item.delay);
+      if (elapsed < 0) {
+        allCompleted = false;
+        continue;
+      }
+      const rawProgress = item.duration <= 0 ? 1 : Math.min(elapsed / item.duration, 1);
+      const progress = item.duration <= 0 ? 1 : item.easing(rawProgress);
+      const point = item.trajectory(item.from, item.to, progress, item.index, item.total);
+      item.node.position = { ...point.position };
+      if (point.scale !== void 0 || point.opacity !== void 0) {
+        if (!item.node.data) {
+          item.node.data = {};
+        }
+        if (point.scale !== void 0) {
+          item.node.data.scale = point.scale;
+        }
+        if (point.opacity !== void 0) {
+          item.node.data.opacity = point.opacity;
+          const currentStyle = (item.node.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim();
+          item.node.style = `${currentStyle ? currentStyle + "; " : ""}opacity: ${point.opacity};`;
+        }
+      }
+      if (rawProgress < 1) {
+        allCompleted = false;
+      }
+    }
+    onUpdate?.();
+    if (!allCompleted) {
+      if (typeof requestAnimationFrame !== "undefined") {
+        requestAnimationFrame(frame);
+      }
+    } else {
+      onComplete?.();
+    }
+  }
+  frame();
+  return () => {
+    isCancelled = true;
+  };
+}
+
+// src/canvas/displacement.ts
+var import_dagre2 = __toESM(require("@dagrejs/dagre"), 1);
+function computeNodesBoundingBox(nodes, defaultWidth = 200, defaultHeight = 60) {
+  if (nodes.length === 0) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    const width = node.measured?.width ?? node.width ?? defaultWidth;
+    const height = node.measured?.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);
+    maxY = Math.max(maxY, node.position.y + height);
+  }
+  return {
+    x: minX,
+    y: minY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+function calculateDirectionalDisplacement(params) {
+  const {
+    existingNodes,
+    originNode,
+    childNodes,
+    getNodesBounds,
+    options = {}
+  } = params;
+  const {
+    direction = "right",
+    gap = 40,
+    spreadSiblingLanes = false,
+    siblingTolerance = 50,
+    minY
+  } = options;
+  const displacedMap = /* @__PURE__ */ new Map();
+  if (childNodes.length === 0 || existingNodes.length === 0) {
+    return displacedMap;
+  }
+  const childBounds = getNodesBounds ? getNodesBounds(childNodes) : computeNodesBoundingBox(childNodes);
+  const originWidth = originNode.measured?.width ?? originNode.width ?? 200;
+  const originHeight = originNode.measured?.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(
+    0,
+    childBounds.y + childBounds.height - (originNode.position.y + originHeight) + gap
+  );
+  const equalDelta = Math.max(deltaUp, deltaDown);
+  for (const node of existingNodes) {
+    if (node.id === originNode.id) continue;
+    const isSiblingRow = Math.abs(node.position.y - originNode.position.y) < siblingTolerance;
+    switch (direction) {
+      case "right": {
+        if (node.position.x > originNode.position.x) {
+          displacedMap.set(node.id, {
+            x: node.position.x + deltaPrimary,
+            y: node.position.y
+          });
+        }
+        break;
+      }
+      case "left": {
+        if (node.position.x < originNode.position.x) {
+          displacedMap.set(node.id, {
+            x: node.position.x - deltaPrimary,
+            y: node.position.y
+          });
+        }
+        break;
+      }
+      case "down": {
+        if (node.position.y > originNode.position.y) {
+          displacedMap.set(node.id, {
+            x: node.position.x,
+            y: node.position.y + deltaPrimary
+          });
+        }
+        break;
+      }
+      case "up": {
+        if (node.position.y < originNode.position.y) {
+          displacedMap.set(node.id, {
+            x: node.position.x,
+            y: node.position.y - deltaPrimary
+          });
+        }
+        break;
+      }
+      case "vertical": {
+        if (isSiblingRow) break;
+        if (node.position.y < originNode.position.y) {
+          displacedMap.set(node.id, {
+            x: node.position.x,
+            y: node.position.y - equalDelta
+          });
+        } else if (node.position.y > originNode.position.y) {
+          displacedMap.set(node.id, {
+            x: node.position.x,
+            y: node.position.y + equalDelta
+          });
+        }
+        break;
+      }
+    }
+  }
+  if (spreadSiblingLanes && (direction === "right" || direction === "left")) {
+    for (const [nodeId, pos] of displacedMap.entries()) {
+      const node = existingNodes.find((n) => n.id === nodeId);
+      if (node && Math.abs(node.position.y - originNode.position.y) < siblingTolerance) {
+        const isAbove = node.position.y < originNode.position.y;
+        displacedMap.set(nodeId, {
+          x: pos.x,
+          y: pos.y + (isAbove ? -deltaUp : deltaDown)
+        });
+      }
+    }
+  }
+  if (minY !== void 0) {
+    for (const [nodeId, pos] of displacedMap.entries()) {
+      if (pos.y < minY) {
+        displacedMap.set(nodeId, { x: pos.x, y: minY });
+      }
+    }
+  }
+  return displacedMap;
+}
+function calculateDagreReflowDisplacement(params) {
+  const {
+    currentNodes,
+    futureNodes,
+    futureEdges,
+    options
+  } = params;
+  const {
+    anchorNodeId,
+    direction = "LR",
+    ranksep = 100,
+    nodesep = 25,
+    defaultNodeWidth = 200,
+    defaultNodeHeight = 60
+  } = options;
+  const anchorNode = currentNodes.find((n) => n.id === anchorNodeId);
+  if (!anchorNode) return /* @__PURE__ */ new Map();
+  const g = new import_dagre2.default.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: direction, ranksep, nodesep });
+  const nodeIds = new Set(futureNodes.map((n) => n.id));
+  futureNodes.forEach((node) => {
+    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
+    g.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+  });
+  futureEdges.forEach((edge) => {
+    if (nodeIds.has(edge.source) && nodeIds.has(edge.target)) {
+      g.setEdge(edge.source, edge.target);
+    }
+  });
+  import_dagre2.default.layout(g);
+  const anchorLayoutPos = g.node(anchorNodeId);
+  if (!anchorLayoutPos) return /* @__PURE__ */ new Map();
+  const anchorWidth = anchorNode.measured?.width ?? anchorNode.width ?? defaultNodeWidth;
+  const anchorHeight = anchorNode.measured?.height ?? anchorNode.height ?? defaultNodeHeight;
+  const anchorLayoutUpperLeft = {
+    x: anchorLayoutPos.x - anchorWidth / 2,
+    y: anchorLayoutPos.y - anchorHeight / 2
+  };
+  const deltaX = anchorNode.position.x - anchorLayoutUpperLeft.x;
+  const deltaY = anchorNode.position.y - anchorLayoutUpperLeft.y;
+  const displacementMap = /* @__PURE__ */ new Map();
+  currentNodes.forEach((node) => {
+    if (node.id === anchorNodeId) return;
+    const layoutNode = g.node(node.id);
+    if (!layoutNode) return;
+    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
+    const nodeHeight = node.measured?.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) {
+      displacementMap.set(node.id, { x: upperLeftX, y: upperLeftY });
+    }
+  });
+  return displacementMap;
+}
+
+// src/canvas/clipboard.ts
+function isEventFromTextInput(event) {
+  const target = event.target;
+  if (!target) return false;
+  if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable || target.closest?.('[contenteditable="true"]') || target.closest?.(".ProseMirror")) {
+    return true;
+  }
+  return false;
+}
+function isValidCanvasNode(obj) {
+  return typeof obj === "object" && obj !== null && "id" in obj && typeof obj.id === "string" && "position" in obj && typeof obj.position === "object" && obj.position !== null && "x" in obj.position && "y" in obj.position;
+}
+function isValidUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function serializeCanvasNodes(nodes, edges) {
+  const payload = {
+    version: 1,
+    nodes,
+    edges
+  };
+  return JSON.stringify(payload);
+}
+function parseCanvasClipboardData(raw) {
+  try {
+    const parsed = JSON.parse(raw);
+    if (typeof parsed === "object" && parsed !== null && Array.isArray(parsed.nodes) && parsed.nodes.length > 0 && parsed.nodes.every(isValidCanvasNode)) {
+      return parsed;
+    }
+  } catch {
+  }
+  return null;
+}
+function remapPastedNodes(nodes, edges = [], offset = { x: 30, y: 30 }, idGenerator = () => `node-${Math.random().toString(36).substring(2, 9)}`) {
+  const idMap = /* @__PURE__ */ new Map();
+  const newNodes = nodes.map((node) => {
+    const newId = idGenerator();
+    idMap.set(node.id, newId);
+    return {
+      ...node,
+      id: newId,
+      position: {
+        x: node.position.x + offset.x,
+        y: node.position.y + offset.y
+      },
+      selected: true
+    };
+  });
+  const newEdges = edges.filter((e) => idMap.has(e.source) && idMap.has(e.target)).map((edge) => ({
+    ...edge,
+    id: `edge-${Math.random().toString(36).substring(2, 9)}`,
+    source: idMap.get(edge.source),
+    target: idMap.get(edge.target),
+    selected: false
+  }));
+  return { nodes: newNodes, edges: newEdges };
+}
+function repositionNodesTo(nodes, targetOrigin) {
+  if (nodes.length === 0) return [];
+  const minX = Math.min(...nodes.map((n) => n.position.x));
+  const minY = Math.min(...nodes.map((n) => n.position.y));
+  const deltaX = targetOrigin.x - minX;
+  const deltaY = targetOrigin.y - minY;
+  return nodes.map((n) => ({
+    ...n,
+    position: {
+      x: n.position.x + deltaX,
+      y: n.position.y + deltaY
+    }
+  }));
+}
+
+// src/canvas/streaming.ts
+var StreamingLayoutManager = class {
+  throttleMs;
+  glideDurationMs;
+  layoutOptions;
+  onLayoutUpdated;
+  pendingTimer = null;
+  activeTransitionCancel = null;
+  targetPositions = /* @__PURE__ */ new Map();
+  constructor(options = {}) {
+    this.throttleMs = options.throttleMs ?? 200;
+    this.glideDurationMs = options.glideDurationMs ?? 300;
+    this.layoutOptions = options.layoutOptions ?? { direction: "LR" };
+    this.onLayoutUpdated = options.onLayoutUpdated;
+  }
+  /**
+   * Feed incoming nodes and edges into the streaming manager.
+   * Coalesces rapid streaming bursts and triggers smooth layout gliding.
+   */
+  pushStreamUpdate(nodes, edges, currentPositions) {
+    if (this.pendingTimer) {
+      clearTimeout(this.pendingTimer);
+    }
+    this.pendingTimer = setTimeout(() => {
+      this.pendingTimer = null;
+      this.recalculateAndGlide(nodes, edges, currentPositions);
+    }, this.throttleMs);
+  }
+  /**
+   * Forces immediate calculation and cancels pending throttled timers.
+   */
+  flush(nodes, edges, currentPositions) {
+    if (this.pendingTimer) {
+      clearTimeout(this.pendingTimer);
+      this.pendingTimer = null;
+    }
+    this.recalculateAndGlide(nodes, edges, currentPositions);
+  }
+  recalculateAndGlide(nodes, edges, currentPositions) {
+    if (nodes.length === 0) return;
+    if (this.activeTransitionCancel) {
+      this.activeTransitionCancel();
+      this.activeTransitionCancel = null;
+    }
+    const stored = {};
+    for (const [id, pos] of currentPositions.entries()) {
+      stored[id] = pos;
+    }
+    const layouted = ensureLayout(nodes, edges, {
+      ...this.layoutOptions,
+      storedPositions: stored
+    });
+    const nextPositions = /* @__PURE__ */ new Map();
+    const transitions = [];
+    for (const node of layouted) {
+      const target = node.position;
+      nextPositions.set(node.id, target);
+      const current = currentPositions.get(node.id) ?? target;
+      const distance = Math.hypot(target.x - current.x, target.y - current.y);
+      if (distance > 2) {
+        transitions.push({
+          node,
+          from: current,
+          to: target,
+          trajectory: linearPositionTrajectory,
+          duration: this.glideDurationMs
+        });
+      }
+    }
+    this.targetPositions = nextPositions;
+    if (transitions.length > 0) {
+      this.activeTransitionCancel = runMultiNodeTransition(transitions, {
+        onUpdate: () => {
+          const liveMap = new Map(currentPositions);
+          for (const trans of transitions) {
+            liveMap.set(trans.node.id, { ...trans.node.position });
+          }
+          this.onLayoutUpdated?.(liveMap);
+        },
+        onComplete: () => {
+          this.activeTransitionCancel = null;
+          this.onLayoutUpdated?.(nextPositions);
+        }
+      });
+    } else {
+      this.onLayoutUpdated?.(nextPositions);
+    }
+  }
+  destroy() {
+    if (this.pendingTimer) {
+      clearTimeout(this.pendingTimer);
+      this.pendingTimer = null;
+    }
+    if (this.activeTransitionCancel) {
+      this.activeTransitionCancel();
+      this.activeTransitionCancel = null;
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_NODE_HEIGHT,
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_PLACEMENT_GAP,
+  StreamingLayoutManager,
+  boundsOf,
+  calculateDagreReflowDisplacement,
+  calculateDirectionalDisplacement,
+  centerNodes,
+  centre,
+  computeNodesBoundingBox,
+  createBezierTrajectory,
+  createFanOutTrajectory,
+  defaultEasing,
+  ensureLayout,
+  estimateNodeSize,
+  flowSide,
+  getCenteredNodePosition,
+  getLayoutedNodes,
+  isEventFromTextInput,
+  isValidCanvasNode,
+  isValidUrl,
+  linearPositionTrajectory,
+  linearTrajectory,
+  overlaps,
+  parseCanvasClipboardData,
+  placeBeside,
+  remapPastedNodes,
+  repositionNodesTo,
+  runMultiNodeTransition,
+  serializeCanvasNodes
+});
+//# sourceMappingURL=index.cjs.map