@d34dman/flowdrop 0.0.52 → 0.0.53

package/dist/components/App.svelte

@@ -738,6 +738,7 @@
 				onClose={() => (isWorkflowSettingsOpen = false)}
 			>
 				<ConfigForm
+					{authProvider}
 					schema={workflowConfigSchema}
 					values={workflowConfigValues}
 					showUIExtensions={false}
@@ -765,6 +766,7 @@
 				onClose={closeConfigSidebar}
 			>
 				<ConfigForm
+					{authProvider}
 					node={currentNode}
 					workflowId={$workflowStore?.id}
 					workflowNodes={$workflowStore?.nodes}

package/dist/components/ConfigForm.svelte

@@ -600,6 +600,7 @@
 							ariaDescribedBy="ext-hideUnconnectedHandles-description"
 							onChange={(val) => {
 								uiExtensionValues.hideUnconnectedHandles = val;
+								handleFormBlur();
 							}}
 						/>
 					</FormFieldWrapper>

package/dist/components/SettingsPanel.svelte

@@ -144,8 +144,7 @@
 				proximityConnect: {
 					type: 'boolean',
 					title: 'Proximity Connect',
-					description:
-						'Auto-connect compatible ports when dragging nodes near each other',
+					description: 'Auto-connect compatible ports when dragging nodes near each other',
 					default: false
 				},
 				proximityConnectDistance: {

package/dist/components/ThemeToggle.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { theme, resolvedTheme, cycleTheme } from '../stores/themeStore.js';
+	import { theme, resolvedTheme, cycleTheme } from '../stores/settingsStore.js';
 	import type { ThemePreference } from '../types/settings.js';
 
 	/**

package/dist/components/WorkflowEditor.svelte

@@ -16,8 +16,7 @@
 		type ColorMode
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
-	import { resolvedTheme } from '../stores/themeStore.js';
-	import { editorSettings, behaviorSettings } from '../stores/settingsStore.js';
+	import { resolvedTheme, editorSettings, behaviorSettings } from '../stores/settingsStore.js';
 	import type {
 		WorkflowNode as WorkflowNodeType,
 		NodeMetadata,

package/dist/components/form/FormAutocomplete.svelte

@@ -25,6 +25,7 @@
 	import Icon from '@iconify/svelte';
 	import type { AutocompleteConfig, AuthProvider } from '../../types/index.js';
 	import type { FieldOption } from './types.js';
+	import { buildFetchHeaders } from '../../utils/fetchWithAuth.js';
 
 	/**
 	 * Props interface for FormAutocomplete component
@@ -192,18 +193,8 @@
 		abortController = new AbortController();
 
 		try {
-			// Build headers with authentication
-			const headers: Record<string, string> = {
-				Accept: 'application/json',
-				'Content-Type': 'application/json'
-			};
-
-			// Add auth headers if provider is available (call getter to get current value)
-			const authProvider = getAuthProvider?.();
-			if (authProvider) {
-				const authHeaders = await authProvider.getAuthHeaders();
-				Object.assign(headers, authHeaders);
-			}
+			// Build headers with authentication (call getter to get current value)
+			const headers = await buildFetchHeaders(getAuthProvider?.());
 
 			// Fetch with timeout
 			const timeoutId = setTimeout(() => {

package/dist/components/form/FormField.svelte

@@ -44,7 +44,7 @@
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
 	import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
-	import { resolvedTheme } from '../../stores/themeStore.js';
+	import { resolvedTheme } from '../../stores/settingsStore.js';
 
 	interface Props {
 		/** Unique key/id for the field */

package/dist/components/form/FormFieldLight.svelte

@@ -43,7 +43,7 @@
 	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
 	import FormArray from './FormArray.svelte';
 	import { resolveFieldComponent } from '../../form/fieldRegistry.js';
-	import { resolvedTheme } from '../../stores/themeStore.js';
+	import { resolvedTheme } from '../../stores/settingsStore.js';
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
 

package/dist/components/nodes/TerminalNode.svelte

@@ -10,11 +10,12 @@
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+	import type { ConfigValues, NodeMetadata, NodeExtensions, NodePort } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
 	import { getNodeIcon } from '../../utils/icons.js';
 	import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
+	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	/**
 	 * Terminal node variant types
@@ -70,6 +71,7 @@
 			config: ConfigValues;
 			metadata: NodeMetadata;
 			nodeId?: string;
+			extensions?: NodeExtensions;
 			onConfigOpen?: (node: {
 				id: string;
 				type: string;
@@ -133,6 +135,30 @@
 	 */
 	let variantConfig = $derived(VARIANT_CONFIGS[variant]);
 
+	/**
+	 * Get the hideUnconnectedHandles setting from extensions
+	 * Merges node type defaults with instance overrides
+	 */
+	const hideUnconnectedHandles = $derived(() => {
+		const typeDefault = props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
+		const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
+		return instanceOverride ?? typeDefault;
+	});
+
+	/**
+	 * Check if a port should be visible based on connection state and settings
+	 */
+	function isPortVisible(port: NodePort, type: 'input' | 'output'): boolean {
+		if (!hideUnconnectedHandles()) {
+			return true;
+		}
+		if (port.required) {
+			return true;
+		}
+		const handleId = `${props.data.nodeId}-${type}-${port.id}`;
+		return $connectedHandles.has(handleId);
+	}
+
 	/**
 	 * Get icon using the same resolution as WorkflowNode
 	 * Uses getNodeIcon utility with category fallback, or variant default
@@ -239,14 +265,24 @@
 	);
 
 	/**
-	 * Determine if we should show inputs based on ports
+	 * Visible input ports filtered by hideUnconnectedHandles setting
+	 */
+	let visibleInputPorts = $derived(inputPorts.filter((port) => isPortVisible(port, 'input')));
+
+	/**
+	 * Visible output ports filtered by hideUnconnectedHandles setting
+	 */
+	let visibleOutputPorts = $derived(outputPorts.filter((port) => isPortVisible(port, 'output')));
+
+	/**
+	 * Determine if we should show inputs based on visible ports
 	 */
-	let showInputs = $derived(inputPorts.length > 0);
+	let showInputs = $derived(visibleInputPorts.length > 0);
 
 	/**
-	 * Determine if we should show outputs based on ports
+	 * Determine if we should show outputs based on visible ports
 	 */
-	let showOutputs = $derived(outputPorts.length > 0);
+	let showOutputs = $derived(visibleOutputPorts.length > 0);
 
 	/**
 	 * Handle configuration sidebar - using global ConfigSidebar
@@ -317,8 +353,8 @@
 	<div class="flowdrop-terminal-node__circle-wrapper">
 		<!-- Input Handles (for end/exit variants) -->
 		{#if showInputs}
-			{#each inputPorts as port, index (port.id)}
-				{@const pos = getCircleHandlePosition(index, inputPorts.length, 'left')}
+			{#each visibleInputPorts as port, index (`${port.id}-${visibleInputPorts.length}`)}
+				{@const pos = getCircleHandlePosition(index, visibleInputPorts.length, 'left')}
 				<Handle
 					type="target"
 					position={Position.Left}
@@ -339,8 +375,8 @@
 
 		<!-- Output Handles (for start variant) -->
 		{#if showOutputs}
-			{#each outputPorts as port, index (port.id)}
-				{@const pos = getCircleHandlePosition(index, outputPorts.length, 'right')}
+			{#each visibleOutputPorts as port, index (`${port.id}-${visibleOutputPorts.length}`)}
+				{@const pos = getCircleHandlePosition(index, visibleOutputPorts.length, 'right')}
 				<Handle
 					type="source"
 					position={Position.Right}

package/dist/components/nodes/TerminalNode.svelte.d.ts

@@ -1,10 +1,11 @@
-import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
         nodeId?: string;
+        extensions?: NodeExtensions;
         onConfigOpen?: (node: {
             id: string;
             type: string;

package/dist/components/nodes/ToolNode.svelte

@@ -67,9 +67,7 @@
 	 * This allows users to customize the badge text per-instance via config.
 	 */
 	const displayBadge = $derived(
-		(props.data.config?.instanceBadge as string) ||
-			(props.data.metadata?.badge as string) ||
-			'TOOL'
+		(props.data.config?.instanceBadge as string) || (props.data.metadata?.badge as string) || 'TOOL'
 	);
 
 	/**
@@ -96,20 +94,28 @@
 	 */
 	let nodeStyle = $derived(`--fd-tool-node-color: ${toolColor}`);
 
-	// Check for tool interface ports in metadata
+	/**
+	 * Configurable port dataType to expose on this tool node.
+	 * Defaults to 'tool', but can be overridden via metadata.portDataType
+	 * to show a different port type (e.g., 'trigger') when the node is
+	 * repurposed with a custom badge.
+	 */
+	let portDataType = $derived((props.data.metadata?.portDataType as string) || 'tool');
+
+	// Check for matching interface ports in metadata
 	let hasToolInputPort = $derived(
-		props.data.metadata?.inputs?.some((port) => port.dataType === 'tool') || false
+		props.data.metadata?.inputs?.some((port) => port.dataType === portDataType) || false
 	);
 	let hasToolOutputPort = $derived(
-		props.data.metadata?.outputs?.some((port) => port.dataType === 'tool') || false
+		props.data.metadata?.outputs?.some((port) => port.dataType === portDataType) || false
 	);
 
-	// Get the actual tool ports for proper handle generation
+	// Get the actual matching ports for proper handle generation
 	let toolInputPort = $derived(
-		props.data.metadata?.inputs?.find((port) => port.dataType === 'tool')
+		props.data.metadata?.inputs?.find((port) => port.dataType === portDataType)
 	);
 	let toolOutputPort = $derived(
-		props.data.metadata?.outputs?.find((port) => port.dataType === 'tool')
+		props.data.metadata?.outputs?.find((port) => port.dataType === portDataType)
 	);
 
 	/**
@@ -159,7 +165,7 @@
 		position={Position.Left}
 		id={`${props.data.nodeId}-input-${toolInputPort.id}`}
 		style="top: 40px; transform: translateY(-50%); margin-left: -10px; --fd-handle-fill: {getDataTypeColor(
-			'tool'
+			portDataType
 		)}; --fd-handle-border-color: var(--fd-handle-border);"
 	/>
 {/if}
@@ -232,7 +238,7 @@
 		position={Position.Right}
 		id={`${props.data.nodeId}-output-${toolOutputPort.id}`}
 		style="top: 40px; transform: translateY(-50%); margin-right: -10px; --fd-handle-fill: {getDataTypeColor(
-			'tool'
+			portDataType
 		)}; --fd-handle-border-color: var(--fd-handle-border);"
 	/>
 {/if}

package/dist/core/index.d.ts

@@ -40,5 +40,5 @@ export { isFieldOptionArray, normalizeOptions } from '../components/form/types.j
 export { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 export { defaultEndpointConfig, createEndpointConfig } from '../config/endpoints.js';
 export * from '../adapters/WorkflowAdapter.js';
-export type { ThemePreference, ResolvedTheme } from '../stores/themeStore.js';
-export { theme, resolvedTheme, setTheme, toggleTheme, cycleTheme, initializeTheme, isThemeInitialized } from '../stores/themeStore.js';
+export type { ThemePreference, ResolvedTheme } from '../stores/settingsStore.js';
+export { theme, resolvedTheme, setTheme, toggleTheme, cycleTheme, initializeTheme, isThemeInitialized } from '../stores/settingsStore.js';

package/dist/core/index.js

@@ -51,4 +51,4 @@ export { defaultEndpointConfig, createEndpointConfig } from '../config/endpoints
 // Adapters
 // ============================================================================
 export * from '../adapters/WorkflowAdapter.js';
-export { theme, resolvedTheme, setTheme, toggleTheme, cycleTheme, initializeTheme, isThemeInitialized } from '../stores/themeStore.js';
+export { theme, resolvedTheme, setTheme, toggleTheme, cycleTheme, initializeTheme, isThemeInitialized } from '../stores/settingsStore.js';

package/dist/settings/index.d.ts

@@ -5,7 +5,8 @@
  * preferences with hybrid persistence (localStorage + optional API sync).
  *
  * Theme stores and functions (theme, resolvedTheme, setTheme, toggleTheme,
- * cycleTheme, initializeTheme) are exported from `@d34dman/flowdrop/core`.
+ * cycleTheme, initializeTheme) are exported from `@d34dman/flowdrop/core`
+ * (sourced from settingsStore).
  *
  * @module settings
  *

package/dist/settings/index.js

@@ -5,7 +5,8 @@
  * preferences with hybrid persistence (localStorage + optional API sync).
  *
  * Theme stores and functions (theme, resolvedTheme, setTheme, toggleTheme,
- * cycleTheme, initializeTheme) are exported from `@d34dman/flowdrop/core`.
+ * cycleTheme, initializeTheme) are exported from `@d34dman/flowdrop/core`
+ * (sourced from settingsStore).
  *
  * @module settings
  *

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

@@ -511,6 +511,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.53",
 	"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');
-}