@codady/coax 0.0.4 → 0.0.5

package/dist/coax.cjs.js

@@ -1,8 +1,8 @@
 
 /*!
- * @since Last modified: 2026-1-12 14:46:3
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.4
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
@@ -278,7 +278,7 @@ class Coax extends HTMLElement {
     baseStylesEl; // Element for base styles
     themeStylesEl; // Element for theme styles
     dynamicStylesEl; // Element for dynamic styles
-    highlightedCodeEl; // Element that holds the highlighted code
+    highlightEl; // Element that holds the highlighted code
     headerEl; // Header element (for code name, tools, etc.)
     codeNameEl; // Code name element (shows language or alias)
     codeToolsEl; // Code tools element (for interactive tools like copy)
@@ -289,6 +289,7 @@ class Coax extends HTMLElement {
     lastLineString = ''; // The last line's string
     speed = 5; // Speed of the typing effect (higher is slower)
     autoScroll = true; // Flag to enable/disable auto-scrolling
+    canListen = true; // Flag to enable/disable auto-scrolling
     constructor() {
         super();
         // Attach a Shadow DOM to the custom element
@@ -425,7 +426,7 @@ class Coax extends HTMLElement {
             <style id="theme-styles"></style>
             <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
             <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
+                <pre><code id="highlight"></code></pre>
             </div>
         `;
         // Cache references to various elements
@@ -436,7 +437,7 @@ class Coax extends HTMLElement {
         this.codeNameEl = getEl('#code-name', this.shadowRoot);
         this.codeToolsEl = getEl('#code-tools', this.shadowRoot);
         this.codeBodyEl = getEl('#code-body', this.shadowRoot);
-        this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot);
+        this.highlightEl = getEl('#highlight', this.shadowRoot);
         this.codeBodyEl.addEventListener('scroll', () => {
             let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
             // Check if the user manually scrolled
@@ -471,7 +472,7 @@ class Coax extends HTMLElement {
     static get observedAttributes() { return ['lang', 'height', 'max-height', 'tools', 'speed']; }
     
     attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal)
+        if (oldVal === newVal || !this.canListen)
             return;
         if (name === 'height' || name === 'max-height') {
             this.updateStyleByRegExp(name, newVal);
@@ -524,10 +525,10 @@ class Coax extends HTMLElement {
     createLineWrap(index, startIndex) {
         let dataIndex = 0;
         if (index == null && startIndex == null) {
-            dataIndex = this.highlightedCodeEl.children.length;
+            dataIndex = this.highlightEl.children.length;
         }
         else {
-            const start = startIndex || this.highlightedCodeEl.children.length;
+            const start = startIndex || this.highlightEl.children.length;
             dataIndex = start + index;
         }
         return createEl('div', { 'data-index': dataIndex }, '<div></div>');
@@ -542,7 +543,7 @@ class Coax extends HTMLElement {
     ;
     
     async highlight(newCode) {
-        const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
+        const config = Coax.languages.get(this.lang), startIndex = this.highlightEl.children.length, 
         // 将新源码按行分割
         newCodeLines = newCode ? newCode.split('\n') : [];
         //更新别名
@@ -559,7 +560,7 @@ class Coax extends HTMLElement {
             //标记完成
             lineWrap.completed = true;
             if (this.hasAttribute('speed')) {
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
                 //流式打字
                 await typeWriter(lineString, {
                     speed: this.speed,
@@ -573,7 +574,7 @@ class Coax extends HTMLElement {
                 //直接打出
                 this.getLineToFill(codeWrap, lineString, config);
                 //
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
             }
         }
         //滚动到最底部
@@ -635,18 +636,15 @@ class Coax extends HTMLElement {
         if (this._renderQueued)
             return;
         this._renderQueued = true;
-        // 使用 requestAnimationFrame 将渲染推迟到下一帧
-        requestAnimationFrame(async () => {
-            this.clear();
-            this.injectThemeStyles();
-            //一次性渲染
-            await this.highlight(code);
-            this._renderQueued = false;
-        });
+        this.clear();
+        this.injectThemeStyles();
+        //一次性渲染
+        this.highlight(code);
+        this._renderQueued = false;
     }
     
     clear() {
-        this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+        this.highlightEl.innerHTML = this.source = this.lineString = '';
     }
     
     async replace(newCode) {
@@ -662,7 +660,7 @@ class Coax extends HTMLElement {
     }
     
     getLastLine() {
-        const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+        const lastChild = this.highlightEl.lastElementChild, lastLine = !lastChild || this.highlightEl.lastElementChild?.completed ?
             this.createLineWrap() : lastChild;
         return {
             lineWrap: lastLine,
@@ -671,7 +669,7 @@ class Coax extends HTMLElement {
     }
     
     close() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap)
             return;
         lineWrap.completed = true;
@@ -683,7 +681,7 @@ class Coax extends HTMLElement {
     }
     
     open() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap)
             return;
         lineWrap.completed = false;
@@ -693,7 +691,7 @@ class Coax extends HTMLElement {
     
     stream(str, forceClose = false) {
         const { lineWrap, codeWrap } = this.getLastLine();
-        this.highlightedCodeEl.appendChild(lineWrap);
+        this.highlightEl.appendChild(lineWrap);
         //汇集
         this.source += str;
         //如果没有遇到换行符号，也可以强制结束

package/dist/coax.cjs.min.js

@@ -1,7 +1,7 @@
 /*!
- * @since Last modified: 2026-1-12 14:46:3
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.4
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
@@ -12,4 +12,4 @@
  * @copyright This software supports the MIT License, allowing free learning and commercial use, but please retain the terms 'coax', 'Coax'  and 'COAX' within the software.
  * @license MIT license
  */
