@spaethtech/svelte-ui 0.1.10 → 0.3.1-dev.3.e16df24

package/dist/components/NodeGraph/NodeInstance.svelte.js

@@ -1,241 +0,0 @@
-import { getNodeMetadata } from "./decorators.js";
-import { PortMode } from "./types.js";
-/**
- * NodeInstance - Reactive wrapper for node definitions
- *
- * Wraps a BaseNode class with Svelte 5 runes for reactivity:
- * - `$state` for position, selection, port values, dirty tracking
- * - `$effect` for reactive connections and auto-execution
- *
- * @example
- * ```typescript
- * const mathNode = new NodeInstance(MathNode, 'node-1');
- * mathNode.position = { x: 100, y: 100 };
- * mathNode.execute();
- * ```
- */
-export class NodeInstance {
-    id;
-    node;
-    metadata;
-    // Reactive state
-    position = $state({ x: 0, y: 0 });
-    selected = $state(false);
-    dirty = $state(true);
-    executing = $state(false);
-    error = $state(null);
-    // Port arrays with runtime data
-    dataInputs = $state([]);
-    dataOutputs = $state([]);
-    flowInputs = $state([]);
-    flowOutputs = $state([]);
-    constructor(NodeClass, id, position) {
-        this.id = id;
-        this.node = new NodeClass();
-        this.metadata = getNodeMetadata(NodeClass);
-        if (position) {
-            this.position = position;
-        }
-        // Initialize port arrays with runtime state
-        this.initializePorts();
-        // Set up auto-execution if enabled
-        if (this.metadata.node.executeInEditor) {
-            this.setupAutoExecution();
-        }
-    }
-    /**
-     * Initialize port arrays from metadata
-     */
-    initializePorts() {
-        // Clone metadata and add runtime state
-        this.dataInputs = this.metadata.inputs
-            .filter((p) => p.mode === PortMode.Data)
-            .map((p) => ({
-            ...p,
-            value: p.defaultValue,
-            connected: false,
-            sourceNode: undefined,
-            sourcePort: undefined,
-        }));
-        this.dataOutputs = this.metadata.outputs
-            .filter((p) => p.mode === PortMode.Data)
-            .map((p) => ({ ...p, value: undefined }));
-        this.flowInputs = this.metadata.inputs
-            .filter((p) => p.mode === PortMode.Flow)
-            .map((p) => ({
-            ...p,
-            connected: false,
-            sourceNode: undefined,
-            sourcePort: undefined,
-        }));
-        this.flowOutputs = this.metadata.outputs
-            .filter((p) => p.mode === PortMode.Flow)
-            .map((p) => ({ ...p }));
-        // Initialize node properties with default values
-        for (const port of this.dataInputs) {
-            if (port.defaultValue !== undefined) {
-                this.node[port.key] = port.defaultValue;
-            }
-        }
-    }
-    /**
-     * Set up auto-execution effect (if executeInEditor is true)
-     */
-    setupAutoExecution() {
-        $effect(() => {
-            // Watch all data input values
-            this.dataInputs.forEach((input) => input.value);
-            // Auto-execute when any input changes
-            this.execute();
-        });
-    }
-    /**
-     * Execute the node with pull-based evaluation
-     */
-    execute() {
-        // Skip if already up-to-date
-        if (!this.dirty) {
-            return;
-        }
-        this.executing = true;
-        this.error = null;
-        try {
-            // Pull from connected sources (recursive)
-            for (const port of this.dataInputs) {
-                if (port.connected && port.sourceNode) {
-                    port.sourceNode.execute(); // Recursive pull
-                    const value = port.sourceNode.getOutputValue(port.sourcePort);
-                    port.value = value;
-                    this.node[port.key] = value;
-                }
-                else {
-                    // Use local value
-                    this.node[port.key] = port.value ?? port.defaultValue;
-                }
-            }
-            // Execute the node
-            const flowOutput = this.node.execute();
-            // Update output values
-            for (const port of this.dataOutputs) {
-                port.value = this.node[port.key];
-            }
-            // Mark as clean
-            this.dirty = false;
-            // Return flow output for flow-based execution
-            return flowOutput;
-        }
-        catch (err) {
-            this.error = err instanceof Error ? err.message : String(err);
-            console.error(`Error executing node ${this.id}:`, err);
-        }
-        finally {
-            this.executing = false;
-        }
-    }
-    /**
-     * Get the value of an output port
-     */
-    getOutputValue(portKey) {
-        const port = this.dataOutputs.find((p) => p.key === portKey);
-        return port?.value;
-    }
-    /**
-     * Connect an input port to a source node's output port
-     */
-    connect(inputPortKey, sourceNode, sourcePortKey) {
-        const inputPort = this.dataInputs.find((p) => p.key === inputPortKey);
-        if (!inputPort) {
-            throw new Error(`Input port ${inputPortKey} not found on node ${this.id}`);
-        }
-        const sourcePort = sourceNode.dataOutputs.find((p) => p.key === sourcePortKey);
-        if (!sourcePort) {
-            throw new Error(`Output port ${sourcePortKey} not found on source node ${sourceNode.id}`);
-        }
-        // Validate type compatibility (if types are specified)
-        if (inputPort.dataType &&
-            sourcePort.dataType &&
-            inputPort.dataType !== sourcePort.dataType) {
-            console.warn(`Type mismatch: ${sourcePort.dataType} → ${inputPort.dataType}`);
-        }
-        // Set connection
-        inputPort.connected = true;
-        inputPort.sourceNode = sourceNode;
-        inputPort.sourcePort = sourcePortKey;
-        // Mark as dirty
-        this.markDirty();
-    }
-    /**
-     * Disconnect an input port
-     */
-    disconnect(inputPortKey) {
-        const inputPort = this.dataInputs.find((p) => p.key === inputPortKey);
-        if (!inputPort) {
-            return;
-        }
-        inputPort.connected = false;
-        inputPort.sourceNode = undefined;
-        inputPort.sourcePort = undefined;
-        // Mark as dirty
-        this.markDirty();
-    }
-    /**
-     * Mark this node as dirty (needs re-execution)
-     */
-    markDirty() {
-        this.dirty = true;
-    }
-    /**
-     * Set an input port value (for unconnected ports)
-     */
-    setInputValue(portKey, value) {
-        const inputPort = this.dataInputs.find((p) => p.key === portKey);
-        if (!inputPort) {
-            return;
-        }
-        inputPort.value = value;
-        this.node[portKey] = value;
-        // Mark as dirty
-        this.markDirty();
-    }
-    /**
-     * Get all input ports (data + flow)
-     */
-    getAllInputs() {
-        return [...this.flowInputs, ...this.dataInputs];
-    }
-    /**
-     * Get all output ports (data + flow)
-     */
-    getAllOutputs() {
-        return [...this.flowOutputs, ...this.dataOutputs];
-    }
-    /**
-     * Clone this instance (new instance of same node type)
-     */
-    clone(newId) {
-        const NodeClass = this.node.constructor;
-        const clone = new NodeInstance(NodeClass, newId, { ...this.position });
-        // Copy input values (but not connections)
-        for (let i = 0; i < this.dataInputs.length; i++) {
-            clone.dataInputs[i].value = this.dataInputs[i].value;
-        }
-        return clone;
-    }
-    /**
-     * Serialize to JSON (for saving)
-     */
-    toJSON() {
-        return {
-            id: this.id,
-            type: this.node.constructor.name,
-            position: this.position,
-            inputs: this.dataInputs.map((p) => ({
-                key: p.key,
-                value: p.value,
-                connected: p.connected,
-                sourceNodeId: p.sourceNode?.id,
-                sourcePort: p.sourcePort,
-            })),
-        };
-    }
-}

