@flowdrop/flowdrop 1.5.0 → 1.7.0

package/dist/stories/utils.js

@@ -4,157 +4,153 @@
  */
 export function createSampleNodeData(overrides) {
     return {
-        label: "Sample Node",
+        label: 'Sample Node',
         config: {},
         metadata: {
-            id: "sample-node",
-            name: "Sample Node",
-            description: "A sample node for stories",
-            category: "processing",
-            version: "1.0.0",
-            type: "default",
+            id: 'sample-node',
+            name: 'Sample Node',
+            description: 'A sample node for stories',
+            category: 'processing',
+            version: '1.0.0',
+            type: 'default',
             inputs: [
                 {
-                    id: "input",
-                    name: "Input",
-                    type: "input",
-                    dataType: "any",
-                    required: false,
-                },
-            ],
-            outputs: [
-                { id: "output", name: "Output", type: "output", dataType: "any" },
+                    id: 'input',
+                    name: 'Input',
+                    type: 'input',
+                    dataType: 'any',
+                    required: false
+                }
             ],
+            outputs: [{ id: 'output', name: 'Output', type: 'output', dataType: 'any' }]
         },
-        ...overrides,
+        ...overrides
     };
 }
-export function createTerminalNodeData(variant = "start") {
+export function createTerminalNodeData(variant = 'start') {
     const configs = {
         start: {
-            label: "Start",
+            label: 'Start',
             config: {},
             metadata: {
-                id: "start",
-                name: "Start",
-                description: "Workflow start point",
-                category: "terminal",
-                version: "1.0.0",
-                type: "terminal",
+                id: 'start',
+                name: 'Start',
+                description: 'Workflow start point',
+                category: 'terminal',
+                version: '1.0.0',
+                type: 'terminal',
                 inputs: [],
-                outputs: [
-                    { id: "output", name: "Output", type: "output", dataType: "any" },
-                ],
-            },
+                outputs: [{ id: 'output', name: 'Output', type: 'output', dataType: 'any' }]
+            }
         },
         end: {
-            label: "End",
+            label: 'End',
             config: {},
             metadata: {
-                id: "end",
-                name: "End",
-                description: "Workflow end point",
-                category: "terminal",
-                version: "1.0.0",
-                type: "terminal",
+                id: 'end',
+                name: 'End',
+                description: 'Workflow end point',
+                category: 'terminal',
+                version: '1.0.0',
+                type: 'terminal',
                 inputs: [
                     {
-                        id: "input",
-                        name: "Input",
-                        type: "input",
-                        dataType: "any",
-                        required: false,
-                    },
+                        id: 'input',
+                        name: 'Input',
+                        type: 'input',
+                        dataType: 'any',
+                        required: false
+                    }
                 ],
-                outputs: [],
-            },
+                outputs: []
+            }
         },
         exit: {
-            label: "Exit",
+            label: 'Exit',
             config: {},
             metadata: {
-                id: "exit",
-                name: "Exit",
-                description: "Early exit point",
-                category: "terminal",
-                version: "1.0.0",
-                type: "terminal",
-                subType: "exit",
+                id: 'exit',
+                name: 'Exit',
+                description: 'Early exit point',
+                category: 'terminal',
+                version: '1.0.0',
+                type: 'terminal',
+                subType: 'exit',
                 inputs: [
                     {
-                        id: "input",
-                        name: "Input",
-                        type: "input",
-                        dataType: "any",
-                        required: false,
-                    },
+                        id: 'input',
+                        name: 'Input',
+                        type: 'input',
+                        dataType: 'any',
+                        required: false
+                    }
                 ],
-                outputs: [],
-            },
-        },
+                outputs: []
+            }
+        }
     };
     return configs[variant];
 }
 export function createConfirmationConfig(overrides) {
     return {
-        message: "Are you sure you want to proceed with this action?",
-        confirmLabel: "Yes, proceed",
-        cancelLabel: "Cancel",
-        ...overrides,
+        message: 'Are you sure you want to proceed with this action?',
+        confirmLabel: 'Yes, proceed',
+        cancelLabel: 'Cancel',
+        ...overrides
     };
 }
 export function createChoiceConfig(overrides) {
     return {
-        message: "Select a priority level for this task:",
+        message: 'Select a priority level for this task:',
         options: [
-            { value: "low", label: "Low", description: "Non-urgent task" },
-            { value: "medium", label: "Medium", description: "Normal priority" },
-            { value: "high", label: "High", description: "Urgent task" },
+            { value: 'low', label: 'Low', description: 'Non-urgent task' },
+            { value: 'medium', label: 'Medium', description: 'Normal priority' },
+            { value: 'high', label: 'High', description: 'Urgent task' }
         ],
         multiple: false,
-        ...overrides,
+        ...overrides
     };
 }
 export function createTextConfig(overrides) {
     return {
-        message: "Please provide additional details:",
-        placeholder: "Enter your response here...",
+        message: 'Please provide additional details:',
+        placeholder: 'Enter your response here...',
         multiline: false,
-        ...overrides,
+        ...overrides
     };
 }
 export function createReviewConfig(overrides) {
     return {
-        message: "Review the following changes before submitting:",
+        message: 'Review the following changes before submitting:',
         changes: [
             {
-                field: "title",
-                label: "Title",
-                original: "Old Title",
-                proposed: "New Title",
+                field: 'title',
+                label: 'Title',
+                original: 'Old Title',
+                proposed: 'New Title'
             },
             {
-                field: "description",
-                label: "Description",
-                original: "Old description text",
-                proposed: "Updated description text",
+                field: 'description',
+                label: 'Description',
+                original: 'Old description text',
+                proposed: 'Updated description text'
             },
             {
-                field: "status",
-                label: "Status",
-                original: "draft",
-                proposed: "published",
-            },
+                field: 'status',
+                label: 'Status',
+                original: 'draft',
+                proposed: 'published'
+            }
         ],
-        ...overrides,
+        ...overrides
     };
 }
 export function createReviewChange(overrides) {
     return {
-        field: "title",
-        label: "Title",
-        original: "Original value",
-        proposed: "Proposed value",
-        ...overrides,
+        field: 'title',
+        label: 'Title',
+        original: 'Original value',
+        proposed: 'Proposed value',
+        ...overrides
     };
 }

