@morphika/andami 0.1.8 → 0.1.9

package/components/builder/live-preview/useDragReorder.ts

@@ -0,0 +1,370 @@
+/**
+ * useDragReorder — Custom hook encapsulating all drag-to-reorder logic
+ * for the ProjectGrid masonry preview.
+ *
+ * Manages: drag state machine (grabbed → dragging → swap/cancel),
+ * hold-to-drag timer, global pointer listeners, cancel fly-back animation,
+ * coordinate hit-testing, and project array swap.
+ *
+ * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B4).
+ */
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { MasonryOutput } from "../../../lib/builder/masonry";
+import type { ProjectGridBlock } from "../../../lib/sanity/types";
+import {
+  HOLD_DELAY,
+  MOVE_THRESHOLD_SQ,
+  CANCEL_DURATION,
+  type DragState,
+  hitTestCards,
+} from "./drag-utils";
+
+// ─── Hook Options & Return Types ─────────────────────────────────────
+
+export interface UseDragReorderOptions {
+  block: ProjectGridBlock;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  containerWidth: number;
+  masonry: MasonryOutput;
+}
+
+export interface UseDragReorderResult {
+  dragState: DragState | null;
+  handleDragStart: (
+    key: string,
+    e: React.PointerEvent,
+    cardEl: HTMLDivElement,
+    fromHandle: boolean,
+  ) => void;
+  handleSelect: (key: string) => void;
+  isAnyDragActive: boolean;
+  draggedKey: string | null;
+  hoverTargetKey: string | null;
+  dragPhase: DragState["phase"] | null;
+  draggedItem: NonNullable<ProjectGridBlock["projects"]>[number] | null;
+}
+
+// ─── Hook ────────────────────────────────────────────────────────────
+
+export function useDragReorder({
+  block,
+  containerRef,
+  containerWidth,
+  masonry,
+}: UseDragReorderOptions): UseDragReorderResult {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const _pushSnapshot = useBuilderStore((s) => s._pushSnapshot);
+  const selectProjectCard = useBuilderStore((s) => s.selectProjectCard);
+  const selectedProjectCardKey = useBuilderStore(
+    (s) => s.selectedProjectCardKey,
+  );
+
+  const [dragState, setDragState] = useState<DragState | null>(null);
+
+  // ── Stable refs for event handlers ────────────────────────────
+
+  const blockRef = useRef(block);
+  blockRef.current = block;
+  const updateBlockRef = useRef(updateBlock);
+  updateBlockRef.current = updateBlock;
+  const pushSnapshotRef = useRef(_pushSnapshot);
+  pushSnapshotRef.current = _pushSnapshot;
+  const containerWidthRef = useRef(containerWidth);
+  containerWidthRef.current = containerWidth;
+  const dragStateRef = useRef(dragState);
+  dragStateRef.current = dragState;
+  const masonryRef = useRef(masonry);
+  masonryRef.current = masonry;
+
+  // Timer & cleanup refs
+  const holdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const holdCleanupRef = useRef<(() => void) | null>(null);
+  const cancelTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const cancelRafRef = useRef<number | null>(null);
+  const didDragRef = useRef(false);
+
+  // ── Drag: initiate ────────────────────────────────────────────
+
+  const initiateDrag = useCallback(
+    (
+      key: string,
+      clientX: number,
+      clientY: number,
+      cardEl: HTMLDivElement,
+    ) => {
+      // Clean up any pending hold
+      if (holdCleanupRef.current) {
+        holdCleanupRef.current();
+        holdCleanupRef.current = null;
+      }
+      // Clean up any cancel animation in progress
+      if (cancelTimerRef.current) {
+        clearTimeout(cancelTimerRef.current);
+        cancelTimerRef.current = null;
+      }
+      if (cancelRafRef.current) {
+        cancelAnimationFrame(cancelRafRef.current);
+        cancelRafRef.current = null;
+      }
+
+      const rect = cardEl.getBoundingClientRect();
+      didDragRef.current = true;
+      setDragState({
+        phase: "grabbed",
+        draggedKey: key,
+        hoverTargetKey: null,
+        mouseX: clientX,
+        mouseY: clientY,
+        startMouseX: clientX,
+        startMouseY: clientY,
+        offsetX: clientX - rect.left,
+        offsetY: clientY - rect.top,
+        cardWidth: rect.width,
+        cardHeight: rect.height,
+        origScreenX: rect.left,
+        origScreenY: rect.top,
+      });
+    },
+    [],
+  );
+
+  const handleDragStart = useCallback(
+    (
+      key: string,
+      e: React.PointerEvent,
+      cardEl: HTMLDivElement,
+      fromHandle: boolean,
+    ) => {
+      if (fromHandle) {
+        e.preventDefault();
+        initiateDrag(key, e.clientX, e.clientY, cardEl);
+        return;
+      }
+
+      // Card body → hold-to-drag
+      const cx = e.clientX;
+      const cy = e.clientY;
+      didDragRef.current = false;
+
+      // Clean any previous pending hold
+      if (holdCleanupRef.current) holdCleanupRef.current();
+
+      const cleanup = () => {
+        if (holdTimerRef.current) {
+          clearTimeout(holdTimerRef.current);
+          holdTimerRef.current = null;
+        }
+        window.removeEventListener("pointerup", onEarlyRelease);
+        window.removeEventListener("pointermove", onEarlyMove);
+        holdCleanupRef.current = null;
+      };
+
+      const onEarlyRelease = () => cleanup();
+
+      const onEarlyMove = (ev: PointerEvent) => {
+        // If user moved > 10px before hold time, cancel (not a drag intent)
+        const dx = ev.clientX - cx;
+        const dy = ev.clientY - cy;
+        if (dx * dx + dy * dy > 100) cleanup();
+      };
+
+      holdTimerRef.current = setTimeout(() => {
+        holdTimerRef.current = null;
+        window.removeEventListener("pointerup", onEarlyRelease);
+        window.removeEventListener("pointermove", onEarlyMove);
+        holdCleanupRef.current = null;
+        initiateDrag(key, cx, cy, cardEl);
+      }, HOLD_DELAY);
+
+      window.addEventListener("pointerup", onEarlyRelease);
+      window.addEventListener("pointermove", onEarlyMove);
+      holdCleanupRef.current = cleanup;
+    },
+    [initiateDrag],
+  );
+
+  // ── Drag: click handler (selection) ───────────────────────────
+
+  const handleSelect = useCallback(
+    (key: string) => {
+      // Suppress click that follows a completed drag
+      if (didDragRef.current) {
+        didDragRef.current = false;
+        return;
+      }
+      selectProjectCard(selectedProjectCardKey === key ? null : key);
+    },
+    [selectProjectCard, selectedProjectCardKey],
+  );
+
+  // ── Global pointer handlers during drag ───────────────────────
+
+  const hasDrag = dragState !== null;
+
+  useEffect(() => {
+    if (!hasDrag) return;
+
+    const onMove = (e: PointerEvent) => {
+      setDragState((prev) => {
+        if (!prev || prev.phase === "cancelling") return prev;
+
+        const next: DragState = {
+          ...prev,
+          mouseX: e.clientX,
+          mouseY: e.clientY,
+        };
+
+        // Transition: grabbed → dragging on sufficient movement
+        if (prev.phase === "grabbed") {
+          const dx = e.clientX - prev.startMouseX;
+          const dy = e.clientY - prev.startMouseY;
+          if (dx * dx + dy * dy > MOVE_THRESHOLD_SQ) {
+            next.phase = "dragging";
+          }
+        }
+
+        // Coordinate-based hit-testing for drop targets
+        if (next.phase === "dragging" && containerRef.current) {
+          next.hoverTargetKey = hitTestCards(
+            e.clientX,
+            e.clientY,
+            containerRef.current,
+            containerWidthRef.current,
+            masonryRef.current,
+            prev.draggedKey,
+          );
+        }
+
+        return next;
+      });
+    };
+
+    const onUp = () => {
+      const prev = dragStateRef.current;
+      if (!prev) {
+        setDragState(null);
+        return;
+      }
+
+      // Grabbed with no movement → cancel (no visual action, allow click through)
+      if (prev.phase === "grabbed") {
+        setDragState(null);
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 0);
+        return;
+      }
+
+      // Dragging with a valid drop target → swap
+      if (prev.phase === "dragging" && prev.hoverTargetKey) {
+        const blk = blockRef.current;
+        const arr = [...(blk.projects || [])];
+        const fromIdx = arr.findIndex((p) => p._key === prev.draggedKey);
+        const toIdx = arr.findIndex((p) => p._key === prev.hoverTargetKey);
+        if (fromIdx !== -1 && toIdx !== -1 && fromIdx !== toIdx) {
+          pushSnapshotRef.current();
+          [arr[fromIdx], arr[toIdx]] = [arr[toIdx], arr[fromIdx]];
+          updateBlockRef.current(blk._key, {
+            projects: arr,
+          } as Partial<ProjectGridBlock>);
+        }
+        setDragState(null);
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 0);
+        return;
+      }
+
+      // Dragging with no target → cancel with fly-back animation
+      if (prev.phase === "dragging") {
+        setDragState({ ...prev, phase: "cancelling", hoverTargetKey: null });
+        setTimeout(() => {
+          didDragRef.current = false;
+        }, 0);
+        return;
+      }
+
+      // Fallback: clear
+      setDragState(null);
+    };
+
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+  }, [hasDrag]);
+
+  // ── Cancel animation: fly ghost back to original position ─────
+
+  useEffect(() => {
+    if (dragState?.phase !== "cancelling") return;
+
+    // Double rAF ensures the transition CSS is painted before position change
+    cancelRafRef.current = requestAnimationFrame(() => {
+      cancelRafRef.current = requestAnimationFrame(() => {
+        setDragState((prev) => {
+          if (prev?.phase !== "cancelling") return prev;
+          return {
+            ...prev,
+            mouseX: prev.origScreenX + prev.offsetX,
+            mouseY: prev.origScreenY + prev.offsetY,
+          };
+        });
+        cancelRafRef.current = null;
+      });
+    });
+
+    // Clear state after transition completes
+    cancelTimerRef.current = setTimeout(() => {
+      setDragState(null);
+      cancelTimerRef.current = null;
+    }, CANCEL_DURATION + 50);
+
+    return () => {
+      if (cancelRafRef.current) cancelAnimationFrame(cancelRafRef.current);
+      if (cancelTimerRef.current) {
+        clearTimeout(cancelTimerRef.current);
+        cancelTimerRef.current = null;
+      }
+    };
+  }, [dragState?.phase]);
+
+  // ── Cleanup on unmount ────────────────────────────────────────
+
+  useEffect(
+    () => () => {
+      if (holdTimerRef.current) clearTimeout(holdTimerRef.current);
+      if (holdCleanupRef.current) holdCleanupRef.current();
+      if (cancelTimerRef.current) clearTimeout(cancelTimerRef.current);
+      if (cancelRafRef.current) cancelAnimationFrame(cancelRafRef.current);
+    },
+    [],
+  );
+
+  // ── Derived drag values ───────────────────────────────────────
+
+  const projects = block.projects || [];
+  const draggedKey = dragState?.draggedKey ?? null;
+  const hoverTargetKey =
+    dragState?.phase === "dragging" ? dragState.hoverTargetKey : null;
+  const dragPhase = dragState?.phase ?? null;
+  const isAnyDragActive = dragState !== null;
+  const draggedItem = dragState
+    ? projects.find((p) => p._key === dragState.draggedKey) ?? null
+    : null;
+
+  return {
+    dragState,
+    handleDragStart,
+    handleSelect,
+    isAnyDragActive,
+    draggedKey,
+    hoverTargetKey,
+    dragPhase,
+    draggedItem,
+  };
+}

