@flowdrop/flowdrop 1.0.0

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

@@ -0,0 +1,119 @@
+<!--
+  Status Icon Component
+  Reusable status icon that can be used anywhere in the application
+  Displays status with appropriate icon, color, and styling
+-->
+
+<script lang="ts">
+	import type { NodeExecutionStatus } from '../types/index.js';
+	import Icon from '@iconify/svelte';
+	import { getStatusColor, getStatusIcon } from '../utils/nodeStatus.js';
+
+	interface Props {
+		status: NodeExecutionStatus;
+		size?: 'sm' | 'md' | 'lg' | 'xl';
+		showBackground?: boolean;
+		class?: string;
+	}
+
+	let props: Props = $props();
+
+	// Size configurations
+	const sizeConfig = {
+		sm: {
+			iconSize: '12px',
+			backgroundSize: '20px',
+			backgroundRadius: '0.25rem'
+		},
+		md: {
+			iconSize: '16px',
+			backgroundSize: '24px',
+			backgroundRadius: '0.375rem'
+		},
+		lg: {
+			iconSize: '24px',
+			backgroundSize: '48px',
+			backgroundRadius: '0.5rem'
+		},
+		xl: {
+			iconSize: '28px',
+			backgroundSize: '56px',
+			backgroundRadius: '0.75rem'
+		}
+	};
+
+	const config = $derived(sizeConfig[props.size || 'md']);
+	const statusColor = $derived(getStatusColor(props.status));
+	const statusIcon = $derived(getStatusIcon(props.status));
+</script>
+
+{#if props.showBackground}
+	<div
+		class="status-icon status-icon--with-background {props.class || ''}"
+		style="
+			--icon-size: {config.iconSize};
+			--background-size: {config.backgroundSize};
+			--background-radius: {config.backgroundRadius};
+			--status-color: {statusColor};
+		"
+		title={props.status}
+	>
+		<Icon icon={statusIcon} class="status-icon__icon" />
+	</div>
+{:else}
+	<Icon
+		icon={statusIcon}
+		class="status-icon status-icon--icon-only {props.class || ''}"
+		style="
+			--icon-size: {config.iconSize};
+			--status-color: {statusColor};
+		"
+	/>
+{/if}
+
+<style>
+	.status-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--status-color);
+		transition: all 0.2s ease-in-out;
+	}
+
+	.status-icon--with-background {
+		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);
+		font-size: var(--icon-size);
+	}
+
+	/* Animation for running status */
+	.status-icon--with-background[title='running'] {
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.7;
+		}
+	}
+</style>

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

@@ -0,0 +1,10 @@
+import type { NodeExecutionStatus } from '../types/index.js';
+interface Props {
+    status: NodeExecutionStatus;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    showBackground?: boolean;
+    class?: string;
+}
+declare const StatusIcon: import("svelte").Component<Props, {}, "">;
+type StatusIcon = ReturnType<typeof StatusIcon>;
+export default StatusIcon;

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/StatusLabel.svelte

@@ -0,0 +1,33 @@
+<!--
+  Status Label Component
+  Dedicated component for displaying status labels with consistent styling
+-->
+
+<script lang="ts">
+	interface Props {
+		label: string;
+		class?: string;
+	}
+
+	let props: Props = $props();
+</script>
+
+<span class="status-label {props.class || ''}">
+	{props.label}
+</span>
+
+<style>
+	.status-label {
+		font-size: 16px;
+		font-weight: 600;
+		color: #000000;
+		white-space: nowrap;
+		line-height: 1.2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
+		letter-spacing: 0.025em;
+		display: flex;
+		align-items: center;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    label: string;
+    class?: string;
+}
+declare const StatusLabel: import("svelte").Component<Props, {}, "">;
+type StatusLabel = ReturnType<typeof StatusLabel>;
+export default StatusLabel;

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