package/dist/styles/base.css

@@ -1,7 +1,7 @@
 /* Base CSS with BEM syntax */
 
 /* Import design tokens */
-@import "./tokens.css";
+@import './tokens.css';
 
 /* Reset and base styles */
 * {
@@ -32,49 +32,19 @@
 
 /* xyflow Controls & MiniMap: wire up to skin tokens so themes can restyle them */
 .svelte-flow {
-  --xy-controls-button-background-color: var(
-    --fd-controls-button-bg,
-    var(--fd-card)
-  );
-  --xy-controls-button-background-color-hover: var(
-    --fd-controls-button-bg-hover,
-    var(--fd-muted)
-  );
-  --xy-controls-button-color: var(
-    --fd-controls-button-color,
-    var(--fd-foreground)
-  );
-  --xy-controls-button-color-hover: var(
-    --fd-controls-button-color-hover,
-    var(--fd-foreground)
-  );
-  --xy-controls-button-border-color: var(
-    --fd-controls-button-border,
-    var(--fd-border)
-  );
-  --xy-controls-box-shadow: var(
-    --fd-controls-box-shadow,
-    0 0 2px 1px rgba(0, 0, 0, 0.08)
-  );
+  --xy-controls-button-background-color: var(--fd-controls-button-bg, var(--fd-card));
+  --xy-controls-button-background-color-hover: var(--fd-controls-button-bg-hover, var(--fd-muted));
+  --xy-controls-button-color: var(--fd-controls-button-color, var(--fd-foreground));
+  --xy-controls-button-color-hover: var(--fd-controls-button-color-hover, var(--fd-foreground));
+  --xy-controls-button-border-color: var(--fd-controls-button-border, var(--fd-border));
+  --xy-controls-box-shadow: var(--fd-controls-box-shadow, 0 0 2px 1px rgba(0, 0, 0, 0.08));
 
   --xy-minimap-background-color: var(--fd-minimap-bg, var(--fd-card));
-  --xy-minimap-mask-background-color: var(
-    --fd-minimap-mask-bg,
-    var(--fd-backdrop)
-  );
-  --xy-minimap-mask-stroke-color: var(
-    --fd-minimap-mask-stroke,
-    var(--fd-border)
-  );
+  --xy-minimap-mask-background-color: var(--fd-minimap-mask-bg, var(--fd-backdrop));
+  --xy-minimap-mask-stroke-color: var(--fd-minimap-mask-stroke, var(--fd-border));
   --xy-minimap-mask-stroke-width: var(--fd-minimap-mask-stroke-width, 1);
-  --xy-minimap-node-background-color: var(
-    --fd-minimap-node-bg,
-    var(--fd-muted)
-  );
-  --xy-minimap-node-stroke-color: var(
-    --fd-minimap-node-stroke,
-    var(--fd-border-muted)
-  );
+  --xy-minimap-node-background-color: var(--fd-minimap-node-bg, var(--fd-muted));
+  --xy-minimap-node-stroke-color: var(--fd-minimap-node-stroke, var(--fd-border-muted));
   --xy-minimap-node-stroke-width: var(--fd-minimap-node-stroke-width, 2);
 }
 
@@ -98,7 +68,7 @@
 }
 
 .svelte-flow .svelte-flow__handle::before {
-  content: "";
+  content: '';
   position: absolute;
   inset: 0;
   margin: auto;
@@ -405,7 +375,7 @@
 }
 
 .flowdrop-divider::before {
-  content: "";
+  content: '';
   flex: 1;
   height: 1px;
   background-color: var(--fd-border);
@@ -421,7 +391,7 @@
 }
 
 .flowdrop-divider::after {
-  content: "";
+  content: '';
   flex: 1;
   height: 1px;
   background-color: var(--fd-border);
@@ -1002,11 +972,7 @@
   --fd-interrupt-completed-text-light: var(--fd-primary);
 
   /* Interrupt state: Cancelled (dismissed without responding) */
-  --fd-interrupt-cancelled-bg: linear-gradient(
-    135deg,
-    var(--fd-muted) 0%,
-    var(--fd-subtle) 100%
-  );
+  --fd-interrupt-cancelled-bg: linear-gradient(135deg, var(--fd-muted) 0%, var(--fd-subtle) 100%);
   --fd-interrupt-cancelled-border: var(--fd-muted-foreground);
   --fd-interrupt-cancelled-shadow: rgba(107, 114, 128, 0.15);
   --fd-interrupt-cancelled-avatar: var(--fd-muted-foreground);
@@ -1121,7 +1087,7 @@
 }
 
 /* Dark mode overrides for interrupt component tokens */