package/dist/components/NodeGraph/NodePort.svelte

@@ -1,75 +0,0 @@
-<script lang="ts">
-  import type { PortMetadata } from './types.js';
-
-  interface Props {
-    port: PortMetadata;
-    isInput: boolean;
-    connected?: boolean;
-    onConnect?: (port: PortMetadata) => void;
-    onDisconnect?: (port: PortMetadata) => void;
-  }
-
-  let {
-    port,
-    isInput,
-    connected = false,
-    onConnect,
-    onDisconnect
-  }: Props = $props();
-
-  function handleClick() {
-    if (connected && onDisconnect) {
-      onDisconnect(port);
-    } else if (onConnect) {
-      onConnect(port);
-    }
-  }
-</script>
-
-<button
-  class="port"
-  class:input={isInput}
-  class:output={!isInput}
-  class:connected
-  onclick={handleClick}
-  aria-label="{isInput ? 'Input' : 'Output'} port: {port.label}"
->
-  <div class="port-circle"></div>
-</button>
-
-<style>
-  .port {
-    position: relative;
-    width: 16px;
-    height: 16px;
-    padding: 0;
-    border: none;
-    background: transparent;
-    cursor: pointer;
-  }
-
-  .port-circle {
-    width: 12px;
-    height: 12px;
-    border: 2px solid var(--color-border);
-    border-radius: 50%;
-    background: var(--color-background);
-    transition: all 0.2s;
-  }
-
-  .port:hover .port-circle {
-    transform: scale(1.2);
-    border-color: var(--color-primary);
-  }
-
-  .port.connected .port-circle {
-    background: var(--color-primary);
-    border-color: var(--color-primary);
-  }
-
-  .port:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
-    border-radius: 50%;
-  }
-</style>

