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

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

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,81 +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-background);
-    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 {
-    border-color: var(--fd-ring);
-    background-color: var(--fd-background);
-  }
-
-  .form-select:disabled {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-muted);
-    color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 1;
-  }
-
-  .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/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,40 +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-background);
-    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 {
-    border-color: var(--fd-ring);
-    background-color: var(--fd-background);
-  }
-
-  .form-text-field:disabled {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-muted);
-    color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 1;
-  }
-</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,44 +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-background);
-    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 {
-    border-color: var(--fd-ring);
-    background-color: var(--fd-background);
-  }
-
-  .form-textarea:disabled {
-    background-color: var(--fd-muted);
-    border-color: var(--fd-border-muted);
-    color: var(--fd-muted-foreground);
-    cursor: not-allowed;
-    opacity: 1;
-  }
-</style>
+/>

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/playground/InputCollector.svelte

@@ -8,6 +8,9 @@
 
 <script lang="ts">
   import Icon from '@iconify/svelte';
+  import Input from '../Input.svelte';
+  import Select from '../Select.svelte';
+  import Textarea from '../Textarea.svelte';
   import { slide } from 'svelte/transition';
   import type { PlaygroundInputField } from '../../types/playground.js';
   import { getInstance } from '../../stores/getInstance.svelte.js';
@@ -171,9 +174,8 @@
 
               {#if hasEnumOptions(field)}
                 <!-- Select for enum fields -->
-                <select
+                <Select
                   id="input-{field.nodeId}-{field.fieldId}"
-                  class="input-collector__select"
                   value={getValue(field)}
                   onchange={(e) => updateValue(field, e.currentTarget.value)}
                 >
@@ -181,17 +183,16 @@
                   {#each field.schema?.enum ?? [] as option (option)}
                     <option value={String(option)}>{option}</option>
                   {/each}
-                </select>
+                </Select>
               {:else if getInputType(field) === 'textarea'}
                 <!-- Textarea for multiline -->
-                <textarea
+                <Textarea
                   id="input-{field.nodeId}-{field.fieldId}"
-                  class="input-collector__textarea"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
-                  rows="3"
-                ></textarea>
+                  rows={3}
+                />
               {:else if getInputType(field) === 'checkbox'}
                 <!-- Checkbox for boolean -->
                 <label class="input-collector__checkbox-wrapper">
@@ -208,10 +209,10 @@
                 </label>
               {:else if getInputType(field) === 'number'}
                 <!-- Number input -->
-                <input
+                <Input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="number"
-                  class="input-collector__input"
+                  class="flowdrop-input--numeric"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={Number(getValue(field) ?? 0)}
                   min={field.schema?.minimum}
@@ -220,10 +221,9 @@
                 />
               {:else}
                 <!-- Text input (default) -->
-                <input
+                <Input
                   id="input-{field.nodeId}-{field.fieldId}"
                   type="text"
-                  class="input-collector__input"
                   placeholder={field.schema?.description ?? `Enter ${field.label}`}
                   value={String(getValue(field) ?? '')}
                   oninput={(e) => updateValue(field, e.currentTarget.value)}
@@ -351,41 +351,6 @@
     color: var(--fd-error);
   }
 
-  .input-collector__input,
-  .input-collector__select,
-  .input-collector__textarea {
-    padding: var(--fd-space-xs) var(--fd-space-md);
-    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-background);
-    transition:
-      border-color var(--fd-transition-normal),
-      box-shadow var(--fd-transition-normal);
-  }
-
-  .input-collector__input:focus,
-  .input-collector__select:focus,
-  .input-collector__textarea:focus {
-    border-color: var(--fd-primary);
-  }
-
-  .input-collector__input::placeholder,
-  .input-collector__textarea::placeholder {
-    color: var(--fd-muted-foreground);
-  }
-
-  .input-collector__textarea {
-    resize: vertical;
-    min-height: 80px;
-  }
-
-  .input-collector__select {
-    cursor: pointer;
-  }
-
   .input-collector__checkbox-wrapper {
     display: flex;
     align-items: center;

package/dist/messages/index.d.ts

@@ -2,7 +2,7 @@
  * Messages module — typed, overridable, translation-ready user-facing strings.
  *
  * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
- * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ * plumbing, and the i18n guide in the docs site (`.docs/`) for consumer recipes.
  */
 export { defaultMessages } from './defaults.js';
 export { mergeMessages } from './merge.js';

package/dist/messages/index.js

@@ -2,7 +2,7 @@
  * Messages module — typed, overridable, translation-ready user-facing strings.
  *
  * See `./defaults.ts` for the canonical shape, `./context.ts` for the runtime
- * plumbing, and the i18n guide in `apps/docs` for consumer recipes.
+ * plumbing, and the i18n guide in the docs site (`.docs/`) for consumer recipes.
  */
 export { defaultMessages } from './defaults.js';
 export { mergeMessages } from './merge.js';

package/dist/openapi/v1/openapi.yaml

@@ -37,8 +37,8 @@ info:
     email: shibinkidd@gmail.com
     url: https://www.drupal.org/project/issues/flowdrop?categories=All
 servers:
-  - url: http://localhost:5173/api/flowdrop
-    description: Local development server (Svelte)
+  - url: http://localhost:7104/api/flowdrop
+    description: Local development server
   - url: https://flowdrop.ddev.site/api/flowdrop
     description: Local Drupal server
 security: