@morphika/andami 0.2.12 → 0.2.14

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 })}
+      />
+    </>
+  );
+}

package/components/builder/settings-panel/index.ts

@@ -16,6 +16,7 @@ export { SectionV2AnimationTab } from "./SectionV2AnimationTab";
 export { default as ColumnV2Settings } from "./ColumnV2Settings";
 export { default as ParallaxSlideSettings } from "./ParallaxSlideSettings";
 export { default as ParallaxGroupSettings } from "./ParallaxGroupSettings";
+export { default as CoverSectionSettings } from "./CoverSectionSettings";
 export { useSettingsPanelSelection } from "./useSettingsPanelSelection";
 export type { SelectedBlockInfo, SelectedParallaxSlideInfo } from "./useSettingsPanelSelection";
 export { AnimationTab, getBlockHoverEffect } from "./AnimationTab";

package/components/builder/settings-panel/useSettingsPanelSelection.ts

@@ -16,11 +16,13 @@ import type {
   ParallaxGroup,
   ParallaxSlideV2,
   SectionColumn,
+  CoverSection,
 } from "../../../lib/sanity/types";
 import {
   isPageSectionV2,
   isCustomSectionInstance,
   isParallaxGroup,
+  isCoverSection,
 } from "../../../lib/sanity/types";
 
 export interface SelectedBlockInfo {
@@ -43,6 +45,7 @@ export function useSettingsPanelSelection() {
   const selectedItem: ContentItem | undefined = store.rows.find((r) => r._key === store.selectedRowKey);
   const selectedSectionV2: PageSectionV2 | null = selectedItem && isPageSectionV2(selectedItem) ? selectedItem : null;
   const selectedCustomSectionInstance: CustomSectionInstance | null = selectedItem && isCustomSectionInstance(selectedItem) ? selectedItem as CustomSectionInstance : null;
+  const selectedCoverSection: CoverSection | null = selectedItem && isCoverSection(selectedItem) ? selectedItem as CoverSection : null;
 
   // Parallax detection: group selected directly, or slide selected (search inside groups)
   const selectedParallaxGroup: ParallaxGroup | null = selectedItem && isParallaxGroup(selectedItem) ? selectedItem as ParallaxGroup : null;
@@ -67,8 +70,22 @@ export function useSettingsPanelSelection() {
     return null;
   })();
 
-  // V2 column: when a V2 section (or parallax slide) is selected and a column key is set
-  const effectiveSectionV2 = selectedSectionV2 || selectedParallaxSlide?.virtualSection || null;
+  // Virtual section for cover sections (enables column/block selection routing)
+  const coverVirtualSection: PageSectionV2 | null = selectedCoverSection ? {
+    _type: "pageSectionV2",
+    _key: selectedCoverSection._key,
+    section_type: "empty-v2",
+    columns: selectedCoverSection.columns,
+    settings: {
+      preset: "custom",
+      grid_columns: selectedCoverSection.settings.grid_columns || 12,
+      col_gap: selectedCoverSection.settings.col_gap ?? 20,
+      row_gap: selectedCoverSection.settings.row_gap ?? 20,
+    },
+  } : null;
+
+  // V2 column: when a V2 section (or parallax slide or cover section) is selected and a column key is set
+  const effectiveSectionV2 = selectedSectionV2 || selectedParallaxSlide?.virtualSection || coverVirtualSection || null;
   const selectedColumnV2: SectionColumn | null = effectiveSectionV2 && store.selectedColumnKey
     ? effectiveSectionV2.columns.find((c) => c._key === store.selectedColumnKey) || null
     : null;
@@ -86,6 +103,15 @@ export function useSettingsPanelSelection() {
           if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
         }
       }
