@d34dman/flowdrop 0.0.1

package/dist/clients/ApiClient.d.ts

@@ -0,0 +1,203 @@
+/**
+ * FlowDrop API Client
+ * Type-safe client for the FlowDrop API
+ */
+import type { NodeMetadata, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse } from "../types/index.js";
+/**
+ * API Client Configuration
+ */
+export interface ApiClientConfig {
+    baseUrl: string;
+    apiKey?: string;
+    timeout?: number;
+    headers?: Record<string, string>;
+}
+/**
+ * Request options for API calls
+ */
+export interface RequestOptions {
+    headers?: Record<string, string>;
+    timeout?: number;
+}
+/**
+ * Pagination parameters
+ */
+export interface PaginationParams {
+    limit?: number;
+    offset?: number;
+}
+/**
+ * Node types query parameters
+ */
+export interface NodeTypesQuery {
+    category?: string;
+    search?: string;
+    limit?: number;
+    offset?: number;
+}
+/**
+ * Workflows query parameters
+ */
+export interface WorkflowsQuery {
+    search?: string;
+    tags?: string;
+    limit?: number;
+    offset?: number;
+    sort?: "created_at" | "updated_at" | "name";
+    order?: "asc" | "desc";
+}
+/**
+ * Create workflow request
+ */
+export interface CreateWorkflowRequest {
+    name: string;
+    description?: string;
+    nodes?: any[];
+    edges?: any[];
+    tags?: string[];
+}
+/**
+ * Update workflow request
+ */
+export interface UpdateWorkflowRequest {
+    name?: string;
+    description?: string;
+    nodes?: any[];
+    edges?: any[];
+    tags?: string[];
+}
+/**
+ * Execute workflow request
+ */
+export interface ExecuteWorkflowRequest {
+    inputs: Record<string, unknown>;
+    options?: {
+        timeout?: number;
+        maxSteps?: number;
+    };
+}
+/**
+ * FlowDrop API Client Class
+ */
+export declare class ApiClient {
+    private config;
+    private defaultHeaders;
+    constructor(config: ApiClientConfig);
+    /**
+     * Make an HTTP request
+     */
+    private request;
+    /**
+     * Check API health
+     */
+    healthCheck(): Promise<{
+        status: string;
+        timestamp: string;
+        version: string;
+    }>;
+    /**
+     * Get all node types
+     */
+    getNodeTypes(query?: NodeTypesQuery): Promise<NodesResponse>;
+    /**
+     * Get node type by ID
+     */
+    getNodeType(id: string): Promise<NodeTypeResponse>;
+    /**
+     * Get all workflows
+     */
+    getWorkflows(query?: WorkflowsQuery): Promise<WorkflowsResponse>;
+    /**
+     * Get workflow by ID
+     */
+    getWorkflow(id: string): Promise<WorkflowResponse>;
+    /**
+     * Create a new workflow
+     */
+    createWorkflow(data: CreateWorkflowRequest): Promise<WorkflowResponse>;
+    /**
+     * Update workflow
+     */
+    updateWorkflow(id: string, data: UpdateWorkflowRequest): Promise<WorkflowResponse>;
+    /**
+     * Delete workflow
+     */
+    deleteWorkflow(id: string): Promise<void>;
+    /**
+     * Execute workflow
+     */
+    executeWorkflow(id: string, data: ExecuteWorkflowRequest): Promise<ExecutionResponse>;
+    /**
+     * Get execution status
+     */
+    getExecutionStatus(id: string): Promise<ExecutionStatusResponse>;
+    /**
+     * Cancel execution
+     */
+    cancelExecution(id: string): Promise<ExecutionResponse>;
+    /**
+     * Export workflow
+     */
+    exportWorkflow(id: string, format?: "json" | "yaml"): Promise<Workflow>;
+    /**
+     * Import workflow
+     */
+    importWorkflow(workflow: Workflow): Promise<WorkflowResponse>;
+    /**
+     * Validate workflow
+     */
+    validateWorkflow(workflow: Workflow): Promise<ValidationResponse>;
+    /**
+     * Wait for execution completion
+     */
+    waitForExecution(id: string, pollInterval?: number): Promise<ExecutionStatusResponse>;
+    /**
+     * Get workflows by tag
+     */
+    getWorkflowsByTag(tag: string, query?: Omit<WorkflowsQuery, "tags">): Promise<WorkflowsResponse>;
+    /**
+     * Get node types by category
+     */
+    getNodeTypesByCategory(category: string, query?: Omit<NodeTypesQuery, "category">): Promise<NodesResponse>;
+}
+/**
+ * API Error Class
+ */
+export declare class ApiError extends Error {
+    status: number;
+    code?: string;
+    details?: unknown;
+    constructor(status: number, message: string, code?: string, details?: unknown);
+}
+/**
+ * Execution response types
+ */
+export interface ExecutionResponse extends ApiResponse<{
+    executionId: string;
+    status: "pending" | "running" | "completed" | "failed" | "cancelled";
+    message: string;
+}> {
+}
+export interface ExecutionStatusResponse extends ApiResponse<{
+    executionId: string;
+    status: "pending" | "running" | "completed" | "failed" | "cancelled";
+    result?: unknown;
+    error?: string;
+    startTime: string;
+    endTime?: string;
+    duration?: number;
+    nodeResults?: Record<string, unknown>;
+}> {
+}
+export interface ValidationResponse extends ApiResponse<{
+    valid: boolean;
+    errors: string[];
+    warnings: string[];
+    suggestions?: string[];
+}> {
+}
+/**
+ * Type for node type response
+ */
+export interface NodeTypeResponse extends ApiResponse<NodeMetadata> {
+}

