@morphika/andami 0.5.2 → 0.5.4

package/components/builder/SectionEditorBar.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback, useRef, useEffect } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
 import { getCsrfToken } from "../../lib/csrf-client";
 import { ADMIN_ACCENT } from "../../lib/builder/constants";
+import { BubbleTooltip } from "./BubbleIcons";
 
 // ============================================
 // SectionEditorBar — Top bar for custom section editor mode
@@ -134,10 +135,11 @@ export default function SectionEditorBar({ onSaveComplete }: SectionEditorBarPro
             <span className="text-[#444]">/</span>
             <button
               onClick={handleCancel}
-              className="text-[#666] hover:text-[#aaa] transition-colors cursor-pointer truncate max-w-[140px]"
-              title={`Back to ${pageTitle || "page"}`}
+              className="group/bb relative text-[#666] hover:text-[#aaa] transition-colors cursor-pointer truncate max-w-[140px]"
+              aria-label={`Back to ${pageTitle || "page"}`}
             >
               {pageTitle || "Page"}
+              <BubbleTooltip>{`Back to ${pageTitle || "page"}`}</BubbleTooltip>
             </button>
             <span className="text-[#444]">/</span>
             <span className="text-[#999] font-medium">

package/components/builder/SectionTypePicker.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from "react";
 import { SECTION_TYPE_REGISTRY, type SectionBlockType } from "../../lib/builder/types";
 import type { CustomSectionListItem } from "../../lib/sanity/types";
 import { SECTION_CARD_ICONS } from "./SectionCardIcons";
+import { BubbleTooltip } from "./BubbleIcons";
 
 // ── V2 layout presets (use cascade preset names) ──
 type V2Preset = "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3";
@@ -212,8 +213,8 @@ export default function SectionTypePicker({
                     }
                     onClose();
                   }}
