@d34dman/flowdrop 0.0.2 → 0.0.4

package/README.md

@@ -1,385 +1,327 @@
-# FlowDrop - Drupal Workflow Editor
+# FlowDrop
 
-A powerful visual workflow editor for Drupal that enables drag-and-drop creation of complex workflows with AI integration, data processing, and automation capabilities.
+A visual workflow editor component library built with Svelte 5 and @xyflow/svelte. Create complex workflows with drag-and-drop functionality, node-based editing, and configurable API integration.
 
 ## 🚀 Features
 
-- **Visual Workflow Editor**: Drag-and-drop interface for building complex workflows
-- **AI Integration**: OpenAI, Anthropic, and other AI model integrations
-- **Data Processing**: Advanced data manipulation and transformation nodes
-- **HTTP Integration**: Webhook and API request capabilities
-- **File Operations**: Upload, download, and file processing
-- **Conditional Logic**: Advanced branching and decision-making nodes
-- **Real-time Execution**: Live workflow execution with status monitoring
-- **Drupal Native**: Built specifically for Drupal 10/11
+- **Visual Workflow Editor**: Drag-and-drop interface for building node-based workflows
+- **Svelte 5 Components**: Modern, reactive components with runes
+- **Configurable API Client**: Flexible endpoint configuration for backend integration
+- **Node System**: Extensible node types with customizable configuration
+- **Real-time Updates**: Live workflow state management with stores
+- **Framework Agnostic**: Can be integrated into any web application
+- **TypeScript Support**: Full type definitions included
 
-## 📁 Project Structure
+## 📦 Installation
 
+```bash
+npm install @d34dman/flowdrop
 ```
