juxscript 1.1.393 → 1.1.396

package/dist/primitives/checkbox.js

@@ -0,0 +1,217 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+// ═══════════════════════════════════════════════════════════
+// Standalone Checkbox (boolean toggle)
+// ═══════════════════════════════════════════════════════════
+class Checkbox {
+    constructor(id, options = {}) {
+        this._element = null;
+        this._wrapper = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = options;
+    }
+    label(value) { this.opts.label = value; return this; }
+    checked(value = true) { this.opts.checked = value; if (this._element)
+        this._element.checked = value; return this; }
+    disabled(value = true) { this.opts.disabled = value; if (this._element)
+        this._element.disabled = value; return this; }
+    style(value) { this.opts.style = value; return this; }
+    class(value) { this.opts.class = value; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    /** Returns the reactive pageState proxy for this component */
+    get state() {
+        return pageState[this.id];
+    }
+    getValue() {
+        return this._element?.checked ?? this.opts.checked ?? false;
+    }
+    getLabel() { return this.opts.label ?? ''; }
+    getChecked() { return this.getValue(); }
+    getDisabled() { return this.opts.disabled ?? false; }
+    getClass() { return this.opts.class ?? ''; }
+    getStyle() { return this.opts.style ?? ''; }
+    setValue(val) { return this.checked(val); }
+    setChecked(val) { return this.checked(val); }
+    setLabel(val) { return this.label(val); }
+    setDisabled(val) { return this.disabled(val); }
+    setClass(val) { return this.class(val); }
+    setStyle(val) { return this.style(val); }
+    render(target) {
+        const wrapper = document.createElement('label');
+        wrapper.className = 'jux-checkbox';
+        wrapper.id = `${this.id}-wrapper`;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        const inp = document.createElement('input');
+        inp.type = 'checkbox';
+        inp.id = this.id;
+        inp.className = 'jux-checkbox-input';
+        if (this.opts.checked)
+            inp.checked = true;
+        if (this.opts.disabled)
+            inp.disabled = true;
+        inp.addEventListener('change', (e) => {
+            if (this._onChange)
+                this._onChange(inp.checked, e);
+        });
+        wrapper.appendChild(inp);
+        if (this.opts.label) {
+            const text = document.createElement('span');
+            text.className = 'jux-checkbox-label';
+            text.textContent = this.opts.label;
+            wrapper.appendChild(text);
+        }
+        this._element = inp;
+        this._wrapper = wrapper;
+        // Wire up option-based handler
+        if (this.opts.onChange)
+            this._onChange = this.opts.onChange;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+// ═══════════════════════════════════════════════════════════
+// CheckboxGroup (multi-select from options)
+// ═══════════════════════════════════════════════════════════
+class CheckboxGroup {
+    constructor(id, options = {}) {
+        this._wrapper = null;
+        this._inputs = [];
+        this._onChange = null;
+        this.id = id || generateId();
+        this.opts = {
+            options: [],
+            values: [],
+            direction: 'vertical',
+            ...options
+        };
+    }
+    label(value) { this.opts.label = value; return this; }
+    direction(value) { this.opts.direction = value; return this; }
+    disabled(value = true) { this.opts.disabled = 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._wrapper)
+            this._rebuild();
+        return this;
+    }
+    values(vals) {
+        this.opts.values = vals;
+        this._inputs.forEach(inp => {
+            inp.checked = vals.includes(inp.value);
+        });
+        return this;
+    }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    /** Returns the reactive pageState proxy for this component */
+    get state() {
+        return pageState[this.id];
+    }
+    getValues() {
+        return this._inputs.filter(i => i.checked).map(i => i.value);
+    }
+    getLabel() { return this.opts.label ?? ''; }
+    getDirection() { return this.opts.direction ?? 'vertical'; }
+    getDisabled() { return this.opts.disabled ?? false; }
+    getClass() { return this.opts.class ?? ''; }
+    getStyle() { return this.opts.style ?? ''; }
+    setValues(vals) { return this.values(vals); }
+    setOptions(opts) { return this.options(opts); }
+    setLabel(val) { return this.label(val); }
+    setDirection(val) { return this.direction(val); }
+    setDisabled(val) { return this.disabled(val); }
+    setClass(val) { return this.class(val); }
+    setStyle(val) { return this.style(val); }
+    getOptions() { return this.opts.options ?? []; }
+    _rebuild() {
+        if (!this._wrapper)
+            return;
+        const group = this._wrapper.querySelector('.jux-checkbox-options');
+        if (!group)
+            return;
+        group.innerHTML = '';
+        this._inputs = [];
+        this._buildOptions(group);
+    }
+    _buildOptions(container) {
+        for (const opt of this.opts.options || []) {
+            const item = document.createElement('label');
+            item.className = 'jux-checkbox-item';
+            const inp = document.createElement('input');
+            inp.type = 'checkbox';
+            inp.value = opt.value;
+            inp.className = 'jux-checkbox-input';
+            if (opt.checked || this.opts.values?.includes(opt.value))
+                inp.checked = true;
+            if (opt.disabled || this.opts.disabled)
+                inp.disabled = true;
+            inp.addEventListener('change', (e) => {
+                if (this._onChange)
+                    this._onChange(this.getValues(), e);
+            });
+            const text = document.createElement('span');
+            text.className = 'jux-checkbox-label';
+            text.textContent = opt.label;
+            item.appendChild(inp);
+            item.appendChild(text);
+            container.appendChild(item);
+            this._inputs.push(inp);
+        }
+    }
+    render(target) {
+        const wrapper = document.createElement('fieldset');
+        wrapper.className = 'jux-checkbox-group';
+        wrapper.id = this.id;
+        if (this.opts.class)
+            wrapper.className += ` ${this.opts.class}`;
+        if (this.opts.style)
+            wrapper.setAttribute('style', this.opts.style);
+        if (this.opts.label) {
+            const legend = document.createElement('legend');
+            legend.textContent = this.opts.label;
+            legend.className = 'jux-checkbox-group-label';
+            wrapper.appendChild(legend);
+        }
+        const optionsDiv = document.createElement('div');
+        optionsDiv.className = `jux-checkbox-options jux-checkbox-${this.opts.direction}`;
+        this._buildOptions(optionsDiv);
+        wrapper.appendChild(optionsDiv);
+        this._wrapper = wrapper;
+        // Wire up option-based handler
+        if (this.opts.onChange)
+            this._onChange = this.opts.onChange;
+        const container = target
+            ? (typeof target === 'string' ? document.getElementById(target) || document.querySelector(target) : target)
+            : document.getElementById('app');
+        container?.appendChild(wrapper);
+        return this;
+    }
+}
+export function checkbox(id, options = {}) {
+    const c = new Checkbox(id, options);
+    c.render();
+    pageState.__register(c);
+    return c;
+}
+export function checkboxGroup(id, options = {}) {
+    const g = new CheckboxGroup(id, options);
+    g.render();
+    pageState.__register(g);
+    return g;
+}
+export { Checkbox, CheckboxGroup };
+//# sourceMappingURL=checkbox.js.map

package/dist/primitives/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../lib/primitives/checkbox.ts"],"names":[],"mappings":"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"}

package/dist/primitives/data.d.ts

@@ -0,0 +1,58 @@
+interface DataOptions {
+    url?: string;
+    method?: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+    headers?: Record<string, string>;
+    body?: any;
+    transform?: (raw: any) => any;
+    auto?: boolean;
+}
+declare class Data {
+    id: string;
+    options: DataOptions;
+    private _value;
+    private _loading;
+    private _error;
+    private _onChange;
+    constructor(id: string, options?: DataOptions);
+    url(value: string): this;
+    method(value: DataOptions['method']): this;
+    headers(value: Record<string, string>): this;
+    body(value: any): this;
+    transform(fn: (raw: any) => any): this;
+    onChange(fn: (value: any) => void): this;
+    getValue(): any;
+    getLoading(): boolean;
+    getError(): string | null;
+    setValue(val: any): this;
+    /**
+     * Re-fetch the data and notify pageState.
+     * Triggers all watchers that depend on this data's value.
+     */
+    refresh(): Promise<any>;
+    fetch(urlOverride?: string): Promise<any>;
+}
+/**
+ * Create a data source that integrates with pageState.
+ *
+ * @example
+ * // Auto-fetch on creation
+ * const api = await jux.data('api', { url: '/api/test' });
+ * // pageState['api'].value → { users: [...], posts: [...] }
+ *
+ * // With transform
+ * const users = await jux.data('users', {
+ *     url: '/api/test',
+ *     transform: raw => raw.users
+ * });
+ * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
+ *
+ * // Manual fetch
+ * const manual = jux.data('manual', { url: '/api/test', auto: false });
+ * await manual.fetch(); // fetch later
+ *
+ * // Re-fetch
+ * await pageState['api'].refresh();
+ */
+export declare function data(id: string, options?: DataOptions): Promise<Data>;
+export { Data, DataOptions };
+//# sourceMappingURL=data.d.ts.map

package/dist/primitives/data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.d.ts","sourceRoot":"","sources":["../../lib/primitives/data.ts"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,WAAW,CAAC;IACrB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,MAAM,CAAuB;IACrC,OAAO,CAAC,SAAS,CAAuC;gBAE5C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAMjD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IACxB,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,GAAG,IAAI;IAC1C,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAC5C,IAAI,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IACtB,SAAS,CAAC,EAAE,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;IAEtC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAAG,IAAI;IAMxC,QAAQ,IAAI,GAAG;IACf,UAAU,IAAI,OAAO;IACrB,QAAQ,IAAI,MAAM,GAAG,IAAI;IAEzB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,IAAI;IAMxB;;;OAGG;IACG,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC;IAQvB,KAAK,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;CA+DlD;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAsB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAW/E;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC"}

package/dist/primitives/data.js

@@ -0,0 +1,131 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+class Data {
+    constructor(id, options = {}) {
+        this._value = null;
+        this._loading = false;
+        this._error = null;
+        this._onChange = null;
+        this.id = id || generateId();
+        this.options = { method: 'GET', auto: true, ...options };
+    }
+    // Fluent API
+    url(value) { this.options.url = value; return this; }
+    method(value) { this.options.method = value; return this; }
+    headers(value) { this.options.headers = value; return this; }
+    body(value) { this.options.body = value; return this; }
+    transform(fn) { this.options.transform = fn; return this; }
+    onChange(fn) {
+        this._onChange = fn;
+        return this;
+    }
+    // Getters for pageState integration
+    getValue() { return this._value; }
+    getLoading() { return this._loading; }
+    getError() { return this._error; }
+    setValue(val) {
+        this._value = val;
+        if (this._onChange)
+            this._onChange(val);
+        return this;
+    }
+    /**
+     * Re-fetch the data and notify pageState.
+     * Triggers all watchers that depend on this data's value.
+     */
+    async refresh() {
+        const result = await this.fetch();
+        // Notify pageState so watchers re-run
+        pageState.__notify(`${this.id}.value`);
+        pageState.__notify(`${this.id}.loading`);
+        return result;
+    }
+    async fetch(urlOverride) {
+        const fetchUrl = urlOverride || this.options.url;
+        if (!fetchUrl) {
+            this._error = 'No URL provided';
+            return null;
+        }
+        this._loading = true;
+        this._error = null;
+        // Notify pageState of loading change
+        if (pageState.__notify) {
+            pageState.__notify(`${this.id}.loading`);
+        }
+        try {
+            const fetchOptions = {
+                method: this.options.method,
+                headers: this.options.headers,
+            };
+            if (this.options.body && this.options.method !== 'GET') {
+                fetchOptions.body = typeof this.options.body === 'string'
+                    ? this.options.body
+                    : JSON.stringify(this.options.body);
+                if (!this.options.headers?.['Content-Type']) {
+                    fetchOptions.headers = {
+                        'Content-Type': 'application/json',
+                        ...fetchOptions.headers
+                    };
+                }
+            }
+            const res = await globalThis.fetch(fetchUrl, fetchOptions);
+            if (!res.ok) {
+                throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+            }
+            const contentType = res.headers.get('content-type') || '';
+            let raw;
+            if (contentType.includes('application/json')) {
+                raw = await res.json();
+            }
+            else {
+                raw = await res.text();
+            }
+            this._value = this.options.transform ? this.options.transform(raw) : raw;
+            this._loading = false;
+            this._error = null;
+            if (this._onChange)
+                this._onChange(this._value);
+            return this._value;
+        }
+        catch (err) {
+            this._loading = false;
+            this._error = err.message || 'Fetch failed';
+            console.error(`❌ jux.data('${this.id}') fetch error:`, err.message);
+            return null;
+        }
+    }
+}
+/**
+ * Create a data source that integrates with pageState.
+ *
+ * @example
+ * // Auto-fetch on creation
+ * const api = await jux.data('api', { url: '/api/test' });
+ * // pageState['api'].value → { users: [...], posts: [...] }
+ *
+ * // With transform
+ * const users = await jux.data('users', {
+ *     url: '/api/test',
+ *     transform: raw => raw.users
+ * });
+ * // pageState['users'].value → [{ id: 1, name: 'Alice' }, ...]
+ *
+ * // Manual fetch
+ * const manual = jux.data('manual', { url: '/api/test', auto: false });
+ * await manual.fetch(); // fetch later
+ *
+ * // Re-fetch
+ * await pageState['api'].refresh();
+ */
+export async function data(id, options = {}) {
+    const d = new Data(id, options);
+    pageState.__register(d);
+    if (options.auto !== false && options.url) {
+        await d.fetch();
+        // Re-register so pageState picks up the fetched value
+        pageState.__register(d);
+    }
+    return d;
+}
+export { Data };
+//# sourceMappingURL=data.js.map

package/dist/primitives/data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data.js","sourceRoot":"","sources":["../../lib/primitives/data.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAWlD,MAAM,IAAI;IAQN,YAAY,EAAU,EAAE,UAAuB,EAAE;QALzC,WAAM,GAAQ,IAAI,CAAC;QACnB,aAAQ,GAAY,KAAK,CAAC;QAC1B,WAAM,GAAkB,IAAI,CAAC;QAC7B,cAAS,GAAkC,IAAI,CAAC;QAGpD,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,UAAU,EAAE,CAAC;QAC7B,IAAI,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,OAAO,EAAE,CAAC;IAC7D,CAAC;IAED,aAAa;IACb,GAAG,CAAC,KAAa,IAAU,IAAI,CAAC,OAAO,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IACnE,MAAM,CAAC,KAA4B,IAAU,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IACxF,OAAO,CAAC,KAA6B,IAAU,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC3F,IAAI,CAAC,KAAU,IAAU,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAClE,SAAS,CAAC,EAAqB,IAAU,IAAI,CAAC,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAEpF,QAAQ,CAAC,EAAwB;QAC7B,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,oCAAoC;IACpC,QAAQ,KAAU,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IACvC,UAAU,KAAc,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC/C,QAAQ,KAAoB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;IAEjD,QAAQ,CAAC,GAAQ;QACb,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;QAClB,IAAI,IAAI,CAAC,SAAS;YAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,OAAO;QACT,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QAClC,sCAAsC;QACtC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,QAAQ,CAAC,CAAC;QACvC,SAAS,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;QACzC,OAAO,MAAM,CAAC;IAClB,CAAC;IAED,KAAK,CAAC,KAAK,CAAC,WAAoB;QAC5B,MAAM,QAAQ,GAAG,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC;QACjD,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,IAAI,CAAC,MAAM,GAAG,iBAAiB,CAAC;YAChC,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QAEnB,qCAAqC;QACrC,IAAK,SAAiB,CAAC,QAAQ,EAAE,CAAC;YAC7B,SAAiB,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,CAAC;YACD,MAAM,YAAY,GAAgB;gBAC9B,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;gBAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;aAChC,CAAC;YAEF,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBACrD,YAAY,CAAC,IAAI,GAAG,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ;oBACrD,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI;oBACnB,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACxC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC;oBAC1C,YAAY,CAAC,OAAO,GAAG;wBACnB,cAAc,EAAE,kBAAkB;wBAClC,GAAG,YAAY,CAAC,OAAO;qBAC1B,CAAC;gBACN,CAAC;YACL,CAAC;YAED,MAAM,GAAG,GAAG,MAAM,UAAU,CAAC,KAAK,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;YAE3D,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC;gBACV,MAAM,IAAI,KAAK,CAAC,QAAQ,GAAG,CAAC,MAAM,KAAK,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC;YAC7D,CAAC;YAED,MAAM,WAAW,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;YAC1D,IAAI,GAAQ,CAAC;YAEb,IAAI,WAAW,CAAC,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC;gBAC3C,GAAG,GAAG,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;YAC3B,CAAC;iBAAM,CAAC;gBACJ,GAAG,GAAG,MAAM,GAAG,CAAC,IAAI,EAAE,CAAC;YAC3B,CAAC;YAED,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;YACzE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YAEnB,IAAI,IAAI,CAAC,SAAS;gBAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAEhD,OAAO,IAAI,CAAC,MAAM,CAAC;QAEvB,CAAC;QAAC,OAAO,GAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,OAAO,IAAI,cAAc,CAAC;YAC5C,OAAO,CAAC,KAAK,CAAC,eAAe,IAAI,CAAC,EAAE,iBAAiB,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;YACpE,OAAO,IAAI,CAAC;QAChB,CAAC;IACL,CAAC;CACJ;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,KAAK,UAAU,IAAI,CAAC,EAAU,EAAE,UAAuB,EAAE;IAC5D,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAChC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAExB,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;QACxC,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;QAChB,sDAAsD;QACtD,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,CAAC;AACb,CAAC;AAED,OAAO,EAAE,IAAI,EAAe,CAAC"}

package/dist/primitives/grid.d.ts

@@ -0,0 +1,58 @@
+type GridDensity = 'dense' | 'normal' | 'inflated';
+interface GridColumn {
+    name: string;
+    width?: string;
+}
+interface GridOptions {
+    rows?: number;
+    cols?: number | GridColumn[];
+    density?: GridDensity;
+    class?: string;
+    style?: string;
+    target?: string;
+    [key: string]: any;
+}
+declare class Grid {
+    id: string;
+    opts: GridOptions;
+    private _element;
+    private _columns;
+    constructor(id: string, options?: GridOptions);
+    getValue(): string;
+    getContent(): string;
+    setContent(val: string): this;
+    setClass(val: string): this;
+    setStyle(val: string): this;
+    setInnerHTML(val: string): this;
+    getElement(): HTMLElement;
+    /** Get a named column cell element */
+    getColumn(name: string): HTMLElement | null;
+    getColumns(): GridColumn[];
+}
+/**
+ * Create a CSS grid layout container.
+ *
+ * @example
+ * // Simple: 3 equal columns
+ * jux.grid('cards', { cols: 3 });
+ *
+ * // Named columns with custom widths
+ * jux.grid('layout', {
+ *     cols: [
+ *         { name: 'sidebar', width: '260px' },
+ *         { name: 'content', width: '3fr' },
+ *         { name: 'aside',   width: '1fr' },
+ *     ]
+ * });
+ * // Then target into them:
+ * jux.nav('main-nav', { target: 'sidebar' });
+ * jux.h1('title', { content: 'Hello', target: 'content' });
+ *
+ * // Density options
+ * jux.grid('tight', { cols: 4, density: 'dense' });
+ * jux.grid('spacious', { cols: 2, density: 'inflated' });
+ */
+export declare function grid(id: string, options?: GridOptions): Grid;
+export { Grid, GridOptions, GridColumn, GridDensity };
+export default grid;
+//# sourceMappingURL=grid.d.ts.map

package/dist/primitives/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../lib/primitives/grid.ts"],"names":[],"mappings":"AAGA,KAAK,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEnD,UAAU,UAAU;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,WAAW;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAQD,cAAM,IAAI;IACN,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,WAAW,CAAC;IAClB,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,QAAQ,CAAoB;gBAExB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAoEjD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK/B,UAAU,IAAI,WAAW;IAEzB,sCAAsC;IACtC,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI;IAI3C,UAAU,IAAI,UAAU,EAAE;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAIhE;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtD,eAAe,IAAI,CAAC"}

package/dist/primitives/grid.js

@@ -0,0 +1,128 @@
+import generateId from '../utils/idgen.js';
+import { pageState } from '../state/pageState.js';
+const DENSITY_MAP = {
+    dense: { gap: '4px', padding: '4px' },
+    normal: { gap: '12px', padding: '12px' },
+    inflated: { gap: '24px', padding: '24px' },
+};
+class Grid {
+    constructor(id, options = {}) {
+        this._columns = [];
+        this.id = id || generateId();
+        this.opts = {
+            cols: 2,
+            density: 'normal',
+            ...options
+        };
+        this._element = document.createElement('div');
+        this._element.id = this.id;
+        if (this.opts.class)
+            this._element.className = this.opts.class;
+        // Resolve columns
+        const cols = this.opts.cols;
+        let templateCols;
+        if (cols && typeof cols === 'object' && Array.isArray(cols)) {
+            this._columns = cols.map(c => ({
+                name: c.name,
+                width: c.width || '1fr'
+            }));
+            templateCols = this._columns.map(c => c.width).join(' ');
+        }
+        else {
+            const count = typeof cols === 'number' ? cols : 2;
+            templateCols = `repeat(${count}, 1fr)`;
+        }
+        const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;
+        const parts = [
+            'display:grid',
+            `grid-template-columns:${templateCols}`,
+            `gap:${d.gap}`,
+            `padding:${d.padding}`,
+        ];
+        if (this.opts.rows) {
+            parts.push(`grid-template-rows:repeat(${this.opts.rows}, auto)`);
+        }
+        if (this.opts.style)
+            parts.push(this.opts.style);
+        this._element.setAttribute('style', parts.join(';'));
+        // Extra attributes
+        for (const [key, value] of Object.entries(this.opts)) {
+            if (['rows', 'cols', 'density', 'class', 'style', 'target'].includes(key))
+                continue;
+            this._element.setAttribute(`data-${key}`, String(value));
+        }
+        // Mount
+        const resolvedTarget = this.opts.target;
+        const parent = resolvedTarget
+            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
+            : document.getElementById('app');
+        parent?.appendChild(this._element);
+        // Create named column cells if using array cols
+        if (this._columns.length > 0) {
+            for (const col of this._columns) {
+                const cell = document.createElement('div');
+                cell.id = col.name;
+                cell.setAttribute('data-grid-col', col.name);
+                this._element.appendChild(cell);
+            }
+        }
+    }
+    // ═══════════════════════════════════════════════════════════
+    // PAGESTATE INTEGRATION
+    // ═══════════════════════════════════════════════════════════
+    getValue() { return ''; }
+    getContent() { return this._element.textContent ?? ''; }
+    setContent(val) {
+        this._element.textContent = val;
+        return this;
+    }
+    setClass(val) {
+        this._element.className = val;
+        return this;
+    }
+    setStyle(val) {
+        this._element.setAttribute('style', val);
+        return this;
+    }
+    setInnerHTML(val) {
+        this._element.innerHTML = val;
+        return this;
+    }
+    getElement() { return this._element; }
+    /** Get a named column cell element */
+    getColumn(name) {
+        return this._element.querySelector(`[data-grid-col="${name}"]`);
+    }
+    getColumns() { return [...this._columns]; }
+}
+/**
+ * Create a CSS grid layout container.
+ *
+ * @example
+ * // Simple: 3 equal columns
+ * jux.grid('cards', { cols: 3 });
+ *
+ * // Named columns with custom widths
+ * jux.grid('layout', {
+ *     cols: [
+ *         { name: 'sidebar', width: '260px' },
+ *         { name: 'content', width: '3fr' },
+ *         { name: 'aside',   width: '1fr' },
+ *     ]
+ * });
+ * // Then target into them:
+ * jux.nav('main-nav', { target: 'sidebar' });
+ * jux.h1('title', { content: 'Hello', target: 'content' });
+ *
+ * // Density options
+ * jux.grid('tight', { cols: 4, density: 'dense' });
+ * jux.grid('spacious', { cols: 2, density: 'inflated' });
+ */
+export function grid(id, options = {}) {
+    const g = new Grid(id, options);
+    pageState.__register(g);
+    return g;
+}
+export { Grid };
+export default grid;
+//# sourceMappingURL=grid.js.map

package/dist/primitives/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../lib/primitives/grid.ts"],"names":[],"mappings":"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"}