@3r1s_s/erisui 1.0.5

package/dist/erisui.mjs

@@ -0,0 +1,1694 @@
+class C 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 n = "";
+      r.length === 1 ? n = r[0][0] || "" : n = (r[0][0] || "") + (r[r.length - 1][0] || ""), this.initials.textContent = n.toUpperCase();
+    }
+  }
+}
+customElements.define("eui-avatar", C);
+const x = /* @__PURE__ */ new Map();
+class S 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 = x.get(t);
+    if (!i)
+      try {
+        const a = await fetch(`/icons/${t}.svg`);
+        if (a.ok)
+          i = await a.text(), x.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), n = r.firstElementChild;
+    if (n && n.style) {
+      const a = this.getAttribute("width"), l = this.getAttribute("height");
+      a && n.setAttribute("width", a), l && n.setAttribute("height", l), n.style.display = "block";
+    }
+    this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(r);
+  }
+}
+customElements.define("eui-icon", S);
+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)
+    // matches most mobile browsers
+  },
+  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
+}, X = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  device: m
+}, Symbol.toStringTag, { value: "Module" }));
+function z() {
+  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 && z();
+}
+const W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  haptic: v
+}, Symbol.toStringTag, { value: "Module" })), w = (() => {
+  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)));
+      }
+    }
+  };
+})(), y = w.settings, J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  settings: y,
+  storage: w
+}, Symbol.toStringTag, { value: "Module" }));
+class R 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", R);
+class $ 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", $);
+const b = "", k = (() => {
+  const o = [];
+  function t(s, d) {
+    const h = [], u = s.replace(/:([^/]+)/g, (g, f) => (h.push(f), "([^/]+)")).replace(/\//g, "\\/"), p = new RegExp(`^${b}${u}$`);
+    o.push({ regex: p, paramNames: h, renderFn: d });
+  }
+  function i(s) {
+    for (const { regex: d, paramNames: h, renderFn: u } of o) {
+      const p = s.match(d);
+      if (p) {
+        const g = {};
+        return h.forEach((f, A) => {
+          g[f] = decodeURIComponent(p[A + 1]);
+        }), { renderFn: u, params: g };
+      }
+    }
+    return null;
+  }
+  function e(s, d = !0) {
+    s.startsWith(b) || (s = b + (s.startsWith("/") ? "" : "/") + s);
+    const h = s.split(/[?#]/)[0];
+    if (h === window.location.pathname && s.includes("#")) {
+      d && history.pushState({}, "", s);
+      const p = "#" + s.split("#")[1];
+      r(p);
+      return;
+    }
+    const u = i(h);
+    if (u)
+      if (d && history.pushState({}, "", s), u.renderFn(u.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: s } })), s.includes("#")) {
+        const p = "#" + s.split("#")[1];
+        setTimeout(() => r(p), 100);
+      } else {
+        const p = document.getElementById("main");
+        p && p.scrollTo(0, 0);
+      }
+    else n ? (d && history.pushState({}, "", s), n()) : console.warn(`No route found for ${h}`);
+  }
+  function r(s) {
+    if (s)
+      try {
+        const d = document.querySelector(s);
+        d && d.scrollIntoView({ behavior: "smooth" });
+      } catch {
+        console.warn("Invalid hash:", s);
+      }
+  }
+  let n = null;
+  function a(s) {
+    n = s;
+  }
+  function l() {
+    history.back();
+  }
+  function c() {
+    return window.location.pathname.replace(b, "") || "/";
+  }
+  return window.addEventListener("popstate", () => {
+    const s = window.location.pathname + window.location.search + window.location.hash;
+    e(s, !1);
+  }), window.addEventListener("click", (s) => {
+    if (s.button !== 0 || s.metaKey || s.altKey || s.ctrlKey || s.shiftKey) return;
+    const d = s.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 (s.preventDefault(), h.startsWith("#")) {
+        history.pushState({}, "", h), r(h);
+        return;
+      }
+      e(h);
+    }
+  }), { add: t, navigate: e, back: l, location: c, setNotFound: a };
+})();
+async function V(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 H 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 && k.navigate(t);
+  };
+  setupEventListeners() {
+    this.addEventListener("pointerdown", (t) => {
+      const i = document.createElement("span"), e = t.currentTarget, r = e.getBoundingClientRect(), n = Math.max(e.offsetWidth, e.offsetHeight), a = n / 2;
+      i.classList.add("ripple"), i.style.width = `${n}px`, i.style.height = `${n}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") || "", n = this.getAttribute("badge"), a = this.shadowRoot.querySelector(".badge");
+    if (n)
+      if (a)
+        a.textContent = n;
+      else {
+        const s = document.createElement("span");
+        s.className = "badge", s.textContent = n, this.shadowRoot.appendChild(s);
+      }
+    else a && a.remove();
+    const l = this.shadowRoot.querySelector("slot[name='icon']");
+    if (l)
+      if (i || e) {
+        let s = '<eui-avatar size="24"';
+        e && (s += ` name="${e}"`), s += ">", i && (s += `<img src="${i}" alt="${e || "Avatar"}" />`), s += "</eui-avatar>", l.innerHTML = s;
+      } else {
+        const s = l.querySelector("eui-icon");
+        t && s ? s.getAttribute("name") !== t && s.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", H);
+class _ 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 = k.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", _);
+class I 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"), n = this.shadowRoot.querySelector("p"), a = this.shadowRoot.querySelector(".img");
+    t === "title" && (r.textContent = e), t === "subtitle" && (n.textContent = e), t === "img" && (a.style.backgroundImage = e ? `url(${e})` : "");
+  }
+}
+customElements.define("eui-header", I);
+class F 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 && y.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", F);
+class q 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 n = document.createElement("span"), a = r.currentTarget, l = a.getBoundingClientRect(), c = Math.max(a.offsetWidth, a.offsetHeight), s = c / 2;
+      n.classList.add("ripple"), n.style.width = `${c}px`, n.style.height = `${c}px`, n.style.left = `${r.clientX - l.left - s}px`, n.style.top = `${r.clientY - l.top - s}px`, e.appendChild(n), n.addEventListener("animationend", () => {
+        n.remove();
+      });
+    });
+  }
+}
+customElements.define("eui-button", q);
+class j 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", j);
+function N(o) {
+  const e = Date.now() - o, r = Math.floor(e / 1e3), n = Math.floor(r / 60), a = Math.floor(n / 60), l = Math.floor(a / 24), c = Math.floor(l / 30), s = Math.floor(c / 12);
+  return s > 0 ? `${s}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : a > 0 ? `${a}h` : n > 0 ? `${n}m` : `${r}s`;
+}
+function B(o) {
+  const e = Date.now() - o, r = Math.floor(e / 1e3), n = Math.floor(r / 60), a = Math.floor(n / 60), l = Math.floor(a / 24), c = Math.floor(l / 30), s = Math.floor(c / 12);
+  return s > 0 ? `${s} year${s > 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` : n > 0 ? `${n} minute${n > 1 ? "s" : ""} ago` : `${r} second${r > 1 ? "s" : ""} ago`;
+}
+function O(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 E(o) {
+  const t = document.createElement("input");
+  t.value = o, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
+}
+const Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  copystr: E,
+  joinedAgo: B,
+  sanitize: O,
+  timeAgo: N
+}, Symbol.toStringTag, { value: "Module" }));
+class P 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((n) => n.trim()).map((n) => n.match(/^\s*/)[0].length), r = e.length ? Math.min(...e) : 0;
+    return t = i.map((n) => n.slice(r)).join(`
+`), t;
+  }
+  _onCopy() {
+    E(this._getFormattedText());
+  }
+  disconnectedCallback() {
+    this.copyBtn && this.copyBtn.removeEventListener("click", this._boundCopy);
+  }
+}
+customElements.define("eui-code", P);
+class U 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", U);
+class D 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), n = r / 2;
+    e.style.width = e.style.height = `${r}px`, e.style.left = `${t.clientX - i.left - n}px`, e.style.top = `${t.clientY - i.top - n}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", D);
+typeof window < "u" && console.log("ErisUI loaded successfully");
+export {
+  X as device,
+  W as haptics,
+  V as loadPage,
+  k as router,
+  J as storage,
+  Y as utils
+};