@morphika/andami 0.1.8 → 0.1.9

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

@@ -0,0 +1,150 @@
+"use client";
+
+/**
+ * CustomSectionSettings — Edit & Detach actions for custom section instances.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { useBuilderStore } from "../../../lib/builder/store";
+import { BUILDER_VIOLET } from "../../../lib/builder/constants";
+import type { CustomSectionInstance, PageSectionV2 } from "../../../lib/sanity/types";
+
+export 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/settings-panel/index.ts

@@ -17,3 +17,9 @@ export { SectionV2AnimationTab } from "./SectionV2AnimationTab";
 export { default as ColumnV2Settings } from "./ColumnV2Settings";
 export { default as ParallaxSlideSettings } from "./ParallaxSlideSettings";
 export { default as ParallaxGroupSettings } from "./ParallaxGroupSettings";
+export { useSettingsPanelSelection } from "./useSettingsPanelSelection";
+export type { SelectedBlockInfo, SelectedParallaxSlideInfo } from "./useSettingsPanelSelection";
+export { AnimationTab, getBlockHoverEffect } from "./AnimationTab";
+export { ColumnV2AnimationTab } from "./ColumnV2AnimationTab";
+export { CardEntranceSection, ENTRANCE_PRESETS, CARD_ENTRANCE_SELECT_CLASS, CARD_ENTRANCE_SLIDER_CLASS } from "./CardEntranceSection";
+export { CustomSectionSettings } from "./CustomSectionSettings";

package/components/builder/settings-panel/useSettingsPanelSelection.ts

@@ -0,0 +1,184 @@
+/**
+ * useSettingsPanelSelection — Custom hook that resolves the current builder
+ * selection into strongly-typed values for SettingsPanel routing.
+ *
+ * Extracted from SettingsPanel.tsx in Session C (refactor split).
+ */
+
+import { useBuilderStore } from "../../../lib/builder/store";
+import { ALL_BLOCK_INFO } from "../../../lib/builder/types";
+import { BLOCK_GRADIENTS, BLOCK_ICON_COMPONENTS } from "../blockStyles";
+import type {
+  ContentBlock,
+  ContentItem,
+  PageSection,
+  PageSectionV2,
+  CustomSectionInstance,
+  ParallaxGroup,
+  ParallaxSlideV2,
+  SectionColumn,
+} from "../../../lib/sanity/types";
+import {
+  isPageSection,
+  isPageSectionV2,
+  isCustomSectionInstance,
+  isParallaxGroup,
+} from "../../../lib/sanity/types";
+
+export interface SelectedBlockInfo {
+  block: ContentBlock;
+  rowKey: string;
+  colKey: string;
+  isSection: boolean;
+}
+
+export interface SelectedParallaxSlideInfo {
+  group: ParallaxGroup;
+  slide: ParallaxSlideV2;
+  virtualSection: PageSectionV2;
+}
+
+export function useSettingsPanelSelection() {
+  const store = useBuilderStore();
+
+  // 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: SelectedParallaxSlideInfo | 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: SelectedBlockInfo | null = (() => {
+    // 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;
+
+  return {
+    selectedItem,
+    selectedSection,
+    selectedSectionV2,
+    selectedCustomSectionInstance,
+    selectedParallaxGroup,
+    selectedParallaxSlide,
+    effectiveSectionV2,
+    selectedColumnV2,
+    selectedBlock,
+    panelTitle,
+    headerStyleKey,
+    headerGradient,
+    HeaderIconComponent,
+    hasSelection,
+    isColumnOnly,
+    isParallaxGroupOnly,
+    isCustomSectionOnly,
+    isPageLevel,
+  };
+}

package/lib/builder/serializer/migrations.ts

