@codady/coax 0.0.1 → 0.0.2

package/dist/coax.umd.min.js

@@ -1,7 +1,7 @@
 /*!
- * @since Last modified: 2026-1-4 16:0:48
+ * @since Last modified: 2026-1-8 16:55:44
  * @name Coax event management system.
- * @version 0.0.1
+ * @version 0.0.2
  * @author AXUI development team <3217728223@qq.com>
  * @description Coax is a custom web component that enables syntax highlighting for various programming languages inside your HTML documents.
  * @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){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";class Coax extends HTMLElement{static languages=new Map;rawCode;constructor(){super(),this.attachShadow({mode:"open"}),this.rawCode=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||""}static register(e,{rules:n,theme:t={},internalCss:a="",cssPrefix:r=""}){this.languages.set(e,{rules:n,theme:t,internalCss:a,cssPrefix:r}),document.querySelectorAll("ax-code").forEach(n=>{n.getAttribute("lang")===e&&n.render()})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height"]}attributeChangedCallback(){this.render()}render(){const e=this.getAttribute("lang")||"js",n=Coax.languages.get(e),t=n?.cssPrefix||e,a=this.getAttribute("height"),r=this.getAttribute("max-height");let s="",o="";if(n){const e=new RegExp(n.rules.map(e=>`(${e.reg.source})`).join("|"),"g");s=this.rawCode.replace(/[&<>]/g,e=>({"&":"&amp;","<":"&lt;",">":"&gt;"}[e])).replace(e,(e,...a)=>{const r=a.findIndex(e=>void 0!==e);return-1!==r&&n.rules[r]?`<span class="ax-${t}-${n.rules[r].name}">${e}</span>`:e}),o=n.rules.map(e=>`\n                .ax-${t}-${e.name} { color: var(--ax-${t}-${e.name}); }\n            `).join("\n")}else s=this.rawCode;const i=n?.theme?Object.entries(n.theme).map(([e,n])=>`--ax-${t}-${e}: ${n};`).join("\n"):"";this.shadowRoot.innerHTML=`\n        <style>\n            :host { \n                ${i} \n\n                font-size: var(--ax-code-fs,14px);\n                display: block; \n                padding: var(--ax-code-p,1em);\n                box-sizing:border-box;\n                line-height: var(--ax-code-lh,1.5);\n                background-color:var(--ax-code-bg,rgba(0,0,0,0.02));\n                color:var(--ax-code-c,#333);\n                border:var(--ax-code-bw,1px) solid var(--ax-code-bc,rgba(0,0,0,0.08));\n                height:${a||"var(--ax-code-h,auto)"};\n                max-height:${r||"var(--ax-code-mh,500px)"};\n                overflow:auto;\n                transition: border-color 0.3s ease,color 0.3s ease;  \n                border-radius: var(--ax-code-r,9px);\n            }\n            pre,code{\n                font-family:"Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", "monospace", "microsoft yahei", "Microsoft JhengHei", "Yu Mincho", "simsun";\n                margin:0;\n                padding:0;\n            }\n           \n            \n             \n            ${o}\n            \n            \n            ${n?.internalCss||""}\n        </style>\n        <pre><code>${s}</code></pre>`}}customElements.define("ax-code",Coax),Coax.register("html",{rules:[{name:"comment",reg:/&lt;!--[\s\S]*?--&gt;/},{name:"doctype",reg:/&lt;!DOCTYPE[\s\S]*?&gt;/i},{name:"tag",reg:/&lt;\/?[a-zA-Z0-9]+/},{name:"attr",reg:/[a-zA-Z-]+(?=\s*=\s*)/},{name:"string",reg:/(['"])(?:\\.|[^\\])*?\1/},{name:"bracket",reg:/\/?&gt;/}]}),Coax.register("css",{rules:[{name:"comment",reg:/\/\*[\s\S]*?\*\//},{name:"value",reg:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/},{name:"func",reg:/[a-z-]+\(?=/},{name:"property",reg:/[a-z-]+(?=\s*:)/},{name:"selector",reg:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i},{name:"unit",reg:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/},{name:"number",reg:/\b\d+(\.\d+)?\b/},{name:"punct",reg:/[{}();:]/}],theme:{type:"#61afef",keyword:"#d19a66",string:"#98c379",op:"#abb2bf"},internalCss:"\n        .ax-css-string { color: var(--ax-code-string); }\n        .ax-css-string::first-letter { color: var(--ax-code-c); }\n    "}),Coax.register("js",{rules:[{name:"comment",reg:/\/\/[^\n]*|\/\*[\s\S]*?\*\//},{name:"string",reg:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/},{name:"keyword",reg:/\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/},{name:"builtin",reg:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise)\b/},{name:"number",reg:/\b\d+\b/},{name:"func",reg:/\b[a-zA-Z_]\w*(?=\s*\()/},{name:"op",reg:/[+\-*/%=<>!&|^~]+/}]}),Coax.register("ts",{rules:[{name:"comment",reg:/\/\/[^\n]*|\/\*[\s\S]*?\*\//},{name:"string",reg:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/},{name:"decorator",reg:/@[a-zA-Z_]\w*/},{name:"keyword",reg:/\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/},{name:"builtin",reg:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|boolean|true|false|console|window|document)\b/},{name:"type",reg:/\b[A-Z]\w*\b/},{name:"number",reg:/\b\d+\b/},{name:"func",reg:/\b[a-zA-Z_]\w*(?=\s*\()/},{name:"op",reg:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/}]})});
+!function(e){"function"==typeof define&&define.amd?define(e):e()}(function(){"use strict";const 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),o=r.includes("HTML")||"ShadowRoot"===r?t:document.querySelector(t),a=o&&o instanceof HTMLTemplateElement?o.content:o,i=null;if(e)if(n.includes("HTML"))i=e;else if("String"===n)try{i=(a||document).querySelector(e.trim())}catch{i=null}return i},createEl=(e,t,n)=>{let r=(e=e||"div").toUpperCase().trim(),o=document.createElement(r),a=getDataType(t);if(t&&"Object"===a)for(let e in t)t.hasOwnProperty(e)&&o.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)})(o,n),o},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},e="rep",t="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," ")}},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)},createTools=n=>{const r=createEl("span",{class:`${t}-box-tools`}),renderFn=t=>{const n={},r=t.extendable?`<i ${e}="arrow"></i>`:"",o=(t.icon?`<i ${e}="icon">${t.icon}</i>`:"")+(t.disk?`<i ${e}="disk"><img src="${t.disk}"/></i>`:"")+(t.cube?`<i ${e}="cube"><img src="${t.cube}"/></i>`:"")+(t.image?`<i ${e}="image"><img src="${t.image}"/></i>`:"")+(t.label?`<i ${e}="label">${t.label}</i>`:"")+r;t.title&&(n.title=t.title),t.focusable&&(n.tabindex=1),t.wrapEl=createEl(t.nodeName||"span",Object.assign(n,t.attrs),o),t.iconEl=t.wrapEl.querySelector(`[${e}="icon"]`),t.cubeEl=t.wrapEl.querySelector(`[${e}="cube"]`),t.diskEl=t.wrapEl.querySelector(`[${e}="disk"]`),t.imageEl=t.wrapEl.querySelector(`[${e}="image"]`),t.labelEl=t.wrapEl.querySelector(`[${e}="label"]`),!isEmpty(t.classes)&&((e,t)=>{const n=getEl(e),r=parseClasses$1(t);n&&0!==r.length&&r.forEach(e=>{n.classList.add(e)})})(t.wrapEl,t.classes),!isEmpty(t.styles)&&(t.wrapEl.style.cssText+=t.styles)};for(let e of n)renderFn(e),r.appendChild(e.wrapEl),e?.action?.(e);return r},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," ")}},wrap=(e,t,n=!1,r)=>{const o=r?.size||"1em",a=r?.color||"currentColor",i=r?.thickness||2,s=r?.classes?(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)})(r.classes).join(" "):"",l=t.name.replace(/([A-Z])/g,"-$1").toLowerCase();return`<svg xmlns="http://www.w3.org/2000/svg" width="${o}" height="${o}" viewBox="0 0 24 24" fill="none" stroke="${a}"\n          stroke-width="${i}" stroke-linecap="round" stroke-linejoin="round" class="${l} ${s}">\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`)(l.split("-")[1]):""}\n          ${e}\n      </svg>`},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),icaxCheck=e=>wrap('<polyline points="20 6 9 17 4 12"></polyline>',icaxCheck,!1,e);class Coax extends HTMLElement{static languages=new Map;static tools=[];source;_renderQueued=!1;baseStylesEl;themeStylesEl;dynamicStylesEl;highlightedCodeEl;headerEl;nameEl;toolsEl;alias;constructor(){super(),this.attachShadow({mode:"open"}),this.source=this.textContent?.replace(/^\s*\n|\n\s*$/g,"")||"",this.lang="plain",this.alias="Plain Text",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:rgb(224, 224, 224);\n                    --color-hover:rgb(224, 224, 224);\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:rgb(66, 66, 66);\n                    --color-hover:rgb(66, 66, 66);\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:rgb(66, 66, 66);\n                        --color-hover:rgb(66, 66, 66);\n                    }\n                }\n                :host {\n                    font-size: var(--${t}-code-font-size,var(--font-size));\n                    display: block; \n                    box-sizing:border-box;\n                    background:var(--${t}-code-background-color,var(--background));\n                    color:var(--${t}-code-color,var(--color-code));\n                    border:var(--${t}-code-border-width,var(--border-width)) var(--${t}-code-border-style,var(--border-style)) var(--${t}-code-border-color,var(--border-color));\n                    overflow:auto;\n                    transition: border-color 0.3s ease,color 0.3s ease;  \n                    border-radius: var(--${t}-code-radius,var(--radius));\n                }\n                #code-header{\n                    line-height:calc(var(--${t}-code-line-height,var(--line-height))*1.5);\n                    padding-inline-start:var(--${t}-code-padding,var(--padding));\n                    display:flex;\n                    \n                    >:first-child{\n                        flex:auto;\n                    }\n                }\n                #code-body{\n                    padding: var(--${t}-code-padding,var(--padding)) 0;\n                    height:var(--${t}-code-height,var(--height));\n                    max-height:var(--${t}-code-max-height,var(--max-height));\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(--${t}-code-padding,var(--padding));\n                    line-height: var(--${t}-code-line-height,var(--line-height));\n                    box-sizing:border-box;\n                    \n                    >div{\n                        flex:auto;\n                    }\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(--${t}-code-index-width,2em);\n                    margin-inline-end:var(--${t}-code-padding,8px);\n                }\n                :host([hoverable]) code>div:hover{\n                    background-color:var(--color-hover);\n                }\n                :host([striped]) code>div:nth-child(odd){\n                    background-color:var(--color-stripe);\n                }\n                :host([wrapped]) code>div{\n                    white-space: pre-wrap;\n                }\n                :host([unnamed]) #code-name{\n                    display:none;\n                }\n                .${t}-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.nameEl=getEl("#code-name",this.shadowRoot),this.toolsEl=getEl("#code-tools",this.shadowRoot),this.highlightedCodeEl=getEl("#highlight-code",this.shadowRoot)}static register(e,t){this.languages.set(e,{...t})}static addTools(e){Coax.tools=e}mountTools(e){requestAnimationFrame(()=>{this.toolsEl.innerHTML="";let t=e.map(e=>(e.action=e.action.bind(this),e));this.toolsEl.appendChild(createTools(t))})}connectedCallback(){this.render()}static get observedAttributes(){return["lang","height","max-height","tools"]}attributeChangedCallback(e,t,n){if(t!==n)if("height"===e||"max-height"===e)this.updateStyleByRegExp(e,n);else if("lang"===e)this.lang=n,this.render();else if("unnamed"===e)this.nameEl.innerHTML=null===n?this.alias||this.lang:"",this.nameEl.innerHTML="";else if("tools"===e){n||(this.toolsEl.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,"\\$&")}highlight(e){const n=Coax.languages.get(this.lang),r=this.highlightedCodeEl.children.length,o=e.split("\n").map((e,o)=>{let a=e;if(n){const r=this.getCssPrefix(n),o=new RegExp(n.rules.map(e=>`(${e.pattern.source})`).join("|"),"g");a=e.replace(o,(e,...o)=>{const a=o.findIndex(e=>void 0!==e);return-1!==a&&n.rules[a]?`<span class="${t}-${r}-${n.rules[a].token}">${e}</span>`:e})}const i=createEl("div",{"data-index":r+o});return i.innerHTML=`<div>${a}</div>`,i});this.highlightedCodeEl.append(...o)}injectThemeStyles(){const e=Coax.languages.get(this.lang);if(!e)return;let n=this.getCssPrefix(e),r=e.rules.map(e=>`\n                .${t}-${n}-${e.token} { color: var(--${t}-${n}-${e.token}${e.color?","+e.color:""});}`).join("\n"),o="",a="";o+=':host([scheme="dark"]){',o+=e.rules.map(e=>"\n                "+(e.color?`\n                    .${t}-${n}-${e.token} {color: var(--${t}-${n}-${e.token},${e.dark});}`:"")).join("\n"),o+="}",a="@media (prefers-color-scheme: dark){\n                                :host{\n            ",a+=e.rules.map(e=>`\n                ${e.color?`\n                    .${t}-${n}-${e.token} { color: var(--${t}-${n}-${e.token},${e.dark}); }`:""} `).join("\n"),a+="}",this.dynamicStylesEl.textContent=r+o+a,e?.themeStyles&&(this.themeStylesEl.textContent=e.themeStyles),this.updateName(e)}updateName(e){this.hasAttribute("unnamed")||(this.alias=e.alias||this.lang,this.nameEl.innerHTML=this.alias)}render(){this._renderQueued||(this._renderQueued=!0,requestAnimationFrame(()=>{this.highlightedCodeEl.innerHTML="",this.highlight(this.source),this.injectThemeStyles(),this._renderQueued=!1}))}replaceCode(e){this.source=e,this.highlightedCodeEl.innerHTML="",this.highlight(e)}appendCode(e){this.source+=`\n${e}`,this.highlight(e)}}Coax.register("css",{rules:[{token:"comment",pattern:/\/\*[\s\S]*?\*\//,color:"#6a737d",dark:"#8b949e"},{token:"value",pattern:/(?:'|")(?:\\.|[^\\'"\b])*?(?:'|")/,color:"#61afef",dark:"#a5d6ff"},{token:"func",pattern:/[a-z-]+\(?=/,color:"#e36209",dark:"#ffa657"},{token:"property",pattern:/[a-z-]+(?=\s*:)/,color:"#005cc5",dark:"#79c0ff"},{token:"selector",pattern:/[.#a-z0-9, \n\t>:+()_-]+(?=\s*\{)/i,color:"#6f42c1",dark:"#d2a8ff"},{token:"unit",pattern:/(?<=\d)(px|em|rem|%|vh|vw|ms|s|deg)/,color:"#d73a49",dark:"#ff7b72"},{token:"number",pattern:/\b\d+(\.\d+)?\b/,color:"#005cc5",dark:"#79c0ff"},{token:"punct",pattern:/[{}();:]/,color:"#24292e",dark:"#c9d1d9"}]}),Coax.register("html",{rules:[{token:"comment",pattern:/&lt;!--[\s\S]*?--&gt;/,color:"#6a737d",dark:"#8b949e"},{token:"doctype",pattern:/&lt;!DOCTYPE[\s\S]*?&gt;/i,color:"#005cc5",dark:"#56b6c2"},{token:"tag",pattern:/&lt;\/?[a-zA-Z0-9]+/,color:"#22863a",dark:"#abb2bf"},{token:"attr",pattern:/[a-zA-Z-]+(?=\s*=\s*)/,color:"#6f42c1",dark:"#e06c75"},{token:"string",pattern:/(['"])(?:\\.|[^\\])*?\1/,color:"#032f62",dark:"#f39c12"},{token:"bracket",pattern:/\/?&gt;/,color:"#24292e",dark:"#f1f1f1"}]}),Coax.register("js",{alias:"Javascript",rules:[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,color:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,color:"#032f62",dark:"#61afef"},{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/,color:"#e06c75",dark:"#d73a49"},{token:"builtin",pattern:/\b(console|window|document|Math|JSON|true|false|null|undefined|Object|Array|Promise)\b/,color:"#56b6c2",dark:"#61afef"},{token:"number",pattern:/\b\d+\b/,color:"#61afef",dark:"#d19a66"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,color:"#e5c07b",dark:"#98c379"},{token:"op",pattern:/[+\-*/%=<>!&|^~]+/,color:"#d73a49",dark:"#e06c75"}]}),Coax.register("ts",{rules:[{token:"comment",pattern:/\/\/[^\n]*|\/\*[\s\S]*?\*\//,color:"#6a737d",dark:"#8b949e"},{token:"string",pattern:/(?:'|"|`)(?:\\.|[^\\'"\b])*?(?:'|"|`)/,color:"#032f62",dark:"#61afef"},{token:"decorator",pattern:/@[a-zA-Z_]\w*/,color:"#d19a66",dark:"#e5c07b"},{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/,color:"#e06c75",dark:"#d73a49"},{token:"builtin",pattern:/\b(any|boolean|never|number|string|symbol|unknown|void|undefined|null|boolean|true|false|console|window|document)\b/,color:"#56b6c2",dark:"#61afef"},{token:"type",pattern:/\b[A-Z]\w*\b/,color:"#22863a",dark:"#8b949e"},{token:"number",pattern:/\b\d+\b/,color:"#61afef",dark:"#d19a66"},{token:"func",pattern:/\b[a-zA-Z_]\w*(?=\s*\()/,color:"#e5c07b",dark:"#98c379"},{token:"op",pattern:/(\?\.|![:\.]|[+\-*/%=<>!&|^~]+)/,color:"#d73a49",dark:"#e06c75"}]}),Coax.addTools([{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=>{})}}}]),customElements.define(`${t}-code`,Coax)});

