@flowdrop/flowdrop 1.13.0 → 1.15.0

package/README.md

@@ -158,6 +158,11 @@ FlowDrop provides tree-shakeable sub-module exports so you can import only what
 | `@flowdrop/flowdrop/settings`      | SettingsPanel, stores, services                    |
 | `@flowdrop/flowdrop/styles`        | Base CSS stylesheet                                |
 | `@flowdrop/flowdrop/schema`        | Workflow JSON schema                               |
+| `@flowdrop/flowdrop/openapi`       | OpenAPI spec (YAML) for the FlowDrop backend API   |
+
+### OpenAPI spec
+
+The full OpenAPI spec for the FlowDrop backend API ships with the package, version-matched to your installed release. It defines the node-config / form-element schema (`ConfigProperty`), playground messages, and every endpoint. Resolve it from `@flowdrop/flowdrop/openapi`, or read it directly at `node_modules/@flowdrop/flowdrop/dist/openapi/v1/openapi.yaml`. Point your AI assistant at that file when authoring node config schemas. The latest spec is also browsable at [api.flowdrop.io](https://api.flowdrop.io).
 
 ## Integration
 

package/dist/components/ConfigForm.svelte

@@ -47,6 +47,7 @@
   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) */
@@ -187,12 +188,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);
 
+  // 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.
+  // svelte-ignore state_referenced_locally — capturing the initial derived reference is intentional; later changes are picked up by the effect below
+  let prevSchemaRef = configSchema;
+  $effect.pre(() => {
+    if (configSchema !== prevSchemaRef) {
+      prevSchemaRef = configSchema;
+      edits = {};
+    }
+  });
+
   /**
    * UI Extension values for display settings
    * Merges node type defaults with instance overrides
@@ -294,22 +313,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
    */
@@ -419,10 +422,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 +449,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 = {};
     }
   }
 

package/dist/components/ConfigPanel.svelte

@@ -77,7 +77,13 @@
           <Icon icon="heroicons:arrows-right-left" />
         </button>
       {/if}
-      <button class="config-panel__close" onclick={onClose} aria-label={m().layout.closeConfigPanel}> × </button>
+      <button
+        class="config-panel__close"
+        onclick={onClose}
+        aria-label={m().layout.closeConfigPanel}
+      >
+        ×
+      </button>
     </div>
   </div>
 

package/dist/components/NodeSwapPicker.svelte

@@ -81,7 +81,11 @@
 <div class="swap-picker">
   <!-- Header -->
   <div class="swap-picker__header">
-    <button class="swap-picker__back" onclick={onCancel} aria-label={m().layout.backToConfiguration}>
+    <button
+      class="swap-picker__back"
+      onclick={onCancel}
+      aria-label={m().layout.backToConfiguration}
+    >
       <Icon icon="heroicons:arrow-left" />
     </button>
     <h2 class="swap-picker__title">Swap Node</h2>

package/dist/components/PipelineStatus.svelte

@@ -37,8 +37,17 @@
     ) => void;
   }
 
-  let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady, runLabel, isEmbedded = false, refreshTrigger = 0 }: Props =
-    $props();
+  let {
+    pipelineId,
+    workflow,
+    apiClient,
+    baseUrl,
+    endpointConfig,
+    onActionsReady,
+    runLabel,
+    isEmbedded = false,
+    refreshTrigger = 0
+  }: Props = $props();
 
   // Track previous trigger value so the $effect only fires on increments, not on initial mount.
   // svelte-ignore state_referenced_locally

package/dist/components/SchemaForm.svelte

@@ -62,6 +62,7 @@
   import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
   import type { FieldSchema } from './form/index.js';
   import { m, warnDeprecatedProp } from '../messages/index.js';
+  import { mergeWithDefaults, cascadeClearAutocompleteDependents } from '../utils/formMerge.js';
 
   /**
    * Props interface for SchemaForm component
@@ -194,24 +195,24 @@
   let formRef: HTMLFormElement | undefined = $state();
 
   /**
-   * Internal reactive state for form values
+   * User edits — only keys the user has changed since the current schema
+   * was loaded. formValues is derived from props + edits, never synchronised
+   * via an effect, so children mount with the correct values already in place.
    */
-  let formValues = $state<Record<string, unknown>>({});
+  let edits = $state<Record<string, unknown>>({});
+
+  const formValues = $derived(mergeWithDefaults(schema, values, edits));
+
   setContext<() => Record<string, unknown>>('flowdrop:getFormValues', () => formValues);
 
