@morphika/andami 0.2.9 → 0.2.11

package/components/builder/CustomSectionInstanceCard.tsx

@@ -30,17 +30,21 @@ export default function CustomSectionInstanceCard({
   onSectionDataLoaded,
 }: CustomSectionInstanceCardProps) {
   const cacheSettings = useBuilderStore((s) => s.cacheCustomSectionSettings);
+  const refetchTick = useBuilderStore((s) => s._customSectionRefetchTick);
   const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // Fetch the section data for preview
+  // Fetch the section data for preview.
+  // Re-runs when refetchTick changes (after saving a custom section in the editor).
   useEffect(() => {
     let cancelled = false;
     setLoading(true);
     setError(null);
 
-    fetch(`/api/custom-sections/${instance.custom_section_id}`)
+    // Cache-bust: append tick to bypass browser/CDN cached responses after save
+    const bustParam = refetchTick > 0 ? `?_t=${refetchTick}` : "";
+    fetch(`/api/custom-sections/${instance.custom_section_id}${bustParam}`)
       .then((res) => {
         if (!res.ok) throw new Error("Section not found");
         return res.json();
@@ -64,7 +68,7 @@ export default function CustomSectionInstanceCard({
 
     return () => { cancelled = true; };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [instance.custom_section_id]);
+  }, [instance.custom_section_id, refetchTick]);
 
   return (
     <div className="relative">

package/components/builder/ReadOnlyFrame.tsx

@@ -284,11 +284,13 @@ const ReadOnlyCustomSection = memo(function ReadOnlyCustomSection({
   viewport,
 }: ReadOnlyCustomSectionProps) {
   const cacheSettings = useBuilderStore((s) => s.cacheCustomSectionSettings);
+  const refetchTick = useBuilderStore((s) => s._customSectionRefetchTick);
   const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
 
   useEffect(() => {
     let cancelled = false;
-    fetch(`/api/custom-sections/${instance.custom_section_id}`)
+    const bustParam = refetchTick > 0 ? `?_t=${refetchTick}` : "";
+    fetch(`/api/custom-sections/${instance.custom_section_id}${bustParam}`)
       .then((res) => (res.ok ? res.json() : null))
       .then((data) => {
         if (!cancelled && data?.section) {
@@ -302,7 +304,7 @@ const ReadOnlyCustomSection = memo(function ReadOnlyCustomSection({
       .catch(() => {});
     return () => { cancelled = true; };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [instance.custom_section_id]);
+  }, [instance.custom_section_id, refetchTick]);
 
   if (!sectionData) {
     return (

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

@@ -13,21 +13,23 @@ import type { CustomSectionInstance, PageSectionV2 } from "../../../lib/sanity/t
 
 export function CustomSectionSettings({ instance }: { instance: CustomSectionInstance }) {
   const store = useBuilderStore();
+  const refetchTick = useBuilderStore((s) => s._customSectionRefetchTick);
   const [showDetachConfirm, setShowDetachConfirm] = useState(false);
   const [sectionData, setSectionData] = useState<PageSectionV2 | null>(null);
   const [loadingEdit, setLoadingEdit] = useState(false);
 
-  // Fetch section data for detach
+  // Fetch section data for detach — re-runs after custom section saves
   useEffect(() => {
     let cancelled = false;
-    fetch(`/api/custom-sections/${instance.custom_section_id}`)
+    const bustParam = refetchTick > 0 ? `?_t=${refetchTick}` : "";
+    fetch(`/api/custom-sections/${instance.custom_section_id}${bustParam}`)
       .then((res) => res.ok ? res.json() : null)
       .then((data) => {
         if (!cancelled && data?.section) setSectionData(data.section);
       })
       .catch(() => {});
     return () => { cancelled = true; };
-  }, [instance.custom_section_id]);
+  }, [instance.custom_section_id, refetchTick]);
 
   const handleEdit = useCallback(async () => {
     setLoadingEdit(true);

package/lib/backup/export.ts

@@ -0,0 +1,377 @@
+/**
+ * Backup Export — core logic.
+ *
+ * Fetches all Sanity documents and R2 assets, then streams them
+ * into a ZIP archive. Uses `archiver` for streaming ZIP creation
+ * and the AWS S3 SDK for R2 file downloads.
+ *
+ * The ZIP is streamed directly to the HTTP response — no temp files
+ * or full-memory buffering required.
+ */
+
+import archiver from "archiver";
+import { Readable } from "node:stream";
+import { adminClient } from "../sanity/client";
+import { logger } from "../logger";
+import { ANDAMI_VERSION } from "../version";
+import { createManifest } from "./manifest";
+import {
+  getR2Config,
+  createS3Client,
+  listAllR2Files,
+  downloadR2File,
+  type R2FileEntry,
+} from "./r2-helpers";
+
+// ============================================
+// Types (V2 client-side export)
+// ============================================
+
+/** Shape returned by prepareExportData() for the V2 client-side export. */
+export interface ExportData {
+  manifest: import("./manifest").BackupManifest;
+  documents: {
+    pages: Record<string, unknown>[];
+    siteSettings: Record<string, unknown> | null;
+    siteStyles: Record<string, unknown> | null;
+    assetRegistry: Record<string, unknown> | null;
+    customSections: Record<string, unknown>[];
+  };
+  assets: {
+    r2_connected: boolean;
+    public_url: string | null;
+    files: { key: string; size: number }[];
+  };
+}
+
+// ============================================
+// Sanity document export
+// ============================================
+
+/**
+ * Fetch ALL Sanity documents needed for a complete backup.
+ *
+ * IMPORTANT: queries MUST NOT dereference Sanity references (i.e. no `->`).
+ * Using `project_ref->` or `internal_page->` in a GROQ projection would
+ * replace the raw `{ _ref, _type: "reference" }` objects with expanded
+ * document snapshots — breaking referential integrity on restore.
+ *
+ * By using the bare spread (`...` / no projection), Sanity returns every
+ * field as-is, including nested references, system fields (_id, _type,
+ * _createdAt, etc.) and any fields added in future framework versions.
+ */
+export async function fetchAllDocuments() {
+  // Fetch all document types in parallel
+  const [pages, siteSettings, siteStyles, assetRegistry, customSections] =
+    await Promise.all([
+      // Pages — full documents with all nested content. No projection → all
+      // references remain in their raw `{ _ref, _type: "reference" }` form.
+      adminClient.fetch(`*[_type == "page"] | order(title asc)`),
+
+      // Site settings — single document (nav_items keep raw internal_page refs)
+      adminClient.fetch(`*[_id == "siteSettings"][0]`),
+
+      // Site styles — single document
+      adminClient.fetch(`*[_type == "siteStyles"][0]`),
+
+      // Asset registry — single document (strip R2 credentials!)
+      adminClient.fetch(`*[_type == "assetRegistry"][0] {
+        _id, _type, _createdAt, _updatedAt, _rev,
+        storage_provider,
+        r2_bucket_url,
+        r2_bucket_name,
+        r2_connected_at,
+        assets,
+        relink_log
+      }`),
+
+      // Custom sections — all documents, full data (no dereferencing)
+      adminClient.fetch(`*[_type == "customSection"] | order(title asc)`),
+    ]);
+
+  return {
+    pages: pages ?? [],
+    siteSettings: siteSettings ?? null,
+    siteStyles: siteStyles ?? null,
+    assetRegistry: assetRegistry ?? null,
+    customSections: customSections ?? [],
+  };
+}
+
+// ============================================
+// ZIP stream creation
+// ============================================
+
+/**
+ * Create a streaming ZIP backup of the entire site.
+ *
+ * Returns a Node.js Readable stream that can be piped to the HTTP
+ * response. The ZIP contains:
+ *   - manifest.json (metadata)
+ *   - sanity/pages.json
+ *   - sanity/settings.json
+ *   - sanity/styles.json
+ *   - sanity/asset-registry.json
+ *   - sanity/custom-sections.json
+ *   - assets/... (all R2 files, preserving folder structure)
+ */
+export async function createBackupStream(): Promise<{
+  stream: Readable;
+  filename: string;
+}> {
+  const archive = archiver("zip", {
+    zlib: { level: 5 }, // Balanced compression (0=none, 9=max)
+  });
+
+  // Error handling — log and destroy
+  archive.on("error", (err) => {
+    logger.error("[Backup:Export]", "Archive error", err);
+    archive.destroy();
+  });
+
+  archive.on("warning", (warn) => {
+    logger.warn("[Backup:Export]", "Archive warning", warn);
+  });
+
+  // Phase 1: Fetch all Sanity documents
+  logger.info("[Backup:Export]", "Fetching Sanity documents...");
+  const docs = await fetchAllDocuments();
+
+  // Phase 2: Resolve R2 config and list assets
+  let r2Files: R2FileEntry[] = [];
+  let r2Connected = false;
+  let totalAssetSize = 0;
+
+  const r2Config = await getR2Config();
+  if (r2Config) {
+    r2Connected = true;
+    try {
+      const s3 = createS3Client(r2Config);
+      r2Files = await listAllR2Files(s3, r2Config.bucketName);
+      totalAssetSize = r2Files.reduce((sum, f) => sum + f.size, 0);
+      logger.info(
+        "[Backup:Export]",
+        `Found ${r2Files.length} assets (${(totalAssetSize / 1024 / 1024).toFixed(1)} MB)`
+      );
+    } catch (err) {
+      logger.error("[Backup:Export]", "Failed to list R2 files", err);
+      // Continue without assets — Sanity data backup is still valuable
+    }
+  } else {
+    logger.info("[Backup:Export]", "R2 not connected — skipping asset backup");
+  }
+
+  // Phase 3: Build manifest
+  const manifest = createManifest({
+    frameworkVersion: ANDAMI_VERSION,
+    pages: docs.pages.length,
+    siteSettings: docs.siteSettings ? 1 : 0,
+    siteStyles: docs.siteStyles ? 1 : 0,
+    assetRegistry: docs.assetRegistry ? 1 : 0,
+    customSections: docs.customSections.length,
+    assetCount: r2Files.length,
+    assetSizeBytes: totalAssetSize,
+    r2Connected,
+  });
+
+  // Phase 4: Write Sanity data to archive
+  archive.append(JSON.stringify(manifest, null, 2), {
+    name: "manifest.json",
+  });
+
+  archive.append(JSON.stringify(docs.pages, null, 2), {
+    name: "sanity/pages.json",
+  });
+
+  if (docs.siteSettings) {
+    archive.append(JSON.stringify(docs.siteSettings, null, 2), {
+      name: "sanity/settings.json",
+    });
+  }
+
+  if (docs.siteStyles) {
+    archive.append(JSON.stringify(docs.siteStyles, null, 2), {
+      name: "sanity/styles.json",
+    });
+  }
+
+  if (docs.assetRegistry) {
+    archive.append(JSON.stringify(docs.assetRegistry, null, 2), {
+      name: "sanity/asset-registry.json",
+    });
+  }
+
+  if (docs.customSections.length > 0) {
+    archive.append(JSON.stringify(docs.customSections, null, 2), {
+      name: "sanity/custom-sections.json",
+    });
+  }
+
+  // Phase 5: Stream R2 assets into archive
+  // Assets are streamed one at a time to avoid memory pressure.
+  // Each file is downloaded from R2 and piped directly into the ZIP.
+  if (r2Config && r2Files.length > 0) {
+    const s3 = createS3Client(r2Config);
+
+    for (let i = 0; i < r2Files.length; i++) {
+      const file = r2Files[i];
+      try {
+        const bodyStream = await downloadR2File(
+          s3,
+          r2Config.bucketName,
+          file.key
+        );
+
+        if (bodyStream) {
+          // Convert Web ReadableStream to Node.js Readable for archiver
+          const nodeStream = Readable.fromWeb(bodyStream as import("node:stream/web").ReadableStream);
+          archive.append(nodeStream, { name: `assets/${file.key}` });
+        } else {
+          logger.warn(
+            "[Backup:Export]",
+            `Skipping empty file: ${file.key}`
+          );
+        }
+      } catch (err) {
+        logger.error(
+          "[Backup:Export]",
+          `Failed to add asset ${file.key}, skipping`,
+          err
+        );
+        // Continue with remaining assets — partial backup is better than none
+      }
+    }
+  }
+
+  // Finalize
+  // archive.finalize() signals the end of the ZIP. The stream will
+  // emit "end" once all data has been flushed.
+  archive.finalize();
+
+  // Build filename with date
+  const date = new Date().toISOString().split("T")[0]; // YYYY-MM-DD
+  const filename = `andami-backup-${date}.zip`;
+
+  return { stream: archive, filename };
+}
+
+// ============================================
+// V2: Client-side export data preparation
+// ============================================
+
+/**
+ * Prepare all data needed for a client-side backup export.
+ *
+ * Returns a JSON-serializable object containing:
+ *   - manifest: backup metadata
+ *   - documents: all Sanity documents (R2 credentials stripped)
+ *   - assets: R2 connection info + flat file list (browser downloads directly)
+ *
+ * The browser uses this to build the ZIP locally — no binary data flows
+ * through Vercel. Typically completes in <2 seconds.
+ */
+export async function prepareExportData(): Promise<ExportData> {
+  // Fetch all Sanity documents
+  logger.info("[Backup:PrepareExport]", "Fetching Sanity documents...");
+  const docs = await fetchAllDocuments();
+
+  // Resolve R2 config and list assets
+  let r2Files: R2FileEntry[] = [];
+  let r2Connected = false;
+  let totalAssetSize = 0;
+  let publicUrl: string | null = null;
+
+  const r2Config = await getR2Config();
+  if (r2Config) {
+    r2Connected = true;
+    publicUrl = r2Config.bucketUrl || null;
+    try {
+      const s3 = createS3Client(r2Config);
+      r2Files = await listAllR2Files(s3, r2Config.bucketName);
+      totalAssetSize = r2Files.reduce((sum, f) => sum + f.size, 0);
+      logger.info(
+        "[Backup:PrepareExport]",
+        `Found ${r2Files.length} assets (${(totalAssetSize / 1024 / 1024).toFixed(1)} MB)`
+      );
+    } catch (err) {
+      logger.error("[Backup:PrepareExport]", "Failed to list R2 files", err);
+      // Continue without asset list — Sanity data is still returned
+    }
+  } else {
+    logger.info("[Backup:PrepareExport]", "R2 not connected — skipping asset listing");
+  }
+
+  // Build manifest
+  const manifest = createManifest({
+    frameworkVersion: ANDAMI_VERSION,
+    pages: docs.pages.length,
+    siteSettings: docs.siteSettings ? 1 : 0,
+    siteStyles: docs.siteStyles ? 1 : 0,
+    assetRegistry: docs.assetRegistry ? 1 : 0,
+    customSections: docs.customSections.length,
+    assetCount: r2Files.length,
+    assetSizeBytes: totalAssetSize,
+    r2Connected,
+  });
+
+  return {
+    manifest,
+    documents: docs,
+    assets: {
+      r2_connected: r2Connected,
+      public_url: publicUrl,
+      files: r2Files.map((f) => ({ key: f.key, size: f.size })),
+    },
+  };
+}
+
+// ============================================
+// Status check (for the admin UI)
+// ============================================
+
+/**
+ * Gather backup readiness info without creating a backup.
+ * Used by the status endpoint and the backup page UI.
+ */
+export async function getBackupStatus() {
+  // Fetch document counts
+  const [pageCount, customSectionCount, settingsExists, stylesExists, registryExists] =
+    await Promise.all([
+      adminClient.fetch(`count(*[_type == "page"])`),
+      adminClient.fetch(`count(*[_type == "customSection"])`),
+      adminClient.fetch(`defined(*[_id == "siteSettings"][0]._id)`),
+      adminClient.fetch(`defined(*[_type == "siteStyles"][0]._id)`),
+      adminClient.fetch(`defined(*[_type == "assetRegistry"][0]._id)`),
+    ]);
+
+  // Check R2 status
+  let r2Connected = false;
+  let assetCount = 0;
+  let assetSizeBytes = 0;
+
+  const r2Config = await getR2Config();
+  if (r2Config) {
+    r2Connected = true;
+    try {
+      const s3 = createS3Client(r2Config);
+      const files = await listAllR2Files(s3, r2Config.bucketName);
+      assetCount = files.length;
+      assetSizeBytes = files.reduce((sum, f) => sum + f.size, 0);
+    } catch {
+      // R2 connected but listing failed — report as connected with 0 assets
+    }
+  }
+
+  return {
+    r2_connected: r2Connected,
+    asset_count: assetCount,
+    asset_size_bytes: assetSizeBytes,
+    document_counts: {
+      pages: pageCount ?? 0,
+      custom_sections: customSectionCount ?? 0,
+      site_settings: settingsExists ?? false,
+      site_styles: stylesExists ?? false,
+      asset_registry: registryExists ?? false,
+    },
+  };
+}

package/lib/backup/manifest.ts

@@ -0,0 +1,121 @@
+/**
+ * Backup Manifest — shared types and validation.
+ *
+ * The manifest is the first file in the backup ZIP and describes
+ * its contents: framework version, creation date, document counts,
+ * and asset inventory.
+ */
+
+// ============================================
+// Types
+// ============================================
+
+export interface BackupManifest {
+  /** Manifest schema version (for forward-compat checks) */
+  version: 1;
+  /** @morphika/andami package version that created the backup */
+  framework_version: string;
+  /** ISO 8601 timestamp */
+  created_at: string;
+  /** Counts of each Sanity document type */
+  documents: {
+    pages: number;
+    site_settings: number;
+    site_styles: number;
+    asset_registry: number;
+    custom_sections: number;
+  };
+  /** R2 asset summary */
+  assets: {
+    total_files: number;
+    total_size_bytes: number;
+    /** Whether R2 was connected at backup time */
+    r2_connected: boolean;
+  };
+}
+
+/**
+ * Summary of what's inside a backup — used by the status endpoint
+ * and the pre-restore validation UI.
+ */
+export interface BackupStatus {
+  r2_connected: boolean;
+  asset_count: number;
+  asset_size_bytes: number;
+  document_counts: {
+    pages: number;
+    custom_sections: number;
+    site_settings: boolean;
+    site_styles: boolean;
+    asset_registry: boolean;
+  };
+}
+
+// ============================================
+// Validation
+// ============================================
+
+/**
+ * Validate that a parsed object is a valid BackupManifest.
+ * Returns the manifest if valid, throws if not.
+ */
+export function validateManifest(data: unknown): BackupManifest {
+  if (!data || typeof data !== "object") {
+    throw new Error("Invalid backup: manifest.json is missing or not an object");
+  }
+
+  const m = data as Record<string, unknown>;
+
+  if (m.version !== 1) {
+    throw new Error(
+      `Unsupported backup version: ${m.version}. This version of Andami supports version 1.`
+    );
+  }
+
+  if (typeof m.created_at !== "string") {
+    throw new Error("Invalid backup: manifest.json missing created_at");
+  }
+
+  if (!m.documents || typeof m.documents !== "object") {
+    throw new Error("Invalid backup: manifest.json missing documents section");
+  }
+
+  if (!m.assets || typeof m.assets !== "object") {
+    throw new Error("Invalid backup: manifest.json missing assets section");
+  }
+
+  return data as BackupManifest;
+}
+
+/**
+ * Create a manifest object for a new backup.
+ */
+export function createManifest(params: {
+  frameworkVersion: string;
+  pages: number;
+  siteSettings: number;
+  siteStyles: number;
+  assetRegistry: number;
+  customSections: number;
+  assetCount: number;
+  assetSizeBytes: number;
+  r2Connected: boolean;
+}): BackupManifest {
+  return {
+    version: 1,
+    framework_version: params.frameworkVersion,
+    created_at: new Date().toISOString(),
+    documents: {
+      pages: params.pages,
+      site_settings: params.siteSettings,
+      site_styles: params.siteStyles,
+      asset_registry: params.assetRegistry,
+      custom_sections: params.customSections,
+    },
+    assets: {
+      total_files: params.assetCount,
+      total_size_bytes: params.assetSizeBytes,
+      r2_connected: params.r2Connected,
+    },
+  };
+}