@spaethtech/svelte-ui 0.1.10 → 0.3.0

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

@@ -1,82 +0,0 @@
-import { VariableScope } from './types.js';
-/**
- * Variable store with three-level scope hierarchy
- */
-export interface VariableStore {
-    global: Record<string, any>;
-    project: Record<string, any>;
-    workflow: Record<string, any>;
-}
-/**
- * ExpressionEvaluator - Evaluates JavaScript expressions with variable substitution
- *
- * Supports:
- * - Single expressions: `{{ age * 2 }}` → returns number
- * - Template strings: `Hello {{ firstName }}!` → returns string
- * - Object properties: `{{ user.name }}`
- * - Complex expressions: `{{ items.length > 0 }}`
- *
- * Variable resolution order: Workflow → Project → Global
- *
- * @example
- * ```typescript
- * const evaluator = new ExpressionEvaluator({
- *   global: { pi: 3.14159 },
- *   project: { projectName: 'MyProject' },
- *   workflow: { age: 25 }
- * });
- *
- * evaluator.evaluate('{{ age * 2 }}'); // 50
- * evaluator.evaluate('Hello {{ projectName }}!'); // "Hello MyProject!"
- * evaluator.evaluate('{{ pi * 2 }}'); // 6.28318
- * ```
- */
-export declare class ExpressionEvaluator {
-    private variables;
-    constructor(variables?: Partial<VariableStore>);
-    /**
-     * Set a variable in the specified scope
-     */
-    setVariable(name: string, value: any, scope?: VariableScope): void;
-    /**
-     * Get a variable with automatic scope resolution
-     * Resolution order: Workflow → Project → Global
-     */
-    getVariable(name: string): any;
-    /**
-     * Get all variables merged with proper precedence
-     */
-    private getAllVariables;
-    /**
-     * Evaluate an expression string
-     *
-     * @param input - The expression string (may contain {{ }} delimiters)
-     * @returns The evaluated result
-     *
-     * @example
-     * ```typescript
-     * evaluate('{{ age }}')              // Variable lookup
-     * evaluate('{{ age * 2 }}')          // Expression evaluation
-     * evaluate('Hello {{ name }}!')      // Template string
-     * evaluate('{{ user.name }}')        // Object property
-     * evaluate('{{ items.length > 0 }}') // Boolean expression
-     * ```
-     */
-    evaluate(input: string): any;
-    /**
-     * Evaluate a single expression (without {{ }} delimiters)
-     */
-    private evaluateExpression;
-    /**
-     * Update the variable store
-     */
-    updateVariables(variables: Partial<VariableStore>): void;
-    /**
-     * Clear variables in a specific scope
-     */
-    clearScope(scope: VariableScope): void;
-    /**
-     * Get all variables in a specific scope
-     */
-    getScope(scope: VariableScope): Record<string, any>;
-}

package/dist/components/NodeGraph/ExpressionEvaluator.js

