@pixerate/editor 0.16.2 → 0.18.0

package/dist/canvas/index.d.cts

@@ -1,5 +1,5 @@
-import { R as Rect, C as CanvasNode, X as XYPosition, a as CanvasEdge, I as IncrementalLayoutOptions, S as Side, b as CanvasLayoutOptions, P as PlaceBesideOptions, T as TrajectoryFunction, F as FanOutTrajectoryOptions, N as NodeTransition, c as ReflowDisplacementOptions, D as DirectionalDisplacementOptions, d as CanvasClipboardPayload } from '../types-DC8b2TsA.cjs';
-export { e as CanvasDockingCallbacks, f as CollapseNodeOptions, g as DisplacementDirection, h as DockStrategy, E as ExplodeNodeOptions, i as ExplosionSnapshot, G as GraphDifferences, j as Point, k as Position, l as TrajectoryPoint } from '../types-DC8b2TsA.cjs';
+import { R as Rect, C as CanvasNode, X as XYPosition, a as CanvasEdge, I as IncrementalLayoutOptions, S as Side, b as CanvasLayoutOptions, P as PlaceBesideOptions, T as TrajectoryFunction, F as FanOutTrajectoryOptions, N as NodeTransition, c as CanvasNodeStyle, d as ReflowDisplacementOptions, D as DirectionalDisplacementOptions, e as CanvasClipboardPayload } from '../types-JV3S8VeR.cjs';
+export { f as CanvasDockingCallbacks, g as CollapseNodeOptions, h as DisplacementDirection, i as DockStrategy, E as ExplodeNodeOptions, j as ExplosionSnapshot, G as GraphDifferences, k as Point, l as Position, m as TrajectoryPoint } from '../types-JV3S8VeR.cjs';
 
 declare const DEFAULT_NODE_WIDTH = 200;
 declare const DEFAULT_NODE_HEIGHT = 60;
@@ -131,15 +131,40 @@ declare function createFanOutTrajectory(options?: FanOutTrajectoryOptions): Traj
 declare function createBezierTrajectory(getControlPoint: (origin: XYPosition, target: XYPosition) => XYPosition): TrajectoryFunction;
 
 /**
- * Coordinates and animates multiple node transitions simultaneously with zero per-frame array allocations.
+ * Returns a copy of `style` with its opacity set to `opacity`.
+ *
+ * Supports both CSS strings (`"color: red; opacity: 0.5;"`, used by SvelteFlow)
+ * and style objects (`{ color: 'red', opacity: 0.5 }`, used by React Flow / xyflow).
+ * When `style` is empty, `emptyFormat` decides which representation is produced.
+ * Never mutates the input.
  */
-declare function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(transitions: NodeTransition<TNode>[], options?: {
+declare function withStyleOpacity(style: CanvasNodeStyle | undefined | null, opacity: number, emptyFormat?: 'string' | 'object'): CanvasNodeStyle;
+interface MultiNodeTransitionOptions<TNode extends CanvasNode = CanvasNode> {
     defaultDuration?: number;
     defaultEasing?: (t: number) => number;
     clock?: Clock;
-    onUpdate?: () => void;
-    onComplete?: () => void;
-}): () => void;
+    /**
+     * Style representation to create for nodes that have no `style` yet when an opacity
+     * is applied. Defaults to `'string'` (SvelteFlow); pass `'object'` for React Flow.
+     * Existing styles always keep their representation.
+     */
+    styleFormat?: 'string' | 'object';
+    /**
+     * Called on every frame with updated copies of the transitioning nodes, in the same
+     * order as the `transitions` array. Input nodes are never mutated.
+     */
+    onUpdate?: (nodes: TNode[]) => void;
+    /** Called once all transitions finished, with the final node copies. */
+    onComplete?: (nodes: TNode[]) => void;
+}
+/**
+ * Coordinates and animates multiple node transitions simultaneously.
+ *
+ * The input nodes are treated as immutable: every frame produces updated copies
+ * (position, `data.scale` / `data.opacity`, and `style` opacity) which are handed to
+ * `onUpdate` and finally `onComplete`. Merge them into your node state by `id`.
+ */
+declare function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(transitions: NodeTransition<TNode>[], options?: MultiNodeTransitionOptions<TNode>): () => void;
 
 /**
  * Calculates a bounding rectangle for a set of nodes if not provided by getNodesBounds.
@@ -175,9 +200,14 @@ 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.
  */
 declare function isValidCanvasNode(obj: unknown): obj is CanvasNode;
