npm - @developer.krd/discord-dashboard - Versions diffs - 0.1.3 → 0.1.5 - Mend

@developer.krd/discord-dashboard 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js CHANGED Viewed

@@ -1,10 +1,32 @@
-// src/index.ts
-import compression from "compression";
-import express from "express";
-import session from "express-session";
-import helmet from "helmet";
-import { randomBytes } from "crypto";
-import { createServer } from "http";
+// src/Types/elysia.ts
+import { t } from "elysia";
+var UserSchema = t.Object({
+  id: t.String(),
+  username: t.String(),
+  discriminator: t.String(),
+  avatar: t.Nullable(t.String()),
+  global_name: t.Optional(t.Nullable(t.String()))
+});
+var GuildSchema = t.Object({
+  id: t.String(),
+  name: t.String(),
+  icon: t.Nullable(t.String()),
+  owner: t.Boolean(),
+  permissions: t.String(),
+  iconUrl: t.Optional(t.Nullable(t.String())),
+  botInGuild: t.Optional(t.Nullable(t.Boolean())),
+  inviteUrl: t.Optional(t.Nullable(t.String()))
+});
+var SessionSchema = t.Object({
+  oauthState: t.Optional(t.String()),
+  discordAuth: t.Optional(
+    t.Object({
+      accessToken: t.String(),
+      user: UserSchema,
+      guilds: t.Array(GuildSchema)
+    })
+  )
+});
 // src/handlers/DiscordHelpers.ts
 var DiscordHelpers = class {
@@ -82,2233 +104,2388 @@ var DiscordHelpers = class {
   async getGuildMember(guildId, userId) {
     return await this.fetchDiscordWithBot(`/guilds/${guildId}/members/${userId}`);
   }
+  getGuildIconUrl(guildId, iconHash) {
+    if (!iconHash) return null;
+    const extension = iconHash.startsWith("a_") ? "gif" : "png";
+    return `https://cdn.discordapp.com/icons/${guildId}/${iconHash}.${extension}?size=128`;
+  }
+  getUserAvatarUrl(userId, avatarHash) {
+    if (!avatarHash) return null;
+    const extension = avatarHash.startsWith("a_") ? "gif" : "png";
+    return `https://cdn.discordapp.com/avatars/${userId}/${avatarHash}.${extension}?size=128`;
+  }
 };
-// src/templates/templates.ts
-var appCss = `
-:root {
-  color-scheme: dark;
-  --bg: #13151a;
-  --rail: #1e1f24;
-  --content-bg: #2b2d31;
-  --panel: #313338;
-  --panel-2: #3a3d43;
-  --text: #eef2ff;
-  --muted: #b5bac1;
-  --primary: #5865f2;
-  --success: #20c997;
-  --warning: #f4c95d;
-  --danger: #ff6b6b;
-  --info: #4dabf7;
-  --border: rgba(255, 255, 255, 0.12);
-}
-* { box-sizing: border-box; }
-body {
-  margin: 0;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  background: var(--bg);
-  color: var(--text);
-}
-.layout {
-  display: flex;
-  min-height: 100vh;
-}
-.sidebar {
-  width: 76px;
-  background: var(--rail);
-  padding: 12px 0;
-  border-right: 1px solid var(--border);
-}
-.server-rail {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-.server-item {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  overflow: visible;
-  border: none;
-  padding: 0;
-  background: var(--panel);
-  color: #fff;
-  font-weight: 700;
-  display: grid;
-  place-items: center;
-  transition: border-radius .15s ease, background .15s ease, transform .15s ease;
-}
-.server-item:hover { border-radius: 16px; background: #404249; }
-.server-item.active {
-  border-radius: 16px;
-  background: var(--primary);
-  transform: scale(1.1);
-}
-.server-item-indicator {
-  position: absolute;
-  left: -9px;
-  width: 4px;
-  height: 20px;
-  border-radius: 999px;
-  background: #fff;
-  opacity: 0;
-  transform: scaleY(0.5);
-  transition: opacity .15s ease, transform .15s ease, height .15s ease;
-}
-.server-item.active .server-item-indicator {
-  opacity: 1;
-  transform: scaleY(1);
-  height: 28px;
-}
-.server-avatar {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  display: block;
-  border-radius: inherit;
-}
-.server-fallback {
-  font-weight: 700;
-  font-size: 0.8rem;
-}
-.main-tabs {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 14px;
-}
-.main-tab.active {
-  background: var(--primary);
-  border-color: transparent;
-}
-.server-status {
-  position: absolute;
-  right: -3px;
-  bottom: -3px;
-  width: 12px;
-  height: 12px;
-  border-radius: 999px;
-  border: 2px solid var(--rail);
-  background: #3ba55d;
-  z-index: 2;
-}
-.server-status.offline {
-  background: #747f8d;
-}
-.content {
-  flex: 1;
-  background: var(--content-bg);
-  min-width: 0;
-}
-.topbar {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: center;
-  padding: 14px 20px;
-  border-bottom: 1px solid var(--border);
-}
-.brand {
-  font-size: 1rem;
-  font-weight: 700;
-}
-.center-title {
-  text-align: center;
-  font-weight: 700;
-  font-size: 1rem;
-}
-.topbar-right {
-  justify-self: end;
-}
-.container {
-  padding: 22px;
-}
-.grid {
-  display: grid;
-  gap: 16px;
-}
-.cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
-.panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 16px;
-}
-.title { color: var(--muted); font-size: 0.9rem; }
-.value { font-size: 1.7rem; font-weight: 700; margin-top: 6px; }
-.subtitle { margin-top: 8px; color: var(--muted); font-size: 0.88rem; }
-.section-title { font-size: 1rem; margin: 20px 0 12px; color: #ffffff; }
-.pill {
-  padding: 4px 9px;
-  border-radius: 999px;
-  font-size: 0.76rem;
-  border: 1px solid var(--border);
-  color: var(--muted);
-}
-button {
-  border: 1px solid var(--border);
-  background: var(--panel-2);
-  color: var(--text);
-  border-radius: 8px;
-  padding: 8px 12px;
-}
-button.primary {
-  background: var(--primary);
-  border: none;
-}
-button.danger { background: #3a1e27; border-color: rgba(255,107,107,.45); }
-.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
-.home-categories {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
-}
-.home-category-btn.active {
-  background: var(--primary);
-  border-color: transparent;
-}
-.home-sections {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-.home-section-panel {
-  flex: 0 0 100%;
-  max-width: 100%;
-}
-.home-width-50 {
-  flex-basis: calc(50% - 6px);
-  max-width: calc(50% - 6px);
-}
-.home-width-33 {
-  flex-basis: calc(33.333333% - 8px);
-  max-width: calc(33.333333% - 8px);
-}
-.home-width-20 {
-  flex-basis: calc(20% - 9.6px);
-  max-width: calc(20% - 9.6px);
-}
-@media (max-width: 980px) {
-  .home-width-50,
-  .home-width-33,
-  .home-width-20 {
-    flex-basis: 100%;
-    max-width: 100%;
-  }
-}
-.home-fields { display: grid; gap: 10px; margin-top: 10px; }
-.home-field { display: grid; gap: 6px; }
-.home-field label { color: var(--muted); font-size: 0.84rem; }
-.lookup-wrap { position: relative; }
-.home-input,
-.home-textarea,
-.home-select {
-  width: 100%;
-  border: 1px solid var(--border);
-  background: var(--panel-2);
-  color: var(--text);
-  border-radius: 8px;
-  padding: 8px 10px;
-}
-.home-textarea { min-height: 92px; resize: vertical; }
-.home-checkbox {
-  width: 18px;
-  height: 18px;
-}
-.home-field-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.home-message {
-  margin-top: 8px;
-  color: var(--muted);
-  font-size: 0.84rem;
-}
-.lookup-results {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(100% + 6px);
-  z-index: 20;
-  border: 1px solid var(--border);
-  background: var(--panel);
-  border-radius: 8px;
-  max-height: 220px;
-  overflow: auto;
-  display: none;
-}
-.lookup-item {
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  text-align: left;
-  padding: 8px 10px;
-  background: transparent;
-}
-.lookup-item:hover {
-  background: var(--panel-2);
-}
-.lookup-selected {
-  margin-top: 6px;
-  font-size: 0.82rem;
-  color: var(--muted);
-}
-.kv { display: grid; gap: 8px; margin-top: 10px; }
-.kv-item {
-  display: flex;
-  justify-content: space-between;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 8px 10px;
-  background: var(--panel-2);
-}
-.plugin-fields {
-  display: grid;
-  gap: 10px;
-  margin-top: 10px;
-}
-.plugin-field {
-  display: grid;
-  gap: 6px;
-}
-.plugin-field > label {
-  color: var(--muted);
-  font-size: 0.84rem;
-}
-.list-editor {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--panel-2);
-  padding: 8px;
-  display: grid;
-  gap: 8px;
-}
-.list-items {
-  display: grid;
-  gap: 6px;
-}
-.list-item {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 8px;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 6px 8px;
-  background: var(--panel);
-}
-.list-item.dragging {
-  opacity: .6;
-}
-.drag-handle {
-  color: var(--muted);
-  user-select: none;
-  font-size: 0.9rem;
-}
-.list-input {
-  width: 100%;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--text);
-}
-.list-add {
-  justify-self: start;
+// src/templates/scripts/client.ts
+function getClientScript(basePath, setupDesign = {}) {
+  const scriptData = JSON.stringify({ basePath, setupDesign });
+  return `
+      const dashboardConfig = ${scriptData};
+      const state = {
+        session: null,
+        guilds: [],
+        selectedGuildId: null,
+        homeCategories: [],
+        selectedHomeCategoryId: null,
+        activeMainTab: "home"
+      };
+      const el = {
+        serverRail: document.getElementById("serverRail"),
+        userMeta: document.getElementById("userMeta"),
+        centerTitle: document.getElementById("centerTitle"),
+        tabHome: document.getElementById("tabHome"),
+        tabPlugins: document.getElementById("tabPlugins"),
+        homeArea: document.getElementById("homeArea"),
+        pluginsArea: document.getElementById("pluginsArea"),
+        homeCategories: document.getElementById("homeCategories"),
+        homeSections: document.getElementById("homeSections"),
+        overviewArea: document.getElementById("overviewArea"),
+        overviewCards: document.getElementById("overviewCards"),
+        plugins: document.getElementById("plugins")
+      };
+      const fetchJson = async (url, init) => {
+        const response = await fetch(url, init);
+        if (!response.ok) throw new Error(await response.text());
+        return response.json();
+      };
+      const buildApiUrl = (path) => {
+        if (!state.selectedGuildId) return dashboardConfig.basePath + path;
+        const separator = path.includes("?") ? "&" : "?";
+        return dashboardConfig.basePath + path + separator + "guildId=" + encodeURIComponent(state.selectedGuildId);
+      };
+      const escapeHtml = (value) => String(value)
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#039;");
+      const normalizeBoxWidth = (value) => {
+        const numeric = Number(value);
+        if (numeric === 50 || numeric === 33 || numeric === 20) return numeric;
+        return 100;
+      };
+      const makeButton = (action, pluginId, panelId, panelElement) => {
+        const button = document.createElement("button");
+        button.textContent = action.label;
+        const variantClass = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
+        button.className = [variantClass, "cursor-pointer"].filter(Boolean).join(" ");
+        button.addEventListener("click", async () => {
+          button.disabled = true;
+          try {
+            let payload = {};
+            if (action.collectFields && panelElement) {
+              const values = {};
+              const inputs = panelElement.querySelectorAll("[data-plugin-field-id]");
+              inputs.forEach((inputEl) => {
+                const fieldId = inputEl.dataset.pluginFieldId;
+                const fieldType = inputEl.dataset.pluginFieldType || "text";
+                if (!fieldId) return;
+                values[fieldId] = toFieldValue({ type: fieldType }, inputEl);
+              });
+              payload = { panelId, values };
+            }
+            const actionUrl = buildApiUrl("/api/plugins/" + encodeURIComponent(pluginId) + "/" + encodeURIComponent(action.id));
+            const result = await fetchJson(actionUrl, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(payload)
+            });
+            if (result.message) alert(result.message);
+            if (result.refresh) await refreshContent();
+          } catch (error) {
+            alert(error instanceof Error ? error.message : "Action failed");
+          } finally {
+            button.disabled = false;
+          }
+        });
+        return button;
+      };
+      const renderCards = (cards) => {
+        if (!cards.length) {
+          el.overviewCards.innerHTML = '<div class="empty">No cards configured yet.</div>';
+          return;
+        }
+        el.overviewCards.innerHTML = cards.map((card) => {
+          const subtitle = card.subtitle ? '<div class="subtitle">' + escapeHtml(card.subtitle) + '</div>' : "";
+          return '<article class="panel">'
+            + '<div class="title">' + escapeHtml(card.title) + '</div>'
+            + '<div class="value">' + escapeHtml(card.value) + '</div>'
+            + subtitle
+            + '</article>';
+        }).join("");
+      };
+      const shortName = (name) => {
+        if (!name) return "?";
+        const parts = String(name).trim().split(/\\s+/).filter(Boolean);
+        if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+        return (parts[0][0] + parts[1][0]).toUpperCase();
+      };
+      const addAvatarOrFallback = (button, item) => {
+        if (!item.avatarUrl) {
+          const fallback = document.createElement("span");
+          fallback.className = "server-fallback";
+          fallback.textContent = item.short;
+          button.appendChild(fallback);
+          return;
+        }
+        const avatar = document.createElement("img");
+        avatar.className = "server-avatar";
+        avatar.src = item.avatarUrl;
+        avatar.alt = item.name;
+        avatar.addEventListener("error", () => {
+          avatar.remove();
+          const fallback = document.createElement("span");
+          fallback.className = "server-fallback";
+          fallback.textContent = item.short;
+          button.appendChild(fallback);
+        });
+        button.appendChild(avatar);
+      };
+      const renderServerRail = () => {
+        const items = [{ id: null, name: "User Dashboard", short: "ME", avatarUrl: state.session?.user?.avatarUrl ?? null, botInGuild: true }].concat(
+          state.guilds.map((guild) => ({
+            id: guild.id,
+            name: guild.name,
+            short: shortName(guild.name),
+            avatarUrl: guild.iconUrl ?? null,
+            botInGuild: guild.botInGuild !== false,
+            inviteUrl: guild.inviteUrl
+          }))
+        );
+        el.serverRail.innerHTML = "";
+        items.forEach((item) => {
+          const button = document.createElement("button");
+          button.className = "server-item cursor-pointer" + (item.id === state.selectedGuildId ? " active" : "");
+          button.title = item.id && !item.botInGuild ? (item.name + " \u2022 Invite bot") : item.name;
+          const activeIndicator = document.createElement("span");
+          activeIndicator.className = "server-item-indicator";
+          button.appendChild(activeIndicator);
+          addAvatarOrFallback(button, item);
+          if (item.id) {
+            const status = document.createElement("span");
+            status.className = "server-status" + (item.botInGuild ? "" : " offline");
+            button.appendChild(status);
+          }
+          button.addEventListener("click", async () => {
+            if (item.id && !item.botInGuild && item.inviteUrl) {
+              const opened = window.open(item.inviteUrl, "_blank", "noopener,noreferrer");
+              if (!opened && typeof alert === "function") alert("Popup blocked. Please allow popups.");
+              return;
+            }
+            state.selectedGuildId = item.id;
+            renderServerRail();
+            updateContextLabel();
+            await refreshContent();
+          });
+          el.serverRail.appendChild(button);
+        });
+      };
+      const applyMainTab = () => {
+        const homeActive = state.activeMainTab === "home";
+        el.homeArea.style.display = homeActive ? "block" : "none";
+        el.pluginsArea.style.display = homeActive ? "none" : "block";
+        el.tabHome.className = "main-tab cursor-pointer" + (homeActive ? " active" : "");
+        el.tabPlugins.className = "main-tab cursor-pointer" + (!homeActive ? " active" : "");
+      };
+      const updateContextLabel = () => {
+        if (!state.selectedGuildId) {
+          el.centerTitle.textContent = "User Dashboard";
+          return;
+        }
+        const selectedGuild = state.guilds.find((guild) => guild.id === state.selectedGuildId);
+        el.centerTitle.textContent = selectedGuild ? (selectedGuild.name + " Dashboard") : "Server Dashboard";
+      };
+      const renderHomeCategories = () => {
+        if (!state.homeCategories.length) {
+          el.homeCategories.innerHTML = "";
+          return;
+        }
+        el.homeCategories.innerHTML = "";
+        state.homeCategories.forEach((category) => {
+          const button = document.createElement("button");
+          button.className = "home-category-btn cursor-pointer" + (state.selectedHomeCategoryId === category.id ? " active" : "");
+          button.textContent = category.label;
+          button.title = category.description || category.label;
+          button.addEventListener("click", async () => {
+            state.selectedHomeCategoryId = category.id;
+            renderHomeCategories();
+            await refreshContent();
+          });
+          el.homeCategories.appendChild(button);
+        });
+      };
+      const toFieldValue = (field, element) => {
+        if (field.type === "string-list") {
+          const raw = element.dataset.listValues;
+          if (!raw) return [];
+          try {
+            const parsed = JSON.parse(raw);
+            return Array.isArray(parsed) ? parsed : [];
+          } catch { return []; }
+        }
+        if (field.type === "role-search" || field.type === "channel-search" || field.type === "member-search") {
+          const raw = element.dataset.selectedObject;
+          if (!raw) return null;
+          try { return JSON.parse(raw); } catch { return null; }
+        }
+        if (field.type === "boolean") return Boolean(element.checked);
+        if (field.type === "number") return element.value === "" ? null : Number(element.value);
+        return element.value;
+      };
+      const setupStringListField = (field, input, fieldWrap) => {
+        const editor = document.createElement("div");
+        editor.className = "list-editor";
+        const itemsWrap = document.createElement("div");
+        itemsWrap.className = "list-items";
+        const addButton = document.createElement("button");
+        addButton.type = "button";
+        addButton.className = "list-add cursor-pointer";
+        addButton.textContent = "Add Button";
+        const normalizeValues = () => {
+          const values = Array.from(itemsWrap.querySelectorAll(".list-input")).map((item) => item.value.trim()).filter((item) => item.length > 0);
+          input.dataset.listValues = JSON.stringify(values);
+        };
+        const makeRow = (value = "") => {
+          const row = document.createElement("div");
+          row.className = "list-item";
+          row.draggable = true;
+          const handle = document.createElement("span");
+          handle.className = "drag-handle cursor-pointer";
+          handle.textContent = "\u22EE\u22EE";
+          const textInput = document.createElement("input");
+          textInput.type = "text";
+          textInput.className = "list-input";
+          textInput.value = value;
+          textInput.placeholder = "Button label";
+          textInput.addEventListener("input", normalizeValues);
+          const removeButton = document.createElement("button");
+          removeButton.type = "button";
+          removeButton.className = "cursor-pointer";
+          removeButton.textContent = "\xD7";
+          removeButton.addEventListener("click", () => { row.remove(); normalizeValues(); });
+          row.addEventListener("dragstart", () => row.classList.add("dragging"));
+          row.addEventListener("dragend", () => { row.classList.remove("dragging"); normalizeValues(); });
+          row.appendChild(handle); row.appendChild(textInput); row.appendChild(removeButton);
+          return row;
+        };
+        itemsWrap.addEventListener("dragover", (event) => {
+          event.preventDefault();
+          const dragging = itemsWrap.querySelector(".dragging");
+          if (!dragging) return;
+          const siblings = Array.from(itemsWrap.querySelectorAll(".list-item:not(.dragging)"));
+          let inserted = false;
+          for (const sibling of siblings) {
+            const rect = sibling.getBoundingClientRect();
+            if (event.clientY < rect.top + rect.height / 2) {
+              itemsWrap.insertBefore(dragging, sibling);
+              inserted = true;
+              break;
+            }
+          }
+          if (!inserted) itemsWrap.appendChild(dragging);
+        });
+        const initialValues = Array.isArray(field.value) ? field.value.map((item) => String(item)) : [];
+        if (initialValues.length === 0) initialValues.push("Yes", "No");
+        initialValues.forEach((value) => itemsWrap.appendChild(makeRow(value)));
+        addButton.addEventListener("click", () => { itemsWrap.appendChild(makeRow("")); normalizeValues(); });
+        editor.appendChild(itemsWrap); editor.appendChild(addButton); fieldWrap.appendChild(editor);
+        normalizeValues();
+      };
+      const showLookupResults = (container, items, labelResolver, onSelect) => {
+        container.innerHTML = "";
+        if (!items.length) { container.style.display = "none"; return; }
+        items.forEach((item) => {
+          const btn = document.createElement("button");
+          btn.type = "button";
+          btn.className = "lookup-item cursor-pointer";
+          btn.textContent = labelResolver(item);
+          btn.addEventListener("click", () => { onSelect(item); container.style.display = "none"; });
+          container.appendChild(btn);
+        });
+        container.style.display = "block";
+      };
+      const setupLookupField = (field, input, fieldWrap) => {
+        const wrap = document.createElement("div");
+        wrap.className = "lookup-wrap";
+        const results = document.createElement("div");
+        results.className = "lookup-results";
+        const selected = document.createElement("div");
+        selected.className = "lookup-selected";
+        selected.textContent = "No selection";
+        wrap.appendChild(input); wrap.appendChild(results); fieldWrap.appendChild(wrap); fieldWrap.appendChild(selected);
+        const minQueryLength = Math.max(0, field.lookup?.minQueryLength ?? 1);
+        const limit = Math.max(1, Math.min(field.lookup?.limit ?? 10, 50));
+        const runSearch = async () => {
+          const query = String(input.value || "");
+          if (query.length < minQueryLength) { results.style.display = "none"; return; }
+          try {
+            if (field.type === "role-search") {
+              const params = new URLSearchParams({ q: query, limit: String(limit) });
+              if (field.lookup?.includeManaged !== undefined) params.set("includeManaged", String(Boolean(field.lookup.includeManaged)));
+              const payload = await fetchJson(buildApiUrl("/api/lookup/roles?" + params.toString()));
+              showLookupResults(results, payload.roles || [], (item) => "@" + item.name, (item) => {
+                input.value = item.name;
+                input.dataset.selectedObject = JSON.stringify(item);
+                selected.textContent = "Selected role: @" + item.name + " (" + item.id + ")";
+              });
+            } else if (field.type === "channel-search") {
+              const params = new URLSearchParams({ q: query, limit: String(limit) });
+              if (field.lookup?.nsfw !== undefined) params.set("nsfw", String(Boolean(field.lookup.nsfw)));
+              if (field.lookup?.channelTypes && field.lookup.channelTypes.length > 0) params.set("channelTypes", field.lookup.channelTypes.join(","));
+              const payload = await fetchJson(buildApiUrl("/api/lookup/channels?" + params.toString()));
+              showLookupResults(results, payload.channels || [], (item) => "#" + item.name, (item) => {
+                input.value = item.name;
+                input.dataset.selectedObject = JSON.stringify(item);
+                selected.textContent = "Selected channel: #" + item.name + " (" + item.id + ")";
+              });
+            } else if (field.type === "member-search") {
+              const params = new URLSearchParams({ q: query, limit: String(limit) });
+              const payload = await fetchJson(buildApiUrl("/api/lookup/members?" + params.toString()));
+              showLookupResults(results, payload.members || [],
+                (item) => (item?.user?.username || "unknown") + (item?.nick ? " (" + item.nick + ")" : ""),
+                (item) => {
+                  const username = item?.user?.username || "unknown";
+                  input.value = username;
+                  input.dataset.selectedObject = JSON.stringify(item);
+                  selected.textContent = "Selected member: " + username + " (" + (item?.user?.id || "unknown") + ")";
+                });
+            }
+          } catch { results.style.display = "none"; }
+        };
+        input.addEventListener("input", () => { input.dataset.selectedObject = ""; selected.textContent = "No selection"; runSearch(); });
+        input.addEventListener("blur", () => setTimeout(() => { results.style.display = "none"; }, 120));
+      };
+      const renderHomeSections = (sections) => {
+        if (!sections.length) { el.homeSections.innerHTML = '<div class="empty">No home sections configured.</div>'; return; }
+        el.homeSections.innerHTML = "";
+        sections.forEach((section) => {
+          const wrap = document.createElement("article");
+          wrap.className = "panel home-section-panel home-width-" + normalizeBoxWidth(section.width);
+          const heading = document.createElement("h3");
+          heading.textContent = section.title; heading.style.margin = "0"; wrap.appendChild(heading);
+          if (section.description) {
+            const desc = document.createElement("div");
+            desc.className = "subtitle"; desc.textContent = section.description; wrap.appendChild(desc);
+          }
+          const message = document.createElement("div");
+          message.className = "home-message";
+          if (section.fields?.length) {
+            const fieldsWrap = document.createElement("div");
+            fieldsWrap.className = "home-fields";
+            section.fields.forEach((field) => {
+              const fieldWrap = document.createElement("div");
+              fieldWrap.className = "home-field";
+              const label = document.createElement("label");
+              label.textContent = field.label; fieldWrap.appendChild(label);
+              let input;
+              if (field.type === "textarea") {
+                input = document.createElement("textarea"); input.className = "home-textarea"; input.value = field.value == null ? "" : String(field.value);
+              } else if (field.type === "select") {
+                input = document.createElement("select"); input.className = "home-select cursor-pointer";
+                (field.options || []).forEach((option) => {
+                  const optionEl = document.createElement("option"); optionEl.value = option.value; optionEl.textContent = option.label;
+                  if (String(field.value ?? "") === option.value) optionEl.selected = true;
+                  input.appendChild(optionEl);
+                });
+              } else if (field.type === "boolean") {
+                const row = document.createElement("div"); row.className = "home-field-row";
+                input = document.createElement("input"); input.type = "checkbox"; input.className = "home-checkbox cursor-pointer"; input.checked = Boolean(field.value);
+                const stateText = document.createElement("span"); stateText.textContent = input.checked ? "Enabled" : "Disabled";
+                input.addEventListener("change", () => stateText.textContent = input.checked ? "Enabled" : "Disabled");
+                row.appendChild(input); row.appendChild(stateText); fieldWrap.appendChild(row);
+              } else {
+                input = document.createElement("input"); input.className = "home-input";
+                input.type = field.type === "number" ? "number" : "text"; input.value = field.value == null ? "" : String(field.value);
+              }
+              if (input) {
+                input.dataset.homeFieldId = field.id; input.dataset.homeFieldType = field.type;
+                if (field.placeholder && "placeholder" in input) input.placeholder = field.placeholder;
+                if (field.required && "required" in input) input.required = true;
+                if (field.readOnly) { if ("readOnly" in input) input.readOnly = true; if ("disabled" in input) input.disabled = true; }
+                if (field.type === "role-search" || field.type === "channel-search" || field.type === "member-search") { setupLookupField(field, input, fieldWrap); }
+                else if (field.type !== "boolean") { fieldWrap.appendChild(input); }
+              }
+              fieldsWrap.appendChild(fieldWrap);
+            });
+            wrap.appendChild(fieldsWrap);
+          }
+          if (section.actions?.length) {
+            const actions = document.createElement("div"); actions.className = "actions";
+            section.actions.forEach((action) => {
+              const button = document.createElement("button"); button.textContent = action.label;
+              const variantClass = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
+              button.className = [variantClass, "cursor-pointer"].filter(Boolean).join(" ");
+              button.addEventListener("click", async () => {
+                button.disabled = true;
+                try {
+                  const values = {};
+                  const inputs = wrap.querySelectorAll("[data-home-field-id]");
+                  inputs.forEach((inputEl) => {
+                    const fieldId = inputEl.dataset.homeFieldId;
+                    const fieldType = inputEl.dataset.homeFieldType || "text";
+                    if (!fieldId) return;
+                    values[fieldId] = toFieldValue({ type: fieldType }, inputEl);
+                  });
+                  const result = await fetchJson(buildApiUrl("/api/home/" + encodeURIComponent(action.id)), {
+                    method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sectionId: section.id, values })
+                  });
+                  message.textContent = result.message || "Saved.";
+                  if (result.refresh) await refreshContent();
+                } catch (error) { message.textContent = error instanceof Error ? error.message : "Save failed"; }
+                finally { button.disabled = false; }
+              });
+              actions.appendChild(button);
+            });
+            wrap.appendChild(actions);
+          }
+          wrap.appendChild(message); el.homeSections.appendChild(wrap);
+        });
+      };
+      const renderPlugins = (plugins) => {
+        if (!plugins.length) { el.plugins.innerHTML = '<div class="empty">No plugins configured yet.</div>'; return; }
+        el.plugins.innerHTML = "";
+        plugins.forEach((plugin) => {
+          const wrap = document.createElement("article"); wrap.className = "panel";
+          const heading = document.createElement("div"); heading.className = "title"; heading.textContent = plugin.name; wrap.appendChild(heading);
+          if (plugin.description) { const desc = document.createElement("div"); desc.className = "subtitle"; desc.textContent = plugin.description; wrap.appendChild(desc); }
+          (plugin.panels || []).forEach((panel) => {
+            const panelBody = document.createElement("div");
+            const panelTitle = document.createElement("h4"); panelTitle.textContent = panel.title; panelTitle.style.marginBottom = "4px"; panelBody.appendChild(panelTitle);
+            if (panel.description) { const p = document.createElement("div"); p.className = "subtitle"; p.textContent = panel.description; panelBody.appendChild(p); }
+            if (panel.fields?.length) {
+              const fieldsWrap = document.createElement("div"); fieldsWrap.className = "plugin-fields";
+              panel.fields.forEach((field) => {
+                const fieldWrap = document.createElement("div"); fieldWrap.className = field.editable ? "plugin-field" : "kv-item";
+                if (!field.editable) {
+                  const display = field.value == null ? "" : typeof field.value === "object" ? JSON.stringify(field.value) : String(field.value);
+                  fieldWrap.innerHTML = '<strong>' + escapeHtml(field.label) + '</strong><span>' + escapeHtml(display) + '</span>';
+                  fieldsWrap.appendChild(fieldWrap); return;
+                }
+                const label = document.createElement("label"); label.textContent = field.label; fieldWrap.appendChild(label);
+                let input;
+                if (field.type === "textarea") { input = document.createElement("textarea"); input.className = "home-textarea"; input.value = field.value == null ? "" : String(field.value); }
+                else if (field.type === "select") {
+                  input = document.createElement("select"); input.className = "home-select cursor-pointer";
+                  (field.options || []).forEach((option) => {
+                    const optionEl = document.createElement("option"); optionEl.value = option.value; optionEl.textContent = option.label;
+                    if (String(field.value ?? "") === option.value) optionEl.selected = true;
+                    input.appendChild(optionEl);
+                  });
+                } else if (field.type === "boolean") {
+                  const row = document.createElement("div"); row.className = "home-field-row";
+                  input = document.createElement("input"); input.type = "checkbox"; input.className = "home-checkbox cursor-pointer"; input.checked = Boolean(field.value);
+                  const stateText = document.createElement("span"); stateText.textContent = input.checked ? "Enabled" : "Disabled";
+                  input.addEventListener("change", () => stateText.textContent = input.checked ? "Enabled" : "Disabled");
+                  row.appendChild(input); row.appendChild(stateText); fieldWrap.appendChild(row);
+                } else {
+                  input = document.createElement("input"); input.className = "home-input";
+                  input.type = field.type === "number" ? "number" : field.type === "url" ? "url" : "text"; input.value = field.value == null ? "" : String(field.value);
+                }
+                if (input) {
+                  input.dataset.pluginFieldId = field.id || field.label; input.dataset.pluginFieldType = field.type || "text";
+                  if (field.placeholder && "placeholder" in input) input.placeholder = field.placeholder;
+                  if (field.required && "required" in input) input.required = true;
+                  const isLookup = field.type === "role-search" || field.type === "channel-search" || field.type === "member-search";
+                  if (isLookup) { setupLookupField(field, input, fieldWrap); }
+                  else if (field.type === "string-list") { setupStringListField(field, input, fieldWrap); }
+                  else if (field.type !== "boolean") { fieldWrap.appendChild(input); }
+                }
+                fieldsWrap.appendChild(fieldWrap);
+              });
+              panelBody.appendChild(fieldsWrap);
+            }
+            if (panel.actions?.length) {
+              const actions = document.createElement("div"); actions.className = "actions";
+              panel.actions.forEach((action) => { actions.appendChild(makeButton(action, plugin.id, panel.id, panelBody)); });
+              panelBody.appendChild(actions);
+            }
+            wrap.appendChild(panelBody);
+          });
+          el.plugins.appendChild(wrap);
+        });
+      };
+      const refreshContent = async () => {
+        const categoriesPayload = await fetchJson(buildApiUrl("/api/home/categories"));
+        state.homeCategories = categoriesPayload.categories || [];
+        if (!state.selectedHomeCategoryId || !state.homeCategories.some((item) => item.id === state.selectedHomeCategoryId)) {
+          const overviewCategory = state.homeCategories.find((item) => item.id === "overview");
+          state.selectedHomeCategoryId = overviewCategory ? overviewCategory.id : (state.homeCategories[0]?.id ?? null);
+        }
+        renderHomeCategories();
+        const homePath = state.selectedHomeCategoryId ? "/api/home?categoryId=" + encodeURIComponent(state.selectedHomeCategoryId) : "/api/home";
+        const [home, overview, plugins] = await Promise.all([ fetchJson(buildApiUrl(homePath)), fetchJson(buildApiUrl("/api/overview")), fetchJson(buildApiUrl("/api/plugins")) ]);
+        renderHomeSections(home.sections || []);
+        const showOverviewArea = state.selectedHomeCategoryId === "overview";
+        el.overviewArea.style.display = showOverviewArea ? "block" : "none";
+        renderCards(overview.cards || []);
+        renderPlugins(plugins.plugins || []);
+      };
+      const loadInitialData = async () => {
+        const session = await fetchJson(dashboardConfig.basePath + "/api/session");
+        if (!session.authenticated) { window.location.href = dashboardConfig.basePath + "/login"; return; }
+        state.session = session;
+        el.userMeta.textContent = session.user.username + " \u2022 " + session.guildCount + " guild(s)";
+        const guilds = await fetchJson(dashboardConfig.basePath + "/api/guilds");
+        state.guilds = guilds.guilds || [];
+        state.selectedGuildId = null;
+        renderServerRail(); updateContextLabel();
+        el.tabHome.addEventListener("click", () => { state.activeMainTab = "home"; applyMainTab(); });
+        el.tabPlugins.addEventListener("click", () => { state.activeMainTab = "plugins"; applyMainTab(); });
+        applyMainTab(); await refreshContent();
+      };
+      loadInitialData().catch((error) => { el.userMeta.textContent = "Load failed"; console.error(error); });
+    `;
 }
-.empty { color: var(--muted); font-size: 0.9rem; }
-.cursor-pointer { cursor: pointer; }
-`;
+// src/templates/layouts/compact.ts
 function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
 }
