@morphika/andami 0.1.8 → 0.1.10

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

@@ -149,7 +149,7 @@ export default function LiveTextEditor({ block, editable = false }: { block: Tex
     fontFamily: "inherit",
     outline: "none",
     whiteSpace: "pre-wrap",
-    wordBreak: "break-word",
+    wordBreak: "normal",
     minHeight: "1em",
     // Multi-column layout: gap inherits global grid gutter
     ...(cols ? {

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

@@ -0,0 +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_GREEN, 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(34,197,94,0.30)",
+            borderRadius: br,
+            pointerEvents: "none",
+            zIndex: 5,
+            border: `2px solid ${DROP_GREEN}`,
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/components/builder/live-preview/drag-utils.tsx

@@ -0,0 +1,89 @@
+/**
+ * Drag & drop utilities for LiveProjectGridPreview.
+ *
+ * Shared constants, types, and helper functions used by the main component,
+ * ProjectCardWrapper, GhostCard, and useDragReorder hook.
+ *
+ * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B1).
+ */
+
+import { BUILDER_BLUE, BUILDER_GREEN } from "../../../lib/builder/constants";
+import type { MasonryOutput } from "../../../lib/builder/masonry";
+
+// ─── Constants ───────────────────────────────────────────────────────
+
+export const HOLD_DELAY = 150; // ms before card-body drag activates
+export const MOVE_THRESHOLD_SQ = 9; // 3px² — grabbed → dragging
+export const CANCEL_DURATION = 200; // ms — cancel fly-back animation
+export const ADMIN_BLUE = BUILDER_BLUE;
+export const DROP_GREEN = BUILDER_GREEN;
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface DragState {
+  phase: "grabbed" | "dragging" | "cancelling";
+  draggedKey: string;
+  hoverTargetKey: string | null;
+  mouseX: number;
+  mouseY: number;
+  startMouseX: number;
+  startMouseY: number;
+  offsetX: number; // grab offset inside the card (screen px)
+  offsetY: number;
+  cardWidth: number; // screen-space dimensions (includes zoom)
+  cardHeight: number;
+  origScreenX: number; // original card position on screen (for cancel)
+  origScreenY: number;
+}
+
+// ─── Utilities ───────────────────────────────────────────────────────
+
+/** Cross-arrow icon SVG (reused in handle, grabbed overlay, ghost). */
+export function CrossArrowIcon({
+  size = 14,
+  color = "currentColor",
+}: {
+  size?: number;
+  color?: string;
+}) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16" fill={color}>
+      <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>
+  );
+}
+
+/**
+ * Hit-test pointer (screen coords) against masonry items (container coords).
+ * Returns the key of the card under the cursor, or null if in a gap.
+ * Only ONE card can match (masonry cards never overlap).
+ */
+export function hitTestCards(
+  clientX: number,
+  clientY: number,
+  container: HTMLElement,
+  containerWidth: number,
+  masonry: MasonryOutput,
+  excludeKey: string,
+): string | null {
+  const rect = container.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0 || masonry.totalHeight === 0)
+    return null;
+
+  // Convert screen → masonry coordinate space
+  const relX = (clientX - rect.left) * (containerWidth / rect.width);
+  const relY = (clientY - rect.top) * (masonry.totalHeight / rect.height);
+
+  for (const item of masonry.items) {
+    if (item.key === excludeKey) continue;
+    if (
+      relX >= item.x &&
+      relX <= item.x + item.width &&
+      relY >= item.y &&
+      relY <= item.y + item.height
+    ) {
+      return item.key;
+    }
+  }
+  return null;
+}