@d34dman/flowdrop 0.0.15 → 0.0.17

package/dist/stores/workflowStore.d.ts

@@ -1,9 +1,60 @@
+/**
+ * Workflow Store for FlowDrop
+ *
+ * Provides global state management for workflows with dirty state tracking.
+ *
+ * @module stores/workflowStore
+ */
 import type { Workflow, WorkflowNode, WorkflowEdge } from '../types';
+import type { WorkflowChangeType } from '../types/events.js';
+/** Global workflow state */
 export declare const workflowStore: import("svelte/store").Writable<Workflow>;
+/**
+ * Store for tracking if there are unsaved changes
+ *
+ * This is set to true whenever the workflow changes after initialization.
+ * It can be reset to false by calling markAsSaved().
+ */
+export declare const isDirtyStore: import("svelte/store").Writable<boolean>;
+/**
+ * Set the dirty state change callback
+ *
+ * @param callback - Function to call when dirty state changes
+ */
+export declare function setOnDirtyStateChange(callback: ((isDirty: boolean) => void) | null): void;
+/**
+ * Set the workflow change callback
+ *
+ * @param callback - Function to call when workflow changes
+ */
+export declare function setOnWorkflowChange(callback: ((workflow: Workflow, changeType: WorkflowChangeType) => void) | null): void;
+/**
+ * Mark the current workflow state as saved
+ *
+ * Clears the dirty state by updating the saved snapshot.
+ */
+export declare function markAsSaved(): void;
+/**
+ * Check if there are unsaved changes
+ *
+ * @returns true if there are unsaved changes
+ */
+export declare function isDirty(): boolean;
+/**
+ * Get the current workflow
+ *
+ * @returns The current workflow or null
+ */
+export declare function getWorkflow(): Workflow | null;
+/** Derived store for workflow ID */
 export declare const workflowId: import("svelte/store").Readable<string>;
+/** Derived store for workflow name */
 export declare const workflowName: import("svelte/store").Readable<string>;
+/** Derived store for workflow nodes */
 export declare const workflowNodes: import("svelte/store").Readable<WorkflowNode[]>;
+/** Derived store for workflow edges */
 export declare const workflowEdges: import("svelte/store").Readable<WorkflowEdge[]>;