package/examples/css-highlight.html

@@ -7,24 +7,7 @@
     <title>Coax 代码高亮插件</title>
     <style>
         /* 白天模式变量 */
-        :root {
-            --ax-css-selector: #6f42c1;
-            /* 紫色：选择器最显眼 */
-            --ax-css-property: #005cc5;
-            /* 蓝色：属性名 */
-            --ax-css-string: #22863a;
-            /* 绿色：内容字符串 */
-            --ax-css-unit: #d73a49;
-            /* 红色：单位（如 px, rem） */
-            --ax-css-number: #005cc5;
-            /* 蓝色：数值 */
-            --ax-css-func: #e36209;
-            /* 橙色：函数如 var(), rgba() */
-            --ax-css-comment: #6a737d;
-            /* 灰色：注释 */
-            --ax-css-punct: #24292e;
-            /* 深灰：符号 */
-        }
+        :root {}
     </style>
 
 </head>
@@ -56,6 +39,7 @@
     <script src="../dist/coax.umd.js" type='text/javascript'></script>
     <script type='text/javascript'>
 
+    
     </script>
 </body>
 

package/examples/js-highlight.html

@@ -8,29 +8,14 @@
     <style>
         /* 白天模式变量 */
         :root {
-            --ax-js-keyword: #d73a49;
-            /* 鲜红色：用于 if, const, return */
-            --ax-js-string: #032f62;
-            /* 藏青色：字符串内容 */
-            --ax-js-func: #6f42c1;
-            /* 靓紫色：函数名调用 */
-            --ax-js-builtin: #e36209;
-            /* 亮橙色：console, Math, true */
-            --ax-js-number: #005cc5;
-            /* 蓝色：数字 */
-            --ax-js-op: #d73a49;
-            /* 红色：操作符，突出逻辑 */
-            --ax-js-comment: #6a737d;
-            /* 灰色：注释 */
-            --ax-js-punct: #24292e;
-            /* 深灰色：标点符号 */
+            
         }
     </style>
 
 </head>
 
 <body>
