juxscript 1.1.254 → 1.1.256

package/dist/lib/components/tag.d.ts

@@ -1,23 +1,33 @@
+interface TagOptions {
+    content?: string;
+    class?: string;
+    style?: string;
+    [key: string]: any;
+}
 declare class Tag {
     id: string;
-    content: string;
-    options: Record<string, any>;
     tagName: string;
-    constructor(data: any);
-    modify(): this;
-    render(): HTMLElement;
+    opts: TagOptions;
+    private _element;
+    constructor(id: string, tagName: string, options?: TagOptions);
+    content(value: string): this;
+    class(value: string): this;
+    style(value: string): this;
+    render(target?: string | HTMLElement): this;
+    getElement(): HTMLElement | null;
 }
-export declare function tag(data: any): Tag;
-export declare function div(data?: any): Tag;
-export declare function span(data?: any): Tag;
-export declare function p(data?: any): Tag;
-export declare function code(data?: any): Tag;
-export declare function pre(data?: any): Tag;
-export declare function h1(data?: any): Tag;
-export declare function h2(data?: any): Tag;
-export declare function h3(data?: any): Tag;
-export declare function h4(data?: any): Tag;
-export declare function h5(data?: any): Tag;
-export declare function h6(data?: any): Tag;
+export declare function tag(id: string, tagName: string, options?: TagOptions): Tag;
+export declare function div(id: string, options?: TagOptions): Tag;
+export declare function span(id: string, options?: TagOptions): Tag;
+export declare function p(id: string, options?: TagOptions): Tag;
+export declare function code(id: string, options?: TagOptions): Tag;
+export declare function pre(id: string, options?: TagOptions): Tag;
+export declare function h1(id: string, options?: TagOptions): Tag;
+export declare function h2(id: string, options?: TagOptions): Tag;
+export declare function h3(id: string, options?: TagOptions): Tag;
+export declare function h4(id: string, options?: TagOptions): Tag;
+export declare function h5(id: string, options?: TagOptions): Tag;
+export declare function h6(id: string, options?: TagOptions): Tag;
+export { Tag, TagOptions };
 export default tag;
 //# sourceMappingURL=tag.d.ts.map

package/dist/lib/components/tag.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC7B,OAAO,EAAE,MAAM,CAAC;gBAEJ,IAAI,EAAE,GAAG;IAOrB,MAAM;IAIN,MAAM;CAWT;AAED,wBAAgB,GAAG,CAAC,IAAI,EAAE,GAAG,OAI5B;AAED,wBAAgB,GAAG,CAAC,IAAI,GAAE,GAAQ,OAA8C;AAChF,wBAAgB,IAAI,CAAC,IAAI,GAAE,GAAQ,OAA+C;AAClF,wBAAgB,CAAC,CAAC,IAAI,GAAE,GAAQ,OAA4C;AAC5E,wBAAgB,IAAI,CAAC,IAAI,GAAE,GAAQ,OAA+C;AAClF,wBAAgB,GAAG,CAAC,IAAI,GAAE,GAAQ,OAA8C;AAChF,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAC9E,wBAAgB,EAAE,CAAC,IAAI,GAAE,GAAQ,OAA6C;AAE9E,eAAe,GAAG,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAEA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAE1B,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;IAuBpC,UAAU,IAAI,WAAW,GAAG,IAAI;CACnC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAIxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AACzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}

package/dist/lib/components/tag.js

@@ -1,40 +1,56 @@
 import generateId from '../utils/idgen.js';
 class Tag {
-    constructor(data) {
-        this.id = generateId();
-        this.content = data.content || '';
-        this.options = data.options || {};
-        this.tagName = data.tagName || 'div';
+    constructor(id, tagName, options = {}) {
+        this._element = null;
+        this.id = id || generateId();
+        this.tagName = tagName;
+        this.opts = options;
     }
-    modify() {
-        return this;
-    }
-    render() {
+    // Fluent API
+    content(value) { this.opts.content = value; if (this._element)
+        this._element.textContent = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    style(value) { this.opts.style = value; if (this._element)
+        this._element.setAttribute('style', value); return this; }
+    render(target) {
         const el = document.createElement(this.tagName);
         el.id = this.id;
-        el.textContent = this.content;
-        for (const [key, value] of Object.entries(this.options)) {
+        if (this.opts.content)
+            el.textContent = this.opts.content;
+        if (this.opts.class)
+            el.className = this.opts.class;
+        if (this.opts.style)
+            el.setAttribute('style', this.opts.style);
+        // Apply any extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['content', 'class', 'style'].includes(key))
+                continue;
             el.setAttribute(key, String(value));
         }
-        const app = document.getElementById('app');
-        app?.appendChild(el);
-        return el;
+        this._element = el;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(el);
+        return this;
     }
+    getElement() { return this._element; }
 }
-export function tag(data) {
-    const t = new Tag(data);
+export function tag(id, tagName, options = {}) {
+    const t = new Tag(id, tagName, options);
     t.render();
     return t;
 }
-export function div(data = {}) { return tag({ ...data, tagName: 'div' }); }
-export function span(data = {}) { return tag({ ...data, tagName: 'span' }); }
-export function p(data = {}) { return tag({ ...data, tagName: 'p' }); }
-export function code(data = {}) { return tag({ ...data, tagName: 'code' }); }
-export function pre(data = {}) { return tag({ ...data, tagName: 'pre' }); }
-export function h1(data = {}) { return tag({ ...data, tagName: 'h1' }); }
-export function h2(data = {}) { return tag({ ...data, tagName: 'h2' }); }
-export function h3(data = {}) { return tag({ ...data, tagName: 'h3' }); }
-export function h4(data = {}) { return tag({ ...data, tagName: 'h4' }); }
-export function h5(data = {}) { return tag({ ...data, tagName: 'h5' }); }
-export function h6(data = {}) { return tag({ ...data, tagName: 'h6' }); }
+export function div(id, options = {}) { return tag(id, 'div', options); }
+export function span(id, options = {}) { return tag(id, 'span', options); }
+export function p(id, options = {}) { return tag(id, 'p', options); }
+export function code(id, options = {}) { return tag(id, 'code', options); }
+export function pre(id, options = {}) { return tag(id, 'pre', options); }
+export function h1(id, options = {}) { return tag(id, 'h1', options); }
+export function h2(id, options = {}) { return tag(id, 'h2', options); }
+export function h3(id, options = {}) { return tag(id, 'h3', options); }
+export function h4(id, options = {}) { return tag(id, 'h4', options); }
+export function h5(id, options = {}) { return tag(id, 'h5', options); }
+export function h6(id, options = {}) { return tag(id, 'h6', options); }
+export { Tag };
 export default tag;

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.254",
+  "version": "1.1.256",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",