@morphika/andami 0.4.2 → 0.5.1

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/components/builder/live-preview/LiveAudioPreview.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import type { AudioBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveAudioPreview — Static preview for builder canvas.
+ *
+ * Same layout as the runtime renderer but no audio element / no playback —
+ * a frozen snapshot with a 0% progress bar, a play glyph, and a dummy
+ * `0:00 / 0:00` time label. Metadata (title / artist) and cover art
+ * render when present.
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+export default function LiveAudioPreview({ block }: { block: AudioBlock }) {
+  const accent = block.accent_color || "#4794E2";
+  const coverSrc = block.cover_path ? (adminThumbUrl(block.cover_path) || adminAssetUrl(block.cover_path)) : null;
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? { width: "100%" } : (widthStyleMap[block.width ?? "contained"] || widthStyleMap.contained);
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : "12px";
+
+  const hasMetaText = !!(block.title || block.artist);
+  const hasAsset = !!block.asset_path;
+
+  const containerStyle: React.CSSProperties = {
+    ...widthStyle,
+    display: "flex",
+    alignItems: "center",
+    gap: 14,
+    padding: "12px 16px",
+    background: "#fafafa",
+    border: "1px solid #ececec",
+    borderRadius,
+    boxShadow: block.shadow ? "0 8px 24px -12px rgba(0,0,0,0.25)" : undefined,
+    overflow: "hidden",
+    opacity: hasAsset ? 1 : 0.75,
+  };
+
+  return (
+    <div style={containerStyle}>
+      {coverSrc ? (
+        <div style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 8, overflow: "hidden", background: "#eee" }}>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img src={coverSrc} alt={block.alt || block.title || ""} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
+        </div>
+      ) : null}
+
+      <div
+        aria-hidden
+        style={{
+          width: 40,
+          height: 40,
+          flexShrink: 0,
+          borderRadius: "50%",
+          background: accent,
+          color: "#fff",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style={{ marginLeft: 2 }}>
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </div>
+
+      <div style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 4 }}>
+        {hasMetaText ? (
+          <div style={{ display: "flex", alignItems: "baseline", gap: 6, minWidth: 0 }}>
+            {block.title && (
+              <span style={{ fontSize: 13, fontWeight: 600, color: "#111", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.title}
+              </span>
+            )}
+            {block.artist && (
+              <span style={{ fontSize: 12, color: "#777", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {block.artist}
+              </span>
+            )}
+          </div>
+        ) : (
+          !hasAsset && (
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>Audio — pick a file</span>
+          )
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div style={{ flex: 1, height: 4, background: "#e5e5e5", borderRadius: 999, position: "relative" }}>
+            <div style={{ position: "absolute", inset: 0, width: "0%", background: accent, borderRadius: 999 }} />
+            <div
+              style={{
+                position: "absolute",
+                top: "50%",
+                left: "0%",
+                width: 10,
+                height: 10,
+                marginTop: -5,
+                marginLeft: -5,
+                borderRadius: "50%",
+                background: "#fff",
+                boxShadow: `0 0 0 2px ${accent}`,
+              }}
+            />
+          </div>
+          <span style={{ fontSize: 11, color: "#777", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" }}>
+            0:00 / 0:00
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/builder/live-preview/LiveBeforeAfterPreview.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { adminAssetUrl, adminThumbUrl } from "../../../lib/assets";
+import type { BeforeAfterBlock } from "../../../lib/sanity/types";
+
+/**
+ * LiveBeforeAfterPreview — Static preview for builder canvas.
+ *
+ * Shows both assets with a fixed 50% split (or the configured `initial_position`)
+ * and a divider line + knob — no drag interaction in the builder. Videos are
+ * represented by a poster-style thumbnail with a play glyph (no streaming /
+ * autoplay inside the builder).
+ */
+
+const widthStyleMap: Record<string, { width: string; margin?: string }> = {
+  full: { width: "100%" },
+  contained: { width: "75%", margin: "0 auto" },
+  small: { width: "50%", margin: "0 auto" },
+};
+
+const aspectMap: Record<string, string | undefined> = {
+  auto: undefined,
+  "16:9": "16/9",
+  "4:3": "4/3",
+  "1:1": "1/1",
+  "21:9": "21/9",
+};
+
+function clamp(n: number, lo = 0, hi = 100): number {
+  return Math.max(lo, Math.min(hi, n));
+}
+
+function PreviewMedia({
+  type,
+  path,
+  alt,
+}: {
+  type: "image" | "video";
+  path: string;
+  alt: string;
+}) {
+  const src = adminThumbUrl(path) || adminAssetUrl(path);
+  const commonStyle: React.CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    display: "block",
+    pointerEvents: "none",
+    userSelect: "none",
+  };
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img src={src} alt={alt} loading="lazy" decoding="async" draggable={false} style={commonStyle} />
+      {type === "video" && (
+        <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
+          <div style={{ width: 44, height: 44, borderRadius: "50%", background: "rgba(0,0,0,0.55)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ color: "#FFFFFF", fontSize: 16, marginLeft: 2 }}>&#9654;</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default function LiveBeforeAfterPreview({ block }: { block: BeforeAfterBlock }) {
+  const beforeType = block.before_media_type ?? "image";
+  const afterType = block.after_media_type ?? "image";
+  const orientation = block.orientation ?? "horizontal";
+  const position = clamp(block.initial_position ?? 50);
+  const handleColor = block.handle_color || "#FFFFFF";
+
+  const isFill = block.width === "fill";
+  const widthStyle = isFill ? {} : (widthStyleMap[block.width ?? "full"] || widthStyleMap.full);
+  const aspect = isFill ? undefined : aspectMap[block.aspect_ratio ?? "16:9"] ?? "16/9";
+
+  const rawRadius = block.border_radius ? String(block.border_radius).replace(/[a-z%]+$/i, "") : "";
+  const borderRadius = rawRadius && !isNaN(Number(rawRadius)) ? `${rawRadius}px` : undefined;
+
+  const hasBefore = !!block.before_asset_path;
+  const hasAfter = !!block.after_asset_path;
+
+  // Empty state: no assets on either side
+  if (!hasBefore && !hasAfter) {
+    const wrapperStyle: React.CSSProperties = isFill
+      ? { position: "absolute", inset: 0 }
+      : { width: "100%" };
+    return (
+      <div style={wrapperStyle}>
+        <div className="w-full h-full min-h-[240px] rounded flex flex-col items-center justify-center gap-2.5" style={{ background: "#f4f4f4" }}>
+          <svg width="56" height="56" viewBox="0 0 56 56" fill="none" aria-hidden="true">
+            <rect x="6" y="10" width="44" height="36" rx="3" stroke="#b0b5bd" strokeWidth="1.5" fill="#FFFFFF" />
+            <line x1="28" y1="10" x2="28" y2="46" stroke="#b0b5bd" strokeWidth="1.5" />
+            <circle cx="28" cy="28" r="5" fill="#FFFFFF" stroke="#b0b5bd" strokeWidth="1.5" />
+          </svg>
+          <span className="text-[11px] text-neutral-500">Before / After — pick two assets</span>
+        </div>
+      </div>
+    );
+  }
+
+  const afterClip = orientation === "horizontal"
+    ? `inset(0 0 0 ${position}%)`
+    : `inset(${position}% 0 0 0)`;
+
+  const dividerStyle: React.CSSProperties = orientation === "horizontal"
+    ? { position: "absolute", top: 0, bottom: 0, left: `${position}%`, width: 2, transform: "translateX(-1px)", background: handleColor, pointerEvents: "none" }
+    : { position: "absolute", left: 0, right: 0, top: `${position}%`, height: 2, transform: "translateY(-1px)", background: handleColor, pointerEvents: "none" };
+
+  const knobStyle: React.CSSProperties = {
+    position: "absolute",
+    left: "50%",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+    width: 32,
+    height: 32,
+    borderRadius: "50%",
+    background: handleColor,
+    boxShadow: "0 2px 8px rgba(0,0,0,0.35)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    pointerEvents: "none",
+  };
+
+  const ArrowIcon = orientation === "horizontal" ? (
+    <svg width="14" height="14" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M5 4 L1 9 L5 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M13 4 L17 9 L13 14" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  ) : (
+    <svg width="14" height="14" viewBox="0 0 18 18" fill="none" aria-hidden="true">
+      <path d="M4 5 L9 1 L14 5" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M4 13 L9 17 L14 13" stroke="#111" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+
+  const frameStyle: React.CSSProperties = isFill
+    ? { position: "absolute", inset: 0, borderRadius, overflow: "hidden", background: "#222" }
+    : { position: "relative", ...widthStyle, aspectRatio: aspect, borderRadius, overflow: "hidden", background: "#222" };
+
+  const shadowClass = block.shadow ? "shadow-lg" : "";
+
+  return (
+    <div className={shadowClass} style={frameStyle}>
+      {/* Before layer */}
+      <div style={{ position: "absolute", inset: 0 }}>
+        {hasBefore ? (
+          <PreviewMedia type={beforeType} path={block.before_asset_path} alt={block.before_alt || ""} />
+        ) : (
+          <div style={{ position: "absolute", inset: 0, background: "#e7e9ed", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>No before asset</span>
+          </div>
+        )}
+      </div>
+
+      {/* After layer — clipped by position */}
+      <div style={{ position: "absolute", inset: 0, clipPath: afterClip, WebkitClipPath: afterClip }}>
+        {hasAfter ? (
+          <PreviewMedia type={afterType} path={block.after_asset_path} alt={block.after_alt || ""} />
+        ) : (
+          <div style={{ position: "absolute", inset: 0, background: "#d8dbe0", display: "flex", alignItems: "center", justifyContent: "center" }}>
+            <span style={{ fontSize: 11, color: "#8a8f98" }}>No after asset</span>
+          </div>
+        )}
+      </div>
+
+      {/* Divider + knob */}
+      <div style={dividerStyle}>
+        <div style={knobStyle}>{ArrowIcon}</div>
+      </div>
+    </div>
+  );
+}