@runfusion/fusion 0.22.0 → 0.24.0

package/dist/plugins/fusion-plugin-dependency-graph/src/hooks/useGraphPositions.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useState } from "react";
+import { clearPositions, loadPositions, savePositions, type NodePositions } from "../utils/graphPositionStorage";
+
+function filterVisiblePositions(positions: NodePositions, visibleTaskIds: Set<string>): NodePositions {
+  const filtered: NodePositions = {};
+  for (const [taskId, position] of Object.entries(positions)) {
+    if (visibleTaskIds.has(taskId)) {
+      filtered[taskId] = position;
+    }
+  }
+  return filtered;
+}
+
+export function useGraphPositions({
+  projectId,
+  visibleTaskIds,
+}: {
+  projectId: string | undefined;
+  visibleTaskIds: Set<string>;
+}): {
+  savedPositions: NodePositions | null;
+  persistPositions: (positions: NodePositions) => void;
+  clearSavedPositions: () => void;
+} {
+  const [savedPositions, setSavedPositions] = useState<NodePositions | null>(null);
+
+  useEffect(() => {
+    setSavedPositions(loadPositions(projectId));
+  }, [projectId]);
+
+  const persistPositions = useCallback(
+    (positions: NodePositions) => {
+      savePositions(positions, visibleTaskIds, projectId);
+      setSavedPositions(filterVisiblePositions(positions, visibleTaskIds));
+    },
+    [projectId, visibleTaskIds],
+  );
+
+  const clearSavedPositions = useCallback(() => {
+    clearPositions(projectId);
+    setSavedPositions(null);
+  }, [projectId]);
+
+  return { savedPositions, persistPositions, clearSavedPositions };
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/hooks/useNodeDrag.ts

@@ -0,0 +1,114 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { MouseEvent as ReactMouseEvent, PointerEvent as ReactPointerEvent } from "react";
+import type { GraphPosition } from "../types";
+
+const DRAG_THRESHOLD_PX = 4;
+
+interface UseNodeDragOptions {
+  taskId: string;
+  position: GraphPosition;
+  scale: number;
+  onPositionChange: (taskId: string, position: GraphPosition) => void;
+  onDragStateChange?: (isDragging: boolean) => void;
+  onDragEnd?: () => void;
+}
+
+interface PendingState {
+  pointerId: number;
+  startPointer: { x: number; y: number };
+  startPosition: GraphPosition;
+}
+
+export function useNodeDrag({ taskId, position, scale, onPositionChange, onDragStateChange, onDragEnd }: UseNodeDragOptions) {
+  const [isDragging, setIsDragging] = useState(false);
+  const pendingRef = useRef<PendingState | null>(null);
+  const positionRef = useRef(position);
+  const suppressClickRef = useRef(false);
+
+  positionRef.current = position;
+
+  const endDrag = useCallback((dragging: boolean) => {
+    pendingRef.current = null;
+    setIsDragging(false);
+    if (dragging) {
+      onDragStateChange?.(false);
+      onDragEnd?.();
+      suppressClickRef.current = true;
+    }
+  }, [onDragEnd, onDragStateChange]);
+
+  const onPointerDown = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    if (!event.isPrimary) return;
+    event.stopPropagation();
+    const currentTarget = event.currentTarget;
+    if (typeof currentTarget.setPointerCapture === "function") {
+      currentTarget.setPointerCapture(event.pointerId);
+    }
+    pendingRef.current = {
+      pointerId: event.pointerId,
+      startPointer: { x: event.clientX, y: event.clientY },
+      startPosition: positionRef.current,
+    };
+  }, []);
+
+  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    const pending = pendingRef.current;
+    if (!pending || pending.pointerId !== event.pointerId) return;
+    event.stopPropagation();
+
+    const deltaX = event.clientX - pending.startPointer.x;
+    const deltaY = event.clientY - pending.startPointer.y;
+    const distance = Math.hypot(deltaX, deltaY);
+
+    if (!isDragging && distance >= DRAG_THRESHOLD_PX) {
+      setIsDragging(true);
+      onDragStateChange?.(true);
+    }
+
+    if (distance < DRAG_THRESHOLD_PX) return;
+
+    const safeScale = scale > 0 ? scale : 1;
+    onPositionChange(taskId, {
+      x: pending.startPosition.x + deltaX / safeScale,
+      y: pending.startPosition.y + deltaY / safeScale,
+    });
+  }, [isDragging, onDragStateChange, onPositionChange, scale, taskId]);
+
+  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    const pending = pendingRef.current;
+    if (!pending || pending.pointerId !== event.pointerId) return;
+    event.stopPropagation();
+    if (typeof event.currentTarget.hasPointerCapture === "function" && event.currentTarget.hasPointerCapture(event.pointerId) && typeof event.currentTarget.releasePointerCapture === "function") {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    endDrag(isDragging);
+  }, [endDrag, isDragging]);
+
+  const onPointerCancel = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    const pending = pendingRef.current;
+    if (!pending || pending.pointerId !== event.pointerId) return;
+    event.stopPropagation();
+    if (typeof event.currentTarget.hasPointerCapture === "function" && event.currentTarget.hasPointerCapture(event.pointerId) && typeof event.currentTarget.releasePointerCapture === "function") {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    endDrag(isDragging);
+  }, [endDrag, isDragging]);
+
+  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLElement>) => {
+    if (!suppressClickRef.current) return;
+    suppressClickRef.current = false;
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  return useMemo(() => ({
+    isDragging,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    onClickCapture,
+  }), [isDragging, onClickCapture, onPointerCancel, onPointerDown, onPointerMove, onPointerUp]);
+}
+
+export const __internal = { DRAG_THRESHOLD_PX };

