@morphika/andami 0.5.1 → 0.5.3

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

package/app/api/admin/r2/upload-url/route.ts

@@ -2,7 +2,7 @@ import { NextRequest, NextResponse } from "next/server";
 import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
 import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 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, isValidUploadKey, checkRateLimit } from "../../../../../lib/security";
 import { adminClient as client } from "../../../../../lib/sanity/client";
 import { decryptToken } from "../../../../../lib/security";
@@ -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/revalidate/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { revalidatePath } from "next/cache";
 import { isAdminAuthenticated } from "../../../../lib/auth";
-import { validateCsrf, csrfErrorResponse } from "../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../lib/csrf";
 import { logger } from "../../../../lib/logger";
 
 /**
@@ -23,6 +23,9 @@ export async function POST(request: NextRequest) {
   if (!validateCsrf(request)) {
     return csrfErrorResponse();
   }
+  if (!hasJsonContentType(request)) {
+    return contentTypeErrorResponse();
+  }
 
   try {
     const body = await request.json().catch(() => ({}));

package/app/api/admin/storage/switch/route.ts

@@ -3,7 +3,7 @@ import { revalidatePath } from "next/cache";
 import { isAdminAuthenticated } from "../../../../../lib/auth";
 import { writeClient } from "../../../../../lib/sanity/writeClient";
 import { adminClient as client } from "../../../../../lib/sanity/client";
-import { validateCsrf, csrfErrorResponse } from "../../../../../lib/csrf";
+import { validateCsrf, csrfErrorResponse, hasJsonContentType, contentTypeErrorResponse } from "../../../../../lib/csrf";
 import { isBodyTooLarge, MAX_JSON_BODY_SIZE, jsonError } from "../../../../../lib/security";
 import { invalidateProviderConfigCache } from "../../../../../lib/storage";
 import { auditLog } from "../../../../../lib/audit";
@@ -36,6 +36,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/custom-sections/[id]/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
-import { adminClient } from "../../../../lib/sanity/client";
+import { client } from "../../../../lib/sanity/client";
 import { customSectionByIdQuery } from "../../../../lib/sanity/queries";
 import { logger } from "../../../../lib/logger";
 
@@ -11,10 +11,9 @@ type RouteContext = { params: Promise<{ id: string }> };
  * Returns only the `section` field (PageSectionV2 data) for rendering
  * custom section instances on the public site.
  *
- * Uses adminClient (useCdn: false) so data is always fresh after
- * revalidatePath() is called from the admin PATCH endpoint.
- * Cache is controlled via ISR revalidation on-demand, not via
- * Cache-Control headers — this avoids stale CDN responses after edits.
+ * Uses the public `client` (useCdn: true) to hit Sanity's CDN (~2ms) instead
+ * of the API (~200ms). Freshness is handled by `revalidatePath()` in the
+ * admin PATCH endpoint, which purges this endpoint's ISR cache on save.
  */
 export async function GET(_request: NextRequest, context: RouteContext) {
   try {
@@ -24,7 +23,7 @@ export async function GET(_request: NextRequest, context: RouteContext) {
       return NextResponse.json({ error: "Missing section ID" }, { status: 400 });
     }
 
-    const result = await adminClient.fetch(customSectionByIdQuery, { id });
+    const result = await client.fetch(customSectionByIdQuery, { id });
     if (!result?.section) {
       return NextResponse.json({ error: "Custom section not found" }, { status: 404 });
     }

package/components/admin/MetadataEditor.tsx

@@ -71,7 +71,7 @@ export default function MetadataEditor({
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder={getSiteConfig().defaults.metaTitle}
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
         />
         <p className="text-xs text-neutral-400">
           Shown in browser tabs and search results when no page-specific title is
@@ -89,7 +89,7 @@ export default function MetadataEditor({
           onChange={(e) => setDescription(e.target.value)}
           placeholder="Motion graphics studio based in Barcelona..."
           rows={3}
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none resize-none"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none resize-none"
         />
         <div className="flex justify-between">
           <p className="text-xs text-neutral-400">
@@ -115,7 +115,7 @@ export default function MetadataEditor({
           value={ogImage}
           onChange={(e) => setOgImage(e.target.value)}
           placeholder="meta/og-image.jpg"
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
         />
         <p className="text-xs text-neutral-400">
           Relative path to the default image shown when sharing on social media.
@@ -133,7 +133,7 @@ export default function MetadataEditor({
           value={favicon}
           onChange={(e) => setFavicon(e.target.value)}
           placeholder="meta/favicon.ico"
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
         />
         <p className="text-xs text-neutral-400">
           Relative path to the favicon. Resolved via the asset seed URL.
@@ -150,7 +150,7 @@ export default function MetadataEditor({
           value={analyticsId}
           onChange={(e) => setAnalyticsId(e.target.value)}
           placeholder="G-XXXXXXXXXX or plausible domain"
-          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#076bff] focus:outline-none"
+          className="w-full rounded-lg border border-neutral-200 bg-white px-3 py-2.5 text-sm text-neutral-900 focus:border-[#3580f9] focus:outline-none"
         />
         <p className="text-xs text-neutral-400">
           Google Analytics measurement ID or Plausible domain. Leave empty to
@@ -163,7 +163,7 @@ export default function MetadataEditor({
         <button
           onClick={handleSave}
           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"
+          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 Metadata"}
         </button>

package/components/admin/PublishToggle.tsx

@@ -96,7 +96,7 @@ export default function PublishToggle(props: PublishToggleProps) {
           cursor: "pointer",
           whiteSpace: "nowrap",
           transition: "background-color 150ms, color 150ms",
-          backgroundColor: isDraft ? "#f59e0b" : "transparent",
+          backgroundColor: isDraft ? "#d97706" : "transparent",
           color: isDraft ? "#fff" : "#a3a3a3",
           ...(busy ? { opacity: 0.5 } : {}),
         }}
@@ -118,7 +118,7 @@ export default function PublishToggle(props: PublishToggleProps) {
           cursor: "pointer",
           whiteSpace: "nowrap",
           transition: "background-color 150ms, color 150ms",
-          backgroundColor: !isDraft ? "#10b981" : "transparent",
+          backgroundColor: !isDraft ? "#059669" : "transparent",
           color: !isDraft ? "#fff" : "#a3a3a3",
           ...(busy ? { opacity: 0.5 } : {}),
         }}

package/components/admin/nav-builder/NavBuilder.tsx

@@ -220,7 +220,7 @@ export default function NavBuilder({
             className={`px-4 py-1.5 text-[11px] font-medium rounded-lg transition-all ${
               saving || !hasChanges
                 ? "bg-white/40 text-neutral-400 cursor-not-allowed"
-                : "bg-white text-[#076bff] shadow-sm hover:shadow-md"
+                : "bg-white text-[#3580f9] shadow-sm hover:shadow-md"
             }`}
           >
             {saving ? "Saving..." : "Save"}

package/components/admin/nav-builder/NavBuilderGrid.tsx

@@ -87,7 +87,7 @@ function DroppableCell({
     <div ref={setNodeRef} style={{ gridColumn: column, gridRow: 1 }}>
       <NavGridCell column={column} onAddItem={onAddItem} />
       {isDragOver && (
-        <div className="absolute inset-0 rounded-lg ring-2 ring-[#076bff] bg-[#076bff]/10 pointer-events-none" />
+        <div className="absolute inset-0 rounded-lg ring-2 ring-[#3580f9] bg-[#3580f9]/10 pointer-events-none" />
       )}
     </div>
   );
@@ -286,7 +286,7 @@ export default function NavBuilderGrid({
           {/* Helper hints */}
           <div className="mt-4 flex gap-4 text-[10px] text-neutral-400">
             <span>
-              <span className="text-[#076bff]">+</span> Click empty column to add
+              <span className="text-[#3580f9]">+</span> Click empty column to add
             </span>
             <span>
               <span className="text-neutral-500">&#x2807;</span> Drag to move
@@ -301,7 +301,7 @@ export default function NavBuilderGrid({
         <DragOverlay>
           {activeItem ? (
             <div
-              className="h-14 flex items-center px-3 gap-2 rounded-lg ring-2 ring-[#076bff] bg-white shadow-xl"
+              className="h-14 flex items-center px-3 gap-2 rounded-lg ring-2 ring-[#3580f9] bg-white shadow-xl"
               style={{ width: 120, opacity: 0.9 }}
             >
               <div className="text-xs font-mono text-neutral-900 uppercase tracking-wider truncate">

package/components/admin/nav-builder/NavGridCell.tsx

@@ -1,48 +1,48 @@
-"use client";
-
-import { useState } from "react";
-
-interface NavGridCellProps {
-  column: number;
-  onAddItem: (column: number) => void;
-}
-
-export default function NavGridCell({ column, onAddItem }: NavGridCellProps) {
-  const [hovered, setHovered] = useState(false);
-
-  return (
-    <div
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-      onClick={(e) => {
-        e.stopPropagation();
-        onAddItem(column);
-      }}
-      className={`h-14 flex items-center justify-center cursor-pointer transition-all rounded-lg border border-dashed ${
-        hovered
-          ? "border-[#076bff]/50 bg-[#076bff]/[0.03]"
-          : "border-neutral-200 bg-transparent"
-      }`}
-      data-nav-cell={column}
-    >
-      <div
-        className={`flex flex-col items-center gap-0.5 transition-all ${
-          hovered ? "text-[#076bff]" : "text-neutral-300"
-        }`}
-        style={{
-          opacity: hovered ? 1 : 0.5,
-          transform: hovered ? "scale(1)" : "scale(0.9)",
-        }}
-      >
-        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
-          <path
-            d="M8 3v10M3 8h10"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-          />
-        </svg>
-      </div>
-    </div>
-  );
-}
+"use client";
+
+import { useState } from "react";
+
+interface NavGridCellProps {
+  column: number;
+  onAddItem: (column: number) => void;
+}
+
+export default function NavGridCell({ column, onAddItem }: NavGridCellProps) {
+  const [hovered, setHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      onClick={(e) => {
+        e.stopPropagation();
+        onAddItem(column);
+      }}
+      className={`h-14 flex items-center justify-center cursor-pointer transition-all rounded-lg border border-dashed ${
+        hovered
+          ? "border-[#3580f9]/50 bg-[#3580f9]/[0.03]"
+          : "border-neutral-200 bg-transparent"
+      }`}
+      data-nav-cell={column}
+    >
+      <div
+        className={`flex flex-col items-center gap-0.5 transition-all ${
+          hovered ? "text-[#3580f9]" : "text-neutral-300"
+        }`}
+        style={{
+          opacity: hovered ? 1 : 0.5,
+          transform: hovered ? "scale(1)" : "scale(0.9)",
+        }}
+      >
+        <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M8 3v10M3 8h10"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}

package/components/admin/nav-builder/NavGridItem.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useCallback, useEffect } from "react";
 import type { NavItem } from "../../../lib/sanity/types";
 import { TOTAL_COLUMNS, getMaxSpan } from "./nav-builder-utils";
+import { BubbleTooltip } from "../../builder/BubbleIcons";
 
 interface NavGridItemProps {
   item: NavItem;
@@ -94,7 +95,7 @@ export default function NavGridItem({
       }}
       className={`h-14 relative flex items-center px-3 gap-2 cursor-pointer rounded-lg transition-all border ${
         isSelected
-          ? "border-[#076bff] bg-[#076bff]/5 shadow-sm"
+          ? "border-[#3580f9] bg-[#3580f9]/5 shadow-sm"
           : hovered
           ? "border-neutral-300 bg-neutral-50"
           : "border-neutral-200 bg-white"
@@ -141,7 +142,7 @@ export default function NavGridItem({
         <div
           className="absolute -top-2 -right-2 text-[9px] font-semibold px-1.5 py-0 rounded text-white"
           style={{
-            background: isSelected ? "#076bff" : "#a3a3a3",
+            background: isSelected ? "#3580f9" : "#a3a3a3",
           }}
         >
           {item.column_span}/{TOTAL_COLUMNS}
@@ -155,8 +156,8 @@ export default function NavGridItem({
             e.stopPropagation();
             onDelete(item._key);
           }}
-          className="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors shadow-sm"
-          title="Remove item"
+          className="group/bb absolute -top-2 -left-2 w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center hover:bg-red-600 transition-colors shadow-sm"
+          aria-label="Remove item"
         >
           <svg width="10" height="10" viewBox="0 0 10 10">
             <path
@@ -166,6 +167,7 @@ export default function NavGridItem({
               strokeLinecap="round"
             />
           </svg>
+          <BubbleTooltip>Remove item</BubbleTooltip>
         </button>
       )}
 
@@ -175,9 +177,9 @@ export default function NavGridItem({
         className="absolute -right-1 top-1/2 -translate-y-1/2 w-2 h-6 rounded cursor-col-resize transition-all"
         style={{
           background: resizing
-            ? "#076bff"
+            ? "#3580f9"
             : isSelected
-            ? "#076bff"
+            ? "#3580f9"
             : hovered
             ? "#a3a3a3"
             : "transparent",