@pixerate/editor-svelte 0.15.3 → 0.16.1

package/dist/canvas/createCanvasGraph.svelte.d.ts

@@ -0,0 +1,62 @@
+import { type XYPosition } from '@xyflow/svelte';
+import type { CanvasNode, CanvasEdge, GraphDifferences } from './types.js';
+/**
+ * Pure calculation of graph differences between a current state and a baseline state.
+ */
+export declare function calculateGraphDifferences<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(currentState: {
+    nodes?: TNode[];
+    edges?: TEdge[];
+}, baselineState: {
+    nodes?: TNode[];
+    edges?: TEdge[];
+}): GraphDifferences<TNode, TEdge>;
+/**
+ * Pure function to replace a node in a graph, optionally preserving its connected edges.
+ */
+export declare function replaceNodeInGraph<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges: TEdge[], oldNode: TNode, newNode: TNode, keepEdges?: boolean): {
+    nodes: TNode[];
+    edges: TEdge[];
+};
+export interface CreateCanvasGraphOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
+    initialNodes?: TNode[];
+    initialEdges?: TEdge[];
+    onNodesChange?: (nodes: TNode[]) => void;
+    onEdgesChange?: (edges: TEdge[]) => void;
+    onSave?: () => void;
+    createEdge?: (sourceId: string, targetId: string, options?: {
+        label?: string;
+        animated?: boolean;
+        data?: any;
+    }) => TEdge;
+}
+/**
+ * Headless Svelte 5 rune managing canvas graph state and operations.
+ */
+export declare function createCanvasGraph<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(options?: CreateCanvasGraphOptions<TNode, TEdge>): {
+    nodes: TNode[];
+    edges: TEdge[];
+    setNodes: (newNodes: TNode[], triggerCallback?: boolean) => void;
+    setEdges: (newEdges: TEdge[], triggerCallback?: boolean) => void;
+    addNodeOrNodes: (nodeOrNodesToAdd: TNode | TNode[], animateFromPosition?: XYPosition, save?: boolean) => void;
+    addEdge: (edgeToAdd: TEdge, save?: boolean) => void;
+    addEdges: (edgesToAdd: TEdge[], save?: boolean) => void;
+    removeNodes: (nodesToRemove: TNode[], save?: boolean) => void;
+    removeEdges: (edgesToRemove: TEdge[], save?: boolean) => void;
+    replaceNode: (oldNode: TNode, newNode: TNode, save?: boolean, keepEdges?: boolean) => void;
+    addConnectedNodes: (params: {
+        nodesToAdd: TNode[];
+        inboundNodes?: TNode[];
+        outboundNodes?: TNode[];
+        animatedEdges?: boolean;
+        animateFromPosition?: XYPosition;
+        inboundEdgeData?: any;
+        outboundEdgeData?: any;
+        getEdgeLabel?: (source: TNode, target: TNode) => string;
+    }) => void;
+    animateNodePosition: (node: TNode, targetPosition: XYPosition, duration?: number, easing?: (t: number) => number) => void;
+    getDifferences: (baseline: {
+        nodes?: TNode[];
+        edges?: TEdge[];
+    }) => GraphDifferences<TNode, TEdge>;
+};
+//# sourceMappingURL=createCanvasGraph.svelte.d.ts.map

package/dist/canvas/createCanvasGraph.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasGraph.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasGraph.svelte.ts"],"names":[],"mappings":"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"}

package/dist/canvas/createCanvasGraph.svelte.js

