juxscript 1.1.54 → 1.1.56

package/lib/utils/codeparser.d.ts

@@ -8,7 +8,7 @@ export interface ParsedLine {
  */
 declare function escapeHtml(text: string): string;
 /**
- * Parse code into lines - Simple keyword + special char highlighting
+ * Parse code into lines with simple syntax highlighting
  */
 export declare function parseCode(code: string, language?: string): ParsedLine[];
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AAkBA,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;AA6BD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAwE9C;;;;;;;AAED,wBAKE"}
+{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AAeA,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;AAuCD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CA8D9C;;;;;;;AAED,wBAKE"}

package/lib/utils/codeparser.js

@@ -1,5 +1,5 @@
 /**
- * Simple keyword lists for highlighting
+ * Simple keyword list
  */
 const KEYWORDS = new Set([
     'async', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue',
@@ -8,12 +8,10 @@ const KEYWORDS = new Set([
     'let', 'new', 'return', 'super', 'switch', 'this', 'throw', 'try',
     'typeof', 'var', 'void', 'while', 'with', 'yield', 'from', 'of',
     'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace',
-    // ✅ JUX-specific
-    'jux', 'state', 'registry', 'render', 'bind', 'sync'
+    'jux', 'state', 'registry', 'render', 'bind', 'sync', ';', '=', '==', '===',
+    '!=', '!==', '+', '-', '*', '/', '%', '++', '--', '&&', '||', '!', '<', '>',
+    '<=', '>=', '=>', '...', '.', ',', '(', ')', '{', '}', '[', ']', ':', '?'
 ]);
-// ✅ Reserved operators and punctuation
-const OPERATORS = ['+', '-', '*', '/', '%', '=', '==', '===', '!=', '!==', '<', '>', '<=', '>=', '!', '&&', '||', '?', ':', '=>'];
-const PUNCTUATION = ['{', '}', '(', ')', '[', ']', ';', ',', '.'];
 /**
  * Escape HTML entities
  */
@@ -26,7 +24,7 @@ function escapeHtml(text) {
         .replace(/'/g, '&#39;');
 }
 /**
- * Parse code into lines - Simple keyword + special char highlighting
+ * Parse code into lines with simple syntax highlighting
  */
 export function parseCode(code, language = 'javascript') {
     const lines = code.split('\n');
@@ -37,25 +35,35 @@ export function parseCode(code, language = 'javascript') {
     }));
 }
 /**
- * Ultra-simple highlighting - Keywords + operators + punctuation
+ * Highlight a single line - token-by-token approach to avoid nested spans
  */
 function highlightLine(line) {
     if (!line.trim())
         return ' ';
-    // Escape everything first
-    let result = escapeHtml(line);
-    // 1. Highlight single-line comments first (so keywords inside comments aren't highlighted)
-    result = result.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
-    // 2. Highlight strings (simple pattern - just quotes, no nested logic)
-    result = result.replace(/(&quot;[^&]*?&quot;|&#39;[^&#]*?&#39;)/g, '<span class="token-string">$1</span>');
-    // 3. Highlight numbers
-    result = result.replace(/\b(\d+)\b/g, '<span class="token-number">$1</span>');
-    // 4. Highlight keywords (whole words only)
-    KEYWORDS.forEach(keyword => {
-        const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-        result = result.replace(regex, '<span class="token-keyword">$1</span>');
+    // ✅ Split line into tokens (words, operators, whitespace)
+    const tokens = line.match(/\w+|[^\w\s]|\s+/g) || [];
+    let result = '';
+    tokens.forEach(token => {
+        // Skip empty tokens
+        if (!token)
+            return;
+        // Whitespace - preserve as-is
+        if (/^\s+$/.test(token)) {
+            result += token;
+            return;
+        }
+        // Escape the token
+        const escaped = escapeHtml(token);
+        // Keywords
+        if (KEYWORDS.has(token)) {
+            result += `<span class="token-keyword">${escaped}</span>`;
+        }
+        // Everything else - plain text
+        else {
+            result += escaped;
+        }
     });
-    return result;
+    return result || ' ';
 }
 /**
  * Render a parsed line
@@ -122,20 +130,10 @@ export function getSyntaxHighlightCSS() {
     display: none;
 }
 
-/* Token colors */
+/* Token colors - JUST KEYWORDS */
 .token-keyword { 
     color: #c678dd; 
     font-weight: 600; 
-}
-.token-string { 
-    color: #98c379; 
-}
-.token-number { 
-    color: #d19a66; 
-}
-.token-comment { 
-    color: #5c6370; 
-    font-style: italic; 
 }
   `;
 }

package/lib/utils/codeparser.ts

@@ -1,5 +1,5 @@
 /**
- * Simple keyword lists for highlighting
+ * Simple keyword list
  */
 const KEYWORDS = new Set([
     'async', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue',
@@ -8,14 +8,11 @@ const KEYWORDS = new Set([
     'let', 'new', 'return', 'super', 'switch', 'this', 'throw', 'try',
     'typeof', 'var', 'void', 'while', 'with', 'yield', 'from', 'of',
     'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace',
-    // ✅ JUX-specific
-    'jux', 'state', 'registry', 'render', 'bind', 'sync'
+    'jux', 'state', 'registry', 'render', 'bind', 'sync', ';', '=', '==', '===',
+    '!=', '!==', '+', '-', '*', '/', '%', '++', '--', '&&', '||', '!', '<', '>',
+    '<=', '>=', '=>', '...', '.', ',', '(', ')', '{', '}', '[', ']', ':', '?'
 ]);
 
-// ✅ Reserved operators and punctuation
-const OPERATORS = ['+', '-', '*', '/', '%', '=', '==', '===', '!=', '!==', '<', '>', '<=', '>=', '!', '&&', '||', '?', ':', '=>'];
-const PUNCTUATION = ['{', '}', '(', ')', '[', ']', ';', ',', '.'];
-
 export interface ParsedLine {
     lineNumber: number;
     html: string;
@@ -35,7 +32,7 @@ function escapeHtml(text: string): string {
 }
 
 /**
- * Parse code into lines - Simple keyword + special char highlighting
+ * Parse code into lines with simple syntax highlighting
  */
 export function parseCode(code: string, language: string = 'javascript'): ParsedLine[] {
     const lines = code.split('\n');
@@ -48,30 +45,40 @@ export function parseCode(code: string, language: string = 'javascript'): Parsed
 }
 
 /**
- * Ultra-simple highlighting - Keywords + operators + punctuation
+ * Highlight a single line - token-by-token approach to avoid nested spans
  */
 function highlightLine(line: string): string {
     if (!line.trim()) return ' ';
 
-    // Escape everything first
-    let result = escapeHtml(line);
+    // ✅ Split line into tokens (words, operators, whitespace)
+    const tokens = line.match(/\w+|[^\w\s]|\s+/g) || [];
+
+    let result = '';
 
-    // 1. Highlight single-line comments first (so keywords inside comments aren't highlighted)
-    result = result.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
+    tokens.forEach(token => {
+        // Skip empty tokens
+        if (!token) return;
 
-    // 2. Highlight strings (simple pattern - just quotes, no nested logic)
-    result = result.replace(/(&quot;[^&]*?&quot;|&#39;[^&#]*?&#39;)/g, '<span class="token-string">$1</span>');
+        // Whitespace - preserve as-is
+        if (/^\s+$/.test(token)) {
+            result += token;
+            return;
+        }
 
-    // 3. Highlight numbers
-    result = result.replace(/\b(\d+)\b/g, '<span class="token-number">$1</span>');
+        // Escape the token
+        const escaped = escapeHtml(token);
 
-    // 4. Highlight keywords (whole words only)
-    KEYWORDS.forEach(keyword => {
-        const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-        result = result.replace(regex, '<span class="token-keyword">$1</span>');
+        // Keywords
+        if (KEYWORDS.has(token)) {
+            result += `<span class="token-keyword">${escaped}</span>`;
+        }
+        // Everything else - plain text
+        else {
+            result += escaped;
+        }
     });
 
-    return result;
+    return result || ' ';
 }
 
 /**
@@ -140,20 +147,10 @@ export function getSyntaxHighlightCSS(): string {
     display: none;
 }
 
-/* Token colors */
+/* Token colors - JUST KEYWORDS */
 .token-keyword { 
     color: #c678dd; 
     font-weight: 600; 
-}
-.token-string { 
-    color: #98c379; 
-}
-.token-number { 
-    color: #d19a66; 
-}
-.token-comment { 
-    color: #5c6370; 
-    font-style: italic; 
 }
   `;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "juxscript",
-  "version": "1.1.54",
+  "version": "1.1.56",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",