@morphika/andami 0.5.6 → 0.5.8

package/app/admin/layout.tsx

@@ -50,149 +50,189 @@ function Tooltip({ children }: { children: React.ReactNode }) {
 }
 
 // ============================================
-// Andami Mark — inlined from docs/andami_mark.svg
+// Andami Mark — three-line scaffolding mark
 // ============================================
 
 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.
+  // viewBox tightened from the source 0 0 128 128 to the content bbox
+  // (incl. stroke caps), centered on the visual centroid (63.5, 60.5),
+  // so the mark fills the white tile without empty padding.
   return (
     <svg
       width={size}
       height={size}
-      viewBox="110 100 280 280"
+      viewBox="7.5 4.5 112 112"
       xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke="#1E2025"
+      strokeWidth={10}
+      strokeLinecap="round"
+      strokeLinejoin="round"
       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"
-      />
+      <line x1="16.5" y1="108.5" x2="63.5" y2="12.5" />
+      <line x1="110.5" y1="108.5" x2="63.5" y2="12.5" />
+      <line x1="84.5" y1="108.5" x2="37.5" y2="12.5" />
     </svg>
   );
 }
 
 // ============================================
-// Icon Component — Mockup A set (Storage kept from original)
+// Icon Component — inlined from docs/Design/svg/*.svg
 // ============================================
+// Source SVGs live at docs/Design/svg/ as outline/filled pairs so the design
+// files are editable in Illustrator/Figma. Each section icon has two states:
+// outline (default) + filled (when the section is active). Footer links that
+// don't represent a section (View Site, Log out) only have a single variant.
+// The runtime renders inline JSX (the framework has no public/ folder), so
+// edits to the .svg need to be hand-synced into the switch below.
 