+      // Cover sections: search inside columns
+      if (isCoverSection(item)) {
+        for (const col of (item as CoverSection).columns || []) {
+          const block = (col.blocks || []).find(
+            (b) => b._key === store.selectedBlockKey
+          );
+          if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
+        }
+      }
       // Parallax groups: search inside slide columns
       if (isParallaxGroup(item)) {
         const group = item as ParallaxGroup;
@@ -118,6 +144,8 @@ export function useSettingsPanelSelection() {
     ? "Parallax Showcase"
     : selectedCustomSectionInstance
     ? (selectedCustomSectionInstance.custom_section_title || "Saved Section")
+    : selectedCoverSection
+    ? "Cover Section"
     : selectedSectionV2
     ? "Section"
     : "Page";
@@ -131,6 +159,8 @@ export function useSettingsPanelSelection() {
     ? "parallaxGroup"
     : selectedCustomSectionInstance
     ? "customSectionInstance"
+    : selectedCoverSection
+    ? "coverSection"
     : selectedSectionV2
     ? "row"
     : "page";
@@ -146,11 +176,14 @@ export function useSettingsPanelSelection() {
   const isCustomSectionOnly = !!(selectedCustomSectionInstance && !selectedBlock);
   // Page level: nothing selected — show Settings + SEO + Animation (no Layout)
   const isPageLevel = !hasSelection;
+  // Cover section: show all 3 tabs (Settings, Layout, Animation)
+  const isCoverSectionOnly = !!(selectedCoverSection && !selectedColumnV2 && !selectedBlock);
 
   return {
     selectedItem,
     selectedSectionV2,
     selectedCustomSectionInstance,
+    selectedCoverSection,
     selectedParallaxGroup,
     selectedParallaxSlide,
     effectiveSectionV2,
@@ -164,6 +197,7 @@ export function useSettingsPanelSelection() {
     isColumnOnly,
     isParallaxGroupOnly,
     isCustomSectionOnly,
+    isCoverSectionOnly,
     isPageLevel,
   };
 }

package/lib/animation/enter-types.ts

@@ -73,7 +73,6 @@ export const BLOCK_ENTER_PRESETS: Record<BlockType, readonly EnterPreset[]> = {
   imageGridBlock:         ["fade", "scale", "slide-up"],
   videoBlock:             ["fade", "slide-up"],
   buttonBlock:            ["fade", "slide-up", "scale"],
-  coverBlock:             ["fade", "blur", "reveal", "scale"],
   spacerBlock:            [],           // invisible — no animation
   projectGridBlock:       [],           // uses card_entrance system
 };

package/lib/animation/hover-effect-types.ts

@@ -66,7 +66,6 @@ export const BLOCK_HOVER_PRESETS: Record<BlockType, readonly HoverPreset[]> = {
   imageGridBlock:         ["tilt-3d"],
   videoBlock:             [],   // video has play/pause interaction
   buttonBlock:            ["scale-up", "lift", "border-glow"],
-  coverBlock:             ["scale-up", "lift", "ripple", "rgb-shift", "pixelate"],
   spacerBlock:            [],   // invisible
   projectGridBlock:       ["scale-up", "lift"],  // per-card effect
 };

package/lib/builder/defaults.ts

@@ -1,4 +1,4 @@
-import type { ContentBlock, ParallaxSlideV2, SectionV2Settings } from "../../lib/sanity/types";
+import type { ContentBlock, ParallaxSlideV2, SectionV2Settings, CoverSection, CoverSectionSettings, CoverRow } from "../../lib/sanity/types";
 import type { BlockType } from "./types";
 import { generateKey } from "./utils";
 import type { EnterAnimationConfig, TypewriterConfig } from "../../lib/animation/enter-types";
@@ -38,6 +38,48 @@ export function createDefaultParallaxSlide(): ParallaxSlideV2 {
   };
 }
 
+// ============================================
+// Cover section defaults (Session 176)
+// ============================================
+
+export const DEFAULT_COVER_SECTION_SETTINGS: CoverSectionSettings = {
+  grid_columns: 12,
+  col_gap: 20,
+  row_gap: 20,
+  spacing_top: "0",
+  spacing_bottom: "0",
+};
+
+export function createDefaultCoverRow(heightPercent: number = 100): CoverRow {
+  return {
+    _key: generateKey(),
+    height_percent: heightPercent,
+    vertical_align: "start",
+  };
+}
+
+export function createDefaultCoverSection(): CoverSection {
+  return {
+    _type: "coverSection",
+    _key: generateKey(),
+    background_type: "image",
+    background_position: "center center",
+    background_size: "cover",
+    background_overlay_color: "#000000",
+    background_overlay_opacity: 0,
+    height: "100vh",
+    cover_rows: [createDefaultCoverRow(100)],
+    columns: [{
+      _key: generateKey(),
+      grid_column: 1,
+      grid_row: 1,
+      span: 12,
+      blocks: [],
+    }],
+    settings: { ...DEFAULT_COVER_SECTION_SETTINGS },
+  };
+}
+
 // ============================================
 // Default animation configs per block type (Session 117)
 // ============================================
@@ -138,27 +180,6 @@ export function createDefaultBlock(blockType: BlockType): ContentBlock {
         style: "primary",
         size: "medium",
       };
-    case "coverBlock":
-      return {
-        _type: "coverBlock",
-        _key,
-        headline: "",
-        subheadline: "",
-        media_type: "image",
-        media_path: "",
-        background_size: "cover",
-        background_position: "center center",
-        background_repeat: "no-repeat",
-        overlay: "dark",
-        overlay_opacity: 50,
-        content_align_h: "center",
-        content_align_v: "center",
-        content_max_width: "800px",
-        height: "100vh",
-        mobile_height: "same",
-        text_color: "#ffffff",
-        show_scroll_indicator: false,
-      };
     case "projectGridBlock":
       return {
         _type: "projectGridBlock",

package/lib/builder/serializer/normalizers.ts

@@ -5,7 +5,7 @@
  * Extracted from serializer.ts in Session 162.
  */
 
-import type { Page, ContentBlock, ContentItem, PageSectionV2, SectionColumn, SectionV2Settings, CustomSectionInstance, ParallaxGroup } from "../../../lib/sanity/types";
+import type { Page, ContentBlock, ContentItem, PageSectionV2, SectionColumn, SectionV2Settings, CustomSectionInstance, ParallaxGroup, CoverSection } from "../../../lib/sanity/types";
 import type { BuilderState, PageSettings } from "../types";
 import { generateKey } from "../utils";
 import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, DEFAULT_GRID_WIDTH } from "../constants";
@@ -175,6 +175,39 @@ export function migrateContentItem(item: Record<string, unknown>): ContentItem {
     return normalizeParallaxGroup(item as unknown as Partial<ParallaxGroup> & { _key: string });
   }
 
+  // CoverSection — normalize with defaults for null fields (Session 176)
+  if (item._type === "coverSection") {
+    const raw = item as unknown as CoverSection;
+    const coverRows = (raw.cover_rows ?? []).map((r) => ({
+      ...r,
+      _key: r._key || generateKey(),
+      height_percent: r.height_percent ?? 100,
+      vertical_align: r.vertical_align ?? "start",
+    }));
+    return {
+      ...raw,
+      _key: (raw._key as string) || generateKey(),
+      background_type: raw.background_type ?? "image",
+      background_position: raw.background_position ?? "center center",
+      background_size: raw.background_size ?? "cover",
+      background_overlay_color: raw.background_overlay_color ?? "#000000",
+      background_overlay_opacity: raw.background_overlay_opacity ?? 0,
+      height: raw.height ?? "100vh",
+      cover_rows: coverRows.length > 0 ? coverRows : [{ _key: generateKey(), height_percent: 100, vertical_align: "start" as const }],
+      columns: (raw.columns ?? []).map((col) => ({
+        ...col,
+        _key: col._key || generateKey(),
+        blocks: ensureKeys(col.blocks ?? []) as ContentBlock[],
+      })),
+      settings: {
+        ...(raw.settings ?? {}),
+        grid_columns: (raw.settings?.grid_columns as number) ?? 12,
+        col_gap: (raw.settings?.col_gap as number) ?? 20,
+        row_gap: (raw.settings?.row_gap as number) ?? 20,
+      },
+    } as CoverSection;
+  }
+
   // Unknown type — warn and skip
   console.warn(`[Serializer] Unknown content item type: ${item._type}, skipping`);
   // Return a dummy PageSectionV2 as fallback

package/lib/builder/serializer/serializers.ts

@@ -5,8 +5,8 @@
  * Extracted from serializer.ts in Session 162.
  */
 
-import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup } from "../../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../../lib/sanity/types";
+import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup, CoverSection } from "../../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSection } from "../../../lib/sanity/types";
 import type { BuilderState } from "../types";
 import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR } from "../constants";
 