-[data-theme="dark"] {
+[data-theme='dark'] {
   /* Interrupt prompt inner styling - dark background for dark mode */
   --fd-interrupt-prompt-bg: rgba(30, 30, 35, 0.95);
   --fd-interrupt-prompt-border-pending: rgba(251, 191, 36, 0.25);

package/dist/styles/tokens.css

@@ -130,11 +130,7 @@
   /* ----- HEADER (Distinct header styling) ----- */
   --fd-header: #f5f7fa; /* @public */
   --fd-header-foreground: var(--_gray-8); /* @public */
-  --fd-header-gradient: linear-gradient(
-    180deg,
-    #f8f9fc 0%,
-    #f4f5f8 100%
-  ); /* @public */
+  --fd-header-gradient: linear-gradient(180deg, #f8f9fc 0%, #f4f5f8 100%); /* @public */
 
   /* ----- SURFACE TINT (Subtle accent for surfaces) ----- */
   --fd-surface-tint: rgba(99, 102, 241, 0.02); /* @public */
@@ -216,14 +212,10 @@
   --fd-radius-full: 9999px; /* @public */
 
   /* ----- SHADOWS (Refined layered shadows for modern depth) ----- */
-  --fd-shadow-sm:
-    0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06); /* @public */
-  --fd-shadow-md:
-    0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04); /* @public */
-  --fd-shadow-lg:
-    0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04); /* @public */
-  --fd-shadow-xl:
-    0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06); /* @public */
+  --fd-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06); /* @public */
+  --fd-shadow-md: 0 4px 8px rgb(0 0 0 / 0.06), 0 2px 4px rgb(0 0 0 / 0.04); /* @public */
+  --fd-shadow-lg: 0 10px 20px rgb(0 0 0 / 0.08), 0 4px 8px rgb(0 0 0 / 0.04); /* @public */
+  --fd-shadow-xl: 0 20px 30px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.06); /* @public */
 
   /* ----- FONT SIZES ----- */
   --fd-text-2xs: 0.6875rem; /* @public  11px */
