@morphika/andami 0.2.12 → 0.2.14

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

package/lib/builder/store-helpers.ts

@@ -15,8 +15,9 @@ import type {
   ParallaxSlideV2,
   SectionColumn,
   SectionV2Preset,
+  CoverSection,
 } from "../../lib/sanity/types";
-import { isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { columnsFromPreset, detectPreset } from "./cascade";
 import { resizeColumnLeft as cascadeResizeLeft, moveColumn as cascadeMoveColumn, type ResizeLeftResult } from "./cascade";
 import { applyBlocksToColumns, toCascadeColumns, type CascadeColumn } from "./cascade-helpers";
@@ -74,6 +75,14 @@ export function moveBlockInState(
         );
         break;
       }
+    } else if (isCoverSection(item)) {
+      const updatedCols = removeFromColumns((item as CoverSection).columns);
+      if (movedBlock) {
+        rowsAfterRemove = rows.map((r, idx) =>
+          idx === i ? { ...r, columns: updatedCols } as ContentItem : r
+        );
+        break;
+      }
     } else if (isParallaxGroup(item)) {
       const group = item as ParallaxGroup;
       let foundInSlide = false;
@@ -217,8 +226,8 @@ export function addSectionV2InState(
       grid_columns: gridColumns,
       col_gap: 20,
       row_gap: 20,
-      spacing_top: "32",
-      spacing_bottom: "32",
+      spacing_top: "0",
+      spacing_bottom: "0",
     },
   };
 
