@flowdrop/flowdrop 1.0.0

package/dist/stores/portCoordinateStore.svelte.js

@@ -0,0 +1,186 @@
+/**
+ * Port Coordinate Store (Svelte 5 Runes)
+ *
+ * General-purpose store that maintains absolute canvas-space coordinates
+ * for all port handles in the workflow. Built from SvelteFlow's internal
+ * handle bounds data combined with FlowDrop port metadata.
+ *
+ * Primary consumers:
+ * - Proximity connect (port-to-port distance instead of node center distance)
+ *
+ * Coordinates are derived from SvelteFlow's InternalNode.internals.handleBounds
+ * which SvelteFlow already maintains for all node types. This avoids replicating
+ * CSS positioning logic and stays automatically accurate.
+ */
+import { SvelteMap } from 'svelte/reactivity';
+import { ProximityConnectHelper } from '../helpers/proximityConnect.js';
+/** Reactive state holding all port absolute coordinates, keyed by handleId */
+let coordinates = $state(new SvelteMap());
+/**
+ * Parse a handle ID to extract nodeId, direction, and portId.
+ * Handle ID format: ${nodeId}-${direction}-${portId}
+ *
+ * Note: nodeId itself can contain hyphens, so we match direction
+ * from the known suffixes (-input- or -output-).
+ */
+function parseHandleId(handleId) {
+    // Match the last occurrence of -input- or -output- to handle nodeIds with hyphens
+    const inputMatch = handleId.match(/^(.+)-input-(.+)$/);
+    if (inputMatch) {
+        return { nodeId: inputMatch[1], direction: 'input', portId: inputMatch[2] };
+    }
+    const outputMatch = handleId.match(/^(.+)-output-(.+)$/);
+    if (outputMatch) {
+        return { nodeId: outputMatch[1], direction: 'output', portId: outputMatch[2] };
+    }
+    return null;
+}
+/**
+ * Build a dataType lookup map from a node's ports.
+ * Maps portId -> dataType for quick lookup when processing handle bounds.
+ */
+function buildPortDataTypeLookup(node) {
+    const lookup = new Map();
+    const inputs = ProximityConnectHelper.getAllPorts(node, 'input');
+    for (const port of inputs) {
+        lookup.set(`input-${port.id}`, port.dataType);
+    }
+    const outputs = ProximityConnectHelper.getAllPorts(node, 'output');
+    for (const port of outputs) {
+        lookup.set(`output-${port.id}`, port.dataType);
+    }
+    return lookup;
+}
+/**
+ * Compute port coordinates for a single node from SvelteFlow internal data.
+ *
+ * @param node - The workflow node
+ * @param internalNode - SvelteFlow's internal node with handleBounds
+ * @returns Array of PortCoordinate entries for this node
+ */
+function computeNodePortCoordinates(node, internalNode) {
+    const handleBounds = internalNode.internals.handleBounds;
+    if (!handleBounds)
+        return [];
+    const posAbs = internalNode.internals.positionAbsolute;
+    const dataTypeLookup = buildPortDataTypeLookup(node);
+    const result = [];
+    const allHandles = [...(handleBounds.source ?? []), ...(handleBounds.target ?? [])];
+    for (const handle of allHandles) {
+        if (!handle.id)
+            continue;
+        const parsed = parseHandleId(handle.id);
+        if (!parsed)
+            continue;
+        const lookupKey = `${parsed.direction}-${parsed.portId}`;
+        const dataType = dataTypeLookup.get(lookupKey);
+        if (!dataType)
+            continue;
+        result.push({
+            x: posAbs.x + handle.x + handle.width / 2,
+            y: posAbs.y + handle.y + handle.height / 2,
+            handleId: handle.id,
+            nodeId: parsed.nodeId,
+            direction: parsed.direction,
+            dataType
+        });
+    }
+    return result;
+}
+/**
+ * Rebuild coordinates for ALL nodes from SvelteFlow internals.
+ * Call on initial workflow load (after render) and after bulk changes.
+ *
+ * @param nodes - All workflow nodes
+ * @param getInternalNode - SvelteFlow's getInternalNode function
+ */
+export function rebuildAllPortCoordinates(nodes, getInternalNode) {
+    const map = new SvelteMap();
+    for (const node of nodes) {
+        const internalNode = getInternalNode(node.id);
+        if (!internalNode)
+            continue;
+        const coords = computeNodePortCoordinates(node, internalNode);
+        for (const coord of coords) {
+            map.set(coord.handleId, coord);
+        }
+    }
+    coordinates = map;
+}
+/**
+ * Update coordinates for a single node (efficient for drag updates).
+ * Only recomputes ports for the specified node.
+ *
+ * @param node - The workflow node to update
+ * @param getInternalNode - SvelteFlow's getInternalNode function
+ */
+export function updateNodePortCoordinates(node, getInternalNode) {
+    const internalNode = getInternalNode(node.id);
+    if (!internalNode)
+        return;
+    // Remove old entries for this node
+    for (const [key, coord] of coordinates) {
+        if (coord.nodeId === node.id) {
+            coordinates.delete(key);
+        }
+    }
+    // Add new entries
+    const coords = computeNodePortCoordinates(node, internalNode);
+    for (const coord of coords) {
+        coordinates.set(coord.handleId, coord);
+    }
+}
+/**
+ * Remove all coordinates for a node (on node delete).
+ *
+ * @param nodeId - ID of the node to remove
+ */
+export function removeNodePortCoordinates(nodeId) {
+    for (const [key, coord] of coordinates) {
+        if (coord.nodeId === nodeId) {
+            coordinates.delete(key);
+        }
+    }
+}
+/**
+ * Get coordinates for a specific handle.
+ *
+ * @param handleId - The handle ID to look up
+ * @returns The port coordinate or undefined if not found
+ */
+export function getPortCoordinate(handleId) {
+    return coordinates.get(handleId);
+}
+/**
+ * Get all coordinates for a specific node.
+ *
+ * @param nodeId - The node ID to look up
+ * @returns Array of port coordinates for the node
+ */
+export function getNodePortCoordinates(nodeId) {
+    const result = [];
+    for (const coord of coordinates.values()) {
+        if (coord.nodeId === nodeId) {
+            result.push(coord);
+        }
+    }
+    return result;
+}
+/**
+ * Get the current snapshot of all port coordinates.
+ * Returns the reactive SvelteMap directly.
+ *
+ * @returns Current port coordinate map
+ */
+export function getPortCoordinateSnapshot() {
+    return coordinates;
+}
+/**
+ * Get the reactive port coordinates state.
+ * Useful for components that need to reactively read the coordinates.
+ *
+ * @returns The reactive port coordinate map
+ */
+export function getPortCoordinates() {
+    return coordinates;
+}