-flowdrop/
-├── src/                          # Core PHP classes
-│   ├── Service/NodeRuntime/      # Node execution engine
-│   ├── Plugin/FlowDropNodeProcessor/  # 25+ node processors
-│   ├── Attribute/                # Plugin discovery attributes
-│   └── Exception/                # Custom exception classes
-├── modules/                      # Drupal sub-modules
-│   ├── flowdrop_workflow/        # Workflow entity management
-│   ├── flowdrop_ui/             # Svelte frontend application
-│   ├── flowdrop_node_type/      # Node type definitions
-│   ├── flowdrop_node_category/  # Node categorization
-│   ├── flowdrop_pipeline/       # Pipeline management
-│   ├── flowdrop_job/           # Job execution system
-│   ├── flowdrop_runner/        # Workflow execution engine
-│   └── flowdrop_ai/            # AI integration features
-├── js/                         # Drupal JavaScript integration
-└── config/                     # Drupal configuration
-```
-
-## 🏗️ Architecture
-
-### Core Components
-
-1. **Plugin System**: Attribute-based discovery of node processors
-2. **Node Runtime**: Execution engine for workflow nodes
-3. **Workflow Engine**: Drupal entity-based workflow management
-4. **Frontend**: Svelte-based visual editor
-5. **API Layer**: RESTful API for workflow operations
-
-### Node Categories
-
-- **AI Models**: OpenAI Chat, Embeddings, HuggingFace
-- **Data Processing**: Calculator, Dataframe Operations, Data Operations
-- **Input/Output**: Text Input, Chat Output, File Upload
-- **HTTP Operations**: URL Fetch, HTTP Request, Webhook
-- **Conditional Logic**: Conditional nodes, Loop operations
-- **Utility**: DateTime, Regex Extractor, Split Text
-- **Storage**: Save to File, Chroma Vector Store
-
-## 🛠️ Installation
-
-### Prerequisites
 
-- Drupal 10 or 11
-- PHP 8.1+
-- Node.js 18+ (for frontend development)
-
-### Installation Steps
-
-1. **Install the module**:
-
-   ```bash
-   # Copy to your Drupal modules directory
-   cp -r flowdrop /path/to/drupal/web/modules/custom/
-   ```
-
-2. **Enable the module**:
-
-   ```bash
-   ddev drush en flowdrop flowdrop_workflow flowdrop_ui
-   ```
-
-3. **Build the frontend**:
-
-   ```bash
-   cd modules/flowdrop_ui/app/flowdrop
-   npm install
-   npm run build:iife
-   ```
+## 📁 Project Structure
 
-4. **Clear Drupal cache**:
-   ```bash
-   ddev drush cr
-   ```
+```
+@d34dman/flowdrop/
+├── dist/                        # Built library files
+│   ├── components/              # Svelte components
+│   ├── types/                   # TypeScript definitions
+│   ├── services/                # API and state management
+│   ├── utils/                   # Utility functions
+│   └── styles/                  # CSS styles
+├── src/                         # Source code
+│   └── lib/                     # Library source
+│       ├── components/          # Svelte components
+│       ├── services/            # Services and APIs
+│       ├── stores/              # State management
+│       └── types/               # Type definitions
+└── api/                         # API documentation
+```
 
 ## 🎯 Usage
 
-### Accessing the Workflow Editor
-
-1. Navigate to `/admin/structure/flowdrop-workflow`
-2. Create a new workflow or edit an existing one
-3. Use the visual editor to build your workflow
-
-### Creating Workflows
-
-1. **Add Nodes**: Drag nodes from the palette to the canvas
-2. **Configure Nodes**: Set parameters and configuration for each node
-3. **Connect Nodes**: Create connections between node inputs and outputs
-4. **Test Execution**: Use the execution panel to test your workflow
-5. **Save & Deploy**: Save your workflow for production use
-
-### Available Node Types
-
-#### AI Models
-
-- **OpenAI Chat**: GPT model integration
-- **OpenAI Embeddings**: Text embedding generation
-- **HuggingFace Embeddings**: Alternative embedding models
-- **Simple Agent**: Basic AI agent implementation
-
-#### Data Processing
-
-- **Calculator**: Mathematical operations
-- **Dataframe Operations**: Advanced data manipulation
-- **Data Operations**: General data processing
-- **Data to Dataframe**: Data format conversion
-
-#### Input/Output
-
-- **Text Input**: User input collection
-- **Text Output**: Display text results
-- **Chat Output**: Chat interface output
-- **File Upload**: File upload handling
-
-#### HTTP & Integration
-
-- **URL Fetch**: HTTP GET requests
-- **HTTP Request**: Full HTTP client
-- **Webhook**: Webhook endpoint handling
-
-#### Logic & Control
-
-- **Conditional**: If/else logic branching
-- **Loop**: Iterative operations
-- **Split Text**: Text segmentation
-
-#### Utility
-
-- **DateTime**: Date/time operations
-- **Regex Extractor**: Pattern matching
-- **Conversation Buffer**: Chat history management
-- **Structured Output**: Formatted output generation
-
-## 🔧 Development
-
-### Adding New Node Types
-
-1. **Create Node Class**:
+### Basic Import
 
-   ```php
-   <?php
-
-   namespace Drupal\flowdrop\Plugin\FlowDropNodeProcessor;
+```javascript
+import { WorkflowEditor } from "@d34dman/flowdrop";
+import "@d34dman/flowdrop/styles/base.css";
+```
 
-   use Drupal\flowdrop\Attribute\FlowDropNodeProcessor;
+### Using the WorkflowEditor Component
+
+```svelte
+<script lang="ts">
+  import { WorkflowEditor } from "@d34dman/flowdrop";
+  import type { NodeMetadata, Workflow } from "@d34dman/flowdrop";
+
+  let nodes: NodeMetadata[] = [
+    {
+      id: "text_input",
+      name: "Text Input",
+      category: "input_output",
+      description: "User input field",
+      inputs: [],
+      outputs: [{ id: "value", name: "Value", type: "output", dataType: "string" }]
+    }
+  ];
+
+  let workflow: Workflow = {
+    id: "workflow_1",
+    name: "My Workflow",
+    nodes: [],
+    edges: []
+  };
+</script>
+
+<WorkflowEditor {nodes} />
+```
 
