fse-theme-default 0.3.0

package/src/components/Sidebar.astro

@@ -0,0 +1,207 @@
+---
+/**
+ * The app shell's navigation. Everything is data-driven: the framework
+ * injects `nav` (the admin page of every model the user may read) and
+ * `user`; app-specific links come from the SidebarLinks extension point.
+ */
+import { ssr } from "fse-ssr/ssr";
+import Logo from "./Logo.astro";
+import NavLink from "./NavLink.astro";
+import SidebarLinks from "./SidebarLinks.astro";
+import type { ShellContext } from "../types";
+
+const { t, nav, user, lang_prefix } = ssr<ShellContext>();
+---
+
+<div
+  id="sidebar-backdrop"
+  class="fixed inset-0 z-30 bg-secondary-900/40 backdrop-blur-xs lg:hidden hidden opacity-0 transition-opacity duration-300"
+>
+</div>
+
+<aside
+  id="nav-menu-1"
+  aria-label="Side navigation"
+  class="fixed lg:sticky top-0 bottom-0 h-dvh left-0 z-40 flex flex-col bg-white border-r border-secondary-200 w-64 transform -translate-x-full lg:translate-x-0 transition-all duration-300 ease-in-out overflow-hidden"
+  transition:name="sidebar"
+  transition:persist
+  transition:animate="none"
+>
+  <div id="sidebar-header" class="relative flex items-center justify-center h-16 shrink-0 px-2">
+    <a
+      aria-label="Home"
+      class="sidebar-full-logo flex items-center gap-2 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 rounded-md"
+      href={`${lang_prefix}/`}
+    >
+      <Logo class="h-9 w-auto" />
+    </a>
+
+    <button
+      id="toggle-sidebar-mini"
+      class="hidden lg:flex absolute right-2 p-2 text-secondary-500 hover:text-secondary-800 hover:bg-secondary-100 rounded-lg transition-colors focus:outline-hidden"
+      aria-label="Toggle sidebar"
+    >
+      <svg class="sidebar-icon-collapse" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><path d="M9 3v18"></path><path d="m16 15-3-3 3-3"></path>
+      </svg>
+      <svg class="sidebar-icon-expand hidden" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><path d="M9 3v18"></path><path d="m14 9 3 3-3 3"></path>
+      </svg>
+    </button>
+
+    <button
+      id="close-sidebar"
+      class="lg:hidden absolute right-2 p-2 text-secondary-500 hover:text-secondary-900 hover:bg-secondary-100 rounded-lg transition-colors focus:outline-hidden"
+      aria-label="Close sidebar"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  </div>
+
+  <nav aria-label="Main" class="flex-1 overflow-y-auto px-3 py-3 space-y-0.5">
+    <NavLink href={`${lang_prefix}/`} label={t.nav.home ?? "Home"}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"></path>
+      </svg>
+    </NavLink>
+
+    <SidebarLinks />
+
+    {nav.map((item) => (
+      <NavLink href={`${lang_prefix}${item.href}`} label={t.models[item.table].title ?? item.table}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M3 9h18M9 21V9"></path>
+        </svg>
+      </NavLink>
+    ))}
+  </nav>
+
+  <div class="border-t border-secondary-200 px-3 py-3 space-y-0.5 shrink-0">
+    <button
+      id="toggle-theme"
+      type="button"
+      class="w-full flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition-colors text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900"
+      aria-label="Toggle dark mode"
+    >
+      <svg class="shrink-0 block dark:hidden" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+      <svg class="shrink-0 hidden dark:block" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="4"></circle><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path>
+      </svg>
+      <span class="sidebar-label truncate">
+        <span class="block dark:hidden">{t.nav.dark_mode ?? "Dark mode"}</span>
+        <span class="hidden dark:block">{t.nav.light_mode ?? "Light mode"}</span>
+      </span>
+    </button>
+
+    {user && user.can_read_users && (
+      <NavLink href={`${lang_prefix}/users`} label={t.nav.users ?? "Users"}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <circle cx="12" cy="6" r="4"></circle><path d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5Z"></path>
+        </svg>
+      </NavLink>
+    )}
+
+    {user && (
+      <NavLink href={`${lang_prefix}/settings`} label={t.nav.settings ?? "Settings"}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 0 0-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 0 0-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 0 0 1.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><circle cx="12" cy="12" r="3"></circle>
+        </svg>
+      </NavLink>
+    )}
+
+    {user && (
+      <form action="/logout" method="POST" data-astro-reload>
+        <button
+          class="w-full flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition-colors text-secondary-700 hover:bg-secondary-100 hover:text-secondary-900"
+          type="submit"
+        >
+          <svg class="shrink-0" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 9l-3 3m0 0l3 3m-3-3h7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+          </svg>
+          <span class="sidebar-label font-medium truncate">{t.nav.logout ?? "Logout"}</span>
+        </button>
+      </form>
+    )}
+
+    {!user && (
+      <NavLink href={`${lang_prefix}/login`} label={t.nav.login ?? "Login"}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"></path>
+        </svg>
+      </NavLink>
+    )}
+  </div>
+</aside>
+
+<script>
+  function setActiveLink() {
+    const currentPath = window.location.pathname;
+    document.querySelectorAll<HTMLAnchorElement>("[data-nav-link]").forEach((link) => {
+      const href = link.getAttribute("href");
+      if (!href) return;
+      const root = href.replace(/\/$/, "") === "";
+      const active = root ? currentPath === href : currentPath.startsWith(href);
+      if (active) link.setAttribute("aria-current", "page");
+      else link.removeAttribute("aria-current");
+    });
+  }
+
+  function openSidebar() {
+    const sidebar = document.getElementById("nav-menu-1");
+    const backdrop = document.getElementById("sidebar-backdrop");
+    sidebar?.classList.remove("-translate-x-full");
+    backdrop?.classList.remove("hidden");
+    setTimeout(() => backdrop?.classList.remove("opacity-0"), 10);
+    document.body.style.overflow = "hidden";
+  }
+
+  function closeSidebar() {
+    const sidebar = document.getElementById("nav-menu-1");
+    const backdrop = document.getElementById("sidebar-backdrop");
+    sidebar?.classList.add("-translate-x-full");
+    backdrop?.classList.add("opacity-0");
+    setTimeout(() => backdrop?.classList.add("hidden"), 300);
+    document.body.style.overflow = "";
+  }
+
+  document.addEventListener("open-sidebar", openSidebar);
+  document.addEventListener("astro:before-preparation", closeSidebar);
+
+  function bindOnce(el: HTMLElement | null, key: string, handler: () => void) {
+    if (!el || el.dataset.bound === key) return;
+    el.dataset.bound = key;
+    el.addEventListener("click", handler);
+  }
+
+  function setupSidebar() {
+    const root = document.documentElement;
+    const miniToggle = document.getElementById("toggle-sidebar-mini");
+
+    const syncMiniIcons = (isMini: boolean) => {
+      miniToggle?.querySelector(".sidebar-icon-collapse")?.classList.toggle("hidden", isMini);
+      miniToggle?.querySelector(".sidebar-icon-expand")?.classList.toggle("hidden", !isMini);
+    };
+    syncMiniIcons(root.classList.contains("sidebar-mini"));
+
+    bindOnce(miniToggle, "mini", () => {
+      const isMini = root.classList.toggle("sidebar-mini");
+      localStorage.setItem("sidebar-mini", isMini ? "1" : "0");
+      syncMiniIcons(isMini);
+    });
+    bindOnce(document.getElementById("close-sidebar"), "close", closeSidebar);
+    bindOnce(document.getElementById("sidebar-backdrop"), "close", closeSidebar);
+    bindOnce(document.getElementById("toggle-theme"), "theme", () => {
+      const isDark = root.classList.toggle("dark");
+      localStorage.setItem("theme", isDark ? "dark" : "light");
+    });
+  }
+
+  document.addEventListener("astro:page-load", () => {
+    setActiveLink();
+    setupSidebar();
+  });
+</script>