package/dist/stores/settingsStore.svelte.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Settings Store for FlowDrop (Svelte 5 Runes)
+ *
+ * Provides unified state management for all user-configurable settings with:
+ * - Hybrid persistence (localStorage primary, optional API sync)
+ * - Category-specific getter functions for performance
+ * - Deep merge support for partial updates
+ * - Integrated theme system with system preference detection
+ *
+ * @module stores/settingsStore
+ */
+import type { FlowDropSettings, ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, PartialSettings, SyncStatus, ResolvedTheme, ThemePreference, SettingsChangeCallback, SettingsCategory } from '../types/settings.js';
+export type { ThemePreference, ResolvedTheme } from '../types/settings.js';
+/**
+ * Get current settings (replaces settingsStore derived store)
+ */
+export declare function getSettings(): FlowDropSettings;
+/**
+ * Get sync status (replaces syncStatusStore derived store)
+ */
+export declare function getSyncStatus(): {
+    status: SyncStatus;
+    lastSyncedAt: number | null;
+    error: string | null;
+};
+/**
+ * Get theme settings (replaces themeSettings derived store)
+ */
+export declare function getThemeSettings(): ThemeSettings;
+/**
+ * Get editor settings (replaces editorSettings derived store)
+ */
+export declare function getEditorSettings(): EditorSettings;
+/**
+ * Get UI settings (replaces uiSettings derived store)
+ */
+export declare function getUiSettings(): UISettings;
+/**
+ * Get behavior settings (replaces behaviorSettings derived store)
+ */
+export declare function getBehaviorSettings(): BehaviorSettings;
+/**
+ * Get API settings (replaces apiSettings derived store)
+ */
+export declare function getApiSettings(): ApiSettings;
+/**
+ * Get theme preference (replaces theme derived store)
+ */
+export declare function getTheme(): ThemePreference;
+/**
+ * Get resolved theme - the actual theme applied ('light' or 'dark')
+ * When preference is 'auto', resolves based on system preference
+ * (replaces resolvedTheme derived store)
+ */
+export declare function getResolvedTheme(): ResolvedTheme;
+/**
+ * Get system theme state (for internal use)
+ */
+export declare function getSystemThemeState(): ResolvedTheme;
+/**
+ * Initialize the system theme change listener.
+ * Sets up a media query listener for the system color scheme preference.
+ *
+ * @returns Cleanup function that removes the listener
+ */
+export declare function initThemeListener(): () => void;
+/**
+ * Update settings with partial values
+ *
+ * @param partial - Partial settings to merge
+ */
+export declare function updateSettings(partial: PartialSettings): void;
+/**
+ * Reset settings to defaults
+ *
+ * @param categories - Optional categories to reset (all if not specified)
+ */
+export declare function resetSettings(categories?: SettingsCategory[]): void;
+/**
+ * Set the theme preference
+ *
+ * @param newTheme - The new theme preference ('light', 'dark', or 'auto')
+ */
+export declare function setTheme(newTheme: ThemePreference): void;
+/**
+ * Toggle between light and dark themes
+ * If currently 'auto', switches to the opposite of system preference
+ */
+export declare function toggleTheme(): void;
+/**
+ * Cycle through theme options: light -> dark -> auto -> light
+ */
+export declare function cycleTheme(): void;
+/**
+ * Clean up the theme subscription created by initializeTheme().
+ * Call this when tearing down the settings system (e.g., in tests or
+ * component cleanup) to prevent memory leaks.
+ */
+export declare function cleanupThemeSubscription(): void;
+/**
+ * Initialize the theme system
+ * Should be called once on app startup
+ *
+ * This function:
+ * 1. Applies the current resolved theme to the document
+ * 2. Sets up reactivity to apply theme changes
+ *
+ * Note: In Svelte 5, we use $effect for reactivity. Since $effect can only
+ * be used in component context or $effect.root, we use $effect.root here
+ * to create a standalone reactive scope.
+ */
+export declare function initializeTheme(): void;
+/**
+ * Check if theme system is initialized
+ * Useful for SSR scenarios
+ *
+ * @returns true if running in browser and theme is applied
+ */
+export declare function isThemeInitialized(): boolean;
+/**
+ * Set the settings service for API operations
+ *
+ * @param service - Settings service instance
+ */
+export declare function setSettingsService(service: {
+    savePreferences: (settings: FlowDropSettings) => Promise<void>;
+    getPreferences: () => Promise<FlowDropSettings>;
+} | null): void;
+/**
+ * Sync current settings to the backend API
+ *
+ * @returns Promise that resolves when sync is complete
+ */
+export declare function syncSettingsToApi(): Promise<void>;
+/**
+ * Load settings from the backend API
+ *
+ * @returns Promise that resolves when load is complete
+ */
+export declare function loadSettingsFromApi(): Promise<void>;
+/**
+ * Subscribe to settings changes
+ *
+ * @param callback - Function to call when settings change
+ * @returns Unsubscribe function
+ */
+export declare function onSettingsChange(callback: SettingsChangeCallback): () => void;
+/**
+ * Initialize the settings system
+ *
+ * @param options - Initialization options
+ */
+export declare function initializeSettings(options?: {
+    /** Custom default settings to merge */
+    defaults?: PartialSettings;
+    /** Enable API sync on initialization */
+    apiSync?: boolean;
+}): Promise<void>;