-   #[FlowDropNodeProcessor(
-     id: "my_custom_node",
-     label: new \Drupal\Core\StringTranslation\TranslatableMarkup("My Custom Node")
-   )]
-   class MyCustomNode extends AbstractFlowDropNodeProcessor {
+### Integration Methods
 
-     public function execute(array $inputs, array $config): array {
-       // Your node logic here
-       return ['result' => 'processed data'];
-     }
+#### 1. As a Svelte Component (Recommended)
 
-     public function getConfigSchema(): array {
-       return [
-         'type' => 'object',
-         'properties' => [
-           'mySetting' => ['type' => 'string'],
-         ],
-       ];
-     }
-   }
-   ```
+```svelte
+<script>
+  import { WorkflowEditor, NodeSidebar } from "@d34dman/flowdrop";
+</script>
 
-2. **Implement Required Methods**:
-   - `execute()`: Main node logic
-   - `getConfigSchema()`: Configuration schema
-   - `getInputSchema()`: Input validation schema
-   - `getOutputSchema()`: Output schema
-   - `validateInputs()`: Input validation
+<div class="editor-container">
+  <NodeSidebar {nodes} />
+  <WorkflowEditor {nodes} />
+</div>
+```
 
-### Frontend Development
+#### 2. Using Mount Functions (Vanilla JS/Other Frameworks)
 
-The frontend is a Svelte application located in `modules/flowdrop_ui/app/flowdrop/`.
+```javascript
+import { mountWorkflowEditor } from "@d34dman/flowdrop";
+
+const container = document.getElementById("workflow-container");
+const editor = mountWorkflowEditor(container, {
+  nodes: availableNodes,
+  endpointConfig: {
+    baseUrl: "/api/flowdrop",
+    endpoints: {
+      workflows: {
+        list: "/workflows",
+        get: "/workflows/{id}",
+        create: "/workflows",
+        update: "/workflows/{id}"
+      }
+    }
+  }
+});
 
-```bash
-cd modules/flowdrop_ui/app/flowdrop
-npm run dev          # Development server
-npm run build:iife   # Build for Drupal integration
-npm run test         # Run tests
+// Cleanup
+editor.destroy();
 ```
 
-## 📚 API Documentation
-
-### IIFE Integration API
-
-The FlowDrop library can be integrated into Drupal using the IIFE (Immediately Invoked Function Expression) build. The library provides two main mounting functions:
+#### 3. Integration with Backend Frameworks
 
-#### Mounting Functions
+##### Drupal Example
 
 ```javascript
-// Mount the full FlowDrop App
-window.FlowDrop.mountFlowDropApp(container, options);
+Drupal.behaviors.flowdropEditor = {
+  attach: function (context, settings) {
+    const container = context.querySelector(".flowdrop-container");
+    if (container && window.FlowDrop) {
+      window.FlowDrop.mountWorkflowEditor(container, {
+        endpointConfig: settings.flowdrop.endpointConfig,
+        nodes: settings.flowdrop.nodes
+      });
+    }
+  }
+};
+```
 
-// Mount just the WorkflowEditor component
-window.FlowDrop.mountWorkflowEditor(container, options);
+## 📚 Core Components
+
+### WorkflowEditor
+
+Main editor component for creating and editing workflows.
+
+**Props:**
+- `nodes`: Array of available node types
+- `endpointConfig`: API endpoint configuration
+- `height`: Editor height (default: "100vh")
+- `width`: Editor width (default: "100%")
+- `lockWorkflow`: Disable editing
+- `readOnly`: Read-only mode
+
+### NodeSidebar
+
+Sidebar displaying available node types.
+
+**Props:**
+- `nodes`: Array of node types to display
+
+### ConfigSidebar
+
+Configuration panel for selected nodes.
+
+**Props:**
+- `isOpen`: Sidebar visibility
+- `configSchema`: JSON schema for configuration
+- `configValues`: Current configuration values
+- `onSave`: Save handler
+- `onClose`: Close handler
+
+## 🔧 API Configuration
+
+Configure the API client to connect to your backend:
+
+```typescript
+import { createEndpointConfig } from "@d34dman/flowdrop";
+
+const config = createEndpointConfig({
+  baseUrl: "https://api.example.com",
+  endpoints: {
+    nodes: {
+      list: "/nodes",
+      get: "/nodes/{id}"
+    },
+    workflows: {
+      list: "/workflows",
+      get: "/workflows/{id}",
+      create: "/workflows",
+      update: "/workflows/{id}",
+      delete: "/workflows/{id}",
+      execute: "/workflows/{id}/execute"
+    }
+  },
+  timeout: 30000,
+  auth: {
+    type: "bearer",
+    token: "your-token"
+  }
+});
 ```
 
