@morphika/andami 0.5.0 → 0.5.2

package/components/builder/SectionEditorBar.tsx

@@ -155,7 +155,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,7 +1,7 @@
 "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";
 
@@ -83,7 +83,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 +212,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"
+                  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}
                 >
                   <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 }}
                       />
                     ))}

package/components/builder/SectionV2Canvas.tsx

@@ -27,6 +27,13 @@ interface SectionV2CanvasProps {
   fillHeight?: boolean;
   /** Offset added to grid_row when adding columns via gaps (used by cover sections where columns are normalized to grid_row 1) */
   gridRowOffset?: number;
+  /**
+   * Optional override for the responsive-update action. When provided, used instead of the
+   * store's `updateSectionV2Responsive`. Used by CoverSectionCanvas to intercept writes from
+   * virtual per-row sections and merge them back into the Cover's flat column list (remapping
+   * `grid_row: 1` back to the row's real number and preserving overrides for other rows).
+   */
+  onUpdateResponsive?: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void;
 }
 
 export default function SectionV2Canvas({
@@ -34,6 +41,7 @@ export default function SectionV2Canvas({
   onAddBlockTarget,
   fillHeight,
   gridRowOffset = 0,
+  onUpdateResponsive,
 }: SectionV2CanvasProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
@@ -44,7 +52,8 @@ export default function SectionV2Canvas({
   const deleteColumnV2 = useBuilderStore((s) => s.deleteColumnV2);
   const resizeColumnV2 = useBuilderStore((s) => s.resizeColumnV2);
   const resizeColumnV2Left = useBuilderStore((s) => s.resizeColumnV2Left);
-  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const storeUpdateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+  const updateSectionV2Responsive = onUpdateResponsive ?? storeUpdateSectionV2Responsive;
   const selectColumnV2 = useBuilderStore((s) => s.selectColumnV2);
   const selectBlock = useBuilderStore((s) => s.selectBlock);
   const deleteBlock = useBuilderStore((s) => s.deleteBlock);
@@ -153,7 +162,10 @@ export default function SectionV2Canvas({
       style={{
         display: "grid",
         gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
-        ...(fillHeight ? { gridTemplateRows: "1fr" } : {}),
+        // `minmax(0, 1fr)` lets the row shrink below intrinsic content min-size
+        // (gaps' minHeight, empty-column wrappers), which is required in Cover
+        // sections where the row has a strict proportional height.
+        ...(fillHeight ? { gridTemplateRows: "minmax(0, 1fr)" } : {}),
         columnGap: `${colGap}px`,
         rowGap: `${rowGap}px`,
         position: "relative",
@@ -237,6 +249,7 @@ export default function SectionV2Canvas({
             }
             onResizeRight={handleResizeRight}
             onResizeLeft={handleResizeLeft}
+            fillHeight={fillHeight}
           >
             {(col.blocks || []).map((block, blockIdx) => (
               <SortableBlock
@@ -286,7 +299,10 @@ export default function SectionV2Canvas({
               style={{
                 gridColumn: `${gap.grid_column} / span ${gap.span}`,
                 gridRow: gap.grid_row,
-                minHeight: 70,
+                // In fillHeight (Cover), the row has a strict proportional
+                // height — don't let the gap force a minimum that would push
+                // content past the row boundary.
+                minHeight: fillHeight ? 0 : 70,
               }}
               className={`rounded-lg border-2 border-dashed text-xs font-medium transition-all flex items-center justify-center cursor-pointer ${
                 isGapTarget
@@ -294,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

@@ -12,6 +12,7 @@ import type { SectionColumn, ContentBlock, PageSectionV2 } from "../../lib/sanit
 import { getColumnVerticalAlign } 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 +85,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,
         }}
       />
@@ -131,6 +132,9 @@ interface SectionV2ColumnProps {
   onAddBlock: (insertIndex?: number) => void;
   onResizeRight: (columnKey: string, startX: number, startSpan: number, containerEl: HTMLElement) => void;
   onResizeLeft: (columnKey: string, startX: number, startGridCol: number, startSpan: number, containerEl: HTMLElement) => void;
+  /** When true, the column lives in a Cover row with strict proportional height —
+   * empty-state minHeight is relaxed so the column doesn't overflow its row. */
+  fillHeight?: boolean;
   children: ReactNode;
 }
 
@@ -152,6 +156,7 @@ export default function SectionV2Column({
   onAddBlock,
   onResizeRight,
   onResizeLeft,
+  fillHeight = false,
   children,
 }: SectionV2ColumnProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
@@ -285,17 +290,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),
         }}
       />
@@ -350,64 +355,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>
 
@@ -453,7 +459,7 @@ export default function SectionV2Column({
           /* Empty column: show + Add Block (flex-1 stretches in fillHeight cover sections) */
           <div
             className="relative flex items-center justify-center flex-1"
-            style={{ minHeight: 80, padding: "16px 12px" }}
+            style={{ minHeight: fillHeight ? 0 : 80, padding: "16px 12px" }}
           >
             <button
               onClick={handleAddBlockEmpty}
@@ -469,8 +475,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
@@ -498,8 +504,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/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="text-[10px] px-1 py-0.5"
+                  style={{ color: "#3580f9" }}
+                  title={`Animation: ${block.enter_animation.preset}`}
+                >
+                  ✦
+                </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>