@morphika/andami 0.5.0 → 0.5.2

package/app/admin/layout.tsx

@@ -1,327 +1,320 @@
-"use client";
-
-import { usePathname, useRouter } from "next/navigation";
-import Link from "next/link";
-import { useState, useEffect, useRef } from "react";
-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" },
-];
-
-// ============================================
-// Icon Component — Mockup A set (Storage kept from original)
-// ============================================
-
-function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
-  const size = 18;
-  void active; // active state handled by parent text color
-  switch (icon) {
-    case "file":
-      // Mockup A — document with folded corner
-      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":
-      // Mockup A — 2x2 rounded grid (Projects)
-      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":
-      // Mockup A — minimal palette face (Customize)
-      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":
-      // Mockup A — 3 horizontal lines (Navigation)
-      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":
-      // Mockup A — 3-tier cylinder (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":
-      // Kept as-is per user request (Storage)
-      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":
-      // Mockup A — < > brackets (Metadata)
-      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":
-      // Mockup A — cloud with down arrow (Backups)
-      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>
-      );
-    default:
-      return null;
-  }
-}
-
-// ============================================
-// Layout Component
-// ============================================
-
-export default function AdminLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const pathname = usePathname();
-  const router = useRouter();
-
-  // Detect if we're inside the page builder (editing a specific page or project)
-  const isPageBuilder =
-    /^\/admin\/pages\/[^/]+$/.test(pathname) ||
-    /^\/admin\/projects\/[^/]+$/.test(pathname);
-
-  // Start collapsed if loading directly into the builder
-  const [sidebarOpen, setSidebarOpen] = useState(!isPageBuilder);
-  const prevPathname = useRef(pathname);
-
-  // Auto-collapse sidebar when entering the page builder,
-  // auto-expand when leaving it
-  useEffect(() => {
-    if (pathname === prevPathname.current) return;
-    const wasInBuilder =
-      /^\/admin\/pages\/[^/]+$/.test(prevPathname.current) ||
-      /^\/admin\/projects\/[^/]+$/.test(prevPathname.current);
-    prevPathname.current = pathname;
-
-    if (isPageBuilder && !wasInBuilder) {
-      setSidebarOpen(false);
-    } else if (!isPageBuilder && wasInBuilder) {
-      setSidebarOpen(true);
-    }
-  }, [pathname, isPageBuilder]);
-
-  // 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();
-  };
-
-  // Check if a link is active
-  const isLinkActive = (href: string) => {
-    return pathname === href || pathname.startsWith(href + "/");
-  };
-
-  // Reusable nav link renderer for workspace/system sections
-  const renderNavLink = (link: { href: string; label: string; icon: string }) => {
-    const isActive = isLinkActive(link.href);
-    return (
-      <Link
-        key={link.href}
-        href={link.href}
-        className={`relative flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors mb-0.5 ${
-          isActive
-            ? "bg-gradient-to-r from-[rgba(7,107,255,0.14)] to-[rgba(7,107,255,0.02)] text-white shadow-[inset_0_0_0_1px_rgba(7,107,255,0.18)]"
-            : "text-white/65 hover:bg-white/[0.035] hover:text-white"
-        } ${!sidebarOpen ? "justify-center px-0" : ""}`}
-        title={!sidebarOpen ? link.label : undefined}
-      >
-        {isActive && (
-          <span
-            aria-hidden
-            className="pointer-events-none absolute left-[-8px] top-2 bottom-2 w-[3px] rounded-r-full bg-[#076bff] shadow-[0_0_12px_rgba(7,107,255,0.45)]"
-          />
-        )}
-        <span className={`shrink-0 transition-colors ${isActive ? "text-[#076bff]" : ""}`}>
-          <NavIcon icon={link.icon} active={isActive} />
-        </span>
-        {sidebarOpen && <span className="text-[13px]">{link.label}</span>}
-      </Link>
-    );
-  };
-
-  // Shared class for non-primary utility links (Setup Wizard, View Site, Log out)
-  const utilityItemBase = `flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors mb-0.5 ${
-    !sidebarOpen ? "justify-center px-0" : ""
-  }`;
-
-  return (
-    <div data-admin className="flex h-screen bg-[#f8f8f8]" style={{ fontFamily: "Inter, system-ui, sans-serif" }}>
-      {/* Sidebar — Dark (refined) */}
-      <aside
-        className={`flex flex-col bg-gradient-to-b from-[#1e2025] to-[#1a1c20] border-r border-white/[0.07] transition-all duration-200 ${
-          sidebarOpen ? "w-56" : "w-16"
-        }`}
-      >
-        {/* Workspace header */}
-        <div
-          className={`flex h-14 items-center border-b border-white/[0.06] ${
-            sidebarOpen ? "justify-between px-4" : "justify-center px-0"
-          }`}
-        >
-          {sidebarOpen && (
-            <div className="flex min-w-0 flex-col leading-tight">
-              <div className="flex items-center gap-1.5">
-                <span className="whitespace-nowrap text-[11.5px] font-semibold tracking-wide text-white">
-                  Morphika Andami
-                </span>
-                <span className="rounded-full border border-[rgba(7,107,255,0.2)] bg-[rgba(7,107,255,0.12)] px-1.5 text-[9px] font-semibold leading-[15px] tracking-[0.08em] text-[#9cc2ff]">
-                  v{ANDAMI_VERSION}
-                </span>
-              </div>
-              <span className="mt-0.5 truncate text-[10.5px] text-white/45">
-                {getSiteConfig().name}
-              </span>
-            </div>
-          )}
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="shrink-0 rounded-md p-1 text-white/40 transition-colors hover:bg-white/[0.05] hover:text-white/75"
-            aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
-          >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
-              {sidebarOpen ? (
-                <polyline points="11 17 6 12 11 7" />
-              ) : (
-                <polyline points="13 7 18 12 13 17" />
-              )}
-            </svg>
-          </button>
-        </div>
-
-        {/* Nav — grouped into Workspace + System */}
-        <nav className="flex-1 overflow-y-auto px-2 py-3">
-          {sidebarOpen && (
-            <div className="px-3 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
-              Workspace
-            </div>
-          )}
-          {workspaceLinks.map(renderNavLink)}
-
-          {sidebarOpen ? (
-            <div className="px-3 pt-4 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
-              System
-            </div>
-          ) : (
-            <div className="mx-3 my-2 h-px bg-white/[0.06]" aria-hidden />
-          )}
-          {systemLinks.map(renderNavLink)}
-        </nav>
-
-        {/* Footer — Utility group */}
-        <div className="px-2 pb-2">
-          {sidebarOpen ? (
-            <div className="px-3 pt-1 pb-2 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/35">
-              Utility
-            </div>
-          ) : (
-            <div className="mx-3 my-2 h-px bg-white/[0.06]" aria-hidden />
-          )}
-
-          {/* Setup Wizard */}
-          <Link
-            href="/admin/setup"
-            className={`${utilityItemBase} text-white/50 hover:bg-white/[0.035] hover:text-white`}
-            title="Setup Wizard"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-              <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>
-            {sidebarOpen && <span className="text-[13px]">Setup Wizard</span>}
-          </Link>
-
-          {/* View Site */}
-          <Link
-            href="/"
-            target="_blank"
-            className={`${utilityItemBase} text-white/50 hover:bg-white/[0.035] hover:text-white`}
-            title="View Site"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-              <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>
-            {sidebarOpen && <span className="text-[13px]">View Site</span>}
-          </Link>
-
-          {/* Log out */}
-          <button
-            onClick={handleLogout}
-            className={`${utilityItemBase} w-full text-white/50 hover:bg-red-500/[0.08] hover:text-red-300`}
-            title="Log out"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-              <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>
-            {sidebarOpen && <span className="text-[13px]">Log out</span>}
-          </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>
+  );
+}