@@ -0,0 +1,223 @@
+import { cubicOut } from 'svelte/easing';
+/**
+ * Pure calculation of graph differences between a current state and a baseline state.
+ */
+export function calculateGraphDifferences(currentState, baselineState) {
+    const currentNodes = currentState.nodes ?? [];
+    const currentEdges = currentState.edges ?? [];
+    const baselineNodes = baselineState.nodes ?? [];
+    const baselineEdges = baselineState.edges ?? [];
+    // Map baseline for fast O(1) lookup
+    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 };
+}
+/**
+ * Pure function to replace a node in a graph, optionally preserving its connected edges.
+ */
+export 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
+    };
+}
+/**
+ * Headless Svelte 5 rune managing canvas graph state and operations.
+ */
+export function createCanvasGraph(options = {}) {
+    let nodes = $state.raw(options.initialNodes ?? []);
+    let edges = $state.raw(options.initialEdges ?? []);
+    function setNodes(newNodes, triggerCallback = true) {
+        nodes = newNodes;
+        if (triggerCallback) {
+            options.onNodesChange?.(nodes);
+        }
+    }
+    function setEdges(newEdges, triggerCallback = true) {
+        edges = newEdges;
+        if (triggerCallback) {
+            options.onEdgesChange?.(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
+            };
+            // Mutate position in place without recreating the entire array every frame
+            const targetNode = nodes.find((n) => n.id === node.id);
+            if (targetNode) {
+                targetNode.position = currentPos;
+            }
+            if (progress < 1) {
+                if (typeof requestAnimationFrame !== 'undefined') {
+                    requestAnimationFrame(step);
+                }
+            }
+            else {
+                // Animation completed: trigger final reactive update and change event
+                setNodes([...nodes]);
+            }
+        }
+        step();
+    }
+    function addNodeOrNodes(nodeOrNodesToAdd, animateFromPosition, save = true) {
+        const toAdd = Array.isArray(nodeOrNodesToAdd) ? nodeOrNodesToAdd : [nodeOrNodesToAdd];
+        const existingMap = new Map(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([...edges, edgeToAdd]);
+        if (save)
+            options.onSave?.();
+    }
+    function addEdges(edgesToAdd, save = true) {
+        setEdges([...edges, ...edgesToAdd]);
+        if (save)
+            options.onSave?.();
+    }
+    function removeNodes(nodesToRemove, save = true) {
+        const idsToRemove = new Set(nodesToRemove.map((n) => n.id));
+        setNodes(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(edges.filter((e) => !idsToRemove.has(e.id)));
+        if (save)
+            options.onSave?.();
+    }
+    function replaceNode(oldNode, newNode, save = true, keepEdges = false) {
+        const result = replaceNodeInGraph(nodes, edges, oldNode, newNode, keepEdges);
+        setNodes(result.nodes);
+        if (result.edges !== 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, edges }, baseline);
+    }
+    return {
+        get nodes() {
+            return nodes;
+        },
+        set nodes(val) {
+            setNodes(val);
+        },
+        get edges() {
+            return edges;
+        },
+        set edges(val) {
+            setEdges(val);
+        },
+        setNodes,
+        setEdges,
+        addNodeOrNodes,
+        addEdge,
+        addEdges,
+        removeNodes,
+        removeEdges,
+        replaceNode,
+        addConnectedNodes,
+        animateNodePosition,
+        getDifferences
+    };
+}

package/dist/canvas/createCanvasInteractions.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { CanvasInteractionPresetConfig } from './types.js';
+export interface CreateCanvasInteractionsOptions {
+    targetElement?: HTMLElement | Window;
+    onPanModeChange?: (active: boolean) => void;
+    onTrackpadDetected?: () => void;
+}
+/**
+ * Headless Svelte 5 rune managing canvas pan interactions (spacebar panning, trackpad pinch detection).
+ */
+export declare function createCanvasInteractions(options?: CreateCanvasInteractionsOptions): {
+    readonly isSpacebarPanning: boolean;
+    readonly trackpadDetected: boolean;
+    attachListeners: (target?: HTMLElement | Window) => () => void;
+    destroy: () => void;
+};
+/**
+ * Default interaction configuration presets for SvelteFlow.
+ */
+export declare const defaultSvelteFlowPreset: CanvasInteractionPresetConfig;
+/**
+ * Miro-compatible interaction preset (middle/right drag to pan, left drag to select).
+ */
+export declare const miroCompatiblePreset: CanvasInteractionPresetConfig;
+/**
+ * Helper to ensure panels restore pointer events after selection rectangle releases.
+ */
+export declare function restorePanelPointerEvents(panelSelector?: string): void;
+//# sourceMappingURL=createCanvasInteractions.svelte.d.ts.map

package/dist/canvas/createCanvasInteractions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasInteractions.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasInteractions.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAEhE,MAAM,WAAW,+BAA+B;IAC/C,aAAa,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CAChC;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,OAAO,GAAE,+BAAoC;;;+BAsCnD,WAAW,GAAG,MAAM,KAAG,MAAM,IAAI;mBAAJ,IAAI;EA4BnE;AAED;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,6BAOrC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,6BAIlC,CAAC;AAEF;;GAEG;AACH,wBAAgB,yBAAyB,CAAC,aAAa,SAAwB,GAAG,IAAI,CAMrF"}

package/dist/canvas/createCanvasInteractions.svelte.js

@@ -0,0 +1,95 @@
+import { isEventFromTextInput } from './createCanvasClipboard.svelte.js';
+/**
+ * Headless Svelte 5 rune managing canvas pan interactions (spacebar panning, trackpad pinch detection).
+ */
+export function createCanvasInteractions(options = {}) {
+    let isSpacebarPanning = $state.raw(false);
+    let trackpadDetected = $state.raw(false);
+    let toggledPanMode = false;
+    function handleKeyDown(event) {
+        if (event.key === ' ' || event.code === 'Space') {
+            if (isSpacebarPanning || isEventFromTextInput(event))
+                return;
+            isSpacebarPanning = true;
+            toggledPanMode = true;
+            options.onPanModeChange?.(true);
+            if (typeof document !== 'undefined') {
+                document.body.classList.add('cursor-grab');
+            }
+        }
+    }
+    function handleKeyUp(event) {
+        if (event.key === ' ' || event.code === 'Space') {
+            if (!isSpacebarPanning && !toggledPanMode)
+                return;
+            isSpacebarPanning = false;
+            toggledPanMode = false;
+            options.onPanModeChange?.(false);
+            if (typeof document !== 'undefined') {
+                document.body.classList.remove('cursor-grab');
+            }
+        }
+    }
+    function handleWheel(event) {
+        if (event.ctrlKey && !trackpadDetected) {
+            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 isSpacebarPanning;
+        },
+        get trackpadDetected() {
+            return trackpadDetected;
+        },
+        attachListeners,
+        destroy: attachListeners()
+    };
+}
+/**
+ * Default interaction configuration presets for SvelteFlow.
+ */
+export const defaultSvelteFlowPreset = {
+    snapGrid: [25, 25],
+    panOnDrag: [0, 1, 2, 3, 4],
+    panOnScroll: false,
+    selectionOnDrag: false,
+    colorMode: 'system',
+    multiSelectionKey: ['Shift', 'Meta']
+};
+/**
+ * Miro-compatible interaction preset (middle/right drag to pan, left drag to select).
+ */
+export const miroCompatiblePreset = {
+    ...defaultSvelteFlowPreset,
+    panOnDrag: [1, 2],
+    selectionOnDrag: true
+};
+/**
+ * Helper to ensure panels restore pointer events after selection rectangle releases.
+ */
+export function restorePanelPointerEvents(panelSelector = '.svelte-flow__panel') {
+    if (typeof document === 'undefined')
+        return;
+    const panels = document.querySelectorAll(panelSelector);
+    panels.forEach((panel) => {
+        panel.style.pointerEvents = 'auto';
+    });
+}

package/dist/canvas/createCanvasLayout.d.ts

@@ -0,0 +1,22 @@
+import { type XYPosition, type Rect } from '@xyflow/svelte';
+import type { CanvasNode, CanvasEdge, CanvasLayoutOptions } from './types.js';
+/**
+ * Calculates upper-left flow coordinate for an element to be centered in the viewport.
+ */
+export declare function getCenteredNodePosition(width: number | undefined, height: number | undefined, screenToFlowPosition: (position: XYPosition) => XYPosition, screenDimensions?: {
+    width: number;
+    height: number;
+}): XYPosition;
+/**
+ * Updates positions of nodes so their collective bounding box is centered in the current viewport.
+ */
+export declare function centerNodes<TNode extends CanvasNode = CanvasNode>(nodes: TNode[], screenToFlowPosition: (position: XYPosition) => XYPosition, getNodesBounds: (nodes: TNode[]) => Rect, screenDimensions?: {
+    width: number;
+    height: number;
+}): TNode[];
+/**
+ * Automatically calculates directed hierarchical layout of nodes and edges using Dagre.
+ */
+export declare function getLayoutedNodes<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges: TEdge[], getNodesBounds: (nodes: TNode[]) => Rect, options?: CanvasLayoutOptions): TNode[];
+export { ensureLayout, placeBeside, estimateNodeSize, flowSide } from '@pixerate/editor/canvas';
+//# sourceMappingURL=createCanvasLayout.d.ts.map

