juxscript 1.1.315 → 1.1.317

package/dist/lib/components/grid.js

@@ -21,7 +21,7 @@ class Grid {
         // Resolve columns
         const cols = this.opts.cols;
         let templateCols;
-        if (Array.isArray(cols)) {
+        if (cols && typeof cols === 'object' && Array.isArray(cols)) {
             this._columns = cols.map(c => ({
                 name: c.name,
                 width: c.width || '1fr'
@@ -29,7 +29,7 @@ class Grid {
             templateCols = this._columns.map(c => c.width).join(' ');
         }
         else {
-            const count = cols || 2;
+            const count = typeof cols === 'number' ? cols : 2;
             templateCols = `repeat(${count}, 1fr)`;
         }
         const d = DENSITY_MAP[this.opts.density] || DENSITY_MAP.normal;

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

@@ -1 +1 @@
-{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAGA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAG1B,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE/B,UAAU,IAAI,WAAW,GAAG,IAAI;IAEhC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CAuBvC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAKxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AACzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../lib/components/tag.ts"],"names":[],"mappings":"AAIA,UAAU,UAAU;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,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;AAED,cAAM,GAAG;IACL,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,QAAQ,CAA4B;gBAEhC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe;IAOjE,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC5B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAC1B,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAG1B,QAAQ,IAAI,MAAM;IAClB,UAAU,IAAI,MAAM;IACpB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC7B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAC3B,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAE/B,UAAU,IAAI,WAAW,GAAG,IAAI;IAEhC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,GAAG,WAAW;CAuBvC;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAKxE;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAsC;AAC/F,wBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAmC;AAEzF,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAoDxD;AAED,wBAAgB,GAAG,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAqC;AAC7F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAC3F,wBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,UAAe,OAAoC;AAE3F,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC;AAC3B,eAAe,GAAG,CAAC"}

package/dist/lib/components/tag.js

@@ -1,5 +1,6 @@
 import generateId from '../utils/idgen.js';
 import { pageState } from '../state/pageState.js';
+import highlightCode from '../utils/codeHighlight.js';
 class Tag {
     constructor(id, tagName, options = {}) {
         this._element = null;
@@ -60,7 +61,55 @@ export function tag(id, tagName, options = {}) {
 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 = {}) { return tag(id, 'code', 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 = `
+            .jux-code {
+                display: block;
+                background: hsl(var(--muted, 0 0% 96%));
+                border: 1px solid hsl(var(--border, 0 0% 89.8%));
+                border-radius: var(--radius, 6px);
+                padding: 12px 16px;
+                font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
+                font-size: 13px;
+                line-height: 1.5;
+                overflow-x: auto;
+                white-space: pre;
+                tab-size: 2;
+            }
+            .jux-hl-keyword { color: hsl(var(--primary, 262 83% 58%)); font-weight: 600; }
+            .jux-hl-string  { color: hsl(142 71% 45%); }
+            .jux-hl-number  { color: hsl(25 95% 53%); }
+            .jux-hl-comment { color: hsl(var(--muted-foreground, 0 0% 45%)); font-style: italic; }
+            .jux-hl-fn      { color: hsl(221 83% 53%); }
+            .jux-hl-punct   { color: hsl(var(--muted-foreground, 0 0% 45%)); }
+            .jux-hl-ident   { color: hsl(var(--foreground, 0 0% 9%)); }
+        `;
+        document.head.appendChild(style);
+    }
+    // Highlight content and render as innerHTML
+    const raw = options.content || '';
+    const trimmed = raw.replace(/^\n+/, '').replace(/\n+$/, '');
+    const highlighted = highlightCode(trimmed);
+    // Create as <pre><code> for proper formatting
+    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.innerHTML = highlighted;
+        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); }

package/dist/lib/utils/codeHighlight.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Lightweight syntax highlighter for JS/TS code blocks.
+ * Returns HTML string with <span class="jux-hl-xxx"> wrappers.
+ */
+export declare function highlightCode(code: string): string;
+export default highlightCode;
+//# sourceMappingURL=codeHighlight.d.ts.map

package/dist/lib/utils/codeHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"codeHighlight.d.ts","sourceRoot":"","sources":["../../../lib/utils/codeHighlight.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAcH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAmFlD;AAED,eAAe,aAAa,CAAC"}

package/dist/lib/utils/codeHighlight.js

@@ -0,0 +1,105 @@
+/**
+ * Lightweight syntax highlighter for JS/TS code blocks.
+ * Returns HTML string with <span class="jux-hl-xxx"> wrappers.
+ */
+const KEYWORDS = new Set([
+    'const', 'let', 'var', 'function', 'return', 'if', 'else', 'for', 'while', 'do',
+    'switch', 'case', 'break', 'continue', 'new', 'delete', 'typeof', 'instanceof',
+    'import', 'export', 'from', 'default', 'class', 'extends', 'super', 'this',
+    'try', 'catch', 'finally', 'throw', 'async', 'await', 'yield',
+    'true', 'false', 'null', 'undefined', 'void', 'of', 'in'
+]);
+function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+export function highlightCode(code) {
+    const out = [];
+    let i = 0;
+    const len = code.length;
+    while (i < len) {
+        const ch = code[i];
+        // Single-line comment
+        if (ch === '/' && code[i + 1] === '/') {
+            let end = code.indexOf('\n', i);
+            if (end === -1)
+                end = len;
+            out.push(`<span class="jux-hl-comment">${escapeHtml(code.slice(i, end))}</span>`);
+            i = end;
+            continue;
+        }
+        // Multi-line comment
+        if (ch === '/' && code[i + 1] === '*') {
+            let end = code.indexOf('*/', i + 2);
+            if (end === -1)
+                end = len;
+            else
+                end += 2;
+            out.push(`<span class="jux-hl-comment">${escapeHtml(code.slice(i, end))}</span>`);
+            i = end;
+            continue;
+        }
+        // Strings (single, double, backtick)
+        if (ch === '"' || ch === "'" || ch === '`') {
+            const quote = ch;
+            let j = i + 1;
+            while (j < len) {
+                if (code[j] === '\\') {
+                    j += 2;
+                    continue;
+                }
+                if (code[j] === quote) {
+                    j++;
+                    break;
+                }
+                j++;
+            }
+            out.push(`<span class="jux-hl-string">${escapeHtml(code.slice(i, j))}</span>`);
+            i = j;
+            continue;
+        }
+        // Numbers
+        if (/[0-9]/.test(ch) && (i === 0 || !/[a-zA-Z_$]/.test(code[i - 1]))) {
+            let j = i;
+            while (j < len && /[0-9a-fA-FxXoObB._]/.test(code[j]))
+                j++;
+            out.push(`<span class="jux-hl-number">${escapeHtml(code.slice(i, j))}</span>`);
+            i = j;
+            continue;
+        }
+        // Identifiers / keywords
+        if (/[a-zA-Z_$]/.test(ch)) {
+            let j = i;
+            while (j < len && /[a-zA-Z0-9_$]/.test(code[j]))
+                j++;
+            const word = code.slice(i, j);
+            if (KEYWORDS.has(word)) {
+                out.push(`<span class="jux-hl-keyword">${escapeHtml(word)}</span>`);
+            }
+            else {
+                // Check if it's a function call
+                let k = j;
+                while (k < len && code[k] === ' ')
+                    k++;
+                if (code[k] === '(') {
+                    out.push(`<span class="jux-hl-fn">${escapeHtml(word)}</span>`);
+                }
+                else {
+                    out.push(`<span class="jux-hl-ident">${escapeHtml(word)}</span>`);
+                }
+            }
+            i = j;
+            continue;
+        }
+        // Punctuation / operators
+        if (/[{}()\[\];,.:?!<>=+\-*/%&|^~@#]/.test(ch)) {
+            out.push(`<span class="jux-hl-punct">${escapeHtml(ch)}</span>`);
+            i++;
+            continue;
+        }
+        // Whitespace & everything else
+        out.push(escapeHtml(ch));
+        i++;
+    }
+    return out.join('');
+}
+export default highlightCode;

package/package.json

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