fablecut 1.14.0 → 1.15.0

package/export-jobs.js

@@ -49,7 +49,7 @@ function createExportJobs(opts) {
   let timer = null;
   const isEnded = (j) => j.status === "done" || j.status === "failed" || j.status === "cancelled";
   const view = (j) => ({
-    id: j.id, kind: j.kind, status: j.status, via: j.via, range: j.range, profile: j.profile || null,
+    id: j.id, kind: j.kind, status: j.status, via: j.via, range: j.range, profile: j.profile || null, preset: j.delivery ? j.delivery.preset || "custom" : null,
     time: j.time ?? null, progress: j.progress, src: j.src || null, result: j.result || null, error: j.error || null,
     created: j.created, updated: j.updated,
   });
@@ -104,8 +104,10 @@ function createExportJobs(opts) {
   return {
     /** Queue an export. where: auto (open tab, else headless) · tab · headless.
      *  kind "scopes" measures one still at `time` instead (fablecut_scopes);
-     *  kind "track" follows a region of a clip and saves it (fablecut_track). */
-    request({ kind = "export", range, profile, time, revision, where = "auto", matte = null, mask = null, track = null }) {
+     *  kind "track" follows a region of a clip and saves it (fablecut_track).
+     *  A scopes job's `image` flag also returns that still as a JPEG data URL,
+     *  which is how fablecut_frame shows an agent the composed program picture. */
+    request({ kind = "export", range, profile, delivery = null, deliveries = null, time, revision, where = "auto", matte = null, mask = null, track = null, image = false }) {
       if (!["auto", "tab", "headless"].includes(where)) throw Object.assign(new Error("where must be auto, tab or headless"), { code: 400 });
       if (!["export", "scopes", "track"].includes(kind)) throw Object.assign(new Error("kind must be export, scopes or track"), { code: 400 });
       if (time != null && !(Number.isFinite(time) && time >= 0)) throw Object.assign(new Error("time must be seconds ≥ 0"), { code: 400 });
@@ -117,10 +119,12 @@ function createExportJobs(opts) {
       const now = Date.now();
       const j = {
         id: "x_" + Math.random().toString(36).slice(2, 10), kind, status: "pending", progress: 0,
-        range: range || null, profile: profile || null, time: time ?? null, revision: Number.isFinite(revision) ? revision : null,
+        range: range || null, profile: profile || null, delivery: kind === "export" && delivery ? delivery : null,
+        deliveries: kind === "export" && Array.isArray(deliveries) && deliveries.length ? deliveries : null, time: time ?? null, revision: Number.isFinite(revision) ? revision : null,
         matte: kind === "scopes" && matte ? { clip: String(matte.clip), layer: matte.layer } : null,
         mask: kind === "scopes" && mask ? { clip: String(mask.clip) } : null,
         track: kind === "track" && track ? track : null,
+        image: kind === "scopes" && !!image,
         via: where === "headless" || (where === "auto" && !tabs) ? "headless" : "tab",
         created: now, updated: now,
       };
@@ -132,7 +136,7 @@ function createExportJobs(opts) {
     },
     get(id) { const j = jobs.get(id); return j ? view(j) : null; },
     /** What a tab needs to run the job (headless pages fetch it by id). */
-    ticket(id) { const j = jobs.get(id); return j ? { id: j.id, kind: j.kind, range: j.range, profile: j.profile, time: j.time, revision: j.revision, matte: j.matte || null, mask: j.mask || null, track: j.track || null, status: j.status } : null; },
+    ticket(id) { const j = jobs.get(id); return j ? { id: j.id, kind: j.kind, range: j.range, profile: j.profile, delivery: j.delivery || null, deliveries: j.deliveries || null, time: j.time, revision: j.revision, matte: j.matte || null, mask: j.mask || null, track: j.track || null, image: !!j.image, status: j.status } : null; },
     /** First tab to claim a pending job runs it. */
     claim(id) {
       const j = jobs.get(id);

package/frame-cache.js

@@ -0,0 +1,49 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   The /api/frame render cache (analysis/frames/) — bounded, oldest-first.
+
+   Every distinct combination of source + arguments renders its own JPEG, so an
+   unbounded cache is a disk-fill primitive: varying w, q or t mints a new file
+   each time, and a hostile page could do exactly that through the endpoint.
+   (The header gate on ?path= keeps strangers out; this keeps friends honest.)
+   Each entry is a .jpg plus its .json sidecar; pruning removes both, oldest
+   mtime first, until the directory is back under both limits.
+
+   Pure filesystem logic, no ffmpeg — unit-tested directly in frame-cache.test.js.
+   ═══════════════════════════════════════════════════════════════════════════ */
+"use strict";
+const fs = require("fs");
+const path = require("path");
+
+/* Generous enough that a real editing session never notices: a few hundred
+   grabs at ~100 KB each is tens of megabytes. */
+const DEFAULT_MAX_FILES = 500;
+const DEFAULT_MAX_BYTES = 128 * 1024 * 1024;
+
+/** Delete oldest entries until dir holds ≤ maxFiles JPEGs and ≤ maxBytes.
+ *  Returns {files, bytes, pruned}. Never throws — a prune failure must not
+ *  fail the request that triggered it. */
+function pruneCache(dir, { maxFiles = DEFAULT_MAX_FILES, maxBytes = DEFAULT_MAX_BYTES } = {}) {
+  let names;
+  try { names = fs.readdirSync(dir); } catch { return { files: 0, bytes: 0, pruned: 0 }; }
+  const entries = [];
+  for (const name of names) {
+    if (!name.endsWith(".jpg")) continue;
+    try {
+      const st = fs.statSync(path.join(dir, name));
+      if (st.isFile()) entries.push({ name, size: st.size, mtime: st.mtimeMs });
+    } catch { /* vanished mid-sweep — someone else pruned it */ }
+  }
+  entries.sort((a, b) => a.mtime - b.mtime); // oldest first
+  let bytes = entries.reduce((s, e) => s + e.size, 0);
+  let pruned = 0;
+  while ((entries.length > maxFiles || bytes > maxBytes) && entries.length) {
+    const victim = entries.shift();
+    bytes -= victim.size;
+    pruned++;
+    try { fs.rmSync(path.join(dir, victim.name)); } catch {}
+    try { fs.rmSync(path.join(dir, victim.name.replace(/\.jpg$/, ".json"))); } catch {}
+  }
+  return { files: entries.length, bytes, pruned };
+}
+
+module.exports = { pruneCache, DEFAULT_MAX_FILES, DEFAULT_MAX_BYTES };

package/frame-stats.js

@@ -0,0 +1,267 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Frame statistics — describe a frame in words, for anyone who can't see it.
+
+   `fablecut_frame` hands a multimodal model an actual image, which is the point.
+   But not every MCP client, and not every model behind it, can read one: a
+   text-only agent gets the coordinates of the picture and nothing else, so it
+   learns nothing about the footage it was asked to judge.
+
+   This closes that gap with measurements instead of pixels — brightness, the
+   dominant colours, and how much a moment differs from the one before it — the
+   same numbers `fablecut_scopes` reports for the composed picture, applied to a
+   source frame. Deliberately NOT a caption: no zero-dependency way to describe
+   what is in the picture honestly. What it gives instead is enough to rank and
+   route footage ("bright outdoor, high motion, dominant green") without a
+   picture at all.
+
+   Pure functions over a raw RGB buffer. No ffmpeg, no canvas, no dependencies,
+   so the whole thing is testable on its own. ═══════════════════════════════════ */
+"use strict";
+
+/* Rec. 709 luma weights — the same coefficients the browser uses, so a number
+   here means the same thing as a number from fablecut_scopes. */
+/* Every luma field below is 0–1, rounded to 3 decimals — the same convention
+   as color.js scopeStats, so the two readings can sit side by side without a
+   conversion nobody remembers to do. */
+const WR = 0.2126, WG = 0.7152, WB = 0.0722;
+const r3 = (v) => Math.round(v * 1000) / 1000;
+
+/* Perceptual buckets. A 4-bit-per-channel histogram is 4096 entries: fine
+   enough to separate a lime from a green, coarse enough that JPEG noise in a
+   gradient lands in one bucket instead of smearing across a hundred. */
+const BITS = 4, SHIFT = 8 - BITS, BUCKETS = 1 << (BITS * 3);
+
+/** Rec. 709 luma of one pixel, 0–255. */
+function luma(r, g, b) { return WR * r + WG * g + WB * b; }
+
+/* Named colours a model can reason about, matched against the histogram's top
+   buckets. These are the useful coarse categories — "sky", "foliage", "skin",
+   "night" — rather than 4096 hex codes nobody can picture. Nearest match by
+   weighted RGB distance, so a slightly-off bucket still lands sensibly. */
+const NAMED = [
+  { name: "black", rgb: [10, 10, 12] },
+  { name: "deep blue", rgb: [16, 26, 74] },
+  { name: "blue", rgb: [40, 84, 190] },
+  { name: "sky blue", rgb: [128, 186, 235] },
+  { name: "cyan", rgb: [56, 190, 200] },
+  { name: "green", rgb: [56, 142, 62] },
+  { name: "lime", rgb: [140, 205, 60] },
+  { name: "olive", rgb: [120, 118, 52] },
+  { name: "yellow", rgb: [226, 200, 62] },
+  { name: "orange", rgb: [222, 122, 44] },
+  { name: "red", rgb: [196, 52, 44] },
+  { name: "dark red", rgb: [104, 26, 26] },
+  { name: "magenta", rgb: [176, 58, 168] },
+  { name: "skin", rgb: [214, 168, 132] },
+  { name: "grey", rgb: [128, 128, 130] },
+  { name: "light grey", rgb: [206, 206, 208] },
+  { name: "white", rgb: [242, 242, 244] },
+];
+function nameColor(r, g, b) {
+  let best = NAMED[0], bestD = Infinity;
+  for (const c of NAMED) {
+    /* Plain Euclidean RGB distance. Luma weighting looks principled and is
+       wrong here: Rec.709 gives blue a weight of 0.07, so a bucket that differs
+       from "blue" mostly in blue reads as "deep blue" instead. For naming a
+       colour, hue is the thing being asked about. */
+    const d = (r - c.rgb[0]) ** 2 + (g - c.rgb[1]) ** 2 + (b - c.rgb[2]) ** 2;
+    if (d < bestD) { bestD = d; best = c; }
+  }
+  return best.name;
+}
+
+/** Bucket a pixel into the 4-bit-per-channel histogram. */
+const bucketOf = (r, g, b) => ((r >> SHIFT) << (BITS * 2)) | ((g >> SHIFT) << BITS) | (b >> SHIFT);
+function bucketRgb(i) {
+  return [((i >> (BITS * 2)) & 0xf) << SHIFT, ((i >> BITS) & 0xf) << SHIFT, (i & 0xf) << SHIFT];
+}
+
+/**
+ * Describe one frame.
+ *
+ * @param rgb  raw RGB24 bytes (w*h*3)
+ * @param w,h  its dimensions
+ * @param opts {stride} — bytes per row, when rgb is a window into a bigger
+ *          buffer (the contact sheet slices cells out of one grid image)
+ * @returns {{luma:object, brightness:string, colours:Array, saturation:number,
+ *            meanRgb:number[], texture:number, samples:number}}
+ */
+function describe(rgb, w, h, { stride = w * 3, offset = 0 } = {}) {
+  const n = w * h;
+  const hist = new Uint32Array(BUCKETS);
+  const lums = new Float64Array(n);
+  let sr = 0, sg = 0, sb = 0, k = 0;
+  for (let y = 0; y < h; y++) {
+    let i = offset + y * stride;
+    for (let x = 0; x < w; x++, i += 3, k++) {
+      const r = rgb[i], g = rgb[i + 1], b = rgb[i + 2];
+      sr += r; sg += g; sb += b;
+      lums[k] = luma(r, g, b);
+      hist[bucketOf(r, g, b)]++;
+    }
+  }
+  // Percentiles need a sort; a frame is at most a few hundred thousand samples,
+  // and this runs once per call, not per frame of a render.
+  const sorted = Float64Array.prototype.slice.call(lums).sort();
+  const q = (p) => sorted[Math.min(n - 1, Math.max(0, Math.round(p * (n - 1))))];
+  let sum = 0;
+  for (let i = 0; i < n; i++) sum += lums[i];
+  const mean = sum / n / 255;
+  const meanRgb = [sr / n, sg / n, sb / n];
+
+  // Saturation 0–1, from mean chroma against mean luma (the cheap version —
+  // no per-pixel HSV pass).
+  const chroma = (Math.max(...meanRgb) - Math.min(...meanRgb)) / 255;
+  const lum01 = mean;
+  const saturation = lum01 < 0.005 ? 0 : Math.min(1, chroma / (lum01 * 2));
+
+  /* "Texture": the mean absolute luma step between horizontally adjacent
+     samples, as a percentage of full range. Smooth sky or a locked-off tripod
+     shot scores near 0; foliage, crowds or a busy frame score clearly higher.
+     Reported on the same 0–100 scale as the analyzer's per-shot `energy`, so
+     the two can be compared directly. It measures detail *within* the frame,
+     not change over time — motionScore() is the change-over-time one. */
+  let diff = 0, dN = 0;
+  for (let y = 0; y < h; y++) {
+    // Start one pixel in: the step reads the pixel before the cursor, and on
+    // the first row that would be rgb[-3] — undefined, and silently NaN.
+    let i = offset + y * stride + 3;
+    for (let x = 1; x < w; x++, i += 3) {
+      diff += Math.abs(luma(rgb[i], rgb[i + 1], rgb[i + 2]) - luma(rgb[i - 3], rgb[i - 2], rgb[i - 1]));
+      dN++;
+    }
+  }
+  // A single-pixel-wide sample has no horizontal neighbours; report no texture
+  // rather than NaN.
+  const detail = dN ? Math.round(diff / dN / 255 * 1000) / 10 : 0;
+
+  // Top colour buckets, merged when they are neighbours so a sky reads as one
+  // entry rather than four.
+  const top = [];
+  for (let i = 0; i < BUCKETS; i++) {
+    if (hist[i]) top.push([i, hist[i]]);
+  }
+  top.sort((a, b) => b[1] - a[1]);
+  const colours = [];
+  for (const [idx, count] of top) {
+    const [r, g, b] = bucketRgb(idx);
+    const near = colours.find((c) =>
+      (c.rgb[0] - r) ** 2 + (c.rgb[1] - g) ** 2 + (c.rgb[2] - b) ** 2 < 900);
+    if (near) {
+      // Weighted mean, so the merged entry points at the colour actually seen.
+      const tot = near.count + count;
+      near.rgb = near.rgb.map((v, j) => Math.round((v * near.count + [r, g, b][j] * count) / tot));
+      near.count = tot;
+      near.pct = tot;
+    } else {
+      colours.push({ rgb: [r, g, b], count, pct: count });
+    }
+  }
+  colours.sort((a, b) => b.count - a.count);
+  const shown = colours.slice(0, 3);
+  for (const c of shown) {
+    c.pct = Math.round(c.pct / n * 100);
+    c.hex = "#" + c.rgb.map((v) => v.toString(16).padStart(2, "0")).join("");
+    c.name = nameColor(c.rgb[0], c.rgb[1], c.rgb[2]);
+  }
+
+  const l = mean;
+  return {
+    luma: {
+      min: r3(q(0) / 255), p1: r3(q(0.01) / 255), median: r3(q(0.5) / 255),
+      mean: r3(l), p99: r3(q(0.99) / 255), max: r3(q(1) / 255),
+    },
+    brightness: l < 0.12 ? "very dark" : l < 0.35 ? "dark" : l < 0.65 ? "mid" : l < 0.85 ? "bright" : "very bright",
+    colours: shown,
+    meanRgb: meanRgb.map((v) => Math.round(v)),
+    saturation: Math.round(saturation * 100) / 100,
+    texture: detail,
+    samples: n,
+  };
+}
+
+/**
+ * Mean absolute per-channel difference between two equally sized regions,
+ * 0–1. High means the picture changed a lot between them — a cut, or fast
+ * motion. This is the "is this a different shot" signal a contact sheet's cells
+ * can be ranked by.
+ */
+function motionScore(rgbA, rgbB, w, h) {
+  const n = w * h * 3;
+  if (!n || !rgbA || !rgbB || rgbA.length < n || rgbB.length < n) return 0;
+  let d = 0;
+  for (let i = 0; i < n; i++) d += Math.abs(rgbA[i] - rgbB[i]);
+  return Math.round(d / n / 255 * 1000) / 1000;
+}
+
+/**
+ * Describe a tiled contact sheet cell by cell. `rgb` is the whole grid image;
+ * cells are read left→right then top→bottom, so cell i is the frame at times[i].
+ *
+ * Each cell reports its own brightness/colours, plus motion against the previous
+ * populated cell — which is what lets a text-only agent find the cut points and
+ * pick the high-motion moments without seeing anything.
+ *
+ * @param rgb  raw RGB24 of the whole grid
+ * @param w,h  grid dimensions
+ * @param cols,rows  the tile layout
+ * @param times  one timestamp per cell, in cell order
+ */
+function describeGrid(rgb, w, h, cols, rows, times = []) {
+  // tile lays cells out edge to edge, so the cell size is the grid divided by
+  // the layout. Guard the rounding: a width that doesn't divide evenly would
+  // drift a pixel per row and smear the last column.
+  const cw = Math.floor(w / cols), ch = Math.floor(h / rows);
+  const cells = [];
+  let prev = null, prevIdx = -1;
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < cols; c++) {
+      const index = r * cols + c;
+      const time = times[index];
+      // Fewer timestamps than cells means tile padded the last row with black —
+      // say so rather than describing a padding cell as a black frame.
+      if (time == null) { cells.push({ index, padded: true }); continue; }
+      const ox = c * cw, oy = r * ch;
+      const view = new Uint8Array(cw * ch * 3);
+      for (let y = 0; y < ch; y++) {
+        const from = ((oy + y) * w + ox) * 3;
+        view.set(rgb.subarray(from, from + cw * 3), y * cw * 3);
+      }
+      const stats = describe(view, cw, ch);
+      const cell = { index, time, ...stats };
+      // Compare against the previous *real* cell, skipping padding, so the last
+      // filled cell of a short row is still measured against its neighbour.
+      cell.motion = prev ? motionScore(view, prev, cw, ch) : 0;
+      cells.push(cell);
+      prev = view; prevIdx = index;
+    }
+  }
+  return { cols, rows, cellWidth: cw, cellHeight: ch, cells };
+}
+
+/** One line per thing worth saying, for a single frame. These lines are the whole
+ *  point of the text fallback: read by a model that never sees the pixels.
+ *  Keep them short — this is what an agent gets instead of the image. */
+function frameLines(label, stats) {
+  const L = stats.luma;
+  const cols = stats.colours.map((c) => `${c.name} ${c.hex} ${c.pct}%`).join(", ");
+  return [
+    `${label}: ${stats.brightness} (luma mean ${L.mean}, median ${L.median}, range ${L.min}–${L.max})`,
+    `  dominant: ${cols || "flat"}`,
+    `  texture ${stats.texture}/100 · saturation ${stats.saturation} · mean rgb [${stats.meanRgb.join(", ")}]`,
+  ];
+}
+
+/** One line per cell, for a contact sheet. `motion` is the change since the
+ *  previous cell, so it spikes at a cut *and* during fast movement — it ranks
+ *  the most active moments, it does not prove there was a cut. */
+function gridLines(grid) {
+  const lines = grid.cells.map((c) => {
+    if (c.padded) return `  cell ${c.index + 1}: (padding — not a frame in this clip)`;
+    return `  cell ${c.index + 1} @ ${c.time}s: ${c.brightness}, ${c.colours.map((x) => `${x.name} ${x.pct}%`).join(" / ") || "flat"}`
+      + ` · texture ${c.texture}/100 · change ${c.motion}`;
+  });
+  return [`Contact sheet ${grid.cols}x${grid.rows}, ${grid.cells.filter((c) => !c.padded).length} frames:`, ...lines];
+}
+
+module.exports = { describe, describeGrid, motionScore, luma, nameColor, frameLines, gridLines };

package/index.html

@@ -60,6 +60,17 @@
         <button type="button" data-tab="shapes" title="Shape layers and null objects">Shapes</button>
         <button type="button" data-tab="templates" title="Lower thirds, logo animations and social layouts — with fields you edit in the Inspector">Templates</button>
       </div>
+      <div class="bin-tools" id="binTools">
+        <input type="search" id="binSearch" class="bin-search" placeholder="Search name, #tag, codec, 4k…" aria-label="Search the Project bin" spellcheck="false" autocomplete="off">
+        <select id="binFilter" class="bin-filter" title="Show only…" aria-label="Show"></select>
+        <select id="binSort" class="bin-sort" title="Sort by" aria-label="Sort by">
+          <option value="name">Name</option><option value="kind">Kind</option><option value="duration">Duration</option>
+          <option value="resolution">Resolution</option><option value="fps">Frame rate</option><option value="codec">Codec</option>
+          <option value="audio">Audio channels</option><option value="size">File size</option><option value="usage">Times used</option>
+        </select>
+        <button type="button" class="btn tiny" id="binSortDir" title="Ascending — click for descending">↑</button>
+        <button type="button" class="btn tiny" id="binViewBtn" title="List view: metadata columns">☰</button>
+      </div>
       <input type="file" id="fileInput" class="sr-only" multiple accept="video/*,audio/*,image/*,.mp4,.mov,.webm,.mkv,.mp3,.wav,.m4a,.png,.jpg,.jpeg,.gif,.webp,.svg">
       <div class="bin-list" id="binList">
         <div class="bin-empty" id="binEmpty">
@@ -95,6 +106,7 @@
           <button class="btn tiny toggle" id="btnExportFrame" title="Toggle export frame overlay (drag handle to reframe)">⬒ Frame</button>
           <button type="button" class="btn tiny toggle hidden" id="btnExportFrameDim" aria-pressed="true" title="Lights off — crop to the export frame"><svg class="ico" viewBox="0 0 16 16" width="14" height="14" aria-hidden="true"><g class="ef-bulb-rays" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M8 .4v1.05M1.7 3.45l.85.65M14.3 3.45l-.85.65"/></g><path class="ef-bulb-glass" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linejoin="round" d="M8 1.7A4.1 4.1 0 0 0 3.9 5.8c0 1.62.86 2.72 1.8 3.5.38.32.62.68.62 1.15v.35h4.36v-.35c0-.47.24-.83.62-1.15.94-.78 1.8-1.88 1.8-3.5A4.1 4.1 0 0 0 8 1.7z"/><path fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="square" d="M6.25 12.85h3.5M6.7 14.35h2.6"/></svg></button>
           <button class="btn tiny toggle" id="btnGuides" title="Toggle safe-area guides">▦ Safe</button>
+          <button class="btn tiny toggle proxy-btn" id="btnProxy" title="Play proxies while editing (export always uses the originals)">Proxy</button>
           <span class="dim" id="monitorRes"></span>
         </span>
       </div>
@@ -258,8 +270,9 @@
 
 <!-- ══════════ EXPORT SETUP ══════════ -->
 <div class="overlay hidden" id="exportSetup">
-  <div class="dialog">
-    <h2>Export</h2>
+  <div class="dialog export-dialog" role="dialog" aria-modal="true" aria-labelledby="exportSetupTitle">
+    <h2 id="exportSetupTitle">Export</h2>
+    <div class="export-body">
     <div class="export-profile-row" id="exportRangeRow">
       <label class="export-profile-label" for="exportRangeSel">Range</label>
       <select class="export-profile-sel" id="exportRangeSel" aria-describedby="exportRangeNote">
@@ -276,11 +289,102 @@
       <input type="radio" name="engine" id="engineRealtime">
       <span><b>WebCodecs (HW encode)</b><br><span class="dim" id="engineWebCodecsNote">Frame-accurate. Browser encodes H.264; server muxes. Needs a modern Chromium and ffmpeg.</span></span>
     </label>
-    <div class="export-profile-row" id="exportProfileRow">
-      <label class="export-profile-label" for="exportProfileSel">Encoding profile</label>
+    <div class="export-profile-row dlv" id="exportProfileRow">
+      <div class="dlv-preset-line">
+        <label class="export-profile-label" for="exportProfileSel">Preset</label>
+        <span class="dlv-preset-actions">
+          <button type="button" class="btn tiny" id="dlvSaveBtn" title="Save these settings as a preset for every project">Save preset…</button>
+          <button type="button" class="btn tiny hidden" id="dlvDeleteBtn" title="Delete this saved preset">Delete</button>
+        </span>
+      </div>
       <select class="export-profile-sel" id="exportProfileSel" aria-describedby="exportProfileNote exportProfileHint"></select>
+      <div class="dlv-save-row hidden" id="dlvSaveRow">
+        <input type="text" id="dlvSaveName" maxlength="60" placeholder="Preset name, e.g. Client 4K" aria-label="Preset name">
+        <button type="button" class="btn tiny primary" id="dlvSaveOk">Save</button>
+        <button type="button" class="btn tiny" id="dlvSaveCancel">Cancel</button>
+      </div>
       <p class="dim export-profile-note" id="exportProfileNote"></p>
       <p class="dim export-profile-hint" id="exportProfileHint"></p>
+      <div class="dlv-body" id="dlvBody">
+        <details class="dlv-sec" id="dlvVideoSec" open>
+          <summary>Video</summary>
+          <div class="dlv-grid">
+            <label class="dlv-f">Resolution<select id="dlvRes"></select></label>
+            <label class="dlv-f dlv-wh hidden" id="dlvWhField">Width × height
+              <span class="dlv-wh-in"><input type="number" id="dlvW" min="16" max="8192" step="2" aria-label="Width"><span>×</span><input type="number" id="dlvH" min="16" max="8192" step="2" aria-label="Height"></span></label>
+            <label class="dlv-f" id="dlvReframeField">Reframe<select id="dlvReframe">
+              <option value="fill">Fill (crop to fit)</option>
+              <option value="fit">Fit (black bars)</option>
+              <option value="stretch">Stretch</option>
+            </select></label>
+            <label class="dlv-f">Frame rate<select id="dlvFps"></select></label>
+            <label class="dlv-f">Codec<select id="dlvCodec"></select></label>
+            <label class="dlv-f" id="dlvEncoderField">Encoder<select id="dlvEncoder"></select></label>
+            <label class="dlv-f" id="dlvProfileField">Profile<select id="dlvProfile"></select></label>
+            <label class="dlv-f" id="dlvRateField">Rate control<select id="dlvRate">
+              <option value="crf">CRF (constant quality)</option>
+              <option value="vbr">VBR (variable bitrate)</option>
+              <option value="cbr">CBR (constant bitrate)</option>
+            </select></label>
+            <label class="dlv-f" id="dlvCrfField">CRF<input type="number" id="dlvCrf" min="0" max="63" step="1" title="Lower = better quality, bigger file"></label>
+            <label class="dlv-f" id="dlvBitrateField">Bitrate (Mb/s)<input type="number" id="dlvBitrate" min="0.1" max="400" step="0.5"></label>
+            <label class="dlv-f" id="dlvMaxrateField">Max rate (Mb/s)<input type="number" id="dlvMaxrate" min="0.1" max="800" step="0.5" placeholder="none"></label>
+            <label class="dlv-f" id="dlvKeyintField">Keyframe every (s)<input type="number" id="dlvKeyint" min="0" max="20" step="0.5" title="0 = the encoder's default"></label>
+            <label class="dlv-f" id="dlvSpeedField">Encoder speed<select id="dlvSpeed">
+              <option value="fast">Fast</option>
+              <option value="balanced">Balanced</option>
+              <option value="best">Best quality (slow)</option>
+            </select></label>
+            <label class="dlv-f">Pixel format<select id="dlvPixFmt"></select></label>
+            <label class="dlv-f">Color<select id="dlvColor"></select></label>
+            <label class="dlv-f">Container<select id="dlvContainer"></select></label>
+          </div>
+        </details>
+        <details class="dlv-sec" id="dlvAudioSec" open>
+          <summary>Audio</summary>
+          <div class="dlv-grid">
+            <label class="dlv-f">Codec<select id="dlvACodec"></select></label>
+            <label class="dlv-f" id="dlvABitrateField">Bitrate (kb/s)<select id="dlvABitrate"></select></label>
+            <label class="dlv-f" id="dlvARateField">Sample rate<select id="dlvARate">
+              <option value="48000">48 kHz</option>
+              <option value="44100">44.1 kHz</option>
+            </select></label>
+            <label class="dlv-f" id="dlvAChField">Channels<select id="dlvACh">
+              <option value="2">Stereo</option>
+              <option value="1">Mono</option>
+            </select></label>
+            <label class="dlv-f" id="dlvLoudField">Loudness<select id="dlvLoud" title="Turn the whole mix up or down to an integrated loudness, with a true-peak limiter"></select></label>
+            <label class="dlv-f" id="dlvTpField">True peak (dBTP)<input type="number" id="dlvTp" min="-9" max="0" step="0.5"></label>
+          </div>
+        </details>
+        <details class="dlv-sec" id="dlvFileSec">
+          <summary>File name and metadata</summary>
+          <label class="dlv-f dlv-wide">File name
+            <input type="text" id="dlvFilename" maxlength="160" spellcheck="false" aria-describedby="dlvFilePreview dlvTokens"></label>
+          <p class="dim dlv-file-preview" id="dlvFilePreview"></p>
+          <p class="dim dlv-tokens" id="dlvTokens"></p>
+          <div class="dlv-grid dlv-meta">
+            <label class="dlv-f">Title<input type="text" id="dlvMetaTitle" maxlength="300"></label>
+            <label class="dlv-f">Artist / author<input type="text" id="dlvMetaArtist" maxlength="300"></label>
+            <label class="dlv-f">Copyright<input type="text" id="dlvMetaCopyright" maxlength="300"></label>
+            <label class="dlv-f">Date<input type="text" id="dlvMetaDate" maxlength="40" placeholder="2026-10-18"></label>
+            <label class="dlv-f dlv-wide">Description<textarea id="dlvMetaDescription" rows="2" maxlength="2000"></textarea></label>
+            <label class="dlv-f dlv-wide">Keywords<input type="text" id="dlvMetaKeywords" maxlength="300" placeholder="comma, separated"></label>
+          </div>
+        </details>
+        <p class="dim dlv-summary" id="dlvSummary"></p>
+      </div>
+    </div>
+    <div class="export-profile-row dlv-batch" id="dlvBatch">
+      <div class="dlv-preset-line">
+        <span class="export-profile-label">Batch outputs <span class="dim" id="dlvBatchCount"></span></span>
+        <span class="dlv-preset-actions">
+          <button type="button" class="btn tiny" id="dlvBatchAdd" title="Add the settings above to this project's outputs">+ Add these settings</button>
+          <button type="button" class="btn tiny" id="dlvBatchTypical" title="Master, YouTube 1080p, Reel 1080×1920, Square 1080 and a 720p preview">+ Typical set</button>
+        </span>
+      </div>
+      <p class="dim export-profile-hint" id="dlvBatchHint">One render, several files: every checked output is encoded from the same frames. Saved with the project.</p>
+      <ul class="dlv-batch-list" id="dlvBatchList"></ul>
     </div>
     <div class="export-wc-opts hidden" id="exportWcOpts">
       <label class="export-wc-field" for="exportWcBitrate">Bitrate
@@ -305,14 +409,33 @@
       </label>
       <p class="dim export-wc-hint">WebCodecs has no CRF — quality is driven by bitrate. VBR spends bits on hard frames; CBR holds a steady rate.</p>
     </div>
+    <div class="export-track-warn hidden" id="dlvWarn" role="status"></div>
     <div class="export-track-warn hidden" id="exportTrackWarn" role="status"></div>
+    </div>
     <div class="dialog-actions">
+      <button class="btn dlv-queue-open" id="btnOpenQueue" title="Show the export queue">Queue</button>
       <button class="btn" id="btnCancelSetup">Cancel</button>
+      <button class="btn" id="btnBatchExport" title="Queue every checked batch output and start">Export checked</button>
+      <button class="btn" id="btnQueueExport" title="Add these settings to the export queue">Add to queue</button>
       <button class="btn primary" id="btnStartExport">Export</button>
     </div>
   </div>
 </div>
 
+<!-- ══════════ EXPORT QUEUE ══════════ -->
+<div class="overlay hidden" id="exportQueue">
+  <div class="dialog export-dialog" role="dialog" aria-modal="true" aria-labelledby="exportQueueTitle">
+    <h2 id="exportQueueTitle">Export queue</h2>
+    <p class="dim" id="exportQueueNote"></p>
+    <div class="export-body"><ol class="xq-list" id="exportQueueList"></ol></div>
+    <div class="dialog-actions">
+      <button class="btn" id="btnQueueClear">Clear finished</button>
+      <button class="btn" id="btnQueueClose">Close</button>
+      <button class="btn primary" id="btnQueueStart">Start</button>
+    </div>
+  </div>
+</div>
+
 <!-- ══════════ EXPORT OVERLAY ══════════ -->
 <div class="overlay hidden" id="exportOverlay">
   <div class="dialog">
@@ -445,6 +568,13 @@
         <table class="keys">
           <tr><td><kbd>Ctrl</kbd>+click bin</td><td>Import media files</td></tr>
           <tr><td>Right-click <b>Project</b> tab</td><td>New folder · New composition</td></tr>
+          <tr><td>Bin search</td><td>Name, kind, codec, <code>2160p</code> or a tag; <code>#tag</code> matches tags only · <kbd>Esc</kbd> clears</td></tr>
+          <tr><td>Right-click a bin file</td><td>Find timeline instances · Media info · favorites · Tags · collections</td></tr>
+          <tr><td>☆ / uses badge on a bin file</td><td>Star it · list where it is used (click one to jump there)</td></tr>
+          <tr><td>☰ in the bin</td><td>List view with metadata columns · click a heading to sort</td></tr>
+          <tr><td>Right-click a clip</td><td><b>Reveal in project</b> — show its file in the bin</td></tr>
+          <tr><td>Right-click a bin file</td><td><b>Relink…</b> — point it at the footage where it is now · <b>Replace file…</b> — a new file for every clip that uses it</td></tr>
+          <tr><td>Right-click a bin video</td><td><b>Create proxy</b> — a light copy to edit with (right-click the Project tab for all of them) · <b>Proxy</b> above the monitor plays proxies on / off; export always uses the originals</td></tr>
           <tr><td>Comp clip / bin comp</td><td>Double-click to open it on the timeline · drag a bin comp onto the timeline to place it · the breadcrumb above the timeline steps back out</td></tr>
           <tr><td>Right-click clips</td><td><b>Precompose</b> — move the selection into a new comp</td></tr>
           <tr><td><kbd>Esc</kbd> inside a comp</td><td>Back out one level (once nothing is selected)</td></tr>
@@ -501,6 +631,8 @@
 <script src="edit-ops.js"></script>
 <script src="comp.js"></script>
 <script src="templates.js"></script>
+<script src="media-lib.js"></script>
+<script src="delivery.js"></script>
 <script src="app.js"></script>
 </body>
 </html>