-#### Configuration Options
+## 🎨 Customization
 
-```javascript
-// Basic usage with default configuration
-window.FlowDrop.mountWorkflowEditor(container, {
-	workflow: myWorkflow,
-	nodes: availableNodes
-});
+### Styling
 
-// Advanced usage with custom endpoint configuration
-window.FlowDrop.mountWorkflowEditor(container, {
-	workflow: myWorkflow,
-	nodes: availableNodes,
-	endpointConfig: {
-		baseUrl: '/api/flowdrop',
-		endpoints: {
-			nodes: {
-				list: '/nodes',
-				get: '/nodes/{id}',
-				byCategory: '/nodes?category={category}',
-				metadata: '/nodes/{id}/metadata'
-			},
-			workflows: {
-				list: '/workflows',
-				get: '/workflows/{id}',
-				create: '/workflows',
-				update: '/workflows/{id}',
-				delete: '/workflows/{id}',
-				validate: '/workflows/validate',
-				export: '/workflows/{id}/export',
-				import: '/workflows/import'
-			},
-			executions: {
-				execute: '/workflows/{id}/execute',
-				status: '/executions/{id}',
-				cancel: '/executions/{id}/cancel',
-				logs: '/executions/{id}/logs',
-				history: '/executions'
-			}
-		},
-		timeout: 30000,
-		retry: {
-			enabled: true,
-			maxAttempts: 3,
-			delay: 1000,
-			backoff: 'exponential'
-		},
-		auth: {
-			type: 'bearer',
-			token: 'your-auth-token'
-		}
-	}
-});
-```
+Override CSS custom properties:
 
-#### Drupal Integration Example
+```css
+:root {
+  --flowdrop-background-color: #f9fafb;
+  --flowdrop-primary-color: #3b82f6;
+  --flowdrop-border-color: #e5e7eb;
+  --flowdrop-text-color: #1f2937;
+}
+```
 
-```javascript
-// Drupal behavior for FlowDrop integration
-Drupal.behaviors.flowdropWorkflowEditor = {
-	attach: function (context, settings) {
-		const container = context.querySelector('.flowdrop-workflow-editor');
-		if (container && window.FlowDrop) {
-			window.FlowDrop.mountWorkflowEditor(container, {
-				endpointConfig: settings.flowdrop.endpointConfig,
-				workflow: settings.flowdrop.workflow,
-				nodes: settings.flowdrop.nodes
-			});
-		}
-	}
+### Node Types
+
+Define custom node types:
+
+```typescript
+const customNode: NodeMetadata = {
+  id: "custom_processor",
+  name: "Custom Processor",
+  category: "data_processing",
+  description: "Process data with custom logic",
+  icon: "mdi:cog",
+  color: "#3b82f6",
+  inputs: [
+    {
+      id: "input",
+      name: "Input",
+      type: "input",
+      dataType: "mixed"
+    }
+  ],
+  outputs: [
+    {
+      id: "output",
+      name: "Output",
+      type: "output",
+      dataType: "mixed"
+    }
+  ],
+  configSchema: {
+    type: "object",
+    properties: {
+      operation: {
+        type: "string",
+        title: "Operation"
+      }
+    }
+  }
 };
 ```
 
-### REST API Endpoints
-
-#### Workflows
+## 🔌 Backend Integration
 
-- `GET /api/flowdrop/workflows` - List workflows
-- `POST /api/flowdrop/workflows` - Create workflow
-- `GET /api/flowdrop/workflows/{id}` - Get workflow
-- `PUT /api/flowdrop/workflows/{id}` - Update workflow
-- `DELETE /api/flowdrop/workflows/{id}` - Delete workflow
-- `POST /api/flowdrop/workflows/{id}/execute` - Execute workflow
+FlowDrop is backend-agnostic. Implement the API endpoints expected by the client:
 
-#### Nodes
+### Required Endpoints
 
-- `GET /api/flowdrop/nodes` - List available nodes
-- `GET /api/flowdrop/nodes/{id}` - Get node metadata
-- `GET /api/flowdrop/nodes?category={category}` - Filter by category
+- `GET /api/nodes` - List available node types
+- `GET /api/workflows` - List workflows
+- `GET /api/workflows/{id}` - Get workflow
+- `POST /api/workflows` - Create workflow
+- `PUT /api/workflows/{id}` - Update workflow
+- `DELETE /api/workflows/{id}` - Delete workflow
+- `POST /api/workflows/{id}/execute` - Execute workflow
 
-#### Executions
+See `API.md` for detailed endpoint specifications.
 
-- `GET /api/flowdrop/executions/active` - Active executions
-- `GET /api/flowdrop/executions/{id}/state` - Execution status
+## 🧪 Testing
 
-### Node Configuration Schema
+```bash
+# Unit tests
+npm run test:unit
 
