@morphika/webframe 0.1.0

package/components/builder/SectionV2Column.tsx

@@ -0,0 +1,488 @@
+"use client";
+
+import { useState, useCallback, type ReactNode } from "react";
+import { useDroppable } from "@dnd-kit/core";
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useBuilderStore } from "../../lib/builder/store";
+import { makeBlockId, makeColumnDroppableId } from "./DndWrapper";
+import type { SectionColumn, ContentBlock, PageSectionV2 } from "../../lib/sanity/types";
+import { getColumnVerticalAlign } from "../../lib/builder/layout-styles";
+import { BUILDER_BLUE, BUILDER_GREEN } from "../../lib/builder/constants";
+
+// ============================================
+// SectionV2Column — Individual column in a V2 section grid
+//
+// Phase 3: Full handler implementation
+// - Drag grip (top-left): @dnd-kit useDraggable for column-level drag
+// - Resize handles (left + right): pill handles with scale-up hover
+// - Delete button (top-right): red ✕ circle
+// - Snapping guide feedback during resize
+//
+// Visual design (from PDF mockup):
+// - Section hover: dashed outline at ~30% opacity, +Add Block at ~30%
+// - Column hover: solid outline 100%, +Add Block 100%,
+//   3 handlers appear (stretch left, stretch right, drag grip top-left),
+//   delete button (red ✕ top-right), span badge top-right
+// - Handler hover: scale-up 1.15× animation
+// ============================================
+
+// ---- ResizeHandle ----
+// Extracted from the duplicated left/right resize handle blocks.
+// Encapsulates: hit area, 3-state pill visual (inactive/hover/active),
+// mousedown, mouse enter/leave for hoveredEdge.
+
+interface ResizeHandleProps {
+  edge: "left" | "right";
+  showChrome: boolean;
+  showFaintOutline: boolean;
+  resizingEdge: "left" | "right" | null;
+  hoveredEdge: "left" | "right" | null;
+  onHoverEdge: (edge: "left" | "right" | null) => void;
+  onResizeStart: (e: React.MouseEvent) => void;
+}
+
+function ResizeHandle({
+  edge,
+  showChrome,
+  showFaintOutline,
+  resizingEdge,
+  hoveredEdge,
+  onHoverEdge,
+  onResizeStart,
+}: ResizeHandleProps) {
+  const isActive = resizingEdge === edge;
+  const isHoveredEdge = hoveredEdge === edge;
+  const isVisible = showChrome || isActive || showFaintOutline;
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={`Resize column ${edge} edge`}
+      className={`absolute top-0 ${edge === "left" ? "left-0" : "right-0"} w-5 h-full z-[4] cursor-col-resize flex items-center justify-center transition-opacity ${
+        isVisible ? "opacity-100" : "opacity-0 pointer-events-none"
+      }`}
+      style={{ transform: edge === "left" ? "translateX(-50%)" : "translateX(50%)" }}
+      onMouseEnter={() => onHoverEdge(edge)}
+      onMouseLeave={() => { if (!isActive) onHoverEdge(null); }}
+      onMouseDown={(e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        onResizeStart(e);
+      }}
+    >
+      <div
+        className="pointer-events-none shadow-sm"
+        style={{
+          // 3-state visual: ACTIVE → circle (16×16px), HOVER → wide pill (10×56px), INACTIVE → thin pill (4–6px × 32–56px).
+          // showChrome (selected/hovered column) gets a slightly wider and taller pill for better discoverability.
+          width: isActive ? 16 : isHoveredEdge ? 10 : showChrome ? 6 : 4,
+          height: isActive ? 16 : isHoveredEdge ? 56 : showChrome ? 56 : 32,
+          borderRadius: isActive ? "50%" : 999,
+          backgroundColor: isActive
+            ? "rgba(7, 107, 255, 0.9)"
+            : isHoveredEdge
+            ? "rgba(7, 107, 255, 0.7)"
+            : showChrome
+            ? "rgba(7, 107, 255, 0.5)"
+            : "rgba(7, 107, 255, 0.2)",
+          transition: "width 150ms ease-out, height 150ms ease-out, border-radius 150ms ease-out, background-color 150ms, box-shadow 150ms",
+          boxShadow: isActive
+            ? "0 0 10px rgba(7, 107, 255, 0.5)"
+            : isHoveredEdge
+            ? "0 0 6px rgba(7, 107, 255, 0.2)"
+            : undefined,
+        }}
+      />
+    </div>
+  );
+}
+
+interface SectionV2ColumnProps {
+  column: SectionColumn;
+  sectionKey: string;
+  section: PageSectionV2;
+  isSelected: boolean;
+  isSectionHovered: boolean;
+  isResizing?: boolean;
+  snappingInfo?: {
+    columnKey: string;
+    edge: "left" | "right";
+    willOverflow: boolean;
+    compressedNeighborKey?: string | null;
+    neighborAtMinimum?: boolean;
+  } | null;
+  /** Make-room animation direction when an insert target is between this and an adjacent column */
+  insertNudge?: "left" | "right" | null;
+  /** Green highlight when this column is the swap target */
+  isSwapTarget?: boolean;
+  /** Replaces old isDragging from useDraggable — ghost effect when this column is being dragged */
+  isDraggedColumn?: boolean;
+  /** Calls into useColumnDrag.startDrag */
+  onStartDrag?: (e: React.MouseEvent) => void;
+  /** Container width in pixels (for nudge offset computation) */
+  containerWidth?: number;
+  onSelect: () => void;
+  onDelete: () => void;
+  onAddBlock: (insertIndex?: number) => void;
+  onResizeRight: (columnKey: string, startX: number, startSpan: number, containerEl: HTMLElement) => void;
+  onResizeLeft: (columnKey: string, startX: number, startGridCol: number, startSpan: number, containerEl: HTMLElement) => void;
+  children: ReactNode;
+}
+
+export default function SectionV2Column({
+  column,
+  sectionKey,
+  section,
+  isSelected,
+  isSectionHovered,
+  isResizing = false,
+  snappingInfo,
+  insertNudge,
+  isSwapTarget = false,
+  isDraggedColumn = false,
+  onStartDrag,
+  containerWidth = 0,
+  onSelect,
+  onDelete,
+  onAddBlock,
+  onResizeRight,
+  onResizeLeft,
+  children,
+}: SectionV2ColumnProps) {
+  const previewMode = useBuilderStore((s) => s.previewMode);
+  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const [isHovered, setIsHovered] = useState(false);
+  const [resizingEdge, setResizingEdge] = useState<"left" | "right" | null>(null);
+  const [hoveredEdge, setHoveredEdge] = useState<"left" | "right" | null>(null);
+
+  const gridColumns = section.settings.grid_columns || 12;
+
+  // ---- Block drop target ----
+  const blockDropId = makeColumnDroppableId(sectionKey, column._key);
+  const { setNodeRef: setBlockDropRef, isOver: isBlockOver } = useDroppable({
+    id: blockDropId,
+    disabled: previewMode,
+  });
+
+  // Block IDs for sortable context
+  const blockIds = (column.blocks || []).map((b: ContentBlock) =>
+    makeBlockId(sectionKey, column._key, b._key)
+  );
+
+  // ---- Stable callbacks ----
+  const handleClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onSelect();
+  }, [onSelect]);
+
+  const handleMouseEnter = useCallback(() => setIsHovered(true), []);
+  const handleMouseLeave = useCallback(() => setIsHovered(false), []);
+
+  const handleDelete = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onDelete();
+  }, [onDelete]);
+
+  const handleAddBlockEmpty = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onAddBlock(0);
+  }, [onAddBlock]);
+
+  const handleAddBlockBelow = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    onAddBlock((column.blocks || []).length);
+  }, [onAddBlock, column.blocks]);
+
+  const hasBlocks = (column.blocks || []).length > 0;
+  const showChrome = (isSelected || isHovered) && !isDraggedColumn;
+  // Show faint outlines when section is hovered but not this specific column
+  const showFaintOutline = isSectionHovered && !isHovered && !isSelected && !isDraggedColumn;
+
+  // Column-level vertical alignment from blocks' align_v settings
+  const colJustify = getColumnVerticalAlign(column.blocks || []);
+
+  // ---- Preview mode ----
+  if (previewMode) {
+    return (
+      <div
+        ref={setBlockDropRef}
+        style={{
+          gridColumn: `${column.grid_column} / span ${column.span}`,
+          gridRow: column.grid_row,
+          display: "flex",
+          flexDirection: "column",
+          ...(colJustify ? { justifyContent: colJustify } : {}),
+          height: "100%",
+          minHeight: 0,
+        }}
+      >
+        <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
+          {children}
+        </SortableContext>
+      </div>
+    );
+  }
+
+  // Compute nudge offset for make-room animation.
+  // The column slides horizontally by 25% of one grid unit (containerWidth / gridColumns / 4)
+  // to visually "make room" for an insertion line drop target between adjacent columns.
+  const nudgeOffset = insertNudge
+    ? (containerWidth / gridColumns / 4) * (insertNudge === "left" ? -1 : 1)
+    : 0;
+
+  // ---- Design mode ----
+  return (
+    <div
+      className="relative group"
+      data-col-v2-droptarget=""
+      data-section-key={sectionKey}
+      data-column-key={column._key}
+      style={{
+        gridColumn: `${column.grid_column} / span ${column.span}`,
+        gridRow: column.grid_row,
+        display: "flex",
+        flexDirection: "column",
+        ...(colJustify ? { justifyContent: colJustify } : {}),
+        height: "100%",
+        minHeight: 0,
+        opacity: isDraggedColumn ? 0.3 : 1,
+        transform: nudgeOffset ? `translateX(${nudgeOffset}px)` : undefined,
+        transition: isDraggedColumn
+          ? "none"
+          : "opacity 150ms, box-shadow 150ms, transform 150ms ease-out",
+      }}
+      ref={setBlockDropRef}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {/* Column outline */}
+      <div
+        className="pointer-events-none absolute inset-0 z-[1] rounded"
+        style={{
+          transition: "box-shadow 150ms, border 150ms",
+          ...(isSwapTarget
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_GREEN}`, background: "rgba(34, 197, 94, 0.08)" }
+            : isBlockOver
+            ? { boxShadow: `inset 0 0 0 2px ${BUILDER_BLUE}` }
+            : isSelected
+            ? { boxShadow: `inset 0 0 0 2px rgba(7, 107, 255, 0.6)` }
+            : isHovered
+            ? { boxShadow: `inset 0 0 0 1.5px rgba(7, 107, 255, 0.5)` }
+            : showFaintOutline
+            ? { border: `1px dashed rgba(7, 107, 255, 0.2)`, borderRadius: 4 }
+            : undefined),
+        }}
+      />
+
+      {/* Snapping warning indicator — overflow on right edge */}
+      {snappingInfo?.willOverflow && (
+        <div
+          className="pointer-events-none absolute z-[8]"
+          style={{
+            top: 0,
+            bottom: 0,
+            ...(snappingInfo.edge === "right"
+              ? { right: -2, width: 3 }
+              : { left: -2, width: 3 }),
+            background: "#ff6b35",
+            borderRadius: 2,
+            animation: "pulse 0.8s ease-in-out infinite",
+          }}
+        />
+      )}
+
+      {/* Neighbor-at-minimum indicator — pulsing orange border + badge when this
+          column has been compressed to span 1 during a left-edge resize */}
+      {snappingInfo?.compressedNeighborKey === column._key && snappingInfo?.neighborAtMinimum && (
+        <>
+          <div
+            className="pointer-events-none absolute inset-0 z-[8] rounded"
+            style={{
+              boxShadow: "inset 0 0 0 2px #ff6b35",
+              animation: "pulse 0.8s ease-in-out infinite",
+            }}
+          />
+          <div
+            className="pointer-events-none absolute z-[9]"
+            style={{
+              bottom: -2,
+              left: "50%",
+              transform: `translateX(-50%) scale(${1 / canvasZoom})`,
+              transformOrigin: "bottom center",
+              background: "#ff6b35",
+              color: "white",
+              fontSize: 10,
+              fontWeight: 600,
+              padding: "2px 8px",
+              borderRadius: 4,
+              whiteSpace: "nowrap",
+              boxShadow: "0 2px 6px rgba(255, 107, 53, 0.4)",
+            }}
+          >
+            Min width
+          </div>
+        </>
+      )}
+
+      {/* Span badge — top right */}
+      <div
+        className={`absolute top-0 right-0 z-[5] transition-opacity ${
+          isSelected || isHovered ? "opacity-100" : showFaintOutline ? "opacity-40" : "opacity-0"
+        }`}
+        style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "top right" }}
+      >
+        <span className="text-[11px] px-1.5 py-0.5 rounded-bl rounded-tr bg-[#076bff]/80 text-white/90 font-medium tabular-nums">
+          {column.span}/{gridColumns}
+        </span>
+      </div>
+
+      {/* Delete button — red circle top right, positioned outside the column box.
+          Nested pattern: outer div positions, inner div counter-scales. */}
+      <div
+        className={`absolute z-[6] transition-opacity ${
+          showChrome ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        style={{
+          top: 0,
+          right: 0,
+          transform: "translate(40%, -40%)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "center" }}>
+        <button
+          onClick={handleDelete}
+          className="w-5 h-5 rounded-full bg-red-500 text-white flex items-center justify-center shadow-md transition-transform hover:scale-[1.15] hover:bg-red-600 hover:shadow-red-500/30 hover:shadow-lg"
+          title="Delete column"
+          aria-label="Delete column"
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10">
+            <path d="M2 2l6 6M8 2l-6 6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+        </button>
+        </div>
+      </div>
+
+      {/* Drag grip — top left corner, uses @dnd-kit useDraggable.
+          Nested pattern: outer div positions, inner div counter-scales. */}
+      <div
+        className={`absolute z-[6] transition-opacity ${
+          showChrome ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        style={{
+          top: 0,
+          left: 0,
+          transform: "translate(-30%, -30%)",
+        }}
+      >
+        <div style={{ transform: `scale(${1 / canvasZoom})`, transformOrigin: "center" }}>
+        <div
+          className="w-5 h-5 rounded-full bg-[#076bff] text-white flex items-center justify-center shadow-md cursor-grab active:cursor-grabbing transition-transform hover:scale-[1.15] hover:bg-[#0559d4] hover:shadow-blue-500/30 hover:shadow-lg"
+          title="Drag to move column"
+          aria-label="Move column"
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onStartDrag?.(e);
+          }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onSelect();
+          }}
+        >
+          <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M8 0l2.5 3h-2v4.5H13v-2L16 8l-3 2.5v-2H8.5V13h2L8 16l-2.5-3h2V8.5H3v2L0 8l3-2.5v2h4.5V3h-2L8 0z" />
+          </svg>
+        </div>
+        </div>
+      </div>
+
+      {/* Resize handles — left and right edges */}
+      <ResizeHandle
+        edge="left"
+        showChrome={showChrome}
+        showFaintOutline={showFaintOutline}
+        resizingEdge={resizingEdge}
+        hoveredEdge={hoveredEdge}
+        onHoverEdge={setHoveredEdge}
+        onResizeStart={(e) => {
+          setResizingEdge("left");
+          const onUp = () => { setResizingEdge(null); setHoveredEdge(null); document.removeEventListener("mouseup", onUp); };
+          document.addEventListener("mouseup", onUp);
+          const container = (e.currentTarget as HTMLElement).closest("[data-v2-grid-container]") as HTMLElement;
+          if (container) {
+            onResizeLeft(column._key, e.clientX, column.grid_column, column.span, container);
+          }
+        }}
+      />
+      <ResizeHandle
+        edge="right"
+        showChrome={showChrome}
+        showFaintOutline={showFaintOutline}
+        resizingEdge={resizingEdge}
+        hoveredEdge={hoveredEdge}
+        onHoverEdge={setHoveredEdge}
+        onResizeStart={(e) => {
+          setResizingEdge("right");
+          const onUp = () => { setResizingEdge(null); setHoveredEdge(null); document.removeEventListener("mouseup", onUp); };
+          document.addEventListener("mouseup", onUp);
+          const container = (e.currentTarget as HTMLElement).closest("[data-v2-grid-container]") as HTMLElement;
+          if (container) {
+            onResizeRight(column._key, e.clientX, column.span, container);
+          }
+        }}
+      />
+
+      {/* Blocks content */}
+      <SortableContext items={blockIds} strategy={verticalListSortingStrategy}>
+        {!hasBlocks ? (
+          /* Empty column: show + Add Block */
+          <div
+            className="relative flex items-center justify-center"
+            style={{ minHeight: 80, padding: "16px 12px" }}
+          >
+            <button
+              onClick={handleAddBlockEmpty}
+              aria-label="Add block to empty column"
+              className={`w-full py-2 rounded-lg text-xs font-medium transition-all flex items-center justify-center ${
+                showChrome
+                  ? "bg-[#e28b00] text-white hover:bg-[#c67a00] shadow-sm opacity-100"
+                  : showFaintOutline
+                  ? "bg-[#e28b00]/30 text-white/50 opacity-40"
+                  : "bg-transparent text-transparent opacity-0 pointer-events-none"
+              }`}
+              style={{ pointerEvents: showChrome || showFaintOutline ? "auto" : "none" }}
+            >
+              + Add Block
+            </button>
+          </div>
+        ) : (
+          children
+        )}
+      </SortableContext>
+
+      {/* "+" add block button below blocks — absolutely positioned to avoid disrupting flex alignment */}
+      {hasBlocks && (
+        <div
+          className={`absolute left-0 right-0 z-[3] transition-all ${
+            showChrome ? "opacity-100" : showFaintOutline ? "opacity-30" : "opacity-0 pointer-events-none"
+          }`}
+          style={{ bottom: 0, transform: "translateY(100%)", padding: "4px 12px 0" }}
+        >
+          <button
+            onClick={handleAddBlockBelow}
+            aria-label="Add block below existing blocks"
+            className="w-full py-1.5 text-[11px] font-medium rounded bg-[#e28b00] text-white hover:bg-[#c67a00] transition-all shadow-sm"
+            style={{ pointerEvents: showChrome ? "auto" : "none" }}
+          >
+            + Add Block
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}