package/dist/canvas/createCanvasLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasLayout.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasLayout.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,UAAU,EAAE,KAAK,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAE9E;;GAEG;AACH,wBAAgB,uBAAuB,CACtC,KAAK,oBAAI,EACT,MAAM,oBAAI,EACV,oBAAoB,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,UAAU,EAC1D,gBAAgB,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD,UAAU,CAUZ;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAChE,KAAK,EAAE,KAAK,EAAE,EACd,oBAAoB,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,UAAU,EAC1D,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EACxC,gBAAgB,CAAC,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD,KAAK,EAAE,CAyBT;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU,EAErC,KAAK,EAAE,KAAK,EAAE,EACd,KAAK,EAAE,KAAK,EAAE,EACd,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,EACxC,OAAO,GAAE,mBAAwB,GAC/B,KAAK,EAAE,CAiDT;AAGD,OAAO,EACN,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,MAAM,yBAAyB,CAAC"}

package/dist/canvas/createCanvasLayout.js

@@ -0,0 +1,76 @@
+import dagre from '@dagrejs/dagre';
+import { Position } from '@xyflow/svelte';
+/**
+ * Calculates upper-left flow coordinate for an element to be centered in the viewport.
+ */
+export 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
+    };
+}
+/**
+ * Updates positions of nodes so their collective bounding box is centered in the current viewport.
+ */
+export 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
+        }
+    }));
+}
+/**
+ * Automatically calculates directed hierarchical layout of nodes and edges using Dagre.
+ */
+export 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
+            }
+        };
+    });
+}
+// Re-export incremental layout and collision-aware placement from core
+export { ensureLayout, placeBeside, estimateNodeSize, flowSide } from '@pixerate/editor/canvas';

