@morphika/andami 0.5.2 → 0.5.4

package/README.md

@@ -12,8 +12,33 @@ Andami is a self-hosted, code-first alternative to Webflow / Framer / Semplice.
 ## 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`)_
+
+### The visual builder
+
+![Builder canvas with multi-viewport preview, minimap and settings panel](docs/media/builder-canvas.png)
+
+*Infinite canvas with desktop / tablet / phone previews side-by-side, live minimap, and a contextual settings panel. Zoom, pan, undo/redo — all client-side.*
+
+### Adding content
+
+<table>
+<tr>
+<td width="50%">
+  <img src="docs/media/add-block-modal.png" alt="Add Block modal" />
+  <p align="center"><em>8 content blocks — Text, Image, Image Grid, Video, Spacer, Button, Before/After, Audio</em></p>
+</td>
+<td width="50%">
+  <img src="docs/media/add-section-modal.png" alt="Add Section modal" />
+  <p align="center"><em>6 section types + reusable Custom Sections</em></p>
+</td>
+</tr>
+</table>
+
+### Contextual toolbars
+
+![Section, column and block floating toolbars](docs/media/section-toolbar.png)
+
+*Sections, columns and blocks each get their own floating toolbar — duplicate, reorder, delete, and add adjacent elements without losing canvas focus.*
 
 ---
 

package/app/admin/layout.tsx

@@ -96,28 +96,37 @@ function NavIcon({ icon }: { icon: string }) {
   const size = 20;
   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={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-          <path d="M14 2v6h6" />
+        <svg 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" />
         </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" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="3" y="3" width="7" height="7" rx="1.5" />
-          <rect x="14" y="3" width="7" height="7" rx="1.5" />
-          <rect x="3" y="14" width="7" height="7" rx="1.5" />
-          <rect x="14" y="14" width="7" height="7" rx="1.5" />
+        <svg 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" />
         </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">
-          <circle cx="12" cy="12" r="9" />
-          <circle cx="8" cy="10" r="1" />
-          <circle cx="16" cy="10" r="1" />
-          <circle cx="12" cy="15" r="1" />
+          <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" />
         </svg>
       );
     case "nav":
@@ -146,10 +155,13 @@ function NavIcon({ icon }: { icon: string }) {
         </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">
-          <polyline points="8 6 3 12 8 18" />
-          <polyline points="16 6 21 12 16 18" />
+          <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" />
         </svg>
       );
     case "cloud-download":

package/app/admin/pages/[slug]/page.tsx

@@ -32,6 +32,7 @@ import ParallaxGroupCanvas from "../../../../components/builder/ParallaxGroupCan
 import CoverSectionCanvas from "../../../../components/builder/CoverSectionCanvas";
 import { ThumbStatusProvider } from "../../../../lib/contexts/ThumbStatusContext";
 import PublishToggle from "../../../../components/admin/PublishToggle";
+import { BubbleTooltip } from "../../../../components/builder/BubbleIcons";
 
 // ============================================
 // Preview helper — opens the page in a new tab
@@ -532,43 +533,55 @@ export default function PageEditorPage() {
           </Link>
           <span className="text-neutral-200">|</span>
 
-          {/* Undo / Redo */}
+          {/* Undo / Redo — tabler arrow-back-up (Redo = mirrored via scaleX) */}
           <button
             onClick={() => store.undo()}
             disabled={!store.canUndo()}
-            className="rounded-lg px-2 py-1 text-xs text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-neutral-400"
-            title="Undo (Ctrl+Z)"
+            className="group/bb relative rounded-lg p-1.5 text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+            aria-label="Undo"
           >
-            ↶
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M9 14l-4 -4l4 -4" />
+              <path d="M5 10h11a4 4 0 1 1 0 8h-1" />
+            </svg>
+            <BubbleTooltip>Undo <span className="ml-1 text-white/55">Ctrl+Z</span></BubbleTooltip>
           </button>
           <button
             onClick={() => store.redo()}
             disabled={!store.canRedo()}
-            className="rounded-lg px-2 py-1 text-xs text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-neutral-400"
-            title="Redo (Ctrl+Shift+Z)"
+            className="group/bb relative rounded-lg p-1.5 text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-20 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-neutral-400"
+            aria-label="Redo"
           >
-            ↷
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: "scaleX(-1)" }}>
+              <path d="M9 14l-4 -4l4 -4" />
+              <path d="M5 10h11a4 4 0 1 1 0 8h-1" />
+            </svg>
+            <BubbleTooltip>Redo <span className="ml-1 text-white/55">Ctrl+Shift+Z</span></BubbleTooltip>
           </button>
 