+/** Derived store for workflow metadata */
 export declare const workflowMetadata: import("svelte/store").Readable<{
     version: string;
     createdAt: string;
@@ -13,19 +64,68 @@ export declare const workflowMetadata: import("svelte/store").Readable<{
     versionId?: string;
     updateNumber?: number;
 }>;
+/**
+ * Actions for updating the workflow
+ *
+ * All actions that modify the workflow will trigger dirty state updates
+ * and emit change events.
+ */
 export declare const workflowActions: {
+    /**
+     * Initialize workflow (from load or new)
+     *
+     * This sets the initial saved snapshot and clears dirty state.
+     */
     initialize: (workflow: Workflow) => void;
+    /**
+     * Update the entire workflow
+     */
     updateWorkflow: (workflow: Workflow) => void;
+    /**
+     * Update nodes
+     */
     updateNodes: (nodes: WorkflowNode[]) => void;
+    /**
+     * Update edges
+     */
     updateEdges: (edges: WorkflowEdge[]) => void;
+    /**
+     * Update workflow name
+     */
     updateName: (name: string) => void;
+    /**
+     * Add a node
+     */
     addNode: (node: WorkflowNode) => void;
+    /**
+     * Remove a node
+     */
     removeNode: (nodeId: string) => void;
+    /**
+     * Add an edge
+     */
     addEdge: (edge: WorkflowEdge) => void;
+    /**
+     * Remove an edge
+     */
     removeEdge: (edgeId: string) => void;
+    /**
+     * Update a specific node
+     */
     updateNode: (nodeId: string, updates: Partial<WorkflowNode>) => void;
+    /**
+     * Clear the workflow
+     */
     clear: () => void;
+    /**
+     * Update workflow metadata
+     */
     updateMetadata: (metadata: Partial<Workflow["metadata"]>) => void;
+    /**
+     * Batch update nodes and edges
+     *
+     * Useful for complex operations that update multiple things at once.
+     */
     batchUpdate: (updates: {
         nodes?: WorkflowNode[];
         edges?: WorkflowEdge[];
@@ -34,11 +134,13 @@ export declare const workflowActions: {
         metadata?: Partial<Workflow["metadata"]>;
     }) => void;
 };
+/** Derived store for workflow changes (useful for triggering saves) */
 export declare const workflowChanged: import("svelte/store").Readable<{
     nodes: WorkflowNode[];
     edges: WorkflowEdge[];
     name: string;
 }>;
+/** Derived store for workflow validation */
 export declare const workflowValidation: import("svelte/store").Readable<{
     hasNodes: boolean;
     hasEdges: boolean;
@@ -46,6 +148,7 @@ export declare const workflowValidation: import("svelte/store").Readable<{
     edgeCount: number;
     isValid: boolean;
 }>;
+/** Derived store for workflow metadata changes */
 export declare const workflowMetadataChanged: import("svelte/store").Readable<{
     createdAt: string;
     updatedAt: string;

package/dist/stores/workflowStore.js

@@ -1,19 +1,176 @@
-import { writable, derived } from 'svelte/store';
-// Global workflow state
+/**
+ * Workflow Store for FlowDrop
+ *
+ * Provides global state management for workflows with dirty state tracking.
+ *
+ * @module stores/workflowStore
+ */
+import { writable, derived, get } from 'svelte/store';
+// =========================================================================
+// Core Workflow Store
+// =========================================================================
+/** Global workflow state */
 export const workflowStore = writable(null);
-// Derived stores for individual workflow properties
-export const workflowId = derived(workflowStore, ($workflow) => $workflow?.id || null);
-export const workflowName = derived(workflowStore, ($workflow) => $workflow?.name || 'Untitled Workflow');
-export const workflowNodes = derived(workflowStore, ($workflow) => $workflow?.nodes || []);
-export const workflowEdges = derived(workflowStore, ($workflow) => $workflow?.edges || []);
-export const workflowMetadata = derived(workflowStore, ($workflow) => $workflow?.metadata || {
+// =========================================================================
+// Dirty State Tracking
+// =========================================================================
+/**
+ * Store for tracking if there are unsaved changes
+ *
+ * This is set to true whenever the workflow changes after initialization.
+ * It can be reset to false by calling markAsSaved().
+ */
+export const isDirtyStore = writable(false);
+/**
+ * Snapshot of the workflow when it was last saved
+ *
+ * Used to compare current state with saved state.
+ */
+let savedSnapshot = null;
+/**
+ * Callback for dirty state changes
+ *
+ * Set by the App component to notify parent application.
+ */
+let onDirtyStateChangeCallback = null;
+/**
+ * Callback for workflow changes
+ *
+ * Set by the App component to notify parent application.
+ */
+let onWorkflowChangeCallback = null;
+/**
+ * Set the dirty state change callback
+ *
+ * @param callback - Function to call when dirty state changes
+ */
+export function setOnDirtyStateChange(callback) {
+    onDirtyStateChangeCallback = callback;
+}
+/**
+ * Set the workflow change callback
+ *
+ * @param callback - Function to call when workflow changes
+ */
+export function setOnWorkflowChange(callback) {
+    onWorkflowChangeCallback = callback;
+}
+/**
+ * Create a snapshot of the workflow for comparison
+ *
+ * @param workflow - The workflow to snapshot
+ * @returns A JSON string representation for comparison
+ */
+function createSnapshot(workflow) {
+    if (!workflow)
+        return null;
+    // Only include the parts that matter for "dirty" detection
+    const toSnapshot = {
+        name: workflow.name,
+        description: workflow.description,
+        nodes: workflow.nodes.map((n) => ({
+            id: n.id,
+            position: n.position,
+            data: {
+                label: n.data.label,
+                config: n.data.config
+            }
+        })),
+        edges: workflow.edges.map((e) => ({
+            id: e.id,
+            source: e.source,
+            target: e.target,
+            sourceHandle: e.sourceHandle,
+            targetHandle: e.targetHandle
+        }))
+    };
+    return JSON.stringify(toSnapshot);
+}
+/**
+ * Update dirty state based on current workflow
+ *
+ * Compares current workflow with saved snapshot.
+ */
+function updateDirtyState() {
+    const currentWorkflow = get(workflowStore);
+    const currentSnapshot = createSnapshot(currentWorkflow);
+    const isDirty = currentSnapshot !== savedSnapshot;
+    const previousDirty = get(isDirtyStore);
+    if (isDirty !== previousDirty) {
+        isDirtyStore.set(isDirty);
+        if (onDirtyStateChangeCallback) {
+            onDirtyStateChangeCallback(isDirty);
+        }
+    }
+}
+/**
+ * Mark the workflow change and update dirty state
+ *
+ * @param changeType - The type of change that occurred
+ */
+function notifyWorkflowChange(changeType) {
+    const workflow = get(workflowStore);
+    if (workflow && onWorkflowChangeCallback) {
+        onWorkflowChangeCallback(workflow, changeType);
+    }
+    updateDirtyState();
+}
+/**
+ * Mark the current workflow state as saved
+ *
+ * Clears the dirty state by updating the saved snapshot.
+ */
+export function markAsSaved() {
+    const currentWorkflow = get(workflowStore);
+    savedSnapshot = createSnapshot(currentWorkflow);
+    isDirtyStore.set(false);
+    if (onDirtyStateChangeCallback) {
+        onDirtyStateChangeCallback(false);
+    }
+}
+/**
+ * Check if there are unsaved changes
+ *
+ * @returns true if there are unsaved changes
+ */
+export function isDirty() {
+    return get(isDirtyStore);
+}
+/**
+ * Get the current workflow
+ *
+ * @returns The current workflow or null
+ */
+export function getWorkflow() {
+    return get(workflowStore);
+}
+// =========================================================================
+// Derived Stores
+// =========================================================================
+/** Derived store for workflow ID */
+export const workflowId = derived(workflowStore, ($workflow) => $workflow?.id ?? null);
+/** Derived store for workflow name */
+export const workflowName = derived(workflowStore, ($workflow) => $workflow?.name ?? 'Untitled Workflow');
+/** Derived store for workflow nodes */
+export const workflowNodes = derived(workflowStore, ($workflow) => $workflow?.nodes ?? []);
+/** Derived store for workflow edges */
+export const workflowEdges = derived(workflowStore, ($workflow) => $workflow?.edges ?? []);
+/** Derived store for workflow metadata */
+export const workflowMetadata = derived(workflowStore, ($workflow) => $workflow?.metadata ?? {
     version: '1.0.0',
     createdAt: new Date().toISOString(),
     updatedAt: new Date().toISOString(),
     versionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
     updateNumber: 0
 });
-// Helper function to check if workflow data has actually changed
+// =========================================================================
+// Helper Functions
+// =========================================================================
+/**
+ * Check if workflow data has actually changed
+ *
+ * Used to prevent unnecessary updates and infinite loops.
+ */
 function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
     if (!currentWorkflow)
         return true;
@@ -48,17 +205,40 @@ function hasWorkflowDataChanged(currentWorkflow, newNodes, newEdges) {
     }
     return false;
 }
-// Actions for updating the workflow
+// =========================================================================
+// Workflow Actions
+// =========================================================================
+/**
+ * Actions for updating the workflow
+ *
+ * All actions that modify the workflow will trigger dirty state updates
+ * and emit change events.
+ */
 export const workflowActions = {
-    // Initialize workflow
+    /**
+     * Initialize workflow (from load or new)
+     *
+     * This sets the initial saved snapshot and clears dirty state.
+     */
     initialize: (workflow) => {
         workflowStore.set(workflow);
+        // Set the saved snapshot - workflow is "clean" after initialization
+        savedSnapshot = createSnapshot(workflow);
+        isDirtyStore.set(false);
+        if (onDirtyStateChangeCallback) {
+            onDirtyStateChangeCallback(false);
+        }
     },
-    // Update the entire workflow
+    /**
+     * Update the entire workflow
+     */
     updateWorkflow: (workflow) => {
         workflowStore.set(workflow);
+        notifyWorkflowChange('metadata');
     },
-    // Update nodes
+    /**
+     * Update nodes
+     */
     updateNodes: (nodes) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -76,12 +256,15 @@ export const workflowActions = {
                     ...$workflow.metadata,
                     updatedAt: new Date().toISOString(),
                     versionId,
-                    updateNumber: ($workflow.metadata?.updateNumber || 0) + 1
+                    updateNumber: ($workflow.metadata?.updateNumber ?? 0) + 1
                 }
             };
         });
+        notifyWorkflowChange('node_move');
     },
-    // Update edges
+    /**
+     * Update edges
+     */
     updateEdges: (edges) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -99,12 +282,15 @@ export const workflowActions = {
                     ...$workflow.metadata,
                     updatedAt: new Date().toISOString(),
                     versionId,
-                    updateNumber: ($workflow.metadata?.updateNumber || 0) + 1
+                    updateNumber: ($workflow.metadata?.updateNumber ?? 0) + 1
                 }
             };
         });
