juxscript 1.1.273 → 1.1.276

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

@@ -0,0 +1,76 @@
+interface StoreOptions {
+    db: string;
+    table: string;
+    version?: number;
+    keyPath?: string;
+    autoIncrement?: boolean;
+    indexes?: Array<{
+        name: string;
+        keyPath: string | string[];
+        unique?: boolean;
+    }>;
+    auto?: boolean;
+}
+declare class Store {
+    id: string;
+    options: StoreOptions;
+    private _db;
+    private _value;
+    private _loading;
+    private _error;
+    private _onChange;
+    private _ready;
+    constructor(id: string, options: StoreOptions);
+    private _open;
+    private _tx;
+    private _notifyChange;
+    onChange(fn: (value: any[]) => void): this;
+    getValue(): any[];
+    getLoading(): boolean;
+    getError(): string | null;
+    getCount(): number;
+    setValue(val: any[]): this;
+    getAll(): Promise<any[]>;
+    get(key: IDBValidKey): Promise<any>;
+    query(indexName: string, value: IDBValidKey): Promise<any[]>;
+    put(record: any): Promise<IDBValidKey>;
+    add(record: any): Promise<IDBValidKey>;
+    putMany(records: any[]): Promise<void>;
+    delete(key: IDBValidKey): Promise<void>;
+    clear(): Promise<void>;
+    refresh(): Promise<any[]>;
+}
+/**
+ * Create a reactive IndexedDB store that integrates with pageState.
+ *
+ * @example
+ * // Basic usage
+ * const todos = await jux.store('todos', { db: 'myapp', table: 'todos' });
+ * // pageState['todos'].value → [{ id: 1, text: 'Buy milk', done: false }, ...]
+ *
+ * // With indexes
+ * const users = await jux.store('users', {
+ *     db: 'myapp',
+ *     table: 'users',
+ *     indexes: [{ name: 'by_email', keyPath: 'email', unique: true }]
+ * });
+ *
+ * // Write
+ * await pageState['todos'].add({ text: 'New item', done: false });
+ * await pageState['todos'].put({ id: 1, text: 'Updated', done: true });
+ * await pageState['todos'].delete(1);
+ *
+ * // Query by index
+ * const results = await pageState['users'].query('by_email', 'alice@example.com');
+ *
+ * // React to changes
+ * pageState.__watch(() => {
+ *     const items = pageState['todos'].value;
+ *     if (items) {
+ *         pageState['count'].content = `${items.length} items`;
+ *     }
+ * });
+ */
+export declare function store(id: string, options: StoreOptions): Promise<Store>;
+export { Store, StoreOptions };
+//# sourceMappingURL=store.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../../lib/components/store.ts"],"names":[],"mappings":"AAGA,UAAU,YAAY;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;QAAC,MAAM,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChF,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAyC;IAC1D,OAAO,CAAC,MAAM,CAAgB;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY;IAgB7C,OAAO,CAAC,KAAK;IAgCb,OAAO,CAAC,GAAG;IAOX,OAAO,CAAC,aAAa;IAUrB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,IAAI;IAK1C,QAAQ,IAAI,GAAG,EAAE;IACjB,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IACzB,QAAQ,IAAI,MAAM;IAElB,QAAQ,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;IAUpB,MAAM,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;IAwBxB,GAAG,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC;IAWnC,KAAK,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC;IAiB5D,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC;IAetC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC;IAetC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAwBtC,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAevC,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC;IAoBtB,OAAO,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;CAGlC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAsB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,GAAG,OAAO,CAAC,KAAK,CAAC,CAU7E;AAED,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC"}

package/dist/lib/components/store.js

