@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

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

@@ -4,6 +4,7 @@ import type { EndpointConfig } from '../config/endpoints.js';
 import type { AuthProvider } from '../types/auth.js';
 import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
 import type { FlowDropTheme, FlowDropThemeName } from '../types/theme.js';
+import type { FlowDropInstance } from '../stores/instanceContainer.svelte.js';
 import type { SettingsCategory } from '../types/settings.js';
 import type { MessagesOverride } from '../messages/index.js';
 /**
@@ -22,14 +23,33 @@ interface Props {
     showNavbar?: boolean;
     /** Disable the node sidebar */
     disableSidebar?: boolean;
-    /** Lock the workflow (prevent changes) */
-    lockWorkflow?: boolean;
-    /** Read-only mode */
-    readOnly?: boolean;
-    /** Node execution statuses */
-    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    /**
+     * Editor interaction mode. Replaces the former `readOnly` + `lockWorkflow`
+     * boolean pair (2.0 breaking change).
+     *
+     * | mode         | node drag / connect / select | proximity-connect | node swap | bottom console panel + toggle |
+     * |--------------|------------------------------|-------------------|-----------|-------------------------------|
+     * | `'edit'`     | enabled                      | enabled           | enabled   | available                     |
+     * | `'readonly'` | disabled                     | disabled          | disabled  | hidden                        |
+     * | `'locked'`   | disabled                     | disabled          | disabled  | hidden                        |
+     *
+     * In 1.x `readOnly` and `lockWorkflow` gated the exact same set of
+     * interactions and were always combined as `!readOnly && !lockWorkflow`,
+     * so any combination of the two booleans collapsed to "edit" (both false)
+     * or "disabled" (either true). `'readonly'` and `'locked'` therefore behave
+     * identically today; the two names are kept as distinct intents so future
+     * versions can differentiate them without another breaking change.
+     *
+     * Migration: `readOnly` → `mode="readonly"`; `lockWorkflow` →
+     * `mode="locked"`; both `false` (or unset) → `mode="edit"` (the default).
+     *
+     * @default 'edit'
+     */
+    mode?: 'edit' | 'readonly' | 'locked';
     /** Pipeline ID for fetching node execution info */
     pipelineId?: string;
+    /** Increments to force a refresh of pipeline node status from the server */
+    refreshTrigger?: number;
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */
@@ -42,14 +62,31 @@ interface Props {
     }>;
     /** Show settings gear icon in navbar */
     showSettings?: boolean;
+    /** Show the "Connected" status indicator in the navbar (default: true) */
+    showStatus?: boolean;
     /** API base URL */
     apiBaseUrl?: string;
     /** Endpoint configuration */
     endpointConfig?: EndpointConfig;
     /** Authentication provider */
     authProvider?: AuthProvider;
-    /** Event handlers */
-    eventHandlers?: FlowDropEventHandlers;
+    /**
+     * Called before save — return false to cancel. Forwarded to the save
+     * pipeline. (Flattened from the former `eventHandlers` object in 2.0.)
+     */
+    onBeforeSave?: FlowDropEventHandlers['onBeforeSave'];
+    /** Called after a successful save. */
+    onAfterSave?: FlowDropEventHandlers['onAfterSave'];
+    /** Called when a save fails. */
+    onSaveError?: FlowDropEventHandlers['onSaveError'];
+    /** Called on any API error — return true to suppress the default toast. */
+    onApiError?: FlowDropEventHandlers['onApiError'];
+    /** Called after a workflow is loaded/imported. */
+    onWorkflowLoad?: FlowDropEventHandlers['onWorkflowLoad'];
+    /** Called before a node swap — return false to cancel. */
+    onBeforeSwap?: FlowDropEventHandlers['onBeforeSwap'];
+    /** Called after a node swap is applied. */
+    onAfterSwap?: FlowDropEventHandlers['onAfterSwap'];
     /** Feature configuration */
     features?: FlowDropFeatures;
     /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
@@ -76,6 +113,8 @@ interface Props {
      * function call you'd rather not invoke unless the prop is actually read.
      */
     messages?: MessagesOverride | (() => MessagesOverride);
+    /** Per-instance state container (created by mount functions). Defaults to the page-default instance. */
+    instance?: FlowDropInstance;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/ConfigForm.svelte

@@ -43,10 +43,12 @@
     type DynamicSchemaResult
   } from '../services/dynamicSchemaService.js';
   import { globalSaveWorkflow } from '../services/globalSave.js';
