@flowdrop/flowdrop 1.0.0 → 1.1.0

package/dist/components/form/templateAutocomplete.js

@@ -10,20 +10,20 @@
  *
  * @module components/form/templateAutocomplete
  */
-import { autocompletion } from '@codemirror/autocomplete';
-import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from '../../services/variableService.js';
+import { autocompletion, } from "@codemirror/autocomplete";
+import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren, } from "../../services/variableService.js";
 /**
  * Icon type hints for different variable types in autocomplete dropdown.
  */
 const TYPE_ICONS = {
-    string: '𝑆',
-    number: '#',
-    integer: '#',
-    float: '#',
-    boolean: '☑',
-    array: '[]',
-    object: '{}',
-    mixed: '⋯'
+    string: "𝑆",
+    number: "#",
+    integer: "#",
+    float: "#",
+    boolean: "☑",
+    array: "[]",
+    object: "{}",
+    mixed: "⋯",
 };
 /**
  * Extracts the current variable path being typed inside {{ }}.
@@ -43,12 +43,16 @@ function extractVariablePath(text, pos) {
     let searchPos = pos - 1;
     while (searchPos >= 0) {
         // Check for opening {{
-        if (text[searchPos] === '{' && searchPos > 0 && text[searchPos - 1] === '{') {
+        if (text[searchPos] === "{" &&
+            searchPos > 0 &&
+            text[searchPos - 1] === "{") {
             openBracePos = searchPos - 1;
             break;
         }
         // Check for closing }} - means we're outside an expression
-        if (text[searchPos] === '}' && searchPos > 0 && text[searchPos - 1] === '}') {
+        if (text[searchPos] === "}" &&
+            searchPos > 0 &&
+            text[searchPos - 1] === "}") {
             return null;
         }
         searchPos--;
@@ -66,8 +70,9 @@ function extractVariablePath(text, pos) {
     return {
         path: content,
         startPos: contentStart +
-            (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
-        isInsideExpression: true
+            (text.slice(contentStart, pos).length -
+                text.slice(contentStart, pos).trimStart().length),
+        isInsideExpression: true,
     };
 }
 /**
@@ -78,35 +83,35 @@ function extractVariablePath(text, pos) {
  */
 function getCompletionType(path) {
     // Empty or only whitespace - show top-level variables
-    if (path.trim() === '') {
-        return { type: 'top-level' };
+    if (path.trim() === "") {
+        return { type: "top-level" };
     }
     // Ends with [ - show array indices
-    if (path.endsWith('[')) {
+    if (path.endsWith("[")) {
         const parentPath = path.slice(0, -1);
-        return { type: 'array-index', parentPath };
+        return { type: "array-index", parentPath };
     }
     // Ends with . - show child properties
-    if (path.endsWith('.')) {
+    if (path.endsWith(".")) {
         const parentPath = path.slice(0, -1);
-        return { type: 'property', parentPath };
+        return { type: "property", parentPath };
     }
     // Otherwise, we're typing a variable name - show matching options
-    const lastDotIndex = path.lastIndexOf('.');
-    const lastBracketIndex = path.lastIndexOf('[');
+    const lastDotIndex = path.lastIndexOf(".");
+    const lastBracketIndex = path.lastIndexOf("[");
     const lastSeparator = Math.max(lastDotIndex, lastBracketIndex);
     if (lastSeparator === -1) {
         // Typing at top level
-        return { type: 'top-level' };
+        return { type: "top-level" };
     }
     // Extract parent path based on separator
     if (lastDotIndex > lastBracketIndex) {
         // Last separator was a dot
-        return { type: 'property', parentPath: path.slice(0, lastDotIndex) };
+        return { type: "property", parentPath: path.slice(0, lastDotIndex) };
     }
     else {
         // Last separator was a bracket
-        return { type: 'array-index', parentPath: path.slice(0, lastBracketIndex) };
+        return { type: "array-index", parentPath: path.slice(0, lastBracketIndex) };
     }
 }
 /**
@@ -116,23 +121,23 @@ function getCompletionType(path) {
  * @param prefix - Prefix to add to the completion label
  * @returns A CodeMirror Completion object
  */
-function variableToCompletion(variable, prefix = '') {
+function variableToCompletion(variable, prefix = "") {
     const icon = TYPE_ICONS[variable.type] ?? TYPE_ICONS.mixed;
     const hasChildProps = variable.properties && Object.keys(variable.properties).length > 0;
-    const isArray = variable.type === 'array';
+    const isArray = variable.type === "array";
     // Add indicator if variable can be drilled into
-    let suffix = '';
+    let suffix = "";
     if (hasChildProps)
-        suffix = '.';
+        suffix = ".";
     else if (isArray)
-        suffix = '[';
+        suffix = "[";
     return {
         label: `${prefix}${variable.name}`,
-        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? ' ' + suffix : ''}`,
+        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? " " + suffix : ""}`,
         detail: variable.type,
         info: variable.description,
-        type: 'variable',
-        boost: hasChildProps || isArray ? 1 : 0 // Boost drillable variables
+        type: "variable",
+        boost: hasChildProps || isArray ? 1 : 0, // Boost drillable variables
     };
 }
 /**
@@ -150,13 +155,13 @@ function createTemplateCompletionSource(schema) {
         if (!pathInfo) {
             // Check if user just typed {{
             const beforeCursor = text.slice(Math.max(0, pos - 2), pos);
-            if (beforeCursor === '{{') {
+            if (beforeCursor === "{{") {
                 // Show top-level variables
                 const options = Object.values(schema.variables).map((v) => variableToCompletion(v));
                 return {
                     from: pos,
                     options,
-                    validFor: /^[\w.[\]]*$/
+                    validFor: /^[\w.[\]]*$/,
                 };
             }
             return null;
@@ -166,42 +171,46 @@ function createTemplateCompletionSource(schema) {
         let options = [];
         let from = pos;
         switch (completionType.type) {
-            case 'top-level': {
+            case "top-level": {
                 // Show all top-level variables
                 const currentWord = path.trim();
                 options = Object.values(schema.variables)
-                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === "" ||
+                    v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // Calculate from position for replacement
                 from = startPos + (path.length - path.trimStart().length);
                 break;
             }
-            case 'property': {
+            case "property": {
                 // Show child properties of the parent
                 const children = getChildVariables(schema, completionType.parentPath);
-                const currentWord = path.slice(path.lastIndexOf('.') + 1);
+                const currentWord = path.slice(path.lastIndexOf(".") + 1);
                 options = children
-                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === "" ||
+                    v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // From should be right after the last dot
-                from = startPos + path.lastIndexOf('.') + 1;
+                from = startPos + path.lastIndexOf(".") + 1;
                 break;
             }
-            case 'array-index': {
+            case "array-index": {
                 // Check if the parent is actually an array
                 if (isArrayVariable(schema, completionType.parentPath)) {
                     const indices = getArrayIndexSuggestions(5);
-                    const currentIndex = path.slice(path.lastIndexOf('[') + 1);
+                    const currentIndex = path.slice(path.lastIndexOf("[") + 1);
                     options = indices
-                        .filter((idx) => currentIndex === '' || idx.startsWith(currentIndex))
+                        .filter((idx) => currentIndex === "" || idx.startsWith(currentIndex))
                         .map((idx) => ({
                         label: idx,
-                        displayLabel: idx === '*]' ? '* (all items)' : `[${idx}`,
-                        detail: idx === '*]' ? 'Iterate all items' : `Index ${idx.slice(0, -1)}`,
-                        type: 'keyword'
+                        displayLabel: idx === "*]" ? "* (all items)" : `[${idx}`,
+                        detail: idx === "*]"
+                            ? "Iterate all items"
+                            : `Index ${idx.slice(0, -1)}`,
+                        type: "keyword",
                     }));
                     // From should be right after the [
-                    from = startPos + path.lastIndexOf('[') + 1;
+                    from = startPos + path.lastIndexOf("[") + 1;
                 }
                 break;
             }
@@ -212,7 +221,7 @@ function createTemplateCompletionSource(schema) {
         return {
             from,
             options,
-            validFor: /^[\w\]*]*$/
+            validFor: /^[\w\]*]*$/,
         };
     };
 }
@@ -235,20 +244,20 @@ export function createTemplateAutocomplete(schema) {
         override: [createTemplateCompletionSource(schema)],
         activateOnTyping: true,
         defaultKeymap: true,
-        optionClass: () => 'cm-template-autocomplete-option',
+        optionClass: () => "cm-template-autocomplete-option",
         icons: false, // We use our own icons in displayLabel
         addToOptions: [
             {
                 render: (completion) => {
-                    const el = document.createElement('span');
-                    el.className = 'cm-template-autocomplete-info';
+                    const el = document.createElement("span");
+                    el.className = "cm-template-autocomplete-info";
                     if (completion.info) {
                         el.textContent = String(completion.info);
                     }
                     return el;
                 },
-                position: 100
-            }
-        ]
+                position: 100,
+            },
+        ],
     });
 }

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,13 +9,18 @@
  * 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
@@ -27,7 +32,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),
     }));
 }
 /**
@@ -55,7 +60,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

@@ -0,0 +1,11 @@
+<!-- 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"
+>
+  <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"
+  />
+</svg>

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

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

@@ -0,0 +1,11 @@
+<!-- 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"
+>
+  <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"
+  />
+</svg>

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

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

@@ -1,52 +1,68 @@
 <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',
-		component: ChoicePrompt,
-		tags: ['autodocs'],
-		args: {
-			config: createChoiceConfig(),
-			isResolved: false,
-			isSubmitting: false,
-			onSubmit: fn()
-		}
-	});
+  const { Story } = defineMeta({
+    title: "Interrupt/ChoicePrompt",
+    component: ChoicePrompt,
+    tags: ["autodocs"],
+    args: {
+      config: createChoiceConfig(),
+      isResolved: false,
+      isSubmitting: false,
+      onSubmit: fn(),
+    },
+  });
 </script>
 
 <Story name="Single Select" />
 
 <Story
-	name="Multi Select"
-	args={{
-		config: createChoiceConfig({
-			message: 'Select the features to enable:',
-			multiple: true,
-			options: [
-				{ value: 'auth', label: 'Authentication', description: 'User login and signup' },
-				{ value: 'analytics', label: 'Analytics', description: 'Usage tracking and metrics' },
-				{ value: 'notifications', label: 'Notifications', description: 'Email and push alerts' },
-				{ value: 'export', label: 'Data Export', description: 'CSV and JSON export' }
-			]
-		})
-	}}
+  name="Multi Select"
+  args={{
+    config: createChoiceConfig({
+      message: "Select the features to enable:",
+      multiple: true,
+      options: [
+        {
+          value: "auth",
+          label: "Authentication",
+          description: "User login and signup",
+        },
+        {
+          value: "analytics",
+          label: "Analytics",
+          description: "Usage tracking and metrics",
+        },
+        {
+          value: "notifications",
+          label: "Notifications",
+          description: "Email and push alerts",
+        },
+        {
+          value: "export",
+          label: "Data Export",
+          description: "CSV and JSON export",
+        },
+      ],
+    }),
+  }}
 />
 
 <Story
-	name="Resolved"
-	args={{
-		isResolved: true,
-		resolvedValue: 'high',
-		resolvedByUserName: 'Bob'
-	}}
+  name="Resolved"
+  args={{
+    isResolved: true,
+    resolvedValue: "high",
+    resolvedByUserName: "Bob",
+  }}
 />
 
 <Story
-	name="Submitting"
-	args={{
-		isSubmitting: true
-	}}
+  name="Submitting"
+  args={{
+    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;