@d34dman/flowdrop 0.0.51 → 0.0.52

package/dist/api/client.d.ts

@@ -1,7 +1,7 @@
 /**
  * API Client for FlowDrop Workflow Library
  */
-import type { NodeMetadata, Workflow, ExecutionResult, PortConfig } from '../types/index.js';
+import type { NodeMetadata, Workflow, ExecutionResult, PortConfig, CategoryDefinition } from '../types/index.js';
 /**
  * HTTP API client for FlowDrop
  */
@@ -80,6 +80,10 @@ export declare class FlowDropApiClient {
      * Fetch port configuration
      */
     getPortConfig(): Promise<PortConfig>;
+    /**
+     * Fetch category definitions
+     */
+    getCategories(): Promise<CategoryDefinition[]>;
     /**
      * Fetch pipeline data including job information and status
      */

package/dist/api/client.js

@@ -215,6 +215,16 @@ export class FlowDropApiClient {
         }
         return response.data;
     }
+    /**
+     * Fetch category definitions
+     */
+    async getCategories() {
+        const response = await this.request('/categories');
+        if (!response.success || !response.data) {
+            throw new Error(response.error || 'Failed to fetch categories');
+        }
+        return response.data;
+    }
     /**
      * Fetch pipeline data including job information and status
      */

package/dist/components/NodeSidebar.svelte

@@ -10,6 +10,7 @@
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
 	import { getCategoryColorToken } from '../utils/colors.js';
+	import { getCategoryLabel } from '../stores/categoriesStore.js';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { uiSettings, updateSettings } from '../stores/settingsStore.js';
 
@@ -142,29 +143,11 @@
 	}
 
 	/**
-	 * Get category display name
+	 * Get category display name from the categories store.
+	 * Falls back to auto-capitalizing the category machine name.
 	 */
 	function getCategoryDisplayName(category: NodeCategory): string {
-		const names: Record<NodeCategory, string> = {
-			triggers: 'Triggers',
-			inputs: 'Inputs',
-			outputs: 'Outputs',
-			prompts: 'Prompts',
-			models: 'Models',
-			processing: 'Processing',
-			logic: 'Logic',
-			data: 'Data',
-			tools: 'Tools',
-			helpers: 'Helpers',
-			'vector stores': 'Vector Stores',
-			embeddings: 'Embeddings',
-			memories: 'Memories',
-			agents: 'Agents',
-			ai: 'AI',
-			interrupts: 'Interrupts',
-			bundles: 'Bundles'
-		};
-		return names[category] || category;
+		return getCategoryLabel(category);
 	}
 
 	/**

package/dist/config/defaultCategories.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Default category definitions for FlowDrop
+ * Provides built-in categories with icons, colors, and display labels.
+ * These serve as fallbacks when the /categories API endpoint is unavailable.
+ */
+import type { CategoryDefinition } from '../types/index.js';
+export declare const DEFAULT_CATEGORIES: CategoryDefinition[];

package/dist/config/defaultCategories.js

