@morphika/andami 0.5.1 → 0.5.3

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">
@@ -155,7 +157,7 @@ export default function SectionEditorBar({ onSaveComplete }: SectionEditorBarPro
             value={name}
             onChange={(e) => setName(e.target.value)}
             placeholder="Section name..."
-            className="bg-[#2a2a2a] text-white text-sm px-3 py-1.5 rounded border border-[#3a3a3a] focus:border-[#076bff] focus:outline-none w-64 transition-colors text-center"
+            className="bg-[#2a2a2a] text-white text-sm px-3 py-1.5 rounded border border-[#3a3a3a] focus:border-[#3580f9] focus:outline-none w-64 transition-colors text-center"
           />
         </div>
 

package/components/builder/SectionTypePicker.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { SECTION_TYPE_REGISTRY } from "../../lib/builder/types";
+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";
@@ -83,7 +84,7 @@ function SectionCard({
 
 interface SectionTypePickerProps {
   onSelectEmptyV2?: (preset: "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3") => void;
-  onSelectSection: (blockType: "projectGridBlock" | "projectCarouselBlock") => void;
+  onSelectSection: (blockType: SectionBlockType) => void;
   onSelectParallaxGroup?: () => void;
   onSelectCoverSection?: () => void;
   onSelectCustomSection?: (section: CustomSectionListItem) => void;
@@ -212,14 +213,14 @@ export default function SectionTypePicker({
                     }
                     onClose();
                   }}
-                  className="rounded-xl border border-neutral-200 bg-white p-3 hover:border-[#4794e2] hover:bg-[#4794e2]/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) => (
                       <div
                         key={i}
-                        className="bg-neutral-200 group-hover:bg-[#4794e2]/30 rounded-sm transition-colors"
+                        className="bg-neutral-200 group-hover:bg-[#3580f9]/30 rounded-sm transition-colors"
                         style={{ flex: w }}
                       />
                     ))}
@@ -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/SectionV2Canvas.tsx

@@ -310,7 +310,7 @@ export default function SectionV2Canvas({
                   : showAsDropTarget
                   ? "border-blue-500/40 text-blue-500/60 bg-blue-500/5 opacity-100"
                   : isSectionHovered
-                  ? "border-[#4794e2]/25 text-[#4794e2]/50 hover:text-[#4794e2] hover:border-[#4794e2]/60 hover:bg-[#4794e2]/5 opacity-100"
+                  ? "border-[#3580f9]/25 text-[#3580f9]/50 hover:text-[#3580f9] hover:border-[#3580f9]/60 hover:bg-[#3580f9]/5 opacity-100"
                   : "border-transparent text-transparent opacity-0 pointer-events-none"
               }`}
             >

package/components/builder/SectionV2Column.tsx

@@ -9,9 +9,14 @@ 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";
 
 // ============================================
 // SectionV2Column — Individual column in a V2 section grid
@@ -84,17 +89,17 @@ function ResizeHandle({
           height: isActive ? 16 : isHoveredEdge ? 56 : showChrome ? 56 : 32,
           borderRadius: isActive ? "50%" : 999,
           backgroundColor: isActive
-            ? "rgba(71, 148, 226, 0.9)"
+            ? "rgba(53, 128, 249, 0.9)"
             : isHoveredEdge
-            ? "rgba(71, 148, 226, 0.7)"
+            ? "rgba(53, 128, 249, 0.7)"
             : showChrome
-            ? "rgba(71, 148, 226, 0.5)"
-            : "rgba(71, 148, 226, 0.2)",
+            ? "rgba(53, 128, 249, 0.5)"
+            : "rgba(53, 128, 249, 0.2)",
           transition: "width 150ms ease-out, height 150ms ease-out, border-radius 150ms ease-out, background-color 150ms, box-shadow 150ms",
           boxShadow: isActive
-            ? "0 0 10px rgba(71, 148, 226, 0.5)"
+            ? "0 0 10px rgba(53, 128, 249, 0.5)"
             : isHoveredEdge
-            ? "0 0 6px rgba(71, 148, 226, 0.2)"
+            ? "0 0 6px rgba(53, 128, 249, 0.2)"
             : undefined,
         }}
       />
@@ -229,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 (
@@ -243,6 +254,7 @@ export default function SectionV2Column({
           ...(colJustify ? { justifyContent: colJustify } : {}),
           height: "100%",
           minHeight: 0,
+          ...columnLayoutStyles,
         }}
       >
         <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
@@ -279,6 +291,7 @@ export default function SectionV2Column({
         transition: isDraggedColumn
           ? "none"
           : "opacity 150ms, box-shadow 150ms, transform 150ms ease-out",
+        ...columnLayoutStyles,
       }}
       ref={setBlockDropRef}
       onClick={handleClick}
@@ -289,17 +302,17 @@ export default function SectionV2Column({
       <div
         className="pointer-events-none absolute inset-0 z-[1] rounded"
         style={{
-          transition: "box-shadow 150ms, border 150ms",
+          transition: "box-shadow 150ms",
           ...(isSwapTarget
-            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(71, 148, 226, 0.08)" }
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}`, background: "rgba(53, 128, 249, 0.08)" }
             : isBlockOver
             ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}` }
             : isSelected
-            ? { boxShadow: `inset 0 0 0 2px rgba(71, 148, 226, 0.6)` }
+            ? { boxShadow: `inset 0 0 0 2px rgba(53, 128, 249, 0.6)` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 1.5px rgba(71, 148, 226, 0.5)` }
+            ? { boxShadow: `inset 0 0 0 1.5px rgba(53, 128, 249, 0.5)` }
             : showFaintOutline