package/dist/plugins/fusion-plugin-dependency-graph/src/index.ts

@@ -13,7 +13,7 @@ const plugin = definePlugin({
     {
       viewId: "graph",
       label: "Graph",
-      componentPath: "./src/DependencyGraphView.tsx",
+      componentPath: "./dashboard-view",
       icon: "Network",
       placement: "more",
       order: 40,
@@ -22,4 +22,3 @@ const plugin = definePlugin({
 });
 
 export default plugin;
-export { DependencyGraphView } from "./DependencyGraphView";

package/dist/plugins/fusion-plugin-dependency-graph/src/layout.ts

@@ -0,0 +1,91 @@
+import type { GraphData, GraphPosition } from "./types";
+
+export interface LayoutOptions {
+  nodeWidth?: number;
+  nodeHeight?: number;
+  horizontalGap?: number;
+  verticalGap?: number;
+}
+
+const DEFAULT_LAYOUT_OPTIONS: Required<LayoutOptions> = {
+  nodeWidth: 280,
+  nodeHeight: 100,
+  horizontalGap: 40,
+  verticalGap: 80,
+};
+
+export function computeAutoLayout(
+  graphData: GraphData,
+  options?: LayoutOptions,
+): Map<string, GraphPosition> {
+  const settings = { ...DEFAULT_LAYOUT_OPTIONS, ...options };
+  const nodeIds = graphData.nodes.map((node) => node.task.id);
+  if (nodeIds.length === 0) return new Map();
+
+  const dependentsByDependency = new Map<string, string[]>();
+  const inDegree = new Map<string, number>();
+
+  for (const id of nodeIds) {
+    inDegree.set(id, 0);
+    dependentsByDependency.set(id, []);
+  }
+
+  for (const edge of graphData.edges) {
+    if (!inDegree.has(edge.source) || !inDegree.has(edge.target)) continue;
+    dependentsByDependency.get(edge.target)?.push(edge.source);
+    inDegree.set(edge.source, (inDegree.get(edge.source) ?? 0) + 1);
+  }
+
+  const queue = nodeIds.filter((id) => (inDegree.get(id) ?? 0) === 0);
+  const topologicalOrder: string[] = [];
+
+  while (queue.length > 0) {
+    const current = queue.shift()!;
+    topologicalOrder.push(current);
+    for (const dependent of dependentsByDependency.get(current) ?? []) {
+      const nextInDegree = (inDegree.get(dependent) ?? 0) - 1;
+      inDegree.set(dependent, nextInDegree);
+      if (nextInDegree === 0) queue.push(dependent);
+    }
+  }
+
+  for (const id of nodeIds) {
+    if (!topologicalOrder.includes(id)) topologicalOrder.push(id);
+  }
+
+  const depthByNode = new Map<string, number>();
+  for (const id of topologicalOrder) {
+    const parents = graphData.edges.filter((edge) => edge.source === id).map((edge) => edge.target);
+    let depth = 0;
+    for (const parent of parents) {
+      depth = Math.max(depth, (depthByNode.get(parent) ?? 0) + 1);
+    }
+    depthByNode.set(id, depth);
+  }
+
+  const layers = new Map<number, string[]>();
+  for (const id of nodeIds) {
+    const depth = depthByNode.get(id) ?? 0;
+    const layer = layers.get(depth) ?? [];
+    layer.push(id);
+    layers.set(depth, layer);
+  }
+
+  const positions = new Map<string, GraphPosition>();
+  const sortedDepths = Array.from(layers.keys()).sort((a, b) => a - b);
+
+  for (const depth of sortedDepths) {
+    const layer = layers.get(depth) ?? [];
+    layer.sort();
+    const layerWidth = layer.length * settings.nodeWidth + Math.max(0, layer.length - 1) * settings.horizontalGap;
+    const startX = -layerWidth / 2;
+
+    layer.forEach((id, index) => {
+      const x = startX + index * (settings.nodeWidth + settings.horizontalGap);
+      const y = depth * (settings.nodeHeight + settings.verticalGap);
+      positions.set(id, { x, y });
+    });
+  }
+
+  return positions;
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/styles/drag.css

@@ -0,0 +1,15 @@
+.graph-node--draggable {
+  cursor: grab;
+  touch-action: none;
+}
+
+.graph-node--dragging {
+  z-index: 3;
+  cursor: grabbing;
+  box-shadow: var(--shadow-lg);
+  transform: scale(1.02);
+  transition:
+    transform var(--transition-fast),
+    box-shadow var(--transition-fast),
+    z-index var(--transition-fast);
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/types.ts

@@ -0,0 +1,21 @@
+import type { Task } from "@fusion/core";
+
+export interface GraphPosition {
+  x: number;
+  y: number;
+}
+
+export interface GraphNode {
+  task: Task;
+  position?: GraphPosition;
+}
+
+export interface GraphEdge {
+  source: string;
+  target: string;
+}
+
+export interface GraphData {
+  nodes: GraphNode[];
+  edges: GraphEdge[];
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/useGraphData.ts

@@ -0,0 +1,17 @@
+import { useMemo } from "react";
+import type { Task } from "@fusion/core";
+import type { GraphData, GraphNode } from "./types";
+
+export function useGraphData(tasks: Task[]): GraphData {
+  return useMemo(() => {
+    const nodes: GraphNode[] = tasks.map((task) => ({ task }));
+    const taskIds = new Set(tasks.map((task) => task.id));
+    const edges = tasks.flatMap((task) =>
+      (task.dependencies ?? [])
+        .filter((dependencyId) => taskIds.has(dependencyId))
+        .map((dependencyId) => ({ source: task.id, target: dependencyId })),
+    );
+
+    return { nodes, edges };
+  }, [tasks]);
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/useGraphInteraction.ts

@@ -0,0 +1,292 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { KeyboardEvent as ReactKeyboardEvent } from "react";
+import type { LayoutOptions } from "./layout";
+import type { GraphPosition } from "./types";
+
+const MIN_ZOOM = 0.1;
+const MAX_ZOOM = 3;
+const FIT_PADDING = 40;
+const TRANSITION_TIMEOUT_MS = 200;
+
+interface PointerPoint {
+  x: number;
+  y: number;
+}
+
+interface PinchState {
+  distance: number;
+  zoom: number;
+  pan: PointerPoint;
+  midpoint: PointerPoint;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false;
+  const tagName = target.tagName.toLowerCase();
+  return target.isContentEditable || tagName === "input" || tagName === "textarea" || tagName === "select";
+}
+
+export function useGraphInteraction() {
+  const [pan, setPan] = useState<PointerPoint>({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [transitioning, setTransitioning] = useState(false);
+
+  const panRef = useRef(pan);
+  const zoomRef = useRef(zoom);
+  const transitionTimerRef = useRef<number | null>(null);
+  const dragStateRef = useRef<{ start: PointerPoint; panStart: PointerPoint } | null>(null);
+  const pointersRef = useRef<Map<number, PointerPoint>>(new Map());
+  const pinchRef = useRef<PinchState | null>(null);
+
+  useEffect(() => {
+    panRef.current = pan;
+  }, [pan]);
+
+  useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+
+  useEffect(() => () => {
+    if (transitionTimerRef.current !== null) {
+      window.clearTimeout(transitionTimerRef.current);
+    }
+  }, []);
+
+  const transform = useMemo(() => `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`, [pan.x, pan.y, zoom]);
+  const zoomPercent = useMemo(() => Math.round(zoom * 100), [zoom]);
+
+  const setAnimate = useCallback((enabled: boolean) => {
+    if (!enabled) {
+      if (transitionTimerRef.current !== null) {
+        window.clearTimeout(transitionTimerRef.current);
+        transitionTimerRef.current = null;
+      }
+      setTransitioning(false);
+      return;
+    }
+
+    setTransitioning(true);
+    if (transitionTimerRef.current !== null) {
+      window.clearTimeout(transitionTimerRef.current);
+    }
+    transitionTimerRef.current = window.setTimeout(() => {
+      setTransitioning(false);
+      transitionTimerRef.current = null;
+    }, TRANSITION_TIMEOUT_MS);
+  }, []);
+
+  const clampPan = useCallback((nextPan: PointerPoint, viewportWidth: number, viewportHeight: number) => ({
+    x: clamp(nextPan.x, -viewportWidth, viewportWidth),
+    y: clamp(nextPan.y, -viewportHeight, viewportHeight),
+  }), []);
+
+  const zoomAtPoint = useCallback((
+    nextZoomRaw: number,
+    anchor: PointerPoint,
+    viewportWidth: number,
+    viewportHeight: number,
+  ) => {
+    const currentZoom = zoomRef.current;
+    const currentPan = panRef.current;
+    const nextZoom = clamp(nextZoomRaw, MIN_ZOOM, MAX_ZOOM);
+    const scaleRatio = nextZoom / currentZoom;
+
+    const nextPan = clampPan({
+      x: anchor.x - (anchor.x - currentPan.x) * scaleRatio,
+      y: anchor.y - (anchor.y - currentPan.y) * scaleRatio,
+    }, viewportWidth, viewportHeight);
+
+    setZoom(nextZoom);
+    setPan(nextPan);
+  }, [clampPan]);
+
+  const zoomByFactor = useCallback((factor: number, viewportWidth: number, viewportHeight: number, anchor?: PointerPoint) => {
+    setAnimate(false);
+    const point = anchor ?? { x: viewportWidth / 2, y: viewportHeight / 2 };
+    zoomAtPoint(zoomRef.current * factor, point, viewportWidth, viewportHeight);
+  }, [setAnimate, zoomAtPoint]);
+
+  const zoomIn = useCallback((viewportWidth?: number, viewportHeight?: number) => {
+    if (viewportWidth && viewportHeight) {
+      zoomByFactor(1.2, viewportWidth, viewportHeight);
+      return;
+    }
+    setZoom((current) => clamp(current + 0.1, MIN_ZOOM, MAX_ZOOM));
+  }, [zoomByFactor]);
+
+  const zoomOut = useCallback((viewportWidth?: number, viewportHeight?: number) => {
+    if (viewportWidth && viewportHeight) {
+      zoomByFactor(1 / 1.2, viewportWidth, viewportHeight);
+      return;
+    }
+    setZoom((current) => clamp(current - 0.1, MIN_ZOOM, MAX_ZOOM));
+  }, [zoomByFactor]);
+
+  const resetView = useCallback(() => {
+    setAnimate(true);
+    setPan({ x: 0, y: 0 });
+    setZoom(1);
+  }, [setAnimate]);
+
+  const fitToGraph = useCallback((
+    positions: Map<string, GraphPosition>,
+    viewportWidth: number,
+    viewportHeight: number,
+    layoutOptions?: LayoutOptions,
+  ) => {
+    setAnimate(true);
+    if (positions.size === 0) {
+      setPan({ x: 0, y: 0 });
+      setZoom(1);
+      return;
+    }
+
+    const nodeWidth = layoutOptions?.nodeWidth ?? 280;
+    const nodeHeight = layoutOptions?.nodeHeight ?? 100;
+
+    const entries = Array.from(positions.values());
+    const minX = Math.min(...entries.map((p) => p.x));
+    const minY = Math.min(...entries.map((p) => p.y));
+    const maxX = Math.max(...entries.map((p) => p.x + nodeWidth));
+    const maxY = Math.max(...entries.map((p) => p.y + nodeHeight));
+
+    const graphWidth = Math.max(1, maxX - minX);
+    const graphHeight = Math.max(1, maxY - minY);
+    const availableWidth = Math.max(1, viewportWidth - FIT_PADDING * 2);
+    const availableHeight = Math.max(1, viewportHeight - FIT_PADDING * 2);
+    const nextZoom = clamp(Math.min(availableWidth / graphWidth, availableHeight / graphHeight), MIN_ZOOM, MAX_ZOOM);
+
+    const panX = (viewportWidth - graphWidth * nextZoom) / 2 - minX * nextZoom;
+    const panY = (viewportHeight - graphHeight * nextZoom) / 2 - minY * nextZoom;
+
+    setZoom(nextZoom);
+    setPan(clampPan({ x: panX, y: panY }, viewportWidth, viewportHeight));
+  }, [clampPan, setAnimate]);
+
+  const onPointerDown = useCallback((pointerId: number, point: PointerPoint) => {
+    pointersRef.current.set(pointerId, point);
+    if (pointersRef.current.size === 2) {
+      const [a, b] = Array.from(pointersRef.current.values());
+      pinchRef.current = {
+        distance: Math.hypot(a.x - b.x, a.y - b.y),
+        zoom: zoomRef.current,
+        pan: panRef.current,
+        midpoint: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+      };
+      dragStateRef.current = null;
+      return;
+    }
+    dragStateRef.current = { start: point, panStart: panRef.current };
+  }, []);
+
+  const onPointerMove = useCallback((pointerId: number, point: PointerPoint, viewportWidth: number, viewportHeight: number) => {
+    if (pointersRef.current.has(pointerId)) pointersRef.current.set(pointerId, point);
+
+    if (pointersRef.current.size >= 2 && pinchRef.current) {
+      setAnimate(false);
+      const [a, b] = Array.from(pointersRef.current.values());
+      const distance = Math.hypot(a.x - b.x, a.y - b.y);
+      const factor = distance / Math.max(1, pinchRef.current.distance);
+      const midpoint = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+      const nextZoom = clamp(pinchRef.current.zoom * factor, MIN_ZOOM, MAX_ZOOM);
+      const ratio = nextZoom / pinchRef.current.zoom;
+      const nextPan = clampPan({
+        x: midpoint.x - (pinchRef.current.midpoint.x - pinchRef.current.pan.x) * ratio,
+        y: midpoint.y - (pinchRef.current.midpoint.y - pinchRef.current.pan.y) * ratio,
+      }, viewportWidth, viewportHeight);
+      setZoom(nextZoom);
+      setPan(nextPan);
+      return;
+    }
+
+    const dragState = dragStateRef.current;
+    if (!dragState) return;
+    setAnimate(false);
+    const nextPan = {
+      x: dragState.panStart.x + (point.x - dragState.start.x),
+      y: dragState.panStart.y + (point.y - dragState.start.y),
+    };
+    setPan(clampPan(nextPan, viewportWidth, viewportHeight));
+  }, [clampPan, setAnimate]);
+
+  const onPointerUp = useCallback((pointerId: number) => {
+    pointersRef.current.delete(pointerId);
+    if (pointersRef.current.size < 2) pinchRef.current = null;
+    if (pointersRef.current.size === 0) dragStateRef.current = null;
+  }, []);
+
+  const onWheelZoom = useCallback((
+    deltaY: number,
+    point: PointerPoint,
+    viewportWidth: number,
+    viewportHeight: number,
+  ) => {
+    const factor = deltaY < 0 ? 1.1 : 0.9;
+    setAnimate(false);
+    zoomAtPoint(zoomRef.current * factor, point, viewportWidth, viewportHeight);
+  }, [setAnimate, zoomAtPoint]);
+
+  const handleKeyDown = useCallback((
+    event: ReactKeyboardEvent,
+    viewportWidth: number,
+    viewportHeight: number,
+    positions: Map<string, GraphPosition>,
+    layoutOptions?: LayoutOptions,
+  ) => {
+    if (isEditableTarget(event.target)) return;
+
+    const modifier = event.metaKey || event.ctrlKey;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      resetView();
+      return;
+    }
+
+    if (!modifier) return;
+
+    if (event.key === "=" || event.key === "+") {
+      event.preventDefault();
+      zoomByFactor(1.2, viewportWidth, viewportHeight);
+      return;
+    }
+
+    if (event.key === "-") {
+      event.preventDefault();
+      zoomByFactor(1 / 1.2, viewportWidth, viewportHeight);
+      return;
+    }
+
+    if (event.key === "0") {
+      event.preventDefault();
+      resetView();
+      return;
+    }
+
+    if ((event.key === "f" || event.key === "F") && event.shiftKey) {
+      event.preventDefault();
+      fitToGraph(positions, viewportWidth, viewportHeight, layoutOptions);
+    }
+  }, [fitToGraph, resetView, zoomByFactor]);
+
+  return {
+    pan,
+    zoom,
+    zoomPercent,
+    transform,
+    transitioning,
+    zoomIn,
+    zoomOut,
+    resetView,
+    fitToGraph,
+    setAnimate,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onWheelZoom,
+    handleKeyDown,
+  };
+}

package/dist/plugins/fusion-plugin-dependency-graph/src/utils/graphPositionStorage.ts

@@ -0,0 +1,65 @@
+import { getScopedItem, removeScopedItem, setScopedItem } from "@fusion/dashboard/app/utils/projectStorage";
+
+export type NodePositions = Record<string, { x: number; y: number }>;
+
+const STORAGE_KEY = "fusion-plugin-dependency-graph:positions";
+
+function isPosition(value: unknown): value is { x: number; y: number } {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as { x?: unknown; y?: unknown };
+  return typeof candidate.x === "number" && Number.isFinite(candidate.x) && typeof candidate.y === "number" && Number.isFinite(candidate.y);
+}
+
+export function loadPositions(projectId?: string): NodePositions {
+  const raw = getScopedItem(STORAGE_KEY, projectId);
+  if (!raw) return {};
+
+  try {
+    const parsed = JSON.parse(raw) as Record<string, unknown>;
+    if (!parsed || typeof parsed !== "object") return {};
+
+    const result: NodePositions = {};
+    for (const [taskId, value] of Object.entries(parsed)) {
+      if (isPosition(value)) {
+        result[taskId] = value;
+      }
+    }
+
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+export function savePositions(positions: NodePositions, visibleTaskIds: Set<string>, projectId?: string): void {
+  const filtered: NodePositions = {};
+  for (const [taskId, position] of Object.entries(positions)) {
+    if (visibleTaskIds.has(taskId) && isPosition(position)) {
+      filtered[taskId] = position;
+    }
+  }
+
+  setScopedItem(STORAGE_KEY, JSON.stringify(filtered), projectId);
+}
+
+export function clearPositions(projectId?: string): void {
+  removeScopedItem(STORAGE_KEY, projectId);
+}
+
+export function mergePositions(autoLayoutPositions: NodePositions, savedPositions: NodePositions, visibleTaskIds: Set<string>): NodePositions {
+  const merged: NodePositions = {};
+
+  for (const [taskId, position] of Object.entries(autoLayoutPositions)) {
+    if (visibleTaskIds.has(taskId) && isPosition(position)) {
+      merged[taskId] = position;
+    }
+  }
+
+  for (const [taskId, position] of Object.entries(savedPositions)) {
+    if (visibleTaskIds.has(taskId) && isPosition(position)) {
+      merged[taskId] = position;
+    }
+  }
+
+  return merged;
+}