@morphika/webframe 0.1.0

package/lib/builder/store-helpers.ts

@@ -0,0 +1,490 @@
+/**
+ * Pure helper functions extracted from Zustand store actions.
+ *
+ * Each function takes immutable state and returns new state —
+ * no side effects, no store references, fully testable.
+ *
+ * Session 96: Store Action Extraction
+ */
+
+import type {
+  ContentBlock,
+  ContentItem,
+  PageSectionV2,
+  ParallaxGroup,
+  ParallaxSlideV2,
+  SectionColumn,
+  SectionV2Preset,
+} from "../../lib/sanity/types";
+import { isPageSection, isPageSectionV2, isParallaxGroup } 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";
+import { generateKey } from "./utils";
+import { createDefaultParallaxSlide } from "./defaults";
+
+// ============================================
+// moveBlockInState
+// ============================================
+
+export interface MoveBlockResult {
+  rows: ContentItem[];
+}
+
+/**
+ * Move a block from its current position to a target column in a V2 section.
+ * Returns null if the move is invalid (block not found, target not V2).
+ *
+ * Pure function — no store access.
+ */
+export function moveBlockInState(
+  rows: ContentItem[],
+  blockKey: string,
+  targetSectionKey: string,
+  targetColumnKey: string,
+  toIndex: number
+): MoveBlockResult | null {
+  // Validate target exists as a V2 section or parallax slide
+  const targetPath = findSectionPath(rows, targetSectionKey);
+  if (!targetPath) return null;
+
+  let movedBlock: ContentBlock | null = null;
+
+  const removeFromColumns = (columns: SectionColumn[]) =>
+    columns.map((c) => {
+      const blocks = [...c.blocks];
+      const idx = blocks.findIndex((b) => b._key === blockKey);
+      if (idx !== -1) {
+        [movedBlock] = blocks.splice(idx, 1);
+      }
+      return { ...c, blocks };
+    });
+
+  // Pass 1: find and remove block from all sections (V2 + parallax slides)
+  const rowsAfterRemove = rows.map((item) => {
+    if (isPageSectionV2(item)) {
+      return { ...item, columns: removeFromColumns(item.columns) } as ContentItem;
+    }
+    if (isParallaxGroup(item)) {
+      const group = item as ParallaxGroup;
+      return {
+        ...group,
+        slides: group.slides.map((slide) => ({
+          ...slide,
+          columns: removeFromColumns(slide.columns),
+        })),
+      } as ContentItem;
+    }
+    return item;
+  });
+
+  if (!movedBlock) return null;
+
+  // Pass 2: insert into target column using the path-based approach
+  const insertIntoColumns = (columns: SectionColumn[]) =>
+    columns.map((c) => {
+      if (c._key !== targetColumnKey) return c;
+      const blocks = [...c.blocks];
+      blocks.splice(toIndex, 0, movedBlock!);
+      return { ...c, blocks };
+    });
+
+  const finalRows = updateSectionAtPath(rowsAfterRemove, targetPath, (section) => ({
+    ...section,
+    columns: insertIntoColumns(section.columns),
+  }));
+
+  return { rows: finalRows };
+}
+
+// ============================================
+// resizeColumnV2LeftInState
+// ============================================
+
+export interface ResizeColumnLeftResult {
+  rows: ContentItem[];
+  /** Key of the left neighbor that was compressed, if any */
+  compressedNeighborKey: string | null;
+  /** True when the left neighbor is at minimum span (1) — further expansion blocked */
+  neighborAtMinimum: boolean;
+}
+
+/**
+ * Resize a V2 column by moving its left edge.
+ * When expanding into a left neighbor, the neighbor is compressed (down to span 1).
+ * Returns null only if the operation is completely impossible.
+ *
+ * Pure function — no store access.
+ */
+export function resizeColumnV2LeftInState(
+  rows: ContentItem[],
+  sectionKey: string,
+  columnKey: string,
+  newGridColumn: number
+): ResizeColumnLeftResult | null {
+  const path = findSectionPath(rows, sectionKey);
+  if (!path) return null;
+  const section = getSectionFromPath(rows, path);
+  if (!section) return null;
+
+  const cascadeCols = toCascadeColumns(section.columns);
+  const result = cascadeResizeLeft(cascadeCols, columnKey, newGridColumn, section.settings.grid_columns);
+  if (!result) return null;
+
+  const updatedColumns = applyBlocksToColumns(result.columns, section.columns);
+  const newPreset = detectPreset(result.columns, section.settings.grid_columns);
+
+  const newRows = updateSectionAtPath(rows, path, (sec) => ({
+    ...sec,
+    columns: updatedColumns,
+    settings: { ...sec.settings, preset: newPreset },
+  }));
+
+  return {
+    rows: newRows,
+    compressedNeighborKey: result.compressedNeighborKey,
+    neighborAtMinimum: result.neighborAtMinimum,
+  };
+}
+
+// ============================================
+// addSectionV2InState
+// ============================================
+
+export interface AddSectionV2Result {
+  rows: ContentItem[];
+  newSectionKey: string;
+}
+
+/**
+ * Create a new V2 section with the given preset and insert it into the rows.
+ * Returns the new rows array and the key of the created section.
+ *
+ * Pure function — uses generateKey() for side effects (unique IDs), but
+ * is otherwise deterministic given the same key generation.
+ */
+export function addSectionV2InState(
+  rows: ContentItem[],
+  preset: SectionV2Preset,
+  afterRowKey?: string | null
+): AddSectionV2Result {
+  const gridColumns = 12;
+  let columns: SectionColumn[];
+
+  if (preset === "custom") {
+    columns = [{
+      _key: generateKey(),
+      grid_column: 1,
+      grid_row: 1,
+      span: gridColumns,
+      blocks: [],
+    }];
+  } else {
+    const keyFactory = () => generateKey();
+    const cascadeCols = columnsFromPreset(preset as Exclude<SectionV2Preset, "custom">, gridColumns, keyFactory);
+    columns = cascadeCols.map((c: CascadeColumn) => ({
+      ...c,
+      blocks: [] as ContentBlock[],
+    }));
+  }
+
+  const detectedPreset = detectPreset(columns, gridColumns);
+
+  const newSection: PageSectionV2 = {
+    _type: "pageSectionV2",
+    _key: generateKey(),
+    section_type: "empty-v2",
+    columns,
+    settings: {
+      preset: detectedPreset,
+      grid_columns: gridColumns,
+      col_gap: 20,
+      row_gap: 20,
+      spacing_top: "32",
+      spacing_bottom: "32",
+    },
+  };
+
+  const newRows = [...rows];
+  if (afterRowKey) {
+    const idx = newRows.findIndex((r) => r._key === afterRowKey);
+    if (idx !== -1) {
+      newRows.splice(idx + 1, 0, newSection);
+    } else {
+      newRows.push(newSection);
+    }
+  } else {
+    newRows.push(newSection);
+  }
+
+  return { rows: newRows, newSectionKey: newSection._key };
+}
+
+// ============================================
+// moveColumnV2InState
+// ============================================
+
+export interface MoveColumnV2Result {
+  rows: ContentItem[];
+}
+
+/**
+ * Move a V2 column to a new grid position within its section.
+ * Returns null if the section is not found.
+ *
+ * Pure function — no store access.
+ */
+export function moveColumnV2InState(
+  rows: ContentItem[],
+  sectionKey: string,
+  columnKey: string,
+  targetRow: number,
+  targetColumn: number
+): MoveColumnV2Result | null {
+  const path = findSectionPath(rows, sectionKey);
+  if (!path) return null;
+
+  const newRows = updateSectionAtPath(rows, path, (section) => {
+    const updatedCascade = cascadeMoveColumn(
+      toCascadeColumns(section.columns),
+      columnKey,
+      targetRow,
+      targetColumn,
+      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: newRows };
+}
+
+// -------------------------------------------------------
+// Swap two columns in a V2 section (exchange positions)
+// -------------------------------------------------------
+
+export interface SwapColumnV2Result {
+  rows: ContentItem[];
+}
+
+export function swapColumnV2InState(
+  rows: ContentItem[],
+  sectionKey: string,
+  draggedKey: string,
+  targetKey: string
+): SwapColumnV2Result | null {
+  const path = findSectionPath(rows, sectionKey);
+  if (!path) return null;
+
+  const newRows = updateSectionAtPath(rows, path, (section) => {
+    const draggedCol = section.columns.find((c) => c._key === draggedKey);
+    const targetCol = section.columns.find((c) => c._key === targetKey);
+    if (!draggedCol || !targetCol) return section;
+
+    const updatedColumns = section.columns.map((c) => {
+      if (c._key === draggedKey) {
+        return { ...c, grid_column: targetCol.grid_column, grid_row: targetCol.grid_row, span: targetCol.span };
+      }
+      if (c._key === targetKey) {
+        return { ...c, grid_column: draggedCol.grid_column, grid_row: draggedCol.grid_row, span: draggedCol.span };
+      }
+      return c;
+    });
+
+    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: newRows };
+}
+
+// -------------------------------------------------------
+// Move a column to an empty gap, adopting the gap's span
+// -------------------------------------------------------
+
+export interface MoveColumnToGapV2Result {
+  rows: ContentItem[];
+}
+
+export function moveColumnToGapV2InState(
+  rows: ContentItem[],
+  sectionKey: string,
+  columnKey: string,
+  targetRow: number,
+  targetColumn: number,
+  targetSpan: number
+): MoveColumnToGapV2Result | null {
+  const path = findSectionPath(rows, sectionKey);
+  if (!path) return null;
+
+  const newRows = updateSectionAtPath(rows, path, (section) => {
+    const col = section.columns.find((c) => c._key === columnKey);
+    if (!col) return section;
+
+    const updatedColumns = section.columns.map((c) => {
+      if (c._key !== columnKey) return c;
+      return { ...c, grid_column: targetColumn, grid_row: targetRow, span: targetSpan };
+    });
+
+    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: newRows };
+}
+
+// ============================================
+// findSectionPath — unified section lookup (V2 + ParallaxSlide)
+// ============================================
+
+export type SectionPath =
+  | { type: "v2"; index: number }
+  | { type: "parallaxSlide"; groupIndex: number; slideIndex: number };
+
+/**
+ * Find a V2 section by key — searches both top-level PageSectionV2
+ * and inside ParallaxGroup slides. Returns the path or null.
+ *
+ * This enables existing V2 actions (addColumnV2, addBlockV2, etc.)
+ * to work on parallax slides without signature changes — slides
+ * have unique _key values just like sections.
+ */
+export function findSectionPath(
+  rows: ContentItem[],
+  sectionKey: string
+): SectionPath | null {
+  for (let i = 0; i < rows.length; i++) {
+    const item = rows[i];
+    if (item._key === sectionKey && isPageSectionV2(item)) {
+      return { type: "v2", index: i };
+    }
+    if (isParallaxGroup(item)) {
+      const group = item as ParallaxGroup;
+      for (let j = 0; j < group.slides.length; j++) {
+        if (group.slides[j]._key === sectionKey) {
+          return { type: "parallaxSlide", groupIndex: i, slideIndex: j };
+        }
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Get a PageSectionV2 from any section path.
+ * For parallax slides, returns a virtual PageSectionV2 view of the slide.
+ */
+export function getSectionFromPath(
+  rows: ContentItem[],
+  path: SectionPath
+): PageSectionV2 | null {
+  if (path.type === "v2") {
+    const item = rows[path.index];
+    return isPageSectionV2(item) ? (item as PageSectionV2) : null;
+  }
+  const group = rows[path.groupIndex];
+  if (!isParallaxGroup(group)) return null;
+  const slide = (group as ParallaxGroup).slides[path.slideIndex];
+  if (!slide) return null;
+  return {
+    _type: "pageSectionV2",
+    _key: slide._key,
+    section_type: "empty-v2",
+    columns: slide.columns,
+    settings: slide.section_settings,
+  };
+}
+
+/**
+ * Apply an updater function to a section at a given path.
+ * For parallax slides, updates the slide in place within the group.
+ */
+export function updateSectionAtPath(
+  rows: ContentItem[],
+  path: SectionPath,
+  updater: (section: PageSectionV2) => PageSectionV2
+): ContentItem[] {
+  if (path.type === "v2") {
+    return rows.map((item, i) => {
+      if (i !== path.index || !isPageSectionV2(item)) return item;
+      return updater(item as PageSectionV2) as ContentItem;
+    });
+  }
+  // parallaxSlide path
+  return rows.map((item, i) => {
+    if (i !== path.groupIndex || !isParallaxGroup(item)) return item;
+    const group = item as ParallaxGroup;
+    const newSlides = group.slides.map((slide, j) => {
+      if (j !== path.slideIndex) return slide;
+      const virtualSection: PageSectionV2 = {
+        _type: "pageSectionV2",
+        _key: slide._key,
+        section_type: "empty-v2",
+        columns: slide.columns,
+        settings: slide.section_settings,
+      };
+      const updated = updater(virtualSection);
+      return {
+        ...slide,
+        columns: updated.columns,
+        section_settings: updated.settings,
+      };
+    });
+    return { ...group, slides: newSlides } as ContentItem;
+  });
+}
+
+// ============================================
+// addParallaxGroupInState
+// ============================================
+
+export interface AddParallaxGroupResult {
+  rows: ContentItem[];
+  newGroupKey: string;
+}
+
+/**
+ * Create a new ParallaxGroup with 1 empty slide and insert it into the rows.
+ */
+export function addParallaxGroupInState(
+  rows: ContentItem[],
+  afterRowKey?: string | null
+): AddParallaxGroupResult {
+  const defaultSlide: ParallaxSlideV2 = createDefaultParallaxSlide();
+
+  const newGroup: ParallaxGroup = {
+    _type: "parallaxGroup",
+    _key: generateKey(),
+    slides: [defaultSlide],
+    transition_effect: "parallax",
+    snap_enabled: true,
+    parallax_intensity: 0.4,
+  };
+
+  const newRows = [...rows];
+  if (afterRowKey) {
+    const idx = newRows.findIndex((r) => r._key === afterRowKey);
+    if (idx !== -1) {
+      newRows.splice(idx + 1, 0, newGroup);
+    } else {
+      newRows.push(newGroup);
+    }
+  } else {
+    newRows.push(newGroup);
+  }
+
+  return { rows: newRows, newGroupKey: newGroup._key };
+}