juxscript 1.1.361 → 1.1.363

package/dist/lib/components/tag.js

@@ -1,103 +0,0 @@
-import generateId from '../utils/idgen.js';
-import { pageState } from '../state/pageState.js';
-import codeparser from '../utils/codeparser.js';
-class Tag {
-    constructor(id, tagName, options = {}) {
-        this._element = null;
-        this.id = id || generateId();
-        this.tagName = tagName;
-        this.opts = options;
-    }
-    // Fluent API
-    content(value) { this.opts.content = value; if (this._element)
-        this._element.textContent = value; return this; }
-    class(value) { this.opts.class = value; if (this._element)
-        this._element.className = value; return this; }
-    style(value) { this.opts.style = value; if (this._element)
-        this._element.setAttribute('style', value); return this; }
-    // Getters/Setters for pageState integration
-    getValue() { return this._element?.textContent ?? this.opts.content ?? ''; }
-    getContent() { return this._element?.textContent ?? this.opts.content ?? ''; }
-    setValue(val) { this.opts.content = val; if (this._element)
-        this._element.textContent = val; return this; }
-    setContent(val) { return this.setValue(val); }
-    setClass(val) { this.opts.class = val; if (this._element)
-        this._element.className = val; return this; }
-    setStyle(val) { this.opts.style = val; if (this._element)
-        this._element.setAttribute('style', val); return this; }
-    setInnerHTML(val) { if (this._element)
-        this._element.innerHTML = val; return this; }
-    getElement() { return this._element; }
-    render(target) {
-        const el = document.createElement(this.tagName);
-        el.id = this.id;
-        if (this.opts.content)
-            el.textContent = this.opts.content;
-        if (this.opts.class)
-            el.className = this.opts.class;
-        if (this.opts.style)
-            el.setAttribute('style', this.opts.style);
-        for (const [key, value] of Object.entries(this.opts)) {
-            if (['content', 'class', 'style', 'target'].includes(key))
-                continue;
-            el.setAttribute(key, String(value));
-        }
-        this._element = el;
-        // Resolve target: param > opts.target > #app
-        const resolvedTarget = target || this.opts.target;
-        const container = resolvedTarget
-            ? (typeof resolvedTarget === 'string' ? document.getElementById(resolvedTarget) || document.querySelector(resolvedTarget) : resolvedTarget)
-            : document.getElementById('app');
-        container?.appendChild(el);
-        return this;
-    }
-}
-export function tag(id, tagName, options = {}) {
-    const t = new Tag(id, tagName, options);
-    t.render();
-    pageState.__register(t);
-    return t;
-}
-export function div(id, options = {}) { return tag(id, 'div', options); }
-export function span(id, options = {}) { return tag(id, 'span', options); }
-export function p(id, options = {}) { return tag(id, 'p', options); }
-export function code(id, options = {}) {
-    // Inject highlight styles once
-    if (!document.getElementById('__jux-hl-styles')) {
-        const style = document.createElement('style');
-        style.id = '__jux-hl-styles';
-        style.textContent = codeparser.getCSS();
-        document.head.appendChild(style);
-    }
-    // Parse and highlight content
-    const raw = options.content || '';
-    const trimmed = raw.replace(/^\n+/, '').replace(/\n+$/, '');
-    const parsed = codeparser.parse(trimmed);
-    // Build line-by-line HTML
-    const linesHtml = parsed.map(line => `<div class="jux-code-line"><span class="jux-code-line-number">${line.lineNumber}</span><span class="jux-code-line-content">${line.html}</span></div>`).join('');
-    // Create as <pre> with inner code structure
-    const t = new Tag(id, 'pre', {
-        ...options,
-        content: undefined,
-        class: `jux-code${options.class ? ' ' + options.class : ''}`
-    });
-    t.render();
-    const el = t.getElement();
-    if (el) {
-        const codeEl = document.createElement('code');
-        codeEl.className = 'jux-code-lines';
-        codeEl.innerHTML = linesHtml;
-        el.appendChild(codeEl);
-    }
-    pageState.__register(t);
-    return t;
-}
-export function pre(id, options = {}) { return tag(id, 'pre', options); }
-export function h1(id, options = {}) { return tag(id, 'h1', options); }
-export function h2(id, options = {}) { return tag(id, 'h2', options); }
-export function h3(id, options = {}) { return tag(id, 'h3', options); }
-export function h4(id, options = {}) { return tag(id, 'h4', options); }
-export function h5(id, options = {}) { return tag(id, 'h5', options); }
-export function h6(id, options = {}) { return tag(id, 'h6', options); }
-export { Tag };
-export default tag;

