@flowdrop/flowdrop 2.0.0-beta.4 → 2.0.0-beta.5

package/dist/components/nodes/SimpleNode.svelte

@@ -26,12 +26,12 @@
   import NodeConfigButton from './NodeConfigButton.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
 
-  const props = $props<{
+  interface Props {
+    id: string;
     data: {
       label: string;
       config: ConfigValues;
       metadata: NodeMetadata;
-      nodeId?: string;
       extensions?: NodeExtensions;
       onConfigOpen?: (node: {
         id: string;
@@ -42,7 +42,9 @@
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-  }>();
+  }
+
+  let props: Props = $props();
 
   const fd = getInstance();
   const checker = fd.portCompatibility;
@@ -93,7 +95,7 @@
     if (props.data.onConfigOpen) {
       // Create a WorkflowNodeType-like object for the global ConfigSidebar
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'simple',
         data: props.data
       };
@@ -132,7 +134,7 @@
         hiddenPorts,
         hideUnconnectedHandles,
         fd.workflow.connectedHandles,
-        props.data.nodeId
+        props.id
       )
     )
   );
@@ -151,7 +153,7 @@
         hiddenPorts,
         hideUnconnectedHandles,
         fd.workflow.connectedHandles,
-        props.data.nodeId
+        props.id
       )
     )
   );
@@ -179,7 +181,7 @@
       index,
       visibleInputPorts.length
     )}px; transform: translateY(-50%); z-index: 30;"
-    id={`${props.data.nodeId}-input-${port.id}`}
+    id={`${props.id}-input-${port.id}`}
   />
 {/each}
 
@@ -251,7 +253,7 @@
       index,
       visibleOutputPorts.length
     )}px; transform: translateY(-50%); z-index: 30;"
-    id={`${props.data.nodeId}-output-${port.id}`}
+    id={`${props.id}-output-${port.id}`}
   />
 {/each}
 

package/dist/components/nodes/SimpleNode.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
-type $$ComponentProps = {
+interface Props {
+    id: string;
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
-        nodeId?: string;
         extensions?: NodeExtensions;
         onConfigOpen?: (node: {
             id: string;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-};
-declare const SimpleNode: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const SimpleNode: import("svelte").Component<Props, {}, "">;
 type SimpleNode = ReturnType<typeof SimpleNode>;
 export default SimpleNode;

package/dist/components/nodes/SquareNode.svelte

@@ -27,12 +27,12 @@
   import NodeConfigButton from './NodeConfigButton.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
 
-  const props = $props<{
+  interface Props {
+    id: string;
     data: {
       label: string;
       config: ConfigValues;
       metadata: NodeMetadata;
-      nodeId?: string;
       extensions?: NodeExtensions;
       onConfigOpen?: (node: {
         id: string;
@@ -43,7 +43,9 @@
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-  }>();
+  }
+
+  let props: Props = $props();
 
   const fd = getInstance();
   const checker = fd.portCompatibility;
@@ -84,7 +86,7 @@
     if (props.data.onConfigOpen) {
       // Create a WorkflowNodeType-like object for the global ConfigSidebar
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'square',
         data: props.data
       };
@@ -128,7 +130,7 @@
         hiddenPorts,
         hideUnconnectedHandles,
         fd.workflow.connectedHandles,
-        props.data.nodeId
+        props.id
       )
     )
   );
@@ -147,7 +149,7 @@
         hiddenPorts,
         hideUnconnectedHandles,
         fd.workflow.connectedHandles,
-        props.data.nodeId
+        props.id
       )
     )
   );
@@ -176,7 +178,7 @@
       index,
       visibleInputPorts.length
     )}px; transform: translateY(-50%); z-index: 30;"
-    id={`${props.data.nodeId}-input-${port.id}`}
+    id={`${props.id}-input-${port.id}`}
   />
 {/each}
 
@@ -242,7 +244,7 @@
       index,
       visibleOutputPorts.length
     )}px; transform: translateY(-50%); z-index: 30;"
-    id={`${props.data.nodeId}-output-${port.id}`}
+    id={`${props.id}-output-${port.id}`}
   />
 {/each}
 