-function NavIcon({ icon }: { icon: string }) {
-  const size = 20;
+function NavIcon({ icon, active = false }: { icon: string; active?: boolean }) {
+  const size = 28;
+  const svgProps = {
+    width: size,
+    height: size,
+    viewBox: "0 0 46 46",
+    fill: "currentColor" as const,
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": true,
+  };
   switch (icon) {
     case "file":
-      // Tabler file-code (outline). Bumped to 22px — the file silhouette
-      // has empty space around the `< >` symbol, so it reads smaller than
-      // the other icons at the default 20px. Outline keeps it consistent
-      // with the rest of the sidebar.
-      return (
-        <svg width={22} height={22} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
-          <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
-          <path d="M10 13l-1 2l1 2" />
-          <path d="M14 13l1 2l-1 2" />
+      // Pages — "new page" / "new page_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M23,6.6l0.2,0c0.8,0.1,1.3,0.7,1.4,1.4l0,0.2v6.6l0,0.2c0.1,1.6,1.4,2.9,3,3l0.3,0h6.6l0.2,0c0.8,0.1,1.3,0.7,1.4,1.4l0,0.2v14.8c0,2.6-2,4.8-4.6,4.9l-0.3,0H14.8c-2.6,0-4.8-2-4.9-4.6l0-0.3v-23c0-2.6,2-4.8,4.6-4.9l0.3,0C14.8,6.6,23,6.6,23,6.6z" />
+          <path d="M33.7,15h-5.2c-0.4,0-0.8-0.3-0.8-0.8l0-5.2c0-0.7,0.8-1,1.3-0.5l5.2,5.2C34.7,14.1,34.4,15,33.7,15z" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M36,15.7c-0.1-0.2-0.2-0.3-0.3-0.4l-8.5-8.5c-0.1-0.1-0.2-0.2-0.4-0.3c-0.1-0.1-0.3-0.1-0.5-0.1H14.5c-2.6,0-4.6,2.1-4.6,4.6v23.8c0,2.6,2.1,4.6,4.6,4.6h17c2.6,0,4.6-2.1,4.6-4.6V16.2C36.1,16,36.1,15.9,36,15.7z M27.6,10.7l4.3,4.3h-3.8c-0.3,0-0.5-0.2-0.5-0.5V10.7z M31.5,37h-17c-1.2,0-2.2-1-2.2-2.2V11.1c0-1.2,1-2.2,2.2-2.2h10.6v5.6c0,1.6,1.3,2.9,2.9,2.9h5.6v17.4C33.6,36.1,32.7,37,31.5,37z" />
         </svg>
       );
     case "film":
-      // Tray / archive — stack of items going into a container.
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-          <path d="M6.75 3.75H17.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-          <path d="M4.75 7.25H19.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-          <path d="M19.1556 10.75H4.84441C3.53306 10.75 2.57653 11.9908 2.91026 13.259L4.16144 18.0135C4.50827 19.3314 5.69986 20.25 7.06267 20.25H16.9373C18.3001 20.25 19.4917 19.3314 19.8386 18.0135L21.0897 13.259C21.4235 11.9908 20.4669 10.75 19.1556 10.75Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      // Projects — "project" / "project_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M33.7,15h-5.2c-0.4,0-0.8-0.3-0.8-0.8l0-5.2c0-0.7,0.8-1,1.3-0.5l5.2,5.2C34.7,14.1,34.4,15,33.7,15z" />
+          <path d="M36.1,19.5c-0.1-0.8-0.7-1.3-1.4-1.4l-0.2,0h-6.6l-0.3,0c-1.6-0.1-2.9-1.4-3-3l0-0.2V8.2l0-0.2c-0.1-0.8-0.7-1.3-1.4-1.4l-0.2,0h-8.2l-0.3,0c-2.6,0.2-4.6,2.3-4.6,4.9v23l0,0.3c0.2,2.6,2.3,4.6,4.9,4.6h16.4l0.3,0c2.6-0.2,4.6-2.3,4.6-4.9V19.7L36.1,19.5z M16.4,24.3l-0.2-0.2c-1.1-1.2-1-3.1,0.2-4.2c1.2-1.2,3.2-1.2,4.4,0l0.7,0.7L17.1,25L16.4,24.3z M29.5,32c0,0.6-0.4,1-1,1h-3c-0.3,0-0.5-0.1-0.7-0.3l-6.3-6.3l4.4-4.4l6.3,6.3c0.2,0.2,0.3,0.4,0.3,0.7V32z" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M36,15.7c-0.1-0.2-0.2-0.3-0.3-0.4l-8.5-8.5c-0.1-0.1-0.2-0.2-0.4-0.3c-0.1-0.1-0.3-0.1-0.5-0.1H14.5c-2.6,0-4.6,2.1-4.6,4.6v23.8c0,2.6,2.1,4.6,4.6,4.6h17c2.6,0,4.6-2.1,4.6-4.6V16.2C36.1,16,36.1,15.9,36,15.7z M27.6,10.7l4.3,4.3h-3.8c-0.3,0-0.5-0.2-0.5-0.5V10.7z M33.6,34.9c0,1.2-1,2.2-2.2,2.2h-17c-1.2,0-2.2-1-2.2-2.2V11.1c0-1.2,1-2.2,2.2-2.2h10.6v5.6c0,1.6,1.3,2.9,2.9,2.9h5.6V34.9z" />
+          <path d="M30.2,25.5L24.7,20l0,0l-1.6-1.6c-1.7-1.7-4.5-1.7-6.1,0c-1.6,1.6-1.7,4.2-0.2,5.9l0.1,0.1l0,0l7.2,7.2c0.4,0.4,1,0.7,1.6,0.7h3c1.2,0,2.2-1,2.2-2.2v-3C30.9,26.5,30.6,25.9,30.2,25.5z M21.2,20l-2.6,2.6c-0.5-0.7-0.5-1.8,0.2-2.4c0.3-0.3,0.8-0.5,1.3-0.5C20.5,19.7,20.9,19.8,21.2,20z M28.4,27.2v2.6h-2.6l-5.3-5.3l2.6-2.6L28.4,27.2z" />
         </svg>
       );
     case "palette":
-      // Tabler color-swatch — geometric, matches the outline style of
-      // the rest of the sidebar.
-      return (
-        <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-          <path d="M19 3h-4a2 2 0 0 0 -2 2v12a4 4 0 0 0 8 0v-12a2 2 0 0 0 -2 -2" />
-          <path d="M13 7.35l-2 -2a2 2 0 0 0 -2.828 0l-2.828 2.828a2 2 0 0 0 0 2.828l9 9" />
-          <path d="M7.3 13h-2.3a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h12" />
-          <path d="M17 17l0 .01" />
+      // Customize — "customization" / "customization_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M39.7,29.1c0-1.7-1.4-3-3.1-3h-1.8L21.3,39.5h15.4c1.7,0,3.1-1.4,3.1-3V29.1z" />
+          <path d="M19.9,9.5c0-1.7-1.4-3-3.1-3H9.4c-1.7,0-3.1,1.4-3.1,3v23.3c0,3.7,3,6.7,6.8,6.7c3.7,0,6.8-3,6.8-6.7V9.5z M13.1,35.9c-1.4,0-2.5-1.1-2.5-2.5c0-1.4,1.1-2.5,2.5-2.5c1.4,0,2.5,1.1,2.5,2.5C15.6,34.8,14.5,35.9,13.1,35.9z" />
+          <path d="M34.5,17.3l-5.7-5.6c-1.2-1.2-3.4-1.2-4.7,0L22.7,13v20.5l11.7-11.6c0.6-0.6,1-1.4,1-2.3C35.4,18.7,35.1,17.9,34.5,17.3z" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M6.5,11.1v20.4c0,4.4,3.6,8,8,8h20.4c2.5,0,4.6-2.1,4.6-4.6v-6.8c0-2.5-2.1-4.6-4.6-4.6h-1l1.3-1.3c1.8-1.8,1.8-4.7,0-6.5l-4.8-4.8c-0.9-0.9-2-1.4-3.3-1.4c-1.2,0-2.4,0.5-3.3,1.4l-1.3,1.3v-1.1c0-2.5-2.1-4.6-4.6-4.6h-6.8C8.6,6.5,6.5,8.6,6.5,11.1z M33.4,20.5L22.5,31.4V15.6l3-3c0.8-0.8,2.3-0.8,3.1,0l4.8,4.8C34.3,18.2,34.3,19.6,33.4,20.5z M34.9,37.1H20.3l11.2-11.2h3.5c1.2,0,2.2,1,2.2,2.2v6.8C37.1,36.1,36.1,37.1,34.9,37.1z M8.9,11.1c0-1.2,1-2.2,2.2-2.2h6.8c1.2,0,2.2,1,2.2,2.2v20.4c0,3.1-2.5,5.6-5.6,5.6c-3.1,0-5.6-2.5-5.6-5.6V11.1z" />
+          <path d="M14.5,30.3c0.7,0,1.2,0.6,1.2,1.2c0,0.7-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2v0C13.3,30.8,13.8,30.3,14.5,30.3z" />
         </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" />
+      // Navigation — "navigation" / "navigation_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M34,7.9H12c-1.5,0-2.7,1.2-2.7,2.7v0.8c0,1.5,1.2,2.7,2.7,2.7h22c1.5,0,2.7-1.2,2.7-2.7v-0.8C36.7,9.1,35.5,7.9,34,7.9z" />
+          <path d="M34,19.9H12c-1.5,0-2.7,1.2-2.7,2.7v0.8c0,1.5,1.2,2.7,2.7,2.7h22c1.5,0,2.7-1.2,2.7-2.7v-0.8C36.7,21.1,35.5,19.9,34,19.9z" />
+          <path d="M34,31.9H12c-1.5,0-2.7,1.2-2.7,2.7v0.8c0,1.5,1.2,2.7,2.7,2.7h22c1.5,0,2.7-1.2,2.7-2.7v-0.8C36.7,33.1,35.5,31.9,34,31.9z" />
         </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 {...svgProps}>
+          <path d="M33,6.5H13c-2.1,0-3.9,1.7-3.9,3.9v0.4c0,2.1,1.7,3.9,3.9,3.9H33c2.1,0,3.9-1.7,3.9-3.9v-0.4C36.8,8.2,35.1,6.5,33,6.5z M34.4,10.8c0,0.8-0.6,1.4-1.4,1.4H13c-0.8,0-1.4-0.6-1.4-1.4v-0.4c0-0.8,0.6-1.4,1.4-1.4H33c0.8,0,1.4,0.6,1.4,1.4V10.8z" />
+          <path d="M33,18.4H13c-2.1,0-3.9,1.7-3.9,3.9v0.4c0,2.1,1.7,3.9,3.9,3.9H33c2.1,0,3.9-1.7,3.9-3.9v-0.4C36.8,20.2,35.1,18.4,33,18.4z M34.4,22.7c0,0.8-0.6,1.4-1.4,1.4H13c-0.8,0-1.4-0.6-1.4-1.4v-0.4c0-0.8,0.6-1.4,1.4-1.4H33c0.8,0,1.4,0.6,1.4,1.4V22.7z" />
+          <path d="M33,31.3H13c-2.1,0-3.9,1.7-3.9,3.9v0.4c0,2.1,1.7,3.9,3.9,3.9H33c2.1,0,3.9-1.7,3.9-3.9v-0.4C36.8,33.1,35.1,31.3,33,31.3z M34.4,35.6c0,0.8-0.6,1.4-1.4,1.4H13c-0.8,0-1.4-0.6-1.4-1.4v-0.4c0-0.8,0.6-1.4,1.4-1.4H33c0.8,0,1.4,0.6,1.4,1.4V35.6z" />
         </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" />
+      // Storage — "storage" / "storage_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M8,25.6H38c0.7,0,1.3-0.7,1.1-1.3L35.5,11c-0.4-1.4-1.7-2.3-3.2-2.3H13.7c-1.5,0-2.8,1-3.2,2.3L6.9,24.3C6.8,25,7.3,25.6,8,25.6z" />
+          <path d="M37.5,28h-29c-1.1,0-2,0.9-2,2v5.2c0,1.2,0.9,2.1,2.1,2.1h28.8c1.2,0,2.1-0.9,2.1-2.1V30C39.5,28.9,38.6,28,37.5,28z M18.1,33.3c0,0.5-0.4,0.9-0.9,0.9h-7.1c-0.5,0-0.9-0.4-0.9-0.9v-1.4c0-0.5,0.4-0.9,0.9-0.9h7.1c0.5,0,0.9,0.4,0.9,0.9V33.3z M30.3,34.2c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S31.1,34.2,30.3,34.2z M35.4,34.2c-0.9,0-1.6-0.7-1.6-1.6s0.7-1.6,1.6-1.6s1.6,0.7,1.6,1.6S36.2,34.2,35.4,34.2z" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M9.1,25.7h27.8c0.7,0,1.4-0.3,1.8-0.9c0.4-0.5,0.5-1.2,0.4-1.8l-3.3-12.3c-0.5-1.8-2.2-3-4.1-3H14.4c-1.9,0-3.6,1.2-4.1,3L6.9,23c-0.2,0.6,0,1.3,0.4,1.8C7.7,25.3,8.4,25.7,9.1,25.7z M12.5,11.2c0.2-0.8,1-1.3,1.9-1.3h17.3c0.9,0,1.6,0.5,1.9,1.3l3.3,12.1H9.3L12.5,11.2z" />
+          <path d="M36.5,27.5h-27c-1.7,0-3,1.3-3,3v4.8c0,1.7,1.4,3.1,3.1,3.1h26.8c1.7,0,3.1-1.4,3.1-3.1v-4.8C39.5,28.8,38.2,27.5,36.5,27.5z M37.2,35.3c0,0.4-0.4,0.8-0.8,0.8H9.6c-0.4,0-0.8-0.4-0.8-0.8v-4.8c0-0.4,0.3-0.7,0.7-0.7h27c0.4,0,0.7,0.3,0.7,0.7V35.3z" />
+          <circle cx="34.6" cy="32.9" r="0.9" />
+          <circle cx="30.9" cy="32.9" r="0.9" />
+          <path d="M19.3,31.9h-8.5c-0.2,0-0.4,0.2-0.4,0.4v1c0,0.2,0.2,0.4,0.4,0.4h8.5c0.2,0,0.4-0.2,0.4-0.4v-1C19.7,32.1,19.6,31.9,19.3,31.9z" />
+        </svg>
+      );
+    case "database":
+      // Database — "database" / "database_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M8.2,29.1v3.7c0,4.1,6.7,6.6,14.8,6.6l0.5,0c7.9-0.1,14.3-2.6,14.3-6.6v-3.7c-3.2,2.5-8.6,3.7-14.8,3.7C16.8,32.9,11.4,31.6,8.2,29.1z" />
+          <path d="M8.2,19.3V23l0,0.2l0,0.2c0.3,3.9,6.9,6.2,14.8,6.2c8.1,0,14.8-2.5,14.8-6.6v-3.7C34.5,21.8,29.2,23,23,23C16.8,23,11.4,21.7,8.2,19.3z" />
+          <path d="M23,19.7c8.1,0,14.8-2.5,14.8-6.6l0-0.3c0-0.4-0.2-0.8-0.3-1.2l-0.1-0.2c-0.1-0.1-0.1-0.2-0.2-0.3L37,10.8c-0.3-0.4-0.7-0.8-1.1-1.1c-0.2-0.1-0.3-0.2-0.5-0.4c-0.5-0.3-1-0.6-1.6-0.9l-0.3-0.1C33,8.1,32.6,8,32.1,7.8l-0.1,0l-0.7-0.2c-0.8-0.2-1.7-0.4-2.6-0.6l-0.8-0.1c-1.5-0.2-3.2-0.3-4.9-0.3l-0.5,0C14.8,6.7,8.6,9,8.2,12.8l0,0.2l0,0.2c0,0.1,0,0.2,0,0.3C8.6,17.4,15.1,19.7,23,19.7z" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M23,6.5c-7.4,0-14.8,2.2-14.8,6.3V23v10.2c0,4.2,7.4,6.3,14.8,6.3s14.8-2.2,14.8-6.3V23V12.8C37.8,8.7,30.4,6.5,23,6.5z M35.3,23c0,1.6-4.8,3.8-12.3,3.8S10.7,24.6,10.7,23v-6.5c2.8,1.7,7.6,2.7,12.3,2.7s9.5-0.9,12.3-2.7V23z M23,9c7.5,0,12.3,2.3,12.3,3.8s-4.8,3.8-12.3,3.8s-12.3-2.3-12.3-3.8S15.5,9,23,9z M23,37c-7.5,0-12.3-2.3-12.3-3.8v-6.5c2.8,1.7,7.6,2.7,12.3,2.7s9.5-0.9,12.3-2.7v6.5C35.3,34.7,30.5,37,23,37z" />
         </svg>
       );
     case "code":
-      // Tag — reads as "title, description, OG image, SEO", which is
-      // what this page actually edits (the old chevrons looked like
-      // "developer tool").
-      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.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
-          <circle cx="7" cy="7" r="1" fill="currentColor" stroke="none" />
+      // Metadata — "metadata" / "metadata_outline" (a tag with a hole).
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M21.6,6.5c1.3,0,2.6,0.5,3.5,1.5l12.7,12.7c2.2,2.2,2.2,5.8,0,8l-9.2,9.2c-2.2,2.2-5.8,2.2-8,0L7.9,25.1c-0.9-0.9-1.5-2.2-1.5-3.5v-8.5c0-3.6,3-6.6,6.6-6.6l0,0L21.6,6.5z M15.6,12.3c-1.7,0-3.2,1.3-3.3,3.1l0,0.2c0,1.8,1.5,3.3,3.3,3.3s3.3-1.5,3.3-3.3S17.4,12.3,15.6,12.3" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M15.4,12.4c-1.6,0-2.9,1.3-2.9,2.9c0,1.6,1.3,2.9,2.9,2.9s2.9-1.3,2.9-2.9C18.3,13.7,17,12.4,15.4,12.4z" />
+          <path d="M38,20.9L24.9,7.8c-0.9-0.9-2-1.4-3.3-1.4h-8.8c-3.5,0-6.3,2.8-6.3,6.3v8.8c0,1.2,0.5,2.4,1.4,3.3L20.9,38c1,1,2.3,1.6,3.8,1.6c1.4,0,2.8-0.6,3.8-1.6l9.5-9.5C40,26.4,40,23,38,20.9z M36.2,26.7l-9.5,9.5c-1.1,1.1-2.9,1.1-4,0L9.6,23.1C9.2,22.7,9,22.2,9,21.6v-8.8C9,10.7,10.7,9,12.8,9h8.8c0.6,0,1.1,0.2,1.5,0.6l13.1,13.1C37.3,23.8,37.3,25.6,36.2,26.7z" />
         </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" />
+      // Backups — "backup" / "backup_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M39.4,24.9c-0.2-3.4-2.9-6.2-6.3-6.4l-0.1,0l0-0.3c-0.1-2.5-1.3-4.8-3.4-6.5C27,9.6,23.4,9,20.1,10h0l-0.4,0.1C17.1,11,15,12.9,14,15.4l-0.1,0.3l-0.2,0c-4,0.6-7.1,4-7.1,8.1l0,0.3c0.2,4.3,3.7,7.7,8.1,7.9l0.1,0l0,0c-0.7-0.7-1.1-1.6-1.1-2.5c0-1,0.4-1.9,1.1-2.5c1.3-1.3,3.5-1.4,4.9-0.2v-2.8c0-1.9,1.6-3.5,3.5-3.5h0.2c1.9,0,3.5,1.6,3.5,3.5v2.8c1.2-1,2.8-1.1,4.1-0.4c1,0.6,1.6,1.5,1.7,2.6c0.1,1.1-0.2,2.2-1,3l-0.1,0.1h1.2l0.3,0c3.5-0.2,6.4-3.1,6.4-6.7L39.4,24.9z" />
+          <path d="M29.8,28.2c-0.5-0.3-1.2-0.2-1.7,0.3L24.6,32v-8.1c0-0.7-0.6-1.2-1.2-1.2h-0.2c-0.7,0-1.2,0.6-1.2,1.2V32l-3.6-3.6c-0.5-0.5-1.4-0.5-1.9,0C16.1,28.7,16,29,16,29.3c0,0.3,0.1,0.7,0.4,0.9l5.9,5.8c0.1,0.1,0.1,0.1,0.2,0.2c0,0,0,0,0.1,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l5.9-5.8C30.7,29.7,30.6,28.7,29.8,28.2z" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M29.8,28.3c-0.5-0.3-1.2-0.2-1.7,0.3l-3.6,3.5v-8.1c0-0.7-0.6-1.2-1.2-1.2h-0.2c-0.7,0-1.2,0.6-1.2,1.2v8.1l-3.6-3.6c-0.5-0.5-1.4-0.5-1.9,0c-0.3,0.3-0.4,0.6-0.4,0.9c0,0.3,0.1,0.7,0.4,0.9l5.9,5.8c0.1,0.1,0.1,0.1,0.2,0.2c0,0,0,0,0.1,0c0.1,0,0.1,0.1,0.2,0.1c0,0,0.1,0,0.1,0c0.1,0,0.1,0,0.2,0c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3,0c0.1,0,0.1,0,0.2,0c0,0,0.1,0,0.1,0c0.1,0,0.1-0.1,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l5.9-5.8C30.7,29.7,30.6,28.7,29.8,28.3z" />
+          <path d="M33,18.7h-0.2c0.1-2.7-1.1-5.3-3.3-7c-2.6-2.1-6.2-2.7-9.4-1.7c-3,0.9-5.3,3.1-6.2,5.8c-4.2,0.4-7.4,3.9-7.4,8c0,4,3,7.3,6.9,7.9c0.5,0.1,0.9-0.5,0.6-0.9c-0.4-0.6-0.9-1.3-1.1-1.5c-0.1-0.1-0.2-0.2-0.3-0.2c-2.2-0.8-3.8-2.9-3.8-5.3c0-3.1,2.7-5.7,6-5.7c0.6,0,1-0.4,1.1-0.9c0.5-2.3,2.4-4.2,4.8-4.9c2.5-0.8,5.3-0.3,7.3,1.3c1.9,1.5,2.8,3.9,2.3,6.1c-0.1,0.3,0,0.7,0.2,1s0.6,0.4,0.9,0.4H33c2.3,0,4.1,1.9,4.1,4.2c0,2.2-1.7,4-3.8,4.1c-0.2,0-0.4,0.1-0.5,0.3l-1.3,2.1H33c3.6,0,6.5-2.9,6.5-6.5C39.5,21.6,36.6,18.7,33,18.7z" />
         </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" />
+      // Setup Wizard — "wizard" / "wizard_outline".
+      return active ? (
+        <svg {...svgProps}>
+          <path d="M27.4,9.9c0.2,0.6,0.8,1,1.4,0.9c0.1,0,0.2-0.1,0.3-0.1c4-2.5,8.6,2.2,6.2,6.2c-0.3,0.6-0.2,1.3,0.4,1.6c0.1,0.1,0.2,0.1,0.3,0.1c4.6,1.1,4.6,7.6,0,8.7c-0.6,0.2-1,0.8-0.9,1.4c0,0.1,0.1,0.2,0.1,0.3c2.5,4-2.2,8.6-6.2,6.2c-0.6-0.3-1.3-0.2-1.6,0.4c-0.1,0.1-0.1,0.2-0.1,0.3c-1.1,4.6-7.6,4.6-8.7,0c-0.2-0.6-0.8-1-1.4-0.9c-0.1,0-0.2,0.1-0.3,0.1c-4,2.5-8.6-2.2-6.2-6.2c0.3-0.6,0.2-1.3-0.4-1.6c-0.1-0.1-0.2-0.1-0.3-0.1c-4.6-1.1-4.6-7.6,0-8.7c0.6-0.2,1-0.8,0.9-1.4c0-0.1-0.1-0.2-0.1-0.3c-2.5-4,2.2-8.6,6.2-6.2c0.6,0.3,1.3,0.2,1.6-0.4c0.1-0.1,0.1-0.2,0.1-0.3C19.7,5.4,26.3,5.4,27.4,9.9z M23,18.1c-2.7,0-4.9,2.2-4.9,4.9s2.2,4.9,4.9,4.9s4.9-2.2,4.9-4.9S25.7,18.1,23,18.1" />
+        </svg>
+      ) : (
+        <svg {...svgProps}>
+          <path d="M36.3,19c-0.2,0-0.3-0.1-0.5-0.2c-0.4-0.2-0.7-0.6-0.8-1.1c-0.1-0.4,0-0.9,0.2-1.3c1-1.7,0.8-3.7-0.6-5.1c-1.4-1.4-3.4-1.6-5.1-0.6c-0.1,0.1-0.3,0.2-0.5,0.2c-0.4,0.1-0.9,0-1.3-0.2c-0.4-0.2-0.7-0.6-0.8-1.1c-0.5-1.9-2.1-3.2-4-3.2c-2,0-3.6,1.3-4,3.2c-0.1,0.5-0.5,1-1,1.2c-0.5,0.2-1.1,0.2-1.5-0.1c-1.7-1-3.7-0.8-5.1,0.6c-1.4,1.4-1.6,3.4-0.6,5.1c0.1,0.2,0.2,0.3,0.2,0.5c0.2,0.9-0.3,1.8-1.3,2.1c-1.9,0.5-3.2,2.1-3.2,4c0,2,1.3,3.6,3.2,4c0.2,0,0.3,0.1,0.5,0.2c0.8,0.5,1.1,1.5,0.6,2.3c-1,1.7-0.8,3.7,0.6,5.1c1.4,1.4,3.4,1.6,5.1,0.6c0.2-0.1,0.3-0.2,0.5-0.2c0.9-0.2,1.8,0.3,2.1,1.3c0.5,1.9,2.1,3.2,4,3.2s3.6-1.3,4-3.2c0-0.2,0.1-0.3,0.2-0.5c0.2-0.4,0.6-0.7,1.1-0.8c0.4-0.1,0.9,0,1.3,0.2c1.7,1,3.7,0.8,5.1-0.6c1.4-1.4,1.6-3.4,0.6-5.1c-0.1-0.2-0.2-0.3-0.2-0.5c-0.1-0.4,0-0.9,0.2-1.3c0.2-0.4,0.6-0.7,1.1-0.8c1.9-0.5,3.2-2.1,3.2-4C39.5,21,38.2,19.4,36.3,19z M35.8,24.7c-1.1,0.3-2,0.9-2.6,1.9c-0.6,0.9-0.8,2.1-0.5,3.1c0.1,0.4,0.3,0.8,0.5,1.2c0.5,0.8,0.2,1.6-0.3,2.1c-0.5,0.5-1.2,0.8-2.1,0.3c-0.9-0.6-2.1-0.7-3.1-0.5c-1.1,0.3-2,0.9-2.6,1.9c-0.2,0.4-0.4,0.8-0.5,1.2c-0.2,1-1,1.3-1.7,1.3s-1.4-0.3-1.7-1.3c-0.5-1.9-2.2-3.2-4-3.2c-0.3,0-0.7,0-1,0.1c-0.4,0.1-0.8,0.3-1.2,0.5c-0.8,0.5-1.6,0.2-2.1-0.3c-0.5-0.5-0.8-1.2-0.3-2.1c1.2-2,0.6-4.5-1.4-5.7c-0.4-0.2-0.8-0.4-1.2-0.5c-1-0.2-1.3-1-1.3-1.7c0-0.6,0.3-1.4,1.3-1.7c2.2-0.5,3.6-2.8,3.1-5c-0.1-0.4-0.3-0.8-0.5-1.2c-0.5-0.8-0.2-1.6,0.3-2.1c0.5-0.5,1.2-0.8,2.1-0.3c1.1,0.7,2.5,0.8,3.7,0.3c1.2-0.5,2.1-1.6,2.4-2.9c0,0,0,0,0,0c0.2-1,1-1.3,1.7-1.3s1.4,0.3,1.7,1.3c0.5,2.2,2.8,3.6,5,3.1c0.4-0.1,0.8-0.3,1.2-0.5c0.8-0.5,1.6-0.2,2.1,0.3c0.5,0.5,0.8,1.2,0.3,2.1c-0.6,0.9-0.8,2.1-0.5,3.1c0.3,1.1,0.9,2,1.9,2.6c0.4,0.2,0.8,0.4,1.2,0.5c1,0.2,1.3,1,1.3,1.7C37.1,23.6,36.7,24.4,35.8,24.7z" />
+          <path d="M23,16.7c-3.5,0-6.3,2.8-6.3,6.3s2.8,6.3,6.3,6.3s6.3-2.8,6.3-6.3S26.5,16.7,23,16.7z M23,26.9c-2.1,0-3.9-1.7-3.9-3.9s1.7-3.9,3.9-3.9s3.9,1.7,3.9,3.9S25.1,26.9,23,26.9z" />
         </svg>
       );
     case "view":
+      // View Site — outline only ("view_site"); opens the public site in a
+      // new tab, no admin route to highlight.
       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 {...svgProps}>
+          <path d="M39.4,17.3l-0.1-10l-0.2-0.3c0,0-0.1-0.1-0.1-0.1l-0.4-0.3l-0.6-0.1h-9.4c-0.8,0-1.4,0.6-1.4,1.4s0.6,1.4,1.4,1.4h6.1L20.1,23.9c-0.5,0.5-0.5,1.4,0,1.9c0.5,0.5,1.4,0.6,1.9,0l14.6-14.6v6.1c0,0.8,0.6,1.4,1.4,1.4C38.8,18.7,39.4,18.1,39.4,17.3z" />
+          <path d="M23,10.3H11.7c-2.8,0-5.1,2.3-5.1,5.1v18.8c0,2.8,2.3,5.1,5.1,5.1h18.8c2.8,0,5.1-2.3,5.1-5.1V23c0-0.8-0.6-1.4-1.4-1.4c-0.8,0-1.4,0.6-1.4,1.4v11.3c0,1.3-1.1,2.4-2.4,2.4H11.7c-1.3,0-2.4-1.1-2.4-2.4V15.5c0-1.3,1.1-2.4,2.4-2.4H23c0.8,0,1.4-0.6,1.4-1.4S23.8,10.3,23,10.3z" />
         </svg>
       );
     case "logout":
