juxscript 1.1.43 → 1.1.45

package/lib/components/code.d.ts

@@ -2,22 +2,49 @@ import { BaseComponent } from './base/BaseComponent.js';
 export interface CodeOptions {
     content?: string;
     language?: string;
+    showLineNumbers?: boolean;
+    startLine?: number;
+    highlightLines?: number[];
     style?: string;
     class?: string;
 }
 type CodeState = {
     content: string;
     language: string;
+    showLineNumbers: boolean;
+    startLine: number;
+    highlightLines: number[];
     style: string;
     class: string;
 };
 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[];
     update(prop: string, value: any): void;
     content(value: string): this;
     language(value: string): this;
+    showLineNumbers(value: boolean): this;
+    startLine(value: number): this;
+    highlightLines(lines: number[]): this;
+    /**
+     * Parse code content into individual lines with tokens
+     */
+    private _parseLines;
+    /**
+     * Rebuild all line elements
+     */
+    private _rebuildLines;
+    /**
+     * Create a single line element with parsed tokens
+     */
+    private _createLineElement;
+    /**
+     * Update highlighted lines without full rebuild
+     */
+    private _updateHighlights;
     render(targetId?: string | HTMLElement | BaseComponent<any>): this;
 }
 export declare function code(id: string, options?: CodeOptions): Code;

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,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,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,qBAAa,IAAK,SAAQ,aAAa,CAAC,SAAS,CAAC;gBACpC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB;IASjD,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;IAQtC,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK5B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAS7B,MAAM,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;CAmEnE;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 = [];
@@ -7,9 +8,13 @@ export class Code extends BaseComponent {
         super(id, {
             content: options.content ?? '',
             language: options.language ?? 'javascript',
+            showLineNumbers: options.showLineNumbers ?? true,
+            startLine: options.startLine ?? 1,
+            highlightLines: options.highlightLines ?? [],
             style: options.style ?? '',
             class: options.class ?? ''
         });
+        this._codeContainer = null;
     }
     getTriggerEvents() {
         return TRIGGER_EVENTS;
@@ -18,7 +23,20 @@ export class Code extends BaseComponent {
         return CALLBACK_EVENTS;
     }
     update(prop, value) {
-        // No reactive updates needed
+        super.update(prop, value);
+        if (!this._codeContainer)
+            return;
+        switch (prop) {
+            case 'content':
+                this._rebuildLines();
+                break;
+            case 'showLineNumbers':
+                this._codeContainer.classList.toggle('jux-code-no-numbers', !value);
+                break;
+            case 'highlightLines':
+                this._updateHighlights();
+                break;
+        }
     }
     /* ═════════════════════════════════════════════════════════════════
      * FLUENT API
@@ -31,23 +49,123 @@ export class Code extends BaseComponent {
         this.state.language = value;
         return this;
     }
+    showLineNumbers(value) {
+        this.state.showLineNumbers = value;
+        return this;
+    }
+    startLine(value) {
+        this.state.startLine = value;
+        return this;
+    }
+    highlightLines(lines) {
+        this.state.highlightLines = lines;
+        return this;
+    }
+    /* ═════════════════════════════════════════════════════════════════
+     * PARSING & RENDERING
+     * ═════════════════════════════════════════════════════════════════ */
+    /**
+     * Parse code content into individual lines with tokens
+     */
+    _parseLines() {
+        return parseCode(this.state.content, this.state.language);
+    }
+    /**
+     * Rebuild all line elements
+     */
+    _rebuildLines() {
+        if (!this._codeContainer)
+            return;
+        const codeEl = this._codeContainer.querySelector('.jux-code-lines');
+        if (!codeEl)
+            return;
+        codeEl.innerHTML = '';
+        const parsedLines = this._parseLines();
+        const { startLine, highlightLines, showLineNumbers } = this.state;
+        parsedLines.forEach((parsedLine, index) => {
+            const lineNumber = startLine + index;
+            const isHighlighted = highlightLines.includes(lineNumber);
+            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 with parsed tokens
+     */
+    _createLineElement(parsedLine, lineNumber, highlighted) {
+        const lineEl = document.createElement('div');
+        lineEl.className = 'jux-code-line';
+        lineEl.setAttribute('data-line', String(lineNumber));
+        if (highlighted) {
+            lineEl.classList.add('jux-code-line-highlight');
+        }
+        // Line number
+        if (this.state.showLineNumbers) {
+            const lineNum = document.createElement('span');
+            lineNum.className = 'jux-code-line-number';
+            lineNum.textContent = String(lineNumber);
+            lineEl.appendChild(lineNum);
+        }
+        // Line content with syntax highlighting
+        const lineCode = document.createElement('span');
+        lineCode.className = 'jux-code-line-content';
+        lineCode.innerHTML = renderLineWithTokens(parsedLine);
+        lineEl.appendChild(lineCode);
+        return lineEl;
+    }
+    /**
+     * Update highlighted lines without full rebuild
+     */
+    _updateHighlights() {
+        if (!this._codeContainer)
+            return;
+        const lines = this._codeContainer.querySelectorAll('.jux-code-line');
+        lines.forEach((line) => {
+            const lineNum = parseInt(line.getAttribute('data-line') || '0', 10);
+            const isHighlighted = this.state.highlightLines.includes(lineNum);
+            line.classList.toggle('jux-code-line-highlight', isHighlighted);
+        });
+    }
     /* ═════════════════════════════════════════════════════════════════
      * RENDER
      * ═════════════════════════════════════════════════════════════════ */
     render(targetId) {
         const container = this._setupContainer(targetId);
-        const { content, language, style, class: className } = this.state;
+        // ✅ 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';
         wrapper.id = this._id;
+        if (!showLineNumbers)
+            wrapper.classList.add('jux-code-no-numbers');
         if (className)
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
         const pre = document.createElement('pre');
+        pre.className = `language-${language}`;
         const codeEl = document.createElement('code');
-        codeEl.className = `language-${language}`;
-        codeEl.textContent = content;
+        codeEl.className = 'jux-code-lines';
+        // Build initial lines with parsed tokens
+        const parsedLines = this._parseLines();
+        const { startLine, highlightLines } = this.state;
+        parsedLines.forEach((parsedLine, index) => {
+            const lineNumber = startLine + index;
+            const isHighlighted = highlightLines.includes(lineNumber);
+            const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
+            codeEl.appendChild(lineEl);
+        });
         pre.appendChild(codeEl);
         wrapper.appendChild(pre);
         this._wireStandardEvents(wrapper);
@@ -57,40 +175,34 @@ export class Code extends BaseComponent {
                 const transform = toComponent || ((v) => String(v));
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
-                    codeEl.textContent = transformed;
                     this.state.content = transformed;
-                    if (window.Prism) {
-                        window.Prism.highlightElement(codeEl);
-                    }
+                    this._rebuildLines();
                 });
             }
             else if (property === 'language') {
                 const transform = toComponent || ((v) => String(v));
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
-                    codeEl.className = `language-${transformed}`;
                     this.state.language = transformed;
-                    if (window.Prism) {
-                        window.Prism.highlightElement(codeEl);
-                    }
+                    pre.className = `language-${transformed}`;
+                    this._rebuildLines();
                 });
             }
-        });
-        container.appendChild(wrapper);
-        requestAnimationFrame(() => {
-            if (window.Prism) {
-                window.Prism.highlightElement(codeEl);
-            }
-            else if (process.env.NODE_ENV !== 'production') {
-                // ✅ Helpful hint in development
-                console.log(`💡 Tip: Add Prism.js for syntax highlighting:\n` +
-                    `   <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" rel="stylesheet" />\n` +
-                    `   <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>`);
+            else if (property === 'highlightLines') {
+                const transform = toComponent || ((v) => (Array.isArray(v) ? v : []));
+                stateObj.subscribe((val) => {
+                    const transformed = transform(val);
+                    this.state.highlightLines = transformed;
+                    this._updateHighlights();
+                });
             }
         });
+        container.appendChild(wrapper);
+        this._codeContainer = 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;
@@ -7,6 +8,9 @@ const CALLBACK_EVENTS = [] as const;
 export interface CodeOptions {
   content?: string;
   language?: string;
+  showLineNumbers?: boolean;
+  startLine?: number;
+  highlightLines?: number[];
   style?: string;
   class?: string;
 }
@@ -14,15 +18,24 @@ export interface CodeOptions {
 type CodeState = {
   content: string;
   language: string;
+  showLineNumbers: boolean;
+  startLine: number;
+  highlightLines: number[];
   style: string;
   class: string;
 };
 
 export class Code extends BaseComponent<CodeState> {
+  private _codeContainer: HTMLElement | null = null;
+  private static _syntaxCSSInjected = false;
+
   constructor(id: string, options: CodeOptions = {}) {
     super(id, {
       content: options.content ?? '',
       language: options.language ?? 'javascript',
+      showLineNumbers: options.showLineNumbers ?? true,
+      startLine: options.startLine ?? 1,
+      highlightLines: options.highlightLines ?? [],
       style: options.style ?? '',
       class: options.class ?? ''
     });
@@ -37,7 +50,21 @@ export class Code extends BaseComponent<CodeState> {
   }
 
   update(prop: string, value: any): void {
-    // No reactive updates needed
+    super.update(prop, value);
+
+    if (!this._codeContainer) return;
+
+    switch (prop) {
+      case 'content':
+        this._rebuildLines();
+        break;
+      case 'showLineNumbers':
+        this._codeContainer.classList.toggle('jux-code-no-numbers', !value);
+        break;
+      case 'highlightLines':
+        this._updateHighlights();
+        break;
+    }
   }
 
   /* ═════════════════════════════════════════════════════════════════
@@ -54,6 +81,103 @@ export class Code extends BaseComponent<CodeState> {
     return this;
   }
 
+  showLineNumbers(value: boolean): this {
+    this.state.showLineNumbers = value;
+    return this;
+  }
+
+  startLine(value: number): this {
+    this.state.startLine = value;
+    return this;
+  }
+
+  highlightLines(lines: number[]): this {
+    this.state.highlightLines = lines;
+    return this;
+  }
+
+  /* ═════════════════════════════════════════════════════════════════
+   * PARSING & RENDERING
+   * ═════════════════════════════════════════════════════════════════ */
+
+  /**
+   * Parse code content into individual lines with tokens
+   */
+  private _parseLines(): ReturnType<typeof parseCode> {
+    return parseCode(this.state.content, this.state.language);
+  }
+
+  /**
+   * Rebuild all line elements
+   */
+  private _rebuildLines(): void {
+    if (!this._codeContainer) return;
+
+    const codeEl = this._codeContainer.querySelector('.jux-code-lines');
+    if (!codeEl) return;
+
+    codeEl.innerHTML = '';
+
+    const parsedLines = this._parseLines();
+    const { startLine, highlightLines, showLineNumbers } = this.state;
+
+    parsedLines.forEach((parsedLine, index) => {
+      const lineNumber = startLine + index;
+      const isHighlighted = highlightLines.includes(lineNumber);
+
+      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 with parsed tokens
+   */
+  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));
+
+    if (highlighted) {
+      lineEl.classList.add('jux-code-line-highlight');
+    }
+
+    // Line number
+    if (this.state.showLineNumbers) {
+      const lineNum = document.createElement('span');
+      lineNum.className = 'jux-code-line-number';
+      lineNum.textContent = String(lineNumber);
+      lineEl.appendChild(lineNum);
+    }
+
+    // Line content with syntax highlighting
+    const lineCode = document.createElement('span');
+    lineCode.className = 'jux-code-line-content';
+    lineCode.innerHTML = renderLineWithTokens(parsedLine);
+    lineEl.appendChild(lineCode);
+
+    return lineEl;
+  }
+
+  /**
+   * Update highlighted lines without full rebuild
+   */
+  private _updateHighlights(): void {
+    if (!this._codeContainer) return;
+
+    const lines = this._codeContainer.querySelectorAll('.jux-code-line');
+    lines.forEach((line) => {
+      const lineNum = parseInt(line.getAttribute('data-line') || '0', 10);
+      const isHighlighted = this.state.highlightLines.includes(lineNum);
+      line.classList.toggle('jux-code-line-highlight', isHighlighted);
+    });
+  }
+
   /* ═════════════════════════════════════════════════════════════════
    * RENDER
    * ═════════════════════════════════════════════════════════════════ */
@@ -61,18 +185,41 @@ export class Code extends BaseComponent<CodeState> {
   render(targetId?: string | HTMLElement | BaseComponent<any>): this {
     const container = this._setupContainer(targetId);
 
-    const { content, language, style, class: className } = this.state;
+    // ✅ 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';
     wrapper.id = this._id;
+    if (!showLineNumbers) wrapper.classList.add('jux-code-no-numbers');
     if (className) wrapper.className += ` ${className}`;
     if (style) wrapper.setAttribute('style', style);
 
     const pre = document.createElement('pre');
+    pre.className = `language-${language}`;
+
     const codeEl = document.createElement('code');
-    codeEl.className = `language-${language}`;
-    codeEl.textContent = content;
+    codeEl.className = 'jux-code-lines';
+
+    // Build initial lines with parsed tokens
+    const parsedLines = this._parseLines();
+    const { startLine, highlightLines } = this.state;
+
+    parsedLines.forEach((parsedLine, index) => {
+      const lineNumber = startLine + index;
+      const isHighlighted = highlightLines.includes(lineNumber);
+      const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
+      codeEl.appendChild(lineEl);
+    });
+
     pre.appendChild(codeEl);
     wrapper.appendChild(pre);
 
@@ -85,12 +232,8 @@ export class Code extends BaseComponent<CodeState> {
 
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
-          codeEl.textContent = transformed;
           this.state.content = transformed;
-
-          if ((window as any).Prism) {
-            (window as any).Prism.highlightElement(codeEl);
-          }
+          this._rebuildLines();
         });
       }
       else if (property === 'language') {
@@ -98,30 +241,24 @@ export class Code extends BaseComponent<CodeState> {
 
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
-          codeEl.className = `language-${transformed}`;
           this.state.language = transformed;
+          pre.className = `language-${transformed}`;
+          this._rebuildLines();
+        });
+      }
+      else if (property === 'highlightLines') {
+        const transform = toComponent || ((v: any) => (Array.isArray(v) ? v : []));
 
-          if ((window as any).Prism) {
-            (window as any).Prism.highlightElement(codeEl);
-          }
+        stateObj.subscribe((val: any) => {
+          const transformed = transform(val);
+          this.state.highlightLines = transformed;
+          this._updateHighlights();
         });
       }
     });
 
     container.appendChild(wrapper);
-
-    requestAnimationFrame(() => {
-      if ((window as any).Prism) {
-        (window as any).Prism.highlightElement(codeEl);
-      } else if (process.env.NODE_ENV !== 'production') {
-        // ✅ Helpful hint in development
-        console.log(
-          `💡 Tip: Add Prism.js for syntax highlighting:\n` +
-          `   <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.min.css" rel="stylesheet" />\n` +
-          `   <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>`
-        );
-      }
-    });
+    this._codeContainer = 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.43",
+  "version": "1.1.45",
   "type": "module",
   "description": "A JavaScript UX authorship platform",
   "main": "index.js",