juxscript 1.1.44 → 1.1.46

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

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;IAoBrB;;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 { codeParser } from '../utils/codeparser.js'; // ✅ Default import
 // 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 codeParser.parse(this.state.content, this.state.language);
     }
     /**
      * Rebuild all line elements
@@ -79,23 +80,19 @@ 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
-        if (window.Prism && this._codeContainer) {
-            window.Prism.highlightAllUnder(this._codeContainer);
-        }
     }
     /**
-     * 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 +106,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 = codeParser.renderLine(parsedLine);
         lineEl.appendChild(lineCode);
         return lineEl;
     }
@@ -134,6 +131,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 = codeParser.getCSS();
+            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 +153,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 +195,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 { codeParser } from '../utils/codeparser.js'; // ✅ Default import
 
 // 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 codeParser.parse> {
+    return codeParser.parse(this.state.content, this.state.language);
   }
 
   /**
@@ -116,27 +118,22 @@ 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);
     });
 
-    // Re-run Prism if available
-    if ((window as any).Prism && this._codeContainer) {
-      (window as any).Prism.highlightAllUnder(this._codeContainer);
-    }
   }
 
   /**
-   * 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 codeParser.parse>[0], lineNumber: number, highlighted: boolean): HTMLElement {
     const lineEl = document.createElement('div');
     lineEl.className = 'jux-code-line';
     lineEl.setAttribute('data-line', String(lineNumber));
@@ -153,10 +150,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 = codeParser.renderLine(parsedLine);
     lineEl.appendChild(lineCode);
 
     return lineEl;
@@ -183,6 +180,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 = codeParser.getCSS();
+      document.head.appendChild(style);
+      Code._syntaxCSSInjected = true;
+    }
+
     const { language, showLineNumbers, style, class: className } = this.state;
 
     const wrapper = document.createElement('div');
@@ -198,14 +204,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 +255,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,60 @@
+/**
+ * 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[];
+    raw: string;
+}
+export declare class CodeParser {
+    private static _cache;
+    /**
+     * Parse code with caching
+     */
+    static parse(code: string, language?: string): ParsedLine[];
+    private static _parseCode;
+}
+/**
+ * Get CSS class for a token
+ */
+export declare function getTokenClass(token: any): string;
+/**
+ * Check if a word is a JavaScript keyword
+ */
+export declare function isKeyword(word: string): boolean;
+/**
+ * Render a parsed line as HTML with spans
+ */
+export declare function renderLineWithTokens(parsedLine: ParsedLine): string;
+/**
+ * Escape HTML entities
+ */
+export declare function escapeHtml(text: string): string;
+/**
+ * Generate CSS for syntax highlighting
+ */
+export declare function getSyntaxHighlightCSS(): string;
+/**
+ * Main parser export with utilities
+ */
+export declare const codeParser: {
+    parse: typeof CodeParser.parse;
+    renderLine: typeof renderLineWithTokens;
+    getCSS: typeof getSyntaxHighlightCSS;
+    getTokenClass: typeof getTokenClass;
+    isKeyword: typeof isKeyword;
+    escapeHtml: typeof escapeHtml;
+    TOKEN_CLASS_MAP: Record<string, string>;
+};
+export default CodeParser;
+//# 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":"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;CA2E5B;AACD;;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"}

package/lib/utils/codeparser.js

@@ -0,0 +1,222 @@
+import * as acorn from 'acorn';
+/**
+ * Token type to CSS class mapping
+ */
+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');
+        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;
+    }
+}
+CodeParser._cache = new Map();
+/**
+ * Get CSS class for a token
+ */
+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';
+}
+/**
+ * Check if a word is a JavaScript keyword
+ */
+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);
+}
+/**
+ * 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
+ */
+export 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 */
+}
+  `;
+}
+/**
+ * Main parser export with utilities
+ */
+export const codeParser = {
+    parse: CodeParser.parse,
+    renderLine: renderLineWithTokens,
+    getCSS: getSyntaxHighlightCSS,
+    getTokenClass,
+    isKeyword,
+    escapeHtml,
+    TOKEN_CLASS_MAP
+};
+export default CodeParser;

package/lib/utils/codeparser.ts

@@ -0,0 +1,273 @@
+import * as acorn from 'acorn';
+
+/**
+ * Token type to CSS class mapping
+ */
+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;
+}
+
+export interface ParsedLine {
+    lineNumber: number;
+    tokens: ParsedToken[];
+    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');
+
+        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
+ */
+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';
+}
+
+/**
+ * Check if a word is a JavaScript keyword
+ */
+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);
+}
+
+/**
+ * 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
+ */
+export 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 */
+}
+  `;
+}
+
+
+
+/**
+ * Main parser export with utilities
+ */
+export const codeParser = {
+    parse: CodeParser.parse,
+    renderLine: renderLineWithTokens,
+    getCSS: getSyntaxHighlightCSS,
+    getTokenClass,
+    isKeyword,
+    escapeHtml,
+    TOKEN_CLASS_MAP
+};
+
+export default CodeParser;

package/package.json

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