@morphika/andami 0.2.12 → 0.2.14

package/components/builder/CoverRowResizeHandle.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+
+/**
+ * CoverRowResizeHandle — horizontal drag handle between two adjacent cover rows.
+ *
+ * 3-state visual matching the column resize handles in SectionV2Column:
+ *   - Idle: invisible (transparent hit area only)
+ *   - Hover: teal pill line appears
+ *   - Dragging: full-width line with glow + center dot
+ *
+ * Session 176: Cover Sections — Phase 5.
+ */
+
+interface CoverRowResizeHandleProps {
+  sectionKey: string;
+  handleIndex: number;
+  abovePercent: number;
+  belowPercent: number;
+  containerHeight: number;
+  isSectionHovered: boolean;
+}
+
+const HANDLE_COLOR = "#0d9488";
+
+export default function CoverRowResizeHandle({
+  sectionKey,
+  handleIndex,
+  abovePercent,
+  belowPercent,
+  containerHeight,
+  isSectionHovered,
+}: CoverRowResizeHandleProps) {
+  const resizeCoverRow = useBuilderStore((s) => s.resizeCoverRow);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+
+  const [isHovered, setIsHovered] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const startYRef = useRef(0);
+  const startAboveRef = useRef(0);
+  const startBelowRef = useRef(0);
+  const snapshotPushedRef = useRef(false);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+
+      startYRef.current = e.clientY;
+      startAboveRef.current = abovePercent;
+      startBelowRef.current = belowPercent;
+      snapshotPushedRef.current = false;
+      setIsDragging(true);
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        if (!snapshotPushedRef.current) {
+          _pushSnapshot();
+          snapshotPushedRef.current = true;
+        }
+        const deltaY = moveEvent.clientY - startYRef.current;
+        const deltaPercent = (deltaY / containerHeight) * 100;
+        resizeCoverRow(sectionKey, handleIndex, deltaPercent, startAboveRef.current, startBelowRef.current);
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        setIsDragging(false);
+      };
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    },
+    [sectionKey, handleIndex, containerHeight, resizeCoverRow, _pushSnapshot]
+  );
+
+  const isActive = isDragging;
+  const isVisible = isDragging || isHovered || isSectionHovered;
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="horizontal"
+      aria-label={`Resize rows ${handleIndex + 1} and ${handleIndex + 2}`}
+      className="absolute left-0 right-0 z-10 flex items-center justify-center"
+      style={{
+        height: 20,
+        marginTop: -10,
+        cursor: "row-resize",
+        bottom: 0,
+        opacity: isVisible ? 1 : 0,
+        pointerEvents: isVisible ? "auto" : "none",
+        transition: isDragging ? "none" : "opacity 150ms ease-out",
+      }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => { if (!isDragging) setIsHovered(false); }}
+      onMouseDown={handleMouseDown}
+    >
+      {/* Line */}
+      <div
+        className="pointer-events-none absolute left-0 right-0 flex items-center justify-center"
+        style={{ height: "100%" }}
+      >
+        <div
+          style={{
+            width: isActive ? "100%" : isHovered ? "80%" : "50%",
+            height: isActive ? 3 : isHovered ? 2 : 1,
+            borderRadius: 999,
+            backgroundColor: isActive
+              ? HANDLE_COLOR
+              : isHovered
+              ? `${HANDLE_COLOR}bb`
+              : `${HANDLE_COLOR}40`,
+            transition: isDragging ? "none" : "all 150ms ease-out",
+            boxShadow: isActive ? `0 0 8px ${HANDLE_COLOR}50` : undefined,
+          }}
+        />
+      </div>
+
+      {/* Center pill/dot */}
+      <div
+        className="pointer-events-none relative"
+        style={{
+          width: isActive ? 16 : isHovered ? 10 : 4,
+          height: isActive ? 16 : isHovered ? 10 : 4,
+          borderRadius: "50%",
+          backgroundColor: isActive
+            ? HANDLE_COLOR
+            : isHovered
+            ? `${HANDLE_COLOR}aa`
+            : `${HANDLE_COLOR}30`,
+          transition: isDragging ? "none" : "all 150ms ease-out",
+          boxShadow: isActive ? `0 0 10px ${HANDLE_COLOR}50` : undefined,
+          zIndex: 1,
+        }}
+      />
+
+      {/* Percentage labels during drag */}
+      {isDragging && (
+        <>
+          <div
+            className="absolute pointer-events-none"
+            style={{
+              top: -16,
+              left: "50%",
+              transform: "translateX(-50%)",
+              fontSize: 9,
+              fontWeight: 700,
+              color: HANDLE_COLOR,
+              background: "rgba(255,255,255,0.9)",
+              padding: "1px 5px",
+              borderRadius: 4,
+            }}
+          >
+            {Math.round(abovePercent)}%
+          </div>
+          <div
+            className="absolute pointer-events-none"
+            style={{
+              bottom: -16,
+              left: "50%",
+              transform: "translateX(-50%)",
+              fontSize: 9,
+              fontWeight: 700,
+              color: HANDLE_COLOR,
+              background: "rgba(255,255,255,0.9)",
+              padding: "1px 5px",
+              borderRadius: 4,
+            }}
+          >
+            {Math.round(belowPercent)}%
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/components/builder/CoverSectionCanvas.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { useBuilderStore } from "../../lib/builder/store";
+import type { CoverSection, CoverRow, PageSectionV2 } from "../../lib/sanity/types";
+import type { DeviceViewport } from "../../lib/builder/types";
+import SectionV2Canvas from "./SectionV2Canvas";
+import CoverRowResizeHandle from "./CoverRowResizeHandle";
+import { DEVICE_HEIGHTS } from "../../lib/builder/types";
+import { useAssetUrl } from "../../lib/contexts/AssetContext";
+
+/**
+ * CoverSectionCanvas — renders a CoverSection in the builder canvas.
+ *
+ * Displays proportional rows (based on cover_rows height_percent) inside
+ * a fixed-height container that simulates the section's vh height.
+ * Each row contains a SectionV2Canvas (full V2 grid editor reuse) via
+ * a virtual PageSectionV2 scoped to that row's columns.
+ *
+ * Background image/video is shown as a faint preview behind all rows.
+ * Row resize handles are rendered between adjacent rows (Phase 5).
+ *
+ * Session 176: Cover Sections — Phase 4 (Builder Canvas).
+ */
+
+interface CoverSectionCanvasProps {
+  section: CoverSection;
+  onAddBlockTarget: (sectionKey: string, colKey: string, insertIndex?: number) => void;
+}
+
+const COVER_ACCENT = "#0d9488";
+
+function getEffectiveCoverRows(section: CoverSection, viewport: DeviceViewport): CoverRow[] {
+  if (viewport === "desktop") return section.cover_rows;
+  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) => {
+    const override = overrides.find((o) => o._key === row._key);
+    if (override?.height_percent !== undefined) {
+      return { ...row, height_percent: override.height_percent };
+    }
+    return row;
+  });
+}
+
+export default function CoverSectionCanvas({
+  section,
+  onAddBlockTarget,
+}: CoverSectionCanvasProps) {
+  const store = useBuilderStore();
+  const activeViewport = store.activeViewport || "desktop";
+  const previewMode = store.previewMode;
+  const assetUrl = useAssetUrl();
+  const [isSectionHovered, setIsSectionHovered] = useState(false);
+
+  const vhPixels = DEVICE_HEIGHTS[activeViewport];
+  const heightMultiplier = (parseInt(section.height || "100", 10) || 100) / 100;
+  const containerHeight = Math.round(vhPixels * heightMultiplier);
+
+  const bgImageUrl = section.background_type === "image" && section.background_image
+    ? assetUrl(section.background_image)
+    : null;
+
+  const effectiveRows = useMemo(
+    () => getEffectiveCoverRows(section, activeViewport),
+    [section, activeViewport]
+  );
+
+  const virtualSectionsPerRow = useMemo(() => {
+    return effectiveRows.map((row, rowIndex) => {
+      const rowNumber = rowIndex + 1;
+      const rowColumns = section.columns
+        .filter((c) => c.grid_row === rowNumber)
+        .map((c) => ({ ...c, grid_row: 1 }));
+      const virtualSection: PageSectionV2 = {
+        _type: "pageSectionV2",
+        _key: section._key,
+        section_type: "empty-v2",
+        columns: rowColumns,
+        settings: {
+          preset: "custom",
+          grid_columns: section.settings.grid_columns || 12,
+          col_gap: section.settings.col_gap ?? 20,
+          row_gap: section.settings.row_gap ?? 20,
+        },
+      };
+      return { row, rowNumber, virtualSection };
+    });
+  }, [effectiveRows, section]);
+
+  return (
+    <div
+      className="relative"
+      style={{
+        borderRadius: 12,
+        border: `1.5px solid ${COVER_ACCENT}40`,
+        overflow: "visible",
+      }}
+      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 */}
+      <div
+        className="relative"
+        style={{ height: containerHeight }}
+      >
+        {/* Background preview — clipped to container bounds */}
+        {bgImageUrl && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: `url(${bgImageUrl})`,
+              backgroundSize: section.background_size || "cover",
+              backgroundPosition: section.background_position || "center center",
+              opacity: 0.15,
+              overflow: "hidden",
+            }}
+          />
+        )}
+
+        {/* Overlay preview */}
+        {(section.background_overlay_opacity ?? 0) > 0 && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundColor: section.background_overlay_color || "#000000",
+              opacity: (section.background_overlay_opacity || 0) / 100 * 0.3,
+              overflow: "hidden",
+            }}
+          />
+        )}
+
+        {/* Proportional rows */}
+        <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" };
+            const isLastRow = rowIndex === effectiveRows.length - 1;
+            const hasColumns = virtualSection.columns.length > 0;
+
+            return (
+              <div
+                key={row._key}
+                className="relative"
+                style={{
+                  height: `${row.height_percent}%`,
+                  minHeight: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  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" }}>
+                    <SectionV2Canvas
+                      section={virtualSection}
+                      onAddBlockTarget={onAddBlockTarget}
+                      fillHeight
+                      gridRowOffset={rowNumber - 1}
+                    />
+                  </div>
+                ) : (
+                  /* Empty row: direct + Add Column button with correct gridRow */
+                  <div
+                    className="flex-1 min-h-0 flex items-center justify-center"
+                    style={{
+                      border: isSectionHovered ? `1.5px dashed ${COVER_ACCENT}30` : "1.5px dashed transparent",
+                      borderRadius: 6,
+                      margin: 4,
+                      transition: "border-color 150ms",
+                    }}
+                  >
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        store.addColumnV2(section._key, rowNumber, 1, section.settings.grid_columns || 12);
+                      }}
+                      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)",
+                        opacity: isSectionHovered ? 1 : 0,
+                        pointerEvents: isSectionHovered ? "auto" : "none",
+                        transition: "opacity 150ms",
+                      }}
+                    >
+                      + Add Column
+                    </button>
+                  </div>
+                )}
+
+                {/* Resize handle between this row and the next */}
+                {!isLastRow && (
+                  <CoverRowResizeHandle
+                    sectionKey={section._key}
+                    handleIndex={rowIndex}
+                    abovePercent={row.height_percent}
+                    belowPercent={effectiveRows[rowIndex + 1]?.height_percent ?? 0}
+                    containerHeight={containerHeight}
+                    isSectionHovered={isSectionHovered}
+                  />
+                )}
+              </div>
+            );
+          })}
+
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/builder/ReadOnlyFrame.tsx

