juxscript 1.1.49 → 1.1.51

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;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"}
+{"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;CA4EnE;AAED,wBAAgB,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,GAAE,WAAgB,GAAG,IAAI,CAEhE"}

package/lib/components/code.js

@@ -149,9 +149,8 @@ export class Code extends BaseComponent {
             wrapper.className += ` ${className}`;
         if (style)
             wrapper.setAttribute('style', style);
-        const pre = document.createElement('pre');
-        pre.className = `language-${language}`;
-        const codeEl = document.createElement('code');
+        // ✅ Remove <pre>, just use a div with code styling
+        const codeEl = document.createElement('div');
         codeEl.className = 'jux-code-lines';
         // Build initial lines with parsed tokens
         const parsedLines = this._parseLines();
@@ -162,8 +161,7 @@ export class Code extends BaseComponent {
             const lineEl = this._createLineElement(parsedLine, lineNumber, isHighlighted);
             codeEl.appendChild(lineEl);
         });
-        pre.appendChild(codeEl);
-        wrapper.appendChild(pre);
+        wrapper.appendChild(codeEl);
         this._wireStandardEvents(wrapper);
         // Wire sync bindings
         this._syncBindings.forEach(({ property, stateObj, toState, toComponent }) => {
@@ -180,7 +178,6 @@ export class Code extends BaseComponent {
                 stateObj.subscribe((val) => {
                     const transformed = transform(val);
                     this.state.language = transformed;
-                    pre.className = `language-${transformed}`;
                     this._rebuildLines();
                 });
             }

package/lib/components/code.ts

@@ -198,10 +198,8 @@ export class Code extends BaseComponent<CodeState> {
     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');
+    // ✅ Remove <pre>, just use a div with code styling
+    const codeEl = document.createElement('div');
     codeEl.className = 'jux-code-lines';
 
     // Build initial lines with parsed tokens
@@ -215,8 +213,7 @@ export class Code extends BaseComponent<CodeState> {
       codeEl.appendChild(lineEl);
     });
 
-    pre.appendChild(codeEl);
-    wrapper.appendChild(pre);
+    wrapper.appendChild(codeEl);
 
     this._wireStandardEvents(wrapper);
 
@@ -237,7 +234,6 @@ export class Code extends BaseComponent<CodeState> {
         stateObj.subscribe((val: any) => {
           const transformed = transform(val);
           this.state.language = transformed;
-          pre.className = `language-${transformed}`;
           this._rebuildLines();
         });
       }

package/lib/utils/codeparser.d.ts

@@ -3,6 +3,10 @@ export interface ParsedLine {
     html: string;
     raw: string;
 }
+/**
+ * Escape HTML entities
+ */
+declare function escapeHtml(text: string): string;
 /**
  * Parse code into lines with simple syntax highlighting
  */
@@ -11,10 +15,6 @@ export declare function parseCode(code: string, language?: string): ParsedLine[]
  * Render a parsed line (just returns the pre-generated HTML)
  */
 export declare function renderLineWithTokens(parsedLine: ParsedLine): string;
-/**
- * Escape HTML entities
- */
-declare function escapeHtml(text: string): string;
 /**
  * Generate CSS for syntax highlighting
  */

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

@@ -1 +1 @@
-{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAqCD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAsE9C;AAED;;GAEG;;;;;;;AACH,wBAKE"}
+{"version":3,"file":"codeparser.d.ts","sourceRoot":"","sources":["codeparser.ts"],"names":[],"mappings":"AAYA,MAAM,WAAW,UAAU;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,iBAAS,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOxC;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAqB,GAAG,UAAU,EAAE,CAQrF;AAsCD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEnE;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAiE9C;AAED;;GAEG;;;;;;;AACH,wBAKE"}

package/lib/utils/codeparser.js

@@ -9,6 +9,17 @@ const KEYWORDS = new Set([
     'typeof', 'var', 'void', 'while', 'with', 'yield', 'from', 'of',
     'static', 'get', 'set', 'as', 'interface', 'type', 'enum', 'namespace'
 ]);
+/**
+ * Escape HTML entities
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
 /**
  * Parse code into lines with simple syntax highlighting
  */
@@ -26,26 +37,26 @@ export function parseCode(code, language = 'javascript') {
 function highlightLine(line) {
     if (!line.trim())
         return ' ';
-    let result = line;
-    // 1. Comments (do first to avoid highlighting keywords in comments)
-    result = result.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
-    result = result.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
-    // 2. Strings (avoid highlighting keywords in strings)
-    result = result.replace(/(['"`])(?:(?=(\\?))\2.)*?\1/g, (match) => {
-        return `<span class="token-string">${escapeHtml(match)}</span>`;
-    });
+    // Escape the raw line first
+    let escaped = escapeHtml(line);
+    // Now add spans (on already-escaped text)
+    // 1. Comments
+    escaped = escaped.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
+    escaped = escaped.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
+    // 2. Strings (already escaped, so look for &quot; etc)
+    escaped = escaped.replace(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, '<span class="token-string">$1</span>');
     // 3. Numbers
-    result = result.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
+    escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
     // 4. Keywords (only whole words)
     KEYWORDS.forEach(keyword => {
         const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-        result = result.replace(regex, '<span class="token-keyword">$1</span>');
+        escaped = escaped.replace(regex, '<span class="token-keyword">$1</span>');
     });
-    // 5. Braces, brackets, parentheses
-    result = result.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
+    // 5. Braces, brackets, parentheses (these are plain text, not escaped)
+    escaped = escaped.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
     // 6. Operators
-    result = result.replace(/([+\-*/%=<>!&|^~?:])/g, '<span class="token-operator">$1</span>');
-    return result || ' ';
+    escaped = escaped.replace(/([+\-*/%=&lt;&gt;!&|^~?:])/g, '<span class="token-operator">$1</span>');
+    return escaped || ' ';
 }
 /**
  * Render a parsed line (just returns the pre-generated HTML)
@@ -53,17 +64,6 @@ function highlightLine(line) {
 export function renderLineWithTokens(parsedLine) {
     return parsedLine.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
  */
@@ -78,13 +78,8 @@ export function getSyntaxHighlightCSS() {
     border-radius: 8px;
     overflow: hidden;
     margin: 1rem 0;
-}
-
-.jux-code pre {
-    margin: 0;
     padding: 1rem;
     overflow-x: auto;
-    background: transparent;
 }
 
 .jux-code-lines {

package/lib/utils/codeparser.ts

@@ -16,6 +16,18 @@ export interface ParsedLine {
     raw: string;
 }
 
+/**
+ * Escape HTML entities
+ */
+function escapeHtml(text: string): string {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+
 /**
  * Parse code into lines with simple syntax highlighting
  */
@@ -35,33 +47,34 @@ export function parseCode(code: string, language: string = 'javascript'): Parsed
 function highlightLine(line: string): string {
     if (!line.trim()) return ' ';
 
-    let result = line;
+    // Escape the raw line first
+    let escaped = escapeHtml(line);
 
-    // 1. Comments (do first to avoid highlighting keywords in comments)
-    result = result.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
-    result = result.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
+    // Now add spans (on already-escaped text)
 
-    // 2. Strings (avoid highlighting keywords in strings)
-    result = result.replace(/(['"`])(?:(?=(\\?))\2.)*?\1/g, (match) => {
-        return `<span class="token-string">${escapeHtml(match)}</span>`;
-    });
+    // 1. Comments
+    escaped = escaped.replace(/(\/\/.*$)/g, '<span class="token-comment">$1</span>');
+    escaped = escaped.replace(/(\/\*[\s\S]*?\*\/)/g, '<span class="token-comment">$1</span>');
+
+    // 2. Strings (already escaped, so look for &quot; etc)
+    escaped = escaped.replace(/(&quot;[^&]*?&quot;|&#39;[^&]*?&#39;|`[^`]*?`)/g, '<span class="token-string">$1</span>');
 
     // 3. Numbers
-    result = result.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
+    escaped = escaped.replace(/\b(\d+\.?\d*)\b/g, '<span class="token-number">$1</span>');
 
     // 4. Keywords (only whole words)
     KEYWORDS.forEach(keyword => {
         const regex = new RegExp(`\\b(${keyword})\\b`, 'g');
-        result = result.replace(regex, '<span class="token-keyword">$1</span>');
+        escaped = escaped.replace(regex, '<span class="token-keyword">$1</span>');
     });
 
-    // 5. Braces, brackets, parentheses
-    result = result.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
+    // 5. Braces, brackets, parentheses (these are plain text, not escaped)
+    escaped = escaped.replace(/([{}[\]()])/g, '<span class="token-punctuation">$1</span>');
 
     // 6. Operators
-    result = result.replace(/([+\-*/%=<>!&|^~?:])/g, '<span class="token-operator">$1</span>');
+    escaped = escaped.replace(/([+\-*/%=&lt;&gt;!&|^~?:])/g, '<span class="token-operator">$1</span>');
 
-    return result || ' ';
+    return escaped || ' ';
 }
 
 /**
@@ -71,18 +84,6 @@ export function renderLineWithTokens(parsedLine: ParsedLine): string {
     return parsedLine.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
  */
@@ -97,13 +98,8 @@ export function getSyntaxHighlightCSS(): string {
     border-radius: 8px;
     overflow: hidden;
     margin: 1rem 0;
-}
-
-.jux-code pre {
-    margin: 0;
     padding: 1rem;
     overflow-x: auto;
-    background: transparent;
 }
 
 .jux-code-lines {

package/package.json

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