-  /**
-   * Initialize form values when schema or values change
-   * Merges default values from schema with provided values
-   */
-  $effect(() => {
-    if (schema?.properties) {
-      const mergedValues: Record<string, unknown> = {};
-      Object.entries(schema.properties).forEach(([key, field]) => {
-        const fieldConfig = field as Record<string, unknown>;
-        // Use provided value if available, otherwise use schema default
-        mergedValues[key] = values[key] !== undefined ? values[key] : fieldConfig.default;
-      });
-      formValues = mergedValues;
+  // Drop edits when the schema reference changes (different form mounted).
+  // Identity comparison only — value churn in `values` preserves in-flight edits.
+  // svelte-ignore state_referenced_locally — capturing the initial prop reference is intentional; later changes are picked up by the effect below
+  let prevSchemaRef = schema;
+  $effect.pre(() => {
+    if (schema !== prevSchemaRef) {
+      prevSchemaRef = schema;
+      edits = {};
     }
   });
 
@@ -234,7 +235,18 @@
    * @param value - New field value
    */
   function handleFieldChange(key: string, value: unknown): void {
-    formValues[key] = value;
+    const previous = formValues[key];
+    edits[key] = value;
+
+    // Cascade-clear any autocomplete whose `params` references this field.
+    // Only runs on user-driven edits; undo/redo and external value-prop
+    // replacement flow through `values` and bypass this path (#33).
+    if (previous !== value) {
+      const dependents = cascadeClearAutocompleteDependents(schema, key);
+      for (const [depKey, depValue] of Object.entries(dependents)) {
+        edits[depKey] = depValue;
+      }
+    }
 
     // Notify parent of the change
     if (onChange) {

package/dist/components/SettingsPanel.svelte

@@ -362,7 +362,11 @@
 
 <div class="flowdrop-settings-panel {className}">
   <!-- Tab Navigation -->
-  <div class="flowdrop-settings-panel__tabs" role="tablist" aria-label={m().layout.settingsCategories}>
+  <div
+    class="flowdrop-settings-panel__tabs"
+    role="tablist"
+    aria-label={m().layout.settingsCategories}
+  >
     {#each categories as category, index (category)}
       <button
         class="flowdrop-settings-panel__tab"

package/dist/components/WorkflowEditor.svelte

@@ -277,7 +277,11 @@
       const rawStatus = statuses[node.id];
       if (!rawStatus) return node;
 
-      const existing = node.data.executionInfo ?? { status: 'idle' as const, executionCount: 0, isExecuting: false };
+      const existing = node.data.executionInfo ?? {
+        status: 'idle' as const,
+        executionCount: 0,
+        isExecuting: false
+      };
       return {
         ...node,
         data: {

package/dist/components/chat/AIChatPanel.svelte

@@ -288,11 +288,7 @@
       return;
     }
 
-    if (
-      getBehaviorSettings().chatAutoRetry &&
-      workflowId &&
-      autoRetryCount < MAX_AUTO_RETRIES
-    ) {
+    if (getBehaviorSettings().chatAutoRetry && workflowId && autoRetryCount < MAX_AUTO_RETRIES) {
       autoRetryCount++;
       const errorText = buildBatchErrorMessage(
         completedCount,

package/dist/components/form/FormAutocomplete.svelte

@@ -121,6 +121,7 @@
   // Stable fingerprint — any change triggers selection clearing.
   // JSON.stringify gives a canonical string without null-byte ambiguity.
   const depFingerprint = $derived(JSON.stringify(depParamValues));
+  // svelte-ignore state_referenced_locally — intentional initial snapshot; the effect below tracks subsequent changes
   let prevDepFingerprint = depFingerprint;
 
   $effect(() => {
@@ -308,10 +309,9 @@
     // Open dropdown
     showDropdown();
 
-    // If allowFreeText and single mode, update the value immediately
-    if (allowFreeText && !multiple) {
-      onChange(inputValue);
-    }
+    // Free-text single mode commits on intent signals (Enter, blur, option select),
+    // NOT per keystroke — see issue #32. Treating the search-box text as the field's
+    // committed value pollutes the parent form's edits buffer and history.
 
     // Fetch suggestions with debounce
     debouncedFetch(inputValue);
@@ -352,6 +352,19 @@
           inputValue = '';
         }
       }
+
+      // Free-text single mode — commit on blur if the user typed something
+      // that differs from the current value. An empty inputValue is just the
+      // resting state of the search box (the value lives in the chip), so it
+      // is NOT an intent signal; clearing happens via the X button or
+      // Backspace-on-empty. Replaces the per-keystroke commit dropped from
+      // handleInput; see issue #32.
+      if (allowFreeText && !multiple && inputValue !== '') {
+        const currentSingle = selectedValues[0] ?? '';
+        if (inputValue !== currentSingle) {
+          onChange(inputValue);
+        }
+      }
     }, 200);
   }
 
@@ -591,12 +604,14 @@
     const current = depFingerprint;
     if (current === prevDepFingerprint) return;
     prevDepFingerprint = current;
-    // A dependency field changed — abort any in-flight fetch, clear state
+    // A dependency field changed — abort any in-flight fetch and invalidate
+    // cached suggestions/labels (they were keyed by the previous dependency
+    // values). Do NOT clear this field's value here: that policy lives in the
+    // parent form's handleFieldChange so it only fires on user-driven changes,
+    // not on undo/redo, programmatic resets, or collaborative edits (#33).
     abortController?.abort();
     suggestions = [];
     labelCache = new Map();
-    if (multiple) onChange([]);
-    else onChange('');
   });
 
   /**
@@ -721,11 +736,7 @@
     style={popoverStyle}
     onmousedown={(e) => e.preventDefault()}
   >
-    <ul
-      class="form-autocomplete__listbox"
-      role="listbox"
-      aria-label={t.suggestions}
-    >
+    <ul class="form-autocomplete__listbox" role="listbox" aria-label={t.suggestions}>
       {#if isLoading}
         <li class="form-autocomplete__status form-autocomplete__status--loading">
           <Icon icon="heroicons:arrow-path" class="form-autocomplete__status-icon" />

package/dist/components/interrupt/ChoicePrompt.svelte

@@ -135,7 +135,11 @@
   {/if}
 
   <!-- Options -->
-  <div class="choice-prompt__options" role={isMultiple ? 'group' : 'radiogroup'} aria-label={config.message}>
+  <div
+    class="choice-prompt__options"
+    role={isMultiple ? 'group' : 'radiogroup'}
+    aria-label={config.message}
+  >
     {#each config.options as option (option.value)}
       {@const isChecked = isResolved ? isOptionResolved(option) : selectedValues.has(option.value)}
       <label

package/dist/components/interrupt/InterruptBubble.svelte

@@ -16,10 +16,7 @@
   import ReviewPrompt from './ReviewPrompt.svelte';
   import MessageTagStrip from '../playground/MessageTagStrip.svelte';
   import HierarchyTrail from '../playground/HierarchyTrail.svelte';
-  import type {
-    MessageHierarchyItem,
-    MessageTag
-  } from '../../types/playground.js';
+  import type { MessageHierarchyItem, MessageTag } from '../../types/playground.js';
   import type {
     Interrupt,
     InterruptType,
@@ -304,7 +301,9 @@
       <time
         class="interrupt-bubble__timestamp"
         datetime={currentInterrupt.resolvedAt ?? currentInterrupt.createdAt}
-        aria-label="sent at {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}"
+        aria-label="sent at {formatTimestamp(
+          currentInterrupt.resolvedAt ?? currentInterrupt.createdAt
+        )}"
       >
         {formatTimestamp(currentInterrupt.resolvedAt ?? currentInterrupt.createdAt)}
       </time>

package/dist/components/nodes/AtomNode.svelte

@@ -0,0 +1,280 @@
+<!--
+  Atom Node Component
+  Minimalist, label-only node for "supplies a value" atoms (Constant now, Cast later).
+  Renders as a pill that hugs its content with handles driven by the node's ports.
+
+  The body text and the output port's dataType are both driven by config via
+  `extensions.ui.atom` (see AtomUIConfig). This component owns no domain semantics —
+  meaning comes entirely from the node's NodeMetadata.
+-->
+
+<script lang="ts">
+  import { Position, Handle } from '@xyflow/svelte';
+  import type {
+    ConfigValues,
+    ConfigSchema,
+    NodeMetadata,
+    NodeExtensions,
+    NodePort,
+    AtomUIConfig,
+    WorkflowNode as WorkflowNodeType
+  } from '../../types/index.js';
+  import { getDataTypeColor } from '../../utils/colors.js';
+  import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
+  import { applyPortOrder, isPortVisible } from '../../utils/portUtils.js';
+  import { ProximityConnectHelper } from '../../helpers/proximityConnect.js';
+
+  interface AtomNodeData {
+    label: string;
+    config: ConfigValues;
+    metadata: NodeMetadata;
+    nodeId?: string;
+    extensions?: NodeExtensions;
+    onConfigOpen?: (node: {
+      id: string;
+      type: string;
+      data: { label: string; config: ConfigValues; metadata: NodeMetadata };
+    }) => void;
+  }
+
+  interface Props {
+    data: AtomNodeData;
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+  }
+
+  let { data, selected, isProcessing, isError }: Props = $props();
+
+  const nodeId = $derived(data.nodeId ?? 'unknown');
+  const nodeType = $derived(data.metadata?.type ?? 'atom');
+
+  // Instance extensions override node-type defaults.
+  const atomCfg = $derived<AtomUIConfig>(
+    data.extensions?.ui?.atom ?? data.metadata?.extensions?.ui?.atom ?? {}
+  );
+  const hideUnconnectedHandles = $derived(
+    data.extensions?.ui?.hideUnconnectedHandles ??
+      data.metadata?.extensions?.ui?.hideUnconnectedHandles ??
+      false
+  );
+  const hiddenPorts = $derived(
+    data.extensions?.ui?.hiddenPorts ?? data.metadata?.extensions?.ui?.hiddenPorts ?? {}
+  );
+  const portOrder = $derived(
+    data.extensions?.ui?.portOrder ?? data.metadata?.extensions?.ui?.portOrder ?? {}
+  );
+
+  // Optional, server-driven accent. When unset the inline custom property is
+  // omitted, so CSS falls back to the neutral border — uncolored atoms are
+  // unchanged. Mirrors ToolNode: node definition (metadata) wins over instance.
+  const atomColor = $derived(data.metadata?.color ?? (data.config?.color as string | undefined));
+  const isRect = $derived(atomCfg.shape === 'rectangle');
+
+  // Only the dynamic bits live inline; max-width and accent both optional.
+  const nodeStyle = $derived(
+    [
+      atomCfg.maxWidth ? `max-width: ${atomCfg.maxWidth}px` : '',
+      atomColor ? `--fd-atom-node-color: ${atomColor}` : ''
+    ]
+      .filter(Boolean)
+      .join('; ')
+  );
+
+  // The node slice getAllPorts needs — keeps port resolution in one place,
+  // shared with proximity-connect and coordinate/validation logic. No cast: the
+  // helper's signature documents that `type` + `data` are all it reads.
+  const nodeLike = $derived<Pick<WorkflowNodeType, 'type' | 'data'>>({ type: nodeType, data });
+
+  const inPorts = $derived(
+    applyPortOrder(ProximityConnectHelper.getAllPorts(nodeLike, 'input'), portOrder.inputs).filter(
+      (p: NodePort) =>
+        isPortVisible(
+          p,
+          'input',
+          hiddenPorts,
+          hideUnconnectedHandles,
+          getConnectedHandles(),
+          nodeId
+        )
+    )
+  );
+  const outPorts = $derived(
+    applyPortOrder(
+      ProximityConnectHelper.getAllPorts(nodeLike, 'output'),
+      portOrder.outputs
+    ).filter((p: NodePort) =>
+      isPortVisible(p, 'output', hiddenPorts, hideUnconnectedHandles, getConnectedHandles(), nodeId)
+    )
+  );
+
+  /** Friendly label for a value, using the field's oneOf titles when present. */
+  function resolveDisplay(schema: ConfigSchema | undefined, key: string, raw: unknown): string {
+    const prop = schema?.properties?.[key] as
+      | { oneOf?: Array<{ const: unknown; title?: string }> }
+      | undefined;
+    const match = prop?.oneOf?.find((o) => o.const === raw);
+    if (match?.title) return match.title;
+    if (typeof raw === 'boolean') return raw ? 'true' : 'false';
+    return String(raw);
+  }
+
+  // Body text: config[valueKey] (label-resolved), else node label. When neither
+  // resolves, fall back to the placeholder and render it dimmed.
+  const display = $derived.by(() => {
+    const key = atomCfg.valueKey;
+    const raw = key ? data.config?.[key] : undefined;
+    if (key && raw !== undefined && raw !== null && raw !== '') {
+      return { text: resolveDisplay(data.metadata?.configSchema, key, raw), empty: false };
+    }
+    if (data.label) return { text: data.label, empty: false };
+    return { text: atomCfg.placeholder ?? '', empty: true };
+  });
+
+  // Pill height is content-driven (~28px), so fixed px offsets don't fit.
+  // Distribute handles as a % of node height: 50% for one port, evenly otherwise.
+  function portTopPct(index: number, count: number): number {
+    return ((index + 1) / (count + 1)) * 100;
+  }
+
+  function openConfig(): void {
+    data.onConfigOpen?.({ id: nodeId, type: nodeType, data });
+  }
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      openConfig();
+    }
+  }
+</script>
+
+{#each inPorts as port, index}
+  <Handle
+    type="target"
+    position={Position.Left}
+    id={`${nodeId}-input-${port.id}`}
+    style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      port.dataType
+    )}); top: {portTopPct(index, inPorts.length)}%;"
+  />
+{/each}
+
+<div
+  class="flowdrop-atom-node"
+  class:flowdrop-atom-node--selected={selected}
+  class:flowdrop-atom-node--processing={isProcessing}
+  class:flowdrop-atom-node--error={isError}
+  class:flowdrop-atom-node--empty={display.empty}
+  class:flowdrop-atom-node--rect={isRect}
+  style={nodeStyle}
+  onclick={openConfig}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+>
+  {#if atomCfg.prefix && !display.empty}
+    <span class="flowdrop-atom-node__prefix" aria-hidden="true">{atomCfg.prefix}</span>
+  {/if}
+  <span class="flowdrop-atom-node__body" title={display.text}>{display.text}</span>
+</div>
+
+{#each outPorts as port, index}
+  <Handle
+    type="source"
+    position={Position.Right}
+    id={`${nodeId}-output-${port.id}`}
+    style="--fd-handle-fill: var(--fd-port-skin-color, {getDataTypeColor(
+      port.dataType
+    )}); top: {portTopPct(index, outPorts.length)}%;"
+  />
+{/each}
+
+<style>
+  .flowdrop-atom-node {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: fit-content;
+    min-width: 2rem;
+    min-height: 28px;
+    padding: 2px var(--fd-space-sm);
+    background-color: var(--fd-card);
+    /* --fd-atom-node-color is set inline only when the server provides a color;
+       otherwise it falls back to the neutral border token. */
+    border: 1.5px solid var(--fd-atom-node-color, var(--fd-node-border));
+    border-radius: 999px;
+    box-shadow: var(--fd-shadow-sm);
+    color: var(--fd-foreground);
+    cursor: pointer;
+    transition:
+      box-shadow var(--fd-transition-fast),
+      border-color var(--fd-transition-fast);
+    z-index: 10;
+  }
+
+  .flowdrop-atom-node--rect {
+    border-radius: var(--fd-radius-md);
+  }
+
+  .flowdrop-atom-node:hover {
+    box-shadow: var(--fd-shadow-md);
+    border-color: var(--fd-atom-node-color, var(--fd-node-border-hover));
+  }
+
+  .flowdrop-atom-node--selected {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--fd-atom-node-color, var(--fd-primary)) 30%, transparent),
+      var(--fd-shadow-md);
+    border-color: var(--fd-atom-node-color, var(--fd-primary));
+  }
+
+  .flowdrop-atom-node:focus-visible {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
+  .flowdrop-atom-node--processing {
+    opacity: 0.7;
+  }
+
+  .flowdrop-atom-node--error {
+    border-color: var(--fd-error) !important;
+    background-color: var(--fd-error-muted) !important;
+  }
+
+  .flowdrop-atom-node--empty .flowdrop-atom-node__body {
+    color: var(--fd-muted-foreground);
+    font-style: italic;
+  }
+
+  .flowdrop-atom-node__prefix {
+    flex-shrink: 0;
+    margin-right: 2px;
+    color: var(--fd-muted-foreground);
+    font-size: var(--fd-text-sm);
+    line-height: 1.2;
+  }
+
+  .flowdrop-atom-node__body {
+    /* min-width:0 lets the body ellipsize as a flex sibling of the prefix */
+    min-width: 0;
+    font-size: var(--fd-text-sm);
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* `top` is set inline (dynamic, must beat svelte-flow defaults); transform and
+     stacking live here so the hover rule can compose instead of fighting !important. */
+  :global(.svelte-flow__node-atom .svelte-flow__handle) {
+    --fd-handle-border-color: var(--fd-handle-border);
+    transform: translateY(-50%);
+    z-index: 20 !important;
+    pointer-events: auto !important;
+  }
+
+  :global(.svelte-flow__node-atom .svelte-flow__handle:hover) {
+    transform: translateY(-50%) scale(1.2);
+  }
+</style>