package/dist/components/nodes/SquareNode.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
-type $$ComponentProps = {
+interface Props {
+    id: string;
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
-        nodeId?: string;
         extensions?: NodeExtensions;
         onConfigOpen?: (node: {
             id: string;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-};
-declare const SquareNode: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const SquareNode: import("svelte").Component<Props, {}, "">;
 type SquareNode = ReturnType<typeof SquareNode>;
 export default SquareNode;

package/dist/components/nodes/TerminalNode.svelte

@@ -66,12 +66,12 @@
     }
   };
 
-  const props = $props<{
+  interface Props {
+    id: string;
     data: {
       label: string;
       config: ConfigValues;
       metadata: NodeMetadata;
-      nodeId?: string;
       extensions?: NodeExtensions;
       onConfigOpen?: (node: {
         id: string;
@@ -82,7 +82,9 @@
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-  }>();
+  }
+
+  let props: Props = $props();
 
   const fd = getInstance();
   const checker = fd.portCompatibility;
@@ -111,7 +113,7 @@
     }
 
     // Check metadata id/name for hints
-    const idLower = (props.data.metadata?.id || '').toLowerCase();
+    const idLower = (props.data.metadata?.node_type_id || '').toLowerCase();
     const nameLower = (props.data.metadata?.name || '').toLowerCase();
     if (idLower.includes('start') || nameLower.includes('start')) {
       return 'start';
@@ -159,7 +161,7 @@
     if (port.required) {
       return true;
     }
-    const handleId = `${props.data.nodeId}-${type}-${port.id}`;
+    const handleId = `${props.id}-${type}-${port.id}`;
     return fd.workflow.connectedHandles.has(handleId);
   }
 
@@ -298,7 +300,7 @@
   function openConfigSidebar(): void {
     if (props.data.onConfigOpen) {
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'terminal',
         data: props.data
       };
@@ -346,7 +348,7 @@
             checker,
             port.dataType
           )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
-          id={`${props.data.nodeId}-input-${port.id}`}
+          id={`${props.id}-input-${port.id}`}
         />
       {/each}
     {/if}
@@ -365,7 +367,7 @@
         <Handle
           type="source"
           position={Position.Right}
-          id={`${props.data.nodeId}-output-${port.id}`}
+          id={`${props.id}-output-${port.id}`}
           style="--fd-handle-fill: {getDataTypeColor(
             checker,
             port.dataType

package/dist/components/nodes/TerminalNode.svelte.d.ts

@@ -1,10 +1,10 @@
 import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
-type $$ComponentProps = {
+interface Props {
+    id: string;
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
-        nodeId?: string;
         extensions?: NodeExtensions;
         onConfigOpen?: (node: {
             id: string;
@@ -19,7 +19,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-};
-declare const TerminalNode: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const TerminalNode: import("svelte").Component<Props, {}, "">;
 type TerminalNode = ReturnType<typeof TerminalNode>;
 export default TerminalNode;

package/dist/components/nodes/ToolNode.svelte

@@ -9,7 +9,7 @@
   import Icon from '@iconify/svelte';
   import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors';
   import { getInstance } from '../../stores/getInstance.svelte.js';
-  import type { NodeMetadata, NodePort } from '../../types/index.js';
+  import type { ConfigValues, NodeMetadata, NodePort } from '../../types/index.js';
   import NodeConfigButton from './NodeConfigButton.svelte';
   import AlertCircleIcon from '../icons/AlertCircleIcon.svelte';
 
@@ -19,10 +19,11 @@
     description?: string;
   }
 
-  const props = $props<{
+  interface Props {
+    id: string;
     data: {
       label: string;
-      config: {
+      config: ConfigValues & {
         icon?: string;
         color?: string;
         toolName?: string;
@@ -31,7 +32,6 @@
         parameters?: ToolNodeParameter[];
       };
       metadata: NodeMetadata;
-      nodeId?: string;
       onConfigOpen?: (node: {
         id: string;
         type: string;
@@ -45,7 +45,9 @@
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-  }>();
+  }
+
+  let props: Props = $props();
 
   const fd = getInstance();
   const checker = fd.portCompatibility;
@@ -142,7 +144,7 @@
     if (props.data.onConfigOpen) {
       // Create a WorkflowNodeType-like object for the global ConfigSidebar
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'tool',
         data: props.data
       };
@@ -163,7 +165,7 @@
   <Handle
     type="target"
     position={Position.Left}
-    id={`${props.data.nodeId}-input-${toolInputPort.id}`}
+    id={`${props.id}-input-${toolInputPort.id}`}
     style="top: {firstPortTop}px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
       checker,
       portDataType
@@ -239,7 +241,7 @@
   <Handle
     type="source"
     position={Position.Right}
-    id={`${props.data.nodeId}-output-${toolOutputPort.id}`}
+    id={`${props.id}-output-${toolOutputPort.id}`}
     style="top: {firstPortTop}px; transform: translateY(-50%); z-index: 30; --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
       checker,
       portDataType

package/dist/components/nodes/ToolNode.svelte.d.ts

@@ -1,13 +1,14 @@
-import type { NodeMetadata } from '../../types/index.js';
+import type { ConfigValues, NodeMetadata } from '../../types/index.js';
 interface ToolNodeParameter {
     name: string;
     type?: string;
     description?: string;
 }
-type $$ComponentProps = {
+interface Props {
+    id: string;
     data: {
         label: string;
-        config: {
+        config: ConfigValues & {
             icon?: string;
             color?: string;
             toolName?: string;
@@ -16,7 +17,6 @@ type $$ComponentProps = {
             parameters?: ToolNodeParameter[];
         };
         metadata: NodeMetadata;
-        nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;
@@ -30,7 +30,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-};
-declare const ToolNode: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const ToolNode: import("svelte").Component<Props, {}, "">;
 type ToolNode = ReturnType<typeof ToolNode>;
 export default ToolNode;

package/dist/components/nodes/WorkflowNode.svelte

@@ -27,8 +27,8 @@
   import { m } from '../../messages/index.js';
 
   interface Props {
+    id: string;
     data: WorkflowNode['data'] & {
-      nodeId?: string;
       onConfigOpen?: (node: { id: string; type: string; data: WorkflowNode['data'] }) => void;
     };
     selected?: boolean;
@@ -147,7 +147,7 @@
     }
 
     // Check if port is connected
-    const handleId = `${props.data.nodeId}-${type}-${port.id}`;
+    const handleId = `${props.id}-${type}-${port.id}`;
     return fd.workflow.connectedHandles.has(handleId);
   }
 
@@ -179,7 +179,7 @@
     if (props.data.onConfigOpen) {
       // Create a WorkflowNodeType-like object for the global ConfigSidebar
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'workflowNode',
         data: props.data
       };
@@ -201,7 +201,7 @@
   }}
   data-handle-interaction={isHandleInteraction}
   aria-label={graph.workflowNode({ name: props.data.metadata.name })}
-  aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
+  aria-describedby="node-description-{props.id}"
 >
   <!-- Default Node Header: expands in multiples of 10 (title row 40px + gap 10px + description 20px per line) -->
   <div class="flowdrop-workflow-node__header">
@@ -231,10 +231,7 @@
       <div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center"></div>
     </div>
     <!-- Node Description - line-height 20px so header grows in steps of 10 -->
-    <p
-      class="flowdrop-workflow-node__header-desc"
-      id="node-description-{props.data.nodeId || 'unknown'}"
-    >
+    <p class="flowdrop-workflow-node__header-desc" id="node-description-{props.id}">
       {displayDescription}
     </p>
   </div>
@@ -249,7 +246,7 @@
             <Handle
               type="target"
               position={Position.Left}
-              id={`${props.data.nodeId}-input-${port.id}`}
+              id={`${props.id}-input-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 checker,
@@ -330,7 +327,7 @@
             <Handle
               type="source"
               position={Position.Right}
-              id={`${props.data.nodeId}-output-${port.id}`}
+              id={`${props.id}-output-${port.id}`}
               class="flowdrop-workflow-node__handle"
               style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColorToken(
                 checker,

package/dist/components/nodes/WorkflowNode.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { WorkflowNode } from '../../types/index.js';
 interface Props {
+    id: string;
     data: WorkflowNode['data'] & {
-        nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;

package/dist/components/playground/PipelineKanbanView.svelte

@@ -108,7 +108,7 @@
       nodesByColumn.get(colKey)?.push({
         key: job.id,
         label: job.label || node.data.label,
-        typeId: node.data.metadata.id,
+        typeId: node.data.metadata.node_type_id,
         status,
         durationUs: job.executionTimeUs
       });
@@ -122,7 +122,7 @@
       nodesByColumn.get(colKey)?.push({
         key: node.id,
         label: node.data.label,
-        typeId: node.data.metadata.id,
+        typeId: node.data.metadata.node_type_id,
         status
       });
     }

package/dist/components/playground/PipelineTableView.svelte

@@ -111,7 +111,7 @@
       jobRows.push({
         key: job.id,
         label: job.label || node.data.label,
-        typeId: node.data.metadata.id,
+        typeId: node.data.metadata.node_type_id,
         nodeId: job.nodeId,
         status: resolveStatus({ status: job.status }),
         started: job.started,
@@ -137,7 +137,7 @@
         return {
           key: node.id,
           label: node.data.label,
-          typeId: node.data.metadata.id,
+          typeId: node.data.metadata.node_type_id,
           nodeId: node.id,
           status: resolveStatus(statusData),
           started: statusData?.last_executed,

package/dist/helpers/workflowEditorHelper.js

@@ -63,7 +63,7 @@ export class NodeOperationsHelper {
             // Use fallback sample nodes
             return [
                 {
-                    id: 'text-input',
+                    node_type_id: 'text-input',
                     name: 'Text Input',
                     category: 'inputs',
                     description: 'Simple text input field',
@@ -73,7 +73,7 @@ export class NodeOperationsHelper {
                     outputs: [{ id: 'text', name: 'text', type: 'output', dataType: 'string' }]
                 },
                 {
-                    id: 'text-output',
+                    node_type_id: 'text-output',
                     name: 'Text Output',
                     category: 'outputs',
                     description: 'Display text output',
@@ -128,7 +128,7 @@ export class NodeOperationsHelper {
                 };
             }
             // Generate node ID based on node type and existing nodes
-            const newNodeId = generateNodeId(nodeType.id, existingNodes);
+            const newNodeId = generateNodeId(nodeType.node_type_id, existingNodes);
             // All nodes use "universalNode" type
             // UniversalNode component handles internal switching based on metadata and config
             const newNode = {
@@ -137,8 +137,7 @@ export class NodeOperationsHelper {
                 position, // Use the position calculated from the drop event
                 deletable: true,
                 data: {
-                    ...nodeData,
-                    nodeId: newNodeId // Use the same ID
+                    ...nodeData
                 }
             };
             return newNode;

package/dist/registry/nodeComponentRegistry.d.ts

@@ -16,9 +16,10 @@ import { BaseRegistry } from './BaseRegistry.svelte.js';
  * Any component registered in the registry must be compatible with these props.
  */
 export interface NodeComponentProps {
+    /** The SvelteFlow node id */
+    id: string;
     /** Node data containing label, config, metadata, executionInfo */
     data: WorkflowNode['data'] & {
-        nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;

package/dist/services/dynamicSchemaService.d.ts

@@ -33,7 +33,7 @@ export interface DynamicSchemaResult {
  * const endpoint: DynamicSchemaEndpoint = {
  *   url: "/api/nodes/{nodeTypeId}/schema",
  *   method: "GET",
- *   parameterMapping: { nodeTypeId: "metadata.id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id" }
  * };
  *
  * const result = await fetchDynamicSchema(endpoint, node);
@@ -56,7 +56,7 @@ export declare function fetchDynamicSchema(endpointConfig: EndpointConfig | null
  * ```typescript
  * const link: ExternalEditLink = {
  *   url: "https://admin.example.com/nodes/{nodeTypeId}/edit/{instanceId}",
- *   parameterMapping: { nodeTypeId: "metadata.id", instanceId: "id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id", instanceId: "id" }
  * };
  *
  * const url = resolveExternalEditUrl(link, node, workflowId);

package/dist/services/dynamicSchemaService.js

@@ -15,16 +15,16 @@ const schemaCache = new Map();
 const DEFAULT_CACHE_TTL = DEFAULT_CACHE_TTL_MS;
 /**
  * Resolves a template variable path from the node context.
- * Supports dot-notation paths like "metadata.id", "config.apiKey", "id"
+ * Supports dot-notation paths like "metadata.node_type_id", "config.apiKey", "id"
  *
  * @param context - The node context containing all available data
- * @param path - Dot-notation path to resolve (e.g., "metadata.id")
+ * @param path - Dot-notation path to resolve (e.g., "metadata.node_type_id")
  * @returns The resolved value as a string, or undefined if not found
  *
  * @example
  * ```typescript
- * const context = { id: "node-1", metadata: { id: "llm-node" } };
- * resolveVariablePath(context, "metadata.id"); // Returns "llm-node"
+ * const context = { id: "node-1", metadata: { node_type_id: "llm-node" } };
+ * resolveVariablePath(context, "metadata.node_type_id"); // Returns "llm-node"
  * resolveVariablePath(context, "id"); // Returns "node-1"
  * ```
  */
@@ -60,8 +60,8 @@ function resolveVariablePath(context, path) {
  * @example
  * ```typescript
  * const url = "/api/nodes/{nodeTypeId}/schema?instance={instanceId}";
- * const mapping = { nodeTypeId: "metadata.id", instanceId: "id" };
- * const context = { id: "node-1", metadata: { id: "llm-node" } };
+ * const mapping = { nodeTypeId: "metadata.node_type_id", instanceId: "id" };
+ * const context = { id: "node-1", metadata: { node_type_id: "llm-node" } };
  * resolveTemplate(url, mapping, context);
  * // Returns "/api/nodes/llm-node/schema?instance=node-1"
  * ```
@@ -127,7 +127,7 @@ function isCacheValid(entry, ttl = DEFAULT_CACHE_TTL) {
  * const endpoint: DynamicSchemaEndpoint = {
  *   url: "/api/nodes/{nodeTypeId}/schema",
  *   method: "GET",
- *   parameterMapping: { nodeTypeId: "metadata.id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id" }
  * };
  *
  * const result = await fetchDynamicSchema(endpoint, node);
@@ -279,7 +279,7 @@ export async function fetchDynamicSchema(endpointConfig, endpoint, node, workflo
  * ```typescript
  * const link: ExternalEditLink = {
  *   url: "https://admin.example.com/nodes/{nodeTypeId}/edit/{instanceId}",
- *   parameterMapping: { nodeTypeId: "metadata.id", instanceId: "id" }
+ *   parameterMapping: { nodeTypeId: "metadata.node_type_id", instanceId: "id" }
  * };
  *
  * const url = resolveExternalEditUrl(link, node, workflowId);

package/dist/stores/playgroundStore.svelte.js

@@ -212,7 +212,7 @@ export class PlaygroundStore {
         // Find input nodes in the workflow
         workflow.nodes.forEach((node) => {
             const category = node.data.metadata?.category;
-            const nodeTypeId = node.data.metadata?.id ?? node.type;
+            const nodeTypeId = node.data.metadata?.node_type_id ?? node.type;
             // Check if this is an input-type node
             // The category can be "inputs" (standard) or variations like "input"
             const categoryStr = String(category || '');

package/dist/stores/workflowStore.svelte.js

@@ -94,23 +94,6 @@ function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
     }
     return false;
 }
-/**
- * Heal nodes that are missing `data.nodeId`.
- *
- * Node components derive their handle IDs from `data.nodeId` — a node without
- * it renders with zero handles and SvelteFlow silently drops every edge
- * anchored to it, making an intact graph look corrupted on the canvas.
- * `data.nodeId` always equals the node's own `id`, so it is safe to restore.
- */
-function healMissingNodeIds(workflow) {
-    if (!workflow.nodes?.some((node) => !node.data.nodeId)) {
-        return workflow;
-    }
-    return {
-        ...workflow,
-        nodes: workflow.nodes.map((node) => node.data.nodeId ? node : { ...node, data: { ...node.data, nodeId: node.id } })
-    };
-}
 // =========================================================================
 // WorkflowStore (per-instance reactive state)
 // =========================================================================
@@ -373,7 +356,6 @@ export class WorkflowStore {
      */
     initialize(workflow) {
         workflow = normalizeWorkflowMetadata(workflow);
-        workflow = healMissingNodeIds(workflow);
         this.#workflow = workflow;
         // Reset version counters — workflow is "clean" after initialization
         this.#editVersion = 0;