@d34dman/flowdrop 0.0.44 → 0.0.46

package/dist/stores/themeStore.js

@@ -20,11 +20,11 @@
  *
  * @module stores/themeStore
  */
-import { writable, derived, get } from "svelte/store";
+import { writable, derived, get } from 'svelte/store';
 /** localStorage key for persisting theme preference */
-const STORAGE_KEY = "flowdrop-theme";
+const STORAGE_KEY = 'flowdrop-theme';
 /** Default theme preference when none is stored */
-const DEFAULT_THEME = "auto";
+const DEFAULT_THEME = 'auto';
 // =========================================================================
 // System Preference Detection
 // =========================================================================
@@ -34,30 +34,28 @@ const DEFAULT_THEME = "auto";
  * @returns 'dark' if system prefers dark mode, 'light' otherwise
  */
 function getSystemTheme() {
-    if (typeof window === "undefined") {
-        return "light";
+    if (typeof window === 'undefined') {
+        return 'light';
     }
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-        ? "dark"
-        : "light";
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 }
 /**
  * Store for system theme preference
  * Updates when system preference changes
  */
-const systemTheme = writable(typeof window !== "undefined" ? getSystemTheme() : "light");
+const systemTheme = writable(typeof window !== 'undefined' ? getSystemTheme() : 'light');
 // Listen for system theme changes
-if (typeof window !== "undefined") {
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+if (typeof window !== 'undefined') {
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     /**
      * Handler for system theme preference changes
      */
     const handleSystemThemeChange = (event) => {
-        systemTheme.set(event.matches ? "dark" : "light");
+        systemTheme.set(event.matches ? 'dark' : 'light');
     };
     // Modern browsers use addEventListener
     if (mediaQuery.addEventListener) {
-        mediaQuery.addEventListener("change", handleSystemThemeChange);
+        mediaQuery.addEventListener('change', handleSystemThemeChange);
     }
     else {
         // Fallback for older browsers
@@ -73,18 +71,18 @@ if (typeof window !== "undefined") {
  * @returns Saved theme preference or default
  */
 function loadSavedTheme() {
-    if (typeof window === "undefined") {
+    if (typeof window === 'undefined') {
         return DEFAULT_THEME;
     }
     try {
         const saved = localStorage.getItem(STORAGE_KEY);
-        if (saved === "light" || saved === "dark" || saved === "auto") {
+        if (saved === 'light' || saved === 'dark' || saved === 'auto') {
             return saved;
         }
     }
     catch {
         // localStorage may be unavailable (e.g., private browsing)
-        console.warn("Failed to load theme from localStorage");
+        console.warn('Failed to load theme from localStorage');
     }
     return DEFAULT_THEME;
 }
@@ -94,7 +92,7 @@ function loadSavedTheme() {
  * @param theme - Theme preference to save
  */
 function saveTheme(theme) {
-    if (typeof window === "undefined") {
+    if (typeof window === 'undefined') {
         return;
     }
     try {
@@ -102,7 +100,7 @@ function saveTheme(theme) {
     }
     catch {
         // localStorage may be unavailable
-        console.warn("Failed to save theme to localStorage");
+        console.warn('Failed to save theme to localStorage');
     }
 }
 /**
@@ -119,7 +117,7 @@ export const theme = writable(loadSavedTheme());
  * When theme is 'auto', this reflects the system preference
  */
 export const resolvedTheme = derived([theme, systemTheme], ([$theme, $systemTheme]) => {
-    if ($theme === "auto") {
+    if ($theme === 'auto') {
         return $systemTheme;
     }
     return $theme;
@@ -134,10 +132,10 @@ export const resolvedTheme = derived([theme, systemTheme], ([$theme, $systemThem
  * @param resolved - The resolved theme to apply
  */
 function applyTheme(resolved) {
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return;
     }
-    document.documentElement.setAttribute("data-theme", resolved);
+    document.documentElement.setAttribute('data-theme', resolved);
 }
 /**
  * Set the theme preference
@@ -155,13 +153,13 @@ export function setTheme(newTheme) {
 export function toggleTheme() {
     const currentTheme = get(theme);
     const currentResolved = get(resolvedTheme);
-    if (currentTheme === "auto") {
+    if (currentTheme === 'auto') {
         // Switch to opposite of system preference
-        setTheme(currentResolved === "dark" ? "light" : "dark");
+        setTheme(currentResolved === 'dark' ? 'light' : 'dark');
     }
     else {
         // Toggle between light and dark
-        setTheme(currentTheme === "dark" ? "light" : "dark");
+        setTheme(currentTheme === 'dark' ? 'light' : 'dark');
     }
 }
 /**
@@ -170,14 +168,14 @@ export function toggleTheme() {
 export function cycleTheme() {
     const currentTheme = get(theme);
     switch (currentTheme) {
-        case "light":
-            setTheme("dark");
+        case 'light':
+            setTheme('dark');
             break;
-        case "dark":
-            setTheme("auto");
+        case 'dark':
+            setTheme('auto');
             break;
-        case "auto":
-            setTheme("light");
+        case 'auto':
+            setTheme('light');
             break;
     }
 }
@@ -208,8 +206,8 @@ export function initializeTheme() {
  * @returns true if running in browser and theme is applied
  */
 export function isThemeInitialized() {
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return false;
     }
-    return document.documentElement.hasAttribute("data-theme");
+    return document.documentElement.hasAttribute('data-theme');
 }

package/dist/stores/workflowStore.d.ts

@@ -1,7 +1,8 @@
 /**
  * Workflow Store for FlowDrop
  *
- * Provides global state management for workflows with dirty state tracking.
+ * Provides global state management for workflows with dirty state tracking
+ * and undo/redo history integration.
  *
  * @module stores/workflowStore
  */
@@ -40,6 +41,28 @@ export declare function markAsSaved(): void;
  * @returns true if there are unsaved changes
  */
 export declare function isDirty(): boolean;
+/**
+ * Enable or disable history recording
+ *
+ * Useful for bulk operations where you don't want individual history entries.
+ *
+ * @param enabled - Whether history should be recorded
+ */
+export declare function setHistoryEnabled(enabled: boolean): void;
+/**
+ * Check if history recording is enabled
+ *
+ * @returns true if history is being recorded
+ */
+export declare function isHistoryEnabled(): boolean;
+/**
+ * Set the restoring from history flag
+ *
+ * Used internally by the history store when performing undo/redo.
+ *
+ * @param restoring - Whether we're currently restoring from history
+ */
+export declare function setRestoringFromHistory(restoring: boolean): void;
 /**
  * Get the current workflow
  *
@@ -74,13 +97,22 @@ export declare const workflowActions: {
     /**
      * Initialize workflow (from load or new)
      *
-     * This sets the initial saved snapshot and clears dirty state.
+     * This sets the initial saved snapshot, clears dirty state, and initializes history.
      */
     initialize: (workflow: Workflow) => void;
     /**
      * Update the entire workflow
+     *
+     * Note: This is typically called from SvelteFlow sync and should not push to history
+     * for every small change. History is pushed by specific actions or drag handlers.
      */
     updateWorkflow: (workflow: Workflow) => void;
+    /**
+     * Restore workflow from history (undo/redo)
+     *
+     * This bypasses history recording to prevent recursive loops.
+     */
+    restoreFromHistory: (workflow: Workflow) => void;
     /**
      * Update nodes
      */
@@ -99,6 +131,9 @@ export declare const workflowActions: {
     addNode: (node: WorkflowNode) => void;
     /**
      * Remove a node
+     *
+     * This is an atomic operation that also removes connected edges.
+     * A single undo will restore both the node and its edges.
      */
     removeNode: (nodeId: string) => void;
     /**
@@ -111,10 +146,14 @@ export declare const workflowActions: {
     removeEdge: (edgeId: string) => void;
     /**
      * Update a specific node
+     *
+     * Used for config changes. Pushes to history for undo support.
      */
     updateNode: (nodeId: string, updates: Partial<WorkflowNode>) => void;
     /**
      * Clear the workflow
+     *
+     * Resets the workflow and clears history.
      */
     clear: () => void;
     /**
@@ -125,6 +164,7 @@ export declare const workflowActions: {
      * Batch update nodes and edges
      *
      * Useful for complex operations that update multiple things at once.
+     * Creates a single history entry for the entire batch.
      */
     batchUpdate: (updates: {
         nodes?: WorkflowNode[];
@@ -133,6 +173,16 @@ export declare const workflowActions: {
         description?: string;
         metadata?: Partial<Workflow["metadata"]>;
     }) => void;
+    /**
+     * Push current state to history manually
+     *
+     * Use this before operations that modify the workflow through other means
+     * (e.g., drag operations handled by SvelteFlow directly).
+     *
+     * @param description - Description of the upcoming change
+     * @param workflow - Optional workflow to push (uses store state if not provided)
+     */
+    pushHistory: (description?: string, workflow?: Workflow) => void;
 };
 /** Derived store for workflow changes (useful for triggering saves) */
 export declare const workflowChanged: import("svelte/store").Readable<{

package/dist/stores/workflowStore.js

@@ -1,11 +1,13 @@
 /**
  * Workflow Store for FlowDrop
  *
- * Provides global state management for workflows with dirty state tracking.
+ * Provides global state management for workflows with dirty state tracking
+ * and undo/redo history integration.
  *
  * @module stores/workflowStore
  */
 import { writable, derived, get } from 'svelte/store';
+import { historyService } from '../services/historyService.js';
 // =========================================================================
 // Core Workflow Store
 // =========================================================================
@@ -39,6 +41,18 @@ let onDirtyStateChangeCallback = null;
  * Set by the App component to notify parent application.
  */
 let onWorkflowChangeCallback = null;
+/**
+ * Flag to track if we're currently restoring from history (undo/redo)
+ *
+ * When true, prevents pushing to history to avoid recursive loops.
+ */
+let isRestoringFromHistory = false;
+/**
+ * Flag to track if history recording is enabled
+ *
+ * Can be disabled for bulk operations or when history is not needed.
+ */
+let historyEnabled = true;
 /**
  * Set the dirty state change callback
  *
@@ -136,6 +150,49 @@ export function markAsSaved() {
 export function isDirty() {
     return get(isDirtyStore);
 }
+/**
+ * Enable or disable history recording
+ *
+ * Useful for bulk operations where you don't want individual history entries.
+ *
+ * @param enabled - Whether history should be recorded
+ */
+export function setHistoryEnabled(enabled) {
+    historyEnabled = enabled;
+}
+/**
+ * Check if history recording is enabled
+ *
+ * @returns true if history is being recorded
+ */
+export function isHistoryEnabled() {
+    return historyEnabled;
+}
+/**
+ * Set the restoring from history flag
+ *
+ * Used internally by the history store when performing undo/redo.
+ *
+ * @param restoring - Whether we're currently restoring from history
+ */
+export function setRestoringFromHistory(restoring) {
+    isRestoringFromHistory = restoring;
+}
+/**
+ * Push current state to history before making changes
+ *
+ * @param description - Description of the change about to be made
+ * @param workflow - Optional workflow to push (uses store if not provided)
+ */
+function pushToHistory(description, workflow) {
+    if (!historyEnabled || isRestoringFromHistory) {
+        return;
+    }
+    const workflowToPush = workflow ?? get(workflowStore);
+    if (workflowToPush) {
+        historyService.push(workflowToPush, { description });
+    }
+}
 /**
  * Get the current workflow
  *
@@ -218,7 +275,7 @@ export const workflowActions = {
     /**
      * Initialize workflow (from load or new)
      *
-     * This sets the initial saved snapshot and clears dirty state.
+     * This sets the initial saved snapshot, clears dirty state, and initializes history.
      */
     initialize: (workflow) => {
         workflowStore.set(workflow);
@@ -228,14 +285,30 @@ export const workflowActions = {
         if (onDirtyStateChangeCallback) {
             onDirtyStateChangeCallback(false);
         }
+        // Initialize history with the loaded workflow
+        historyService.initialize(workflow);
     },
     /**
      * Update the entire workflow
+     *
+     * Note: This is typically called from SvelteFlow sync and should not push to history
+     * for every small change. History is pushed by specific actions or drag handlers.
      */
     updateWorkflow: (workflow) => {
         workflowStore.set(workflow);
         notifyWorkflowChange('metadata');
     },
+    /**
+     * Restore workflow from history (undo/redo)
+     *
+     * This bypasses history recording to prevent recursive loops.
+     */
+    restoreFromHistory: (workflow) => {
+        isRestoringFromHistory = true;
+        workflowStore.set(workflow);
+        notifyWorkflowChange('metadata');
+        isRestoringFromHistory = false;
+    },
     /**
      * Update nodes
      */
@@ -310,6 +383,7 @@ export const workflowActions = {
      * Add a node
      */
     addNode: (node) => {
+        pushToHistory('Add node');
         workflowStore.update(($workflow) => {
             if (!$workflow)
                 return null;
@@ -326,8 +400,12 @@ export const workflowActions = {
     },
     /**
      * Remove a node
+     *
+     * This is an atomic operation that also removes connected edges.
+     * A single undo will restore both the node and its edges.
      */
     removeNode: (nodeId) => {
+        pushToHistory('Delete node');
         workflowStore.update(($workflow) => {
             if (!$workflow)
                 return null;
@@ -347,6 +425,7 @@ export const workflowActions = {
      * Add an edge
      */
     addEdge: (edge) => {
+        pushToHistory('Add connection');
         workflowStore.update(($workflow) => {
             if (!$workflow)
                 return null;
@@ -365,6 +444,7 @@ export const workflowActions = {
      * Remove an edge
      */
     removeEdge: (edgeId) => {
+        pushToHistory('Delete connection');
         workflowStore.update(($workflow) => {
             if (!$workflow)
                 return null;
@@ -381,8 +461,11 @@ export const workflowActions = {
     },
     /**
      * Update a specific node
+     *
+     * Used for config changes. Pushes to history for undo support.
      */
     updateNode: (nodeId, updates) => {
+        pushToHistory('Update node config');
         workflowStore.update(($workflow) => {
             if (!$workflow)
                 return null;
@@ -399,11 +482,14 @@ export const workflowActions = {
     },
     /**
      * Clear the workflow
+     *
+     * Resets the workflow and clears history.
      */
     clear: () => {
         workflowStore.set(null);
         savedSnapshot = null;
         isDirtyStore.set(false);
+        historyService.clear();
         if (onDirtyStateChangeCallback) {
             onDirtyStateChangeCallback(false);
         }
@@ -430,8 +516,10 @@ export const workflowActions = {
      * Batch update nodes and edges
      *
      * Useful for complex operations that update multiple things at once.
+     * Creates a single history entry for the entire batch.
      */
     batchUpdate: (updates) => {
+        pushToHistory('Batch update');
         workflowStore.update(($workflow) => {
             if (!$workflow)
                 return null;
@@ -449,6 +537,18 @@ export const workflowActions = {
             };
         });
         notifyWorkflowChange('metadata');
+    },
+    /**
+     * Push current state to history manually
+     *
+     * Use this before operations that modify the workflow through other means
+     * (e.g., drag operations handled by SvelteFlow directly).
+     *
+     * @param description - Description of the upcoming change
+     * @param workflow - Optional workflow to push (uses store state if not provided)
+     */
+    pushHistory: (description, workflow) => {
+        pushToHistory(description, workflow);
     }
 };
 // =========================================================================

package/dist/styles/base.css

@@ -30,6 +30,46 @@
 	box-shadow: var(--fd-shadow-md);
 }
 
+/* Flow node handles: 20px connection area, 12px visible circle (::before)
+   Override xyflow's default background so port color (--fd-handle-fill from inline style) shows */
+:global(.svelte-flow__handle) {
+	--fd-handle-fill: var(--fd-muted-foreground);
+	--fd-handle-border-color: var(--fd-handle-border);
+	width: var(--fd-handle-size);
+	height: var(--fd-handle-size);
+	background: transparent !important;
+	background-color: transparent !important;
+	border: none;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	transition: transform var(--fd-transition-normal);
+	cursor: pointer;
+}
+
+:global(.svelte-flow__handle::before) {
+	content: '';
+	position: absolute;
+	inset: 0;
+	margin: auto;
+	width: var(--fd-handle-visual-size);
+	height: var(--fd-handle-visual-size);
+	background-color: var(--fd-handle-fill) !important;
+	border: 2px solid var(--fd-handle-border-color);
+	border-radius: 50%;
+	pointer-events: none;
+}
+
+:global(.svelte-flow__handle:hover::before) {
+	background-color: var(--fd-primary);
+}
+
+:global(.svelte-flow__handle:focus) {
+	outline: 2px solid var(--fd-ring);
+	outline-offset: 2px;
+}
+
 /* Button styles */
 .flowdrop-btn {
 	display: inline-flex;
@@ -874,7 +914,11 @@
 	   ========================================================================= */
 
 	/* Interrupt state: Pending (awaiting user response) */
-	--fd-interrupt-pending-bg: linear-gradient(135deg, var(--fd-warning-muted) 0%, var(--fd-warning-muted) 100%);
+	--fd-interrupt-pending-bg: linear-gradient(
+		135deg,
+		var(--fd-warning-muted) 0%,
+		var(--fd-warning-muted) 100%
+	);
 	--fd-interrupt-pending-border: var(--fd-warning);
 	--fd-interrupt-pending-shadow: rgba(245, 158, 11, 0.15);
 	--fd-interrupt-pending-avatar: var(--fd-warning);
@@ -882,7 +926,11 @@
 	--fd-interrupt-pending-text-light: var(--fd-warning-hover);
 
 	/* Interrupt state: Completed (response received - neutral) */
-	--fd-interrupt-completed-bg: linear-gradient(135deg, var(--fd-info-muted) 0%, var(--fd-primary-muted) 100%);
+	--fd-interrupt-completed-bg: linear-gradient(
+		135deg,
+		var(--fd-info-muted) 0%,
+		var(--fd-primary-muted) 100%
+	);
 	--fd-interrupt-completed-border: var(--fd-primary);
 	--fd-interrupt-completed-shadow: rgba(59, 130, 246, 0.15);
 	--fd-interrupt-completed-avatar: var(--fd-primary);
@@ -898,7 +946,11 @@
 	--fd-interrupt-cancelled-text-light: var(--fd-muted-foreground);
 
 	/* Interrupt state: Error */
-	--fd-interrupt-error-bg: linear-gradient(135deg, var(--fd-error-muted) 0%, var(--fd-error-muted) 100%);
+	--fd-interrupt-error-bg: linear-gradient(
+		135deg,
+		var(--fd-error-muted) 0%,
+		var(--fd-error-muted) 100%
+	);
 	--fd-interrupt-error-border: var(--fd-error);
 	--fd-interrupt-error-shadow: rgba(239, 68, 68, 0.15);
 	--fd-interrupt-error-avatar: var(--fd-error);
@@ -913,8 +965,16 @@
 	--fd-interrupt-prompt-border-error: rgba(239, 68, 68, 0.2);
 
 	/* Interrupt button tokens */
-	--fd-interrupt-btn-primary-bg: linear-gradient(135deg, var(--fd-primary) 0%, var(--fd-primary-hover) 100%);
-	--fd-interrupt-btn-primary-bg-hover: linear-gradient(135deg, var(--fd-primary-hover) 0%, var(--fd-primary-hover) 100%);
+	--fd-interrupt-btn-primary-bg: linear-gradient(
+		135deg,
+		var(--fd-primary) 0%,
+		var(--fd-primary-hover) 100%
+	);
+	--fd-interrupt-btn-primary-bg-hover: linear-gradient(
+		135deg,
+		var(--fd-primary-hover) 0%,
+		var(--fd-primary-hover) 100%
+	);
 	--fd-interrupt-btn-primary-shadow: rgba(59, 130, 246, 0.3);
 	--fd-interrupt-btn-secondary-bg: var(--fd-muted);
 	--fd-interrupt-btn-secondary-border: var(--fd-border);
@@ -947,7 +1007,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);
@@ -1176,4 +1236,4 @@
 
 .markdown-display--large h3 {
 	font-size: 1.25rem;
-}
+}

package/dist/styles/toast.css

@@ -28,6 +28,8 @@
 	max-width: 350px;
 	font-size: var(--fd-text-sm);
 	line-height: 1.3;
-	transition: background var(--fd-transition-fast), border-color var(--fd-transition-fast),
+	transition:
+		background var(--fd-transition-fast),
+		border-color var(--fd-transition-fast),
 		box-shadow var(--fd-transition-fast);
 }

package/dist/styles/tokens.css

@@ -218,6 +218,9 @@
 
 	/** Icon on node squircle: dark in light theme, white in dark theme */
 	--fd-node-icon: var(--_gray-9);
+	/** Opacity of the icon squircle background (color-mix percentage). Light mode: 15% / 22% hover; dark mode uses higher values. */
+	--fd-node-icon-bg-opacity: 20%;
+	--fd-node-icon-bg-opacity-hover: 50%;
 
 	/* ----- EDGE TOKENS ----- */
 	--fd-edge-trigger: var(--_gray-9);
@@ -254,6 +257,22 @@
 	/* ----- HANDLE (Node connection points) ----- */
 	/* White ring around handles for contrast against node backgrounds */
 	--fd-handle-border: #ffffff;
+	/* Outer size = connection/hit area (px); visual = visible circle (px) */
+	--fd-handle-size: 20px;
+	--fd-handle-visual-size: 12px;
+
+	/* ----- NODE LAYOUT (Dimensions and port alignment; multiples of 10 for grid) ----- */
+	--fd-node-grid-step: 10;
+	--fd-node-default-width: 290px;
+	--fd-node-header-height: 60px;
+	--fd-node-header-title-height: 40px;
+	--fd-node-header-desc-line: 20px;
+	--fd-node-header-gap: 10px;
+	--fd-node-port-row-height: 20px;
+	--fd-node-terminal-size: 80px;
+	--fd-node-square-size: 80px;
+	--fd-node-simple-height: 80px;
+	--fd-node-tool-min-height: 80px;
 
 	/* ----- LAYOUT BACKGROUND (Main content area gradient) ----- */
 	--fd-layout-background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%);
@@ -265,7 +284,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);
@@ -296,8 +315,25 @@
 	--fd-node-border: #4a4a52;
 	--fd-node-border-hover: #5a5a62;
 
+	/* ----- NODE COLORS (port type labels/badges - lighter for readability on dark surfaces) ----- */
+	--fd-node-emerald: #34d399;
+	--fd-node-blue: #60a5fa;
+	--fd-node-amber: #fbbf24;
+	--fd-node-orange: #fb923c;
+	--fd-node-red: #f87171;
+	--fd-node-pink: #f472b6;
+	--fd-node-indigo: #818cf8;
+	--fd-node-teal: #2dd4bf;
+	--fd-node-cyan: #22d3ee;
+	--fd-node-lime: #a3e635;
+	--fd-node-slate: #94a3b8;
+	--fd-node-purple: #c084fc;
+
 	/** Icon on node squircle: white in dark theme */
 	--fd-node-icon: #ffffff;
+	/** Icon squircle background opacity: higher in dark mode for visibility on dark surfaces */
+	--fd-node-icon-bg-opacity: 50%;
+	--fd-node-icon-bg-opacity-hover: 80%;
 
 	/* ----- PRIMARY (Interactive/Brand) ----- */
 	--fd-primary: #60a5fa;
@@ -363,4 +399,4 @@
 
 	/* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
 	--fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
-}
+}