diff --git a/docs/assets/index-vbG7qyII.js b/docs/assets/index-DR9W_gne.js
similarity index 60%
rename from docs/assets/index-vbG7qyII.js
rename to docs/assets/index-DR9W_gne.js
index 31060ef..264f07f 100644
--- a/docs/assets/index-vbG7qyII.js
+++ b/docs/assets/index-DR9W_gne.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 st{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 st?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 rt)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 rt extends st{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 st{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 be{#t;elementList=new Set;constructor(t){this.#t=t}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.dom.childNodes)],o=[];for(;r.length||t.length;){const[i,s]=[r.at(0),t.at(0)];s?i?s!==i?(s.$.__hidden||(this.dom.insertBefore(s,i),o.push(s)),t.shift()):(s.$.__hidden&&this.dom.removeChild(s),t.shift(),r.shift()):(s.$.__hidden||this.dom.append(s),t.shift()):(i&&!o.includes(i)&&i.remove(),r.shift())}}get array(){return[...this.elementList.values()]}get dom(){return this.#t.dom}}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 R extends rt{children=new be(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 Mt extends R{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 Ht;(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})(Ht||(Ht={}));class kt extends R{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 qt(e){return Ht.mixin(e,fe)}class fe{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 xe=Object.defineProperty,$e=Object.getOwnPropertyDescriptor,ye=(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 ut=class extends R{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=ye([qt],ut);var Le=Object.defineProperty,Re=Object.getOwnPropertyDescriptor,Ce=(e,t,r,o)=>{for(var i=o>1?void 0:o?Re(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&&Le(t,r,i),i};let ct=class extends rt{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=Ce([qt],ct);class It extends R{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 Ot extends rt{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 R{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 Gt extends R{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 ne(e){return $.mixin(e,Ae)}class Ae{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 Jt{eventMap=new Map;register(...t){return t.forEach(r=>{const o=new ee(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 ee&&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 ee{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 Rt extends R{view_cache=new Map;event=new Jt().register("switch");content_id=null;constructor(t){super("view",t)}setView(t,r){return this.view_cache.set(t,r),this}deleteView(t){return this.view_cache.delete(t),this}deleteAllView(){return this.view_cache.clear(),this}switchView(t){const r=this.view_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 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 extends R{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=Se([qt],pt);class Wt extends R{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 Nt extends R{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 Pt extends R{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 b(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=>b(t));if(e.startsWith(":"))return b(document.querySelector(e.replace(/^:/,"")));if(e in b.TagNameElementMap)switch(b.TagNameElementMap[e]){case rt:return new rt(e);case Mt:return new Mt;case R:return new R(e);case ct:return new ct;case It:return new It;case kt:return new kt;case ut:return new ut;case Ot:return new Ot;case Dt:return new Dt;case Gt:return new Gt;case Rt:return new Rt;case pt:return new pt;case Wt:return new Wt;case Nt:return new Nt;case Pt:return new Pt}else return new R(e)}if(e instanceof HTMLElement||e instanceof Text)return e.$?e.$:st.from(e);throw"$: NOT SUPPORT TARGET ELEMENT TYPE"}(e=>{e.anchorHandler=null,e.anchorPreventDefault=!1,e.body=document.body,e.routers=new Set,e.TagNameElementMap={a:Mt,p:R,pre:R,code:R,blockquote:R,strong:R,h1:R,h2:R,h3:R,h4:R,h5:R,h6:R,div:R,ol:R,ul:R,dl:R,li:R,input:ct,label:It,button:ut,form:kt,img:Ot,dialog:Gt,canvas:Dt,view:Rt,select:pt,option:Wt,optgroup:Nt,textarea:Pt};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 L=e("img");if(L.once("load",T=>{const A=e("canvas"),W=A.getContext("2d"),P=L.height()/L.width(),[V,_]=[P>1?m/P:m,P>1?m:m*P];A.height(_).width(V),W?.drawImage(L.dom,0,0,V,_),l(A.toDataURL(d.type))}),!g.target)throw"$.resize(): e.target is null";L.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 L=c(d)?d[0](...d.slice(1)):e(d);return l&&l(L),L});{const g=[];for(const L of m){const T=d instanceof Function?d(...L):c(d)?d[0](...d.slice(1)):e(d);L instanceof Function?L(T):(L instanceof st||typeof L=="string")&&T.content(L),g.push(T)}return g}function c(g){return g instanceof Array&&g[0]instanceof Function}}e.builder=h})(b||(b={}));globalThis.$=b;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 _t=class{id;content;events=new Jt().register("open","load");constructor(e){this.id=e}};_t=Fe([ne],_t);var we=Object.defineProperty,Me=Object.getOwnPropertyDescriptor,He=(e,t,r,o)=>{for(var i=o>1?void 0:o?Me(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&&we(t,r,i),i};let re=class{routeMap=new Map;recordMap=new Map;$view;index=0;events=new Jt().register("pathchange","notfound","load");basePath;constructor(e,t){this.basePath=e,this.$view=t??new Rt}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.switchView(i),s.events.fire("open",{path:e,record:s}),!0):!1},o=(i,s,n)=>{const a=new _t(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.setView(i,h).switchView(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,L]=l.split(":");if(!c.startsWith(g))continue;if(Object.assign(h,{[L]: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()}}};re=He([ne],re);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 Zt extends R{$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 Lt extends Zt{$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 Zt{$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 oe extends Zt{$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 x,j,B,Ct;(function(e){e.HEX="HEX",e.RGB="RGB",e.HSL="HSL",e.CIELab="CIELab",e.CMYK="CMYK"})(x||(x={})),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 ae=Object.keys(Ct),ke={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:x.RGB,ABGR:x.RGB,HLS:x.HSL,AHLS:x.HSL,LAB:x.CIELab,ALAB:x.CIELab,CKMY:x.CMYK,ACKMY:x.CMYK};var ht;(function(e){e.NUMBER="number",e.BOOLEAN="boolean"})(ht||(ht={}));const D={[x.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,[x.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*\)$/,[x.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*\)$/,[x.CIELab]:/^lab\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[x.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*\)$/},de=/^(-?(?:\d*\.)?\d+)((?:deg|grad|rad|turn)?)$/,v=/^(-?\d+(?:\.\d+)?|-?\.\d+)%$/,jt=/^0x([a-f\d]{1,2})$/i,Ie=/\{(\d+)\}/g,Oe=/,( +|\d+)/g,De=/ +/,Ge="The provided string color doesn't have a correct format",We="The provided color object doesn't have the proper keys or format";var O,I,mt;(function(e){e.NONE="none",e.DEGREES="deg",e.GRADIANS="grad",e.RADIANS="rad",e.TURNS="turn"})(O||(O={})),function(e){e.NONE="none",e.PERCENT="percent"}(I||(I={})),function(e){e.DEVICE_CMYK="device-cmyk",e.CMYK="cmyk"}(mt||(mt={}));const X={decimals:6,legacyCSS:!1,spacesAfterCommas:!1,anglesUnit:O.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):jt.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),he=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(de),r=+t[1];switch(t[2]){case O.RADIANS:e=p(180*r/Math.PI);break;case O.TURNS:e=p(360*r);break;case O.GRADIANS:e=p(.9*r);break;case O.DEGREES:default:e=r}}return(e>360||e<0)&&(e-=360*Math.floor(e/360)),e},Ne=(e,t)=>{let r;switch(t){case O.RADIANS:r=p((o=>o*Math.PI/180)(e));break;case O.TURNS:r=p(e/360);break;case O.GRADIANS:r=p(10/9*e);break;case O.DEGREES:case O.NONE:default:r=e}return r},y=(e,...t)=>{const r=[],o=[],i=[],s=[],n=[],a=[],h=Object.values(O),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(Oe);new Set(g).size===1&&De.test(g[0].slice(1))&&l.spacesAfterCommas++}if(c.match(D.HSL)){const g=c.match(D.HSL),L=g[1]||g[5],T=g[8],A=L.match(de)[2];o.push(A===""?O.NONE:A),a.push(v.test(T));continue}if(D.RGB.test(c)){const g=c.match(D.RGB),L=g[1]||g[5],T=g[2]||g[6],A=g[3]||g[7],W=g[8];i.push(v.test(L)&&v.test(T)&&v.test(A)),a.push(v.test(W));continue}if(D.CIELab.test(c)){const g=c.match(D.CIELab),L=g[1],T=g[2],A=g[3],W=g[4];s.push(v.test(L)&&v.test(T)&&v.test(A)),a.push(v.test(W));continue}if(c.match(D.CMYK)){const g=c.match(D.CMYK),L=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(L)&&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:X.decimals,legacyCSS:typeof e.legacyCSS===ht.BOOLEAN?e.legacyCSS:!!(r.length&&l.legacyCSS===r.length)||X.legacyCSS,spacesAfterCommas:typeof e.spacesAfterCommas===ht.BOOLEAN?e.spacesAfterCommas:!!(r.length&&l.spacesAfterCommas===r.length)||X.spacesAfterCommas,anglesUnit:e.anglesUnit&&h.includes(e.anglesUnit)?e.anglesUnit:new Set(o).size===1?o[0]:X.anglesUnit,rgbUnit:e.rgbUnit&&d.includes(e.rgbUnit)?e.rgbUnit:new Set(i).size===1&&i[0]?I.PERCENT:X.rgbUnit,labUnit:e.labUnit&&d.includes(e.labUnit)?e.labUnit:new Set(s).size===1&&s[0]?I.PERCENT:X.labUnit,cmykUnit:e.cmykUnit&&d.includes(e.cmykUnit)?e.cmykUnit:new Set(n).size!==1||n[0]?X.cmykUnit:I.NONE,alphaUnit:e.alphaUnit&&d.includes(e.alphaUnit)?e.alphaUnit:new Set(a).size===1&&a[0]?I.PERCENT:X.alphaUnit,cmykFunction:e.cmykFunction&&m.includes(e.cmykFunction)?e.cmykFunction:n.length&&n.length===l.cmykFunction?mt.CMYK:X.cmykFunction}},St=e=>`${e}`in B,le=[[.4360747,.3850649,.1430804],[.2225045,.7168786,.0606169],[.0139322,.0971045,.7141733]],Pe=[[3.1338561,-1.6168667,-.4906146],[-.9787684,1.9161415,.033454],[.0719453,-.2289914,1.4052427]],tt=le.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)),_e=e=>e<=.04045?e/12.92:((e+.055)/1.055)**2.4,Ye=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055,ue=(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)}},ot=(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}},it=(e,t,r)=>{const o=[e/255,t/255,r/255].map(_e),i=ue(o[0],o[1],o[2],le),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]}},Qt=(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=ue(o[0],o[1],o[2],Pe).map(Ye);return{R:w(255*i[0],0,255),G:w(255*i[1],0,255),B:w(255*i[2],0,255)}},te=(e,t,r,o)=>({R:p(255*(1-e)*(o=1-o)),G:p(255*(1-t)*o),B:p(255*(1-r)*o)}),ce=(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)}},ie=(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?", ":",",at=(e,t)=>{const r=he(Object.keys(e));return ke[Yt[r]].reduce((o,i,s)=>{const n=e[i];return n!==void 0&&o.push(t(n,s)),o},[])},dt=(e,t)=>e.replace(Ie,(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)}%`},f={[x.HEX]:e=>{const t=at(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 dt(r,t)},[x.RGB]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,rgbUnit:s}=t,n=Tt(i),a=at(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 dt(h,a)},[x.HSL]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,anglesUnit:s}=t,n=Tt(i),a=at(e,(d,m)=>m===0&&s!==O.NONE?`${p(Ne(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 dt(h,a)},[x.CIELab]:(e,t)=>{const{decimals:r,labUnit:o}=t,i=at(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 dt(s,i)},[x.CMYK]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,cmykUnit:s,cmykFunction:n}=t,a=Tt(i),h=at(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 dt(d,h)}},M=e=>(typeof e=="string"&&(e=v.test(e)?bt(e)/100:+e),isNaN(+e)||e>1?1:p(e)),nt=(e,t,r)=>t.reduce((o,i)=>[...o,{...e,H:r===B.ADDITIVE?gt(e.H+i):gt(ie(ie(e.H,!1)+i,!0))}],[{...e}]),je=(e,t)=>nt(e,[30,-30],t),Ve=(e,t)=>nt(e,[180],t),Xe=(e,t)=>nt(e,[150,-150],t),Ke=(e,t)=>nt(e,[120,-120],t),Ue=(e,t)=>nt(e,[60,-120,180],t),ze=(e,t)=>nt(e,[90,-90,180],t),S=e=>typeof e=="string"?(t=>{let r;if(Object.keys(x).some(o=>{if(D[o].test(t))return r=o,!0}),!r&&~ae.indexOf(t)&&(r=x.HEX),!r)throw new Error(Ge);return r})(e):(t=>{let r,o=!1;const i=he(Object.keys(t));if(Yt[i]&&(r=Yt[i]),r&&r===x.RGB){const s=Object.entries(t).some(a=>!jt.test(`${a[1]}`)),n=Object.entries(t).some(a=>!(v.test(`${a[1]}`)||!jt.test(`${a[1]}`)&&!isNaN(+a[1])&&+a[1]<=255));s&&n&&(o=!0),s||(r=x.HEX)}if(!r||o)throw new Error(We);return r})(e),qe={[x.HEX](e){const t=(~ae.indexOf(e)?Ct[e]:e).match(D.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},[x.RGB](e){const t=e.match(D.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},[x.HSL](e){const t=e.match(D.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},[x.CIELab](e){const t=e.match(D.CIELab),r=q(t[1]),o=At(t[2]),i=At(t[3]),s=t[4],n=Qt(r,o,i);return s!==void 0&&(n.A=M(s)),n},[x.CMYK](e){const t=e.match(D.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=te(r,o,i,s);return n!==void 0&&(a.A=M(n)),a}},Je={[x.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},[x.RGB](e){return this.HEX(e)},[x.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},[x.CIELab](e){const t=q(`${e.L}`),r=At(`${e.a}`),o=At(`${e.b}`),i=Qt(t,r,o);return H(e,"A")&&(i.A=M(e.A)),i},[x.CMYK](e){const t=U(`${e.C}`),r=U(`${e.M}`),o=U(`${e.Y}`),i=U(`${e.K}`),s=te(t,r,o,i);return H(e,"A")&&(s.A=M(e.A)),s}},J=(e,t=S(e))=>typeof e=="string"?qe[t](e):Je[t](e),u={[x.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},[x.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},[x.HSL](e,t){const r=ot(e.R,e.G,e.B);return delete r.A,Vt(r,t)},HSLA(e,t){const r=u.HSL(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[x.CIELab](e,t){const r=it(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},[x.CMYK]:(e,t)=>tr(ce(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}},yt=(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=ot(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 x.HEX:default:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?a?f.HEX({...c,A:p(255*c.A)}):f.HEX(c):a?u.HEXA(c):u.HEX(c)});case x.RGB:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?f.RGB(c,o):a?u.RGBA(c,o.decimals):u.RGB(c,o.decimals)});case x.HSL:return m.map(l=>s?f.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 x.CIELab:return m.map(l=>{const c=F(l.H,l.S,l.L);return s?f.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=ot(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 x.HEX:default:return a?this.HEXA(Vt(n,0),t,r,h):this.HEX(Vt(n,0),t,r,h);case x.HSL:return a?this.HSLA(n,t,r,h,o):this.HSL(n,t,r,h,o);case x.RGB:return a?this.RGBA(n,t,r,h,o):this.RGB(n,t,r,h,o);case x.CIELab:return a?this.CIELabA(n,t,r,h,o):this.CIELab(n,t,r,h,o)}},[x.HEX]:(e,t,r,o)=>t(e,r).map(i=>o?f.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?f.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)})),[x.RGB]:(e,t,r,o,i)=>t(e,r).map(s=>o?f.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?f.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)),[x.HSL]:(e,t,r,o,i)=>t(e,r).map(s=>o?f.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?f.HSL({...s,A:M(s.A)},i):u.HSLA({...F(s.H,s.S,s.L),A:M(s.A)},i.decimals)),[x.CIELab]:(e,t,r,o,i)=>t(e,r).map(s=>{const n=F(s.H,s.S,s.L);return o?f.CIELab(it(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?f.CIELab({...it(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,L=d-l,T=m-l,A=Math.min(g,L),W=g-A,P=(L+A)/2,V=(T+L-A)/2,_=Math.max(W,P,V)/Math.max(g,L,T),Et=isNaN(_)||_===1/0||_<=0?1:_;return{R:W/Et+c,Y:P/Et+c,B:V/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,L=d-m,T=Math.min(g,L),A=c+g-T,W=g+T,P=2*(L-T),V=Math.max(A,W,P)/Math.max(c,g,L),_=isNaN(V)||V===1/0||V<=0?1:V;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)}},[x.HEX](e,t,r){const o=this.mix(e,t);return delete o.A,r?f.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?f.HEX(o):u.HEXA(o)},[x.RGB](e,t,r,o){const i=this.mix(e,t);return delete i.A,r?f.RGB(i,o):u.RGB(i,o.decimals)},RGBA(e,t,r,o){const i=this.mix(e,t);return r?f.RGB(i,o):u.RGBA(i,o.decimals)},[x.HSL](e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B);return delete i.A,delete s.A,r?f.HSL(s,o):u.HSL(i,o.decimals)},HSLA(e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B,i.A);return r?f.HSL(s,o):u.HSLA(i,o.decimals)},[x.CIELab](e,t,r,o){const i=this.mix(e,t),s=it(i.R,i.G,i.B);return delete i.A,r?f.CIELab(s,o):u.CIELabA(i,o.decimals)},CIELabA(e,t,r,o){const i=this.mix(e,t),s=it(i.R,i.G,i.B);return H(i,"A")&&(s.A=i.A),r?f.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)}:{}}),Vt=(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)}),tr=(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),L=(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+L*A)})})(J(e),J(t),r).map(n=>i(n,o))),Ft=(e,t,r,o)=>({[j.ANALOGOUS]:Q.buildHarmony(t,je,r,o),[j.COMPLEMENTARY]:Q.buildHarmony(t,Ve,r,o),[j.SPLIT_COMPLEMENTARY]:Q.buildHarmony(t,Xe,r,o),[j.TRIADIC]:Q.buildHarmony(t,Ke,r,o),[j.TETRADIC]:Q.buildHarmony(t,Ue,r,o),[j.SQUARE]:Q.buildHarmony(t,ze,r,o)})[e];class N{constructor(t,r={}){this._options=y(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={...te(this.cmyk.C,this.cmyk.M,this.cmyk.Y,this.cmyk.K),A:this.rgb.A}}updateRGBFromLab(){this.rgb={...Qt(this.lab.L,this.lab.a,this.lab.b),A:this.rgb.A}}updateHSL(){this.hsl=ot(this.rgb.R,this.rgb.G,this.rgb.B,this.rgb.A)}updateLab(){this.lab={...it(this.rgb.R,this.rgb.G,this.rgb.B),A:this.rgb.A}}updateCMYK(){this.cmyk=ce(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 f.HEX({R:this.R,G:this.G,B:this.B})}get HEXA(){return f.HEX({R:this.R,G:this.G,B:this.B,A:255*this.A})}get RGB(){return f.RGB({R:this.R,G:this.G,B:this.B},this.options)}get RGBA(){return f.RGB({R:this.R,G:this.G,B:this.B,A:this.A},this.options)}get HSL(){return f.HSL({H:this.H,S:this.S,L:this.L},this.options)}get HSLA(){return f.HSL({H:this.H,S:this.S,L:this.L,A:this.A},this.options)}get CIELab(){return f.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb},this.options)}get CIELabA(){return f.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb,A:this.A},this.options)}get CMYK(){return f.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K},this.options)}get CMYKA(){return f.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 f.HEX(N.toHEXObject(t))}static toHEXAObject(t){const r=S(t);return k(t,r,0,u.HEXA)}static toHEXA(t){return f.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=y(r,t),s=k(t,o,r.decimals,u.RGB);return f.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=y(r,t),s=k(t,o,r.decimals,u.RGBA);return f.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=y(r,t),s=k(t,o,r.decimals,u.HSL);return f.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=y(r,t),s=k(t,o,r.decimals,u.HSLA);return f.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=y(r,t),s=k(t,o,r.decimals,u.CIELab);return f.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=y(r,t),s=k(t,o,r.decimals,u.CIELabA);return f.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=y(r,t),s=k(t,o,r.decimals,u.CMYK);return f.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=y(r,t),s=k(t,o,r.decimals,u.CMYKA);return f.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=>f.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=>f.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=>f.RGB(s,y(i||{},t,r))):E(t,r,5,o?.decimals,u.RGB).map(s=>f.RGB(s,y(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=>f.RGB(s,y(i||{},t,r))):E(t,r,5,o?.decimals,u.RGBA).map(s=>f.RGB(s,y(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=>f.HSL(s,y(i||{},t,r))):E(t,r,5,o?.decimals,u.HSL).map(s=>f.HSL(s,y(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=>f.HSL(s,y(i||{},t,r))):E(t,r,5,o?.decimals,u.HSLA).map(s=>f.HSL(s,y(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=>f.CIELab(s,y(i||{},t,r))):E(t,r,5,o?.decimals,u.CIELab).map(s=>f.CIELab(s,y(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=>f.CIELab(s,y(i||{},t,r))):E(t,r,5,o?.decimals,u.CIELabA).map(s=>f.CIELab(s,y(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,y(o||{},...t)):C.RGB(t,B.ADDITIVE,!1,y(r||{},...t))}static getMixRGB(t,r,o){return typeof r=="string"?C.RGB(t,r,!0,y(o||{},...t)):C.RGB(t,B.ADDITIVE,!0,y(r||{},...t))}static getMixRGBAObject(t,r,o){return typeof r=="string"?C.RGBA(t,r,!1,y(o||{},...t)):C.RGBA(t,B.ADDITIVE,!1,y(r||{},...t))}static getMixRGBA(t,r,o){return typeof r=="string"?C.RGBA(t,r,!0,y(o||{},...t)):C.RGBA(t,B.ADDITIVE,!0,y(r||{},...t))}static getMixHSLObject(t,r,o){return typeof r=="string"?C.HSL(t,r,!1,y(o||{},...t)):C.HSL(t,B.ADDITIVE,!1,y(r||{},...t))}static getMixHSL(t,r,o){return typeof r=="string"?C.HSL(t,r,!0,y(o||{},...t)):C.HSL(t,B.ADDITIVE,!0,y(r||{},...t))}static getMixHSLAObject(t,r,o){return typeof r=="string"?C.HSLA(t,r,!1,y(o||{},...t)):C.HSLA(t,B.ADDITIVE,!1,y(r||{},...t))}static getMixHSLA(t,r,o){return typeof r=="string"?C.HSLA(t,r,!0,y(o||{},...t)):C.HSLA(t,B.ADDITIVE,!0,y(r||{},...t))}static getMixCIELabObject(t,r,o){return typeof r=="string"?C.CIELab(t,r,!1,y(o||{},...t)):C.CIELab(t,B.ADDITIVE,!1,y(r||{},...t))}static getMixCIELab(t,r,o){return typeof r=="string"?C.CIELab(t,r,!0,y(o||{},...t)):C.CIELab(t,B.ADDITIVE,!0,y(r||{},...t))}static getMixCIELabAObject(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!1,y(o||{},...t)):C.CIELabA(t,B.ADDITIVE,!1,y(r||{},...t))}static getMixCIELabA(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!0,y(o||{},...t)):C.CIELabA(t,B.ADDITIVE,!0,y(r||{},...t))}static getShades(t,r,o){return typeof r=="number"?yt(t,r,!0,y(o||{},t)):yt(t,5,!0,y(r||{},t))}static getTints(t,r,o){return typeof r=="number"?yt(t,r,!1,y(o||{},t)):yt(t,5,!1,y(r||{},t))}static getHarmony(t,r,o,i){return`${r}`in j?Ft(r,t,St(o)?o:B.ADDITIVE,y(St(o)?i||{}:o||{},t)):St(r)?Ft(j.COMPLEMENTARY,t,r,y(o||{},t)):Ft(j.COMPLEMENTARY,t,B.ADDITIVE,y(r||{},t))}}function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}function er(e){return e.split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).toString().replaceAll(",","")}class rr extends R{type;name;constructor(t,r){super("div"),this.staticClass("style-panel"),this.type=r,this.name=t,this.layout(),this.on("input",o=>{this.update()})}update(){return this.role_model_list.forEach(([t,r])=>{r.update(this),K.updateStyle(this.name,r,[t])}),this}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 oe("display").label("Display").add([["block","inline","flex","none"].map(o=>$("option").content(o).value(o))]).value(this.data.display),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 Lt("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 Lt("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 oe(`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 Lt(`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${er(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 or{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 ir={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 sr extends R{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 nr extends R{messageList=new Set;constructor(){super("ytchat")}send(t){const r=new sr(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 ar=`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 st{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 st?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 rt)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 rt extends st{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 st{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 fe{#t;elementList=new Set;constructor(t){this.#t=t}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.dom.childNodes)],o=[];for(;r.length||t.length;){const[i,s]=[r.at(0),t.at(0)];s?i?s!==i?(s.$.__hidden||(this.dom.insertBefore(s,i),o.push(s)),t.shift()):(s.$.__hidden&&this.dom.removeChild(s),t.shift(),r.shift()):(s.$.__hidden||this.dom.append(s),t.shift()):(i&&!o.includes(i)&&i.remove(),r.shift())}}get array(){return[...this.elementList.values()]}get dom(){return this.#t.dom}}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 R extends rt{children=new fe(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 Ht extends R{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 kt;(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})(kt||(kt={}));class It extends R{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 Jt(e){return kt.mixin(e,xe)}class xe{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 $e=Object.defineProperty,ye=Object.getOwnPropertyDescriptor,Le=(e,t,r,o)=>{for(var i=o>1?void 0:o?ye(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&&$e(t,r,i),i};let ut=class extends R{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=Le([Jt],ut);var Re=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&&Re(t,r,i),i};let ct=class extends rt{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=Ae([Jt],ct);class Dt extends R{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 Ot extends rt{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 Gt extends R{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 Wt extends R{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 ae(e){return $.mixin(e,Ee)}class Ee{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 re(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 re&&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 re{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 Ct extends R{view_cache=new Map;event=new Zt().register("switch");content_id=null;constructor(t){super("view",t)}setView(t,r){return this.view_cache.set(t,r),this}deleteView(t){return this.view_cache.delete(t),this}deleteAllView(){return this.view_cache.clear(),this}switchView(t){const r=this.view_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 Be=Object.defineProperty,ve=Object.getOwnPropertyDescriptor,Se=(e,t,r,o)=>{for(var i=o>1?void 0:o?ve(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 extends R{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=Se([Jt],pt);class Nt extends R{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 _t extends R{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 Pt extends R{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 b(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=>b(t));if(e.startsWith(":"))return b(document.querySelector(e.replace(/^:/,"")));if(e in b.TagNameElementMap)switch(b.TagNameElementMap[e]){case rt:return new rt(e);case Ht:return new Ht;case R:return new R(e);case ct:return new ct;case Dt:return new Dt;case It:return new It;case ut:return new ut;case Ot:return new Ot;case Gt:return new Gt;case Wt:return new Wt;case Ct:return new Ct;case pt:return new pt;case Nt:return new Nt;case _t:return new _t;case Pt:return new Pt}else return new R(e)}if(e instanceof HTMLElement||e instanceof Text)return e.$?e.$:st.from(e);throw"$: NOT SUPPORT TARGET ELEMENT TYPE"}(e=>{e.anchorHandler=null,e.anchorPreventDefault=!1,e.body=document.body,e.routers=new Set,e.TagNameElementMap={a:Ht,p:R,pre:R,code:R,blockquote:R,strong:R,h1:R,h2:R,h3:R,h4:R,h5:R,h6:R,div:R,ol:R,ul:R,dl:R,li:R,input:ct,label:Dt,button:ut,form:It,img:Ot,dialog:Wt,canvas:Gt,view:Ct,select:pt,option:Nt,optgroup:_t,textarea:Pt};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 L=e("img");if(L.once("load",T=>{const A=e("canvas"),W=A.getContext("2d"),_=L.height()/L.width(),[V,P]=[_>1?m/_:m,_>1?m:m*_];A.height(P).width(V),W?.drawImage(L.dom,0,0,V,P),l(A.toDataURL(d.type))}),!g.target)throw"$.resize(): e.target is null";L.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 L=c(d)?d[0](...d.slice(1)):e(d);return l&&l(L),L});{const g=[];for(const L of m){const T=d instanceof Function?d(...L):c(d)?d[0](...d.slice(1)):e(d);L instanceof Function?L(T):(L instanceof st||typeof L=="string")&&T.content(L),g.push(T)}return g}function c(g){return g instanceof Array&&g[0]instanceof Function}}e.builder=h})(b||(b={}));globalThis.$=b;var Te=Object.defineProperty,Fe=Object.getOwnPropertyDescriptor,we=(e,t,r,o)=>{for(var i=o>1?void 0:o?Fe(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&&Te(t,r,i),i};let Yt=class{id;content;events=new Zt().register("open","load");constructor(e){this.id=e}};Yt=we([ae],Yt);var Me=Object.defineProperty,He=Object.getOwnPropertyDescriptor,ke=(e,t,r,o)=>{for(var i=o>1?void 0:o?He(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&&Me(t,r,i),i};let oe=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 Ct}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.switchView(i),s.events.fire("open",{path:e,record:s}),!0):!1},o=(i,s,n)=>{const a=new Yt(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.setView(i,h).switchView(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,L]=l.split(":");if(!c.startsWith(g))continue;if(Object.assign(h,{[L]: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()}}};oe=ke([ae],oe);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 R{$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 ie 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 x,j,E,At;(function(e){e.HEX="HEX",e.RGB="RGB",e.HSL="HSL",e.CIELab="CIELab",e.CMYK="CMYK"})(x||(x={})),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"}(E||(E={})),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"}(At||(At={}));const de=Object.keys(At),Ie={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"]},jt={BGR:x.RGB,ABGR:x.RGB,HLS:x.HSL,AHLS:x.HSL,LAB:x.CIELab,ALAB:x.CIELab,CKMY:x.CMYK,ACKMY:x.CMYK};var ht;(function(e){e.NUMBER="number",e.BOOLEAN="boolean"})(ht||(ht={}));const O={[x.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,[x.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*\)$/,[x.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*\)$/,[x.CIELab]:/^lab\s*\(\s*(?:((?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)\s*(-?(?:\d*\.)?\d+%?)(?:\s*\/\s*((?:\d*\.)?\d+%?))?)\s*\)$/,[x.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*\)$/},he=/^(-?(?:\d*\.)?\d+)((?:deg|grad|rad|turn)?)$/,S=/^(-?\d+(?:\.\d+)?|-?\.\d+)%$/,Vt=/^0x([a-f\d]{1,2})$/i,De=/\{(\d+)\}/g,Oe=/,( +|\d+)/g,Ge=/ +/,We="The provided string color doesn't have a correct format",Ne="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 X={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(S,"$1"),q=e=>S.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&&S.test(e)?Math.min(255*bt(e)/100,255):Vt.test(e)?(e.length===3&&(e+=e.slice(-1)),t?p(e)/255:p(e)):Math.min(+e,t?1:255),Et=e=>S.test(e)?w(125*bt(e)/100,-125,125):w(+e,-125,125),U=e=>Math.min(S.test(e)?bt(e)/100:+e,1),le=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(he),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},_e=(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},y=(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(Oe);new Set(g).size===1&&Ge.test(g[0].slice(1))&&l.spacesAfterCommas++}if(c.match(O.HSL)){const g=c.match(O.HSL),L=g[1]||g[5],T=g[8],A=L.match(he)[2];o.push(A===""?D.NONE:A),a.push(S.test(T));continue}if(O.RGB.test(c)){const g=c.match(O.RGB),L=g[1]||g[5],T=g[2]||g[6],A=g[3]||g[7],W=g[8];i.push(S.test(L)&&S.test(T)&&S.test(A)),a.push(S.test(W));continue}if(O.CIELab.test(c)){const g=c.match(O.CIELab),L=g[1],T=g[2],A=g[3],W=g[4];s.push(S.test(L)&&S.test(T)&&S.test(A)),a.push(S.test(W));continue}if(c.match(O.CMYK)){const g=c.match(O.CMYK),L=g[1]||g[6],T=g[2]||g[7],A=g[3]||g[8],W=g[4]||g[9],_=g[10];n.push(S.test(L)&&S.test(T)&&S.test(A)&&S.test(W)),c.startsWith("cmyk")&&l.cmykFunction++,a.push(S.test(_))}}return{decimals:typeof e.decimals===ht.NUMBER?e.decimals:X.decimals,legacyCSS:typeof e.legacyCSS===ht.BOOLEAN?e.legacyCSS:!!(r.length&&l.legacyCSS===r.length)||X.legacyCSS,spacesAfterCommas:typeof e.spacesAfterCommas===ht.BOOLEAN?e.spacesAfterCommas:!!(r.length&&l.spacesAfterCommas===r.length)||X.spacesAfterCommas,anglesUnit:e.anglesUnit&&h.includes(e.anglesUnit)?e.anglesUnit:new Set(o).size===1?o[0]:X.anglesUnit,rgbUnit:e.rgbUnit&&d.includes(e.rgbUnit)?e.rgbUnit:new Set(i).size===1&&i[0]?I.PERCENT:X.rgbUnit,labUnit:e.labUnit&&d.includes(e.labUnit)?e.labUnit:new Set(s).size===1&&s[0]?I.PERCENT:X.labUnit,cmykUnit:e.cmykUnit&&d.includes(e.cmykUnit)?e.cmykUnit:new Set(n).size!==1||n[0]?X.cmykUnit:I.NONE,alphaUnit:e.alphaUnit&&d.includes(e.alphaUnit)?e.alphaUnit:new Set(a).size===1&&a[0]?I.PERCENT:X.alphaUnit,cmykFunction:e.cmykFunction&&m.includes(e.cmykFunction)?e.cmykFunction:n.length&&n.length===l.cmykFunction?mt.CMYK:X.cmykFunction}},St=e=>`${e}`in E,ue=[[.4360747,.3850649,.1430804],[.2225045,.7168786,.0606169],[.0139322,.0971045,.7141733]],Pe=[[3.1338561,-1.6168667,-.4906146],[-.9787684,1.9161415,.033454],[.0719453,-.2289914,1.4052427]],tt=ue.map(e=>e.reduce((t,r)=>t+r,0)),Tt=(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)),Ye=e=>e<=.04045?e/12.92:((e+.055)/1.055)**2.4,je=e=>e<=.0031308?12.92*e:1.055*e**(1/2.4)-.055,ce=(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:Tt(i,o,(e/=60)+2),G:Tt(i,o,e),B:Tt(i,o,e-2)}},ot=(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}},it=(e,t,r)=>{const o=[e/255,t/255,r/255].map(Ye),i=ce(o[0],o[1],o[2],ue),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]}},te=(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=ce(o[0],o[1],o[2],Pe).map(je);return{R:w(255*i[0],0,255),G:w(255*i[1],0,255),B:w(255*i[2],0,255)}},ee=(e,t,r,o)=>({R:p(255*(1-e)*(o=1-o)),G:p(255*(1-t)*o),B:p(255*(1-r)*o)}),pe=(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)}},se=(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)},Ft=e=>e?", ":",",at=(e,t)=>{const r=le(Object.keys(e));return Ie[jt[r]].reduce((o,i,s)=>{const n=e[i];return n!==void 0&&o.push(t(n,s)),o},[])},dt=(e,t)=>e.replace(De,(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)}%`},f={[x.HEX]:e=>{const t=at(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 dt(r,t)},[x.RGB]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,rgbUnit:s}=t,n=Ft(i),a=at(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 dt(h,a)},[x.HSL]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,anglesUnit:s}=t,n=Ft(i),a=at(e,(d,m)=>m===0&&s!==D.NONE?`${p(_e(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 dt(h,a)},[x.CIELab]:(e,t)=>{const{decimals:r,labUnit:o}=t,i=at(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 dt(s,i)},[x.CMYK]:(e,t)=>{const{decimals:r,legacyCSS:o,spacesAfterCommas:i,cmykUnit:s,cmykFunction:n}=t,a=Ft(i),h=at(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 dt(d,h)}},M=e=>(typeof e=="string"&&(e=S.test(e)?bt(e)/100:+e),isNaN(+e)||e>1?1:p(e)),nt=(e,t,r)=>t.reduce((o,i)=>[...o,{...e,H:r===E.ADDITIVE?gt(e.H+i):gt(se(se(e.H,!1)+i,!0))}],[{...e}]),Ve=(e,t)=>nt(e,[30,-30],t),Xe=(e,t)=>nt(e,[180],t),Ke=(e,t)=>nt(e,[150,-150],t),Ue=(e,t)=>nt(e,[120,-120],t),ze=(e,t)=>nt(e,[60,-120,180],t),qe=(e,t)=>nt(e,[90,-90,180],t),v=e=>typeof e=="string"?(t=>{let r;if(Object.keys(x).some(o=>{if(O[o].test(t))return r=o,!0}),!r&&~de.indexOf(t)&&(r=x.HEX),!r)throw new Error(We);return r})(e):(t=>{let r,o=!1;const i=le(Object.keys(t));if(jt[i]&&(r=jt[i]),r&&r===x.RGB){const s=Object.entries(t).some(a=>!Vt.test(`${a[1]}`)),n=Object.entries(t).some(a=>!(S.test(`${a[1]}`)||!Vt.test(`${a[1]}`)&&!isNaN(+a[1])&&+a[1]<=255));s&&n&&(o=!0),s||(r=x.HEX)}if(!r||o)throw new Error(Ne);return r})(e),Je={[x.HEX](e){const t=(~de.indexOf(e)?At[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},[x.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},[x.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},[x.CIELab](e){const t=e.match(O.CIELab),r=q(t[1]),o=Et(t[2]),i=Et(t[3]),s=t[4],n=te(r,o,i);return s!==void 0&&(n.A=M(s)),n},[x.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=ee(r,o,i,s);return n!==void 0&&(a.A=M(n)),a}},Ze={[x.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},[x.RGB](e){return this.HEX(e)},[x.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},[x.CIELab](e){const t=q(`${e.L}`),r=Et(`${e.a}`),o=Et(`${e.b}`),i=te(t,r,o);return H(e,"A")&&(i.A=M(e.A)),i},[x.CMYK](e){const t=U(`${e.C}`),r=U(`${e.M}`),o=U(`${e.Y}`),i=U(`${e.K}`),s=ee(t,r,o,i);return H(e,"A")&&(s.A=M(e.A)),s}},J=(e,t=v(e))=>typeof e=="string"?Je[t](e):Ze[t](e),u={[x.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},[x.RGB](e,t){const r=Qe(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},[x.HSL](e,t){const r=ot(e.R,e.G,e.B);return delete r.A,Xt(r,t)},HSLA(e,t){const r=u.HSL(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[x.CIELab](e,t){const r=it(e.R,e.G,e.B);return tr(r,t)},CIELabA(e,t){const r=u.CIELab(e,t);return r.A=H(e,"A")?p(e.A,t):1,r},[x.CMYK]:(e,t)=>er(pe(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}},yt=(e,t,r,o)=>{const i=v(e),s=typeof e=="string",n=J(e,i),a=typeof e=="string"&&H(n,"A")||typeof e!="string"&&H(e,"A"),h=ot(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 x.HEX:default:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?a?f.HEX({...c,A:p(255*c.A)}):f.HEX(c):a?u.HEXA(c):u.HEX(c)});case x.RGB:return m.map(l=>{const c=F(l.H,l.S,l.L);return a&&(c.A=l.A),s?f.RGB(c,o):a?u.RGBA(c,o.decimals):u.RGB(c,o.decimals)});case x.HSL:return m.map(l=>s?f.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 x.CIELab:return m.map(l=>{const c=F(l.H,l.S,l.L);return s?f.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=v(e),s=J(e,i),n=ot(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 x.HEX:default:return a?this.HEXA(Xt(n,0),t,r,h):this.HEX(Xt(n,0),t,r,h);case x.HSL:return a?this.HSLA(n,t,r,h,o):this.HSL(n,t,r,h,o);case x.RGB:return a?this.RGBA(n,t,r,h,o):this.RGB(n,t,r,h,o);case x.CIELab:return a?this.CIELabA(n,t,r,h,o):this.CIELab(n,t,r,h,o)}},[x.HEX]:(e,t,r,o)=>t(e,r).map(i=>o?f.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?f.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)})),[x.RGB]:(e,t,r,o,i)=>t(e,r).map(s=>o?f.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?f.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)),[x.HSL]:(e,t,r,o,i)=>t(e,r).map(s=>o?f.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?f.HSL({...s,A:M(s.A)},i):u.HSLA({...F(s.H,s.S,s.L),A:M(s.A)},i.decimals)),[x.CIELab]:(e,t,r,o,i)=>t(e,r).map(s=>{const n=F(s.H,s.S,s.L);return o?f.CIELab(it(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?f.CIELab({...it(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=v(n);return J(n,a)}),o=t===E.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,L=d-l,T=m-l,A=Math.min(g,L),W=g-A,_=(L+A)/2,V=(T+L-A)/2,P=Math.max(W,_,V)/Math.max(g,L,T),vt=isNaN(P)||P===1/0||P<=0?1:P;return{R:W/vt+c,Y:_/vt+c,B:V/vt+c}})(n.R,n.G,n.B);return H(n,"A")&&(a.A=n.A),a}):null;function i(n){const a=t===E.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===E.ADDITIVE?{G:Math.min(c+g*m,255)}:{Y:Math.min(c+g*m,255)}}},a)}let s;if(t===E.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,L=d-m,T=Math.min(g,L),A=c+g-T,W=g+T,_=2*(L-T),V=Math.max(A,W,_)/Math.max(c,g,L),P=isNaN(V)||V===1/0||V<=0?1:V;return{R:A/P+l,G:W/P+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)}},[x.HEX](e,t,r){const o=this.mix(e,t);return delete o.A,r?f.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?f.HEX(o):u.HEXA(o)},[x.RGB](e,t,r,o){const i=this.mix(e,t);return delete i.A,r?f.RGB(i,o):u.RGB(i,o.decimals)},RGBA(e,t,r,o){const i=this.mix(e,t);return r?f.RGB(i,o):u.RGBA(i,o.decimals)},[x.HSL](e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B);return delete i.A,delete s.A,r?f.HSL(s,o):u.HSL(i,o.decimals)},HSLA(e,t,r,o){const i=this.mix(e,t),s=ot(i.R,i.G,i.B,i.A);return r?f.HSL(s,o):u.HSLA(i,o.decimals)},[x.CIELab](e,t,r,o){const i=this.mix(e,t),s=it(i.R,i.G,i.B);return delete i.A,r?f.CIELab(s,o):u.CIELabA(i,o.decimals)},CIELabA(e,t,r,o){const i=this.mix(e,t),s=it(i.R,i.G,i.B);return H(i,"A")&&(s.A=i.A),r?f.CIELab(s,o):u.CIELabA(i,o.decimals)}},Qe=(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)}:{}}),Xt=(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)}:{}}),tr=(e,t)=>({L:p(e.L,t),a:p(e.a,t),b:p(e.b,t)}),er=(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),B=(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),L=(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+L*A)})})(J(e),J(t),r).map(n=>i(n,o))),wt=(e,t,r,o)=>({[j.ANALOGOUS]:Q.buildHarmony(t,Ve,r,o),[j.COMPLEMENTARY]:Q.buildHarmony(t,Xe,r,o),[j.SPLIT_COMPLEMENTARY]:Q.buildHarmony(t,Ke,r,o),[j.TRIADIC]:Q.buildHarmony(t,Ue,r,o),[j.TETRADIC]:Q.buildHarmony(t,ze,r,o),[j.SQUARE]:Q.buildHarmony(t,qe,r,o)})[e];class N{constructor(t,r={}){this._options=y(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={...ee(this.cmyk.C,this.cmyk.M,this.cmyk.Y,this.cmyk.K),A:this.rgb.A}}updateRGBFromLab(){this.rgb={...te(this.lab.L,this.lab.a,this.lab.b),A:this.rgb.A}}updateHSL(){this.hsl=ot(this.rgb.R,this.rgb.G,this.rgb.B,this.rgb.A)}updateLab(){this.lab={...it(this.rgb.R,this.rgb.G,this.rgb.B),A:this.rgb.A}}updateCMYK(){this.cmyk=pe(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 f.HEX({R:this.R,G:this.G,B:this.B})}get HEXA(){return f.HEX({R:this.R,G:this.G,B:this.B,A:255*this.A})}get RGB(){return f.RGB({R:this.R,G:this.G,B:this.B},this.options)}get RGBA(){return f.RGB({R:this.R,G:this.G,B:this.B,A:this.A},this.options)}get HSL(){return f.HSL({H:this.H,S:this.S,L:this.L},this.options)}get HSLA(){return f.HSL({H:this.H,S:this.S,L:this.L,A:this.A},this.options)}get CIELab(){return f.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb},this.options)}get CIELabA(){return f.CIELab({L:this.CIEL,a:this.CIEa,b:this.CIEb,A:this.A},this.options)}get CMYK(){return f.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K},this.options)}get CMYKA(){return f.CMYK({C:this.C,M:this.M,Y:this.Y,K:this.K,A:this.A},this.options)}static toHEXObject(t){const r=v(t);return k(t,r,0,u.HEX)}static toHEX(t){return f.HEX(N.toHEXObject(t))}static toHEXAObject(t){const r=v(t);return k(t,r,0,u.HEXA)}static toHEXA(t){return f.HEX(N.toHEXAObject(t))}static toRGBObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.RGB)}static toRGB(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.RGB);return f.RGB(s,i)}static toRGBAObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.RGBA)}static toRGBA(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.RGBA);return f.RGB(s,i)}static toHSLObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.HSL)}static toHSL(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.HSL);return f.HSL(s,i)}static toHSLAObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.HSLA)}static toHSLA(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.HSLA);return f.HSL(s,i)}static toCIELabObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.CIELab)}static toCIELab(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.CIELab);return f.CIELab(s,i)}static toCIELabAObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.CIELabA)}static toCIELabA(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.CIELabA);return f.CIELab(s,i)}static toCMYKObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.CMYK)}static toCMYK(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.CMYK);return f.CMYK(s,i)}static toCMYKAObject(t,r={}){const o=v(t);return k(t,o,r.decimals,u.CMYKA)}static toCMYKA(t,r={}){const o=v(t),i=y(r,t),s=k(t,o,r.decimals,u.CMYKA);return f.CMYK(s,i)}static getBlendHEXObject(t,r,o=5){return B(t,r,o,0,u.HEX)}static getBlendHEX(t,r,o=5){return N.getBlendHEXObject(t,r,o).map(i=>f.HEX(i))}static getBlendHEXAObject(t,r,o=5){return B(t,r,o,0,u.HEXA)}static getBlendHEXA(t,r,o=5){return N.getBlendHEXAObject(t,r,o).map(i=>f.HEX(i))}static getBlendRGBObject(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.RGB):B(t,r,5,o?.decimals,u.RGB)}static getBlendRGB(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.RGB).map(s=>f.RGB(s,y(i||{},t,r))):B(t,r,5,o?.decimals,u.RGB).map(s=>f.RGB(s,y(o||{},t,r)))}static getBlendRGBAObject(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.RGBA):B(t,r,5,o?.decimals,u.RGBA)}static getBlendRGBA(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.RGBA).map(s=>f.RGB(s,y(i||{},t,r))):B(t,r,5,o?.decimals,u.RGBA).map(s=>f.RGB(s,y(o||{},t,r)))}static getBlendHSLObject(t,r,o,i){return B(t,r,typeof o=="number"?o:5,i?.decimals,u.HSL)}static getBlendHSL(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.HSL).map(s=>f.HSL(s,y(i||{},t,r))):B(t,r,5,o?.decimals,u.HSL).map(s=>f.HSL(s,y(o||{},t,r)))}static getBlendHSLAObject(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.HSLA):B(t,r,5,o?.decimals,u.HSLA)}static getBlendHSLA(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.HSLA).map(s=>f.HSL(s,y(i||{},t,r))):B(t,r,5,o?.decimals,u.HSLA).map(s=>f.HSL(s,y(o||{},t,r)))}static getBlendCIELabObject(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.CIELab):B(t,r,5,o?.decimals,u.CIELab)}static getBlendCIELab(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.CIELab).map(s=>f.CIELab(s,y(i||{},t,r))):B(t,r,5,o?.decimals,u.CIELab).map(s=>f.CIELab(s,y(o||{},t,r)))}static getBlendCIELabAObject(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.CIELabA):B(t,r,5,o?.decimals,u.CIELabA)}static getBlendCIELabA(t,r,o,i){return typeof o=="number"?B(t,r,o,i?.decimals,u.CIELabA).map(s=>f.CIELab(s,y(i||{},t,r))):B(t,r,5,o?.decimals,u.CIELabA).map(s=>f.CIELab(s,y(o||{},t,r)))}static getMixHEXObject(t,r=E.ADDITIVE){return C.HEX(t,r,!1)}static getMixHEX(t,r=E.ADDITIVE){return C.HEX(t,r,!0)}static getMixHEXAObject(t,r=E.ADDITIVE){return C.HEXA(t,r,!1)}static getMixHEXA(t,r=E.ADDITIVE){return C.HEXA(t,r,!0)}static getMixRGBObject(t,r,o){return typeof r=="string"?C.RGB(t,r,!1,y(o||{},...t)):C.RGB(t,E.ADDITIVE,!1,y(r||{},...t))}static getMixRGB(t,r,o){return typeof r=="string"?C.RGB(t,r,!0,y(o||{},...t)):C.RGB(t,E.ADDITIVE,!0,y(r||{},...t))}static getMixRGBAObject(t,r,o){return typeof r=="string"?C.RGBA(t,r,!1,y(o||{},...t)):C.RGBA(t,E.ADDITIVE,!1,y(r||{},...t))}static getMixRGBA(t,r,o){return typeof r=="string"?C.RGBA(t,r,!0,y(o||{},...t)):C.RGBA(t,E.ADDITIVE,!0,y(r||{},...t))}static getMixHSLObject(t,r,o){return typeof r=="string"?C.HSL(t,r,!1,y(o||{},...t)):C.HSL(t,E.ADDITIVE,!1,y(r||{},...t))}static getMixHSL(t,r,o){return typeof r=="string"?C.HSL(t,r,!0,y(o||{},...t)):C.HSL(t,E.ADDITIVE,!0,y(r||{},...t))}static getMixHSLAObject(t,r,o){return typeof r=="string"?C.HSLA(t,r,!1,y(o||{},...t)):C.HSLA(t,E.ADDITIVE,!1,y(r||{},...t))}static getMixHSLA(t,r,o){return typeof r=="string"?C.HSLA(t,r,!0,y(o||{},...t)):C.HSLA(t,E.ADDITIVE,!0,y(r||{},...t))}static getMixCIELabObject(t,r,o){return typeof r=="string"?C.CIELab(t,r,!1,y(o||{},...t)):C.CIELab(t,E.ADDITIVE,!1,y(r||{},...t))}static getMixCIELab(t,r,o){return typeof r=="string"?C.CIELab(t,r,!0,y(o||{},...t)):C.CIELab(t,E.ADDITIVE,!0,y(r||{},...t))}static getMixCIELabAObject(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!1,y(o||{},...t)):C.CIELabA(t,E.ADDITIVE,!1,y(r||{},...t))}static getMixCIELabA(t,r,o){return typeof r=="string"?C.CIELabA(t,r,!0,y(o||{},...t)):C.CIELabA(t,E.ADDITIVE,!0,y(r||{},...t))}static getShades(t,r,o){return typeof r=="number"?yt(t,r,!0,y(o||{},t)):yt(t,5,!0,y(r||{},t))}static getTints(t,r,o){return typeof r=="number"?yt(t,r,!1,y(o||{},t)):yt(t,5,!1,y(r||{},t))}static getHarmony(t,r,o,i){return`${r}`in j?wt(r,t,St(o)?o:E.ADDITIVE,y(St(o)?i||{}:o||{},t)):St(r)?wt(j.COMPLEMENTARY,t,r,y(o||{},t)):wt(j.COMPLEMENTARY,t,E.ADDITIVE,y(r||{},t))}}function G(e){return e.charAt(0).toUpperCase()+e.slice(1)}function rr(e){return e.split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).toString().replaceAll(",","")}class or extends R{type;name;constructor(t,r){super("div"),this.staticClass("style-panel"),this.type=r,this.name=t,this.layout(),this.on("input",o=>{this.update()})}update(){return this.role_model_list.forEach(([t,r])=>{r.update(this),K.updateStyle(this.name,r,[t])}),this}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 ie("display").label("Display").add([["block","inline","flex","none"].map(o=>$("option").content(o).value(o))]).value(this.data.display),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 ie(`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${rr(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 ir{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 sr={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:"#FF427B99",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"},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:"#FFD6D6FF",backgroundColor:"#FF333399",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"},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"},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"},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"}}},Lt={bocchi:["bocchi_1.png","bocchi_2.png"],kita:["kita_1.png","kita_2.png"],nijika:["nijika_1.png","nijika_2.png"],ryo:["ryo_1.png","ryo_2.png"]};class nr extends R{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(`/${this.avatar_url}`)]),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"})}get avatar_url(){const t=this.data.role==="Normal"?Lt.bocchi:this.data.role==="Member"?Lt.kita:this.data.role==="Moderator"?Lt.ryo:Lt.nijika;return t[Math.floor(Math.random()*t.length)]}}class ar extends R{messageList=new Set;constructor(){super("ytchat")}send(t){const r=new nr(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 dr=`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 #reaction-control-panel-overlay,
@@ -50,9 +50,9 @@ yt-live-chat-text-message-renderer yt-live-chat-author-badge-renderer[type="mode
   fill: #5e84f1;
 }
 
-`,wt={version:"v1.0.3",github_homepage:"https://github.com/defaultkavy/youtube-chat-designer",author_link:"https://x.com/defaultkavy"},Z=new Map,Xt=["Normal","Member","Moderator","Owner"],Kt=["Message","Name","Avatar","Author Area","Content Area","Outer Area"],dr=["Message","Name","Timestamp"],hr=["Badge","Avatar"],pe=new Map,et=b("view"),K=new nr().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:"Shift + Left Click on Role list to select multiple role, edit selected role settings in once.",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"});me();const Ut=b("app").content([b("h1").content(["YouTube Chat Designer",b("span").content(wt.version),b("a").content("GitHub").href(wt.github_homepage).target("_blank"),b("a").content("@defaultkavy").href(wt.author_link).target("_blank")]),b("div").class("content").content([b("div").class("console").content([b("div").class("menu").content([b("div").class("action-row").content([b("div").class("role-list").content([b("button").content("ROLE").on("click",()=>{const e=b("::.role-checkbox"),t=!e.find(r=>r.checked()===!1);e.slice(t?1:0).forEach(r=>r.checked(!t)),zt()}),b("div").content([Xt.map(e=>[b("div").class("role").content(t=>[b("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",zt),b("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=b("::.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)})})])])])]),b("div").class("button-list").content([b("div").class("button-group").content([b("span").content("JSON"),b("button").content("Paste").self(e=>{let t;e.on("click",async r=>{const o=await navigator.clipboard.readText();try{const i=JSON.parse(o);me(i)}catch{e.content("Error!").class("error"),t=setTimeout(()=>{e.removeClass("error").content("Paste"),t=void 0},3e3);return}ge(),e.content("Pasted!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Paste"),t=void 0},3e3)})}),b("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(JSON.stringify(ur())),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})]),b("div").class("button-group").content([b("span").content("CSS"),b("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(lr()),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})])])]),b("div").class("element-list").content(e=>[Kt.map(t=>b("button").staticClass("element-button").content(t).on("click",(r,o)=>et.switchView(t)).self(r=>{et.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{K.showHint(t)}))]).on("mouseleave",e=>{K.hideHint()})]),et]),b("div").class("preview").content([b("header").content([b("h2").content("YouTube Chat Preview"),new Lt("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{K.css({backgroundColor:t.$color.value()})})]),K,b("div").class("input-panel").content([b("div").content([b("select").id("role-select").add([Xt.map(e=>b("option").content(e).value(e))]),b("input").id("username").placeholder("User Name")]),b("div").content([b("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),se())}),b("button").content("Send").on("click",e=>{se()})])])])])]);b(document.body).content(Ut);ge();window.addEventListener("resize",()=>cr());function me(e=ir){Z.clear();for(const t of Xt){const r=new Map;Z.set(t,r);for(const o of Kt){const i=new or(e[t][o]);r.set(o,i),K.updateStyle(o,i,[t])}}et.deleteAllView().clear();for(const t of Kt){const r=new rr(t,dr.includes(t)?"text":hr.includes(t)?"image":"element");pe.set(t,r),et.setView(t,r)}}function ge(){et.switchView("Message"),b("::.role-checkbox")?.forEach(e=>e.checked(!1)),b(":#normal")?.checked(!0),zt()}function zt(){pe.forEach(e=>e.layout())}function se(){const e=b(":#message-input").value().trim();e!==""&&(K.send({name:b(":#username").value(),message:e,role:b(":#role-select").value()}),K.dom.scrollTop=K.dom.scrollHeight)}function lr(){let e=ar;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;
+`,Mt={version:"v1.0.3",github_homepage:"https://github.com/defaultkavy/youtube-chat-designer",author_link:"https://x.com/defaultkavy"},Z=new Map,Kt=["Normal","Member","Moderator","Owner"],Ut=["Message","Name","Avatar","Author Area","Content Area","Outer Area"],hr=["Message","Name","Timestamp"],lr=["Badge","Avatar"],me=new Map,et=b("view"),K=new ar().css({backgroundColor:"#131313"}).send({name:"ひとり",message:"Hover mouse on the message will show the author role info.",role:"Normal"}).send({name:"郁代",message:"Shift + Left Click on Role list to select multiple role, edit selected role settings in once.",role:"Member"}).send({name:"リョウ",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:"虹夏",message:"Try to send message for test your design.",role:"Owner"});ge();const zt=b("app").content([b("h1").content(["YouTube Chat Designer",b("span").content(Mt.version),b("a").content("GitHub").href(Mt.github_homepage).target("_blank"),b("a").content("@defaultkavy").href(Mt.author_link).target("_blank")]),b("div").class("content").content([b("div").class("console").content([b("div").class("menu").content([b("div").class("action-row").content([b("div").class("role-list").content([b("button").content("ROLE").on("click",()=>{const e=b("::.role-checkbox"),t=!e.find(r=>r.checked()===!1);e.slice(t?1:0).forEach(r=>r.checked(!t)),qt()}),b("div").content([Kt.map(e=>[b("div").class("role").content(t=>[b("input").class("role-checkbox").type("checkbox").value(e).id(e.toLowerCase()).on("input",qt),b("label").content(e).for(e.toLowerCase()).on("click",r=>{const o=b("::.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)})})])])])]),b("div").class("button-list").content([b("div").class("button-group").content([b("span").content("JSON"),b("button").content("Paste").self(e=>{let t;e.on("click",async r=>{const o=await navigator.clipboard.readText();try{const i=JSON.parse(o);ge(i)}catch{e.content("Error!").class("error"),t=setTimeout(()=>{e.removeClass("error").content("Paste"),t=void 0},3e3);return}be(),e.content("Pasted!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Paste"),t=void 0},3e3)})}),b("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(JSON.stringify(cr())),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})]),b("div").class("button-group").content([b("span").content("CSS"),b("button").content("Copy").self(e=>{let t;e.on("click",r=>{navigator.clipboard.writeText(ur()),e.content("Copied!").class("done"),t&&clearTimeout(t),t=setTimeout(()=>{e.removeClass("done").content("Copy"),t=void 0},3e3)})})])])]),b("div").class("element-list").content(e=>[Ut.map(t=>b("button").staticClass("element-button").content(t).on("click",(r,o)=>et.switchView(t)).self(r=>{et.event.on("switch",o=>{o!==t?r.removeClass("active"):r.addClass("active")})}).on("mouseenter",r=>{K.showHint(t)}))]).on("mouseleave",e=>{K.hideHint()})]),et]),b("div").class("preview").content([b("header").content([b("h2").content("YouTube Chat Preview"),new Rt("ytchat-background-color").label("Background Color").value("#131313").on("input",(e,t)=>{K.css({backgroundColor:t.$color.value()})})]),K,b("div").class("input-panel").content([b("div").content([b("select").id("role-select").add([Kt.map(e=>b("option").content(e).value(e))]),b("input").id("username").placeholder("User Name")]),b("div").content([b("textarea").id("message-input").attribute("placeholder","Type here...").on("keydown",e=>{e.key==="Enter"&&(e.preventDefault(),ne())}),b("button").content("Send").on("click",e=>{ne()})])])])])]);b(document.body).content(zt);be();window.addEventListener("resize",()=>pr());function ge(e=sr){Z.clear();for(const t of Kt){const r=new Map;Z.set(t,r);for(const o of Ut){const i=new ir(e[t][o]);r.set(o,i),K.updateStyle(o,i,[t])}}et.deleteAllView().clear();for(const t of Ut){const r=new or(t,hr.includes(t)?"text":lr.includes(t)?"image":"element");me.set(t,r),et.setView(t,r)}}function be(){et.switchView("Message"),b("::.role-checkbox")?.forEach(e=>e.checked(!1)),b(":#normal")?.checked(!0),qt()}function qt(){me.forEach(e=>e.layout())}function ne(){const e=b(":#message-input").value().trim();e!==""&&(K.send({name:b(":#username").value(),message:e,role:b(":#role-select").value()}),K.dom.scrollTop=K.dom.scrollHeight)}function ur(){let e=dr;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}
 }
 
-`}return e;function t(r){return r.replaceAll(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}}function ur(){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}function cr(){innerWidth<700?b(document.body).content(b("div").content([`Please use a screen with a width greeter than 700px. Current width: ${innerWidth}px`])):Ut.inDOM()||b(document.body).content(Ut)}
+`}return e;function t(r){return r.replaceAll(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}}function cr(){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}function pr(){innerWidth<700?b(document.body).content(b("div").content([`Please use a screen with a width greeter than 700px. Current width: ${innerWidth}px`])):zt.inDOM()||b(document.body).content(zt)}
diff --git a/docs/assets/index-CyFkm3t3.css b/docs/assets/index-nOkcB8kh.css
similarity index 87%
rename from docs/assets/index-CyFkm3t3.css
rename to docs/assets/index-nOkcB8kh.css
index 65a98de..fedc973 100644
--- a/docs/assets/index-CyFkm3t3.css
+++ b/docs/assets/index-nOkcB8kh.css
@@ -1 +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;overflow-x:hidden;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.error{background-color:#e44141}.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,app h1 a{font-size:14px;color:#ffffff90;font-weight:100;letter-spacing:.1rem;margin-left:10px}app h1 a{background-color:#ffffff10;padding:.1rem .3rem;border-radius:4px;text-decoration:none}app h1 a:hover{background-color:#ffffff20;color:#fff}app label,app button{user-select:none}app .content{display:flex;gap:1rem}@media (max-width: 1200px){app .content{flex-direction:column;justify-content:center;padding-bottom:50vh}}app .content .console{width:100%;max-width:60%}@media (max-width: 1200px){app .content .console{max-width:100%}}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}@media (max-width: 1200px){app .content .preview{left:0;top:50vh;height:50vh;width:100%;padding:0;border:none;background-color:var(--background-color)}}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}
+.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;overflow-x:hidden;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.error{background-color:#e44141}.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,app h1 a{font-size:14px;color:#ffffff90;font-weight:100;letter-spacing:.1rem;margin-left:10px}app h1 a{background-color:#ffffff10;padding:.1rem .3rem;border-radius:4px;text-decoration:none}app h1 a:hover{background-color:#ffffff20;color:#fff}app label,app button{user-select:none}app .content{display:flex;gap:1rem}@media (max-width: 1200px){app .content{flex-direction:column;justify-content:center;padding-bottom:50vh}}app .content .console{width:100%;max-width:60%}@media (max-width: 1200px){app .content .console{max-width:100%}}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}@media (max-width: 1200px){app .content .preview{left:0;top:50vh;height:50vh;width:100%;padding:0;border:none;background-color:var(--background-color)}}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,#00000080);user-select:none;pointer-events:none;display:none;justify-content:end;align-items:center;color:#ffffff90;padding-right:10px;box-sizing:border-box;font-weight:700;font-size:1.2rem}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/avatar.png b/docs/avatar.png
deleted file mode 100644
index e0145e8..0000000
Binary files a/docs/avatar.png and /dev/null differ
diff --git a/docs/bocchi_1.png b/docs/bocchi_1.png
new file mode 100644
index 0000000..0381964
Binary files /dev/null and b/docs/bocchi_1.png differ
diff --git a/docs/bocchi_2.png b/docs/bocchi_2.png
new file mode 100644
index 0000000..06c5932
Binary files /dev/null and b/docs/bocchi_2.png differ
diff --git a/docs/index.html b/docs/index.html
index 5f36f02..ba60679 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -20,8 +20,8 @@
     <meta name="twitter:title" content="YouTube Chat Designer">
     <meta name="twitter:description" content="YouTube Chat CSS design tool for streamer.">
     <!-- <meta name="twitter:image" content=""> -->
-    <script type="module" crossorigin src="/assets/index-vbG7qyII.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CyFkm3t3.css">
+    <script type="module" crossorigin src="/assets/index-DR9W_gne.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-nOkcB8kh.css">
   </head>
   <body>
   </body>
diff --git a/docs/kita_1.png b/docs/kita_1.png
new file mode 100644
index 0000000..4f5abae
Binary files /dev/null and b/docs/kita_1.png differ
diff --git a/docs/kita_2.png b/docs/kita_2.png
new file mode 100644
index 0000000..ee85a6d
Binary files /dev/null and b/docs/kita_2.png differ
diff --git a/docs/nijika_1.png b/docs/nijika_1.png
new file mode 100644
index 0000000..547eb0c
Binary files /dev/null and b/docs/nijika_1.png differ
diff --git a/docs/nijika_2.png b/docs/nijika_2.png
new file mode 100644
index 0000000..861fbe0
Binary files /dev/null and b/docs/nijika_2.png differ
diff --git a/docs/ryo_1.png b/docs/ryo_1.png
new file mode 100644
index 0000000..f738200
Binary files /dev/null and b/docs/ryo_1.png differ
diff --git a/docs/ryo_2.png b/docs/ryo_2.png
new file mode 100644
index 0000000..2a1f30b
Binary files /dev/null and b/docs/ryo_2.png differ
diff --git a/public/avatar.png b/public/avatar.png
deleted file mode 100644
index e0145e8..0000000
Binary files a/public/avatar.png and /dev/null differ
diff --git a/public/bocchi_1.png b/public/bocchi_1.png
new file mode 100644
index 0000000..0381964
Binary files /dev/null and b/public/bocchi_1.png differ
diff --git a/public/bocchi_2.png b/public/bocchi_2.png
new file mode 100644
index 0000000..06c5932
Binary files /dev/null and b/public/bocchi_2.png differ
diff --git a/public/kita_1.png b/public/kita_1.png
new file mode 100644
index 0000000..4f5abae
Binary files /dev/null and b/public/kita_1.png differ
diff --git a/public/kita_2.png b/public/kita_2.png
new file mode 100644
index 0000000..ee85a6d
Binary files /dev/null and b/public/kita_2.png differ
diff --git a/public/nijika_1.png b/public/nijika_1.png
new file mode 100644
index 0000000..547eb0c
Binary files /dev/null and b/public/nijika_1.png differ
diff --git a/public/nijika_2.png b/public/nijika_2.png
new file mode 100644
index 0000000..861fbe0
Binary files /dev/null and b/public/nijika_2.png differ
diff --git a/public/ryo_1.png b/public/ryo_1.png
new file mode 100644
index 0000000..f738200
Binary files /dev/null and b/public/ryo_1.png differ
diff --git a/public/ryo_2.png b/public/ryo_2.png
new file mode 100644
index 0000000..2a1f30b
Binary files /dev/null and b/public/ryo_2.png differ
diff --git a/src/data/avatar.ts b/src/data/avatar.ts
new file mode 100644
index 0000000..a11543f
--- /dev/null
+++ b/src/data/avatar.ts
@@ -0,0 +1,6 @@
+export const AVATAR_FILES = {
+    bocchi: ['bocchi_1.png', 'bocchi_2.png'],
+    kita: ['kita_1.png', 'kita_2.png'],
+    nijika: ['nijika_1.png', 'nijika_2.png'],
+    ryo: ['ryo_1.png', 'ryo_2.png'],
+}
\ No newline at end of file
diff --git a/src/data/defaultStyle.ts b/src/data/defaultStyle.ts
index 6073066..a96ace6 100644
--- a/src/data/defaultStyle.ts
+++ b/src/data/defaultStyle.ts
@@ -47,898 +47,5 @@ const style : {[key:string]:Partial<CSSStyleDeclaration>} = {
 }
 export const defaultStyle: {
     [key: string]: {[key: string]: Partial<CSSStyleDeclaration>}
-} = {
-    "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"
-        }
-    }
-}
+} = {"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":"#FF427B99","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"},"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":"#FFD6D6FF","backgroundColor":"#FF333399","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"},"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"},"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"},"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"}}}
 //{"Normal": style,"Member": style,"Moderator": style,"Owner": style}