+      // Log out — outline only ("exit"); button only, no admin route.
       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 {...svgProps}>
+          <path d="M39.2,22.6l-0.1-0.4l-0.3-0.5l-5.3-5.3c-0.5-0.5-1.4-0.5-1.9,0c-0.5,0.5-0.5,1.4,0,1.9l3,3l-18.6,0c-0.7,0-1.3,0.6-1.3,1.3c0,0.7,0.6,1.3,1.3,1.4h18.6l-3,3c-0.5,0.5-0.5,1.4,0,1.9c0.3,0.3,0.6,0.4,1,0.4c0.3,0,0.7-0.1,1-0.4l5.6-5.7l0.1-0.4C39.2,22.8,39.2,22.7,39.2,22.6z" />
+          <path d="M38.2,30c-0.7,0-1.3,0.6-1.3,1.3v2.5c0,1.7-1.4,3-3,3l-21.7,0c-1.7,0-3-1.3-3-3V12.2c0-1.7,1.4-3,3-3l21.7,0c1.7,0,3,1.3,3,3v2.5c0,0.7,0.6,1.3,1.3,1.3c0.7,0,1.3-0.6,1.3-1.3v-2.5c0-3.1-2.5-5.6-5.7-5.6H12.2c-0.4,0-0.8,0-1.1,0.1c-2.6,0.5-4.5,2.9-4.5,5.5v21.6c0,2.3,1.4,4.3,3.5,5.2c0.7,0.3,1.4,0.4,2.2,0.4h21.7c3.1,0,5.7-2.5,5.7-5.6v-2.5C39.5,30.6,38.9,30,38.2,30z" />
         </svg>
       );
     default:
