@flowdrop/flowdrop 1.4.0 → 1.5.0

package/README.md

@@ -2,14 +2,16 @@
   <img src="https://raw.githubusercontent.com/flowdrop-io/flowdrop/main/libs/flowdrop/static/logo.svg" alt="FlowDrop" width="120" />
 </p>
 
-<h1 align="center">FlowDrop</h1>
+<h1 align="center">FlowDrop™</h1>
 
 <p align="center">
-  <img src="https://img.shields.io/github/actions/workflow/status/flowdrop-io/flowdrop/docker-publish.yml?style=flat-square&label=Build" alt="GitHub pages build status" />
+  <img src="https://img.shields.io/github/actions/workflow/status/flowdrop-io/flowdrop/docker-publish.yml?style=flat-square&label=Build" alt="GitHub build status" />
   <a href="https://www.npmjs.com/package/@flowdrop/flowdrop"><img src="https://img.shields.io/npm/v/@flowdrop/flowdrop?style=flat-square" alt="npm" /></a>
   <img src="https://img.shields.io/npm/unpacked-size/%40flowdrop%2Fflowdrop?style=flat-square" alt="NPM Unpacked Size" />
   <img src="https://img.shields.io/npm/types/@flowdrop/flowdrop?style=flat-square" alt="npm type definitions" />
-  <a href="http://npmjs.com/package/@flowdrop/flowdrop"><img src="https://img.shields.io/npm/dt/@flowdrop/flowdrop.svg?maxAge=2592000&style=flat-square" alt="npm downloads" /></a>
+  <a href="http://npmjs.com/package/@flowdrop/flowdrop"><img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40flowdrop%2Fflowdrop"></a>
+  
+
 </p>
 
 <p align="center">
@@ -22,10 +24,10 @@
 </p>
 
 <p align="center">
-  <a href="#quickstart">Quickstart</a> •
+  <a href="https://docs.flowdrop.io/getting-started/installation">Quickstart</a> •
   <a href="#features">Features</a> •
   <a href="#integration">Integration</a> •
-  <a href="#documentation">Docs</a>
+  <a href="https://docs.flowdrop.io">Docs</a>
 </p>
 
 <p align="center">
@@ -70,12 +72,12 @@ You get a production-ready workflow UI. You keep full control of everything else
 
 |                              |                                                                           |
 | ---------------------------- | ------------------------------------------------------------------------- |
-| 🎨 **Visual Editor Only**    | Pure UI component. No hidden backend, no external dependencies            |
-| 🔐 **You Own Everything**    | Your data, your servers, your orchestration logic, your security policies |
-| 🔌 **Backend Agnostic**      | Connect to any API: Drupal, Laravel, Express, FastAPI, or your own        |
-| 🧩 **7 Built-in Node Types** | From simple icons to complex gateway logic                                |
-| 🎭 **Framework Flexible**    | Use as Svelte component or mount into React, Vue, Angular, or vanilla JS  |
-| 🐳 **Deploy Anywhere**       | Runtime config means build once, deploy everywhere                        |
+| **Visual Editor Only**    | Pure UI component. No hidden backend, no external dependencies            |
+| **You Own Everything**    | Your data, your servers, your orchestration logic, your security policies |
+| **Backend Agnostic**      | Connect to any API: Drupal, Laravel, Express, FastAPI, or your own        |
+| **8 Built-in Node Types** | From simple icons to complex gateway logic                                |
+| **Framework Flexible**    | Use as Svelte component or mount into React, Vue, Angular, or vanilla JS  |
+| **Deploy Anywhere**       | Runtime config means build once, deploy everywhere                        |
 
 ## Architecture Notes
 
@@ -85,7 +87,7 @@ You get a production-ready workflow UI. You keep full control of everything else
 
 ## Node Types
 
-FlowDrop ships with 7 beautifully designed node types:
+FlowDrop ships with 8 beautifully designed node types:
 
 | Type       | Purpose                                 |
 | ---------- | --------------------------------------- |
