@morphika/andami 0.1.7 → 0.1.9

package/components/builder/SettingsPanel.tsx

@@ -10,36 +10,22 @@
  *   settings-panel/ColumnSettings.tsx — Column width, alignment, gap
  *   settings-panel/BlockSettings.tsx  — Block type editor router
  *   settings-panel/responsive-helpers.ts — Viewport-aware setting resolution
+ *
+ * Session C (refactor split):
+ *   settings-panel/useSettingsPanelSelection.ts — Selection resolution hook
+ *   settings-panel/AnimationTab.tsx             — Block/section/page animation routing
+ *   settings-panel/ColumnV2AnimationTab.tsx     — Column enter animation
+ *   settings-panel/CardEntranceSection.tsx      — ProjectGrid card entrance controls
+ *   settings-panel/CustomSectionSettings.tsx    — Edit/detach for custom section instances
  */
 
-import { useState, useEffect, useRef, useCallback } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useBuilderStore } from "../../lib/builder/store";
-import { ALL_BLOCK_INFO } from "../../lib/builder/types";
-import { BUILDER_VIOLET } from "../../lib/builder/constants";
-import { BLOCK_GRADIENTS, BLOCK_ICON_COMPONENTS } from "./blockStyles";
-import type { ContentBlock, ContentItem, PageSection, PageSectionV2, CustomSectionInstance, ParallaxGroup, ParallaxSlideV2, SectionColumn, ProjectGridBlock, CardEntranceConfig } from "../../lib/sanity/types";
-import { isPageSection, isPageSectionV2, isCustomSectionInstance, isParallaxGroup } 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 "./settings-panel/responsive-helpers";
 
