juxscript 1.0.19 → 1.0.20

package/lib/components/icons.ts

@@ -0,0 +1,174 @@
+/**
+ * Icon utilities for components
+ * Handles emoji-to-Lucide mapping, direct icon names, and image paths
+ */
+
+const EMOJI_TO_LUCIDE: Record<string, string> = {
+    "✔️": "check-circle",
+    "✓": "check",
+    "❌": "x-circle",
+    "✗": "x",
+    "🔥": "flame",
+    "🚀": "rocket",
+    "⚙️": "settings",
+    "🏠": "home",
+    "👤": "user",
+    "💡": "lightbulb",
+    "🌈": "rainbow",
+    "🧪": "flask-conical",
+    "✉️": "mail",
+    "📞": "phone",
+    "🔍": "search",
+    "❤️": "heart",
+    "⭐": "star",
+    "⚠️": "alert-triangle",
+    "ℹ️": "info",
+    "❓": "help-circle",
+    "👁️": "eye",
+    "👁️‍🗨️": "eye-off",
+    "☰": "menu",
+    "🕐": "clock",
+    "📅": "calendar",
+    "⬇️": "chevron-down",
+    "⬆️": "chevron-up",
+    "⬅️": "chevron-left",
+    "➡️": "chevron-right",
+    "📈": "arrow-up",
+    "📉": "arrow-down",
+    "⬇": "download",
+    "📤": "upload",
+    "📄": "file-text",
+    "🗑️": "trash-2",
+    "✏️": "edit",
+    "📋": "clipboard",
+    "🔗": "link",
+    "↗️": "external-link",
+    "☀️": "sun",
+    "🌙": "moon",
+    "📊": "bar-chart-3",
+    "📁": "folder",
+    "💰": "coins",
+    "📧": "mail",
+    "✅": "square-check",
+    "🗓️": "calendar-days",
+    "💬": "message-circle",
+    "🌐": "globe",
+    "🔬": "microscope",
+    "💊": "pill",
+    "🔒": "lock",
+    "⚖️": "scale",
+    "🔌": "plug",
+    "🔐": "lock-keyhole",
+    "🏥": "cross",
+    "👥": "users",
+    "💚": "heart",
+    "💸": "banknote",
+    "🧾": "receipt",
+    "➕": "plus",
+    "➖": "minus",
+    "💾": "save"
+};
+
+const LUCIDE_CDN_URL = "https://unpkg.com/lucide@latest";
+
+/**
+ * Render an icon from emoji, icon name, or image path
+ * @param value - Emoji (🚀), icon name (rocket), or image path (/icon.png)
+ * @returns HTMLElement containing the icon
+ *
+ * Usage:
+ *   const icon = renderIcon('🚀');        // Lucide rocket icon
+ *   const icon = renderIcon('rocket');     // Lucide rocket icon
+ *   const icon = renderIcon('/icon.png'); // Image element
+ */
+export function renderIcon(value: string): HTMLElement {
+    // Check if it's an image path (contains / or . or starts with http)
+    if (value.includes('/') || value.includes('.') || value.startsWith('http')) {
+        return createImageIcon(value);
+    }
+
+    // Check if it's an emoji that maps to Lucide
+    const lucideName = EMOJI_TO_LUCIDE[value];
+    if (lucideName) {
+        const element = createVectorIcon(lucideName);
+        ensureLucideLoaded();
+        return element;
+    }
+
+    // Check if it's a direct Lucide icon name (lowercase with hyphens)
+    if (/^[a-z][a-z0-9-]*$/.test(value)) {
+        const element = createVectorIcon(value);
+        ensureLucideLoaded();
+        return element;
+    }
+
+    // Fallback: render as emoji
+    return createEmojiFallback(value);
+}
+
+/**
+ * Render raw emoji without conversion
+ * @param emoji - The emoji character
+ * @returns HTMLElement containing just the emoji
+ */
+export function renderEmoji(emoji: string): HTMLElement {
+    return createEmojiFallback(emoji);
+}
+
+/**
+ * Ensures Lucide is loaded and icons are rendered
+ */
+function ensureLucideLoaded(): void {
+    if ((window as any).lucide) {
+        // Already loaded, render immediately
+        (window as any).lucide.createIcons();
+        return;
+    }
+
+    // Not loaded yet, inject script
+    if (!document.querySelector(`script[src="${LUCIDE_CDN_URL}"]`)) {
+        const script = document.createElement('script');
+        script.src = LUCIDE_CDN_URL;
+        script.onload = () => {
+            if ((window as any).lucide) {
+                (window as any).lucide.createIcons();
+            }
+        };
+        document.head.appendChild(script);
+    }
+}
+
+/**
+ * Create Lucide icon element
+ */
+function createVectorIcon(name: string): HTMLElement {
+    const iconEl = document.createElement('i');
+    iconEl.setAttribute('data-lucide', name);
+    iconEl.style.width = '24px';
+    iconEl.style.height = '24px';
+    iconEl.style.display = 'inline-block';
+    return iconEl;
+}
+
+/**
+ * Create image icon element
+ */
+function createImageIcon(src: string): HTMLImageElement {
+    const img = document.createElement('img');
+    img.src = src;
+    img.style.width = '24px';
+    img.style.height = '24px';
+    img.style.display = 'inline-block';
+    img.style.objectFit = 'contain';
+    return img;
+}
+
+/**
+ * Render native emoji or text
+ */
+function createEmojiFallback(emoji: string): HTMLSpanElement {
+    const span = document.createElement('span');
+    span.textContent = emoji;
+    span.style.display = 'inline-block';
+    return span;
+}

