fablecut 1.13.0 → 1.14.0

package/app.js

@@ -46,6 +46,11 @@ const TIMELINE_FIT_FILL = 0.95; // ⇧Z / Fit — clip content fills this fracti
 
 const DEFAULT_PROPS = {
   x: 0, y: 0, scale: 1, rotation: 0, opacity: 1, volume: 1, pan: 0,
+  anchorX: 0, anchorY: 0,                      // anchor point, px from the picture's centre (motion.js)
+  trimStart: 0, trimEnd: 100, trimOffset: 0,   // shape layers: the part of every path that draws (%)
+  autoOrient: false,                           // turn along the motion path
+  pathOffset: 0, pathAlign: "start",           // text on a path: where along it (%), which end sits there
+  motionBlur: 0, motionBlurSamples: 8,         // shutter angle (°, 0 = off) and sub-frame samples
   gain: 0,                                     // clip gain, dB — applied before volume
   channelMode: "stereo",                       // stereo | mono | left | right | swap
   duck: 0,                                     // ducking, dB (≤ 0) — keyframed by Auto-duck, multiplies volume
@@ -77,7 +82,7 @@ const DEFAULT_PROPS = {
 const ANIMATABLE = ["x", "y", "scale", "rotation", "opacity", "volume", "pan", "duck", "speed",
   "brightness", "contrast", "saturation", "hue", "blur", "grayscale", "sepia", "invert",
   "temperature", "tint", "vignette", "cornerRadius", "shake", "rgbSplit", "grain",
-  "fontSize", "letterSpacing", "glow"];
+  "fontSize", "letterSpacing", "glow", "anchorX", "anchorY", "trimStart", "trimEnd", "trimOffset", "pathOffset"];
 const TRANSITIONS = ["none", "fade", "slide-left", "slide-right", "slide-up", "slide-down",
   "zoom", "wipe", "wipe-right", "wipe-up", "wipe-down", "iris", "spin", "blur", "whip",
   "glitch", "pop"];
@@ -429,6 +434,10 @@ function showClipCtxMenu(clientX, clientY, c) {
     item("Crossfade with neighbours", "Shift+D", () => crossfadeSelected(), locked ? "Locked — unlock to change" : null);
     item("Auto-duck under other tracks", "", () => autoDuckClips(selectedClips()), locked ? "Locked — unlock to change" : null);
   }
+  if (selectedClips().some((x) => isVisualClip(x) && x.kind !== "null"))
+    item("Parent to a new null", "", parentSelectionToNull, locked ? "Locked — unlock to change" : null);
+  item("Precompose", "", precomposeSelection, locked ? "Locked — unlock to change" : null);
+  if (c.kind === "comp") item("Open composition", "", () => enterComp(c.compId, c));
   const linked = selectedClips().some((x) => x.linkGroup || x.linkedId);
   if (linked) item("Unlink audio / video", "Ctrl+L", toggleLinkSelected, locked ? "Locked — unlock to change" : null);
   else if (c.kind === "video" || c.kind === "audio") {
@@ -556,7 +565,7 @@ const state = {
   webCodecs: false,      // VideoEncoder + Annex-B H.264 supported
   dirtyTimeline: true, gesture: false,
   workAreaPlay: false,   // when true, play + Home/End stay inside IN/OUT
-  binTab: "project",     // project | elements | sfx | svg
+  binTab: "project",     // project | elements | sfx | svg | shapes
   disabledTracks: new Set(), // mirror of project.disabledTracks for fast lookup
   lockedTracks: new Set(),   // mirror of project.lockedTracks
   untargetedTracks: new Set(), // mirror of project.untargetedTracks
@@ -609,7 +618,11 @@ const {
   listAlignedGaps, adjacentClip, rippleTrim, rollEdit, slipClip, slideClip, crossfadeCuts, crossfadeCut,
 } = EDIT;
 /** Does this clip reach the picture / the mix? Track output and clip enable. */
-function clipRenders(c) { return isTrackEnabled(c.track) && c.disabled !== true; }
+function clipRenders(c) {
+  // comp audio plays through the main timeline's track of the same id, so that track's switch applies too
+  if (c._comp) return c._on !== false && (c.kind !== "audio" || isTrackEnabled(c.track));
+  return isTrackEnabled(c.track) && c.disabled !== true;
+}
 function toastLocked(partial = false) {
   toast(partial ? "Locked clips were left untouched — unlock them to edit"
     : "Locked — unlock the clip or its track to edit");
@@ -873,7 +886,7 @@ function projDur() {
   }
   return mx;
 }
-const clipSpeed = (c) => clamp(+(c.props?.speed) || 1, 0.1, 8);
+const clipSpeed = FableCutEdit.clipSpeed;   // comp clips run at 1×
 
 /* ── Speed ramps (time remapping) ──
    `speed` is keyframable: media time = in + ∫ speed(t) dt over the clip.
@@ -921,8 +934,17 @@ function propsAtPlayhead(c) {
     const v = kfChannel(c, k, local, +(p[k] ?? DEFAULT_PROPS[k] ?? 0));
     if (typeof v === "number" && !isNaN(v)) p[k] = v;
   }
+  applyMotionPath(c, p, local, false);
   return p;
 }
+/* Motion path (motion.js): position keys with spatial handles move the clip along a
+   curve; auto-orient turns it with its direction of travel. */
+function applyMotionPath(c, p, local, orient) {
+  if (!c.keyframes || !c.keyframes.x || !c.keyframes.y) return;
+  const q = self.FableCutMotion.pathPositionAt(c, local);
+  if (q) { p.x = q.x; p.y = q.y; }
+  if (orient && p.autoOrient) { const a = self.FableCutMotion.orientAt(c, local); if (a != null) p.rotation = (+p.rotation || 0) + a; }
+}
 function fmtInspNum(v, step) {
   const n = +v;
   if (!Number.isFinite(n)) return "0";
@@ -980,6 +1002,11 @@ function setAnimProp(c, k, v) {
   const eps = kfTimeEps();
   const dup = arr.find((kf) => Math.abs(kf.t - lt) < eps);
   if (dup) { dup.v = v; return true; }
+  const other = k === "x" ? "y" : k === "y" ? "x" : null, oarr = other && c.keyframes[other];
+  if (other && Array.isArray(oarr) && oarr.length && self.FableCutMotion.hasPathHandles(c) && !oarr.some((kf) => Math.abs(kf.t - lt) < eps)) {
+    oarr.push({ t: lt, v: +self.FableCutMotion.positionAt(c, lt)[other].toFixed(3) });
+    oarr.sort((a, b) => a.t - b.t);
+  }
   arr.push({ t: lt, v });
   arr.sort((a, b) => a.t - b.t);
   state.dirtyTimeline = true;
@@ -1073,7 +1100,7 @@ function toggleKfAtPlayhead(c, k) {
   return true;
 }
 function hasSpeedRamp(c) {
-  return Array.isArray(c.keyframes?.speed) && c.keyframes.speed.length > 0;
+  return c.kind !== "comp" && Array.isArray(c.keyframes?.speed) && c.keyframes.speed.length > 0;   // comps run at 1×
 }
 function mediaTimeAt(c, t) {
   const base = clipSpeed(c);
@@ -1390,7 +1417,19 @@ function syncExportFrameSel() {
     html += `<option value="custom" selected>Custom · ${ef.w}×${ef.h}</option>`;
   els.exportFrameSel.innerHTML = html;
 }
-function applyProject(data) {
+function applyProject(data, opts = {}) {
+  if (state.compCtx && !opts.ctx) {   // the root changed on disk (an agent, another tab): keep the open comp open
+    const x = state.compCtx;
+    x.root = data;
+    // every undo step here and in the levels above predates this document; replaying one would save over it
+    for (const f of x.frames) { f.undo = []; f.redo = []; }
+    runtime.undo.length = 0; runtime.redo.length = 0;
+    const path = x.path.filter((id) => CompLib.getComp(data, id));
+    if (path.length !== x.path.length) { state.compCtx = null; applyProject(data, { ctx: true }); syncCompCrumb(); toast("The open composition was removed"); return; }
+    applyProject(compSyntheticDoc(data, path), { ctx: true });
+    syncCompCrumb();
+    return;
+  }
   const wa = normalizeWorkArea(data.inPoint, data.outPoint);
   Object.assign(project, {
     name: data.name || "Untitled Project",
@@ -1408,7 +1447,13 @@ function applyProject(data) {
     encodeProfile: data.encodeProfile || null,
     master: normalizeMaster(data.master),
     buses: normalizeBuses(data.buses),
+    comps: (Array.isArray(data.comps) ? data.comps : []).filter((cp) => cp && cp.id).map((cp) => ({
+      ...cp, clips: (cp.clips || []).map((x) => {
+        if (x.keyframes) for (const arr of Object.values(x.keyframes)) if (Array.isArray(arr)) arr.sort((a, b) => a.t - b.t);
+        return { ...x, props: { ...DEFAULT_PROPS, ...(x.kind === "comp" ? { fit: "none" } : {}), ...(x.props || {}) } };
+      }) })),
   });
+  runtime.compGen = (runtime.compGen || 0) + 1;
   applyTracksFromProject(data.tracks);
   ensureTracksCoverClips();
   project.tracks = serializeTracks();
@@ -1433,7 +1478,7 @@ function applyProject(data) {
     c.fx = normFx(c.fx);
     if (!c.fx) delete c.fx;
     const raw = c.props || {};
-    c.props = { ...DEFAULT_PROPS, ...raw };
+    c.props = { ...DEFAULT_PROPS, ...(c.kind === "comp" ? { fit: "none" } : {}), ...raw };
     if (c.props.grade !== undefined) {
       const g = self.FableCutColor.normalizeGrade(c.props.grade);
       if (g) c.props.grade = g; else delete c.props.grade;
@@ -1494,7 +1539,28 @@ function scheduleSave() {
     } catch { }
   }, 400);
 }
+/** One clip as saved: only the fields the editor knows (unknown runtime fields stay out). */
+function serializeClip({ id, mediaId, kind, compId, track, start, in: inn, duration, name, props, keyframes, transitionIn, transitionOut, linkedId, linkGroup, locked, disabled, unlinked, fx, parent }) {
+  const clipOut = { id, mediaId, kind, track, start, in: inn, duration, name, props, keyframes, transitionIn, transitionOut };
+  if (compId) clipOut.compId = compId;
+  if (fx?.length) clipOut.fx = fx;
+  if (linkGroup) clipOut.linkGroup = linkGroup;
+  if (linkedId) clipOut.linkedId = linkedId;
+  // Written only when set, so untouched projects stay byte-identical.
+  if (locked === true) clipOut.locked = true;
+  if (disabled === true) clipOut.disabled = true;
+  if (unlinked === true) clipOut.unlinked = true;
+  if (parent) clipOut.parent = parent;
+  return clipOut;
+}
+/** The document to save: the root project, with the open comp (if any) written into it. */
 function projectJSON() {
+  if (!state.compCtx) return projectJSONHere();
+  const root = commitCompCtx();
+  return { ...root, revision: project.revision };
+}
+/** The project as it is loaded right now (an open comp's stand-in project, or the root). */
+function projectJSONHere() {
   const { name, width, height, fps, background, revision, folders, media, clips, markers, inPoint, outPoint, disabledTracks, encodeProfile } = project;
   const out = {
     name, width, height, fps, background, revision,
@@ -1507,17 +1573,7 @@ function projectJSON() {
       if (derivedFrom) { mo.derivedFrom = derivedFrom; if (denoise) mo.denoise = denoise; }
       return mo;
     }),
-    clips: clips.map(({ id, mediaId, kind, track, start, in: inn, duration, name, props, keyframes, transitionIn, transitionOut, linkedId, linkGroup, locked, disabled, unlinked, fx }) => {
-      const clipOut = { id, mediaId, kind, track, start, in: inn, duration, name, props, keyframes, transitionIn, transitionOut };
-      if (fx?.length) clipOut.fx = fx;
-      if (linkGroup) clipOut.linkGroup = linkGroup;
-      if (linkedId) clipOut.linkedId = linkedId;
-      // Written only when set, so untouched projects stay byte-identical.
-      if (locked === true) clipOut.locked = true;
-      if (disabled === true) clipOut.disabled = true;
-      if (unlinked === true) clipOut.unlinked = true;
-      return clipOut;
-    }),
+    clips: clips.map(serializeClip),
     markers: normalizeMarkers(markers),
     inPoint: inPoint == null ? null : inPoint,
     outPoint: outPoint == null ? null : outPoint,
@@ -1534,6 +1590,7 @@ function projectJSON() {
   if (master) out.master = master;
   const buses = normalizeBuses(project.buses);
   if (buses.length) out.buses = buses;
+  if (project.comps && project.comps.length) out.comps = project.comps.map((cp) => ({ ...cp, clips: (cp.clips || []).map(serializeClip) }));
   return out;
 }
 function listenSSE() {
@@ -1559,7 +1616,9 @@ function listenSSE() {
 async function syncFromServer(force) {
   if (state.gesture || state.exporting) { runtime.pendingSync = true; return; }
   runtime.pendingSync = false;
-  if (state.binTab !== "project") fetchLibrary(state.binTab).then(renderLibrary);
+  if (state.binTab === "templates") fetchSaved("templates").then(() => { if (state.binTab === "templates") renderTemplatesTab(); });
+  else if (state.binTab !== "project" && state.binTab !== "shapes") fetchLibrary(state.binTab).then(renderLibrary);
+  fetchSaved("presets");
   loadLibraryFonts();
   fetchEncodeProfiles();
   try {
@@ -1570,6 +1629,8 @@ async function syncFromServer(force) {
     if (!force && (data.revision || 0) === (project.revision || 0)) return; // our own save
     if (runtime.saveTimer) { // unsaved local edit vs. external write: external wins, tell the user
       clearTimeout(runtime.saveTimer); runtime.saveTimer = null;
+      // the undo steps describe the discarded edit; replaying one would re-save over the external write
+      runtime.undo.length = 0; runtime.redo.length = 0;
       toast("Project was updated externally — your last change may need redoing.");
     }
     applyProject(data);
@@ -1833,10 +1894,12 @@ async function importFromUrl(url) {
 }
 
 function renderBin() {
-  els.binList.querySelectorAll(".bin-item, .bin-folder, .bin-drop-root").forEach((n) => n.remove());
-  const empty = !project.media.length && !project.folders.length;
+  els.binList.querySelectorAll(".bin-item, .bin-folder, .bin-drop-root, .comp-item").forEach((n) => n.remove());
+  const comps = project.comps || [];
+  const empty = !project.media.length && !project.folders.length && !comps.length;
   els.binEmpty.style.display = empty ? "" : "none";
   if (empty) return;
+  for (const comp of comps) els.binList.appendChild(makeCompItem(comp));
 
   const clearBinDropHints = () => {
     els.binList.querySelectorAll(".bin-drop-over").forEach((n) => n.classList.remove("bin-drop-over"));
@@ -1944,9 +2007,13 @@ function renderBin() {
     });
     item.querySelector(".bin-del").addEventListener("click", (e) => {
       e.stopPropagation();
-      pushUndo();
+      if (state.compCtx && (state.compCtx.root.clips || []).some((c) => c.mediaId === m.id)) { toast("It's used on the main timeline — go back to Main to delete it"); return; }
+      pushUndo(JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [], media: project.media }));   // undo brings the media back too
       project.media = project.media.filter((x) => x.id !== m.id);
       project.clips = project.clips.filter((c) => c.mediaId !== m.id);
+      // and its clips inside comps (and on the main timeline while a comp is open)
+      project.comps = (project.comps || []).map((cp) => ({ ...cp, clips: (cp.clips || []).filter((c) => c.mediaId !== m.id) }));
+      runtime.compGen = (runtime.compGen || 0) + 1;
       if (state.source.mediaId === m.id) clearSource();
       renderBin(); scheduleSave(); renderInspector();
     });
@@ -2161,14 +2228,16 @@ function setBinTab(tab) {
   const isProj = tab === "project";
   els.binList.classList.toggle("hidden", !isProj);
   els.libList.classList.toggle("hidden", isProj);
-  if (!isProj) fetchLibrary(tab).then(renderLibrary);
+  if (tab === "shapes") renderShapesTab();
+  else if (tab === "templates") { renderTemplatesTab(); fetchSaved("templates").then(() => { if (state.binTab === "templates") renderTemplatesTab(); }); }
+  else if (!isProj) fetchLibrary(tab).then(renderLibrary);
 }
 
 /* ═══════════════════════════ EDIT OPERATIONS ═══════════════════════════ */
 /* Undo entries are {clips, markers} snapshots. Drag gestures still push a bare
    clips array (taken at pointerdown) — restoring one leaves markers alone. */
 function undoSnapshot() {
-  return JSON.stringify({ clips: project.clips, markers: project.markers || [] });
+  return JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [] });
 }
 /** Record an undo step — `snap` lets an edit snapshot first and record only
  *  once it knows it changed something. */
@@ -2180,7 +2249,8 @@ function pushUndo(snap = undoSnapshot()) {
 function restoreSnapshot(json) {
   const snap = JSON.parse(json);
   if (Array.isArray(snap)) project.clips = snap;
-  else { project.clips = snap.clips; project.markers = snap.markers; }
+  else { project.clips = snap.clips; project.markers = snap.markers; if (snap.comps) project.comps = snap.comps; if (snap.media) { project.media = snap.media; renderBin(); } }
+  runtime.compGen = (runtime.compGen || 0) + 1;
 }
 function undo() {
   if (!runtime.undo.length) return;
@@ -3302,10 +3372,19 @@ function rebuildClips() {
     })();
     const label = c.kind === "text" ? "T · " + (c.props.text || "").split("\n")[0]
       : c.kind === "adjust" ? "FX · " + (c.name || "")
+      : c.kind === "shape" ? "◆ · " + (c.name || "")
+      : c.kind === "null" ? "✥ · " + (c.name || "")
+      : c.kind === "comp" ? "▣ · " + ((getComp(c.compId) || {}).name || c.name || "missing comp")
       : c.kind === "audio" ? chTag + (c.name || "")
       : (c.name || "");
     body += `<div class="fade"></div>
       <div class="clip-label">${badge}${escapeHtml(label)}</div>`;
+    if (c.kind === "comp") {
+      // say on hover how to get inside (wide enough clips show it in the clip, every one in its tooltip)
+      const comp = getComp(c.compId);
+      div.title = comp ? `${comp.template ? "Template" : "Composition"} "${comp.name}" — double-click to open and edit${comp.template ? " · its fields are in the Inspector" : ""}` : "Its composition is missing";
+      if (comp && c.duration * state.pps >= label.length * 7 + 190) body += `<div class="comp-open-hint">Double-click to open</div>`;
+    }
     body += clipKeyframesHtml(c);
     let inner = `<div class="clip-body">${body}</div>`;
     inner += transitionMarksHtml(c, tr.h);
@@ -3909,6 +3988,7 @@ function startTrimToolGesture(e, c, mode) {
     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,
+    shapes: x.props && x.props.shapes,
   }]));
   const restore = () => {
     for (const x of project.clips) {
@@ -3919,6 +3999,7 @@ function startTrimToolGesture(e, c, mode) {
       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;
+        if (b.shapes) x.props.shapes = b.shapes; else delete x.props.shapes;
       }
     }
   };
@@ -4050,6 +4131,7 @@ els.tracksContent.addEventListener("dblclick", (e) => {
   }
   if (e.target.closest(".handle, .trans-mark, .trans-dur-handle, .clip-kf, .fade-grip, .vol-hit")) return;
   e.preventDefault();
+  if (c.kind === "comp") { enterComp(c.compId, c); return; }   // a comp opens on the timeline
   loadSourceFromClip(c, { timelineTime: timeAtEvent(e) });
 });
 
@@ -4103,6 +4185,7 @@ function startClipGesture(e, c, mode, collapseOnClick) {
     keyframes: c.keyframes ? JSON.parse(JSON.stringify(c.keyframes)) : undefined,
     masks: c.props.masks,
     tracks: c.props.tracks,
+    shapes: c.props.shapes,
   };
   // moving a clip that belongs to a multi-selection drags the whole group;
   // AV-linked partners (video+audio from one file) always move together
@@ -4150,21 +4233,23 @@ function startClipGesture(e, c, mode, collapseOnClick) {
     } else if (mode === "trim-l") {
       let ns = snapTime(orig.start + dt, groupIds);
       const sp = clipSpeed(c);
-      const maxShiftLeft = (c.kind === "video" || c.kind === "audio") ? orig.in / sp : 1e6;
+      const maxShiftLeft = FableCutEdit.hasSourceTime(c) ? orig.in / sp : 1e6;
       ns = clamp(ns, Math.max(0, orig.start - maxShiftLeft), orig.start + orig.duration - MIN_DUR);
       const d = ns - orig.start;
       c.start = ns;
-      c.in = (c.kind === "video" || c.kind === "audio") ? orig.in + d * sp : 0;
+      c.in = FableCutEdit.hasSourceTime(c) ? 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.shapes) c.props.shapes = Motion.shiftKeys(orig.shapes, 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);
       let maxDur = 1e6;
-      if ((c.kind === "video" || c.kind === "audio") && media?.duration)
-        maxDur = (media.duration - orig.in) / clipSpeed(c);
+      const srcLen = c.kind === "comp" ? (getComp(c.compId) || {}).duration : media?.duration;
+      if (FableCutEdit.hasSourceTime(c) && srcLen)
+        maxDur = Math.max(MIN_DUR, (srcLen - orig.in) / clipSpeed(c));
       c.duration = clamp(ne - orig.start, MIN_DUR, maxDur);
       c.keyframes = shiftKF(orig.keyframes, 0, c.duration);
       syncLinkedTiming(c);
@@ -4623,7 +4708,7 @@ function updateWorkArea() {
 
 /* ── Drag & drop: bin → timeline, files → window ── */
 els.timelineScroll.addEventListener("dragover", (e) => {
-  if (e.dataTransfer.types.includes("text/fablecut-media")) {
+  if (["text/fablecut-media", "text/fablecut-comp", "text/fablecut-template"].some((t) => e.dataTransfer.types.includes(t))) {
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
     for (const row of els.tracks.children)
@@ -4635,6 +4720,10 @@ els.timelineScroll.addEventListener("dragleave", () => {
 });
 els.timelineScroll.addEventListener("drop", (e) => {
   for (const row of els.tracks.children) row.classList.remove("drop-hint");
+  const cid = e.dataTransfer.getData("text/fablecut-comp");
+  if (cid) { e.preventDefault(); const comp = getComp(cid); if (comp) addCompClip(comp, trackAtEvent(e), snapTime(timeAtEvent(e), null)); return; }
+  const tid = e.dataTransfer.getData("text/fablecut-template");
+  if (tid) { e.preventDefault(); const t = findTemplate(tid); if (t) addTemplateClip(t, trackAtEvent(e), snapTime(timeAtEvent(e), null)); return; }
   const mid = e.dataTransfer.getData("text/fablecut-media");
   if (!mid) return;
   e.preventDefault();
@@ -4861,7 +4950,7 @@ function renderInspector(lite) {
   let html = (state.selIds.size > 1
     ? `<div class="insp-multi">${state.selIds.size} clips selected — drag moves them together, Del deletes all. Fields below edit the primary (white-outlined) clip.</div>`
     : "") + clipStatusBar(c) + `<div class="insp-section"><h3>Clip — ${c.kind}</h3>
-    ${row("Name", `<input type="text" data-k="name" value="${c.name.replace(/"/g, "&quot;")}">`)}
+    ${row("Name", `<input type="text" data-k="name" value="${escapeHtml(c.name || "")}">`)}
     ${c.mediaId ? row("Source", `<button type="button" class="btn tiny style-picker-btn" data-media-open title="Replace this clip's media — keeps position, trim, keyframes and effects">${escapeHtml((getMedia(c.mediaId) || {}).name || "Missing media")} ▾</button>`) : ""}
     ${row("Start (s)", `<input type="number" data-k="start" step="0.01" value="${c.start.toFixed(2)}">`)}
     ${row("Length (s)", `<input type="number" data-k="duration" step="0.01" value="${c.duration.toFixed(2)}">`)}
@@ -4882,6 +4971,16 @@ function renderInspector(lite) {
       ${slider("opacity", 0, 1, 0.01, p.opacity)}
       ${matteRows()}
     </div>`;
+  } else if (c.kind === "null") {
+    html += `<div class="insp-section"><h3>Null object</h3>
+      <p class="cl-note">A null never shows in the picture. Parent clips to it (their Parent field), then move, turn or scale the null to move them together.</p>
+      ${row("Position X", `<input type="number" data-k="x" value="${fmtInspNum(p.x)}">`, "x")}
+      ${row("Position Y", `<input type="number" data-k="y" value="${fmtInspNum(p.y)}">`, "y")}
+      ${slider("scale", 0.1, 4, 0.01, p.scale)}
+      ${slider("rotation", -180, 180, 1, p.rotation, "°")}
+      ${anchorRowsHtml(c, p, row)}
+      ${parentRowHtml(c)}
+    </div>`;
   } else if (c.kind !== "audio") {
     html += `<div class="insp-section"><h3>Transform</h3>
       ${row("Position X", `<input type="number" data-k="x" value="${fmtInspNum(p.x)}">`, "x")}
@@ -4889,11 +4988,15 @@ function renderInspector(lite) {
       ${slider("scale", 0.1, 4, 0.01, p.scale)}
       ${slider("rotation", -180, 180, 1, p.rotation, "°")}
       ${slider("opacity", 0, 1, 0.01, p.opacity)}
+      ${anchorRowsHtml(c, p, row)}
+      ${parentRowHtml(c)}
       ${sel("Blend", "blend", BLEND_MODES, p.blend)}
       ${matteRows()}
     </div>`;
   }
-  if (c.kind === "video" || c.kind === "image" || c.kind === "svg") {
+  if (c.kind === "shape") html += shapeSectionHtml(c, p, row) + `<div class="insp-section"><h3>Look</h3>${slider("blur", 0, 40, 0.5, p.blur, "px")}${slider("shake", 0, 40, 0.5, p.shake, "px")}${slider("shakeSpeed", 1, 30, 0.5, p.shakeSpeed)}</div>`;
+  if (c.kind === "comp") html += templateSectionHtml(c, row) + compSectionHtml(c, row);
+  if (c.kind === "video" || c.kind === "image" || c.kind === "svg" || c.kind === "comp") {
     html += `<div class="insp-section"><h3>Layout</h3>
       ${sel("Fit", "fit", ["contain", "cover", "stretch", "none"], p.fit)}
       ${row("Crop L/R %", `<input type="number" data-k="cropL" min="0" max="95" value="${p.cropL}" style="max-width:58px">
@@ -4905,7 +5008,7 @@ function renderInspector(lite) {
       ${check("Flip V", "flipV", p.flipV)}
     </div>`;
   }
-  if (c.kind === "video" || c.kind === "image" || c.kind === "svg" || c.kind === "adjust") {
+  if (c.kind === "video" || c.kind === "image" || c.kind === "svg" || c.kind === "adjust" || c.kind === "comp") {
     html += `<div class="insp-section"><h3>Filter / Color</h3>
       ${sel("Preset", "filterPreset", Object.keys(FILTER_PRESETS), p.filterPreset)}
       ${slider("brightness", 0, 200, 1, p.brightness, "%")}
@@ -4981,7 +5084,9 @@ 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 === "text") html += textPathSectionHtml(c, p, row);
+  if (isVisualClip(c)) html += motionSectionHtml(c, p, row);
+  if (c.kind !== "audio" && c.kind !== "null") html += maskSectionHtml(c);
   if (c.kind === "video") html += trackSectionHtml(c);
   html += `<div class="insp-section"><h3>Transition</h3>
     ${tsel("In", "transIn", c.transitionIn)}
@@ -5241,6 +5346,13 @@ function renderInspector(lite) {
   });
   bindMaskControls(c);
   bindTrackControls(c);
+  bindParentAnchorControls(c);
+  bindShapeControls(c);
+  bindMotionControls(c);
+  bindTextPathControls(c);
+  bindCompControls(c);
+  bindTemplateControls(c);
+  bindPresetControls(c);
   syncInspectorOffClip(c);
   renderKfGraphsPanel();
 }
@@ -5328,6 +5440,7 @@ function syncInspectorPlayhead() {
     if (btn.textContent !== label) btn.textContent = label;
   }
   syncMaskInspector(c);
+  syncShapeInspector(c);
   syncInspectorOffClip(c); // after the class pass, so ◆ titles read the fresh "on" state
 }
 
@@ -5339,6 +5452,7 @@ const KF_GRAPH_LABEL = {
   invert: "Invert", temperature: "Temp", tint: "Tint", vignette: "Vignette",
   cornerRadius: "Radius", shake: "Shake", rgbSplit: "RGB", grain: "Grain",
   fontSize: "Size", letterSpacing: "Track", glow: "Glow",
+  anchorX: "Anchor X", anchorY: "Anchor Y", trimStart: "Trim start", trimEnd: "Trim end", trimOffset: "Trim offset", pathOffset: "Path offset",
 };
 function toggleKfGraph(key) {
   if (!ANIMATABLE.includes(key)) return;
@@ -5893,8 +6007,8 @@ function loadSourceFromMedia(m, opts = {}) {
 }
 function loadSourceFromClip(c, opts = {}) {
   if (!c || !c.mediaId) {
-    if (c && (c.kind === "text" || c.kind === "adjust"))
-      toast("Titles and adjustment layers have no source media");
+    if (c && (c.kind === "text" || c.kind === "adjust" || c.kind === "shape" || c.kind === "null" || c.kind === "comp"))
+      toast("Titles, shapes, nulls and adjustment layers have no source media");
     return;
   }
   const m = getMedia(c.mediaId);
@@ -8048,7 +8162,7 @@ function refreshAudioHold() {
   for (const el of runtime.clipEls.values()) { if (!el.paused) el.pause(); }
   for (const chain of runtime.clipGain.values()) muteClipChain(chain);
 
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "audio" && c.kind !== "video") continue;
     if (!clipRenders(c) || !activeAt(c, t)) continue;
     const m = getMedia(c.mediaId);
@@ -8141,7 +8255,7 @@ function syncMedia() {
   const reversing = state.playing && rate < 0;
   // Timeline lookahead grows with preview rate so wall-clock budget stays ≈VIDEO_PREFETCH_SEC.
   const prefetchTl = VIDEO_PREFETCH_SEC * Math.max(rate, 1);
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind === "text" || c.kind === "image" || c.kind === "svg" || c.kind === "adjust") continue;
     const el = getClipEl(c); if (!el) continue;
     const enabled = clipRenders(c);
@@ -8184,7 +8298,7 @@ function syncMedia() {
 function seekMediaWhilePaused() {
   if (state.playing) return;
   const t = state.time;
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "video") continue;
     if (!clipRenders(c)) continue;
     if (!activeAt(c, t)) continue;
@@ -8226,6 +8340,7 @@ function evalProps(c, t) {
       }
       if (typeof v === "number" && !isNaN(v)) p[k] = v;
     }
+    applyMotionPath(c, p, local, true);
   }
   applyFilterPreset(p);
   const W = els.preview.width, H = els.preview.height;
@@ -8522,7 +8637,7 @@ function drawAdjust(c, W, H, t) {
   if (adjScratch.height !== H) adjScratch.height = H;
   const a = adjScratch.getContext("2d");
   a.clearRect(0, 0, W, H);
-  a.drawImage(els.preview, 0, 0);
+  a.drawImage(runtime.adjSource || els.preview, 0, 0);   // inside a comp: the comp's own layers below
   ctx2d.save();
   ctx2d.setTransform(1, 0, 0, 1, 0, 0);
   if (p.shake > 0) { // whole-frame impact shake
@@ -8858,28 +8973,541 @@ function drawFrame(t = state.time) {
   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);
+  if (!state.exporting && !state.playing && !runtime.sampling) { drawNullGuides(clips, W, H, t); drawSelectionOverlay(W, H, t); }
+}
+/** Nulls never render; the monitor shows where they are (never in export or the scopes). */
+function drawNullGuides(clips, W, H, t) {
+  for (const c of clips) {
+    if (c.kind !== "null" || c.id === state.selId) continue;
+    drawNullMark(clipBounds(c, evalProps(c, t), W, H), W, 0.45);
+  }
+}
+function drawNullMark(b, W, alpha) {
+  const lw = Math.max(1.5, W / 800);
+  ctx2d.save();
+  ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.globalAlpha = alpha; ctx2d.globalCompositeOperation = "source-over"; ctx2d.filter = "none";
+  ctx2d.translate(b.cx, b.cy); ctx2d.rotate(b.rot);
+  ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#ff6b6b";
+  ctx2d.strokeRect(-b.hw, -b.hh, b.hw * 2, b.hh * 2);
+  ctx2d.beginPath(); ctx2d.moveTo(-b.hw * 0.4, 0); ctx2d.lineTo(b.hw * 0.4, 0); ctx2d.moveTo(0, -b.hh * 0.4); ctx2d.lineTo(0, b.hh * 0.4); ctx2d.stroke();
+  ctx2d.restore();
+}
+/** Where the clip's anchor point is on screen (its x / y in its parents' space). */
+function anchorScreenPt(c, p, W, H, t = state.time) {
+  const q = parentScreenMatrix(c, W, H, t).transformPoint(new DOMPoint(+p.x || 0, +p.y || 0));
+  return { x: q.x, y: q.y };
 }
 
 /* ═══════════ Direct manipulation on the program monitor ═══════════
    Drag a clip to move it, corner handles to resize (scale), the top
    handle to rotate. Maps gestures straight onto props.x/y/scale/rotation. */
-function clipBounds(c, p, W, H) {
-  const cx = W / 2 + (+p.x || 0), cy = H / 2 + (+p.y || 0);
-  const rot = (p.rotation || 0) * Math.PI / 180, sc = +p.scale || 1;
-  let hw, hh;
+function clipBounds(c, p, W, H, t = state.time) {
+  const box = layerBox(c, p, W, H, t), m = layerScreenMatrix(c, p, W, H, t);
+  const o = m.transformPoint(new DOMPoint(box.ox, box.oy)), k = Math.hypot(m.a, m.b) || 1;
+  return { cx: o.x, cy: o.y, hw: box.hw * k, hh: box.hh * k, rot: Math.atan2(m.b, m.a) };
+}
+/** The picture's box in its drawn space (content scale applied): centre offset and half size. */
+const NULL_HALF = 40;
+function layerBox(c, p, W, H, t) {
+  const sc = +p.scale || 1;
   if (c.kind === "text") {
-    if (hasTextBox(p)) {
-      hw = +p.boxW / 2; hh = +p.boxH / 2;
-    } else {
-      const half = measureTextHalfSize(p);
-      hw = half.hw; hh = half.hh;
+    const tb = p.textPath ? textPathBox(c, p, t) : null;
+    if (tb) return tb;
+    if (hasTextBox(p)) return { ox: 0, oy: 0, hw: +p.boxW / 2, hh: +p.boxH / 2 };
+    const half = measureTextHalfSize(p);
+    return { ox: 0, oy: 0, hw: half.hw, hh: half.hh };
+  }
+  if (c.kind === "null") return { ox: 0, oy: 0, hw: NULL_HALF * sc, hh: NULL_HALF * sc };
+  if (c.kind === "shape") {
+    const b = Motion.bounds(shapeItemsAt(c, t));
+    if (!b) return { ox: 0, oy: 0, hw: NULL_HALF * sc, hh: NULL_HALF * sc };
+    return { ox: (b.x0 + b.x1) / 2 * sc, oy: (b.y0 + b.y1) / 2 * sc, hw: Math.max(4, (b.x1 - b.x0) / 2) * sc, hh: Math.max(4, (b.y1 - b.y0) / 2) * sc };
+  }
+  if (c.kind === "comp") {   // a comp clip's box is the comp's own size (fit none) or fitted like a picture
+    const comp = getComp(c.compId);
+    if (comp) {
+      const cw = comp.width, ch = comp.height;
+      const f = p.fit === "none" ? 1 : p.fit === "cover" ? Math.max(W / cw, H / ch) : p.fit === "stretch" ? null : Math.min(W / cw, H / ch);
+      return f == null ? { ox: 0, oy: 0, hw: (W / 2) * sc, hh: (H / 2) * sc } : { ox: 0, oy: 0, hw: cw * f / 2 * sc, hh: ch * f / 2 * sc };
     }
-  } else {                       // media/svg: canvas-sized base box, scaled
-    hw = (W / 2) * sc; hh = (H / 2) * sc;
   }
-  return { cx, cy, hw, hh, rot };
+  return { ox: 0, oy: 0, hw: (W / 2) * sc, hh: (H / 2) * sc };   // media/svg: canvas-sized base box, scaled
+}
+/* ── Layer transforms (motion.js): the anchor point and parenting ──
+   A clip draws at canvas centre · its parents · translate(x, y) · rotate ·
+   (its picture at its scale, shifted so the anchor point sits at x / y). */
+const Motion = self.FableCutMotion;
+function parentM(c, t) { return c.parent ? Motion.parentMatrix(c, anyClip, t) : null; }
+/** Canvas centre and the parents: the space a clip's x / y live in. */
+function parentScreenMatrix(c, W, H, t) {
+  const m = new DOMMatrix().translate(W / 2, H / 2), pm = parentM(c, t);
+  return pm ? m.multiply(new DOMMatrix(pm)) : m;
+}
+/** Canvas px of the clip's drawn space, before its content scale (shake left out). */
+function layerScreenMatrix(c, p, W, H, t) {
+  const as = Motion.contentScale(c, p);
+  return parentScreenMatrix(c, W, H, t).translate(+p.x || 0, +p.y || 0).rotate(+p.rotation || 0)
+    .translate(-(+p.anchorX || 0) * as, -(+p.anchorY || 0) * as);
+}
+/** How much the clip's parents scale it (1 without a parent). */
+function parentScaleAt(c, t = state.time) { const m = parentScreenMatrix(c, 0, 0, t); return Math.hypot(m.a, m.b) || 1; }
+/** The x / y that put the centre of the clip's (unshifted) picture at screen (sx, sy). */
+function posForScreenCentre(c, p, sx, sy, W, H, t = state.time) {
+  const q = parentScreenMatrix(c, W, H, t).inverse().transformPoint(new DOMPoint(sx, sy));
+  const th = (+p.rotation || 0) * Math.PI / 180, as = Motion.contentScale(c, p), ax = (+p.anchorX || 0) * as, ay = (+p.anchorY || 0) * as;
+  return { x: q.x + ax * Math.cos(th) - ay * Math.sin(th), y: q.y + ax * Math.sin(th) + ay * Math.cos(th) };
+}
+/** A screen-space drag delta in the clip's x / y space (its parents undone). */
+function screenDeltaToParent(c, dx, dy, t = state.time) {
+  const m = parentScreenMatrix(c, els.preview.width, els.preview.height, t), det = m.a * m.d - m.b * m.c || 1;
+  return { x: (m.d * dx - m.c * dy) / det, y: (-m.b * dx + m.a * dy) / det };
+}
+/* ═══════════ COMPOSITIONS (comp.js) ═══════════
+   project.comps holds nested sequences; a "comp" clip places one. The media
+   inside comps is flattened into virtual clips (mediaClips) so playback,
+   export seeking and the audio mix treat it like timeline media; the comp
+   clip draws its comp's frame like a picture (renderComp). Opening a comp
+   loads it as a stand-in project, so the whole timeline edits it; saves write
+   it back into the root document. */
+const CompLib = self.FableCutComp;
+function compCtxId() { const x = state.compCtx; return x ? x.path[x.path.length - 1] : null; }
+function getComp(id) { return CompLib.getComp(project, id); }
+let flatMemo = null;
+/** Timeline clips plus the clips every comp clip brings in (virtual, at timeline times). */
+function mediaClips() {
+  const now = performance.now();
+  if (flatMemo && flatMemo.clips === project.clips && flatMemo.comps === project.comps && flatMemo.gen === runtime.compGen && now - flatMemo.at < 4) return flatMemo.list;
+  const virt = project.comps && project.comps.length && project.clips.some((c) => c.kind === "comp")
+    ? CompLib.flatten(project, project.clips, { inComp: compCtxId(), renders: (c) => clipRenders(c) }) : [];
+  const list = virt.length ? project.clips.concat(virt) : project.clips;
+  flatMemo = { at: now, clips: project.clips, comps: project.comps, gen: runtime.compGen, list, virt, byId: new Map(virt.map((v) => [v.id, v])) };
+  return list;
+}
+function virtualClip(id) { mediaClips(); return (flatMemo && flatMemo.byId.get(id)) || null; }
+/** The clips a comp clip (or virtual comp clip) shows directly. */
+function compChildren(c) { mediaClips(); return flatMemo ? flatMemo.virt.filter((v) => v._comp === c.id) : []; }
+/** The comp's frame at timeline time t, as a canvas of the comp's size (null when it has none). */
+function renderComp(c, t) {
+  const comp = getComp(c.compId);
+  const depth = (runtime.compDepth || 0) + 1;
+  if (!comp || depth > CompLib.MAX_DEPTH) return null;
+  const W2 = comp.width, H2 = comp.height;
+  const prev = { ctx: ctx2d, scope: runtime.scope, depth: runtime.compDepth, adj: runtime.adjSource };
+  runtime.compDepth = depth;   // every scratch buffer below gets this depth's own copy
+  const cv = maskCtx("comp", W2, H2);
+  cv.setTransform(1, 0, 0, 1, 0, 0); cv.globalAlpha = 1; cv.globalCompositeOperation = "source-over"; cv.filter = "none";
+  cv.clearRect(0, 0, W2, H2);
+  if (comp.background) { cv.fillStyle = comp.background; cv.fillRect(0, 0, W2, H2); }
+  const kids = compChildren(c), order = CompLib.drawOrder(comp).video;
+  const on = kids.filter((v) => v._on && v.kind !== "audio" && activeAt(v, t))
+    .sort((a, b) => (order.indexOf(a.track) - order.indexOf(b.track)) || (a.start - b.start));
+  runtime.scope = { clips: kids, videoTracks: order };
+  ctx2d = cv; runtime.adjSource = cv.canvas;
+  try {
+    const mattes = matteTracksAt(on);
+    for (const v of on) if (!mattes.has(v.track)) drawClip(v, W2, H2, t);
+  } finally { ctx2d = prev.ctx; runtime.scope = prev.scope; runtime.compDepth = prev.depth; runtime.adjSource = prev.adj; }
+  return cv.canvas;
+}
+const anyClip = (id) => getClip(id) || virtualClip(id);
+
+/* ── Opening a comp: it becomes the timeline until you go back ── */
+function compSyntheticDoc(root, path) {
+  const comp = CompLib.getComp(root, path[path.length - 1]);
+  if (!comp) return null;
+  const names = path.map((id) => (CompLib.getComp(root, id) || { name: id }).name);
+  return {
+    ...root, name: `${root.name} › ${names.join(" › ")}`,
+    width: comp.width, height: comp.height, background: comp.background || "#000000",
+    clips: comp.clips, tracks: CompLib.compTracks(comp), markers: comp.markers || [], inPoint: null, outPoint: null,
+    disabledTracks: comp.disabledTracks || [], lockedTracks: [], untargetedTracks: [], exportFrame: null,
+  };
 }
+/** Write the open comp's clips and tracks back into the root document (and return it). */
+function commitCompCtx() {
+  const x = state.compCtx;
+  if (!x) return null;
+  const cur = projectJSONHere();
+  const id = compCtxId();
+  const comps = (cur.comps || []).map((c) => (c.id === id
+    ? { ...c, clips: cur.clips, tracks: cur.tracks, disabledTracks: cur.disabledTracks && cur.disabledTracks.length ? cur.disabledTracks : undefined, markers: cur.markers && cur.markers.length ? cur.markers : undefined, background: c.background }
+    : c));
+  x.root = { ...x.root, media: cur.media, folders: cur.folders, fps: cur.fps, master: cur.master, buses: cur.buses, revision: cur.revision, comps };
+  return x.root;
+}
+function enterComp(compId, viaClip) {
+  if (state.exporting) return;
+  if (state.playing) pause();
+  const comp = getComp(compId);
+  if (!comp) { toast("That composition is missing"); return; }
+  const here = compCtxId();
+  if (here && CompLib.wouldCycle(state.compCtx.root, here, compId) && here === compId) return;
+  const root = state.compCtx ? commitCompCtx() : projectJSONHere();
+  const t = viaClip && activeAt(viaClip, state.time) ? state.time - viaClip.start + (viaClip.in || 0) : 0;
+  const frame = { undo: runtime.undo.slice(), redo: runtime.redo.slice(), time: state.time, sel: state.selId };
+  state.compCtx = { root, path: [...(state.compCtx ? state.compCtx.path : []), compId], frames: [...(state.compCtx ? state.compCtx.frames : []), frame] };
+  runtime.undo.length = 0; runtime.redo.length = 0;
+  applyProject(compSyntheticDoc(root, state.compCtx.path), { ctx: true });
+  setSelection([]);
+  setTime(clamp(t, 0, comp.duration));
+  syncCompCrumb();
+}
+function exitComp(levels = 1) {
+  const x = state.compCtx;
+  if (!x) return;
+  const root = commitCompCtx();
+  let frame = null;
+  for (let i = 0; i < levels && x.path.length; i++) { x.path.pop(); frame = x.frames.pop(); }
+  if (!x.path.length) { state.compCtx = null; applyProject(root, { ctx: true }); }
+  else applyProject(compSyntheticDoc(root, x.path), { ctx: true });
+  if (frame) {
+    runtime.undo.splice(0, runtime.undo.length, ...frame.undo); runtime.redo.splice(0, runtime.redo.length, ...frame.redo);
+    setSelection(frame.sel && getClip(frame.sel) ? [frame.sel] : []);
+    setTime(frame.time);
+  }
+  syncCompCrumb();
+  scheduleSave();
+}
+function syncCompCrumb() {
+  if (els.projectName) els.projectName.textContent = project.name + (state.connected ? "  ·  🟢 connected" : "  ·  ⚪ local session");
+  const el = document.getElementById("compCrumb");
+  if (!el) return;
+  const x = state.compCtx;
+  el.classList.toggle("hidden", !x);
+  if (!x) { el.innerHTML = ""; return; }
+  const names = x.path.map((id) => (CompLib.getComp(x.root, id) || { name: id }).name);
+  el.innerHTML = `<button type="button" class="btn tiny" data-crumb="${x.path.length}" title="Back to the main timeline">◀ Main</button>` +
+    names.map((n, i) => `<span class="crumb-sep">›</span>` + (i < names.length - 1
+      ? `<button type="button" class="btn tiny" data-crumb="${x.path.length - 1 - i}">${escapeHtml(n)}</button>`
+      : `<b title="You are editing this composition — Esc or ◀ Main goes back">${escapeHtml(n)}</b>`)).join("");
+  for (const b of el.querySelectorAll("[data-crumb]")) b.addEventListener("click", () => exitComp(+b.dataset.crumb));
+}
+
+/* ── Making comps ── */
+function newCompId() { let id; do id = "comp_" + uid(); while (getComp(id)); return id; }
+/** Precompose the selection: the clips move into a new comp, a comp clip takes their place. */
+function precomposeSelection() {
+  const sel = withLinked(selectedClips());
+  if (!sel.length) { toast("Select the clips to put in a composition"); return; }
+  if (sel.some(isClipLocked)) { toastLocked(); return; }
+  pushUndo();
+  const doc = { clips: project.clips, comps: project.comps || [], tracks: project.tracks, width: project.width, height: project.height, disabledTracks: project.disabledTracks || [] };
+  const { comp, clip } = CompLib.precompose(doc, sel.map((c) => c.id), { id: newCompId(), name: "Comp " + ((project.comps || []).length + 1) });
+  project.clips = doc.clips; project.comps = doc.comps;
+  clip.id = "c_" + uid(); clip.props = { ...DEFAULT_PROPS, fit: "none" };
+  for (const c of comp.clips) c.props = { ...DEFAULT_PROPS, ...(c.props || {}) };
+  runtime.compGen = (runtime.compGen || 0) + 1;
+  setSelection([clip.id]);
+  state.dirtyTimeline = true;
+  scheduleSave(); renderBin(); renderInspector();
+  toast(`${sel.length} clip${sel.length > 1 ? "s" : ""} now live in "${comp.name}" — double-click it to open`);
+}
+function addNewComp() {
+  project.comps = project.comps || [];
+  pushUndo();
+  const comp = { id: newCompId(), name: "Comp " + (project.comps.length + 1), width: project.width, height: project.height, duration: 5, clips: [], tracks: CompLib.DEFAULT_TRACKS.map((t) => ({ ...t })) };
+  project.comps.push(comp);
+  runtime.compGen = (runtime.compGen || 0) + 1;
+  scheduleSave(); renderBin();
+  return comp;
+}
+function addCompClip(comp, trackId, at) {
+  const track = trackId && TRACKS.some((t) => t.id === trackId && t.kind === "video") ? trackId : "V1";
+  if (isTrackLocked(track)) { toast(`${track} is locked`); return; }
+  const here = compCtxId();
+  if (here && CompLib.wouldCycle(state.compCtx ? state.compCtx.root : project, here, comp.id)) { toast("A composition can't contain itself"); return; }
+  pushUndo();
+  const c = { id: "c_" + uid(), mediaId: null, kind: "comp", compId: comp.id, track, start: Math.max(0, at), in: 0, duration: comp.duration, name: comp.name, props: { ...DEFAULT_PROPS, fit: "none" } };
+  project.clips.push(c);
+  runtime.compGen = (runtime.compGen || 0) + 1;
+  selectClip(c.id); scheduleSave(); renderInspector();
+}
+/** The Project tab's compositions: drag one onto the timeline, double-click to open it. */
+function makeCompItem(comp) {
+  const item = document.createElement("div");
+  item.className = "bin-item comp-item";
+  item.draggable = true;
+  const used = CompLib.usages(state.compCtx ? state.compCtx.root : project, comp.id).length;
+  item.innerHTML = `<div class="bin-thumb comp-thumb">▣</div>
+    <div class="bin-meta"><div class="bin-name"></div><div class="bin-sub">Composition · ${comp.width}×${comp.height} · ${comp.duration}s${used ? ` · used ${used}×` : ""}</div></div>
+    <button class="btn tiny accent lib-add" title="Add at the playhead">＋</button>`;
+  item.querySelector(".bin-name").textContent = comp.name;
+  item.title = "Drag onto the timeline · double-click to open and edit";
+  item.addEventListener("dragstart", (e) => { e.dataTransfer.setData("text/fablecut-comp", comp.id); e.dataTransfer.effectAllowed = "copy"; });
+  item.addEventListener("dblclick", () => enterComp(comp.id));
+  item.querySelector(".lib-add").addEventListener("click", (e) => { e.stopPropagation(); addCompClip(comp, "V1", state.time); });
+  item.addEventListener("contextmenu", (e) => { e.preventDefault(); showCompMenu(e.clientX, e.clientY, comp); });
+  return item;
+}
+function showCompMenu(x, y, comp) {
+  hideTrackCtxMenu();
+  const menu = document.createElement("div");
+  menu.className = "ctx-menu"; menu.id = "trackCtxMenu";
+  const item = (label, run, why) => {
+    const b = document.createElement("button");
+    b.type = "button"; b.className = "ctx-item"; b.innerHTML = `<span>${escapeHtml(label)}</span>`;
+    if (why) { b.disabled = true; b.title = why; } else b.addEventListener("click", () => { hideTrackCtxMenu(); run(); });
+    menu.appendChild(b);
+  };
+  item("Open", () => enterComp(comp.id));
+  item("Duplicate", () => {
+    pushUndo();
+    const copy = JSON.parse(JSON.stringify(comp)); copy.id = newCompId(); copy.name = `${comp.name} copy`.slice(0, 80);
+    project.comps.push(copy); runtime.compGen = (runtime.compGen || 0) + 1; scheduleSave(); renderBin();
+  });
+  // an open comp's live clips are on the timeline, not yet in its entry
+  item("Save as template", () => saveCompAsTemplate(comp.id === compCtxId() ? { ...comp, clips: project.clips, tracks: project.tracks } : comp));
+  const used = CompLib.usages(state.compCtx ? state.compCtx.root : project, comp.id).length;
+  item("Delete", () => {
+    pushUndo();
+    project.comps = project.comps.filter((c) => c.id !== comp.id);
+    runtime.compGen = (runtime.compGen || 0) + 1; scheduleSave(); renderBin();
+  }, used ? `Used ${used}× — remove its clips first` : state.compCtx && state.compCtx.path.includes(comp.id) ? "It is open" : null);
+  document.body.appendChild(menu);
+  trackCtxMenu = menu;
+  menu.style.left = Math.max(6, Math.min(x, innerWidth - menu.offsetWidth - 6)) + "px";
+  menu.style.top = Math.max(6, Math.min(y, innerHeight - menu.offsetHeight - 6)) + "px";
+}
+function compSectionHtml(c, row) {
+  const comp = getComp(c.compId);
+  if (!comp) return `<div class="insp-section"><h3>Composition</h3><p class="cl-note">Its composition (${escapeHtml(c.compId || "?")}) is missing.</p></div>`;
+  return `<div class="insp-section" data-comp-section><h3>Composition</h3>
+    ${row("Comp", `<span class="insp-ctrls"><input type="text" data-comp-name value="${escapeHtml(comp.name)}" maxlength="80" title="The composition's name (every clip using it shows it)"> <button type="button" class="btn tiny" data-comp-open title="Open it on the timeline (or double-click the clip)">Open</button></span>`)}
+    ${row("Size", `<span class="insp-ctrls"><input type="number" data-comp-w min="16" max="8192" value="${comp.width}" style="max-width:72px"> × <input type="number" data-comp-h min="16" max="8192" value="${comp.height}" style="max-width:72px"></span>`)}
+    ${row("Length (s)", `<input type="number" data-comp-dur min="0.05" step="0.01" value="${comp.duration}">`)}
+    ${row("Background", `<span class="insp-ctrls"><input type="color" data-comp-bg value="${comp.background || "#000000"}"><button type="button" class="btn tiny${comp.background ? "" : " toggle on"}" data-comp-bgoff title="Transparent: what is under the comp clip shows through">None</button></span>`)}
+    <p class="cl-note">The clip shows the comp from its In point (${(+c.in || 0).toFixed(2)} s). Every clip using this comp changes when you edit it.</p>
+  </div>`;
+}
+function bindCompControls(c) {
+  const root = els.inspector.querySelector("[data-comp-section]");
+  const comp = root && getComp(c.compId);
+  if (!comp) return;
+  const edit = (fn) => { pushUndo(); fn(); runtime.compGen = (runtime.compGen || 0) + 1; state.dirtyTimeline = true; scheduleSave(); renderBin(); renderInspector(); };
+  root.querySelector("[data-comp-open]")?.addEventListener("click", () => enterComp(comp.id, c));
+  root.querySelector("[data-comp-name]")?.addEventListener("change", (e) => { const n = e.target.value.trim(); if (n) edit(() => { comp.name = n.slice(0, 80); }); });
+  root.querySelector("[data-comp-w]")?.addEventListener("change", (e) => { const v = Math.round(+e.target.value); if (v >= 16 && v <= 8192) edit(() => { comp.width = v; }); });
+  root.querySelector("[data-comp-h]")?.addEventListener("change", (e) => { const v = Math.round(+e.target.value); if (v >= 16 && v <= 8192) edit(() => { comp.height = v; }); });
+  root.querySelector("[data-comp-dur]")?.addEventListener("change", (e) => { const v = +e.target.value; if (v > 0.05) edit(() => { comp.duration = +v.toFixed(3); }); });
+  root.querySelector("[data-comp-bg]")?.addEventListener("change", (e) => edit(() => { comp.background = e.target.value; }));
+  root.querySelector("[data-comp-bgoff]")?.addEventListener("click", () => edit(() => { delete comp.background; }));
+}
+
+/* ── Animation presets and templates (the data and the maths live in templates.js) ── */
+const Tpl = self.FableCutTemplates;
+const savedLib = { presets: [], templates: [] };   // the user's own, from library/presets and library/templates
+async function fetchSaved(kind) {
+  try { const r = await fetch("/api/" + kind, { cache: "no-store" }); savedLib[kind] = r.ok ? await r.json() : []; }
+  catch { savedLib[kind] = []; }
+  return savedLib[kind];
+}
+const findTemplate = (id) => Tpl.findTemplate(id, savedLib.templates);
+const TEMPLATE_ICONS = {
+  "Lower thirds": '<rect x="2" y="13" width="14" height="5" rx="1" fill="#ffd166"/><rect x="2" y="13" width="2" height="5" fill="#fff"/><rect x="6" y="15" width="7" height="1.4" rx=".7" fill="#111"/>',
+  "Logo animations": '<circle cx="12" cy="11" r="7" fill="none" stroke="#7b6cff" stroke-width="2.2"/><rect x="9" y="8" width="6" height="6" rx="1.5" fill="#ff7ac8"/>',
+  Social: '<rect x="7" y="2.5" width="10" height="19" rx="2" fill="none" stroke="#22d3ee" stroke-width="2"/><rect x="9" y="8" width="6" height="2" rx="1" fill="#fff"/><rect x="9" y="12" width="4" height="1.5" rx=".7" fill="#fff"/>',
+  Saved: '<path d="M6 3h12v18l-6-4-6 4z" fill="#ffd166"/>',
+};
+/* The bin's Templates tab: lower thirds, logo animations and social layouts, then the user's own. */
+function renderTemplatesTab() {
+  els.libList.innerHTML = "";
+  let group = null;
+  for (const t of [...Tpl.TEMPLATES, ...savedLib.templates]) {
+    if (t.group !== group) {
+      group = t.group;
+      const h = document.createElement("div");
+      h.className = "lib-group";
+      h.textContent = group;
+      els.libList.appendChild(h);
+    }
+    const item = document.createElement("div");
+    item.className = "bin-item lib-item";
+    item.draggable = true;
+    item.title = "Drag onto the timeline or click ＋ — then edit its fields in the Inspector";
+    item.innerHTML = `<div class="bin-thumb shape-thumb"><svg viewBox="0 0 24 24" aria-hidden="true">${TEMPLATE_ICONS[t.group] || TEMPLATE_ICONS.Saved}</svg></div>
+      <div class="bin-meta"><div class="bin-name"></div><div class="bin-sub"></div></div>
+      <button class="btn tiny accent lib-add" title="Add at the playhead">＋</button>`;
+    item.querySelector(".bin-name").textContent = t.name;
+    item.querySelector(".bin-sub").textContent = `${t.width}×${t.height} · ${t.duration}s · ${t.fields.map((f) => f.label).join(", ") || "no fields"}`;
+    item.addEventListener("dragstart", (e) => { e.dataTransfer.setData("text/fablecut-template", t.id); e.dataTransfer.effectAllowed = "copy"; });
+    item.addEventListener("dblclick", () => addTemplateClip(t, null, state.time));
+    item.querySelector(".lib-add").addEventListener("click", (e) => { e.stopPropagation(); addTemplateClip(t, null, state.time); });
+    els.libList.appendChild(item);
+  }
+  if (!savedLib.templates.length) {
+    const p = document.createElement("p");
+    p.className = "lib-hint";
+    p.textContent = "Right-click a composition in the Project tab → Save as template to keep your own here.";
+    els.libList.appendChild(p);
+  }
+}
+/** Place a template: its own comp (so its fields are this copy's alone) and a comp clip at `at`. */
+function addTemplateClip(t, trackId, at) {
+  const track = trackId && TRACKS.some((x) => x.id === trackId && x.kind === "video") ? trackId : shapeTrack();
+  if (!track || isTrackLocked(track)) { toast(track ? `${track} is locked` : "V1–V3 are locked — unlock a video track to add a template"); return; }
+  const snap = JSON.stringify({ clips: project.clips, markers: project.markers || [], comps: project.comps || [], media: project.media });
+  const had = new Set(project.media.map((m) => m.id));
+  project.comps = project.comps || [];
+  let r;
+  try { r = Tpl.instantiate(project, t, { compId: newCompId(), start: Math.max(0, at), track }); }
+  catch (err) { restoreSnapshot(snap); toast(err.message); return; }   // put back any media it added; history untouched
+  pushUndo(snap);
+  const { comp, clip } = r;
+  for (const x of comp.clips) {
+    x.props = { ...DEFAULT_PROPS, ...(x.kind === "comp" ? { fit: "none" } : {}), ...(x.props || {}) };
+    if (x.kind === "text") ensureFont(x.props.font);
+  }
+  clip.id = "c_" + uid();
+  clip.props = { ...DEFAULT_PROPS, ...clip.props };
+  project.clips.push(clip);
+  for (const m of project.media) if (!had.has(m.id)) loadMediaMetadata(m).then(() => { state.dirtyTimeline = true; }).catch(() => { });
+  runtime.compGen = (runtime.compGen || 0) + 1;
+  selectClip(clip.id); scheduleSave(); renderBin(); renderInspector();
+  toast(`${comp.name} placed — edit its fields in the Inspector`);
+}
+/** Set the canvas size (the aspect menu and a template's "Use … canvas" button). */
+function setCanvasSize(w, h) {
+  project.width = w; project.height = h;
+  els.preview.width = w; els.preview.height = h;
+  if (project.exportFrame) project.exportFrame = normalizeExportFrame(project.exportFrame, w, h);
+  updateMonitorRes();
+  syncAspectSel();
+  syncExportFrameSel();
+  updateExportFrameOverlay();
+  seekMediaWhilePaused();
+  scheduleSave();
+}
+/** The Inspector's Template section on a placed template: its fields, its length, and the canvas it was made for. */
+function templateSectionHtml(c, row) {
+  const comp = getComp(c.compId), tpl = comp && comp.template;
+  if (!tpl) return "";
+  const pics = project.media.filter((m) => m.kind === "image" || m.kind === "svg" || m.kind === "video");
+  const fields = (tpl.fields || []).map((f) => {
+    const v = Tpl.fieldValue(comp, f), label = escapeHtml(f.label);
+    if (f.type === "text") return row(label, `<textarea data-tf="${escapeHtml(f.key)}" rows="${String(v || "").length > 28 ? 2 : 1}" maxlength="2000">${escapeHtml(v || "")}</textarea>`);
+    if (f.type === "color") return row(label, `<input type="color" data-tf="${escapeHtml(f.key)}" value="${/^#[0-9a-f]{6}/i.test(v || "") ? v.slice(0, 7) : "#ffffff"}">`);
+    return row(label, `<select data-tf="${escapeHtml(f.key)}" title="Import your picture (or drop it in the bin), then pick it here">${pics.map((m) => `<option value="${m.id}" ${m.id === v ? "selected" : ""}>${escapeHtml(m.name)}</option>`).join("")}</select>`);
+  }).join("");
+  const sameShape = Math.abs(comp.width / comp.height - project.width / project.height) < 0.01;
+  return `<div class="insp-section" data-tpl-section><h3>Template</h3>
+    ${fields}
+    ${row("Length (s)", `<input type="number" data-tf-dur min="0.5" step="0.1" value="${comp.duration}" title="Longer holds longer — the exit keeps its timing at the end">`)}
+    ${sameShape || state.compCtx ? "" : row("Canvas", `<button type="button" class="btn tiny" data-tf-canvas title="Make the project canvas ${comp.width}×${comp.height}, the size this template was made for">Use ${comp.width}×${comp.height}</button>`)}
+    <p class="cl-note">These fields belong to this copy (its comp "${escapeHtml(comp.name)}"). Open it to change anything else.</p>
+  </div>`;
+}
+function bindTemplateControls(c) {
+  const root = els.inspector.querySelector("[data-tpl-section]");
+  const comp = root && getComp(c.compId);
+  if (!comp || !comp.template) return;
+  let undoTaken = false;
+  const refresh = () => { runtime.compGen = (runtime.compGen || 0) + 1; state.dirtyTimeline = true; scheduleSave(); };
+  const set = (key, value) => {
+    if (!undoTaken) { pushUndo(); undoTaken = true; }
+    try { Tpl.setField(comp, key, value, project); } catch (err) { toast(err.message); return; }
+    refresh();
+  };
+  for (const el of root.querySelectorAll("[data-tf]")) {
+    const key = el.dataset.tf;
+    if (el.tagName === "SELECT") el.addEventListener("change", () => {
+      const m = getMedia(el.value);
+      set(key, el.value);
+      if (m && !runtime.mediaAux.get(m.id)?.svgText && !runtime.mediaAux.get(m.id)?.img) loadMediaMetadata(m).then(refresh).catch(() => { });
+    });
+    else el.addEventListener("input", () => set(key, el.value));
+    el.addEventListener("change", () => { undoTaken = false; renderBin(); });
+  }
+  root.querySelector("[data-tf-dur]")?.addEventListener("change", (e) => {
+    const v = +e.target.value, old = comp.duration;
+    const snap = undoSnapshot();   // recorded only once the new length is accepted
+    try { Tpl.retime(comp, +v.toFixed(3)); } catch (err) { toast(err.message); renderInspector(); return; }
+    pushUndo(snap);
+    // clips that showed the comp to its end keep doing so
+    for (const x of project.clips) if (x.kind === "comp" && x.compId === comp.id && Math.abs((+x.in || 0) + x.duration - old) < 1e-3) x.duration = +(comp.duration - (+x.in || 0)).toFixed(4);
+    refresh(); renderBin(); renderInspector();
+  });
+  root.querySelector("[data-tf-canvas]")?.addEventListener("click", () => { setCanvasSize(comp.width, comp.height); renderInspector(); toast(`Canvas is now ${comp.width}×${comp.height}`); });
+}
+/** Save comp `comp` to library/templates as a template (its titles' text and its pictures become fields). */
+async function saveCompAsTemplate(comp) {
+  let template;
+  try { template = Tpl.templateFromComp(comp, { media: project.media }); } catch (err) { toast(err.message); return; }
+  try {
+    const r = await fetch("/api/templates", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ template }) });
+    const j = await r.json();
+    if (!r.ok) throw new Error(j.error || r.statusText);
+    toast(`Saved "${j.name}" to ${j.file}`);
+  } catch (err) { toast("Couldn't save the template: " + err.message); return; }
+  await fetchSaved("templates");
+  if (state.binTab === "templates") renderTemplatesTab();
+}
+
+/** Inspector rows (in Motion): put a preset on the selected clips, or save this clip's animation as one. */
+function presetRowsHtml(c, row) {
+  const opts = (anchor, first) => {
+    const own = savedLib.presets.filter((p) => p.anchor === anchor);
+    const list = (l) => l.map((p) => `<option value="${escapeHtml(p.id)}">${escapeHtml(p.name)}</option>`).join("");
+    return `<select data-preset="${anchor}"><option value="">${first}</option>${list(Tpl.PRESETS.filter((p) => p.anchor === anchor))}${own.length ? `<optgroup label="Saved">${list(own)}</optgroup>` : ""}</select>`;
+  };
+  return row("Presets", `<span class="insp-ctrls">${opts("in", "In…")}${opts("out", "Out…")}</span>`)
+    + row("", `<span class="insp-ctrls">${opts("at", "At playhead…")}${opts("whole", "Loop…")}</span>`)
+    + row("Save as preset", `<span class="insp-ctrls"><input type="text" data-preset-name maxlength="60" placeholder="Name" style="max-width:110px">
+      <select data-preset-anchor title="In: from the clip's start · Out: up to its end · Loop: the whole clip"><option value="in">In</option><option value="out">Out</option><option value="whole">Loop</option></select>
+      <button type="button" class="btn tiny" data-preset-save title="Save this clip's keyframes to library/presets — every project can use it">Save</button></span>`);
+}
+function bindPresetControls(c) {
+  for (const s of els.inspector.querySelectorAll("[data-preset]")) s.addEventListener("change", () => {
+    const p = Tpl.findPreset(s.value, savedLib.presets);
+    s.value = "";
+    if (!p) return;
+    const clips = selectedClips().filter(isVisualClip);
+    const targets = clips.length ? clips : [c];
+    if (targets.some(isGroupLocked)) { toastLocked(); return; }
+    pushUndo();
+    for (const x of targets) Tpl.applyPreset(x, p, { at: state.time - x.start });
+    inspPropGen++; state.dirtyTimeline = true;
+    scheduleSave(); renderInspector();
+    toast(`${p.name} on ${targets.length} clip${targets.length > 1 ? "s" : ""}`);
+  });
+  els.inspector.querySelector("[data-preset-save]")?.addEventListener("click", async () => {
+    const name = els.inspector.querySelector("[data-preset-name]").value.trim();
+    const anchor = els.inspector.querySelector("[data-preset-anchor]").value;
+    if (!name) { toast("Name the preset first"); return; }
+    const times = Object.values(c.keyframes || {}).flat().map((x) => x.t);
+    if (!times.length) { toast("This clip has no keyframes to save"); return; }
+    const from = anchor === "out" ? Math.min(...times) : 0, to = anchor === "in" ? Math.max(...times) : c.duration;
+    let preset;
+    try { preset = Tpl.presetFromClip(c, { name, anchor, from, to }); } catch (err) { toast(err.message); return; }
+    try {
+      const r = await fetch("/api/presets", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ preset }) });
+      const j = await r.json();
+      if (!r.ok) throw new Error(j.error || r.statusText);
+      toast(`Saved "${j.name}" to ${j.file}`);
+    } catch (err) { toast("Couldn't save the preset: " + err.message); return; }
+    await fetchSaved("presets");
+    renderInspector();
+  });
+}
+window.addEventListener("keydown", (e) => {
+  if (e.key !== "Escape" || !state.compCtx) return;
+  const tg = e.target;
+  if (tg && (tg.tagName === "INPUT" || tg.tagName === "TEXTAREA" || tg.tagName === "SELECT" || tg.isContentEditable)) return;
+  if (state.selIds.size || shapeUi.sel || shapeUi.tool || maskUi.sel >= 0 || maskUi.tool || runtime.anchorTool) return;   // Esc steps back through those first
+  e.preventDefault(); exitComp();
+});
+
+/* ── Shape layers (props.shapes — math in motion.js) ── */
+const shapeNorm = new WeakMap();   // stored list → validated list
+function clipShapes(c) {
+  const list = c && c.props && c.props.shapes;
+  if (!Array.isArray(list) || !list.length) return null;
+  let n = shapeNorm.get(list);
+  if (n === undefined) { n = Motion.normalizeShapes(list); shapeNorm.set(list, n); }
+  return n;
+}
+/** The shape layer's items at timeline time t (keys resolved). */
+function shapeItemsAt(c, t) { const l = clipShapes(c); return l ? Motion.shapesAt(l, t - c.start) : null; }
 function isVisualClip(c) { return c && c.kind !== "adjust" && c.kind !== "audio"; }
 /* Screen-space handle positions for the selection overlay. Each handle is
    clamped into the visible canvas (inset by its own size) so it stays visible
@@ -8904,7 +9532,10 @@ function drawSelectionOverlay(W, H, t) {
   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);
+  if (shapeEditActive(c) && drawShapeOverlay(c, W, H, t)) return;   // a picked shape item replaces the box
+  drawMotionPathOverlay(c, W, H, t);
+  const ep = evalProps(c, t), b = clipBounds(c, ep, W, H, t);
+  if (c.kind === "null") drawNullMark(b, W, 1);
   const lw = Math.max(2, W / 640);
   const hd = overlayHandles(b, W, H), hs = hd.hs;
   ctx2d.setTransform(1, 0, 0, 1, 0, 0);
@@ -8923,6 +9554,12 @@ function drawSelectionOverlay(W, H, t) {
   }
   ctx2d.beginPath(); ctx2d.arc(hd.rotate.x, hd.rotate.y, hs * 1.1, 0, Math.PI * 2);
   ctx2d.fillStyle = "#ffce5c"; ctx2d.fill(); ctx2d.stroke();
+  // the anchor point: what x / y place and what rotation and scale turn around
+  const ap = anchorScreenPt(c, ep, W, H, t), ar = hs * (runtime.anchorTool ? 1.3 : 0.9);
+  ctx2d.lineWidth = lw; ctx2d.strokeStyle = runtime.anchorTool ? "#ffce5c" : "#ffffff";
+  ctx2d.beginPath(); ctx2d.arc(ap.x, ap.y, ar, 0, Math.PI * 2);
+  ctx2d.moveTo(ap.x - ar * 1.7, ap.y); ctx2d.lineTo(ap.x + ar * 1.7, ap.y);
+  ctx2d.moveTo(ap.x, ap.y - ar * 1.7); ctx2d.lineTo(ap.x, ap.y + ar * 1.7); ctx2d.stroke();
   ctx2d.restore();
 }
 function canvasPt(e) {
@@ -8939,9 +9576,13 @@ function toLocal(pt, b) {
 function pickClipAt(pt, W, H) {
   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;
+  for (const nulls of [false, true]) {   // a null (invisible) is picked only where nothing else is
+    for (let i = seq.length - 1; i >= 0; i--) {
+      const c = seq[i];
+      if ((c.kind === "null") !== nulls) continue;
+      const 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;
+    }
   }
   return null;
 }
@@ -8975,11 +9616,14 @@ els.preview.addEventListener("pointerdown", (e) => {
   if (isVisualClip(cur) && activeAt(cur, state.time)) {
     const b = clipBounds(cur, evalProps(cur, state.time), W, H), lp = toLocal(pt, b);
     const hd = overlayHandles(b, W, H), grab = hd.hs * 1.8;
-    if (Math.hypot(pt.x - hd.rotate.x, pt.y - hd.rotate.y) <= grab) {
+    if (runtime.anchorTool) {   // Anchor tool: the anchor point follows the pointer, the picture stays put
+      const p0 = propsAtPlayhead(cur);
+      canvasDrag = { mode: "anchor", id: cur.id, p0, m: layerScreenMatrix(cur, p0, W, H, state.time).scale(Motion.contentScale(cur, p0)).inverse() };
+    } else if (Math.hypot(pt.x - hd.rotate.x, pt.y - hd.rotate.y) <= grab) {
       const ep = propsAtPlayhead(cur);
       canvasDrag = { mode: "rotate", id: cur.id, startRot: +ep.rotation || 0, startAng: Math.atan2(pt.y - b.cy, pt.x - b.cx), cx: b.cx, cy: b.cy };
     } else if (hd.corners.some((h) => Math.abs(pt.x - h.x) <= grab && Math.abs(pt.y - h.y) <= grab)) {
-      if (cur.kind === "text") {
+      if (cur.kind === "text" && !cur.props.textPath) {   // a title on a path scales; its box is the path's
         canvasDrag = {
           ...beginTextBoxDrag(cur, pt, W, H),
           seedBox: !hasTextBox(cur.props),
@@ -9029,7 +9673,8 @@ function updateCanvasCursor(e) {
   const W = els.preview.width, H = els.preview.height, pt = canvasPt(e);
   const cur = getClip(state.selId);
   let cursor = "default";
-  if (isVisualClip(cur) && activeAt(cur, state.time) && !state.playing && !state.exporting) {
+  if (runtime.anchorTool && isVisualClip(cur) && activeAt(cur, state.time) && !state.playing && !state.exporting) cursor = "crosshair";
+  else if (isVisualClip(cur) && activeAt(cur, state.time) && !state.playing && !state.exporting) {
     const b = clipBounds(cur, evalProps(cur, state.time), W, H);
     const hd = overlayHandles(b, W, H), grab = hd.hs * 1.8;
     const corner = hd.corners.find((h) => Math.abs(pt.x - h.x) <= grab && Math.abs(pt.y - h.y) <= grab);
@@ -9060,8 +9705,9 @@ els.preview.addEventListener("pointermove", (e) => {
     }
   }
   if (canvasDrag.mode === "move") {
-    setAnimProp(c, "x", Math.round(canvasDrag.startX + (pt.x - canvasDrag.startPt.x)));
-    setAnimProp(c, "y", Math.round(canvasDrag.startY + (pt.y - canvasDrag.startPt.y)));
+    const d = screenDeltaToParent(c, pt.x - canvasDrag.startPt.x, pt.y - canvasDrag.startPt.y);
+    setAnimProp(c, "x", Math.round(canvasDrag.startX + d.x));
+    setAnimProp(c, "y", Math.round(canvasDrag.startY + d.y));
   } else if (canvasDrag.mode === "box") {
     const aspect = canvasDrag.aspect || 1;
     const lockAR = e.shiftKey;
@@ -9072,8 +9718,8 @@ els.preview.addEventListener("pointermove", (e) => {
     const env = transOffsetAt(c, state.time);
     if (e.ctrlKey || e.metaKey) {
       // Ctrl/Cmd: resize from center (all corners move).
-      const b = clipBounds(c, evalProps(c, state.time), W, H), lp = toLocal(pt, b);
-      let bw = Math.abs(lp.x) * 2, bh = Math.abs(lp.y) * 2;
+      const b = clipBounds(c, evalProps(c, state.time), W, H), lp = toLocal(pt, b), pk = parentScaleAt(c);
+      let bw = Math.abs(lp.x) * 2 / pk, bh = Math.abs(lp.y) * 2 / pk;
       if (lockAR) {
         if (bw / aspect >= bh) bh = bw / aspect;
         else bw = bh * aspect;
@@ -9110,11 +9756,22 @@ els.preview.addEventListener("pointermove", (e) => {
       const c2 = Math.cos(rot), s2 = Math.sin(rot);
       const freeX = fix.x + ldx * c2 - ldy * s2;
       const freeY = fix.y + ldx * s2 + ldy * c2;
-      setAnimProp(c, "x", Math.round((fix.x + freeX) / 2 - W / 2 - env.x));
-      setAnimProp(c, "y", Math.round((fix.y + freeY) / 2 - H / 2 - env.y));
-      c.props.boxW = +Math.abs(ldx).toFixed(1);
-      c.props.boxH = +Math.abs(ldy).toFixed(1);
+      // the box's centre on screen → the clip's x / y (its parents and anchor undone)
+      const pos = posForScreenCentre(c, propsAtPlayhead(c), (fix.x + freeX) / 2, (fix.y + freeY) / 2, W, H);
+      setAnimProp(c, "x", Math.round(pos.x - env.x));
+      setAnimProp(c, "y", Math.round(pos.y - env.y));
+      const pk = parentScaleAt(c);
+      c.props.boxW = +(Math.abs(ldx) / pk).toFixed(1);
+      c.props.boxH = +(Math.abs(ldy) / pk).toFixed(1);
     }
+  } else if (canvasDrag.mode === "anchor") {
+    let q = canvasDrag.m.transformPoint(new DOMPoint(pt.x, pt.y));
+    const box = layerBox(c, canvasDrag.p0, W, H, state.time), as = Motion.contentScale(c, canvasDrag.p0);
+    const snap = Math.max(6, W / 120) * Math.hypot(canvasDrag.m.a, canvasDrag.m.b);   // screen px → layer px
+    const cx = box.ox / as, cy = box.oy / as;
+    if (e.shiftKey || Math.hypot(q.x - cx, q.y - cy) < snap) q = { x: cx, y: cy };   // snaps to the picture's centre
+    const v = Motion.anchorMoveValues(c, canvasDrag.p0, Math.round(q.x), Math.round(q.y));
+    for (const k of ["anchorX", "anchorY", "x", "y"]) setAnimProp(c, k, v[k]);
   } else if (canvasDrag.mode === "scale") {
     const b = clipBounds(c, evalProps(c, state.time), W, H), lp = toLocal(pt, b);
     setAnimProp(c, "scale", clamp(+(canvasDrag.startScale * (Math.hypot(lp.x, lp.y) / canvasDrag.startDist)).toFixed(3), 0.05, 12));
@@ -9136,9 +9793,77 @@ els.preview.addEventListener("pointerup", endCanvasDrag);
 els.preview.addEventListener("pointercancel", endCanvasDrag);
 
 function drawClip(c, W, H, t, asMatte = false) {
+  if (c.kind === "null") return;   // a null only carries a transform for its children
+  if (+c.props.motionBlur > 0 && c.kind !== "adjust" && drawMotionBlurred(c, W, H, t, asMatte)) return;
+  drawClipCut(c, W, H, t, asMatte, false);
+}
+/** The clip cut by its masks / matte. raw: no opacity or blend (a motion-blur sample). */
+function drawClipCut(c, W, H, t, asMatte, raw) {
   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);
+  if (masks || matte) drawMaskedClip(c, W, H, t, masks, matte, raw);
+  else drawClipPicture(c, W, H, t, raw);
+}
+/* ── Motion blur: the clip drawn at sub-frame times across the shutter and
+   averaged (premultiplied, "lighter" at 1/n each), then composited once with its
+   opacity and blend. Preview and export share it; preview playback uses fewer samples. */
+function drawMotionBlurred(c, W, H, t, asMatte) {
+  const fps = projectFps() || 30, span = clamp(+c.props.motionBlur, 0, 720) / 360 / fps;
+  let n = clamp(Math.round(+c.props.motionBlurSamples || 8), 2, 32);
+  // playback: as many samples as fit in ~12 ms (all of them on a fast machine); a paused frame and export use them all
+  const live = state.playing && !state.exporting, cost = live && (runtime.mbCost ||= new Map()).get(c.id);
+  if (cost) n = clamp(Math.floor(12 / cost), 2, n);
+  const began = live ? performance.now() : 0;
+  const lo = c.start, hi = clipEnd(c) - 1e-4;
+  const t0 = clamp(t - span / 2, lo, hi), t1 = clamp(t + span / 2, lo, hi);
+  if (t1 - t0 < 1e-6 || !clipMovesBetween(c, t0, t1, W, H)) return false;
+  // a blurred clip on a matte track blurs inside this one's samples: each depth has its own buffers
+  const depth = runtime.mbDepth = (runtime.mbDepth || 0) + 1;
+  const acc = maskCtx("mbAcc" + depth, W, H), smp = maskCtx("mbSmp" + depth, W, H);
+  const main = ctx2d;
+  try {
+    acc.setTransform(1, 0, 0, 1, 0, 0); acc.globalAlpha = 1; acc.globalCompositeOperation = "source-over"; acc.filter = "none";
+    acc.clearRect(0, 0, W, H);
+    acc.fillStyle = "#000";
+    for (let i = 0; i < n; i++) {
+      const ts = t0 + (t1 - t0) * i / (n - 1);
+      smp.setTransform(1, 0, 0, 1, 0, 0); smp.globalAlpha = 1; smp.globalCompositeOperation = "source-over"; smp.filter = "none";
+      smp.clearRect(0, 0, W, H);
+      ctx2d = smp;
+      try { drawClipCut(c, W, H, ts, asMatte, true); } finally { ctx2d = main; }
+      // running average, exact in transparent areas too: acc = acc·(1−a) + sample·a with a = 1/(i+1).
+      // (Adding every sample at 1/n instead rounds each 8-bit contribution and bands the result.)
+      const a = 1 / (i + 1);
+      if (i > 0) { acc.globalCompositeOperation = "destination-in"; acc.globalAlpha = 1 - a; acc.fillRect(0, 0, W, H); }
+      acc.globalCompositeOperation = "lighter"; acc.globalAlpha = a;
+      acc.drawImage(smp.canvas, 0, 0);
+    }
+  } finally { runtime.mbDepth = depth - 1; ctx2d = main; }
+  acc.globalCompositeOperation = "source-over"; acc.globalAlpha = 1;
+  if (live) { const per = (performance.now() - began) / n, prev = runtime.mbCost.get(c.id); runtime.mbCost.set(c.id, prev ? prev * 0.7 + per * 0.3 : per); }
+  const p = evalProps(c, t);
+  main.save();
+  main.setTransform(1, 0, 0, 1, 0, 0);
+  main.globalAlpha = clamp(p.opacity, 0, 1);
+  main.globalCompositeOperation = p.blend && p.blend !== "normal" && BLEND_MODES.includes(p.blend) ? p.blend : "source-over";
+  main.filter = "none";
+  main.drawImage(acc.canvas, 0, 0);
+  main.restore();
+  return true;
+}
+/** Does the clip move (or its shapes change) between t0 and t1? Still clips draw once. */
+function clipMovesBetween(c, t0, t1, W, H) {
+  if (c.kind === "shape" && (shapeKeyed(c) || c.keyframes?.trimStart || c.keyframes?.trimEnd || c.keyframes?.trimOffset)) return true;
+  const a = clipBounds(c, evalProps(c, t0), W, H, t0), b = clipBounds(c, evalProps(c, t1), W, H, t1);
+  const corners = (q) => [[-1, -1], [1, -1], [1, 1], [-1, 1]].map(([sx, sy]) => {
+    const cs = Math.cos(q.rot), sn = Math.sin(q.rot), x = sx * q.hw, y = sy * q.hh;
+    return [q.cx + x * cs - y * sn, q.cy + x * sn + y * cs];
+  });
+  const A = corners(a), B = corners(b);
+  return A.some((p, i) => Math.hypot(p[0] - B[i][0], p[1] - B[i][1]) > 0.5);
+}
+function shapeKeyed(c) {
+  const any = (list) => (list || []).some((it) => (it.keys && it.keys.length) || (it.type === "group" && any(it.items)));
+  return any(c.props.shapes);
 }
 /** 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
@@ -9169,7 +9894,10 @@ function drawClipPicture(c, W, H, t, 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.translate(W / 2, H / 2);
+  const pm = parentM(c, t);
+  if (pm) ctx2d.transform(pm[0], pm[1], pm[2], pm[3], pm[4], pm[5]);
+  ctx2d.translate(+p.x || 0, +p.y || 0);
   ctx2d.rotate((p.rotation || 0) * Math.PI / 180);
   if (p.shake > 0) { // deterministic multi-sine handheld/impact shake
     const a = +p.shake, tt = t * clamp(+p.shakeSpeed || 8, 0.5, 40) * Math.PI * 2;
@@ -9178,9 +9906,23 @@ function drawClipPicture(c, W, H, t, layered) {
       Math.cos(tt * 1.7) * a * 0.5 + Math.sin(tt * 3.13) * a * 0.35);
     ctx2d.rotate(Math.sin(tt * 0.9) * a * 0.0022);
   }
+  if (+p.anchorX || +p.anchorY) {   // the anchor point sits at x / y; rotation and scale turn around it
+    const as = Motion.contentScale(c, p);
+    ctx2d.translate(-(+p.anchorX || 0) * as, -(+p.anchorY || 0) * as);
+  }
+  if (c.kind === "shape") {
+    const s = +p.scale || 1;
+    ctx2d.scale(s, s);
+    geom = noteMaskGeom(c, ctx2d.getTransform(), -W / 2, -H / 2, W, H);   // masks live in the canvas-sized layer box
+    ctx2d.filter = buildFilter(p);
+    Motion.draw(ctx2d, shapeItemsAt(c, t), [+p.trimStart || 0, p.trimEnd == null ? 100 : +p.trimEnd, +p.trimOffset || 0]);
+    ctx2d.filter = "none";
+    ctx2d.restore();
+    return { p, geom };
+  }
   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);
+    const b = layerBox(c, p, W, H, t);   // a path's box is usually off the origin (ox / oy)
+    geom = noteMaskGeom(c, ctx2d.getTransform(), (b.ox || 0) - b.hw, (b.oy || 0) - b.hh, b.hw * 2, b.hh * 2);
     drawText(c, p, t - c.start);
     ctx2d.restore();
     return { p, geom };
@@ -9195,6 +9937,9 @@ function drawClipPicture(c, W, H, t, layered) {
   } else if (c.kind === "video") {
     src = getClipEl(c);
     if (src) { sw = src.videoWidth; sh = src.videoHeight; }
+  } else if (c.kind === "comp") {
+    src = renderComp(c, t);
+    if (src) { sw = src.width; sh = src.height; }
   }
   if (src && sw && sh) {
     // source crop (percent per edge)
@@ -9257,6 +10002,7 @@ function drawClipPicture(c, W, H, t, layered) {
 const Mask = self.FableCutMask;
 const maskCv = {};
 function maskCtx(key, W, H) {
+  if (runtime.compDepth) key += ":" + runtime.compDepth;
   let cv = maskCv[key];
   if (!cv) cv = maskCv[key] = document.createElement("canvas");
   if (cv.width !== W) cv.width = W;
@@ -9292,7 +10038,7 @@ const videoTrackIds = () => TRACKS.filter((tr) => tr.kind === "video").map((tr)
 /** { 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());
+  const track = Mask.matteTrackFor(c, runtime.scope ? runtime.scope.videoTracks : 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. */
@@ -9308,7 +10054,7 @@ function trackMatteAt(matte, W, H, t) {
   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" &&
+  const clips = (runtime.scope ? runtime.scope.clips : project.clips).filter((x) => x.track === matte.track && clipRenders(x) && 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); }
@@ -9357,7 +10103,7 @@ function makeLumaFilter() {
   } 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) {
+function drawMaskedClip(c, W, H, t, masks, matte = null, raw = false) {
   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);
@@ -9379,7 +10125,7 @@ function drawMaskedClip(c, W, H, t, masks, matte = null) {
   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
+  if (c.kind !== "adjust" && !raw) {   // an adjustment layer already drew at its own opacity; a raw sample composites later
     main.globalAlpha = clamp(p.opacity, 0, 1);
     if (p.blend && p.blend !== "normal" && BLEND_MODES.includes(p.blend)) main.globalCompositeOperation = p.blend;
   }
@@ -9910,6 +10656,7 @@ function bindMaskControls(c) {
   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;
+    if (maskUi.sel >= 0) { shapeUi.sel = null; shapeUi.tool = null; }
     rerender();
   });
   for (const b of root.querySelectorAll("[data-mact]")) b.addEventListener("click", () => {
@@ -10288,6 +11035,1064 @@ window.addEventListener("keydown", (e) => {
   }
 }, true);
 
+/* ── Shape layers, nulls and parenting in the editor ──
+   A shape clip draws props.shapes (motion.js). The Shape layer section lists
+   its items; picking one shows its box, knob and points on the monitor. Pen:
+   click to place points (drag pulls handles), click the first point to close,
+   Enter to finish an open path. Item values with ◆ keys animate per value. */
+const SHAPE_PRESETS = {
+  rect: { label: "Rectangle", item: { type: "rect", w: 420, h: 240, radius: 24, fill: "#ffd166" } },
+  ellipse: { label: "Ellipse", item: { type: "ellipse", w: 260, h: 260, fill: "#7b6cff" } },
+  polygon: { label: "Polygon", item: { type: "polygon", sides: 6, w: 260, h: 260, fill: "#22d3ee" } },
+  star: { label: "Star", item: { type: "star", sides: 5, inner: 0.45, w: 280, h: 280, fill: "#ff7ac8" } },
+  line: { label: "Line", item: { type: "line", points: [[-220, 0], [220, 0]], stroke: "#ffffff", strokeWidth: 10 } },
+};
+const shapeUi = { clip: null, sel: null, pt: -1, tool: null, pen: null, drag: null };
+const SHAPE_ROWS_UI = {
+  x: ["X", -2000, 2000, 1], y: ["Y", -2000, 2000, 1], rotation: ["Rotation", -360, 360, 0.5], scale: ["Scale", 0.05, 6, 0.01],
+  opacity: ["Opacity", 0, 1, 0.01], w: ["Width", 0, 2000, 1], h: ["Height", 0, 2000, 1], radius: ["Radius", 0, 500, 1],
+  inner: ["Inner", 0.05, 1, 0.01], strokeWidth: ["Stroke px", 0, 100, 0.5],
+  trimStart: ["Trim start", 0, 100, 0.5], trimEnd: ["Trim end", 0, 100, 0.5], trimOffset: ["Trim offset", -100, 100, 0.5],
+};
+const pathKey = (path) => (path || []).join(".");
+const samePath = (a, b) => !!a && !!b && pathKey(a) === pathKey(b);
+function trackFree(id) { return !isTrackLocked(id); }
+function shapeTrack() { return ["V2", "V3", "V1"].find((id) => TRACKS.some((tr) => tr.id === id) && trackFree(id)) || null; }
+function newVisualClip(kind, name, track, props = {}) {
+  return { id: "c_" + uid(), mediaId: null, kind, track, start: state.time, in: 0, duration: 4, name, props: { ...DEFAULT_PROPS, ...props } };
+}
+function addShapeLayer(kind) {
+  const track = shapeTrack();
+  if (!track) { toast("V1–V3 are locked — unlock a video track to add a shape"); return; }
+  pushUndo();
+  const pre = SHAPE_PRESETS[kind];
+  const c = newVisualClip("shape", pre ? pre.label : "Shape", track);
+  const list = pre ? Motion.normalizeShapes([pre.item]) : null;
+  if (list) c.props.shapes = list;
+  project.clips.push(c);
+  selectClip(c.id);
+  Object.assign(shapeUi, { clip: c.id, sel: list ? [0] : null, pt: -1, tool: pre ? null : "pen", pen: null, drag: null });
+  if (!pre && state.playing) pause();
+  scheduleSave(); renderInspector();
+  if (!pre) toast("Pen: click points on the monitor (drag to curve); click the first point to close, Enter for an open path");
+}
+function addNull() {
+  const track = ["V3", "V2", "V1"].find((id) => TRACKS.some((tr) => tr.id === id) && trackFree(id));
+  if (!track) { toast("V1–V3 are locked — unlock a video track to add a null"); return; }
+  pushUndo();
+  const c = newVisualClip("null", "Null", track);
+  project.clips.push(c);
+  selectClip(c.id); scheduleSave(); renderInspector();
+}
+/* The bin's Shapes tab: each row adds a new layer at the playhead (a selected
+   shape layer takes more items from its own Shape layer section). */
+const SHAPE_ICONS = {
+  rect: '<rect x="3" y="6" width="18" height="12" rx="2" fill="#ffd166"/>',
+  ellipse: '<circle cx="12" cy="12" r="8" fill="#7b6cff"/>',
+  polygon: '<polygon points="12,3 20,7.5 20,16.5 12,21 4,16.5 4,7.5" fill="#22d3ee"/>',
+  star: '<polygon points="12,2.5 14.6,9 21.5,9.3 16.1,13.6 18,20.3 12,16.4 6,20.3 7.9,13.6 2.5,9.3 9.4,9" fill="#ff7ac8"/>',
+  line: '<line x1="4" y1="18" x2="20" y2="6" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>',
+  pen: '<path d="M4 18 C 8 4, 16 4, 20 16" fill="none" stroke="#5ad1ff" stroke-width="2.5" stroke-linecap="round"/><rect x="2.5" y="16.5" width="3" height="3" fill="#fff"/><rect x="18.5" y="14.5" width="3" height="3" fill="#fff"/>',
+  null: '<rect x="5" y="5" width="14" height="14" fill="none" stroke="#ff6b6b" stroke-width="2"/><path d="M12 8v8M8 12h8" stroke="#ff6b6b" stroke-width="2"/>',
+};
+function renderShapesTab() {
+  const rows = [
+    ...Object.entries(SHAPE_PRESETS).map(([k, pre]) => ({ k, name: pre.label, sub: "Shape layer", run: () => addShapeLayer(k) })),
+    { k: "pen", name: "Pen path", sub: "Click points on the monitor", run: () => addShapeLayer("pen") },
+    { k: "null", name: "Null object", sub: "Invisible parent for other clips", run: addNull },
+  ];
+  els.libList.innerHTML = "";
+  for (const r of rows) {
+    const item = document.createElement("div");
+    item.className = "bin-item lib-item";
+    item.title = r.k === "null" ? "Add a null object at the playhead — parent clips to it to move them together" : `Add a ${r.name.toLowerCase()} layer at the playhead`;
+    item.innerHTML = `<div class="bin-thumb shape-thumb"><svg viewBox="0 0 24 24" aria-hidden="true">${SHAPE_ICONS[r.k]}</svg></div>
+      <div class="bin-meta"><div class="bin-name">${escapeHtml(r.name)}</div><div class="bin-sub">${escapeHtml(r.sub)}</div></div>
+      <button class="btn tiny accent lib-add" title="Add at playhead">＋</button>`;
+    item.addEventListener("dblclick", r.run);
+    item.querySelector(".lib-add").addEventListener("click", r.run);
+    els.libList.appendChild(item);
+  }
+}
+/** Parent the selected visual clips to a new null at their centre (a layer group). */
+function parentSelectionToNull() {
+  const sel = selectedClips().filter((x) => isVisualClip(x) && x.kind !== "null");
+  if (!sel.length) return;
+  if (sel.some(isGroupLocked)) { toastLocked(); return; }
+  const track = ["V3", "V2", "V1"].find((id) => TRACKS.some((tr) => tr.id === id) && trackFree(id));
+  if (!track) { toast("V1–V3 are locked — unlock a video track for the null"); return; }
+  pushUndo();
+  const W = els.preview.width, H = els.preview.height;
+  let sx = 0, sy = 0;
+  for (const x of sel) { const b = clipBounds(x, evalProps(x, clamp(state.time, x.start, x.start + x.duration - 1e-3)), W, H); sx += b.cx; sy += b.cy; }
+  const start = Math.min(...sel.map((x) => x.start)), end = Math.max(...sel.map((x) => x.start + x.duration));
+  const n = { ...newVisualClip("null", "Null", track, { x: Math.round(sx / sel.length - W / 2), y: Math.round(sy / sel.length - H / 2) }), start, duration: +(end - start).toFixed(4) };
+  project.clips.push(n);
+  for (const x of sel) setClipParent(x, n.id);
+  selectClip(n.id); scheduleSave(); renderInspector();
+  toast(`${sel.length} clip${sel.length > 1 ? "s" : ""} now follow the null — move, turn or scale it`);
+}
+/** Change a clip's parent, keeping it where it is at the playhead (static values; keyed ones get a key). */
+function setClipParent(c, parentId) {
+  if (parentId && Motion.wouldCycle(c.id, parentId, getClip)) { toast("That would parent the clip to itself"); return false; }
+  const t = clamp(state.time, c.start, c.start + c.duration);
+  const v = Motion.reparentValues(c, parentId || null, getClip, t);
+  if (parentId) c.parent = parentId; else delete c.parent;
+  for (const [k, val] of Object.entries(v)) {
+    if (c.keyframes?.[k]?.length && playheadOverClip(c)) setAnimProp(c, k, val);
+    else if (!c.keyframes?.[k]?.length) c.props[k] = val;
+  }
+  state.dirtyTimeline = true; inspPropGen++;
+  return true;
+}
+/** Clips this clip may be parented to: other visual clips that are not its children. */
+function parentCandidates(c) {
+  return project.clips.filter((x) => x.id !== c.id && isVisualClip(x) && !Motion.wouldCycle(c.id, x.id, getClip));
+}
+const clipShortLabel = (x) => x.track + " · " + (x.kind === "text" ? (x.props.text || "").split("\n")[0] : x.name || x.kind);
+function parentRowHtml(c) {
+  const cands = parentCandidates(c), cur = c.parent && getClip(c.parent);
+  const opts = [`<option value="">None</option>`, ...cands.map((x) => `<option value="${x.id}" ${x.id === c.parent ? "selected" : ""}>${escapeHtml(clipShortLabel(x))}${x.kind === "null" ? " (null)" : ""}</option>`)];
+  if (c.parent && !cur) opts.push(`<option value="${escapeHtml(c.parent)}" selected>Missing clip</option>`);
+  return `<div class="insp-row"><label title="Move, turn and scale with another clip (its opacity and effects are not inherited)">Parent</label><select data-parent>${opts.join("")}</select></div>`;
+}
+function anchorRowsHtml(c, p, row) {
+  return `<div class="insp-row"><label>Anchor</label><span class="insp-ctrls">
+      <button type="button" class="btn tiny${runtime.anchorTool ? " toggle on" : ""}" data-anchor-tool title="Drag on the monitor to move the anchor point — the picture stays put (Shift: snap to its centre)">✥ Move</button>
+      <button type="button" class="btn tiny" data-anchor-centre title="Put the anchor point back on the picture's centre, keeping the picture where it is">Centre</button></span></div>
+    ${row("Anchor X", `<input type="number" data-k="anchorX" value="${fmtInspNum(p.anchorX)}">`, "anchorX")}
+    ${row("Anchor Y", `<input type="number" data-k="anchorY" value="${fmtInspNum(p.anchorY)}">`, "anchorY")}`;
+}
+function bindParentAnchorControls(c) {
+  const root = els.inspector;
+  root.querySelector("[data-parent]")?.addEventListener("change", (e) => {
+    if (isGroupLocked(c)) { toastLocked(); renderInspector(); return; }
+    pushUndo();
+    setClipParent(c, e.target.value || null);
+    scheduleSave(); renderInspector();
+  });
+  root.querySelector("[data-anchor-tool]")?.addEventListener("click", () => { runtime.anchorTool = !runtime.anchorTool; state.dirtyTimeline = true; renderInspector(); });
+  root.querySelector("[data-anchor-centre]")?.addEventListener("click", () => {
+    if (isGroupLocked(c)) { toastLocked(); return; }
+    if (!playheadOverClip(c)) { toast("Move the playhead over the clip"); return; }
+    pushUndo();
+    const p = propsAtPlayhead(c), box = layerBox(c, p, els.preview.width, els.preview.height, state.time), as = Motion.contentScale(c, p);
+    const v = Motion.anchorMoveValues(c, p, Math.round(box.ox / as), Math.round(box.oy / as));
+    for (const k of ["anchorX", "anchorY", "x", "y"]) setAnimProp(c, k, v[k]);
+    scheduleSave(); renderInspector();
+  });
+}
+
+/* ── The Shape layer section ── */
+function shapeList(c) { return clipShapes(c) || []; }
+function shapeUiFor(c) {
+  if (!c || shapeUi.clip !== c.id) Object.assign(shapeUi, { clip: c ? c.id : null, sel: null, pt: -1, tool: null, pen: null, drag: null });
+  if (shapeUi.sel && !Motion.getItem(editList(c), shapeUi.sel)) { shapeUi.sel = null; shapeUi.pt = -1; }
+  return shapeUi;
+}
+function writeShapes(c, list) {
+  const n = list && list.length ? Motion.normalizeShapes(list) : null;
+  if (n) c.props.shapes = n; else delete c.props.shapes;
+  state.dirtyTimeline = true; inspPropGen++;
+}
+const shapeLocalT = (c) => state.time - c.start;
+function shapeKeyIndex(keys, t) {
+  const tol = 0.5 / (projectFps() || 30);
+  return keys ? keys.findIndex((k) => Math.abs(k.t - t) < tol) : -1;
+}
+const isAnimated = (it, k) => !!(it.keys && it.keys.some((x) => x[k] != null));
+/** The selected item as it is at the playhead. */
+function shapeNow(c, path = shapeUi.sel) { return path ? Motion.getItem(editItemsAt(c, state.time), path) : null; }
+/** Change item `path`; values that are animated land in a key at the playhead. */
+function writeShapeSet(c, path, set) {
+  const list = editList(c), it = Motion.getItem(list, path);
+  if (!it) return;
+  const t = shapeLocalT(c), statics = {}, keyed = {};
+  for (const [k, v] of Object.entries(set)) (Motion.KEYED.includes(k) && isAnimated(it, k) ? keyed : statics)[k] = v;
+  const next = { ...statics };
+  if (Object.keys(keyed).length) {
+    // like setAnimProp: off the clip there is no "at the playhead" to key
+    if (!playheadOverClip(c)) { toast("Move the playhead over the clip to edit its keyframes"); return false; }
+    const keys = it.keys.map((k) => ({ ...k })), kt = +clamp(t, 0, c.duration).toFixed(4);
+    let j = shapeKeyIndex(keys, kt);
+    if (j < 0) { keys.push({ t: kt }); keys.sort((a, b) => a.t - b.t); j = shapeKeyIndex(keys, kt); }
+    Object.assign(keys[j], keyed);
+    next.keys = keys;
+  }
+  writeEditList(c, Motion.updateItem(list, path, (x) => Motion.mergeItem(x, next) || x));
+}
+/** ◆ on an item value: key it at the playhead, or remove the key there. */
+function toggleShapeKey(c, path, k) {
+  const list = editList(c), it = Motion.getItem(list, path), now = shapeNow(c, path);
+  if (!it || !now || now[k] == null) return;
+  const t = shapeLocalT(c), keys = (it.keys || []).map((x) => ({ ...x })), j = shapeKeyIndex(keys, t);
+  const set = {};
+  if (j >= 0 && keys[j][k] != null) {
+    delete keys[j][k];
+    if (!Object.keys(keys[j]).some((p) => Motion.KEYED.includes(p))) keys.splice(j, 1);
+    if (!keys.some((x) => x[k] != null)) set[k] = k === "points" ? now.points.map((q) => q.map((v) => +v.toFixed(3))) : now[k];   // last key gone: keep the value
+  } else {
+    const v = k === "points" ? now.points.map((q) => q.map((x) => +x.toFixed(3))) : typeof now[k] === "number" ? +now[k].toFixed(4) : now[k];
+    if (j >= 0) keys[j][k] = v; else { keys.push({ t: +clamp(t, 0, c.duration).toFixed(4), [k]: v }); keys.sort((a, b) => a.t - b.t); }
+  }
+  set.keys = keys.length ? keys : null;
+  writeEditList(c, Motion.updateItem(list, path, (x) => Motion.mergeItem(x, set) || x));
+}
+function shapeItemLabel(it, path) { return it.name || `${it.type[0].toUpperCase() + it.type.slice(1)} ${path.map((i) => i + 1).join(".")}`; }
+function shapeSectionHtml(c, p, row) {
+  const ui = shapeUiFor(c), list = shapeList(c), full = Motion.countItems(list) >= Motion.MAX_ITEMS;
+  const btn = (attr, label, title, on, dis) => `<button type="button" class="btn tiny${on ? " toggle on" : ""}" ${attr} title="${title}" ${dis ? "disabled" : ""}>${label}</button>`;
+  const chips = Motion.itemPaths(list).map((path) => {
+    const it = Motion.getItem(list, path);
+    return `<button type="button" class="btn tiny cl-chip${samePath(path, ui.sel) ? " toggle on" : ""}${it.on === false ? " off" : ""}" data-ssel="${pathKey(path)}"
+      title="${escapeHtml(it.type)} — click to edit on the monitor">${"› ".repeat(path.length - 1)}${escapeHtml(shapeItemLabel(it, path))}</button>`;
+  }).join("");
+  const slider = (k, min, max, step, unit = "") => {
+    const shown = fmtInspNum(p[k], step);
+    return row(KF_GRAPH_LABEL[k], `<input type="range" data-k="${k}" min="${min}" max="${max}" step="${step}" value="${shown}" title="Ctrl/Cmd-click: reset to default">
+      <span class="val" data-val="${k}" data-unit="${unit}">${shown}${unit}</span>`, k);
+  };
+  let html = `<div class="insp-section" data-shape-section><h3>Shape layer</h3>
+    <div class="cl-row">${Object.entries(SHAPE_PRESETS).map(([k, pre]) => btn(`data-sadd="${k}"`, "+ " + pre.label, `Add a ${pre.label.toLowerCase()} to this layer`, false, full)).join("")}
+      ${btn('data-stool="pen"', "Pen", "Click points on the monitor (drag to curve); click the first point to close, Enter for an open path", ui.tool === "pen", full)}</div>
+    ${ui.tool === "pen" ? `<p class="cl-note">Pen: click to add points, drag to curve. Click the first point to close, Enter keeps the path open. Backspace / Ctrl+Z removes the last point, Esc cancels.</p>` : ""}
+    ${list.length ? `<div class="cl-row shape-items">${chips}</div>` : ui.tool ? "" : `<p class="cl-note">No shapes yet — add one above.</p>`}
+    ${slider("trimStart", 0, 100, 0.5, "%")}${slider("trimEnd", 0, 100, 0.5, "%")}${slider("trimOffset", -100, 100, 0.5, "%")}`;
+  const raw = ui.sel && Motion.getItem(list, ui.sel), now = raw && shapeNow(c);
+  if (raw && now) {
+    const t = shapeLocalT(c), j = shapeKeyIndex(raw.keys, t);
+    const kbtn = (k) => `<button type="button" class="kf-btn${isAnimated(raw, k) ? " has" : ""}${j >= 0 && raw.keys[j][k] != null ? " on" : ""}" data-skey="${k}" title="Key this value at the playhead / remove the key there">◆</button>`;
+    const srow = (k) => {
+      const [lab, min, max, step] = SHAPE_ROWS_UI[k];
+      return `<div class="insp-row cp-row"><label class="cp-label">${lab}</label>
+        <input type="range" data-sk="${k}" min="${min}" max="${max}" step="${step}" value="${now[k]}">
+        <input type="number" class="cp-num" data-sknum="${k}" step="${step}" value="${fmtG(now[k], step)}">${kbtn(k)}</div>`;
+    };
+    const color = (k, lab) => `<div class="insp-row"><label>${lab}</label><span class="insp-ctrls">
+        <input type="color" data-scolor="${k}" value="${now[k] && now[k] !== "none" ? now[k].slice(0, 7) : "#ffffff"}">
+        ${btn(`data-snone="${k}"`, "None", `No ${lab.toLowerCase()}`, now[k] === "none")}${kbtn(k)}</span></div>`;
+    const path = ui.sel, inGroup = path.length > 1, siblings = inGroup ? Motion.getItem(list, path.slice(0, -1)).items : list, i = path[path.length - 1];
+    const own = Motion.OWN[raw.type];
+    html += `<div class="cl-row"><input type="text" class="cl-name" data-sname value="${escapeHtml(raw.name || "")}" placeholder="${escapeHtml(shapeItemLabel({ type: raw.type }, path))}" maxlength="40" title="Item name">
+        ${btn('data-sact="on"', raw.on === false ? "Off" : "On", "Item on / off", raw.on !== false)}
+        ${btn('data-sact="up"', "↑", "Move down the stack (drawn earlier)", false, i === 0)}
+        ${btn('data-sact="down"', "↓", "Move up the stack (drawn later)", false, i >= siblings.length - 1)}
+        ${btn('data-sact="dup"', "Copy", "Duplicate", false, full)}
+        ${btn('data-sact="group"', "Group", "Put this item in a new group (move, turn, scale and trim them together)", false, full || path.length >= Motion.MAX_DEPTH)}
+        ${raw.type === "group" ? btn('data-sact="ungroup"', "Ungroup", "Take the items out of this group") : ""}
+        ${inGroup ? btn('data-sact="out"', "Out", "Move this item out of its group") : ""}
+        ${btn('data-sact="del"', "Delete", "Delete this item")}
+        ${raw.keys ? btn('data-sact="clearkeys"', "Clear keys", "Remove every key (keeps the item as it is at the playhead)") : ""}</div>
+      ${srow("x")}${srow("y")}${srow("rotation")}${srow("scale")}${srow("opacity")}
+      ${own.includes("w") ? srow("w") + srow("h") : ""}${own.includes("radius") ? srow("radius") : ""}
+      ${own.includes("sides") ? `<div class="insp-row"><label>Points</label><input type="number" data-ssides min="3" max="64" step="1" value="${raw.sides}"></div>` : ""}
+      ${own.includes("inner") ? srow("inner") : ""}
+      ${raw.type === "path" ? `<div class="insp-row"><label>Closed</label><input type="checkbox" data-sclosed ${raw.closed !== false ? "checked" : ""}>${kbtn("points")}</div>` : ""}
+      ${raw.type !== "group" ? color("fill", "Fill") + color("stroke", "Stroke") + srow("strokeWidth") +
+        `<div class="insp-row"><label>Ends / joins</label><span class="insp-ctrls"><select data-scap>${Motion.CAPS.map((v) => `<option ${raw.lineCap === v ? "selected" : ""}>${v}</option>`).join("")}</select>
+          <select data-sjoin>${Motion.JOINS.map((v) => `<option ${raw.lineJoin === v ? "selected" : ""}>${v}</option>`).join("")}</select></span></div>` : ""}
+      ${srow("trimStart")}${srow("trimEnd")}${srow("trimOffset")}
+      <p class="cl-note">On the monitor: drag the item to move it, the knob turns it (Shift: 15° steps), the corners resize it${raw.type === "line" || raw.type === "path"
+        ? "; drag a point to move it, its handles to curve it (Alt: break the pair), Alt-drag a point to pull new handles" + (raw.type === "path" ? ", Ctrl-click the outline to add a point, double-click a point to remove it" : "")
+        : ""}. Esc deselects.</p>`;
+  }
+  return html + `</div>`;
+}
+function bindShapeControls(c) {
+  const root = els.inspector.querySelector("[data-shape-section]");
+  if (!root) return;
+  const guard = () => { if (isGroupLocked(c)) { toastLocked(); return false; } return true; };
+  const rerender = () => { state.dirtyTimeline = true; renderInspector(); };
+  const sel = () => shapeUi.sel;
+  const edit = (set) => { writeShapeSet(c, sel(), set); scheduleSave(); };
+  for (const b of root.querySelectorAll("[data-sadd]")) b.addEventListener("click", () => {
+    if (!guard()) return;
+    pushUndo();
+    const list = shapeList(c).slice();
+    list.push(SHAPE_PRESETS[b.dataset.sadd].item);
+    writeShapes(c, list);
+    Object.assign(shapeUi, { sel: [shapeList(c).length - 1], pt: -1, tool: null, pen: null });
+    maskUi.sel = -1;
+    scheduleSave(); rerender();
+  });
+  root.querySelector('[data-stool="pen"]')?.addEventListener("click", () => {
+    if (!guard()) return;
+    shapeUi.tool = shapeUi.tool === "pen" ? null : "pen"; shapeUi.pen = null; shapeUi.sel = null; maskUi.sel = -1; maskUi.tool = null;
+    if (shapeUi.tool && state.playing) pause();
+    if (shapeUi.tool && !activeAt(c, state.time)) toast("Move the playhead over the clip, then draw on the monitor");
+    rerender();
+  });
+  for (const b of root.querySelectorAll("[data-ssel]")) b.addEventListener("click", () => {
+    const path = b.dataset.ssel.split(".").map(Number);
+    shapeUi.sel = samePath(shapeUi.sel, path) ? null : path; shapeUi.pt = -1; shapeUi.tool = null;
+    if (shapeUi.sel) { maskUi.sel = -1; maskUi.tool = null; }
+    rerender();
+  });
+  for (const b of root.querySelectorAll("[data-sact]")) b.addEventListener("click", () => {
+    const a = b.dataset.sact, path = sel(), list = shapeList(c), it = path && Motion.getItem(list, path);
+    if (!it || !guard()) return;
+    pushUndo();
+    const parentPath = path.slice(0, -1), i = path[path.length - 1];
+    const withSiblings = (fn) => parentPath.length
+      ? Motion.updateItem(list, parentPath, (g) => ({ ...g, items: fn(g.items.slice()) }))
+      : fn(list.slice());
+    let next = list;
+    if (a === "on") next = Motion.updateItem(list, path, (x) => Motion.mergeItem(x, { on: x.on === false ? null : false }));
+    else if (a === "del") { next = Motion.updateItem(list, path, () => null); shapeUi.sel = null; }
+    else if (a === "dup") { next = withSiblings((s) => { s.splice(i + 1, 0, JSON.parse(JSON.stringify({ ...it, name: it.name ? `${it.name} copy`.slice(0, 40) : undefined }))); return s; }); shapeUi.sel = [...parentPath, i + 1]; }
+    else if (a === "up" || a === "down") {
+      const j = a === "up" ? i - 1 : i + 1;
+      next = withSiblings((s) => { [s[i], s[j]] = [s[j], s[i]]; return s; });
+      shapeUi.sel = [...parentPath, j];
+    } else if (a === "group") next = Motion.updateItem(list, path, (x) => ({ type: "group", x: x.x, y: x.y, items: [{ ...x, x: 0, y: 0 }] }));
+    else if (a === "ungroup") {
+      // the children keep their place: fold the group's transform into each (position, rotation, scale)
+      const M = Motion.itemMatrix(it);
+      const kids = (it.items || []).map((k) => {
+        const m = Motion.mul(M, Motion.itemMatrix(k));
+        return { ...k, x: +m[4].toFixed(3), y: +m[5].toFixed(3), rotation: +(Math.atan2(m[1], m[0]) * 180 / Math.PI).toFixed(3),
+          scale: +Math.hypot(m[0], m[1]).toFixed(4), opacity: +((k.opacity ?? 1) * (it.opacity ?? 1)).toFixed(4) };
+      });
+      next = withSiblings((s) => { s.splice(i, 1, ...kids); return s; });
+      shapeUi.sel = kids.length ? [...parentPath, i] : null;
+    } else if (a === "out") {
+      const gm = Motion.itemMatrix(Motion.getItem(list, parentPath)), m = Motion.mul(gm, Motion.itemMatrix(it));
+      const moved = { ...it, x: +m[4].toFixed(3), y: +m[5].toFixed(3), rotation: +(Math.atan2(m[1], m[0]) * 180 / Math.PI).toFixed(3), scale: +Math.hypot(m[0], m[1]).toFixed(4) };
+      const gp = parentPath.slice(0, -1), gi = parentPath[parentPath.length - 1];
+      next = Motion.updateItem(list, path, () => null);
+      next = gp.length ? Motion.updateItem(next, gp, (g) => { const s = g.items.slice(); s.splice(gi + 1, 0, moved); return { ...g, items: s }; })
+        : (() => { const s = next.slice(); s.splice(gi + 1, 0, moved); return s; })();
+      shapeUi.sel = [...gp, gi + 1];
+    } else if (a === "clearkeys") {
+      const now = shapeNow(c, path), set = { keys: null };
+      for (const k of Motion.KEYED) if (isAnimated(it, k)) set[k] = k === "points" ? now.points.map((q) => q.map((v) => +v.toFixed(3))) : now[k];
+      next = Motion.updateItem(list, path, (x) => Motion.mergeItem(x, set));
+    }
+    writeShapes(c, next); shapeUi.pt = -1; scheduleSave(); rerender();
+  });
+  for (const b of root.querySelectorAll("[data-skey]")) b.addEventListener("click", () => {
+    if (!guard() || !sel()) return;
+    if (!playheadOverClip(c)) { toast("Move the playhead over the clip to key it"); return; }
+    pushUndo(); toggleShapeKey(c, sel(), b.dataset.skey); scheduleSave(); rerender();
+  });
+  root.querySelector("[data-sname]")?.addEventListener("change", (e) => { if (!guard()) return; pushUndo(); edit({ name: e.target.value.trim() || null }); rerender(); });
+  root.querySelector("[data-ssides]")?.addEventListener("change", (e) => { const v = Math.round(+e.target.value); if (!guard() || !(v >= 3 && v <= 64)) return; pushUndo(); edit({ sides: v }); rerender(); });
+  root.querySelector("[data-sclosed]")?.addEventListener("change", (e) => { if (!guard()) return; pushUndo(); edit({ closed: e.target.checked ? null : false }); rerender(); });
+  root.querySelector("[data-scap]")?.addEventListener("change", (e) => { if (!guard()) return; pushUndo(); edit({ lineCap: e.target.value }); rerender(); });
+  root.querySelector("[data-sjoin]")?.addEventListener("change", (e) => { if (!guard()) return; pushUndo(); edit({ lineJoin: e.target.value }); rerender(); });
+  for (const inp of root.querySelectorAll("[data-scolor]")) {
+    const k = inp.dataset.scolor;
+    inp.addEventListener("pointerdown", () => { if (guard()) pushUndo(); });
+    inp.addEventListener("input", () => {
+      if (isGroupLocked(c)) return;
+      const set = { [k]: inp.value };
+      if (k === "stroke" && !(shapeNow(c)?.strokeWidth > 0)) set.strokeWidth = 6;
+      edit(set);
+    });
+    inp.addEventListener("change", rerender);
+  }
+  for (const b of root.querySelectorAll("[data-snone]")) b.addEventListener("click", () => {
+    if (!guard()) return;
+    pushUndo(); edit({ [b.dataset.snone]: "none" }); rerender();
+  });
+  for (const r of root.querySelectorAll("[data-sk]")) {
+    const k = r.dataset.sk;
+    r.addEventListener("pointerdown", () => { if (guard()) pushUndo(); });
+    r.addEventListener("input", () => {
+      if (isGroupLocked(c)) return;
+      edit({ [k]: +r.value });
+      const n = root.querySelector(`[data-sknum="${k}"]`); if (n) n.value = fmtG(+r.value, SHAPE_ROWS_UI[k][3]);
+    });
+  }
+  for (const n of root.querySelectorAll("[data-sknum]")) {
+    const k = n.dataset.sknum;
+    n.addEventListener("change", () => {
+      const x = parseFloat(n.value);
+      if (!Number.isFinite(x) || !guard()) return;
+      pushUndo(); edit({ [k]: x }); rerender();
+      document.activeElement?.blur?.();
+    });
+  }
+}
+/** Animated items: the rows and ◆ follow the playhead (called from the inspector sync). */
+function syncShapeInspector(c) {
+  const root = els.inspector.querySelector("[data-shape-section]");
+  if (!root || shapeUi.clip !== c.id || !shapeUi.sel || shapeUi.drag) return;
+  const raw = Motion.getItem(editList(c), shapeUi.sel), now = shapeNow(c);
+  if (!raw || !now) return;
+  const active = document.activeElement, j = shapeKeyIndex(raw.keys, shapeLocalT(c));
+  for (const k of Object.keys(SHAPE_ROWS_UI)) {
+    const r = root.querySelector(`[data-sk="${k}"]`), n = root.querySelector(`[data-sknum="${k}"]`);
+    if (r && r !== active) r.value = now[k];
+    if (n && n !== active) n.value = fmtG(now[k], SHAPE_ROWS_UI[k][3]);
+  }
+  for (const b of root.querySelectorAll("[data-skey]")) b.classList.toggle("on", j >= 0 && raw.keys[j][b.dataset.skey] != null);
+  for (const inp of root.querySelectorAll("[data-scolor]")) {
+    const v = now[inp.dataset.scolor];
+    if (inp !== active && v && v !== "none") inp.value = v.slice(0, 7);
+  }
+}
+
+/* ── Shape items on the monitor ── */
+function shapeEditActive(c) {
+  return !!c && (c.kind === "shape" || (c.kind === "text" && !!clipTextPath(c)) || (c.kind === "text" && shapeUi.tool === "pen")) && shapeUi.clip === c.id && state.selId === c.id && (!!shapeUi.sel || !!shapeUi.tool) &&
+    activeAt(c, state.time) && !state.playing && !maskEditActive(c);
+}
+/** Layer px → canvas px for a shape clip at the playhead. */
+function shapeLayerMatrix(c, W, H, t = state.time) {
+  const p = evalProps(c, t);
+  return layerScreenMatrix(c, p, W, H, t).scale(Motion.contentScale(c, p));
+}
+/* The item list the editor works on: a shape layer's items, or a title's path as a one-item list. */
+function editList(c) { return c.kind === "text" ? (clipTextPath(c) ? [clipTextPath(c)] : []) : shapeList(c); }
+function editItemsAt(c, t) { return c.kind === "text" ? (clipTextPath(c) ? [textPathAt(c, t)] : null) : shapeItemsAt(c, t); }
+function writeEditList(c, list) {
+  if (c.kind !== "text") { writeShapes(c, list); return; }
+  const n = list && list[0] ? Motion.normalizeTextPath(list[0]) : null;
+  if (n) c.props.textPath = n; else delete c.props.textPath;
+  state.dirtyTimeline = true; inspPropGen++;
+}
+/** The picked item's frames and handles in canvas px. */
+function shapeHandles(c, W, H) {
+  const items = editItemsAt(c, state.time), path = shapeUi.sel, it = path && Motion.getItem(items, path);
+  if (!it) return null;
+  const L = shapeLayerMatrix(c, W, H);
+  const F = L.multiply(new DOMMatrix(Motion.itemFrame(items, path.slice(0, -1))));   // the space the item's x / y live in
+  const I = F.multiply(new DOMMatrix(Motion.itemMatrix(it)));                          // the item's own frame
+  const own = it.type === "group" ? Motion.bounds(it.items) : Motion.bounds([{ ...it, x: 0, y: 0, rotation: 0, scale: 1, opacity: 1, on: true }]);
+  const b = own || { x0: -20, y0: -20, x1: 20, y1: 20 };
+  const at = (x, y) => { const q = I.transformPoint(new DOMPoint(x, y)); return { x: q.x, y: q.y }; };
+  const corners = [[b.x0, b.y0], [b.x1, b.y0], [b.x1, b.y1], [b.x0, b.y1]].map(([x, y]) => ({ ...at(x, y), lx: x, ly: y }));
+  const topMid = at((b.x0 + b.x1) / 2, b.y0), up = at((b.x0 + b.x1) / 2, b.y0 - 1), d = Math.hypot(up.x - topMid.x, up.y - topMid.y) || 1;
+  const gap = Math.max(24, W / 34), inset = Math.max(8, W / 110);
+  const knob = { x: clamp(topMid.x + (up.x - topMid.x) / d * gap, inset, W - inset), y: clamp(topMid.y + (up.y - topMid.y) / d * gap, inset, H - inset) };
+  const ol = it.type === "group" ? null : Motion.outline(it);
+  const A = ol ? ol.A.map((a) => ({ a: at(a.x, a.y), i: at(a.ix, a.iy), o: at(a.ox, a.oy) })) : [];
+  return { it, F, I, corners, topMid, knob, centre: at(0, 0), outline: ol, A, editable: it.type === "line" || it.type === "path" };
+}
+function drawShapeOverlay(c, W, H) {
+  const lw = Math.max(1.5, W / 800), hs = Math.max(5, W / 170);
+  const L = shapeLayerMatrix(c, W, H);
+  ctx2d.save();
+  ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.lineJoin = "round";
+  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 = shapeUi.sel ? shapeHandles(c, W, H) : null;
+  if (h) {
+    if (h.outline) {
+      const pts = Motion.flatten(h.outline.A, h.outline.closed, 24).map(([x, y]) => { const q = h.I.transformPoint(new DOMPoint(x, y)); return [q.x, q.y]; });
+      ctx2d.lineWidth = lw * 2.2; ctx2d.strokeStyle = "rgba(0,0,0,0.55)"; strokeOutline(ctx2d, pts, h.outline.closed);
+      ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#5ad1ff"; strokeOutline(ctx2d, pts, h.outline.closed);
+    }
+    ctx2d.setLineDash([lw * 4, lw * 3]); ctx2d.strokeStyle = "#4f8cff";
+    strokeOutline(ctx2d, h.corners.map((q) => [q.x, q.y]), true);
+    ctx2d.setLineDash([]);
+    ctx2d.beginPath(); ctx2d.moveTo(h.topMid.x, h.topMid.y); ctx2d.lineTo(h.knob.x, h.knob.y); ctx2d.stroke();
+    for (const q of h.corners) dot(q, hs * 0.8, "#fff", true);
+    if (h.editable) {
+      const sp = h.A[shapeUi.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 === shapeUi.pt ? "#5ad1ff" : "#fff", true));
+    }
+    dot(h.centre, hs * 0.5, "#5ad1ff");
+    dot(h.knob, hs * 0.9, "#ffce5c");
+  }
+  if (shapeUi.tool === "pen" && shapeUi.pen && shapeUi.pen.pts.length) {
+    const P = shapeUi.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 = Motion.flatten(A, false, 24).map(([x, y]) => { const q = L.transformPoint(new DOMPoint(x, y)); return [q.x, q.y]; });
+    ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#5ad1ff";
+    if (A.length > 1) strokeOutline(ctx2d, open, false);
+    A.forEach((a, j) => { const q = L.transformPoint(new DOMPoint(a.x, a.y)); dot(q, hs * (j === 0 && A.length >= 3 ? 0.9 : 0.62), j === 0 ? "#5ad1ff" : "#fff", true); });
+  }
+  ctx2d.restore();
+  return true;
+}
+/** Finish the pen: a path item around the points' centre (closed when it was closed on the first point). */
+function finishShapePen(c, closed) {
+  const P = shapeUi.pen && shapeUi.pen.pts;
+  if (!P || P.length < (closed ? 3 : 2)) { toast(closed ? "A closed path needs at least 3 points" : "A path needs at least 2 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 = Math.round((x0 + x1) / 2), cy = Math.round((y0 + y1) / 2);
+  const item = { type: "path", x: cx, y: cy, points: P.slice(0, Motion.MAX_POINTS).map(([x, y, ix, iy, ox, oy]) => [x - cx, y - cy, ix, iy, ox, oy].map((v) => +v.toFixed(2))) };
+  if (c.kind === "text") { if (!closed) item.closed = false; }
+  else if (closed) Object.assign(item, { fill: "#ffffff" }); else Object.assign(item, { closed: false, stroke: "#ffffff", strokeWidth: 8 });
+  pushUndo();
+  const list = c.kind === "text" ? [] : editList(c).slice();
+  list.push(item);
+  writeEditList(c, list);
+  Object.assign(shapeUi, { sel: [editList(c).length - 1], pt: -1, tool: null, pen: null });
+  scheduleSave(); renderInspector();
+}
+function nearestShapeSegment(h, pt) {
+  let best = null;
+  Motion.segments(h.outline.A, h.outline.closed).forEach(([a, b], i) => {
+    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 q = h.I.transformPoint(new DOMPoint(x, y)), d = Math.hypot(q.x - pt.x, q.y - pt.y);
+      if (!best || d < best.d) best = { d, i, t };
+    }
+  });
+  return best;
+}
+/** Add or remove points of a path: the base points and every keyed outline change together. */
+function writeShapeTopology(c, path, edit) {
+  writeEditList(c, Motion.updateItem(editList(c), path, (it) => Motion.mergeItem(it, {
+    points: edit(it.points), keys: it.keys ? it.keys.map((k) => (k.points ? { ...k, points: edit(k.points) } : k)) : null,
+  }) || it));
+}
+els.preview.addEventListener("pointerdown", (e) => {
+  if (e.button !== 0 || isSourceMode()) return;
+  const c = getClip(state.selId);
+  if (!shapeEditActive(c)) return;
+  const W = els.preview.width, H = els.preview.height, pt = canvasPt(e), grab = Math.max(8, W / 110);
+  const near = (p) => Math.hypot(p.x - pt.x, p.y - pt.y) <= grab;
+  if (shapeUi.tool === "pen") {
+    e.preventDefault(); e.stopImmediatePropagation();
+    if (isGroupLocked(c)) { toastLocked(); return; }
+    const L = shapeLayerMatrix(c, W, H), lp = L.inverse().transformPoint(new DOMPoint(pt.x, pt.y));
+    const P = (shapeUi.pen ||= { pts: [] }).pts;
+    if (P.length >= 3 && near(L.transformPoint(new DOMPoint(P[0][0], P[0][1])))) { finishShapePen(c, true); return; }
+    if (P.length >= Motion.MAX_POINTS) { toast(`A path has at most ${Motion.MAX_POINTS} points`); return; }
+    P.push([lp.x, lp.y, 0, 0, 0, 0]);
+    shapeUi.pen.redo = []; shapeUi.pen.dragging = true;
+    shapeUi.drag = { tool: true, L };
+    els.preview.setPointerCapture(e.pointerId);
+    state.dirtyTimeline = true;
+    return;
+  }
+  const h = shapeHandles(c, W, H);
+  if (!h) return;
+  const it = h.it, sp = h.editable ? h.A[shapeUi.pt] : null;
+  const lp = h.I.inverse().transformPoint(new DOMPoint(pt.x, pt.y));
+  let drag = null;
+  if (near(h.knob)) drag = { mode: "rotate", a0: Math.atan2(pt.y - h.centre.y, pt.x - h.centre.x) };
+  else if (sp && near(sp.o)) drag = { mode: "handle", side: "o" };
+  else if (sp && near(sp.i)) drag = { mode: "handle", side: "i" };
+  else if (h.editable && h.A.some((p) => near(p.a))) { shapeUi.pt = h.A.findIndex((p) => near(p.a)); drag = { mode: e.altKey ? "pull" : "point" }; }
+  else if (h.corners.some(near)) { const q = h.corners.find(near); drag = { mode: "size", lx0: q.lx, ly0: q.ly, d0: Math.hypot(pt.x - h.centre.x, pt.y - h.centre.y) || 1 }; }
+  else if (it.type === "path" && (e.ctrlKey || e.metaKey)) {
+    if (it.points.length >= Motion.MAX_POINTS) { toast(`A path has at most ${Motion.MAX_POINTS} points`); e.stopImmediatePropagation(); return; }
+    if (isGroupLocked(c)) { toastLocked(); e.stopImmediatePropagation(); return; }
+    const r = nearestShapeSegment(h, pt);
+    if (!r || r.d > grab * 3) return;
+    pushUndo(); writeShapeTopology(c, shapeUi.sel, (pts) => Mask.splitPoints(pts, r.i, r.t)); scheduleSave();
+    shapeUi.pt = r.i + 1;
+    drag = { mode: "point", pushed: true };
+  } else {
+    const xs = h.corners.map((q) => q.lx), ys = h.corners.map((q) => q.ly);
+    if (lp.x >= Math.min(...xs) && lp.x <= Math.max(...xs) && lp.y >= Math.min(...ys) && lp.y <= Math.max(...ys)) drag = { mode: "move" };
+  }
+  if (!drag) return;   // outside the item: the monitor's usual clicks
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (isGroupLocked(c)) { toastLocked(); return; }
+  if (!drag.pushed) pushUndo();
+  shapeUi.drag = { ...drag, start: pt, it0: JSON.parse(JSON.stringify(shapeNow(c))), F: h.F, I: h.I };
+  els.preview.setPointerCapture(e.pointerId);
+  state.dirtyTimeline = true;
+}, true);
+els.preview.addEventListener("pointermove", (e) => {
+  const d = shapeUi.drag;
+  if (!d) return;
+  e.stopImmediatePropagation();
+  const c = getClip(state.selId);
+  if (!c) return;
+  const pt = canvasPt(e);
+  if (d.tool) {
+    const P = shapeUi.pen && shapeUi.pen.pts, p = P && P[P.length - 1];
+    if (p && shapeUi.pen.dragging) {
+      const q = d.L.inverse().transformPoint(new DOMPoint(pt.x, pt.y)), ox = q.x - p[0], oy = q.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 it0 = d.it0, r3 = (v) => +v.toFixed(3);
+  let set = null;
+  if (d.mode === "move") {
+    const Fi = d.F.inverse(), a = Fi.transformPoint(new DOMPoint(d.start.x, d.start.y)), b = Fi.transformPoint(new DOMPoint(pt.x, pt.y));
+    set = { x: Math.round(it0.x + b.x - a.x), y: Math.round(it0.y + b.y - a.y) };
+  } else if (d.mode === "rotate") {
+    const c0 = d.I.transformPoint(new DOMPoint(0, 0));
+    let r = it0.rotation + (Math.atan2(pt.y - c0.y, pt.x - c0.x) - d.a0) * 180 / Math.PI;
+    if (e.shiftKey) r = Math.round(r / 15) * 15;
+    set = { rotation: r3(r) };
+  } else if (d.mode === "size") {
+    const l = d.I.inverse().transformPoint(new DOMPoint(pt.x, pt.y));
+    if (Motion.OWN[it0.type].includes("w")) {
+      let kx = Math.abs(l.x) / Math.max(1e-6, Math.abs(d.lx0)), ky = Math.abs(l.y) / Math.max(1e-6, Math.abs(d.ly0));
+      if (e.shiftKey) kx = ky = Math.max(kx, ky);
+      set = { w: Math.round(clamp(it0.w * kx, 1, 20000)), h: Math.round(clamp(it0.h * ky, 1, 20000)) };
+    } else {
+      const c0 = d.I.transformPoint(new DOMPoint(0, 0));
+      set = { scale: +clamp(it0.scale * Math.hypot(pt.x - c0.x, pt.y - c0.y) / d.d0, 0.01, 100).toFixed(4) };
+    }
+  } else if (it0.points) {
+    const pts = it0.points.map((p) => [p[0], p[1], p[2] || 0, p[3] || 0, p[4] || 0, p[5] || 0]), p = pts[shapeUi.pt];
+    if (!p) return;
+    const l = d.I.inverse().transformPoint(new DOMPoint(pt.x, pt.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(r3)) };
+  }
+  if (set) { writeShapeSet(c, shapeUi.sel, set); syncShapeInspector(c); }
+}, true);
+const endShapeDrag = (e) => {
+  const d = shapeUi.drag;
+  if (!d) return;
+  e.stopImmediatePropagation();
+  shapeUi.drag = null;
+  if (d.tool) { if (shapeUi.pen) shapeUi.pen.dragging = false; state.dirtyTimeline = true; return; }
+  scheduleSave(); renderInspector();
+};
+els.preview.addEventListener("pointerup", endShapeDrag, true);
+els.preview.addEventListener("pointercancel", endShapeDrag, true);
+els.preview.addEventListener("dblclick", (e) => {
+  const c = getClip(state.selId);
+  if (!shapeEditActive(c) || shapeUi.tool) return;
+  const h = shapeHandles(c, els.preview.width, els.preview.height), pt = canvasPt(e), grab = Math.max(8, els.preview.width / 110);
+  if (!h || h.it.type !== "path") 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.it.points.length <= (h.it.closed === false ? 2 : 3)) { toast("The path needs the points it has"); return; }
+  if (isGroupLocked(c)) { toastLocked(); return; }
+  pushUndo();
+  writeShapeTopology(c, shapeUi.sel, (pts) => pts.filter((_, j) => j !== i));
+  shapeUi.pt = -1; scheduleSave(); renderInspector();
+}, true);
+window.addEventListener("keydown", (e) => {
+  if (e.key === "Escape" && runtime.anchorTool && !shapeUi.sel && !shapeUi.tool) {
+    const tg0 = e.target;
+    if (!(tg0 && (tg0.tagName === "INPUT" || tg0.tagName === "TEXTAREA" || tg0.tagName === "SELECT"))) {
+      e.preventDefault(); e.stopImmediatePropagation();
+      runtime.anchorTool = false; state.dirtyTimeline = true; renderInspector();
+      return;
+    }
+  }
+  if (!shapeUi.clip || (!shapeUi.sel && !shapeUi.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 !== shapeUi.clip) return;
+  if (e.key === "Escape") {
+    e.preventDefault(); e.stopImmediatePropagation();
+    if (shapeUi.tool) { shapeUi.tool = null; shapeUi.pen = null; }
+    else if (shapeUi.pt >= 0) shapeUi.pt = -1;
+    else shapeUi.sel = null;
+    state.dirtyTimeline = true; renderInspector();
+  } else if (e.key === "Enter" && shapeUi.tool === "pen") {
+    e.preventDefault(); e.stopImmediatePropagation();
+    finishShapePen(c, false);
+  } else if (shapeUi.tool === "pen" && shapeUi.pen && !shapeUi.drag) {
+    // while placing points the path 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 = shapeUi.pen.pts, R = (shapeUi.pen.redo ||= []);
+    if (back && P.length) R.push(P.pop());
+    else if (fwd && R.length) P.push(R.pop());
+    state.dirtyTimeline = true;
+  }
+}, true);
+
+/* ── Text on a path ──
+   props.textPath is one shape item (motion.js): its outline is the baseline the
+   title's letters sit on, one line, each letter turned with the path.
+   props.pathOffset (%, keyable) slides the text along it; props.pathAlign says
+   which end of the text sits at the offset. The path is edited on the monitor
+   with the shape editor (its points, handles, move, turn, size and pen). */
+const TEXT_PATH_PRESETS = {
+  line: { label: "Line", item: Motion.TEXT_PATH_PRESETS.line },
+  arc: { label: "Arc", item: Motion.TEXT_PATH_PRESETS.arc },
+  circle: { label: "Circle", item: Motion.TEXT_PATH_PRESETS.circle },
+  wave: { label: "Wave", item: Motion.TEXT_PATH_PRESETS.wave },
+};
+const textPathNorm = new WeakMap();
+function clipTextPath(c) {
+  const v = c && c.kind === "text" && c.props && c.props.textPath;
+  if (!v || typeof v !== "object") return null;
+  let n = textPathNorm.get(v);
+  if (n === undefined) { n = Motion.normalizeTextPath(v); textPathNorm.set(v, n); }
+  return n;
+}
+/** The title's path at timeline t (keys resolved). */
+function textPathAt(c, t) { const n = clipTextPath(c); return n ? Motion.itemAt(n, t - c.start) : null; }
+/** The box of the text on its path, in the title's own px (for the selection box and masks). */
+function textPathBox(c, p, t) {
+  const it = textPathAt(c, t);
+  if (!it) return null;
+  const lines = Math.max(1, String(p.text || "").split("\n").length), size = +p.fontSize || 72, lh = size * lineHeightOf(p);
+  const { A, closed } = Motion.outline(it), m = Motion.itemMatrix(it);
+  let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+  for (const off of lines > 1 ? [0, (lines - 1) * lh] : [0]) {   // the first and the last line's tracks
+    for (const [x, y] of Motion.pathSampler(A, closed, off).points) {
+      const [px, py] = Motion.apply(m, x, y);
+      x0 = Math.min(x0, px); y0 = Math.min(y0, py); x1 = Math.max(x1, px); y1 = Math.max(y1, py);
+    }
+  }
+  if (!(x1 >= x0)) return null;
+  const pad = size * 0.8, s = Motion.contentScale(c, p);
+  return { ox: (x0 + x1) / 2 * s, oy: (y0 + y1) / 2 * s, hw: ((x1 - x0) / 2 + pad) * s, hh: ((y1 - y0) / 2 + pad) * s };
+}
+function drawTextOnPath(c, p, local) {
+  const it = textPathAt(c, c.start + local);
+  if (!it) return;
+  const sc = +p.scale || 1, size = +p.fontSize || 72, lh = size * lineHeightOf(p);
+  ctx2d.scale(sc, sc);
+  const m = Motion.itemMatrix(it);
+  ctx2d.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+  const anim = TEXT_ANIMS.includes(p.textAnim) ? p.textAnim : "none";
+  const rate = clamp(+p.wordRate || 0.15, 0.03, 2);
+  let fam = p.font || "Segoe UI";
+  if (anim === "font-cut") {   // swap the typeface rhythmically, then settle
+    const setF = (Array.isArray(p.fontCutSet) && p.fontCutSet.length) ? p.fontCutSet : FONT_CUT_DEFAULT;
+    setF.forEach(ensureFont);
+    if (local < 0.6) fam = setF[Math.floor(local / 0.06) % setF.length];
+  }
+  setTextFont(ctx2d, { ...p, font: fam }, size);
+  try { ctx2d.letterSpacing = "0px"; } catch { }   // spacing is laid out by hand along the path
+  ctx2d.textBaseline = "alphabetic"; ctx2d.textAlign = "center";
+  const { A, closed } = Motion.outline(it), ls = +p.letterSpacing || 0;
+  const tracks = [];   // line i runs on a parallel curve i line-heights below the path
+  const track = (i) => tracks[i] || (tracks[i] = Motion.pathSampler(A, closed, i * lh));
+  const shadowBlur = (p.textShadow === 0 ? 0 : (+p.textShadow || 12)) * size / 100;
+  const fill = () => {
+    if (!p.color2) return p.color || "#fff";
+    const g = ctx2d.createLinearGradient(0, -size * 0.8, 0, size * 0.1);
+    g.addColorStop(0, p.color || "#fff"); g.addColorStop(1, p.color2);
+    return g;
+  };
+  // Lay out every line along the path (line i sits i line-heights below it), glyph by glyph,
+  // remembering the glyph's word and line so the animations can group them.
+  const lines = textSourceString(p).split("\n");
+  const glyphs = [];   // {g, w, d (centre along the path), line, word, ci (letter index), gi}
+  const lineRuns = [];   // {from, to} along the path, per line
+  let wi = 0, ci = 0, gi = 0;
+  lines.forEach((ln, line) => {
+    const gs = graphemeSegments(ln), ws = gs.map((g) => ctx2d.measureText(g).width);
+    const total = ws.reduce((a, b) => a + b, 0) + ls * Math.max(0, gs.length - 1);
+    const base = (+p.pathOffset || 0) / 100 * track(line).length;
+    let d = p.pathAlign === "center" ? base - total / 2 : p.pathAlign === "end" ? base - total : base;
+    lineRuns.push({ from: d, to: d + total });
+    let inWord = false;
+    gs.forEach((g, j) => {
+      const space = !g.trim();
+      if (!space && !inWord) { inWord = true; } else if (space && inWord) { inWord = false; wi++; }
+      glyphs.push({ g, w: ws[j], d: d + ws[j] / 2, line, word: wi, ci: space ? -1 : ci, gi, space });
+      if (!space) ci++;
+      gi++;
+      d += ws[j] + ls;
+    });
+    if (inWord) wi++;
+  });
+  // group centres (for word-pop / zoom-in, which scale a word or a line about its middle)
+  const centre = (key) => {
+    const out = new Map();
+    for (const q of glyphs) { if (q.space) continue; const k = q[key], o = out.get(k) || { a: Infinity, b: -Infinity }; o.a = Math.min(o.a, q.d - q.w / 2); o.b = Math.max(o.b, q.d + q.w / 2); out.set(k, o); }
+    return out;
+  };
+  const words = anim === "word-pop" ? centre("word") : null, lineBox = anim === "zoom-in" ? centre("line") : null;
+  const shown = anim === "typewriter" ? Math.floor(local / (rate / 4)) : Infinity;
+  const ease = EASE["ease-out"];
+  for (const q of glyphs) {
+    if (q.space || q.gi >= shown) continue;
+    let d = q.d, scale = 1, alpha = 1, dx = 0, dy = 0, clipL = null, clipR = null, rise = null;
+    const uw = clamp((local - q.word * rate) / 0.25, 0, 1);         // per word
+    const ul = (dur) => clamp((local - q.line * rate) / dur, 0, 1);  // per line
+    if (anim === "letter-pop") {
+      const u = clamp((local - q.ci * rate / 3) / 0.18, 0, 1);
+      if (u <= 0) continue;
+      scale = Math.max(0.001, backOut(u)); alpha = Math.min(1, u * 2.5);
+    } else if (anim === "wave") dy += Math.sin(local * 4 + q.ci * 0.55) * size * 0.12;
+    else if (anim === "word-pop") {
+      if (uw <= 0) continue;
+      scale = Math.max(0.001, backOut(uw)); alpha = Math.min(1, uw * 2.5);
+      const o = words.get(q.word), mid = (o.a + o.b) / 2;
+      d = mid + (d - mid) * scale;
+    } else if (anim === "word-slide") {
+      if (uw <= 0) continue;
+      dy += (1 - ease(uw)) * size * 0.7; alpha = uw;
+    } else if (anim === "bounce") dy -= Math.abs(Math.sin(local * 3.2 + q.word * 0.9)) * size * 0.18;
+    else if (anim === "shake") { dx += Math.sin(local * 31 + q.word * 7.3) * size * 0.035; dy += Math.cos(local * 27 + q.word * 3.1) * size * 0.035; }
+    else if (anim === "karaoke") alpha = uw >= 1 ? 1 : 0.3 + uw * 0.7;
+    else if (anim === "clip-reveal") {   // a wipe runs along each line in reading order
+      const u = ul(0.5);
+      if (u <= 0) continue;
+      const run = lineRuns[q.line], edge = run.from + (run.to - run.from) * ease(u);
+      if (edge <= d - q.w / 2) continue;
+      if (edge < d + q.w / 2) clipR = edge - d;
+    } else if (anim === "zoom-in") {
+      const u = ul(0.45);
+      if (u <= 0) continue;
+      scale = 1.35 - 0.35 * ease(u); alpha = Math.min(1, u * 1.6);
+      const o = lineBox.get(q.line), mid = (o.a + o.b) / 2;
+      d = mid + (d - mid) * scale;
+    } else if (anim === "rise-mask") {   // each line rises from behind its own baseline
+      const u = ul(0.5);
+      if (u <= 0) continue;
+      rise = (1 - ease(u)) * lh;
+    }
+    const at = track(q.line).at(d);
+    ctx2d.save();
+    ctx2d.translate(at.x, at.y);
+    ctx2d.rotate(at.angle * Math.PI / 180);
+    ctx2d.translate(dx, dy);
+    if (clipL != null || clipR != null || rise != null) {
+      ctx2d.beginPath();
+      const x0 = clipL ?? -q.w / 2 - size, x1 = clipR ?? q.w / 2 + size;
+      ctx2d.rect(x0, -size * 1.1, x1 - x0, size * 1.4);   // the glyph's line box: ascenders to descenders
+      ctx2d.clip();
+      if (rise != null) ctx2d.translate(0, rise);
+    }
+    if (scale !== 1) ctx2d.scale(scale, scale);
+    const keep = ctx2d.globalAlpha;
+    ctx2d.globalAlpha = keep * clamp(alpha, 0, 1);
+    if (p.strokeWidth > 0) {
+      ctx2d.lineJoin = "round"; ctx2d.miterLimit = 2; ctx2d.lineWidth = p.strokeWidth; ctx2d.strokeStyle = p.strokeColor || "#000";
+      ctx2d.strokeText(q.g, 0, 0);
+    }
+    if (p.glow > 0) { ctx2d.shadowColor = p.glowColor || p.color || "#fff"; ctx2d.shadowBlur = (+p.glow) * size / 40; }
+    else if (shadowBlur > 0) { ctx2d.shadowColor = "rgba(0,0,0,.7)"; ctx2d.shadowBlur = shadowBlur; ctx2d.shadowOffsetY = shadowBlur / 3; }
+    ctx2d.fillStyle = fill();
+    ctx2d.fillText(q.g, 0, 0);
+    if (p.glow > 0) ctx2d.fillText(q.g, 0, 0);
+    ctx2d.globalAlpha = keep;
+    ctx2d.restore();
+  }
+}
+function textPathSectionHtml(c, p, row) {
+  const has = !!clipTextPath(c), editing = has && shapeUi.clip === c.id && samePath(shapeUi.sel, [0]);
+  const btn = (attr, label, title, on, dis) => `<button type="button" class="btn tiny${on ? " toggle on" : ""}" ${attr} title="${title}" ${dis ? "disabled" : ""}>${label}</button>`;
+  return `<div class="insp-section" data-textpath-section><h3>Text path</h3>
+    <div class="cl-row">${Object.entries(TEXT_PATH_PRESETS).map(([k, pre]) => btn(`data-tpath="${k}"`, pre.label, `Set the title on a ${pre.label.toLowerCase()}`)).join("")}
+      ${btn('data-tpath="pen"', "Pen", "Draw the path on the monitor: click points (drag to curve), Enter to finish, click the first point to close it", shapeUi.clip === c.id && shapeUi.tool === "pen")}</div>
+    ${has ? `<div class="cl-row">${btn('data-tpath="edit"', "Edit path", "Show the path's points and handles on the monitor", editing)}${btn('data-tpath="off"', "Remove", "Back to a normal title")}</div>
+      ${row("Offset", `<input type="range" data-k="pathOffset" min="-100" max="200" step="0.5" value="${fmtInspNum(p.pathOffset, 0.5)}" title="Slide the text along the path, % of its length — key it to make the text travel">
+        <span class="val" data-val="pathOffset" data-unit="%">${fmtInspNum(p.pathOffset, 0.5)}%</span>`, "pathOffset")}
+      ${row("Align", `<select data-k="pathAlign">${["start", "center", "end"].map((v) => `<option value="${v}" ${(p.pathAlign || "start") === v ? "selected" : ""}>${v}</option>`).join("")}</select>`, "pathAlign")}
+      <p class="cl-note">Each line runs along the path, the next one a line below it. Every text animation plays along the path.</p>`
+    : `<p class="cl-note">Set the title along a line, an arc, a circle, a wave or a path you draw.</p>`}
+  </div>`;
+}
+function bindTextPathControls(c) {
+  for (const b of els.inspector.querySelectorAll("[data-tpath]")) b.addEventListener("click", () => {
+    if (isGroupLocked(c)) { toastLocked(); return; }
+    const k = b.dataset.tpath;
+    if (k === "edit") {
+      const on = shapeUi.clip === c.id && samePath(shapeUi.sel, [0]);
+      Object.assign(shapeUi, { clip: c.id, sel: on ? null : [0], pt: -1, tool: null, pen: null });
+      if (!on) { maskUi.sel = -1; maskUi.tool = null; }
+      state.dirtyTimeline = true; renderInspector();
+      return;
+    }
+    if (k === "pen") {
+      const on = shapeUi.clip === c.id && shapeUi.tool === "pen";
+      Object.assign(shapeUi, { clip: c.id, sel: null, pt: -1, tool: on ? null : "pen", pen: null });
+      if (!on && state.playing) pause();
+      if (!on && !activeAt(c, state.time)) toast("Move the playhead over the title, then draw on the monitor");
+      state.dirtyTimeline = true; renderInspector();
+      return;
+    }
+    pushUndo();
+    if (k === "off") { delete c.props.textPath; shapeUi.sel = null; }
+    else {
+      c.props.textPath = Motion.normalizeTextPath(TEXT_PATH_PRESETS[k].item);
+      Object.assign(shapeUi, { clip: c.id, sel: [0], pt: -1, tool: null, pen: null });
+    }
+    state.dirtyTimeline = true; inspPropGen++;
+    scheduleSave(); renderInspector();
+  });
+}
+/* ── Motion paths on the monitor ──
+   With two or more position keys (x and y keyed at the same time) the selected
+   clip's path shows over the picture: the curve, a dot per frame (their spacing
+   is the speed), a square per key and the keys' curve handles. Drag a key to move
+   it, its handles to bend the path (Alt breaks the pair), Alt-drag a key to pull
+   new handles, double-click a key to make it a corner again. */
+const pathUi = { clip: null, key: -1, drag: null };
+function motionPathActive(c) {
+  return !!c && isVisualClip(c) && !state.playing && !state.exporting && !runtime.anchorTool && !shapeUi.tool &&
+    Motion.posKeys(c).length >= 2 && activeAt(c, state.time);
+}
+/** Screen geometry of the path: the curve, frame dots and keys with their handles, in canvas px. */
+function motionPathGeom(c, W, H, t) {
+  const P = Motion.posKeys(c);
+  const M = parentScreenMatrix(c, W, H, t);
+  const scr = (x, y) => { const q = M.transformPoint(new DOMPoint(x, y)); return { x: q.x, y: q.y }; };
+  const t0 = P[0].t, t1 = P[P.length - 1].t, step = 1 / (projectFps() || 30);
+  const dots = [];
+  for (let u = t0; u <= t1 + 1e-9; u += step) { const q = Motion.positionAt(c, u); dots.push(scr(q.x, q.y)); }
+  const keys = P.map((k) => ({ k, a: scr(k.x, k.y), i: scr(k.x + k.ix, k.y + k.iy), o: scr(k.x + k.ox, k.y + k.oy), hasIn: !!(k.ix || k.iy), hasOut: !!(k.ox || k.oy) }));
+  return { P, M, dots, keys };
+}
+function drawMotionPathOverlay(c, W, H, t) {
+  if (!motionPathActive(c)) return;
+  if (pathUi.clip !== c.id) Object.assign(pathUi, { clip: c.id, key: -1, drag: null });
+  const g = motionPathGeom(c, W, H, t), lw = Math.max(1.5, W / 800), hs = Math.max(5, W / 170);
+  ctx2d.save();
+  ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+  ctx2d.globalAlpha = 1; ctx2d.globalCompositeOperation = "source-over"; ctx2d.filter = "none";
+  ctx2d.lineJoin = "round";
+  const line = g.dots.map((q) => [q.x, q.y]);
+  ctx2d.lineWidth = lw * 2.4; ctx2d.strokeStyle = "rgba(0,0,0,0.5)"; strokeOutline(ctx2d, line, false);
+  ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#c084fc"; strokeOutline(ctx2d, line, false);
+  ctx2d.fillStyle = "#e9d5ff";
+  for (const q of g.dots) { ctx2d.beginPath(); ctx2d.arc(q.x, q.y, lw * 1.1, 0, Math.PI * 2); ctx2d.fill(); }
+  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.75)"; ctx2d.stroke();
+  };
+  g.keys.forEach((k, j) => {
+    const show = j === pathUi.key || k.hasIn || k.hasOut;
+    if (show) {
+      ctx2d.lineWidth = lw; ctx2d.strokeStyle = "#c084fc";
+      for (const [q, on] of [[k.i, j > 0], [k.o, j < g.keys.length - 1]]) {
+        if (!on || (!(j === pathUi.key) && !(q === k.i ? k.hasIn : k.hasOut))) continue;
+        ctx2d.beginPath(); ctx2d.moveTo(k.a.x, k.a.y); ctx2d.lineTo(q.x, q.y); ctx2d.stroke();
+        dot(q, hs * 0.55, "#c084fc");
+      }
+    }
+    dot(k.a, hs * 0.7, j === pathUi.key ? "#c084fc" : "#ffffff", true);
+  });
+  ctx2d.restore();
+}
+/** Write a position key's value / handles (pin / pout on the x and y keys). */
+function setPathKey(k, set) {
+  const put = (kf, prop, v) => { if (v == null || Math.abs(v) < 1e-3) delete kf[prop]; else kf[prop] = +v.toFixed(3); };
+  if ("x" in set) k.xk.v = +set.x.toFixed(3);
+  if ("y" in set) k.yk.v = +set.y.toFixed(3);
+  if ("ix" in set) { put(k.xk, "pin", set.ix); put(k.yk, "pin", set.iy); }
+  if ("ox" in set) { put(k.xk, "pout", set.ox); put(k.yk, "pout", set.oy); }
+  inspPropGen++; state.dirtyTimeline = true;
+}
+els.preview.addEventListener("pointerdown", (e) => {
+  if (e.button !== 0 || isSourceMode()) return;
+  const c = getClip(state.selId);
+  if (!motionPathActive(c) || maskEditActive(c) || shapeEditActive(c)) return;
+  const W = els.preview.width, H = els.preview.height, pt = canvasPt(e), grab = Math.max(8, W / 110);
+  const g = motionPathGeom(c, W, H, state.time);
+  const near = (q) => Math.hypot(q.x - pt.x, q.y - pt.y) <= grab;
+  let drag = null;
+  // handles first (the picked key's, then any shown), then the keys themselves
+  const last = g.keys.length - 1, order = [pathUi.key, ...g.keys.map((_, j) => j).filter((j) => j !== pathUi.key)].filter((j) => j >= 0);
+  for (const j of order) {
+    const k = g.keys[j], shown = (has) => j === pathUi.key || has;
+    if (j < last && shown(k.hasOut) && near(k.o)) { drag = { mode: "handle", side: "o", j }; break; }
+    if (j > 0 && shown(k.hasIn) && near(k.i)) { drag = { mode: "handle", side: "i", j }; break; }
+  }
+  if (!drag) {
+    const j = g.keys.findIndex((k) => near(k.a));
+    if (j >= 0) drag = { mode: e.altKey ? "pull" : "key", j };
+  }
+  if (!drag) return;   // not on the path: the monitor's usual clicks
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (isGroupLocked(c)) { toastLocked(); return; }
+  pushUndo();
+  pathUi.key = drag.j;
+  const k = g.P[drag.j];
+  pathUi.drag = { ...drag, inv: g.M.inverse(), k0: { x: k.x, y: k.y, ix: k.ix, iy: k.iy, ox: k.ox, oy: k.oy }, start: pt };
+  els.preview.setPointerCapture(e.pointerId);
+  state.dirtyTimeline = true;
+}, true);
+els.preview.addEventListener("pointermove", (e) => {
+  const d = pathUi.drag;
+  if (!d) return;
+  e.stopImmediatePropagation();
+  const c = getClip(state.selId), k = c && Motion.posKeys(c)[d.j];
+  if (!k) return;
+  const pt = canvasPt(e), q = d.inv.transformPoint(new DOMPoint(pt.x, pt.y)), k0 = d.k0;
+  if (d.mode === "key") {
+    const a = d.inv.transformPoint(new DOMPoint(d.start.x, d.start.y));
+    setPathKey(k, { x: k0.x + q.x - a.x, y: k0.y + q.y - a.y });
+  } else if (d.mode === "pull") {
+    const ox = q.x - k0.x, oy = q.y - k0.y;
+    if (Math.hypot(ox, oy) > 2) setPathKey(k, { ox, oy, ix: -ox, iy: -oy });
+  } else {
+    const hx = q.x - k0.x, hy = q.y - k0.y;
+    const mine = d.side === "o" ? { ox: hx, oy: hy } : { ix: hx, iy: hy };
+    if (!e.altKey) {   // keep the key smooth: the other handle mirrors the direction, keeps its length
+      const ol = d.side === "o" ? Math.hypot(k0.ix, k0.iy) : Math.hypot(k0.ox, k0.oy);
+      const len = ol || Math.hypot(hx, hy), m = Math.hypot(hx, hy) || 1;
+      if (d.side === "o") Object.assign(mine, { ix: -hx / m * len, iy: -hy / m * len });
+      else Object.assign(mine, { ox: -hx / m * len, oy: -hy / m * len });
+    } else if (d.side === "o") Object.assign(mine, { ix: k0.ix, iy: k0.iy });
+    else Object.assign(mine, { ox: k0.ox, oy: k0.oy });
+    const P = Motion.posKeys(c);
+    if (d.j === 0) { mine.ix = 0; mine.iy = 0; }
+    if (d.j === P.length - 1) { mine.ox = 0; mine.oy = 0; }
+    setPathKey(k, { ix: mine.ix ?? k0.ix, iy: mine.iy ?? k0.iy, ox: mine.ox ?? k0.ox, oy: mine.oy ?? k0.oy });
+  }
+  syncInspectorPlayhead();
+}, true);
+const endPathDrag = (e) => {
+  if (!pathUi.drag) return;
+  e.stopImmediatePropagation();
+  pathUi.drag = null;
+  scheduleSave(); renderInspector();
+};
+els.preview.addEventListener("pointerup", endPathDrag, true);
+els.preview.addEventListener("pointercancel", endPathDrag, true);
+els.preview.addEventListener("dblclick", (e) => {
+  const c = getClip(state.selId);
+  if (!motionPathActive(c) || maskEditActive(c) || shapeEditActive(c)) return;
+  const W = els.preview.width, H = els.preview.height, pt = canvasPt(e), grab = Math.max(8, W / 110);
+  const g = motionPathGeom(c, W, H, state.time), j = g.keys.findIndex((k) => Math.hypot(k.a.x - pt.x, k.a.y - pt.y) <= grab);
+  if (j < 0) return;
+  e.preventDefault(); e.stopImmediatePropagation();
+  if (isGroupLocked(c)) { toastLocked(); return; }
+  pushUndo();
+  setPathKey(g.P[j], { ix: 0, iy: 0, ox: 0, oy: 0 });
+  scheduleSave(); renderInspector();
+}, true);
+/** The Inspector's Motion section: motion path, auto-orient and motion blur. */
+function motionSectionHtml(c, p, row) {
+  const keys = Motion.posKeys(c).length, curved = Motion.hasPathHandles(c);
+  const btn = (attr, label, title, dis) => `<button type="button" class="btn tiny" ${attr} title="${title}" ${dis ? "disabled" : ""}>${label}</button>`;
+  return `<div class="insp-section" data-motion-section><h3>Motion</h3>
+    <div class="insp-row"><label title="Position keys (X and Y keyed at the same time) make a path you can bend on the monitor">Path</label><span class="insp-ctrls">
+      ${btn("data-path-act=\"smooth\"", "Smooth", "Curve the path smoothly through every position key", keys < 2)}
+      ${btn("data-path-act=\"straight\"", "Straight", "Straight lines between the position keys", !curved)}
+      <span class="cl-note">${keys >= 2 ? `${keys} position keys${curved ? ", curved" : ""}` : "key X and Y at two times"}</span></span></div>
+    ${row("Auto-orient", `<input type="checkbox" data-k="autoOrient" ${p.autoOrient ? "checked" : ""} title="Turn the clip with its direction of travel (its Rotation adds on top)">`, "autoOrient")}
+    ${c.kind !== "null" ? row("Motion blur", `<input type="range" data-k="motionBlur" min="0" max="720" step="15" value="${+p.motionBlur || 0}" title="Shutter angle — 180° is the film look, 0 is off">
+      <span class="val" data-val="motionBlur" data-unit="°">${+p.motionBlur || 0}°</span>`, "motionBlur")
+      + row("Blur samples", `<input type="range" data-k="motionBlurSamples" min="2" max="32" step="1" value="${+p.motionBlurSamples || 8}" title="Sub-frame samples per frame — more is smoother and slower (playback uses as many as fit in the frame time; a paused frame and export use them all)">
+      <span class="val" data-val="motionBlurSamples" data-unit="">${+p.motionBlurSamples || 8}</span>`, "motionBlurSamples") : ""}
+    ${presetRowsHtml(c, row)}
+  </div>`;
+}
+function bindMotionControls(c) {
+  for (const b of els.inspector.querySelectorAll("[data-path-act]")) b.addEventListener("click", () => {
+    if (isGroupLocked(c)) { toastLocked(); return; }
+    pushUndo();
+    c.keyframes = b.dataset.pathAct === "smooth" ? Motion.smoothPath(c.keyframes) : Motion.straightPath(c.keyframes);
+    inspPropGen++; state.dirtyTimeline = true;
+    scheduleSave(); renderInspector();
+  });
+}
+
 /* ── 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. ── */
@@ -10499,6 +12304,7 @@ function beginTextBoxDrag(c, pt, W, H) {
   };
 }
 function drawText(c, p, local) {
+  if (p.textPath && clipTextPath(c)) { drawTextOnPath(c, p, local); return; }
   const useBox = hasTextBox(p);
   const boxW = +p.boxW, boxH = +p.boxH;
   const scaleToFit = useBox && !!p.boxFit;
@@ -10878,7 +12684,7 @@ function ensureFont(name) {
    an export that frame is final. Bounded so a dead network can't stall it. */
 async function loadProjectFonts() {
   const faces = new Map(); // "italic 700 64px "Anton"" -> "Anton"
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "text" || c.disabled) continue;
     const p = c.props || {};
     const fams = [p.font || "Segoe UI"];
@@ -11386,7 +13192,7 @@ function waitMediaEl(el, ms = 2500) {
  *  compositor. Preview leaves them no-cors so a stream without ACAO still plays. */
 async function armExportCors() {
   const jobs = [];
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "video" || !clipRenders(c)) continue;
     const m = getMedia(c.mediaId);
     if (!m || !isCrossOriginSrc(m.src)) continue;
@@ -11409,7 +13215,7 @@ async function armExportCors() {
   }
   await Promise.all(jobs);
   const missing = [];
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "video" || !clipRenders(c)) continue;
     const m = getMedia(c.mediaId);
     if (!m || !isCrossOriginSrc(m.src)) continue;
@@ -11542,7 +13348,16 @@ function videoRangeBuffered(el, from, to) {
   return el.readyState >= 3;
 }
 function notePresented(el, mediaTime) {
-  if (Number.isFinite(mediaTime)) el._fcPresentedTime = mediaTime;
+  if (!Number.isFinite(mediaTime)) return;
+  // learn the source's frame duration from consecutive presented frames (the smallest
+  // step seen: playback can drop frames, never split one)
+  const prev = el._fcLastShown;
+  if (prev != null) {
+    const d = mediaTime - prev;
+    if (d > 1 / 240 && d < 0.1) { el._fcFrameDur = Math.min(el._fcFrameDur || Infinity, d); el._fcFrameSeen = (el._fcFrameSeen || 0) + 1; }
+  }
+  el._fcLastShown = mediaTime;
+  el._fcPresentedTime = mediaTime;
 }
 function presentedClose(el, mt, eps) {
   return el._fcPresentedTime != null && Math.abs(el._fcPresentedTime - mt) <= eps;
@@ -11579,15 +13394,32 @@ function assignVideoTime(el, mt, accurate) {
   }
   el.currentTime = mt;
 }
-function hardSeekVideo(el, mt, attempt = 0) {
+/** A finished seek to mt still shows the frame presented at `shown`: mt lies inside that one
+ *  source frame, by the frame duration learned from presented frames (unknown → no). */
+function sameSourceFrame(el, mt, shown) {
+  const dur = el._fcFrameDur;
+  if (shown == null || !(el._fcFrameSeen >= 3) || !(dur > 0)) return false;
+  return el.readyState >= 2 && !el.seeking && Math.abs(el.currentTime - mt) < 0.002 &&
+    mt >= shown - 1e-4 && mt < shown + dur - 1e-4;
+}
+function hardSeekVideo(el, mt, attempt = 0, shown = el._fcPresentedTime) {
   const hasRvfc = typeof el.requestVideoFrameCallback === "function";
   const maxAttempts = 3;
   return new Promise((res, rej) => {
-    const after = () => waitForPresentedFrame(el)
+    // a busy frame (grades, masks, blur) can present late: each retry waits longer
+    const after = () => waitForPresentedFrame(el, [80, 250, 600][attempt] || 600)
       .then(res)
       .catch((err) => {
-        if (attempt + 1 >= maxAttempts) rej(err);
-        else hardSeekVideo(el, mt, attempt + 1).then(res, rej);
+        // Slow motion lands several output frames on one source frame: seeking within the
+        // frame already on screen presents nothing new, so no frame callback ever comes.
+        // The seek finished on mt and the frame shown just before is within one source frame
+        // of it (≥ 20 fps footage): that frame is the right picture.
+        if (sameSourceFrame(el, mt, shown)) { notePresented(el, shown); res(); return; }
+        if (attempt + 1 < maxAttempts) { hardSeekVideo(el, mt, attempt + 1, shown).then(res, rej); return; }
+        // Last try: the seek finished on mt with the frame's data loaded, so the element holds
+        // that frame even though no callback reported it. Better than failing the whole export.
+        if (el.readyState >= 2 && !el.seeking && Math.abs(el.currentTime - mt) < 0.002) { notePresented(el, mt); res(); return; }
+        rej(err);
       });
     if (presentedClose(el, mt, 0.002) && el.readyState >= 2) {
       res();
@@ -11700,7 +13532,7 @@ function playAdvanceVideo(el, mt, eps, rate, { keepPlaying } = {}) {
 }
 const EXPORT_PREFETCH_S = 1.25;
 function prefetchExportVideos(t) {
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "video" || !clipRenders(c)) continue;
     if (activeAt(c, t)) continue;
     if (c.start > t + EXPORT_PREFETCH_S || clipEnd(c) <= t) continue;
@@ -11725,7 +13557,7 @@ async function seekVideosTo(t, { queueBusy } = {}) {
   const keepPlaying = fast && !behind && !queueBusy;
   const waits = [];
   const restoreGain = [];
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "video") continue;
     if (!clipRenders(c)) continue;
     const el = getClipEl(c); if (!el) continue;
@@ -11806,7 +13638,7 @@ function encodeWAV(buf) {
 const FX_AUTOMATION_STEP = 0.02; // export automation resolution, seconds
 async function renderAudioMix(t0, t1) {
   const jobs = [];
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (c.kind !== "audio" && c.kind !== "video") continue;
     if (!clipRenders(c)) continue;
     const m = getMedia(c.mediaId); if (!m) continue;
@@ -11888,7 +13720,7 @@ async function renderAudioMix(t0, t1) {
 /* Frame-exact asset prep for the fast exporter: rasterize the SVG frame for
    this exact time, and refresh AI person masks synchronously. */
 async function prepareFrameAssets(t) {
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (!activeAt(c, t) || !clipRenders(c)) continue;
     if (c.kind === "svg") await prepareSvgFrame(c, t);
     if (c.props?.bgRemove && (c.kind === "video" || c.kind === "image")) {
@@ -12196,7 +14028,7 @@ async function runTrackJob(ticket, fail) {
    stays where it is. */
 async function renderStillAt(t) {
   const waits = [];
-  for (const c of project.clips) {
+  for (const c of mediaClips()) {
     if (!clipRenders(c) || !activeAt(c, t)) continue;
     if (c.kind === "video") {
       const el = getClipEl(c);
@@ -12553,6 +14385,7 @@ els.importUrlOverlay?.addEventListener("click", (e) => {
 });
 $("btnTitle").addEventListener("click", addTitle);
 $("btnAdjust").addEventListener("click", addAdjust);
+
 $("btnSplit").addEventListener("click", splitAtPlayhead);
 $("btnCloseGap").addEventListener("click", closeGapAtPlayhead);
 $("btnLift").addEventListener("click", () => liftExtract(false));
@@ -12642,8 +14475,37 @@ function startSourceScrub(e) {
   window.addEventListener("pointerup", onUp);
 }
 els.sourceScrubTrack?.addEventListener("pointerdown", startSourceScrub);
-$("btnHelp").addEventListener("click", () => $("helpOverlay").classList.remove("hidden"));
+$("btnHelp").addEventListener("click", () => {
+  $("helpOverlay").classList.remove("hidden");
+  $("helpFilter").focus();
+});
 $("btnCloseHelp").addEventListener("click", () => $("helpOverlay").classList.add("hidden"));
+/** Keyboard shortcuts filter: keeps the rows (and whole sections, by heading) that match every typed word. */
+function filterHelp() {
+  const words = $("helpFilter").value.toLowerCase().split(/\s+/).filter(Boolean);
+  let any = false;
+  for (const sec of $("helpKeys").querySelectorAll(".keys-sec")) {
+    const head = sec.querySelector("h3").textContent.toLowerCase();
+    let shown = 0;
+    for (const tr of sec.querySelectorAll("tr")) {
+      const text = head + " " + tr.textContent.toLowerCase();
+      const hit = words.every((w) => text.includes(w));
+      tr.classList.toggle("hidden", !hit);
+      if (hit) shown++;
+    }
+    sec.classList.toggle("hidden", !shown);
+    if (shown) any = true;
+  }
+  $("helpEmpty").classList.toggle("hidden", any);
+}
+$("helpFilter").addEventListener("input", filterHelp);
+$("helpFilter").addEventListener("keydown", (e) => {
+  if (e.key !== "Escape") return;
+  e.preventDefault();
+  e.stopPropagation();
+  if ($("helpFilter").value) { $("helpFilter").value = ""; filterHelp(); }
+  else $("helpOverlay").classList.add("hidden");
+});
 function settingsFocusables() {
   const root = $("settingsDialog");
   if (!root) return [];
@@ -12733,6 +14595,16 @@ function openProjectTabMenu(clientX, clientY) {
     addFolder(null);
   });
   menu.appendChild(item);
+  const compItem = document.createElement("div");
+  compItem.className = "ctx-opt";
+  compItem.textContent = "New composition";
+  compItem.addEventListener("click", () => {
+    closeBinCtxMenu();
+    if (state.binTab !== "project") setBinTab("project");
+    const comp = addNewComp();
+    enterComp(comp.id);
+  });
+  menu.appendChild(compItem);
   document.body.appendChild(menu);
   const pad = 6;
   const w = menu.offsetWidth, h = menu.offsetHeight;
@@ -12768,17 +14640,7 @@ function syncFpsSel() {
 }
 els.aspectSel.addEventListener("change", () => {
   const a = ASPECT_PRESETS[+els.aspectSel.value];
-  if (!a) return;
-  project.width = a.w; project.height = a.h;
-  els.preview.width = a.w; els.preview.height = a.h;
-  if (project.exportFrame)
-    project.exportFrame = normalizeExportFrame(project.exportFrame, a.w, a.h);
-  updateMonitorRes();
-  syncAspectSel();
-  syncExportFrameSel();
-  updateExportFrameOverlay();
-  seekMediaWhilePaused();
-  scheduleSave();
+  if (a) setCanvasSize(a.w, a.h);
 });
 els.fpsSel?.addEventListener("change", () => {
   const v = FPS_PRESETS[+els.fpsSel.value];
@@ -13468,7 +15330,7 @@ try {
   if (Array.isArray(s) && s.length === 2 && s.every((k) => SCOPE_KINDS[k])) scopes.slots = s;
 } catch { }
 
-function isGradable(c) { return !!c && (c.kind === "video" || c.kind === "image" || c.kind === "svg" || c.kind === "adjust"); }
+function isGradable(c) { return !!c && (c.kind === "video" || c.kind === "image" || c.kind === "svg" || c.kind === "adjust" || c.kind === "comp"); }
 function setWorkspace(ws) {
   colorState.ws = ws === "color" ? "color" : "edit";
   $("app").classList.toggle("ws-color", colorState.ws === "color");