juxscript 1.1.44 → 1.1.45

package/lib/components/code.d.ts

@@ -19,6 +19,7 @@ type CodeState = {
 };
 export declare class Code extends BaseComponent<CodeState> {
     private _codeContainer;
+    private static _syntaxCSSInjected;
     constructor(id: string, options?: CodeOptions);
     protected getTriggerEvents(): readonly string[];
     protected getCallbackEvents(): readonly string[];
@@ -29,7 +30,7 @@ export declare class Code extends BaseComponent<CodeState> {
     startLine(value: number): this;
     highlightLines(lines: number[]): this;
     /**
-     * Parse code content into individual lines
+     * Parse code content into individual lines with tokens
      */
     private _parseLines;
     /**
@@ -37,7 +38,7 @@ export declare class Code extends BaseComponent<CodeState> {
      */
     private _rebuildLines;
     /**
-     * Create a single line element
+     * Create a single line element with parsed tokens
      */
     private _createLineElement;
     /**

package/lib/components/code.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAMxD,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,cAAc,CAA4B;gBAEtC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAYjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsBtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IASrC;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,aAAa;IAyBrB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0B1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CA6EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["code.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAOxD,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,KAAK,SAAS,GAAG;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,cAAc,CAA4B;IAClD,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;gBAE9B,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IAYjD,SAAS,CAAC,gBAAgB,IAAI,SAAS,MAAM,EAAE;IAI/C,SAAS,CAAC,iBAAiB,IAAI,SAAS,MAAM,EAAE;IAIhD,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAsBtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,eAAe,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAKrC,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK9B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI;IASrC;;OAEG;IACH,OAAO,CAAC,WAAW;IAInB;;OAEG;IACH,OAAO,CAAC,aAAa;IAyBrB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IA0B1B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAgFnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/code.js

@@ -1,4 +1,5 @@
 import { BaseComponent } from './base/BaseComponent.js';
+import { parseCode, renderLineWithTokens, getSyntaxHighlightCSS } from '../utils/codeparser.js';
 // Event definitions
 const TRIGGER_EVENTS = [];
 const CALLBACK_EVENTS = [];
@@ -64,10 +65,10 @@ export class Code extends BaseComponent {
      * PARSING & RENDERING
      * ═════════════════════════════════════════════════════════════════ */
     /**
-     * Parse code content into individual lines
+     * Parse code content into individual lines with tokens
      */
     _parseLines() {
-        return this.state.content.split('\n');
+        return parseCode(this.state.content, this.state.language);
     }
     /**
      * Rebuild all line elements
@@ -79,12 +80,12 @@ export class Code extends BaseComponent {
         if (!codeEl)
             return;
         codeEl.innerHTML = '';
-        const lines = this._parseLines();
+        const parsedLines = this._parseLines();
         const { startLine, highlightLines, showLineNumbers } = this.state;
-        lines.forEach((lineContent, index) => {
+        parsedLines.forEach((parsedLine, index) => {
             const lineNumber = startLine + index;
             const isHighlighted = highlightLines.includes(lineNumber);
-            const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+            const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
             codeEl.appendChild(lineEl);
         });
         // Re-run Prism if available
@@ -93,9 +94,9 @@ export class Code extends BaseComponent {
         }
     }
     /**
-     * Create a single line element
+     * Create a single line element with parsed tokens
      */
-    _createLineElement(content, lineNumber, highlighted) {
+    _createLineElement(parsedLine, lineNumber, highlighted) {
         const lineEl = document.createElement('div');
         lineEl.className = 'jux-code-line';
         lineEl.setAttribute('data-line', String(lineNumber));
@@ -109,10 +110,10 @@ export class Code extends BaseComponent {
             lineNum.textContent = String(lineNumber);
             lineEl.appendChild(lineNum);
         }
-        // Line content
+        // Line content with syntax highlighting
         const lineCode = document.createElement('span');
-        lineCode.className = `jux-code-line-content language-${this.state.language}`;
-        lineCode.textContent = content || ' '; // Preserve empty lines
+        lineCode.className = 'jux-code-line-content';
+        lineCode.innerHTML = renderLineWithTokens(parsedLine);
         lineEl.appendChild(lineCode);
         return lineEl;
     }
@@ -134,6 +135,14 @@ export class Code extends BaseComponent {
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
+        // ✅ Inject syntax CSS once globally
+        if (!Code._syntaxCSSInjected) {
+            const style = document.createElement('style');
+            style.id = 'jux-code-syntax-css';
+            style.textContent = getSyntaxHighlightCSS();
+            document.head.appendChild(style);
+            Code._syntaxCSSInjected = true;
+        }
         const { language, showLineNumbers, style, class: className } = this.state;
         const wrapper = document.createElement('div');
         wrapper.className = 'jux-code';
@@ -148,13 +157,13 @@ export class Code extends BaseComponent {
         pre.className = `language-${language}`;
         const codeEl = document.createElement('code');
         codeEl.className = 'jux-code-lines';
-        // Build initial lines
-        const lines = this._parseLines();
+        // Build initial lines with parsed tokens
+        const parsedLines = this._parseLines();
         const { startLine, highlightLines } = this.state;
-        lines.forEach((lineContent, index) => {
+        parsedLines.forEach((parsedLine, index) => {
             const lineNumber = startLine + index;
             const isHighlighted = highlightLines.includes(lineNumber);
-            const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+            const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
             codeEl.appendChild(lineEl);
         });
         pre.appendChild(codeEl);
@@ -190,14 +199,10 @@ export class Code extends BaseComponent {
         });
         container.appendChild(wrapper);
         this._codeContainer = wrapper;
-        requestAnimationFrame(() => {
-            if (window.Prism) {
-                window.Prism.highlightAllUnder(wrapper);
-            }
-        });
         return this;
     }
 }
+Code._syntaxCSSInjected = false;
 export function code(id, options = {}) {
     return new Code(id, options);
 }

package/lib/components/code.ts

@@ -1,4 +1,5 @@
 import { BaseComponent } from './base/BaseComponent.js';
+import { parseCode, renderLineWithTokens, getSyntaxHighlightCSS } from '../utils/codeparser.js';
 
 // Event definitions
 const TRIGGER_EVENTS = [] as const;
@@ -26,6 +27,7 @@ type CodeState = {
 
 export class Code extends BaseComponent<CodeState> {
   private _codeContainer: HTMLElement | null = null;
+  private static _syntaxCSSInjected = false;
 
   constructor(id: string, options: CodeOptions = {}) {
     super(id, {
@@ -99,10 +101,10 @@ export class Code extends BaseComponent<CodeState> {
    * ═════════════════════════════════════════════════════════════════ */
 
   /**
-   * Parse code content into individual lines
+   * Parse code content into individual lines with tokens
    */
-  private _parseLines(): string[] {
-    return this.state.content.split('\n');
+  private _parseLines(): ReturnType<typeof parseCode> {
+    return parseCode(this.state.content, this.state.language);
   }
 
   /**
@@ -116,14 +118,14 @@ export class Code extends BaseComponent<CodeState> {
 
     codeEl.innerHTML = '';
 
-    const lines = this._parseLines();
+    const parsedLines = this._parseLines();
     const { startLine, highlightLines, showLineNumbers } = this.state;
 
-    lines.forEach((lineContent, index) => {
+    parsedLines.forEach((parsedLine, index) => {
       const lineNumber = startLine + index;
       const isHighlighted = highlightLines.includes(lineNumber);
 
-      const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+      const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
       codeEl.appendChild(lineEl);
     });
 
@@ -134,9 +136,9 @@ export class Code extends BaseComponent<CodeState> {
   }
 
   /**
-   * Create a single line element
+   * Create a single line element with parsed tokens
    */
-  private _createLineElement(content: string, 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,10 +155,10 @@ export class Code extends BaseComponent<CodeState> {
       lineEl.appendChild(lineNum);
     }
 
-    // Line content
+    // Line content with syntax highlighting
     const lineCode = document.createElement('span');
-    lineCode.className = `jux-code-line-content language-${this.state.language}`;
-    lineCode.textContent = content || ' '; // Preserve empty lines
+    lineCode.className = 'jux-code-line-content';
+    lineCode.innerHTML = renderLineWithTokens(parsedLine);
     lineEl.appendChild(lineCode);
 
     return lineEl;
@@ -183,6 +185,15 @@ export class Code extends BaseComponent<CodeState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
+    // ✅ Inject syntax CSS once globally
+    if (!Code._syntaxCSSInjected) {
+      const style = document.createElement('style');
+      style.id = 'jux-code-syntax-css';
+      style.textContent = getSyntaxHighlightCSS();
+      document.head.appendChild(style);
+      Code._syntaxCSSInjected = true;
+    }
+
     const { language, showLineNumbers, style, class: className } = this.state;
 
     const wrapper = document.createElement('div');
@@ -198,14 +209,14 @@ export class Code extends BaseComponent<CodeState> {
     const codeEl = document.createElement('code');
     codeEl.className = 'jux-code-lines';
 
-    // Build initial lines
-    const lines = this._parseLines();
+    // Build initial lines with parsed tokens
+    const parsedLines = this._parseLines();
     const { startLine, highlightLines } = this.state;
 
-    lines.forEach((lineContent, index) => {
+    parsedLines.forEach((parsedLine, index) => {
       const lineNumber = startLine + index;
       const isHighlighted = highlightLines.includes(lineNumber);
-      const lineEl = this._createLineElement(lineContent, lineNumber, isHighlighted);
+      const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
       codeEl.appendChild(lineEl);
     });
 
@@ -249,12 +260,6 @@ export class Code extends BaseComponent<CodeState> {
     container.appendChild(wrapper);
     this._codeContainer = wrapper;
 
-    requestAnimationFrame(() => {
-      if ((window as any).Prism) {
-        (window as any).Prism.highlightAllUnder(wrapper);
-      }
-    });
-
     return this;
   }
 }

package/lib/utils/codeparser.d.ts

@@ -0,0 +1,28 @@
+export interface ParsedToken {
+    type: string;
+    value: string;
+    start: number;
+    end: number;
+    line: number;
+    column: number;
+    className: string;
+}
+export interface ParsedLine {
+    lineNumber: number;
+    tokens: ParsedToken[];
+    raw: string;
+}
+/**
+ * Parse JavaScript/TypeScript code using Acorn
+ * Returns token-level information for syntax highlighting
+ */
+export declare function parseCode(code: string, language?: string): ParsedLine[];
+/**
+ * Render a parsed line as HTML with spans
+ */
+export declare function renderLineWithTokens(parsedLine: ParsedLine): string;
+/**
+ * Generate CSS for syntax highlighting
+ */
+export declare function getSyntaxHighlightCSS(): string;
+//# sourceMappingURL=codeparser.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AA4CA,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;;;GAGG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CA0ErF;AA+BD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAiCnE;AAcD;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAmB9C"}

package/lib/utils/codeparser.js

@@ -0,0 +1,198 @@
+import * as acorn from 'acorn';
+/**
+ * Token type to CSS class mapping
+ */
+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',
+};
+/**
+ * Parse JavaScript/TypeScript code using Acorn
+ * Returns token-level information for syntax highlighting
+ */
+export function parseCode(code, language = 'javascript') {
+    const lines = [];
+    const codeLines = code.split('\n');
+    try {
+        // Parse with Acorn (supports ES2020+)
+        const tokens = [];
+        acorn.parse(code, {
+            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) : code.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
+        codeLines.forEach((lineText, index) => {
+            const lineNumber = index + 1;
+            const lineTokens = tokensByLine.get(lineNumber) || [];
+            lines.push({
+                lineNumber,
+                tokens: lineTokens,
+                raw: lineText
+            });
+        });
+    }
+    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;
+}
+/**
+ * Get CSS class for a token
+ */
+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';
+}
+/**
+ * Check if a word is a JavaScript keyword
+ */
+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);
+}
+/**
+ * Render a parsed line as HTML with spans
+ */
+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 || ' ';
+}
+/**
+ * Escape HTML entities
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * Generate CSS for syntax highlighting
+ */
+export function getSyntaxHighlightCSS() {
+    return `
+/* Code Parser Syntax Highlighting */
+.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 */
+}
+  `;
+}

package/lib/utils/codeparser.ts

@@ -0,0 +1,242 @@
+import * as acorn from 'acorn';
+
+/**
+ * Token type to CSS class mapping
+ */
+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;
+}
+
+export interface ParsedLine {
+    lineNumber: number;
+    tokens: ParsedToken[];
+    raw: string;
+}
+
+/**
+ * Parse JavaScript/TypeScript code using Acorn
+ * Returns token-level information for syntax highlighting
+ */
+export function parseCode(code: string, language: string = 'javascript'): ParsedLine[] {
+    const lines: ParsedLine[] = [];
+    const codeLines = code.split('\n');
+
+    try {
+        // Parse with Acorn (supports ES2020+)
+        const tokens: any[] = [];
+
+        acorn.parse(code, {
+            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) : code.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
+        codeLines.forEach((lineText, index) => {
+            const lineNumber = index + 1;
+            const lineTokens = tokensByLine.get(lineNumber) || [];
+
+            lines.push({
+                lineNumber,
+                tokens: lineTokens,
+                raw: lineText
+            });
+        });
+
+    } 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;
+}
+
+/**
+ * Get CSS class for a token
+ */
+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';
+}
+
+/**
+ * Check if a word is a JavaScript keyword
+ */
+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);
+}
+
+/**
+ * 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) || ' ';
+    }
+
+    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 || ' ';
+}
+
+/**
+ * Escape HTML entities
+ */
+function escapeHtml(text: string): string {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
+/**
+ * Generate CSS for syntax highlighting
+ */
+export function getSyntaxHighlightCSS(): string {
+    return `
+/* Code Parser Syntax Highlighting */
+.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 */
+}
+  `;
+}

package/package.json

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