@morphika/webframe 0.1.0

package/components/builder/hooks/useColumnDrag.ts

@@ -0,0 +1,472 @@
+"use client";
+
+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 { getEffectiveColumnsV2, buildColumnV2Overrides } from "../settings-panel/responsive-helpers";
+import { moveColumn as cascadeMoveColumn } from "../../../lib/builder/cascade";
+import type { DeviceViewport } from "../../../lib/builder/types";
+
+// ============================================
+// Types
+// ============================================
+
+export interface DropTarget {
+  type: "swap" | "gap" | "insert";
+  sectionKey: string;
+  /** swap: the column to swap with */
+  columnKey?: string;
+  /** gap: position and span of the empty gap */
+  gapRow?: number;
+  gapCol?: number;
+  gapSpan?: number;
+  /** insert: grid position where the column will be inserted */
+  insertRow?: number;
+  insertCol?: number;
+}
+
+export interface InsertBetween {
+  leftKey: string;
+  rightKey: string;
+}
+
+export interface UseColumnDragReturn {
+  isDragging: boolean;
+  draggedColumnKey: string | null;
+  draggedSectionKey: string | null;
+  dropTarget: DropTarget | null;
+  insertBetween: InsertBetween | null;
+  overlayPosition: { x: number; y: number } | null;
+  startDrag: (e: React.MouseEvent, sectionKey: string, columnKey: string) => void;
+}
+
+// ============================================
+// Responsive Helper Functions (private)
+// ============================================
+
+/**
+ * Compute swap on effective columns and write as responsive overrides.
+ * Follows the same pattern as doMoveColumnV2 in DndWrapper.tsx.
+ */
+function executeResponsiveSwap(
+  sectionKey: string,
+  draggedKey: string,
+  targetKey: string,
+  viewport: DeviceViewport,
+  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 effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
+  const draggedCol = effectiveCols.find((c) => c._key === draggedKey);
+  const targetCol = effectiveCols.find((c) => c._key === targetKey);
+  if (!draggedCol || !targetCol) return;
+
+  // Swap positions in effective columns
+  const columnOverrides = effectiveCols.map((c) => {
+    if (c._key === draggedKey) {
+      return {
+        _key: c._key,
+        grid_column: targetCol.grid_column,
+        grid_row: targetCol.grid_row,
+        span: targetCol.span,
+      };
+    }
+    if (c._key === targetKey) {
+      return {
+        _key: c._key,
+        grid_column: draggedCol.grid_column,
+        grid_row: draggedCol.grid_row,
+        span: draggedCol.span,
+      };
+    }
+    return {
+      _key: c._key,
+      grid_column: c.grid_column,
+      grid_row: c.grid_row,
+      span: c.span,
+    };
+  });
+
+  const responsive = buildColumnV2Overrides(v2Section, viewport, columnOverrides);
+  updateSectionV2Responsive(sectionKey, responsive);
+}
+
+/**
+ * Compute gap move on effective columns and write as responsive overrides.
+ */
+function executeResponsiveGapMove(
+  sectionKey: string,
+  columnKey: string,
+  targetRow: number,
+  targetCol: number,
+  targetSpan: number,
+  viewport: DeviceViewport,
+  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 effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
+  const columnOverrides = effectiveCols.map((c) => {
+    if (c._key === columnKey) {
+      return {
+        _key: c._key,
+        grid_column: targetCol,
+        grid_row: targetRow,
+        span: targetSpan,
+      };
+    }
+    return {
+      _key: c._key,
+      grid_column: c.grid_column,
+      grid_row: c.grid_row,
+      span: c.span,
+    };
+  });
+
+  const responsive = buildColumnV2Overrides(v2Section, viewport, columnOverrides);
+  updateSectionV2Responsive(sectionKey, responsive);
+}
+
+/**
+ * Compute insert via cascadeMoveColumn on effective columns and write as overrides.
+ */
+function executeResponsiveInsert(
+  sectionKey: string,
+  columnKey: string,
+  targetRow: number,
+  targetCol: number,
+  viewport: DeviceViewport,
+  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 effectiveCols = getEffectiveColumnsV2(v2Section, viewport);
+  const cascadeResult = cascadeMoveColumn(effectiveCols, columnKey, targetRow, targetCol, v2Section.settings.grid_columns);
+
+  const columnOverrides = cascadeResult.map((c) => ({
+    _key: c._key,
+    grid_column: c.grid_column,
+    grid_row: c.grid_row,
+    span: c.span,
+  }));
+
+  const responsive = buildColumnV2Overrides(v2Section, viewport, columnOverrides);
+  updateSectionV2Responsive(sectionKey, responsive);
+}
+
+// ============================================
+// useColumnDrag Hook
+// ============================================
+
+export function useColumnDrag(): UseColumnDragReturn {
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggedColumnKey, setDraggedColumnKey] = useState<string | null>(null);
+  const [draggedSectionKey, setDraggedSectionKey] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+  const [insertBetween, setInsertBetween] = useState<InsertBetween | null>(null);
+  const [overlayPosition, setOverlayPosition] = useState<{ x: number; y: number } | null>(null);
+
+  // --- Mutable ref for drag state + store actions (stale closure prevention) ---
+  const dragRef = useRef({
+    sectionKey: "",
+    columnKey: "",
+    active: false,
+    pending: false, // mousedown captured, waiting for 8px threshold
+    startX: 0,
+    startY: 0,
+    draggedEl: null as HTMLElement | null, // pointer-events guard
+    // Store actions — updated every render via useEffect
+    swapColumnV2: null as ((s: string, d: string, t: string) => void) | null,
+    moveColumnToGapV2: null as ((s: string, c: string, r: number, col: number, sp: number) => void) | null,
+    moveColumnV2: null as ((s: string, c: string, r: number, col: number) => void) | null,
+    updateSectionV2Responsive: null as ((s: string, r: PageSectionV2["responsive"]) => void) | null,
+  });
+
+  // Keep store actions fresh in the ref
+  const swapColumnV2 = useBuilderStore((s) => s.swapColumnV2);
+  const moveColumnToGapV2 = useBuilderStore((s) => s.moveColumnToGapV2);
+  const moveColumnV2 = useBuilderStore((s) => s.moveColumnV2);
+  const updateSectionV2Responsive = useBuilderStore((s) => s.updateSectionV2Responsive);
+
+  // Update ref every render — no deps array
+  useEffect(() => {
+    dragRef.current.swapColumnV2 = swapColumnV2;
+    dragRef.current.moveColumnToGapV2 = moveColumnToGapV2;
+    dragRef.current.moveColumnV2 = moveColumnV2;
+    dragRef.current.updateSectionV2Responsive = updateSectionV2Responsive;
+  });
+
+  // --- Stable mousemove handler (empty deps — delegates to dragRef) ---
+  const stableMouseMove = useCallback((e: MouseEvent) => {
+    // Activation distance: 8px dead zone before drag starts
+    if (dragRef.current.pending && !dragRef.current.active) {
+      const dist = Math.hypot(
+        e.clientX - dragRef.current.startX,
+        e.clientY - dragRef.current.startY
+      );
+      if (dist < 8) return; // Still within dead zone
+
+      // Threshold met — activate drag
+      dragRef.current.pending = false;
+      dragRef.current.active = true;
+
+      const { sectionKey, columnKey } = dragRef.current;
+      setDraggedColumnKey(columnKey);
+      setDraggedSectionKey(sectionKey);
+      setOverlayPosition({ x: e.clientX, y: e.clientY });
+      setIsDragging(true);
+
+      document.body.style.cursor = "grabbing";
+      document.body.style.userSelect = "none";
+
+      // Pointer-events guard: prevent dragged column from capturing elementsFromPoint
+      const draggedEl = document.querySelector(
+        `[data-col-v2-droptarget][data-section-key="${sectionKey}"][data-column-key="${columnKey}"]`
+      ) as HTMLElement | null;
+      if (draggedEl) {
+        dragRef.current.draggedEl = draggedEl;
+        draggedEl.style.pointerEvents = "none";
+      }
+    }
+
+    if (!dragRef.current.active) return;
+
+    // 1. Update overlay position (viewport coordinates — no zoom compensation)
+    setOverlayPosition({ x: e.clientX, y: e.clientY });
+
+    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;
+      }
+    }
+
+    setDropTarget(newTarget);
+    setInsertBetween(newTarget?.type === "insert" ? newInsert : null);
+  }, []);
+
+  // --- Stable mouseup handler ---
+  const stableMouseUp = useCallback((e: MouseEvent) => {
+    document.removeEventListener("mousemove", stableMouseMove);
+    document.removeEventListener("mouseup", stableMouseUp);
+
+    // Restore pointer-events on dragged element
+    if (dragRef.current.draggedEl) {
+      dragRef.current.draggedEl.style.pointerEvents = "";
+      dragRef.current.draggedEl = null;
+    }
+
+    // If mouseup before activation threshold — clean up without executing any drop
+    if (dragRef.current.pending && !dragRef.current.active) {
+      dragRef.current.pending = false;
+      return;
+    }
+
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+
+    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;
+      }
+    }
+
+    // Execute the drop action
+    if (finalTarget) {
+      const activeViewport = useBuilderStore.getState().activeViewport;
+      const isResponsive = activeViewport !== "desktop";
+
+      if (finalTarget.type === "swap" && finalTarget.columnKey) {
+        if (!isResponsive) {
+          dragRef.current.swapColumnV2?.(sectionKey, columnKey, finalTarget.columnKey);
+        } else {
+          executeResponsiveSwap(
+            sectionKey, columnKey, finalTarget.columnKey, activeViewport,
+            dragRef.current.updateSectionV2Responsive!
+          );
+        }
+      } else if (finalTarget.type === "gap") {
+        if (!isResponsive) {
+          dragRef.current.moveColumnToGapV2?.(
+            sectionKey, columnKey,
+            finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!
+          );
+        } else {
+          executeResponsiveGapMove(
+            sectionKey, columnKey,
+            finalTarget.gapRow!, finalTarget.gapCol!, finalTarget.gapSpan!,
+            activeViewport,
+            dragRef.current.updateSectionV2Responsive!
+          );
+        }
+      } else if (finalTarget.type === "insert") {
+        if (!isResponsive) {
+          dragRef.current.moveColumnV2?.(
+            sectionKey, columnKey,
+            finalTarget.insertRow!, finalTarget.insertCol!
+          );
+        } else {
+          executeResponsiveInsert(
+            sectionKey, columnKey,
+            finalTarget.insertRow!, finalTarget.insertCol!,
+            activeViewport,
+            dragRef.current.updateSectionV2Responsive!
+          );
+        }
+      }
+    }
+
+    // Reset all React state
+    setIsDragging(false);
+    setDraggedColumnKey(null);
+    setDraggedSectionKey(null);
+    setDropTarget(null);
+    setInsertBetween(null);
+    setOverlayPosition(null);
+  }, [stableMouseMove]);
+
+  // --- startDrag ---
+  const startDrag = useCallback((e: React.MouseEvent, sectionKey: string, columnKey: string) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    dragRef.current.sectionKey = sectionKey;
+    dragRef.current.columnKey = columnKey;
+    dragRef.current.active = false;
+    dragRef.current.pending = true;
+    dragRef.current.startX = e.clientX;
+    dragRef.current.startY = e.clientY;
+
+    // Don't set React state yet — wait for 8px activation threshold in mousemove
+
+    document.addEventListener("mousemove", stableMouseMove);
+    document.addEventListener("mouseup", stableMouseUp);
+  }, [stableMouseMove, stableMouseUp]);
+
+  // Cleanup on unmount (safety — if component unmounts mid-drag)
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("mousemove", stableMouseMove);
+      document.removeEventListener("mouseup", stableMouseUp);
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      if (dragRef.current.draggedEl) {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        dragRef.current.draggedEl.style.pointerEvents = "";
+        dragRef.current.draggedEl = null;
+      }
+    };
+  }, [stableMouseMove, stableMouseUp]);
+
+  return {
+    isDragging,
+    draggedColumnKey,
+    draggedSectionKey,
+    dropTarget,
+    insertBetween,
+    overlayPosition,
+    startDrag,
+  };
+}