+/**
+ * Validates that an object conforms to minimal CanvasEdge shape (string `id`, `source`, `target`).
+ */
+declare function isValidCanvasEdge(obj: unknown): obj is CanvasEdge;
 /**
  * Checks if a string is a valid HTTP/HTTPS URL.
  */
@@ -192,8 +222,14 @@ declare function serializeCanvasNodes<TNode extends CanvasNode = CanvasNode, TEd
 declare function parseCanvasClipboardData<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(raw: string): CanvasClipboardPayload<TNode, TEdge> | null;
 /**
  * Generates unique new IDs for pasted nodes and updates edge references accordingly.
+ *
+ * - Nodes without a valid id / finite numeric position are skipped.
+ * - `parentId` (and legacy `parentNode`) references to other pasted nodes are remapped to
+ *   the new IDs; such children keep their parent-relative position (no extra offset).
+ *   References to parents outside the pasted set are left unchanged.
+ * - Edges are kept only when both endpoints were pasted; a non-array `edges` is ignored.
  */
-declare function remapPastedNodes<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges?: TEdge[], offset?: XYPosition, idGenerator?: () => string): {
+declare function remapPastedNodes<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges?: TEdge[] | null | undefined, offset?: XYPosition, idGenerator?: () => string): {
     nodes: TNode[];
     edges: TEdge[];
 };
@@ -213,6 +249,15 @@ interface StreamingLayoutManagerOptions {
 /**
  * Manages throttled incremental layout recalculation and smooth tweened node gliding
  * during active streaming (e.g. LLM streaming or graph generation).
+ *
+ * - `pushStreamUpdate` is a true throttle (leading + trailing edge): the first update
+ *   lays out immediately, further updates within `throttleMs` are coalesced and the
+ *   latest one is laid out when the window closes. Layouts therefore keep running at
+ *   most once per `throttleMs` while a stream is active, instead of being postponed
+ *   until the stream goes quiet.
+ * - Every layout is computed from the graph (respecting `layoutOptions.storedPositions`
+ *   as pinned/manual coordinates) and each known node glides from its *current*
+ *   position (the `currentPositions` argument) to its newly computed position.
  */
 declare class StreamingLayoutManager<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
     private throttleMs;
@@ -222,18 +267,26 @@ declare class StreamingLayoutManager<TNode extends CanvasNode = CanvasNode, TEdg
     private layoutOptions;
     private onLayoutUpdated?;
     private pendingTimer;
+    private pendingArgs;
     private activeTransitionCancel;
     private targetPositions;
+    private livePositions;
     constructor(options?: StreamingLayoutManagerOptions);
     /**
      * Feed incoming nodes and edges into the streaming manager.
-     * Coalesces rapid streaming bursts and triggers smooth layout gliding.
+     * Throttles rapid streaming bursts (leading + trailing edge) and triggers smooth layout gliding.
      */
     pushStreamUpdate(nodes: TNode[], edges: TEdge[], currentPositions: Map<string, XYPosition>): void;
+    private startWindow;
     /**
      * Forces immediate calculation and cancels pending throttled timers.
      */
     flush(nodes: TNode[], edges: TEdge[], currentPositions: Map<string, XYPosition>): void;
+    /**
+     * Latest computed layout targets (the positions nodes are gliding towards).
+     */
+    getTargetPositions(): Map<string, XYPosition>;
+    private clearPending;
     private recalculateAndGlide;
     destroy(): void;
 }
