@morphika/andami 0.4.1 → 0.5.0

package/README.md

@@ -7,7 +7,8 @@ A reusable Visual Page Builder framework for Next.js. Build custom websites with
 ## Features
 
 - **Visual Page Builder** — Infinite canvas editor with device previews (desktop, tablet, phone)
-- **7 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button, Project Grid
+- **6 Content Blocks** — Text, Image, Image Grid, Video, Spacer, Button (added via "+ Add Block" inside columns)
+- **2 Section-level Blocks** — Project Grid (masonry) and Project Carousel (horizontal "keep browsing" at end of project pages). Added via "+ Add Section"
 - **Cover Sections** — Full-viewport hero sections with proportional rows, background media, and drag-to-resize
 - **V2 Grid System** — 12-column CSS grid with push cascade engine and responsive overrides
 - **Custom Sections** — Create reusable sections with per-instance setting overrides

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

@@ -3,31 +3,63 @@
 import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useBuilderStore } from "../../lib/builder/store";
-import type { PageSectionV2 } from "../../lib/sanity/types";
-import { isPageSectionV2 } from "../../lib/sanity/types";
+import type { PageSectionV2, CoverSection, SectionColumn } from "../../lib/sanity/types";
+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);
-  if (!item || !isPageSectionV2(item)) return null;
+  if (!item) return null;
+
+  // Accept both PageSectionV2 and CoverSection — both expose `columns:
+  // SectionColumn[]` and `settings.grid_columns`. Other section types
+  // (parallax, custom instance) are not column-draggable targets.
+  let columns: SectionColumn[] | undefined;
+  let gridColumns = 12;
+  if (isPageSectionV2(item)) {
+    const v2 = item as PageSectionV2;
+    columns = v2.columns;
+    gridColumns = v2.settings?.grid_columns || 12;
+  } else if (isCoverSection(item)) {
+    const cover = item as CoverSection;
+    columns = cover.columns;
+    gridColumns = cover.settings?.grid_columns || 12;
+  } else {
+    return null;
+  }
 
-  const v2Section = item as PageSectionV2;
-  const col = v2Section.columns?.find((c) => c._key === columnKey);
+  const col = columns?.find((c) => c._key === columnKey);
   if (!col) return null;
 
   const blockCount = (col.blocks || []).length;
-  const gridColumns = v2Section.settings.grid_columns || 12;
+
+  // 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
@@ -38,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 */}
@@ -59,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>