@drawnagency/primitives 0.1.70 → 0.1.72

package/src/components/shared/VideoSourceField.tsx

@@ -0,0 +1,144 @@
+import { useState } from "react";
+import { FormLabel } from "./FormLabel";
+import { Button } from "./Button";
+import { useMediaLibrary } from "../shell/MediaLibraryContext";
+import { useResolvedMedia } from "../../hooks/useResolvedMedia";
+import type { VideoSource } from "../sections/Video/VideoBlock";
+import { cn } from "../../lib/cn";
+
+interface Props {
+  value: VideoSource | undefined;
+  onChange: (source: VideoSource) => void;
+}
+
+type Mode = "library" | "embed";
+
+export function VideoSourceField({ value, onChange }: Props) {
+  const mediaLibrary = useMediaLibrary();
+  const [mode, setMode] = useState<Mode>(value?.type === "external" ? "embed" : "library");
+  const [url, setUrl] = useState(value?.type === "external" ? value.url : "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [fallback, setFallback] = useState(false);
+
+  const libraryImageId = value?.type === "library" ? value.ref.imageId : undefined;
+  const resolved = useResolvedMedia(libraryImageId);
+
+  async function submitEmbed() {
+    if (loading) return;
+    const trimmed = url.trim();
+    if (!trimmed) return;
+    setLoading(true);
+    setError(null);
+    setFallback(false);
+    try {
+      const res = await fetch(`/api/media/oembed?url=${encodeURIComponent(trimmed)}`);
+      const body = await res.json();
+      if (!res.ok) {
+        setError(body?.message ?? "Couldn't load that video.");
+        return;
+      }
+      onChange({
+        type: "external",
+        provider: body.provider,
+        id: body.id,
+        url: body.url,
+        width: body.width,
+        height: body.height,
+      });
+      if (body.fallback) {
+        setFallback(true);
+      } else {
+        setUrl("");
+      }
+    } catch {
+      setError("Couldn't reach the video service.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FormLabel>Source</FormLabel>
+      <div className="flex gap-2" role="tablist">
+        {(["library", "embed"] as const).map((m) => (
+          <button
+            key={m}
+            type="button"
+            role="tab"
+            aria-selected={mode === m}
+            onClick={() => setMode(m)}
+            className={cn(
+              "cursor-pointer rounded border px-3 py-1 text-sm",
+              mode === m ? "border-primary bg-primary text-primary-contrast" : "border-base-200 text-base-contrast",
+            )}
+          >
+            {m === "library" ? "Choose from library" : "Paste embed URL"}
+          </button>
+        ))}
+      </div>
+
+      {mode === "library" ? (
+        <div className="flex items-center gap-3">
+          {libraryImageId ? (
+            resolved.poster ? (
+              <img src={resolved.poster} alt="" className="h-12 w-20 rounded object-cover" />
+            ) : (
+              <span className="text-sm text-base-contrast-light">Video selected</span>
+            )
+          ) : (
+            <span className="text-sm text-base-contrast-light">No video selected</span>
+          )}
+          <Button
+            type="button"
+            variant="secondary"
+            size="sm"
+            onClick={() =>
+              mediaLibrary?.openSelectModal((id) => onChange({ type: "library", ref: { imageId: id } }))
+            }
+          >
+            Choose video
+          </Button>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              value={url}
+              onChange={(e) => {
+                setUrl(e.target.value);
+                setError(null);
+                setFallback(false);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault();
+                  void submitEmbed();
+                }
+              }}
+              placeholder="Paste a YouTube or Vimeo 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
+              type="button"
+              variant="primary"
+              size="sm"
+              onClick={() => void submitEmbed()}
+              disabled={loading || !url.trim()}
+            >
+              {loading ? "Loading…" : "Use link"}
+            </Button>
+          </div>
+          {error ? <p className="text-xs text-red-600">{error}</p> : null}
+          {!error && fallback ? (
+            <p className="text-xs text-base-contrast-light/70">
+              Added — couldn't fetch exact dimensions, using 16:9.
+            </p>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/shell/ChatbotConfigModal.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { EditorModal } from "./EditorModal";
 import { Button } from "../shared/Button";
 import { cn } from "../../lib/cn";
 import ChatPanel from "../chat/ChatPanel";
 import type { SiteConfig, ChatbotConfig, ChatbotTask } from "../../schemas/site-config";
 import type { Audience } from "../../auth/types";
+import { audiencePasses } from "../../lib/pages";
 
 interface Props {
   isOpen: boolean;
@@ -39,6 +40,12 @@ export function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigCh
   const chatbot = siteConfig.chatbot;
   const [newTaskLabel, setNewTaskLabel] = useState("");
   const [showTest, setShowTest] = useState(false);
+  const [previewAudience, setPreviewAudience] = useState("");
+
+  // A deselected audience can no longer chat — never keep simulating it.
+  useEffect(() => {
+    if (previewAudience && !chatbot.audiences.includes(previewAudience)) setPreviewAudience("");
+  }, [previewAudience, chatbot.audiences]);
 
   const patch = (p: Partial<ChatbotConfig>) =>
     onSiteConfigChange({ ...siteConfig, chatbot: { ...chatbot, ...p } });
@@ -67,6 +74,13 @@ export function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigCh
   const toggleName = (list: string[], name: string) =>
     list.includes(name) ? list.filter((n) => n !== name) : [...list, name];
 
+  // Record lookups can hit inherited Object.prototype members ("constructor"
+  // is a legal audience name) — treat anything non-string as absent.
+  const overlayValue = (name: string) => {
+    const v = chatbot.audiencePrompts[name];
+    return typeof v === "string" ? v : "";
+  };
+
   return (
     <EditorModal isOpen={isOpen} onClose={onClose} title="Chatbot" size="settings" noPadding>
       <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-6 py-4">
@@ -79,14 +93,27 @@ export function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigCh
 
         <label className="flex items-center gap-2 text-sm text-base-contrast">
           <input type="checkbox" aria-label="Enable chatbot" checked={chatbot.enabled}
+            className="h-5 w-5 cursor-pointer accent-primary"
             onChange={(e) => patch({ enabled: e.target.checked })} />
           Show the chat widget to viewers
         </label>
 
         <div>
           <p className="mb-1 text-sm font-medium text-base-contrast">Audiences</p>
-          <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget. None selected = all audiences.</p>
+          <p className="mb-2 text-xs text-base-contrast-light">Who sees the widget — only the selected audiences; none selected means no one.</p>
           <AudienceChips audiences={audiences} selected={chatbot.audiences} onToggle={(n) => patch({ audiences: toggleName(chatbot.audiences, n) })} />
+          {chatbot.audiences.map((name) => (
+            <div key={name} className="mt-2">
+              <label htmlFor={`audience-prompt-${name}`} className="mb-1 block text-xs font-medium text-base-contrast">
+                Additional guidance for {name}
+              </label>
+              <textarea id={`audience-prompt-${name}`} aria-label={`Guidance for ${name}`} rows={2} maxLength={8000}
+                value={overlayValue(name)}
+                onChange={(e) => patch({ audiencePrompts: { ...chatbot.audiencePrompts, [name]: e.target.value } })}
+                placeholder={`Only ${name} sees answers shaped by this — safe for ${name}-level info.`}
+                className="w-full rounded border border-base-200 bg-base px-2 py-1 text-sm text-base-contrast" />
+            </div>
+          ))}
         </div>
 
         <div>
@@ -138,11 +165,25 @@ export function ChatbotConfigModal({ isOpen, onClose, siteConfig, onSiteConfigCh
           <p className="mt-1 text-xs text-base-contrast-light">
             Tests your unsaved prompt and tasks. Answers ground on published content.
           </p>
+          {showTest && platformEnabled && (
+            <label className="mt-2 flex items-center gap-2 text-xs text-base-contrast">
+              Preview as
+              <select aria-label="Preview as" value={previewAudience} onChange={(e) => setPreviewAudience(e.target.value)}
+                className="rounded border border-base-200 bg-base-accent px-1 py-0.5 text-xs">
+                <option value="">Editor (base prompt only)</option>
+                {chatbot.audiences.map((n) => <option key={n} value={n}>{n}</option>)}
+              </select>
+              <span className="text-base-contrast-light">Prompt and task preview only — grounding stays editor-wide.</span>
+            </label>
+          )}
           {showTest && platformEnabled && (
             <ChatPanel
               open onClose={() => setShowTest(false)} siteName={siteConfig.siteName}
-              tasks={chatbot.tasks.map((t) => ({ id: t.id, label: t.label }))}
+              tasks={chatbot.tasks
+                .filter((t) => previewAudience === "" || audiencePasses(t.access, previewAudience))
+                .map((t) => ({ id: t.id, label: t.label }))}
               isEditor draftChatbot={chatbot}
+              simulateAudience={previewAudience || undefined}
             />
           )}
         </div>

package/src/components/shell/EditorShell.tsx

@@ -153,6 +153,10 @@ export default function EditorShell({
   const [showChatbotConfig, setShowChatbotConfig] = useState(false);
   const [isRestoring, setIsRestoring] = useState(false);
   const [rejectedUploads, setRejectedUploads] = useState<{ name: string; reason: "size" | "type" }[]>([]);
+  // Surfaces useMediaPipeline's onUploadError (oversized/disallowed files,
+  // upload-intent failures, direct-to-bucket PUT failures) in the media
+  // library modal, alongside its existing client-side rejection banner.
+  const [uploadErrorMessage, setUploadErrorMessage] = useState<string | null>(null);
   const [activePageId, setActivePageId] = useState<string | null>(null);
   const [movingSectionId, setMovingSectionId] = useState<string | null>(null);
 
@@ -223,6 +227,7 @@ export default function EditorShell({
     setLocalChangesExist,
     setDirtySectionIds,
     markSectionDirty: persistence.markSectionDirty,
+    onUploadError: (message) => setUploadErrorMessage(message),
   });
 
   const buildStatus = useBuildStatus();
@@ -1032,6 +1037,9 @@ export default function EditorShell({
               referenceCountMap={mediaPipeline.referenceCountMap}
               localUrlMap={mediaPipeline.pendingLocalUrls}
               maxFileSize={siteConfig?.media.maxFileSize}
+              uploadProgress={mediaPipeline.uploadProgress}
+              uploadError={uploadErrorMessage}
+              onDismissUploadError={() => setUploadErrorMessage(null)}
             />
           </EditorModal>
           <EditorModal

package/src/components/shell/MediaLibraryModal.tsx

@@ -17,6 +17,13 @@ export interface MediaLibraryModalProps {
   referenceCountMap: Record<string, number>;
   localUrlMap?: Record<string, string>;
   maxFileSize?: number;
+  // Direct-to-bucket large-video upload progress, keyed by content hash (0..1).
+  uploadProgress?: Record<string, number>;
+  // Async upload failure from the pipeline (oversized/disallowed file,
+  // upload-intent error, direct-to-bucket PUT failure) — distinct from the
+  // client-side size pre-check below, which never reaches the pipeline.
+  uploadError?: string | null;
+  onDismissUploadError?: () => void;
 }
 
 type KindFilter = "all" | MediaKind;
@@ -97,6 +104,9 @@ export function MediaLibraryModal({
   referenceCountMap,
   localUrlMap = {},
   maxFileSize,
+  uploadProgress = {},
+  uploadError = null,
+  onDismissUploadError,
 }: MediaLibraryModalProps) {
   const [search, setSearch] = useState("");
   const [kindFilter, setKindFilter] = useState<KindFilter>("all");
@@ -111,7 +121,11 @@ export function MediaLibraryModal({
     const valid: File[] = [];
     const rejected: string[] = [];
     for (const file of files) {
-      if (file.size > maxFileSize) {
+      // MP4/WebM videos over the git-path cap route through the pipeline's
+      // direct-to-bucket upload instead of being rejected here — it applies
+      // its own (much larger) asset cap and reports its own errors.
+      const isBucketEligibleVideo = file.type === "video/mp4" || file.type === "video/webm";
+      if (file.size > maxFileSize && !isBucketEligibleVideo) {
         rejected.push(file.name);
       } else {
         valid.push(file);
@@ -161,10 +175,33 @@ export function MediaLibraryModal({
     setConfirmDelete(false);
   }
 
+  const uploadingHashes = Object.keys(uploadProgress);
+
   return (
     <div className="flex flex-col gap-4">
       <UploadZone onUpload={handleUpload} />
 
+      {/* Direct-to-bucket large-video upload progress */}
+      {uploadingHashes.length > 0 && (
+        <div className="space-y-1.5">
+          {uploadingHashes.map((hash) => {
+            const pct = Math.round((uploadProgress[hash] ?? 0) * 100);
+            return (
+              <div key={hash} className="flex items-center gap-2">
+                <span className="shrink-0 text-xs text-base-contrast-light">Uploading video…</span>
+                <div className="h-1.5 flex-1 overflow-hidden rounded-full bg-base-200">
+                  <div
+                    className="h-full rounded-full bg-primary transition-[width]"
+                    style={{ width: `${pct}%` }}
+                  />
+                </div>
+                <span className="w-9 shrink-0 text-right text-xs text-base-contrast-light">{pct}%</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
       {/* Sticky toolbar + confirmation */}
       <div className="sticky top-[-16px] z-10 -mx-6 space-y-3 bg-base px-6 pb-3 pt-4">
         <div className="flex items-center gap-2">
@@ -235,6 +272,15 @@ export function MediaLibraryModal({
             onDismiss={() => setRejectedFiles([])}
           />
         )}
+
+        {/* Async upload failure (oversized/disallowed file, upload-intent error,
+            direct-to-bucket PUT failure) — distinct from the client-side check above. */}
+        {uploadError && (
+          <UploadRejectionAlert
+            message={uploadError}
+            onDismiss={() => onDismissUploadError?.()}
+          />
+        )}
       </div>
 
       {/* Grid */}

package/src/hooks/useEditorPublish.ts

@@ -107,6 +107,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";

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>;