@@ -274,4 +327,4 @@ declare function blendLayout<TNode extends CanvasNode = CanvasNode>(from: TNode[
  */
 declare function connectedOnly<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges: TEdge[]): TNode[];
 
-export { CanvasClipboardPayload, CanvasEdge, type CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, type Clock, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_PLACEMENT_GAP, DirectionalDisplacementOptions, FanOutTrajectoryOptions, IncrementalLayoutOptions, ManualClock, NodeTransition, PlaceBesideOptions, Rect, ReflowDisplacementOptions, Side, StreamingLayoutManager, type StreamingLayoutManagerOptions, TrajectoryFunction, XYPosition, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canvasHeight, centerNodes, centre, computeNodesBoundingBox, connectedOnly, createBezierTrajectory, createFanOutTrajectory, defaultEasing, ensureLayout, estimateCanvasHeight, estimateNodeSize, flowSide, getCenteredNodePosition, getLayoutedNodes, isEventFromTextInput, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, overlaps, pageHidden, parseCanvasClipboardData, placeBeside, realClock, remapPastedNodes, repositionNodesTo, runMultiNodeTransition, serializeCanvasNodes };
+export { CanvasClipboardPayload, CanvasEdge, type CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeStyle, type Clock, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_PLACEMENT_GAP, DirectionalDisplacementOptions, FanOutTrajectoryOptions, IncrementalLayoutOptions, ManualClock, type MultiNodeTransitionOptions, NodeTransition, PlaceBesideOptions, Rect, ReflowDisplacementOptions, Side, StreamingLayoutManager, type StreamingLayoutManagerOptions, TrajectoryFunction, XYPosition, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canvasHeight, centerNodes, centre, computeNodesBoundingBox, connectedOnly, createBezierTrajectory, createFanOutTrajectory, defaultEasing, ensureLayout, estimateCanvasHeight, estimateNodeSize, flowSide, getCenteredNodePosition, getLayoutedNodes, isEventFromTextInput, isValidCanvasEdge, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, overlaps, pageHidden, parseCanvasClipboardData, placeBeside, realClock, remapPastedNodes, repositionNodesTo, runMultiNodeTransition, serializeCanvasNodes, withStyleOpacity };

package/dist/canvas/index.d.ts

@@ -1,5 +1,5 @@
-import { R as Rect, C as CanvasNode, X as XYPosition, a as CanvasEdge, I as IncrementalLayoutOptions, S as Side, b as CanvasLayoutOptions, P as PlaceBesideOptions, T as TrajectoryFunction, F as FanOutTrajectoryOptions, N as NodeTransition, c as ReflowDisplacementOptions, D as DirectionalDisplacementOptions, d as CanvasClipboardPayload } from '../types-DC8b2TsA.js';
-export { e as CanvasDockingCallbacks, f as CollapseNodeOptions, g as DisplacementDirection, h as DockStrategy, E as ExplodeNodeOptions, i as ExplosionSnapshot, G as GraphDifferences, j as Point, k as Position, l as TrajectoryPoint } from '../types-DC8b2TsA.js';
+import { R as Rect, C as CanvasNode, X as XYPosition, a as CanvasEdge, I as IncrementalLayoutOptions, S as Side, b as CanvasLayoutOptions, P as PlaceBesideOptions, T as TrajectoryFunction, F as FanOutTrajectoryOptions, N as NodeTransition, c as CanvasNodeStyle, d as ReflowDisplacementOptions, D as DirectionalDisplacementOptions, e as CanvasClipboardPayload } from '../types-JV3S8VeR.js';
+export { f as CanvasDockingCallbacks, g as CollapseNodeOptions, h as DisplacementDirection, i as DockStrategy, E as ExplodeNodeOptions, j as ExplosionSnapshot, G as GraphDifferences, k as Point, l as Position, m as TrajectoryPoint } from '../types-JV3S8VeR.js';
 
 declare const DEFAULT_NODE_WIDTH = 200;
 declare const DEFAULT_NODE_HEIGHT = 60;
@@ -131,15 +131,40 @@ declare function createFanOutTrajectory(options?: FanOutTrajectoryOptions): Traj
 declare function createBezierTrajectory(getControlPoint: (origin: XYPosition, target: XYPosition) => XYPosition): TrajectoryFunction;
 
 /**
- * Coordinates and animates multiple node transitions simultaneously with zero per-frame array allocations.
+ * Returns a copy of `style` with its opacity set to `opacity`.
+ *
+ * Supports both CSS strings (`"color: red; opacity: 0.5;"`, used by SvelteFlow)
+ * and style objects (`{ color: 'red', opacity: 0.5 }`, used by React Flow / xyflow).
+ * When `style` is empty, `emptyFormat` decides which representation is produced.
+ * Never mutates the input.
  */
-declare function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(transitions: NodeTransition<TNode>[], options?: {
+declare function withStyleOpacity(style: CanvasNodeStyle | undefined | null, opacity: number, emptyFormat?: 'string' | 'object'): CanvasNodeStyle;
+interface MultiNodeTransitionOptions<TNode extends CanvasNode = CanvasNode> {
     defaultDuration?: number;
     defaultEasing?: (t: number) => number;
     clock?: Clock;
-    onUpdate?: () => void;
-    onComplete?: () => void;
-}): () => void;
+    /**
+     * Style representation to create for nodes that have no `style` yet when an opacity
+     * is applied. Defaults to `'string'` (SvelteFlow); pass `'object'` for React Flow.
+     * Existing styles always keep their representation.
+     */
+    styleFormat?: 'string' | 'object';
+    /**
+     * Called on every frame with updated copies of the transitioning nodes, in the same
+     * order as the `transitions` array. Input nodes are never mutated.
+     */
+    onUpdate?: (nodes: TNode[]) => void;
+    /** Called once all transitions finished, with the final node copies. */
+    onComplete?: (nodes: TNode[]) => void;
+}
+/**
+ * Coordinates and animates multiple node transitions simultaneously.
+ *
+ * The input nodes are treated as immutable: every frame produces updated copies
+ * (position, `data.scale` / `data.opacity`, and `style` opacity) which are handed to
+ * `onUpdate` and finally `onComplete`. Merge them into your node state by `id`.
+ */
+declare function runMultiNodeTransition<TNode extends CanvasNode = CanvasNode>(transitions: NodeTransition<TNode>[], options?: MultiNodeTransitionOptions<TNode>): () => void;
 
 /**
  * Calculates a bounding rectangle for a set of nodes if not provided by getNodesBounds.
@@ -175,9 +200,14 @@ 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.
  */
 declare function isValidCanvasNode(obj: unknown): obj is CanvasNode;
+/**
+ * Validates that an object conforms to minimal CanvasEdge shape (string `id`, `source`, `target`).
+ */
+declare function isValidCanvasEdge(obj: unknown): obj is CanvasEdge;
 /**
  * Checks if a string is a valid HTTP/HTTPS URL.
  */
@@ -192,8 +222,14 @@ declare function serializeCanvasNodes<TNode extends CanvasNode = CanvasNode, TEd
 declare function parseCanvasClipboardData<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(raw: string): CanvasClipboardPayload<TNode, TEdge> | null;
 /**
  * Generates unique new IDs for pasted nodes and updates edge references accordingly.
+ *
+ * - Nodes without a valid id / finite numeric position are skipped.
+ * - `parentId` (and legacy `parentNode`) references to other pasted nodes are remapped to
+ *   the new IDs; such children keep their parent-relative position (no extra offset).
+ *   References to parents outside the pasted set are left unchanged.
+ * - Edges are kept only when both endpoints were pasted; a non-array `edges` is ignored.
  */
-declare function remapPastedNodes<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges?: TEdge[], offset?: XYPosition, idGenerator?: () => string): {
+declare function remapPastedNodes<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges?: TEdge[] | null | undefined, offset?: XYPosition, idGenerator?: () => string): {
     nodes: TNode[];
     edges: TEdge[];
 };
