@drawnagency/primitives 0.1.72 → 0.1.74

package/dist/media/index.js

@@ -1,4 +1,5 @@
 import {
+  BAKED_MEDIA_KEYS,
   EXT_TO_MIME,
   MIME_TO_EXT,
   ProcessingQueue,
@@ -9,11 +10,12 @@ import {
   getMediaProvider,
   hashFileBuffer,
   mimeToExt,
+  rebindImageRef,
   resolveManifestReferences,
   resolveMedia,
   sanitizeMediaName,
   setMediaProvider
-} from "../chunk-TOBPMMRM.js";
+} from "../chunk-S55OZ7F2.js";
 import "../chunk-4YEOTFVU.js";
 import {
   ImageManifestSchema,
@@ -23,6 +25,7 @@ import {
 } from "../chunk-SWIHUIFT.js";
 import "../chunk-JSBRDJBE.js";
 export {
+  BAKED_MEDIA_KEYS,
   EXT_TO_MIME,
   ImageManifestSchema,
   MIME_TO_EXT,
@@ -37,6 +40,7 @@ export {
   getMediaProvider,
   hashFileBuffer,
   mimeToExt,
+  rebindImageRef,
   resolveManifestReferences,
   resolveMedia,
   sanitizeMediaName,

package/dist/media/resolve.d.ts

@@ -12,4 +12,18 @@ export declare function resolveMedia(item: {
  * without needing to know about the manifest themselves.
  */
 export declare function resolveManifestReferences(content: unknown, manifest: MediaManifest, sizes: number[], provider: MediaProvider): unknown;
+/**
+ * Keys stamped onto media refs by resolveManifestReferences above — derived
+ * from the referenced media item, never authored by the editor. Must stay in
+ * sync with the `patch` object built in resolveManifestReferences.
+ */
+export declare const BAKED_MEDIA_KEYS: readonly ["src", "srcset", "alt", "width", "height", "poster"];
+/**
+ * Re-point a media ref at a different library item. Drops every baked field so
+ * stale values resolved for the PREVIOUS image can't shadow the new one in the
+ * editor (ResolvedMedia prefers an explicit src prop over live resolution).
+ */
+export declare function rebindImageRef<T extends {
+    imageId?: string;
+}>(ref: T, imageId: string): T;
 //# sourceMappingURL=resolve.d.ts.map

package/dist/media/resolve.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/media/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,YAAY,CAC1B,IAAI,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,EACxC,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,aAAa,GAAG,IAAI,CAKtB;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,OAAO,CA0CT"}
+{"version":3,"file":"resolve.d.ts","sourceRoot":"","sources":["../../src/media/resolve.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,YAAY,CAC1B,IAAI,EAAE;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,EACxC,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,aAAa,GAAG,IAAI,CAKtB;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CACvC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,aAAa,EACvB,KAAK,EAAE,MAAM,EAAE,EACf,QAAQ,EAAE,aAAa,GACtB,OAAO,CA0CT;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,gEAAiE,CAAC;AAE/F;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAE,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EAAE,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,GAAG,CAAC,CAIzF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",

package/src/components/primitives/ResolvedMedia.tsx

@@ -27,13 +27,18 @@ export function ResolvedMedia({
   invertFrom,
 }: ResolvedMediaProps) {
   const resolved = useResolvedMedia(imageId);
-  const src = propSrc || resolved.src;
-  const srcset = propSrcset || resolved.srcset;
+  // A successful live resolution is always fresher than baked props (the ref
+  // may have been re-pointed since the server baked them) — prefer it, and use
+  // the baked values only where resolution is unavailable (zero-JS viewer,
+  // deleted/unknown id).
+  const hasResolved = !!resolved.src;
+  const src = hasResolved ? resolved.src : propSrc;
+  const srcset = hasResolved ? resolved.srcset : propSrcset;
   const poster = resolved.poster;
-  const alt = propAlt ?? resolved.alt;
+  const alt = hasResolved ? resolved.alt : (propAlt ?? "");
   const kind = resolved.kind;
-  const width = propWidth ?? resolved.width;
-  const height = propHeight ?? resolved.height;
+  const width = hasResolved ? resolved.width : propWidth;
+  const height = hasResolved ? resolved.height : propHeight;
 
   // `loaded` fades the placeholder out via onLoad in the hydrated editor. In the
   // zero-JS viewer this stays false (no JS), so the placeholder remains painted

package/src/components/sections/Media/MediaBlock.tsx

@@ -5,6 +5,7 @@ import { ResolvedMedia } from "../../primitives/ResolvedMedia";
 import { ImageDropZone } from "../../primitives/ImageDropZone";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
 import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+import { rebindImageRef } from "../../../media/resolve";
 
 export interface MediaBlockProps {
   refValue: SingleMediaReference;
@@ -25,7 +26,7 @@ export function MediaBlock({ refValue, options, link, isEditMode, onRefChange }:
     ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption
     : "";
 
-  const replace = onRefChange ? (imageId: string) => onRefChange({ ...refValue, imageId }) : undefined;
+  const replace = onRefChange ? (imageId: string) => onRefChange(rebindImageRef(refValue, imageId)) : undefined;
 
   // The zero-JS viewer has no MediaLibraryContext, so useResolvedMedia() can't
   // resolve the URL. The SSR pass (resolveManifestReferences) bakes src/srcset/alt

package/src/components/sections/Video/VideoBlock.tsx

@@ -7,7 +7,15 @@ import { EditablePlainText } from "../../primitives/EditablePlainText";
 
 export type VideoSource =
   | { type: "library"; ref: { imageId: string }; poster?: { imageId: string; src?: string } }
-  | { type: "external"; provider: "youtube" | "vimeo"; id: string; url: string; width: number; height: number };
+  | {
+      type: "external";
+      provider: "youtube" | "vimeo" | "instagram";
+      id: string;
+      kind?: "post" | "reel" | "tv";
+      url: string;
+      width: number;
+      height: number;
+    };
 
 interface VideoBlockProps {
   source: VideoSource;

package/src/components/sections/Video/index.tsx

@@ -24,11 +24,15 @@ const LibrarySource = z.object({
 
 const ExternalSource = z.object({
   type: z.literal("external"),
-  provider: z.enum(["youtube", "vimeo"]).describe("Hosting provider, derived from the pasted URL."),
-  id: z.string().describe("Provider video id parsed from the pasted URL."),
+  provider: z.enum(["youtube", "vimeo", "instagram"]).describe("Hosting provider, derived from the pasted URL."),
+  id: z.string().describe("Provider video id parsed from the pasted URL (Instagram: the post/reel shortcode)."),
+  kind: z
+    .enum(["post", "reel", "tv"])
+    .optional()
+    .describe("Instagram only: which embed path the shortcode came from ('p' → post). Omitted for other providers."),
   url: z.string().describe("The original video page URL as pasted."),
-  width: z.number().positive().describe("Native width used for the aspect-ratio box (from oEmbed; 16 when unknown)."),
-  height: z.number().positive().describe("Native height used for the aspect-ratio box (from oEmbed; 9 when unknown)."),
+  width: z.number().positive().describe("Aspect-ratio width (from oEmbed; Instagram: 9 for reels/tv, 4 for posts; editors can override)."),
+  height: z.number().positive().describe("Aspect-ratio height (from oEmbed; Instagram: 16 for reels/tv, 5 for posts; editors can override)."),
 });
 
 const schema = z.object({
@@ -36,7 +40,7 @@ const schema = z.object({
   content: z.object({
     source: z
       .discriminatedUnion("type", [LibrarySource, ExternalSource])
-      .describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo URL."),
+      .describe("Where the video comes from: a media-library upload or an external YouTube/Vimeo/Instagram URL."),
     caption: z.string().optional().describe("Optional caption rendered beneath the player when Show caption is on."),
   }),
   options: z
@@ -56,7 +60,8 @@ export default defineSection({
   icon: <Clapperboard size={18} />,
   schema,
   authoringNote:
-    "A watchable video player — self-hosted from the media library or embedded from YouTube/Vimeo. " +
+    "A watchable video player — self-hosted from the media library or embedded from YouTube/Vimeo/Instagram. " +
+    "Instagram embeds render the post card at a kind-derived aspect ratio (reels 9:16, posts 4:5) that editors can override. " +
     "Use playback 'click' for content viewers press play on (controls + audio) and 'ambient' for silent looping footage. " +
     "For decorative loops inside grids prefer the Media block; large self-hosted files require the site's asset storage.",
   component: ({ content, options, onChange }) => (

package/src/components/shared/VideoSourceField.tsx

@@ -13,6 +13,14 @@ interface Props {
 
 type Mode = "library" | "embed";
 
+// Instagram embeds only: the URL kind picks the initial ratio (reels 9:16,
+// posts 4:5), but /p/ shortcodes are ambiguous so editors can correct it.
+const ASPECTS = [
+  { label: "9:16", width: 9, height: 16 },
+  { label: "4:5", width: 4, height: 5 },
+  { label: "1:1", width: 1, height: 1 },
+] as const;
+
 export function VideoSourceField({ value, onChange }: Props) {
   const mediaLibrary = useMediaLibrary();
   const [mode, setMode] = useState<Mode>(value?.type === "external" ? "embed" : "library");
@@ -42,6 +50,7 @@ export function VideoSourceField({ value, onChange }: Props) {
         type: "external",
         provider: body.provider,
         id: body.id,
+        ...(body.kind ? { kind: body.kind } : {}),
         url: body.url,
         width: body.width,
         height: body.height,
@@ -118,7 +127,7 @@ export function VideoSourceField({ value, onChange }: Props) {
                   void submitEmbed();
                 }
               }}
-              placeholder="Paste a YouTube or Vimeo URL…"
+              placeholder="Paste a YouTube, Vimeo, or Instagram URL…"
               className="flex-1 rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast placeholder:text-base-contrast-light focus:outline-none focus:ring-1 focus:ring-primary"
             />
             <Button
@@ -137,6 +146,28 @@ export function VideoSourceField({ value, onChange }: Props) {
               Added — couldn't fetch exact dimensions, using 16:9.
             </p>
           ) : null}
+          {value?.type === "external" && value.provider === "instagram" ? (
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-base-contrast-light">Aspect</span>
+              {ASPECTS.map(({ label, width, height }) => {
+                const active = value.width === width && value.height === height;
+                return (
+                  <button
+                    key={label}
+                    type="button"
+                    aria-pressed={active}
+                    onClick={() => onChange({ ...value, width, height })}
+                    className={cn(
+                      "cursor-pointer rounded border px-2 py-0.5 text-xs",
+                      active ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast",
+                    )}
+                  >
+                    {label}
+                  </button>
+                );
+              })}
+            </div>
+          ) : null}
         </div>
       )}
     </div>

package/src/components/shell/EditorShell.tsx

@@ -232,7 +232,7 @@ export default function EditorShell({
 
   const buildStatus = useBuildStatus();
 
-  const { publishAction, publishFeedback, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
+  const { publishAction, publishFeedback, saveProgress, handleSave, handlePublish, handleSaveAndPublish } = useEditorPublish({
     flushNow: persistence.flushNow,
     cancelPendingFlush: persistence.cancelPendingFlush,
     isConfigDirty: persistence.isConfigDirty,
@@ -884,6 +884,7 @@ export default function EditorShell({
             localChangesExist={localChangesExist}
             publishAction={publishAction}
             publishFeedback={publishFeedback}
+            saveProgress={saveProgress}
             onSave={handleSave}
             onPublish={handlePublish}
             onSaveAndPublish={handleSaveAndPublish}
@@ -1489,12 +1490,14 @@ function DismissButton({ onClick }: { onClick: () => void }) {
 function StatusText({
   publishAction,
   publishFeedback,
+  saveProgress,
   buildState,
   buildElapsed,
   onDismiss,
 }: {
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
+  saveProgress: string | null;
   buildState: "idle" | "building" | "ready" | "error" | "fading";
   buildElapsed: number;
   onDismiss: () => void;
@@ -1502,7 +1505,7 @@ function StatusText({
   if (publishAction === "saving") {
     return (
       <span className="relative text-xs font-medium text-base-content/60">
-        Saving changes<LoadingEllipsis />
+        {saveProgress ?? <>Saving changes<LoadingEllipsis /></>}
       </span>
     );
   }
@@ -1550,6 +1553,7 @@ function EditorToolbar({
   localChangesExist,
   publishAction,
   publishFeedback,
+  saveProgress,
   onSave,
   onPublish,
   onSaveAndPublish,
@@ -1569,6 +1573,7 @@ function EditorToolbar({
   localChangesExist: boolean;
   publishAction: "idle" | "saving" | "publishing";
   publishFeedback: string | null;
+  saveProgress: string | null;
   onSave: () => void;
   onPublish: () => void;
   onSaveAndPublish: () => void;
@@ -1640,6 +1645,7 @@ function EditorToolbar({
               <StatusText
                 publishAction={publishAction}
                 publishFeedback={publishFeedback}
+                saveProgress={saveProgress}
                 buildState={buildState}
                 buildElapsed={buildElapsed}
                 onDismiss={onBuildDismiss}

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);
 
@@ -148,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(
@@ -157,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);
@@ -171,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)],
     };
   }
 
@@ -242,6 +308,7 @@ export function useEditorPublish({
       siteConfig: siteConfig!,
       siteIndexRef, deletedSectionIds, isConfigDirty,
       pendingMediaItems, pendingMediaDeletions, mediaManifest, manifestDirty,
+      saveChunkBudget,
     });
   }
 
@@ -269,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 () => {
@@ -286,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");
@@ -369,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);
@@ -384,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/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 };
+}