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

package/dist/components/ListView/ListView.svelte

@@ -1,463 +0,0 @@
-<script lang="ts">
-    import { untrack } from "svelte";
-    import type { Snippet } from "svelte";
-    import ScrollView from "../ScrollView/ScrollView.svelte";
-
-    type Option = Record<string, any> & {
-        value: string;
-        label: string;
-    };
-
-    interface Props {
-        options?: Option[];
-        value?: string | string[]; // Bindable selected value - string[] when multiSelect is true
-        multiSelect?: boolean; // Enable multi-select mode
-        showCheckboxes?: boolean; // Show checkboxes for selection (implies multiSelect)
-        maxVisibleItems?: number; // When not set, grows to fit all items
-        itemHeight?: number;
-        minHeight?: number; // Minimum height in pixels (default 32px)
-        class?: string;
-        containerClass?: string;
-        disabled?: boolean;
-        children?: Snippet;
-        // API integration
-        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;
-    }
-
-    let {
-        options = [],
-        value = $bindable(),
-        multiSelect = false,
-        showCheckboxes = false,
-        maxVisibleItems, // Optional - when not set, grows to fit all items
-        itemHeight, // Will be auto-detected: 40px if secondaryText found, otherwise 32px
-        minHeight = 32, // Should match var(--ui-height) for standard UI element height
-        class: className = "",
-        containerClass = "",
-        disabled = false,
-        children,
-        // API integration props
-        url,
-        searchParam,
-        transform,
-        debounceMs = 300,
-        maxResults,
-        headers = {},
-        searchTerm = $bindable(""),
-        showLoading = true,
-        loadingText = "Loading...",
-        showError = true,
-        errorText = "Failed to load data",
-        emptyText = "No data",
-        onError,
-        onLoadStart,
-        onLoadEnd,
-        onSelection,
-    }: Props = $props();
-
-    // showCheckboxes implies multiSelect
-    const effectiveMultiSelect = $derived(multiSelect || showCheckboxes);
-
-    // Initialize value based on multiSelect mode
-    $effect(() => {
-        if (value === undefined) {
-            value = effectiveMultiSelect ? [] : "";
-        }
-    });
-
-    // Helper functions for multi-select
-    function isSelected(optionValue: string): boolean {
-        if (effectiveMultiSelect) {
-            return Array.isArray(value) && value.includes(optionValue);
-        }
-        return value === optionValue;
-    }
-
-    function toggleSelection(optionValue: string) {
-        if (effectiveMultiSelect && Array.isArray(value)) {
-            if (value.includes(optionValue)) {
-                value = value.filter((v) => v !== optionValue);
-            } else {
-                value = [...value, optionValue];
-            }
-        } else {
-            value = optionValue;
-        }
-    }
-
-    // API integration state
-    let isLoading = $state(false);
-    let hasError = $state(false);
-    let currentError = $state<Error | null>(null);
-    let apiOptions = $state<Option[]>([]);
-    let lastSearchTerm = $state("");
-    let abortController = $state<AbortController | null>(null);
-
-    // Combine static options with API options
-    const allOptions = $derived(() => {
-        if (url && apiOptions.length > 0) {
-            return apiOptions;
-        }
-        return options;
-    });
-
-    // Calculate height - grows to fit all items when maxVisibleItems is not set
-    const calculatedHeight = $derived(() => {
-        if (maxVisibleItems !== undefined) {
-            // Fixed height mode - use maxVisibleItems
-            return maxVisibleItems * effectiveItemHeight;
-        } else {
-            // Auto-grow mode - use actual item count from options or children
-            const opts = allOptions();
-            if (opts.length > 0) {
-                return opts.length * effectiveItemHeight;
-            }
-            // When using children (no options), use counted rendered items
-            if (renderedItemCount > 0) {
-                return renderedItemCount * effectiveItemHeight;
-            }
-            // Fallback to minHeight
-            return minHeight;
-        }
-    });
-
-    const maxHeight = $derived(() => {
-        return Math.max(calculatedHeight(), minHeight);
-    });
-
-    // Check if any options have description/secondaryText fields (available before rendering)
-    // TODO: Enable this auto-detection when options prop pattern is fully implemented
-    // const hasSecondaryText = $derived(() => {
-    //     const opts = allOptions();
-    //     return opts.some(
-    //         (opt) =>
-    //             opt.description !== undefined ||
-    //             opt.secondaryText !== undefined,
-    //     );
-    // });
-
-    // Determine default height: 32px for now, will auto-detect 48px when secondaryText support is added
-    const defaultItemHeight = $derived(32);
-
-    // Use itemHeight prop if provided, otherwise use detected default
-    const effectiveItemHeight = $derived(itemHeight ?? defaultItemHeight);
-
-    let listElement = $state<HTMLDivElement>();
-    let focusedIndex = $state(-1);
-    let keyboardCursor = $state(-1);
-    let measuredItemHeight = $state<number | null>(null);
-    let renderedItemCount = $state(0);
-
-    // Automatically measure item height and count from rendered items
-    $effect(() => {
-        if (listElement) {
-            const firstItem = listElement.querySelector('[role="option"]');
-            if (firstItem) {
-                measuredItemHeight = firstItem.getBoundingClientRect().height;
-            }
-            // Count rendered items for auto-height mode
-            const items = listElement.querySelectorAll('[role="option"]');
-            renderedItemCount = items.length;
-        }
-    });
-
-    function selectOption(optionValue: string, event: MouseEvent) {
-        if (disabled) return;
-
-        event.stopPropagation();
-
-        const clickedIndex = allOptions().findIndex(
-            (option) => option.value === optionValue,
-        );
-        if (clickedIndex >= 0) {
-            keyboardCursor = clickedIndex;
-        }
-
-        toggleSelection(optionValue);
-
-        const selectedOption = allOptions().find(
-            (option) => option.value === optionValue,
-        );
-        if (selectedOption && onSelection && value !== undefined) {
-            if (effectiveMultiSelect && Array.isArray(value)) {
-                const currentValue = value; // Capture to avoid undefined in closure
-                const selectedOptions = allOptions().filter((opt) =>
-                    currentValue.includes(opt.value),
-                );
-                onSelection(selectedOptions);
-            } else {
-                onSelection(selectedOption);
-            }
-        }
-    }
-
-    function handleListFocus() {
-        if (keyboardCursor < 0 && allOptions().length > 0) {
-            keyboardCursor = 0;
-        }
-
-        if (keyboardCursor >= 0) {
-            focusedIndex = keyboardCursor;
-
-            if (listElement) {
-                const itemTop = keyboardCursor * effectiveItemHeight;
-                const itemBottom = itemTop + effectiveItemHeight;
-                const viewTop = listElement.scrollTop;
-                const currentMaxHeight = maxHeight();
-                const viewBottom = viewTop + currentMaxHeight;
-
-                if (itemTop < viewTop || itemBottom > viewBottom) {
-                    listElement.scrollTop = Math.max(
-                        0,
-                        itemTop - (currentMaxHeight - effectiveItemHeight) / 2,
-                    );
-                }
-            }
-        } else {
-            focusedIndex = -1;
-        }
-    }
-
-    function handleListBlur() {
-        focusedIndex = -1;
-    }
-
-    // API fetch function
-    async function fetchOptions(searchQuery: string) {
-        if (!url) {
-            apiOptions = [];
-            return;
-        }
-
-        if (searchParam && !searchQuery.trim()) {
-            apiOptions = [];
-            return;
-        }
-
-        if (abortController) {
-            abortController.abort();
-        }
-
-        abortController = new AbortController();
-
-        try {
-            isLoading = true;
-            onLoadStart?.();
-
-            const apiUrl = new URL(url, window.location.origin);
-            if (searchParam && searchQuery.trim()) {
-                apiUrl.searchParams.set(searchParam, searchQuery);
-            }
-
-            const response = await fetch(apiUrl.toString(), {
-                signal: abortController.signal,
-                headers: {
-                    "Content-Type": "application/json",
-                    ...headers,
-                },
-            });
-
-            if (!response.ok) {
-                throw new Error(
-                    `HTTP ${response.status}: ${response.statusText}`,
-                );
-            }
-
-            const data = await response.json();
-
-            let transformedOptions = transform ? transform(data) : data;
-
-            if (maxResults && transformedOptions.length > maxResults) {
-                transformedOptions = transformedOptions.slice(0, maxResults);
-            }
-
-            apiOptions = transformedOptions;
-            lastSearchTerm = searchQuery;
-        } catch (error) {
-            if (error instanceof Error && error.name !== "AbortError") {
-                console.error("ListView API fetch error:", error);
-                hasError = true;
-                currentError = error;
-                onError?.(error);
-                apiOptions = [];
-            }
-        } finally {
-            isLoading = false;
-            onLoadEnd?.();
-            abortController = null;
-        }
-    }
-
-    // API fetch effect for search functionality
-    $effect(() => {
-        if (url && searchParam) {
-            if (searchTerm.trim() && searchTerm !== lastSearchTerm) {
-                const timeoutId = setTimeout(() => {
-                    fetchOptions(searchTerm);
-                }, debounceMs);
-
-                return () => clearTimeout(timeoutId);
-            } else if (!searchTerm.trim()) {
-                apiOptions = [];
-            }
-        }
-    });
-
-    // Initial API fetch for static data (no search) - run once on mount
-    $effect(() => {
-        if (url && !searchParam) {
-            untrack(() => fetchOptions(""));
-        }
-    });
-
-    // Clear error state when search term changes
-    $effect(() => {
-        if (searchTerm !== lastSearchTerm) {
-            hasError = false;
-            currentError = null;
-        }
-    });
-
-    // Handle keyboard navigation within list
-    function handleListKeydown(event: KeyboardEvent) {
-        if (disabled) return;
-
-        if (event.key === "Tab") {
-            return;
-        }
-
-        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-            event.preventDefault();
-            event.stopPropagation();
-
-            if (focusedIndex === -1) {
-                const startIndex = keyboardCursor >= 0 ? keyboardCursor : 0;
-
-                if (event.key === "ArrowDown") {
-                    focusedIndex = Math.min(
-                        startIndex + 1,
-                        allOptions().length - 1,
-                    );
-                } else {
-                    focusedIndex = Math.max(startIndex - 1, 0);
-                }
-            } else {
-                if (event.key === "ArrowDown") {
-                    focusedIndex = Math.min(
-                        focusedIndex + 1,
-                        allOptions().length - 1,
-                    );
-                } else {
-                    focusedIndex = Math.max(focusedIndex - 1, 0);
-                }
-            }
-
-            keyboardCursor = focusedIndex;
-
-            if (listElement && maxVisibleItems !== undefined) {
-                const itemTop = focusedIndex * itemHeight;
-                const itemBottom = itemTop + itemHeight;
-                const viewTop = listElement.scrollTop;
-                const currentMaxHeight = maxHeight();
-                const viewBottom = viewTop + currentMaxHeight;
-
-                if (itemTop < viewTop) {
-                    listElement.scrollTop = itemTop;
-                } else if (itemBottom > viewBottom) {
-                    listElement.scrollTop = itemBottom - currentMaxHeight;
-                }
-            }
-        } else if (event.key === " ") {
-            event.preventDefault();
-            event.stopPropagation();
-            if (focusedIndex >= 0 && focusedIndex < allOptions().length) {
-                const selectedOption = allOptions()[focusedIndex];
-
-                toggleSelection(selectedOption.value);
-
-                if (onSelection && value !== undefined) {
-                    if (effectiveMultiSelect && Array.isArray(value)) {
-                        const currentValue = value; // Capture to avoid undefined in closure
-                        const selectedOptions = allOptions().filter((opt) =>
-                            currentValue.includes(opt.value),
-                        );
-                        onSelection(selectedOptions);
-                    } else {
-                        onSelection(selectedOption);
-                    }
-                }
-            }
-        }
-    }
-</script>
-
-<ScrollView
-    class={className}
-    style="--list-item-height: {effectiveItemHeight}px; height: {maxHeight()}px;"
-    {disabled}
-    showScrollbar={maxVisibleItems !== undefined}
-    bind:view={listElement}
->
-    <div
-        class="flex flex-col"
-        onkeydown={handleListKeydown}
-        onfocus={handleListFocus}
-        onblur={handleListBlur}
-        tabindex={disabled ? -1 : 0}
-        role="listbox"
-        aria-label="List of options"
-        aria-busy={isLoading}
-        aria-disabled={disabled}
-        aria-multiselectable={effectiveMultiSelect}
-    >
-        {#if isLoading && showLoading}
-            <div
-                class="flex items-center justify-center py-4 [color:var(--color-secondary)]"
-            >
-                <div
-                    class="animate-spin rounded-full h-4 w-4 border-b-2 [border-color:var(--color-secondary)] mr-2"
-                ></div>
-                {loadingText}
-            </div>
-        {:else if hasError && showError}
-            <div
-                class="flex items-center justify-center py-4 [color:var(--color-danger)]"
-            >
-                <span class="text-sm [color:var(--color-danger)]"
-                    >{errorText}</span
-                >
-            </div>
-        {:else if children}
-            {@render children()}
-        {:else if allOptions().length === 0}
-            <div
-                class="flex items-center justify-center [color:var(--color-secondary)] select-none"
-                style="height: {effectiveItemHeight}px;"
-            >
-                <span class="px-4 text-sm [color:var(--color-secondary)]"
-                    >{emptyText}</span
-                >
-            </div>
-        {:else}
-            <div class="text-sm [color:var(--color-secondary)] px-4 py-2">
-                No children provided. Use ListView with ListItem components or
-                provide a children snippet.
-            </div>
-        {/if}
-    </div>
-</ScrollView>

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

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

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

package/dist/components/ListView/index.js

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

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

@@ -1,57 +0,0 @@
-/**
- * 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

@@ -1,30 +0,0 @@
-/**
- * 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

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

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