-                  className="rounded-xl border border-neutral-200 bg-white p-3 hover:border-[#3580f9] hover:bg-[#3580f9]/5 transition-colors group shadow-sm"
-                  title={label}
+                  className="group/bb relative rounded-xl border border-neutral-200 bg-white p-3 hover:border-[#3580f9] hover:bg-[#3580f9]/5 transition-colors group shadow-sm"
+                  aria-label={label}
                 >
                   <div className="flex gap-1 h-6">
                     {widths.map((w, i) => (
@@ -227,6 +228,7 @@ export default function SectionTypePicker({
                   <p className="text-xs text-neutral-500 mt-1.5 group-hover:text-neutral-700">
                     {label}
                   </p>
+                  <BubbleTooltip>{label}</BubbleTooltip>
                 </button>
               ))}
             </div>

package/components/builder/SectionV2Column.tsx

@@ -9,7 +9,11 @@ import {
 import { useBuilderStore } from "../../lib/builder/store";
 import { makeBlockId, makeColumnDroppableId } from "./DndWrapper";
 import type { SectionColumn, ContentBlock, PageSectionV2 } from "../../lib/sanity/types";
-import { getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import {
+  getColumnVerticalAlign,
+  getBackgroundStyles,
+  getBorderStyles,
+} from "../../lib/builder/layout-styles";
 import { isSectionBlockType } from "../../lib/builder/types";
 import { BUILDER_BLUE } from "../../lib/builder/constants";
 import { BubbleTooltip, CloseIcon, DragDropIcon } from "./BubbleIcons";
@@ -230,6 +234,12 @@ export default function SectionV2Column({
   // Column-level vertical alignment from blocks' align_v settings
   const colJustify = getColumnVerticalAlign(column.blocks || []);
 
+  // Column-level background + border (desktop-only — no responsive overrides).
+  const columnLayoutStyles: React.CSSProperties = {
+    ...getBackgroundStyles(column),
+    ...getBorderStyles(column),
+  };
+
   // ---- Preview mode ----
   if (previewMode) {
     return (
@@ -244,6 +254,7 @@ export default function SectionV2Column({
           ...(colJustify ? { justifyContent: colJustify } : {}),
           height: "100%",
           minHeight: 0,
+          ...columnLayoutStyles,
         }}
       >
         <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
@@ -280,6 +291,7 @@ export default function SectionV2Column({
         transition: isDraggedColumn
           ? "none"
           : "opacity 150ms, box-shadow 150ms, transform 150ms ease-out",
+        ...columnLayoutStyles,
       }}
       ref={setBlockDropRef}
       onClick={handleClick}

package/components/builder/SettingsPanel.tsx

@@ -25,6 +25,7 @@ import { useBuilderStore } from "../../lib/builder/store";
 import { useSettingsPanelSelection } from "./settings-panel/useSettingsPanelSelection";
 import { AnimationTab } from "./settings-panel/AnimationTab";
 import { ColumnV2AnimationTab } from "./settings-panel/ColumnV2AnimationTab";
+import { ColumnV2LayoutTab } from "./settings-panel/ColumnV2LayoutTab";
 import { CustomSectionSettings } from "./settings-panel/CustomSectionSettings";
 import {
   BlockLayoutTab,
@@ -40,6 +41,7 @@ import {
   CoverSectionSettings,
 } from "./settings-panel";
 import CoverSectionLayoutTab from "./settings-panel/CoverSectionLayoutTab";
+import { BubbleTooltip } from "./BubbleIcons";
 
 type SettingsTab = "settings" | "layout" | "seo" | "animation";
 
@@ -75,11 +77,11 @@ export default function SettingsPanel() {
     }
   }, [selectionKey]);
 
-  // Columns have Settings + Animation — fall back if Layout or SEO tab was active
+  // Columns have Settings + Layout + Animation — fall back if SEO tab was active
   // Parallax group header has only Settings — fall back if Layout/SEO or Animation tab was active
   // Page level has Settings + SEO + Animation — fall back if Layout tab was active
   useEffect(() => {
-    if (isColumnOnly && (activeTab === "layout" || activeTab === "seo")) {
+    if (isColumnOnly && activeTab === "seo") {
       setActiveTab("settings");
     }
     if (isParallaxGroupOnly && (activeTab === "layout" || activeTab === "seo" || activeTab === "animation")) {
@@ -134,13 +136,14 @@ export default function SettingsPanel() {
             return (
               <button
                 onClick={onDelete}
-                className="p-1.5 rounded-md hover:bg-red-500/20 transition-colors group"
-                title={deleteTitle}
+                className="group/bb relative p-1.5 rounded-md hover:bg-red-500/20 transition-colors"
+                aria-label={deleteTitle}
               >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-black/40 group-hover:text-[var(--admin-error)] transition-colors">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-black/40 group-hover/bb:text-[var(--admin-error)] transition-colors">
                   <polyline points="3 6 5 6 21 6" />
                   <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
                 </svg>
+                <BubbleTooltip>{deleteTitle}</BubbleTooltip>
               </button>
             );
           })()}
@@ -204,11 +207,6 @@ export default function SettingsPanel() {
             });
           }
         }
-        // Columns: remove Layout tab (keep Settings + Animation)
-        if (isColumnOnly) {
-          const layoutIdx = tabs.findIndex((t) => t.id === "layout");
-          if (layoutIdx >= 0) tabs.splice(layoutIdx, 1);
-        }
         // Parallax group header: only Settings (no Layout, no Animation)
         if (isParallaxGroupOnly) {
           const layoutIdx = tabs.findIndex((t) => t.id === "layout");
@@ -268,9 +266,11 @@ export default function SettingsPanel() {
         {selectedParallaxGroup && !selectedParallaxSlide && !selectedBlock ? (
           <ParallaxGroupSettings group={selectedParallaxGroup} />
         ) : selectedParallaxSlide && selectedColumnV2 && !selectedBlock ? (
-          // Column inside a parallax slide — Settings or Animation tab
+          // Column inside a parallax slide — Settings / Layout / Animation
           activeTab === "animation" ? (
             <ColumnV2AnimationTab section={selectedParallaxSlide.virtualSection} column={selectedColumnV2} />
+          ) : activeTab === "layout" ? (
+            <ColumnV2LayoutTab section={selectedParallaxSlide.virtualSection} column={selectedColumnV2} />
           ) : (
             <ColumnV2Settings section={selectedParallaxSlide.virtualSection} column={selectedColumnV2} />
           )
@@ -320,15 +320,19 @@ export default function SettingsPanel() {
             <CoverSectionSettings section={selectedCoverSection} />
           )
         ) :
-        /* ---- V2 Section / Column / Block routing ---- */
+        /* ---- V2 / Cover Section / Column / Block routing ---- */
         /* BUG-V2-003 fix: When a block inside a V2 column is selected, show BlockSettings
-            instead of ColumnV2Settings. Block selection takes priority over column. */
-        selectedColumnV2 && selectedSectionV2 && !selectedBlock ? (
-          // V2 Column selected (no block) — Settings or Animation tab
+            instead of ColumnV2Settings. Block selection takes priority over column.
+            Cover-column fix: use effectiveSectionV2 so columns inside a cover section
+            route to ColumnV2Settings instead of falling through to PageSettings. */
+        selectedColumnV2 && effectiveSectionV2 && !selectedBlock ? (
+          // V2 Column or Cover Section column selected (no block) — Settings / Layout / Animation
           activeTab === "animation" ? (
-            <ColumnV2AnimationTab section={selectedSectionV2} column={selectedColumnV2} />
+            <ColumnV2AnimationTab section={effectiveSectionV2} column={selectedColumnV2} />
+          ) : activeTab === "layout" ? (
+            <ColumnV2LayoutTab section={effectiveSectionV2} column={selectedColumnV2} />
           ) : (
-            <ColumnV2Settings section={selectedSectionV2} column={selectedColumnV2} />
+            <ColumnV2Settings section={effectiveSectionV2} column={selectedColumnV2} />
           )
         ) : selectedSectionV2 && !selectedBlock ? (
           // V2 Section selected — route by active tab

package/components/builder/SortableBlock.tsx

@@ -189,11 +189,11 @@ export default function SortableBlock({
               <>
                 <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
                 <span
-                  className="text-[10px] px-1 py-0.5"
+                  className="group/bb relative text-[10px] px-1 py-0.5"
                   style={{ color: "#3580f9" }}
-                  title={`Animation: ${block.enter_animation.preset}`}
                 >
                   ✦
+                  <BubbleTooltip>{`Animation: ${block.enter_animation.preset}`}</BubbleTooltip>
                 </span>
               </>
             )}

package/components/builder/SortableRow.tsx

@@ -264,7 +264,7 @@ export default function SortableRow({
         style={{
           transform: `translateX(calc(-100% - 8px)) scale(${Math.min(2, 1 / canvasZoom)})`,
           transformOrigin: "top right",
-          width: "90px",
+          width: "105px",
         }}
         onClick={(e) => {
           e.stopPropagation();
@@ -341,7 +341,6 @@ export default function SortableRow({
               style={{ color: "rgba(117, 0, 213, 0.6)" }}
               onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
               onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-              title={`Add ${addColumnLabel.toLowerCase()}`}
               aria-label={`Add ${addColumnLabel.toLowerCase()}`}
             >
               <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>+</span> {addColumnLabel}
@@ -356,7 +355,6 @@ export default function SortableRow({
             style={{ color: "rgba(117, 0, 213, 0.6)" }}
             onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
             onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-            title="Delete section"
             aria-label="Delete section"
           >
             <CloseIcon size={12} /> Delete
@@ -416,8 +414,7 @@ export default function SortableRow({
                 style={{ color: "rgba(117, 0, 213, 0.6)" }}
                 onMouseEnter={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "#7500d5"; }}
                 onMouseLeave={(e) => { if (!e.currentTarget.disabled) e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-                title={canAddRow ? "Add row" : "Cover supports up to 5 rows"}
-                aria-label="Add row"
+                aria-label={canAddRow ? "Add row" : "Cover supports up to 5 rows"}
               >
                 <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>+</span> Row
               </button>
@@ -517,7 +514,6 @@ export default function SortableRow({
                 style={{ color: "rgba(117, 0, 213, 0.6)" }}
                 onMouseEnter={(e) => { e.currentTarget.style.color = "#7500d5"; }}
                 onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(117, 0, 213, 0.6)"; }}
-                title="Add slide"
                 aria-label="Add slide"
               >
                 <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>+</span> Slide
@@ -531,10 +527,11 @@ export default function SortableRow({
       {bgColor !== "transparent" && isSelected && (
         <div className="absolute top-1 right-1 z-[5]" style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "top right" }}>
           <span
-            className="w-4 h-4 rounded-full border-2 border-white/50 block shadow-sm"
+            className="group/bb relative w-4 h-4 rounded-full border-2 border-white/50 block shadow-sm"
             style={{ backgroundColor: bgColor }}
-            title={`Background: ${bgColor}`}
-          />
+          >
+            <BubbleTooltip>{`Background: ${bgColor}`}</BubbleTooltip>
+          </span>
         </div>
       )}
 

package/components/builder/VirtualAssetGrid.tsx

@@ -15,6 +15,7 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import type { RegisteredAsset } from "../../lib/sanity/types";
 import { BREAKPOINTS } from "../../lib/builder/constants";
+import { BubbleTooltip } from "./BubbleIcons";
 
 // ============================================
 // Types
@@ -345,10 +346,10 @@ function AssetGridItem({
         {/* Thumbnail status badge — raster images only */}
         {isImageType(asset.extension) && asset.extension !== "svg" && (
           <div
-            className={`absolute bottom-1.5 right-1.5 w-4 h-4 rounded-full flex items-center justify-center backdrop-blur-sm ${
+            className={`group/bb absolute bottom-1.5 right-1.5 w-4 h-4 rounded-full flex items-center justify-center backdrop-blur-sm ${
               asset.has_thumbnail ? "bg-green-500/80" : "bg-amber-500/80"
             }`}
-            title={
+            aria-label={
               asset.has_thumbnail
                 ? "Thumbnail available"
                 : "No thumbnail — loading full resolution"
@@ -382,6 +383,11 @@ function AssetGridItem({
                 <circle cx="12" cy="16" r="0.5" fill="white" />
               </svg>
             )}
+            <BubbleTooltip>
+              {asset.has_thumbnail
+                ? "Thumbnail available"
+                : "No thumbnail — loading full resolution"}
+            </BubbleTooltip>
           </div>
         )}
       </div>

package/components/builder/asset-browser/R2BrowserContent.tsx

@@ -12,6 +12,7 @@ import { useR2Operations } from "./useR2Operations";
 import { useR2DragDrop } from "./useR2DragDrop";
 import { R2ContextMenu, type ContextMenuState } from "./R2ContextMenu";
 import { ADMIN_ACCENT, BUILDER_GREEN } from "../../../lib/builder/constants";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // R2 Browser — Composition shell
@@ -291,18 +292,19 @@ export function R2BrowserContent({
             ))}
           </div>
           <div className="flex items-center gap-2">
-            <button onClick={ops.openNewFolderInput} disabled={ops.actionLoading} className="inline-flex items-center gap-1.5 rounded-lg bg-neutral-100 px-3 py-1.5 text-[11px] text-neutral-700 font-medium uppercase tracking-wider hover:bg-neutral-200 transition-colors disabled:opacity-50" title="Create a new folder" type="button">
+            <button onClick={ops.openNewFolderInput} disabled={ops.actionLoading} className="group/bb relative inline-flex items-center gap-1.5 rounded-lg bg-neutral-100 px-3 py-1.5 text-[11px] text-neutral-700 font-medium uppercase tracking-wider hover:bg-neutral-200 transition-colors disabled:opacity-50" aria-label="Create a new folder" type="button">
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                 <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
                 <line x1="12" y1="11" x2="12" y2="17" /><line x1="9" y1="14" x2="15" y2="14" />
               </svg>
               New Folder
+              <BubbleTooltip>Create a new folder</BubbleTooltip>
             </button>
             <button
               onClick={() => ops.fileInputRef.current?.click()}
               disabled={uploading.some((u) => u.status === "uploading" || u.status === "registering")}
-              className="inline-flex items-center gap-1.5 rounded-lg bg-[#3580f9] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#3580f9]/90 transition-colors disabled:opacity-50"
-              title={`Upload files${currentFolder ? ` to ${currentFolder}` : ""}`}
+              className="group/bb relative inline-flex items-center gap-1.5 rounded-lg bg-[#3580f9] px-3 py-1.5 text-[11px] text-white font-medium uppercase tracking-wider hover:bg-[#3580f9]/90 transition-colors disabled:opacity-50"
+              aria-label={`Upload files${currentFolder ? ` to ${currentFolder}` : ""}`}
               type="button"
             >
               <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -311,6 +313,7 @@ export function R2BrowserContent({
                 <line x1="12" y1="3" x2="12" y2="15" />
               </svg>
               Upload
+              <BubbleTooltip>{`Upload files${currentFolder ? ` to ${currentFolder}` : ""}`}</BubbleTooltip>
             </button>
           </div>
         </div>
@@ -323,8 +326,9 @@ export function R2BrowserContent({
                 {u.status === "done" ? (
                   <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke={BUILDER_GREEN} strokeWidth="2.5"><polyline points="20 6 9 17 4 12" /></svg>
                 ) : u.status === "error" ? (
-                  <button onClick={() => onClearUploadError?.(u.id)} title="Dismiss">
+                  <button onClick={() => onClearUploadError?.(u.id)} className="group/bb relative" aria-label="Dismiss">
                     <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="2"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
+                    <BubbleTooltip>Dismiss</BubbleTooltip>
                   </button>
                 ) : (
                   <div className="w-3.5 h-3.5 border-2 border-[#3580f9] border-t-transparent rounded-full animate-spin" />

package/components/builder/color-picker/EyedropperButton.tsx

@@ -10,6 +10,7 @@
 
 import { useState, useCallback } from "react";
 import type { EyedropperButtonProps } from "./types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 /** Check if the EyeDropper API is available */
 function isEyeDropperSupported(): boolean {
@@ -39,17 +40,16 @@ export default function EyedropperButton({
     }
   }, [supported, picking, onColorPicked]);
 
+  const label = supported
+    ? "Pick a color from screen"
+    : "Eyedropper not supported in this browser";
   return (
     <button
       type="button"
       onClick={handleClick}
       disabled={!supported}
-      title={
-        supported
-          ? "Pick a color from screen"
-          : "Eyedropper not supported in this browser"
-      }
-      className={`w-10 h-10 rounded-[10px] border shrink-0 flex items-center justify-center transition-colors ${
+      aria-label={label}
+      className={`group/bb relative w-10 h-10 rounded-[10px] border shrink-0 flex items-center justify-center transition-colors ${
         supported
           ? "border-neutral-200 bg-neutral-50 text-neutral-500 cursor-pointer hover:border-neutral-300 hover:text-neutral-700"
           : "border-neutral-100 bg-neutral-50 text-neutral-300 cursor-not-allowed"
@@ -69,6 +69,7 @@ export default function EyedropperButton({
         <path d="M3 21v-3l9-9" />
         <path d="m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3L15 6" />
       </svg>
+      <BubbleTooltip>{label}</BubbleTooltip>
     </button>
   );
 }

package/components/builder/color-picker/SwatchBar.tsx

@@ -10,6 +10,7 @@
 
 import { useCallback } from "react";
 import type { SwatchBarProps } from "./types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // Common neutral colors always available
 const COMMON_COLORS = [
@@ -51,14 +52,16 @@ export default function SwatchBar({
                 key={s._key || `swatch-${i}`}
                 type="button"
                 onClick={() => handleSwatchClick(s.hex)}
-                title={`${s.name}: ${s.hex}`}
-                className={`w-8 h-8 rounded-lg cursor-pointer transition-all ${
+                aria-label={`${s.name}: ${s.hex}`}
+                className={`group/bb relative w-8 h-8 rounded-lg cursor-pointer transition-all ${
                   value.toLowerCase() === s.hex.toLowerCase()
                     ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-white"
                     : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
                 }`}
                 style={{ background: s.hex }}
-              />
+              >
+                <BubbleTooltip>{`${s.name}: ${s.hex}`}</BubbleTooltip>
+              </button>
             ))}
           </div>
         </div>
@@ -77,14 +80,16 @@ export default function SwatchBar({
               key={c}
               type="button"
               onClick={() => handleSwatchClick(c)}
-              title={c.toUpperCase()}
-              className={`w-6 h-6 rounded-md cursor-pointer transition-all ${
+              aria-label={c.toUpperCase()}
+              className={`group/bb relative w-6 h-6 rounded-md cursor-pointer transition-all ${
                 value.toLowerCase() === c
                   ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-white"
                   : "border border-neutral-200 hover:border-neutral-400 hover:scale-110"
               }`}
               style={{ background: c }}
-            />
+            >
+              <BubbleTooltip>{c.toUpperCase()}</BubbleTooltip>
+            </button>
           ))}
         </div>
       </div>

package/components/builder/color-picker/UnifiedColorPicker.tsx

@@ -45,6 +45,7 @@ import {
 import { getPresetsForCategory } from "../../../lib/builder/gradient-presets";
 import type { GradientPresetInfo } from "../../../lib/builder/gradient-presets";
 import type { ColorSwatch } from "../../../lib/sanity/types";
+import { BubbleTooltip } from "../BubbleIcons";
 
 type GradientTab = "solid" | "linear" | "radial" | "mesh";
 
@@ -554,11 +555,13 @@ export default function UnifiedColorPicker({
                   <button
                     key={preset.id}
                     type="button"
-                    title={preset.label}
+                    aria-label={preset.label}
                     onClick={() => handlePresetSelect(preset)}
-                    className="w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
+                    className="group/bb relative w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
                     style={{ backgroundImage: colorToCSS(preset.template) }}
-                  />
+                  >
+                    <BubbleTooltip>{preset.label}</BubbleTooltip>
+                  </button>
                 ))}
               </div>
             )}
@@ -678,11 +681,13 @@ export default function UnifiedColorPicker({
                   <button
                     key={preset.id}
                     type="button"
-                    title={preset.label}
+                    aria-label={preset.label}
                     onClick={() => handlePresetSelect(preset)}
-                    className="w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
+                    className="group/bb relative w-8 h-8 rounded-lg border border-neutral-200 hover:border-neutral-400 transition-colors cursor-pointer shrink-0"
                     style={{ backgroundImage: colorToCSS(preset.template) }}
-                  />
+                  >
+                    <BubbleTooltip>{preset.label}</BubbleTooltip>
+                  </button>
                 ))}
               </div>
             )}

package/components/builder/editors/ImageGridBlockEditor.tsx

@@ -19,6 +19,7 @@ import {
   useActiveViewport,
   SELECT_CLASS,
 } from "./shared";
+import { BubbleTooltip } from "../BubbleIcons";
 
 interface Props {
   block: ImageGridBlock;
@@ -74,13 +75,14 @@ function ImageThumb({
               e.stopPropagation();
               onRemove();
             }}
-            className="w-7 h-7 rounded-full bg-white/90 hover:bg-[var(--admin-error)] hover:text-white flex items-center justify-center transition-colors text-neutral-600"
-            title="Remove image"
+            className="group/bb relative w-7 h-7 rounded-full bg-white/90 hover:bg-[var(--admin-error)] hover:text-white flex items-center justify-center transition-colors text-neutral-600"
+            aria-label="Remove image"
           >
             <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
               <polyline points="3 6 5 6 21 6" />
               <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
             </svg>
+            <BubbleTooltip>Remove image</BubbleTooltip>
           </button>
         </div>
       )}

package/components/builder/editors/MarqueeBlockEditor.tsx

@@ -37,6 +37,7 @@ import {
   TypographyIcon,
   LayoutIcon,
 } from "./section-icons";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Constants
@@ -271,11 +272,11 @@ function ItemRow({
     >
       <div className="flex items-center gap-2 mb-1.5">
         <span
-          className="text-neutral-300 cursor-grab active:cursor-grabbing select-none"
-          title="Drag to reorder"
+          className="group/bb relative text-neutral-300 cursor-grab active:cursor-grabbing select-none"
           aria-label="Drag handle"
         >
           ⋮⋮
+          <BubbleTooltip>Drag to reorder</BubbleTooltip>
         </span>
         <span className="text-[10px] font-semibold uppercase tracking-wider text-neutral-400">
           {ITEM_TYPE_LABEL[item._type]} · #{index + 1}

package/components/builder/editors/ProjectGridEditor.tsx

@@ -24,6 +24,7 @@ import {
   ViewportBadge,
   StyledCheckbox,
 } from "./shared";
+import { BubbleTooltip } from "../BubbleIcons";
 
 // ============================================
 // Constants
@@ -516,7 +517,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                   onClick={() => selectProjectCard(isCardSelected ? null : item._key)}
                 >
                   {/* Drag grip */}
-                  <span className="text-neutral-300 shrink-0 cursor-grab" title="Reorder">
+                  <span className="group/bb relative text-neutral-300 shrink-0 cursor-grab" aria-label="Reorder">
                     <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor">
                       <circle cx="3" cy="2" r="1" />
                       <circle cx="7" cy="2" r="1" />
@@ -525,6 +526,7 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                       <circle cx="3" cy="8" r="1" />
                       <circle cx="7" cy="8" r="1" />
                     </svg>
+                    <BubbleTooltip>Reorder</BubbleTooltip>
                   </span>
 
                   {/* Project name */}
@@ -543,34 +545,37 @@ export default function ProjectGridEditor({ block }: ProjectGridEditorProps) {
                   <button
                     onClick={(e) => { e.stopPropagation(); moveProject(i, -1); }}
                     disabled={i === 0}
-                    className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
-                    title="Move up"
+                    className="group/bb relative p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
+                    aria-label="Move up"
                   >
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <polyline points="18 15 12 9 6 15" />
                     </svg>
+                    <BubbleTooltip>Move up</BubbleTooltip>
                   </button>
                   <button
                     onClick={(e) => { e.stopPropagation(); moveProject(i, 1); }}
                     disabled={i === (block.projects || []).length - 1}
-                    className="p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
-                    title="Move down"
+                    className="group/bb relative p-0.5 text-neutral-400 hover:text-neutral-700 disabled:opacity-20 transition-colors"
+                    aria-label="Move down"
                   >
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <polyline points="6 9 12 15 18 9" />
                     </svg>
+                    <BubbleTooltip>Move down</BubbleTooltip>
                   </button>
 
                   {/* Remove */}
                   <button
                     onClick={(e) => { e.stopPropagation(); removeProject(item._key); }}
-                    className="p-0.5 text-neutral-400 hover:text-red-500 transition-colors"
-                    title="Remove"
+                    className="group/bb relative p-0.5 text-neutral-400 hover:text-red-500 transition-colors"
+                    aria-label="Remove"
                   >
                     <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                       <line x1="18" y1="6" x2="6" y2="18" />
                       <line x1="6" y1="6" x2="18" y2="18" />
                     </svg>
+                    <BubbleTooltip>Remove</BubbleTooltip>
                   </button>
                 </div>