diff --git a/docs/assets/index-DHiXaORX.css b/docs/assets/index-DHiXaORX.css
new file mode 100644
index 0000000..46ee4be
--- /dev/null
+++ b/docs/assets/index-DHiXaORX.css
@@ -0,0 +1 @@
+.input-component{flex:1;display:flex;align-items:center;justify-content:space-between;padding:1rem;background-color:#ffffff15;border-radius:5px}.input-component input.value{font-family:Noto Sans Mono}.input-component .unit{display:none}.input-component select{height:2rem;width:100%;max-width:100px;border:none;padding:.4rem .6rem;background-color:#ffffff20;border-radius:5px;color:#fff}.input-component select option{background-color:#ffffff20;color:#000}.input-component.range>div{display:flex;gap:.2rem;align-items:center;justify-content:end}.input-component.range>div input.value{background-color:transparent;color:#fff;border:none;text-align:right;padding-top:.2rem;width:2rem}.input-component.range>div input.range{appearance:none;height:5px;background-color:#ffffff50;border-radius:10px;outline:none}.input-component.range>div input.range::-webkit-slider-thumb,.input-component.range>div input.range::-moz-range-thumb{background-color:#000}.input-component.color>div{display:flex;gap:.2rem;justify-content:end}.input-component.color input.value{background-color:transparent;color:#fff;border:none;text-align:right;padding-top:.2rem;width:4rem}.input-component.color input.color{padding:0;appearance:none;border:none;background-color:#0000;width:30px}:root{--background-color: #131313;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}body{display:flex;justify-content:center;font-family:var(--font-family);overflow-y:scroll;background-color:var(--background-color);color:#fff;font-size:14px}html ::-webkit-scrollbar{background-color:var(--background-color);width:4px}html ::-webkit-scrollbar-thumb{background-color:#ffffff20}html ::-webkit-scrollbar-button{height:0;width:0}button{padding:10px;background-color:#0000;border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;color:#fff;height:100%;cursor:pointer;font-family:var(--font-family)}button:hover,button:focus{background-color:#ffffff10;outline:none}button.done{background-color:#2abe5b}.button-group{border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;overflow:hidden;display:flex;align-content:stretch}.button-group span{padding:10px;color:#fffa;font-weight:700}.button-group button{border:none;border-radius:0}app{max-width:1200px;width:100%}app h1 span{font-size:14px;color:#ffffff90;font-weight:100;letter-spacing:.1rem;margin-left:10px}app label,app button{user-select:none}app .content{display:flex;gap:1rem}app .content .console{width:100%;max-width:60%}app .content .console .menu{display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;background-color:#13131390;backdrop-filter:blur(10px);padding-block:1rem}app .content .console .menu .action-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}app .content .console .menu .action-row .role-list{display:flex;border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;width:fit-content;overflow:hidden}app .content .console .menu .action-row .role-list button{color:#fffa;font-weight:700;border-radius:0;border:none;height:auto}app .content .console .menu .action-row .role-list>div{display:flex}app .content .console .menu .action-row .role-list>div .role{cursor:pointer;display:flex;align-items:center}app .content .console .menu .action-row .role-list>div .role input{display:none}app .content .console .menu .action-row .role-list>div .role label{cursor:pointer;padding:10px}app .content .console .menu .action-row .role-list>div .role:has(input:checked){background-color:#ffffff20}app .content .console .menu .action-row .role-list>div .role:hover{background-color:#ffffff10}app .content .console .menu .action-row .button-list{display:flex;height:100%;gap:.6rem}app .content .console .menu .element-list{display:flex;gap:.1rem}app .content .console .menu .element-list button{flex:1;background-color:transparent;white-space:nowrap;text-overflow:ellipsis;border:none;font-size:16px;padding-block:.6rem .4rem;padding-inline:1rem;cursor:pointer;color:#fff6;border-radius:5px}app .content .console .menu .element-list button.active{background-color:#ffffff20;color:#fff}app .content .console .menu .element-list button:hover{background-color:#ffffff10}app .content .console .style-panel{display:flex;flex-direction:column;gap:.6rem;padding-block:1rem}app .content .console .style-panel section{display:flex;flex-direction:column;gap:.3rem}app .content .console .style-panel section h3{font-size:14px;margin-block:.5em;font-weight:200;letter-spacing:.2rem;text-transform:uppercase}app .content .console .style-panel section header{display:flex;justify-content:space-between;align-items:center}app .content .console .style-panel section>div{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}app .content .console .style-panel section section{display:flex;flex-direction:column;gap:.4rem;border:2px solid rgba(255,255,255,.0823529412);border-radius:5px;padding:1rem}app .content .console .style-panel section section h4{margin:0;font-size:14px;font-weight:200}app .content .console .style-panel section section>div{display:flex;flex-direction:column;background-color:#ffffff15;border-radius:5px}app .content .console .style-panel section section>div .input-component{background-color:#0000}app .content .preview{border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;padding:1rem;width:400px;height:80%;position:fixed;left:calc(50vw + 150px);display:flex;flex-direction:column}app .content .preview header{margin-block:.6rem;display:flex;flex-direction:column;gap:.6rem}app .content .preview header h2{margin-block:0}app .content .preview ytchat{flex:5;overflow-y:scroll;padding-right:2px}app .content .preview .input-panel{display:flex;flex-direction:column;gap:.4rem;padding-top:1rem}app .content .preview .input-panel div{display:flex;gap:.4rem;align-items:center}app .content .preview .input-panel select{height:2rem;width:100%;max-width:100px;border:none;padding:.4rem .6rem;background-color:#ffffff20;border-radius:5px;color:#fff}app .content .preview .input-panel select option{background-color:#ffffff20;color:#000}app .content .preview .input-panel textarea,app .content .preview .input-panel input{background-color:#ffffff20;border:none;padding:10px;height:1rem;color:#fff;border-radius:10px;resize:none;flex:5;font-family:var(--font-family);overflow:hidden}yt-live-chat-renderer yt-live-chat-header-renderer,yt-live-chat-renderer yt-live-chat-ticker-renderer,yt-live-chat-renderer yt-live-chat-message-input-renderer,yt-live-chat-renderer yt-reaction-control-panel-overlay-view-model{display:none!important}yt-live-chat-text-message-renderer{position:relative;overflow:hidden}yt-live-chat-text-message-renderer:hover .overlay{display:flex}yt-live-chat-text-message-renderer .overlay{position:absolute;height:100%;width:100%;top:0;left:0;background:linear-gradient(270deg,#000c,#0003);user-select:none;pointer-events:none;display:none;justify-content:end;align-items:center;color:#fff;padding-right:10px;box-sizing:border-box}yt-live-chat-text-message-renderer #author-photo{overflow:hidden;flex-shrink:0}yt-live-chat-text-message-renderer #author-photo img{height:100%;width:100%}yt-live-chat-text-message-renderer #content{width:100%}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip{align-items:unset!important}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges{display:flex;align-items:center;gap:.2rem}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type=moderator]{display:block;height:16px;width:16px;fill:#5e84f1}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type=moderator] svg{height:100%;width:100%}yt-live-chat-text-message-renderer #menu{display:none}
diff --git a/docs/assets/index-C9J66gnR.js b/docs/assets/index-HH4hPghE.js
similarity index 91%
rename from docs/assets/index-C9J66gnR.js
rename to docs/assets/index-HH4hPghE.js
index 6d57158..cd9bfa0 100644
--- a/docs/assets/index-C9J66gnR.js
+++ b/docs/assets/index-HH4hPghE.js
@@ -1,4 +1,4 @@
-(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))r(o);new MutationObserver(o=>{for(const i of o)if(i.type==="childList")for(const s of i.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function t(o){const i={};return o.integrity&&(i.integrity=o.integrity),o.referrerPolicy&&(i.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?i.credentials="include":o.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function r(o){if(o.ep)return;o.ep=!0;const i=t(o);fetch(o.href,i)}})();class it{parent;__hidden=!1;domEvents={};on(t,r,o){this.domEvents[t]||(this.domEvents[t]=new Map);const i=s=>r(s,this);return this.domEvents[t].set(r,i),this.dom.addEventListener(t,i,o),this}off(t,r,o){const i=this.domEvents[t]?.get(r);return i&&this.dom.removeEventListener(t,i,o),this}once(t,r,o){const i=s=>{this.dom.removeEventListener(t,i,o),r(s,this)};return this.dom.addEventListener(t,i,o),this}hide(t){return $.fluent(this,arguments,()=>this.__hidden,()=>{if(t!==void 0)return t instanceof lt?(this.__hidden=t.value,t.use(this,"hide")):this.__hidden=t,this.parent?.children.render(),this})}remove(){return this.parent?.children.remove(this).render(),this}replace(t){return this.parent?.children.replace(this,t).render(),this}contains(t){return t?t instanceof it?this.dom.contains(t.dom):t instanceof EventTarget?this.dom.contains($(t).dom):this.dom.contains(t):!1}self(t){return t(this),this}inDOM(){return document.contains(this.dom)}isElement(){if(this instanceof et)return this}static from(t){if(t.$)return t.$;if(t instanceof HTMLElement){const r=$(t.tagName);return r.dom=t,t.parentElement&&(r.parent=$(t.parentElement)),r}else if(t instanceof Text){const r=new Bt(t.textContent??"");return r.dom=t,t.parentElement&&(r.parent=$(t.parentElement)),r}throw"$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE"}}class et extends it{dom;static_classes=new Set;constructor(t,r){super(),this.dom=document.createElement(t),this.dom.$=this,this.setOptions(r)}setOptions(t){return this.id(t?.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(r=>this.static_classes.has(r)??this.dom.classList.remove(r)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(r=>this.static_classes.add(r)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(r=>this.static_classes.delete(r)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,r){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?(t&&r&&this.dom.setAttribute(t,`${r}`),this):this:null}autocapitalize(t){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",t))}dir(t){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",t))}innerText(t){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",t))}title(t){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",t))}translate(t){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",t))}popover(t){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",t))}spellcheck(t){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",t))}inert(t){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",t))}lang(t){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",t))}draggable(t){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",t))}hidden(t){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",t))}tabIndex(t){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",t))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}focus(){return this.dom.focus(),this}blur(){return this.dom.blur(),this}animate(t,r,o){const i=this.dom.animate(t,r);return o&&o(i),this}getAnimations(t){return this.dom.getAnimations(t)}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}get dataset(){return this.dom.dataset}}class Bt extends it{dom;constructor(t){super(),this.dom=new Text(t),this.dom.$=this}content(t){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",t))}}class pe{#t;#e;elementList=new Set;constructor(t){this.#t=t,this.#e=this.#t.dom}add(t){if(typeof t=="string"){const r=new Bt(t);r.parent=this.#t,this.elementList.add(r)}else t.parent=this.#t,this.elementList.add(t)}remove(t){return this.elementList.has(t)?(this.elementList.delete(t),t.parent=void 0,this):this}removeAll(t=!0){this.elementList.forEach(r=>this.remove(r)),t&&this.render()}replace(t,r){const o=this.array.map(i=>i===t?r:i);return this.elementList.clear(),o.forEach(i=>this.elementList.add(i)),t.parent=void 0,r.parent=this.#t,this}render(){const[t,r]=[this.array.map(i=>i.dom),Array.from(this.#e.childNodes)],o=[];for(;r.length||t.length;){const[i,s]=[r.at(0),t.at(0)];s?i?s!==i?(s.$.__hidden||(this.#e.insertBefore(s,i),o.push(s)),t.shift()):(s.$.__hidden&&this.#e.removeChild(s),t.shift(),r.shift()):(s.$.__hidden||this.#e.append(s),t.shift()):(i&&!o.includes(i)&&i.remove(),r.shift())}}get array(){return[...this.elementList.values()]}}class lt{value;attributes=new Map;constructor(t){this.value=t}set(t){this.value=t;for(const[r,o]of this.attributes.entries())for(const i of o)r[i]instanceof Function&&r[i](t)}toString(){return`${this.value}`}use(t,r){const o=this.attributes.get(t);o?o.add(r):this.attributes.set(t,new Set().add(r))}}class y extends et{children=new pe(this);constructor(t,r){super(t,r)}content(t){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(t)})}insert(t){return $.fluent(this,arguments,()=>this,()=>{t instanceof Function&&(t=t(this)),t=$.multableResolve(t);for(const r of t)if(r!==void 0)if(r instanceof Array)this.insert(r);else if(r instanceof lt){const o=new Bt(r.toString());r.use(o,"content"),this.children.add(o)}else this.children.add(r);this.children.render()})}clear(){return this.children.removeAll(),this}$(t){return $(this.dom.querySelector(t))}$all(t){return Array.from(this.dom.querySelectorAll(t)).map(r=>$(r))}}class wt extends y{constructor(t){super("a",t),this.dom.addEventListener("click",r=>{$.anchorPreventDefault&&r.preventDefault(),$.anchorHandler&&this.href()&&$.anchorHandler(this.href(),r)})}href(t){return $.fluent(this,arguments,()=>this.dom.href,()=>{t&&(this.dom.href=t)})}target(t){return $.fluent(this,arguments,()=>this.dom.target,()=>{t&&(this.dom.target=t)})}}var Mt;(e=>{function t(n,a,h,d){return a.length?(d(),n):h()}e.fluent=t;function r(n){return n instanceof Array?n:[n]}e.multableResolve=r;function o(n,a){return r(a).forEach(h=>{Object.getOwnPropertyNames(h.prototype).forEach(d=>{d!=="constructor"&&Object.defineProperty(n.prototype,d,Object.getOwnPropertyDescriptor(h.prototype,d)||Object.create(null))})}),n}e.mixin=o;function i(n,a,h){h!==void 0&&(n[a]=h)}e.set=i;function s(n){return new lt(n)}e.state=s})(Mt||(Mt={}));class Ht extends y{constructor(t){super("form",t)}autocomplete(t){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",t))}action(t){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",t))}enctype(t){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",t))}method(t){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",t))}noValidate(t){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",t))}acceptCharset(t){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",t))}target(t){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",t))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(t=>$(t))}}function Ut(e){return Mt.mixin(e,me)}class me{formAction(t){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",t))}formEnctype(t){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",t))}formMethod(t){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",t))}formNoValidate(t){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",t))}formTarget(t){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",t))}name(t){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}get form(){return this.dom.form?$(this.dom.form):null}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}var ge=Object.defineProperty,be=Object.getOwnPropertyDescriptor,fe=(e,t,r,o)=>{for(var i=o>1?void 0:o?be(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&ge(t,r,i),i};let ut=class extends y{constructor(e){super("button",e)}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}};ut=fe([Ut],ut);var xe=Object.defineProperty,$e=Object.getOwnPropertyDescriptor,Le=(e,t,r,o)=>{for(var i=o>1?void 0:o?$e(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&xe(t,r,i),i};let ct=class extends et{constructor(e){super("input",e)}accept(...e){return $.fluent(this,arguments,()=>this.dom.accept.split(","),()=>this.dom.accept=e.toString())}capture(e){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",e))}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}checked(e){return $.fluent(this,arguments,()=>this.dom.checked,()=>$.set(this.dom,"checked",e))}max(e){return $.fluent(this,arguments,()=>this.dom.max===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"max",e?.toString()))}min(e){return $.fluent(this,arguments,()=>this.dom.min===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"min",e?.toString()))}maxLength(e){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",e))}minLength(e){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}defaultChecked(e){return $.fluent(this,arguments,()=>this.dom.defaultChecked,()=>$.set(this.dom,"defaultChecked",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}pattern(e){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}size(e){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}step(e){return $.fluent(this,arguments,()=>Number(this.dom.step),()=>$.set(this.dom,"step",e?.toString()))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}valueAsDate(e){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",e))}valueAsNumber(e){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",e))}webkitdirectory(e){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,r,o){return typeof t=="number"&&typeof r=="number"&&this.dom.setRangeText(e,t,r,o),this.dom.setRangeText(e),this}setSelectionRange(e,t,r){return this.dom.setSelectionRange(e,t,r),this}showPicker(){return this.dom.showPicker(),this}stepDown(){return this.dom.stepDown(),this}stepUp(){return this.dom.stepUp(),this}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}};ct=Le([Ut],ct);class kt extends y{constructor(t){super("label",t)}for(t){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",t,"for")})}get form(){return this.dom.form}get control(){return this.dom.control}}class It extends et{constructor(t){super("img",t)}alt(t){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",t))}crossOrigin(t){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",t))}decoding(t){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",t))}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",t))}isMap(t){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",t))}loading(t){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",t))}referrerPolicy(t){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",t))}sizes(t){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",t))}src(t){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",t))}srcset(t){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",t))}useMap(t){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",t))}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",t))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class Dt extends y{constructor(t){super("canvas",t)}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",t)})}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",t)})}captureStream(t){return this.dom.captureStream(t)}getContext(t,r){return this.dom.getContext(t)}toBlob(t,r,o){return this.dom.toBlob(t,r,o),this}toDataURL(t,r){return this.dom.toDataURL(t,r)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class Ot extends y{constructor(t){super("dialog",t)}open(t){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",t))}returnValue(t){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",t))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}function se(e){return $.mixin(e,Re)}class Re{on(t,r){return this.events.on(t,r),this}off(t,r){return this.events.off(t,r),this}once(t,r){return this.events.once(t,r),this}}class zt{eventMap=new Map;register(...t){return t.forEach(r=>{const o=new te(r);this.eventMap.set(o.name,o)}),this}delete(t){return this.eventMap.delete(t),this}fire(t,...r){const o=this.get(t);return o instanceof te&&o.fire(...r),this}on(t,r){return this.get(t).add(r),this}off(t,r){return this.get(t).delete(r),this}once(t,r){const o=(...i)=>{this.get(t).delete(o),r(...i)};return this.get(t).add(o),this}get(t){const r=this.eventMap.get(t);if(!r)throw new Error("EVENT NOT EXIST");return r}}class te{name;callbackList=new Set;constructor(t){this.name=t}fire(...t){this.callbackList.forEach(r=>r(...t))}add(t){this.callbackList.add(t)}delete(t){this.callbackList.delete(t)}}class yt extends y{content_cache=new Map;event=new zt().register("switch");content_id=null;constructor(t){super("view",t)}set(t,r){return this.content_cache.set(t,r),this}delete(t){return this.content_cache.delete(t),this}switch(t){const r=this.content_cache.get(t);if(r===void 0)throw"$View.switch(): target content is undefined";return this.content(r),this.content_id=t,this.event.fire("switch",t),this}}var ye=Object.defineProperty,Ce=Object.getOwnPropertyDescriptor,Ae=(e,t,r,o)=>{for(var i=o>1?void 0:o?Ce(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&ye(t,r,i),i};let pt=class extends y{constructor(){super("select")}add(e){return this.insert(e),this}item(e){return $(this.dom.item(e))}namedItem(e){return $(this.dom.namedItem(e))}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(e=>$(e))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(e=>$(e))}};pt=Ae([Ut],pt);class Gt extends y{constructor(t){super("option",t)}defaultSelected(t){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",t))}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}label(t){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",t))}selected(t){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",t))}text(t){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}class Wt extends y{constructor(t){super("optgroup",t)}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}label(t){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",t))}}class Nt extends y{constructor(t){super("textarea",t)}cols(t){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",t))}name(t){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",t))}wrap(t){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}maxLength(t){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",t))}minLength(t){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",t))}autocomplete(t){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",t))}defaultValue(t){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",t))}dirName(t){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",t))}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}placeholder(t){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",t))}readOnly(t){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",t))}required(t){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",t))}selectionDirection(t){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",t))}selectionEnd(t){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",t))}selectionStart(t){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",t))}type(t){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",t))}inputMode(t){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",t))}select(){return this.dom.select(),this}setCustomValidity(t){return this.dom.setCustomValidity(t),this}setRangeText(t,r,o,i){return typeof r=="number"&&typeof o=="number"&&this.dom.setRangeText(t,r,o,i),this.dom.setRangeText(t),this}setSelectionRange(t,r,o){return this.dom.setSelectionRange(t,r,o),this}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get form(){return this.dom.form?$(this.dom.form):null}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}}function L(e){if(typeof e>"u"||e===null)return e;if(typeof e=="string"){if(e.startsWith("::"))return Array.from(document.querySelectorAll(e.replace(/^::/,""))).map(t=>L(t));if(e.startsWith(":"))return L(document.querySelector(e.replace(/^:/,"")));if(e in L.TagNameElementMap)switch(L.TagNameElementMap[e]){case et:return new et(e);case wt:return new wt;case y:return new y(e);case ct:return new ct;case kt:return new kt;case Ht:return new Ht;case ut:return new ut;case It:return new It;case Dt:return new Dt;case Ot:return new Ot;case yt:return new yt;case pt:return new pt;case Gt:return new Gt;case Wt:return new Wt;case Nt:return new Nt}else return new y(e)}if(e instanceof HTMLElement||e instanceof Text)return e.$?e.$:it.from(e);throw"$: NOT SUPPORT TARGET ELEMENT TYPE"}(e=>{e.anchorHandler=null,e.anchorPreventDefault=!1,e.routers=new Set,e.TagNameElementMap={a:wt,p:y,pre:y,code:y,blockquote:y,strong:y,h1:y,h2:y,h3:y,h4:y,h5:y,h6:y,div:y,ol:y,ul:y,dl:y,li:y,input:ct,label:kt,button:ut,form:Ht,img:It,dialog:Ot,canvas:Dt,view:yt,select:pt,option:Gt,optgroup:Wt,textarea:Nt};function t(d,m,l,c){return m.length?(c(),d):l()}e.fluent=t;function r(d){return d instanceof Array?d:[d]}e.multableResolve=r;function o(d,m){return r(m).forEach(l=>{Object.getOwnPropertyNames(l.prototype).forEach(c=>{c!=="constructor"&&Object.defineProperty(d.prototype,c,Object.getOwnPropertyDescriptor(l.prototype,c)||Object.create(null))})}),d}e.mixin=o;function i(d,m,l,c){if(l!==void 0){if(l instanceof lt&&d instanceof Node){l.use(d.$,c??m),d[m]=l.value;return}d[m]=l}}e.set=i;function s(d){return new lt(d)}e.state=s;async function n(d,m){return new Promise(l=>{const c=new FileReader;c.onload=g=>{const R=e("img");if(R.once("load",T=>{const A=e("canvas"),W=A.getContext("2d"),P=R.height()/R.width(),[X,Y]=[P>1?m/P:m,P>1?m:m*P];A.height(Y).width(X),W?.drawImage(R.dom,0,0,X,Y),l(A.toDataURL(d.type))}),!g.target)throw"$.resize(): e.target is null";R.src(g.target.result)},c.readAsDataURL(d)})}e.resize=n;function a(d=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*d}e.rem=a;function h(d,m,l){if(typeof m=="number")return Array(m).fill("").map(g=>{const R=c(d)?d[0](...d.slice(1)):e(d);return l&&l(R),R});{const g=[];for(const R of m){const T=d instanceof Function?d(...R):c(d)?d[0](...d.slice(1)):e(d);R instanceof Function?R(T):(R instanceof it||typeof R=="string")&&T.content(R),g.push(T)}return g}function c(g){return g instanceof Array&&g[0]instanceof Function}}e.builder=h})(L||(L={}));globalThis.$=L;var Be=Object.defineProperty,Ee=Object.getOwnPropertyDescriptor,Se=(e,t,r,o)=>{for(var i=o>1?void 0:o?Ee(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&Be(t,r,i),i};let Pt=class{id;content;events=new zt().register("open","load");constructor(e){this.id=e}};Pt=Se([se],Pt);var ve=Object.defineProperty,Te=Object.getOwnPropertyDescriptor,Fe=(e,t,r,o)=>{for(var i=o>1?void 0:o?Te(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&ve(t,r,i),i};let ee=class{routeMap=new Map;recordMap=new Map;$view;index=0;events=new zt().register("pathchange","notfound","load");basePath;constructor(e,t){this.basePath=e,this.$view=t??new yt}addRoute(e){e=$.multableResolve(e);for(const t of e)this.routeMap.set(t.path,t);return this}listen(){if(!history.state||!("index"in history.state)){const e={index:this.index,data:{}};history.replaceState(e,"")}else this.index=history.state.index;return addEventListener("popstate",this.popstate),$.routers.add(this),this.resolvePath(),this.events.fire("pathchange",{path:location.href,navigation:"Forward"}),this}open(e){if(e===void 0)return;if(e===location.href)return this;this.index+=1;const t={index:this.index,data:{}};return history.pushState(t,"",e),$.routers.forEach(r=>r.resolvePath()),this.events.fire("pathchange",{path:e,navigation:"Forward"}),this}back(){return history.back(),this}replace(e){return history.replaceState({index:this.index},"",e),$.routers.forEach(t=>t.resolvePath(e)),this.events.fire("pathchange",{path:e,navigation:"Forward"}),this}setStateData(e,t){return history.state.data===void 0&&(history.state.data={}),history.state.data[e]=t,this}popstate=(()=>{history.state.index>this.index||history.state.index<this.index,this.index=history.state.index,this.resolvePath(),this.events.fire("pathchange",{path:location.pathname,navigation:"Forward"})}).bind(this);resolvePath(e=location.pathname){if(!e.startsWith(this.basePath))return;e=e.replace(this.basePath,"/").replace("//","/");let t=!1;const r=i=>{const s=this.recordMap.get(i);return s?(t=!0,s.content&&!this.$view.contains(s.content)&&this.$view.switch(i),s.events.fire("open",{path:e,record:s}),!0):!1},o=(i,s,n)=>{const a=new Pt(i);let h=s.builder({params:n,record:a,loaded:()=>{a.events.fire("load",{path:i,record:a}),this.events.fire("load",{path:i})}});typeof h=="string"&&(h=new Bt(h)),a.content=h,this.recordMap.set(i,a),this.$view.set(i,h).switch(i),a.events.fire("open",{path:e,record:a}),t=!0};for(const[i,s]of this.routeMap.entries()){if(i instanceof Function){const m=i(e);m&&(r(m)||o(m,s,void 0));continue}const[n,a]=[i.split("/").map(m=>`/${m}`),e.split("/").map(m=>`/${m}`)];n.shift(),a.shift();const h={};let d="";for(let m=0;m<a.length;m++){const[l,c]=[n.at(m),a.at(m)];if(!(!l||!c)){if(l===c){if(d+=c,l===n.at(-1)){r(d)||o(d,s,h);return}}else if(l.includes(":")){const[g,R]=l.split(":");if(!c.startsWith(g))continue;if(Object.assign(h,{[R]:c.replace(g,"")}),d+=c,l===n.at(-1)){r(d)||o(d,s,h);return}}}}}if(!t){let i=!1;const s=()=>i=!0;this.events.fire("notfound",{path:e,preventDefault:s}),i||this.$view.clear()}}};ee=Fe([se],ee);Array.prototype.detype=function(...e){return this.filter(t=>{if(e.length)for(const r of e)return typeof t==typeof r;else return t!==void 0})};class qt extends y{$value=$("input").class("value");$unit=$("span").staticClass("unit");$label=$("label").hide(!0);constructor(t){super("div"),this.staticClass("input-component",t),this.$value.id(t),this.$label.for(t)}unit(t){return this.$unit.content(t),this}value(t){return t===void 0?this:(this.$value.value(t.toString()),this)}label(t){return t&&this.$label.hide(!1),this.$label.content(t),this}min(t){return this.$value.min(t),this}max(t){return this.$value.max(t),this}}class Rt extends qt{$color=$("input").type("color").class("color");constructor(t){super(t),this.addStaticClass("color"),this.$color.id(t),this.layout()}layout(){this.content([this.$label,$("div").content([this.$value,this.$color])]),this.$value.on("input",t=>this.$color.value(this.$value.value())),this.$color.on("input",t=>this.$value.value(this.$color.value()))}value(t){return super.value(t),this.$color.value(t),this}}class _ extends qt{$range=$("input").type("range").class("range");constructor(t){super(t),this.addStaticClass("range"),this.$range.id(t),this.$value,this.layout()}layout(){this.content([this.$label,$("div").content([this.$value,this.$range,this.$unit])]),this.$range.on("input",t=>{this.$value.value(`${this.$range.value()}`)}),this.$value.on("input",t=>{this.$range.value(this.$value.value())})}value(t){return arguments.length?t===void 0?this:(t.match(/[a-zA-Z]/)&&(t=t.replaceAll(/[a-zA-Z]/g,"")),super.value(t),this.$range.value(t),this):this.value()}min(t){return super.min(t),this.$range.min(t),this}max(t){return super.max(t),this.$range.max(t),this}}class re extends qt{$select=$("select");constructor(t){super(t),this.addStaticClass("select"),this.$select.id(t),this.layout()}layout(){this.content([this.$label,this.$select])}add(t){return this.$select.add(t),this}value(t){return super.value(t),this.$select.value(t),this}}var f,j,B,Ct;(function(e){e.HEX="HEX",e.RGB="RGB",e.HSL="HSL",e.CIELab="CIELab",e.CMYK="CMYK"})(f||(f={})),function(e){e.ANALOGOUS="ANALOGOUS",e.COMPLEMENTARY="COMPLEMENTARY",e.SPLIT_COMPLEMENTARY="SPLIT_COMPLEMENTARY",e.TRIADIC="TRIADIC",e.TETRADIC="TETRADIC",e.SQUARE="SQUARE"}(j||(j={})),function(e){e.ADDITIVE="ADDITIVE",e.SUBTRACTIVE="SUBTRACTIVE"}(B||(B={})),function(e){e.black="#000000",e.silver="#C0C0C0",e.gray="#808080",e.white="#FFFFFF",e.maroon="#800000",e.red="#FF0000",e.purple="#800080",e.fuchsia="#FF00FF",e.green="#008000",e.lime="#00FF00",e.olive="#808000",e.yellow="#FFFF00",e.navy="#000080",e.blue="#0000FF",e.teal="#008080",e.aqua="#00FFFF",e.orange="#FFA500",e.aliceblue="#F0F8FF",e.antiquewhite="#FAEBD7",e.aquamarine="#7FFFD4",e.azure="#F0FFFF",e.beige="#F5F5DC",e.bisque="#FFE4C4",e.blanchedalmond="#FFEBCD",e.blueviolet="#8A2BE2",e.brown="#A52A2A",e.burlywood="#DEB887",e.cadetblue="#5F9EA0",e.chartreuse="#7FFF00",e.chocolate="#D2691E",e.coral="#FF7F50",e.cornflowerblue="#6495ED",e.cornsilk="#FFF8DC",e.crimson="#DC143C",e.cyan="#00FFFF",e.darkblue="#00008B",e.darkcyan="#008B8B",e.darkgoldenrod="#B8860B",e.darkgray="#A9A9A9",e.darkgreen="#006400",e.darkgrey="#A9A9A9",e.darkkhaki="#BDB76B",e.darkmagenta="#8B008B",e.darkolivegreen="#556B2F",e.darkorange="#FF8C00",e.darkorchid="#9932CC",e.darkred="#8B0000",e.darksalmon="#E9967A",e.darkseagreen="#8FBC8F",e.darkslateblue="#483D8B",e.darkslategray="#2F4F4F",e.darkslategrey="#2F4F4F",e.darkturquoise="#00CED1",e.darkviolet="#9400D3",e.deeppink="#FF1493",e.deepskyblue="#00BFFF",e.dimgray="#696969",e.dimgrey="#696969",e.dodgerblue="#1E90FF",e.firebrick="#B22222",e.floralwhite="#FFFAF0",e.forestgreen="#228B22",e.gainsboro="#DCDCDC",e.ghostwhite="#F8F8FF",e.gold="#FFD700",e.goldenrod="#DAA520",e.greenyellow="#ADFF2F",e.grey="#808080",e.honeydew="#F0FFF0",e.hotpink="#FF69B4",e.indianred="#CD5C5C",e.indigo="#4B0082",e.ivory="#FFFFF0",e.khaki="#F0E68C",e.lavender="#E6E6FA",e.lavenderblush="#FFF0F5",e.lawngreen="#7CFC00",e.lemonchiffon="#FFFACD",e.lightblue="#ADD8E6",e.lightcoral="#F08080",e.lightcyan="#E0FFFF",e.lightgoldenrodyellow="#FAFAD2",e.lightgray="#D3D3D3",e.lightgreen="#90EE90",e.lightgrey="#D3D3D3",e.lightpink="#FFB6C1",e.lightsalmon="#FFA07A",e.lightseagreen="#20B2AA",e.lightskyblue="#87CEFA",e.lightslategray="#778899",e.lightslategrey="#778899",e.lightsteelblue="#B0C4DE",e.lightyellow="#FFFFE0",e.limegreen="#32CD32",e.linen="#FAF0E6",e.magenta="#FF00FF",e.mediumaquamarine="#66CDAA",e.mediumblue="#0000CD",e.mediumorchid="#BA55D3",e.mediumpurple="#9370DB",e.mediumseagreen="#3CB371",e.mediumslateblue="#7B68EE",e.mediumspringgreen="#00FA9A",e.mediumturquoise="#48D1CC",e.mediumvioletred="#C71585",e.midnightblue="#191970",e.mintcream="#F5FFFA",e.mistyrose="#FFE4E1",e.moccasin="#FFE4B5",e.navajowhite="#FFDEAD",e.oldlace="#FDF5E6",e.olivedrab="#6B8E23",e.orangered="#FF4500",e.orchid="#DA70D6",e.palegoldenrod="#EEE8AA",e.palegreen="#98FB98",e.paleturquoise="#AFEEEE",e.palevioletred="#DB7093",e.papayawhip="#FFEFD5",e.peachpuff="#FFDAB9",e.peru="#CD853F",e.pink="#FFC0CB",e.plum="#DDA0DD",e.powderblue="#B0E0E6",e.rosybrown="#BC8F8F",e.royalblue="#4169E1",e.saddlebrown="#8B4513",e.salmon="#FA8072",e.sandybrown="#F4A460",e.seagreen="#2E8B57",e.seashell="#FFF5EE",e.sienna="#A0522D",e.skyblue="#87CEEB",e.slateblue="#6A5ACD",e.slategray="#708090",e.slategrey="#708090",e.snow="#FFFAFA",e.springgreen="#00FF7F",e.steelblue="#4682B4",e.tan="#D2B48C",e.thistle="#D8BFD8",e.tomato="#FF6347",e.turquoise="#40E0D0",e.violet="#EE82EE",e.wheat="#F5DEB3",e.whitesmoke="#F5F5F5",e.yellowgreen="#9ACD32",e.rebeccapurple="#663399"}(Ct||(Ct={}));const ne=Object.keys(Ct),we={HEX:["R","G","B","A"],RGB:["R","G","B","A"],HSL:["H","S","L","A"],CIELab:["L","a","b","A"],CMYK:["C","M","Y","K","A"]},Yt={BGR:f.RGB,ABGR:f.RGB,HLS:f.HSL,AHLS:f.HSL,LAB:f.CIELab,ALAB:f.CIELab,CKMY:f.CMYK,ACKMY:f.CMYK};var ht;(function(e){e.NUMBER="number",e.BOOLEAN="boolean"})(ht||(ht={}));const O={[f.HEX]:/^#(?:([a-f\d])([a-f\d])([a-f\d])([a-f\d])?|([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?)$/i,[f.RGB]:/^rgba?\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)(?:\s*,\s*((?:\d*\.)?\d+))?|((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[f.HSL]:/^hsla?\s*\(\s*(?:(-?(?:\d*\.)?\d+(?:deg|grad|rad|turn)?)\s*,\s*((?:\d*\.)?\d+)%\s*,\s*((?:\d*\.)?\d+)%(?:\s*,\s*((?:\d*\.)?\d+))?|(-?(?:\d*\.)?\d+(?:deg|grad|rad|turn)?)\s*((?:\d*\.)?\d+)%\s*((?:\d*\.)?\d+)%(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[f.CIELab]:/^lab\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[f.CMYK]:/^(?:device-cmyk|cmyk)\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)(?:\s*,\s*((?:\d*\.)?\d+))?|((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/},ae=/^(-?(?:\d*\.)?\d+)((?:deg|grad|rad|turn)?)$/,v=/^(-?\d+(?:\.\d+)?|-?\.\d+)%$/,_t=/^0x([a-f\d]{1,2})$/i,Me=/\{(\d+)\}/g,He=/,( +|\d+)/g,ke=/ +/,Ie="The provided string color doesn't have a correct format",De="The provided color object doesn't have the proper keys or format";var D,I,mt;(function(e){e.NONE="none",e.DEGREES="deg",e.GRADIANS="grad",e.RADIANS="rad",e.TURNS="turn"})(D||(D={})),function(e){e.NONE="none",e.PERCENT="percent"}(I||(I={})),function(e){e.DEVICE_CMYK="device-cmyk",e.CMYK="cmyk"}(mt||(mt={}));const K={decimals:6,legacyCSS:!1,spacesAfterCommas:!1,anglesUnit:D.NONE,rgbUnit:I.NONE,labUnit:I.NONE,cmykUnit:I.PERCENT,alphaUnit:I.NONE,cmykFunction:mt.DEVICE_CMYK},H=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),bt=e=>+`${e}`.replace(v,"$1"),q=e=>v.test(`${e}`)?bt(e):Math.min(+e,100),ft=e=>(e.length===1&&(e+=e),parseInt(e,16)),xt=e=>{const t=p(e,0).toString(16).toUpperCase();return t.length===1?`0x0${t}`:`0x${t}`},z=(e,t=!1)=>!t&&v.test(e)?Math.min(255*bt(e)/100,255):_t.test(e)?(e.length===3&&(e+=e.slice(-1)),t?p(e)/255:p(e)):Math.min(+e,t?1:255),At=e=>v.test(e)?w(125*bt(e)/100,-125,125):w(+e,-125,125),U=e=>Math.min(v.test(e)?bt(e)/100:+e,1),de=e=>[...e].sort().join("").toUpperCase(),p=(e,t=6)=>{const r=Math.pow(10,t);return Math.round(+e*r)/r},w=(e,t,r)=>Math.max(t,Math.min(e,r)),gt=e=>{if(typeof e=="string"){const t=e.match(ae),r=+t[1];switch(t[2]){case D.RADIANS:e=p(180*r/Math.PI);break;case D.TURNS:e=p(360*r);break;case D.GRADIANS:e=p(.9*r);break;case D.DEGREES:default:e=r}}return(e>360||e<0)&&(e-=360*Math.floor(e/360)),e},Oe=(e,t)=>{let r;switch(t){case D.RADIANS:r=p((o=>o*Math.PI/180)(e));break;case D.TURNS:r=p(e/360);break;case D.GRADIANS:r=p(10/9*e);break;case D.DEGREES:case D.NONE:default:r=e}return r},x=(e,...t)=>{const r=[],o=[],i=[],s=[],n=[],a=[],h=Object.values(D),d=Object.values(I),m=Object.values(mt),l={legacyCSS:0,spacesAfterCommas:0,cmykFunction:0};for(const c of t)if(typeof c=="string"){if(r.push(c),c.includes(",")){l.legacyCSS++;const g=c.match(He);new Set(g).size===1&&ke.test(g[0].slice(1))&&l.spacesAfterCommas++}if(c.match(O.HSL)){const g=c.match(O.HSL),R=g[1]||g[5],T=g[8],A=R.match(ae)[2];o.push(A===""?D.NONE:A),a.push(v.test(T));continue}if(O.RGB.test(c)){const g=c.match(O.RGB),R=g[1]||g[5],T=g[2]||g[6],A=g[3]||g[7],W=g[8];i.push(v.test(R)&&v.test(T)&&v.test(A)),a.push(v.test(W));continue}if(O.CIELab.test(c)){const g=c.match(O.CIELab),R=g[1],T=g[2],A=g[3],W=g[4];s.push(v.test(R)&&v.test(T)&&v.test(A)),a.push(v.test(W));continue}if(c.match(O.CMYK)){const g=c.match(O.CMYK),R=g[1]||g[6],T=g[2]||g[7],A=g[3]||g[8],W=g[4]||g[9],P=g[10];n.push(v.test(R)&&v.test(T)&&v.test(A)&&v.test(W)),c.startsWith("cmyk")&&l.cmykFunction++,a.push(v.test(P))}}return{decimals:typeof e.decimals===ht.NUMBER?e.decimals:K.decimals,legacyCSS:typeof e.legacyCSS===ht.BOOLEAN?e.legacyCSS:!!(r.length&&l.legacyCSS===r.length)||K.legacyCSS,spacesAfterCommas:typeof e.spacesAfterCommas===ht.BOOLEAN?e.spacesAfterCommas:!!(r.length&&l.spacesAfterCommas===r.length)||K.spacesAfterCommas,anglesUnit:e.anglesUnit&&h.includes(e.anglesUnit)?e.anglesUnit:new Set(o).size===1?o[0]:K.anglesUnit,rgbUnit:e.rgbUnit&&d.includes(e.rgbUnit)?e.rgbUnit:new Set(i).size===1&&i[0]?I.PERCENT:K.rgbUnit,labUnit:e.labUnit&&d.includes(e.labUnit)?e.labUnit:new Set(s).size===1&&s[0]?I.PERCENT:K.labUnit,cmykUnit:e.cmykUnit&&d.includes(e.cmykUnit)?e.cmykUnit:new Set(n).size!==1||n[0]?K.cmykUnit:I.NONE,alphaUnit:e.alphaUnit&&d.includes(e.alphaUnit)?e.alphaUnit:new Set(a).size===1&&a[0]?I.PERCENT:K.alphaUnit,cmykFunction:e.cmykFunction&&m.includes(e.cmykFunction)?e.cmykFunction:n.length&&n.length===l.cmykFunction?mt.CMYK:K.cmykFunction}},St=e=>`${e}`in B,he=[[.4360747,.3850649,.1430804],[.2225045,.7168786,.0606169],[.0139322,.0971045,.7141733]],Ge=[[3.1338561,-1.6168667,-.4906146],[-.9787684,1.9161415,.033454],[.0719453,-.2289914,1.4052427]],tt=he.map(e=>e.reduce((t,r)=>t+r,0)),vt=(e,t,r)=>(r<0&&(r+=6),r>=6&&(r-=6),p(r<1?255*((t-e)*r+e):r<3?255*t:r<4?255*((t-e)*(4-r)+e):255*e)),We=e=>e<=.04045?e/12.92:((e+.055)/1.055)**2.4,Ne=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055,le=(e,t,r,o)=>{const i=[0,0,0],s=[e,t,r];return o.forEach((n,a)=>{n.forEach((h,d)=>{i[a]+=h*s[d]})}),i},F=(e,t,r)=>{t/=100;const o=(r/=100)<=.5?r*(t+1):r+t-r*t,i=2*r-o;return{R:vt(i,o,(e/=60)+2),G:vt(i,o,e),B:vt(i,o,e-2)}},rt=(e,t,r,o=1)=>{e/=255,t/=255,r/=255,o=Math.min(o,1);const i=Math.max(e,t,r),s=Math.min(e,t,r),n=i-s;let a=0,h=0;const d=(i+s)/2;if(n!==0){switch(i){case e:a=(t-r)/n%6;break;case t:a=(r-e)/n+2;break;case r:a=(e-t)/n+4}a=p(60*a),a<0&&(a+=360),h=n/(1-Math.abs(2*d-1))}return{H:a,S:p(100*h),L:p(100*d),A:o}},ot=(e,t,r)=>{const o=[e/255,t/255,r/255].map(We),i=le(o[0],o[1],o[2],he),s=((n,a,h)=>{const d=c=>c>.008856451679035631?Math.cbrt(c):c/.12841854934601665+.13793103448275862,m=d(n/tt[0]),l=d(a/tt[1]);return[116*l-16,500*(m-l),200*(l-d(h/tt[2]))]})(i[0],i[1],i[2]);return{L:s[0],a:s[1],b:s[2]}},Zt=(e,t,r)=>{const o=((s,n,a)=>{const h=c=>c>.20689655172413793?c**3:.12841854934601665*(c-.13793103448275862),d=(s+16)/116,m=n/500,l=a/200;return[tt[0]*h(d+m),tt[1]*h(d),tt[2]*h(d-l)]})(e,t,r),i=le(o[0],o[1],o[2],Ge).map(Ne);return{R:w(255*i[0],0,255),G:w(255*i[1],0,255),B:w(255*i[2],0,255)}},Qt=(e,t,r,o)=>({R:p(255*(1-e)*(o=1-o)),G:p(255*(1-t)*o),B:p(255*(1-r)*o)}),ue=(e,t,r)=>{e/=255,t/=255,r/=255;const o=1-Math.max(e,t,r),i=1-o,s=i&&(i-t)/i,n=i&&(i-r)/i;return{C:p(100*(i&&(i-e)/i)),M:p(100*s),Y:p(100*n),K:p(100*o)}},oe=(e,t)=>{if(e<0&&(e+=360),e>360&&(e-=360),e===360||e===0)return e;const r=[[0,120],[120,180],[180,240],[240,360]],o=[[0,60],[60,120],[120,240],[240,360]],i=t?o:r;let s=0,n=0,a=0,h=0;return(t?r:o).find((d,m)=>e>=d[0]&&e<d[1]&&(s=d[0],n=d[1],a=i[m][0],h=i[m][1],!0)),a+(h-a)/(n-s)*(e-s)},Tt=e=>e?", ":",",nt=(e,t)=>{const r=de(Object.keys(e));return we[Yt[r]].reduce((o,i,s)=>{const n=e[i];return n!==void 0&&o.push(t(n,s)),o},[])},at=(e,t)=>e.replace(Me,(r,o)=>`${t[+o-1]}`),$t=(e,t,r=!1)=>{const{alphaUnit:o,legacyCSS:i,decimals:s}=t;return o!==I.PERCENT||i&&!r?p(e,s):`${p(100*e,s)}%`},b={[f.HEX]:e=>{const t=nt(e,o=>(i=>{let s=p(i,0).toString(16).toUpperCase();return s.length===1&&(s=`0${s}`),s})(p(o))),r=t.length===4?"#{1}{2}{3}{4}":"#{1}{2}{3}";return at(r,t)},[f.RGB]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,rgbUnit:s}=t,n=Tt(i),a=nt(e,(d,m)=>s===I.PERCENT&&m<3?`${((l,c)=>p(l/255*100,c))(d,r)}%`:m===3?$t(d,t):p(d,r)),h=o?a.length===4?`rgba({1}${n}{2}${n}{3}${n}{4})`:`rgb({1}${n}{2}${n}{3})`:a.length===4?"rgb({1} {2} {3} / {4})":"rgb({1} {2} {3})";return at(h,a)},[f.HSL]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,anglesUnit:s}=t,n=Tt(i),a=nt(e,(d,m)=>m===0&&s!==D.NONE?`${p(Oe(d,s),r)}${s}`:m===3?$t(d,t):p(d,r)),h=o?a.length===4?`hsla({1}${n}{2}%${n}{3}%${n}{4})`:`hsl({1}${n}{2}%${n}{3}%)`:a.length===4?"hsl({1} {2}% {3}% / {4})":"hsl({1} {2}% {3}%)";return at(h,a)},[f.CIELab]:(e,t)=>{const{decimals:r,labUnit:o}=t,i=nt(e,(n,a)=>{if(a===0){const h=p(q(n),r);return o===I.PERCENT?`${h}%`:`${h}`}return a<3?o===I.PERCENT?`${((h,d)=>p(h/125*100,d))(n,r)}%`:p(n,r):$t(n,t,!0)}),s=i.length===4?"lab({1} {2} {3} / {4})":"lab({1} {2} {3})";return at(s,i)},[f.CMYK]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,cmykUnit:s,cmykFunction:n}=t,a=Tt(i),h=nt(e,(m,l)=>s===I.PERCENT&&l<4?`${p(m,r)}%`:l===4?$t(m,t):p(m/100,r)),d=o?h.length===5?`${n}({1}${a}{2}${a}{3}${a}{4}${a}{5})`:`${n}({1}${a}{2}${a}{3}${a}{4})`:h.length===5?`${n}({1} {2} {3} {4} / {5})`:`${n}({1} {2} {3} {4})`;return at(d,h)}},M=e=>(typeof e=="string"&&(e=v.test(e)?bt(e)/100:+e),isNaN(+e)||e>1?1:p(e)),st=(e,t,r)=>t.reduce((o,i)=>[...o,{...e,H:r===B.ADDITIVE?gt(e.H+i):gt(oe(oe(e.H,!1)+i,!0))}],[{...e}]),Pe=(e,t)=>st(e,[30,-30],t),Ye=(e,t)=>st(e,[180],t),_e=(e,t)=>st(e,[150,-150],t),je=(e,t)=>st(e,[120,-120],t),Xe=(e,t)=>st(e,[60,-120,180],t),Ke=(e,t)=>st(e,[90,-90,180],t),S=e=>typeof e=="string"?(t=>{let r;if(Object.keys(f).some(o=>{if(O[o].test(t))return r=o,!0}),!r&&~ne.indexOf(t)&&(r=f.HEX),!r)throw new Error(Ie);return r})(e):(t=>{let r,o=!1;const i=de(Object.keys(t));if(Yt[i]&&(r=Yt[i]),r&&r===f.RGB){const s=Object.entries(t).some(a=>!_t.test(`${a[1]}`)),n=Object.entries(t).some(a=>!(v.test(`${a[1]}`)||!_t.test(`${a[1]}`)&&!isNaN(+a[1])&&+a[1]<=255));s&&n&&(o=!0),s||(r=f.HEX)}if(!r||o)throw new Error(De);return r})(e),Ve={[f.HEX](e){const t=(~ne.indexOf(e)?Ct[e]:e).match(O.HEX),r={R:ft(t[1]||t[5]),G:ft(t[2]||t[6]),B:ft(t[3]||t[7])},o=t[4]||t[8];return o!==void 0&&(r.A=ft(o)/255),r},[f.RGB](e){const t=e.match(O.RGB),r=z(t[1]||t[5]),o=z(t[2]||t[6]),i=z(t[3]||t[7]),s=t[4]||t[8],n={R:Math.min(r,255),G:Math.min(o,255),B:Math.min(i,255)};return s!==void 0&&(n.A=M(s)),n},[f.HSL](e){const t=e.match(O.HSL),r=gt(t[1]||t[5]),o=q(t[2]||t[6]),i=q(t[3]||t[7]),s=t[4]||t[8],n=F(r,o,i);return s!==void 0&&(n.A=M(s)),n},[f.CIELab](e){const t=e.match(O.CIELab),r=q(t[1]),o=At(t[2]),i=At(t[3]),s=t[4],n=Zt(r,o,i);return s!==void 0&&(n.A=M(s)),n},[f.CMYK](e){const t=e.match(O.CMYK),r=U(t[1]||t[6]),o=U(t[2]||t[7]),i=U(t[3]||t[8]),s=U(t[4]||t[9]),n=t[5]||t[10],a=Qt(r,o,i,s);return n!==void 0&&(a.A=M(n)),a}},Ue={[f.HEX](e){const t={R:z(`${e.R}`),G:z(`${e.G}`),B:z(`${e.B}`)};return H(e,"A")&&(t.A=Math.min(z(`${e.A}`,!0),1)),t},[f.RGB](e){return this.HEX(e)},[f.HSL](e){const t=q(`${e.S}`),r=q(`${e.L}`),o=F(gt(e.H),t,r);return H(e,"A")&&(o.A=M(e.A)),o},[f.CIELab](e){const t=q(`${e.L}`),r=At(`${e.a}`),o=At(`${e.b}`),i=Zt(t,r,o);return H(e,"A")&&(i.A=M(e.A)),i},[f.CMYK](e){const t=U(`${e.C}`),r=U(`${e.M}`),o=U(`${e.Y}`),i=U(`${e.K}`),s=Qt(t,r,o,i);return H(e,"A")&&(s.A=M(e.A)),s}},Z=(e,t=S(e))=>typeof e=="string"?Ve[t](e):Ue[t](e),u={[f.HEX]:e=>({R:xt(e.R),G:xt(e.G),B:xt(e.B)}),HEXA(e){const t=u.HEX(e);return t.A=H(e,"A")?xt(255*e.A):"0xFF",t},[f.RGB](e,t){const r=ze(e,t);return H(r,"A")&&delete r.A,r},RGBA(e,t){const r=u.RGB(e,t);return r.A=H(e,"A")?p(e.A):1,r},[f.HSL](e,t){const r=rt(e.R,e.G,e.B);return delete r.A,jt(r,t)},HSLA(e,t){const r=u.HSL(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[f.CIELab](e,t){const r=ot(e.R,e.G,e.B);return qe(r,t)},CIELabA(e,t){const r=u.CIELab(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[f.CMYK]:(e,t)=>Ze(ue(e.R,e.G,e.B),t),CMYKA(e,t){const r=u.CMYK(e,t);return r.A=H(e,"A")?p(e.A,t):1,r}},Lt=(e,t,r,o)=>{const i=S(e),s=typeof e=="string",n=Z(e,i),a=typeof e=="string"&&H(n,"A")||typeof e!="string"&&H(e,"A"),h=rt(n.R,n.G,n.B,n.A);a||delete h.A;const d=r?h.L/(t+1):(100-h.L)/(t+1),m=Array(t).fill(null).map((l,c)=>({...h,L:h.L+d*(c+1)*(1-2*+r)}));switch(i){case f.HEX:default:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?a?b.HEX({...c,A:p(255*c.A)}):b.HEX(c):a?u.HEXA(c):u.HEX(c)});case f.RGB:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?b.RGB(c,o):a?u.RGBA(c,o.decimals):u.RGB(c,o.decimals)});case f.HSL:return m.map(l=>s?b.HSL(l,o):a?u.HSLA({...F(l.H,l.S,l.L),A:l.A},o.decimals):u.HSL(F(l.H,l.S,l.L),o.decimals));case f.CIELab:return m.map(l=>{const c=F(l.H,l.S,l.L);return s?b.CIELab(a?u.CIELabA(c,o.decimals):u.CIELab(c,o.decimals),o):a?u.CIELabA({...c,A:l.A},o.decimals):u.CIELab(c,o.decimals)})}},J={buildHarmony(e,t,r,o){const i=S(e),s=Z(e,i),n=rt(s.R,s.G,s.B,s.A),a=typeof e=="string"&&H(s,"A")||typeof e!="string"&&H(e,"A"),h=typeof e=="string";switch(i){case f.HEX:default:return a?this.HEXA(jt(n,0),t,r,h):this.HEX(jt(n,0),t,r,h);case f.HSL:return a?this.HSLA(n,t,r,h,o):this.HSL(n,t,r,h,o);case f.RGB:return a?this.RGBA(n,t,r,h,o):this.RGB(n,t,r,h,o);case f.CIELab:return a?this.CIELabA(n,t,r,h,o):this.CIELab(n,t,r,h,o)}},[f.HEX]:(e,t,r,o)=>t(e,r).map(i=>o?b.HEX(F(i.H,i.S,i.L)):u.HEX(F(i.H,i.S,i.L))),HEXA:(e,t,r,o)=>t(e,r).map(i=>o?b.HEX({...F(i.H,i.S,i.L),A:255*M(i.A)}):u.HEXA({...F(i.H,i.S,i.L),A:M(i.A)})),[f.RGB]:(e,t,r,o,i)=>t(e,r).map(s=>o?b.RGB(F(s.H,s.S,s.L),i):u.RGB(F(s.H,s.S,s.L),i.decimals)),RGBA:(e,t,r,o,i)=>t(e,r).map(s=>o?b.RGB({...F(s.H,s.S,s.L),A:M(s.A)},i):u.RGBA({...F(s.H,s.S,s.L),A:M(s.A)},i.decimals)),[f.HSL]:(e,t,r,o,i)=>t(e,r).map(s=>o?b.HSL({H:s.H,S:s.S,L:s.L},i):u.HSL(F(s.H,s.S,s.L),i.decimals)),HSLA:(e,t,r,o,i)=>t(e,r).map(s=>o?b.HSL({...s,A:M(s.A)},i):u.HSLA({...F(s.H,s.S,s.L),A:M(s.A)},i.decimals)),[f.CIELab]:(e,t,r,o,i)=>t(e,r).map(s=>{const n=F(s.H,s.S,s.L);return o?b.CIELab(ot(n.R,n.G,n.B),i):u.CIELab(n,i.decimals)}),CIELabA:(e,t,r,o,i)=>t(e,r).map(s=>{const n=F(s.H,s.S,s.L);return o?b.CIELab({...ot(n.R,n.G,n.B),A:M(s.A)},i):u.CIELabA({...n,A:M(s.A)},i.decimals)})},C={mix(e,t){const r=e.map(n=>{const a=S(n);return Z(n,a)}),o=t===B.SUBTRACTIVE?r.map(n=>{const a=((h,d,m)=>{const l=Math.min(h,d,m),c=Math.min(255-h,255-d,255-m),g=h-l,R=d-l,T=m-l,A=Math.min(g,R),W=g-A,P=(R+A)/2,X=(T+R-A)/2,Y=Math.max(W,P,X)/Math.max(g,R,T),Et=isNaN(Y)||Y===1/0||Y<=0?1:Y;return{R:W/Et+c,Y:P/Et+c,B:X/Et+c}})(n.R,n.G,n.B);return H(n,"A")&&(a.A=n.A),a}):null;function i(n){const a=t===B.ADDITIVE?{R:0,G:0,B:0,A:0}:{R:0,Y:0,B:0,A:0};return n.reduce((h,d)=>{const m=H(d,"A")?d.A:1,l={R:Math.min(h.R+d.R*m,255),B:Math.min(h.B+d.B*m,255),A:1-(1-m)*(1-h.A)},c="G"in h?h.G:h.Y,g="G"in d?d.G:d.Y;return{...l,...t===B.ADDITIVE?{G:Math.min(c+g*m,255)}:{Y:Math.min(c+g*m,255)}}},a)}let s;if(t===B.ADDITIVE)s=i(r);else{const n=i(o);s=((a,h,d)=>{const m=Math.min(a,h,d),l=Math.min(255-a,255-h,255-d),c=a-m,g=h-m,R=d-m,T=Math.min(g,R),A=c+g-T,W=g+T,P=2*(R-T),X=Math.max(A,W,P)/Math.max(c,g,R),Y=isNaN(X)||X===1/0||X<=0?1:X;return{R:A/Y+l,G:W/Y+l,B:P/Y+l}})(n.R,n.Y,n.B),s.A=n.A}return{R:p(s.R),G:p(s.G),B:p(s.B),A:w(s.A,0,1)}},[f.HEX](e,t,r){const o=this.mix(e,t);return delete o.A,r?b.HEX(o):u.HEX(o)},HEXA(e,t,r){const o=this.mix(e,t);return o.A=r?255*M(o.A):M(o.A),r?b.HEX(o):u.HEXA(o)},[f.RGB](e,t,r,o){const i=this.mix(e,t);return delete i.A,r?b.RGB(i,o):u.RGB(i,o.decimals)},RGBA(e,t,r,o){const i=this.mix(e,t);return r?b.RGB(i,o):u.RGBA(i,o.decimals)},[f.HSL](e,t,r,o){const i=this.mix(e,t),s=rt(i.R,i.G,i.B);return delete i.A,delete s.A,r?b.HSL(s,o):u.HSL(i,o.decimals)},HSLA(e,t,r,o){const i=this.mix(e,t),s=rt(i.R,i.G,i.B,i.A);return r?b.HSL(s,o):u.HSLA(i,o.decimals)},[f.CIELab](e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B);return delete i.A,r?b.CIELab(s,o):u.CIELabA(i,o.decimals)},CIELabA(e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B);return H(i,"A")&&(s.A=i.A),r?b.CIELab(s,o):u.CIELabA(i,o.decimals)}},ze=(e,t)=>({R:p(e.R,t),G:p(e.G,t),B:p(e.B,t),...H(e,"A")?{A:p(e.A,t)}:{}}),jt=(e,t)=>({H:p(e.H,t),S:p(e.S,t),L:p(e.L,t),...H(e,"A")?{A:p(e.A,t)}:{}}),qe=(e,t)=>({L:p(e.L,t),a:p(e.a,t),b:p(e.b,t)}),Ze=(e,t)=>({C:p(e.C,t),M:p(e.M,t),Y:p(e.Y,t),K:p(e.K,t)}),k=(e,t,r,o)=>o(Z(e,t),r),E=(e,t,r,o,i)=>(r<1&&(r=5),((n,a,h)=>{const d=h-1,m=(a.R-n.R)/d,l=(a.G-n.G)/d,c=(a.B-n.B)/d,g=M(n.A),R=(M(a.A)-g)/d;return Array(h).fill(null).map((T,A)=>A===0?n:A===d?a:{R:p(n.R+m*A),G:p(n.G+l*A),B:p(n.B+c*A),A:p(g+R*A)})})(Z(e),Z(t),r).map(n=>i(n,o))),Ft=(e,t,r,o)=>({[j.ANALOGOUS]:J.buildHarmony(t,Pe,r,o),[j.COMPLEMENTARY]:J.buildHarmony(t,Ye,r,o),[j.SPLIT_COMPLEMENTARY]:J.buildHarmony(t,_e,r,o),[j.TRIADIC]:J.buildHarmony(t,je,r,o),[j.TETRADIC]:J.buildHarmony(t,Xe,r,o),[j.SQUARE]:J.buildHarmony(t,Ke,r,o)})[e];class N{constructor(t,r={}){this._options=x(r,t),this.rgb=Z(t),this.updateHSL(),this.updateLab(),this.updateCMYK()}updateRGB(){this.rgb={...F(this.hsl.H,this.hsl.S,this.hsl.L),A:this.hsl.A}}updateRGBFromCMYK(){this.rgb={...Qt(this.cmyk.C,this.cmyk.M,this.cmyk.Y,this.cmyk.K),A:this.rgb.A}}updateRGBFromLab(){this.rgb={...Zt(this.lab.L,this.lab.a,this.lab.b),A:this.rgb.A}}updateHSL(){this.hsl=rt(this.rgb.R,this.rgb.G,this.rgb.B,this.rgb.A)}updateLab(){this.lab={...ot(this.rgb.R,this.rgb.G,this.rgb.B),A:this.rgb.A}}updateCMYK(){this.cmyk=ue(this.rgb.R,this.rgb.G,this.rgb.B)}setOptions(t={}){return this._options={...this._options,...t},this}setH(t){return this.hsl.H=gt(t),this.updateRGB(),this.updateLab(),this.updateCMYK(),this}setS(t){return this.hsl.S=w(t,0,100),this.updateRGB(),this.updateLab(),this.updateCMYK(),this}setL(t){return this.hsl.L=w(t,0,100),this.updateRGB(),this.updateLab(),this.updateCMYK(),this}setR(t){this.rgb.R=w(t,0,255),this.updateHSL(),this.updateLab(),this.updateCMYK()}setG(t){return this.rgb.G=w(t,0,255),this.updateHSL(),this.updateLab(),this.updateCMYK(),this}setB(t){return this.rgb.B=w(t,0,255),this.updateHSL(),this.updateLab(),this.updateCMYK(),this}setCIEL(t){return this.lab.L=w(t,0,100),this.updateRGBFromLab(),this.updateHSL(),this.updateCMYK(),this}setCIEa(t){return this.lab.a=w(t,-125,125),this.updateRGBFromLab(),this.updateHSL(),this.updateCMYK(),this}setCIEb(t){return this.lab.b=w(t,-125,125),this.updateRGBFromLab(),this.updateHSL(),this.updateCMYK(),this}setA(t){return this.hsl.A=this.rgb.A=w(t,0,1),this}setC(t){return this.cmyk.C=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}setM(t){return this.cmyk.M=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}setY(t){return this.cmyk.Y=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}setK(t){return this.cmyk.K=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}get options(){return this._options}get H(){return p(this.hsl.H,this.options.decimals)}get S(){return p(this.hsl.S,this.options.decimals)}get L(){return p(this.hsl.L,this.options.decimals)}get CIEL(){return p(this.lab.L,this.options.decimals)}get CIEa(){return p(this.lab.a,this.options.decimals)}get CIEb(){return p(this.lab.b,this.options.decimals)}get R(){return p(this.rgb.R,this.options.decimals)}get G(){return p(this.rgb.G,this.options.decimals)}get B(){return p(this.rgb.B,this.options.decimals)}get A(){return p(this.hsl.A,this.options.decimals)}get C(){return p(this.cmyk.C,this.options.decimals)}get M(){return p(this.cmyk.M,this.options.decimals)}get Y(){return p(this.cmyk.Y,this.options.decimals)}get K(){return p(this.cmyk.K,this.options.decimals)}get HEXObject(){return u.HEX(this.rgb)}get HEXAObject(){return u.HEXA(this.rgb)}get RGBObject(){return{R:this.R,G:this.G,B:this.B}}get RGBAObject(){return{...this.RGBObject,A:this.A}}get HSLObject(){return{H:this.H,S:this.S,L:this.L}}get HSLAObject(){return{...this.HSLObject,A:this.A}}get CIELabObject(){return{L:this.CIEL,a:this.CIEa,b:this.CIEb}}get CIELabAObject(){return{...this.CIELabObject,A:this.A}}get CMYKObject(){return{C:this.C,M:this.M,Y:this.Y,K:this.K}}get CMYKAObject(){return{...this.CMYKObject,A:this.A}}get HEX(){return b.HEX({R:this.R,G:this.G,B:this.B})}get HEXA(){return b.HEX({R:this.R,G:this.G,B:this.B,A:255*this.A})}get RGB(){return b.RGB({R:this.R,G:this.G,B:this.B},this.options)}get RGBA(){return b.RGB({R:this.R,G:this.G,B:this.B,A:this.A},this.options)}get HSL(){return b.HSL({H:this.H,S:this.S,L:this.L},this.options)}get HSLA(){return b.HSL({H:this.H,S:this.S,L:this.L,A:this.A},this.options)}get CIELab(){return b.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb},this.options)}get CIELabA(){return b.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb,A:this.A},this.options)}get CMYK(){return b.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K},this.options)}get CMYKA(){return b.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K,A:this.A},this.options)}static toHEXObject(t){const r=S(t);return k(t,r,0,u.HEX)}static toHEX(t){return b.HEX(N.toHEXObject(t))}static toHEXAObject(t){const r=S(t);return k(t,r,0,u.HEXA)}static toHEXA(t){return b.HEX(N.toHEXAObject(t))}static toRGBObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.RGB)}static toRGB(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.RGB);return b.RGB(s,i)}static toRGBAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.RGBA)}static toRGBA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.RGBA);return b.RGB(s,i)}static toHSLObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.HSL)}static toHSL(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.HSL);return b.HSL(s,i)}static toHSLAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.HSLA)}static toHSLA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.HSLA);return b.HSL(s,i)}static toCIELabObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CIELab)}static toCIELab(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CIELab);return b.CIELab(s,i)}static toCIELabAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CIELabA)}static toCIELabA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CIELabA);return b.CIELab(s,i)}static toCMYKObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CMYK)}static toCMYK(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CMYK);return b.CMYK(s,i)}static toCMYKAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CMYKA)}static toCMYKA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CMYKA);return b.CMYK(s,i)}static getBlendHEXObject(t,r,o=5){return E(t,r,o,0,u.HEX)}static getBlendHEX(t,r,o=5){return N.getBlendHEXObject(t,r,o).map(i=>b.HEX(i))}static getBlendHEXAObject(t,r,o=5){return E(t,r,o,0,u.HEXA)}static getBlendHEXA(t,r,o=5){return N.getBlendHEXAObject(t,r,o).map(i=>b.HEX(i))}static getBlendRGBObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGB):E(t,r,5,o?.decimals,u.RGB)}static getBlendRGB(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGB).map(s=>b.RGB(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.RGB).map(s=>b.RGB(s,x(o||{},t,r)))}static getBlendRGBAObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGBA):E(t,r,5,o?.decimals,u.RGBA)}static getBlendRGBA(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGBA).map(s=>b.RGB(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.RGBA).map(s=>b.RGB(s,x(o||{},t,r)))}static getBlendHSLObject(t,r,o,i){return E(t,r,typeof o=="number"?o:5,i?.decimals,u.HSL)}static getBlendHSL(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.HSL).map(s=>b.HSL(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.HSL).map(s=>b.HSL(s,x(o||{},t,r)))}static getBlendHSLAObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.HSLA):E(t,r,5,o?.decimals,u.HSLA)}static getBlendHSLA(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.HSLA).map(s=>b.HSL(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.HSLA).map(s=>b.HSL(s,x(o||{},t,r)))}static getBlendCIELabObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELab):E(t,r,5,o?.decimals,u.CIELab)}static getBlendCIELab(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELab).map(s=>b.CIELab(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.CIELab).map(s=>b.CIELab(s,x(o||{},t,r)))}static getBlendCIELabAObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELabA):E(t,r,5,o?.decimals,u.CIELabA)}static getBlendCIELabA(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELabA).map(s=>b.CIELab(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.CIELabA).map(s=>b.CIELab(s,x(o||{},t,r)))}static getMixHEXObject(t,r=B.ADDITIVE){return C.HEX(t,r,!1)}static getMixHEX(t,r=B.ADDITIVE){return C.HEX(t,r,!0)}static getMixHEXAObject(t,r=B.ADDITIVE){return C.HEXA(t,r,!1)}static getMixHEXA(t,r=B.ADDITIVE){return C.HEXA(t,r,!0)}static getMixRGBObject(t,r,o){return typeof r=="string"?C.RGB(t,r,!1,x(o||{},...t)):C.RGB(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixRGB(t,r,o){return typeof r=="string"?C.RGB(t,r,!0,x(o||{},...t)):C.RGB(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixRGBAObject(t,r,o){return typeof r=="string"?C.RGBA(t,r,!1,x(o||{},...t)):C.RGBA(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixRGBA(t,r,o){return typeof r=="string"?C.RGBA(t,r,!0,x(o||{},...t)):C.RGBA(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixHSLObject(t,r,o){return typeof r=="string"?C.HSL(t,r,!1,x(o||{},...t)):C.HSL(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixHSL(t,r,o){return typeof r=="string"?C.HSL(t,r,!0,x(o||{},...t)):C.HSL(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixHSLAObject(t,r,o){return typeof r=="string"?C.HSLA(t,r,!1,x(o||{},...t)):C.HSLA(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixHSLA(t,r,o){return typeof r=="string"?C.HSLA(t,r,!0,x(o||{},...t)):C.HSLA(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixCIELabObject(t,r,o){return typeof r=="string"?C.CIELab(t,r,!1,x(o||{},...t)):C.CIELab(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixCIELab(t,r,o){return typeof r=="string"?C.CIELab(t,r,!0,x(o||{},...t)):C.CIELab(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixCIELabAObject(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!1,x(o||{},...t)):C.CIELabA(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixCIELabA(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!0,x(o||{},...t)):C.CIELabA(t,B.ADDITIVE,!0,x(r||{},...t))}static getShades(t,r,o){return typeof r=="number"?Lt(t,r,!0,x(o||{},t)):Lt(t,5,!0,x(r||{},t))}static getTints(t,r,o){return typeof r=="number"?Lt(t,r,!1,x(o||{},t)):Lt(t,5,!1,x(r||{},t))}static getHarmony(t,r,o,i){return`${r}`in j?Ft(r,t,St(o)?o:B.ADDITIVE,x(St(o)?i||{}:o||{},t)):St(r)?Ft(j.COMPLEMENTARY,t,r,x(o||{},t)):Ft(j.COMPLEMENTARY,t,B.ADDITIVE,x(r||{},t))}}function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}function Qe(e){return e.split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).toString().replaceAll(",","")}class Je extends y{type;name;constructor(t,r){super("div"),this.staticClass("style-panel"),this.type=r,this.name=t,this.layout(),this.on("input",o=>{this.role_model_list.forEach(([i,s])=>{s.update(this),V.updateStyle(this.name,s,[i])})})}layout(){if(!this.roles.length)return this.clear();const t=this.data.backgroundColor==="??"?{HEX:"??",A:"??"}:new N(this.data.backgroundColor),r=this.data.color==="??"?{HEX:"??",A:"??"}:new N(this.data.color);this.content([$("section").content([$("h3").content("Properties"),$("div").content([new re("display").label("Display").add([["block","inline","flex","none"].map(o=>$("option").content(o).value(o))]),new _("opacity").value(this.data.opacity).unit("px").min(0).max(1).label("Opacity").self(o=>{o.$range.step(.01),o.$value.step(.1)})])]),this.type==="text"?$("section").content([$("h3").content("Font"),$("div").content([new _("font-size").value(this.data.fontSize).unit("px").min(1).label("Size"),new _("font-weight").min(100).max(900).label("Weight").value(this.data.fontWeight).self(o=>o.$range.step(100)),new Rt("font-color").value(this.data.color).label("Color"),new _("font-color-transparent").value(r.A.toString()).unit("px").min(0).max(1).label("Transparent").self(o=>{o.$range.step(.01),o.$value.step(.1)})])]):void 0,this.type==="image"?$("section").content([$("h3").content("Dimension"),$("div").content([new _("height").value(this.data.height).unit("px").min(1).label("Height"),new _("width").value(this.data.width).unit("px").min(1).label("Width")])]):void 0,$("section").content([$("h3").content("Background"),$("div").content([new Rt("background-color").value(t.HEX).label("Color"),new _("background-color-transparent").value(t.A.toString()).unit("px").min(0).max(1).label("Transparent").self(o=>{o.$range.step(.01),o.$value.step(.1)})])]),$("section").content([$("h3").content("Padding"),$("div").content([["left","top","right","bottom"].map(o=>new _(`padding-${o}`).value(this.data[`padding${G(o)}`]).unit("px").label(G(o)))])]),$("section").content([$("h3").content("Margin"),$("div").content([["left","top","right","bottom"].map(o=>new _(`margin-${o}`).value(this.data[`margin${G(o)}`]).unit("px").label(G(o)))])]),$("section").content([$("header").content([$("h3").content("Border"),$("div").content([$("label").content("Link").for("border-link"),$("input").id("border-link").type("checkbox").checked(!0)])]),$("div").content([["left","top","right","bottom"].map(o=>$("section").content([$("h4").content(G(o)),$("div").content([new _(`border-${o}-width`).value(this.data[`border${G(o)}Width`]).unit("px").label("Width"),new re(`border-${o}-style`).label("Style").add([["solid","dashed","doubled","dotted","groove","outset","inset","ridge","hidden"].map(i=>$("option").value(i).content(i).id(i))]).value(this.data[`border${G(o)}Style`]),new Rt(`border-${o}-color`).value(this.data[`border${G(o)}Color`]).label("Color")]).on("input",(i,s)=>{$(":#border-link")?.checked()&&["left","top","right","bottom"].forEach(n=>{if(n===o)return;const a=$(i.target)?.id();a?.includes("width")&&$(`:div.border-${n}-width`)?.value(s.$(`#border-${o}-width`)?.value()),a?.includes("style")&&$(`:div.border-${n}-style`)?.value(s.$(`#border-${o}-style`)?.value()),a?.includes("color")&&$(`:div.border-${n}-color`)?.value(s.$(`#border-${o}-color`)?.value())})})]))])]),$("section").content([$("h3").content("Border Radius"),["top-left","top-right","bottom-left","bottom-right"].map(o=>new _(`border-${o}-radius`).value(this.data[`border${Qe(o)}Radius`]).unit("px").label(`${o.split("-").map(i=>i.charAt(0).toUpperCase()+i.slice(1)).toString().replace(","," ")}`))])])}get models(){return this.roles.map(t=>Q.get(t).get(this.name))}get role_model_list(){return this.roles.map(t=>[t,Q.get(t).get(this.name)])}get data(){return this.roles.length>1?function(r,o){let i={};for(const[s,n]of Object.entries(r)){i[s]=n;for(const a of o)if(a[s]!==n){i[s]="??";break}}return i}(this.models[0].data,this.models.map(r=>r.data)):this.models[0].data}get roles(){return $("::.role-checkbox").map(t=>{if(t.checked())return t.value()}).detype()}}class tr{data;constructor(t){this.data=t}update(t){const r=(n,a,h=!1)=>n==="??"||n===void 0?a:h?n+"px":n,o=n=>({[`border${G(n)}Style`]:r(t.$(`#border-${n}-style`)?.value(),this.data[`boder${G(n)}Style`]),[`border${G(n)}Color`]:r(t.$(`#border-${n}-color`)?.value(),this.data[`boder${G(n)}Color`]),[`border${G(n)}Width`]:r(t.$(`#border-${n}-width`)?.value(),this.data[`boder${G(n)}Color`],!0)}),i=n=>({[`${n}Top`]:r(t.$(`#${n}-top`)?.value(),this.data[`${n}Top`],!0),[`${n}Bottom`]:r(t.$(`#${n}-bottom`)?.value(),this.data[`${n}Bottom`],!0),[`${n}Left`]:r(t.$(`#${n}-left`)?.value(),this.data[`${n}Left`],!0),[`${n}Right`]:r(t.$(`#${n}-right`)?.value(),this.data[`${n}Right`],!0)}),s={fontSize:r(t.$("#font-size")?.value(),this.data.fontSize,!0),fontWeight:r(t.$("#font-weight")?.value(),this.data.fontWeight),color:new N({...new N(r(t.$("#font-color")?.value(),this.data.color)).RGBObject,A:r(t.$("#font-color-transparent")?.value(),new N(this.data.color).A)}).HEXA,backgroundColor:new N({...new N(r(t.$("#background-color")?.value(),this.data.backgroundColor)).RGBObject,A:r(t.$("#background-color-transparent")?.value(),new N(this.data.backgroundColor).A)}).HEXA,...o("top"),...o("bottom"),...o("left"),...o("right"),borderTopLeftRadius:r(t.$("#border-top-left-radius")?.value(),this.data.borderTopLeftRadius,!0),borderTopRightRadius:r(t.$("#border-top-right-radius")?.value(),this.data.borderTopRightRadius,!0),borderBottomLeftRadius:r(t.$("#border-bottom-left-radius")?.value(),this.data.borderBottomLeftRadius,!0),borderBottomRightRadius:r(t.$("#border-bottom-right-radius")?.value(),this.data.borderBottomRightRadius,!0),...i("margin"),...i("padding"),opacity:r(t.$("#opacity")?.value(),this.data.opacity),display:r(t.$("#display")?.value(),this.data.display),height:r(t.$("#height")?.value(),this.data.height,!0),width:r(t.$("#width")?.value(),this.data.width,!0)};return this.data=s,this}cssObject(){const t={},r=(o,i)=>{for(let[s,n]of Object.entries(i)){if(s=o?o+s.charAt(0).toUpperCase()+s.slice(1):s,!(n instanceof Object)){typeof n=="number"&&s!=="opacity"&&(n=`${n}px`),Object.assign(t,{[`${s}`]:n});continue}r(s,n)}};return r(null,this.data),t}css(){}}const er={Normal:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#FFFFFFFF",backgroundColor:"#00000099",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}},Member:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#0AFFFBFF",backgroundColor:"#527F8099",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}},Moderator:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#B8CFFFFF",backgroundColor:"#2E58FF99",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}},Owner:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#FFEB6BFF",backgroundColor:"#00000099",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}}};class rr extends y{data;$content=$("div").id("content");$message=$("span").id("message");$name=$("span").id("author-name");$author_area=$("yt-live-chat-author-chip");$timestamp=$("span").id("timestamp");$avatar=$("yt-img-shadow").id("author-photo");$overlay=$("div").class("overlay");$hint=$("div").class("hint").css({display:"none"});constructor(t){super("yt-live-chat-text-message-renderer"),this.data=t,this.build(),this.init()}init(){Q.get(this.data.role)?.forEach((t,r)=>this.updateStyle(r,t))}build(){this.content([this.$overlay.content([`Role: ${this.data.role}`]),this.$hint,this.$avatar.content([$("img").src("/avatar.png")]),this.$content.content([this.$timestamp,this.$author_area.content([this.$name.content(this.data.name),$("span").id("chat-badges").content([$("yt-live-chat-author-badge-renderer").content([$("div").id("image").content([$("img")])]),this.data.role==="Moderator"?$("yt-live-chat-author-badge-renderer").attribute("type","moderator").content([$("div").id("image").self(t=>{t.dom.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" style="pointer-events: none; display: inherit; width: 100%; height: 100%;"><path d="M9.64589146,7.05569719 C9.83346524,6.562372 9.93617022,6.02722257 9.93617022,5.46808511 C9.93617022,3.00042984 7.93574038,1 5.46808511,1 C4.90894765,1 4.37379823,1.10270499 3.88047304,1.29027875 L6.95744681,4.36725249 L4.36725255,6.95744681 L1.29027875,3.88047305 C1.10270498,4.37379824 1,4.90894766 1,5.46808511 C1,7.93574038 3.00042984,9.93617022 5.46808511,9.93617022 C6.02722256,9.93617022 6.56237198,9.83346524 7.05569716,9.64589147 L12.4098057,15 L15,12.4098057 L9.64589146,7.05569719 Z"></path></svg>'})]):void 0])]),this.$message.content(this.data.message),$("span").id("deleted-state")])])}updateStyle(t,r){switch(t){case"Message":this.$message.css(r.data);break;case"Name":this.$name.css(r.data);break;case"Avatar":this.$avatar.css(r.data);break;case"Content Area":this.$content.css(r.data);break;case"Author Area":this.$author_area.css(r.data);break;case"Outer Area":this.css(r.data);break}}hint(t){switch(t){case"Message":this.hintPosition(this.$message);break;case"Name":this.hintPosition(this.$name);break;case"Avatar":this.hintPosition(this.$avatar);break;case"Content Area":this.hintPosition(this.$content);break;case"Author Area":this.hintPosition(this.$author_area);break;case"Outer Area":this.hintPosition(this);break}}hintPosition(t){const r=t.dom.getBoundingClientRect(),o=this.dom.getBoundingClientRect();this.$hint.css({position:"absolute",top:`${r.top-o.top}px`,left:`${r.left-o.left}px`,height:`${r.height}px`,width:`${r.width}px`,backgroundColor:"#ff000030",display:"block"})}}class or extends y{messageList=new Set;constructor(){super("ytchat")}send(t){const r=new rr(t);return this.messageList.add(r),this.insert(r),this}updateStyle(t,r,o){this.messageList.forEach(i=>{o.includes(i.data.role)&&i.updateStyle(t,r)})}showHint(t){this.messageList.forEach(r=>{this.roles.includes(r.data.role)&&r.hint(t)})}hideHint(){this.messageList.forEach(t=>{t.$hint.css({display:"none"})})}get roles(){return $("::.role-checkbox").map(t=>{if(t.checked())return t.value()}).detype()}}const ir=`yt-live-chat-renderer yt-live-chat-header-renderer,
+(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const o of document.querySelectorAll('link[rel="modulepreload"]'))r(o);new MutationObserver(o=>{for(const i of o)if(i.type==="childList")for(const s of i.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&r(s)}).observe(document,{childList:!0,subtree:!0});function t(o){const i={};return o.integrity&&(i.integrity=o.integrity),o.referrerPolicy&&(i.referrerPolicy=o.referrerPolicy),o.crossOrigin==="use-credentials"?i.credentials="include":o.crossOrigin==="anonymous"?i.credentials="omit":i.credentials="same-origin",i}function r(o){if(o.ep)return;o.ep=!0;const i=t(o);fetch(o.href,i)}})();class it{parent;__hidden=!1;domEvents={};on(t,r,o){this.domEvents[t]||(this.domEvents[t]=new Map);const i=s=>r(s,this);return this.domEvents[t].set(r,i),this.dom.addEventListener(t,i,o),this}off(t,r,o){const i=this.domEvents[t]?.get(r);return i&&this.dom.removeEventListener(t,i,o),this}once(t,r,o){const i=s=>{this.dom.removeEventListener(t,i,o),r(s,this)};return this.dom.addEventListener(t,i,o),this}hide(t){return $.fluent(this,arguments,()=>this.__hidden,()=>{if(t!==void 0)return t instanceof lt?(this.__hidden=t.value,t.use(this,"hide")):this.__hidden=t,this.parent?.children.render(),this})}remove(){return this.parent?.children.remove(this).render(),this}replace(t){return this.parent?.children.replace(this,t).render(),this}contains(t){return t?t instanceof it?this.dom.contains(t.dom):t instanceof EventTarget?this.dom.contains($(t).dom):this.dom.contains(t):!1}self(t){return t(this),this}inDOM(){return document.contains(this.dom)}isElement(){if(this instanceof et)return this}static from(t){if(t.$)return t.$;if(t instanceof HTMLElement){const r=$(t.tagName);return r.dom=t,t.parentElement&&(r.parent=$(t.parentElement)),r}else if(t instanceof Text){const r=new Bt(t.textContent??"");return r.dom=t,t.parentElement&&(r.parent=$(t.parentElement)),r}throw"$NODE.FROM: NOT SUPPORT TARGET ELEMENT TYPE"}}class et extends it{dom;static_classes=new Set;constructor(t,r){super(),this.dom=document.createElement(t),this.dom.$=this,this.setOptions(r)}setOptions(t){return this.id(t?.id),t&&t.class&&this.class(...t.class),this}id(t){return $.fluent(this,arguments,()=>this.dom.id,()=>$.set(this.dom,"id",t))}class(...t){return $.fluent(this,arguments,()=>this.dom.classList,()=>{this.dom.classList.forEach(r=>this.static_classes.has(r)??this.dom.classList.remove(r)),this.dom.classList.add(...t.detype())})}addClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.add(...t.detype())})}removeClass(...t){return $.fluent(this,arguments,()=>this,()=>{this.dom.classList.remove(...t.detype())})}staticClass(...t){return $.fluent(this,arguments,()=>this.static_classes,()=>{this.removeClass(...this.static_classes),this.static_classes.clear(),this.addStaticClass(...t)})}addStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(r=>this.static_classes.add(r)),this.addClass(...t)})}removeStaticClass(...t){return $.fluent(this,arguments,()=>this,()=>{t.detype().forEach(r=>this.static_classes.delete(r)),this.removeClass(...t)})}css(t){return $.fluent(this,arguments,()=>this.dom.style,()=>{Object.assign(this.dom.style,t)})}attribute(t,r){return arguments.length?arguments.length===1?t===void 0?null:this.dom.getAttribute(t):arguments.length===2?(t&&r&&this.dom.setAttribute(t,`${r}`),this):this:null}autocapitalize(t){return $.fluent(this,arguments,()=>this.dom.autocapitalize,()=>$.set(this.dom,"autocapitalize",t))}dir(t){return $.fluent(this,arguments,()=>this.dom.dir,()=>$.set(this.dom,"dir",t))}innerText(t){return $.fluent(this,arguments,()=>this.dom.innerText,()=>$.set(this.dom,"innerText",t))}title(t){return $.fluent(this,arguments,()=>this.dom.title,()=>$.set(this.dom,"title",t))}translate(t){return $.fluent(this,arguments,()=>this.dom.translate,()=>$.set(this.dom,"translate",t))}popover(t){return $.fluent(this,arguments,()=>this.dom.popover,()=>$.set(this.dom,"popover",t))}spellcheck(t){return $.fluent(this,arguments,()=>this.dom.spellcheck,()=>$.set(this.dom,"spellcheck",t))}inert(t){return $.fluent(this,arguments,()=>this.dom.inert,()=>$.set(this.dom,"inert",t))}lang(t){return $.fluent(this,arguments,()=>this.dom.lang,()=>$.set(this.dom,"lang",t))}draggable(t){return $.fluent(this,arguments,()=>this.dom.draggable,()=>$.set(this.dom,"draggable",t))}hidden(t){return $.fluent(this,arguments,()=>this.dom.hidden,()=>$.set(this.dom,"hidden",t))}tabIndex(t){return $.fluent(this,arguments,()=>this.dom.tabIndex,()=>$.set(this.dom,"tabIndex",t))}click(){return this.dom.click(),this}attachInternals(){return this.dom.attachInternals()}hidePopover(){return this.dom.hidePopover(),this}showPopover(){return this.dom.showPopover(),this}togglePopover(){return this.dom.togglePopover(),this}focus(){return this.dom.focus(),this}blur(){return this.dom.blur(),this}animate(t,r,o){const i=this.dom.animate(t,r);return o&&o(i),this}getAnimations(t){return this.dom.getAnimations(t)}get accessKeyLabel(){return this.dom.accessKeyLabel}get offsetHeight(){return this.dom.offsetHeight}get offsetLeft(){return this.dom.offsetLeft}get offsetParent(){return $(this.dom.offsetParent)}get offsetTop(){return this.dom.offsetTop}get offsetWidth(){return this.dom.offsetWidth}get dataset(){return this.dom.dataset}}class Bt extends it{dom;constructor(t){super(),this.dom=new Text(t),this.dom.$=this}content(t){return $.fluent(this,arguments,()=>this.dom.textContent,()=>$.set(this.dom,"textContent",t))}}class pe{#t;#e;elementList=new Set;constructor(t){this.#t=t,this.#e=this.#t.dom}add(t){if(typeof t=="string"){const r=new Bt(t);r.parent=this.#t,this.elementList.add(r)}else t.parent=this.#t,this.elementList.add(t)}remove(t){return this.elementList.has(t)?(this.elementList.delete(t),t.parent=void 0,this):this}removeAll(t=!0){this.elementList.forEach(r=>this.remove(r)),t&&this.render()}replace(t,r){const o=this.array.map(i=>i===t?r:i);return this.elementList.clear(),o.forEach(i=>this.elementList.add(i)),t.parent=void 0,r.parent=this.#t,this}render(){const[t,r]=[this.array.map(i=>i.dom),Array.from(this.#e.childNodes)],o=[];for(;r.length||t.length;){const[i,s]=[r.at(0),t.at(0)];s?i?s!==i?(s.$.__hidden||(this.#e.insertBefore(s,i),o.push(s)),t.shift()):(s.$.__hidden&&this.#e.removeChild(s),t.shift(),r.shift()):(s.$.__hidden||this.#e.append(s),t.shift()):(i&&!o.includes(i)&&i.remove(),r.shift())}}get array(){return[...this.elementList.values()]}}class lt{value;attributes=new Map;constructor(t){this.value=t}set(t){this.value=t;for(const[r,o]of this.attributes.entries())for(const i of o)r[i]instanceof Function&&r[i](t)}toString(){return`${this.value}`}use(t,r){const o=this.attributes.get(t);o?o.add(r):this.attributes.set(t,new Set().add(r))}}class y extends et{children=new pe(this);constructor(t,r){super(t,r)}content(t){return $.fluent(this,arguments,()=>this,()=>{this.children.removeAll(!1),this.insert(t)})}insert(t){return $.fluent(this,arguments,()=>this,()=>{t instanceof Function&&(t=t(this)),t=$.multableResolve(t);for(const r of t)if(r!==void 0)if(r instanceof Array)this.insert(r);else if(r instanceof lt){const o=new Bt(r.toString());r.use(o,"content"),this.children.add(o)}else this.children.add(r);this.children.render()})}clear(){return this.children.removeAll(),this}$(t){return $(this.dom.querySelector(t))}$all(t){return Array.from(this.dom.querySelectorAll(t)).map(r=>$(r))}}class wt extends y{constructor(t){super("a",t),this.dom.addEventListener("click",r=>{$.anchorPreventDefault&&r.preventDefault(),$.anchorHandler&&this.href()&&$.anchorHandler(this.href(),r)})}href(t){return $.fluent(this,arguments,()=>this.dom.href,()=>{t&&(this.dom.href=t)})}target(t){return $.fluent(this,arguments,()=>this.dom.target,()=>{t&&(this.dom.target=t)})}}var Mt;(e=>{function t(n,a,h,d){return a.length?(d(),n):h()}e.fluent=t;function r(n){return n instanceof Array?n:[n]}e.multableResolve=r;function o(n,a){return r(a).forEach(h=>{Object.getOwnPropertyNames(h.prototype).forEach(d=>{d!=="constructor"&&Object.defineProperty(n.prototype,d,Object.getOwnPropertyDescriptor(h.prototype,d)||Object.create(null))})}),n}e.mixin=o;function i(n,a,h){h!==void 0&&(n[a]=h)}e.set=i;function s(n){return new lt(n)}e.state=s})(Mt||(Mt={}));class Ht extends y{constructor(t){super("form",t)}autocomplete(t){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",t))}action(t){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",t))}enctype(t){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",t))}method(t){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",t))}noValidate(t){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",t))}acceptCharset(t){return $.fluent(this,arguments,()=>this.dom.acceptCharset,()=>$.set(this.dom,"acceptCharset",t))}target(t){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",t))}requestSubmit(){return this.dom.requestSubmit(),this}reset(){return this.dom.reset(),this}submit(){return this.dom.submit(),this}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}get length(){return this.dom.length}get elements(){return Array.from(this.dom.elements).map(t=>$(t))}}function Ut(e){return Mt.mixin(e,me)}class me{formAction(t){return $.fluent(this,arguments,()=>this.dom.formAction,()=>$.set(this.dom,"formAction",t))}formEnctype(t){return $.fluent(this,arguments,()=>this.dom.formEnctype,()=>$.set(this.dom,"formEnctype",t))}formMethod(t){return $.fluent(this,arguments,()=>this.dom.formMethod,()=>$.set(this.dom,"formMethod",t))}formNoValidate(t){return $.fluent(this,arguments,()=>this.dom.formNoValidate,()=>$.set(this.dom,"formNoValidate",t))}formTarget(t){return $.fluent(this,arguments,()=>this.dom.formTarget,()=>$.set(this.dom,"formTarget",t))}name(t){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}get form(){return this.dom.form?$(this.dom.form):null}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get willValidate(){return this.dom.willValidate}}var ge=Object.defineProperty,be=Object.getOwnPropertyDescriptor,fe=(e,t,r,o)=>{for(var i=o>1?void 0:o?be(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&ge(t,r,i),i};let ut=class extends y{constructor(e){super("button",e)}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}};ut=fe([Ut],ut);var xe=Object.defineProperty,$e=Object.getOwnPropertyDescriptor,Le=(e,t,r,o)=>{for(var i=o>1?void 0:o?$e(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&xe(t,r,i),i};let ct=class extends et{constructor(e){super("input",e)}accept(...e){return $.fluent(this,arguments,()=>this.dom.accept.split(","),()=>this.dom.accept=e.toString())}capture(e){return $.fluent(this,arguments,()=>this.dom.capture,()=>$.set(this.dom,"capture",e))}alt(e){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",e))}height(e){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",e))}width(e){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",e))}checked(e){return $.fluent(this,arguments,()=>this.dom.checked,()=>$.set(this.dom,"checked",e))}max(e){return $.fluent(this,arguments,()=>this.dom.max===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"max",e?.toString()))}min(e){return $.fluent(this,arguments,()=>this.dom.min===""?null:parseInt(this.dom.min),()=>$.set(this.dom,"min",e?.toString()))}maxLength(e){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",e))}minLength(e){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}defaultValue(e){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",e))}defaultChecked(e){return $.fluent(this,arguments,()=>this.dom.defaultChecked,()=>$.set(this.dom,"defaultChecked",e))}dirName(e){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",e))}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}pattern(e){return $.fluent(this,arguments,()=>this.dom.pattern,()=>$.set(this.dom,"pattern",e))}placeholder(e){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",e))}readOnly(e){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}selectionDirection(e){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",e))}selectionEnd(e){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",e))}selectionStart(e){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",e))}size(e){return $.fluent(this,arguments,()=>this.dom.size,()=>$.set(this.dom,"size",e))}src(e){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",e))}step(e){return $.fluent(this,arguments,()=>Number(this.dom.step),()=>$.set(this.dom,"step",e?.toString()))}type(e){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",e))}inputMode(e){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",e))}valueAsDate(e){return $.fluent(this,arguments,()=>this.dom.valueAsDate,()=>$.set(this.dom,"valueAsDate",e))}valueAsNumber(e){return $.fluent(this,arguments,()=>this.dom.valueAsNumber,()=>$.set(this.dom,"valueAsNumber",e))}webkitdirectory(e){return $.fluent(this,arguments,()=>this.dom.webkitdirectory,()=>$.set(this.dom,"webkitdirectory",e))}select(){return this.dom.select(),this}setCustomValidity(e){return this.dom.setCustomValidity(e),this}setRangeText(e,t,r,o){return typeof t=="number"&&typeof r=="number"&&this.dom.setRangeText(e,t,r,o),this.dom.setRangeText(e),this}setSelectionRange(e,t,r){return this.dom.setSelectionRange(e,t,r),this}showPicker(){return this.dom.showPicker(),this}stepDown(){return this.dom.stepDown(),this}stepUp(){return this.dom.stepUp(),this}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}get files(){return this.dom.files}get webkitEntries(){return this.dom.webkitEntries}};ct=Le([Ut],ct);class kt extends y{constructor(t){super("label",t)}for(t){return $.fluent(this,arguments,()=>this.dom.htmlFor,()=>{$.set(this.dom,"htmlFor",t,"for")})}get form(){return this.dom.form}get control(){return this.dom.control}}class It extends et{constructor(t){super("img",t)}alt(t){return $.fluent(this,arguments,()=>this.dom.alt,()=>$.set(this.dom,"alt",t))}crossOrigin(t){return $.fluent(this,arguments,()=>this.dom.crossOrigin,()=>$.set(this.dom,"crossOrigin",t))}decoding(t){return $.fluent(this,arguments,()=>this.dom.decoding,()=>$.set(this.dom,"decoding",t))}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>$.set(this.dom,"height",t))}isMap(t){return $.fluent(this,arguments,()=>this.dom.isMap,()=>$.set(this.dom,"isMap",t))}loading(t){return $.fluent(this,arguments,()=>this.dom.loading,()=>$.set(this.dom,"loading",t))}referrerPolicy(t){return $.fluent(this,arguments,()=>this.dom.referrerPolicy,()=>$.set(this.dom,"referrerPolicy",t))}sizes(t){return $.fluent(this,arguments,()=>this.dom.sizes,()=>$.set(this.dom,"sizes",t))}src(t){return $.fluent(this,arguments,()=>this.dom.src,()=>$.set(this.dom,"src",t))}srcset(t){return $.fluent(this,arguments,()=>this.dom.srcset,()=>$.set(this.dom,"srcset",t))}useMap(t){return $.fluent(this,arguments,()=>this.dom.useMap,()=>$.set(this.dom,"useMap",t))}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>$.set(this.dom,"width",t))}decode(){return this.dom.decode()}get complete(){return this.dom.complete}get currentSrc(){return this.dom.currentSrc}get naturalHeight(){return this.dom.naturalHeight}get naturalWidth(){return this.dom.naturalWidth}get x(){return this.dom.x}get y(){return this.dom.y}}class Dt extends y{constructor(t){super("canvas",t)}height(t){return $.fluent(this,arguments,()=>this.dom.height,()=>{$.set(this.dom,"height",t)})}width(t){return $.fluent(this,arguments,()=>this.dom.width,()=>{$.set(this.dom,"width",t)})}captureStream(t){return this.dom.captureStream(t)}getContext(t,r){return this.dom.getContext(t)}toBlob(t,r,o){return this.dom.toBlob(t,r,o),this}toDataURL(t,r){return this.dom.toDataURL(t,r)}transferControlToOffscreen(){return this.dom.transferControlToOffscreen()}}class Ot extends y{constructor(t){super("dialog",t)}open(t){return $.fluent(this,arguments,()=>this.dom.open,()=>$.set(this.dom,"open",t))}returnValue(t){return $.fluent(this,arguments,()=>this.dom.returnValue,()=>$.set(this.dom,"returnValue",t))}close(){return this.dom.close(),this}show(){return this.dom.show(),this}showModal(){return this.dom.showModal(),this}}function se(e){return $.mixin(e,Re)}class Re{on(t,r){return this.events.on(t,r),this}off(t,r){return this.events.off(t,r),this}once(t,r){return this.events.once(t,r),this}}class zt{eventMap=new Map;register(...t){return t.forEach(r=>{const o=new te(r);this.eventMap.set(o.name,o)}),this}delete(t){return this.eventMap.delete(t),this}fire(t,...r){const o=this.get(t);return o instanceof te&&o.fire(...r),this}on(t,r){return this.get(t).add(r),this}off(t,r){return this.get(t).delete(r),this}once(t,r){const o=(...i)=>{this.get(t).delete(o),r(...i)};return this.get(t).add(o),this}get(t){const r=this.eventMap.get(t);if(!r)throw new Error("EVENT NOT EXIST");return r}}class te{name;callbackList=new Set;constructor(t){this.name=t}fire(...t){this.callbackList.forEach(r=>r(...t))}add(t){this.callbackList.add(t)}delete(t){this.callbackList.delete(t)}}class yt extends y{content_cache=new Map;event=new zt().register("switch");content_id=null;constructor(t){super("view",t)}set(t,r){return this.content_cache.set(t,r),this}delete(t){return this.content_cache.delete(t),this}switch(t){const r=this.content_cache.get(t);if(r===void 0)throw"$View.switch(): target content is undefined";return this.content(r),this.content_id=t,this.event.fire("switch",t),this}}var ye=Object.defineProperty,Ce=Object.getOwnPropertyDescriptor,Ae=(e,t,r,o)=>{for(var i=o>1?void 0:o?Ce(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&ye(t,r,i),i};let pt=class extends y{constructor(){super("select")}add(e){return this.insert(e),this}item(e){return $(this.dom.item(e))}namedItem(e){return $(this.dom.namedItem(e))}disabled(e){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",e))}multiple(e){return $.fluent(this,arguments,()=>this.dom.multiple,()=>$.set(this.dom,"multiple",e))}required(e){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",e))}autocomplete(e){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",e))}get length(){return this.dom.length}get size(){return this.dom.size}get options(){return Array.from(this.dom.options).map(e=>$(e))}get selectedIndex(){return this.dom.selectedIndex}get selectedOptions(){return Array.from(this.dom.selectedOptions).map(e=>$(e))}};pt=Ae([Ut],pt);class Gt extends y{constructor(t){super("option",t)}defaultSelected(t){return $.fluent(this,arguments,()=>this.dom.defaultSelected,()=>$.set(this.dom,"defaultSelected",t))}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}label(t){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",t))}selected(t){return $.fluent(this,arguments,()=>this.dom.selected,()=>$.set(this.dom,"selected",t))}text(t){return $.fluent(this,arguments,()=>this.dom.text,()=>$.set(this.dom,"text",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}get form(){return this.dom.form?$(this.dom.form):null}get index(){return this.dom.index}}class Wt extends y{constructor(t){super("optgroup",t)}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}label(t){return $.fluent(this,arguments,()=>this.dom.label,()=>$.set(this.dom,"label",t))}}class Nt extends y{constructor(t){super("textarea",t)}cols(t){return $.fluent(this,arguments,()=>this.dom.cols,()=>$.set(this.dom,"cols",t))}name(t){return $.fluent(this,arguments,()=>this.dom.name,()=>$.set(this.dom,"name",t))}wrap(t){return $.fluent(this,arguments,()=>this.dom.wrap,()=>$.set(this.dom,"wrap",t))}value(t){return $.fluent(this,arguments,()=>this.dom.value,()=>$.set(this.dom,"value",t))}maxLength(t){return $.fluent(this,arguments,()=>this.dom.maxLength,()=>$.set(this.dom,"maxLength",t))}minLength(t){return $.fluent(this,arguments,()=>this.dom.minLength,()=>$.set(this.dom,"minLength",t))}autocomplete(t){return $.fluent(this,arguments,()=>this.dom.autocomplete,()=>$.set(this.dom,"autocomplete",t))}defaultValue(t){return $.fluent(this,arguments,()=>this.dom.defaultValue,()=>$.set(this.dom,"defaultValue",t))}dirName(t){return $.fluent(this,arguments,()=>this.dom.dirName,()=>$.set(this.dom,"dirName",t))}disabled(t){return $.fluent(this,arguments,()=>this.dom.disabled,()=>$.set(this.dom,"disabled",t))}placeholder(t){return $.fluent(this,arguments,()=>this.dom.placeholder,()=>$.set(this.dom,"placeholder",t))}readOnly(t){return $.fluent(this,arguments,()=>this.dom.readOnly,()=>$.set(this.dom,"readOnly",t))}required(t){return $.fluent(this,arguments,()=>this.dom.required,()=>$.set(this.dom,"required",t))}selectionDirection(t){return $.fluent(this,arguments,()=>this.dom.selectionDirection,()=>$.set(this.dom,"selectionDirection",t))}selectionEnd(t){return $.fluent(this,arguments,()=>this.dom.selectionEnd,()=>$.set(this.dom,"selectionEnd",t))}selectionStart(t){return $.fluent(this,arguments,()=>this.dom.selectionStart,()=>$.set(this.dom,"selectionStart",t))}type(t){return $.fluent(this,arguments,()=>this.dom.type,()=>$.set(this.dom,"type",t))}inputMode(t){return $.fluent(this,arguments,()=>this.dom.inputMode,()=>$.set(this.dom,"inputMode",t))}select(){return this.dom.select(),this}setCustomValidity(t){return this.dom.setCustomValidity(t),this}setRangeText(t,r,o,i){return typeof r=="number"&&typeof o=="number"&&this.dom.setRangeText(t,r,o,i),this.dom.setRangeText(t),this}setSelectionRange(t,r,o){return this.dom.setSelectionRange(t,r,o),this}checkValidity(){return this.dom.checkValidity()}reportValidity(){return this.dom.reportValidity()}get validationMessage(){return this.dom.validationMessage}get validity(){return this.dom.validity}get form(){return this.dom.form?$(this.dom.form):null}get labels(){return Array.from(this.dom.labels??[]).map(t=>$(t))}}function L(e){if(typeof e>"u"||e===null)return e;if(typeof e=="string"){if(e.startsWith("::"))return Array.from(document.querySelectorAll(e.replace(/^::/,""))).map(t=>L(t));if(e.startsWith(":"))return L(document.querySelector(e.replace(/^:/,"")));if(e in L.TagNameElementMap)switch(L.TagNameElementMap[e]){case et:return new et(e);case wt:return new wt;case y:return new y(e);case ct:return new ct;case kt:return new kt;case Ht:return new Ht;case ut:return new ut;case It:return new It;case Dt:return new Dt;case Ot:return new Ot;case yt:return new yt;case pt:return new pt;case Gt:return new Gt;case Wt:return new Wt;case Nt:return new Nt}else return new y(e)}if(e instanceof HTMLElement||e instanceof Text)return e.$?e.$:it.from(e);throw"$: NOT SUPPORT TARGET ELEMENT TYPE"}(e=>{e.anchorHandler=null,e.anchorPreventDefault=!1,e.routers=new Set,e.TagNameElementMap={a:wt,p:y,pre:y,code:y,blockquote:y,strong:y,h1:y,h2:y,h3:y,h4:y,h5:y,h6:y,div:y,ol:y,ul:y,dl:y,li:y,input:ct,label:kt,button:ut,form:Ht,img:It,dialog:Ot,canvas:Dt,view:yt,select:pt,option:Gt,optgroup:Wt,textarea:Nt};function t(d,m,l,c){return m.length?(c(),d):l()}e.fluent=t;function r(d){return d instanceof Array?d:[d]}e.multableResolve=r;function o(d,m){return r(m).forEach(l=>{Object.getOwnPropertyNames(l.prototype).forEach(c=>{c!=="constructor"&&Object.defineProperty(d.prototype,c,Object.getOwnPropertyDescriptor(l.prototype,c)||Object.create(null))})}),d}e.mixin=o;function i(d,m,l,c){if(l!==void 0){if(l instanceof lt&&d instanceof Node){l.use(d.$,c??m),d[m]=l.value;return}d[m]=l}}e.set=i;function s(d){return new lt(d)}e.state=s;async function n(d,m){return new Promise(l=>{const c=new FileReader;c.onload=g=>{const R=e("img");if(R.once("load",T=>{const A=e("canvas"),W=A.getContext("2d"),P=R.height()/R.width(),[X,_]=[P>1?m/P:m,P>1?m:m*P];A.height(_).width(X),W?.drawImage(R.dom,0,0,X,_),l(A.toDataURL(d.type))}),!g.target)throw"$.resize(): e.target is null";R.src(g.target.result)},c.readAsDataURL(d)})}e.resize=n;function a(d=1){return parseInt(getComputedStyle(document.documentElement).fontSize)*d}e.rem=a;function h(d,m,l){if(typeof m=="number")return Array(m).fill("").map(g=>{const R=c(d)?d[0](...d.slice(1)):e(d);return l&&l(R),R});{const g=[];for(const R of m){const T=d instanceof Function?d(...R):c(d)?d[0](...d.slice(1)):e(d);R instanceof Function?R(T):(R instanceof it||typeof R=="string")&&T.content(R),g.push(T)}return g}function c(g){return g instanceof Array&&g[0]instanceof Function}}e.builder=h})(L||(L={}));globalThis.$=L;var Be=Object.defineProperty,Ee=Object.getOwnPropertyDescriptor,Se=(e,t,r,o)=>{for(var i=o>1?void 0:o?Ee(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&Be(t,r,i),i};let Pt=class{id;content;events=new zt().register("open","load");constructor(e){this.id=e}};Pt=Se([se],Pt);var ve=Object.defineProperty,Te=Object.getOwnPropertyDescriptor,Fe=(e,t,r,o)=>{for(var i=o>1?void 0:o?Te(t,r):t,s=e.length-1,n;s>=0;s--)(n=e[s])&&(i=(o?n(t,r,i):n(i))||i);return o&&i&&ve(t,r,i),i};let ee=class{routeMap=new Map;recordMap=new Map;$view;index=0;events=new zt().register("pathchange","notfound","load");basePath;constructor(e,t){this.basePath=e,this.$view=t??new yt}addRoute(e){e=$.multableResolve(e);for(const t of e)this.routeMap.set(t.path,t);return this}listen(){if(!history.state||!("index"in history.state)){const e={index:this.index,data:{}};history.replaceState(e,"")}else this.index=history.state.index;return addEventListener("popstate",this.popstate),$.routers.add(this),this.resolvePath(),this.events.fire("pathchange",{path:location.href,navigation:"Forward"}),this}open(e){if(e===void 0)return;if(e===location.href)return this;this.index+=1;const t={index:this.index,data:{}};return history.pushState(t,"",e),$.routers.forEach(r=>r.resolvePath()),this.events.fire("pathchange",{path:e,navigation:"Forward"}),this}back(){return history.back(),this}replace(e){return history.replaceState({index:this.index},"",e),$.routers.forEach(t=>t.resolvePath(e)),this.events.fire("pathchange",{path:e,navigation:"Forward"}),this}setStateData(e,t){return history.state.data===void 0&&(history.state.data={}),history.state.data[e]=t,this}popstate=(()=>{history.state.index>this.index||history.state.index<this.index,this.index=history.state.index,this.resolvePath(),this.events.fire("pathchange",{path:location.pathname,navigation:"Forward"})}).bind(this);resolvePath(e=location.pathname){if(!e.startsWith(this.basePath))return;e=e.replace(this.basePath,"/").replace("//","/");let t=!1;const r=i=>{const s=this.recordMap.get(i);return s?(t=!0,s.content&&!this.$view.contains(s.content)&&this.$view.switch(i),s.events.fire("open",{path:e,record:s}),!0):!1},o=(i,s,n)=>{const a=new Pt(i);let h=s.builder({params:n,record:a,loaded:()=>{a.events.fire("load",{path:i,record:a}),this.events.fire("load",{path:i})}});typeof h=="string"&&(h=new Bt(h)),a.content=h,this.recordMap.set(i,a),this.$view.set(i,h).switch(i),a.events.fire("open",{path:e,record:a}),t=!0};for(const[i,s]of this.routeMap.entries()){if(i instanceof Function){const m=i(e);m&&(r(m)||o(m,s,void 0));continue}const[n,a]=[i.split("/").map(m=>`/${m}`),e.split("/").map(m=>`/${m}`)];n.shift(),a.shift();const h={};let d="";for(let m=0;m<a.length;m++){const[l,c]=[n.at(m),a.at(m)];if(!(!l||!c)){if(l===c){if(d+=c,l===n.at(-1)){r(d)||o(d,s,h);return}}else if(l.includes(":")){const[g,R]=l.split(":");if(!c.startsWith(g))continue;if(Object.assign(h,{[R]:c.replace(g,"")}),d+=c,l===n.at(-1)){r(d)||o(d,s,h);return}}}}}if(!t){let i=!1;const s=()=>i=!0;this.events.fire("notfound",{path:e,preventDefault:s}),i||this.$view.clear()}}};ee=Fe([se],ee);Array.prototype.detype=function(...e){return this.filter(t=>{if(e.length)for(const r of e)return typeof t==typeof r;else return t!==void 0})};class qt extends y{$value=$("input").class("value");$unit=$("span").staticClass("unit");$label=$("label").hide(!0);constructor(t){super("div"),this.staticClass("input-component",t),this.$value.id(t),this.$label.for(t)}unit(t){return this.$unit.content(t),this}value(t){return t===void 0?this:(this.$value.value(t.toString()),this)}label(t){return t&&this.$label.hide(!1),this.$label.content(t),this}min(t){return this.$value.min(t),this}max(t){return this.$value.max(t),this}}class Rt extends qt{$color=$("input").type("color").class("color");constructor(t){super(t),this.addStaticClass("color"),this.$color.id(t),this.layout()}layout(){this.content([this.$label,$("div").content([this.$value,this.$color])]),this.$value.on("input",t=>this.$color.value(this.$value.value())),this.$color.on("input",t=>this.$value.value(this.$color.value()))}value(t){return super.value(t),this.$color.value(t),this}}class Y extends qt{$range=$("input").type("range").class("range");constructor(t){super(t),this.addStaticClass("range"),this.$range.id(t),this.$value,this.layout()}layout(){this.content([this.$label,$("div").content([this.$value,this.$range,this.$unit])]),this.$range.on("input",t=>{this.$value.value(`${this.$range.value()}`)}),this.$value.on("input",t=>{this.$range.value(this.$value.value())})}value(t){return arguments.length?t===void 0?this:(t.match(/[a-zA-Z]/)&&(t=t.replaceAll(/[a-zA-Z]/g,"")),super.value(t),this.$range.value(t),this):this.value()}min(t){return super.min(t),this.$range.min(t),this}max(t){return super.max(t),this.$range.max(t),this}}class re extends qt{$select=$("select");constructor(t){super(t),this.addStaticClass("select"),this.$select.id(t),this.layout()}layout(){this.content([this.$label,this.$select])}add(t){return this.$select.add(t),this}value(t){return super.value(t),this.$select.value(t),this}}var f,j,B,Ct;(function(e){e.HEX="HEX",e.RGB="RGB",e.HSL="HSL",e.CIELab="CIELab",e.CMYK="CMYK"})(f||(f={})),function(e){e.ANALOGOUS="ANALOGOUS",e.COMPLEMENTARY="COMPLEMENTARY",e.SPLIT_COMPLEMENTARY="SPLIT_COMPLEMENTARY",e.TRIADIC="TRIADIC",e.TETRADIC="TETRADIC",e.SQUARE="SQUARE"}(j||(j={})),function(e){e.ADDITIVE="ADDITIVE",e.SUBTRACTIVE="SUBTRACTIVE"}(B||(B={})),function(e){e.black="#000000",e.silver="#C0C0C0",e.gray="#808080",e.white="#FFFFFF",e.maroon="#800000",e.red="#FF0000",e.purple="#800080",e.fuchsia="#FF00FF",e.green="#008000",e.lime="#00FF00",e.olive="#808000",e.yellow="#FFFF00",e.navy="#000080",e.blue="#0000FF",e.teal="#008080",e.aqua="#00FFFF",e.orange="#FFA500",e.aliceblue="#F0F8FF",e.antiquewhite="#FAEBD7",e.aquamarine="#7FFFD4",e.azure="#F0FFFF",e.beige="#F5F5DC",e.bisque="#FFE4C4",e.blanchedalmond="#FFEBCD",e.blueviolet="#8A2BE2",e.brown="#A52A2A",e.burlywood="#DEB887",e.cadetblue="#5F9EA0",e.chartreuse="#7FFF00",e.chocolate="#D2691E",e.coral="#FF7F50",e.cornflowerblue="#6495ED",e.cornsilk="#FFF8DC",e.crimson="#DC143C",e.cyan="#00FFFF",e.darkblue="#00008B",e.darkcyan="#008B8B",e.darkgoldenrod="#B8860B",e.darkgray="#A9A9A9",e.darkgreen="#006400",e.darkgrey="#A9A9A9",e.darkkhaki="#BDB76B",e.darkmagenta="#8B008B",e.darkolivegreen="#556B2F",e.darkorange="#FF8C00",e.darkorchid="#9932CC",e.darkred="#8B0000",e.darksalmon="#E9967A",e.darkseagreen="#8FBC8F",e.darkslateblue="#483D8B",e.darkslategray="#2F4F4F",e.darkslategrey="#2F4F4F",e.darkturquoise="#00CED1",e.darkviolet="#9400D3",e.deeppink="#FF1493",e.deepskyblue="#00BFFF",e.dimgray="#696969",e.dimgrey="#696969",e.dodgerblue="#1E90FF",e.firebrick="#B22222",e.floralwhite="#FFFAF0",e.forestgreen="#228B22",e.gainsboro="#DCDCDC",e.ghostwhite="#F8F8FF",e.gold="#FFD700",e.goldenrod="#DAA520",e.greenyellow="#ADFF2F",e.grey="#808080",e.honeydew="#F0FFF0",e.hotpink="#FF69B4",e.indianred="#CD5C5C",e.indigo="#4B0082",e.ivory="#FFFFF0",e.khaki="#F0E68C",e.lavender="#E6E6FA",e.lavenderblush="#FFF0F5",e.lawngreen="#7CFC00",e.lemonchiffon="#FFFACD",e.lightblue="#ADD8E6",e.lightcoral="#F08080",e.lightcyan="#E0FFFF",e.lightgoldenrodyellow="#FAFAD2",e.lightgray="#D3D3D3",e.lightgreen="#90EE90",e.lightgrey="#D3D3D3",e.lightpink="#FFB6C1",e.lightsalmon="#FFA07A",e.lightseagreen="#20B2AA",e.lightskyblue="#87CEFA",e.lightslategray="#778899",e.lightslategrey="#778899",e.lightsteelblue="#B0C4DE",e.lightyellow="#FFFFE0",e.limegreen="#32CD32",e.linen="#FAF0E6",e.magenta="#FF00FF",e.mediumaquamarine="#66CDAA",e.mediumblue="#0000CD",e.mediumorchid="#BA55D3",e.mediumpurple="#9370DB",e.mediumseagreen="#3CB371",e.mediumslateblue="#7B68EE",e.mediumspringgreen="#00FA9A",e.mediumturquoise="#48D1CC",e.mediumvioletred="#C71585",e.midnightblue="#191970",e.mintcream="#F5FFFA",e.mistyrose="#FFE4E1",e.moccasin="#FFE4B5",e.navajowhite="#FFDEAD",e.oldlace="#FDF5E6",e.olivedrab="#6B8E23",e.orangered="#FF4500",e.orchid="#DA70D6",e.palegoldenrod="#EEE8AA",e.palegreen="#98FB98",e.paleturquoise="#AFEEEE",e.palevioletred="#DB7093",e.papayawhip="#FFEFD5",e.peachpuff="#FFDAB9",e.peru="#CD853F",e.pink="#FFC0CB",e.plum="#DDA0DD",e.powderblue="#B0E0E6",e.rosybrown="#BC8F8F",e.royalblue="#4169E1",e.saddlebrown="#8B4513",e.salmon="#FA8072",e.sandybrown="#F4A460",e.seagreen="#2E8B57",e.seashell="#FFF5EE",e.sienna="#A0522D",e.skyblue="#87CEEB",e.slateblue="#6A5ACD",e.slategray="#708090",e.slategrey="#708090",e.snow="#FFFAFA",e.springgreen="#00FF7F",e.steelblue="#4682B4",e.tan="#D2B48C",e.thistle="#D8BFD8",e.tomato="#FF6347",e.turquoise="#40E0D0",e.violet="#EE82EE",e.wheat="#F5DEB3",e.whitesmoke="#F5F5F5",e.yellowgreen="#9ACD32",e.rebeccapurple="#663399"}(Ct||(Ct={}));const ne=Object.keys(Ct),we={HEX:["R","G","B","A"],RGB:["R","G","B","A"],HSL:["H","S","L","A"],CIELab:["L","a","b","A"],CMYK:["C","M","Y","K","A"]},_t={BGR:f.RGB,ABGR:f.RGB,HLS:f.HSL,AHLS:f.HSL,LAB:f.CIELab,ALAB:f.CIELab,CKMY:f.CMYK,ACKMY:f.CMYK};var ht;(function(e){e.NUMBER="number",e.BOOLEAN="boolean"})(ht||(ht={}));const O={[f.HEX]:/^#(?:([a-f\d])([a-f\d])([a-f\d])([a-f\d])?|([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?)$/i,[f.RGB]:/^rgba?\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)(?:\s*,\s*((?:\d*\.)?\d+))?|((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[f.HSL]:/^hsla?\s*\(\s*(?:(-?(?:\d*\.)?\d+(?:deg|grad|rad|turn)?)\s*,\s*((?:\d*\.)?\d+)%\s*,\s*((?:\d*\.)?\d+)%(?:\s*,\s*((?:\d*\.)?\d+))?|(-?(?:\d*\.)?\d+(?:deg|grad|rad|turn)?)\s*((?:\d*\.)?\d+)%\s*((?:\d*\.)?\d+)%(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[f.CIELab]:/^lab\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[f.CMYK]:/^(?:device-cmyk|cmyk)\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)\s*,\s*((?:\d*\.)?\d+%?)(?:\s*,\s*((?:\d*\.)?\d+))?|((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)\s*((?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/},ae=/^(-?(?:\d*\.)?\d+)((?:deg|grad|rad|turn)?)$/,v=/^(-?\d+(?:\.\d+)?|-?\.\d+)%$/,Yt=/^0x([a-f\d]{1,2})$/i,Me=/\{(\d+)\}/g,He=/,( +|\d+)/g,ke=/ +/,Ie="The provided string color doesn't have a correct format",De="The provided color object doesn't have the proper keys or format";var D,I,mt;(function(e){e.NONE="none",e.DEGREES="deg",e.GRADIANS="grad",e.RADIANS="rad",e.TURNS="turn"})(D||(D={})),function(e){e.NONE="none",e.PERCENT="percent"}(I||(I={})),function(e){e.DEVICE_CMYK="device-cmyk",e.CMYK="cmyk"}(mt||(mt={}));const K={decimals:6,legacyCSS:!1,spacesAfterCommas:!1,anglesUnit:D.NONE,rgbUnit:I.NONE,labUnit:I.NONE,cmykUnit:I.PERCENT,alphaUnit:I.NONE,cmykFunction:mt.DEVICE_CMYK},H=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),bt=e=>+`${e}`.replace(v,"$1"),q=e=>v.test(`${e}`)?bt(e):Math.min(+e,100),ft=e=>(e.length===1&&(e+=e),parseInt(e,16)),xt=e=>{const t=p(e,0).toString(16).toUpperCase();return t.length===1?`0x0${t}`:`0x${t}`},z=(e,t=!1)=>!t&&v.test(e)?Math.min(255*bt(e)/100,255):Yt.test(e)?(e.length===3&&(e+=e.slice(-1)),t?p(e)/255:p(e)):Math.min(+e,t?1:255),At=e=>v.test(e)?w(125*bt(e)/100,-125,125):w(+e,-125,125),U=e=>Math.min(v.test(e)?bt(e)/100:+e,1),de=e=>[...e].sort().join("").toUpperCase(),p=(e,t=6)=>{const r=Math.pow(10,t);return Math.round(+e*r)/r},w=(e,t,r)=>Math.max(t,Math.min(e,r)),gt=e=>{if(typeof e=="string"){const t=e.match(ae),r=+t[1];switch(t[2]){case D.RADIANS:e=p(180*r/Math.PI);break;case D.TURNS:e=p(360*r);break;case D.GRADIANS:e=p(.9*r);break;case D.DEGREES:default:e=r}}return(e>360||e<0)&&(e-=360*Math.floor(e/360)),e},Oe=(e,t)=>{let r;switch(t){case D.RADIANS:r=p((o=>o*Math.PI/180)(e));break;case D.TURNS:r=p(e/360);break;case D.GRADIANS:r=p(10/9*e);break;case D.DEGREES:case D.NONE:default:r=e}return r},x=(e,...t)=>{const r=[],o=[],i=[],s=[],n=[],a=[],h=Object.values(D),d=Object.values(I),m=Object.values(mt),l={legacyCSS:0,spacesAfterCommas:0,cmykFunction:0};for(const c of t)if(typeof c=="string"){if(r.push(c),c.includes(",")){l.legacyCSS++;const g=c.match(He);new Set(g).size===1&&ke.test(g[0].slice(1))&&l.spacesAfterCommas++}if(c.match(O.HSL)){const g=c.match(O.HSL),R=g[1]||g[5],T=g[8],A=R.match(ae)[2];o.push(A===""?D.NONE:A),a.push(v.test(T));continue}if(O.RGB.test(c)){const g=c.match(O.RGB),R=g[1]||g[5],T=g[2]||g[6],A=g[3]||g[7],W=g[8];i.push(v.test(R)&&v.test(T)&&v.test(A)),a.push(v.test(W));continue}if(O.CIELab.test(c)){const g=c.match(O.CIELab),R=g[1],T=g[2],A=g[3],W=g[4];s.push(v.test(R)&&v.test(T)&&v.test(A)),a.push(v.test(W));continue}if(c.match(O.CMYK)){const g=c.match(O.CMYK),R=g[1]||g[6],T=g[2]||g[7],A=g[3]||g[8],W=g[4]||g[9],P=g[10];n.push(v.test(R)&&v.test(T)&&v.test(A)&&v.test(W)),c.startsWith("cmyk")&&l.cmykFunction++,a.push(v.test(P))}}return{decimals:typeof e.decimals===ht.NUMBER?e.decimals:K.decimals,legacyCSS:typeof e.legacyCSS===ht.BOOLEAN?e.legacyCSS:!!(r.length&&l.legacyCSS===r.length)||K.legacyCSS,spacesAfterCommas:typeof e.spacesAfterCommas===ht.BOOLEAN?e.spacesAfterCommas:!!(r.length&&l.spacesAfterCommas===r.length)||K.spacesAfterCommas,anglesUnit:e.anglesUnit&&h.includes(e.anglesUnit)?e.anglesUnit:new Set(o).size===1?o[0]:K.anglesUnit,rgbUnit:e.rgbUnit&&d.includes(e.rgbUnit)?e.rgbUnit:new Set(i).size===1&&i[0]?I.PERCENT:K.rgbUnit,labUnit:e.labUnit&&d.includes(e.labUnit)?e.labUnit:new Set(s).size===1&&s[0]?I.PERCENT:K.labUnit,cmykUnit:e.cmykUnit&&d.includes(e.cmykUnit)?e.cmykUnit:new Set(n).size!==1||n[0]?K.cmykUnit:I.NONE,alphaUnit:e.alphaUnit&&d.includes(e.alphaUnit)?e.alphaUnit:new Set(a).size===1&&a[0]?I.PERCENT:K.alphaUnit,cmykFunction:e.cmykFunction&&m.includes(e.cmykFunction)?e.cmykFunction:n.length&&n.length===l.cmykFunction?mt.CMYK:K.cmykFunction}},St=e=>`${e}`in B,he=[[.4360747,.3850649,.1430804],[.2225045,.7168786,.0606169],[.0139322,.0971045,.7141733]],Ge=[[3.1338561,-1.6168667,-.4906146],[-.9787684,1.9161415,.033454],[.0719453,-.2289914,1.4052427]],tt=he.map(e=>e.reduce((t,r)=>t+r,0)),vt=(e,t,r)=>(r<0&&(r+=6),r>=6&&(r-=6),p(r<1?255*((t-e)*r+e):r<3?255*t:r<4?255*((t-e)*(4-r)+e):255*e)),We=e=>e<=.04045?e/12.92:((e+.055)/1.055)**2.4,Ne=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055,le=(e,t,r,o)=>{const i=[0,0,0],s=[e,t,r];return o.forEach((n,a)=>{n.forEach((h,d)=>{i[a]+=h*s[d]})}),i},F=(e,t,r)=>{t/=100;const o=(r/=100)<=.5?r*(t+1):r+t-r*t,i=2*r-o;return{R:vt(i,o,(e/=60)+2),G:vt(i,o,e),B:vt(i,o,e-2)}},rt=(e,t,r,o=1)=>{e/=255,t/=255,r/=255,o=Math.min(o,1);const i=Math.max(e,t,r),s=Math.min(e,t,r),n=i-s;let a=0,h=0;const d=(i+s)/2;if(n!==0){switch(i){case e:a=(t-r)/n%6;break;case t:a=(r-e)/n+2;break;case r:a=(e-t)/n+4}a=p(60*a),a<0&&(a+=360),h=n/(1-Math.abs(2*d-1))}return{H:a,S:p(100*h),L:p(100*d),A:o}},ot=(e,t,r)=>{const o=[e/255,t/255,r/255].map(We),i=le(o[0],o[1],o[2],he),s=((n,a,h)=>{const d=c=>c>.008856451679035631?Math.cbrt(c):c/.12841854934601665+.13793103448275862,m=d(n/tt[0]),l=d(a/tt[1]);return[116*l-16,500*(m-l),200*(l-d(h/tt[2]))]})(i[0],i[1],i[2]);return{L:s[0],a:s[1],b:s[2]}},Jt=(e,t,r)=>{const o=((s,n,a)=>{const h=c=>c>.20689655172413793?c**3:.12841854934601665*(c-.13793103448275862),d=(s+16)/116,m=n/500,l=a/200;return[tt[0]*h(d+m),tt[1]*h(d),tt[2]*h(d-l)]})(e,t,r),i=le(o[0],o[1],o[2],Ge).map(Ne);return{R:w(255*i[0],0,255),G:w(255*i[1],0,255),B:w(255*i[2],0,255)}},Zt=(e,t,r,o)=>({R:p(255*(1-e)*(o=1-o)),G:p(255*(1-t)*o),B:p(255*(1-r)*o)}),ue=(e,t,r)=>{e/=255,t/=255,r/=255;const o=1-Math.max(e,t,r),i=1-o,s=i&&(i-t)/i,n=i&&(i-r)/i;return{C:p(100*(i&&(i-e)/i)),M:p(100*s),Y:p(100*n),K:p(100*o)}},oe=(e,t)=>{if(e<0&&(e+=360),e>360&&(e-=360),e===360||e===0)return e;const r=[[0,120],[120,180],[180,240],[240,360]],o=[[0,60],[60,120],[120,240],[240,360]],i=t?o:r;let s=0,n=0,a=0,h=0;return(t?r:o).find((d,m)=>e>=d[0]&&e<d[1]&&(s=d[0],n=d[1],a=i[m][0],h=i[m][1],!0)),a+(h-a)/(n-s)*(e-s)},Tt=e=>e?", ":",",nt=(e,t)=>{const r=de(Object.keys(e));return we[_t[r]].reduce((o,i,s)=>{const n=e[i];return n!==void 0&&o.push(t(n,s)),o},[])},at=(e,t)=>e.replace(Me,(r,o)=>`${t[+o-1]}`),$t=(e,t,r=!1)=>{const{alphaUnit:o,legacyCSS:i,decimals:s}=t;return o!==I.PERCENT||i&&!r?p(e,s):`${p(100*e,s)}%`},b={[f.HEX]:e=>{const t=nt(e,o=>(i=>{let s=p(i,0).toString(16).toUpperCase();return s.length===1&&(s=`0${s}`),s})(p(o))),r=t.length===4?"#{1}{2}{3}{4}":"#{1}{2}{3}";return at(r,t)},[f.RGB]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,rgbUnit:s}=t,n=Tt(i),a=nt(e,(d,m)=>s===I.PERCENT&&m<3?`${((l,c)=>p(l/255*100,c))(d,r)}%`:m===3?$t(d,t):p(d,r)),h=o?a.length===4?`rgba({1}${n}{2}${n}{3}${n}{4})`:`rgb({1}${n}{2}${n}{3})`:a.length===4?"rgb({1} {2} {3} / {4})":"rgb({1} {2} {3})";return at(h,a)},[f.HSL]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,anglesUnit:s}=t,n=Tt(i),a=nt(e,(d,m)=>m===0&&s!==D.NONE?`${p(Oe(d,s),r)}${s}`:m===3?$t(d,t):p(d,r)),h=o?a.length===4?`hsla({1}${n}{2}%${n}{3}%${n}{4})`:`hsl({1}${n}{2}%${n}{3}%)`:a.length===4?"hsl({1} {2}% {3}% / {4})":"hsl({1} {2}% {3}%)";return at(h,a)},[f.CIELab]:(e,t)=>{const{decimals:r,labUnit:o}=t,i=nt(e,(n,a)=>{if(a===0){const h=p(q(n),r);return o===I.PERCENT?`${h}%`:`${h}`}return a<3?o===I.PERCENT?`${((h,d)=>p(h/125*100,d))(n,r)}%`:p(n,r):$t(n,t,!0)}),s=i.length===4?"lab({1} {2} {3} / {4})":"lab({1} {2} {3})";return at(s,i)},[f.CMYK]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,cmykUnit:s,cmykFunction:n}=t,a=Tt(i),h=nt(e,(m,l)=>s===I.PERCENT&&l<4?`${p(m,r)}%`:l===4?$t(m,t):p(m/100,r)),d=o?h.length===5?`${n}({1}${a}{2}${a}{3}${a}{4}${a}{5})`:`${n}({1}${a}{2}${a}{3}${a}{4})`:h.length===5?`${n}({1} {2} {3} {4} / {5})`:`${n}({1} {2} {3} {4})`;return at(d,h)}},M=e=>(typeof e=="string"&&(e=v.test(e)?bt(e)/100:+e),isNaN(+e)||e>1?1:p(e)),st=(e,t,r)=>t.reduce((o,i)=>[...o,{...e,H:r===B.ADDITIVE?gt(e.H+i):gt(oe(oe(e.H,!1)+i,!0))}],[{...e}]),Pe=(e,t)=>st(e,[30,-30],t),_e=(e,t)=>st(e,[180],t),Ye=(e,t)=>st(e,[150,-150],t),je=(e,t)=>st(e,[120,-120],t),Xe=(e,t)=>st(e,[60,-120,180],t),Ke=(e,t)=>st(e,[90,-90,180],t),S=e=>typeof e=="string"?(t=>{let r;if(Object.keys(f).some(o=>{if(O[o].test(t))return r=o,!0}),!r&&~ne.indexOf(t)&&(r=f.HEX),!r)throw new Error(Ie);return r})(e):(t=>{let r,o=!1;const i=de(Object.keys(t));if(_t[i]&&(r=_t[i]),r&&r===f.RGB){const s=Object.entries(t).some(a=>!Yt.test(`${a[1]}`)),n=Object.entries(t).some(a=>!(v.test(`${a[1]}`)||!Yt.test(`${a[1]}`)&&!isNaN(+a[1])&&+a[1]<=255));s&&n&&(o=!0),s||(r=f.HEX)}if(!r||o)throw new Error(De);return r})(e),Ve={[f.HEX](e){const t=(~ne.indexOf(e)?Ct[e]:e).match(O.HEX),r={R:ft(t[1]||t[5]),G:ft(t[2]||t[6]),B:ft(t[3]||t[7])},o=t[4]||t[8];return o!==void 0&&(r.A=ft(o)/255),r},[f.RGB](e){const t=e.match(O.RGB),r=z(t[1]||t[5]),o=z(t[2]||t[6]),i=z(t[3]||t[7]),s=t[4]||t[8],n={R:Math.min(r,255),G:Math.min(o,255),B:Math.min(i,255)};return s!==void 0&&(n.A=M(s)),n},[f.HSL](e){const t=e.match(O.HSL),r=gt(t[1]||t[5]),o=q(t[2]||t[6]),i=q(t[3]||t[7]),s=t[4]||t[8],n=F(r,o,i);return s!==void 0&&(n.A=M(s)),n},[f.CIELab](e){const t=e.match(O.CIELab),r=q(t[1]),o=At(t[2]),i=At(t[3]),s=t[4],n=Jt(r,o,i);return s!==void 0&&(n.A=M(s)),n},[f.CMYK](e){const t=e.match(O.CMYK),r=U(t[1]||t[6]),o=U(t[2]||t[7]),i=U(t[3]||t[8]),s=U(t[4]||t[9]),n=t[5]||t[10],a=Zt(r,o,i,s);return n!==void 0&&(a.A=M(n)),a}},Ue={[f.HEX](e){const t={R:z(`${e.R}`),G:z(`${e.G}`),B:z(`${e.B}`)};return H(e,"A")&&(t.A=Math.min(z(`${e.A}`,!0),1)),t},[f.RGB](e){return this.HEX(e)},[f.HSL](e){const t=q(`${e.S}`),r=q(`${e.L}`),o=F(gt(e.H),t,r);return H(e,"A")&&(o.A=M(e.A)),o},[f.CIELab](e){const t=q(`${e.L}`),r=At(`${e.a}`),o=At(`${e.b}`),i=Jt(t,r,o);return H(e,"A")&&(i.A=M(e.A)),i},[f.CMYK](e){const t=U(`${e.C}`),r=U(`${e.M}`),o=U(`${e.Y}`),i=U(`${e.K}`),s=Zt(t,r,o,i);return H(e,"A")&&(s.A=M(e.A)),s}},J=(e,t=S(e))=>typeof e=="string"?Ve[t](e):Ue[t](e),u={[f.HEX]:e=>({R:xt(e.R),G:xt(e.G),B:xt(e.B)}),HEXA(e){const t=u.HEX(e);return t.A=H(e,"A")?xt(255*e.A):"0xFF",t},[f.RGB](e,t){const r=ze(e,t);return H(r,"A")&&delete r.A,r},RGBA(e,t){const r=u.RGB(e,t);return r.A=H(e,"A")?p(e.A):1,r},[f.HSL](e,t){const r=rt(e.R,e.G,e.B);return delete r.A,jt(r,t)},HSLA(e,t){const r=u.HSL(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[f.CIELab](e,t){const r=ot(e.R,e.G,e.B);return qe(r,t)},CIELabA(e,t){const r=u.CIELab(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[f.CMYK]:(e,t)=>Je(ue(e.R,e.G,e.B),t),CMYKA(e,t){const r=u.CMYK(e,t);return r.A=H(e,"A")?p(e.A,t):1,r}},Lt=(e,t,r,o)=>{const i=S(e),s=typeof e=="string",n=J(e,i),a=typeof e=="string"&&H(n,"A")||typeof e!="string"&&H(e,"A"),h=rt(n.R,n.G,n.B,n.A);a||delete h.A;const d=r?h.L/(t+1):(100-h.L)/(t+1),m=Array(t).fill(null).map((l,c)=>({...h,L:h.L+d*(c+1)*(1-2*+r)}));switch(i){case f.HEX:default:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?a?b.HEX({...c,A:p(255*c.A)}):b.HEX(c):a?u.HEXA(c):u.HEX(c)});case f.RGB:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?b.RGB(c,o):a?u.RGBA(c,o.decimals):u.RGB(c,o.decimals)});case f.HSL:return m.map(l=>s?b.HSL(l,o):a?u.HSLA({...F(l.H,l.S,l.L),A:l.A},o.decimals):u.HSL(F(l.H,l.S,l.L),o.decimals));case f.CIELab:return m.map(l=>{const c=F(l.H,l.S,l.L);return s?b.CIELab(a?u.CIELabA(c,o.decimals):u.CIELab(c,o.decimals),o):a?u.CIELabA({...c,A:l.A},o.decimals):u.CIELab(c,o.decimals)})}},Q={buildHarmony(e,t,r,o){const i=S(e),s=J(e,i),n=rt(s.R,s.G,s.B,s.A),a=typeof e=="string"&&H(s,"A")||typeof e!="string"&&H(e,"A"),h=typeof e=="string";switch(i){case f.HEX:default:return a?this.HEXA(jt(n,0),t,r,h):this.HEX(jt(n,0),t,r,h);case f.HSL:return a?this.HSLA(n,t,r,h,o):this.HSL(n,t,r,h,o);case f.RGB:return a?this.RGBA(n,t,r,h,o):this.RGB(n,t,r,h,o);case f.CIELab:return a?this.CIELabA(n,t,r,h,o):this.CIELab(n,t,r,h,o)}},[f.HEX]:(e,t,r,o)=>t(e,r).map(i=>o?b.HEX(F(i.H,i.S,i.L)):u.HEX(F(i.H,i.S,i.L))),HEXA:(e,t,r,o)=>t(e,r).map(i=>o?b.HEX({...F(i.H,i.S,i.L),A:255*M(i.A)}):u.HEXA({...F(i.H,i.S,i.L),A:M(i.A)})),[f.RGB]:(e,t,r,o,i)=>t(e,r).map(s=>o?b.RGB(F(s.H,s.S,s.L),i):u.RGB(F(s.H,s.S,s.L),i.decimals)),RGBA:(e,t,r,o,i)=>t(e,r).map(s=>o?b.RGB({...F(s.H,s.S,s.L),A:M(s.A)},i):u.RGBA({...F(s.H,s.S,s.L),A:M(s.A)},i.decimals)),[f.HSL]:(e,t,r,o,i)=>t(e,r).map(s=>o?b.HSL({H:s.H,S:s.S,L:s.L},i):u.HSL(F(s.H,s.S,s.L),i.decimals)),HSLA:(e,t,r,o,i)=>t(e,r).map(s=>o?b.HSL({...s,A:M(s.A)},i):u.HSLA({...F(s.H,s.S,s.L),A:M(s.A)},i.decimals)),[f.CIELab]:(e,t,r,o,i)=>t(e,r).map(s=>{const n=F(s.H,s.S,s.L);return o?b.CIELab(ot(n.R,n.G,n.B),i):u.CIELab(n,i.decimals)}),CIELabA:(e,t,r,o,i)=>t(e,r).map(s=>{const n=F(s.H,s.S,s.L);return o?b.CIELab({...ot(n.R,n.G,n.B),A:M(s.A)},i):u.CIELabA({...n,A:M(s.A)},i.decimals)})},C={mix(e,t){const r=e.map(n=>{const a=S(n);return J(n,a)}),o=t===B.SUBTRACTIVE?r.map(n=>{const a=((h,d,m)=>{const l=Math.min(h,d,m),c=Math.min(255-h,255-d,255-m),g=h-l,R=d-l,T=m-l,A=Math.min(g,R),W=g-A,P=(R+A)/2,X=(T+R-A)/2,_=Math.max(W,P,X)/Math.max(g,R,T),Et=isNaN(_)||_===1/0||_<=0?1:_;return{R:W/Et+c,Y:P/Et+c,B:X/Et+c}})(n.R,n.G,n.B);return H(n,"A")&&(a.A=n.A),a}):null;function i(n){const a=t===B.ADDITIVE?{R:0,G:0,B:0,A:0}:{R:0,Y:0,B:0,A:0};return n.reduce((h,d)=>{const m=H(d,"A")?d.A:1,l={R:Math.min(h.R+d.R*m,255),B:Math.min(h.B+d.B*m,255),A:1-(1-m)*(1-h.A)},c="G"in h?h.G:h.Y,g="G"in d?d.G:d.Y;return{...l,...t===B.ADDITIVE?{G:Math.min(c+g*m,255)}:{Y:Math.min(c+g*m,255)}}},a)}let s;if(t===B.ADDITIVE)s=i(r);else{const n=i(o);s=((a,h,d)=>{const m=Math.min(a,h,d),l=Math.min(255-a,255-h,255-d),c=a-m,g=h-m,R=d-m,T=Math.min(g,R),A=c+g-T,W=g+T,P=2*(R-T),X=Math.max(A,W,P)/Math.max(c,g,R),_=isNaN(X)||X===1/0||X<=0?1:X;return{R:A/_+l,G:W/_+l,B:P/_+l}})(n.R,n.Y,n.B),s.A=n.A}return{R:p(s.R),G:p(s.G),B:p(s.B),A:w(s.A,0,1)}},[f.HEX](e,t,r){const o=this.mix(e,t);return delete o.A,r?b.HEX(o):u.HEX(o)},HEXA(e,t,r){const o=this.mix(e,t);return o.A=r?255*M(o.A):M(o.A),r?b.HEX(o):u.HEXA(o)},[f.RGB](e,t,r,o){const i=this.mix(e,t);return delete i.A,r?b.RGB(i,o):u.RGB(i,o.decimals)},RGBA(e,t,r,o){const i=this.mix(e,t);return r?b.RGB(i,o):u.RGBA(i,o.decimals)},[f.HSL](e,t,r,o){const i=this.mix(e,t),s=rt(i.R,i.G,i.B);return delete i.A,delete s.A,r?b.HSL(s,o):u.HSL(i,o.decimals)},HSLA(e,t,r,o){const i=this.mix(e,t),s=rt(i.R,i.G,i.B,i.A);return r?b.HSL(s,o):u.HSLA(i,o.decimals)},[f.CIELab](e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B);return delete i.A,r?b.CIELab(s,o):u.CIELabA(i,o.decimals)},CIELabA(e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B);return H(i,"A")&&(s.A=i.A),r?b.CIELab(s,o):u.CIELabA(i,o.decimals)}},ze=(e,t)=>({R:p(e.R,t),G:p(e.G,t),B:p(e.B,t),...H(e,"A")?{A:p(e.A,t)}:{}}),jt=(e,t)=>({H:p(e.H,t),S:p(e.S,t),L:p(e.L,t),...H(e,"A")?{A:p(e.A,t)}:{}}),qe=(e,t)=>({L:p(e.L,t),a:p(e.a,t),b:p(e.b,t)}),Je=(e,t)=>({C:p(e.C,t),M:p(e.M,t),Y:p(e.Y,t),K:p(e.K,t)}),k=(e,t,r,o)=>o(J(e,t),r),E=(e,t,r,o,i)=>(r<1&&(r=5),((n,a,h)=>{const d=h-1,m=(a.R-n.R)/d,l=(a.G-n.G)/d,c=(a.B-n.B)/d,g=M(n.A),R=(M(a.A)-g)/d;return Array(h).fill(null).map((T,A)=>A===0?n:A===d?a:{R:p(n.R+m*A),G:p(n.G+l*A),B:p(n.B+c*A),A:p(g+R*A)})})(J(e),J(t),r).map(n=>i(n,o))),Ft=(e,t,r,o)=>({[j.ANALOGOUS]:Q.buildHarmony(t,Pe,r,o),[j.COMPLEMENTARY]:Q.buildHarmony(t,_e,r,o),[j.SPLIT_COMPLEMENTARY]:Q.buildHarmony(t,Ye,r,o),[j.TRIADIC]:Q.buildHarmony(t,je,r,o),[j.TETRADIC]:Q.buildHarmony(t,Xe,r,o),[j.SQUARE]:Q.buildHarmony(t,Ke,r,o)})[e];class N{constructor(t,r={}){this._options=x(r,t),this.rgb=J(t),this.updateHSL(),this.updateLab(),this.updateCMYK()}updateRGB(){this.rgb={...F(this.hsl.H,this.hsl.S,this.hsl.L),A:this.hsl.A}}updateRGBFromCMYK(){this.rgb={...Zt(this.cmyk.C,this.cmyk.M,this.cmyk.Y,this.cmyk.K),A:this.rgb.A}}updateRGBFromLab(){this.rgb={...Jt(this.lab.L,this.lab.a,this.lab.b),A:this.rgb.A}}updateHSL(){this.hsl=rt(this.rgb.R,this.rgb.G,this.rgb.B,this.rgb.A)}updateLab(){this.lab={...ot(this.rgb.R,this.rgb.G,this.rgb.B),A:this.rgb.A}}updateCMYK(){this.cmyk=ue(this.rgb.R,this.rgb.G,this.rgb.B)}setOptions(t={}){return this._options={...this._options,...t},this}setH(t){return this.hsl.H=gt(t),this.updateRGB(),this.updateLab(),this.updateCMYK(),this}setS(t){return this.hsl.S=w(t,0,100),this.updateRGB(),this.updateLab(),this.updateCMYK(),this}setL(t){return this.hsl.L=w(t,0,100),this.updateRGB(),this.updateLab(),this.updateCMYK(),this}setR(t){this.rgb.R=w(t,0,255),this.updateHSL(),this.updateLab(),this.updateCMYK()}setG(t){return this.rgb.G=w(t,0,255),this.updateHSL(),this.updateLab(),this.updateCMYK(),this}setB(t){return this.rgb.B=w(t,0,255),this.updateHSL(),this.updateLab(),this.updateCMYK(),this}setCIEL(t){return this.lab.L=w(t,0,100),this.updateRGBFromLab(),this.updateHSL(),this.updateCMYK(),this}setCIEa(t){return this.lab.a=w(t,-125,125),this.updateRGBFromLab(),this.updateHSL(),this.updateCMYK(),this}setCIEb(t){return this.lab.b=w(t,-125,125),this.updateRGBFromLab(),this.updateHSL(),this.updateCMYK(),this}setA(t){return this.hsl.A=this.rgb.A=w(t,0,1),this}setC(t){return this.cmyk.C=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}setM(t){return this.cmyk.M=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}setY(t){return this.cmyk.Y=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}setK(t){return this.cmyk.K=w(t,0,100),this.updateRGBFromCMYK(),this.updateHSL(),this.updateLab(),this}get options(){return this._options}get H(){return p(this.hsl.H,this.options.decimals)}get S(){return p(this.hsl.S,this.options.decimals)}get L(){return p(this.hsl.L,this.options.decimals)}get CIEL(){return p(this.lab.L,this.options.decimals)}get CIEa(){return p(this.lab.a,this.options.decimals)}get CIEb(){return p(this.lab.b,this.options.decimals)}get R(){return p(this.rgb.R,this.options.decimals)}get G(){return p(this.rgb.G,this.options.decimals)}get B(){return p(this.rgb.B,this.options.decimals)}get A(){return p(this.hsl.A,this.options.decimals)}get C(){return p(this.cmyk.C,this.options.decimals)}get M(){return p(this.cmyk.M,this.options.decimals)}get Y(){return p(this.cmyk.Y,this.options.decimals)}get K(){return p(this.cmyk.K,this.options.decimals)}get HEXObject(){return u.HEX(this.rgb)}get HEXAObject(){return u.HEXA(this.rgb)}get RGBObject(){return{R:this.R,G:this.G,B:this.B}}get RGBAObject(){return{...this.RGBObject,A:this.A}}get HSLObject(){return{H:this.H,S:this.S,L:this.L}}get HSLAObject(){return{...this.HSLObject,A:this.A}}get CIELabObject(){return{L:this.CIEL,a:this.CIEa,b:this.CIEb}}get CIELabAObject(){return{...this.CIELabObject,A:this.A}}get CMYKObject(){return{C:this.C,M:this.M,Y:this.Y,K:this.K}}get CMYKAObject(){return{...this.CMYKObject,A:this.A}}get HEX(){return b.HEX({R:this.R,G:this.G,B:this.B})}get HEXA(){return b.HEX({R:this.R,G:this.G,B:this.B,A:255*this.A})}get RGB(){return b.RGB({R:this.R,G:this.G,B:this.B},this.options)}get RGBA(){return b.RGB({R:this.R,G:this.G,B:this.B,A:this.A},this.options)}get HSL(){return b.HSL({H:this.H,S:this.S,L:this.L},this.options)}get HSLA(){return b.HSL({H:this.H,S:this.S,L:this.L,A:this.A},this.options)}get CIELab(){return b.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb},this.options)}get CIELabA(){return b.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb,A:this.A},this.options)}get CMYK(){return b.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K},this.options)}get CMYKA(){return b.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K,A:this.A},this.options)}static toHEXObject(t){const r=S(t);return k(t,r,0,u.HEX)}static toHEX(t){return b.HEX(N.toHEXObject(t))}static toHEXAObject(t){const r=S(t);return k(t,r,0,u.HEXA)}static toHEXA(t){return b.HEX(N.toHEXAObject(t))}static toRGBObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.RGB)}static toRGB(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.RGB);return b.RGB(s,i)}static toRGBAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.RGBA)}static toRGBA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.RGBA);return b.RGB(s,i)}static toHSLObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.HSL)}static toHSL(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.HSL);return b.HSL(s,i)}static toHSLAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.HSLA)}static toHSLA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.HSLA);return b.HSL(s,i)}static toCIELabObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CIELab)}static toCIELab(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CIELab);return b.CIELab(s,i)}static toCIELabAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CIELabA)}static toCIELabA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CIELabA);return b.CIELab(s,i)}static toCMYKObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CMYK)}static toCMYK(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CMYK);return b.CMYK(s,i)}static toCMYKAObject(t,r={}){const o=S(t);return k(t,o,r.decimals,u.CMYKA)}static toCMYKA(t,r={}){const o=S(t),i=x(r,t),s=k(t,o,r.decimals,u.CMYKA);return b.CMYK(s,i)}static getBlendHEXObject(t,r,o=5){return E(t,r,o,0,u.HEX)}static getBlendHEX(t,r,o=5){return N.getBlendHEXObject(t,r,o).map(i=>b.HEX(i))}static getBlendHEXAObject(t,r,o=5){return E(t,r,o,0,u.HEXA)}static getBlendHEXA(t,r,o=5){return N.getBlendHEXAObject(t,r,o).map(i=>b.HEX(i))}static getBlendRGBObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGB):E(t,r,5,o?.decimals,u.RGB)}static getBlendRGB(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGB).map(s=>b.RGB(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.RGB).map(s=>b.RGB(s,x(o||{},t,r)))}static getBlendRGBAObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGBA):E(t,r,5,o?.decimals,u.RGBA)}static getBlendRGBA(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.RGBA).map(s=>b.RGB(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.RGBA).map(s=>b.RGB(s,x(o||{},t,r)))}static getBlendHSLObject(t,r,o,i){return E(t,r,typeof o=="number"?o:5,i?.decimals,u.HSL)}static getBlendHSL(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.HSL).map(s=>b.HSL(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.HSL).map(s=>b.HSL(s,x(o||{},t,r)))}static getBlendHSLAObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.HSLA):E(t,r,5,o?.decimals,u.HSLA)}static getBlendHSLA(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.HSLA).map(s=>b.HSL(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.HSLA).map(s=>b.HSL(s,x(o||{},t,r)))}static getBlendCIELabObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELab):E(t,r,5,o?.decimals,u.CIELab)}static getBlendCIELab(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELab).map(s=>b.CIELab(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.CIELab).map(s=>b.CIELab(s,x(o||{},t,r)))}static getBlendCIELabAObject(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELabA):E(t,r,5,o?.decimals,u.CIELabA)}static getBlendCIELabA(t,r,o,i){return typeof o=="number"?E(t,r,o,i?.decimals,u.CIELabA).map(s=>b.CIELab(s,x(i||{},t,r))):E(t,r,5,o?.decimals,u.CIELabA).map(s=>b.CIELab(s,x(o||{},t,r)))}static getMixHEXObject(t,r=B.ADDITIVE){return C.HEX(t,r,!1)}static getMixHEX(t,r=B.ADDITIVE){return C.HEX(t,r,!0)}static getMixHEXAObject(t,r=B.ADDITIVE){return C.HEXA(t,r,!1)}static getMixHEXA(t,r=B.ADDITIVE){return C.HEXA(t,r,!0)}static getMixRGBObject(t,r,o){return typeof r=="string"?C.RGB(t,r,!1,x(o||{},...t)):C.RGB(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixRGB(t,r,o){return typeof r=="string"?C.RGB(t,r,!0,x(o||{},...t)):C.RGB(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixRGBAObject(t,r,o){return typeof r=="string"?C.RGBA(t,r,!1,x(o||{},...t)):C.RGBA(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixRGBA(t,r,o){return typeof r=="string"?C.RGBA(t,r,!0,x(o||{},...t)):C.RGBA(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixHSLObject(t,r,o){return typeof r=="string"?C.HSL(t,r,!1,x(o||{},...t)):C.HSL(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixHSL(t,r,o){return typeof r=="string"?C.HSL(t,r,!0,x(o||{},...t)):C.HSL(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixHSLAObject(t,r,o){return typeof r=="string"?C.HSLA(t,r,!1,x(o||{},...t)):C.HSLA(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixHSLA(t,r,o){return typeof r=="string"?C.HSLA(t,r,!0,x(o||{},...t)):C.HSLA(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixCIELabObject(t,r,o){return typeof r=="string"?C.CIELab(t,r,!1,x(o||{},...t)):C.CIELab(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixCIELab(t,r,o){return typeof r=="string"?C.CIELab(t,r,!0,x(o||{},...t)):C.CIELab(t,B.ADDITIVE,!0,x(r||{},...t))}static getMixCIELabAObject(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!1,x(o||{},...t)):C.CIELabA(t,B.ADDITIVE,!1,x(r||{},...t))}static getMixCIELabA(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!0,x(o||{},...t)):C.CIELabA(t,B.ADDITIVE,!0,x(r||{},...t))}static getShades(t,r,o){return typeof r=="number"?Lt(t,r,!0,x(o||{},t)):Lt(t,5,!0,x(r||{},t))}static getTints(t,r,o){return typeof r=="number"?Lt(t,r,!1,x(o||{},t)):Lt(t,5,!1,x(r||{},t))}static getHarmony(t,r,o,i){return`${r}`in j?Ft(r,t,St(o)?o:B.ADDITIVE,x(St(o)?i||{}:o||{},t)):St(r)?Ft(j.COMPLEMENTARY,t,r,x(o||{},t)):Ft(j.COMPLEMENTARY,t,B.ADDITIVE,x(r||{},t))}}function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}function Ze(e){return e.split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).toString().replaceAll(",","")}class Qe extends y{type;name;constructor(t,r){super("div"),this.staticClass("style-panel"),this.type=r,this.name=t,this.layout(),this.on("input",o=>{this.role_model_list.forEach(([i,s])=>{s.update(this),V.updateStyle(this.name,s,[i])})})}layout(){if(!this.roles.length)return this.clear();const t=this.data.backgroundColor==="??"?{HEX:"??",A:"??"}:new N(this.data.backgroundColor),r=this.data.color==="??"?{HEX:"??",A:"??"}:new N(this.data.color);this.content([$("section").content([$("h3").content("Properties"),$("div").content([new re("display").label("Display").add([["block","inline","flex","none"].map(o=>$("option").content(o).value(o))]),new Y("opacity").value(this.data.opacity).unit("px").min(0).max(1).label("Opacity").self(o=>{o.$range.step(.01),o.$value.step(.1)})])]),this.type==="text"?$("section").content([$("h3").content("Font"),$("div").content([new Y("font-size").value(this.data.fontSize).unit("px").min(1).label("Size"),new Y("font-weight").min(100).max(900).label("Weight").value(this.data.fontWeight).self(o=>o.$range.step(100)),new Rt("font-color").value(this.data.color).label("Color"),new Y("font-color-transparent").value(r.A.toString()).unit("px").min(0).max(1).label("Transparent").self(o=>{o.$range.step(.01),o.$value.step(.1)})])]):void 0,this.type==="image"?$("section").content([$("h3").content("Dimension"),$("div").content([new Y("height").value(this.data.height).unit("px").min(1).label("Height"),new Y("width").value(this.data.width).unit("px").min(1).label("Width")])]):void 0,$("section").content([$("h3").content("Background"),$("div").content([new Rt("background-color").value(t.HEX).label("Color"),new Y("background-color-transparent").value(t.A.toString()).unit("px").min(0).max(1).label("Transparent").self(o=>{o.$range.step(.01),o.$value.step(.1)})])]),$("section").content([$("h3").content("Padding"),$("div").content([["left","top","right","bottom"].map(o=>new Y(`padding-${o}`).value(this.data[`padding${G(o)}`]).unit("px").label(G(o)))])]),$("section").content([$("h3").content("Margin"),$("div").content([["left","top","right","bottom"].map(o=>new Y(`margin-${o}`).value(this.data[`margin${G(o)}`]).unit("px").label(G(o)))])]),$("section").content([$("header").content([$("h3").content("Border"),$("div").content([$("label").content("Link").for("border-link"),$("input").id("border-link").type("checkbox").checked(!0)])]),$("div").content([["left","top","right","bottom"].map(o=>$("section").content([$("h4").content(G(o)),$("div").content([new Y(`border-${o}-width`).value(this.data[`border${G(o)}Width`]).unit("px").label("Width"),new re(`border-${o}-style`).label("Style").add([["solid","dashed","doubled","dotted","groove","outset","inset","ridge","hidden"].map(i=>$("option").value(i).content(i).id(i))]).value(this.data[`border${G(o)}Style`]),new Rt(`border-${o}-color`).value(this.data[`border${G(o)}Color`]).label("Color")]).on("input",(i,s)=>{$(":#border-link")?.checked()&&["left","top","right","bottom"].forEach(n=>{if(n===o)return;const a=$(i.target)?.id();a?.includes("width")&&$(`:div.border-${n}-width`)?.value(s.$(`#border-${o}-width`)?.value()),a?.includes("style")&&$(`:div.border-${n}-style`)?.value(s.$(`#border-${o}-style`)?.value()),a?.includes("color")&&$(`:div.border-${n}-color`)?.value(s.$(`#border-${o}-color`)?.value())})})]))])]),$("section").content([$("h3").content("Border Radius"),["top-left","top-right","bottom-left","bottom-right"].map(o=>new Y(`border-${o}-radius`).value(this.data[`border${Ze(o)}Radius`]).unit("px").label(`${o.split("-").map(i=>i.charAt(0).toUpperCase()+i.slice(1)).toString().replace(","," ")}`))])])}get models(){return this.roles.map(t=>Z.get(t).get(this.name))}get role_model_list(){return this.roles.map(t=>[t,Z.get(t).get(this.name)])}get data(){return this.roles.length>1?function(r,o){let i={};for(const[s,n]of Object.entries(r)){i[s]=n;for(const a of o)if(a[s]!==n){i[s]="??";break}}return i}(this.models[0].data,this.models.map(r=>r.data)):this.models[0].data}get roles(){return $("::.role-checkbox").map(t=>{if(t.checked())return t.value()}).detype()}}class tr{data;constructor(t){this.data=t}update(t){const r=(n,a,h=!1)=>n==="??"||n===void 0?a:h?n+"px":n,o=n=>({[`border${G(n)}Style`]:r(t.$(`#border-${n}-style`)?.value(),this.data[`boder${G(n)}Style`]),[`border${G(n)}Color`]:r(t.$(`#border-${n}-color`)?.value(),this.data[`boder${G(n)}Color`]),[`border${G(n)}Width`]:r(t.$(`#border-${n}-width`)?.value(),this.data[`boder${G(n)}Color`],!0)}),i=n=>({[`${n}Top`]:r(t.$(`#${n}-top`)?.value(),this.data[`${n}Top`],!0),[`${n}Bottom`]:r(t.$(`#${n}-bottom`)?.value(),this.data[`${n}Bottom`],!0),[`${n}Left`]:r(t.$(`#${n}-left`)?.value(),this.data[`${n}Left`],!0),[`${n}Right`]:r(t.$(`#${n}-right`)?.value(),this.data[`${n}Right`],!0)}),s={fontSize:r(t.$("#font-size")?.value(),this.data.fontSize,!0),fontWeight:r(t.$("#font-weight")?.value(),this.data.fontWeight),color:new N({...new N(r(t.$("#font-color")?.value(),this.data.color)).RGBObject,A:r(t.$("#font-color-transparent")?.value(),new N(this.data.color).A)}).HEXA,backgroundColor:new N({...new N(r(t.$("#background-color")?.value(),this.data.backgroundColor)).RGBObject,A:r(t.$("#background-color-transparent")?.value(),new N(this.data.backgroundColor).A)}).HEXA,...o("top"),...o("bottom"),...o("left"),...o("right"),borderTopLeftRadius:r(t.$("#border-top-left-radius")?.value(),this.data.borderTopLeftRadius,!0),borderTopRightRadius:r(t.$("#border-top-right-radius")?.value(),this.data.borderTopRightRadius,!0),borderBottomLeftRadius:r(t.$("#border-bottom-left-radius")?.value(),this.data.borderBottomLeftRadius,!0),borderBottomRightRadius:r(t.$("#border-bottom-right-radius")?.value(),this.data.borderBottomRightRadius,!0),...i("margin"),...i("padding"),opacity:r(t.$("#opacity")?.value(),this.data.opacity),display:r(t.$("#display")?.value(),this.data.display),height:r(t.$("#height")?.value(),this.data.height,!0),width:r(t.$("#width")?.value(),this.data.width,!0)};return this.data=s,this}cssObject(){const t={},r=(o,i)=>{for(let[s,n]of Object.entries(i)){if(s=o?o+s.charAt(0).toUpperCase()+s.slice(1):s,!(n instanceof Object)){typeof n=="number"&&s!=="opacity"&&(n=`${n}px`),Object.assign(t,{[`${s}`]:n});continue}r(s,n)}};return r(null,this.data),t}css(){}}const er={Normal:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#FFFFFFFF",backgroundColor:"#00000099",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}},Member:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#0AFFFBFF",backgroundColor:"#527F8099",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}},Moderator:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#B8CFFFFF",backgroundColor:"#2E58FF99",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}},Owner:{Message:{fontSize:"16px",fontWeight:"400",color:"#F0F0F0FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"4px",marginBottom:"0px",marginLeft:"2px",marginRight:"2px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Name:{fontSize:"16px",fontWeight:"400",color:"#FFEB6BFF",backgroundColor:"#00000099",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"4px",paddingBottom:"4px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"block"},Badge:{fontSize:"16px",color:"#000000",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},Avatar:{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block",height:"60px",width:"60px"},"Author Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"0px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"flex"},"Content Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#00000000",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"0px",borderTopRightRadius:"0px",borderBottomLeftRadius:"0px",borderBottomRightRadius:"0px",marginTop:"0px",marginBottom:"0px",marginLeft:"10px",marginRight:"0px",paddingTop:"0px",paddingBottom:"0px",paddingLeft:"0px",paddingRight:"0px",opacity:"1",display:"block"},"Outer Area":{fontSize:"16px",color:"#000000FF",backgroundColor:"#3D3D3D80",borderTopStyle:"solid",borderTopColor:"#000000",borderTopWidth:"0px",borderBottomStyle:"solid",borderBottomColor:"#000000",borderBottomWidth:"0px",borderLeftStyle:"solid",borderLeftColor:"#000000",borderLeftWidth:"0px",borderRightStyle:"solid",borderRightColor:"#000000",borderRightWidth:"0px",borderTopLeftRadius:"10px",borderTopRightRadius:"10px",borderBottomLeftRadius:"10px",borderBottomRightRadius:"10px",marginTop:"0px",marginBottom:"10px",marginLeft:"0px",marginRight:"0px",paddingTop:"8px",paddingBottom:"8px",paddingLeft:"8px",paddingRight:"8px",opacity:"1",display:"flex"}}};class rr extends y{data;$content=$("div").id("content");$message=$("span").id("message");$name=$("span").id("author-name");$author_area=$("yt-live-chat-author-chip");$timestamp=$("span").id("timestamp");$avatar=$("yt-img-shadow").id("author-photo");$overlay=$("div").class("overlay");$hint=$("div").class("hint").css({display:"none"});constructor(t){super("yt-live-chat-text-message-renderer"),this.data=t,this.build(),this.init()}init(){Z.get(this.data.role)?.forEach((t,r)=>this.updateStyle(r,t))}build(){this.content([this.$overlay.content([`Role: ${this.data.role}`]),this.$hint,this.$avatar.content([$("img").src("/avatar.png")]),this.$content.content([this.$timestamp,this.$author_area.content([this.$name.content(this.data.name),$("span").id("chat-badges").content([$("yt-live-chat-author-badge-renderer").content([$("div").id("image").content([$("img")])]),this.data.role==="Moderator"?$("yt-live-chat-author-badge-renderer").attribute("type","moderator").content([$("div").id("image").self(t=>{t.dom.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" style="pointer-events: none; display: inherit; width: 100%; height: 100%;"><path d="M9.64589146,7.05569719 C9.83346524,6.562372 9.93617022,6.02722257 9.93617022,5.46808511 C9.93617022,3.00042984 7.93574038,1 5.46808511,1 C4.90894765,1 4.37379823,1.10270499 3.88047304,1.29027875 L6.95744681,4.36725249 L4.36725255,6.95744681 L1.29027875,3.88047305 C1.10270498,4.37379824 1,4.90894766 1,5.46808511 C1,7.93574038 3.00042984,9.93617022 5.46808511,9.93617022 C6.02722256,9.93617022 6.56237198,9.83346524 7.05569716,9.64589147 L12.4098057,15 L15,12.4098057 L9.64589146,7.05569719 Z"></path></svg>'})]):void 0])]),this.$message.content(this.data.message),$("span").id("deleted-state")])])}updateStyle(t,r){switch(t){case"Message":this.$message.css(r.data);break;case"Name":this.$name.css(r.data);break;case"Avatar":this.$avatar.css(r.data);break;case"Content Area":this.$content.css(r.data);break;case"Author Area":this.$author_area.css(r.data);break;case"Outer Area":this.css(r.data);break}}hint(t){switch(t){case"Message":this.hintPosition(this.$message);break;case"Name":this.hintPosition(this.$name);break;case"Avatar":this.hintPosition(this.$avatar);break;case"Content Area":this.hintPosition(this.$content);break;case"Author Area":this.hintPosition(this.$author_area);break;case"Outer Area":this.hintPosition(this);break}}hintPosition(t){const r=t.dom.getBoundingClientRect(),o=this.dom.getBoundingClientRect();this.$hint.css({position:"absolute",top:`${r.top-o.top}px`,left:`${r.left-o.left}px`,height:`${r.height}px`,width:`${r.width}px`,backgroundColor:"#ff000030",display:"block"})}}class or extends y{messageList=new Set;constructor(){super("ytchat")}send(t){const r=new rr(t);return this.messageList.add(r),this.insert(r),this}updateStyle(t,r,o){this.messageList.forEach(i=>{o.includes(i.data.role)&&i.updateStyle(t,r)})}showHint(t){this.messageList.forEach(r=>{this.roles.includes(r.data.role)&&r.hint(t)})}hideHint(){this.messageList.forEach(t=>{t.$hint.css({display:"none"})})}get roles(){return $("::.role-checkbox").map(t=>{if(t.checked())return t.value()}).detype()}}const ir=`yt-live-chat-renderer yt-live-chat-header-renderer,
 yt-live-chat-renderer yt-live-chat-ticker-renderer,
 yt-live-chat-renderer yt-live-chat-message-input-renderer,
 yt-live-chat-renderer yt-reaction-control-panel-overlay-view-model,
@@ -41,9 +41,9 @@ yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="mode
   fill: #5e84f1;
 }
 
