juxscript 1.1.362 → 1.1.363

package/package.json

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

package/dist/lib/components/blocks/menu.d.ts

@@ -1,40 +0,0 @@
-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=menu.d.ts.map

package/dist/lib/components/blocks/menu.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../lib/components/blocks/menu.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,CA4I1F"}

package/dist/lib/components/blocks/menu.js

@@ -1,136 +0,0 @@
-import { jux, pageState } from 'juxscript';
-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();
-        jux.div(id, { class: 'jux-sidebar jux-sidebar--' + _density, style: 'width:' + _width, target: _target });
-        jux.div(id + '-header', { class: 'jux-sidebar-header', target: id });
-        jux.div(id + '-logo', { class: 'jux-sidebar-logo', content: _logo, target: id + '-header' });
-        jux.span(id + '-title', { content: _title, target: id + '-header' });
-    }
-    function renderSection(section) {
-        ensureShell();
-        const i = _sectionCount++;
-        if (i > 0)
-            jux.div(id + '-divider-' + i, { class: 'jux-sidebar-divider', target: id });
-        if (section.label)
-            jux.div(id + '-label-' + i, { class: 'jux-sidebar-label', content: section.label, target: id });
-        jux.nav(id + '-nav-' + i, { target: id, items: section.items });
-    }
-    function renderFooter() {
-        if (_footerRendered || !_footer)
-            return;
-        _footerRendered = true;
-        jux.div(id + '-footer', { class: 'jux-sidebar-footer', content: _footer, target: id });
-    }
-    function injectStyles() {
-        jux.style('menu-styles', '\
-        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 + '; }\
-        ');
-    }
-    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/button.d.ts

@@ -1,33 +0,0 @@
-interface ButtonOptions {
-    content?: string;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
-    size?: 'default' | 'sm' | 'lg' | 'icon';
-    disabled?: boolean;
-    type?: 'button' | 'submit' | 'reset';
-    class?: string;
-    style?: string;
-    target?: string;
-    icon?: string;
-    [key: string]: any;
-}
-declare class Button {
-    id: string;
-    opts: ButtonOptions;
-    private _element;
-    private _onChange;
-    constructor(id: string, options?: ButtonOptions);
-    getValue(): string;
-    getContent(): string;
-    setValue(val: string): this;
-    setContent(val: string): this;
-    setDisabled(val: boolean): this;
-    setClass(val: string): this;
-    setStyle(val: string): this;
-    getElement(): HTMLButtonElement;
-    onChange(fn: (value: string) => void): this;
-}
-export declare function button(id: string, options?: ButtonOptions): Button;
-export declare function btn(id: string, options?: ButtonOptions): Button;
-export { Button, ButtonOptions };
-export default button;
-//# sourceMappingURL=button.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../lib/components/button.ts"],"names":[],"mappings":"AAIA,UAAU,aAAa;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;IACjF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,cAAM,MAAM;IACR,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,aAAa,CAAC;IACpB,OAAO,CAAC,QAAQ,CAAoB;IACpC,OAAO,CAAC,SAAS,CAA0C;gBAE/C,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB;IA4DnD,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,WAAW,CAAC,GAAG,EAAE,OAAO,GAAG,IAAI;IAM/B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAK3B,UAAU,IAAI,iBAAiB;IAE/B,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI;CAI9C;AAED,wBAAgB,MAAM,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAItE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAInE;AAED,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AACjC,eAAe,MAAM,CAAC"}

package/dist/lib/components/button.js