@@ -210,6 +210,39 @@ function serializeParallaxGroup(group: ParallaxGroup): Record<string, unknown> {
   };
 }
 
+// ============================================
+// Cover Section Serialization (Session 176)
+// ============================================
+
+function serializeCoverSection(section: CoverSection): Record<string, unknown> {
+  const columns = (section.columns || []).map((col) => stripUndefined({
+    _type: "sectionColumn",
+    _key: col._key,
+    grid_column: col.grid_column,
+    grid_row: col.grid_row,
+    span: col.span,
+    blocks: (col.blocks || []).map((b) => serializeBlock(b)),
+    enter_animation: col.enter_animation,
+  } as Record<string, unknown>));
+
+  return stripUndefined({
+    _type: "coverSection",
+    _key: section._key,
+    background_type: section.background_type,
+    background_image: section.background_image,
+    background_video: section.background_video,
+    background_position: section.background_position,
+    background_size: section.background_size,
+    background_overlay_color: section.background_overlay_color,
+    background_overlay_opacity: section.background_overlay_opacity,
+    height: section.height,
+    cover_rows: section.cover_rows,
+    columns,
+    settings: stripUndefined(section.settings as unknown as Record<string, unknown>),
+    responsive: section.responsive,
+  } as Record<string, unknown>);
+}
+
 // ============================================
 // Content Item Dispatcher
 // ============================================
