@d34dman/flowdrop 0.0.52 → 0.0.54

package/dist/stores/settingsStore.d.ts

@@ -5,11 +5,12 @@
  * - Hybrid persistence (localStorage primary, optional API sync)
  * - Category-specific derived stores for performance
  * - Deep merge support for partial updates
- * - Theme system compatibility (backward compatible with themeStore)
+ * - Integrated theme system with system preference detection
  *
  * @module stores/settingsStore
  */
-import type { FlowDropSettings, ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, PartialSettings, SyncStatus, SettingsChangeCallback, SettingsCategory } from '../types/settings.js';
+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';
 /**
  * Main settings store (read-only access to current settings)
  */
@@ -42,6 +43,16 @@ export declare const behaviorSettings: import("svelte/store").Readable<BehaviorS
  * API settings store
  */
 export declare const apiSettings: import("svelte/store").Readable<ApiSettings>;
+/**
+ * Theme preference store
+ * Derived from themeSettings for convenient access
+ */
+export declare const theme: import("svelte/store").Readable<ThemePreference>;
+/**
+ * Resolved theme - the actual theme applied ('light' or 'dark')
+ * When preference is 'auto', resolves based on system preference
+ */
+export declare const resolvedTheme: import("svelte/store").Readable<ResolvedTheme>;
 /**
  * Update settings with partial values
  *
@@ -58,6 +69,37 @@ export declare function resetSettings(categories?: SettingsCategory[]): void;
  * Get current settings synchronously
  */
 export declare function getSettings(): FlowDropSettings;
+/**
+ * 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;
+/**
+ * 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
+ */
+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
  *

package/dist/stores/settingsStore.js

@@ -5,7 +5,7 @@
  * - Hybrid persistence (localStorage primary, optional API sync)
  * - Category-specific derived stores for performance
  * - Deep merge support for partial updates
- * - Theme system compatibility (backward compatible with themeStore)
+ * - Integrated theme system with system preference detection
  *
  * @module stores/settingsStore
  */