@@ -0,0 +1,126 @@
+/**
+ * Default category definitions for FlowDrop
+ * Provides built-in categories with icons, colors, and display labels.
+ * These serve as fallbacks when the /categories API endpoint is unavailable.
+ */
+export const DEFAULT_CATEGORIES = [
+    {
+        name: 'triggers',
+        label: 'Triggers',
+        icon: 'mdi:lightning-bolt',
+        color: 'var(--fd-node-cyan)',
+        weight: 0
+    },
+    {
+        name: 'inputs',
+        label: 'Inputs',
+        icon: 'mdi:arrow-down-circle',
+        color: 'var(--fd-node-emerald)',
+        weight: 1
+    },
+    {
+        name: 'outputs',
+        label: 'Outputs',
+        icon: 'mdi:arrow-up-circle',
+        color: 'var(--fd-node-blue)',
+        weight: 2
+    },
+    {
+        name: 'prompts',
+        label: 'Prompts',
+        icon: 'mdi:message-text',
+        color: 'var(--fd-node-amber)',
+        weight: 3
+    },
+    {
+        name: 'models',
+        label: 'Models',
+        icon: 'mdi:robot',
+        color: 'var(--fd-node-indigo)',
+        weight: 4
+    },
+    {
+        name: 'processing',
+        label: 'Processing',
+        icon: 'mdi:cog',
+        color: 'var(--fd-node-teal)',
+        weight: 5
+    },
+    {
+        name: 'logic',
+        label: 'Logic',
+        icon: 'mdi:source-branch',
+        color: 'var(--fd-node-purple)',
+        weight: 6
+    },
+    {
+        name: 'data',
+        label: 'Data',
+        icon: 'mdi:database',
+        color: 'var(--fd-node-orange)',
+        weight: 7
+    },
+    {
+        name: 'tools',
+        label: 'Tools',
+        icon: 'mdi:wrench',
+        color: 'var(--fd-node-amber)',
+        weight: 8
+    },
+    {
+        name: 'helpers',
+        label: 'Helpers',
+        icon: 'mdi:help-circle',
+        color: 'var(--fd-node-slate)',
+        weight: 9
+    },
+    {
+        name: 'vector stores',
+        label: 'Vector Stores',
+        icon: 'mdi:vector-square',
+        color: 'var(--fd-node-emerald)',
+        weight: 10
+    },
+    {
+        name: 'embeddings',
+        label: 'Embeddings',
+        icon: 'mdi:vector-polygon',
+        color: 'var(--fd-node-indigo)',
+        weight: 11
+    },
+    {
+        name: 'memories',
+        label: 'Memories',
+        icon: 'mdi:brain',
+        color: 'var(--fd-node-blue)',
+        weight: 12
+    },
+    {
+        name: 'agents',
+        label: 'Agents',
+        icon: 'mdi:account-cog',
+        color: 'var(--fd-node-teal)',
+        weight: 13
+    },
+    {
+        name: 'ai',
+        label: 'AI',
+        icon: 'mdi:shimmer',
+        color: 'var(--fd-node-purple)',
+        weight: 14
+    },
+    {
+        name: 'interrupts',
+        label: 'Interrupts',
+        icon: 'mdi:hand-back-left',
+        color: 'var(--fd-node-red)',
+        weight: 15
+    },
+    {
+        name: 'bundles',
+        label: 'Bundles',
+        icon: 'mdi:package-variant',
+        color: 'var(--fd-node-slate)',
+        weight: 16
+    }
+];

package/dist/config/endpoints.d.ts

@@ -14,6 +14,7 @@ export interface EndpointConfig {
             metadata: string;
         };
         portConfig: string;