@@ -0,0 +1,185 @@
+<!--
+  Theme Toggle Component
+  A button that cycles through light, dark, and auto theme modes
+  Displays appropriate icon for current theme state
+  Styled with BEM syntax
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import { getTheme, getResolvedTheme, cycleTheme } from '../stores/settingsStore.svelte.js';
+	import type { ThemePreference } from '../types/settings.js';
+
+	/**
+	 * Props interface for ThemeToggle component
+	 */
+	interface Props {
+		/** Size variant of the toggle button */
+		size?: 'sm' | 'md' | 'lg';
+		/** Whether to show the theme label text */
+		showLabel?: boolean;
+		/** Custom class name for styling */
+		class?: string;
+	}
+
+	const { size = 'md', showLabel = false, class: className = '' }: Props = $props();
+
+	/**
+	 * Get the icon for the current theme
+	 * - light: sun icon
+	 * - dark: moon icon
+	 * - auto: computer/system icon
+	 */
+	const themeIcon = $derived(getThemeIcon(getTheme()));
+
+	/**
+	 * Get icon name based on theme preference
+	 */
+	function getThemeIcon(currentTheme: ThemePreference): string {
+		switch (currentTheme) {
+			case 'light':
+				return 'mdi:white-balance-sunny';
+			case 'dark':
+				return 'mdi:moon-waning-crescent';
+			case 'auto':
+				return 'mdi:desktop-mac';
+		}
+	}
+
+	/**
+	 * Get accessible label for the current theme
+	 */
+	const themeLabel = $derived(getThemeLabel(getTheme()));
+
+	/**
+	 * Get label text based on theme preference
+	 */
+	function getThemeLabel(currentTheme: ThemePreference): string {
+		switch (currentTheme) {
+			case 'light':
+				return 'Light';
+			case 'dark':
+				return 'Dark';
+			case 'auto':
+				return 'Auto';
+		}
+	}
+
+	/**
+	 * Get tooltip text describing current state and next action
+	 */
+	const tooltipText = $derived(getTooltipText(getTheme(), getResolvedTheme()));
+
+	/**
+	 * Get tooltip text based on theme preference
+	 */
+	function getTooltipText(currentTheme: ThemePreference, resolved: 'light' | 'dark'): string {
+		if (currentTheme === 'auto') {
+			return `Theme: Auto (${resolved}). Click to switch to Light`;
+		}
+		const next = currentTheme === 'light' ? 'Dark' : 'Auto';
+		return `Theme: ${currentTheme === 'light' ? 'Light' : 'Dark'}. Click to switch to ${next}`;
+	}
+
+	/**
+	 * Handle click to cycle theme
+	 */
+	function handleClick(): void {
+		cycleTheme();
+	}
+
+	/**
+	 * Handle keyboard events for accessibility
+	 */
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			cycleTheme();
+		}
+	}
+</script>
+
+<button
+	class="flowdrop-theme-toggle flowdrop-theme-toggle--{size} {className}"
+	onclick={handleClick}
+	onkeydown={handleKeydown}
+	title={tooltipText}
+	aria-label={tooltipText}
+	type="button"
+>
+	<span class="flowdrop-theme-toggle__icon">
+		<Icon icon={themeIcon} />
+	</span>
+	{#if showLabel}
+		<span class="flowdrop-theme-toggle__label">{themeLabel}</span>
+	{/if}
+</button>
+
+<style>
+	.flowdrop-theme-toggle {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--fd-space-xs);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-md);
+		background-color: var(--fd-background);
+		color: var(--fd-foreground);
+		cursor: pointer;
+		transition: all var(--fd-transition-normal);
+		font-family: inherit;
+	}
+
+	.flowdrop-theme-toggle:hover {
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border-strong);
+	}
+
+	.flowdrop-theme-toggle:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--fd-ring);
+	}
+
+	.flowdrop-theme-toggle:active {
+		transform: scale(0.98);
+	}
+
+	/* Size variants */
+	.flowdrop-theme-toggle--sm {
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
+		font-size: var(--fd-text-xs);
+	}
+
+	.flowdrop-theme-toggle--sm .flowdrop-theme-toggle__icon {
+		font-size: var(--fd-text-sm);
+	}
+
+	.flowdrop-theme-toggle--md {
+		padding: var(--fd-space-xs) var(--fd-space-md);
+		font-size: var(--fd-text-sm);
+	}
+
+	.flowdrop-theme-toggle--md .flowdrop-theme-toggle__icon {
+		font-size: var(--fd-text-base);
+	}
+
+	.flowdrop-theme-toggle--lg {
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		font-size: var(--fd-text-base);
+	}
+
+	.flowdrop-theme-toggle--lg .flowdrop-theme-toggle__icon {
+		font-size: var(--fd-text-lg);
+	}
+
+	.flowdrop-theme-toggle__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+	}
+
+	.flowdrop-theme-toggle__label {
+		font-weight: 500;
+	}
+</style>

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

@@ -0,0 +1,14 @@
+/**
+ * Props interface for ThemeToggle component
+ */
+interface Props {
+    /** Size variant of the toggle button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show the theme label text */
+    showLabel?: boolean;
+    /** Custom class name for styling */
+    class?: string;
+}
+declare const ThemeToggle: import("svelte").Component<Props, {}, "">;
+type ThemeToggle = ReturnType<typeof ThemeToggle>;
+export default ThemeToggle;

package/dist/components/UniversalNode.svelte