package/lib/components/include.ts

@@ -5,7 +5,7 @@ import { ErrorHandler } from './error-handler.js';
  * Auto-detects resource type from URL and provides simple, fluent API
  */
 
-type IncludeType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module';
+type IncludeType = 'stylesheet' | 'script' | 'image' | 'font' | 'preload' | 'prefetch' | 'module' | 'json';
 type IncludeLocation = 'head' | 'body-start' | 'body-end';
 
 interface IncludeOptions {
@@ -35,6 +35,7 @@ export class Include {
   private detectType(url: string): IncludeType {
     if (url.endsWith('.css')) return 'stylesheet';
     if (url.endsWith('.js') || url.endsWith('.mjs')) return 'script';
+    if (url.endsWith('.json')) return 'json';
     if (url.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)) return 'image';
     if (url.match(/\.(woff|woff2|ttf|otf|eot)$/i)) return 'font';
     return 'preload';
@@ -82,6 +83,65 @@ export class Include {
     return this;
   }
 
+  withJson(): this {
+    this.type = 'json';
+    return this;
+  }
+
+  /* -------------------------
+   * JSON Fetching
+   * ------------------------- */
+
+  /**
+   * Fetch and parse JSON file
+   * Returns a Promise that resolves to the parsed JSON data
+   * 
+   * Usage:
+   *   const config = await jux.include('config.json').asJson();
+   *   const data = await jux.include('/api/data').asJson();
+   */
+  async asJson<T = any>(): Promise<T> {
+    try {
+      const response = await fetch(this.url);
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      console.log(`✓ JSON loaded: ${this.url}`);
+      return data;
+    } catch (error: any) {
+      ErrorHandler.captureError({
+        component: 'Include',
+        method: 'asJson',
+        message: error.message,
+        stack: error.stack,
+        timestamp: new Date(),
+        context: {
+          url: this.url,
+          error: 'json_fetch_failed'
+        }
+      });
+      throw error;
+    }
+  }
+
+  /**
+   * Fetch JSON and execute callback with data
+   * 
+   * Usage:
+   *   jux.include('config.json').onJson(data => {
+   *     console.log('Config:', data);
+   *   });
+   */
+  onJson<T = any>(callback: (data: T) => void): this {
+    this.asJson<T>().then(callback).catch(error => {
+      console.error('Failed to load JSON:', error);
+    });
+    return this;
+  }
+
   /* -------------------------
    * Options
    * ------------------------- */
@@ -128,6 +188,12 @@ export class Include {
   render(): this {
     if (typeof document === 'undefined') return this;
 
+    // Don't render JSON type (it's fetched via asJson() instead)
+    if (this.type === 'json') {
+      console.warn('Include: JSON files should be loaded with .asJson() instead of .render()');
+      return this;
+    }
+
     try {
       this.remove();
 
@@ -284,9 +350,18 @@ export class Include {
  *   jux.include('app.mjs').withModule();
  *   jux.include('custom.js').withJs({ async: true, defer: true });
  *   jux.include('https://cdn.com/lib.js').inHead().defer();
+ *   
+ *   // For JSON:
+ *   const data = await jux.include('config.json').asJson();
+ *   jux.include('data.json').onJson(data => console.log(data));
  */
 export function include(urlOrFile: string): Include {
   const imp = new Include(urlOrFile);
-  imp.render();
+
+  // Don't auto-render JSON files
+  if (imp['type'] !== 'json') {
+    imp.render();
+  }
+
   return imp;
 }

package/lib/components/input.ts

@@ -1,5 +1,6 @@
 import { getOrCreateContainer } from './helpers.js';
 import { State } from '../reactivity/state.js';
+import { renderIcon } from './icons.js';
 
 /**
  * Input component options
@@ -9,6 +10,7 @@ export interface InputOptions {
   value?: string;
   placeholder?: string;
   label?: string;
+  icon?: string;
   required?: boolean;
   disabled?: boolean;
   name?: string;
@@ -19,7 +21,6 @@ export interface InputOptions {
   minLength?: number;
   maxLength?: number;
   pattern?: string;
-  onChange?: (value: string) => void;
   onValidate?: (value: string) => boolean | string;
   style?: string;
   class?: string;
@@ -33,6 +34,7 @@ type InputState = {
   value: string;
   placeholder: string;
   label: string;
+  icon: string;
   required: boolean;
   disabled: boolean;
   name: string;
@@ -48,27 +50,22 @@ type InputState = {
   errorMessage?: string;
 };
 
-/**
- * Input component
- */
 export class Input {
   state: InputState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
-  private _onChange?: (value: string) => void;
   private _onValidate?: (value: string) => boolean | string;
 
-  // Store bind() instructions
+  // Store bind() instructions (DOM events only)
   private _bindings: Array<{ event: string, handler: Function }> = [];
 
-  // Store sync() instructions
+  // Store sync() instructions (state synchronization)
   private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
 
   constructor(id: string, options: InputOptions = {}) {
     this._id = id;
     this.id = id;
-    this._onChange = options.onChange;
     this._onValidate = options.onValidate;
 
     this.state = {
@@ -76,6 +73,7 @@ export class Input {
       value: options.value ?? '',
       placeholder: options.placeholder ?? '',
       label: options.label ?? '',
+      icon: options.icon ?? '',
       required: options.required ?? false,
       disabled: options.disabled ?? false,
       name: options.name ?? id,
@@ -116,6 +114,11 @@ export class Input {
     return this;
   }
 
+  icon(value: string): this {
+    this.state.icon = value;
+    return this;
+  }
+
   required(value: boolean): this {
     this.state.required = value;
     return this;
@@ -183,11 +186,6 @@ export class Input {
     return this;
   }
 
-  onChange(handler: (value: string) => void): this {
-    this._onChange = handler;
-    return this;
-  }
-
   onValidate(handler: (value: string) => boolean | string): this {
     this._onValidate = handler;
     return this;
@@ -195,6 +193,7 @@ export class Input {
 
   /**
    * Bind event handler (stores for wiring in render)
+   * DOM events only: input, change, blur, focus, etc.
    */
   bind(event: string, handler: Function): this {
     this._bindings.push({ event, handler });
@@ -210,6 +209,9 @@ export class Input {
    * @param toComponent - Optional transform function when going from state to component
    */
   sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Input.sync: Expected a State object for property "${property}"`);
+    }
     this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
@@ -356,8 +358,8 @@ export class Input {
    * ------------------------- */
 
   render(targetId?: string): this {
+    // === 1. SETUP: Get container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
@@ -367,21 +369,22 @@ export class Input {
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { type, value, placeholder, label, required, disabled, name, rows, min, max, step, minLength, maxLength, pattern, style, class: className } = this.state;
 
+    // === 2. PREPARE: Destructure state and check bindings ===
+    const {
+      type, value, placeholder, label, icon, required, disabled, name, rows,
+      min, max, step, minLength, maxLength, pattern, style, class: className
+    } = this.state;
+
+    const hasValueSync = this._syncBindings.some(binding => binding.property === 'value');
+
+    // === 3. BUILD: Create all DOM elements ===
     const wrapper = document.createElement('div');
     wrapper.className = 'jux-input';
     wrapper.id = this._id;
-
-    if (className) {
-      wrapper.className += ` ${className}`;
-    }
-
-    if (style) {
-      wrapper.setAttribute('style', style);
-    }
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
 
     // Label
     const labelEl = document.createElement('label');
@@ -394,13 +397,24 @@ export class Input {
       requiredSpan.textContent = ' *';
       labelEl.appendChild(requiredSpan);
     }
-    if (label) {
-      wrapper.appendChild(labelEl);
+    if (label) wrapper.appendChild(labelEl);
+
+    // Input container
+    const inputContainer = document.createElement('div');
+    inputContainer.className = 'jux-input-container';
+    if (icon) inputContainer.classList.add('jux-input-with-icon');
+
+    // Icon
+    if (icon) {
+      const iconEl = document.createElement('span');
+      iconEl.className = 'jux-input-icon';
+      const iconElement = renderIcon(icon);
+      iconEl.appendChild(iconElement);
+      inputContainer.appendChild(iconEl);
     }
 
-    // Input/Textarea
+    // Input/Textarea element
     let inputEl: HTMLInputElement | HTMLTextAreaElement;
-
     if (type === 'textarea') {
       inputEl = document.createElement('textarea');
       inputEl.rows = rows;
@@ -431,54 +445,51 @@ export class Input {
     inputEl.required = required;
     inputEl.disabled = disabled;
 
-    // Input event handler - from onChange option
-    inputEl.addEventListener('input', (e) => {
-      const target = e.target as HTMLInputElement | HTMLTextAreaElement;
-      this.state.value = target.value;
-
-      this._clearError();
-
-      if (this._onChange) {
-        this._onChange(target.value);
-      }
-    });
-
-    inputEl.addEventListener('blur', () => {
-      this.validate();
-    });
-
-    wrapper.appendChild(inputEl);
+    inputContainer.appendChild(inputEl);
+    wrapper.appendChild(inputContainer);
 
-    // Error message element
+    // Error element
     const errorEl = document.createElement('div');
     errorEl.className = 'jux-input-error';
     errorEl.id = `${this._id}-error`;
     errorEl.style.display = 'none';
     wrapper.appendChild(errorEl);
 
-    // Character counter for maxLength
+    // Character counter
     if (maxLength && (type === 'text' || type === 'textarea')) {
       const counterEl = document.createElement('div');
       counterEl.className = 'jux-input-counter';
       counterEl.id = `${this._id}-counter`;
       counterEl.textContent = `${value.length}/${maxLength}`;
+      wrapper.appendChild(counterEl);
 
+      // Wire counter immediately
       inputEl.addEventListener('input', () => {
         counterEl.textContent = `${inputEl.value.length}/${maxLength}`;
       });
+    }
 
-      wrapper.appendChild(counterEl);
+    // === 4. WIRE: Add event listeners ===
+
+    // Default input handler (only if NOT using sync)
+    if (!hasValueSync) {
+      inputEl.addEventListener('input', () => {
+        this.state.value = inputEl.value;
+        this._clearError();
+      });
     }
 
-    container.appendChild(wrapper);
-    this._injectDefaultStyles();
+    // Always add blur validation
+    inputEl.addEventListener('blur', () => {
+      this.validate();
+    });
 
-    // === Wire up event bindings ===
+    // Wire up custom event bindings (from .bind() calls)
     this._bindings.forEach(({ event, handler }) => {
       wrapper.addEventListener(event, handler as EventListener);
     });
 
-    // === Wire up sync bindings (TWO-WAY) ===
+    // Wire up sync bindings (from .sync() calls)
     this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
       if (property === 'value') {
         // Default transforms
@@ -503,13 +514,18 @@ export class Input {
         inputEl.addEventListener('input', () => {
           if (isUpdating) return;
           isUpdating = true;
+
           const transformed = transformToState(inputEl.value);
+          this.state.value = inputEl.value;
+          this._clearError();
+
           stateObj.set(transformed);
+
           setTimeout(() => { isUpdating = false; }, 0);
         });
       }
       else if (property === 'label') {
-        // Sync label
+        // Sync label (one-way: state → component)
         const transformToComponent = toComponent || ((v: any) => String(v));
 
         stateObj.subscribe((val: any) => {
@@ -520,6 +536,17 @@ export class Input {
       }
     });
 
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(wrapper);
+    this._injectDefaultStyles();
+
+    // Trigger Lucide icon rendering
+    requestAnimationFrame(() => {
+      if ((window as any).lucide) {
+        (window as any).lucide.createIcons();
+      }
+    });
+
     return this;
   }
 
@@ -534,6 +561,31 @@ export class Input {
         margin-bottom: 16px;
       }
 
+      .jux-input-container {
+        position: relative;
+      }
+
+      .jux-input-with-icon .jux-input-element {
+        padding-left: 40px;
+      }
+
+      .jux-input-icon {
+        position: absolute;
+        left: 12px;
+        top: 50%;
+        transform: translateY(-50%);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #6b7280;
+        pointer-events: none;
+      }
+
+      .jux-input-icon svg {
+        width: 18px;
+        height: 18px;
+      }
+
       .jux-input-label {
         display: block;
         margin-bottom: 6px;