@@ -0,0 +1,234 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Store {
+    constructor(id, options) {
+        this._db = null;
+        this._value = [];
+        this._loading = false;
+        this._error = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.options = {
+            version: 1,
+            keyPath: 'id',
+            autoIncrement: true,
+            auto: true,
+            ...options
+        };
+        this._ready = this._open();
+    }
+    // ═══════════════════════════════════════════════════════════
+    // INTERNAL: Open / ensure DB
+    // ═══════════════════════════════════════════════════════════
+    _open() {
+        return new Promise((resolve, reject) => {
+            const req = indexedDB.open(this.options.db, this.options.version);
+            req.onupgradeneeded = (e) => {
+                const db = e.target.result;
+                if (!db.objectStoreNames.contains(this.options.table)) {
+                    const store = db.createObjectStore(this.options.table, {
+                        keyPath: this.options.keyPath,
+                        autoIncrement: this.options.autoIncrement
+                    });
+                    if (this.options.indexes) {
+                        for (const idx of this.options.indexes) {
+                            store.createIndex(idx.name, idx.keyPath, { unique: idx.unique ?? false });
+                        }
+                    }
+                }
+            };
+            req.onsuccess = (e) => {
+                this._db = e.target.result;
+                resolve();
+            };
+            req.onerror = (e) => {
+                this._error = `IndexedDB open failed: ${e.target.error?.message}`;
+                console.error(`❌ jux.store('${this.id}'):`, this._error);
+                reject(new Error(this._error));
+            };
+        });
+    }
+    _tx(mode) {
+        if (!this._db)
+            throw new Error('Database not open');
+        return this._db
+            .transaction(this.options.table, mode)
+            .objectStore(this.options.table);
+    }
+    _notifyChange() {
+        if (this._onChange)
+            this._onChange(this._value);
+        pageState.__notify?.(`${this.id}.value`);
+        pageState.__notify?.(`${this.id}.loading`);
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() { return this._value; }
+    getLoading() { return this._loading; }
+    getError() { return this._error; }
+    getCount() { return this._value.length; }
+    setValue(val) {
+        this._value = val;
+        this._notifyChange();
+        return this;
+    }
+    // ═══════════════════════════════════════════════════════════
+    // READ
+    // ═══════════════════════════════════════════════════════════
+    async getAll() {
+        await this._ready;
+        this._loading = true;
+        this._error = null;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readonly').getAll();
+            req.onsuccess = () => {
+                this._value = req.result;
+                this._loading = false;
+                this._notifyChange();
+                resolve(this._value);
+            };
+            req.onerror = () => {
+                this._loading = false;
+                this._error = req.error?.message ?? 'getAll failed';
+                this._notifyChange();
+                reject(new Error(this._error));
+            };
+        });
+    }
+    async get(key) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readonly').get(key);
+            req.onsuccess = () => resolve(req.result ?? null);
+            req.onerror = () => reject(new Error(req.error?.message ?? 'get failed'));
+        });
+    }
+    async query(indexName, value) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const store = this._tx('readonly');
+            const index = store.index(indexName);
+            const req = index.getAll(value);
+            req.onsuccess = () => resolve(req.result);
+            req.onerror = () => reject(new Error(req.error?.message ?? 'query failed'));
+        });
+    }
+    // ═══════════════════════════════════════════════════════════
+    // WRITE
+    // ═══════════════════════════════════════════════════════════
+    async put(record) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').put(record);
+            req.onsuccess = () => {
+                this.getAll(); // refresh cached value
+                resolve(req.result);
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'put failed'));
+        });
+    }
+    async add(record) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').add(record);
+            req.onsuccess = () => {
+                this.getAll();
+                resolve(req.result);
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'add failed'));
+        });
+    }
+    async putMany(records) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const tx = this._db.transaction(this.options.table, 'readwrite');
+            const store = tx.objectStore(this.options.table);
+            for (const record of records) {
+                store.put(record);
+            }
+            tx.oncomplete = () => {
+                this.getAll();
+                resolve();
+            };
+            tx.onerror = () => reject(new Error(tx.error?.message ?? 'putMany failed'));
+        });
+    }
+    // ═══════════════════════════════════════════════════════════
+    // DELETE
+    // ═══════════════════════════════════════════════════════════
+    async delete(key) {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').delete(key);
+            req.onsuccess = () => {
+                this.getAll();
+                resolve();
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'delete failed'));
+        });
+    }
+    async clear() {
+        await this._ready;
+        return new Promise((resolve, reject) => {
+            const req = this._tx('readwrite').clear();
+            req.onsuccess = () => {
+                this._value = [];
+                this._notifyChange();
+                resolve();
+            };
+            req.onerror = () => reject(new Error(req.error?.message ?? 'clear failed'));
+        });
+    }
+    // ═══════════════════════════════════════════════════════════
+    // REFRESH (alias for getAll, matches data.ts pattern)
+    // ═══════════════════════════════════════════════════════════
+    async refresh() {
+        return this.getAll();
+    }
+}
+/**
+ * Create a reactive IndexedDB store that integrates with pageState.
+ *
+ * @example
+ * // Basic usage
+ * const todos = await jux.store('todos', { db: 'myapp', table: 'todos' });
+ * // pageState['todos'].value → [{ id: 1, text: 'Buy milk', done: false }, ...]
+ *
+ * // With indexes
+ * const users = await jux.store('users', {
+ *     db: 'myapp',
+ *     table: 'users',
+ *     indexes: [{ name: 'by_email', keyPath: 'email', unique: true }]
+ * });
+ *
+ * // Write
+ * await pageState['todos'].add({ text: 'New item', done: false });
+ * await pageState['todos'].put({ id: 1, text: 'Updated', done: true });
+ * await pageState['todos'].delete(1);
+ *
+ * // Query by index
+ * const results = await pageState['users'].query('by_email', 'alice@example.com');
+ *
+ * // React to changes
+ * pageState.__watch(() => {
+ *     const items = pageState['todos'].value;
+ *     if (items) {
+ *         pageState['count'].content = `${items.length} items`;
+ *     }
+ * });
+ */
+export async function store(id, options) {
+    const s = new Store(id, options);
+    pageState.__register(s);
+    if (options.auto !== false) {
+        await s.getAll();
+        pageState.__register(s);
+    }
+    return s;
+}
+export { Store };

