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

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/form/FormArray.svelte

@@ -19,6 +19,10 @@
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Input from '../Input.svelte';
+  import Select from '../Select.svelte';
+  import Textarea from '../Textarea.svelte';
+  import IconButton from '../IconButton.svelte';
   import type { FieldSchema } from './types.js';
   import { m } from '../../messages/index.js';
 
@@ -284,40 +288,37 @@
             <!-- Action buttons group -->
             <div class="form-array__actions">
               <!-- Move Up button -->
-              <button
-                type="button"
-                class="form-array__action-btn form-array__action-btn--move"
+              <IconButton
+                variant="primary"
                 onclick={() => moveItemUp(index)}
                 disabled={index === 0 || disabled}
-                aria-label={t.moveItemUp({ n: index + 1 })}
+                ariaLabel={t.moveItemUp({ n: index + 1 })}
                 title={t.moveUp}
               >
                 <Icon icon="heroicons:arrow-up" />
-              </button>
+              </IconButton>
 
               <!-- Move Down button -->
-              <button
-                type="button"
-                class="form-array__action-btn form-array__action-btn--move"
+              <IconButton
+                variant="primary"
                 onclick={() => moveItemDown(index)}
                 disabled={index === items.length - 1 || disabled}
-                aria-label={t.moveItemDown({ n: index + 1 })}
+                ariaLabel={t.moveItemDown({ n: index + 1 })}
                 title={t.moveDown}
               >
                 <Icon icon="heroicons:arrow-down" />
-              </button>
+              </IconButton>
 
               <!-- Delete button -->
-              <button
-                type="button"
-                class="form-array__action-btn form-array__action-btn--delete"
+              <IconButton
+                variant="danger"
                 onclick={() => removeItem(index)}
                 disabled={!canRemoveItem || disabled}
-                aria-label={t.deleteItem({ n: index + 1 })}
+                ariaLabel={t.deleteItem({ n: index + 1 })}
                 title={t.delete}
               >
                 <Icon icon="heroicons:trash" />
-              </button>
+              </IconButton>
             </div>
           </div>
 