-function renderDashboardHtml(name, basePath, setupDesign) {
-  const safeName = escapeHtml(name);
-  const scriptData = JSON.stringify({ basePath, setupDesign: setupDesign ?? {} });
-  const customCssBlock = setupDesign?.customCss ? `
-  <style>${setupDesign.customCss}</style>` : "";
+function renderCompactLayout(context) {
+  const safeName = escapeHtml(context.dashboardName);
+  const design = context.setupDesign ?? {};
+  const clientScript = getClientScript(context.basePath, design);
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>${safeName}</title>
-  <style>${appCss}</style>${customCssBlock}
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: ${design.bg ?? "#0f1221"};
+      --rail: ${design.rail ?? "#171a2d"};
+      --content-bg: ${design.contentBg ?? "#0f1426"};
+      --panel: ${design.panel ?? "#1f243b"};
+      --panel-2: ${design.panel2 ?? "#2a314e"};
+      --text: ${design.text ?? "#f5f7ff"};
+      --muted: ${design.muted ?? "#aab1d6"};
+      --primary: ${design.primary ?? "#7c87ff"};
+      --success: ${design.success ?? "#2bd4a6"};
+      --warning: ${design.warning ?? "#ffd166"};
+      --danger: ${design.danger ?? "#ff6f91"};
+      --info: ${design.info ?? "#66d9ff"};
+      --border: ${design.border ?? "rgba(255, 255, 255, 0.12)"};
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      background: radial-gradient(circle at 0% 0%, #1b2140 0%, var(--bg) 45%);
+      color: var(--text);
+    }
+    .shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
+    .topbar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(15, 20, 38, 0.7); backdrop-filter: blur(8px); }
+    .brand { font-weight: 800; letter-spacing: .2px; }
+    .center-title { text-align: center; font-weight: 700; color: #d8defc; }
+    .pill { justify-self: end; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
+    .layout { display: grid; grid-template-columns: 80px 1fr; min-height: 0; }
+    .sidebar { border-right: 1px solid var(--border); background: linear-gradient(180deg, var(--rail), #121528); padding: 10px 0; }
+    .server-rail { display: flex; flex-direction: column; align-items: center; gap: 10px; }
+    .server-item { position: relative; width: 46px; height: 46px; border: none; border-radius: 14px; overflow: visible; background: var(--panel); color: #fff; font-weight: 700; transition: transform .15s ease, background .15s ease; }
+    .server-item:hover { transform: translateY(-1px); background: #323b5f; }
+    .server-item.active { background: var(--primary); transform: translateY(-2px); }
+    .server-item-indicator { position: absolute; left: -8px; top: 50%; transform: translateY(-50%) scaleY(.5); width: 3px; height: 18px; background: #fff; border-radius: 999px; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
+    .server-item.active .server-item-indicator { opacity: 1; transform: translateY(-50%) scaleY(1); }
+    .server-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+    .server-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
+    .server-status { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 999px; border: 2px solid var(--rail); background: #35d489; }
+    .server-status.offline { background: #7f8bb3; }
+    .content { min-width: 0; padding: 12px; }
+    .container { background: rgba(23, 28, 48, 0.6); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
+    .main-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
+    button { border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 7px 10px; }
+    button.primary { background: var(--primary); border: none; }
+    button.danger { background: #4a2230; border-color: rgba(255,111,145,.45); }
+    .main-tab.active, .home-category-btn.active { background: var(--primary); border-color: transparent; }
+    .section-title { margin: 12px 0 8px; color: #dce3ff; font-size: .95rem; }
+    .grid { display: grid; gap: 10px; }
+    .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
+    .panel { background: linear-gradient(180deg, rgba(42,49,78,.7), rgba(31,36,59,.85)); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
+    .title { color: var(--muted); font-size: .83rem; }
+    .value { font-size: 1.25rem; font-weight: 800; margin-top: 5px; }
+    .subtitle { margin-top: 5px; color: var(--muted); font-size: .8rem; }
+    .home-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
+    .home-sections { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
+    .home-section-panel { flex: 0 0 100%; max-width: 100%; }
+    .home-width-50 { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
+    .home-width-33 { flex-basis: calc(33.333333% - 6.67px); max-width: calc(33.333333% - 6.67px); }
+    .home-width-20 { flex-basis: calc(20% - 8px); max-width: calc(20% - 8px); }
+    .home-fields, .plugin-fields { display: grid; gap: 8px; margin-top: 8px; }
+    .home-field, .plugin-field { display: grid; gap: 5px; }
+    .home-field label, .plugin-field > label { color: var(--muted); font-size: .8rem; }
+    .home-input, .home-textarea, .home-select { width: 100%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); border-radius: 8px; padding: 7px 9px; }
+    .home-textarea { min-height: 88px; resize: vertical; }
+    .home-checkbox { width: 17px; height: 17px; }
+    .home-field-row { display: flex; align-items: center; gap: 8px; }
+    .home-message { margin-top: 6px; color: var(--muted); font-size: .8rem; }
+    .lookup-wrap { position: relative; }
+    .lookup-results { position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 20; border: 1px solid var(--border); background: #1f2742; border-radius: 8px; max-height: 220px; overflow: auto; display: none; }
+    .lookup-item { width: 100%; border: none; border-radius: 0; text-align: left; padding: 8px 10px; background: transparent; }
+    .lookup-item:hover { background: #2d3658; }
+    .lookup-selected { margin-top: 5px; font-size: .8rem; color: var(--muted); }
+    .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+    .kv-item { display: flex; justify-content: space-between; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; background: var(--panel-2); }
+    .list-editor { border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); padding: 8px; display: grid; gap: 8px; }
+    .list-items { display: grid; gap: 6px; }
+    .list-item { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--panel); }
+    .list-item.dragging { opacity: .6; }
+    .drag-handle { color: var(--muted); user-select: none; font-size: .9rem; }
+    .list-input { width: 100%; border: none; outline: none; background: transparent; color: var(--text); }
+    .list-add { justify-self: start; }
+    .empty { color: var(--muted); font-size: .9rem; }
+    .cursor-pointer { cursor: pointer; }
+    @media (max-width: 980px) {
+      .layout { grid-template-columns: 70px 1fr; }
+      .home-width-50, .home-width-33, .home-width-20 { flex-basis: 100%; max-width: 100%; }
+    }
+    /* Inject User Custom CSS Here */
+    ${design.customCss ?? ""}
+  </style>
 </head>
 <body>
-  <div class="layout">
-    <aside class="sidebar">
-      <div id="serverRail" class="server-rail"></div>
-    </aside>
+  <div class="shell">
+    <header class="topbar">
+      <div class="brand">${safeName}</div>
+      <div id="centerTitle" class="center-title">User Dashboard</div>
+      <div id="userMeta" class="pill">Loading...</div>
+    </header>
-    <main class="content">
-      <header class="topbar">
-        <div class="brand">${safeName}</div>
-        <div id="centerTitle" class="center-title">User Dashboard</div>
-        <div id="userMeta" class="pill topbar-right">Loading...</div>
-      </header>
+    <div class="layout">
+      <aside class="sidebar">
+        <div id="serverRail" class="server-rail"></div>
+      </aside>
-      <div class="container">
-        <div class="main-tabs">
-          <button id="tabHome" class="main-tab active cursor-pointer">Home</button>
-          <button id="tabPlugins" class="main-tab cursor-pointer">Plugins</button>
-        </div>
+      <main class="content">
+        <div class="container">
+          <div class="main-tabs">
+            <button id="tabHome" class="main-tab active cursor-pointer">Home</button>
+            <button id="tabPlugins" class="main-tab cursor-pointer">Plugins</button>
+          </div>
-        <section id="homeArea">
-          <div class="section-title">Home</div>
-          <section id="homeCategories" class="home-categories"></section>
-          <section id="homeSections" class="home-sections"></section>
+          <section id="homeArea">
+            <div class="section-title">Home</div>
+            <section id="homeCategories" class="home-categories"></section>
+            <section id="homeSections" class="home-sections"></section>
-          <section id="overviewArea">
-            <div class="section-title">Dashboard Stats</div>
-            <section id="overviewCards" class="grid cards"></section>
+            <section id="overviewArea">
+              <div class="section-title">Dashboard Stats</div>
+              <section id="overviewCards" class="grid cards"></section>
+            </section>
           </section>
-        </section>
-        <section id="pluginsArea" style="display:none;">
-          <div class="section-title">Plugins</div>
-          <section id="plugins" class="grid"></section>
-        </section>
-      </div>
-    </main>
+          <section id="pluginsArea" style="display:none;">
+            <div class="section-title">Plugins</div>
+            <section id="plugins" class="grid"></section>
+          </section>
+        </div>
+      </main>
+    </div>
   </div>
-  <script>
-    const dashboardConfig = ${scriptData};
-    const state = {
-      session: null,
-      guilds: [],
-      selectedGuildId: null,
-      homeCategories: [],
-      selectedHomeCategoryId: null,
-      activeMainTab: "home"
-    };
-    const el = {
-      serverRail: document.getElementById("serverRail"),
-      userMeta: document.getElementById("userMeta"),
-      centerTitle: document.getElementById("centerTitle"),
-      tabHome: document.getElementById("tabHome"),
-      tabPlugins: document.getElementById("tabPlugins"),
-      homeArea: document.getElementById("homeArea"),
-      pluginsArea: document.getElementById("pluginsArea"),
-      homeCategories: document.getElementById("homeCategories"),
-      homeSections: document.getElementById("homeSections"),
-      overviewArea: document.getElementById("overviewArea"),
-      overviewCards: document.getElementById("overviewCards"),
-      plugins: document.getElementById("plugins")
-    };
+  <script>${clientScript}</script>
+</body>
+</html>`;
+}
-    const fetchJson = async (url, init) => {
-      const response = await fetch(url, init);
-      if (!response.ok) {
-        throw new Error(await response.text());
+// src/templates/layouts/default.ts
+function escapeHtml2(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+}
+function renderDefaultLayout(context) {
+  const safeName = escapeHtml2(context.dashboardName);
+  const design = context.setupDesign ?? {};
+  const scriptData = JSON.stringify({ basePath: context.basePath });
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${safeName}</title>
+    <style>
+      :root {
+        color-scheme: dark;
+        --bg: ${design.bg ?? "#08090f"};
+        --content-bg: ${design.contentBg ?? "radial-gradient(circle at top right, #171a2f, #08090f)"};
+        --panel: ${design.panel ?? "rgba(20, 23, 43, 0.5)"};
+        --panel-2: ${design.panel2 ?? "rgba(0, 0, 0, 0.4)"};
+        --text: ${design.text ?? "#e0e6ff"};
+        --muted: ${design.muted ?? "#8a93bc"};
+        --primary: ${design.primary ?? "#5865F2"};
+        --primary-glow: rgba(88, 101, 242, 0.4);
+        --success: ${design.success ?? "#00E676"};
+        --danger: ${design.danger ?? "#FF3D00"};
+        --border: ${design.border ?? "rgba(255, 255, 255, 0.05)"};
       }
-      return response.json();
-    };
-    const buildApiUrl = (path) => {
-      if (!state.selectedGuildId) {
-        return dashboardConfig.basePath + path;
+      * { box-sizing: border-box; }
+      body {
+        margin: 0;
+        padding: 24px; /* Creates the outer gap for the floating effect */
+        height: 100vh;
+        font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        background: var(--content-bg); /* Applies gradient to entire screen */
+        color: var(--text);
+        overflow: hidden;
       }
-      const separator = path.includes("?") ? "&" : "?";
-      return dashboardConfig.basePath + path + separator + "guildId=" + encodeURIComponent(state.selectedGuildId);
-    };
-    const escapeHtml = (value) => String(value)
-      .replaceAll("&", "&amp;")
-      .replaceAll("<", "&lt;")
-      .replaceAll(">", "&gt;")
-      .replaceAll('"', "&quot;")
-      .replaceAll("'", "&#039;");
-    const normalizeBoxWidth = (value) => {
-      const numeric = Number(value);
-      if (numeric === 50 || numeric === 33 || numeric === 20) {
-        return numeric;
+      /* FLOATING ISLAND STRUCTURE */
+      .layout {
+        display: flex;
+        gap: 24px; /* Gap between the floating islands */
+        height: 100%;
+        width: 100%;
       }
-      return 100;
-    };
-    const applySetupDesign = () => {
-      const root = document.documentElement;
-      const design = dashboardConfig.setupDesign || {};
-      const mappings = {
-        bg: "--bg",
-        rail: "--rail",
-        contentBg: "--content-bg",
-        panel: "--panel",
-        panel2: "--panel-2",
-        text: "--text",
-        muted: "--muted",
-        primary: "--primary",
-        success: "--success",
-        warning: "--warning",
-        danger: "--danger",
-        info: "--info",
-        border: "--border"
-      };
-      Object.entries(mappings).forEach(([key, cssVar]) => {
-        const value = design[key];
-        if (typeof value === "string" && value.trim().length > 0) {
-          root.style.setProperty(cssVar, value.trim());
-        }
-      });
-    };
-    const makeButton = (action, pluginId, panelId, panelElement) => {
-      const button = document.createElement("button");
-      button.textContent = action.label;
-      const variantClass = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
-      button.className = [variantClass, "cursor-pointer"].filter(Boolean).join(" ");
-      button.addEventListener("click", async () => {
-        button.disabled = true;
-        try {
-          let payload = {};
-          if (action.collectFields && panelElement) {
-            const values = {};
-            const inputs = panelElement.querySelectorAll("[data-plugin-field-id]");
-            inputs.forEach((inputEl) => {
-              const fieldId = inputEl.dataset.pluginFieldId;
-              const fieldType = inputEl.dataset.pluginFieldType || "text";
-              if (!fieldId) {
-                return;
-              }
-              values[fieldId] = toFieldValue({ type: fieldType }, inputEl);
-            });
-            payload = {
-              panelId,
-              values
-            };
-          }
-          const actionUrl = buildApiUrl("/api/plugins/" + encodeURIComponent(pluginId) + "/" + encodeURIComponent(action.id));
-          const result = await fetchJson(actionUrl, {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(payload)
-          });
-          if (result.message) {
-            alert(result.message);
-          }
-          if (result.refresh) {
-            await refreshContent();
-          }
-        } catch (error) {
-          alert(error instanceof Error ? error.message : "Action failed");
-        } finally {
-          button.disabled = false;
-        }
-      });
-      return button;
-    };
-    const renderCards = (cards) => {
-      if (!cards.length) {
-        el.overviewCards.innerHTML = '<div class="empty">No cards configured yet.</div>';
-        return;
+      /* Base styles for all floating windows */
+      .floating-window {
+        background: var(--panel);
+        backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+        border: 1px solid var(--border);
+        border-radius: 24px;
+        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
       }
-      el.overviewCards.innerHTML = cards.map((card) => {
-        const subtitle = card.subtitle ? '<div class="subtitle">' + escapeHtml(card.subtitle) + '</div>' : "";
-        return '<article class="panel">'
-          + '<div class="title">' + escapeHtml(card.title) + '</div>'
-          + '<div class="value">' + escapeHtml(card.value) + '</div>'
-          + subtitle
-          + '</article>';
-      }).join("");
-    };
-    const shortName = (name) => {
-      if (!name) return "?";
-      const parts = String(name).trim().split(/s+/).filter(Boolean);
-      if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
-      return (parts[0][0] + parts[1][0]).toUpperCase();
-    };
-    const addAvatarOrFallback = (button, item) => {
-      if (!item.avatarUrl) {
-        const fallback = document.createElement("span");
-        fallback.className = "server-fallback";
-        fallback.textContent = item.short;
-        button.appendChild(fallback);
-        return;
+      /* 1. SERVER RAIL */
+      .sidebar {
+        width: 84px;
+        flex-shrink: 0;
+        padding: 20px 0;
+        z-index: 10;
+        overflow-y: auto;
+        scrollbar-width: none;
+        /* Changed from flex to block to stop height crushing */
+        display: block;
       }
+      .sidebar::-webkit-scrollbar { display: none; }
+      .server-rail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 16px;
+        width: 100%;
+        /* This tells the rail it is allowed to be taller than the screen */
+        min-height: min-content;
+      }
+      .server-separator {
+        width: 32px;
+        height: 2px;
+        min-height: 2px; /* Lock separator height */
+        background: var(--border);
+        border-radius: 2px;
+      }
+      .server-item {
+        position: relative;
+        /* The !important tags force the browser to respect the size */
+        width: 54px !important;
+        height: 54px !important;
+        min-width: 54px !important;
+        min-height: 54px !important;
+        flex: 0 0 54px !important;
+        border-radius: 16px;
+        border: 1px solid transparent;
+        background: var(--panel-2);
+        color: var(--text);
+        font-weight: 700;
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        padding: 0;
+        overflow: visible;
+      }
+      .server-item:hover { border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); transform: translateY(-3px); }
+      .server-item.active { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 20px var(--primary-glow); color: #fff; }
+      .server-item-indicator { position: absolute; left: -16px; width: 6px; height: 20px; border-radius: 4px; background: var(--primary); opacity: 0; transition: all 0.3s ease; box-shadow: 0 0 10px var(--primary-glow); }
+      .server-item.active .server-item-indicator { opacity: 1; height: 32px; }
+      .server-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+      .server-fallback { font-weight: 700; font-size: 1rem; }
+      .server-status { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid #141622; background: var(--success); z-index: 2; box-shadow: 0 0 10px var(--success); }
+      .server-status.offline { background: var(--muted); box-shadow: none; border-color: transparent; }
+      /* 2. SECONDARY SIDEBAR */
+      .secondary-sidebar {
+        width: 280px; flex-shrink: 0;
+        display: flex; flex-direction: column; z-index: 9;
+        overflow: hidden; /* Keeps user area inside border radius */
+      }
+      .sidebar-header { height: 72px; padding: 0 24px; display: flex; align-items: center; font-weight: 800; font-size: 18px; letter-spacing: 1px; text-transform: uppercase; background: linear-gradient(90deg, #fff, var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; border-bottom: 1px solid var(--border); flex-shrink: 0; }
+      .sidebar-content { flex: 1; overflow-y: auto; padding: 20px 16px; scrollbar-width: none; }
+      .sidebar-content::-webkit-scrollbar { display: none; }
+      .category-header { font-size: 11px; font-weight: 800; color: var(--primary); text-transform: uppercase; margin: 24px 8px 8px; letter-spacing: 1.5px; opacity: 0.8; }
+      .category-header:first-child { margin-top: 0; }
+      .channel-btn {
+        width: 100%; text-align: left; padding: 12px 16px; border-radius: 12px; background: transparent; border: 1px solid transparent;
+        color: var(--muted); display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; margin-bottom: 6px; transition: all 0.2s;
+      }
+      .channel-btn:hover { background: var(--panel-2); color: var(--text); transform: translateX(4px); }
+      .channel-btn.active { background: rgba(88, 101, 242, 0.15); border-left: 4px solid var(--primary); color: #fff; transform: translateX(4px); }
+      .user-area { height: 80px; background: rgba(0,0,0,0.2); padding: 0 20px; display: flex; align-items: center; flex-shrink: 0; gap: 14px; border-top: 1px solid var(--border); }
+      .user-avatar-small {
+        width: 44px;
+        height: 44px;
+        min-width: 44px;
+        min-height: 44px;
+        flex: 0 0 44px;
+        border-radius: 14px;
+        background: var(--primary);
+        border: 2px solid var(--border);
+        padding: 2px;
+      }
+      .user-details { display: flex; flex-direction: column; line-height: 1.4; }
+      .user-details .name { color: #fff; font-size: 15px; font-weight: 700; }
+      .user-details .sub { color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
-      const avatar = document.createElement("img");
-      avatar.className = "server-avatar";
-      avatar.src = item.avatarUrl;
-      avatar.alt = item.name;
-      avatar.addEventListener("error", () => {
-        avatar.remove();
-        const fallback = document.createElement("span");
-        fallback.className = "server-fallback";
-        fallback.textContent = item.short;
-        button.appendChild(fallback);
-      });
-      button.appendChild(avatar);
-    };
-    const renderServerRail = () => {
-      const items = [{ id: null, name: "User Dashboard", short: "ME", avatarUrl: state.session?.user?.avatarUrl ?? null, botInGuild: true }].concat(
-        state.guilds.map((guild) => ({
-          id: guild.id,
-          name: guild.name,
-          short: shortName(guild.name),
-          avatarUrl: guild.iconUrl ?? null,
-          botInGuild: guild.botInGuild !== false,
-          inviteUrl: guild.inviteUrl
-        }))
-      );
-      el.serverRail.innerHTML = "";
-      items.forEach((item) => {
-        const button = document.createElement("button");
-        button.className = "server-item cursor-pointer" + (item.id === state.selectedGuildId ? " active" : "");
-        button.title = item.id && !item.botInGuild ? (item.name + " \u2022 Invite bot") : item.name;
-        const activeIndicator = document.createElement("span");
-        activeIndicator.className = "server-item-indicator";
-        button.appendChild(activeIndicator);
-        addAvatarOrFallback(button, item);
-        if (item.id) {
-          const status = document.createElement("span");
-          status.className = "server-status" + (item.botInGuild ? "" : " offline");
-          button.appendChild(status);
-        }
+      /* 3. MAIN CONTENT */
+      .content { flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 24px; }
+      /* Topbar is its own floating island now */
+      .topbar { height: 72px; padding: 0 28px; display: flex; align-items: center; font-weight: 700; font-size: 20px; letter-spacing: 0.5px; z-index: 5; flex-shrink: 0; }
+      /* Container background is transparent so inner panels float over the main gradient */
+      .container { flex: 1; padding: 0 8px 0 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--primary) transparent; }
+      .container::-webkit-scrollbar { width: 6px; }
+      .container::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }
+      .section-title { font-size: 26px; font-weight: 800; margin: 0 0 24px 0; color: #fff; letter-spacing: -0.5px; }
+      .subtitle { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
+      .grid { display: grid; gap: 24px; }
+      .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+      /* The content panels are also floating windows */
+      .panel {
+        background: var(--panel); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
+        border: 1px solid var(--border); border-radius: 20px; padding: 28px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); transition: transform 0.3s, box-shadow 0.3s;
+      }
+      .panel:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(88, 101, 242, 0.1); border-color: rgba(88, 101, 242, 0.3); }
+      /* Inputs & Forms */
+      .home-sections { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
+      .home-section-panel { flex: 0 0 100%; max-width: 100%; }
+      .home-width-50 { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
+      @media (max-width: 1300px) { .home-width-50 { flex-basis: 100%; max-width: 100%; } }
+      .home-fields { display: grid; gap: 20px; margin-top: 24px; }
+      .home-field { display: grid; gap: 10px; }
+      .home-field label { color: var(--muted); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
+      .home-input, .home-textarea, .home-select {
+        width: 100%; border: 1px solid var(--border); background: var(--panel-2); color: #fff;
+        border-radius: 12px; padding: 14px 18px; font-size: 15px; outline: none; transition: all 0.3s ease;
+      }
+      .home-input:focus, .home-textarea:focus, .home-select:focus {
+        border-color: var(--primary); box-shadow: 0 0 15px var(--primary-glow); background: rgba(0,0,0,0.6);
+      }
+      .home-textarea { min-height: 120px; resize: vertical; }
+      .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
+      button {
+        border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: #fff;
+        border-radius: 10px; padding: 12px 24px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
+        transition: all 0.2s; backdrop-filter: blur(4px);
+      }
+      button:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }
+      button.primary { background: linear-gradient(135deg, var(--primary), #7c88f9); border: none; box-shadow: 0 4px 15px var(--primary-glow); }
+      button.primary:hover { box-shadow: 0 6px 20px var(--primary-glow); filter: brightness(1.1); }
+      button.danger { background: linear-gradient(135deg, var(--danger), #ff7a59); border: none; box-shadow: 0 4px 15px rgba(255, 61, 0, 0.3); }
+      .cursor-pointer { cursor: pointer; }
+      .home-field-row { display: flex; align-items: center; gap: 12px; }
+      .home-checkbox { width: 24px; height: 24px; accent-color: var(--primary); border-radius: 6px; }
+      .lookup-wrap { position: relative; }
+      .lookup-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; background: #0e101a; border: 1px solid var(--primary); border-radius: 12px; max-height: 220px; overflow: auto; display: none; box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--primary-glow); }
+      .lookup-item { width: 100%; text-align: left; padding: 14px; background: transparent; border: none; border-bottom: 1px solid var(--border); color: var(--text); }
+      .lookup-item:hover { background: var(--primary); color: #fff; }
+      .value { font-size: 36px; font-weight: 800; background: linear-gradient(to right, #fff, #aab4ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-top: 10px; }
+      .title { color: var(--primary); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; }
+      .list-editor { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: grid; gap: 12px; }
+      .list-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: rgba(0,0,0,0.5); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; transition: border-color 0.2s; }
+      .list-item:hover { border-color: var(--primary); }
+      .list-input { width: 100%; border: none; background: transparent; color: #fff; outline: none; font-size: 15px; }
+      .drag-handle { color: var(--primary); font-size: 18px; }
+      ${design.customCss ?? ""}
+    </style>
+</head>
+<body>
+    <div class="layout">
+        <nav class="sidebar floating-window">
+            <div id="serverRail" class="server-rail"></div>
+        </nav>
+        <aside class="secondary-sidebar floating-window">
+            <header class="sidebar-header brand">${safeName}</header>
+            <div class="sidebar-content">
+                <div class="category-header">System</div>
+                <button id="tabHome" class="channel-btn cursor-pointer active">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
+                    Dashboard
+                </button>
+                <button id="tabPlugins" class="channel-btn cursor-pointer">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>
+                    Extensions
+                </button>
+                <div class="category-header" style="margin-top: 32px;">Modules</div>
+                <div id="homeCategories"></div>
+            </div>
+            <div class="user-area" id="userMeta">
+                <div class="user-avatar-small"></div>
+                <div class="user-details">
+                    <span class="name">Initializing...</span>
+                    <span class="sub">Standby</span>
+                </div>
+            </div>
+        </aside>
+        <main class="content">
+            <header class="topbar floating-window">
+                <span id="centerTitle" style="background: linear-gradient(90deg, #fff, var(--muted)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Interface Active</span>
+            </header>
+            <div class="container">
+                <section id="homeArea">
+                    <div class="section-title">Configuration Matrix</div>
+                    <section id="homeSections" class="home-sections"></section>
+                    <section id="overviewArea">
+                        <div class="section-title" style="margin-top: 24px;">Telemetry Data</div>
+                        <section id="overviewCards" class="grid cards"></section>
+                    </section>
+                </section>
+                <section id="pluginsArea" style="display:none;">
+                    <div class="section-title">Active Extensions</div>
+                    <section id="plugins" class="grid"></section>
+                </section>
+            </div>
+        </main>
+    </div>
-        button.addEventListener("click", async () => {
-          if (item.id && !item.botInGuild && item.inviteUrl) {
-            const opened = window.open(item.inviteUrl, "_blank", "noopener,noreferrer");
-            if (!opened && typeof alert === "function") {
-              alert("Popup blocked. Please allow popups to open the invite page.");
-            }
-            return;
-          }
+    <script>
+    const dashboardConfig = ${scriptData};
+    const state = { session: null, guilds: [], selectedGuildId: null, homeCategories: [], selectedHomeCategoryId: null, activeMainTab: "home" };
-          state.selectedGuildId = item.id;
-          renderServerRail();
-          updateContextLabel();
-          await refreshContent();
-        });
-        el.serverRail.appendChild(button);
-      });
+    const el = {
+        serverRail: document.getElementById("serverRail"), userMeta: document.getElementById("userMeta"),
+        centerTitle: document.getElementById("centerTitle"), tabHome: document.getElementById("tabHome"),
+        tabPlugins: document.getElementById("tabPlugins"), homeArea: document.getElementById("homeArea"),
+        pluginsArea: document.getElementById("pluginsArea"), homeCategories: document.getElementById("homeCategories"),
+        homeSections: document.getElementById("homeSections"), overviewArea: document.getElementById("overviewArea"),
+        overviewCards: document.getElementById("overviewCards"), plugins: document.getElementById("plugins")
     };
-    const applyMainTab = () => {
-      const homeActive = state.activeMainTab === "home";
-      el.homeArea.style.display = homeActive ? "block" : "none";
-      el.pluginsArea.style.display = homeActive ? "none" : "block";
-      el.tabHome.className = "main-tab cursor-pointer" + (homeActive ? " active" : "");
-      el.tabPlugins.className = "main-tab cursor-pointer" + (!homeActive ? " active" : "");
+    const fetchJson = async (url, init) => {
+        const response = await fetch(url, init);
+        if (!response.ok) throw new Error(await response.text());
+        return response.json();
     };
-    const updateContextLabel = () => {
-      if (!state.selectedGuildId) {
-        el.centerTitle.textContent = "User Dashboard";
-        return;
-      }
-      const selectedGuild = state.guilds.find((guild) => guild.id === state.selectedGuildId);
-      el.centerTitle.textContent = selectedGuild ? (selectedGuild.name + " Dashboard") : "Server Dashboard";
+    const buildApiUrl = (path) => {
+        if (!state.selectedGuildId) return dashboardConfig.basePath + path;
+        const separator = path.includes("?") ? "&" : "?";
+        return dashboardConfig.basePath + path + separator + "guildId=" + encodeURIComponent(state.selectedGuildId);
     };
-    const renderHomeCategories = () => {
-      if (!state.homeCategories.length) {
-        el.homeCategories.innerHTML = "";
-        return;
-      }
+    const escapeHtml = (value) => String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+    const normalizeBoxWidth = (value) => [50, 33, 20].includes(Number(value)) ? Number(value) : 100;
-      el.homeCategories.innerHTML = "";
-      state.homeCategories.forEach((category) => {
+    const makeButton = (action, pluginId, panelId, panelElement) => {
         const button = document.createElement("button");
-        button.className = "home-category-btn cursor-pointer" + (state.selectedHomeCategoryId === category.id ? " active" : "");
-        button.textContent = category.label;
-        button.title = category.description || category.label;
+        button.textContent = action.label;
+        const variantClass = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
+        button.className = [variantClass, "cursor-pointer"].filter(Boolean).join(" ");
         button.addEventListener("click", async () => {
-          state.selectedHomeCategoryId = category.id;
-          renderHomeCategories();
-          await refreshContent();
+            button.disabled = true;
+            try {
+                let payload = {};
+                if (action.collectFields && panelElement) {
+                    const values = {};
+                    panelElement.querySelectorAll("[data-plugin-field-id]").forEach((inputEl) => {
+                        const fieldId = inputEl.dataset.pluginFieldId;
+                        if (fieldId) values[fieldId] = toFieldValue({ type: inputEl.dataset.pluginFieldType || "text" }, inputEl);
+                    });
+                    payload = { panelId, values };
+                }
+                const result = await fetchJson(buildApiUrl("/api/plugins/" + encodeURIComponent(pluginId) + "/" + encodeURIComponent(action.id)), {
+                    method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(payload)
+                });
+                if (result.message) alert(result.message);
+                if (result.refresh) await refreshContent();
+            } catch (error) { alert(error instanceof Error ? error.message : "Action failed"); }
+            finally { button.disabled = false; }
         });
-        el.homeCategories.appendChild(button);
-      });
+        return button;
     };
-    const toFieldValue = (field, element) => {
-      if (field.type === "string-list") {
-        const raw = element.dataset.listValues;
-        if (!raw) {
-          return [];
-        }
+    const renderCards = (cards) => {
+        if (!cards.length) { el.overviewCards.innerHTML = '<div style="color:var(--muted)">Awaiting telemetry...</div>'; return; }
+        el.overviewCards.innerHTML = cards.map((card) =>
+            '<article class="panel"><div class="title">' + escapeHtml(card.title) + '</div><div class="value">' + escapeHtml(card.value) + '</div>' +
+            (card.subtitle ? '<div class="subtitle">' + escapeHtml(card.subtitle) + '</div>' : "") + '</article>'
+        ).join("");
+    };
-        try {
-          const parsed = JSON.parse(raw);
-          return Array.isArray(parsed) ? parsed : [];
-        } catch {
-          return [];
-        }
-      }
+    const shortName = (name) => {
+        if (!name) return "?";
+        const parts = String(name).trim().split(/\\s+/).filter(Boolean);
+        return parts.length === 1 ? parts[0].slice(0, 2).toUpperCase() : (parts[0][0] + parts[1][0]).toUpperCase();
+    };
-      if (field.type === "role-search" || field.type === "channel-search" || field.type === "member-search") {
-        const raw = element.dataset.selectedObject;
-        if (!raw) {
-          return null;
+    const addAvatarOrFallback = (button, item) => {
+        if (!item.avatarUrl) {
+            const fallback = document.createElement("span");
+            fallback.className = "server-fallback";
+            fallback.textContent = item.short;
+            button.appendChild(fallback);
+            return;
         }
+        const avatar = document.createElement("img");
+        avatar.className = "server-avatar";
+        avatar.src = item.avatarUrl;
+        avatar.alt = item.name;
+        avatar.addEventListener("error", () => {
+            avatar.remove();
+            const fallback = document.createElement("span");
+            fallback.className = "server-fallback";
+            fallback.textContent = item.short;
+            button.appendChild(fallback);
+        });
+        button.appendChild(avatar);
+    };
-        try {
-          return JSON.parse(raw);
-        } catch {
-          return null;
-        }
-      }
+    const renderServerRail = () => {
+        const meItem = { id: null, name: "Global Control", short: "HQ", avatarUrl: state.session?.user?.avatarUrl ?? null, botInGuild: true };
+        el.serverRail.innerHTML = "";
+        const meBtn = document.createElement("button");
+        meBtn.className = "server-item cursor-pointer" + (null === state.selectedGuildId ? " active" : "");
+        meBtn.title = meItem.name;
+        const meInd = document.createElement("span");
+        meInd.className = "server-item-indicator";
+        meBtn.appendChild(meInd);
+        addAvatarOrFallback(meBtn, meItem);
+        meBtn.addEventListener("click", async () => {
+            state.selectedGuildId = null;
+            renderServerRail();
+            updateContextLabel();
+            await refreshContent();
+        });
+        el.serverRail.appendChild(meBtn);
+        const sep = document.createElement("div");
+        sep.className = "server-separator";
+        el.serverRail.appendChild(sep);
+        state.guilds.forEach((guild) => {
+            const item = { id: guild.id, name: guild.name, short: shortName(guild.name), avatarUrl: guild.iconUrl ?? null, botInGuild: guild.botInGuild !== false, inviteUrl: guild.inviteUrl };
+            const button = document.createElement("button");
+            button.className = "server-item cursor-pointer" + (item.id === state.selectedGuildId ? " active" : "");
+            button.title = item.id && !item.botInGuild ? (item.name + " \u2022 Deploy Bot") : item.name;
+            const activeIndicator = document.createElement("span");
+            activeIndicator.className = "server-item-indicator";
+            button.appendChild(activeIndicator);
+            addAvatarOrFallback(button, item);
+            if (item.id) {
+                const status = document.createElement("span");
+                status.className = "server-status" + (item.botInGuild ? "" : " offline");
+                button.appendChild(status);
+            }
-      if (field.type === "boolean") {
-        return Boolean(element.checked);
-      }
+            button.addEventListener("click", async () => {
+                if (item.id && !item.botInGuild && item.inviteUrl) {
+                    const opened = window.open(item.inviteUrl, "_blank", "noopener,noreferrer");
+                    if (!opened) alert("Popup blocked. Please allow popups to open the deployment page.");
+                    return;
+                }
+                state.selectedGuildId = item.id;
+                renderServerRail();
+                updateContextLabel();
+                await refreshContent();
+            });
+            el.serverRail.appendChild(button);
+        });
+    };
-      if (field.type === "number") {
-        if (element.value === "") {
-          return null;
-        }
-        return Number(element.value);
-      }
+    const applyMainTab = () => {
+        const homeActive = state.activeMainTab === "home";
+        el.homeArea.style.display = homeActive ? "block" : "none";
+        el.pluginsArea.style.display = homeActive ? "none" : "block";
+        el.tabHome.classList.toggle("active", homeActive);
+        el.tabPlugins.classList.toggle("active", !homeActive);
+    };
-      return element.value;
+    const updateContextLabel = () => {
+        if (!state.selectedGuildId) { el.centerTitle.textContent = "Global Dashboard"; return; }
+        const selectedGuild = state.guilds.find((guild) => guild.id === state.selectedGuildId);
+        el.centerTitle.textContent = selectedGuild ? selectedGuild.name : "System Interface";
     };
-    const setupStringListField = (field, input, fieldWrap) => {
-      const editor = document.createElement("div");
-      editor.className = "list-editor";
-      const itemsWrap = document.createElement("div");
-      itemsWrap.className = "list-items";
-      const addButton = document.createElement("button");
-      addButton.type = "button";
-      addButton.className = "list-add cursor-pointer";
-      addButton.textContent = "Add Button";
-      const normalizeValues = () => {
-        const values = Array.from(itemsWrap.querySelectorAll(".list-input"))
-          .map((item) => item.value.trim())
-          .filter((item) => item.length > 0);
-        input.dataset.listValues = JSON.stringify(values);
-      };
+    const renderUserBlock = () => {
+        const user = state.session?.user;
+        if (!user) return;
+        const avatarHtml = user.avatarUrl ? '<img src="'+user.avatarUrl+'" style="width:100%;height:100%;border-radius:12px;object-fit:cover;">' : '';
+        el.userMeta.innerHTML =
+            '<div class="user-avatar-small">'+avatarHtml+'</div>' +
+            '<div class="user-details"><span class="name">' + escapeHtml(user.global_name || user.username) + '</span><span class="sub">' + state.guilds.length + ' Nodes</span></div>';
+    };
-      const makeRow = (value = "") => {
-        const row = document.createElement("div");
-        row.className = "list-item";
-        row.draggable = true;
-        const handle = document.createElement("span");
-        handle.className = "drag-handle cursor-pointer";
-        handle.textContent = "\u22EE\u22EE";
-        const textInput = document.createElement("input");
-        textInput.type = "text";
-        textInput.className = "list-input";
-        textInput.value = value;
-        textInput.placeholder = "Button label";
-        textInput.addEventListener("input", normalizeValues);
-        const removeButton = document.createElement("button");
-        removeButton.type = "button";
-        removeButton.className = "cursor-pointer";
-        removeButton.textContent = "\xD7";
-        removeButton.addEventListener("click", () => {
-          row.remove();
-          normalizeValues();
+    const renderHomeCategories = () => {
+        el.homeCategories.innerHTML = "";
+        if (!state.homeCategories.length) return;
+        state.homeCategories.forEach((category) => {
+            const button = document.createElement("button");
+            button.className = "channel-btn cursor-pointer" + (state.selectedHomeCategoryId === category.id ? " active" : "");
+            button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg> ' + escapeHtml(category.label);
+            button.title = category.description || category.label;
+            button.addEventListener("click", async () => { state.selectedHomeCategoryId = category.id; renderHomeCategories(); await refreshContent(); });
+            el.homeCategories.appendChild(button);
         });
+    };
-        row.addEventListener("dragstart", () => {
-          row.classList.add("dragging");
-        });
-        row.addEventListener("dragend", () => {
-          row.classList.remove("dragging");
-          normalizeValues();
-        });
+    const toFieldValue = (field, element) => {
+        if (field.type === "string-list") { try { return JSON.parse(element.dataset.listValues || "[]"); } catch { return []; } }
+        if (["role-search", "channel-search", "member-search"].includes(field.type)) { try { return JSON.parse(element.dataset.selectedObject || "null"); } catch { return null; } }
+        if (field.type === "boolean") return Boolean(element.checked);
+        if (field.type === "number") return element.value === "" ? null : Number(element.value);
+        return element.value;
+    };
-        row.appendChild(handle);
-        row.appendChild(textInput);
-        row.appendChild(removeButton);
-        return row;
-      };
+    const setupStringListField = (field, input, fieldWrap) => {
+        const editor = document.createElement("div"); editor.className = "list-editor";
+        const itemsWrap = document.createElement("div"); itemsWrap.className = "list-items";
+        const addButton = document.createElement("button"); addButton.type = "button"; addButton.className = "list-add cursor-pointer"; addButton.textContent = "+ Add Sequence";
+        const normalizeValues = () => { input.dataset.listValues = JSON.stringify(Array.from(itemsWrap.querySelectorAll(".list-input")).map(i => i.value.trim()).filter(i => i.length > 0)); };
+        const makeRow = (value = "") => {
+            const row = document.createElement("div"); row.className = "list-item"; row.draggable = true;
+            const handle = document.createElement("span"); handle.className = "drag-handle cursor-pointer"; handle.innerHTML = "\u28FF";
+            const textInput = document.createElement("input"); textInput.type = "text"; textInput.className = "list-input"; textInput.value = value;
+            textInput.addEventListener("input", normalizeValues);
+            const removeBtn = document.createElement("button"); removeBtn.type = "button"; removeBtn.className = "cursor-pointer"; removeBtn.textContent = "\xD7"; removeBtn.style.padding = "4px 8px"; removeBtn.style.background = "transparent"; removeBtn.style.color = "var(--danger)";
+            removeBtn.addEventListener("click", () => { row.remove(); normalizeValues(); });
+            row.append(handle, textInput, removeBtn);
+            return row;
+        };
+        const initialValues = Array.isArray(field.value) ? field.value.map(String) : [];
+        if (!initialValues.length) initialValues.push("Value_01");
+        initialValues.forEach(v => itemsWrap.appendChild(makeRow(v)));
+        addButton.addEventListener("click", () => { itemsWrap.appendChild(makeRow("")); normalizeValues(); });
+        editor.append(itemsWrap, addButton); fieldWrap.appendChild(editor); normalizeValues();
+    };
-      itemsWrap.addEventListener("dragover", (event) => {
-        event.preventDefault();
-        const dragging = itemsWrap.querySelector(".dragging");
-        if (!dragging) {
-          return;
-        }
+    const showLookupResults = (container, items, labelResolver, onSelect) => {
+        container.innerHTML = "";
+        if (!items.length) { container.style.display = "none"; return; }
+        items.forEach(item => {
+            const btn = document.createElement("button"); btn.type = "button"; btn.className = "lookup-item cursor-pointer"; btn.textContent = labelResolver(item);
+            btn.addEventListener("click", () => { onSelect(item); container.style.display = "none"; });
+            container.appendChild(btn);
+        });
+        container.style.display = "block";
+    };
-        const siblings = Array.from(itemsWrap.querySelectorAll(".list-item:not(.dragging)"));
-        let inserted = false;
+    const setupLookupField = (field, input, fieldWrap) => {
+        const wrap = document.createElement("div"); wrap.className = "lookup-wrap";
+        const results = document.createElement("div"); results.className = "lookup-results";
+        wrap.append(input, results); fieldWrap.appendChild(wrap);
+        const runSearch = async () => {
+            const query = String(input.value || "");
+            if (query.length < 1) { results.style.display = "none"; return; }
+            try {
+                const params = new URLSearchParams({ q: query, limit: "10" });
+                const ep = field.type === "role-search" ? "roles" : field.type === "channel-search" ? "channels" : "members";
+                const payload = await fetchJson(buildApiUrl("/api/lookup/" + ep + "?" + params));
+                showLookupResults(results, payload[ep] || [],
+                    (item) => field.type === "channel-search" ? "#"+item.name : (item.name || item.user?.username),
+                    (item) => { input.value = item.name || item.user?.username; input.dataset.selectedObject = JSON.stringify(item); }
+                );
+            } catch { results.style.display = "none"; }
+        };
+        input.addEventListener("input", () => { input.dataset.selectedObject = ""; runSearch(); });
+        input.addEventListener("blur", () => setTimeout(() => { results.style.display = "none"; }, 150));
+    };
-        for (const sibling of siblings) {
-          const rect = sibling.getBoundingClientRect();
-          if (event.clientY < rect.top + rect.height / 2) {
-            itemsWrap.insertBefore(dragging, sibling);
-            inserted = true;
-            break;
-          }
-        }
+    const renderHomeSections = (sections) => {
+        el.homeSections.innerHTML = "";
+        if (!sections.length) return;
+        sections.forEach((section) => {
+            const wrap = document.createElement("article");
+            wrap.className = "panel home-section-panel home-width-" + normalizeBoxWidth(section.width);
+            const heading = document.createElement("h3"); heading.textContent = section.title; heading.style.margin = "0"; wrap.appendChild(heading);
+            if (section.description) { const desc = document.createElement("div"); desc.className = "subtitle"; desc.textContent = section.description; wrap.appendChild(desc); }
+            if (section.fields?.length) {
+                const fieldsWrap = document.createElement("div"); fieldsWrap.className = "home-fields";
+                section.fields.forEach((field) => {
+                    const fieldWrap = document.createElement("div"); fieldWrap.className = "home-field";
+                    const label = document.createElement("label"); label.textContent = field.label; fieldWrap.appendChild(label);
+                    let input;
+                    if (field.type === "textarea") {
+                        input = document.createElement("textarea"); input.className = "home-textarea"; input.value = field.value == null ? "" : String(field.value);
+                    } else if (field.type === "select") {
+                        input = document.createElement("select"); input.className = "home-select cursor-pointer";
+                        (field.options || []).forEach((opt) => {
+                            const optionEl = document.createElement("option"); optionEl.value = opt.value; optionEl.textContent = opt.label;
+                            if (String(field.value ?? "") === opt.value) optionEl.selected = true; input.appendChild(optionEl);
+                        });
+                    } else if (field.type === "boolean") {
+                        const row = document.createElement("div"); row.className = "home-field-row";
+                        input = document.createElement("input"); input.type = "checkbox"; input.className = "home-checkbox cursor-pointer"; input.checked = Boolean(field.value);
+                        const stateText = document.createElement("span"); stateText.textContent = input.checked ? "Enabled" : "Disabled";
+                        input.addEventListener("change", () => stateText.textContent = input.checked ? "Enabled" : "Disabled");
+                        row.append(input, stateText); fieldWrap.appendChild(row);
+                    } else {
+                        input = document.createElement("input"); input.className = "home-input"; input.type = field.type === "number" ? "number" : field.type === "url" ? "url" : "text"; input.value = field.value == null ? "" : String(field.value);
+                    }
+                    if (input) {
+                        input.dataset.homeFieldId = field.id; input.dataset.homeFieldType = field.type;
+                        if (field.placeholder) input.placeholder = field.placeholder;
+                        if (field.readOnly) { input.readOnly = true; input.disabled = true; input.style.opacity = "0.6"; }
+                        if (["role-search", "channel-search", "member-search"].includes(field.type)) setupLookupField(field, input, fieldWrap);
+                        else if (field.type === "string-list") setupStringListField(field, input, fieldWrap);
+                        else if (field.type !== "boolean") fieldWrap.appendChild(input);
+                    }
+                    fieldsWrap.appendChild(fieldWrap);
+                });
+                wrap.appendChild(fieldsWrap);
+            }
-        if (!inserted) {
-          itemsWrap.appendChild(dragging);
-        }
-      });
+            if (section.actions?.length) {
+                const actions = document.createElement("div"); actions.className = "actions";
+                section.actions.forEach((action) => {
+                    const button = document.createElement("button"); button.textContent = action.label;
+                    const variantClass = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
+                    button.className = [variantClass, "cursor-pointer"].filter(Boolean).join(" ");
+                    button.addEventListener("click", async () => {
+                        button.disabled = true;
+                        try {
+                            const values = {};
+                            wrap.querySelectorAll("[data-home-field-id]").forEach((el) => { values[el.dataset.homeFieldId] = toFieldValue({ type: el.dataset.homeFieldType }, el); });
+                            const result = await fetchJson(buildApiUrl("/api/home/" + encodeURIComponent(action.id)), { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sectionId: section.id, values }) });
+                            if (result.message) alert(result.message);
+                            if (result.refresh) await refreshContent();
+                        } catch (error) { alert("Execution Failed"); } finally { button.disabled = false; }
+                    });
+                    actions.appendChild(button);
+                });
+                wrap.appendChild(actions);
+            }
+            el.homeSections.appendChild(wrap);
+        });
+    };
-      const initialValues = Array.isArray(field.value)
-        ? field.value.map((item) => String(item))
-        : [];
-      if (initialValues.length === 0) {
-        initialValues.push("Yes", "No");
-      }
+    const renderPlugins = (plugins) => {
+        el.plugins.innerHTML = "";
+        if (!plugins.length) { el.plugins.innerHTML = '<div style="color:var(--muted)">No modules online.</div>'; return; }
+        plugins.forEach((plugin) => {
+            const wrap = document.createElement("article"); wrap.className = "panel";
+            const heading = document.createElement("h3"); heading.textContent = plugin.name; heading.style.margin="0"; wrap.appendChild(heading);
+            if (plugin.description) { const desc = document.createElement("div"); desc.className = "subtitle"; desc.textContent = plugin.description; wrap.appendChild(desc); }
+            (plugin.panels || []).forEach((panel) => {
+                const pBody = document.createElement("div"); pBody.style.marginTop = "24px";
+                const pTitle = document.createElement("h4"); pTitle.textContent = panel.title; pTitle.style.margin = "0 0 12px 0"; pTitle.style.color = "var(--primary)"; pTitle.style.textTransform = "uppercase"; pBody.appendChild(pTitle);
+                if (panel.fields?.length) {
+                    const fWrap = document.createElement("div"); fWrap.className = "home-fields";
+                    panel.fields.forEach((field) => {
+                        const fw = document.createElement("div"); fw.className = "home-field";
+                        if (!field.editable) {
+                            fw.innerHTML = '<label>' + escapeHtml(field.label) + '</label><div style="padding:14px 18px;background:var(--panel-2);border-radius:12px;border:1px solid var(--border);">' + escapeHtml(field.value) + '</div>';
+                        } else {
+                            fw.innerHTML = '<label>' + escapeHtml(field.label) + '</label><input type="text" class="home-input" data-plugin-field-id="'+field.id+'" value="'+escapeHtml(field.value)+'">';
+                        }
+                        fWrap.appendChild(fw);
+                    });
+                    pBody.appendChild(fWrap);
+                }
-      initialValues.forEach((value) => {
-        itemsWrap.appendChild(makeRow(value));
-      });
+                if (panel.actions?.length) {
+                    const actions = document.createElement("div"); actions.className = "actions";
+                    panel.actions.forEach((act) => actions.appendChild(makeButton(act, plugin.id, panel.id, pBody)));
+                    pBody.appendChild(actions);
+                }
+                wrap.appendChild(pBody);
+            });
+            el.plugins.appendChild(wrap);
+        });
+    };
-      addButton.addEventListener("click", () => {
-        itemsWrap.appendChild(makeRow(""));
-        normalizeValues();
-      });
+    const refreshContent = async () => {
+        const categoriesPayload = await fetchJson(buildApiUrl("/api/home/categories"));
+        state.homeCategories = categoriesPayload.categories || [];
+        if (!state.selectedHomeCategoryId || !state.homeCategories.some(i => i.id === state.selectedHomeCategoryId)) {
+            state.selectedHomeCategoryId = state.homeCategories.find(i => i.id === "overview")?.id || state.homeCategories[0]?.id || null;
+        }
+        renderHomeCategories();
+        const homePath = state.selectedHomeCategoryId ? "/api/home?categoryId=" + encodeURIComponent(state.selectedHomeCategoryId) : "/api/home";
+        const [home, overview, plugins] = await Promise.all([ fetchJson(buildApiUrl(homePath)), fetchJson(buildApiUrl("/api/overview")), fetchJson(buildApiUrl("/api/plugins")) ]);
-      editor.appendChild(itemsWrap);
-      editor.appendChild(addButton);
-      fieldWrap.appendChild(editor);
-      normalizeValues();
+        renderHomeSections(home.sections || []);
+        el.overviewArea.style.display = state.selectedHomeCategoryId === "overview" ? "block" : "none";
+        renderCards(overview.cards || []);
+        renderPlugins(plugins.plugins || []);
     };
-    const showLookupResults = (container, items, labelResolver, onSelect) => {
-      container.innerHTML = "";
+    const loadInitialData = async () => {
+        const session = await fetchJson(dashboardConfig.basePath + "/api/session");
+        if (!session.authenticated) { window.location.href = dashboardConfig.basePath + "/login"; return; }
-      if (!items.length) {
-        container.style.display = "none";
-        return;
-      }
+        state.session = session;
+        const guilds = await fetchJson(dashboardConfig.basePath + "/api/guilds");
+        state.guilds = guilds.guilds || [];
+        renderUserBlock();
+        renderServerRail();
+        updateContextLabel();
-      items.forEach((item) => {
-        const btn = document.createElement("button");
-        btn.type = "button";
-        btn.className = "lookup-item cursor-pointer";
-        btn.textContent = labelResolver(item);
-        btn.addEventListener("click", () => {
-          onSelect(item);
-          container.style.display = "none";
-        });
-        container.appendChild(btn);
-      });
+        el.tabHome.addEventListener("click", () => { state.activeMainTab = "home"; applyMainTab(); });
+        el.tabPlugins.addEventListener("click", () => { state.activeMainTab = "plugins"; applyMainTab(); });
-      container.style.display = "block";
+        applyMainTab();
+        await refreshContent();
     };
-    const setupLookupField = (field, input, fieldWrap) => {
-      const wrap = document.createElement("div");
-      wrap.className = "lookup-wrap";
-      const results = document.createElement("div");
-      results.className = "lookup-results";
-      const selected = document.createElement("div");
-      selected.className = "lookup-selected";
-      selected.textContent = "No selection";
-      wrap.appendChild(input);
-      wrap.appendChild(results);
-      fieldWrap.appendChild(wrap);
-      fieldWrap.appendChild(selected);
-      const minQueryLength = Math.max(0, field.lookup?.minQueryLength ?? 1);
-      const limit = Math.max(1, Math.min(field.lookup?.limit ?? 10, 50));
-      const runSearch = async () => {
-        const query = String(input.value || "");
-        if (query.length < minQueryLength) {
-          results.style.display = "none";
-          return;
-        }
+    loadInitialData().catch(console.error);
+    </script>
+</body>
+</html>`;
+}
-        try {
-          if (field.type === "role-search") {
-            const params = new URLSearchParams({ q: query, limit: String(limit) });
-            if (field.lookup?.includeManaged !== undefined) {
-              params.set("includeManaged", String(Boolean(field.lookup.includeManaged)));
-            }
+// src/templates/layouts/shadcn-magic.ts
+function escapeHtml3(value) {
+  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
+}
+function renderShadcnMagicLayout(context) {
+  const safeName = escapeHtml3(context.dashboardName);
+  const design = context.setupDesign ?? {};
+  const clientScript = getClientScript(context.basePath, design);
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>${safeName}</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: ${design.bg ?? "#06070b"};
+      --surface: ${design.surface ?? "rgba(10, 12, 18, 0.84)"};
+      --card: ${design.card ?? "rgba(16, 20, 30, 0.82)"};
+      --card-2: ${design.card2 ?? "rgba(23, 29, 42, 0.86)"};
+      --text: ${design.text ?? "#f8fafc"};
+      --muted: ${design.muted ?? "#94a3b8"};
+      --primary: ${design.primary ?? "#c084fc"};
+      --accent: ${design.accent ?? "#22d3ee"};
+      --border: ${design.border ?? "rgba(148, 163, 184, 0.26)"};
+      --radius-lg: ${design.radiusLg ?? "18px"};
+      --radius-md: ${design.radiusMd ?? "12px"};
+    }
-            const payload = await fetchJson(buildApiUrl("/api/lookup/roles?" + params.toString()));
-            showLookupResults(
-              results,
-              payload.roles || [],
-              (item) => "@" + item.name,
-              (item) => {
-                input.value = item.name;
-                input.dataset.selectedObject = JSON.stringify(item);
-                selected.textContent = "Selected role: @" + item.name + " (" + item.id + ")";
-              }
-            );
-          } else if (field.type === "channel-search") {
-            const params = new URLSearchParams({ q: query, limit: String(limit) });
-            if (field.lookup?.nsfw !== undefined) {
-              params.set("nsfw", String(Boolean(field.lookup.nsfw)));
-            }
-            if (field.lookup?.channelTypes && field.lookup.channelTypes.length > 0) {
-              params.set("channelTypes", field.lookup.channelTypes.join(","));
-            }
+    * { box-sizing: border-box; }
-            const payload = await fetchJson(buildApiUrl("/api/lookup/channels?" + params.toString()));
-            showLookupResults(
-              results,
-              payload.channels || [],
-              (item) => "#" + item.name,
-              (item) => {
-                input.value = item.name;
-                input.dataset.selectedObject = JSON.stringify(item);
-                selected.textContent = "Selected channel: #" + item.name + " (" + item.id + ")";
-              }
-            );
-          } else if (field.type === "member-search") {
-            const params = new URLSearchParams({ q: query, limit: String(limit) });
-            const payload = await fetchJson(buildApiUrl("/api/lookup/members?" + params.toString()));
-            showLookupResults(
-              results,
-              payload.members || [],
-              (item) => {
-                const username = item?.user?.username || "unknown";
-                const nick = item?.nick ? " (" + item.nick + ")" : "";
-                return username + nick;
-              },
-              (item) => {
-                const username = item?.user?.username || "unknown";
-                input.value = username;
-                input.dataset.selectedObject = JSON.stringify(item);
-                selected.textContent = "Selected member: " + username + " (" + (item?.user?.id || "unknown") + ")";
-              }
-            );
-          }
-        } catch {
-          results.style.display = "none";
-        }
-      };
+    html, body { min-height: 100%; }
-      input.addEventListener("input", () => {
-        input.dataset.selectedObject = "";
-        selected.textContent = "No selection";
-        runSearch();
-      });
+    body {
+      margin: 0;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      color: var(--text);
+      background:
+        radial-gradient(circle at 8% 12%, rgba(192,132,252,.22), transparent 34%),
+        radial-gradient(circle at 92% 8%, rgba(34,211,238,.18), transparent 36%),
+        radial-gradient(circle at 76% 86%, rgba(244,114,182,.14), transparent 34%),
+        var(--bg);
+    }
-      input.addEventListener("blur", () => {
-        setTimeout(() => {
-          results.style.display = "none";
-        }, 120);
-      });
-    };
+    body::before {
+      content: "";
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background-image:
+        linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
+      background-size: 24px 24px;
+      mask-image: radial-gradient(circle at center, rgba(0,0,0,.9), transparent 72%);
+    }
-    const renderHomeSections = (sections) => {
-      if (!sections.length) {
-        el.homeSections.innerHTML = '<div class="empty">No home sections configured.</div>';
-        return;
-      }
+    .page {
+      min-height: 100vh;
+      width: 100%;
+      padding: 0;
+    }
-      el.homeSections.innerHTML = "";
-      sections.forEach((section) => {
-        const wrap = document.createElement("article");
-        wrap.className = "panel home-section-panel home-width-" + normalizeBoxWidth(section.width);
-        const heading = document.createElement("h3");
-        heading.textContent = section.title;
-        heading.style.margin = "0";
-        wrap.appendChild(heading);
-        if (section.description) {
-          const desc = document.createElement("div");
-          desc.className = "subtitle";
-          desc.textContent = section.description;
-          wrap.appendChild(desc);
-        }
+    .shell {
+      border: 1px solid var(--border);
+      border-radius: 0;
+      background: linear-gradient(180deg, rgba(8, 10, 14, .78), rgba(6, 8, 12, .72));
+      backdrop-filter: blur(10px);
+      min-height: 100vh;
+      width: 100%;
+      overflow: hidden;
+    }
-        const message = document.createElement("div");
-        message.className = "home-message";
-        if (section.fields?.length) {
-          const fieldsWrap = document.createElement("div");
-          fieldsWrap.className = "home-fields";
-          section.fields.forEach((field) => {
-            const fieldWrap = document.createElement("div");
-            fieldWrap.className = "home-field";
-            const label = document.createElement("label");
-            label.textContent = field.label;
-            fieldWrap.appendChild(label);
-            let input;
-            if (field.type === "textarea") {
-              input = document.createElement("textarea");
-              input.className = "home-textarea";
-              input.value = field.value == null ? "" : String(field.value);
-            } else if (field.type === "select") {
-              input = document.createElement("select");
-              input.className = "home-select cursor-pointer";
-              (field.options || []).forEach((option) => {
-                const optionEl = document.createElement("option");
-                optionEl.value = option.value;
-                optionEl.textContent = option.label;
-                if (String(field.value ?? "") === option.value) {
-                  optionEl.selected = true;
-                }
-                input.appendChild(optionEl);
-              });
-            } else if (field.type === "boolean") {
-              const row = document.createElement("div");
-              row.className = "home-field-row";
-              input = document.createElement("input");
-              input.type = "checkbox";
-              input.className = "home-checkbox cursor-pointer";
-              input.checked = Boolean(field.value);
-              const stateText = document.createElement("span");
-              stateText.textContent = input.checked ? "Enabled" : "Disabled";
-              input.addEventListener("change", () => {
-                stateText.textContent = input.checked ? "Enabled" : "Disabled";
-              });
-              row.appendChild(input);
-              row.appendChild(stateText);
-              fieldWrap.appendChild(row);
-            } else {
-              input = document.createElement("input");
-              input.className = "home-input";
-              input.type = field.type === "number" ? "number" : "text";
-              input.value = field.value == null ? "" : String(field.value);
-            }
+    .topbar {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto auto;
+      gap: 12px;
+      align-items: center;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(6, 8, 12, .66);
+    }
-            if (input) {
-              input.dataset.homeFieldId = field.id;
-              input.dataset.homeFieldType = field.type;
-              if (field.placeholder && "placeholder" in input) {
-                input.placeholder = field.placeholder;
-              }
-              if (field.required && "required" in input) {
-                input.required = true;
-              }
-              if (field.readOnly) {
-                if ("readOnly" in input) {
-                  input.readOnly = true;
-                }
-                if ("disabled" in input) {
-                  input.disabled = true;
-                }
-              }
+    .brand {
+      font-weight: 700;
+      font-size: 1rem;
+      letter-spacing: .2px;
+    }
-              if (field.type === "role-search" || field.type === "channel-search" || field.type === "member-search") {
-                setupLookupField(field, input, fieldWrap);
-              } else if (field.type !== "boolean") {
-                fieldWrap.appendChild(input);
-              }
-            }
+    .center-title {
+      border: 1px solid var(--border);
+      background: rgba(15, 23, 42, .44);
+      border-radius: 999px;
+      padding: 6px 12px;
+      font-size: .82rem;
+      color: #e2e8f0;
+    }
-            fieldsWrap.appendChild(fieldWrap);
-          });
+    .pill {
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 6px 12px;
+      font-size: .78rem;
+      color: var(--muted);
+      background: rgba(15, 23, 42, .52);
+    }
-          wrap.appendChild(fieldsWrap);
-        }
+    .server-strip {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(8, 12, 18, .48);
+    }
-        if (section.actions?.length) {
-          const actions = document.createElement("div");
-          actions.className = "actions";
+    .server-rail {
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      padding-bottom: 2px;
+      scrollbar-width: thin;
+    }
-          section.actions.forEach((action) => {
-            const button = document.createElement("button");
-            button.textContent = action.label;
-            const variantClass = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
-            button.className = [variantClass, "cursor-pointer"].filter(Boolean).join(" ");
-            button.addEventListener("click", async () => {
-              button.disabled = true;
-              try {
-                const values = {};
-                const inputs = wrap.querySelectorAll("[data-home-field-id]");
-                inputs.forEach((inputEl) => {
-                  const fieldId = inputEl.dataset.homeFieldId;
-                  const fieldType = inputEl.dataset.homeFieldType || "text";
-                  if (!fieldId) {
-                    return;
-                  }
+    .server-item {
+      position: relative;
+      min-width: 210px;
+      height: 60px;
+      border-radius: var(--radius-md);
+      border: 1px solid var(--border);
+      background: linear-gradient(180deg, rgba(30, 41, 59, .74), rgba(15, 23, 42, .7));
+      color: var(--text);
+      font-weight: 600;
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 8px 72px 8px 56px;
+      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
+    }
-                  values[fieldId] = toFieldValue({ type: fieldType }, inputEl);
-                });
+    .server-item::before {
+      content: attr(title);
+      display: block;
+      max-width: 100%;
+      font-size: .82rem;
+      font-weight: 600;
+      line-height: 1.2;
+      letter-spacing: .1px;
+      color: #e2e8f0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
-                const result = await fetchJson(buildApiUrl("/api/home/" + encodeURIComponent(action.id)), {
-                  method: "POST",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({
-                    sectionId: section.id,
-                    values
-                  })
-                });
+    .server-item:hover {
+      transform: translateY(-2px);
+      border-color: rgba(192,132,252,.72);
+    }
-                message.textContent = result.message || "Saved.";
-                if (result.refresh) {
-                  await refreshContent();
-                }
-              } catch (error) {
-                message.textContent = error instanceof Error ? error.message : "Save failed";
-              } finally {
-                button.disabled = false;
-              }
-            });
-            actions.appendChild(button);
-          });
+    .server-item.active {
+      border-color: rgba(34,211,238,.86);
+      box-shadow: 0 0 0 1px rgba(34,211,238,.3), 0 10px 26px rgba(34,211,238,.17);
+    }
-          wrap.appendChild(actions);
-        }
+    .server-item-indicator {
+      position: absolute;
+      left: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 4px;
+      height: 0;
+      border-radius: 999px;
+      background: linear-gradient(180deg, var(--primary), var(--accent));
+      opacity: 0;
+      transition: opacity .15s ease, height .15s ease;
+    }
-        wrap.appendChild(message);
-        el.homeSections.appendChild(wrap);
-      });
-    };
+    .server-item.active .server-item-indicator {
+      opacity: 1;
+      height: 32px;
+    }
-    const renderPlugins = (plugins) => {
-      if (!plugins.length) {
-        el.plugins.innerHTML = '<div class="empty">No plugins configured yet.</div>';
-        return;
-      }
+    .server-avatar {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 26px;
+      height: 26px;
+      border-radius: 8px;
+      object-fit: cover;
+    }
-      el.plugins.innerHTML = "";
-      plugins.forEach((plugin) => {
-        const wrap = document.createElement("article");
-        wrap.className = "panel";
-        const heading = document.createElement("div");
-        heading.className = "title";
-        heading.textContent = plugin.name;
-        wrap.appendChild(heading);
-        if (plugin.description) {
-          const desc = document.createElement("div");
-          desc.className = "subtitle";
-          desc.textContent = plugin.description;
-          wrap.appendChild(desc);
-        }
+    .server-fallback {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 26px;
+      height: 26px;
+      border-radius: 8px;
+      display: grid;
+      place-items: center;
+      background: rgba(148,163,184,.18);
+      font-size: .75rem;
+    }
-        (plugin.panels || []).forEach((panel) => {
-          const panelBody = document.createElement("div");
+    .server-status {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 9px;
+      height: 9px;
+      border-radius: 999px;
+      background: #22c55e;
+    }
-          const panelTitle = document.createElement("h4");
-          panelTitle.textContent = panel.title;
-          panelTitle.style.marginBottom = "4px";
-          panelBody.appendChild(panelTitle);
+    .server-status::after {
+      position: absolute;
+      right: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: .7rem;
+      font-weight: 500;
+      letter-spacing: .15px;
+      color: #86efac;
+      white-space: nowrap;
+    }
-          if (panel.description) {
-            const p = document.createElement("div");
-            p.className = "subtitle";
-            p.textContent = panel.description;
-            panelBody.appendChild(p);
-          }
+    .server-status.offline {
+      background: #94a3b8;
+    }
-          if (panel.fields?.length) {
-            const fieldsWrap = document.createElement("div");
-            fieldsWrap.className = "plugin-fields";
+    .server-status.offline::after {
+      content: "Invite Bot";
+      color: #fda4af;
+    }
-            panel.fields.forEach((field) => {
-              const fieldWrap = document.createElement("div");
-              fieldWrap.className = field.editable ? "plugin-field" : "kv-item";
-              if (!field.editable) {
-                const display = field.value == null
-                  ? ""
-                  : typeof field.value === "object"
-                    ? JSON.stringify(field.value)
-                    : String(field.value);
-                fieldWrap.innerHTML = '<strong>' + escapeHtml(field.label) + '</strong><span>' + escapeHtml(display) + '</span>';
-                fieldsWrap.appendChild(fieldWrap);
-                return;
-              }
+    .content {
+      padding: 16px;
+    }
-              const label = document.createElement("label");
-              label.textContent = field.label;
-              fieldWrap.appendChild(label);
+    .container {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: var(--surface);
+      padding: 14px;
+    }
-              let input;
-              if (field.type === "textarea") {
-                input = document.createElement("textarea");
-                input.className = "home-textarea";
-                input.value = field.value == null ? "" : String(field.value);
-              } else if (field.type === "select") {
-                input = document.createElement("select");
-                input.className = "home-select cursor-pointer";
-                (field.options || []).forEach((option) => {
-                  const optionEl = document.createElement("option");
-                  optionEl.value = option.value;
-                  optionEl.textContent = option.label;
-                  if (String(field.value ?? "") === option.value) {
-                    optionEl.selected = true;
-                  }
-                  input.appendChild(optionEl);
-                });
-              } else if (field.type === "boolean") {
-                const row = document.createElement("div");
-                row.className = "home-field-row";
-                input = document.createElement("input");
-                input.type = "checkbox";
-                input.className = "home-checkbox cursor-pointer";
-                input.checked = Boolean(field.value);
-                const stateText = document.createElement("span");
-                stateText.textContent = input.checked ? "Enabled" : "Disabled";
-                input.addEventListener("change", () => {
-                  stateText.textContent = input.checked ? "Enabled" : "Disabled";
-                });
-                row.appendChild(input);
-                row.appendChild(stateText);
-                fieldWrap.appendChild(row);
-              } else {
-                input = document.createElement("input");
-                input.className = "home-input";
-                input.type = field.type === "number" ? "number" : field.type === "url" ? "url" : "text";
-                input.value = field.value == null ? "" : String(field.value);
-              }
+    .main-tabs {
+      display: inline-flex;
+      gap: 8px;
+      padding: 5px;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      background: rgba(15, 23, 42, .4);
+      margin-bottom: 14px;
+    }
-              if (input) {
-                input.dataset.pluginFieldId = field.id || field.label;
-                input.dataset.pluginFieldType = field.type || "text";
-                if (field.placeholder && "placeholder" in input) {
-                  input.placeholder = field.placeholder;
-                }
-                if (field.required && "required" in input) {
-                  input.required = true;
-                }
+    button {
+      border: 1px solid var(--border);
+      background: var(--card-2);
+      color: var(--text);
+      border-radius: 999px;
+      padding: 7px 13px;
+    }
-                const isLookup = field.type === "role-search" || field.type === "channel-search" || field.type === "member-search";
-                if (isLookup) {
-                  setupLookupField(field, input, fieldWrap);
-                } else if (field.type === "string-list") {
-                  setupStringListField(field, input, fieldWrap);
-                } else if (field.type !== "boolean") {
-                  fieldWrap.appendChild(input);
-                }
-              }
+    button.primary {
+      border: none;
+      color: #0b1020;
+      font-weight: 700;
+      background: linear-gradient(90deg, rgba(192,132,252,.95), rgba(34,211,238,.95));
+    }
-              fieldsWrap.appendChild(fieldWrap);
-            });
-            panelBody.appendChild(fieldsWrap);
-          }
+    button.danger {
+      background: rgba(190,24,93,.2);
+      border-color: rgba(244,114,182,.45);
+    }
-          if (panel.actions?.length) {
-            const actions = document.createElement("div");
-            actions.className = "actions";
-            panel.actions.forEach((action) => {
-              actions.appendChild(makeButton(action, plugin.id, panel.id, panelBody));
-            });
-            panelBody.appendChild(actions);
-          }
+    .main-tab.active,
+    .home-category-btn.active {
+      background: rgba(34,211,238,.2);
+      border-color: rgba(34,211,238,.62);
+    }
-          wrap.appendChild(panelBody);
-        });
+    .section-title {
+      margin: 10px 0 9px;
+      font-size: .92rem;
+      color: #e2e8f0;
+      letter-spacing: .15px;
+    }
-        el.plugins.appendChild(wrap);
-      });
-    };
+    .grid { display: grid; gap: 10px; }
+    .cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
-    const refreshContent = async () => {
-      const categoriesPayload = await fetchJson(buildApiUrl("/api/home/categories"));
-      state.homeCategories = categoriesPayload.categories || [];
-      if (!state.selectedHomeCategoryId || !state.homeCategories.some((item) => item.id === state.selectedHomeCategoryId)) {
-        const overviewCategory = state.homeCategories.find((item) => item.id === "overview");
-        state.selectedHomeCategoryId = overviewCategory ? overviewCategory.id : (state.homeCategories[0]?.id ?? null);
-      }
-      renderHomeCategories();
-      const homePath = state.selectedHomeCategoryId
-        ? "/api/home?categoryId=" + encodeURIComponent(state.selectedHomeCategoryId)
-        : "/api/home";
-      const [home, overview, plugins] = await Promise.all([
-        fetchJson(buildApiUrl(homePath)),
-        fetchJson(buildApiUrl("/api/overview")),
-        fetchJson(buildApiUrl("/api/plugins"))
-      ]);
-      renderHomeSections(home.sections || []);
-      const showOverviewArea = state.selectedHomeCategoryId === "overview";
-      el.overviewArea.style.display = showOverviewArea ? "block" : "none";
-      renderCards(overview.cards || []);
-      renderPlugins(plugins.plugins || []);
-    };
+    .panel {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--card);
+      padding: 12px;
+    }
-    const loadInitialData = async () => {
-      applySetupDesign();
+    .title { color: var(--muted); font-size: .82rem; }
+    .value { margin-top: 6px; font-size: 1.34rem; font-weight: 700; }
+    .subtitle { margin-top: 6px; color: var(--muted); font-size: .8rem; }
-      const session = await fetchJson(dashboardConfig.basePath + "/api/session");
-      if (!session.authenticated) {
-        window.location.href = dashboardConfig.basePath + "/login";
-        return;
-      }
+    .home-categories,
+    .home-sections {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+    }
+    .home-section-panel { flex: 0 0 100%; max-width: 100%; }
+    .home-width-50 { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
+    .home-width-33 { flex-basis: calc(33.333333% - 6.67px); max-width: calc(33.333333% - 6.67px); }
+    .home-width-20 { flex-basis: calc(20% - 8px); max-width: calc(20% - 8px); }
+    .home-fields,
+    .plugin-fields { display: grid; gap: 9px; margin-top: 8px; }
+    .home-field,
+    .plugin-field { display: grid; gap: 5px; }
+    .home-field label,
+    .plugin-field > label { color: var(--muted); font-size: .8rem; }
+    .home-input,
+    .home-textarea,
+    .home-select {
+      width: 100%;
+      border: 1px solid var(--border);
+      background: var(--card-2);
+      color: var(--text);
+      border-radius: 10px;
+      padding: 8px 10px;
+    }
+    .home-textarea { min-height: 90px; resize: vertical; }
+    .home-checkbox { width: 17px; height: 17px; }
+    .home-field-row { display: flex; align-items: center; gap: 8px; }
+    .home-message { margin-top: 6px; color: var(--muted); font-size: .8rem; }
+    .lookup-wrap { position: relative; }
+    .lookup-results {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: calc(100% + 6px);
+      z-index: 20;
+      border: 1px solid var(--border);
+      background: rgba(15, 23, 42, .96);
+      border-radius: 10px;
+      max-height: 220px;
+      overflow: auto;
+      display: none;
+    }
-      state.session = session;
-      el.userMeta.textContent = session.user.username + " \u2022 " + session.guildCount + " guild(s)";
-      const guilds = await fetchJson(dashboardConfig.basePath + "/api/guilds");
-      state.guilds = guilds.guilds || [];
-      state.selectedGuildId = null;
-      renderServerRail();
-      updateContextLabel();
+    .lookup-item {
+      width: 100%;
+      border: none;
+      border-radius: 0;
+      text-align: left;
+      padding: 8px 10px;
+      background: transparent;
+    }
-      el.tabHome.addEventListener("click", () => {
-        state.activeMainTab = "home";
-        applyMainTab();
-      });
+    .lookup-item:hover { background: rgba(51,65,85,.56); }
+    .lookup-selected { margin-top: 5px; font-size: .8rem; color: var(--muted); }
+    .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
+    .kv-item {
+      display: flex;
+      justify-content: space-between;
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      padding: 7px 10px;
+      background: var(--card-2);
+    }
-      el.tabPlugins.addEventListener("click", () => {
-        state.activeMainTab = "plugins";
-        applyMainTab();
-      });
+    .list-editor {
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--card-2);
+      padding: 8px;
+      display: grid;
+      gap: 8px;
+    }
-      applyMainTab();
-      await refreshContent();
-    };
+    .list-items { display: grid; gap: 6px; }
+    .list-item {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 8px;
+      align-items: center;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 6px 8px;
+      background: rgba(23, 29, 42, .78);
+    }
-    loadInitialData().catch((error) => {
-      el.userMeta.textContent = "Load failed";
-      console.error(error);
-    });
-  </script>
-</body>
-</html>`;
-}
+    .list-item.dragging { opacity: .6; }
+    .drag-handle { color: var(--muted); user-select: none; font-size: .9rem; }
+    .list-input { width: 100%; border: none; outline: none; background: transparent; color: var(--text); }
+    .list-add { justify-self: start; }
+    .empty { color: var(--muted); font-size: .9rem; }
+    .cursor-pointer { cursor: pointer; }
+    @media (max-width: 980px) {
+      .topbar { grid-template-columns: 1fr auto; }
+      .center-title { display: none; }
+      .server-item { min-width: 180px; }
+      .home-width-50,
+      .home-width-33,
+      .home-width-20 { flex-basis: 100%; max-width: 100%; }
+    }
-// src/templates/compact.ts
-function escapeHtml2(value) {
-  return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#039;");
-}
-function extractDashboardScript(html) {
-  const match = html.match(/<script>([\s\S]*)<\/script>\s*<\/body>\s*<\/html>\s*$/);
-  if (!match) {
-    throw new Error("Failed to resolve dashboard script for compact template.");
-  }
-  return match[1];
-}
-var compactCss = `
-:root {
-  color-scheme: dark;
-  --bg: #0f1221;
-  --rail: #171a2d;
-  --content-bg: #0f1426;
-  --panel: #1f243b;
-  --panel-2: #2a314e;
-  --text: #f5f7ff;
-  --muted: #aab1d6;
-  --primary: #7c87ff;
-  --success: #2bd4a6;
-  --warning: #ffd166;
-  --danger: #ff6f91;
-  --info: #66d9ff;
-  --border: rgba(255, 255, 255, 0.12);
-}
-* { box-sizing: border-box; }
-body {
-  margin: 0;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
-  background: radial-gradient(circle at 0% 0%, #1b2140 0%, var(--bg) 45%);
-  color: var(--text);
-}
-.shell {
-  min-height: 100vh;
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-.topbar {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  border-bottom: 1px solid var(--border);
-  background: rgba(15, 20, 38, 0.7);
-  backdrop-filter: blur(8px);
-}
-.brand { font-weight: 800; letter-spacing: .2px; }
-.center-title { text-align: center; font-weight: 700; color: #d8defc; }
-.pill {
-  justify-self: end;
-  padding: 4px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  color: var(--muted);
-  font-size: .75rem;
-}
-.layout {
-  display: grid;
-  grid-template-columns: 80px 1fr;
-  min-height: 0;
-}
-.sidebar {
-  border-right: 1px solid var(--border);
-  background: linear-gradient(180deg, var(--rail), #121528);
-  padding: 10px 0;
-}
-.server-rail {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-.server-item {
-  position: relative;
-  width: 46px;
-  height: 46px;
-  border: none;
-  border-radius: 14px;
-  overflow: visible;
-  background: var(--panel);
-  color: #fff;
-  font-weight: 700;
-  transition: transform .15s ease, background .15s ease;
-}
-.server-item:hover { transform: translateY(-1px); background: #323b5f; }
-.server-item.active { background: var(--primary); transform: translateY(-2px); }
-.server-item-indicator {
-  position: absolute;
-  left: -8px;
-  top: 50%;
-  transform: translateY(-50%) scaleY(.5);
-  width: 3px;
-  height: 18px;
-  background: #fff;
-  border-radius: 999px;
-  opacity: 0;
-  transition: opacity .15s ease, transform .15s ease;
-}
-.server-item.active .server-item-indicator {
-  opacity: 1;
-  transform: translateY(-50%) scaleY(1);
-}
-.server-avatar { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
-.server-fallback { display: grid; place-items: center; width: 100%; height: 100%; }
-.server-status {
-  position: absolute;
-  right: -3px;
-  bottom: -3px;
-  width: 11px;
-  height: 11px;
-  border-radius: 999px;
-  border: 2px solid var(--rail);
-  background: #35d489;
-}
-.server-status.offline { background: #7f8bb3; }
-.content {
-  min-width: 0;
-  padding: 12px;
-}
-.container {
-  background: rgba(23, 28, 48, 0.6);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  padding: 12px;
-}
-.main-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
-button {
-  border: 1px solid var(--border);
-  background: var(--panel-2);
-  color: var(--text);
-  border-radius: 8px;
-  padding: 7px 10px;
-}
-button.primary { background: var(--primary); border: none; }
-button.danger { background: #4a2230; border-color: rgba(255,111,145,.45); }
-.main-tab.active, .home-category-btn.active { background: var(--primary); border-color: transparent; }
-.section-title { margin: 12px 0 8px; color: #dce3ff; font-size: .95rem; }
-.grid { display: grid; gap: 10px; }
-.cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
-.panel {
-  background: linear-gradient(180deg, rgba(42,49,78,.7), rgba(31,36,59,.85));
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 12px;
-}
-.title { color: var(--muted); font-size: .83rem; }
-.value { font-size: 1.25rem; font-weight: 800; margin-top: 5px; }
-.subtitle { margin-top: 5px; color: var(--muted); font-size: .8rem; }
-.home-categories { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
-.home-sections { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
-.home-section-panel { flex: 0 0 100%; max-width: 100%; }
-.home-width-50 { flex-basis: calc(50% - 5px); max-width: calc(50% - 5px); }
-.home-width-33 { flex-basis: calc(33.333333% - 6.67px); max-width: calc(33.333333% - 6.67px); }
-.home-width-20 { flex-basis: calc(20% - 8px); max-width: calc(20% - 8px); }
-.home-fields, .plugin-fields { display: grid; gap: 8px; margin-top: 8px; }
-.home-field, .plugin-field { display: grid; gap: 5px; }
-.home-field label, .plugin-field > label { color: var(--muted); font-size: .8rem; }
-.home-input, .home-textarea, .home-select {
-  width: 100%;
-  border: 1px solid var(--border);
-  background: var(--panel-2);
-  color: var(--text);
-  border-radius: 8px;
-  padding: 7px 9px;
-}
-.home-textarea { min-height: 88px; resize: vertical; }
-.home-checkbox { width: 17px; height: 17px; }
-.home-field-row { display: flex; align-items: center; gap: 8px; }
-.home-message { margin-top: 6px; color: var(--muted); font-size: .8rem; }
-.lookup-wrap { position: relative; }
-.lookup-results {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: calc(100% + 5px);
-  z-index: 20;
-  border: 1px solid var(--border);
-  background: #1f2742;
-  border-radius: 8px;
-  max-height: 220px;
-  overflow: auto;
-  display: none;
-}
-.lookup-item {
-  width: 100%;
-  border: none;
-  border-radius: 0;
-  text-align: left;
-  padding: 8px 10px;
-  background: transparent;
-}
-.lookup-item:hover { background: #2d3658; }
-.lookup-selected { margin-top: 5px; font-size: .8rem; color: var(--muted); }
-.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
-.kv-item {
-  display: flex;
-  justify-content: space-between;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 7px 9px;
-  background: var(--panel-2);
-}
-.list-editor {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--panel-2);
-  padding: 8px;
-  display: grid;
-  gap: 8px;
-}
-.list-items { display: grid; gap: 6px; }
-.list-item {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 8px;
-  align-items: center;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 6px 8px;
-  background: var(--panel);
-}
-.list-item.dragging { opacity: .6; }
-.drag-handle { color: var(--muted); user-select: none; font-size: .9rem; }
-.list-input { width: 100%; border: none; outline: none; background: transparent; color: var(--text); }
-.list-add { justify-self: start; }
-.empty { color: var(--muted); font-size: .9rem; }
-.cursor-pointer { cursor: pointer; }
-@media (max-width: 980px) {
-  .layout { grid-template-columns: 70px 1fr; }
-  .home-width-50, .home-width-33, .home-width-20 { flex-basis: 100%; max-width: 100%; }
-}
-`;
-var compactDashboardTemplateRenderer = ({ dashboardName, basePath, setupDesign }) => {
-  const script = extractDashboardScript(renderDashboardHtml(dashboardName, basePath, setupDesign));
-  const safeName = escapeHtml2(dashboardName);
-  const customCssBlock = setupDesign?.customCss ? `
-  <style>${setupDesign.customCss}</style>` : "";
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>${safeName}</title>
-  <style>${compactCss}</style>${customCssBlock}
+    /* Inject User Custom CSS Here */
+    ${design.customCss ?? ""}
+  </style>
 </head>
 <body>
-  <div class="shell">
-    <header class="topbar">
-      <div class="brand">${safeName}</div>
-      <div id="centerTitle" class="center-title">User Dashboard</div>
-      <div id="userMeta" class="pill">Loading...</div>
-    </header>
+  <div class="page">
+    <div class="shell">
+      <header class="topbar">
+        <div class="brand">${safeName}</div>
+        <div id="centerTitle" class="center-title">Workspace Hub</div>
+        <div id="userMeta" class="pill">Loading...</div>
+      </header>
-    <div class="layout">
-      <aside class="sidebar">
+      <section class="server-strip">
         <div id="serverRail" class="server-rail"></div>
-      </aside>
+      </section>
       <main class="content">
-        <div class="container">
+        <section class="container">
           <div class="main-tabs">
             <button id="tabHome" class="main-tab active cursor-pointer">Home</button>
             <button id="tabPlugins" class="main-tab cursor-pointer">Plugins</button>
           </div>
           <section id="homeArea">
-            <div class="section-title">Home</div>
+            <div class="section-title">Dashboard Workspace</div>
             <section id="homeCategories" class="home-categories"></section>
             <section id="homeSections" class="home-sections"></section>
             <section id="overviewArea">
-              <div class="section-title">Dashboard Stats</div>
+              <div class="section-title">Overview Metrics</div>
               <section id="overviewCards" class="grid cards"></section>
             </section>
           </section>
           <section id="pluginsArea" style="display:none;">
-            <div class="section-title">Plugins</div>
+            <div class="section-title">Plugin Center</div>
             <section id="plugins" class="grid"></section>
           </section>
-        </div>
+        </section>
       </main>
     </div>
   </div>
-  <script>${script}</script>
+  <script>${clientScript}</script>
 </body>
 </html>`;
+}
+// src/templates/index.ts
+var BuiltinLayouts = {
+  default: renderDefaultLayout,
+  compact: renderCompactLayout,
+  "shadcn-magic": renderShadcnMagicLayout
 };
-// src/templates/default.ts
-var defaultDashboardTemplateRenderer = ({ dashboardName, basePath, setupDesign }) => renderDashboardHtml(dashboardName, basePath, setupDesign);
+// src/templates/themes/index.ts
+var BuiltinThemes = {
+  default: {
+    bg: "#08090f",
+    rail: "#0e101a",
+    contentBg: "radial-gradient(circle at top right, #171a2f, #08090f)",
+    panel: "rgba(20, 23, 43, 0.6)",
+    panel2: "rgba(0, 0, 0, 0.3)",
+    text: "#e0e6ff",
+    muted: "#8a93bc",
+    primary: "#5865F2",
+    success: "#00E676",
+    warning: "#FFD600",
+    danger: "#FF3D00",
+    border: "rgba(88, 101, 242, 0.2)"
+  },
+  compact: {
+    bg: "#0f1221",
+    rail: "#171a2d",
+    contentBg: "#0f1426",
+    panel: "#1f243b",
+    panel2: "#2a314e",
+    text: "#f5f7ff",
+    muted: "#aab1d6",
+    primary: "#7c87ff",
+    success: "#2bd4a6",
+    warning: "#ffd166",
+    danger: "#ff6f91",
+    info: "#66d9ff",
+    border: "rgba(255, 255, 255, 0.12)"
+  },
+  "shadcn-magic": {
+    bg: "#06070b",
+    surface: "rgba(10, 12, 18, 0.84)",
+    card: "rgba(16, 20, 30, 0.82)",
+    card2: "rgba(23, 29, 42, 0.86)",
+    text: "#f8fafc",
+    muted: "#94a3b8",
+    primary: "#c084fc",
+    accent: "#22d3ee",
+    border: "rgba(148, 163, 184, 0.26)",
+    radiusLg: "18px",
+    radiusMd: "12px"
+  }
+};
-// src/templates/index.ts
-var builtinTemplateRenderers = {
-  default: defaultDashboardTemplateRenderer,
-  compact: compactDashboardTemplateRenderer
+// src/handlers/TemplateManager.ts
+var TemplateManager = class {
+  layoutRenderer;
+  resolvedDesign;
+  constructor(options) {
+    this.layoutRenderer = this.resolveLayout(options.uiTemplate);
+    this.resolvedDesign = this.resolveTheme(options.uiTheme, options.setupDesign);
+  }
+  resolveLayout(layoutInput) {
+    if (typeof layoutInput === "function") {
+      return layoutInput;
+    }
+    if (typeof layoutInput === "string" && BuiltinLayouts[layoutInput]) {
+      return BuiltinLayouts[layoutInput];
+    }
+    return BuiltinLayouts["default"];
+  }
+  resolveTheme(themeInput, customOverrides) {
+    let baseTheme = {};
+    if (typeof themeInput === "string" && BuiltinThemes[themeInput]) {
+      baseTheme = BuiltinThemes[themeInput];
+    } else if (typeof themeInput === "object") {
+      baseTheme = themeInput;
+    }
+    const merged = {
+      ...baseTheme,
+      ...customOverrides
+    };
+    const combinedCss = [baseTheme.customCss, customOverrides?.customCss].filter((css) => css && css.trim().length > 0).join("\n\n");
+    if (combinedCss) {
+      merged.customCss = combinedCss;
+    }
+    return merged;
+  }
+  render(contextBase) {
+    const finalContext = {
+      ...contextBase,
+      setupDesign: this.resolvedDesign
+    };
+    return this.layoutRenderer(finalContext);
+  }
 };
-function getBuiltinTemplateRenderer(templateId) {
-  return builtinTemplateRenderers[templateId];
-}
-// src/handlers/DashboardDesigner.ts
-var CategoryBuilder = class {
-  constructor(scope, categoryId, categoryLabel) {
-    this.scope = scope;
-    this.categoryId = categoryId;
-    this.categoryLabel = categoryLabel;
+// src/core/DashboardEngine.ts
+var DashboardEngine = class {
+  constructor(options) {
+    this.options = options;
+    this.helpers = new DiscordHelpers(options.botToken);
+    this.templateManager = new TemplateManager(options);
   }
-  sections = [];
-  section(input) {
-    this.sections.push({
-      id: input.id,
-      title: input.title,
-      description: input.description,
-      width: input.width,
-      fields: input.fields ?? [],
-      actions: input.actions ?? [],
-      scope: this.scope,
-      categoryId: this.categoryId
+  helpers;
+  templateManager;
+  DISCORD_API = "https://discord.com/api/v10";
+  getAuthUrl(state) {
+    const scope = this.options.scopes && this.options.scopes.length > 0 ? this.options.scopes.join(" ") : ["identify", "guilds"].join(" ");
+    const query = new URLSearchParams({
+      client_id: this.options.clientId,
+      redirect_uri: this.options.redirectUri,
+      response_type: "code",
+      scope,
+      state,
+      prompt: "none"
     });
-    return this;
+    return `https://discord.com/oauth2/authorize?${query.toString()}`;
+  }
+  async exchangeCode(code) {
+    const response = await fetch(`${this.DISCORD_API}/oauth2/token`, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({
+        client_id: this.options.clientId,
+        client_secret: this.options.clientSecret,
+        grant_type: "authorization_code",
+        code,
+        redirect_uri: this.options.redirectUri
+      })
+    });
+    if (!response.ok) throw new Error(`Failed token exchange: ${response.status} ${await response.text()}`);
+    return await response.json();
+  }
+  async fetchUser(token) {
+    const res = await fetch(`${this.DISCORD_API}/users/@me`, {
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    if (!res.ok) throw new Error(`Failed to fetch user: ${res.status} ${await res.text()}`);
+    return await res.json();
   }
-  buildCategory() {
-    return { id: this.categoryId, label: this.categoryLabel, scope: this.scope };
+  async fetchGuilds(token) {
+    const res = await fetch(`${this.DISCORD_API}/users/@me/guilds`, {
+      headers: { Authorization: `Bearer ${token}` }
+    });
+    if (!res.ok) throw new Error(`Failed to fetch guilds: ${res.status} ${await res.text()}`);
+    return await res.json();
   }
-  buildSections() {
-    return [...this.sections];
+  render(basePath) {
+    return this.templateManager.render({
+      dashboardName: this.options.dashboardName ?? "Discord Dashboard",
+      basePath
+    });
   }
 };
+// src/handlers/DashboardDesigner.ts
 var DashboardDesigner = class {
-  partialOptions;
+  config = {
+    setupDesign: {},
+    uiTemplates: {}
+  };
   categories = [];
-  pages = [];
-  homeActions = {};
-  loadHandlers = {};
-  saveHandlers = {};
-  constructor(baseOptions) {
-    this.partialOptions = { ...baseOptions };
-  }
-  setup(input) {
-    Object.assign(this.partialOptions, input);
-    return this;
-  }
-  useTemplate(templateId) {
-    this.partialOptions.uiTemplate = templateId;
-    return this;
-  }
-  addTemplate(templateId, renderer) {
-    this.partialOptions.uiTemplates = {
-      ...this.partialOptions.uiTemplates ?? {},
-      [templateId]: renderer
-    };
-    return this;
+  sections = [];
+  plugins = [];
+  overviewCards = [];
+  constructor(dashboardName) {
+    if (dashboardName) {
+      this.config.dashboardName = dashboardName;
+    }
   }
-  setupDesign(input) {
-    this.partialOptions.setupDesign = {
-      ...this.partialOptions.setupDesign ?? {},
-      ...input
-    };
+  setLayout(template) {
+    this.config.uiTemplate = template;
     return this;
   }
-  userCategory(categoryId, categoryLabel, build) {
-    const builder = new CategoryBuilder("user", categoryId, categoryLabel);
-    build(builder);
-    this.categories.push(builder);
+  setTheme(theme) {
+    this.config.uiTheme = theme;
     return this;
   }
-  guildCategory(categoryId, categoryLabel, build) {
-    const builder = new CategoryBuilder("guild", categoryId, categoryLabel);
-    build(builder);
-    this.categories.push(builder);
+  setColors(colors) {
+    this.config.setupDesign = { ...this.config.setupDesign, ...colors };
     return this;
   }
-  setupCategory(categoryId, categoryLabel, build) {
-    const builder = new CategoryBuilder("setup", categoryId, categoryLabel);
-    build(builder);
-    this.categories.push(builder);
+  setCustomCss(css) {
+    this.config.setupDesign.customCss = css;
     return this;
   }
-  setupPage(input) {
-    const scope = input.scope ?? "user";
-    const categoryId = input.categoryId ?? input.id;
-    this.pages.push({
-      pageId: input.id,
-      category: { id: categoryId, label: input.label ?? input.title, scope },
-      section: {
-        id: input.id,
-        title: input.title,
-        description: input.description,
-        width: input.width,
-        scope,
-        categoryId,
-        fields: input.fields ?? [],
-        actions: input.actions ?? []
-      }
-    });
+  registerCustomLayout(name, renderer) {
+    this.config.uiTemplates[name] = renderer;
     return this;
   }
-  onLoad(pageId, handler) {
-    this.loadHandlers[pageId] = handler;
+  // --- Content Building Methods ---
+  addOverviewCard(title, value, subtitle) {
+    this.overviewCards.push({ title, value, subtitle });
     return this;
   }
-  onload(pageId, handler) {
-    return this.onLoad(pageId, handler);
-  }
-  onSave(pageId, handler) {
-    this.saveHandlers[pageId] = handler;
+  addCategory(category) {
+    this.categories.push(category.data);
     return this;
   }
-  onsave(pageId, handler) {
-    return this.onSave(pageId, handler);
-  }
-  onHomeAction(actionId, handler) {
-    this.homeActions[actionId] = handler;
+  addSection(section) {
+    this.sections.push(section.data);
     return this;
   }
-  customCss(cssString) {
-    this.partialOptions.setupDesign = {
-      ...this.partialOptions.setupDesign ?? {},
-      customCss: cssString
-    };
+  addPlugin(plugin) {
+    this.plugins.push(plugin.data);
     return this;
   }
   build() {
-    const staticCategories = this.categories.map((item) => item.buildCategory());
-    const staticSections = this.categories.flatMap((item) => item.buildSections());
-    const pageCategories = this.pages.map((item) => item.category);
-    const baseSections = [...staticSections, ...this.pages.map((item) => item.section)];
-    const categoryMap = /* @__PURE__ */ new Map();
-    for (const category of [...staticCategories, ...pageCategories]) {
-      const key = `${category.scope}:${category.id}`;
-      if (!categoryMap.has(key)) categoryMap.set(key, category);
-    }
-    const categories = [...categoryMap.values()];
-    const saveActionIds = {};
-    for (const section of baseSections) {
-      if (this.saveHandlers[section.id]) saveActionIds[section.id] = `save:${section.id}`;
-    }
-    const resolvedActions = { ...this.homeActions };
-    for (const [sectionId, handler] of Object.entries(this.saveHandlers)) {
-      resolvedActions[saveActionIds[sectionId]] = handler;
-    }
-    const home = {
-      getCategories: () => categories,
-      getSections: async (context) => {
-        const sections = [];
-        for (const sourceSection of baseSections) {
-          let section = {
-            ...sourceSection,
-            fields: sourceSection.fields ? [...sourceSection.fields] : [],
-            actions: sourceSection.actions ? [...sourceSection.actions] : []
-          };
-          const saveActionId = saveActionIds[section.id];
-          if (saveActionId && !section.actions?.some((action) => action.id === saveActionId)) {
-            section.actions = [...section.actions ?? [], { id: saveActionId, label: "Save", variant: "primary" }];
-          }
-          const loadHandler = this.loadHandlers[section.id];
-          if (loadHandler) {
-            const loaded = await loadHandler(context, section);
-            if (loaded) {
-              section = {
-                ...section,
-                ...loaded,
-                fields: loaded.fields ?? section.fields,
-                actions: loaded.actions ?? section.actions
-              };
-            }
-          }
-          sections.push(section);
-        }
-        return sections;
-      },
-      actions: resolvedActions
-    };
     return {
-      ...this.partialOptions,
-      home
+      ...this.config,
+      dashboardData: {
+        categories: this.categories,
+        sections: this.sections,
+        plugins: this.plugins,
+        overviewCards: this.overviewCards
+      }
     };
   }
-  /**
-   * Builds the configuration and immediately instantiates the Dashboard.
-   */
-  createDashboard() {
-    const options = this.build();
-    return new DiscordDashboard(options);
-  }
 };
-// src/index.ts
-var DISCORD_API = "https://discord.com/api/v10";
-var MANAGE_GUILD_PERMISSION = 0x20n;
-var ADMIN_PERMISSION = 0x8n;
-function normalizeBasePath(basePath) {
-  if (!basePath || basePath === "/") return "/dashboard";
-  return basePath.startsWith("/") ? basePath : `/${basePath}`;
-}
-function canManageGuild(permissions) {
-  const value = BigInt(permissions);
-  return (value & MANAGE_GUILD_PERMISSION) === MANAGE_GUILD_PERMISSION || (value & ADMIN_PERMISSION) === ADMIN_PERMISSION;
-}
-function toQuery(params) {
-  const url = new URLSearchParams();
-  for (const [key, value] of Object.entries(params)) {
-    url.set(key, value);
-  }
-  return url.toString();
-}
-async function fetchDiscord(path, token) {
-  const response = await fetch(`${DISCORD_API}${path}`, {
-    headers: { Authorization: `Bearer ${token}` }
+// src/adapters/express.ts
+import compression from "compression";
+import express, { Router } from "express";
+import session from "express-session";
+import helmet from "helmet";
+import { randomBytes } from "crypto";
+function createExpressAdapter(options) {
+  const engine = new DashboardEngine(options);
+  const app = options.app ?? express();
+  const router = Router();
+  const basePath = options.basePath ?? "/dashboard";
+  router.use(compression());
+  router.use(helmet({ contentSecurityPolicy: false }));
+  router.use(express.json());
+  router.use(
+    session({
+      secret: options.sessionSecret,
+      resave: false,
+      saveUninitialized: false,
+      name: options.sessionName ?? "discord_dashboard.sid"
+    })
+  );
+  const buildContext = (req) => ({
+    user: req.session.discordAuth.user,
+    guilds: req.session.discordAuth.guilds || [],
+    accessToken: req.session.discordAuth.accessToken || "",
+    selectedGuildId: req.query.guildId || void 0,
+    helpers: engine.helpers
   });
-  if (!response.ok) throw new Error(`Discord API request failed (${response.status})`);
-  return await response.json();
-}
-function getUserAvatarUrl(user) {
-  if (user.avatar) {
-    const ext = user.avatar.startsWith("a_") ? "gif" : "png";
-    return `https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}.${ext}?size=256`;
-  }
-  const fallbackIndex = Number((BigInt(user.id) >> 22n) % 6n);
-  return `https://cdn.discordapp.com/embed/avatars/${fallbackIndex}.png`;
-}
-function getGuildIconUrl(guild) {
-  if (!guild.icon) return null;
-  const ext = guild.icon.startsWith("a_") ? "gif" : "png";
-  return `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.${ext}?size=128`;
-}
-var DiscordDashboard = class {
-  app;
-  options;
-  helpers;
-  router;
-  server;
-  basePath;
-  templateRenderer;
-  plugins;
-  constructor(options) {
-    this.validateOptions(options);
-    this.options = options;
-    this.app = options.app ?? express();
-    this.router = express.Router();
-    this.helpers = new DiscordHelpers(options.botToken);
-    this.basePath = normalizeBasePath(options.basePath);
-    this.templateRenderer = this.resolveTemplateRenderer();
-    this.plugins = options.plugins ?? [];
-    if (!options.app && options.trustProxy !== void 0) {
-      this.app.set("trust proxy", options.trustProxy);
-    }
-    this.setupMiddleware();
-    this.setupRoutes();
-    this.app.use(this.basePath, this.router);
-  }
-  validateOptions(options) {
-    if (!options.botToken) throw new Error("botToken is required");
-    if (!options.clientId) throw new Error("clientId is required");
-    if (!options.clientSecret) throw new Error("clientSecret is required");
-    if (!options.redirectUri) throw new Error("redirectUri is required");
-    if (!options.sessionSecret) throw new Error("sessionSecret is required");
-  }
-  setupMiddleware() {
-    this.router.use(compression());
-    this.router.use(helmet({ contentSecurityPolicy: false }));
-    this.router.use(express.json());
-    this.router.use(
-      session({
-        name: this.options.sessionName ?? "discord_dashboard.sid",
-        secret: this.options.sessionSecret,
-        resave: false,
-        saveUninitialized: false,
-        cookie: {
-          httpOnly: true,
-          sameSite: "lax",
-          maxAge: this.options.sessionMaxAgeMs ?? 1e3 * 60 * 60 * 24 * 7
-        }
-      })
-    );
-  }
-  setupRoutes() {
-    this.router.get("/", this.handleRoot.bind(this));
-    this.router.get("/login", this.handleLogin.bind(this));
-    this.router.get("/callback", this.handleCallback.bind(this));
-    this.router.post("/logout", this.handleLogout.bind(this));
-    this.router.get("/api/session", this.handleSession.bind(this));
-    this.router.get("/api/guilds", this.ensureAuthenticated, this.handleGuilds.bind(this));
-    this.router.get("/api/overview", this.ensureAuthenticated, this.handleOverview.bind(this));
-    this.router.get("/api/home/categories", this.ensureAuthenticated, this.handleHomeCategories.bind(this));
-    this.router.get("/api/home", this.ensureAuthenticated, this.handleHome.bind(this));
-    this.router.get("/api/lookup/roles", this.ensureAuthenticated, this.handleLookupRoles.bind(this));
-    this.router.get("/api/lookup/channels", this.ensureAuthenticated, this.handleLookupChannels.bind(this));
-    this.router.get("/api/lookup/members", this.ensureAuthenticated, this.handleLookupMembers.bind(this));
-    this.router.post("/api/home/:actionId", this.ensureAuthenticated, this.handleHomeAction.bind(this));
-    this.router.get("/api/plugins", this.ensureAuthenticated, this.handlePlugins.bind(this));
-    this.router.post("/api/plugins/:pluginId/:actionId", this.ensureAuthenticated, this.handlePluginAction.bind(this));
-  }
-  // --- Start/Stop Methods ---
-  async start() {
-    if (this.options.app || this.server) return;
-    const port = this.options.port ?? 3e3;
-    const host = this.options.host ?? "0.0.0.0";
-    this.server = createServer(this.app);
-    return new Promise((resolve) => {
-      this.server.listen(port, host, () => resolve());
-    });
-  }
-  async stop() {
-    if (!this.server) return;
-    return new Promise((resolve, reject) => {
-      this.server.close((error) => {
-        if (error) return reject(error);
-        resolve();
-      });
-      this.server = void 0;
-    });
-  }
-  // --- Route Handlers ---
-  handleRoot(req, res) {
-    if (!req.session.discordAuth) {
-      res.redirect(`${this.basePath}/login`);
-      return;
-    }
-    res.setHeader("Cache-Control", "no-store");
-    res.type("html").send(
-      this.templateRenderer({
-        dashboardName: this.options.dashboardName ?? "Discord Dashboard",
-        basePath: this.basePath,
-        setupDesign: this.options.setupDesign
-      })
-    );
-  }
-  handleLogin(req, res) {
+  router.get("/", (req, res) => {
+    if (!req.session.discordAuth) return res.redirect(`${basePath}/login`);
+    res.type("html").send(engine.render(basePath));
+  });
+  router.get("/login", (req, res) => {
     const state = randomBytes(16).toString("hex");
     req.session.oauthState = state;
-    const scope = (this.options.scopes && this.options.scopes.length > 0 ? this.options.scopes : ["identify", "guilds"]).join(" ");
-    const query = toQuery({
-      client_id: this.options.clientId,
-      redirect_uri: this.options.redirectUri,
-      response_type: "code",
-      scope,
-      state,
-      prompt: "none"
-    });
-    res.redirect(`https://discord.com/oauth2/authorize?${query}`);
-  }
-  async handleCallback(req, res) {
+    res.redirect(engine.getAuthUrl(state));
+  });
+  router.get("/callback", async (req, res) => {
+    const { code, state } = req.query;
+    if (state !== req.session.oauthState) return res.status(403).send("Invalid OAuth2 state");
     try {
-      const code = typeof req.query.code === "string" ? req.query.code : void 0;
-      const state = typeof req.query.state === "string" ? req.query.state : void 0;
-      if (!code || !state) return res.status(400).send("Missing OAuth2 code/state");
-      if (!req.session.oauthState || req.session.oauthState !== state) return res.status(403).send("Invalid OAuth2 state");
-      const tokenData = await this.exchangeCodeForToken(code);
-      const [user, guilds] = await Promise.all([fetchDiscord("/users/@me", tokenData.access_token), fetchDiscord("/users/@me/guilds", tokenData.access_token)]);
+      const tokens = await engine.exchangeCode(code);
+      const [user, rawGuilds] = await Promise.all([engine.fetchUser(tokens.access_token), engine.fetchGuilds(tokens.access_token)]);
+      const ADMIN = 8n;
+      const MANAGE_GUILD = 32n;
+      const processedGuilds = rawGuilds.filter((guild) => {
+        const perms = BigInt(guild.permissions || "0");
+        return (perms & ADMIN) === ADMIN || (perms & MANAGE_GUILD) === MANAGE_GUILD;
+      }).map((guild) => ({
+        ...guild,
+        iconUrl: engine.helpers.getGuildIconUrl(guild.id, guild.icon),
+        botInGuild: options.client.guilds.cache.has(guild.id)
+      }));
       req.session.discordAuth = {
-        accessToken: tokenData.access_token,
-        refreshToken: tokenData.refresh_token,
-        expiresAt: tokenData.expires_in ? Date.now() + tokenData.expires_in * 1e3 : void 0,
-        user,
-        guilds
+        accessToken: tokens.access_token,
+        user: {
+          ...user,
+          avatarUrl: engine.helpers.getUserAvatarUrl(user.id, user.avatar)
+        },
+        guilds: processedGuilds
       };
-      req.session.oauthState = void 0;
-      res.redirect(this.basePath);
+      res.redirect(basePath);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "OAuth callback failed";
-      res.status(500).send(message);
+      console.error("Dashboard Auth Error:", error);
+      res.redirect(`${basePath}/login`);
     }
-  }
-  handleLogout(req, res) {
-    req.session.destroy((sessionError) => {
-      if (sessionError) return res.status(500).json({ ok: false, message: "Failed to destroy session" });
-      res.clearCookie(this.options.sessionName ?? "discord_dashboard.sid");
-      res.json({ ok: true });
-    });
-  }
-  handleSession(req, res) {
-    const auth = req.session.discordAuth;
-    if (!auth) return res.status(200).json({ authenticated: false });
-    const manageableGuildCount = auth.guilds.filter((guild) => guild.owner || canManageGuild(guild.permissions)).length;
+  });
+  router.get("/api/session", (req, res) => {
+    if (!req.session.discordAuth) return res.json({ authenticated: false });
     res.json({
       authenticated: true,
-      user: { ...auth.user, avatarUrl: getUserAvatarUrl(auth.user) },
-      guildCount: manageableGuildCount,
-      expiresAt: auth.expiresAt
+      user: req.session.discordAuth.user,
+      guildCount: req.session.discordAuth.guilds.length
     });
-  }
-  async handleGuilds(req, res) {
-    const context = this.createContext(req);
-    if (this.options.ownerIds && this.options.ownerIds.length > 0 && !this.options.ownerIds.includes(context.user.id)) {
-      return res.status(403).json({ message: "You are not allowed to access this dashboard." });
-    }
-    let manageableGuilds = context.guilds.filter((guild) => guild.owner || canManageGuild(guild.permissions));
-    if (this.options.guildFilter) {
-      const filtered = [];
-      for (const guild of manageableGuilds) {
-        if (await this.options.guildFilter(guild, context)) filtered.push(guild);
-      }
-      manageableGuilds = filtered;
-    }
-    const botGuildIds = await this.fetchBotGuildIds();
-    const enrichedGuilds = manageableGuilds.map((guild) => {
-      const botInGuild = botGuildIds.has(guild.id);
-      return {
-        ...guild,
-        iconUrl: getGuildIconUrl(guild),
-        botInGuild,
-        inviteUrl: botInGuild ? void 0 : this.createGuildInviteUrl(guild.id)
-      };
-    });
-    res.json({ guilds: enrichedGuilds });
-  }
-  async handleOverview(req, res) {
-    const context = this.createContext(req);
-    const cards = await this.resolveOverviewCards(context);
+  });
+  router.get("/api/guilds", (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    res.json({ guilds: req.session.discordAuth.guilds });
+  });
+  router.get("/api/overview", async (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    const cards = options.getOverviewCards ? await options.getOverviewCards(buildContext(req)) : [];
     res.json({ cards });
-  }
-  async handleHomeCategories(req, res) {
-    const context = this.createContext(req);
-    const activeScope = this.resolveScope(context);
-    const categories = await this.resolveHomeCategories(context);
-    const visible = categories.filter((item) => item.scope === "setup" || item.scope === activeScope);
-    res.json({ categories: visible, activeScope });
-  }
-  async handleHome(req, res) {
-    const context = this.createContext(req);
-    const activeScope = this.resolveScope(context);
-    const categoryId = typeof req.query.categoryId === "string" ? req.query.categoryId : void 0;
-    let sections = await this.resolveHomeSections(context);
-    sections = sections.filter((section) => {
-      const sectionScope = section.scope ?? activeScope;
-      if (sectionScope !== "setup" && sectionScope !== activeScope) return false;
-      if (!categoryId) return true;
-      return section.categoryId === categoryId;
-    });
-    res.json({ sections, activeScope });
-  }
-  async handleLookupRoles(req, res) {
-    const context = this.createContext(req);
-    const guildId = typeof req.query.guildId === "string" && req.query.guildId.length > 0 ? req.query.guildId : context.selectedGuildId;
-    if (!guildId) return res.status(400).json({ message: "guildId is required" });
-    const query = typeof req.query.q === "string" ? req.query.q : "";
-    const limit = typeof req.query.limit === "string" ? Number(req.query.limit) : void 0;
-    const includeManaged = typeof req.query.includeManaged === "string" ? req.query.includeManaged === "true" : void 0;
-    const roles = await context.helpers.searchGuildRoles(guildId, query, { limit: Number.isFinite(limit) ? limit : void 0, includeManaged });
-    res.json({ roles });
-  }
-  async handleLookupChannels(req, res) {
-    const context = this.createContext(req);
-    const guildId = typeof req.query.guildId === "string" && req.query.guildId.length > 0 ? req.query.guildId : context.selectedGuildId;
-    if (!guildId) return res.status(400).json({ message: "guildId is required" });
-    const query = typeof req.query.q === "string" ? req.query.q : "";
-    const limit = typeof req.query.limit === "string" ? Number(req.query.limit) : void 0;
-    const nsfw = typeof req.query.nsfw === "string" ? req.query.nsfw === "true" : void 0;
-    const channelTypes = typeof req.query.channelTypes === "string" ? req.query.channelTypes.split(",").map((item) => Number(item.trim())).filter((item) => Number.isFinite(item)) : void 0;
-    const channels = await context.helpers.searchGuildChannels(guildId, query, { limit: Number.isFinite(limit) ? limit : void 0, nsfw, channelTypes });
-    res.json({ channels });
-  }
-  async handleLookupMembers(req, res) {
-    const context = this.createContext(req);
-    const guildId = typeof req.query.guildId === "string" && req.query.guildId.length > 0 ? req.query.guildId : context.selectedGuildId;
-    if (!guildId) return res.status(400).json({ message: "guildId is required" });
-    const query = typeof req.query.q === "string" ? req.query.q : "";
-    const limit = typeof req.query.limit === "string" ? Number(req.query.limit) : void 0;
-    const members = await context.helpers.searchGuildMembers(guildId, query, { limit: Number.isFinite(limit) ? limit : void 0 });
-    res.json({ members });
-  }
-  async handleHomeAction(req, res) {
-    const context = this.createContext(req);
-    const action = this.options.home?.actions?.[req.params.actionId];
-    if (!action) return res.status(404).json({ ok: false, message: "Home action not found" });
-    const payload = req.body;
-    if (!payload || typeof payload.sectionId !== "string" || !payload.values || typeof payload.values !== "object") {
-      return res.status(400).json({ ok: false, message: "Invalid home action payload" });
-    }
+  });
+  router.get("/api/home/categories", async (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    const categories = options.home?.getCategories ? await options.home.getCategories(buildContext(req)) : [];
+    res.json({ categories });
+  });
+  router.get("/api/home", async (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    const sections = options.home?.getSections ? await options.home.getSections(buildContext(req)) : [];
+    const categoryId = req.query.categoryId;
+    const filtered = categoryId ? sections.filter((s) => s.categoryId === categoryId) : sections;
+    res.json({ sections: filtered });
+  });
+  router.post("/api/home/:actionId", async (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    const actionId = req.params.actionId;
+    const actionFn = options.home?.actions?.[actionId];
+    if (!actionFn) return res.status(404).json({ error: "Action not found" });
     try {
-      const result = await action(context, { sectionId: payload.sectionId, values: payload.values });
+      const result = await actionFn(buildContext(req), req.body);
       res.json(result);
     } catch (error) {
-      res.status(500).json({ ok: false, message: error instanceof Error ? error.message : "Home action failed" });
+      res.status(500).json({ error: error instanceof Error ? error.message : "Action failed" });
     }
-  }
-  async handlePlugins(req, res) {
-    const context = this.createContext(req);
-    const activeScope = context.selectedGuildId ? "guild" : "user";
-    const payload = [];
-    for (const plugin of this.plugins) {
-      const pluginScope = plugin.scope ?? "both";
-      if (pluginScope !== "both" && pluginScope !== activeScope) continue;
-      const panels = await plugin.getPanels(context);
-      payload.push({ id: plugin.id, name: plugin.name, description: plugin.description, panels });
+  });
+  router.get("/api/plugins", async (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    const context = buildContext(req);
+    const resolvedPlugins = await Promise.all(
+      (options.plugins || []).map(async (p) => {
+        return {
+          id: p.id,
+          name: p.name,
+          description: p.description,
+          panels: p.getPanels ? await p.getPanels(context) : p.panels || []
+        };
+      })
+    );
+    res.json({ plugins: resolvedPlugins });
+  });
+  router.post("/api/plugins/:pluginId/:actionId", async (req, res) => {
+    if (!req.session.discordAuth) return res.status(401).json({ error: "Unauthorized" });
+    const { pluginId, actionId } = req.params;
+    const plugin = options.plugins?.find((p) => p.id === pluginId);
+    if (!plugin || !plugin.actions?.[actionId]) {
+      return res.status(404).json({ error: "Plugin or action not found" });
     }
-    res.json({ plugins: payload });
-  }
-  async handlePluginAction(req, res) {
-    const context = this.createContext(req);
-    const plugin = this.plugins.find((item) => item.id === req.params.pluginId);
-    if (!plugin) return res.status(404).json({ ok: false, message: "Plugin not found" });
-    const action = plugin.actions?.[req.params.actionId];
-    if (!action) return res.status(404).json({ ok: false, message: "Action not found" });
     try {
-      const result = await action(context, req.body);
+      const context = buildContext(req);
+      const result = await plugin.actions[actionId](context, req.body);
       res.json(result);
     } catch (error) {
-      res.status(500).json({ ok: false, message: error instanceof Error ? error.message : "Plugin action failed" });
+      console.error(`Action Error (${pluginId}/${actionId}):`, error);
+      res.status(500).json({ error: "Internal Server Error" });
     }
-  }
-  // --- Internal Dashboard Resolvers & Helpers ---
-  ensureAuthenticated = (req, res, next) => {
-    if (!req.session.discordAuth) {
-      res.status(401).json({ authenticated: false, message: "Authentication required" });
-      return;
+  });
+  app.use(basePath, router);
+  return { app, engine };
+}
+// src/adapters/elysia.ts
+import jwt from "@elysiajs/jwt";
+import node from "@elysiajs/node";
+import { Elysia } from "elysia";
+import { randomBytes as randomBytes2 } from "crypto";
+function createElysiaAdapter(options) {
+  const engine = new DashboardEngine(options);
+  const basePath = options.basePath ?? "/dashboard";
+  const sessionName = options.sessionName ?? "discord_dashboard.sid";
+  const app = options.app ?? new Elysia({ adapter: node() });
+  const router = new Elysia({ prefix: basePath }).use(
+    jwt({
+      name: "sessionSigner",
+      secret: options.sessionSecret,
+      schema: SessionSchema
+    })
+  ).derive(({ set }) => ({
+    html: (content) => {
+      set.headers["Content-Type"] = "text/html; charset=utf8";
+      return content;
     }
-    next();
-  };
-  createContext(req) {
-    const auth = req.session.discordAuth;
-    if (!auth) throw new Error("Not authenticated");
-    return {
-      user: auth.user,
-      guilds: auth.guilds,
-      accessToken: auth.accessToken,
-      selectedGuildId: typeof req.query.guildId === "string" ? req.query.guildId : void 0,
-      helpers: this.helpers
-    };
-  }
-  async exchangeCodeForToken(code) {
-    const response = await fetch(`${DISCORD_API}/oauth2/token`, {
-      method: "POST",
-      headers: { "Content-Type": "application/x-www-form-urlencoded" },
-      body: toQuery({
-        client_id: this.options.clientId,
-        client_secret: this.options.clientSecret,
-        grant_type: "authorization_code",
-        code,
-        redirect_uri: this.options.redirectUri
-      })
+  })).get("/", async ({ sessionSigner, cookie, redirect, html }) => {
+    const cookieValue = cookie[sessionName].value;
+    if (!cookieValue) return redirect(`${basePath}/login`);
+    const sessionData = await sessionSigner.verify(cookieValue);
+    if (!sessionData || !sessionData.discordAuth) return redirect(`${basePath}/login`);
+    return html(engine.render(basePath));
+  }).get("/login", async ({ sessionSigner, cookie, redirect }) => {
+    const state = randomBytes2(16).toString("hex");
+    const token = await sessionSigner.sign({ oauthState: state });
+    cookie[sessionName].set({
+      value: token,
+      httpOnly: true,
+      path: "/"
     });
-    if (!response.ok) throw new Error(`Failed token exchange: ${response.status} ${await response.text()}`);
-    return await response.json();
-  }
-  async resolveOverviewCards(context) {
-    if (this.options.getOverviewCards) return await this.options.getOverviewCards(context);
-    const manageableGuildCount = context.guilds.filter((guild) => guild.owner || canManageGuild(guild.permissions)).length;
-    return [
-      { id: "user", title: "Logged-in User", value: context.user.global_name || context.user.username, subtitle: `ID: ${context.user.id}`, intent: "info" },
-      { id: "guilds", title: "Manageable Guilds", value: manageableGuildCount, subtitle: "Owner or Manage Server permissions", intent: "success" },
-      { id: "plugins", title: "Plugins Loaded", value: this.plugins.length, subtitle: "Dynamic server modules", intent: "neutral" }
-    ];
-  }
-  async resolveHomeSections(context) {
-    const customSections = this.options.home?.getSections ? await this.options.home.getSections(context) : [];
-    const overviewSections = this.options.home?.getOverviewSections ? await this.options.home.getOverviewSections(context) : [];
-    if (customSections.length > 0 || overviewSections.length > 0) {
-      const normalizedOverview = overviewSections.map((section) => ({ ...section, categoryId: section.categoryId ?? "overview" }));
-      return [...normalizedOverview, ...customSections];
-    }
-    const selectedGuild = context.selectedGuildId ? context.guilds.find((guild) => guild.id === context.selectedGuildId) : void 0;
-    return [
-      {
-        id: "setup",
-        title: "Setup Details",
-        description: "Core dashboard setup information",
-        scope: "setup",
-        categoryId: "setup",
-        fields: [
-          { id: "dashboardName", label: "Dashboard Name", type: "text", value: this.options.dashboardName ?? "Discord Dashboard", readOnly: true },
-          { id: "basePath", label: "Base Path", type: "text", value: this.basePath, readOnly: true }
-        ]
-      },
-      {
-        id: "context",
-        title: "Dashboard Context",
-        description: selectedGuild ? `Managing ${selectedGuild.name}` : "Managing user dashboard",
-        scope: this.resolveScope(context),
-        categoryId: "overview",
-        fields: [
-          { id: "mode", label: "Mode", type: "text", value: selectedGuild ? "Guild" : "User", readOnly: true },
-          { id: "target", label: "Target", type: "text", value: selectedGuild ? selectedGuild.name : context.user.username, readOnly: true }
-        ]
+    return redirect(engine.getAuthUrl(state));
+  }).get("/callback", async ({ query, sessionSigner, cookie, redirect }) => {
+    const { code, state } = query;
+    const cookieValue = cookie[sessionName].value;
+    if (!cookieValue) return redirect(`${basePath}/login`);
+    const session2 = await sessionSigner.verify(cookieValue);
+    if (!state || !session2 || state !== session2.oauthState) return redirect(`${basePath}/login`);
+    const tokens = await engine.exchangeCode(code);
+    const [user, guilds] = await Promise.all([engine.fetchUser(tokens.access_token), engine.fetchGuilds(tokens.access_token)]);
+    const token = await sessionSigner.sign({
+      oauthState: void 0,
+      discordAuth: {
+        accessToken: tokens.access_token,
+        user,
+        guilds
       }
-    ];
-  }
-  resolveScope(context) {
-    return context.selectedGuildId ? "guild" : "user";
-  }
-  async resolveHomeCategories(context) {
-    if (this.options.home?.getCategories) {
-      const categories = await this.options.home.getCategories(context);
-      return [...categories].sort((a, b) => a.id === "overview" ? -1 : b.id === "overview" ? 1 : 0);
-    }
-    return [
-      { id: "overview", label: "Overview", scope: this.resolveScope(context) },
-      { id: "setup", label: "Setup", scope: "setup" }
-    ];
-  }
-  createGuildInviteUrl(guildId) {
-    const scopes = this.options.botInviteScopes && this.options.botInviteScopes.length > 0 ? this.options.botInviteScopes : ["bot", "applications.commands"];
-    return `https://discord.com/oauth2/authorize?${toQuery({
-      client_id: this.options.clientId,
-      scope: scopes.join(" "),
-      permissions: this.options.botInvitePermissions ?? "8",
-      guild_id: guildId,
-      disable_guild_select: "true"
-    })}`;
-  }
-  async fetchBotGuildIds() {
-    const response = await fetch(`${DISCORD_API}/users/@me/guilds`, { headers: { Authorization: `Bot ${this.options.botToken}` } });
-    if (!response.ok) return /* @__PURE__ */ new Set();
-    const guilds = await response.json();
-    return new Set(guilds.map((guild) => guild.id));
-  }
-  resolveTemplateRenderer() {
-    const selectedTemplate = this.options.uiTemplate ?? "default";
-    const defaultRenderer = ({ dashboardName, basePath, setupDesign }) => renderDashboardHtml(dashboardName, basePath, setupDesign);
-    const customRenderer = this.options.uiTemplates?.[selectedTemplate];
-    if (customRenderer) return customRenderer;
-    const builtinRenderer = getBuiltinTemplateRenderer(selectedTemplate);
-    if (builtinRenderer) return builtinRenderer;
-    if (selectedTemplate !== "default") throw new Error(`Unknown uiTemplate '${selectedTemplate}'. Register it in uiTemplates.`);
-    return defaultRenderer;
-  }
-};
+    });
+    cookie[sessionName].set({
+      value: token,
+      httpOnly: true,
+      path: "/"
+    });
+    return redirect(basePath);
+  });
+  app.use(router);
+  return { app, engine };
+}
+// src/adapters/fastify.ts
+import { randomBytes as randomBytes3 } from "crypto";
+function createFastifyAdapter(fastify, options) {
+  const engine = new DashboardEngine(options);
+  const basePath = options.basePath ?? "/dashboard";
+  fastify.register(
+    async (instance) => {
+      instance.get("/", async (request, reply) => {
+        if (!request.session.discordAuth) return reply.redirect(`${basePath}/login`);
+        return reply.type("html").send(engine.render(basePath));
+      });
+      instance.get("/login", async (request, reply) => {
+        const state = randomBytes3(16).toString("hex");
+        request.session.oauthState = state;
+        return reply.redirect(engine.getAuthUrl(state));
+      });
+      instance.get("/callback", async (request, reply) => {
+        const { code, state } = request.query;
+        if (state !== request.session.oauthState) return reply.status(403).send("Invalid OAuth2 state");
+        const tokens = await engine.exchangeCode(code);
+        const [user, guilds] = await Promise.all([engine.fetchUser(tokens.access_token), engine.fetchGuilds(tokens.access_token)]);
+        request.session.discordAuth = {
+          accessToken: tokens.access_token,
+          user,
+          guilds
+        };
+        return reply.redirect(basePath);
+      });
+    },
+    { prefix: basePath }
+  );
+  return { engine };
+}
 export {
   DashboardDesigner,
-  DiscordDashboard,
-  DiscordHelpers,
-  builtinTemplateRenderers,
-  getBuiltinTemplateRenderer
+  DashboardEngine,
+  SessionSchema,
+  createElysiaAdapter,
+  createExpressAdapter,
+  createFastifyAdapter
 };
 //# sourceMappingURL=index.js.map