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

package/CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.0.0-beta.5] - 2026-06-20
+
+Fifth 2.0 beta, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). `latest` remains 1.15.0 until 2.0.0 GA. This release is a node-identity cleanup: node components now derive their instance id from the canonical `id` prop SvelteFlow already passes, dropping the duplicate `data.nodeId` copy and its load-time healing, and the node-_type_ entity id is renamed `metadata.id` → `metadata.node_type_id` to disambiguate it from the instance id. Six node components were also moved off the type-erasing `$props<T>()` onto a typed `interface Props`, which surfaced and fixed latent config-access errors in `ToolNode`.
+
+### Breaking Changes
+
+- **Node-type entity id renamed `metadata.id` → `metadata.node_type_id`.** The node-type entity id collided conceptually with the node _instance_ id; it is now `metadata.node_type_id` to disambiguate the two. It is a server-owned wire field, so the library preserves the snake_case name as a non-opinionated passthrough — adapters, the command type-map, connection validation, and the dynamic-schema paths were all updated to match. Consumers reading `metadata.id` for the node type must read `metadata.node_type_id`.
+- **Dropped the duplicate `data.nodeId` field.** Node components now derive their id from the canonical `id` prop that SvelteFlow already passes to every node, instead of a copy stored in `data.nodeId`. Handle ids, config-open callbacks, and status overlays read `id` directly. The field and its load-time "healing" are gone, so an intact graph can no longer look corrupted from a missing copy.
+
+### Changed (internal — no API change)
+
+- **Six node components typed properly.** The node components that used `$props<T>()` — which returns `any` and silently disabled type-checking — now declare an `interface Props` with `let props: Props = $props()`. This surfaced and fixed latent config-access errors in `ToolNode`.
+
 ## [2.0.0-beta.4] - 2026-06-13
 
 Fourth 2.0 beta, published under the npm `beta` dist-tag (`npm install @flowdrop/flowdrop@beta`). `latest` remains 1.15.0 until 2.0.0 GA. This release is mostly an internal design-system consolidation pass — new shared `Button` / `IconButton` / `Input` / `Select` / `Textarea` primitives route every control through the `base.css` class system as the single source of truth, so themes (including Drafter) style fields and buttons consistently. User-visible changes are a navbar `end` snippet for embedding custom trailing controls, a new `--fd-control-radius` theming token, a range-slider fill fix, and opaque Drafter buttons. The archived Astro docs site is retired in favor of the Mintlify docs at `flowdrop.mintlify.app`.

package/dist/adapters/WorkflowAdapter.js