package/src/components/SidebarLinks.astro

@@ -0,0 +1,10 @@
+---
+/**
+ * Extension point: app-specific sidebar entries, rendered between "Home"
+ * and the generated model links. Empty in the default theme — a child theme
+ * overrides this file (same path under its src/) to add its own links:
+ *
+ *   import NavLink from "@parent/components/NavLink.astro";
+ *   <NavLink href="/products" label={t.nav.products}>…icon…</NavLink>
+ */
+---

package/src/components/Table.astro

@@ -0,0 +1,157 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import type { SsrList } from "fse-ssr/ssr";
+import type { TableHeader } from "../types/pages";
+import Modal from "./Modal.astro";
+
+interface Props {
+  /** Column config; page-static, so branching on `format` happens at build time. */
+  headers: TableHeader[];
+  /** Server-side rows; each column renders `row[header.key]`. */
+  rows: SsrList<any>;
+}
+
+const { headers, rows } = Astro.props;
+const { t } = ssr();
+// Locale lookup with an SSR value as the key (e.g. the row's role).
+const roleLabels = t.roles as Record<string, string>;
+
+// Unique per Table instance so multiple tables on one page don't collide on
+// the shared delete-confirmation dialog.
+const modalId = `table-delete-modal-${crypto.randomUUID()}`;
+---
+
+<div class="w-full overflow-x-auto">
+  <table class="w-full text-left border-collapse" cellspacing="0">
+    <thead class="hidden md:table-header-group">
+      <tr class="bg-secondary-50">
+        {
+          headers.map((h) => (
+            <th
+              scope="col"
+              class="h-11 px-4 text-xs font-semibold uppercase tracking-wide border-b border-secondary-200 text-secondary-500"
+            >
+              {h.title}
+            </th>
+          ))
+        }
+      </tr>
+    </thead>
+    <tbody>
+      {
+        rows.map((row) => (
+          <tr class="flex flex-col md:table-row transition-colors hover:bg-secondary-50 border-b border-secondary-100 last:border-b-0 p-4 md:p-0 gap-1.5 md:gap-0">
+            {headers.map((h) => (
+              <td class="text-sm md:border-t border-secondary-100 relative">
+                {h.format === "number" ? (
+                  <div class="px-4 py-2.5 flex items-center justify-between md:justify-start gap-4">
+                    <span class="md:hidden text-xs font-medium text-secondary-400 uppercase tracking-wide">
+                      {h.title}
+                    </span>
+                    <input
+                      type="number"
+                      value={row[h.key]}
+                      class="w-16 px-2.5 py-1.5 text-sm border border-secondary-300 rounded-lg focus:border-primary-500 focus:ring-1 focus:ring-primary-500 focus:outline-hidden"
+                    />
+                  </div>
+                ) : h.format === "delete" ? (
+                  <div class="px-4 py-2.5 flex items-center justify-between md:justify-start gap-4">
+                    <span class="md:hidden text-xs font-medium text-secondary-400 uppercase tracking-wide">
+                      {h.title}
+                    </span>
+                    <button
+                      type="button"
+                      class="p-1.5 text-secondary-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors table-delete-trigger"
+                      data-modal-id={modalId}
+                      data-url={row.delete_url}
+                      data-error-msg={t.table.delete_error ?? "Error occurred"}
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                        <polyline points="3 6 5 6 21 6" />
+                        <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+                        <path d="M10 11v6m4-6v6" />
+                        <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+                      </svg>
+                    </button>
+                  </div>
+                ) : (
+                  <a
+                    href={row.link}
+                    class="px-4 py-2.5 flex items-center justify-between md:justify-start gap-4 h-full text-secondary-800 hover:text-secondary-900"
+                  >
+                    <span class="md:hidden text-xs font-medium text-secondary-400 uppercase tracking-wide">
+                      {h.title}
+                    </span>
+                    <div class="flex-1 md:flex-none text-right md:text-left">
+                      {h.format === "image" ? (
+                        row[h.key] ? (
+                          <img
+                            src={row[h.key]}
+                            alt="Thumbnail"
+                            class="w-10 h-10 object-cover rounded-lg ml-auto md:ml-0"
+                          />
+                        ) : (
+                          <div class="w-10 h-10 bg-secondary-100 rounded-lg flex items-center justify-center text-secondary-400 text-xs ml-auto md:ml-0">
+                            —
+                          </div>
+                        )
+                      ) : h.key === "role" ? (
+                        roleLabels[row[h.key]] ?? row[h.key]
+                      ) : (
+                        row[h.key]
+                      )}
+                    </div>
+                  </a>
+                )}
+              </td>
+            ))}
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>
+
+<!-- Shared delete-confirmation dialog; each delete button fills in its target. -->
+<Modal id={modalId} title={t.table.delete_title}>
+  <p class="text-sm text-secondary-600 mb-5">{t.table.delete_confirm}</p>
+  <div class="flex justify-end gap-2">
+    <button type="button" class="btn-secondary modal-close-btn" data-modal-id={modalId}>
+      {t.table.cancel}
+    </button>
+    <button type="button" class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors table-delete-confirm">
+      {t.table.delete_btn}
+    </button>
+  </div>
+</Modal>
+
+<script>
+  // Opening/closing and backdrop dismissal are handled globally by Modal.astro.
+  document.addEventListener("click", (e) => {
+    const target = e.target as HTMLElement;
+
+    const trigger = target.closest(".table-delete-trigger");
+    if (trigger) {
+      const modalId = trigger.getAttribute("data-modal-id");
+      const modal = modalId ? (document.getElementById(modalId) as HTMLDialogElement | null) : null;
+      if (modal) {
+        const confirmBtn = modal.querySelector(".table-delete-confirm");
+        confirmBtn?.setAttribute("data-url", trigger.getAttribute("data-url") || "");
+        confirmBtn?.setAttribute("data-error-msg", trigger.getAttribute("data-error-msg") || "");
+        if (!modal.open) modal.showModal();
+      }
+    }
+
+    const confirmBtn = target.closest(".table-delete-confirm");
+    if (confirmBtn) {
+      const url = confirmBtn.getAttribute("data-url");
+      const errorMsg = confirmBtn.getAttribute("data-error-msg") || "Error occurred";
+      if (url) {
+        fetch(url, { method: "DELETE" }).then((r) => {
+          if (r.ok) window.location.reload();
+          else alert(errorMsg);
+        });
+      }
+    }
+  });
+</script>

package/src/components/TableFilters.astro

@@ -0,0 +1,137 @@
+---
+import { ssr } from "fse-ssr/ssr";
+
+interface Props {
+  searchPlaceholder?: string;
+  card?: boolean;
+}
+
+const { t, search } = ssr<{ search?: string }>();
+
+const { searchPlaceholder = "Search...", card = false } = Astro.props;
+const hasExtraFilters = Astro.slots.has("default");
+---
+
+<div
+  class={card
+    ? "bg-white rounded-xl border border-secondary-200 overflow-hidden mb-6"
+    : ""}
+>
+  <form method="GET">
+    <!-- Main row -->
+    <div class="flex flex-wrap items-center gap-2 px-4 py-3 border-b border-secondary-200 bg-white">
+      <div class="relative flex-1 min-w-48">
+        <input
+          type="text"
+          name="search"
+          value={search ?? ""}
+          placeholder={searchPlaceholder}
+          class="w-full h-9 px-3.5 pr-9 text-sm border border-secondary-200 rounded-lg outline-hidden focus:border-primary-500 focus:ring-1 focus:ring-primary-500 bg-white text-secondary-900"
+        />
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute right-3 top-1/2 -translate-y-1/2 text-secondary-400 pointer-events-none">
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.35-4.35"></path>
+        </svg>
+      </div>
+
+      <button type="submit" class="btn-primary h-9 py-0">
+        {t.filters.search ?? "Suchen"}
+      </button>
+
+      {
+        hasExtraFilters && (
+          <button
+            type="button"
+            id="filters-toggle"
+            class="flex items-center gap-1.5 h-9 px-3 text-sm border border-secondary-200 rounded-lg hover:bg-secondary-100 transition-colors text-secondary-700 whitespace-nowrap"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="4" y1="6" x2="20" y2="6" />
+              <line x1="8" y1="12" x2="16" y2="12" />
+              <line x1="11" y1="18" x2="13" y2="18" />
+            </svg>
+            {t.filters.label ?? "Filter"}
+            <span
+              id="filters-badge"
+              class="hidden min-w-[18px] h-[18px] px-1 rounded-full bg-primary-600 text-white text-[10px] font-bold items-center justify-center leading-none"
+            />
+          </button>
+        )
+      }
+
+      <a
+        href="?"
+        id="filters-clear"
+        class="h-9 px-4 hidden items-center text-sm text-secondary-600 border border-secondary-200 rounded-lg hover:bg-secondary-100 bg-white transition-colors whitespace-nowrap"
+      >
+        {t.filters.clear ?? "Zurücksetzen"}
+      </a>
+    </div>
+
+    <!-- Collapsible extra-filters panel -->
+    {
+      hasExtraFilters && (
+        <div
+          id="filters-panel"
+          class="hidden flex-col sm:flex-row sm:flex-wrap items-stretch sm:items-center gap-2 px-4 py-3 border-b border-secondary-200"
+        >
+          <slot />
+          <button type="submit" class="btn-primary w-full sm:w-auto h-9 py-0">
+            {t.filters.apply ?? "Anwenden"}
+          </button>
+        </div>
+      )
+    }
+  </form>
+</div>
+
+<script>
+  function setupFilters() {
+    const toggle = document.getElementById("filters-toggle");
+    const panel = document.getElementById("filters-panel");
+    const badge = document.getElementById("filters-badge");
+    const clearBtn = document.getElementById("filters-clear");
+
+    const params = new URLSearchParams(window.location.search);
+    params.delete("page");
+
+    const extraParams = new URLSearchParams(params);
+    extraParams.delete("search");
+    const extraActive = Array.from(extraParams.values()).filter((v) => v !== "").length;
+    const anyActive = Array.from(params.values()).filter((v) => v !== "").length > 0;
+
+    if (badge && extraActive > 0) {
+      badge.textContent = String(extraActive);
+      badge.classList.remove("hidden");
+      badge.classList.add("flex");
+    }
+
+    if (panel && extraActive > 0) {
+      panel.classList.remove("hidden");
+      panel.classList.add("flex");
+    }
+
+    if (clearBtn && anyActive) {
+      clearBtn.classList.remove("hidden");
+      clearBtn.classList.add("flex");
+      (clearBtn as HTMLAnchorElement).href = window.location.pathname;
+    }
+
+    if (toggle && panel) {
+      toggle.addEventListener("click", () => {
+        const isOpen = panel.classList.contains("flex");
+        if (isOpen) {
+          panel.classList.remove("flex");
+          panel.classList.add("hidden");
+        } else {
+          panel.classList.remove("hidden");
+          panel.classList.add("flex");
+        }
+      });
+    }
+  }
+
+  // `astro:page-load` fires on the initial load too; calling setupFilters()
+  // directly as well would double-bind the toggle button.
+  document.addEventListener("astro:page-load", setupFilters);
+</script>

package/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/fse-ssr-translations.d.ts" />

package/src/layouts/EmailLayout.astro

@@ -0,0 +1,45 @@
+---
+import { ssr } from "fse-ssr/ssr";
+import type { SsrValue } from "fse-ssr/ssr";
+
+interface Props {
+  title: string | SsrValue<string>;
+}
+
+const { title } = Astro.props;
+const { base_url } = ssr<{ base_url: string }>();
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+  </head>
+  <body style="margin: 0; padding: 0; background-color: #f8f5f4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+    <div style="background-color: #f8f5f4; padding: 40px 20px; text-align: center;">
+      <div style="max-width: 560px; margin: 0 auto; background-color: #ffffff; border-radius: 8px; overflow: hidden; border: 1px solid #ddd5d0; text-align: left;">
+        <!-- Header -->
+        <div style="background-color: #6a9b3c; padding: 32px 40px; text-align: center;">
+          <a href={base_url} target="_blank" style="display: inline-block; margin-bottom: 10px; color: rgba(255,255,255,0.75); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;">Starter</a>
+          <slot name="header" />
+        </div>
+        <!-- Body -->
+        <div style="padding: 40px;">
+          <slot />
+        </div>
+        <!-- Wide slot: full-width sections between body and footer (optional) -->
+        <slot name="wide" />
+        <!-- Footer -->
+        <div style="padding: 24px 40px; background-color: #f4f9ee; border-top: 1px solid #e6f2d6; text-align: center;">
+          <slot name="footer">
+            <p style="margin: 0; color: #655650; font-size: 12px; line-height: 1.625;">
+               If you did not request this email, you can safely ignore it.
+            </p>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

package/src/layouts/Layout.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * The app shell every theme page renders in: sidebar navigation (see
+ * Sidebar.astro), dark mode, view transitions. `sidebar={false}` gives a
+ * bare centered page (login, errors, …). A child theme overrides this file
+ * to change the shell for every inherited page at once.
+ */
+import "../styles/global.css";
+import { ClientRouter } from "astro:transitions";
+import { ssr } from "fse-ssr/ssr";
+import type { SsrValue } from "fse-ssr/ssr";
+import Head from "../components/Head.astro";
+import Logo from "../components/Logo.astro";
+import Sidebar from "../components/Sidebar.astro";
+
+interface Props {
+  title: string | SsrValue<string>;
+  sidebar?: boolean;
+}
+
+const { title, sidebar = true } = Astro.props;
+const { lang } = ssr();
+---
+
+<!doctype html>
+<html lang={lang ?? "en"}>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <Head />
+    <title>{title}</title>
+    <!-- Filled by the server with the page's render context as JSON; read it
+         client-side via pageProps() from fse-ssr/client. -->
+    <script is:inline type="application/json" id="__fse-props__"></script>
+    <ClientRouter />
+    <script is:inline>
+      if (localStorage.getItem("sidebar-mini") === "1") {
+        document.documentElement.classList.add("sidebar-mini");
+      }
+      // Apply the saved (or system) color scheme before first paint.
+      (function () {
+        const saved = localStorage.getItem("theme");
+        const dark =
+          saved === "dark" ||
+          (!saved && window.matchMedia("(prefers-color-scheme: dark)").matches);
+        document.documentElement.classList.toggle("dark", dark);
+      })();
+      document.addEventListener("astro:before-swap", (e) => {
+        const root = e.newDocument.documentElement;
+        if (localStorage.getItem("sidebar-mini") === "1") root.classList.add("sidebar-mini");
+        if (document.documentElement.classList.contains("dark")) root.classList.add("dark");
+      });
+    </script>
+  </head>
+  <body class="bg-secondary-50 text-secondary-900">
+    <div class="relative flex min-h-screen">
+      {sidebar && <Sidebar />}
+      <div
+        class:list={[
+          "w-full min-w-0 flex flex-col",
+          sidebar && "py-6 px-5 lg:py-8 lg:px-8",
+        ]}
+      >
+        {sidebar && (
+          <div class="mb-4 flex items-center gap-4 lg:hidden">
+            <button
+              id="open-sidebar"
+              class="p-1.5 text-secondary-500 hover:text-secondary-900 hover:bg-secondary-100 transition-colors rounded-lg focus:outline-hidden"
+              aria-label="Open menu"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line>
+              </svg>
+            </button>
+            <a href="/"><Logo class="h-8 w-auto" /></a>
+          </div>
+        )}
+        <slot />
+      </div>
+    </div>
+
+    <script>
+      document.addEventListener("astro:page-load", () => {
+        const openBtn = document.getElementById("open-sidebar");
+        if (openBtn && !openBtn.dataset.bound) {
+          openBtn.dataset.bound = "1";
+          openBtn.addEventListener("click", () =>
+            document.dispatchEvent(new CustomEvent("open-sidebar")),
+          );
+        }
+      });
+    </script>
+  </body>
+</html>