package/components/builder/settings-panel/AnimationTab.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+/**
+ * AnimationTab — Routes to EnterAnimationPicker / HoverEffectPicker based on selection.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ContentBlock, PageSection, ProjectGridBlock } from "../../../lib/sanity/types";
+import type { HoverEffectConfig } from "../../../lib/animation/hover-effect-types";
+import EnterAnimationPicker from "../editors/EnterAnimationPicker";
+import HoverEffectPicker from "../editors/HoverEffectPicker";
+import {
+  getBlockAnimationValue,
+  hasBlockAnimationOverride,
+  setBlockAnimationOverride,
+} from "./responsive-helpers";
+import { CardEntranceSection } from "./CardEntranceSection";
+
+/** Safely extract hover_effect (new unified type) from any content block.
+ *  ProjectGridBlock has a legacy `hover_effect: "3d" | "scale" | "none"` string field
+ *  that collides — skip it (returns undefined). Other blocks have HoverEffectConfig. */
+export function getBlockHoverEffect(block: ContentBlock): HoverEffectConfig | undefined {
+  // ProjectGridBlock hover_effect is the old per-card string — not HoverEffectConfig
+  if (block._type === "projectGridBlock") return undefined;
+  const val = (block as unknown as Record<string, unknown>).hover_effect;
+  if (val === undefined || val === null) return undefined;
+  if (typeof val === "object") return val as HoverEffectConfig;
+  return undefined;
+}
+
+interface AnimationTabProps {
+  selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
+  selectedSection: PageSection | null;
+}
+
+export function AnimationTab({ selectedBlock, selectedSection }: AnimationTabProps) {
+  const store = useBuilderStore();
+
+  // PageSection (V1): enter animation on the section settings level
+  if (selectedSection) {
+    return (
+      <EnterAnimationPicker
+        mode={{ level: "section", parentConfig: store.pageSettings.enter_animation }}
+        config={selectedSection.settings?.enter_animation}
+        onChange={(cfg) => {
+          store.updateSectionSettings(selectedSection._key, { enter_animation: cfg });
+        }}
+      />
+    );
+  }
+
+  // Block level: type-specific enter picker + card entrance for projectGrid
+  if (selectedBlock) {
+    const isProjectGrid = selectedBlock.block._type === "projectGridBlock";
+    const pgBlock = isProjectGrid ? (selectedBlock.block as ProjectGridBlock) : null;
+    const bvp = store.activeViewport;
+    const isBlockResponsive = bvp !== "desktop";
+
+    const effectiveEnterAnim = getBlockAnimationValue(
+      selectedBlock.block, bvp, "enter_animation", undefined
+    );
+    const effectiveHoverEffect = getBlockAnimationValue(
+      selectedBlock.block, bvp, "hover_effect", undefined
+    ) as HoverEffectConfig | undefined;
+
+    const hasEnterOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation");
+    const hasHoverOverride = hasBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect");
+
+    return (
+      <>
+        {isBlockResponsive && (
+          <div className="px-4 pt-3">
+            <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-[#076bff]/8 border border-[#076bff]/15">
+              <span className="text-[11px] font-medium text-[#076bff]">
+                Editing {bvp === "tablet" ? "Tablet" : "Phone"} overrides
+              </span>
+            </div>
+          </div>
+        )}
+        <div className="relative">
+          {hasEnterOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <EnterAnimationPicker
+            mode={{ level: "block", blockType: selectedBlock.block._type }}
+            config={effectiveEnterAnim}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "enter_animation", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {/* Hover Effect — block-level only, shown if block type has hover presets */}
+        <div className="border-t border-neutral-200 my-1" />
+        <div className="relative">
+          {hasHoverOverride && (
+            <div className="flex items-center justify-between px-4 pt-2">
+              <span className="text-[9px] text-[#076bff] font-medium">overridden</span>
+              <button
+                onClick={() => {
+                  const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", undefined);
+                  store.updateBlock(selectedBlock.block._key, updates);
+                }}
+                className="text-[10px] text-neutral-400 hover:text-[var(--admin-error)] transition-colors"
+              >
+                Reset
+              </button>
+            </div>
+          )}
+          <HoverEffectPicker
+            blockType={selectedBlock.block._type}
+            config={effectiveHoverEffect ?? getBlockHoverEffect(selectedBlock.block)}
+            onChange={(cfg) => {
+              const updates = setBlockAnimationOverride(selectedBlock.block, bvp, "hover_effect", cfg);
+              store.updateBlock(selectedBlock.block._key, updates);
+            }}
+          />
+        </div>
+        {isProjectGrid && pgBlock && (
+          <>
+            <div className="border-t border-neutral-200 my-1" />
+            <CardEntranceSection block={pgBlock} />
+          </>
+        )}
+      </>
+    );
+  }
+
+  // Page-level: generic enter animation (no hover at page level)
+  return (
+    <EnterAnimationPicker
+      mode={{ level: "page" }}
+      config={store.pageSettings.enter_animation}
+      onChange={(cfg) => {
+        store.updatePageSettings({ enter_animation: cfg });
+      }}
+    />
+  );
+}

package/components/builder/settings-panel/CardEntranceSection.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+/**
+ * CardEntranceSection — Toggle + preset/stagger/duration controls for
+ * ProjectGrid card entrance animations.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { ProjectGridBlock, CardEntranceConfig } from "../../../lib/sanity/types";
+
+export const ENTRANCE_PRESETS = [
+  { value: "fade", label: "Fade" },
+  { value: "slide-up", label: "Slide Up" },
+  { value: "scale", label: "Scale" },
+] as const;
+
+export const CARD_ENTRANCE_SELECT_CLASS =
+  "w-full rounded-lg border border-transparent bg-[#f5f5f5] px-2.5 py-[7px] text-xs text-neutral-900 font-normal outline-none transition-all hover:bg-[#efefef] focus:bg-white focus:border-[#076bff] focus:shadow-[0_0_0_3px_rgba(7,107,255,0.06)]";
+
+export const CARD_ENTRANCE_SLIDER_CLASS =
+  "w-full h-1.5 rounded-full bg-[#e5e5e5] appearance-none cursor-pointer accent-[#076bff] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-3.5 [&::-webkit-slider-thumb]:h-3.5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-[#076bff] [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-sm";
+
+export function CardEntranceSection({ block }: { block: ProjectGridBlock }) {
+  const updateBlock = useBuilderStore((s) => s.updateBlock);
+  const entrance = block.card_entrance;
+  const enabled = entrance?.enabled ?? false;
+
+  const update = (updates: Partial<CardEntranceConfig>) => {
+    updateBlock(block._key, {
+      card_entrance: { ...entrance, ...updates },
+    } as Partial<ProjectGridBlock>);
+  };
+
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-center justify-between mb-2.5">
+        <span className="text-xs font-medium text-neutral-700">Card Entrance</span>
+        <button
+          type="button"
+          onClick={() => update({ enabled: !enabled })}
+          className={`relative w-8 h-[18px] rounded-full transition-colors ${
+            enabled ? "bg-[#076bff]" : "bg-neutral-300"
+          }`}
+        >
+          <span
+            className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-transform ${
+              enabled ? "translate-x-[16px]" : "translate-x-[2px]"
+            }`}
+          />
+        </button>
+      </div>
+
+      {enabled && (
+        <div className="space-y-3">
+          {/* Preset — dropdown instead of segmented buttons */}
+          <div>
+            <label className="text-[11px] text-neutral-500 mb-1 block">Preset</label>
+            <select
+              value={entrance?.preset || "slide-up"}
+              onChange={(e) => update({ preset: e.target.value as "fade" | "slide-up" | "scale" })}
+              className={CARD_ENTRANCE_SELECT_CLASS}
+            >
+              {ENTRANCE_PRESETS.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Stagger delay */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Stagger</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">
+                {entrance?.stagger_delay ?? 80}ms
+              </span>
+            </div>
+            <input
+              type="range"
+              min={0}
+              max={5000}
+              step={10}
+              value={entrance?.stagger_delay ?? 80}
+              onChange={(e) => update({ stagger_delay: Number(e.target.value) })}
+              className={CARD_ENTRANCE_SLIDER_CLASS}
+            />
+          </div>
+
+          {/* Duration */}
+          <div>
+            <div className="flex items-center justify-between mb-1">
+              <label className="text-[11px] text-neutral-500">Duration</label>
+              <span className="text-[11px] text-neutral-500 tabular-nums">
+                {entrance?.duration ?? 500}ms
+              </span>
+            </div>
+            <input
+              type="range"
+              min={200}
+              max={5000}
+              step={50}
+              value={entrance?.duration ?? 500}
+              onChange={(e) => update({ duration: Number(e.target.value) })}
+              className={CARD_ENTRANCE_SLIDER_CLASS}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/components/builder/settings-panel/ColumnV2AnimationTab.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+/**
+ * ColumnV2AnimationTab — Enter animation picker for V2 columns,
+ * inheriting from parent section config.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import type { PageSectionV2, SectionColumn } from "../../../lib/sanity/types";
+import EnterAnimationPicker from "../editors/EnterAnimationPicker";
+
+export function ColumnV2AnimationTab({
+  section,
+  column,
+}: {
+  section: PageSectionV2;
+  column: SectionColumn;
+}) {
+  const store = useBuilderStore();
+
+  return (
+    <EnterAnimationPicker
+      mode={{ level: "column", parentConfig: section.settings.enter_animation }}
+      config={column.enter_animation}
+      onChange={(cfg) => {
+        store.updateColumnEnterAnimation(section._key, column._key, cfg);
+      }}
+    />
+  );
+}