@flowdrop/flowdrop 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shibin Das (d34dman)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,252 @@
+<p align="center">
+  <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>
+
+<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" />
+  <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>
+</p>
+
+<p align="center">
+  <strong>Build beautiful workflow editors in minutes, not months.</strong>
+</p>
+
+<p align="center">
+  An awesome workflow editor built with Svelte 5 and @xyflow/svelte.<br/>
+  You own the backend. You own the data. You own the orchestration.
+</p>
+
+<p align="center">
+  <a href="#quickstart">Quickstart</a> •
+  <a href="#features">Features</a> •
+  <a href="#integration">Integration</a> •
+  <a href="#documentation">Docs</a>
+</p>
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/flowdrop-io/flowdrop/main/libs/flowdrop/static/FlowDrop-Screenshot.jpg" alt="FlowDrop Screenshot" width="800" />
+</p>
+<p align="center">
+  <em>Build AI-powered workflows with drag-and-drop simplicity. Connect nodes, configure inputs/outputs, and visualize your entire pipeline.</em>
+</p>
+
+## Why FlowDrop?
+
+Most workflow tools are SaaS platforms that lock you in. Your data lives on their servers. Your execution logic runs in their cloud. You pay per workflow, per user, per run.
+
+**FlowDrop is different.**
+
+FlowDrop is a pure visual editor. You implement the backend. You control the orchestration. Your workflows run on your infrastructure, with your security policies, at your scale.
+
+No vendor lock-in. No data leaving your walls. No surprise bills.
+
+```bash
+npm install @flowdrop/flowdrop
+```
+
+> **Note:** FlowDrop supports **one editor instance per page** (module-level singleton stores). See [Architecture Notes](#architecture-notes) for details.
+
+You get a production-ready workflow UI. You keep full control of everything else.
+
+## Quickstart
+
+```svelte
+<script lang="ts">
+	import { WorkflowEditor } from '@flowdrop/flowdrop';
+	import '@flowdrop/flowdrop/styles/base.css';
+</script>
+
+<WorkflowEditor />
+```
+
+**5 lines. One fully-functional workflow editor.**
+
+## Features
+
+|                              |                                                                           |
+| ---------------------------- | ------------------------------------------------------------------------- |
+| 🎨 **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                        |
+
+## Architecture Notes
+
+- **Single instance per page.** FlowDrop uses module-level singleton stores for state management. Only one FlowDrop editor instance can exist on a page at a time.
+- **Svelte 5 required.** FlowDrop uses Svelte 5 runes (`$state`, `$derived`, `$effect`) throughout. Svelte 4 is not supported.
+- **Modern browsers only.** The library targets ES2020+ and does not include polyfills for older browsers.
+
+## Node Types
+
+FlowDrop ships with 7 beautifully designed node types:
+
+| Type       | Purpose                                 |
+| ---------- | --------------------------------------- |
+| `default`  | Full-featured nodes with inputs/outputs |
+| `simple`   | Compact, space-efficient layout         |
+| `square`   | Icon-only minimal design                |
+| `tool`     | AI agent tool nodes                     |
+| `gateway`  | Conditional branching logic             |
+| `terminal` | Start/end workflow points               |
+| `note`     | Markdown documentation blocks           |
+
+<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" />
+</p>
+<p align="center">
+  <em>From simple triggers to complex branching logic, each node type is designed for specific workflow patterns.</em>
+</p>
+
+## Integration
+
+### Svelte (Native)
+
+```svelte
+<script>
+	import { WorkflowEditor, NodeSidebar } from '@flowdrop/flowdrop';
+</script>
+
+<div class="flex h-screen">
+	<NodeSidebar {nodes} />
+	<WorkflowEditor {nodes} />
+</div>
+```
+
+### Vanilla JS / React / Vue / Angular
+
+```javascript
+import { mountFlowDropApp, createEndpointConfig } from '@flowdrop/flowdrop';
+
+const app = await mountFlowDropApp(document.getElementById('editor'), {
+	workflow: myWorkflow,
+	endpointConfig: createEndpointConfig('/api/flowdrop'),
+	eventHandlers: {
+		onDirtyStateChange: (isDirty) => console.log('Unsaved changes:', isDirty),
+		onAfterSave: (workflow) => console.log('Saved!', workflow)
+	}
+});
+
+// Full control over the editor
+app.save();
+app.getWorkflow();
+app.destroy();
+```
+
+### Enterprise Integration
+
+```javascript
+import { mountFlowDropApp, CallbackAuthProvider } from '@flowdrop/flowdrop';
+
+const app = await mountFlowDropApp(container, {
+	// Dynamic token refresh
+	authProvider: new CallbackAuthProvider({
+		getToken: () => authService.getAccessToken(),
+		onUnauthorized: () => authService.refreshToken()
+	}),
+
+	// Lifecycle hooks
+	eventHandlers: {
+		onBeforeUnmount: (workflow, isDirty) => {
+			if (isDirty) saveDraft(workflow);
+		}
+	},
+
+	// Auto-save, toasts, and more
+	features: {
+		autoSaveDraft: true,
+		autoSaveDraftInterval: 30000
+	}
+});
+```
+
+## API Configuration
+
+Connect to any backend in seconds:
+
+```typescript
+import { createEndpointConfig } from '@flowdrop/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}',
+			execute: '/workflows/{id}/execute'
+		}
+	},
+	auth: { type: 'bearer', token: 'your-token' }
+});
+```
+
+## Customization
+
+Make it yours with CSS custom properties:
+
+```css
+:root {
+	--flowdrop-background-color: #0a0a0a;
+	--flowdrop-primary-color: #6366f1;
+	--flowdrop-border-color: #27272a;
+	--flowdrop-text-color: #fafafa;
+}
+```
+
+## Deploy
+
+### Docker (Recommended)
+
+```bash
+cd ../../apps/example-client-docker
+cp env.example .env
+docker-compose up -d
+```
+
+### Node.js
+
+```bash
+npm run build
+FLOWDROP_API_BASE_URL=http://your-backend/api node build
+```
+
+Runtime configuration means you build once and deploy to staging, production, or anywhere else with just environment variables.
+
+## Documentation
+
+| 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          |
+
+## Development
+
+```bash
+pnpm install         # Install dependencies
+pnpm dev             # Start dev server
+pnpm build           # Build library
+pnpm test            # Run all tests
+```
+
+## Contributing
+
+FlowDrop is stabilizing. Contributions will open soon. Star the repo to stay updated.
+
+<p align="center">
+  <strong>FlowDrop</strong> - The visual workflow editor you own completely
+</p>
+
+<p align="center">
+  Built with ❤️ Svelte 5 and @xyflow/svelte
+</p>

package/dist/adapters/WorkflowAdapter.d.ts

@@ -0,0 +1,167 @@
+/**
+ * WorkflowAdapter - Abstracts SvelteFlow internals for external systems
+ *
+ * This adapter provides a clean interface for working with workflows without
+ * needing to understand SvelteFlow's internal structure. It handles:
+ * - Converting between standard workflow format and SvelteFlow format
+ * - CRUD operations on workflows, nodes, and edges
+ * - Validation and error checking
+ * - Import/export functionality
+ *
+ * The adapter is designed to be used by:
+ * - Backend systems that need to process workflows
+ * - External applications that want to integrate with FlowDrop
+ * - Systems that need to generate or modify workflows programmatically
+ */
+import type { Workflow, NodeMetadata, WorkflowFormat } from '../types/index.js';
+/**
+ * Standard workflow node interface (SvelteFlow-agnostic)
+ */
+export interface StandardNode {
+    id: string;
+    type: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: {
+        label: string;
+        config: Record<string, unknown>;
+        metadata: NodeMetadata;
+    };
+}
+/**
+ * Standard workflow edge interface (SvelteFlow-agnostic)
+ */
+export interface StandardEdge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+}
+/**
+ * Standard workflow interface (SvelteFlow-agnostic)
+ */
+export interface StandardWorkflow {
+    id: string;
+    name: string;
+    description?: string;
+    nodes: StandardNode[];
+    edges: StandardEdge[];
+    metadata?: {
+        version: string;
+        createdAt: string;
+        updatedAt: string;
+        author?: string;
+        tags?: string[];
+        format?: WorkflowFormat;
+    };
+}
+/**
+ * Workflow execution result
+ */
+export interface WorkflowExecutionResult {
+    success: boolean;
+    data?: unknown;
+    error?: string;
+    executionTime?: number;
+    nodeResults?: Record<string, unknown>;
+}
+/**
+ * Workflow validation result
+ */
+export interface WorkflowValidationResult {
+    valid: boolean;
+    errors: string[];
+    warnings: string[];
+}
+/**
+ * Workflow Adapter Class
+ * Provides a clean API for workflow operations without exposing SvelteFlow internals
+ */
+export declare class WorkflowAdapter {
+    private nodeTypes;
+    constructor(nodeTypes?: NodeMetadata[]);
+    /**
+     * Create a new workflow
+     */
+    createWorkflow(name: string, description?: string): StandardWorkflow;
+    /**
+     * Add a node to a workflow
+     */
+    addNode(workflow: StandardWorkflow, nodeType: string, position: {
+        x: number;
+        y: number;
+    }, config?: Record<string, unknown>): StandardNode;
+    /**
+     * Remove a node from a workflow
+     */
+    removeNode(workflow: StandardWorkflow, nodeId: string): boolean;
+    /**
+     * Update node position
+     */
+    updateNodePosition(workflow: StandardWorkflow, nodeId: string, position: {
+        x: number;
+        y: number;
+    }): boolean;
+    /**
+     * Update node configuration
+     */
+    updateNodeConfig(workflow: StandardWorkflow, nodeId: string, config: Record<string, unknown>): boolean;
+    /**
+     * Add an edge between nodes
+     */
+    addEdge(workflow: StandardWorkflow, sourceNodeId: string, targetNodeId: string, sourceHandle?: string, targetHandle?: string): StandardEdge;
+    /**
+     * Remove an edge from a workflow
+     */
+    removeEdge(workflow: StandardWorkflow, edgeId: string): boolean;
+    /**
+     * Get all nodes of a specific type
+     */
+    getNodesByType(workflow: StandardWorkflow, nodeType: string): StandardNode[];
+    /**
+     * Get all edges connected to a node
+     */
+    getNodeEdges(workflow: StandardWorkflow, nodeId: string): StandardEdge[];
+    /**
+     * Get connected nodes (both incoming and outgoing)
+     */
+    getConnectedNodes(workflow: StandardWorkflow, nodeId: string): StandardNode[];
+    /**
+     * Validate workflow structure
+     */
+    validateWorkflow(workflow: StandardWorkflow): WorkflowValidationResult;
+    /**
+     * Export workflow to JSON
+     */
+    exportWorkflow(workflow: StandardWorkflow): string;
+    /**
+     * Import workflow from JSON
+     */
+    importWorkflow(json: string): StandardWorkflow;
+    /**
+     * Convert SvelteFlow workflow to standard format
+     */
+    fromSvelteFlow(svelteFlowWorkflow: Workflow): StandardWorkflow;
+    /**
+     * Convert standard workflow to SvelteFlow format
+     */
+    toSvelteFlow(workflow: StandardWorkflow): Workflow;
+    /**
+     * Get workflow statistics
+     */
+    getWorkflowStats(workflow: StandardWorkflow): {
+        totalNodes: number;
+        totalEdges: number;
+        nodeTypeCounts: {
+            [k: string]: number;
+        };
+        lastModified: string | undefined;
+    };
+    /**
+     * Clone a workflow
+     */
+    cloneWorkflow(workflow: StandardWorkflow, newName?: string): StandardWorkflow;
+}