@morphika/andami 0.5.1 → 0.5.3

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

@@ -23,7 +23,7 @@ import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSecti
 import SectionEditorBar from "../../../../components/builder/SectionEditorBar";
 import CustomSectionInstanceCard from "../../../../components/builder/CustomSectionInstanceCard";
 import { ColumnDragProvider } from "../../../../components/builder/ColumnDragContext";
-import type { BlockType } from "../../../../lib/builder/types";
+import type { BlockType, SectionBlockType } from "../../../../lib/builder/types";
 import { findGaps } from "../../../../lib/builder/cascade";
 import { isSectionBlockType } from "../../../../lib/builder/types";
 import BlockLivePreview from "../../../../components/builder/BlockLivePreview";
@@ -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
@@ -415,10 +416,10 @@ export default function PageEditorPage() {
     [store]
   );
 
-  // Handle add page section (project grid / project carousel)
+  // Handle add page section (project grid / project carousel / marquee)
   // afterRowKey=null → always appends to end of page (bottom "Add Section" button)
   const handleAddSection = useCallback(
-    (blockType: "projectGridBlock" | "projectCarouselBlock") => {
+    (blockType: SectionBlockType) => {
       store.addSection(blockType, null);
       setShowSectionPicker(false);
     },
@@ -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,12 +618,13 @@ export default function PageEditorPage() {
               <line x1="10" y1="14" x2="21" y2="3" />
             </svg>
             Preview
+            <BubbleTooltip>Open preview in new tab</BubbleTooltip>
           </button>
 
           <button
             onClick={handleSave}
             disabled={store.isSaving || !store.isDirty}
-            className="rounded-lg bg-[#076bff] px-5 py-1.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+            className="rounded-lg bg-[#3580f9] px-5 py-1.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
           >
             {store.isSaving ? "Saving..." : "Save"}
           </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-[#076bff] px-4 py-2 text-xs text-white hover:bg-[#0559d4] 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>
@@ -818,7 +835,7 @@ export default function PageEditorPage() {
                           padding: "5px 16px",
                           background: "#e0daff",
                           color: "#7500d5",
-                          border: "1px dashed #7500d5",
+                          border: "1.5px dashed #7500d5",
                         }}
                       >
                         + Add Section

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 (
@@ -123,7 +124,7 @@ function CreatePageModal({
                 value={title}
                 onChange={(e) => setTitle(e.target.value)}
                 placeholder="Page title"
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/10"
                 autoFocus
               />
             </div>
@@ -136,7 +137,7 @@ function CreatePageModal({
                 value={slug}
                 onChange={(e) => { setSlug(e.target.value); setAutoSlug(false); }}
                 placeholder="page-slug"
-                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+                className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/10"
               />
               <p className="text-xs text-neutral-400 mt-1">URL: /{slug || "page-slug"}</p>
             </div>
@@ -152,7 +153,7 @@ function CreatePageModal({
               <button
                 type="submit"
                 disabled={creating}
-                className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50"
+                className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50"
               >
                 {creating ? "Creating..." : "Create"}
               </button>
@@ -297,7 +298,7 @@ function EditPageModal({
               type="text"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
-              className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+              className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/10"
               autoFocus
             />
           </div>
@@ -307,14 +308,14 @@ function EditPageModal({
               type="text"
               value={slug}
               onChange={(e) => setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""))}
-              className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10"
+              className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/10"
             />
             <p className="text-xs text-neutral-400 mt-1">URL: /{slug || "page-slug"}</p>
           </div>
           {error && <p className="text-xs text-[var(--admin-error)]">{error}</p>}
           <div className="flex gap-3 justify-end pt-2">
             <button type="button" onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
-            <button type="submit" disabled={saving} className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50">{saving ? "Saving..." : "Save"}</button>
+            <button type="submit" disabled={saving} className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50">{saving ? "Saving..." : "Save"}</button>
           </div>
         </form>
       </div>
@@ -381,7 +382,7 @@ function HomeConfirmModal({
         {error && <p className="text-xs text-[var(--admin-error)] mb-4">{error}</p>}
         <div className="flex gap-3 justify-end">
           <button onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
-          <button onClick={handleConfirm} disabled={setting} className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50">{setting ? "Setting..." : "Set as Home"}</button>
+          <button onClick={handleConfirm} disabled={setting} className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50">{setting ? "Setting..." : "Set as Home"}</button>
         </div>
       </div>
     </div>
@@ -456,7 +457,7 @@ export default function AdminPagesPage() {
         </h1>
         <button
           onClick={() => setShowCreate(true)}
-          className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors"
+          className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors"
         >
           + New Page
         </button>
@@ -469,7 +470,7 @@ export default function AdminPagesPage() {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search by title or slug..."
-          className="w-full max-w-md rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10 shadow-sm"
+          className="w-full max-w-md rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/10 shadow-sm"
         />
       </div>
 
@@ -484,7 +485,7 @@ export default function AdminPagesPage() {
             {pages.length === 0 ? "No pages yet" : "No pages match your search"}
           </p>
           {pages.length === 0 && (
-            <button onClick={() => setShowCreate(true)} className="text-xs text-[#076bff] hover:underline">
+            <button onClick={() => setShowCreate(true)} className="text-xs text-[#3580f9] hover:underline">
               Create your first page
             </button>
           )}
@@ -507,7 +508,7 @@ export default function AdminPagesPage() {
             >
               {/* Title */}
               <div className="cursor-pointer" onClick={() => router.push(`/admin/pages/${page.slug.current}`)}>
-                <p className="text-sm text-neutral-900 group-hover:text-[#076bff] transition-colors">
+                <p className="text-sm text-neutral-900 group-hover:text-[#3580f9] transition-colors">
                   {page.title}
                 </p>
                 <p className="text-xs text-neutral-400">/{page.slug.current}</p>
@@ -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
@@ -135,7 +136,7 @@ function MediaPicker({
         <button
           type="button"
           onClick={() => openBrowser()}
-          className="w-full aspect-[4/3] rounded-lg border border-dashed border-neutral-300 flex flex-col items-center justify-center gap-2 hover:border-[#076bff] hover:bg-neutral-50 transition-colors cursor-pointer"
+          className="w-full aspect-[4/3] rounded-lg border border-dashed border-neutral-300 flex flex-col items-center justify-center gap-2 hover:border-[#3580f9] hover:bg-neutral-50 transition-colors cursor-pointer"
         >
           {activeTab === "image" ? (
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-neutral-400">
@@ -240,13 +241,13 @@ function CreateProjectModal({
         <form onSubmit={handleSubmit} className="space-y-4">
           <div>
             <label className="block text-xs text-neutral-500 mb-1">Project Title</label>
-            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="My Project" className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none" autoFocus />
+            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="My Project" className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none" autoFocus />
           </div>
           <div>
             <label className="block text-xs text-neutral-500 mb-1">URL Slug</label>
             <div className="flex items-center gap-1">
               <span className="text-xs text-neutral-400">/work/</span>
-              <input type="text" value={slug} onChange={(e) => { setSlug(e.target.value); setAutoSlug(false); }} placeholder="my-project" className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none" />
+              <input type="text" value={slug} onChange={(e) => { setSlug(e.target.value); setAutoSlug(false); }} placeholder="my-project" className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none" />
             </div>
           </div>
           <MediaPicker
@@ -259,7 +260,7 @@ function CreateProjectModal({
           {error && <p className="text-xs text-[var(--admin-error)]">{error}</p>}
           <div className="flex gap-3 justify-end pt-2">
             <button type="button" onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
-            <button type="submit" disabled={creating} className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50">{creating ? "Creating..." : "Create"}</button>
+            <button type="submit" disabled={creating} className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50">{creating ? "Creating..." : "Create"}</button>
           </div>
         </form>
       </div>
@@ -344,13 +345,13 @@ function EditProjectModal({
         <form onSubmit={handleSave} className="space-y-4">
           <div>
             <label className="block text-xs text-neutral-500 mb-1">Project Title</label>
-            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none" autoFocus />
+            <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none" autoFocus />
           </div>
           <div>
             <label className="block text-xs text-neutral-500 mb-1">URL Slug</label>
             <div className="flex items-center gap-1">
               <span className="text-xs text-neutral-400">/work/</span>
-              <input type="text" value={slug} onChange={(e) => setSlug(e.target.value)} className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none" />
+              <input type="text" value={slug} onChange={(e) => setSlug(e.target.value)} className="flex-1 rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none" />
             </div>
           </div>
           <MediaPicker
@@ -363,7 +364,7 @@ function EditProjectModal({
           {error && <p className="text-xs text-[var(--admin-error)]">{error}</p>}
           <div className="flex gap-3 justify-end pt-2">
             <button type="button" onClick={onClose} className="rounded-lg border border-neutral-200 px-5 py-2.5 text-sm text-neutral-500 hover:text-neutral-800 hover:border-neutral-300 transition-colors">Cancel</button>
-            <button type="submit" disabled={saving} className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors disabled:opacity-50">{saving ? "Saving..." : "Save"}</button>
+            <button type="submit" disabled={saving} className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors disabled:opacity-50">{saving ? "Saving..." : "Save"}</button>
           </div>
         </form>
       </div>
@@ -494,7 +495,7 @@ export default function AdminProjectsPage() {
             <select
               value={viewMode === "thumb" ? "Thumb View" : "List View"}
               onChange={(e) => setViewMode(e.target.value === "Thumb View" ? "thumb" : "list")}
-              className="appearance-none rounded-lg border border-neutral-200 bg-white px-3 py-2.5 pr-8 text-sm text-neutral-700 focus:border-[#076bff] focus:outline-none cursor-pointer"
+              className="appearance-none rounded-lg border border-neutral-200 bg-white px-3 py-2.5 pr-8 text-sm text-neutral-700 focus:border-[#3580f9] focus:outline-none cursor-pointer"
             >
               <option>List View</option>
               <option>Thumb View</option>
@@ -505,7 +506,7 @@ export default function AdminProjectsPage() {
           </div>
           <button
             onClick={() => setShowCreate(true)}
-            className="rounded-lg bg-[#076bff] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#0559d4] transition-colors"
+            className="rounded-lg bg-[#3580f9] px-5 py-2.5 text-sm font-medium text-white hover:bg-[#2d6dd4] transition-colors"
           >
             + New Project
           </button>
@@ -519,7 +520,7 @@ export default function AdminProjectsPage() {
           value={search}
           onChange={(e) => setSearch(e.target.value)}
           placeholder="Search by title or slug..."
-          className="w-full max-w-md rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#076bff] focus:outline-none focus:ring-2 focus:ring-[#076bff]/10 shadow-sm"
+          className="w-full max-w-md rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-[#3580f9] focus:outline-none focus:ring-2 focus:ring-[#3580f9]/10 shadow-sm"
         />
       </div>
 
@@ -534,7 +535,7 @@ export default function AdminProjectsPage() {
             {projects.length === 0 ? "No projects yet" : "No projects match your search"}
           </p>
           {projects.length === 0 && (
-            <button onClick={() => setShowCreate(true)} className="text-xs text-[#076bff] hover:underline">
+            <button onClick={() => setShowCreate(true)} className="text-xs text-[#3580f9] hover:underline">
               Create your first project
             </button>
           )}
@@ -557,7 +558,7 @@ export default function AdminProjectsPage() {
                 className="group grid grid-cols-[1fr_120px_140px_180px] gap-4 items-center rounded-lg bg-white px-5 py-4 hover:shadow-md transition-all cursor-pointer border border-transparent hover:border-neutral-200"
                 onClick={() => router.push(`/admin/projects/${project.slug.current}`)}
               >
-                <p className="text-sm text-neutral-900 group-hover:text-[#076bff] transition-colors">
+                <p className="text-sm text-neutral-900 group-hover:text-[#3580f9] transition-colors">
                   {project.title}
                 </p>
 
@@ -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>
@@ -601,7 +606,7 @@ export default function AdminProjectsPage() {
             <div key={project._id} className="group relative">
               {/* Thumbnail card */}
               <div
-                className="relative aspect-[4/3] rounded-xl overflow-hidden bg-neutral-200 cursor-pointer border border-neutral-200/80 hover:shadow-md hover:shadow-[#076bff]/5 transition-all"
+                className="relative aspect-[4/3] rounded-xl overflow-hidden bg-neutral-200 cursor-pointer border border-neutral-200/80 hover:shadow-md hover:shadow-[#3580f9]/5 transition-all"
                 onClick={() => router.push(`/admin/projects/${project.slug.current}`)}
               >
                 {project.thumbnail_path ? (
@@ -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-[#076bff] 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/admin/setup/page.tsx

@@ -53,7 +53,7 @@ export default function SetupPage() {
         style={{ fontFamily: "Inter, system-ui, sans-serif" }}
       >
         <div className="text-center">
-          <div className="w-6 h-6 border-2 border-[#076bff] border-t-transparent rounded-full animate-spin mx-auto mb-3" />
+          <div className="w-6 h-6 border-2 border-[#3580f9] border-t-transparent rounded-full animate-spin mx-auto mb-3" />
           <p className="text-xs text-[#999]">Checking setup status...</p>
         </div>
       </div>

package/app/admin/styles/page.tsx

@@ -172,7 +172,7 @@ export default function AdminStylesPage() {
               onClick={() => setActiveTab(tab.id)}
               className={`flex items-center gap-1.5 px-4 py-2.5 text-[13px] font-medium transition-colors border-b-2 -mb-px ${
                 isActive
-                  ? "text-neutral-900 border-[#076bff]"
+                  ? "text-neutral-900 border-[#3580f9]"
                   : "text-neutral-400 border-transparent hover:text-neutral-600"
               }`}
             >

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 });