fablecut 1.12.0 → 1.13.0

package/app.js

@@ -84,8 +84,7 @@ const TRANSITIONS = ["none", "fade", "slide-left", "slide-right", "slide-up", "s
 const TEXT_ANIMS = ["none", "typewriter", "word-pop", "word-slide", "karaoke",
   "letter-pop", "wave", "bounce", "shake",
   "clip-reveal", "zoom-in", "font-cut", "rise-mask"];
-const BLEND_MODES = ["normal", "multiply", "screen", "overlay", "lighter", "soft-light",
-  "hard-light", "color-dodge", "darken", "lighten", "difference"];
+const BLEND_MODES = self.FableCutMask.BLENDS;   // the canvas composite set, shared with the agent (mask.js)
 /* Named looks. % props multiply against the clip's own value, additive props add. */
 const FILTER_PRESETS = {
   none: {},
@@ -779,7 +778,7 @@ const els = {
   importUrlOverlay: $("importUrlOverlay"), importUrlInput: $("importUrlInput"),
   importUrlStatus: $("importUrlStatus"), importUrlProgress: $("importUrlProgress"),
 };
-const ctx2d = els.preview.getContext("2d");
+let ctx2d = els.preview.getContext("2d");   // drawMaskedClip points it at an offscreen layer while a masked clip draws
 
 /* ── Utils ─────────────────────────────────────────────────────────────── */
 const uid = () => Math.random().toString(36).slice(2, 9);
@@ -3273,6 +3272,9 @@ function rebuildClips() {
   els.tracksContent.style.width = w + "px";
   els.ruler.style.width = els.timelineScroll.clientWidth + "px";
   for (const row of els.tracks.children) row.innerHTML = "";
+  const matted = project.clips.map((x) => [x, clipMatte(x)]).filter(([, m]) => m);
+  const isMatte = (c) => matted.some(([x, m]) => m.track === c.track && clipRenders(x) &&
+    x.start < c.start + c.duration && c.start < x.start + x.duration);   // hidden while it cuts that clip
   for (const c of project.clips) {
     const tr = trackOf(c); if (!tr) continue;
     const row = els.tracks.querySelector(`[data-track="${c.track}"]`);
@@ -3280,7 +3282,7 @@ function rebuildClips() {
     div.className = `clip c-${c.kind}` +
       (state.selIds.has(c.id) ? " selected" : "") + (c.id === state.selId ? " primary" : "") +
       (isClipLocked(c) ? " locked" : "") + (c.disabled === true ? " disabled" : "") +
-      (c.unlinked === true ? " unlinked" : "");
+      (c.unlinked === true ? " unlinked" : "") + (c.kind !== "audio" && isMatte(c) ? " matte-src" : "");
     div.dataset.id = c.id;
     div.style.left = c.start * state.pps + "px";
     div.style.width = Math.max(8, c.duration * state.pps) + "px";
@@ -3292,7 +3294,8 @@ function rebuildClips() {
     const hasWave = c.kind === "audio" && !!wavePeaksFor(c);
     if (hasWave) body += `<canvas class="wave"></canvas>`;
     const badge = (c.keyframes && Object.keys(c.keyframes).length ? "◆ " : "") +
-                  (c.transitionIn || c.transitionOut ? "⇄ " : "");
+                  (c.transitionIn || c.transitionOut ? "⇄ " : "") +
+                  (clipMatte(c) ? "◐ " : "");
     const chTag = (() => {
       const s = audioChannelShort(c.props?.audioChannel);
       return s ? s + " · " : "";
@@ -3904,6 +3907,8 @@ function startTrimToolGesture(e, c, mode) {
   const base = new Map(project.clips.map((x) => [x.id, {
     start: x.start, in: x.in, duration: x.duration, keyframes: x.keyframes,
     transitionIn: cloneTr(x.transitionIn), transitionOut: cloneTr(x.transitionOut),
+    masks: x.props && x.props.masks,   // head trims re-base mask keys: each step starts from the originals
+    tracks: x.props && x.props.tracks,
   }]));
   const restore = () => {
     for (const x of project.clips) {
@@ -3911,6 +3916,10 @@ function startTrimToolGesture(e, c, mode) {
       if (!b) continue;
       x.start = b.start; x.in = b.in; x.duration = b.duration; x.keyframes = b.keyframes;
       x.transitionIn = cloneTr(b.transitionIn); x.transitionOut = cloneTr(b.transitionOut);
+      if (x.props) {
+        if (b.masks) x.props.masks = b.masks; else delete x.props.masks;
+        if (b.tracks) x.props.tracks = b.tracks; else delete x.props.tracks;
+      }
     }
   };
   // Snap targets ignore everything this edit moves.
@@ -4092,6 +4101,8 @@ function startClipGesture(e, c, mode, collapseOnClick) {
   const orig = {
     start: c.start, in: c.in, duration: c.duration, track: c.track,
     keyframes: c.keyframes ? JSON.parse(JSON.stringify(c.keyframes)) : undefined,
+    masks: c.props.masks,
+    tracks: c.props.tracks,
   };
   // moving a clip that belongs to a multi-selection drags the whole group;
   // AV-linked partners (video+audio from one file) always move together
@@ -4146,6 +4157,8 @@ function startClipGesture(e, c, mode, collapseOnClick) {
       c.in = (c.kind === "video" || c.kind === "audio") ? orig.in + d * sp : 0;
       c.duration = orig.duration - d;
       c.keyframes = shiftKF(orig.keyframes, d, c.duration);
+      if (orig.masks) c.props.masks = Mask.shiftKeys(orig.masks, d);
+      if (orig.tracks) { const tr = Tracker.shiftTracks(orig.tracks, d); if (tr.length) c.props.tracks = tr; else delete c.props.tracks; }
       syncLinkedTiming(c);
     } else { // trim-r
       let ne = snapTime(orig.start + orig.duration + dt, groupIds);
@@ -4856,9 +4869,18 @@ function renderInspector(lite) {
   const sel = (label, k, opts, cur) => row(label,
     `<select data-k="${k}">${opts.map((o) => `<option value="${o}" ${String(o) === String(cur) ? "selected" : ""}>${o}</option>`).join("")}</select>`, k);
   const check = (label, k, on) => row(label, `<input type="checkbox" data-k="${k}" ${on ? "checked" : ""}>`, k);
+  // track matte: the mode, and the track it comes from (auto = the video track above)
+  const matteRows = () => {
+    const others = videoTrackIds().filter((id) => id !== c.track), auto = Mask.matteTrackFor({ ...c, props: { matte: "alpha" } }, videoTrackIds());
+    const opts = (cur) => [`<option value="" ${!cur ? "selected" : ""}>Above (${auto || "none"})</option>`, ...others.map((id) => `<option value="${id}" ${cur === id ? "selected" : ""}>${id}</option>`)].join("");
+    return row("Track matte", `<select data-k="matte">${["none", ...Mask.MATTES].map((o) => `<option value="${o}" ${(p.matte || "none") === o ? "selected" : ""}>${o.replace("-", " ")}</option>`).join("")}</select>`, "matte")
+      + (p.matte ? row("Matte track", `<select data-k="matteTrack">${opts(p.matteTrack)}</select>`, "matteTrack")
+        + (clipMatte(c) ? "" : `<div class="insp-note">No video track above to take the matte from — pick one.</div>`) : "");
+  };
   if (c.kind === "adjust") {
     html += `<div class="insp-section"><h3>Adjustment layer</h3>
       ${slider("opacity", 0, 1, 0.01, p.opacity)}
+      ${matteRows()}
     </div>`;
   } else if (c.kind !== "audio") {
     html += `<div class="insp-section"><h3>Transform</h3>
@@ -4868,6 +4890,7 @@ function renderInspector(lite) {
       ${slider("rotation", -180, 180, 1, p.rotation, "°")}
       ${slider("opacity", 0, 1, 0.01, p.opacity)}
       ${sel("Blend", "blend", BLEND_MODES, p.blend)}
+      ${matteRows()}
     </div>`;
   }
   if (c.kind === "video" || c.kind === "image" || c.kind === "svg") {
@@ -4958,6 +4981,8 @@ function renderInspector(lite) {
   const curveSel = (label, k, tr) => tr?.type === "fade" && c.kind === "audio"
     ? row(label, `<select data-k="${k}" title="Fade shape (audio)">${[["", "Smooth (eased)"], ...Object.entries(AUDIO_FADE_CURVES)].map(([v, l]) =>
       `<option value="${v}" ${(tr.curve || "") === v ? "selected" : ""}>${l}</option>`).join("")}</select>`) : "";
+  if (c.kind !== "audio") html += maskSectionHtml(c);
+  if (c.kind === "video") html += trackSectionHtml(c);
   html += `<div class="insp-section"><h3>Transition</h3>
     ${tsel("In", "transIn", c.transitionIn)}
     ${curveSel("In curve", "curveIn", c.transitionIn)}
@@ -5075,6 +5100,12 @@ function renderInspector(lite) {
         if (!setAnimProp(c, k, v))
           toast("Move the playhead over the clip to edit its keyframes");
       }
+      else if (k === "matte" || k === "matteTrack") {   // "none" / "" (= the track above) clear the prop
+        if (v === "none" || v === "") delete c.props[k]; else c.props[k] = String(v);
+        if (!c.props.matte) delete c.props.matteTrack;
+        state.dirtyTimeline = true; inspPropGen++;
+        if (k === "matte") renderInspector();
+      }
       else { c.props[k] = v; if (k === "text") state.dirtyTimeline = true; }
       const valEl = els.inspector.querySelector(`[data-val="${k}"]`);
       if (valEl) valEl.textContent = input.value + (valEl.dataset.unit || "");
@@ -5208,6 +5239,8 @@ function renderInspector(lite) {
       toggleKfGraph(lab.dataset.kfgraph);
     });
   });
+  bindMaskControls(c);
+  bindTrackControls(c);
   syncInspectorOffClip(c);
   renderKfGraphsPanel();
 }
@@ -5294,6 +5327,7 @@ function syncInspectorPlayhead() {
     const label = "◆" + (n || "");
     if (btn.textContent !== label) btn.textContent = label;
   }
+  syncMaskInspector(c);
   syncInspectorOffClip(c); // after the class pass, so ◆ titles read the fresh "on" state
 }
 
@@ -8517,6 +8551,7 @@ function drawAdjust(c, W, H, t) {
   }
   if (p.grain > 0) drawGrain(p.grain, 0, 0, W, H, t);
   ctx2d.restore();
+  return p;
 }
 function needsPixelPass(p, c) {
   return !!(p.chromaKey || p.temperature || p.tint || p.rgbSplit > 0 ||
@@ -8817,7 +8852,10 @@ function drawFrame(t = state.time) {
   ctx2d.filter = "none"; ctx2d.globalAlpha = 1;
   ctx2d.fillStyle = project.background || "#000"; ctx2d.fillRect(0, 0, W, H);
   // render video tracks bottom-up (V1 under V2)
-  for (const c of visibleClipsAt(t)) drawClip(c, W, H, t);
+  if (runtime.maskView) runtime.maskView.ready = false;
+  const clips = visibleClipsAt(t), mattes = matteTracksAt(clips);
+  for (const c of clips) if (!mattes.has(c.track)) drawClip(c, W, H, t);   // a matte track only cuts
+  if (!state.exporting && !runtime.sampling) drawMaskView(W, H);
   if (!runtime.sampling) updateScopes(); // before the handles, so they never reach the scopes
   // on-canvas selection handles (never during export or playback)
   if (!state.exporting && !state.playing && !runtime.sampling) drawSelectionOverlay(W, H, t);
@@ -8861,7 +8899,10 @@ function overlayHandles(b, W, H) {
 }
 function drawSelectionOverlay(W, H, t) {
   const c = getClip(state.selId);
+  if (drawingLayerMask(c)) { drawLayerStroke(c, W); if (!maskEditing(c)) return; }
   if (maskEditing(c) && drawMaskOverlay(c, W)) return;   // a layer's mask replaces the box
+  if (maskEditActive(c) && drawClipMaskOverlay(c, W)) return;   // so does a clip mask being edited
+  drawTrackOverlay(c, W);
   if (!isVisualClip(c) || !activeAt(c, t) || !clipRenders(c)) return;
   const b = clipBounds(c, evalProps(c, t), W, H);
   const lw = Math.max(2, W / 640);
@@ -8896,7 +8937,8 @@ function toLocal(pt, b) {
   return { x: dx * cs - dy * sn, y: dx * sn + dy * cs };
 }
 function pickClipAt(pt, W, H) {
-  const seq = visibleClipsAt(state.time).filter(isVisualClip);
+  const all = visibleClipsAt(state.time), mattes = matteTracksAt(all);
+  const seq = all.filter((c) => isVisualClip(c) && !mattes.has(c.track));
   for (let i = seq.length - 1; i >= 0; i--) {
     const c = seq[i], b = clipBounds(c, evalProps(c, state.time), W, H), lp = toLocal(pt, b);
     if (Math.abs(lp.x) <= b.hw && Math.abs(lp.y) <= b.hh) return c;
@@ -9093,9 +9135,21 @@ function endCanvasDrag(e) {
 els.preview.addEventListener("pointerup", endCanvasDrag);
 els.preview.addEventListener("pointercancel", endCanvasDrag);
 
-function drawClip(c, W, H, t) {
-  if (c.kind === "adjust") { drawAdjust(c, W, H, t); return; }
+function drawClip(c, W, H, t, asMatte = false) {
+  const masks = clipMasksAt(c, t), matte = asMatte ? null : clipMatte(c);
+  if (masks || matte) drawMaskedClip(c, W, H, t, masks, matte);
+  else drawClipPicture(c, W, H, t, false);
+}
+/** Draw one clip. `layered`: into a mask layer — opacity and blend wait for
+ *  the composite. Returns { p, geom } — geom = where the clip's picture landed
+ *  (canvas transform + its box), the space its masks live in. */
+function drawClipPicture(c, W, H, t, layered) {
+  if (c.kind === "adjust") {
+    const p = drawAdjust(c, W, H, t);
+    return { p, geom: noteMaskGeom(c, new DOMMatrix(), 0, 0, W, H) };
+  }
   const p = evalProps(c, t);
+  let geom = null;
   ctx2d.save();
   if (p._wipe) {
     ctx2d.beginPath();
@@ -9111,9 +9165,10 @@ function drawClip(c, W, H, t) {
     ctx2d.arc(W / 2, H / 2, Math.max(0.01, (1 - p._iris)) * Math.hypot(W, H) * 0.55, 0, Math.PI * 2);
     ctx2d.clip();
   }
-  ctx2d.globalAlpha = clamp(p.opacity, 0, 1);
-  if (p.blend && p.blend !== "normal" && BLEND_MODES.includes(p.blend))
-    ctx2d.globalCompositeOperation = p.blend === "normal" ? "source-over" : p.blend;
+  if (!layered) {
+    ctx2d.globalAlpha = clamp(p.opacity, 0, 1);
+    if (p.blend && p.blend !== "normal" && BLEND_MODES.includes(p.blend)) ctx2d.globalCompositeOperation = p.blend;
+  }
   ctx2d.translate(W / 2 + (+p.x || 0), H / 2 + (+p.y || 0));
   ctx2d.rotate((p.rotation || 0) * Math.PI / 180);
   if (p.shake > 0) { // deterministic multi-sine handheld/impact shake
@@ -9124,9 +9179,11 @@ function drawClip(c, W, H, t) {
     ctx2d.rotate(Math.sin(tt * 0.9) * a * 0.0022);
   }
   if (c.kind === "text") {
+    const b = clipBounds(c, p, W, H);
+    geom = noteMaskGeom(c, ctx2d.getTransform(), -b.hw, -b.hh, b.hw * 2, b.hh * 2);
     drawText(c, p, t - c.start);
     ctx2d.restore();
-    return;
+    return { p, geom };
   }
   let src = null, sw = 0, sh = 0;
   if (c.kind === "image") {
@@ -9164,6 +9221,7 @@ function drawClip(c, W, H, t) {
     const grade = activeGrade(c, p, t), matte = gradeMatte(c);
     let graded = null;
     noteGradeGeom(c, ctx2d.getTransform(), dw, dh, -dw / 2, -dh / 2);
+    geom = noteMaskGeom(c, ctx2d.getTransform(), -dw / 2, -dh / 2, dw, dh);
     if (needsPixelPass(p, c)) { // key / cut-out first, so the grade never shifts the key colour
       let processed = pixelPass(c, p, src, sx, sy, cw, ch, dw, dh);
       if (runtime.gradeCapture) { // pixelPass reuses its canvas — keep a copy
@@ -9189,8 +9247,1047 @@ function drawClip(c, W, H, t) {
     if (p.grain > 0) drawGrain(p.grain, -dw / 2, -dh / 2, dw, dh, t);
   }
   ctx2d.restore();
+  return { p, geom };
+}
+
+/* ═══════════ MASKS (props.masks — math in mask.js) ═══════════
+   A masked clip draws into an offscreen layer instead of the program canvas;
+   the layer is cut by the masks' matte (destination-in), then composited with
+   the clip's opacity and blend. Preview and export share this path. */
+const Mask = self.FableCutMask;
+const maskCv = {};
+function maskCtx(key, W, H) {
+  let cv = maskCv[key];
+  if (!cv) cv = maskCv[key] = document.createElement("canvas");
+  if (cv.width !== W) cv.width = W;
+  if (cv.height !== H) cv.height = H;
+  return cv.getContext("2d", { willReadFrequently: false });
+}
+const maskNorm = new WeakMap();   // stored list → validated list (hand-written JSON gets defaults once)
+function clipMasks(c) {
+  const list = c.props && c.props.masks;
+  if (!Array.isArray(list) || !list.length) return null;
+  let n = maskNorm.get(list);
+  if (n === undefined) { n = Mask.normalizeMasks(list); maskNorm.set(list, n); }
+  return n;
+}
+/** The masks cutting clip c at timeline time t (keys resolved), or null. */
+function clipMasksAt(c, t) {
+  if (c.kind === "audio") return null;
+  const list = clipMasks(c);
+  return list ? Mask.masksAt(list, t - c.start) : null;
+}
+/** Remember where the clip's picture landed (the monitor's mask editor maps through it). */
+function noteMaskGeom(c, m, x0, y0, w, h) {
+  const g = { m, x0, y0, w, h };
+  if (!state.exporting && !runtime.sampling) (runtime.maskGeom ||= new Map()).set(c.id, g);
+  return g;
+}
+/* ── Track mattes ──
+   A clip with props.matte is cut by the picture on its matte track (the video
+   track above unless props.matteTrack names one): by that picture's alpha, or
+   by its luma (white = shows), each optionally inverted. The matte track does
+   not draw into the frame while a clip on screen uses it. */
+const videoTrackIds = () => TRACKS.filter((tr) => tr.kind === "video").map((tr) => tr.id);
+/** { mode, track } when the clip has a track matte with a track to take it from. */
+function clipMatte(c) {
+  if (c.kind === "audio" || !c.props || !c.props.matte) return null;
+  const track = Mask.matteTrackFor(c, videoTrackIds());
+  return track ? { mode: c.props.matte, track } : null;
+}
+/** The tracks that are mattes for clips in `clips` (the frame's clips): they only cut. */
+function matteTracksAt(clips) {
+  const out = new Set();
+  for (const c of clips) { const m = clipMatte(c); if (m) out.add(m.track); }
+  return out;
+}
+/** The matte track's picture at t as an alpha matte: { canvas, empty }. A luma matte
+ *  turns brightness into alpha (over black, so transparent = black). */
+function trackMatteAt(matte, W, H, t) {
+  const src = maskCtx("tmSrc", W, H), luma = matte.mode.startsWith("luma");
+  src.setTransform(1, 0, 0, 1, 0, 0);
+  src.globalAlpha = 1; src.globalCompositeOperation = "source-over"; src.filter = "none";
+  src.clearRect(0, 0, W, H);
+  const clips = project.clips.filter((x) => x.track === matte.track && x.disabled !== true && x.kind !== "audio" &&
+    x.kind !== "adjust" && activeAt(x, t)).sort((a, b) => a.start - b.start);
+  if (!clips.length) return { canvas: src.canvas, empty: true };
+  if (luma) { src.fillStyle = "#000"; src.fillRect(0, 0, W, H); }
+  const main = ctx2d;
+  ctx2d = src;
+  try { for (const x of clips) drawClip(x, W, H, t, true); } finally { ctx2d = main; }
+  if (!luma) return { canvas: src.canvas, empty: false };
+  return { canvas: lumaToAlpha(src.canvas, maskCtx("tmOut", W, H), W, H), empty: false };
+}
+/** Brightness → alpha (Rec. 709 weights): an SVG luminanceToAlpha filter on the
+ *  canvas, or a pixel loop where canvas filters are missing. */
+let lumaFilter = null;
+function lumaToAlpha(srcCanvas, out, W, H) {
+  out.setTransform(1, 0, 0, 1, 0, 0);
+  out.globalAlpha = 1; out.globalCompositeOperation = "source-over";
+  out.clearRect(0, 0, W, H);
+  if (lumaFilter == null) lumaFilter = makeLumaFilter();
+  if (lumaFilter) {
+    out.filter = lumaFilter; out.drawImage(srcCanvas, 0, 0); out.filter = "none";
+    return out.canvas;
+  }
+  out.drawImage(srcCanvas, 0, 0);
+  const img = out.getImageData(0, 0, W, H), d = img.data;
+  for (let i = 0; i < d.length; i += 4) {
+    d[i + 3] = Math.round(0.2125 * d[i] + 0.7154 * d[i + 1] + 0.0721 * d[i + 2]);
+    d[i] = d[i + 1] = d[i + 2] = 0;
+  }
+  out.putImageData(img, 0, 0);
+  return out.canvas;
+}
+/** "url(#…)" for the luma filter, or "" when the canvas can't apply it (checked once on a pixel). */
+function makeLumaFilter() {
+  try {
+    const ns = "http://www.w3.org/2000/svg", svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("width", "0"); svg.setAttribute("height", "0"); svg.setAttribute("aria-hidden", "true");
+    svg.style.cssText = "position:absolute;width:0;height:0;overflow:hidden";
+    svg.innerHTML = '<filter id="fcLumaAlpha" color-interpolation-filters="sRGB"><feColorMatrix type="luminanceToAlpha"/></filter>';
+    document.body.appendChild(svg);
+    const a = document.createElement("canvas"), b = document.createElement("canvas");
+    a.width = b.width = a.height = b.height = 1;
+    const x = a.getContext("2d"); x.fillStyle = "#fff"; x.fillRect(0, 0, 1, 1);
+    const y = b.getContext("2d", { willReadFrequently: true });
+    y.filter = "url(#fcLumaAlpha)"; y.drawImage(a, 0, 0);
+    const px = y.getImageData(0, 0, 1, 1).data;
+    return px[3] > 250 && px[0] < 5 ? "url(#fcLumaAlpha)" : "";
+  } catch { return ""; }
+}
+/** A clip that is cut before it composites: by its masks, by a track matte, or both. */
+function drawMaskedClip(c, W, H, t, masks, matte = null) {
+  const tm = matte ? trackMatteAt(matte, W, H, t) : null;   // first: the matte's clips use the layer buffers too
+  const layer = maskCtx("layer", W, H);
+  layer.setTransform(1, 0, 0, 1, 0, 0);
+  layer.globalAlpha = 1; layer.globalCompositeOperation = "source-over"; layer.filter = "none";
+  layer.clearRect(0, 0, W, H);
+  const main = ctx2d;
+  let r;
+  ctx2d = layer;
+  try { r = drawClipPicture(c, W, H, t, true); } finally { ctx2d = main; }
+  if (!r || !r.geom) return;
+  layer.setTransform(1, 0, 0, 1, 0, 0);
+  if (tm) {
+    layer.globalCompositeOperation = matte.mode.endsWith("-inverted") ? "destination-out" : "destination-in";
+    if (tm.empty) { if (!matte.mode.endsWith("-inverted")) layer.clearRect(0, 0, W, H); }   // nothing on the matte track: alpha hides all
+    else layer.drawImage(tm.canvas, 0, 0);
+    layer.globalCompositeOperation = "source-over";
+  }
+  if (masks) cutByMasks(c, layer, r.geom, masks, W, H);
+  main.save();
+  main.setTransform(1, 0, 0, 1, 0, 0);
+  const p = r.p;
+  if (c.kind !== "adjust") {   // an adjustment layer already drew at its own opacity
+    main.globalAlpha = clamp(p.opacity, 0, 1);
+    if (p.blend && p.blend !== "normal" && BLEND_MODES.includes(p.blend)) main.globalCompositeOperation = p.blend;
+  }
+  main.drawImage(layer.canvas, 0, 0);
+  main.restore();
+}
+function cutByMasks(c, layer, g, masks, W, H) {
+  const matte = maskCtx("matte", W, H);
+  Mask.rasterize(matte, maskCtx("tmp", W, H), maskCtx("tmp2", W, H), masks,
+    g.m.translate(g.x0, g.y0), g.w, g.h, W / Math.max(1, project.width));
+  layer.setTransform(1, 0, 0, 1, 0, 0);
+  layer.globalCompositeOperation = "destination-in";
+  layer.drawImage(matte.canvas, 0, 0);
+  layer.globalCompositeOperation = "source-over";
+  const cap = runtime.maskCapture;
+  if (cap && cap.id === c.id && cap.coverage == null) measureMaskCoverage(cap, masks, g, layer.canvas, W, H);
+  const view = runtime.maskView;
+  if (view && view.id === c.id && state.selId === c.id && !state.exporting) {   // the monitor shows the selected clip's matte
+    const v = maskCtx("view", W, H);
+    v.setTransform(1, 0, 0, 1, 0, 0);
+    v.globalCompositeOperation = "source-over"; v.clearRect(0, 0, W, H);
+    v.fillStyle = "#fff"; v.fillRect(0, 0, W, H);
+    v.globalCompositeOperation = "destination-in"; v.drawImage(matte.canvas, 0, 0);
+    v.globalCompositeOperation = "source-over";
+    view.ready = true;
+  }
+}
+/** fablecut_scopes mask: how much of the clip's own picture its masks keep
+ *  (rasterized alone, box-aligned) and how much of the frame the cut clip covers. */
+function measureMaskCoverage(cap, masks, g, layerCanvas, W, H) {
+  const mean = (cv, w, h) => {
+    const s = document.createElement("canvas"); s.width = w; s.height = h;
+    const x = s.getContext("2d", { willReadFrequently: true });
+    x.drawImage(cv, 0, 0, w, h);
+    const d = x.getImageData(0, 0, w, h).data;
+    let sum = 0;
+    for (let i = 3; i < d.length; i += 4) sum += d[i];
+    return sum / 255 / (w * h);
+  };
+  const bw = Math.max(1, g.w), bh = Math.max(1, g.h), k = Math.min(1, 480 / Math.max(bw, bh));
+  const mw = Math.max(2, Math.round(bw * k)), mh = Math.max(2, Math.round(bh * k));
+  const out = maskCtx("cap", mw, mh);
+  Mask.rasterize(out, maskCtx("cap1", mw, mh), maskCtx("cap2", mw, mh), masks, new DOMMatrix([mw / bw, 0, 0, mh / bh, 0, 0]), bw, bh,
+    W / Math.max(1, project.width) * mw / bw);
+  cap.coverage = +(100 * mean(out.canvas, mw, mh)).toFixed(2);
+  const fw = Math.max(2, Math.min(480, W)), fh = Math.max(2, Math.round(fw * H / W));
+  cap.frameCoverage = +(100 * mean(layerCanvas, fw, fh)).toFixed(2);
+}
+/** Matte view: the selected clip's mask matte, white on black, over the frame. */
+function drawMaskView(W, H) {
+  const view = runtime.maskView;
+  if (!view || !view.ready || state.selId !== view.id) return;   // off once the clip is deselected
+  ctx2d.save();
+  ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.globalAlpha = 1; ctx2d.globalCompositeOperation = "source-over"; ctx2d.filter = "none";
+  ctx2d.fillStyle = "#000"; ctx2d.fillRect(0, 0, W, H);
+  ctx2d.drawImage(maskCv.view, 0, 0);
+  ctx2d.restore();
 }
 
+/* ── Masks in the Inspector and on the monitor ──
+   The Masks section lists the clip's masks; picking one shows its outline and
+   handles on the monitor. Pen: click to place points (drag pulls handles),
+   click the first point or press Enter to close. Draw: drag a free-hand
+   outline, fitted into an editable bezier. */
+const maskUi = { clip: null, sel: -1, pt: -1, tool: null, pen: null, stroke: null, drag: null };
+const MASK_ROWS_UI = {
+  opacity: ["Opacity", 0, 1, 0.01], feather: ["Feather", 0, 300, 1], expand: ["Expand", -200, 200, 1],
+  x: ["X", -0.5, 1.5, 0.001], y: ["Y", -0.5, 1.5, 0.001], w: ["Width", 0.01, 2, 0.001], h: ["Height", 0.01, 2, 0.001],
+  scale: ["Scale", 0.05, 4, 0.01], rotation: ["Rotation", -180, 180, 0.5],
+};
+const MASK_MODE_LABEL = { add: "Add", subtract: "Subtract", intersect: "Intersect", difference: "Difference" };
+function maskList(c) { return clipMasks(c) || []; }
+function maskUiFor(c) {
+  if (!c || maskUi.clip !== c.id) { Object.assign(maskUi, { clip: c ? c.id : null, sel: -1, pt: -1, tool: null, pen: null, stroke: null, drag: null }); if (runtime.maskView) runtime.maskView = null; }
+  const n = maskList(c).length;
+  if (maskUi.sel >= n) maskUi.sel = n - 1;
+  return maskUi;
+}
+function writeMasks(c, list) {
+  const n = list.length ? Mask.normalizeMasks(list) : null;
+  if (n) c.props.masks = n; else delete c.props.masks;
+  state.dirtyTimeline = true;
+}
+const maskLocalT = (c) => state.time - c.start;
+/** Mask i as it is at the playhead. */
+function maskNowAt(c, i) { const m = maskList(c)[i]; return m ? Mask.maskAt(m, maskLocalT(c)) : null; }
+function maskKeyIndex(m, t) {
+  const tol = 0.5 / (projectFps() || 30);
+  return m && m.keys ? m.keys.findIndex((k) => Math.abs(k.t - t) < tol) : -1;
+}
+function maskSnapshotKey(now, t) {
+  const k = { t: +Math.max(0, t).toFixed(4) };
+  for (const p of Mask.KEYED) if (now[p] != null) k[p] = p === "points" ? now.points.map((q) => q.slice()) : now[p];
+  return k;
+}
+/** Change mask i; once it has keys, keyed params land in a key at the playhead. */
+function writeMaskSet(c, i, set) {
+  const list = maskList(c).map((m) => m), m = list[i];
+  if (!m) return;
+  if (!m.keys || !m.keys.length || !Mask.KEYED.some((p) => p in set)) { list[i] = Mask.mergeMask(m, set) || m; writeMasks(c, list); return; }
+  const t = maskLocalT(c), keys = m.keys.map((k) => ({ ...k })), now = Mask.maskAt(m, t), statics = {};
+  for (const [p, v] of Object.entries(set)) if (!Mask.KEYED.includes(p)) statics[p] = v;
+  let j = maskKeyIndex(m, t);
+  if (j < 0) { const k = maskSnapshotKey(now, t); keys.push(k); keys.sort((a, b) => a.t - b.t); j = keys.indexOf(k); }
+  for (const p of Mask.KEYED) if (p in set) keys[j][p] = set[p];
+  list[i] = Mask.mergeMask(m, { ...statics, keys }) || m;
+  writeMasks(c, list);
+}
+/* ── Tracking ──
+   tracker.js follows a region of the clip's own video frame by frame. The
+   frames come from a private <video> (the monitor never moves), drawn small
+   enough that the region is ~56 px across. A track is stored on its clip as
+   picture fractions (props.tracks); masks and other clips follow it by having
+   it baked into their keys, so rendering never depends on it. */
+const Tracker = self.FableCutTracker;
+const trackUi = { clip: null, sel: -1, tool: null, size: 0.08, scale: false, rotation: false, run: null };
+const trackNorm = new WeakMap();
+function clipTracks(c) {
+  const list = c && c.props && c.props.tracks;
+  if (!Array.isArray(list) || !list.length) return [];
+  let n = trackNorm.get(list);
+  if (n === undefined) { n = Tracker.normalizeTracks(list) || []; trackNorm.set(list, n); }
+  return n;
+}
+function writeTracks(c, list) {
+  const n = list.length ? Tracker.normalizeTracks(list) : null;
+  if (n) c.props.tracks = n; else delete c.props.tracks;
+  state.dirtyTimeline = true;
+}
+/** Crop as fractions; picture (u, v) ↔ media (x, y), both 0…1. */
+function cropFrac(p) {
+  const k = (v) => clamp(+v || 0, 0, 95) / 100;
+  return { l: k(p.cropL), t: k(p.cropT), r: k(p.cropR), b: k(p.cropB) };
+}
+function picToMedia(p, u, v) { const k = cropFrac(p); return { x: k.l + u * (1 - k.l - k.r), y: k.t + v * (1 - k.t - k.b) }; }
+function mediaToPic(p, x, y) { const k = cropFrac(p); return { u: (x - k.l) / Math.max(1e-6, 1 - k.l - k.r), v: (y - k.t) / Math.max(1e-6, 1 - k.t - k.b) }; }
+function seekFrame(el, t) {
+  return new Promise((res, rej) => {
+    const done = () => { el.removeEventListener("seeked", done); clearTimeout(tm); res(); };
+    const tm = setTimeout(() => { el.removeEventListener("seeked", done); rej(new Error(`the video did not seek to ${t.toFixed(2)} s`)); }, 4000);
+    el.addEventListener("seeked", done);
+    el.currentTime = t;
+  });
+}
+/**
+ * Follow `box` (picture fractions {x, y, w, h}) through clip c from clip-local
+ * `from` towards `to` (dir ±1), one sample per project frame. Returns
+ * { samples: [[t, x, y, s, r, q], …] in time order, lostAt, cancelled }.
+ */
+async function runTrack(c, { box, from, to, dir, scale = false, rotation = false, onProgress, run = {} }) {
+  const m = getMedia(c.mediaId);
+  if (c.kind !== "video" || !m) throw new Error("tracking needs a video clip");
+  const el = document.createElement("video");
+  el.muted = true; el.preload = "auto"; el.playsInline = true; el.src = m.src;
+  try {
+    await new Promise((res, rej) => {
+      const tm = setTimeout(() => rej(new Error("the video did not load")), 15000);
+      el.addEventListener("loadeddata", () => { clearTimeout(tm); res(); }, { once: true });
+      el.addEventListener("error", () => { clearTimeout(tm); rej(new Error("the video could not be read")); }, { once: true });
+    });
+    const vw = el.videoWidth, vh = el.videoHeight, p0 = evalProps(c, c.start + from), k = cropFrac(p0);
+    const bw = Math.max(4, box.w * (1 - k.l - k.r) * vw), bh = Math.max(4, box.h * (1 - k.t - k.b) * vh);
+    const sc = clamp(56 / Math.max(bw, bh), 160 / vw, Math.min(1, 1280 / vw));
+    const aw = Math.max(16, Math.round(vw * sc)), ah = Math.max(16, Math.round(vh * sc));
+    const cv = document.createElement("canvas"); cv.width = aw; cv.height = ah;
+    const x = cv.getContext("2d", { willReadFrequently: true });
+    const grab = async (local) => {
+      await seekFrame(el, Math.max(0, mediaTimeAt(c, c.start + local)) + 0.001);
+      x.drawImage(el, 0, 0, aw, ah);
+      return Tracker.toGray(x.getImageData(0, 0, aw, ah).data, aw, ah);
+    };
+    const mc = picToMedia(p0, box.x, box.y);
+    const tr = Tracker.createTracker(await grab(from), aw, ah, { cx: mc.x * aw, cy: mc.y * ah, w: bw * sc, h: bh * sc }, { scale, rotation });
+    if (tr.flat) throw new Error("that region has no detail to follow — pick a spot with texture or edges");
+    const dt = 1 / (projectFps() || 30), end = clamp(to, 0, c.duration);
+    const n = Math.floor(Math.abs(end - from) / dt + 1e-6);
+    const samples = [[+from.toFixed(4), box.x, box.y, 1, 0, 1]];
+    let lostAt = null;
+    for (let i = 1; i <= n; i++) {
+      if (run.cancel) break;
+      const t = from + dir * i * dt, r = tr.step(await grab(t));
+      if (r.lost) { lostAt = t; break; }
+      const pic = mediaToPic(p0, r.cx / aw, r.cy / ah);
+      samples.push([+t.toFixed(4), pic.u, pic.v, r.s, r.r, r.q]);
+      if (onProgress) onProgress(i / n, t);
+    }
+    if (dir < 0) samples.reverse();
+    return { samples, lostAt, cancelled: !!run.cancel };
+  } finally { el.removeAttribute("src"); el.load(); }
+}
+/** What a tracking result was measured against: the clip object and its timing. */
+function trackStamp(c) {
+  if (!c) return "";
+  const p = c.props || {}, k = c.keyframes || {};
+  return JSON.stringify([c.mediaId, c.start, c.in, c.duration, clipSpeed(c), k.speed || null,
+    p.cropL, p.cropR, p.cropT, p.cropB, k.cropL || null, k.cropR || null, k.cropT || null, k.cropB || null]);
+}
+/** Merge new samples into track `name` (replacing the old ones in their time range). */
+function storeTrack(c, name, kind, w, h, samples) {
+  const list = clipTracks(c).map((x) => ({ ...x })), t0 = samples[0][0], t1 = samples[samples.length - 1][0];
+  const i = list.findIndex((x) => x.name === name);
+  const keep = i >= 0 ? list[i].samples.filter((s) => s[0] < t0 - 1e-4 || s[0] > t1 + 1e-4) : [];
+  const fresh = kind === "box" ? Tracker.smooth(samples) : samples;   // scale / rotation steadied once, for every use
+  const tr = { name, kind, w: i >= 0 ? list[i].w : w, h: i >= 0 ? list[i].h : h, samples: [...keep, ...fresh].sort((a, b) => a[0] - b[0]) };
+  if (i >= 0) list[i] = tr; else list.push(tr);
+  writeTracks(c, list.slice(-Tracker.MAX_TRACKS));
+  return clipTracks(c).find((x) => x.name === name);
+}
+/** Bake samples into mask i's keys: x / y (and scale / rotation) move by what the samples moved. */
+function bakeTrackIntoMask(c, i, samples, { scale, rotation }, from = samples[0][0]) {
+  const list = maskList(c).slice(), raw = list[i];
+  if (!raw || samples.length < 2) return 0;
+  const g = pictureRect(c, evalProps(c, c.start + samples[0][0]));
+  // the mask is where it was drawn at `from` (where tracking started): motion is measured from there, on the
+  // smoothed path, and a key stays at `from` — so a backward or two-way track keeps it exactly at the playhead
+  const sm3 = Tracker.smooth(samples, 3, 1);
+  const anchor = sm3.find((sm) => Math.abs(sm[0] - from) < 1e-4) || (() => { const q = Tracker.trackAt({ samples: sm3 }, from); return [from, q.x, q.y, q.s, q.r, q.q]; })();
+  const S = Tracker.simplify(sm3, 1.5 / Math.max(1, g ? g.dw : 1000));   // keys within ~1.5 px
+  if (from >= samples[0][0] && from <= samples[samples.length - 1][0] && !S.some((sm) => Math.abs(sm[0] - from) < 1e-4)) {
+    S.push(anchor); S.sort((a, b) => a[0] - b[0]);
+  }
+  const first = samples[0], base = Mask.maskAt(raw, from);
+  const motion = ["x", "y", ...(scale ? ["scale"] : []), ...(rotation ? ["rotation"] : [])];
+  const t0 = first[0] - 1e-4, t1 = samples[samples.length - 1][0] + 1e-4;
+  let keys = (raw.keys || []).map((k) => ({ ...k }));
+  for (const k of keys) if (k.t >= t0 && k.t <= t1) for (const p of motion) delete k[p];
+  keys = keys.filter((k) => Object.keys(k).some((p) => p !== "t" && p !== "ease"));
+  for (const sm of S) {
+    const v = { x: +(base.x + sm[1] - anchor[1]).toFixed(4), y: +(base.y + sm[2] - anchor[2]).toFixed(4) };
+    if (scale) v.scale = +(base.scale * sm[3] / (anchor[3] || 1)).toFixed(4);
+    if (rotation) v.rotation = +(base.rotation + sm[4] - anchor[4]).toFixed(3);
+    const at = keys.find((k) => Math.abs(k.t - sm[0]) < 1e-4);
+    if (at) Object.assign(at, v, { ease: "linear" }); else keys.push({ t: sm[0], ease: "linear", ...v });
+  }
+  keys.sort((a, b) => a.t - b.t);
+  list[i] = Mask.mergeMask(raw, { keys }) || raw;
+  writeMasks(c, list);
+  return S.length;
+}
+/** Where the clip's video is drawn at props p: centre, size, rotation, flips (project px). */
+function pictureRect(c, p) {
+  const el = c.kind === "video" ? getClipEl(c) : null, W = project.width, H = project.height;
+  const sw = el && el.videoWidth, sh = el && el.videoHeight;
+  if (!sw || !sh) return null;
+  const k = cropFrac(p), cw = Math.max(1, sw * (1 - k.l - k.r)), ch = Math.max(1, sh * (1 - k.t - k.b)), sc = p.scale || 1;
+  let dw, dh;
+  if (p.fit === "cover") { const f = Math.max(W / cw, H / ch) * sc; dw = cw * f; dh = ch * f; }
+  else if (p.fit === "stretch") { dw = W * sc; dh = H * sc; }
+  else if (p.fit === "none") { dw = cw * sc; dh = ch * sc; }
+  else { const f = Math.min(W / cw, H / ch) * sc; dw = cw * f; dh = ch * f; }
+  return { cx: W / 2 + (+p.x || 0), cy: H / 2 + (+p.y || 0), dw, dh, rot: (p.rotation || 0) * Math.PI / 180, fx: p.flipH ? -1 : 1, fy: p.flipV ? -1 : 1 };
+}
+/** A track's point on the frame at timeline time T (project px), with its scale and rotation there. */
+function trackOnFrame(c, tr, T) {
+  const s = Tracker.trackAt(tr, T - c.start), p = evalProps(c, T), g = pictureRect(c, p);
+  if (!g) return null;
+  const lx = (s.x - 0.5) * g.dw * g.fx, ly = (s.y - 0.5) * g.dh * g.fy, cs = Math.cos(g.rot), sn = Math.sin(g.rot);
+  return { x: g.cx + lx * cs - ly * sn, y: g.cy + lx * sn + ly * cs, s: s.s * (p.scale || 1), r: (g.fx * g.fy < 0 ? -s.r : s.r) + (p.rotation || 0) };
+}
+/** Bake clip c's track into clip b's x / y (and scale / rotation) keyframes so b rides on it. */
+function attachToTrack(c, track, b, { scale, rotation, at = state.time }) {
+  const tr = { ...track, samples: Tracker.smooth(track.samples, 3, 1) }, S = tr.samples, a = Math.max(c.start + S[0][0], b.start), z = Math.min(c.start + S[S.length - 1][0], b.start + b.duration);
+  if (z - a < 1e-3) return 0;
+  const tRef = clamp(at, a, z), ref = trackOnFrame(c, tr, tRef);
+  if (!ref) return 0;
+  const pb = evalProps(b, tRef), W = project.width, H = project.height;
+  const off = { x: (+pb.x || 0) - (ref.x - W / 2), y: (+pb.y || 0) - (ref.y - H / 2) };
+  const g = pictureRect(c, evalProps(c, tRef));
+  // the samples inside the overlap, plus the track at its edges and at the reference (between samples, too)
+  const edge = (T) => { const q = Tracker.trackAt(tr, T - c.start); return [+(T - c.start).toFixed(4), q.x, q.y, q.s, q.r, q.q]; };
+  const inRange = S.filter((sm) => c.start + sm[0] > a + 1e-4 && c.start + sm[0] < z - 1e-4);
+  for (const T of [a, z, tRef]) if (!inRange.some((sm) => Math.abs(c.start + sm[0] - T) < 1e-4)) inRange.push(edge(T));
+  inRange.sort((p, q) => p[0] - q[0]);
+  const pts = Tracker.simplify(inRange, 1.5 / Math.max(1, g ? g.dw : 1000));
+  const props = ["x", "y", ...(scale ? ["scale"] : []), ...(rotation ? ["rotation"] : [])];
+  b.keyframes = b.keyframes || {};
+  const l0 = a - b.start - 1e-4, l1 = z - b.start + 1e-4;
+  for (const k of props) b.keyframes[k] = (b.keyframes[k] || []).filter((kf) => kf.t < l0 || kf.t > l1);
+  for (const sm of pts) {
+    const T = c.start + sm[0], v = trackOnFrame(c, tr, T), t = +(T - b.start).toFixed(4);
+    if (!v) continue;
+    const vals = { x: v.x - W / 2 + off.x, y: v.y - H / 2 + off.y, scale: (+pb.scale || 1) * v.s / ref.s, rotation: (+pb.rotation || 0) + v.r - ref.r };
+    for (const k of props) b.keyframes[k].push({ t, v: +vals[k].toFixed(k === "scale" ? 4 : 2), ease: "linear" });
+  }
+  for (const k of props) { b.keyframes[k].sort((p, q) => p.t - q.t); if (!b.keyframes[k].length) delete b.keyframes[k]; }
+  if (!Object.keys(b.keyframes).length) delete b.keyframes;
+  state.dirtyTimeline = true; inspPropGen++;
+  return pts.length;
+}
+/** The mask's outline bounds at clip-local t, as picture fractions (clamped into the picture). */
+function maskBoundsAt(c, raw, t) {
+  const g = pictureRect(c, evalProps(c, c.start + t)), m = Mask.maskAt(raw, t);
+  if (!g) return null;
+  const B = { bw: g.dw, bh: g.dh };
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const a of Mask.anchors(m, B.bw, B.bh)) { x0 = Math.min(x0, a.x); y0 = Math.min(y0, a.y); x1 = Math.max(x1, a.x); y1 = Math.max(y1, a.y); }
+  x0 = clamp(x0 / B.bw, 0, 1); x1 = clamp(x1 / B.bw, 0, 1); y0 = clamp(y0 / B.bh, 0, 1); y1 = clamp(y1 / B.bh, 0, 1);
+  if (x1 - x0 < 0.01 || y1 - y0 < 0.01) return null;
+  return { x: (x0 + x1) / 2, y: (y0 + y1) / 2, w: x1 - x0, h: y1 - y0 };
+}
+/** Run a track from the playhead with progress in the Inspector; Esc stops it. */
+async function trackWithUi(c, label, job, after) {
+  if (trackUi.run) { toast("Already tracking — wait, or press Esc to stop"); return null; }
+  if (state.playing) pause();
+  const run = trackUi.run = { cancel: false, clip: c.id, label, pct: 0 };
+  const stamp = trackStamp(c), maskStamp = job.mask != null ? JSON.stringify(maskList(c)[job.mask] ?? null) : null;
+  renderInspector();
+  try {
+    const r = await runTrack(c, { ...job, run, onProgress: (f) => {
+      run.pct = f;
+      for (const el of els.inspector.querySelectorAll("[data-track-progress]")) el.textContent = `${label}: ${Math.round(f * 100)}% — Esc stops`;
+    } });
+    if (r.samples.length < 2) { toast(r.lostAt != null ? "Lost the region on the next frame — try a spot with more detail, or a bigger region" : "Nothing to track there"); return r; }
+    if (getClip(c.id) !== c || trackStamp(c) !== stamp || (maskStamp != null && JSON.stringify(maskList(c)[job.mask] ?? null) !== maskStamp)) {
+      toast("The clip changed while tracking — nothing was applied; track it again");
+      return null;
+    }
+    pushUndo();
+    after(r);
+    scheduleSave();
+    const span = Math.abs(r.samples[r.samples.length - 1][0] - r.samples[0][0]);
+    toast(r.cancelled ? `Stopped — kept ${span.toFixed(2)} s` : r.lostAt != null ? `Lost the region at ${fmt(c.start + r.lostAt)} — kept ${span.toFixed(2)} s up to there` : `Tracked ${span.toFixed(2)} s (${r.samples.length} frames)`);
+    return r;
+  } catch (err) {
+    toast("Tracking failed: " + (err && err.message || err));
+    return null;
+  } finally {
+    trackUi.run = null;
+    state.dirtyTimeline = true;
+    renderInspector(); drawFrame();
+  }
+}
+function trackMaskFromPlayhead(c, i, dir) {
+  const raw = maskList(c)[i], t = maskLocalT(c);
+  if (!raw || !activeAt(c, state.time)) { toast("Move the playhead over the clip first"); return; }
+  const box = maskBoundsAt(c, raw, t);
+  if (!box) { toast("The mask is outside the picture here"); return; }
+  const name = raw.name || `Mask ${i + 1}`, opts = { scale: trackUi.scale, rotation: trackUi.rotation };
+  trackWithUi(c, `Tracking ${name}`, { box, from: t, to: dir > 0 ? c.duration : 0, dir, mask: i, ...opts }, (r) => {
+    storeTrack(c, name, "box", box.w, box.h, r.samples);
+    bakeTrackIntoMask(c, i, r.samples, opts, t);
+  });
+}
+function trackPointFromPlayhead(c, name, box, dir) {
+  const t = clamp(state.time - c.start, 0, c.duration);
+  trackWithUi(c, `Tracking ${name}`, { box, from: t, to: dir > 0 ? c.duration : 0, dir, scale: trackUi.scale, rotation: trackUi.rotation }, (r) => {
+    storeTrack(c, name, trackUi.scale || trackUi.rotation ? "box" : "point", box.w, box.h, r.samples);
+    trackUi.sel = clipTracks(c).findIndex((x) => x.name === name);
+  });
+}
+/** The region a track continues from at the playhead: its position there, its size. */
+function trackBoxAt(c, tr) {
+  const s = Tracker.trackAt(tr, state.time - c.start);
+  return { x: s.x, y: s.y, w: tr.w * s.s, h: tr.h * s.s };
+}
+function trackSectionHtml(c) {
+  if (trackUi.clip !== c.id) Object.assign(trackUi, { clip: c.id, sel: -1, tool: null });
+  const list = clipTracks(c), tr = list[trackUi.sel], run = trackUi.run && trackUi.run.clip === c.id ? trackUi.run : null;
+  const others = project.clips.filter((x) => x.id !== c.id && isVisualClip(x) && x.start < c.start + c.duration && c.start < x.start + x.duration);
+  const chips = list.map((x, j) => `<button type="button" class="btn tiny cl-chip${j === trackUi.sel ? " toggle on" : ""}" data-tsel="${j}" title="${escapeHtml(Tracker.describe([x]))}">${escapeHtml(x.name)}</button>`).join("");
+  let html = `<div class="insp-section" data-track-section><h3>Tracking</h3>
+    <div class="cl-row"><button type="button" class="btn tiny${trackUi.tool === "point" ? " toggle on" : ""}" data-tact="point" ${run ? "disabled" : ""} title="Click a spot on the monitor to follow it from the playhead to the clip's end">+ Track point</button>
+      <button type="button" class="btn tiny${trackUi.scale ? " toggle on" : ""}" data-tact="scale" title="Also follow the region's size (tracking, and attaching)">Scale</button>
+      <button type="button" class="btn tiny${trackUi.rotation ? " toggle on" : ""}" data-tact="rotation" title="Also follow the region's rotation (tracking, and attaching)">Rotate</button></div>
+    <div class="insp-row cp-row"><label class="cp-label" title="The area matched around a picked point, % of the picture's width">Region %</label>
+      <input type="number" class="cp-num" data-tsize min="2" max="40" step="1" value="${Math.round(trackUi.size * 100)}"></div>
+    ${run ? `<p class="cl-note" data-track-progress>${escapeHtml(run.label)}: ${Math.round(run.pct * 100)}% — Esc stops</p>` : ""}
+    ${trackUi.tool === "point" ? `<p class="cl-note">Click the spot to follow on the monitor — something with detail: a corner, a logo, an eye. Esc cancels.</p>` : ""}
+    ${list.length ? `<div class="cl-row">${chips}</div>` : trackUi.tool || run ? "" : `<p class="cl-note">Follow a spot in the video, then pin a title, sticker or another clip to it. A mask tracks from the Masks section.</p>`}`;
+  if (tr) {
+    const S = tr.samples;
+    html += `<div class="cl-row"><button type="button" class="btn tiny" data-tact="back" ${run ? "disabled" : ""} title="Track from the playhead back to the clip's start">◀ Track back</button>
+        <button type="button" class="btn tiny" data-tact="fwd" ${run ? "disabled" : ""} title="Track from the playhead to the clip's end">Track on ▶</button>
+        <button type="button" class="btn tiny" data-tact="del" title="Delete this track (what follows it keeps its keys)">Delete</button></div>
+      <div class="insp-row"><label title="A clip to pin to this track">Attach</label><select data-tattach title="A clip to pin to this track"><option value="">Pick a clip…</option>${others.map((x) => `<option value="${x.id}">${escapeHtml(x.track + " · " + (x.kind === "text" ? (x.props.text || "").split("\n")[0] : x.name || x.kind))}</option>`).join("")}</select></div>
+      <div class="cl-row"><button type="button" class="btn tiny" data-tact="attach" ${others.length ? "" : "disabled"} title="Key the clip's position (and scale / rotation when those are on) so it rides on the track, keeping where it is at the playhead">Attach to the track</button></div>
+      <p class="cl-note">${S.length} samples, ${S[0][0].toFixed(2)}–${S[S.length - 1][0].toFixed(2)} s of the clip. Attaching writes keyframes — edit them like any others.</p>`;
+  }
+  return html + `</div>`;
+}
+function bindTrackControls(c) {
+  const root = els.inspector.querySelector("[data-track-section]");
+  if (!root) return;
+  const guard = () => { if (isGroupLocked(c)) { toastLocked(); return false; } return true; };
+  const size = root.querySelector("[data-tsize]");
+  if (size) size.addEventListener("change", () => { trackUi.size = clamp((+size.value || 8) / 100, 0.02, 0.4); size.blur(); });
+  for (const b of root.querySelectorAll("[data-tsel]")) b.addEventListener("click", () => {
+    const j = +b.dataset.tsel;
+    trackUi.sel = trackUi.sel === j ? -1 : j; trackUi.tool = null;
+    renderInspector(); drawFrame();
+  });
+  for (const b of root.querySelectorAll("[data-tact]")) b.addEventListener("click", () => {
+    const a = b.dataset.tact, tr = clipTracks(c)[trackUi.sel];
+    if (a === "scale" || a === "rotation") { trackUi[a] = !trackUi[a]; renderInspector(); return; }
+    if (!guard()) return;
+    if (a === "point") {
+      trackUi.tool = trackUi.tool === "point" ? null : "point";
+      if (trackUi.tool && !activeAt(c, state.time)) toast("Move the playhead over the clip, then click the spot to follow");
+      renderInspector(); return;
+    }
+    if (!tr) return;
+    if (a === "del") { pushUndo(); writeTracks(c, clipTracks(c).filter((x) => x !== tr)); trackUi.sel = -1; scheduleSave(); renderInspector(); drawFrame(); return; }
+    if (a === "back" || a === "fwd") {
+      if (!activeAt(c, state.time)) { toast("Move the playhead over the clip first"); return; }
+      trackPointFromPlayhead(c, tr.name, trackBoxAt(c, tr), a === "fwd" ? 1 : -1);
+      return;
+    }
+    if (a === "attach") {
+      const other = getClip(root.querySelector("[data-tattach]").value);
+      if (!other) { toast("Pick a clip to attach first"); return; }
+      if (isGroupLocked(other)) { toastLocked(); return; }
+      pushUndo();
+      const n = attachToTrack(c, tr, other, { scale: trackUi.scale, rotation: trackUi.rotation });
+      scheduleSave(); renderInspector(); drawFrame();
+      toast(n ? `${other.name || other.kind} follows ${tr.name} (${n} keys)` : "That clip and the track don't overlap in time");
+    }
+  });
+}
+/** Monitor: the selected track's path, and its region at the playhead. */
+function drawTrackOverlay(c, W) {
+  if (!c || trackUi.clip !== c.id || !els.inspector.querySelector("[data-track-section]")) return;
+  const tr = clipTracks(c)[trackUi.sel], B = maskBox(c);
+  if (!tr || !B || !activeAt(c, state.time)) return;
+  const lw = Math.max(1.5, W / 900), S = tr.samples, step = Math.max(1, Math.floor(S.length / 400));
+  ctx2d.save(); ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.lineWidth = lw; ctx2d.strokeStyle = "rgba(255, 196, 64, .8)";
+  ctx2d.beginPath();
+  for (let i = 0; i < S.length; i += step) { const p = B.toCanvas(S[i][1] * B.bw, S[i][2] * B.bh); if (i) ctx2d.lineTo(p.x, p.y); else ctx2d.moveTo(p.x, p.y); }
+  ctx2d.stroke();
+  const s = Tracker.trackAt(tr, state.time - c.start), p = B.toCanvas(s.x * B.bw, s.y * B.bh);
+  const q = B.toCanvas((s.x + tr.w * s.s / 2) * B.bw, s.y * B.bh), r = Math.max(6, Math.hypot(q.x - p.x, q.y - p.y));
+  ctx2d.strokeStyle = s.inside ? "#ffc440" : "rgba(255, 196, 64, .45)";
+  ctx2d.strokeRect(p.x - r, p.y - r, r * 2, r * 2);
+  ctx2d.beginPath(); ctx2d.moveTo(p.x - r * 0.5, p.y); ctx2d.lineTo(p.x + r * 0.5, p.y); ctx2d.moveTo(p.x, p.y - r * 0.5); ctx2d.lineTo(p.x, p.y + r * 0.5); ctx2d.stroke();
+  ctx2d.restore();
+}
+els.preview.addEventListener("pointerdown", (e) => {
+  if (e.button !== 0 || trackUi.tool !== "point" || isSourceMode()) return;
+  const c = getClip(state.selId);
+  if (!c || c.id !== trackUi.clip || !activeAt(c, state.time)) return;
+  const B = maskBox(c);
+  if (!B) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  const bp = B.toBox(canvasPt(e)), u = bp.x / B.bw, v = bp.y / B.bh;
+  if (u < 0 || u > 1 || v < 0 || v > 1) { toast("Click inside the clip's picture"); return; }
+  const used = new Set(clipTracks(c).map((x) => x.name));
+  let n = 1;
+  while (used.has(`Track ${n}`)) n++;
+  trackUi.tool = null;
+  trackPointFromPlayhead(c, `Track ${n}`, { x: u, y: v, w: trackUi.size, h: trackUi.size * B.bw / B.bh }, 1);
+}, true);
+window.addEventListener("keydown", (e) => {
+  if (e.key !== "Escape" || (!trackUi.run && trackUi.tool !== "point")) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (trackUi.run) trackUi.run.cancel = true;
+  else { trackUi.tool = null; renderInspector(); }
+}, true);
+function maskSectionHtml(c) {
+  const ui = maskUiFor(c), list = maskList(c), i = ui.sel, m = i >= 0 ? maskNowAt(c, i) : null, raw = list[i];
+  const tool = (k, label, title) => `<button type="button" class="btn tiny${ui.tool === k ? " toggle on" : ""}" data-mtool="${k}" title="${title}" ${list.length >= Mask.MAX_MASKS ? "disabled" : ""}>${label}</button>`;
+  const chips = list.map((mk, j) => `<button type="button" class="btn tiny cl-chip${j === i ? " toggle on" : ""}${mk.on === false ? " off" : ""}" data-msel="${j}"
+    title="${escapeHtml(mk.shape + (mk.mode !== "add" ? " · " + mk.mode : "") + (mk.invert ? " · inverted" : ""))} — click to edit on the monitor">${escapeHtml(mk.name || `Mask ${j + 1}`)}</button>`).join("");
+  let html = `<div class="insp-section" data-mask-section><h3>Masks</h3>
+    <div class="cl-row">${tool("rect", "+ Rect", "Add a rectangle mask")}${tool("ellipse", "+ Ellipse", "Add an ellipse mask")}${tool("pen", "Pen", "Click points on the monitor (drag to pull curve handles); click the first point or press Enter to close")}${tool("draw", "Draw", "Drag a free-hand outline on the monitor — it becomes an editable bezier")}
+      ${list.length ? `<button type="button" class="btn tiny${runtime.maskView ? " toggle on" : ""}" data-mact="view" title="Show the matte in the monitor (white = visible)">Matte</button>` : ""}</div>
+    ${ui.tool === "pen" ? `<p class="cl-note">Pen: click to add points, drag to curve. Click the first point or press Enter to close. Ctrl+Z / Backspace removes the last point, Ctrl+Shift+Z puts it back, Esc cancels.</p>` : ""}
+    ${ui.tool === "draw" ? `<p class="cl-note">Draw: drag around what to keep. Esc cancels.</p>` : ""}
+    ${list.length ? `<div class="cl-row">${chips}</div>` : ui.tool ? "" : `<p class="cl-note">No masks: the whole clip shows. Masks keep (add), cut (subtract) or intersect parts of the picture and move with the clip.</p>`}`;
+  if (m) {
+    const keyed = raw.keys ? raw.keys.length : 0, onKey = maskKeyIndex(raw, maskLocalT(c)) >= 0;
+    const mrow = (p) => {
+      const [lab, min, max, step] = MASK_ROWS_UI[p];
+      return `<div class="insp-row cp-row"><label class="cp-label">${lab}</label>
+        <input type="range" data-mk="${p}" min="${min}" max="${max}" step="${step}" value="${m[p]}">
+        <input type="number" class="cp-num" data-mknum="${p}" step="${step}" value="${fmtG(m[p], step)}"></div>`;
+    };
+    html += `<div class="cl-row"><input type="text" class="cl-name" data-mname value="${escapeHtml(raw.name || "")}" placeholder="Mask ${i + 1}" maxlength="40" title="Mask name">
+        <button type="button" class="btn tiny${raw.on === false ? "" : " toggle on"}" data-mact="on" title="Mask on / off">${raw.on === false ? "Off" : "On"}</button>
+        <button type="button" class="btn tiny" data-mact="up" ${i === 0 ? "disabled" : ""} title="Move down the stack (combined earlier)">↑</button>
+        <button type="button" class="btn tiny" data-mact="down" ${i >= list.length - 1 ? "disabled" : ""} title="Move up the stack (combined later)">↓</button>
+        <button type="button" class="btn tiny" data-mact="dup" ${list.length >= Mask.MAX_MASKS ? "disabled" : ""} title="Duplicate">Copy</button>
+        <button type="button" class="btn tiny" data-mact="del" title="Delete this mask">Delete</button></div>
+      <div class="cl-row"><select data-mmode title="How this mask combines with the masks before it">${Mask.MODES.map((md) => `<option value="${md}" ${raw.mode === md ? "selected" : ""}>${MASK_MODE_LABEL[md]}</option>`).join("")}</select>
+        <button type="button" class="btn tiny${raw.invert ? " toggle on" : ""}" data-mact="invert" title="Use everything outside the shape">Invert</button>
+        <button type="button" class="btn tiny${onKey ? " toggle on" : ""}" data-mact="key" title="${onKey ? "Remove the key at the playhead" : "Key the mask at the playhead — with keys, every change keys"}">◆ Key</button>
+        <span class="cl-note">${keyed ? `${keyed} key${keyed > 1 ? "s" : ""}` : ""}</span>
+        ${keyed ? `<button type="button" class="btn tiny" data-mact="clearkeys" title="Remove every key (keeps the mask as it is at the playhead)">Clear keys</button>` : ""}</div>
+      ${c.kind === "video" ? `<div class="cl-row"><span class="cl-note">Track</span>
+        <button type="button" class="btn tiny" data-mtrack="-1" ${trackUi.run ? "disabled" : ""} title="Follow what the mask covers from the playhead back to the clip's start — keys its position">◀ Back</button>
+        <button type="button" class="btn tiny" data-mtrack="1" ${trackUi.run ? "disabled" : ""} title="Follow what the mask covers from the playhead to the clip's end — keys its position">On ▶</button>
+        <button type="button" class="btn tiny${trackUi.scale ? " toggle on" : ""}" data-mtrackopt="scale" title="Also key its scale">Scale</button>
+        <button type="button" class="btn tiny${trackUi.rotation ? " toggle on" : ""}" data-mtrackopt="rotation" title="Also key its rotation">Rotate</button></div>
+        ${trackUi.run && trackUi.run.clip === c.id ? `<p class="cl-note" data-track-progress>${escapeHtml(trackUi.run.label)}: ${Math.round(trackUi.run.pct * 100)}% — Esc stops</p>` : ""}` : ""}
+      ${mrow("opacity")}${mrow("feather")}${mrow("expand")}${mrow("x")}${mrow("y")}${m.shape !== "bezier" ? mrow("w") + mrow("h") : ""}${mrow("scale")}${mrow("rotation")}
+      <p class="cl-note">On the monitor: drag inside to move, the knob rotates (Shift: 15° steps)${m.shape === "bezier"
+        ? "; drag a point to move it, its handles to curve it (Alt: break the pair), Alt-drag a point to pull new handles, Ctrl-click the outline to add a point, double-click a point to remove it"
+        : ", the edge handles resize"}. Esc deselects. Every change undoes with Ctrl+Z (redo: Ctrl+Shift+Z or Ctrl+Y).</p>`;
+  }
+  return html + `</div>`;
+}
+function bindMaskControls(c) {
+  const root = els.inspector.querySelector("[data-mask-section]");
+  if (!root) return;
+  const guard = () => { if (isGroupLocked(c)) { toastLocked(); return false; } return true; };
+  const rerender = () => { state.dirtyTimeline = true; renderInspector(); };
+  for (const b of root.querySelectorAll("[data-mtool]")) b.addEventListener("click", () => {
+    const k = b.dataset.mtool;
+    if (!guard()) return;
+    if (k === "rect" || k === "ellipse") {
+      pushUndo();
+      const list = maskList(c).slice();
+      list.push({ shape: k, x: 0.5, y: 0.5, w: k === "rect" ? 0.5 : 0.45, h: k === "rect" ? 0.5 : 0.6 });
+      writeMasks(c, list); maskUi.sel = list.length - 1; maskUi.tool = null; maskUi.pt = -1;
+      scheduleSave(); rerender();
+      if (!activeAt(c, state.time)) toast("Move the playhead over the clip to see the mask on the monitor");
+      return;
+    }
+    maskUi.tool = maskUi.tool === k ? null : k; maskUi.pen = null; maskUi.stroke = null;
+    if (maskUi.tool) { maskUi.sel = -1; if (state.playing) pause(); if (!activeAt(c, state.time)) toast("Move the playhead over the clip, then draw on the monitor"); }
+    rerender();
+  });
+  for (const b of root.querySelectorAll("[data-mtrackopt]")) b.addEventListener("click", () => { trackUi[b.dataset.mtrackopt] = !trackUi[b.dataset.mtrackopt]; rerender(); });
+  for (const b of root.querySelectorAll("[data-mtrack]")) b.addEventListener("click", () => {
+    if (!guard() || maskUi.sel < 0) return;
+    trackMaskFromPlayhead(c, maskUi.sel, +b.dataset.mtrack);
+  });
+  for (const b of root.querySelectorAll("[data-msel]")) b.addEventListener("click", () => {
+    const j = +b.dataset.msel;
+    maskUi.sel = maskUi.sel === j ? -1 : j; maskUi.pt = -1; maskUi.tool = null;
+    rerender();
+  });
+  for (const b of root.querySelectorAll("[data-mact]")) b.addEventListener("click", () => {
+    const a = b.dataset.mact, i = maskUi.sel;
+    if (a === "view") { runtime.maskView = runtime.maskView ? null : { id: c.id }; rerender(); return; }
+    const list = maskList(c).slice(), m = list[i];
+    if (!m || !guard()) return;
+    pushUndo();
+    if (a === "on") list[i] = Mask.mergeMask(m, { on: m.on === false ? null : false });
+    else if (a === "invert") list[i] = Mask.mergeMask(m, { invert: m.invert ? null : true });
+    else if (a === "del") { list.splice(i, 1); maskUi.sel = Math.min(i, list.length - 1); maskUi.pt = -1; }
+    else if (a === "dup") { list.splice(i + 1, 0, JSON.parse(JSON.stringify({ ...m, name: m.name ? `${m.name} copy`.slice(0, 40) : undefined }))); maskUi.sel = i + 1; }
+    else if (a === "up" || a === "down") { const j = a === "up" ? i - 1 : i + 1; [list[i], list[j]] = [list[j], list[i]]; maskUi.sel = j; }
+    else if (a === "clearkeys") { const now = Mask.maskAt(m, maskLocalT(c)); list[i] = Mask.mergeMask(m, { ...maskSnapshotKey(now, 0), t: null, keys: null }); }
+    else if (a === "key") {
+      const t = maskLocalT(c), j = maskKeyIndex(m, t), now = Mask.maskAt(m, t);
+      const keys = (m.keys || []).map((k) => ({ ...k }));
+      if (j >= 0) keys.splice(j, 1); else keys.push(maskSnapshotKey(now, t));
+      const set = { keys: keys.length ? keys : null };
+      if (!keys.length) Object.assign(set, maskSnapshotKey(now, 0), { t: null });
+      list[i] = Mask.mergeMask(m, set);
+    }
+    writeMasks(c, list); scheduleSave(); rerender();
+  });
+  const mode = root.querySelector("[data-mmode]");
+  if (mode) mode.addEventListener("change", () => {
+    if (!guard()) return;
+    pushUndo(); writeMaskSet(c, maskUi.sel, { mode: mode.value }); scheduleSave(); rerender();
+    document.activeElement?.blur?.();   // hand Ctrl+Z back to the editor
+  });
+  const name = root.querySelector("[data-mname]");
+  if (name) name.addEventListener("change", () => {
+    if (!guard()) return;
+    pushUndo(); writeMaskSet(c, maskUi.sel, { name: name.value.trim() || null }); scheduleSave(); rerender();
+  });
+  for (const r of root.querySelectorAll("[data-mk]")) {
+    const p = r.dataset.mk;
+    r.addEventListener("pointerdown", () => { if (guard()) pushUndo(); });
+    r.addEventListener("input", () => {
+      if (isGroupLocked(c)) return;
+      writeMaskSet(c, maskUi.sel, { [p]: +r.value }); scheduleSave();
+      const n = root.querySelector(`[data-mknum="${p}"]`); if (n) n.value = fmtG(+r.value, MASK_ROWS_UI[p][3]);
+    });
+  }
+  for (const n of root.querySelectorAll("[data-mknum]")) {
+    const p = n.dataset.mknum;
+    n.addEventListener("change", () => {
+      const x = parseFloat(n.value);
+      if (!Number.isFinite(x) || !guard()) return;
+      pushUndo(); writeMaskSet(c, maskUi.sel, { [p]: x }); scheduleSave(); rerender();
+      document.activeElement?.blur?.();
+    });
+  }
+}
+/** Keyed masks: the sliders and ◆ follow the playhead (called from the inspector sync). */
+function syncMaskInspector(c) {
+  const root = els.inspector.querySelector("[data-mask-section]");
+  if (!root || maskUi.clip !== c.id || maskUi.sel < 0 || maskUi.drag) return;
+  const raw = maskList(c)[maskUi.sel], m = maskNowAt(c, maskUi.sel);
+  if (!m) return;
+  const active = document.activeElement;
+  for (const p of Object.keys(MASK_ROWS_UI)) {
+    const r = root.querySelector(`[data-mk="${p}"]`), n = root.querySelector(`[data-mknum="${p}"]`);
+    if (r && r !== active) r.value = m[p];
+    if (n && n !== active) n.value = fmtG(m[p], MASK_ROWS_UI[p][3]);
+  }
+  const k = root.querySelector("[data-mact=key]"), on = maskKeyIndex(raw, maskLocalT(c)) >= 0;
+  if (k) { k.classList.toggle("on", on); k.classList.toggle("toggle", on); }
+}
+
+/* Monitor geometry: the picture box (bw × bh px, origin top-left) ↔ canvas px. */
+function maskBox(c) {
+  const g = runtime.maskGeom && runtime.maskGeom.get(c.id);
+  if (!g) return null;
+  const M = g.m.translate(g.x0, g.y0), inv = M.inverse();
+  return {
+    bw: g.w, bh: g.h,
+    toCanvas: (x, y) => { const p = M.transformPoint(new DOMPoint(x, y)); return { x: p.x, y: p.y }; },
+    toBox: (pt) => { const p = inv.transformPoint(new DOMPoint(pt.x, pt.y)); return { x: p.x, y: p.y }; },
+  };
+}
+/** Box px ↔ a mask's own frame (fractions of the picture, before its scale / rotation). */
+function maskBoxToLocal(m, B, bx, by, vector = false) {
+  const th = (m.rotation || 0) * Math.PI / 180, s = m.scale || 1, cs = Math.cos(th), sn = Math.sin(th);
+  const dx = bx - (vector ? 0 : m.x * B.bw), dy = by - (vector ? 0 : m.y * B.bh);
+  return { x: (dx * cs + dy * sn) / s / B.bw, y: (-dx * sn + dy * cs) / s / B.bh };
+}
+function maskLocalToBox(m, B, lx, ly) {
+  const th = (m.rotation || 0) * Math.PI / 180, s = m.scale || 1, cs = Math.cos(th), sn = Math.sin(th);
+  const px = lx * B.bw * s, py = ly * B.bh * s;
+  return { x: m.x * B.bw + px * cs - py * sn, y: m.y * B.bh + px * sn + py * cs };
+}
+function maskEditActive(c) {
+  return !!c && maskUi.clip === c.id && state.selId === c.id && (maskUi.sel >= 0 || !!maskUi.tool) &&
+    activeAt(c, state.time) && !!maskBox(c) && !state.playing;
+}
+/** Handles for the selected mask, in canvas px. */
+function clipMaskHandles(c) {
+  const m = maskNowAt(c, maskUi.sel), B = m && maskBox(c);
+  if (!B) return null;
+  const at = (lx, ly) => { const q = maskLocalToBox(m, B, lx, ly); return B.toCanvas(q.x, q.y); };
+  const A = Mask.anchors(m, B.bw, B.bh).map((a) => ({ a: B.toCanvas(a.x, a.y), i: B.toCanvas(a.ix, a.iy), o: B.toCanvas(a.ox, a.oy) }));
+  const top = m.shape === "bezier" ? Math.min(...m.points.map((p) => p[1])) : -m.h / 2;
+  const base = at(0, top), up = at(0, top - 0.01), d = Math.hypot(up.x - base.x, up.y - base.y) || 1;
+  const W = els.preview.width, H = els.preview.height, gap = Math.max(24, W / 34), inset = Math.max(8, W / 110);
+  const knob = { x: clamp(base.x + (up.x - base.x) / d * gap, inset, W - inset), y: clamp(base.y + (up.y - base.y) / d * gap, inset, H - inset) };
+  const edges = m.shape === "bezier" ? [] : [["w", m.w / 2, 0], ["w", -m.w / 2, 0], ["h", 0, m.h / 2], ["h", 0, -m.h / 2]].map(([k, x, y]) => ({ k, ...at(x, y) }));
+  return { m, B, A, centre: at(0, 0), knob, knobBase: base, edges };
+}
+function strokeOutline(ctx, pts, closed) {
+  ctx.beginPath();
+  pts.forEach((p, i) => (i ? ctx.lineTo(p[0], p[1]) : ctx.moveTo(p[0], p[1])));
+  if (closed) ctx.closePath();
+  ctx.stroke();
+}
+/** Drawn instead of the selection box while a mask is picked or a mask tool is on. */
+function drawClipMaskOverlay(c, W) {
+  const B = maskBox(c);
+  if (!B) return false;
+  const lw = Math.max(1.5, W / 800), hs = Math.max(5, W / 170);
+  ctx2d.save();
+  ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.lineJoin = "round";
+  const outline = (m) => Mask.flatten(Mask.anchors(m, B.bw, B.bh), 24).map(([x, y]) => { const q = B.toCanvas(x, y); return [q.x, q.y]; });
+  maskList(c).forEach((raw, j) => {   // the other masks, faint
+    if (j === maskUi.sel) return;
+    ctx2d.setLineDash([lw * 3, lw * 3]); ctx2d.lineWidth = lw; ctx2d.strokeStyle = "rgba(255,210,90,0.45)";
+    strokeOutline(ctx2d, outline(Mask.maskAt(raw, maskLocalT(c))), true);
+  });
+  ctx2d.setLineDash([]);
+  const dot = (p, r, fill, square) => {
+    ctx2d.beginPath();
+    if (square) ctx2d.rect(p.x - r, p.y - r, r * 2, r * 2); else ctx2d.arc(p.x, p.y, r, 0, Math.PI * 2);
+    ctx2d.fillStyle = fill; ctx2d.fill(); ctx2d.lineWidth = lw; ctx2d.strokeStyle = "rgba(0,0,0,0.7)"; ctx2d.stroke();
+  };
+  const h = maskUi.sel >= 0 ? clipMaskHandles(c) : null;
+  if (h) {
+    const pts = outline(h.m);
+    ctx2d.lineWidth = lw * 2.2; ctx2d.strokeStyle = "rgba(0,0,0,0.55)"; strokeOutline(ctx2d, pts, true);
+    ctx2d.lineWidth = lw; ctx2d.strokeStyle = h.m.invert ? "#ff9f5a" : "#ffd25a"; strokeOutline(ctx2d, pts, true);
+    ctx2d.beginPath(); ctx2d.moveTo(h.knobBase.x, h.knobBase.y); ctx2d.lineTo(h.knob.x, h.knob.y); ctx2d.stroke();
+    for (const e of h.edges) dot(e, hs * 0.8, "#fff");
+    if (h.m.shape === "bezier") {
+      const sp = h.A[maskUi.pt];
+      if (sp) {
+        ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#9fd0ff";
+        for (const q of [sp.i, sp.o]) { ctx2d.beginPath(); ctx2d.moveTo(sp.a.x, sp.a.y); ctx2d.lineTo(q.x, q.y); ctx2d.stroke(); }
+        dot(sp.i, hs * 0.6, "#9fd0ff"); dot(sp.o, hs * 0.6, "#9fd0ff");
+      }
+      h.A.forEach((p, j) => dot(p.a, hs * 0.62, j === maskUi.pt ? "#ffd25a" : "#fff", true));
+    }
+    dot(h.centre, hs * 0.5, "#ffd25a");
+    dot(h.knob, hs * 0.9, "#ffce5c");
+  }
+  if (maskUi.tool === "pen" && maskUi.pen && maskUi.pen.pts.length) {
+    const P = maskUi.pen.pts, A = P.map((p) => ({ x: p[0], y: p[1], ix: p[0] + p[2], iy: p[1] + p[3], ox: p[0] + p[4], oy: p[1] + p[5] }));
+    const open = Mask.flatten(A, 24).slice(0, (A.length - 1) * 24 + 1).map(([x, y]) => { const q = B.toCanvas(x, y); return [q.x, q.y]; });
+    ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#ffd25a";
+    if (A.length > 1) strokeOutline(ctx2d, open, false);
+    A.forEach((a, j) => dot(B.toCanvas(a.x, a.y), hs * (j === 0 && A.length >= 3 ? 0.9 : 0.62), j === 0 ? "#ffd25a" : "#fff", true));
+  }
+  if (maskUi.tool === "draw" && maskUi.stroke && maskUi.stroke.length > 1) {
+    ctx2d.lineWidth = lw * 1.5; ctx2d.strokeStyle = "#ffd25a";
+    strokeOutline(ctx2d, maskUi.stroke.map(([u, v]) => { const q = B.toCanvas(u * B.bw, v * B.bh); return [q.x, q.y]; }), false);
+  }
+  ctx2d.restore();
+  return true;
+}
+function addMaskFrom(c, mask) {
+  const list = maskList(c).slice();
+  if (list.length >= Mask.MAX_MASKS) { toast(`A clip has at most ${Mask.MAX_MASKS} masks`); return; }
+  const m = Mask.normalizeMask(mask);
+  if (!m) return;
+  pushUndo();
+  list.push(m); writeMasks(c, list);
+  maskUi.sel = list.length - 1; maskUi.pt = -1; maskUi.tool = null; maskUi.pen = null; maskUi.stroke = null;
+  scheduleSave(); renderInspector();
+}
+function finishPen(c) {
+  const B = maskBox(c), P = maskUi.pen && maskUi.pen.pts;
+  if (!B || !P || P.length < 3) { toast("A pen mask needs at least 3 points"); return; }
+  let x0 = Infinity, x1 = -Infinity, y0 = Infinity, y1 = -Infinity;
+  for (const [x, y] of P) { x0 = Math.min(x0, x); x1 = Math.max(x1, x); y0 = Math.min(y0, y); y1 = Math.max(y1, y); }
+  const cx = (x0 + x1) / 2, cy = (y0 + y1) / 2;
+  addMaskFrom(c, {
+    shape: "bezier", x: cx / B.bw, y: cy / B.bh,
+    points: P.slice(0, Mask.MAX_POINTS).map(([x, y, ix, iy, ox, oy]) => [(x - cx) / B.bw, (y - cy) / B.bh, ix / B.bw, iy / B.bh, ox / B.bw, oy / B.bh]),
+  });
+}
+/** The segment and parameter of the selected bezier's outline nearest `bp` (box px). */
+function nearestMaskSegment(m, B, bp) {
+  const A = Mask.anchors(m, B.bw, B.bh);
+  let best = null;
+  for (let i = 0; i < A.length; i++) {
+    const a = A[i], b = A[(i + 1) % A.length];
+    for (let k = 1; k < 24; k++) {
+      const t = k / 24, u = 1 - t;
+      const x = u * u * u * a.x + 3 * u * u * t * a.ox + 3 * u * t * t * b.ix + t * t * t * b.x;
+      const y = u * u * u * a.y + 3 * u * u * t * a.oy + 3 * u * t * t * b.iy + t * t * t * b.y;
+      const d = Math.hypot(x - bp.x, y - bp.y);
+      if (!best || d < best.d) best = { d, i, t };
+    }
+  }
+  return best;
+}
+/** Add or remove bezier points on mask i: the base outline and every keyed outline change together. */
+function writeMaskTopology(c, i, edit) {
+  const list = maskList(c).slice();
+  if (!list[i]) return;
+  list[i] = Mask.mergeMask(list[i], Mask.editTopology(list[i], edit)) || list[i];
+  writeMasks(c, list);
+}
+els.preview.addEventListener("pointerdown", (e) => {
+  if (e.button !== 0 || isSourceMode()) return;
+  const c = getClip(state.selId);
+  if (!maskEditActive(c)) return;
+  const B = maskBox(c), pt = canvasPt(e), bp = B.toBox(pt), W = els.preview.width, grab = Math.max(8, W / 110);
+  const near = (p) => Math.hypot(p.x - pt.x, p.y - pt.y) <= grab;
+  if (maskUi.tool) {
+    e.preventDefault(); e.stopImmediatePropagation();
+    if (isGroupLocked(c)) { toastLocked(); return; }
+    if (maskUi.tool === "draw") maskUi.stroke = [[bp.x / B.bw, bp.y / B.bh]];
+    else if (maskUi.tool === "pen") {
+      const P = (maskUi.pen ||= { pts: [] }).pts;
+      if (P.length >= 3 && near(B.toCanvas(P[0][0], P[0][1]))) { finishPen(c); return; }
+      if (P.length >= Mask.MAX_POINTS) { toast(`A mask has at most ${Mask.MAX_POINTS} points`); return; }
+      P.push([bp.x, bp.y, 0, 0, 0, 0]);
+      maskUi.pen.redo = [];
+      maskUi.pen.dragging = true;
+    } else return;
+    maskUi.drag = { tool: true };
+    els.preview.setPointerCapture(e.pointerId);
+    state.dirtyTimeline = true;
+    return;
+  }
+  const h = clipMaskHandles(c);
+  if (!h) return;
+  const { m } = h;
+  let drag = null;
+  const sp = m.shape === "bezier" ? h.A[maskUi.pt] : null;
+  if (near(h.knob)) drag = { mode: "rotate" };
+  else if (sp && near(sp.o)) drag = { mode: "handle", side: "o" };
+  else if (sp && near(sp.i)) drag = { mode: "handle", side: "i" };
+  else if (m.shape === "bezier" && h.A.some((p) => near(p.a))) {
+    maskUi.pt = h.A.findIndex((p) => near(p.a));
+    drag = { mode: e.altKey ? "pull" : "point" };
+  } else if (h.edges.some(near)) drag = { mode: h.edges.find(near).k };
+  else if (m.shape === "bezier" && (e.ctrlKey || e.metaKey)) {
+    if (m.points.length >= Mask.MAX_POINTS) { toast(`A mask has at most ${Mask.MAX_POINTS} points`); e.stopImmediatePropagation(); return; }
+    if (isGroupLocked(c)) { toastLocked(); e.stopImmediatePropagation(); return; }
+    const r = nearestMaskSegment(m, h.B, bp);
+    if (!r) return;
+    pushUndo(); writeMaskTopology(c, maskUi.sel, (pts) => Mask.splitPoints(pts, r.i, r.t)); scheduleSave();
+    maskUi.pt = r.i + 1;
+    drag = { mode: "point", pushed: true };
+  } else if (Mask.matteAt([{ ...m, mode: "add", invert: false, feather: 0, opacity: 1 }], bp.x, bp.y, h.B.bw, h.B.bh, 0) > 0.5) drag = { mode: "move" };
+  if (!drag) return;     // outside the mask: the monitor's usual clicks
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (isGroupLocked(c)) { toastLocked(); return; }
+  if (!drag.pushed) pushUndo();
+  maskUi.drag = { ...drag, id: c.id, start: bp, m0: JSON.parse(JSON.stringify(maskNowAt(c, maskUi.sel))) };
+  els.preview.setPointerCapture(e.pointerId);
+  state.dirtyTimeline = true;
+}, true);
+els.preview.addEventListener("pointermove", (e) => {
+  const d = maskUi.drag;
+  if (!d) return;
+  e.stopImmediatePropagation();
+  const c = getClip(state.selId), B = c && maskBox(c);
+  if (!B) return;
+  const bp = B.toBox(canvasPt(e));
+  if (d.tool) {
+    if (maskUi.tool === "draw" && maskUi.stroke) {
+      const last = maskUi.stroke[maskUi.stroke.length - 1], u = bp.x / B.bw, v = bp.y / B.bh;
+      if (Math.hypot((u - last[0]) * B.bw, (v - last[1]) * B.bh) > 2) maskUi.stroke.push([u, v]);
+    } else if (maskUi.tool === "pen" && maskUi.pen && maskUi.pen.dragging) {
+      const p = maskUi.pen.pts[maskUi.pen.pts.length - 1], ox = bp.x - p[0], oy = bp.y - p[1];
+      if (Math.hypot(ox, oy) > 3) { p[2] = -ox; p[3] = -oy; p[4] = ox; p[5] = oy; }
+    }
+    state.dirtyTimeline = true;
+    return;
+  }
+  const m0 = d.m0;
+  let set;
+  if (d.mode === "move") set = { x: +(m0.x + (bp.x - d.start.x) / B.bw).toFixed(4), y: +(m0.y + (bp.y - d.start.y) / B.bh).toFixed(4) };
+  else if (d.mode === "w" || d.mode === "h") {
+    const l = maskBoxToLocal(m0, B, bp.x, bp.y);
+    set = d.mode === "w" ? { w: +clamp(Math.abs(l.x) * 2, 0.01, 8).toFixed(4) } : { h: +clamp(Math.abs(l.y) * 2, 0.01, 8).toFixed(4) };
+  } else if (d.mode === "rotate") {
+    let r = Math.atan2(bp.x - m0.x * B.bw, -(bp.y - m0.y * B.bh)) * 180 / Math.PI;
+    if (e.shiftKey) r = Math.round(r / 15) * 15;
+    set = { rotation: +r.toFixed(1) };
+  } else if (m0.shape === "bezier") {
+    const pts = m0.points.map((p) => [p[0], p[1], p[2] || 0, p[3] || 0, p[4] || 0, p[5] || 0]), p = pts[maskUi.pt];
+    if (!p) return;
+    const l = maskBoxToLocal(m0, B, bp.x, bp.y);
+    if (d.mode === "point") { p[0] = l.x; p[1] = l.y; }
+    else if (d.mode === "pull") { const ox = l.x - p[0], oy = l.y - p[1]; p[2] = -ox; p[3] = -oy; p[4] = ox; p[5] = oy; }
+    else if (d.mode === "handle") {
+      const hx = l.x - p[0], hy = l.y - p[1], o = d.side === "o" ? 4 : 2, q = d.side === "o" ? 2 : 4;
+      p[o] = hx; p[o + 1] = hy;
+      if (!e.altKey) {   // keep the pair smooth: the other handle mirrors the direction, keeps its length
+        const len = Math.hypot(p[q], p[q + 1]) || Math.hypot(hx, hy), k = Math.hypot(hx, hy) || 1;
+        p[q] = -hx / k * len; p[q + 1] = -hy / k * len;
+      }
+    }
+    set = { points: pts.map((r) => r.map((v) => +v.toFixed(4))) };
+  }
+  if (set) { writeMaskSet(c, maskUi.sel, set); syncMaskInspector(c); }
+}, true);
+const endClipMaskDrag = (e) => {
+  const d = maskUi.drag;
+  if (!d) return;
+  e.stopImmediatePropagation();
+  maskUi.drag = null;
+  const c = getClip(state.selId);
+  if (d.tool) {
+    if (maskUi.tool === "draw" && maskUi.stroke) {
+      const B = c && maskBox(c), st = maskUi.stroke;
+      maskUi.stroke = null;
+      if (c && B && st.length >= 6) addMaskFrom(c, { shape: "freehand", stroke: st, aspect: B.bw / B.bh });
+      else toast("Drag around what the mask should keep");
+    } else if (maskUi.pen) maskUi.pen.dragging = false;
+    state.dirtyTimeline = true;
+    return;
+  }
+  scheduleSave(); renderInspector();
+};
+els.preview.addEventListener("pointerup", endClipMaskDrag, true);
+els.preview.addEventListener("pointercancel", endClipMaskDrag, true);
+els.preview.addEventListener("dblclick", (e) => {
+  const c = getClip(state.selId);
+  if (!maskEditActive(c) || maskUi.tool) return;
+  const h = clipMaskHandles(c), pt = canvasPt(e), grab = Math.max(8, els.preview.width / 110);
+  if (!h || h.m.shape !== "bezier") return;
+  const i = h.A.findIndex((p) => Math.hypot(p.a.x - pt.x, p.a.y - pt.y) <= grab);
+  if (i < 0) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (h.m.points.length <= 3) { toast("A mask needs at least 3 points"); return; }
+  if (isGroupLocked(c)) { toastLocked(); return; }
+  pushUndo();
+  writeMaskTopology(c, maskUi.sel, (pts) => pts.filter((_, j) => j !== i));
+  maskUi.pt = -1; scheduleSave(); renderInspector();
+}, true);
+window.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && colorState.maskDraw) {   // the Color tab's Draw
+    e.preventDefault(); e.stopImmediatePropagation();
+    colorState.maskDraw = false; colorState.maskStroke = null; state.dirtyTimeline = true; renderColorPage(true);
+    return;
+  }
+  if (!maskUi.clip || (maskUi.sel < 0 && !maskUi.tool)) return;
+  const tg = e.target;
+  if (tg && (tg.tagName === "INPUT" || tg.tagName === "TEXTAREA" || tg.tagName === "SELECT" || tg.isContentEditable)) return;
+  const c = getClip(state.selId);
+  if (!c || c.id !== maskUi.clip) return;
+  if (e.key === "Escape") {
+    e.preventDefault(); e.stopImmediatePropagation();
+    if (maskUi.tool) { maskUi.tool = null; maskUi.pen = null; maskUi.stroke = null; }
+    else if (maskUi.pt >= 0) maskUi.pt = -1;
+    else maskUi.sel = -1;
+    state.dirtyTimeline = true; renderInspector();
+  } else if (e.key === "Enter" && maskUi.tool === "pen") {
+    e.preventDefault(); e.stopImmediatePropagation();
+    finishPen(c);
+  } else if (maskUi.tool === "pen" && maskUi.pen && !maskUi.drag) {
+    // while placing points the outline is not in the project yet: undo / redo step through the points
+    const mod = e.ctrlKey || e.metaKey, k = e.key.toLowerCase();
+    const back = (mod && k === "z" && !e.shiftKey) || ((e.key === "Backspace" || e.key === "Delete") && !mod);
+    const fwd = mod && ((k === "z" && e.shiftKey) || k === "y");
+    if (!back && !fwd) return;
+    e.preventDefault(); e.stopImmediatePropagation();
+    const P = maskUi.pen.pts, R = (maskUi.pen.redo ||= []);
+    if (back && P.length) R.push(P.pop());
+    else if (fwd && R.length) P.push(R.pop());
+    state.dirtyTimeline = true;
+  }
+}, true);
+
 /* ── Text direction (LTR / RTL) — per-line when direction is "auto".
    Auto-detect uses a DOM probe + getComputedStyle; cache by line text so
    preview/export frames don't re-resolve style every tick. ── */
@@ -10970,6 +12067,7 @@ async function runExportJob(ticket) {
     await new Promise((r) => setTimeout(r, 100));
   if (ticket.revision != null && (project.revision || 0) < ticket.revision) await syncFromServer();
   if (ticket.kind === "scopes") return runScopesJob(ticket, fail);
+  if (ticket.kind === "track") return runTrackJob(ticket, fail);
   if (!state.ffmpeg) {
     const j = await fetch("/api/export/ffmpeg").then((r) => r.json()).catch(() => ({}));
     state.ffmpeg = !!j.available;
@@ -10989,6 +12087,110 @@ async function runExportJob(ticket) {
     exportRangeForced = null;
   }
 }
+/* fablecut_track: follow a region of a clip in this tab, store the track,
+   optionally bake it into a mask or another clip, save, and report. */
+async function runTrackJob(ticket, fail) {
+  const spec = ticket.track || {}, c = getClip(spec.clip);
+  if (!c) return fail(`no clip ${spec.clip}`);
+  if (c.kind !== "video") return fail(`${c.id} is a ${c.kind} clip — tracking follows a video clip's picture`);
+  if (isGroupLocked(c) && spec.force !== true) return fail(`${c.id} is locked — pass force:true only if the user asked to change it`);
+  const el = getClipEl(c);
+  if (el && !el.videoWidth) await new Promise((r) => { el.addEventListener("loadedmetadata", r, { once: true }); setTimeout(r, 15000); });
+  if (!pictureRect(c, evalProps(c, c.start))) return fail("the clip's video did not load");
+  const list = maskList(c), tracks = clipTracks(c), ap = spec.apply || null;
+  let maskIdx = -1, other = null;
+  if (ap && ap.mask != null) {
+    maskIdx = typeof ap.mask === "string" ? list.findIndex((m) => m.name === ap.mask) : ap.mask;
+    if (!list[maskIdx]) return fail(`${c.id} has no mask ${JSON.stringify(ap.mask)}${list.length ? ` (it has ${Mask.describe(list)})` : " — add one with setMask first"}`);
+  } else if (ap && ap.clip != null) {
+    other = getClip(ap.clip);
+    if (!other || !isVisualClip(other) || other.id === c.id) return fail(`apply.clip must be another visual clip (${ap.clip} is not)`);
+    if (isGroupLocked(other) && spec.force !== true) return fail(`${other.id} is locked`);
+  }
+  const at = clamp(Number.isFinite(spec.at) ? spec.at : c.start, c.start, c.start + c.duration), from = at - c.start;
+  let name = typeof spec.name === "string" && spec.name.trim() ? spec.name.trim().slice(0, 60) : null;
+  if (!name && maskIdx >= 0) name = list[maskIdx].name || `Mask ${maskIdx + 1}`;
+  if (!name) { let n = 1; while (tracks.some((x) => x.name === `Track ${n}`)) n++; name = `Track ${n}`; }
+  const g = pictureRect(c, evalProps(c, at)) || pictureRect(c, evalProps(c, c.start));
+  let box = null;
+  if (spec.region) box = { x: +spec.region.x, y: +spec.region.y, w: +spec.region.w, h: +spec.region.h };
+  else if (spec.point) { const sz = clamp(+spec.size || 0.08, 0.02, 0.4); box = { x: +spec.point.x, y: +spec.point.y, w: sz, h: sz * g.dw / g.dh }; }
+  else if (maskIdx >= 0 && !tracks.some((x) => x.name === name)) box = maskBoundsAt(c, list[maskIdx], from);
+  const existing = tracks.find((x) => x.name === name);
+  if (!box && !existing) return fail("say what to follow: region {x, y, w, h} or point {x, y} (fractions of the clip's picture), or a mask to apply it to");
+  if (box && !(box.x >= 0 && box.x <= 1 && box.y >= 0 && box.y <= 1 && box.w > 0 && box.h > 0)) return fail("region / point must lie inside the clip's picture (x, y in 0…1)");
+  const opts = { scale: spec.scale === true, rotation: spec.rotation === true };
+  const dirs = spec.direction === "backward" ? [-1] : spec.direction === "both" ? [-1, 1] : [1];
+  const to = Number.isFinite(spec.to) ? clamp(spec.to - c.start, 0, c.duration) : null;
+  if (state.playing) pause();
+  renderCancelled = false;
+  const stamp = trackStamp(c), otherStamp = other ? trackStamp(other) : "", maskStamp = maskIdx >= 0 ? JSON.stringify(list[maskIdx]) : null;
+  let samples = [], cancelled = false;
+  const lostAt = [];
+  try {
+    if (box) {
+      for (const [k, dir] of dirs.entries()) {
+        const run = { cancel: false };
+        const end = to != null && Math.sign(to - from) === dir ? to : dir > 0 ? c.duration : 0;
+        const r = await runTrack(c, { box, from, to: end, dir, ...opts, run, onProgress: (f) => {
+          run.cancel = renderCancelled;
+          reportExportJob(ticket.id, { progress: (k + f) / dirs.length });
+        } });
+        if (r.lostAt != null) lostAt.push(+(c.start + r.lostAt).toFixed(3));
+        cancelled = cancelled || r.cancelled;
+        samples = dir < 0 ? [...r.samples, ...samples] : [...samples, ...r.samples];
+        if (cancelled) break;
+      }
+      samples = samples.filter((sm, i) => i === 0 || sm[0] > samples[i - 1][0] + 1e-6);
+      if (samples.length < 2) return fail(lostAt.length ? "lost the region on the very next frame — pick a spot with more detail, or a bigger region" : "nothing to track in that range");
+    }
+    // the project may have been reloaded or edited while tracking: apply only onto what was measured
+    if (getClip(c.id) !== c || trackStamp(c) !== stamp || (other && (getClip(other.id) !== other || trackStamp(other) !== otherStamp)) ||
+      (maskStamp != null && JSON.stringify(maskList(c)[maskIdx] ?? null) !== maskStamp))
+      return fail("the clip changed while tracking (an edit or a reload) — nothing was applied; run it again");
+    const beforeJob = undoSnapshot();
+    pushUndo(beforeJob);
+    const tr = box ? storeTrack(c, name, opts.scale || opts.rotation ? "box" : "point", box.w, box.h, samples) : existing;
+    const used = box ? samples : tr.samples;
+    let applied = null;
+    if (maskIdx >= 0) applied = `mask ${JSON.stringify(list[maskIdx].name || maskIdx)}: ${bakeTrackIntoMask(c, maskIdx, used, opts, from)} keys`;
+    else if (other) {
+      const o = { scale: ap.scale === true, rotation: ap.rotation === true, at: Number.isFinite(ap.at) ? ap.at : at };
+      const n = attachToTrack(c, tr, other, o);
+      applied = n ? `clip ${other.id}: ${n} keys on ${["x", "y", ...(o.scale ? ["scale"] : []), ...(o.rotation ? ["rotation"] : [])].join(", ")}` : `clip ${other.id}: it does not overlap the track in time — nothing keyed`;
+    }
+    state.dirtyTimeline = true;
+    if (state.connected) {
+      clearTimeout(runtime.saveTimer); runtime.saveTimer = null;
+      project.revision++;
+      const res = await fetch("/api/project", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(projectJSON(), null, 2) });
+      if (!res.ok) {
+        project.revision--;
+        // put back only the clips this job changed (edits elsewhere since stay), and drop its undo step
+        const was = JSON.parse(beforeJob), wasClips = Array.isArray(was) ? was : was.clips;
+        for (const id of [c.id, other && other.id].filter(Boolean)) {
+          const i = project.clips.findIndex((x) => x.id === id), old = wasClips.find((x) => x.id === id);
+          if (i >= 0 && old) project.clips[i] = old;
+        }
+        const u = runtime.undo.lastIndexOf(beforeJob);
+        if (u >= 0) runtime.undo.splice(u, 1);
+        pruneSelection(); renderInspector(); drawFrame();
+        return fail(res.status === 409 ? "the project changed while tracking — nothing was saved; run it again" : `could not save the project (${res.status}) — nothing was kept`);
+      }
+    }
+    renderInspector(); drawFrame();
+    const qs = used.map((sm) => sm[5]);
+    await reportExportJob(ticket.id, { status: "done", result: {
+      clip: c.id, track: tr.name, kind: tr.kind, describe: Tracker.describe([tr]),
+      from: +(c.start + used[0][0]).toFixed(3), to: +(c.start + used[used.length - 1][0]).toFixed(3),
+      samples: used.length, tracked: !!box, lostAt, cancelled,
+      quality: { min: +Math.min(...qs).toFixed(3), mean: +(qs.reduce((a, b) => a + b, 0) / qs.length).toFixed(3) },
+      applied, revision: project.revision,
+    } }, true);
+  } catch (err) {
+    fail("tracking failed: " + (err && err.message || err));
+  }
+}
 /* fablecut_scopes: render one still exactly as export would (graded, all
    tracks), then measure it with color.js scopeStats. The user's playhead
    stays where it is. */
@@ -11023,7 +12225,12 @@ async function runScopesJob(ticket, fail) {
     runtime.matte = null;   // measure the graded picture, not the matte the user may be looking at
     const mClip = ticket.matte && getClip(ticket.matte.clip);
     if (mClip) runtime.gradeCapture = { id: mClip.id, args: null };
-    try { await renderStillAt(t); } finally { runtime.matte = shown; }
+    const kClip = ticket.mask && getClip(ticket.mask.clip), view = runtime.maskView;
+    runtime.maskCapture = kClip ? { id: kClip.id } : null;
+    runtime.maskView = null;
+    try { await renderStillAt(t); } finally { runtime.matte = shown; runtime.maskView = view; }
+    const kcap = runtime.maskCapture;
+    runtime.maskCapture = null;
     const cap = runtime.gradeCapture;
     runtime.gradeCapture = null;
     const W = els.preview.width, H = els.preview.height;
@@ -11067,15 +12274,32 @@ async function runScopesJob(ticket, fail) {
         }
       }
     }
-    const clips = visibleClipsAt(t).map((c) => ({
-      id: c.id, name: c.name, kind: c.kind, track: c.track,
-      grade: Color.summarizeGrade(c.props.grade),
-    }));
-    await reportExportJob(ticket.id, { status: "done", result: { time: +t.toFixed(3), frame: { w: Math.round(r.w), h: Math.round(r.h) }, stats, clips, matte } }, true);
+    let mask = null;
+    if (ticket.mask) {
+      mask = { clip: ticket.mask.clip };
+      if (!kClip) mask.error = "no such clip";
+      else if (!clipMasks(kClip)) mask.error = "the clip has no masks";
+      else if (!kcap || kcap.coverage == null) mask.error = "the clip is not on screen at that time (or its masks are all off)";
+      else Object.assign(mask, { masks: Mask.describe(clipMasks(kClip)), coverage: kcap.coverage, frameCoverage: kcap.frameCoverage });
+    }
+    const onScreen = visibleClipsAt(t), mattes = matteTracksAt(onScreen);
+    const clips = onScreen.map((c) => {
+      const tm = clipMatte(c);
+      return {
+        id: c.id, name: c.name, kind: c.kind, track: c.track,
+        grade: Color.summarizeGrade(c.props.grade),
+        ...(clipMasks(c) ? { masks: Mask.describe(clipMasks(c)) } : {}),
+        ...(tm ? { matte: `${tm.mode} from ${tm.track}` } : {}),
+        ...(mattes.has(c.track) ? { isMatte: true } : {}),   // cuts a clip below; not drawn itself
+        ...(c.props.blend && c.props.blend !== "normal" ? { blend: c.props.blend } : {}),
+      };
+    });
+    await reportExportJob(ticket.id, { status: "done", result: { time: +t.toFixed(3), frame: { w: Math.round(r.w), h: Math.round(r.h) }, stats, clips, matte, mask } }, true);
   } catch (err) {
     fail("could not measure the frame: " + (err && err.message || err));
   } finally {
     runtime.gradeCapture = null;
+    runtime.maskCapture = null;
     state.rendering = false;
     seekMediaWhilePaused(); // the videos sat on the job's frame — back to the playhead
     if (wasPlaying) play();
@@ -12845,12 +14069,13 @@ function layerSectionsHtml(c) {
     </div>
     <div class="insp-section cp-mask"><h3>Mask</h3>
       <div class="cl-row">${["none", "ellipse", "rect", "poly"].map((s) => `<button type="button" class="btn tiny${(m ? m.shape : "none") === s ? " toggle on" : ""}" data-mshape="${s}">${s === "none" ? "None" : s === "rect" ? "Rect" : s[0].toUpperCase() + s.slice(1)}</button>`).join("")}
+        <button type="button" class="btn tiny${colorState.maskDraw || (m && m.shape === "bezier") ? " toggle on" : ""}" data-mdraw title="Drag a free-hand outline on the monitor — it becomes an editable bezier">Draw</button>
         ${m ? `<button type="button" class="btn tiny${m.invert ? " toggle on" : ""}" data-mact="invert" title="Grade outside the shape">Invert</button>` : ""}</div>
       ${m ? `<div class="cl-row"><button type="button" class="btn tiny${onKey ? " toggle on" : ""}" data-mact="key" title="${onKey ? "Remove the key at the playhead" : "Key the shape at the playhead — with keys, every change keys"}">◆ Key</button>
         <span class="cl-note">${keyed ? `${keyed} key${keyed > 1 ? "s" : ""}` : "not animated"}</span>
         ${keyed ? `<button type="button" class="btn tiny" data-mact="clearkeys" title="Remove every key (keeps the shape at the playhead)">Clear keys</button>` : ""}</div>
       ${mrow("x")}${mrow("y")}${m.shape !== "poly" ? mrow("w") + mrow("h") : ""}${mrow("rotation")}${mrow("feather")}
-      <p class="cl-note">Drag it on the monitor: inside moves, handles resize, the knob rotates${m.shape === "poly" ? "; Ctrl-click adds a point, double-click one removes it" : ""}.</p>` : ""}
+      <p class="cl-note">Drag it on the monitor: inside moves, handles resize, the knob rotates${m.points ? "; Ctrl-click adds a point, double-click one removes it" : ""}.</p>` : colorState.maskDraw ? `<p class="cl-note">Drag around what this layer should grade. Esc cancels.</p>` : ""}
     </div>`;
 }
 function bindLayerControls(c, guard) {
@@ -12919,6 +14144,13 @@ function bindLayerControls(c, guard) {
     scheduleSave(); rerender();
   });
   // mask
+  const draw = root.querySelector("[data-mdraw]");
+  if (draw) draw.addEventListener("click", () => {
+    if (!guard()) return;
+    colorState.maskDraw = !colorState.maskDraw; colorState.maskStroke = null;
+    if (colorState.maskDraw) { if (state.playing) pause(); toast("Drag around what this layer should grade"); }
+    rerender();
+  });
   for (const b of root.querySelectorAll("[data-mshape]")) b.addEventListener("click", () => {
     if (!guard()) return;
     const s = b.dataset.mshape, cur = maskNow(c);
@@ -13044,11 +14276,11 @@ function maskHandles(c) {
   if (!sp) return null;
   const a = sp.aspect, at = (px, py) => { const q = maskLocalToUv(m, a, px, py); return sp.toCanvas(q.u, q.v); };
   const rx = (m.w / 2) * a, ry = m.h / 2;
-  const top = m.shape === "poly" ? Math.min(...m.points.map(([, y]) => y)) : -ry;
+  const top = m.points ? Math.min(...m.points.map((p) => p[1])) : -ry;
   const W = els.preview.width, H = els.preview.height, inset = Math.max(8, W / 110), knob = at(0, top - 0.08);
   knob.x = clamp(knob.x, inset, W - inset); knob.y = clamp(knob.y, inset, H - inset);   // stays grabbable above the frame
   const h = { m, sp, centre: at(0, 0), knob, knobBase: at(0, top), edges: [], points: [] };
-  if (m.shape === "poly") h.points = m.points.map(([x, y]) => at(x * a, y));
+  if (m.points) h.points = m.points.map(([x, y]) => at(x * a, y));
   else h.edges = [["w", rx, 0], ["w", -rx, 0], ["h", 0, ry], ["h", 0, -ry]].map(([k, x, y]) => ({ k, ...at(x, y) }));
   return h;
 }
@@ -13058,6 +14290,9 @@ function maskOutline(c, h) {
     for (let i = 0; i < 64; i++) { const t = i / 64 * Math.PI * 2; const q = maskLocalToUv(m, a, Math.cos(t) * m.w / 2 * a, Math.sin(t) * m.h / 2); pts.push(sp.toCanvas(q.u, q.v)); }
   } else if (m.shape === "rect") {
     for (const [x, y] of [[-1, -1], [1, -1], [1, 1], [-1, 1]]) { const q = maskLocalToUv(m, a, x * m.w / 2 * a, y * m.h / 2); pts.push(sp.toCanvas(q.u, q.v)); }
+  } else if (m.shape === "bezier") {
+    const A = Mask.anchors({ shape: "bezier", x: 0, y: 0, scale: 1, rotation: 0, points: m.points }, 1, 1);
+    for (const [x, y] of Mask.flatten(A, 16)) { const q = maskLocalToUv(m, a, x * a, y); pts.push(sp.toCanvas(q.u, q.v)); }
   } else pts.push(...h.points);
   return pts;
 }
@@ -13085,10 +14320,34 @@ function drawMaskOverlay(c, W) {
   ctx2d.restore();
   return true;
 }
+/** Color tab Draw: a free-hand outline for the selected layer's mask. */
+function drawingLayerMask(c) {
+  return colorState.maskDraw && colorState.ws === "color" && colorState.layer >= 0 && c && state.selId === c.id && activeAt(c, state.time) && !!maskSpace(c);
+}
+function drawLayerStroke(c, W) {
+  const sp = maskSpace(c), st = colorState.maskStroke;
+  if (!sp || !st || st.length < 2) return;
+  ctx2d.save();
+  ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.lineWidth = Math.max(2, W / 600); ctx2d.strokeStyle = "#ffd25a";
+  ctx2d.beginPath();
+  st.forEach(([u, v], i) => { const p = sp.toCanvas(u, v); if (i) ctx2d.lineTo(p.x, p.y); else ctx2d.moveTo(p.x, p.y); });
+  ctx2d.stroke();
+  ctx2d.restore();
+}
 let maskDrag = null;
 els.preview.addEventListener("pointerdown", (e) => {
   if (e.button !== 0 || e.altKey || isSourceMode() || colorState.pick || colorState.curvePick || colorState.qualPick) return;
   const c = getClip(state.selId);
+  if (drawingLayerMask(c)) {
+    e.preventDefault(); e.stopImmediatePropagation();
+    if (isGroupLocked(c)) { toastLocked(); return; }
+    const uv = maskSpace(c).toUv(canvasPt(e));
+    colorState.maskStroke = [[uv.u, uv.v]];
+    maskDrag = { mode: "draw", id: c.id };
+    els.preview.setPointerCapture(e.pointerId);
+    return;
+  }
   if (!maskEditing(c)) return;
   const h = maskHandles(c);
   if (!h) return;
@@ -13099,7 +14358,7 @@ els.preview.addEventListener("pointerdown", (e) => {
   if (near(h.knob)) drag = { mode: "rotate" };
   else if (h.points.some(near)) drag = { mode: "point", i: h.points.findIndex(near) };
   else if (h.edges.some(near)) drag = { mode: h.edges.find(near).k };
-  else if (m.shape === "poly" && (e.ctrlKey || e.metaKey)) { // add a point on the nearest edge
+  else if (m.points && (e.ctrlKey || e.metaKey)) { // add a point on the nearest edge
     const lp = uvToMaskLocal(m, a, uv.u, uv.v), P = m.points.map(([x, y]) => [x * a, y]);
     let best = 0, bd = Infinity;
     for (let i = 0; i < P.length; i++) {
@@ -13108,7 +14367,8 @@ els.preview.addEventListener("pointerdown", (e) => {
       const d = Math.hypot(lp.x - x1 - ex * k, lp.y - y1 - ey * k);
       if (d < bd) { bd = d; best = i; }
     }
-    if (m.points.length >= Color.MAX_POLY) { toast(`A mask has at most ${Color.MAX_POLY} points`); e.stopImmediatePropagation(); return; }
+    const most = m.shape === "bezier" ? Color.MAX_BEZIER : Color.MAX_POLY;
+    if (m.points.length >= most) { toast(`A mask has at most ${most} points`); e.stopImmediatePropagation(); return; }
     if (isGroupLocked(c)) { toastLocked(); e.stopImmediatePropagation(); return; }
     const pts = m.points.map((p) => p.slice());
     pts.splice(best + 1, 0, [lp.x / a, lp.y]);
@@ -13128,6 +14388,11 @@ els.preview.addEventListener("pointermove", (e) => {
   e.stopImmediatePropagation();
   const c = getClip(maskDrag.id), sp = c && maskSpace(c);
   if (!sp) return;
+  if (maskDrag.mode === "draw") {
+    const uv = sp.toUv(canvasPt(e)), st = colorState.maskStroke, last = st && st[st.length - 1];
+    if (last && Math.hypot((uv.u - last[0]) * sp.aspect, uv.v - last[1]) > 0.003) { st.push([uv.u, uv.v]); state.dirtyTimeline = true; }
+    return;
+  }
   const uv = sp.toUv(canvasPt(e)), m0 = maskDrag.m0, a = sp.aspect, d = maskDrag;
   const lp = uvToMaskLocal(m0, a, uv.u, uv.v);
   let set;
@@ -13141,7 +14406,7 @@ els.preview.addEventListener("pointermove", (e) => {
     set = { rotation: +r.toFixed(1) };
   } else if (d.mode === "point") {
     const pts = (curLayer(c)?.mask?.points || m0.points).map((p) => p.slice());
-    pts[d.i] = [+(lp.x / a).toFixed(4), +lp.y.toFixed(4)];
+    pts[d.i] = [+(lp.x / a).toFixed(4), +lp.y.toFixed(4), ...pts[d.i].slice(2)];   // a bezier anchor keeps its handles
     set = { points: pts };
   }
   if (set) { writeMask(c, set); syncMaskInputs(c); state.dirtyTimeline = true; }
@@ -13149,6 +14414,19 @@ els.preview.addEventListener("pointermove", (e) => {
 const endMaskDrag = (e) => {
   if (!maskDrag) return;
   e.stopImmediatePropagation();
+  if (maskDrag.mode === "draw") {
+    const c = getClip(maskDrag.id), sp = c && maskSpace(c), st = colorState.maskStroke;
+    maskDrag = null; colorState.maskStroke = null; state.dirtyTimeline = true;
+    if (!c || !sp || !st || st.length < 6) { toast("Drag around what this layer should grade"); return; }
+    const cur = maskNow(c), m = { shape: "freehand", stroke: st, aspect: sp.aspect, feather: cur ? cur.feather : 0.03 };
+    if (cur && cur.invert) m.invert = true;
+    pushUndo();
+    writeLayer(c, colorState.layer, { mask: null });
+    writeLayer(c, colorState.layer, { mask: m });
+    colorState.maskDraw = false;
+    scheduleSave(); renderColorPage(true);
+    return;
+  }
   maskDrag = null; colorState.mdrag = false;
   scheduleSave(); renderColorPage(true);
 };