@pixerate/editor-svelte 0.15.2 → 0.16.0

package/dist/canvas/index.js

@@ -1,1839 +1,34 @@
-// src/canvas/createCanvasGraph.svelte.ts
-import * as $ from "svelte/internal/client";
-import { cubicOut } from "svelte/easing";
-function calculateGraphDifferences(currentState, baselineState) {
-  const currentNodes = currentState.nodes ?? [];
-  const currentEdges = currentState.edges ?? [];
-  const baselineNodes = baselineState.nodes ?? [];
-  const baselineEdges = baselineState.edges ?? [];
-  const baselineNodeMap = new Map(baselineNodes.map((n) => [n.id, n]));
-  const baselineEdgeMap = new Map(baselineEdges.map((e) => [e.id, e]));
-  const currentNodeMap = new Map(currentNodes.map((n) => [n.id, n]));
-  const currentEdgeMap = new Map(currentEdges.map((e) => [e.id, e]));
-  const removedNodes = baselineNodes.filter((oldNode) => !currentNodeMap.has(oldNode.id));
-  const removedEdges = baselineEdges.filter((oldEdge) => !currentEdgeMap.has(oldEdge.id));
-  const changedNodes = currentNodes.filter((newNode) => {
-    const oldNode = baselineNodeMap.get(newNode.id);
-    if (!oldNode) return true;
-    return JSON.stringify(newNode) !== JSON.stringify(oldNode);
-  });
-  const changedEdges = currentEdges.filter((newEdge) => {
-    const oldEdge = baselineEdgeMap.get(newEdge.id);
-    if (!oldEdge) return true;
-    return JSON.stringify(newEdge) !== JSON.stringify(oldEdge);
-  });
-  return { changedNodes, changedEdges, removedNodes, removedEdges };
-}
-function replaceNodeInGraph(nodes, edges, oldNode, newNode, keepEdges = false) {
-  const updatedNodes = nodes.map((n) => n.id === oldNode.id ? newNode : n);
-  if (!keepEdges) {
-    return { nodes: updatedNodes, edges };
-  }
-  const updatedEdges = edges.map((edge) => {
-    if (edge.source === oldNode.id || edge.target === oldNode.id) {
-      return {
-        ...edge,
-        id: crypto.randomUUID(),
-        source: edge.source === oldNode.id ? newNode.id : edge.source,
-        target: edge.target === oldNode.id ? newNode.id : edge.target
-      };
-    }
-    return edge;
-  });
-  return { nodes: updatedNodes, edges: updatedEdges };
-}
-function createCanvasGraph(options = {}) {
-  let nodes = $.state(options.initialNodes ?? []);
-  let edges = $.state(options.initialEdges ?? []);
-  function setNodes(newNodes, triggerCallback = true) {
-    $.set(nodes, newNodes);
-    if (triggerCallback) {
-      options.onNodesChange?.($.get(nodes));
-    }
-  }
-  function setEdges(newEdges, triggerCallback = true) {
-    $.set(edges, newEdges);
-    if (triggerCallback) {
-      options.onEdgesChange?.($.get(edges));
-    }
-  }
-  function animateNodePosition(node, targetPosition, duration = 400, easing = cubicOut) {
-    const delay = node.data?.animationDelay ?? 0;
-    const startPosition = { ...node.position };
-    const startTime = Date.now() + delay;
-    function step() {
-      const currentTime = Date.now();
-      if (currentTime < startTime) {
-        if (typeof requestAnimationFrame !== "undefined") {
-          requestAnimationFrame(step);
-        }
-        return;
-      }
-      const progress = Math.min((currentTime - startTime) / duration, 1);
-      const eased = easing(progress);
-      const currentPos = {
-        x: startPosition.x + (targetPosition.x - startPosition.x) * eased,
-        y: startPosition.y + (targetPosition.y - startPosition.y) * eased
-      };
-      const targetNode = $.get(nodes).find((n) => n.id === node.id);
-      if (targetNode) {
-        targetNode.position = currentPos;
-      }
-      if (progress < 1) {
-        if (typeof requestAnimationFrame !== "undefined") {
-          requestAnimationFrame(step);
-        }
-      } else {
-        setNodes([...$.get(nodes)]);
-      }
-    }
-    step();
-  }
-  function addNodeOrNodes(nodeOrNodesToAdd, animateFromPosition, save = true) {
-    const toAdd = Array.isArray(nodeOrNodesToAdd) ? nodeOrNodesToAdd : [nodeOrNodesToAdd];
-    const existingMap = new Map($.get(nodes).map((n) => [n.id, n]));
-    toAdd.forEach((node) => {
-      if (!existingMap.has(node.id)) {
-        existingMap.set(node.id, node);
-      }
-    });
-    setNodes(Array.from(existingMap.values()));
-    if (animateFromPosition) {
-      toAdd.forEach((node) => {
-        const target = { ...node.position };
-        node.position = { ...animateFromPosition };
-        animateNodePosition(node, target);
-      });
-    }
-    if (save) options.onSave?.();
-  }
-  function addEdge(edgeToAdd, save = true) {
-    setEdges([...$.get(edges), edgeToAdd]);
-    if (save) options.onSave?.();
-  }
-  function addEdges(edgesToAdd, save = true) {
-    setEdges([...$.get(edges), ...edgesToAdd]);
-    if (save) options.onSave?.();
-  }
-  function removeNodes(nodesToRemove, save = true) {
-    const idsToRemove = new Set(nodesToRemove.map((n) => n.id));
-    setNodes($.get(nodes).filter((n) => !idsToRemove.has(n.id)));
-    if (save) options.onSave?.();
-  }
-  function removeEdges(edgesToRemove, save = true) {
-    const idsToRemove = new Set(edgesToRemove.map((e) => e.id));
-    setEdges($.get(edges).filter((e) => !idsToRemove.has(e.id)));
-    if (save) options.onSave?.();
-  }
-  function replaceNode(oldNode, newNode, save = true, keepEdges = false) {
-    const result = replaceNodeInGraph($.get(nodes), $.get(edges), oldNode, newNode, keepEdges);
-    setNodes(result.nodes);
-    if (result.edges !== $.get(edges)) {
-      setEdges(result.edges);
-    }
-    if (save) options.onSave?.();
-  }
-  function addConnectedNodes(params) {
-    const {
-      nodesToAdd,
-      inboundNodes = [],
-      outboundNodes = [],
-      animatedEdges = false,
-      animateFromPosition,
-      inboundEdgeData = {},
-      outboundEdgeData = {},
-      getEdgeLabel
-    } = params;
-    const defaultCreateEdge = (sourceId, targetId, opt) => {
-      if (options.createEdge) {
-        return options.createEdge(sourceId, targetId, opt);
-      }
-      return {
-        id: crypto.randomUUID(),
-        type: "default",
-        source: sourceId,
-        target: targetId,
-        label: opt?.label ?? "",
-        animated: opt?.animated ?? false,
-        data: opt?.data ?? {}
-      };
-    };
-    nodesToAdd.forEach((addedNode) => {
-      addNodeOrNodes(addedNode, animateFromPosition, false);
-      inboundNodes.forEach((sourceNode) => {
-        const label = getEdgeLabel ? getEdgeLabel(sourceNode, addedNode) : "";
-        addEdge(defaultCreateEdge(sourceNode.id, addedNode.id, { label, animated: animatedEdges, data: inboundEdgeData }), false);
-      });
-      outboundNodes.forEach((targetNode) => {
-        const label = getEdgeLabel ? getEdgeLabel(addedNode, targetNode) : "";
-        addEdge(defaultCreateEdge(addedNode.id, targetNode.id, { label, animated: animatedEdges, data: outboundEdgeData }), false);
-      });
-    });
-    options.onSave?.();
-  }
-  function getDifferences(baseline) {
-    return calculateGraphDifferences({ nodes: $.get(nodes), edges: $.get(edges) }, baseline);
-  }
-  return {
-    get nodes() {
-      return $.get(nodes);
-    },
-    set nodes(val) {
-      setNodes(val);
-    },
-    get edges() {
-      return $.get(edges);
-    },
-    set edges(val) {
-      setEdges(val);
-    },
-    setNodes,
-    setEdges,
-    addNodeOrNodes,
-    addEdge,
-    addEdges,
-    removeNodes,
-    removeEdges,
-    replaceNode,
-    addConnectedNodes,
-    animateNodePosition,
-    getDifferences
-  };
-}
-
-// src/canvas/createCanvasLayout.ts
-import dagre from "@dagrejs/dagre";
-import { Position } from "@xyflow/svelte";
-import {
-  ensureLayout,
-  placeBeside,
-  estimateNodeSize,
-  flowSide
-} from "@pixerate/editor/canvas";
-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 = 200,
-    defaultNodeHeight = 200
-  } = options;
-  const isHorizontal = direction === "LR" || direction === "RL";
-  const bounds = getNodesBounds(nodes);
-  const dagreGraph = new dagre.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);
-    }
-  });
-  dagre.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,
-      targetPosition: isHorizontal ? Position.Left : Position.Top,
-      sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
-      position: {
-        x: bounds.x + (nodeWithPosition?.x ?? 0) - nodeWidth / 2,
-        y: bounds.y + (nodeWithPosition?.y ?? 0) - nodeHeight / 2
-      }
-    };
-  });
-}
-
-// src/canvas/createCanvasClipboard.svelte.ts
-import * as $2 from "svelte/internal/client";
-import { tick } from "svelte";
-function isEventFromTextInput(event2) {
-  const target = event2.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 createCanvasClipboard(options = {}) {
-  function copySelectedNodes(selectedNodes, connectedEdges, event2) {
-    if (event2 && isEventFromTextInput(event2)) {
-      return false;
-    }
-    if (selectedNodes.length === 0) return false;
-    const payload = { version: 1, nodes: selectedNodes, edges: connectedEdges };
-    const serialized = JSON.stringify(payload);
-    if (event2?.clipboardData) {
-      event2.clipboardData.setData("application/json", serialized);
-      event2.clipboardData.setData("text/plain", serialized);
-      event2.preventDefault();
-    } else if (typeof navigator !== "undefined" && navigator.clipboard) {
-      navigator.clipboard.writeText(serialized).catch(() => {
-      });
-    }
-    return true;
-  }
-  function cutSelectedNodes(selectedNodes, connectedEdges, onRemove, event2) {
-    if (event2 && isEventFromTextInput(event2)) {
-      return false;
-    }
-    const copied = copySelectedNodes(selectedNodes, connectedEdges, event2);
-    if (copied && onRemove) {
-      onRemove(selectedNodes);
-    }
-    return copied;
-  }
-  async function handlePasteEvent(event2) {
-    if (isEventFromTextInput(event2)) {
-      return false;
-    }
-    const clipboardData = event2.clipboardData;
-    if (!clipboardData) return false;
-    const files = clipboardData.files;
-    if (files && files.length > 0) {
-      const imageFile = Array.from(files).find((f) => f.type.startsWith("image/"));
-      if (imageFile && options.onPasteImage) {
-        event2.preventDefault();
-        await options.onPasteImage(imageFile);
-        return true;
-      }
-    }
-    const rawJson = clipboardData.getData("application/json") || clipboardData.getData("text/plain");
-    if (rawJson) {
-      try {
-        const parsed = JSON.parse(rawJson);
-        let rawNodes;
-        let rawEdges;
-        if (Array.isArray(parsed) && parsed.every(isValidCanvasNode)) {
-          rawNodes = parsed;
-        } else if (typeof parsed === "object" && parsed !== null && Array.isArray(parsed.nodes) && parsed.nodes.every(isValidCanvasNode)) {
-          rawNodes = parsed.nodes;
-          rawEdges = parsed.edges;
-        }
-        if (rawNodes && rawNodes.length > 0) {
-          event2.preventDefault();
-          const idMap = /* @__PURE__ */ new Map();
-          const newNodes = rawNodes.map((node) => {
-            const newId = crypto.randomUUID();
-            idMap.set(node.id, newId);
-            return {
-              ...node,
-              id: newId,
-              selected: true,
-              position: { x: node.position.x + 40, y: node.position.y + 40 }
-            };
-          });
-          const newEdges = rawEdges?.map((edge) => ({
-            ...edge,
-            id: crypto.randomUUID(),
-            source: idMap.get(edge.source) ?? edge.source,
-            target: idMap.get(edge.target) ?? edge.target
-          }));
-          if (options.onPasteNodes) {
-            await options.onPasteNodes(newNodes, newEdges);
-            await tick();
-          }
-          return true;
-        }
-      } catch {
-      }
-    }
-    const text = clipboardData.getData("text/plain")?.trim();
-    if (text) {
-      if (isValidUrl(text) && options.onPasteUrl) {
-        event2.preventDefault();
-        options.onPasteUrl(text);
-        return true;
-      } else if (options.onPasteText) {
-        event2.preventDefault();
-        options.onPasteText(text);
-        return true;
-      }
-    }
-    return false;
-  }
-  return { copySelectedNodes, cutSelectedNodes, handlePasteEvent };
-}
-
-// src/canvas/createCanvasDocking.svelte.ts
-import * as $3 from "svelte/internal/client";
-function getNodeRect(node) {
-  const x = node.position?.x ?? 0;
-  const y = node.position?.y ?? 0;
-  const width = node.measured?.width ?? node.width ?? node.initialWidth ?? 0;
-  const height = node.measured?.height ?? node.height ?? node.initialHeight ?? 0;
-  return { x, y, width, height };
-}
-function getNodeCenter(node) {
-  const rect = getNodeRect(node);
-  return { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 };
-}
-function getDistanceSq(p1, p2) {
-  const dx = p1.x - p2.x;
-  const dy = p1.y - p2.y;
-  return dx * dx + dy * dy;
-}
-function getOverlapArea(rectA, rectB) {
-  const xOverlap = Math.max(0, Math.min(rectA.x + rectA.width, rectB.x + rectB.width) - Math.max(rectA.x, rectB.x));
-  const yOverlap = Math.max(0, Math.min(rectA.y + rectA.height, rectB.y + rectB.height) - Math.max(rectA.y, rectB.y));
-  return xOverlap * yOverlap;
-}
-function resolvePrimaryTarget(targets, draggedNode, strategy, customResolver, event2) {
-  if (targets.length === 0) return null;
-  if (targets.length === 1) return targets[0];
-  if (customResolver) {
-    const resolved = customResolver(targets, draggedNode, event2);
-    if (resolved !== void 0) return resolved;
-  }
-  if (strategy === "first") {
-    return targets[0];
-  }
-  if (strategy === "pointer" && event2) {
-    const clientX = "clientX" in event2 ? event2.clientX : event2.touches?.[0]?.clientX;
-    const clientY = "clientY" in event2 ? event2.clientY : event2.touches?.[0]?.clientY;
-    if (typeof clientX === "number" && typeof clientY === "number") {
-      const pointerInside = targets.filter((target) => {
-        const r = getNodeRect(target);
-        return r.width > 0 && r.height > 0 && clientX >= r.x && clientX <= r.x + r.width && clientY >= r.y && clientY <= r.y + r.height;
-      });
-      if (pointerInside.length === 1) return pointerInside[0];
-      if (pointerInside.length > 1) {
-        return pointerInside.reduce((best, cur) => {
-          const bestDist = getDistanceSq(getNodeCenter(best), { x: clientX, y: clientY });
-          const curDist = getDistanceSq(getNodeCenter(cur), { x: clientX, y: clientY });
-          return curDist < bestDist ? cur : best;
-        });
-      }
-    }
-  }
-  if (strategy === "max-overlap") {
-    const draggedRect = getNodeRect(draggedNode);
-    let maxArea = -1;
-    let bestTarget = targets[0];
-    for (const target of targets) {
-      const targetRect = getNodeRect(target);
-      const area = getOverlapArea(draggedRect, targetRect);
-      if (area > maxArea) {
-        maxArea = area;
-        bestTarget = target;
-      }
-    }
-    return bestTarget;
-  }
-  const draggedCenter = getNodeCenter(draggedNode);
-  const containing = targets.filter((target) => {
-    const r = getNodeRect(target);
-    if (r.width > 0 && r.height > 0) {
-      return draggedCenter.x >= r.x && draggedCenter.x <= r.x + r.width && draggedCenter.y >= r.y && draggedCenter.y <= r.y + r.height;
-    }
-    return false;
-  });
-  if (containing.length === 1) return containing[0];
-  if (containing.length > 1) {
-    return containing.reduce((best, cur) => {
-      const bestDist = getDistanceSq(getNodeCenter(best), draggedCenter);
-      const curDist = getDistanceSq(getNodeCenter(cur), draggedCenter);
-      return curDist < bestDist ? cur : best;
-    });
-  }
-  return targets.reduce((best, cur) => {
-    const bestDist = getDistanceSq(getNodeCenter(best), draggedCenter);
-    const curDist = getDistanceSq(getNodeCenter(cur), draggedCenter);
-    return curDist < bestDist ? cur : best;
-  });
-}
-function createCanvasDocking(options = {}) {
-  let draggedNode = $3.state(null);
-  let draggedInitialPosition = $3.state(null);
-  let connectingHandle = $3.state("");
-  let connectingNode = $3.state(null);
-  let currentHoverTargets = $3.state(/* @__PURE__ */ new Set());
-  const isDockTarget = options.isDockTarget ?? ((target) => target.type === "boardNode");
-  const dockStrategy = options.dockStrategy ?? "center-point";
-  const exclusiveHover = options.exclusiveHover ?? true;
-  function handleNodeDragStart(params) {
-    $3.set(draggedNode, params.targetNode);
-    $3.set(draggedInitialPosition, params.targetNode?.position ? { ...params.targetNode.position } : null);
-    $3.set(currentHoverTargets, /* @__PURE__ */ new Set());
-  }
-  function handleNodeDrag(params, getIntersectingNodes) {
-    $3.set(draggedNode, params.targetNode);
-    if (!$3.get(draggedNode)) return;
-    const intersecting = getIntersectingNodes($3.get(draggedNode));
-    const currentDockTargets = intersecting.filter(isDockTarget);
-    if (exclusiveHover) {
-      const primaryTarget = currentDockTargets.length > 0 ? resolvePrimaryTarget(currentDockTargets, $3.get(draggedNode), dockStrategy, options.resolvePrimaryDockTarget, params.event) : null;
-      const primaryTargetId = primaryTarget ? primaryTarget.id : null;
-      $3.get(currentHoverTargets).forEach((targetId) => {
-        if (targetId !== primaryTargetId) {
-          const leftNode = intersecting.find((n) => n.id === targetId) ?? { id: targetId };
-          options.onDockLeave?.(leftNode, $3.get(draggedNode));
-        }
-      });
-      if (primaryTarget && !$3.get(currentHoverTargets).has(primaryTarget.id)) {
-        options.onDockHover?.(primaryTarget, $3.get(draggedNode));
-      }
-      $3.set(currentHoverTargets, primaryTargetId ? /* @__PURE__ */ new Set([primaryTargetId]) : /* @__PURE__ */ new Set());
-    } else {
-      const newHoverSet = new Set(currentDockTargets.map((t) => t.id));
-      $3.get(currentHoverTargets).forEach((targetId) => {
-        if (!newHoverSet.has(targetId)) {
-          const leftNode = intersecting.find((n) => n.id === targetId) ?? { id: targetId };
-          options.onDockLeave?.(leftNode, $3.get(draggedNode));
-        }
-      });
-      currentDockTargets.forEach((target) => {
-        if (!$3.get(currentHoverTargets).has(target.id)) {
-          options.onDockHover?.(target, $3.get(draggedNode));
-        }
-      });
-      $3.set(currentHoverTargets, newHoverSet);
-    }
-  }
-  function handleNodeDragStop(params, getIntersectingNodes, updateNodePosition) {
-    $3.set(draggedNode, params.targetNode);
-    if ($3.get(draggedNode)) {
-      const intersecting = getIntersectingNodes($3.get(draggedNode));
-      const dockTargets = intersecting.filter(isDockTarget);
-      const dockTarget = dockTargets.length > 0 ? resolvePrimaryTarget(dockTargets, $3.get(draggedNode), dockStrategy, options.resolvePrimaryDockTarget, params.event) : null;
-      if (dockTarget) {
-        options.onDockDrop?.(dockTarget, $3.get(draggedNode));
-        if (options.restorePositionOnDock !== false && $3.get(draggedInitialPosition) && updateNodePosition) {
-          updateNodePosition($3.get(draggedNode).id, $3.get(draggedInitialPosition));
-        }
-      }
-    }
-    $3.set(draggedNode, null);
-    $3.set(draggedInitialPosition, null);
-    $3.set(currentHoverTargets, /* @__PURE__ */ new Set());
-    options.onSave?.();
-  }
-  function handleConnectStart(params, getNode) {
-    $3.set(connectingHandle, params.handleType ?? "");
-    $3.set(connectingNode, params.nodeId ? getNode(params.nodeId) ?? null : null);
-  }
-  function handleConnectEnd() {
-    $3.set(connectingHandle, "");
-    $3.set(connectingNode, null);
-  }
-  function reset2() {
-    $3.set(draggedNode, null);
-    $3.set(draggedInitialPosition, null);
-    $3.set(connectingHandle, "");
-    $3.set(connectingNode, null);
-    $3.set(currentHoverTargets, /* @__PURE__ */ new Set());
-  }
-  return {
-    get draggedNode() {
-      return $3.get(draggedNode);
-    },
-    get draggedInitialPosition() {
-      return $3.get(draggedInitialPosition);
-    },
-    get connectingHandle() {
-      return $3.get(connectingHandle);
-    },
-    get connectingNode() {
-      return $3.get(connectingNode);
-    },
-    get isDragging() {
-      return $3.get(draggedNode) !== null;
-    },
-    handleNodeDragStart,
-    handleNodeDrag,
-    handleNodeDragStop,
-    handleConnectStart,
-    handleConnectEnd,
-    reset: reset2
-  };
-}
-
-// src/canvas/createCanvasShortcuts.ts
-function createCanvasShortcuts(options) {
-  const target = options.targetElement ?? (typeof window !== "undefined" ? window : null);
-  if (!target) return () => {
-  };
-  function handleKeyDown(event2) {
-    const keyboardEvent = event2;
-    if (isEventFromTextInput(keyboardEvent)) {
-      return;
-    }
-    const isMod = keyboardEvent.metaKey || keyboardEvent.ctrlKey;
-    const isShift = keyboardEvent.shiftKey;
-    const key = keyboardEvent.key;
-    const selectedNodes = options.getSelectedNodes ? options.getSelectedNodes() : [];
-    if (key === "Backspace" || key === "Delete") {
-      if (options.onDelete && selectedNodes.length > 0) {
-        keyboardEvent.preventDefault();
-        options.onDelete(selectedNodes);
-      }
-      return;
-    }
-    if (isMod) {
-      const lowerKey = key.toLowerCase();
-      if (lowerKey === "c" && !isShift) {
-        if (options.onCopy) {
-          options.onCopy();
-        }
-      } else if (lowerKey === "x" && !isShift) {
-        if (options.onCut) {
-          options.onCut();
-        }
-      } else if (lowerKey === "d" && !isShift) {
-        if (options.onDuplicate && selectedNodes.length > 0) {
-          keyboardEvent.preventDefault();
-          options.onDuplicate(selectedNodes);
-        }
-      } else if (lowerKey === "a" && !isShift) {
-        if (options.onSelectAll) {
-          keyboardEvent.preventDefault();
-          options.onSelectAll();
-        }
-      } else if (lowerKey === "g") {
-        if (isShift) {
-          if (options.onUngroup && selectedNodes.length > 0) {
-            keyboardEvent.preventDefault();
-            options.onUngroup(selectedNodes);
-          }
-        } else {
-          if (options.onGroup && selectedNodes.length > 0) {
-            keyboardEvent.preventDefault();
-            options.onGroup(selectedNodes);
-          }
-        }
-      } else if (key === "=" || key === "+") {
-        if (options.onZoomIn) {
-          keyboardEvent.preventDefault();
-          options.onZoomIn();
-        }
-      } else if (key === "-") {
-        if (options.onZoomOut) {
-          keyboardEvent.preventDefault();
-          options.onZoomOut();
-        }
-      } else if (key === "0") {
-        if (options.onFitView) {
-          keyboardEvent.preventDefault();
-          options.onFitView();
-        }
-      } else if (lowerKey === "f") {
-        if (options.onSearch) {
-          keyboardEvent.preventDefault();
-          options.onSearch();
-        }
-      }
-    }
-  }
-  target.addEventListener("keydown", handleKeyDown);
-  return () => {
-    target.removeEventListener("keydown", handleKeyDown);
-  };
-}
-
-// src/canvas/createCanvasInteractions.svelte.ts
-import * as $4 from "svelte/internal/client";
-function createCanvasInteractions(options = {}) {
-  let isSpacebarPanning = $4.state(false);
-  let trackpadDetected = $4.state(false);
-  let toggledPanMode = false;
-  function handleKeyDown(event2) {
-    if (event2.key === " " || event2.code === "Space") {
-      if ($4.get(isSpacebarPanning) || isEventFromTextInput(event2)) return;
-      $4.set(isSpacebarPanning, true);
-      toggledPanMode = true;
-      options.onPanModeChange?.(true);
-      if (typeof document !== "undefined") {
-        document.body.classList.add("cursor-grab");
-      }
-    }
-  }
-  function handleKeyUp(event2) {
-    if (event2.key === " " || event2.code === "Space") {
-      if (!$4.get(isSpacebarPanning) && !toggledPanMode) return;
-      $4.set(isSpacebarPanning, false);
-      toggledPanMode = false;
-      options.onPanModeChange?.(false);
-      if (typeof document !== "undefined") {
-        document.body.classList.remove("cursor-grab");
-      }
-    }
-  }
-  function handleWheel(event2) {
-    if (event2.ctrlKey && !$4.get(trackpadDetected)) {
-      $4.set(trackpadDetected, true);
-      options.onTrackpadDetected?.();
-    }
-  }
-  function attachListeners(target) {
-    const el = target ?? options.targetElement ?? (typeof window !== "undefined" ? window : null);
-    if (!el) return () => {
-    };
-    el.addEventListener("keydown", handleKeyDown);
-    el.addEventListener("keyup", handleKeyUp);
-    el.addEventListener("wheel", handleWheel, { passive: true });
-    return () => {
-      el.removeEventListener("keydown", handleKeyDown);
-      el.removeEventListener("keyup", handleKeyUp);
-      el.removeEventListener("wheel", handleWheel);
-      if (typeof document !== "undefined") {
-        document.body.classList.remove("cursor-grab");
-      }
-    };
-  }
-  return {
-    get isSpacebarPanning() {
-      return $4.get(isSpacebarPanning);
-    },
-    get trackpadDetected() {
-      return $4.get(trackpadDetected);
-    },
-    attachListeners,
-    destroy: attachListeners()
-  };
-}
-var defaultSvelteFlowPreset = {
-  snapGrid: [25, 25],
-  panOnDrag: [0, 1, 2, 3, 4],
-  panOnScroll: false,
-  selectionOnDrag: false,
-  colorMode: "system",
-  multiSelectionKey: ["Shift", "Meta"]
-};
-var miroCompatiblePreset = {
-  ...defaultSvelteFlowPreset,
-  panOnDrag: [1, 2],
-  selectionOnDrag: true
-};
-function restorePanelPointerEvents(panelSelector = ".svelte-flow__panel") {
-  if (typeof document === "undefined") return;
-  const panels = document.querySelectorAll(panelSelector);
-  panels.forEach((panel) => {
-    panel.style.pointerEvents = "auto";
-  });
-}
-
-// src/canvas/createCanvasTrajectory.ts
-import { cubicOut as cubicOut2 } from "svelte/easing";
-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 = cubicOut2, 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 ?? defaultEasing,
-    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/createCanvasDisplacement.ts
-import dagre2 from "@dagrejs/dagre";
-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;
-    let newX = node.position.x;
-    let newY = node.position.y;
-    let moved = false;
-    if (direction === "right") {
-      if (node.position.x >= originNode.position.x + originWidth * 0.5) {
-        newX += deltaPrimary;
-        moved = true;
-      } else if (spreadSiblingLanes) {
-        const isVerticallyOverlapping = node.position.y + (node.height ?? 60) >= childBounds.y - gap && node.position.y <= childBounds.y + childBounds.height + gap;
-        if (isVerticallyOverlapping && Math.abs(node.position.x - originNode.position.x) <= siblingTolerance) {
-          const pushDirection = node.position.y >= originNode.position.y ? 1 : -1;
-          newY += pushDirection * (childBounds.height * 0.5 + gap);
-          moved = true;
-        }
-      }
-    } else if (direction === "left") {
-      if (node.position.x <= originNode.position.x) {
-        newX -= deltaPrimary;
-        moved = true;
-      }
-    } else if (direction === "down") {
-      if (node.position.y >= originNode.position.y + originHeight * 0.5) {
-        newY += deltaPrimary;
-        moved = true;
-      }
-    } else if (direction === "up") {
-      if (node.position.y <= originNode.position.y) {
-        newY -= deltaPrimary;
-        moved = true;
-      }
-    } else if (direction === "vertical") {
-      if (node.position.y < originNode.position.y) {
-        if (equalDelta > 0) {
-          newY -= equalDelta;
-          moved = true;
-        }
-      } else if (node.position.y >= originNode.position.y + originHeight * 0.5) {
-        if (equalDelta > 0) {
-          newY += equalDelta;
-          moved = true;
-        }
-      }
-    }
-    if (moved) {
-      displacedMap.set(node.id, { x: newX, y: newY });
-    }
-  }
-  return displacedMap;
-}
-function calculateReflowDisplacement(params) {
-  const {
-    existingNodes,
-    existingEdges,
-    originNode,
-    childNodes,
-    childEdges = [],
-    options = {}
-  } = params;
-  const {
-    direction = "LR",
-    ranksep = 80,
-    nodesep = 30,
-    defaultNodeWidth = 200,
-    defaultNodeHeight = 60
-  } = options;
-  const displacedMap = /* @__PURE__ */ new Map();
-  if (existingNodes.length === 0) return displacedMap;
-  const allNodes = [...existingNodes, ...childNodes];
-  const allEdges = [...existingEdges, ...childEdges];
-  const dagreGraph = new dagre2.graphlib.Graph();
-  dagreGraph.setDefaultEdgeLabel(() => ({}));
-  dagreGraph.setGraph({ rankdir: direction, ranksep, nodesep });
-  const allNodeIds = new Set(allNodes.map((n) => n.id));
-  allNodes.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 });
-  });
-  allEdges.forEach((edge) => {
-    if (allNodeIds.has(edge.source) && allNodeIds.has(edge.target)) {
-      dagreGraph.setEdge(edge.source, edge.target);
-    }
-  });
-  dagre2.layout(dagreGraph);
-  const dagreOrigin = dagreGraph.node(originNode.id);
-  if (!dagreOrigin) return displacedMap;
-  const originWidth = originNode.measured?.width ?? originNode.width ?? defaultNodeWidth;
-  const originHeight = originNode.measured?.height ?? originNode.height ?? defaultNodeHeight;
-  const anchorOffsetX = originNode.position.x - (dagreOrigin.x - originWidth / 2);
-  const anchorOffsetY = originNode.position.y - (dagreOrigin.y - originHeight / 2);
-  existingNodes.forEach((node) => {
-    if (node.id === originNode.id) return;
-    const dagreNode = dagreGraph.node(node.id);
-    if (!dagreNode) return;
-    const nodeWidth = node.measured?.width ?? node.width ?? defaultNodeWidth;
-    const nodeHeight = node.measured?.height ?? node.height ?? defaultNodeHeight;
-    const targetX = dagreNode.x - nodeWidth / 2 + anchorOffsetX;
-    const targetY = dagreNode.y - nodeHeight / 2 + anchorOffsetY;
-    if (Math.abs(targetX - node.position.x) > 0.5 || Math.abs(targetY - node.position.y) > 0.5) {
-      displacedMap.set(node.id, { x: targetX, y: targetY });
-    }
-  });
-  return displacedMap;
-}
-
-// src/canvas/createCanvasExplosion.svelte.ts
-import * as $5 from "svelte/internal/client";
-import { cubicOut as cubicOut3 } from "svelte/easing";
-function createCanvasExplosion(graph, options = {}) {
-  let explodedNodeIds = $5.state($5.proxy([]));
-  const snapshots = /* @__PURE__ */ new Map();
-  let activeAnimationCancel = null;
-  function isExploded(nodeId) {
-    return $5.get(explodedNodeIds).includes(nodeId);
-  }
-  function explodeNode(parentId, explodeOptions) {
-    if (isExploded(parentId)) {
-      return false;
-    }
-    const parentNode = graph.nodes.find((n) => n.id === parentId);
-    if (!parentNode) {
-      return false;
-    }
-    const {
-      childNodes,
-      childEdges = [],
-      connectParentToChildren = "all",
-      displacementStrategy = "directional",
-      directionalOptions = {},
-      reflowOptions = {},
-      trajectory,
-      duration = 500,
-      staggerDelay = 20,
-      easing = cubicOut3,
-      onComplete
-    } = explodeOptions;
-    if (childNodes.length === 0) {
-      return false;
-    }
-    let displacementMap;
-    if (displacementStrategy === "dagre") {
-      displacementMap = calculateReflowDisplacement({
-        existingNodes: graph.nodes,
-        existingEdges: graph.edges,
-        originNode: parentNode,
-        childNodes,
-        childEdges,
-        getNodesBounds: options.getNodesBounds,
-        options: { ...reflowOptions, direction: reflowOptions.direction ?? "LR" }
-      });
-    } else if (displacementStrategy === "none") {
-      displacementMap = /* @__PURE__ */ new Map();
-    } else {
-      displacementMap = calculateDirectionalDisplacement({
-        existingNodes: graph.nodes,
-        originNode: parentNode,
-        childNodes,
-        getNodesBounds: options.getNodesBounds,
-        options: directionalOptions
-      });
-    }
-    const displacedNodesSnapshot = Array.from(displacementMap.entries()).map(([id]) => {
-      const node = graph.nodes.find((n) => n.id === id);
-      return {
-        id,
-        originalPosition: { ...node?.position ?? { x: 0, y: 0 } }
-      };
-    });
-    const edgesToAdd = [...childEdges];
-    const defaultCreateEdge = (sourceId, targetId) => {
-      if (graph.createEdge) {
-        return graph.createEdge(sourceId, targetId);
-      }
-      return {
-        id: crypto.randomUUID(),
-        type: "default",
-        source: sourceId,
-        target: targetId
-      };
-    };
-    if (connectParentToChildren === "all" || connectParentToChildren === true) {
-      childNodes.forEach((child2) => {
-        const exists = edgesToAdd.some((e) => e.source === parentId && e.target === child2.id);
-        if (!exists) {
-          edgesToAdd.push(defaultCreateEdge(parentId, child2.id));
-        }
-      });
-    } else if (connectParentToChildren === "first" && childNodes.length > 0) {
-      const firstChild = childNodes[0];
-      const exists = edgesToAdd.some((e) => e.source === parentId && e.target === firstChild.id);
-      if (!exists) {
-        edgesToAdd.push(defaultCreateEdge(parentId, firstChild.id));
-      }
-    }
-    const snapshot = {
-      parentId,
-      childNodeIds: childNodes.map((n) => n.id),
-      childEdgeIds: edgesToAdd.map((e) => e.id),
-      displacedNodes: displacedNodesSnapshot,
-      timestamp: Date.now()
-    };
-    snapshots.set(parentId, snapshot);
-    const originPos = { ...parentNode.position };
-    const targetPositions = childNodes.map((child2) => ({ ...child2.position }));
-    childNodes.forEach((child2) => {
-      child2.position = { ...originPos };
-      if (!child2.data) child2.data = {};
-      child2.data.scale = 0;
-      child2.data.opacity = 0;
-      const currentStyle = (child2.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim();
-      child2.style = `${currentStyle ? currentStyle + "; " : ""}opacity: 0;`;
-    });
-    edgesToAdd.forEach((edge) => {
-      const currentStyle = (edge.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim();
-      edge.style = `${currentStyle ? currentStyle + "; " : ""}opacity: 0;`;
-    });
-    graph.addNodeOrNodes(childNodes, void 0, false);
-    if (edgesToAdd.length > 0) {
-      graph.addEdges(edgesToAdd, false);
-    }
-    const chosenTrajectory = trajectory ?? createFanOutTrajectory({ curvature: 0.35 });
-    const transitions = [];
-    const effectiveStagger = duration === 0 ? 0 : staggerDelay;
-    childNodes.forEach((child2, i) => {
-      transitions.push({
-        node: child2,
-        from: originPos,
-        to: targetPositions[i],
-        trajectory: chosenTrajectory,
-        delay: i * effectiveStagger,
-        duration,
-        easing,
-        index: i,
-        total: childNodes.length
-      });
-    });
-    displacementMap.forEach((targetPos, nodeId) => {
-      const node = graph.nodes.find((n) => n.id === nodeId);
-      if (node) {
-        transitions.push({
-          node,
-          from: { ...node.position },
-          to: targetPos,
-          trajectory: linearPositionTrajectory,
-          duration,
-          easing
-        });
-      }
-    });
-    if (activeAnimationCancel) {
-      activeAnimationCancel();
-    }
-    activeAnimationCancel = runMultiNodeTransition(transitions, {
-      defaultDuration: duration,
-      defaultEasing: easing,
-      onUpdate: () => {
-        if (edgesToAdd.length > 0) {
-          const childIdSet = new Set(childNodes.map((c) => c.id));
-          const childEdgesInGraph = graph.edges.filter((e) => childIdSet.has(e.target));
-          if (childEdgesInGraph.length > 0) {
-            childEdgesInGraph.forEach((edge) => {
-              const child2 = childNodes.find((c) => c.id === edge.target);
-              const childOpacity = child2?.data?.opacity ?? 1;
-              const currentStyle = (edge.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim();
-              edge.style = `${currentStyle ? currentStyle + "; " : ""}opacity: ${childOpacity};`;
-            });
-            graph.setEdges([...graph.edges]);
-          }
-        }
-        transitions.forEach((t) => {
-          const graphNode = graph.nodes.find((n) => n.id === t.node.id);
-          if (graphNode && graphNode !== t.node) {
-            graphNode.position = { ...t.node.position };
-            graphNode.style = t.node.style;
-            if (t.node.data) {
-              graphNode.data = { ...graphNode.data, ...t.node.data };
-            }
-          }
-        });
-        graph.setNodes([...graph.nodes]);
-      },
-      onComplete: () => {
-        childNodes.forEach((child2, i) => {
-          const node = graph.nodes.find((n) => n.id === child2.id);
-          if (node) {
-            node.position = { ...targetPositions[i] };
-            node.style = (node.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim() || void 0;
-            if (node.data) {
-              node.data.opacity = 1;
-            }
-          }
-        });
-        displacementMap.forEach((targetPos, nodeId) => {
-          const graphNode = graph.nodes.find((n) => n.id === nodeId);
-          if (graphNode) {
-            graphNode.position = { ...targetPos };
-          }
-        });
-        edgesToAdd.forEach((edge) => {
-          const graphEdge = graph.edges.find((e) => e.id === edge.id);
-          if (graphEdge) {
-            graphEdge.style = (graphEdge.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim() || void 0;
-          }
-        });
-        graph.setNodes([...graph.nodes]);
-        graph.setEdges([...graph.edges]);
-        $5.set(explodedNodeIds, [...$5.get(explodedNodeIds), parentId], true);
-        activeAnimationCancel = null;
-        options.onSave?.();
-        graph.onSave?.();
-        onComplete?.();
-      }
-    });
-    return true;
-  }
-  function collapseNode(parentId, collapseOptions = {}) {
-    const snapshot = snapshots.get(parentId);
-    if (!snapshot) {
-      return false;
-    }
-    const parentNode = graph.nodes.find((n) => n.id === parentId);
-    if (!parentNode) {
-      return false;
-    }
-    const {
-      duration = 400,
-      staggerDelay = 15,
-      easing = cubicOut3,
-      trajectory,
-      onComplete
-    } = collapseOptions;
-    const childIdSet = new Set(snapshot.childNodeIds);
-    const activeChildNodes = graph.nodes.filter((n) => childIdSet.has(n.id));
-    const originPos = { ...parentNode.position };
-    const reverseTrajectory = trajectory ?? createFanOutTrajectory({
-      curvature: 0.2,
-      startScale: 1,
-      endScale: 0,
-      startOpacity: 1,
-      endOpacity: 0
-    });
-    const transitions = [];
-    const effectiveStagger = duration === 0 ? 0 : staggerDelay;
-    activeChildNodes.forEach((child2, i) => {
-      transitions.push({
-        node: child2,
-        from: { ...child2.position },
-        to: originPos,
-        trajectory: reverseTrajectory,
-        delay: (activeChildNodes.length - 1 - i) * effectiveStagger,
-        duration,
-        easing,
-        index: i,
-        total: activeChildNodes.length
-      });
-    });
-    snapshot.displacedNodes.forEach(({ id, originalPosition }) => {
-      const node = graph.nodes.find((n) => n.id === id);
-      if (node) {
-        transitions.push({
-          node,
-          from: { ...node.position },
-          to: originalPosition,
-          trajectory: linearPositionTrajectory,
-          duration,
-          easing
-        });
-      }
-    });
-    if (activeAnimationCancel) {
-      activeAnimationCancel();
-    }
-    activeAnimationCancel = runMultiNodeTransition(transitions, {
-      defaultDuration: duration,
-      defaultEasing: easing,
-      onUpdate: () => {
-        const edgeIdSet = new Set(snapshot.childEdgeIds);
-        const childEdgesInGraph = graph.edges.filter((e) => edgeIdSet.has(e.id));
-        if (childEdgesInGraph.length > 0) {
-          childEdgesInGraph.forEach((edge) => {
-            const child2 = activeChildNodes.find((c) => c.id === edge.target);
-            const childOpacity = child2?.data?.opacity ?? 0;
-            const currentStyle = (edge.style || "").replace(/opacity:\s*[^;]+;?/g, "").trim();
-            edge.style = `${currentStyle ? currentStyle + "; " : ""}opacity: ${childOpacity};`;
-          });
-          graph.setEdges([...graph.edges]);
-        }
-        transitions.forEach((t) => {
-          const graphNode = graph.nodes.find((n) => n.id === t.node.id);
-          if (graphNode && graphNode !== t.node) {
-            graphNode.position = { ...t.node.position };
-            graphNode.style = t.node.style;
-            if (t.node.data) {
-              graphNode.data = { ...graphNode.data, ...t.node.data };
-            }
-          }
-        });
-        graph.setNodes([...graph.nodes]);
-      },
-      onComplete: () => {
-        graph.removeNodes(activeChildNodes, false);
-        const edgeIdSet = new Set(snapshot.childEdgeIds);
-        const edgesToRemove = graph.edges.filter((e) => edgeIdSet.has(e.id));
-        if (edgesToRemove.length > 0) {
-          graph.removeEdges(edgesToRemove, false);
-        }
-        snapshot.displacedNodes.forEach(({ id, originalPosition }) => {
-          const graphNode = graph.nodes.find((n) => n.id === id);
-          if (graphNode) {
-            graphNode.position = { ...originalPosition };
-          }
-        });
-        graph.setNodes([...graph.nodes]);
-        snapshots.delete(parentId);
-        $5.set(explodedNodeIds, $5.get(explodedNodeIds).filter((id) => id !== parentId), true);
-        activeAnimationCancel = null;
-        options.onSave?.();
-        graph.onSave?.();
-        onComplete?.();
-      }
-    });
-    return true;
-  }
-  function toggleExplode(parentId, explodeOptions, collapseOptions) {
-    if (isExploded(parentId)) {
-      return collapseNode(parentId, collapseOptions);
-    }
-    return explodeNode(parentId, explodeOptions);
-  }
-  function getSnapshot(parentId) {
-    return snapshots.get(parentId);
-  }
-  return {
-    get explodedNodeIds() {
-      return $5.get(explodedNodeIds);
-    },
-    isExploded,
-    explodeNode,
-    collapseNode,
-    toggleExplode,
-    getSnapshot
-  };
-}
-
-// src/canvas/createCanvasNodeSync.svelte.ts
-import * as $6 from "svelte/internal/client";
-import { untrack } from "svelte";
-function preserveNodeMeasurements(newNodes, existingNodes) {
-  const map = existingNodes instanceof Map ? existingNodes : new Map(existingNodes.map((n) => [n.id, n]));
-  for (const node of newNodes) {
-    const prev = map.get(node.id);
-    if (prev && prev.measured) {
-      node.measured = { ...prev.measured };
-    }
-  }
-  return newNodes;
-}
-function normalizeNodeHandles(node, handles = []) {
-  node.handles = handles;
-  return node;
-}
-function createCanvasNodeSync(options) {
-  let nodes = $6.state($6.proxy([]));
-  let edges = $6.state($6.proxy([]));
-  $6.user_pre_effect(() => {
-    const rawItems = options.items();
-    const existingNodesMap = untrack(() => new Map($6.get(nodes).map((n) => [n.id, n])));
-    const newNodes = rawItems.map((item, index) => {
-      const existing = existingNodesMap.get(item?.id);
-      const node = options.toNode(item, index, { existingNode: existing, prevNodesMap: existingNodesMap });
-      if (existing && existing.measured && !node.measured) {
-        node.measured = { ...existing.measured };
-      }
-      if (options.defaultHandles && !node.handles) {
-        const handles = options.defaultHandles(node);
-        if (handles) {
-          node.handles = handles;
-        }
-      }
-      return node;
-    });
-    const newEdges = options.toEdges ? options.toEdges(rawItems, newNodes) : [];
-    $6.set(nodes, newNodes, true);
-    $6.set(edges, newEdges, true);
-  });
-  return {
-    get nodes() {
-      return $6.get(nodes);
-    },
-    set nodes(value) {
-      $6.set(nodes, value, true);
-    },
-    get edges() {
-      return $6.get(edges);
-    },
-    set edges(value) {
-      $6.set(edges, value, true);
-    },
-    updateNodeMeasurements(id, width, height) {
-      const node = $6.get(nodes).find((n) => n.id === id);
-      if (node) {
-        node.measured = { width, height };
-      }
-    }
-  };
-}
-
-// src/canvas/createCanvasMultiDrag.svelte.ts
-import * as $7 from "svelte/internal/client";
-function createCanvasMultiDrag(options = {}) {
-  const stepX = options.stackOffsetStepX ?? 4;
-  const stepY = options.stackOffsetStepY ?? 4;
-  const angles = options.rotationAngles ?? [-2, 2.5, -3, 3];
-  const baseZIndex = options.baseZIndex ?? 50;
-  let dragState = $7.state(null);
-  function startMultiDrag(leadNodeId, selectedNodeIds, nodes) {
-    const selectedSet = selectedNodeIds instanceof Set ? selectedNodeIds : new Set(selectedNodeIds);
-    if (selectedSet.size <= 1 || !selectedSet.has(leadNodeId)) {
-      $7.set(dragState, null);
-      return null;
-    }
-    const nodeMap = nodes instanceof Map ? nodes : new Map(nodes.map((n) => [n.id, n]));
-    const leadNode = nodeMap.get(leadNodeId);
-    if (!leadNode) {
-      $7.set(dragState, null);
-      return null;
-    }
-    const leadPos = leadNode.position ?? { x: 0, y: 0 };
-    const offsets = {};
-    let followerIndex = 0;
-    for (const id of selectedSet) {
-      if (id === leadNodeId) continue;
-      const follower = nodeMap.get(id);
-      const fPos = follower?.position ?? { x: 0, y: 0 };
-      const angle = angles[followerIndex % angles.length];
-      offsets[id] = {
-        deltaX: fPos.x - leadPos.x,
-        deltaY: fPos.y - leadPos.y,
-        originalPosition: { ...fPos },
-        stackOffsetX: (followerIndex + 1) * stepX,
-        stackOffsetY: (followerIndex + 1) * stepY,
-        rotationDeg: angle
-      };
-      followerIndex++;
-    }
-    const state9 = { leadId: leadNodeId, offsets, count: selectedSet.size };
-    $7.set(dragState, state9, true);
-    return state9;
-  }
-  function getFollowerTransform(nodeId) {
-    if (!$7.get(dragState) || !(nodeId in $7.get(dragState).offsets)) {
-      return {
-        isFollower: false,
-        stackOffsetX: 0,
-        stackOffsetY: 0,
-        rotationDeg: 0,
-        zIndex: 0
-      };
-    }
-    const offset = $7.get(dragState).offsets[nodeId];
-    const followerKeys = Object.keys($7.get(dragState).offsets);
-    const index = followerKeys.indexOf(nodeId);
-    return {
-      isFollower: true,
-      stackOffsetX: offset.stackOffsetX,
-      stackOffsetY: offset.stackOffsetY,
-      rotationDeg: offset.rotationDeg,
-      zIndex: baseZIndex - (index + 1)
-    };
-  }
-  function cancelMultiDrag(applyRestore) {
-    if (!$7.get(dragState)) return [];
-    const restores = Object.entries($7.get(dragState).offsets).map(([id, offset]) => ({ id, originalPosition: { ...offset.originalPosition } }));
-    if (applyRestore) {
-      applyRestore(restores);
-    }
-    $7.set(dragState, null);
-    return restores;
-  }
-  function commitMultiDrag() {
-    $7.set(dragState, null);
-  }
-  return {
-    get dragState() {
-      return $7.get(dragState);
-    },
-    get isMultiDrag() {
-      return Boolean($7.get(dragState) && $7.get(dragState).count > 1);
-    },
-    get count() {
-      return $7.get(dragState) ? $7.get(dragState).count : 0;
-    },
-    get leadId() {
-      return $7.get(dragState)?.leadId ?? null;
-    },
-    startMultiDrag,
-    getFollowerTransform,
-    cancelMultiDrag,
-    commitMultiDrag
-  };
-}
-
-// src/canvas/createCanvasSelection.svelte.ts
-import * as $8 from "svelte/internal/client";
-function getMarqueeSelectionPreset(options = {}) {
-  const isSpacebarPanning = options.isSpacebarPanning ?? false;
-  return {
-    snapGrid: [25, 25],
-    panOnDrag: isSpacebarPanning ? [0, 1, 2] : [1, 2],
-    panOnScroll: false,
-    selectionOnDrag: !isSpacebarPanning,
-    colorMode: "system",
-    multiSelectionKey: options.multiSelectionKey ?? ["Shift", "Meta"],
-    selectionMode: options.selectionMode ?? "partial"
-  };
-}
-function handleDeselectOnEscape(event2, onDeselect) {
-  if (event2.key === "Escape" || event2.code === "Escape") {
-    onDeselect();
-    return true;
-  }
-  return false;
-}
-
-// src/canvas/FloatingHorizontalScrollbar.svelte
-import "svelte/internal/disclose-version";
-import * as $9 from "svelte/internal/client";
-import { onMount } from "svelte";
-var root = $9.from_html(`<div class="fixed bottom-0 z-50 overflow-x-auto overflow-y-hidden border-t border-border/40 bg-background/80 shadow-md backdrop-blur-sm transition-opacity duration-150" role="scrollbar" aria-orientation="horizontal"><div></div></div>`);
-function FloatingHorizontalScrollbar($$anchor, $$props) {
-  $9.push($$props, true);
-  let targetElement = $9.prop($$props, "targetElement", 7, null), totalWidth = $9.prop($$props, "totalWidth", 3, 1e3), minHeightAboveFold = $9.prop($$props, "minHeightAboveFold", 3, 80);
-  let scrollbarRef = $9.state(null);
-  let isVisible = $9.state(false);
-  let barLeft = $9.state(0);
-  let barWidth = $9.state(0);
-  let isSyncing = false;
-  function updateMetrics() {
-    if (!targetElement()) {
-      $9.set(isVisible, false);
-      return;
-    }
-    const rect = targetElement().getBoundingClientRect();
-    const hasHorizontalOverflow = targetElement().scrollWidth > targetElement().clientWidth;
-    const isTopInView = rect.top < window.innerHeight;
-    const isBottomBelowViewport = rect.bottom > window.innerHeight;
-    const isBottomAboveTop = rect.bottom > minHeightAboveFold();
-    const shouldShow = hasHorizontalOverflow && isTopInView && isBottomBelowViewport && isBottomAboveTop;
-    $9.set(isVisible, shouldShow, true);
-    if (shouldShow) {
-      const left = Math.max(0, rect.left);
-      const right = Math.min(window.innerWidth, rect.right);
-      $9.set(barLeft, left, true);
-      $9.set(barWidth, Math.max(0, right - left), true);
-      if ($9.get(scrollbarRef) && Math.abs($9.get(scrollbarRef).scrollLeft - targetElement().scrollLeft) > 1) {
-        isSyncing = true;
-        $9.get(scrollbarRef).scrollLeft = targetElement().scrollLeft;
-        requestAnimationFrame(() => {
-          isSyncing = false;
-        });
-      }
-    }
-  }
-  function handleFloatingScroll() {
-    if (!$9.get(scrollbarRef) || !targetElement() || isSyncing) return;
-    isSyncing = true;
-    targetElement().scrollLeft = $9.get(scrollbarRef).scrollLeft;
-    requestAnimationFrame(() => {
-      isSyncing = false;
-    });
-  }
-  onMount(() => {
-    updateMetrics();
-    const onScrollOrResize = () => {
-      updateMetrics();
-    };
-    window.addEventListener("scroll", onScrollOrResize, { passive: true });
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    const target = targetElement();
-    if (target) {
-      target.addEventListener("scroll", onScrollOrResize, { passive: true });
-    }
-    return () => {
-      window.removeEventListener("scroll", onScrollOrResize);
-      window.removeEventListener("resize", onScrollOrResize);
-      if (target) {
-        target.removeEventListener("scroll", onScrollOrResize);
-      }
-    };
-  });
-  $9.user_effect(() => {
-    if (targetElement()) {
-      updateMetrics();
-    }
-  });
-  var fragment = $9.comment();
-  var node = $9.first_child(fragment);
-  {
-    var consequent = ($$anchor2) => {
-      var div = root();
-      $9.set_attribute(div, "aria-valuemin", 0);
-      var div_1 = $9.only_child(div);
-      $9.bind_this(div, ($$value) => $9.set(scrollbarRef, $$value), () => $9.get(scrollbarRef));
-      $9.template_effect(
-        ($0) => {
-          $9.set_style(div, `left: ${$9.get(barLeft) ?? ""}px; width: ${$9.get(barWidth) ?? ""}px; height: 14px;`);
-          $9.set_attribute(div, "aria-controls", targetElement()?.id);
-          $9.set_attribute(div, "aria-valuenow", targetElement()?.scrollLeft ?? 0);
-          $9.set_attribute(div, "aria-valuemax", (targetElement()?.scrollWidth ?? totalWidth()) - (targetElement()?.clientWidth ?? 0));
-          $9.set_style(div_1, `width: ${$0 ?? ""}px; height: 1px;`);
-        },
-        [
-          () => Math.max(totalWidth(), targetElement()?.scrollWidth ?? 0)
-        ]
-      );
-      $9.event("scroll", div, handleFloatingScroll);
-      $9.append($$anchor2, div);
-    };
-    $9.if(node, ($$render) => {
-      if ($9.get(isVisible)) $$render(consequent);
-    });
-  }
-  $9.append($$anchor, fragment);
-  $9.pop();
-}
-
-// src/canvas/AgentPresenceLayer.svelte
-import "svelte/internal/disclose-version";
-import * as $10 from "svelte/internal/client";
-var root2 = $10.from_html(`<span class="opacity-80 text-[10px]"> </span>`);
-var root_1 = $10.from_html(`<div class="mt-1 max-w-xs rounded-lg bg-white/95 backdrop-blur-sm border border-slate-200 px-2.5 py-1.5 text-xs text-slate-800 shadow-lg dark:bg-slate-900/95 dark:border-slate-700 dark:text-slate-100"> </div>`);
-var root_2 = $10.from_html(`<div class="absolute transition-transform duration-75 ease-out"><svg class="h-5 w-5 drop-shadow-md" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z" stroke="white" stroke-width="1"></path></svg> <div class="mt-1 flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium text-white shadow-md whitespace-nowrap"><span> </span> <!></div> <!></div>`);
-var root_3 = $10.from_html(`<div aria-hidden="true"></div>`);
-function AgentPresenceLayer($$anchor, $$props) {
-  $10.push($$props, true);
-  let presences = $10.prop($$props, "presences", 19, () => []), className = $10.prop($$props, "class", 3, "");
-  var fragment = $10.comment();
-  var node = $10.first_child(fragment);
-  {
-    var consequent_3 = ($$anchor2) => {
-      var div = root_3();
-      $10.each(div, 21, presences, (agent) => agent.agentId, ($$anchor3, agent) => {
-        var fragment_1 = $10.comment();
-        var node_1 = $10.first_child(fragment_1);
-        {
-          var consequent_2 = ($$anchor4) => {
-            var div_1 = root_2();
-            var svg = $10.child(div_1);
-            var path = $10.only_child(svg);
-            var div_2 = $10.sibling(svg, 2);
-            var span = $10.child(div_2);
-            var text = $10.only_child(span, true);
-            var node_2 = $10.sibling(span, 2);
-            {
-              var consequent = ($$anchor5) => {
-                var span_1 = root2();
-                var text_1 = $10.only_child(span_1);
-                $10.template_effect(() => $10.set_text(text_1, `(${$10.get(agent).statusMessage ?? ""})`));
-                $10.append($$anchor5, span_1);
-              };
-              $10.if(node_2, ($$render) => {
-                if ($10.get(agent).statusMessage) $$render(consequent);
-              });
-            }
-            $10.reset(div_2);
-            var node_3 = $10.sibling(div_2, 2);
-            {
-              var consequent_1 = ($$anchor5) => {
-                var div_3 = root_1();
-                var text_2 = $10.only_child(div_3, true);
-                $10.template_effect(() => $10.set_text(text_2, $10.get(agent).note));
-                $10.append($$anchor5, div_3);
-              };
-              $10.if(node_3, ($$render) => {
-                if ($10.get(agent).note) $$render(consequent_1);
-              });
-            }
-            $10.reset(div_1);
-            $10.template_effect(() => {
-              $10.set_style(div_1, `transform: translate3d(${$10.get(agent).cursorPosition.x ?? ""}px, ${$10.get(agent).cursorPosition.y ?? ""}px, 0);`);
-              $10.set_attribute(path, "fill", $10.get(agent).color || "#3b82f6");
-              $10.set_style(div_2, `background-color: ${($10.get(agent).color || "#3b82f6") ?? ""};`);
-              $10.set_text(text, $10.get(agent).name);
-            });
-            $10.append($$anchor4, div_1);
-          };
-          $10.if(node_1, ($$render) => {
-            if ($10.get(agent).cursorPosition) $$render(consequent_2);
-          });
-        }
-        $10.append($$anchor3, fragment_1);
-      });
-      $10.reset(div);
-      $10.template_effect(() => $10.set_class(div, 1, `pixerate-presence agent-presence pixerate-agent-presence-layer pointer-events-none absolute inset-0 z-50 overflow-hidden ${className() ?? ""}`));
-      $10.append($$anchor2, div);
-    };
-    $10.if(node, ($$render) => {
-      if (presences().length > 0) $$render(consequent_3);
-    });
-  }
-  $10.append($$anchor, fragment);
-  $10.pop();
-}
-
-// src/canvas/createStreamingCanvas.svelte.ts
-import * as $11 from "svelte/internal/client";
-import { StreamingLayoutManager } from "@pixerate/editor/canvas";
-function createStreamingCanvas(options = {}) {
-  let positions = $11.state($11.proxy(/* @__PURE__ */ new Map()));
-  const manager = new StreamingLayoutManager({
-    throttleMs: options.throttleMs,
-    glideDurationMs: options.glideDurationMs,
-    connectedOnly: options.connectedOnly,
-    clock: options.clock,
-    layoutOptions: options.layoutOptions,
-    onLayoutUpdated: (updated) => {
-      $11.set(positions, updated, true);
-      options.onPositionsChange?.(updated);
-    }
-  });
-  return {
-    get positions() {
-      return $11.get(positions);
-    },
-    pushStreamUpdate(nodes, edges, currentPositions) {
-      manager.pushStreamUpdate(nodes, edges, currentPositions);
-    },
-    flush(nodes, edges, currentPositions) {
-      manager.flush(nodes, edges, currentPositions);
-    },
-    destroy() {
-      manager.destroy();
-    }
-  };
-}
-
-// src/canvas/index.ts
-import {
-  realClock,
-  ManualClock,
-  layoutBounds,
-  canvasHeight,
-  estimateCanvasHeight,
-  blendLayout,
-  connectedOnly
-} from "@pixerate/editor/canvas";
-export {
-  AgentPresenceLayer,
-  FloatingHorizontalScrollbar,
-  ManualClock,
-  blendLayout,
-  calculateDirectionalDisplacement,
-  calculateGraphDifferences,
-  calculateReflowDisplacement,
-  canvasHeight,
-  centerNodes,
-  computeNodesBoundingBox,
-  connectedOnly,
-  createBezierTrajectory,
-  createCanvasClipboard,
-  createCanvasDocking,
-  createCanvasExplosion,
-  createCanvasGraph,
-  createCanvasInteractions,
-  createCanvasMultiDrag,
-  createCanvasNodeSync,
-  createCanvasShortcuts,
-  createFanOutTrajectory,
-  createStreamingCanvas,
-  defaultSvelteFlowPreset,
-  ensureLayout,
-  estimateCanvasHeight,
-  estimateNodeSize,
-  flowSide,
-  getCenteredNodePosition,
-  getLayoutedNodes,
-  getMarqueeSelectionPreset,
-  handleDeselectOnEscape,
-  isEventFromTextInput,
-  isValidCanvasNode,
-  isValidUrl,
-  layoutBounds,
-  linearPositionTrajectory,
-  linearTrajectory,
-  miroCompatiblePreset,
-  normalizeNodeHandles,
-  placeBeside,
-  preserveNodeMeasurements,
-  realClock,
-  replaceNodeInGraph,
-  restorePanelPointerEvents,
-  runMultiNodeTransition
-};
-//# sourceMappingURL=index.js.map
+// Types
+export * from './types.js';
+// Graph management rune & pure functions
+export { createCanvasGraph, calculateGraphDifferences, replaceNodeInGraph } from './createCanvasGraph.svelte.js';
+// Layout calculations
+export { getLayoutedNodes, getCenteredNodePosition, centerNodes, ensureLayout, placeBeside, estimateNodeSize, flowSide } from './createCanvasLayout.js';
+// Clipboard rune & helpers
+export { createCanvasClipboard, isEventFromTextInput, isValidCanvasNode, isValidUrl } from './createCanvasClipboard.svelte.js';
+// Docking & drag interactions rune
+export { createCanvasDocking } from './createCanvasDocking.svelte.js';
+// Shortcuts manager
+export { createCanvasShortcuts } from './createCanvasShortcuts.js';
+// Interaction modes & presets
+export { createCanvasInteractions, defaultSvelteFlowPreset, miroCompatiblePreset, restorePanelPointerEvents } from './createCanvasInteractions.svelte.js';
+// Trajectory calculation & multi-node transitions
+export { linearTrajectory, linearPositionTrajectory, createFanOutTrajectory, createBezierTrajectory, runMultiNodeTransition } from './createCanvasTrajectory.js';
+// Spatial layout displacement
+export { computeNodesBoundingBox, calculateDirectionalDisplacement, calculateReflowDisplacement } from './createCanvasDisplacement.js';
+// Node explosion & collapse rune
+export { createCanvasExplosion } from './createCanvasExplosion.svelte.js';
+// Node synchronization & handle normalization
+export { createCanvasNodeSync, preserveNodeMeasurements, normalizeNodeHandles } from './createCanvasNodeSync.svelte.js';
+// Multi-node drag coordination rune
+export { createCanvasMultiDrag } from './createCanvasMultiDrag.svelte.js';
+// Drag selection helpers & presets
+export { getMarqueeSelectionPreset, handleDeselectOnEscape } from './createCanvasSelection.svelte.js';
+// Viewport floating scrollbar component
+export { default as FloatingHorizontalScrollbar } from './FloatingHorizontalScrollbar.svelte';
+// Agent presence visual layer
+export { default as AgentPresenceLayer } from './AgentPresenceLayer.svelte';
+// Streaming canvas rune
+export { createStreamingCanvas } from './createStreamingCanvas.svelte.js';
+// Clock and view helpers from core
+export { realClock, ManualClock, layoutBounds, canvasHeight, estimateCanvasHeight, blendLayout, connectedOnly } from '@pixerate/editor/canvas';