@@ -1,152 +0,0 @@
-import { VariableScope } from './types.js';
-/**
- * ExpressionEvaluator - Evaluates JavaScript expressions with variable substitution
- *
- * Supports:
- * - Single expressions: `{{ age * 2 }}` → returns number
- * - Template strings: `Hello {{ firstName }}!` → returns string
- * - Object properties: `{{ user.name }}`
- * - Complex expressions: `{{ items.length > 0 }}`
- *
- * Variable resolution order: Workflow → Project → Global
- *
- * @example
- * ```typescript
- * const evaluator = new ExpressionEvaluator({
- *   global: { pi: 3.14159 },
- *   project: { projectName: 'MyProject' },
- *   workflow: { age: 25 }
- * });
- *
- * evaluator.evaluate('{{ age * 2 }}'); // 50
- * evaluator.evaluate('Hello {{ projectName }}!'); // "Hello MyProject!"
- * evaluator.evaluate('{{ pi * 2 }}'); // 6.28318
- * ```
- */
-export class ExpressionEvaluator {
-    variables;
-    constructor(variables) {
-        this.variables = {
-            global: variables?.global || {},
-            project: variables?.project || {},
-            workflow: variables?.workflow || {}
-        };
-    }
-    /**
-     * Set a variable in the specified scope
-     */
-    setVariable(name, value, scope = VariableScope.Workflow) {
-        this.variables[scope][name] = value;
-    }
-    /**
-     * Get a variable with automatic scope resolution
-     * Resolution order: Workflow → Project → Global
-     */
-    getVariable(name) {
-        if (name in this.variables.workflow) {
-            return this.variables.workflow[name];
-        }
-        if (name in this.variables.project) {
-            return this.variables.project[name];
-        }
-        if (name in this.variables.global) {
-            return this.variables.global[name];
-        }
-        return undefined;
-    }
-    /**
-     * Get all variables merged with proper precedence
-     */
-    getAllVariables() {
-        return {
-            ...this.variables.global,
-            ...this.variables.project,
-            ...this.variables.workflow
-        };
-    }
-    /**
-     * Evaluate an expression string
-     *
-     * @param input - The expression string (may contain {{ }} delimiters)
-     * @returns The evaluated result
-     *
-     * @example
-     * ```typescript
-     * evaluate('{{ age }}')              // Variable lookup
-     * evaluate('{{ age * 2 }}')          // Expression evaluation
-     * evaluate('Hello {{ name }}!')      // Template string
-     * evaluate('{{ user.name }}')        // Object property
-     * evaluate('{{ items.length > 0 }}') // Boolean expression
-     * ```
-     */
-    evaluate(input) {
-        if (typeof input !== 'string') {
-            return input;
-        }
-        const expressionRegex = /\{\{([^}]+)\}\}/g;
-        const matches = input.match(expressionRegex);
-        // No expressions found - return as is
-        if (!matches) {
-            return input;
-        }
-        // Single expression that spans entire string - return evaluated value
-        if (matches.length === 1 && input.trim() === matches[0].trim()) {
-            const expression = matches[0].replace(/\{\{|\}\}/g, '').trim();
-            return this.evaluateExpression(expression);
-        }
-        // Template string with multiple expressions - replace each and return string
-        let result = input;
-        for (const match of matches) {
-            const expression = match.replace(/\{\{|\}\}/g, '').trim();
-            const value = this.evaluateExpression(expression);
-            result = result.replace(match, String(value ?? ''));
-        }
-        return result;
-    }
-    /**
-     * Evaluate a single expression (without {{ }} delimiters)
-     */
-    evaluateExpression(expression) {
-        try {
-            // Create a function that evaluates the expression with variables in scope
-            const variables = this.getAllVariables();
-            const varNames = Object.keys(variables);
-            const varValues = Object.values(variables);
-            // Create function with variables as parameters
-            // eslint-disable-next-line no-new-func
-            const fn = new Function(...varNames, `return (${expression});`);
-            // Execute with variable values
-            return fn(...varValues);
-        }
-        catch (error) {
-            console.error(`Error evaluating expression: ${expression}`, error);
-            return undefined;
-        }
-    }
-    /**
-     * Update the variable store
-     */
-    updateVariables(variables) {
-        if (variables.global) {
-            this.variables.global = { ...this.variables.global, ...variables.global };
-        }
-        if (variables.project) {
-            this.variables.project = { ...this.variables.project, ...variables.project };
-        }
-        if (variables.workflow) {
-            this.variables.workflow = { ...this.variables.workflow, ...variables.workflow };
-        }
-    }
-    /**
-     * Clear variables in a specific scope
-     */
-    clearScope(scope) {
-        this.variables[scope] = {};
-    }
-    /**
-     * Get all variables in a specific scope
-     */
-    getScope(scope) {
-        return { ...this.variables[scope] };
-    }
-}

package/dist/components/NodeGraph/Node.svelte

