@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/components/SettingsPanel.svelte

@@ -34,12 +34,13 @@
 		SETTINGS_CATEGORY_ICONS
 	} from '../types/settings.js';
 	import {
-		settingsStore,
+		getSettings,
 		updateSettings,
 		resetSettings,
 		syncSettingsToApi,
-		syncStatusStore
-	} from '../stores/settingsStore.js';
+		getSyncStatus
+	} from '../stores/settingsStore.svelte.js';
+	import { logger } from '../utils/logger.js';
 
 	/**
 	 * Props interface for SettingsPanel component
@@ -76,7 +77,7 @@
 	/**
 	 * Whether sync is in progress
 	 */
-	let isSyncing = $derived($syncStatusStore.status === 'syncing');
+	let isSyncing = $derived(getSyncStatus().status === 'syncing');
 
 	/**
 	 * JSON Schema definitions for each settings category
@@ -254,7 +255,7 @@
 	 * Get current values for a category from the store
 	 */
 	function getCategoryValues(category: SettingsCategory): Record<string, unknown> {
-		const settings = $settingsStore;
+		const settings = getSettings();
 		const categorySettings = settings[category];
 		// Convert to Record<string, unknown> for SchemaForm compatibility
 		return Object.fromEntries(Object.entries(categorySettings));
@@ -280,7 +281,7 @@
 		try {
 			await syncSettingsToApi();
 		} catch (error) {
-			console.error('Failed to sync settings:', error);
+			logger.error('Failed to sync settings:', error);
 		}
 	}
 
@@ -433,15 +434,15 @@
 	</div>
 
 	<!-- Sync Status Indicator -->
-	{#if $syncStatusStore.error}
+	{#if getSyncStatus().error}
 		<div class="flowdrop-settings-panel__error">
 			<Icon icon="mdi:alert-circle" />
-			<span>{$syncStatusStore.error}</span>
+			<span>{getSyncStatus().error}</span>
 		</div>
-	{:else if $syncStatusStore.status === 'synced' && $syncStatusStore.lastSyncedAt}
+	{:else if getSyncStatus().status === 'synced' && getSyncStatus().lastSyncedAt}
 		<div class="flowdrop-settings-panel__synced">
 			<Icon icon="mdi:check-circle" />
-			<span>Synced {new Date($syncStatusStore.lastSyncedAt).toLocaleTimeString()}</span>
+			<span>Synced {new Date(getSyncStatus().lastSyncedAt!).toLocaleTimeString()}</span>
 		</div>
 	{/if}
 </div>
@@ -458,8 +459,8 @@
 	/* Tabs */
 	.flowdrop-settings-panel__tabs {
 		display: flex;
-		gap: var(--fd-space-1);
-		padding: var(--fd-space-3);
+		gap: var(--fd-space-3xs);
+		padding: var(--fd-space-md);
 		border-bottom: 1px solid var(--fd-border);
 		overflow-x: auto;
 	}
@@ -467,8 +468,8 @@
 	.flowdrop-settings-panel__tab {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-2) var(--fd-space-3);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		border: none;
 		border-radius: var(--fd-radius-md);
 		background-color: transparent;
@@ -508,7 +509,7 @@
 	.flowdrop-settings-panel__content {
 		flex: 1;
 		overflow-y: auto;
-		padding: var(--fd-space-4);
+		padding: var(--fd-space-xl);
 	}
 
 	.flowdrop-settings-panel__panel {
@@ -524,15 +525,15 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: var(--fd-space-3) var(--fd-space-4);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		border-top: 1px solid var(--fd-border);
-		gap: var(--fd-space-3);
+		gap: var(--fd-space-md);
 	}
 
 	.flowdrop-settings-panel__footer-start,
 	.flowdrop-settings-panel__footer-end {
 		display: flex;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		align-items: center;
 	}
 
@@ -540,8 +541,8 @@
 	.flowdrop-settings-panel__btn {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-2) var(--fd-space-3);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		border-radius: var(--fd-radius-md);
 		font-size: var(--fd-text-sm);
 		font-weight: 500;
@@ -601,8 +602,8 @@
 	.flowdrop-settings-panel__synced {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-2) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-xs) var(--fd-space-xl);
 		font-size: var(--fd-text-xs);
 	}
 

package/dist/components/StatusIcon.stories.svelte

@@ -0,0 +1,60 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import StatusIcon from "./StatusIcon.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/StatusIcon",
+		component: StatusIcon,
+		tags: ["autodocs"],
+		argTypes: {
+			status: {
+				control: { type: "select" },
+				options: ["idle", "pending", "running", "completed", "failed", "cancelled", "skipped"],
+			},
+			size: {
+				control: { type: "select" },
+				options: ["sm", "md", "lg", "xl"],
+			},
+			showBackground: { control: "boolean" },
+		},
+	});
+</script>
+
+<Story name="Idle" args={{ status: "idle" }} />
+
+<Story name="Running" args={{ status: "running" }} />
+
+<Story name="Completed" args={{ status: "completed" }} />
+
+<Story name="Failed" args={{ status: "failed" }} />
+
+<Story name="With Background" args={{ status: "completed", showBackground: true }} />
+
+<Story name="All Statuses">
+	<div style="display: flex; flex-direction: column; gap: 1.5rem;">
+		<div>
+			<div style="margin-bottom: 0.5rem; font-weight: 600;">Icon Only</div>
+			<div style="display: flex; gap: 1rem; align-items: center;">
+				<StatusIcon status="idle" />
+				<StatusIcon status="pending" />
+				<StatusIcon status="running" />
+				<StatusIcon status="completed" />
+				<StatusIcon status="failed" />
+				<StatusIcon status="cancelled" />
+				<StatusIcon status="skipped" />
+			</div>
+		</div>
+		<div>
+			<div style="margin-bottom: 0.5rem; font-weight: 600;">With Background</div>
+			<div style="display: flex; gap: 1rem; align-items: center;">
+				<StatusIcon status="idle" showBackground />
+				<StatusIcon status="pending" showBackground />
+				<StatusIcon status="running" showBackground />
+				<StatusIcon status="completed" showBackground />
+				<StatusIcon status="failed" showBackground />
+				<StatusIcon status="cancelled" showBackground />
+				<StatusIcon status="skipped" showBackground />
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/StatusIcon.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default StatusIcon;
+type StatusIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const StatusIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import StatusIcon from "./StatusIcon.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/StatusIcon.svelte

