@spaethtech/svelte-ui 0.1.10

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

@@ -0,0 +1,37 @@
+import type { Snippet } from "svelte";
+type Option = Record<string, any> & {
+    value: string;
+    label: string;
+};
+interface Props {
+    options?: Option[];
+    value?: string | string[];
+    multiSelect?: boolean;
+    showCheckboxes?: boolean;
+    maxVisibleItems?: number;
+    itemHeight?: number;
+    minHeight?: number;
+    class?: string;
+    containerClass?: string;
+    disabled?: boolean;
+    children?: Snippet;
+    url?: string;
+    searchParam?: string;
+    transform?: (apiResponse: any) => Option[];
+    debounceMs?: number;
+    maxResults?: number;
+    headers?: Record<string, string>;
+    searchTerm?: string;
+    showLoading?: boolean;
+    loadingText?: string;
+    showError?: boolean;
+    errorText?: string;
+    emptyText?: string;
+    onError?: (error: Error) => void;
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onSelection?: (option: Option | Option[]) => void;
+}
+declare const ListView: import("svelte").Component<Props, {}, "value" | "searchTerm">;
+type ListView = ReturnType<typeof ListView>;
+export default ListView;

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

@@ -0,0 +1,2 @@
+export { default } from './ListView.svelte';
+export { default as ListView } from './ListView.svelte';

package/dist/components/ListView/index.js

@@ -0,0 +1,2 @@
+export { default } from './ListView.svelte';
+export { default as ListView } from './ListView.svelte';

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

@@ -0,0 +1,57 @@
+/**
+ * BaseNode - Abstract base class for all node definitions
+ *
+ * All custom nodes must extend this class and implement the execute() method.
+ *
+ * @example
+ * ```typescript
+ * @Node({
+ *   title: 'Math Operation',
+ *   color: '#10b981',
+ *   executeInEditor: true
+ * })
+ * export class MathNode extends BaseNode {
+ *   @Input({ label: 'A', dataType: 'number' })
+ *   a: number = 0;
+ *
+ *   @Input({ label: 'B', dataType: 'number' })
+ *   b: number = 0;
+ *
+ *   @Output({ label: 'Result', dataType: 'number' })
+ *   result: number = 0;
+ *
+ *   execute() {
+ *     this.result = this.a + this.b;
+ *   }
+ * }
+ * ```
+ */
+export declare abstract class BaseNode {
+    /**
+     * Execute the node's logic
+     *
+     * - For data nodes: Update output properties based on input properties
+     * - For flow nodes: Perform side effects and optionally return the flow output to follow
+     *
+     * @returns void for normal execution, or string (flow output key) for branching nodes
+     *
+     * @example
+     * ```typescript
+     * // Data node
+     * execute() {
+     *   this.result = this.a + this.b;
+     * }
+     *
+     * // Flow node
+     * execute() {
+     *   console.log(this.message);
+     * }
+     *
+     * // Branch node (multiple flow outputs)
+     * execute() {
+     *   return this.condition ? 'onTrue' : 'onFalse';
+     * }
+     * ```
+     */
+    abstract execute(): void | string;
+}

package/dist/components/NodeGraph/BaseNode.js

@@ -0,0 +1,30 @@
+/**
+ * BaseNode - Abstract base class for all node definitions
+ *
+ * All custom nodes must extend this class and implement the execute() method.
+ *
+ * @example
+ * ```typescript
+ * @Node({
+ *   title: 'Math Operation',
+ *   color: '#10b981',
+ *   executeInEditor: true
+ * })
+ * export class MathNode extends BaseNode {
+ *   @Input({ label: 'A', dataType: 'number' })
+ *   a: number = 0;
+ *
+ *   @Input({ label: 'B', dataType: 'number' })
+ *   b: number = 0;
+ *
+ *   @Output({ label: 'Result', dataType: 'number' })
+ *   result: number = 0;
+ *
+ *   execute() {
+ *     this.result = this.a + this.b;
+ *   }
+ * }
+ * ```
+ */
+export class BaseNode {
+}

package/dist/components/NodeGraph/Edge.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    interface Props {
+        from: { x: number; y: number };
+        to: { x: number; y: number };
+        selected?: boolean;
+        color?: string;
+        animated?: boolean;
+    }
+
+    let {
+        from,
+        to,
+        selected = false,
+        color = "var(--color-border)",
+        animated = false,
+    }: Props = $props();
+
+    // Calculate SVG path for bezier curve
+    const path = $derived.by(() => {
+        const dx = to.x - from.x;
+        const dy = to.y - from.y;
+
+        // Control point offset for smooth curves
+        const offset = Math.min(Math.abs(dx) * 0.5, 100);
+
+        return `M ${from.x} ${from.y} C ${from.x + offset} ${from.y}, ${to.x - offset} ${to.y}, ${to.x} ${to.y}`;
+    });
+</script>
+
+<svg
+    class="edge absolute inset-0 pointer-events-none"
+    style="overflow: visible;"
+>
+    <path
+        d={path}
+        fill="none"
+        stroke={selected ? "var(--color-primary)" : color}
+        stroke-width={selected ? "3" : "2"}
+        class:animated
+    />
+</svg>
+
+<style>
+    .edge path {
+        transition:
+            stroke 0.2s,
+            stroke-width 0.2s;
+    }
+
+    .edge path.animated {
+        stroke-dasharray: 5, 5;
+        animation: dash 1s linear infinite;
+    }
+
+    @keyframes dash {
+        to {
+            stroke-dashoffset: -10;
+        }
+    }
+</style>

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

@@ -0,0 +1,16 @@
+interface Props {
+    from: {
+        x: number;
+        y: number;
+    };
+    to: {
+        x: number;
+        y: number;
+    };
+    selected?: boolean;
+    color?: string;
+    animated?: boolean;
+}
+declare const Edge: import("svelte").Component<Props, {}, "">;
+type Edge = ReturnType<typeof Edge>;
+export default Edge;

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

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

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

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

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

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

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