juxscript 1.1.317 → 1.1.319

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

@@ -1 +1 @@
-{"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"}
+{"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,OAqCxD;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,6 +1,6 @@
 import generateId from '../utils/idgen.js';
 import { pageState } from '../state/pageState.js';
-import highlightCode from '../utils/codeHighlight.js';
+import codeparser from '../utils/codeparser.js';
 class Tag {
     constructor(id, tagName, options = {}) {
         this._element = null;
@@ -66,35 +66,16 @@ export function code(id, options = {}) {
     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%)); }
-        `;
+        style.textContent = codeparser.getCSS();
         document.head.appendChild(style);
     }
-    // Highlight content and render as innerHTML
+    // Parse and highlight content
     const raw = options.content || '';
     const trimmed = raw.replace(/^\n+/, '').replace(/\n+$/, '');
-    const highlighted = highlightCode(trimmed);
-    // Create as <pre><code> for proper formatting
+    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,
@@ -104,7 +85,8 @@ export function code(id, options = {}) {
     const el = t.getElement();
     if (el) {
         const codeEl = document.createElement('code');
-        codeEl.innerHTML = highlighted;
+        codeEl.className = 'jux-code-lines';
+        codeEl.innerHTML = linesHtml;
         el.appendChild(codeEl);
     }
     pageState.__register(t);

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

@@ -1 +1 @@
-{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["../../../lib/utils/codeparser.ts"],"names":[],"mappings":"AA2DA,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAwOD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAkG9C;;;;;;;AAED,wBAKE"}
+{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["../../../lib/utils/codeparser.ts"],"names":[],"mappings":"AA2DA,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAuPD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAwD9C;;;;;;;AAED,wBAKE"}

package/dist/lib/utils/codeparser.js

@@ -225,7 +225,16 @@ function tokenizeLine(line) {
                 result += `<span class="${tokenClass}">${escaped}</span>`;
             }
             else {
-                result += escaped;
+                // Check if it's a function call
+                let k = i + word.length;
+                while (k < len && line[k] === ' ')
+                    k++;
+                if (line[k] === '(') {
+                    result += `<span class="token-function">${escaped}</span>`;
+                }
+                else {
+                    result += `<span class="token-identifier">${escaped}</span>`;
+                }
             }
             i += word.length;
             continue;
@@ -237,6 +246,13 @@ function tokenizeLine(line) {
             i += num.length;
             continue;
         }
+        // Dot/spread
+        if (char === '.') {
+            const op = consumeOperator(line, i);
+            result += `<span class="token-operator">${escapeHtml(op)}</span>`;
+            i += op.length;
+            continue;
+        }
         // Operators (multi-char)
         if (isOperator(char)) {
             const op = consumeOperator(line, i);
@@ -306,100 +322,58 @@ export function getSyntaxHighlightCSS() {
     return `
 /* Semantic Code Highlighting */
 .jux-code {
-    font-family: 'Consolas', 'Monaco', monospace;
-    font-size: 14px;
+    font-family: 'Consolas', 'Monaco', 'SF Mono', 'Fira Code', monospace;
+    font-size: 13px;
     line-height: 1.6;
     background: #1e1e1e;
+    color: #d4d4d4;
     border-radius: 8px;
     overflow: hidden;
-    margin: 1rem 0;
+    margin: 0.5rem 0;
     padding: 1rem;
     overflow-x: auto;
 }
-
 .jux-code-lines {
     display: block;
 }
-
 .jux-code-line {
     display: flex;
     align-items: flex-start;
     min-height: 1.6em;
 }
-
 .jux-code-line:hover {
     background-color: rgba(255, 255, 255, 0.03);
 }
-
-.jux-code-line-highlight {
-    background-color: rgba(255, 215, 0, 0.1);
-    border-left: 3px solid #ffd700;
-    padding-left: 0.5rem;
-}
-
 .jux-code-line-number {
     display: inline-block;
-    min-width: 3rem;
+    min-width: 2.5rem;
     text-align: right;
     padding-right: 1rem;
-    color: #858585;
+    color: #555;
     user-select: none;
     flex-shrink: 0;
 }
-
 .jux-code-line-content {
     flex: 1;
     color: #d4d4d4;
     white-space: pre;
-    overflow-x: auto;
-}
-
-.jux-code-no-numbers .jux-code-line-number {
-    display: none;
 }
 
-/* Token colors - Semantic categories */
-.token-control { 
-    color: #c678dd;  /* Purple - control flow (if, for, return) */
-    font-weight: 600; 
-}
-.token-declaration { 
-    color: #61afef;  /* Blue - declarations (const, let, function) */
-    font-weight: 600; 
-}
-.token-operator-keyword { 
-    color: #e06c75;  /* Red - operator keywords (typeof, instanceof) */
-    font-weight: 600; 
-}
-.token-special { 
-    color: #e5c07b;  /* Yellow - special keywords (this, super, async) */
-    font-weight: 600; 
-}
-.token-jux { 
-    color: #56b6c2;  /* Cyan - JUX-specific (jux, state, render) */
-    font-weight: 700; 
-}
-.token-number {
-    color: #d19a66;  /* Orange - numbers */
-}
-.token-string {
-    color: #98c379;  /* Green - strings */
-}
-.token-comment {
-    color: #5c6370;  /* Gray - comments */
-    font-style: italic;
-}
-.token-structural {
-    color: #abb2bf;  /* Light gray - braces, brackets, parens */
-    font-weight: 600;
-}
-.token-delimiter {
-    color: #777;     /* Dark gray - semicolons, commas, colons */
-}
-.token-operator {
-    color: #56b6c2;  /* Cyan - operators (+, -, *, etc.) */
-}
-  `;
+/* Semantic token colors — One Dark inspired */
+.token-control        { color: #c678dd; font-weight: 600; }
+.token-declaration    { color: #61afef; font-weight: 600; }
+.token-operator-keyword { color: #e06c75; font-weight: 600; }
+.token-special        { color: #e5c07b; font-weight: 600; }
+.token-jux            { color: #56b6c2; font-weight: 700; }
+.token-number         { color: #d19a66; }
+.token-string         { color: #98c379; }
+.token-comment        { color: #5c6370; font-style: italic; }
+.token-function       { color: #61afef; }
+.token-identifier     { color: #e06c75; }
+.token-structural     { color: #abb2bf; font-weight: 600; }
+.token-delimiter      { color: #777; }
+.token-operator       { color: #56b6c2; }
+`;
 }
 export default {
     parse: parseCode,

package/package.json

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