@@ -245,7 +285,7 @@ export default function AdminLayout({
         }`}
         aria-label={link.label}
       >
-        <NavIcon icon={link.icon} />
+        <NavIcon icon={link.icon} active={isActive} />
         <Tooltip>{link.label}</Tooltip>
       </Link>
     );
@@ -265,7 +305,7 @@ export default function AdminLayout({
             className={`${tileBase} bg-white`}
             aria-label={`Morphika Andami v${ANDAMI_VERSION}`}
           >
-            <AndamiMark size={30} />
+            <AndamiMark size={24} />
             <Tooltip>
               Morphika Andami
               <span className="ml-1.5 text-white/55">v{ANDAMI_VERSION}</span>
@@ -288,10 +328,14 @@ export default function AdminLayout({
 
           <Link
             href="/admin/setup"
-            className={`${tileBase} text-white/55 hover:bg-white/[0.06] hover:text-white`}
+            className={`${tileBase} ${
+              isLinkActive("/admin/setup")
+                ? "bg-[#3580f9] text-white"
+                : "text-white/55 hover:bg-white/[0.06] hover:text-white"
+            }`}
             aria-label="Setup Wizard"
           >
-            <NavIcon icon="setup" />
+            <NavIcon icon="setup" active={isLinkActive("/admin/setup")} />
             <Tooltip>Setup Wizard</Tooltip>
           </Link>
 

package/app/admin/styles/page.tsx

@@ -11,13 +11,14 @@ import {
   TypographyEditor,
   ColorsEditor,
   LinksButtonsEditor,
+  CursorEditor,
 } from "../../../components/admin/styles";
 
 // ============================================
 // Tab definitions
 // ============================================
 
-type TabId = "grid" | "typography" | "colors" | "buttons";
+type TabId = "grid" | "typography" | "colors" | "buttons" | "cursor";
 
 function TabIcon({ id, size = 15 }: { id: TabId; size?: number }) {
   const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none" as const, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" as const, strokeLinejoin: "round" as const };
@@ -56,6 +57,12 @@ function TabIcon({ id, size = 15 }: { id: TabId; size?: number }) {
           <line x1="8" y1="12" x2="16" y2="12" />
         </svg>
       );
+    case "cursor":
+      return (
+        <svg {...props}>
+          <path d="M5 3l6 16 2-7 7-2z" />
+        </svg>
+      );
   }
 }
 
@@ -64,6 +71,7 @@ const TABS: { id: TabId; label: string }[] = [
   { id: "typography", label: "Typography" },
   { id: "colors", label: "Colors" },
   { id: "buttons", label: "Buttons & Links" },
+  { id: "cursor", label: "Mouse" },
 ];
 
 // ============================================
@@ -238,6 +246,14 @@ export default function AdminStylesPage() {
           saving={saving === "links"}
         />
       )}
+
+      {activeTab === "cursor" && (
+        <CursorEditor
+          cursor={styles?.cursor}
+          onSave={(data) => saveSection("cursor", data)}
+          saving={saving === "cursor"}
+        />
+      )}
     </div>
   );
 }

package/app/api/admin/styles/route.ts

@@ -137,6 +137,11 @@ export async function GET() {
         secondary_text: styles.button_secondary_text || "#ffffff",
         border_radius: styles.button_border_radius || "8px",
       },
+      cursor: {
+        color: styles.cursor_color || "#3580f9",
+        opacity: typeof styles.cursor_opacity === "number" ? styles.cursor_opacity : 100,
+        show_labels: !!styles.cursor_show_labels,
+      },
       disable_scroll_animations_mobile: styles.disable_scroll_animations_mobile ?? false,
     };
 
@@ -176,7 +181,7 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    const validSections = ["grid", "fonts", "typography", "colors", "links"];
+    const validSections = ["grid", "fonts", "typography", "colors", "links", "cursor", "animations"];
     if (!validSections.includes(section)) {
       return NextResponse.json(
         { error: `Invalid section: ${section}` },
@@ -286,6 +291,18 @@ export async function POST(request: NextRequest) {
         }
         break;
       }
+
+      case "cursor": {
+        if (data.cursor_color !== undefined) patch.cursor_color = String(data.cursor_color);
+        if (data.cursor_opacity !== undefined) {
+          const n = Number(data.cursor_opacity);
+          patch.cursor_opacity = Number.isFinite(n) ? Math.max(0, Math.min(100, n)) : 100;
+        }
+        if (data.cursor_show_labels !== undefined) {
+          patch.cursor_show_labels = !!data.cursor_show_labels;
+        }
+        break;
+      }
     }
 
     // Ensure the document exists

package/app/api/styles/route.ts

@@ -70,6 +70,11 @@ export async function GET() {
         secondary_text: raw.button_secondary_text || "#ffffff",
         border_radius: raw.button_border_radius || "8px",
       },
+      cursor: {
+        color: raw.cursor_color || "#3580f9",
+        opacity: typeof raw.cursor_opacity === "number" ? raw.cursor_opacity : 100,
+        show_labels: !!raw.cursor_show_labels,
+      },
       disable_scroll_animations_mobile: raw.disable_scroll_animations_mobile ?? false,
     };
 

package/components/admin/styles/CursorEditor.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import type { CursorSettings } from "../../../lib/sanity/types";
+import { Section, SaveButton, ColorField } from "./shared";
+
+export function CursorEditor({
+  cursor,
+  onSave,
+  saving,
+}: {
+  cursor?: CursorSettings;
+  onSave: (data: Record<string, unknown>) => void;
+  saving: boolean;
+}) {
+  const [local, setLocal] = useState({
+    cursor_color: cursor?.color || "#3580f9",
+    cursor_opacity: typeof cursor?.opacity === "number" ? cursor.opacity : 100,
+    cursor_show_labels: !!cursor?.show_labels,
+  });
+
+  useEffect(() => {
+    setLocal({
+      cursor_color: cursor?.color || "#3580f9",
+      cursor_opacity: typeof cursor?.opacity === "number" ? cursor.opacity : 100,
+      cursor_show_labels: !!cursor?.show_labels,
+    });
+  }, [cursor]);
+
+  const previewAlpha = Math.max(0, Math.min(100, local.cursor_opacity)) / 100;
+
+  return (
+    <Section
+      title="Mouse Cursor"
+      description="Custom cursor that replaces the system pointer on the public site. Activated globally via site.config.ts → features.customCursor."
+    >
+      <div className="grid grid-cols-2 gap-6 mb-6">
+        <ColorField
+          label="Cursor Color"
+          value={local.cursor_color}
+          onChange={(v) => setLocal({ ...local, cursor_color: v })}
+        />
+
+        <div>
+          <label className="text-xs text-neutral-500 block mb-1">
+            Opacity — {local.cursor_opacity}%
+          </label>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            step={1}
+            value={local.cursor_opacity}
+            onChange={(e) =>
+              setLocal({ ...local, cursor_opacity: Number(e.target.value) })
+            }
+            className="w-full accent-[#3580f9]"
+          />
+        </div>
+      </div>
+
+      <label className="flex items-start gap-3 mb-6 cursor-pointer">
+        <input
+          type="checkbox"
+          checked={local.cursor_show_labels}
+          onChange={(e) =>
+            setLocal({ ...local, cursor_show_labels: e.target.checked })
+          }
+          className="mt-0.5 accent-[#3580f9]"
+        />
+        <div>
+          <span className="text-sm text-neutral-800 block">Show hover labels</span>
+          <span className="text-xs text-neutral-500 block mt-0.5">
+            Adds <em>Zoom</em> on images, <em>Play</em> on videos, and <em>View</em> on links when hovered.
+          </span>
+        </div>
+      </label>
+
+      {/* Preview */}
+      <div className="mb-5 p-6 rounded-lg bg-neutral-900 flex items-center justify-center gap-6">
+        <span className="text-xs text-neutral-400">Preview:</span>
+        <div
+          className="rounded-full border-[1.5px] flex items-center justify-center"
+          style={{
+            width: local.cursor_show_labels ? 60 : 38,
+            height: local.cursor_show_labels ? 60 : 38,
+            borderColor: local.cursor_color,
+            opacity: previewAlpha,
+            transition: "width 0.2s ease, height 0.2s ease",
+          }}
+        >
+          {local.cursor_show_labels && (
+            <span
+              className="text-[10px] font-medium uppercase tracking-wider"
+              style={{ color: local.cursor_color }}
+            >
+              Zoom
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex justify-end">
+        <SaveButton onClick={() => onSave(local)} saving={saving} />
+      </div>
+    </Section>
+  );
+}

package/components/admin/styles/index.ts

@@ -7,3 +7,4 @@ export { FontsEditor } from "./FontsEditor";
 export { TypographyEditor } from "./TypographyEditor";
 export { ColorsEditor } from "./ColorsEditor";
 export { LinksButtonsEditor } from "./LinksButtonsEditor";
+export { CursorEditor } from "./CursorEditor";

package/components/blocks/ParallaxSlideRenderer.tsx

@@ -154,7 +154,11 @@ export default function ParallaxSlideRenderer({
         </div>
       )}
 
-      {/* ── Content layer — full V2 section ── */}
+      {/* ── Content layer — full V2 section ──
+          fillHeight stretches the V2 grid to 100% of the slide so each column's
+          `align_v` (top / center / bottom) has room to apply. No outer
+          justify-content here — the column owns vertical alignment, mirroring
+          ParallaxGroupCanvas in the builder. */}
       <div
         style={{
           position: "relative",
@@ -162,12 +166,12 @@ export default function ParallaxSlideRenderer({
           height: "100%",
           display: "flex",
           flexDirection: "column",
-          justifyContent: "center",
         }}
       >
         <SectionV2Renderer
           section={pseudoSection}
           pageEnterAnimation={pageEnterAnimation}
+          fillHeight
         />
       </div>
     </section>

package/components/blocks/SectionV2Renderer.tsx

@@ -191,9 +191,16 @@ interface SectionV2RendererProps {
   section: PageSectionV2;
   /** Page-level enter animation config (from page_settings.enter_animation) */
   pageEnterAnimation?: EnterAnimationConfig;
+  /**
+   * Stretch the section + grid to 100% of the parent's height so column-level
+   * `align_v` (top/center/bottom) has room to apply. Used by parallax slides
+   * and cover sections where the slide/row enforces a fixed height. Mirrors
+   * `fillHeight` in SectionV2Canvas (builder side).
+   */
+  fillHeight?: boolean;
 }
 
-export default function SectionV2Renderer({ section, pageEnterAnimation }: SectionV2RendererProps) {
+export default function SectionV2Renderer({ section, pageEnterAnimation, fillHeight }: SectionV2RendererProps) {
   const s = section.settings;
 
   const gridColumns = s.grid_columns || 12;
@@ -236,7 +243,10 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
   const sectionContent = (
     <section
       className={`sv2-${section._key}`}
-      style={layoutStyles}
+      style={{
+        ...layoutStyles,
+        ...(fillHeight ? { display: "flex", flexDirection: "column", height: "100%" } : {}),
+      }}
     >
       {responsiveCss && <style dangerouslySetInnerHTML={{ __html: responsiveCss }} />}
       <div
@@ -245,6 +255,7 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
           marginLeft: "auto",
           marginRight: "auto",
           width: "100%",
+          ...(fillHeight ? { flex: 1, minHeight: 0, display: "flex", flexDirection: "column" } : {}),
         }}
       >
       <div
@@ -253,6 +264,7 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
           gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
           columnGap: `${colGap}px`,
           rowGap: `${rowGap}px`,
+          ...(fillHeight ? { flex: 1, minHeight: 0, gridTemplateRows: "minmax(0, 1fr)" } : {}),
         }}
       >
         {sortedColumns.map((col, colIndex) => {

package/components/ui/CustomCursor.tsx

@@ -1,118 +1,138 @@
-"use client";
-
-import { useState, useEffect, useCallback, useRef } from "react";
-
-export default function CustomCursor() {
-  const [position, setPosition] = useState({ x: -100, y: -100 });
-  const [isHovering, setIsHovering] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-  const [isMobile, setIsMobile] = useState(true);
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-  const rafId = useRef<number>(0);
-
-  // Check if device supports hover (desktop)
-  useEffect(() => {
-    const mql = window.matchMedia("(hover: hover) and (pointer: fine)");
-    setIsMobile(!mql.matches);
-
-    const handler = (e: MediaQueryListEvent) => setIsMobile(!e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-
-  // Respect prefers-reduced-motion — disable custom cursor entirely
-  useEffect(() => {
-    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mql.matches);
-
-    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (rafId.current) cancelAnimationFrame(rafId.current);
-    rafId.current = requestAnimationFrame(() => {
-      setPosition({ x: e.clientX, y: e.clientY });
-      setIsVisible(true);
-    });
-  }, []);
-
-  const handleMouseLeave = useCallback(() => {
-    setIsVisible(false);
-  }, []);
-
-  // Track hover state on interactive elements
-  useEffect(() => {
-    if (isMobile) return;
-
-    const handleMouseOver = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (
-        target.closest("a, button, [role='button'], input, textarea, select, [data-cursor-hover]")
-      ) {
-        setIsHovering(true);
-      }
-    };
-
-    const handleMouseOut = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      if (
-        target.closest("a, button, [role='button'], input, textarea, select, [data-cursor-hover]")
-      ) {
-        setIsHovering(false);
-      }
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseleave", handleMouseLeave);
-    document.addEventListener("mouseover", handleMouseOver);
-    document.addEventListener("mouseout", handleMouseOut);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseleave", handleMouseLeave);
-      document.removeEventListener("mouseover", handleMouseOver);
-      document.removeEventListener("mouseout", handleMouseOut);
-      if (rafId.current) cancelAnimationFrame(rafId.current);
-    };
-  }, [isMobile, handleMouseMove, handleMouseLeave]);
-
-  // Don't render on mobile/touch devices or when reduced motion is preferred
-  if (isMobile || prefersReducedMotion) return null;
-
-  const size = isHovering ? 38 : 20;
-  const innerSize = isHovering ? 10 : 4;
-
-  return (
-    <div
-      className="pointer-events-none fixed inset-0 z-[9999]"
-      aria-hidden="true"
-    >
-      {/* Outer circle — primary brand color */}
-      <div
-        className="absolute rounded-full border-[1.5px] border-brand-primary"
-        style={{
-          width: size,
-          height: size,
-          left: position.x - size / 2,
-          top: position.y - size / 2,
-          opacity: isVisible ? 1 : 0,
-          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
-        }}
-      />
-      {/* Inner circle — secondary brand color */}
-      <div
-        className="absolute rounded-full bg-brand-secondary"
-        style={{
-          width: innerSize,
-          height: innerSize,
-          left: position.x - innerSize / 2,
-          top: position.y - innerSize / 2,
-          opacity: isVisible ? 1 : 0,
-          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
-        }}
-      />
-    </div>
-  );
-}
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useSiteStyles } from "../../lib/styles/provider";
+
+/** Map a hovered element to a hover label, or null if no label applies. */
+function getHoverLabel(target: HTMLElement | null): string | null {
+  if (!target) return null;
+  // Honour explicit data-cursor-label override (e.g. data-cursor-label="Open")
+  const explicit = target.closest<HTMLElement>("[data-cursor-label]");
+  if (explicit) return explicit.dataset.cursorLabel || null;
+  if (target.closest("img, [data-cursor-context='image']")) return "Zoom";
+  if (target.closest("video, [data-cursor-context='video']")) return "Play";
+  if (target.closest("a")) return "View";
+  return null;
+}
+
+/** Hover-target detection — anything interactive triggers the expanded state. */
+const HOVER_SELECTOR =
+  "a, button, [role='button'], input, textarea, select, img, video, [data-cursor-hover]";
+
+export default function CustomCursor() {
+  const styles = useSiteStyles();
+  const cursor = styles?.cursor;
+  const color = cursor?.color || "#3580f9";
+  const opacity = (typeof cursor?.opacity === "number" ? cursor.opacity : 100) / 100;
+  const showLabels = !!cursor?.show_labels;
+
+  const [position, setPosition] = useState({ x: -100, y: -100 });
+  const [isHovering, setIsHovering] = useState(false);
+  const [label, setLabel] = useState<string | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [isMobile, setIsMobile] = useState(true);
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
+  const rafId = useRef<number>(0);
+
+  // Check if device supports hover (desktop)
+  useEffect(() => {
+    const mql = window.matchMedia("(hover: hover) and (pointer: fine)");
+    setIsMobile(!mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setIsMobile(!e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  // Respect prefers-reduced-motion — disable custom cursor entirely
+  useEffect(() => {
+    const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mql.matches);
+
+    const handler = (e: MediaQueryListEvent) => setPrefersReducedMotion(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (rafId.current) cancelAnimationFrame(rafId.current);
+    rafId.current = requestAnimationFrame(() => {
+      setPosition({ x: e.clientX, y: e.clientY });
+      setIsVisible(true);
+    });
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  // Track hover state on interactive elements + resolve contextual label
+  useEffect(() => {
+    if (isMobile) return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(HOVER_SELECTOR)) {
+        setIsHovering(true);
+        if (showLabels) setLabel(getHoverLabel(target));
+      }
+    };
+
+    const handleMouseOut = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (target.closest(HOVER_SELECTOR)) {
+        setIsHovering(false);
+        setLabel(null);
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseleave", handleMouseLeave);
+    document.addEventListener("mouseover", handleMouseOver);
+    document.addEventListener("mouseout", handleMouseOut);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseleave", handleMouseLeave);
+      document.removeEventListener("mouseover", handleMouseOver);
+      document.removeEventListener("mouseout", handleMouseOut);
+      if (rafId.current) cancelAnimationFrame(rafId.current);
+    };
+  }, [isMobile, showLabels, handleMouseMove, handleMouseLeave]);
+
+  if (isMobile || prefersReducedMotion) return null;
+
+  // Expanded size when over an interactive element. When labels are on and
+  // a label is present, we expand further to fit the text comfortably.
+  const showLabelNow = showLabels && isHovering && !!label;
+  const size = showLabelNow ? 60 : isHovering ? 40 : 20;
+
+  return (
+    <div
+      className="pointer-events-none fixed inset-0 z-[9999]"
+      aria-hidden="true"
+    >
+      <div
+        className="absolute rounded-full border-[1.5px] flex items-center justify-center"
+        style={{
+          width: size,
+          height: size,
+          left: position.x - size / 2,
+          top: position.y - size / 2,
+          borderColor: color,
+          opacity: isVisible ? opacity : 0,
+          transition: "width 0.2s ease, height 0.2s ease, opacity 0.15s ease",
+        }}
+      >
+        {showLabelNow && (
+          <span
+            className="text-[10px] font-medium uppercase tracking-wider select-none"
+            style={{ color }}
+          >
+            {label}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/lib/sanity/queries.ts

@@ -381,7 +381,10 @@ export const siteStylesQuery = groq`
     button_secondary_bg,
     button_secondary_text,
     button_border_radius,
-    disable_scroll_animations_mobile
+    disable_scroll_animations_mobile,
+    cursor_color,
+    cursor_opacity,
+    cursor_show_labels
   }
 `;
 

package/lib/sanity/types.ts

@@ -1163,6 +1163,14 @@ export interface GridSettings {
   gutter_phone?: string;   // e.g. "16" (phone, ≤640px)
 }
 
+export interface CursorSettings {
+  color: string;
+  /** 0–100 */
+  opacity: number;
+  /** Show 'Zoom'/'Play'/'View' labels on hover over images/videos/links */
+  show_labels: boolean;
+}
+
 export interface SiteStyles {
   grid?: GridSettings;
   fonts?: FontFamily[];
@@ -1177,6 +1185,7 @@ export interface SiteStyles {
   colors?: ColorPalette;
   link_style?: LinkStyle;
   button_style?: ButtonStyle;
+  cursor?: CursorSettings;
   /** When true, disables all scroll animations on viewports ≤768px */
   disable_scroll_animations_mobile?: boolean;
 }

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.5.6";
+export const ANDAMI_VERSION = "0.5.8";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",

package/sanity/schemas/siteStyles.ts

@@ -13,6 +13,7 @@ export default defineType({
     { name: "typography", title: "Typography" },
     { name: "colors", title: "Colors" },
     { name: "links", title: "Links & Buttons" },
+    { name: "cursor", title: "Mouse" },
   ],
   fields: [
     // === GRID ===
@@ -208,5 +209,31 @@ export default defineType({
       description: "When enabled, all scroll-linked animations are disabled on phones (< 768px)",
       initialValue: false,
     }),
+
+    // === CURSOR (custom mouse cursor) ===
+    defineField({
+      name: "cursor_color",
+      title: "Cursor Color",
+      type: "string",
+      group: "cursor",
+      initialValue: "#3580f9",
+    }),
+    defineField({
+      name: "cursor_opacity",
+      title: "Cursor Opacity",
+      type: "number",
+      group: "cursor",
+      description: "0–100",
+      initialValue: 100,
+      validation: (Rule) => Rule.min(0).max(100),
+    }),
+    defineField({
+      name: "cursor_show_labels",
+      title: "Show Hover Labels",
+      type: "boolean",
+      group: "cursor",
+      description: "Show 'Zoom' on images, 'Play' on videos, 'View' on links when hovered",
+      initialValue: false,
+    }),
   ],
 });

package/styles/base.css

@@ -41,6 +41,32 @@ html {
   scroll-behavior: smooth;
   overflow-x: clip;
   scrollbar-gutter: stable;
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(128, 128, 128, 0.4) transparent;
+}
+
+/* Custom scrollbar — public site (admin overrides via [data-admin]).
+   Thin, rounded thumb on a transparent track; works on both light and dark
+   backgrounds because the thumb is a semi-transparent neutral grey. */
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: rgba(128, 128, 128, 0.4);
+  border-radius: 8px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(128, 128, 128, 0.7);
+}
+::-webkit-scrollbar-corner {
+  background: transparent;
 }
 
 body {