@3r1s_s/erisui 1.0.5

package/dist/erisui.js

@@ -0,0 +1,1060 @@
+(function(p,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(p=typeof globalThis<"u"?globalThis:p||self,g(p.eui={}))})(this,(function(p){"use strict";class g extends HTMLElement{static get observedAttributes(){return["size","border-radius","name","color"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                :host {
+                    aspect-ratio: 1 / 1;
+                    width: fit-content;
+
+                    user-select: none;
+                    -webkit-user-select: none;
+                    -webkit-user-drag: none;
+                    -webkit-user-modify: none;
+                    -webkit-highlight: none;
+                    -webkit-tap-highlight-color: transparent;
+                }
+
+                .avatar {
+                    width: 32px;
+                    height: 100%;
+                    aspect-ratio: 1 / 1;
+
+                    border-radius: var(--border-radius, 50%);
+                    overflow: hidden;
+                    box-shadow: inset 0 0 0 1px #ffffff25;
+
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    background-color: #000;
+                    color: #fff;
+                    font-weight: 500;
+                    font-size: 1.2rem;
+                    text-transform: uppercase;
+                }
+
+                ::slotted(img) {
+                    width: 100%;
+                    height: 100%;
+                    border-radius: var(--border-radius, 50%);
+                    object-fit: cover;
+                    display: block;
+                }
+            </style>
+            <div class="avatar">
+                <slot></slot>
+                <span id="initials"></span>
+            </div>
+        `}connectedCallback(){this.avatar=this.shadowRoot.querySelector(".avatar"),this.initials=this.shadowRoot.querySelector("#initials");const t=this.shadowRoot.querySelector("slot"),i=t&&t.assignedNodes().length>0;if(i){const e=t.assignedNodes()[0];e&&e.tagName==="IMG"&&(this.initials.style.display="none",this.avatar.style.backgroundColor="transparent")}else this.hasAttribute("color")&&(this.avatar.style.backgroundColor=this.getAttribute("color"));if(this.hasAttribute("color")&&(this.avatar.style.backgroundColor=this.getAttribute("color")),this.hasAttribute("size")){const e=this.getAttribute("size");this.avatar.style.width=e+"px",this.avatar.style.height=e+"px",this.initials.style.fontSize=e/2+"px"}if(this.hasAttribute("border-radius")&&(this.avatar.style.borderRadius=this.getAttribute("border-radius")+"px"),this.hasAttribute("name")&&(this.avatar.title=this.getAttribute("name")),!i&&this.hasAttribute("name")){const r=this.getAttribute("name").trim().split(/\s+/);let s="";r.length===1?s=r[0][0]||"":s=(r[0][0]||"")+(r[r.length-1][0]||""),this.initials.textContent=s.toUpperCase()}}}customElements.define("eui-avatar",g);const k=new Map;class C extends HTMLElement{static get observedAttributes(){return["name","width","height"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(t,i,e){i!==e&&this.render()}async render(){const t=this.getAttribute("name");if(!t)return;let i=k.get(t);if(!i)try{const a=await fetch(`/icons/${t}.svg`);if(a.ok)i=await a.text(),k.set(t,i);else{console.error(`Icon "${t}" not found`),this.shadowRoot.innerHTML='<span style="color:red;">?</span>';return}}catch(a){console.error(`Error loading icon "${t}":`,a),this.shadowRoot.innerHTML='<span style="color:red;">?</span>';return}const e=document.createElement("template");e.innerHTML=i.trim();const r=e.content.cloneNode(!0),s=r.firstElementChild;if(s&&s.style){const a=this.getAttribute("width"),l=this.getAttribute("height");a&&s.setAttribute("width",a),l&&s.setAttribute("height",l),s.style.display="block"}this.shadowRoot.innerHTML="",this.shadowRoot.appendChild(r)}}customElements.define("eui-icon",C);class L extends HTMLElement{static get observedAttributes(){return["label","value","id","type","filled"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                .form {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 12px;
+                    width: 100%;
+                    max-width: 300px;
+                    margin: 0.75rem 0;
+                    position: relative;
+                }
+
+                .form-input {
+                    padding: 5px 10px;
+                    border-radius: 5px;
+                    width: 100%;
+                    box-sizing: border-box;
+                    font-size: 1em;
+                    font-family: inherit;
+                    height: 52px;
+                    background: var(--app-100, #111);
+                    outline: none;
+                    border: 1px solid var(--app-300, #2196F3);
+                    caret-color: var(--app-text);
+                    color: var(--app-text);
+                    transition: border .15s ease-out;
+                }
+
+                .filled.form .form-input {
+                    background: var(--app-200, #222);
+                    padding-bottom: 0;
+                    padding-top: 0.6rem;
+                    border: none;
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                    border-bottom: 1px solid var(--app-300, #333);
+                }
+
+                .form-input:focus {
+                    border: 1px solid var(--app-blue, #2196F3);
+                }
+
+                .filled.form .form-input:focus {
+                    border-bottom: 2.5px solid var(--app-blue, #2196F3);
+                }
+
+                .form {
+                    --form-inactive-top: 14.5px;
+                    --form-inactive-left: 6px;
+
+                    --form-active-top: -10px;
+                    --form-active-left: 5px;
+                }
+
+                .filled.form {
+                    --form-active-top: 3px;
+                    --form-active-left: 6px;
+                }
+
+                .form label {
+                    transition: all .15s ease-out;
+                    color: var(--app-400, #999);
+                    background: var(--app-100, #111);
+                    pointer-events: none;
+                    display: block;
+                    padding: 0 .25rem;
+                    position: absolute;
+                    left: var(--form-inactive-left);
+                    top: var(--form-inactive-top);
+                    border-radius: 5px;
+                    width: fit-content;
+
+                    user-select: none;
+                    -webkit-user-select: none;
+                }
+
+                .filled.form label {
+                    background: transparent;
+                }
+
+                .form-input:focus+label,
+                .form-input:not(:placeholder-shown)+label,
+                .form-input.filled+label,
+                .form.always-active label {
+                    top: var(--form-active-top);
+                    left: var(--form-active-left);
+                    font-size: .75em;
+                }
+
+                .form-input:focus+label {
+                    font-weight: 600;
+                    color: var(--app-blue, #2196F3);
+                    width: auto;
+                }
+            </style>
+
+            <div class="form">
+                <input class="form-input" placeholder=" ">
+                <label></label>
+            </div>
+        `}connectedCallback(){this.form=this.shadowRoot.querySelector(".form"),this.inputEl=this.shadowRoot.querySelector(".form-input"),this.labelEl=this.shadowRoot.querySelector("label"),this.hasAttribute("value")&&(this.inputEl.value=this.getAttribute("value")),this.hasAttribute("id")&&(this.inputEl.id=this.getAttribute("id")),this.hasAttribute("label")&&(this.labelEl.textContent=this.getAttribute("label")),this.hasAttribute("type")&&(this.inputEl.type=this.getAttribute("type")),this.hasAttribute("filled")&&this.form.classList.add("filled"),this.inputEl.addEventListener("input",()=>{this.setAttribute("value",this.inputEl.value)})}attributeChangedCallback(t,i,e){if(!(!this.inputEl||!this.labelEl))switch(t){case"value":this.inputEl.value!==e&&(this.inputEl.value=e);break;case"id":this.inputEl.id=e;break;case"label":this.labelEl.textContent=e;break}}get value(){return this.inputEl.value}set value(t){this.setAttribute("value",t)}}customElements.define("eui-input",L);class T extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                .loader {
+                    width: 24px;
+                    height: 24px;
+                    display: inline-block;
+                    position: relative;
+                }
+
+                .loader-icon {
+                    stroke: var(--app-accent, #2196F3);
+                    fill: none;
+                    stroke-width: 2px;
+                    stroke-linecap: round;
+                    transform-origin: 50% 50%;
+                    transform: rotate(-90deg);
+                    transition: all 0.2s ease-in-out 0s;
+                    animation: 2s linear 0s infinite normal none running loader-spin;
+                }
+
+                .loader-icon {
+                    stroke: var(--app-text, #F2F3F6);
+                }
+
+                @keyframes loader-spin {
+                    0% {
+                        stroke-dasharray: 0.01px, 43.97px;
+                        transform: rotate(0deg)
+                    }
+
+                    50% {
+                        stroke-dasharray: 21.99px, 21.99px;
+                        transform: rotate(450deg)
+                    }
+
+                    100% {
+                        stroke-dasharray: 0.01px, 43.97px;
+                        transform: rotate(1080deg)
+                    }
+                }
+            </style>
+
+            <span class="loader animate">
+                <svg viewBox="0 0 16 16"><circle class="loader-icon" cx="8px" cy="8px" r="7px"></circle></svg>
+            </span>
+        `}}customElements.define("eui-loader",T);class M extends HTMLElement{static get observedAttributes(){return["value","intermediate","id"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                .progressbar {
+                    width: 100%;
+                    height: 5px;
+                    overflow: hidden;
+                    position: relative;
+                    background: var(--app-300, #333);
+                    border-radius: 4px;
+                }
+
+                .progress {
+                    display: block;
+                    height: 100%;
+                    background: var(--app-accent, #2196F3);
+                    border-radius: 4px;
+                    transition: width 0.3s ease-in-out;
+                }
+
+                .progress.intermediate {
+                    height: 100%;
+                    transform-origin: 0% 50%;
+                    transition-property: background;
+                    animation: progressbar-indeterminate 1s infinite linear;
+                }
+
+                @keyframes progressbar-indeterminate {
+                    0% {
+                        transform: translateX(0) scaleX(0)
+                    }
+
+                    40% {
+                        transform: translateX(0) scaleX(0.5)
+                    }
+
+                    100% {
+                        transform: translateX(100%) scaleX(0.3)
+                    }
+                }
+            </style>
+
+            <div class="progressbar">
+                <span class="progress"></span>
+            </div>
+        `}set value(t){this.setAttribute("value",t)}attributeChangedCallback(){this.connectedCallback()}connectedCallback(){const t=this.shadowRoot.querySelector(".progress");this.hasAttribute("id")&&(this.progress.id=this.getAttribute("id")),this.hasAttribute("intermediate")&&t.classList.add("intermediate"),this.hasAttribute("value")&&(t.style.width=this.getAttribute("value")+"%")}}customElements.define("eui-progressbar",M);const m={is:{iPhone:/iPhone/.test(navigator.userAgent),iPad:/iPad/.test(navigator.userAgent),iOS:/iPhone|iPad|iPod/.test(navigator.userAgent),android:/Android/.test(navigator.userAgent),mobile:/Mobi|Android/i.test(navigator.userAgent)},prefers:{language:navigator.language||navigator.userLanguage,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,reducedTransparency:window.matchMedia("(prefers-reduced-transparency: reduce)").matches},supports:{share:typeof navigator.share=="function",directDownload:"download"in document.createElement("a"),haptics:"vibrate"in navigator||"Vibrate"in window||typeof window.navigator.vibrate=="function"},userAgent:navigator.userAgent},z=Object.freeze(Object.defineProperty({__proto__:null,device:m},Symbol.toStringTag,{value:"Module"}));function R(){try{const o=document.createElement("label");o.ariaHidden="true",o.style.display="none";const t=document.createElement("input");t.type="checkbox",t.setAttribute("switch",""),o.appendChild(t),document.head.appendChild(o),o.click(),document.head.removeChild(o)}catch{}}function v(o){m.supports.haptics?navigator.vibrate(o||50):m.is.iPhone&&R()}const $=Object.freeze(Object.defineProperty({__proto__:null,haptic:v},Symbol.toStringTag,{value:"Module"})),E=(()=>{let o={},t;try{o=JSON.parse(localStorage.getItem(t)||"{}")}catch(i){console.error(i)}return{get(i){return o[i]},set(i,e){o[i]=e,localStorage.setItem(t,JSON.stringify(o))},delete(i){delete o[i],localStorage.setItem(t,JSON.stringify(o))},all(){return o},clear(){o={},localStorage.setItem(t,JSON.stringify(o))},name(i){t=i;try{o=JSON.parse(localStorage.getItem(t)||"{}")}catch(e){console.error(e)}},settings:{get(i){return o&&o.settings&&o.settings[i]},set(i,e){o.settings||(o.settings={}),o.settings[i]=e,localStorage.setItem(t,JSON.stringify(o))},delete(i){o.settings&&(delete o.settings[i],localStorage.setItem(t,JSON.stringify(o)))},all(){return o.settings||{}},clear(){o.settings&&(o.settings={},localStorage.setItem(t,JSON.stringify(o)))}}}})(),A=E.settings,H=Object.freeze(Object.defineProperty({__proto__:null,settings:A,storage:E},Symbol.toStringTag,{value:"Module"}));class _ extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                .switch {
+                    background-color: var(--app-200);
+                    border-radius: 16px;
+
+                    box-shadow: inset 0px 0px 0px 2px var(--app-400);
+                    width: 52px;
+                    height: 32px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    position: relative;
+                }
+
+                .switch.selected {
+                    background-color: #B8C4FF;
+                    box-shadow: none;
+                }
+
+                .handle {
+                    width: 16px;
+                    height: 16px;
+                    border-radius: 50%;
+                    background-color: var(--app-900);
+                    margin-inline-start: 0;
+                    margin-inline-end: calc(52px - 32px);
+
+                    transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275),
+                    width 250ms cubic-bezier(0.2, 0, 0, 1),
+                    height 250ms cubic-bezier(0.2, 0, 0, 1);
+
+                    pointer-events: none;
+                    user-select: none;
+                }
+
+                .switch.selected .handle {
+                    background-color: #5F7AFF;
+                    margin-inline-start: calc(52px - 32px);
+                    margin-inline-end: 0;
+                    width: 24px;
+                    height: 24px;
+                }
+
+                .switch:active .handle {
+                    width: 28px;
+                    height: 28px;
+                }
+
+                input {
+                    appearance: none;
+                    opacity: 0;
+                    height: max(100%, var(--eui-switch-touch-target-size, 48px));
+                    width: max(100%, var(--eui-switch-touch-target-size, 48px));
+                    position: absolute;
+                    margin: 0;
+                    cursor: inherit;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    z-index: 2;
+                }
+            </style>
+
+            <div class="switch">
+                <input type="checkbox" role="switch">
+                <span class="handle"></span>
+            </div>
+        `}connectedCallback(){this.inputEl=this.shadowRoot.querySelector("input"),this.switchEl=this.shadowRoot.querySelector(".switch"),this.updateFromAttribute(),this.switchEl.addEventListener("click",()=>this.toggle())}toggle(){this.selected=!this.selected,v()}updateFromAttribute(){const t=this.hasAttribute("selected");this.inputEl.checked=t,this.switchEl.classList.toggle("selected",t)}attributeChangedCallback(t,i,e){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-switch",_);class I extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.innerHTML=`
+            <style>
+                :host {
+                    display: inline-flex;
+                    align-items: center;
+                    gap: 4px;
+                    padding: 4px 8px;
+                    border-radius: 8px;
+                    border: 2px solid var(--app-400);
+                    font-weight: 500;
+                    font-size: 1rem;
+                    position: relative;
+                    color: var(--app-text);
+                    overflow: hidden;
+                    z-index: 1;
+
+                    user-select: none;
+                    -webkit-user-select: none;
+                    -webkit-user-drag: none;
+                    -webkit-user-modify: none;
+                    -webkit-highlight: none;
+                    -webkit-tap-highlight-color: transparent;
+                }
+
+                .ripple {
+                    position: absolute;
+                    border-radius: 50%;
+                    transform: scale(0);
+                    filter: blur(4px);
+                    opacity: 0.2;
+                    animation: ripple 600ms linear;
+                    background-color: var(--app-400); 
+                    pointer-events: none;
+                    z-index: -1;
+                }
+
+                @keyframes ripple {
+                    to {
+                        transform: scale(4);
+                        opacity: 0;
+                        filter: blur(10px);
+                    }
+                }
+            </style>
+            <slot></slot>
+        `,this.addEventListener("pointerdown",t=>{const i=document.createElement("span"),e=t.currentTarget,r=Math.max(e.offsetWidth,e.offsetHeight);i.classList.add("ripple"),i.style.left=t.clientX-e.getBoundingClientRect().left-r/2+"px",i.style.top=t.clientY-e.getBoundingClientRect().top-r/2+"px",i.style.width=r+"px",i.style.height=r+"px",this.shadowRoot.appendChild(i),setTimeout(()=>{i.remove()},600)})}}customElements.define("eui-chip",I);const f="",x=(()=>{const o=[];function t(n,d){const h=[],b=n.replace(/:([^/]+)/g,(w,y)=>(h.push(y),"([^/]+)")).replace(/\//g,"\\/"),u=new RegExp(`^${f}${b}$`);o.push({regex:u,paramNames:h,renderFn:d})}function i(n){for(const{regex:d,paramNames:h,renderFn:b}of o){const u=n.match(d);if(u){const w={};return h.forEach((y,K)=>{w[y]=decodeURIComponent(u[K+1])}),{renderFn:b,params:w}}}return null}function e(n,d=!0){n.startsWith(f)||(n=f+(n.startsWith("/")?"":"/")+n);const h=n.split(/[?#]/)[0];if(h===window.location.pathname&&n.includes("#")){d&&history.pushState({},"",n);const u="#"+n.split("#")[1];r(u);return}const b=i(h);if(b)if(d&&history.pushState({},"",n),b.renderFn(b.params),window.dispatchEvent(new CustomEvent("route-changed",{detail:{path:n}})),n.includes("#")){const u="#"+n.split("#")[1];setTimeout(()=>r(u),100)}else{const u=document.getElementById("main");u&&u.scrollTo(0,0)}else s?(d&&history.pushState({},"",n),s()):console.warn(`No route found for ${h}`)}function r(n){if(n)try{const d=document.querySelector(n);d&&d.scrollIntoView({behavior:"smooth"})}catch{console.warn("Invalid hash:",n)}}let s=null;function a(n){s=n}function l(){history.back()}function c(){return window.location.pathname.replace(f,"")||"/"}return window.addEventListener("popstate",()=>{const n=window.location.pathname+window.location.search+window.location.hash;e(n,!1)}),window.addEventListener("click",n=>{if(n.button!==0||n.metaKey||n.altKey||n.ctrlKey||n.shiftKey)return;const d=n.target.closest("a");if(!d||d.hasAttribute("download")||d.getAttribute("target")==="_blank")return;const h=d.getAttribute("href");if(!(!h||h.startsWith("http")&&!h.startsWith(window.location.origin))){if(n.preventDefault(),h.startsWith("#")){history.pushState({},"",h),r(h);return}e(h)}}),{add:t,navigate:e,back:l,location:c,setNotFound:a}})();async function F(o){try{const t=document.getElementById("main");t.classList.add("fade-out"),await new Promise(e=>setTimeout(e,200));const i=await fetch(`/src/pages/${o}.html`).then(e=>e.text());t.innerHTML=i,t.classList.remove("fade-out"),t.classList.add("fade-in"),window.location.hash?setTimeout(()=>{try{const e=document.querySelector(window.location.hash);e&&e.scrollIntoView({behavior:"smooth"})}catch{}},100):t&&t.scrollTo(0,0),setTimeout(()=>{t.classList.remove("fade-in")},200)}catch(t){console.error("Page load failed:",t)}}class q extends HTMLElement{static get observedAttributes(){return["path","icon","label","badge","active","avatar-src","avatar-name"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.hasRendered||(this.render(),this.setupEventListeners(),this.hasRendered=!0),this.updateContent(),this.addEventListener("click",this.handleClick)}disconnectedCallback(){this.removeEventListener("click",this.handleClick)}attributeChangedCallback(t,i,e){if(i!==e&&this.hasRendered){if(t==="active")return;this.updateContent()}}handleClick=()=>{const t=this.getAttribute("path");t&&x.navigate(t)};setupEventListeners(){this.addEventListener("pointerdown",t=>{const i=document.createElement("span"),e=t.currentTarget,r=e.getBoundingClientRect(),s=Math.max(e.offsetWidth,e.offsetHeight),a=s/2;i.classList.add("ripple"),i.style.width=`${s}px`,i.style.height=`${s}px`,i.style.left=`${t.clientX-r.left-a}px`,i.style.top=`${t.clientY-r.top-a}px`,this.shadowRoot.appendChild(i),i.addEventListener("animationend",()=>{i.remove()})})}updateContent(){const t=this.getAttribute("icon"),i=this.getAttribute("avatar-src"),e=this.getAttribute("avatar-name"),r=this.getAttribute("label")||"",s=this.getAttribute("badge"),a=this.shadowRoot.querySelector(".badge");if(s)if(a)a.textContent=s;else{const n=document.createElement("span");n.className="badge",n.textContent=s,this.shadowRoot.appendChild(n)}else a&&a.remove();const l=this.shadowRoot.querySelector("slot[name='icon']");if(l)if(i||e){let n='<eui-avatar size="24"';e&&(n+=` name="${e}"`),n+=">",i&&(n+=`<img src="${i}" alt="${e||"Avatar"}" />`),n+="</eui-avatar>",l.innerHTML=n}else{const n=l.querySelector("eui-icon");t&&n?n.getAttribute("name")!==t&&n.setAttribute("name",t):t?l.innerHTML=`<eui-icon width="24" height="24" name="${t}"></eui-icon>`:l.innerHTML=""}const c=this.shadowRoot.querySelector(".label");c&&(c.textContent=r)}render(){this.shadowRoot.innerHTML=`
+        <style>
+            :host {
+                position: relative;
+                overflow: hidden;
+                z-index: 1;
+                display: flex;
+                align-items: center;
+                height: 50px;
+                width: 100%;
+                cursor: pointer;
+                border-radius: 100px;
+                justify-content: flex-start;
+                padding: 0 1rem;
+                box-sizing: border-box;
+                transition: background-color 0.2s cubic-bezier(.4, 0, .2, 1), transform 0.2s cubic-bezier(.4, 0, .2, 1);
+                user-select: none;
+                -webkit-user-select: none;
+                color: var(--app-text);
+            }
+
+            :host(:hover) {
+                background-color: var(--app-300);
+            }
+
+            :host(:focus-visible) {
+                outline: 2px solid var(--app-link);
+                outline-offset: 2px;
+            }
+
+            :host([active]) {
+                background-color: color-mix(in srgb, var(--app-link) 25%, transparent 100%);
+                color: var(--app-link);
+            }
+            
+            :host([active]) .label {
+                 font-weight: 600;
+            }
+
+            .icon-container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 28px;
+                height: 28px;
+                flex-shrink: 0;
+                border-radius: 100px;
+            }
+
+            :host([active]) .icon-container eui-avatar {
+                outline: 2px solid var(--app-link);
+                outline-offset: 1px;
+                border-radius: 50%;
+            }
+
+            .label {
+                opacity: var(--nav-item-label-opacity, 0);
+                margin-left: 1rem;
+                display: block;
+                transition: opacity 0.1s ease;
+                white-space: nowrap;
+            }
+
+            .badge {
+                position: absolute;
+                top: 4px;
+                left: calc(32px + 2px);
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                background-color: var(--app-red);
+                color: var(--app-white);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+                font-weight: 600;
+            }
+
+            .ripple {
+                position: absolute;
+                border-radius: 50%;
+                transform: scale(0);
+                opacity: 0.2;
+                animation: ripple 600ms linear forwards;
+                background-color: currentColor; 
+                pointer-events: none;
+                z-index: -1;
+                will-change: transform, opacity;
+            }
+
+            @keyframes ripple {
+                to {
+                    transform: scale(4);
+                    opacity: 0;
+                }
+            }
+        </style>
+
+        <div class="icon-container">
+            <slot name="icon">
+                 <eui-icon width="24" height="24" name=""></eui-icon>
+            </slot>
+        </div>
+        <span class="label"></span>
+        `}}customElements.define("eui-nav-item",q);class j extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),window.addEventListener("route-changed",()=>this.updateActiveState()),window.addEventListener("toggle-nav",()=>this.classList.toggle("expanded"))}render(){this.shadowRoot.innerHTML=`
+        <style>
+            :host {
+                position: fixed;
+                top: var(--titlebar-height, 65px);
+                left: 0;
+                height: calc(100% - var(--titlebar-height, 65px));
+                z-index: 100;
+
+                width: var(--nav-width, 75px);
+                transition: width 0.2s cubic-bezier(0.2, 0, 0, 1);
+            }
+
+            :host(.expanded) {
+                width: var(--nav-expanded-width, 250px);
+                --nav-item-label-opacity: 1;
+            }
+
+            .app-nav-container {
+                width: 100%;
+                height: 100%;
+                box-sizing: border-box;
+                background-color: var(--app-200);
+                overflow-x: hidden;
+                display: flex;
+                flex-direction: column;
+            }
+
+            .nav-items {
+                display: flex;
+                flex-direction: column;
+                gap: 0.5rem;
+                padding: 0.5rem;
+                box-sizing: border-box;
+                overflow-y: auto;
+                overflow-x: hidden;
+            }
+
+            .menu-button {
+                border: none;
+                background-color: transparent;
+                cursor: pointer;
+                width: 42px;
+                height: 42px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                border-radius: 50%;
+                color: inherit;
+            }
+
+            .menu-button:hover {
+                background-color: var(--app-300);
+                box-shadow: 0 0 2px 0 #00000011;
+            }
+
+            .menu-button:active {
+                transform: scale(0.95);
+            }
+
+            .menu-button:focus-visible {
+                outline: 2px solid var(--app-link);
+                outline-offset: 2px;
+            }
+
+            #skip_navigation_link {
+                position: fixed;
+                top: -100px;
+                left: -100px;
+                z-index: 1001;
+                width: 1px;
+                height: 1px;
+                overflow: hidden;
+                clip: rect(0, 0, 0, 0);
+                border: 0;
+                padding: 0;
+                margin: 0;
+            }
+
+            #skip_navigation_link:focus {
+                top: 0;
+                left: 0;
+                overflow: visible;
+                clip: auto;
+                border: 1px dotted;
+                padding: 4px 8px;
+                margin: 4px;
+                width: 80px;
+                height: auto;
+                background-color: var(--app-link);
+                color: var(--app-white);
+                text-align: center;
+            }
+        </style>
+
+        <div class="app-nav-container">
+            <a href="#content" id="skip_navigation_link">Skip To Content</a>
+            <div class="nav-items">
+                ${this.navItems.map(t=>{if(t.type==="divider")return'<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';const i=t.avatar?.src||"",e=t.avatar?.name||"";return`<eui-nav-item path="${t.path}" icon="${t.icon}" avatar-src="${i}" avatar-name="${e}" label="${t.label}"></eui-nav-item>`}).join("")}
+            </div>
+        </div>
+        `}set navItems(t){this._navItems=t,this.render(),this.updateActiveState()}get navItems(){return this._navItems||[]}updateActiveState(t){t||(t=x.location()),t.startsWith("/")||(t="/"+t),this.shadowRoot.querySelectorAll("eui-nav-item").forEach(e=>{e.getAttribute("path")===t?e.setAttribute("active",""):e.removeAttribute("active")})}}customElements.define("eui-app-nav",j);class N extends HTMLElement{static get observedAttributes(){return["type","title","subtitle","img"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                :host {
+                    border-radius: 24px;
+                    background: var(--app-200, #111);
+                    color: var(--app-text, #FFF);
+                    overflow: hidden;
+                    display: block;
+                }
+
+                .header {
+                    min-height: 180px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    padding: 48px;
+                    box-sizing: border-box;
+                    position: relative;
+                }
+
+                .hero {
+                    min-height: 280px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: flex-end;
+                    color: #fff;
+                    background: #333;
+                }
+
+                .img {
+                    position: absolute;
+                    inset: 0;
+                    background-size: cover;
+                    background-position: center;
+                    z-index: 0;
+                    opacity: .5;
+                }
+
+                .content {
+                    position: relative;
+                    z-index: 1;
+                }
+
+                h1 {
+                    margin: 0 0 8px;
+                    font-size: 3rem;
+                }
+
+                .large h1, .hero h1 {
+                    font-size: 5.5rem;
+                }
+
+                .small h1 {
+                    font-size: 2rem;
+                    margin: 0;
+                }
+
+                .small p {
+                    margin: 0;
+                }
+            </style>
+
+            <div class="header">
+                <div class="img"></div>
+                <div class="content">
+                    <h1></h1>
+                    <p></p>
+                </div>
+            </div>
+        `}connectedCallback(){this.hd=this.shadowRoot.querySelector(".header"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}attributeChangedCallback(t,i,e){const r=this.shadowRoot.querySelector("h1"),s=this.shadowRoot.querySelector("p"),a=this.shadowRoot.querySelector(".img");t==="title"&&(r.textContent=e),t==="subtitle"&&(s.textContent=e),t==="img"&&(a.style.backgroundImage=e?`url(${e})`:"")}}customElements.define("eui-header",N);class B extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+            <style>
+                :host {
+                    display: block;
+                    position: relative;
+                    cursor: pointer;
+                    width: 24px;
+                    height: 24px;
+                }
+
+                .checkbox {
+                    position: relative;
+                    width: 24px;
+                    height: 24px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 4px;
+                    box-shadow: inset 0px 0px 0px 2px var(--app-400);
+
+                    color: #fff;
+                }
+
+                .checkbox.selected, .checkbox.indeterminate {
+                    background-color: var(--app-accent);
+                    box-shadow: none;
+                }
+
+                input {
+                    appearance: none;
+                    opacity: 0;
+                    height: max(100%, var(--eui-switch-touch-target-size, 48px));
+                    width: max(100%, var(--eui-switch-touch-target-size, 48px));
+                    position: absolute;
+                    margin: 0;
+                    cursor: inherit;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    z-index: 2;
+                }
+
+                .mark.long {
+                    height:2px;
+                    transition-property:transform,width;
+                    width:0px;
+                }
+
+                .mark.short {
+                    height: 2px;
+                    transition-property: transform,height;
+                    width: 0px;
+                }
+
+                .mark {
+                    fill: #fff;
+                    transform: scaleY(-1) translate(7px, -14px) rotate(45deg);
+                }
+
+                .selected .mark.long {
+                    animation-duration: 350ms;
+                    animation-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
+                    transition-duration: 350ms;
+                    transition-timing-function: cubic-bezier(0.05, 0.7, 0.1, 1);
+                }
+
+                .selected .mark.short {
+                    width: 2px;
+                    height: 5.6568542495px;
+                }
+
+                .selected .mark.long{
+                    width: 11.313708499px;
+                }
+            </style>
+
+            <div class="checkbox">
+                <input type="checkbox" role="checkbox">
+                <svg class="icon" viewBox="0 0 18 18" aria-hidden="true">
+                    <rect class="mark short"></rect>
+                    <rect class="mark long"></rect>
+                </svg>
+            </div>
+        `}connectedCallback(){this.inputEl=this.shadowRoot.querySelector("input"),this.checkEl=this.shadowRoot.querySelector(".checkbox"),this.updateFromAttribute(),this.checkEl.addEventListener("click",()=>this.toggle())}toggle(){this.selected=!this.selected,v();const t=this.selected,i=this.dataset.setting;i&&A.set(i,t)}updateFromAttribute(){const t=this.hasAttribute("selected");this.inputEl.checked=t,this.checkEl.classList.toggle("selected",t)}attributeChangedCallback(t,i,e){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-checkbox",B);class O extends HTMLElement{static observedAttributes=["type","width","height","border-radius","icon","link","href"];constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){const t=this.getAttribute("href"),i=t?"a":"button";this.shadowRoot.innerHTML=`
+            <style>
+                button, a {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    gap: 0.25rem;
+                    padding: 0.5rem 1rem;
+                    font-size: 1rem;
+                    font-weight: 600;
+                    font-family: inherit;
+                    border-radius: 0.6rem;
+                    border: none;
+                    background: var(--app-300);
+                    color: var(--app-text, #FFF);
+                    cursor: pointer;
+                    box-sizing: border-box;
+                    text-decoration: none;
+
+                    width: fit-content;
+
+                    user-select: none;
+                    -webkit-user-select: none;
+                    -moz-user-select: none;
+                    -ms-user-select: none;
+
+                    transition: background 0.2s cubic-bezier(.2,0,0,1);
+
+                    position: relative;
+                    overflow: hidden;
+                }
+
+                button:hover, a:hover {
+                    background: var(--app-400);
+                    text-decoration: none;
+                }
+
+                .light button, .light a {
+                    background: var(--app-500);
+                }
+
+                button.filled, a.filled {
+                    background: var(--app-accent-100);
+                    color: #fff;
+                }
+
+                button.filled:hover, a.filled:hover {
+                    background: var(--app-accent-50);
+                }
+
+                button.outlined, a.outlined {
+                    background: transparent;
+                    box-shadow: inset 0 0 0 2px var(--app-400);
+                    color: var(--app-accent-100);
+                }
+
+                button.outlined:hover, a.outlined:hover {
+                    background: var(--app-300);
+                }
+
+                button.icon, a.icon {
+                    padding: 0.5rem;
+                    border-radius: 50%;
+                }
+
+                button.transparent, a.transparent {
+                    background: transparent;
+                    color: var(--app-text);
+                }
+
+                button.transparent:hover, a.transparent:hover {
+                    background: var(--app-300);
+                }
+
+                button:disabled, a[disabled] {
+                    opacity: 0.5;
+                    cursor: not-allowed;
+                }
+
+                button.link, a.link {
+                    text-decoration: none;
+                }
+
+                .ripple {
+                    position: absolute;
+                    border-radius: 50%;
+                    transform: scale(0);
+                    opacity: 0.2;
+                    animation: ripple 600ms linear forwards;
+                    background-color: currentColor;
+                    pointer-events: none;
+                    z-index: 10;
+                    will-change: transform, opacity;
+                }
+
+                @keyframes ripple {
+                    to {
+                        transform: scale(4);
+                        opacity: 0;
+                    }
+                }
+
+            </style>
+            <${i}>
+                <slot></slot>
+            </${i}>
+        `;const e=this.shadowRoot.querySelector(i);t&&e.setAttribute("href",t),this.hasAttribute("type")&&e.classList.add(this.getAttribute("type")),this.hasAttribute("icon")&&e.classList.add("icon"),this.hasAttribute("width")&&(e.style.width=this.getAttribute("width")+"px"),this.hasAttribute("height")&&(e.style.height=this.getAttribute("height")+"px"),this.hasAttribute("border-radius")&&(e.style.borderRadius=this.getAttribute("border-radius")+"px"),e.addEventListener("pointerdown",r=>{const s=document.createElement("span"),a=r.currentTarget,l=a.getBoundingClientRect(),c=Math.max(a.offsetWidth,a.offsetHeight),n=c/2;s.classList.add("ripple"),s.style.width=`${c}px`,s.style.height=`${c}px`,s.style.left=`${r.clientX-l.left-n}px`,s.style.top=`${r.clientY-l.top-n}px`,e.appendChild(s),s.addEventListener("animationend",()=>{s.remove()})})}}customElements.define("eui-button",O);class P extends HTMLElement{static get observedAttributes(){return["type","anchor"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.hd=this.shadowRoot.querySelector(".hd"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}render(){this.shadowRoot.innerHTML=`
+            <style>
+                :host {
+                    display: block;
+                    position: relative;
+                    margin: 16px 0;
+                }
+
+                .hd {
+                    font-size: 2.5rem;
+                    font-weight: 600;
+                    margin: 0;
+                }
+
+                .h2 {
+                    font-size: 2rem;
+                }
+
+                .h3 {
+                    font-size: 1.5rem;
+                }
+
+                .anchor {
+                    position: absolute;
+                    width: 100%;
+                    height: 100%;
+
+                    inset: 0;
+                    inset-inline-start: -24px;
+                    opacity: 0;
+                    transition: opacity .25s var(--transition-function);
+
+                    display: flex;
+                    align-items: center;
+
+                    text-decoration: none;
+                    color: var(--app-accent);
+                    font-size: 1.5rem;
+                }
+
+                .anchor:hover {
+                    opacity: 1;
+                }
+
+                .anchor-hash {
+                    margin-inline-end: 8px;
+                    font-weight: 700;
+                }
+            </style>
+
+            <span class="hd">
+                <slot></slot>
+            </span>
+            ${this.getAttribute("anchor")?`
+            <a class="anchor" href="#${this.getAttribute("anchor")}" id="${this.getAttribute("anchor")}">
+                <span class="anchor-hash">#</span>
+            </a>
+            `:""}
+        `}}customElements.define("eui-heading",P);function U(o){const e=Date.now()-o,r=Math.floor(e/1e3),s=Math.floor(r/60),a=Math.floor(s/60),l=Math.floor(a/24),c=Math.floor(l/30),n=Math.floor(c/12);return n>0?`${n}y`:c>0?`${c}mo`:l>0?`${l}d`:a>0?`${a}h`:s>0?`${s}m`:`${r}s`}function D(o){const e=Date.now()-o,r=Math.floor(e/1e3),s=Math.floor(r/60),a=Math.floor(s/60),l=Math.floor(a/24),c=Math.floor(l/30),n=Math.floor(c/12);return n>0?`${n} year${n>1?"s":""} ago`:c>0?`${c} month${c>1?"s":""} ago`:l>0?`${l} day${l>1?"s":""} ago`:a>0?`${a} hour${a>1?"s":""} ago`:s>0?`${s} minute${s>1?"s":""} ago`:`${r} second${r>1?"s":""} ago`}function X(o){return o.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;").replace(/`/g,"&#96;").replace(/'/g,"&#39;")}function S(o){const t=document.createElement("input");t.value=o,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}const W=Object.freeze(Object.defineProperty({__proto__:null,copystr:S,joinedAgo:D,sanitize:X,timeAgo:U},Symbol.toStringTag,{value:"Module"}));class J extends HTMLElement{static get observedAttributes(){return["copy","id","type"]}constructor(){super(),this.attachShadow({mode:"open"}),this._boundCopy=this._onCopy.bind(this),this._isRendered=!1}connectedCallback(){this._isRendered||(this.render(),this._isRendered=!0)}render(){const t=this.hasAttribute("copy");this.shadowRoot.innerHTML=`
+            <style>
+            :host {
+                position: relative;
+                display: block;
+            }
+            
+            pre {
+                padding: 20px;
+                background: var(--app-100);
+                border: 1px solid var(--app-300);
+                border-radius: 20px;
+                font-family: 'Reddit Mono', consolas;
+                overflow-x: auto;
+                line-height: 1.25;
+                white-space: pre;
+            }
+
+            .copy {
+                position: absolute;
+                top: 8px;
+                right: 8px;
+            }
+            pre.g {
+                padding-right: 60px;
+            }
+            </style>
+
+            <eui-button class="copy" width="45" height="45" border-radius="100">
+                <eui-icon name="copy" width="24" height="24"></eui-icon>
+            </eui-button>
+
+            <pre class="${t?"g":""}"><code></code></pre>
+        `,this.copyBtn=this.shadowRoot.querySelector(".copy"),this.codeEl=this.shadowRoot.querySelector("code"),this.codeEl.textContent=this._getFormattedText(),t?this.copyBtn.addEventListener("click",this._boundCopy):this.copyBtn.style.display="none"}_getFormattedText(){let t=this.textContent||"";t=t.replace(/^\s*\n/,"").replace(/\n\s*$/,""),t=t.replace(/[ \t]+$/gm,"");const i=t.split(`
+`),e=i.filter(s=>s.trim()).map(s=>s.match(/^\s*/)[0].length),r=e.length?Math.min(...e):0;return t=i.map(s=>s.slice(r)).join(`
+`),t}_onCopy(){S(this._getFormattedText())}disconnectedCallback(){this.copyBtn&&this.copyBtn.removeEventListener("click",this._boundCopy)}}customElements.define("eui-code",J);class V extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["name"]}attributeChangedCallback(t,i,e){t==="name"&&(this.render(),this.setupEventListeners())}setupEventListeners(){const t=this.shadowRoot.querySelector("#nav-toggle");t&&t.addEventListener("click",()=>{window.dispatchEvent(new CustomEvent("toggle-nav"))})}render(){const t=this.getAttribute("name")||"Title";this.shadowRoot.innerHTML=`
+        <style>
+            :host {
+                display: block;
+                width: 100%;
+                height: var(--titlebar-height, 65px);
+                background-color: var(--app-200);
+                flex-shrink: 0;
+                position: fixed;
+                top: 0;
+                left: 0;
+                z-index: 200;
+                box-sizing: border-box;
+            }
+
+            .titlebar {
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                box-sizing: border-box;
+            }
+
+            .left-section {
+                display: flex;
+                align-items: center;
+            }
+
+            .title {
+                font-size: 1.25rem;
+                font-weight: 400;
+                color: var(--app-text);
+                margin: 0;
+                user-select: none;
+            }
+
+            .menu-button {
+                border: none;
+                background-color: transparent;
+                cursor: pointer;
+                width: 42px;
+                height: 42px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                box-sizing: border-box;
+                border-radius: 50%;
+                color: inherit;
+                padding: 0;
+            }
+
+            .menu-button:hover {
+                background-color: var(--app-300);
+            }
+
+            .menu-button:active {
+                transform: scale(0.95);
+            }
+
+            .menu-button:focus-visible {
+                outline: 2px solid var(--app-link);
+                outline-offset: 2px;
+            }
+
+            .right-section {
+                display: flex;
+                align-items: center;
+                padding-right: 1rem;
+            }
+
+            .nav-section {
+                width: var(--nav-width, 75px);
+
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        </style>
+
+        <div class="titlebar">
+            <div class="left-section">
+                <div class="nav-section">
+                    <eui-button class="menu-button" id="nav-toggle" aria-label="Toggle Navigation" aria-expanded="false" aria-controls="nav-items" tabindex="0" type="transparent" border-radius="100">
+                        <eui-icon width="24" height="24" name="menu"></eui-icon>
+                    </eui-button>
+                </div>
+                <h2 class="title">${t}</h2>
+            </div>
+            <div class="right-section">
+                <slot></slot>
+            </div>
+        </div>
+        `}}customElements.define("eui-app-titlebar",V);class Y extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._handleMouseDown=this._addRipple.bind(this)}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["elevated","interactive","ripple"]}attributeChangedCallback(t,i,e){i!==e&&t==="ripple"&&this.setupEventListeners()}setupEventListeners(){this.removeEventListener("mousedown",this._handleMouseDown),this.hasAttribute("ripple")&&this.addEventListener("mousedown",this._handleMouseDown)}_addRipple(t){const i=this.getBoundingClientRect(),e=document.createElement("span"),r=Math.max(i.width,i.height),s=r/2;e.style.width=e.style.height=`${r}px`,e.style.left=`${t.clientX-i.left-s}px`,e.style.top=`${t.clientY-i.top-s}px`,e.classList.add("ripple"),this.shadowRoot.querySelector(".surface").appendChild(e),e.addEventListener("animationend",()=>{e.remove()})}render(){this.shadowRoot.innerHTML=`
+        <style>
+            :host {
+                display: block;
+                border-radius: 12px;
+                background-color: var(--app-200);
+                transition: background-color 0.2s cubic-bezier(.4, 0, .2, 1), 
+                            box-shadow 0.2s cubic-bezier(.4, 0, .2, 1);
+                overflow: hidden;
+                position: relative;
+                height: auto;
+                z-index: 1;
+            }
+
+            :host([elevated]) {
+                background-color: var(--app-100);
+                box-shadow: inset 0 0 0 1px var(--app-300);
+            }
+
+            :host([interactive]) {
+                cursor: pointer;
+            }
+
+            :host([interactive]:hover) {
+                background-color: var(--app-300);
+            }
+                
+            :host([interactive][elevated]:hover) {
+                background-color: var(--app-100);
+                box-shadow: inset 0 0 0 1px var(--app-300), 0 4px 12px rgba(0,0,0,0.1);
+            }
+
+            .surface {
+                position: relative;
+                z-index: 2; 
+                width: 100%;
+                height: 100%;
+            }
+
+            .ripple {
+                position: absolute;
+                border-radius: 50%;
+                transform: scale(0);
+                opacity: 0.2;
+                animation: ripple 600ms linear forwards;
+                background-color: currentColor;
+                pointer-events: none;
+                z-index: -1;
+                will-change: transform, opacity;
+            }
+
+            @keyframes ripple {
+                to {
+                    transform: scale(4);
+                    opacity: 0;
+                }
+            }
+        </style>
+        <div class="surface">
+            <slot></slot>
+        </div>
+        `}}customElements.define("eui-surface",Y),typeof window<"u"&&console.log("ErisUI loaded successfully"),p.device=z,p.haptics=$,p.loadPage=F,p.router=x,p.storage=H,p.utils=W,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));