@morphika/andami 0.2.11 → 0.2.13

package/components/builder/SectionV2Column.tsx

@@ -460,32 +460,27 @@ export default function SectionV2Column({
       {/* Blocks content */}
       <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
         {!hasBlocks ? (
-          /* Empty column: show + Add Block */
+          /* Empty column: show + Add Block (flex-1 stretches in fillHeight cover sections) */
           <div
-            className="relative flex items-center justify-center"
+            className="relative flex items-center justify-center flex-1"
             style={{ minHeight: 80, padding: "16px 12px" }}
           >
             <button
               onClick={handleAddBlockEmpty}
               aria-label="Add block to empty column"
-              className={`w-full py-2 rounded-lg text-xs font-medium transition-all flex items-center justify-center ${
+              className={`rounded-full text-[10px] font-medium transition-all hover:scale-105 ${
                 showChrome
                   ? "opacity-100"
                   : showFaintOutline
                   ? "opacity-40"
-                  : "bg-transparent text-transparent opacity-0 pointer-events-none"
+                  : "opacity-0 pointer-events-none"
               }`}
               style={{
+                padding: "5px 16px",
                 pointerEvents: showChrome || showFaintOutline ? "auto" : "none",
-                ...(showChrome ? {
-                  background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
-                  color: "rgba(100,220,170,0.8)",
-                  boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
-                  border: "1px solid rgba(255,255,255,0.06)",
-                } : showFaintOutline ? {
-                  background: "rgba(38,38,48,0.3)",
-                  color: "rgba(100,220,170,0.4)",
-                } : {}),
+                background: showChrome ? "rgba(13, 150, 104, 0.12)" : "rgba(13, 150, 104, 0.06)",
+                color: "#0d9668",
+                border: `1px dashed ${showChrome ? "rgba(13, 150, 104, 0.5)" : "rgba(13, 150, 104, 0.25)"}`,
               }}
             >
               + Add Block
@@ -500,21 +495,21 @@ export default function SectionV2Column({
       {/* Hidden for section-level blocks (e.g. projectGridBlock) that own the full column */}
       {hasBlocks && !singleSectionBlock && (
         <div
-          className={`absolute left-0 right-0 z-[3] transition-all ${
+          className={`flex-1 min-h-0 flex items-center justify-center z-[3] transition-all ${
             showChrome ? "opacity-100" : showFaintOutline ? "opacity-30" : "opacity-0 pointer-events-none"
           }`}
-          style={{ bottom: 0, transform: "translateY(100%)", padding: "4px 12px 0" }}
+          style={{ minHeight: 24 }}
         >
           <button
             onClick={handleAddBlockBelow}
             aria-label="Add block below existing blocks"
-            className="w-full py-1.5 text-[11px] font-medium rounded transition-all"
+            className="rounded-full text-[10px] font-medium transition-all hover:scale-105"
             style={{
+              padding: "4px 14px",
               pointerEvents: showChrome ? "auto" : "none",
-              background: "linear-gradient(170deg, rgba(38,38,48,0.95) 0%, rgba(28,28,36,0.97) 100%)",
-              color: "rgba(100,220,170,0.8)",
-              boxShadow: "0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.04)",
-              border: "1px solid rgba(255,255,255,0.06)",
+              background: "rgba(13, 150, 104, 0.12)",
+              color: "#0d9668",
+              border: "1px dashed rgba(13, 150, 104, 0.5)",
             }}
           >
             + Add Block

package/components/builder/SettingsPanel.tsx

@@ -37,6 +37,7 @@ import {
   ColumnV2Settings,
   ParallaxSlideSettings,
   ParallaxGroupSettings,
+  CoverSectionSettings,
 } from "./settings-panel";
 
 type SettingsTab = "settings" | "layout" | "seo" | "animation";
@@ -49,6 +50,7 @@ export default function SettingsPanel() {
   const {
     selectedSectionV2,
     selectedCustomSectionInstance,
+    selectedCoverSection,
     selectedParallaxGroup,
     selectedParallaxSlide,
     effectiveSectionV2,
@@ -59,6 +61,7 @@ export default function SettingsPanel() {
     HeaderIconComponent,
     isColumnOnly,
     isParallaxGroupOnly,
+    isCoverSectionOnly,
     isPageLevel,
   } = sel;
 
@@ -141,6 +144,9 @@ export default function SettingsPanel() {
             } else if (selectedParallaxGroup && !selectedParallaxSlide) {
               onDelete = () => store.deleteSection(selectedParallaxGroup._key);
               deleteTitle = "Delete Parallax Group";
+            } else if (selectedCoverSection) {
+              onDelete = () => store.deleteSection(selectedCoverSection._key);
+              deleteTitle = "Delete Cover Section";
             } else if (selectedSectionV2) {
               onDelete = () => store.deleteSection(selectedSectionV2._key);
               deleteTitle = "Delete Section";
@@ -327,6 +333,14 @@ export default function SettingsPanel() {
             <CustomSectionSettings instance={selectedCustomSectionInstance} />
           )
         ) :
+        /* ---- Cover Section routing ---- */
+        isCoverSectionOnly && selectedCoverSection ? (
+          activeTab === "animation" ? (
+            <SectionV2AnimationTab section={effectiveSectionV2!} />
+          ) : (
+            <CoverSectionSettings section={selectedCoverSection} />
+          )
+        ) :
         /* ---- V2 Section / Column / Block routing ---- */
         /* BUG-V2-003 fix: When a block inside a V2 column is selected, show BlockSettings
             instead of ColumnV2Settings. Block selection takes priority over column. */

package/components/builder/SortableRow.tsx

@@ -60,6 +60,7 @@ interface SortableRowProps {
   onSelect: () => void;
   onDelete: () => void;
   onAddColumn: () => void;
+  addColumnLabel?: string;
   onDuplicate: () => void;
   onMoveUp: () => void;
   onMoveDown: () => void;
@@ -76,6 +77,7 @@ export default function SortableRow({
   onSelect,
   onDelete,
   onAddColumn,
+  addColumnLabel = "Col",
   onDuplicate,
   onMoveUp,
   onMoveDown,
@@ -87,7 +89,6 @@ export default function SortableRow({
   const selectBlock = useBuilderStore((s) => s.selectBlock);
   const canvasZoom = useBuilderStore((s) => s.canvasZoom);
   const activeViewport = useBuilderStore((s) => s.activeViewport);
-  const gridSettings = useBuilderStore((s) => s.gridSettings);
   const customSectionCache = useBuilderStore((s) => s._customSectionCache);
   const [isHovered, setIsHovered] = useState(false);
   const {
@@ -176,24 +177,9 @@ export default function SortableRow({
   const layoutStyles = getRowLayoutStyles(resolvedSettings as Record<string, unknown> || {});
 
   const showToolbar = isSelected || isHovered;
-  const coverRow = false;
 
   // ---- Preview Mode: clean rendering with row styles applied ----
   if (previewMode) {
-    // Cover rows: full-width, no padding, no container (matches RowRenderer)
-    if (coverRow) {
-      return (
-        <div
-          ref={setNodeRef}
-          style={{
-            ...style,
-            backgroundColor: bgColor !== "transparent" ? bgColor : undefined,
-          }}
-        >
-          {children}
-        </div>
-      );
-    }
     // Build merged styles for preview mode
     const previewRowStyle: React.CSSProperties = {
       ...style,
@@ -219,7 +205,7 @@ export default function SortableRow({
   const designRowStyle: React.CSSProperties = {
     ...style,
     ...layoutStyles,
-    minHeight: coverRow ? undefined : minHeight,
+    minHeight,
   };
   // Legacy fallback: if no layout background set, use old bgColor
   if (!layoutStyles.backgroundColor && !layoutStyles.backgroundImage) {
@@ -332,10 +318,10 @@ export default function SortableRow({
               onClick={(e) => { e.stopPropagation(); onAddColumn(); }}
               onPointerDown={(e) => e.stopPropagation()}
               className="flex items-center gap-1 text-[11px] text-white/50 hover:text-white/85 transition-colors py-0.5"
-              title="Add column"
-              aria-label="Add column"
+              title={`Add ${addColumnLabel.toLowerCase()}`}
+              aria-label={`Add ${addColumnLabel.toLowerCase()}`}
             >
-              <span className="text-white/30">+</span> Col
+              <span className="text-white/30">+</span> {addColumnLabel}
             </button>
           )}
 
@@ -364,7 +350,7 @@ export default function SortableRow({
       )}
 
       {/* Content — same layout as Preview */}
-      <div style={coverRow ? undefined : { maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }} className="relative">
+      <div style={{ maxWidth, margin: "0 auto", paddingLeft: maxWidth !== "100%" ? gridPadding : undefined, paddingRight: maxWidth !== "100%" ? gridPadding : undefined }} className="relative">
         {children}
       </div>
     </div>

package/components/builder/blockStyles.tsx

@@ -14,8 +14,8 @@ export const BLOCK_GRADIENTS: Record<string, string> = {
   videoBlock:     "linear-gradient(135deg, #ffb8d4 0%, #ffc8a8 50%, #ffe0b8 100%)",
   spacerBlock:    "linear-gradient(135deg, #d8d8e8 0%, #e8e8f0 50%, #f0f0f8 100%)",
   buttonBlock:    "linear-gradient(135deg, #ffb8e0 0%, #b8ffe8 50%, #a8ffd8 100%)",
-  coverBlock:     "linear-gradient(135deg, #ffd0a8 0%, #ffc090 50%, #ffb080 100%)",
   projectGridBlock: "linear-gradient(135deg, #ffd4a8 0%, #ffe8b8 50%, #fff0c8 100%)",
+  coverSection:  "linear-gradient(135deg, #b2f5ea 0%, #81e6d9 50%, #5eead4 100%)",
   parallaxGroup: "linear-gradient(135deg, #c8a8ff 0%, #d8b8ff 50%, #e8d0ff 100%)",
   customSectionInstance: "linear-gradient(135deg, #d0b8ff 0%, #b8a8f8 50%, #c8b8ff 100%)",
   // Non-block contexts
@@ -149,27 +149,26 @@ export function ButtonBlockIcon({ size = 28 }: { size?: number }) {
   );
 }
 
-export function CoverBlockIcon({ size = 28 }: { size?: number }) {
+// ── Non-block context icons ──
+
+export function CoverSectionSettingsIcon({ size = 28 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
       <defs>
-        <linearGradient id="starGrad" x1="10" y1="4" x2="30" y2="36">
-          <stop offset="0%" stopColor="#f0a040" />
-          <stop offset="100%" stopColor="#e07820" />
+        <linearGradient id="csSettingsGrad" x1="5" y1="5" x2="35" y2="35">
+          <stop offset="0%" stopColor="#0d9488" />
+          <stop offset="100%" stopColor="#0f766e" />
         </linearGradient>
-        <filter id="starDrop">
-          <feDropShadow dx="0" dy="1.5" stdDeviation="2" floodColor="rgba(200,100,20,0.3)" />
-        </filter>
       </defs>
-      <path d="M20,2 L24,15 L37,20 L24,25 L20,38 L16,25 L3,20 L16,15 Z" fill="url(#starGrad)" filter="url(#starDrop)" />
-      <path d="M20,2 L24,15 L37,20 L16,15 Z" fill="white" opacity="0.2" />
-      <circle cx="20" cy="20" r="2.5" fill="white" opacity="0.4" />
+      <rect x="3" y="3" width="34" height="34" rx="6" fill="url(#csSettingsGrad)" opacity="0.12" />
+      <rect x="3" y="3" width="34" height="34" rx="6" stroke="url(#csSettingsGrad)" strokeWidth="1.5" fill="none" opacity="0.4" />
+      <rect x="7" y="7" width="26" height="16" rx="2" fill="url(#csSettingsGrad)" opacity="0.2" />
+      <rect x="7" y="25" width="26" height="8" rx="2" fill="url(#csSettingsGrad)" opacity="0.35" />
+      <line x1="9" y1="24" x2="31" y2="24" stroke="#0d9488" strokeWidth="1" opacity="0.4" strokeDasharray="2 2" />
     </svg>
   );
 }
 
-// ── Non-block context icons ──
-
 export function RowIcon({ size = 28 }: { size?: number }) {
   return (
     <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
@@ -285,9 +284,9 @@ export const BLOCK_ICON_COMPONENTS: Record<string, React.FC<{ size?: number }>>
   videoBlock: VideoBlockIcon,
   spacerBlock: SpacerBlockIcon,
   buttonBlock: ButtonBlockIcon,
-  coverBlock: CoverBlockIcon,
   projectGridBlock: ProjectGridBlockIcon,
   parallaxGroup: ParallaxGroupIcon,
+  coverSection: CoverSectionSettingsIcon,
   customSectionInstance: CustomSectionInstanceIcon,
   row: RowIcon,
   column: ColumnIcon,

package/components/builder/editors/index.ts

@@ -4,7 +4,6 @@ export { default as ImageGridBlockEditor } from "./ImageGridBlockEditor";
 export { default as VideoBlockEditor } from "./VideoBlockEditor";
 export { default as SpacerBlockEditor } from "./SpacerBlockEditor";
 export { default as ButtonBlockEditor } from "./ButtonBlockEditor";
-export { default as CoverBlockEditor } from "./CoverBlockEditor";
 export { default as ProjectGridEditor } from "./ProjectGridEditor";
 export { SettingsField, SettingsSection, StyledSelect, StyledInput, StyledCheckbox } from "./shared";
 export { getSpacerPx } from "./SpacerBlockEditor";

package/components/builder/index.ts

@@ -7,6 +7,7 @@ export { default as SettingsPanel } from "./SettingsPanel";
 export { default as BuilderCanvas } from "./BuilderCanvas";
 export { default as SectionV2Canvas } from "./SectionV2Canvas";
 export { default as ParallaxGroupCanvas } from "./ParallaxGroupCanvas";
+export { default as CoverSectionCanvas } from "./CoverSectionCanvas";
 export { default as SectionV2Column } from "./SectionV2Column";
 export { default as CanvasToolbar } from "./CanvasToolbar";
 export { makeRowId, makeBlockId, makeColumnDroppableId } from "./DndWrapper";

package/components/builder/live-preview/RichTextEditor.tsx

@@ -11,7 +11,7 @@
  * debounce + snapshot pattern as the original LiveTextEditor.
  */
 
-import { useRef, useCallback, useEffect, useMemo } from "react";
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
 import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
@@ -63,6 +63,7 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
   const snapshotPushedRef = useRef(false);
   // Track block key to detect when we switch to a different block
   const blockKeyRef = useRef(block._key);
+  const [isEmpty, setIsEmpty] = useState(true);
 
   const style = block.style || {};
   const cols = block.columns && block.columns > 1 ? block.columns : undefined;
@@ -115,8 +116,12 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
     ],
     content: initialContent,
     editable,
+    onCreate: ({ editor }) => {
+      setIsEmpty(editor.isEmpty);
+    },
     // Debounced update on every content change
     onUpdate: ({ editor }) => {
+      setIsEmpty(editor.isEmpty);
       if (debounceRef.current) clearTimeout(debounceRef.current);
       debounceRef.current = setTimeout(() => {
         commitContent(editor);
@@ -203,7 +208,8 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
     fontFamily: "inherit",
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    minHeight: "1em",
+    minHeight: editable ? "48px" : "1em",
+    position: "relative" as const,
     ...(cols
       ? {
           columnCount: cols,
@@ -218,6 +224,21 @@ export default function RichTextEditor({ block, editable = false }: RichTextEdit
     <div style={computedStyle} className="rich-text-editor-root">
       {editable && <RichTextBubbleMenu editor={editor} />}
       <EditorContent editor={editor} />
+      {editable && isEmpty && (
+        <div
+          className="absolute inset-0 pointer-events-none select-none"
+          style={{
+            color: "#a3a3a3",
+            fontStyle: "italic",
+            fontSize: "13px",
+            fontWeight: 400,
+            display: "flex",
+            alignItems: "center",
+          }}
+        >
+          Click to edit...
+        </div>
+      )}
     </div>
   );
 }

package/components/builder/live-preview/index.ts

@@ -7,6 +7,5 @@ export { default as LiveImageGridPreview } from "./LiveImageGridPreview";
 export { default as LiveVideoPreview } from "./LiveVideoPreview";
 export { default as LiveSpacerPreview } from "./LiveSpacerPreview";
 export { default as LiveButtonPreview } from "./LiveButtonPreview";
-export { default as LiveCoverPreview } from "./LiveCoverPreview";
 export { default as LiveProjectGridPreview } from "./LiveProjectGridPreview";
 export { ThumbBadge, LivePlaceholder, useProjectThumbnails, ProjectGridCard } from "./shared";

package/components/builder/settings-panel/BlockSettings.tsx

@@ -14,7 +14,6 @@ import {
   VideoBlockEditor,
   SpacerBlockEditor,
   ButtonBlockEditor,
-  CoverBlockEditor,
   ProjectGridEditor,
 } from "../editors";
 
@@ -68,12 +67,6 @@ function BlockTypeEditor({ block }: { block: ContentBlock }) {
           block={block as import("../../../lib/sanity/types").ButtonBlock}
         />
       );
-    case "coverBlock":
-      return (
-        <CoverBlockEditor
-          block={block as import("../../../lib/sanity/types").CoverBlock}
-        />
-      );
     case "projectGridBlock":
       return (
         <ProjectGridEditor

package/components/builder/settings-panel/CoverSectionSettings.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+/**
+ * CoverSectionSettings — Settings panel for a Cover Section.
+ *
+ * Displays:
+ *   - Background type segmented control (Image / Video)
+ *   - AssetBrowser picker for image or video
+ *   - Background position / size dropdowns
+ *   - Overlay color + overlay opacity slider
+ *   - Section height selector (100vh / 80vh / 50vh)
+ *   - Row list with percentages and vertical align
+ *   - Add/Remove row controls
+ *
+ * Layout and Animation tabs are delegated to SectionV2LayoutTab / SectionV2AnimationTab
+ * via a virtual PageSectionV2 (same pattern as parallax slides).
+ *
+ * Session 176: Cover Sections — Phase 6 (Settings Panel).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { CoverSection } from "../../../lib/sanity/types";
+import {
+  BackgroundIcon,
+  OverlayIcon,
+  SpacingIcon,
+  GridGapsIcon,
+} from "../editors/section-icons";
+import {
+  SettingsField,
+  SettingsSection,
+} from "../editors/shared";
+import { AssetPathInput } from "../editors/shared";
+import ColorSwatchPicker, { usePaletteSwatches } from "../ColorSwatchPicker";
+import StaggerSettings from "../editors/StaggerSettings";
+
+const BG_POSITION_OPTIONS = [
+  { value: "center center", label: "Center" },
+  { value: "top center", label: "Top" },
+  { value: "bottom center", label: "Bottom" },
+  { value: "center left", label: "Left" },
+  { value: "center right", label: "Right" },
+  { value: "top left", label: "Top Left" },
+  { value: "top right", label: "Top Right" },
+  { value: "bottom left", label: "Bottom Left" },
+  { value: "bottom right", label: "Bottom Right" },
+];
+
+const BG_SIZE_OPTIONS = [
+  { value: "cover", label: "Cover" },
+  { value: "contain", label: "Contain" },
+  { value: "auto", label: "Auto" },
+];
+
+const HEIGHT_OPTIONS = [
+  { value: "100vh", label: "Full Viewport (100vh)" },
+  { value: "80vh", label: "80% Viewport (80vh)" },
+  { value: "50vh", label: "50% Viewport (50vh)" },
+];
+
+const ALIGN_OPTIONS = [
+  { value: "start", label: "Top" },
+  { value: "center", label: "Center" },
+  { value: "end", label: "Bottom" },
+];
+
+const SELECT_CLASS = "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+
+interface CoverSectionSettingsProps {
+  section: CoverSection;
+}
+
+export default function CoverSectionSettings({ section }: CoverSectionSettingsProps) {
+  const store = useBuilderStore();
+  const paletteSwatches = usePaletteSwatches();
+
+  const bgType = section.background_type || "image";
+  const bgPosition = section.background_position || "center center";
+  const bgSize = section.background_size || "cover";
+  const overlayColor = section.background_overlay_color || "#000000";
+  const overlayOpacity = section.background_overlay_opacity ?? 0;
+
+  const updateBg = (fields: Partial<Pick<CoverSection,
+    "background_type" | "background_image" | "background_video" |
+    "background_position" | "background_size" |
+    "background_overlay_color" | "background_overlay_opacity"
+  >>) => {
+    store.updateCoverBackground(section._key, fields);
+  };
+
+  return (
+    <>
+      {/* Background */}
+      <SettingsSection title="Background" defaultOpen icon={<BackgroundIcon />}>
+        <SettingsField label="Type">
+          <div className="flex rounded-lg bg-[#f0f0f0] p-[3px]">
+            {(["image", "video"] as const).map((type) => (
+              <button
+                key={type}
+                onClick={() => updateBg({ background_type: type })}
+                className={`flex-1 py-1.5 rounded-md text-[11px] font-medium transition-all ${
+                  bgType === type
+                    ? "bg-white text-neutral-900 shadow-sm border border-[#e5e5e5]"
+                    : "text-neutral-400 hover:text-neutral-500"
+                }`}
+              >
+                {type === "image" ? "Image" : "Video"}
+              </button>
+            ))}
+          </div>
+        </SettingsField>
+
+        <SettingsField label={bgType === "image" ? "Image" : "Video"}>
+          <AssetPathInput
+            value={bgType === "image" ? (section.background_image || "") : (section.background_video || "")}
+            onChange={(path) => {
+              if (bgType === "image") {
+                updateBg({ background_image: path });
+              } else {
+                updateBg({ background_video: path });
+              }
+            }}
+            filterType={bgType === "image" ? "image" : "video"}
+            placeholder={bgType === "image" ? "path/to/image.jpg" : "path/to/video.mp4"}
+          />
+        </SettingsField>
+
+        <SettingsField label="Position">
+          <select
+            value={bgPosition}
+            onChange={(e) => updateBg({ background_position: e.target.value })}
+            className={SELECT_CLASS}
+          >
+            {BG_POSITION_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </SettingsField>
+
+        <SettingsField label="Size">
+          <select
+            value={bgSize}
+            onChange={(e) => updateBg({ background_size: e.target.value as CoverSection["background_size"] })}
+            className={SELECT_CLASS}
+          >
+            {BG_SIZE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Overlay */}
+      <SettingsSection title="Overlay" defaultOpen icon={<OverlayIcon />}>
+        <SettingsField label="Color">
+          <ColorSwatchPicker
+            value={overlayColor}
+            onChange={(val) => updateBg({ background_overlay_color: typeof val === "string" ? val : "" })}
+            swatches={paletteSwatches}
+          />
+        </SettingsField>
+
+        <SettingsField label="Opacity">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={100}
+              step={5}
+              value={overlayOpacity}
+              onChange={(e) => updateBg({ background_overlay_opacity: parseInt(e.target.value) })}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {overlayOpacity}%
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Section Height */}
+      <SettingsSection title="Height" defaultOpen icon={<SpacingIcon />}>
+        <SettingsField label="Height">
+          <select
+            value={section.height}
+            onChange={(e) => store.updateCoverHeight(section._key, e.target.value as CoverSection["height"])}
+            className={SELECT_CLASS}
+          >
+            {HEIGHT_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Rows */}
+      <SettingsSection title="Rows" defaultOpen icon={<GridGapsIcon />}>
+        <div className="space-y-2">
+          {section.cover_rows.map((row, i) => (
+            <div
+              key={row._key}
+              className="flex items-center gap-2 rounded-lg bg-[#f5f5f5] px-2.5 py-2"
+            >
+              <span className="text-[10px] font-semibold text-neutral-400 w-6 shrink-0">
+                R{i + 1}
+              </span>
+              <span className="text-xs text-neutral-700 font-medium tabular-nums w-10">
+                {row.height_percent}%
+              </span>
+              <select
+                value={row.vertical_align}
+                onChange={(e) =>
+                  store.updateCoverRowAlign(
+                    section._key,
+                    row._key,
+                    e.target.value as "start" | "center" | "end"
+                  )
+                }
+                className="flex-1 rounded-md border border-transparent bg-white px-2 py-1 text-[11px] text-neutral-700 outline-none hover:border-[#e5e5e5] focus:border-[#076bff]"
+              >
+                {ALIGN_OPTIONS.map((opt) => (
+                  <option key={opt.value} value={opt.value}>{opt.label}</option>
+                ))}
+              </select>
+              {section.cover_rows.length > 1 && (
+                <button
+                  onClick={() => store.removeCoverRow(section._key, row._key)}
+                  className="text-neutral-300 hover:text-red-500 transition-colors text-xs shrink-0"
+                  title="Remove row"
+                >
+                  ✕
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+
+        {section.cover_rows.length < 5 && (
+          <button
+            onClick={() => store.addCoverRow(section._key)}
+            className="w-full mt-2 rounded-lg border border-dashed border-neutral-300 py-2 text-[11px] font-medium text-neutral-400 hover:text-neutral-600 hover:border-neutral-400 transition-colors"
+          >
+            + Add Row
+          </button>
+        )}
+
+        <p className="text-[10px] text-neutral-400 leading-snug px-0.5 mt-2">
+          Drag the handles between rows in the canvas to resize. Heights always sum to 100%.
+        </p>
+      </SettingsSection>
+
+      {/* Grid Gaps */}
+      <SettingsSection title="Grid" defaultOpen={false} icon={<GridGapsIcon />}>
+        <SettingsField label="Col Gap">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={60}
+              step={2}
+              value={section.settings.col_gap ?? 20}
+              onChange={(e) => store.updateCoverSettings(section._key, { col_gap: parseInt(e.target.value) })}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {section.settings.col_gap ?? 20}px
+            </span>
+          </div>
+        </SettingsField>
+
+        <SettingsField label="Row Gap">
+          <div className="flex items-center gap-2">
+            <input
+              type="range"
+              min={0}
+              max={60}
+              step={2}
+              value={section.settings.row_gap ?? 20}
+              onChange={(e) => store.updateCoverSettings(section._key, { row_gap: parseInt(e.target.value) })}
+              className="flex-1 accent-[#076bff]"
+            />
+            <span className="text-xs text-neutral-900 w-10 text-right tabular-nums">
+              {section.settings.row_gap ?? 20}px
+            </span>
+          </div>
+        </SettingsField>
+      </SettingsSection>
+
+      {/* Stagger */}
+      <StaggerSettings
+        stagger={section.settings.stagger}
+        onChange={(s) => store.updateCoverSettings(section._key, { stagger: s })}
+      />
+    </>
+  );
+}