@@ -96,6 +98,7 @@ FlowDrop ships with 7 beautifully designed node types:
 | `gateway`  | Conditional branching logic             |
 | `terminal` | Start/end workflow points               |
 | `note`     | Markdown documentation blocks           |
+| `idea`     | Conceptual BPMN-like flow nodes         |
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/flowdrop-io/flowdrop/main/libs/flowdrop/static/Node-Types.jpg" alt="FlowDrop Node Types" width="800" />
@@ -104,6 +107,49 @@ FlowDrop ships with 7 beautifully designed node types:
   <em>From simple triggers to complex branching logic, each node type is designed for specific workflow patterns.</em>
 </p>
 
+## Themes
+
+FlowDrop includes a theme system with built-in light/dark support:
+
+```svelte
+<script lang="ts">
+  import { WorkflowEditor } from "@flowdrop/flowdrop";
+  import "@flowdrop/flowdrop/styles";
+</script>
+
+<!-- Built-in themes: 'default' or 'minimal' -->
+<WorkflowEditor theme="minimal" />
+```
+
+Themes bundle a visual skin (CSS token palette) with behavioral UI defaults. You can also pass a custom theme object with your own skin tokens for full control over the light and dark palettes.
+
+```javascript
+// Via the mount API
+const app = await mountFlowDropApp(container, {
+  theme: "minimal",
+  // or a custom theme object:
+  // theme: { name: 'minimal', skin: { tokens: { primary: '#e11d48' } } }
+});
+```
+
+## Sub-Module Exports
+
+FlowDrop provides tree-shakeable sub-module exports so you can import only what you need:
+
+| Export Path | Contents |
+| --- | --- |
+| `@flowdrop/flowdrop` | Full library (components, stores, services, types) |
+| `@flowdrop/flowdrop/core` | Types and utilities only (no heavy dependencies) |
+| `@flowdrop/flowdrop/editor` | WorkflowEditor, stores, services |
+| `@flowdrop/flowdrop/form` | SchemaForm, form fields, registry |
+| `@flowdrop/flowdrop/form/code` | Code editor field (CodeMirror) |
+| `@flowdrop/flowdrop/form/markdown` | Markdown editor field |
+| `@flowdrop/flowdrop/display` | MarkdownDisplay component |
+| `@flowdrop/flowdrop/playground` | Playground components and services |
+| `@flowdrop/flowdrop/settings` | SettingsPanel, stores, services |
+| `@flowdrop/flowdrop/styles` | Base CSS stylesheet |
+| `@flowdrop/flowdrop/schema` | Workflow JSON schema |
+
 ## Integration
 
 ### Svelte (Native)
@@ -173,8 +219,7 @@ Connect to any backend in seconds:
 ```typescript
 import { createEndpointConfig } from "@flowdrop/flowdrop";
 
-const config = createEndpointConfig({
-  baseUrl: "https://api.example.com",
+const config = createEndpointConfig("https://api.example.com", {
   endpoints: {
     nodes: { list: "/nodes", get: "/nodes/{id}" },
     workflows: {
@@ -185,20 +230,19 @@ const config = createEndpointConfig({
       execute: "/workflows/{id}/execute",
     },
   },
-  auth: { type: "bearer", token: "your-token" },
 });
 ```
 
 ## Customization
 
-Make it yours with CSS custom properties:
+The recommended way to customize FlowDrop's appearance is through the [theme system](#themes). For fine-grained control, you can also override individual CSS custom properties:
 
 ```css
 :root {
-  --flowdrop-background-color: #0a0a0a;
-  --flowdrop-primary-color: #6366f1;
-  --flowdrop-border-color: #27272a;
-  --flowdrop-text-color: #fafafa;
+  --fd-background: #0a0a0a;
+  --fd-primary: #6366f1;
+  --fd-border: #27272a;
+  --fd-foreground: #fafafa;
 }
 ```
 
@@ -225,10 +269,9 @@ Runtime configuration means you build once and deploy to staging, production, or
 
 | Resource                                                     | Description              |
 | ------------------------------------------------------------ | ------------------------ |