-Each node type defines its configuration schema:
+# E2E tests
+npm run test:e2e
 
-```json
-{
-	"type": "object",
-	"properties": {
-		"setting1": {
-			"type": "string",
-			"title": "Setting 1",
-			"description": "Description of setting"
-		},
-		"setting2": {
-			"type": "number",
-			"default": 0
-		}
-	}
-}
+# All tests
+npm test
 ```
 
-## 🔒 Security
+## 🛠️ Development
 
-- All API endpoints require appropriate Drupal permissions
-- Input validation on all node processors
-- Exception handling for failed executions
-- Logging of all workflow operations
+```bash
+# Install dependencies
+npm install
 
-## 🧪 Testing
+# Development server
+npm run dev
 
-### Backend Testing
+# Build library
+npm run build
 
-```bash
-ddev drush test:run flowdrop
-```
+# Build for production
+npm run build:production
 
-### Frontend Testing
+# Linting
+npm run lint
 
-```bash
-cd modules/flowdrop_ui/app/flowdrop
-npm run test:unit
-npm run test:e2e
+# Format code
+npm run format
 ```
 
-## 📝 Logging
+## 📖 Documentation
 
-Workflow execution is logged through Drupal's logging system:
-
-```php
-$this->loggerFactory->get('flowdrop')->info('Workflow executed', [
-  'workflow_id' => $workflowId,
-  'execution_time' => $executionTime,
-]);
-```
+- **API.md** - REST API specification
+- **CHANGELOG.md** - Version history
+- **Storybook** - Component documentation (run `npm run storybook`)
 
 ## 🤝 Contributing
 
-Not accepting Contribution until the module stabilizes. Stay tuned.
+Not accepting contributions until the library stabilizes. Stay tuned.
 
-## 🆘 Support
+## 📄 License
 
-For issues and questions:
+MIT
+
+## 🆘 Support
 
-- Check the API documentation in `modules/flowdrop_ui/app/flowdrop/API.md`
-- Review the security guidelines in `modules/flowdrop_ui/app/flowdrop/SECURITY.md`
+- Check the API documentation in `API.md`
 - Create an issue in the project repository
+- Review the examples in `src/lib/examples/`
 
 ---
 
-**FlowDrop** - Empowering Drupal with visual workflow automation.
+**FlowDrop** - Visual workflow editing for modern web applications

package/dist/components/App.svelte

@@ -1,6 +1,6 @@
 <!--
-  FlowDrop Demo Page
-  Demonstrates the FlowDrop library with sample data
+  FlowDrop App Component
+  Main application wrapper with navbar, sidebars, and workflow editor
   Styled with BEM syntax
 -->
 
@@ -310,7 +310,7 @@
 			const savedWorkflow = await workflowApi.saveWorkflow(finalWorkflow);
 
 			// Update the workflow ID if it changed (new workflow)
-			// Keep our current workflow state, only update ID and metadata from Drupal
+			// Keep our current workflow state, only update ID and metadata from backend
 			if (savedWorkflow.id && savedWorkflow.id !== finalWorkflow.id) {
 				workflowActions.batchUpdate({
 					nodes: finalWorkflow.nodes,
@@ -508,7 +508,7 @@
 							class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
 							onclick={() => {
 								const defaultUrl = '/api/flowdrop';
-								const newUrl = prompt('Enter Drupal API URL:', defaultUrl);
+								const newUrl = prompt('Enter Backend API URL:', defaultUrl);
 								if (newUrl) {
 									const endpointConfig = createEndpointConfig(newUrl);
 									setEndpointConfig(endpointConfig);

package/dist/components/WorkflowEditor.svelte

@@ -511,7 +511,7 @@
 				}
 			};
 
-			console.log('💾 WorkflowEditor: Saving workflow to Drupal:');
+			console.log('💾 WorkflowEditor: Saving workflow to backend:');
 			console.log('   - ID:', workflow.id);
 			console.log('   - Name:', workflow.name);
 			console.log('   - Nodes count:', workflow.nodes.length);
@@ -520,14 +520,14 @@
 
 			const savedWorkflow = await workflowApi.saveWorkflow(workflow);
 
-			console.log('✅ WorkflowEditor: Received workflow from Drupal:');
+			console.log('✅ WorkflowEditor: Received workflow from backend:');
 			console.log('   - ID:', savedWorkflow.id);
 			console.log('   - Name:', savedWorkflow.name);
 			console.log('   - Nodes count:', savedWorkflow.nodes?.length || 0);
 			console.log('   - Edges count:', savedWorkflow.edges?.length || 0);
 
 			// Update the workflow ID if it changed (new workflow)
-			// Keep our current workflow state, only update ID and metadata from Drupal
+			// Keep our current workflow state, only update ID and metadata from backend
 			if (savedWorkflow.id && savedWorkflow.id !== workflow.id) {
 				console.log('🔄 Updating workflow ID from', workflow.id, 'to', savedWorkflow.id);
 				workflowActions.batchUpdate({

package/dist/config/demo.js

@@ -77,14 +77,14 @@ export const demoWorkflowConfig = {
  * Demo instructions for non-technical users
  */
 export const demoInstructions = {
-    title: 'Multi-Agent Content Management Demo',
-    description: 'This demo shows how FlowDrop uses multiple AI agents working together to manage and improve your Drupal content.',
+    title: 'Multi-Agent Workflow Demo',
+    description: 'This demo shows how FlowDrop uses multiple AI agents working together to process and manage data workflows.',
     steps: [
         {
             step: 1,
             title: 'User Input',
-            description: 'Start by telling the main agent what content management task you need.',
-            example: "Find all blog posts about 'XB' and check if it's being used correctly as an acronym"
+            description: 'Start by providing input data or instructions to the main agent.',
+            example: 'Analyze and process the provided dataset'
         },
         {
             step: 2,
@@ -94,20 +94,20 @@ export const demoInstructions = {
         },
         {
             step: 3,
-            title: 'Content Analysis Agent',
-            description: 'Specialized agent analyzes content using RAG search tools to find and examine relevant content.',
-            note: 'Uses Drupal Search API RAG tool for intelligent content discovery'
+            title: 'Data Analysis Agent',
+            description: 'Specialized agent analyzes data using search and processing tools to find and examine relevant information.',
+            note: 'Uses connected data sources and search tools for intelligent data discovery'
         },
         {
             step: 4,
-            title: 'Content Editor Agent',
-            description: 'Specialized agent makes improvements using available tools like date formatters and draft creators.',
-            note: 'Has access to multiple tools and makes conservative, tracked changes'
+            title: 'Data Processing Agent',
+            description: 'Specialized agent processes and transforms data using available tools and formatters.',
+            note: 'Has access to multiple tools and makes tracked transformations'
         },
         {
             step: 5,
             title: 'Tool Integration',
-            description: 'Sub-agents use specialized tools: RAG search, draft creation, date formatting, etc.',
+            description: 'Sub-agents use specialized tools for data processing, formatting, and transformation.',
             note: "Tools are connected via special 'tool' interface ports"
         },
         {
@@ -120,23 +120,23 @@ export const demoInstructions = {
             step: 7,
             title: 'Orchestrated Response',
             description: 'Main agent compiles results from all sub-agents and provides a comprehensive response.',
-            note: 'Includes summaries, draft links, and next steps for human review'
+            note: 'Includes summaries, results, and next steps for review'
         }
     ],
     benefits: [
         'Multi-agent collaboration for complex tasks',
-        'Specialized agents for specific content management functions',
+        'Specialized agents for specific data processing functions',
         'Intelligent task orchestration and coordination',
         'Tool-based architecture for extensibility',
-        'Human oversight through draft approval process',
+        'Human oversight through review process',
         'Scalable agent-to-agent communication patterns'
     ],
     useCases: [
-        'Multi-agent content analysis and improvement',
-        'Coordinated acronym standardization workflows',
-        'Agent-orchestrated style guide enforcement',
-        'Collaborative content quality assessment',
-        'Tool-assisted bulk content transformations',
-        'Intelligent editorial workflow automation'
+        'Multi-agent data analysis and processing',
+        'Coordinated data transformation workflows',
+        'Agent-orchestrated data quality checks',
+        'Collaborative data processing pipelines',
+        'Tool-assisted bulk data operations',
+        'Intelligent workflow automation'
     ]
 };

package/dist/data/samples.d.ts

@@ -1,6 +1,6 @@
 /**
  * Sample data for FlowDrop development and testing
- * Full set matching Langflow's default categories and node types
+ * Includes sample nodes and workflows for demonstration and testing purposes
  */
 import type { NodeMetadata, Workflow } from '../types/index.js';
 import { CATEGORY_ICONS } from '../utils/icons.js';

package/dist/data/samples.js

@@ -1,6 +1,6 @@
 /**
  * Sample data for FlowDrop development and testing
- * Full set matching Langflow's default categories and node types
+ * Includes sample nodes and workflows for demonstration and testing purposes
  */
 import { CATEGORY_ICONS } from '../utils/icons.js';
 /**

package/dist/examples/api-client-usage.d.ts

@@ -1,6 +1,7 @@
 /**
  * Example: Using FlowDrop API Client
- * This demonstrates how to integrate with FlowDrop API from backend applications
+ * Demonstrates how to integrate with FlowDrop API from applications
+ * This client can be used with any backend that implements the FlowDrop API specification
  */
 import type { Workflow } from '../types/index.js';
 declare function checkApiHealth(): Promise<{

package/dist/examples/api-client-usage.js

@@ -1,6 +1,7 @@
 /**
  * Example: Using FlowDrop API Client
- * This demonstrates how to integrate with FlowDrop API from backend applications
+ * Demonstrates how to integrate with FlowDrop API from applications
+ * This client can be used with any backend that implements the FlowDrop API specification
  */
 import { ApiClient } from '../clients/ApiClient.js';
 // Initialize the API client

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 /**
- * FlowDrop - Workflow Library
- * A Svelte Flow-based library for building workflows
+ * FlowDrop - Visual Workflow Editor Library
+ * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors
  */
-import '../app.css';
+import "./styles/base.css";
 export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, NodeConfig, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents } from './types/index.js';
 export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig, NodeType, WorkflowData, ExecutionResult as EditorExecutionResult, EditorState } from './types/config.js';
 export { FlowDropApiClient } from './api/client.js';

package/dist/index.js

@@ -1,9 +1,9 @@
 /**
- * FlowDrop - Workflow Library
- * A Svelte Flow-based library for building workflows
+ * FlowDrop - Visual Workflow Editor Library
+ * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors
  */
 // Import CSS to ensure styles are included in the library build
-import '../app.css';
+import "./styles/base.css";
 // Export API clients
 export { FlowDropApiClient } from './api/client.js';
 export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
@@ -31,5 +31,5 @@ export * from './config/endpoints.js';
 export * from './adapters/WorkflowAdapter.js';
 // Export API client
 export * from './clients/ApiClient.js';
-// Export Svelte app wrapper for Drupal integration
+// Export Svelte app wrapper for framework integration
 export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';

package/dist/svelte-app.d.ts

@@ -1,6 +1,7 @@
 /**
- * Svelte App Wrapper for Drupal Integration
- * This provides a way to mount Svelte components in Drupal
+ * Svelte App Wrapper for Framework Integration
+ * Provides mount/unmount functions for integrating FlowDrop into any web application
+ * Particularly useful for integration with vanilla JS, Drupal, WordPress, or other frameworks
  */
 import type { Workflow, NodeMetadata, PortConfig } from './types/index.js';
 import type { EndpointConfig } from './config/endpoints.js';
@@ -19,8 +20,10 @@ interface MountedSvelteApp {
     export?: () => void;
 }
 /**
- * Mount the full FlowDrop App with configurable navbar height and other settings
- * This is the recommended way to mount the app for IIFE usage
+ * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
+ * Use this for a complete workflow editing experience with all UI components
+ * @param container - DOM element to mount the app into
+ * @param options - Configuration options for the app
  */
 export declare function mountFlowDropApp(container: HTMLElement, options?: {
     workflow?: Workflow;
@@ -45,7 +48,8 @@ export declare function mountFlowDropApp(container: HTMLElement, options?: {
     }>;
 }): Promise<MountedSvelteApp>;
 /**
- * Mount the WorkflowEditor component in a Drupal container
+ * Mount the WorkflowEditor component in a container
+ * Simpler alternative to mountFlowDropApp - only mounts the editor without navbar
  */
 export declare function mountWorkflowEditor(container: HTMLElement, options?: {
     workflow?: Workflow;

package/dist/svelte-app.js

@@ -1,6 +1,7 @@
 /**
- * Svelte App Wrapper for Drupal Integration
- * This provides a way to mount Svelte components in Drupal
+ * Svelte App Wrapper for Framework Integration
+ * Provides mount/unmount functions for integrating FlowDrop into any web application
+ * Particularly useful for integration with vanilla JS, Drupal, WordPress, or other frameworks
  */
 import { mount } from 'svelte';
 import WorkflowEditor from './components/WorkflowEditor.svelte';
@@ -10,8 +11,10 @@ import { initializePortCompatibility } from './utils/connections.js';
 import { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
 import { fetchPortConfig } from './services/portConfigApi.js';
 /**
- * Mount the full FlowDrop App with configurable navbar height and other settings
- * This is the recommended way to mount the app for IIFE usage
+ * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
+ * Use this for a complete workflow editing experience with all UI components
+ * @param container - DOM element to mount the app into
+ * @param options - Configuration options for the app
  */
 export async function mountFlowDropApp(container, options = {}) {
     const { workflow, nodes = [], endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions } = options;
@@ -87,7 +90,8 @@ export async function mountFlowDropApp(container, options = {}) {
     return app;
 }
 /**
- * Mount the WorkflowEditor component in a Drupal container
+ * Mount the WorkflowEditor component in a container
+ * Simpler alternative to mountFlowDropApp - only mounts the editor without navbar
  */
 export async function mountWorkflowEditor(container, options = {}) {
     const { workflow, nodes = [], endpointConfig, portConfig } = options;

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.2",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -65,7 +65,8 @@
 		"!dist/**/*.spec.*"
 	],
 	"sideEffects": [
-		"**/*.css"
+		"**/*.css",
+		"./dist/styles/base.css"
 	],
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -73,8 +74,10 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./styles/base.css": "./dist/styles/base.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"