@spaethtech/svelte-ui 0.1.10

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

@@ -0,0 +1,80 @@
+import { getNodeMetadata } from "./decorators.js";
+import type { BaseNode } from "./BaseNode.js";
+import type { PortMetadata, Position } 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 declare class NodeInstance {
+    id: string;
+    node: BaseNode;
+    metadata: ReturnType<typeof getNodeMetadata>;
+    position: Position;
+    selected: boolean;
+    dirty: boolean;
+    executing: boolean;
+    error: string | null;
+    dataInputs: PortMetadata[];
+    dataOutputs: PortMetadata[];
+    flowInputs: PortMetadata[];
+    flowOutputs: PortMetadata[];
+    constructor(NodeClass: new () => BaseNode, id: string, position?: Position);
+    /**
+     * Initialize port arrays from metadata
+     */
+    private initializePorts;
+    /**
+     * Set up auto-execution effect (if executeInEditor is true)
+     */
+    private setupAutoExecution;
+    /**
+     * Execute the node with pull-based evaluation
+     */
+    execute(): string | void;
+    /**
+     * Get the value of an output port
+     */
+    getOutputValue(portKey: string): any;
+    /**
+     * Connect an input port to a source node's output port
+     */
+    connect(inputPortKey: string, sourceNode: NodeInstance, sourcePortKey: string): void;
+    /**
+     * Disconnect an input port
+     */
+    disconnect(inputPortKey: string): void;
+    /**
+     * Mark this node as dirty (needs re-execution)
+     */
+    markDirty(): void;
+    /**
+     * Set an input port value (for unconnected ports)
+     */
+    setInputValue(portKey: string, value: any): void;
+    /**
+     * Get all input ports (data + flow)
+     */
+    getAllInputs(): PortMetadata[];
+    /**
+     * Get all output ports (data + flow)
+     */
+    getAllOutputs(): PortMetadata[];
+    /**
+     * Clone this instance (new instance of same node type)
+     */
+    clone(newId: string): NodeInstance;
+    /**
+     * Serialize to JSON (for saving)
+     */
+    toJSON(): any;
+}

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

@@ -0,0 +1,241 @@
+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

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,9 @@
+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";