@morphika/andami 0.1.2

package/lib/builder/store-sections.ts

@@ -0,0 +1,709 @@
+import type { BuilderStore, BuilderState, BlockType } from "./types";
+import type {
+  ContentBlock,
+  ContentItem,
+  PageSection,
+  PageSectionV2,
+  SectionV2Settings,
+  SectionSettings,
+  SectionBlock,
+  CustomSectionInstance,
+  ParallaxGroup,
+  ParallaxSlideV2,
+  SectionV2Preset,
+  EnterAnimationConfig,
+} from "../../lib/sanity/types";
+import {
+  isPageSection,
+  isPageSectionV2,
+  isCustomSectionInstance,
+  isParallaxGroup,
+} from "../../lib/sanity/types";
+import { createDefaultBlock, createDefaultParallaxSlide } from "./defaults";
+import { generateKey } from "./utils";
+import {
+  computeCascade,
+  detectPreset,
+  columnsFromPreset,
+  addColumn as cascadeAddColumn,
+  deleteColumn as cascadeDeleteColumn,
+  resizeColumn as cascadeResizeColumn,
+} from "./cascade";
+import { applyBlocksToColumns, toCascadeColumns } from "./cascade-helpers";
+import {
+  addSectionV2InState,
+  findSectionPath,
+  getSectionFromPath,
+  updateSectionAtPath,
+  addParallaxGroupInState,
+  resizeColumnV2LeftInState,
+  moveColumnV2InState,
+  swapColumnV2InState,
+  moveColumnToGapV2InState,
+} from "./store-helpers";
+
+type StoreSet = (
+  partial: Partial<BuilderState> | ((state: BuilderState) => Partial<BuilderState>)
+) => void;
+type StoreGet = () => BuilderStore;
+
+export function createSectionActions(set: StoreSet, get: StoreGet) {
+  return {
+    // ---- Section operations ----
+
+    /**
+     * Add a "Page Section" — creates a first-class PageSection entity
+     * with a pre-populated section block (projectGridBlock).
+     * No row/column wrapper — direct page-level section.
+     */
+    addSection: (blockType: "projectGridBlock", afterRowKey?: string | null): void => {
+      get()._pushSnapshot();
+      const block = createDefaultBlock(blockType) as SectionBlock;
+      const newSection: PageSection = {
+        _type: "pageSection",
+        _key: generateKey(),
+        section_type: "projectGrid",
+        block: [block],
+        // BUG-011 fix: default spacing to match addRow() defaults
+        settings: {
+          spacing_top: "32",
+          spacing_bottom: "32",
+        },
+      };
+
+      set((state) => {
+        const rows = [...state.rows];
+        if (afterRowKey) {
+          const idx = rows.findIndex((r) => r._key === afterRowKey);
+          if (idx !== -1) {
+            rows.splice(idx + 1, 0, newSection);
+          } else {
+            rows.push(newSection);
+          }
+        } else {
+          rows.push(newSection);
+        }
+        return { rows, isDirty: true, selectedRowKey: newSection._key };
+      });
+    },
+
+    reorderRows: (fromIndex: number, toIndex: number): void => {
+      get()._pushSnapshot();
+      set((state) => {
+        const rows = [...state.rows];
+        const [moved] = rows.splice(fromIndex, 1);
+        rows.splice(toIndex, 0, moved);
+        return { rows, isDirty: true };
+      });
+    },
+
+    updateSectionSettings: (
+      sectionKey: string,
+      settings: Partial<SectionSettings>
+    ): void => {
+      set((state) => ({
+        rows: state.rows.map((item) =>
+          item._key === sectionKey && isPageSection(item)
+            ? { ...item, settings: { ...item.settings, ...settings } }
+            : item
+        ),
+        isDirty: true,
+      }));
+    },
+
+    /** BUG-013 fix: Update responsive overrides for a PageSection */
+    updateSectionResponsive: (
+      sectionKey: string,
+      responsive: PageSection["responsive"]
+    ): void => {
+      set((state) => ({
+        rows: state.rows.map((item) =>
+          item._key === sectionKey && isPageSection(item)
+            ? { ...item, responsive }
+            : item
+        ),
+        isDirty: true,
+      }));
+    },
+
+    updateSectionBlock: (sectionKey: string, updates: Partial<ContentBlock>): void => {
+      set((state) => ({
+        rows: state.rows.map((item) => {
+          if (item._key !== sectionKey || !isPageSection(item)) return item;
+          const block = item.block[0];
+          if (!block) return item;
+          return {
+            ...item,
+            block: [{ ...block, ...updates } as SectionBlock],
+          };
+        }),
+        isDirty: true,
+      }));
+    },
+
+    deleteSection: (sectionKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: state.rows.filter((item) => item._key !== sectionKey),
+        selectedRowKey:
+          state.selectedRowKey === sectionKey ? null : state.selectedRowKey,
+        selectedColumnKey:
+          state.selectedRowKey === sectionKey ? null : state.selectedColumnKey,
+        selectedBlockKey:
+          state.selectedRowKey === sectionKey ? null : state.selectedBlockKey,
+        isDirty: true,
+      }));
+    },
+
+    duplicateSection: (sectionKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => {
+        const idx = state.rows.findIndex((item) => item._key === sectionKey);
+        if (idx === -1) return state;
+        const original = state.rows[idx];
+        // Deep clone and assign new keys
+        const clone = JSON.parse(JSON.stringify(original)) as ContentItem;
+        clone._key = generateKey();
+        // Re-key internal structures
+        if (isPageSection(clone)) {
+          if (clone.block.length > 0) {
+            clone.block = [
+              { ...clone.block[0], _key: generateKey() },
+            ] as [SectionBlock];
+          }
+        } else if (isPageSectionV2(clone)) {
+          (clone as PageSectionV2).columns = (clone as PageSectionV2).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) => ({
+            ...slide,
+            _key: generateKey(),
+            columns: slide.columns.map((col) => ({
+              ...col,
+              _key: generateKey(),
+              blocks: col.blocks.map((b) => ({ ...b, _key: generateKey() })),
+            })),
+          }));
+        }
+        const rows = [...state.rows];
+        rows.splice(idx + 1, 0, clone);
+        return {
+          rows,
+          selectedRowKey: clone._key,
+          selectedColumnKey: null,
+          selectedBlockKey: null,
+          isDirty: true,
+        };
+      });
+    },
+
+    // ---- V2 Section operations ----
+
+    addSectionV2: (preset: SectionV2Preset, afterRowKey?: string | null): void => {
+      get()._pushSnapshot();
+
+      const result = addSectionV2InState(get().rows, preset, afterRowKey);
+      set({ rows: result.rows, isDirty: true, selectedRowKey: result.newSectionKey });
+    },
+
+    addColumnV2: (sectionKey: string, gridRow: number, gridColumn: number, span: number): void => {
+      get()._pushSnapshot();
+
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => {
+          const newKey = generateKey();
+          const updatedCascade = cascadeAddColumn(
+            toCascadeColumns(section.columns),
+            gridRow,
+            gridColumn,
+            span,
+            newKey,
+            section.settings.grid_columns
+          );
+          const updatedColumns = applyBlocksToColumns(
+            updatedCascade,
+            section.columns
+          );
+          const newPreset = detectPreset(
+            updatedCascade,
+            section.settings.grid_columns
+          );
+          return {
+            ...section,
+            columns: updatedColumns,
+            settings: { ...section.settings, preset: newPreset },
+          };
+        });
+        return { rows, isDirty: true };
+      });
+    },
+
+    deleteColumnV2: (sectionKey: string, columnKey: string): void => {
+      get()._pushSnapshot();
+
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => {
+          const updatedColumns = section.columns.filter(
+            (c) => c._key !== columnKey
+          );
+          const cascadeCols = updatedColumns.map((c) => ({
+            _key: c._key,
+            grid_column: c.grid_column,
+            grid_row: c.grid_row,
+            span: c.span,
+          }));
+          const newPreset = detectPreset(
+            cascadeCols,
+            section.settings.grid_columns
+          );
+          return {
+            ...section,
+            columns: updatedColumns,
+            settings: { ...section.settings, preset: newPreset },
+          };
+        });
+        return {
+          rows,
+          selectedColumnKey:
+            state.selectedColumnKey === columnKey ? null : state.selectedColumnKey,
+          isDirty: true,
+        };
+      });
+    },
+
+    resizeColumnV2: (sectionKey: string, columnKey: string, newSpan: number): void => {
+      get()._pushSnapshot();
+
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => {
+          const updatedCascade = cascadeResizeColumn(
+            toCascadeColumns(section.columns),
+            columnKey,
+            newSpan,
+            section.settings.grid_columns
+          );
+          const updatedColumns = applyBlocksToColumns(
+            updatedCascade,
+            section.columns
+          );
+          const newPreset = detectPreset(
+            updatedCascade,
+            section.settings.grid_columns
+          );
+          return {
+            ...section,
+            columns: updatedColumns,
+            settings: { ...section.settings, preset: newPreset },
+          };
+        });
+        return { rows, isDirty: true };
+      });
+    },
+
+    resizeColumnV2Left: (sectionKey: string, columnKey: string, newGridColumn: number): void => {
+      const result = resizeColumnV2LeftInState(
+        get().rows,
+        sectionKey,
+        columnKey,
+        newGridColumn
+      );
+      if (!result) return; // Blocked by cascade or section not found
+
+      get()._pushSnapshot();
+      set({ rows: result.rows, isDirty: true });
+    },
+
+    moveColumnV2: (sectionKey: string, columnKey: string, targetRow: number, targetColumn: number): void => {
+      const result = moveColumnV2InState(
+        get().rows,
+        sectionKey,
+        columnKey,
+        targetRow,
+        targetColumn
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      set({ rows: result.rows, isDirty: true });
+    },
+
+    swapColumnV2: (sectionKey: string, draggedKey: string, targetKey: string): void => {
+      const result = swapColumnV2InState(
+        get().rows,
+        sectionKey,
+        draggedKey,
+        targetKey
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      set({ rows: result.rows, isDirty: true });
+    },
+
+    moveColumnToGapV2: (sectionKey: string, columnKey: string, targetRow: number, targetColumn: number, targetSpan: number): void => {
+      const result = moveColumnToGapV2InState(
+        get().rows,
+        sectionKey,
+        columnKey,
+        targetRow,
+        targetColumn,
+        targetSpan
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      set({ rows: result.rows, isDirty: true });
+    },
+
+    applyPresetV2: (sectionKey: string, preset: SectionV2Preset): void => {
+      if (preset === "custom") return;
+
+      get()._pushSnapshot();
+
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => {
+          if (section.settings.preset === preset) return section;
+          const cascadeCols = columnsFromPreset(
+            preset as Exclude<typeof preset, "custom">,
+            section.settings.grid_columns,
+            generateKey
+          );
+          const newColumns = cascadeCols.map((c) => ({
+            ...c,
+            blocks: [] as ContentBlock[],
+          }));
+          return {
+            ...section,
+            columns: newColumns,
+            settings: { ...section.settings, preset },
+          };
+        });
+        return { rows, isDirty: true };
+      });
+    },
+
+    updateSectionV2Settings: (sectionKey: string, settings: Partial<SectionV2Settings>): void => {
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (path) {
+          const rows = updateSectionAtPath(state.rows, path, (section) => ({
+            ...section,
+            settings: { ...section.settings, ...settings },
+          }));
+          return { rows, isDirty: true };
+        }
+        // Fallback: check if key matches a CustomSectionInstance (per-instance overrides)
+        const instance = state.rows.find(
+          (r) => r._key === sectionKey && isCustomSectionInstance(r)
+        );
+        if (instance) {
+          const inst = instance as CustomSectionInstance;
+          return {
+            rows: state.rows.map((r) =>
+              r._key === sectionKey
+                ? {
+                    ...r,
+                    settings_overrides: {
+                      ...(inst.settings_overrides || {}),
+                      ...settings,
+                    },
+                  }
+                : r
+            ),
+            isDirty: true,
+          };
+        }
+        return state;
+      });
+    },
+
+    updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]): void => {
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (path) {
+          const rows = updateSectionAtPath(state.rows, path, (section) => ({
+            ...section,
+            responsive,
+          }));
+          return { rows, isDirty: true };
+        }
+        // Fallback: check if key matches a CustomSectionInstance (per-instance responsive overrides)
+        const instance = state.rows.find(
+          (r) => r._key === sectionKey && isCustomSectionInstance(r)
+        );
+        if (instance) {
+          return {
+            rows: state.rows.map((r) =>
+              r._key === sectionKey
+                ? { ...r, responsive_overrides: responsive }
+                : r
+            ),
+            isDirty: true,
+          };
+        }
+        return state;
+      });
+    },
+
+    addBlockV2: (sectionKey: string, columnKey: string, blockType: BlockType, insertIndex?: number): void => {
+      get()._pushSnapshot();
+      const newBlock = createDefaultBlock(blockType);
+
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => ({
+          ...section,
+          columns: section.columns.map((col) => {
+            if (col._key !== columnKey) return col;
+            if (
+              insertIndex !== undefined &&
+              insertIndex >= 0 &&
+              insertIndex < col.blocks.length
+            ) {
+              const blocks = [...col.blocks];
+              blocks.splice(insertIndex, 0, newBlock);
+              return { ...col, blocks };
+            }
+            return { ...col, blocks: [...col.blocks, newBlock] };
+          }),
+        }));
+        return { rows, selectedBlockKey: newBlock._key, isDirty: true };
+      });
+    },
+
+    selectColumnV2: (sectionKey: string | null, columnKey: string | null): void => {
+      set({
+        selectedRowKey: sectionKey,
+        selectedColumnKey: columnKey,
+        selectedBlockKey: null,
+      });
+    },
+
+    // Session 117: Update enter animation on a V2 column
+    updateColumnEnterAnimation: (sectionKey: string, colKey: string, config: EnterAnimationConfig | undefined): void => {
+      set((state) => {
+        const path = findSectionPath(state.rows, sectionKey);
+        if (!path) return state;
+        const rows = updateSectionAtPath(state.rows, path, (section) => ({
+          ...section,
+          columns: section.columns.map((col) =>
+            col._key === colKey ? { ...col, enter_animation: config } : col
+          ),
+        }));
+        return { rows, isDirty: true };
+      });
+    },
+
+    // ---- Custom Section Instance operations (Session 108) ----
+
+    addCustomSectionInstance: (
+      id: string,
+      slug: string,
+      title: string,
+      afterRowKey?: string | null
+    ) => {
+      get()._pushSnapshot();
+      const instance: CustomSectionInstance = {
+        _type: "customSectionInstance",
+        _key: generateKey(),
+        custom_section_id: id,
+        custom_section_slug: slug,
+        custom_section_title: title,
+      };
+
+      set((state) => {
+        const rows = [...state.rows];
+        if (afterRowKey) {
+          const idx = rows.findIndex((r) => r._key === afterRowKey);
+          if (idx !== -1) {
+            rows.splice(idx + 1, 0, instance);
+          } else {
+            rows.push(instance);
+          }
+        } else {
+          rows.push(instance);
+        }
+        return { rows, isDirty: true, selectedRowKey: instance._key };
+      });
+    },
+
+    detachCustomSectionInstance: (
+      instanceKey: string,
+      sectionData: PageSectionV2
+    ) => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: state.rows.map((item) =>
+          item._key === instanceKey
+            ? { ...sectionData, _key: generateKey() }
+            : item
+        ),
+        isDirty: true,
+      }));
+    },
+
+    /**
+     * Update a cached custom section instance title (M1 audit fix — Session 110).
+     * Called when the card detects the remote title differs from the cached one.
+     * Does NOT push undo snapshot (cosmetic-only update).
+     */
+    updateCustomSectionInstanceTitle: (instanceKey: string, newTitle: string): void => {
+      set((state) => ({
+        rows: state.rows.map((item) =>
+          item._key === instanceKey && isCustomSectionInstance(item)
+            ? { ...item, custom_section_title: newTitle }
+            : item
+        ),
+        isDirty: true,
+      }));
+    },
+
+    /** Update per-instance section settings overrides (spacing, background, border, animation).
+     *  Merges with existing overrides — pass only the fields to change. */
+    updateCustomSectionInstanceSettings: (
+      instanceKey: string,
+      updates: Partial<SectionV2Settings>
+    ) => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: state.rows.map((item) =>
+          item._key === instanceKey && isCustomSectionInstance(item)
+            ? {
+                ...item,
+                settings_overrides: {
+                  ...((item as CustomSectionInstance).settings_overrides || {}),
+                  ...updates,
+                },
+              }
+            : item
+        ),
+        isDirty: true,
+      }));
+    },
+
+    /** Cache base settings from a fetched custom section.
+     *  Called by CustomSectionInstanceCard and ReadOnlyCustomSection after data fetch.
+     *  SortableRow reads this to merge base settings with per-instance overrides. */
+    cacheCustomSectionSettings: (sectionId: string, settings: SectionV2Settings): void => {
+      set((state) => ({
+        _customSectionCache: { ...state._customSectionCache, [sectionId]: settings },
+      }));
+    },
+
+    // ---- Parallax Group operations (Session 123) ----
+
+    addParallaxGroup: (afterRowKey?: string | null): void => {
+      get()._pushSnapshot();
+      const result = addParallaxGroupInState(get().rows, afterRowKey);
+      set({ rows: result.rows, isDirty: true, selectedRowKey: result.newGroupKey });
+    },
+
+    addParallaxSlide: (groupKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: state.rows.map((item) => {
+          if (item._key !== groupKey || !isParallaxGroup(item)) return item;
+          const group = item as ParallaxGroup;
+          const newSlide: ParallaxSlideV2 = createDefaultParallaxSlide();
+          return { ...group, slides: [...group.slides, newSlide] } as ContentItem;
+        }),
+        isDirty: true,
+      }));
+    },
+
+    removeParallaxSlide: (groupKey: string, slideKey: string): void => {
+      get()._pushSnapshot();
+      set((state) => {
+        let changed = false;
+        const rows = state.rows.map((item) => {
+          if (item._key !== groupKey || !isParallaxGroup(item)) return item;
+          const group = item as ParallaxGroup;
+          // Enforce minimum 1 slide
+          if (group.slides.length <= 1) return item;
+          changed = true;
+          return {
+            ...group,
+            slides: group.slides.filter((s) => s._key !== slideKey),
+          } as ContentItem;
+        });
+        return changed ? { rows, isDirty: true } : {};
+      });
+    },
+
+    moveParallaxSlide: (
+      groupKey: string,
+      slideKey: string,
+      direction: "up" | "down"
+    ) => {
+      get()._pushSnapshot();
+      set((state) => {
+        let changed = false;
+        const rows = state.rows.map((item) => {
+          if (item._key !== groupKey || !isParallaxGroup(item)) return item;
+          const group = item as ParallaxGroup;
+          const slides = [...group.slides];
+          const idx = slides.findIndex((s) => s._key === slideKey);
+          if (idx === -1) return item;
+          const targetIdx = direction === "up" ? idx - 1 : idx + 1;
+          if (targetIdx < 0 || targetIdx >= slides.length) return item;
+          [slides[idx], slides[targetIdx]] = [slides[targetIdx], slides[idx]];
+          changed = true;
+          return { ...group, slides } as ContentItem;
+        });
+        return changed ? { rows, isDirty: true } : {};
+      });
+    },
+
+    updateParallaxSlideBackground: (
+      groupKey: string,
+      slideKey: string,
+      fields: Partial<ParallaxSlideV2>
+    ) => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: state.rows.map((item) => {
+          if (item._key !== groupKey || !isParallaxGroup(item)) return item;
+          const group = item as ParallaxGroup;
+          return {
+            ...group,
+            slides: group.slides.map((s) =>
+              s._key === slideKey ? { ...s, ...fields } : s
+            ),
+          } as ContentItem;
+        }),
+        isDirty: true,
+      }));
+    },
+
+    updateParallaxGroupSettings: (
+      groupKey: string,
+      fields: Partial<
+        Pick<ParallaxGroup, "transition_effect" | "snap_enabled" | "parallax_intensity">
+      >
+    ) => {
+      get()._pushSnapshot();
+      set((state) => ({
+        rows: state.rows.map((item) => {
+          if (item._key !== groupKey || !isParallaxGroup(item)) return item;
+          return { ...item, ...fields } as ContentItem;
+        }),
+        isDirty: true,
+      }));
+    },
+  };
+}