@morphika/andami 0.1.7 → 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/bot-guard.ts

@@ -0,0 +1,138 @@
+/**
+ * Bot detection & rate-limiting for Edge Middleware.
+ *
+ * Runs on Vercel's Edge Runtime (cheap) to block aggressive crawlers
+ * BEFORE they invoke expensive serverless functions (Fluid Active CPU).
+ *
+ * Strategy:
+ * 1. Block known AI scrapers / aggressive bots by User-Agent
+ * 2. Detect bot-like rapid crawling patterns (many unique paths from same IP)
+ * 3. Return 429 for rate-limited requests
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+
+// ── Known aggressive bot User-Agents ────────────────────────────────────
+// These bots ignore robots.txt or crawl too aggressively for Hobby-tier hosting.
+const BLOCKED_BOT_PATTERNS = [
+  "GPTBot",
+  "CCBot",
+  "anthropic-ai",
+  "ClaudeBot",
+  "Bytespider",
+  "PetalBot",
+  "Sogou",
+  "AhrefsBot",
+  "SemrushBot",
+  "DotBot",
+  "MJ12bot",
+  "BLEXBot",
+  "DataForSeoBot",
+  "serpstatbot",
+  "Amazonbot",
+  "Barkrowler",
+  "YandexBot",
+  "MegaIndex",
+  "Applebot",   // Apple's crawler — not needed for most portfolio sites
+];
+
+// ── Simple in-memory rate limiter for Edge ─────────────────────────────
+// Edge functions are short-lived, so this map resets frequently.
+// It won't catch all abuse but will throttle burst patterns within
+// a single Edge instance lifetime (typically several minutes).
+interface RateEntry {
+  count: number;
+  windowStart: number;
+}
+
+const ipHits = new Map<string, RateEntry>();
+
+// Max public page requests per IP per window (generous for humans, tight for bots)
+const PUBLIC_PAGE_LIMIT = 30;
+const WINDOW_MS = 60_000; // 1 minute
+
+// Garbage-collect stale entries every 100 checks
+let gcCounter = 0;
+
+function isRateLimited(ip: string): boolean {
+  const now = Date.now();
+
+  // Periodic cleanup
+  if (++gcCounter >= 100) {
+    gcCounter = 0;
+    for (const [key, entry] of ipHits) {
+      if (now - entry.windowStart > WINDOW_MS * 2) {
+        ipHits.delete(key);
+      }
+    }
+  }
+
+  const entry = ipHits.get(ip);
+  if (!entry || now - entry.windowStart > WINDOW_MS) {
+    ipHits.set(ip, { count: 1, windowStart: now });
+    return false;
+  }
+
+  entry.count++;
+  return entry.count > PUBLIC_PAGE_LIMIT;
+}
+
+// ── Main guard function ────────────────────────────────────────────────
+
+/**
+ * Call this at the TOP of your middleware, before any other logic.
+ * Returns a Response if the request should be blocked, or null to continue.
+ *
+ * Only applies to public (non-admin) GET requests for pages.
+ */
+export function guardAgainstBots(request: NextRequest): NextResponse | null {
+  const { pathname } = request.nextUrl;
+
+  // Skip admin routes, API routes (except public ones), and static assets
+  if (
+    pathname.startsWith("/admin") ||
+    pathname.startsWith("/api/admin") ||
+    pathname.startsWith("/studio") ||
+    pathname.startsWith("/_next") ||
+    pathname.startsWith("/fonts")
+  ) {
+    return null;
+  }
+
+  // Only guard GET requests (mutations already have their own rate limiter)
+  if (request.method !== "GET") {
+    return null;
+  }
+
+  const ua = request.headers.get("user-agent") || "";
+
+  // 1. Block known aggressive bots
+  const isBlockedBot = BLOCKED_BOT_PATTERNS.some(
+    (pattern) => ua.includes(pattern)
+  );
+
+  if (isBlockedBot) {
+    return new NextResponse("Forbidden", {
+      status: 403,
+      headers: { "X-Robots-Tag": "noindex, nofollow" },
+    });
+  }
+
+  // 2. Rate-limit public page requests per IP
+  const ip =
+    request.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ||
+    request.headers.get("x-real-ip") ||
+    "unknown";
+
+  if (isRateLimited(ip)) {
+    return new NextResponse("Too Many Requests", {
+      status: 429,
+      headers: {
+        "Retry-After": "60",
+        "X-Robots-Tag": "noindex, nofollow",
+      },
+    });
+  }
+
+  return null;
+}

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.
+}