@morphika/andami 0.4.1 → 0.5.0

package/components/builder/hooks/useColumnDrag.ts

@@ -2,12 +2,68 @@
 
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useBuilderStore } from "../../../lib/builder/store";
-import type { PageSectionV2 } from "../../../lib/sanity/types";
-import { isPageSectionV2 } from "../../../lib/sanity/types";
+import type { PageSectionV2, CoverSection, ContentItem } from "../../../lib/sanity/types";
+import { isPageSectionV2, isCoverSection, isColumnarSection } from "../../../lib/sanity/types";
 import { getEffectiveColumnsV2, buildColumnV2Overrides } from "../settings-panel/responsive-helpers";
 import { moveColumn as cascadeMoveColumn } from "../../../lib/builder/cascade";
 import type { DeviceViewport } from "../../../lib/builder/types";
 
+/**
+ * View a Cover section as a PageSectionV2 for DnD purposes.
+ *
+ * Cover and V2 share the same column shape, grid_columns, and
+ * `responsive[vp].columns` shape — the fields read/written by column
+ * DnD. This shim lets us reuse getEffectiveColumnsV2/buildColumnV2Overrides
+ * without duplicating logic. Only `columns`, `settings.grid_columns`, and
+ * `responsive[vp].columns` are exposed; Cover-specific fields
+ * (`cover_rows`, Cover-specific `settings`) are hidden from the V2 helpers.
+ *
+ * The write-back path (`updateSectionV2Responsive` → `updateSectionAtPath`)
+ * merges column overrides back into the cover, preserving Cover-specific
+ * fields. See `store-helpers.ts :: updateSectionAtPath` cover branch.
+ */
+function coverAsV2(cover: CoverSection): PageSectionV2 {
+  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,
+    },
+    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,
+  };
+}
+
+/**
+ * Find the section by key and return a V2-shaped view of it (PageSectionV2
+ * directly, or Cover adapted via `coverAsV2`). Returns null if the section
+ * doesn't exist or is an unsupported type (parallax, custom instance).
+ */
+function findColumnarSection(
+  rows: ContentItem[],
+  sectionKey: string,
+): PageSectionV2 | null {
+  const section = rows.find((r) => r._key === sectionKey);
+  if (!section) return null;
+  if (isPageSectionV2(section)) return section as PageSectionV2;
+  if (isCoverSection(section)) return coverAsV2(section as CoverSection);
+  return null;
+}
+
 // ============================================
 // Types
 // ============================================