+        notifyWorkflowChange('edge_add');
     },
-    // Update workflow name
+    /**
+     * Update workflow name
+     */
     updateName: (name) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -118,8 +304,11 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('name');
     },
-    // Add a node
+    /**
+     * Add a node
+     */
     addNode: (node) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -133,8 +322,11 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('node_add');
     },
-    // Remove a node
+    /**
+     * Remove a node
+     */
     removeNode: (nodeId) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -149,8 +341,11 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('node_remove');
     },
-    // Add an edge
+    /**
+     * Add an edge
+     */
     addEdge: (edge) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -164,8 +359,11 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('edge_add');
     },
-    // Remove an edge
+    /**
+     * Remove an edge
+     */
     removeEdge: (edgeId) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -179,8 +377,11 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('edge_remove');
     },
-    // Update a specific node
+    /**
+     * Update a specific node
+     */
     updateNode: (nodeId, updates) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -194,12 +395,22 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('node_config');
     },
-    // Clear the workflow
+    /**
+     * Clear the workflow
+     */
     clear: () => {
         workflowStore.set(null);
+        savedSnapshot = null;
+        isDirtyStore.set(false);
+        if (onDirtyStateChangeCallback) {
+            onDirtyStateChangeCallback(false);
+        }
     },
-    // Update workflow metadata
+    /**
+     * Update workflow metadata
+     */
     updateMetadata: (metadata) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -213,8 +424,13 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('metadata');
     },
