@spaethtech/svelte-ui 0.1.10

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

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

@@ -0,0 +1,33 @@
+/**
+ * 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 = {}));

package/dist/components/NotesEditor/NotesEditor.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  let {
+    notes = $bindable(""),
+    placeholder = "Add your notes...",
+    onSave,
+    className = ""
+  }: {
+    notes: string | undefined;
+    placeholder?: string;
+    onSave: (notes: string) => Promise<void>;
+    className?: string;
+  } = $props();
+
+  // State management
+  let saveState = $state<'idle' | 'typing' | 'saving' | 'saved' | 'error'>('idle');
+  let saveTimeout: ReturnType<typeof setTimeout>;
+  let lastSavedNotes = $state(notes || '');
+
+  // Auto-save effect - runs when notes change
+  $effect(() => {
+    const currentNotes = notes || '';
+    
+    if (currentNotes !== lastSavedNotes && saveState !== 'saving') {
+      saveState = 'typing';
+      
+      // Clear existing timeout
+      clearTimeout(saveTimeout);
+      
+      // Set new timeout for auto-save
+      saveTimeout = setTimeout(async () => {
+        await handleSave();
+      }, 1000); // Save after 1 second of no typing
+    }
+  });
+
+  // Textarea reference for initial sizing
+  let textareaElement: HTMLTextAreaElement;
+
+  // Initial sizing effect - runs after component mounts
+  $effect(() => {
+    if (textareaElement && notes) {
+      // Use setTimeout to ensure DOM is fully rendered
+      setTimeout(() => {
+        resizeTextarea(textareaElement);
+      }, 0);
+    }
+  });
+
+  // Ctrl+S listener for manual save
+  $effect(() => {
+    async function handleKeyDown(event: KeyboardEvent) {
+      // Check if Ctrl+S (or Cmd+S on Mac) is pressed and textarea is focused
+      if ((event.ctrlKey || event.metaKey) && event.key === 's' && 
+          textareaElement && document.activeElement === textareaElement) {
+        event.preventDefault();
+        event.stopPropagation();
+        
+        
+        // Clear any pending auto-save timeout and save immediately
+        clearTimeout(saveTimeout);
+        await handleSave();
+      }
+    }
+
+    // Add listener to document
+    document.addEventListener('keydown', handleKeyDown);
+
+    // Cleanup function
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  });
+
+  async function handleSave() {
+    const currentNotes = notes || '';
+    
+    if (currentNotes === lastSavedNotes) {
+      // Show brief "No changes" feedback for manual save attempts
+      saveState = 'saved';
+      setTimeout(() => {
+        if (saveState === 'saved') {
+          saveState = 'idle';
+        }
+      }, 1000);
+      return;
+    }
+    
+    saveState = 'saving';
+    
+    try {
+      await onSave(currentNotes);
+      lastSavedNotes = currentNotes;
+      saveState = 'saved';
+      
+      // Clear "saved" status after 2 seconds
+      setTimeout(() => {
+        if (saveState === 'saved') {
+          saveState = 'idle';
+        }
+      }, 2000);
+    } catch (error) {
+      console.error('Failed to save notes:', error);
+      saveState = 'error';
+      
+      // Clear error status after 3 seconds
+      setTimeout(() => {
+        if (saveState === 'error') {
+          saveState = 'idle';
+        }
+      }, 3000);
+    }
+  }
+
+  // Shared function to resize textarea
+  function resizeTextarea(target: HTMLTextAreaElement) {
+    // Get computed styles to calculate exact line height
+    const computedStyle = window.getComputedStyle(target);
+    const lineHeight = parseInt(computedStyle.lineHeight);
+    const paddingTop = parseInt(computedStyle.paddingTop);
+    const paddingBottom = parseInt(computedStyle.paddingBottom);
+    const borderTop = parseInt(computedStyle.borderTopWidth);
+    const borderBottom = parseInt(computedStyle.borderBottomWidth);
+    
+    // Calculate heights based on actual lines
+    const minLines = 3;
+    const maxLines = 15;
+    const minHeight = (lineHeight * minLines) + paddingTop + paddingBottom + borderTop + borderBottom;
+    const maxHeight = (lineHeight * maxLines) + paddingTop + paddingBottom + borderTop + borderBottom;
+    
+    // Reset height to measure content
+    target.style.height = 'auto';
+    
+    // Set height based on content, capped at max
+    const contentHeight = target.scrollHeight;
+    const newHeight = Math.min(Math.max(contentHeight, minHeight), maxHeight);
+    target.style.height = newHeight + 'px';
+    
+    // Only show scrollbar when content actually exceeds max height
+    if (contentHeight > maxHeight) {
+      target.style.overflowY = 'auto';
+    } else {
+      target.style.overflowY = 'hidden';
+    }
+  }
+
+  function handleInput(event: Event) {
+    const target = event.target as HTMLTextAreaElement;
+    resizeTextarea(target);
+  }
+
+
+  // Get status text and styling - simplified approach
+  let statusText = $state('');
+  let statusClass = $state('');
+  
+  $effect(() => {
+    switch (saveState) {
+      case 'typing':
+        statusText = 'Typing...';
+        statusClass = 'text-gray-500';
+        break;
+      case 'saving':
+        statusText = 'Saving...';
+        statusClass = 'text-blue-500';
+        break;
+      case 'saved':
+        statusText = 'Saved';
+        statusClass = 'text-green-600';
+        break;
+      case 'error':
+        statusText = 'Save failed';
+        statusClass = 'text-red-500';
+        break;
+      default:
+        statusText = '';
+        statusClass = '';
+    }
+  });
+</script>
+
+<div class={className}>
+  <!-- Header with Notes label and status -->
+  <div class="flex items-center justify-between mb-2">
+    <label for="notes-textarea" class="block text-sm font-medium [color:var(--color-text)]">
+      Notes
+    </label>
+    <span class="text-xs {statusClass} min-h-[16px]">
+      {statusText}
+    </span>
+  </div>
+
+  <!-- Textarea -->
+  <textarea
+    id="notes-textarea"
+    bind:this={textareaElement}
+    bind:value={notes}
+    {placeholder}
+    class="w-full px-3 py-2 bg-transparent [color:var(--color-text)] [border-color:var(--color-secondary)] border-2 rounded-md focus:outline-none hover:[border-color:color-mix(in_srgb,var(--color-secondary)_80%,black)] focus:[border-color:color-mix(in_srgb,var(--color-secondary)_90%,black)] focus:[outline:2px_solid_color-mix(in_srgb,currentColor_70%,transparent)] focus:[outline-offset:0px] resize-none min-h-[80px] overflow-hidden"
+    rows="3"
+    oninput={handleInput}
+  ></textarea>
+
+</div>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    notes: string | undefined;
+    placeholder?: string;
+    onSave: (notes: string) => Promise<void>;
+    className?: string;
+};
+declare const NotesEditor: import("svelte").Component<$$ComponentProps, {}, "notes">;
+type NotesEditor = ReturnType<typeof NotesEditor>;
+export default NotesEditor;

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

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

package/dist/components/NotesEditor/index.js

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

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,353 @@
+<script lang="ts">
+  import Input from '../Input/Input.svelte';
+  import type { HTMLInputAttributes } from 'svelte/elements';
+
+  interface Props extends Omit<HTMLInputAttributes, 'type' | 'value'> {
+    value: number | null;
+    class?: string;
+    inputClass?: string;
+    validate?: (value: number | null) => boolean | string;
+    valid?: boolean;
+    touched?: boolean;
+    element?: HTMLInputElement;
+    min?: number;
+    max?: number;
+    step?: number;
+    allowDecimals?: boolean;
+    decimalPlaces?: number;
+    thousandsSeparator?: boolean;
+    prefix?: string;
+    suffix?: string;
+    currency?: string; // e.g., '$', '€', '£', '¥', etc.
+    decimalSeparator?: string; // Decimal separator (default: '.')
+    thousandsChar?: string; // Thousands separator character (default: ',')
+    roundingMode?: 'round' | 'floor' | 'ceil' | 'trunc'; // Rounding behavior for integers
+    negativeMode?: 'minus' | 'parentheses' | 'both'; // How to display/accept negative numbers
+  }
+
+  let {
+    value = $bindable(),
+    valid = $bindable(true),
+    touched = $bindable(false),
+    element = $bindable(),
+    validate,
+    min,
+    max,
+    step = 1,
+    allowDecimals = true,
+    decimalPlaces = 2,
+    thousandsSeparator: enableThousandsSeparator = false,
+    prefix = '',
+    suffix = '',
+    currency,
+    decimalSeparator = '.',
+    thousandsChar = ',',
+    roundingMode = 'round',
+    negativeMode = 'minus',
+    placeholder = 'Enter a number...',
+    ...restProps
+  }: Props = $props();
+
+  let displayValue = $state('');
+  let focused = $state(false);
+
+  // Convert number to formatted display string
+  function formatNumber(num: number | null): string {
+    if (num === null || num === undefined || isNaN(num)) return '';
+    
+    const isNegative = num < 0;
+    const absoluteNum = Math.abs(num);
+    let formatted = absoluteNum.toString();
+    
+    // Handle decimal places and rounding
+    if (allowDecimals && decimalPlaces > 0) {
+      formatted = absoluteNum.toFixed(decimalPlaces);
+    } else if (!allowDecimals) {
+      // Apply rounding mode for integers
+      let rounded: number;
+      switch (roundingMode) {
+        case 'floor':
+          rounded = Math.floor(absoluteNum);
+          break;
+        case 'ceil':
+          rounded = Math.ceil(absoluteNum);
+          break;
+        case 'trunc':
+          rounded = Math.trunc(absoluteNum);
+          break;
+        default: // 'round'
+          rounded = Math.round(absoluteNum);
+      }
+      formatted = rounded.toString();
+    }
+    
+    // Add thousands separator and convert to custom format
+    if (enableThousandsSeparator) {
+      const parts = formatted.split('.');
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, thousandsChar);
+      formatted = parts.join(decimalSeparator);
+    } else if (decimalSeparator !== '.') {
+      // Even without thousands separator, we need to convert decimal separator
+      formatted = formatted.replace('.', decimalSeparator);
+    }
+    
+    const finalPrefix = currency || prefix;
+    
+    // Handle negative number display
+    if (isNegative) {
+      if (negativeMode === 'parentheses') {
+        // For parentheses, put everything (prefix, number, suffix) inside
+        return `(${finalPrefix}${formatted}${suffix})`;
+      } else {
+        // 'minus' or 'both' - put minus in front
+        return `-${finalPrefix}${formatted}${suffix}`;
+      }
+    }
+    
+    return `${finalPrefix}${formatted}${suffix}`;
+  }
+
+  // Parse display string back to number
+  function parseNumber(str: string): number | null {
+    if (!str || str.trim() === '') return null;
+    
+    // Check for negative indicators
+    const hasParentheses = str.includes('(') && str.includes(')');
+    const hasMinus = str.includes('-');
+    const isNegative = hasParentheses || hasMinus;
+    
+    // Remove prefix, suffix, currency
+    const finalPrefix = currency || prefix;
+    let cleaned = str;
+    
+    if (finalPrefix) {
+      const escapedPrefix = finalPrefix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      // Remove prefix from beginning, or after negative indicators
+      cleaned = cleaned.replace(new RegExp(`^${escapedPrefix}`), ''); // $123
+      cleaned = cleaned.replace(new RegExp(`^-${escapedPrefix}`), '-'); // -$123 -> -123
+      cleaned = cleaned.replace(new RegExp(`^\\(${escapedPrefix}`), '('); // ($123 -> (123
+    }
+    
+    if (suffix) {
+      const escapedSuffix = suffix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      cleaned = cleaned.replace(new RegExp(`${escapedSuffix}$`), '');
+    }
+    
+    // Remove negative indicators
+    cleaned = cleaned.replace(/[()]/g, ''); // Remove parentheses
+    cleaned = cleaned.replace(/-/g, ''); // Remove minus signs
+    
+    // Remove thousands separators (both , and . could be thousands separators)
+    cleaned = cleaned.replace(new RegExp(`\\${thousandsChar.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}`, 'g'), '');
+    
+    // Convert decimal separator to standard decimal point
+    if (decimalSeparator !== '.') {
+      // Replace the decimal separator with standard decimal point
+      // But only the last occurrence to handle cases like "1.234,56"
+      const lastSeparatorIndex = cleaned.lastIndexOf(decimalSeparator);
+      if (lastSeparatorIndex !== -1) {
+        cleaned = cleaned.substring(0, lastSeparatorIndex) + '.' + cleaned.substring(lastSeparatorIndex + 1);
+      }
+    }
+    
+    const parsed = parseFloat(cleaned);
+    if (isNaN(parsed)) return null;
+    
+    return isNegative ? -parsed : parsed;
+  }
+
+  // Update display value when value changes
+  $effect(() => {
+    if (!focused) {
+      displayValue = formatNumber(value);
+    }
+  });
+
+  // Default validation
+  const defaultValidator = (val: number | null) => {
+    if (val === null) return true; // Allow null/empty values
+    
+    if (min !== undefined && val < min) return `Value must be at least ${min}`;
+    if (max !== undefined && val > max) return `Value must be at most ${max}`;
+    
+    if (!allowDecimals && val % 1 !== 0) return 'Decimal values are not allowed';
+    
+    return true;
+  };
+
+  // Use custom validator if provided, otherwise use default
+  const numberValidator = validate || defaultValidator;
+
+  function handleInput(inputValue: string) {
+    displayValue = inputValue;
+    
+    // Only skip parsing for truly incomplete inputs that have no numeric content
+    const finalPrefix = currency || prefix;
+    
+    // Check if input is incomplete (has negative indicators but no actual numbers)
+    const incompletePatterns = [
+      '-',                                    // Just minus
+      '(',                                    // Just opening paren
+      '()',                                   // Empty parens
+    ];
+    
+    // Add prefix-related incomplete patterns
+    if (finalPrefix) {
+      incompletePatterns.push(
+        `-${finalPrefix}`,                    // -$, -€, etc.
+        `(${finalPrefix}`,                    // ($, (€, etc.
+        `(${finalPrefix})`                    // ($), (€), etc.
+      );
+    }
+    
+    // Add suffix-related incomplete patterns  
+    if (suffix) {
+      incompletePatterns.push(
+        `-${suffix}`,                         // -%, etc.
+        `(${suffix}`,                         // (%, etc.
+        `(${suffix})`                         // (%), etc.
+      );
+      
+      // Combined prefix and suffix patterns
+      if (finalPrefix) {
+        incompletePatterns.push(
+          `-${finalPrefix}${suffix}`,         // -$%, etc.
+          `(${finalPrefix}${suffix}`,         // ($%, etc.
+          `(${finalPrefix}${suffix})`         // ($%), etc.
+        );
+      }
+    }
+    
+    if (incompletePatterns.includes(inputValue)) {
+      // Keep the current value but update display for incomplete inputs
+      return;
+    }
+    
+    const parsed = parseNumber(inputValue);
+    value = parsed;
+  }
+
+  function handleFocus() {
+    focused = true;
+    // Show the full formatted value including prefix/suffix for consistency
+    if (value !== null && !isNaN(value)) {
+      displayValue = formatNumber(value);
+    }
+  }
+
+  function handleBlur() {
+    focused = false;
+    // Format the number when focus is lost
+    displayValue = formatNumber(value);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    // Allow control keys (backspace, delete, arrow keys, tab, etc.)
+    if (
+      event.key === 'Backspace' ||
+      event.key === 'Delete' ||
+      event.key === 'Tab' ||
+      event.key === 'Escape' ||
+      event.key === 'Enter' ||
+      event.key.startsWith('Arrow') ||
+      event.key === 'Home' ||
+      event.key === 'End' ||
+      (event.ctrlKey || event.metaKey) // Allow Ctrl/Cmd shortcuts
+    ) {
+      return;
+    }
+
+    const currentValue = displayValue;
+    const finalPrefix = currency || prefix;
+    const input = event.target as HTMLInputElement;
+    const cursorPosition = input.selectionStart || 0;
+    
+    // Basic allowed characters
+    const allowedChars = new Set(['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']);
+    
+    // Always allow both comma and period for international input flexibility
+    allowedChars.add(',');
+    allowedChars.add('.');
+    
+    // Add currency characters (but validate position)
+    if (finalPrefix && event.key === finalPrefix) {
+      // Only allow currency at the beginning (after minus if present)
+      const hasMinusAtStart = currentValue.startsWith('-');
+      const expectedPosition = hasMinusAtStart ? 1 : 0;
+      if (cursorPosition === expectedPosition && !currentValue.includes(finalPrefix)) {
+        allowedChars.add(finalPrefix);
+      } else {
+        event.preventDefault();
+        return;
+      }
+    }
+    
+    // Add suffix characters (but validate position and prevent duplicates)
+    if (suffix && event.key === suffix) {
+      // Only allow suffix at the end and if not already present
+      if (cursorPosition === currentValue.length && !currentValue.includes(suffix)) {
+        allowedChars.add(suffix);
+      } else {
+        event.preventDefault();
+        return;
+      }
+    }
+    
+    // Always allow both minus and parentheses for input (negativeMode only affects display formatting)
+    if (event.key === '-') {
+      // Only allow minus at the very beginning and if not already present
+      if (cursorPosition === 0 && !currentValue.includes('-')) {
+        allowedChars.add('-');
+      } else {
+        event.preventDefault();
+        return;
+      }
+    }
+    
+    if (event.key === '(') {
+      // Only allow opening parenthesis at the beginning and if not already present
+      if (cursorPosition === 0 && !currentValue.includes('(')) {
+        allowedChars.add('(');
+      } else {
+        event.preventDefault();
+        return;
+      }
+    }
+    if (event.key === ')') {
+      // Only allow closing parenthesis at the end, if opening exists, and no closing yet
+      if (cursorPosition === currentValue.length && currentValue.includes('(') && !currentValue.includes(')')) {
+        allowedChars.add(')');
+      } else {
+        event.preventDefault();
+        return;
+      }
+    }
+
+    // Prevent typing if character is not allowed
+    if (!allowedChars.has(event.key)) {
+      event.preventDefault();
+    }
+  }
+
+  // Convert our number value to string for the Input component
+  let stringValue = $derived(displayValue);
+</script>
+
+<Input
+  bind:value={stringValue}
+  bind:valid
+  bind:touched
+  bind:element
+  type="text"
+  inputmode="numeric"
+  validate={(val) => {
+    const parsed = parseNumber(val);
+    return numberValidator(parsed);
+  }}
+  oninput={(e) => handleInput((e.target as HTMLInputElement).value)}
+  onfocus={handleFocus}
+  onblur={handleBlur}
+  onkeydown={handleKeyDown}
+  {placeholder}
+  {...restProps}
+/>