-/** 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. */
-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;
-}
+import { useSettingsPanelSelection } from "./settings-panel/useSettingsPanelSelection";
+import { AnimationTab } from "./settings-panel/AnimationTab";
+import { ColumnV2AnimationTab } from "./settings-panel/ColumnV2AnimationTab";
+import { CustomSectionSettings } from "./settings-panel/CustomSectionSettings";
 import {
   LayoutTab,
   BlockLayoutTab,
@@ -60,125 +46,23 @@ export default function SettingsPanel() {
   const store = useBuilderStore();
   const [activeTab, setActiveTab] = useState<SettingsTab>("settings");
 
-  // Find selected elements — handle page sections, V2 sections, and parallax groups/slides
-  const selectedItem: ContentItem | undefined = store.rows.find((r) => r._key === store.selectedRowKey);
-  const selectedSection: PageSection | null = selectedItem && isPageSection(selectedItem) ? selectedItem : null;
-  const selectedSectionV2: PageSectionV2 | null = selectedItem && isPageSectionV2(selectedItem) ? selectedItem : null;
-  const selectedCustomSectionInstance: CustomSectionInstance | null = selectedItem && isCustomSectionInstance(selectedItem) ? selectedItem as CustomSectionInstance : null;
-
-  // Parallax detection: group selected directly, or slide selected (search inside groups)
-  const selectedParallaxGroup: ParallaxGroup | null = selectedItem && isParallaxGroup(selectedItem) ? selectedItem as ParallaxGroup : null;
-  const selectedParallaxSlide: { group: ParallaxGroup; slide: ParallaxSlideV2; virtualSection: PageSectionV2 } | null = (() => {
-    if (!store.selectedRowKey) return null;
-    for (const item of store.rows) {
-      if (!isParallaxGroup(item)) continue;
-      const group = item as ParallaxGroup;
-      const slide = group.slides.find((s) => s._key === store.selectedRowKey);
-      if (slide) {
-        // Create a virtual PageSectionV2 for the slide so we can delegate to SectionV2Settings etc.
-        const virtualSection: PageSectionV2 = {
-          _type: "pageSectionV2",
-          _key: slide._key,
-          section_type: "empty-v2",
-          columns: slide.columns,
-          settings: slide.section_settings,
-        };
-        return { group, slide, virtualSection };
-      }
-    }
-    return null;
-  })();
-
-  // V2 column: when a V2 section (or parallax slide) is selected and a column key is set
-  const effectiveSectionV2 = selectedSectionV2 || selectedParallaxSlide?.virtualSection || null;
-  const selectedColumnV2: SectionColumn | null = effectiveSectionV2 && store.selectedColumnKey
-    ? effectiveSectionV2.columns.find((c) => c._key === store.selectedColumnKey) || null
-    : null;
-
-  // For PageSections, the "block" is section.block[0] — selected automatically
-  const selectedBlock = (() => {
-    // If a PageSection is selected, its block is the section block
-    if (selectedSection) {
-      const block = selectedSection.block[0];
-      if (block) return { block, rowKey: selectedSection._key, colKey: "", isSection: true };
-      return null;
-    }
-    // Regular block search inside rows, V2 sections, and parallax slides
-    if (!store.selectedBlockKey) return null;
-    for (const item of store.rows) {
-      // V2 sections: search inside columns
-      if (isPageSectionV2(item)) {
-        for (const col of (item as PageSectionV2).columns || []) {
-          const block = (col.blocks || []).find(
-            (b) => b._key === store.selectedBlockKey
-          );
-          if (block) return { block, rowKey: item._key, colKey: col._key, isSection: false };
-        }
-      }
-      // Parallax groups: search inside slide columns
-      if (isParallaxGroup(item)) {
-        const group = item as ParallaxGroup;
-        for (const slide of group.slides) {
-          for (const col of slide.columns || []) {
-            const block = (col.blocks || []).find(
-              (b) => b._key === store.selectedBlockKey
-            );
-            if (block) return { block, rowKey: slide._key, colKey: col._key, isSection: false };
-          }
-        }
-      }
-    }
-    return null;
-  })();
-
-  // Derive the panel title + icon from what's selected
-  const blockInfo = selectedBlock
-    ? ALL_BLOCK_INFO.find((b) => b.type === selectedBlock.block._type)
-    : null;
-
-  // BUG-V2-003 fix: Block selection takes priority over V2 column/section
-  const panelTitle = selectedBlock
-    ? blockInfo?.label || selectedBlock.block._type
-    : selectedColumnV2
-    ? "Column"
-    : selectedParallaxSlide
-    ? `Slide ${selectedParallaxSlide.group.slides.findIndex((s) => s._key === selectedParallaxSlide.slide._key) + 1}`
-    : selectedParallaxGroup
-    ? "Parallax Showcase"
-    : selectedCustomSectionInstance
-    ? (selectedCustomSectionInstance.custom_section_title || "Saved Section")
-    : selectedSectionV2
-    ? "Section"
-    : selectedSection
-    ? (selectedSection.section_type === "projectGrid" ? "Project Grid" : "Parallax Section")
-    : "Page";
-
-  // Resolve gradient + icon component for the header
-  const headerStyleKey = selectedBlock
-    ? selectedBlock.block._type
-    : selectedColumnV2
-    ? "column"
-    : (selectedParallaxSlide || selectedParallaxGroup)
-    ? "parallaxGroup"
-    : selectedCustomSectionInstance
-    ? "customSectionInstance"
-    : selectedSectionV2
-    ? "row"
-    : selectedSection
-    ? (selectedSection.block[0]?._type || "row")
-    : "page";
-  const headerGradient = BLOCK_GRADIENTS[headerStyleKey] || BLOCK_GRADIENTS.page;
-  const HeaderIconComponent = BLOCK_ICON_COMPONENTS[headerStyleKey];
-
-  const hasSelection = !!(store.selectedRowKey || store.selectedColumnKey || store.selectedBlockKey);
-  // V2 columns: show Settings + Animation tabs (not Layout) — but NOT when a block inside the column is selected
-  const isColumnOnly = !!(selectedColumnV2 && !selectedBlock);
-  // Parallax group header: show Settings + Animation (no Layout)
-  const isParallaxGroupOnly = !!(selectedParallaxGroup && !selectedParallaxSlide && !selectedBlock);
-  // Custom section instance: show all 3 tabs (Settings with Edit/Detach, Layout, Animation)
-  const isCustomSectionOnly = !!(selectedCustomSectionInstance && !selectedBlock);
-  // Page level: nothing selected — show Settings + SEO + Animation (no Layout)
-  const isPageLevel = !hasSelection;
+  const sel = useSettingsPanelSelection();
+  const {
+    selectedSection,
+    selectedSectionV2,
+    selectedCustomSectionInstance,
+    selectedParallaxGroup,
+    selectedParallaxSlide,
+    effectiveSectionV2,
+    selectedColumnV2,
+    selectedBlock,
+    panelTitle,
+    headerGradient,
+    HeaderIconComponent,
+    isColumnOnly,
+    isParallaxGroupOnly,
+    isPageLevel,
+  } = sel;
 
   // Reset to "settings" tab when selection changes
   const selectionKey = `${store.selectedRowKey}-${store.selectedColumnKey}-${store.selectedBlockKey}`;
@@ -510,402 +394,4 @@ export default function SettingsPanel() {
   );
 }
 
-// ============================================
-// Animation Tab — extracted inline for clarity
-// ============================================
-
-function AnimationTab({
-  selectedBlock,
-  selectedSection,
-}: {
-  selectedBlock: { block: ContentBlock; rowKey: string; colKey: string; isSection: boolean } | null;
-  selectedSection: PageSection | null;
-}) {
-  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 });
-      }}
-    />
-  );
-}
-
-// ============================================
-// Column V2 Animation Tab — enter animation with inherit from section
-// ============================================
-
-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);
-      }}
-    />
-  );
-}
-
-// ============================================
-// Card Entrance Section — for ProjectGridBlock Animation tab
-// ============================================
-
-const ENTRANCE_PRESETS = [
-  { value: "fade", label: "Fade" },
-  { value: "slide-up", label: "Slide Up" },
-  { value: "scale", label: "Scale" },
-] as const;
-
-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)]";
-
-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";
-
-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>
-  );
-}
-
-// ============================================
-// Custom Section Instance Settings — Edit & Detach actions
-// ============================================
-
-function CustomSectionSettings({ instance }: { instance: CustomSectionInstance }) {
-  const store = useBuilderStore();
-  const [showDetachConfirm, setShowDetachConfirm] = useState(false);
-  const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
-  const [loadingEdit, setLoadingEdit] = useState(false);
-
-  // Fetch section data for detach
-  useEffect(() => {
-    let cancelled = false;
-    fetch(`/api/custom-sections/${instance.custom_section_id}`)
-      .then((res) => res.ok ? res.json() : null)
-      .then((data) => {
-        if (!cancelled && data?.section) setSectionData(data.section);
-      })
-      .catch(() => {});
-    return () => { cancelled = true; };
-  }, [instance.custom_section_id]);
-
-  const handleEdit = useCallback(async () => {
-    setLoadingEdit(true);
-    try {
-      const res = await fetch(`/api/admin/custom-sections/${instance.custom_section_slug}`);
-      if (!res.ok) throw new Error("Failed to load section");
-      const data = await res.json();
-
-      const remoteTitle = data.section.title;
-      if (remoteTitle && remoteTitle !== instance.custom_section_title) {
-        store.updateCustomSectionInstanceTitle(instance._key, remoteTitle);
-      }
-
-      store.enterSectionEditor(
-        instance.custom_section_slug,
-        remoteTitle,
-        data.section.section
-      );
-    } catch {
-      if (sectionData) {
-        store.enterSectionEditor(
-          instance.custom_section_slug,
-          instance.custom_section_title,
-          sectionData
-        );
-      }
-    } finally {
-      setLoadingEdit(false);
-    }
-  }, [instance, sectionData, store]);
-
-  const handleDetach = useCallback(() => {
-    if (!sectionData) return;
-    store.detachCustomSectionInstance(instance._key, sectionData);
-    setShowDetachConfirm(false);
-  }, [instance._key, sectionData, store]);
-
-  return (
-    <div className="px-4 py-3 space-y-3">
-      {/* Linked badge */}
-      <div className="flex items-center gap-2 px-3 py-2 rounded-lg bg-[#f3f0ff] border border-[#8b5cf6]/20">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" strokeWidth="2" strokeLinecap="round" className="shrink-0">
-          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-        </svg>
-        <span className="text-[11px] text-[#8b5cf6] font-medium truncate">
-          Linked Section
-        </span>
-      </div>
-
-      {/* Edit button */}
-      <button
-        onClick={handleEdit}
-        disabled={loadingEdit}
-        className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium text-white transition-colors disabled:opacity-50"
-        style={{ backgroundColor: BUILDER_VIOLET }}
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-          <path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
-          <path d="m15 5 4 4" />
-        </svg>
-        {loadingEdit ? "Loading..." : "Edit Section"}
-      </button>
-      <p className="text-[10px] text-neutral-400 -mt-1">
-        Changes apply to all pages using this section.
-      </p>
-
-      {/* Detach button */}
-      <button
-        onClick={() => setShowDetachConfirm(true)}
-        disabled={!sectionData}
-        className="w-full flex items-center justify-center gap-2 px-3 py-2.5 rounded-lg text-xs font-medium text-neutral-600 bg-[#f5f5f5] hover:bg-[#ebebeb] transition-colors disabled:opacity-30"
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-          <path d="M18.84 12.25l1.72-1.71a5 5 0 0 0-7.07-7.07l-3 3a5 5 0 0 0 .54 7.54" />
-          <path d="M5.16 11.75l-1.72 1.71a5 5 0 0 0 7.07 7.07l3-3a5 5 0 0 0-.54-7.54" />
-          <line x1="2" y1="2" x2="22" y2="22" />
-        </svg>
-        Detach
-      </button>
-      <p className="text-[10px] text-neutral-400 -mt-1">
-        Convert to an independent inline section on this page.
-      </p>
-
-      {/* Detach confirmation dialog */}
-      {showDetachConfirm && (
-        <div
-          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60"
-          onClick={(e) => { e.stopPropagation(); setShowDetachConfirm(false); }}
-        >
-          <div
-            className="bg-white rounded-lg border border-[#e5e5e5] p-6 max-w-sm shadow-xl"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h3 className="text-neutral-900 text-sm font-medium mb-2">Detach section?</h3>
-            <p className="text-neutral-500 text-xs mb-4">
-              This will create an independent copy of &ldquo;{instance.custom_section_title}&rdquo;.
-              Future changes to the saved section won&apos;t affect this page.
-            </p>
-            <div className="flex justify-end gap-2">
-              <button
-                onClick={() => setShowDetachConfirm(false)}
-                className="px-3 py-1.5 text-sm text-neutral-500 hover:text-neutral-900 rounded border border-[#e5e5e5] hover:border-[#ccc] transition-colors"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={handleDetach}
-                className="px-3 py-1.5 text-sm text-white rounded font-medium transition-colors"
-                style={{ backgroundColor: BUILDER_VIOLET }}
-              >
-                Detach
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
 

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

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * GhostCard — Floating card that follows the cursor during drag.
+ * Portaled to document.body by the parent to escape canvas CSS transforms.
+ *
+ * Session 162: Extracted from LiveProjectGridPreview.tsx (Phase B3).
+ */
+
+import { ProjectGridCard } from "./shared";
+import { ADMIN_BLUE, CANCEL_DURATION, CrossArrowIcon, type DragState } from "./drag-utils";
+import type { ProjectGridItem } from "../../../lib/sanity/types";
+
+export default function GhostCard({
+  item,
+  thumbMap,
+  borderRadius,
+  dragState,
+}: {
+  item: ProjectGridItem;
+  thumbMap: Map<string, string | undefined>;
+  borderRadius: number;
+  dragState: DragState;
+}) {
+  const isCancelling = dragState.phase === "cancelling";
+  return (
+    <div
+      style={{
+        position: "fixed",
+        left: dragState.mouseX - dragState.offsetX,
+        top: dragState.mouseY - dragState.offsetY,
+        width: dragState.cardWidth,
+        height: dragState.cardHeight,
+        zIndex: 9999,
+        pointerEvents: "none",
+        borderRadius: borderRadius > 0 ? borderRadius : 8,
+        overflow: "hidden",
+        transform: isCancelling ? "scale(1)" : "scale(1.03)",
+        outline: `2px solid ${ADMIN_BLUE}`,
+        outlineOffset: -2,
+        boxShadow: isCancelling
+          ? "0 4px 16px rgba(0,0,0,0.15)"
+          : "0 16px 48px rgba(0,0,0,0.3)",
+        transition: isCancelling
+          ? `left ${CANCEL_DURATION}ms ease, top ${CANCEL_DURATION}ms ease, transform ${CANCEL_DURATION}ms ease, box-shadow ${CANCEL_DURATION}ms ease`
+          : undefined,
+      }}
+    >
+      <ProjectGridCard
+        slug={item.project_slug}
+        thumbPath={thumbMap.get(item.project_slug)}
+        customThumb={item.custom_thumbnail}
+        borderRadius={borderRadius > 0 ? String(borderRadius) : undefined}
+        style={{ width: "100%", height: "100%" }}
+      />
+      {/* Centered cross-arrow icon */}
+      <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)",
+          }}
+        >
+          <CrossArrowIcon size={20} color="#333" />
+        </div>
+      </div>
+    </div>
+  );
+}