@morphika/andami 0.5.0 → 0.5.2

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

@@ -1,291 +1,291 @@
-"use client";
-
-/**
- * ProjectCardWrapper — Renders a single masonry card in 3 visual states:
- * grabbed (darkened + cross-arrow icon), dragging/placeholder (dashed border),
- * and normal (hover/selection/drop-target overlays).
- *
- * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B2).
- */
-
-import { useState, useCallback, useRef } from "react";
-import { ProjectGridCard } from "./shared";
-import { useBuilderStore } from "../../../lib/builder/store";
-import { ADMIN_BLUE, DROP_BLUE, CrossArrowIcon } from "./drag-utils";
-import type { ProjectGridItem } from "../../../lib/sanity/types";
-
-// ─── Props ───────────────────────────────────────────────────────────
-
-export interface CardProps {
-  item: ProjectGridItem;
-  thumbMap: Map<string, string | undefined>;
-  borderRadius: number;
-  cardWidth: number;
-  cardHeight: number;
-  isGrabbed: boolean;
-  isDragging: boolean;
-  isDropTarget: boolean;
-  isSelected: boolean;
-  isAnyDragActive: boolean;
-  onPointerDown: (
-    key: string,
-    e: React.PointerEvent,
-    cardEl: HTMLDivElement,
-    fromHandle: boolean,
-  ) => void;
-  onSelect: (key: string) => void;
-}
-
-// ─── Component ───────────────────────────────────────────────────────
-
-export default function ProjectCardWrapper({
-  item,
-  thumbMap,
-  borderRadius,
-  cardWidth,
-  cardHeight,
-  isGrabbed,
-  isDragging,
-  isDropTarget,
-  isSelected,
-  isAnyDragActive,
-  onPointerDown,
-  onSelect,
-}: CardProps) {
-  const cardRef = useRef<HTMLDivElement>(null);
-  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
-  const [isHovered, setIsHovered] = useState(false);
-
-  // ── Handle pointerdown (drag handle = immediate, card body = hold) ──
-
-  const handleHandleDown = useCallback(
-    (e: React.PointerEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (cardRef.current) onPointerDown(item._key, e, cardRef.current, true);
-    },
-    [item._key, onPointerDown],
-  );
-
-  const handleCardDown = useCallback(
-    (e: React.PointerEvent) => {
-      if (e.button !== 0) return;
-      e.stopPropagation();
-      if (cardRef.current) onPointerDown(item._key, e, cardRef.current, false);
-    },
-    [item._key, onPointerDown],
-  );
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      onSelect(item._key);
-    },
-    [item._key, onSelect],
-  );
-
-  const br = borderRadius > 0 ? borderRadius : undefined;
-  const brStr = borderRadius > 0 ? String(borderRadius) : undefined;
-  const invZoom = Math.min(2, 1 / canvasZoom);
-
-  // ── Grabbed: darkened card + centered cross-arrow icon ──────────
-
-  if (isGrabbed) {
-    return (
-      <div
-        ref={cardRef}
-        style={{
-          position: "relative",
-          width: cardWidth,
-          height: cardHeight,
-          borderRadius: br,
-          overflow: "hidden",
-          outline: `2px solid ${ADMIN_BLUE}`,
-          outlineOffset: -2,
-        }}
-      >
-        <ProjectGridCard
-          slug={item.project_slug}
-          thumbPath={thumbMap.get(item.project_slug)}
-          customThumb={item.custom_thumbnail}
-          borderRadius={brStr}
-          style={{ width: "100%", height: "100%", filter: "brightness(0.65)" }}
-        />
-        {/* Centered drag icon overlay */}
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            pointerEvents: "none",
-          }}
-        >
-          <div
-            style={{
-              width: 40,
-              height: 40,
-              borderRadius: "50%",
-              backgroundColor: "rgba(255,255,255,0.92)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              boxShadow: "0 2px 12px rgba(0,0,0,0.2)",
-              transform: `scale(${invZoom})`,
-            }}
-          >
-            <CrossArrowIcon size={20} color="#333" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // ── Dragging / Cancelling: dashed blue placeholder ─────────────
-
-  if (isDragging) {
-    return (
-      <div
-        ref={cardRef}
-        style={{
-          width: cardWidth,
-          height: cardHeight,
-          borderRadius: br,
-          border: `${Math.max(2, 2 / canvasZoom)}px dashed ${ADMIN_BLUE}`,
-          backgroundColor: "transparent",
-          boxSizing: "border-box",
-        }}
-      />
-    );
-  }
-
-  // ── Normal card ────────────────────────────────────────────────
-
-  // Green drop-target highlight — no extra style on wrapper, overlay rendered below
-  const dropStyle: React.CSSProperties = {};
-
-  // Blue hover border (suppressed when drag is active or card is selected/drop target)
-  const showHover = isHovered && !isSelected && !isDropTarget && !isAnyDragActive;
-  const hoverStyle: React.CSSProperties = showHover
-    ? {
-        outline: `${2 / canvasZoom}px solid ${ADMIN_BLUE}`,
-        outlineOffset: -2 / canvasZoom,
-      }
-    : {};
-
-  // Blue selection border + subtle tint
-  const selectStyle: React.CSSProperties =
-    isSelected && !isDropTarget
-      ? {
-          outline: `2px solid ${ADMIN_BLUE}`,
-          outlineOffset: -2,
-          boxShadow: "inset 0 0 0 9999px rgba(7,107,255,0.04)",
-        }
-      : {};
-
-  return (
-    <div
-      ref={cardRef}
-      style={{
-        position: "relative",
-        width: cardWidth,
-        height: cardHeight,
-        cursor: "pointer",
-        borderRadius: br,
-        overflow: "hidden",
-        ...dropStyle,
-        ...hoverStyle,
-        ...selectStyle,
-        transition: "outline 150ms ease, box-shadow 150ms ease",
-      }}
-      onPointerDown={handleCardDown}
-      onClick={handleClick}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      {/* Drag handle — centered, visible on hover/selection (hidden during drag) */}
-      <div
-        className={`absolute z-10 transition-opacity ${
-          (isHovered || isSelected) && !isAnyDragActive
-            ? "opacity-100"
-            : "opacity-0 pointer-events-none"
-        }`}
-        style={{
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <div
-          onPointerDown={handleHandleDown}
-          onClick={(e) => e.stopPropagation()}
-          style={{
-            width: 48,
-            height: 48,
-            borderRadius: "50%",
-            backgroundColor: "rgba(255,255,255,0.92)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            boxShadow: "0 2px 12px rgba(0,0,0,0.25)",
-            cursor: "grab",
-            transform: `scale(${invZoom})`,
-          }}
-          title="Drag to reorder"
-          aria-label="Drag to reorder project"
-        >
-          <CrossArrowIcon size={22} color="#333" />
-        </div>
-      </div>
-
-      {/* Per-card aspect ratio override badge — bottom-right */}
-      {item.aspect_ratio_override && (
-        <div
-          className="absolute z-10"
-          style={{
-            bottom: 8,
-            right: 8,
-            transform: `scale(${invZoom})`,
-            transformOrigin: "bottom right",
-          }}
-        >
-          <span
-            className="px-1.5 py-0.5 rounded text-[9px] font-medium"
-            style={{
-              backgroundColor: "rgba(0,0,0,0.6)",
-              color: "rgba(255,255,255,0.85)",
-              backdropFilter: "blur(4px)",
-            }}
-          >
-            {item.aspect_ratio_override.replace("/", ":")}
-          </span>
-        </div>
-      )}
-
-      <ProjectGridCard
-        slug={item.project_slug}
-        thumbPath={thumbMap.get(item.project_slug)}
-        customThumb={item.custom_thumbnail}
-        borderRadius={brStr}
-        style={{ width: "100%", height: "100%" }}
-      />
-
-      {/* Green drop-target overlay (covers the image) */}
-      {isDropTarget && (
-        <div
-          style={{
-            position: "absolute",
-            inset: 0,
-            backgroundColor: "rgba(7,107,255,0.30)",
-            borderRadius: br,
-            pointerEvents: "none",
-            zIndex: 5,
-            border: `2px solid ${DROP_BLUE}`,
-          }}
-        />
-      )}
-    </div>
-  );
-}
+"use client";
+
+/**
+ * ProjectCardWrapper — Renders a single masonry card in 3 visual states:
+ * grabbed (darkened + cross-arrow icon), dragging/placeholder (dashed border),
+ * and normal (hover/selection/drop-target overlays).
+ *
+ * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B2).
+ */
+
+import { useState, useCallback, useRef } from "react";
+import { ProjectGridCard } from "./shared";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { ADMIN_BLUE, DROP_BLUE, CrossArrowIcon } from "./drag-utils";
+import type { ProjectGridItem } from "../../../lib/sanity/types";
+
+// ─── Props ───────────────────────────────────────────────────────────
+
+export interface CardProps {
+  item: ProjectGridItem;
+  thumbMap: Map<string, string | undefined>;
+  borderRadius: number;
+  cardWidth: number;
+  cardHeight: number;
+  isGrabbed: boolean;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  isSelected: boolean;
+  isAnyDragActive: boolean;
+  onPointerDown: (
+    key: string,
+    e: React.PointerEvent,
+    cardEl: HTMLDivElement,
+    fromHandle: boolean,
+  ) => void;
+  onSelect: (key: string) => void;
+}
+
+// ─── Component ───────────────────────────────────────────────────────
+
+export default function ProjectCardWrapper({
+  item,
+  thumbMap,
+  borderRadius,
+  cardWidth,
+  cardHeight,
+  isGrabbed,
+  isDragging,
+  isDropTarget,
+  isSelected,
+  isAnyDragActive,
+  onPointerDown,
+  onSelect,
+}: CardProps) {
+  const cardRef = useRef<HTMLDivElement>(null);
+  const canvasZoom = useBuilderStore((s) => s.canvasZoom);
+  const [isHovered, setIsHovered] = useState(false);
+
+  // ── Handle pointerdown (drag handle = immediate, card body = hold) ──
+
+  const handleHandleDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (cardRef.current) onPointerDown(item._key, e, cardRef.current, true);
+    },
+    [item._key, onPointerDown],
+  );
+
+  const handleCardDown = useCallback(
+    (e: React.PointerEvent) => {
+      if (e.button !== 0) return;
+      e.stopPropagation();
+      if (cardRef.current) onPointerDown(item._key, e, cardRef.current, false);
+    },
+    [item._key, onPointerDown],
+  );
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onSelect(item._key);
+    },
+    [item._key, onSelect],
+  );
+
+  const br = borderRadius > 0 ? borderRadius : undefined;
+  const brStr = borderRadius > 0 ? String(borderRadius) : undefined;
+  const invZoom = Math.min(2, 1 / canvasZoom);
+
+  // ── Grabbed: darkened card + centered cross-arrow icon ──────────
+
+  if (isGrabbed) {
+    return (
+      <div
+        ref={cardRef}
+        style={{
+          position: "relative",
+          width: cardWidth,
+          height: cardHeight,
+          borderRadius: br,
+          overflow: "hidden",
+          outline: `2px solid ${ADMIN_BLUE}`,
+          outlineOffset: -2,
+        }}
+      >
+        <ProjectGridCard
+          slug={item.project_slug}
+          thumbPath={thumbMap.get(item.project_slug)}
+          customThumb={item.custom_thumbnail}
+          borderRadius={brStr}
+          style={{ width: "100%", height: "100%", filter: "brightness(0.65)" }}
+        />
+        {/* Centered drag icon overlay */}
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+          }}
+        >
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: "50%",
+              backgroundColor: "rgba(255,255,255,0.92)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: "0 2px 12px rgba(0,0,0,0.2)",
+              transform: `scale(${invZoom})`,
+            }}
+          >
+            <CrossArrowIcon size={20} color="#333" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // ── Dragging / Cancelling: dashed blue placeholder ─────────────
+
+  if (isDragging) {
+    return (
+      <div
+        ref={cardRef}
+        style={{
+          width: cardWidth,
+          height: cardHeight,
+          borderRadius: br,
+          border: `${Math.max(2, 2 / canvasZoom)}px dashed ${ADMIN_BLUE}`,
+          backgroundColor: "transparent",
+          boxSizing: "border-box",
+        }}
+      />
+    );
+  }
+
+  // ── Normal card ────────────────────────────────────────────────
+
+  // Green drop-target highlight — no extra style on wrapper, overlay rendered below
+  const dropStyle: React.CSSProperties = {};
+
+  // Blue hover border (suppressed when drag is active or card is selected/drop target)
+  const showHover = isHovered && !isSelected && !isDropTarget && !isAnyDragActive;
+  const hoverStyle: React.CSSProperties = showHover
+    ? {
+        outline: `${2 / canvasZoom}px solid ${ADMIN_BLUE}`,
+        outlineOffset: -2 / canvasZoom,
+      }
+    : {};
+
+  // Blue selection border + subtle tint
+  const selectStyle: React.CSSProperties =
+    isSelected && !isDropTarget
+      ? {
+          outline: `2px solid ${ADMIN_BLUE}`,
+          outlineOffset: -2,
+          boxShadow: "inset 0 0 0 9999px rgba(53, 128, 249,0.04)",
+        }
+      : {};
+
+  return (
+    <div
+      ref={cardRef}
+      style={{
+        position: "relative",
+        width: cardWidth,
+        height: cardHeight,
+        cursor: "pointer",
+        borderRadius: br,
+        overflow: "hidden",
+        ...dropStyle,
+        ...hoverStyle,
+        ...selectStyle,
+        transition: "outline 150ms ease, box-shadow 150ms ease",
+      }}
+      onPointerDown={handleCardDown}
+      onClick={handleClick}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* Drag handle — centered, visible on hover/selection (hidden during drag) */}
+      <div
+        className={`absolute z-10 transition-opacity ${
+          (isHovered || isSelected) && !isAnyDragActive
+            ? "opacity-100"
+            : "opacity-0 pointer-events-none"
+        }`}
+        style={{
+          inset: 0,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <div
+          onPointerDown={handleHandleDown}
+          onClick={(e) => e.stopPropagation()}
+          style={{
+            width: 48,
+            height: 48,
+            borderRadius: "50%",
+            backgroundColor: "rgba(255,255,255,0.92)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            boxShadow: "0 2px 12px rgba(0,0,0,0.25)",
+            cursor: "grab",
+            transform: `scale(${invZoom})`,
+          }}
+          title="Drag to reorder"
+          aria-label="Drag to reorder project"
+        >
+          <CrossArrowIcon size={22} color="#333" />
+        </div>
+      </div>
+
+      {/* Per-card aspect ratio override badge — bottom-right */}
+      {item.aspect_ratio_override && (
+        <div
+          className="absolute z-10"
+          style={{
+            bottom: 8,
+            right: 8,
+            transform: `scale(${invZoom})`,
+            transformOrigin: "bottom right",
+          }}
+        >
+          <span
+            className="px-1.5 py-0.5 rounded text-[9px] font-medium"
+            style={{
+              backgroundColor: "rgba(0,0,0,0.6)",
+              color: "rgba(255,255,255,0.85)",
+              backdropFilter: "blur(4px)",
+            }}
+          >
+            {item.aspect_ratio_override.replace("/", ":")}
+          </span>
+        </div>
+      )}
+
+      <ProjectGridCard
+        slug={item.project_slug}
+        thumbPath={thumbMap.get(item.project_slug)}
+        customThumb={item.custom_thumbnail}
+        borderRadius={brStr}
+        style={{ width: "100%", height: "100%" }}
+      />
+
+      {/* Green drop-target overlay (covers the image) */}
+      {isDropTarget && (
+        <div
+          style={{
+            position: "absolute",
+            inset: 0,
+            backgroundColor: "rgba(53, 128, 249,0.30)",
+            borderRadius: br,
+            pointerEvents: "none",
+            zIndex: 5,
+            border: `2px solid ${DROP_BLUE}`,
+          }}
+        />
+      )}
+    </div>
+  );
+}