\ No newline at end of file
diff --git a/src/index.scss b/src/index.scss
index 24c2daf..38051f7 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -369,15 +369,17 @@ yt-live-chat-text-message-renderer {
         width: 100%;
         top: 0;
         left: 0;
-        background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%);
+        background: linear-gradient(270deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 100%);
         user-select: none;
         pointer-events: none;
         display: none;
         justify-content: end;
         align-items: center;
-        color: white;
+        color: #ffffff90;
         padding-right: 10px;
         box-sizing: border-box;
+        font-weight: 700;
+        font-size: 1.2rem;
     }
     #author-photo {
         overflow: hidden;
diff --git a/src/main.ts b/src/main.ts
index cfceffe..53d9c17 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -17,10 +17,10 @@ const PANEL_MAP = new Map<string, StylePanel>();
 
 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: 'Shift + Left Click on Role list to select multiple role, edit selected role settings in once.', 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'})
+  .send({name: 'ひとり', message: 'Hover mouse on the message will show the author role info.', role: 'Normal'})
+  .send({name: '郁代', message: 'Shift + Left Click on Role list to select multiple role, edit selected role settings in once.', role: 'Member'})
+  .send({name: 'リョウ', 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: '虹夏', message: 'Try to send message for test your design.', role: 'Owner'})
 
 init();
 