package/components/builder/hooks/useColumnResize.ts

@@ -0,0 +1,221 @@
+"use client";
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import {
+  resizeColumn as cascadeResizeColumn,
+  resizeColumnLeft as cascadeResizeLeft,
+  type ResizeLeftResult,
+} from "../../../lib/builder/cascade";
+import { toCascadeColumns } from "../../../lib/builder/cascade-helpers";
+import type { CascadeColumn } from "../../../lib/builder/cascade-helpers";
+import type { PageSectionV2 } from "../../../lib/sanity/types";
+import type { DeviceViewport } from "../../../lib/builder/types";
+import { buildColumnV2Overrides } from "../settings-panel/responsive-helpers";
+
+// ============================================
+// useColumnResize — Extracted from SectionV2Canvas
+//
+// Handles both left and right edge resizing for V2 grid columns.
+// Uses a shared startResize() that parameterizes by direction,
+// eliminating the two near-identical useCallback closures.
+// ============================================
+
+interface UseColumnResizeParams {
+  section: PageSectionV2;
+  gridColumns: number;
+  colGap: number;
+  canvasZoom: number;
+  effectiveCols: CascadeColumn[];
+  isResponsive: boolean;
+  activeViewport: DeviceViewport;
+  // Store actions
+  resizeColumnV2: (sectionKey: string, columnKey: string, newSpan: number) => void;
+  resizeColumnV2Left: (sectionKey: string, columnKey: string, newGridColumn: number) => void;
+  updateSectionV2Responsive: (sectionKey: string, responsive: Record<string, Record<string, unknown>>) => void;
+}
+
+interface SnappingInfo {
+  columnKey: string;
+  edge: "left" | "right";
+  willOverflow: boolean;
+  /** Key of the left neighbor being compressed during left-edge resize */
+  compressedNeighborKey?: string | null;
+  /** True when the left neighbor has reached minimum span (1) — visual warning */
+  neighborAtMinimum?: boolean;
+}
+
+interface UseColumnResizeReturn {
+  resizePreview: CascadeColumn[] | null;
+  snappingInfo: SnappingInfo | null;
+  handleResizeRight: (columnKey: string, startX: number, startSpan: number, containerEl: HTMLElement) => void;
+  handleResizeLeft: (columnKey: string, startX: number, startGridCol: number, startSpan: number, containerEl: HTMLElement) => void;
+}
+
+/** Compute pixel width of one grid column unit */
+function computeColUnitWidth(containerWidth: number, gridColumns: number, colGap: number): number {
+  const totalGaps = (gridColumns - 1) * colGap;
+  return (containerWidth - totalGaps) / gridColumns;
+}
+
+export function useColumnResize({
+  section,
+  gridColumns,
+  colGap,
+  canvasZoom,
+  effectiveCols,
+  isResponsive,
+  activeViewport,
+  resizeColumnV2,
+  resizeColumnV2Left,
+  updateSectionV2Responsive,
+}: UseColumnResizeParams): UseColumnResizeReturn {
+  const [resizePreview, setResizePreview] = useState<CascadeColumn[] | null>(null);
+  const [snappingInfo, setSnappingInfo] = useState<SnappingInfo | null>(null);
+
+  // Ref to access the latest preview in mouseup handlers (closure escape)
+  const latestPreviewRef = useRef<CascadeColumn[] | null>(null);
+  useEffect(() => {
+    latestPreviewRef.current = resizePreview;
+  }, [resizePreview]);
+
+  /** Commit the resize result to the store (shared by both edges) */
+  const commitResize = useCallback(
+    (columnKey: string, startGridCol: number, startSpan: number, edge: "left" | "right") => {
+      const preview = latestPreviewRef.current;
+      if (!preview) return;
+
+      const finalCol = preview.find((c) => c._key === columnKey);
+      if (!finalCol) return;
+
+      // Check if anything actually changed
+      const changed =
+        edge === "right"
+          ? finalCol.span !== startSpan
+          : finalCol.grid_column !== startGridCol || finalCol.span !== startSpan;
+
+      if (!changed) return;
+
+      if (isResponsive) {
+        // Tablet/Phone: write ALL cascade-affected columns as responsive overrides
+        const columnOverrides = preview.map((c) => ({
+          _key: c._key,
+          grid_column: c.grid_column,
+          grid_row: c.grid_row,
+          span: c.span,
+        }));
+        const responsive = buildColumnV2Overrides(section, activeViewport, columnOverrides);
+        if (responsive) {
+          updateSectionV2Responsive(section._key, responsive as Record<string, Record<string, unknown>>);
+        }
+      } else if (edge === "right") {
+        resizeColumnV2(section._key, columnKey, finalCol.span);
+      } else {
+        resizeColumnV2Left(section._key, columnKey, finalCol.grid_column);
+      }
+    },
+    [isResponsive, section, activeViewport, resizeColumnV2, resizeColumnV2Left, updateSectionV2Responsive]
+  );
+
+  /** Shared cleanup for mouseup */
+  const cleanupResize = useCallback(() => {
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    setResizePreview(null);
+    setSnappingInfo(null);
+  }, []);
+
+  // ---- Resize right handler (drag on right edge) ----
+  const handleResizeRight = useCallback(
+    (columnKey: string, startX: number, startSpan: number, containerEl: HTMLElement) => {
+      const cWidth = containerEl.getBoundingClientRect().width;
+      const colUnitWidth = computeColUnitWidth(cWidth, gridColumns, colGap);
+      const baseCols = isResponsive ? effectiveCols : toCascadeColumns(section.columns);
+      let lastPreviewedSpan = startSpan;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        const deltaX = (e.clientX - startX) / canvasZoom;
+        const deltaCols = Math.round(deltaX / (colUnitWidth + colGap));
+        const newSpan = Math.max(1, Math.min(gridColumns, startSpan + deltaCols));
+
+        if (newSpan === lastPreviewedSpan) return;
+        lastPreviewedSpan = newSpan;
+
+        const previewCascade = cascadeResizeColumn(baseCols, columnKey, newSpan, gridColumns);
+        setResizePreview(previewCascade);
+
+        const originalMaxRow = baseCols.length > 0 ? Math.max(...baseCols.map((c) => c.grid_row)) : 1;
+        const newMaxRow = previewCascade.length > 0 ? Math.max(...previewCascade.map((c) => c.grid_row)) : 1;
+        const willOverflow = newMaxRow > originalMaxRow;
+        setSnappingInfo(willOverflow ? { columnKey, edge: "right", willOverflow: true } : null);
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        commitResize(columnKey, 0, startSpan, "right");
+        cleanupResize();
+      };
+
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [gridColumns, colGap, canvasZoom, section, isResponsive, effectiveCols, commitResize, cleanupResize]
+  );
+
+  // ---- Resize left handler (drag on left edge) ----
+  const handleResizeLeft = useCallback(
+    (columnKey: string, startX: number, startGridCol: number, startSpan: number, containerEl: HTMLElement) => {
+      const cWidth = containerEl.getBoundingClientRect().width;
+      const colUnitWidth = computeColUnitWidth(cWidth, gridColumns, colGap);
+      const baseCols = isResponsive ? effectiveCols : toCascadeColumns(section.columns);
+      let lastPreviewedGridCol = startGridCol;
+
+      const handleMouseMove = (e: MouseEvent) => {
+        const deltaX = (e.clientX - startX) / canvasZoom;
+        const deltaCols = Math.round(deltaX / (colUnitWidth + colGap));
+        const newGridColumn = Math.max(1, startGridCol + deltaCols);
+        if (newGridColumn >= startGridCol + startSpan) return;
+
+        if (newGridColumn === lastPreviewedGridCol) return;
+        lastPreviewedGridCol = newGridColumn;
+
+        const previewResult = cascadeResizeLeft(baseCols, columnKey, newGridColumn, gridColumns);
+        if (previewResult) {
+          setResizePreview(previewResult.columns);
+          // Surface neighbor compression state for visual feedback
+          if (previewResult.compressedNeighborKey) {
+            setSnappingInfo({
+              columnKey,
+              edge: "left",
+              willOverflow: false,
+              compressedNeighborKey: previewResult.compressedNeighborKey,
+              neighborAtMinimum: previewResult.neighborAtMinimum,
+            });
+          } else {
+            setSnappingInfo(null);
+          }
+        } else {
+          // Completely blocked (should be rare now — only if column not found)
+          setSnappingInfo({ columnKey, edge: "left", willOverflow: false });
+        }
+      };
+
+      const handleMouseUp = () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        commitResize(columnKey, startGridCol, startSpan, "left");
+        cleanupResize();
+      };
+
+      document.body.style.cursor = "col-resize";
+      document.body.style.userSelect = "none";
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [gridColumns, colGap, canvasZoom, section, isResponsive, effectiveCols, commitResize, cleanupResize]
+  );
+
+  return { resizePreview, snappingInfo, handleResizeRight, handleResizeLeft };
+}