juxscript 1.1.296 → 1.1.297

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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,181 @@
+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

@@ -7,6 +7,7 @@ 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";
 export declare const jux: {
     tag: typeof tag;
     div: typeof div;
@@ -27,6 +28,7 @@ export declare const jux: {
     checkboxGroup: typeof checkboxGroup;
     data: typeof data;
     store: typeof store;
+    devtools: typeof devtools;
 };
 export { pageState };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAE9C,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;CAef,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACnE,OAAO,EAAE,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;AAElD,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;CAgBf,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/lib/index.js

@@ -7,6 +7,7 @@ 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";
 export const jux = {
     tag,
     div,
@@ -21,7 +22,8 @@ export const jux = {
     checkbox,
     checkboxGroup,
     data,
-    store
+    store,
+    devtools
 };
 export { pageState };
 jux.watch = pageState.__watch;

package/package.json

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