@@ -369,7 +378,8 @@ export function moveColumnToGapV2InState(
 
 export type SectionPath =
   | { type: "v2"; index: number }
-  | { type: "parallaxSlide"; groupIndex: number; slideIndex: number };
+  | { type: "parallaxSlide"; groupIndex: number; slideIndex: number }
+  | { type: "cover"; index: number };
 
 /**
  * Find a V2 section by key — searches both top-level PageSectionV2
@@ -388,6 +398,9 @@ export function findSectionPath(
     if (item._key === sectionKey && isPageSectionV2(item)) {
       return { type: "v2", index: i };
     }
+    if (item._key === sectionKey && isCoverSection(item)) {
+      return { type: "cover", index: i };
+    }
     if (isParallaxGroup(item)) {
       const group = item as ParallaxGroup;
       for (let j = 0; j < group.slides.length; j++) {
@@ -412,6 +425,29 @@ export function getSectionFromPath(
     const item = rows[path.index];
     return isPageSectionV2(item) ? (item as PageSectionV2) : null;
   }
+  if (path.type === "cover") {
+    const item = rows[path.index];
+    if (!isCoverSection(item)) return null;
+    const cover = item as CoverSection;
+    return {
+      _type: "pageSectionV2",
+      _key: cover._key,
+      section_type: "empty-v2",
+      columns: cover.columns,
+      settings: {
+        preset: "custom",
+        grid_columns: cover.settings.grid_columns,
+        col_gap: cover.settings.col_gap,
+        row_gap: cover.settings.row_gap,
+        spacing_top: cover.settings.spacing_top,
+        spacing_right: cover.settings.spacing_right,
+        spacing_bottom: cover.settings.spacing_bottom,
+        spacing_left: cover.settings.spacing_left,
+        enter_animation: cover.settings.enter_animation,
+        stagger: cover.settings.stagger,
+      },
+    };
+  }
   const group = rows[path.groupIndex];
   if (!isParallaxGroup(group)) return null;
   const slide = (group as ParallaxGroup).slides[path.slideIndex];
@@ -440,6 +476,47 @@ export function updateSectionAtPath(
       return updater(item as PageSectionV2) as ContentItem;
     });
   }
+  if (path.type === "cover") {
+    return rows.map((item, i) => {
+      if (i !== path.index || !isCoverSection(item)) return item;
+      const cover = item as CoverSection;
+      const virtualSection: PageSectionV2 = {
+        _type: "pageSectionV2",
+        _key: cover._key,
+        section_type: "empty-v2",
+        columns: cover.columns,
+        settings: {
+          preset: "custom",
+          grid_columns: cover.settings.grid_columns,
+          col_gap: cover.settings.col_gap,
+          row_gap: cover.settings.row_gap,
+          spacing_top: cover.settings.spacing_top,
+          spacing_right: cover.settings.spacing_right,
+          spacing_bottom: cover.settings.spacing_bottom,
+          spacing_left: cover.settings.spacing_left,
+          enter_animation: cover.settings.enter_animation,
+          stagger: cover.settings.stagger,
+        },
+      };
+      const updated = updater(virtualSection);
+      return {
+        ...cover,
+        columns: updated.columns,
+        settings: {
+          ...cover.settings,
+          grid_columns: updated.settings.grid_columns,
+          col_gap: updated.settings.col_gap,
+          row_gap: updated.settings.row_gap,
+          spacing_top: updated.settings.spacing_top,
+          spacing_right: updated.settings.spacing_right,
+          spacing_bottom: updated.settings.spacing_bottom,
+          spacing_left: updated.settings.spacing_left,
+          enter_animation: updated.settings.enter_animation,
+          stagger: updated.settings.stagger,
+        },
+      } as ContentItem;
+    });
+  }
   // parallaxSlide path
   return rows.map((item, i) => {
     if (i !== path.groupIndex || !isParallaxGroup(item)) return item;

package/lib/builder/store-sections.ts

@@ -7,6 +7,7 @@ import type {
   CustomSectionInstance,
   ParallaxGroup,
   ParallaxSlideV2,
+  CoverSection,
   SectionV2Preset,
   EnterAnimationConfig,
 } from "../../lib/sanity/types";
@@ -14,6 +15,7 @@ import {
   isPageSectionV2,
   isCustomSectionInstance,
   isParallaxGroup,
+  isCoverSection,
 } from "../../lib/sanity/types";
 import { createDefaultBlock, createDefaultParallaxSlide } from "./defaults";
 import { generateKey } from "./utils";
@@ -78,8 +80,8 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
           grid_columns: gridColumns,
           col_gap: 20,
           row_gap: 20,
-          spacing_top: "32",
-          spacing_bottom: "32",
+          spacing_top: "0",
+          spacing_bottom: "0",
         },
       };
 
@@ -141,6 +143,14 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
               blocks: col.blocks.map((b) => ({ ...b, _key: generateKey() })),
             })
           );
+        } else if (isCoverSection(clone)) {
+          const cover = clone as CoverSection;
+          cover.cover_rows = cover.cover_rows.map((r) => ({ ...r, _key: generateKey() }));
+          cover.columns = cover.columns.map((col) => ({
+            ...col,
+            _key: generateKey(),
+            blocks: col.blocks.map((b) => ({ ...b, _key: generateKey() })),
+          }));
         } else if (isParallaxGroup(clone)) {
           const group = clone as ParallaxGroup;
           group.slides = group.slides.map((slide) => ({

package/lib/builder/store.ts

@@ -3,8 +3,8 @@ import type { BuilderStore, BuilderState, BlockType, PageSettings, CanvasTool, D
 import { DEFAULT_PAGE_SETTINGS, DEFAULT_GRID_SETTINGS, DEVICE_WIDTHS } from "./types";
 import { stateToDocument, documentToState } from "./serializer";
 import { generateKey } from "./utils";
-import type { ContentBlock, ContentItem, PageSectionV2, SectionV2Settings, PageMetadata, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2 } from "../../lib/sanity/types";
-import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup } from "../../lib/sanity/types";
+import type { ContentBlock, ContentItem, PageSectionV2, SectionV2Settings, PageMetadata, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2, CoverSection } from "../../lib/sanity/types";
+import { isPageSectionV2, isCustomSectionInstance, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { createDefaultBlock, createDefaultParallaxSlide } from "./defaults";
 import { MAX_HISTORY, pushSnapshot } from "./history";
 import {
@@ -33,6 +33,7 @@ import { revalidateSite } from "../../lib/revalidate";
 import { createSectionActions } from "./store-sections";
 import { createBlockActions } from "./store-blocks";
 import { createCanvasActions } from "./store-canvas";
+import { createCoverActions } from "./store-cover";
 
 // ============================================
 // RC-003 fix: Block parent key cache — O(1) lookup in selectBlock().
@@ -55,6 +56,13 @@ function getBlockParentCache(rows: ContentItem[]): Map<string, BlockParent> {
           cache.set(b._key, { rowKey: item._key, colKey: col._key });
         }
       }
+    } else if (isCoverSection(item)) {
+      const cover = item as CoverSection;
+      for (const col of cover.columns) {
+        for (const b of col.blocks) {
+          cache.set(b._key, { rowKey: item._key, colKey: col._key });
+        }
+      }
     } else if (isParallaxGroup(item)) {
       const group = item as ParallaxGroup;
       for (const slide of group.slides) {
@@ -346,4 +354,5 @@ export const useBuilderStore = create<BuilderStore>((set, get) => ({
   ...createSectionActions(set, get),
   ...createBlockActions(set, get),
   ...createCanvasActions(set, get),
+  ...createCoverActions(set, get),
 }));

package/lib/builder/types.ts

@@ -15,6 +15,9 @@ import type {
   SectionColumn,
   PageMetadata,
   ColorField,
+  CoverSection,
+  CoverSectionSettings,
+  CoverRow,
 } from "../../lib/sanity/types";
 import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, DEFAULT_GRID_WIDTH } from "./constants";
 
@@ -48,7 +51,6 @@ export const BLOCK_TYPE_REGISTRY: BlockTypeInfo[] = [
   { type: "videoBlock", label: "Video", description: "Vimeo, YouTube, or MP4", group: "generic", icon: "▶", category: "content" },
   { type: "spacerBlock", label: "Spacer", description: "Vertical spacing", group: "generic", icon: "↕", category: "content" },
   { type: "buttonBlock", label: "Button", description: "Call-to-action button", group: "generic", icon: "▣", category: "content" },
-  { type: "coverBlock", label: "Cover", description: "Full-screen hero section", group: "generic", icon: "◈", category: "content" },
 ];
 
 /**
@@ -90,7 +92,7 @@ export function isSectionBlockSection(section: { columns?: Array<{ blocks?: Arra
   return blocks.length === 1 && SECTION_BLOCK_TYPES.has(blocks[0]._type);
 }
 
-export type SectionType = "empty-v2" | "parallaxGroup" | SectionBlockType;
+export type SectionType = "empty-v2" | "parallaxGroup" | "coverSection" | SectionBlockType;
 
 export interface SectionTypeInfo {
   type: SectionType;
@@ -103,6 +105,7 @@ export interface SectionTypeInfo {
 
 export const SECTION_TYPE_REGISTRY: SectionTypeInfo[] = [
   { type: "empty-v2", label: "Empty Section", description: "Grid section with flexible columns", icon: "⊞" },
+  { type: "coverSection", label: "Cover Section", description: "Full-viewport section with background and proportional rows", icon: "◆" },
   { type: "projectGridBlock", label: "Project Grid", description: "Staggered project showcase grid", icon: "⬡", blockType: "projectGridBlock" },
   { type: "parallaxGroup", label: "Parallax Section", description: "Full-screen parallax showcase with V2 slides", icon: "▽" },
 ];
@@ -374,6 +377,16 @@ export interface BuilderActions {
   /** Update group-level settings (transition effect, snap, etc.) */
   updateParallaxGroupSettings: (groupKey: string, fields: Partial<Pick<import("../../lib/sanity/types").ParallaxGroup, "transition_effect" | "snap_enabled" | "parallax_intensity">>) => void;
 
+  // ---- Cover Section operations (Session 176) ----
+  addCoverSection: (afterRowKey?: string | null) => void;
+  addCoverRow: (sectionKey: string) => void;
+  removeCoverRow: (sectionKey: string, rowKey: string) => void;
+  resizeCoverRow: (sectionKey: string, handleIndex: number, deltaPercent: number, startAbove: number, startBelow: number) => void;
+  updateCoverRowAlign: (sectionKey: string, rowKey: string, align: CoverRow["vertical_align"]) => void;
+  updateCoverBackground: (sectionKey: string, fields: Partial<Pick<CoverSection, "background_type" | "background_image" | "background_video" | "background_position" | "background_size" | "background_overlay_color" | "background_overlay_opacity">>) => void;
+  updateCoverSettings: (sectionKey: string, settings: Partial<CoverSectionSettings>) => void;
+  updateCoverHeight: (sectionKey: string, height: CoverSection["height"]) => void;
+
   // Page-level settings
   updatePageSettings: (settings: Partial<PageSettings>) => void;
   applyGlobalStyles: () => Promise<void>;

package/lib/sanity/queries.ts

@@ -5,14 +5,14 @@ import { groq } from "next-sanity";
 // ============================================
 
 // Deep expansion of content_rows.
-// Handles PageSectionV2, CustomSectionInstance, and ParallaxGroup.
+// Handles PageSectionV2, CustomSectionInstance, ParallaxGroup, and CoverSection.
 // GROQ projections are additive — fields that don't exist on an object are omitted.
 const blockExpansion = `
   content_rows[] {
     _key,
     _type,
     section_type,
-    // ── V2 section columns ──
+    // ── V2 section columns (shared by PageSectionV2 and CoverSection) ──
     columns[] {
       _key,
       _type,
@@ -73,9 +73,23 @@ const blockExpansion = `
         }
       }
     },
-    // ── Settings (V2 section settings) ──
+    // ── CoverSection fields (only present when _type == "coverSection") ──
+    background_type,
+    background_image,
+    background_video,
+    background_position,
+    background_size,
+    background_overlay_color,
+    background_overlay_opacity,
+    height,
+    cover_rows[] {
+      _key,
+      height_percent,
+      vertical_align
+    },
+    // ── Settings (V2 section settings + CoverSection settings) ──
     settings,
-    // ── Responsive overrides (V2 sections store responsive at section level) ──
+    // ── Responsive overrides (V2 + CoverSection store responsive at section level) ──
     responsive
   }
 `;