@@ -248,6 +281,10 @@ function serializeContentItem(item: ContentItem): Record<string, unknown> {
   if (isParallaxGroup(item)) {
     return serializeParallaxGroup(item);
   }
+  // CoverSection — serialize background, rows, columns, settings (Session 176)
+  if (isCoverSection(item)) {
+    return serializeCoverSection(item as CoverSection);
+  }
   // Should never reach here
   throw new Error(`[Serializer] Unknown content item type during serialization`);
 }

package/lib/builder/store-blocks.ts

@@ -1,6 +1,6 @@
 import type { BuilderStore, BuilderState } from "./types";
-import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup } from "../../lib/sanity/types";
-import { isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup, CoverSection } from "../../lib/sanity/types";
+import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { createDefaultBlock } from "./defaults";
 import { generateKey } from "./utils";
 import { findSectionPath, updateSectionAtPath, moveBlockInState } from "./store-helpers";
@@ -30,6 +30,9 @@ function applyBlockUpdate(
     if (isPageSectionV2(item)) {
       return { ...item, columns: updateColumns(item.columns) };
     }
+    if (isCoverSection(item)) {
+      return { ...item, columns: updateColumns((item as CoverSection).columns) } as ContentItem;
+    }
     if (isParallaxGroup(item)) {
       return {
         ...item,
@@ -61,11 +64,13 @@ export function createBlockActions(set: StoreSet, get: StoreGet) {
         cols.map((c) => ({ ...c, blocks: c.blocks.filter((b) => b._key !== blockKey) }));
 
       set((state) => {
-        // Handle V2 Sections + ParallaxGroup slides
         const finalRows = state.rows.map((item) => {
           if (isPageSectionV2(item)) {
             return { ...item, columns: filterBlocks(item.columns) } as ContentItem;
           }
+          if (isCoverSection(item)) {
+            return { ...item, columns: filterBlocks((item as CoverSection).columns) } as ContentItem;
+          }
           if (isParallaxGroup(item)) {
             return {
               ...item,
@@ -105,6 +110,9 @@ export function createBlockActions(set: StoreSet, get: StoreGet) {
           if (isPageSectionV2(item)) {
             return { ...item, columns: dupInColumns(item.columns) } as ContentItem;
           }
+          if (isCoverSection(item)) {
+            return { ...item, columns: dupInColumns((item as CoverSection).columns) } as ContentItem;
+          }
           if (isParallaxGroup(item)) {
             return {
               ...item,