package/dist/components/NodeGraph/NodePort.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { PortMetadata } from './types.js';
-interface Props {
-    port: PortMetadata;
-    isInput: boolean;
-    connected?: boolean;
-    onConnect?: (port: PortMetadata) => void;
-    onDisconnect?: (port: PortMetadata) => void;
-}
-declare const NodePort: import("svelte").Component<Props, {}, "">;
-type NodePort = ReturnType<typeof NodePort>;
-export default NodePort;

package/dist/components/NodeGraph/decorators.d.ts

@@ -1,81 +0,0 @@
-import type { NodeOptions, InputOptions, OutputOptions, PortMetadata, NodeMetadata } from './types.js';
-/**
- * @Node decorator - Defines a node type
- *
- * @example
- * ```typescript
- * @Node({
- *   title: 'Math Operation',
- *   description: 'Performs basic math',
- *   color: '#10b981',
- *   category: 'math',
- *   executeInEditor: true
- * })
- * class MathNode extends BaseNode {
- *   // ...
- * }
- * ```
- */
-export declare function Node(options: NodeOptions): <T extends {
-    new (...args: any[]): any;
-}>(constructor: T) => T;
-/**
- * @Input decorator - Defines an input port on a node
- *
- * @example
- * ```typescript
- * // Data input with control
- * @Input({ label: 'A', dataType: 'number', control: 'number' })
- * a: number = 0;
- *
- * // Flow input
- * @Input({ mode: PortMode.Flow })
- * flow?: any;
- *
- * // Expression input (no port)
- * @Input({ label: 'Expression', control: 'expression', showPort: false })
- * expression: string = '0';
- * ```
- */
-export declare function Input(options?: InputOptions): (target: any, propertyKey: string) => void;
-/**
- * @Output decorator - Defines an output port on a node
- *
- * @example
- * ```typescript
- * // Data output
- * @Output({ label: 'Result', dataType: 'number' })
- * result: number = 0;
- *
- * // Flow output
- * @Output({ mode: PortMode.Flow, label: 'Done' })
- * done?: any;
- *
- * // Multiple flow outputs (branching)
- * @Output({ mode: PortMode.Flow, label: 'True' })
- * onTrue?: any;
- *
- * @Output({ mode: PortMode.Flow, label: 'False' })
- * onFalse?: any;
- * ```
- */
-export declare function Output(options?: OutputOptions): (target: any, propertyKey: string) => void;
-/**
- * Get complete metadata for a node class
- *
- * @param nodeClass - The node class (must have decorators)
- * @returns Complete node metadata including inputs and outputs
- */
-export declare function getNodeMetadata(nodeClass: any): NodeMetadata;
-/**
- * Get input ports for a node class
- */
-export declare function getInputPorts(nodeClass: any): PortMetadata[];
-/**
- * Get output ports for a node class
- */
-export declare function getOutputPorts(nodeClass: any): PortMetadata[];
-/**
- * Get node options for a node class
- */
-export declare function getNodeOptions(nodeClass: any): NodeOptions | undefined;

package/dist/components/NodeGraph/decorators.js