@@ -0,0 +1,155 @@
+<!--
+  Universal Node Component
+  Renders any node type with automatic status overlay injection.
+  This component can replace individual node components in SvelteFlow.
+
+  Uses the node component registry to resolve which component to render,
+  enabling custom node types to be registered and used dynamically.
+-->
+
+<script lang="ts">
+	import type { WorkflowNode } from '../types/index.js';
+	import { nodeComponentRegistry } from '../registry/nodeComponentRegistry.js';
+	import { resolveBuiltinAlias } from '../registry/builtinNodes.js';
+	import NodeStatusOverlay from './NodeStatusOverlay.svelte';
+	import { shouldShowNodeStatus } from '../utils/nodeWrapper.js';
+	import { resolveComponentName } from '../utils/nodeTypes.js';
+
+	let {
+		data,
+		selected = false
+	}: {
+		data: WorkflowNode['data'] & {
+			nodeId?: string;
+			onConfigOpen?: (node: { id: string; type: string; data: WorkflowNode['data'] }) => void;
+		};
+		selected?: boolean;
+	} = $props();
+
+	/**
+	 * Determine which node component to render based on node type.
+	 * Priority: config.nodeType > metadata.type
+	 * Explicitly track config.nodeType to ensure reactivity.
+	 */
+	let configNodeType = $derived(data.config?.nodeType as string | undefined);
+
+	/**
+	 * Resolve the component name from metadata and config.
+	 * This handles the logic of choosing between config.nodeType and metadata.type.
+	 */
+	let resolvedComponentName = $derived(
+		data.metadata ? resolveComponentName(data.metadata, configNodeType) : 'workflowNode'
+	);
+
+	/**
+	 * Get the node component from the registry.
+	 */
+	let nodeComponent = $derived(getNodeComponent(resolvedComponentName));
+
+	/**
+	 * Get execution info for status overlay
+	 */
+	let executionInfo = $derived(data.executionInfo);
+
+	/**
+	 * Determine if status overlay should be shown.
+	 * Hide for note nodes as they have their own styling.
+	 */
+	let shouldShowStatus = $derived(
+		shouldShowNodeStatus(executionInfo) && resolvedComponentName !== 'note'
+	);
+
+	/**
+	 * Get the node component for the given type from the registry.
+	 *
+	 * @param nodeType - The node type identifier
+	 * @returns The Svelte component to render
+	 */
+	function getNodeComponent(nodeType: string) {
+		// Resolve any aliases (e.g., "default" -> "workflowNode")
+		const resolvedType = resolveBuiltinAlias(nodeType);
+
+		// Get component from registry (defaults to workflowNode if not found)
+		const component = nodeComponentRegistry.getComponent(resolvedType);
+		if (component) {
+			return component;
+		}
+
+		// Return the default component from registry
+		return nodeComponentRegistry.getComponent('workflowNode');
+	}
+
+	/**
+	 * Get optimal status position for this node type.
+	 * Uses registry if available, otherwise falls back to defaults.
+	 */
+	function getStatusPosition(): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' {
+		// Try registry first
+		const position = nodeComponentRegistry.getStatusPosition(resolvedComponentName);
+		if (position) {
+			return position;
+		}
+
+		// Fallback based on node type
+		switch (resolvedComponentName) {
+			case 'tool':
+				return 'top-left';
+			case 'note':
+				return 'bottom-right';
+			case 'simple':
+			case 'square':
+			default:
+				return 'top-right';
+		}
+	}
+
+	/**
+	 * Get optimal status size for this node type.
+	 * Uses registry if available, otherwise falls back to defaults.
+	 */
+	function getStatusSize(): 'sm' | 'md' | 'lg' {
+		// Try registry first
+		const size = nodeComponentRegistry.getStatusSize(resolvedComponentName);
+		if (size) {
+			return size;
+		}
+
+		// Fallback based on node type
+		switch (resolvedComponentName) {
+			case 'tool':
+			case 'note':
+			case 'square':
+				return 'sm';
+			case 'simple':
+			default:
+				return 'md';
+		}
+	}
+</script>
+
+<div class="universal-node">
+	<!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
+	{#if nodeComponent}
+		<!-- svelte-ignore binding_property_non_reactive — Svelte 5 dynamic component limitation; reactivity maintained via $derived -->
+		{@const NodeComponent = nodeComponent}
+		<NodeComponent {data} {selected} />
+	{/if}
+
+	<!-- Status overlay - only show if there's meaningful status information -->
+	{#if shouldShowStatus}
+		<NodeStatusOverlay
+			nodeId={data.nodeId ?? 'unknown'}
+			{executionInfo}
+			position={getStatusPosition()}
+			size={getStatusSize()}
+			showDetails={true}
+		/>
+	{/if}
+</div>
+
+<style>
+	.universal-node {
+		position: relative;
+		display: inline-block;
+	}
+</style>

package/dist/components/UniversalNode.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { WorkflowNode } from '../types/index.js';
+type $$ComponentProps = {
+    data: WorkflowNode['data'] & {
+        nodeId?: string;
+        onConfigOpen?: (node: {
+            id: string;
+            type: string;
+            data: WorkflowNode['data'];
+        }) => void;
+    };
+    selected?: boolean;
+};
+declare const UniversalNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type UniversalNode = ReturnType<typeof UniversalNode>;
+export default UniversalNode;