@@ -243,8 +235,7 @@
 
   /* ----- FONT FAMILIES ----- */
   --fd-font-mono:
-    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
-    monospace; /* @public */
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* @public */
 
   /* ----- COMPONENT SIZES ----- */
   --fd-size-icon-btn: 1.75rem; /* @internal  28px — may change with component redesigns */
@@ -360,12 +351,8 @@
   --fd-sidebar-header-display: flex; /* @public  show sidebar "Components" header */
   --fd-sidebar-card-display: block; /* @public  show accordion card node list */
   --fd-sidebar-flat-display: none; /* @public  hide flat dot-name node list */
-  --fd-sidebar-category-color: var(
-    --fd-muted-foreground
-  ); /* @public  category header text color */
-  --fd-sidebar-flat-item-color: var(
-    --fd-foreground
-  ); /* @public  flat list item text color */
+  --fd-sidebar-category-color: var(--fd-muted-foreground); /* @public  category header text color */
+  --fd-sidebar-flat-item-color: var(--fd-foreground); /* @public  flat list item text color */
   --fd-navbar-split-display: none; /* @public  show all actions as separate buttons */
   --fd-navbar-dropdown-display: flex; /* @public  show primary-action + dropdown chevron */
 }
@@ -376,7 +363,7 @@
    Designed for softer contrast and reduced eye strain
    ========================================================================= */
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   /* ----- SURFACES (Backgrounds) - Softer contrast ----- */
   --fd-background: #1a1a1e;
   --fd-foreground: var(--_gray-2);
@@ -497,10 +484,5 @@
   --fd-edge-loopback-selected: #a78bfa;
 
   /* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
-  --fd-layout-background: linear-gradient(
-    135deg,
-    #141418 0%,
-    #1a1a2e 50%,
-    #16162a 100%
-  );
+  --fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
 }

package/dist/svelte-app.d.ts

@@ -6,14 +6,14 @@
  *
  * @module svelte-app
  */
-import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from "./types/index.js";
-import type { EndpointConfig } from "./config/endpoints.js";
-import type { AuthProvider } from "./types/auth.js";
-import type { FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js";
-import type { FlowDropTheme, FlowDropThemeName } from "./types/theme.js";
-import type { WorkflowFormatAdapter } from "./registry/workflowFormatRegistry.js";
-import "./registry/builtinFormats.js";
-import type { PartialSettings, SettingsCategory } from "./types/settings.js";
+import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from './types/index.js';
+import type { EndpointConfig } from './config/endpoints.js';
+import type { AuthProvider } from './types/auth.js';
+import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
+import type { FlowDropTheme, FlowDropThemeName } from './types/theme.js';
+import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
+import './registry/builtinFormats.js';
+import type { PartialSettings, SettingsCategory } from './types/settings.js';
 /**
  * Navbar action configuration
  */
@@ -21,7 +21,7 @@ export interface NavbarAction {
     label: string;
     href: string;
     icon?: string;
-    variant?: "primary" | "secondary" | "outline";
+    variant?: 'primary' | 'secondary' | 'outline';
     onclick?: (event: Event) => void;
 }
 /**
@@ -53,7 +53,7 @@ export interface FlowDropMountOptions {
     /** Pipeline ID for status display */
     pipelineId?: string;
     /** Node execution statuses */
-    nodeStatuses?: Record<string, "pending" | "running" | "completed" | "error">;
+    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */