juxscript 1.1.255 → 1.1.256

package/dist/lib/index.d.ts

@@ -4,6 +4,7 @@ import { input } from "./components/input.js";
 import { select } from "./components/select.js";
 import { radio } from "./components/radio.js";
 import { checkbox, checkboxGroup } from "./components/checkbox.js";
+import { pageState } from "./state/pageState.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -22,5 +23,7 @@ export declare const jux: {
     radio: typeof radio;
     checkbox: typeof checkbox;
     checkboxGroup: typeof checkboxGroup;
+    pageState: Record<string, any>;
 };
+export { pageState };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEnE,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;CAaf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAYjD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;CAwBf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -4,17 +4,38 @@ import { input } from "./components/input.js";
 import { select } from "./components/select.js";
 import { radio } from "./components/radio.js";
 import { checkbox, checkboxGroup } from "./components/checkbox.js";
+import { pageState } from "./state/pageState.js";
+// Wrap factories to auto-register into pageState
+function tracked(factory) {
+    return ((...args) => {
+        const component = factory(...args);
+        const id = args[0]; // first arg is always id
+        if (id)
+            pageState.register(id, component);
+        return component;
+    });
+}
 export const jux = {
+    // Tags
     tag,
-    div,
-    h1, h2, h3, h4, h5, h6,
-    p,
-    span,
-    pre,
+    div: tracked(div),
+    h1: tracked(h1),
+    h2: tracked(h2),
+    h3: tracked(h3),
+    h4: tracked(h4),
+    h5: tracked(h5),
+    h6: tracked(h6),
+    p: tracked(p),
+    span: tracked(span),
+    pre: tracked(pre),
+    // Components
     include,
-    input,
-    select,
-    radio,
-    checkbox,
-    checkboxGroup
+    input: tracked(input),
+    select: tracked(select),
+    radio: tracked(radio),
+    checkbox: tracked(checkbox),
+    checkboxGroup: tracked(checkboxGroup),
+    // State
+    pageState
 };
+export { pageState };

package/dist/lib/state/pageState.d.ts

@@ -0,0 +1,47 @@
+declare class PageState {
+    private _components;
+    private _listeners;
+    private _eventListeners;
+    private _proxy;
+    constructor();
+    /**
+     * Register a component into pageState.
+     * Called automatically by jux components on creation.
+     */
+    register(id: string, component: any): void;
+    /**
+     * Watch for property changes on any component.
+     *
+     * Usage:
+     *   pageState.watch('input1', 'value', (newVal, oldVal) => { ... })
+     *   pageState.watch('*', 'value', (key, prop, newVal) => { ... })  // wildcard
+     */
+    watch(keyOrAll: string, prop: string, fn: (newVal: any, oldVal: any, key?: string) => void): () => void;
+    /**
+     * Listen for ephemeral events (blur, focus, hover, etc.)
+     *
+     * Usage:
+     *   pageState.on('input2', 'blur', () => { pageState['input1'] = ''; })
+     *   pageState.on('input1', 'focus', () => { ... })
+     */
+    on(id: string, event: string, fn: (detail?: any) => void): () => void;
+    /**
+     * Emit an ephemeral event (called internally by components)
+     */
+    emit(id: string, event: string, detail?: any): void;
+    /**
+     * Get a snapshot of all component values
+     */
+    snapshot(): Record<string, any>;
+    /**
+     * Log current state to console
+     */
+    dump(): void;
+    getProxy(): Record<string, any>;
+    private _notify;
+    private _wireDOMEvent;
+    private _createComponentProxy;
+}
+export declare const pageState: Record<string, any>;
+export { PageState };
+//# sourceMappingURL=pageState.d.ts.map

package/dist/lib/state/pageState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pageState.d.ts","sourceRoot":"","sources":["../../../lib/state/pageState.ts"],"names":[],"mappings":"AASA,cAAM,SAAS;IACX,OAAO,CAAC,WAAW,CAA+B;IAClD,OAAO,CAAC,UAAU,CAA4B;IAC9C,OAAO,CAAC,eAAe,CAAoE;IAC3F,OAAO,CAAC,MAAM,CAAsB;;IA4CpC;;;OAGG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,GAAG,IAAI;IAa1C;;;;;;OAMG;IACH,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;IAUvG;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,KAAK,IAAI,GAAG,MAAM,IAAI;IAqBrE;;OAEG;IACH,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,GAAG,GAAG,IAAI;IAOnD;;OAEG;IACH,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAY/B;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAI/B,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,qBAAqB;CA+ChC;AAID,eAAO,MAAM,SAAS,qBAAuB,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/state/pageState.js

@@ -0,0 +1,214 @@
+class PageState {
+    constructor() {
+        this._components = new Map();
+        this._listeners = new Set();
+        this._eventListeners = new Map();
+        this._proxy = new Proxy({}, {
+            get: (_target, key) => {
+                if (key === 'register')
+                    return this.register.bind(this);
+                if (key === 'watch')
+                    return this.watch.bind(this);
+                if (key === 'on')
+                    return this.on.bind(this);
+                if (key === 'keys')
+                    return () => Array.from(this._components.keys());
+                if (key === 'snapshot')
+                    return () => this.snapshot();
+                if (key === 'dump')
+                    return () => this.dump();
+                const component = this._components.get(key);
+                if (!component)
+                    return undefined;
+                return this._createComponentProxy(key, component);
+            },
+            set: (_target, key, value) => {
+                // Allow setting entire component value shorthand
+                // pageState['input1'] = 'hello' → sets value
+                const component = this._components.get(key);
+                if (component && typeof value === 'string') {
+                    const old = component.getValue?.() ?? undefined;
+                    component.setValue?.(value) ?? component.value?.(value);
+                    this._notify(key, 'value', value, old);
+                    return true;
+                }
+                return true;
+            },
+            has: (_target, key) => {
+                return this._components.has(key);
+            },
+            ownKeys: () => {
+                return Array.from(this._components.keys());
+            },
+            getOwnPropertyDescriptor: (_target, key) => {
+                if (this._components.has(key)) {
+                    return { configurable: true, enumerable: true, value: this._proxy[key] };
+                }
+                return undefined;
+            }
+        });
+    }
+    /**
+     * Register a component into pageState.
+     * Called automatically by jux components on creation.
+     */
+    register(id, component) {
+        this._components.set(id, component);
+        // Wire up change events to auto-notify
+        if (typeof component.onChange === 'function') {
+            const originalOnChange = component._onChange;
+            component.onChange((value, event) => {
+                originalOnChange?.(value, event);
+                this._notify(id, 'value', value, undefined);
+            });
+        }
+    }
+    /**
+     * Watch for property changes on any component.
+     *
+     * Usage:
+     *   pageState.watch('input1', 'value', (newVal, oldVal) => { ... })
+     *   pageState.watch('*', 'value', (key, prop, newVal) => { ... })  // wildcard
+     */
+    watch(keyOrAll, prop, fn) {
+        const listener = (key, p, value, oldValue) => {
+            if ((keyOrAll === '*' || keyOrAll === key) && (prop === '*' || prop === p)) {
+                fn(value, oldValue, key);
+            }
+        };
+        this._listeners.add(listener);
+        return () => this._listeners.delete(listener);
+    }
+    /**
+     * Listen for ephemeral events (blur, focus, hover, etc.)
+     *
+     * Usage:
+     *   pageState.on('input2', 'blur', () => { pageState['input1'] = ''; })
+     *   pageState.on('input1', 'focus', () => { ... })
+     */
+    on(id, event, fn) {
+        if (!this._eventListeners.has(id)) {
+            this._eventListeners.set(id, new Map());
+        }
+        const componentEvents = this._eventListeners.get(id);
+        if (!componentEvents.has(event)) {
+            componentEvents.set(event, new Set());
+        }
+        componentEvents.get(event).add(fn);
+        // Wire DOM event if component is already registered
+        const component = this._components.get(id);
+        if (component) {
+            this._wireDOMEvent(id, event, component);
+        }
+        return () => {
+            componentEvents.get(event)?.delete(fn);
+        };
+    }
+    /**
+     * Emit an ephemeral event (called internally by components)
+     */
+    emit(id, event, detail) {
+        const listeners = this._eventListeners.get(id)?.get(event);
+        if (listeners) {
+            listeners.forEach(fn => fn(detail));
+        }
+    }
+    /**
+     * Get a snapshot of all component values
+     */
+    snapshot() {
+        const result = {};
+        for (const [id, component] of this._components) {
+            result[id] = {
+                value: component.getValue?.() ?? component.opts?.value ?? undefined,
+                type: component.opts?.type ?? component.tagName ?? 'unknown',
+                id
+            };
+        }
+        return result;
+    }
+    /**
+     * Log current state to console
+     */
+    dump() {
+        console.table(this.snapshot());
+    }
+    getProxy() {
+        return this._proxy;
+    }
+    _notify(key, prop, value, oldValue) {
+        for (const listener of this._listeners) {
+            listener(key, prop, value, oldValue);
+        }
+    }
+    _wireDOMEvent(id, event, component) {
+        // Find the actual DOM element
+        const el = component._element ?? component._wrapper ?? document.getElementById(id);
+        if (!el)
+            return;
+        // Avoid double-wiring
+        const wiredKey = `__jux_wired_${event}`;
+        if (el[wiredKey])
+            return;
+        el[wiredKey] = true;
+        el.addEventListener(event, (e) => {
+            this.emit(id, event, e);
+        });
+    }
+    _createComponentProxy(id, component) {
+        const self = this;
+        return new Proxy({}, {
+            get(_target, prop) {
+                // Special properties
+                if (prop === 'id')
+                    return id;
+                if (prop === 'value')
+                    return component.getValue?.() ?? component.opts?.value ?? undefined;
+                if (prop === 'type')
+                    return component.opts?.type ?? component.tagName ?? 'unknown';
+                if (prop === 'disabled')
+                    return component.opts?.disabled ?? false;
+                if (prop === 'focused')
+                    return document.activeElement === (component._element ?? document.getElementById(id));
+                if (prop === 'element')
+                    return component._element ?? document.getElementById(id);
+                if (prop === '_component')
+                    return component;
+                // Check for ephemeral event state methods
+                if (prop === 'on')
+                    return (event, fn) => self.on(id, event, fn);
+                if (prop === 'watch')
+                    return (p, fn) => self.watch(id, p, fn);
+                // Forward to component options
+                if (component.opts && prop in component.opts)
+                    return component.opts[prop];
+                // Forward to component methods
+                if (typeof component[prop] === 'function')
+                    return component[prop].bind(component);
+                return undefined;
+            },
+            set(_target, prop, value) {
+                const old = component.getValue?.() ?? component.opts?.[prop] ?? undefined;
+                if (prop === 'value') {
+                    component.setValue?.(value) ?? component.value?.(value);
+                    self._notify(id, 'value', value, old);
+                    return true;
+                }
+                if (prop === 'disabled') {
+                    component.disabled?.(value);
+                    self._notify(id, 'disabled', value, old);
+                    return true;
+                }
+                if (component.opts) {
+                    component.opts[prop] = value;
+                    self._notify(id, prop, value, old);
+                }
+                return true;
+            }
+        });
+    }
+}
+// Singleton
+const _instance = new PageState();
+export const pageState = _instance.getProxy();
+export { PageState };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.255",
+  "version": "1.1.256",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",