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

package/dist/components/NodeSidebar.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
   import LoadingSpinner from './LoadingSpinner.svelte';
+  import Input from './Input.svelte';
   import Icon from '@iconify/svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
@@ -120,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),
@@ -161,19 +162,17 @@
 >
   <!-- Search Section — visibility controlled by --fd-sidebar-search-display -->
   <div class="flowdrop-sidebar__search">
-    <div class="flowdrop-join flowdrop-w--full">
-      <div class="flowdrop-join__item flowdrop-flex--1">
-        <input
-          type="text"
-          placeholder={m().layout.searchComponents}
-          class="flowdrop-input flowdrop-join__item flowdrop-w--full"
-          bind:value={searchInput}
-        />
-      </div>
-      <button class="flowdrop-btn flowdrop-join__item" aria-label={m().layout.searchComponents}>
-        <Icon icon="mdi:magnify" class="flowdrop-icon" />
-      </button>
-    </div>
+    <Input
+      type="text"
+      placeholder={m().layout.searchComponents}
+      aria-label={m().layout.searchComponents}
+      value={searchInput}
+      oninput={(e) => (searchInput = e.currentTarget.value)}
+    >
+      {#snippet leading()}
+        <Icon icon="mdi:magnify" />
+      {/snippet}
+    </Input>
   </div>
 
   <!-- Node Types List -->
@@ -247,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"
@@ -300,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"
@@ -340,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"
@@ -594,106 +593,9 @@
     margin-left: 0;
   }
 