@@ -1,107 +0,0 @@
-import generateId from '../utils/idgen.js';
-import niceName from '../utils/niceName.js';
-import { pageState } from '../state/pageState.js';
-class Button {
-    constructor(id, options = {}) {
-        this._onChange = null;
-        this.id = id || generateId();
-        this.opts = {
-            variant: 'default',
-            size: 'default',
-            type: 'button',
-            disabled: false,
-            ...options
-        };
-        // Auto-generate content from ID if not provided
-        if (!this.opts.content && this.id) {
-            this.opts.content = niceName(this.id);
-        }
-        this._element = document.createElement('button');
-        this._element.id = this.id;
-        this._element.type = this.opts.type;
-        if (this.opts.disabled)
-            this._element.disabled = true;
-        // Build class list
-        const classes = ['jux-button'];
-        if (this.opts.variant)
-            classes.push(`jux-button--${this.opts.variant}`);
-        if (this.opts.size && this.opts.size !== 'default')
-            classes.push(`jux-button--${this.opts.size}`);
-        if (this.opts.class)
-            classes.push(this.opts.class);
-        this._element.className = classes.join(' ');
-        if (this.opts.style)
-            this._element.setAttribute('style', this.opts.style);
-        // Content
-        if (this.opts.icon) {
-            const iconSpan = document.createElement('span');
-            iconSpan.className = 'jux-button-icon';
-            iconSpan.textContent = this.opts.icon;
-            this._element.appendChild(iconSpan);
-        }
-        if (this.opts.content) {
-            const textSpan = document.createElement('span');
-            textSpan.className = 'jux-button-text';
-            textSpan.textContent = this.opts.content;
-            this._element.appendChild(textSpan);
-        }
-        // Extra attributes
-        for (const [key, value] of Object.entries(this.opts)) {
-            if (['content', 'class', 'style', 'target', 'variant', 'size', 'type', 'disabled', 'icon'].includes(key))
-                continue;
-            this._element.setAttribute(`data-${key}`, String(value));
-        }
-        const resolvedTarget = this.opts.target;
-        const container = resolvedTarget
-            ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget)
-            : document.getElementById('app');
-        container?.appendChild(this._element);
-    }
-    // ═══════════════════════════════════════════════════════════
-    // PAGESTATE INTEGRATION
-    // ═══════════════════════════════════════════════════════════
-    getValue() { return this.opts.content ?? ''; }
-    getContent() { return this.opts.content ?? ''; }
-    setValue(val) {
-        this.opts.content = val;
-        const textEl = this._element.querySelector('.jux-button-text');
-        if (textEl) {
-            textEl.textContent = val;
-        }
-        else {
-            this._element.textContent = val;
-        }
-        return this;
-    }
-    setContent(val) { return this.setValue(val); }
-    setDisabled(val) {
-        this.opts.disabled = val;
-        this._element.disabled = val;
-        return this;
-    }
-    setClass(val) {
-        this._element.className = val;
-        return this;
-    }
-    setStyle(val) {
-        this._element.setAttribute('style', val);
-        return this;
-    }
-    getElement() { return this._element; }
-    onChange(fn) {
-        this._onChange = fn;
-        return this;
-    }
-}
-export function button(id, options = {}) {
-    const b = new Button(id, options);
-    pageState.__register(b);
-    return b;
-}
-export function btn(id, options = {}) {
-    const b = new Button(id, options);
-    pageState.__register(b);
-    return b;
-}
-export { Button };
-export default button;

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

