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

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,37 +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 {
-    outline: none;
-    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);
-  }
-</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);
@@ -165,12 +175,6 @@
       0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
-  .form-range-field:focus::-webkit-slider-thumb {
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.2),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
   /* Firefox - Track */
   .form-range-field::-moz-range-track {
     height: 6px;
@@ -186,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);
@@ -205,20 +209,7 @@
       0 2px 4px rgba(0, 0, 0, 0.1);
   }
 
-  .form-range-field:focus::-moz-range-thumb {
-    box-shadow:
-      0 0 0 3px rgba(59, 130, 246, 0.2),
-      0 4px 12px rgba(59, 130, 246, 0.35);
-  }
-
-  /* Focus styles */
-  .form-range-field:focus {
-    outline: none;
-  }
-
-  .form-range-field:focus-visible {
-    outline: none;
-  }
+  /* Focus ring is centralized in base.css (outline on the range input). */
 
   /* Value display row */
   .form-range-values {

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,77 +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-muted);
-    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 {
-    outline: none;
-    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);
-  }
-
-  .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/FormTemplateEditor.svelte

@@ -623,7 +623,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: all var(--fd-transition-normal);
     box-shadow: var(--fd-shadow-sm);
   }
@@ -633,12 +634,13 @@
     background-color: var(--fd-background);
   }
 
+  /* Compound widget: ring drawn on the container via :focus-within, using the
+     standard --fd-ring tokens (outline isn't clipped by the container overflow). */
   .form-template-editor__container:focus-within {
     border-color: var(--fd-accent);
     background-color: var(--fd-background);
-    box-shadow:
-      0 0 0 3px rgba(168, 85, 247, 0.12),
-      var(--fd-shadow-sm);
+    outline: var(--fd-ring-width) solid var(--fd-ring);
+    outline-offset: var(--fd-ring-offset);
   }
 
   /* Dark theme overrides */

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,36 +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-muted);
-    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 {
-    outline: none;
-    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);
-  }
-</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,40 +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-muted);
-    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 {
-    outline: none;
-    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);
-  }
-</style>
+/>

package/dist/components/form/FormToggle.svelte

@@ -120,10 +120,6 @@
     transform: translateX(1.25rem);
   }
 
-  .form-toggle__input:focus-visible + .form-toggle__track {
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
-  }
-
   .form-toggle__label {
     font-size: var(--fd-text-sm);
     color: var(--fd-muted-foreground);

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/icons/CommandLineIcon.svelte

@@ -0,0 +1,15 @@
+<!-- Inline SVG equivalent of heroicons:command-line (outline) -->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="1.5"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden="true"
+>
+  <path
+    d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"
+  />
+</svg>

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

@@ -0,0 +1,26 @@
+export default CommandLineIcon;
+type CommandLineIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CommandLineIcon: $$__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/icons/MenuIcon.svelte

@@ -0,0 +1,4 @@
+<!-- Inline SVG equivalent of mdi:menu (Material Design Icons) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+</svg>

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

@@ -0,0 +1,26 @@
+export default MenuIcon;
+type MenuIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MenuIcon: $$__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/icons/MenuOpenIcon.svelte

@@ -0,0 +1,6 @@
+<!-- Inline SVG equivalent of mdi:menu-open (Material Design Icons) -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+  <path
+    d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"
+  />
+</svg>

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

@@ -0,0 +1,26 @@
+export default MenuOpenIcon;
+type MenuOpenIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MenuOpenIcon: $$__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/interrupt/ChoicePrompt.svelte

@@ -313,11 +313,6 @@
     border: 0;
   }
 
-  .choice-prompt__option:focus-within {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .choice-prompt__checkmark {
     flex-shrink: 0;
     font-size: 1.25rem;
@@ -390,11 +385,6 @@
     transform: translateY(-1px);
   }
 
-  .choice-prompt__submit:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .choice-prompt__submit:disabled {
     opacity: 0.5;
     cursor: not-allowed;

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -184,11 +184,6 @@
     min-width: 100px;
   }
 
-  .confirmation-prompt__button:focus-visible {
-    outline: 2px solid var(--fd-ring);
-    outline-offset: 2px;
-  }
-
   .confirmation-prompt__button:disabled {
     cursor: not-allowed;
   }