juxscript 1.1.47 → 1.1.49

package/lib/components/code.js

@@ -1,5 +1,5 @@
 import { BaseComponent } from './base/BaseComponent.js';
-import { codeParser } from '../utils/codeparser.js'; // ✅ Default import
+import { parseCode, renderLineWithTokens, getSyntaxHighlightCSS } from '../utils/codeparser.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = [];
@@ -68,7 +68,7 @@ export class Code extends BaseComponent {
      * Parse code content into individual lines with tokens
      */
     _parseLines() {
-        return codeParser.parse(this.state.content, this.state.language);
+        return parseCode(this.state.content, this.state.language);
     }
     /**
      * Rebuild all line elements
@@ -81,7 +81,7 @@ export class Code extends BaseComponent {
             return;
         codeEl.innerHTML = '';
         const parsedLines = this._parseLines();
-        const { startLine, highlightLines, showLineNumbers } = this.state;
+        const { startLine, highlightLines } = this.state;
         parsedLines.forEach((parsedLine, index) => {
             const lineNumber = startLine + index;
             const isHighlighted = highlightLines.includes(lineNumber);
@@ -109,7 +109,7 @@ export class Code extends BaseComponent {
         // Line content with syntax highlighting
         const lineCode = document.createElement('span');
         lineCode.className = 'jux-code-line-content';
-        lineCode.innerHTML = codeParser.renderLine(parsedLine);
+        lineCode.innerHTML = renderLineWithTokens(parsedLine);
         lineEl.appendChild(lineCode);
         return lineEl;
     }
@@ -135,7 +135,7 @@ export class Code extends BaseComponent {
         if (!Code._syntaxCSSInjected) {
             const style = document.createElement('style');
             style.id = 'jux-code-syntax-css';
-            style.textContent = codeParser.getCSS();
+            style.textContent = getSyntaxHighlightCSS();
             document.head.appendChild(style);
             Code._syntaxCSSInjected = true;
         }

package/lib/components/code.ts

@@ -1,5 +1,5 @@
 import { BaseComponent } from './base/BaseComponent.js';
-import { codeParser } from '../utils/codeparser.js'; // ✅ Default import
+import { parseCode, renderLineWithTokens, getSyntaxHighlightCSS } from '../utils/codeparser.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -103,8 +103,8 @@ export class Code extends BaseComponent<CodeState> {
   /**
    * Parse code content into individual lines with tokens
    */
-  private _parseLines(): ReturnType<typeof codeParser.parse> {
-    return codeParser.parse(this.state.content, this.state.language);
+  private _parseLines(): ReturnType<typeof parseCode> {
+    return parseCode(this.state.content, this.state.language);
   }
 
   /**
@@ -119,7 +119,7 @@ export class Code extends BaseComponent<CodeState> {
     codeEl.innerHTML = '';
 
     const parsedLines = this._parseLines();
-    const { startLine, highlightLines, showLineNumbers } = this.state;
+    const { startLine, highlightLines } = this.state;
 
     parsedLines.forEach((parsedLine, index) => {
       const lineNumber = startLine + index;
@@ -133,7 +133,7 @@ export class Code extends BaseComponent<CodeState> {
   /**
    * Create a single line element with parsed tokens
    */
-  private _createLineElement(parsedLine: ReturnType<typeof codeParser.parse>[0], lineNumber: number, highlighted: boolean): HTMLElement {
+  private _createLineElement(parsedLine: ReturnType<typeof parseCode>[0], lineNumber: number, highlighted: boolean): HTMLElement {
     const lineEl = document.createElement('div');
     lineEl.className = 'jux-code-line';
     lineEl.setAttribute('data-line', String(lineNumber));
@@ -153,7 +153,7 @@ export class Code extends BaseComponent<CodeState> {
     // Line content with syntax highlighting
     const lineCode = document.createElement('span');
     lineCode.className = 'jux-code-line-content';
-    lineCode.innerHTML = codeParser.renderLine(parsedLine);
+    lineCode.innerHTML = renderLineWithTokens(parsedLine);
     lineEl.appendChild(lineCode);
 
     return lineEl;
@@ -184,7 +184,7 @@ export class Code extends BaseComponent<CodeState> {
     if (!Code._syntaxCSSInjected) {
       const style = document.createElement('style');
       style.id = 'jux-code-syntax-css';
-      style.textContent = codeParser.getCSS();
+      style.textContent = getSyntaxHighlightCSS();
       document.head.appendChild(style);
       Code._syntaxCSSInjected = true;
     }

package/lib/utils/codeparser.d.ts

@@ -1,69 +1,32 @@
-/**
- * Token type to CSS class mapping
- */
-export declare const TOKEN_CLASS_MAP: Record<string, string>;
-export interface ParsedToken {
-    type: string;
-    value: string;
-    start: number;
-    end: number;
-    line: number;
-    column: number;
-    className: string;
-}
 export interface ParsedLine {
     lineNumber: number;
-    tokens: ParsedToken[];
+    html: string;
     raw: string;
 }
-export declare class CodeParser {
-    private static _cache;
-    /**
-     * Parse code with caching
-     */
-    static parse(code: string, language?: string): ParsedLine[];
-    private static _parseCode;
-    /**
-     * ✅ NEW: Strip TypeScript type annotations for parsing
-     * This is a simple regex-based approach - not perfect but works for most cases
-     */
-    private static _stripTypeScriptTypes;
-    /**
-     * Clear cache (useful for development)
-     */
-    static clearCache(): void;
-}
-/**
- * Get CSS class for a token
- */
-export declare function getTokenClass(token: any): string;
 /**
- * Check if a word is a JavaScript keyword
+ * Parse code into lines with simple syntax highlighting
  */
-export declare function isKeyword(word: string): boolean;
+export declare function parseCode(code: string, language?: string): ParsedLine[];
 /**
- * Render a parsed line as HTML with spans
+ * Render a parsed line (just returns the pre-generated HTML)
  */
 export declare function renderLineWithTokens(parsedLine: ParsedLine): string;
 /**
  * Escape HTML entities
  */
-export declare function escapeHtml(text: string): string;
+declare function escapeHtml(text: string): string;
 /**
  * Generate CSS for syntax highlighting
  */
 export declare function getSyntaxHighlightCSS(): string;
 /**
- * Main parser export with utilities
+ * Main parser export
  */
-export declare const codeParser: {
-    parse: typeof CodeParser.parse;
+declare const _default: {
+    parse: typeof parseCode;
     renderLine: typeof renderLineWithTokens;
     getCSS: typeof getSyntaxHighlightCSS;
-    getTokenClass: typeof getTokenClass;
-    isKeyword: typeof isKeyword;
     escapeHtml: typeof escapeHtml;
-    TOKEN_CLASS_MAP: Record<string, string>;
 };
-export default CodeParser;
+export default _default;
 //# sourceMappingURL=codeparser.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAqClD,CAAC;AAEF,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,GAAG,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,UAAU;IACnB,OAAO,CAAC,MAAM,CAAC,MAAM,CAAmC;IAExD;;OAEG;IACH,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE;IAYzE,OAAO,CAAC,MAAM,CAAC,UAAU;IA6FzB;;;OAGG;IACH,OAAO,CAAC,MAAM,CAAC,qBAAqB;IAcpC;;OAEG;IACH,MAAM,CAAC,UAAU,IAAI,IAAI;CAG5B;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAUhD;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAS/C;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAiCnE;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAO/C;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAmB9C;AAID;;GAEG;AACH,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"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,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAqCD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAsE9C;AAED;;GAEG;;;;;;;AACH,wBAKE"}

package/lib/utils/codeparser.js

@@ -1,220 +1,62 @@
-import * as acorn from 'acorn';
 /**
- * Token type to CSS class mapping
+ * Simple keyword lists for highlighting
  */
-export const TOKEN_CLASS_MAP = {
-    // Keywords
-    'Keyword': 'token-keyword',
-    'this': 'token-keyword',
-    'const': 'token-keyword',
-    'let': 'token-keyword',
-    'var': 'token-keyword',
-    'function': 'token-keyword',
-    'return': 'token-keyword',
-    'if': 'token-keyword',
-    'else': 'token-keyword',
-    'for': 'token-keyword',
-    'while': 'token-keyword',
-    'class': 'token-keyword',
-    'import': 'token-keyword',
-    'export': 'token-keyword',
-    'from': 'token-keyword',
-    'async': 'token-keyword',
-    'await': 'token-keyword',
-    // Literals
-    'String': 'token-string',
-    'Numeric': 'token-number',
-    'Boolean': 'token-boolean',
-    'Null': 'token-null',
-    'RegExp': 'token-regex',
-    // Identifiers
-    'Identifier': 'token-identifier',
-    'PrivateIdentifier': 'token-identifier',
-    // Operators
-    'Punctuator': 'token-punctuation',
-    // Comments
-    'LineComment': 'token-comment',
-    'BlockComment': 'token-comment',
-};
-export class CodeParser {
-    /**
-     * Parse code with caching
-     */
-    static parse(code, language = 'javascript') {
-        const cacheKey = `${language}:${code}`;
-        if (this._cache.has(cacheKey)) {
-            return this._cache.get(cacheKey);
-        }
-        const result = this._parseCode(code, language);
-        this._cache.set(cacheKey, result);
-        return result;
-    }
-    static _parseCode(code, language) {
-        const lines = [];
-        const codeLines = code.split('\n');
-        // ✅ Skip parsing for non-JS languages
-        if (!['javascript', 'typescript', 'js', 'ts', 'jsx', 'tsx'].includes(language.toLowerCase())) {
-            codeLines.forEach((lineText, index) => {
-                lines.push({
-                    lineNumber: index + 1,
-                    tokens: [],
-                    raw: lineText
-                });
-            });
-            return lines;
-        }
-        // ✅ Strip TypeScript types for parsing
-        const cleanedCode = language.toLowerCase().includes('typescript') || language.toLowerCase().includes('ts')
-            ? this._stripTypeScriptTypes(code)
-            : code;
-        try {
-            // Parse with Acorn (supports ES2020+)
-            const tokens = [];
-            acorn.parse(cleanedCode, {
-                ecmaVersion: 2022,
-                sourceType: 'module',
-                locations: true,
-                ranges: true,
-                onToken: tokens,
-                onComment: (block, text, start, end, startLoc, endLoc) => {
-                    tokens.push({
-                        type: block ? 'BlockComment' : 'LineComment',
-                        value: text,
-                        start,
-                        end,
-                        loc: { start: startLoc, end: endLoc }
-                    });
-                }
-            });
-            // Sort tokens by position
-            tokens.sort((a, b) => a.start - b.start);
-            // Group tokens by line
-            const tokensByLine = new Map();
-            tokens.forEach(token => {
-                const line = token.loc.start.line;
-                const parsedToken = {
-                    type: token.type.label || token.type,
-                    value: token.value !== undefined ? String(token.value) : cleanedCode.substring(token.start, token.end),
-                    start: token.start,
-                    end: token.end,
-                    line: token.loc.start.line,
-                    column: token.loc.start.column,
-                    className: getTokenClass(token)
-                };
-                if (!tokensByLine.has(line)) {
-                    tokensByLine.set(line, []);
-                }
-                tokensByLine.get(line).push(parsedToken);
-            });
-            // ✅ Build lines with tokens (use ORIGINAL code, not cleaned)
-            codeLines.forEach((lineText, index) => {
-                const lineNumber = index + 1;
-                const lineTokens = tokensByLine.get(lineNumber) || [];
-                lines.push({
-                    lineNumber,
-                    tokens: lineTokens,
-                    raw: lineText // Use original line with types
-                });
-            });
-        }
-        catch (error) {
-            // Fallback: if parsing fails, return plain lines
-            console.warn('[CodeParser] Parse failed, using plain text:', error);
-            codeLines.forEach((lineText, index) => {
-                lines.push({
-                    lineNumber: index + 1,
-                    tokens: [],
-                    raw: lineText
-                });
-            });
-        }
-        return lines;
-    }
-    /**
-     * ✅ NEW: Strip TypeScript type annotations for parsing
-     * This is a simple regex-based approach - not perfect but works for most cases
-     */
-    static _stripTypeScriptTypes(code) {
-        return code
-            // Remove type annotations from parameters: (name: string) -> (name)
-            .replace(/(\w+)\s*:\s*[\w<>\[\]|&]+/g, '$1')
-            // Remove return type annotations: ): string -> )
-            .replace(/\)\s*:\s*[\w<>\[\]|&]+/g, ')')
-            // Remove interface/type declarations (keep as comments to preserve line numbers)
-            .replace(/^(\s*)(interface|type)\s+\w+.*$/gm, '$1// $2 declaration')
-            // Remove as type assertions: value as string -> value
-            .replace(/\s+as\s+[\w<>\[\]|&]+/g, '')
-            // Remove angle bracket generics: Array<string> -> Array
-            .replace(/<[\w<>\[\]|&,\s]+>/g, '');
-    }
-    /**
-     * Clear cache (useful for development)
-     */
-    static clearCache() {
-        this._cache.clear();
-    }
-}
-CodeParser._cache = new Map();
+const KEYWORDS = new Set([
+    'async', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue',
+    'debugger', 'default', 'delete', 'do', 'else', 'export', 'extends',
+    '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'
+]);
 /**
- * Get CSS class for a token
+ * Parse code into lines with simple syntax highlighting
  */
-export function getTokenClass(token) {
-    const type = token.type.label || token.type;
-    // Check if it's a keyword
-    if (type === 'name' && token.value && isKeyword(token.value)) {
-        return TOKEN_CLASS_MAP[token.value] || TOKEN_CLASS_MAP['Keyword'];
-    }
-    // Map type to class
-    return TOKEN_CLASS_MAP[type] || 'token-default';
+export function parseCode(code, language = 'javascript') {
+    const lines = code.split('\n');
+    return lines.map((line, index) => ({
+        lineNumber: index + 1,
+        html: highlightLine(line),
+        raw: line
+    }));
 }
 /**
- * Check if a word is a JavaScript keyword
+ * Highlight a single line of code
  */
-export function isKeyword(word) {
-    const keywords = [
-        'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
-        'default', 'delete', 'do', 'else', 'export', 'extends', 'finally', 'for',
-        'function', 'if', 'import', 'in', 'instanceof', 'let', 'new', 'return',
-        'super', 'switch', 'this', 'throw', 'try', 'typeof', 'var', 'void',
-        'while', 'with', 'yield', 'async', 'of', 'static', 'get', 'set'
-    ];
-    return keywords.includes(word);
+function highlightLine(line) {
+    if (!line.trim())
+        return ' ';
+    let result = line;
+    // 1. Comments (do first to avoid highlighting keywords in comments)
+    result = result.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
+    result = result.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
+    // 2. Strings (avoid highlighting keywords in strings)
+    result = result.replace(/(['"`])(?:(?=(\\?))\2.)*?\1/g, (match) => {
+        return `<span class="token-string">${escapeHtml(match)}</span>`;
+    });
+    // 3. Numbers
+    result = result.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
+    // 4. Keywords (only whole words)
+    KEYWORDS.forEach(keyword => {
+        const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
+        result = result.replace(regex, '<span class="token-keyword">$1</span>');
+    });
+    // 5. Braces, brackets, parentheses
+    result = result.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
+    // 6. Operators
+    result = result.replace(/([+\-*/%=<>!&|^~?:])/g, '<span class="token-operator">$1</span>');
+    return result || ' ';
 }
 /**
- * Render a parsed line as HTML with spans
+ * Render a parsed line (just returns the pre-generated HTML)
  */
 export function renderLineWithTokens(parsedLine) {
-    if (parsedLine.tokens.length === 0) {
-        // No tokens, return plain text (escaped)
-        return escapeHtml(parsedLine.raw) || ' ';
-    }
-    const { raw, tokens } = parsedLine;
-    let html = '';
-    let lastIndex = 0;
-    // Calculate line start position in original code
-    const lineStartPos = tokens[0]?.start - tokens[0]?.column;
-    tokens.forEach(token => {
-        // Add any whitespace/text between tokens
-        const localStart = token.start - lineStartPos;
-        if (localStart > lastIndex) {
-            html += escapeHtml(raw.substring(lastIndex, localStart));
-        }
-        // Add token with span
-        const localEnd = token.end - lineStartPos;
-        const tokenText = raw.substring(localStart, localEnd);
-        html += `<span class="${token.className}">${escapeHtml(tokenText)}</span>`;
-        lastIndex = localEnd;
-    });
-    // Add any remaining text
-    if (lastIndex < raw.length) {
-        html += escapeHtml(raw.substring(lastIndex));
-    }
-    return html || ' ';
+    return parsedLine.html;
 }
 /**
  * Escape HTML entities
  */
-export function escapeHtml(text) {
+function escapeHtml(text) {
     return text
         .replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')
@@ -227,34 +69,81 @@ export function escapeHtml(text) {
  */
 export function getSyntaxHighlightCSS() {
     return `
-/* Code Parser Syntax Highlighting */
+/* Simple Syntax Highlighting */
+.jux-code {
+    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    background: #1e1e1e;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1rem 0;
+}
+
+.jux-code pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+    background: transparent;
+}
+
+.jux-code-lines {
+    display: block;
+}
+
+.jux-code-line {
+    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);
+}
+
+.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;
+    text-align: right;
+    padding-right: 1rem;
+    color: #858585;
+    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 */
 .token-keyword { color: #c678dd; font-weight: 600; }
 .token-string { color: #98c379; }
 .token-number { color: #d19a66; }
-.token-boolean { color: #d19a66; }
-.token-null { color: #d19a66; }
-.token-regex { color: #e06c75; }
-.token-identifier { color: #e5c07b; }
-.token-punctuation { color: #abb2bf; }
 .token-comment { color: #5c6370; font-style: italic; }
-.token-default { color: #abb2bf; }
-
-/* Function calls */
-.token-identifier + .token-punctuation:has(+ .token-punctuation) {
-  color: #61afef; /* Function names in blue */
-}
+.token-punctuation { color: #abb2bf; }
+.token-operator { color: #56b6c2; }
   `;
 }
 /**
- * Main parser export with utilities
+ * Main parser export
  */
-export const codeParser = {
-    parse: CodeParser.parse,
+export default {
+    parse: parseCode,
     renderLine: renderLineWithTokens,
     getCSS: getSyntaxHighlightCSS,
-    getTokenClass,
-    isKeyword,
-    escapeHtml,
-    TOKEN_CLASS_MAP
+    escapeHtml
 };
-export default CodeParser;

package/lib/utils/codeparser.ts

@@ -1,271 +1,80 @@
-import * as acorn from 'acorn';
-
 /**
- * Token type to CSS class mapping
+ * Simple keyword lists for highlighting
  */
-export const TOKEN_CLASS_MAP: Record<string, string> = {
-    // Keywords
-    'Keyword': 'token-keyword',
-    'this': 'token-keyword',
-    'const': 'token-keyword',
-    'let': 'token-keyword',
-    'var': 'token-keyword',
-    'function': 'token-keyword',
-    'return': 'token-keyword',
-    'if': 'token-keyword',
-    'else': 'token-keyword',
-    'for': 'token-keyword',
-    'while': 'token-keyword',
-    'class': 'token-keyword',
-    'import': 'token-keyword',
-    'export': 'token-keyword',
-    'from': 'token-keyword',
-    'async': 'token-keyword',
-    'await': 'token-keyword',
-
-    // Literals
-    'String': 'token-string',
-    'Numeric': 'token-number',
-    'Boolean': 'token-boolean',
-    'Null': 'token-null',
-    'RegExp': 'token-regex',
-
-    // Identifiers
-    'Identifier': 'token-identifier',
-    'PrivateIdentifier': 'token-identifier',
-
-    // Operators
-    'Punctuator': 'token-punctuation',
-
-    // Comments
-    'LineComment': 'token-comment',
-    'BlockComment': 'token-comment',
-};
-
-export interface ParsedToken {
-    type: string;
-    value: string;
-    start: number;
-    end: number;
-    line: number;
-    column: number;
-    className: string;
-}
+const KEYWORDS = new Set([
+    'async', 'await', 'break', 'case', 'catch', 'class', 'const', 'continue',
+    'debugger', 'default', 'delete', 'do', 'else', 'export', 'extends',
+    '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'
+]);
 
 export interface ParsedLine {
     lineNumber: number;
-    tokens: ParsedToken[];
+    html: string;
     raw: string;
 }
 
-export class CodeParser {
-    private static _cache = new Map<string, ParsedLine[]>();
-
-    /**
-     * Parse code with caching
-     */
-    static parse(code: string, language: string = 'javascript'): ParsedLine[] {
-        const cacheKey = `${language}:${code}`;
-
-        if (this._cache.has(cacheKey)) {
-            return this._cache.get(cacheKey)!;
-        }
-
-        const result = this._parseCode(code, language);
-        this._cache.set(cacheKey, result);
-        return result;
-    }
-
-    private static _parseCode(code: string, language: string): ParsedLine[] {
-        const lines: ParsedLine[] = [];
-        const codeLines = code.split('\n');
-
-        // ✅ Skip parsing for non-JS languages
-        if (!['javascript', 'typescript', 'js', 'ts', 'jsx', 'tsx'].includes(language.toLowerCase())) {
-            codeLines.forEach((lineText, index) => {
-                lines.push({
-                    lineNumber: index + 1,
-                    tokens: [],
-                    raw: lineText
-                });
-            });
-            return lines;
-        }
-
-        // ✅ Strip TypeScript types for parsing
-        const cleanedCode = language.toLowerCase().includes('typescript') || language.toLowerCase().includes('ts')
-            ? this._stripTypeScriptTypes(code)
-            : code;
-
-        try {
-            // Parse with Acorn (supports ES2020+)
-            const tokens: any[] = [];
-
-            acorn.parse(cleanedCode, {
-                ecmaVersion: 2022,
-                sourceType: 'module',
-                locations: true,
-                ranges: true,
-                onToken: tokens,
-                onComment: (block, text, start, end, startLoc, endLoc) => {
-                    tokens.push({
-                        type: block ? 'BlockComment' : 'LineComment',
-                        value: text,
-                        start,
-                        end,
-                        loc: { start: startLoc, end: endLoc }
-                    });
-                }
-            });
-
-            // Sort tokens by position
-            tokens.sort((a, b) => a.start - b.start);
-
-            // Group tokens by line
-            const tokensByLine: Map<number, ParsedToken[]> = new Map();
-
-            tokens.forEach(token => {
-                const line = token.loc.start.line;
-                const parsedToken: ParsedToken = {
-                    type: token.type.label || token.type,
-                    value: token.value !== undefined ? String(token.value) : cleanedCode.substring(token.start, token.end),
-                    start: token.start,
-                    end: token.end,
-                    line: token.loc.start.line,
-                    column: token.loc.start.column,
-                    className: getTokenClass(token)
-                };
-
-                if (!tokensByLine.has(line)) {
-                    tokensByLine.set(line, []);
-                }
-                tokensByLine.get(line)!.push(parsedToken);
-            });
-
-            // ✅ Build lines with tokens (use ORIGINAL code, not cleaned)
-            codeLines.forEach((lineText, index) => {
-                const lineNumber = index + 1;
-                const lineTokens = tokensByLine.get(lineNumber) || [];
-
-                lines.push({
-                    lineNumber,
-                    tokens: lineTokens,
-                    raw: lineText // Use original line with types
-                });
-            });
-
-        } catch (error) {
-            // Fallback: if parsing fails, return plain lines
-            console.warn('[CodeParser] Parse failed, using plain text:', error);
-            codeLines.forEach((lineText, index) => {
-                lines.push({
-                    lineNumber: index + 1,
-                    tokens: [],
-                    raw: lineText
-                });
-            });
-        }
-
-        return lines;
-    }
-
-    /**
-     * ✅ NEW: Strip TypeScript type annotations for parsing
-     * This is a simple regex-based approach - not perfect but works for most cases
-     */
-    private static _stripTypeScriptTypes(code: string): string {
-        return code
-            // Remove type annotations from parameters: (name: string) -> (name)
-            .replace(/(\w+)\s*:\s*[\w<>\[\]|&]+/g, '$1')
-            // Remove return type annotations: ): string -> )
-            .replace(/\)\s*:\s*[\w<>\[\]|&]+/g, ')')
-            // Remove interface/type declarations (keep as comments to preserve line numbers)
-            .replace(/^(\s*)(interface|type)\s+\w+.*$/gm, '$1// $2 declaration')
-            // Remove as type assertions: value as string -> value
-            .replace(/\s+as\s+[\w<>\[\]|&]+/g, '')
-            // Remove angle bracket generics: Array<string> -> Array
-            .replace(/<[\w<>\[\]|&,\s]+>/g, '');
-    }
-
-    /**
-     * Clear cache (useful for development)
-     */
-    static clearCache(): void {
-        this._cache.clear();
-    }
-}
-
 /**
- * Get CSS class for a token
+ * Parse code into lines with simple syntax highlighting
  */
-export function getTokenClass(token: any): string {
-    const type = token.type.label || token.type;
-
-    // Check if it's a keyword
-    if (type === 'name' && token.value && isKeyword(token.value)) {
-        return TOKEN_CLASS_MAP[token.value] || TOKEN_CLASS_MAP['Keyword'];
-    }
-
-    // Map type to class
-    return TOKEN_CLASS_MAP[type] || 'token-default';
+export function parseCode(code: string, language: string = 'javascript'): ParsedLine[] {
+    const lines = code.split('\n');
+
+    return lines.map((line, index) => ({
+        lineNumber: index + 1,
+        html: highlightLine(line),
+        raw: line
+    }));
 }
 
 /**
- * Check if a word is a JavaScript keyword
+ * Highlight a single line of code
  */
-export function isKeyword(word: string): boolean {
-    const keywords = [
-        'await', 'break', 'case', 'catch', 'class', 'const', 'continue', 'debugger',
-        'default', 'delete', 'do', 'else', 'export', 'extends', 'finally', 'for',
-        'function', 'if', 'import', 'in', 'instanceof', 'let', 'new', 'return',
-        'super', 'switch', 'this', 'throw', 'try', 'typeof', 'var', 'void',
-        'while', 'with', 'yield', 'async', 'of', 'static', 'get', 'set'
-    ];
-    return keywords.includes(word);
-}
+function highlightLine(line: string): string {
+    if (!line.trim()) return ' ';
 
-/**
- * Render a parsed line as HTML with spans
- */
-export function renderLineWithTokens(parsedLine: ParsedLine): string {
-    if (parsedLine.tokens.length === 0) {
-        // No tokens, return plain text (escaped)
-        return escapeHtml(parsedLine.raw) || ' ';
-    }
+    let result = line;
 
-    const { raw, tokens } = parsedLine;
-    let html = '';
-    let lastIndex = 0;
+    // 1. Comments (do first to avoid highlighting keywords in comments)
+    result = result.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
+    result = result.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
 
-    // Calculate line start position in original code
-    const lineStartPos = tokens[0]?.start - tokens[0]?.column;
+    // 2. Strings (avoid highlighting keywords in strings)
+    result = result.replace(/(['"`])(?:(?=(\\?))\2.)*?\1/g, (match) => {
+        return `<span class="token-string">${escapeHtml(match)}</span>`;
+    });
 
-    tokens.forEach(token => {
-        // Add any whitespace/text between tokens
-        const localStart = token.start - lineStartPos;
-        if (localStart > lastIndex) {
-            html += escapeHtml(raw.substring(lastIndex, localStart));
-        }
+    // 3. Numbers
+    result = result.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
 
-        // Add token with span
-        const localEnd = token.end - lineStartPos;
-        const tokenText = raw.substring(localStart, localEnd);
-        html += `<span class="${token.className}">${escapeHtml(tokenText)}</span>`;
-        lastIndex = localEnd;
+    // 4. Keywords (only whole words)
+    KEYWORDS.forEach(keyword => {
+        const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
+        result = result.replace(regex, '<span class="token-keyword">$1</span>');
     });
 
-    // Add any remaining text
-    if (lastIndex < raw.length) {
-        html += escapeHtml(raw.substring(lastIndex));
-    }
+    // 5. Braces, brackets, parentheses
+    result = result.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
+
+    // 6. Operators
+    result = result.replace(/([+\-*/%=<>!&|^~?:])/g, '<span class="token-operator">$1</span>');
 
-    return html || ' ';
+    return result || ' ';
+}
+
+/**
+ * Render a parsed line (just returns the pre-generated HTML)
+ */
+export function renderLineWithTokens(parsedLine: ParsedLine): string {
+    return parsedLine.html;
 }
 
 /**
  * Escape HTML entities
  */
-export function escapeHtml(text: string): string {
+function escapeHtml(text: string): string {
     return text
         .replace(/&/g, '&amp;')
         .replace(/</g, '&lt;')
@@ -279,38 +88,82 @@ export function escapeHtml(text: string): string {
  */
 export function getSyntaxHighlightCSS(): string {
     return `
-/* Code Parser Syntax Highlighting */
+/* Simple Syntax Highlighting */
+.jux-code {
+    font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    background: #1e1e1e;
+    border-radius: 8px;
+    overflow: hidden;
+    margin: 1rem 0;
+}
+
+.jux-code pre {
+    margin: 0;
+    padding: 1rem;
+    overflow-x: auto;
+    background: transparent;
+}
+
+.jux-code-lines {
+    display: block;
+}
+
+.jux-code-line {
+    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);
+}
+
+.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;
+    text-align: right;
+    padding-right: 1rem;
+    color: #858585;
+    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 */
 .token-keyword { color: #c678dd; font-weight: 600; }
 .token-string { color: #98c379; }
 .token-number { color: #d19a66; }
-.token-boolean { color: #d19a66; }
-.token-null { color: #d19a66; }
-.token-regex { color: #e06c75; }
-.token-identifier { color: #e5c07b; }
-.token-punctuation { color: #abb2bf; }
 .token-comment { color: #5c6370; font-style: italic; }
-.token-default { color: #abb2bf; }
-
-/* Function calls */
-.token-identifier + .token-punctuation:has(+ .token-punctuation) {
-  color: #61afef; /* Function names in blue */
-}
+.token-punctuation { color: #abb2bf; }
+.token-operator { color: #56b6c2; }
   `;
 }
 
-
-
 /**
- * Main parser export with utilities
+ * Main parser export
  */
-export const codeParser = {
-    parse: CodeParser.parse,
+export default {
+    parse: parseCode,
     renderLine: renderLineWithTokens,
     getCSS: getSyntaxHighlightCSS,
-    getTokenClass,
-    isKeyword,
-    escapeHtml,
-    TOKEN_CLASS_MAP
+    escapeHtml
 };
-
-export default CodeParser;

package/package.json

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