fablecut 1.14.0 → 1.15.0

package/app.js

@@ -438,6 +438,7 @@ function showClipCtxMenu(clientX, clientY, c) {
     item("Parent to a new null", "", parentSelectionToNull, locked ? "Locked — unlock to change" : null);
   item("Precompose", "", precomposeSelection, locked ? "Locked — unlock to change" : null);
   if (c.kind === "comp") item("Open composition", "", () => enterComp(c.compId, c));
+  if (c.mediaId || c.kind === "comp") item("Reveal in project", "", () => revealInProject(c));
   const linked = selectedClips().some((x) => x.linkGroup || x.linkedId);
   if (linked) item("Unlink audio / video", "Ctrl+L", toggleLinkSelected, locked ? "Locked — unlock to change" : null);
   else if (c.kind === "video" || c.kind === "audio") {
@@ -467,10 +468,13 @@ const SETTINGS_KEY = "fablecut-settings";
 const DEFAULT_SETTINGS = {
   linkSelect: false, // timeline ↔ project bin selection sync
   encodeProfile: null, // null = server default from encoding-profiles.json
+  exportKind: null, // "delivery" | "profile" — what the Export dialog last used
+  delivery: null, // last delivery spec used in the Export dialog (delivery.js)
   // WebCodecs has no CRF — bitrate (Mbps) + constant|variable mode
   webCodecsBitrateMbps: null, // null = auto from canvas size
   webCodecsBitrateMode: "variable", // "variable" | "constant"
   snapTargets: { clips: true, playhead: true, markers: true, inout: true, keyframes: false, frames: true },
+  useProxies: true, // play proxies (when a file has one) while editing; export always reads the original
 };
 let settings = { ...DEFAULT_SETTINGS };
 function loadSettings() {
@@ -529,6 +533,8 @@ const project = {
   untargetedTracks: [], // track ids edits skip (split, insert, ripple, close gap…)
   exportFrame: null, // optional {x,y,w,h} delivery crop inside width×height canvas
   encodeProfile: null, // optional fast-export profile id (overrides browser setting)
+  delivery: null, // optional delivery spec (delivery.js) — the default for exports, agents' included
+  outputs: null, // optional batch outputs: [{id, on, …delivery spec}] — one render, several files
   tracks: null, // optional [{id, kind, gain?, pan?}] — null means default V3…V1 + A1…A4
   master: null, // optional {gain} — master bus fader (dB)
   buses: [],    // submix buses [{id:"B1", name?, gain?, pan?, mute?, fx?}]; tracks[].out routes into one
@@ -757,6 +763,8 @@ const $ = (id) => document.getElementById(id);
 const els = {
   binList: $("binList"), binEmpty: $("binEmpty"), fileInput: $("fileInput"),
   binTabs: $("binTabs"), libList: $("libList"), toast: $("toast"),
+  binTools: $("binTools"), binSearch: $("binSearch"), binFilter: $("binFilter"), binSort: $("binSort"),
+  binSortDir: $("binSortDir"), binViewBtn: $("binViewBtn"), btnProxy: $("btnProxy"),
   preview: $("preview"), tcCurrent: $("tcCurrent"), tcTotal: $("tcTotal"),
   tcIo: $("tcIo"), tcIn: $("tcIn"), tcOut: $("tcOut"), tcDur: $("tcDur"),
   btnPlay: $("btnPlay"), inspector: $("inspector"),
@@ -1238,6 +1246,23 @@ function normalizeWorkArea(i, o, t0 = TIMELINE_START_TIME) {
   }
   return { inPoint, outPoint };
 }
+/* Project-bin media management: metadata, search / filter / sort, tags,
+   collections and usage live in media-lib.js (shared with the agent ops). */
+const MediaLib = self.FableCutMedia;
+const BIN_PREFS_KEY = "fablecut.binPrefs";
+const binView = (() => {
+  let saved = {};
+  try { saved = JSON.parse(localStorage.getItem(BIN_PREFS_KEY) || "{}") || {}; } catch { }
+  return {
+    q: "", filter: "",   // per session: search text and the "Show" filter
+    sort: MediaLib.SORT_KEYS.includes(saved.sort) ? saved.sort : "name",
+    dir: saved.dir === "desc" ? "desc" : "asc",
+    list: saved.list === true,   // list view: metadata columns
+  };
+})();
+function saveBinPrefs() {
+  try { localStorage.setItem(BIN_PREFS_KEY, JSON.stringify({ sort: binView.sort, dir: binView.dir, list: binView.list })); } catch { }
+}
 function getFolder(id) {
   return id ? project.folders.find((f) => f.id === id) : null;
 }
@@ -1261,17 +1286,20 @@ function normalizeFolders(list) {
 }
 function normalizeMediaEntry(m) {
   if (!m || typeof m !== "object") return m;
-  return { ...m, folderId: m.folderId || null };
+  const out = { ...m, folderId: m.folderId || null };
+  const tags = MediaLib.normalizeTags(m.tags);
+  if (tags.length) out.tags = tags; else delete out.tags;
+  if (out.favorite !== true) delete out.favorite;
+  return out;
 }
 function folderChildren(parentId) {
   return project.folders
     .filter((f) => (f.parentId || null) === (parentId || null))
     .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
 }
-function mediaInFolder(folderId) {
-  return project.media
-    .filter((m) => (m.folderId || null) === (folderId || null))
-    .sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: "base" }));
+function mediaInFolder(folderId, ctx) {
+  return MediaLib.sortMedia(project.media.filter((m) => (m.folderId || null) === (folderId || null)),
+    binView.sort, binView.dir, ctx);
 }
 /* True if ancestorId is the same as nodeId or an ancestor of nodeId. */
 function isSelfOrFolderAncestor(ancestorId, nodeId) {
@@ -1439,12 +1467,15 @@ function applyProject(data, opts = {}) {
     revision: data.revision || 0,
     folders: normalizeFolders(data.folders),
     media: (data.media || []).map(normalizeMediaEntry),
+    collections: MediaLib.normalizeCollections(data.collections, data.media || []),
     clips: data.clips || [],
     markers: normalizeMarkers(data.markers),
     inPoint: wa.inPoint,
     outPoint: wa.outPoint,
     exportFrame: normalizeExportFrame(data.exportFrame, data.width || 1280, data.height || 720),
     encodeProfile: data.encodeProfile || null,
+    delivery: data.delivery && typeof data.delivery === "object" ? data.delivery : null,
+    outputs: Array.isArray(data.outputs) ? data.outputs.filter((o) => o && typeof o === "object") : null,
     master: normalizeMaster(data.master),
     buses: normalizeBuses(data.buses),
     comps: (Array.isArray(data.comps) ? data.comps : []).filter((cp) => cp && cp.id).map((cp) => ({
@@ -1561,15 +1592,19 @@ function projectJSON() {
 }
 /** The project as it is loaded right now (an open comp's stand-in project, or the root). */
 function projectJSONHere() {
-  const { name, width, height, fps, background, revision, folders, media, clips, markers, inPoint, outPoint, disabledTracks, encodeProfile } = project;
+  const { name, width, height, fps, background, revision, folders, media, clips, markers, inPoint, outPoint, disabledTracks, encodeProfile, delivery, outputs } = project;
   const out = {
     name, width, height, fps, background, revision,
     panSchema: 1,
     folders: (folders || []).map(({ id, name, parentId, open }) =>
       ({ id, name, parentId: parentId || null, open: open !== false })),
     tracks: serializeTracks(),
-    media: media.filter((m) => !m.transient).map(({ id, name, kind, src, duration, width, height, folderId, derivedFrom, denoise }) => {
+    media: media.filter((m) => !m.transient).map((m) => {
+      const { id, name, kind, src, duration, width, height, folderId, derivedFrom, denoise } = m;
       const mo = { id, name, kind, src, duration, width, height, folderId: folderId || null };
+      for (const k of MediaLib.INFO_KEYS) if (m[k] != null) mo[k] = m[k];
+      if (m.favorite === true) mo.favorite = true;
+      if (m.tags && m.tags.length) mo.tags = m.tags.slice();
       if (derivedFrom) { mo.derivedFrom = derivedFrom; if (denoise) mo.denoise = denoise; }
       return mo;
     }),
@@ -1579,6 +1614,8 @@ function projectJSONHere() {
     outPoint: outPoint == null ? null : outPoint,
     disabledTracks: normalizeDisabledTracks(disabledTracks),
   };
+  const collections = MediaLib.normalizeCollections(project.collections, out.media);
+  if (collections.length) out.collections = collections;
   const locked = normalizeDisabledTracks(project.lockedTracks);
   const untargeted = normalizeDisabledTracks(project.untargetedTracks);
   if (locked.length) out.lockedTracks = locked;
@@ -1586,6 +1623,8 @@ function projectJSONHere() {
   const ef = getExportFrame();
   if (ef) out.exportFrame = ef;
   if (encodeProfile) out.encodeProfile = encodeProfile;
+  if (delivery) out.delivery = delivery;
+  if (outputs && outputs.length) out.outputs = outputs;
   const master = normalizeMaster(project.master);
   if (master) out.master = master;
   const buses = normalizeBuses(project.buses);
@@ -1596,10 +1635,23 @@ function projectJSONHere() {
 function listenSSE() {
   const es = new EventSource("/api/events");
   // Named events: "change" = project/media/library; "profiles" = encoding-profiles.json only
-  es.addEventListener("change", () => syncFromServer());
+  es.addEventListener("change", () => { noteActivity(); syncFromServer(); scheduleOfflineCheck(); });
+  es.addEventListener("proxy", (e) => onProxyEvent(e.data));
   es.addEventListener("export", (e) => {
+    noteActivity();
     try { runExportJob(JSON.parse(e.data)); } catch { }
   });
+  es.addEventListener("delivery-presets", () => {
+    fetchDeliveryInfo().then(() => {
+      if (els.exportSetup && !els.exportSetup.classList.contains("hidden")) {
+        const keep = els.exportProfileSel.value;
+        populateExportProfileSelect();
+        els.exportProfileSel.value = keep;
+        if (els.exportProfileSel.value !== keep) els.exportProfileSel.value = "d:" + Delivery.DEFAULT_PRESET;
+        syncExportChoiceUi(dlvSource);
+      }
+    });
+  });
   es.addEventListener("profiles", () => {
     fetchEncodeProfiles().then(() => {
       if (els.exportSetup && !els.exportSetup.classList.contains("hidden"))
@@ -1607,7 +1659,7 @@ function listenSSE() {
     });
   });
   // Legacy default "message" events (old servers that emit bare `data:`)
-  es.onmessage = () => syncFromServer();
+  es.onmessage = () => { noteActivity(); syncFromServer(); };
 }
 /* Pull the server's project if it moved past our revision (an external tool —
    e.g. Claude — wrote it). Our own saves land at our exact local revision, so
@@ -1646,7 +1698,7 @@ async function loadMediaMetadata(m) {
   if (m.kind === "svg") { await loadSvgMedia(m); return; }
   if (m.kind === "image") {
     const img = await loadImage(m.src);
-    runtime.mediaAux.set(m.id, { ...(runtime.mediaAux.get(m.id) || {}), img });
+    runtime.mediaAux.set(m.id, { ...(runtime.mediaAux.get(m.id) || {}), img, imgSrc: m.src });
     m.width = img.naturalWidth; m.height = img.naturalHeight;
     return;
   }
@@ -1673,6 +1725,9 @@ async function probeMissingMeta() {
   }
   if (changed) { renderBin(); scheduleSave(); }
   state.dirtyTimeline = true;
+  refreshMediaInfo();
+  scheduleOfflineCheck(0);
+  syncProxyButton();
 }
 function probeAV(src, kind) {
   return new Promise((resolve, reject) => {
@@ -1816,6 +1871,7 @@ async function importFiles(fileList) {
     added++;
   }
   renderBin(); scheduleSave();
+  refreshMediaInfo(addedMedia);
   if (!added && skipped)
     toast("Couldn't import — unsupported or unreadable file type");
   else if (skipped)
@@ -1894,12 +1950,24 @@ async function importFromUrl(url) {
 }
 
 function renderBin() {
-  els.binList.querySelectorAll(".bin-item, .bin-folder, .bin-drop-root, .comp-item").forEach((n) => n.remove());
+  els.binList.querySelectorAll(".bin-item, .bin-folder, .bin-drop-root, .comp-item, .bin-filterbar, .bin-colhead, .bin-noresult").forEach((n) => n.remove());
+  syncBinTools();
   const comps = project.comps || [];
   const empty = !project.media.length && !project.folders.length && !comps.length;
   els.binEmpty.style.display = empty ? "" : "none";
+  els.binList.classList.toggle("list-view", binView.list && !empty);
   if (empty) return;
-  for (const comp of comps) els.binList.appendChild(makeCompItem(comp));
+  const ctx = binCtx();
+  const flat = !!(binView.q.trim() || binView.filter);   // searching / filtering → one flat list of hits
+  if (mediaOffline.size && binView.filter !== "offline") {
+    const warn = document.createElement("div");
+    warn.className = "bin-filterbar bin-offline-bar";
+    warn.innerHTML = `<span>⚠ ${mediaOffline.size} file${mediaOffline.size === 1 ? " is" : "s are"} offline</span>
+      <button type="button" class="btn tiny" data-show>Show</button><button type="button" class="btn tiny accent" data-relink>Relink…</button>`;
+    warn.querySelector("[data-show]").addEventListener("click", () => setBinFilter("offline"));
+    warn.querySelector("[data-relink]").addEventListener("click", () => openRelinkDialog());
+    els.binList.appendChild(warn);
+  }
 
   const clearBinDropHints = () => {
     els.binList.querySelectorAll(".bin-drop-over").forEach((n) => n.classList.remove("bin-drop-over"));
@@ -1956,26 +2024,46 @@ function renderBin() {
 
   const makeMediaItem = (m, depth) => {
     const item = document.createElement("div");
-    item.className = "bin-item";
+    const offline = isMediaOffline(m.id);
+    item.className = "bin-item" + (binView.list ? " bin-row" : "") + (offline ? " offline" : "");
     item.draggable = true;
     item.dataset.mediaId = m.id;
-    item.style.setProperty("--bin-depth", depth);
+    item.style.setProperty("--bin-depth", flat ? 0 : depth);
     const aux = runtime.mediaAux.get(m.id) || {};
     const icon = mediaKindIcon(m.kind, "🎞");
     const thumbSrc = aux.thumb || (m.kind === "image" || m.kind === "svg" ? m.src : null);
-    item.innerHTML = `
-      <div class="bin-thumb"></div>
-      <div class="bin-meta">
-        <div class="bin-name"></div>
-        <div class="bin-sub">${m.kind}${m.duration ? " · " + fmt(m.duration) : ""}</div>
-      </div>
-      <span class="bin-del" title="Remove (and its clips)">✕</span>`;
+    const uses = ctx.usage.get(m.id) || 0;
+    const folder = flat && m.folderId ? getFolder(m.folderId) : null;
+    const usesHtml = `<button type="button" class="bin-uses${uses ? "" : " none"}" title="${uses ? `Used ${uses}× — click to find every instance` : "Not used on the timeline"}">${uses}</button>`;
+    const favHtml = `<button type="button" class="bin-fav${m.favorite ? " on" : ""}" title="${m.favorite ? "Favorite — click to unstar" : "Mark as favorite"}" aria-pressed="${!!m.favorite}">${m.favorite ? "★" : "☆"}</button>`;
+    if (binView.list) {
+      const cell = (v, cls = "") => `<span class="bin-cell${cls}">${escapeHtml(v || "—")}</span>`;
+      item.innerHTML = `
+        <span class="bin-cell bin-cell-name">${favHtml}<span class="bin-thumb sm"></span>${offline ? `<span class="bin-offline" title="The file is missing — right-click → Relink…">OFFLINE</span>` : ""}<span class="bin-name"></span></span>
+        ${cell(MediaLib.fmtDur(m.duration), " num c-duration")}${cell(MediaLib.fmtRes(m), " num c-resolution")}${cell(MediaLib.fmtFps(m.fps), " num c-fps")}
+        ${cell(m.codec, " c-codec")}${cell(MediaLib.fmtAudio(m), " c-audio")}${cell(MediaLib.fmtSize(m.size), " num c-size")}
+        <span class="bin-cell c-proxy">${proxyBadgeHtml(m) || escapeHtml(m.kind === "video" ? "—" : "")}</span>
+        <span class="bin-cell num c-usage">${usesHtml}</span>
+        <span class="bin-del" title="Remove (and its clips)">✕</span>`;
+    } else {
+      const sub = [folder ? "📁 " + folder.name : "", m.kind, m.duration ? fmt(m.duration) : "", MediaLib.fmtRes(m), m.fps ? MediaLib.fmtFps(m.fps) + " fps" : ""]
+        .filter(Boolean).join(" · ");
+      item.innerHTML = `
+        <div class="bin-thumb"></div>
+        <div class="bin-meta">
+          <div class="bin-name"></div>
+          <div class="bin-sub">${offline ? `<span class="bin-offline" title="The file is missing — right-click → Relink…">OFFLINE</span> ` : ""}${escapeHtml(sub)}</div>
+          ${m.tags && m.tags.length ? `<div class="bin-tags">${m.tags.map((t) => `<span class="bin-tag">#${escapeHtml(t)}</span>`).join("")}</div>` : ""}
+        </div>
+        <div class="bin-side">${favHtml}${usesHtml}${proxyBadgeHtml(m)}</div>
+        <span class="bin-del" title="Remove (and its clips)">✕</span>`;
+    }
     const thumbEl = item.querySelector(".bin-thumb");
     if (thumbSrc) thumbEl.style.backgroundImage = `url(${JSON.stringify(thumbSrc)})`;
     else thumbEl.textContent = icon;
     const nameEl = item.querySelector(".bin-name");
     nameEl.textContent = m.name;
-    nameEl.title = m.name;
+    item.title = [m.name, offline ? "⚠ Offline: " + decodeURIComponent(String(m.src).split("?")[0]) + " is missing — right-click → Relink…" : "", MediaLib.describe(m), m.tags && m.tags.length ? m.tags.map((t) => "#" + t).join(" ") : ""].filter(Boolean).join("\n");
     item.addEventListener("dragstart", (e) => {
       runtime.binDragFolderId = null;
       e.dataTransfer.setData("text/fablecut-media", m.id);
@@ -1990,13 +2078,14 @@ function renderBin() {
     // Don't bubble to the root drop zone while hovering a media row
     item.addEventListener("dragover", (e) => e.stopPropagation());
     item.addEventListener("click", (e) => {
-      if (e.target.closest(".bin-del")) return;
+      if (e.target.closest(".bin-del, .bin-fav, .bin-uses")) return;
       if (e.ctrlKey || e.metaKey) return; // reserved for import
       if (!getSetting("linkSelect")) return;
       e.preventDefault();
       selectClipsByMediaId(m.id);
     });
-    item.addEventListener("dblclick", () => {
+    item.addEventListener("dblclick", (e) => {
+      if (e.target.closest(".bin-del, .bin-fav, .bin-uses")) return;
       // Double-click loads Source (single-click only selects when link-select is on).
       if (state.source.mediaId === m.id) {
         setMonitorMode("source");
@@ -2005,17 +2094,16 @@ function renderBin() {
       }
       if (getSetting("linkSelect")) flashMonitorAttention();
     });
+    item.addEventListener("contextmenu", (e) => { e.preventDefault(); e.stopPropagation(); showMediaMenu(e.clientX, e.clientY, m); });
+    item.querySelector(".bin-fav").addEventListener("click", (e) => { e.stopPropagation(); setMediaFavorite([m.id], !m.favorite); });
+    item.querySelector(".bin-uses").addEventListener("click", (e) => {
+      e.stopPropagation();
+      const r = e.currentTarget.getBoundingClientRect();
+      showMediaInstances(m, r.left, r.bottom + 4);
+    });
     item.querySelector(".bin-del").addEventListener("click", (e) => {
       e.stopPropagation();
-      if (state.compCtx && (state.compCtx.root.clips || []).some((c) => c.mediaId === m.id)) { toast("It's used on the main timeline — go back to Main to delete it"); return; }
-      pushUndo(JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [], media: project.media }));   // undo brings the media back too
-      project.media = project.media.filter((x) => x.id !== m.id);
-      project.clips = project.clips.filter((c) => c.mediaId !== m.id);
-      // and its clips inside comps (and on the main timeline while a comp is open)
-      project.comps = (project.comps || []).map((cp) => ({ ...cp, clips: (cp.clips || []).filter((c) => c.mediaId !== m.id) }));
-      runtime.compGen = (runtime.compGen || 0) + 1;
-      if (state.source.mediaId === m.id) clearSource();
-      renderBin(); scheduleSave(); renderInspector();
+      removeMediaFromBin(m);
     });
     return item;
   };
@@ -2074,20 +2162,784 @@ function renderBin() {
       els.binList.appendChild(row);
       if (f.open) renderLevel(f.id, depth + 1);
     }
-    for (const m of mediaInFolder(parentId)) els.binList.appendChild(makeMediaItem(m, depth));
+    for (const m of mediaInFolder(parentId, ctx)) els.binList.appendChild(makeMediaItem(m, depth));
   };
 
-  renderLevel(null, 0);
-
-  // Root drop zone at the bottom so items can be moved out of folders
-  const root = document.createElement("div");
-  root.className = "bin-drop-root";
-  root.textContent = "Drop here to move to root";
-  bindFolderDropTarget(root, null);
-  els.binList.appendChild(root);
+  if (flat) {
+    const hits = MediaLib.query(project.media, binView, ctx);
+    els.binList.appendChild(makeFilterBar(hits.length));
+    if (binView.list) els.binList.appendChild(makeColumnHead());
+    const q = binView.q.trim().toLowerCase();
+    if (!binView.filter) for (const comp of comps) if (q && String(comp.name).toLowerCase().includes(q)) els.binList.appendChild(makeCompItem(comp));
+    for (const m of hits) els.binList.appendChild(makeMediaItem(m, 0));
+    if (!hits.length) {
+      const none = document.createElement("div");
+      none.className = "bin-noresult";
+      none.textContent = "No media matches.";
+      els.binList.appendChild(none);
+    }
+  } else {
+    if (binView.list) els.binList.appendChild(makeColumnHead());
+    for (const comp of comps) els.binList.appendChild(makeCompItem(comp));
+    renderLevel(null, 0);
+    // Root drop zone at the bottom so items can be moved out of folders
+    const root = document.createElement("div");
+    root.className = "bin-drop-root";
+    root.textContent = "Drop here to move to root";
+    bindFolderDropTarget(root, null);
+    els.binList.appendChild(root);
+  }
   syncBinSelectionFromTimeline();
 }
 
+/* ── Project bin: media management ──
+   Search, the Show filter, sort, list view, favorites, tags, collections,
+   usage counts, find instances, reveal in project, server-probed metadata. */
+/** The whole document as it stands now — with an open comp's live clips written into it. */
+function usageDoc() {
+  if (!state.compCtx) return project;
+  const id = compCtxId();
+  return {
+    media: project.media,
+    clips: state.compCtx.root.clips || [],
+    comps: (project.comps || []).map((c) => (c.id === id ? { ...c, clips: project.clips } : c)),
+  };
+}
+function binCtx() {
+  return {
+    usage: MediaLib.usageCounts(usageDoc()), collections: project.collections || [],
+    extraFilter: (m, f) => (f === "offline" ? isMediaOffline(m.id)
+      : f === "proxy" ? !!proxyOf(m) : f === "noproxy" ? m.kind === "video" && !proxyOf(m) : true),
+  };
+}
+function getCollection(id) { return (project.collections || []).find((c) => c.id === id) || null; }
+
+/* Fill the Show / Sort controls from the project (tags and collections change). */
+function syncBinTools() {
+  const tools = els.binTools;
+  if (!tools) return;
+  const tags = MediaLib.allTags(project.media);
+  const cols = project.collections || [];
+  // a filter whose tag / collection is gone falls back to everything
+  const f = binView.filter;
+  if ((f.startsWith("tag:") && !tags.some((t) => t.toLowerCase() === f.slice(4).toLowerCase())) ||
+    (f.startsWith("col:") && !getCollection(f.slice(4)))) binView.filter = "";
+  const opt = (v, label) => `<option value="${escapeHtml(v)}"${v === binView.filter ? " selected" : ""}>${escapeHtml(label)}</option>`;
+  const html = opt("", "All media") + opt("fav", "★ Favorites") + opt("used", "Used in the edit") + opt("unused", "Unused") +
+    (mediaOffline.size || binView.filter === "offline" ? opt("offline", `⚠ Offline (${mediaOffline.size})`) : "") +
+    (project.media.some((m) => m.kind === "video") ? opt("proxy", "Has a proxy") + opt("noproxy", "Video without a proxy") : "") +
+    `<optgroup label="Kind">${MediaLib.KINDS.map((k) => opt("kind:" + k, k[0].toUpperCase() + k.slice(1))).join("")}</optgroup>` +
+    (cols.length ? `<optgroup label="Collections">${cols.map((c) => opt("col:" + c.id, c.name + ` (${c.media.length})`)).join("")}</optgroup>` : "") +
+    (tags.length ? `<optgroup label="Tags">${tags.map((t) => opt("tag:" + t, "#" + t)).join("")}</optgroup>` : "");
+  if (els.binFilter.innerHTML !== html) els.binFilter.innerHTML = html;
+  els.binFilter.value = binView.filter;
+  els.binFilter.classList.toggle("on", !!binView.filter);
+  els.binSort.value = binView.sort;
+  els.binSortDir.textContent = binView.dir === "desc" ? "↓" : "↑";
+  els.binSortDir.title = binView.dir === "desc" ? "Descending — click for ascending" : "Ascending — click for descending";
+  els.binViewBtn.classList.toggle("on", binView.list);
+  els.binViewBtn.title = binView.list ? "Thumbnail view" : "List view: metadata columns";
+  if (els.binSearch.value !== binView.q && document.activeElement !== els.binSearch) els.binSearch.value = binView.q;
+}
+function setBinFilter(filter) {
+  binView.filter = filter || "";
+  renderBin();
+}
+/* The strip above search / filter results: how many, the active collection's actions, Clear. */
+function makeFilterBar(n) {
+  const bar = document.createElement("div");
+  bar.className = "bin-filterbar";
+  const col = binView.filter.startsWith("col:") ? getCollection(binView.filter.slice(4)) : null;
+  bar.innerHTML = `<span class="bin-filter-count">${n} of ${project.media.length}</span>` +
+    (col ? `<span class="bin-filter-name" title="Collection">▣ ${escapeHtml(col.name)}</span>
+      <button type="button" class="btn tiny" data-col-rename>Rename</button>
+      <button type="button" class="btn tiny" data-col-delete title="Delete the collection (keeps the media)">Delete</button>` : "") +
+    (binView.filter === "offline" && mediaOffline.size ? `<button type="button" class="btn tiny accent" data-relink-all>Relink…</button>` : "") +
+    `<button type="button" class="btn tiny" data-clear title="Show everything (Esc in the search box)">Clear</button>`;
+  bar.querySelector("[data-relink-all]")?.addEventListener("click", () => openRelinkDialog());
+  bar.querySelector("[data-clear]").addEventListener("click", () => { binView.q = ""; els.binSearch.value = ""; setBinFilter(""); });
+  if (col) {
+    bar.querySelector("[data-col-rename]").addEventListener("click", (e) => {
+      const r = e.currentTarget.getBoundingClientRect();
+      promptBinText(r.left, r.bottom + 4, "Collection name", col.name, (name) => { col.name = name.slice(0, 80); scheduleSave(); renderBin(); });
+    });
+    bar.querySelector("[data-col-delete]").addEventListener("click", () => {
+      project.collections = (project.collections || []).filter((c) => c.id !== col.id);
+      binView.filter = "";
+      scheduleSave(); renderBin();
+      toast(`Deleted the collection “${col.name}” — its media stay in the bin`);
+    });
+  }
+  return bar;
+}
+/* List view header: click a column to sort by it (again to flip the direction). */
+const BIN_COLUMNS = [["name", "Name"], ["duration", "Duration"], ["resolution", "Resolution"], ["fps", "FPS"],
+  ["codec", "Codec"], ["audio", "Audio"], ["size", "Size"], ["proxy", "Proxy"], ["usage", "Uses"]];
+function makeColumnHead() {
+  const head = document.createElement("div");
+  head.className = "bin-colhead bin-row";
+  for (const [key, label] of BIN_COLUMNS) {
+    if (key === "proxy") { const sp = document.createElement("span"); sp.className = "bin-cell c-proxy"; sp.textContent = label; head.appendChild(sp); continue; }
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "bin-cell c-" + key + (key === "name" ? " bin-cell-name" : "") + (["duration", "resolution", "fps", "size", "usage"].includes(key) ? " num" : "") + (binView.sort === key ? " on" : "");
+    b.textContent = label + (binView.sort === key ? (binView.dir === "desc" ? " ↓" : " ↑") : "");
+    b.addEventListener("click", () => {
+      if (binView.sort === key) binView.dir = binView.dir === "desc" ? "asc" : "desc";
+      else { binView.sort = key; binView.dir = key === "name" || key === "codec" ? "asc" : "desc"; }
+      saveBinPrefs(); renderBin();
+    });
+    head.appendChild(b);
+  }
+  head.appendChild(document.createElement("span"));
+  return head;
+}
+
+/* Server-probed metadata (fps, codecs, channels, sample rate, size) for media
+   that has none yet. Without ffprobe the server still answers the size. */
+let mediaInfoBusy = false, mediaInfoAgain = false;
+async function refreshMediaInfo(list) {
+  if (!state.connected) return;
+  if (mediaInfoBusy) { mediaInfoAgain = true; return; }   // run once more when this one ends
+  // blob: srcs are files a hosted editor reads from a folder (a local session's own blobs are transient)
+  const todo = (list || project.media).filter((m) => !m.transient && m.size == null && (isLocalSrc(m.src) || /^blob:/.test(m.src || "")));
+  if (!todo.length) return;
+  mediaInfoBusy = true;
+  try {
+    const res = await fetch("/api/media-info", {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ srcs: [...new Set(todo.map((m) => m.src))] }),
+    });
+    if (!res.ok) return;
+    const { info } = await res.json();
+    let changed = false;
+    for (const m of project.media) {
+      const i = info && info[m.src];
+      if (!i) continue;
+      for (const k of MediaLib.INFO_KEYS) if (i[k] != null && m[k] !== i[k]) { m[k] = i[k]; changed = true; }
+      if (!(m.width > 0) && i.width > 0) { m.width = i.width; m.height = i.height; changed = true; }
+    }
+    if (changed) { renderBin(); scheduleSave(); if (state.selId) renderInspector(); }
+  } catch { } finally {
+    mediaInfoBusy = false;
+    // files imported (or a Media info opened) meanwhile: everything still without details
+    if (mediaInfoAgain) { mediaInfoAgain = false; refreshMediaInfo(); }
+  }
+}
+
+function setMediaFavorite(ids, on) {
+  for (const id of ids) {
+    const m = getMedia(id);
+    if (!m) continue;
+    if (on) m.favorite = true; else delete m.favorite;
+  }
+  scheduleSave(); renderBin();
+}
+function setMediaTags(m, tags) {
+  const t = MediaLib.normalizeTags(tags);
+  if (t.length) m.tags = t; else delete m.tags;
+  scheduleSave(); renderBin();
+}
+function addToCollection(colId, mediaId, on = true) {
+  const col = getCollection(colId);
+  if (!col) return;
+  if (on && !col.media.includes(mediaId)) col.media.push(mediaId);
+  if (!on) col.media = col.media.filter((id) => id !== mediaId);
+  scheduleSave(); renderBin();
+}
+function newCollection(name, mediaIds) {
+  const col = { id: "col_" + uid(), name: String(name).trim().slice(0, 80) || "Collection", media: [...new Set(mediaIds || [])] };
+  project.collections = [...(project.collections || []), col];
+  scheduleSave(); renderBin();
+  return col;
+}
+function removeMediaFromBin(m) {
+  if (state.compCtx && (state.compCtx.root.clips || []).some((c) => c.mediaId === m.id)) { toast("It's used on the main timeline — go back to Main to delete it"); return; }
+  pushUndo(JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [], media: project.media }));   // undo brings the media back too
+  project.media = project.media.filter((x) => x.id !== m.id);
+  project.clips = project.clips.filter((c) => c.mediaId !== m.id);
+  // and its clips inside comps (and on the main timeline while a comp is open)
+  project.comps = (project.comps || []).map((cp) => ({ ...cp, clips: (cp.clips || []).filter((c) => c.mediaId !== m.id) }));
+  runtime.compGen = (runtime.compGen || 0) + 1;
+  if (state.source.mediaId === m.id) clearSource();
+  renderBin(); scheduleSave(); renderInspector();
+}
+
+/* A one-line text prompt as a popover (Enter saves, Esc cancels). */
+function promptBinText(x, y, label, value, onOk, opts = {}) {
+  const pop = document.createElement("div");
+  pop.className = "ctx-menu bin-pop";
+  pop.innerHTML = `<label class="bin-pop-label">${escapeHtml(label)}</label>
+    <input type="text" class="bin-pop-input" maxlength="${opts.max || 80}" spellcheck="false">
+    ${opts.hint ? `<div class="bin-pop-hint">${escapeHtml(opts.hint)}</div>` : ""}
+    <div class="bin-pop-chips"></div>
+    <div class="bin-pop-btns"><button type="button" class="btn tiny" data-cancel>Cancel</button><button type="button" class="btn tiny accent" data-ok>${escapeHtml(opts.ok || "OK")}</button></div>`;
+  const input = pop.querySelector("input");
+  input.value = value || "";
+  if (opts.placeholder) input.placeholder = opts.placeholder;
+  const chips = pop.querySelector(".bin-pop-chips");
+  for (const c of opts.chips || []) {
+    const b = document.createElement("button");
+    b.type = "button"; b.className = "bin-tag chip"; b.textContent = "#" + c;
+    b.title = "Add or remove this tag";
+    b.addEventListener("click", () => {
+      const cur = MediaLib.normalizeTags(input.value);
+      const has = cur.some((t) => t.toLowerCase() === c.toLowerCase());
+      input.value = (has ? cur.filter((t) => t.toLowerCase() !== c.toLowerCase()) : [...cur, c]).join(", ");
+      input.focus();
+    });
+    chips.appendChild(b);
+  }
+  if (!chips.children.length) chips.remove();
+  const ok = () => {
+    const v = input.value.trim();
+    if (!v && !opts.allowEmpty) { input.focus(); return; }
+    hideTrackCtxMenu();
+    onOk(v);
+  };
+  pop.querySelector("[data-ok]").addEventListener("click", ok);
+  pop.querySelector("[data-cancel]").addEventListener("click", () => hideTrackCtxMenu());
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") { e.preventDefault(); ok(); }
+    else if (e.key === "Escape") { e.preventDefault(); hideTrackCtxMenu(); }
+    e.stopPropagation();
+  });
+  showPopover(pop, x, y);
+  input.focus(); input.select();
+}
+
+/* Right-click a media item in the Project bin. */
+function showMediaMenu(x, y, m) {
+  hideTrackCtxMenu();
+  closeBinCtxMenu();
+  const menu = document.createElement("div");
+  menu.className = "ctx-menu";
+  const uses = MediaLib.placements(usageDoc(), m.id).length;
+  const item = (label, run, why, keys) => {
+    const b = document.createElement("button");
+    b.type = "button"; b.className = "ctx-item";
+    b.innerHTML = `<span>${escapeHtml(label)}</span>` + (keys ? `<kbd>${escapeHtml(keys)}</kbd>` : "");
+    if (why) { b.disabled = true; b.title = why; } else b.addEventListener("click", () => { hideTrackCtxMenu(); run(); });
+    menu.appendChild(b);
+    return b;
+  };
+  const sep = () => { const d = document.createElement("div"); d.className = "ctx-sep"; menu.appendChild(d); };
+  item("Open in Source", () => loadSourceFromMedia(m));
+  item(`Find timeline instances (${uses})`, () => showMediaInstances(m, x, y), uses ? null : "Not used on the timeline");
+  item("Media info…", () => showMediaInfo(m, x, y));
+  item(isMediaOffline(m.id) ? "Relink…" : "Relink to another copy…", () => openRelinkDialog([m]), state.connected ? null : "Needs the FableCut server");
+  item("Replace file…", () => replaceMediaFile(m), state.connected ? null : "Needs the FableCut server");
+  if (m.kind === "video") {
+    const ps = proxyStatus.get(m.id);
+    const why = !state.connected ? "Needs the FableCut server" : !state.ffmpeg ? "Needs ffmpeg on the server's PATH" : isMediaOffline(m.id) ? "The file is offline" : null;
+    if (ps && (ps.state === "ready" || ps.state === "running" || ps.state === "queued")) item(ps.state === "ready" ? "Delete proxy" : "Stop making the proxy", () => deleteProxies([m]));
+    else {
+      item("Create proxy (540p)", () => createProxies([m], 540), why);
+      item("Create proxy (720p)", () => createProxies([m], 720), why);
+    }
+  }
+  sep();
+  item(m.favorite ? "Remove from favorites" : "Add to favorites", () => setMediaFavorite([m.id], !m.favorite));
+  item("Tags…", () => promptBinText(x, y, `Tags for ${m.name}`, (m.tags || []).join(", "), (v) => setMediaTags(m, v),
+    { allowEmpty: true, max: 400, ok: "Save", placeholder: "interview, b-roll, day 1", hint: "Comma-separated. Search #tag to find them.",
+      chips: MediaLib.allTags(project.media) }));
+  for (const col of project.collections || []) {
+    const inIt = col.media.includes(m.id);
+    item(inIt ? `Remove from “${col.name}”` : `Add to “${col.name}”`, () => addToCollection(col.id, m.id, !inIt));
+  }
+  item("New collection…", () => promptBinText(x, y, "New collection", "", (name) => {
+    const col = newCollection(name, [m.id]);
+    toast(`Added ${m.name} to the collection “${col.name}”`);
+  }, { placeholder: "Selects, Interviews…", ok: "Create" }));
+  sep();
+  item("Remove from project", () => removeMediaFromBin(m));
+  document.body.appendChild(menu);
+  menu.id = "trackCtxMenu";
+  trackCtxMenu = menu;
+  menu.style.left = Math.max(6, Math.min(x, innerWidth - menu.offsetWidth - 6)) + "px";
+  menu.style.top = Math.max(6, Math.min(y, innerHeight - menu.offsetHeight - 6)) + "px";
+}
+
+/* Media info: everything the bin knows about one file. */
+function showMediaInfo(m, x, y) {
+  const doc = usageDoc();
+  const uses = MediaLib.placements(doc, m.id);
+  const folder = m.folderId ? getFolder(m.folderId) : null;
+  const cols = (project.collections || []).filter((c) => c.media.includes(m.id)).map((c) => c.name);
+  const audio = m.audioChannels == null ? "" : m.audioChannels === 0 ? "none" :
+    [m.audioCodec, MediaLib.fmtAudio(m)].filter(Boolean).join(" · ");
+  const rows = [
+    ["Kind", m.kind], ["File", decodeURIComponent(String(m.src || "").split("?")[0]) + (isMediaOffline(m.id) ? " — MISSING (offline)" : "")],
+    ["Duration", m.duration > 0 ? MediaLib.fmtDur(m.duration) + ` (${(+m.duration).toFixed(3)} s)` : ""],
+    ["Resolution", MediaLib.fmtRes(m)], ["Frame rate", m.fps ? MediaLib.fmtFps(m.fps) + " fps" : ""],
+    ["Video codec", m.kind === "video" ? m.codec : ""], ["Format", m.kind !== "video" && m.codec ? m.codec : ""],
+    ["Audio", audio], ["Bitrate", m.bitrate ? (m.bitrate >= 1e6 ? (m.bitrate / 1e6).toFixed(1) + " Mb/s" : Math.round(m.bitrate / 1000) + " kb/s") : ""],
+    ["Size", MediaLib.fmtSize(m.size)], ["Used", uses.length ? uses.length + "×" : "not used"],
+    ["Proxy", m.kind !== "video" ? "" : (() => {
+      const ps = proxyStatus.get(m.id);
+      if (!ps) return "none";
+      if (ps.state === "ready") return `${ps.width ? ps.width + "×" : ""}${ps.height} · ${MediaLib.fmtSize(ps.size)}${proxiesOn() ? " · playing it" : " · Proxy button off"}`;
+      return ps.state === "running" ? `making it — ${Math.round((ps.progress || 0) * 100)}%` : ps.state + (ps.error ? ": " + ps.error : "");
+    })()],
+    ["Folder", folder ? folder.name : ""], ["Tags", (m.tags || []).map((t) => "#" + t).join(" ")],
+    ["Collections", cols.join(", ")], ["Favorite", m.favorite ? "★ yes" : ""],
+  ].filter(([, v]) => v);
+  const pop = document.createElement("div");
+  pop.className = "ctx-menu bin-pop bin-info";
+  pop.innerHTML = `<div class="bin-pop-title"></div><table>${rows.map(([k, v]) => `<tr><th>${escapeHtml(k)}</th><td>${escapeHtml(v)}</td></tr>`).join("")}</table>` +
+    (m.size == null && state.connected ? `<div class="bin-pop-hint">Reading the file's details…</div>` : "");
+  pop.querySelector(".bin-pop-title").textContent = m.name;
+  showPopover(pop, x, y);
+  if (m.size == null) refreshMediaInfo([m]);
+}
+
+/* Find all timeline instances: every placement (main timeline and inside comps); click one to go there. */
+function showMediaInstances(m, x, y) {
+  const list = MediaLib.placements(usageDoc(), m.id);
+  if (!list.length) { toast(`${m.name} isn't used on the timeline`); return; }
+  // select the instances on the timeline that is open now
+  const here = compCtxId();
+  const local = list.filter((p) => p.comp === here).map((p) => p.clipId);
+  if (local.length) selectClipsByMediaId(m.id);
+  const pop = document.createElement("div");
+  pop.className = "ctx-menu bin-pop bin-instances";
+  pop.innerHTML = `<div class="bin-pop-title"></div><div class="bin-pop-hint">${list.length} instance${list.length === 1 ? "" : "s"} — click one to jump to it</div>`;
+  pop.querySelector(".bin-pop-title").textContent = m.name;
+  for (const p of list) {
+    const b = document.createElement("button");
+    b.type = "button"; b.className = "ctx-item";
+    b.innerHTML = `<span>${escapeHtml(p.comp ? `▣ ${p.compName}` : "Main")} · ${escapeHtml(p.track)}</span><kbd>${fmt(p.start)} → ${fmt(p.start + p.duration)}</kbd>`;
+    b.addEventListener("click", () => { goToPlacement(p); });
+    pop.appendChild(b);
+  }
+  showPopover(pop, x, y);
+}
+function goToPlacement(p) {
+  const here = compCtxId();
+  if (p.comp !== here) {
+    if (state.compCtx) exitComp(state.compCtx.path.length);
+    if (p.comp) enterComp(p.comp);
+  }
+  const c = getClip(p.clipId);
+  if (!c) return;
+  if (isSourceMode()) setMonitorMode("program");
+  setSelection([...withLinked([c])].map((x) => x.id), c.id);
+  setTime(c.start);
+  revealTime(c.start);
+}
+
+/* Reveal in project: show a clip's media (or comp) in the Project bin. */
+function revealInProject(c) {
+  const id = c.kind === "comp" ? null : c.mediaId;
+  if (state.binTab !== "project") setBinTab("project");
+  let sel;
+  if (id) {
+    const m = getMedia(id);
+    if (!m) { toast("Its media is no longer in the project"); return; }
+    if ((binView.q || binView.filter) && !MediaLib.query([m], binView, binCtx()).length) { binView.q = ""; binView.filter = ""; }
+    for (let f = getFolder(m.folderId); f; f = getFolder(f.parentId)) f.open = true;
+    renderBin();
+    sel = `.bin-item[data-media-id="${CSS.escape(id)}"]`;
+  } else if (c.compId) {
+    binView.q = ""; binView.filter = "";
+    renderBin();
+    sel = `.comp-item[data-comp-id="${CSS.escape(c.compId)}"]`;
+  }
+  const el = sel && els.binList.querySelector(sel);
+  if (!el) return;
+  el.scrollIntoView({ block: "nearest" });
+  el.classList.remove("bin-flash");
+  void el.offsetWidth;
+  el.classList.add("bin-flash");
+}
+
+/* ── Offline media, relink and replace ──
+   A file is offline when its src names nothing under media/ or library/ (it was
+   moved, renamed or deleted). Its clips stay on the timeline and draw a "Media
+   offline" slate until it is relinked: pointed at the same footage somewhere
+   else (clips keep their In points). Replace puts a different file behind the
+   media entry (a new render): clips keep their timing, trimmed to fit. */
+const mediaOffline = new Set();   // media ids whose file is missing (runtime only, re-checked on every change)
+function isMediaOffline(id) { return !!id && mediaOffline.has(id); }
+const isLocalSrc = (src) => /^\/(media|library)\//.test(String(src || ""));
+let offlineCheckTimer = null, offlineChecking = false;
+function scheduleOfflineCheck(delay = 300) {
+  clearTimeout(offlineCheckTimer);
+  offlineCheckTimer = setTimeout(() => { checkOffline(); refreshProxyStatus(); }, delay);
+}
+async function checkOffline() {
+  if (!state.connected || offlineChecking) return;
+  const list = project.media.filter((m) => !m.transient && (isLocalSrc(m.src) || /^blob:/.test(m.src || "")));
+  offlineChecking = true;
+  try {
+    const res = await fetch("/api/media-info", {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ srcs: [...new Set(list.map((m) => m.src))], stat: true }),
+    });
+    if (!res.ok) return;
+    const { info } = await res.json();
+    const was = new Set(mediaOffline);
+    mediaOffline.clear();
+    for (const m of list) if (info && info[m.src] === null) mediaOffline.add(m.id);
+    // a file that came back (put back, or relinked by an agent): reload what was cached from it
+    for (const id of was) if (!mediaOffline.has(id)) { const m = getMedia(id); if (m) reloadMediaSource(m); }
+    const changed = was.size !== mediaOffline.size || [...was].some((id) => !mediaOffline.has(id));
+    if (changed) {
+      renderBin(); state.dirtyTimeline = true;
+      const fresh = [...mediaOffline].filter((id) => !was.has(id));
+      if (fresh.length) toast(`${fresh.length === 1 ? `“${getMedia(fresh[0])?.name}” is` : fresh.length + " files are"} offline — right-click it in the bin → Relink…`);
+    }
+  } catch { } finally { offlineChecking = false; }
+}
+/* Everything cached from a media file (players, picture, waveform, thumbnail) is dropped and read again. */
+function reloadMediaSource(m, oldSrc) {
+  // a proxy belongs to a file, not to the entry: the old file's must not stand in for the new one
+  const proxySrc = proxyStatus.get(m.id)?.src;
+  proxyStatus.delete(m.id);
+  for (const [id, el] of runtime.clipEls)
+    if (el._fcSrc === m.src || (oldSrc && el._fcSrc === oldSrc) || (proxySrc && el._fcSrc === proxySrc)) releaseClipEl(id);
+  runtime.mediaAux.delete(m.id);
+  runtime.wavePeaks.delete(m.id);
+  if (state.source.mediaId === m.id) { const sm = m; clearSource(); loadSourceFromMedia(sm); }
+  seekMediaWhilePaused();   // fresh players start at 0 — park them on the playhead
+  loadMediaMetadata(m).then(() => {
+    if (m.kind === "video") grabThumb(m).catch(() => { });
+    ensureWave(m);
+    seekMediaWhilePaused();
+    renderBin(); state.dirtyTimeline = true;
+  }).catch(() => { });
+  if (m.kind === "video") refreshProxyStatus();   // the new file may have a proxy of its own
+}
+
+/** Point a media entry at another file. mode "relink" (same footage) or "replace" (a new file). */
+async function setMediaSource(m, src, mode, name) {
+  const oldSrc = m.src, oldDur = m.duration;
+  pushUndo(JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [], media: project.media }));
+  m.src = src;
+  for (const k of MediaLib.INFO_KEYS) delete m[k];
+  if (mode === "replace") {
+    m.name = name || MediaLib.srcName(src);
+    delete m.duration; delete m.width; delete m.height;
+  }
+  mediaOffline.delete(m.id);
+  reloadMediaSource(m, oldSrc);
+  try { await loadMediaMetadata(m); } catch { }
+  let msg = mode === "replace" ? `Replaced ${m.name}` : `Relinked ${m.name}`;
+  if (mode === "relink" && oldDur > 0 && m.duration > 0 && Math.abs(oldDur - m.duration) > 0.1)
+    msg += ` — but it is ${fmt(m.duration)} long, the original was ${fmt(oldDur)}: is it the same footage?`;
+  if (mode === "replace" && m.duration > 0) {
+    let trimmed = 0;
+    const fit = (clips) => {
+      for (const c of clips || []) {
+        if (c.mediaId !== m.id || c.kind === "image" || c.kind === "svg") continue;
+        const speed = c.props?.speed || 1;
+        const maxIn = Math.max(0, m.duration - 0.001);
+        if (c.in > maxIn) { c.in = maxIn; trimmed++; }
+        const maxDur = Math.max(0.05, (m.duration - c.in) / speed);
+        if (c.duration > maxDur + 1e-6) { c.duration = maxDur; trimmed++; }
+      }
+    };
+    fit(project.clips);
+    for (const comp of project.comps || []) fit(comp.clips);
+    if (state.compCtx) fit(state.compCtx.root.clips);
+    runtime.compGen = (runtime.compGen || 0) + 1;
+    if (trimmed) msg += ` — ${trimmed} clip edge${trimmed === 1 ? "" : "s"} trimmed to fit`;
+    if (m.kind === "video") for (const c of project.clips) if (c.mediaId === m.id && c.kind === "video") reconcileAudioChannels(c);
+  }
+  state.dirtyTimeline = true;
+  renderBin(); scheduleSave(); renderInspector();
+  refreshMediaInfo([m]);
+  toast(msg);
+}
+
+/* Upload local files into media/ (like import, without adding bin entries) → [{file, src}]. */
+async function uploadForRelink(files, onProgress) {
+  const out = [];
+  for (const file of files) {
+    onProgress?.(file);
+    try {
+      const res = await fetch("/api/upload?name=" + encodeURIComponent(file.name), { method: "POST", body: file });
+      if (!res.ok) throw new Error("upload " + res.status);
+      out.push({ file, src: (await res.json()).src });
+    } catch { out.push({ file, src: null }); }
+  }
+  return out;
+}
+let relinkPicker = null;
+/** A file input of our own for relink / replace (never the shared #fileInput). */
+function pickFilesForRelink({ folder = false, accept = els.fileInput.accept } = {}) {
+  return new Promise((resolve) => {
+    relinkPicker?.remove();
+    const input = relinkPicker = document.createElement("input");
+    input.type = "file"; input.className = "sr-only";
+    if (folder) { input.webkitdirectory = true; input.multiple = true; } else input.accept = accept;
+    document.body.appendChild(input);
+    input.addEventListener("change", () => { resolve([...input.files]); input.remove(); }, { once: true });
+    input.addEventListener("cancel", () => { resolve([]); input.remove(); }, { once: true });
+    input.click();
+  });
+}
+
+/* Replace file…: a different file behind this media entry, for every clip that uses it. */
+async function replaceMediaFile(m) {
+  const files = await pickFilesForRelink({ accept: m.kind === "audio" ? "audio/*,.mp3,.wav,.m4a,.flac,.ogg" : els.fileInput.accept });
+  const file = files[0];
+  if (!file) return;
+  const kind = mediaKindFromFile(file);
+  if (kind !== m.kind && !(m.kind === "audio" && kind === "video")) { toast(`That is ${kind ? (kind === "audio" || kind === "image" ? "an " : "a ") + kind : "an unsupported"} file — ${m.name} is ${m.kind}`); return; }
+  toast(`Copying ${file.name} into the project…`);
+  const [up] = await uploadForRelink([file]);
+  if (!up || !up.src) { toast("Couldn't copy the file into media/"); return; }
+  await setMediaSource(m, up.src, "replace", file.name);
+}
+
+/* The Relink dialog: one row per file, each with candidates found on disk
+   (same name, same name with another extension, similar name, same size),
+   Browse… for one file and Choose folder… to match a whole folder by name. */
+async function openRelinkDialog(list) {
+  list = (list || project.media.filter((m) => isMediaOffline(m.id))).filter(Boolean);
+  if (!list.length) { toast("Nothing is offline"); return; }
+  document.getElementById("relinkOverlay")?.remove();
+  const overlay = document.createElement("div");
+  overlay.className = "overlay";
+  overlay.id = "relinkOverlay";
+  overlay.innerHTML = `<div class="dialog relink" role="dialog" aria-modal="true" aria-labelledby="relinkTitle" tabindex="-1">
+    <h2 id="relinkTitle">Relink media</h2>
+    <p class="dim">Point ${list.length === 1 ? "this file" : `these ${list.length} files`} at the footage where it is now. Clips keep their In points and edits.</p>
+    <div class="relink-tools">
+      <button type="button" class="btn tiny" data-folder title="Pick the folder the files are in now — they are matched by name and copied into the project">Choose folder…</button>
+      <span class="relink-status dim"></span>
+    </div>
+    <div class="relink-rows"></div>
+    <div class="dialog-actions"><button type="button" class="btn" data-cancel>Cancel</button><button type="button" class="btn primary" data-apply>Relink</button></div>
+  </div>`;
+  document.body.appendChild(overlay);
+  const dialog = overlay.querySelector(".dialog");
+  const rowsEl = overlay.querySelector(".relink-rows"), status = overlay.querySelector(".relink-status");
+  const pick = new Map();   // media id → {src, label} | null
+  const cands = new Map();  // media id → [{src, name, size, why}]
+  const close = () => { overlay.remove(); };
+  const render = () => {
+    rowsEl.innerHTML = "";
+    for (const m of list) {
+      const row = document.createElement("div");
+      row.className = "relink-row";
+      const cur = pick.get(m.id);
+      const options = (cands.get(m.id) || []);
+      row.innerHTML = `<div class="relink-name"><b></b><span class="dim relink-was"></span></div>
+        <div class="relink-pick">
+          <select aria-label="New location"></select>
+          <button type="button" class="btn tiny" data-browse title="Pick the file (it is copied into the project)">Browse…</button>
+        </div>`;
+      row.querySelector("b").textContent = (isMediaOffline(m.id) ? "⚠ " : "") + m.name;
+      row.querySelector(".relink-was").textContent = "was " + decodeURIComponent(String(m.src).split("?")[0]) + (m.duration ? " · " + fmt(m.duration) : "") + (m.size ? " · " + MediaLib.fmtSize(m.size) : "");
+      const sel = row.querySelector("select");
+      const opt = (v, label) => { const o = document.createElement("option"); o.value = v; o.textContent = label; sel.appendChild(o); };
+      opt("", options.length || cur ? "— leave it —" : "— not found: Browse… or Choose folder… —");
+      if (cur && !options.some((o) => o.src === cur.src)) opt(cur.src, cur.label);
+      for (const o of options) opt(o.src, `${decodeURIComponent(o.path || o.src)} · ${MediaLib.fmtSize(o.size)} (${o.why})`);
+      sel.value = cur ? cur.src : "";
+      sel.addEventListener("change", () => {
+        const o = options.find((x) => x.src === sel.value);
+        pick.set(m.id, sel.value ? { src: sel.value, label: o ? o.name : sel.value } : null);
+        syncApply();
+      });
+      row.querySelector("[data-browse]").addEventListener("click", async () => {
+        const [file] = await pickFilesForRelink({});
+        if (!file) return;
+        status.textContent = `Copying ${file.name}…`;
+        const [up] = await uploadForRelink([file]);
+        status.textContent = up?.src ? "" : "Couldn't copy " + file.name;
+        if (up?.src) { pick.set(m.id, { src: up.src, label: `${file.name} (chosen)` }); render(); }
+      });
+      rowsEl.appendChild(row);
+    }
+    syncApply();
+  };
+  const syncApply = () => {
+    const n = list.filter((m) => pick.get(m.id)).length;
+    const b = overlay.querySelector("[data-apply]");
+    b.disabled = !n;
+    b.textContent = n ? `Relink ${n}` : "Relink";
+  };
+  overlay.querySelector("[data-cancel]").addEventListener("click", close);
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) close(); });
+  overlay.addEventListener("keydown", (e) => { if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); close(); } });
+  overlay.querySelector("[data-folder]").addEventListener("click", async () => {
+    const files = await pickFilesForRelink({ folder: true });
+    if (!files.length) return;
+    // match each row by file name (then by size), copy only the matches
+    const want = [];
+    for (const m of list) {
+      let best = null, bestScore = 0;
+      for (const f of files) {
+        const { score } = MediaLib.relinkScore(m, { name: f.name, size: f.size });
+        if (score > bestScore && score >= 60) { best = f; bestScore = score; }
+      }
+      if (best) want.push([m, best]);
+    }
+    if (!want.length) { status.textContent = `None of the ${files.length} files in that folder match by name.`; return; }
+    let i = 0;
+    const ups = await uploadForRelink(want.map(([, f]) => f), (f) => { status.textContent = `Copying ${++i}/${want.length}: ${f.name}…`; });
+    want.forEach(([m, f], k) => { if (ups[k].src) pick.set(m.id, { src: ups[k].src, label: `${f.name} (from the folder)` }); });
+    status.textContent = `Matched ${ups.filter((u) => u.src).length} of ${list.length} by name.`;
+    render();
+  });
+  overlay.querySelector("[data-apply]").addEventListener("click", async () => {
+    const todo = list.filter((m) => pick.get(m.id));
+    close();
+    for (const m of todo) await setMediaSource(m, pick.get(m.id).src, "relink");
+    scheduleOfflineCheck(0);
+  });
+  render();
+  dialog.focus();
+  // candidates found on disk (same name, other extension, similar name, same size)
+  if (state.connected) {
+    status.textContent = "Looking for the files…";
+    try {
+      const res = await fetch("/api/relink/candidates", {
+        method: "POST", headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ media: list.map((m) => ({ id: m.id, name: m.name, src: m.src, size: m.size, kind: m.kind })) }),
+      });
+      const { candidates } = await res.json();
+      const used = new Set(project.media.map((x) => x.src));
+      let found = 0;
+      for (const m of list) {
+        const opts = (candidates[m.id] || []).filter((o) => o.src !== m.src && (!used.has(o.src) || !isMediaOffline(m.id)));
+        cands.set(m.id, opts);
+        // a confident match is picked for you (same name, or same name with a matching size)
+        if (opts[0] && opts[0].score >= 100 && !pick.get(m.id)) { pick.set(m.id, { src: opts[0].src, label: opts[0].name }); found++; }
+      }
+      status.textContent = found ? `Found ${found} of ${list.length} in the project folders.` : "";
+      if (overlay.isConnected) render();
+    } catch { status.textContent = ""; }
+  }
+}
+
+/* ── Proxies ──
+   The server makes light H.264 copies of heavy footage (proxy.js). With the
+   monitor's Proxy button on, video clips and the Source monitor play the
+   proxy; export, still renders for agents and scopes always switch back to
+   the original — so a proxy changes how smoothly you edit, never the result. */
+const proxyStatus = new Map();   // media id → {state, src?, height, width?, size?, progress?, error?}
+function proxyOf(m) { const s = m && proxyStatus.get(m.id); return s && s.state === "ready" ? s : null; }
+function proxiesOn() { return getSetting("useProxies") !== false; }
+/** The file a player should load for this media now: the proxy while editing, the original for output. */
+function mediaPlaySrc(m) {
+  if (!m || m.kind !== "video" || state.exporting || runtime.forceOriginals || !proxiesOn()) return m && m.src;
+  const p = proxyOf(m);
+  return p ? p.src : m.src;
+}
+/** Switch every player to the original files and wait until they can draw (export, still renders). */
+async function useOriginalPlayers() {
+  runtime.forceOriginals = true;
+  const waits = [];
+  for (const c of mediaClips()) {
+    if (c.kind !== "video" || !clipRenders(c)) continue;
+    const el = getClipEl(c);
+    if (el) waits.push(waitMediaEl(el));
+  }
+  await Promise.all(waits);
+}
+function releaseOriginalPlayers() {
+  if (!runtime.forceOriginals) return;
+  runtime.forceOriginals = false;
+  state.dirtyTimeline = true;
+  seekMediaWhilePaused();
+}
+async function refreshProxyStatus() {
+  if (!state.connected) return;
+  const vids = project.media.filter((m) => m.kind === "video" && !m.transient && isLocalSrc(m.src));
+  if (!vids.length) { if (proxyStatus.size) { proxyStatus.clear(); renderBin(); } return; }
+  try {
+    const res = await fetch("/api/proxy/status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ srcs: [...new Set(vids.map((m) => m.src))] }) });
+    if (!res.ok) return;
+    const { status } = await res.json();
+    const before = JSON.stringify([...proxyStatus]);
+    proxyStatus.clear();
+    for (const m of vids) { const s = status[m.src]; if (s && s.state !== "none") proxyStatus.set(m.id, s); }
+    if (JSON.stringify([...proxyStatus]) !== before) onProxiesChanged();
+  } catch { }
+}
+/** SSE "proxy": one file's proxy moved on (queued, progress, ready, failed, deleted). */
+function onProxyEvent(data) {
+  let ev; try { ev = JSON.parse(data); } catch { return; }
+  let hit = false;
+  for (const m of project.media) {
+    if (m.src !== ev.src) continue;
+    hit = true;
+    const s = ev.status || { state: "none" };
+    if (s.state === "none") proxyStatus.delete(m.id); else proxyStatus.set(m.id, s);
+    if (s.state === "ready" && runtime.proxyAsked?.has(m.id)) { runtime.proxyAsked.delete(m.id); toast(`Proxy ready: ${m.name}`); }
+    if (s.state === "failed" && runtime.proxyAsked?.has(m.id)) { runtime.proxyAsked.delete(m.id); toast(`Couldn't make a proxy of ${m.name}: ${s.error}`); }
+  }
+  if (!hit) return;
+  if (ev.status && ev.status.state === "running") { renderBinProxyBadges(); return; }   // progress: just the badges
+  onProxiesChanged();
+}
+function onProxiesChanged() {
+  renderBin();
+  syncProxyButton();
+  state.dirtyTimeline = true;
+  seekMediaWhilePaused();   // players switch file on the next frame; park the new ones on the playhead
+}
+/* Progress ticks repaint only the badges, not the whole bin. */
+function renderBinProxyBadges() {
+  for (const el of els.binList.querySelectorAll(".bin-item[data-media-id] .bin-proxy")) {
+    const s = proxyStatus.get(el.closest(".bin-item").dataset.mediaId);
+    if (s && s.state === "running") el.textContent = `P ${Math.round((s.progress || 0) * 100)}%`;
+  }
+}
+function proxyBadgeHtml(m) {
+  const s = proxyStatus.get(m.id);
+  if (!s || m.kind !== "video") return "";
+  if (s.state === "ready") return `<span class="bin-proxy ready${proxiesOn() ? " on" : ""}" title="Proxy ready (${s.width ? s.width + "×" : ""}${s.height}p, ${MediaLib.fmtSize(s.size)})${proxiesOn() ? " — playing it while you edit" : " — the Proxy button is off"}">P</span>`;
+  if (s.state === "running" || s.state === "queued") return `<span class="bin-proxy busy" title="Making a ${s.height}p proxy">P ${s.state === "running" ? Math.round((s.progress || 0) * 100) + "%" : "…"}</span>`;
+  if (s.state === "failed") return `<span class="bin-proxy failed" title="Proxy failed: ${escapeHtml(s.error || "")}">P ✕</span>`;
+  return "";
+}
+function proxyLabel(m) {
+  const s = proxyStatus.get(m.id);
+  if (m.kind !== "video") return "";
+  if (!s) return "none";
+  if (s.state === "ready") return `${s.height}p`;
+  if (s.state === "running") return Math.round((s.progress || 0) * 100) + "%";
+  return s.state;
+}
+async function createProxies(list, height) {
+  list = list.filter((m) => m.kind === "video" && !m.transient && isLocalSrc(m.src) && !isMediaOffline(m.id));
+  if (!list.length) { toast("No video to make proxies of"); return; }
+  if (!state.ffmpeg) { toast("Proxies need ffmpeg on the server's PATH"); return; }
+  (runtime.proxyAsked ||= new Set());
+  for (const m of list) runtime.proxyAsked.add(m.id);
+  try {
+    const res = await fetch("/api/proxy", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ srcs: [...new Set(list.map((m) => m.src))], height }) });
+    const body = await res.json();
+    if (!res.ok) throw new Error(body.error || res.status);
+    for (const m of list) { const s = body.status[m.src]; if (s) proxyStatus.set(m.id, s); if (s && s.state === "ready") runtime.proxyAsked.delete(m.id); }
+    onProxiesChanged();
+    const queued = list.filter((m) => proxyStatus.get(m.id)?.state !== "ready").length;
+    toast(queued ? `Making ${queued} prox${queued === 1 ? "y" : "ies"} in the background — the bin shows the progress` : "Already has a proxy");
+  } catch (e) { toast("Couldn't start the proxies: " + (e.message || e)); }
+}
+async function deleteProxies(list) {
+  try {
+    await fetch("/api/proxy/delete", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ srcs: list.map((m) => m.src) }) });
+  } catch { }
+  for (const m of list) proxyStatus.delete(m.id);
+  onProxiesChanged();
+}
+function syncProxyButton() {
+  const b = els.btnProxy;
+  if (!b) return;
+  const n = project.media.filter((m) => proxyOf(m)).length;
+  b.classList.toggle("on", proxiesOn());
+  b.classList.toggle("has", n > 0);
+  b.title = (proxiesOn() ? "Proxies on: " : "Proxies off: ") +
+    (n ? `${n} file${n === 1 ? " has a proxy" : "s have proxies"}` : "no proxies yet (right-click a video in the bin → Create proxy)") +
+    ". Export always uses the originals.";
+}
+
 /* Open the native file dialog. Windows anchors it to the <input>'s screen
    position — park the input under the cursor and open after the mouse
    gesture finishes so the dialog doesn't appear then jump. */