-    // Batch update nodes and edges (useful for complex operations)
+    /**
+     * Batch update nodes and edges
+     *
+     * Useful for complex operations that update multiple things at once.
+     */
     batchUpdate: (updates) => {
         workflowStore.update(($workflow) => {
             if (!$workflow)
@@ -232,11 +448,15 @@ export const workflowActions = {
                 }
             };
         });
+        notifyWorkflowChange('metadata');
     }
 };
-// Derived store for workflow changes (useful for triggering saves)
+// =========================================================================
+// Additional Derived Stores
+// =========================================================================
+/** Derived store for workflow changes (useful for triggering saves) */
 export const workflowChanged = derived([workflowNodes, workflowEdges, workflowName], ([nodes, edges, name]) => ({ nodes, edges, name }));
-// Derived store for workflow validation
+/** Derived store for workflow validation */
 export const workflowValidation = derived([workflowNodes, workflowEdges], ([nodes, edges]) => ({
     hasNodes: nodes.length > 0,
     hasEdges: edges.length > 0,
@@ -244,9 +464,9 @@ export const workflowValidation = derived([workflowNodes, workflowEdges], ([node
     edgeCount: edges.length,
     isValid: nodes.length > 0 && edges.length >= 0
 }));
-// Derived store for workflow metadata changes
+/** Derived store for workflow metadata changes */
 export const workflowMetadataChanged = derived(workflowMetadata, (metadata) => ({
     createdAt: metadata.createdAt,
     updatedAt: metadata.updatedAt,
-    version: metadata.version || '1.0.0'
+    version: metadata.version ?? '1.0.0'
 }));

package/dist/styles/base.css

@@ -1141,6 +1141,21 @@
 	--cmp-node-color-slate: var(--color-ref-slate-500);
 	--cmp-node-color-purple: var(--color-ref-purple-600);
 
+	/* Edge styling tokens */
+	--flowdrop-edge-trigger-color: var(--color-ref-gray-900);
+	--flowdrop-edge-trigger-color-hover: var(--color-ref-gray-900);
+	--flowdrop-edge-trigger-color-selected: var(--color-ref-violet-600);
+	--flowdrop-edge-trigger-width: 2px;
+	--flowdrop-edge-trigger-width-hover: 3px;
+
+	--flowdrop-edge-tool-color: var(--color-ref-amber-500);
+	--flowdrop-edge-tool-color-hover: var(--color-ref-amber-600);
+	--flowdrop-edge-tool-color-selected: var(--color-ref-violet-600);
+
+	--flowdrop-edge-data-color: var(--color-ref-gray-400);
+	--flowdrop-edge-data-color-hover: var(--color-ref-gray-500);
+	--flowdrop-edge-data-color-selected: var(--color-ref-violet-600);
+
 	/* NotesNode component variables */
 	--notes-node-width: 500px;
 	--notes-node-min-width: 250px;