package/dist/lib/devtools/devtools.d.ts

@@ -1,3 +0,0 @@
-export declare function devtools(show?: boolean): void;
-export default devtools;
-//# sourceMappingURL=devtools.d.ts.map

package/dist/lib/devtools/devtools.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"devtools.d.ts","sourceRoot":"","sources":["../../../lib/devtools/devtools.ts"],"names":[],"mappings":"AAoJA,wBAAgB,QAAQ,CAAC,IAAI,GAAE,OAAc,GAAG,IAAI,CA0CnD;AAED,eAAe,QAAQ,CAAC"}

package/dist/lib/devtools/devtools.js

@@ -1,181 +0,0 @@
-import { pageState } from '../state/pageState.js';
-let panel = null;
-let interval = null;
-const STYLES = `
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  width: 420px;
-  max-height: 60vh;
-  overflow-y: auto;
-  background: #1e1e2e;
-  color: #cdd6f4;
-  font-family: 'SF Mono', 'Fira Code', monospace;
-  font-size: 11px;
-  line-height: 1.4;
-  padding: 0;
-  border-top-left-radius: 8px;
-  box-shadow: -2px -2px 12px rgba(0,0,0,0.4);
-  z-index: 99999;
-  border: 1px solid #45475a;
-`;
-const HEADER_STYLES = `
-  position: sticky;
-  top: 0;
-  background: #313244;
-  padding: 6px 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid #45475a;
-  cursor: move;
-`;
-function escapeHtml(str) {
-    return String(str)
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;');
-}
-function formatValue(val) {
-    if (val === undefined)
-        return '<span style="color:#6c7086">undefined</span>';
-    if (val === null)
-        return '<span style="color:#6c7086">null</span>';
-    if (typeof val === 'boolean')
-        return `<span style="color:#fab387">${val}</span>`;
-    if (typeof val === 'number')
-        return `<span style="color:#fab387">${val}</span>`;
-    if (typeof val === 'string') {
-        const truncated = val.length > 40 ? escapeHtml(val.slice(0, 40)) + '…' : escapeHtml(val);
-        return `<span style="color:#a6e3a1">"${truncated}"</span>`;
-    }
-    if (Array.isArray(val))
-        return `<span style="color:#89b4fa">Array[${val.length}]</span>`;
-    if (typeof val === 'object') {
-        try {
-            const keys = Object.keys(val);
-            return `<span style="color:#89b4fa">{${keys.slice(0, 3).join(', ')}${keys.length > 3 ? '…' : ''}}</span>`;
-        }
-        catch {
-            return '<span style="color:#89b4fa">{…}</span>';
-        }
-    }
-    if (typeof val === 'function')
-        return '<span style="color:#cba6f7">ƒ()</span>';
-    return escapeHtml(String(val));
-}
-function buildContent() {
-    const keys = pageState.__keys?.() ?? [];
-    if (keys.length === 0) {
-        return '<div style="padding:10px;color:#6c7086">No components registered</div>';
-    }
-    let html = '';
-    for (const key of keys) {
-        const proxy = pageState[key];
-        if (!proxy)
-            continue;
-        // Read known props
-        const value = proxy.value;
-        const content = proxy.content;
-        const checked = proxy.checked;
-        // Read event flags
-        const events = [];
-        for (const evt of ['blur', 'focus', 'click', 'change', 'input', 'hover', 'active', 'focused']) {
-            try {
-                if (proxy[evt] === true)
-                    events.push(evt);
-            }
-            catch { /* skip */ }
-        }
-        // Component type detection
-        const el = proxy.getElement?.();
-        let typeLabel = 'unknown';
-        let typeColor = '#6c7086';
-        if (el instanceof HTMLElement) {
-            const tag = el.tagName.toLowerCase();
-            const isStore = el.getAttribute('data-jux-store');
-            if (isStore) {
-                typeLabel = `store:${isStore}`;
-                typeColor = '#f38ba8';
-            }
-            else if (el instanceof HTMLInputElement) {
-                typeLabel = `input[${el.type}]`;
-                typeColor = '#89dceb';
-            }
-            else if (el instanceof HTMLSelectElement) {
-                typeLabel = 'select';
-                typeColor = '#89dceb';
-            }
-            else {
-                typeLabel = tag;
-                typeColor = '#94e2d5';
-            }
-        }
-        html += `
-        <div style="border-bottom:1px solid #313244;padding:6px 10px;">
-            <div style="display:flex;justify-content:space-between;margin-bottom:2px;">
-                <span style="color:#cba6f7;font-weight:bold;">${escapeHtml(key)}</span>
-                <span style="color:${typeColor};font-size:10px;">${escapeHtml(typeLabel)}</span>
-            </div>
-            <div style="padding-left:8px;">`;
-        if (value !== undefined) {
-            html += `<div><span style="color:#74c7ec">value:</span> ${formatValue(value)}</div>`;
-        }
-        if (content !== undefined && content !== value) {
-            html += `<div><span style="color:#74c7ec">content:</span> ${formatValue(content)}</div>`;
-        }
-        if (checked !== undefined) {
-            html += `<div><span style="color:#74c7ec">checked:</span> ${formatValue(checked)}</div>`;
-        }
-        if (events.length > 0) {
-            html += `<div><span style="color:#f9e2af">events:</span> <span style="color:#fab387">${events.join(', ')}</span></div>`;
-        }
-        html += `</div></div>`;
-    }
-    return html;
-}
-function refresh() {
-    if (!panel)
-        return;
-    const body = panel.querySelector('[data-devtools-body]');
-    if (body)
-        body.innerHTML = buildContent();
-}
-export function devtools(show = true) {
-    if (!show) {
-        if (panel) {
-            panel.remove();
-            panel = null;
-        }
-        if (interval) {
-            clearInterval(interval);
-            interval = null;
-        }
-        return;
-    }
-    if (panel) {
-        refresh();
-        return;
-    }
-    panel = document.createElement('div');
-    panel.id = '__jux-devtools';
-    panel.setAttribute('style', STYLES);
-    panel.innerHTML = `
-        <div style="${HEADER_STYLES}">
-            <span style="color:#f9e2af;font-weight:bold;">🔧 JUX DevTools</span>
-            <div>
-                <button data-devtools-refresh style="background:none;border:1px solid #45475a;color:#cdd6f4;cursor:pointer;padding:2px 6px;border-radius:3px;margin-right:4px;font-size:10px;">↻</button>
-                <button data-devtools-close style="background:none;border:1px solid #45475a;color:#cdd6f4;cursor:pointer;padding:2px 6px;border-radius:3px;font-size:10px;">✕</button>
-            </div>
-        </div>
-        <div data-devtools-body></div>
-    `;
-    document.body.appendChild(panel);
-    panel.querySelector('[data-devtools-close]')?.addEventListener('click', () => devtools(false));
-    panel.querySelector('[data-devtools-refresh]')?.addEventListener('click', () => refresh());
-    refresh();
-    // Auto-refresh every 500ms to catch async changes
-    interval = setInterval(refresh, 500);
-}
-export default devtools;

