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

package/dist/components/form/FormSelect.svelte

@@ -9,7 +9,7 @@
 -->
 
 <script lang="ts">
-  import Icon from '@iconify/svelte';
+  import Select from '../Select.svelte';
   import { normalizeOptions, type FieldOption } from './types.js';
 
   interface Props {
@@ -53,81 +53,15 @@
   }
 </script>
 
-<div class="form-select-wrapper">
-  <select
-    {id}
-    class="form-select"
-    value={value ?? ''}
-    {disabled}
-    aria-describedby={ariaDescribedBy}
-    aria-required={required}
-    onchange={handleChange}
-  >
-    {#each normalizedOptions as option (option.value)}
-      <option value={option.value}>{option.label}</option>
-    {/each}
-  </select>
-  <span class="form-select__icon" aria-hidden="true">
-    <Icon icon="heroicons:chevron-down" />
-  </span>
-</div>
-
-<style>
-  .form-select-wrapper {
-    position: relative;
-  }
-
-  .form-select {
-    width: 100%;
-    padding: 0.625rem 2.5rem 0.625rem 0.875rem;
-    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: all var(--fd-transition-normal);
-    box-shadow: var(--fd-shadow-sm);
-    cursor: pointer;
-    appearance: none;
-  }
-
-  .form-select:hover {
-    border-color: var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .form-select:focus {
-    border-color: var(--fd-ring);
-    background-color: var(--fd-background);
-  }
-
-  .form-select:disabled {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-muted);
-    color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 1;
-  }
-
-  .form-select__icon {
-    position: absolute;
-    right: 0.75rem;
-    top: 50%;
-    transform: translateY(-50%);
-    pointer-events: none;
-    color: var(--fd-muted-foreground);
-    display: flex;
-    align-items: center;
-    transition: color var(--fd-transition-normal);
-  }
-
-  .form-select__icon :global(svg) {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .form-select:focus + .form-select__icon {
-    color: var(--fd-primary);
-  }
-</style>
+<Select
+  {id}
+  value={value ?? ''}
+  {disabled}
+  aria-describedby={ariaDescribedBy}
+  aria-required={required}
+  onchange={handleChange}
+>
+  {#each normalizedOptions as option (option.value)}
+    <option value={option.value}>{option.label}</option>
+  {/each}
+</Select>

package/dist/components/form/FormTextField.svelte

@@ -9,6 +9,8 @@
 -->
 
 <script lang="ts">
+  import Input from '../Input.svelte';
+
   interface Props {
     /** Field identifier */
     id: string;
@@ -45,10 +47,9 @@
   }
 </script>
 
-<input
+<Input
   {id}
   type="text"
-  class="form-text-field"
   value={value ?? ''}
   {placeholder}
   {disabled}
@@ -56,40 +57,3 @@
   aria-required={required}
   oninput={handleInput}
 />
-
-<style>
-  .form-text-field {
-    width: 100%;
-    padding: 0.625rem 0.875rem;
-    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: all var(--fd-transition-normal);
-    box-shadow: var(--fd-shadow-sm);
-  }
-
-  .form-text-field::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .form-text-field:hover {
-    border-color: var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .form-text-field:focus {
-    border-color: var(--fd-ring);
-    background-color: var(--fd-background);
-  }
-
-  .form-text-field:disabled {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-muted);
-    color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 1;
-  }
-</style>

package/dist/components/form/FormTextarea.svelte

@@ -9,6 +9,8 @@
 -->
 
 <script lang="ts">
+  import Textarea from '../Textarea.svelte';
+
   interface Props {
     /** Field identifier */
     id: string;
@@ -48,9 +50,8 @@
   }
 </script>
 
-<textarea
+<Textarea
   {id}
-  class="form-textarea"
   value={value ?? ''}
   {placeholder}
   {rows}
@@ -58,44 +59,4 @@
   aria-describedby={ariaDescribedBy}
   aria-required={required}
   oninput={handleInput}
-></textarea>
-
-<style>
-  .form-textarea {
-    width: 100%;
-    padding: 0.625rem 0.875rem;
-    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: all var(--fd-transition-normal);
-    box-shadow: var(--fd-shadow-sm);
-    resize: vertical;
-    min-height: 5rem;
-    line-height: 1.5;
-  }
-
-  .form-textarea::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .form-textarea:hover {
-    border-color: var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .form-textarea:focus {
-    border-color: var(--fd-ring);
-    background-color: var(--fd-background);
-  }
-
-  .form-textarea:disabled {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-muted);
-    color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 1;
-  }
-</style>
+/>

package/dist/components/form/resolveFieldType.d.ts

@@ -0,0 +1,24 @@
+import type { FieldSchema } from './types.js';
+/**
+ * The dependency-free field kinds that {@link FormField} and
+ * {@link FormFieldLight} render identically — i.e. everything that does not
+ * pull in a heavy editor or depend on the field registry.
+ */
+export type BaseFieldType = 'checkbox-group' | 'select-enum' | 'select-options' | 'textarea' | 'range' | 'text' | 'number' | 'toggle' | 'array';
+/**
+ * Resolve the basic field type for a schema — the single source of truth for
+ * the decision both the full and light field factories share.
+ *
+ * Returns `null` when none of the basic cases match, so each caller can apply
+ * its OWN special-case handling and fallback in its own order. The heavy and
+ * entry-point-specific cases (hidden, autocomplete, code/markdown/template
+ * editors, `object` → editor, registry-resolved components) are deliberately
+ * NOT decided here: `FormField` and `FormFieldLight` route those differently
+ * (static imports vs. the lazy field registry that keeps the `/form` light
+ * entry free of heavy deps), and must keep doing so before delegating here.
+ *
+ * Order matters and mirrors the original in-component chains: `enum` and
+ * `oneOf` are checked before the primitive `type` branches because option
+ * schemas frequently carry `type: 'string'`.
+ */
+export declare function resolveBaseFieldType(schema: FieldSchema): BaseFieldType | null;

package/dist/components/form/resolveFieldType.js

@@ -0,0 +1,55 @@
+/**
+ * Resolve the basic field type for a schema — the single source of truth for
+ * the decision both the full and light field factories share.
+ *
+ * Returns `null` when none of the basic cases match, so each caller can apply
+ * its OWN special-case handling and fallback in its own order. The heavy and
+ * entry-point-specific cases (hidden, autocomplete, code/markdown/template
+ * editors, `object` → editor, registry-resolved components) are deliberately
+ * NOT decided here: `FormField` and `FormFieldLight` route those differently
+ * (static imports vs. the lazy field registry that keeps the `/form` light
+ * entry free of heavy deps), and must keep doing so before delegating here.
+ *
+ * Order matters and mirrors the original in-component chains: `enum` and
+ * `oneOf` are checked before the primitive `type` branches because option
+ * schemas frequently carry `type: 'string'`.
+ */
+export function resolveBaseFieldType(schema) {
+    // Enum with multiple selection -> checkbox group
+    if (schema.enum && schema.multiple) {
+        return 'checkbox-group';
+    }
+    // Enum with single selection -> select
+    if (schema.enum) {
+        return 'select-enum';
+    }
+    // oneOf with labeled options (standard JSON Schema) -> select
+    if (schema.oneOf && schema.oneOf.length > 0) {
+        return 'select-options';
+    }
+    // Multiline string -> textarea
+    if (schema.type === 'string' && schema.format === 'multiline') {
+        return 'textarea';
+    }
+    // Range slider for number/integer with format: "range"
+    if ((schema.type === 'number' || schema.type === 'integer') && schema.format === 'range') {
+        return 'range';
+    }
+    // String -> text field
+    if (schema.type === 'string') {
+        return 'text';
+    }
+    // Number or integer -> number field
+    if (schema.type === 'number' || schema.type === 'integer') {
+        return 'number';
+    }
+    // Boolean -> toggle
+    if (schema.type === 'boolean') {
+        return 'toggle';
+    }
+    // Array -> array field
+    if (schema.type === 'array') {
+        return 'array';
+    }
+    return null;
+}

package/dist/components/icons/CloseIcon.svelte

@@ -0,0 +1,6 @@
+<!-- Inline SVG equivalent of mdi:close (Material Design Icons) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path
+    d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+  />
+</svg>

package/dist/components/icons/CloseIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default CloseIcon;
+type CloseIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CloseIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

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;