@@ -1,148 +0,0 @@
-import { PortMode } from './types.js';
-/**
- * WeakMaps for storing metadata
- * Using WeakMaps ensures automatic garbage collection and no memory leaks
- */
-const nodeMetadata = new WeakMap();
-const inputMetadata = new WeakMap();
-const outputMetadata = new WeakMap();
-/**
- * @Node decorator - Defines a node type
- *
- * @example
- * ```typescript
- * @Node({
- *   title: 'Math Operation',
- *   description: 'Performs basic math',
- *   color: '#10b981',
- *   category: 'math',
- *   executeInEditor: true
- * })
- * class MathNode extends BaseNode {
- *   // ...
- * }
- * ```
- */
-export function Node(options) {
-    return function (constructor) {
-        nodeMetadata.set(constructor.prototype, options);
-        return constructor;
-    };
-}
-/**
- * @Input decorator - Defines an input port on a node
- *
- * @example
- * ```typescript
- * // Data input with control
- * @Input({ label: 'A', dataType: 'number', control: 'number' })
- * a: number = 0;
- *
- * // Flow input
- * @Input({ mode: PortMode.Flow })
- * flow?: any;
- *
- * // Expression input (no port)
- * @Input({ label: 'Expression', control: 'expression', showPort: false })
- * expression: string = '0';
- * ```
- */
-export function Input(options = {}) {
-    return function (target, propertyKey) {
-        let inputs = inputMetadata.get(target);
-        if (!inputs) {
-            inputs = new Map();
-            inputMetadata.set(target, inputs);
-        }
-        // Smart defaults
-        const port = {
-            key: propertyKey,
-            label: options.label || propertyKey,
-            dataType: options.dataType,
-            mode: options.mode || PortMode.Data,
-            control: options.control,
-            showPort: options.showPort !== false, // Default true
-            alwaysShowControl: options.alwaysShowControl,
-            defaultValue: options.defaultValue,
-            options: options.options
-        };
-        inputs.set(propertyKey, port);
-    };
-}
-/**
- * @Output decorator - Defines an output port on a node
- *
- * @example
- * ```typescript
- * // Data output
- * @Output({ label: 'Result', dataType: 'number' })
- * result: number = 0;
- *
- * // Flow output
- * @Output({ mode: PortMode.Flow, label: 'Done' })
- * done?: any;
- *
- * // Multiple flow outputs (branching)
- * @Output({ mode: PortMode.Flow, label: 'True' })
- * onTrue?: any;
- *
- * @Output({ mode: PortMode.Flow, label: 'False' })
- * onFalse?: any;
- * ```
- */
-export function Output(options = {}) {
-    return function (target, propertyKey) {
-        let outputs = outputMetadata.get(target);
-        if (!outputs) {
-            outputs = new Map();
-            outputMetadata.set(target, outputs);
-        }
-        const port = {
-            key: propertyKey,
-            label: options.label || propertyKey,
-            dataType: options.dataType,
-            mode: options.mode || PortMode.Data
-        };
-        outputs.set(propertyKey, port);
-    };
-}
-/**
- * Get complete metadata for a node class
- *
- * @param nodeClass - The node class (must have decorators)
- * @returns Complete node metadata including inputs and outputs
- */
-export function getNodeMetadata(nodeClass) {
-    const prototype = nodeClass.prototype;
-    const node = nodeMetadata.get(prototype);
-    if (!node) {
-        throw new Error(`Class ${nodeClass.name} is missing @Node decorator`);
-    }
-    const inputsMap = inputMetadata.get(prototype) || new Map();
-    const outputsMap = outputMetadata.get(prototype) || new Map();
-    return {
-        node,
-        inputs: Array.from(inputsMap.values()),
-        outputs: Array.from(outputsMap.values())
-    };
-}
-/**
- * Get input ports for a node class
- */
-export function getInputPorts(nodeClass) {
-    const inputsMap = inputMetadata.get(nodeClass.prototype) || new Map();
-    return Array.from(inputsMap.values());
-}
-/**
- * Get output ports for a node class
- */
-export function getOutputPorts(nodeClass) {
-    const outputsMap = outputMetadata.get(nodeClass.prototype) || new Map();
-    return Array.from(outputsMap.values());
-}
-/**
- * Get node options for a node class
- */
-export function getNodeOptions(nodeClass) {
-    return nodeMetadata.get(nodeClass.prototype);
-}

package/dist/components/NodeGraph/index.d.ts

@@ -1,9 +0,0 @@
-export { default as NodeGraph } from "./NodeGraph.svelte";
-export { default as Node } from "./Node.svelte";
-export { default as NodePort } from "./NodePort.svelte";
-export { default as Edge } from "./Edge.svelte";
-export { Node as NodeDecorator, Input, Output } from "./decorators.js";
-export { BaseNode } from "./BaseNode.js";
-export { NodeInstance } from "./NodeInstance.svelte.js";
-export { ExpressionEvaluator } from "./ExpressionEvaluator.js";
-export * from "./types.js";