package/dist/lib/index.d.ts

@@ -6,6 +6,7 @@ import { radio } from "./components/radio.js";
 import { checkbox, checkboxGroup } from "./components/checkbox.js";
 import { data } from "./components/data.js";
 import { pageState } from "./state/pageState.js";
+import { store } from "./components/store.js";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -25,6 +26,7 @@ export declare const jux: {
     checkbox: typeof checkbox;
     checkboxGroup: typeof checkboxGroup;
     data: typeof data;
+    store: typeof store;
 };
 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;AACnE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;CAcf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"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,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;CAef,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -6,6 +6,7 @@ import { radio } from "./components/radio.js";
 import { checkbox, checkboxGroup } from "./components/checkbox.js";
 import { data } from "./components/data.js";
 import { pageState } from "./state/pageState.js";
+import { store } from "./components/store.js";
 export const jux = {
     tag,
     div,
@@ -19,7 +20,8 @@ export const jux = {
     radio,
     checkbox,
     checkboxGroup,
-    data
+    data,
+    store
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/machinery/autowrap.js

@@ -0,0 +1,190 @@
+/**
+ * Auto-wraps unwatched pageState references with __watch wrappers.
+ *
+ * Takes raw .jux source code and returns the same code with
+ * reactive statements wrapped in pageState.__watch(() => { ... });
+ *
+ * Pure function: source in → { code, wrappedCount, details } out
+ */
+import * as acorn from 'acorn';
+
+// We use acorn's simple walker inline to avoid import issues
+function walkSimple(node, visitors) {
+    if (!node || typeof node !== 'object') return;
+    if (Array.isArray(node)) { node.forEach(n => walkSimple(n, visitors)); return; }
+    const visitor = visitors[node.type];
+    if (visitor) visitor(node);
+    for (const key of Object.keys(node)) {
+        if (key === 'type' || key === 'start' || key === 'end' || key === 'loc' || key === 'raw') continue;
+        const child = node[key];
+        if (child && typeof child === 'object') walkSimple(child, visitors);
+    }
+}
+
+function isPageStateAccess(node) {
+    if (node.type !== 'MemberExpression') return false;
+    const obj = node.object;
+    if (obj.type === 'MemberExpression' &&
+        obj.object.type === 'Identifier' &&
+        obj.object.name === 'pageState') return true;
+    if (node.object.type === 'Identifier' && node.object.name === 'pageState') return true;
+    return false;
+}
+
+function containsPageStateRef(node) {
+    let found = false;
+    walkSimple(node, {
+        MemberExpression(n) { if (isPageStateAccess(n)) found = true; }
+    });
+    return found;
+}
+
+function containsJuxCall(node) {
+    let found = false;
+    walkSimple(node, {
+        CallExpression(n) { if (n.callee?.object?.name === 'jux') found = true; }
+    });
+    return found;
+}
+
+function getDeclaredVarNames(stmt) {
+    if (stmt.type !== 'VariableDeclaration') return [];
+    return stmt.declarations
+        .filter(d => d.id.type === 'Identifier')
+        .map(d => d.id.name);
+}
+
+function usesIdentifier(node, name) {
+    let found = false;
+    walkSimple(node, {
+        Identifier(n) { if (n.name === name) found = true; }
+    });
+    return found;
+}
+
+function isAlreadyWrapped(stmt) {
+    return stmt.type === 'ExpressionStatement' &&
+        stmt.expression?.type === 'CallExpression' &&
+        stmt.expression?.callee?.object?.name === 'pageState' &&
+        stmt.expression?.callee?.property?.name === '__watch';
+}
+
+function isSetupStatement(stmt) {
+    if (stmt.type === 'ImportDeclaration') return true;
+    if (stmt.type === 'FunctionDeclaration') return true;
+    if (stmt.type === 'ExpressionStatement') {
+        const expr = stmt.expression;
+        if (expr.type === 'CallExpression' &&
+            expr.callee?.object?.name === 'jux' &&
+            !containsPageStateRef(stmt)) return true;
+        if (expr.type === 'AwaitExpression' &&
+            expr.argument?.callee?.object?.name === 'jux' &&
+            !containsPageStateRef(stmt)) return true;
+    }
+    if (stmt.type === 'VariableDeclaration' && !containsPageStateRef(stmt)) return true;
+    if (stmt.type === 'VariableDeclaration' && containsJuxCall(stmt)) return true;
+    return false;
+}
+
+function getLineNumber(source, pos) {
+    let line = 1;
+    for (let i = 0; i < pos; i++) {
+        if (source[i] === '\n') line++;
+    }
+    return line;
+}
+
+/**
+ * @param {string} source - Raw .jux source code
+ * @param {string} [filename] - For logging
+ * @returns {{ code: string, wrappedCount: number, details: string[] }}
+ */
+export function autowrap(source, filename = '') {
+    let ast;
+    try {
+        ast = acorn.parse(source, {
+            ecmaVersion: 2022,
+            sourceType: 'module',
+            allowAwaitOutsideFunction: true,
+        });
+    } catch (err) {
+        // Can't parse — return as-is
+        return { code: source, wrappedCount: 0, details: [`parse error: ${err.message}`] };
+    }
+
+    const needsWatch = [];
+    let i = 0;
+
+    while (i < ast.body.length) {
+        const stmt = ast.body[i];
+
+        if (isSetupStatement(stmt)) { i++; continue; }
+        if (isAlreadyWrapped(stmt)) { i++; continue; }
+
+        // VariableDeclaration reading pageState — group with next if uses declared var
+        if (stmt.type === 'VariableDeclaration' && containsPageStateRef(stmt)) {
+            const varNames = getDeclaredVarNames(stmt);
+            const groupStmts = [stmt];
+            const next = ast.body[i + 1];
+            if (next && !isAlreadyWrapped(next) && !isSetupStatement(next)) {
+                if (varNames.some(v => usesIdentifier(next, v))) {
+                    groupStmts.push(next);
+                    i += 2;
+                } else {
+                    i++;
+                }
+            } else {
+                i++;
+            }
+
+            needsWatch.push({
+                line: getLineNumber(source, groupStmts[0].start),
+                endLine: getLineNumber(source, groupStmts[groupStmts.length - 1].end),
+            });
+            continue;
+        }
+
+        // Any other statement referencing pageState
+        if (containsPageStateRef(stmt)) {
+            needsWatch.push({
+                line: getLineNumber(source, stmt.start),
+                endLine: getLineNumber(source, stmt.end),
+            });
+            i++;
+            continue;
+        }
+
+        i++;
+    }
+
+    if (needsWatch.length === 0) {
+        return { code: source, wrappedCount: 0, details: [] };
+    }
+
+    // Apply wraps bottom-up to preserve line numbers
+    const lines = source.split('\n');
+    const sorted = [...needsWatch].sort((a, b) => b.line - a.line);
+    const details = [];
+
+    for (const item of sorted) {
+        const startIdx = item.line - 1;
+        const endIdx = item.endLine - 1;
+        const blockLines = lines.slice(startIdx, endIdx + 1);
+        const indent = blockLines[0].match(/^(\s*)/)[1];
+
+        const wrapped = [
+            `${indent}pageState.__watch(() => {`,
+            ...blockLines.map(l => `${indent}    ${l.trim()}`),
+            `${indent}});`,
+        ];
+
+        lines.splice(startIdx, endIdx - startIdx + 1, ...wrapped);
+        details.push(`L${item.line}-${item.endLine}`);
+    }
+
+    return {
+        code: lines.join('\n'),
+        wrappedCount: needsWatch.length,
+        details
+    };
+}

package/machinery/compiler4.js

@@ -5,6 +5,7 @@ import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { generateErrorCollector } from './errors.js';
+import { autowrap } from './autowrap.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -77,9 +78,19 @@ export class JuxCompiler {
                         } else if (hasExports) {
                             sharedModules.push({ name, file: relativePath, content, originalContent: content });
                         } else {
+                            // ✅ Auto-wrap pageState references before wrapping in async function
+                            let processedContent = content;
+                            if (file.endsWith('.jux')) {
+                                const result = autowrap(content, relativePath);
+                                if (result.wrappedCount > 0) {
+                                    console.log(`🔄 Auto-wrapped ${result.wrappedCount} reactive block(s) in ${relativePath} [${result.details.join(', ')}]`);
+                                    processedContent = result.code;
+                                }
+                            }
+
                             let wrappedContent;
                             try {
-                                const ast = acorn.parse(content, {
+                                const ast = acorn.parse(processedContent, {
                                     ecmaVersion: 'latest',
                                     sourceType: 'module',
                                     locations: true
@@ -90,12 +101,12 @@ export class JuxCompiler {
 
                                 for (const node of ast.body) {
                                     if (node.type === 'ImportDeclaration') {
-                                        imports.push(content.substring(node.start, node.end));
+                                        imports.push(processedContent.substring(node.start, node.end));
                                         lastImportEnd = node.end;
                                     }
                                 }
 
-                                const restOfCode = content.substring(lastImportEnd).trim();
+                                const restOfCode = processedContent.substring(lastImportEnd).trim();
 
                                 wrappedContent = [
                                     ...imports,
@@ -107,7 +118,7 @@ export class JuxCompiler {
 
                             } catch (parseError) {
                                 console.warn(`⚠️  Could not parse ${relativePath}, using basic wrapping`);
-                                wrappedContent = `export default async function() {\n${content}\n}`;
+                                wrappedContent = `export default async function() {\n${processedContent}\n}`;
                             }
 
                             views.push({ name, file: relativePath, content: wrappedContent, originalContent: content });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.273",
+  "version": "1.1.276",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "./dist/lib/index.js",
@@ -15,6 +15,7 @@
       "import": "./dist/lib/index.js",
       "types": "./dist/lib/index.d.ts"
     },
+    "./machinery/*": "./machinery/*",
     "./package.json": "./package.json"
   },
   "files": [