@flowdrop/flowdrop 1.14.0 → 2.0.0-beta.1

package/dist/types/index.d.ts

@@ -202,13 +202,13 @@ export declare function dynamicPortToNodePort(port: DynamicPort, portType: 'inpu
  * Built-in node types for explicit component rendering.
  * These are the node types that ship with FlowDrop.
  */
-export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'tool' | 'gateway' | 'terminal' | 'default';
+export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'atom' | 'tool' | 'gateway' | 'terminal' | 'default';
 /**
  * Node type for component rendering.
  * Includes built-in types and allows custom registered types.
  *
  * Built-in types: note, simple, square, tool, gateway, terminal, default
- * Custom types: Any string registered via nodeComponentRegistry
+ * Custom types: Any string registered via fd.nodes
  *
  * @example
  * ```typescript
@@ -306,8 +306,13 @@ export interface AutocompleteConfig {
      * If the "account" field currently holds "my-jira", the URL becomes:
      * /api/jira/issue-types?account=my-jira&q=...
      *
-     * When any dependency field changes, the autocomplete clears its
-     * current value and invalidates the suggestion cache.
+     * When a dependency field changes, the component invalidates its cached
+     * suggestions and aborts any in-flight fetch. The dependent field's own
+     * value is cleared by the parent form (`ConfigForm` / `SchemaForm`) on
+     * user-driven edits only — undo/redo, programmatic value replacement, and
+     * collaborative edits flow in via props and preserve dependent values.
+     * Standalone consumers of `FormAutocomplete` outside a FlowDrop form
+     * therefore need to clear dependents themselves.
      */
     params?: Record<string, string>;
 }
