commit a79c1c599c37a989ab468e630c4c8f3c590914ff
Author: defaultkavy <defaultkavy@gmail.com>
Date:   Sat Mar 30 18:39:39 2024 +0800

    publish

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