@developer.krd/discord-dashboard 0.1.2 → 0.1.5

package/dist/index.cjs

@@ -31,2465 +31,2503 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   DashboardDesigner: () => DashboardDesigner,
-  builtinTemplateRenderers: () => builtinTemplateRenderers,
-  createDashboard: () => createDashboard,
-  createDashboardDesigner: () => createDashboardDesigner,
-  createDiscordHelpers: () => createDiscordHelpers,
-  getBuiltinTemplateRenderer: () => getBuiltinTemplateRenderer
+  DashboardEngine: () => DashboardEngine,
+  SessionSchema: () => SessionSchema,
+  createElysiaAdapter: () => createElysiaAdapter,
+  createExpressAdapter: () => createExpressAdapter,
+  createFastifyAdapter: () => createFastifyAdapter
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/dashboard.ts
-var import_compression = __toESM(require("compression"), 1);
-var import_express = __toESM(require("express"), 1);
-var import_express_session = __toESM(require("express-session"), 1);
-var import_helmet = __toESM(require("helmet"), 1);
-var import_node_http = require("http");
-var import_node_crypto = require("crypto");
+// src/Types/elysia.ts
+var import_elysia = require("elysia");
+var UserSchema = import_elysia.t.Object({
+  id: import_elysia.t.String(),
+  username: import_elysia.t.String(),
+  discriminator: import_elysia.t.String(),
+  avatar: import_elysia.t.Nullable(import_elysia.t.String()),
+  global_name: import_elysia.t.Optional(import_elysia.t.Nullable(import_elysia.t.String()))
+});
+var GuildSchema = import_elysia.t.Object({
+  id: import_elysia.t.String(),
+  name: import_elysia.t.String(),
+  icon: import_elysia.t.Nullable(import_elysia.t.String()),
+  owner: import_elysia.t.Boolean(),
+  permissions: import_elysia.t.String(),
+  iconUrl: import_elysia.t.Optional(import_elysia.t.Nullable(import_elysia.t.String())),
+  botInGuild: import_elysia.t.Optional(import_elysia.t.Nullable(import_elysia.t.Boolean())),
+  inviteUrl: import_elysia.t.Optional(import_elysia.t.Nullable(import_elysia.t.String()))
+});
+var SessionSchema = import_elysia.t.Object({
+  oauthState: import_elysia.t.Optional(import_elysia.t.String()),
+  discordAuth: import_elysia.t.Optional(
+    import_elysia.t.Object({
+      accessToken: import_elysia.t.String(),
+      user: UserSchema,
+      guilds: import_elysia.t.Array(GuildSchema)
+    })
+  )
+});
 