-            ? { border: `1px dashed rgba(71, 148, 226, 0.2)`, borderRadius: 4 }
+            ? { boxShadow: `inset 0 0 0 1px rgba(53, 128, 249, 0.2)`, borderRadius: 4 }
             : undefined),
         }}
       />
@@ -354,64 +367,65 @@ export default function SectionV2Column({
         </>
       )}
 
-      {/* Delete button — red circle top right, positioned outside the column box.
+      {/* Column pill — single horizontal pill sitting OUTSIDE the column top-left edge,
+          with a 2px gap so its border never touches the column outline. Structure:
+          [drag-drop] | Col | [X]. Aligns horizontally with the block pill when the
+          first block in the column has no vertical offset.
           Nested pattern: outer div positions, inner div counter-scales. */}
       <div
-        className={`absolute z-[6] transition-opacity ${
+        className={`absolute top-0 left-0 z-[6] transition-opacity ${
           showChrome ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
-        style={{
-          top: 0,
-          right: 0,
-          transform: "translate(40%, -40%)",
-        }}
+        style={{ transform: "translateY(calc(-100% - 2px))" }}
         onClick={(e) => e.stopPropagation()}
       >
-        <div style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "center" }}>
-        <button
-          onClick={handleDelete}
-          className="w-5 h-5 rounded-full text-white flex items-center justify-center transition-transform hover:scale-[1.15]"
-          style={{ background: "#ef4848" }}
-          title="Delete column"
-          aria-label="Delete column"
-        >
-          <svg width="10" height="10" viewBox="0 0 10 10">
-            <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-          </svg>
-        </button>
-        </div>
-      </div>
-
-      {/* Drag grip — top left corner, uses @dnd-kit useDraggable.
-          Nested pattern: outer div positions, inner div counter-scales. */}
-      <div
-        className={`absolute z-[6] transition-opacity ${
-          showChrome ? "opacity-100" : "opacity-0 pointer-events-none"
-        }`}
-        style={{
-          top: 0,
-          left: 0,
-          transform: "translate(-30%, -30%)",
-        }}
-      >
-        <div style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "center" }}>
-        <div
-          className="w-5 h-5 rounded-full bg-[#4794e2] text-white flex items-center justify-center shadow-md cursor-grab active:cursor-grabbing transition-transform hover:scale-[1.15] hover:bg-[#3578b8] hover:shadow-blue-500/30 hover:shadow-lg"
-          title="Drag to move column"
-          aria-label="Move column"
-          onMouseDown={(e) => {
-            e.stopPropagation();
-            onStartDrag?.(e);
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            onSelect();
-          }}
-        >
-          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
-            <path d="M8 0l2.5 3h-2v4.5H13v-2L16 8l-3 2.5v-2H8.5V13h2L8 16l-2.5-3h2V8.5H3v2L0 8l3-2.5v2h4.5V3h-2L8 0z" />
-          </svg>
-        </div>
+        <div style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "bottom left" }}>
+          <div
+            className="flex items-center rounded-[5px]"
+            style={{
+              background: "#c0d7ff",
+              border: "1.5px solid #3580f9",
+            }}
+          >
+            {/* Drag handle — starts a column drag via @dnd-kit, selects on click */}
+            <button
+              type="button"
+              className="group/bb relative text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors px-1.5 py-1 flex items-center justify-center cursor-grab active:cursor-grabbing rounded-l-[3px]"
+              aria-label="Move column"
+              onMouseDown={(e) => {
+                e.stopPropagation();
+                onStartDrag?.(e);
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onSelect();
+              }}
+            >
+              <DragDropIcon size={14} />
+              <BubbleTooltip>Drag to move</BubbleTooltip>
+            </button>
+            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            {/* Label — clicking selects the column */}
+            <button
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onSelect(); }}
+              className="text-[11px] px-2 py-0.5 font-medium hover:bg-[#3580f9]/15 transition-colors"
+              style={{ color: "#3580f9" }}
+              aria-label="Select column"
+            >
+              Col
+            </button>
+            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            {/* Delete */}
+            <button
+              onClick={handleDelete}
+              className="group/bb relative text-[#3580f9] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
+              aria-label="Delete column"
+            >
+              <CloseIcon size={14} />
+              <BubbleTooltip>Delete</BubbleTooltip>
+            </button>
+          </div>
         </div>
       </div>
 