package/dist/clients/ApiClient.js

@@ -0,0 +1,212 @@
+/**
+ * FlowDrop API Client
+ * Type-safe client for the FlowDrop API
+ */
+/**
+ * FlowDrop API Client Class
+ */
+export class ApiClient {
+    config;
+    defaultHeaders;
+    constructor(config) {
+        this.config = {
+            timeout: 30000,
+            ...config
+        };
+        this.defaultHeaders = {
+            "Content-Type": "application/json",
+            ...config.headers
+        };
+        if (config.apiKey) {
+            this.defaultHeaders.Authorization = `Bearer ${config.apiKey}`;
+        }
+    }
+    /**
+     * Make an HTTP request
+     */
+    async request(method, path, data, options = {}) {
+        const url = `${this.config.baseUrl}${path}`;
+        const headers = { ...this.defaultHeaders, ...options.headers };
+        const timeout = options.timeout || this.config.timeout;
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        try {
+            const response = await fetch(url, {
+                method,
+                headers,
+                body: data ? JSON.stringify(data) : undefined,
+                signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new ApiError(response.status, errorData.error || `HTTP ${response.status}`, errorData.code, errorData.details);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            if (error instanceof ApiError) {
+                throw error;
+            }
+            if (error instanceof Error && error.name === "AbortError") {
+                throw new ApiError(408, "Request timeout", "TIMEOUT");
+            }
+            throw new ApiError(500, error instanceof Error ? error.message : "Network error", "NETWORK_ERROR");
+        }
+    }
+    // ===== HEALTH CHECK =====
+    /**
+     * Check API health
+     */
+    async healthCheck() {
+        return this.request("GET", "/health");
+    }
+    // ===== NODE TYPES =====
+    /**
+     * Get all node types
+     */
+    async getNodeTypes(query) {
+        const params = new URLSearchParams();
+        if (query?.category)
+            params.append("category", query.category);
+        if (query?.search)
+            params.append("search", query.search);
+        if (query?.limit)
+            params.append("limit", query.limit.toString());
+        if (query?.offset)
+            params.append("offset", query.offset.toString());
+        const path = `/nodes${params.toString() ? `?${params.toString()}` : ""}`;
+        return this.request("GET", path);
+    }
+    /**
+     * Get node type by ID
+     */
+    async getNodeType(id) {
+        return this.request("GET", `/nodes/${id}`);
+    }
+    // ===== WORKFLOWS =====
+    /**
+     * Get all workflows
+     */
+    async getWorkflows(query) {
+        const params = new URLSearchParams();
+        if (query?.search)
+            params.append("search", query.search);
+        if (query?.tags)
+            params.append("tags", query.tags);
+        if (query?.limit)
+            params.append("limit", query.limit.toString());
+        if (query?.offset)
+            params.append("offset", query.offset.toString());
+        if (query?.sort)
+            params.append("sort", query.sort);
+        if (query?.order)
+            params.append("order", query.order);
+        const path = `/workflows${params.toString() ? `?${params.toString()}` : ""}`;
+        return this.request("GET", path);
+    }
+    /**
+     * Get workflow by ID
+     */
+    async getWorkflow(id) {
+        return this.request("GET", `/workflows/${id}`);
+    }
+    /**
+     * Create a new workflow
+     */
+    async createWorkflow(data) {
+        return this.request("POST", "/workflows", data);
+    }
+    /**
+     * Update workflow
+     */
+    async updateWorkflow(id, data) {
+        return this.request("PUT", `/workflows/${id}`, data);
+    }
+    /**
+     * Delete workflow
+     */
+    async deleteWorkflow(id) {
+        return this.request("DELETE", `/workflows/${id}`);
+    }
+    // ===== WORKFLOW EXECUTION =====
+    /**
+     * Execute workflow
+     */
+    async executeWorkflow(id, data) {
+        return this.request("POST", `/workflows/${id}/execute`, data);
+    }
+    /**
+     * Get execution status
+     */
+    async getExecutionStatus(id) {
+        return this.request("GET", `/executions/${id}`);
+    }
+    /**
+     * Cancel execution
+     */
+    async cancelExecution(id) {
+        return this.request("POST", `/executions/${id}/cancel`);
+    }
+    // ===== IMPORT/EXPORT =====
+    /**
+     * Export workflow
+     */
+    async exportWorkflow(id, format = "json") {
+        return this.request("GET", `/workflows/${id}/export?format=${format}`);
+    }
+    /**
+     * Import workflow
+     */
+    async importWorkflow(workflow) {
+        return this.request("POST", "/workflows/import", workflow);
+    }
+    // ===== VALIDATION =====
+    /**
+     * Validate workflow
+     */
+    async validateWorkflow(workflow) {
+        return this.request("POST", "/workflows/validate", workflow);
+    }
+    // ===== UTILITY METHODS =====
+    /**
+     * Wait for execution completion
+     */
+    async waitForExecution(id, pollInterval = 1000) {
+        while (true) {
+            const status = await this.getExecutionStatus(id);
+            if (status.data?.status === "completed" || status.data?.status === "failed" || status.data?.status === "cancelled") {
+                return status;
+            }
+            await new Promise(resolve => setTimeout(resolve, pollInterval));
+        }
+    }
+    /**
+     * Get workflows by tag
+     */
+    async getWorkflowsByTag(tag, query) {
+        return this.getWorkflows({ ...query, tags: tag });
+    }
+    /**
+     * Get node types by category
+     */
+    async getNodeTypesByCategory(category, query) {
+        return this.getNodeTypes({ ...query, category });
+    }
+}
+/**
+ * API Error Class
+ */
+export class ApiError extends Error {
+    status;
+    code;
+    details;
+    constructor(status, message, code, details) {
+        super(message);
+        this.status = status;
+        this.code = code;
+        this.details = details;
+        this.name = "ApiError";
+    }
+}

package/dist/components/App.svelte

@@ -0,0 +1,237 @@
+<!--
+  FlowDrop Demo Page
+  Demonstrates the FlowDrop library with sample data
+  Styled with BEM syntax
+-->
+
+<script lang="ts">
+    import { onMount } from "svelte";
+    import WorkflowEditor from "./WorkflowEditor.svelte";
+    import { api } from "../services/api.js";
+    import type { NodeMetadata, Workflow } from "../types/index.js";
+    import { getDefaultIcon } from '../utils/icons.js';
+  
+    let nodes = $state<NodeMetadata[]>([]);
+    let workflow = $state<Workflow | undefined>(undefined);
+    let error = $state<string | null>(null);
+    let loading = $state(true);
+  
+    /**
+     * Fetch node types from the server
+     */
+    async function fetchNodeTypes(): Promise<void> {
+      try {
+        loading = true;
+        error = null;
+        
+        console.log("Fetching node types from server...");
+        const fetchedNodes = await api.nodes.getNodes();
+        
+        console.log("✅ Fetched", fetchedNodes.length, "node types from server");
+        nodes = fetchedNodes;
+        
+      } catch (err) {
+        console.error("❌ Failed to fetch node types:", err);
+        error = err instanceof Error ? err.message : "Failed to load node types";
+      } finally {
+        loading = false;
+      }
+    }
+  
+    /**
+     * Retry loading node types
+     */
+    function retryLoad(): void {
+      fetchNodeTypes();
+    }
+  
+    // Load node types on mount
+    onMount(() => {
+      fetchNodeTypes();
+    });
+  
+    /**
+     * Handle workflow export
+     */
+    function handleWorkflowExport(): void {
+      if (!workflow) return;
+      
+      const dataStr = JSON.stringify(workflow, null, 2);
+      const dataBlob = new Blob([dataStr], { type: "application/json" });
+      const url = URL.createObjectURL(dataBlob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = `${workflow.name}.json`;
+      link.click();
+      URL.revokeObjectURL(url);
+    }
+  </script>
+  
+  <svelte:head>
+    <title>FlowDrop - LLM Workflow Editor</title>
+    <meta name="description" content="A modern drag-and-drop workflow editor for LLM applications" />
+  </svelte:head>
+  
+  <div class="flowdrop-app" style="min-height: 1200px;">
+    <!-- Header -->
+    <div class="flowdrop-navbar">
+      <div class="flowdrop-navbar__start">
+        <!-- Logo and Title -->
+        <div class="flowdrop-flex flowdrop-gap--3">
+          <div class="flowdrop-logo flowdrop-logo--header">
+            FD
+          </div>
+          <div>
+            <h1 class="flowdrop-text--lg flowdrop-font--bold">FlowDrop</h1>
+            <p class="flowdrop-text--xs flowdrop-text--gray">LLM Workflow Editor</p>
+          </div>
+        </div>
+      </div>
+  
+      <div class="flowdrop-navbar__center">
+        <!-- TODO: Add navigation -->
+      </div>
+  
+      <div class="flowdrop-navbar__end">
+       <!-- TODO: Add user menu -->
+      </div>
+    </div>
+  
+    <!-- Main Content -->
+    <main class="flowdrop-main" style="height: calc(100vh - 60px);">
+      <!-- Status Display -->
+      {#if loading}
+        <div class="flowdrop-status flowdrop-status--loading">
+          <div class="flowdrop-status__content">
+            <div class="flowdrop-flex flowdrop-gap--3">
+              <div class="flowdrop-spinner"></div>
+              <span class="flowdrop-text--sm flowdrop-font--medium">Loading node types...</span>
+            </div>
+          </div>
+        </div>
+      {:else if error}
+        <div class="flowdrop-status flowdrop-status--error">
+          <div class="flowdrop-status__content">
+            <div class="flowdrop-flex flowdrop-gap--3">
+              <div class="flowdrop-status__indicator flowdrop-status__indicator--error"></div>
+              <span class="flowdrop-text--sm flowdrop-font--medium">Error: {error}</span>
+            </div>
+            <div class="flowdrop-flex flowdrop-gap--2">
+              <button
+                class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
+                onclick={retryLoad}
+                type="button"
+              >
+                Retry
+              </button>
+              <button
+                class="flowdrop-btn flowdrop-btn--ghost flowdrop-btn--sm"
+                onclick={() => error = null}
+                type="button"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+        </div>
+      {/if}
+  
+      <!-- Workflow Editor -->
+      <div class="flowdrop-editor-container" style="height: {(loading || error) ? 'calc(100% - 60px)' : '100%'};">
+        <WorkflowEditor 
+          nodes={nodes}
+          workflow={workflow}
+        />
+      </div>
+    </main>
+  </div>
+  
+  <style>
+    .flowdrop-app {
+      background: linear-gradient(135deg, #f9fafb 0%, #e0e7ff 50%, #c7d2fe 100%);
+    }
+    
+    .flowdrop-navbar {
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 1rem;
+      background-color: #ffffff;
+      border-bottom: 1px solid #e5e7eb;
+    }
+    
+    .flowdrop-navbar__start {
+      display: flex;
+      align-items: center;
+    }
+    
+    .flowdrop-logo {
+      width: 2rem;
+      height: 2rem;
+      background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #ffffff;
+      font-weight: 700;
+      font-size: 0.875rem;
+      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+    }
+    
+    .flowdrop-logo--header {
+      width: 40px;
+      height: 40px;
+      font-size: 1.25rem;
+      margin-top: 15px;
+    }
+    
+    .flowdrop-main {
+      position: relative;
+    }
+    
+    .flowdrop-status {
+      background-color: #eff6ff;
+      border-bottom: 1px solid #bfdbfe;
+      padding: 1rem;
+    }
+    
+    .flowdrop-status--error {
+      background-color: #fef2f2;
+      border-bottom: 1px solid #fecaca;
+    }
+    
+    .flowdrop-status__content {
+      max-width: 80rem;
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    
+    .flowdrop-status__indicator {
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+    }
+    
+    .flowdrop-status__indicator--error {
+      background-color: #ef4444;
+    }
+    
+    .flowdrop-editor-container {
+      position: relative;
+    }
+    
+    /* Ensure full height for screens larger than 1200px */
+    @media (min-height: 1200px) {
+      :global(html), :global(body) {
+        height: 100%;
+      }
+      
+      :global(#svelte) {
+        height: 100%;
+      }
+    }
+  </style>

package/dist/components/App.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const App: import("svelte").Component<Record<string, never>, {}, "">;
+type App = ReturnType<typeof App>;
+export default App;

package/dist/components/CanvasBanner.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import Icon from '@iconify/svelte';
+    export let title: string;
+    export let description: string;
+    export let iconName: string | undefined;
+</script>
+
+<div class="flowdrop-canvas-banner">
+  <div class="flowdrop-card">
+    <div class="flowdrop-card__body flowdrop-text--center">
+      <div class="flowdrop-canvas-banner__icon">
+        {#if iconName}
+          <Icon icon={iconName} class="flowdrop-canvas-banner__icon-svg" />
+        {/if}
+      </div>
+      <h3 class="flowdrop-canvas-banner__title">{title}</h3>
+      <p class="flowdrop-canvas-banner__description">{description}</p>
+    </div>
+  </div>
+</div>
+
+<style>
+  .flowdrop-canvas-banner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+  
+  .flowdrop-canvas-banner__icon {
+    font-size: 3.75rem;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .flowdrop-canvas-banner__title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: #111827;
+  }
+  
+  .flowdrop-canvas-banner__description {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+</style>