juxscript 1.1.350 → 1.1.353

package/dist/lib/components/select.js

@@ -0,0 +1,111 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Select {
+    constructor(id, options = {}) {
+        this._element = null;
+        this._wrapper = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = { options: [], ...options };
+    }
+    // Fluent API
+    label(value) { this.opts.label = value; return this; }
+    placeholder(value) { this.opts.placeholder = value; return this; }
+    required(value = true) { this.opts.required = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; return this; }
+    multiple(value = true) { this.opts.multiple = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    options(opts) {
+        this.opts.options = opts;
+        if (this._element)
+            this._rebuildOptions();
+        return this;
+    }
+    value(val) {
+        this.opts.value = val;
+        if (this._element)
+            this._element.value = val;
+        return this;
+    }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getValue() {
+        return this._element?.value ?? this.opts.value ?? '';
+    }
+    getSelectedValues() {
+        if (!this._element)
+            return [];
+        return Array.from(this._element.selectedOptions).map(o => o.value);
+    }
+    _rebuildOptions() {
+        if (!this._element)
+            return;
+        this._element.innerHTML = '';
+        if (this.opts.placeholder) {
+            const ph = document.createElement('option');
+            ph.value = '';
+            ph.textContent = this.opts.placeholder;
+            ph.disabled = true;
+            ph.selected = !this.opts.value;
+            this._element.appendChild(ph);
+        }
+        for (const opt of this.opts.options || []) {
+            const o = document.createElement('option');
+            o.value = opt.value;
+            o.textContent = opt.label;
+            if (opt.disabled)
+                o.disabled = true;
+            if (opt.value === this.opts.value)
+                o.selected = true;
+            this._element.appendChild(o);
+        }
+    }
+    render(target) {
+        const wrapper = document.createElement('div');
+        wrapper.className = 'jux-select';
+        wrapper.id = `${this.id}-wrapper`;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        if (this.opts.label) {
+            const labelEl = document.createElement('label');
+            labelEl.htmlFor = this.id;
+            labelEl.textContent = this.opts.label;
+            labelEl.className = 'jux-select-label';
+            wrapper.appendChild(labelEl);
+        }
+        const sel = document.createElement('select');
+        sel.id = this.id;
+        sel.className = 'jux-select-element';
+        if (this.opts.required)
+            sel.required = true;
+        if (this.opts.disabled)
+            sel.disabled = true;
+        if (this.opts.multiple)
+            sel.multiple = true;
+        this._element = sel;
+        this._rebuildOptions();
+        sel.addEventListener('change', (e) => {
+            if (this._onChange)
+                this._onChange(sel.value, e);
+        });
+        wrapper.appendChild(sel);
+        this._wrapper = wrapper;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+export function select(id, options = {}) {
+    const s = new Select(id, options);
+    s.render();
+    pageState.__register(s);
+    return s;
+}
+export { Select };

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

@@ -0,0 +1,40 @@
+interface MenuItem {
+    id: string;
+    label: string;
+    path: string;
+    icon?: string;
+}
+interface MenuOptions {
+    title?: string;
+    logo?: string;
+    footer?: string;
+    width?: string;
+    target?: string;
+    density?: 'dense' | 'normal' | 'inflated';
+}
+interface MenuApi {
+    id: string;
+    title: (val: string) => MenuApi;
+    logo: (val: string) => MenuApi;
+    footer: (val: string) => MenuApi;
+    width: (val: string) => MenuApi;
+    target: (val: string) => MenuApi;
+    density: (val: 'dense' | 'normal' | 'inflated') => MenuApi;
+    section: (label: string, items: (string | MenuItem)[]) => MenuApi;
+    items: (items: (string | MenuItem)[]) => MenuApi;
+    render: () => MenuApi;
+    addSection: (label: string, items: (string | MenuItem)[]) => MenuApi;
+    setTitle: (val: string) => MenuApi;
+    setFooter: (val: string) => MenuApi;
+    show: () => MenuApi;
+    hide: () => MenuApi;
+    toggle: () => MenuApi;
+    getElement: () => HTMLElement | null;
+}
+type SectionInput = string | {
+    label?: string;
+    items?: (string | MenuItem)[];
+};
+export declare function menu(id: string, sections?: SectionInput[], options?: MenuOptions): MenuApi;
+export {};
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../lib/components/sidebar.ts"],"names":[],"mappings":"AAEA,UAAU,QAAQ;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD,UAAU,WAAW;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;CAC7C;AAYD,UAAU,OAAO;IACb,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAChC,IAAI,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAC/B,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACjC,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IAChC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACjC,OAAO,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,KAAK,OAAO,CAAC;IAC3D,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC;IAClE,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC;IACjD,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,KAAK,OAAO,CAAC;IACrE,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,IAAI,EAAE,MAAM,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,OAAO,CAAC;IACtB,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;CACxC;AAED,KAAK,YAAY,GAAG,MAAM,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,CAAC,MAAM,GAAG,QAAQ,CAAC,EAAE,CAAA;CAAE,CAAC;AAE/E,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,YAAY,EAAE,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,OAAO,CAgJ1F"}

package/dist/lib/components/sidebar.js

@@ -0,0 +1,141 @@
+import { div, span, nav, pageState } from './tag';
+export function menu(id, sections, options) {
+    const opts = options || {};
+    let _title = opts.title || 'App';
+    let _logo = opts.logo || _title.charAt(0).toUpperCase();
+    let _footer = opts.footer || '';
+    let _width = opts.width || '260px';
+    let _target = opts.target;
+    let _density = opts.density || 'normal';
+    let _sectionCount = 0;
+    let _rendered = false;
+    let _footerRendered = false;
+    const DENSITY = {
+        dense: { headerPad: '10px', itemPad: '4px 10px', labelPad: '6px 10px 2px', footerPad: '8px 12px', gap: '0px', fontSize: '12px', iconSize: '13px' },
+        normal: { headerPad: '16px', itemPad: '8px 12px', labelPad: '8px 12px 4px', footerPad: '12px 16px', gap: '1px', fontSize: '13px', iconSize: '15px' },
+        inflated: { headerPad: '20px', itemPad: '12px 16px', labelPad: '12px 16px 6px', footerPad: '16px 20px', gap: '4px', fontSize: '14px', iconSize: '17px' }
+    };
+    function normalizeItem(item) {
+        if (typeof item === 'string') {
+            const path = item.startsWith('/') ? item : '/' + item;
+            const seg = path.split('/').filter(Boolean).pop() || 'Home';
+            return { id: id + '-' + seg.toLowerCase().replace(/[^a-z0-9]/g, '-'), label: seg.charAt(0).toUpperCase() + seg.slice(1), path: path };
+        }
+        return item;
+    }
+    function normalizeSections(input) {
+        if (!input || !Array.isArray(input) || input.length === 0)
+            return [];
+        const isFlat = input.every((i) => typeof i === 'string' || (typeof i === 'object' && !('items' in i)));
+        if (isFlat)
+            return [{ items: input.map(normalizeItem) }];
+        return input.map((s) => {
+            if (typeof s === 'string')
+                return { items: [normalizeItem(s)] };
+            return { label: s.label, items: (s.items || []).map(normalizeItem) };
+        });
+    }
+    function ensureShell() {
+        if (_rendered)
+            return;
+        _rendered = true;
+        injectStyles();
+        div(id, { class: 'jux-sidebar jux-sidebar--' + _density, style: 'width:' + _width, target: _target });
+        div(id + '-header', { class: 'jux-sidebar-header', target: id });
+        div(id + '-logo', { class: 'jux-sidebar-logo', content: _logo, target: id + '-header' });
+        span(id + '-title', { content: _title, target: id + '-header' });
+    }
+    function renderSection(section) {
+        ensureShell();
+        const i = _sectionCount++;
+        if (i > 0)
+            div(id + '-divider-' + i, { class: 'jux-sidebar-divider', target: id });
+        if (section.label)
+            div(id + '-label-' + i, { class: 'jux-sidebar-label', content: section.label, target: id });
+        nav(id + '-nav-' + i, { target: id, items: section.items });
+    }
+    function renderFooter() {
+        if (_footerRendered || !_footer)
+            return;
+        _footerRendered = true;
+        div(id + '-footer', { class: 'jux-sidebar-footer', content: _footer, target: id });
+    }
+    function injectStyles() {
+        if (document.getElementById('menu-styles'))
+            return;
+        const el = document.createElement('style');
+        el.id = 'menu-styles';
+        el.textContent = '\
+        body { margin: 0; }\
+        .jux-sidebar { display:flex; flex-direction:column; min-height:100vh; background:hsl(var(--card)); color:hsl(var(--card-foreground)); border-right:1px solid hsl(var(--border)); font-family:var(--font-sans,system-ui,sans-serif); }\
+        .jux-sidebar-header { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; border-bottom:1px solid hsl(var(--border)); }\
+        .jux-sidebar-logo { width:20px; height:20px; border-radius:6px; background:hsl(var(--primary)); display:flex; align-items:center; justify-content:center; color:hsl(var(--primary-foreground)); font-size:11px; font-weight:700; }\
+        .jux-sidebar-label { font-size:11px; font-weight:500; color:hsl(var(--muted-foreground)); text-transform:uppercase; letter-spacing:0.05em; }\
+        .jux-sidebar-footer { margin-top:auto; border-top:1px solid hsl(var(--border)); font-size:11px; color:hsl(var(--muted-foreground)); }\
+        .jux-sidebar-divider { height:1px; background:hsl(var(--border)); margin:4px 8px; }\
+        .jux-nav-item { display:flex; align-items:center; border-radius:var(--radius,6px); font-weight:500; color:hsl(var(--foreground)); cursor:pointer; transition:background 0.15s; user-select:none; text-decoration:none; }\
+        .jux-nav-item:hover { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); }\
+        .jux-nav-item--active { background:hsl(var(--accent)); color:hsl(var(--accent-foreground)); font-weight:600; }\
+        .jux-nav-item-icon { text-align:center; flex-shrink:0; }\
+        \
+        .jux-sidebar--dense .jux-sidebar-header { padding:' + DENSITY.dense.headerPad + '; }\
+        .jux-sidebar--dense .jux-sidebar-label { padding:' + DENSITY.dense.labelPad + '; }\
+        .jux-sidebar--dense .jux-sidebar-footer { padding:' + DENSITY.dense.footerPad + '; }\
+        .jux-sidebar--dense .jux-nav-item { padding:' + DENSITY.dense.itemPad + '; margin:' + DENSITY.dense.gap + ' 0; font-size:' + DENSITY.dense.fontSize + '; gap:8px; }\
+        .jux-sidebar--dense .jux-nav-item-icon { width:16px; font-size:' + DENSITY.dense.iconSize + '; }\
+        \
+        .jux-sidebar--normal .jux-sidebar-header { padding:' + DENSITY.normal.headerPad + '; }\
+        .jux-sidebar--normal .jux-sidebar-label { padding:' + DENSITY.normal.labelPad + '; }\
+        .jux-sidebar--normal .jux-sidebar-footer { padding:' + DENSITY.normal.footerPad + '; }\
+        .jux-sidebar--normal .jux-nav-item { padding:' + DENSITY.normal.itemPad + '; margin:' + DENSITY.normal.gap + ' 0; font-size:' + DENSITY.normal.fontSize + '; gap:10px; }\
+        .jux-sidebar--normal .jux-nav-item-icon { width:18px; font-size:' + DENSITY.normal.iconSize + '; }\
+        \
+        .jux-sidebar--inflated .jux-sidebar-header { padding:' + DENSITY.inflated.headerPad + '; }\
+        .jux-sidebar--inflated .jux-sidebar-label { padding:' + DENSITY.inflated.labelPad + '; }\
+        .jux-sidebar--inflated .jux-sidebar-footer { padding:' + DENSITY.inflated.footerPad + '; }\
+        .jux-sidebar--inflated .jux-nav-item { padding:' + DENSITY.inflated.itemPad + '; margin:' + DENSITY.inflated.gap + ' 0; font-size:' + DENSITY.inflated.fontSize + '; gap:12px; }\
+        .jux-sidebar--inflated .jux-nav-item-icon { width:20px; font-size:' + DENSITY.inflated.iconSize + '; }\
+        ';
+        document.head.appendChild(el);
+    }
+    const api = {
+        id: id,
+        title: function (val) { _title = val; return api; },
+        logo: function (val) { _logo = val; return api; },
+        footer: function (val) {
+            _footer = val;
+            if (_rendered)
+                renderFooter();
+            return api;
+        },
+        width: function (val) { _width = val; return api; },
+        target: function (val) { _target = val; return api; },
+        density: function (val) { _density = val; return api; },
+        section: function (label, items) {
+            renderSection({ label: label, items: (items || []).map(normalizeItem) });
+            return api;
+        },
+        items: function (items) {
+            renderSection({ items: (items || []).map(normalizeItem) });
+            return api;
+        },
+        render: function () {
+            ensureShell();
+            renderFooter();
+            return api;
+        },
+        addSection: function (label, items) { return api.section(label, items); },
+        setTitle: function (val) { pageState[id + '-title'].content = val; return api; },
+        setFooter: function (val) { pageState[id + '-footer'].content = val; return api; },
+        show: function () { pageState[id].visible = true; return api; },
+        hide: function () { pageState[id].visible = false; return api; },
+        toggle: function () { pageState[id].visible = !pageState[id].visible; return api; },
+        getElement: function () { return document.getElementById(id); }
+    };
+    if (sections && Array.isArray(sections) && sections.length > 0) {
+        const normalized = normalizeSections(sections);
+        normalized.forEach(renderSection);
+        renderFooter();
+    }
+    return api;
+}

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

@@ -0,0 +1,78 @@
+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;
+    _element: HTMLElement;
+    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;
+    getElement(): HTMLElement;
+    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,QAAQ,EAAE,WAAW,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;IA0B7C,OAAO,CAAC,KAAK;IAgCb,OAAO,CAAC,GAAG;IAOX,OAAO,CAAC,aAAa;IAoBrB,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,GAAG,IAAI;IAK1C,UAAU,IAAI,WAAW;IACzB,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;IActC,GAAG,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,CAAC,WAAW,CAAC;IActC,OAAO,CAAC,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;IAuBtC,MAAM,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;IAcvC,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,248 @@
+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
+        };
+        // Create a hidden DOM element so pageState can wire events
+        this._element = document.createElement('div');
+        this._element.id = this.id;
+        this._element.setAttribute('data-jux-store', this.options.table);
+        this._element.setAttribute('data-count', '0');
+        this._element.setAttribute('data-loading', 'false');
+        this._element.style.display = 'none';
+        (document.getElementById('app') || document.body).appendChild(this._element);
+        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() {
+        // Update DOM element metadata
+        this._element.setAttribute('data-count', String(this._value.length));
+        this._element.setAttribute('data-loading', String(this._loading));
+        if (this._error) {
+            this._element.setAttribute('data-error', this._error);
+        }
+        else {
+            this._element.removeAttribute('data-error');
+        }
+        if (this._onChange)
+            this._onChange(this._value);
+        // Dispatch a real DOM change event — pageState._wireEvent picks this up
+        this._element.dispatchEvent(new Event('change', { bubbles: false }));
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    getElement() { return this._element; }
+    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().then(() => 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().then(() => 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().then(() => 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().then(() => 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/components/style.d.ts

@@ -0,0 +1,27 @@
+declare class Style {
+    id: string;
+    private _element;
+    constructor(id: string, css: string);
+    /** Replace the entire stylesheet content */
+    setContent(css: string): this;
+    /** Append additional CSS rules */
+    append(css: string): this;
+    /** Get current CSS content */
+    getContent(): string;
+    /** Remove the style tag from the document */
+    remove(): void;
+    getElement(): HTMLStyleElement;
+}
+/**
+ * Inject a CSS string into the document head.
+ *
+ * @example
+ * jux.style('my-styles', `
+ *   .sidebar { background: hsl(var(--card)); }
+ *   .nav-item:hover { background: hsl(var(--accent)); }
+ * `);
+ */
+export declare function style(id: string, css: string): Style;
+export { Style };
+export default style;
+//# sourceMappingURL=style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../lib/components/style.ts"],"names":[],"mappings":"AAEA,cAAM,KAAK;IACP,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,QAAQ,CAAmB;gBAEvB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM;IASnC,4CAA4C;IAC5C,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,kCAAkC;IAClC,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAKzB,8BAA8B;IAC9B,UAAU,IAAI,MAAM;IAIpB,6CAA6C;IAC7C,MAAM,IAAI,IAAI;IAId,UAAU,IAAI,gBAAgB;CAGjC;AAED;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,KAAK,CAQpD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,eAAe,KAAK,CAAC"}