@@ -213,6 +249,15 @@ interface StreamingLayoutManagerOptions {
 /**
  * Manages throttled incremental layout recalculation and smooth tweened node gliding
  * during active streaming (e.g. LLM streaming or graph generation).
+ *
+ * - `pushStreamUpdate` is a true throttle (leading + trailing edge): the first update
+ *   lays out immediately, further updates within `throttleMs` are coalesced and the
+ *   latest one is laid out when the window closes. Layouts therefore keep running at
+ *   most once per `throttleMs` while a stream is active, instead of being postponed
+ *   until the stream goes quiet.
+ * - Every layout is computed from the graph (respecting `layoutOptions.storedPositions`
+ *   as pinned/manual coordinates) and each known node glides from its *current*
+ *   position (the `currentPositions` argument) to its newly computed position.
  */
 declare class StreamingLayoutManager<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge> {
     private throttleMs;
@@ -222,18 +267,26 @@ declare class StreamingLayoutManager<TNode extends CanvasNode = CanvasNode, TEdg
     private layoutOptions;
     private onLayoutUpdated?;
     private pendingTimer;
+    private pendingArgs;
     private activeTransitionCancel;
     private targetPositions;
+    private livePositions;
     constructor(options?: StreamingLayoutManagerOptions);
     /**
      * Feed incoming nodes and edges into the streaming manager.
-     * Coalesces rapid streaming bursts and triggers smooth layout gliding.
+     * Throttles rapid streaming bursts (leading + trailing edge) and triggers smooth layout gliding.
      */
     pushStreamUpdate(nodes: TNode[], edges: TEdge[], currentPositions: Map<string, XYPosition>): void;
+    private startWindow;
     /**
      * Forces immediate calculation and cancels pending throttled timers.
      */
     flush(nodes: TNode[], edges: TEdge[], currentPositions: Map<string, XYPosition>): void;
+    /**
+     * Latest computed layout targets (the positions nodes are gliding towards).
+     */
+    getTargetPositions(): Map<string, XYPosition>;
+    private clearPending;
     private recalculateAndGlide;
     destroy(): void;
 }
@@ -274,4 +327,4 @@ declare function blendLayout<TNode extends CanvasNode = CanvasNode>(from: TNode[
  */
 declare function connectedOnly<TNode extends CanvasNode = CanvasNode, TEdge extends CanvasEdge = CanvasEdge>(nodes: TNode[], edges: TEdge[]): TNode[];
 
-export { CanvasClipboardPayload, CanvasEdge, type CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, type Clock, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_PLACEMENT_GAP, DirectionalDisplacementOptions, FanOutTrajectoryOptions, IncrementalLayoutOptions, ManualClock, NodeTransition, PlaceBesideOptions, Rect, ReflowDisplacementOptions, Side, StreamingLayoutManager, type StreamingLayoutManagerOptions, TrajectoryFunction, XYPosition, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canvasHeight, centerNodes, centre, computeNodesBoundingBox, connectedOnly, createBezierTrajectory, createFanOutTrajectory, defaultEasing, ensureLayout, estimateCanvasHeight, estimateNodeSize, flowSide, getCenteredNodePosition, getLayoutedNodes, isEventFromTextInput, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, overlaps, pageHidden, parseCanvasClipboardData, placeBeside, realClock, remapPastedNodes, repositionNodesTo, runMultiNodeTransition, serializeCanvasNodes };
+export { CanvasClipboardPayload, CanvasEdge, type CanvasHeightOptions, CanvasLayoutOptions, CanvasNode, CanvasNodeStyle, type Clock, DEFAULT_NODE_HEIGHT, DEFAULT_NODE_WIDTH, DEFAULT_PLACEMENT_GAP, DirectionalDisplacementOptions, FanOutTrajectoryOptions, IncrementalLayoutOptions, ManualClock, type MultiNodeTransitionOptions, NodeTransition, PlaceBesideOptions, Rect, ReflowDisplacementOptions, Side, StreamingLayoutManager, type StreamingLayoutManagerOptions, TrajectoryFunction, XYPosition, blendLayout, boundsOf, calculateDagreReflowDisplacement, calculateDirectionalDisplacement, canvasHeight, centerNodes, centre, computeNodesBoundingBox, connectedOnly, createBezierTrajectory, createFanOutTrajectory, defaultEasing, ensureLayout, estimateCanvasHeight, estimateNodeSize, flowSide, getCenteredNodePosition, getLayoutedNodes, isEventFromTextInput, isValidCanvasEdge, isValidCanvasNode, isValidUrl, layoutBounds, linearPositionTrajectory, linearTrajectory, overlaps, pageHidden, parseCanvasClipboardData, placeBeside, realClock, remapPastedNodes, repositionNodesTo, runMultiNodeTransition, serializeCanvasNodes, withStyleOpacity };

package/dist/canvas/index.js

@@ -148,9 +148,19 @@ function createBezierTrajectory(getControlPoint) {
     };
   };
 }
+function withStyleOpacity(style, opacity, emptyFormat = "string") {
+  if (style !== null && typeof style === "object") {
+    return { ...style, opacity };
+  }
+  if (typeof style === "string" && style.trim() !== "") {
+    const rest = style.replace(/(^|;)\s*opacity\s*:\s*[^;]*;?/gi, "$1").trim().replace(/;+\s*$/, "").trim();
+    return `${rest ? rest + "; " : ""}opacity: ${opacity};`;
+  }
+  return emptyFormat === "object" ? { opacity } : `opacity: ${opacity};`;
+}
 function runMultiNodeTransition(transitions, options = {}) {
   if (transitions.length === 0) {
-    options.onComplete?.();
+    options.onComplete?.([]);
     return () => {
     };
   }
@@ -158,6 +168,7 @@ function runMultiNodeTransition(transitions, options = {}) {
     defaultDuration = 400,
     defaultEasing: easingFunc = defaultEasing,
     clock = realClock,
+    styleFormat = "string",
     onUpdate,
     onComplete
   } = options;
@@ -172,6 +183,7 @@ function runMultiNodeTransition(transitions, options = {}) {
     delay: tr.delay ?? 0,
     trajectory: tr.trajectory ?? linearTrajectory
   }));
