@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/stories/EdgeDecorator.svelte

@@ -3,13 +3,13 @@
   to showcase edge rendering with arrowhead markers.
 -->
 <script lang="ts">
-  import { SvelteFlow, Controls, MarkerType } from "@xyflow/svelte";
-  import type { Node, Edge, ColorMode } from "@xyflow/svelte";
-  import "@xyflow/svelte/dist/style.css";
-  import UniversalNode from "../components/UniversalNode.svelte";
-  import FlowDropEdge from "../components/FlowDropEdge.svelte";
-  import { registerBuiltinNodes } from "../registry/builtinNodes.js";
-  import { EDGE_MARKER_SIZES } from "../config/constants.js";
+  import { SvelteFlow, Controls, MarkerType } from '@xyflow/svelte';
+  import type { Node, Edge, ColorMode } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+  import UniversalNode from '../components/UniversalNode.svelte';
+  import FlowDropEdge from '../components/FlowDropEdge.svelte';
+  import { registerBuiltinNodes } from '../registry/builtinNodes.js';
+  import { EDGE_MARKER_SIZES } from '../config/constants.js';
 
   interface Props {
     sourceData: Record<string, unknown>;
@@ -25,46 +25,46 @@
   let {
     sourceData,
     targetData,
-    edgeStyle = "stroke: #64748b;",
-    edgeClass = "flowdrop--edge--data",
-    edgeMarkerColor = "#64748b",
+    edgeStyle = 'stroke: #64748b;',
+    edgeClass = 'flowdrop--edge--data',
+    edgeMarkerColor = '#64748b',
     edgeMarkerSize = EDGE_MARKER_SIZES.data,
-    sourceHandleId = "output",
-    targetHandleId = "input",
+    sourceHandleId = 'output',
+    targetHandleId = 'input'
   }: Props = $props();
 
   registerBuiltinNodes();
 
   const nodeTypes = {
-    universalNode: UniversalNode,
+    universalNode: UniversalNode
   };
 
   const edgeTypes = {
-    default: FlowDropEdge,
+    default: FlowDropEdge
   };
 
-  const SOURCE_ID = "source-node";
-  const TARGET_ID = "target-node";
+  const SOURCE_ID = 'source-node';
+  const TARGET_ID = 'target-node';
 
   let nodes = $derived<Node[]>([
     {
       id: SOURCE_ID,
-      type: "universalNode",
+      type: 'universalNode',
       position: { x: 0, y: 0 },
-      data: { ...sourceData, nodeId: SOURCE_ID },
+      data: { ...sourceData, nodeId: SOURCE_ID }
     },
     {
       id: TARGET_ID,
-      type: "universalNode",
+      type: 'universalNode',
       position: { x: 350, y: 0 },
-      data: { ...targetData, nodeId: TARGET_ID },
-    },
+      data: { ...targetData, nodeId: TARGET_ID }
+    }
   ]);
 
   // Handle IDs follow the format: {nodeId}-{input|output}-{portId}
   let edges = $derived<Edge[]>([
     {
-      id: "edge-1",
+      id: 'edge-1',
       source: SOURCE_ID,
       target: TARGET_ID,
       sourceHandle: `${SOURCE_ID}-output-${sourceHandleId}`,
@@ -74,25 +74,22 @@
       markerEnd: {
         type: MarkerType.ArrowClosed,
         ...edgeMarkerSize,
-        color: edgeMarkerColor,
-      },
-    },
+        color: edgeMarkerColor
+      }
+    }
   ]);
 
   let colorMode = $state<ColorMode>(
-    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-      "light",
+    (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
   );
 
   $effect(() => {
     const observer = new MutationObserver(() => {
-      colorMode =
-        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-        "light";
+      colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ['data-theme']
     });
     return () => observer.disconnect();
   });

package/dist/stories/EdgeDecorator.svelte.d.ts

@@ -1,4 +1,4 @@
-import "@xyflow/svelte/dist/style.css";
+import '@xyflow/svelte/dist/style.css';
 interface Props {
     sourceData: Record<string, unknown>;
     targetData: Record<string, unknown>;

package/dist/stories/NodeDecorator.svelte

@@ -3,49 +3,43 @@
   inside a canvas, matching how they appear in the workflow editor.
 -->
 <script lang="ts">
-  import { SvelteFlow, Controls } from "@xyflow/svelte";
-  import type { Node, ColorMode } from "@xyflow/svelte";
-  import "@xyflow/svelte/dist/style.css";
-  import UniversalNode from "../components/UniversalNode.svelte";
-  import { registerBuiltinNodes } from "../registry/builtinNodes.js";
+  import { SvelteFlow, Controls } from '@xyflow/svelte';
+  import type { Node, ColorMode } from '@xyflow/svelte';
+  import '@xyflow/svelte/dist/style.css';
+  import UniversalNode from '../components/UniversalNode.svelte';
+  import { registerBuiltinNodes } from '../registry/builtinNodes.js';
 
-  let {
-    data,
-    selected = false,
-  }: { data: Record<string, unknown>; selected?: boolean } = $props();
+  let { data, selected = false }: { data: Record<string, unknown>; selected?: boolean } = $props();
 
   // Ensure built-in node components are registered
   registerBuiltinNodes();
 
   const nodeTypes = {
-    universalNode: UniversalNode,
+    universalNode: UniversalNode
   };
 
   let nodes = $derived<Node[]>([
     {
-      id: "story-node",
-      type: "universalNode",
+      id: 'story-node',
+      type: 'universalNode',
       position: { x: 0, y: 0 },
       selected,
-      data,
-    },
+      data
+    }
   ]);
 
   // Watch the data-theme attribute set by Storybook's addon-themes
   let colorMode = $state<ColorMode>(
-    (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-      "light",
+    (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light'
   );
 
   $effect(() => {
     const observer = new MutationObserver(() => {
-      colorMode =
-        (document.documentElement.getAttribute("data-theme") as ColorMode) ||
-        "light";
+      colorMode = (document.documentElement.getAttribute('data-theme') as ColorMode) || 'light';
     });
     observer.observe(document.documentElement, {
       attributes: true,
-      attributeFilter: ["data-theme"],
+      attributeFilter: ['data-theme']
     });
     return () => observer.disconnect();
   });

package/dist/stories/NodeDecorator.svelte.d.ts

@@ -1,4 +1,4 @@
-import "@xyflow/svelte/dist/style.css";
+import '@xyflow/svelte/dist/style.css';
 type $$ComponentProps = {
     data: Record<string, unknown>;
     selected?: boolean;

package/dist/stories/utils.d.ts

@@ -2,7 +2,7 @@
  * Shared story utilities
  * Reusable mock data factories for Storybook stories
  */
-import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from "../types/interrupt.js";
+import type { ConfirmationConfig, ChoiceConfig, TextConfig, ReviewConfig, ReviewChange } from '../types/interrupt.js';
 export declare function createSampleNodeData(overrides?: Record<string, unknown>): {
     label: string;
     config: {};
@@ -28,7 +28,7 @@ export declare function createSampleNodeData(overrides?: Record<string, unknown>
         }[];
     };
 };
-export declare function createTerminalNodeData(variant?: "start" | "end" | "exit"): {
+export declare function createTerminalNodeData(variant?: 'start' | 'end' | 'exit'): {
     label: string;
     config: {};
     metadata: {

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