@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/components/form/types.d.ts

@@ -5,7 +5,7 @@
  * These types provide a foundation for dynamic form rendering based on JSON Schema
  * and support extensibility for complex field types like arrays and objects.
  */
-import type { AutocompleteConfig, TemplateVariablesConfig } from "../../types/index.js";
+import type { AutocompleteConfig, TemplateVariablesConfig } from '../../types/index.js';
 /**
  * Supported field types for form rendering
  * Aligned with JSON Schema specification (draft-07)
@@ -14,7 +14,7 @@ import type { AutocompleteConfig, TemplateVariablesConfig } from "../../types/in
  * - Use `enum` for simple value lists
  * - Use `oneOf` with `const`/`title` for labeled options
  */
-export type FieldType = "string" | "number" | "integer" | "boolean" | "array" | "object";
+export type FieldType = 'string' | 'number' | 'integer' | 'boolean' | 'array' | 'object';
 /**
  * Field format for specialized rendering
  * - multiline: Renders as textarea
@@ -26,7 +26,7 @@ export type FieldType = "string" | "number" | "integer" | "boolean" | "array" |
  * - template: Renders as CodeMirror editor with Twig/Liquid syntax highlighting
  * - autocomplete: Renders as text input with autocomplete suggestions from callback URL
  */
-export type FieldFormat = "multiline" | "hidden" | "range" | "json" | "code" | "markdown" | "template" | "autocomplete" | string;
+export type FieldFormat = 'multiline' | 'hidden' | 'range' | 'json' | 'code' | 'markdown' | 'template' | 'autocomplete' | string;
 /**
  * Option type for select and checkbox group fields
  *
@@ -216,7 +216,7 @@ export interface AutocompleteFieldProps extends BaseFieldProps<string | string[]
  * Autocomplete configuration imported from main types
  * Re-exported here for convenience
  */
-export type { AutocompleteConfig } from "../../types/index.js";
+export type { AutocompleteConfig } from '../../types/index.js';
 /**
  * Field schema definition derived from JSON Schema property
  * Used to determine which field component to render
@@ -408,7 +408,7 @@ export interface SchemaFormProps {
      * Properties define the form fields to render.
      */
     schema: {
-        type: "object";
+        type: 'object';
         properties: Record<string, FieldSchema>;
         required?: string[];
         additionalProperties?: boolean;
@@ -476,7 +476,7 @@ export interface SchemaFormProps {
      * Authentication provider for autocomplete fields.
      * Used to add authentication headers when fetching suggestions from callback URLs.
      */
-    authProvider?: import("../../types/index.js").AuthProvider;
+    authProvider?: import('../../types/index.js').AuthProvider;
     /**
      * Base URL for resolving relative autocomplete callback URLs.
      * @default ""

package/dist/components/form/types.js

@@ -9,18 +9,13 @@
  * Type guard to check if options are FieldOption objects
  */
 export function isFieldOptionArray(options) {
-    return (options.length > 0 &&
-        typeof options[0] === "object" &&
-        "value" in options[0]);
+    return options.length > 0 && typeof options[0] === 'object' && 'value' in options[0];
 }
 /**
  * Type guard to check if items are OneOfItem objects (JSON Schema oneOf pattern)
  */
 export function isOneOfArray(items) {
-    return (items.length > 0 &&
-        typeof items[0] === "object" &&
-        items[0] !== null &&
-        "const" in items[0]);
+    return (items.length > 0 && typeof items[0] === 'object' && items[0] !== null && 'const' in items[0]);
 }
 /**
  * Convert JSON Schema oneOf items to FieldOption format
@@ -32,7 +27,7 @@ export function isOneOfArray(items) {
 export function oneOfToOptions(oneOfItems) {
     return oneOfItems.map((item) => ({
         value: String(item.const),
-        label: item.title ?? String(item.const),
+        label: item.title ?? String(item.const)
     }));
 }
 /**
@@ -60,7 +55,7 @@ export function normalizeOptions(options) {
     // Handle string array (simple enum values)
     return options.map((opt) => ({
         value: String(opt),
-        label: String(opt),
+        label: String(opt)
     }));
 }
 /**

package/dist/components/icons/AlertCircleIcon.svelte

@@ -1,10 +1,5 @@
 <!-- Inline SVG equivalent of mdi:alert-circle (Material Design Icons) -->
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  aria-hidden="true"
->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
   <path
     d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
   />

package/dist/components/icons/CogIcon.svelte

@@ -1,10 +1,5 @@
 <!-- Inline SVG equivalent of mdi:cog (Material Design Icons) -->
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  aria-hidden="true"
->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
   <path
     d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"
   />

package/dist/components/interrupt/ChoicePrompt.stories.svelte

@@ -1,19 +1,19 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ChoicePrompt from "./ChoicePrompt.svelte";
-  import { fn } from "storybook/test";
-  import { createChoiceConfig } from "../../stories/utils.js";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ChoicePrompt from './ChoicePrompt.svelte';
+  import { fn } from 'storybook/test';
+  import { createChoiceConfig } from '../../stories/utils.js';
 
   const { Story } = defineMeta({
-    title: "Interrupt/ChoicePrompt",
+    title: 'Interrupt/ChoicePrompt',
     component: ChoicePrompt,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     args: {
       config: createChoiceConfig(),
       isResolved: false,
       isSubmitting: false,
-      onSubmit: fn(),
-    },
+      onSubmit: fn()
+    }
   });
 </script>
 
@@ -23,31 +23,31 @@
   name="Multi Select"
   args={{
     config: createChoiceConfig({
-      message: "Select the features to enable:",
+      message: 'Select the features to enable:',
       multiple: true,
       options: [
         {
-          value: "auth",
-          label: "Authentication",
-          description: "User login and signup",
+          value: 'auth',
+          label: 'Authentication',
+          description: 'User login and signup'
         },
         {
-          value: "analytics",
-          label: "Analytics",
-          description: "Usage tracking and metrics",
+          value: 'analytics',
+          label: 'Analytics',
+          description: 'Usage tracking and metrics'
         },
         {
-          value: "notifications",
-          label: "Notifications",
-          description: "Email and push alerts",
+          value: 'notifications',
+          label: 'Notifications',
+          description: 'Email and push alerts'
         },
         {
-          value: "export",
-          label: "Data Export",
-          description: "CSV and JSON export",
-        },
-      ],
-    }),
+          value: 'export',
+          label: 'Data Export',
+          description: 'CSV and JSON export'
+        }
+      ]
+    })
   }}
 />
 
@@ -55,14 +55,14 @@
   name="Resolved"
   args={{
     isResolved: true,
-    resolvedValue: "high",
-    resolvedByUserName: "Bob",
+    resolvedValue: 'high',
+    resolvedByUserName: 'Bob'
   }}
 />
 
 <Story
   name="Submitting"
   args={{
-    isSubmitting: true,
+    isSubmitting: true
   }}
 />

package/dist/components/interrupt/ChoicePrompt.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const ChoicePrompt: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import ChoicePrompt from "./ChoicePrompt.svelte";
+import ChoicePrompt from './ChoicePrompt.svelte';
 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;

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -8,8 +8,8 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import type { ChoiceConfig, InterruptChoice } from "../../types/interrupt.js";
+  import Icon from '@iconify/svelte';
+  import type { ChoiceConfig, InterruptChoice } from '../../types/interrupt.js';
 
   /**
    * Component props
@@ -38,7 +38,7 @@
     isSubmitting,
     error,
     resolvedByUserName,
-    onSubmit,
+    onSubmit
   }: Props = $props();
 
   /** Local state for selected values */
@@ -51,14 +51,11 @@
   const minSelections = $derived(config.minSelections ?? (isMultiple ? 0 : 1));
 
   /** Maximum selections allowed */
-  const maxSelections = $derived(
-    config.maxSelections ?? (isMultiple ? config.options.length : 1),
-  );
+  const maxSelections = $derived(config.maxSelections ?? (isMultiple ? config.options.length : 1));
 
   /** Check if submit is valid */
   const isValidSelection = $derived(
-    selectedValues.size >= minSelections &&
-      selectedValues.size <= maxSelections,
+    selectedValues.size >= minSelections && selectedValues.size <= maxSelections
   );
 
   /** Check if an option was selected in resolved state */
@@ -108,7 +105,7 @@
     if (isMultiple) {
       onSubmit(values);
     } else {
-      onSubmit(values[0] ?? "");
+      onSubmit(values[0] ?? '');
     }
   }
 </script>
@@ -130,48 +127,34 @@
   {/if}
 
   <!-- Options -->
-  <div
-    class="choice-prompt__options"
-    role={isMultiple ? "group" : "radiogroup"}
-  >
+  <div class="choice-prompt__options" role={isMultiple ? 'group' : 'radiogroup'}>
     {#each config.options as option (option.value)}
-      {@const isChecked = isResolved
-        ? isOptionResolved(option)
-        : selectedValues.has(option.value)}
+      {@const isChecked = isResolved ? isOptionResolved(option) : selectedValues.has(option.value)}
       <label
         class="choice-prompt__option"
         class:choice-prompt__option--selected={isChecked}
         class:choice-prompt__option--resolved={isResolved && isChecked}
       >
         <input
-          type={isMultiple ? "checkbox" : "radio"}
+          type={isMultiple ? 'checkbox' : 'radio'}
           name="choice-option"
           value={option.value}
           checked={isChecked}
           disabled={isResolved || isSubmitting}
-          onchange={(e) =>
-            handleOptionChange(option, (e.target as HTMLInputElement).checked)}
+          onchange={(e) => handleOptionChange(option, (e.target as HTMLInputElement).checked)}
           class="choice-prompt__input"
         />
         <span class="choice-prompt__checkmark">
           {#if isChecked}
-            <Icon
-              icon={isMultiple ? "mdi:checkbox-marked" : "mdi:radiobox-marked"}
-            />
+            <Icon icon={isMultiple ? 'mdi:checkbox-marked' : 'mdi:radiobox-marked'} />
           {:else}
-            <Icon
-              icon={isMultiple
-                ? "mdi:checkbox-blank-outline"
-                : "mdi:radiobox-blank"}
-            />
+            <Icon icon={isMultiple ? 'mdi:checkbox-blank-outline' : 'mdi:radiobox-blank'} />
           {/if}
         </span>
         <span class="choice-prompt__option-content">
           <span class="choice-prompt__option-label">{option.label}</span>
           {#if option.description}
-            <span class="choice-prompt__option-description"
-              >{option.description}</span
-            >
+            <span class="choice-prompt__option-description">{option.description}</span>
           {/if}
         </span>
       </label>
@@ -217,9 +200,7 @@
     <div class="choice-prompt__resolved-badge">
       <Icon icon="mdi:check-circle" />
       <span>
-        {resolvedByUserName
-          ? `Response submitted by ${resolvedByUserName}`
-          : "Response submitted"}
+        {resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
       </span>
     </div>
   {/if}
@@ -277,9 +258,7 @@
     transition: all var(--fd-transition-fast);
   }
 
-  .choice-prompt__option:hover:not(
-      .choice-prompt--resolved .choice-prompt__option
-    ) {
+  .choice-prompt__option:hover:not(.choice-prompt--resolved .choice-prompt__option) {
     background-color: var(--fd-subtle);
     border-color: var(--fd-border-strong);
   }
@@ -289,9 +268,7 @@
     border-color: var(--fd-interrupt-completed-border);
   }
 
-  .choice-prompt__option--selected:hover:not(
-      .choice-prompt--resolved .choice-prompt__option
-    ) {
+  .choice-prompt__option--selected:hover:not(.choice-prompt--resolved .choice-prompt__option) {
     background-color: var(--fd-primary-muted);
   }
 
@@ -302,8 +279,7 @@
     cursor: default;
   }
 
-  .choice-prompt--resolved
-    .choice-prompt__option:not(.choice-prompt__option--resolved) {
+  .choice-prompt--resolved .choice-prompt__option:not(.choice-prompt__option--resolved) {
     opacity: var(--fd-interrupt-not-selected-opacity);
     cursor: default;
   }

package/dist/components/interrupt/ChoicePrompt.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ChoiceConfig } from "../../types/interrupt.js";
+import type { ChoiceConfig } from '../../types/interrupt.js';
 /**
  * Component props
  */

package/dist/components/interrupt/ConfirmationPrompt.stories.svelte

@@ -1,20 +1,20 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import ConfirmationPrompt from "./ConfirmationPrompt.svelte";
-  import { fn } from "storybook/test";
-  import { createConfirmationConfig } from "../../stories/utils.js";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import ConfirmationPrompt from './ConfirmationPrompt.svelte';
+  import { fn } from 'storybook/test';
+  import { createConfirmationConfig } from '../../stories/utils.js';
 
   const { Story } = defineMeta({
-    title: "Interrupt/ConfirmationPrompt",
+    title: 'Interrupt/ConfirmationPrompt',
     component: ConfirmationPrompt,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     args: {
       config: createConfirmationConfig(),
       isResolved: false,
       isSubmitting: false,
       onConfirm: fn(),
-      onDecline: fn(),
-    },
+      onDecline: fn()
+    }
   });
 </script>
 
@@ -24,10 +24,10 @@
   name="Custom Labels"
   args={{
     config: createConfirmationConfig({
-      message: "Deploy to production?",
-      confirmLabel: "Deploy",
-      cancelLabel: "Abort",
-    }),
+      message: 'Deploy to production?',
+      confirmLabel: 'Deploy',
+      cancelLabel: 'Abort'
+    })
   }}
 />
 
@@ -35,7 +35,7 @@
   name="Confirmed"
   args={{
     isResolved: true,
-    resolvedValue: true,
+    resolvedValue: true
   }}
 />
 
@@ -43,21 +43,21 @@
   name="Declined"
   args={{
     isResolved: true,
-    resolvedValue: false,
+    resolvedValue: false
   }}
 />
 
 <Story
   name="Submitting"
   args={{
-    isSubmitting: true,
+    isSubmitting: true
   }}
 />
 
 <Story
   name="With Error"
   args={{
-    error: "Network error: Failed to submit response",
+    error: 'Network error: Failed to submit response'
   }}
 />
 
@@ -66,6 +66,6 @@
   args={{
     isResolved: true,
     resolvedValue: true,
-    resolvedByUserName: "Alice",
+    resolvedByUserName: 'Alice'
   }}
 />

package/dist/components/interrupt/ConfirmationPrompt.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const ConfirmationPrompt: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import ConfirmationPrompt from "./ConfirmationPrompt.svelte";
+import ConfirmationPrompt from './ConfirmationPrompt.svelte';
 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;

package/dist/components/interrupt/ConfirmationPrompt.svelte

@@ -8,8 +8,8 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import type { ConfirmationConfig } from "../../types/interrupt.js";
+  import Icon from '@iconify/svelte';
+  import type { ConfirmationConfig } from '../../types/interrupt.js';
 
   /**
    * Component props
@@ -41,14 +41,14 @@
     error,
     resolvedByUserName,
     onConfirm,
-    onDecline,
+    onDecline
   }: Props = $props();
 
   /** Computed label for confirm button */
-  const confirmLabel = $derived(config.confirmLabel ?? "Yes");
+  const confirmLabel = $derived(config.confirmLabel ?? 'Yes');
 
   /** Computed label for decline/cancel button */
-  const declineLabel = $derived(config.cancelLabel ?? "No");
+  const declineLabel = $derived(config.cancelLabel ?? 'No');
 </script>
 
 <div
@@ -72,10 +72,8 @@
     <button
       type="button"
       class="confirmation-prompt__button confirmation-prompt__button--decline"
-      class:confirmation-prompt__button--selected={isResolved &&
-        resolvedValue === false}
-      class:confirmation-prompt__button--not-selected={isResolved &&
-        resolvedValue !== false}
+      class:confirmation-prompt__button--selected={isResolved && resolvedValue === false}
+      class:confirmation-prompt__button--not-selected={isResolved && resolvedValue !== false}
       onclick={onDecline}
       disabled={isResolved || isSubmitting}
       aria-label={declineLabel}
@@ -96,10 +94,8 @@
     <button
       type="button"
       class="confirmation-prompt__button confirmation-prompt__button--confirm"
-      class:confirmation-prompt__button--selected={isResolved &&
-        resolvedValue === true}
-      class:confirmation-prompt__button--not-selected={isResolved &&
-        resolvedValue !== true}
+      class:confirmation-prompt__button--selected={isResolved && resolvedValue === true}
+      class:confirmation-prompt__button--not-selected={isResolved && resolvedValue !== true}
       onclick={onConfirm}
       disabled={isResolved || isSubmitting}
       aria-label={confirmLabel}
@@ -123,9 +119,7 @@
     <div class="confirmation-prompt__resolved-badge">
       <Icon icon="mdi:check-circle" />
       <span>
-        {resolvedByUserName
-          ? `Response submitted by ${resolvedByUserName}`
-          : "Response submitted"}
+        {resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
       </span>
     </div>
   {/if}

package/dist/components/interrupt/ConfirmationPrompt.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ConfirmationConfig } from "../../types/interrupt.js";
+import type { ConfirmationConfig } from '../../types/interrupt.js';
 /**
  * Component props
  */

package/dist/components/interrupt/FormPrompt.svelte

@@ -8,9 +8,9 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import SchemaForm from "../SchemaForm.svelte";
-  import type { FormConfig } from "../../types/interrupt.js";
+  import Icon from '@iconify/svelte';
+  import SchemaForm from '../SchemaForm.svelte';
+  import type { FormConfig } from '../../types/interrupt.js';
 
   /**
    * Component props
@@ -39,7 +39,7 @@
     isSubmitting,
     error,
     resolvedByUserName,
-    onSubmit,
+    onSubmit
   }: Props = $props();
 
   /** Local state for form values */
@@ -47,9 +47,7 @@
   let formValues = $state<Record<string, unknown>>(config.defaultValues ?? {});
 
   /** Display values - either resolved or current form values */
-  const displayValues = $derived(
-    isResolved ? (resolvedValue ?? {}) : formValues,
-  );
+  const displayValues = $derived(isResolved ? (resolvedValue ?? {}) : formValues);
 
   /**
    * Handle form value changes
@@ -71,9 +69,9 @@
    * Format resolved value for display
    */
   function formatResolvedValue(value: unknown): string {
-    if (value === null || value === undefined) return "—";
-    if (typeof value === "boolean") return value ? "Yes" : "No";
-    if (typeof value === "object") return JSON.stringify(value, null, 2);
+    if (value === null || value === undefined) return '—';
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    if (typeof value === 'object') return JSON.stringify(value, null, 2);
     return String(value);
   }
 </script>
@@ -116,8 +114,7 @@
       <div class="form-prompt__values-list">
         {#each Object.entries(config.schema.properties ?? {}) as [key, field]}
           {@const value = displayValues[key]}
-          {@const fieldTitle =
-            ((field as Record<string, unknown>).title as string) ?? key}
+          {@const fieldTitle = ((field as Record<string, unknown>).title as string) ?? key}
           <div class="form-prompt__value-item">
             <span class="form-prompt__value-label">{fieldTitle}</span>
             <span class="form-prompt__value-content">
@@ -134,9 +131,7 @@
     <div class="form-prompt__resolved-badge">
       <Icon icon="mdi:check-circle" />
       <span>
-        {resolvedByUserName
-          ? `Response submitted by ${resolvedByUserName}`
-          : "Response submitted"}
+        {resolvedByUserName ? `Response submitted by ${resolvedByUserName}` : 'Response submitted'}
       </span>
     </div>
   {/if}

package/dist/components/interrupt/FormPrompt.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { FormConfig } from "../../types/interrupt.js";
+import type { FormConfig } from '../../types/interrupt.js';
 /**
  * Component props
  */