+  import { provideInstance } from '../stores/getInstance.svelte.js';
   import { getAvailableVariables } from '../services/variableService.js';
   import { logger } from '../utils/logger.js';
   import { getDataTypeColorToken, getPortBackgroundColor } from '../utils/colors.js';
   import { applyPortOrder } from '../utils/portUtils.js';
+  import { mergeWithDefaults, cascadeClearAutocompleteDependents } from '../utils/formMerge.js';
 
   interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
@@ -104,6 +106,17 @@
     onCancel
   }: Props = $props();
 
+  // Resolve the active instance for endpoint configuration (dynamic schema fetch).
+  // ConfigForm is a standalone-capable container (exported from /editor and able
+  // to render bare, e.g. with a direct `schema`/`values`). Self-provide so its
+  // leaf <FormField>s resolve and SSR doesn't throw. provideInstance() reuses an
+  // ancestor's context instance when nested in <App>/<WorkflowEditor>, returns
+  // the shared page-default in the browser, and creates a fresh per-render
+  // instance on the server (no cross-request leakage); no destroy here for the
+  // same reasons as SchemaForm (shared/default in the browser, no SSR teardown).
+  const fd = provideInstance();
+  const checker = fd.portCompatibility;
+
   // Set context for child components (e.g., FormAutocomplete)
   // Use getter functions to ensure child components always get the current prop value,
   // even if the prop changes after initial mount
@@ -187,17 +200,30 @@
   const initialConfig = $derived(values ?? node?.data.config ?? {});
 
   /**
-   * Create reactive configuration values using $state
-   * This fixes the Svelte 5 reactivity warnings
+   * User edits to config — only keys the user has touched since the current
+   * schema was loaded. configValues is derived from props + edits, so children
+   * mount with the correct values already in place (no parent→child race
+   * during the initial flush). Never assign to configValues directly.
    */
-  let configValues = $state<Record<string, unknown>>({});
+  let edits = $state<Record<string, unknown>>({});
+
+  const configValues = $derived(mergeWithDefaults(configSchema, initialConfig, edits));
+
   setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => configValues);
 
-  /**
-   * UI Extension values for display settings
-   * Merges node type defaults with instance overrides
-   */
-  let uiExtensionValues = $state<NodeUIExtensions>({});
+  // Drop edits when the schema reference changes — covers dynamic-schema load
+  // (configSchema flips from undefined → loaded) and "different node opened"
+  // (node prop change → metadata.configSchema reference change). Identity
+  // comparison only — value churn in `initialConfig` preserves in-flight edits.
+  // capturing the initial derived reference is intentional; later changes are picked up by the effect below
+  // svelte-ignore state_referenced_locally
+  let prevSchemaRef = configSchema;
+  $effect.pre(() => {
+    if (configSchema !== prevSchemaRef) {
+      prevSchemaRef = configSchema;
+      edits = {};
+    }
+  });
 
   /**
    * Flag to track if workflow save is in progress
@@ -215,6 +241,38 @@
     return { ...typeDefaults, ...instanceOverrides };
   });
 
+  /**
+   * UI Extension values for display settings.
+   * Writable derived: recomputes from the node when it changes (covering both
+   * "different node opened" and the post-save round-trip through node.data),
+   * while local port-management edits overwrite it wholesale via reassignment.
+   * NOTE: the derived value is not a deep $state proxy — update it only by
+   * reassigning the whole object, never by mutating a property.
+   */
+  let uiExtensionValues = $derived.by<NodeUIExtensions>(() => ({
+    hideUnconnectedHandles: initialUIExtensions.hideUnconnectedHandles ?? false,
+    portOrder: initialUIExtensions.portOrder
+      ? {
+          inputs: initialUIExtensions.portOrder.inputs
+            ? [...initialUIExtensions.portOrder.inputs]
+            : undefined,
+          outputs: initialUIExtensions.portOrder.outputs
+            ? [...initialUIExtensions.portOrder.outputs]
+            : undefined
+        }
+      : undefined,
+    hiddenPorts: initialUIExtensions.hiddenPorts
+      ? {
+          inputs: initialUIExtensions.hiddenPorts.inputs
+            ? [...initialUIExtensions.hiddenPorts.inputs]
+            : undefined,
+          outputs: initialUIExtensions.hiddenPorts.outputs
+            ? [...initialUIExtensions.hiddenPorts.outputs]
+            : undefined
+        }
+      : undefined
+  }));
+
   /**
    * Fetch dynamic schema when needed
    */
