@morphika/andami 0.5.1 → 0.5.2

package/app/admin/layout.tsx

@@ -1,320 +1,320 @@
-"use client";
-
-import { usePathname, useRouter } from "next/navigation";
-import Link from "next/link";
-import { getSiteConfig } from "../../lib/config";
-import { ANDAMI_VERSION } from "../../lib/version";
-
-// ============================================
-// Navigation Configuration — grouped by section
-// ============================================
-
-const workspaceLinks = [
-  { href: "/admin/pages", label: "Pages", icon: "file" },
-  { href: "/admin/projects", label: "Projects", icon: "film" },
-  { href: "/admin/styles", label: "Customize", icon: "palette" },
-  { href: "/admin/navigation", label: "Navigation", icon: "nav" },
-];
-
-const systemLinks = [
-  { href: "/admin/storage", label: "Storage", icon: "harddisk" },
-  { href: "/admin/database", label: "Database", icon: "database" },
-  { href: "/admin/settings", label: "Metadata", icon: "code" },
-  { href: "/admin/backups", label: "Backups", icon: "cloud-download" },
-];
-
-// Shared tile shape — logo square, active item, hover bg all share this
-// so every piece lines up pixel-perfect.
-const TILE_SIZE = "w-10 h-10";
-const TILE_RADIUS = "rounded-lg";
-
-// ============================================
-// Tooltip — CSS-only (group-hover), no JS state, 120ms fade + slide-in
-// ============================================
-// Rendered to the right of its parent tile. The parent must have
-// `group relative` classes (already baked into `tileBase`). Uses
-// `pointer-events-none` so it never blocks clicks or creates its own
-// hover state.
-
-function Tooltip({ children }: { children: React.ReactNode }) {
-  return (
-    <span
-      role="tooltip"
-      className="pointer-events-none absolute left-full top-1/2 ml-1.5 z-50 whitespace-nowrap rounded-md border border-white/10 bg-[#2a2d33] px-2.5 py-1.5 text-[11px] font-medium text-white shadow-lg opacity-0 transition-[opacity,margin] duration-150 ease-out group-hover:opacity-100 group-hover:ml-3"
-      style={{ transform: "translateY(-50%)" }}
-    >
-      {children}
-    </span>
-  );
-}
-
-// ============================================
-// Andami Mark — inlined from docs/andami_mark.svg
-// ============================================
-
-function AndamiMark({ size = 30 }: { size?: number }) {
-  // viewBox cropped to the actual content bbox (the original 0 0 500 500
-  // had ~36% empty padding that made the mark render tiny). Centered on the
-  // shape's true centroid (249.75, 240.2) with a 280px padded square.
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="110 100 280 280"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden
-    >
-      <path
-        fill="#076BFF"
-        d="M228.8,166.3h39.6c3.1,0,5.7-2.5,5.7-5.6V121c0-3.1-2.6-5.7-5.7-5.7h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6 C223.1,163.8,225.7,166.3,228.8,166.3z"
-      />
-      <path
-        fill="#1E2025"
-        d="M227.2,185.8h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6c0,3.1,2.6,5.7,5.7,5.7h39.6c3.1,0,5.7-2.6,5.7-5.7v-39.6 C232.9,188.4,230.3,185.8,227.2,185.8z"
-      />
-      <path
-        fill="#1E2025"
-        d="M311.4,231.1v-39.6c0-3.1-2.6-5.7-5.7-5.7h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6c0,3.1,2.6,5.7,5.7,5.7h39.6 C308.8,236.8,311.4,234.3,311.4,231.1z"
-      />
-      <path
-        fill="#1E2025"
-        d="M332.7,258.4h-41.3c-3.3,0-6,2.7-6,6v94.7c0,3.3,2.7,6,6,6h41.3c3.3,0,6-2.7,6-6v-94.7 C338.7,261.1,336,258.4,332.7,258.4z"
-      />
-      <path
-        fill="#1E2025"
-        d="M208.1,258.4h-41.3c-3.3,0-6,2.7-6,6v94.7c0,3.3,2.7,6,6,6h41.3c3.3,0,6-2.7,6-6v-94.7 C214.2,261.1,211.5,258.4,208.1,258.4z"
-      />
-    </svg>
-  );
-}
-
-// ============================================
-// Icon Component — Mockup A set (Storage kept from original)
-// ============================================
-
-function NavIcon({ icon }: { icon: string }) {
-  const size = 20;
-  switch (icon) {
-    case "file":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-          <path d="M14 2v6h6" />
-        </svg>
-      );
-    case "film":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="3" y="3" width="7" height="7" rx="1.5" />
-          <rect x="14" y="3" width="7" height="7" rx="1.5" />
-          <rect x="3" y="14" width="7" height="7" rx="1.5" />
-          <rect x="14" y="14" width="7" height="7" rx="1.5" />
-        </svg>
-      );
-    case "palette":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <circle cx="12" cy="12" r="9" />
-          <circle cx="8" cy="10" r="1" />
-          <circle cx="16" cy="10" r="1" />
-          <circle cx="12" cy="15" r="1" />
-        </svg>
-      );
-    case "nav":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <line x1="4" y1="7" x2="20" y2="7" />
-          <line x1="4" y1="12" x2="20" y2="12" />
-          <line x1="4" y1="17" x2="14" y2="17" />
-        </svg>
-      );
-    case "database":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <ellipse cx="12" cy="6" rx="8" ry="3" />
-          <path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6" />
-          <path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
-        </svg>
-      );
-    case "harddisk":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M22 12H2" />
-          <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" />
-          <line x1="6" y1="16" x2="6.01" y2="16" strokeWidth="2" />
-          <line x1="10" y1="16" x2="10.01" y2="16" strokeWidth="2" />
-        </svg>
-      );
-    case "code":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <polyline points="8 6 3 12 8 18" />
-          <polyline points="16 6 21 12 16 18" />
-        </svg>
-      );
-    case "cloud-download":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M20 16.5A4.5 4.5 0 0 0 17 8.5 7 7 0 0 0 4 9a5 5 0 0 0 1 9.9" />
-          <path d="M12 12v8" />
-          <path d="M8.5 16.5L12 20l3.5-3.5" />
-        </svg>
-      );
-    case "setup":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M14.7 6.3a4 4 0 0 0-5.6 5.6l-6 6a1.5 1.5 0 0 0 2.1 2.1l6-6a4 4 0 0 0 5.6-5.6l-2.2 2.2-2.1-2.1z" />
-        </svg>
-      );
-    case "view":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M15 3h6v6" />
-          <path d="M10 14L21 3" />
-          <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
-        </svg>
-      );
-    case "logout":
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-          <polyline points="16 17 21 12 16 7" />
-          <line x1="21" y1="12" x2="9" y2="12" />
-        </svg>
-      );
-    default:
-      return null;
-  }
-}
-
-// ============================================
-// Layout Component — collapsed-only sidebar
-// ============================================
-
-export default function AdminLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  const isPageBuilder =
-    /^\/admin\/pages\/[^/]+$/.test(pathname) ||
-    /^\/admin\/projects\/[^/]+$/.test(pathname);
-
-  // Don't show admin shell on login or setup pages
-  if (pathname === "/admin/login" || pathname === "/admin/setup") {
-    return <>{children}</>;
-  }
-
-  const handleLogout = async () => {
-    await fetch("/api/admin/auth", { method: "DELETE" });
-    router.push("/admin/login");
-    router.refresh();
-  };
-
-  const isLinkActive = (href: string) =>
-    pathname === href || pathname.startsWith(href + "/");
-
-  const tileBase = `group relative flex items-center justify-center ${TILE_SIZE} ${TILE_RADIUS} transition-colors`;
-
-  const renderNavLink = (link: { href: string; label: string; icon: string }) => {
-    const isActive = isLinkActive(link.href);
-    return (
-      <Link
-        key={link.href}
-        href={link.href}
-        className={`${tileBase} ${
-          isActive
-            ? "bg-[#076bff] text-white"
-            : "text-white/70 hover:bg-white/[0.06] hover:text-white"
-        }`}
-        aria-label={link.label}
-      >
-        <NavIcon icon={link.icon} />
-        <Tooltip>{link.label}</Tooltip>
-      </Link>
-    );
-  };
-
-  return (
-    <div
-      data-admin
-      className="flex h-screen bg-[#f8f8f8]"
-      style={{ fontFamily: "Inter, system-ui, sans-serif" }}
-    >
-      {/* Sidebar — collapsed-only (64px) */}
-      <aside className="flex w-16 flex-col items-center bg-gradient-to-b from-[#1e2025] to-[#1a1c20] border-r border-white/[0.07]">
-        {/* Logo — white tile with the Andami mark, same square as nav items */}
-        <div className="pt-3 pb-2">
-          <div
-            className={`${tileBase} bg-white`}
-            aria-label={`Morphika Andami v${ANDAMI_VERSION}`}
-          >
-            <AndamiMark size={30} />
-            <Tooltip>
-              Morphika Andami
-              <span className="ml-1.5 text-white/55">v{ANDAMI_VERSION}</span>
-            </Tooltip>
-          </div>
-        </div>
-
-        {/* Workspace nav */}
-        <nav className="flex flex-1 flex-col items-center gap-1.5 pt-2 pb-2">
-          {workspaceLinks.map(renderNavLink)}
-
-          <div className="my-2 h-px w-6 bg-white/10" aria-hidden />
-
-          {systemLinks.map(renderNavLink)}
-        </nav>
-
-        {/* Utility footer */}
-        <div className="flex flex-col items-center gap-1.5 pb-3">
-          <div className="mb-2 h-px w-6 bg-white/10" aria-hidden />
-
-          <Link
-            href="/admin/setup"
-            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
-            aria-label="Setup Wizard"
-          >
-            <NavIcon icon="setup" />
-            <Tooltip>Setup Wizard</Tooltip>
-          </Link>
-
-          <Link
-            href="/"
-            target="_blank"
-            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
-            aria-label="View Site"
-          >
-            <NavIcon icon="view" />
-            <Tooltip>View Site</Tooltip>
-          </Link>
-
-          <button
-            onClick={handleLogout}
-            className={`${tileBase} text-white/55 hover:bg-red-500/[0.1] hover:text-red-300`}
-            aria-label="Log out"
-          >
-            <NavIcon icon="logout" />
-            <Tooltip>Log out</Tooltip>
-          </button>
-        </div>
-      </aside>
-
-      {/* Main content area — no top header bar, pages have their own titles */}
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <main
-          className={`flex-1 ${
-            isPageBuilder
-              ? "overflow-hidden"
-              : "overflow-y-auto p-8 bg-[#f8f8f8]"
-          }`}
-        >
-          {children}
-        </main>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { getSiteConfig } from "../../lib/config";
+import { ANDAMI_VERSION } from "../../lib/version";
+
+// ============================================
+// Navigation Configuration — grouped by section
+// ============================================
+
+const workspaceLinks = [
+  { href: "/admin/pages", label: "Pages", icon: "file" },
+  { href: "/admin/projects", label: "Projects", icon: "film" },
+  { href: "/admin/styles", label: "Customize", icon: "palette" },
+  { href: "/admin/navigation", label: "Navigation", icon: "nav" },
+];
+
+const systemLinks = [
+  { href: "/admin/storage", label: "Storage", icon: "harddisk" },
+  { href: "/admin/database", label: "Database", icon: "database" },
+  { href: "/admin/settings", label: "Metadata", icon: "code" },
+  { href: "/admin/backups", label: "Backups", icon: "cloud-download" },
+];
+
+// Shared tile shape — logo square, active item, hover bg all share this
+// so every piece lines up pixel-perfect.
+const TILE_SIZE = "w-10 h-10";
+const TILE_RADIUS = "rounded-lg";
+
+// ============================================
+// Tooltip — CSS-only (group-hover), no JS state, 120ms fade + slide-in
+// ============================================
+// Rendered to the right of its parent tile. The parent must have
+// `group relative` classes (already baked into `tileBase`). Uses
+// `pointer-events-none` so it never blocks clicks or creates its own
+// hover state.
+
+function Tooltip({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute left-full top-1/2 ml-1.5 z-50 whitespace-nowrap rounded-md border border-white/10 bg-[#2a2d33] px-2.5 py-1.5 text-[11px] font-medium text-white shadow-lg opacity-0 transition-[opacity,margin] duration-150 ease-out group-hover:opacity-100 group-hover:ml-3"
+      style={{ transform: "translateY(-50%)" }}
+    >
+      {children}
+    </span>
+  );
+}
+
+// ============================================
+// Andami Mark — inlined from docs/andami_mark.svg
+// ============================================
+
+function AndamiMark({ size = 30 }: { size?: number }) {
+  // viewBox cropped to the actual content bbox (the original 0 0 500 500
+  // had ~36% empty padding that made the mark render tiny). Centered on the
+  // shape's true centroid (249.75, 240.2) with a 280px padded square.
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="110 100 280 280"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <path
+        fill="#3580f9"
+        d="M228.8,166.3h39.6c3.1,0,5.7-2.5,5.7-5.6V121c0-3.1-2.6-5.7-5.7-5.7h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6 C223.1,163.8,225.7,166.3,228.8,166.3z"
+      />
+      <path
+        fill="#1E2025"
+        d="M227.2,185.8h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6c0,3.1,2.6,5.7,5.7,5.7h39.6c3.1,0,5.7-2.6,5.7-5.7v-39.6 C232.9,188.4,230.3,185.8,227.2,185.8z"
+      />
+      <path
+        fill="#1E2025"
+        d="M311.4,231.1v-39.6c0-3.1-2.6-5.7-5.7-5.7h-39.6c-3.1,0-5.7,2.6-5.7,5.7v39.6c0,3.1,2.6,5.7,5.7,5.7h39.6 C308.8,236.8,311.4,234.3,311.4,231.1z"
+      />
+      <path
+        fill="#1E2025"
+        d="M332.7,258.4h-41.3c-3.3,0-6,2.7-6,6v94.7c0,3.3,2.7,6,6,6h41.3c3.3,0,6-2.7,6-6v-94.7 C338.7,261.1,336,258.4,332.7,258.4z"
+      />
+      <path
+        fill="#1E2025"
+        d="M208.1,258.4h-41.3c-3.3,0-6,2.7-6,6v94.7c0,3.3,2.7,6,6,6h41.3c3.3,0,6-2.7,6-6v-94.7 C214.2,261.1,211.5,258.4,208.1,258.4z"
+      />
+    </svg>
+  );
+}
+
+// ============================================
+// Icon Component — Mockup A set (Storage kept from original)
+// ============================================
+
+function NavIcon({ icon }: { icon: string }) {
+  const size = 20;
+  switch (icon) {
+    case "file":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <path d="M14 2v6h6" />
+        </svg>
+      );
+    case "film":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <rect x="3" y="3" width="7" height="7" rx="1.5" />
+          <rect x="14" y="3" width="7" height="7" rx="1.5" />
+          <rect x="3" y="14" width="7" height="7" rx="1.5" />
+          <rect x="14" y="14" width="7" height="7" rx="1.5" />
+        </svg>
+      );
+    case "palette":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <circle cx="12" cy="12" r="9" />
+          <circle cx="8" cy="10" r="1" />
+          <circle cx="16" cy="10" r="1" />
+          <circle cx="12" cy="15" r="1" />
+        </svg>
+      );
+    case "nav":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <line x1="4" y1="7" x2="20" y2="7" />
+          <line x1="4" y1="12" x2="20" y2="12" />
+          <line x1="4" y1="17" x2="14" y2="17" />
+        </svg>
+      );
+    case "database":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <ellipse cx="12" cy="6" rx="8" ry="3" />
+          <path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6" />
+          <path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" />
+        </svg>
+      );
+    case "harddisk":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M22 12H2" />
+          <path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z" />
+          <line x1="6" y1="16" x2="6.01" y2="16" strokeWidth="2" />
+          <line x1="10" y1="16" x2="10.01" y2="16" strokeWidth="2" />
+        </svg>
+      );
+    case "code":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <polyline points="8 6 3 12 8 18" />
+          <polyline points="16 6 21 12 16 18" />
+        </svg>
+      );
+    case "cloud-download":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M20 16.5A4.5 4.5 0 0 0 17 8.5 7 7 0 0 0 4 9a5 5 0 0 0 1 9.9" />
+          <path d="M12 12v8" />
+          <path d="M8.5 16.5L12 20l3.5-3.5" />
+        </svg>
+      );
+    case "setup":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M14.7 6.3a4 4 0 0 0-5.6 5.6l-6 6a1.5 1.5 0 0 0 2.1 2.1l6-6a4 4 0 0 0 5.6-5.6l-2.2 2.2-2.1-2.1z" />
+        </svg>
+      );
+    case "view":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M15 3h6v6" />
+          <path d="M10 14L21 3" />
+          <path d="M21 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5" />
+        </svg>
+      );
+    case "logout":
+      return (
+        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+          <polyline points="16 17 21 12 16 7" />
+          <line x1="21" y1="12" x2="9" y2="12" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}
+
+// ============================================
+// Layout Component — collapsed-only sidebar
+// ============================================
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const isPageBuilder =
+    /^\/admin\/pages\/[^/]+$/.test(pathname) ||
+    /^\/admin\/projects\/[^/]+$/.test(pathname);
+
+  // Don't show admin shell on login or setup pages
+  if (pathname === "/admin/login" || pathname === "/admin/setup") {
+    return <>{children}</>;
+  }
+
+  const handleLogout = async () => {
+    await fetch("/api/admin/auth", { method: "DELETE" });
+    router.push("/admin/login");
+    router.refresh();
+  };
+
+  const isLinkActive = (href: string) =>
+    pathname === href || pathname.startsWith(href + "/");
+
+  const tileBase = `group relative flex items-center justify-center ${TILE_SIZE} ${TILE_RADIUS} transition-colors`;
+
+  const renderNavLink = (link: { href: string; label: string; icon: string }) => {
+    const isActive = isLinkActive(link.href);
+    return (
+      <Link
+        key={link.href}
+        href={link.href}
+        className={`${tileBase} ${
+          isActive
+            ? "bg-[#3580f9] text-white"
+            : "text-white/70 hover:bg-white/[0.06] hover:text-white"
+        }`}
+        aria-label={link.label}
+      >
+        <NavIcon icon={link.icon} />
+        <Tooltip>{link.label}</Tooltip>
+      </Link>
+    );
+  };
+
+  return (
+    <div
+      data-admin
+      className="flex h-screen bg-[#f8f8f8]"
+      style={{ fontFamily: "Inter, system-ui, sans-serif" }}
+    >
+      {/* Sidebar — collapsed-only (64px) */}
+      <aside className="flex w-16 flex-col items-center bg-gradient-to-b from-[#1e2025] to-[#1a1c20] border-r border-white/[0.07]">
+        {/* Logo — white tile with the Andami mark, same square as nav items */}
+        <div className="pt-3 pb-2">
+          <div
+            className={`${tileBase} bg-white`}
+            aria-label={`Morphika Andami v${ANDAMI_VERSION}`}
+          >
+            <AndamiMark size={30} />
+            <Tooltip>
+              Morphika Andami
+              <span className="ml-1.5 text-white/55">v{ANDAMI_VERSION}</span>
+            </Tooltip>
+          </div>
+        </div>
+
+        {/* Workspace nav */}
+        <nav className="flex flex-1 flex-col items-center gap-1.5 pt-2 pb-2">
+          {workspaceLinks.map(renderNavLink)}
+
+          <div className="my-2 h-px w-6 bg-white/10" aria-hidden />
+
+          {systemLinks.map(renderNavLink)}
+        </nav>
+
+        {/* Utility footer */}
+        <div className="flex flex-col items-center gap-1.5 pb-3">
+          <div className="mb-2 h-px w-6 bg-white/10" aria-hidden />
+
+          <Link
+            href="/admin/setup"
+            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
+            aria-label="Setup Wizard"
+          >
+            <NavIcon icon="setup" />
+            <Tooltip>Setup Wizard</Tooltip>
+          </Link>
+
+          <Link
+            href="/"
+            target="_blank"
+            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
+            aria-label="View Site"
+          >
+            <NavIcon icon="view" />
+            <Tooltip>View Site</Tooltip>
+          </Link>
+
+          <button
+            onClick={handleLogout}
+            className={`${tileBase} text-white/55 hover:bg-red-500/[0.1] hover:text-red-300`}
+            aria-label="Log out"
+          >
+            <NavIcon icon="logout" />
+            <Tooltip>Log out</Tooltip>
+          </button>
+        </div>
+      </aside>
+
+      {/* Main content area — no top header bar, pages have their own titles */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <main
+          className={`flex-1 ${
+            isPageBuilder
+              ? "overflow-hidden"
+              : "overflow-y-auto p-8 bg-[#f8f8f8]"
+          }`}
+        >
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}