-| [API Documentation](https://flowdrop-io.github.io/flowdrop/) | REST API specification   |
-| [Docker Guide](../../apps/example-client-docker/README.md)   | Docker deployment guide  |
-| [QUICK_START.md](./QUICK_START.md)                           | Get running in 5 minutes |
-| [CHANGELOG.md](./CHANGELOG.md)                               | Version history          |
+| [QUICK_START.md](https://docs.flowdrop.io/getting-started/installation/)                           | Get running in 5 minutes |
+| [API Documentation](https://api.flowdrop.io/v1/) | REST API specification   |
+| [CHANGELOG.md](https://github.com/flowdrop-io/flowdrop/blob/main/libs/flowdrop/CHANGELOG.md) | Version history          |
 
 ## Development
 
@@ -237,6 +280,7 @@ pnpm install         # Install dependencies
 pnpm dev             # Start dev server
 pnpm build           # Build library
 pnpm test            # Run all tests
+pnpm storybook       # Launch Storybook
 ```
 
 ## Contributing

package/dist/adapters/WorkflowAdapter.js

@@ -14,27 +14,7 @@
  * - Systems that need to generate or modify workflows programmatically
  */
 import { v4 as uuidv4 } from "uuid";
-/**
- * Generate a unique node ID based on node type and existing nodes
- * Format: <node_type>.<number>
- * Example: boolean_gateway.1, calculator.2
- */
-function generateStandardNodeId(nodeTypeId, existingNodes) {
-    // Count how many nodes of this type already exist
-    const existingNodeIds = existingNodes
-        .filter((node) => node.data?.metadata?.id === nodeTypeId)
-        .map((node) => node.id);
-    // Extract the numbers from existing IDs with the same prefix
-    const existingNumbers = existingNodeIds
-        .map((id) => {
-        const match = id.match(new RegExp(`^${nodeTypeId}\\.(\\d+)$`));
-        return match ? parseInt(match[1], 10) : 0;
-    })
-        .filter((num) => num > 0);
-    // Find the next available number (highest + 1)
-    const nextNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
-    return `${nodeTypeId}.${nextNumber}`;
-}
+import { generateNodeId } from "../utils/nodeIds.js";
 /**
  * Workflow Adapter Class
  * Provides a clean API for workflow operations without exposing SvelteFlow internals
@@ -70,7 +50,7 @@ export class WorkflowAdapter {
             throw new Error(`Node type '${nodeType}' not found`);
         }
         // Generate node ID based on node type and existing nodes
-        const nodeId = generateStandardNodeId(nodeType, workflow.nodes);
+        const nodeId = generateNodeId(nodeType, workflow.nodes);
         const node = {
             id: nodeId,
             type: nodeType,

package/dist/adapters/agentspec/autoLayout.d.ts

@@ -10,25 +10,71 @@
  * 4. Fan out branches vertically from BranchingNode
  */
 import type { AgentSpecFlow } from "../../types/agentspec.js";
+/** Measured dimensions for a node */
+export interface NodeDimensions {
+    width: number;
+    height: number;
+}
 /** Layout configuration */
 export interface AutoLayoutConfig {
-    /** Horizontal spacing between layers (px) */
-    horizontalSpacing: number;
-    /** Vertical spacing between nodes in the same layer (px) */
-    verticalSpacing: number;
+    /** Minimum horizontal gap between the right edge of one layer and the left edge of the next (px) */
+    horizontalGap: number;
+    /** Minimum vertical gap between the bottom edge of one node and the top edge of the next in the same layer (px) */
+    verticalGap: number;
     /** Starting X position */
     startX: number;
     /** Starting Y position */
     startY: number;
+    /** Fallback node width when measured dimensions are unavailable */
+    defaultNodeWidth: number;
+    /** Fallback node height when measured dimensions are unavailable */
+    defaultNodeHeight: number;
 }
 /**
  * Compute node positions for an Agent Spec flow using layered layout.
+ * Takes actual node dimensions into account to prevent overlap.
  *
  * @param flow - The Agent Spec flow to layout
  * @param config - Optional layout configuration
+ * @param nodeDimensions - Optional map of node name to measured {width, height}
  * @returns Map of node name to {x, y} position
  */
-export declare function computeAutoLayout(flow: AgentSpecFlow, config?: Partial<AutoLayoutConfig>): Map<string, {
+export declare function computeAutoLayout(flow: AgentSpecFlow, config?: Partial<AutoLayoutConfig>, nodeDimensions?: Map<string, NodeDimensions>): Map<string, {
+    x: number;
+    y: number;
+}>;
+/** Input position for beautify: existing node placement */
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+/** Beautify configuration */
+export interface BeautifyLayoutConfig {
+    /** Minimum horizontal gap between the right edge of one column and the left edge of the next (px) */
+    horizontalGap: number;
+    /** Minimum vertical gap between the bottom edge of one node and the top edge of the next in the same column (px) */
+    verticalGap: number;
+    /** Fallback node width when measured dimensions are unavailable */
+    defaultNodeWidth: number;
+    /** Fallback node height when measured dimensions are unavailable */
+    defaultNodeHeight: number;
+}
+/**
+ * Beautify existing node positions: preserve relative column/row ordering
+ * but apply uniform spacing based on actual node dimensions.
+ *
+ * Algorithm:
+ * 1. Cluster nodes into columns by X proximity (gap threshold = median width)
+ * 2. Sort columns left-to-right by their median X
+ * 3. Within each column, sort nodes top-to-bottom by their original Y
+ * 4. Re-position with uniform horizontal and vertical gaps
+ *
+ * @param positions - Current node positions (keyed by node id)
+ * @param config - Optional spacing configuration
+ * @param nodeDimensions - Optional map of node id to measured {width, height}
+ * @returns Map of node id to new {x, y} position
+ */
+export declare function computeBeautifyLayout(positions: Map<string, NodePosition>, config?: Partial<BeautifyLayoutConfig>, nodeDimensions?: Map<string, NodeDimensions>): Map<string, {
     x: number;
     y: number;
 }>;

package/dist/adapters/agentspec/autoLayout.js

@@ -10,36 +10,41 @@
  * 4. Fan out branches vertically from BranchingNode
  */
 const DEFAULT_CONFIG = {
-    horizontalSpacing: 300,
-    verticalSpacing: 150,
+    horizontalGap: 120,
+    verticalGap: 40,
     startX: 100,
     startY: 100,
+    defaultNodeWidth: 220,
+    defaultNodeHeight: 150,
 };
 /**
  * Compute node positions for an Agent Spec flow using layered layout.
+ * Takes actual node dimensions into account to prevent overlap.
  *
  * @param flow - The Agent Spec flow to layout
  * @param config - Optional layout configuration
+ * @param nodeDimensions - Optional map of node name to measured {width, height}
  * @returns Map of node name to {x, y} position
  */
-export function computeAutoLayout(flow, config = {}) {
+export function computeAutoLayout(flow, config = {}, nodeDimensions) {
     const cfg = { ...DEFAULT_CONFIG, ...config };
     const positions = new Map();
     if (flow.nodes.length === 0)
         return positions;
+    const getDims = (name) => nodeDimensions?.get(name) ?? {
+        width: cfg.defaultNodeWidth,
+        height: cfg.defaultNodeHeight,
+    };
     // Build adjacency list from control-flow edges
     const adjacency = new Map();
-    const inDegree = new Map();
     for (const node of flow.nodes) {
         adjacency.set(node.name, []);
-        inDegree.set(node.name, 0);
     }
     for (const edge of flow.control_flow_connections) {
         const neighbors = adjacency.get(edge.from_node);
         if (neighbors) {
             neighbors.push(edge.to_node);
         }
-        inDegree.set(edge.to_node, (inDegree.get(edge.to_node) || 0) + 1);
     }
     // Also consider data-flow edges for connectivity (but don't affect layering priority)
     if (flow.data_flow_connections) {
@@ -74,21 +79,118 @@ export function computeAutoLayout(flow, config = {}) {
     }
     // Sort layers and assign positions
     const sortedLayers = Array.from(layerGroups.keys()).sort((a, b) => a - b);
+    // Compute X positions layer by layer, using the widest node in each layer
+    const layerXPositions = new Map();
+    let currentX = cfg.startX;
     for (const layerIndex of sortedLayers) {
+        layerXPositions.set(layerIndex, currentX);
+        // Advance X by the widest node in this layer + horizontal gap
         const nodesInLayer = layerGroups.get(layerIndex);
-        const x = cfg.startX + layerIndex * cfg.horizontalSpacing;
-        // Center nodes vertically
-        const totalHeight = (nodesInLayer.length - 1) * cfg.verticalSpacing;
-        const startY = cfg.startY - totalHeight / 2;
+        const maxWidth = Math.max(...nodesInLayer.map((name) => getDims(name).width));
+        currentX += maxWidth + cfg.horizontalGap;
+    }
+    // Compute Y positions within each layer, using actual node heights
+    for (const layerIndex of sortedLayers) {
+        const nodesInLayer = layerGroups.get(layerIndex);
+        const x = layerXPositions.get(layerIndex);
+        // Calculate total height of this column (sum of node heights + gaps)
+        const heights = nodesInLayer.map((name) => getDims(name).height);
+        const totalHeight = heights.reduce((sum, h) => sum + h, 0) +
+            (nodesInLayer.length - 1) * cfg.verticalGap;
+        // Center the column vertically around startY
+        let y = cfg.startY - totalHeight / 2;
         for (let i = 0; i < nodesInLayer.length; i++) {
-            positions.set(nodesInLayer[i], {
-                x,
-                y: startY + i * cfg.verticalSpacing,
-            });
+            positions.set(nodesInLayer[i], { x, y });
+            y += heights[i] + cfg.verticalGap;
         }
     }
     return positions;
 }
+const DEFAULT_BEAUTIFY_CONFIG = {
+    horizontalGap: 120,
+    verticalGap: 40,
+    defaultNodeWidth: 220,
+    defaultNodeHeight: 150,
+};
+/**
+ * Beautify existing node positions: preserve relative column/row ordering
+ * but apply uniform spacing based on actual node dimensions.
+ *
+ * Algorithm:
+ * 1. Cluster nodes into columns by X proximity (gap threshold = median width)
+ * 2. Sort columns left-to-right by their median X
+ * 3. Within each column, sort nodes top-to-bottom by their original Y
+ * 4. Re-position with uniform horizontal and vertical gaps
+ *
+ * @param positions - Current node positions (keyed by node id)
+ * @param config - Optional spacing configuration
+ * @param nodeDimensions - Optional map of node id to measured {width, height}
+ * @returns Map of node id to new {x, y} position
+ */
+export function computeBeautifyLayout(positions, config = {}, nodeDimensions) {
+    const cfg = { ...DEFAULT_BEAUTIFY_CONFIG, ...config };
+    const result = new Map();
+    if (positions.size === 0)
+        return result;
+    const getDims = (id) => nodeDimensions?.get(id) ?? {
+        width: cfg.defaultNodeWidth,
+        height: cfg.defaultNodeHeight,
+    };
+    // Collect all nodes sorted by X
+    const entries = Array.from(positions.entries()).map(([id, pos]) => ({
+        id,
+        x: pos.x,
+        y: pos.y,
+    }));
+    entries.sort((a, b) => a.x - b.x);
+    // Determine clustering threshold: half the median node width
+    const widths = entries.map((e) => getDims(e.id).width);
+    const sortedWidths = [...widths].sort((a, b) => a - b);
+    const medianWidth = sortedWidths[Math.floor(sortedWidths.length / 2)];
+    const clusterThreshold = medianWidth * 0.75;
+    // Cluster into columns by X proximity
+    const columns = [];
+    let currentColumn = [entries[0]];
+    for (let i = 1; i < entries.length; i++) {
+        const prevX = currentColumn[currentColumn.length - 1].x;
+        if (entries[i].x - prevX > clusterThreshold) {
+            columns.push(currentColumn);
+            currentColumn = [entries[i]];
+        }
+        else {
+            currentColumn.push(entries[i]);
+        }
+    }
+    columns.push(currentColumn);
+    // Sort each column's nodes top-to-bottom by original Y
+    for (const col of columns) {
+        col.sort((a, b) => a.y - b.y);
+    }
+    // Compute the global vertical center from the original positions
+    const allYs = entries.map((e) => e.y);
+    const globalCenterY = (Math.min(...allYs) + Math.max(...allYs)) / 2;
+    // Assign new positions column by column
+    let currentX = entries[0].x; // Start from the leftmost original X
+    for (const col of columns) {
+        // Find the widest node in this column
+        const maxWidth = Math.max(...col.map((e) => getDims(e.id).width));
+        // Calculate total height of this column
+        const heights = col.map((e) => getDims(e.id).height);
+        const totalHeight = heights.reduce((sum, h) => sum + h, 0) +
+            (col.length - 1) * cfg.verticalGap;
+        // Center column vertically around the global center
+        let y = globalCenterY - totalHeight / 2;
+        for (let i = 0; i < col.length; i++) {
+            result.set(col[i].id, { x: currentX, y });
+            y += heights[i] + cfg.verticalGap;
+        }
+        currentX += maxWidth + cfg.horizontalGap;
+    }
+    return result;
+}
+// ============================================================================
+// Layer Assignment (for auto-layout)
+// ============================================================================
 /**
  * Assign layers using longest path from the start node (modified BFS).
  * This ensures branching nodes fan out properly and convergence points
@@ -97,28 +199,23 @@ export function computeAutoLayout(flow, config = {}) {
 function assignLayers(startNode, adjacency, nodeCount) {
     const layers = new Map();
     layers.set(startNode, 0);
-    // Use BFS but take the maximum layer for each node
-    // (longest path ensures proper branching layout)
+    // Longest-path BFS: re-queue neighbors whenever their layer increases.
+    // This ensures convergence nodes (reached via multiple branches) are
+    // placed at the depth of the longest path, not the shortest.
     const queue = [startNode];
-    const visited = new Set();
     let iterations = 0;
     const maxIterations = nodeCount * nodeCount + 100; // Safety limit for cycles
     while (queue.length > 0 && iterations < maxIterations) {
         iterations++;
         const current = queue.shift();
-        if (visited.has(current))
-            continue;
-        visited.add(current);
         const currentLayer = layers.get(current) || 0;
         const neighbors = adjacency.get(current) || [];
         for (const neighbor of neighbors) {
             const existingLayer = layers.get(neighbor);
             const newLayer = currentLayer + 1;
-            // Take the max layer (longest path)
+            // Only update and re-queue when we find a longer path
             if (existingLayer === undefined || newLayer > existingLayer) {
                 layers.set(neighbor, newLayer);
-            }
-            if (!visited.has(neighbor)) {
                 queue.push(neighbor);
             }
         }

package/dist/chat/commandClassifier.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Command Classifier for LLM Chat Interface
+ *
+ * Determines whether a DSL command is read-only or mutating,
+ * so the UI knows which commands can auto-execute and which
+ * need user approval.
+ *
+ * @module chat/commandClassifier
+ */
+/**
+ * Determine whether a DSL command type is mutating (modifies workflow state).
+ *
+ * Read-only commands (list_nodes, list_edges, list_types, info, get_config, help)
+ * return false. All other commands are considered mutating and return true.
+ *
+ * @param commandType - The command type string (e.g., "add", "list_nodes")
+ * @returns true if the command modifies workflow state, false if read-only
+ */
+export declare function isMutatingCommand(commandType: string): boolean;

package/dist/chat/commandClassifier.js

@@ -0,0 +1,30 @@
+/**
+ * Command Classifier for LLM Chat Interface
+ *
+ * Determines whether a DSL command is read-only or mutating,
+ * so the UI knows which commands can auto-execute and which
+ * need user approval.
+ *
+ * @module chat/commandClassifier
+ */
+/** Commands that only read workflow state without modifying it */
+const READ_ONLY_COMMANDS = new Set([
+    "list_nodes",
+    "list_edges",
+    "list_types",
+    "info",
+    "get_config",
+    "help",
+]);
+/**
+ * Determine whether a DSL command type is mutating (modifies workflow state).
+ *
+ * Read-only commands (list_nodes, list_edges, list_types, info, get_config, help)
+ * return false. All other commands are considered mutating and return true.
+ *
+ * @param commandType - The command type string (e.g., "add", "list_nodes")
+ * @returns true if the command modifies workflow state, false if read-only
+ */
+export function isMutatingCommand(commandType) {
+    return !READ_ONLY_COMMANDS.has(commandType);
+}

package/dist/chat/index.d.ts

@@ -0,0 +1,27 @@
+/**
+ * FlowDrop Chat Module
+ *
+ * Provides the LLM Chat Interface for natural language workflow building.
+ * Includes components for chat UI and command preview, utilities for
+ * parsing LLM responses and classifying commands, and all chat types.
+ *
+ * @module chat
+ *
+ * @example In Svelte:
+ * ```svelte
+ * <script>
+ *   import { AIChatPanel } from "@flowdrop/flowdrop/chat";
+ * </script>
+ *
+ * <AIChatPanel
+ *   nodeTypes={nodeTypes}
+ *   workflowId="wf-123"
+ *   onUIAction={handleUIAction}
+ * />
+ * ```
+ */
+export { default as AIChatPanel } from "../components/chat/AIChatPanel.svelte";
+export { default as CommandPreview } from "../components/chat/CommandPreview.svelte";
+export { extractCommands } from "./responseParser.js";
+export { isMutatingCommand } from "./commandClassifier.js";
+export type { ChatMessageRole, ChatHistoryMessage, ChatRequest, ChatResponse, ExtractedCommands, CommandExecutionStatus, CommandPreviewItem, } from "../types/chat.js";

package/dist/chat/index.js

@@ -0,0 +1,32 @@
+/**
+ * FlowDrop Chat Module
+ *
+ * Provides the LLM Chat Interface for natural language workflow building.
+ * Includes components for chat UI and command preview, utilities for
+ * parsing LLM responses and classifying commands, and all chat types.
+ *
+ * @module chat
+ *
+ * @example In Svelte:
+ * ```svelte
+ * <script>
+ *   import { AIChatPanel } from "@flowdrop/flowdrop/chat";
+ * </script>
+ *
+ * <AIChatPanel
+ *   nodeTypes={nodeTypes}
+ *   workflowId="wf-123"
+ *   onUIAction={handleUIAction}
+ * />
+ * ```
+ */
+// ============================================================================
+// Chat Components
+// ============================================================================
+export { default as AIChatPanel } from "../components/chat/AIChatPanel.svelte";
+export { default as CommandPreview } from "../components/chat/CommandPreview.svelte";
+// ============================================================================
+// Chat Utilities
+// ============================================================================
+export { extractCommands } from "./responseParser.js";
+export { isMutatingCommand } from "./commandClassifier.js";

package/dist/chat/responseParser.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Response Parser for LLM Chat Interface
+ *
+ * Extracts DSL commands from LLM markdown responses by parsing
+ * fenced code blocks (```flowdrop or bare ```).
+ *
+ * @module chat/responseParser
+ */
+import type { ExtractedCommands } from "../types/chat.js";
+/**
+ * Extract DSL commands from an LLM response string.
+ *
+ * Parses fenced code blocks labeled `flowdrop` (preferred) or bare
+ * fenced code blocks (fallback). Text outside code blocks becomes
+ * the explanation. Empty lines and comment lines inside code blocks
+ * are skipped.
+ *
+ * @param llmResponse - The raw LLM response text (may contain markdown)
+ * @returns Extracted commands and explanation text
+ */
+export declare function extractCommands(llmResponse: string): ExtractedCommands;