@@ -226,6 +284,7 @@
 
     try {
       const result: DynamicSchemaResult = await fetchDynamicSchema(
+        fd.api.config,
         configEditOptions.dynamicSchema,
         node,
         workflowId
@@ -294,51 +353,6 @@
     }
   });
 
-  /**
-   * Initialize config values when node/schema changes
-   */
-  $effect(() => {
-    if (configSchema?.properties) {
-      const mergedConfig: Record<string, unknown> = {};
-      Object.entries(configSchema.properties).forEach(([key, field]) => {
-        const fieldConfig = field as Record<string, unknown>;
-        // Use existing value if available, otherwise use default
-        mergedConfig[key] =
-          initialConfig[key] !== undefined ? initialConfig[key] : fieldConfig.default;
-      });
-      configValues = mergedConfig;
-    }
-  });
-
-  /**
-   * Initialize UI extension values when node changes
-   */
-  $effect(() => {
-    uiExtensionValues = {
-      hideUnconnectedHandles: initialUIExtensions.hideUnconnectedHandles ?? false,
-      portOrder: initialUIExtensions.portOrder
-        ? {
-            inputs: initialUIExtensions.portOrder.inputs
-              ? [...initialUIExtensions.portOrder.inputs]
-              : undefined,
-            outputs: initialUIExtensions.portOrder.outputs
-              ? [...initialUIExtensions.portOrder.outputs]
-              : undefined
-          }
-        : undefined,
-      hiddenPorts: initialUIExtensions.hiddenPorts
-        ? {
-            inputs: initialUIExtensions.hiddenPorts.inputs
-              ? [...initialUIExtensions.hiddenPorts.inputs]
-              : undefined,
-            outputs: initialUIExtensions.hiddenPorts.outputs
-              ? [...initialUIExtensions.hiddenPorts.outputs]
-              : undefined
-          }
-        : undefined
-    };
-  });
-
   /**
    * All input ports in current display order for the port management UI.
    * Combines static metadata inputs + dynamic config inputs, sorted by portOrder.
@@ -376,9 +390,12 @@
     if (newIdx < 0 || newIdx >= list.length) return;
     const newOrder = list.map((p) => p.id);
     [newOrder[idx], newOrder[newIdx]] = [newOrder[newIdx], newOrder[idx]];
-    uiExtensionValues.portOrder = {
-      ...uiExtensionValues.portOrder,
-      [direction]: newOrder
+    uiExtensionValues = {
+      ...uiExtensionValues,
+      portOrder: {
+        ...uiExtensionValues.portOrder,
+        [direction]: newOrder
+      }
     };
     handleFormBlur();
   }
@@ -390,9 +407,12 @@
     const current = uiExtensionValues.hiddenPorts?.[direction] ?? [];
     const isHidden = current.includes(portId);
     const next = isHidden ? current.filter((id) => id !== portId) : [...current, portId];
-    uiExtensionValues.hiddenPorts = {
-      ...uiExtensionValues.hiddenPorts,
-      [direction]: next.length > 0 ? next : undefined
+    uiExtensionValues = {
+      ...uiExtensionValues,
+      hiddenPorts: {
+        ...uiExtensionValues.hiddenPorts,
+        [direction]: next.length > 0 ? next : undefined
+      }
     };
     handleFormBlur();
   }
@@ -405,8 +425,11 @@
     const hidden = { ...uiExtensionValues.hiddenPorts };
     delete order[direction];
     delete hidden[direction];
-    uiExtensionValues.portOrder = Object.keys(order).length > 0 ? order : undefined;
-    uiExtensionValues.hiddenPorts = Object.keys(hidden).length > 0 ? hidden : undefined;
+    uiExtensionValues = {
+      ...uiExtensionValues,
+      portOrder: Object.keys(order).length > 0 ? order : undefined,
+      hiddenPorts: Object.keys(hidden).length > 0 ? hidden : undefined
+    };
     handleFormBlur();
   }
 
@@ -419,10 +442,22 @@
   }
 
   /**
-   * Handle field value changes from FormField components
+   * Handle field value changes from FormField components.
+   *
+   * When a field changes, also clear any sibling autocomplete that declared
+   * this field in its `autocomplete.params` map — its previous value was
+   * computed against the old dependency value and is now stale. The cascade
+   * runs only on user-driven edits via this codepath; undo/redo and external
+   * config replacement flow through `initialConfig` and don't trigger it (#33).
    */
   function handleFieldChange(key: string, value: unknown): void {
-    configValues[key] = value;
+    const previous = configValues[key];
+    edits[key] = value;
+    if (previous === value) return;
+    const dependents = cascadeClearAutocompleteDependents(configSchema, key);
+    for (const [depKey, depValue] of Object.entries(dependents)) {
+      edits[depKey] = depValue;
+    }
   }
 
   /**
@@ -434,6 +469,11 @@
     if (onChange) {
       const extensions = showUIExtensions && node ? uiExtensionValues : undefined;
       onChange({ ...configValues }, extensions);
+      // Discharge the edits buffer at the commit boundary. Subsequent prop
+      // changes (parent absorbing the commit, undo/redo, collaboration) then
+      // flow through `initialConfig` cleanly instead of being shadowed by a
+      // stale local edit.
+      edits = {};
     }
   }
 
@@ -731,7 +771,7 @@
               offLabel="Visible"
               ariaDescribedBy="ext-hideUnconnectedHandles-description"
               onChange={(val) => {
-                uiExtensionValues.hideUnconnectedHandles = val;
+                uiExtensionValues = { ...uiExtensionValues, hideUnconnectedHandles: val };
                 handleFormBlur();
               }}
             />
@@ -767,11 +807,13 @@
                     <span
                       class="config-form__port-order-badge"
                       style="background-color:{getPortBackgroundColor(
+                        checker,
                         port.dataType,
                         15
                       )};color:{getDataTypeColorToken(
+                        checker,
                         port.dataType
-                      )};border:1px solid {getPortBackgroundColor(port.dataType, 30)}"
+                      )};border:1px solid {getPortBackgroundColor(checker, port.dataType, 30)}"
                     >
                       {port.dataType}
                     </span>
@@ -843,11 +885,13 @@
                     <span
                       class="config-form__port-order-badge"
                       style="background-color:{getPortBackgroundColor(
+                        checker,
                         port.dataType,
                         15
                       )};color:{getDataTypeColorToken(
+                        checker,
                         port.dataType
-                      )};border:1px solid {getPortBackgroundColor(port.dataType, 30)}"
+                      )};border:1px solid {getPortBackgroundColor(checker, port.dataType, 30)}"
                     >
                       {port.dataType}
                     </span>

package/dist/components/ConfigModal.svelte

@@ -14,6 +14,11 @@
   }
 
   let { onClose, onSave, onCancel, ...props }: Props = $props();
+
+  // Unique per component instance so two FlowDrop editors on one page
+  // don't render colliding DOM ids (a11y).
+  const uid = $props.id();
+  const titleId = `${uid}-config-modal-title`;
   let localConfigValues = $derived.by(() => ({ ...props.configValues }));
 
   function handleCancel() {
@@ -47,14 +52,14 @@
     onkeydown={handleKeydown}
     role="dialog"
     aria-modal="true"
-    aria-labelledby="config-modal-title"
+    aria-labelledby={titleId}
     tabindex="-1"
   >
     <!-- Modal Container -->
     <div class="config-modal">
       <!-- Modal Header -->
       <div class="config-modal__header">
-        <h2 id="config-modal-title" class="config-modal__title">
+        <h2 id={titleId} class="config-modal__title">
           Configure: {props.nodeLabel}
         </h2>
         <button

package/dist/components/ConnectionLine.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import { getDataTypeColor } from '../utils/colors';
+  import { getInstance } from '../stores/getInstance.svelte.js';
   import { useConnection } from '@xyflow/svelte';
 
   const connection = useConnection();
+  const checker = getInstance().portCompatibility;
 
   let path: string | null = $derived.by(() => {
     if (connection.current.inProgress) {
@@ -18,7 +20,7 @@
     fill="none"
     stroke-width={1.5}
     class="animated"
-    stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
+    stroke={getDataTypeColor(checker, connection.current.fromHandle.id ?? '')}
     d={path}
   />
   <circle
@@ -26,7 +28,7 @@
     cy={connection.current.to.y}
     fill="#fff"
     r={3}
-    stroke={getDataTypeColor(connection.current.fromHandle.id ?? '')}
+    stroke={getDataTypeColor(checker, connection.current.fromHandle.id ?? '')}
     stroke-width={1.5}
   />
 {/if}

package/dist/components/Navbar.svelte

@@ -59,6 +59,25 @@
   // Hoist the navigation branch — six reads in the template.
   const nav = $derived(m().navigation);
 
+  // Flyout structure: actions after the first split into ungrouped (rendered
+  // flat at the top) and groups (rendered as labeled sections). Group order
+  // follows first occurrence in the source array.
+  const dropdownActions = $derived(primaryActions.slice(1));
+  const ungroupedActions = $derived(dropdownActions.filter((a) => !a.group));
+  const groupedActions = $derived.by(() => {
+    const groups = new Map<string, NavbarAction[]>();
+    for (const action of dropdownActions) {
+      if (!action.group) continue;
+      let bucket = groups.get(action.group);
+      if (!bucket) {
+        bucket = [];
+        groups.set(action.group, bucket);
+      }
+      bucket.push(action);
+    }
+    return Array.from(groups, ([label, items]) => ({ label, items }));
+  });
+
   // Close dropdown when clicking outside
   function handleClickOutside(event: MouseEvent) {
     const target = event.target as HTMLElement;
@@ -203,7 +222,7 @@
 
             {#if isDropdownOpen}
               <div class="flowdrop-navbar__dropdown-menu">
-                {#each primaryActions.slice(1) as action (action.label)}
+                {#each ungroupedActions as action (action.label)}
                   <a
                     href={action.href}
                     class="flowdrop-navbar__dropdown-item"
@@ -223,6 +242,32 @@
                     {/if}
                   </a>
                 {/each}
+                {#each groupedActions as group, groupIndex (group.label)}
+                  {#if groupIndex > 0 || ungroupedActions.length > 0}
+                    <div class="flowdrop-navbar__dropdown-divider" role="separator"></div>
+                  {/if}
+                  <div class="flowdrop-navbar__dropdown-group-header">{group.label}</div>
+                  {#each group.items as action (action.label)}
+                    <a
+                      href={action.href}
+                      class="flowdrop-navbar__dropdown-item"
+                      onclick={(e) => {
+                        action.onclick?.(e);
+                        isDropdownOpen = false;
+                      }}
+                      target={action.external ? '_blank' : undefined}
+                      rel={action.external ? 'noopener noreferrer' : undefined}
+                    >
+                      {#if action.icon}
+                        <Icon icon={action.icon} class="w-4 h-4" />
+                      {/if}
+                      <span>{action.label}</span>
+                      {#if action.external}
+                        <Icon icon="mdi:open-in-new" class="w-3 h-3" />
+                      {/if}
+                    </a>
+                  {/each}
+                {/each}
               </div>
             {/if}
           </div>
@@ -568,6 +613,21 @@
     border-bottom: none;
   }
 
+  .flowdrop-navbar__dropdown-divider {
+    height: 1px;
+    background-color: var(--fd-border);
+    margin: 0.25rem 0;
+  }
+
+  .flowdrop-navbar__dropdown-group-header {
+    padding: 0.5rem 1rem 0.25rem;
+    font-size: var(--fd-text-xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--fd-muted-foreground);
+  }
+
   .flowdrop-navbar__action {
     display: flex;
     align-items: center;

package/dist/components/NodeSidebar.svelte

@@ -10,7 +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.svelte.js';
+  import { getInstance } from '../stores/getInstance.svelte.js';
   import { getUiSettings } from '../stores/settingsStore.svelte.js';
   import { extractConfigDefaults } from '../utils/nodeIds.js';
   import { m } from '../messages/index.js';
@@ -26,8 +26,10 @@
   }
 
   let props: Props = $props();
+  const fd = getInstance();
   let searchInput = $state('');
-  // svelte-ignore state_referenced_locally — initial default, user selects interactively
+  // initial default, user selects interactively
+  // svelte-ignore state_referenced_locally
   let selectedCategory = $state(props.selectedCategory || 'all');
 
   /**
@@ -140,26 +142,12 @@
     }
   }
 
-  /**
-   * Handle search input change
-   */
-  function handleSearchChange(): void {
-    // Search is handled reactively through the derived filteredNodes
-  }
-
-  /**
-   * Handle node click
-   */
-  function handleNodeClick(nodeType: NodeMetadata): void {
-    // Handle node click - could be used for preview or configuration
-  }
-
   /**
    * Get category display name from the categories store.
    * Falls back to auto-capitalizing the category machine name.
    */
   function getCategoryDisplayName(category: NodeCategory): string {
-    return getCategoryLabel(category);
+    return fd.categories.getLabel(category);
   }
 </script>
 