@@ -19,8 +19,8 @@
 import { memo, useMemo, useState, useEffect } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
 import type { DeviceViewport } from "../../lib/builder/types";
-import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentItem, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2, CoverSection } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { DEVICE_HEIGHTS } from "../../lib/builder/types";
 import { getEffectiveColumnsV2, getSectionV2SettingValue } from "./settings-panel/responsive-helpers";
 import BlockLivePreview from "./BlockLivePreview";
@@ -331,6 +331,124 @@ const ReadOnlyCustomSection = memo(function ReadOnlyCustomSection({
 // ReadOnlyFrame — orchestrator
 // ============================================
 
+// ============================================
+// Read-only cover section — renders proportional rows with background
+// ============================================
+
+interface ReadOnlyCoverSectionProps {
+  section: CoverSection;
+  viewport: DeviceViewport;
+}
+
+const ReadOnlyCoverSection = memo(function ReadOnlyCoverSection({
+  section,
+  viewport,
+}: ReadOnlyCoverSectionProps) {
+  const deviceHeight = DEVICE_HEIGHTS[viewport];
+  const heightMultiplier = parseInt(section.height, 10) / 100;
+  const containerHeight = Math.round(deviceHeight * heightMultiplier);
+
+  const gridColumns = section.settings.grid_columns || 12;
+  const colGap = section.settings.col_gap ?? 20;
+  const rowGap = section.settings.row_gap ?? 20;
+
+  const effectiveRows = (() => {
+    if (viewport === "desktop") return section.cover_rows;
+    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) => {
+      const o = overrides.find((ov) => ov._key === row._key);
+      return o?.height_percent !== undefined ? { ...row, height_percent: o.height_percent } : row;
+    });
+  })();
+
+  const rowTemplate = effectiveRows.map((r) => `${r.height_percent}%`).join(" ");
+
+  return (
+    <div
+      style={{
+        borderRadius: 8,
+        border: "1px solid rgba(13, 148, 136, 0.15)",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          background: "linear-gradient(135deg, #f0fdfa 0%, #e6fffa 100%)",
+          padding: "4px 8px",
+          borderBottom: "1px solid rgba(13, 148, 136, 0.1)",
+        }}
+      >
+        <span style={{ fontSize: 8, fontWeight: 600, color: "#0d9488" }}>
+          ◆ Cover · {section.height} · {section.cover_rows.length} row{section.cover_rows.length !== 1 ? "s" : ""}
+        </span>
+      </div>
+      <div style={{ position: "relative", height: containerHeight, overflow: "hidden" }}>
+        {section.background_type === "image" && section.background_image && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundImage: `url(/api/assets/${section.background_image})`,
+              backgroundSize: section.background_size || "cover",
+              backgroundPosition: section.background_position || "center center",
+              opacity: 0.15,
+            }}
+          />
+        )}
+        {(section.background_overlay_opacity ?? 0) > 0 && (
+          <div
+            className="absolute inset-0 pointer-events-none"
+            style={{
+              backgroundColor: section.background_overlay_color || "#000000",
+              opacity: (section.background_overlay_opacity || 0) / 100 * 0.3,
+            }}
+          />
+        )}
+        <div
+          style={{
+            position: "relative",
+            zIndex: 1,
+            display: "grid",
+            gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+            gridTemplateRows: rowTemplate,
+            height: "100%",
+            columnGap: `${colGap}px`,
+            rowGap: `${rowGap}px`,
+          }}
+        >
+          {section.columns.map((col) => {
+            const rowAlign = effectiveRows[col.grid_row - 1]?.vertical_align || "start";
+            const alignSelf = rowAlign === "center" ? "center" : rowAlign === "end" ? "end" : "start";
+            const colJustify = getColumnVerticalAlign(col.blocks || []);
+            return (
+              <div
+                key={col._key}
+                style={{
+                  gridColumn: `${col.grid_column} / span ${col.span}`,
+                  gridRow: col.grid_row,
+                  alignSelf,
+                  display: "flex",
+                  flexDirection: "column",
+                  ...(colJustify ? { justifyContent: colJustify } : {}),
+                  minWidth: 0,
+                  overflow: "hidden",
+                }}
+              >
+                {(col.blocks || []).map((block) => (
+                  <div key={block._key} style={{ width: "100%", minWidth: 0 }}>
+                    <BlockLivePreview block={block} viewport={viewport} />
+                  </div>
+                ))}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+});
+
 interface ReadOnlyFrameProps {
   /** The device viewport this frame represents */
   viewport: DeviceViewport;
@@ -350,7 +468,13 @@ export default function ReadOnlyFrame({ viewport }: ReadOnlyFrameProps) {
   return (
     <div>
       {rows.map((item) =>
-        isParallaxGroup(item) ? (
+        isCoverSection(item) ? (
+          <ReadOnlyCoverSection
+            key={item._key}
+            section={item as CoverSection}
+            viewport={viewport}
+          />
+        ) : isParallaxGroup(item) ? (
           <ReadOnlyParallaxGroup
             key={item._key}
             group={item as ParallaxGroup}

package/components/builder/SectionTypePicker.tsx

@@ -29,6 +29,28 @@ function EmptySectionV2Icon({ size = 28 }: { size?: number }) {
   );
 }
 
+function CoverSectionIcon({ size = 28 }: { size?: number }) {
+  const accent = "#0d9488";
+  return (
+    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+      <defs>
+        <linearGradient id="csGrad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor={accent} />
+          <stop offset="100%" stopColor="#0f766e" />
+        </linearGradient>
+      </defs>
+      <rect x="3" y="3" width="34" height="34" rx="4" fill="url(#csGrad)" opacity="0.15" />
+      <rect x="3" y="3" width="34" height="34" rx="4" stroke="url(#csGrad)" strokeWidth="2" fill="none" opacity="0.5" />
+      {/* Top row (large) */}
+      <rect x="6" y="6" width="28" height="18" rx="2" fill="url(#csGrad)" opacity="0.25" />
+      {/* Bottom row (small) */}
+      <rect x="6" y="26" width="28" height="8" rx="2" fill="url(#csGrad)" opacity="0.4" />
+      {/* Divider line */}
+      <line x1="8" y1="25" x2="32" y2="25" stroke={accent} strokeWidth="1" opacity="0.5" strokeDasharray="2 2" />
+    </svg>
+  );
+}
+
 function SavedSectionIcon({ size = 28 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
@@ -51,12 +73,14 @@ function SavedSectionIcon({ size = 28 }: { size?: number }) {
 
 const SECTION_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>> = {
   "empty-v2": EmptySectionV2Icon,
+  coverSection: CoverSectionIcon,
   projectGridBlock: ProjectGridBlockIcon,
   parallaxGroup: ParallaxGroupIcon,
 };
 
 const SECTION_GRADIENTS: Record<string, string> = {
   "empty-v2": "linear-gradient(135deg, #d0e0f8 0%, #b8d0f0 50%, #a0c0e8 100%)",
+  coverSection: "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
   projectGridBlock: BLOCK_GRADIENTS.projectGridBlock,
   parallaxGroup: BLOCK_GRADIENTS.parallaxGroup,
 };
@@ -160,6 +184,7 @@ interface SectionTypePickerProps {
   onSelectEmptyV2?: (preset: "full" | "halves" | "thirds" | "quarters" | "1/3+2/3" | "2/3+1/3") => void;
   onSelectSection: (blockType: "projectGridBlock") => void;
   onSelectParallaxGroup?: () => void;
+  onSelectCoverSection?: () => void;
   onSelectCustomSection?: (section: CustomSectionListItem) => void;
   onCreateCustomSection?: () => void;
   onClose: () => void;
@@ -171,6 +196,7 @@ export default function SectionTypePicker({
   onSelectEmptyV2,
   onSelectSection,
   onSelectParallaxGroup,
+  onSelectCoverSection,
   onSelectCustomSection,
   onCreateCustomSection,
   onClose,
@@ -327,6 +353,9 @@ export default function SectionTypePicker({
                       onClick={() => {
                         if (section.type === "empty-v2") {
                           setStep("layout");
+                        } else if (section.type === "coverSection") {
+                          onSelectCoverSection?.();
+                          onClose();
                         } else if (section.type === "parallaxGroup") {
                           onSelectParallaxGroup?.();
                           onClose();

package/components/builder/SectionV2Canvas.tsx

@@ -25,12 +25,15 @@ interface SectionV2CanvasProps {
   onAddBlockTarget: (sectionKey: string, colKey: string, insertIndex?: number) => void;
   /** When true, the grid stretches to fill its parent height (used inside parallax slides) */
   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;
 }
 
 export default function SectionV2Canvas({
   section,
   onAddBlockTarget,
   fillHeight,
+  gridRowOffset = 0,
 }: SectionV2CanvasProps) {
   const previewMode = useBuilderStore((s) => s.previewMode);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
@@ -269,7 +272,7 @@ export default function SectionV2Canvas({
               data-gap-span={gap.span}
               onClick={(e) => {
                 e.stopPropagation();
-                addColumnV2(section._key, gap.grid_row, gap.grid_column, gap.span);
+                addColumnV2(section._key, gap.grid_row + gridRowOffset, gap.grid_column, gap.span);
               }}
               style={{
                 gridColumn: `${gap.grid_column} / span ${gap.span}`,