juxscript 1.0.18 → 1.0.20

package/lib/components/checkbox.ts

@@ -7,7 +7,6 @@ export interface CheckboxOptions {
     disabled?: boolean;
     name?: string;
     value?: string;
-    onChange?: (checked: boolean) => void;
     style?: string;
     class?: string;
 }
@@ -22,18 +21,42 @@ type CheckboxState = {
     class: string;
 };
 
+/**
+ * Checkbox component
+ * 
+ * Usage:
+ *   jux.checkbox('terms', {
+ *     label: 'I agree to terms',
+ *     checked: false
+ *   })
+ *   .bind('change', (e) => console.log(e.target.checked))
+ *   .render('#form');
+ * 
+ *   // Two-way binding with state
+ *   const termsState = state(false);
+ *   jux.checkbox('terms')
+ *     .label('I agree to terms')
+ *     .sync('checked', termsState)
+ *     .render('#form');
+ */
 export class Checkbox {
     state: CheckboxState;
     container: HTMLElement | null = null;
     _id: string;
     id: string;
-    private _onChange?: (checked: boolean) => void;
-    private _boundState?: State<boolean>;
+
+    // CRITICAL: Store bind/sync instructions for deferred wiring
+    private _bindings: Array<{ event: string, handler: Function }> = [];
+    private _syncBindings: Array<{
+        property: string,
+        stateObj: State<any>,
+        toState?: Function,
+        toComponent?: Function
+    }> = [];
 
     constructor(id: string, options: CheckboxOptions = {}) {
         this._id = id;
         this.id = id;
-        this._onChange = options.onChange;
 
         this.state = {
             label: options.label ?? '',
@@ -46,6 +69,10 @@ export class Checkbox {
         };
     }
 
+    /* -------------------------
+     * Fluent API
+     * ------------------------- */
+
     label(value: string): this {
         this.state.label = value;
         return this;
@@ -83,35 +110,35 @@ export class Checkbox {
         return this;
     }
 
-    onChange(handler: (checked: boolean) => void): this {
-        this._onChange = handler;
+    /**
+     * Bind event handler (stores for wiring in render)
+     * DOM events only: change, click, focus, blur, etc.
+     */
+    bind(event: string, handler: Function): this {
+        this._bindings.push({ event, handler });
         return this;
     }
 
     /**
-     * Two-way binding to state
+     * Two-way sync with state (stores for wiring in render)
+     * 
+     * @param property - Component property to sync ('checked', 'label', 'disabled')
+     * @param stateObj - State object to sync with
+     * @param toState - Optional transform function when going from component to state
+     * @param toComponent - Optional transform function when going from state to component
      */
-    bind(stateObj: State<boolean>): this {
-        this._boundState = stateObj;
-
-        // Update checkbox when state changes
-        stateObj.subscribe((val) => {
-            this.state.checked = val;
-            this._updateElement();
-        });
-
-        // Update state when checkbox changes (already handled in onChange)
-        const originalOnChange = this._onChange;
-        this._onChange = (checked) => {
-            stateObj.set(checked);
-            if (originalOnChange) {
-                originalOnChange(checked);
-            }
-        };
-
+    sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Checkbox.sync: Expected a State object for property "${property}"`);
+        }
+        this._syncBindings.push({ property, stateObj, toState, toComponent });
         return this;
     }
 
+    /* -------------------------
+     * Helpers
+     * ------------------------- */
+
     private _updateElement(): void {
         const input = document.getElementById(`${this._id}-input`) as HTMLInputElement;
         if (input) {
@@ -120,37 +147,47 @@ export class Checkbox {
         }
     }
 
+    /**
+     * Toggle the checkbox
+     */
+    toggle(): this {
+        this.state.checked = !this.state.checked;
+        this._updateElement();
+        return this;
+    }
+
     isChecked(): boolean {
         return this.state.checked;
     }
 
+    /* -------------------------
+     * Render
+     * ------------------------- */
+
     render(targetId?: string): this {
+        // === 1. SETUP: Get or create container ===
         let container: HTMLElement;
-
         if (targetId) {
             const target = document.querySelector(targetId);
             if (!target || !(target instanceof HTMLElement)) {
-                throw new Error(`Checkbox: Target element "${targetId}" not found`);
+                throw new Error(`Checkbox: Target "${targetId}" not found`);
             }
             container = target;
         } else {
             container = getOrCreateContainer(this._id);
         }
-
         this.container = container;
-        const { label, checked, disabled, name, value, style, class: className } = this.state;
 
+        // === 2. PREPARE: Destructure state and check sync flags ===
+        const { checked, label, disabled, name, style, class: className } = this.state;
+        const hasCheckedSync = this._syncBindings.some(b => b.property === 'checked');
+
+        // === 3. BUILD: Create DOM elements ===
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-checkbox';
         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);
 
         const labelEl = document.createElement('label');
         labelEl.className = 'jux-checkbox-label';
@@ -160,28 +197,77 @@ export class Checkbox {
         input.className = 'jux-checkbox-input';
         input.id = `${this._id}-input`;
         input.name = name;
-        input.value = value;
         input.checked = checked;
         input.disabled = disabled;
 
-        input.addEventListener('change', (e) => {
-            const target = e.target as HTMLInputElement;
-            this.state.checked = target.checked;
-            if (this._onChange) {
-                this._onChange(target.checked);
-            }
-        });
+        const checkmark = document.createElement('span');
+        checkmark.className = 'jux-checkbox-checkmark';
+
+        const text = document.createElement('span');
+        text.className = 'jux-checkbox-text';
+        text.textContent = label;
 
         labelEl.appendChild(input);
+        labelEl.appendChild(checkmark);
+        labelEl.appendChild(text);
+        wrapper.appendChild(labelEl);
+
+        // === 4. WIRE: Attach event listeners and sync bindings ===
 
-        if (label) {
-            const span = document.createElement('span');
-            span.className = 'jux-checkbox-text';
-            span.textContent = label;
-            labelEl.appendChild(span);
+        // Default behavior (only if NOT using sync)
+        if (!hasCheckedSync) {
+            input.addEventListener('change', () => {
+                this.state.checked = input.checked;
+            });
         }
 
-        wrapper.appendChild(labelEl);
+        // Wire custom bindings from .bind() calls
+        this._bindings.forEach(({ event, handler }) => {
+            wrapper.addEventListener(event, handler as EventListener);
+        });
+
+        // Wire sync bindings from .sync() calls
+        this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+            if (property === 'checked') {
+                const transformToState = toState || ((v: any) => Boolean(v));
+                const transformToComponent = toComponent || ((v: any) => Boolean(v));
+
+                let isUpdating = false;
+
+                // State → Component
+                stateObj.subscribe((val: any) => {
+                    if (isUpdating) return;
+                    const transformed = transformToComponent(val);
+                    if (input.checked !== transformed) {
+                        input.checked = transformed;
+                        this.state.checked = transformed;
+                    }
+                });
+
+                // Component → State
+                input.addEventListener('change', () => {
+                    if (isUpdating) return;
+                    isUpdating = true;
+
+                    const transformed = transformToState(input.checked);
+                    this.state.checked = input.checked;
+                    stateObj.set(transformed);
+
+                    setTimeout(() => { isUpdating = false; }, 0);
+                });
+            }
+            else if (property === 'label') {
+                const transformToComponent = toComponent || ((v: any) => String(v));
+
+                stateObj.subscribe((val: any) => {
+                    const transformed = transformToComponent(val);
+                    text.textContent = transformed;
+                    this.state.label = transformed;
+                });
+            }
+        });
+
+        // === 5. RENDER: Append to DOM and finalize ===
         container.appendChild(wrapper);
         return this;
     }

package/lib/components/code.ts

@@ -1,65 +1,47 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
-/**
- * Code component options
- */
 export interface CodeOptions {
   code?: string;
   language?: string;
-  lineNumbers?: boolean;
-  highlight?: boolean;
   style?: string;
   class?: string;
 }
 
-/**
- * Code component state
- */
 type CodeState = {
   code: string;
   language: string;
-  lineNumbers: boolean;
-  highlight: boolean;
   style: string;
   class: string;
 };
 
-/**
- * Code component
- *
- * Usage:
- *   const code = jux.code('myCode', 'console.log("hello")', 'javascript');
- *   code.render();
- */
 export class Code {
   state: CodeState;
   container: HTMLElement | null = null;
   _id: string;
   id: string;
 
-  constructor(
-    id: string,
-    content?: string,
-    language?: string,
-    options: CodeOptions = {}
-  ) {
+  // CRITICAL: Store bind/sync instructions for deferred wiring
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+  private _syncBindings: Array<{
+    property: string,
+    stateObj: State<any>,
+    toState?: Function,
+    toComponent?: Function
+  }> = [];
+
+  constructor(id: string, options: CodeOptions = {}) {
     this._id = id;
     this.id = id;
 
     this.state = {
-      code: content ?? options.code ?? '',
-      language: language ?? options.language ?? 'javascript',
-      lineNumbers: options.lineNumbers ?? false,
-      highlight: options.highlight ?? true,
+      code: options.code ?? '',
+      language: options.language ?? 'javascript',
       style: options.style ?? '',
       class: options.class ?? ''
     };
   }
 
-  /* -------------------------
-   * Fluent API
-   * ------------------------- */
-
   code(value: string): this {
     this.state.code = value;
     return this;
@@ -70,87 +52,119 @@ export class Code {
     return this;
   }
 
-  lineNumbers(value: boolean): this {
-    this.state.lineNumbers = value;
+  style(value: string): this {
+    this.state.style = value;
     return this;
   }
 
-  highlight(value: boolean): this {
-    this.state.highlight = value;
+  class(value: string): this {
+    this.state.class = value;
     return this;
   }
 
-  style(value: string): this {
-    this.state.style = value;
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
     return this;
   }
 
-  class(value: string): this {
-    this.state.class = value;
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    if (!stateObj || typeof stateObj.subscribe !== 'function') {
+      throw new Error(`Code.sync: Expected a State object for property "${property}"`);
+    }
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
 
-  /* -------------------------
-   * Render
-   * ------------------------- */
-
   render(targetId?: string): this {
+    // === 1. SETUP: Get or create container ===
     let container: HTMLElement;
-
     if (targetId) {
       const target = document.querySelector(targetId);
       if (!target || !(target instanceof HTMLElement)) {
-        throw new Error(`Code: Target element "${targetId}" not found`);
+        throw new Error(`Code: Target "${targetId}" not found`);
       }
       container = target;
     } else {
       container = getOrCreateContainer(this._id);
     }
-
     this.container = container;
-    const { code, language, lineNumbers, highlight, style, class: className } = this.state;
 
-    const pre = document.createElement('pre');
-    pre.className = lineNumbers ? 'jux-code line-numbers' : 'jux-code';
-    pre.id = this._id;
-
-    if (className) {
-      pre.className += ` ${className}`;
-    }
+    // === 2. PREPARE: Destructure state ===
+    const { code, language, style, class: className } = this.state;
 
-    if (style) {
-      pre.setAttribute('style', style);
-    }
+    // === 3. BUILD: Create DOM elements ===
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jux-code';
+    wrapper.id = this._id;
+    if (className) wrapper.className += ` ${className}`;
+    if (style) wrapper.setAttribute('style', style);
 
+    const pre = document.createElement('pre');
     const codeEl = document.createElement('code');
-    codeEl.className = highlight ? `language-${language}` : '';
+    codeEl.className = `language-${language}`;
     codeEl.textContent = code;
-
     pre.appendChild(codeEl);
-    container.appendChild(pre);
+    wrapper.appendChild(pre);
+
+    // === 4. WIRE: Attach event listeners and sync bindings ===
+
+    // Wire custom bindings from .bind() calls
+    this._bindings.forEach(({ event, handler }) => {
+      wrapper.addEventListener(event, handler as EventListener);
+    });
+
+    // Wire sync bindings from .sync() calls
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'code') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          codeEl.textContent = transformed;
+          this.state.code = transformed;
+
+          // Re-trigger syntax highlighting if available
+          if ((window as any).Prism) {
+            (window as any).Prism.highlightElement(codeEl);
+          }
+        });
+      }
+      else if (property === 'language') {
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          codeEl.className = `language-${transformed}`;
+          this.state.language = transformed;
+
+          if ((window as any).Prism) {
+            (window as any).Prism.highlightElement(codeEl);
+          }
+        });
+      }
+    });
+
+    // === 5. RENDER: Append to DOM and finalize ===
+    container.appendChild(wrapper);
+
+    // Trigger syntax highlighting
+    requestAnimationFrame(() => {
+      if ((window as any).Prism) {
+        (window as any).Prism.highlightElement(codeEl);
+      }
+    });
 
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: any): this {
-    if (!juxComponent || typeof juxComponent !== 'object') {
-      throw new Error('Code.renderTo: Invalid component - not an object');
+    if (!juxComponent?._id) {
+      throw new Error('Code.renderTo: Invalid component');
     }
-
-    if (!juxComponent._id || typeof juxComponent._id !== 'string') {
-      throw new Error('Code.renderTo: Invalid component - missing _id (not a Jux component)');
-    }
-
     return this.render(`#${juxComponent._id}`);
   }
 }
 
-/**
- * Factory helper
- */
-export function code(id: string, content?: string, language?: string): Code {
-  return new Code(id, content, language);
+export function code(id: string, options: CodeOptions = {}): Code {
+  return new Code(id, options);
 }

package/lib/components/container.ts

@@ -144,7 +144,7 @@ export class Container {
     let computedStyle = style;
 
     if (usesFlexbox) {
-      const flexStyles: string[] = ['display: flex', 'width: max-content'];
+      const flexStyles: string[] = ['display: flex', 'width: auto'];
 
       if (direction) flexStyles.push(`flex-direction: ${direction}`);