diff --git a/src/structure/YouTubeMessage.ts b/src/structure/YouTubeMessage.ts
index 83fdb47..8432a6f 100644
--- a/src/structure/YouTubeMessage.ts
+++ b/src/structure/YouTubeMessage.ts
@@ -1,6 +1,7 @@
 import { $Container, $Element } from "fluentx";
 import { StyleModel } from "./StyleModel";
 import { ROLE_MODEL_MAP } from "../main";
+import { AVATAR_FILES } from "../data/avatar";
 
 export interface YouTubeMessageData {
     name: string;
@@ -35,7 +36,7 @@ export class YouTubeMessage extends $Container {
             ]),
             this.$hint,
             this.$avatar.content([
-                $('img').src('/avatar.png')
+                $('img').src(`/${this.avatar_url}`)
             ]),
             this.$content.content([
                 this.$timestamp,
@@ -98,4 +99,13 @@ export class YouTubeMessage extends $Container {
             display: 'block'
         })
     }
+
+    private get avatar_url() {
+        const array = this.data.role === 'Normal' ? AVATAR_FILES.bocchi
+            : this.data.role === 'Member' ? AVATAR_FILES.kita
+            : this.data.role === 'Moderator' ? AVATAR_FILES.ryo
+            : AVATAR_FILES.nijika;
+        
+        return array[Math.floor(Math.random() * array.length)]
+    }
 }
\ No newline at end of file