@flowdrop/flowdrop 1.5.0 → 1.6.0

package/dist/components/SettingsPanel.svelte

@@ -28,23 +28,23 @@
 -->
 
 <script lang="ts">
-  import Icon from "@iconify/svelte";
-  import { SchemaForm } from "../form/index.js";
-  import type { ConfigSchema } from "../types/index.js";
-  import type { SettingsCategory } from "../types/settings.js";
+  import Icon from '@iconify/svelte';
+  import { SchemaForm } from '../form/index.js';
+  import type { ConfigSchema } from '../types/index.js';
+  import type { SettingsCategory } from '../types/settings.js';
   import {
     SETTINGS_CATEGORIES,
     SETTINGS_CATEGORY_LABELS,
-    SETTINGS_CATEGORY_ICONS,
-  } from "../types/settings.js";
+    SETTINGS_CATEGORY_ICONS
+  } from '../types/settings.js';
   import {
     getSettings,
     updateSettings,
     resetSettings,
     syncSettingsToApi,
-    getSyncStatus,
-  } from "../stores/settingsStore.svelte.js";
-  import { logger } from "../utils/logger.js";
+    getSyncStatus
+  } from '../stores/settingsStore.svelte.js';
+  import { logger } from '../utils/logger.js';
 
   /**
    * Props interface for SettingsPanel component
@@ -57,10 +57,7 @@
     /** Show the reset button */
     showResetButton?: boolean;
     /** Callback when settings change */
-    onSettingsChange?: (
-      category: SettingsCategory,
-      values: Record<string, unknown>,
-    ) => void;
+    onSettingsChange?: (category: SettingsCategory, values: Record<string, unknown>) => void;
     /** Callback when close is requested */
     onClose?: () => void;
     /** Custom CSS class */
@@ -73,209 +70,212 @@
     showResetButton = true,
     onSettingsChange,
     onClose,
-    class: className = "",
+    class: className = ''
   }: Props = $props();
 
   /**
    * Currently active tab
    */
   // svelte-ignore state_referenced_locally — initial default, user switches tabs
-  let activeTab = $state<SettingsCategory>(categories[0] ?? "theme");
+  let activeTab = $state<SettingsCategory>(categories[0] ?? 'theme');
 
   /**
    * Whether sync is in progress
    */