@@ -495,9 +500,39 @@ export interface ConfigEditOptions {
  * UI-related extension settings for nodes
  * Used to control visual behavior in the workflow editor
  */
+/**
+ * Display/behavior config for minimalist "atom" nodes (Constant, Cast, …).
+ * Lives under `extensions.ui.atom`. The atom renderer reads it to decide what to
+ * show, and `getAllPorts` reads `valueTypeKey` to drive the bound output port's
+ * dataType from config so connection validation stays correct.
+ */
+export interface AtomUIConfig {
+    /** Config key whose value becomes the node body. Falls back to `data.label`. */
+    valueKey?: string;
+    /**
+     * Config key holding the selected value's type (a port dataType id).
+     * The bound output port adopts this dataType.
+     */
+    valueTypeKey?: string;
+    /** Output port id driven by `valueTypeKey`. Defaults to the first output port. */
+    outputPortId?: string;
+    /** Body shape. `'pill'` (default) is fully rounded; `'rectangle'` is lightly rounded. */
+    shape?: 'pill' | 'rectangle';
+    /**
+     * Dimmed affordance rendered before the body (e.g. `'→ '` to mark a transform).
+     * Stays visible while the body value ellipsizes. Hidden in the empty state.
+     */
+    prefix?: string;
+    /** Text shown (dimmed) when the resolved body value is empty/unset. */
+    placeholder?: string;
+    /** Max body width in px before the label ellipsizes. */
+    maxWidth?: number;
+}
 export interface NodeUIExtensions {
     /** Show/hide unconnected handles (ports) to reduce visual noise */
     hideUnconnectedHandles?: boolean;
+    /** Display/behavior config for minimalist atom nodes (Constant, Cast, …) */
+    atom?: AtomUIConfig;
     /**
      * Visual-only port display order (no effect on execution).
      * Arrays of port IDs in the desired render order.
@@ -1153,8 +1188,9 @@ export interface Workflow {
     description?: string;
     nodes: WorkflowNode[];
     edges: WorkflowEdge[];
-    metadata?: {
-        version: string;
+    metadata: {
+        /** Workflow schema format version — identifies the document format, not the workflow's own revision. */
+        schemaVersion: string;
         createdAt: string;
         updatedAt: string;
         author?: string;
@@ -1208,6 +1244,31 @@ export interface PipelineViewDef {
     /** Svelte component that receives PipelineViewProps */
     component: Component<PipelineViewProps>;
 }
+/**
+ * One job execution of a node within a pipeline run.
+ *
+ * Loop-orchestrated workflows create one job per iteration for the same
+ * node (labels carry an iteration suffix, e.g. "Invoke tool #2"), so a node
+ * can have several of these per run.
+ */
+export interface NodeJobExecution {
+    /** Job entity ID */
+    id?: string;
+    /** Job label, carries the iteration suffix (e.g. "Invoke tool #2") */
+    label?: string;
+    /** Job status */
+    status: NodeExecutionStatus;
+    /** ISO timestamp the job started, if it ran */
+    started?: string;
+    /** ISO timestamp the job completed, if it finished */
+    completed?: string;
+    /** Execution duration in milliseconds, if the job ran to completion */
+    executionTime?: number;
+    /** Precise execution duration in microseconds, when the backend provides it */
+    executionTimeUs?: number;
+    /** Error message if the job failed */
+    error?: string;
+}
 /**
  * Node execution tracking information
  */
@@ -1220,12 +1281,16 @@ export interface NodeExecutionInfo {
     lastExecuted?: string;
     /** Last execution duration in milliseconds */
     lastExecutionDuration?: number;
+    /** Precise last execution duration in microseconds, when the backend provides it */
+    lastExecutionDurationUs?: number;
     /** Last error message if execution failed */
     lastError?: string;
     /** Whether the node is currently being executed */
     isExecuting: boolean;
     /** Execution output data (e.g., active branches for gateway nodes) */
     output?: Record<string, unknown>;
+    /** Per-job execution history (loop iterations), in pipeline order */
+    jobs?: NodeJobExecution[];
 }
 /**
  * Workflow execution status

package/dist/types/navbar.d.ts

@@ -11,4 +11,11 @@ export interface NavbarAction {
     onclick?: (event: Event) => void;
     /** If true, opens link in new tab with `rel="noopener noreferrer"`. */
     external?: boolean;
+    /**
+     * Optional group label. Items sharing the same `group` cluster together
+     * under a header inside the flyout dropdown. Ungrouped items render first.
+     * Group order follows first occurrence in the array. Ignored when the
+     * navbar is in split mode (the inline row of buttons).
+     */
+    group?: string;
 }

package/dist/types/playground.d.ts

@@ -376,11 +376,26 @@ export interface PlaygroundConfig {
      */
     showSidebar?: boolean;
     /**
-     * Whether to show the session header bar (default: true)
-     * When false, the header with session name and close button is hidden.
-     * Typically used together with showSidebar: false for minimal UI.
+     * Whether to show the ControlPanel header bar (default: true)
+     * When false, hides the entire header row: session label, session chip
+     * (with its New Session / session list popover) and the toolbar actions
+     * (Pipeline / Refresh / Logs). Use for a minimal, locked-down playground.
      */
     showSessionHeader?: boolean;
+    /**
+     * Whether to show the "New Session" entry in the session chip popover
+     * (default: true). When false, users cannot create additional sessions
+     * from the UI — useful for single-session playground embeds.
+     * No effect when showSessionHeader is false.
+     */
+    showNewSessionButton?: boolean;
+    /**
+     * Whether to show the session chip selector and its session list (default:
+     * true). When false, the chip dropdown is hidden entirely — users cannot
+     * switch sessions or see other sessions. Useful for locking a playground
+     * embed to a single session. No effect when showSessionHeader is false.
+     */
+    showSessionList?: boolean;
     /**
      * Determines if polling should stop for a given session status.
      * Override to customize which statuses pause polling.

package/dist/types/settings.d.ts

@@ -72,6 +72,19 @@ export interface BehaviorSettings {
     autoSave: boolean;
     /** Auto-save interval in milliseconds */
     autoSaveInterval: number;
+    /**
+     * Persist workflow drafts in browser storage.
+     *
+     * When enabled (default), unsaved changes are written to browser storage
+     * so they survive page reloads. On the default `localStorage` backend,
+     * drafts remain stored on the device even after the tab or browser is
+     * closed, until they are saved or cleared. Turning this off stops draft
+     * writes and removes the current draft.
+     *
+     * Caveat: the toggle applies per tab. Other tabs that are already open
+     * read settings at load time and keep writing drafts until reloaded.
+     */
+    storeDraftsInBrowser: boolean;
     /** Maximum number of undo history entries */
     undoHistoryLimit: number;
     /** Show confirmation dialog before deleting nodes */

package/dist/types/settings.js

@@ -70,6 +70,7 @@ export const DEFAULT_UI_SETTINGS = {
 export const DEFAULT_BEHAVIOR_SETTINGS = {
     autoSave: false,
     autoSaveInterval: 30000,
+    storeDraftsInBrowser: true,
     undoHistoryLimit: 50,
     confirmDelete: false,
     chatAutoRetry: true

package/dist/utils/colors.d.ts

@@ -4,6 +4,8 @@
  * Uses BEM syntax for CSS classes
  */
 import type { NodeCategory, PortDataTypeConfig } from '../types/index.js';
+import type { PortCompatibilityChecker } from './connections.js';
+import type { CategoriesStore } from '../stores/categoriesStore.svelte.js';
 /**
  * Category color mapping to design tokens (CSS variables)
  * Uses --fd-node-* tokens from tokens.css
@@ -14,20 +16,27 @@ export declare const CATEGORY_COLOR_TOKENS: Record<string, string>;
  * 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.
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
+ * @param category - The node category
  */
-export declare function getCategoryColorToken(category: NodeCategory): string;
+export declare function getCategoryColorToken(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get the reference color token for a data type (configurable version)
+ * @param checker - The instance's port compatibility checker (provides data-type config)
+ * @param dataType - The data type
  */
-export declare function getDataTypeColorToken(dataType: string): string;
+export declare function getDataTypeColorToken(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Get data type configuration from port config
+ * @param checker - The instance's port compatibility checker
+ * @param dataType - The data type
  */
-export declare function getDataTypeConfig(dataType: string): PortDataTypeConfig | undefined;
+export declare function getDataTypeConfig(checker: PortCompatibilityChecker, dataType: string): PortDataTypeConfig | undefined;
 /**
  * Get all available data types from port configuration
+ * @param checker - The instance's port compatibility checker
  */
-export declare function getAvailableDataTypes(): PortDataTypeConfig[];
+export declare function getAvailableDataTypes(checker: PortCompatibilityChecker): PortDataTypeConfig[];
 /**
  * Default colors for fallback cases
  */
@@ -39,43 +48,49 @@ export declare const DEFAULT_COLORS: {
 };
 /**
  * Get category colors
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The color configuration for the category
  */
-export declare function getCategoryColors(category: NodeCategory): string;
+export declare function getCategoryColors(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category background color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The background color class
  */
-export declare function getCategoryBackground(category: NodeCategory): string;
+export declare function getCategoryBackground(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category accent color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The accent color class
  */
-export declare function getCategoryAccent(category: NodeCategory): string;
+export declare function getCategoryAccent(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category text color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The text color class
  */
-export declare function getCategoryText(category: NodeCategory): string;
+export declare function getCategoryText(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category border color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The border color class
  */
-export declare function getCategoryBorder(category: NodeCategory): string;
+export declare function getCategoryBorder(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get node colors based on category and state
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The color configuration object
  */
-export declare function getNodeColors(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): {
+export declare function getNodeColors(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): {
     background: string;
     accent: string;
     text: string;
@@ -83,52 +98,58 @@ export declare function getNodeColors(category: NodeCategory, isError?: boolean,
 };
 /**
  * Get node background color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The background color
  */
-export declare function getNodeBackground(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeBackground(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get node accent color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The accent color
  */
-export declare function getNodeAccent(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeAccent(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get node text color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The text color
  */
-export declare function getNodeText(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeText(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get node border color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The border color
  */
-export declare function getNodeBorder(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeBorder(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get data type color
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @returns The color for the data type
  */
-export declare function getDataTypeColor(dataType: string): string;
+export declare function getDataTypeColor(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Parse typed array notation and get display information
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type (e.g., "string[]", "number", "object[]")
  * @returns Object with display information
  */
-export declare function parseDataTypeDisplay(dataType: string): {
+export declare function parseDataTypeDisplay(checker: PortCompatibilityChecker, dataType: string): {
     baseType: string;
     isArray: boolean;
     displayName: string;
@@ -136,10 +157,11 @@ export declare function parseDataTypeDisplay(dataType: string): {
 };
 /**
  * Get formatted display text for a data type
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @returns Formatted display text
  */
-export declare function getDataTypeDisplayText(dataType: string): string;
+export declare function getDataTypeDisplayText(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Check if a data type represents an array
  * @param dataType - The data type
@@ -191,30 +213,34 @@ export declare function getContrastTextColor(backgroundColor: string): string;
 export declare function resolveColorToken(token: string): string;
 /**
  * Get the appropriate contrast text color for a data type badge
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type (e.g., "array", "string", "number")
  * @returns CSS color value for text that provides good contrast on the data type's background
  */
-export declare function getContrastTextColorForDataType(dataType: string): string;
+export declare function getContrastTextColorForDataType(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Get the appropriate contrast text color for a category badge
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns CSS color value for text that provides good contrast on the category's background
  */
-export declare function getContrastTextColorForCategory(category: NodeCategory): string;
+export declare function getContrastTextColorForCategory(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get a semi-transparent tinted background color for ports
  * Creates a cohesive look with the icon wrapper styling
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @param opacity - Opacity percentage (default 25%)
  * @returns CSS color-mix expression for the tinted background
  */
-export declare function getPortBackgroundColor(dataType: string, opacity?: number): string;
+export declare function getPortBackgroundColor(checker: PortCompatibilityChecker, dataType: string, opacity?: number): string;
 /**
  * Get the border color for ports (solid data type color)
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @returns CSS color value for the port border
  */
-export declare function getPortBorderColor(dataType: string): string;
+export declare function getPortBorderColor(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Convert RGB components to hex color string
  * @param r - Red component (0-255)