package/dist/canvas/createCanvasMultiDrag.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { XYPosition } from '@xyflow/svelte';
+import type { CanvasNode } from './types.js';
+export interface MultiDragFollowerOffset {
+    deltaX: number;
+    deltaY: number;
+    originalPosition: XYPosition;
+    stackOffsetX: number;
+    stackOffsetY: number;
+    rotationDeg: number;
+}
+export interface MultiDragState {
+    leadId: string;
+    offsets: Record<string, MultiDragFollowerOffset>;
+    count: number;
+}
+export interface CreateCanvasMultiDragOptions {
+    /**
+     * Base horizontal fan-out offset per stacked follower card (default: 4px).
+     */
+    stackOffsetStepX?: number;
+    /**
+     * Base vertical fan-out offset per stacked follower card (default: 4px).
+     */
+    stackOffsetStepY?: number;
+    /**
+     * Alternating angular tilt in degrees for follower cards (default: [-2, 2.5, -3, 3]).
+     */
+    rotationAngles?: number[];
+    /**
+     * Base z-index for stacked cards during active dragging (default: 50).
+     */
+    baseZIndex?: number;
+}
+export interface FollowerTransform {
+    isFollower: boolean;
+    stackOffsetX: number;
+    stackOffsetY: number;
+    rotationDeg: number;
+    zIndex: number;
+}
+/**
+ * Headless Svelte 5 rune orchestrating multi-node drag operations with stacked visual fanning,
+ * dynamic z-index layering, and position restoration.
+ */
+export declare function createCanvasMultiDrag(options?: CreateCanvasMultiDragOptions): {
+    readonly dragState: MultiDragState | null;
+    readonly isMultiDrag: boolean;
+    readonly count: number;
+    readonly leadId: string | null;
+    startMultiDrag: (leadNodeId: string, selectedNodeIds: string[] | Set<string>, nodes: CanvasNode[] | Map<string, CanvasNode>) => MultiDragState | null;
+    getFollowerTransform: (nodeId: string) => FollowerTransform;
+    cancelMultiDrag: (applyRestore?: (restores: {
+        id: string;
+        originalPosition: XYPosition;
+    }[]) => void) => {
+        id: string;
+        originalPosition: XYPosition;
+    }[];
+    commitMultiDrag: () => void;
+};
+//# sourceMappingURL=createCanvasMultiDrag.svelte.d.ts.map

package/dist/canvas/createCanvasMultiDrag.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasMultiDrag.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasMultiDrag.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,uBAAuB;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,UAAU,CAAC;IAC7B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;IACjD,KAAK,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,4BAA4B;IAC5C;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IACjC,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,GAAE,4BAAiC;;;;;iCASlE,MAAM,mBACD,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,SAChC,UAAU,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAC3C,cAAc,GAAG,IAAI;mCAiDc,MAAM,KAAG,iBAAiB;qCAyBhD,CAAC,QAAQ,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,UAAU,CAAA;KAAE,EAAE,KAAK,IAAI,KAC/E;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,gBAAgB,EAAE,UAAU,CAAA;KAAE,EAAE;2BAgBrB,IAAI;EAsBhC"}