@pixerate/editor 0.87.0 → 0.88.0

package/dist/video-editor/index.js

@@ -210,6 +210,255 @@ function videoKeyframeFfmpegExpr(prop, time, fallback, step) {
   return `if(lt(${time},${fmt(points[0][0])}),${fmt(points[0][1])},${expr})`;
 }
 
+// src/video-editor/lut.ts
+var VIDEO_LUT_MAX_SIZE = 129;
+function parseVideoCubeLut(text) {
+  let size = 0;
+  let size1 = 0;
+  let title;
+  const domainMin = [0, 0, 0];
+  const domainMax = [1, 1, 1];
+  let data = null;
+  let rows = 0;
+  const lines = text.split(/\r\n|\r|\n/);
+  const fail2 = (line, message) => {
+    throw new Error(`Line ${line + 1} of the .cube file: ${message}.`);
+  };
+  const numbers = (parts, line) => parts.map((p) => {
+    const v = Number(p);
+    if (!Number.isFinite(v)) fail2(line, `"${p}" is not a number`);
+    return v;
+  });
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i].replace(/#.*/, "").trim();
+    if (!line) continue;
+    const parts = line.split(/\s+/);
+    const key = parts[0];
+    if (/^[A-Za-z]/.test(key)) {
+      if (rows) fail2(i, `"${key}" comes after the table; keywords go before it`);
+      if (key === "TITLE") title = line.slice(5).trim().replace(/^"|"$/g, "");
+      else if (key === "LUT_3D_SIZE") {
+        size = Number(parts[1]);
+        if (!Number.isInteger(size) || size < 2 || size > VIDEO_LUT_MAX_SIZE) fail2(i, `LUT_3D_SIZE must be a whole number from 2 to ${VIDEO_LUT_MAX_SIZE}, not "${parts[1] ?? ""}"`);
+      } else if (key === "LUT_1D_SIZE") size1 = Number(parts[1]) || 1;
+      else if (key === "DOMAIN_MIN" || key === "DOMAIN_MAX") {
+        const v2 = numbers(parts.slice(1), i);
+        if (v2.length !== 3) fail2(i, `${key} needs 3 numbers`);
+        (key === "DOMAIN_MIN" ? domainMin : domainMax).splice(0, 3, ...v2);
+      } else if (key === "LUT_3D_INPUT_RANGE") {
+        const v2 = numbers(parts.slice(1), i);
+        if (v2.length !== 2 || !(v2[1] > v2[0])) fail2(i, "LUT_3D_INPUT_RANGE needs a minimum and a larger maximum");
+        domainMin.fill(v2[0]);
+        domainMax.fill(v2[1]);
+      }
+      continue;
+    }
+    if (!size) fail2(i, size1 ? "this is a 1D LUT (LUT_1D_SIZE); only 3D LUTs (LUT_3D_SIZE) are supported" : "the table starts before LUT_3D_SIZE");
+    data ??= new Float32Array(size * size * size * 3);
+    const v = numbers(parts, i);
+    if (v.length !== 3) fail2(i, `a table row needs 3 numbers, not ${v.length}`);
+    if (rows >= size ** 3) fail2(i, `the table has more than the ${size ** 3} rows LUT_3D_SIZE ${size} needs`);
+    data.set(v, rows * 3);
+    rows++;
+  }
+  if (!size) throw new Error(size1 ? "The .cube file is a 1D LUT (LUT_1D_SIZE); only 3D LUTs (LUT_3D_SIZE) are supported." : "The .cube file has no LUT_3D_SIZE line, so it is not a 3D LUT.");
+  if (rows !== size ** 3) throw new Error(`The .cube file has ${rows} table rows; LUT_3D_SIZE ${size} needs ${size ** 3}.`);
+  for (let c = 0; c < 3; c++) if (!(domainMax[c] > domainMin[c])) throw new Error("The .cube file's DOMAIN_MAX must be larger than its DOMAIN_MIN on every channel.");
+  return { ...title ? { title } : {}, size, domainMin, domainMax, data };
+}
+function videoLutFromFunction(size, fn, title) {
+  const n2 = size - 1;
+  const data = new Float32Array(size ** 3 * 3);
+  let i = 0;
+  for (let b = 0; b < size; b++)
+    for (let g = 0; g < size; g++)
+      for (let r = 0; r < size; r++) {
+        data.set(fn([r / n2, g / n2, b / n2]), i);
+        i += 3;
+      }
+  return { ...title ? { title } : {}, size, domainMin: [0, 0, 0], domainMax: [1, 1, 1], data };
+}
+function videoLutToCube(lut) {
+  const f = (v) => (Math.round(v * 1e6) / 1e6).toString();
+  const head = [...lut.title ? [`TITLE "${lut.title.replace(/"/g, "'")}"`] : [], `LUT_3D_SIZE ${lut.size}`];
+  if (lut.domainMin.some((v) => v !== 0) || lut.domainMax.some((v) => v !== 1)) head.push(`DOMAIN_MIN ${lut.domainMin.map(f).join(" ")}`, `DOMAIN_MAX ${lut.domainMax.map(f).join(" ")}`);
+  const rows = [];
+  for (let i = 0; i < lut.data.length; i += 3) rows.push(`${f(lut.data[i])} ${f(lut.data[i + 1])} ${f(lut.data[i + 2])}`);
+  return `${head.join("\n")}
+${rows.join("\n")}
+`;
+}
+var clamp01 = (v) => v < 0 ? 0 : v > 1 ? 1 : v;
+function applyVideoLut(lut, rgb, out = [0, 0, 0]) {
+  const { size, data, domainMin, domainMax } = lut;
+  const n2 = size - 1;
+  const x = clamp01((rgb[0] - domainMin[0]) / (domainMax[0] - domainMin[0])) * n2;
+  const y = clamp01((rgb[1] - domainMin[1]) / (domainMax[1] - domainMin[1])) * n2;
+  const z = clamp01((rgb[2] - domainMin[2]) / (domainMax[2] - domainMin[2])) * n2;
+  const r0 = Math.min(n2 - 1, Math.floor(x));
+  const g0 = Math.min(n2 - 1, Math.floor(y));
+  const b0 = Math.min(n2 - 1, Math.floor(z));
+  const fr = x - r0;
+  const fg = y - g0;
+  const fb = z - b0;
+  const sr = 3;
+  const sg = 3 * size;
+  const sb = 3 * size * size;
+  const o = r0 * sr + g0 * sg + b0 * sb;
+  let a, c, w0, w1, w2, w3;
+  if (fr > fg) {
+    if (fg > fb) [a, c, w0, w1, w2, w3] = [sr, sr + sg, 1 - fr, fr - fg, fg - fb, fb];
+    else if (fr > fb) [a, c, w0, w1, w2, w3] = [sr, sr + sb, 1 - fr, fr - fb, fb - fg, fg];
+    else [a, c, w0, w1, w2, w3] = [sb, sb + sr, 1 - fb, fb - fr, fr - fg, fg];
+  } else if (fb > fg) [a, c, w0, w1, w2, w3] = [sb, sb + sg, 1 - fb, fb - fg, fg - fr, fr];
+  else if (fb > fr) [a, c, w0, w1, w2, w3] = [sg, sg + sb, 1 - fg, fg - fb, fb - fr, fr];
+  else [a, c, w0, w1, w2, w3] = [sg, sg + sr, 1 - fg, fg - fr, fr - fb, fb];
+  const d = sr + sg + sb;
+  for (let k = 0; k < 3; k++) out[k] = clamp01(w0 * data[o + k] + w1 * data[o + a + k] + w2 * data[o + c + k] + w3 * data[o + d + k]);
+  return out;
+}
+function applyVideoLutToPixels(lut, data, strength = 1) {
+  const s = clamp01(strength);
+  if (!s) return;
+  const rgb = [0, 0, 0];
+  const out = [0, 0, 0];
+  for (let i = 0; i < data.length; i += 4) {
+    if (!data[i + 3]) continue;
+    rgb[0] = data[i] / 255;
+    rgb[1] = data[i + 1] / 255;
+    rgb[2] = data[i + 2] / 255;
+    applyVideoLut(lut, rgb, out);
+    for (let k = 0; k < 3; k++) data[i + k] = Math.round((rgb[k] + (out[k] - rgb[k]) * s) * 255);
+  }
+}
+var approximations = /* @__PURE__ */ new WeakMap();
+function videoLutSvgApproximation(lut) {
+  const cached = approximations.get(lut);
+  if (cached) return cached;
+  const points = 17;
+  const tables = [[], [], []];
+  for (let i = 0; i < points; i++) {
+    const v = i / (points - 1);
+    const out = applyVideoLut(lut, [v, v, v]);
+    for (let k = 0; k < 3; k++) tables[k].push(out[k]);
+  }
+  const curve = (k, v) => {
+    const x = clamp01(v) * (points - 1);
+    const i = Math.min(points - 2, Math.floor(x));
+    return tables[k][i] + (tables[k][i + 1] - tables[k][i]) * (x - i);
+  };
+  const ata = Array.from({ length: 4 }, () => [0, 0, 0, 0]);
+  const atb = Array.from({ length: 3 }, () => [0, 0, 0, 0]);
+  const grid = 9;
+  for (let b = 0; b < grid; b++)
+    for (let g = 0; g < grid; g++)
+      for (let r = 0; r < grid; r++) {
+        const x = [r / (grid - 1), g / (grid - 1), b / (grid - 1)];
+        const z = [curve(0, x[0]), curve(1, x[1]), curve(2, x[2]), 1];
+        const y = applyVideoLut(lut, x);
+        for (let i = 0; i < 4; i++) {
+          for (let j = 0; j < 4; j++) ata[i][j] += z[i] * z[j];
+          for (let k = 0; k < 3; k++) atb[k][i] += z[i] * y[k];
+        }
+      }
+  const matrix = atb.map((rhs) => solve4(ata, rhs));
+  const result = { tables, matrix };
+  approximations.set(lut, result);
+  return result;
+}
+function solve4(a, b) {
+  const m = a.map((row, i) => [...row, b[i]]);
+  for (let col = 0; col < 4; col++) {
+    let pivot = col;
+    for (let r = col + 1; r < 4; r++) if (Math.abs(m[r][col]) > Math.abs(m[pivot][col])) pivot = r;
+    if (Math.abs(m[pivot][col]) < 1e-12) continue;
+    [m[col], m[pivot]] = [m[pivot], m[col]];
+    for (let r = 0; r < 4; r++) {
+      if (r === col) continue;
+      const f = m[r][col] / m[col][col];
+      for (let c = col; c < 5; c++) m[r][c] -= f * m[col][c];
+    }
+  }
+  return m.map((row, i) => Math.abs(row[i]) < 1e-12 ? 0 : row[4] / row[i]);
+}
+var VideoLutCache = class {
+  constructor(loader = async (src) => {
+    const res = await fetch(src);
+    if (!res.ok) throw new Error(`${res.status} ${res.statusText}`.trim());
+    return res.text();
+  }) {
+    this.loader = loader;
+  }
+  loader;
+  ready = /* @__PURE__ */ new Map();
+  pending = /* @__PURE__ */ new Map();
+  failed = /* @__PURE__ */ new Map();
+  listeners = /* @__PURE__ */ new Set();
+  /** The LUT if loaded, without starting to load it. */
+  peek(src) {
+    return this.ready.get(src);
+  }
+  /** The LUT if loaded; otherwise `undefined`, and loading starts (once) unless it failed. */
+  get(src) {
+    const lut = this.ready.get(src);
+    if (!lut && !this.failed.has(src)) void this.load(src).catch(() => {
+    });
+    return lut;
+  }
+  /** Why loading a LUT failed, if it did. */
+  error(src) {
+    return this.failed.get(src);
+  }
+  /** The LUT, loading and reading it if needed. Rejects with a readable error. */
+  load(src) {
+    const ready = this.ready.get(src);
+    if (ready) return Promise.resolve(ready);
+    const failed = this.failed.get(src);
+    if (failed) return Promise.reject(new Error(failed));
+    let pending = this.pending.get(src);
+    if (!pending) {
+      pending = Promise.resolve().then(() => this.loader(src)).then((v) => typeof v === "string" ? parseVideoCubeLut(v) : v).then(
+        (lut) => {
+          this.pending.delete(src);
+          this.ready.set(src, lut);
+          this.emit();
+          return lut;
+        },
+        (e) => {
+          this.pending.delete(src);
+          const message = `The LUT "${src}" could not be read: ${e instanceof Error ? e.message : String(e)}`;
+          this.failed.set(src, message);
+          this.emit();
+          throw new Error(message);
+        }
+      );
+      this.pending.set(src, pending);
+    }
+    return pending;
+  }
+  /** Uses a LUT the host already has (`.cube` text or a parsed LUT), under `src`. */
+  set(src, lut) {
+    const parsed = typeof lut === "string" ? parseVideoCubeLut(lut) : lut;
+    this.ready.set(src, parsed);
+    this.failed.delete(src);
+    this.emit();
+    return parsed;
+  }
+  /** Forgets a failure so the next `get` tries again. */
+  retry(src) {
+    if (this.failed.delete(src)) this.emit();
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+    return () => {
+      this.listeners.delete(fn);
+    };
+  }
+  emit() {
+    for (const l of [...this.listeners]) l();
+  }
+};
+
 // src/video-editor/grade.ts
 var VIDEO_GRADE_CONTROLS = [
   { key: "exposure", label: "Exposure", min: -3, max: 3, step: 0.1, description: "Exposure in stops: +1 doubles every channel, -1 halves it (default 0)." },
@@ -230,6 +479,12 @@ var VIDEO_GRADE_PRESETS = {
 };
 var VIDEO_GRADE_PRESET_NAMES = Object.keys(VIDEO_GRADE_PRESETS);
 var clampTo = (c, v) => Math.min(c.max, Math.max(c.min, v));
+function normalizeVideoGradeLut(lut) {
+  if (!lut || typeof lut.src !== "string" || !lut.src) return void 0;
+  const strength = typeof lut.strength === "number" && Number.isFinite(lut.strength) ? Math.round(Math.min(1, Math.max(0, lut.strength)) * 1e3) / 1e3 : 1;
+  if (!strength) return void 0;
+  return { src: lut.src, ...strength !== 1 ? { strength } : {}, ...lut.name ? { name: lut.name } : {} };
+}
 function normalizeVideoGrade(grade) {
   if (!grade) return void 0;
   const out = {};
@@ -237,6 +492,8 @@ function normalizeVideoGrade(grade) {
     const v = grade[c.key];
     if (typeof v === "number" && Number.isFinite(v) && v !== 0) out[c.key] = Math.round(clampTo(c, v) * 1e3) / 1e3;
   }
+  const lut = normalizeVideoGradeLut(grade.lut);
+  if (lut) out.lut = lut;
   return Object.keys(out).length ? out : void 0;
 }
 function videoGradePreset(name, amount = 1) {
@@ -245,6 +502,9 @@ function videoGradePreset(name, amount = 1) {
   const k = Math.min(1, Math.max(0, amount));
   return normalizeVideoGrade(Object.fromEntries(Object.entries(preset).map(([key, v]) => [key, v * k])));
 }
+function videoGradeLook(current, name, amount = 1) {
+  return normalizeVideoGrade({ ...videoGradePreset(name, amount), ...current?.lut ? { lut: current.lut } : {} });
+}
 function videoGradeSteps(grade) {
   const g = normalizeVideoGrade(grade);
   if (!g) return [];
@@ -302,21 +562,35 @@ function videoGradeStepMatrix(step) {
     }
   }
 }
-function applyVideoGrade(grade, rgb) {
+function applyVideoGrade(grade, rgb, lut) {
   let v = rgb.map((x) => x / 255);
   for (const step of videoGradeSteps(grade)) {
     const m = videoGradeStepMatrix(step);
     v = m.map((row) => Math.min(1, Math.max(0, row[0] * v[0] + row[1] * v[1] + row[2] * v[2] + row[3])));
   }
+  const setting = normalizeVideoGradeLut(grade?.lut);
+  if (setting && lut) {
+    const out = applyVideoLut(lut, v);
+    const s = setting.strength ?? 1;
+    v = v.map((x, k) => x + (out[k] - x) * s);
+  }
   return v.map((x) => Math.round(x * 255));
 }
 var fmt2 = (v) => String(Math.round(v * 1e5) / 1e5);
 function videoGradeStepSvgValues(step) {
   return videoGradeStepMatrix(step).map((row) => [row[0], row[1], row[2], 0, row[3]].map(fmt2).join(" ")).concat("0 0 0 1 0").join(" ");
 }
-function videoGradeSvgFilter(id, grade) {
+function videoLutSvgPrimitives(lut, strength = 1) {
+  const { tables, matrix } = videoLutSvgApproximation(lut);
+  const table = (k) => tables[k].map(fmt2).join(" ");
+  const values = matrix.map((row) => [row[0], row[1], row[2], 0, row[3]].map(fmt2).join(" ")).concat("0 0 0 1 0").join(" ");
+  const s = Math.min(1, Math.max(0, strength));
+  return `<feComponentTransfer result="lutIn"><feFuncA type="identity"/></feComponentTransfer><feComponentTransfer><feFuncR type="table" tableValues="${table(0)}"/><feFuncG type="table" tableValues="${table(1)}"/><feFuncB type="table" tableValues="${table(2)}"/></feComponentTransfer><feColorMatrix type="matrix" values="${values}"/>` + (s < 1 ? `<feComposite in2="lutIn" operator="arithmetic" k1="0" k2="${fmt2(s)}" k3="${fmt2(1 - s)}" k4="0"/>` : "");
+}
+function videoGradeSvgFilter(id, grade, lut) {
   const steps = videoGradeSteps(grade);
-  return `<filter id="${id}" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">${steps.map((s) => `<feColorMatrix type="matrix" values="${videoGradeStepSvgValues(s)}"/>`).join("")}</filter>`;
+  const setting = normalizeVideoGradeLut(grade?.lut);
+  return `<filter id="${id}" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">${steps.map((s) => `<feColorMatrix type="matrix" values="${videoGradeStepSvgValues(s)}"/>`).join("")}${setting && lut ? videoLutSvgPrimitives(lut, setting.strength) : ""}</filter>`;
 }
 var videoGradeGainsFilterId = (step) => `pixerate-wb-${[step.r, step.g, step.b].map((v) => Math.round(v * 1e3)).join("-")}`;
 function videoGradeCssFilter(grade) {
@@ -530,10 +804,17 @@ function parseVideoClipAnimation(v, path) {
 function parseVideoGrade(v, path) {
   if (v === void 0) return void 0;
   if (!isObject(v)) return fail(path, "must be an object such as { exposure, contrast, saturation }");
-  const known = new Set(VIDEO_GRADE_CONTROLS.map((c) => c.key));
+  const known = /* @__PURE__ */ new Set([...VIDEO_GRADE_CONTROLS.map((c) => c.key), "lut"]);
   const unknown = Object.keys(v).find((k) => !known.has(k));
   if (unknown) fail(`${path}.${unknown}`, `is not a grade setting; use ${[...known].join(", ")}`);
-  return compact(Object.fromEntries(VIDEO_GRADE_CONTROLS.map((c) => [c.key, num(v[c.key], `${path}.${c.key}`, { optional: true, min: c.min, max: c.max })])));
+  return compact({ ...Object.fromEntries(VIDEO_GRADE_CONTROLS.map((c) => [c.key, num(v[c.key], `${path}.${c.key}`, { optional: true, min: c.min, max: c.max })])), lut: parseVideoGradeLut(v.lut, `${path}.lut`) });
+}
+function parseVideoGradeLut(v, path) {
+  if (v === void 0) return void 0;
+  if (!isObject(v)) return fail(path, "must be an object { src, strength } naming a .cube file");
+  const unknown = Object.keys(v).find((k) => !["src", "strength", "name"].includes(k));
+  if (unknown) fail(`${path}.${unknown}`, "is not a LUT setting; use src, strength, name");
+  return compact({ src: str(v.src, `${path}.src`), strength: num(v.strength, `${path}.strength`, { optional: true, min: 0, max: 1 }), name: str(v.name, `${path}.name`, true) });
 }
 function parseVideoTransition(v, path) {
   if (v === void 0) return void 0;
@@ -1797,10 +2078,10 @@ function videoTitleFrame(project, clip, clipTime = 0) {
   const layer = { clip: clip.id, track: "", type: "text", opacity: 1, rect: placeVideoRect(project, project, "fill", clip.transform, clipTime), rotation: videoTransformAt(clip.transform, clipTime).rotation, text: videoTextStyle(clip) };
   return { time: clip.start, width: project.width, height: project.height, background: "rgba(0,0,0,0)", layers: [layer], audio: [] };
 }
-var clamp01 = (v) => Math.min(1, Math.max(0, v));
-var videoTransitionEase = (progress) => (1 - Math.cos(Math.PI * clamp01(progress))) / 2;
+var clamp012 = (v) => Math.min(1, Math.max(0, v));
+var videoTransitionEase = (progress) => (1 - Math.cos(Math.PI * clamp012(progress))) / 2;
 function videoFadeCurveGain(curve, x) {
-  const t = clamp01(x);
+  const t = clamp012(x);
   switch (curve) {
     case "equal-power":
       return Math.sin(t * Math.PI / 2);
@@ -1834,8 +2115,8 @@ function activeOnTrack(track, time) {
     const tail = next?.transition ? next.transition.duration / 2 : 0;
     if (time < clip.start - lead || time >= videoClipEnd(clip) + tail) continue;
     const a = { clip };
-    if (lead && time < clip.start + lead) a.incoming = { progress: clamp01((time - (clip.start - lead)) / (2 * lead)), type: clip.transition.type, transition: clip.transition };
-    if (tail && time >= videoClipEnd(clip) - tail) a.outgoing = { progress: clamp01((time - (videoClipEnd(clip) - tail)) / (2 * tail)), type: next.transition.type, next };
+    if (lead && time < clip.start + lead) a.incoming = { progress: clamp012((time - (clip.start - lead)) / (2 * lead)), type: clip.transition.type, transition: clip.transition };
+    if (tail && time >= videoClipEnd(clip) - tail) a.outgoing = { progress: clamp012((time - (videoClipEnd(clip) - tail)) / (2 * tail)), type: next.transition.type, next };
     out.push(a);
   }
   return out;
@@ -1891,7 +2172,7 @@ function videoFrameAt(project, time) {
       const across = shiftDirection === "left" || shiftDirection === "right";
       const sign = shiftDirection === "left" || shiftDirection === "up" ? -1 : 1;
       const rect = shift ? { ...placed, ...across ? { x: placed.x + sign * shift * project.width } : { y: placed.y + sign * shift * project.height } } : placed;
-      const layer = { clip: clip.id, track: track.id, type: clip.type, opacity: clamp01(opacity), rect, rotation: videoValueAt(shown.transform?.rotation, clipTime, 0) };
+      const layer = { clip: clip.id, track: track.id, type: clip.type, opacity: clamp012(opacity), rect, rotation: videoValueAt(shown.transform?.rotation, clipTime, 0) };
       if (wipe) layer.wipe = wipe;
       if (iris) layer.iris = iris;
       if (clip.blend && clip.blend !== "normal") layer.blend = clip.blend;
@@ -1901,7 +2182,7 @@ function videoFrameAt(project, time) {
       if (clip.type === "text") layer.text = videoTextStyle(clip);
       if (clip.type === "color") layer.color = clip.color;
       if (layer.opacity > 0) layers.push(layer);
-      if (dip && dip.opacity > 0) layers.push({ clip: `transition:${incoming ? clip.id : outgoing.next.id}`, track: track.id, type: "color", color: dip.color, opacity: clamp01(dip.opacity), rect: { x: 0, y: 0, width: project.width, height: project.height }, rotation: 0 });
+      if (dip && dip.opacity > 0) layers.push({ clip: `transition:${incoming ? clip.id : outgoing.next.id}`, track: track.id, type: "color", color: dip.color, opacity: clamp012(dip.opacity), rect: { x: 0, y: 0, width: project.width, height: project.height }, rotation: 0 });
     }
   }
   return { time, width: project.width, height: project.height, background: project.background ?? "#000000", layers, audio };
@@ -2685,7 +2966,7 @@ function videoFrameToSvg(frame, options = {}, assets = []) {
     if (layer.opacity < 1) attrs.push(`opacity="${n(layer.opacity)}"`);
     if (layer.blend) attrs.push(`style="mix-blend-mode:${layer.blend === "add" ? "plus-lighter" : layer.blend}"`);
     if (layer.grade) {
-      defs.push(videoGradeSvgFilter(`g${i}`, layer.grade));
+      defs.push(videoGradeSvgFilter(`g${i}`, layer.grade, layer.grade.lut ? options.lutFor?.(layer.grade.lut.src) : null));
       attrs.push(`filter="url(#g${i})"`);
     }
     if (layer.rotation) attrs.push(`transform="rotate(${n(layer.rotation)} ${n(rect.x + rect.width / 2)} ${n(rect.y + rect.height / 2)})"`);
@@ -2748,69 +3029,96 @@ function videoContactSheetSvg(project, times, options = {}) {
   });
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(W)} ${n(H)}" width="${n(W)}" height="${n(H)}"><rect width="100%" height="100%" fill="#f8fafc"/>${cells.join("")}</svg>`;
 }
+function paintVideoLayer(ctx, frame, layer, sourceFor, options) {
+  const { rect } = layer;
+  if (layer.iris) {
+    ctx.beginPath();
+    ctx.arc(frame.width / 2, frame.height / 2, videoIrisRadius(frame, layer.iris.progress), 0, 2 * Math.PI);
+    ctx.clip();
+  }
+  if (layer.grade) {
+    const defs = videoGradeSvgDefs(layer.grade);
+    if (options.defineSvgFilter) for (const d of defs) options.defineSvgFilter(d.id, d.markup);
+    const css = videoGradeCssFilter(layer.grade);
+    ctx.filter = options.defineSvgFilter ? css || "none" : css.replace(/\s*url\([^)]*\)/g, "").trim() || "none";
+  }
+  if (layer.rotation) {
+    ctx.translate(rect.x + rect.width / 2, rect.y + rect.height / 2);
+    ctx.rotate(layer.rotation * Math.PI / 180);
+    ctx.translate(-(rect.x + rect.width / 2), -(rect.y + rect.height / 2));
+  }
+  if (layer.wipe) {
+    const r = videoWipeRect(rect, layer.wipe);
+    ctx.beginPath();
+    ctx.rect(r.x, r.y, r.width, r.height);
+    ctx.clip();
+  }
+  if (layer.type === "color") {
+    ctx.fillStyle = layer.color ?? "#000000";
+    ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+  } else if (layer.type === "text" && layer.text) {
+    const t = layer.text;
+    const lines = t.text.split("\n");
+    const lh = t.fontSize * 1.2;
+    const cx = rect.x + rect.width / 2;
+    const top = rect.y + rect.height / 2 - lh * (lines.length - 1) / 2;
+    ctx.font = `${t.fontWeight} ${t.fontSize}px ${t.fontFamily}`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    if (t.background) {
+      const w = Math.max(...lines.map((l) => ctx.measureText(l).width)) + t.fontSize;
+      const h = lh * lines.length + t.fontSize * 0.4;
+      ctx.fillStyle = t.background;
+      ctx.fillRect(cx - w / 2, rect.y + rect.height / 2 - h / 2, w, h);
+    }
+    ctx.fillStyle = t.color;
+    lines.forEach((l, k) => ctx.fillText(l, cx, top + k * lh));
+  } else {
+    const source = sourceFor(layer);
+    if (source) ctx.drawImage(source, rect.x, rect.y, rect.width, rect.height);
+    else {
+      ctx.fillStyle = "#334155";
+      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
+      ctx.strokeStyle = "#94a3b8";
+      ctx.lineWidth = 2;
+      ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    }
+  }
+}
 function drawVideoFrame(ctx, frame, sourceFor, scale = 1, options = {}) {
   ctx.save();
   ctx.setTransform(scale, 0, 0, scale, 0, 0);
   ctx.globalAlpha = 1;
   ctx.fillStyle = frame.background;
   ctx.fillRect(0, 0, frame.width, frame.height);
+  const cw = Math.max(1, Math.round(frame.width * scale));
+  const ch = Math.max(1, Math.round(frame.height * scale));
   for (const layer of frame.layers) {
-    const { rect } = layer;
+    const setting = layer.grade?.lut;
+    const lut = setting ? options.lutFor?.(setting.src) : null;
+    const scratch = lut ? options.scratch?.(cw, ch) : null;
     ctx.save();
-    ctx.globalAlpha = layer.opacity;
-    if (layer.iris) {
-      ctx.beginPath();
-      ctx.arc(frame.width / 2, frame.height / 2, videoIrisRadius(frame, layer.iris.progress), 0, 2 * Math.PI);
-      ctx.clip();
-    }
-    if (layer.blend && layer.blend !== "normal") ctx.globalCompositeOperation = layer.blend === "add" ? "lighter" : layer.blend;
-    if (layer.grade) {
-      const defs = videoGradeSvgDefs(layer.grade);
-      if (options.defineSvgFilter) for (const d of defs) options.defineSvgFilter(d.id, d.markup);
-      const css = videoGradeCssFilter(layer.grade);
-      ctx.filter = options.defineSvgFilter ? css : css.replace(/\s*url\([^)]*\)/g, "").trim() || "none";
-    }
-    if (layer.rotation) {
-      ctx.translate(rect.x + rect.width / 2, rect.y + rect.height / 2);
-      ctx.rotate(layer.rotation * Math.PI / 180);
-      ctx.translate(-(rect.x + rect.width / 2), -(rect.y + rect.height / 2));
-    }
-    if (layer.wipe) {
-      const r = videoWipeRect(rect, layer.wipe);
-      ctx.beginPath();
-      ctx.rect(r.x, r.y, r.width, r.height);
-      ctx.clip();
-    }
-    if (layer.type === "color") {
-      ctx.fillStyle = layer.color ?? "#000000";
-      ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-    } else if (layer.type === "text" && layer.text) {
-      const t = layer.text;
-      const lines = t.text.split("\n");
-      const lh = t.fontSize * 1.2;
-      const cx = rect.x + rect.width / 2;
-      const top = rect.y + rect.height / 2 - lh * (lines.length - 1) / 2;
-      ctx.font = `${t.fontWeight} ${t.fontSize}px ${t.fontFamily}`;
-      ctx.textAlign = "center";
-      ctx.textBaseline = "middle";
-      if (t.background) {
-        const w = Math.max(...lines.map((l) => ctx.measureText(l).width)) + t.fontSize;
-        const h = lh * lines.length + t.fontSize * 0.4;
-        ctx.fillStyle = t.background;
-        ctx.fillRect(cx - w / 2, rect.y + rect.height / 2 - h / 2, w, h);
-      }
-      ctx.fillStyle = t.color;
-      lines.forEach((l, k) => ctx.fillText(l, cx, top + k * lh));
+    if (lut && scratch) {
+      const s = scratch.ctx;
+      s.save();
+      s.setTransform(1, 0, 0, 1, 0, 0);
+      s.clearRect(0, 0, cw, ch);
+      s.setTransform(scale, 0, 0, scale, 0, 0);
+      s.globalAlpha = 1;
+      s.globalCompositeOperation = "source-over";
+      paintVideoLayer(s, frame, layer, sourceFor, options);
+      s.restore();
+      const img = s.getImageData(0, 0, cw, ch);
+      applyVideoLutToPixels(lut, img.data, setting.strength ?? 1);
+      s.putImageData(img, 0, 0);
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.globalAlpha = layer.opacity;
+      if (layer.blend && layer.blend !== "normal") ctx.globalCompositeOperation = layer.blend === "add" ? "lighter" : layer.blend;
+      ctx.drawImage(scratch.canvas, 0, 0, cw, ch);
     } else {
-      const source = sourceFor(layer);
-      if (source) ctx.drawImage(source, rect.x, rect.y, rect.width, rect.height);
-      else {
-        ctx.fillStyle = "#334155";
-        ctx.fillRect(rect.x, rect.y, rect.width, rect.height);
-        ctx.strokeStyle = "#94a3b8";
-        ctx.lineWidth = 2;
-        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
-      }
+      ctx.globalAlpha = layer.opacity;
+      if (layer.blend && layer.blend !== "normal") ctx.globalCompositeOperation = layer.blend === "add" ? "lighter" : layer.blend;
+      paintVideoLayer(ctx, frame, layer, sourceFor, options);
     }
     ctx.restore();
   }
@@ -3088,7 +3396,7 @@ function buildFfmpeg(project, options, measure) {
           `enable='between(t,${sec(clip.start)},${sec(end)})'`
         ];
         if (tf?.rotation) notes.push(`Title "${clip.id}" is drawn without its rotation (drawtext cannot rotate).`);
-        if (videoGradeFfmpegFilters(clip.grade).length) notes.push(`Title "${clip.id}" is drawn without its grade (drawtext draws straight onto the picture); pass titleImage to grade titles.`);
+        if (videoGradeFfmpegFilters(clip.grade).length || normalizeVideoGradeLut(clip.grade?.lut)) notes.push(`Title "${clip.id}" is drawn without its grade (drawtext draws straight onto the picture); pass titleImage to grade titles.`);
         if (clip.blend && clip.blend !== "normal") notes.push(`Title "${clip.id}" is drawn without its blend mode (drawtext draws straight onto the picture); pass titleImage to blend titles.`);
         graph.push(`[${cur}]drawtext=${opts.join(":")}[${next}]`);
         cur = next;
@@ -3108,6 +3416,20 @@ function buildFfmpeg(project, options, measure) {
       }
       const grade = videoGradeFfmpegFilters(clip.grade);
       if (grade.length) chain.push("format=rgba", ...grade);
+      const lut = normalizeVideoGradeLut(clip.grade?.lut);
+      if (lut) {
+        chain.push("format=gbrap");
+        const path = options.resolveLut ? options.resolveLut(lut.src) : lut.src;
+        if (/^(blob|data|https?):/i.test(path)) notes.push(`ffmpeg's lut3d reads only local files, and clip "${clip.id}"'s LUT is "${path.slice(0, 80)}"; save it and pass resolveLut to give its path.`);
+        const file = ffmpegFilterValue(path);
+        const into2 = `q${next}`;
+        graph.push(`${source.startsWith("[") ? source : `${source},`}${chain.join(",")}[${into2}]`);
+        const lut3d = `lut3d=file=${file}:interp=tetrahedral`;
+        if ((lut.strength ?? 1) >= 1) graph.push(`[${into2}]${lut3d}[r${next}]`);
+        else graph.push(`[${into2}]split[o${next}][p${next}]`, `[p${next}]${lut3d}[s${next}]`, `[s${next}][o${next}]blend=all_mode=normal:all_opacity=${lut.strength}[r${next}]`);
+        source = `[r${next}]`;
+        chain.length = 0;
+      }
       chain.push("format=yuva420p");
       if (isVideoKeyframes(clip.opacity)) chain.push(`geq=lum='lum(X,Y)':cb='cb(X,Y)':cr='cr(X,Y)':a='alpha(X,Y)*clip(${expr(clip.opacity, onChain("T"), 1, "opacity")},0,1)'`);
       else if (clip.opacity !== void 0 && clip.opacity < 1) chain.push(`colorchannelmixer=aa=${clip.opacity}`);
@@ -3225,6 +3547,9 @@ var VideoPreviewEngine = class {
     this.canvas = canvas2;
     this.ctx = options.context !== void 0 ? options.context : canvas2.getContext?.("2d") ?? null;
     this.unsubscribe = source.subscribe(() => this.update());
+    this.lutCache = options.luts !== void 0 ? options.luts : source.luts ?? null;
+    this.unsubscribeLuts = this.lutCache ? this.lutCache.subscribe(() => this.redraw()) : () => {
+    };
     const pixels = options.pixels !== void 0 ? options.pixels : source.previewPixels;
     this.detachPixels = pixels ? pixels.attach(() => this.readPixels()) : () => {
     };
@@ -3246,6 +3571,9 @@ var VideoPreviewEngine = class {
   pixelsTarget;
   drawn = null;
   complete = true;
+  lutCache;
+  unsubscribeLuts;
+  scratchCanvas;
   /** The canvas's pixels and the frame they show, or `null` when its context cannot be read. */
   readPixels() {
     const ctx = this.ctx;
@@ -3362,11 +3690,33 @@ var VideoPreviewEngine = class {
       if (!source) this.complete = false;
       return source;
     };
-    drawVideoFrame(this.ctx, frame, sourceFor, resolution, { defineSvgFilter: this.defineSvgFilter });
+    drawVideoFrame(this.ctx, frame, sourceFor, resolution, { defineSvgFilter: this.defineSvgFilter, lutFor: this.lutFor, scratch: this.scratch });
     this.drawn = { time: frame.time, complete: this.complete };
     this.options.onFrame?.(frame);
     this.pixelsTarget?.drawn(frame.time, this.complete);
   }
+  /** A grade's LUT once loaded; while it loads (or if it fails) the frame is drawn without it and counts as incomplete. */
+  lutFor = (src) => {
+    const lut = this.lutCache?.get(src);
+    if (!lut) this.complete = false;
+    return lut;
+  };
+  scratch = (width, height) => {
+    if (this.scratchCanvas === void 0) {
+      if (this.options.createScratch) this.scratchCanvas = this.options.createScratch(width, height);
+      else if (typeof document !== "undefined") {
+        const canvas2 = document.createElement("canvas");
+        const ctx = canvas2.getContext("2d", { willReadFrequently: true });
+        this.scratchCanvas = ctx ? { canvas: canvas2, ctx } : null;
+      } else this.scratchCanvas = null;
+    }
+    const s = this.scratchCanvas;
+    if (!s) return null;
+    const c = s.canvas;
+    if (c.width !== width) c.width = width;
+    if (c.height !== height) c.height = height;
+    return s;
+  };
   defineSvgFilter = (id, markup) => {
     if (this.options.defineSvgFilter === null) return;
     if (this.options.defineSvgFilter) return this.options.defineSvgFilter(id, markup);
@@ -3387,6 +3737,7 @@ var VideoPreviewEngine = class {
   destroy() {
     this.destroyed = true;
     this.detachPixels();
+    this.unsubscribeLuts();
     this.filterHost?.remove();
     this.filterHost = null;
     this.filters.clear();
@@ -3404,6 +3755,8 @@ var VideoEditorController = class {
   audioPeaks;
   /** The pixels the preview last drew, for scopes and `get_video_scopes` (a `VideoPreviewEngine` fills it). */
   previewPixels = new VideoPreviewPixels();
+  /** Grades' LUTs, loaded on demand for the preview, SVG frames and agents. */
+  luts;
   project;
   issues;
   selection = [];
@@ -3418,6 +3771,7 @@ var VideoEditorController = class {
   constructor(options = {}) {
     this.history = options.history ?? new HistoryManager();
     this.audioPeaks = options.audioPeaks instanceof VideoAudioPeaksCache ? options.audioPeaks : new VideoAudioPeaksCache(options.audioPeaks);
+    this.luts = options.luts instanceof VideoLutCache ? options.luts : new VideoLutCache(options.luts);
     this.project = options.project ? parseVideoProject(options.project) : createVideoProject();
     this.issues = checkVideoProject(this.project);
     this.readOnly = options.readOnly ?? false;
@@ -3628,7 +3982,7 @@ var VideoEditorController = class {
   }
   /** The frame at `time` (default: the playhead) as SVG. */
   toSvg(time = this.player.currentTime, options = {}) {
-    return videoProjectSvg(this.project, time, options);
+    return videoProjectSvg(this.project, time, { lutFor: (src) => this.luts.peek(src), ...options });
   }
   /** The project as an ffmpeg command. */
   toFfmpeg(options = {}) {
@@ -3644,126 +3998,364 @@ var VideoEditorController = class {
   }
 };
 
-// src/video-editor/tools.ts
-var round = (ms) => Math.round(ms * 10) / 10;
-var READ = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
-var WRITE = { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false };
-var WRITE_IDEMPOTENT = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
-var DESTRUCTIVE = { readOnlyHint: false, destructiveHint: true, idempotentHint: false, openWorldHint: false };
-var object = (properties, required = [], description) => ({
-  type: "object",
-  ...description ? { description } : {},
-  properties,
-  ...required.length ? { required } : {},
-  additionalProperties: false
-});
-var MS = (what) => ({ type: "number", minimum: 0, description: `${what}, in milliseconds.` });
-var CLIP_ID = { type: "string", minLength: 1, description: 'A clip id from get_video_project (e.g. "c1").' };
-var TRACK_ID = { type: "string", minLength: 1, description: 'A track id from get_video_project (e.g. "v1" or "a1").' };
-var ASSET_ID = { type: "string", minLength: 1, description: "An asset id from get_video_project." };
-var COLOR = (what) => ({ type: "string", minLength: 1, description: `${what}: a CSS colour such as "#ffcc00".` });
-var RIPPLE = {
-  type: "boolean",
-  description: "Push (or pull) later material along by the change, keeping the cuts after it in sync (default false: refuse if it would overlap). When the track is sync-locked (the default), every other unlocked sync-locked track moves too: clips across the edit point are cut when time opens, and closing time is refused if another sync-locked track has a clip in that stretch."
-};
-var MODE = {
-  type: "string",
-  enum: [...VIDEO_PLACEMENT_MODES],
-  description: 'What to do with clips already where it lands: "refuse" (default) fails with the next free place; "overwrite" cuts, trims or removes what is underneath on that track; "insert" cuts everything across the start and pushes later material along by its length on this track and every sync-locked track.'
-};
-var DELTA = (what) => ({ type: "number", description: `${what}, in milliseconds of timeline time: positive is later, negative earlier. It is clamped to what the media and neighbours allow; the result says how far it went.` });
-var RANGE_TRACKS = { type: "array", items: TRACK_ID, minItems: 1, uniqueItems: true, description: "Tracks to work on (default: every unlocked track). Locked tracks are refused." };
-var TRANSFORM = object(
-  {
-    x: { type: "number", description: "Offset of the centre to the right of the frame's centre, in pixels (default 0)." },
-    y: { type: "number", description: "Offset of the centre below the frame's centre, in pixels (default 0)." },
-    scale: { type: "number", minimum: 0, description: "Size after fitting (1 = fitted size, default 1)." },
-    rotation: { type: "number", description: "Degrees clockwise (default 0)." }
-  },
-  [],
-  "Where the picture sits after it is fitted."
-);
-var TRANSITION = object(
-  {
-    type: { type: "string", enum: [...VIDEO_TRANSITION_TYPES], description: "crossfade (this clip fades up over the one before), dip (down into a colour and up out of it), wipe (an edge travels across revealing this clip), push (this clip slides in and pushes the one before out), slide (this clip slides in over the one before) or iris (a circle opens from the centre)." },
-    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms, centred on the cut. Every type but dip needs half of it in media past the cut on both sides (handles); a dip needs none." },
-    color: COLOR("For dip: the colour passed through (default black)"),
-    direction: { type: "string", enum: [...VIDEO_WIPE_DIRECTIONS], description: "For wipe, push and slide: the way the edge or picture travels (default right, coming in from the left)." },
-    audioCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fades through it: default equal-power for every type but dip (steady loudness while the two sounds overlap), linear for dip; or s-curve, exponential, logarithmic." }
-  },
-  ["type", "duration"],
-  "A transition from the clip that ends where this one starts on the same track."
-);
-var GRADE = object(
-  Object.fromEntries(VIDEO_GRADE_CONTROLS.map((c) => [c.key, { type: "number", minimum: c.min, maximum: c.max, description: c.description }])),
-  [],
-  "Colour correction of the picture, applied in order: exposure, contrast, saturation, hue, white balance (temperature, tint). Leave a setting out for no change; the object replaces the clip's whole grade."
-);
-var ANIMATION = (when) => object(
-  {
-    effect: { type: "string", enum: [...VIDEO_CLIP_ANIMATION_EFFECTS], description: "fade; rise (up into place) or drop (down into place); slide-left / slide-right (moving that way); zoom (grows into place); pop (grows past its size and settles). Each also fades; an exit plays the movement backwards." },
-    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms (default 500)." }
-  },
-  ["effect"],
-  when
-);
-var CLIP_COMMON = {
-  name: { type: "string", description: "A label for the clip." },
-  opacity: { type: "number", minimum: 0, maximum: 1, description: "Opacity 0\u20131 (default 1). A number replaces any keyframes; set_video_keyframes animates it." },
-  transform: TRANSFORM,
-  fit: { type: "string", enum: [...VIDEO_FITS], description: "How the picture fits the frame before the transform, as CSS object-fit (default contain for media, fill for colours)." },
-  grade: GRADE,
-  animateIn: ANIMATION("How the picture enters, from the clip's start (on top of any fade in). Titles usually rise, pop or fade in."),
-  animateOut: ANIMATION("How the picture leaves, ending at the clip's end."),
-  blend: { type: "string", enum: [...VIDEO_BLEND_MODES], description: "How the picture mixes with what is beneath it, as CSS mix-blend-mode (default normal): multiply darkens (shadows, textures), screen and add lighten (light leaks, flares, glows), overlay and soft-light add contrast, difference and exclusion invert." },
-  fadeIn: MS("Fade up from nothing (picture and sound) over this long"),
-  fadeOut: MS("Fade down to nothing over this long")
-};
-var MEDIA_FIELDS = {
-  in: MS("Where in the source it starts (default 0)"),
-  speed: { type: "number", minimum: 0.05, maximum: 20, description: "Playback speed (default 1). Changing it keeps the stretch of source, so the clip gets shorter or longer." },
-  volume: { type: "number", minimum: 0, maximum: 4, description: "Gain (1 = unchanged, default 1). A number replaces any keyframes; set_video_keyframes animates it." },
-  muted: { type: "boolean", description: "Silence this clip (default false)." },
-  fadeInCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fade in (default linear; the picture always fades linearly): linear, equal-power (steady loudness, best for crossfades), s-curve (gentle at both ends), exponential (slow start, natural from silence) or logarithmic (fast start)." },
-  fadeOutCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fade out (default linear), the same choices as fadeInCurve; exponential sounds natural fading to silence." }
-};
-var TEXT_FIELDS = {
-  text: { type: "string", minLength: 1, description: `The title's text ("\\n" breaks lines).` },
-  color: COLOR("Text colour (default white)"),
-  fontSize: { type: "number", exclusiveMinimum: 0, description: "Pixels (default 64)." },
-  fontFamily: { type: "string", description: "CSS font family (default sans-serif)." },
-  fontWeight: { type: "number", minimum: 100, maximum: 1e3, description: "CSS weight (default 700)." },
-  background: COLOR("A box behind the text (default none)")
-};
-var PLACEMENT = {
-  id: { type: "string", minLength: 1, description: 'Id for the clip (default: a fresh one such as "c3").' },
-  start: MS("Where it starts on the timeline (default: the end of the track)"),
-  duration: { type: "number", exclusiveMinimum: 0, description: "Length on the timeline, in ms (default: the rest of the source for media, 5000 for stills, 3000 for titles and colours)." }
+// src/video-editor/ui.ts
+var STEPS = [40, 100, 200, 500, 1e3, 2e3, 5e3, 1e4, 15e3, 3e4, 6e4, 12e4, 3e5, 6e5];
+function videoRulerTicks(duration, pxPerSecond, fps) {
+  const pxPerMs = pxPerSecond / 1e3;
+  const major = STEPS.find((s) => s * pxPerMs >= 80) ?? STEPS[STEPS.length - 1];
+  const minor = STEPS.slice().reverse().find((s) => s < major && major % s === 0 && s * pxPerMs >= 10);
+  const step = minor ?? major;
+  const ticks = [];
+  for (let t = 0; t <= duration + 1e-6; t += step) {
+    const isMajor = Math.abs(t / major - Math.round(t / major)) < 1e-9;
+    ticks.push({ time: t, x: t * pxPerMs, major: isMajor, ...isMajor ? { label: formatVideoTimecode(t, fps).replace(/^00:/, "") } : {} });
+  }
+  return ticks;
+}
+function videoClipShowsWaveform(clip, asset, mode = "audio") {
+  if (clip.type !== "media" || mode === "none" || !videoAssetHasSound(asset)) return false;
+  return mode === "all" || asset.kind === "audio";
+}
+var VIDEO_CLIP_ANIMATION_LABELS = {
+  fade: "Fade",
+  rise: "Rise",
+  drop: "Drop",
+  "slide-left": "Slide left",
+  "slide-right": "Slide right",
+  zoom: "Zoom",
+  pop: "Pop"
 };
-var NEW_CLIP = {
-  description: "The clip: media (a stretch of an asset), text (a title) or color (a solid fill).",
-  oneOf: [
-    object({ type: { const: "media", description: "A stretch of an asset." }, asset: ASSET_ID, ...PLACEMENT, ...CLIP_COMMON, ...MEDIA_FIELDS }, ["type", "asset"], "A media clip."),
-    object({ type: { const: "text", description: "A title over the picture." }, ...PLACEMENT, ...CLIP_COMMON, ...TEXT_FIELDS }, ["type", "text"], "A title."),
-    object({ type: { const: "color", description: "A solid colour filling the frame." }, color: COLOR("The fill"), ...PLACEMENT, ...CLIP_COMMON }, ["type", "color"], "A colour.")
-  ]
+var VIDEO_TRANSITION_LABELS = {
+  crossfade: "Crossfade",
+  dip: "Dip to colour",
+  wipe: "Wipe",
+  push: "Push",
+  slide: "Slide",
+  iris: "Iris"
 };
-var SETTINGS = {
-  name: { type: "string", description: "Project name." },
-  width: { type: "integer", minimum: 16, maximum: 8192, description: "Frame width in pixels." },
-  height: { type: "integer", minimum: 16, maximum: 8192, description: "Frame height in pixels." },
-  fps: { type: "number", exclusiveMinimum: 0, maximum: 240, description: "Frames per second (e.g. 24, 25, 30, 60)." },
-  background: COLOR("What shows where no clip covers the frame (default black)")
+var videoTransitionHasDirection = (type) => type === "wipe" || type === "push" || type === "slide";
+var VIDEO_BLEND_MODE_LABELS = {
+  normal: "Normal",
+  multiply: "Multiply",
+  screen: "Screen",
+  overlay: "Overlay",
+  darken: "Darken",
+  lighten: "Lighten",
+  "color-dodge": "Colour dodge",
+  "color-burn": "Colour burn",
+  "hard-light": "Hard light",
+  "soft-light": "Soft light",
+  difference: "Difference",
+  exclusion: "Exclusion",
+  add: "Add"
 };
-var TRACK_FIELDS = {
-  name: { type: "string", description: "Track label." },
-  muted: { type: "boolean", description: "Silence every clip on it." },
-  hidden: { type: "boolean", description: "Leave its pictures out of the frame." },
-  locked: { type: "boolean", description: "Refuse edits to its clips." },
-  syncLocked: { type: "boolean", description: "Move with ripple edits on other sync-locked tracks so it stays in sync (default true). Turn off for a track that should stay put, e.g. a music bed." },
-  volume: { type: "number", minimum: 0, maximum: 4, description: "Gain for every clip on it (1 = unchanged)." }
+var VIDEO_FADE_CURVE_LABELS = {
+  linear: "Linear",
+  "equal-power": "Equal power",
+  "s-curve": "S-curve",
+  exponential: "Exponential",
+  logarithmic: "Logarithmic"
 };
-var ASSET_FIELDS = {
+function videoClipTint(clip, asset) {
+  if (clip.type === "text") return "#a855f7";
+  if (clip.type === "color") return clip.color;
+  if (!asset) return "#ef4444";
+  return asset.kind === "audio" ? "#10b981" : asset.kind === "image" ? "#f59e0b" : "#3b82f6";
+}
+function videoClipLabel(clip, asset) {
+  if (clip.name) return clip.name;
+  if (clip.type === "text") return clip.text.split("\n")[0];
+  if (clip.type === "color") return clip.color;
+  const base = asset?.name ?? asset?.src.replace(/^.*[\\/]/, "") ?? clip.asset;
+  const speed = videoClipSpeed(clip);
+  return speed !== 1 ? `${base} (${Math.round(speed * 100)}%)` : base;
+}
+function planVideoClipDrag(project, input) {
+  const at = findVideoClip(project, input.clip);
+  if (!at) return null;
+  const { clip, track } = at;
+  const snap = input.snap ?? ((t) => t);
+  if (input.mode === "move") {
+    const raw = Math.max(0, clip.start + input.delta);
+    const head = snap(raw) - raw;
+    const tail = snap(raw + clip.duration) - (raw + clip.duration);
+    const shifts = [head, tail].filter((d) => Math.abs(d) > 1e-9);
+    const start = Math.max(0, raw + (shifts.length ? shifts.reduce((a, b) => Math.abs(b) < Math.abs(a) ? b : a) : 0));
+    const target = input.track ?? track.id;
+    const moved = Math.abs(start - clip.start) > 1e-6 || target !== track.id;
+    const mode = input.placement && input.placement !== "refuse" ? { mode: input.placement } : {};
+    return { start, duration: clip.duration, track: target, edit: moved ? { op: "move_clip", clip: clip.id, start, ...target !== track.id ? { track: target } : {}, ...mode } : null };
+  }
+  const minimum = 1e3 / project.fps;
+  if (input.mode === "trim-start") {
+    const to2 = Math.min(snap(Math.max(0, clip.start + input.delta)), videoClipEnd(clip) - minimum);
+    const changed2 = Math.abs(to2 - clip.start) > 1e-6;
+    const plan = input.ripple ? { start: clip.start, duration: clip.duration - (to2 - clip.start) } : { start: to2, duration: videoClipEnd(clip) - to2 };
+    return { ...plan, track: track.id, edit: changed2 ? { op: "trim_clip", clip: clip.id, edge: "start", to: to2, ...input.ripple ? { ripple: true } : {} } : null };
+  }
+  const to = Math.max(snap(videoClipEnd(clip) + input.delta), clip.start + minimum);
+  const changed = Math.abs(to - videoClipEnd(clip)) > 1e-6;
+  return { start: clip.start, duration: to - clip.start, track: track.id, edit: changed ? { op: "trim_clip", clip: clip.id, edge: "end", to, ...input.ripple ? { ripple: true } : {} } : null };
+}
+function videoDropTracks(project, clipId) {
+  const at = findVideoClip(project, clipId);
+  if (!at) return [];
+  return project.tracks.filter((t) => t.kind === at.track.kind && !t.locked).map((t) => t.id);
+}
+function videoDragLabel(edit) {
+  if (edit.op === "move_clip") return edit.mode === "insert" ? "Insert clip" : edit.mode === "overwrite" ? "Overwrite clip" : "Move clip";
+  return edit.op === "trim_clip" && edit.ripple ? "Ripple trim" : "Trim clip";
+}
+function videoAssetDropEdit(project, assetId, options = {}) {
+  const asset = videoAssetMap(project).get(assetId);
+  if (!asset) return null;
+  const kind = asset.kind === "audio" ? "audio" : "video";
+  const track = options.track ?? project.tracks.find((t) => t.kind === kind && !t.locked)?.id;
+  if (!track) return null;
+  return { op: "add_clip", track, clip: { type: "media", asset: asset.id, ...options.start !== void 0 ? { start: options.start } : {} }, ...options.ripple ? { ripple: true } : {}, ...options.mode && options.mode !== "refuse" ? { mode: options.mode } : {} };
+}
+function videoAssetKindOf(typeOrName) {
+  const s = typeOrName.toLowerCase().replace(/[?#].*$/, "");
+  if (s.startsWith("video/") || /\.(mp4|m4v|mov|webm|ogv|mkv)$/.test(s)) return "video";
+  if (s.startsWith("audio/") || /\.(mp3|m4a|aac|wav|ogg|oga|flac|opus)$/.test(s)) return "audio";
+  if (s.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg|bmp)$/.test(s)) return "image";
+  return null;
+}
+function probeVideoMedia(src, kind, timeout = 15e3) {
+  return new Promise((resolve, reject) => {
+    if (typeof document === "undefined") return reject(new Error("Media can only be probed in a browser."));
+    const timer = setTimeout(() => reject(new Error(`"${src}" took too long to load.`)), timeout);
+    const done = (probe) => {
+      clearTimeout(timer);
+      resolve(probe);
+    };
+    const failed = () => {
+      clearTimeout(timer);
+      reject(new Error(`"${src}" could not be loaded as ${kind}.`));
+    };
+    if (kind === "image") {
+      const img = new Image();
+      img.onload = () => done({ kind, width: img.naturalWidth, height: img.naturalHeight });
+      img.onerror = failed;
+      img.src = src;
+      return;
+    }
+    const el = document.createElement(kind);
+    el.preload = "metadata";
+    el.onloadedmetadata = () => {
+      const duration = Number.isFinite(el.duration) ? Math.round(el.duration * 1e3) : void 0;
+      const v = el;
+      done({ kind, ...duration ? { duration } : {}, ...kind === "video" && v.videoWidth ? { width: v.videoWidth, height: v.videoHeight } : {} });
+    };
+    el.onerror = failed;
+    el.src = src;
+  });
+}
+var KEY_LABELS = {
+  opacity: { label: "Opacity", step: 0.05 },
+  volume: { label: "Volume", step: 0.05 },
+  x: { label: "X", step: 1 },
+  y: { label: "Y", step: 1 },
+  scale: { label: "Scale", step: 0.05 },
+  rotation: { label: "Rotation", step: 1 }
+};
+var animatableOf = (clip, property) => VIDEO_TRANSFORM_PROPERTIES.includes(property) ? clip.transform?.[property] : property === "volume" ? clip.type === "media" ? clip.volume : void 0 : clip.opacity;
+var playheadInClip = (clip, time) => Math.round(Math.min(clip.duration, Math.max(0, time - clip.start)));
+function videoKeyframeRows(project, clipId, time) {
+  const at = findVideoClip(project, clipId);
+  if (!at) return [];
+  const { clip } = at;
+  const asset = clip.type === "media" ? videoAssetMap(project).get(clip.asset) : void 0;
+  const visual = !(asset?.kind === "audio" || at.track.kind === "audio");
+  const audible = clip.type === "media" && videoAssetHasSound(asset);
+  const properties = [...visual ? ["opacity"] : [], ...audible ? ["volume"] : [], ...visual ? VIDEO_TRANSFORM_PROPERTIES : []];
+  const clipTime = playheadInClip(clip, time);
+  return properties.map((property) => {
+    const prop = animatableOf(clip, property);
+    const keys = isVideoKeyframes(prop) ? prop.keys : [];
+    const limits = VIDEO_KEYFRAME_LIMITS[property];
+    return {
+      property,
+      ...KEY_LABELS[property],
+      value: Math.round(videoValueAt(prop, clipTime, limits.default) * 1e3) / 1e3,
+      keyed: keys.length > 0,
+      keys: keys.length,
+      onKey: keys.some((k) => Math.abs(k.t - clipTime) < 0.5),
+      clipTime,
+      ...limits.min !== void 0 ? { min: limits.min } : {},
+      ...limits.max !== void 0 ? { max: limits.max } : {}
+    };
+  });
+}
+function plainValueEdit(clip, property, value) {
+  if (!VIDEO_TRANSFORM_PROPERTIES.includes(property))
+    return value === void 0 ? { op: "update_clip", clip: clip.id, remove: [property] } : { op: "update_clip", clip: clip.id, set: { [property]: value } };
+  const transform = { ...clip.transform, [property]: value };
+  if (value === void 0) delete transform[property];
+  return Object.keys(transform).length ? { op: "update_clip", clip: clip.id, set: { transform } } : { op: "update_clip", clip: clip.id, remove: ["transform"] };
+}
+function videoKeyframeValueEdit(project, clipId, property, time, value) {
+  const at = findVideoClip(project, clipId);
+  if (!at) return null;
+  const prop = animatableOf(at.clip, property);
+  if (!isVideoKeyframes(prop)) return plainValueEdit(at.clip, property, value);
+  if (value === void 0) return null;
+  return { op: "set_keyframes", clip: clipId, property, keys: setVideoKey(prop, { t: playheadInClip(at.clip, time), v: value }, VIDEO_KEYFRAME_LIMITS[property].default).keys };
+}
+function videoKeyframeToggleEdit(project, clipId, property, time) {
+  const at = findVideoClip(project, clipId);
+  if (!at) return null;
+  const prop = animatableOf(at.clip, property);
+  const t = playheadInClip(at.clip, time);
+  const fallback = VIDEO_KEYFRAME_LIMITS[property].default;
+  if (isVideoKeyframes(prop)) {
+    const key = prop.keys.find((k) => Math.abs(k.t - t) < 0.5);
+    if (key) {
+      const rest = removeVideoKey(prop, key.t);
+      return isVideoKeyframes(rest) ? { op: "set_keyframes", clip: clipId, property, keys: rest.keys } : plainValueEdit(at.clip, property, rest === fallback ? void 0 : rest);
+    }
+  }
+  const v = videoValueAt(prop, t, fallback);
+  return { op: "set_keyframes", clip: clipId, property, keys: isVideoKeyframes(prop) ? setVideoKey(prop, { t, v }, fallback).keys : [{ t, v }] };
+}
+function videoLutEdits(project, clips, lut) {
+  const edits = [];
+  for (const id of clips) {
+    const at = findVideoClip(project, id);
+    if (!at) continue;
+    const { lut: current, ...rest } = at.clip.grade ?? {};
+    if (!lut && !current) continue;
+    const grade = normalizeVideoGrade(lut ? { ...rest, lut } : rest);
+    edits.push(grade ? { op: "update_clip", clip: id, set: { grade } } : { op: "update_clip", clip: id, remove: ["grade"] });
+  }
+  return edits;
+}
+
+// src/video-editor/tools.ts
+var round = (ms) => Math.round(ms * 10) / 10;
+var READ = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var WRITE = { readOnlyHint: false, destructiveHint: false, idempotentHint: false, openWorldHint: false };
+var WRITE_IDEMPOTENT = { readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var DESTRUCTIVE = { readOnlyHint: false, destructiveHint: true, idempotentHint: false, openWorldHint: false };
+var object = (properties, required = [], description) => ({
+  type: "object",
+  ...description ? { description } : {},
+  properties,
+  ...required.length ? { required } : {},
+  additionalProperties: false
+});
+var MS = (what) => ({ type: "number", minimum: 0, description: `${what}, in milliseconds.` });
+var CLIP_ID = { type: "string", minLength: 1, description: 'A clip id from get_video_project (e.g. "c1").' };
+var TRACK_ID = { type: "string", minLength: 1, description: 'A track id from get_video_project (e.g. "v1" or "a1").' };
+var ASSET_ID = { type: "string", minLength: 1, description: "An asset id from get_video_project." };
+var COLOR = (what) => ({ type: "string", minLength: 1, description: `${what}: a CSS colour such as "#ffcc00".` });
+var RIPPLE = {
+  type: "boolean",
+  description: "Push (or pull) later material along by the change, keeping the cuts after it in sync (default false: refuse if it would overlap). When the track is sync-locked (the default), every other unlocked sync-locked track moves too: clips across the edit point are cut when time opens, and closing time is refused if another sync-locked track has a clip in that stretch."
+};
+var MODE = {
+  type: "string",
+  enum: [...VIDEO_PLACEMENT_MODES],
+  description: 'What to do with clips already where it lands: "refuse" (default) fails with the next free place; "overwrite" cuts, trims or removes what is underneath on that track; "insert" cuts everything across the start and pushes later material along by its length on this track and every sync-locked track.'
+};
+var DELTA = (what) => ({ type: "number", description: `${what}, in milliseconds of timeline time: positive is later, negative earlier. It is clamped to what the media and neighbours allow; the result says how far it went.` });
+var RANGE_TRACKS = { type: "array", items: TRACK_ID, minItems: 1, uniqueItems: true, description: "Tracks to work on (default: every unlocked track). Locked tracks are refused." };
+var TRANSFORM = object(
+  {
+    x: { type: "number", description: "Offset of the centre to the right of the frame's centre, in pixels (default 0)." },
+    y: { type: "number", description: "Offset of the centre below the frame's centre, in pixels (default 0)." },
+    scale: { type: "number", minimum: 0, description: "Size after fitting (1 = fitted size, default 1)." },
+    rotation: { type: "number", description: "Degrees clockwise (default 0)." }
+  },
+  [],
+  "Where the picture sits after it is fitted."
+);
+var TRANSITION = object(
+  {
+    type: { type: "string", enum: [...VIDEO_TRANSITION_TYPES], description: "crossfade (this clip fades up over the one before), dip (down into a colour and up out of it), wipe (an edge travels across revealing this clip), push (this clip slides in and pushes the one before out), slide (this clip slides in over the one before) or iris (a circle opens from the centre)." },
+    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms, centred on the cut. Every type but dip needs half of it in media past the cut on both sides (handles); a dip needs none." },
+    color: COLOR("For dip: the colour passed through (default black)"),
+    direction: { type: "string", enum: [...VIDEO_WIPE_DIRECTIONS], description: "For wipe, push and slide: the way the edge or picture travels (default right, coming in from the left)." },
+    audioCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fades through it: default equal-power for every type but dip (steady loudness while the two sounds overlap), linear for dip; or s-curve, exponential, logarithmic." }
+  },
+  ["type", "duration"],
+  "A transition from the clip that ends where this one starts on the same track."
+);
+var LUT_SRC = { type: "string", minLength: 1, description: 'A .cube 3D LUT file the host can load and ffmpeg can read: a URL or path, often from the user (e.g. "luts/teal-orange.cube").' };
+var LUT_STRENGTH = { type: "number", minimum: 0, maximum: 1, description: "How much of the LUT's change to apply, 0 (none) to 1 (full, the default); 0.3-0.7 for a subtler look." };
+var GRADE = object(
+  {
+    ...Object.fromEntries(VIDEO_GRADE_CONTROLS.map((c) => [c.key, { type: "number", minimum: c.min, maximum: c.max, description: c.description }])),
+    lut: object({ src: LUT_SRC, strength: LUT_STRENGTH, name: { type: "string", minLength: 1, description: "A label for the look." } }, ["src"], "A 3D LUT applied after the other settings (set_video_lut checks the file first).")
+  },
+  [],
+  "Colour correction of the picture, applied in order: exposure, contrast, saturation, hue, white balance (temperature, tint), then a LUT. Leave a setting out for no change; the object replaces the clip's whole grade."
+);
+var ANIMATION = (when) => object(
+  {
+    effect: { type: "string", enum: [...VIDEO_CLIP_ANIMATION_EFFECTS], description: "fade; rise (up into place) or drop (down into place); slide-left / slide-right (moving that way); zoom (grows into place); pop (grows past its size and settles). Each also fades; an exit plays the movement backwards." },
+    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms (default 500)." }
+  },
+  ["effect"],
+  when
+);
+var CLIP_COMMON = {
+  name: { type: "string", description: "A label for the clip." },
+  opacity: { type: "number", minimum: 0, maximum: 1, description: "Opacity 0\u20131 (default 1). A number replaces any keyframes; set_video_keyframes animates it." },
+  transform: TRANSFORM,
+  fit: { type: "string", enum: [...VIDEO_FITS], description: "How the picture fits the frame before the transform, as CSS object-fit (default contain for media, fill for colours)." },
+  grade: GRADE,
+  animateIn: ANIMATION("How the picture enters, from the clip's start (on top of any fade in). Titles usually rise, pop or fade in."),
+  animateOut: ANIMATION("How the picture leaves, ending at the clip's end."),
+  blend: { type: "string", enum: [...VIDEO_BLEND_MODES], description: "How the picture mixes with what is beneath it, as CSS mix-blend-mode (default normal): multiply darkens (shadows, textures), screen and add lighten (light leaks, flares, glows), overlay and soft-light add contrast, difference and exclusion invert." },
+  fadeIn: MS("Fade up from nothing (picture and sound) over this long"),
+  fadeOut: MS("Fade down to nothing over this long")
+};
+var MEDIA_FIELDS = {
+  in: MS("Where in the source it starts (default 0)"),
+  speed: { type: "number", minimum: 0.05, maximum: 20, description: "Playback speed (default 1). Changing it keeps the stretch of source, so the clip gets shorter or longer." },
+  volume: { type: "number", minimum: 0, maximum: 4, description: "Gain (1 = unchanged, default 1). A number replaces any keyframes; set_video_keyframes animates it." },
+  muted: { type: "boolean", description: "Silence this clip (default false)." },
+  fadeInCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fade in (default linear; the picture always fades linearly): linear, equal-power (steady loudness, best for crossfades), s-curve (gentle at both ends), exponential (slow start, natural from silence) or logarithmic (fast start)." },
+  fadeOutCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fade out (default linear), the same choices as fadeInCurve; exponential sounds natural fading to silence." }
+};
+var TEXT_FIELDS = {
+  text: { type: "string", minLength: 1, description: `The title's text ("\\n" breaks lines).` },
+  color: COLOR("Text colour (default white)"),
+  fontSize: { type: "number", exclusiveMinimum: 0, description: "Pixels (default 64)." },
+  fontFamily: { type: "string", description: "CSS font family (default sans-serif)." },
+  fontWeight: { type: "number", minimum: 100, maximum: 1e3, description: "CSS weight (default 700)." },
+  background: COLOR("A box behind the text (default none)")
+};
+var PLACEMENT = {
+  id: { type: "string", minLength: 1, description: 'Id for the clip (default: a fresh one such as "c3").' },
+  start: MS("Where it starts on the timeline (default: the end of the track)"),
+  duration: { type: "number", exclusiveMinimum: 0, description: "Length on the timeline, in ms (default: the rest of the source for media, 5000 for stills, 3000 for titles and colours)." }
+};
+var NEW_CLIP = {
+  description: "The clip: media (a stretch of an asset), text (a title) or color (a solid fill).",
+  oneOf: [
+    object({ type: { const: "media", description: "A stretch of an asset." }, asset: ASSET_ID, ...PLACEMENT, ...CLIP_COMMON, ...MEDIA_FIELDS }, ["type", "asset"], "A media clip."),
+    object({ type: { const: "text", description: "A title over the picture." }, ...PLACEMENT, ...CLIP_COMMON, ...TEXT_FIELDS }, ["type", "text"], "A title."),
+    object({ type: { const: "color", description: "A solid colour filling the frame." }, color: COLOR("The fill"), ...PLACEMENT, ...CLIP_COMMON }, ["type", "color"], "A colour.")
+  ]
+};
+var SETTINGS = {
+  name: { type: "string", description: "Project name." },
+  width: { type: "integer", minimum: 16, maximum: 8192, description: "Frame width in pixels." },
+  height: { type: "integer", minimum: 16, maximum: 8192, description: "Frame height in pixels." },
+  fps: { type: "number", exclusiveMinimum: 0, maximum: 240, description: "Frames per second (e.g. 24, 25, 30, 60)." },
+  background: COLOR("What shows where no clip covers the frame (default black)")
+};
+var TRACK_FIELDS = {
+  name: { type: "string", description: "Track label." },
+  muted: { type: "boolean", description: "Silence every clip on it." },
+  hidden: { type: "boolean", description: "Leave its pictures out of the frame." },
+  locked: { type: "boolean", description: "Refuse edits to its clips." },
+  syncLocked: { type: "boolean", description: "Move with ripple edits on other sync-locked tracks so it stays in sync (default true). Turn off for a track that should stay put, e.g. a music bed." },
+  volume: { type: "number", minimum: 0, maximum: 4, description: "Gain for every clip on it (1 = unchanged)." }
+};
+var ASSET_FIELDS = {
   src: { type: "string", minLength: 1, description: "URL, path or data URL the player and exporter can open." },
   name: { type: "string", description: "Display name (e.g. the file name)." },
   duration: { type: "number", exclusiveMinimum: 0, description: "Length of the source in ms (required to check trims of video and audio)." },
@@ -3923,14 +4515,18 @@ function createVideoEditorToolProvider(controller, options = {}) {
     annotations: { title: "Render a frame", ...READ },
     handler: async ({ time, times, columns, format = "svg" }) => {
       const p = project();
-      const svg = times ? videoContactSheetSvg(p, times, columns ? { columns } : {}) : videoProjectSvg(p, time ?? controller.getState().time);
+      const lutSrcs = [...new Set(p.tracks.flatMap((t) => t.clips.map((c) => c.grade?.lut?.src).filter((x) => !!x)))];
+      const missing = (await Promise.all(lutSrcs.map((src) => controller.luts.load(src).then(() => null, (e) => e.message)))).filter((m) => !!m);
+      const svgOptions = { lutFor: (src) => controller.luts.peek(src), ...columns ? { columns } : {} };
+      const svg = times ? videoContactSheetSvg(p, times, svgOptions) : videoProjectSvg(p, time ?? controller.getState().time, svgOptions);
+      const notes = [...missing.map((m) => `${m}; that LUT is left out of the picture.`), ...lutSrcs.length > missing.length ? ["LUTs are drawn approximately in SVG (curves and a colour matrix); the preview and export apply them exactly."] : []];
       if (format === "png") {
         if (!options.rasterize) throw new Error('This host cannot make PNG images; call render_video_frame with format "svg".');
         const size = /viewBox="0 0 ([\d.]+) ([\d.]+)"/.exec(svg);
         const image = await options.rasterize(svg, { width: Number(size[1]), height: Number(size[2]) });
-        return { content: [{ type: "image", data: image.data, mimeType: image.mimeType }] };
+        return { content: [{ type: "image", data: image.data, mimeType: image.mimeType }, ...notes.length ? [{ type: "text", text: notes.join(" ") }] : []] };
       }
-      return { svg };
+      return { svg, ...notes.length ? { notes } : {} };
     }
   };
   const LOUDNESS_TARGET = {
@@ -4167,7 +4763,7 @@ function createVideoEditorToolProvider(controller, options = {}) {
   const applyGradePreset = {
     name: "apply_video_grade_preset",
     title: "Apply a colour look",
-    description: "Gives clips a named colour look at a strength (one undo step), replacing their grades: warm, cool, punchy (more contrast and colour), faded (lifted and muted), black-and-white, bleach-bypass (desaturated, contrasty), day-for-night (dark and blue). Returns each clip's resulting grade; tweak it with update_video_clip set.grade.",
+    description: "Gives clips a named colour look at a strength (one undo step), replacing their grade settings (a LUT stays): warm, cool, punchy (more contrast and colour), faded (lifted and muted), black-and-white, bleach-bypass (desaturated, contrasty), day-for-night (dark and blue). Returns each clip's resulting grade; tweak it with update_video_clip set.grade.",
     inputSchema: object(
       {
         clips: { type: "array", items: CLIP_ID, minItems: 1, description: "Clips on video tracks to grade." },
@@ -4179,8 +4775,10 @@ function createVideoEditorToolProvider(controller, options = {}) {
     annotations: { title: "Apply a colour look", ...WRITE_IDEMPOTENT },
     handler: ({ clips, preset, amount }) => {
       gradeTargets(clips);
-      const grade = videoGradePreset(preset, amount ?? 1);
-      const edits = clips.map((clip) => grade ? { op: "update_clip", clip, set: { grade } } : { op: "update_clip", clip, remove: ["grade"] });
+      const edits = clips.map((clip) => {
+        const grade = videoGradeLook(findVideoClip(project(), clip).clip.grade, preset, amount ?? 1);
+        return grade ? { op: "update_clip", clip, set: { grade } } : { op: "update_clip", clip, remove: ["grade"] };
+      });
       return apply(edits, `Apply ${preset} look`, (r) => ({ clips: clips.map((id) => ({ id, grade: findVideoClip(r.project, id)?.clip.grade ?? null })) }));
     }
   };
@@ -4197,6 +4795,43 @@ function createVideoEditorToolProvider(controller, options = {}) {
       return apply(edits, "Copy grade", () => ({ grade: grade ?? null, clips: to }));
     }
   };
+  const setLut = {
+    name: "set_video_lut",
+    title: "Apply a LUT",
+    description: "Gives clips a 3D LUT (a .cube file) at a strength, applied after the rest of their grade (one undo step); their other grade settings stay. Reads the file first and fails, changing nothing, if it cannot be loaded or is not a 3D .cube. Returns the LUT's title and size and each clip's resulting grade. Remove it with remove_video_lut.",
+    inputSchema: object(
+      {
+        clips: { type: "array", items: CLIP_ID, minItems: 1, uniqueItems: true, description: "Clips on video tracks to grade." },
+        src: LUT_SRC,
+        strength: LUT_STRENGTH,
+        name: { type: "string", minLength: 1, description: "A label for the look (default the file's TITLE)." }
+      },
+      ["clips", "src"]
+    ),
+    annotations: { title: "Apply a LUT", readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: true },
+    handler: async ({ clips, src, strength, name }) => {
+      if (strength === 0) throw new Error("A strength of 0 changes nothing; pass a strength above 0, or remove the LUT with remove_video_lut.");
+      gradeTargets(clips);
+      const lut = await controller.luts.load(src);
+      const label = name ?? lut.title;
+      const setting = { src, ...strength !== void 0 && strength !== 1 ? { strength } : {}, ...label ? { name: label } : {} };
+      return apply(videoLutEdits(project(), clips, setting), "Apply LUT", (r) => ({ lut: { src, ...lut.title ? { title: lut.title } : {}, size: lut.size }, clips: clips.map((id) => ({ id, grade: findVideoClip(r.project, id)?.clip.grade ?? null })) }));
+    }
+  };
+  const removeLut = {
+    name: "remove_video_lut",
+    title: "Remove a LUT",
+    description: "Takes the LUT off clips' grades (one undo step), keeping their other grade settings. Fails if none of them has one. Returns each clip's resulting grade.",
+    inputSchema: object({ clips: { type: "array", items: CLIP_ID, minItems: 1, uniqueItems: true, description: "Clips whose LUT to remove." } }, ["clips"]),
+    annotations: { title: "Remove a LUT", ...WRITE_IDEMPOTENT },
+    handler: ({ clips }) => {
+      gradeTargets(clips);
+      const p = project();
+      const withLut = clips.filter((id) => findVideoClip(p, id).clip.grade?.lut);
+      if (!withLut.length) throw new Error(`None of ${clips.map((c) => `"${c}"`).join(", ")} has a LUT; get_video_project shows each clip's grade.`);
+      return apply(videoLutEdits(p, withLut, null), "Remove LUT", (r) => ({ clips: clips.map((id) => ({ id, grade: findVideoClip(r.project, id)?.clip.grade ?? null })) }));
+    }
+  };
   const TRANSCRIPT_TRACK = { ...TRACK_ID, description: "Track whose words to read (default: the first audio track with a transcribed clip, else the first video track with one)." };
   const RANGE_OUT = (r) => ({ from: round(r.from), to: round(r.to), text: r.text });
   const timelineWords = (track) => {
@@ -4639,7 +5274,7 @@ function createVideoEditorToolProvider(controller, options = {}) {
     }
   };
   const reads = [getProject, getFrame, getTranscript, findText, findFillers, findPauses, findGaps, checkProject, renderFrame, getScopes, exportFfmpeg, exportLoudnessMeasure, exportEdl, audioLevels, findSilences, seek];
-  const writes = [setSettings, addAsset, updateAsset, removeAsset, addTrack, updateTrack, removeTrack, moveTrack, addClip, moveClip, trimClip, splitClip, deleteClips, updateClip, setTransition, setSpeedRamp, addFreeze, removeRamp, setTranscript, removeRanges, applyGradePreset, copyGrade, setKeyframes, removeKeyframes, slipClip, rollEdit, slideClip, liftRange, extractRange, splitAt, closeGaps, addMarker, removeMarker, editVideo, undo, redo];
+  const writes = [setSettings, addAsset, updateAsset, removeAsset, addTrack, updateTrack, removeTrack, moveTrack, addClip, moveClip, trimClip, splitClip, deleteClips, updateClip, setTransition, setSpeedRamp, addFreeze, removeRamp, setTranscript, removeRanges, applyGradePreset, copyGrade, setLut, removeLut, setKeyframes, removeKeyframes, slipClip, rollEdit, slideClip, liftRange, extractRange, splitAt, closeGaps, addMarker, removeMarker, editVideo, undo, redo];
   return {
     id: options.id ?? "video",
     namespace: options.namespace,
@@ -4656,227 +5291,6 @@ function createVideoEditorToolProvider(controller, options = {}) {
     }
   };
 }
-
-// src/video-editor/ui.ts
-var STEPS = [40, 100, 200, 500, 1e3, 2e3, 5e3, 1e4, 15e3, 3e4, 6e4, 12e4, 3e5, 6e5];
-function videoRulerTicks(duration, pxPerSecond, fps) {
-  const pxPerMs = pxPerSecond / 1e3;
-  const major = STEPS.find((s) => s * pxPerMs >= 80) ?? STEPS[STEPS.length - 1];
-  const minor = STEPS.slice().reverse().find((s) => s < major && major % s === 0 && s * pxPerMs >= 10);
-  const step = minor ?? major;
-  const ticks = [];
-  for (let t = 0; t <= duration + 1e-6; t += step) {
-    const isMajor = Math.abs(t / major - Math.round(t / major)) < 1e-9;
-    ticks.push({ time: t, x: t * pxPerMs, major: isMajor, ...isMajor ? { label: formatVideoTimecode(t, fps).replace(/^00:/, "") } : {} });
-  }
-  return ticks;
-}
-function videoClipShowsWaveform(clip, asset, mode = "audio") {
-  if (clip.type !== "media" || mode === "none" || !videoAssetHasSound(asset)) return false;
-  return mode === "all" || asset.kind === "audio";
-}
-var VIDEO_CLIP_ANIMATION_LABELS = {
-  fade: "Fade",
-  rise: "Rise",
-  drop: "Drop",
-  "slide-left": "Slide left",
-  "slide-right": "Slide right",
-  zoom: "Zoom",
-  pop: "Pop"
-};
-var VIDEO_TRANSITION_LABELS = {
-  crossfade: "Crossfade",
-  dip: "Dip to colour",
-  wipe: "Wipe",
-  push: "Push",
-  slide: "Slide",
-  iris: "Iris"
-};
-var videoTransitionHasDirection = (type) => type === "wipe" || type === "push" || type === "slide";
-var VIDEO_BLEND_MODE_LABELS = {
-  normal: "Normal",
-  multiply: "Multiply",
-  screen: "Screen",
-  overlay: "Overlay",
-  darken: "Darken",
-  lighten: "Lighten",
-  "color-dodge": "Colour dodge",
-  "color-burn": "Colour burn",
-  "hard-light": "Hard light",
-  "soft-light": "Soft light",
-  difference: "Difference",
-  exclusion: "Exclusion",
-  add: "Add"
-};
-var VIDEO_FADE_CURVE_LABELS = {
-  linear: "Linear",
-  "equal-power": "Equal power",
-  "s-curve": "S-curve",
-  exponential: "Exponential",
-  logarithmic: "Logarithmic"
-};
-function videoClipTint(clip, asset) {
-  if (clip.type === "text") return "#a855f7";
-  if (clip.type === "color") return clip.color;
-  if (!asset) return "#ef4444";
-  return asset.kind === "audio" ? "#10b981" : asset.kind === "image" ? "#f59e0b" : "#3b82f6";
-}
-function videoClipLabel(clip, asset) {
-  if (clip.name) return clip.name;
-  if (clip.type === "text") return clip.text.split("\n")[0];
-  if (clip.type === "color") return clip.color;
-  const base = asset?.name ?? asset?.src.replace(/^.*[\\/]/, "") ?? clip.asset;
-  const speed = videoClipSpeed(clip);
-  return speed !== 1 ? `${base} (${Math.round(speed * 100)}%)` : base;
-}
-function planVideoClipDrag(project, input) {
-  const at = findVideoClip(project, input.clip);
-  if (!at) return null;
-  const { clip, track } = at;
-  const snap = input.snap ?? ((t) => t);
-  if (input.mode === "move") {
-    const raw = Math.max(0, clip.start + input.delta);
-    const head = snap(raw) - raw;
-    const tail = snap(raw + clip.duration) - (raw + clip.duration);
-    const shifts = [head, tail].filter((d) => Math.abs(d) > 1e-9);
-    const start = Math.max(0, raw + (shifts.length ? shifts.reduce((a, b) => Math.abs(b) < Math.abs(a) ? b : a) : 0));
-    const target = input.track ?? track.id;
-    const moved = Math.abs(start - clip.start) > 1e-6 || target !== track.id;
-    const mode = input.placement && input.placement !== "refuse" ? { mode: input.placement } : {};
-    return { start, duration: clip.duration, track: target, edit: moved ? { op: "move_clip", clip: clip.id, start, ...target !== track.id ? { track: target } : {}, ...mode } : null };
-  }
-  const minimum = 1e3 / project.fps;
-  if (input.mode === "trim-start") {
-    const to2 = Math.min(snap(Math.max(0, clip.start + input.delta)), videoClipEnd(clip) - minimum);
-    const changed2 = Math.abs(to2 - clip.start) > 1e-6;
-    const plan = input.ripple ? { start: clip.start, duration: clip.duration - (to2 - clip.start) } : { start: to2, duration: videoClipEnd(clip) - to2 };
-    return { ...plan, track: track.id, edit: changed2 ? { op: "trim_clip", clip: clip.id, edge: "start", to: to2, ...input.ripple ? { ripple: true } : {} } : null };
-  }
-  const to = Math.max(snap(videoClipEnd(clip) + input.delta), clip.start + minimum);
-  const changed = Math.abs(to - videoClipEnd(clip)) > 1e-6;
-  return { start: clip.start, duration: to - clip.start, track: track.id, edit: changed ? { op: "trim_clip", clip: clip.id, edge: "end", to, ...input.ripple ? { ripple: true } : {} } : null };
-}
-function videoDropTracks(project, clipId) {
-  const at = findVideoClip(project, clipId);
-  if (!at) return [];
-  return project.tracks.filter((t) => t.kind === at.track.kind && !t.locked).map((t) => t.id);
-}
-function videoDragLabel(edit) {
-  if (edit.op === "move_clip") return edit.mode === "insert" ? "Insert clip" : edit.mode === "overwrite" ? "Overwrite clip" : "Move clip";
-  return edit.op === "trim_clip" && edit.ripple ? "Ripple trim" : "Trim clip";
-}
-function videoAssetDropEdit(project, assetId, options = {}) {
-  const asset = videoAssetMap(project).get(assetId);
-  if (!asset) return null;
-  const kind = asset.kind === "audio" ? "audio" : "video";
-  const track = options.track ?? project.tracks.find((t) => t.kind === kind && !t.locked)?.id;
-  if (!track) return null;
-  return { op: "add_clip", track, clip: { type: "media", asset: asset.id, ...options.start !== void 0 ? { start: options.start } : {} }, ...options.ripple ? { ripple: true } : {}, ...options.mode && options.mode !== "refuse" ? { mode: options.mode } : {} };
-}
-function videoAssetKindOf(typeOrName) {
-  const s = typeOrName.toLowerCase().replace(/[?#].*$/, "");
-  if (s.startsWith("video/") || /\.(mp4|m4v|mov|webm|ogv|mkv)$/.test(s)) return "video";
-  if (s.startsWith("audio/") || /\.(mp3|m4a|aac|wav|ogg|oga|flac|opus)$/.test(s)) return "audio";
-  if (s.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg|bmp)$/.test(s)) return "image";
-  return null;
-}
-function probeVideoMedia(src, kind, timeout = 15e3) {
-  return new Promise((resolve, reject) => {
-    if (typeof document === "undefined") return reject(new Error("Media can only be probed in a browser."));
-    const timer = setTimeout(() => reject(new Error(`"${src}" took too long to load.`)), timeout);
-    const done = (probe) => {
-      clearTimeout(timer);
-      resolve(probe);
-    };
-    const failed = () => {
-      clearTimeout(timer);
-      reject(new Error(`"${src}" could not be loaded as ${kind}.`));
-    };
-    if (kind === "image") {
-      const img = new Image();
-      img.onload = () => done({ kind, width: img.naturalWidth, height: img.naturalHeight });
-      img.onerror = failed;
-      img.src = src;
-      return;
-    }
-    const el = document.createElement(kind);
-    el.preload = "metadata";
-    el.onloadedmetadata = () => {
-      const duration = Number.isFinite(el.duration) ? Math.round(el.duration * 1e3) : void 0;
-      const v = el;
-      done({ kind, ...duration ? { duration } : {}, ...kind === "video" && v.videoWidth ? { width: v.videoWidth, height: v.videoHeight } : {} });
-    };
-    el.onerror = failed;
-    el.src = src;
-  });
-}
-var KEY_LABELS = {
-  opacity: { label: "Opacity", step: 0.05 },
-  volume: { label: "Volume", step: 0.05 },
-  x: { label: "X", step: 1 },
-  y: { label: "Y", step: 1 },
-  scale: { label: "Scale", step: 0.05 },
-  rotation: { label: "Rotation", step: 1 }
-};
-var animatableOf = (clip, property) => VIDEO_TRANSFORM_PROPERTIES.includes(property) ? clip.transform?.[property] : property === "volume" ? clip.type === "media" ? clip.volume : void 0 : clip.opacity;
-var playheadInClip = (clip, time) => Math.round(Math.min(clip.duration, Math.max(0, time - clip.start)));
-function videoKeyframeRows(project, clipId, time) {
-  const at = findVideoClip(project, clipId);
-  if (!at) return [];
-  const { clip } = at;
-  const asset = clip.type === "media" ? videoAssetMap(project).get(clip.asset) : void 0;
-  const visual = !(asset?.kind === "audio" || at.track.kind === "audio");
-  const audible = clip.type === "media" && videoAssetHasSound(asset);
-  const properties = [...visual ? ["opacity"] : [], ...audible ? ["volume"] : [], ...visual ? VIDEO_TRANSFORM_PROPERTIES : []];
-  const clipTime = playheadInClip(clip, time);
-  return properties.map((property) => {
-    const prop = animatableOf(clip, property);
-    const keys = isVideoKeyframes(prop) ? prop.keys : [];
-    const limits = VIDEO_KEYFRAME_LIMITS[property];
-    return {
-      property,
-      ...KEY_LABELS[property],
-      value: Math.round(videoValueAt(prop, clipTime, limits.default) * 1e3) / 1e3,
-      keyed: keys.length > 0,
-      keys: keys.length,
-      onKey: keys.some((k) => Math.abs(k.t - clipTime) < 0.5),
-      clipTime,
-      ...limits.min !== void 0 ? { min: limits.min } : {},
-      ...limits.max !== void 0 ? { max: limits.max } : {}
-    };
-  });
-}
-function plainValueEdit(clip, property, value) {
-  if (!VIDEO_TRANSFORM_PROPERTIES.includes(property))
-    return value === void 0 ? { op: "update_clip", clip: clip.id, remove: [property] } : { op: "update_clip", clip: clip.id, set: { [property]: value } };
-  const transform = { ...clip.transform, [property]: value };
-  if (value === void 0) delete transform[property];
-  return Object.keys(transform).length ? { op: "update_clip", clip: clip.id, set: { transform } } : { op: "update_clip", clip: clip.id, remove: ["transform"] };
-}
-function videoKeyframeValueEdit(project, clipId, property, time, value) {
-  const at = findVideoClip(project, clipId);
-  if (!at) return null;
-  const prop = animatableOf(at.clip, property);
-  if (!isVideoKeyframes(prop)) return plainValueEdit(at.clip, property, value);
-  if (value === void 0) return null;
-  return { op: "set_keyframes", clip: clipId, property, keys: setVideoKey(prop, { t: playheadInClip(at.clip, time), v: value }, VIDEO_KEYFRAME_LIMITS[property].default).keys };
-}
-function videoKeyframeToggleEdit(project, clipId, property, time) {
-  const at = findVideoClip(project, clipId);
-  if (!at) return null;
-  const prop = animatableOf(at.clip, property);
-  const t = playheadInClip(at.clip, time);
-  const fallback = VIDEO_KEYFRAME_LIMITS[property].default;
-  if (isVideoKeyframes(prop)) {
-    const key = prop.keys.find((k) => Math.abs(k.t - t) < 0.5);
-    if (key) {
-      const rest = removeVideoKey(prop, key.t);
-      return isVideoKeyframes(rest) ? { op: "set_keyframes", clip: clipId, property, keys: rest.keys } : plainValueEdit(at.clip, property, rest === fallback ? void 0 : rest);
-    }
-  }
-  const v = videoValueAt(prop, t, fallback);
-  return { op: "set_keyframes", clip: clipId, property, keys: isVideoKeyframes(prop) ? setVideoKey(prop, { t, v }, fallback).keys : [{ t, v }] };
-}
 export {
   VIDEO_BLEND_MODES,
   VIDEO_BLEND_MODE_LABELS,
@@ -4898,6 +5312,7 @@ export {
   VIDEO_ISSUE_CODES,
   VIDEO_KEYFRAME_LIMITS,
   VIDEO_KEYFRAME_PROPERTIES,
+  VIDEO_LUT_MAX_SIZE,
   VIDEO_PEAK_BLOCK,
   VIDEO_PLACEMENT_MODES,
   VIDEO_SCOPE_KINDS,
@@ -4909,11 +5324,14 @@ export {
   VIDEO_WIPE_DIRECTIONS,
   VideoAudioPeaksCache,
   VideoEditorController,
+  VideoLutCache,
   VideoPreviewEngine,
   VideoPreviewPixels,
   allVideoClipIds,
   applyVideoEdits,
   applyVideoGrade,
+  applyVideoLut,
+  applyVideoLutToPixels,
   buildVideoAudioPeaks,
   checkVideoProject,
   checkVideoTimeRemap,
@@ -4937,12 +5355,15 @@ export {
   mergeVideoRanges,
   nextFreeVideoSlot,
   normalizeVideoGrade,
+  normalizeVideoGradeLut,
   normalizeVideoWord,
   parseVideoAnimatable,
   parseVideoAsset,
   parseVideoClip,
   parseVideoClipAnimation,
+  parseVideoCubeLut,
   parseVideoGrade,
+  parseVideoGradeLut,
   parseVideoKeyframes,
   parseVideoLoudnessMeasurement,
   parseVideoMarker,
@@ -5014,6 +5435,7 @@ export {
   videoGradeCssFilter,
   videoGradeFfmpegFilters,
   videoGradeGainsFilterId,
+  videoGradeLook,
   videoGradePreset,
   videoGradeStepMatrix,
   videoGradeStepSvgValues,
@@ -5033,6 +5455,11 @@ export {
   videoKeysOf,
   videoLuma,
   videoLumaWaveform,
+  videoLutEdits,
+  videoLutFromFunction,
+  videoLutSvgApproximation,
+  videoLutSvgPrimitives,
+  videoLutToCube,
   videoOverlap,
   videoPeakDb,
   videoProjectDuration,