@flowdrop/flowdrop 1.14.0 → 1.15.0

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/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/form/FormAutocomplete.svelte

@@ -309,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);
@@ -353,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);
   }
 
@@ -592,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('');
   });
 
   /**

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>

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

@@ -0,0 +1,26 @@
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.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;
+}
+declare const AtomNode: import("svelte").Component<Props, {}, "">;
+type AtomNode = ReturnType<typeof AtomNode>;
+export default AtomNode;

package/dist/components/playground/Playground.svelte

@@ -143,7 +143,7 @@
             .getMessages(sessionId, {
               since: playgroundService.getLastSequenceNumber() ?? undefined
             })
-            .then((response) => applyServerResponse(response))
+            .then((response) => applyServerResponse(response, sessionId))
             .catch((err) => logger.error('[Playground] Visibility catchup failed:', err));
         }
       }
@@ -257,7 +257,7 @@
       });
       if (token !== loadToken) return;
       playgroundActions.clearMessages();
-      applyServerResponse(response);
+      applyServerResponse(response, sessionId);
       setHasOlder(deriveHasOlder(response));
 
       if (session.status !== 'idle') {
@@ -321,6 +321,11 @@
       const sessionName = `Session ${getSessions().length + 1}`;
       const session = await playgroundService.createSession(workflowId, sessionName);
 
+      // Stop polling the previous (possibly running) session before switching,
+      // mirroring handleSelectSession. Otherwise its next poll keeps the old
+      // 'running' status alive and the new session's chat input stays disabled.
+      playgroundService.stopPolling();
+
       if (onSessionNavigate) {
         onSessionNavigate(session.id);
         return;
@@ -422,7 +427,7 @@
 
     playgroundService.startPolling(
       sessionId,
-      (response) => applyServerResponse(response),
+      (response) => applyServerResponse(response, sessionId),
       pollingInterval,
       overrideShouldStopPolling ?? config.shouldStopPolling,
       initialSequenceNumber
@@ -437,7 +442,7 @@
       const response = await playgroundService.getMessages(sessionId, {
         since: playgroundService.getLastSequenceNumber() ?? undefined
       });
-      applyServerResponse(response);
+      applyServerResponse(response, sessionId);
       if (response.sessionStatus === 'running' && !playgroundService.isPolling()) {
         startPolling(sessionId, true);
       }
@@ -458,7 +463,7 @@
       const response = await playgroundService.getMessages(sessionId, {
         since: playgroundService.getLastSequenceNumber() ?? undefined
       });
-      applyServerResponse(response);
+      applyServerResponse(response, sessionId);
     } catch (err) {
       logger.error('[Playground] Failed to refresh after interrupt:', err);
     }

package/dist/helpers/proximityConnect.d.ts

@@ -19,8 +19,11 @@ export interface ProximityEdgeCandidate {
 export declare class ProximityConnectHelper {
     /**
      * Get ALL ports (static + dynamic + gateway branches) for a node.
+     *
+     * Only reads `type` and `data`, so callers can pass a full node or a lighter
+     * slice (e.g. a renderer that has metadata + config but no position/measured).
      */
-    static getAllPorts(node: WorkflowNodeType, direction: 'input' | 'output'): NodePort[];
+    static getAllPorts(node: Pick<WorkflowNodeType, 'type' | 'data'>, direction: 'input' | 'output'): NodePort[];
     /**
      * Build handle ID in the standard format.
      */

package/dist/helpers/proximityConnect.js

@@ -13,12 +13,28 @@ const PROXIMITY_EDGE_CLASS = 'flowdrop--edge--proximity-preview';
 export class ProximityConnectHelper {
     /**
      * Get ALL ports (static + dynamic + gateway branches) for a node.
+     *
+     * Only reads `type` and `data`, so callers can pass a full node or a lighter
+     * slice (e.g. a renderer that has metadata + config but no position/measured).
      */
     static getAllPorts(node, direction) {
         // Static ports from metadata
-        const staticPorts = direction === 'output'
+        let staticPorts = direction === 'output'
             ? (node.data?.metadata?.outputs ?? [])
             : (node.data?.metadata?.inputs ?? []);
+        // Atom value-type binding: the bound output port's dataType follows a config
+        // field (e.g. Constant's `valueType`), so connection validation matches the
+        // type the user actually picked. Derived on read — never stored redundantly.
+        if (direction === 'output') {
+            const atom = node.data?.metadata?.extensions?.ui?.atom;
+            const boundType = atom?.valueTypeKey
+                ? node.data?.config?.[atom.valueTypeKey]
+                : undefined;
+            if (boundType) {
+                const portId = atom?.outputPortId ?? staticPorts[0]?.id;
+                staticPorts = staticPorts.map((p) => (p.id === portId ? { ...p, dataType: boundType } : p));
+            }
+        }
         // Dynamic ports from config
         const dynamicKey = direction === 'output' ? 'dynamicOutputs' : 'dynamicInputs';
         const rawDynamic = node.data?.config?.[dynamicKey] ?? [];