-          {/* Help */}
+          {/* Keyboard shortcuts — tabler option (Mac ⌥ glyph) */}
           <button
             onClick={() => setShowHelp(true)}
-            className="rounded-lg px-2 py-1 text-xs text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
-            title="Keyboard shortcuts (?)"
+            className="group/bb relative rounded-lg p-1.5 text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+            aria-label="Keyboard shortcuts"
           >
-            ?
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M14 6h5m0 12h-5l-5 -12h-4" />
+            </svg>
+            <BubbleTooltip>Keyboard shortcuts <span className="ml-1 text-white/55">?</span></BubbleTooltip>
           </button>
 
-          {/* Page settings gear */}
+          {/* Page settings — tabler settings (gear with 8 lobes) */}
           <button
             onClick={() => store.clearSelection()}
-            className="rounded-lg px-2 py-1 text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
-            title="Page settings"
+            className="group/bb relative rounded-lg p-1.5 text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+            aria-label="Page settings"
           >
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-              <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 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+              <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065" />
+              <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
             </svg>
+            <BubbleTooltip>Page settings</BubbleTooltip>
           </button>
           <span className="text-neutral-200">|</span>
         </div>
@@ -596,8 +609,8 @@ export default function PageEditorPage() {
           {/* Preview in new tab */}
           <button
             onClick={() => openPreview(store)}
-            className="flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 transition-colors"
-            title="Open page preview in new tab"
+            className="group/bb relative flex items-center gap-1.5 rounded-lg border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-500 hover:text-neutral-700 hover:border-neutral-300 transition-colors"
+            aria-label="Open page preview in new tab"
           >
             <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="shrink-0">
               <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
@@ -605,6 +618,7 @@ export default function PageEditorPage() {
               <line x1="10" y1="14" x2="21" y2="3" />
             </svg>
             Preview
+            <BubbleTooltip>Open preview in new tab</BubbleTooltip>
           </button>
 
           <button
@@ -638,9 +652,6 @@ export default function PageEditorPage() {
               ) : store.rows.length === 0 ? (
                 /* Empty state */
                 <div className="flex flex-col items-center justify-center h-full min-h-[400px] border border-dashed border-neutral-300 rounded-lg py-20">
-                  <div className="w-12 h-12 rounded-full border border-neutral-300 flex items-center justify-center mb-4">
-                    <span className="text-neutral-400 text-lg">+</span>
-                  </div>
                   <p className="text-sm text-neutral-500 mb-2">
                     This page has no content yet
                   </p>
@@ -652,7 +663,13 @@ export default function PageEditorPage() {
                       e.stopPropagation();
                       setShowSectionPicker(true);
                     }}
-                    className="rounded-lg bg-[#3580f9] px-4 py-2 text-xs text-white hover:bg-[#2d6dd4] transition-colors"
+                    className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
+                    style={{
+                      padding: "5px 16px",
+                      background: "#e0daff",
+                      color: "#7500d5",
+                      border: "1.5px dashed #7500d5",
+                    }}
                   >
                     + Add First Section
                   </button>

package/app/admin/pages/page.tsx

@@ -7,6 +7,7 @@ import { csrfHeaders } from "../../../lib/csrf-client";
 import type { PageListItem } from "../../../lib/sanity/types";
 import PublishToggle from "../../../components/admin/PublishToggle";
 import { EditIcon, DuplicateIcon, DeleteIcon, PreviewIcon } from "../../../components/admin/icons";
+import { BubbleTooltip } from "../../../components/builder/BubbleIcons";
 
 function HomeIcon({ active }: { active: boolean }) {
   return (
@@ -545,33 +546,37 @@ export default function AdminPagesPage() {
               <div className="flex items-center gap-1 justify-end">
                 <button
                   onClick={(e) => { e.stopPropagation(); setEditingPage(page); }}
-                  className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
-                  title="Edit settings"
+                  className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+                  aria-label="Edit settings"
                 >
                   <EditIcon />
+                  <BubbleTooltip>Edit settings</BubbleTooltip>
                 </button>
                 <button
                   onClick={(e) => { e.stopPropagation(); handleDuplicate(page); }}
                   disabled={duplicating === page._id}
-                  className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-30"
-                  title="Duplicate"
+                  className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-30"
+                  aria-label="Duplicate"
                 >
                   <DuplicateIcon />
+                  <BubbleTooltip>Duplicate</BubbleTooltip>
                 </button>
                 <button
                   onClick={(e) => { e.stopPropagation(); setDeletingPage(page); }}
-                  className="p-1.5 rounded text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors"
-                  title="Delete"
+                  className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors"
+                  aria-label="Delete"
                 >
                   <DeleteIcon />
+                  <BubbleTooltip>Delete</BubbleTooltip>
                 </button>
                 <Link
                   href={page.is_home ? "/" : `/${page.slug.current}`}
                   target="_blank"
-                  className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
-                  title="Preview"
+                  className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors"
+                  aria-label="Preview"
                 >
                   <PreviewIcon />
+                  <BubbleTooltip>Preview</BubbleTooltip>
                 </Link>
               </div>
             </div>

package/app/admin/projects/page.tsx

@@ -9,6 +9,7 @@ import { csrfHeaders } from "../../../lib/csrf-client";
 import AssetBrowser from "../../../components/builder/AssetBrowser";
 import PublishToggle from "../../../components/admin/PublishToggle";
 import { EditIcon, DuplicateIcon, DeleteIcon, PreviewIcon } from "../../../components/admin/icons";
+import { BubbleTooltip } from "../../../components/builder/BubbleIcons";
 
 // ============================================
 // Helpers
@@ -577,17 +578,21 @@ export default function AdminProjectsPage() {
                 </span>
 
                 <div className="flex items-center gap-1 justify-end" onClick={(e) => e.stopPropagation()}>
-                  <button onClick={() => setEditingProject(project)} className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors" title="Edit">
+                  <button onClick={() => setEditingProject(project)} className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors" aria-label="Edit">
                     <EditIcon />
+                    <BubbleTooltip>Edit</BubbleTooltip>
                   </button>
-                  <button onClick={() => handleDuplicate(project)} disabled={duplicating === project._id} className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-30" title="Duplicate">
+                  <button onClick={() => handleDuplicate(project)} disabled={duplicating === project._id} className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors disabled:opacity-30" aria-label="Duplicate">
                     <DuplicateIcon />
+                    <BubbleTooltip>Duplicate</BubbleTooltip>
                   </button>
-                  <button onClick={() => setDeletingProject(project)} className="p-1.5 rounded text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors" title="Delete">
+                  <button onClick={() => setDeletingProject(project)} className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-colors" aria-label="Delete">
                     <DeleteIcon />
+                    <BubbleTooltip>Delete</BubbleTooltip>
                   </button>
-                  <a href={`/work/${project.slug.current}`} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors" title="Preview">
+                  <a href={`/work/${project.slug.current}`} target="_blank" rel="noopener noreferrer" className="group/bb relative p-1.5 rounded text-neutral-400 hover:text-neutral-700 hover:bg-neutral-100 transition-colors" aria-label="Preview">
                     <PreviewIcon />
+                    <BubbleTooltip>Preview</BubbleTooltip>
                   </a>
                 </div>
               </div>
@@ -628,17 +633,21 @@ export default function AdminProjectsPage() {
                 {/* Hover overlay with actions */}
                 <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-start justify-end p-2 opacity-0 group-hover:opacity-100">
                   <div className="flex gap-1" onClick={(e) => e.stopPropagation()}>
-                    <button onClick={() => setEditingProject(project)} className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-[#3580f9] transition-colors shadow-sm" title="Edit">
+                    <button onClick={() => setEditingProject(project)} className="group/bb relative p-1.5 rounded bg-white/90 text-neutral-600 hover:text-[#3580f9] transition-colors shadow-sm" aria-label="Edit">
                       <EditIcon />
+                      <BubbleTooltip>Edit</BubbleTooltip>
                     </button>
-                    <button onClick={() => handleDuplicate(project)} disabled={duplicating === project._id} className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-neutral-900 transition-colors shadow-sm" title="Duplicate">
+                    <button onClick={() => handleDuplicate(project)} disabled={duplicating === project._id} className="group/bb relative p-1.5 rounded bg-white/90 text-neutral-600 hover:text-neutral-900 transition-colors shadow-sm" aria-label="Duplicate">
                       <DuplicateIcon />
+                      <BubbleTooltip>Duplicate</BubbleTooltip>
                     </button>
-                    <button onClick={() => setDeletingProject(project)} className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-red-500 transition-colors shadow-sm" title="Delete">
+                    <button onClick={() => setDeletingProject(project)} className="group/bb relative p-1.5 rounded bg-white/90 text-neutral-600 hover:text-red-500 transition-colors shadow-sm" aria-label="Delete">
                       <DeleteIcon />
+                      <BubbleTooltip>Delete</BubbleTooltip>
                     </button>
-                    <a href={`/work/${project.slug.current}`} target="_blank" rel="noopener noreferrer" className="p-1.5 rounded bg-white/90 text-neutral-600 hover:text-neutral-900 transition-colors shadow-sm" title="Preview">
+                    <a href={`/work/${project.slug.current}`} target="_blank" rel="noopener noreferrer" className="group/bb relative p-1.5 rounded bg-white/90 text-neutral-600 hover:text-neutral-900 transition-colors shadow-sm" aria-label="Preview">
                       <PreviewIcon />
+                      <BubbleTooltip>Preview</BubbleTooltip>
                     </a>
                   </div>
                 </div>

package/app/api/admin/assets/register/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath } from "../../../../../lib/security";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { adminClient as client } from "../../../../../lib/sanity/client";
@@ -28,6 +28,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
   if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
     return jsonError("Request body too large", 413);
   }
@@ -64,14 +67,24 @@ export async function POST(request: NextRequest) {
       typeof fileSize === "number" && fileSize > 0 ? fileSize : undefined;
 
     // ── Fetch current registry ──
-    const registry = await client.fetch(
-      `*[_type == "assetRegistry"][0]{ _id, assets, storage_provider }`
+    // Capture `_rev` so the patch below can use optimistic concurrency
+    // (ifRevisionId). A concurrent writer (scan, relink, another register)
+    // will make the commit fail with 409 instead of silently overwriting.
+    const registry = await client.fetch<{
+      _id: string;
+      _rev?: string;
+      assets?: Array<Record<string, unknown>>;
+      storage_provider?: string;
+    } | null>(
+      `*[_type == "assetRegistry"][0]{ _id, _rev, assets, storage_provider }`
     );
 
     if (!registry) {
       return jsonError("Asset registry not found. Scan your storage first.", 404);
     }
 
+    const registryRev: string | undefined = registry._rev;
+
     // #20: Validate that R2 is the active provider for R2-uploaded assets
     const activeProvider = registry.storage_provider || "r2";
     if (activeProvider !== "r2") {
@@ -113,12 +126,24 @@ export async function POST(request: NextRequest) {
 
       // Replace the asset at the existing index
       const patchKey = existing._key as string;
-      await writeClient
-        .patch(registry._id)
-        .set({
-          [`assets[_key=="${patchKey}"]`]: updatedAsset,
-        })
-        .commit();
+      const patch = writeClient.patch(registry._id);
+      if (registryRev) patch.ifRevisionId(registryRev);
+      try {
+        await patch
+          .set({
+            [`assets[_key=="${patchKey}"]`]: updatedAsset,
+          })
+          .commit();
+      } catch (commitErr) {
+        const msg = commitErr instanceof Error ? commitErr.message : "";
+        if (msg.includes("rev mismatch") || msg.includes("409")) {
+          return jsonError(
+            "Registry was modified by another request. Please retry.",
+            409
+          );
+        }
+        throw commitErr;
+      }
 
       auditLog("asset.register.update", { path: key, fileSize: size });
 
@@ -142,11 +167,23 @@ export async function POST(request: NextRequest) {
         last_checked_at: now,
       };
 
-      await writeClient
-        .patch(registry._id)
-        .setIfMissing({ assets: [] })
-        .append("assets", [newAsset])
-        .commit();
+      const patch = writeClient.patch(registry._id);
+      if (registryRev) patch.ifRevisionId(registryRev);
+      try {
+        await patch
+          .setIfMissing({ assets: [] })
+          .append("assets", [newAsset])
+          .commit();
+      } catch (commitErr) {
+        const msg = commitErr instanceof Error ? commitErr.message : "";
+        if (msg.includes("rev mismatch") || msg.includes("409")) {
+          return jsonError(
+            "Registry was modified by another request. Please retry.",
+            409
+          );
+        }
+        throw commitErr;
+      }
 
       auditLog("asset.register.create", { path: key, fileSize: size });
 

package/app/api/admin/assets/registry/route.ts

@@ -3,7 +3,7 @@ import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { assetRegistryQuery } from "../../../../../lib/sanity/queries";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE } from "../../../../../lib/security";
 import { logger } from "../../../../../lib/logger";
 
@@ -50,6 +50,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
   if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
     return NextResponse.json({ error: "Request body too large" }, { status: 413 });
   }

package/app/api/admin/assets/relink/confirm/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { adminClient as client } from "../../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../../lib/sanity/writeClient";
 import { isAdminAuthenticated } from "../../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../../lib/csrf";
 import { logger } from "../../../../../../lib/logger";
 
 /**
@@ -74,6 +74,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
 
   try {
     const body = await request.json();

package/app/api/admin/assets/relink/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { adminClient as client } from "../../../../../lib/sanity/client";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { getStorageAdapter } from "../../../../../lib/storage";
 import { logger } from "../../../../../lib/logger";
 import type { RegisteredAsset } from "../../../../../lib/sanity/types";
@@ -39,6 +39,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
 
   try {
     const body = await request.json();

package/app/api/admin/assets/scan/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE } from "../../../../../lib/security";
 import { getStorageAdapter, getActiveProvider } from "../../../../../lib/storage";
 import { logger } from "../../../../../lib/logger";
@@ -29,6 +29,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
   if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
     return NextResponse.json({ error: "Request body too large" }, { status: 413 });
   }

package/app/api/admin/backups/restore-data/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import {
   checkRateLimit,
   jsonError,
@@ -92,6 +92,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
 
   // M-2: reject oversize bodies up front so we don't spend CPU on
   // `request.json()` for a payload we'll refuse anyway. Vercel's platform

package/app/api/admin/r2/connect/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { S3Client, HeadBucketCommand, PutBucketCorsCommand } from "@aws-sdk/client-s3";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { encryptToken, isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError } from "../../../../../lib/security";
 import { logger } from "../../../../../lib/logger";
 import { invalidateProviderConfigCache } from "../../../../../lib/storage";
@@ -25,6 +25,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
   if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
     return jsonError("Request body too large", 413);
   }

package/app/api/admin/r2/delete/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { S3Client, DeleteObjectCommand, ListObjectsV2Command, DeleteObjectsCommand } from "@aws-sdk/client-s3";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath, checkRateLimit } from "../../../../../lib/security";
 import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
@@ -27,6 +27,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
   if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
     return jsonError("Request body too large", 413);
   }

package/app/api/admin/r2/rename/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { S3Client, CopyObjectCommand, DeleteObjectCommand, ListObjectsV2Command, HeadObjectCommand } from "@aws-sdk/client-s3";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError, isValidAssetPath, checkRateLimit } from "../../../../../lib/security";
 import { adminClient as client } from "../../../../../lib/sanity/client";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
@@ -29,6 +29,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
   if (isBodyTooLarge(request, MAX_JSON_BODY_SIZE)) {
     return jsonError("Request body too large", 413);
   }