@morphika/andami 0.2.26 → 0.3.1

package/components/builder/BlockCardIcons.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+/**
+ * Full-size block card icons (220×120) used in the Add Block modal.
+ *
+ * Visual language: soft grid background with a 24-rect brick overlay that
+ * fades to #F4F4F4 on the right (matches the card's clean gray). 3D white
+ * shapes with cool-blue bevel + vector drop shadow. Dashed blue (#4794E2)
+ * construction guides on top.
+ *
+ * IDs are namespaced per icon (`tBlk`, `iBlk`, `igBlk`, `vBlk`, `sBlk`,
+ * `bBlk`) so multiple cards can render side by side without filter /
+ * gradient collisions.
+ */
+
+import { Bg, BgDefs, ShadowFilter, VertBevel } from "./iconPrimitives";
+
+// ─────────────────────────────────────────────────────────────────────
+// Text
+// ─────────────────────────────────────────────────────────────────────
+export function TextBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="tBlk" />
+        <ShadowFilter id="shadTBlk" />
+        <linearGradient id="bevelATBlk" x1="61.7" y1="19.7" x2="61.7" y2="99.7" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" />
+          <stop offset="1" stopColor="#E6ECF6" />
+        </linearGradient>
+        <linearGradient id="bevelaTBlk" x1="125.3" y1="44.9" x2="125.2" y2="84.4" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" />
+          <stop offset="1" stopColor="#E6ECF6" />
+        </linearGradient>
+      </defs>
+      <Bg prefix="tBlk" />
+
+      {/* Uppercase A — 3D body with shadow */}
+      <g filter="url(#shadTBlk)">
+        <path fillRule="evenodd" clipRule="evenodd" fill="url(#bevelATBlk)" stroke="#C9D3E4" strokeWidth="0.7"
+              d="M93.5,97.8H74.3l-3.1-13.6H51.8l-3.2,13.6H29.8l21.5-81.2h20.6L93.5,97.8z M67.7,69.7c-2.7-12.1-4.9-23.6-6.2-34.4h-0.3c-1.5,11.2-3.5,22.7-6.2,34.4H67.7z" />
+      </g>
+      {/* A dashed accent */}
+      <path fillRule="evenodd" clipRule="evenodd" fill="none" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" opacity="0.69"
+            d="M93.5,97.8H74.3l-3.1-13.6H51.8l-3.2,13.6H29.8l21.5-81.2h20.6L93.5,97.8z M67.7,69.7c-2.7-12.1-4.9-23.6-6.2-34.4h-0.3c-1.5,11.2-3.5,22.7-6.2,34.4H67.7z" />
+
+      {/* Lowercase a — 3D body with shadow */}
+      <g filter="url(#shadTBlk)">
+        <path fill="url(#bevelaTBlk)" stroke="#C9D3E4" strokeWidth="0.7"
+              d="M136.7,98l-0.7-6.2h-0.3c-2.8,3.9-8.1,7.4-15.1,7.4c-10,0-15.1-7.1-15.1-14.2c0-12,10.6-18.5,29.7-18.4v-1c0-4.1-1.1-11.4-11.2-11.4c-4.6,0-9.4,1.4-12.9,3.7l-2-5.9c4.1-2.7,10-4.4,16.3-4.4c15.1,0,18.8,10.3,18.8,20.2v18.5c0,4.3,0.2,8.5,0.8,11.9H136.7z M135.4,72.8c-9.8-0.2-21,1.5-21,11.1c0,5.8,3.9,8.6,8.5,8.6c6.4,0,10.5-4.1,12-8.3c0.3-0.9,0.5-1.9,0.5-2.9V72.8z" />
+      </g>
+      {/* a dashed accent (matches A) */}
+      <path fill="none" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" strokeDasharray="3,3" opacity="0.69"
+            d="M136.7,98l-0.7-6.2h-0.3c-2.8,3.9-8.1,7.4-15.1,7.4c-10,0-15.1-7.1-15.1-14.2c0-12,10.6-18.5,29.7-18.4v-1c0-4.1-1.1-11.4-11.2-11.4c-4.6,0-9.4,1.4-12.9,3.7l-2-5.9c4.1-2.7,10-4.4,16.3-4.4c15.1,0,18.8,10.3,18.8,20.2v18.5c0,4.3,0.2,8.5,0.8,11.9H136.7z M135.4,72.8c-9.8-0.2-21,1.5-21,11.1c0,5.8,3.9,8.6,8.5,8.6c6.4,0,10.5-4.1,12-8.3c0.3-0.9,0.5-1.9,0.5-2.9V72.8z" />
+
+      {/* Right-side vertical bracket */}
+      <g fill="none" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10">
+        <line x1="159.7" y1="18.5" x2="159.7" y2="101.4" />
+        <line x1="153.4" y1="18.5" x2="166.1" y2="18.5" />
+        <line x1="153.4" y1="101.4" x2="166.1" y2="101.4" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Image
+// ─────────────────────────────────────────────────────────────────────
+export function ImageBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="iBlk" />
+        <ShadowFilter id="shadIBlk" />
+        <VertBevel id="bevelIBlk" />
+      </defs>
+      <Bg prefix="iBlk" />
+
+      <g filter="url(#shadIBlk)">
+        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+              fill="url(#bevelIBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
+            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
+      <ellipse cx="116.3" cy="41.3" rx="5.1" ry="5.1" fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" />
+      <path d="M37.1,79.6l20.3-23c1.4-1.5,3.7-1.6,5.2-0.1l11.6,11.7c1.4,1.4,3.6,1.4,5,0L89.5,58c1.2-1.2,3.1-1.4,4.5-0.4l31,21.5c2.9,1.9,1.5,6.5-2,6.5H39.7C36.7,85.5,35.1,81.9,37.1,79.6z"
+            fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" />
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Image Grid
+// ─────────────────────────────────────────────────────────────────────
+export function ImageGridBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="igBlk" />
+        <ShadowFilter id="shadIGBlk" />
+        <VertBevel id="bevelIGBlk" />
+      </defs>
+      <Bg prefix="igBlk" />
+
+      <g filter="url(#shadIGBlk)">
+        <rect x="24" y="26" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+        <rect x="90" y="26" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+        <rect x="24" y="68" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+        <rect x="90" y="68" width="58" height="34" rx="2" fill="url(#bevelIGBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <rect x="30" y="32" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <rect x="96" y="32" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <rect x="30" y="74" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <rect x="96" y="74" width="46" height="22" rx="1.2" fill="#DDE6F5" />
+      <g fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3">
+        <rect x="24" y="26" width="58" height="34" rx="2" />
+        <rect x="90" y="26" width="58" height="34" rx="2" />
+        <rect x="24" y="68" width="58" height="34" rx="2" />
+        <rect x="90" y="68" width="58" height="34" rx="2" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Video
+// ─────────────────────────────────────────────────────────────────────
+export function VideoBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="vBlk" />
+        <ShadowFilter id="shadVBlk" />
+        <VertBevel id="bevelVBlk" />
+      </defs>
+      <Bg prefix="vBlk" />
+
+      <g filter="url(#shadVBlk)">
+        <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+              fill="url(#bevelVBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <path d="M31.5,25.3h103.4c0.7,0,1.4,0.7,1.4,1.6v64.4c0,0.9-0.6,1.6-1.4,1.6H31.5c-0.7,0-1.4-0.7-1.4-1.6V26.9C30.1,25.9,30.7,25.3,31.5,25.3z"
+            fill="#DDE6F5" stroke="#C9D3E4" strokeWidth="0.5" />
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
+      <path d="M75.2,45.9l21.3,11.4c2.4,1.2,2.4,4.6,0,5.9L75.2,74.5c-2.3,1.2-4.9-0.5-4.9-2.9V48.8C70.3,46.3,73,44.6,75.2,45.9z"
+            fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Spacer (edge case — horizontal gradient, no shadow)
+// ─────────────────────────────────────────────────────────────────────
+export function SpacerBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="sBlk" />
+        <linearGradient id="bevelSBlk" x1="15" y1="59" x2="144.7" y2="59" gradientUnits="userSpaceOnUse">
+          <stop offset="0" stopColor="#FFFFFF" stopOpacity="0" />
+          <stop offset="0.26" stopColor="#F2F5FA" />
+          <stop offset="0.79" stopColor="#F2F5FA" />
+          <stop offset="1" stopColor="#E6ECF6" stopOpacity="0" />
+        </linearGradient>
+      </defs>
+      <Bg prefix="sBlk" />
+
+      {/* Main frame — no shadow (edge case: horizontal gradient fill) */}
+      <path d="M26.8,19h112.7c1.3,0,2.3,1.2,2.3,2.7v75c0,1.5-1.1,2.7-2.3,2.7H26.8c-1.3-0.1-2.3-1.3-2.3-2.7V21.6C24.5,20.2,25.5,19,26.8,19z"
+            fill="url(#bevelSBlk)" />
+
+      {/* Blue up/down arrows */}
+      <g fill="#4794E2">
+        <path d="M82.7,27v18.8h2V27l2,1.9c0.3,0.3,0.9,0.3,1.2,0l0.2-0.2c0.3-0.3,0.3-0.9,0-1.2l-3.7-3.6c-0.4-0.4-1-0.4-1.4,0l-3.7,3.6c-0.3,0.3-0.3,0.9,0,1.2l0.2,0.2c0.3,0.3,0.9,0.3,1.2,0L82.7,27z" />
+        <path d="M86.7,89.7l-2,2v-18c0-0.5-0.4-0.8-0.8-0.8h-0.3c-0.5,0-0.8,0.4-0.8,0.8v18l-2-2c-0.3-0.3-0.9-0.3-1.2,0l-0.2,0.2c-0.3,0.3-0.3,0.9,0,1.2l3.7,3.7c0.2,0.2,0.4,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.7-3.7c0.3-0.3,0.3-0.9,0-1.2l-0.2-0.2C87.5,89.3,87,89.3,86.7,89.7z" />
+      </g>
+
+      {/* Dashed blue boundary lines */}
+      <line x1="22.1" y1="20.9" x2="146.5" y2="20.9" fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
+      <line x1="22.1" y1="99.2" x2="146.5" y2="99.2" fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Button
+// ─────────────────────────────────────────────────────────────────────
+export function ButtonBlockCardIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 120" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <BgDefs prefix="bBlk" />
+        <ShadowFilter id="shadBBlk" />
+        <VertBevel id="bevelBBlk" />
+      </defs>
+      <Bg prefix="bBlk" />
+
+      <g filter="url(#shadBBlk)">
+        <path d="M43,39h83.3c12.7,0,22.9,9.2,22.9,20.7l0,0c0,11.5-10.2,20.7-22.9,20.7H43c-12.7,0-22.9-9.2-22.9-20.7l0,0C20.1,48.3,30.4,39,43,39z"
+              fill="url(#bevelBBlk)" stroke="#C9D3E4" strokeWidth="0.7" />
+      </g>
+      <path d="M43,39h83.3c12.7,0,22.9,9.2,22.9,20.7l0,0c0,11.5-10.2,20.7-22.9,20.7H43c-12.7,0-22.9-9.2-22.9-20.7l0,0C20.1,48.3,30.4,39,43,39z"
+            fill="none" stroke="#4794E2" strokeWidth="2" strokeDasharray="3,3" />
+
+      {/* Cursor icon */}
+      <g transform="translate(-240 -432)">
+        <path fillRule="evenodd" clipRule="evenodd" fill="#FFFFFF" stroke="#4794E2" strokeWidth="2" strokeMiterlimit="10"
+              d="M353.1,513.5l8.2,8.2c0.9,0.9,2.5,0.9,3.4,0c0.9-0.9,2.3-2.3,3.1-3.1c0.5-0.5,0.7-1.1,0.7-1.7c0-0.6-0.3-1.3-0.7-1.7l-8.2-8.2l5.6-3.8c0.8-0.5,1.2-1.4,1-2.3c-0.1-0.9-0.8-1.7-1.6-2l-24.8-8.2c-0.9-0.3-1.8-0.1-2.5,0.6c-0.6,0.6-0.9,1.6-0.6,2.5l8.2,24.8c0.3,0.9,1.1,1.5,2,1.6c0.9,0.1,1.8-0.3,2.3-1L353.1,513.5z" />
+      </g>
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────
+// Lookup map
+// ─────────────────────────────────────────────────────────────────────
+export const BLOCK_CARD_ICONS: Record<string, React.FC> = {
+  textBlock: TextBlockCardIcon,
+  imageBlock: ImageBlockCardIcon,
+  imageGridBlock: ImageGridBlockCardIcon,
+  videoBlock: VideoBlockCardIcon,
+  spacerBlock: SpacerBlockCardIcon,
+  buttonBlock: ButtonBlockCardIcon,
+};

