@morphika/andami 0.5.1 → 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

@@ -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

@@ -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,
         }}
       />
@@ -289,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),
         }}
       />
@@ -354,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>
 
@@ -473,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
@@ -502,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>
 

package/components/builder/SortableRow.tsx

@@ -14,6 +14,7 @@ import { getRowLayoutStyles } from "../../lib/builder/layout-styles";
 import { normalizeMinHeight } from "../../lib/builder/utils";
 import { getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import { formatRowPercent } from "../../lib/builder/format";
+import { ArrowDownIcon, ArrowUpIcon, BubbleTooltip, CloseIcon, CopyIcon } from "./BubbleIcons";
 
 /**
  * Convert vh-based CSS values to pixels using the simulated device viewport height.
@@ -261,7 +262,7 @@ export default function SortableRow({
           showToolbar ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
         style={{
-          transform: `translateX(calc(-100% - 8px)) scale(${Math.min(1.5, 1 / canvasZoom)})`,
+          transform: `translateX(calc(-100% - 8px)) scale(${Math.min(2, 1 / canvasZoom)})`,
           transformOrigin: "top right",
           width: "90px",
         }}
@@ -279,7 +280,7 @@ export default function SortableRow({
           className="flex flex-col items-stretch rounded-lg py-2 px-2.5 gap-1 cursor-grab active:cursor-grabbing"
           style={{
             background: "#e0daff",
-            border: "1px solid #7500d5",
+            border: "1.5px solid #7500d5",
           }}
           {...attributes}
           {...listeners}
@@ -294,40 +295,40 @@ export default function SortableRow({
             <button
               onClick={(e) => { e.stopPropagation(); onDuplicate(); }}
               onPointerDown={(e) => e.stopPropagation()}
-              className="flex items-center justify-center text-[12px] transition-colors"
+              className="group/bb relative flex items-center justify-center transition-colors"
               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="Duplicate section"
               aria-label="Duplicate section"
             >
-              ⧉
+              <CopyIcon size={14} />
+              <BubbleTooltip>Duplicate</BubbleTooltip>
             </button>
             <button
               onClick={(e) => { e.stopPropagation(); onMoveUp(); }}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={isFirst}
-              className="flex items-center justify-center text-[12px] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="group/bb relative flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
               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="Move up"
               aria-label="Move section up"
             >
-              ↑
+              <ArrowUpIcon size={14} />
+              {!isFirst && <BubbleTooltip>Move up</BubbleTooltip>}
             </button>
             <button
               onClick={(e) => { e.stopPropagation(); onMoveDown(); }}
               onPointerDown={(e) => e.stopPropagation()}
               disabled={isLast}
-              className="flex items-center justify-center text-[12px] transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="group/bb relative flex items-center justify-center transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
               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="Move down"
               aria-label="Move section down"
             >
-              ↓
+              <ArrowDownIcon size={14} />
+              {!isLast && <BubbleTooltip>Move down</BubbleTooltip>}
             </button>
           </div>
 
@@ -358,7 +359,7 @@ export default function SortableRow({
             title="Delete section"
             aria-label="Delete section"
           >
-            <span style={{ color: "rgba(117, 0, 213, 0.4)" }}>-</span> Delete
+            <CloseIcon size={12} /> Delete
           </button>
         </div>
 
@@ -375,7 +376,7 @@ export default function SortableRow({
               className="flex flex-col items-stretch rounded-lg py-1.5 px-2 mt-2 gap-0.5"
               style={{
                 background: "#e0daff",
-                border: "1px solid #7500d5",
+                border: "1.5px solid #7500d5",
               }}
               onClick={(e) => e.stopPropagation()}
             >
@@ -391,14 +392,14 @@ export default function SortableRow({
                     }}
                     onPointerDown={(e) => e.stopPropagation()}
                     disabled={!canRemoveRow}
-                    className="flex items-center justify-center text-[12px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                    className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                     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={canRemoveRow ? "Remove row" : "Cover must have at least 1 row"}
                     aria-label="Remove row"
                   >
-                    ×
+                    <CloseIcon size={12} />
+                    {canRemoveRow && <BubbleTooltip>Remove row</BubbleTooltip>}
                   </button>
                 </div>
               ))}
@@ -436,7 +437,7 @@ export default function SortableRow({
               className="flex flex-col items-stretch rounded-lg py-1.5 px-2 mt-2 gap-0.5"
               style={{
                 background: "#e0daff",
-                border: "1px solid #7500d5",
+                border: "1.5px solid #7500d5",
               }}
               onClick={(e) => e.stopPropagation()}
             >
@@ -462,14 +463,14 @@ export default function SortableRow({
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
                         disabled={idx === 0}
-                        className="flex items-center justify-center text-[10px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                         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="Move slide up"
                         aria-label="Move slide up"
                       >
-                        ↑
+                        <ArrowUpIcon size={12} />
+                        {idx > 0 && <BubbleTooltip>Move up</BubbleTooltip>}
                       </button>
                       <button
                         onClick={(e) => {
@@ -478,14 +479,14 @@ export default function SortableRow({
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
                         disabled={idx === slides.length - 1}
-                        className="flex items-center justify-center text-[10px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                         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="Move slide down"
                         aria-label="Move slide down"
                       >
-                        ↓
+                        <ArrowDownIcon size={12} />
+                        {idx < slides.length - 1 && <BubbleTooltip>Move down</BubbleTooltip>}
                       </button>
                       <button
                         onClick={(e) => {
@@ -494,14 +495,14 @@ export default function SortableRow({
                         }}
                         onPointerDown={(e) => e.stopPropagation()}
                         disabled={!canRemoveSlide}
-                        className="flex items-center justify-center text-[12px] leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                        className="group/bb relative flex items-center justify-center leading-none transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                         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={canRemoveSlide ? "Remove slide" : "Parallax must have at least 1 slide"}
                         aria-label="Remove slide"
                       >
-                        ×
+                        <CloseIcon size={12} />
+                        {canRemoveSlide && <BubbleTooltip>Remove slide</BubbleTooltip>}
                       </button>
                     </div>
                   </div>