@@ -180,7 +168,6 @@
           placeholder={m().layout.searchComponents}
           class="flowdrop-input flowdrop-join__item flowdrop-w--full"
           bind:value={searchInput}
-          oninput={handleSearchChange}
         />
       </div>
       <button class="flowdrop-btn flowdrop-join__item" aria-label={m().layout.searchComponents}>
@@ -273,9 +260,12 @@
                     <!-- Node Type Icon with Squircle Background -->
                     <span
                       class="flowdrop-node-icon"
-                      style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
+                      style="--_icon-color: {getCategoryColorToken(
+                        fd.categories,
+                        nodeType.category
+                      )}"
                     >
-                      <Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
+                      <Icon icon={getNodeIcon(fd.categories, nodeType.icon, nodeType.category)} />
                     </span>
 
                     <!-- Node Type Info - Icon and Title only -->
@@ -309,25 +299,20 @@
                 <div class="fd-sidebar-flat-category">
                   {getCategoryDisplayName(category).toUpperCase()}
                 </div>
-                <div class="fd-sidebar-flat-list">
+                <div class="fd-sidebar-flat-list" role="list">
                   {#each categoryNodes as nodeType (nodeType.id)}
                     <div
                       class="fd-sidebar-flat-item"
+                      role="listitem"
                       draggable="true"
                       ondragstart={(e) => handleNodeDragStart(e, nodeType)}
-                      onclick={() => handleNodeClick(nodeType)}
-                      role="button"
-                      tabindex="0"
-                      onkeydown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault();
-                          handleNodeClick(nodeType);
-                        }
-                      }}
                     >
                       <span
                         class="fd-sidebar-flat-dot"