@@ -24,6 +80,22 @@ export interface DropTarget {
   /** insert: grid position where the column will be inserted */
   insertRow?: number;
   insertCol?: number;
+  /**
+   * Whether the drop is to a DIFFERENT section than the source.
+   * - false → same-section drag (existing behavior).
+   * - true  → cross-section move (must land on V2 or Cover; swap
+   *           across sections is not supported and is reported as
+   *           isValid=false below).
+   */
+  isCrossSection: boolean;
+  /**
+   * Whether the drop is legal. Set to false when:
+   *   - target section is not a columnar section (parallax, custom-instance)
+   *   - cross-section swap is attempted (only gap/insert cross sections)
+   * When false, the drop action is NOT executed on mouseup and the
+   * overlay renders in "invalid" (red) state.
+   */
+  isValid: boolean;
 }
 
 export interface InsertBetween {
@@ -41,6 +113,103 @@ export interface UseColumnDragReturn {
   startDrag: (e: React.MouseEvent, sectionKey: string, columnKey: string) => void;
 }
 
+// ============================================
+// Hit-test (shared by mousemove and mouseup)
+// ============================================
+
+/**
+ * Given a pointer event, resolve the topmost drop target under the cursor.
+ *
+ * - Priority order: Insert zone > Gap > Column (swap)
+ * - Cross-section drops are ALLOWED for Insert and Gap, but only if the
+ *   target section is columnar (V2 or Cover). Non-columnar targets
+ *   (parallax slide columns, custom instances) produce a target with
+ *   `isValid: false` so the caller can show a red overlay.
+ * - Cross-section Swap is explicitly rejected (`isValid: false`). Swapping
+ *   across sections is ambiguous UX; the user can drag into a gap/insert
+ *   instead.
+ */
+function hitTestDrop(
+  e: MouseEvent,
+  sourceSectionKey: string,
+  sourceColumnKey: string,
+): { target: DropTarget | null; insert: InsertBetween | null } {
+  const rows = useBuilderStore.getState().rows;
+  const isTargetColumnar = (sectionKey: string): boolean => {
+    const section = rows.find((r) => r._key === sectionKey);
+    return section ? isColumnarSection(section) : false;
+  };
+
+  const elements = document.elementsFromPoint(e.clientX, e.clientY);
+  for (const el of elements) {
+    const htmlEl = el as HTMLElement;
+
+    // Priority 1: Insert zone (between two columns, or at start/end of a row)
+    if (htmlEl.dataset.colV2Insert !== undefined) {
+      const ts = htmlEl.dataset.sectionKey!;
+      const isCross = ts !== sourceSectionKey;
+      const isValid = isTargetColumnar(ts);
+      const target: DropTarget = {
+        type: "insert",
+        sectionKey: ts,
+        insertRow: parseInt(htmlEl.dataset.insertRow!, 10),
+        insertCol: parseInt(htmlEl.dataset.insertCol!, 10),
+        isCrossSection: isCross,
+        isValid,
+      };
+      const leftKey = htmlEl.dataset.insertLeftKey;
+      const rightKey = htmlEl.dataset.insertRightKey;
+      const insert: InsertBetween | null =
+        leftKey && rightKey ? { leftKey, rightKey } : null;
+      return { target, insert };
+    }
+
+    // Priority 2: Gap (empty grid cell)
+    if (htmlEl.dataset.colV2Gap !== undefined) {
+      const ts = htmlEl.dataset.sectionKey!;
+      const isCross = ts !== sourceSectionKey;
+      const isValid = isTargetColumnar(ts);
+      return {
+        target: {
+          type: "gap",
+          sectionKey: ts,
+          gapRow: parseInt(htmlEl.dataset.gapRow!, 10),
+          gapCol: parseInt(htmlEl.dataset.gapCol!, 10),
+          gapSpan: parseInt(htmlEl.dataset.gapSpan!, 10),
+          isCrossSection: isCross,
+          isValid,
+        },
+        insert: null,
+      };
+    }
+
+    // Priority 3: Column (swap). Valid both same-section AND cross-section
+    // (as long as target is a columnar section — V2 or Cover). Cross-section
+    // swap routes to `swapColumnsBetweenSections` at drop time; same-section
+    // swap routes to `swapColumnV2`.
+    if (htmlEl.dataset.colV2Droptarget !== undefined) {
+      const ts = htmlEl.dataset.sectionKey!;
+      const tc = htmlEl.dataset.columnKey!;
+      // Skip if hovering over self (within same section)
+      if (ts === sourceSectionKey && tc === sourceColumnKey) continue;
+      const isCross = ts !== sourceSectionKey;
+      const isValid = isTargetColumnar(ts);
+      return {
+        target: {
+          type: "swap",
+          sectionKey: ts,
+          columnKey: tc,
+          isCrossSection: isCross,
+          isValid,
+        },
+        insert: null,
+      };
+    }
+  }
+
+  return { target: null, insert: null };
+}
+
 // ============================================
 // Responsive Helper Functions (private)
 // ============================================
@@ -57,9 +226,8 @@ function executeResponsiveSwap(
   updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void
 ): void {
   const rows = useBuilderStore.getState().rows;
-  const section = rows.find((r) => r._key === sectionKey);
-  if (!section || !isPageSectionV2(section)) return;
-  const v2Section = section as PageSectionV2;
+  const v2Section = findColumnarSection(rows, sectionKey);
+  if (!v2Section) return;
 
   const effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
   const draggedCol = effectiveCols.find((c) => c._key === draggedKey);
@@ -109,9 +277,8 @@ function executeResponsiveGapMove(
   updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void
 ): void {
   const rows = useBuilderStore.getState().rows;
-  const section = rows.find((r) => r._key === sectionKey);
-  if (!section || !isPageSectionV2(section)) return;
-  const v2Section = section as PageSectionV2;
+  const v2Section = findColumnarSection(rows, sectionKey);
+  if (!v2Section) return;
 
   const effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
   const columnOverrides = effectiveCols.map((c) => {
@@ -147,9 +314,8 @@ function executeResponsiveInsert(
   updateSectionV2Responsive: (sectionKey: string, responsive: PageSectionV2["responsive"]) => void
 ): void {
   const rows = useBuilderStore.getState().rows;
-  const section = rows.find((r) => r._key === sectionKey);
-  if (!section || !isPageSectionV2(section)) return;
-  const v2Section = section as PageSectionV2;
+  const v2Section = findColumnarSection(rows, sectionKey);
+  if (!v2Section) return;
 
   const effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
   const cascadeResult = cascadeMoveColumn(effectiveCols, columnKey, targetRow, targetCol, v2Section.settings.grid_columns);
@@ -199,6 +365,8 @@ export function useColumnDrag(): UseColumnDragReturn {
       swapColumnV2: s.swapColumnV2,
       moveColumnToGapV2: s.moveColumnToGapV2,
       moveColumnV2: s.moveColumnV2,
+      moveColumnBetweenSections: s.moveColumnBetweenSections,
+      swapColumnsBetweenSections: s.swapColumnsBetweenSections,
       updateSectionV2Responsive: s.updateSectionV2Responsive,
     };
   };
@@ -243,60 +411,12 @@ export function useColumnDrag(): UseColumnDragReturn {
 
     const { sectionKey, columnKey } = dragRef.current;
 
-    // 2. Hit-test via elementsFromPoint
-    const elements = document.elementsFromPoint(e.clientX, e.clientY);
-    let newTarget: DropTarget | null = null;
-    let newInsert: InsertBetween | null = null;
-
-    for (const el of elements) {
-      const htmlEl = el as HTMLElement;
-
-      // Priority 1: Insert zone
-      if (htmlEl.dataset.colV2Insert !== undefined) {
-        const targetSection = htmlEl.dataset.sectionKey;
-        if (targetSection !== sectionKey) continue;
-        newTarget = {
-          type: "insert",
-          sectionKey: targetSection,
-          insertRow: parseInt(htmlEl.dataset.insertRow!, 10),
-          insertCol: parseInt(htmlEl.dataset.insertCol!, 10),
-        };
-        const leftKey = htmlEl.dataset.insertLeftKey;
-        const rightKey = htmlEl.dataset.insertRightKey;
-        if (leftKey && rightKey) {
-          newInsert = { leftKey, rightKey };
-        }
-        break;
-      }
-
-      // Priority 2: Gap
-      if (htmlEl.dataset.colV2Gap !== undefined) {
-        const targetSection = htmlEl.dataset.sectionKey;
-        if (targetSection !== sectionKey) continue;
-        newTarget = {
-          type: "gap",
-          sectionKey: targetSection,
-          gapRow: parseInt(htmlEl.dataset.gapRow!, 10),
-          gapCol: parseInt(htmlEl.dataset.gapCol!, 10),
-          gapSpan: parseInt(htmlEl.dataset.gapSpan!, 10),
-        };
-        break;
-      }
-
-      // Priority 3: Column (swap)
-      if (htmlEl.dataset.colV2Droptarget !== undefined) {
-        const targetSection = htmlEl.dataset.sectionKey;
-        const targetColumn = htmlEl.dataset.columnKey;
-        if (targetSection !== sectionKey) continue;
-        if (targetColumn === columnKey) continue; // skip self
-        newTarget = {
-          type: "swap",
-          sectionKey: targetSection,
-          columnKey: targetColumn,
-        };
-        break;
-      }
-    }
+    // 2. Hit-test via shared helper (returns DropTarget with isValid/isCrossSection)
+    const { target: newTarget, insert: newInsert } = hitTestDrop(
+      e,
+      sectionKey,
+      columnKey,
+    );
 
     setDropTarget(newTarget);
     setInsertBetween(newTarget?.type === "insert" ? newInsert : null);
@@ -325,93 +445,100 @@ export function useColumnDrag(): UseColumnDragReturn {
     const { sectionKey, columnKey } = dragRef.current;
     dragRef.current.active = false;
 
-    // Final hit-test at mouseup position
-    const elements = document.elementsFromPoint(e.clientX, e.clientY);
-    let finalTarget: DropTarget | null = null;
-
-    for (const el of elements) {
-      const htmlEl = el as HTMLElement;
-
-      // Priority 1: Insert zone
-      if (htmlEl.dataset.colV2Insert !== undefined) {
-        const ts = htmlEl.dataset.sectionKey;
-        if (ts !== sectionKey) continue;
-        finalTarget = {
-          type: "insert",
-          sectionKey: ts,
-          insertRow: parseInt(htmlEl.dataset.insertRow!, 10),
-          insertCol: parseInt(htmlEl.dataset.insertCol!, 10),
-        };
-        break;
-      }
-
-      // Priority 2: Gap
-      if (htmlEl.dataset.colV2Gap !== undefined) {
-        const ts = htmlEl.dataset.sectionKey;
-        if (ts !== sectionKey) continue;
-        finalTarget = {
-          type: "gap",
-          sectionKey: ts,
-          gapRow: parseInt(htmlEl.dataset.gapRow!, 10),
-          gapCol: parseInt(htmlEl.dataset.gapCol!, 10),
-          gapSpan: parseInt(htmlEl.dataset.gapSpan!, 10),
-        };
-        break;
-      }
-
-      // Priority 3: Column (swap)
-      if (htmlEl.dataset.colV2Droptarget !== undefined) {
-        const ts = htmlEl.dataset.sectionKey;
-        const tc = htmlEl.dataset.columnKey;
-        if (ts !== sectionKey || tc === columnKey) continue;
-        finalTarget = { type: "swap", sectionKey: ts, columnKey: tc };
-        break;
-      }
-    }
+    // Final hit-test at mouseup position (shared with mousemove)
+    const { target: finalTarget } = hitTestDrop(e, sectionKey, columnKey);
 
-    // Execute the drop action — read actions fresh from store (RC-002)
-    if (finalTarget) {
+    // Execute the drop action — read actions fresh from store (RC-002).
+    // Only valid targets execute; invalid (e.g. cross-section swap, drop
+    // on parallax) fall through silently — overlay already showed red.
+    if (finalTarget && finalTarget.isValid) {
       const storeState = useBuilderStore.getState();
       const activeViewport = storeState.activeViewport;
       const isResponsive = activeViewport !== "desktop";
       const actions = getActions();
 
-      if (finalTarget.type === "swap" && finalTarget.columnKey) {
-        if (!isResponsive) {
-          actions.swapColumnV2(sectionKey, columnKey, finalTarget.columnKey);
-        } else {
-          executeResponsiveSwap(
-            sectionKey, columnKey, finalTarget.columnKey, activeViewport,
-            actions.updateSectionV2Responsive
+      if (finalTarget.isCrossSection) {
+        // Cross-section drops supported:
+        //   - gap / insert → `moveColumnBetweenSections`
+        //   - swap → `swapColumnsBetweenSections` (each column adopts the
+        //     other's position/row/span, same semantic as intra-section swap)
+        // Responsive cross-section moves are not yet supported in this
+        // first iteration — treat as desktop move (span/col clamped by
+        // helpers). The drop is still written to the Sanity doc.
+        if (finalTarget.type === "gap") {
+          actions.moveColumnBetweenSections(
+            sectionKey,
+            columnKey,
+            finalTarget.sectionKey,
+            finalTarget.gapRow!,
+            finalTarget.gapCol!,
+            finalTarget.gapSpan!,
           );
-        }
-      } else if (finalTarget.type === "gap") {
-        if (!isResponsive) {
-          actions.moveColumnToGapV2(
-            sectionKey, columnKey,
-            finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!
+        } else if (finalTarget.type === "insert") {
+          // For insert drops, preserve the source column's span. The helper
+          // clamps to target's grid if needed.
+          const sourceCol = useBuilderStore
+            .getState()
+            .rows.find((r) => r._key === sectionKey);
+          const sourceSpan =
+            sourceCol && isColumnarSection(sourceCol)
+              ? sourceCol.columns.find((c) => c._key === columnKey)?.span ?? 12
+              : 12;
+          actions.moveColumnBetweenSections(
+            sectionKey,
+            columnKey,
+            finalTarget.sectionKey,
+            finalTarget.insertRow!,
+            finalTarget.insertCol!,
+            sourceSpan,
           );
-        } else {
-          executeResponsiveGapMove(
-            sectionKey, columnKey,
-            finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!,
-            activeViewport,
-            actions.updateSectionV2Responsive
+        } else if (finalTarget.type === "swap" && finalTarget.columnKey) {
+          actions.swapColumnsBetweenSections(
+            sectionKey,
+            columnKey,
+            finalTarget.sectionKey,
+            finalTarget.columnKey,
           );
         }
-      } else if (finalTarget.type === "insert") {
-        if (!isResponsive) {
-          actions.moveColumnV2(
-            sectionKey, columnKey,
-            finalTarget.insertRow!, finalTarget.insertCol!
-          );
-        } else {
-          executeResponsiveInsert(
-            sectionKey, columnKey,
-            finalTarget.insertRow!, finalTarget.insertCol!,
-            activeViewport,
-            actions.updateSectionV2Responsive
-          );
+      } else {
+        // Same-section — existing behavior preserved exactly
+        if (finalTarget.type === "swap" && finalTarget.columnKey) {
+          if (!isResponsive) {
+            actions.swapColumnV2(sectionKey, columnKey, finalTarget.columnKey);
+          } else {
+            executeResponsiveSwap(
+              sectionKey, columnKey, finalTarget.columnKey, activeViewport,
+              actions.updateSectionV2Responsive
+            );
+          }
+        } else if (finalTarget.type === "gap") {
+          if (!isResponsive) {
+            actions.moveColumnToGapV2(
+              sectionKey, columnKey,
+              finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!
+            );
+          } else {
+            executeResponsiveGapMove(
+              sectionKey, columnKey,
+              finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!,
+              activeViewport,
+              actions.updateSectionV2Responsive
+            );
+          }
+        } else if (finalTarget.type === "insert") {
+          if (!isResponsive) {
+            actions.moveColumnV2(
+              sectionKey, columnKey,
+              finalTarget.insertRow!, finalTarget.insertCol!
+            );
+          } else {
+            executeResponsiveInsert(
+              sectionKey, columnKey,
+              finalTarget.insertRow!, finalTarget.insertCol!,
+              activeViewport,
+              actions.updateSectionV2Responsive
+            );
+          }
         }
       }
     }

package/lib/builder/store-blocks.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState } from "./types";
+import type { BuilderStore, BuilderState, BlockSliceActions } from "./types";
 import type { ContentBlock, ContentItem, PageSectionV2, ParallaxGroup, CoverSection } from "../../lib/sanity/types";
 import { isPageSectionV2, isParallaxGroup, isCoverSection } from "../../lib/sanity/types";
 import { createDefaultBlock } from "./defaults";
@@ -47,7 +47,7 @@ function applyBlockUpdate(
   });
 }
 
-export function createBlockActions(set: StoreSet, get: StoreGet) {
+export function createBlockActions(set: StoreSet, get: StoreGet): BlockSliceActions {
   return {
     // ---- Block operations ----
 

package/lib/builder/store-canvas.ts

@@ -1,4 +1,4 @@
-import type { BuilderStore, BuilderState, CanvasTool, DeviceViewport, PageSettings } from "./types";
+import type { BuilderStore, BuilderState, CanvasTool, DeviceViewport, PageSettings, CanvasSliceActions } from "./types";
 import { DEFAULT_PAGE_SETTINGS, DEFAULT_GRID_SETTINGS, DEVICE_WIDTHS } from "./types";
 import type { PageSectionV2 } from "../../lib/sanity/types";
 import { isPageSectionV2 } from "../../lib/sanity/types";
@@ -11,7 +11,7 @@ type StoreSet = (
 ) => void;
 type StoreGet = () => BuilderStore;
 
-export function createCanvasActions(set: StoreSet, get: StoreGet) {
+export function createCanvasActions(set: StoreSet, get: StoreGet): CanvasSliceActions {
   return {
     // ---- Editor mode ----
 

package/lib/builder/store-cover.ts

@@ -9,7 +9,7 @@
  * Session 176: Cover Sections — Phase 3 (Store).
  */
 
-import type { BuilderState } from "./types";
+import type { BuilderState, CoverSliceActions } from "./types";
 import type {
   ContentItem,
   CoverSection,
@@ -79,7 +79,7 @@ function updateCoverInRows(
   });
 }
 
-export function createCoverActions(set: StoreSet, get: StoreGet) {
+export function createCoverActions(set: StoreSet, get: StoreGet): CoverSliceActions {
   return {
     addCoverSection: (afterRowKey?: string | null): void => {
       get()._pushSnapshot();