@pixerate/editor-svelte 0.15.2 → 0.16.0

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

@@ -0,0 +1,58 @@
+import type { Position } from '@xyflow/svelte';
+import type { CanvasNode, CanvasEdge } from './types.js';
+export interface HandleConfig {
+    id?: string | null;
+    type: 'source' | 'target';
+    position: Position;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+export interface NodeMeasurement {
+    width: number;
+    height: number;
+}
+/**
+ * Preserves cached .measured dimensions from existing nodes to newly constructed nodes.
+ * Resolves measurements without subscribing to reactive updates on the existing collection.
+ */
+export declare function preserveNodeMeasurements<TNode extends CanvasNode = CanvasNode>(newNodes: TNode[], existingNodes: TNode[] | Map<string, TNode>): TNode[];
+/**
+ * Pre-populates handle geometry on a node to prevent @xyflow/system's getNodesInside
+ * from evaluating `forceInitialRender = !node.internals.handleBounds` and triggering
+ * a false full-canvas selection on the first frame of marquee drag-selection.
+ */
+export declare function normalizeNodeHandles<TNode extends CanvasNode = CanvasNode>(node: TNode, handles?: HandleConfig[]): TNode;
+export interface CreateCanvasNodeSyncOptions<TItem, TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
+    /**
+     * Reactive getter returning raw domain items.
+     */
+    items: () => TItem[];
+    /**
+     * Factory function converting a domain item into a CanvasNode.
+     */
+    toNode: (item: TItem, index: number, context: {
+        existingNode?: TNode;
+        prevNodesMap: Map<string, TNode>;
+    }) => TNode;
+    /**
+     * Optional factory function converting domain items and generated nodes into CanvasEdges.
+     */
+    toEdges?: (items: TItem[], nodes: TNode[]) => TEdge[];
+    /**
+     * Optional default handle configuration provider for connectable nodes.
+     */
+    defaultHandles?: (node: TNode) => HandleConfig[] | undefined;
+}
+/**
+ * Headless Svelte 5 rune that synchronizes reactive domain items with SvelteFlow nodes/edges,
+ * automatically untracking previous node reads, caching .measured dimensions, and normalizing
+ * handle bounds to prevent Svelte 5 effect_update_depth_exceeded and marquee drag flashes.
+ */
+export declare function createCanvasNodeSync<TItem, TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(options: CreateCanvasNodeSyncOptions<TItem, TNode, TEdge>): {
+    nodes: TNode[];
+    edges: TEdge[];
+    updateNodeMeasurements(id: string, width: number, height: number): void;
+};
+//# sourceMappingURL=createCanvasNodeSync.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasNodeSync.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasNodeSync.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAEzD,MAAM,WAAW,YAAY;IAC5B,EAAE,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC1B,QAAQ,EAAE,QAAQ,CAAC;IACnB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED;;;GAGG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAC7E,QAAQ,EAAE,KAAK,EAAE,EACjB,aAAa,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GACzC,KAAK,EAAE,CAaT;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EACzE,IAAI,EAAE,KAAK,EACX,OAAO,GAAE,YAAY,EAAO,GAC1B,KAAK,CAGP;AAED,MAAM,WAAW,2BAA2B,CAC3C,KAAK,EACL,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU;IAErC;;OAEG;IACH,KAAK,EAAE,MAAM,KAAK,EAAE,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,CACP,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,MAAM,EACb,OAAO,EAAE;QAAE,YAAY,CAAC,EAAE,KAAK,CAAC;QAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;KAAE,KAC/D,KAAK,CAAC;IACX;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,KAAK,EAAE,CAAC;IACtD;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,YAAY,EAAE,GAAG,SAAS,CAAC;CAC7D;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CACnC,KAAK,EACL,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU,EACpC,OAAO,EAAE,2BAA2B,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC;WA2CxC,KAAK,EAAE;WAMP,KAAK,EAAE;+BAGG,MAAM,SAAS,MAAM,UAAU,MAAM;EAOjE"}

package/dist/canvas/createCanvasNodeSync.svelte.js