@@ -0,0 +1,107 @@
+/**
+ * V1 → V2 migration utilities for content blocks.
+ *
+ * Extracted from serializer.ts in Session 162.
+ */
+
+// ============================================
+// Project Grid v1 → v2 Migration (Session 105)
+// ============================================
+
+/** Map v1 string gap values to pixel numbers */
+export const GAP_V1_MAP: Record<string, number> = {
+  small: 8,
+  medium: 16,
+  large: 32,
+  xlarge: 48,
+};
+
+/**
+ * Detect and migrate a v1 projectGridBlock to v2 format.
+ * v1 is identified by the presence of `grid_layout` (string field).
+ * v2 is identified by the presence of `columns` (number field).
+ * If already v2 or not a projectGridBlock, returns as-is.
+ */
+export function migrateProjectGridV1ToV2(block: Record<string, unknown>): void {
+  if (block._type !== "projectGridBlock") return;
+
+  // Already v2: has `columns` as a number
+  if (typeof block.columns === "number") return;
+
+  // Not v1 either (fresh block without grid_layout) — apply defaults
+  if (!block.grid_layout && typeof block.columns !== "number") {
+    block.columns = 3;
+    block.aspect_ratios = ["16/9"];
+    block.gap_v = 16;
+    block.gap_h = 16;
+    block.hover_effect = block.hover_effect || "scale";
+    block.show_subtitle = block.show_subtitle ?? true;
+    block.border_radius = 0;
+    block.video_mode = "off";
+    return;
+  }
+
+  // ─── v1 → v2 migration ───
+
+  // columns: columns_desktop → columns (clamp 1–6)
+  const colDesktop = typeof block.columns_desktop === "number" ? block.columns_desktop : 2;
+  block.columns = Math.max(1, Math.min(6, colDesktop));
+
+  // gap: string → gap_v + gap_h (both same value)
+  const gapStr = typeof block.gap === "string" ? block.gap : "large";
+  const gapPx = GAP_V1_MAP[gapStr] ?? 32;
+  block.gap_v = gapPx;
+  block.gap_h = gapPx;
+
+  // card_aspect_ratio → aspect_ratios
+  const oldRatio = typeof block.card_aspect_ratio === "string" ? block.card_aspect_ratio : "16/9";
+  if (oldRatio === "random") {
+    block.aspect_ratios = ["16/9", "1/1", "9/16"];
+  } else {
+    block.aspect_ratios = [oldRatio];
+  }
+
+  // hover_effect: "overlay" → "scale", rest 1:1
+  const oldHover = typeof block.hover_effect === "string" ? block.hover_effect : "overlay";
+  if (oldHover === "overlay") {
+    block.hover_effect = "scale";
+  }
+  // "scale" and "none" pass through
+
+  // border_radius: string → number
+  const oldRadius = block.card_border_radius;
+  block.border_radius = typeof oldRadius === "string" ? (parseInt(oldRadius, 10) || 0) : 0;
+
+  // video: video_autoloop + video_hover → video_mode
+  if (block.video_autoloop === true) {
+    block.video_mode = "autoloop";
+  } else if (block.video_hover === true) {
+    block.video_mode = "hover";
+  } else {
+    block.video_mode = "off";
+  }
+
+  // show_subtitle: direct copy (default true)
+  block.show_subtitle = block.show_subtitle ?? true;
+
+  // ─── Clean up v1 fields (not needed in builder state) ───
+  delete block.grid_layout;
+  delete block.gap;
+  delete block.auto_columns;
+  delete block.card_size;
+  delete block.columns_desktop;
+  delete block.card_aspect_ratio;
+  delete block.card_border_radius;
+  delete block.video_hover;
+  delete block.video_autoloop;
+}
+
+/**
+ * Normalize animation fields on a block during read.
+ * Post-migration (Session 122): only new fields exist in Sanity.
+ * This is a no-op now but kept as a hook point for future needs.
+ */
+export function normalizeBlockAnimationFields(_block: Record<string, unknown>): void {
+  // No-op: migration completed in Session 122.
+  // All documents now use enter_animation / hover_effect directly.
+}