@@ -2101,6 +2953,23 @@ function openFileImport(clientX, clientY) {
   setTimeout(() => input.click(), 0);
 }
 
+/* Bin search / Show / Sort / view controls. */
+els.binSearch.addEventListener("input", () => { binView.q = els.binSearch.value; renderBin(); });
+els.binSearch.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") { e.preventDefault(); binView.q = ""; els.binSearch.value = ""; renderBin(); els.binSearch.blur(); }
+  e.stopPropagation();
+});
+els.binFilter.addEventListener("change", () => setBinFilter(els.binFilter.value));
+els.binSort.addEventListener("change", () => { binView.sort = els.binSort.value; saveBinPrefs(); renderBin(); });
+els.binSortDir.addEventListener("click", () => { binView.dir = binView.dir === "desc" ? "asc" : "desc"; saveBinPrefs(); renderBin(); });
+els.binViewBtn.addEventListener("click", () => { binView.list = !binView.list; saveBinPrefs(); renderBin(); });
+
+els.btnProxy?.addEventListener("click", () => {
+  setSetting("useProxies", !proxiesOn());
+  onProxiesChanged();
+  toast(proxiesOn() ? "Proxies on — files with a proxy play it while you edit" : "Proxies off — every clip plays its original");
+});
+
 /* Ctrl/Cmd+click in the Project bin opens the file importer. */
 els.binList.addEventListener("click", (e) => {
   if (!(e.ctrlKey || e.metaKey) || e.button !== 0) return;
@@ -2228,6 +3097,7 @@ function setBinTab(tab) {
   const isProj = tab === "project";
   els.binList.classList.toggle("hidden", !isProj);
   els.libList.classList.toggle("hidden", isProj);
+  if (els.binTools) els.binTools.classList.toggle("hidden", !isProj);
   if (tab === "shapes") renderShapesTab();
   else if (tab === "templates") { renderTemplatesTab(); fetchSaved("templates").then(() => { if (state.binTab === "templates") renderTemplatesTab(); }); }
   else if (!isProj) fetchLibrary(tab).then(renderLibrary);
@@ -2249,20 +3119,37 @@ function pushUndo(snap = undoSnapshot()) {
 function restoreSnapshot(json) {
   const snap = JSON.parse(json);
   if (Array.isArray(snap)) project.clips = snap;
-  else { project.clips = snap.clips; project.markers = snap.markers; if (snap.comps) project.comps = snap.comps; if (snap.media) { project.media = snap.media; renderBin(); } }
+  else {
+    project.clips = snap.clips; project.markers = snap.markers; if (snap.comps) project.comps = snap.comps;
+    if (snap.media) {
+      const before = new Map(project.media.map((m) => [m.id, m.src]));
+      project.media = snap.media;
+      // a relink / replace undone or redone: the players and pictures follow the src
+      for (const m of project.media) if (before.has(m.id) && before.get(m.id) !== m.src) reloadMediaSource(m, before.get(m.id));
+      renderBin(); scheduleOfflineCheck(0);
+    }
+  }
   runtime.compGen = (runtime.compGen || 0) + 1;
 }
+/** The current state to step back to, carrying the media list when `snap` does
+ *  (removing, relinking or replacing media), so redo puts it back too. */
+function counterSnapshot(snap) {
+  if (!snap.includes('"media":')) return undoSnapshot();
+  return JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [], media: project.media });
+}
 function undo() {
   if (!runtime.undo.length) return;
-  runtime.redo.push(undoSnapshot());
-  restoreSnapshot(runtime.undo.pop());
+  const snap = runtime.undo.pop();
+  runtime.redo.push(counterSnapshot(snap));
+  restoreSnapshot(snap);
   pruneSelection();
   scheduleSave(); renderInspector();
 }
 function redo() {
   if (!runtime.redo.length) return;
-  runtime.undo.push(undoSnapshot());
-  restoreSnapshot(runtime.redo.pop());
+  const snap = runtime.redo.pop();
+  runtime.undo.push(counterSnapshot(snap));
+  restoreSnapshot(snap);
   pruneSelection();
   scheduleSave(); renderInspector();
 }
@@ -3077,8 +3964,9 @@ function exportRangeMode() {
   if (v === "in-out" && !hasWorkArea()) return "entire";
   return v;
 }
-function exportRange() {
-  const fps = projectFps();
+/** fps: the output's frame rate when it differs from the project's (delivery). */
+function exportRange(fpsOverride) {
+  const fps = fpsOverride || projectFps();
   const span = Math.max(projDur(), 0);
   let start = 0, end = span;
   if (exportRangeMode() === "in-out") {
@@ -3352,7 +4240,8 @@ function rebuildClips() {
     div.className = `clip c-${c.kind}` +
       (state.selIds.has(c.id) ? " selected" : "") + (c.id === state.selId ? " primary" : "") +
       (isClipLocked(c) ? " locked" : "") + (c.disabled === true ? " disabled" : "") +
-      (c.unlinked === true ? " unlinked" : "") + (c.kind !== "audio" && isMatte(c) ? " matte-src" : "");
+      (c.unlinked === true ? " unlinked" : "") + (c.kind !== "audio" && isMatte(c) ? " matte-src" : "") +
+      (isMediaOffline(c.mediaId) ? " offline" : "");
     div.dataset.id = c.id;
     div.style.left = c.start * state.pps + "px";
     div.style.width = Math.max(8, c.duration * state.pps) + "px";
@@ -3363,7 +4252,7 @@ function rebuildClips() {
     }
     const hasWave = c.kind === "audio" && !!wavePeaksFor(c);
     if (hasWave) body += `<canvas class="wave"></canvas>`;
-    const badge = (c.keyframes && Object.keys(c.keyframes).length ? "◆ " : "") +
+    const badge = (isMediaOffline(c.mediaId) ? "⚠ Offline · " : "") + (c.keyframes && Object.keys(c.keyframes).length ? "◆ " : "") +
                   (c.transitionIn || c.transitionOut ? "⇄ " : "") +
                   (clipMatte(c) ? "◐ " : "");
     const chTag = (() => {
@@ -5746,13 +6635,18 @@ function ensureSourceEl(m) {
     });
     runtime.sourceEl = el;
   }
-  if (el.dataset.src !== m.src) {
-    el.src = m.src;
-    el.dataset.src = m.src;
+  const want = mediaPlaySrc(m);
+  if (el.dataset.src !== want) {
+    el.src = want;
+    el.dataset.src = want;
     runtime.sourceHold = null;
     runtime.sourceHoldOk = false;
     runtime.sourceSeekPending = null;
     runtime.sourceSeekBusy = false;
+    // a new file (proxy ↔ original) loads at 0 — put it back on the Source playhead
+    el.addEventListener("loadedmetadata", () => {
+      if (runtime.sourceEl === el && el.dataset.src === want && !state.source.playing) seekSourceEl(state.source.time);
+    }, { once: true });
   }
   return el;
 }
@@ -5945,6 +6839,7 @@ async function playSource() {
   audio.ctx.resume();
   state.source.playing = true;
   syncPlayButton();
+  noteActivity();
 }
 function toggleTransportPlay() {
   // Space always resumes forward — drop a reverse / crawl rate left by J or K+L
@@ -6316,13 +7211,17 @@ function drawSourceFrame() {
 function getClipEl(c) {
   let el = runtime.clipEls.get(c.id);
   const m = getMedia(c.mediaId);
-  // The clip now plays another file (noise reduction, or undoing it): rebuild.
-  if (el && m && el._fcSrc !== m.src) { releaseClipEl(c.id); el = null; }
+  // video plays its proxy while editing (never during export); audio always the original
+  const src = c.kind === "video" ? mediaPlaySrc(m) : m && m.src;
+  // The clip now plays another file (noise reduction or undoing it, a relink, proxies on / off): rebuild.
+  if (el && m && el._fcSrc !== src) { releaseClipEl(c.id); el = null; }
   if (el) return el;
   if (!m) return null;
   el = document.createElement(c.kind === "audio" ? "audio" : "video");
-  el.preload = "auto"; el.src = m.src; el.playsInline = true;
-  el._fcSrc = m.src;
+  el.preload = "auto"; el.src = src; el.playsInline = true;
+  el._fcSrc = src;
+  // a proxy is smaller than the original: fit "none" (native pixels) scales it back up
+  el._fcScale = src !== m.src && m.height > 0 ? (proxyOf(m)?.height || m.height) / m.height : 1;
   runtime.clipEls.set(c.id, el);
   hookAudio(c, el);
   return el;
@@ -8058,6 +8957,7 @@ function play() {
   }
   state.playing = true;
   syncPlayButton();
+  noteActivity();
   syncMedia(); // start active seeks + cut lookahead without waiting a RAF
 }
 function pause() {
@@ -8676,9 +9576,161 @@ function hexToRgb(hex) {
   const n = parseInt(String(hex).replace("#", ""), 16) || 0;
   return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
 }
+/* The same pixel loop as a WebGL2 shader: no getImageData read-back and no
+   per-pixel JS, so a keyed or tinted 1080p layer costs a draw call, not ~20 ms
+   of main thread. The input is staged through a 2D canvas exactly as the CPU
+   path draws it (same resize, same cut-out mask, unpremultiplied on upload
+   like getImageData), so both paths see the same pixels; the CPU loop below
+   stays as the fallback when WebGL2 is unavailable. */
+const pixGL = { tried: false, gl: null, canvas: null, loc: null, stage: null, stageCtx: null, outs: new Map() };
+const PIX_VERT = `#version 300 es
+in vec2 aPos;
+void main() { gl_Position = vec4(aPos, 0.0, 1.0); }`;
+const PIX_FRAG = `#version 300 es
+precision highp float;
+uniform sampler2D uTex;
+uniform ivec2 uSize;       // picture size: the buffers only grow, so it sits in their top-left corner
+uniform int uSplit;        // RGB split in pixels (R from x+split, B from x−split)
+uniform int uKey;
+uniform vec2 uKeyC;        // key colour Cb, Cr (0…255)
+uniform vec2 uKeyT;        // tolerance t0, t1 (CbCr distance)
+uniform vec2 uShift;       // temperature (R+, B−), tint (G+), in 0…255 units
+out vec4 o;
+void main() {
+  ivec2 sz = uSize;
+  ivec2 q = ivec2(int(gl_FragCoord.x), sz.y - 1 - int(gl_FragCoord.y));   // texture row 0 = top
+  vec4 c = texelFetch(uTex, q, 0);
+  vec3 rgb = c.rgb * 255.0;
+  float a = c.a;
+  if (uSplit > 0) {
+    rgb.r = texelFetch(uTex, ivec2(min(sz.x - 1, q.x + uSplit), q.y), 0).r * 255.0;
+    rgb.b = texelFetch(uTex, ivec2(max(0, q.x - uSplit), q.y), 0).b * 255.0;
+  }
+  if (uKey == 1) {
+    float cb = 128.0 - 0.168736 * rgb.r - 0.331264 * rgb.g + 0.5 * rgb.b;
+    float cr = 128.0 + 0.5 * rgb.r - 0.418688 * rgb.g - 0.081312 * rgb.b;
+    float dist = distance(vec2(cb, cr), uKeyC);
+    if (dist < uKeyT.x) { o = vec4(0.0); return; }
+    if (dist < uKeyT.y) {
+      float k = (dist - uKeyT.x) / (uKeyT.y - uKeyT.x);
+      a *= k;
+      float avg = (rgb.r + rgb.b) * 0.5;   // spill suppression
+      if (rgb.g > avg) rgb.g = rgb.g * k + avg * (1.0 - k);
+    }
+  }
+  rgb += vec3(uShift.x, uShift.y, -uShift.x);
+  rgb = clamp(rgb, 0.0, 255.0) / 255.0;
+  o = vec4(rgb * a, a);
+}`;
+function initPixGL() {
+  if (pixGL.tried) return pixGL.gl;
+  pixGL.tried = true;
+  try {
+    const cv = document.createElement("canvas");
+    const gl = cv.getContext("webgl2", { premultipliedAlpha: true, preserveDrawingBuffer: true, antialias: false, alpha: true });
+    if (!gl) return null;
+    // A software rasterizer (SwiftShader in headless Chrome, llvmpipe) runs the
+    // shader on the CPU anyway, no faster than the loop: keep the loop there.
+    const info = gl.getExtension("WEBGL_debug_renderer_info");
+    if (info && /swiftshader|llvmpipe|softpipe|software/i.test(gl.getParameter(info.UNMASKED_RENDERER_WEBGL))) return null;
+    const sh = (type, src) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, src); gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s));
+      return s;
+    };
+    const prog = gl.createProgram();
+    gl.attachShader(prog, sh(gl.VERTEX_SHADER, PIX_VERT));
+    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, PIX_FRAG));
+    gl.linkProgram(prog);
+    if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog));
+    gl.useProgram(prog);
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+    const aPos = gl.getAttribLocation(prog, "aPos");
+    gl.enableVertexAttribArray(aPos);
+    gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+    gl.bindTexture(gl.TEXTURE_2D, gl.createTexture());
+    for (const [k, v] of [[gl.TEXTURE_MIN_FILTER, gl.NEAREST], [gl.TEXTURE_MAG_FILTER, gl.NEAREST],
+      [gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE]]) gl.texParameteri(gl.TEXTURE_2D, k, v);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);   // straight alpha, as getImageData returns it
+    const loc = {};
+    for (const n of ["uTex", "uSize", "uSplit", "uKey", "uKeyC", "uKeyT", "uShift"]) loc[n] = gl.getUniformLocation(prog, n);
+    gl.uniform1i(loc.uTex, 0);
+    cv.addEventListener("webglcontextlost", (e) => { e.preventDefault(); pixGL.gl = null; });
+    cv.addEventListener("webglcontextrestored", () => { pixGL.tried = false; });
+    const stage = document.createElement("canvas");   // GPU-backed: no willReadFrequently
+    Object.assign(pixGL, { gl, canvas: cv, loc, stage, stageCtx: stage.getContext("2d") });
+    return gl;
+  } catch (err) {
+    console.warn("[FableCut] WebGL2 pixel pass unavailable, using the CPU path:", err && err.message);
+    return null;
+  }
+}
+/** pixelPass on the GPU; null when WebGL2 isn't usable (the caller falls back). */
+function pixelPassGL(c, p, src, sx, sy, sw, sh, w, h, dw) {
+  const gl = initPixGL();
+  if (!gl) return null;
+  const { stage, stageCtx: g, canvas: cv, loc } = pixGL;
+  // Resizing a canvas reallocates it, and the layers of one frame differ in
+  // size, so the stage and the GL buffer only grow; each clip gets its own
+  // output canvas at its own size, which keeps its size from frame to frame.
+  if (stage.width < w) stage.width = w;
+  if (stage.height < h) stage.height = h;
+  g.clearRect(0, 0, w, h);
+  g.drawImage(src, sx, sy, sw, sh, 0, 0, w, h);
+  const mask = p.bgRemove ? bgSeg.masks.get(c.id) : null;
+  if (mask && mask.width) {
+    g.globalCompositeOperation = "destination-in";
+    g.drawImage(mask, 0, 0, w, h);
+    g.globalCompositeOperation = "source-over";
+  }
+  const doKey = !!p.chromaKey, temp = +p.temperature || 0, tint = +p.tint || 0;
+  const split = Math.round(clamp(+p.rgbSplit || 0, 0, 60) * (w / Math.max(1, dw)));
+  const run = doKey || temp || tint || split > 0;
+  let out = pixGL.outs.get(c.id);
+  if (!out) {
+    if (pixGL.outs.size >= 32) pixGL.outs.delete(pixGL.outs.keys().next().value);
+    out = document.createElement("canvas");
+    pixGL.outs.set(c.id, out);
+  }
+  if (out.width !== w) out.width = w;
+  if (out.height !== h) out.height = h;
+  const o = out.getContext("2d");
+  o.clearRect(0, 0, w, h);
+  if (!run) { o.drawImage(stage, 0, 0, w, h, 0, 0, w, h); return out; }
+  try {
+    if (cv.width < w) cv.width = w;
+    if (cv.height < h) cv.height = h;
+    gl.viewport(0, 0, w, h);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, stage);
+    gl.uniform2i(loc.uSize, w, h);
+    gl.uniform1i(loc.uSplit, split);
+    gl.uniform1i(loc.uKey, doKey ? 1 : 0);
+    if (doKey) {
+      const [kr, kg, kb] = hexToRgb(p.chromaKey);
+      const t0 = clamp(+p.chromaTolerance || 0, 0, 100) * 1.2;
+      gl.uniform2f(loc.uKeyC, 128 - 0.168736 * kr - 0.331264 * kg + 0.5 * kb, 128 + 0.5 * kr - 0.418688 * kg - 0.081312 * kb);
+      gl.uniform2f(loc.uKeyT, t0, t0 + Math.max(1, clamp(+p.chromaSoftness || 0, 0, 100) * 1.2));
+    }
+    gl.uniform2f(loc.uShift, temp * 0.6, tint * 0.5);
+    gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    o.drawImage(cv, 0, cv.height - h, w, h, 0, 0, w, h);   // the viewport is the buffer's bottom-left
+    return out;
+  } catch (err) {
+    if (err && err.name === "SecurityError") throw err;   // tainted source: same as getImageData on the CPU path
+    console.warn("[FableCut] pixel pass failed, using the CPU path:", err && err.message);
+    pixGL.gl = null;
+    return null;
+  }
+}
 function pixelPass(c, p, src, sx, sy, sw, sh, dw, dh) {
   const w = Math.max(2, Math.min(Math.round(dw), 1920));
   const h = Math.max(2, Math.min(Math.round(dh), 1920));
+  const viaGL = pixelPassGL(c, p, src, sx, sy, sw, sh, w, h, dw);
+  if (viaGL) return viaGL;
   if (scratch.width !== w) scratch.width = w;
   if (scratch.height !== h) scratch.height = h;
   scratchCtx.clearRect(0, 0, w, h);
@@ -9133,7 +10185,7 @@ function commitCompCtx() {
   const comps = (cur.comps || []).map((c) => (c.id === id
     ? { ...c, clips: cur.clips, tracks: cur.tracks, disabledTracks: cur.disabledTracks && cur.disabledTracks.length ? cur.disabledTracks : undefined, markers: cur.markers && cur.markers.length ? cur.markers : undefined, background: c.background }
     : c));
-  x.root = { ...x.root, media: cur.media, folders: cur.folders, fps: cur.fps, master: cur.master, buses: cur.buses, revision: cur.revision, comps };
+  x.root = { ...x.root, media: cur.media, folders: cur.folders, collections: cur.collections, fps: cur.fps, master: cur.master, buses: cur.buses, revision: cur.revision, comps };
   return x.root;
 }
 function enterComp(compId, viaClip) {
@@ -9227,6 +10279,7 @@ function addCompClip(comp, trackId, at) {
 function makeCompItem(comp) {
   const item = document.createElement("div");
   item.className = "bin-item comp-item";
+  item.dataset.compId = comp.id;
   item.draggable = true;
   const used = CompLib.usages(state.compCtx ? state.compCtx.root : project, comp.id).length;
   item.innerHTML = `<div class="bin-thumb comp-thumb">▣</div>
@@ -9865,6 +10918,28 @@ function shapeKeyed(c) {
   const any = (list) => (list || []).some((it) => (it.keys && it.keys.length) || (it.type === "group" && any(it.items)));
   return any(c.props.shapes);
 }
+/** A missing file's picture: the box it would fill, marked "Media offline" (preview and export). */
+function drawOfflineSlate(c, p, W, H) {
+  const m = getMedia(c.mediaId);
+  const mw = m && m.width > 0 ? m.width : W, mh = m && m.height > 0 ? m.height : H, sc = p.scale || 1;
+  let dw, dh;
+  if (p.fit === "cover") { const f = Math.max(W / mw, H / mh) * sc; dw = mw * f; dh = mh * f; }
+  else if (p.fit === "stretch") { dw = W * sc; dh = H * sc; }
+  else if (p.fit === "none") { dw = mw * sc; dh = mh * sc; }
+  else { const f = Math.min(W / mw, H / mh) * sc; dw = mw * f; dh = mh * f; }
+  ctx2d.fillStyle = "#3a0d10";
+  ctx2d.fillRect(-dw / 2, -dh / 2, dw, dh);
+  ctx2d.strokeStyle = "#e5484d"; ctx2d.lineWidth = Math.max(2, dh / 120);
+  ctx2d.strokeRect(-dw / 2, -dh / 2, dw, dh);
+  const fs = Math.max(9, Math.min(dw / 20, dh / 9));
+  ctx2d.fillStyle = "#ff8a8d";
+  ctx2d.textAlign = "center"; ctx2d.textBaseline = "middle";
+  ctx2d.font = `700 ${fs}px "Segoe UI", system-ui, sans-serif`;
+  ctx2d.fillText("Media offline", 0, -fs * 0.35, dw * 0.9);
+  ctx2d.font = `400 ${fs * 0.42}px "Segoe UI", system-ui, sans-serif`;
+  ctx2d.fillStyle = "#f2c4c5";
+  ctx2d.fillText(m ? m.name : "", 0, fs * 0.55, dw * 0.9);
+}
 /** Draw one clip. `layered`: into a mask layer — opacity and blend wait for
  *  the composite. Returns { p, geom } — geom = where the clip's picture landed
  *  (canvas transform + its box), the space its masks live in. */
@@ -9929,7 +11004,9 @@ function drawClipPicture(c, W, H, t, layered) {
   }
   let src = null, sw = 0, sh = 0;
   if (c.kind === "image") {
-    src = runtime.mediaAux.get(c.mediaId)?.img;
+    const aux = runtime.mediaAux.get(c.mediaId), im = aux?.imgSrc && getMedia(c.mediaId);
+    if (im && aux.imgSrc !== im.src && !aux.reloading) { aux.reloading = true; reloadMediaSource(im); }   // relinked / undone
+    src = aux?.img;
     if (src) { sw = src.naturalWidth; sh = src.naturalHeight; }
   } else if (c.kind === "svg") {
     src = getSvgImage(c, t);
@@ -9941,6 +11018,7 @@ function drawClipPicture(c, W, H, t, layered) {
     src = renderComp(c, t);
     if (src) { sw = src.width; sh = src.height; }
   }
+  if ((!src || !sw || !sh) && isMediaOffline(c.mediaId)) drawOfflineSlate(c, p, W, H);
   if (src && sw && sh) {
     // source crop (percent per edge)
     const sx = sw * clamp(+p.cropL || 0, 0, 95) / 100;
@@ -9952,7 +11030,7 @@ function drawClipPicture(c, W, H, t, layered) {
     let dw, dh;
     if (p.fit === "cover") { const f = Math.max(W / cw, H / ch) * sc; dw = cw * f; dh = ch * f; }
     else if (p.fit === "stretch") { dw = W * sc; dh = H * sc; }
-    else if (p.fit === "none") { dw = cw * sc; dh = ch * sc; }
+    else if (p.fit === "none") { const k = src._fcScale || 1; dw = cw * sc / k; dh = ch * sc / k; }
     else { const f = Math.min(W / cw, H / ch) * sc; dw = cw * f; dh = ch * f; }
     if (p.flipH || p.flipV) ctx2d.scale(p.flipH ? -1 : 1, p.flipV ? -1 : 1);
     if (p.cornerRadius > 0) {
@@ -10375,7 +11453,7 @@ function pictureRect(c, p) {
   let dw, dh;
   if (p.fit === "cover") { const f = Math.max(W / cw, H / ch) * sc; dw = cw * f; dh = ch * f; }
   else if (p.fit === "stretch") { dw = W * sc; dh = H * sc; }
-  else if (p.fit === "none") { dw = cw * sc; dh = ch * sc; }
+  else if (p.fit === "none") { const ps = el._fcScale || 1; dw = cw * sc / ps; dh = ch * sc / ps; }   // a proxy is drawn at the original's size
   else { const f = Math.min(W / cw, H / ch) * sc; dw = cw * f; dh = ch * f; }
   return { cx: W / 2 + (+p.x || 0), cy: H / 2 + (+p.y || 0), dw, dh, rot: (p.rotation || 0) * Math.PI / 180, fx: p.flipH ? -1 : 1, fy: p.flipV ? -1 : 1 };
 }
@@ -12703,6 +13781,52 @@ async function loadProjectFonts() {
 let lastTs = null;
 let exportWindow = null;
 let playheadPx = -1;
+/* The loop runs at the display's refresh rate (240 Hz on some laptops), but
+   the picture only changes once per project frame. Redraw the program
+   monitor and the playhead-driven panels when the playhead reaches a new
+   frame; while paused, at the project rate for a moment after any input
+   (sliders, drags, hover handles) and at 4 fps otherwise, which still picks
+   up late seeks, font loads and agent edits. */
+let lastDrawKey = null, lastDrawAt = 0, lastActivity = 0, lastRulerKey = "";
+/* An idle editor doesn't need a callback per display refresh either: even an
+   empty requestAnimationFrame loop keeps the compositor ticking at 240 Hz.
+   When nothing moves the loop sleeps on a 4 fps timer, and any input or
+   server event wakes it at once. */
+let loopSleep = 0;
+const IDLE_MS = 250, ACTIVE_MS = 1500, AUDIO_IDLE_MS = 3000;
+function noteActivity() {
+  lastActivity = performance.now();
+  if (loopSleep) { clearTimeout(loopSleep); loopSleep = 0; lastTs = null; requestAnimationFrame(loop); }
+}
+function loopBusy(now) {
+  return state.playing || state.source.playing || state.exporting || state.rendering || state.audioHold ||
+    state.gesture || state.dirtyTimeline || now - lastActivity < ACTIVE_MS;
+}
+/* The audio graph (fx worklets, meter, convolvers) renders silence for as long
+   as its context runs, which costs a realtime thread a quarter of a core.
+   Suspend it a few seconds after the last sound — reverb and delay tails
+   finish first — and let every play path resume it as it already does. */
+let audioIdleSince = 0;
+function idleAudio(now) {
+  const au = runtime.audio;
+  if (!au || au.ctx.state !== "running") { audioIdleSince = 0; return; }
+  let sounding = state.playing || state.source.playing || state.exporting || state.rendering || state.audioHold;
+  if (!sounding) for (const el of runtime.clipEls.values()) if (!el.paused) { sounding = true; break; }
+  if (sounding) { audioIdleSince = 0; return; }
+  if (!audioIdleSince) audioIdleSince = now;
+  else if (now - audioIdleSince > AUDIO_IDLE_MS) { audioIdleSince = 0; au.ctx.suspend().catch(() => { }); }
+}
+for (const ev of ["pointerdown", "pointermove", "pointerup", "wheel", "keydown", "keyup", "input", "change", "dragover", "drop", "resize"])
+  window.addEventListener(ev, noteActivity, { capture: true, passive: true });
+function frameDue(now) {
+  if (state.exporting) return true;
+  const src = isSourceMode(), fps = projectFps();
+  const key = (src ? "s" : "p") + Math.floor((src ? state.source.time : state.time) * fps + 1e-6);
+  const gap = now - lastActivity < ACTIVE_MS ? 1000 / fps : IDLE_MS;
+  if (key === lastDrawKey && now - lastDrawAt < gap - 1) return false;
+  lastDrawKey = key; lastDrawAt = now;
+  return true;
+}
 function loop(ts) {
   if (lastTs == null) lastTs = ts;
   const dt = Math.min(0.1, (ts - lastTs) / 1000);
@@ -12755,13 +13879,14 @@ function loop(ts) {
     if (px < sc.scrollLeft || px > sc.scrollLeft + sc.clientWidth - 40)
       sc.scrollLeft = Math.max(0, px - 60);
   }
+  const draw = frameDue(ts);
   if (!state.rendering) { // fast export owns media seeking + the canvas
     if (isSourceMode()) {
       syncSourceMedia();
-      drawSourceFrame();
+      if (draw) drawSourceFrame();
     } else {
       syncMedia();
-      drawFrame();
+      if (draw) drawFrame();
     }
   }
   if (state.dirtyTimeline) rebuildClips();
@@ -12770,14 +13895,17 @@ function loop(ts) {
     playheadPx = phX;
     els.playhead.style.left = phX + "px";
   }
-  drawRuler();
-  if (!isSourceMode()) updateSafeOverlay();
-  updateKfGraphs();
-  syncInspectorPlayhead();
-  syncFxEditors();
-  syncColorPlayhead();
+  const rulerKey = `${els.timelineScroll.scrollLeft} ${els.timelineScroll.clientWidth} ${state.pps}`;
+  if (draw || rulerKey !== lastRulerKey) { lastRulerKey = rulerKey; drawRuler(); }
+  if (draw) {
+    if (!isSourceMode()) updateSafeOverlay();
+    updateKfGraphs();
+    syncInspectorPlayhead();
+    syncFxEditors();
+    syncColorPlayhead();
+    updateTimecode(dur);
+  }
   updateMeterUI(dt);
-  updateTimecode(dur);
   if (isSourceMode()) updateSourceScrub();
   if (state.exporting && !state.rendering) {
     const w = exportWindow;
@@ -12787,7 +13915,9 @@ function loop(ts) {
     els.exportProgress.style.width = pct.toFixed(1) + "%";
     els.exportTitle.textContent = `Exporting… ${pct.toFixed(0)}%`;
   }
-  requestAnimationFrame(loop);
+  idleAudio(ts);
+  if (loopBusy(ts)) requestAnimationFrame(loop);
+  else loopSleep = setTimeout(() => { loopSleep = 0; lastTs = null; requestAnimationFrame(loop); }, IDLE_MS);   // a nap is not playback time
 }
 
 /* ═══════════════════════════ EXPORT ═══════════════════════════ */
@@ -12855,28 +13985,308 @@ function updateExportProfileNote(id) {
     } else if (getSetting("encodeProfile")) {
       els.exportProfileHint.textContent = "Browser default — saved when you change this dropdown.";
     } else {
-      els.exportProfileHint.textContent = "Using server default from encoding-profiles.json.";
+      els.exportProfileHint.textContent = "Raw ffmpeg arguments from encoding-profiles.json.";
     }
   }
 }
+
+/* ── Delivery presets (delivery.js) ──
+   The Preset dropdown lists the delivery presets (YouTube, Reels, Broadcast…,
+   saved ones, Custom) and, last, the raw encoding profiles. A delivery preset
+   fills the controls below it; any change makes it "modified" and is kept as
+   the browser's last settings. Values: "d:<preset id>" / "p:<profile id>". */
+const Delivery = window.FableCutDelivery;
+let deliveryInfo = { encoders: null, saved: {} };
+let dlvSpec = null;
+let dlvNotes = [];
+async function fetchDeliveryInfo() {
+  if (!state.connected) return;
+  try {
+    const r = await fetch("/api/export/presets", { cache: "no-store" });
+    if (!r.ok) return;
+    const d = await r.json();
+    deliveryInfo = { encoders: Array.isArray(d.encoders) ? d.encoders : null, saved: d.saved && typeof d.saved === "object" ? d.saved : {} };
+  } catch { }
+}
+function deliveryOpts() {
+  return { available: deliveryInfo.encoders ? new Set(deliveryInfo.encoders) : null, presets: deliveryInfo.saved };
+}
+function normalizeDelivery(input) { return Delivery.normalize(input, deliveryOpts()); }
+/** What an export uses when nobody picks: the project's pin, else this browser's last choice. */
+function exportChoice() {
+  if (project.delivery) return { kind: "delivery", spec: project.delivery, source: "project" };
+  if (project.encodeProfile) return { kind: "profile", id: project.encodeProfile, source: "project" };
+  const kind = getSetting("exportKind") || (getSetting("encodeProfile") ? "profile" : "delivery");
+  if (kind === "profile") return { kind, id: effectiveEncodeProfileId(), source: "browser" };
+  const last = getSetting("delivery");
+  return { kind: "delivery", spec: last && typeof last === "object" ? last : Delivery.DEFAULT_PRESET, source: last ? "browser" : "default" };
+}
+function selectedExportChoice() {
+  const v = els.exportProfileSel?.value || "";
+  return v.startsWith("p:") ? { kind: "profile", id: v.slice(2) } : { kind: "delivery", id: v.slice(2) || Delivery.DEFAULT_PRESET };
+}
 function populateExportProfileSelect() {
-  if (!els.exportProfileSel) return;
+  const sel = els.exportProfileSel;
+  if (!sel) return;
+  const choice = exportChoice();
+  let cur;
+  if (choice.kind === "delivery") {
+    const n = normalizeDelivery(choice.spec);
+    dlvSpec = n.spec; dlvNotes = n.notes;
+    cur = "d:" + dlvSpec.preset;
+  } else cur = "p:" + choice.id;
+  const opt = (v, label) => `<option value="${escapeHtml(v)}">${escapeHtml(label)}</option>`;
+  let html = Delivery.presetGroups(deliveryInfo.saved).map((g) =>
+    `<optgroup label="${escapeHtml(g.group)}">${g.items.map((it) => opt("d:" + it.id, it.label)).join("")}</optgroup>`).join("");
   const ids = Object.keys(encodeProfiles.profiles);
-  const cur = effectiveEncodeProfileId();
   // a project/browser default naming a deleted profile must stay visible rather
   // than silently falling through to whichever option happens to be first
-  if (cur && !ids.includes(cur)) ids.unshift(cur);
-  els.exportProfileSel.innerHTML = ids.map((id) => {
+  if (choice.kind === "profile" && !ids.includes(choice.id)) ids.unshift(choice.id);
+  html += `<optgroup label="Encoding profiles (encoding-profiles.json)">${ids.map((id) => {
     const p = encodeProfiles.profiles[id];
-    const sel = id === cur ? " selected" : "";
-    const label = p ? (p.label || id) : `${id} (not defined on the server)`;
-    return `<option value="${escapeHtml(id)}"${sel}>${escapeHtml(label)}</option>`;
-  }).join("");
-  updateExportProfileNote(els.exportProfileSel.value || cur || "delivery");
+    return opt("p:" + id, p ? (p.label || id) : `${id} (not defined on the server)`);
+  }).join("")}</optgroup>`;
+  sel.innerHTML = html;
+  sel.value = cur;
+  if (sel.value !== cur) sel.value = "d:" + Delivery.DEFAULT_PRESET;
+  syncExportChoiceUi(choice.source);
+}
+/** source: where the current settings came from, for the hint line. */
+function syncExportChoiceUi(source) {
+  const c = selectedExportChoice();
+  const isD = c.kind === "delivery";
+  $("dlvBody")?.classList.toggle("hidden", !isD);
+  $("dlvSaveBtn")?.classList.toggle("hidden", !isD);
+  $("dlvDeleteBtn")?.classList.toggle("hidden", !(isD && deliveryInfo.saved[c.id]));
+  $("dlvSaveRow")?.classList.add("hidden");
+  if (!isD) {
+    updateExportProfileNote(c.id);
+    const w = $("dlvWarn"); if (w) { w.textContent = ""; w.classList.add("hidden"); }
+    return;
+  }
+  if (!dlvSpec || dlvSpec.preset !== c.id) {
+    const n = normalizeDelivery(c.id);
+    dlvSpec = n.spec; dlvNotes = n.notes;
+    source = "preset";
+  }
+  dlvSource = source || dlvSource;
+  fillDeliveryControls();
+  refreshDeliveryNotes();
+}
+let dlvSource = "default";
+function deliveryCanvas() {
+  return { w: els.preview?.width || project.width, h: els.preview?.height || project.height, region: getExportFrame() };
+}
+function deliveryFrame(spec) {
+  const cv = deliveryCanvas();
+  return Delivery.reframe(spec, cv.w, cv.h, cv.region);
+}
+function deliveryFileName(spec, fps) {
+  const fr = deliveryFrame(spec);
+  return Delivery.renderFilename(spec.filename, spec, {
+    project: project.name.replace(/[^\w\- ]+/g, "").trim() || "export",
+    width: fr.outW, height: fr.outH, fps: fps || spec.fps || projectFps(), range: exportRangeMode(),
+  });
+}
+const dlvVal = (id) => $(id)?.value ?? "";
+function setOptions(sel, items, value) {
+  if (!sel) return;
+  sel.innerHTML = items.map(([v, label, disabled]) =>
+    `<option value="${escapeHtml(String(v))}"${disabled ? " disabled" : ""}>${escapeHtml(label)}</option>`).join("");
+  sel.value = String(value);
+}
+function showField(id, on) { $(id)?.classList.toggle("hidden", !on); }
+function fillDeliveryControls() {
+  const sp = dlvSpec, v = sp.video, a = sp.audio, C = Delivery.CODECS[v.codec];
+  const fr = deliveryFrame({ ...sp, width: null, height: null });
+  const avail = deliveryOpts().available;
+  // resolution
+  const res = [["", `Picture size (${fr.outW} × ${fr.outH})`]];
+  for (const [w, h, label] of Delivery.RESOLUTIONS) res.push([`${w}x${h}`, `${w} × ${h} · ${label}`]);
+  res.push(["custom", "Custom…"]);
+  let rv = sp.width ? `${sp.width}x${sp.height}` : "";
+  if (rv && !res.some((r) => r[0] === rv)) rv = "custom";
+  if (dlvCustomRes && sp.width) rv = "custom";
+  setOptions($("dlvRes"), res, rv);
+  showField("dlvWhField", rv === "custom");
+  if (rv === "custom") { $("dlvW").value = sp.width; $("dlvH").value = sp.height; }
+  showField("dlvReframeField", !!sp.width);
+  $("dlvReframe").value = sp.reframe;
+  setOptions($("dlvFps"), [["", `Project (${projectFps()} fps)`], ...Delivery.FPS_CHOICES.map((f) => [f, `${f} fps`])], sp.fps ?? "");
+  setOptions($("dlvCodec"), Object.entries(Delivery.CODECS).map(([k, c]) => {
+    const none = avail && !Delivery.encodersFor(k, avail).length;
+    return [k, c.label + (none ? " — not in this ffmpeg" : ""), none && k !== v.codec];
+  }), v.codec);
+  const encs = Delivery.encodersFor(v.codec, avail);
+  setOptions($("dlvEncoder"), (encs.length ? encs : [v.encoder]).map((e) => [e, Delivery.ENCODERS[e]?.label || e]), v.encoder);
+  showField("dlvEncoderField", encs.length > 1);
+  showField("dlvProfileField", !!C.profiles);
+  if (C.profiles) setOptions($("dlvProfile"), Object.entries(C.profiles), v.profile);
+  const fixed = v.rate === "fixed";
+  showField("dlvRateField", !fixed);
+  if (!fixed) setOptions($("dlvRate"), C.rate.map((r) => [r, { crf: "CRF (constant quality)", vbr: "VBR (variable bitrate)", cbr: "CBR (constant bitrate)" }[r]]), v.rate);
+  showField("dlvCrfField", v.rate === "crf");
+  showField("dlvBitrateField", v.rate === "vbr" || v.rate === "cbr");
+  showField("dlvMaxrateField", v.rate === "crf" || v.rate === "vbr");
+  for (const f of ["dlvKeyintField", "dlvSpeedField"]) showField(f, !fixed);
+  if (!fixed) {
+    const crf = $("dlvCrf"); crf.min = C.crf[0]; crf.max = C.crf[1];
+    if (document.activeElement !== crf) crf.value = v.crf;
+    if (document.activeElement !== $("dlvBitrate")) $("dlvBitrate").value = +(v.bitrate / 1000).toFixed(2);
+    if (document.activeElement !== $("dlvMaxrate")) $("dlvMaxrate").value = v.maxrate ? +(v.maxrate / 1000).toFixed(2) : "";
+    if (document.activeElement !== $("dlvKeyint")) $("dlvKeyint").value = v.keyint;
+    $("dlvSpeed").value = v.speed;
+  }
+  const E = Delivery.ENCODERS[v.encoder] || {};
+  const pix = C.pixFmts.filter((f) => !E.pix || E.pix.includes(f));
+  const PIX = { yuv420p: "4:2:0 8-bit", yuv422p: "4:2:2 8-bit", yuv444p: "4:4:4 8-bit", yuv420p10le: "4:2:0 10-bit", yuv422p10le: "4:2:2 10-bit", yuv444p10le: "4:4:4 10-bit" };
+  setOptions($("dlvPixFmt"), (pix.includes(v.pixFmt) ? pix : [v.pixFmt, ...pix]).map((f) => [f, `${PIX[f] || f} (${f})`]), v.pixFmt);
+  $("dlvPixFmt").disabled = v.codec === "prores" || v.codec === "dnxhr" || pix.length < 2;
+  setOptions($("dlvColor"), Object.entries(Delivery.COLORS).map(([k, c]) => [k, c.label]), sp.color);
+  setOptions($("dlvContainer"), C.containers.map((k) => [k, Delivery.CONTAINERS[k].label]), sp.container);
+  // audio
+  setOptions($("dlvACodec"), Object.entries(Delivery.AUDIO).filter(([, A]) => A.containers.includes(sp.container)).map(([k, A]) => [k, A.label]), a.codec);
+  const A = Delivery.AUDIO[a.codec];
+  showField("dlvABitrateField", !!A.bitrate);
+  if (A.bitrate) {
+    const steps = [64, 96, 128, 160, 192, 256, 320, 384, 448, 512].filter((k) => k >= A.bitrate[0] && k <= A.bitrate[1]);
+    if (!steps.includes(a.bitrate)) steps.push(a.bitrate), steps.sort((x, y) => x - y);
+    setOptions($("dlvABitrate"), steps.map((k) => [k, `${k} kb/s`]), a.bitrate);
+  }
+  showField("dlvARateField", a.codec !== "none" && a.codec !== "opus");
+  showField("dlvAChField", a.codec !== "none");
+  if (a.codec !== "none") { $("dlvARate").value = a.sampleRate; $("dlvACh").value = a.channels; }
+  showField("dlvLoudField", a.codec !== "none");
+  showField("dlvTpField", a.codec !== "none" && a.loudness != null);
+  if (a.codec !== "none") {
+    const opts = [["off", "Off — as mixed"], ...Delivery.LOUDNESS_TARGETS];
+    if (a.loudness != null && !opts.some((o) => +o[0] === a.loudness)) opts.push([a.loudness, `${a.loudness} LUFS`]);
+    setOptions($("dlvLoud"), opts, a.loudness == null ? "off" : a.loudness);
+    if (a.loudness != null && document.activeElement !== $("dlvTp")) $("dlvTp").value = a.truePeak;
+  }
+  // file name + metadata (left alone while typing)
+  const fn = $("dlvFilename");
+  if (document.activeElement !== fn) fn.value = sp.filename;
+  for (const k of Delivery.META_KEYS) {
+    const el = $("dlvMeta" + k[0].toUpperCase() + k.slice(1));
+    if (el && document.activeElement !== el) el.value = sp.metadata[k] || "";
+  }
+  $("dlvTokens").textContent = "Tokens: " + Delivery.FILENAME_TOKENS.map((t) => `{${t}}`).join(" ");
+}
+let dlvCustomRes = false;
+/** The controls → a spec. `changed`: the control the user touched. */
+function readDeliveryControls(changed) {
+  const sp = dlvSpec;
+  const raw = { preset: sp.preset, video: { ...sp.video }, audio: { ...sp.audio }, metadata: {} };
+  const r = dlvVal("dlvRes");
+  dlvCustomRes = r === "custom";
+  if (r === "") { raw.width = null; raw.height = null; }
+  else if (r === "custom") {
+    if (changed === "dlvRes") { const fr = deliveryFrame(sp); raw.width = fr.outW; raw.height = fr.outH; }
+    else { raw.width = +dlvVal("dlvW") || null; raw.height = +dlvVal("dlvH") || null; }
+  } else { const [w, h] = r.split("x").map(Number); raw.width = w; raw.height = h; }
+  raw.reframe = dlvVal("dlvReframe");
+  raw.fps = dlvVal("dlvFps") === "" ? null : +dlvVal("dlvFps");
+  raw.container = dlvVal("dlvContainer");
+  raw.color = dlvVal("dlvColor");
+  if (changed === "dlvCodec") raw.video = { codec: dlvVal("dlvCodec"), speed: sp.video.speed, keyint: sp.video.keyint, maxrate: sp.video.maxrate, bitrate: sp.video.bitrate };
+  else {
+    const v = raw.video;
+    v.encoder = dlvVal("dlvEncoder") || v.encoder;
+    if (!$("dlvProfileField").classList.contains("hidden")) v.profile = dlvVal("dlvProfile");
+    if (v.rate !== "fixed") {
+      v.rate = dlvVal("dlvRate") || v.rate;
+      v.crf = +dlvVal("dlvCrf");
+      v.bitrate = Math.round(+dlvVal("dlvBitrate") * 1000) || v.bitrate;
+      v.maxrate = dlvVal("dlvMaxrate") === "" ? null : Math.round(+dlvVal("dlvMaxrate") * 1000);
+      v.keyint = +dlvVal("dlvKeyint");
+      v.speed = dlvVal("dlvSpeed");
+    }
+    v.pixFmt = dlvVal("dlvPixFmt");
+  }
+  const a = raw.audio;
+  a.codec = dlvVal("dlvACodec") || a.codec;
+  if (changed !== "dlvACodec") {
+    if (!$("dlvABitrateField").classList.contains("hidden")) a.bitrate = +dlvVal("dlvABitrate");
+    a.sampleRate = +dlvVal("dlvARate") || a.sampleRate;
+    a.channels = +dlvVal("dlvACh") || a.channels;
+    a.loudness = dlvVal("dlvLoud") === "off" || dlvVal("dlvLoud") === "" ? null : +dlvVal("dlvLoud");
+    if (dlvVal("dlvTp") !== "") a.truePeak = +dlvVal("dlvTp");
+  } else delete a.bitrate;
+  raw.filename = dlvVal("dlvFilename");
+  for (const k of Delivery.META_KEYS) raw.metadata[k] = dlvVal("dlvMeta" + k[0].toUpperCase() + k.slice(1));
+  return raw;
+}
+function onDeliveryControl(e) {
+  const id = e.target?.id || "";
+  if (!id.startsWith("dlv") || id === "dlvSaveName") return;
+  const n = normalizeDelivery(readDeliveryControls(id));
+  dlvSpec = n.spec; dlvNotes = n.notes;
+  dlvSource = "edited";
+  // text fields refresh the preview only; everything else may move other controls
+  if (e.type === "change") fillDeliveryControls();
+  refreshDeliveryNotes();
+}
+function deliveryModified() {
+  if (!dlvSpec) return false;
+  const base = normalizeDelivery(dlvSpec.preset).spec;
+  const strip = (x) => JSON.stringify({ ...x, metadata: null });
+  return strip(base) !== strip(dlvSpec);
+}
+function refreshDeliveryNotes() {
+  if (!dlvSpec) return;
+  const sp = dlvSpec, fr = deliveryFrame(sp), fps = sp.fps || projectFps();
+  const preset = Delivery.PRESETS[sp.preset] || deliveryInfo.saved[sp.preset];
+  const modified = deliveryModified();
+  if (els.exportProfileNote) els.exportProfileNote.textContent = preset?.note || "";
+  if (els.exportProfileHint) {
+    els.exportProfileHint.textContent = dlvSource === "project"
+      ? "Project default (delivery in project.json) — agents export with it too."
+      : modified ? `${preset?.label || "Preset"} · modified — Save preset… keeps these settings for every project.`
+        : dlvSource === "browser" ? "Your last settings in this browser." : "";
+  }
+  const range = exportRange(fps);
+  const size = Delivery.estimateSize(sp, { duration: range.dur, width: fr.outW, height: fr.outH, fps });
+  $("dlvSummary").textContent = `${Delivery.describe(sp, { width: fr.outW, height: fr.outH, fps })}` +
+    (size ? ` · about ${Delivery.fmtBytes(size)}` : "");
+  $("dlvFilePreview").textContent = "→ exports/" + deliveryFileName(sp, fps) + Delivery.CONTAINERS[sp.container].ext;
+  const cv = deliveryCanvas();
+  const warn = [...dlvNotes.map((n) => n[0].toUpperCase() + n.slice(1)),
+    ...Delivery.checks(sp, { duration: range.dur, fps, canvasW: cv.w, canvasH: cv.h, region: cv.region })];
+  const w = $("dlvWarn");
+  if (w) { w.textContent = warn.join(" · "); w.classList.toggle("hidden", !warn.length); }
+}
+async function saveDeliveryPreset() {
+  const name = $("dlvSaveName").value.trim();
+  if (!name) { $("dlvSaveName").focus(); return; }
+  const r = await fetch("/api/export/presets", { method: "POST", body: JSON.stringify({ name, spec: dlvSpec }) })
+    .then((x) => x.json()).catch((e) => ({ error: String(e) }));
+  if (!r.ok) { alert("Could not save the preset: " + (r.error || "unknown error")); return; }
+  await fetchDeliveryInfo();
+  setSetting("exportKind", "delivery");
+  setSetting("delivery", { ...dlvSpec, preset: r.id });
+  if (!project.delivery) populateExportProfileSelect();
+  else { els.exportProfileSel.value = "d:" + r.id; dlvSpec = null; syncExportChoiceUi("preset"); }
+}
+async function deleteDeliveryPreset() {
+  const c = selectedExportChoice();
+  if (c.kind !== "delivery" || !deliveryInfo.saved[c.id]) return;
+  const r = await fetch("/api/export/presets/delete", { method: "POST", body: JSON.stringify({ id: c.id }) }).then((x) => x.json()).catch(() => ({}));
+  if (!r.ok) { alert("Could not delete the preset: " + (r.error || "unknown error")); return; }
+  await fetchDeliveryInfo();
+  els.exportProfileSel.value = "d:" + Delivery.DEFAULT_PRESET;
+  dlvSpec = null;
+  populateExportProfileSelect();
+  els.exportProfileSel.value = "d:" + Delivery.DEFAULT_PRESET;
+  syncExportChoiceUi("preset");
 }
 function syncExportProfileVisibility() {
   const show = els.engineFast.checked && !els.engineFast.disabled;
   els.exportProfileRow?.classList.toggle("hidden", !show);
+  // the batch list and the queue are Fast export (ffmpeg) only
+  for (const id of ["dlvBatch", "btnQueueExport", "btnBatchExport"]) $(id)?.classList.toggle("hidden", !show);
+  if (!show) { const w = $("dlvWarn"); if (w) w.classList.add("hidden"); }
+  else if (selectedExportChoice().kind === "delivery") refreshDeliveryNotes();
 }
 
 function syncExportWcOpts() {
@@ -12975,14 +14385,30 @@ async function openExportSetup() {
     warn.textContent = "";
     warn.classList.add("hidden");
   }
+  // missing files export as their "Media offline" slate — say so before the render
+  const offUsed = project.media.filter((m) => isMediaOffline(m.id) && MediaLib.placements(usageDoc(), m.id).length);
+  if (offUsed.length && warn) {
+    warn.textContent = (warn.textContent ? warn.textContent + " " : "") +
+      `${offUsed.length === 1 ? `“${offUsed[0].name}” is` : offUsed.length + " files are"} offline and will export as “Media offline” — relink first (right-click in the bin → Relink…).`;
+    warn.classList.remove("hidden");
+  }
   fillExportRangeSelect();
   syncExportRangeUi();
   syncExportProfileVisibility();
-  fetchEncodeProfiles().then(() => {
+  Promise.all([fetchEncodeProfiles(), fetchDeliveryInfo()]).then(() => {
     populateExportProfileSelect();
+    syncExportProfileVisibility();
+    renderBatchList();
+    renderQueue();
     els.exportSetup.classList.remove("hidden");
+    // aria-modal hides what is behind — focus has to come inside
+    if (!els.exportSetup.contains(document.activeElement)) $("exportRangeSel")?.focus();
   });
 }
+function closeExportSetup() {
+  els.exportSetup.classList.add("hidden");
+  $("btnExport")?.focus();
+}
 function startChosenExport() {
   persistExportWcOpts();
   const useFast = els.engineFast.checked && !els.engineFast.disabled;
@@ -13000,8 +14426,15 @@ function startChosenExport() {
     alert("Export range is empty — IN/OUT is at or past the end of the timeline. Choose Entire timeline, or move the markers.");
     return;
   }
-  els.exportSetup.classList.add("hidden");
-  if (useFast) fastExport();
+  closeExportSetup();
+  if (useFast) {
+    const c = selectedExportChoice();
+    setSetting("exportKind", c.kind);
+    if (c.kind === "delivery") {
+      setSetting("delivery", dlvSpec);
+      fastExport({ delivery: dlvSpec });
+    } else fastExport({ profile: c.id });
+  }
   else if (useSecond && state.connected && state.ffmpeg && state.webCodecs && !getExportFrame()) webCodecsExport();
   else startExport();
 }
@@ -13043,8 +14476,8 @@ function syncExportRangeUi() {
 /* ── Fast export ── */
 let renderCancelled = false;
 let exportAbort = null;
-function beginExportWindow() {
-  exportWindow = exportRange();
+function beginExportWindow(fps) {
+  exportWindow = exportRange(fps);
   return exportWindow;
 }
 function endExportWindow() {
@@ -13052,6 +14485,9 @@ function endExportWindow() {
 }
 let exportCropCanvas = null;
 let exportCropCtx = null;
+/* A delivery export sends the whole canvas; ffmpeg crops the export frame
+   (and reframes) itself, so one stream can feed any output shape. */
+let exportFullCanvas = false;
 function canvasTaintError(e) {
   const tainted = e && (e.name === "SecurityError" || /taint/i.test(String(e.message || e)));
   return tainted
@@ -13060,7 +14496,7 @@ function canvasTaintError(e) {
 }
 function exportSourceCanvas() {
   const ef = getExportFrame();
-  if (!ef) return els.preview;
+  if (!ef || exportFullCanvas) return els.preview;
   if (!exportCropCanvas) exportCropCanvas = document.createElement("canvas");
   if (exportCropCanvas.width !== ef.w) exportCropCanvas.width = ef.w;
   if (exportCropCanvas.height !== ef.h) exportCropCanvas.height = ef.h;
@@ -13087,6 +14523,22 @@ function snapshotExportFrame() {
     return { kind: "rgba", data: img.data, w: src.width, h: src.height };
   } catch (e) { throw canvasTaintError(e); }
 }
+let exportRgbaOff = null, exportRgbaCtx = null;
+/** Raw RGBA of the frame, for outputs that keep more than JPEG's 4:2:0 8-bit
+ *  (ProRes, DNxHR, FFV1, 10-bit, 4:2:2 / 4:4:4). */
+function snapshotExportRgba() {
+  const src = exportSourceCanvas();
+  try {
+    if (!exportRgbaOff || exportRgbaOff.width !== src.width || exportRgbaOff.height !== src.height) {
+      exportRgbaOff = typeof OffscreenCanvas === "function" ? new OffscreenCanvas(src.width, src.height)
+        : Object.assign(document.createElement("canvas"), { width: src.width, height: src.height });
+      exportRgbaCtx = exportRgbaOff.getContext("2d", { alpha: false, willReadFrequently: true });
+    }
+    exportRgbaCtx.drawImage(src, 0, 0);
+    const img = exportRgbaCtx.getImageData(0, 0, src.width, src.height);
+    return new Uint8Array(img.data.buffer, img.data.byteOffset, img.data.byteLength);
+  } catch (e) { throw canvasTaintError(e); }
+}
 const JPEG_WORKER_SRC = `"use strict";
 self.onmessage = async (e) => {
   const { id, bmp, quality } = e.data;
@@ -13171,6 +14623,8 @@ function resetExportCanvases() {
   }
   adjScratch.width = adjScratch.width;
   scratch.width = scratch.width;
+  if (pixGL.stage) pixGL.stage.width = pixGL.stage.width;   // the GPU pixel pass keeps these between frames
+  pixGL.outs.clear();
   exportSnapOff = null;
   exportSnapCtx = null;
 }
@@ -13731,20 +15185,27 @@ async function prepareFrameAssets(t) {
 }
 /** opts.job: an agent's export job id — progress and the result go back to
  *  the server instead of an alert / download (nobody may be watching).
- *  opts.profile: encoding profile id for this run. */
+ *  opts.profile: encoding profile id for this run.
+ *  opts.delivery: a delivery spec (delivery.js) instead of a profile.
+ *  opts.deliveries: [{delivery, name?}] — several files from one render (same fps).
+ *  opts.silent: no overlay, alert or download (the export queue shows it);
+ *  opts.onProgress(0…1). Resolves {outputs:[{file, ok, src?, error?}]} or {error, cancelled}. */
 async function fastExport(opts = {}) {
-  if (state.exporting) return;
+  if (state.exporting) return { error: "an export is already running" };
   const job = opts.job || null;
   pause();
   state.exporting = true; state.rendering = true; renderCancelled = false;
   exportAbort = new AbortController();
   const signal = exportAbort.signal;
-  els.exportOverlay.classList.remove("hidden");
+  if (!opts.silent) els.exportOverlay.classList.remove("hidden");
   els.exportProgress.style.width = "0%";
   els.exportNote.textContent = "Rendering frames → ffmpeg. You can switch tabs; export continues.";
   restoreExportVideoState();
-  const { start: t0, end: t1, frames } = beginExportWindow();
-  const fps = projectFps();
+  const deliveries = opts.deliveries || (opts.delivery ? [{ delivery: opts.delivery }] : null);
+  const delivery = deliveries ? deliveries[0].delivery : null;
+  const fps = (delivery && delivery.fps) || projectFps();
+  let result = null;
+  const { start: t0, end: t1, frames } = beginExportWindow(fps);
   let sessId = null;
   let uploadError = null;
   const setError = (err) => { if (!uploadError) uploadError = err; };
@@ -13752,12 +15213,15 @@ async function fastExport(opts = {}) {
     els.exportTitle.textContent = "Mixing audio…";
     const wav = await renderAudioMix(t0, t1);
     if (renderCancelled) throw new Error("cancelled");
-    const profileId = job ? (opts.profile || effectiveEncodeProfileId())
-      : els.exportProfileSel?.value || effectiveEncodeProfileId();
-    const jpegQ = exportProfileMeta(profileId).jpegQuality ?? 0.95;
+    const profileId = opts.profile || effectiveEncodeProfileId();
+    const cv = deliveryCanvas();
     const begin = await fetch("/api/export/begin", {
       method: "POST",
-      body: JSON.stringify({
+      body: JSON.stringify(delivery ? {
+        fps, duration: frames / fps,
+        deliveries: deliveries.map((d) => ({ delivery: d.delivery, name: d.name || deliveryFileName(d.delivery, fps) })),
+        canvasW: cv.w, canvasH: cv.h, region: cv.region, hasAudio: !!wav,
+      } : {
         fps,
         name: project.name.replace(/[^\w\- ]+/g, "") || "export",
         profile: profileId,
@@ -13767,6 +15231,9 @@ async function fastExport(opts = {}) {
     }).then((r) => r.json());
     if (!begin.id) throw new Error(begin.error || "export begin failed");
     sessId = begin.id;
+    const jpegQ = delivery ? begin.jpegQuality ?? 0.95 : exportProfileMeta(profileId).jpegQuality ?? 0.95;
+    const rgba = begin.input === "rgba";
+    exportFullCanvas = !!delivery;
     if (wav) {
       const r = await fetch("/api/export/audio?id=" + sessId, { method: "POST", body: wav, signal });
       if (!r.ok) throw new Error("audio upload failed");
@@ -13774,6 +15241,7 @@ async function fastExport(opts = {}) {
     await loadProjectFonts();
     resetExportCanvases();
     await armExportCors();
+    await useOriginalPlayers();   // proxies are for editing — export reads the originals
     // JPEG off the compositor thread: snapshot is sync, encode/upload run ahead
     // under backpressure. Awaiting toBlob every frame was slower than ffmpeg.
     const up = createExportUploader(sessId, {
@@ -13807,10 +15275,11 @@ async function fastExport(opts = {}) {
       await seekVideosTo(t, { queueBusy });
       await prepareFrameAssets(t);
       drawFrame(t);
-      const snap = snapshotExportFrame();
+      const snap = rgba ? { kind: "raw", px: snapshotExportRgba() } : snapshotExportFrame();
       pixelsInflight++;
       let jpegP;
-      if (snap.kind === "bmp") {
+      if (snap.kind === "raw") jpegP = Promise.resolve(snap.px);
+      else if (snap.kind === "bmp") {
         jpegP = workers ? workers.encode(snap.bmp, jpegQ) : jpegFromBitmap(snap.bmp, jpegQ);
       } else {
         const c = document.createElement("canvas");
@@ -13835,6 +15304,7 @@ async function fastExport(opts = {}) {
       const pct = ((f + 1) / frames) * 100;
       els.exportProgress.style.width = pct.toFixed(1) + "%";
       els.exportTitle.textContent = `Rendering… ${pct.toFixed(0)}%`;
+      if (opts.onProgress) opts.onProgress(0.97 * (f + 1) / frames);
       if (job) reportExportJob(job, { progress: 0.97 * (f + 1) / frames });
     }
     await pixelChain;
@@ -13847,7 +15317,23 @@ async function fastExport(opts = {}) {
     }
     const end = await fetch("/api/export/end?id=" + sessId, { method: "POST", signal }).then((r) => r.json());
     if (!end.src) throw new Error(end.error || "encode failed");
-    if (job) await reportExportJob(job, { status: "done", src: end.src }, true);
+    const outs = end.outputs || [{ file: decodeURIComponent(end.src.split("/").pop()), ok: true, src: end.src }];
+    // what each output was asked to be, beside what came out
+    result = { outputs: outs.map((o, i) => ({ ...o, ...(begin.outputs && begin.outputs[i] ? { summary: begin.outputs[i].summary, notes: begin.outputs[i].notes } : {}) })) };
+    if (job) await reportExportJob(job, { status: "done", src: end.src, ...(delivery ? { result: { summary: begin.summary, notes: begin.notes || [], outputs: result.outputs } } : {}) }, true);
+    else if (opts.silent) { /* the queue lists the files */ }
+    else if (delivery && result.outputs[0]) {
+      const o = result.outputs[0];
+      exportQueue.push({ id: "q" + Math.random().toString(36).slice(2, 8), label: queueLabel(delivery), spec: delivery,
+        name: String(o.file || "").replace(/\.[^.]+$/, ""), range: exportRangeMode(), status: "done", progress: 1,
+        src: o.src, file: o.file, report: o.report || null });
+      renderQueue();
+      toast(o.report && !o.report.ok ? `Exported ${o.file} — check: ${o.report.checks.filter((c) => !c.ok).map((c) => c.text).join("; ")} (Export → Queue)` : `Exported ${o.file}${o.report ? " — checks passed" : ""}`);
+      const a = document.createElement("a");
+      a.href = end.src;
+      a.download = decodeURIComponent(end.src.split("/").pop());
+      a.click();
+    }
     else {
       const a = document.createElement("a");
       a.href = end.src;
@@ -13857,17 +15343,198 @@ async function fastExport(opts = {}) {
   } catch (e) {
     if (sessId) fetch("/api/export/end?id=" + sessId + "&discard=1", { method: "POST" }).catch(() => { });
     const msg = e?.name === "AbortError" ? "cancelled" : String(e.message || e);
+    result = { error: msg, cancelled: msg === "cancelled" };
     if (job) await reportExportJob(job, { status: "failed", error: msg }, true);
-    else if (msg !== "cancelled") alert("Export failed: " + msg);
+    else if (msg !== "cancelled" && !opts.silent) alert("Export failed: " + msg);
   } finally {
     exportAbort = null;
+    exportFullCanvas = false;
     restoreExportVideoState();
     endExportWindow();
     state.exporting = false; state.rendering = false;
+    releaseOriginalPlayers();
     els.exportOverlay.classList.add("hidden");
     els.exportNote.textContent = "Rendering your sequence in real time. Keep this tab focused.";
     if (runtime.pendingSync) syncFromServer();
   }
+  return result;
+}
+
+/* ── Export queue ──
+   Renders waiting outputs back to back. Outputs that share a frame rate and a
+   range go out in ONE render: the frames are drawn once and every output's
+   ffmpeg encodes them (up to 8 at a time). Lives in this tab only. */
+const exportQueue = [];
+let queueRunning = false, queueStop = false;
+function queueLabel(spec) {
+  const p = Delivery.PRESETS[spec.preset] || deliveryInfo.saved[spec.preset];
+  return p ? p.label : "Custom";
+}
+function queueAdd(spec, name) {
+  const fps = spec.fps || projectFps();
+  exportQueue.push({
+    id: "q" + Math.random().toString(36).slice(2, 8), label: queueLabel(spec), spec,
+    name: name || deliveryFileName(spec, fps), range: exportRangeMode(), status: "pending", progress: 0,
+  });
+  renderQueue();
+}
+function openQueue() {
+  renderQueue();
+  $("exportQueue").classList.remove("hidden");
+  ($("btnQueueStart").disabled ? $("btnQueueClose") : $("btnQueueStart")).focus();
+}
+function closeQueue() {
+  if (queueRunning) return;
+  $("exportQueue").classList.add("hidden");
+  $("btnExport")?.focus();
+}
+function renderQueue() {
+  const list = $("exportQueueList");
+  if (!list) return;
+  const pending = exportQueue.filter((q) => q.status === "pending").length;
+  const done = exportQueue.filter((q) => q.status === "done").length;
+  $("exportQueueNote").textContent = queueRunning
+    ? "Exporting — outputs with the same frame rate and range share one render."
+    : exportQueue.length ? `${pending} waiting · ${done} done` : "Nothing queued — pick settings in Export and press Add to queue.";
+  const btnOpen = $("btnOpenQueue");
+  if (btnOpen) btnOpen.textContent = exportQueue.length ? `Queue · ${pending || exportQueue.length}` : "Queue";
+  const start = $("btnQueueStart");
+  start.textContent = queueRunning ? "Stop" : "Start";
+  start.disabled = !queueRunning && !pending;
+  $("btnQueueClose").disabled = queueRunning;
+  $("btnQueueClear").disabled = queueRunning || !exportQueue.some((q) => q.status !== "pending" && q.status !== "running");
+  if (!exportQueue.length) { list.innerHTML = `<li class="xq-empty">The queue is empty</li>`; return; }
+  list.innerHTML = exportQueue.map((q) => {
+    const ext = Delivery.CONTAINERS[q.spec.container].ext;
+    const fr = deliveryFrame(q.spec), fps = q.spec.fps || projectFps();
+    const status = q.status === "running" ? `Rendering… ${Math.round(q.progress * 100)}%`
+      : q.status === "done" ? `Done → exports/${q.file || q.name + ext}`
+        : q.status === "failed" ? `Failed: ${q.error || "unknown error"}`
+          : q.status === "cancelled" ? "Stopped" : "Waiting";
+    const actions = [
+      q.status === "done" && q.src ? `<a class="btn tiny" href="${escapeHtml(q.src)}" target="_blank" rel="noopener" download>Open</a>` : "",
+      q.status === "failed" || q.status === "cancelled" ? `<button type="button" class="btn tiny" data-q-retry="${q.id}">Retry</button>` : "",
+      q.status !== "running" ? `<button type="button" class="btn tiny" data-q-remove="${q.id}" title="Remove from the queue">✕</button>` : "",
+    ].join("");
+    return `<li class="${q.status}" data-q="${q.id}"><div class="xq-main"><b>${escapeHtml(q.label)} — ${escapeHtml(q.name + ext)}</b>` +
+      `<span class="xq-sub">${escapeHtml(Delivery.describe(q.spec, { width: fr.outW, height: fr.outH, fps }))} · ${q.range === "in-out" ? "IN–OUT" : "entire timeline"}</span>` +
+      (q.status === "running" ? `<div class="progress"><div class="progress-fill" style="width:${(q.progress * 100).toFixed(1)}%"></div></div>` : "") +
+      `<span class="xq-status">${escapeHtml(status)}</span>` +
+      (q.report ? `<span class="xq-report${q.report.ok ? "" : " warn"}">${q.report.ok ? "✓ " : ""}${escapeHtml(q.report.line)}</span>` : "") +
+      `</div><div class="xq-actions">${actions}</div></li>`;
+  }).join("");
+}
+function renderQueueProgress() {
+  for (const q of exportQueue) {
+    if (q.status !== "running") continue;
+    const li = document.querySelector(`#exportQueueList li[data-q="${q.id}"]`);
+    if (!li) continue;
+    const fill = li.querySelector(".progress-fill"), st = li.querySelector(".xq-status");
+    if (fill) fill.style.width = (q.progress * 100).toFixed(1) + "%";
+    if (st) st.textContent = `Rendering… ${Math.round(q.progress * 100)}%`;
+  }
+}
+async function runQueue() {
+  if (queueRunning || state.exporting) return;
+  if (!(state.connected && state.ffmpeg)) { alert("The export queue needs the server and ffmpeg (Fast export)."); return; }
+  queueRunning = true; queueStop = false;
+  renderQueue();
+  try {
+    while (!queueStop) {
+      const first = exportQueue.find((q) => q.status === "pending");
+      if (!first) break;
+      const fps = first.spec.fps || projectFps();
+      const group = exportQueue.filter((q) => q.status === "pending" && (q.spec.fps || projectFps()) === fps && q.range === first.range).slice(0, 8);
+      for (const q of group) { q.status = "running"; q.progress = 0; q.error = null; }
+      renderQueue();
+      exportRangeForced = first.range === "in-out" && hasWorkArea() ? "in-out" : "entire";
+      let res;
+      try {
+        res = await fastExport({
+          deliveries: group.map((q) => ({ delivery: q.spec, name: q.name })), silent: true,
+          onProgress: (f) => { for (const q of group) q.progress = f; renderQueueProgress(); },
+        });
+      } finally { exportRangeForced = null; }
+      group.forEach((q, i) => {
+        const o = res && res.outputs && res.outputs[i];
+        if (o && o.ok) Object.assign(q, { status: "done", src: o.src, file: o.file, progress: 1, report: o.report || null });
+        else if (res && res.cancelled) q.status = "cancelled";
+        else Object.assign(q, { status: "failed", error: (o && o.error) || (res && res.error) || "export failed" });
+      });
+      renderQueue();
+    }
+  } finally {
+    queueRunning = false;
+    renderQueue();
+  }
+  const done = exportQueue.filter((q) => q.status === "done").length, failed = exportQueue.filter((q) => q.status === "failed").length;
+  const warned = exportQueue.filter((q) => q.status === "done" && q.report && !q.report.ok).length;
+  if (done || failed) toast(`Export queue: ${done} done${failed ? `, ${failed} failed` : ""}${warned ? ` — ${warned} with warnings` : ""}`);
+}
+function stopQueue() {
+  queueStop = true;
+  renderCancelled = true;
+  try { exportAbort?.abort(); } catch { }
+}
+
+/* ── Batch outputs (project.outputs) ──
+   The project's list of files to make from one timeline. Each entry is a
+   delivery spec plus {id, on}; "Export checked" queues the checked ones. */
+function projectOutputs() { return Array.isArray(project.outputs) ? project.outputs : []; }
+function setProjectOutputs(list) {
+  project.outputs = list.length ? list : null;
+  scheduleSave();
+  renderBatchList();
+}
+function addBatchOutput(spec) {
+  const list = projectOutputs().slice();
+  if (list.length >= 16) { toast("At most 16 batch outputs"); return; }
+  list.push({ id: "o_" + Math.random().toString(36).slice(2, 8), on: true, ...spec });
+  setProjectOutputs(list);
+}
+const TYPICAL_SET = [
+  { preset: "master", filename: "{project}_master_{res}" },
+  { preset: "youtube", filename: "{project}_youtube_{res}" },
+  { preset: "instagram-reels", filename: "{project}_reel_{res}" },
+  { preset: "custom", width: 1080, height: 1080, filename: "{project}_square_{res}" },
+  { preset: "web", filename: "{project}_preview_{res}" },
+];
+function renderBatchList() {
+  const ul = $("dlvBatchList");
+  if (!ul) return;
+  const list = projectOutputs();
+  const on = list.filter((o) => o.on !== false).length;
+  $("dlvBatchCount").textContent = list.length ? `· ${on} of ${list.length} checked` : "";
+  const be = $("btnBatchExport");
+  if (be) { be.disabled = !on; be.textContent = on ? `Export checked (${on})` : "Export checked"; }
+  if (!list.length) { ul.innerHTML = `<li class="bo-empty">No batch outputs yet — add the settings above, or a typical set</li>`; return; }
+  ul.innerHTML = list.map((o) => {
+    const sp = normalizeDelivery(o).spec, fr = deliveryFrame(sp), fps = sp.fps || projectFps();
+    return `<li class="${o.on === false ? "off" : ""}" data-o="${escapeHtml(o.id)}">` +
+      `<input type="checkbox" data-o-on="${escapeHtml(o.id)}"${o.on === false ? "" : " checked"} aria-label="Include ${escapeHtml(queueLabel(sp))}">` +
+      `<div class="bo-main"><b>${escapeHtml(deliveryFileName(sp, fps) + Delivery.CONTAINERS[sp.container].ext)}</b>` +
+      `<span>${escapeHtml(queueLabel(sp))} · ${escapeHtml(Delivery.describe(sp, { width: fr.outW, height: fr.outH, fps }))}</span></div>` +
+      `<button type="button" class="btn tiny" data-o-load="${escapeHtml(o.id)}" title="Show these settings above">Load</button>` +
+      `<button type="button" class="btn tiny" data-o-remove="${escapeHtml(o.id)}" title="Remove">✕</button></li>`;
+  }).join("");
+}
+function onBatchListClick(e) {
+  const t = e.target;
+  const id = t.dataset.oOn || t.dataset.oLoad || t.dataset.oRemove;
+  if (!id) return;
+  const list = projectOutputs().slice();
+  const i = list.findIndex((o) => o.id === id);
+  if (i < 0) return;
+  if (t.dataset.oOn) { list[i] = { ...list[i], on: t.checked }; setProjectOutputs(list); }
+  else if (t.dataset.oRemove) { list.splice(i, 1); setProjectOutputs(list); }
+  else if (t.dataset.oLoad) {
+    const { id: _id, on: _on, ...spec } = list[i];
+    const n = normalizeDelivery(spec);
+    els.exportProfileSel.value = "d:" + n.spec.preset;
+    if (els.exportProfileSel.value !== "d:" + n.spec.preset) els.exportProfileSel.value = "d:custom";
+    dlvSpec = n.spec; dlvNotes = n.notes;
+    syncExportChoiceUi("edited");
+  }
 }
 
 /* ── Agent-requested export (fablecut_export · POST /api/export/request) ──
@@ -13914,7 +15581,31 @@ async function runExportJob(ticket) {
   try {
     if (exportRange().frames < 1) return fail("the export range is empty — IN/OUT is at or past the end of the timeline");
     reportExportJob(ticket.id, { progress: 0 }, true);
-    await fastExport({ job: ticket.id, profile: ticket.profile });
+    // an explicit profile wins; then the job's delivery spec, the project's, else the raw default
+    const want = ticket.profile || ticket.deliveries ? null : ticket.delivery || project.delivery || null;
+    if (want || ticket.deliveries) await fetchDeliveryInfo();
+    if (ticket.deliveries) {
+      // one render per frame rate; the job reports every file at the end
+      const specs = ticket.deliveries.map((d) => normalizeDelivery(d).spec);
+      const groups = new Map();
+      for (const sp of specs) { const k = sp.fps || projectFps(); if (!groups.has(k)) groups.set(k, []); groups.get(k).push(sp); }
+      if (groups.size === 1) await fastExport({ job: ticket.id, deliveries: specs.map((delivery) => ({ delivery })) });
+      else {
+        const all = [];
+        let i = 0;
+        for (const group of groups.values()) {
+          const res = await fastExport({ deliveries: group.map((delivery) => ({ delivery })), silent: true,
+            onProgress: (f) => reportExportJob(ticket.id, { progress: (i + f) / groups.size }) });
+          i++;
+          if (res && res.cancelled) return reportExportJob(ticket.id, { status: "failed", error: "cancelled" }, true);
+          if (res && res.outputs) all.push(...res.outputs);
+          else all.push(...group.map((sp) => ({ file: deliveryFileName(sp), ok: false, error: (res && res.error) || "export failed" })));
+        }
+        const ok = all.find((o) => o.ok);
+        if (!ok) return fail(all.map((o) => o.error).join(" · "));
+        await reportExportJob(ticket.id, { status: "done", src: ok.src, result: { outputs: all } }, true);
+      }
+    } else await fastExport(want ? { job: ticket.id, delivery: normalizeDelivery(want).spec } : { job: ticket.id, profile: ticket.profile });
   } finally {
     exportRangeForced = null;
   }
@@ -14027,6 +15718,10 @@ async function runTrackJob(ticket, fail) {
    tracks), then measure it with color.js scopeStats. The user's playhead
    stays where it is. */
 async function renderStillAt(t) {
+  if (!runtime.forceOriginals) {   // measured and shown to agents as export renders it: the originals
+    await useOriginalPlayers();
+    try { return await renderStillAt(t); } finally { releaseOriginalPlayers(); }
+  }
   const waits = [];
   for (const c of mediaClips()) {
     if (!clipRenders(c) || !activeAt(c, t)) continue;
@@ -14047,6 +15742,7 @@ async function renderStillAt(t) {
 }
 async function runScopesJob(ticket, fail) {
   const wasPlaying = state.playing;
+  let heldOriginals = false;
   try {
     if (wasPlaying) pause();
     await loadProjectFonts();
@@ -14060,6 +15756,8 @@ async function runScopesJob(ticket, fail) {
     const kClip = ticket.mask && getClip(ticket.mask.clip), view = runtime.maskView;
     runtime.maskCapture = kClip ? { id: kClip.id } : null;
     runtime.maskView = null;
+    // the matte below re-grades the captured original — keep the originals loaded until then
+    if (!runtime.forceOriginals) { await useOriginalPlayers(); heldOriginals = true; }
     try { await renderStillAt(t); } finally { runtime.matte = shown; runtime.maskView = view; }
     const kcap = runtime.maskCapture;
     runtime.maskCapture = null;
@@ -14114,6 +15812,14 @@ async function runScopesJob(ticket, fail) {
       else if (!kcap || kcap.coverage == null) mask.error = "the clip is not on screen at that time (or its masks are all off)";
       else Object.assign(mask, { masks: Mask.describe(clipMasks(kClip)), coverage: kcap.coverage, frameCoverage: kcap.frameCoverage });
     }
+    /* fablecut_frame {time} with no src: hand back the same graded still as a
+       JPEG so the agent can see what it is measuring. toDataURL can throw on a
+       canvas tainted by a cross-origin src — the numbers still stand. */
+    let image = null;
+    if (ticket.image) {
+      try { image = cv.toDataURL("image/jpeg", 0.85); }
+      catch (err) { image = null; }
+    }
     const onScreen = visibleClipsAt(t), mattes = matteTracksAt(onScreen);
     const clips = onScreen.map((c) => {
       const tm = clipMatte(c);
@@ -14126,13 +15832,14 @@ async function runScopesJob(ticket, fail) {
         ...(c.props.blend && c.props.blend !== "normal" ? { blend: c.props.blend } : {}),
       };
     });
-    await reportExportJob(ticket.id, { status: "done", result: { time: +t.toFixed(3), frame: { w: Math.round(r.w), h: Math.round(r.h) }, stats, clips, matte, mask } }, true);
+    await reportExportJob(ticket.id, { status: "done", result: { time: +t.toFixed(3), frame: { w: Math.round(r.w), h: Math.round(r.h) }, stats, clips, matte, mask, image } }, true);
   } catch (err) {
     fail("could not measure the frame: " + (err && err.message || err));
   } finally {
     runtime.gradeCapture = null;
     runtime.maskCapture = null;
     state.rendering = false;
+    if (heldOriginals) releaseOriginalPlayers();
     seekMediaWhilePaused(); // the videos sat on the job's frame — back to the playhead
     if (wasPlaying) play();
   }
@@ -14248,6 +15955,7 @@ async function webCodecsExport() {
     await loadProjectFonts();
     resetExportCanvases();
     await armExportCors();
+    await useOriginalPlayers();   // proxies are for editing — export reads the originals
 
     for (let f = 0; f < frames; f++) {
       if (renderCancelled || signal.aborted) throw new Error("cancelled");
@@ -14306,6 +16014,7 @@ async function webCodecsExport() {
     restoreExportVideoState();
     endExportWindow();
     state.exporting = false; state.rendering = false;
+    releaseOriginalPlayers();
     els.exportOverlay.classList.add("hidden");
     els.exportNote.textContent = "Rendering your sequence in real time. Keep this tab focused.";
     if (runtime.pendingSync) syncFromServer();
@@ -14331,6 +16040,7 @@ async function startExport() {
   pause();
   const { start } = beginExportWindow();
   state.time = start;
+  await useOriginalPlayers();   // proxies are for editing — export reads the originals
   seekMediaWhilePaused();
   await new Promise((r) => setTimeout(r, 350)); // let first frames decode
   await loadProjectFonts();
@@ -14362,6 +16072,7 @@ async function startExport() {
 function finishExport(keep) {
   if (!state.exporting) return;
   state.exporting = false;
+  releaseOriginalPlayers();
   endExportWindow();
   if (runtime.pendingSync) syncFromServer();
   recDiscard = !keep;
@@ -14411,14 +16122,80 @@ els.exportSetup?.addEventListener("change", (e) => {
   }
   if (e.target.id === "exportRangeSel") syncExportRangeUi();
 });
-els.exportProfileSel?.addEventListener("change", (e) => {
-  const id = e.target.value;
-  if (!project.encodeProfile) {
-    setSetting("encodeProfile", id === encodeProfiles.default ? null : id);
+els.exportProfileSel?.addEventListener("change", () => {
+  const c = selectedExportChoice();
+  if (c.kind === "profile" && !project.encodeProfile)
+    setSetting("encodeProfile", c.id === encodeProfiles.default ? null : c.id);
+  syncExportChoiceUi("preset");
+});
+$("dlvBody")?.addEventListener("change", onDeliveryControl);
+$("dlvBody")?.addEventListener("input", onDeliveryControl);
+$("dlvSaveBtn")?.addEventListener("click", () => {
+  $("dlvSaveRow").classList.remove("hidden");
+  const p = Delivery.PRESETS[dlvSpec?.preset] || deliveryInfo.saved[dlvSpec?.preset];
+  $("dlvSaveName").value = p && !Delivery.PRESETS[dlvSpec.preset] ? p.label : "";
+  $("dlvSaveName").focus();
+});
+$("dlvSaveOk")?.addEventListener("click", saveDeliveryPreset);
+$("dlvSaveName")?.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") { e.preventDefault(); saveDeliveryPreset(); }
+  if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); $("dlvSaveRow").classList.add("hidden"); }
+});
+$("dlvSaveCancel")?.addEventListener("click", () => $("dlvSaveRow").classList.add("hidden"));
+$("dlvDeleteBtn")?.addEventListener("click", deleteDeliveryPreset);
+$("dlvBatchList")?.addEventListener("click", onBatchListClick);
+$("dlvBatchList")?.addEventListener("change", onBatchListClick);
+$("dlvBatchAdd")?.addEventListener("click", () => { if (dlvSpec) addBatchOutput(dlvSpec); });
+$("dlvBatchTypical")?.addEventListener("click", () => {
+  const have = new Set(projectOutputs().map((o) => o.filename));
+  for (const t of TYPICAL_SET) if (!have.has(t.filename)) addBatchOutput(normalizeDelivery(t).spec);
+});
+function exportPreflight() {
+  if (exportRange().frames < 1) {
+    alert("Export range is empty — IN/OUT is at or past the end of the timeline. Choose Entire timeline, or move the markers.");
+    return false;
   }
-  updateExportProfileNote(id);
+  return true;
+}
+$("btnQueueExport")?.addEventListener("click", () => {
+  if (selectedExportChoice().kind !== "delivery" || !dlvSpec) { alert("The queue takes delivery presets — pick one above (encoding profiles export one at a time)."); return; }
+  if (!exportPreflight()) return;
+  setSetting("exportKind", "delivery");
+  setSetting("delivery", dlvSpec);
+  queueAdd(dlvSpec);
+  els.exportSetup.classList.add("hidden");
+  openQueue();
+});
+$("btnBatchExport")?.addEventListener("click", () => {
+  const on = projectOutputs().filter((o) => o.on !== false);
+  if (!on.length || !exportPreflight()) return;
+  for (const o of on) { const { id: _id, on: _on, ...spec } = o; queueAdd(normalizeDelivery(spec).spec); }
+  els.exportSetup.classList.add("hidden");
+  openQueue();
+  runQueue();
+});
+$("btnOpenQueue")?.addEventListener("click", () => { els.exportSetup.classList.add("hidden"); openQueue(); });
+$("btnQueueStart")?.addEventListener("click", () => (queueRunning ? stopQueue() : runQueue()));
+$("btnQueueClose")?.addEventListener("click", closeQueue);
+$("exportQueue")?.addEventListener("keydown", (e) => {
+  if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); closeQueue(); }
+});
+$("btnQueueClear")?.addEventListener("click", () => {
+  for (let i = exportQueue.length - 1; i >= 0; i--) if (exportQueue[i].status !== "pending" && exportQueue[i].status !== "running") exportQueue.splice(i, 1);
+  renderQueue();
+});
+$("exportQueueList")?.addEventListener("click", (e) => {
+  const r = e.target.dataset.qRetry, x = e.target.dataset.qRemove;
+  const q = exportQueue.find((v) => v.id === (r || x));
+  if (!q) return;
+  if (r) { q.status = "pending"; q.error = null; q.progress = 0; }
+  else exportQueue.splice(exportQueue.indexOf(q), 1);
+  renderQueue();
+});
+$("btnCancelSetup").addEventListener("click", closeExportSetup);
+els.exportSetup?.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && !e.defaultPrevented) { e.preventDefault(); e.stopPropagation(); closeExportSetup(); }
 });
-$("btnCancelSetup").addEventListener("click", () => els.exportSetup.classList.add("hidden"));
 els.engineFast?.addEventListener("change", syncExportWcOpts);
 els.engineRealtime?.addEventListener("change", syncExportWcOpts);
 $("exportWcBitrate")?.addEventListener("change", persistExportWcOpts);
@@ -14605,6 +16382,14 @@ function openProjectTabMenu(clientX, clientY) {
     enterComp(comp.id);
   });
   menu.appendChild(compItem);
+  const vids = project.media.filter((m) => m.kind === "video" && !proxyOf(m) && !isMediaOffline(m.id));
+  if (vids.length && state.connected && state.ffmpeg) {
+    const px = document.createElement("div");
+    px.className = "ctx-opt";
+    px.textContent = `Create proxies for ${vids.length} video${vids.length === 1 ? "" : "s"}`;
+    px.addEventListener("click", () => { closeBinCtxMenu(); createProxies(vids, 540); });
+    menu.appendChild(px);
+  }
   document.body.appendChild(menu);
   const pad = 6;
   const w = menu.offsetWidth, h = menu.offsetHeight;