@morphika/andami 0.1.2

package/components/builder/DndWrapper.tsx

@@ -0,0 +1,337 @@
+"use client";
+
+import {
+  DndContext,
+  DragOverlay,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragEndEvent,
+} from "@dnd-kit/core";
+import { useState, useCallback, useMemo, useEffect, memo, type ReactNode } from "react";
+import { createPortal } from "react-dom";
+import { useBuilderStore } from "../../lib/builder/store";
+import { ALL_BLOCK_INFO } from "../../lib/builder/types";
+import type { PageSectionV2, ParallaxGroup } from "../../lib/sanity/types";
+import { isPageSectionV2, isParallaxGroup } from "../../lib/sanity/types";
+
+// ============================================
+// Scale Modifier for dnd-kit inside CSS-scaled canvas
+// ============================================
+
+function createScaleModifier(zoom: number) {
+  return ({ transform }: { transform: { x: number; y: number; scaleX: number; scaleY: number } }) => ({
+    ...transform,
+    x: transform.x / zoom,
+    y: transform.y / zoom,
+  });
+}
+
+// ============================================
+// DnD ID Helpers
+// ============================================
+
+// IDs encode context: "row:KEY" or "block:ROWKEY:COLKEY:BLOCKKEY"
+export function makeRowId(rowKey: string) {
+  return `row:${rowKey}`;
+}
+
+export function makeBlockId(rowKey: string, colKey: string, blockKey: string) {
+  return `block:${rowKey}:${colKey}:${blockKey}`;
+}
+
+export function makeColumnDroppableId(rowKey: string, colKey: string) {
+  return `col-drop:${rowKey}:${colKey}`;
+}
+
+function parseId(id: string) {
+  const parts = id.split(":");
+  if (parts[0] === "row" && parts.length >= 2) {
+    return { type: "row" as const, rowKey: parts[1] };
+  }
+  if (parts[0] === "block" && parts.length >= 4) {
+    return { type: "block" as const, rowKey: parts[1], colKey: parts[2], blockKey: parts[3] };
+  }
+  if (parts[0] === "col-drop" && parts.length >= 3) {
+    return { type: "column" as const, rowKey: parts[1], colKey: parts[2] };
+  }
+  return null;
+}
+
+// ============================================
+// Drag Overlay Components
+// ============================================
+
+function RowDragOverlay({ rowKey }: { rowKey: string }) {
+  const rows = useBuilderStore((s) => s.rows);
+  const item = rows.find((r) => r._key === rowKey);
+  if (!item) return null;
+
+  // PageSectionV2
+  if (isPageSectionV2(item)) {
+    const v2Section = item as PageSectionV2;
+    const colCount = v2Section.columns?.length || 0;
+    return (
+      <div className="rounded border border-[#076bff] bg-[#1a1a1a]/90 px-4 py-3 shadow-lg shadow-[#076bff]/20 backdrop-blur-sm">
+        <div className="flex items-center gap-2">
+          <span className="text-[#076bff]">⠿</span>
+          <span className="text-xs text-white">V2 Section · {colCount} col{colCount !== 1 ? "s" : ""}</span>
+        </div>
+      </div>
+    );
+  }
+
+  // ParallaxGroup
+  if (isParallaxGroup(item)) {
+    const group = item as ParallaxGroup;
+    return (
+      <div className="rounded border border-[#8b5cf6] bg-[#1a1a1a]/90 px-4 py-3 shadow-lg shadow-[#8b5cf6]/20 backdrop-blur-sm">
+        <div className="flex items-center gap-2">
+          <span className="text-[#8b5cf6]">⠿</span>
+          <span className="text-xs text-white">Parallax Showcase · {group.slides.length} slide{group.slides.length !== 1 ? "s" : ""}</span>
+        </div>
+      </div>
+    );
+  }
+
+  // PageSection
+  if ((item as { _type?: string })._type === "pageSection") {
+    const section = item as import("../../lib/sanity/types").PageSection;
+    const label = section.section_type === "projectGrid"
+      ? "Project Grid"
+      : "Section";
+    return (
+      <div className="rounded border border-[#93278f] bg-[#1a1a1a]/90 px-4 py-3 shadow-lg shadow-[#93278f]/20 backdrop-blur-sm">
+        <div className="flex items-center gap-2">
+          <span className="text-[#93278f]">⠿</span>
+          <span className="text-xs text-white">{label}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+const BlockDragOverlay = memo(function BlockDragOverlay({ blockKey, rowKey }: { blockKey: string; rowKey: string }) {
+  const rows = useBuilderStore((s) => s.rows);
+
+  // Find the content item — could be a top-level row or a parallax slide
+  let item = rows.find((r) => r._key === rowKey);
+  // If not found at top level, search inside parallax groups for a matching slide
+  if (!item) {
+    for (const r of rows) {
+      if (isParallaxGroup(r)) {
+        const group = r as ParallaxGroup;
+        const slide = group.slides.find((s) => s._key === rowKey);
+        if (slide) {
+          // Create a virtual section item for block lookup
+          item = { _type: "pageSectionV2", _key: slide._key, section_type: "empty-v2", columns: slide.columns, settings: slide.section_settings } as PageSectionV2;
+          break;
+        }
+      }
+    }
+  }
+  if (!item) return null;
+
+  // Handle V2 sections, PageSections, and virtual sections from parallax slides
+  let block: import("../../lib/sanity/types").ContentBlock | undefined;
+  if (isPageSectionV2(item)) {
+    const v2Section = item as PageSectionV2;
+    for (const col of v2Section.columns || []) {
+      const found = (col.blocks || []).find((b) => b._key === blockKey);
+      if (found) { block = found; break; }
+    }
+  } else if ((item as { _type?: string })._type === "pageSection") {
+    const section = item as import("../../lib/sanity/types").PageSection;
+    const sBlock = Array.isArray(section.block) ? section.block[0] : undefined;
+    if (sBlock && sBlock._key === blockKey) {
+      block = sBlock as import("../../lib/sanity/types").ContentBlock;
+    }
+  }
+
+  if (!block) return null;
+  const info = ALL_BLOCK_INFO.find((b) => b.type === block!._type);
+  return (
+    <div className="rounded border border-[#e28b00] bg-[#e28b00]/10 px-3 py-2 shadow-lg shadow-[#e28b00]/20 backdrop-blur-sm">
+      <div className="flex items-center gap-2">
+        <span className="text-xs">{info?.icon || "▪"}</span>
+        <span className="text-xs text-white">{info?.label || block._type}</span>
+      </div>
+    </div>
+  );
+});
+
+// ============================================
+// DndWrapper — handles row reordering and block DnD
+//
+// Column drag is now handled by the custom useColumnDrag
+// hook + ColumnDragContext (Session 111).
+// ============================================
+
+interface DndWrapperProps {
+  children: ReactNode;
+}
+
+interface ActiveDrag {
+  type: "row" | "block";
+  rowKey: string;
+  colKey?: string;
+  blockKey?: string;
+}
+
+export default function DndWrapper({ children }: DndWrapperProps) {
+  // Use individual selectors — avoid subscribing to the entire store which
+  // causes re-renders on every zoom/pan/selection/text change.
+  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const reorderRows = useBuilderStore((s) => s.reorderRows);
+  const reorderBlocks = useBuilderStore((s) => s.reorderBlocks);
+  const moveBlock = useBuilderStore((s) => s.moveBlock);
+  const [activeDrag, setActiveDrag] = useState<ActiveDrag | null>(null);
+
+  // Portal target for DragOverlay — must render outside the canvas transform
+  // container so overlay positioning uses viewport coordinates directly.
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setPortalTarget(document.body);
+  }, []);
+
+  const scaleModifier = useMemo(() => createScaleModifier(canvasZoom), [canvasZoom]);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // 8px before drag starts (avoids accidental drags)
+      },
+    }),
+    useSensor(KeyboardSensor)
+  );
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    const parsed = parseId(event.active.id as string);
+    if (!parsed) return;
+
+    if (parsed.type === "row") {
+      setActiveDrag({ type: "row", rowKey: parsed.rowKey });
+    } else if (parsed.type === "block") {
+      setActiveDrag({
+        type: "block",
+        rowKey: parsed.rowKey,
+        colKey: parsed.colKey,
+        blockKey: parsed.blockKey,
+      });
+    }
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      setActiveDrag(null);
+
+      if (!over || active.id === over.id) return;
+
+      const activeParsed = parseId(active.id as string);
+      const overParsed = parseId(over.id as string);
+
+      if (!activeParsed || !overParsed) return;
+
+      // Read rows at drag-end time (not subscribed — avoids re-renders)
+      const rows = useBuilderStore.getState().rows;
+
+      // Row reordering
+      if (activeParsed.type === "row" && overParsed.type === "row") {
+        const fromIndex = rows.findIndex((r) => r._key === activeParsed.rowKey);
+        const toIndex = rows.findIndex((r) => r._key === overParsed.rowKey);
+        if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+          reorderRows(fromIndex, toIndex);
+        }
+        return;
+      }
+
+      // Block reordering / cross-column move
+      if (activeParsed.type === "block") {
+        const fromRowKey = activeParsed.rowKey;
+        const fromColKey = activeParsed.colKey!;
+        const blockKey = activeParsed.blockKey!;
+
+        if (overParsed.type === "block") {
+          const toRowKey = overParsed.rowKey;
+          const toColKey = overParsed.colKey!;
+          const toBlockKey = overParsed.blockKey!;
+
+          // Find target index
+          let toCol: { blocks?: { _key: string }[] } | undefined;
+
+          // Check if target is a V2 section
+          const toItem = rows.find((r) => r._key === toRowKey);
+          if (toItem && isPageSectionV2(toItem)) {
+            const v2Section = toItem as PageSectionV2;
+            toCol = v2Section.columns?.find((c) => c._key === toColKey);
+          }
+
+          const toIndex = (toCol?.blocks || []).findIndex((b) => b._key === toBlockKey);
+
+          if (fromRowKey === toRowKey && fromColKey === toColKey) {
+            // Same column reorder
+            let fromCol: { blocks?: { _key: string }[] } | undefined;
+            const fromItem = rows.find((r) => r._key === fromRowKey);
+            if (fromItem && isPageSectionV2(fromItem)) {
+              fromCol = (fromItem as PageSectionV2).columns?.find((c) => c._key === fromColKey);
+            }
+            const fromIndex = (fromCol?.blocks || []).findIndex((b) => b._key === blockKey);
+            if (fromIndex !== -1 && toIndex !== -1 && fromIndex !== toIndex) {
+              reorderBlocks(fromRowKey, fromColKey, fromIndex, toIndex);
+            }
+          } else {
+            // Cross-column move
+            moveBlock(blockKey, toRowKey, toColKey, toIndex);
+          }
+        }
+      }
+    },
+    [reorderRows, reorderBlocks, moveBlock]
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      modifiers={[scaleModifier]}
+    >
+      {children}
+      {/* Portal the DragOverlay to document.body so it escapes the canvas
+          transform container (translate3d + scale). Without this, the overlay
+          inherits the canvas CSS transform and its viewport-based positioning
+          is offset by the pan/zoom values — causing the ghost to jump far
+          from the cursor on drag start. React Context crosses portals, so
+          DragOverlay still communicates with DndContext correctly. */}
+      {portalTarget
+        ? createPortal(
+            <DragOverlay dropAnimation={null}>
+              {activeDrag?.type === "row" && (
+                <RowDragOverlay rowKey={activeDrag.rowKey} />
+              )}
+              {activeDrag?.type === "block" && activeDrag.blockKey && (
+                <BlockDragOverlay blockKey={activeDrag.blockKey} rowKey={activeDrag.rowKey} />
+              )}
+            </DragOverlay>,
+            portalTarget
+          )
+        : (
+            <DragOverlay dropAnimation={null}>
+              {activeDrag?.type === "row" && (
+                <RowDragOverlay rowKey={activeDrag.rowKey} />
+              )}
+              {activeDrag?.type === "block" && activeDrag.blockKey && (
+                <BlockDragOverlay blockKey={activeDrag.blockKey} rowKey={activeDrag.rowKey} />
+              )}
+            </DragOverlay>
+          )}
+    </DndContext>
+  );
+}