package/components/builder/BlockTypePicker.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { BLOCK_TYPE_REGISTRY } from "../../lib/builder/types";
 import type { BlockType, BlockTypeInfo } from "../../lib/builder/types";
-import { BLOCK_GRADIENTS, BLOCK_ICON_COMPONENTS } from "./blockStyles";
+import { BLOCK_CARD_ICONS } from "./BlockCardIcons";
 
 interface BlockTypePickerProps {
   onSelect: (type: BlockType) => void;
@@ -35,68 +35,48 @@ function BlockCard({
   onHover: () => void;
   onLeave: () => void;
 }) {
-  const cardGradient = BLOCK_GRADIENTS[block.type];
   const labels = BLOCK_LABELS[block.type];
-  const IconComponent = BLOCK_ICON_COMPONENTS[block.type];
+  const CardIcon = BLOCK_CARD_ICONS[block.type];
 
   return (
     <button
       onClick={onSelect}
       onMouseEnter={onHover}
       onMouseLeave={onLeave}
-      className="relative flex items-center gap-3 rounded-2xl px-3.5 py-3 transition-all text-left group overflow-hidden border-0"
+      className="relative flex items-center rounded-2xl text-left group overflow-hidden border-0 h-[96px]"
       style={{
-        background: cardGradient || "#f5f5f5",
-        transform: isHovered ? "translateY(-1px) scale(1.015)" : "translateY(0) scale(1)",
-        boxShadow: isHovered
-          ? "0 8px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3)"
-          : "0 2px 8px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)",
-        transition: "all 0.3s cubic-bezier(0.23, 1, 0.32, 1)",
+        background: "#f4f4f4",
+        transform: isHovered ? "translateY(-1px)" : "translateY(0)",
+        transition: "transform 200ms cubic-bezier(0.23, 1, 0.32, 1)",
       }}
     >
-      {/* Glass overlay */}
-      <div
-        className="absolute inset-0 rounded-2xl pointer-events-none"
-        style={{
-          background: "linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.05) 100%)",
-        }}
-      />
-
-      {/* Icon container — frosted glass */}
-      <div
-        className="relative shrink-0 flex items-center justify-center"
-        style={{
-          width: 44,
-          height: 44,
-          borderRadius: 12,
-          background: "rgba(255,255,255,0.4)",
-          backdropFilter: "blur(8px)",
-          boxShadow: "0 2px 8px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.5)",
-          transition: "transform 0.3s",
-          transform: isHovered ? "scale(1.08)" : "scale(1)",
-        }}
-      >
-        {IconComponent ? <IconComponent /> : null}
+      {/* Icon artwork — full-bleed on the left. Width = height × 220/120
+          so the SVG's viewBox fills the container exactly (no sub-pixel seam). */}
+      <div className="shrink-0 h-full" style={{ width: 176 }}>
+        {CardIcon ? <CardIcon /> : null}
       </div>
 
       {/* Text */}
-      <div className="relative z-10 min-w-0">
-        <p
-          className="text-sm font-semibold truncate"
-          style={{
-            color: "rgba(0,0,0,0.72)",
-            textShadow: "0 1px 0 rgba(255,255,255,0.3)",
-          }}
-        >
+      <div className="min-w-0 pr-5 py-4">
+        <p className="text-[17px] font-semibold text-[#2b2f38] truncate leading-tight">
           {labels?.label || block.label}
         </p>
-        <p
-          className="text-xs truncate leading-snug mt-0.5"
-          style={{ color: "rgba(0,0,0,0.42)" }}
-        >
+        <p className="text-[13px] text-[#9096a0] truncate leading-snug mt-1">
           {labels?.description || block.description}
         </p>
       </div>
+
+      {/* Hover stroke overlay — absolute so it renders ON TOP of the SVG icon;
+          inset box-shadow painted on the card's edge would otherwise be covered
+          by the SVG's own background fill in the icon half of the card. */}
+      <span
+        aria-hidden="true"
+        className="absolute inset-0 rounded-2xl pointer-events-none"
+        style={{
+          boxShadow: isHovered ? "inset 0 0 0 2px #4794E2" : "inset 0 0 0 2px transparent",
+          transition: "box-shadow 160ms ease",
+        }}
+      />
     </button>
   );
 }
@@ -117,7 +97,7 @@ export default function BlockTypePicker({
       onClick={onClose}
     >
       <div
-        className="w-full max-w-2xl rounded-2xl bg-white max-h-[80vh] flex flex-col shadow-2xl border border-neutral-200/50 overflow-hidden"
+        className="w-full max-w-4xl rounded-2xl bg-white max-h-[80vh] flex flex-col shadow-2xl border border-neutral-200/50 overflow-hidden"
         style={{ fontFamily: "Inter, system-ui, sans-serif" }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -127,23 +107,16 @@ export default function BlockTypePicker({
             <h3 className="text-lg font-semibold text-neutral-900">
               Add Block
             </h3>
-            <div className="flex items-center gap-3">
-              {insertIndex !== undefined && (
-                <span className="text-xs text-neutral-400 bg-neutral-100 px-3 py-1 rounded-full font-medium">
-                  Position: {insertIndex + 1}
-                </span>
-              )}
-              <button
-                onClick={onClose}
-                className="w-8 h-8 rounded-lg flex items-center justify-center text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors"
-                aria-label="Close block picker"
-              >
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-                  <line x1="18" y1="6" x2="6" y2="18" />
-                  <line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </div>
+            <button
+              onClick={onClose}
+              className="w-8 h-8 rounded-lg flex items-center justify-center text-neutral-400 hover:text-neutral-600 hover:bg-neutral-100 transition-colors"
+              aria-label="Close block picker"
+            >
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </svg>
+            </button>
           </div>
           <p className="text-sm text-neutral-400">
             Choose a block and add it to your page

package/components/builder/BuilderCanvas.tsx

@@ -22,8 +22,12 @@ import { getSiteConfig } from "../../lib/config";
 // double-click zoom, cursor changes, sessionStorage
 // ============================================
 
-/** Gap between device frames in canvas pixels */
-const FRAME_GAP = 80;
+/** Gap between device frames in canvas pixels.
+ *  Needs breathing room for the floating section pill (rendered by SortableRow)
+ *  which sits ~98px left of its row at 1× zoom, and up to ~143px at low zoom
+ *  due to the counter-scale cap of 1.5×. 140 clears it without making the
+ *  canvas feel sparse. */
+const FRAME_GAP = 140;
 
 /** Device order for horizontal layout */
 const DEVICE_ORDER: DeviceViewport[] = ["desktop", "tablet", "phone"];

package/components/builder/ColumnDragOverlay.tsx

@@ -44,12 +44,12 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
         style={{
           width: 180,
           minHeight: 80,
-          background: "rgba(7, 107, 255, 0.08)",
+          background: "rgba(71, 148, 226, 0.08)",
           backdropFilter: "blur(8px)",
           opacity: 0.85,
           borderRadius: 8,
           border: `2px solid ${BUILDER_BLUE}`,
-          boxShadow: "0 8px 32px rgba(7, 107, 255, 0.3)",
+          boxShadow: "0 8px 32px rgba(71, 148, 226, 0.3)",
         }}
       >
         {/* Column header badge */}
@@ -59,7 +59,7 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
             alignItems: "center",
             gap: 8,
             padding: "8px 12px",
-            borderBottom: "1px solid rgba(7, 107, 255, 0.2)",
+            borderBottom: "1px solid rgba(71, 148, 226, 0.2)",
           }}
         >
           <svg width="10" height="10" viewBox="0 0 10 10" fill={BUILDER_BLUE}>

package/components/builder/CoverRowResizeHandle.tsx

@@ -8,9 +8,12 @@ import { useBuilderStore } from "../../lib/builder/store";
  *
  * 3-state visual matching the column resize handles in SectionV2Column:
  *   - Idle: invisible (transparent hit area only)
- *   - Hover: teal pill line appears
+ *   - Hover: violet pill line appears
  *   - Dragging: full-width line with glow + center dot
  *
+ * Uses the section accent (#7500d5) to match the Cover Section's side pill
+ * and outline — same semantic colour system as Parallax / Custom sections.
+ *
  * Session 176: Cover Sections — Phase 5.
  */
 
@@ -23,7 +26,7 @@ interface CoverRowResizeHandleProps {
   isSectionHovered: boolean;
 }
 
-const HANDLE_COLOR = "#0d9488";
+const HANDLE_COLOR = "#7500d5";
 
 export default function CoverRowResizeHandle({
   sectionKey,

package/components/builder/CoverSectionCanvas.tsx

@@ -8,6 +8,7 @@ import SectionV2Canvas from "./SectionV2Canvas";
 import CoverRowResizeHandle from "./CoverRowResizeHandle";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import { adminAssetUrl } from "../../lib/assets";
+import { normalizeRowHeights } from "../../lib/builder/store-cover";
 
 /**
  * CoverSectionCanvas — renders a CoverSection in the builder canvas.
@@ -35,13 +36,24 @@ function getEffectiveCoverRows(section: CoverSection, viewport: DeviceViewport):
   const vp = viewport as "tablet" | "phone";
   const overrides = section.responsive?.[vp]?.cover_rows;
   if (!overrides || overrides.length === 0) return section.cover_rows;
-  return section.cover_rows.map((row) => {
+
+  // Partial overrides (only some rows have a tablet/phone value) produce a
+  // merged array whose sum is not necessarily 100 — desktop values for the
+  // non-overridden rows don't know about the tablet overrides. Normalize the
+  // final set so the CSS `grid-template-rows` stays valid.
+  const merged = section.cover_rows.map((row) => {
     const override = overrides.find((o) => o._key === row._key);
     if (override?.height_percent !== undefined) {
       return { ...row, height_percent: override.height_percent };
     }
     return row;
   });
+
+  const total = merged.reduce((acc, r) => acc + r.height_percent, 0);
+  if (Math.abs(total - 100) <= 0.5) return merged;
+
+  const normalized = normalizeRowHeights(merged.map((r) => r.height_percent));
+  return merged.map((r, i) => ({ ...r, height_percent: normalized[i] ?? r.height_percent }));
 }
 
 export default function CoverSectionCanvas({
@@ -102,37 +114,9 @@ export default function CoverSectionCanvas({
       onMouseEnter={() => setIsSectionHovered(true)}
       onMouseLeave={() => setIsSectionHovered(false)}
     >
-      {/* Header bar */}
-      <div
-        className="flex items-center gap-2 px-3 py-2 cursor-pointer"
-        style={{
-          background: store.selectedRowKey === section._key
-            ? `linear-gradient(135deg, #ccfbf1 0%, #b2f5ea 100%)`
-            : `linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%)`,
-          borderBottom: `1px solid ${COVER_ACCENT}25`,
-          borderRadius: "12px 12px 0 0",
-        }}
-        onClick={(e) => {
-          e.stopPropagation();
-          store.selectRow(section._key);
-        }}
-      >
-        <span className="text-[11px] font-semibold" style={{ color: COVER_ACCENT }}>
-          ◆ Cover Section
-        </span>
-        <span
-          className="inline-flex items-center justify-center rounded-full text-[9px] font-bold text-white min-w-[18px] h-[18px] px-1"
-          style={{ background: COVER_ACCENT }}
-        >
-          {section.cover_rows.length}
-        </span>
-        <div className="flex-1" />
-        <span className="text-[9px] text-neutral-400 uppercase tracking-wider">
-          {section.height}
-        </span>
-      </div>
-
-      {/* Cover container — simulated viewport height */}
+      {/* Cover container — simulated viewport height. The previous top
+          header bar was removed; row settings now live in the section pill
+          (see SortableRow). */}
       <div
         className="relative"
         style={{ height: containerHeight }}
@@ -183,10 +167,28 @@ export default function CoverSectionCanvas({
           />
         )}
 
-        {/* Proportional rows */}
+        {/* Proportional rows.
+         *
+         * IMPORTANT — do NOT add `zIndex`, `isolate`, `transform`, `filter`,
+         * or any other property that establishes a new CSS stacking context
+         * on this wrapper. The column chrome (drag handle, delete button)
+         * inside each SectionV2Canvas/SortableColumn is absolutely positioned
+         * at z-[6] and must stack ABOVE the side pill (z-[5]) rendered by
+         * the parent SortableRow. If this wrapper creates a stacking context,
+         * the chrome gets trapped below the pill regardless of its local
+         * z-index — the whole subtree ends up at this wrapper's level in the
+         * parent stacking context.
+         *
+         * The rows visually stack above the absolute background/overlay divs
+         * naturally because they come LATER in the DOM and those bg divs
+         * don't have a positive z-index either.
+         *
+         * See `lib/builder/__tests__/section-visibility.test.ts` for the
+         * related nav-colour logic and this file's git history for the
+         * original bug (Session 178+: column chrome clipped in Cover).
+         */}
         <div
           className="relative flex flex-col h-full"
-          style={{ zIndex: 1 }}
         >
           {virtualSectionsPerRow.map(({ row, rowNumber, virtualSection }, rowIndex) => {
             const alignMap = { start: "flex-start", center: "center", end: "flex-end" };
@@ -205,22 +207,13 @@ export default function CoverSectionCanvas({
                   justifyContent: alignMap[row.vertical_align] || "flex-start",
                 }}
               >
-                {/* Row label */}
-                <div
-                  className="absolute top-1 right-2 pointer-events-none z-10"
-                  style={{
-                    fontSize: 9,
-                    color: `${COVER_ACCENT}99`,
-                    fontWeight: 600,
-                  }}
-                >
-                  Row {rowNumber} · {row.height_percent}%
-                  {row.vertical_align !== "start" && ` · ${row.vertical_align}`}
-                </div>
-
                 {hasColumns ? (
-                  /* V2 grid for this row's columns — overflow hidden clips content to row bounds */
-                  <div className="flex-1 min-h-0 flex flex-col" style={{ overflow: "hidden" }}>
+                  /* V2 grid for this row's columns — overflow visible so the
+                     column chrome (drag handle, delete button) that translates
+                     outside column bounds doesn't get clipped. The public
+                     renderer still clips at the <section> level so overflowing
+                     content never leaves the cover on the live site. */
+                  <div className="flex-1 min-h-0 flex flex-col" style={{ overflow: "visible" }}>
                     <SectionV2Canvas
                       section={virtualSection}
                       onAddBlockTarget={onAddBlockTarget}
@@ -247,9 +240,9 @@ export default function CoverSectionCanvas({
                       className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
                       style={{
                         padding: "5px 16px",
-                        background: `rgba(7, 107, 255, 0.10)`,
-                        color: "#076bff",
-                        border: "1px dashed rgba(7, 107, 255, 0.4)",
+                        background: `rgba(71, 148, 226, 0.10)`,
+                        color: "#4794e2",
+                        border: "1px dashed rgba(71, 148, 226, 0.4)",
                         opacity: isSectionHovered ? 1 : 0,
                         pointerEvents: isSectionHovered ? "auto" : "none",
                         transition: "opacity 150ms",

package/components/builder/DndWrapper.tsx

@@ -137,7 +137,7 @@ const BlockDragOverlay = memo(function BlockDragOverlay({ blockKey, rowKey }: {
   if (!block) return null;
   const info = ALL_BLOCK_INFO.find((b) => b.type === block!._type);
   return (
-    <div className="rounded border border-[#0d9668] bg-[#0d9668]/10 px-3 py-2 shadow-lg shadow-[#0d9668]/20 backdrop-blur-sm">
+    <div className="rounded border border-[#4794e2] bg-[#4794e2]/10 px-3 py-2 shadow-lg shadow-[#4794e2]/20 backdrop-blur-sm">
       <div className="flex items-center gap-2">
         <span className="text-xs">{info?.icon || "▪"}</span>
         <span className="text-xs text-white">{info?.label || block._type}</span>

package/components/builder/InsertionLines.tsx

@@ -165,7 +165,7 @@ export const InsertionLines = memo(function InsertionLines({
                     borderRadius: "50%",
                     background: BUILDER_BLUE,
                     border: "2px solid white",
-                    boxShadow: "0 1px 4px rgba(7, 107, 255, 0.4)",
+                    boxShadow: "0 1px 4px rgba(71, 148, 226, 0.4)",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",