juxscript 1.0.17 → 1.0.19

package/README.md

@@ -12,6 +12,13 @@
   - [ ] Distributable Bundle (Static Sites)
   - [ ] Tree Shake/Efficiencies.
 
+- [ ] Data
+  - [ ] Drivers: File, S3, Database.
+  - [ ] const d = jux.data('id',{});
+  - [ ] d.driver(file|s3|database)
+  - [ ] d.items([] | juxitem)
+  - [ ] d.store(callback)
+
 - [X] Layouts (100% done.)
   - [ ] *Authoring Layout Pages* - `docs`
   - [ ] *Authoring Application Pages* - `docs`
@@ -22,7 +29,7 @@
 - [X] Reactivity (90% done.)
 - [ ] Client Components (99% of what would be needed.)
   - [X] Charts
-  - [ ] Poor Intellisense support? Could be this issue.
+  - [X] Poor Intellisense support? Could be this issue. - fixed.
   - [ ] Api Wrapper
   - [X] Params/Active State for Menu/Nav matching - built in.
   - [ ] CDN Bundle (import CDN/'state', 'jux' from cdn.)

package/lib/components/button.ts

@@ -1,4 +1,5 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Button component options
@@ -38,12 +39,6 @@ type ButtonState = {
 
 /**
  * Button component
- * 
- * Usage:
- *   jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();
- *   
- *   // Or with options
- *   jux.button('myButton', { label: 'Click Me', click: () => console.log('hi') }).render();
  */
 export class Button {
   state: ButtonState;
@@ -51,6 +46,9 @@ export class Button {
   _id: string;
   id: string;
 
+  // Store bind() instructions
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+
   constructor(id: string, options?: ButtonOptions) {
     this._id = id;
     this.id = id;
@@ -77,97 +75,69 @@ export class Button {
    * Fluent API
    * ------------------------- */
 
-  /**
-   * Set button label text
-   */
   label(value: string): this {
     this.state.label = value;
     return this;
   }
 
-  /**
-   * Set button icon (emoji or text)
-   */
   icon(value: string): this {
     this.state.icon = value;
     return this;
   }
 
-  /**
-   * Set click handler
-   */
   click(callback: (e: Event) => void): this {
     this.state.click = callback;
     return this;
   }
 
   /**
-   * Set button variant/style
+   * Bind event handler (stores for wiring in render)
    */
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
+
   variant(value: string): this {
     this.state.variant = value;
     return this;
   }
 
-  /**
-   * Set button size
-   */
   size(value: 'small' | 'medium' | 'large'): this {
     this.state.size = value;
     return this;
   }
 
-  /**
-   * Set disabled state
-   */
   disabled(value: boolean): this {
     this.state.disabled = value;
     return this;
   }
 
-  /**
-   * Set loading state
-   */
   loading(value: boolean): this {
     this.state.loading = value;
     return this;
   }
 
-  /**
-   * Set icon position (left or right)
-   */
   iconPosition(value: 'left' | 'right'): this {
     this.state.iconPosition = value;
     return this;
   }
 
-  /**
-   * Set full width
-   */
   fullWidth(value: boolean): this {
     this.state.fullWidth = value;
     return this;
   }
 
-  /**
-   * Set button type attribute
-   */
   type(value: 'button' | 'submit' | 'reset'): this {
     this.state.type = value;
     return this;
   }
 
-  /**
-   * Set inline style
-   */
   style(value: string): this {
     this.state.style = value;
     return this;
   }
 
-  /**
-   * Set additional CSS classes
-   */
   class(value: string): this {
     this.state.class = value;
     return this;
@@ -177,9 +147,6 @@ export class Button {
    * Render
    * ------------------------- */
 
-  /**
-   * Render button to target element
-   */
   render(targetId?: string): this {
     let container: HTMLElement;
 
@@ -238,18 +205,20 @@ export class Button {
       button.appendChild(iconEl);
     }
 
-    // Event binding - click handler
+    // Event binding - legacy click handler from state
     if (click) {
       button.addEventListener('click', click);
     }
 
+    // Event binding - bind() method handlers
+    this._bindings.forEach(({ event, handler }) => {
+      button.addEventListener(event, handler as EventListener);
+    });
+
     container.appendChild(button);
     return this;
   }
 
-  /**
-   * Render to another Jux component's container
-   */
   renderTo(juxComponent: this): this {
     if (!juxComponent || typeof juxComponent !== 'object') {
       throw new Error('Button.renderTo: Invalid component - not an object');
@@ -263,9 +232,6 @@ export class Button {
   }
 }
 
-/**
- * Factory helper
- */
 export function button(id: string, options?: ButtonOptions): Button {
   return new Button(id, options);
 }

package/lib/components/docs-data.json

@@ -1100,6 +1100,12 @@
           "returns": "this",
           "description": "Set icon"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
         {
           "name": "variant",
           "params": "(value)",
@@ -1167,7 +1173,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();"
+      "example": "jux.button('id').render()"
     },
     {
       "name": "Card",
@@ -2391,10 +2397,16 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2408,7 +2420,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.input('username')"
+      "example": "jux.input('id').render()"
     },
     {
       "name": "Kpicard",
@@ -2818,6 +2830,18 @@
           "returns": "this",
           "description": "Set style"
         },
+        {
+          "name": "bind",
+          "params": "(property, source, transform?)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, transform?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -3518,5 +3542,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-21T22:44:40.980Z"
+  "lastUpdated": "2026-01-22T21:54:27.911Z"
 }

package/lib/components/input.ts

@@ -49,29 +49,7 @@ type InputState = {
 };
 
 /**
- * Input component - text input and textarea with validation
- * 
- * Usage:
- *   jux.input('username')
- *     .label('Username')
- *     .placeholder('Enter username')
- *     .required(true)
- *     .minLength(3)
- *     .maxLength(20)
- *     .render('#form');
- * 
- *   jux.input('age')
- *     .type('number')
- *     .min(0)
- *     .max(120)
- *     .step(1)
- *     .render('#form');
- * 
- *   jux.input('bio')
- *     .type('textarea')
- *     .rows(5)
- *     .maxLength(500)
- *     .render('#form');
+ * Input component
  */
 export class Input {
   state: InputState;
@@ -80,7 +58,12 @@ export class Input {
   id: string;
   private _onChange?: (value: string) => void;
   private _onValidate?: (value: string) => boolean | string;
-  private _boundState?: State<string>;
+
+  // Store bind() instructions
+  private _bindings: Array<{ event: string, handler: Function }> = [];
+
+  // Store sync() instructions
+  private _syncBindings: Array<{ property: string, stateObj: State<any>, toState?: Function, toComponent?: Function }> = [];
 
   constructor(id: string, options: InputOptions = {}) {
     this._id = id;
@@ -154,54 +137,36 @@ export class Input {
     return this;
   }
 
-  /**
-   * Minimum value for number inputs
-   */
   min(value: number): this {
     this.state.min = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Maximum value for number inputs
-   */
   max(value: number): this {
     this.state.max = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Step value for number inputs
-   */
   step(value: number): this {
     this.state.step = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Minimum length for text inputs
-   */
   minLength(value: number): this {
     this.state.minLength = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Maximum length for text inputs
-   */
   maxLength(value: number): this {
     this.state.maxLength = value;
     this._updateElement();
     return this;
   }
 
-  /**
-   * Pattern validation for text inputs (regex)
-   */
   pattern(value: string): this {
     this.state.pattern = value;
     this._updateElement();
@@ -223,30 +188,29 @@ export class Input {
     return this;
   }
 
-  /**
-   * Custom validation function
-   * Should return true if valid, or an error message string if invalid
-   */
   onValidate(handler: (value: string) => boolean | string): this {
     this._onValidate = handler;
     return this;
   }
 
   /**
-   * Two-way binding to state
+   * Bind event handler (stores for wiring in render)
    */
-  bind(stateObj: State<string>): this {
-    this._boundState = stateObj;
-
-    // Subscribe to state changes
-    stateObj.subscribe((val) => {
-      this.state.value = val;
-      this._updateElement();
-    });
-
-    // Update state on input change
-    this.onChange((value) => stateObj.set(value));
+  bind(event: string, handler: Function): this {
+    this._bindings.push({ event, handler });
+    return this;
+  }
 
+  /**
+   * Two-way sync with state (stores for wiring in render)
+   * 
+   * @param property - Component property to sync ('value', 'label', etc)
+   * @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
+   */
+  sync(property: string, stateObj: State<any>, toState?: Function, toComponent?: Function): this {
+    this._syncBindings.push({ property, stateObj, toState, toComponent });
     return this;
   }
 
@@ -257,12 +221,10 @@ export class Input {
   private _validate(value: string): boolean | string {
     const { required, type, min, max, minLength, maxLength, pattern } = this.state;
 
-    // Required check
     if (required && !value.trim()) {
       return 'This field is required';
     }
 
-    // Number validation
     if (type === 'number' && value) {
       const numValue = Number(value);
 
@@ -279,7 +241,6 @@ export class Input {
       }
     }
 
-    // Text length validation
     if ((type === 'text' || type === 'textarea') && value) {
       if (minLength !== undefined && value.length < minLength) {
         return `Must be at least ${minLength} characters`;
@@ -290,7 +251,6 @@ export class Input {
       }
     }
 
-    // Pattern validation
     if (pattern && value) {
       const regex = new RegExp(pattern);
       if (!regex.test(value)) {
@@ -298,7 +258,6 @@ export class Input {
       }
     }
 
-    // Custom validation
     if (this._onValidate) {
       const result = this._onValidate(value);
       if (result !== true) {
@@ -341,9 +300,6 @@ export class Input {
     this.state.errorMessage = undefined;
   }
 
-  /**
-   * Manually validate the current value
-   */
   validate(): boolean {
     const result = this._validate(this.state.value);
 
@@ -428,17 +384,17 @@ export class Input {
     }
 
     // Label
+    const labelEl = document.createElement('label');
+    labelEl.className = 'jux-input-label';
+    labelEl.htmlFor = `${this._id}-input`;
+    labelEl.textContent = label;
+    if (required) {
+      const requiredSpan = document.createElement('span');
+      requiredSpan.className = 'jux-input-required';
+      requiredSpan.textContent = ' *';
+      labelEl.appendChild(requiredSpan);
+    }
     if (label) {
-      const labelEl = document.createElement('label');
-      labelEl.className = 'jux-input-label';
-      labelEl.htmlFor = `${this._id}-input`;
-      labelEl.textContent = label;
-      if (required) {
-        const requiredSpan = document.createElement('span');
-        requiredSpan.className = 'jux-input-required';
-        requiredSpan.textContent = ' *';
-        labelEl.appendChild(requiredSpan);
-      }
       wrapper.appendChild(labelEl);
     }
 
@@ -454,14 +410,12 @@ export class Input {
       inputEl = document.createElement('input');
       inputEl.type = type;
 
-      // Number-specific attributes
       if (type === 'number') {
         if (min !== undefined) inputEl.min = String(min);
         if (max !== undefined) inputEl.max = String(max);
         if (step !== undefined) inputEl.step = String(step);
       }
 
-      // Text-specific attributes
       if (type === 'text' || type === 'email' || type === 'tel' || type === 'url') {
         if (minLength !== undefined) inputEl.minLength = minLength;
         if (maxLength !== undefined) inputEl.maxLength = maxLength;
@@ -477,12 +431,11 @@ export class Input {
     inputEl.required = required;
     inputEl.disabled = disabled;
 
-    // Input event handler
+    // Input event handler - from onChange option
     inputEl.addEventListener('input', (e) => {
       const target = e.target as HTMLInputElement | HTMLTextAreaElement;
       this.state.value = target.value;
 
-      // Clear error on input
       this._clearError();
 
       if (this._onChange) {
@@ -490,7 +443,6 @@ export class Input {
       }
     });
 
-    // Blur event for validation
     inputEl.addEventListener('blur', () => {
       this.validate();
     });
@@ -519,10 +471,55 @@ export class Input {
     }
 
     container.appendChild(wrapper);
-
-    // Add default styles if not already present
     this._injectDefaultStyles();
 
+    // === Wire up event bindings ===
+    this._bindings.forEach(({ event, handler }) => {
+      wrapper.addEventListener(event, handler as EventListener);
+    });
+
+    // === Wire up sync bindings (TWO-WAY) ===
+    this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
+      if (property === 'value') {
+        // Default transforms
+        const transformToState = toState || ((v: string) => {
+          return type === 'number' ? (parseInt(v) || 0) : v;
+        });
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        let isUpdating = false;
+
+        // State → Input (when state changes, update input)
+        stateObj.subscribe((val: any) => {
+          if (isUpdating) return;
+          const transformed = transformToComponent(val);
+          if (inputEl.value !== transformed) {
+            inputEl.value = transformed;
+            this.state.value = transformed;
+          }
+        });
+
+        // Input → State (when input changes, update state)
+        inputEl.addEventListener('input', () => {
+          if (isUpdating) return;
+          isUpdating = true;
+          const transformed = transformToState(inputEl.value);
+          stateObj.set(transformed);
+          setTimeout(() => { isUpdating = false; }, 0);
+        });
+      }
+      else if (property === 'label') {
+        // Sync label
+        const transformToComponent = toComponent || ((v: any) => String(v));
+
+        stateObj.subscribe((val: any) => {
+          const transformed = transformToComponent(val);
+          labelEl.textContent = transformed;
+          this.state.label = transformed;
+        });
+      }
+    });
+
     return this;
   }
 

package/lib/components/paragraph.ts

@@ -1,4 +1,5 @@
 import { getOrCreateContainer } from './helpers.js';
+import { State } from '../reactivity/state.js';
 
 /**
  * Paragraph options
@@ -24,6 +25,17 @@ type ParagraphState = {
  * Usage:
  *   jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');
  *   jux.paragraph('description').text('A simple framework').render('#app');
+ *   
+ *   // With state binding
+ *   jux.paragraph('counter')
+ *     .text('Count: 0')
+ *     .bind('text', count, (val) => `Count: ${val}`)
+ *     .render('#app');
+ *   
+ *   // With sync (one-way for paragraph)
+ *   jux.paragraph('display')
+ *     .sync('text', count, (val) => `Count: ${val}`)
+ *     .render('#app');
  */
 export class Paragraph {
     state: ParagraphState;
@@ -31,6 +43,12 @@ export class Paragraph {
     _id: string;
     id: string;
 
+    // Store bind() instructions
+    private _bindings: Array<{ event: string, handler: Function, stateObj?: State<any>, transform?: Function }> = [];
+
+    // Store sync() instructions
+    private _syncBindings: Array<{ property: string, stateObj: State<any>, transform?: Function }> = [];
+
     constructor(id: string, options: ParagraphOptions = {}) {
         this._id = id;
         this.id = id;
@@ -61,6 +79,40 @@ export class Paragraph {
         return this;
     }
 
+    /**
+     * Bind event or state (stores for wiring in render)
+     */
+    bind(property: string, source: State<any> | Function, transform?: Function): this {
+        if (typeof source === 'function') {
+            // Event binding
+            this._bindings.push({ event: property, handler: source });
+        } else {
+            // Validate it's a State object
+            if (!source || typeof source.subscribe !== 'function') {
+                throw new Error(`Paragraph.bind: Expected a State object, got ${typeof source}. Did you pass 'state.value' instead of 'state'?`);
+            }
+            // State binding
+            this._bindings.push({ event: property, handler: () => { }, stateObj: source, transform });
+        }
+        return this;
+    }
+
+    /**
+     * Sync with state (one-way for paragraph: State → Component)
+     * 
+     * @param property - Component property to sync ('text', 'class', 'style')
+     * @param stateObj - State object to sync with
+     * @param transform - Optional transform function when going from state to component
+     */
+    sync(property: string, stateObj: State<any>, transform?: Function): this {
+        // Validate it's a State object
+        if (!stateObj || typeof stateObj.subscribe !== 'function') {
+            throw new Error(`Paragraph.sync: Expected a State object, got ${typeof stateObj}. Did you pass 'state.value' instead of 'state'?`);
+        }
+        this._syncBindings.push({ property, stateObj, transform });
+        return this;
+    }
+
     /* -------------------------
      * Render
      * ------------------------- */
@@ -99,6 +151,41 @@ export class Paragraph {
 
         container.appendChild(p);
 
+        // Wire up bind() bindings after DOM element is created
+        this._bindings.forEach(({ event, handler, stateObj, transform }) => {
+            if (stateObj) {
+                // State binding - subscribe to state changes
+                stateObj.subscribe((val: any) => {
+                    const transformed = transform ? transform(val) : val;
+                    if (event === 'text') {
+                        p.textContent = transformed;
+                        this.state.text = transformed;
+                    }
+                });
+            } else {
+                // Event binding
+                p.addEventListener(event, handler as EventListener);
+            }
+        });
+
+        // Wire up sync() bindings (State → Component)
+        this._syncBindings.forEach(({ property, stateObj, transform }) => {
+            stateObj.subscribe((val: any) => {
+                const transformed = transform ? transform(val) : val;
+
+                if (property === 'text') {
+                    p.textContent = transformed;
+                    this.state.text = transformed;
+                } else if (property === 'class') {
+                    p.className = transformed;
+                    this.state.class = transformed;
+                } else if (property === 'style') {
+                    p.setAttribute('style', transformed);
+                    this.state.style = transformed;
+                }
+            });
+        });
+
         return this;
     }
 }