@d34dman/flowdrop 0.0.1

package/dist/svelte-app.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Svelte App Wrapper for Drupal Integration
+ * This provides a way to mount Svelte components in Drupal
+ */
+import type { Workflow, NodeMetadata } from './types/index.js';
+/**
+ * Mount the WorkflowEditor component in a Drupal container
+ */
+export declare function mountWorkflowEditor(container: HTMLElement, options?: {
+    workflow?: Workflow;
+    nodes?: NodeMetadata[];
+    apiBaseUrl?: string;
+}): any;
+/**
+ * Unmount a Svelte app
+ */
+export declare function unmountWorkflowEditor(app: any): void;

package/dist/svelte-app.js

@@ -0,0 +1,30 @@
+/**
+ * Svelte App Wrapper for Drupal Integration
+ * This provides a way to mount Svelte components in Drupal
+ */
+import { mount } from 'svelte';
+import WorkflowEditor from './components/WorkflowEditor.svelte';
+/**
+ * Mount the WorkflowEditor component in a Drupal container
+ */
+export function mountWorkflowEditor(container, options = {}) {
+    const { workflow, nodes = [], apiBaseUrl } = options;
+    // Create the Svelte component
+    const app = mount(WorkflowEditor, {
+        target: container,
+        props: {
+            workflow,
+            nodes,
+            apiBaseUrl
+        }
+    });
+    return app;
+}
+/**
+ * Unmount a Svelte app
+ */
+export function unmountWorkflowEditor(app) {
+    if (app && typeof app.destroy === 'function') {
+        app.destroy();
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,179 @@
+/**
+ * Core types for the Workflow Library
+ */
+import type { Node, Edge, XYPosition } from "@xyflow/svelte";
+import { ConnectionLineType } from "@xyflow/svelte";
+/**
+ * Node category types for organizing nodes in the sidebar
+ * Based on Langflow's actual categories
+ */
+export type NodeCategory = "inputs" | "outputs" | "prompts" | "models" | "processing" | "logic" | "data" | "helpers" | "tools" | "vector stores" | "embeddings" | "memories" | "agents" | "bundles";
+/**
+ * Node input/output types
+ */
+export type NodeDataType = "string" | "text" | "number" | "integer" | "float" | "boolean" | "array" | "list" | "object" | "json" | "file" | "document" | "image" | "picture" | "audio" | "sound" | "video" | "movie" | "url" | "email" | "date" | "datetime" | "time";
+/**
+ * Node port configuration
+ */
+export interface NodePort {
+    id: string;
+    name: string;
+    type: "input" | "output";
+    dataType: NodeDataType;
+    required?: boolean;
+    description?: string;
+    defaultValue?: unknown;
+}
+/**
+ * Node configuration metadata
+ */
+export interface NodeMetadata {
+    id: string;
+    name: string;
+    description: string;
+    category: NodeCategory;
+    version: string;
+    icon?: string;
+    color?: string;
+    inputs: NodePort[];
+    outputs: NodePort[];
+    configSchema?: Record<string, unknown>;
+    tags?: string[];
+}
+/**
+ * Node configuration data
+ */
+export interface NodeConfig {
+    [key: string]: unknown;
+}
+/**
+ * Extended node type for workflows
+ */
+export interface WorkflowNode extends Node {
+    id: string;
+    type: string;
+    position: XYPosition;
+    deletable?: boolean;
+    data: {
+        label: string;
+        config: NodeConfig;
+        metadata: NodeMetadata;
+        isProcessing?: boolean;
+        error?: string;
+        nodeId?: string;
+    };
+}
+/**
+ * Extended edge type for workflows
+ */
+export interface WorkflowEdge extends Edge {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle?: string;
+    targetHandle?: string;
+    type?: ConnectionLineType;
+    selectable?: boolean;
+    deletable?: boolean;
+    data?: {
+        label?: string;
+        condition?: string;
+    };
+}
+/**
+ * Complete workflow definition
+ */
+export interface Workflow {
+    id: string;
+    name: string;
+    description?: string;
+    nodes: WorkflowNode[];
+    edges: WorkflowEdge[];
+    metadata?: {
+        version: string;
+        createdAt: string;
+        updatedAt: string;
+        author?: string;
+        tags?: string[];
+    };
+}
+/**
+ * API response types
+ */
+export interface ApiResponse<T> {
+    success: boolean;
+    data?: T;
+    error?: string;
+    message?: string;
+}
+export interface NodesResponse extends ApiResponse<NodeMetadata[]> {
+}
+export interface WorkflowResponse extends ApiResponse<Workflow> {
+}
+export interface WorkflowsResponse extends ApiResponse<Workflow[]> {
+}
+/**
+ * Workflow execution status
+ */
+export type ExecutionStatus = "idle" | "running" | "completed" | "failed" | "cancelled";
+/**
+ * Workflow execution result
+ */
+export interface ExecutionResult {
+    id: string;
+    workflowId: string;
+    status: ExecutionStatus;
+    startTime: string;
+    endTime?: string;
+    results?: Record<string, unknown>;
+    error?: string;
+    logs?: string[];
+}
+/**
+ * Library configuration
+ */
+export interface FlowDropConfig {
+    apiBaseUrl: string;
+    theme?: "light" | "dark" | "auto";
+    enableDebug?: boolean;
+    autoSave?: boolean;
+    autoSaveInterval?: number;
+    maxUndoSteps?: number;
+    nodeSpacing?: number;
+    gridSize?: number;
+}
+/**
+ * Event types for the workflow editor
+ */
+export interface WorkflowEvents {
+    nodeAdded: {
+        node: WorkflowNode;
+    };
+    nodeRemoved: {
+        nodeId: string;
+    };
+    nodeUpdated: {
+        node: WorkflowNode;
+    };
+    edgeAdded: {
+        edge: WorkflowEdge;
+    };
+    edgeRemoved: {
+        edgeId: string;
+    };
+    workflowSaved: {
+        workflow: Workflow;
+    };
+    workflowLoaded: {
+        workflow: Workflow;
+    };
+    executionStarted: {
+        workflowId: string;
+    };
+    executionCompleted: {
+        result: ExecutionResult;
+    };
+    executionFailed: {
+        error: string;
+    };
+}

package/dist/types/index.js

@@ -0,0 +1,4 @@
+/**
+ * Core types for the Workflow Library
+ */
+import { ConnectionLineType } from "@xyflow/svelte";

package/dist/utils/colors.d.ts

@@ -0,0 +1,121 @@
+/**
+ * Centralized color management for FlowDrop
+ * Ensures consistent category colors across sidebar and canvas
+ * Uses BEM syntax for CSS classes
+ */
+import type { NodeCategory } from "../types/index.js";
+/**
+ * Color configuration type for consistent color objects
+ */
+export interface ColorConfig {
+    background: string;
+    accent: string;
+    text: string;
+    border: string;
+}
+/**
+ * Category color mapping to reference tokens (CSS variables)
+ */
+export declare const CATEGORY_COLOR_TOKENS: Record<NodeCategory, string>;
+/**
+ * Data type color mapping to reference tokens (CSS variables)
+ */
+export declare const DATA_TYPE_COLOR_TOKENS: Record<string, string>;
+/**
+ * Get the reference color token for a category
+ */
+export declare function getCategoryColorToken(category: NodeCategory): string;
+/**
+ * Get the reference color token for a data type
+ */
+export declare function getDataTypeColorToken(dataType: string): string;
+/**
+ * Default colors for fallback cases
+ */
+export declare const DEFAULT_COLORS: ColorConfig;
+/**
+ * Get category colors
+ * @param category - The node category
+ * @returns The color configuration for the category
+ */
+export declare function getCategoryColors(category: NodeCategory): ColorConfig;
+/**
+ * Get category background color
+ * @param category - The node category
+ * @returns The background color class
+ */
+export declare function getCategoryBackground(category: NodeCategory): string;
+/**
+ * Get category accent color (for icons, highlights)
+ * @param category - The node category
+ * @returns The accent color class
+ */
+export declare function getCategoryAccent(category: NodeCategory): string;
+/**
+ * Get category text color
+ * @param category - The node category
+ * @returns The text color class
+ */
+export declare function getCategoryText(category: NodeCategory): string;
+/**
+ * Get category border color
+ * @param category - The node category
+ * @returns The border color class
+ */
+export declare function getCategoryBorder(category: NodeCategory): string;
+/**
+ * Get node colors based on category and status
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The color configuration for the node
+ */
+export declare function getNodeColors(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): ColorConfig;
+/**
+ * Get node background color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The background color class
+ */
+export declare function getNodeBackground(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+/**
+ * Get node accent color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The accent color class
+ */
+export declare function getNodeAccent(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+/**
+ * Get node text color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The text color class
+ */
+export declare function getNodeText(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+/**
+ * Get node border color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The border color class
+ */
+export declare function getNodeBorder(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+/**
+ * Data type color mapping for ports (used in WorkflowNode, etc.)
+ * These use BEM color classes for consistency
+ */
+export declare const dataTypeColors: Record<string, string>;
+/**
+ * Get data type color class
+ * @param dataType - The data type string
+ * @returns The color class for the data type
+ */
+export declare function getDataTypeColor(dataType: string): string;

package/dist/utils/colors.js

@@ -0,0 +1,240 @@
+/**
+ * Centralized color management for FlowDrop
+ * Ensures consistent category colors across sidebar and canvas
+ * Uses BEM syntax for CSS classes
+ */
+/**
+ * Category color mapping to reference tokens (CSS variables)
+ */
+export const CATEGORY_COLOR_TOKENS = {
+    "inputs": "var(--color-ref-emerald-500)",
+    "outputs": "var(--color-ref-blue-600)",
+    "prompts": "var(--color-ref-amber-500)",
+    "models": "var(--color-ref-indigo-500)",
+    "processing": "var(--color-ref-teal-500)",
+    "logic": "var(--color-ref-purple-600)",
+    "data": "var(--color-ref-orange-500)",
+    "helpers": "var(--color-ref-slate-500)",
+    "tools": "var(--color-ref-amber-500)",
+    "vector stores": "var(--color-ref-emerald-500)",
+    "embeddings": "var(--color-ref-indigo-500)",
+    "memories": "var(--color-ref-blue-600)",
+    "agents": "var(--color-ref-teal-500)",
+    "bundles": "var(--color-ref-slate-500)"
+};
+/**
+ * Data type color mapping to reference tokens (CSS variables)
+ */
+export const DATA_TYPE_COLOR_TOKENS = {
+    string: "var(--color-ref-emerald-500)",
+    text: "var(--color-ref-emerald-500)",
+    number: "var(--color-ref-blue-600)",
+    integer: "var(--color-ref-blue-600)",
+    float: "var(--color-ref-blue-600)",
+    boolean: "var(--color-ref-purple-600)",
+    array: "var(--color-ref-amber-500)",
+    list: "var(--color-ref-amber-500)",
+    object: "var(--color-ref-orange-500)",
+    json: "var(--color-ref-orange-500)",
+    file: "var(--color-ref-red-500)",
+    document: "var(--color-ref-red-500)",
+    image: "var(--color-ref-pink-500)",
+    picture: "var(--color-ref-pink-500)",
+    audio: "var(--color-ref-indigo-500)",
+    sound: "var(--color-ref-indigo-500)",
+    video: "var(--color-ref-teal-500)",
+    movie: "var(--color-ref-teal-500)",
+    url: "var(--color-ref-cyan-500)",
+    email: "var(--color-ref-cyan-500)",
+    date: "var(--color-ref-lime-500)",
+    datetime: "var(--color-ref-lime-500)",
+    time: "var(--color-ref-lime-500)"
+};
+/**
+ * Get the reference color token for a category
+ */
+export function getCategoryColorToken(category) {
+    return CATEGORY_COLOR_TOKENS[category] || "var(--color-ref-slate-500)";
+}
+/**
+ * Get the reference color token for a data type
+ */
+export function getDataTypeColorToken(dataType) {
+    return DATA_TYPE_COLOR_TOKENS[dataType.toLowerCase()] || "var(--color-ref-slate-500)";
+}
+/**
+ * Default colors for fallback cases
+ */
+export const DEFAULT_COLORS = {
+    background: "flowdrop-color--base-light",
+    accent: "flowdrop-color--neutral",
+    text: "flowdrop-color--base-text",
+    border: "flowdrop-color--base-border"
+};
+/**
+ * Get category colors
+ * @param category - The node category
+ * @returns The color configuration for the category
+ */
+export function getCategoryColors(category) {
+    const colorToken = CATEGORY_COLOR_TOKENS[category];
+    if (colorToken) {
+        // Convert color token to BEM color class
+        const colorName = colorToken.replace("var(--color-ref-", "").replace(")", "");
+        return {
+            background: `flowdrop-color--${colorName.split("-")[0]}-light`,
+            accent: `flowdrop-color--${colorName.split("-")[0]}`,
+            text: `flowdrop-color--${colorName.split("-")[0]}-text`,
+            border: `flowdrop-color--${colorName.split("-")[0]}-border`
+        };
+    }
+    return DEFAULT_COLORS;
+}
+/**
+ * Get category background color
+ * @param category - The node category
+ * @returns The background color class
+ */
+export function getCategoryBackground(category) {
+    return getCategoryColors(category).background;
+}
+/**
+ * Get category accent color (for icons, highlights)
+ * @param category - The node category
+ * @returns The accent color class
+ */
+export function getCategoryAccent(category) {
+    return getCategoryColors(category).accent;
+}
+/**
+ * Get category text color
+ * @param category - The node category
+ * @returns The text color class
+ */
+export function getCategoryText(category) {
+    return getCategoryColors(category).text;
+}
+/**
+ * Get category border color
+ * @param category - The node category
+ * @returns The border color class
+ */
+export function getCategoryBorder(category) {
+    return getCategoryColors(category).border;
+}
+/**
+ * Get node colors based on category and status
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The color configuration for the node
+ */
+export function getNodeColors(category, isError = false, isProcessing = false, isSelected = false) {
+    if (isError) {
+        return {
+            background: "flowdrop-color--error-light",
+            accent: "flowdrop-color--error",
+            text: "flowdrop-color--error-text",
+            border: "flowdrop-color--error-border"
+        };
+    }
+    if (isProcessing) {
+        return {
+            background: "flowdrop-color--warning-light",
+            accent: "flowdrop-color--warning",
+            text: "flowdrop-color--warning-text",
+            border: "flowdrop-color--warning-border"
+        };
+    }
+    if (isSelected) {
+        return {
+            background: "flowdrop-color--primary-light",
+            accent: "flowdrop-color--primary",
+            text: "flowdrop-color--primary-text",
+            border: "flowdrop-color--primary-border"
+        };
+    }
+    return getCategoryColors(category);
+}
+/**
+ * Get node background color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The background color class
+ */
+export function getNodeBackground(category, isError = false, isProcessing = false, isSelected = false) {
+    return getNodeColors(category, isError, isProcessing, isSelected).background;
+}
+/**
+ * Get node accent color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The accent color class
+ */
+export function getNodeAccent(category, isError = false, isProcessing = false, isSelected = false) {
+    return getNodeColors(category, isError, isProcessing, isSelected).accent;
+}
+/**
+ * Get node text color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The text color class
+ */
+export function getNodeText(category, isError = false, isProcessing = false, isSelected = false) {
+    return getNodeColors(category, isError, isProcessing, isSelected).text;
+}
+/**
+ * Get node border color
+ * @param category - The node category
+ * @param isError - Whether the node has an error
+ * @param isProcessing - Whether the node is processing
+ * @param isSelected - Whether the node is selected
+ * @returns The border color class
+ */
+export function getNodeBorder(category, isError = false, isProcessing = false, isSelected = false) {
+    return getNodeColors(category, isError, isProcessing, isSelected).border;
+}
+/**
+ * Data type color mapping for ports (used in WorkflowNode, etc.)
+ * These use BEM color classes for consistency
+ */
+export const dataTypeColors = {
+    string: "flowdrop-color--emerald",
+    text: "flowdrop-color--emerald",
+    number: "flowdrop-color--blue",
+    integer: "flowdrop-color--blue",
+    float: "flowdrop-color--blue",
+    boolean: "flowdrop-color--purple",
+    array: "flowdrop-color--amber",
+    list: "flowdrop-color--amber",
+    object: "flowdrop-color--orange",
+    json: "flowdrop-color--orange",
+    file: "flowdrop-color--red",
+    document: "flowdrop-color--red",
+    image: "flowdrop-color--pink",
+    picture: "flowdrop-color--pink",
+    audio: "flowdrop-color--indigo",
+    sound: "flowdrop-color--indigo",
+    video: "flowdrop-color--teal",
+    movie: "flowdrop-color--teal",
+    url: "flowdrop-color--cyan",
+    email: "flowdrop-color--cyan",
+    date: "flowdrop-color--lime",
+    datetime: "flowdrop-color--lime",
+    time: "flowdrop-color--lime"
+};
+/**
+ * Get data type color class
+ * @param dataType - The data type string
+ * @returns The color class for the data type
+ */
+export function getDataTypeColor(dataType) {
+    return dataTypeColors[dataType.toLowerCase()] || "flowdrop-color--slate";
+}

package/dist/utils/connections.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Connection validation utilities for FlowDrop
+ */
+import type { NodeMetadata, NodePort, NodeDataType, WorkflowNode, WorkflowEdge } from "../types/index.js";
+/**
+ * Check if two data types are compatible for connection
+ */
+export declare function areDataTypesCompatible(outputType: NodeDataType, inputType: NodeDataType): boolean;
+/**
+ * Get all possible connections from a source node to target nodes
+ */
+export declare function getPossibleConnections(sourceNode: WorkflowNode, targetNodes: WorkflowNode[], nodeTypes: NodeMetadata[]): Array<{
+    sourceNodeId: string;
+    sourcePortId: string;
+    sourcePort: NodePort;
+    targetNodeId: string;
+    targetPortId: string;
+    targetPort: NodePort;
+    compatible: boolean;
+}>;
+/**
+ * Validate if a specific connection is valid
+ */
+export declare function validateConnection(sourceNodeId: string, sourcePortId: string, targetNodeId: string, targetPortId: string, nodes: WorkflowNode[], nodeTypes: NodeMetadata[]): {
+    valid: boolean;
+    error?: string;
+};
+/**
+ * Get connection suggestions for a node
+ */
+export declare function getConnectionSuggestions(nodeId: string, nodes: WorkflowNode[], nodeTypes: NodeMetadata[]): Array<{
+    nodeId: string;
+    nodeName: string;
+    portId: string;
+    portName: string;
+    portType: "input" | "output";
+    dataType: NodeDataType;
+    compatible: boolean;
+}>;
+/**
+ * Check if a workflow has any cycles (prevent infinite loops)
+ */
+export declare function hasCycles(nodes: WorkflowNode[], edges: WorkflowEdge[]): boolean;
+/**
+ * Get the execution order for a workflow (topological sort)
+ */
+export declare function getExecutionOrder(nodes: WorkflowNode[], edges: WorkflowEdge[]): string[];