-// src/discord-helpers.ts
-var DISCORD_API = "https://discord.com/api/v10";
-async function fetchDiscordWithBot(botToken, path) {
-  const response = await fetch(`${DISCORD_API}${path}`, {
-    headers: {
-      Authorization: `Bot ${botToken}`
+// src/handlers/DiscordHelpers.ts
+var DiscordHelpers = class {
+  botToken;
+  DISCORD_API = "https://discord.com/api/v10";
+  constructor(botToken) {
+    this.botToken = botToken;
+  }
+  async fetchDiscordWithBot(path) {
+    const response = await fetch(`${this.DISCORD_API}${path}`, {
+      headers: {
+        Authorization: `Bot ${this.botToken}`
+      }
+    });
+    if (!response.ok) {
+      return null;
     }
-  });
-  if (!response.ok) {
-    return null;
+    return await response.json();
   }
-  return await response.json();
-}
-function createDiscordHelpers(botToken) {
-  return {
-    async getChannel(channelId) {
-      return await fetchDiscordWithBot(botToken, `/channels/${channelId}`);
-    },
-    async getGuildChannels(guildId) {
-      return await fetchDiscordWithBot(botToken, `/guilds/${guildId}/channels`) ?? [];
-    },
-    async searchGuildChannels(guildId, query, options) {
-      const channels = await fetchDiscordWithBot(botToken, `/guilds/${guildId}/channels`) ?? [];
-      const normalizedQuery = query.trim().toLowerCase();
-      const limit = Math.max(1, Math.min(options?.limit ?? 10, 50));
-      return channels.filter((channel) => {
-        if (options?.nsfw !== void 0 && Boolean(channel.nsfw) !== options.nsfw) {
-          return false;
+  async getChannel(channelId) {
+    return await this.fetchDiscordWithBot(`/channels/${channelId}`);
+  }
+  async getGuildChannels(guildId) {
+    return await this.fetchDiscordWithBot(`/guilds/${guildId}/channels`) ?? [];
+  }
+  async searchGuildChannels(guildId, query, options) {
+    const channels = await this.fetchDiscordWithBot(`/guilds/${guildId}/channels`) ?? [];
+    const normalizedQuery = query.trim().toLowerCase();
+    const limit = Math.max(1, Math.min(options?.limit ?? 10, 50));
+    return channels.filter((channel) => {
+      if (options?.nsfw !== void 0 && Boolean(channel.nsfw) !== options.nsfw) {
+        return false;
+      }
+      if (options?.channelTypes && options.channelTypes.length > 0 && !options.channelTypes.includes(channel.type)) {
+        return false;
+      }
+      if (!normalizedQuery) {
+        return true;
+      }
+      return channel.name.toLowerCase().includes(normalizedQuery);
+    }).slice(0, limit);
+  }
+  async getRole(guildId, roleId) {
+    const roles = await this.fetchDiscordWithBot(`/guilds/${guildId}/roles`);
+    if (!roles) {
+      return null;
+    }
+    return roles.find((role) => role.id === roleId) ?? null;
+  }
+  async getGuildRoles(guildId) {
+    return await this.fetchDiscordWithBot(`/guilds/${guildId}/roles`) ?? [];
+  }
+  async searchGuildRoles(guildId, query, options) {
+    const roles = await this.fetchDiscordWithBot(`/guilds/${guildId}/roles`) ?? [];
+    const normalizedQuery = query.trim().toLowerCase();
+    const limit = Math.max(1, Math.min(options?.limit ?? 10, 50));
+    return roles.filter((role) => {
+      if (!options?.includeManaged && role.managed) {
+        return false;
+      }
+      if (!normalizedQuery) {
+        return true;
+      }
+      return role.name.toLowerCase().includes(normalizedQuery);
+    }).sort((a, b) => b.position - a.position).slice(0, limit);
+  }
+  async searchGuildMembers(guildId, query, options) {
+    const limit = Math.max(1, Math.min(options?.limit ?? 10, 1e3));
+    const params = new URLSearchParams({
+      query: query.trim(),
+      limit: String(limit)
+    });
+    return await this.fetchDiscordWithBot(`/guilds/${guildId}/members/search?${params.toString()}`) ?? [];
+  }
+  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/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("&", "&")
+        .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;
         }
-        if (options?.channelTypes && options.channelTypes.length > 0 && !options.channelTypes.includes(channel.type)) {
-          return false;
+        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;
         }
-        if (!normalizedQuery) {
-          return true;
+        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;
         }
-        return channel.name.toLowerCase().includes(normalizedQuery);
-      }).slice(0, limit);
-    },
-    async getRole(guildId, roleId) {
-      const roles = await fetchDiscordWithBot(botToken, `/guilds/${guildId}/roles`);
-      if (!roles) {
-        return null;
-      }
-      return roles.find((role) => role.id === roleId) ?? null;
-    },
-    async getGuildRoles(guildId) {
-      return await fetchDiscordWithBot(botToken, `/guilds/${guildId}/roles`) ?? [];
-    },
-    async searchGuildRoles(guildId, query, options) {
-      const roles = await fetchDiscordWithBot(botToken, `/guilds/${guildId}/roles`) ?? [];
-      const normalizedQuery = query.trim().toLowerCase();
-      const limit = Math.max(1, Math.min(options?.limit ?? 10, 50));
-      return roles.filter((role) => {
-        if (!options?.includeManaged && role.managed) {
-          return false;
+        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;
         }
-        if (!normalizedQuery) {
-          return true;
+        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 []; }
         }
-        return role.name.toLowerCase().includes(normalizedQuery);
-      }).sort((a, b) => b.position - a.position).slice(0, limit);
-    },
-    async searchGuildMembers(guildId, query, options) {
-      const limit = Math.max(1, Math.min(options?.limit ?? 10, 1e3));
-      const params = new URLSearchParams({
-        query: query.trim(),
-        limit: String(limit)
-      });
-      return await fetchDiscordWithBot(botToken, `/guilds/${guildId}/members/search?${params.toString()}`) ?? [];
-    },
-    async getGuildMember(guildId, userId) {
-      return await fetchDiscordWithBot(botToken, `/guilds/${guildId}/members/${userId}`);
-    }
-  };
+        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); });
+    `;
 }
 
-// src/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;
-  cursor: pointer;
-  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;
-  cursor: pointer;
-}
-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;
-  cursor: grab;
-  font-size: 0.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: 0.9rem; }
-`;
+// 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 ?? {} });
+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>
+  <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">Home</button>
-          <button id="tabPlugins" class="main-tab">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);
-    };
+      /* FLOATING ISLAND STRUCTURE */
+      .layout { 
+        display: flex; 
+        gap: 24px; /* Gap between the floating islands */
+        height: 100%; 
+        width: 100%; 
+      }
+      
+      /* 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);
+      }
 
-    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;
+      /* 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; }
+
+      /* 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>
 
-      return 100;
+    <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")
     };
 
-    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"
-      };
+    const fetchJson = async (url, init) => {
+        const response = await fetch(url, init);
+        if (!response.ok) throw new Error(await response.text());
+        return response.json();
+    };
 
-      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 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) => [50, 33, 20].includes(Number(value)) ? Number(value) : 100;
+
     const makeButton = (action, pluginId, panelId, panelElement) => {
-      const button = document.createElement("button");
-      button.textContent = action.label;
-      button.className = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
-      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;
-              }
+        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(" ");
 
-              values[fieldId] = toFieldValue({ type: fieldType }, inputEl);
-            });
-            payload = {
-              panelId,
-              values
-            };
-          }
+        button.addEventListener("click", async () => {
+            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 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 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; }
+        });
+        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("");
+        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("");
     };
 
     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" + (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 (!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 (item.id) {
-          const status = document.createElement("span");
-          status.className = "server-status" + (item.botInGuild ? "" : " offline");
-          button.appendChild(status);
+    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);
+    };
 
-        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.");
+    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);
             }
-            return;
-          }
 
-          state.selectedGuildId = item.id;
-          renderServerRail();
-          updateContextLabel();
-          await refreshContent();
+            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);
         });
-        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" + (homeActive ? " active" : "");
-      el.tabPlugins.className = "main-tab" + (!homeActive ? " active" : "");
+        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);
     };
 
     const updateContextLabel = () => {
-      if (!state.selectedGuildId) {
-        el.centerTitle.textContent = "User Dashboard";
-        return;
-      }
+        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 selectedGuild = state.guilds.find((guild) => guild.id === state.selectedGuildId);
-      el.centerTitle.textContent = selectedGuild ? (selectedGuild.name + " Dashboard") : "Server Dashboard";
+    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 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" + (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();
+        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);
         });
-        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") {
-        if (element.value === "") {
-          return null;
-        }
-        return Number(element.value);
-      }
-
-      return element.value;
+        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;
     };
 
     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";
-      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";
-        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.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 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();
     };
 
     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";
-        btn.textContent = labelResolver(item);
-        btn.addEventListener("click", () => {
-          onSelect(item);
-          container.style.display = "none";
+        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.appendChild(btn);
-      });
-
-      container.style.display = "block";
+        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;
-        }
+        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));
+    };
 
-        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 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);
             }
 
-            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(","));
+            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 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";
+    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);
+                }
+
+                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);
+        });
+    };
+
+    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();
 
-      input.addEventListener("input", () => {
-        input.dataset.selectedObject = "";
-        selected.textContent = "No selection";
-        runSearch();
-      });
+        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")) ]);
 
-      input.addEventListener("blur", () => {
-        setTimeout(() => {
-          results.style.display = "none";
-        }, 120);
-      });
+        renderHomeSections(home.sections || []);
+        el.overviewArea.style.display = state.selectedHomeCategoryId === "overview" ? "block" : "none";
+        renderCards(overview.cards || []);
+        renderPlugins(plugins.plugins || []);
     };
 
-    const renderHomeSections = (sections) => {
-      if (!sections.length) {
-        el.homeSections.innerHTML = '<div class="empty">No home sections configured.</div>';
-        return;
-      }
+    const loadInitialData = async () => {
+        const session = await fetchJson(dashboardConfig.basePath + "/api/session");
+        if (!session.authenticated) { window.location.href = dashboardConfig.basePath + "/login"; 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);
-        }
+        state.session = session;
+        const guilds = await fetchJson(dashboardConfig.basePath + "/api/guilds");
+        state.guilds = guilds.guilds || [];
+        
+        renderUserBlock();
+        renderServerRail();
+        updateContextLabel();
 
-        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";
-              (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";
-              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);
-            }
+        el.tabHome.addEventListener("click", () => { state.activeMainTab = "home"; applyMainTab(); });
+        el.tabPlugins.addEventListener("click", () => { state.activeMainTab = "plugins"; applyMainTab(); });
 
-            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;
-                }
-              }
+        applyMainTab();
+        await refreshContent();
+    };
 
-              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);
-              }
-            }
+    loadInitialData().catch(console.error);
+    </script>
+</body>
+</html>`;
+}
 
-            fieldsWrap.appendChild(fieldWrap);
-          });
+// 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"};
+    }
 
-          wrap.appendChild(fieldsWrap);
-        }
+    * { box-sizing: border-box; }
 
-        if (section.actions?.length) {
-          const actions = document.createElement("div");
-          actions.className = "actions";
+    html, body { min-height: 100%; }
 
-          section.actions.forEach((action) => {
-            const button = document.createElement("button");
-            button.textContent = action.label;
-            button.className = action.variant === "primary" ? "primary" : action.variant === "danger" ? "danger" : "";
-            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;
-                  }
+    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);
+    }
 
-                  values[fieldId] = toFieldValue({ type: fieldType }, inputEl);
-                });
+    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 result = await fetchJson(buildApiUrl("/api/home/" + encodeURIComponent(action.id)), {
-                  method: "POST",
-                  headers: { "Content-Type": "application/json" },
-                  body: JSON.stringify({
-                    sectionId: section.id,
-                    values
-                  })
-                });
+    .page {
+      min-height: 100vh;
+      width: 100%;
+      padding: 0;
+    }
 
-                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);
-          });
+    .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;
+    }
 
-          wrap.appendChild(actions);
-        }
+    .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);
+    }
 
-        wrap.appendChild(message);
-        el.homeSections.appendChild(wrap);
-      });
-    };
+    .brand {
+      font-weight: 700;
+      font-size: 1rem;
+      letter-spacing: .2px;
+    }
 
-    const renderPlugins = (plugins) => {
-      if (!plugins.length) {
-        el.plugins.innerHTML = '<div class="empty">No plugins configured yet.</div>';
-        return;
-      }
+    .center-title {
+      border: 1px solid var(--border);
+      background: rgba(15, 23, 42, .44);
+      border-radius: 999px;
+      padding: 6px 12px;
+      font-size: .82rem;
+      color: #e2e8f0;
+    }
 
-      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);
-        }
+    .pill {
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 6px 12px;
+      font-size: .78rem;
+      color: var(--muted);
+      background: rgba(15, 23, 42, .52);
+    }
 
-        (plugin.panels || []).forEach((panel) => {
-          const panelBody = document.createElement("div");
+    .server-strip {
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--border);
+      background: rgba(8, 12, 18, .48);
+    }
 
-          const panelTitle = document.createElement("h4");
-          panelTitle.textContent = panel.title;
-          panelTitle.style.marginBottom = "4px";
-          panelBody.appendChild(panelTitle);
+    .server-rail {
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      padding-bottom: 2px;
+      scrollbar-width: thin;
+    }
 
-          if (panel.description) {
-            const p = document.createElement("div");
-            p.className = "subtitle";
-            p.textContent = panel.description;
-            panelBody.appendChild(p);
-          }
+    .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;
+    }
 
-          if (panel.fields?.length) {
-            const fieldsWrap = document.createElement("div");
-            fieldsWrap.className = "plugin-fields";
+    .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;
+    }
 
-            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;
-              }
+    .server-item:hover {
+      transform: translateY(-2px);
+      border-color: rgba(192,132,252,.72);
+    }
 
-              const label = document.createElement("label");
-              label.textContent = field.label;
-              fieldWrap.appendChild(label);
+    .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);
+    }
 
-              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";
-                (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";
-                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);
-              }
+    .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;
+    }
 
-              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;
-                }
+    .server-item.active .server-item-indicator {
+      opacity: 1;
+      height: 32px;
+    }
 
-                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);
-                }
-              }
+    .server-avatar {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 26px;
+      height: 26px;
+      border-radius: 8px;
+      object-fit: cover;
+    }
 
-              fieldsWrap.appendChild(fieldWrap);
-            });
-            panelBody.appendChild(fieldsWrap);
-          }
+    .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;
+    }
 
-          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);
-          }
+    .server-status {
+      position: absolute;
+      right: 12px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 9px;
+      height: 9px;
+      border-radius: 999px;
+      background: #22c55e;
+    }
 
-          wrap.appendChild(panelBody);
-        });
+    .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;
+    }
 
-        el.plugins.appendChild(wrap);
-      });
-    };
+    .server-status.offline {
+      background: #94a3b8;
+    }
 
-    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 || []);
-    };
+    .server-status.offline::after {
+      content: "Invite Bot";
+      color: #fda4af;
+    }
 
-    const loadInitialData = async () => {
-      applySetupDesign();
+    .content {
+      padding: 16px;
+    }
 
-      const session = await fetchJson(dashboardConfig.basePath + "/api/session");
-      if (!session.authenticated) {
-        window.location.href = dashboardConfig.basePath + "/login";
-        return;
-      }
+    .container {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: var(--surface);
+      padding: 14px;
+    }
 
-      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();
+    .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;
+    }
 
-      el.tabHome.addEventListener("click", () => {
-        state.activeMainTab = "home";
-        applyMainTab();
-      });
+    button {
+      border: 1px solid var(--border);
+      background: var(--card-2);
+      color: var(--text);
+      border-radius: 999px;
+      padding: 7px 13px;
+    }
 
-      el.tabPlugins.addEventListener("click", () => {
-        state.activeMainTab = "plugins";
-        applyMainTab();
-      });
+    button.primary {
+      border: none;
+      color: #0b1020;
+      font-weight: 700;
+      background: linear-gradient(90deg, rgba(192,132,252,.95), rgba(34,211,238,.95));
+    }
 
-      applyMainTab();
-      await refreshContent();
-    };
+    button.danger {
+      background: rgba(190,24,93,.2);
+      border-color: rgba(244,114,182,.45);
+    }
 
-    loadInitialData().catch((error) => {
-      el.userMeta.textContent = "Load failed";
-      console.error(error);
-    });
-  </script>
-</body>
-</html>`;
-}
+    .main-tab.active,
+    .home-category-btn.active {
+      background: rgba(34,211,238,.2);
+      border-color: rgba(34,211,238,.62);
+    }
 
-// 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;
-  cursor: pointer;
-  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;
-  cursor: pointer;
-}
-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; cursor: grab; 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; }
-@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);
-  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>
+    .section-title {
+      margin: 10px 0 9px;
+      font-size: .92rem;
+      color: #e2e8f0;
+      letter-spacing: .15px;
+    }
+
+    .grid { display: grid; gap: 10px; }
+    .cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+
+    .panel {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--card);
+      padding: 12px;
+    }
+
+    .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; }
+
+    .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;
+    }
+
+    .lookup-item {
+      width: 100%;
+      border: none;
+      border-radius: 0;
+      text-align: left;
+      padding: 8px 10px;
+      background: transparent;
+    }
+
+    .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);
+    }
+
+    .list-editor {
+      border: 1px solid var(--border);
+      border-radius: 10px;
+      background: var(--card-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: rgba(23, 29, 42, .78);
+    }
+
+    .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%; }
+    }
+
+    /* 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">Home</button>
-            <button id="tabPlugins" class="main-tab">Plugins</button>
+            <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/default.ts
-var defaultDashboardTemplateRenderer = ({
-  dashboardName,
-  basePath,
-  setupDesign
-}) => renderDashboardHtml(dashboardName, basePath, setupDesign);
+}
 
 // src/templates/index.ts
-var builtinTemplateRenderers = {
-  default: defaultDashboardTemplateRenderer,
-  compact: compactDashboardTemplateRenderer
+var BuiltinLayouts = {
+  default: renderDefaultLayout,
+  compact: renderCompactLayout,
+  "shadcn-magic": renderShadcnMagicLayout
 };
-function getBuiltinTemplateRenderer(templateId) {
-  return builtinTemplateRenderers[templateId];
-}
 
-// src/dashboard.ts
-var DISCORD_API2 = "https://discord.com/api/v10";
-var MANAGE_GUILD_PERMISSION = 0x20n;
-var ADMIN_PERMISSION = 0x8n;
-function normalizeBasePath(basePath) {
-  if (!basePath || basePath === "/") {
-    return "/dashboard";
+// 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"
   }
-  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);
+};
+
+// 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);
   }
-  return url.toString();
-}
-async function fetchDiscord(path, token) {
-  const response = await fetch(`${DISCORD_API2}${path}`, {
-    headers: {
-      Authorization: `Bearer ${token}`
+  resolveLayout(layoutInput) {
+    if (typeof layoutInput === "function") {
+      return layoutInput;
     }
-  });
-  if (!response.ok) {
-    throw new Error(`Discord API request failed (${response.status})`);
+    if (typeof layoutInput === "string" && BuiltinLayouts[layoutInput]) {
+      return BuiltinLayouts[layoutInput];
+    }
+    return BuiltinLayouts["default"];
   }
-  return await response.json();
-}
-async function exchangeCodeForToken(options, code) {
-  const response = await fetch(`${DISCORD_API2}/oauth2/token`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded"
-    },
-    body: toQuery({
-      client_id: options.clientId,
-      client_secret: options.clientSecret,
-      grant_type: "authorization_code",
-      code,
-      redirect_uri: options.redirectUri
-    })
-  });
-  if (!response.ok) {
-    const text = await response.text();
-    throw new Error(`Failed token exchange: ${response.status} ${text}`);
+  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;
   }
-  return await response.json();
-}
-function createContext(req, options) {
-  const auth = req.session.discordAuth;
-  if (!auth) {
-    throw new Error("Not authenticated");
+  render(contextBase) {
+    const finalContext = {
+      ...contextBase,
+      setupDesign: this.resolvedDesign
+    };
+    return this.layoutRenderer(finalContext);
   }
-  const selectedGuildId = typeof req.query.guildId === "string" ? req.query.guildId : void 0;
-  return {
-    user: auth.user,
-    guilds: auth.guilds,
-    accessToken: auth.accessToken,
-    selectedGuildId,
-    helpers: createDiscordHelpers(options.botToken)
-  };
-}
-function ensureAuthenticated(req, res, next) {
-  if (!req.session.discordAuth) {
-    res.status(401).json({ authenticated: false, message: "Authentication required" });
-    return;
+};
+
+// src/core/DashboardEngine.ts
+var DashboardEngine = class {
+  constructor(options) {
+    this.options = options;
+    this.helpers = new DiscordHelpers(options.botToken);
+    this.templateManager = new TemplateManager(options);
   }
-  next();
-}
-async function resolveOverviewCards(options, context) {
-  if (options.getOverviewCards) {
-    return await options.getOverviewCards(context);
+  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 `https://discord.com/oauth2/authorize?${query.toString()}`;
   }
-  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: options.plugins?.length ?? 0,
-      subtitle: "Dynamic server modules",
-      intent: "neutral"
-    }
-  ];
-}
-async function resolveHomeSections(options, context) {
-  const customSections = options.home?.getSections ? await options.home.getSections(context) : [];
-  const overviewSections = options.home?.getOverviewSections ? await options.home.getOverviewSections(context) : [];
-  if (customSections.length > 0 || overviewSections.length > 0) {
-    const normalizedOverview = overviewSections.map((section) => ({
-      ...section,
-      categoryId: section.categoryId ?? "overview"
-    }));
-    return [...normalizedOverview, ...customSections];
+  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();
   }
-  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: options.dashboardName ?? "Discord Dashboard",
-          readOnly: true
-        },
-        {
-          id: "basePath",
-          label: "Base Path",
-          type: "text",
-          value: options.basePath ?? "/dashboard",
-          readOnly: true
-        }
-      ]
-    },
-    {
-      id: "context",
-      title: "Dashboard Context",
-      description: selectedGuild ? `Managing ${selectedGuild.name}` : "Managing user dashboard",
-      scope: 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
-        }
-      ]
-    }
-  ];
-}
-function resolveScope(context) {
-  return context.selectedGuildId ? "guild" : "user";
-}
-async function resolveHomeCategories(options, context) {
-  if (options.home?.getCategories) {
-    const categories = await options.home.getCategories(context);
-    return [...categories].sort((a, b) => {
-      if (a.id === "overview") return -1;
-      if (b.id === "overview") return 1;
-      return 0;
+  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();
   }
-  return [
-    { id: "overview", label: "Overview", scope: resolveScope(context) },
-    { id: "setup", label: "Setup", scope: "setup" }
-  ];
-}
-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`;
+  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();
   }
-  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;
+  render(basePath) {
+    return this.templateManager.render({
+      dashboardName: this.options.dashboardName ?? "Discord Dashboard",
+      basePath
+    });
   }
-  const ext = guild.icon.startsWith("a_") ? "gif" : "png";
-  return `https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}.${ext}?size=128`;
-}
-function createGuildInviteUrl(options, guildId) {
-  const scopes = options.botInviteScopes && options.botInviteScopes.length > 0 ? options.botInviteScopes : ["bot", "applications.commands"];
-  return `https://discord.com/oauth2/authorize?${toQuery({
-    client_id: options.clientId,
-    scope: scopes.join(" "),
-    permissions: options.botInvitePermissions ?? "8",
-    guild_id: guildId,
-    disable_guild_select: "true"
-  })}`;
-}
-async function fetchBotGuildIds(botToken) {
-  const response = await fetch(`${DISCORD_API2}/users/@me/guilds`, {
-    headers: {
-      Authorization: `Bot ${botToken}`
+};
+
+// src/handlers/DashboardDesigner.ts
+var DashboardDesigner = class {
+  config = {
+    setupDesign: {},
+    uiTemplates: {}
+  };
+  categories = [];
+  sections = [];
+  plugins = [];
+  overviewCards = [];
+  constructor(dashboardName) {
+    if (dashboardName) {
+      this.config.dashboardName = dashboardName;
     }
-  });
-  if (!response.ok) {
-    return /* @__PURE__ */ new Set();
   }
