@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/components/WorkflowEditor.svelte

@@ -21,12 +21,7 @@
     getEditorSettings,
     getBehaviorSettings
   } from '../stores/settingsStore.svelte.js';
-  import type {
-    WorkflowNode as WorkflowNodeType,
-    NodeMetadata,
-    Workflow,
-    WorkflowEdge
-  } from '../types/index.js';
+  import type { WorkflowNode as WorkflowNodeType, Workflow, WorkflowEdge } from '../types/index.js';
   import CanvasBanner from './CanvasBanner.svelte';
   import CanvasController from './CanvasController.svelte';
   import FlowDropZone from './FlowDropZone.svelte';
@@ -36,8 +31,8 @@
   import ConnectionLine from './ConnectionLine.svelte';
   import FlowDropEdge from './FlowDropEdge.svelte';
   import { m } from '../messages/index.js';
-  import { getWorkflowStore, workflowActions } from '../stores/workflowStore.svelte.js';
-  import { historyActions, setOnRestoreCallback } from '../stores/historyStore.svelte.js';
+  import { provideInstance } from '../stores/getInstance.svelte.js';
+  import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
   import UniversalNode from './UniversalNode.svelte';
   import {
     EdgeStylingHelper,
@@ -57,34 +52,50 @@
     type ProximityEdgeCandidate
   } from '../helpers/proximityConnect.js';
   import PortCoordinateTracker from './PortCoordinateTracker.svelte';
-  import { getPortCoordinateSnapshot } from '../stores/portCoordinateStore.svelte.js';
   import { logger } from '../utils/logger.js';
   import { validateWorkflowData } from '../utils/validation.js';
   import { createEditorStateMachine } from '../stores/editorStateMachine.svelte.js';
   import Icon from '@iconify/svelte';
+  import { DEV } from 'esm-env';
 
   interface Props {
-    nodes?: NodeMetadata[];
     endpointConfig?: EndpointConfig;
-    height?: string | number;
-    width?: string | number;
-    isConfigSidebarOpen?: boolean;
-    selectedNodeForConfig?: WorkflowNodeType | null;
     openConfigSidebar?: (node: WorkflowNodeType) => void;
-    closeConfigSidebar?: () => void;
-    // New configuration options for pipeline status mode
-    lockWorkflow?: boolean;
-    readOnly?: boolean;
-    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    /**
+     * Editor interaction mode. `'edit'` allows node drag/connect/select and
+     * proximity-connect; `'readonly'` and `'locked'` disable all canvas
+     * editing (they behave identically today — see App's `mode` prop for the
+     * full matrix). Replaces the former `readOnly` + `lockWorkflow` booleans.
+     * @default 'edit'
+     */
+    mode?: 'edit' | 'readonly' | 'locked';
     // Pipeline ID for fetching node execution info from jobs
     pipelineId?: string;
+    /**
+     * Increments to force a re-fetch of node execution info from the server.
+     * Used by parents (e.g. PipelineStatus) to push poll ticks / chat-message
+     * arrivals down to the canvas without owning a separate status channel.
+     */
+    refreshTrigger?: number;
     // Console toggle
     consoleOpen?: boolean;
     onToggleConsole?: () => void;
+    /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
+    instance?: FlowDropInstance;
   }
 
   let props: Props = $props();
 
+  // Resolve (and provide to children) the per-instance state container.
+  // Must run during component init — provideInstance reads/sets Svelte context.
+  // The instance never changes for a mounted component, so capturing it once is correct.
+  // svelte-ignore state_referenced_locally
+  const fd = provideInstance(props.instance);
+
+  // `mode` is the public API; the canvas only needs to know whether editing is
+  // enabled. 'readonly' and 'locked' both disable interaction identically.
+  const canvasEditable = $derived((props.mode ?? 'edit') === 'edit');
+
   // ---------------------------------------------------------------------------
   // Editor State Machine
   // Centralizes reactive guards — replaces scattered boolean flags
@@ -93,7 +104,7 @@
   const machine = createEditorStateMachine();
 
   // Dev-mode transition logging