-  let isSyncing = $derived(getSyncStatus().status === "syncing");
+  let isSyncing = $derived(getSyncStatus().status === 'syncing');
 
   /**
    * JSON Schema definitions for each settings category
    */
   const schemas: Record<SettingsCategory, ConfigSchema> = {
     theme: {
-      type: "object",
+      type: 'object',
       properties: {
         preference: {
-          type: "string",
-          title: "Theme Preference",
-          description: "Choose your preferred color scheme",
+          type: 'string',
+          title: 'Theme Preference',
+          description: 'Choose your preferred color scheme',
           oneOf: [
-            { const: "light", title: "Light" },
-            { const: "dark", title: "Dark" },
-            { const: "auto", title: "Auto (System)" },
+            { const: 'light', title: 'Light' },
+            { const: 'dark', title: 'Dark' },
+            { const: 'auto', title: 'Auto (System)' }
           ],
-          default: "auto",
-        },
-      },
+          default: 'auto'
+        }
+      }
     },
     editor: {
-      type: "object",
+      type: 'object',
       properties: {
         showGrid: {
-          type: "boolean",
-          title: "Show Grid",
-          description: "Display grid lines on the canvas",
-          default: true,
+          type: 'boolean',
+          title: 'Show Grid',
+          description: 'Display grid lines on the canvas',
+          default: true
         },
         snapToGrid: {
-          type: "boolean",
-          title: "Snap to Grid",
-          description: "Snap nodes to grid when dragging",
-          default: true,
+          type: 'boolean',
+          title: 'Snap to Grid',
+          description: 'Snap nodes to grid when dragging',
+          default: true
         },
         gridSize: {
-          type: "number",
-          title: "Grid Size",
-          description: "Grid cell size in pixels",
+          type: 'number',
+          title: 'Grid Size',
+          description: 'Grid cell size in pixels',
           minimum: 5,
           maximum: 50,
-          default: 20,
+          default: 20
         },
         showMinimap: {
-          type: "boolean",
-          title: "Show Minimap",
-          description: "Display navigation minimap",
-          default: true,
+          type: 'boolean',
+          title: 'Show Minimap',
+          description: 'Display navigation minimap',
+          default: true
         },
         defaultZoom: {
-          type: "number",
-          title: "Default Zoom",
-          description: "Initial zoom level (1 = 100%)",
+          type: 'number',
+          title: 'Default Zoom',
+          description: 'Initial zoom level (1 = 100%)',
           minimum: 0.25,
           maximum: 2,
-          default: 1,
+          default: 1
         },
         fitViewOnLoad: {
-          type: "boolean",
-          title: "Fit View on Load",
-          description: "Automatically fit workflow to view when loading",
-          default: true,
+          type: 'boolean',
+          title: 'Fit View on Load',
+          description: 'Automatically fit workflow to view when loading',
+          default: true
         },
         proximityConnect: {
-          type: "boolean",
-          title: "Proximity Connect",
-          description:
-            "Auto-connect compatible ports when dragging nodes near each other",
-          default: false,
+          type: 'boolean',
+          title: 'Proximity Connect',
+          description: 'Auto-connect compatible ports when dragging nodes near each other',
+          default: false
         },
         proximityConnectDistance: {
-          type: "number",
-          title: "Proximity Distance",
-          description: "Distance threshold in pixels for proximity connect",
+          type: 'number',
+          title: 'Proximity Distance',
+          description: 'Distance threshold in pixels for proximity connect',
           minimum: 50,
           maximum: 500,
-          default: 150,
-        },
-      },
+          default: 150
+        }
+      }
     },
     ui: {
-      type: "object",
+      type: 'object',
       properties: {
         sidebarWidth: {
-          type: "number",
-          title: "Sidebar Width",
-          description: "Width of the node sidebar in pixels",
+          type: 'number',
+          title: 'Sidebar Width',
+          description: 'Width of the node sidebar in pixels',
           minimum: 200,
           maximum: 500,
-          default: 280,
+          default: 280
         },
         sidebarCollapsed: {
-          type: "boolean",
-          title: "Sidebar Collapsed",
-          description: "Start with sidebar collapsed",
-          default: false,
+          type: 'boolean',
+          title: 'Sidebar Collapsed',
+          description: 'Start with sidebar collapsed',
+          default: false
         },
         compactMode: {
-          type: "boolean",
-          title: "Compact Mode",
-          description: "Use compact UI with smaller spacing",
-          default: false,
+          type: 'boolean',
+          title: 'Compact Mode',
+          description: 'Use compact UI with smaller spacing',
+          default: false
         },
         theme: {
-          type: "string",
-          title: "UI Theme",
-          description: "Visual style and layout of the editor",
+          type: 'string',
+          title: 'UI Theme',
+          description: 'Visual style and layout of the editor',
           oneOf: [
-            { const: "default", title: "Default" },
-            { const: "minimal", title: "Minimal" },
+            { const: 'default', title: 'Default' },
+            { const: 'minimal', title: 'Minimal' }
           ],
-          default: "default",
-        },
-      },
+          default: 'default'
+        }
+      }
     },
     behavior: {
-      type: "object",
+      type: 'object',
       properties: {
         autoSave: {
-          type: "boolean",
-          title: "Auto Save",
-          description: "Automatically save changes",
-          default: false,
+          type: 'boolean',
+          title: 'Auto Save',
+          description: 'Automatically save changes',
+          default: false
         },
         autoSaveInterval: {
-          type: "number",
-          title: "Auto Save Interval",
-          description: "Time between auto-saves in milliseconds",
+          type: 'number',
+          title: 'Auto Save Interval',
+          description: 'Time between auto-saves in milliseconds',
           minimum: 5000,
           maximum: 300000,
-          default: 30000,
+          default: 30000
         },
         undoHistoryLimit: {
-          type: "number",
-          title: "Undo History Limit",
-          description: "Maximum number of undo steps (0 to disable)",
+          type: 'number',
+          title: 'Undo History Limit',
+          description: 'Maximum number of undo steps (0 to disable)',
           minimum: 0,
           maximum: 200,
-          default: 0,
+          default: 0
         },
         confirmDelete: {
-          type: "boolean",
-          title: "Confirm Delete",
-          description: "Show confirmation before deleting nodes",
-          default: true,
+          type: 'boolean',
+          title: 'Confirm Delete',
+          description: 'Show confirmation before deleting nodes',
+          default: true
         },
-      },
+        chatAutoRetry: {
+          type: 'boolean',
+          title: 'AI Chat Auto-retry',
+          description: 'Automatically ask the AI to self-correct when commands fail',
+          default: true
+        }
+      }
     },
     api: {
-      type: "object",
+      type: 'object',
       properties: {
         timeout: {
-          type: "number",
-          title: "Request Timeout",
-          description: "API request timeout in milliseconds",
+          type: 'number',
+          title: 'Request Timeout',
+          description: 'API request timeout in milliseconds',
           minimum: 5000,
           maximum: 120000,
-          default: 30000,
+          default: 30000
         },
         retryEnabled: {
-          type: "boolean",
-          title: "Enable Retry",
-          description: "Automatically retry failed requests",
-          default: true,
+          type: 'boolean',
+          title: 'Enable Retry',
+          description: 'Automatically retry failed requests',
+          default: true
         },
         retryAttempts: {
-          type: "number",
-          title: "Retry Attempts",
-          description: "Maximum number of retry attempts",
+          type: 'number',
+          title: 'Retry Attempts',
+          description: 'Maximum number of retry attempts',
           minimum: 1,
           maximum: 10,
-          default: 3,
+          default: 3
         },
         cacheEnabled: {
-          type: "boolean",
-          title: "Enable Caching",
-          description: "Cache API responses for better performance",
-          default: true,
-        },
-      },
-    },
+          type: 'boolean',
+          title: 'Enable Caching',
+          description: 'Cache API responses for better performance',
+          default: true
+        }
+      }
+    }
   };
 
   /**
    * Get current values for a category from the store
    */
-  function getCategoryValues(
-    category: SettingsCategory,
-  ): Record<string, unknown> {
+  function getCategoryValues(category: SettingsCategory): Record<string, unknown> {
     const settings = getSettings();
     const categorySettings = settings[category];
     // Convert to Record<string, unknown> for SchemaForm compatibility
@@ -285,10 +285,7 @@
   /**
    * Handle form value changes
    */
-  function handleChange(
-    category: SettingsCategory,
-    values: Record<string, unknown>,
-  ): void {
+  function handleChange(category: SettingsCategory, values: Record<string, unknown>): void {
     // Update the store
     updateSettings({ [category]: values });
 
@@ -305,7 +302,7 @@
     try {
       await syncSettingsToApi();
     } catch (error) {
-      logger.error("Failed to sync settings:", error);
+      logger.error('Failed to sync settings:', error);
     }
   }
 
@@ -313,11 +310,7 @@
    * Handle reset button click
    */
   function handleReset(): void {
-    if (
-      confirm(
-        `Reset ${SETTINGS_CATEGORY_LABELS[activeTab]} settings to defaults?`,
-      )
-    ) {
+    if (confirm(`Reset ${SETTINGS_CATEGORY_LABELS[activeTab]} settings to defaults?`)) {
       resetSettings([activeTab]);
     }
   }
@@ -326,7 +319,7 @@
    * Handle reset all button click
    */
   function handleResetAll(): void {
-    if (confirm("Reset all settings to defaults?")) {
+    if (confirm('Reset all settings to defaults?')) {
       resetSettings();
     }
   }
@@ -339,16 +332,16 @@
     let newIndex = index;
 
     switch (event.key) {
-      case "ArrowLeft":
+      case 'ArrowLeft':
         newIndex = index > 0 ? index - 1 : tabs.length - 1;
         break;
-      case "ArrowRight":
+      case 'ArrowRight':
         newIndex = index < tabs.length - 1 ? index + 1 : 0;
         break;
-      case "Home":
+      case 'Home':
         newIndex = 0;
         break;
-      case "End":
+      case 'End':
         newIndex = tabs.length - 1;
         break;
       default:
@@ -360,7 +353,7 @@
 
     // Focus the new tab
     const tabElement = document.querySelector(
-      `[data-tab="${tabs[newIndex]}"]`,
+      `[data-tab="${tabs[newIndex]}"]`
     ) as HTMLElement | null;
     tabElement?.focus();
   }
@@ -368,11 +361,7 @@
 
 <div class="flowdrop-settings-panel {className}">
   <!-- Tab Navigation -->
-  <div
-    class="flowdrop-settings-panel__tabs"
-    role="tablist"
-    aria-label="Settings categories"
-  >
+  <div class="flowdrop-settings-panel__tabs" role="tablist" aria-label="Settings categories">
     {#each categories as category, index (category)}
       <button
         class="flowdrop-settings-panel__tab"
@@ -385,13 +374,8 @@
         onclick={() => (activeTab = category)}
         onkeydown={(e) => handleTabKeydown(e, index)}
       >
-        <Icon
-          icon={SETTINGS_CATEGORY_ICONS[category]}
-          class="flowdrop-settings-panel__tab-icon"
-        />
-        <span class="flowdrop-settings-panel__tab-label"
-          >{SETTINGS_CATEGORY_LABELS[category]}</span
-        >
+        <Icon icon={SETTINGS_CATEGORY_ICONS[category]} class="flowdrop-settings-panel__tab-icon" />
+        <span class="flowdrop-settings-panel__tab-label">{SETTINGS_CATEGORY_LABELS[category]}</span>
       </button>
     {/each}
   </div>
@@ -476,14 +460,10 @@
       <Icon icon="mdi:alert-circle" />
       <span>{getSyncStatus().error}</span>
     </div>
-  {:else if getSyncStatus().status === "synced" && getSyncStatus().lastSyncedAt}
+  {:else if getSyncStatus().status === 'synced' && getSyncStatus().lastSyncedAt}
     <div class="flowdrop-settings-panel__synced">
       <Icon icon="mdi:check-circle" />
-      <span
-        >Synced {new Date(
-          getSyncStatus().lastSyncedAt!,
-        ).toLocaleTimeString()}</span
-      >
+      <span>Synced {new Date(getSyncStatus().lastSyncedAt!).toLocaleTimeString()}</span>
     </div>
   {/if}
 </div>

package/dist/components/SettingsPanel.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SettingsCategory } from "../types/settings.js";
+import type { SettingsCategory } from '../types/settings.js';
 /**
  * Props interface for SettingsPanel component
  */

package/dist/components/StatusIcon.stories.svelte

@@ -1,45 +1,34 @@
 <script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import StatusIcon from "./StatusIcon.svelte";
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import StatusIcon from './StatusIcon.svelte';
 
   const { Story } = defineMeta({
-    title: "Display/StatusIcon",
+    title: 'Display/StatusIcon',
     component: StatusIcon,
-    tags: ["autodocs"],
+    tags: ['autodocs'],
     argTypes: {
       status: {
-        control: { type: "select" },
-        options: [
-          "idle",
-          "pending",
-          "running",
-          "completed",
-          "failed",
-          "cancelled",
-          "skipped",
-        ],
+        control: { type: 'select' },
+        options: ['idle', 'pending', 'running', 'completed', 'failed', 'cancelled', 'skipped']
       },
       size: {
-        control: { type: "select" },
-        options: ["sm", "md", "lg", "xl"],
+        control: { type: 'select' },
+        options: ['sm', 'md', 'lg', 'xl']
       },
-      showBackground: { control: "boolean" },
-    },
+      showBackground: { control: 'boolean' }
+    }
   });
 </script>
 
-<Story name="Idle" args={{ status: "idle" }} />
+<Story name="Idle" args={{ status: 'idle' }} />
 
-<Story name="Running" args={{ status: "running" }} />
+<Story name="Running" args={{ status: 'running' }} />
 
-<Story name="Completed" args={{ status: "completed" }} />
+<Story name="Completed" args={{ status: 'completed' }} />
 
-<Story name="Failed" args={{ status: "failed" }} />
+<Story name="Failed" args={{ status: 'failed' }} />
 
-<Story
-  name="With Background"
-  args={{ status: "completed", showBackground: true }}
-/>
+<Story name="With Background" args={{ status: 'completed', showBackground: true }} />
 
 <Story name="All Statuses">
   <div style="display: flex; flex-direction: column; gap: 1.5rem;">
@@ -56,9 +45,7 @@
       </div>
     </div>
     <div>
-      <div style="margin-bottom: 0.5rem; font-weight: 600;">
-        With Background
-      </div>
+      <div style="margin-bottom: 0.5rem; font-weight: 600;">With Background</div>
       <div style="display: flex; gap: 1rem; align-items: center;">
         <StatusIcon status="idle" showBackground />
         <StatusIcon status="pending" showBackground />

package/dist/components/StatusIcon.stories.svelte.d.ts

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

@@ -5,13 +5,13 @@
 -->
 
 <script lang="ts">
-  import type { NodeExecutionStatus } from "../types/index.js";
-  import Icon from "@iconify/svelte";
-  import { getStatusColor, getStatusIcon } from "../utils/nodeStatus.js";
+  import type { NodeExecutionStatus } from '../types/index.js';
+  import Icon from '@iconify/svelte';
+  import { getStatusColor, getStatusIcon } from '../utils/nodeStatus.js';
 
   interface Props {
     status: NodeExecutionStatus;
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     showBackground?: boolean;
     class?: string;
   }
@@ -21,28 +21,28 @@
   // Size configurations
   const sizeConfig = {
     sm: {
-      iconSize: "12px",
-      backgroundSize: "20px",
-      backgroundRadius: "0.25rem",
+      iconSize: '12px',
+      backgroundSize: '20px',
+      backgroundRadius: '0.25rem'
     },
     md: {
-      iconSize: "16px",
-      backgroundSize: "24px",
-      backgroundRadius: "0.375rem",
+      iconSize: '16px',
+      backgroundSize: '24px',
+      backgroundRadius: '0.375rem'
     },
     lg: {
-      iconSize: "24px",
-      backgroundSize: "48px",
-      backgroundRadius: "0.5rem",
+      iconSize: '24px',
+      backgroundSize: '48px',
+      backgroundRadius: '0.5rem'
     },
     xl: {
-      iconSize: "28px",
-      backgroundSize: "56px",
-      backgroundRadius: "0.75rem",
-    },
+      iconSize: '28px',
+      backgroundSize: '56px',
+      backgroundRadius: '0.75rem'
+    }
   };
 
-  const config = $derived(sizeConfig[props.size || "md"]);
+  const config = $derived(sizeConfig[props.size || 'md']);
   const statusColor = $derived(getStatusColor(props.status));
   const statusIcon = $derived(getStatusIcon(props.status));
 </script>
@@ -103,7 +103,7 @@
   }
 
   /* Animation for running status */
-  .status-icon--with-background[title="running"] {
+  .status-icon--with-background[title='running'] {
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 

package/dist/components/StatusIcon.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { NodeExecutionStatus } from "../types/index.js";
+import type { NodeExecutionStatus } from '../types/index.js';
 interface Props {
     status: NodeExecutionStatus;
-    size?: "sm" | "md" | "lg" | "xl";
+    size?: 'sm' | 'md' | 'lg' | 'xl';
     showBackground?: boolean;
     class?: string;
 }