-"use strict";const typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(r=>{t?.onBeforeType?.(e);let i=0;const a=setInterval(()=>{if(i<e.length){const n=e.charAt(i),r=e.substring(0,i+1);t?.onDuringType?.(n,r),i++}else clearInterval(a),r(e),t?.onAfterType?.(e)},n)})},COMMA$1=",",SPACE$1=" ",trim$1=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses$1=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)},NAMESPACE="ax",getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),r=getDataType(t),i=r.includes("HTML")||"ShadowRoot"===r?t:document.querySelector(t),a=i&&i instanceof HTMLTemplateElement?i.content:i,o=null;if(e)if(n.includes("HTML"))o=e;else if("String"===n)try{o=(a||document).querySelector(e.trim())}catch{o=null}return o},createEl=(e,t,n)=>{let r=(e=e||"div").toUpperCase().trim(),i=document.createElement(r),a=getDataType(t);if(t&&"Object"===a)for(let e in t)t.hasOwnProperty(e)&&i.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===r)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(i,n),i},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},ALIAS="rep",addClasses=(e,t,n)=>{const r=getEl(e),i=parseClasses$1(t);r&&0!==i.length&&i.forEach(e=>{r.classList.add(e)})},createTools=e=>{const t=createEl("span",{class:"ax-box-tools"}),renderFn=e=>{const t={},n=e.extendable?'<i rep="arrow"></i>':"",r=(e.icon?`<i rep="icon">${e.icon}</i>`:"")+(e.disk?`<i rep="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i rep="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i rep="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i rep="label">${e.label}</i>`:"")+n;e.title&&(t.title=e.title),e.focusable&&(t.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(t,e.attrs),r),e.iconEl=e.wrapEl.querySelector('[rep="icon"]'),e.cubeEl=e.wrapEl.querySelector('[rep="cube"]'),e.diskEl=e.wrapEl.querySelector('[rep="disk"]'),e.imageEl=e.wrapEl.querySelector('[rep="image"]'),e.labelEl=e.wrapEl.querySelector('[rep="label"]'),!isEmpty(e.classes)&&addClasses(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let n of e)renderFn(n),t.appendChild(n.wrapEl),n?.action?.(n);return t};class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightedCodeEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;lang="plain";alias="Plain Text";lineString="";lastLineString="";speed=5;autoScroll=!0;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--ax-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--ax-code-background-color,var(--background));\n                    color:var(--ax-code-color,var(--color-code));\n                    border:var(--ax-code-border-width,var(--border-width)) var(--ax-code-border-style,var(--border-style)) var(--ax-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--ax-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--ax-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--ax-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--ax-code-padding,var(--padding)) 0;\n                    height:var(--ax-code-height,var(--height));\n                    max-height:var(--ax-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--ax-code-padding,var(--padding));\n                    line-height: var(--ax-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--ax-code-index-width,2em);\n                    margin-inline-end:var(--ax-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .ax-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight-code"></code></pre>\n            </div>\n        `,this.baseStylesEl=getEl("#base-styles",this.shadowRoot),this.themeStylesEl=getEl("#theme-styles",this.shadowRoot),this.dynamicStylesEl=getEl("#dynamic-styles",this.shadowRoot),this.headerEl=getEl("#code-header",this.shadowRoot),this.codeNameEl=getEl("#code-name",this.shadowRoot),this.codeToolsEl=getEl("#code-tools",this.shadowRoot),this.codeBodyEl=getEl("#code-body",this.shadowRoot),this.highlightedCodeEl=getEl("#highlight-code",this.shadowRoot),this.codeBodyEl.addEventListener("scroll",()=>{let e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses$1(n),t=Coax.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(e,t){if(!(t=t||Coax.languages.get(this.lang)))return e;const n=this.getCssPrefix(t),r=new RegExp(t.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return e.replace(r,(e,...r)=>{const i=r.findIndex(e=>void 0!==e);return-1!==i&&t.rules[i]?`<span class="ax-${n}-${t.rules[i].token}">${e}</span>`:e})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightedCodeEl.children.length;else{n=(t||this.highlightedCodeEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||Coax.languages.get(this.lang);let r=this.getHighLightString(t,n);e.innerHTML=r}async highlight(e){const t=Coax.languages.get(this.lang),n=this.highlightedCodeEl.children.length,r=e?e.split("\n"):[];if(this.updateName(t),!r.length)return!0;for(let[e,i]of r.entries()){if(!i.trim()&&this.hasAttribute("sanitized"))continue;const r=this.createLineWrap(e,n),a=r.lastElementChild;r.completed=!0,this.hasAttribute("speed")?(this.highlightedCodeEl.appendChild(r),await typeWriter(i,{speed:this.speed,onDuringType:(e,t)=>{a.innerHTML=t}}),this.getLineToFill(a,i,t)):(this.getLineToFill(a,i,t),this.highlightedCodeEl.appendChild(r))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const e=Coax.languages.get(this.lang);if(!e)return;let t=this.getCssPrefix(e),n=e.rules.map(e=>`\n                .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token}${e.light?","+e.light:""});}`).join("\n"),r="",i="";r+=':host([scheme="dark"]){',r+=e.rules.map(e=>"\n                "+(e.light?`\n                    .ax-${t}-${e.token} {color: var(--ax-${t}-${e.token},${e.dark});}`:"")).join("\n"),r+="}",i="@media (prefers-color-scheme: dark){\n                                :host{\n            ",i+=e.rules.map(e=>`\n                ${e.light?`\n                    .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token},${e.dark}); }`:""} `).join("\n"),i+="}",this.dynamicStylesEl.textContent=n+r+i,e?.themeStyles&&(this.themeStylesEl.textContent=e.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,requestAnimationFrame(async()=>{this.clear(),this.injectThemeStyles(),await this.highlight(e),this._renderQueued=!1}))}clear(){this.highlightedCodeEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getLastLine(){const e=this.highlightedCodeEl.lastElementChild,t=!e||this.highlightedCodeEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}close(){const e=this.highlightedCodeEl.lastElementChild;e&&(e.completed=!0,this.lastLineString=this.lineString,this.getLineToFill(e?.lastElementChild,this.lineString),this.lineString="")}open(){const e=this.highlightedCodeEl.lastElementChild;e&&(e.completed=!1,(e?.lastElementChild).textContent=this.lineString=this.lastLineString)}stream(e,t=!1){const{lineWrap:n,codeWrap:r}=this.getLastLine();this.highlightedCodeEl.appendChild(n),this.source+=e,t||e.startsWith("\n")||e.endsWith("\n")?this.close():(r.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}const css=[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,light:"#032f62",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,light:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,light:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,light:"#22863a",dark:"#7ee787"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,light:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,light:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,light:"#24292e",dark:"#c9d1d9"}],html=[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}],javascript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"keyword",pattern:/\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/,light:"#e36209",dark:"#ffa657"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,light:"#069598",dark:"#56b6c2"}],markdown=[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}],typescript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,light:"#953800",dark:"#ffa657"},{token:"keyword",pattern:/\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/,light:"#e36209",dark:"#ffa657"},{token:"type",pattern:/\b[A-Z]\w*\b/,light:"#005cc5",dark:"#79c0ff"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,light:"#089ba6",dark:"#79c0ff"}],COMMA=",",SPACE=" ",trim=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)},rtlStyle=(e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`,wrap=(e,t,n=!1,r)=>{const i=r?.size||"1em",a=r?.color||"currentColor",o=r?.thickness||2,l=r?.classes?parseClasses(r.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 24 24" fill="none" stroke="${a}"\n          stroke-width="${o}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?rtlStyle(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>wrap('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',icaxCopy,!1,e),copy={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}};exports.Coax=Coax,exports.copy=copy,exports.css=css,exports.html=html,exports.javascript=javascript,exports.markdown=markdown,exports.typescript=typescript;
+"use strict";const typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(r=>{t?.onBeforeType?.(e);let i=0;const a=setInterval(()=>{if(i<e.length){const n=e.charAt(i),r=e.substring(0,i+1);t?.onDuringType?.(n,r),i++}else clearInterval(a),r(e),t?.onAfterType?.(e)},n)})},COMMA$1=",",SPACE$1=" ",trim$1=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses$1=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)},NAMESPACE="ax",getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),r=getDataType(t),i=r.includes("HTML")||"ShadowRoot"===r?t:document.querySelector(t),a=i&&i instanceof HTMLTemplateElement?i.content:i,o=null;if(e)if(n.includes("HTML"))o=e;else if("String"===n)try{o=(a||document).querySelector(e.trim())}catch{o=null}return o},createEl=(e,t,n)=>{let r=(e=e||"div").toUpperCase().trim(),i=document.createElement(r),a=getDataType(t);if(t&&"Object"===a)for(let e in t)t.hasOwnProperty(e)&&i.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===r)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(i,n),i},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},ALIAS="rep",addClasses=(e,t,n)=>{const r=getEl(e),i=parseClasses$1(t);r&&0!==i.length&&i.forEach(e=>{r.classList.add(e)})},createTools=e=>{const t=createEl("span",{class:"ax-box-tools"}),renderFn=e=>{const t={},n=e.extendable?'<i rep="arrow"></i>':"",r=(e.icon?`<i rep="icon">${e.icon}</i>`:"")+(e.disk?`<i rep="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i rep="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i rep="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i rep="label">${e.label}</i>`:"")+n;e.title&&(t.title=e.title),e.focusable&&(t.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(t,e.attrs),r),e.iconEl=e.wrapEl.querySelector('[rep="icon"]'),e.cubeEl=e.wrapEl.querySelector('[rep="cube"]'),e.diskEl=e.wrapEl.querySelector('[rep="disk"]'),e.imageEl=e.wrapEl.querySelector('[rep="image"]'),e.labelEl=e.wrapEl.querySelector('[rep="label"]'),!isEmpty(e.classes)&&addClasses(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let n of e)renderFn(n),t.appendChild(n.wrapEl),n?.action?.(n);return t};class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;lang="plain";alias="Plain Text";lineString="";lastLineString="";speed=5;autoScroll=!0;canListen=!0;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--ax-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--ax-code-background-color,var(--background));\n                    color:var(--ax-code-color,var(--color-code));\n                    border:var(--ax-code-border-width,var(--border-width)) var(--ax-code-border-style,var(--border-style)) var(--ax-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--ax-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--ax-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--ax-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--ax-code-padding,var(--padding)) 0;\n                    height:var(--ax-code-height,var(--height));\n                    max-height:var(--ax-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--ax-code-padding,var(--padding));\n                    line-height: var(--ax-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--ax-code-index-width,2em);\n                    margin-inline-end:var(--ax-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .ax-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight"></code></pre>\n            </div>\n        `,this.baseStylesEl=getEl("#base-styles",this.shadowRoot),this.themeStylesEl=getEl("#theme-styles",this.shadowRoot),this.dynamicStylesEl=getEl("#dynamic-styles",this.shadowRoot),this.headerEl=getEl("#code-header",this.shadowRoot),this.codeNameEl=getEl("#code-name",this.shadowRoot),this.codeToolsEl=getEl("#code-tools",this.shadowRoot),this.codeBodyEl=getEl("#code-body",this.shadowRoot),this.highlightEl=getEl("#highlight",this.shadowRoot),this.codeBodyEl.addEventListener("scroll",()=>{let e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&this.canListen&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses$1(n),t=Coax.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(e,t){if(!(t=t||Coax.languages.get(this.lang)))return e;const n=this.getCssPrefix(t),r=new RegExp(t.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return e.replace(r,(e,...r)=>{const i=r.findIndex(e=>void 0!==e);return-1!==i&&t.rules[i]?`<span class="ax-${n}-${t.rules[i].token}">${e}</span>`:e})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightEl.children.length;else{n=(t||this.highlightEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||Coax.languages.get(this.lang);let r=this.getHighLightString(t,n);e.innerHTML=r}async highlight(e){const t=Coax.languages.get(this.lang),n=this.highlightEl.children.length,r=e?e.split("\n"):[];if(this.updateName(t),!r.length)return!0;for(let[e,i]of r.entries()){if(!i.trim()&&this.hasAttribute("sanitized"))continue;const r=this.createLineWrap(e,n),a=r.lastElementChild;r.completed=!0,this.hasAttribute("speed")?(this.highlightEl.appendChild(r),await typeWriter(i,{speed:this.speed,onDuringType:(e,t)=>{a.innerHTML=t}}),this.getLineToFill(a,i,t)):(this.getLineToFill(a,i,t),this.highlightEl.appendChild(r))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const e=Coax.languages.get(this.lang);if(!e)return;let t=this.getCssPrefix(e),n=e.rules.map(e=>`\n                .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token}${e.light?","+e.light:""});}`).join("\n"),r="",i="";r+=':host([scheme="dark"]){',r+=e.rules.map(e=>"\n                "+(e.light?`\n                    .ax-${t}-${e.token} {color: var(--ax-${t}-${e.token},${e.dark});}`:"")).join("\n"),r+="}",i="@media (prefers-color-scheme: dark){\n                                :host{\n            ",i+=e.rules.map(e=>`\n                ${e.light?`\n                    .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token},${e.dark}); }`:""} `).join("\n"),i+="}",this.dynamicStylesEl.textContent=n+r+i,e?.themeStyles&&(this.themeStylesEl.textContent=e.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,this.clear(),this.injectThemeStyles(),this.highlight(e),this._renderQueued=!1)}clear(){this.highlightEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getLastLine(){const e=this.highlightEl.lastElementChild,t=!e||this.highlightEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}close(){const e=this.highlightEl.lastElementChild;e&&(e.completed=!0,this.lastLineString=this.lineString,this.getLineToFill(e?.lastElementChild,this.lineString),this.lineString="")}open(){const e=this.highlightEl.lastElementChild;e&&(e.completed=!1,(e?.lastElementChild).textContent=this.lineString=this.lastLineString)}stream(e,t=!1){const{lineWrap:n,codeWrap:r}=this.getLastLine();this.highlightEl.appendChild(n),this.source+=e,t||e.startsWith("\n")||e.endsWith("\n")?this.close():(r.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}const css=[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,light:"#032f62",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,light:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,light:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,light:"#22863a",dark:"#7ee787"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,light:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,light:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,light:"#24292e",dark:"#c9d1d9"}],html=[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}],javascript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"keyword",pattern:/\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/,light:"#e36209",dark:"#ffa657"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,light:"#069598",dark:"#56b6c2"}],markdown=[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}],typescript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,light:"#953800",dark:"#ffa657"},{token:"keyword",pattern:/\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/,light:"#e36209",dark:"#ffa657"},{token:"type",pattern:/\b[A-Z]\w*\b/,light:"#005cc5",dark:"#79c0ff"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,light:"#089ba6",dark:"#79c0ff"}],COMMA=",",SPACE=" ",trim=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)},rtlStyle=(e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`,wrap=(e,t,n=!1,r)=>{const i=r?.size||"1em",a=r?.color||"currentColor",o=r?.thickness||2,l=r?.classes?parseClasses(r.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 24 24" fill="none" stroke="${a}"\n          stroke-width="${o}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?rtlStyle(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>wrap('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',icaxCopy,!1,e),copy={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}};exports.Coax=Coax,exports.copy=copy,exports.css=css,exports.html=html,exports.javascript=javascript,exports.markdown=markdown,exports.typescript=typescript;

package/dist/coax.esm.js

@@ -1,8 +1,8 @@
 
 /*!
- * @since Last modified: 2026-1-12 14:46:3
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.4
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
@@ -276,7 +276,7 @@ class Coax extends HTMLElement {
     baseStylesEl; // Element for base styles
     themeStylesEl; // Element for theme styles
     dynamicStylesEl; // Element for dynamic styles
-    highlightedCodeEl; // Element that holds the highlighted code
+    highlightEl; // Element that holds the highlighted code
     headerEl; // Header element (for code name, tools, etc.)
     codeNameEl; // Code name element (shows language or alias)
     codeToolsEl; // Code tools element (for interactive tools like copy)
@@ -287,6 +287,7 @@ class Coax extends HTMLElement {
     lastLineString = ''; // The last line's string
     speed = 5; // Speed of the typing effect (higher is slower)
     autoScroll = true; // Flag to enable/disable auto-scrolling
+    canListen = true; // Flag to enable/disable auto-scrolling
     constructor() {
         super();
         // Attach a Shadow DOM to the custom element
@@ -423,7 +424,7 @@ class Coax extends HTMLElement {
             <style id="theme-styles"></style>
             <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
             <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
+                <pre><code id="highlight"></code></pre>
             </div>
         `;
         // Cache references to various elements
@@ -434,7 +435,7 @@ class Coax extends HTMLElement {
         this.codeNameEl = getEl('#code-name', this.shadowRoot);
         this.codeToolsEl = getEl('#code-tools', this.shadowRoot);
         this.codeBodyEl = getEl('#code-body', this.shadowRoot);
-        this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot);
+        this.highlightEl = getEl('#highlight', this.shadowRoot);
         this.codeBodyEl.addEventListener('scroll', () => {
             let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
             // Check if the user manually scrolled
@@ -469,7 +470,7 @@ class Coax extends HTMLElement {
     static get observedAttributes() { return ['lang', 'height', 'max-height', 'tools', 'speed']; }
     
     attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal)
+        if (oldVal === newVal || !this.canListen)
             return;
         if (name === 'height' || name === 'max-height') {
             this.updateStyleByRegExp(name, newVal);
@@ -522,10 +523,10 @@ class Coax extends HTMLElement {
     createLineWrap(index, startIndex) {
         let dataIndex = 0;
         if (index == null && startIndex == null) {
-            dataIndex = this.highlightedCodeEl.children.length;
+            dataIndex = this.highlightEl.children.length;
         }
         else {
-            const start = startIndex || this.highlightedCodeEl.children.length;
+            const start = startIndex || this.highlightEl.children.length;
             dataIndex = start + index;
         }
         return createEl('div', { 'data-index': dataIndex }, '<div></div>');
@@ -540,7 +541,7 @@ class Coax extends HTMLElement {
     ;
     
     async highlight(newCode) {
-        const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
+        const config = Coax.languages.get(this.lang), startIndex = this.highlightEl.children.length, 
         // 将新源码按行分割
         newCodeLines = newCode ? newCode.split('\n') : [];
         //更新别名
@@ -557,7 +558,7 @@ class Coax extends HTMLElement {
             //标记完成
             lineWrap.completed = true;
             if (this.hasAttribute('speed')) {
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
                 //流式打字
                 await typeWriter(lineString, {
                     speed: this.speed,
@@ -571,7 +572,7 @@ class Coax extends HTMLElement {
                 //直接打出
                 this.getLineToFill(codeWrap, lineString, config);
                 //
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
             }
         }
         //滚动到最底部
@@ -633,18 +634,15 @@ class Coax extends HTMLElement {
         if (this._renderQueued)
             return;
         this._renderQueued = true;
-        // 使用 requestAnimationFrame 将渲染推迟到下一帧
-        requestAnimationFrame(async () => {
-            this.clear();
-            this.injectThemeStyles();
-            //一次性渲染
-            await this.highlight(code);
-            this._renderQueued = false;
-        });
+        this.clear();
+        this.injectThemeStyles();
+        //一次性渲染
+        this.highlight(code);
+        this._renderQueued = false;
     }
     
     clear() {
-        this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+        this.highlightEl.innerHTML = this.source = this.lineString = '';
     }
     
     async replace(newCode) {
@@ -660,7 +658,7 @@ class Coax extends HTMLElement {
     }
     
     getLastLine() {
-        const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+        const lastChild = this.highlightEl.lastElementChild, lastLine = !lastChild || this.highlightEl.lastElementChild?.completed ?
             this.createLineWrap() : lastChild;
         return {
             lineWrap: lastLine,
@@ -669,7 +667,7 @@ class Coax extends HTMLElement {
     }
     
     close() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap)
             return;
         lineWrap.completed = true;
@@ -681,7 +679,7 @@ class Coax extends HTMLElement {
     }
     
     open() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap)
             return;
         lineWrap.completed = false;
@@ -691,7 +689,7 @@ class Coax extends HTMLElement {
     
     stream(str, forceClose = false) {
         const { lineWrap, codeWrap } = this.getLastLine();
-        this.highlightedCodeEl.appendChild(lineWrap);
+        this.highlightEl.appendChild(lineWrap);
         //汇集
         this.source += str;
         //如果没有遇到换行符号，也可以强制结束

package/dist/coax.esm.min.js

@@ -1,7 +1,7 @@
 /*!
- * @since Last modified: 2026-1-12 14:46:3
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.4
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
@@ -12,4 +12,4 @@
  * @copyright This software supports the MIT License, allowing free learning and commercial use, but please retain the terms 'coax', 'Coax'  and 'COAX' within the software.
  * @license MIT license
  */
-const typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(r=>{t?.onBeforeType?.(e);let i=0;const a=setInterval(()=>{if(i<e.length){const n=e.charAt(i),r=e.substring(0,i+1);t?.onDuringType?.(n,r),i++}else clearInterval(a),r(e),t?.onAfterType?.(e)},n)})},COMMA$1=",",SPACE$1=" ",trim$1=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses$1=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)},NAMESPACE="ax",getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),r=getDataType(t),i=r.includes("HTML")||"ShadowRoot"===r?t:document.querySelector(t),a=i&&i instanceof HTMLTemplateElement?i.content:i,o=null;if(e)if(n.includes("HTML"))o=e;else if("String"===n)try{o=(a||document).querySelector(e.trim())}catch{o=null}return o},createEl=(e,t,n)=>{let r=(e=e||"div").toUpperCase().trim(),i=document.createElement(r),a=getDataType(t);if(t&&"Object"===a)for(let e in t)t.hasOwnProperty(e)&&i.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===r)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(i,n),i},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},ALIAS="rep",addClasses=(e,t,n)=>{const r=getEl(e),i=parseClasses$1(t);r&&0!==i.length&&i.forEach(e=>{r.classList.add(e)})},createTools=e=>{const t=createEl("span",{class:"ax-box-tools"}),renderFn=e=>{const t={},n=e.extendable?'<i rep="arrow"></i>':"",r=(e.icon?`<i rep="icon">${e.icon}</i>`:"")+(e.disk?`<i rep="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i rep="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i rep="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i rep="label">${e.label}</i>`:"")+n;e.title&&(t.title=e.title),e.focusable&&(t.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(t,e.attrs),r),e.iconEl=e.wrapEl.querySelector('[rep="icon"]'),e.cubeEl=e.wrapEl.querySelector('[rep="cube"]'),e.diskEl=e.wrapEl.querySelector('[rep="disk"]'),e.imageEl=e.wrapEl.querySelector('[rep="image"]'),e.labelEl=e.wrapEl.querySelector('[rep="label"]'),!isEmpty(e.classes)&&addClasses(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let n of e)renderFn(n),t.appendChild(n.wrapEl),n?.action?.(n);return t};class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightedCodeEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;lang="plain";alias="Plain Text";lineString="";lastLineString="";speed=5;autoScroll=!0;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--ax-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--ax-code-background-color,var(--background));\n                    color:var(--ax-code-color,var(--color-code));\n                    border:var(--ax-code-border-width,var(--border-width)) var(--ax-code-border-style,var(--border-style)) var(--ax-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--ax-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--ax-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--ax-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--ax-code-padding,var(--padding)) 0;\n                    height:var(--ax-code-height,var(--height));\n                    max-height:var(--ax-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--ax-code-padding,var(--padding));\n                    line-height: var(--ax-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--ax-code-index-width,2em);\n                    margin-inline-end:var(--ax-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .ax-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight-code"></code></pre>\n            </div>\n        `,this.baseStylesEl=getEl("#base-styles",this.shadowRoot),this.themeStylesEl=getEl("#theme-styles",this.shadowRoot),this.dynamicStylesEl=getEl("#dynamic-styles",this.shadowRoot),this.headerEl=getEl("#code-header",this.shadowRoot),this.codeNameEl=getEl("#code-name",this.shadowRoot),this.codeToolsEl=getEl("#code-tools",this.shadowRoot),this.codeBodyEl=getEl("#code-body",this.shadowRoot),this.highlightedCodeEl=getEl("#highlight-code",this.shadowRoot),this.codeBodyEl.addEventListener("scroll",()=>{let e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses$1(n),t=Coax.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(e,t){if(!(t=t||Coax.languages.get(this.lang)))return e;const n=this.getCssPrefix(t),r=new RegExp(t.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return e.replace(r,(e,...r)=>{const i=r.findIndex(e=>void 0!==e);return-1!==i&&t.rules[i]?`<span class="ax-${n}-${t.rules[i].token}">${e}</span>`:e})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightedCodeEl.children.length;else{n=(t||this.highlightedCodeEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||Coax.languages.get(this.lang);let r=this.getHighLightString(t,n);e.innerHTML=r}async highlight(e){const t=Coax.languages.get(this.lang),n=this.highlightedCodeEl.children.length,r=e?e.split("\n"):[];if(this.updateName(t),!r.length)return!0;for(let[e,i]of r.entries()){if(!i.trim()&&this.hasAttribute("sanitized"))continue;const r=this.createLineWrap(e,n),a=r.lastElementChild;r.completed=!0,this.hasAttribute("speed")?(this.highlightedCodeEl.appendChild(r),await typeWriter(i,{speed:this.speed,onDuringType:(e,t)=>{a.innerHTML=t}}),this.getLineToFill(a,i,t)):(this.getLineToFill(a,i,t),this.highlightedCodeEl.appendChild(r))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const e=Coax.languages.get(this.lang);if(!e)return;let t=this.getCssPrefix(e),n=e.rules.map(e=>`\n                .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token}${e.light?","+e.light:""});}`).join("\n"),r="",i="";r+=':host([scheme="dark"]){',r+=e.rules.map(e=>"\n                "+(e.light?`\n                    .ax-${t}-${e.token} {color: var(--ax-${t}-${e.token},${e.dark});}`:"")).join("\n"),r+="}",i="@media (prefers-color-scheme: dark){\n                                :host{\n            ",i+=e.rules.map(e=>`\n                ${e.light?`\n                    .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token},${e.dark}); }`:""} `).join("\n"),i+="}",this.dynamicStylesEl.textContent=n+r+i,e?.themeStyles&&(this.themeStylesEl.textContent=e.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,requestAnimationFrame(async()=>{this.clear(),this.injectThemeStyles(),await this.highlight(e),this._renderQueued=!1}))}clear(){this.highlightedCodeEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getLastLine(){const e=this.highlightedCodeEl.lastElementChild,t=!e||this.highlightedCodeEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}close(){const e=this.highlightedCodeEl.lastElementChild;e&&(e.completed=!0,this.lastLineString=this.lineString,this.getLineToFill(e?.lastElementChild,this.lineString),this.lineString="")}open(){const e=this.highlightedCodeEl.lastElementChild;e&&(e.completed=!1,(e?.lastElementChild).textContent=this.lineString=this.lastLineString)}stream(e,t=!1){const{lineWrap:n,codeWrap:r}=this.getLastLine();this.highlightedCodeEl.appendChild(n),this.source+=e,t||e.startsWith("\n")||e.endsWith("\n")?this.close():(r.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}const css=[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,light:"#032f62",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,light:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,light:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,light:"#22863a",dark:"#7ee787"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,light:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,light:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,light:"#24292e",dark:"#c9d1d9"}],html=[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}],javascript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"keyword",pattern:/\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/,light:"#e36209",dark:"#ffa657"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,light:"#069598",dark:"#56b6c2"}],markdown=[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}],typescript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,light:"#953800",dark:"#ffa657"},{token:"keyword",pattern:/\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/,light:"#e36209",dark:"#ffa657"},{token:"type",pattern:/\b[A-Z]\w*\b/,light:"#005cc5",dark:"#79c0ff"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,light:"#089ba6",dark:"#79c0ff"}],COMMA=",",SPACE=" ",trim=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)},rtlStyle=(e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`,wrap=(e,t,n=!1,r)=>{const i=r?.size||"1em",a=r?.color||"currentColor",o=r?.thickness||2,l=r?.classes?parseClasses(r.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 24 24" fill="none" stroke="${a}"\n          stroke-width="${o}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?rtlStyle(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>wrap('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',icaxCopy,!1,e),copy={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}};export{Coax,copy,css,html,javascript,markdown,typescript};
+const typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(r=>{t?.onBeforeType?.(e);let i=0;const a=setInterval(()=>{if(i<e.length){const n=e.charAt(i),r=e.substring(0,i+1);t?.onDuringType?.(n,r),i++}else clearInterval(a),r(e),t?.onAfterType?.(e)},n)})},COMMA$1=",",SPACE$1=" ",trim$1=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses$1=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)},NAMESPACE="ax",getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),r=getDataType(t),i=r.includes("HTML")||"ShadowRoot"===r?t:document.querySelector(t),a=i&&i instanceof HTMLTemplateElement?i.content:i,o=null;if(e)if(n.includes("HTML"))o=e;else if("String"===n)try{o=(a||document).querySelector(e.trim())}catch{o=null}return o},createEl=(e,t,n)=>{let r=(e=e||"div").toUpperCase().trim(),i=document.createElement(r),a=getDataType(t);if(t&&"Object"===a)for(let e in t)t.hasOwnProperty(e)&&i.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===r)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(i,n),i},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},ALIAS="rep",addClasses=(e,t,n)=>{const r=getEl(e),i=parseClasses$1(t);r&&0!==i.length&&i.forEach(e=>{r.classList.add(e)})},createTools=e=>{const t=createEl("span",{class:"ax-box-tools"}),renderFn=e=>{const t={},n=e.extendable?'<i rep="arrow"></i>':"",r=(e.icon?`<i rep="icon">${e.icon}</i>`:"")+(e.disk?`<i rep="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i rep="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i rep="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i rep="label">${e.label}</i>`:"")+n;e.title&&(t.title=e.title),e.focusable&&(t.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(t,e.attrs),r),e.iconEl=e.wrapEl.querySelector('[rep="icon"]'),e.cubeEl=e.wrapEl.querySelector('[rep="cube"]'),e.diskEl=e.wrapEl.querySelector('[rep="disk"]'),e.imageEl=e.wrapEl.querySelector('[rep="image"]'),e.labelEl=e.wrapEl.querySelector('[rep="label"]'),!isEmpty(e.classes)&&addClasses(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let n of e)renderFn(n),t.appendChild(n.wrapEl),n?.action?.(n);return t};class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;lang="plain";alias="Plain Text";lineString="";lastLineString="";speed=5;autoScroll=!0;canListen=!0;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--ax-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--ax-code-background-color,var(--background));\n                    color:var(--ax-code-color,var(--color-code));\n                    border:var(--ax-code-border-width,var(--border-width)) var(--ax-code-border-style,var(--border-style)) var(--ax-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--ax-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--ax-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--ax-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--ax-code-padding,var(--padding)) 0;\n                    height:var(--ax-code-height,var(--height));\n                    max-height:var(--ax-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--ax-code-padding,var(--padding));\n                    line-height: var(--ax-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--ax-code-index-width,2em);\n                    margin-inline-end:var(--ax-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .ax-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight"></code></pre>\n            </div>\n        `,this.baseStylesEl=getEl("#base-styles",this.shadowRoot),this.themeStylesEl=getEl("#theme-styles",this.shadowRoot),this.dynamicStylesEl=getEl("#dynamic-styles",this.shadowRoot),this.headerEl=getEl("#code-header",this.shadowRoot),this.codeNameEl=getEl("#code-name",this.shadowRoot),this.codeToolsEl=getEl("#code-tools",this.shadowRoot),this.codeBodyEl=getEl("#code-body",this.shadowRoot),this.highlightEl=getEl("#highlight",this.shadowRoot),this.codeBodyEl.addEventListener("scroll",()=>{let e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&this.canListen&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses$1(n),t=Coax.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(e,t){if(!(t=t||Coax.languages.get(this.lang)))return e;const n=this.getCssPrefix(t),r=new RegExp(t.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return e.replace(r,(e,...r)=>{const i=r.findIndex(e=>void 0!==e);return-1!==i&&t.rules[i]?`<span class="ax-${n}-${t.rules[i].token}">${e}</span>`:e})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightEl.children.length;else{n=(t||this.highlightEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||Coax.languages.get(this.lang);let r=this.getHighLightString(t,n);e.innerHTML=r}async highlight(e){const t=Coax.languages.get(this.lang),n=this.highlightEl.children.length,r=e?e.split("\n"):[];if(this.updateName(t),!r.length)return!0;for(let[e,i]of r.entries()){if(!i.trim()&&this.hasAttribute("sanitized"))continue;const r=this.createLineWrap(e,n),a=r.lastElementChild;r.completed=!0,this.hasAttribute("speed")?(this.highlightEl.appendChild(r),await typeWriter(i,{speed:this.speed,onDuringType:(e,t)=>{a.innerHTML=t}}),this.getLineToFill(a,i,t)):(this.getLineToFill(a,i,t),this.highlightEl.appendChild(r))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const e=Coax.languages.get(this.lang);if(!e)return;let t=this.getCssPrefix(e),n=e.rules.map(e=>`\n                .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token}${e.light?","+e.light:""});}`).join("\n"),r="",i="";r+=':host([scheme="dark"]){',r+=e.rules.map(e=>"\n                "+(e.light?`\n                    .ax-${t}-${e.token} {color: var(--ax-${t}-${e.token},${e.dark});}`:"")).join("\n"),r+="}",i="@media (prefers-color-scheme: dark){\n                                :host{\n            ",i+=e.rules.map(e=>`\n                ${e.light?`\n                    .ax-${t}-${e.token} { color: var(--ax-${t}-${e.token},${e.dark}); }`:""} `).join("\n"),i+="}",this.dynamicStylesEl.textContent=n+r+i,e?.themeStyles&&(this.themeStylesEl.textContent=e.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,this.clear(),this.injectThemeStyles(),this.highlight(e),this._renderQueued=!1)}clear(){this.highlightEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getLastLine(){const e=this.highlightEl.lastElementChild,t=!e||this.highlightEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}close(){const e=this.highlightEl.lastElementChild;e&&(e.completed=!0,this.lastLineString=this.lineString,this.getLineToFill(e?.lastElementChild,this.lineString),this.lineString="")}open(){const e=this.highlightEl.lastElementChild;e&&(e.completed=!1,(e?.lastElementChild).textContent=this.lineString=this.lastLineString)}stream(e,t=!1){const{lineWrap:n,codeWrap:r}=this.getLastLine();this.highlightEl.appendChild(n),this.source+=e,t||e.startsWith("\n")||e.endsWith("\n")?this.close():(r.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}const css=[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,light:"#032f62",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,light:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,light:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,light:"#22863a",dark:"#7ee787"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,light:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,light:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,light:"#24292e",dark:"#c9d1d9"}],html=[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}],javascript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"keyword",pattern:/\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/,light:"#e36209",dark:"#ffa657"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,light:"#069598",dark:"#56b6c2"}],markdown=[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}],typescript=[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,light:"#953800",dark:"#ffa657"},{token:"keyword",pattern:/\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/,light:"#e36209",dark:"#ffa657"},{token:"type",pattern:/\b[A-Z]\w*\b/,light:"#005cc5",dark:"#79c0ff"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,light:"#089ba6",dark:"#79c0ff"}],COMMA=",",SPACE=" ",trim=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)},rtlStyle=(e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`,wrap=(e,t,n=!1,r)=>{const i=r?.size||"1em",a=r?.color||"currentColor",o=r?.thickness||2,l=r?.classes?parseClasses(r.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${i}" height="${i}" viewBox="0 0 24 24" fill="none" stroke="${a}"\n          stroke-width="${o}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?rtlStyle(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>wrap('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',icaxCopy,!1,e),copy={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}};export{Coax,copy,css,html,javascript,markdown,typescript};

package/dist/coax.umd.js

@@ -1,8 +1,8 @@
 
 /*!
- * @since Last modified: 2026-1-12 14:46:3
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.4
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
@@ -446,7 +446,7 @@
         baseStylesEl; // Element for base styles
         themeStylesEl; // Element for theme styles
         dynamicStylesEl; // Element for dynamic styles
-        highlightedCodeEl; // Element that holds the highlighted code
+        highlightEl; // Element that holds the highlighted code
         headerEl; // Header element (for code name, tools, etc.)
         codeNameEl; // Code name element (shows language or alias)
         codeToolsEl; // Code tools element (for interactive tools like copy)
@@ -457,6 +457,7 @@
         lastLineString = ''; // The last line's string
         speed = 5; // Speed of the typing effect (higher is slower)
         autoScroll = true; // Flag to enable/disable auto-scrolling
+        canListen = true; // Flag to enable/disable auto-scrolling
         constructor() {
             super();
             // Attach a Shadow DOM to the custom element
@@ -593,7 +594,7 @@
             <style id="theme-styles"></style>
             <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
             <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
+                <pre><code id="highlight"></code></pre>
             </div>
         `;
             // Cache references to various elements
@@ -604,7 +605,7 @@
             this.codeNameEl = getEl('#code-name', this.shadowRoot);
             this.codeToolsEl = getEl('#code-tools', this.shadowRoot);
             this.codeBodyEl = getEl('#code-body', this.shadowRoot);
-            this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot);
+            this.highlightEl = getEl('#highlight', this.shadowRoot);
             this.codeBodyEl.addEventListener('scroll', () => {
                 let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
                 // Check if the user manually scrolled
@@ -639,7 +640,7 @@
         static get observedAttributes() { return ['lang', 'height', 'max-height', 'tools', 'speed']; }
         
         attributeChangedCallback(name, oldVal, newVal) {
-            if (oldVal === newVal)
+            if (oldVal === newVal || !this.canListen)
                 return;
             if (name === 'height' || name === 'max-height') {
                 this.updateStyleByRegExp(name, newVal);
@@ -692,10 +693,10 @@
         createLineWrap(index, startIndex) {
             let dataIndex = 0;
             if (index == null && startIndex == null) {
-                dataIndex = this.highlightedCodeEl.children.length;
+                dataIndex = this.highlightEl.children.length;
             }
             else {
-                const start = startIndex || this.highlightedCodeEl.children.length;
+                const start = startIndex || this.highlightEl.children.length;
                 dataIndex = start + index;
             }
             return createEl('div', { 'data-index': dataIndex }, '<div></div>');
@@ -710,7 +711,7 @@
         ;
         
         async highlight(newCode) {
-            const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
+            const config = Coax.languages.get(this.lang), startIndex = this.highlightEl.children.length, 
             // 将新源码按行分割
             newCodeLines = newCode ? newCode.split('\n') : [];
             //更新别名
@@ -727,7 +728,7 @@
                 //标记完成
                 lineWrap.completed = true;
                 if (this.hasAttribute('speed')) {
-                    this.highlightedCodeEl.appendChild(lineWrap);
+                    this.highlightEl.appendChild(lineWrap);
                     //流式打字
                     await typeWriter(lineString, {
                         speed: this.speed,
@@ -741,7 +742,7 @@
                     //直接打出
                     this.getLineToFill(codeWrap, lineString, config);
                     //
-                    this.highlightedCodeEl.appendChild(lineWrap);
+                    this.highlightEl.appendChild(lineWrap);
                 }
             }
             //滚动到最底部
@@ -803,18 +804,15 @@
             if (this._renderQueued)
                 return;
             this._renderQueued = true;
-            // 使用 requestAnimationFrame 将渲染推迟到下一帧
-            requestAnimationFrame(async () => {
-                this.clear();
-                this.injectThemeStyles();
-                //一次性渲染
-                await this.highlight(code);
-                this._renderQueued = false;
-            });
+            this.clear();
+            this.injectThemeStyles();
+            //一次性渲染
+            this.highlight(code);
+            this._renderQueued = false;
         }
         
         clear() {
-            this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+            this.highlightEl.innerHTML = this.source = this.lineString = '';
         }
         
         async replace(newCode) {
@@ -830,7 +828,7 @@
         }
         
         getLastLine() {
-            const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+            const lastChild = this.highlightEl.lastElementChild, lastLine = !lastChild || this.highlightEl.lastElementChild?.completed ?
                 this.createLineWrap() : lastChild;
             return {
                 lineWrap: lastLine,
@@ -839,7 +837,7 @@
         }
         
         close() {
-            const lineWrap = this.highlightedCodeEl.lastElementChild;
+            const lineWrap = this.highlightEl.lastElementChild;
             if (!lineWrap)
                 return;
             lineWrap.completed = true;
@@ -851,7 +849,7 @@
         }
         
         open() {
-            const lineWrap = this.highlightedCodeEl.lastElementChild;
+            const lineWrap = this.highlightEl.lastElementChild;
             if (!lineWrap)
                 return;
             lineWrap.completed = false;
@@ -861,7 +859,7 @@
         
         stream(str, forceClose = false) {
             const { lineWrap, codeWrap } = this.getLastLine();
-            this.highlightedCodeEl.appendChild(lineWrap);
+            this.highlightEl.appendChild(lineWrap);
             //汇集
             this.source += str;
             //如果没有遇到换行符号，也可以强制结束

package/dist/coax.umd.min.js

@@ -1,7 +1,7 @@
 /*!
- * @since Last modified: 2026-1-12 14:46:3
+ * @since Last modified: 2026-1-12 15:14:48
  * @name Coax event management system.
- * @version 0.0.4
+ * @version 0.0.5
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a lightweight web component for elegant code display with syntax highlighting, typewriter effects, and theme switching. Supports JavaScript, HTML, CSS, TypeScript, and Markdown with copy tools and customization.
  * @see {@link https://coax.axui.cn|Official website}
@@ -12,4 +12,4 @@
  * @copyright This software supports the MIT License, allowing free learning and commercial use, but please retain the terms 'coax', 'Coax'  and 'COAX' within the software.
  * @license MIT license
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).coax=t()}(this,function(){"use strict";const e="ax",trim$1=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},wrap=(e,t,n=!1,i)=>{const r=i?.size||"1em",o=i?.color||"currentColor",a=i?.thickness||2,l=i?.classes?(e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)})(i.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${r}" viewBox="0 0 24 24" fill="none" stroke="${o}"\n          stroke-width="${a}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?((e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`)(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>wrap('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',icaxCopy,!1,e),t={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}},typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(i=>{t?.onBeforeType?.(e);let r=0;const o=setInterval(()=>{if(r<e.length){const n=e.charAt(r),i=e.substring(0,r+1);t?.onDuringType?.(n,i),r++}else clearInterval(o),i(e),t?.onAfterType?.(e)},n)})},trim=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)},getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),i=getDataType(t),r=i.includes("HTML")||"ShadowRoot"===i?t:document.querySelector(t),o=r&&r instanceof HTMLTemplateElement?r.content:r,a=null;if(e)if(n.includes("HTML"))a=e;else if("String"===n)try{a=(o||document).querySelector(e.trim())}catch{a=null}return a},createEl=(e,t,n)=>{let i=(e=e||"div").toUpperCase().trim(),r=document.createElement(i),o=getDataType(t);if(t&&"Object"===o)for(let e in t)t.hasOwnProperty(e)&&r.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===i)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(r,n),r},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},n="rep",createTools=t=>{const i=createEl("span",{class:`${e}-box-tools`}),renderFn=e=>{const t={},i=e.extendable?`<i ${n}="arrow"></i>`:"",r=(e.icon?`<i ${n}="icon">${e.icon}</i>`:"")+(e.disk?`<i ${n}="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i ${n}="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i ${n}="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i ${n}="label">${e.label}</i>`:"")+i;e.title&&(t.title=e.title),e.focusable&&(t.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(t,e.attrs),r),e.iconEl=e.wrapEl.querySelector(`[${n}="icon"]`),e.cubeEl=e.wrapEl.querySelector(`[${n}="cube"]`),e.diskEl=e.wrapEl.querySelector(`[${n}="disk"]`),e.imageEl=e.wrapEl.querySelector(`[${n}="image"]`),e.labelEl=e.wrapEl.querySelector(`[${n}="label"]`),!isEmpty(e.classes)&&((e,t)=>{const n=getEl(e),i=parseClasses(t);n&&0!==i.length&&i.forEach(e=>{n.classList.add(e)})})(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let e of t)renderFn(e),i.appendChild(e.wrapEl),e?.action?.(e);return i};class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightedCodeEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;lang="plain";alias="Plain Text";lineString="";lastLineString="";speed=5;autoScroll=!0;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--${e}-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--${e}-code-background-color,var(--background));\n                    color:var(--${e}-code-color,var(--color-code));\n                    border:var(--${e}-code-border-width,var(--border-width)) var(--${e}-code-border-style,var(--border-style)) var(--${e}-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--${e}-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--${e}-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--${e}-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--${e}-code-padding,var(--padding)) 0;\n                    height:var(--${e}-code-height,var(--height));\n                    max-height:var(--${e}-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--${e}-code-padding,var(--padding));\n                    line-height: var(--${e}-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--${e}-code-index-width,2em);\n                    margin-inline-end:var(--${e}-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .${e}-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight-code"></code></pre>\n            </div>\n        `,this.baseStylesEl=getEl("#base-styles",this.shadowRoot),this.themeStylesEl=getEl("#theme-styles",this.shadowRoot),this.dynamicStylesEl=getEl("#dynamic-styles",this.shadowRoot),this.headerEl=getEl("#code-header",this.shadowRoot),this.codeNameEl=getEl("#code-name",this.shadowRoot),this.codeToolsEl=getEl("#code-tools",this.shadowRoot),this.codeBodyEl=getEl("#code-body",this.shadowRoot),this.highlightedCodeEl=getEl("#highlight-code",this.shadowRoot),this.codeBodyEl.addEventListener("scroll",()=>{let e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses(n),t=Coax.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(t,n){if(!(n=n||Coax.languages.get(this.lang)))return t;const i=this.getCssPrefix(n),r=new RegExp(n.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return t.replace(r,(t,...r)=>{const o=r.findIndex(e=>void 0!==e);return-1!==o&&n.rules[o]?`<span class="${e}-${i}-${n.rules[o].token}">${t}</span>`:t})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightedCodeEl.children.length;else{n=(t||this.highlightedCodeEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||Coax.languages.get(this.lang);let i=this.getHighLightString(t,n);e.innerHTML=i}async highlight(e){const t=Coax.languages.get(this.lang),n=this.highlightedCodeEl.children.length,i=e?e.split("\n"):[];if(this.updateName(t),!i.length)return!0;for(let[e,r]of i.entries()){if(!r.trim()&&this.hasAttribute("sanitized"))continue;const i=this.createLineWrap(e,n),o=i.lastElementChild;i.completed=!0,this.hasAttribute("speed")?(this.highlightedCodeEl.appendChild(i),await typeWriter(r,{speed:this.speed,onDuringType:(e,t)=>{o.innerHTML=t}}),this.getLineToFill(o,r,t)):(this.getLineToFill(o,r,t),this.highlightedCodeEl.appendChild(i))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const t=Coax.languages.get(this.lang);if(!t)return;let n=this.getCssPrefix(t),i=t.rules.map(t=>`\n                .${e}-${n}-${t.token} { color: var(--${e}-${n}-${t.token}${t.light?","+t.light:""});}`).join("\n"),r="",o="";r+=':host([scheme="dark"]){',r+=t.rules.map(t=>"\n                "+(t.light?`\n                    .${e}-${n}-${t.token} {color: var(--${e}-${n}-${t.token},${t.dark});}`:"")).join("\n"),r+="}",o="@media (prefers-color-scheme: dark){\n                                :host{\n            ",o+=t.rules.map(t=>`\n                ${t.light?`\n                    .${e}-${n}-${t.token} { color: var(--${e}-${n}-${t.token},${t.dark}); }`:""} `).join("\n"),o+="}",this.dynamicStylesEl.textContent=i+r+o,t?.themeStyles&&(this.themeStylesEl.textContent=t.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,requestAnimationFrame(async()=>{this.clear(),this.injectThemeStyles(),await this.highlight(e),this._renderQueued=!1}))}clear(){this.highlightedCodeEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getLastLine(){const e=this.highlightedCodeEl.lastElementChild,t=!e||this.highlightedCodeEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}close(){const e=this.highlightedCodeEl.lastElementChild;e&&(e.completed=!0,this.lastLineString=this.lineString,this.getLineToFill(e?.lastElementChild,this.lineString),this.lineString="")}open(){const e=this.highlightedCodeEl.lastElementChild;e&&(e.completed=!1,(e?.lastElementChild).textContent=this.lineString=this.lastLineString)}stream(e,t=!1){const{lineWrap:n,codeWrap:i}=this.getLastLine();this.highlightedCodeEl.appendChild(n),this.source+=e,t||e.startsWith("\n")||e.endsWith("\n")?this.close():(i.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}return Coax.register("css",{alias:"CSS",rules:[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,light:"#032f62",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,light:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,light:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,light:"#22863a",dark:"#7ee787"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,light:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,light:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,light:"#24292e",dark:"#c9d1d9"}]}),Coax.register("html",{alias:"HTML",rules:[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}]}),Coax.register("js",{alias:"Javascript",rules:[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"keyword",pattern:/\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/,light:"#e36209",dark:"#ffa657"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,light:"#069598",dark:"#56b6c2"}]}),Coax.register("ts",{alias:"Typescript",rules:[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,light:"#953800",dark:"#ffa657"},{token:"keyword",pattern:/\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/,light:"#e36209",dark:"#ffa657"},{token:"type",pattern:/\b[A-Z]\w*\b/,light:"#005cc5",dark:"#79c0ff"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,light:"#089ba6",dark:"#79c0ff"}]}),Coax.register("md",{alias:"Markdown",rules:[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}]}),Coax.addTools([t]),customElements.define(`${e}-code`,Coax),Coax});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).coax=t()}(this,function(){"use strict";const e="ax",trim$1=(e,t="")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},wrap=(e,t,n=!1,i)=>{const r=i?.size||"1em",o=i?.color||"currentColor",a=i?.thickness||2,l=i?.classes?(e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim$1(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim$1(e,"global")).filter(Boolean)})(i.classes).join(" "):"",s=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${r}" height="${r}" viewBox="0 0 24 24" fill="none" stroke="${o}"\n          stroke-width="${a}" stroke-linecap="round" stroke-linejoin="round" class="${s} ${l}">\n          ${n?((e="")=>`\n            <style>\n                :where([dir="rtl"]) .icax-${e},\n                :where(:dir(rtl)) .icax-${e} {\n                    transform: scaleX(-1);\n                    transform-origin: center;\n                }\n            </style>\n`)(s.split("-")[1]):""}\n          ${e}\n      </svg>`},icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e),icaxCopy=e=>wrap('<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>',icaxCopy,!1,e),t={name:"copy",icon:icaxCopy(),action:function(e){e.wrapEl.onclick=()=>{navigator.clipboard.writeText(this.source).then(()=>{e.iconEl.innerHTML=icaxCheck(),e.iconEl.toggleAttribute("disabled",!0),setTimeout(()=>{e.iconEl.removeAttribute("disabled"),e.iconEl.innerHTML=icaxCopy()},2e3)}).catch(e=>{})}}},typeWriter=(e,t)=>{const n=t.speed||100;return new Promise(i=>{t?.onBeforeType?.(e);let r=0;const o=setInterval(()=>{if(r<e.length){const n=e.charAt(r),i=e.substring(0,r+1);t?.onDuringType?.(n,i),r++}else clearInterval(o),i(e),t?.onAfterType?.(e)},n)})},trim=(e,t="compress")=>{if("string"!=typeof e)return"";switch(t){case"start":return e.trimStart();case"end":return e.trimEnd();case"both":return e.trim();case"global":return e.replace(/[\s\r\n]+/g,"");default:return e.trim().replace(/[\s\r\n]+/g," ")}},parseClasses=e=>{let t,n=[];return Array.isArray(e)?n=e.filter(e=>e&&"string"==typeof e):(t=(e=trim(e)).includes(",")?",":" ",n=e.split(t)),n.map(e=>trim(e,"global")).filter(Boolean)},getDataType=e=>{let t,n=Object.prototype.toString.call(e).slice(8,-1);return t="Function"===n&&/^\s*class\s+/.test(e.toString())?"Class":"Object"===n&&Object.getPrototypeOf(e)!==Object.prototype?"Instance":n,t},getEl=(e,t=document.body)=>{let n=getDataType(e),i=getDataType(t),r=i.includes("HTML")||"ShadowRoot"===i?t:document.querySelector(t),o=r&&r instanceof HTMLTemplateElement?r.content:r,a=null;if(e)if(n.includes("HTML"))a=e;else if("String"===n)try{a=(o||document).querySelector(e.trim())}catch{a=null}return a},createEl=(e,t,n)=>{let i=(e=e||"div").toUpperCase().trim(),r=document.createElement(i),o=getDataType(t);if(t&&"Object"===o)for(let e in t)t.hasOwnProperty(e)&&r.setAttribute(e,"string"==typeof t[e]?t[e]:JSON.stringify(t[e]));return((e,t)=>{if(""===t||null==t)return!1;let n=getDataType(t);if("TEMPLATE"===i)e.innerHTML=t.toString();else if("Array"===n&&t.length>0)for(let n of t){if(getDataType(n).includes("HTML"))e.appendChild(n);else{let t=createEl(n.name,n.attrs,n.content);t&&e.appendChild(t)}}else if(n.includes("HTML"))e.appendChild(t);else if("String"===n&&t.trim().startsWith("#")&&t.trim().length>1){let n=getEl(t);if(!n)return;"TEMPLATE"===n.nodeName?e.appendChild(n.content.cloneNode(!0)):e.insertAdjacentHTML("beforeEnd",n.innerHTML)}else e.insertAdjacentHTML("beforeEnd",t)})(r,n),r},isEmpty=e=>{let t,n=getDataType(e);return t=!e||("Object"===n?0===Object.keys(e).length:"Array"===n?""===e.join(""):"Function"===n?"{}"===e.toString().replace(/\s+/g,"").match(/{.*}/g)[0]:"Symbol"===n?"()"===e.toString().replace(/\s+/g,"").match(/\(.*\)/g)[0]:"Set"===n||"Map"===n?0===e.size:"Date"===n?isNaN(e.getTime()):"RegExp"===n?""===e.source:"ArrayBuffer"===n?0===e.byteLength:"NodeList"===n||"HTMLCollection"===n||"length"in e&&"number"==typeof e.length?0===e.length:"size"in e&&"number"==typeof e.size?0===e.size:"Error"===n||e instanceof Error?""===e.message:!(!n.includes("Array")||!["Uint8Array","Int8Array","Uint16Array","Int16Array","Uint32Array","Int32Array","Float32Array","Float64Array"].includes(n))&&0===e.length),t},n="rep",createTools=t=>{const i=createEl("span",{class:`${e}-box-tools`}),renderFn=e=>{const t={},i=e.extendable?`<i ${n}="arrow"></i>`:"",r=(e.icon?`<i ${n}="icon">${e.icon}</i>`:"")+(e.disk?`<i ${n}="disk"><img src="${e.disk}"/></i>`:"")+(e.cube?`<i ${n}="cube"><img src="${e.cube}"/></i>`:"")+(e.image?`<i ${n}="image"><img src="${e.image}"/></i>`:"")+(e.label?`<i ${n}="label">${e.label}</i>`:"")+i;e.title&&(t.title=e.title),e.focusable&&(t.tabindex=1),e.wrapEl=createEl(e.nodeName||"span",Object.assign(t,e.attrs),r),e.iconEl=e.wrapEl.querySelector(`[${n}="icon"]`),e.cubeEl=e.wrapEl.querySelector(`[${n}="cube"]`),e.diskEl=e.wrapEl.querySelector(`[${n}="disk"]`),e.imageEl=e.wrapEl.querySelector(`[${n}="image"]`),e.labelEl=e.wrapEl.querySelector(`[${n}="label"]`),!isEmpty(e.classes)&&((e,t)=>{const n=getEl(e),i=parseClasses(t);n&&0!==i.length&&i.forEach(e=>{n.classList.add(e)})})(e.wrapEl,e.classes),!isEmpty(e.styles)&&(e.wrapEl.style.cssText+=e.styles)};for(let e of t)renderFn(e),i.appendChild(e.wrapEl),e?.action?.(e);return i};class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightEl;headerEl;codeNameEl;codeToolsEl;codeBodyEl;lang="plain";alias="Plain Text";lineString="";lastLineString="";speed=5;autoScroll=!0;canListen=!0;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.shadowRoot.innerHTML=`\n            <style id="base-styles">\n                :host { \n                    --border-width:1px;\n                    --border-style:solid;\n                    --radius:9px;\n                    --height:auto;\n                    --max-height:500px;\n                    --radius:9px;\n                    --padding:1em;\n                    --font-size:16px;\n                    --line-height:1.8;\n                    --background:rgb(247, 247, 247);\n                    --border-color:rgb(224, 224, 224);\n                    --color-code:rgb(51, 51, 51);\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(0,0,0,0.04);\n                    --color-hover:rgba(0,0,0,0.06);\n                }           \n               :host([scheme="dark"]){\n                    --background: #282c34;\n                    --border-color: transparent;\n                    --color-code: #abb2bf;\n                    --color-index:rgb(153, 153, 153);\n                    --color-stripe:rgba(255,255,255,0.04);\n                    --color-hover:rgba(255,255,255,0.06);\n               }\n                @media (prefers-color-scheme: dark) {\n                    :host{\n                        --background: #282c34;\n                        --border-color: transparent;\n                        --color-code: #abb2bf;\n                        --color-index:rgb(153, 153, 153);\n                        --color-stripe:rgba(255,255,255,0.04);\n                        --color-hover:rgba(255,255,255,0.06);\n                    }\n                }\n                :host {\n                    font-size: var(--${e}-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--${e}-code-background-color,var(--background));\n                    color:var(--${e}-code-color,var(--color-code));\n                    border:var(--${e}-code-border-width,var(--border-width)) var(--${e}-code-border-style,var(--border-style)) var(--${e}-code-border-color,var(--border-color));\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--${e}-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--${e}-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--${e}-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--${e}-code-padding,var(--padding)) 0;\n                    height:var(--${e}-code-height,var(--height));\n                    max-height:var(--${e}-code-max-height,var(--max-height));\n                    overflow:auto;\n                }\n                pre,code{\n                    font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace";\n                    margin:0; padding:0;\n                }\n                code>div{\n                    display:flex;\n                    padding:0 var(--${e}-code-padding,var(--padding));\n                    line-height: var(--${e}-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\n                }\n                code>div>div:empty:before{\n                    content:' ';\n                }\n                :host([indexed]) code>div:before{\n                    display:inline-flex;\n                    color:var(--color-index);\n                    content: attr(data-index);\n                    min-width:var(--${e}-code-index-width,2em);\n                    margin-inline-end:var(--${e}-code-padding,8px);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([wrapped]) code>div>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .${e}-box-tools{\n                    >*{\n                        font-size:14px;\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                        height:2em;\n                        line-height:2em;\n                        aspect-ratio:1/1;\n                        margin-inline-end:8px;\n                        transition:all 200ms ease;\n                        border-radius:6px;\n                        &:hover{\n                            cursor:pointer;\n                            background-color:rgba(0,0,0,.04);\n                        }\n                    }\n                    [rep=icon]{\n                        display:inline-flex;\n                        align-items:center;\n                        justify-content:center;\n                    }\n                }\n                [disabled]{\n                    pointer-event:none;\n                }\n            </style>\n            <style id="dynamic-styles"></style>\n            <style id="theme-styles"></style>\n            <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>\n            <div id="code-body">\n                <pre><code id="highlight"></code></pre>\n            </div>\n        `,this.baseStylesEl=getEl("#base-styles",this.shadowRoot),this.themeStylesEl=getEl("#theme-styles",this.shadowRoot),this.dynamicStylesEl=getEl("#dynamic-styles",this.shadowRoot),this.headerEl=getEl("#code-header",this.shadowRoot),this.codeNameEl=getEl("#code-name",this.shadowRoot),this.codeToolsEl=getEl("#code-tools",this.shadowRoot),this.codeBodyEl=getEl("#code-body",this.shadowRoot),this.highlightEl=getEl("#highlight",this.shadowRoot),this.codeBodyEl.addEventListener("scroll",()=>{let e=this.codeBodyEl.scrollTop+this.codeBodyEl.clientHeight<this.codeBodyEl.scrollHeight;this.autoScroll=!e})}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.codeToolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.codeToolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools","speed"]}attributeChangedCallback(e,t,n){if(t!==n&&this.canListen&&("height"!==e&&"max-height"!==e||this.updateStyleByRegExp(e,n),"speed"===e&&(this.speed=~~!!n),"lang"===e&&(this.lang=n,this.render()),"tools"===e)){n||(this.codeToolsEl.innerHTML="");const e=parseClasses(n),t=Coax.tools.filter(t=>e.includes(t.name));if(!t.length)return;this.mountTools(t)}}updateStyleByRegExp(e,t){const n=new RegExp(`;\\n\\s*${e}:\\s*[^;]+;`,"g");this.baseStylesEl.textContent=this.baseStylesEl.textContent.replace(n,`;\n${e}: ${t};`)}getCssPrefix(e){return(e?.cssPrefix||this.lang).replace(/[^a-zA-Z0-9_-]/g,"\\$&")}getHighLightString(t,n){if(!(n=n||Coax.languages.get(this.lang)))return t;const i=this.getCssPrefix(n),r=new RegExp(n.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");return t.replace(r,(t,...r)=>{const o=r.findIndex(e=>void 0!==e);return-1!==o&&n.rules[o]?`<span class="${e}-${i}-${n.rules[o].token}">${t}</span>`:t})}createLineWrap(e,t){let n=0;if(null==e&&null==t)n=this.highlightEl.children.length;else{n=(t||this.highlightEl.children.length)+e}return createEl("div",{"data-index":n},"<div></div>")}getLineToFill(e,t,n){n=n||Coax.languages.get(this.lang);let i=this.getHighLightString(t,n);e.innerHTML=i}async highlight(e){const t=Coax.languages.get(this.lang),n=this.highlightEl.children.length,i=e?e.split("\n"):[];if(this.updateName(t),!i.length)return!0;for(let[e,r]of i.entries()){if(!r.trim()&&this.hasAttribute("sanitized"))continue;const i=this.createLineWrap(e,n),o=i.lastElementChild;i.completed=!0,this.hasAttribute("speed")?(this.highlightEl.appendChild(i),await typeWriter(r,{speed:this.speed,onDuringType:(e,t)=>{o.innerHTML=t}}),this.getLineToFill(o,r,t)):(this.getLineToFill(o,r,t),this.highlightEl.appendChild(i))}return this.autoScrollCode(),!0}autoScrollCode(){this.autoScroll&&(this.codeBodyEl.scrollTop=this.codeBodyEl.scrollHeight)}injectThemeStyles(){const t=Coax.languages.get(this.lang);if(!t)return;let n=this.getCssPrefix(t),i=t.rules.map(t=>`\n                .${e}-${n}-${t.token} { color: var(--${e}-${n}-${t.token}${t.light?","+t.light:""});}`).join("\n"),r="",o="";r+=':host([scheme="dark"]){',r+=t.rules.map(t=>"\n                "+(t.light?`\n                    .${e}-${n}-${t.token} {color: var(--${e}-${n}-${t.token},${t.dark});}`:"")).join("\n"),r+="}",o="@media (prefers-color-scheme: dark){\n                                :host{\n            ",o+=t.rules.map(t=>`\n                ${t.light?`\n                    .${e}-${n}-${t.token} { color: var(--${e}-${n}-${t.token},${t.dark}); }`:""} `).join("\n"),o+="}",this.dynamicStylesEl.textContent=i+r+o,t?.themeStyles&&(this.themeStylesEl.textContent=t.themeStyles)}updateName(e){this.hasAttribute("unnamed")||(e?(this.alias=e.alias||this.lang,this.codeNameEl.innerHTML=this.alias):this.codeNameEl.innerHTML="Plain Text")}render(e=this.source){this._renderQueued||(this._renderQueued=!0,this.clear(),this.injectThemeStyles(),this.highlight(e),this._renderQueued=!1)}clear(){this.highlightEl.innerHTML=this.source=this.lineString=""}async replace(e){this.clear(),await this.highlight(e)}async append(e){this.source+=`\n${e}`,await this.highlight(e)}getLastLine(){const e=this.highlightEl.lastElementChild,t=!e||this.highlightEl.lastElementChild?.completed?this.createLineWrap():e;return{lineWrap:t,codeWrap:t.lastElementChild}}close(){const e=this.highlightEl.lastElementChild;e&&(e.completed=!0,this.lastLineString=this.lineString,this.getLineToFill(e?.lastElementChild,this.lineString),this.lineString="")}open(){const e=this.highlightEl.lastElementChild;e&&(e.completed=!1,(e?.lastElementChild).textContent=this.lineString=this.lastLineString)}stream(e,t=!1){const{lineWrap:n,codeWrap:i}=this.getLastLine();this.highlightEl.appendChild(n),this.source+=e,t||e.startsWith("\n")||e.endsWith("\n")?this.close():(i.innerHTML+=e,this.lineString+=e),this.autoScrollCode()}}return Coax.register("css",{alias:"CSS",rules:[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,light:"#032f62",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,light:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,light:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,light:"#22863a",dark:"#7ee787"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,light:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,light:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,light:"#24292e",dark:"#c9d1d9"}]}),Coax.register("html",{alias:"HTML",rules:[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,light:"#999999",dark:"#6e7681"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,light:"#6a737d",dark:"#8b949e"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,light:"#22863a",dark:"#7ee787"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,light:"#6f42c1",dark:"#d2a8ff"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,light:"#032f62",dark:"#a5d6ff"},{token:"bracket",pattern:/\/?&gt;/,light:"#24292e",dark:"#c9d1d9"}]}),Coax.register("js",{alias:"Javascript",rules:[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"keyword",pattern:/\b(async|await|break|case|catch|class|const|continue|default|delete|do|else|export|extends|finally|for|function|if|import|in|instanceof|new|return|super|switch|this|throw|try|typeof|var|while|with|yield|let|static)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise|Number|String|Boolean)\b/,light:"#e36209",dark:"#ffa657"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,light:"#069598",dark:"#56b6c2"}]}),Coax.register("ts",{alias:"Typescript",rules:[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,light:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,light:"#032f62",dark:"#98c379"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,light:"#953800",dark:"#ffa657"},{token:"keyword",pattern:/\b(abstract|as|async|await|break|case|catch|class|const|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|package|private|protected|public|readonly|return|set|static|super|switch|this|throw|try|type|typeof|var|while|with|yield)\b/,light:"#d73a49",dark:"#ff7b72"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|true|false|console|window|document)\b/,light:"#e36209",dark:"#ffa657"},{token:"type",pattern:/\b[A-Z]\w*\b/,light:"#005cc5",dark:"#79c0ff"},{token:"number",pattern:/\b(0x[\da-fA-F]+|0b[01]+|\d+(\.\d+)?)\b/,light:"#005cc5",dark:"#79c0ff"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,light:"#6f42c1",dark:"#d2a8ff"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,light:"#089ba6",dark:"#79c0ff"}]}),Coax.register("md",{alias:"Markdown",rules:[{token:"comment",pattern:/<!--[\s\S]*?-->/,light:"#6a737d",dark:"#8b949e"},{token:"heading",pattern:/(^|\n)(#{1,6})\s*(.+)/,light:"#e36209",dark:"#ffa657"},{token:"bold",pattern:/\*\*([^*]+)\*\*|__([^_]+)__/g,light:"#d73a49",dark:"#ff7b72"},{token:"italic",pattern:/\*([^*]+)\*|_([^_]+)_/g,light:"#032f62",dark:"#a5d6ff"},{token:"link",pattern:/\[([^\]]+)\]\(([^)]+)\)/g,light:"#0288d1",dark:"#80c0ff"},{token:"inline-code",pattern:/`([^`]+)`/g,light:"#032f62",dark:"#98c379"},{token:"code-block",pattern:/```([^\n]+)\n([\s\S]*?)```/g,light:"#24292e",dark:"#c9d1d9"},{token:"list-item",pattern:/(^|\n)([-*])\s+(.+)/g,light:"#5c6e7c",dark:"#8b949e"},{token:"quote",pattern:/(^|\n)>[ \t]*(.+)/g,light:"#6f42c1",dark:"#d2a8ff"},{token:"image",pattern:/!\[([^\]]+)\]\(([^)]+)\)/g,light:"#d73a49",dark:"#ff7b72"},{token:"hr",pattern:/^(---|___|\*\*\*)\s*$/gm,light:"#24292e",dark:"#c9d1d9"},{token:"strikethrough",pattern:/~~([^~]+)~~/g,light:"#e36209",dark:"#ffa657"},{token:"table",pattern:/\|([^\|]+)\|([^\|]+)\|/g,light:"#5c6e7c",dark:"#8b949e"}]}),Coax.addTools([t]),customElements.define(`${e}-code`,Coax),Coax});

package/examples/color-selector.html

@@ -241,7 +241,7 @@
                     builtin: { light: '#e36209', dark: '#ffa657' }, // 橙色（内置变量）
                     number: { light: '#005cc5', dark: '#79c0ff' },  // 蓝色（数值）
                     comment: { light: '#6a737d', dark: '#8b949e' }, // 灰色（注释）
-                    op: { light: '#069598', dark: '#56b6c2'}       // 青色（将运算符与关键字区分开）
+                    op: { light: '#069598', dark: '#56b6c2' }       // 青色（将运算符与关键字区分开）
                 }
             },
             ts: {
@@ -257,7 +257,7 @@
                     number: { light: '#005cc5', dark: '#79c0ff' },
                     string: { light: '#032f62', dark: '#98c379' },
                     comment: { light: '#6a737d', dark: '#8b949e' },
-                    op: { light: '#089ba6', dark: '#79c0ff'}
+                    op: { light: '#089ba6', dark: '#79c0ff' }
                 }
             },
             css: {
@@ -380,9 +380,8 @@
             const langConfig = config[currentLang];
             let html = langConfig.code
                 .replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-
-            codeEl.replaceCode(html);
             codeEl.setAttribute('lang', currentLang);
+            codeEl.replace(html); 
         }
 
         function toggleDarkMode() {

package/examples/js-highlight.html

@@ -1,21 +1,17 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html>
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Coax 代码高亮插件</title>
+    <title>Coax</title>
     <style>
-        /* 白天模式变量 */
-        :root {
-            
-        }
     </style>
 
 </head>
 
 <body>
-    <ax-code streaming tools="copy" indexed lang="js">
+    <ax-code speed="10" tools="copy" indexed lang="js">
         <code>
 /**
  * Simple animation function
@@ -38,8 +34,6 @@ async function animate(element, duration) {
         </code>
     </ax-code>
 
-
-
     <script src="../dist/coax.umd.js" type='text/javascript'></script>
     <script type='text/javascript'>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codady/coax",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Coax.js

@@ -1,5 +1,5 @@
 /**
- *  Last modified: 2026/01/12 14:09:42
+ *  Last modified: 2026/01/12 15:11:21
  * Coax - A custom web component for syntax highlighting, code display, and interactive features
  *
  */
@@ -19,7 +19,7 @@ class Coax extends HTMLElement {
     baseStylesEl; // Element for base styles
     themeStylesEl; // Element for theme styles
     dynamicStylesEl; // Element for dynamic styles
-    highlightedCodeEl; // Element that holds the highlighted code
+    highlightEl; // Element that holds the highlighted code
     headerEl; // Header element (for code name, tools, etc.)
     codeNameEl; // Code name element (shows language or alias)
     codeToolsEl; // Code tools element (for interactive tools like copy)
@@ -30,6 +30,7 @@ class Coax extends HTMLElement {
     lastLineString = ''; // The last line's string
     speed = 5; // Speed of the typing effect (higher is slower)
     autoScroll = true; // Flag to enable/disable auto-scrolling
+    canListen = true; // Flag to enable/disable auto-scrolling
     constructor() {
         super();
         // Attach a Shadow DOM to the custom element
@@ -166,7 +167,7 @@ class Coax extends HTMLElement {
             <style id="theme-styles"></style>
             <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
             <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
+                <pre><code id="highlight"></code></pre>
             </div>
         `;
         // Cache references to various elements
@@ -177,7 +178,7 @@ class Coax extends HTMLElement {
         this.codeNameEl = getEl('#code-name', this.shadowRoot);
         this.codeToolsEl = getEl('#code-tools', this.shadowRoot);
         this.codeBodyEl = getEl('#code-body', this.shadowRoot);
-        this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot);
+        this.highlightEl = getEl('#highlight', this.shadowRoot);
         this.codeBodyEl.addEventListener('scroll', () => {
             let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
             // Check if the user manually scrolled
@@ -231,7 +232,7 @@ class Coax extends HTMLElement {
      * @param newVal - The new value of the attribute.
      */
     attributeChangedCallback(name, oldVal, newVal) {
-        if (oldVal === newVal)
+        if (oldVal === newVal || !this.canListen)
             return;
         if (name === 'height' || name === 'max-height') {
             this.updateStyleByRegExp(name, newVal);
@@ -302,10 +303,10 @@ class Coax extends HTMLElement {
     createLineWrap(index, startIndex) {
         let dataIndex = 0;
         if (index == null && startIndex == null) {
-            dataIndex = this.highlightedCodeEl.children.length;
+            dataIndex = this.highlightEl.children.length;
         }
         else {
-            const start = startIndex || this.highlightedCodeEl.children.length;
+            const start = startIndex || this.highlightEl.children.length;
             dataIndex = start + index;
         }
         return createEl('div', { 'data-index': dataIndex }, '<div></div>');
@@ -328,7 +329,7 @@ class Coax extends HTMLElement {
      * @param newCode - The new source code to highlight and append.
      */
     async highlight(newCode) {
-        const config = Coax.languages.get(this.lang), startIndex = this.highlightedCodeEl.children.length, 
+        const config = Coax.languages.get(this.lang), startIndex = this.highlightEl.children.length, 
         // 将新源码按行分割
         newCodeLines = newCode ? newCode.split('\n') : [];
         //更新别名
@@ -345,7 +346,7 @@ class Coax extends HTMLElement {
             //标记完成
             lineWrap.completed = true;
             if (this.hasAttribute('speed')) {
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
                 //流式打字
                 await typeWriter(lineString, {
                     speed: this.speed,
@@ -359,7 +360,7 @@ class Coax extends HTMLElement {
                 //直接打出
                 this.getLineToFill(codeWrap, lineString, config);
                 //
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
             }
         }
         //滚动到最底部
@@ -430,20 +431,17 @@ class Coax extends HTMLElement {
         if (this._renderQueued)
             return;
         this._renderQueued = true;
-        // 使用 requestAnimationFrame 将渲染推迟到下一帧
-        requestAnimationFrame(async () => {
-            this.clear();
-            this.injectThemeStyles();
-            //一次性渲染
-            await this.highlight(code);
-            this._renderQueued = false;
-        });
+        this.clear();
+        this.injectThemeStyles();
+        //一次性渲染
+        this.highlight(code);
+        this._renderQueued = false;
     }
     /**
      * Clears the current content and resets the state.
      */
     clear() {
-        this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+        this.highlightEl.innerHTML = this.source = this.lineString = '';
     }
     /**
      * Replaces the existing code with new source code and re-renders.
@@ -468,7 +466,7 @@ class Coax extends HTMLElement {
      * @returns An object containing the line wrapper and code wrapper for the last line.
      */
     getLastLine() {
-        const lastChild = this.highlightedCodeEl.lastElementChild, lastLine = !lastChild || this.highlightedCodeEl.lastElementChild?.completed ?
+        const lastChild = this.highlightEl.lastElementChild, lastLine = !lastChild || this.highlightEl.lastElementChild?.completed ?
             this.createLineWrap() : lastChild;
         return {
             lineWrap: lastLine,
@@ -479,7 +477,7 @@ class Coax extends HTMLElement {
       * Marks the current line as completed and updates the displayed code.
       */
     close() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap)
             return;
         lineWrap.completed = true;
@@ -493,7 +491,7 @@ class Coax extends HTMLElement {
      * Reopens the last closed line and restores its original content.
      */
     open() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap)
             return;
         lineWrap.completed = false;
@@ -507,7 +505,7 @@ class Coax extends HTMLElement {
      */
     stream(str, forceClose = false) {
         const { lineWrap, codeWrap } = this.getLastLine();
-        this.highlightedCodeEl.appendChild(lineWrap);
+        this.highlightEl.appendChild(lineWrap);
         //汇集
         this.source += str;
         //如果没有遇到换行符号，也可以强制结束

package/src/components/Coax.ts

@@ -1,5 +1,5 @@
 /**
- *  Last modified: 2026/01/12 14:09:42
+ *  Last modified: 2026/01/12 15:11:21
  * Coax - A custom web component for syntax highlighting, code display, and interactive features
  * 
  */
@@ -39,7 +39,7 @@ class Coax extends HTMLElement {
     private baseStylesEl!: HTMLStyleElement;  // Element for base styles
     private themeStylesEl!: HTMLStyleElement;  // Element for theme styles
     private dynamicStylesEl!: HTMLStyleElement;  // Element for dynamic styles
-    private highlightedCodeEl!: HTMLElement;  // Element that holds the highlighted code
+    private highlightEl!: HTMLElement;  // Element that holds the highlighted code
     private headerEl!: HTMLElement;  // Header element (for code name, tools, etc.)
     private codeNameEl!: HTMLElement;  // Code name element (shows language or alias)
     private codeToolsEl!: HTMLElement;  // Code tools element (for interactive tools like copy)
@@ -51,6 +51,7 @@ class Coax extends HTMLElement {
     public lastLineString: string = '';  // The last line's string
     public speed: number = 5;  // Speed of the typing effect (higher is slower)
     public autoScroll: boolean = true;  // Flag to enable/disable auto-scrolling
+    public canListen: boolean = true;  // Flag to enable/disable auto-scrolling
 
     constructor() {
         super();
@@ -188,7 +189,7 @@ class Coax extends HTMLElement {
             <style id="theme-styles"></style>
             <div id="code-header"><span id="code-name">${this.alias}</span><div id="code-tools"></div></div>
             <div id="code-body">
-                <pre><code id="highlight-code"></code></pre>
+                <pre><code id="highlight"></code></pre>
             </div>
         `;
 
@@ -200,7 +201,7 @@ class Coax extends HTMLElement {
         this.codeNameEl = getEl('#code-name', this.shadowRoot) as HTMLElement;
         this.codeToolsEl = getEl('#code-tools', this.shadowRoot) as HTMLElement;
         this.codeBodyEl = getEl('#code-body', this.shadowRoot) as HTMLElement;
-        this.highlightedCodeEl = getEl('#highlight-code', this.shadowRoot) as HTMLElement;
+        this.highlightEl = getEl('#highlight', this.shadowRoot) as HTMLElement;
 
         this.codeBodyEl.addEventListener('scroll', () => {
             let flag = this.codeBodyEl.scrollTop + this.codeBodyEl.clientHeight < this.codeBodyEl.scrollHeight;
@@ -257,7 +258,7 @@ class Coax extends HTMLElement {
      * @param newVal - The new value of the attribute.
      */
     attributeChangedCallback(name: string, oldVal: string, newVal: string) {
-        if (oldVal === newVal) return;
+        if (oldVal === newVal || !this.canListen) return;
         if (name === 'height' || name === 'max-height') {
             this.updateStyleByRegExp(name, newVal);
         }
@@ -328,9 +329,9 @@ class Coax extends HTMLElement {
     createLineWrap(index?: number, startIndex?: number) {
         let dataIndex = 0;
         if (index == null && startIndex == null) {
-            dataIndex = this.highlightedCodeEl.children.length;
+            dataIndex = this.highlightEl.children.length;
         } else {
-            const start = startIndex || this.highlightedCodeEl.children.length;
+            const start = startIndex || this.highlightEl.children.length;
             dataIndex = start + (index as number);
         }
         return createEl('div', { 'data-index': dataIndex }, '<div></div>');
@@ -353,7 +354,7 @@ class Coax extends HTMLElement {
      */
     async highlight(newCode: string) {
         const config = Coax.languages.get(this.lang),
-            startIndex = this.highlightedCodeEl.children.length,
+            startIndex = this.highlightEl.children.length,
             // 将新源码按行分割
             newCodeLines = newCode ? newCode.split('\n') : [];
         //更新别名
@@ -370,7 +371,7 @@ class Coax extends HTMLElement {
             (lineWrap as any).completed = true;
 
             if (this.hasAttribute('speed')) {
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
                 //流式打字
                 await typeWriter(lineString, {
                     speed: this.speed,
@@ -383,7 +384,7 @@ class Coax extends HTMLElement {
                 //直接打出
                 this.getLineToFill(codeWrap, lineString, config);
                 //
-                this.highlightedCodeEl.appendChild(lineWrap);
+                this.highlightEl.appendChild(lineWrap);
             }
         }
         //滚动到最底部
@@ -458,20 +459,17 @@ class Coax extends HTMLElement {
         //同时多次改变属性，只执行一次
         if (this._renderQueued) return;
         this._renderQueued = true;
-        // 使用 requestAnimationFrame 将渲染推迟到下一帧
-        requestAnimationFrame(async () => {
-            this.clear();
-            this.injectThemeStyles();
-            //一次性渲染
-            await this.highlight(code);
-            this._renderQueued = false;
-        });
+        this.clear();
+        this.injectThemeStyles();
+        //一次性渲染
+        this.highlight(code);
+        this._renderQueued = false;
     }
     /**
      * Clears the current content and resets the state.
      */
     clear() {
-        this.highlightedCodeEl.innerHTML = this.source = this.lineString = '';
+        this.highlightEl.innerHTML = this.source = this.lineString = '';
     }
     /**
      * Replaces the existing code with new source code and re-renders.
@@ -496,8 +494,8 @@ class Coax extends HTMLElement {
      * @returns An object containing the line wrapper and code wrapper for the last line.
      */
     getLastLine() {
-        const lastChild = this.highlightedCodeEl.lastElementChild,
-            lastLine = !lastChild || (this.highlightedCodeEl.lastElementChild as any)?.completed ?
+        const lastChild = this.highlightEl.lastElementChild,
+            lastLine = !lastChild || (this.highlightEl.lastElementChild as any)?.completed ?
                 this.createLineWrap() : lastChild;
         return {
             lineWrap: lastLine,
@@ -508,7 +506,7 @@ class Coax extends HTMLElement {
       * Marks the current line as completed and updates the displayed code.
       */
     close() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap) return;
         (lineWrap as any).completed = true;
         //行结束前保存
@@ -521,7 +519,7 @@ class Coax extends HTMLElement {
      * Reopens the last closed line and restores its original content.
      */
     open() {
-        const lineWrap = this.highlightedCodeEl.lastElementChild;
+        const lineWrap = this.highlightEl.lastElementChild;
         if (!lineWrap) return;
         (lineWrap as any).completed = false;
         //恢复最后一行字符串
@@ -534,7 +532,7 @@ class Coax extends HTMLElement {
      */
     stream(str: string, forceClose: boolean = false) {
         const { lineWrap, codeWrap } = this.getLastLine();
-        this.highlightedCodeEl.appendChild(lineWrap);
+        this.highlightEl.appendChild(lineWrap);
         //汇集
         this.source += str;