@@ -157,7 +157,7 @@ export const behaviorSettings = derived(settingsStore, ($settings) => $settings.
  */
 export const apiSettings = derived(settingsStore, ($settings) => $settings.api);
 // =========================================================================
-// Theme Compatibility (for themeStore migration)
+// Theme System
 // =========================================================================
 /**
  * System theme preference store
@@ -188,13 +188,15 @@ if (typeof window !== 'undefined') {
     }
 }
 /**
- * Theme preference (internal - exported via core/themeStore)
+ * Theme preference store
+ * Derived from themeSettings for convenient access
  */
-const theme = derived(themeSettings, ($theme) => $theme.preference);
+export const theme = derived(themeSettings, ($theme) => $theme.preference);
 /**
- * Resolved theme (internal - exported via core/themeStore)
+ * Resolved theme - the actual theme applied ('light' or 'dark')
+ * When preference is 'auto', resolves based on system preference
  */
-const resolvedTheme = derived([themeSettings, systemTheme], ([$themeSettings, $systemTheme]) => {
+export const resolvedTheme = derived([themeSettings, systemTheme], ([$themeSettings, $systemTheme]) => {
     if ($themeSettings.preference === 'auto') {
         return $systemTheme;
     }
@@ -288,18 +290,21 @@ export function getSettings() {
     return get(settingsStore);
 }
 // =========================================================================
-// Theme-Specific Functions (backward compatible with themeStore)
+// Theme Actions
 // =========================================================================
 /**
- * Set the theme preference (internal - exported via core/themeStore)
+ * Set the theme preference
+ *
+ * @param newTheme - The new theme preference ('light', 'dark', or 'auto')
  */
-function setTheme(newTheme) {
+export function setTheme(newTheme) {
     updateSettings({ theme: { preference: newTheme } });
 }
 /**
- * Toggle between light and dark themes (internal - exported via core/themeStore)
+ * Toggle between light and dark themes
+ * If currently 'auto', switches to the opposite of system preference
  */
-function toggleTheme() {
+export function toggleTheme() {
     const currentTheme = get(theme);
     const currentResolved = get(resolvedTheme);
     if (currentTheme === 'auto') {
@@ -310,9 +315,9 @@ function toggleTheme() {
     }
 }
 /**
- * Cycle through theme options (internal - exported via core/themeStore)
+ * Cycle through theme options: light -> dark -> auto -> light
  */
-function cycleTheme() {
+export function cycleTheme() {
     const currentTheme = get(theme);
     switch (currentTheme) {
         case 'light':
@@ -338,9 +343,14 @@ function applyTheme(resolved) {
     document.documentElement.setAttribute('data-theme', resolved);
 }
 /**
- * Initialize the theme system (internal - exported via core/themeStore)
+ * 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
  */
-function initializeTheme() {
+export function initializeTheme() {
     const resolved = get(resolvedTheme);
     applyTheme(resolved);
     // Subscribe to resolved theme changes and apply them
@@ -348,6 +358,18 @@ function initializeTheme() {
         applyTheme(theme);
     });
 }
+/**
+ * Check if theme system is initialized
+ * Useful for SSR scenarios
+ *
+ * @returns true if running in browser and theme is applied
+ */
+export function isThemeInitialized() {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    return document.documentElement.hasAttribute('data-theme');
+}
 // =========================================================================
 // API Sync Functions
 // =========================================================================

package/dist/types/index.d.ts

@@ -108,6 +108,26 @@ export interface NodePort {
      */
     schema?: OutputSchema | InputSchema;
 }
+/**
+ * Absolute position of a port handle in canvas space.
+ * Used by proximity connect and other features that need port positions.
+ */
+export interface PortCoordinate {
+    /** Absolute X position in canvas space */
+    x: number;
+    /** Absolute Y position in canvas space */
+    y: number;
+    /** Handle ID in format: ${nodeId}-${direction}-${portId} */
+    handleId: string;
+    /** The node this port belongs to */
+    nodeId: string;
+    /** Port direction */
+    direction: 'input' | 'output';
+    /** Port data type for compatibility checks */
+    dataType: string;
+}
+/** Map of handle IDs to their absolute canvas coordinates */
+export type PortCoordinateMap = Map<string, PortCoordinate>;
 /**
  * Dynamic port configuration for user-defined inputs/outputs
  * These are defined in the node's config and allow users to create
@@ -511,6 +531,8 @@ export interface NodeMetadata {
     color?: string;
     /** Badge label displayed in the node header (e.g., "TOOL", "API", "LLM"). Overridable per-instance via config.instanceBadge. */
     badge?: string;
+    /** Port dataType to expose on tool nodes. Defaults to 'tool'. Set to another type (e.g., 'trigger') to show that port instead. */
+    portDataType?: string;
     inputs: NodePort[];
     outputs: NodePort[];
     configSchema?: ConfigSchema;

package/dist/utils/fetchWithAuth.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Fetch authentication utilities
+ *
+ * Shared logic for building HTTP headers with authentication.
+ * Used by components that make authenticated API requests (e.g., FormAutocomplete).
+ *
+ * @module utils/fetchWithAuth
+ */
+import type { AuthProvider } from '../types/auth.js';
+/**
+ * Build fetch headers with optional authentication
+ *
+ * Constructs standard JSON request headers and merges in authentication
+ * headers from the provided AuthProvider, if available.
+ *
+ * @param authProvider - Optional auth provider to get headers from
+ * @returns Promise resolving to a complete headers object
+ *
+ * @example
+ * ```typescript
+ * const headers = await buildFetchHeaders(authProvider);
+ * const response = await fetch(url, { headers });
+ * ```
+ */
+export declare function buildFetchHeaders(authProvider?: AuthProvider): Promise<Record<string, string>>;

package/dist/utils/fetchWithAuth.js

@@ -0,0 +1,34 @@
+/**
+ * Fetch authentication utilities
+ *
+ * Shared logic for building HTTP headers with authentication.
+ * Used by components that make authenticated API requests (e.g., FormAutocomplete).
+ *
+ * @module utils/fetchWithAuth
+ */
+/**
+ * Build fetch headers with optional authentication
+ *
+ * Constructs standard JSON request headers and merges in authentication
+ * headers from the provided AuthProvider, if available.
+ *
+ * @param authProvider - Optional auth provider to get headers from
+ * @returns Promise resolving to a complete headers object
+ *
+ * @example
+ * ```typescript
+ * const headers = await buildFetchHeaders(authProvider);
+ * const response = await fetch(url, { headers });
+ * ```
+ */
+export async function buildFetchHeaders(authProvider) {
+    const headers = {
+        Accept: 'application/json',
+        'Content-Type': 'application/json'
+    };
+    if (authProvider) {
+        const authHeaders = await authProvider.getAuthHeaders();
+        Object.assign(headers, authHeaders);
+    }
+    return headers;
+}

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.52",
+	"version": "0.0.54",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/stores/themeStore.d.ts

@@ -1,68 +0,0 @@
-/**
- * Theme Store for FlowDrop
- *
- * @deprecated This module is deprecated. Use `settingsStore` instead.
- *
- * The theme functionality has been moved to the unified settings system.
- * Import from settingsStore for new code:
- *
- * ```typescript
- * import { theme, resolvedTheme, setTheme, toggleTheme, cycleTheme } from "./settingsStore.js";
- * ```
- *
- * This module re-exports from settingsStore for backward compatibility.
- *
- * Provides reactive theme state management with:
- * - Three theme modes: 'light', 'dark', 'auto' (follows system preference)
- * - localStorage persistence
- * - System preference detection via matchMedia
- * - Automatic data-theme attribute application
- *
- * @module stores/themeStore
- */
-/** Theme preference options */
-export type ThemePreference = 'light' | 'dark' | 'auto';
-/** Resolved theme (actual applied theme, never 'auto') */
-export type ResolvedTheme = 'light' | 'dark';
-/**
- * User's theme preference store
- * Can be 'light', 'dark', or 'auto'
- */
-export declare const theme: import("svelte/store").Writable<ThemePreference>;
-/**
- * Resolved theme store
- * Always returns the actual theme being applied ('light' or 'dark')
- * When theme is 'auto', this reflects the system preference
- */
-export declare const resolvedTheme: import("svelte/store").Readable<ResolvedTheme>;
-/**
- * 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;
-/**
- * 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
- */
-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;

package/dist/stores/themeStore.js

@@ -1,213 +0,0 @@
-/**
- * Theme Store for FlowDrop
- *
- * @deprecated This module is deprecated. Use `settingsStore` instead.
- *
- * The theme functionality has been moved to the unified settings system.
- * Import from settingsStore for new code:
- *
- * ```typescript
- * import { theme, resolvedTheme, setTheme, toggleTheme, cycleTheme } from "./settingsStore.js";
- * ```
- *
- * This module re-exports from settingsStore for backward compatibility.
- *
- * Provides reactive theme state management with:
- * - Three theme modes: 'light', 'dark', 'auto' (follows system preference)
- * - localStorage persistence
- * - System preference detection via matchMedia
- * - Automatic data-theme attribute application
- *
- * @module stores/themeStore
- */
-import { writable, derived, get } from 'svelte/store';
-/** localStorage key for persisting theme preference */
-const STORAGE_KEY = 'flowdrop-theme';
-/** Default theme preference when none is stored */
-const DEFAULT_THEME = 'auto';
-// =========================================================================
-// System Preference Detection
-// =========================================================================
-/**
- * Get the system's color scheme preference
- *
- * @returns 'dark' if system prefers dark mode, 'light' otherwise
- */
-function getSystemTheme() {
-    if (typeof window === 'undefined') {
-        return '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');
-// Listen for system theme changes
-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');
-    };
-    // Modern browsers use addEventListener
-    if (mediaQuery.addEventListener) {
-        mediaQuery.addEventListener('change', handleSystemThemeChange);
-    }
-    else {
-        // Fallback for older browsers
-        mediaQuery.addListener(handleSystemThemeChange);
-    }
-}
-// =========================================================================
-// Theme Preference Store
-// =========================================================================
-/**
- * Load saved theme preference from localStorage
- *
- * @returns Saved theme preference or default
- */
-function loadSavedTheme() {
-    if (typeof window === 'undefined') {
-        return DEFAULT_THEME;
-    }
-    try {
-        const saved = localStorage.getItem(STORAGE_KEY);
-        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');
-    }
-    return DEFAULT_THEME;
-}
-/**
- * Save theme preference to localStorage
- *
- * @param theme - Theme preference to save
- */
-function saveTheme(theme) {
-    if (typeof window === 'undefined') {
-        return;
-    }
-    try {
-        localStorage.setItem(STORAGE_KEY, theme);
-    }
-    catch {
-        // localStorage may be unavailable
-        console.warn('Failed to save theme to localStorage');
-    }
-}
-/**
- * User's theme preference store
- * Can be 'light', 'dark', or 'auto'
- */
-export const theme = writable(loadSavedTheme());
-// =========================================================================
-// Resolved Theme Store
-// =========================================================================
-/**
- * Resolved theme store
- * Always returns the actual theme being applied ('light' or 'dark')
- * When theme is 'auto', this reflects the system preference
- */
-export const resolvedTheme = derived([theme, systemTheme], ([$theme, $systemTheme]) => {
-    if ($theme === 'auto') {
-        return $systemTheme;
-    }
-    return $theme;
-});
-// =========================================================================
-// Theme Actions
-// =========================================================================
-/**
- * Apply theme to the document
- * Sets the data-theme attribute on the document element
- *
- * @param resolved - The resolved theme to apply
- */
-function applyTheme(resolved) {
-    if (typeof document === 'undefined') {
-        return;
-    }
-    document.documentElement.setAttribute('data-theme', resolved);
-}
-/**
- * Set the theme preference
- *
- * @param newTheme - The new theme preference ('light', 'dark', or 'auto')
- */
-export function setTheme(newTheme) {
-    theme.set(newTheme);
-    saveTheme(newTheme);
-}
-/**
- * Toggle between light and dark themes
- * If currently 'auto', switches to the opposite of system preference
- */
-export function toggleTheme() {
-    const currentTheme = get(theme);
-    const currentResolved = get(resolvedTheme);
-    if (currentTheme === 'auto') {
-        // Switch to opposite of system preference
-        setTheme(currentResolved === 'dark' ? 'light' : 'dark');
-    }
-    else {
-        // Toggle between light and dark
-        setTheme(currentTheme === 'dark' ? 'light' : 'dark');
-    }
-}
-/**
- * Cycle through theme options: light -> dark -> auto -> light
- */
-export function cycleTheme() {
-    const currentTheme = get(theme);
-    switch (currentTheme) {
-        case 'light':
-            setTheme('dark');
-            break;
-        case 'dark':
-            setTheme('auto');
-            break;
-        case 'auto':
-            setTheme('light');
-            break;
-    }
-}
-// =========================================================================
-// Initialization
-// =========================================================================
-/**
- * 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
- */
-export function initializeTheme() {
-    // Apply initial theme
-    const resolved = get(resolvedTheme);
-    applyTheme(resolved);
-    // Subscribe to resolved theme changes and apply them
-    resolvedTheme.subscribe((resolved) => {
-        applyTheme(resolved);
-    });
-}
-/**
- * Check if theme system is initialized
- * Useful for SSR scenarios
- *
- * @returns true if running in browser and theme is applied
- */
-export function isThemeInitialized() {
-    if (typeof document === 'undefined') {
-        return false;
-    }
-    return document.documentElement.hasAttribute('data-theme');
-}