-`,Q=new Map,Xt=["Normal","Member","Moderator","Owner"],Kt=["Message","Name","Badge","Avatar","Author Area","Content Area","Outer Area"],sr=["Message","Name","Timestamp"],nr=["Badge","Avatar"],Jt=new Map,dt=L("view"),V=new or().css({backgroundColor:"#131313"}).send({name:"Normal User",message:"Hover mouse on the message will show the author role info.",role:"Normal"}).send({name:"Member User",message:"You can use Shift + Left Click on Role list to select multiple role!",role:"Member"}).send({name:"Moderator User",message:"yoyo",role:"Moderator"}).send({name:"Owner User",message:"Using the input panel to send message for testing.",role:"Owner"});ar();function ar(){Q.clear();for(const e of Xt){const t=new Map;Q.set(e,t);for(const r of Kt){const o=new tr(er[e][r]);t.set(r,o),V.updateStyle(r,o,[e])}}for(const e of Kt)Jt.set(e,new Je(e,sr.includes(e)?"text":nr.includes(e)?"image":"element"))}function dr(){const e={};for(const[t,r]of Q.entries()){const o={};for(const[i,s]of r.entries())o[i]=s.data;e[t]=o}return console.debug(e),e}L("app").content([L("h1").content(["YouTube Chat Designer v1.0",L("span").content("DEFAULTKAVY")]),L("div").class("content").content([L("div").class("console").content([L("div").class("menu").content([L("div").class("action-row").content([L("div").class("role-list").content([L("span").content("Role"),L("div").content([Xt.map(e=>[L("div").class("role").content(t=>[L("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",Vt),L("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=L("::.role-checkbox");r.shiftKey||o.forEach(i=>{i.id()!==e.toLowerCase()&&i.checked(!1)})})])])])]),L("div").class("button-list").content([L("button").content("Select All").on("click",(e,t)=>{const r=L("::.role-checkbox"),o=!r.find(i=>i.checked()===!1);r.slice(o?1:0).forEach(i=>i.checked(!o)),Vt()}),L("button").content("Export JSON").on("click",()=>dr()),L("button").content("Export CSS").on("click",()=>ce())])]),L("div").class("element-list").content(e=>[Kt.map(t=>(dt.set(t,Jt.get(t)),L("button").staticClass("element-button").content(t).on("click",(r,o)=>dt.switch(t)).self(r=>{dt.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{V.showHint(t)})))]).on("mouseleave",e=>{V.hideHint()})]),dt]),L("div").class("preview").content([L("header").content([L("h2").content("YouTube Chat Preview"),new Rt("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{V.css({backgroundColor:t.$color.value()})})]),V,L("div").class("input-panel").content([L("div").content([L("select").id("role-select").add([Xt.map(e=>L("option").content(e).value(e))]),L("input").id("username").placeholder("User Name")]),L("div").content([L("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),ie())}),L("button").content("Send").on("click",e=>{ie()})])])])])]).self(e=>document.body.append(e.dom));hr();ce();function hr(){dt.switch("Message"),L(":#normal")?.checked(!0),Vt()}function Vt(){Jt.forEach(e=>e.layout())}function ie(){const e=L(":#message-input").value().trim();e!==""&&(V.send({name:L(":#username").value(),message:e,role:L(":#role-select").value()}),V.dom.scrollTop=V.dom.scrollHeight)}function ce(){let e=ir;for(const[r,o]of Q)for(const[i,s]of o){let n=r==="Normal"?"yt-live-chat-text-message-renderer":`yt-live-chat-text-message-renderer[author-type="${r.toLowerCase()}"]`;switch(i){case"Message":n+=" #message";break;case"Name":n+=" #author-name ";break;case"Badge":n+=" #chat-bagdes";break;case"Avatar":n+=" #author-photo";break;case"Author Area":n+=" yt-live-chat-author-clip";break;case"Content Area":n+=" #content";break}let a="";for(const[h,d]of Object.entries(s.data))a+=` ${t(h)}: ${d} !important;
+`,Z=new Map,Xt=["Normal","Member","Moderator","Owner"],Kt=["Message","Name","Avatar","Author Area","Content Area","Outer Area"],sr=["Message","Name","Timestamp"],nr=["Badge","Avatar"],Qt=new Map,dt=L("view"),V=new or().css({backgroundColor:"#131313"}).send({name:"Normal User",message:"Hover mouse on the message will show the author role info.",role:"Normal"}).send({name:"Member User",message:"You can use Shift + Left Click on Role list to select multiple role!",role:"Member"}).send({name:"Moderator User",message:"If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.",role:"Moderator"}).send({name:"Owner User",message:"Try to send message for test your design.",role:"Owner"});ar();function ar(){Z.clear();for(const e of Xt){const t=new Map;Z.set(e,t);for(const r of Kt){const o=new tr(er[e][r]);t.set(r,o),V.updateStyle(r,o,[e])}}for(const e of Kt)Qt.set(e,new Qe(e,sr.includes(e)?"text":nr.includes(e)?"image":"element"))}function dr(){const e={};for(const[t,r]of Z.entries()){const o={};for(const[i,s]of r.entries())o[i]=s.data;e[t]=o}return e}L("app").content([L("h1").content(["YouTube Chat Designer v1.0.0",L("span").content("DEFAULTKAVY")]),L("div").class("content").content([L("div").class("console").content([L("div").class("menu").content([L("div").class("action-row").content([L("div").class("role-list").content([L("button").content("ROLE").on("click",(e,t)=>{const r=L("::.role-checkbox"),o=!r.find(i=>i.checked()===!1);r.slice(o?1:0).forEach(i=>i.checked(!o)),Vt()}),L("div").content([Xt.map(e=>[L("div").class("role").content(t=>[L("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",Vt),L("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=L("::.role-checkbox"),i=t.$(`input#${e.toLowerCase()}`),s=o.filter(n=>n.checked()).length>1;if(r.shiftKey)return s?void 0:i.checked()?r.preventDefault():void 0;if(i.checked())return r.preventDefault();o.forEach(n=>{n.id()!==e.toLowerCase()&&n.checked(!1)})})])])])]),L("div").class("button-list").content([L("div").class("button-group").content([L("span").content("JSON"),L("button").content("Paste").self(e=>{let t;e.on("click",async r=>{const o=await navigator.clipboard.readText();try{const i=JSON.parse(o);console.debug(i)}catch{e.content("Error!").class("error"),t=setTimeout(()=>{e.removeClass("error").content("Paste"),t=void 0},3e3);return}e.content("Pasted!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Paste"),t=void 0},3e3)})}),L("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(JSON.stringify(dr())),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})]),L("div").class("button-group").content([L("span").content("CSS"),L("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(ce()),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})])])]),L("div").class("element-list").content(e=>[Kt.map(t=>(dt.set(t,Qt.get(t)),L("button").staticClass("element-button").content(t).on("click",(r,o)=>dt.switch(t)).self(r=>{dt.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{V.showHint(t)})))]).on("mouseleave",e=>{V.hideHint()})]),dt]),L("div").class("preview").content([L("header").content([L("h2").content("YouTube Chat Preview"),new Rt("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{V.css({backgroundColor:t.$color.value()})})]),V,L("div").class("input-panel").content([L("div").content([L("select").id("role-select").add([Xt.map(e=>L("option").content(e).value(e))]),L("input").id("username").placeholder("User Name")]),L("div").content([L("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),ie())}),L("button").content("Send").on("click",e=>{ie()})])])])])]).self(e=>document.body.append(e.dom));hr();ce();function hr(){dt.switch("Message"),L(":#normal")?.checked(!0),Vt()}function Vt(){Qt.forEach(e=>e.layout())}function ie(){const e=L(":#message-input").value().trim();e!==""&&(V.send({name:L(":#username").value(),message:e,role:L(":#role-select").value()}),V.dom.scrollTop=V.dom.scrollHeight)}function ce(){let e=ir;for(const[r,o]of Z)for(const[i,s]of o){let n=r==="Normal"?"yt-live-chat-text-message-renderer":`yt-live-chat-text-message-renderer[author-type="${r.toLowerCase()}"]`;switch(i){case"Message":n+=" #message";break;case"Name":n+=" #author-name ";break;case"Badge":n+=" #chat-bagdes";break;case"Avatar":n+=" #author-photo";break;case"Author Area":n+=" yt-live-chat-author-clip";break;case"Content Area":n+=" #content";break}let a="";for(const[h,d]of Object.entries(s.data))a+=` ${t(h)}: ${d} !important;
 `;e+=`${n} {
 ${a}
 }
 
