@pixerate/editor-svelte 0.17.4 → 0.17.5

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

@@ -7,7 +7,8 @@ export declare function isEventFromTextInput(event: Event | {
     target: EventTarget | null;
 }): boolean;
 /**
- * Validates that an object conforms to minimal CanvasNode shape.
+ * Validates that an object conforms to minimal CanvasNode shape:
+ * a string `id` and a `position` whose `x` / `y` are finite numbers.
  */
 export declare function isValidCanvasNode(obj: unknown): obj is CanvasNode;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"createCanvasClipboard.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasClipboard.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAA0B,MAAM,YAAY,CAAC;AAEjF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,GAAG,OAAO,CAc3F;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,UAAU,CAYjE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAO/C;AAED,MAAM,WAAW,4BAA4B,CAC5C,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU;IAErC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,UAAU,CAAC;CAC5D;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;uCAEzC,KAAK,EAAE,mBACL,KAAK,EAAE,UAChB,cAAc,KACpB,OAAO;sCA2BM,KAAK,EAAE,mBACL,KAAK,EAAE,aACb,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,UAC3B,cAAc,KACpB,OAAO;8BAY6B,cAAc,KAAG,OAAO,CAAC,OAAO,CAAC;EAqGxE"}
+{"version":3,"file":"createCanvasClipboard.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasClipboard.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAA0B,MAAM,YAAY,CAAC;AAEjF;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,GAAG;IAAE,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,GAAG,OAAO,CAc3F;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,GAAG,GAAG,IAAI,UAAU,CAajE;AAWD;;GAEG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAO/C;AAED,MAAM,WAAW,4BAA4B,CAC5C,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU;IAErC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC,EAAE,KAAK,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACzE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,KAAK,UAAU,CAAC;CAC5D;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;uCAEzC,KAAK,EAAE,mBACL,KAAK,EAAE,UAChB,cAAc,KACpB,OAAO;sCA2BM,KAAK,EAAE,mBACL,KAAK,EAAE,aACb,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,UAC3B,cAAc,KACpB,OAAO;8BAY6B,cAAc,KAAG,OAAO,CAAC,OAAO,CAAC;EAkHxE"}

package/dist/canvas/createCanvasClipboard.svelte.js

@@ -17,18 +17,28 @@ export function isEventFromTextInput(event) {
     return false;
 }
 /**
- * Validates that an object conforms to minimal CanvasNode shape.
+ * Validates that an object conforms to minimal CanvasNode shape:
+ * a string `id` and a `position` whose `x` / `y` are finite numbers.
  */
 export function isValidCanvasNode(obj) {
+    if (typeof obj !== 'object' || obj === null)
+        return false;
+    const candidate = obj;
+    if (typeof candidate.id !== 'string')
+        return false;
+    const position = candidate.position;
+    return (typeof position === 'object' &&
+        position !== null &&
+        typeof position.x === 'number' &&
+        Number.isFinite(position.x) &&
+        typeof position.y === 'number' &&
+        Number.isFinite(position.y));
+}
+function isValidCanvasEdgeShape(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);
+        typeof obj.source === 'string' &&
+        typeof obj.target === 'string');
 }
 /**
  * Checks if a string is a valid HTTP/HTTPS URL.
@@ -110,24 +120,37 @@ export function createCanvasClipboard(options = {}) {
                     Array.isArray(parsed.nodes) &&
                     parsed.nodes.every(isValidCanvasNode)) {
                     rawNodes = parsed.nodes;
-                    rawEdges = parsed.edges;
+                    const edgesField = parsed.edges;
+                    // Untrusted input: ignore a non-array `edges` and malformed edge entries.
+                    rawEdges = Array.isArray(edgesField)
+                        ? edgesField.filter(isValidCanvasEdgeShape)
+                        : undefined;
                 }
                 if (rawNodes && rawNodes.length > 0) {
                     event.preventDefault();
                     // Create ID mapping for cloned nodes
                     const idMap = new Map();
+                    for (const node of rawNodes) {
+                        idMap.set(node.id, crypto.randomUUID());
+                    }
                     const newNodes = rawNodes.map((node) => {
-                        const newId = crypto.randomUUID();
-                        idMap.set(node.id, newId);
-                        return {
+                        const next = {
                             ...node,
-                            id: newId,
+                            id: idMap.get(node.id),
                             selected: true,
                             position: {
                                 x: node.position.x + 40,
                                 y: node.position.y + 40
                             }
                         };
+                        // Children of a pasted parent point at the new parent and keep their
+                        // parent-relative position; other parent references are left unchanged.
+                        const parentId = node.parentId;
+                        if (typeof parentId === 'string' && idMap.has(parentId)) {
+                            next.parentId = idMap.get(parentId);
+                            next.position = { x: node.position.x, y: node.position.y };
+                        }
+                        return next;
                     });
                     // Clone edges mapping them to the newly generated node IDs
                     const newEdges = rawEdges?.map((edge) => ({

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

@@ -1 +1 @@
-{"version":3,"file":"createCanvasExplosion.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasExplosion.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EACX,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAEjB,MAAM,YAAY,CAAC;AAYpB,MAAM,WAAW,iBAAiB,CACjC,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU;IAErC,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,KAAK,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU,EAErC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,EACtC,OAAO,GAAE,4BAA4B,CAAC,KAAK,CAAM;;yBAMrB,MAAM,KAAG,OAAO;4BAKjC,MAAM,kBACA,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,KAC9C,OAAO;6BA2OC,MAAM,oBACC,mBAAmB,KAClC,OAAO;8BAmIC,MAAM,kBACA,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,oBAC9B,mBAAmB,KACnC,OAAO;4BAOqB,MAAM;EAcrC"}
+{"version":3,"file":"createCanvasExplosion.svelte.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasExplosion.svelte.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,KAAK,EACX,UAAU,EACV,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EAEjB,MAAM,YAAY,CAAC;AAYpB,MAAM,WAAW,iBAAiB,CACjC,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU;IAErC,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,KAAK,EAAE,KAAK,EAAE,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,eAAe,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9D,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,EAAE,EAAE,WAAW,CAAC,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3F,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,KAAK,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED,MAAM,WAAW,4BAA4B,CAAC,KAAK,SAAS,UAAU,GAAG,UAAU;IAClF,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,SAAS,UAAU,GAAG,UAAU,EACrC,KAAK,SAAS,UAAU,GAAG,UAAU,EAErC,KAAK,EAAE,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,EACtC,OAAO,GAAE,4BAA4B,CAAC,KAAK,CAAM;;yBA2BrB,MAAM,KAAG,OAAO;4BAKjC,MAAM,kBACA,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,KAC9C,OAAO;6BAiOC,MAAM,oBACC,mBAAmB,KAClC,OAAO;8BAyHC,MAAM,kBACA,kBAAkB,CAAC,KAAK,EAAE,KAAK,CAAC,oBAC9B,mBAAmB,KACnC,OAAO;4BAOqB,MAAM;EAcrC"}

package/dist/canvas/createCanvasExplosion.svelte.js

@@ -9,6 +9,29 @@ export function createCanvasExplosion(graph, options = {}) {
     let explodedNodeIds = $state([]);
     const snapshots = new Map();
     let activeAnimationCancel = null;
+    /**
+     * Applies one animation frame (node copies emitted by runMultiNodeTransition) onto the
+     * graph's live node objects and publishes the new node array.
+     */
+    function syncTransitionFrame(byId) {
+        for (const graphNode of graph.nodes) {
+            const frameNode = byId.get(graphNode.id);
+            if (!frameNode || frameNode === graphNode)
+                continue;
+            graphNode.position = { ...frameNode.position };
+            graphNode.style = frameNode.style;
+            const frameData = frameNode.data;
+            if (frameData && ('scale' in frameData || 'opacity' in frameData)) {
+                const data = { ...(graphNode.data ?? {}) };
+                if ('scale' in frameData)
+                    data.scale = frameData.scale;
+                if ('opacity' in frameData)
+                    data.opacity = frameData.opacity;
+                graphNode.data = data;
+            }
+        }
+        graph.setNodes([...graph.nodes]);
+    }
     function isExploded(nodeId) {
         return explodedNodeIds.includes(nodeId);
     }