@@ -1,62 +0,0 @@
-interface CheckboxOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    checked?: boolean;
-}
-interface CheckboxOptions {
-    label?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    class?: string;
-    style?: string;
-}
-interface CheckboxGroupOptions {
-    label?: string;
-    options?: CheckboxOption[];
-    values?: string[];
-    direction?: 'vertical' | 'horizontal';
-    disabled?: boolean;
-    class?: string;
-    style?: string;
-}
-declare class Checkbox {
-    id: string;
-    opts: CheckboxOptions;
-    private _element;
-    private _wrapper;
-    private _onChange;
-    constructor(id: string, options?: CheckboxOptions);
-    label(value: string): this;
-    checked(value?: boolean): this;
-    disabled(value?: boolean): this;
-    style(value: string): this;
-    class(value: string): this;
-    onChange(fn: (checked: boolean, event: Event) => void): this;
-    getValue(): boolean;
-    render(target?: string | HTMLElement): this;
-}
-declare class CheckboxGroup {
-    id: string;
-    opts: CheckboxGroupOptions;
-    private _wrapper;
-    private _inputs;
-    private _onChange;
-    constructor(id: string, options?: CheckboxGroupOptions);
-    label(value: string): this;
-    direction(value: 'vertical' | 'horizontal'): this;
-    disabled(value?: boolean): this;
-    style(value: string): this;
-    class(value: string): this;
-    options(opts: CheckboxOption[]): this;
-    values(vals: string[]): this;
-    onChange(fn: (values: string[], event: Event) => void): this;
-    getValues(): string[];
-    private _rebuild;
-    private _buildOptions;
-    render(target?: string | HTMLElement): this;
-}
-export declare function checkbox(id: string, options?: CheckboxOptions): Checkbox;
-export declare function checkboxGroup(id: string, options?: CheckboxGroupOptions): CheckboxGroup;
-export { Checkbox, CheckboxGroup, CheckboxOption, CheckboxOptions, CheckboxGroupOptions };
-//# sourceMappingURL=checkbox.d.ts.map

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

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

package/dist/lib/components/checkbox.js

@@ -1,178 +0,0 @@
-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;
-    }
-    getValue() {
-        return this._element?.checked ?? this.opts.checked ?? false;
-    }
-    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;
-        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;
-    }
-    getValues() {
-        return this._inputs.filter(i => i.checked).map(i => i.value);
-    }
-    _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;
-        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 };

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

@@ -1,58 +0,0 @@
-interface ContainerOptions {
-    layout?: 'flex' | 'grid' | 'block';
-    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-    wrap?: boolean;
-    gap?: string;
-    padding?: string;
-    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
-    columns?: number | string;
-    width?: string;
-    height?: string;
-    maxWidth?: string;
-    minHeight?: string;
-    class?: string;
-    style?: string;
-    target?: string;
-    tag?: string;
-    content?: string;
-    [key: string]: any;
-}
-declare class Container {
-    id: string;
-    opts: ContainerOptions;
-    private _element;
-    constructor(id: string, options?: ContainerOptions);
-    private _buildStyles;
-    getValue(): string;
-    getContent(): string;
-    setValue(val: string): this;
-    setContent(val: string): this;
-    setClass(val: string): this;
-    setStyle(val: string): this;
-    setInnerHTML(val: string): this;
-    getElement(): HTMLElement;
-}
-/**
- * Create a layout container.
- *
- * @example
- * // Flex column (default)
- * jux.container('main', { gap: '16px', padding: '24px' });
- *
- * // Flex row
- * jux.container('toolbar', { direction: 'row', gap: '8px', align: 'center' });
- *
- * // Grid
- * jux.container('grid', { layout: 'grid', columns: 3, gap: '16px' });
- *
- * // Centered page wrapper
- * jux.container('page', { maxWidth: '960px', padding: '24px 16px', align: 'center' });
- *
- * // Nested
- * jux.container('card', { gap: '8px', padding: '16px', target: 'grid' });
- */
-export declare function container(id: string, options?: ContainerOptions): Container;
-export { Container, ContainerOptions };
-export default container;
-//# sourceMappingURL=container.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../lib/components/container.ts"],"names":[],"mappings":"AAGA,UAAU,gBAAgB;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,aAAa,GAAG,gBAAgB,CAAC;IAChE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAmBD,cAAM,SAAS;IACX,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,CAAC,QAAQ,CAAc;gBAElB,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB;IA6CtD,OAAO,CAAC,YAAY;IAoCpB,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IAEpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAM3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE7B,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;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,gBAAqB,GAAG,SAAS,CAI/E;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AACvC,eAAe,SAAS,CAAC"}