@@ -473,8 +487,8 @@ export default function SectionV2Column({
                 padding: "5px 16px",
                 pointerEvents: showChrome || showFaintOutline ? "auto" : "none",
                 background: "#d2e3ff",
-                color: "#4794e2",
-                border: "1px dashed #4794e2",
+                color: "#3580f9",
+                border: "1.5px dashed #3580f9",
               }}
             >
               + Add Block
@@ -502,8 +516,8 @@ export default function SectionV2Column({
               padding: "4px 14px",
               pointerEvents: showChrome ? "auto" : "none",
               background: "#d2e3ff",
-              color: "#4794e2",
-              border: "1px dashed #4794e2",
+              color: "#3580f9",
+              border: "1.5px dashed #3580f9",
             }}
           >
             + Add Block

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

@@ -12,6 +12,7 @@ import BlockLivePreview from "./BlockLivePreview";
 import { getBlockAlignmentStyles, hasBlockAlignment } from "../../lib/builder/layout-styles";
 import type { BlockLayout } from "../../lib/sanity/types";
 import { BUILDER_BLOCK } from "../../lib/builder/constants";
+import { ArrowDownIcon, ArrowUpIcon, BubbleTooltip, CloseIcon, CopyIcon } from "./BubbleIcons";
 
 interface SortableBlockProps {
   block: ContentBlock;
@@ -124,7 +125,7 @@ export default function SortableBlock({
       style={{ ...style, ...(!isFillBlock ? { position: "relative" as const, zIndex: 1 } : {}) }}
       className={`transition-[opacity,box-shadow] ${
         isDragging
-          ? "ring-2 ring-[#4794e2] ring-offset-1 ring-offset-transparent rounded"
+          ? "ring-2 ring-[#3580f9] ring-offset-1 ring-offset-transparent rounded"
           : ""
       }`}
       onClick={(e) => {
@@ -145,93 +146,112 @@ export default function SortableBlock({
           ...(isSelected
             ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px ${BUILDER_BLOCK}` }
             : isHovered
-            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(71, 148, 226, 0.4)` }
+            ? { boxShadow: `inset 0 0 0 ${Math.max(2, Math.min(5, 3 / canvasZoom))}px rgba(53, 128, 249, 0.4)` }
             : {}),
         }}
       />
 
-      {/* Floating toolbar — centered INSIDE top of block, appears on hover or when selected.
+      {/* Floating toolbar — top-right of block, sitting OUTSIDE (above) with a 2px gap
+          so the pill border never overlaps the column/block outlines.
+          When the block has no vertical offset, this pill naturally aligns horizontally
+          with the column pill (both hover just above the column's top edge).
           Positioning (translate) is separated from counter-scaling (scale) into nested
-          elements so that zoom changes don't shift the anchor point.
-          Delete button is integrated at the end of the toolbar with a gap separator. */}
+          elements so zoom changes don't shift the anchor point. */}
       <div
-        className={`absolute top-0 left-1/2 z-[6] transition-opacity ${
+        className={`absolute top-0 right-0 z-[6] transition-opacity ${
           showToolbar ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
-        style={{ transform: "translateX(-50%)", marginTop: 4 }}
+        style={{ transform: "translateY(calc(-100% - 2px))" }}
         onClick={(e) => e.stopPropagation()}
       >
         <div
-          className="flex items-center gap-1.5"
-          style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "top center" }}
+          style={{ transform: `scale(${Math.min(2, 1 / canvasZoom)})`, transformOrigin: "bottom right" }}
         >
-        <div className="flex items-center rounded-[5px] overflow-hidden" style={{
-            background: "#d2e3ff",
-            border: "1px solid #4794e2",
-          }}>
-          {/* Block type label — first */}
-          <span className="text-[11px] px-1.5 py-0.5 font-medium" style={{ color: "#4794e2" }}>
-            {info?.icon || "▪"} {info?.label || block._type}
-          </span>
-          {/* Enter animation badge */}
-          {block.enter_animation?.preset && block.enter_animation.preset !== "none" && (
-            <span className="text-[10px] text-[#4794e2]/50 px-1 py-0.5 border-l border-[#4794e2]/25" title={`Animation: ${block.enter_animation.preset}`}>
-              ✦
-            </span>
-          )}
-          {/* Duplicate */}
-          {onDuplicate && (
+          <div
+            className="flex items-center rounded-[5px]"
+            style={{
+              background: "#c0d7ff",
+              border: "1.5px solid #3580f9",
+            }}
+          >
+            {/* Block type label — clicking selects the block */}
             <button
-              onClick={onDuplicate}
-              className="text-[#4794e2]/60 hover:text-[#4794e2] transition-colors px-1.5 py-0.5 text-[11px] border-l border-[#4794e2]/25 hover:bg-[#4794e2]/10"
-              title="Duplicate block (Ctrl+D)"
-              aria-label="Duplicate block"
+              type="button"
+              onClick={(e) => { e.stopPropagation(); onSelect(); }}
+              className="text-[11px] px-2 py-0.5 font-medium rounded-l-[3px] hover:bg-[#3580f9]/15 transition-colors"
+              style={{ color: "#3580f9" }}
+              aria-label="Select block"
             >
-              ⧉
+              {info?.label || block._type}
             </button>
-          )}
-          {/* Move up arrow */}
-          <button
-            onClick={() => canMoveUp && reorderBlocks(rowKey, colKey, blockIndex, blockIndex - 1)}
-            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-[#4794e2]/25 ${
-              canMoveUp
-                ? "text-[#4794e2]/60 hover:text-[#4794e2] hover:bg-[#4794e2]/10 cursor-pointer"
-                : "text-[#4794e2]/25 cursor-default"
-            }`}
-            title="Move block up"
-            aria-label="Move block up"
-            disabled={!canMoveUp}
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-              <path d="M5 2L2 6h6L5 2z" fill="currentColor" />
-            </svg>
-          </button>
-          {/* Move down arrow */}
-          <button
-            onClick={() => canMoveDown && reorderBlocks(rowKey, colKey, blockIndex, blockIndex + 1)}
-            className={`transition-colors px-1 py-0.5 text-[11px] border-l border-[#4794e2]/25 ${
-              canMoveDown
-                ? "text-[#4794e2]/60 hover:text-[#4794e2] hover:bg-[#4794e2]/10 cursor-pointer"
-                : "text-[#4794e2]/25 cursor-default"
-            }`}
-            title="Move block down"
-            aria-label="Move block down"
-            disabled={!canMoveDown}
-          >
-            <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-              <path d="M5 8L2 4h6L5 8z" fill="currentColor" />
-            </svg>
-          </button>
-          {/* Delete — text inside pill, red hover for destructive signal */}
-          <button
-            onClick={onDelete}
-            className="text-[#4794e2]/60 hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-0.5 text-[11px] font-medium border-l border-[#4794e2]/25"
-            title="Delete block"
-            aria-label="Delete block"
-          >
-            Delete
-          </button>
-        </div>
+            {/* Enter animation badge */}
+            {block.enter_animation?.preset && block.enter_animation.preset !== "none" && (
+              <>
+                <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+                <span
+                  className="group/bb relative text-[10px] px-1 py-0.5"
+                  style={{ color: "#3580f9" }}
+                >
+                  ✦
+                  <BubbleTooltip>{`Animation: ${block.enter_animation.preset}`}</BubbleTooltip>
+                </span>
+              </>
+            )}
+            {/* Duplicate */}
+            {onDuplicate && (
+              <>
+                <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+                <button
+                  onClick={onDuplicate}
+                  className="group/bb relative text-[#3580f9] hover:bg-[#3580f9]/15 transition-colors px-1.5 py-1 flex items-center justify-center"
+                  aria-label="Duplicate block"
+                >
+                  <CopyIcon size={14} />
+                  <BubbleTooltip>Duplicate (⌘D)</BubbleTooltip>
+                </button>
+              </>
+            )}
+            {/* Move up */}
+            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <button
+              onClick={() => canMoveUp && reorderBlocks(rowKey, colKey, blockIndex, blockIndex - 1)}
+              className={`group/bb relative transition-colors px-1.5 py-1 flex items-center justify-center ${
+                canMoveUp
+                  ? "text-[#3580f9] hover:bg-[#3580f9]/15 cursor-pointer"
+                  : "text-[#3580f9]/40 cursor-default"
+              }`}
+              aria-label="Move block up"
+              disabled={!canMoveUp}
+            >
+              <ArrowUpIcon size={14} />
+              {canMoveUp && <BubbleTooltip>Move up</BubbleTooltip>}
+            </button>
+            {/* Move down */}
+            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <button
+              onClick={() => canMoveDown && reorderBlocks(rowKey, colKey, blockIndex, blockIndex + 1)}
+              className={`group/bb relative transition-colors px-1.5 py-1 flex items-center justify-center ${
+                canMoveDown
+                  ? "text-[#3580f9] hover:bg-[#3580f9]/15 cursor-pointer"
+                  : "text-[#3580f9]/40 cursor-default"
+              }`}
+              aria-label="Move block down"
+              disabled={!canMoveDown}
+            >
+              <ArrowDownIcon size={14} />
+              {canMoveDown && <BubbleTooltip>Move down</BubbleTooltip>}
+            </button>
+            {/* Delete — red hover for destructive cue */}
+            <div className="w-px self-stretch my-1" style={{ background: "#3580f9" }} />
+            <button
+              onClick={onDelete}
+              className="group/bb relative text-[#3580f9] hover:text-red-500 hover:bg-red-500/10 transition-colors px-1.5 py-1 flex items-center justify-center rounded-r-[3px]"
+              aria-label="Delete block"
+            >
+              <CloseIcon size={14} />
+              <BubbleTooltip>Delete</BubbleTooltip>
+            </button>
+          </div>
         </div>
       </div>