package/dist/lib/index.d.ts

@@ -1,68 +0,0 @@
-import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre, code } from "./components/tag.js";
-import { include } from "./components/include.js";
-import { input, email, password, number, tel, url, search, date, time, datetime, color, range, file, hidden } from "./components/input.js";
-import { select } from "./components/select.js";
-import { radio } from "./components/radio.js";
-import { checkbox, checkboxGroup } from "./components/checkbox.js";
-import { pageState } from "./state/pageState.js";
-import { data } from "./components/data.js";
-import { store } from "./components/store.js";
-import { devtools } from "./devtools/devtools.js";
-import { style } from "./components/style.js";
-import { nav } from "./components/nav.js";
-import { table } from "./components/table.js";
-import { list } from "./components/list.js";
-import { tabs } from "./components/tabs.js";
-import { button, btn } from "./components/button.js";
-import { link, a } from "./components/link.js";
-import { container } from "./components/container.js";
-import { grid } from "./components/grid.js";
-export declare const jux: {
-    tag: typeof tag;
-    div: typeof div;
-    h1: typeof h1;
-    h2: typeof h2;
-    h3: typeof h3;
-    h4: typeof h4;
-    h5: typeof h5;
-    h6: typeof h6;
-    p: typeof p;
-    span: typeof span;
-    pre: typeof pre;
-    code: typeof code;
-    include: typeof include;
-    input: typeof input;
-    email: typeof email;
-    password: typeof password;
-    number: typeof number;
-    tel: typeof tel;
-    url: typeof url;
-    search: typeof search;
-    date: typeof date;
-    time: typeof time;
-    datetime: typeof datetime;
-    color: typeof color;
-    range: typeof range;
-    file: typeof file;
-    hidden: typeof hidden;
-    select: typeof select;
-    radio: typeof radio;
-    checkbox: typeof checkbox;
-    checkboxGroup: typeof checkboxGroup;
-    data: typeof data;
-    store: typeof store;
-    devtools: typeof devtools;
-    style: typeof style;
-    nav: typeof nav;
-    table: typeof table;
-    list: typeof list;
-    tabs: typeof tabs;
-    button: typeof button;
-    btn: typeof btn;
-    link: typeof link;
-    a: typeof a;
-    container: typeof container;
-    grid: typeof grid;
-};
-export { pageState };
-//# sourceMappingURL=index.d.ts.map

