@morphika/andami 0.2.12 → 0.2.13

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,

package/lib/builder/store-cover.ts

@@ -0,0 +1,220 @@
+/**
+ * Cover Section store actions.
+ *
+ * Manages cover-section-specific operations: row CRUD, row resize,
+ * background/settings updates. Column and block operations within
+ * cover sections are handled by the existing V2 actions via
+ * findSectionPath() which now supports cover sections.
+ *
+ * Session 176: Cover Sections — Phase 3 (Store).
+ */
+
+import type { BuilderState } from "./types";
+import type {
+  ContentItem,
+  CoverSection,
+  CoverSectionSettings,
+  CoverRow,
+} from "../../lib/sanity/types";
+import { isCoverSection } from "../../lib/sanity/types";
+import { generateKey } from "./utils";
+import { createDefaultCoverSection, createDefaultCoverRow } from "./defaults";
+
+type StoreSet = (
+  partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
+) => void;
+type StoreGet = () => BuilderState & { _pushSnapshot: () => void };
+
+const MIN_ROW_PERCENT = 10;
+
+function updateCoverInRows(
+  rows: ContentItem[],
+  sectionKey: string,
+  updater: (section: CoverSection) => CoverSection
+): ContentItem[] {
+  return rows.map((item) => {
+    if (item._key === sectionKey && isCoverSection(item)) {
+      return updater(item as CoverSection) as ContentItem;
+    }
+    return item;
+  });
+}
+
+export function createCoverActions(set: StoreSet, get: StoreGet) {
+  return {
+    addCoverSection: (afterRowKey?: string | null): void => {
+      get()._pushSnapshot();
+      const section = createDefaultCoverSection();
+      set((state) => {
+        const rows = [...state.rows];
+        if (afterRowKey) {
+          const idx = rows.findIndex((r) => r._key === afterRowKey);
+          if (idx !== -1) {
+            rows.splice(idx + 1, 0, section);
+          } else {
+            rows.push(section);
+          }
+        } else {
+          rows.push(section);
+        }
+        return { rows, isDirty: true, selectedRowKey: section._key };
+      });
+    },
+
+    addCoverRow: (sectionKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => {
+          if (section.cover_rows.length >= 5) return section;
+          const totalRows = section.cover_rows.length + 1;
+          const equalPercent = Math.floor(100 / totalRows);
+          const remainder = 100 - equalPercent * totalRows;
+          const newRows = section.cover_rows.map((r, i) => ({
+            ...r,
+            height_percent: equalPercent + (i === 0 ? remainder : 0),
+          }));
+          newRows.push(createDefaultCoverRow(equalPercent));
+          return { ...section, cover_rows: newRows };
+        }),
+        isDirty: true,
+      }));
+    },
+
+    removeCoverRow: (sectionKey: string, rowKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => {
+          if (section.cover_rows.length <= 1) return section;
+          const rowIndex = section.cover_rows.findIndex((r) => r._key === rowKey);
+          if (rowIndex === -1) return section;
+          const removedPercent = section.cover_rows[rowIndex].height_percent;
+          const remaining = section.cover_rows.filter((r) => r._key !== rowKey);
+
+          const neighborIndex = rowIndex > 0 ? rowIndex - 1 : 0;
+          const redistributed = remaining.map((r, i) => {
+            if (remaining.length === 1) {
+              return { ...r, height_percent: 100 };
+            }
+            if (i === neighborIndex) {
+              return { ...r, height_percent: r.height_percent + removedPercent };
+            }
+            return r;
+          });
+
+          const filteredColumns = section.columns.filter(
+            (c) => c.grid_row !== rowIndex + 1
+          );
+          const reindexedColumns = filteredColumns.map((c) => ({
+            ...c,
+            grid_row: c.grid_row > rowIndex + 1 ? c.grid_row - 1 : c.grid_row,
+          }));
+
+          return {
+            ...section,
+            cover_rows: redistributed,
+            columns: reindexedColumns,
+          };
+        }),
+        isDirty: true,
+      }));
+    },
+
+    /**
+     * Resize cover rows by dragging the handle between row[handleIndex] and row[handleIndex+1].
+     * deltaPercent is the total delta from the start of the drag.
+     * startAbove/startBelow are the original percentages captured at mousedown —
+     * computation is always from these start values to avoid compounding.
+     */
+    resizeCoverRow: (sectionKey: string, handleIndex: number, deltaPercent: number, startAbove: number, startBelow: number): void => {
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => {
+          const rows = section.cover_rows;
+          if (handleIndex < 0 || handleIndex >= rows.length - 1) return section;
+
+          const total = startAbove + startBelow;
+          let newAbove = startAbove + deltaPercent;
+          let newBelow = startBelow - deltaPercent;
+
+          if (newAbove < MIN_ROW_PERCENT) {
+            newAbove = MIN_ROW_PERCENT;
+            newBelow = total - MIN_ROW_PERCENT;
+          }
+          if (newBelow < MIN_ROW_PERCENT) {
+            newBelow = MIN_ROW_PERCENT;
+            newAbove = total - MIN_ROW_PERCENT;
+          }
+
+          const updatedRows = rows.map((r, i) => {
+            if (i === handleIndex) return { ...r, height_percent: newAbove };
+            if (i === handleIndex + 1) return { ...r, height_percent: newBelow };
+            return r;
+          });
+
+          return { ...section, cover_rows: updatedRows };
+        }),
+        isDirty: true,
+      }));
+    },
+
+    updateCoverRowAlign: (
+      sectionKey: string,
+      rowKey: string,
+      align: CoverRow["vertical_align"]
+    ): void => {
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => ({
+          ...section,
+          cover_rows: section.cover_rows.map((r) =>
+            r._key === rowKey ? { ...r, vertical_align: align } : r
+          ),
+        })),
+        isDirty: true,
+      }));
+    },
+
+    updateCoverBackground: (
+      sectionKey: string,
+      fields: Partial<Pick<CoverSection,
+        "background_type" | "background_image" | "background_video" |
+        "background_position" | "background_size" |
+        "background_overlay_color" | "background_overlay_opacity"
+      >>
+    ): void => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => ({
+          ...section,
+          ...fields,
+        })),
+        isDirty: true,
+      }));
+    },
+
+    updateCoverSettings: (
+      sectionKey: string,
+      settings: Partial<CoverSectionSettings>
+    ): void => {
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => ({
+          ...section,
+          settings: { ...section.settings, ...settings },
+        })),
+        isDirty: true,
+      }));
+    },
+
+    updateCoverHeight: (
+      sectionKey: string,
+      height: CoverSection["height"]
+    ): void => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: updateCoverInRows(state.rows, sectionKey, (section) => ({
+          ...section,
+          height,
+        })),
+        isDirty: true,
+      }));
+    },
+  };
+}