-    <ax-code lang="js">
+    <ax-code lang="js" tools="copy" indexed striped hoverable wrapped>
         <code>
 /**
  * Simple animation function

package/examples/plain-highlight.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Coax 代码高亮插件</title>
+    <style>
+        /* 白天模式变量 */
+        :root {}
+    </style>
+
+</head>
+
+<body>
+    <ax-code>
+        <code>
+/* Main Layout Style */
+.container > .header:hover {
+    display: flex;
+    width: 100%;
+    max-width: 1200px;
+    padding: 20px 1.5rem;
+    background-color: var(--primary-bg, #fff);
+    transition: all 300ms ease-in-out;
+    transform: rotate(5deg);
+}
+
+@media (max-width: 768px) {
+    .container {
+        grid-template-columns: 1fr;
+    }
+}
+        </code>
+    </ax-code>
+
+
+
+    <script src="../dist/coax.umd.js" type='text/javascript'></script>
+    <script type='text/javascript'>
+
+       
+
+    </script>
+</body>
+
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codady/coax",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "publishConfig": {
     "access": "public"
   },
@@ -10,6 +10,20 @@
   "main": "./src/Coax.js",
   "type": "module",
   "types": "./src/coax.d.ts",
+    "exports": {
+    ".": {
+      "import": "./dist/coax.esm.js",
+      "require": "./dist/coax.cjs.js",
+      "browser": "./dist/coax.umd.js",
+      "default": "./dist/coax.esm.js",
+      "types": "./types/coax.d.ts"
+    },
+    "./src/*": {
+      "import": "./src/*.js",
+      "require": "./src/*.js",
+      "types": "./src/*.ts"
+    }
+  },
   "directories": {
     "doc": "docs"
   },
@@ -69,6 +83,8 @@
   },
   "homepage": "https://www.axui.cn",
   "dependencies": {
+    "@codady/icax": "^0.0.5",
+    "@codady/utils": "^0.0.25",
     "simple-git": "^3.27.0"
   }
-}
+}