@d34dman/flowdrop 0.0.29 → 0.0.30

package/dist/components/NodeSidebar.svelte

@@ -25,25 +25,34 @@
 	let categories = $derived(getCategories());
 
 	/**
-	 * Get all unique categories from node types
+	 * Get all unique categories from node types, preserving API order
+	 * Categories appear in the order their first node appears in the API response
 	 */
 	function getCategories(): NodeCategory[] {
 		const nodes = props.nodes || [];
 		if (nodes.length === 0) return [];
-		const categories = new SvelteSet<NodeCategory>();
-		nodes.forEach((node) => categories.add(node.category));
-		return Array.from(categories).sort();
+		// Use a Set to track uniqueness while preserving insertion order
+		const seen = new SvelteSet<NodeCategory>();
+		const orderedCategories: NodeCategory[] = [];
+		for (const node of nodes) {
+			if (!seen.has(node.category)) {
+				seen.add(node.category);
+				orderedCategories.push(node.category);
+			}
+		}
+		return orderedCategories;
 	}
 
 	/**
 	 * Filter node types based on search query and selected category
+	 * Preserves the API order - no client-side sorting applied
 	 */
 	function getFilteredNodes(): NodeMetadata[] {
 		// Use actual node types from props
 		let filtered = props.nodes || [];
 
 		// Filter by category
-		if (selectedCategory !== 'all') {
+		if (selectedCategory !== "all") {
 			filtered = filtered.filter((node) => node.category === selectedCategory);
 		}
 
@@ -58,8 +67,8 @@
 			);
 		}
 
-		// Create a new array and sort it to avoid mutating the original
-		return [...filtered].sort((a, b) => a.name.localeCompare(b.name));
+		// Return filtered results preserving API order
+		return filtered;
 	}
 
 	/**
@@ -149,12 +158,11 @@
 
 	/**
 	 * Get node types for category
+	 * Preserves the API order - no client-side sorting applied
 	 */
 	function getNodesForCategory(category: NodeCategory): NodeMetadata[] {
 		const nodes = props.nodes || [];
-		return [...nodes]
-			.filter((node) => node.category === category)
-			.sort((a, b) => a.name.localeCompare(b.name));
+		return nodes.filter((node) => node.category === category);
 	}
 
 	/**

package/dist/components/WorkflowEditor.svelte

@@ -37,6 +37,7 @@
 	} from '../helpers/workflowEditorHelper.js';
 	import type { NodeExecutionInfo } from '../types/index.js';
 	import { areNodeArraysEqual, areEdgeArraysEqual, throttle } from '../utils/performanceUtils.js';
+	import { Toaster } from 'svelte-5-french-toast';
 
 	interface Props {
 		nodes?: NodeMetadata[];
@@ -457,6 +458,9 @@
 	</div>
 </SvelteFlowProvider>
 
+<!-- Toast notifications container -->
+<Toaster position="bottom-center" />
+
 <style>
 	.flowdrop-workflow-editor {
 		display: flex;

package/dist/components/nodes/ToolNode.svelte

@@ -7,7 +7,7 @@
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
 	import Icon from '@iconify/svelte';
-	import { getDataTypeColor } from '../../utils/colors';
+	import { getDataTypeColor, getColorVariants } from '../../utils/colors';
 	import type { NodeMetadata } from '../../types/index.js';
 
 	interface ToolNodeParameter {
@@ -64,6 +64,19 @@
 			'1.0.0'
 	);
 
+	// Generate color variants for theming (light tint for background, border tint for borders)
+	let colorVariants = $derived(getColorVariants(toolColor));
+
+	// Build inline style string for CSS custom properties
+	// This allows per-node color overrides while defaulting to global CSS variables
+	let nodeStyle = $derived(
+		[
+			`--flowdrop-tool-node-color: ${colorVariants.base}`,
+			`--flowdrop-tool-node-color-light: ${colorVariants.light}`,
+			`--flowdrop-tool-node-color-border: ${colorVariants.border}`
+		].join('; ')
+	);
+
 	// Check for tool interface ports in metadata
 	let hasToolInputPort = $derived(
 		props.data.metadata?.inputs?.some((port) => port.dataType === 'tool') || false
@@ -128,6 +141,7 @@
 	class:flowdrop-tool-node--selected={props.selected}
 	class:flowdrop-tool-node--processing={props.isProcessing}
 	class:flowdrop-tool-node--error={props.isError}
+	style={nodeStyle}
 	onclick={handleClick}
 	ondblclick={handleDoubleClick}
 	onkeydown={handleKeydown}
@@ -138,7 +152,7 @@
 	<div class="flowdrop-tool-node__header">
 		<div class="flowdrop-tool-node__header-content">
 			<!-- Tool Icon -->
-			<div class="flowdrop-tool-node__icon-container" style="background-color: {toolColor}">
+			<div class="flowdrop-tool-node__icon-container">
 				<Icon icon={toolIcon} class="flowdrop-tool-node__icon" />
 			</div>
 
@@ -214,7 +228,7 @@
 
 	.flowdrop-tool-node--selected {
 		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-		border: 2px solid #f59e0b;
+		border: 2px solid var(--flowdrop-tool-node-color);
 	}
 
 	.flowdrop-tool-node--processing {
@@ -228,9 +242,9 @@
 
 	.flowdrop-tool-node__header {
 		padding: 1rem;
-		background-color: #fffbeb;
+		background-color: var(--flowdrop-tool-node-color-light);
 		border-radius: 0.75rem;
-		border: 1px solid #fcd34d;
+		border: 1px solid var(--flowdrop-tool-node-color-border);
 	}
 
 	.flowdrop-tool-node__header-content {
@@ -248,6 +262,7 @@
 		height: 2.5rem;
 		border-radius: 0.5rem;
 		flex-shrink: 0;
+		background-color: var(--flowdrop-tool-node-color);
 	}
 
 	.flowdrop-tool-node__info {
@@ -271,7 +286,7 @@
 	}
 
 	.flowdrop-tool-node__badge {
-		background-color: #f59e0b;
+		background-color: var(--flowdrop-tool-node-color);
 		color: white;
 		font-size: 0.625rem;
 		font-weight: 700;
@@ -375,11 +390,11 @@
 
 	/* Metadata port hover effects */
 	:global(.svelte-flow__node-tool .svelte-flow__handle:hover) {
-		box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.3) !important;
+		box-shadow: 0 0 0 2px color-mix(in srgb, var(--flowdrop-tool-node-color) 30%, transparent) !important;
 	}
 
 	:global(.svelte-flow__node-tool .svelte-flow__handle:focus) {
-		outline: 2px solid #f59e0b !important;
+		outline: 2px solid var(--flowdrop-tool-node-color) !important;
 		outline-offset: 2px !important;
 	}
 </style>

