@morphika/webframe 0.1.0

package/app/admin/database/page.tsx

@@ -0,0 +1,302 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+// ── Types ──
+
+interface SanityStats {
+  totalDocuments: number;
+  pages: number;
+  publishedPages: number;
+  draftPages: number;
+  projects: number;
+  siteSettings: number;
+  siteStyles: number;
+  assetRegistry: number;
+  datasets: string[];
+}
+
+interface SanityStatus {
+  connected: boolean;
+  projectId: string;
+  dataset: string;
+  hasWriteToken: boolean;
+  stats: SanityStats | null;
+  error?: string;
+  apiVersion: string;
+}
+
+// ── Stat Card ──
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+  return (
+    <div className="bg-white rounded-xl border border-neutral-200 p-4">
+      <p className="text-[11px] uppercase tracking-wider text-neutral-400 mb-1">{label}</p>
+      <p className="text-2xl font-semibold text-neutral-900">{value}</p>
+      {sub && <p className="text-xs text-neutral-400 mt-0.5">{sub}</p>}
+    </div>
+  );
+}
+
+// ── Config Field (read-only display) ──
+
+function ConfigField({ label, value, masked }: { label: string; value: string; masked?: boolean }) {
+  const [revealed, setRevealed] = useState(false);
+  const display = masked && !revealed ? "••••••••••••" : value || "—";
+
+  return (
+    <div className="flex items-center justify-between py-3 border-b border-neutral-100 last:border-0">
+      <span className="text-sm text-neutral-500">{label}</span>
+      <div className="flex items-center gap-2">
+        <code className="text-sm text-neutral-800 bg-neutral-50 px-2 py-0.5 rounded font-mono">{display}</code>
+        {masked && value && (
+          <button
+            onClick={() => setRevealed(!revealed)}
+            className="text-xs text-[#076bff] hover:underline"
+          >
+            {revealed ? "Hide" : "Show"}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Document Type Row ──
+
+function DocTypeRow({ label, count, icon }: { label: string; count: number; icon: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between py-2.5 border-b border-neutral-100 last:border-0">
+      <div className="flex items-center gap-2.5">
+        <span className="text-neutral-400">{icon}</span>
+        <span className="text-sm text-neutral-700">{label}</span>
+      </div>
+      <span className="text-sm font-medium text-neutral-900 bg-neutral-100 rounded-full px-2.5 py-0.5 min-w-[32px] text-center">
+        {count}
+      </span>
+    </div>
+  );
+}
+
+// ── Main Page ──
+
+export default function AdminDatabasePage() {
+  const [status, setStatus] = useState<SanityStatus | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [testing, setTesting] = useState(false);
+
+  const fetchStatus = useCallback(async () => {
+    try {
+      const res = await fetch("/api/admin/database");
+      if (res.ok) {
+        const data = await res.json();
+        setStatus(data);
+      }
+    } catch {
+      setStatus(null);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchStatus();
+  }, [fetchStatus]);
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    setLoading(false);
+    try {
+      const res = await fetch("/api/admin/database");
+      if (res.ok) {
+        const data = await res.json();
+        setStatus(data);
+      }
+    } catch {
+      // handled by status state
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  // ── Loading ──
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="text-sm text-neutral-400 animate-pulse">Connecting to database...</span>
+      </div>
+    );
+  }
+
+  const stats = status?.stats;
+  const isConnected = status?.connected === true;
+
+  return (
+    <div className="space-y-8 max-w-4xl">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold text-neutral-900">Database</h1>
+          <p className="text-sm text-neutral-400 mt-1">Sanity CMS connection and data overview</p>
+        </div>
+        <button
+          onClick={handleTestConnection}
+          disabled={testing}
+          className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg border border-neutral-200 bg-white text-neutral-700 hover:bg-neutral-50 transition-colors disabled:opacity-50"
+        >
+          {testing ? (
+            <svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" />
+            </svg>
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="23 4 23 10 17 10" />
+              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+            </svg>
+          )}
+          {testing ? "Testing..." : "Test Connection"}
+        </button>
+      </div>
+
+      {/* Connection status banner */}
+      <div className={`flex items-center gap-3 p-4 rounded-xl border ${
+        isConnected
+          ? "border-green-200 bg-green-50"
+          : "border-red-200 bg-red-50"
+      }`}>
+        <div className={`w-2.5 h-2.5 rounded-full ${isConnected ? "bg-green-500" : "bg-red-500"}`} />
+        <div className="flex-1">
+          <p className={`text-sm font-medium ${isConnected ? "text-green-800" : "text-red-800"}`}>
+            {isConnected ? "Connected to Sanity" : "Connection Failed"}
+          </p>
+          {status?.error && (
+            <p className="text-xs text-red-600 mt-0.5">{status.error}</p>
+          )}
+        </div>
+        {isConnected && (
+          <span className="text-xs text-green-600 bg-green-100 px-2 py-0.5 rounded-full">
+            API v{status?.apiVersion}
+          </span>
+        )}
+      </div>
+
+      {/* Stats grid */}
+      {stats && (
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          <StatCard label="Total Documents" value={stats.totalDocuments} />
+          <StatCard label="Pages" value={stats.pages} sub={`${stats.publishedPages} published, ${stats.draftPages} draft`} />
+          <StatCard label="Projects" value={stats.projects} />
+          <StatCard label="Dataset" value={status?.dataset || "—"} />
+        </div>
+      )}
+
+      {/* Two-column layout: Config + Schema */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+        {/* Connection Configuration */}
+        <div className="bg-white rounded-xl border border-neutral-200 overflow-hidden">
+          <div className="px-5 py-4 border-b border-neutral-100">
+            <h2 className="text-sm font-semibold text-neutral-900">Connection Configuration</h2>
+            <p className="text-xs text-neutral-400 mt-0.5">Values from environment variables — edit in .env.local or hosting dashboard</p>
+          </div>
+          <div className="px-5 py-2">
+            <ConfigField label="Project ID" value={status?.projectId || ""} />
+            <ConfigField label="Dataset" value={status?.dataset || ""} />
+            <ConfigField label="API Version" value={status?.apiVersion || ""} />
+            <ConfigField label="Write Token" value={status?.hasWriteToken ? "Configured" : "Not set"} />
+            <ConfigField label="CDN" value="Disabled (real-time reads)" />
+          </div>
+        </div>
+
+        {/* Document Types */}
+        {stats && (
+          <div className="bg-white rounded-xl border border-neutral-200 overflow-hidden">
+            <div className="px-5 py-4 border-b border-neutral-100">
+              <h2 className="text-sm font-semibold text-neutral-900">Schema Overview</h2>
+              <p className="text-xs text-neutral-400 mt-0.5">Document types and counts in this dataset</p>
+            </div>
+            <div className="px-5 py-2">
+              <DocTypeRow
+                label="Pages"
+                count={stats.pages}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" /><polyline points="14 2 14 8 20 8" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Projects"
+                count={stats.projects}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="2" width="20" height="20" rx="2.18" /><line x1="7" y1="2" x2="7" y2="22" /><line x1="17" y1="2" x2="17" y2="22" /><line x1="2" y1="12" x2="22" y2="12" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Site Settings"
+                count={stats.siteSettings}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.38.17.62.55.68.95" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Site Styles"
+                count={stats.siteStyles}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="13.5" cy="6.5" r="0.5" fill="currentColor" /><circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" /><circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" /><circle cx="6.5" cy="12" r="0.5" fill="currentColor" /><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z" /></svg>
+                }
+              />
+              <DocTypeRow
+                label="Asset Registry"
+                count={stats.assetRegistry}
+                icon={
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" /><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" /></svg>
+                }
+              />
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Sanity Studio link */}
+      <div className="bg-white rounded-xl border border-neutral-200 p-5">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-sm font-semibold text-neutral-900">Sanity Studio</h2>
+            <p className="text-xs text-neutral-400 mt-0.5">Access the raw Sanity Studio for advanced data editing</p>
+          </div>
+          <a
+            href="/studio"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg bg-neutral-900 text-white hover:bg-neutral-800 transition-colors"
+          >
+            Open Studio
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+              <polyline points="15 3 21 3 21 9" />
+              <line x1="10" y1="14" x2="21" y2="3" />
+            </svg>
+          </a>
+        </div>
+      </div>
+
+      {/* Env guide */}
+      <div className="bg-neutral-50 rounded-xl border border-neutral-200 p-5">
+        <h2 className="text-sm font-semibold text-neutral-700 mb-3">Environment Variables Reference</h2>
+        <div className="space-y-2 font-mono text-xs text-neutral-500">
+          <div className="flex gap-3">
+            <span className="text-neutral-400 w-64 shrink-0">NEXT_PUBLIC_SANITY_PROJECT_ID</span>
+            <span className="text-neutral-600">Sanity project ID (required)</span>
+          </div>
+          <div className="flex gap-3">
+            <span className="text-neutral-400 w-64 shrink-0">NEXT_PUBLIC_SANITY_DATASET</span>
+            <span className="text-neutral-600">Dataset name (default: &quot;production&quot;)</span>
+          </div>
+          <div className="flex gap-3">
+            <span className="text-neutral-400 w-64 shrink-0">SANITY_API_TOKEN</span>
+            <span className="text-neutral-600">Write token for mutations (server-only)</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/app/admin/error.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function AdminError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    console.error("[AdminError]", error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-white px-6 text-center">
+      <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mb-4">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="#dc2626"
+          strokeWidth="2"
+          aria-hidden="true"
+        >
+          <circle cx="12" cy="12" r="10" />
+          <line x1="12" y1="8" x2="12" y2="12" />
+          <line x1="12" y1="16" x2="12.01" y2="16" />
+        </svg>
+      </div>
+      <h1 className="text-xl font-semibold text-gray-900">
+        Admin Error
+      </h1>
+      <p className="mt-2 text-sm text-gray-500 max-w-sm">
+        Something went wrong in the admin panel.
+        {error.digest && (
+          <span className="block mt-1 text-xs text-gray-400">
+            Error ID: {error.digest}
+          </span>
+        )}
+      </p>
+      <button
+        onClick={reset}
+        className="mt-6 px-5 py-2 rounded-lg text-sm font-medium text-white transition-colors"
+        style={{ backgroundColor: "#076bff" }}
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

package/app/admin/layout.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { usePathname, useRouter } from "next/navigation";
+import Link from "next/link";
+import { useState, useEffect, useRef } from "react";
+import { getSiteConfig } from "../../lib/config";
+
+// ============================================
+// Navigation Configuration — flat list, no sections
+// ============================================
+
+const navLinks = [
+  { 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" },
+  { href: "/admin/storage", label: "Storage", icon: "harddisk" },
+  { href: "/admin/database", label: "Database", icon: "database" },
+  { href: "/admin/settings", label: "Metadata", icon: "code" },
+];
+
+// ============================================
+// Icon Component — white stroke for dark sidebar
+// ============================================
+
+function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
+  const size = 18;
+  const color = active ? "currentColor" : "currentColor";
+  void active; // active state handled by parent text color
+  void color;
+  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" />
+          <polyline points="14 2 14 8 20 8" />
+        </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="2" y="2" width="20" height="20" rx="2.18" ry="2.18" />
+          <line x1="7" y1="2" x2="7" y2="22" />
+          <line x1="17" y1="2" x2="17" y2="22" />
+          <line x1="2" y1="12" x2="22" y2="12" />
+          <line x1="2" y1="7" x2="7" y2="7" />
+          <line x1="2" y1="17" x2="7" y2="17" />
+          <line x1="17" y1="7" x2="22" y2="7" />
+          <line x1="17" y1="17" x2="22" y2="17" />
+        </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="13.5" cy="6.5" r="0.5" fill="currentColor" />
+          <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor" />
+          <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor" />
+          <circle cx="6.5" cy="12" r="0.5" fill="currentColor" />
+          <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2Z" />
+        </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="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="15" y2="12" />
+          <line x1="3" y1="18" x2="18" y2="18" />
+        </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="5" rx="9" ry="3" />
+          <path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3" />
+          <path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5" />
+        </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="16 18 22 12 16 6" />
+          <polyline points="8 6 2 12 8 18" />
+        </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 + "/");
+  };
+
+  return (
+    <div data-admin className="flex h-screen bg-[#f8f8f8]" style={{ fontFamily: "Inter, system-ui, sans-serif" }}>
+      {/* Sidebar — Dark */}
+      <aside
+        className={`flex flex-col bg-[#141414] transition-all duration-200 ${
+          sidebarOpen ? "w-56" : "w-16"
+        }`}
+      >
+        {/* Logo */}
+        <div className="flex h-14 items-center justify-between px-4 border-b border-white/[0.06]">
+          {sidebarOpen && (
+            <span className="text-[10px] font-semibold tracking-widest uppercase text-white/90 leading-tight">
+              {getSiteConfig().name.split(" ")[0]}<br />
+              <span className="text-white/50 font-normal">Web Builder</span>
+            </span>
+          )}
+          <button
+            onClick={() => setSidebarOpen(!sidebarOpen)}
+            className="text-white/40 hover:text-white/70 transition-colors p-1 rounded-md hover:bg-white/[0.06]"
+            aria-label={sidebarOpen ? "Collapse sidebar" : "Expand sidebar"}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+              {sidebarOpen ? (
+                <polyline points="11 17 6 12 11 7" />
+              ) : (
+                <polyline points="13 7 18 12 13 17" />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Nav links — flat list */}
+        <nav className="flex-1 py-3 px-2 overflow-y-auto">
+          {navLinks.map((link) => {
+            const isActive = isLinkActive(link.href);
+            return (
+              <Link
+                key={link.href}
+                href={link.href}
+                className={`flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-all mb-0.5 ${
+                  isActive
+                    ? "bg-white/[0.08] text-white font-medium"
+                    : "text-white/60 hover:bg-white/[0.06] hover:text-white/90"
+                } ${!sidebarOpen ? "justify-center px-0" : ""}`}
+                title={!sidebarOpen ? link.label : undefined}
+              >
+                <NavIcon icon={link.icon} active={isActive} />
+                {sidebarOpen && (
+                  <span className="text-[13px]">{link.label}</span>
+                )}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Setup Wizard */}
+        <div className="px-2 mb-0.5">
+          <Link
+            href="/admin/setup"
+            className={`flex items-center gap-3 text-white/40 hover:text-white/80 transition-colors px-3 py-2 rounded-lg hover:bg-white/[0.06] w-full text-sm ${
+              !sidebarOpen ? "justify-center px-0" : ""
+            }`}
+            title="Setup Wizard"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z" />
+            </svg>
+            {sidebarOpen && <span className="text-[13px]">Setup Wizard</span>}
+          </Link>
+        </div>
+
+        {/* View Site */}
+        <div className="px-2 mb-1">
+          <Link
+            href="/"
+            target="_blank"
+            className={`flex items-center gap-3 text-white/40 hover:text-white/80 transition-colors px-3 py-2 rounded-lg hover:bg-white/[0.06] w-full text-sm ${
+              !sidebarOpen ? "justify-center px-0" : ""
+            }`}
+            title="View Site"
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+              <polyline points="15 3 21 3 21 9" />
+              <line x1="10" y1="14" x2="21" y2="3" />
+            </svg>
+            {sidebarOpen && <span className="text-[13px]">View Site</span>}
+          </Link>
+        </div>
+
+        {/* Logout */}
+        <div className="border-t border-white/[0.06] p-2">
+          <button
+            onClick={handleLogout}
+            className={`flex items-center gap-3 text-white/40 hover:text-red-400 transition-colors px-3 py-2 rounded-lg hover:bg-red-500/10 w-full text-sm ${
+              !sidebarOpen ? "justify-center px-0" : ""
+            }`}
+            title="Logout"
+          >
+            <svg width="18" height="18" 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>
+            {sidebarOpen && <span className="text-[13px]">Logout</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>
+  );
+}