@drawnagency/primitives 0.1.71 → 0.1.73

package/src/hooks/useEditorPublish.ts

@@ -3,6 +3,7 @@ import type { SiteIndex, SiteConfig } from "../schemas/site-config";
 import type { LoadedSection } from "../lib/loader";
 import type { MediaManifest, MediaItem } from "../media/types";
 import { getDirtySectionRows, hasLocalChanges, discardSavedChanges, cacheContent, clearContentCache, getPendingMediaBlobs, clearPendingMediaByIds } from "../lib/dexie";
+import { packUploads, type MediaUploadPayload } from "../lib/save-chunks";
 
 function blobToBase64(blob: Blob): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -16,6 +17,35 @@ function blobToBase64(blob: Blob): Promise<string> {
   });
 }
 
+/** One /api/save request with honest failure semantics: the server's message
+ *  is preserved verbatim; non-JSON bodies (platform-level rejections) get a
+ *  status-coded fallback — or a size hint when the request body itself was
+ *  near Netlify's ~6MB limit (should be unreachable once saves are chunked). */
+async function postSave(payload: object): Promise<{ sha: string }> {
+  const body = JSON.stringify(payload);
+  let response: Response;
+  try {
+    response = await fetch("/api/save", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body,
+    });
+  } catch {
+    throw new Error("Network error while saving — check your connection and try again.");
+  }
+  if (!response.ok) {
+    const errorBody = await response.json().catch(() => null) as { message?: string; error?: string } | null;
+    const serverMessage = errorBody?.message || errorBody?.error;
+    const fallback = !errorBody && body.length > 5_500_000
+      ? "This save is too large to send in one request — remove some images from the media library and try again."
+      : `Save failed (HTTP ${response.status})`;
+    throw Object.assign(new Error(serverMessage || fallback), { status: response.status });
+  }
+  const data = await response.json().catch(() => null) as { sha?: string } | null;
+  if (!data?.sha) throw new Error("Save response missing SHA");
+  return data as { sha: string };
+}
+
 interface PublishDeps {
   flushNow: () => Promise<void>;
   cancelPendingFlush: () => void;
@@ -38,6 +68,8 @@ interface PublishDeps {
   // no draft exists yet). Sent with saves so the server can 409 on a concurrent
   // edit instead of silently overwriting it. Read at save time (latest value).
   getBaseVersion: () => string | null;
+  /** Test hook: overrides the per-request payload budget (default 4MB). */
+  saveChunkBudget?: number;
 }
 
 interface GatheredMedia {
@@ -67,9 +99,11 @@ export function useEditorPublish({
   onShasUpdated,
   onPublishComplete,
   getBaseVersion,
+  saveChunkBudget,
 }: PublishDeps) {
   const [publishAction, setPublishAction] = useState<PublishAction>("idle");
   const [publishFeedback, setPublishFeedback] = useState<string | null>(null);
+  const [saveProgress, setSaveProgress] = useState<string | null>(null);
   const feedbackTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const inFlightRef = useRef(false);
 
@@ -107,6 +141,9 @@ export function useEditorPublish({
       };
       for (const [key, blob] of Object.entries(storedBlobs)) {
         if (key === "primary" && item.kind === "image") continue;
+        // Assets-backed originals live in the bucket; only derived files (poster)
+        // ride the git save.
+        if (item.storage === "assets" && key === "primary") continue;
         const base64 = await blobToBase64(blob);
         if (key === "primary") {
           const ext = mimeExt[item.mimeType] ?? "bin";
@@ -145,6 +182,7 @@ export function useEditorPublish({
     pendingMediaDeletions: string[];
     mediaManifest: MediaManifest;
     manifestDirty: boolean;
+    saveChunkBudget?: number;
   }): Promise<{ sha: string; savedSections: { sectionId: string; updatedAt: string }[]; uploadedItems: MediaItem[] }> {
     const dirty = await getDirtySectionRows();
     const gathered = await gatherMediaPayload(
@@ -154,6 +192,14 @@ export function useEditorPublish({
       args.manifestDirty,
     );
 
+    const { chunks, oversized } = packUploads(gathered.mediaUploads, args.saveChunkBudget);
+    if (oversized.length > 0) {
+      const names = oversized.map((u) => `"${u.item.originalName}"`).join(", ");
+      throw new Error(
+        `${names} ${oversized.length === 1 ? "is" : "are"} too large to save — resize or compress the file, re-add it to the media library, and try again.`,
+      );
+    }
+
     let siteIndex = args.siteIndexRef.current;
     if (args.deletedSectionIds?.length) {
       const deleteSet = new Set(args.deletedSectionIds);
@@ -168,48 +214,71 @@ export function useEditorPublish({
       };
     }
 
-    const response = await fetch("/api/save", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        sections: dirty.map(({ sectionId, content }) => ({
-          id: sectionId,
-          content,
-        })),
-        siteIndex,
-        baseVersion: getBaseVersion(),
-        ...(args.deletedSectionIds?.length ? { deletedSectionIds: args.deletedSectionIds } : {}),
-        ...(args.isConfigDirty() ? { siteConfig: args.siteConfig } : {}),
-        ...(gathered.hasMediaChanges ? {
-          media: {
-            uploads: gathered.mediaUploads.map(({ item, blobs }) => ({ item, blobs })),
-            deletions: args.pendingMediaDeletions.map((id) => ({
-              id,
-              folder: args.mediaManifest.images[id]?.folder,
-            })).filter((d) => d.folder),
-            manifest: gathered.updatedManifest,
-          },
-        } : {}),
-      }),
-    });
-
-    if (!response.ok) {
-      const errorBody = await response.json().catch(() => ({}));
-      const message = errorBody.message || errorBody.error || "Save failed";
-      throw Object.assign(new Error(message), { status: response.status });
+    let baseVersion = getBaseVersion();
+    const uploadedItems: MediaItem[] = [];
+    const totalUploads = gathered.mediaUploads.length;
+
+    // Lead chunks: media-only saves. The server skips the index write for
+    // these, so the draft never references section files that don't exist
+    // yet; a failure after chunk k leaves chunks 1..k committed AND in the
+    // committed manifest. The remainder stays pending in Dexie, but the
+    // caller's savedShaRef only advances on full success — so an IMMEDIATE
+    // retry may 409 against the moved draft head; after a reload the save
+    // resumes cleanly with only the uncommitted remainder.
+    const leadChunks = chunks.slice(0, -1); // empty when chunks.length <= 1
+    const finalUploads: MediaUploadPayload[] = chunks.length > 0 ? chunks[chunks.length - 1] : [];
+    const committedImages: Record<string, MediaItem> = {};
+    let sent = 0;
+
+    for (const chunk of leadChunks) {
+      setSaveProgress(`Saving images ${sent + chunk.length}/${totalUploads}…`);
+      for (const upload of chunk) committedImages[upload.item.id] = upload.item;
+      const manifest: MediaManifest = { images: { ...args.mediaManifest.images, ...committedImages } };
+      const data = await postSave({
+        baseVersion,
+        media: { uploads: chunk, deletions: [], manifest },
+      });
+      baseVersion = data.sha;
+      sent += chunk.length;
+      const chunkItems = chunk.map((u) => u.item);
+      uploadedItems.push(...chunkItems);
+      // Promote committed items immediately so a later failure can't re-send
+      // them. A failure HERE is tolerable: re-sending identical blobs on the
+      // next save is harmless (same content, same paths).
+      try {
+        await clearPendingMediaByIds(chunkItems.map((i) => i.id), []);
+        onMediaPublished(chunkItems, []);
+      } catch (promoteError) {
+        console.error("Failed to promote committed media chunk locally:", promoteError);
+      }
     }
 
-    const responseData = await response.json().catch(() => null);
-    if (!responseData?.sha) {
-      throw new Error("Save response missing SHA");
+    if (leadChunks.length > 0) {
+      setSaveProgress(finalUploads.length > 0 ? `Saving images ${totalUploads}/${totalUploads}…` : null);
     }
+
+    const responseData = await postSave({
+      sections: dirty.map(({ sectionId, content }) => ({ id: sectionId, content })),
+      siteIndex,
+      baseVersion,
+      ...(args.deletedSectionIds?.length ? { deletedSectionIds: args.deletedSectionIds } : {}),
+      ...(args.isConfigDirty() ? { siteConfig: args.siteConfig } : {}),
+      ...(gathered.hasMediaChanges ? {
+        media: {
+          uploads: finalUploads,
+          deletions: args.pendingMediaDeletions.map((id) => ({
+            id,
+            folder: args.mediaManifest.images[id]?.folder,
+          })).filter((d) => d.folder),
+          manifest: gathered.updatedManifest,
+        },
+      } : {}),
+    });
+
     return {
-      sha: responseData.sha as string,
+      sha: responseData.sha,
       savedSections: dirty.map(({ sectionId, updatedAt }) => ({ sectionId, updatedAt })),
-      // Only the items whose blobs were actually written to GitHub. Items skipped
-      // by gatherMediaPayload (blobs not yet persisted) are excluded so the caller
-      // never promotes them into the manifest as orphans.
-      uploadedItems: gathered.mediaUploads.map(({ item }) => item),
+      uploadedItems: [...uploadedItems, ...finalUploads.map((u) => u.item)],
     };
   }
 
@@ -239,6 +308,7 @@ export function useEditorPublish({
       siteConfig: siteConfig!,
       siteIndexRef, deletedSectionIds, isConfigDirty,
       pendingMediaItems, pendingMediaDeletions, mediaManifest, manifestDirty,
+      saveChunkBudget,
     });
   }
 
@@ -266,8 +336,9 @@ export function useEditorPublish({
 
   function reportSaveError(error: unknown, failLabel: string): void {
     console.error(`${failLabel} failed:`, error);
+    const message = error instanceof Error && error.message ? error.message : `${failLabel} failed`;
     const isConflict = (error as { status?: number })?.status === 409;
-    showFeedback(isConflict ? (error as Error).message : `${failLabel} failed`, isConflict ? 8000 : 5000);
+    showFeedback(message, isConflict ? 8000 : 6000);
   }
 
   const handleSave = useCallback(async () => {
@@ -283,19 +354,26 @@ export function useEditorPublish({
       }
 
       const { sha, savedSections, uploadedItems } = await runPerformSave();
-
-      await commitSavedRows(savedSections, uploadedItems);
-      finishSave(uploadedItems);
       onShasUpdated(sha, null);
 
+      try {
+        await commitSavedRows(savedSections, uploadedItems);
+        finishSave(uploadedItems);
+      } catch (cleanupError) {
+        console.error("Save succeeded but local cleanup failed:", cleanupError);
+        showFeedback("Saved, but the local cache couldn't be updated — reload the editor.", 8000);
+        return;
+      }
+
       showFeedback("Saved", 3000);
     } catch (error) {
       reportSaveError(error, "Save");
     } finally {
       inFlightRef.current = false;
       setPublishAction("idle");
+      setSaveProgress(null);
     }
-  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, deletedSectionIds, onSuccess, mediaManifest, manifestDirty, clearManifestDirty, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback]);
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, deletedSectionIds, onSuccess, mediaManifest, manifestDirty, clearManifestDirty, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, saveChunkBudget]);
 
   const handlePublish = useCallback(async () => {
     setPublishAction("publishing");
@@ -366,12 +444,20 @@ export function useEditorPublish({
       const { sha } = publishData;
 
       if (hasLocalEdits) {
-        await commitSavedRows(savedSections, uploadedItems);
-        // Re-cache against the PUBLISHED sha (commitSavedRows just invalidated the
-        // cache); the draft branch is gone after publish, so this is the snapshot a
-        // later cache hit restores.
-        await cacheContent(sha, sections, siteIndexRef.current, siteConfig!);
-        finishSave(uploadedItems);
+        try {
+          await commitSavedRows(savedSections, uploadedItems);
+          // Re-cache against the PUBLISHED sha (commitSavedRows just invalidated the
+          // cache); the draft branch is gone after publish, so this is the snapshot a
+          // later cache hit restores.
+          await cacheContent(sha, sections, siteIndexRef.current, siteConfig!);
+          finishSave(uploadedItems);
+        } catch (cleanupError) {
+          console.error("Publish succeeded but local cleanup failed:", cleanupError);
+          onShasUpdated(null, sha);
+          onPublishComplete?.();
+          showFeedback("Published, but the local cache couldn't be updated — reload the editor.", 8000);
+          return;
+        }
       }
 
       onShasUpdated(null, sha);
@@ -381,8 +467,9 @@ export function useEditorPublish({
     } finally {
       inFlightRef.current = false;
       setPublishAction("idle");
+      setSaveProgress(null);
     }
-  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, manifestDirty, clearManifestDirty, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, onPublishComplete]);
+  }, [flushNow, cancelPendingFlush, isConfigDirty, clearConfigDirty, siteIndexRef, siteConfig, sections, deletedSectionIds, onSuccess, mediaManifest, manifestDirty, clearManifestDirty, pendingMediaItems, pendingMediaDeletions, onMediaPublished, onShasUpdated, showFeedback, onPublishComplete, saveChunkBudget]);
 
-  return { publishAction, publishFeedback, handleSave, handlePublish, handleSaveAndPublish };
+  return { publishAction, publishFeedback, saveProgress, handleSave, handlePublish, handleSaveAndPublish };
 }

package/src/hooks/useMediaPipeline.ts

@@ -24,6 +24,10 @@ interface UseMediaPipelineInput {
   setLocalChangesExist: React.Dispatch<React.SetStateAction<boolean>>;
   setDirtySectionIds: React.Dispatch<React.SetStateAction<Set<string>>>;
   markSectionDirty: (sectionId: string, content: SectionContent) => void;
+  // Surfaces upload rejections/failures (oversized files, disallowed types,
+  // upload-intent errors, direct-to-bucket PUT failures) to the caller, which
+  // decides how to display them (e.g. the media modal's rejection banner).
+  onUploadError?: (message: string) => void;
 }
 
 export function useMediaPipeline({
@@ -35,11 +39,16 @@ export function useMediaPipeline({
   setLocalChangesExist,
   setDirtySectionIds,
   markSectionDirty,
+  onUploadError,
 }: UseMediaPipelineInput) {
   const [processingItems, setProcessingItems] = useState<QueueItem[]>([]);
   const [pendingMediaItems, setPendingMediaItems] = useState<LibraryMediaItem[]>([]);
   const [pendingLocalUrls, setPendingLocalUrls] = useState<Record<string, string>>({});
   const [pendingDeletions, setPendingDeletions] = useState<string[]>([]);
+  // Direct-to-bucket large-video PUT progress, keyed by content hash (0..1).
+  // Populated by uploadLargeVideo's XHR upload.onprogress, cleared on
+  // completion or failure.
+  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
   // True when the manifest holds unsaved edits that produce no upload/deletion —
   // e.g. alt text on an already-published image. Without this the save path's
   // hasMediaChanges check (uploads/deletions only) skips the change and the edit
@@ -52,6 +61,45 @@ export function useMediaPipeline({
   const uploadCallbacksRef = useRef<Map<string, (imageId: string) => void>>(new Map());
   const destroyedRef = useRef(false);
 
+  // Shared persistence path for every pending media item — the processing
+  // queue's small-file finalize AND the direct-to-bucket large-video upload
+  // both funnel through this so a Dexie write, the pendingMediaItems/
+  // pendingLocalUrls state, and cleanup-on-failure can't drift between them.
+  const finalizePendingMedia = useCallback(
+    async (
+      item: LibraryMediaItem,
+      localUrls: Record<string, string>,
+      blobsMap: Record<string, Blob>,
+    ): Promise<boolean> => {
+      if (destroyedRef.current) return false;
+      try {
+        // Persist blobs to IndexedDB BEFORE marking the item pending.
+        // Previously this was fire-and-forget: a Save firing before the
+        // write landed — or a failed write (e.g. storage quota) — left the
+        // item promoted into the manifest with no backing file, an orphan
+        // that dropped out on the next render and blocked re-adding it.
+        await addPendingMediaItem(item, localUrls, blobsMap);
+      } catch (err) {
+        console.error(`[useMediaPipeline] Failed to persist media "${item.originalName}":`, err);
+        for (const url of Object.values(localUrls)) URL.revokeObjectURL(url);
+        return false;
+      }
+      if (destroyedRef.current) return false;
+      removePendingMediaDeletion(item.id);
+      setPendingDeletions((prev) => prev.filter((d) => d !== item.id));
+      setPendingMediaItems((prev) => [...prev, item]);
+      const displayKey = item.kind === "video"
+        ? "primary"
+        : Object.keys(localUrls).find((k) => k !== "primary" && k !== "poster") ?? "primary";
+      if (localUrls[displayKey]) {
+        setPendingLocalUrls((prev) => ({ ...prev, [item.id]: localUrls[displayKey] }));
+      }
+      setLocalChangesExist(true);
+      return true;
+    },
+    [setLocalChangesExist],
+  );
+
   // --- Processing queue ---
 
   const mediaConfigKey = siteConfig
@@ -103,31 +151,11 @@ export function useMediaPipeline({
                 size: v.size,
               })),
               alt: "",
+              storage: "github",
             };
 
-            try {
-              // Persist blobs to IndexedDB BEFORE marking the item pending.
-              // Previously this was fire-and-forget: a Save firing before the
-              // write landed — or a failed write (e.g. storage quota) — left the
-              // item promoted into the manifest with no backing file, an orphan
-              // that dropped out on the next render and blocked re-adding it.
-              await addPendingMediaItem(item, localUrls, blobsMap);
-            } catch (err) {
-              console.error(`[useMediaPipeline] Failed to persist media "${item.originalName}":`, err);
-              for (const url of Object.values(localUrls)) URL.revokeObjectURL(url);
-              return;
-            }
-            if (destroyedRef.current) return;
-            removePendingMediaDeletion(item.id);
-            setPendingDeletions((prev) => prev.filter((d) => d !== item.id));
-            setPendingMediaItems((prev) => [...prev, item]);
-            const displayKey = kind === "video"
-              ? "primary"
-              : Object.keys(localUrls).find((k) => k !== "primary" && k !== "poster") ?? "primary";
-            if (localUrls[displayKey]) {
-              setPendingLocalUrls((prev) => ({ ...prev, [item.id]: localUrls[displayKey] }));
-            }
-            setLocalChangesExist(true);
+            const persisted = await finalizePendingMedia(item, localUrls, blobsMap);
+            if (!persisted) return;
 
             const callback = uploadCallbacksRef.current.get(event.item.hash);
             if (callback) {
@@ -179,6 +207,121 @@ export function useMediaPipeline({
 
   // --- Media handlers ---
 
+  // Direct-to-bucket path for videos over the git-path cap (maxFileSize): mint
+  // a signed URL, PUT the original straight to the bucket (with progress),
+  // then persist a pending item whose ONLY Dexie blob is the poster — the
+  // original never rides the base64 /api/save payload.
+  // Every exit path below must (1) never throw out to the caller — so the
+  // handleMediaUpload batch loop always advances to the next file — (2) call
+  // onUploadError exactly once on failure, and (3) leave no leaked
+  // uploadProgress[hash] entry. Each network/decode stage below gets its own
+  // try/catch so it can report a stage-specific, actionable message and
+  // `return` (never rethrow); the outer try/catch is a last-resort net for
+  // anything upstream of those stages (e.g. hashing), and the single outer
+  // `finally` is the one place progress gets cleared, regardless of which
+  // stage — or none — ran.
+  const uploadLargeVideo = useCallback(async (file: File, mediaConfig: SiteConfig["media"]) => {
+    let hash: string | undefined;
+    try {
+      const buffer = await file.arrayBuffer();
+      hash = await hashFileBuffer(buffer);
+
+      const isDeleted = pendingDeletions.includes(hash);
+      const existsInManifest = hash in mediaManifest.images;
+      const existsInPending = pendingMediaItems.some((i) => i.hash === hash);
+      if ((existsInManifest || existsInPending) && !isDeleted) return;
+
+      if (file.size > mediaConfig.maxAssetSize) {
+        onUploadError?.(`${file.name} exceeds the ${Math.round(mediaConfig.maxAssetSize / 1024 / 1024)}MB video limit.`);
+        return;
+      }
+
+      let uploadUrl: string;
+      let publicUrl: string;
+      try {
+        const intentRes = await fetch("/api/media/upload-intent", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ hash, contentType: file.type, size: file.size }),
+        });
+        if (!intentRes.ok) {
+          const body = await intentRes.json().catch(() => ({}) as { message?: string });
+          onUploadError?.(body.message ?? "Video upload is not available on this site.");
+          return;
+        }
+        ({ uploadUrl, publicUrl } = await intentRes.json());
+      } catch (err) {
+        onUploadError?.(`${file.name}: couldn't start the upload — ${(err as Error).message}. Try again.`);
+        return;
+      }
+
+      try {
+        // Direct browser -> bucket PUT with progress (fetch has no upload progress).
+        await new Promise<void>((resolvePut, rejectPut) => {
+          const xhr = new XMLHttpRequest();
+          xhr.open("PUT", uploadUrl);
+          xhr.setRequestHeader("Content-Type", file.type);
+          xhr.upload.onprogress = (e) => {
+            if (e.lengthComputable) setUploadProgress((prev) => ({ ...prev, [hash as string]: e.loaded / e.total }));
+          };
+          xhr.onload = () => (xhr.status >= 200 && xhr.status < 300 ? resolvePut() : rejectPut(new Error(`upload ${xhr.status}`)));
+          xhr.onerror = () => rejectPut(new Error("upload failed"));
+          xhr.send(file);
+        });
+      } catch (err) {
+        onUploadError?.(`${file.name}: upload failed — ${(err as Error).message}. Try again.`);
+        return;
+      }
+
+      try {
+        const { posterBlob, width, height, duration } = await generateVideoPoster(file, mediaConfig.quality);
+        const sanitizedName = sanitizeMediaName(file.name);
+        const item: LibraryMediaItem = {
+          id: hash,
+          hash,
+          kind: "video",
+          originalName: sanitizedName,
+          width,
+          height,
+          mimeType: file.type,
+          size: file.size,
+          folder: `${sanitizedName}-${hash}`,
+          variants: [],
+          alt: "",
+          storage: "assets",
+          url: publicUrl,
+          // MediaRecorder-sourced webm/mp4 (screen recordings) commonly report
+          // duration as Infinity or NaN. JSON.stringify(Infinity) -> null,
+          // which ImageManifestSchema's z.number().positive().optional()
+          // rejects on the next save — omit the field entirely instead.
+          ...(Number.isFinite(duration) && duration > 0 ? { duration } : {}),
+        };
+        // Only the poster blob is persisted — the original lives in the bucket, so
+        // save/publish never ships large base64 through the Netlify function.
+        const localUrls = { primary: URL.createObjectURL(file), poster: URL.createObjectURL(posterBlob) };
+        await finalizePendingMedia(item, localUrls, { poster: posterBlob });
+      } catch (err) {
+        // The PUT already succeeded, so the original is sitting in the bucket
+        // with no pending item pointing at it — an orphan. Task 11's GC prunes
+        // unreferenced bucket objects; we don't attempt to delete it here.
+        onUploadError?.(`${file.name}: uploaded but couldn't finish processing — try again.`);
+      }
+    } catch (err) {
+      console.error(`[useMediaPipeline] uploadLargeVideo failed unexpectedly for "${file.name}":`, err);
+      onUploadError?.(`${file.name}: upload failed unexpectedly. Try again.`);
+    } finally {
+      if (hash !== undefined) {
+        const h = hash;
+        setUploadProgress((prev) => {
+          if (!(h in prev)) return prev;
+          const next = { ...prev };
+          delete next[h];
+          return next;
+        });
+      }
+    }
+  }, [mediaManifest, pendingMediaItems, pendingDeletions, onUploadError, finalizePendingMedia]);
+
   const handleMediaUpload = useCallback(async (files: File[]) => {
     if (!siteConfig) return;
     const mediaConfig = siteConfig.media;
@@ -186,7 +329,26 @@ export function useMediaPipeline({
     if (!queue) return;
 
     for (const file of files) {
-      if (file.size > mediaConfig.maxFileSize) continue;
+      if (file.size > mediaConfig.maxFileSize) {
+        if (file.type === "video/mp4" || file.type === "video/webm") {
+          // uploadLargeVideo already guarantees it never throws (see its own
+          // try/catch/finally) and reports failures via onUploadError itself;
+          // this catch is defense-in-depth only, so it must NOT call
+          // onUploadError again — doing so would double-report.
+          try {
+            await uploadLargeVideo(file, mediaConfig);
+          } catch (err) {
+            console.error(`[useMediaPipeline] uploadLargeVideo threw unexpectedly for "${file.name}":`, err);
+          }
+        } else {
+          onUploadError?.(
+            file.type.startsWith("video/")
+              ? `${file.name}: only MP4/WebM videos can be uploaded.`
+              : `${file.name} is larger than the ${Math.round(mediaConfig.maxFileSize / 1024 / 1024)}MB media limit.`,
+          );
+        }
+        continue;
+      }
 
       const buffer = await file.arrayBuffer();
       const hash = await hashFileBuffer(buffer);
@@ -202,7 +364,7 @@ export function useMediaPipeline({
 
       queue.add({ buffer, originalName: file.name, mimeType: file.type, hash, kind });
     }
-  }, [siteConfig, mediaManifest, pendingMediaItems, pendingDeletions]);
+  }, [siteConfig, mediaManifest, pendingMediaItems, pendingDeletions, onUploadError, uploadLargeVideo]);
 
   const handleMediaDelete = useCallback(async (ids: string[]) => {
     const idSet = new Set(ids);
@@ -348,6 +510,7 @@ export function useMediaPipeline({
     setPendingDeletions,
     manifestDirty,
     setManifestDirty,
+    uploadProgress,
     handleMediaUpload,
     handleMediaDelete,
     handleMediaAltChange,

package/src/lib/registry.ts

@@ -3,6 +3,7 @@ import type { ComponentType, ReactNode } from "react";
 import type { Audience } from "../schemas/auth";
 import type { LinkValue } from "../schemas/link";
 import type { SectionContent } from "../schemas/sections";
+import type { VideoSource } from "../components/sections/Video/VideoBlock";
 
 // --- Settings field types ---
 
@@ -55,6 +56,12 @@ export type SettingsFieldDef =
       label: string;
       default: LinkValue;
       target?: "content" | "options";
+    }
+  | {
+      type: "video-source";
+      label: string;
+      default: VideoSource;
+      target?: "content" | "options";
     };
 
 export type SettingsSchema = Record<string, SettingsFieldDef>;

package/src/lib/save-chunks.ts

@@ -0,0 +1,53 @@
+import type { MediaItem } from "../media/types";
+
+export interface MediaUploadPayload {
+  item: MediaItem;
+  blobs: { path: string; base64: string }[];
+}
+
+/**
+ * Serialized-payload budget per /api/save request. Netlify rejects function
+ * request bodies over ~6MB at the platform level (before the app runs); 4MB
+ * leaves headroom for the JSON envelope plus sections/index/config riding the
+ * final chunk.
+ */
+export const SAVE_CHUNK_BUDGET_BYTES = 4 * 1024 * 1024;
+
+/** Approximate serialized size of one upload: base64 dominates; the fixed
+ *  allowances cover JSON keys, quoting, and the item's manifest metadata. */
+export function uploadSizeBytes(upload: MediaUploadPayload): number {
+  return upload.blobs.reduce((sum, b) => sum + b.base64.length + b.path.length + 64, 512);
+}
+
+export interface PackedUploads {
+  chunks: MediaUploadPayload[][];
+  oversized: MediaUploadPayload[];
+}
+
+/** Greedy in-order packing of uploads into budget-sized chunks. An item whose
+ *  blobs alone exceed the budget can never be sent — it lands in `oversized`
+ *  for the caller to reject with a per-file error. Items are never split
+ *  across chunks (the manifest may only reference fully-committed items). */
+export function packUploads(uploads: MediaUploadPayload[], budget = SAVE_CHUNK_BUDGET_BYTES): PackedUploads {
+  const chunks: MediaUploadPayload[][] = [];
+  const oversized: MediaUploadPayload[] = [];
+  let current: MediaUploadPayload[] = [];
+  let currentBytes = 0;
+
+  for (const upload of uploads) {
+    const size = uploadSizeBytes(upload);
+    if (size > budget) {
+      oversized.push(upload);
+      continue;
+    }
+    if (current.length > 0 && currentBytes + size > budget) {
+      chunks.push(current);
+      current = [];
+      currentBytes = 0;
+    }
+    current.push(upload);
+    currentBytes += size;
+  }
+  if (current.length > 0) chunks.push(current);
+  return { chunks, oversized };
+}