@d34dman/flowdrop 0.0.45 → 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

@@ -49,7 +49,7 @@
 }
 
 :global(.svelte-flow__handle::before) {
-	content: "";
+	content: '';
 	position: absolute;
 	inset: 0;
 	margin: auto;
@@ -914,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);
@@ -922,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);
@@ -938,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);
@@ -953,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);
@@ -987,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);
@@ -1216,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

@@ -284,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);
@@ -399,4 +399,4 @@
 
 	/* ----- LAYOUT BACKGROUND (darker gradient for dark mode) ----- */
 	--fd-layout-background: linear-gradient(135deg, #141418 0%, #1a1a2e 50%, #16162a 100%);
-}
+}

package/dist/types/settings.d.ts

@@ -12,11 +12,11 @@
  * - 'dark': Force dark theme
  * - 'auto': Follow system preference
  */
-export type ThemePreference = "light" | "dark" | "auto";
+export type ThemePreference = 'light' | 'dark' | 'auto';
 /**
  * Resolved theme (actual applied theme, never 'auto')
  */
-export type ResolvedTheme = "light" | "dark";
+export type ResolvedTheme = 'light' | 'dark';
 /**
  * Theme-related settings
  */
@@ -167,7 +167,7 @@ export declare const SETTINGS_STORAGE_KEY = "flowdrop-settings";
 /**
  * API sync status
  */
-export type SyncStatus = "idle" | "syncing" | "synced" | "error";
+export type SyncStatus = 'idle' | 'syncing' | 'synced' | 'error';
 /**
  * Settings store state including sync metadata
  */

package/dist/types/settings.js

@@ -9,32 +9,26 @@
 /**
  * All available settings categories
  */
-export const SETTINGS_CATEGORIES = [
-    "theme",
-    "editor",
-    "ui",
-    "behavior",
-    "api"
-];
+export const SETTINGS_CATEGORIES = ['theme', 'editor', 'ui', 'behavior', 'api'];
 /**
  * Human-readable labels for settings categories
  */
 export const SETTINGS_CATEGORY_LABELS = {
-    theme: "Theme",
-    editor: "Editor",
-    ui: "UI",
-    behavior: "Behavior",
-    api: "API"
+    theme: 'Theme',
+    editor: 'Editor',
+    ui: 'UI',
+    behavior: 'Behavior',
+    api: 'API'
 };
 /**
  * Icons for settings categories (Iconify icon names)
  */
 export const SETTINGS_CATEGORY_ICONS = {
-    theme: "mdi:palette",
-    editor: "mdi:grid",
-    ui: "mdi:view-dashboard",
-    behavior: "mdi:cog-play",
-    api: "mdi:api"
+    theme: 'mdi:palette',
+    editor: 'mdi:grid',
+    ui: 'mdi:view-dashboard',
+    behavior: 'mdi:cog-play',
+    api: 'mdi:api'
 };
 // =========================================================================
 // Default Settings
@@ -43,7 +37,7 @@ export const SETTINGS_CATEGORY_ICONS = {
  * Default theme settings
  */
 export const DEFAULT_THEME_SETTINGS = {
-    preference: "auto"
+    preference: 'auto'
 };
 /**
  * Default editor settings
@@ -98,4 +92,4 @@ export const DEFAULT_SETTINGS = {
 /**
  * localStorage key for persisting settings
  */
-export const SETTINGS_STORAGE_KEY = "flowdrop-settings";
+export const SETTINGS_STORAGE_KEY = 'flowdrop-settings';