@@ -0,0 +1,82 @@
+import { untrack } from 'svelte';
+/**
+ * Preserves cached .measured dimensions from existing nodes to newly constructed nodes.
+ * Resolves measurements without subscribing to reactive updates on the existing collection.
+ */
+export 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;
+}
+/**
+ * Pre-populates handle geometry on a node to prevent @xyflow/system's getNodesInside
+ * from evaluating `forceInitialRender = !node.internals.handleBounds` and triggering
+ * a false full-canvas selection on the first frame of marquee drag-selection.
+ */
+export function normalizeNodeHandles(node, handles = []) {
+    node.handles = handles;
+    return node;
+}
+/**
+ * Headless Svelte 5 rune that synchronizes reactive domain items with SvelteFlow nodes/edges,
+ * automatically untracking previous node reads, caching .measured dimensions, and normalizing
+ * handle bounds to prevent Svelte 5 effect_update_depth_exceeded and marquee drag flashes.
+ */
+export function createCanvasNodeSync(options) {
+    let nodes = $state([]);
+    let edges = $state([]);
+    $effect.pre(() => {
+        const rawItems = options.items();
+        // Untrack the read of current nodes to avoid recursive effect loops
+        const existingNodesMap = untrack(() => new Map(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
+            });
+            // Automatically preserve measured dimensions if available
+            if (existing && existing.measured && !node.measured) {
+                node.measured = { ...existing.measured };
+            }
+            // Pre-populate handles if provided
+            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) : [];
+        nodes = newNodes;
+        edges = newEdges;
+    });
+    return {
+        get nodes() {
+            return nodes;
+        },
+        set nodes(value) {
+            nodes = value;
+        },
+        get edges() {
+            return edges;
+        },
+        set edges(value) {
+            edges = value;
+        },
+        updateNodeMeasurements(id, width, height) {
+            const node = nodes.find((n) => n.id === id);
+            if (node) {
+                node.measured = { width, height };
+            }
+        }
+    };
+}

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

@@ -0,0 +1,26 @@
+import type { CanvasInteractionPresetConfig } from './types.js';
+export interface CanvasSelectionOptions {
+    /**
+     * Whether spacebar panning is currently active (suspends marquee selection).
+     */
+    isSpacebarPanning?: boolean;
+    /**
+     * Selection mode: 'partial' (default) selects nodes intersected by selection box,
+     * 'full' requires nodes to be fully enclosed.
+     */
+    selectionMode?: 'partial' | 'full';
+    /**
+     * Additional keys that trigger multi-selection (default: ['Shift', 'Meta']).
+     */
+    multiSelectionKey?: string[];
+}
+/**
+ * Generates an interaction preset configured for left-click marquee drag-selection
+ * while preserving middle-mouse and spacebar panning.
+ */
+export declare function getMarqueeSelectionPreset(options?: CanvasSelectionOptions): CanvasInteractionPresetConfig;
+/**
+ * Keyboard listener helper to deselect nodes on Escape.
+ */
+export declare function handleDeselectOnEscape(event: KeyboardEvent, onDeselect: () => void): boolean;
+//# sourceMappingURL=createCanvasSelection.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasSelection.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasSelection.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,YAAY,CAAC;AAEhE,MAAM,WAAW,sBAAsB;IACtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CACxC,OAAO,GAAE,sBAA2B,GAClC,6BAA6B,CAY/B;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACrC,KAAK,EAAE,aAAa,EACpB,UAAU,EAAE,MAAM,IAAI,GACpB,OAAO,CAMT"}

package/dist/canvas/createCanvasSelection.svelte.js

@@ -0,0 +1,26 @@
+/**
+ * Generates an interaction preset configured for left-click marquee drag-selection
+ * while preserving middle-mouse and spacebar panning.
+ */
+export 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')
+    };
+}
+/**
+ * Keyboard listener helper to deselect nodes on Escape.
+ */
+export function handleDeselectOnEscape(event, onDeselect) {
+    if (event.key === 'Escape' || event.code === 'Escape') {
+        onDeselect();
+        return true;
+    }
+    return false;
+}

package/dist/canvas/createCanvasShortcuts.d.ts

@@ -0,0 +1,9 @@
+import type { CanvasNode, CanvasShortcutsOptions } from './types.js';
+/**
+ * Attaches keyboard shortcut handlers for canvas interaction.
+ * Automatically ignores shortcuts when the user is typing into text inputs, textareas, or rich editors.
+ *
+ * @returns A cleanup function to remove event listeners.
+ */
+export declare function createCanvasShortcuts<TNode extends CanvasNode = CanvasNode>(options: CanvasShortcutsOptions<TNode>): () => void;
+//# sourceMappingURL=createCanvasShortcuts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasShortcuts.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAErE;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAC1E,OAAO,EAAE,sBAAsB,CAAC,KAAK,CAAC,GACpC,MAAM,IAAI,CAuFZ"}

package/dist/canvas/createCanvasShortcuts.js

@@ -0,0 +1,97 @@
+import { isEventFromTextInput } from './createCanvasClipboard.svelte.js';
+/**
+ * Attaches keyboard shortcut handlers for canvas interaction.
+ * Automatically ignores shortcuts when the user is typing into text inputs, textareas, or rich editors.
+ *
+ * @returns A cleanup function to remove event listeners.
+ */
+export function createCanvasShortcuts(options) {
+    const target = options.targetElement ?? (typeof window !== 'undefined' ? window : null);
+    if (!target)
+        return () => { };
+    function handleKeyDown(event) {
+        const keyboardEvent = event;
+        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) {
+                    // We let the native copy event fire or call 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);
+    };
+}

package/dist/canvas/createCanvasTrajectory.d.ts

@@ -0,0 +1,31 @@
+import type { XYPosition } from '@xyflow/svelte';
+import type { CanvasNode, FanOutTrajectoryOptions, NodeTransition, TrajectoryFunction } from './types.js';
+/**
+ * Standard linear trajectory: straight line interpolation with linear scale & opacity progression.
+ */
+export declare const linearTrajectory: TrajectoryFunction;
+/**
+ * Linear position trajectory: pure position interpolation without altering scale or opacity.
+ * Used for displaced sibling nodes to ensure their visibility remains unaltered.
+ */
+export declare const linearPositionTrajectory: TrajectoryFunction;
+/**
+ * Creates a fan-out trajectory where nodes arc outward from origin to target.
+ * Matches the curved distribution shown in multi-node branching diagrams.
+ */
+export declare function createFanOutTrajectory(options?: FanOutTrajectoryOptions): TrajectoryFunction;
+/**
+ * Creates a custom quadratic Bezier trajectory with a specified or dynamically calculated control point.
+ */
+export declare function createBezierTrajectory(getControlPoint: (origin: XYPosition, target: XYPosition) => XYPosition): TrajectoryFunction;
+/**
+ * Coordinates and animates multiple node transitions simultaneously with zero per-frame array allocations.
+ * Directly mutates node positions and data (scale, opacity) in-place during the animation loop.
+ */
+export declare function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(transitions: NodeTransition<TNode>[], options?: {
+    defaultDuration?: number;
+    defaultEasing?: (t: number) => number;
+    onUpdate?: () => void;
+    onComplete?: () => void;
+}): () => void;
+//# sourceMappingURL=createCanvasTrajectory.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createCanvasTrajectory.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasTrajectory.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EACX,UAAU,EACV,uBAAuB,EACvB,cAAc,EACd,kBAAkB,EAElB,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,kBAa9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,EAAE,kBAWtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,uBAA4B,GAAG,kBAAkB,CA0ChG;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CACrC,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,KAAK,UAAU,GACrE,kBAAkB,CAepB;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU,EAC3E,WAAW,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,EACpC,OAAO,GAAE;IACR,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACnB,GACJ,MAAM,IAAI,CA+EZ"}

package/dist/canvas/createCanvasTrajectory.js