-  /* Form Elements - Matching App Design System */
-  .flowdrop-input {
-    padding: 0.625rem 0.75rem;
-    border: 1px solid var(--fd-border-strong);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-    width: 100%;
-    height: 2.5rem;
-    box-sizing: border-box;
-  }
-
-  .flowdrop-input:focus {
-    border-color: var(--fd-ring);
-  }
-
-  .flowdrop-input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn {
-    padding: 0.625rem 0.75rem;
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--fd-transition-normal);
-    border: 1px solid var(--fd-border-strong);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-    height: 2.5rem;
-    min-width: 2.5rem;
-    box-sizing: border-box;
-  }
-
-  .flowdrop-btn:hover {
-    background-color: var(--fd-subtle);
-    border-color: var(--fd-border-strong);
-  }
-
-  .flowdrop-btn:active {
-    background-color: var(--fd-border);
-    border-color: var(--fd-muted-foreground);
-  }
-
-  .flowdrop-btn:disabled {
-    background-color: var(--fd-muted-foreground);
-    border-color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-
-  /* Join component styles - Seamless integration */
-  .flowdrop-join {
-    display: flex;
-    width: 100%;
-    border-radius: var(--fd-radius-md);
-    overflow: hidden;
-    border: 1px solid var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .flowdrop-join__item {
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-  }
-
-  .flowdrop-join__item:first-child {
-    border-right: 1px solid var(--fd-border-strong);
-    flex: 1;
-  }
-
-  .flowdrop-join__item:last-child {
-    border-left: none;
-    background-color: var(--fd-muted);
-    color: var(--fd-foreground);
-  }
-
-  .flowdrop-join__item:last-child:hover {
-    background-color: var(--fd-subtle);
-  }
-
-  .flowdrop-join:focus-within {
-    border-color: var(--fd-ring);
-  }
+  /* Search field renders through the shared Input primitive (base.css). */
 
   /* Utility classes */
-  .flowdrop-w--full {
-    width: 100%;
-  }
-
   .flowdrop-flex--1 {
     flex: 1;
   }

package/dist/components/NodeSwapPicker.svelte

@@ -8,6 +8,7 @@
 <script lang="ts">
   import type { NodeMetadata, NodeCategory, WorkflowFormat, WorkflowNode } from '../types/index.js';
   import Icon from '@iconify/svelte';
+  import Input from './Input.svelte';
   import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
   import { getCategoryColorToken } from '../utils/colors.js';
   import { m } from '../messages/index.js';
@@ -115,12 +116,17 @@
 
   <!-- Search (hidden in minimal via --fd-sidebar-search-display) -->
   <div class="swap-picker__search">
-    <input
+    <Input
       type="text"
       placeholder="Search node types..."
-      class="swap-picker__input"
-      bind:value={searchInput}
-    />
+      aria-label="Search node types"
+      value={searchInput}
+      oninput={(e) => (searchInput = e.currentTarget.value)}
+    >
+      {#snippet leading()}
+        <Icon icon="mdi:magnify" />
+      {/snippet}
+    </Input>
   </div>
 
   <!-- Node list -->
@@ -139,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"
@@ -168,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"
@@ -298,28 +304,6 @@
     flex-shrink: 0;
   }
 
-  .swap-picker__input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--fd-border-strong);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    box-sizing: border-box;
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-  }
-
-  .swap-picker__input:focus {
-    border-color: var(--fd-ring);
-  }
-
-  .swap-picker__input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
   .swap-picker__list {
     flex: 1;
     overflow-y: auto;

package/dist/components/Select.svelte

@@ -0,0 +1,53 @@
+<!--
+  Select — typed wrapper over the shared `.flowdrop-input` system (base.css).
+
+  Renders the field shell (`.flowdrop-input .flowdrop-input--select`) plus a
+  built-in chevron overlay (`.flowdrop-select-wrap`), so selects match the exact
+  look of Input/Textarea. The native arrow is removed; the chevron tints to
+  --fd-primary on focus. Pass <option>/<optgroup> as children. Native attributes
+  (value, disabled, id, aria-*, onchange…) forward to the underlying <select>.
+
+  Internal for now; see Button.svelte / Input.svelte for the pattern.
+-->
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { HTMLSelectAttributes } from 'svelte/elements';
+
+  // Omit native numeric `size` so our design-token size (matching Button) wins.
+  interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the <select> */
+    class?: string;
+    /** The <option>/<optgroup> elements */
+    children: Snippet;
+  }
+
+  let { size = 'md', invalid = false, class: className = '', children, ...rest }: Props = $props();
+
+  const selectClass = $derived(
+    [
+      'flowdrop-input',
+      'flowdrop-input--select',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<div class="flowdrop-select-wrap">
+  <select class={selectClass} {...rest}>
+    {@render children()}
+  </select>
+  <span class="flowdrop-select-wrap__icon" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+    </svg>
+  </span>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+import type { HTMLSelectAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLSelectAttributes, 'size'> {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the <select> */
+    class?: string;
+    /** The <option>/<optgroup> elements */
+    children: Snippet;
+}
+declare const Select: import("svelte").Component<Props, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Textarea.svelte

@@ -0,0 +1,39 @@
+<!--
+  Textarea — typed wrapper over the shared `.flowdrop-input` system (base.css),
+  with the `.flowdrop-input--textarea` modifier (min-height + vertical resize).
+
+  Shares the exact field look of Input/Select so multiline fields render
+  identically. All styling lives in base.css. Native attributes (value,
+  placeholder, rows, disabled, id, aria-*, oninput…) forward to <textarea>.
+
+  Internal for now; see Button.svelte / Input.svelte for the pattern.
+-->
+
+<script lang="ts">
+  import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLTextareaAttributes {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the textarea */
+    class?: string;
+  }
+
+  let { size = 'md', invalid = false, class: className = '', ...rest }: Props = $props();
+
+  const textareaClass = $derived(
+    [
+      'flowdrop-input',
+      'flowdrop-input--textarea',
+      size === 'md' ? '' : `flowdrop-input--${size}`,
+      invalid ? 'flowdrop-input--invalid' : '',
+      className
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
+</script>
+
+<textarea class={textareaClass} {...rest}></textarea>

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

@@ -0,0 +1,12 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+interface Props extends HTMLTextareaAttributes {
+    /** Size — `md` is the base; `sm`/`lg` add a modifier */
+    size?: 'sm' | 'md' | 'lg';
+    /** Renders the error-border state */
+    invalid?: boolean;
+    /** Extra classes appended to the textarea */
+    class?: string;
+}
+declare const Textarea: import("svelte").Component<Props, {}, "">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/components/ThemeToggle.svelte

@@ -1,12 +1,15 @@
 <!--
   Theme Toggle Component
-  A button that cycles through light, dark, and auto theme modes
-  Displays appropriate icon for current theme state
-  Styled with BEM syntax
+  A button that cycles through light, dark, and auto theme modes.
+  Displays the icon for the current theme state.
+
+  Built on the shared Button primitive so it stays visually and dimensionally
+  aligned with every other control (height, focus ring, hover) for free.
 -->
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Button from './Button.svelte';
   import { getTheme, getResolvedTheme, cycleTheme } from '../stores/settingsStore.svelte.js';
   import type { ThemePreference } from '../types/settings.js';
 
@@ -47,7 +50,7 @@
   }
 
   /**
-   * Get accessible label for the current theme
+   * Get the label text for the current theme
    */
   const themeLabel = $derived(getThemeLabel(getTheme()));
 
@@ -80,100 +83,23 @@
     const next = currentTheme === 'light' ? 'Dark' : 'Auto';
     return `Theme: ${currentTheme === 'light' ? 'Light' : 'Dark'}. Click to switch to ${next}`;
   }
-
-  /**
-   * Handle click to cycle theme
-   */
-  function handleClick(): void {
-    cycleTheme();
-  }
-
-  /**
-   * Handle keyboard events for accessibility
-   */
-  function handleKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      cycleTheme();
-    }
-  }
 </script>
 
-<button
-  class="flowdrop-theme-toggle flowdrop-theme-toggle--{size} {className}"
-  onclick={handleClick}
-  onkeydown={handleKeydown}
+<Button
+  variant="outline"
+  {size}
+  class={className}
   title={tooltipText}
-  aria-label={tooltipText}
-  type="button"
+  ariaLabel={tooltipText}
+  onclick={cycleTheme}
 >
-  <span class="flowdrop-theme-toggle__icon">
-    <Icon icon={themeIcon} />
-  </span>
+  <Icon icon={themeIcon} />
   {#if showLabel}
     <span class="flowdrop-theme-toggle__label">{themeLabel}</span>
   {/if}
-</button>
+</Button>
 
 <style>
-  .flowdrop-theme-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--fd-space-xs);
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    background-color: var(--fd-background);
-    color: var(--fd-foreground);
-    cursor: pointer;
-    transition: all var(--fd-transition-normal);
-    font-family: inherit;
-  }
-
-  .flowdrop-theme-toggle:hover {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-strong);
-  }
-
-  .flowdrop-theme-toggle:active {
-    transform: scale(0.98);
-  }
-
-  /* Size variants */
-  .flowdrop-theme-toggle--sm {
-    padding: var(--fd-space-3xs) var(--fd-space-xs);
-    font-size: var(--fd-text-xs);
-  }
-
-  .flowdrop-theme-toggle--sm .flowdrop-theme-toggle__icon {
-    font-size: var(--fd-text-sm);
-  }
-
-  .flowdrop-theme-toggle--md {
-    padding: var(--fd-space-xs) var(--fd-space-md);
-    font-size: var(--fd-text-sm);
-  }
-
-  .flowdrop-theme-toggle--md .flowdrop-theme-toggle__icon {
-    font-size: var(--fd-text-base);
-  }
-
-  .flowdrop-theme-toggle--lg {
-    padding: var(--fd-space-md) var(--fd-space-xl);
-    font-size: var(--fd-text-base);
-  }
-
-  .flowdrop-theme-toggle--lg .flowdrop-theme-toggle__icon {
-    font-size: var(--fd-text-lg);
-  }
-
-  .flowdrop-theme-toggle__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    line-height: 1;
-  }
-
   .flowdrop-theme-toggle__label {
     font-weight: 500;
   }

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);