+  const current = items.map((item) => item.node);
   function frame() {
     if (isCancelled) return;
     const now = clock.now();
@@ -186,29 +198,28 @@ 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);
-      item.node.position = { ...point.position };
+      const next = { ...item.node, position: { ...point.position } };
       if (point.scale !== void 0 || point.opacity !== void 0) {
-        if (!item.node.data) {
-          item.node.data = {};
-        }
+        const data = { ...item.node.data ?? {} };
         if (point.scale !== void 0) {
-          item.node.data.scale = point.scale;
+          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};`;
+          data.opacity = point.opacity;
+          next.style = withStyleOpacity(item.node.style, point.opacity, styleFormat);
         }
+        next.data = data;
       }
+      current[i] = next;
       if (rawProgress < 1) {
         allCompleted = false;
       }
     }
-    onUpdate?.();
+    onUpdate?.(current.slice());
     if (!allCompleted) {
       clock.frame().then(frame);
     } else {
-      onComplete?.();
+      onComplete?.(current.slice());
     }
   }
   frame();
@@ -417,7 +428,16 @@ function isEventFromTextInput(event) {
   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;
+  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 isValidCanvasEdge(obj) {
+  if (typeof obj !== "object" || obj === null) return false;
+  const candidate = obj;
+  return typeof candidate.id === "string" && typeof candidate.source === "string" && typeof candidate.target === "string";
 }
 function isValidUrl(url) {
   try {
@@ -439,28 +459,46 @@ function parseCanvasClipboardData(raw) {
   try {
     const parsed = JSON.parse(raw);
     if (typeof parsed === "object" && parsed !== null && Array.isArray(parsed.nodes) && parsed.nodes.length > 0 && parsed.nodes.every(isValidCanvasNode)) {
-      return parsed;
+      const edges = Array.isArray(parsed.edges) ? parsed.edges.filter(isValidCanvasEdge) : void 0;
+      return { ...parsed, edges };
     }
   } catch {
   }
   return null;
 }
 function remapPastedNodes(nodes, edges = [], offset = { x: 30, y: 30 }, idGenerator = () => `node-${Math.random().toString(36).substring(2, 9)}`) {
+  const validNodes = (Array.isArray(nodes) ? nodes : []).filter(isValidCanvasNode);
+  const validEdges = (Array.isArray(edges) ? edges : []).filter(isValidCanvasEdge);
+  const dx = Number.isFinite(offset?.x) ? offset.x : 0;
+  const dy = Number.isFinite(offset?.y) ? offset.y : 0;
   const idMap = /* @__PURE__ */ new Map();
-  const newNodes = nodes.map((node) => {
-    const newId = idGenerator();
-    idMap.set(node.id, newId);
-    return {
+  for (const node of validNodes) {
+    idMap.set(node.id, idGenerator());
+  }
+  const newNodes = validNodes.map((node) => {
+    const next = {
       ...node,
-      id: newId,
+      id: idMap.get(node.id),
       position: {
-        x: node.position.x + offset.x,
-        y: node.position.y + offset.y
+        x: node.position.x + dx,
+        y: node.position.y + dy
       },
       selected: true
     };
+    let parentRemapped = false;
+    for (const key of ["parentId", "parentNode"]) {
+      const parent = node[key];
+      if (typeof parent === "string" && idMap.has(parent)) {
+        next[key] = idMap.get(parent);
+        parentRemapped = true;
+      }
+    }
+    if (parentRemapped) {
+      next.position = { x: node.position.x, y: node.position.y };
+    }
+    return next;
   });
-  const newEdges = edges.filter((e) => idMap.has(e.source) && idMap.has(e.target)).map((edge) => ({
+  const newEdges = validEdges.filter((e) => idMap.has(e.source) && idMap.has(e.target)).map((edge) => ({
     ...edge,
     id: `edge-${Math.random().toString(36).substring(2, 9)}`,
     source: idMap.get(edge.source),
@@ -557,8 +595,10 @@ var StreamingLayoutManager = class {
   layoutOptions;
   onLayoutUpdated;
   pendingTimer = null;
+  pendingArgs = null;
   activeTransitionCancel = null;
   targetPositions = /* @__PURE__ */ new Map();
+  livePositions = /* @__PURE__ */ new Map();
   constructor(options = {}) {
     this.throttleMs = options.throttleMs ?? 200;
     this.glideDurationMs = options.glideDurationMs ?? 300;
@@ -569,52 +609,70 @@ var StreamingLayoutManager = class {
   }
   /**
    * Feed incoming nodes and edges into the streaming manager.
-   * Coalesces rapid streaming bursts and triggers smooth layout gliding.
+   * Throttles rapid streaming bursts (leading + trailing edge) and triggers smooth layout gliding.
    */
   pushStreamUpdate(nodes, edges, currentPositions) {
-    if (this.pendingTimer) {
-      clearTimeout(this.pendingTimer);
+    if (this.pendingTimer !== null) {
+      this.pendingArgs = [nodes, edges, currentPositions];
+      return;
     }
+    this.recalculateAndGlide(nodes, edges, currentPositions);
+    this.startWindow();
+  }
+  startWindow() {
     this.pendingTimer = setTimeout(() => {
       this.pendingTimer = null;
-      this.recalculateAndGlide(nodes, edges, currentPositions);
-    }, this.throttleMs);
+      const args = this.pendingArgs;
+      this.pendingArgs = null;
+      if (args) {
+        this.recalculateAndGlide(...args);
+        this.startWindow();
+      }
+    }, Math.max(0, this.throttleMs));
   }
   /**
    * Forces immediate calculation and cancels pending throttled timers.
    */
   flush(nodes, edges, currentPositions) {
-    if (this.pendingTimer) {
+    this.clearPending();
+    this.recalculateAndGlide(nodes, edges, currentPositions);
+  }
+  /**
+   * Latest computed layout targets (the positions nodes are gliding towards).
+   */
+  getTargetPositions() {
+    return new Map(this.targetPositions);
+  }
+  clearPending() {
+    if (this.pendingTimer !== null) {
       clearTimeout(this.pendingTimer);
       this.pendingTimer = null;
     }
-    this.recalculateAndGlide(nodes, edges, currentPositions);
+    this.pendingArgs = null;
   }
   recalculateAndGlide(nodes, edges, currentPositions) {
     const targetNodes = this.connectedOnly ? connectedOnly(nodes, edges) : nodes;
     if (targetNodes.length === 0) return;
+    const startPositions = new Map(currentPositions);
     if (this.activeTransitionCancel) {
+      for (const [id, pos] of this.livePositions) {
+        startPositions.set(id, pos);
+      }
       this.activeTransitionCancel();
       this.activeTransitionCancel = null;
     }
-    const stored = {};
-    for (const [id, pos] of currentPositions.entries()) {
-      stored[id] = pos;
-    }
-    const layouted = ensureLayout(targetNodes, edges, {
-      ...this.layoutOptions,
-      storedPositions: stored
-    });
+    const layouted = ensureLayout(targetNodes, edges, this.layoutOptions);
     const nextPositions = /* @__PURE__ */ new Map();
     const transitions = [];
     for (const node of layouted) {
-      const target = node.position;
+      const target = { ...node.position };
       nextPositions.set(node.id, target);
-      const current = currentPositions.get(node.id) ?? target;
+      const current = startPositions.get(node.id);
+      if (!current) continue;
       const distance = Math.hypot(target.x - current.x, target.y - current.y);
       if (distance > 2) {
         transitions.push({
-          node,
+          node: { ...node, position: { ...current } },
           from: current,
           to: target,
           trajectory: linearPositionTrajectory,
@@ -623,30 +681,38 @@ var StreamingLayoutManager = class {
       }
     }
     this.targetPositions = nextPositions;
-    if (transitions.length > 0) {
-      this.activeTransitionCancel = runMultiNodeTransition(transitions, {
-        clock: this.clock,
-        onUpdate: () => {
-          const liveMap = new Map(currentPositions);
-          for (const trans of transitions) {
-            liveMap.set(trans.node.id, { ...trans.node.position });
-          }
-          this.onLayoutUpdated?.(liveMap);
-        },
-        onComplete: () => {
-          this.activeTransitionCancel = null;
-          this.onLayoutUpdated?.(nextPositions);
-        }
-      });
-    } else {
+    if (transitions.length === 0) {
+      this.livePositions = new Map(nextPositions);
       this.onLayoutUpdated?.(nextPositions);
+      return;
     }
+    const live = new Map(nextPositions);
+    for (const trans of transitions) {
+      live.set(trans.node.id, { ...trans.from });
+    }
+    this.livePositions = live;
+    let finished = false;
+    const cancel = runMultiNodeTransition(transitions, {
+      clock: this.clock,
+      onUpdate: (updated) => {
+        const frame = new Map(this.livePositions);
+        for (const node of updated) {
+          frame.set(node.id, { ...node.position });
+        }
+        this.livePositions = frame;
+        this.onLayoutUpdated?.(frame);
+      },
+      onComplete: () => {
+        finished = true;
+        this.activeTransitionCancel = null;
+        this.livePositions = new Map(nextPositions);
+        this.onLayoutUpdated?.(nextPositions);
+      }
+    });
+    this.activeTransitionCancel = finished ? null : cancel;
   }
   destroy() {
-    if (this.pendingTimer) {
-      clearTimeout(this.pendingTimer);
-      this.pendingTimer = null;
-    }
+    this.clearPending();
     if (this.activeTransitionCancel) {
       this.activeTransitionCancel();
       this.activeTransitionCancel = null;
@@ -678,6 +744,7 @@ export {
   getCenteredNodePosition,
   getLayoutedNodes,
   isEventFromTextInput,
+  isValidCanvasEdge,
   isValidCanvasNode,
   isValidUrl,
   layoutBounds,
@@ -691,6 +758,7 @@ export {
   remapPastedNodes,
   repositionNodesTo,
   runMultiNodeTransition,
-  serializeCanvasNodes
+  serializeCanvasNodes,
+  withStyleOpacity
 };
 //# sourceMappingURL=index.js.map