@@ -1,100 +0,0 @@
-<script lang="ts">
-    import type { NodeInstance } from "./NodeInstance.svelte.js";
-    import type { Snippet } from "svelte";
-
-    interface Props {
-        instance: NodeInstance;
-        selected?: boolean;
-        children?: Snippet;
-    }
-
-    let { instance, selected = false, children }: Props = $props();
-
-    const metadata = instance.metadata;
-</script>
-
-<div
-    class="node"
-    class:selected
-    class:executing={instance.executing}
-    class:error={instance.error}
-    style:left="{instance.position.x}px"
-    style:top="{instance.position.y}px"
-    style:border-color={selected
-        ? "var(--color-primary)"
-        : "var(--color-border)"}
->
-    <!-- Header -->
-    <div
-        class="node-header px-3 py-2 text-white font-medium text-sm"
-        style:background-color={metadata.node.color || "var(--color-primary)"}
-    >
-        {metadata.node.title}
-    </div>
-
-    <!-- Body -->
-    <div class="node-body p-3 bg-[var(--color-background)]">
-        <!-- Input ports -->
-        <div class="inputs space-y-2">
-            {#each instance.getAllInputs() as port}
-                <div class="port-row flex items-center justify-between gap-2">
-                    <span class="text-sm text-[var(--color-text)]"
-                        >{port.label}</span
-                    >
-                    <!-- Port rendering TODO -->
-                </div>
-            {/each}
-        </div>
-
-        <!-- Custom content -->
-        {#if children}
-            {@render children()}
-        {/if}
-
-        <!-- Output ports -->
-        <div class="outputs space-y-2 mt-2">
-            {#each instance.getAllOutputs() as port}
-                <div class="port-row flex items-center justify-between gap-2">
-                    <span class="text-sm text-[var(--color-text)]"
-                        >{port.label}</span
-                    >
-                    <!-- Port rendering TODO -->
-                </div>
-            {/each}
-        </div>
-    </div>
-
-    {#if instance.error}
-        <div class="node-error px-3 py-1 bg-red-100 text-red-700 text-xs">
-            {instance.error}
-        </div>
-    {/if}
-</div>
-
-<style>
-    .node {
-        position: absolute;
-        min-width: 200px;
-        border: 2px solid;
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        cursor: move;
-    }
-
-    .node.selected {
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-    }
-
-    .node.executing {
-        opacity: 0.8;
-    }
-
-    .node.error {
-        border-color: #dc2626 !important;
-    }
-
-    .node-header {
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-    }
-</style>

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

@@ -1,10 +0,0 @@
-import type { NodeInstance } from "./NodeInstance.svelte.js";
-import type { Snippet } from "svelte";
-interface Props {
-    instance: NodeInstance;
-    selected?: boolean;
-    children?: Snippet;
-}
-declare const Node: import("svelte").Component<Props, {}, "">;
-type Node = ReturnType<typeof Node>;
-export default Node;

package/dist/components/NodeGraph/NodeGraph.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-  import type { NodeInstance } from './NodeInstance.svelte.js';
-  import type { Snippet } from 'svelte';
-
-  interface Props {
-    nodes?: NodeInstance[];
-    width?: number;
-    height?: number;
-    gridSize?: number;
-    showGrid?: boolean;
-    editable?: boolean;
-    children?: Snippet;
-  }
-
-  let {
-    nodes = [],
-    width,
-    height,
-    gridSize = 20,
-    showGrid = true,
-    editable = true,
-    children
-  }: Props = $props();
-</script>
-
-<div
-  class="nodegraph-canvas relative overflow-hidden bg-[var(--color-background)]"
-  style:width={width ? `${width}px` : '100%'}
-  style:height={height ? `${height}px` : '100%'}
->
-  {#if showGrid}
-    <div class="grid-pattern absolute inset-0 pointer-events-none"></div>
-  {/if}
-
-  <!-- Nodes and edges will be rendered here -->
-  <div class="nodes-container absolute inset-0">
-    <!-- TODO: Render nodes and edges -->
-  </div>
-
-  {#if children}
-    {@render children()}
-  {/if}
-</div>
-
-<style>
-  .grid-pattern {
-    background-image:
-      linear-gradient(to right, rgba(128, 128, 128, 0.1) 1px, transparent 1px),
-      linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 1px, transparent 1px);
-    background-size: 20px 20px;
-  }
-</style>

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

@@ -1,14 +0,0 @@
-import type { NodeInstance } from './NodeInstance.svelte.js';
-import type { Snippet } from 'svelte';
-interface Props {
-    nodes?: NodeInstance[];
-    width?: number;
-    height?: number;
-    gridSize?: number;
-    showGrid?: boolean;
-    editable?: boolean;
-    children?: Snippet;
-}
-declare const NodeGraph: import("svelte").Component<Props, {}, "">;
-type NodeGraph = ReturnType<typeof NodeGraph>;
-export default NodeGraph;

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

@@ -1,80 +0,0 @@
-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;
-}