@flowdrop/flowdrop 2.0.0-beta.3 → 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/InputCollector.svelte

@@ -8,6 +8,9 @@
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Input from '../Input.svelte';
+  import Select from '../Select.svelte';
+  import Textarea from '../Textarea.svelte';
   import { slide } from 'svelte/transition';
   import type { PlaygroundInputField } from '../../types/playground.js';
   import { getInstance } from '../../stores/getInstance.svelte.js';
@@ -171,9 +174,8 @@
 
               {#if hasEnumOptions(field)}
                 <!-- Select for enum fields -->
-                <select
+                <Select
                   id="input-{field.nodeId}-{field.fieldId}"
-                  class="input-collector__select"
                   value={getValue(field)}
                   onchange={(e) => updateValue(field, e.currentTarget.value)}
                 >
@@ -181,17 +183,16 @@
                   {#each field.schema?.enum ?? [] as option (option)}
                     <option value={String(option)}>{option}</option>
                   {/each}
-                </select>
+                </Select>
               {:else if getInputType(field) === 'textarea'}
                 <!-- Textarea for multiline -->
-                <textarea
+                <Textarea
                   id="input-{field.nodeId}-{field.fieldId}"
-                  class="input-collector__textarea"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
-                  rows="3"
-                ></textarea>
+                  rows={3}
+                />
               {:else if getInputType(field) === 'checkbox'}
                 <!-- Checkbox for boolean -->
                 <label class="input-collector__checkbox-wrapper">
@@ -208,10 +209,10 @@
                 </label>
               {:else if getInputType(field) === 'number'}
                 <!-- Number input -->
-                <input
+                <Input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="number"
-                  class="input-collector__input"
+                  class="flowdrop-input--numeric"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={Number(getValue(field) ?? 0)}
                   min={field.schema?.minimum}
@@ -220,10 +221,9 @@
                 />
               {:else}
                 <!-- Text input (default) -->
-                <input
+                <Input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="text"
-                  class="input-collector__input"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
@@ -351,41 +351,6 @@
     color: var(--fd-error);
   }
 
-  .input-collector__input,
-  .input-collector__select,
-  .input-collector__textarea {
-    padding: var(--fd-space-xs) var(--fd-space-md);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-lg);
-    font-size: var(--fd-text-sm);
-    font-family: inherit;
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-  }
-
-  .input-collector__input:focus,
-  .input-collector__select:focus,
-  .input-collector__textarea:focus {
-    border-color: var(--fd-primary);
-  }
-
-  .input-collector__input::placeholder,
-  .input-collector__textarea::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .input-collector__textarea {
-    resize: vertical;
-    min-height: 80px;
-  }
-
-  .input-collector__select {
-    cursor: pointer;
-  }
-
   .input-collector__checkbox-wrapper {
     display: flex;
     align-items: center;

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/messages/index.d.ts

@@ -2,7 +2,7 @@
  * Messages module — typed, overridable, translation-ready user-facing strings.
  *
  * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
- * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ * plumbing, and the i18n guide in the docs site (`.docs/`) for consumer recipes.
  */
 export { defaultMessages } from './defaults.js';
 export { mergeMessages } from './merge.js';

package/dist/messages/index.js

@@ -2,7 +2,7 @@
  * Messages module — typed, overridable, translation-ready user-facing strings.
  *
  * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
- * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ * plumbing, and the i18n guide in the docs site (`.docs/`) for consumer recipes.
  */
 export { defaultMessages } from './defaults.js';
 export { mergeMessages } from './merge.js';

package/dist/openapi/v1/openapi.yaml

@@ -37,8 +37,8 @@ info:
     email: shibinkidd@gmail.com
     url: https://www.drupal.org/project/issues/flowdrop?categories=All
 servers:
-  - url: http://localhost:5173/api/flowdrop
-    description: Local development server (Svelte)
+  - url: http://localhost:7104/api/flowdrop
+    description: Local development server
   - url: https://flowdrop.ddev.site/api/flowdrop
     description: Local Drupal server
 security: