@morphika/andami 0.4.1 → 0.5.0

package/lib/builder/store-helpers.ts

@@ -16,10 +16,16 @@ import type {
   SectionColumn,
   SectionV2Preset,
   CoverSection,
+  CoverSectionResponsiveOverride,
 } 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 {
+  resizeColumnLeft as cascadeResizeLeft,
+  moveColumn as cascadeMoveColumn,
+  addColumn as cascadeAddColumn,
+  type ResizeLeftResult,
+} from "./cascade";
 import { applyBlocksToColumns, toCascadeColumns, type CascadeColumn } from "./cascade-helpers";
 import { generateKey } from "./utils";
 import { createDefaultParallaxSlide } from "./defaults";
@@ -480,6 +486,25 @@ export function updateSectionAtPath(
     return rows.map((item, i) => {
       if (i !== path.index || !isCoverSection(item)) return item;
       const cover = item as CoverSection;
+
+      // Passthrough of `responsive.tablet/phone.columns` only — V2 operations
+      // (column DnD, resize) read and write this field, and its shape
+      // (`ColumnOverride[]`) is identical between V2 and Cover. We do NOT
+      // expose Cover-specific fields (`cover_rows`, Cover `settings`) to the
+      // updater via virtualSection.responsive — those stay on the cover
+      // unchanged. This keeps the virtualSection's shape a true V2.
+      const virtualResponsive: PageSectionV2["responsive"] =
+        cover.responsive?.tablet?.columns || cover.responsive?.phone?.columns
+          ? {
+              ...(cover.responsive.tablet?.columns
+                ? { tablet: { columns: cover.responsive.tablet.columns } }
+                : {}),
+              ...(cover.responsive.phone?.columns
+                ? { phone: { columns: cover.responsive.phone.columns } }
+                : {}),
+            }
+          : undefined;
+
       const virtualSection: PageSectionV2 = {
         _type: "pageSectionV2",
         _key: cover._key,
@@ -497,11 +522,34 @@ export function updateSectionAtPath(
           enter_animation: cover.settings.enter_animation,
           stagger: cover.settings.stagger,
         },
+        responsive: virtualResponsive,
       };
       const updated = updater(virtualSection);
+
+      // Merge updated `responsive.columns` back into cover.responsive,
+      // preserving `cover_rows` and Cover-specific `settings` per viewport.
+      const mergedResponsive: CoverSection["responsive"] = {};
+      for (const vp of ["tablet", "phone"] as const) {
+        const existing: CoverSectionResponsiveOverride = {
+          ...(cover.responsive?.[vp] || {}),
+        };
+        const updatedCols = updated.responsive?.[vp]?.columns;
+        if (updatedCols === undefined) {
+          delete existing.columns;
+        } else {
+          existing.columns = updatedCols;
+        }
+        if (existing.columns || existing.cover_rows || existing.settings) {
+          mergedResponsive[vp] = existing;
+        }
+      }
+
       return {
         ...cover,
         columns: updated.columns,
+        responsive: Object.keys(mergedResponsive).length
+          ? mergedResponsive
+          : undefined,
         settings: {
           ...cover.settings,
           grid_columns: updated.settings.grid_columns,
@@ -582,3 +630,299 @@ export function addParallaxGroupInState(
 
   return { rows: newRows, newGroupKey: newGroup._key };
 }
+
+// ============================================
+// moveColumnBetweenSectionsInState (Session 183 — cross-section column DnD)
+// ============================================
+
+export interface MoveColumnBetweenSectionsResult {
+  rows: ContentItem[];
+  /** Final span after clamping to target grid. */
+  finalSpan: number;
+  /** Final grid_column after clamping. */
+  finalGridColumn: number;
+}
+
+/**
+ * Move a column from one columnar section to another (V2 ↔ Cover).
+ *
+ * Blocks travel with the column. Responsive overrides for the moved
+ * column are STRIPPED from the source section — responsive overrides
+ * are per-section `_key` lookups and don't carry semantic meaning in
+ * the new home. Tablet/phone layouts for the moved column revert to
+ * desktop until the user re-adds overrides in the target.
+ *
+ * Span and grid_column are clamped to target's grid_columns.
+ *
+ * Returns null if:
+ *   - source or target key doesn't resolve to a columnar section
+ *   - source and target are the same section (caller should use
+ *     moveColumnV2InState instead)
+ *   - the column key doesn't exist in the source
+ */
+export function moveColumnBetweenSectionsInState(
+  rows: ContentItem[],
+  sourceSectionKey: string,
+  columnKey: string,
+  targetSectionKey: string,
+  targetRow: number,
+  targetColumn: number,
+  targetSpan: number,
+): MoveColumnBetweenSectionsResult | null {
+  if (sourceSectionKey === targetSectionKey) return null;
+
+  const sourcePath = findSectionPath(rows, sourceSectionKey);
+  const targetPath = findSectionPath(rows, targetSectionKey);
+  if (!sourcePath || !targetPath) return null;
+
+  // Read the source column (full SectionColumn with blocks)
+  const sourceVirtual = getSectionFromPath(rows, sourcePath);
+  if (!sourceVirtual) return null;
+  const movedColumn = sourceVirtual.columns.find((c) => c._key === columnKey);
+  if (!movedColumn) return null;
+
+  // Read target for grid_columns
+  const targetVirtual = getSectionFromPath(rows, targetPath);
+  if (!targetVirtual) return null;
+  const targetGridCols = targetVirtual.settings.grid_columns || 12;
+
+  // Clamp span + grid column to target grid
+  const clampedSpan = Math.max(1, Math.min(targetSpan, targetGridCols));
+  const clampedCol = Math.max(
+    1,
+    Math.min(targetColumn, targetGridCols - clampedSpan + 1),
+  );
+
+  // --- Step 1: Remove column from source, strip its responsive overrides ---
+  let newRows = updateSectionAtPath(rows, sourcePath, (section) => {
+    const filteredColumns = section.columns.filter((c) => c._key !== columnKey);
+
+    // Strip responsive overrides referencing the moved column
+    let newResponsive = section.responsive;
+    if (newResponsive) {
+      const cleanResponsive: PageSectionV2["responsive"] = {};
+      for (const vp of ["tablet", "phone"] as const) {
+        const vpData = newResponsive[vp];
+        if (!vpData) continue;
+        const newVpData: NonNullable<PageSectionV2["responsive"]>[typeof vp] = {
+          ...vpData,
+        };
+        if (newVpData.columns) {
+          const filtered = newVpData.columns.filter((o) => o._key !== columnKey);
+          newVpData.columns = filtered.length > 0 ? filtered : undefined;
+        }
+        // Keep viewport entry only if it still has something
+        if (newVpData.columns || newVpData.settings) {
+          cleanResponsive[vp] = newVpData;
+        }
+      }
+      newResponsive =
+        Object.keys(cleanResponsive).length > 0 ? cleanResponsive : undefined;
+    }
+
+    const cascadeCols = toCascadeColumns(filteredColumns);
+    const newPreset = detectPreset(cascadeCols, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: filteredColumns,
+      responsive: newResponsive,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  // --- Step 2: Insert the column into target with cascade ---
+  newRows = updateSectionAtPath(newRows, targetPath, (section) => {
+    // Augment the source list so `applyBlocksToColumns` can find the moved
+    // column's blocks by key. The position fields here are overwritten by
+    // cascade; only the blocks matter for the lookup.
+    const augmentedSource: SectionColumn[] = [
+      ...section.columns,
+      {
+        ...movedColumn,
+        grid_row: targetRow,
+        grid_column: clampedCol,
+        span: clampedSpan,
+      },
+    ];
+
+    const cascadeResult = cascadeAddColumn(
+      toCascadeColumns(section.columns),
+      targetRow,
+      clampedCol,
+      clampedSpan,
+      columnKey,
+      section.settings.grid_columns,
+    );
+
+    const finalColumns = applyBlocksToColumns(cascadeResult, augmentedSource);
+    const newPreset = detectPreset(cascadeResult, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: finalColumns,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  return {
+    rows: newRows,
+    finalSpan: clampedSpan,
+    finalGridColumn: clampedCol,
+  };
+}
+
+// ============================================
+// swapColumnsBetweenSectionsInState (Session 183 — cross-section column swap)
+// ============================================
+
+export interface SwapColumnsBetweenSectionsResult {
+  rows: ContentItem[];
+}
+
+/**
+ * Swap two columns across different columnar sections (V2 ↔ Cover).
+ *
+ * Semantically identical to the intra-section `swapColumnV2InState`:
+ * each column adopts the other's position/row/span. The difference is
+ * that the columns live in DIFFERENT sections, so each has to travel.
+ * Blocks go with their owner column.
+ *
+ * Clamping: when the two sections have different `grid_columns`, each
+ * column's new span and grid_column are clamped to fit the destination
+ * grid. Clamping is defensive — if both sections share 12 columns (the
+ * common case), no clamping happens.
+ *
+ * Responsive: overrides for BOTH swapped columns are stripped from both
+ * sections' responsive tables. Overrides live per-section by `_key`
+ * lookup; transplanting either direction would leave orphaned entries.
+ *
+ * Returns null if:
+ *   - source and target are the same section
+ *   - either key doesn't resolve to a columnar section
+ *   - either column key doesn't exist in its section
+ */
+export function swapColumnsBetweenSectionsInState(
+  rows: ContentItem[],
+  sourceSectionKey: string,
+  sourceColumnKey: string,
+  targetSectionKey: string,
+  targetColumnKey: string,
+): SwapColumnsBetweenSectionsResult | null {
+  if (sourceSectionKey === targetSectionKey) return null;
+
+  const sourcePath = findSectionPath(rows, sourceSectionKey);
+  const targetPath = findSectionPath(rows, targetSectionKey);
+  if (!sourcePath || !targetPath) return null;
+
+  const sourceVirtual = getSectionFromPath(rows, sourcePath);
+  const targetVirtual = getSectionFromPath(rows, targetPath);
+  if (!sourceVirtual || !targetVirtual) return null;
+
+  const sourceCol = sourceVirtual.columns.find((c) => c._key === sourceColumnKey);
+  const targetCol = targetVirtual.columns.find((c) => c._key === targetColumnKey);
+  if (!sourceCol || !targetCol) return null;
+
+  const sourceGridCols = sourceVirtual.settings.grid_columns || 12;
+  const targetGridCols = targetVirtual.settings.grid_columns || 12;
+
+  // Clamp source column's new dimensions (adopting target's position) to target grid
+  const newSourceSpan = Math.max(1, Math.min(targetCol.span, targetGridCols));
+  const newSourceGridCol = Math.max(
+    1,
+    Math.min(targetCol.grid_column, targetGridCols - newSourceSpan + 1),
+  );
+
+  // Clamp target column's new dimensions (adopting source's position) to source grid
+  const newTargetSpan = Math.max(1, Math.min(sourceCol.span, sourceGridCols));
+  const newTargetGridCol = Math.max(
+    1,
+    Math.min(sourceCol.grid_column, sourceGridCols - newTargetSpan + 1),
+  );
+
+  // --- Helper: strip responsive overrides for a given column key ---
+  const stripResponsiveForKey = (
+    responsive: PageSectionV2["responsive"],
+    columnKey: string,
+  ): PageSectionV2["responsive"] => {
+    if (!responsive) return responsive;
+    const cleanResponsive: PageSectionV2["responsive"] = {};
+    for (const vp of ["tablet", "phone"] as const) {
+      const vpData = responsive[vp];
+      if (!vpData) continue;
+      const newVpData: NonNullable<PageSectionV2["responsive"]>[typeof vp] = {
+        ...vpData,
+      };
+      if (newVpData.columns) {
+        const filtered = newVpData.columns.filter((o) => o._key !== columnKey);
+        newVpData.columns = filtered.length > 0 ? filtered : undefined;
+      }
+      if (newVpData.columns || newVpData.settings) {
+        cleanResponsive[vp] = newVpData;
+      }
+    }
+    return Object.keys(cleanResponsive).length > 0 ? cleanResponsive : undefined;
+  };
+
+  // --- Step 1: Replace source column with target column (transplanted) ---
+  // Also strip sourceColumnKey's responsive overrides.
+  let newRows = updateSectionAtPath(rows, sourcePath, (section) => {
+    // Build the transplanted column with target's blocks, adopting
+    // source's OLD position/row/span (clamped to source grid).
+    const transplanted: SectionColumn = {
+      ...targetCol,
+      grid_row: sourceCol.grid_row,
+      grid_column: newTargetGridCol,
+      span: newTargetSpan,
+    };
+    const updatedColumns = section.columns.map((c) =>
+      c._key === sourceColumnKey ? transplanted : c,
+    );
+
+    const newResponsive = stripResponsiveForKey(
+      section.responsive,
+      sourceColumnKey,
+    );
+
+    const cascadeCols = toCascadeColumns(updatedColumns);
+    const newPreset = detectPreset(cascadeCols, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: updatedColumns,
+      responsive: newResponsive,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  // --- Step 2: Replace target column with source column (transplanted) ---
+  // Also strip targetColumnKey's responsive overrides.
+  newRows = updateSectionAtPath(newRows, targetPath, (section) => {
+    const transplanted: SectionColumn = {
+      ...sourceCol,
+      grid_row: targetCol.grid_row,
+      grid_column: newSourceGridCol,
+      span: newSourceSpan,
+    };
+    const updatedColumns = section.columns.map((c) =>
+      c._key === targetColumnKey ? transplanted : c,
+    );
+
+    const newResponsive = stripResponsiveForKey(
+      section.responsive,
+      targetColumnKey,
+    );
+
+    const cascadeCols = toCascadeColumns(updatedColumns);
+    const newPreset = detectPreset(cascadeCols, section.settings.grid_columns);
+
+    return {
+      ...section,
+      columns: updatedColumns,
+      responsive: newResponsive,
+      settings: { ...section.settings, preset: newPreset },
+    };
+  });
+
+  return { rows: newRows };
+}

package/lib/builder/store-sections.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState, BlockType } from "./types";
+import type { BuilderStore, BuilderState, BlockType, SectionSliceActions } from "./types";
 import type {
   ContentBlock,
   ContentItem,
@@ -38,6 +38,8 @@ import {
   moveColumnV2InState,
   swapColumnV2InState,
   moveColumnToGapV2InState,
+  moveColumnBetweenSectionsInState,
+  swapColumnsBetweenSectionsInState,
 } from "./store-helpers";
 
 type StoreSet = (
@@ -45,7 +47,7 @@ type StoreSet = (
 ) => void;
 type StoreGet = () => BuilderStore;
 
-export function createSectionActions(set: StoreSet, get: StoreGet) {
+export function createSectionActions(set: StoreSet, get: StoreGet): SectionSliceActions {
   return {
     // ---- Section operations ----
 
@@ -339,6 +341,64 @@ export function createSectionActions(set: StoreSet, get: StoreGet) {
       set({ rows: result.rows, isDirty: true });
     },
 
+    moveColumnBetweenSections: (
+      sourceSectionKey: string,
+      columnKey: string,
+      targetSectionKey: string,
+      targetRow: number,
+      targetColumn: number,
+      targetSpan: number,
+    ): void => {
+      const result = moveColumnBetweenSectionsInState(
+        get().rows,
+        sourceSectionKey,
+        columnKey,
+        targetSectionKey,
+        targetRow,
+        targetColumn,
+        targetSpan,
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      // Clear any selection referencing the moved column in its old section —
+      // the column key remains but the "selected section" context has changed.
+      set({
+        rows: result.rows,
+        isDirty: true,
+        selectedColumnKey: columnKey,
+        selectedRowKey: targetSectionKey,
+        selectedBlockKey: null,
+      });
+    },
+
+    swapColumnsBetweenSections: (
+      sourceSectionKey: string,
+      sourceColumnKey: string,
+      targetSectionKey: string,
+      targetColumnKey: string,
+    ): void => {
+      const result = swapColumnsBetweenSectionsInState(
+        get().rows,
+        sourceSectionKey,
+        sourceColumnKey,
+        targetSectionKey,
+        targetColumnKey,
+      );
+      if (!result) return;
+
+      get()._pushSnapshot();
+      // After swap: the dragged column now lives in the target section.
+      // Select it there (match mental model: "I just put this column here").
+      set({
+        rows: result.rows,
+        isDirty: true,
+        selectedColumnKey: sourceColumnKey,
+        selectedRowKey: targetSectionKey,
+        selectedBlockKey: null,
+      });
+    },
+
     applyPresetV2: (sectionKey: string, preset: SectionV2Preset): void => {
       if (preset === "custom") return;