@flowdrop/flowdrop 1.0.0

package/dist/components/nodes/SquareNode.svelte

@@ -0,0 +1,407 @@
+<!--
+  Square Node Component
+  A simple square node with optional input and output ports
+  Styled with BEM syntax
+  
+  UI Extensions Support:
+  - hideUnconnectedHandles: Hides trigger ports that are not connected to reduce visual clutter
+-->
+
+<script lang="ts">
+	import { Position, Handle } from '@xyflow/svelte';
+	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 { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+
+	const props = $props<{
+		data: {
+			label: string;
+			config: ConfigValues;
+			metadata: NodeMetadata;
+			nodeId?: string;
+			extensions?: NodeExtensions;
+			onConfigOpen?: (node: {
+				id: string;
+				type: string;
+				data: { label: string; config: ConfigValues; metadata: NodeMetadata };
+			}) => void;
+		};
+		selected?: boolean;
+		isProcessing?: boolean;
+		isError?: boolean;
+	}>();
+
+	/**
+	 * 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;
+	});
+
+	/**
+	 * Get icon using the same resolution as WorkflowNode
+	 * Uses getNodeIcon utility with category fallback
+	 */
+	let squareIcon = $derived(getNodeIcon(props.data.metadata?.icon, props.data.metadata?.category));
+
+	/**
+	 * Get icon color using category-based color tokens for consistency
+	 * Falls back to primary color if category not available
+	 */
+	let squareColor = $derived(getCategoryColorToken(props.data.metadata?.category));
+
+	// Handle configuration sidebar - now using global ConfigSidebar
+	function openConfigSidebar(): void {
+		if (props.data.onConfigOpen) {
+			// Create a WorkflowNodeType-like object for the global ConfigSidebar
+			const nodeForConfig = {
+				id: props.data.nodeId || 'unknown',
+				type: 'square',
+				data: props.data
+			};
+			props.data.onConfigOpen(nodeForConfig);
+		}
+	}
+
+	// Handle double-click to open config
+	function handleDoubleClick(): void {
+		openConfigSidebar();
+	}
+
+	// Handle single click to open config
+	function handleClick(): void {
+		openConfigSidebar();
+	}
+
+	// Handle keyboard events
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			openConfigSidebar();
+		}
+	}
+	/**
+	 * Check if a port is connected
+	 * @param portId - The port ID to check
+	 * @param type - Whether this is an 'input' or 'output' port
+	 * @returns true if the port is connected
+	 */
+	function isPortConnected(portId: string, type: 'input' | 'output'): boolean {
+		const handleId = `${props.data.nodeId}-${type}-${portId}`;
+		return getConnectedHandles().has(handleId);
+	}
+
+	/**
+	 * Check if a trigger port should be visible
+	 * Always shows if hideUnconnectedHandles is disabled or if port is connected
+	 */
+	function shouldShowTriggerPort(portId: string, type: 'input' | 'output'): boolean {
+		if (!hideUnconnectedHandles()) {
+			return true;
+		}
+		return isPortConnected(portId, type);
+	}
+
+	// Get first input/output ports for square node representation
+	// Special handling for trigger ports - they should always be shown if present
+	let triggerInputPort = $derived(
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType === 'trigger')
+	);
+	let triggerOutputPort = $derived(
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType === 'trigger')
+	);
+
+	// Get first non-trigger ports for data connections
+	let firstConnectedDataInputPort = $derived(
+		props.data.metadata?.inputs?.find(
+			(port: NodePort) => port.dataType !== 'trigger' && isPortConnected(port.id, 'input')
+		)
+	);
+
+	let firstDataInputPort = $derived(
+		props.data.metadata?.inputs?.find((port: NodePort) => port.dataType !== 'trigger')
+	);
+
+	let firstConnectedDataOutputPort = $derived(
+		props.data.metadata?.outputs?.find(
+			(port: NodePort) => port.dataType !== 'trigger' && isPortConnected(port.id, 'output')
+		)
+	);
+	let firstDataOutputPort = $derived(
+		props.data.metadata?.outputs?.find((port: NodePort) => port.dataType !== 'trigger')
+	);
+
+	let inputPorts = $derived.by(() => {
+		return [
+			...(firstConnectedDataInputPort
+				? [firstConnectedDataInputPort]
+				: firstDataInputPort
+					? [firstDataInputPort]
+					: []),
+			...(triggerInputPort && shouldShowTriggerPort(triggerInputPort.id, 'input')
+				? [triggerInputPort]
+				: [])
+		];
+	});
+	let outputPorts = $derived.by(() => {
+		return [
+			...(firstConnectedDataOutputPort
+				? [firstConnectedDataOutputPort]
+				: firstDataOutputPort
+					? [firstDataOutputPort]
+					: []),
+			...(triggerOutputPort && shouldShowTriggerPort(triggerOutputPort.id, 'output')
+				? [triggerOutputPort]
+				: [])
+		];
+	});
+</script>
+
+<!-- Input Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
+{#each inputPorts as port, index}
+	<Handle
+		type="target"
+		position={Position.Left}
+		style="--fd-handle-fill: {getDataTypeColor(
+			port.dataType
+		)}; --fd-handle-border-color: var(--fd-handle-border); top: {inputPorts.length > 1
+			? index === 0
+				? 20
+				: 60
+			: 40}px; transform: translateY(-50%); z-index: 30;"
+		id={`${props.data.nodeId}-input-${port.id}`}
+	/>
+{/each}
+
+<!-- Square Node -->
+<div
+	class="flowdrop-square-node flowdrop-square-node--compact"
+	class:flowdrop-square-node--selected={props.selected}
+	class:flowdrop-square-node--processing={props.isProcessing}
+	class:flowdrop-square-node--error={props.isError}
+	onclick={handleClick}
+	ondblclick={handleDoubleClick}
+	onkeydown={handleKeydown}
+	role="button"
+	tabindex="0"
+>
+	<!-- Square Layout: Always compact with centered icon in squircle wrapper -->
+	<div class="flowdrop-square-node__compact-content">
+		<div class="flowdrop-square-node__icon-wrapper" style="--_icon-color: {squareColor}">
+			<Icon icon={squareIcon} class="flowdrop-square-node__icon" />
+		</div>
+	</div>
+
+	<!-- Processing indicator -->
+	{#if props.isProcessing}
+		<div class="flowdrop-square-node__processing">
+			<div class="flowdrop-square-node__spinner"></div>
+		</div>
+	{/if}
+
+	<!-- Error indicator -->
+	{#if props.isError}
+		<div class="flowdrop-square-node__error">
+			<Icon icon="mdi:alert-circle" class="flowdrop-square-node__error-icon" />
+		</div>
+	{/if}
+
+	<!-- Config button -->
+	<button
+		class="flowdrop-square-node__config-btn"
+		onclick={openConfigSidebar}
+		title="Configure node"
+	>
+		<Icon icon="mdi:cog" />
+	</button>
+</div>
+
+<!-- Output Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
+{#each outputPorts as port, index}
+	<Handle
+		type="source"
+		position={Position.Right}
+		style="--fd-handle-fill: {getDataTypeColor(
+			port.dataType
+		)}; --fd-handle-border-color: var(--fd-handle-border); top: {outputPorts.length > 1
+			? index === 0
+				? 20
+				: 60
+			: 40}px; transform: translateY(-50%); z-index: 30;"
+		id={`${props.data.nodeId}-output-${port.id}`}
+	/>
+{/each}
+
+<style>
+	.flowdrop-square-node {
+		position: relative;
+		background-color: var(--fd-card);
+		border: 1.5px solid var(--fd-node-border);
+		border-radius: var(--fd-radius-xl);
+		display: flex;
+		flex-direction: column;
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+		box-shadow: var(--fd-shadow-md);
+		overflow: visible; /* Changed from hidden to visible to allow handles to be properly accessible */
+		z-index: 10;
+		color: var(--fd-foreground);
+	}
+
+	/* Square layout (always compact) */
+	.flowdrop-square-node--compact {
+		width: var(--fd-node-square-size);
+		height: var(--fd-node-square-size);
+		justify-content: center;
+		align-items: center;
+	}
+
+	.flowdrop-square-node:hover {
+		box-shadow: var(--fd-shadow-lg);
+		border-color: var(--fd-node-border-hover);
+	}
+
+	.flowdrop-square-node--selected {
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-square-node--selected:hover {
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-square-node:focus-visible {
+		outline: 2px solid var(--fd-ring);
+		outline-offset: 2px;
+	}
+
+	.flowdrop-square-node--processing {
+		opacity: 0.7;
+	}
+
+	.flowdrop-square-node--error {
+		border-color: var(--fd-error) !important;
+		background-color: var(--fd-error-muted) !important;
+	}
+
+	/* Compact layout styles */
+	.flowdrop-square-node__compact-content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	/* Squircle icon wrapper - matching WorkflowNode style */
+	.flowdrop-square-node__icon-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 0.625rem;
+		background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
+		flex-shrink: 0;
+		transition: all var(--fd-transition-normal);
+	}
+
+	.flowdrop-square-node:hover .flowdrop-square-node__icon-wrapper {
+		background: color-mix(
+			in srgb,
+			var(--_icon-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
+		transform: scale(1.05);
+	}
+
+	.flowdrop-square-node__icon-wrapper :global(.flowdrop-square-node__icon) {
+		width: 1.75rem;
+		height: 1.75rem;
+		color: var(--fd-node-icon);
+	}
+
+	.flowdrop-square-node__processing {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+	}
+
+	.flowdrop-square-node__spinner {
+		width: 12px;
+		height: 12px;
+		border: 1px solid color-mix(in srgb, var(--fd-foreground) 30%, transparent);
+		border-top: 1px solid var(--fd-foreground);
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	.flowdrop-square-node__error {
+		position: absolute;
+		top: 4px;
+		right: 4px;
+		color: var(--fd-error);
+	}
+
+	:global(.flowdrop-square-node__error-icon) {
+		width: 12px;
+		height: 12px;
+	}
+
+	.flowdrop-square-node__config-btn {
+		position: absolute;
+		top: var(--fd-space-xs);
+		right: var(--fd-space-xs);
+		width: 1.5rem;
+		height: 1.5rem;
+		background-color: var(--fd-backdrop);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-sm);
+		color: var(--fd-muted-foreground);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: all var(--fd-transition-normal);
+		backdrop-filter: var(--fd-backdrop-blur);
+		z-index: 15;
+		font-size: var(--fd-text-sm);
+	}
+
+	.flowdrop-square-node:hover .flowdrop-square-node__config-btn {
+		opacity: 1;
+	}
+
+	.flowdrop-square-node__config-btn:hover {
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border-strong);
+		color: var(--fd-foreground);
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Handle: 20px/12px from base.css; position offsets for 20px handle */
+	:global(.svelte-flow__node-square .svelte-flow__handle) {
+		z-index: 20 !important;
+		pointer-events: auto !important;
+	}
+
+	:global(.svelte-flow__node-square .svelte-flow__handle:hover) {
+		transform: translateY(-50%) scale(1.2) !important;
+	}
+</style>

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

@@ -0,0 +1,25 @@
+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;
+            data: {
+                label: string;
+                config: ConfigValues;
+                metadata: NodeMetadata;
+            };
+        }) => void;
+    };
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+};
+declare const SquareNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type SquareNode = ReturnType<typeof SquareNode>;
+export default SquareNode;

package/dist/components/nodes/TerminalNode.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import NodeDecorator from '../../stories/NodeDecorator.svelte';
+	import { createTerminalNodeData } from '../../stories/utils.js';
+
+	const { Story } = defineMeta({
+		title: 'Nodes/TerminalNode',
+		tags: ['autodocs'],
+		parameters: {
+			layout: 'centered'
+		}
+	});
+</script>
+
+<Story name="Start">
+	<NodeDecorator data={createTerminalNodeData('start')} />
+</Story>
+
+<Story name="End">
+	<NodeDecorator data={createTerminalNodeData('end')} />
+</Story>
+
+<Story name="Exit">
+	<NodeDecorator data={createTerminalNodeData('exit')} />
+</Story>

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

@@ -0,0 +1,26 @@
+export default TerminalNode;
+type TerminalNode = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TerminalNode: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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;
+}