-  if (import.meta.env?.DEV) {
+  if (DEV) {
     machine.onTransition((from, event, to) => {
       logger.debug(`[EditorFSM] ${from} --${event}--> ${to}`);
     });
@@ -122,7 +133,7 @@
    * Key for SvelteFlow component — changes when workflow ID changes.
    * Forces SvelteFlow to remount with fresh state, allowing fitView to work correctly.
    */
-  let svelteFlowKey = $derived(getWorkflowStore()?.id ?? 'default');
+  let svelteFlowKey = $derived(fd.workflow.current?.id ?? 'default');
 
   /**
    * Derive snap grid configuration from editor settings
@@ -164,14 +175,14 @@
   // Helper: sync current flowNodes/flowEdges back to the global store
   // ---------------------------------------------------------------------------
   function syncFlowToStore(): void {
-    const storeValue = untrack(() => getWorkflowStore());
+    const storeValue = untrack(() => fd.workflow.current);
     if (!storeValue) return;
     const updatedWorkflow = WorkflowOperationsHelper.updateWorkflow(
       storeValue,
       flowNodes,
       flowEdges
     );
-    workflowActions.updateWorkflow(updatedWorkflow);
+    fd.workflow.updateWorkflow(updatedWorkflow);
   }
 
   // ---------------------------------------------------------------------------
@@ -182,7 +193,7 @@
   let previousSyncedWorkflowId: string | null = null;
 
   $effect(() => {
-    const storeValue = getWorkflowStore();
+    const storeValue = fd.workflow.current;
 
     // Suppressed during operations — handlers write to flowNodes directly
     if (untrack(() => machine.permissions.suppressEffect)) return;
@@ -228,7 +239,7 @@
   let previousExecPipelineId: string | undefined = undefined;
 
   $effect(() => {
-    const storeValue = getWorkflowStore();
+    const storeValue = fd.workflow.current;
     const pipelineId = props.pipelineId;
 
     if (!storeValue || !pipelineId) return;
@@ -241,15 +252,12 @@
     previousExecWorkflowId = storeValue.id;
     previousExecPipelineId = pipelineId;
 
-    // Cancel any pending timeout / in-flight request
+    // Cancel any pending idle/timeout schedule. In-flight fetches are
+    // cancelled by loadNodeExecutionInfo() itself when it's re-entered.
     if (loadExecutionInfoTimeout) {
       clearTimeout(loadExecutionInfoTimeout);
       loadExecutionInfoTimeout = null;
     }
-    if (executionInfoAbortController) {
-      executionInfoAbortController.abort();
-      executionInfoAbortController = null;
-    }
 
     // Schedule loading with requestIdleCallback (falls back to setTimeout)
     if (typeof requestIdleCallback !== 'undefined') {
@@ -266,44 +274,26 @@
     }
   });
 
-  // Apply nodeStatuses from the parent (PipelineStatus embedded mode) to flowNodes
-  // whenever they change. loadNodeExecutionInfo() only fires on pipelineId change,
-  // so this is the update path for subsequent refreshes (e.g. after HITL resolution).
+  // Re-fetch node execution info when the parent bumps refreshTrigger
+  // (poll ticks, chat-message arrivals, manual refresh). loadNodeExecutionInfo()
+  // is the single writer of executionInfo on flowNodes — no parallel channel.
+  // svelte-ignore state_referenced_locally
+  let _prevExecRefreshTrigger = props.refreshTrigger ?? 0;
   $effect(() => {
-    const statuses = props.nodeStatuses;
-    if (!statuses || Object.keys(statuses).length === 0) return;
-
-    flowNodes = untrack(() => flowNodes).map((node) => {
-      const rawStatus = statuses[node.id];
-      if (!rawStatus) return node;
-
-      const existing = node.data.executionInfo ?? {
-        status: 'idle' as const,
-        executionCount: 0,
-        isExecuting: false
-      };
-      return {
-        ...node,
-        data: {
-          ...node.data,
-          executionInfo: {
-            ...existing,
-            status: rawStatus === 'error' ? ('failed' as const) : rawStatus,
-            isExecuting: rawStatus === 'running'
-          }
-        }
-      };
-    });
+    const t = props.refreshTrigger ?? 0;
+    if (t === 0 || t === _prevExecRefreshTrigger) return;
+    _prevExecRefreshTrigger = t;
+    loadNodeExecutionInfo();
   });
 
   // ---------------------------------------------------------------------------
   // History restore callback
   // ---------------------------------------------------------------------------
   $effect(() => {
-    setOnRestoreCallback((restoredWorkflow: Workflow) => {
+    fd.historyBindings.setOnRestoreCallback((restoredWorkflow: Workflow) => {
       machine.send('START_RESTORE');
       // Update the store (effect is suppressed during 'restoring')
-      workflowActions.restoreFromHistory(restoredWorkflow);
+      fd.workflow.restoreFromHistory(restoredWorkflow);
       // Derive flowNodes/flowEdges directly for immediate visual update
       const derived = buildFlowNodesFromStore(restoredWorkflow);
       flowNodes = derived.nodes;
@@ -314,26 +304,38 @@
     });
 
     return () => {
-      setOnRestoreCallback(null);
+      // Reinstate the container's default wiring rather than nulling it: the
+      // default instance survives unmount, and a bare null would make legacy
+      // historyActions.undo() silently restore nothing afterwards.
+      fd.historyBindings.setOnRestoreCallback((restored: Workflow) =>
+        fd.workflow.restoreFromHistory(restored)
+      );
     };
   });
 
   /**
-   * Load node execution information for all nodes in the workflow
+   * Load node execution information for all nodes in the workflow.
+   * Cancels any in-flight fetch so concurrent callers (pipelineId change
+   * and refreshTrigger bumps) can't race on flowNodes.
    */
   async function loadNodeExecutionInfo(): Promise<void> {
-    const workflow = untrack(() => getWorkflowStore());
+    const workflow = untrack(() => fd.workflow.current);
     if (!workflow?.nodes || !props.pipelineId) return;
 
-    try {
-      executionInfoAbortController = new AbortController();
+    if (executionInfoAbortController) {
+      executionInfoAbortController.abort();
+    }
+    const controller = new AbortController();
+    executionInfoAbortController = controller;
 
+    try {
       const executionInfo = await NodeOperationsHelper.loadNodeExecutionInfo(
+        fd.api,
         workflow,
         props.pipelineId
       );
 
-      if (executionInfoAbortController?.signal.aborted) return;
+      if (controller.signal.aborted) return;
 
       const defaultExecutionInfo: NodeExecutionInfo = {
         status: 'idle' as const,
@@ -350,7 +352,9 @@
         }
       }));
 
-      executionInfoAbortController = null;
+      if (executionInfoAbortController === controller) {
+        executionInfoAbortController = null;
+      }
     } catch (error) {
       if (error instanceof Error && error.name !== 'AbortError') {
         logger.error('Failed to load node execution info:', error);
@@ -401,12 +405,7 @@
     nodes: WorkflowNodeType[];
     event: MouseEvent | TouchEvent;
   }): void {
-    if (
-      !getEditorSettings().proximityConnect ||
-      !targetNode ||
-      props.readOnly ||
-      props.lockWorkflow
-    ) {
+    if (!getEditorSettings().proximityConnect || !targetNode || !canvasEditable) {
       if (currentProximityCandidates.length > 0) {
         flowEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
         currentProximityCandidates = [];
@@ -422,16 +421,18 @@
     const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
 
     // Find the best compatible edge using port-to-port distance
-    const portCoordinates = getPortCoordinateSnapshot();
+    const portCoordinates = fd.portCoordinates.coordinates;
     const candidates =
       portCoordinates.size > 0
         ? ProximityConnectHelper.findCompatibleEdgesByPortCoordinates(
+            fd.portCompatibility,
             targetNode.id,
             portCoordinates,
             baseEdges,
             getEditorSettings().proximityConnectDistance
           )
         : ProximityConnectHelper.findCompatibleEdges(
+            fd.portCompatibility,
             targetNode,
             flowNodes,
             baseEdges,
@@ -478,9 +479,9 @@
     syncFlowToStore();
 
     // Push history AFTER the drag completed
-    const storeValue = getWorkflowStore();
+    const storeValue = fd.workflow.current;
     if (storeValue) {
-      workflowActions.pushHistory('Move node', storeValue);
+      fd.workflow.pushHistory('Move node', storeValue);
     }
 
     // Transition to idle — sync effect is now unblocked
@@ -488,14 +489,11 @@
   }
 
   /**
-   * Handle new connections between nodes
+   * Handle new connections between nodes.
+   * The connection details aren't needed — SvelteFlow auto-creates the edge
+   * via bind:edges; this only drives the state machine and history snapshot.
    */
-  async function handleConnect(connection: {
-    source: string;
-    target: string;
-    sourceHandle?: string;
-    targetHandle?: string;
-  }): Promise<void> {
+  async function handleConnect(): Promise<void> {
     machine.send('START_CONNECT');
 
     // SvelteFlow auto-creates the edge via bind:edges — wait for DOM update
@@ -507,9 +505,9 @@
     // Sync to store
     syncFlowToStore();
 
-    const storeValue = getWorkflowStore();
+    const storeValue = fd.workflow.current;
     if (storeValue) {
-      workflowActions.pushHistory('Add connection', storeValue);
+      fd.workflow.pushHistory('Add connection', storeValue);
     }
 
     machine.send('CONNECTION_MADE');
@@ -585,9 +583,9 @@
     } else if (edgeCount > 0) {
       description = `Delete ${edgeCount} connection${edgeCount > 1 ? 's' : ''}`;
     }
-    const storeValue = getWorkflowStore();
+    const storeValue = fd.workflow.current;
     if (storeValue) {
-      workflowActions.pushHistory(description, storeValue);
+      fd.workflow.pushHistory(description, storeValue);
     }
 
     machine.send('DELETE_COMPLETE');
@@ -598,7 +596,7 @@
   // Configure endpoints when props change
   $effect(() => {
     if (props.endpointConfig) {
-      ConfigurationHelper.configureEndpoints(props.endpointConfig);
+      ConfigurationHelper.configureEndpoints(fd.api, props.endpointConfig);
     }
   });
 
@@ -635,9 +633,9 @@
 
       await tick();
 
-      const storeValue = getWorkflowStore();
+      const storeValue = fd.workflow.current;
       if (storeValue) {
-        workflowActions.pushHistory('Add node', storeValue);
+        fd.workflow.pushHistory('Add node', storeValue);
       }
     } else {
       logger.warn('Failed to create node from drop data');
@@ -667,7 +665,7 @@
           logger.warn('Workflow file drop validation failed:', validation.error);
           return;
         }
-        workflowActions.initialize(data as Workflow);
+        fd.workflow.initialize(data as Workflow);
       } catch (error) {
         const errorObj = error instanceof Error ? error : new Error('Unknown error occurred');
         logger.error('Workflow file drop import failed:', errorObj);
@@ -693,7 +691,7 @@
   /**
    * Update a node's data in the local editor state.
    * Called by App.svelte AFTER it has already updated the global store via
-   * workflowActions.updateNode(). We only need to update flowNodes for
+   * fd.workflow.updateNode(). We only need to update flowNodes for
    * immediate visual feedback — no store sync needed.
    *
    * @param nodeId - The ID of the node to update
@@ -774,15 +772,15 @@
    * - Ctrl+Z (or Cmd+Z on Mac): Undo
    * - Ctrl+Shift+Z (or Cmd+Shift+Z): Redo
    * - Ctrl+Y (or Cmd+Y): Redo (Windows convention)
+   *
+   * Also suppresses WebKit's legacy default action for Backspace outside
+   * editable content — history back-navigation. SvelteFlow's KeyHandler
+   * deletes the selected elements on Backspace but never preventDefaults,
+   * so in embedded WebKit the page navigates away mid-delete. Scoped to
+   * keydowns originating inside the flow canvas so host-page behavior
+   * outside the editor is untouched.
    */
   function handleKeydown(event: KeyboardEvent): void {
-    // Check for Ctrl (Windows/Linux) or Cmd (Mac)
-    const isModifierPressed = event.ctrlKey || event.metaKey;
-
-    if (!isModifierPressed) {
-      return;
-    }
-
     // Don't handle shortcuts if user is typing in an input, textarea, or contenteditable
     const target = event.target as HTMLElement;
     const isInputElement =
@@ -792,17 +790,31 @@
       return;
     }
 
+    // Backspace/Delete on a canvas element: let SvelteFlow handle the
+    // deletion, but block the browser default (WebKit navigates back).
+    if ((event.key === 'Backspace' || event.key === 'Delete') && target.closest('.svelte-flow')) {
+      event.preventDefault();
+      return;
+    }
+
+    // Check for Ctrl (Windows/Linux) or Cmd (Mac)
+    const isModifierPressed = event.ctrlKey || event.metaKey;
+
+    if (!isModifierPressed) {
+      return;
+    }
+
     // Undo: Ctrl+Z (without Shift)
     if (event.key === 'z' && !event.shiftKey) {
       event.preventDefault();
-      historyActions.undo();
+      fd.historyBindings.undo();
       return;
     }
 
     // Redo: Ctrl+Shift+Z or Ctrl+Y
     if ((event.key === 'z' && event.shiftKey) || event.key === 'y') {
       event.preventDefault();
-      historyActions.redo();
+      fd.historyBindings.redo();
       return;
     }
   }
@@ -832,18 +844,13 @@
         <FlowDropZone ondrop={handleNodeDrop} onfiledrop={handleWorkflowFileDrop}>
           {#key svelteFlowKey}
             <SvelteFlow
+              id={fd.id}
               bind:nodes={flowNodes}
               bind:edges={flowEdges}
               {nodeTypes}
               {edgeTypes}
               {defaultEdgeOptions}
-              onconnect={(connection) =>
-                void handleConnect({
-                  source: connection.source,
-                  target: connection.target,
-                  sourceHandle: connection.sourceHandle ?? undefined,
-                  targetHandle: connection.targetHandle ?? undefined
-                })}
+              onconnect={() => void handleConnect()}
               onbeforedelete={handleBeforeDelete}
               ondelete={handleNodesDelete}
               onnodedragstart={handleNodeDragStart}
@@ -859,12 +866,12 @@
               {initialViewport}
               colorMode={getResolvedTheme() as ColorMode}
               fitView={getEditorSettings().fitViewOnLoad}
-              nodesDraggable={!props.lockWorkflow && !props.readOnly}
-              nodesConnectable={!props.lockWorkflow && !props.readOnly}
-              elementsSelectable={!props.lockWorkflow && !props.readOnly}
+              nodesDraggable={canvasEditable}
+              nodesConnectable={canvasEditable}
+              elementsSelectable={canvasEditable}
             >
               <Controls />
-              {#if !props.readOnly && !props.lockWorkflow && props.onToggleConsole}
+              {#if canvasEditable && props.onToggleConsole}
                 <button
                   class="flowdrop-console-toggle"
                   class:flowdrop-console-toggle--active={props.consoleOpen}

package/dist/components/WorkflowEditor.svelte.d.ts

@@ -1,21 +1,29 @@
 import '@xyflow/svelte/dist/style.css';
-import type { WorkflowNode as WorkflowNodeType, NodeMetadata } from '../types/index.js';
+import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
 interface Props {
-    nodes?: NodeMetadata[];
     endpointConfig?: EndpointConfig;
-    height?: string | number;
-    width?: string | number;
-    isConfigSidebarOpen?: boolean;
-    selectedNodeForConfig?: WorkflowNodeType | null;
     openConfigSidebar?: (node: WorkflowNodeType) => void;
-    closeConfigSidebar?: () => void;
-    lockWorkflow?: boolean;
-    readOnly?: boolean;
-    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    /**
+     * Editor interaction mode. `'edit'` allows node drag/connect/select and
+     * proximity-connect; `'readonly'` and `'locked'` disable all canvas
+     * editing (they behave identically today — see App's `mode` prop for the
+     * full matrix). Replaces the former `readOnly` + `lockWorkflow` booleans.
+     * @default 'edit'
+     */
+    mode?: 'edit' | 'readonly' | 'locked';
     pipelineId?: string;
+    /**
+     * Increments to force a re-fetch of node execution info from the server.
+     * Used by parents (e.g. PipelineStatus) to push poll ticks / chat-message
+     * arrivals down to the canvas without owning a separate status channel.
+     */
+    refreshTrigger?: number;
     consoleOpen?: boolean;
     onToggleConsole?: () => void;
+    /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
+    instance?: FlowDropInstance;
 }
 declare const WorkflowEditor: import("svelte").Component<Props, {
     updateNodeData: (nodeId: string, dataUpdates: Partial<WorkflowNodeType["data"]>) => void;