@@ -84,11 +84,18 @@
 		width: var(--background-size);
 		height: var(--background-size);
 		background-color: var(--status-color);
+		color: #fff;
 		border-radius: var(--background-radius);
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 		position: relative;
 	}
 
+	.status-icon--with-background :global(.status-icon__icon) {
+		width: var(--icon-size);
+		height: var(--icon-size);
+		font-size: var(--icon-size);
+	}
+
 	.status-icon--icon-only {
 		width: var(--icon-size);
 		height: var(--icon-size);

package/dist/components/StatusLabel.stories.svelte

@@ -0,0 +1,17 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import StatusLabel from "./StatusLabel.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/StatusLabel",
+		component: StatusLabel,
+		tags: ["autodocs"],
+		argTypes: {
+			label: { control: "text" },
+		},
+	});
+</script>
+
+<Story name="Default" args={{ label: "Ready" }} />
+
+<Story name="Long Text" args={{ label: "Processing workflow execution..." }} />

package/dist/components/StatusLabel.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default StatusLabel;
+type StatusLabel = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const StatusLabel: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import StatusLabel from "./StatusLabel.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ThemeToggle.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import ThemeToggle from "./ThemeToggle.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/ThemeToggle",
+		component: ThemeToggle,
+		tags: ["autodocs"],
+		argTypes: {
+			size: {
+				control: { type: "select" },
+				options: ["sm", "md", "lg"],
+			},
+			showLabel: { control: "boolean" },
+		},
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Small" args={{ size: "sm" }} />
+
+<Story name="Large" args={{ size: "lg" }} />
+
+<Story name="With Label" args={{ showLabel: true }} />

package/dist/components/ThemeToggle.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default ThemeToggle;
+type ThemeToggle = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ThemeToggle: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import ThemeToggle from "./ThemeToggle.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/ThemeToggle.svelte

@@ -7,7 +7,7 @@
 
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	import { theme, resolvedTheme, cycleTheme } from '../stores/settingsStore.js';
+	import { getTheme, getResolvedTheme, cycleTheme } from '../stores/settingsStore.svelte.js';
 	import type { ThemePreference } from '../types/settings.js';
 
 	/**
@@ -30,7 +30,7 @@
 	 * - dark: moon icon
 	 * - auto: computer/system icon
 	 */
-	const themeIcon = $derived(getThemeIcon($theme));
+	const themeIcon = $derived(getThemeIcon(getTheme()));
 
 	/**
 	 * Get icon name based on theme preference
@@ -49,7 +49,7 @@
 	/**
 	 * Get accessible label for the current theme
 	 */
-	const themeLabel = $derived(getThemeLabel($theme));
+	const themeLabel = $derived(getThemeLabel(getTheme()));
 
 	/**
 	 * Get label text based on theme preference
@@ -68,7 +68,7 @@
 	/**
 	 * Get tooltip text describing current state and next action
 	 */
-	const tooltipText = $derived(getTooltipText($theme, $resolvedTheme));
+	const tooltipText = $derived(getTooltipText(getTheme(), getResolvedTheme()));
 
 	/**
 	 * Get tooltip text based on theme preference
@@ -120,7 +120,7 @@
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-md);
 		background-color: var(--fd-background);
@@ -146,7 +146,7 @@
 
 	/* Size variants */
 	.flowdrop-theme-toggle--sm {
-		padding: var(--fd-space-1) var(--fd-space-2);
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
 		font-size: var(--fd-text-xs);
 	}
 
@@ -155,7 +155,7 @@
 	}
 
 	.flowdrop-theme-toggle--md {
-		padding: var(--fd-space-2) var(--fd-space-3);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		font-size: var(--fd-text-sm);
 	}
 
@@ -164,7 +164,7 @@
 	}
 
 	.flowdrop-theme-toggle--lg {
-		padding: var(--fd-space-3) var(--fd-space-4);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		font-size: var(--fd-text-base);
 	}
 

package/dist/components/UniversalNode.svelte

@@ -130,7 +130,7 @@
 <div class="universal-node">
 	<!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
 	{#if nodeComponent}
-		<!-- svelte-ignore binding_property_non_reactive -->
+		<!-- svelte-ignore binding_property_non_reactive — Svelte 5 dynamic component limitation; reactivity maintained via $derived -->
 		{@const NodeComponent = nodeComponent}
 		<NodeComponent {data} {selected} />
 	{/if}