package/components/builder/InsertionLines.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { useMemo, memo } from "react";
+import type { CascadeColumn } from "../../lib/builder/cascade-helpers";
+import type { DropTarget } from "./hooks/useColumnDrag";
+import { BUILDER_GREEN } from "../../lib/builder/constants";
+
+// ============================================
+// InsertionLines — Visual insertion indicators between adjacent columns
+// ============================================
+// Rendered during custom column drag. Shows thin green lines with a circle
+// indicator between columns that have no gap between them, serving as
+// drop targets for inserting a column between two neighbours.
+//
+// Extracted from SectionV2Canvas (Session G refactor).
+
+/** Insertion point between two adjacent columns (no gap between them) */
+interface InsertionPoint {
+  row: number;
+  gridColumn: number; // The grid column where the insertion line sits (= right column's start)
+  leftColKey: string;
+  rightColKey: string;
+}
+
+interface InsertionLinesProps {
+  displayCols: (CascadeColumn & { _key: string })[];
+  draggingColumnKey: string | null;
+  containerWidth: number;
+  gridColumns: number;
+  colGap: number;
+  sectionKey: string;
+  dropTarget: DropTarget | null;
+}
+
+export const InsertionLines = memo(function InsertionLines({
+  displayCols,
+  draggingColumnKey,
+  containerWidth,
+  gridColumns,
+  colGap,
+  sectionKey,
+  dropTarget,
+}: InsertionLinesProps) {
+  // Compute insertion points between adjacent columns (no gap between them)
+  // Exclude the currently dragged column from consideration
+  const insertionPoints = useMemo((): InsertionPoint[] => {
+    const points: InsertionPoint[] = [];
+    // Group display columns by row
+    const rowMap = new Map<number, (CascadeColumn & { _key: string })[]>();
+    for (const dc of displayCols) {
+      // Skip the dragged column — it's "lifted" from the grid
+      if (dc._key === draggingColumnKey) continue;
+      const row = dc.grid_row;
+      if (!rowMap.has(row)) rowMap.set(row, []);
+      rowMap.get(row)!.push(dc);
+    }
+
+    for (const [row, cols] of rowMap) {
+      const sorted = [...cols].sort((a, b) => a.grid_column - b.grid_column);
+      for (let i = 0; i < sorted.length - 1; i++) {
+        const colA = sorted[i];
+        const colB = sorted[i + 1];
+        const aEnd = colA.grid_column + colA.span; // 1 past end
+        // Adjacent = no gap between them
+        if (aEnd === colB.grid_column) {
+          points.push({
+            row,
+            gridColumn: colB.grid_column,
+            leftColKey: colA._key,
+            rightColKey: colB._key,
+          });
+        }
+      }
+    }
+
+    return points;
+  }, [displayCols, draggingColumnKey]);
+
+  // Compute pixel positions for insertion lines
+  const insertionLinePositions = useMemo(() => {
+    if (containerWidth === 0) return [];
+
+    // Each 1fr unit width: (containerWidth - totalGaps) / gridColumns
+    const totalGaps = (gridColumns - 1) * colGap;
+    const unitWidth = (containerWidth - totalGaps) / gridColumns;
+
+    return insertionPoints.map((pt) => {
+      // The left pixel of the grid column `gc` is:
+      // (gc - 1) * unitWidth + (gc - 1) * colGap = (gc - 1) * (unitWidth + colGap)
+      const leftPxOfRightCol = (pt.gridColumn - 1) * (unitWidth + colGap);
+      // The insertion line sits in the middle of the gap between the two columns
+      const linePx = leftPxOfRightCol - colGap / 2;
+      return { ...pt, pixelLeft: linePx };
+    });
+  }, [containerWidth, insertionPoints, gridColumns, colGap]);
+
+  if (insertionLinePositions.length === 0) return null;
+
+  return (
+    <>
+      {insertionLinePositions.map((pt) => {
+        const isActive =
+          dropTarget?.type === "insert" &&
+          dropTarget.sectionKey === sectionKey &&
+          dropTarget.insertRow === pt.row &&
+          dropTarget.insertCol === pt.gridColumn;
+        // Hit-test zone: at least the gap width + 10px padding, but never less than 24px.
+        // The 24px minimum ensures the target is usable even with very small (or zero) column gaps.
+        const hitWidth = Math.max(colGap + 10, 24);
+
+        return (
+          <div
+            key={`insert-${pt.row}-${pt.gridColumn}`}
+            style={{
+              gridColumn: "1 / -1",
+              gridRow: pt.row,
+              position: "relative",
+              pointerEvents: "none",
+              zIndex: 20,
+              alignSelf: "stretch",
+              minHeight: 0,
+            }}
+          >
+            <div
+              data-col-v2-insert=""
+              data-section-key={sectionKey}
+              data-insert-row={pt.row}
+              data-insert-col={pt.gridColumn}
+              data-insert-left-key={pt.leftColKey}
+              data-insert-right-key={pt.rightColKey}
+              style={{
+                position: "absolute",
+                left: pt.pixelLeft - hitWidth / 2,
+                top: 0,
+                bottom: 0,
+                width: hitWidth,
+                pointerEvents: "auto",
+              }}
+            >
+              {/* Visual insertion line — green when active */}
+              <div
+                style={{
+                  position: "absolute",
+                  left: "50%",
+                  top: 4,
+                  bottom: 4,
+                  width: isActive ? 4 : 0,
+                  transform: "translateX(-50%)",
+                  background: BUILDER_GREEN,
+                  borderRadius: 2,
+                  transition: "width 100ms ease-out, opacity 100ms ease-out",
+                  opacity: isActive ? 1 : 0,
+                }}
+              />
+              {/* Circle indicator at center */}
+              {isActive && (
+                <div
+                  style={{
+                    position: "absolute",
+                    left: "50%",
+                    top: "50%",
+                    transform: "translate(-50%, -50%)",
+                    width: 14,
+                    height: 14,
+                    borderRadius: "50%",
+                    background: BUILDER_GREEN,
+                    border: "2px solid white",
+                    boxShadow: "0 1px 4px rgba(34, 197, 94, 0.4)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 10,
+                    color: "white",
+                    fontWeight: "bold",
+                  }}
+                >
+                  +
+                </div>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+});