package/dist/components/NodeGraph/index.js

@@ -1,9 +0,0 @@
-export { default as NodeGraph } from "./NodeGraph.svelte";
-export { default as Node } from "./Node.svelte";
-export { default as NodePort } from "./NodePort.svelte";
-export { default as Edge } from "./Edge.svelte";
-export { Node as NodeDecorator, Input, Output } from "./decorators.js";
-export { BaseNode } from "./BaseNode.js";
-export { NodeInstance } from "./NodeInstance.svelte.js";
-export { ExpressionEvaluator } from "./ExpressionEvaluator.js";
-export * from "./types.js";

package/dist/components/NodeGraph/types.d.ts

@@ -1,94 +0,0 @@
-/**
- * Port mode determines the type of connection
- */
-export declare enum PortMode {
-    Data = "data",// Pass values between nodes
-    Flow = "flow"
-}
-/**
- * Control type for input rendering
- */
-export declare enum ControlType {
-    Port = "port",// Port only (default for connected inputs)
-    Text = "text",// Text input
-    Number = "number",// Number input
-    Expression = "expression",// Expression editor with {{ }} support
-    Select = "select",// Dropdown
-    Checkbox = "checkbox",// Boolean toggle
-    Textarea = "textarea",// Multi-line text
-    Slider = "slider",// Numeric slider
-    Color = "color",// Color picker
-    None = "none"
-}
-/**
- * Variable scope hierarchy
- */
-export declare enum VariableScope {
-    Global = "global",// Available across all projects
-    Project = "project",// Available within a project
-    Workflow = "workflow"
-}
-/**
- * Options for @Node decorator
- */
-export interface NodeOptions {
-    title: string;
-    description?: string;
-    color?: string;
-    category?: string;
-    executeInEditor?: boolean;
-}
-/**
- * Options for @Input decorator
- */
-export interface InputOptions {
-    label?: string;
-    dataType?: string;
-    mode?: PortMode;
-    control?: ControlType;
-    showPort?: boolean;
-    alwaysShowControl?: boolean;
-    defaultValue?: any;
-    options?: string[];
-}
-/**
- * Options for @Output decorator
- */
-export interface OutputOptions {
-    label?: string;
-    dataType?: string;
-    mode?: PortMode;
-}
-/**
- * Port metadata stored by decorators
- */
-export interface PortMetadata {
-    key: string;
-    label: string;
-    dataType?: string;
-    mode: PortMode;
-    control?: ControlType;
-    showPort?: boolean;
-    alwaysShowControl?: boolean;
-    defaultValue?: any;
-    options?: string[];
-    value?: any;
-    connected?: boolean;
-    sourceNode?: any;
-    sourcePort?: string;
-}
-/**
- * Complete node metadata from all decorators
- */
-export interface NodeMetadata {
-    node: NodeOptions;
-    inputs: PortMetadata[];
-    outputs: PortMetadata[];
-}
-/**
- * Position in 2D space
- */
-export interface Position {
-    x: number;
-    y: number;
-}

package/dist/components/NodeGraph/types.js

@@ -1,33 +0,0 @@
-/**
- * Port mode determines the type of connection
- */
-export var PortMode;
-(function (PortMode) {
-    PortMode["Data"] = "data";
-    PortMode["Flow"] = "flow"; // Control execution order
-})(PortMode || (PortMode = {}));
-/**
- * Control type for input rendering
- */
-export var ControlType;
-(function (ControlType) {
-    ControlType["Port"] = "port";
-    ControlType["Text"] = "text";
-    ControlType["Number"] = "number";
-    ControlType["Expression"] = "expression";
-    ControlType["Select"] = "select";
-    ControlType["Checkbox"] = "checkbox";
-    ControlType["Textarea"] = "textarea";
-    ControlType["Slider"] = "slider";
-    ControlType["Color"] = "color";
-    ControlType["None"] = "none"; // No UI control (port only)
-})(ControlType || (ControlType = {}));
-/**
- * Variable scope hierarchy
- */
-export var VariableScope;
-(function (VariableScope) {
-    VariableScope["Global"] = "global";
-    VariableScope["Project"] = "project";
-    VariableScope["Workflow"] = "workflow"; // Available within a specific workflow/graph
-})(VariableScope || (VariableScope = {}));