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

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>

package/dist/components/form/FormRangeField.svelte

@@ -94,7 +94,7 @@
       aria-valuemax={max}
       aria-valuenow={numericValue}
       oninput={handleInput}
-      style="--progress: {progressPercentage}%"
+      style="--progress: {progressPercentage}"
     />
   </div>
   <div class="form-range-values">
@@ -119,6 +119,16 @@
   }
 
   .form-range-field {
+    /* Thumb width; the fill edge is offset by half of this so it tracks the
+       thumb centre instead of the raw 0–100% of the track. */
+    --fd-range-thumb-size: 18px;
+    /* `--progress` is a unitless 0–100 set inline. The browser keeps the thumb
+       inside the track, so its centre travels from thumb/2 to (100% − thumb/2);
+       mirror that here so the colour fill lines up at every value, on load too. */
+    --fd-range-fill: calc(
+      var(--fd-range-thumb-size) / 2 + (100% - var(--fd-range-thumb-size)) * var(--progress, 0) /
+        100
+    );
     width: 100%;
     height: 6px;
     border-radius: 3px;
@@ -127,8 +137,8 @@
     background: linear-gradient(
       to right,
       var(--fd-primary) 0%,
-      var(--fd-primary) var(--progress, 0%),
-      var(--fd-border) var(--progress, 0%),
+      var(--fd-primary) var(--fd-range-fill),
+      var(--fd-border) var(--fd-range-fill),
       var(--fd-border) 100%
     );
     cursor: pointer;
@@ -145,8 +155,8 @@
   .form-range-field::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
-    width: 18px;
-    height: 18px;
+    width: var(--fd-range-thumb-size);
+    height: var(--fd-range-thumb-size);
     border-radius: 50%;
     background: linear-gradient(135deg, var(--fd-background) 0%, var(--fd-muted) 100%);
     border: 2px solid var(--fd-primary);
@@ -180,8 +190,8 @@
 
   /* Firefox - Thumb */
   .form-range-field::-moz-range-thumb {
-    width: 18px;
-    height: 18px;
+    width: var(--fd-range-thumb-size);
+    height: var(--fd-range-thumb-size);
     border-radius: 50%;
     background: linear-gradient(135deg, var(--fd-background) 0%, var(--fd-muted) 100%);
     border: 2px solid var(--fd-primary);