-  const guilds = await response.json();
-  return new Set(guilds.map((guild) => guild.id));
-}
-function resolveTemplateRenderer(options) {
-  const selectedTemplate = options.uiTemplate ?? "default";
-  const defaultRenderer = ({ dashboardName, basePath, setupDesign }) => renderDashboardHtml(dashboardName, basePath, setupDesign);
-  const customRenderer = options.uiTemplates?.[selectedTemplate];
-  if (customRenderer) {
-    return customRenderer;
+  setLayout(template) {
+    this.config.uiTemplate = template;
+    return this;
   }
-  const builtinRenderer = getBuiltinTemplateRenderer(selectedTemplate);
-  if (builtinRenderer) {
-    return builtinRenderer;
+  setTheme(theme) {
+    this.config.uiTheme = theme;
+    return this;
   }
-  if (selectedTemplate !== "default") {
-    throw new Error(`Unknown uiTemplate '${selectedTemplate}'. Register it in uiTemplates.`);
+  setColors(colors) {
+    this.config.setupDesign = { ...this.config.setupDesign, ...colors };
+    return this;
   }
-  return defaultRenderer;
-}
-function createDashboard(options) {
-  const app = options.app ?? (0, import_express.default)();
-  const basePath = normalizeBasePath(options.basePath);
-  const dashboardName = options.dashboardName ?? "Discord Dashboard";
-  const templateRenderer = resolveTemplateRenderer(options);
-  const plugins = options.plugins ?? [];
-  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");
-  if (!options.app && options.trustProxy !== void 0) {
-    app.set("trust proxy", options.trustProxy);
+  setCustomCss(css) {
+    this.config.setupDesign.customCss = css;
+    return this;
   }
-  const router = import_express.default.Router();
-  const sessionMiddleware = (0, import_express_session.default)({
-    name: options.sessionName ?? "discord_dashboard.sid",
-    secret: options.sessionSecret,
-    resave: false,
-    saveUninitialized: false,
-    cookie: {
-      httpOnly: true,
-      sameSite: "lax",
-      maxAge: options.sessionMaxAgeMs ?? 1e3 * 60 * 60 * 24 * 7
-    }
-  });
+  registerCustomLayout(name, renderer) {
+    this.config.uiTemplates[name] = renderer;
+    return this;
+  }
+  // --- Content Building Methods ---
+  addOverviewCard(title, value, subtitle) {
+    this.overviewCards.push({ title, value, subtitle });
+    return this;
+  }
+  addCategory(category) {
+    this.categories.push(category.data);
+    return this;
+  }
+  addSection(section) {
+    this.sections.push(section.data);
+    return this;
+  }
+  addPlugin(plugin) {
+    this.plugins.push(plugin.data);
+    return this;
+  }
+  build() {
+    return {
+      ...this.config,
+      dashboardData: {
+        categories: this.categories,
+        sections: this.sections,
+        plugins: this.plugins,
+        overviewCards: this.overviewCards
+      }
+    };
+  }
+};
+
+// src/adapters/express.ts
+var import_compression = __toESM(require("compression"), 1);
+var import_express = __toESM(require("express"), 1);
+var import_express_session = __toESM(require("express-session"), 1);
+var import_helmet = __toESM(require("helmet"), 1);
+var import_node_crypto = require("crypto");
+function createExpressAdapter(options) {
+  const engine = new DashboardEngine(options);
+  const app = options.app ?? (0, import_express.default)();
+  const router = (0, import_express.Router)();
+  const basePath = options.basePath ?? "/dashboard";
   router.use((0, import_compression.default)());
+  router.use((0, import_helmet.default)({ contentSecurityPolicy: false }));
+  router.use(import_express.default.json());
   router.use(
-    (0, import_helmet.default)({
-      contentSecurityPolicy: false
+    (0, import_express_session.default)({
+      secret: options.sessionSecret,
+      resave: false,
+      saveUninitialized: false,
+      name: options.sessionName ?? "discord_dashboard.sid"
     })
   );
-  router.use(import_express.default.json());
-  router.use(sessionMiddleware);
+  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
+  });
   router.get("/", (req, res) => {
-    if (!req.session.discordAuth) {
-      res.redirect(`${basePath}/login`);
-      return;
-    }
-    res.setHeader("Cache-Control", "no-store");
-    res.type("html").send(templateRenderer({
-      dashboardName,
-      basePath,
-      setupDesign: options.setupDesign
-    }));
+    if (!req.session.discordAuth) return res.redirect(`${basePath}/login`);
+    res.type("html").send(engine.render(basePath));
   });
   router.get("/login", (req, res) => {
     const state = (0, import_node_crypto.randomBytes)(16).toString("hex");
     req.session.oauthState = state;
-    const scope = (options.scopes && options.scopes.length > 0 ? options.scopes : ["identify", "guilds"]).join(" ");
-    const query = toQuery({
-      client_id: options.clientId,
-      redirect_uri: options.redirectUri,
-      response_type: "code",
-      scope,
-      state,
-      prompt: "none"
-    });
-    res.redirect(`https://discord.com/oauth2/authorize?${query}`);
+    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) {
-        res.status(400).send("Missing OAuth2 code/state");
-        return;
-      }
-      if (!req.session.oauthState || req.session.oauthState !== state) {
-        res.status(403).send("Invalid OAuth2 state");
-        return;
-      }
-      const tokenData = await exchangeCodeForToken(options, 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(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`);
     }
   });
-  router.post("/logout", (req, res) => {
-    req.session.destroy((sessionError) => {
-      if (sessionError) {
-        res.status(500).json({ ok: false, message: "Failed to destroy session" });
-        return;
-      }
-      res.clearCookie(options.sessionName ?? "discord_dashboard.sid");
-      res.json({ ok: true });
-    });
-  });
   router.get("/api/session", (req, res) => {
-    const auth = req.session.discordAuth;
-    if (!auth) {
-      res.status(200).json({ authenticated: false });
-      return;
-    }
-    const manageableGuildCount = auth.guilds.filter((guild) => guild.owner || canManageGuild(guild.permissions)).length;
+    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
     });
   });
-  router.get("/api/guilds", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    if (options.ownerIds && options.ownerIds.length > 0 && !options.ownerIds.includes(context.user.id)) {
-      res.status(403).json({ message: "You are not allowed to access this dashboard." });
-      return;
-    }
-    let manageableGuilds = context.guilds.filter((guild) => guild.owner || canManageGuild(guild.permissions));
-    if (options.guildFilter) {
-      const filtered = [];
-      for (const guild of manageableGuilds) {
-        const allowed = await options.guildFilter(guild, context);
-        if (allowed) {
-          filtered.push(guild);
-        }
-      }
-      manageableGuilds = filtered;
-    }
-    const botGuildIds = await fetchBotGuildIds(options.botToken);
-    const enrichedGuilds = manageableGuilds.map((guild) => {
-      const botInGuild = botGuildIds.has(guild.id);
-      return {
-        ...guild,
-        iconUrl: getGuildIconUrl(guild),
-        botInGuild,
-        inviteUrl: botInGuild ? void 0 : createGuildInviteUrl(options, guild.id)
-      };
-    });
-    res.json({ guilds: enrichedGuilds });
+  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", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const cards = await resolveOverviewCards(options, context);
+  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 });
   });
-  router.get("/api/home/categories", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const activeScope = resolveScope(context);
-    const categories = await resolveHomeCategories(options, context);
-    const visible = categories.filter((item) => item.scope === "setup" || item.scope === activeScope);
-    res.json({ categories: visible, activeScope });
-  });
-  router.get("/api/home", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const activeScope = resolveScope(context);
-    const categoryId = typeof req.query.categoryId === "string" ? req.query.categoryId : void 0;
-    let sections = await resolveHomeSections(options, 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 });
-  });
-  router.get("/api/lookup/roles", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const guildId = typeof req.query.guildId === "string" && req.query.guildId.length > 0 ? req.query.guildId : context.selectedGuildId;
-    if (!guildId) {
-      res.status(400).json({ message: "guildId is required" });
-      return;
-    }
-    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 });
-  });
-  router.get("/api/lookup/channels", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const guildId = typeof req.query.guildId === "string" && req.query.guildId.length > 0 ? req.query.guildId : context.selectedGuildId;
-    if (!guildId) {
-      res.status(400).json({ message: "guildId is required" });
-      return;
-    }
-    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 });
+  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/lookup/members", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const guildId = typeof req.query.guildId === "string" && req.query.guildId.length > 0 ? req.query.guildId : context.selectedGuildId;
-    if (!guildId) {
-      res.status(400).json({ message: "guildId is required" });
-      return;
-    }
-    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 });
+  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", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const action = options.home?.actions?.[req.params.actionId];
-    if (!action) {
-      res.status(404).json({ ok: false, message: "Home action not found" });
-      return;
-    }
-    const payload = req.body;
-    if (!payload || typeof payload.sectionId !== "string" || !payload.values || typeof payload.values !== "object") {
-      res.status(400).json({ ok: false, message: "Invalid home action payload" });
-      return;
-    }
-    let result;
+  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 {
-      result = await action(context, {
-        sectionId: payload.sectionId,
-        values: payload.values
-      });
+      const result = await actionFn(buildContext(req), req.body);
+      res.json(result);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Home action failed";
-      res.status(500).json({ ok: false, message });
-      return;
+      res.status(500).json({ error: error instanceof Error ? error.message : "Action failed" });
     }
-    res.json(result);
   });
-  router.get("/api/plugins", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const activeScope = context.selectedGuildId ? "guild" : "user";
-    const payload = [];
-    for (const plugin of 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
-      });
-    }
-    res.json({ plugins: payload });
+  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", ensureAuthenticated, async (req, res) => {
-    const context = createContext(req, options);
-    const plugin = plugins.find((item) => item.id === req.params.pluginId);
-    if (!plugin) {
-      res.status(404).json({ ok: false, message: "Plugin not found" });
-      return;
-    }
-    const action = plugin.actions?.[req.params.actionId];
-    if (!action) {
-      res.status(404).json({ ok: false, message: "Action not found" });
-      return;
+  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" });
     }
-    let result;
     try {
-      result = await action(context, req.body);
+      const context = buildContext(req);
+      const result = await plugin.actions[actionId](context, req.body);
+      res.json(result);
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Plugin action failed";
-      res.status(500).json({ ok: false, message });
-      return;
+      console.error(`Action Error (${pluginId}/${actionId}):`, error);
+      res.status(500).json({ error: "Internal Server Error" });
     }
-    res.json(result);
   });
   app.use(basePath, router);
-  let server;
-  return {
-    app,
-    async start() {
-      if (options.app) {
-        return;
-      }
-      if (server) {
-        return;
-      }
-      const port = options.port ?? 3e3;
-      const host = options.host ?? "0.0.0.0";
-      server = (0, import_node_http.createServer)(app);
-      await new Promise((resolve) => {
-        server.listen(port, host, () => resolve());
-      });
-    },
-    async stop() {
-      if (!server) {
-        return;
-      }
-      await new Promise((resolve, reject) => {
-        server.close((error) => {
-          if (error) {
-            reject(error);
-            return;
-          }
-          resolve();
-        });
-      });
-      server = void 0;
+  return { app, engine };
+}
+
+// src/adapters/elysia.ts
+var import_jwt = __toESM(require("@elysiajs/jwt"), 1);
+var import_node = __toESM(require("@elysiajs/node"), 1);
+var import_elysia2 = require("elysia");
+var import_node_crypto2 = require("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 import_elysia2.Elysia({ adapter: (0, import_node.default)() });
+  const router = new import_elysia2.Elysia({ prefix: basePath }).use(
+    (0, import_jwt.default)({
+      name: "sessionSigner",
+      secret: options.sessionSecret,
+      schema: SessionSchema
+    })
+  ).derive(({ set }) => ({
+    html: (content) => {
+      set.headers["Content-Type"] = "text/html; charset=utf8";
+      return content;
     }
-  };
-}
-
-// src/designer.ts
-var CategoryBuilder = class {
-  constructor(scope, categoryId, categoryLabel) {
-    this.scope = scope;
-    this.categoryId = categoryId;
-    this.categoryLabel = categoryLabel;
-  }
-  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
+  })).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 = (0, import_node_crypto2.randomBytes)(16).toString("hex");
+    const token = await sessionSigner.sign({ oauthState: state });
+    cookie[sessionName].set({
+      value: token,
+      httpOnly: true,
+      path: "/"
     });
-    return this;
-  }
-  buildCategory() {
-    return {
-      id: this.categoryId,
-      label: this.categoryLabel,
-      scope: this.scope
-    };
-  }
-  buildSections() {
-    return [...this.sections];
-  }
-};
-var DashboardDesigner = class {
-  partialOptions;
-  categories = [];
-  pages = [];
-  homeActions = {};
-  loadHandlers = {};
-  saveHandlers = {};
-  constructor(baseOptions) {
-    this.partialOptions = { ...baseOptions };
-  }
-  setup(input) {
-    if (input.ownerIds) this.partialOptions.ownerIds = input.ownerIds;
-    if (input.botInvitePermissions) this.partialOptions.botInvitePermissions = input.botInvitePermissions;
-    if (input.botInviteScopes) this.partialOptions.botInviteScopes = input.botInviteScopes;
-    if (input.dashboardName) this.partialOptions.dashboardName = input.dashboardName;
-    if (input.basePath) this.partialOptions.basePath = input.basePath;
-    if (input.uiTemplate) this.partialOptions.uiTemplate = input.uiTemplate;
-    return this;
-  }
-  useTemplate(templateId) {
-    this.partialOptions.uiTemplate = templateId;
-    return this;
-  }
-  addTemplate(templateId, renderer) {
-    this.partialOptions.uiTemplates = {
-      ...this.partialOptions.uiTemplates ?? {},
-      [templateId]: renderer
-    };
-    return this;
-  }
-  setupDesign(input) {
-    this.partialOptions.setupDesign = {
-      ...this.partialOptions.setupDesign ?? {},
-      ...input
-    };
-    return this;
-  }
-  userCategory(categoryId, categoryLabel, build) {
-    const builder = new CategoryBuilder("user", categoryId, categoryLabel);
-    build(builder);
-    this.categories.push(builder);
-    return this;
-  }
-  guildCategory(categoryId, categoryLabel, build) {
-    const builder = new CategoryBuilder("guild", categoryId, categoryLabel);
-    build(builder);
-    this.categories.push(builder);
-    return this;
-  }
-  setupCategory(categoryId, categoryLabel, build) {
-    const builder = new CategoryBuilder("setup", categoryId, categoryLabel);
-    build(builder);
-    this.categories.push(builder);
-    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 ?? []
+    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
       }
     });
-    return this;
-  }
-  onHomeAction(actionId, handler) {
-    this.homeActions[actionId] = handler;
-    return this;
-  }
-  onLoad(pageId, handler) {
-    this.loadHandlers[pageId] = handler;
-    return this;
-  }
-  onload(pageId, handler) {
-    return this.onLoad(pageId, handler);
-  }
-  onSave(pageId, handler) {
-    this.saveHandlers[pageId] = handler;
-    return this;
-  }
-  onsave(pageId, handler) {
-    return this.onSave(pageId, handler);
-  }
-  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
-    };
-  }
-};
-function createDashboardDesigner(baseOptions) {
-  return new DashboardDesigner(baseOptions);
+    cookie[sessionName].set({
+      value: token,
+      httpOnly: true,
+      path: "/"
+    });
+    return redirect(basePath);
+  });
+  app.use(router);
+  return { app, engine };
+}
+
+// src/adapters/fastify.ts
+var import_crypto = require("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 = (0, import_crypto.randomBytes)(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 };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DashboardDesigner,
-  builtinTemplateRenderers,
-  createDashboard,
-  createDashboardDesigner,
-  createDiscordHelpers,
-  getBuiltinTemplateRenderer
+  DashboardEngine,
+  SessionSchema,
+  createElysiaAdapter,
+  createExpressAdapter,
+  createFastifyAdapter
 });
 //# sourceMappingURL=index.cjs.map