package/dist/lib/index.d.ts.map

@@ -1 +0,0 @@
-{"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,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC3I,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAE5C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -1,63 +0,0 @@
-import { tag, div, h1, h2, h3, h4, h5, h6, p, span, pre, code } from "./components/tag.js";
-import { include } from "./components/include.js";
-import { input, email, password, number, tel, url, search, date, time, datetime, color, range, file, hidden } from "./components/input.js";
-import { select } from "./components/select.js";
-import { radio } from "./components/radio.js";
-import { checkbox, checkboxGroup } from "./components/checkbox.js";
-import { pageState } from "./state/pageState.js";
-import { data } from "./components/data.js";
-import { store } from "./components/store.js";
-import { devtools } from "./devtools/devtools.js";
-import { style } from "./components/style.js";
-import { nav } from "./components/nav.js";
-import { table } from "./components/table.js";
-import { list } from "./components/list.js";
-import { tabs } from "./components/tabs.js";
-import { button, btn } from "./components/button.js";
-import { link, a } from "./components/link.js";
-import { container } from "./components/container.js";
-import { grid } from "./components/grid.js";
-export const jux = {
-    tag,
-    div,
-    h1, h2, h3, h4, h5, h6,
-    p,
-    span,
-    pre,
-    code,
-    include,
-    input,
-    email,
-    password,
-    number,
-    tel,
-    url,
-    search,
-    date,
-    time,
-    datetime,
-    color,
-    range,
-    file,
-    hidden,
-    select,
-    radio,
-    checkbox,
-    checkboxGroup,
-    data,
-    store,
-    devtools,
-    style,
-    nav,
-    table,
-    list,
-    tabs,
-    button,
-    btn,
-    link,
-    a,
-    container,
-    grid
-};
-export { pageState };
-jux.watch = pageState.__watch;

package/dist/lib/state/pageState.d.ts

@@ -1,19 +0,0 @@
-declare class PageState {
-    private _registry;
-    private _proxy;
-    private _nullProxy;
-    static readonly WIRE_EVENTS: readonly ["blur", "focus", "click", "dblclick", "change", "input", "keydown", "keyup", "keypress", "mouseenter", "mouseleave", "mousedown", "mouseup", "submit"];
-    constructor();
-    private _createComponentProxy;
-    private _register;
-    private _wireEvent;
-    private _findElement;
-    private _wireStateFlag;
-    private _unregister;
-    private _notify;
-    private _watch;
-    getProxy(): Record<string, any>;
-}
-export declare const pageState: Record<string, any>;
-export { PageState };
-//# sourceMappingURL=pageState.d.ts.map

package/dist/lib/state/pageState.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pageState.d.ts","sourceRoot":"","sources":["../../../lib/state/pageState.ts"],"names":[],"mappings":"AAeA,cAAM,SAAS;IACX,OAAO,CAAC,SAAS,CAA0C;IAC3D,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,UAAU,CAMf;IAEH,MAAM,CAAC,QAAQ,CAAC,WAAW,mKAQhB;;IA+BX,OAAO,CAAC,qBAAqB;IAsH7B,OAAO,CAAC,SAAS;IAkEjB,OAAO,CAAC,UAAU;IAgClB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,OAAO;IA2Cf,OAAO,CAAC,MAAM;IAmBd,QAAQ,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;CAGlC;AAID,eAAO,MAAM,SAAS,qBAAuB,CAAC;AAE9C,OAAO,EAAE,SAAS,EAAE,CAAC"}