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

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;
@@ -670,9 +663,7 @@
   }
 
   .form-array__item-toggle:focus-visible {
-    outline: none;
     border-color: var(--fd-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
   }
 
   .form-array__item-toggle :global(svg) {
@@ -699,67 +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:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
-  }
-
-  .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
@@ -779,69 +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 {
-    outline: none;
-    border-color: var(--fd-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-  }
-
-  .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 {
-    outline: none;
-    border-color: var(--fd-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-  }
-
   /* ============================================
 	   TOGGLE (Boolean in Array)
 	   ============================================ */
@@ -958,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) {
@@ -986,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;
@@ -1002,11 +871,6 @@
     color: var(--fd-success-hover);
   }
 
-  .form-array__add-btn:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
-  }
-
   .form-array__add-btn:active:not(:disabled) {
     background-color: var(--fd-success);
   }

package/dist/components/form/FormAutocomplete.svelte

@@ -787,7 +787,6 @@
   }
 
   .form-autocomplete--disabled {
-    opacity: 0.6;
     pointer-events: none;
   }
 
@@ -804,7 +803,7 @@
     font-size: var(--fd-text-sm);
     font-family: inherit;
     color: var(--fd-foreground);
-    background-color: var(--fd-muted);
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
     cursor: text;
@@ -817,11 +816,16 @@
   }
 
   .form-autocomplete__field--focused {
-    border-color: var(--fd-primary);
+    border-color: var(--fd-ring);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+  }
+
+  .form-autocomplete--disabled .form-autocomplete__field {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-muted);
+    color: var(--fd-muted-foreground);
+    cursor: not-allowed;
+    opacity: 1;
   }
 
   /* Multiple mode - textarea-like styling */

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 {
@@ -143,10 +143,6 @@
     transform: scale(1);
   }
 
-  .form-checkbox__input:focus-visible + .form-checkbox__custom {
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .form-checkbox__label {
     font-size: var(--fd-text-sm);
     color: var(--fd-foreground);

package/dist/components/form/FormCodeEditor.svelte

@@ -364,7 +364,9 @@
     border: 1px solid var(--fd-border);
     border-radius: var(--fd-radius-lg);
     overflow: hidden;
-    background-color: var(--fd-muted);
+    /* Match plain form fields (FormTextField/Textarea/Select): rest on the
+       input surface, not the recessed --fd-muted. */
+    background-color: var(--fd-background);
     transition: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
   }
@@ -374,12 +376,15 @@
     background-color: var(--fd-background);
   }
 
+  /* Compound widget: the focusable CodeMirror lives inside this container, so
+     the standard ring (centralized for simple elements) is drawn here via
+     :focus-within using the same --fd-ring tokens. Outline paints outside the
+     container's overflow, so it isn't clipped. */
   .form-code-editor__container:focus-within {
     border-color: var(--fd-primary);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.12),
-      var(--fd-shadow-sm);
+    outline: var(--fd-ring-width) solid var(--fd-ring);
+    outline-offset: var(--fd-ring-offset);
   }
 
   .form-code-editor--error .form-code-editor__container {
@@ -388,9 +393,6 @@
 
   .form-code-editor--error .form-code-editor__container:focus-within {
     border-color: var(--fd-error);
-    box-shadow:
-      0 0 0 3px rgba(239, 68, 68, 0.12),
-      var(--fd-shadow-sm);
   }
 
   /* Dark theme overrides */

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
@@ -233,11 +194,11 @@
   function getEditorHint(editorType: string): string {
     switch (editorType) {
       case 'code-editor-fallback':
-        return "Code editor requires: import { registerCodeEditorField } from '@flowdrop/flowdrop/form/code'; registerCodeEditorField();";
+        return "Code editor not registered. Register it on the instance's field registry: import { registerCodeEditorField } from '@flowdrop/flowdrop/form/code'; registerCodeEditorField(instance.fields);";
       case 'markdown-editor-fallback':
-        return "Markdown editor requires: import { registerMarkdownEditorField } from '@flowdrop/flowdrop/form/markdown'; registerMarkdownEditorField();";
+        return "Markdown editor not registered. Register it on the instance's field registry: import { registerMarkdownEditorField } from '@flowdrop/flowdrop/form/markdown'; registerMarkdownEditorField(instance.fields);";
       case 'template-editor-fallback':
-        return "Template editor requires: import { registerTemplateEditorField } from '@flowdrop/flowdrop/form/code'; registerTemplateEditorField();";
+        return "Template editor not registered. Register it on the instance's field registry: import { registerTemplateEditorField } from '@flowdrop/flowdrop/form/code'; registerTemplateEditorField(instance.fields);";
       default:
         return 'This field type requires additional registration.';
     }

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/FormMarkdownEditor.svelte

@@ -641,7 +641,8 @@
     border: 1px solid var(--fd-border);
     border-radius: var(--fd-radius-lg);
     overflow: hidden;
-    background-color: var(--fd-muted);
+    /* Match plain form fields: rest on the input surface, not --fd-muted. */
+    background-color: var(--fd-background);
     transition: border-color var(--fd-transition-normal);
   }
 
@@ -655,12 +656,13 @@
     border-color: var(--fd-border-strong);
   }
 
+  /* Compound widget: ring drawn on the body via :focus-within, using the
+     standard --fd-ring tokens (outline isn't clipped by the container overflow). */
   .form-markdown-editor__body:focus-within {
     border-color: var(--fd-primary);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px var(--fd-primary-muted),
-      var(--fd-shadow-sm);
+    outline: var(--fd-ring-width) solid var(--fd-ring);
+    outline-offset: var(--fd-ring-offset);
   }
 
   /* ── Status bar ────────────────────────────────── */
@@ -702,7 +704,8 @@
 
   .form-markdown-editor__body :global(.cm-editor) {
     height: var(--editor-height, 300px);
-    background-color: var(--fd-muted) !important;
+    /* Match plain form fields: white input surface (overrides oneDark in dark mode). */
+    background-color: var(--fd-background) !important;
     color: var(--fd-foreground) !important;
   }