juxscript 1.1.51 → 1.1.53

package/lib/utils/codeparser.d.ts

@@ -8,20 +8,17 @@ export interface ParsedLine {
  */
 declare function escapeHtml(text: string): string;
 /**
- * Parse code into lines with simple syntax highlighting
+ * Parse code into lines - Simple keyword + special char highlighting
  */
 export declare function parseCode(code: string, language?: string): ParsedLine[];
 /**
- * Render a parsed line (just returns the pre-generated HTML)
+ * Render a parsed line
  */
 export declare function renderLineWithTokens(parsedLine: ParsedLine): string;
 /**
  * Generate CSS for syntax highlighting
  */
 export declare function getSyntaxHighlightCSS(): string;
-/**
- * Main parser export
- */
 declare const _default: {
     parse: typeof parseCode;
     renderLine: typeof renderLineWithTokens;

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

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

package/lib/utils/codeparser.js

@@ -7,8 +7,13 @@ const KEYWORDS = new Set([
     'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof',
     'let', 'new', 'return', 'super', 'switch', 'this', 'throw', 'try',
     'typeof', 'var', 'void', 'while', 'with', 'yield', 'from', 'of',
-    'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace'
+    'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace',
+    // ✅ JUX-specific
+    'jux', 'state', 'registry', 'render', 'bind', 'sync'
 ]);
+// ✅ Reserved operators and punctuation
+const OPERATORS = ['+', '-', '*', '/', '%', '=', '==', '===', '!=', '!==', '<', '>', '<=', '>=', '!', '&&', '||', '?', ':', '=>'];
+const PUNCTUATION = ['{', '}', '(', ')', '[', ']', ';', ',', '.'];
 /**
  * Escape HTML entities
  */
@@ -21,7 +26,7 @@ function escapeHtml(text) {
         .replace(/'/g, '&#39;');
 }
 /**
- * Parse code into lines with simple syntax highlighting
+ * Parse code into lines - Simple keyword + special char highlighting
  */
 export function parseCode(code, language = 'javascript') {
     const lines = code.split('\n');
@@ -32,34 +37,35 @@ export function parseCode(code, language = 'javascript') {
     }));
 }
 /**
- * Highlight a single line of code
+ * Ultra-simple highlighting - Keywords + operators + punctuation
  */
 function highlightLine(line) {
     if (!line.trim())
         return ' ';
-    // Escape the raw line first
-    let escaped = escapeHtml(line);
-    // Now add spans (on already-escaped text)
-    // 1. Comments
-    escaped = escaped.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
-    escaped = escaped.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
-    // 2. Strings (already escaped, so look for &quot; etc)
-    escaped = escaped.replace(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, '<span class="token-string">$1</span>');
-    // 3. Numbers
-    escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
-    // 4. Keywords (only whole words)
+    // Escape everything first
+    let result = escapeHtml(line);
+    // 1. Highlight keywords (whole words only)
     KEYWORDS.forEach(keyword => {
         const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-        escaped = escaped.replace(regex, '<span class="token-keyword">$1</span>');
+        result = result.replace(regex, '<span class="token-keyword">$1</span>');
     });
-    // 5. Braces, brackets, parentheses (these are plain text, not escaped)
-    escaped = escaped.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
-    // 6. Operators
-    escaped = escaped.replace(/([+\-*/%=&lt;&gt;!&|^~?:])/g, '<span class="token-operator">$1</span>');
-    return escaped || ' ';
+    // 2. Highlight operators (multi-char first, then single-char)
+    const sortedOps = [...OPERATORS].sort((a, b) => b.length - a.length);
+    sortedOps.forEach(op => {
+        const escaped = op.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(escaped, 'g');
+        result = result.replace(regex, `<span class="token-operator">${escapeHtml(op)}</span>`);
+    });
+    // 3. Highlight punctuation
+    PUNCTUATION.forEach(punct => {
+        const escaped = punct.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(escaped, 'g');
+        result = result.replace(regex, `<span class="token-punctuation">${escapeHtml(punct)}</span>`);
+    });
+    return result;
 }
 /**
- * Render a parsed line (just returns the pre-generated HTML)
+ * Render a parsed line
  */
 export function renderLineWithTokens(parsedLine) {
     return parsedLine.html;
@@ -90,11 +96,10 @@ export function getSyntaxHighlightCSS() {
     display: flex;
     align-items: flex-start;
     min-height: 1.6em;
-    transition: background-color 0.2s;
 }
 
 .jux-code-line:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(255, 255, 255, 0.03);
 }
 
 .jux-code-line-highlight {
@@ -125,17 +130,19 @@ export function getSyntaxHighlightCSS() {
 }
 
 /* Token colors */
-.token-keyword { color: #c678dd; font-weight: 600; }
-.token-string { color: #98c379; }
-.token-number { color: #d19a66; }
-.token-comment { color: #5c6370; font-style: italic; }
-.token-punctuation { color: #abb2bf; }
-.token-operator { color: #56b6c2; }
+.token-keyword { 
+    color: #c678dd; 
+    font-weight: 600; 
+}
+.token-operator { 
+    color: #56b6c2;
+    font-weight: 500;
+}
+.token-punctuation { 
+    color: #abb2bf;
+}
   `;
 }
-/**
- * Main parser export
- */
 export default {
     parse: parseCode,
     renderLine: renderLineWithTokens,

package/lib/utils/codeparser.ts

@@ -7,9 +7,15 @@ const KEYWORDS = new Set([
     'finally', 'for', 'function', 'if', 'import', 'in', 'instanceof',
     'let', 'new', 'return', 'super', 'switch', 'this', 'throw', 'try',
     'typeof', 'var', 'void', 'while', 'with', 'yield', 'from', 'of',
-    'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace'
+    'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace',
+    // ✅ JUX-specific
+    'jux', 'state', 'registry', 'render', 'bind', 'sync'
 ]);
 
+// ✅ Reserved operators and punctuation
+const OPERATORS = ['+', '-', '*', '/', '%', '=', '==', '===', '!=', '!==', '<', '>', '<=', '>=', '!', '&&', '||', '?', ':', '=>'];
+const PUNCTUATION = ['{', '}', '(', ')', '[', ']', ';', ',', '.'];
+
 export interface ParsedLine {
     lineNumber: number;
     html: string;
@@ -29,7 +35,7 @@ function escapeHtml(text: string): string {
 }
 
 /**
- * Parse code into lines with simple syntax highlighting
+ * Parse code into lines - Simple keyword + special char highlighting
  */
 export function parseCode(code: string, language: string = 'javascript'): ParsedLine[] {
     const lines = code.split('\n');
@@ -42,43 +48,40 @@ export function parseCode(code: string, language: string = 'javascript'): Parsed
 }
 
 /**
- * Highlight a single line of code
+ * Ultra-simple highlighting - Keywords + operators + punctuation
  */
 function highlightLine(line: string): string {
     if (!line.trim()) return ' ';
 
-    // Escape the raw line first
-    let escaped = escapeHtml(line);
-
-    // Now add spans (on already-escaped text)
-
-    // 1. Comments
-    escaped = escaped.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
-    escaped = escaped.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
+    // Escape everything first
+    let result = escapeHtml(line);
 
-    // 2. Strings (already escaped, so look for &quot; etc)
-    escaped = escaped.replace(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, '<span class="token-string">$1</span>');
-
-    // 3. Numbers
-    escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
-
-    // 4. Keywords (only whole words)
+    // 1. Highlight keywords (whole words only)
     KEYWORDS.forEach(keyword => {
         const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-        escaped = escaped.replace(regex, '<span class="token-keyword">$1</span>');
+        result = result.replace(regex, '<span class="token-keyword">$1</span>');
     });
 
-    // 5. Braces, brackets, parentheses (these are plain text, not escaped)
-    escaped = escaped.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
+    // 2. Highlight operators (multi-char first, then single-char)
+    const sortedOps = [...OPERATORS].sort((a, b) => b.length - a.length);
+    sortedOps.forEach(op => {
+        const escaped = op.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(escaped, 'g');
+        result = result.replace(regex, `<span class="token-operator">${escapeHtml(op)}</span>`);
+    });
 
-    // 6. Operators
-    escaped = escaped.replace(/([+\-*/%=&lt;&gt;!&|^~?:])/g, '<span class="token-operator">$1</span>');
+    // 3. Highlight punctuation
+    PUNCTUATION.forEach(punct => {
+        const escaped = punct.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const regex = new RegExp(escaped, 'g');
+        result = result.replace(regex, `<span class="token-punctuation">${escapeHtml(punct)}</span>`);
+    });
 
-    return escaped || ' ';
+    return result;
 }
 
 /**
- * Render a parsed line (just returns the pre-generated HTML)
+ * Render a parsed line
  */
 export function renderLineWithTokens(parsedLine: ParsedLine): string {
     return parsedLine.html;
@@ -110,11 +113,10 @@ export function getSyntaxHighlightCSS(): string {
     display: flex;
     align-items: flex-start;
     min-height: 1.6em;
-    transition: background-color 0.2s;
 }
 
 .jux-code-line:hover {
-    background-color: rgba(255, 255, 255, 0.05);
+    background-color: rgba(255, 255, 255, 0.03);
 }
 
 .jux-code-line-highlight {
@@ -145,18 +147,20 @@ export function getSyntaxHighlightCSS(): string {
 }
 
 /* Token colors */
-.token-keyword { color: #c678dd; font-weight: 600; }
-.token-string { color: #98c379; }
-.token-number { color: #d19a66; }
-.token-comment { color: #5c6370; font-style: italic; }
-.token-punctuation { color: #abb2bf; }
-.token-operator { color: #56b6c2; }
+.token-keyword { 
+    color: #c678dd; 
+    font-weight: 600; 
+}
+.token-operator { 
+    color: #56b6c2;
+    font-weight: 500;
+}
+.token-punctuation { 
+    color: #abb2bf;
+}
   `;
 }
 
-/**
- * Main parser export
- */
 export default {
     parse: parseCode,
     renderLine: renderLineWithTokens,

package/package.json

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