@morphika/andami 0.4.2 → 0.5.0

package/components/builder/ColumnDragContext.tsx

@@ -32,6 +32,11 @@ export function ColumnDragProvider({ children }: ColumnDragProviderProps) {
             sectionKey={columnDrag.draggedSectionKey}
             columnKey={columnDrag.draggedColumnKey}
             position={columnDrag.overlayPosition}
+            // If hovering over a target, use its validity; if no target
+            // (empty space), stay in default (valid) state.
+            isValidDrop={
+              columnDrag.dropTarget ? columnDrag.dropTarget.isValid : true
+            }
           />
         )}
     </ColumnDragContext.Provider>

package/components/builder/ColumnDragOverlay.tsx

@@ -7,16 +7,29 @@ import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanit
 import { isPageSectionV2, isCoverSection } from "../../lib/sanity/types";
 import { BUILDER_BLUE } from "../../lib/builder/constants";
 
+/** Color used when the current drop target is invalid (cross-section
+ * swap, or a target that is not V2/Cover). Red 500 with compatible
+ * translucent tints for the overlay chrome. */
+const INVALID_RED = "#ef4444";
+const INVALID_RED_RGB = "239, 68, 68";
+
 interface ColumnDragOverlayProps {
   sectionKey: string;
   columnKey: string;
   position: { x: number; y: number };
+  /**
+   * Whether the current drop target under the cursor is a valid drop.
+   * - true  (or no target): render in blue (default).
+   * - false: render in red to signal "drop here won't execute".
+   */
+  isValidDrop?: boolean;
 }
 
 const ColumnDragOverlay = memo(function ColumnDragOverlay({
   sectionKey,
   columnKey,
   position,
+  isValidDrop = true,
 }: ColumnDragOverlayProps) {
   const rows = useBuilderStore((s) => s.rows);
   const item = rows.find((r) => r._key === sectionKey);
@@ -44,6 +57,10 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
 
   const blockCount = (col.blocks || []).length;
 
+  // Pick accent based on drop validity.
+  const accentColor = isValidDrop ? BUILDER_BLUE : INVALID_RED;
+  const accentRgb = isValidDrop ? "71, 148, 226" : INVALID_RED_RGB;
+
   const overlay = (
     <div
       style={{
@@ -53,18 +70,20 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
         transform: "translate(-50%, -50%)",
         pointerEvents: "none",
         zIndex: 99999,
+        transition: "filter 120ms ease",
       }}
     >
       <div
         style={{
           width: 180,
           minHeight: 80,
-          background: "rgba(71, 148, 226, 0.08)",
+          background: `rgba(${accentRgb}, 0.08)`,
           backdropFilter: "blur(8px)",
           opacity: 0.85,
           borderRadius: 8,
-          border: `2px solid ${BUILDER_BLUE}`,
-          boxShadow: "0 8px 32px rgba(71, 148, 226, 0.3)",
+          border: `2px solid ${accentColor}`,
+          boxShadow: `0 8px 32px rgba(${accentRgb}, 0.3)`,
+          transition: "border-color 120ms ease, background 120ms ease, box-shadow 120ms ease",
         }}
       >
         {/* Column header badge */}
@@ -74,17 +93,25 @@ const ColumnDragOverlay = memo(function ColumnDragOverlay({
             alignItems: "center",
             gap: 8,
             padding: "8px 12px",
-            borderBottom: "1px solid rgba(71, 148, 226, 0.2)",
+            borderBottom: `1px solid rgba(${accentRgb}, 0.2)`,
           }}
         >
-          <svg width="10" height="10" viewBox="0 0 10 10" fill={BUILDER_BLUE}>
-            <circle cx="3" cy="3" r="1" />
-            <circle cx="7" cy="3" r="1" />
-            <circle cx="3" cy="7" r="1" />
-            <circle cx="7" cy="7" r="1" />
-          </svg>
+          {isValidDrop ? (
+            <svg width="10" height="10" viewBox="0 0 10 10" fill={accentColor}>
+              <circle cx="3" cy="3" r="1" />
+              <circle cx="7" cy="3" r="1" />
+              <circle cx="3" cy="7" r="1" />
+              <circle cx="7" cy="7" r="1" />
+            </svg>
+          ) : (
+            // "Blocked" icon when invalid — slashed circle
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="6.5" stroke={accentColor} strokeWidth="1.5" />
+              <line x1="3.5" y1="12.5" x2="12.5" y2="3.5" stroke={accentColor} strokeWidth="1.5" />
+            </svg>
+          )}
           <span style={{ fontSize: 12, color: "white", fontWeight: 500 }}>
-            Column {col.span}/{gridColumns}
+            {isValidDrop ? `Column ${col.span}/${gridColumns}` : "Cannot drop here"}
           </span>
         </div>
         {/* Block count indicators */}

package/components/builder/InsertionLines.tsx

@@ -30,6 +30,11 @@ interface InsertionLinesProps {
   colGap: number;
   sectionKey: string;
   dropTarget: DropTarget | null;
+  /** Offset added to grid_row in emitted `data-insert-row` attributes —
+   * required when this SectionV2Canvas is a virtual per-row view inside
+   * a CoverSection (rows are remapped to 1 for rendering; the real
+   * grid_row must be recovered for the DnD hit-test). Default 0. */
+  gridRowOffset?: number;
 }
 
 export const InsertionLines = memo(function InsertionLines({
@@ -40,6 +45,7 @@ export const InsertionLines = memo(function InsertionLines({
   colGap,
   sectionKey,
   dropTarget,
+  gridRowOffset = 0,
 }: InsertionLinesProps) {
   // Compute insertion points between adjacent columns (no gap between them)
   // Exclude the currently dragged column from consideration
@@ -124,7 +130,9 @@ export const InsertionLines = memo(function InsertionLines({
             <div
               data-col-v2-insert=""
               data-section-key={sectionKey}
-              data-insert-row={pt.row}
+              // Absolute grid_row (including Cover row offset) — see
+              // SectionV2Canvas's data-gap-row comment for rationale.
+              data-insert-row={pt.row + gridRowOffset}
               data-insert-col={pt.gridColumn}
               data-insert-left-key={pt.leftColKey}
               data-insert-right-key={pt.rightColKey}

package/components/builder/SectionV2Canvas.tsx

@@ -69,8 +69,13 @@ export default function SectionV2Canvas({
     startDrag,
   } = useColumnDragContext();
 
-  // Only show insertion lines if the drag originates from THIS section
-  const showInsertionLines = isColDragActive && draggingSectionKey === section._key;
+  // Show insertion lines + highlighted gaps:
+  //   - While dragging, in the section the drag ORIGINATED from (source feedback)
+  //   - While dragging, in ANY section the cursor is currently over (target feedback
+  //     for cross-section drops — the user needs a visible drop zone in the target).
+  const showInsertionLines =
+    isColDragActive &&
+    (draggingSectionKey === section._key || isSectionHovered);
 
   // When drag ends (isColDragActive becomes false), reset hover state so it
   // doesn't stay stuck true if the pointer ended outside the grid.
@@ -267,7 +272,11 @@ export default function SectionV2Canvas({
               key={`gap-${gap.grid_row}-${gap.grid_column}`}
               data-col-v2-gap=""
               data-section-key={section._key}
-              data-gap-row={gap.grid_row}
+              // Absolute grid_row (including Cover row offset) — used by the
+              // DnD hit-test. Without the offset, Cover drops in row 2/3 would
+              // collapse to row 1. The `onClick` below applies the same offset
+              // to keep "+ Add Column" consistent with drag drops.
+              data-gap-row={gap.grid_row + gridRowOffset}
               data-gap-col={gap.grid_column}
               data-gap-span={gap.span}
               onClick={(e) => {
@@ -304,6 +313,7 @@ export default function SectionV2Canvas({
           colGap={colGap}
           sectionKey={section._key}
           dropTarget={dropTarget}
+          gridRowOffset={gridRowOffset}
         />
       )}
     </div>

package/components/builder/hooks/useColumnDrag.ts

@@ -3,7 +3,7 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { useBuilderStore } from "../../../lib/builder/store";
 import type { PageSectionV2, CoverSection, ContentItem } from "../../../lib/sanity/types";
-import { isPageSectionV2, isCoverSection } 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";
@@ -80,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 {
@@ -97,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)
 // ============================================
@@ -252,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,
     };
   };
@@ -296,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);
@@ -378,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;
-      }
+    // Final hit-test at mouseup position (shared with mousemove)
+    const { target: finalTarget } = hitTestDrop(e, sectionKey, columnKey);
 
-      // 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;
-      }
-    }
-
-    // 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-helpers.ts

@@ -20,7 +20,12 @@ import type {
 } 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";
@@ -625,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

@@ -38,6 +38,8 @@ import {
   moveColumnV2InState,
   swapColumnV2InState,
   moveColumnToGapV2InState,
+  moveColumnBetweenSectionsInState,
+  swapColumnsBetweenSectionsInState,
 } from "./store-helpers";
 
 type StoreSet = (
@@ -339,6 +341,64 @@ export function createSectionActions(set: StoreSet, get: StoreGet): SectionSlice
       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;
 

package/lib/builder/types-slices.ts

@@ -124,6 +124,33 @@ export interface SectionSliceActions {
     targetColumn: number,
     targetSpan: number,
   ) => void;
+  /**
+   * Move a column from one columnar section (V2 or Cover) to another.
+   * Blocks travel with the column. Responsive overrides for the moved
+   * column are stripped from the source section. Span/grid_column are
+   * clamped to the target's grid_columns. Returns the final landed span
+   * so the caller can adjust UI feedback (e.g. show clamped value).
+   */
+  moveColumnBetweenSections: (
+    sourceSectionKey: string,
+    columnKey: string,
+    targetSectionKey: string,
+    targetRow: number,
+    targetColumn: number,
+    targetSpan: number,
+  ) => void;
+  /**
+   * Swap two columns across different columnar sections (V2 ↔ Cover).
+   * Each column adopts the other's position/row/span. Blocks travel
+   * with the column. Responsive overrides for both swapped columns
+   * are stripped (overrides are per-section by `_key`).
+   */
+  swapColumnsBetweenSections: (
+    sourceSectionKey: string,
+    sourceColumnKey: string,
+    targetSectionKey: string,
+    targetColumnKey: string,
+  ) => void;
   applyPresetV2: (sectionKey: string, preset: SectionV2Preset) => void;
   updateSectionV2Settings: (sectionKey: string, settings: Partial<SectionV2Settings>) => void;
   updateSectionV2Responsive: (

package/lib/sanity/types.ts

@@ -596,6 +596,23 @@ export function isCoverSection(item: ContentItem): item is CoverSection {
   return (item as CoverSection)._type === "coverSection";
 }
 
+/**
+ * Type guard: check if a content item supports column drag-and-drop as a
+ * source or target — i.e. it has a top-level `columns` array with the same
+ * V2 grid semantics. Used by cross-section column DnD (Session 183).
+ *
+ * Eligible:  PageSectionV2, CoverSection
+ * NOT eligible:
+ *   - ParallaxGroup (columns live per-slide, cross-slide DnD not supported)
+ *   - CustomSectionInstance (references an external document, mutating it
+ *     from the page would break the reference contract)
+ */
+export function isColumnarSection(
+  item: ContentItem,
+): item is PageSectionV2 | CoverSection {
+  return isPageSectionV2(item) || isCoverSection(item);
+}
+
 // ============================================
 // Shared references
 // ============================================

package/lib/version.ts

@@ -6,4 +6,4 @@
  * Exposed as a plain constant so it can be imported without reading
  * package.json at runtime.
  */
-export const ANDAMI_VERSION = "0.4.2";
+export const ANDAMI_VERSION = "0.5.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morphika/andami",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Visual Page Builder — core library. A reusable website builder with visual editing, CMS integration, and asset management.",
   "type": "module",
   "license": "MIT",