+        categories: string;
         workflows: {
             list: string;
             get: string;

package/dist/config/endpoints.js

@@ -15,6 +15,7 @@ export const defaultEndpointConfig = {
             metadata: '/nodes/{id}/metadata'
         },
         portConfig: '/port-config',
+        categories: '/categories',
         workflows: {
             list: '/workflows',
             get: '/workflows/{id}',

package/dist/core/index.d.ts

@@ -14,7 +14,7 @@
  * import { getStatusColor, createDefaultExecutionInfo } from "@d34dman/flowdrop/core";
  * ```
  */
-export type { NodeCategory, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, PortConfig, PortCompatibilityRule, ConfigSchema, ConfigProperty, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions, EdgeCategory } from '../types/index.js';
+export type { NodeCategory, BuiltinNodeCategory, CategoryDefinition, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, PortConfig, PortCompatibilityRule, ConfigSchema, ConfigProperty, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions, EdgeCategory } from '../types/index.js';
 export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from '../types/config.js';
 export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from '../types/auth.js';
 export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';

package/dist/editor/index.d.ts

@@ -74,6 +74,7 @@ export { currentSession, sessions, messages, isExecuting, isLoading, error as pl
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from '../services/globalSave.js';
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
+export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
 export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
 export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
 export { FlowDropApiClient } from '../api/client.js';

package/dist/editor/index.js

@@ -115,6 +115,7 @@ export { currentSession, sessions, messages, isExecuting, isLoading, error as pl
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from '../services/globalSave.js';
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
+export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
 export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
 export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
 // ============================================================================

package/dist/services/categoriesApi.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Categories API Service
+ * Handles fetching category definitions from the backend
+ */
+import type { CategoryDefinition } from '../types/index.js';
+import type { EndpointConfig } from '../config/endpoints.js';
+/**
+ * Fetch category definitions from API
+ */
+export declare function fetchCategories(endpointConfig: EndpointConfig): Promise<CategoryDefinition[]>;
+/**
+ * Validate category definitions structure
+ */
+export declare function validateCategories(categories: CategoryDefinition[]): boolean;

package/dist/services/categoriesApi.js

@@ -0,0 +1,41 @@
+/**
+ * Categories API Service
+ * Handles fetching category definitions from the backend
+ */
+import { DEFAULT_CATEGORIES } from '../config/defaultCategories.js';
+import { FlowDropApiClient } from '../api/client.js';
+/**
+ * Fetch category definitions from API
+ */
+export async function fetchCategories(endpointConfig) {
+    try {
+        const client = new FlowDropApiClient(endpointConfig.baseUrl);
+        const categories = await client.getCategories();
+        if (!categories || !Array.isArray(categories)) {
+            console.warn('Invalid categories received from API, using default');
+            return DEFAULT_CATEGORIES;
+        }
+        return categories;
+    }
+    catch (error) {
+        console.error('Error fetching categories:', error);
+        return DEFAULT_CATEGORIES;
+    }
+}
+/**
+ * Validate category definitions structure
+ */
+export function validateCategories(categories) {
+    if (!categories || !Array.isArray(categories)) {
+        return false;
+    }
+    for (const category of categories) {
+        if (!category.name || typeof category.name !== 'string') {
+            return false;
+        }
+        if (!category.label || typeof category.label !== 'string') {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/stores/categoriesStore.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Categories Store for FlowDrop
+ *
+ * Manages category definitions with merged defaults and API-provided overrides.
+ * Exposes lookup helpers for icon, color, and label resolution.
+ */
+import type { CategoryDefinition, NodeCategory } from '../types/index.js';
+/**
+ * Readable store of all category definitions, sorted by weight.
+ */
+export declare const categories: import("svelte/store").Readable<CategoryDefinition[]>;
+/**
+ * Initialize categories with API data, merging with defaults.
+ * API categories override defaults by name; custom categories are appended.
+ */
+export declare function initializeCategories(apiCategories: CategoryDefinition[]): void;
+/**
+ * Get the display label for a category.
+ */
+export declare function getCategoryLabel(category: NodeCategory): string;
+/**
+ * Get the icon for a category.
+ */
+export declare function getCategoryIcon(category: NodeCategory): string;
+/**
+ * Get the color token for a category.
+ */
+export declare function getCategoryColor(category: NodeCategory): string;
+/**
+ * Get the full category definition, or undefined if not found.
+ */
+export declare function getCategoryDefinition(category: NodeCategory): CategoryDefinition | undefined;

package/dist/stores/categoriesStore.js

@@ -0,0 +1,80 @@
+/**
+ * Categories Store for FlowDrop
+ *
+ * Manages category definitions with merged defaults and API-provided overrides.
+ * Exposes lookup helpers for icon, color, and label resolution.
+ */
+import { writable, derived, get } from 'svelte/store';
+import { DEFAULT_CATEGORIES } from '../config/defaultCategories.js';
+/**
+ * Internal writable store holding the category definitions.
+ * Initialized with defaults, updated when API data is fetched.
+ */
+const categoriesInternal = writable(DEFAULT_CATEGORIES);
+/**
+ * Derived lookup map: category name → CategoryDefinition
+ */
+const categoryMap = derived(categoriesInternal, ($categories) => {
+    const map = new Map();
+    for (const cat of $categories) {
+        map.set(cat.name, cat);
+    }
+    return map;
+});
+/**
+ * Readable store of all category definitions, sorted by weight.
+ */
+export const categories = derived(categoriesInternal, ($categories) => [...$categories].sort((a, b) => (a.weight ?? 999) - (b.weight ?? 999)));
+/**
+ * Initialize categories with API data, merging with defaults.
+ * API categories override defaults by name; custom categories are appended.
+ */
+export function initializeCategories(apiCategories) {
+    const defaultMap = new Map();
+    for (const cat of DEFAULT_CATEGORIES) {
+        defaultMap.set(cat.name, cat);
+    }
+    // API categories override defaults by name
+    for (const cat of apiCategories) {
+        defaultMap.set(cat.name, {
+            ...defaultMap.get(cat.name),
+            ...cat
+        });
+    }
+    categoriesInternal.set(Array.from(defaultMap.values()));
+}
+/**
+ * Get the display label for a category.
+ */
+export function getCategoryLabel(category) {
+    const map = get(categoryMap);
+    const def = map.get(category);
+    if (def?.label)
+        return def.label;
+    // Auto-generate: capitalize each word
+    return category
+        .split(/[\s_-]+/)
+        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(' ');
+}
+/**
+ * Get the icon for a category.
+ */
+export function getCategoryIcon(category) {
+    const map = get(categoryMap);
+    return map.get(category)?.icon ?? 'mdi:folder';
+}
+/**
+ * Get the color token for a category.
+ */
+export function getCategoryColor(category) {
+    const map = get(categoryMap);
+    return map.get(category)?.color ?? 'var(--fd-node-slate)';
+}
+/**
+ * Get the full category definition, or undefined if not found.
+ */
+export function getCategoryDefinition(category) {
+    const map = get(categoryMap);
+    return map.get(category);
+}

package/dist/svelte-app.d.ts

@@ -6,7 +6,7 @@
  *
  * @module svelte-app
  */
-import type { Workflow, NodeMetadata, PortConfig } from './types/index.js';
+import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from './types/index.js';
 import type { EndpointConfig } from './config/endpoints.js';
 import type { AuthProvider } from './types/auth.js';
 import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
@@ -39,6 +39,8 @@ export interface FlowDropMountOptions {
     endpointConfig?: EndpointConfig;
     /** Port configuration for connections */
     portConfig?: PortConfig;
+    /** Category definitions for node categories */
+    categories?: CategoryDefinition[];
     /** Editor height */
     height?: string | number;
     /** Editor width */
@@ -140,6 +142,7 @@ export declare function mountWorkflowEditor(container: HTMLElement, options?: {
     nodes?: NodeMetadata[];
     endpointConfig?: EndpointConfig;
     portConfig?: PortConfig;
+    categories?: CategoryDefinition[];
 }): Promise<MountedFlowDropApp>;
 /**
  * Unmount a FlowDrop app

package/dist/svelte-app.js

@@ -12,6 +12,8 @@ import App from './components/App.svelte';
 import { initializePortCompatibility } from './utils/connections.js';
 import { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
 import { fetchPortConfig } from './services/portConfigApi.js';
+import { fetchCategories } from './services/categoriesApi.js';
+import { initializeCategories } from './stores/categoriesStore.js';
 import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
 import { DraftAutoSaveManager, getDraftStorageKey } from './services/draftStorage.js';
 import { mergeFeatures } from './types/events.js';
@@ -41,7 +43,7 @@ import { initializeSettings } from './stores/settingsStore.js';
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey } = options;
+    const { workflow, nodes, endpointConfig, portConfig, categories, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey } = options;
     // Merge features with defaults
     const features = mergeFeatures(userFeatures);
     // Apply initial settings overrides and initialize theme
@@ -83,6 +85,19 @@ export async function mountFlowDropApp(container, options = {}) {
         finalPortConfig = DEFAULT_PORT_CONFIG;
     }
     initializePortCompatibility(finalPortConfig);
+    // Initialize categories
+    if (categories) {
+        initializeCategories(categories);
+    }
+    else if (config) {
+        try {
+            const fetchedCategories = await fetchCategories(config);
+            initializeCategories(fetchedCategories);
+        }
+        catch (error) {
+            console.warn('Failed to fetch categories from API, using defaults:', error);
+        }
+    }
     // Set up event handler callbacks in the store
     if (eventHandlers?.onDirtyStateChange) {
         setOnDirtyStateChange(eventHandlers.onDirtyStateChange);
@@ -194,7 +209,7 @@ export async function mountFlowDropApp(container, options = {}) {
  * @returns Promise resolving to a MountedFlowDropApp instance
  */
 export async function mountWorkflowEditor(container, options = {}) {
-    const { nodes = [], endpointConfig, portConfig } = options;
+    const { nodes = [], endpointConfig, portConfig, categories } = options;
     // Create endpoint configuration
     let config;
     if (endpointConfig) {
@@ -230,6 +245,19 @@ export async function mountWorkflowEditor(container, options = {}) {
         finalPortConfig = DEFAULT_PORT_CONFIG;
     }
     initializePortCompatibility(finalPortConfig);
+    // Initialize categories
+    if (categories) {
+        initializeCategories(categories);
+    }
+    else if (config) {
+        try {
+            const fetchedCategories = await fetchCategories(config);
+            initializeCategories(fetchedCategories);
+        }
+        catch (error) {
+            console.warn('Failed to fetch categories from API, using defaults:', error);
+        }
+    }
     // Create the Svelte component
     const svelteApp = mount(WorkflowEditor, {
         target: container,

package/dist/types/index.d.ts

@@ -5,10 +5,43 @@ import type { Node, Edge, XYPosition } from '@xyflow/svelte';
 import { ConnectionLineType } from '@xyflow/svelte';
 import type { EndpointConfig } from '../config/endpoints.js';
 /**
- * Node category types for organizing nodes in the sidebar
- * Based on actual API response categories
+ * Built-in node categories that ship with FlowDrop.
+ * These categories have predefined icons, colors, and display names.
  */
-export type NodeCategory = 'triggers' | 'inputs' | 'outputs' | 'prompts' | 'models' | 'processing' | 'logic' | 'data' | 'tools' | 'helpers' | 'vector stores' | 'embeddings' | 'memories' | 'agents' | 'ai' | 'interrupts' | 'bundles';
+export type BuiltinNodeCategory = 'triggers' | 'inputs' | 'outputs' | 'prompts' | 'models' | 'processing' | 'logic' | 'data' | 'tools' | 'helpers' | 'vector stores' | 'embeddings' | 'memories' | 'agents' | 'ai' | 'interrupts' | 'bundles';
+/**
+ * Node category for organizing nodes in the sidebar.
+ * Includes all built-in categories plus any custom string.
+ * Custom categories can be defined via the `/categories` API endpoint.
+ *
+ * @example
+ * ```typescript
+ * // Built-in category
+ * const cat: NodeCategory = 'triggers';
+ *
+ * // Custom category
+ * const custom: NodeCategory = 'my-custom-category';
+ * ```
+ */
+export type NodeCategory = BuiltinNodeCategory | (string & Record<never, never>);
+/**
+ * Category definition with metadata for display and organization.
+ * Fetched from the `/categories` API endpoint or provided as defaults.
+ */
+export interface CategoryDefinition {
+    /** Machine name / unique identifier */
+    name: string;
+    /** Display label shown in UI */
+    label: string;
+    /** Icon identifier (e.g. 'mdi:brain') */
+    icon?: string;
+    /** Color token or CSS value (e.g. 'var(--fd-node-purple)') */
+    color?: string;
+    /** Category description */
+    description?: string;
+    /** Sort weight for ordering (lower = earlier) */
+    weight?: number;
+}
 /**
  * Port data type configuration
  */

package/dist/utils/colors.d.ts

@@ -7,10 +7,13 @@ import type { NodeCategory, PortDataTypeConfig } from '../types/index.js';
 /**
  * Category color mapping to design tokens (CSS variables)
  * Uses --fd-node-* tokens from tokens.css
+ * These serve as static defaults; the categories store provides dynamic overrides.
  */
-export declare const CATEGORY_COLOR_TOKENS: Record<NodeCategory, string>;
+export declare const CATEGORY_COLOR_TOKENS: Record<string, string>;
 /**
- * Get the design token for a category color
+ * Get the design token for a category color.
+ * Checks the categories store first (which includes API overrides),
+ * then falls back to the static CATEGORY_COLOR_TOKENS map, then to slate.
  */
 export declare function getCategoryColorToken(category: NodeCategory): string;
 /**

package/dist/utils/colors.js

@@ -4,9 +4,11 @@
  * Uses BEM syntax for CSS classes
  */
 import { getPortCompatibilityChecker } from './connections.js';
+import { getCategoryColor as getCategoryColorFromStore } from '../stores/categoriesStore.js';
 /**
  * Category color mapping to design tokens (CSS variables)
  * Uses --fd-node-* tokens from tokens.css
+ * These serve as static defaults; the categories store provides dynamic overrides.
  */
 export const CATEGORY_COLOR_TOKENS = {
     triggers: 'var(--fd-node-cyan)',
@@ -61,10 +63,12 @@ const DEFAULT_DATA_TYPE_COLORS = {
     branch: 'var(--fd-node-purple)'
 };
 /**
- * Get the design token for a category color
+ * Get the design token for a category color.
+ * Checks the categories store first (which includes API overrides),
+ * then falls back to the static CATEGORY_COLOR_TOKENS map, then to slate.
  */
 export function getCategoryColorToken(category) {
-    return CATEGORY_COLOR_TOKENS[category] || 'var(--fd-node-slate)';
+    return getCategoryColorFromStore(category);
 }
 /**
  * Get the reference color token for a data type (configurable version)
@@ -124,7 +128,7 @@ export const DEFAULT_COLORS = {
  * @returns The color configuration for the category
  */
 export function getCategoryColors(category) {
-    return CATEGORY_COLOR_TOKENS[category] || 'var(--fd-node-slate)';
+    return getCategoryColorFromStore(category);
 }
 /**
  * Get category background color

package/dist/utils/icons.d.ts

@@ -65,9 +65,11 @@ export declare const DEFAULT_ICONS: {
     readonly BUNDLE: "mdi:package-variant";
 };
 /**
- * Category-specific icons matching Langflow's visual style
+ * Category-specific icons for built-in categories.
+ * Custom categories fall back to DEFAULT_ICONS.CATEGORY.
+ * These serve as static defaults; the categories store provides dynamic overrides.
  */
-export declare const CATEGORY_ICONS: Record<NodeCategory, string>;
+export declare const CATEGORY_ICONS: Record<string, string>;
 /**
  * Get the appropriate icon for a node
  * @param nodeIcon - The node's specific icon
@@ -76,7 +78,9 @@ export declare const CATEGORY_ICONS: Record<NodeCategory, string>;
  */
 export declare function getNodeIcon(nodeIcon?: string, category?: NodeCategory): string;
 /**
- * Get the appropriate icon for a category
+ * Get the appropriate icon for a category.
+ * Checks the categories store first (which includes API overrides),
+ * then falls back to the static CATEGORY_ICONS map, then to the default.
  * @param category - The category
  * @returns The icon to use
  */

package/dist/utils/icons.js

@@ -2,6 +2,7 @@
  * Centralized icon management for FlowDrop
  * Ensures consistent icon usage across all components
  */
+import { getCategoryIcon as getCategoryIconFromStore } from '../stores/categoriesStore.js';
 /**
  * Default icons for different contexts
  */
@@ -77,7 +78,9 @@ export const DEFAULT_ICONS = {
     BUNDLE: 'mdi:package-variant'
 };
 /**
- * Category-specific icons matching Langflow's visual style
+ * Category-specific icons for built-in categories.
+ * Custom categories fall back to DEFAULT_ICONS.CATEGORY.
+ * These serve as static defaults; the categories store provides dynamic overrides.
  */
 export const CATEGORY_ICONS = {
     triggers: 'mdi:lightning-bolt',
@@ -109,20 +112,22 @@ export function getNodeIcon(nodeIcon, category) {
     if (nodeIcon) {
         return nodeIcon;
     }
-    // If category is provided, use category icon
-    if (category && CATEGORY_ICONS[category]) {
-        return CATEGORY_ICONS[category];
+    // If category is provided, use category icon from store (which includes API overrides)
+    if (category) {
+        return getCategoryIconFromStore(category);
     }
     // Fallback to default node icon
     return DEFAULT_ICONS.NODE;
 }
 /**
- * Get the appropriate icon for a category
+ * Get the appropriate icon for a category.
+ * Checks the categories store first (which includes API overrides),
+ * then falls back to the static CATEGORY_ICONS map, then to the default.
  * @param category - The category
  * @returns The icon to use
  */
 export function getCategoryIcon(category) {
-    return CATEGORY_ICONS[category] || DEFAULT_ICONS.CATEGORY;
+    return getCategoryIconFromStore(category);
 }
 /**
  * Get a default icon by key

package/package.json

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