package/dist/styles/base.css

@@ -1157,6 +1157,11 @@
 	--flowdrop-edge-data-color-hover: var(--color-ref-gray-500);
 	--flowdrop-edge-data-color-selected: var(--color-ref-violet-600);
 
+	/* Tool node theming tokens */
+	--flowdrop-tool-node-color: var(--color-ref-amber-500);
+	--flowdrop-tool-node-color-light: var(--color-ref-amber-50);
+	--flowdrop-tool-node-color-border: var(--color-ref-amber-300);
+
 	/* Semantic text color tokens */
 	--flowdrop-text-color-error: var(--color-ref-red-600);
 	--flowdrop-text-color-success: var(--color-ref-green-600);

package/dist/utils/colors.d.ts

@@ -148,3 +148,45 @@ export declare function isArrayDataType(dataType: string): boolean;
  * @returns The element type (e.g., "string") or null if not an array
  */
 export declare function getArrayElementType(arrayDataType: string): string | null;
+/**
+ * Parse a hex color string to RGB components
+ * @param hex - Hex color string (e.g., "#f59e0b" or "f59e0b")
+ * @returns Object with r, g, b values (0-255) or null if invalid
+ */
+export declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert RGB components to hex color string
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Hex color string with # prefix
+ */
+export declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Generate a light tint of a color (similar to Tailwind's -50 shade)
+ * Creates a very light background-friendly version of the color
+ * @param hex - Base hex color string
+ * @returns Light tint hex color string
+ */
+export declare function getLightTint(hex: string): string;
+/**
+ * Generate a border tint of a color (similar to Tailwind's -300 shade)
+ * Creates a medium-light version suitable for borders
+ * @param hex - Base hex color string
+ * @returns Border tint hex color string
+ */
+export declare function getBorderTint(hex: string): string;
+/**
+ * Generate color variants for theming a component
+ * @param baseColor - Base hex color string
+ * @returns Object with base, light, and border color variants
+ */
+export declare function getColorVariants(baseColor: string): {
+    base: string;
+    light: string;
+    border: string;
+};

package/dist/utils/colors.js

@@ -302,3 +302,80 @@ export function getArrayElementType(arrayDataType) {
     }
     return null;
 }
+/**
+ * Parse a hex color string to RGB components
+ * @param hex - Hex color string (e.g., "#f59e0b" or "f59e0b")
+ * @returns Object with r, g, b values (0-255) or null if invalid
+ */
+export function hexToRgb(hex) {
+    const cleanHex = hex.replace(/^#/, "");
+    if (!/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        return null;
+    }
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return { r, g, b };
+}
+/**
+ * Convert RGB components to hex color string
+ * @param r - Red component (0-255)
+ * @param g - Green component (0-255)
+ * @param b - Blue component (0-255)
+ * @returns Hex color string with # prefix
+ */
+export function rgbToHex(r, g, b) {
+    const toHex = (value) => {
+        const clamped = Math.max(0, Math.min(255, Math.round(value)));
+        return clamped.toString(16).padStart(2, "0");
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/**
+ * Generate a light tint of a color (similar to Tailwind's -50 shade)
+ * Creates a very light background-friendly version of the color
+ * @param hex - Base hex color string
+ * @returns Light tint hex color string
+ */
+export function getLightTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return "#fffbeb"; // Fallback to amber-50
+    }
+    // Mix with white at 95% to create a very light tint
+    const mixRatio = 0.95;
+    const r = rgb.r + (255 - rgb.r) * mixRatio;
+    const g = rgb.g + (255 - rgb.g) * mixRatio;
+    const b = rgb.b + (255 - rgb.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
+/**
+ * Generate a border tint of a color (similar to Tailwind's -300 shade)
+ * Creates a medium-light version suitable for borders
+ * @param hex - Base hex color string
+ * @returns Border tint hex color string
+ */
+export function getBorderTint(hex) {
+    const rgb = hexToRgb(hex);
+    if (!rgb) {
+        return "#fcd34d"; // Fallback to amber-300
+    }
+    // Mix with white at 60% to create a medium-light tint
+    const mixRatio = 0.6;
+    const r = rgb.r + (255 - rgb.r) * mixRatio;
+    const g = rgb.g + (255 - rgb.g) * mixRatio;
+    const b = rgb.b + (255 - rgb.b) * mixRatio;
+    return rgbToHex(r, g, b);
+}
+/**
+ * Generate color variants for theming a component
+ * @param baseColor - Base hex color string
+ * @returns Object with base, light, and border color variants
+ */
+export function getColorVariants(baseColor) {
+    return {
+        base: baseColor,
+        light: getLightTint(baseColor),
+        border: getBorderTint(baseColor)
+    };
+}

package/package.json

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