@@ -46,7 +46,7 @@ export class WorkflowAdapter {
      * Add a node to a workflow
      */
     addNode(workflow, nodeType, position, config) {
-        const metadata = this.nodeTypes.find((nt) => nt.id === nodeType);
+        const metadata = this.nodeTypes.find((nt) => nt.node_type_id === nodeType);
         if (!metadata) {
             throw new Error(`Node type '${nodeType}' not found`);
         }
@@ -248,7 +248,7 @@ export class WorkflowAdapter {
             description: svelteFlowWorkflow.description,
             nodes: svelteFlowWorkflow.nodes.map((node) => ({
                 id: node.id,
-                type: node.data.metadata.id,
+                type: node.data.metadata.node_type_id,
                 position: node.position,
                 data: {
                     label: node.data.label,
@@ -282,8 +282,7 @@ export class WorkflowAdapter {
                 data: {
                     label: node.data.label,
                     config: node.data.config,
-                    metadata: node.data.metadata,
-                    nodeId: node.id
+                    metadata: node.data.metadata
                 }
             })),
             edges: workflow.edges.map((edge) => ({
@@ -326,7 +325,7 @@ export class WorkflowAdapter {
         const nodeTypeCounts = new Map();
         cloned.nodes.forEach((node) => {
             const oldId = node.id;
-            const nodeTypeId = node.data.metadata.id;
+            const nodeTypeId = node.data.metadata.node_type_id;
             // Get the current count for this node type
             const currentCount = nodeTypeCounts.get(nodeTypeId) || 0;
             const newCount = currentCount + 1;

package/dist/adapters/agentspec/AgentSpecAdapter.js

@@ -266,7 +266,7 @@ export class AgentSpecAdapter {
             metadata: {
                 'flowdrop:position': node.position,
                 'flowdrop:node_id': node.id,
-                'flowdrop:node_type_id': node.data.metadata.id
+                'flowdrop:node_type_id': node.data.metadata.node_type_id
             }
         };
         // Add type-specific attributes from config
@@ -362,7 +362,7 @@ export class AgentSpecAdapter {
             return ext;
         }
         // Infer from FlowDrop node type ID
-        const fromId = extractComponentType(node.data.metadata.id);
+        const fromId = extractComponentType(node.data.metadata.node_type_id);
         if (fromId)
             return fromId;
         // Infer from FlowDrop visual type + category
@@ -404,7 +404,7 @@ export class AgentSpecAdapter {
         const nodeTypeId = asNode.metadata?.['flowdrop:node_type_id'] ||
             `${AGENTSPEC_NAMESPACE}.${asNode.component_type}`;
         const metadata = {
-            id: nodeTypeId,
+            node_type_id: nodeTypeId,
             name: defaults.defaultName,
             type: defaults.visualType,
             description: asNode.description || defaults.defaultDescription,

package/dist/adapters/agentspec/defaultNodeTypes.js

@@ -30,7 +30,7 @@ function buildRegistry() {
     registry.set('start_node', {
         componentType: 'start_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.start_node`,
+            node_type_id: `${AGENTSPEC_NS}.start_node`,
             name: 'Start',
             type: 'terminal',
             description: 'Flow entry point. Defines the initial inputs for the flow.',
@@ -55,7 +55,7 @@ function buildRegistry() {
     registry.set('end_node', {
         componentType: 'end_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.end_node`,
+            node_type_id: `${AGENTSPEC_NS}.end_node`,
             name: 'End',
             type: 'terminal',
             description: 'Flow exit point. Defines the final outputs of the flow.',
@@ -80,7 +80,7 @@ function buildRegistry() {
     registry.set('llm_node', {
         componentType: 'llm_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.llm_node`,
+            node_type_id: `${AGENTSPEC_NS}.llm_node`,
             name: 'LLM',
             type: 'default',
             description: 'Generate text using a large language model with configurable prompts.',
@@ -145,7 +145,7 @@ function buildRegistry() {
     registry.set('branching_node', {
         componentType: 'branching_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.branching_node`,
+            node_type_id: `${AGENTSPEC_NS}.branching_node`,
             name: 'Branch',
             type: 'gateway',
             description: 'Route execution to different paths based on conditions.',
@@ -213,7 +213,7 @@ function buildRegistry() {
     registry.set('tool_node', {
         componentType: 'tool_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.tool_node`,
+            node_type_id: `${AGENTSPEC_NS}.tool_node`,
             name: 'Tool',
             type: 'tool',
             description: 'Execute a tool function with inputs and receive outputs.',
@@ -271,7 +271,7 @@ function buildRegistry() {
     registry.set('api_node', {
         componentType: 'api_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.api_node`,
+            node_type_id: `${AGENTSPEC_NS}.api_node`,
             name: 'API Call',
             type: 'default',
             description: 'Make an HTTP API call with configurable endpoint, method, and headers.',
@@ -342,7 +342,7 @@ function buildRegistry() {
     registry.set('agent_node', {
         componentType: 'agent_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.agent_node`,
+            node_type_id: `${AGENTSPEC_NS}.agent_node`,
             name: 'Agent',
             type: 'default',
             description: 'Run a multi-round agent conversation within the flow.',
@@ -400,7 +400,7 @@ function buildRegistry() {
     registry.set('flow_node', {
         componentType: 'flow_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.flow_node`,
+            node_type_id: `${AGENTSPEC_NS}.flow_node`,
             name: 'Sub-Flow',
             type: 'simple',
             description: 'Execute another flow as a sub-routine within this flow.',
@@ -451,7 +451,7 @@ function buildRegistry() {
     registry.set('map_node', {
         componentType: 'map_node',
         metadata: {
-            id: `${AGENTSPEC_NS}.map_node`,
+            node_type_id: `${AGENTSPEC_NS}.map_node`,
             name: 'Map',
             type: 'default',
             description: 'Apply a flow or operation to each item in a collection (map-reduce).',

package/dist/commands/executor.js

@@ -76,7 +76,7 @@ function executeAddNode(command, context) {
         };
     }
     const position = command.position ?? computeAutoPosition(workflow.nodes);
-    const nodeId = generateNodeId(metadata.id, workflow.nodes);
+    const nodeId = generateNodeId(metadata.node_type_id, workflow.nodes);
     const config = extractConfigDefaults(metadata.configSchema);
     const node = {
         id: nodeId,
@@ -86,8 +86,7 @@ function executeAddNode(command, context) {
         data: {
             label: metadata.name,
             config,
-            metadata,
-            nodeId
+            metadata
         }
     };
     context.dispatch.addNode(node);
@@ -357,7 +356,7 @@ function executeInfo(command, context) {
     const resultData = {
         nodeId: shortId,
         label: node.data.label ?? metadata?.name ?? '',
-        type: metadata?.id ? toShortTypeId(metadata.id) : '',
+        type: metadata?.node_type_id ? toShortTypeId(metadata.node_type_id) : '',
         position: node.position,
         config: node.data.config ?? {},
         inputs,
@@ -578,7 +577,7 @@ function executeListNodes(context) {
     const nodes = workflow.nodes.map((n) => ({
         nodeId: toShortId(n.id),
         label: n.data.label ?? n.data.metadata?.name ?? '',
-        type: n.data.metadata?.id ? toShortTypeId(n.data.metadata.id) : ''
+        type: n.data.metadata?.node_type_id ? toShortTypeId(n.data.metadata.node_type_id) : ''
     }));
     const resultData = { nodes };
     return {
@@ -610,7 +609,7 @@ function executeListEdges(context) {
 }
 function executeListTypes(context) {
     const types = context.nodeTypes.map((m) => ({
-        typeId: toShortTypeId(m.id),
+        typeId: toShortTypeId(m.node_type_id),
         name: m.name,
         category: m.category
     }));

package/dist/commands/types.js

@@ -24,18 +24,18 @@ export function buildTypeMap(nodeTypes) {
     const shortIdCounts = new Map();
     // First pass: register full IDs and count short ID occurrences
     for (const metadata of nodeTypes) {
-        map.set(metadata.id, metadata);
-        const dotIndex = metadata.id.indexOf('.');
+        map.set(metadata.node_type_id, metadata);
+        const dotIndex = metadata.node_type_id.indexOf('.');
         if (dotIndex !== -1) {
-            const shortId = metadata.id.substring(dotIndex + 1);
+            const shortId = metadata.node_type_id.substring(dotIndex + 1);
             shortIdCounts.set(shortId, (shortIdCounts.get(shortId) ?? 0) + 1);
         }
     }
     // Second pass: register unique short IDs
     for (const metadata of nodeTypes) {
-        const dotIndex = metadata.id.indexOf('.');
+        const dotIndex = metadata.node_type_id.indexOf('.');
         if (dotIndex !== -1) {
-            const shortId = metadata.id.substring(dotIndex + 1);
+            const shortId = metadata.node_type_id.substring(dotIndex + 1);
             if (shortIdCounts.get(shortId) === 1) {
                 map.set(shortId, metadata);
             }

package/dist/components/App.svelte

@@ -412,8 +412,8 @@
     if (propNodes && propNodes.length > 0) {
       // Merge format-provided nodes with prop nodes (deduplicate by ID, props take priority)
       const formatNodes = fd.formats.getAllFormatNodes();
-      const existingIds = new Set(propNodes.map((n) => n.id));
-      const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.id));
+      const existingIds = new Set(propNodes.map((n) => n.node_type_id));
+      const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.node_type_id));
       nodes = [...propNodes, ...uniqueFormatNodes];
       nodeTypesLoading = false;
       return;
@@ -429,8 +429,8 @@
 
       // Merge format-provided nodes with API nodes (deduplicate by ID, API takes priority)
       const formatNodes = fd.formats.getAllFormatNodes();
-      const existingIds = new Set(fetchedNodes.map((n) => n.id));
-      const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.id));
+      const existingIds = new Set(fetchedNodes.map((n) => n.node_type_id));
+      const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.node_type_id));
       nodes = [...fetchedNodes, ...uniqueFormatNodes];
       error = null;
       nodeTypesLoading = false;

package/dist/components/NodeSidebar.svelte

@@ -121,7 +121,7 @@
     // Create a new node instance from the node type
     const newNodeData = {
       type: 'node',
-      nodeType: nodeType.id,
+      nodeType: nodeType.node_type_id,
       nodeData: {
         label: nodeType.name,
         config: extractConfigDefaults(nodeType.configSchema),
@@ -246,7 +246,7 @@
           </div>
         {:else}
           <div class="flowdrop-node-list">
-            {#each filteredNodes as nodeType (nodeType.id)}
+            {#each filteredNodes as nodeType (nodeType.node_type_id)}
               <div
                 class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
                 draggable="true"
@@ -299,7 +299,7 @@
                   {getCategoryDisplayName(category).toUpperCase()}
                 </div>
                 <div class="fd-sidebar-flat-list" role="list">
-                  {#each categoryNodes as nodeType (nodeType.id)}
+                  {#each categoryNodes as nodeType (nodeType.node_type_id)}
                     <div
                       class="fd-sidebar-flat-item"
                       role="listitem"
@@ -339,7 +339,7 @@
                 </summary>
                 <div class="flowdrop-details__content">
                   <div class="flowdrop-node-list" role="list">
-                    {#each categoryNodes as nodeType (nodeType.id)}
+                    {#each categoryNodes as nodeType (nodeType.node_type_id)}
                       <div
                         class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
                         role="listitem"

package/dist/components/NodeSwapPicker.svelte

@@ -145,7 +145,7 @@
               {fd.categories.getLabel(category).toUpperCase()}
             </div>
             <div class="swap-picker__flat-list">
-              {#each categoryNodes as nodeType (nodeType.id)}
+              {#each categoryNodes as nodeType (nodeType.node_type_id)}
                 <button class="swap-picker__flat-item" onclick={() => onSelect(nodeType)}>
                   <span
                     class="swap-picker__flat-dot"
@@ -174,7 +174,7 @@
               </span>
             </div>
             <div class="swap-picker__category-items">
-              {#each categoryNodes as nodeType (nodeType.id)}
+              {#each categoryNodes as nodeType (nodeType.node_type_id)}
                 <button class="swap-picker__item" onclick={() => onSelect(nodeType)}>
                   <span
                     class="swap-picker__item-icon"

package/dist/components/UniversalNode.svelte

@@ -21,11 +21,12 @@
   let universalNodeEl: HTMLDivElement;
 
   let {
+    id,
     data,
     selected = false
   }: {
+    id: string;
     data: WorkflowNode['data'] & {
-      nodeId?: string;
       onConfigOpen?: (node: { id: string; type: string; data: WorkflowNode['data'] }) => void;
     };
     selected?: boolean;
@@ -81,7 +82,7 @@
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault();
         data.onConfigOpen?.({
-          id: data.nodeId ?? 'unknown',
+          id,
           type: resolvedComponentName,
           data
         });
@@ -165,13 +166,13 @@
   {#if nodeComponent}
     <!-- Svelte 5 dynamic component limitation; reactivity maintained via $derived -->
     {@const NodeComponent = nodeComponent}
-    <NodeComponent {data} {selected} />
+    <NodeComponent {id} {data} {selected} />
   {/if}
 
   <!-- Status overlay - only show if there's meaningful status information -->
   {#if shouldShowStatus}
     <NodeStatusOverlay
-      nodeId={data.nodeId ?? 'unknown'}
+      nodeId={id}
       {executionInfo}
       position={getStatusPosition()}
       size={getStatusSize()}

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

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

package/dist/components/console/ConsoleInput.svelte

@@ -341,10 +341,10 @@
     if (nodeTypeContext !== null) {
       const prefix = nodeTypeContext.toLowerCase();
       return nodeTypes
-        .filter((nt) => nt.id.toLowerCase().startsWith(prefix))
+        .filter((nt) => nt.node_type_id.toLowerCase().startsWith(prefix))
         .map((nt) => ({
-          value: nt.id,
-          label: nt.id,
+          value: nt.node_type_id,
+          label: nt.node_type_id,
           detail: `${nt.name} (${nt.category})`
         }))
         .slice(0, 50);

package/dist/components/nodes/AtomNode.svelte

@@ -28,7 +28,6 @@
     label: string;
     config: ConfigValues;
     metadata: NodeMetadata;
-    nodeId?: string;
     extensions?: NodeExtensions;
     onConfigOpen?: (node: {
       id: string;
@@ -38,18 +37,19 @@
   }
 
   interface Props {
+    id: string;
     data: AtomNodeData;
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
   }
 
-  let { data, selected, isProcessing, isError }: Props = $props();
+  let { id, data, selected, isProcessing, isError }: Props = $props();
 
   const fd = getInstance();
   const checker = fd.portCompatibility;
 
-  const nodeId = $derived(data.nodeId ?? 'unknown');
+  const nodeId = $derived(id);
   const nodeType = $derived(data.metadata?.type ?? 'atom');
 
   // Instance extensions override node-type defaults.

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

@@ -3,7 +3,6 @@ interface AtomNodeData {
     label: string;
     config: ConfigValues;
     metadata: NodeMetadata;
-    nodeId?: string;
     extensions?: NodeExtensions;
     onConfigOpen?: (node: {
         id: string;
@@ -16,6 +15,7 @@ interface AtomNodeData {
     }) => void;
 }
 interface Props {
+    id: string;
     data: AtomNodeData;
     selected?: boolean;
     isProcessing?: boolean;

package/dist/components/nodes/GatewayNode.svelte

@@ -23,8 +23,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;
@@ -83,7 +83,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);
   }
 
@@ -106,7 +106,7 @@
     }
 
     // Check if branch output is connected
-    const handleId = `${props.data.nodeId}-output-${branchName}`;
+    const handleId = `${props.id}-output-${branchName}`;
     return fd.workflow.connectedHandles.has(handleId);
   }
 
@@ -127,7 +127,7 @@
   function handleNodeDoubleClick(): void {
     if (props.data.onConfigOpen) {
       props.data.onConfigOpen({
-        id: props.data.nodeId || '',
+        id: props.id,
         type: 'gateway',
         data: props.data
       });
@@ -151,7 +151,7 @@
   class:flowdrop-workflow-node--selected={props.selected}
   ondblclick={handleNodeDoubleClick}
   aria-label={graph.gatewayNode({ title: displayTitle })}
-  aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
+  aria-describedby="node-description-{props.id}"
 >
   <!-- Node Header: expands in multiples of 10 (title row 40px + gap 10px + description 20px per line) -->
   <div class="flowdrop-workflow-node__header">
@@ -173,10 +173,7 @@
       </h3>
     </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>
@@ -191,7 +188,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: {getDataTypeColorToken(
                 checker,
@@ -280,7 +277,7 @@
             <Handle
               type="source"
               position={Position.Right}
-              id={`${props.data.nodeId}-output-${branch.name}`}
+              id={`${props.id}-output-${branch.name}`}
               class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
               style="top: var(--fd-node-port-row-height); transform: translateY(-50%); --fd-handle-fill: {isActive
                 ? getDataTypeColorToken(checker, 'trigger')

package/dist/components/nodes/GatewayNode.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/nodes/IdeaNode.svelte

@@ -19,12 +19,12 @@
    * IdeaNode component props
    * Displays a card-style node for conceptual flow diagrams
    */
-  const props = $props<{
+  interface Props {
+    id: string;
     data: {
       label: string;
       config: ConfigValues;
       metadata: NodeMetadata;
-      nodeId?: string;
       onConfigOpen?: (node: {
         id: string;
         type: string;
@@ -34,7 +34,9 @@
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-  }>();
+  }
+
+  let props: Props = $props();
 
   const checker = getInstance().portCompatibility;
 
@@ -101,7 +103,7 @@
   function openConfigSidebar(): void {
     if (props.data.onConfigOpen) {
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'idea',
         data: props.data
       };
@@ -139,7 +141,7 @@
         checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
-      id={`${props.data.nodeId}-input-left`}
+      id={`${props.id}-input-left`}
     />
   {/if}
 
@@ -152,7 +154,7 @@
         checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); left: 140px; transform: translateX(-50%); z-index: 30;"
-      id={`${props.data.nodeId}-input-top`}
+      id={`${props.id}-input-top`}
     />
   {/if}
 
@@ -203,7 +205,7 @@
         checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); z-index: 30;"
-      id={`${props.data.nodeId}-output-right`}
+      id={`${props.id}-output-right`}
     />
   {/if}
 
@@ -216,7 +218,7 @@
         checker,
         IDEA_DATA_TYPE
       )}; --fd-handle-border-color: var(--fd-handle-border); left: 140px; transform: translateX(-50%); z-index: 30;"
-      id={`${props.data.nodeId}-output-bottom`}
+      id={`${props.id}-output-bottom`}
     />
   {/if}
 </div>

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

@@ -1,10 +1,14 @@
 import type { ConfigValues, NodeMetadata } from '../../types/index.js';
-type $$ComponentProps = {
+/**
+ * IdeaNode component props
+ * Displays a card-style node for conceptual flow diagrams
+ */
+interface Props {
+    id: string;
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
-        nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;
@@ -18,7 +22,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-};
-declare const IdeaNode: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const IdeaNode: import("svelte").Component<Props, {}, "">;
 type IdeaNode = ReturnType<typeof IdeaNode>;
 export default IdeaNode;

package/dist/components/nodes/NotesNode.svelte

@@ -9,12 +9,12 @@
    * NotesNode component props
    * Displays a styled note with markdown content
    */
-  const props = $props<{
+  interface Props {
+    id: string;
     data: {
       label: string;
       config: ConfigValues;
       metadata: NodeMetadata;
-      nodeId?: string;
       onConfigOpen?: (node: {
         id: string;
         type: string;
@@ -24,7 +24,9 @@
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-  }>();
+  }
+
+  let props: Props = $props();
 
   // Hoist the notes branch — read for placeholder, every type name, processing,
   // error, and configure tooltip.
@@ -75,7 +77,7 @@
   function openConfigSidebar(): void {
     if (props.data.onConfigOpen) {
       const nodeForConfig = {
-        id: props.data.nodeId || 'unknown',
+        id: props.id,
         type: 'note',
         data: props.data
       };

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

@@ -1,10 +1,14 @@
 import type { ConfigValues, NodeMetadata } from '../../types/index.js';
-type $$ComponentProps = {
+/**
+ * NotesNode component props
+ * Displays a styled note with markdown content
+ */
+interface Props {
+    id: string;
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
-        nodeId?: string;
         onConfigOpen?: (node: {
             id: string;
             type: string;
@@ -18,7 +22,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-};
-declare const NotesNode: import("svelte").Component<$$ComponentProps, {}, "">;
+}
+declare const NotesNode: import("svelte").Component<Props, {}, "">;
 type NotesNode = ReturnType<typeof NotesNode>;
 export default NotesNode;