@morphika/andami 0.5.0 → 0.5.1

package/README.md

@@ -1,26 +1,23 @@
 # @morphika/andami
 
-A reusable Visual Page Builder framework for Next.js. Build custom websites with a drag-and-drop visual editor, Sanity CMS backend, and zero-config deployment.
+**A visual page builder framework for Next.js — the engine behind [morphika.tv](https://morphika.tv).**
 
-**Designed for Vercel Hobby tier** — the framework is engineered to run comfortably within Vercel's free/Hobby plan limits (4h Fluid Active CPU, 10 GB Fast Origin Transfer per month). Aggressive ISR caching, Sanity CDN routing, bot mitigation, and Edge-first middleware keep serverless CPU usage minimal even under crawler traffic.
+Andami is a self-hosted, code-first alternative to Webflow / Framer / Semplice. You scaffold a new site in one command, write your branding in a single config file, and get a Sanity-backed CMS plus a drag-and-drop visual editor — all running on Vercel's free Hobby tier.
 
-## Features
+> **Status — actively maintained, not actively promoted.**
+> Built and used in production by [Morphika Studio](https://morphika.tv). Released as MIT for transparency and as a reference implementation. Issues and PRs are welcome but not guaranteed a response — this is a personal/studio tool first, an open-source project second.
 
-- **Visual Page Builder** — Infinite canvas editor with device previews (desktop, tablet, phone)
-- **6 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button (added via "+ Add Block" inside columns)
-- **2 Section-level Blocks** — Project Grid (masonry) and Project Carousel (horizontal "keep browsing" at end of project pages). Added via "+ Add Section"
-- **Cover Sections** — Full-viewport hero sections with proportional rows, background media, and drag-to-resize
-- **V2 Grid System** — 12-column CSS grid with push cascade engine and responsive overrides
-- **Custom Sections** — Create reusable sections with per-instance setting overrides
-- **Navigation Builder** — Visual 12-column grid editor with drag & drop
-- **Animation System** — Enter animations, hover effects (CSS + WebGL shaders), page transitions
-- **Asset Management** — Cloudflare R2 storage with browser, thumbnails, and CDN serving
-- **Full Site Backups** — Client-side ZIP export/restore. Browser talks directly to R2 (public CDN + presigned PUT URLs); Vercel only sees lightweight JSON, so backups never hit the 4.5 MB / 10s serverless limits
-- **Setup Wizard** — Guided onboarding for new sites
-- **Sanity v3 CMS** — Structured content with custom schemas, GROQ queries, and ISR
-- **Vercel-Optimized** — Sanity CDN for public queries, 24h ISR, R2 direct CDN shortcut, bot guard middleware, aggressive robots.txt with crawl-delay — all tuned to minimize serverless CPU on Hobby tier
+---
 
-## Quick Start
+## Demo
+
+🔗 **Live site:** [morphika.tv](https://morphika.tv)
+🔗 **Admin preview:** _(add screenshot/GIF here — `docs/media/admin-preview.png`)_
+🔗 **Builder canvas:** _(add screenshot here — `docs/media/builder-canvas.png`)_
+
+---
+
+## Quick start
 
 ```bash
 npx create-andami-site my-site
@@ -29,32 +26,150 @@ npm install
 npm run dev
 ```
 
-Visit `http://localhost:3000/admin` to start building.
+Open `http://localhost:3000/admin` and follow the setup wizard. You'll need:
+
+- A free [Sanity](https://www.sanity.io/) account (CMS backend)
+- A [Cloudflare R2](https://www.cloudflare.com/developer-platform/products/r2/) bucket (asset storage — also free up to 10 GB)
+- A Vercel account for deployment (optional — works anywhere Next.js runs)
+
+Full guide → [docs/QUICK-START.md](docs/QUICK-START.md)
+
+---
+
+## Who this is for
+
+✅ **Designers / studios** who want a polished portfolio site they fully own — no monthly subscription, no platform lock-in.
+✅ **Developers** building bespoke sites for clients in the design / architecture / fashion / photography space.
+✅ **Anyone** who has outgrown Webflow's pricing or wants a Next.js codebase they can extend.
+
+## Who this is *not* for
+
+❌ Non-technical users expecting a SaaS experience. You need to deploy it yourself.
+❌ E-commerce, blogs at scale, or content-heavy sites. Andami is optimized for portfolio / brand / case-study sites.
+❌ Teams looking for guaranteed support or SLAs. This is single-maintainer software.
+
+---
+
+## What's inside
+
+### Visual page builder
+- Infinite canvas with zoom, pan, minimap and device frames (desktop / tablet / phone)
+- Cross-section drag-and-drop between V2 sections, Cover sections, and Parallax groups
+- 12-column responsive grid with push-cascade overlap resolution
+- Per-viewport overrides (desktop / tablet / mobile) for every block
+
+### Content blocks (10)
+- Text (Tiptap rich text with inline color, links, BubbleMenu)
+- Image, Image Grid, Video, Audio, Spacer, Button, Before/After
+- Project Grid (masonry with multi-aspect-ratio cards)
+- Project Carousel (horizontal "keep browsing" at end of project pages)
+
+### Section types
+- **V2 Section** — flat columns, content-driven height
+- **Cover Section** — full-viewport, proportional rows, background media, drag-to-resize
+- **Parallax Group** — multi-slide parallax with crossfade / reveal transitions
+- **Custom Section** — reusable sections with per-instance overrides
+
+### Animation system
+- 7 enter-animation presets + per-character typewriter
+- 4-level cascade (block → column → section → page)
+- Hover effects: 7 CSS presets + 3 WebGL shaders (ripple, RGB shift, pixelate)
+- Page exit animations that replay enter animations in reverse
+
+### CMS & assets
+- Sanity v3 schemas (5 doc types, 10+ object types)
+- Cloudflare R2 storage with presigned uploads, asset registry, thumbnail CLI
+- Full-site backup & restore (client-side ZIP, bypasses serverless body limits)
+- Custom font upload with magic-byte validation
+
+### Vercel-Hobby-tier optimized
+- Sanity CDN routing for public queries (~2ms vs ~200ms)
+- 24h ISR with on-demand revalidation
+- Edge-middleware bot guard (blocks 20+ aggressive crawlers before they hit serverless)
+- Aggressive `robots.txt` with crawl-delay and AI-scraper blocks
+- React `cache()` deduplication on SSR fetches
+
+→ Designed to run a low-traffic portfolio site comfortably within 4h Fluid Active CPU/month.
+
+---
 
 ## Stack
 
-Next.js 16 (App Router) · Sanity v3 · Tailwind CSS v4 · Zustand · @dnd-kit · TypeScript
+| Layer | Choice |
+|---|---|
+| Framework | Next.js 16 (App Router) |
+| CMS backend | Sanity v3 |
+| State | Zustand 5 |
+| Drag & drop | @dnd-kit |
+| Styling | Tailwind CSS v4 |
+| Rich text | Tiptap 2 |
+| Shaders | OGL (WebGL) |
+| Storage | Cloudflare R2 (S3-compatible) |
+| Tests | Vitest + React Testing Library (980+ assertions) |
+
+### Why this stack
+
+- **Next.js + Sanity** — most boring, well-documented stack for content-driven sites. ISR + GROQ scales to any portfolio.
+- **Zustand instead of Redux** — the page-builder state is complex (drag, undo/redo, multi-viewport overrides, snapshots) but a single feature; Zustand's slice pattern keeps it readable.
+- **Sanity for data, not for editing** — Sanity is excellent as a structured-content backend but its built-in studio doesn't fit a visual layout tool. Andami uses Sanity purely as a typed JSON store.
+- **Cloudflare R2 over S3** — zero egress fees. For a portfolio site that's the difference between $0/mo and "depends on the month".
+
+---
+
+## Architecture
+
+Andami ships as an npm package (`@morphika/andami`). Each deployed site is an **instance** — a thin Next.js app that imports framework code and provides its own `site.config.ts`:
+
+```
+my-site/                          # Instance (your repo)
+├── site.config.ts                # Branding, fonts, palette, features
+├── app/
+│   ├── (site)/page.tsx           # → re-exports @morphika/andami/site/page
+│   ├── admin/                    # → re-exports admin pages
+│   └── api/                      # → re-exports API routes
+└── lib/config-init.ts            # Registers config with the framework
+
+@morphika/andami/                 # Framework (this repo)
+├── components/builder/           # Visual editor
+├── components/blocks/            # Public-site renderers
+├── lib/sanity/                   # Schemas, queries, types
+└── app/api/                      # All API routes (auth, pages, assets, R2, backups)
+```
+
+This split lets you upgrade the framework with `npm update` without touching the instance, and lets one studio run many sites from a single shared codebase.
+
+→ Full breakdown in [docs/ARCHITECTURE.md](docs/ARCHITECTURE.md).
+
+---
 
 ## Documentation
 
-| Doc | Description |
-|-----|-------------|
-| [Quick Start](docs/QUICK-START.md) | 5-minute quickstart |
-| [Configuration](docs/CONFIGURATION.md) | `site.config.ts` reference |
-| [Architecture](docs/ARCHITECTURE.md) | Technical architecture and data flow |
-| [Blocks](docs/BLOCKS.md) | All block types with fields and options |
-| [Builder](docs/BUILDER.md) | Page builder UI, interactions, store |
-| [Canvas](docs/CANVAS.md) | Infinite canvas, zoom/pan, device frames |
+| Doc | What's in it |
+|---|---|
+| [QUICK-START](docs/QUICK-START.md) | 5-minute setup for a new instance |
+| [CONFIGURATION](docs/CONFIGURATION.md) | Every field of `site.config.ts` |
+| [ARCHITECTURE](docs/ARCHITECTURE.md) | Data flow, module boundaries, design decisions |
+| [BUILDER](docs/BUILDER.md) | Visual editor — interactions, store, undo/redo |
+| [CANVAS](docs/CANVAS.md) | Infinite canvas, zoom, pan, device frames |
+| [BLOCKS](docs/BLOCKS.md) | All 10 block types with fields and options |
 | [CMS](docs/CMS.md) | Sanity schemas and GROQ queries |
-| [Navigation](docs/NAVIGATION.md) | Navigation builder, grid editor, styling |
-| [Assets](docs/ASSETS.md) | Storage, providers, thumbnails |
-| [Backups](docs/BACKUPS.md) | Full site backup & restore (V2 client-side architecture) |
-| [Thumbnails](docs/THUMBNAILS.md) | Thumbnail system and CLI tool |
-| [Customization](docs/CUSTOMIZATION.md) | Custom blocks, fonts, styles |
-| [Security](docs/SECURITY.md) | Auth, CSRF, input validation, encryption |
-| [Deployment](docs/DEPLOYMENT.md) | Vercel, domains, R2 setup |
-| [Package Dev](docs/PACKAGE-DEV.md) | Dev workflow, npm link, publishing |
+| [NAVIGATION](docs/NAVIGATION.md) | Navigation builder spec |
+| [ASSETS](docs/ASSETS.md) | Storage, providers, thumbnails |
+| [BACKUPS](docs/BACKUPS.md) | Full-site backup & restore (V2 client-side) |
+| [CUSTOMIZATION](docs/CUSTOMIZATION.md) | Custom blocks, fonts, schemas |
+| [SECURITY](docs/SECURITY.md) | Auth, CSRF, encryption, sanitization |
+| [DEPLOYMENT](docs/DEPLOYMENT.md) | Vercel, domains, R2 setup |
+| [PACKAGE-DEV](docs/PACKAGE-DEV.md) | Local dev, npm link, publishing |
+
+---
 
 ## License
 
-MIT
+[MIT](LICENSE) — use it, fork it, ship clients with it. Attribution appreciated but not required.
+
+---
+
+## Credits
+
+Built by [Daniel Planas](https://morphika.tv) at Morphika Studio.
+The name *Andami* (Catalan for "scaffold") refers to the temporary structures used to build something more permanent.

package/app/admin/layout.tsx

@@ -2,7 +2,6 @@
 
 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";
 
@@ -24,16 +23,79 @@ const systemLinks = [
   { 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, active }: { icon: string; active?: boolean }) {
-  const size = 18;
-  void active; // active state handled by parent text color
+function NavIcon({ icon }: { icon: string }) {
+  const size = 20;
   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" />
@@ -41,7 +103,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -51,7 +112,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -61,7 +121,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -70,7 +129,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -79,7 +137,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -89,7 +146,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -97,7 +153,6 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
         </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" />
@@ -105,13 +160,35 @@ function NavIcon({ icon, active }: { icon: string; active?: boolean }) {
           <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
+// Layout Component — collapsed-only sidebar
 // ============================================
 
 export default function AdminLayout({
@@ -122,31 +199,10 @@ export default function AdminLayout({
   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}</>;
@@ -158,167 +214,104 @@ export default function AdminLayout({
     router.refresh();
   };
 
-  // Check if a link is active
-  const isLinkActive = (href: string) => {
-    return pathname === href || pathname.startsWith(href + "/");
-  };
+  const isLinkActive = (href: string) =>
+    pathname === href || pathname.startsWith(href + "/");
+
+  const tileBase = `group relative flex items-center justify-center ${TILE_SIZE} ${TILE_RADIUS} transition-colors`;
 
-  // 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 ${
+        className={`${tileBase} ${
           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}
+            ? "bg-[#076bff] text-white"
+            : "text-white/70 hover:bg-white/[0.06] hover:text-white"
+        }`}
+        aria-label={link.label}
       >
-        {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>}
+        <NavIcon icon={link.icon} />
+        <Tooltip>{link.label}</Tooltip>
       </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"}
+    <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}`}
           >
-            <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>
+            <AndamiMark size={30} />
+            <Tooltip>
+              Morphika Andami
+              <span className="ml-1.5 text-white/55">v{ANDAMI_VERSION}</span>
+            </Tooltip>
+          </div>
         </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>
-          )}
+        {/* Workspace nav */}
+        <nav className="flex flex-1 flex-col items-center gap-1.5 pt-2 pb-2">
           {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 />
-          )}
+          <div className="my-2 h-px w-6 bg-white/10" 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 />
-          )}
+        {/* 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 />
 
-          {/* Setup Wizard */}
           <Link
             href="/admin/setup"
-            className={`${utilityItemBase} text-white/50 hover:bg-white/[0.035] hover:text-white`}
-            title="Setup Wizard"
+            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
+            aria-label="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>}
+            <NavIcon icon="setup" />
+            <Tooltip>Setup Wizard</Tooltip>
           </Link>
 
-          {/* View Site */}
           <Link
             href="/"
             target="_blank"
-            className={`${utilityItemBase} text-white/50 hover:bg-white/[0.035] hover:text-white`}
-            title="View Site"
+            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
+            aria-label="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>}
+            <NavIcon icon="view" />
+            <Tooltip>View Site</Tooltip>
           </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"
+            className={`${tileBase} text-white/55 hover:bg-red-500/[0.1] hover:text-red-300`}
+            aria-label="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>}
+            <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]"
-        }`}>
+        <main
+          className={`flex-1 ${
+            isPageBuilder
+              ? "overflow-hidden"
+              : "overflow-y-auto p-8 bg-[#f8f8f8]"
+          }`}
+        >
           {children}
         </main>
       </div>