-                        style="background: {getCategoryColorToken(nodeType.category)}"
+                        style="background: {getCategoryColorToken(
+                          fd.categories,
+                          nodeType.category
+                        )}"
                       ></span>
                       <span class="fd-sidebar-flat-name">{nodeType.name}</span>
                     </div>
@@ -343,9 +328,9 @@
                   <div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
                     <span
                       class="flowdrop-node-icon"
-                      style="--_icon-color: {getCategoryColorToken(category)}"
+                      style="--_icon-color: {getCategoryColorToken(fd.categories, category)}"
                     >
-                      <Icon icon={getCategoryIcon(category)} />
+                      <Icon icon={getCategoryIcon(fd.categories, category)} />
                     </span>
                     <span>{getCategoryDisplayName(category)}</span>
                   </div>
@@ -354,30 +339,27 @@
                   </div>
                 </summary>
                 <div class="flowdrop-details__content">
-                  <div class="flowdrop-node-list">
+                  <div class="flowdrop-node-list" role="list">
                     {#each categoryNodes as nodeType (nodeType.id)}
                       <div
                         class="flowdrop-card flowdrop-card--compact flowdrop-node-item"
+                        role="listitem"
                         draggable="true"
                         ondragstart={(e) => handleNodeDragStart(e, nodeType)}
-                        onclick={() => handleNodeClick(nodeType)}
-                        role="button"
-                        tabindex="0"
-                        onkeydown={(e) => {
-                          if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            handleNodeClick(nodeType);
-                          }
-                        }}
                       >
                         <div class="flowdrop-card__body flowdrop-p--1 flowdrop-py--1">
                           <div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
                             <!-- Node Type Icon with Squircle Background -->
                             <span
                               class="flowdrop-node-icon"
-                              style="--_icon-color: {getCategoryColorToken(nodeType.category)}"
+                              style="--_icon-color: {getCategoryColorToken(
+                                fd.categories,
+                                nodeType.category
+                              )}"
                             >
-                              <Icon icon={getNodeIcon(nodeType.icon, nodeType.category)} />
+                              <Icon
+                                icon={getNodeIcon(fd.categories, nodeType.icon, nodeType.category)}
+                              />
                             </span>
 
                             <!-- Node Type Info - Icon and Title only -->