@@ -0,0 +1,141 @@
+import { cubicOut } from 'svelte/easing';
+/**
+ * Standard linear trajectory: straight line interpolation with linear scale & opacity progression.
+ */
+export const 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)
+    };
+};
+/**
+ * Linear position trajectory: pure position interpolation without altering scale or opacity.
+ * Used for displaced sibling nodes to ensure their visibility remains unaltered.
+ */
+export const linearPositionTrajectory = (origin, target, progress) => {
+    return {
+        position: {
+            x: origin.x + (target.x - origin.x) * progress,
+            y: origin.y + (target.y - origin.y) * progress
+        }
+    };
+};
+/**
+ * Creates a fan-out trajectory where nodes arc outward from origin to target.
+ * Matches the curved distribution shown in multi-node branching diagrams.
+ */
+export 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;
+        // Normalized index from -1 (top) to +1 (bottom)
+        const normIndex = total > 1 ? (index - (total - 1) / 2) / ((total - 1) / 2) : 0;
+        // Perpendicular control point offset to create smooth fan arc
+        const midX = origin.x + dx * 0.4;
+        const midY = origin.y + dy * 0.1 - normIndex * Math.abs(dx) * 0.15 * curvature;
+        // Quadratic Bezier interpolation: B(t) = (1-t)^2 * P0 + 2(1-t)t * P1 + t^2 * P2
+        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
+        };
+    };
+}
+/**
+ * Creates a custom quadratic Bezier trajectory with a specified or dynamically calculated control point.
+ */
+export 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
+        };
+    };
+}
+/**
+ * Coordinates and animates multiple node transitions simultaneously with zero per-frame array allocations.
+ * Directly mutates node positions and data (scale, opacity) in-place during the animation loop.
+ */
+export function runMultiNodeTransition(transitions, options = {}) {
+    if (transitions.length === 0) {
+        options.onComplete?.();
+        return () => { };
+    }
+    const { defaultDuration = 400, defaultEasing = cubicOut, 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);
+            // Direct in-place mutation avoids array reconstruction during RAF
+            item.node.position = { ...point.position };
+            if (point.scale !== undefined || point.opacity !== undefined) {
+                if (!item.node.data) {
+                    item.node.data = {};
+                }
+                if (point.scale !== undefined) {
+                    item.node.data.scale = point.scale;
+                }
+                if (point.opacity !== undefined) {
+                    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;
+    };
+}

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

@@ -0,0 +1,19 @@
+import { type CanvasEdge, type CanvasNode, type IncrementalLayoutOptions, type XYPosition } from '@pixerate/editor/canvas';
+export interface CreateStreamingCanvasOptions<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
+    throttleMs?: number;
+    glideDurationMs?: number;
+    connectedOnly?: boolean;
+    clock?: any;
+    layoutOptions?: IncrementalLayoutOptions;
+    onPositionsChange?: (positions: Map<string, XYPosition>) => void;
+}
+/**
+ * Svelte 5 rune managing throttled graph streaming and fluid node glide animations.
+ */
+export declare function createStreamingCanvas<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(options?: CreateStreamingCanvasOptions<TNode, TEdge>): {
+    readonly positions: Map<string, XYPosition>;
+    pushStreamUpdate(nodes: TNode[], edges: TEdge[], currentPositions: Map<string, XYPosition>): void;
+    flush(nodes: TNode[], edges: TEdge[], currentPositions: Map<string, XYPosition>): void;
+    destroy(): void;
+};
+//# sourceMappingURL=createStreamingCanvas.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"createStreamingCanvas.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createStreamingCanvas.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAEN,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,wBAAwB,EAC7B,KAAK,UAAU,EACf,MAAM,yBAAyB,CAAC;AAEjC,MAAM,WAAW,4BAA4B,CAC5C,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU;IAErC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,aAAa,CAAC,EAAE,wBAAwB,CAAC;IACzC,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;CACjE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU,EACpC,OAAO,GAAE,4BAA4B,CAAC,KAAK,EAAE,KAAK,CAAM;;4BAmBhC,KAAK,EAAE,SAAS,KAAK,EAAE,oBAAoB,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC;iBAG7E,KAAK,EAAE,SAAS,KAAK,EAAE,oBAAoB,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC;;EAOhF"}

package/dist/canvas/createStreamingCanvas.svelte.js

@@ -0,0 +1,32 @@
+import { StreamingLayoutManager } from '@pixerate/editor/canvas';
+/**
+ * Svelte 5 rune managing throttled graph streaming and fluid node glide animations.
+ */
+export function createStreamingCanvas(options = {}) {
+    let positions = $state(new Map());
+    const manager = new StreamingLayoutManager({
+        throttleMs: options.throttleMs,
+        glideDurationMs: options.glideDurationMs,
+        connectedOnly: options.connectedOnly,
+        clock: options.clock,
+        layoutOptions: options.layoutOptions,
+        onLayoutUpdated: (updated) => {
+            positions = updated;
+            options.onPositionsChange?.(updated);
+        }
+    });
+    return {
+        get positions() {
+            return positions;
+        },
+        pushStreamUpdate(nodes, edges, currentPositions) {
+            manager.pushStreamUpdate(nodes, edges, currentPositions);
+        },
+        flush(nodes, edges, currentPositions) {
+            manager.flush(nodes, edges, currentPositions);
+        },
+        destroy() {
+            manager.destroy();
+        }
+    };
+}