@@ -156,13 +179,15 @@ export function createCanvasExplosion(graph, options = {}) {
         activeAnimationCancel = runMultiNodeTransition(transitions, {
             defaultDuration: duration,
             defaultEasing: easing,
-            onUpdate: () => {
+            onUpdate: (updated) => {
+                // runMultiNodeTransition never mutates inputs; it hands us per-frame copies.
+                const byId = new Map(updated.map((n) => [n.id, n]));
                 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 child = childNodes.find((c) => c.id === edge.target);
+                            const child = byId.get(edge.target);
                             const childOpacity = child?.data?.opacity ?? 1;
                             const currentStyle = (edge.style || '').replace(/opacity:\s*[^;]+;?/g, '').trim();
                             edge.style = `${currentStyle ? currentStyle + '; ' : ''}opacity: ${childOpacity};`;
@@ -170,18 +195,7 @@ export function createCanvasExplosion(graph, options = {}) {
                         graph.setEdges([...graph.edges]);
                     }
                 }
-                // Sync any mismatched node references in graph.nodes from transitions
-                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]);
+                syncTransitionFrame(byId);
             },
             onComplete: () => {
                 childNodes.forEach((child, i) => {
@@ -274,30 +288,21 @@ export function createCanvasExplosion(graph, options = {}) {
         activeAnimationCancel = runMultiNodeTransition(transitions, {
             defaultDuration: duration,
             defaultEasing: easing,
-            onUpdate: () => {
+            onUpdate: (updated) => {
+                // runMultiNodeTransition never mutates inputs; it hands us per-frame copies.
+                const byId = new Map(updated.map((n) => [n.id, n]));
                 const edgeIdSet = new Set(snapshot.childEdgeIds);
                 const childEdgesInGraph = graph.edges.filter((e) => edgeIdSet.has(e.id));
                 if (childEdgesInGraph.length > 0) {
                     childEdgesInGraph.forEach((edge) => {
-                        const child = activeChildNodes.find((c) => c.id === edge.target);
+                        const child = byId.get(edge.target);
                         const childOpacity = child?.data?.opacity ?? 0;
                         const currentStyle = (edge.style || '').replace(/opacity:\s*[^;]+;?/g, '').trim();
                         edge.style = `${currentStyle ? currentStyle + '; ' : ''}opacity: ${childOpacity};`;
                     });
                     graph.setEdges([...graph.edges]);
                 }
-                // Sync any mismatched node references in graph.nodes from transitions
-                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]);
+                syncTransitionFrame(byId);
             },
             onComplete: () => {
                 // Animation completed: prune child nodes and edges

package/dist/canvas/createCanvasTrajectory.d.ts

@@ -19,13 +19,17 @@ export declare function createFanOutTrajectory(options?: FanOutTrajectoryOptions
  */
 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.
+ * Coordinates and animates multiple node transitions simultaneously.
+ *
+ * Input nodes are never mutated: every frame produces updated copies (position,
+ * `data.scale` / `data.opacity`, `style` opacity) which are passed to `onUpdate`
+ * (and finally `onComplete`) in the same order as `transitions`. Both CSS-string and
+ * object styles are supported. Merge the copies into your graph state by `id`.
  */
 export declare function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(transitions: NodeTransition<TNode>[], options?: {
     defaultDuration?: number;
     defaultEasing?: (t: number) => number;
-    onUpdate?: () => void;
-    onComplete?: () => void;
+    onUpdate?: (nodes: TNode[]) => void;
+    onComplete?: (nodes: TNode[]) => void;
 }): () => void;
 //# sourceMappingURL=createCanvasTrajectory.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"createCanvasTrajectory.d.ts","sourceRoot":"","sources":["../../src/canvas/createCanvasTrajectory.ts"],"names":[],"mappings":"AAEA,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;;;;;;;GAOG;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,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAI,CAAC;CACjC,GACJ,MAAM,IAAI,CAiFZ"}

package/dist/canvas/createCanvasTrajectory.js

@@ -1,4 +1,5 @@
 import { cubicOut } from 'svelte/easing';
+import { withStyleOpacity } from '@pixerate/editor/canvas';
 /**
  * Standard linear trajectory: straight line interpolation with linear scale & opacity progression.
  */
@@ -70,12 +71,16 @@ export function createBezierTrajectory(getControlPoint) {
     };
 }
 /**
- * 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.
+ * Coordinates and animates multiple node transitions simultaneously.
+ *
+ * Input nodes are never mutated: every frame produces updated copies (position,
+ * `data.scale` / `data.opacity`, `style` opacity) which are passed to `onUpdate`
+ * (and finally `onComplete`) in the same order as `transitions`. Both CSS-string and
+ * object styles are supported. Merge the copies into your graph state by `id`.
  */
 export function runMultiNodeTransition(transitions, options = {}) {
     if (transitions.length === 0) {
-        options.onComplete?.();
+        options.onComplete?.([]);
         return () => { };
     }
     const { defaultDuration = 400, defaultEasing = cubicOut, onUpdate, onComplete } = options;
@@ -90,6 +95,8 @@ export function runMultiNodeTransition(transitions, options = {}) {
         delay: tr.delay ?? 0,
         trajectory: tr.trajectory ?? linearTrajectory
     }));
+    // Latest copy of every node; starts out as the untouched inputs.
+    const current = items.map((item) => item.node);
     function frame() {
         if (isCancelled)
             return;
@@ -105,33 +112,31 @@ export function runMultiNodeTransition(transitions, options = {}) {
             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 };
+            const next = { ...item.node, position: { ...point.position } };
             if (point.scale !== undefined || point.opacity !== undefined) {
-                if (!item.node.data) {
-                    item.node.data = {};
-                }
+                const data = { ...(item.node.data ?? {}) };
                 if (point.scale !== undefined) {
-                    item.node.data.scale = point.scale;
+                    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};`;
+                    data.opacity = point.opacity;
+                    next.style = withStyleOpacity(item.node.style, point.opacity);
                 }
+                next.data = data;
             }
+            current[i] = next;
             if (rawProgress < 1) {
                 allCompleted = false;
             }
         }
-        onUpdate?.();
+        onUpdate?.(current.slice());
         if (!allCompleted) {
             if (typeof requestAnimationFrame !== 'undefined') {
                 requestAnimationFrame(frame);
             }
         }
         else {
-            onComplete?.();
+            onComplete?.(current.slice());
         }
     }
     frame();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -52,7 +52,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.17.0"
+    "@pixerate/editor": "0.18.0"
   },
   "peerDependencies": {
     "@tiptap/core": "^2.11.5",