@@ -330,18 +331,16 @@
               <!-- Simple type: render inline input -->
               {#if itemSchema.type === 'string'}
                 {#if itemSchema.format === 'multiline'}
-                  <textarea
-                    class="form-array__input form-array__textarea"
+                  <Textarea
                     value={String(item ?? '')}
                     placeholder={itemSchema.placeholder ?? ''}
                     rows={3}
                     oninput={(e) => updateItem(index, e.currentTarget.value)}
                     {disabled}
-                  ></textarea>
+                  />
                 {:else}
-                  <input
+                  <Input
                     type="text"
-                    class="form-array__input"
                     value={String(item ?? '')}
                     placeholder={itemSchema.placeholder ?? ''}
                     oninput={(e) => updateItem(index, e.currentTarget.value)}
@@ -349,9 +348,9 @@
                   />
                 {/if}
               {:else if itemSchema.type === 'number' || itemSchema.type === 'integer'}
-                <input
+                <Input
                   type="number"
-                  class="form-array__input form-array__input--number"
+                  class="flowdrop-input--numeric"
                   value={item as number}
                   placeholder={itemSchema.placeholder ?? ''}
                   min={itemSchema.minimum}
@@ -380,8 +379,7 @@
                 </label>
               {:else if itemSchema.enum}
                 <!-- Enum: render select -->
-                <select
-                  class="form-array__select"
+                <Select
                   value={String(item ?? '')}
                   onchange={(e) => updateItem(index, e.currentTarget.value)}
                   {disabled}
@@ -389,12 +387,11 @@
                   {#each itemSchema.enum as option (option)}
                     <option value={String(option)}>{String(option)}</option>
                   {/each}
-                </select>
+                </Select>
               {:else}
                 <!-- Fallback to text -->
-                <input
+                <Input
                   type="text"
-                  class="form-array__input"
                   value={String(item ?? '')}
                   placeholder={itemSchema.placeholder ?? ''}
                   oninput={(e) => updateItem(index, e.currentTarget.value)}
@@ -425,9 +422,8 @@
 
                       <div class="form-array__subform-input">
                         {#if propFieldSchema.enum}
-                          <select
+                          <Select
                             id="{id}-{index}-{propKey}"
-                            class="form-array__select"
                             value={String(propValue ?? '')}
                             onchange={(e) =>
                               updateObjectProperty(index, propKey, e.currentTarget.value)}
@@ -436,23 +432,21 @@
                             {#each propFieldSchema.enum as option (option)}
                               <option value={String(option)}>{String(option)}</option>
                             {/each}
-                          </select>
+                          </Select>
                         {:else if propFieldSchema.type === 'string' && propFieldSchema.format === 'multiline'}
-                          <textarea
+                          <Textarea
                             id="{id}-{index}-{propKey}"
-                            class="form-array__input form-array__textarea"
                             value={String(propValue ?? '')}
                             placeholder={propFieldSchema.placeholder ?? ''}
                             rows={3}
                             oninput={(e) =>
                               updateObjectProperty(index, propKey, e.currentTarget.value)}
                             {disabled}
-                          ></textarea>
+                          />
                         {:else if propFieldSchema.type === 'string'}
-                          <input
+                          <Input
                             id="{id}-{index}-{propKey}"
                             type="text"
-                            class="form-array__input"
                             value={String(propValue ?? '')}
                             placeholder={propFieldSchema.placeholder ?? ''}
                             oninput={(e) =>
@@ -460,10 +454,10 @@
                             {disabled}
                           />
                         {:else if propFieldSchema.type === 'number' || propFieldSchema.type === 'integer'}
-                          <input
+                          <Input
                             id="{id}-{index}-{propKey}"
                             type="number"
-                            class="form-array__input form-array__input--number"
+                            class="flowdrop-input--numeric"
                             value={propValue as number}
                             placeholder={propFieldSchema.placeholder ?? ''}
                             min={propFieldSchema.minimum}
@@ -493,10 +487,9 @@
                             </span>
                           </label>
                         {:else}
-                          <input
+                          <Input
                             id="{id}-{index}-{propKey}"
                             type="text"
-                            class="form-array__input"
                             value={String(propValue ?? '')}
                             placeholder={propFieldSchema.placeholder ?? ''}
                             oninput={(e) =>
@@ -596,7 +589,7 @@
     flex-direction: column;
     background-color: var(--fd-muted);
     border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     overflow: hidden;
     animation: itemFadeIn 0.25s ease-out forwards;
     opacity: 0;
@@ -697,62 +690,8 @@
     margin-left: auto;
   }
 
-  .form-array__action-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 2rem;
-    height: 2rem;
-    padding: 0;
-    border: 1px solid transparent;
-    border-radius: 0.375rem;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .form-array__action-btn :global(svg) {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .form-array__action-btn:disabled {
-    opacity: 0.35;
-    cursor: not-allowed;
-  }
-
-  /* Move Up/Down buttons - Blue semantic color */
-  .form-array__action-btn--move {
-    background-color: var(--fd-primary-muted);
-    border-color: var(--fd-primary);
-    color: var(--fd-primary-hover);
-  }
-
-  .form-array__action-btn--move:hover:not(:disabled) {
-    background-color: var(--fd-primary-muted);
-    border-color: var(--fd-primary-hover);
-    color: var(--fd-primary-hover);
-  }
-
-  .form-array__action-btn--move:active:not(:disabled) {
-    background-color: var(--fd-primary);
-  }
-
-  /* Delete button - Red/Warning semantic color */
-  .form-array__action-btn--delete {
-    background-color: var(--fd-error-muted);
-    border-color: var(--fd-error);
-    color: var(--fd-error);
-  }
-
-  .form-array__action-btn--delete:hover:not(:disabled) {
-    background-color: var(--fd-error-muted);
-    border-color: var(--fd-error-hover);
-    color: var(--fd-error-hover);
-  }
-
-  .form-array__action-btn--delete:active:not(:disabled) {
-    background-color: var(--fd-error);
-  }
+  /* Action buttons (move/delete) now render through IconButton.svelte —
+     geometry + semantic tints live in base.css (.flowdrop-btn--icon*). */
 
   /* ============================================
 	   ITEM CONTENT
@@ -772,65 +711,6 @@
 	   INPUTS (Simple Types)
 	   ============================================ */
 
-  .form-array__input {
-    width: 100%;
-    padding: 0.5rem 0.75rem;
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    font-family: inherit;
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    transition: all var(--fd-transition-normal);
-  }
-
-  .form-array__input::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .form-array__input:hover {
-    border-color: var(--fd-border-strong);
-  }
-
-  .form-array__input:focus {
-    border-color: var(--fd-primary);
-  }
-
-  .form-array__input--number {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .form-array__textarea {
-    resize: vertical;
-    min-height: 4rem;
-    line-height: 1.5;
-  }
-
-  .form-array__select {
-    width: 100%;
-    padding: 0.5rem 2rem 0.5rem 0.75rem;
-    border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-md);
-    font-size: var(--fd-text-sm);
-    font-family: inherit;
-    color: var(--fd-foreground);
-    background-color: var(--fd-background);
-    cursor: pointer;
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
-    background-repeat: no-repeat;
-    background-position: right 0.5rem center;
-    background-size: 1rem;
-  }
-
-  .form-array__select:hover {
-    border-color: var(--fd-border-strong);
-  }
-
-  .form-array__select:focus {
-    border-color: var(--fd-primary);
-  }
-
   /* ============================================
 	   TOGGLE (Boolean in Array)
 	   ============================================ */
@@ -947,7 +827,7 @@
     padding: 2rem 1rem;
     background-color: var(--fd-muted);
     border: 2px dashed var(--fd-border-strong);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
   }
 
   .form-array__empty :global(svg) {
@@ -975,7 +855,7 @@
     gap: 0.5rem;
     padding: 0.625rem 1rem;
     border: 1px solid var(--fd-success);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     background-color: var(--fd-success-muted);
     color: var(--fd-success-hover);
     font-size: 0.8125rem;

package/dist/components/form/FormCheckboxGroup.svelte

@@ -86,7 +86,7 @@
     padding: 0.75rem;
     background-color: var(--fd-muted);
     border: 1px solid var(--fd-border);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
   }
 
   .form-checkbox-item {

package/dist/components/form/FormField.svelte

@@ -43,6 +43,7 @@
   import FormAutocomplete from './FormAutocomplete.svelte';
   import type { FieldSchema } from './types.js';
   import { getSchemaOptions } from './types.js';
+  import { resolveBaseFieldType } from './resolveFieldType.js';
   import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
   import { getResolvedTheme } from '../../stores/settingsStore.svelte.js';
   import { getInstance } from '../../stores/getInstance.svelte.js';
@@ -139,50 +140,10 @@
       return 'template-editor';
     }
 
-    // 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
-    // Must be checked before basic type checks since oneOf schemas often have type: 'string'
-    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';
-    }
-
-    // Future: Array type support
-    if (schema.type === 'array') {
-      return 'array';
+    // Shared basic field resolution (enum/oneOf/primitive types).
+    const base = resolveBaseFieldType(schema);
+    if (base) {
+      return base;
     }
 
     // Object type without specific format -> CodeMirror JSON editor

package/dist/components/form/FormFieldLight.svelte

@@ -48,6 +48,7 @@
   const fd = getInstance();
   import type { FieldSchema } from './types.js';
   import { getSchemaOptions } from './types.js';
+  import { resolveBaseFieldType } from './resolveFieldType.js';
   import type { WorkflowNode, WorkflowEdge } from '../../types/index.js';
   import type { AuthProvider } from '../../types/auth.js';
 
@@ -144,50 +145,10 @@
       return 'code-editor-fallback';
     }
 
-    // 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
-    // Must be checked before basic type checks since oneOf schemas often have type: 'string'
-    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 type
-    if (schema.type === 'array') {
-      return 'array';
+    // Shared basic field resolution (enum/oneOf/primitive types).
+    const base = resolveBaseFieldType(schema);
+    if (base) {
+      return base;
     }
 
     // Fallback to text

package/dist/components/form/FormFieldset.svelte

@@ -121,7 +121,7 @@
 
   .form-fieldset--static {
     border: 1px solid var(--fd-border-muted);
-    border-radius: var(--fd-radius-lg);
+    border-radius: var(--fd-control-radius);
     padding: var(--fd-space-xl);
     margin: 0;
   }

package/dist/components/form/FormNumberField.svelte

@@ -9,6 +9,8 @@
 -->
 
 <script lang="ts">
+  import Input from '../Input.svelte';
+
   interface Props {
     /** Field identifier */
     id: string;
@@ -62,10 +64,10 @@
   }
 </script>
 
-<input
+<Input
   {id}
   type="number"
-  class="form-number-field"
+  class="flowdrop-input--numeric"
   value={value ?? ''}
   {placeholder}
   {min}
@@ -76,33 +78,3 @@
   aria-required={required}
   oninput={handleInput}
 />
-
-<style>
-  .form-number-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;
-    font-variant-numeric: tabular-nums;
-    color: var(--fd-foreground);
-    background-color: var(--fd-muted);
-    transition: all var(--fd-transition-normal);
-    box-shadow: var(--fd-shadow-sm);
-  }
-
-  .form-number-field::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .form-number-field:hover {
-    border-color: var(--fd-border-strong);
-    background-color: var(--fd-background);
-  }
-
-  .form-number-field:focus {
-    border-color: var(--fd-primary);
-    background-color: var(--fd-background);
-  }
-</style>