-`}console.debug(e);function t(r){return r.replaceAll(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}}
+`}return e;function t(r){return r.replaceAll(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}}
diff --git a/docs/assets/index-mL8GJvpZ.css b/docs/assets/index-mL8GJvpZ.css
deleted file mode 100644
index da6d97a..0000000
--- a/docs/assets/index-mL8GJvpZ.css
+++ /dev/null
@@ -1 +0,0 @@
-.input-component{flex:1;display:flex;align-items:center;justify-content:space-between;padding:1rem;background-color:#ffffff15;border-radius:5px}.input-component input.value{font-family:Noto Sans Mono}.input-component .unit{display:none}.input-component select{height:2rem;width:100%;max-width:100px;border:none;padding:.4rem .6rem;background-color:#ffffff20;border-radius:5px;color:#fff}.input-component select option{background-color:#ffffff20;color:#000}.input-component.range>div{display:flex;gap:.2rem;align-items:center;justify-content:end}.input-component.range>div input.value{background-color:transparent;color:#fff;border:none;text-align:right;padding-top:.2rem;width:2rem}.input-component.range>div input.range{appearance:none;height:5px;background-color:#ffffff50;border-radius:10px;outline:none}.input-component.range>div input.range::-webkit-slider-thumb,.input-component.range>div input.range::-moz-range-thumb{background-color:#000}.input-component.color>div{display:flex;gap:.2rem;justify-content:end}.input-component.color input.value{background-color:transparent;color:#fff;border:none;text-align:right;padding-top:.2rem;width:4rem}.input-component.color input.color{padding:0;appearance:none;border:none;background-color:#0000;width:30px}:root{--background-color: #131313;--font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}body{display:flex;justify-content:center;font-family:var(--font-family);overflow-y:scroll;background-color:var(--background-color);color:#fff;font-size:14px}html ::-webkit-scrollbar{background-color:var(--background-color);width:4px}html ::-webkit-scrollbar-thumb{background-color:#ffffff20}html ::-webkit-scrollbar-button{height:0;width:0}button{padding:10px;background-color:#0000;border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;color:#fff;height:100%;cursor:pointer}button:hover{background-color:#ffffff10}app{max-width:1200px;width:100%}app h1 span{font-size:14px;color:#ffffff90;font-weight:100;letter-spacing:.1rem;margin-left:10px}app .content{display:flex;gap:1rem}app .content .console{width:100%;max-width:60%}app .content .console label,app .content .console button{user-select:none}app .content .console .menu{display:flex;flex-direction:column;gap:1rem;position:sticky;top:0;background-color:#13131390;backdrop-filter:blur(10px);padding-block:1rem}app .content .console .menu .action-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}app .content .console .menu .action-row .role-list{display:flex;border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;width:fit-content;overflow:hidden}app .content .console .menu .action-row .role-list span{padding:10px;color:#fffa;font-weight:700}app .content .console .menu .action-row .role-list>div{display:flex}app .content .console .menu .action-row .role-list>div .role{cursor:pointer;display:flex;align-items:center}app .content .console .menu .action-row .role-list>div .role input{display:none}app .content .console .menu .action-row .role-list>div .role label{cursor:pointer;padding:10px}app .content .console .menu .action-row .role-list>div .role:has(input:checked){background-color:#ffffff20}app .content .console .menu .action-row .role-list>div .role:hover{background-color:#ffffff10}app .content .console .menu .action-row .button-list{display:flex;height:100%;gap:.6rem}app .content .console .menu .element-list{display:flex;gap:.1rem}app .content .console .menu .element-list button{flex:1;background-color:transparent;white-space:nowrap;text-overflow:ellipsis;border:none;font-size:16px;padding-block:.6rem .4rem;padding-inline:1rem;cursor:pointer;color:#fff6;border-radius:5px}app .content .console .menu .element-list button.active{background-color:#ffffff20;color:#fff}app .content .console .menu .element-list button:hover{background-color:#ffffff10}app .content .console .style-panel{display:flex;flex-direction:column;gap:.6rem;padding-block:1rem}app .content .console .style-panel section{display:flex;flex-direction:column;gap:.3rem}app .content .console .style-panel section h3{font-size:14px;margin-block:.5em;font-weight:200;letter-spacing:.2rem;text-transform:uppercase}app .content .console .style-panel section header{display:flex;justify-content:space-between;align-items:center}app .content .console .style-panel section>div{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}app .content .console .style-panel section section{display:flex;flex-direction:column;gap:.4rem;border:2px solid rgba(255,255,255,.0823529412);border-radius:5px;padding:1rem}app .content .console .style-panel section section h4{margin:0;font-size:14px;font-weight:200}app .content .console .style-panel section section>div{display:flex;flex-direction:column;background-color:#ffffff15;border-radius:5px}app .content .console .style-panel section section>div .input-component{background-color:#0000}app .content .preview{border:1px solid rgba(255,255,255,.1254901961);border-radius:10px;padding:1rem;width:400px;height:80%;position:fixed;left:calc(50vw + 150px);display:flex;flex-direction:column}app .content .preview header{margin-block:.6rem;display:flex;flex-direction:column;gap:.6rem}app .content .preview header h2{margin-block:0}app .content .preview ytchat{flex:5;overflow-y:scroll;padding-right:2px}app .content .preview .input-panel{display:flex;flex-direction:column;gap:.4rem;padding-top:1rem}app .content .preview .input-panel div{display:flex;gap:.4rem;align-items:center}app .content .preview .input-panel select{height:2rem;width:100%;max-width:100px;border:none;padding:.4rem .6rem;background-color:#ffffff20;border-radius:5px;color:#fff}app .content .preview .input-panel select option{background-color:#ffffff20;color:#000}app .content .preview .input-panel textarea,app .content .preview .input-panel input{background-color:#ffffff20;border:none;padding:10px;height:1rem;color:#fff;border-radius:10px;resize:none;flex:5;font-family:var(--font-family);overflow:hidden}yt-live-chat-renderer yt-live-chat-header-renderer,yt-live-chat-renderer yt-live-chat-ticker-renderer,yt-live-chat-renderer yt-live-chat-message-input-renderer,yt-live-chat-renderer yt-reaction-control-panel-overlay-view-model{display:none!important}yt-live-chat-text-message-renderer{position:relative;overflow:hidden}yt-live-chat-text-message-renderer:hover .overlay{display:flex}yt-live-chat-text-message-renderer .overlay{position:absolute;height:100%;width:100%;top:0;left:0;background:linear-gradient(270deg,#000c,#0003);user-select:none;pointer-events:none;display:none;justify-content:end;align-items:center;color:#fff;padding-right:10px;box-sizing:border-box}yt-live-chat-text-message-renderer #author-photo{overflow:hidden;flex-shrink:0}yt-live-chat-text-message-renderer #author-photo img{height:100%;width:100%}yt-live-chat-text-message-renderer #content{width:100%}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip{align-items:unset!important}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges{display:flex;align-items:center;gap:.2rem}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type=moderator]{display:block;height:16px;width:16px;fill:#5e84f1}yt-live-chat-text-message-renderer #content yt-live-chat-author-chip #chat-badges yt-live-chat-author-badge-renderer[type=moderator] svg{height:100%;width:100%}yt-live-chat-text-message-renderer #menu{display:none}
diff --git a/docs/index.html b/docs/index.html
index 3427f3d..e582488 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>YouTube Chat Designer</title>
-    <script type="module" crossorigin src="/assets/index-C9J66gnR.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-mL8GJvpZ.css">
+    <script type="module" crossorigin src="/assets/index-HH4hPghE.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DHiXaORX.css">
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/index.scss b/src/index.scss
index 678438c..822e4c4 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -36,8 +36,30 @@ button {
     color: white;
     height: 100%;
     cursor: pointer;
-    &:hover {
+    font-family: var(--font-family);
+    &:hover, &:focus {
         background-color: #ffffff10;
+        outline: none;
+    }
+    &.done {
+        background-color: rgb(42, 190, 91);
+    }
+}
+
+.button-group {
+    border: 1px solid #ffffff20;
+    border-radius: 10px;
+    overflow: hidden;
+    display: flex;
+    align-content: stretch;
+    span {
+        padding: 10px;
+        color: #ffffffaa;
+        font-weight: 700;
+    }
+    button {
+        border: none;
+        border-radius: 0;
     }
 }
 
@@ -55,6 +77,10 @@ app {
         }
     }
 
+    label, button {
+        user-select: none;
+    }
+
     .content {
         display: flex;
         gap: 1rem;
@@ -63,10 +89,6 @@ app {
             width: 100%;
             max-width: 60%;
 
-            label, button {
-                user-select: none;
-            }
-
             .menu {
                 display: flex;
                 flex-direction: column;
@@ -88,10 +110,12 @@ app {
                         border-radius: 10px;
                         width: fit-content;
                         overflow: hidden;
-                        span {
-                            padding: 10px;
+                        button {
                             color: #ffffffaa;
                             font-weight: 700;
+                            border-radius: 0;
+                            border: none;
+                            height: auto;
                         }
                         & > div {
                             display: flex;
diff --git a/src/main.ts b/src/main.ts
index 45f61f1..a8a0428 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,7 +9,7 @@ import { ytchat_css } from './data/ytchat';
 
 export const ROLE_MODEL_MAP = new Map<string, Map<string, StyleModel>>();
 const ROLE_LIST = ['Normal', 'Member', 'Moderator', 'Owner'];
-const ELEMENT_LIST = ['Message', 'Name', 'Badge', 'Avatar', 'Author Area', 'Content Area', 'Outer Area'];
+const ELEMENT_LIST = ['Message', 'Name', 'Avatar', 'Author Area', 'Content Area', 'Outer Area'];
 const IS_TEXT_ELEMENT = ['Message', 'Name', 'Timestamp'];
 const IS_IMAGE_ELEMENT = ['Badge', 'Avatar'];
 const PANEL_MAP = new Map<string, StylePanel>();
@@ -18,8 +18,8 @@ const $view = $('view');
 export const $chat = new YouTubeChat().css({backgroundColor: '#131313'})
   .send({name: 'Normal User', message: 'Hover mouse on the message will show the author role info.', role: 'Normal'})
   .send({name: 'Member User', message: 'You can use Shift + Left Click on Role list to select multiple role!', role: 'Member'})
-  .send({name: 'Moderator User', message: 'yoyo', role: 'Moderator'})
-  .send({name: 'Owner User', message: 'Using the input panel to send message for testing.', role: 'Owner'})
+  .send({name: 'Moderator User', message: 'If you want to save your settings, using Copy JSON and save it, you can paste the JSON to recovery your settings.', role: 'Moderator'})
+  .send({name: 'Owner User', message: 'Try to send message for test your design.', role: 'Owner'})
 
 init();
 function init() {
@@ -46,35 +46,18 @@ function exportJson() {
     }
     json[role] = element_json;
   }
-  console.debug(json);
   return json;
 }
 
 
 $('app').content([
-  $('h1').content(['YouTube Chat Designer v1.0', $('span').content('DEFAULTKAVY')]),
+  $('h1').content(['YouTube Chat Designer v1.0.0', $('span').content('DEFAULTKAVY')]),
   $('div').class('content').content([
     $('div').class('console').content([
       $('div').class('menu').content([
         $('div').class('action-row').content([
           $('div').class('role-list').content([
-            $('span').content('Role'),
-            $('div').content([
-              ROLE_LIST.map(id => [
-                $('div').class('role').content($div => [
-                  $('input').class('role-checkbox').type('checkbox').value(id).id(id.toLowerCase()).on('input', refreshPanel),
-                  $('label').content(id).for(id.toLowerCase())
-                    .on('click', (e) => {
-                      const checkboxes = $<$Input>('::.role-checkbox')
-                      if (e.shiftKey) return;
-                      checkboxes.forEach($input => {if ($input.id() !== id.toLowerCase()) $input.checked(false)})
-                    })
-                ])
-              ])
-            ])
-          ]),
-          $('div').class('button-list').content([
-            $('button').content('Select All').on('click', (e, $button) => {
+            $('button').content('ROLE').on('click', (e, $button) => {
               const $input_list = $<$Input>('::.role-checkbox');
               const IS_ALL_CHECKED = !$input_list.find($input => $input.checked() === false);
               $input_list
@@ -82,8 +65,85 @@ $('app').content([
                 .forEach($input => $input.checked(!IS_ALL_CHECKED))
               refreshPanel();
             }),
-            $('button').content('Export JSON').on('click', () => exportJson()),
-            $('button').content('Export CSS').on('click', () => exportCSS())
+            $('div').content([
+              ROLE_LIST.map(id => [
+                $('div').class('role').content($div => [
+                  $('input').class('role-checkbox').type('checkbox').value(id).id(id.toLowerCase()).on('input', refreshPanel),
+                  $('label').content(id).for(id.toLowerCase())
+                    .on('click', (e) => {
+                      const $input_list = $<$Input>('::.role-checkbox');
+                      const $self_input = $div.$<$Input>(`input#${id.toLowerCase()}`);
+                      const IS_MULTI_CHECKED = $input_list.filter($input => $input.checked()).length > 1;
+                      if (e.shiftKey) {
+                        if (IS_MULTI_CHECKED) return;
+                        else {
+                          if ($self_input.checked()) return e.preventDefault();
+                          return
+                        };
+                      }
+                      if ($self_input.checked()) return e.preventDefault();
+                      $input_list.forEach($input => {
+                        if ($input.id() !== id.toLowerCase()) $input.checked(false)
+                      })
+                    })
+                ])
+              ])
+            ])
+          ]),
+          $('div').class('button-list').content([
+            $('div').class('button-group').content([
+              $('span').content('JSON'),
+              $('button').content('Paste').self($button => {
+                let timer: Timer | undefined;
+                $button.on('click', async (e) => {
+                  const json_string = await navigator.clipboard.readText();
+                  try {
+                    const json = JSON.parse(json_string)
+                    console.debug(json)
+                  } catch (err) {
+                    $button.content('Error!').class('error');
+                    timer = setTimeout(() => {
+                      $button.removeClass('error').content('Paste');
+                      timer = undefined;
+                    }, 3000);
+                    return;
+                  }
+                  $button.content('Pasted!').class('done')
+                  if (timer) clearTimeout(timer);
+                  timer = setTimeout(() => {
+                    $button.removeClass('done').content('Paste');
+                    timer = undefined;
+                  }, 3000);
+                })
+              }),
+              $('button').content('Copy').self($button => {
+                let timer: Timer | undefined;
+                $button.on('click', (e) => {
+                  navigator.clipboard.writeText(JSON.stringify(exportJson()));
+                  $button.content('Copied!').class('done')
+                  if (timer) clearTimeout(timer);
+                  timer = setTimeout(() => {
+                    $button.removeClass('done').content('Copy');
+                    timer = undefined;
+                  }, 3000);
+                })
+              })
+            ]),
+            $('div').class('button-group').content([
+              $('span').content('CSS'),
+              $('button').content('Copy').self($button => {
+                let timer: Timer | undefined;
+                $button.on('click', (e) => {
+                  navigator.clipboard.writeText(exportCSS());
+                  $button.content('Copied!').class('done')
+                  if (timer) clearTimeout(timer);
+                  timer = setTimeout(() => {
+                    $button.removeClass('done').content('Copy');
+                    timer = undefined;
+                  }, 3000);
+                })
+              })
+            ])
           ]),
         ]),
         $('div').class('element-list').content($content => [
@@ -179,8 +239,7 @@ function exportCSS() {
       css += `${selector} {\n${stylesheet}\n}\n\n`
     }
   }
-
-  console.debug(css)
+  return css;
 
   function toCssProp(str: string) {
     return str.replaceAll(/[A-Z]/g, $1 => `-${$1.toLowerCase()}`)