@morphika/andami 0.5.2 → 0.5.4

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

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

@@ -12,6 +12,7 @@ import {
   StyleIcon,
   BackgroundIcon,
 } from "../../builder/editors/section-icons";
+import { BubbleTooltip } from "../../builder/BubbleIcons";
 
 // ── Nav viewport type for responsive overrides ──
 export type NavViewport = "desktop" | "tablet" | "phone";
@@ -329,12 +330,13 @@ export function ColorInput({
       {value && (
         <button
           onClick={() => onChange("")}
-          className="text-neutral-400 hover:text-neutral-600 shrink-0"
-          title="Clear"
+          className="group/bb relative text-neutral-400 hover:text-neutral-600 shrink-0"
+          aria-label="Clear"
         >
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
             <path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
           </svg>
+          <BubbleTooltip>Clear</BubbleTooltip>
         </button>
       )}
     </div>
@@ -407,8 +409,8 @@ export function ViewportSwitcher({
           <button
             key={opt.value}
             onClick={() => onChange(opt.value)}
-            title={opt.label}
-            className={`flex-1 px-2 py-[5px] text-[10px] font-medium rounded-md transition-all flex items-center justify-center gap-1 ${
+            aria-label={opt.label}
+            className={`group/bb relative flex-1 px-2 py-[5px] text-[10px] font-medium rounded-md transition-all flex items-center justify-center gap-1 ${
               isActive
                 ? isNonDesktop
                   ? "text-[#3580f9] bg-blue-50 shadow-[0_1px_2px_rgba(53, 128, 249,0.08)]"
@@ -417,6 +419,7 @@ export function ViewportSwitcher({
             }`}
           >
             {opt.icon}
+            <BubbleTooltip>{opt.label}</BubbleTooltip>
           </button>
         );
       })}
@@ -501,12 +504,13 @@ export function ResponsiveField({
       {isOverridden && onReset && (
         <button
           onClick={onReset}
-          className="shrink-0 text-[#3580f9]/60 hover:text-[#3580f9] transition-colors"
-          title="Reset to desktop value"
+          className="group/bb relative shrink-0 text-[#3580f9]/60 hover:text-[#3580f9] transition-colors"
+          aria-label="Reset to desktop value"
         >
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <polyline points="1 4 1 10 7 10" /><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
           </svg>
+          <BubbleTooltip>Reset to desktop value</BubbleTooltip>
         </button>
       )}
     </div>

package/components/admin/styles/ColorsEditor.tsx

@@ -5,6 +5,7 @@ import ColorPicker, { isValidHex } from "../../../components/builder/ColorPicker
 import { invalidatePaletteCache } from "../../../components/builder/ColorSwatchPicker";
 import type { SiteStyles, ColorSwatch } from "../../../lib/sanity/types";
 import { Section, SaveButton } from "./shared";
+import { BubbleTooltip } from "../../builder/BubbleIcons";
 
 function getContrastColor(hex: string): string {
   if (!isValidHex(hex)) return "#000";
@@ -119,14 +120,14 @@ export function ColorsEditor({
                       <div className="absolute inset-0 bg-black/15 flex items-center justify-center gap-1.5">
                         <button
                           onClick={(e) => { e.stopPropagation(); setEditingIndex(i); setPickerOpen(true); }}
-                          className="w-6 h-6 rounded-full bg-white/90 flex items-center justify-center text-[11px] cursor-pointer hover:bg-white transition-colors border-none"
-                          title="Edit color"
-                        >✎</button>
+                          className="group/bb relative w-6 h-6 rounded-full bg-white/90 flex items-center justify-center text-[11px] cursor-pointer hover:bg-white transition-colors border-none"
+                          aria-label="Edit color"
+                        >✎<BubbleTooltip>Edit color</BubbleTooltip></button>
                         <button
                           onClick={(e) => { e.stopPropagation(); removeSwatch(i); }}
-                          className="w-6 h-6 rounded-full bg-white/90 flex items-center justify-center text-[13px] text-red-500 cursor-pointer hover:bg-white transition-colors border-none"
-                          title="Remove"
-                        >×</button>
+                          className="group/bb relative w-6 h-6 rounded-full bg-white/90 flex items-center justify-center text-[13px] text-red-500 cursor-pointer hover:bg-white transition-colors border-none"
+                          aria-label="Remove"
+                        >×<BubbleTooltip>Remove</BubbleTooltip></button>
                       </div>
                     )}
                   </div>

package/components/admin/styles/FontsEditor.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { csrfHeaders } from "../../../lib/csrf-client";
 import type { FontFamily, FontVariant } from "../../../lib/sanity/types";
 import { Section, SaveButton } from "./shared";
+import { BubbleTooltip } from "../../builder/BubbleIcons";
 
 export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; onSave: (fonts: FontFamily[]) => void; saving: boolean }) {
   const [localFonts, setLocalFonts] = useState<FontFamily[]>(fonts);
@@ -204,8 +205,9 @@ export function FontsEditor({ fonts, onSave, saving }: { fonts: FontFamily[]; on
                     <option value="normal">Normal</option>
                     <option value="italic">Italic</option>
                   </select>
-                  <span className="text-neutral-400 truncate flex-1" title={v.original_filename}>
+                  <span className="group/bb relative text-neutral-400 truncate flex-1" aria-label={v.original_filename}>
                     {v.original_filename}
+                    <BubbleTooltip>{v.original_filename}</BubbleTooltip>
                   </span>
                   {!font.is_builtin && (
                     <button

package/components/blocks/CoverSectionRenderer.tsx

@@ -21,7 +21,7 @@ import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
 import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
 import BlockRenderer from "./BlockRenderer";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
-import { getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import { getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, getBackgroundStyles, getBorderStyles } from "../../lib/builder/layout-styles";
 import { assetUrl } from "../../lib/assets";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 import { normalizeRowHeights } from "../../lib/builder/store-cover";
@@ -305,6 +305,11 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
           const alignSelf = rowAlign === "center" ? "center" : rowAlign === "end" ? "end" : "start";
           const colJustify = getColumnVerticalAlign(col.blocks || []);
 
+          const colLayoutStyles = {
+            ...getBackgroundStyles(col, process.env.NEXT_PUBLIC_ASSET_BASE_URL),
+            ...getBorderStyles(col),
+          };
+
           const columnContent = (
             <div
               key={col._key}
@@ -319,6 +324,7 @@ export default function CoverSectionRenderer({ section, pageEnterAnimation }: Co
                 height: "100%",
                 minWidth: 0,
                 overflow: "hidden",
+                ...colLayoutStyles,
               }}
             >
               {(col.blocks || []).map((block) => {

package/components/blocks/SectionV2Renderer.tsx

@@ -24,7 +24,7 @@ import type { EnterAnimationConfig } from "../../lib/animation/enter-types";
 import { resolveEnterAnimation } from "../../lib/animation/enter-resolve";
 import BlockRenderer from "./BlockRenderer";
 import EnterAnimationWrapper from "./EnterAnimationWrapper";
-import { getRowLayoutStyles, getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, hexToRgba } from "../../lib/builder/layout-styles";
+import { getRowLayoutStyles, getBlockAlignmentStyles, hasBlockAlignment, getColumnVerticalAlign, getBackgroundStyles, getBorderStyles, hexToRgba } from "../../lib/builder/layout-styles";
 import { parseColorField, colorToOverrideRule, borderColorToOverrideRule } from "../../lib/color-utils";
 import { BREAKPOINTS } from "../../lib/builder/constants";
 
@@ -261,6 +261,12 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
           // Column-level vertical alignment from blocks' align_v settings
           const colJustify = getColumnVerticalAlign(col.blocks || []);
 
+          // Column-level background + border (desktop-only).
+          const colLayoutStyles = {
+            ...getBackgroundStyles(col, process.env.NEXT_PUBLIC_ASSET_BASE_URL),
+            ...getBorderStyles(col),
+          };
+
           const columnContent = (
             <div
               key={col._key}
@@ -275,6 +281,7 @@ export default function SectionV2Renderer({ section, pageEnterAnimation }: Secti
                 height: "100%",
                 minWidth: 0,
                 overflow: "hidden",
+                ...colLayoutStyles,
               }}
             >
               {(col.blocks || []).map((block) => {

package/components/builder/BubbleIcons.tsx

@@ -88,3 +88,17 @@ export function BubbleTooltip({ children }: { children: ReactNode }) {
     </span>
   );
 }
+
+/** Same styling as BubbleTooltip but positioned ABOVE the trigger.
+ *  For bottom-anchored toolbars (e.g. the floating canvas toolbar). */
+export function BubbleTooltipAbove({ children }: { children: ReactNode }) {
+  return (
+    <span
+      role="tooltip"
+      className="pointer-events-none absolute left-1/2 bottom-full z-50 mb-1.5 whitespace-nowrap rounded-md border border-white/10 bg-[#2a2d33] px-2.5 py-1.5 text-[11px] font-medium text-white shadow-lg opacity-0 transition-[opacity,margin] duration-150 ease-out group-hover/bb:opacity-100 group-hover/bb:mb-3"
+      style={{ transform: "translateX(-50%)" }}
+    >
+      {children}
+    </span>
+  );
+}

package/components/builder/CanvasMinimap.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
 import { DEVICE_WIDTHS } from "../../lib/builder/types";
+import { BubbleTooltipAbove } from "./BubbleIcons";
 
 // ============================================
 // CanvasMinimap — Shows viewport position in canvas
@@ -121,80 +122,96 @@ export default function CanvasMinimap({
     return (
       <button
         onClick={() => setIsCollapsed(false)}
-        className="absolute bottom-6 right-4 z-40 w-8 h-8 flex items-center justify-center rounded-lg bg-[#1a1a1a]/80 text-white/60 hover:text-white hover:bg-[#1a1a1a] transition-colors shadow-lg backdrop-blur-sm"
-        title="Show minimap"
+        className="group/bb absolute bottom-6 right-4 z-40 w-8 h-8 flex items-center justify-center rounded-lg bg-[#1a1a1a]/80 text-white/60 hover:text-white hover:bg-[#1a1a1a] transition-colors shadow-lg backdrop-blur-sm"
         aria-label="Show minimap"
       >
         <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
           <rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
           <rect x="3" y="3" width="4" height="3" rx="0.5" stroke="currentColor" strokeWidth="0.8" opacity="0.6" />
         </svg>
+        <BubbleTooltipAbove>Show minimap</BubbleTooltipAbove>
       </button>
     );
   }
 
   return (
     <div
-      className="absolute bottom-6 right-4 z-40 rounded-lg overflow-hidden shadow-lg backdrop-blur-sm"
+      className="absolute bottom-6 right-4 z-40 rounded-lg overflow-hidden shadow-xl backdrop-blur-sm"
       style={{
         width: MINIMAP_WIDTH,
-        height: MINIMAP_HEIGHT,
-        backgroundColor: "rgba(26, 26, 26, 0.85)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        backgroundColor: "rgba(26, 26, 26, 0.92)",
+        border: "1px solid rgba(255, 255, 255, 0.08)",
         userSelect: "none",
       }}
-      onMouseDown={handleMinimapMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseUp}
     >
-      {/* Close/collapse button */}
-      <button
-        onClick={(e) => {
-          e.stopPropagation();
-          setIsCollapsed(true);
+      {/* Header — label + close button. Matches the toolbar's dark pill aesthetic. */}
+      <div
+        className="flex items-center justify-between px-2 py-1"
+        style={{
+          borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
+          background: "rgba(255, 255, 255, 0.02)",
         }}
-        className="absolute top-1 right-1 z-50 w-4 h-4 flex items-center justify-center rounded text-white/40 hover:text-white/80 transition-colors"
-        title="Hide minimap"
-        aria-label="Hide minimap"
       >
-        <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
-          <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-        </svg>
-      </button>
-
-      {/* Device frame outlines */}
-      {frames.map((f, i) => (
+        <span className="text-[9px] font-semibold tracking-[0.08em] uppercase text-white/45">
+          Overview
+        </span>
+        <button
+          onClick={() => setIsCollapsed(true)}
+          className="group/bb relative w-4 h-4 flex items-center justify-center rounded text-white/40 hover:text-white/90 hover:bg-white/10 transition-colors"
+          aria-label="Hide minimap"
+        >
+          <svg width="8" height="8" viewBox="0 0 8 8" fill="none">
+            <path d="M1 1L7 7M7 1L1 7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+          </svg>
+          <BubbleTooltipAbove>Hide minimap</BubbleTooltipAbove>
+        </button>
+      </div>
+
+      {/* Content area — all pan/drag interactions live here (not the header). */}
+      <div
+        className="relative"
+        style={{
+          width: MINIMAP_WIDTH,
+          height: MINIMAP_HEIGHT,
+        }}
+        onMouseDown={handleMinimapMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        {/* Device frame outlines */}
+        {frames.map((f, i) => (
+          <div
+            key={i}
+            className="absolute"
+            style={{
+              left: f.x,
+              top: 8 * scale,
+              width: f.w,
+              height: (contentEstimateHeight - 40) * scale,
+              border: `1px solid ${f.active ? "rgba(53, 128, 249, 0.6)" : "rgba(255, 255, 255, 0.15)"}`,
+              borderRadius: 2,
+              backgroundColor: f.active ? "rgba(53, 128, 249, 0.08)" : "rgba(255, 255, 255, 0.03)",
+            }}
+          />
+        ))}
+
+        {/* Viewport indicator */}
         <div
-          key={i}
           className="absolute"
           style={{
-            left: f.x,
-            top: 8 * scale,
-            width: f.w,
-            height: (contentEstimateHeight - 40) * scale,
-            border: `1px solid ${f.active ? "rgba(53, 128, 249, 0.6)" : "rgba(255, 255, 255, 0.15)"}`,
+            left: Math.max(0, viewX),
+            top: Math.max(0, viewY),
+            width: Math.min(viewW, MINIMAP_WIDTH),
+            height: Math.min(viewH, MINIMAP_HEIGHT),
+            border: "1.5px solid rgba(237, 56, 33, 0.7)",
             borderRadius: 2,
-            backgroundColor: f.active ? "rgba(53, 128, 249, 0.08)" : "rgba(255, 255, 255, 0.03)",
+            backgroundColor: "rgba(237, 56, 33, 0.06)",
+            cursor: isDragging ? "grabbing" : "grab",
+            pointerEvents: "none",
           }}
         />
-      ))}
-
-      {/* Viewport indicator */}
-      <div
-        className="absolute"
-        style={{
-          left: Math.max(0, viewX),
-          top: Math.max(0, viewY),
-          width: Math.min(viewW, MINIMAP_WIDTH),
-          height: Math.min(viewH, MINIMAP_HEIGHT),
-          border: "1.5px solid rgba(237, 56, 33, 0.7)",
-          borderRadius: 2,
-          backgroundColor: "rgba(237, 56, 33, 0.06)",
-          cursor: isDragging ? "grabbing" : "grab",
-          pointerEvents: "none",
-        }}
-      />
+      </div>
     </div>
   );
 }

package/components/builder/CanvasToolbar.tsx

@@ -2,6 +2,7 @@
 
 import { useRef, useState, useEffect, useCallback } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
+import { BubbleTooltipAbove } from "./BubbleIcons";
 
 // ============================================
 // CanvasToolbar — Floating mini toolbar
@@ -72,66 +73,68 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
   const zoomPercent = Math.round(zoom * 100);
 
   return (
-    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-px rounded-full bg-[#1a1a1a] shadow-xl px-1 py-1"
+    <div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-40 flex items-center gap-0.5 rounded-full bg-[#1a1a1a] shadow-xl px-1.5 py-1.5"
       style={{ userSelect: "none" }}
     >
-      {/* Select tool — Figma-style filled cursor */}
+      {/* Select tool — Figma-style filled cursor.
+          Active state uses the app's primary blue so selection signals
+          match the rest of the builder (block/column accents). */}
       <button
         onClick={() => setCanvasTool("select")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
+        className={`group/bb relative flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "select"
-            ? "bg-white/15 text-white"
+            ? "bg-[#3580f9] text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
         }`}
-        title="Select tool (V)"
         aria-label="Select tool"
       >
         <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round">
           <path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z" />
         </svg>
+        <BubbleTooltipAbove>Select <span className="ml-1 text-white/55">V</span></BubbleTooltipAbove>
       </button>
 
-      {/* Hand tool — Figma-style */}
+      {/* Hand tool — tabler hand-stop (outline) */}
       <button
         onClick={() => setCanvasTool("hand")}
-        className={`flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
+        className={`group/bb relative flex items-center justify-center w-8 h-8 rounded-full transition-colors ${
           tool === "hand"
-            ? "bg-white/15 text-white"
+            ? "bg-[#3580f9] text-white"
             : "text-neutral-400 hover:text-white hover:bg-white/10"
         }`}
-        title="Hand tool (H)"
         aria-label="Hand tool"
       >
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M18 11V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2" />
-          <path d="M14 10V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v2" />
-          <path d="M10 10.5V6a2 2 0 0 0-2-2a2 2 0 0 0-2 2v8" />
-          <path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15" />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" />
+          <path d="M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" />
+          <path d="M14 5.5a1.5 1.5 0 0 1 3 0v6.5" />
+          <path d="M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" />
         </svg>
+        <BubbleTooltipAbove>Hand <span className="ml-1 text-white/55">H</span></BubbleTooltipAbove>
       </button>
 
       {/* Divider */}
-      <div className="w-px h-5 bg-white/20 mx-1" />
+      <div className="w-px h-5 bg-white/15 mx-2" />
 
       {/* Zoom out */}
       <button
         onClick={handleZoomOut}
-        className="flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
-        title="Zoom out (Ctrl + −)"
+        className="group/bb relative flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
         aria-label="Zoom out"
       >
         −
+        <BubbleTooltipAbove>Zoom out <span className="ml-1 text-white/55">Ctrl −</span></BubbleTooltipAbove>
       </button>
 
       {/* Zoom percentage (clickable dropdown) */}
       <div className="relative" ref={presetsRef}>
         <button
           onClick={() => setShowPresets((v) => !v)}
-          className="flex items-center justify-center min-w-[48px] h-8 text-white text-[11px] font-medium hover:bg-white/10 rounded-md transition-colors px-1"
-          title="Click to select zoom level"
+          className="group/bb relative flex items-center justify-center min-w-[48px] h-8 text-white text-[11px] font-medium hover:bg-white/10 rounded-md transition-colors px-1"
           aria-label="Select zoom level"
         >
           {zoomPercent}%
+          <BubbleTooltipAbove>Zoom level</BubbleTooltipAbove>
         </button>
 
         {showPresets && (
@@ -156,40 +159,27 @@ export default function CanvasToolbar({ viewportRef, onAnimatedAction }: CanvasT
       {/* Zoom in */}
       <button
         onClick={handleZoomIn}
-        className="flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
-        title="Zoom in (Ctrl + +)"
+        className="group/bb relative flex items-center justify-center w-7 h-8 text-neutral-400 hover:text-white transition-colors text-sm"
         aria-label="Zoom in"
       >
         +
+        <BubbleTooltipAbove>Zoom in <span className="ml-1 text-white/55">Ctrl +</span></BubbleTooltipAbove>
       </button>
 
       {/* Divider */}
-      <div className="w-px h-5 bg-white/20 mx-1" />
+      <div className="w-px h-5 bg-white/15 mx-2" />
 
-      {/* Fit */}
+      {/* Fit — tabler zoom (magnifying glass, outline) */}
       <button
         onClick={handleFit}
-        className="flex items-center justify-center w-8 h-8 rounded-full text-neutral-400 hover:text-white hover:bg-white/10 transition-colors"
-        title="Zoom to fit (Ctrl + 0)"
+        className="group/bb relative flex items-center justify-center w-8 h-8 rounded-full text-neutral-400 hover:text-white hover:bg-white/10 transition-colors"
         aria-label="Zoom to fit"
       >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
-          <rect
-            x="2"
-            y="2"
-            width="10"
-            height="10"
-            rx="1.5"
-            stroke="currentColor"
-            strokeWidth="1.5"
-          />
-          <path
-            d="M5 2V0M9 2V0M5 14V12M9 14V12M0 5H2M0 9H2M12 5H14M12 9H14"
-            stroke="currentColor"
-            strokeWidth="1"
-            opacity="0.5"
-          />
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
+          <path d="M21 21l-6 -6" />
         </svg>
+        <BubbleTooltipAbove>Zoom to fit <span className="ml-1 text-white/55">Ctrl 0</span></BubbleTooltipAbove>
       </button>
     </div>
   );