@hyperframes/studio-server 0.7.60 → 0.7.62

package/dist/index.js

@@ -1,3 +1,48 @@
+import {
+  findUnsafeDomPatchValues,
+  findUnsafeMutationValues
+} from "./chunk-X62ASOGO.js";
+import {
+  isHTMLElement,
+  patchElementInHtml,
+  probeElementInSource,
+  removeElementFromHtml,
+  splitElementInHtml,
+  unwrapElementsFromHtml,
+  wrapElementsInHtml
+} from "./chunk-VPA335OG.js";
+import {
+  getElementScreenshotClip
+} from "./chunk-W2SBTCO2.js";
+import {
+  injectMediaCodecMap,
+  isAutoProxyEnabled,
+  proxyEtagSalt,
+  resolvePreviewMediaCodecProbeCache
+} from "./chunk-OK7FKBKI.js";
+import {
+  ProxyCapacityError,
+  ProxyTranscodeError,
+  resolveProxy
+} from "./chunk-IVOJZ24X.js";
+import {
+  PROXY_VARIANT_CONFIG,
+  decideMediaProxyEligibility,
+  isProxyVariantRequest,
+  probeAssetCodec,
+  probeMediaMetadata,
+  resolveProxyVariantRequest
+} from "./chunk-7Q5AFHU6.js";
+import {
+  STUDIO_MANUAL_EDITS_PATH,
+  createStudioManualEditsRenderBodyScript,
+  createStudioPositionSeekReapplyScript
+} from "./chunk-6XMC64FJ.js";
+import {
+  STUDIO_MOTION_PATH,
+  createStudioMotionRenderBodyScript
+} from "./chunk-4ETS2LXI.js";
+
 // src/createStudioApi.ts
 import { Hono } from "hono";
 
@@ -289,10 +334,10 @@ function registerStoryboardRoutes(api, adapter) {
 import { bodyLimit } from "hono/body-limit";
 import {
   closeSync,
-  existsSync as existsSync3,
+  existsSync as existsSync4,
   ftruncateSync,
   openSync,
-  readFileSync as readFileSync4,
+  readFileSync as readFileSync5,
   writeFileSync as writeFileSync4,
   writeSync,
   mkdirSync as mkdirSync3,
@@ -302,7 +347,7 @@ import {
   renameSync,
   readdirSync as readdirSync4
 } from "fs";
-import { resolve as resolve3, dirname, join as join6 } from "path";
+import { resolve as resolve3, dirname as dirname2, join as join6 } from "path";
 
 // src/helpers/mime.ts
 var MIME_TYPES = {
@@ -319,7 +364,13 @@ var MIME_TYPES = {
   ".webp": "image/webp",
   ".ico": "image/x-icon",
   ".mp4": "video/mp4",
+  ".m4v": "video/mp4",
   ".mov": "video/quicktime",
+  ".mkv": "video/x-matroska",
+  ".mxf": "video/mxf",
+  ".mts": "video/mp2t",
+  ".m2ts": "video/mp2t",
+  ".ts": "video/mp2t",
   ".webm": "video/webm",
   ".mp3": "audio/mpeg",
   ".wav": "audio/wav",
@@ -347,7 +398,8 @@ function isAudioFile(name) {
 // src/helpers/waveform.ts
 import { spawn } from "child_process";
 import { existsSync as existsSync2, writeFileSync, mkdirSync } from "fs";
-import { join as join3, resolve as resolve2 } from "path";
+import { join as join3 } from "path";
+import { findFfBinary } from "@hyperframes/parsers/ff-binaries";
 var SAMPLE_RATE = 4e3;
 var PEAK_COUNT = 4e3;
 var WAVEFORM_CACHE_VERSION = "v2";
@@ -370,15 +422,10 @@ function computePeaks(floats, count) {
   const maxPeak = Math.max(...peaks, 1e-3);
   return peaks.map((p) => p / maxPeak);
 }
-function ffmpegBinary() {
-  const configured = process.env.HYPERFRAMES_FFMPEG_PATH?.trim();
-  if (configured) return resolve2(configured);
-  return "ffmpeg";
-}
 function decodeAudioPeaks(audioPath) {
   return new Promise((resolvePromise, reject) => {
     const proc = spawn(
-      ffmpegBinary(),
+      findFfBinary("ffmpeg") ?? "ffmpeg",
       [
         "-i",
         audioPath,
@@ -430,7 +477,7 @@ import { spawnSync } from "child_process";
 import { mkdtempSync, rmSync, writeFileSync as writeFileSync2 } from "fs";
 import { tmpdir } from "os";
 import { basename, join as join4 } from "path";
-var VIDEO_EXT = /\.(mp4|webm|mov)$/i;
+var VIDEO_EXT = /\.(mp4|webm|mov|mkv|avi|m4v|mxf|mts|m2ts|ts)$/i;
 var AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac)$/i;
 function validateUploadedMedia(filePath, runner = spawnSync) {
   const isVideo = VIDEO_EXT.test(filePath);
@@ -580,31 +627,6 @@ function consumeFileWriteReceipt(absPath) {
   return { path, version, writeToken };
 }
 
-// src/helpers/finiteMutation.ts
-function findUnsafeMutationValues(value, path = "body", options = {}) {
-  if (value === null) {
-    return options.allowNullPath?.(path) ? [] : [{ path, reason: "null" }];
-  }
-  if (typeof value === "number") {
-    return Number.isFinite(value) ? [] : [{ path, reason: "non-finite-number" }];
-  }
-  if (!value || typeof value !== "object") return [];
-  if (Array.isArray(value)) {
-    return value.flatMap(
-      (item, index) => findUnsafeMutationValues(item, `${path}[${index}]`, options)
-    );
-  }
-  return Object.entries(value).flatMap(
-    ([key, item]) => findUnsafeMutationValues(item, `${path}.${key}`, options)
-  );
-}
-var DOM_PATCH_NULL_VALUE_PATH = /^body\.operations\[\d+\]\.value$/;
-function findUnsafeDomPatchValues(value) {
-  return findUnsafeMutationValues(value, "body", {
-    allowNullPath: (path) => DOM_PATCH_NULL_VALUE_PATH.test(path)
-  });
-}
-
 // src/routes/files.ts
 import { classifyPropertyGroup } from "@hyperframes/parsers/gsap-constants";
 import { parseGsapScriptAcorn } from "@hyperframes/parsers/gsap-parser-acorn";
@@ -632,429 +654,196 @@ import {
   scalePositionsInScript,
   dedupePositionWritesInScript
 } from "@hyperframes/parsers/gsap-writer-acorn";
+import { parseHTML as parseHTML2 } from "linkedom";
 
-// src/helpers/sourceMutation.ts
+// src/helpers/compositionInsertion.ts
+import { existsSync as existsSync3, readFileSync as readFileSync4, realpathSync } from "fs";
+import { randomUUID as randomUUID2 } from "crypto";
+import { dirname, relative as relative3, resolve as resolve2, sep } from "path";
 import { parseHTML } from "linkedom";
-import postcss from "postcss";
-import selectorParser from "postcss-selector-parser";
-import { isAllowedHtmlAttribute, isSafeAttributeValue } from "@hyperframes/core/html-attr-safety";
-import { ensureHfIds } from "@hyperframes/parsers/hf-ids";
-
-// src/helpers/sourceStyleMutation.ts
-function parseStyleDecls(style) {
-  const props = /* @__PURE__ */ new Map();
-  const order = [];
-  let i = 0;
-  while (i < style.length) {
-    let depth = 0;
-    let inSingle = false;
-    let inDouble = false;
-    const start = i;
-    while (i < style.length) {
-      const ch = style[i];
-      if (ch === "'" && !inDouble) inSingle = !inSingle;
-      else if (ch === '"' && !inSingle) inDouble = !inDouble;
-      else if (!inSingle && !inDouble) {
-        if (ch === "(") depth++;
-        else if (ch === ")") depth = Math.max(0, depth - 1);
-        else if (ch === ";" && depth === 0) break;
-      }
-      i++;
-    }
-    const decl = style.slice(start, i).trim();
-    i++;
-    if (!decl) continue;
-    const colon = decl.indexOf(":");
-    if (colon < 0) continue;
-    const key = decl.slice(0, colon).trim();
-    const val = decl.slice(colon + 1).trim();
-    if (!key) continue;
-    if (!props.has(key)) order.push(key);
-    props.set(key, val);
-  }
-  return { props, order };
-}
-function serializeStyleDecls(props, order) {
-  return order.map((k) => `${k}: ${props.get(k) ?? ""}`).filter((d) => d.trim()).join("; ");
-}
-function patchStyleAttrString(style, property, value) {
-  const { props, order } = parseStyleDecls(style);
-  if (value === null) {
-    props.delete(property);
-    const idx = order.indexOf(property);
-    if (idx >= 0) order.splice(idx, 1);
-  } else {
-    if (!props.has(property)) order.push(property);
-    props.set(property, value);
+var CompositionInsertionError = class extends Error {
+  constructor(message, status) {
+    super(message);
+    this.status = status;
   }
-  return serializeStyleDecls(props, order);
-}
-
-// src/helpers/sourceMutation.ts
-function parseSourceDocument(source) {
-  const hasDocumentShell = /<!doctype|<html[\s>]/i.test(source);
-  if (hasDocumentShell) {
-    return { document: parseHTML(source).document, wrappedFragment: false };
-  }
-  return {
-    document: parseHTML(`<!DOCTYPE html><html><head></head><body>${source}</body></html>`).document,
-    wrappedFragment: true
-  };
-}
-function duplicateCssRulesForId(document2, originalId, newId) {
-  const idToken = `#${originalId}`;
-  const transform = selectorParser((selectors) => {
-    selectors.walkIds((node) => {
-      if (node.value === originalId) node.value = newId;
-    });
-  });
-  for (const styleEl of document2.querySelectorAll("style")) {
-    const css = styleEl.textContent ?? "";
-    let root;
-    try {
-      root = postcss.parse(css);
-    } catch {
-      continue;
-    }
-    const clones = [];
-    root.walkRules((rule) => {
-      if (!rule.selector.includes(idToken)) return;
-      const newSelector = transform.processSync(rule.selector);
-      if (newSelector === rule.selector) return;
-      const clone = rule.clone({ selector: newSelector });
-      clones.push(clone);
-    });
-    if (clones.length > 0) {
-      for (const c of clones) root.append(c);
-      styleEl.textContent = root.toString();
-    }
-  }
-}
-function querySelectorAllWithTemplates(root, selector) {
-  const matches = Array.from(root.querySelectorAll(selector));
-  if (matches.length > 0) return matches;
-  const templates = Array.from(root.querySelectorAll("template"));
-  for (const tmpl of templates) {
-    const inner = querySelectorAllWithTemplates(tmpl, selector);
-    if (inner.length > 0) return inner;
+  status;
+};
+function descendants(root, selector) {
+  const found = Array.from(root.querySelectorAll(selector));
+  for (const template of root.querySelectorAll("template")) {
+    found.push(...descendants(template, selector));
   }
-  return [];
+  return [...new Set(found)];
 }
-function escapeCssAttrValue(value) {
-  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+function compositionRoot(source) {
+  const document = parseHTML(source).document;
+  const root = descendants(document, "[data-composition-id]")[0];
+  if (!root) throw new CompositionInsertionError("Composition source has no root", 400);
+  return { document, root };
 }
-function findByHfId(document2, hfId) {
-  try {
-    const matches = querySelectorAllWithTemplates(
-      document2,
-      `[data-hf-id="${escapeCssAttrValue(hfId)}"]`
-    );
-    if (matches.length > 1) {
-      console.warn(
-        `sourceMutation: data-hf-id "${hfId}" matched ${matches.length} elements; using the first. ids must be unique per document.`
-      );
-    }
-    return matches[0] ?? null;
-  } catch {
-    return null;
+function positiveAttribute(root, ...names) {
+  for (const name of names) {
+    const value = Number.parseFloat(root.getAttribute(name) ?? "");
+    if (Number.isFinite(value) && value > 0) return value;
   }
+  throw new CompositionInsertionError(`Composition source has no valid ${names[0]}`, 400);
 }
-function findTargetElement(document2, target) {
-  if (target.hfId) {
-    const el = findByHfId(document2, target.hfId);
-    if (el) return el;
+function canonicalProjectPath(projectDir, candidate) {
+  if (!candidate) {
+    throw new CompositionInsertionError("Composition source escapes the project", 400);
   }
-  if (target.id) {
-    const byId = document2.getElementById(target.id);
-    if (byId) return byId;
+  if (!existsSync3(candidate)) {
+    throw new CompositionInsertionError("Composition source was not found", 404);
   }
-  if (!target.selector) return null;
-  try {
-    const matches = querySelectorAllWithTemplates(document2, target.selector);
-    return matches[target.selectorIndex ?? 0] ?? null;
-  } catch {
-    return null;
+  const canonical = realpathSync(candidate);
+  if (!isSafePath(realpathSync(projectDir), canonical)) {
+    throw new CompositionInsertionError("Composition source escapes the project", 400);
   }
+  return canonical;
 }
-function removeElementFromHtml(source, target) {
-  const { document: document2, wrappedFragment } = parseSourceDocument(source);
-  const element = findTargetElement(document2, target);
-  if (!element) return source;
-  element.remove();
-  return wrappedFragment ? document2.body.innerHTML || "" : document2.toString();
-}
-function isHTMLElement(el) {
-  const HTMLEl = el.ownerDocument?.defaultView?.HTMLElement;
-  return HTMLEl ? el instanceof HTMLEl : el.nodeType === 1 && "style" in el;
-}
-function resolveOperationTarget(parent, op) {
-  if (op.childSelector === void 0) return parent;
-  try {
-    const child = parent.querySelectorAll(op.childSelector)[op.childIndex ?? 0] ?? null;
-    return child && isHTMLElement(child) ? child : null;
-  } catch {
-    return null;
+function validateSourcePath(sourcePath) {
+  if (!sourcePath.trim() || sourcePath.includes("\0") || /^[a-z]+:/i.test(sourcePath)) {
+    throw new CompositionInsertionError("Invalid composition source path", 400);
   }
 }
-function patchElementInHtml(source, target, operations) {
-  const { document: document2, wrappedFragment } = parseSourceDocument(source);
-  const el = findTargetElement(document2, target);
-  if (!el || !isHTMLElement(el)) return { html: source, matched: false };
-  const htmlEl = el;
-  const resolved = [];
-  for (const op of operations) {
-    const opTarget = resolveOperationTarget(htmlEl, op);
-    if (!opTarget) return { html: source, matched: false };
-    resolved.push({ op, target: opTarget });
-  }
-  for (const { op, target: opTarget } of resolved) {
-    switch (op.type) {
-      case "inline-style":
-        {
-          const raw = opTarget.getAttribute("style") ?? "";
-          const patched = patchStyleAttrString(raw, op.property, op.value);
-          opTarget.setAttribute("style", patched);
-        }
-        break;
-      case "attribute":
-        {
-          const fullAttr = op.property.startsWith("data-") ? op.property : `data-${op.property}`;
-          if (op.value != null) {
-            opTarget.setAttribute(fullAttr, op.value);
-          } else {
-            opTarget.removeAttribute(fullAttr);
-          }
-        }
-        break;
-      case "html-attribute":
-        if (!isAllowedHtmlAttribute(op.property)) break;
-        if (op.value != null) {
-          if (!isSafeAttributeValue(op.property, op.value)) break;
-          opTarget.setAttribute(op.property, op.value);
-        } else {
-          opTarget.removeAttribute(op.property);
-        }
-        break;
-      case "text-content":
-        if (op.value != null) {
-          const inner = opTarget.children.length === 1 ? opTarget.firstElementChild : null;
-          const textTarget = inner && isHTMLElement(inner) ? inner : opTarget;
-          textTarget.textContent = op.value;
-        }
-        break;
-    }
-  }
-  return {
-    html: wrappedFragment ? document2.body.innerHTML || "" : document2.toString(),
-    matched: true
-  };
+function canonicalProjectFile(projectDir, sourcePath) {
+  validateSourcePath(sourcePath);
+  return canonicalProjectPath(projectDir, resolveWithinProject(projectDir, sourcePath));
 }
-function probeElementInSource(source, target) {
-  if (!target.id && !target.hfId && !target.selector) return false;
-  const { document: document2 } = parseSourceDocument(source);
-  const el = findTargetElement(document2, target);
-  return el != null && isHTMLElement(el);
-}
-function resolveElementTiming(el) {
-  const start = parseFloat(el.getAttribute("data-start") ?? "0") || 0;
-  const usesDataEnd = el.hasAttribute("data-end");
-  const duration = usesDataEnd ? parseFloat(el.getAttribute("data-end") ?? "") - start || 0 : parseFloat(el.getAttribute("data-duration") ?? "0") || 0;
-  return { start, duration, usesDataEnd };
-}
-function setElementDuration(el, start, duration, usesDataEnd) {
-  if (usesDataEnd) {
-    const endTime = String(Math.round((start + duration) * 1e3) / 1e3);
-    el.setAttribute("data-end", endTime);
-    el.removeAttribute("data-duration");
-  } else {
-    el.setAttribute("data-duration", String(Math.round(duration * 1e3) / 1e3));
-    el.removeAttribute("data-end");
-  }
+function canonicalDependency(projectDir, ownerAbs, sourcePath) {
+  validateSourcePath(sourcePath);
+  return canonicalProjectPath(
+    projectDir,
+    resolveWithinProject(projectDir, relative3(projectDir, resolve2(dirname(ownerAbs), sourcePath)))
+  );
 }
-function splitElementInHtml(source, target, splitTime, newId, fallbackTiming) {
-  const { document: document2, wrappedFragment } = parseSourceDocument(source);
-  const el = findTargetElement(document2, target);
-  if (!el || !isHTMLElement(el)) return { html: source, matched: false, newId: null };
-  const timing = resolveElementTiming(el);
-  const { usesDataEnd } = timing;
-  let { start, duration } = timing;
-  if (duration <= 0 && fallbackTiming && fallbackTiming.duration > 0) {
-    start = fallbackTiming.start;
-    duration = fallbackTiming.duration;
-  }
-  if (duration <= 0 || splitTime <= start || splitTime >= start + duration) {
-    return { html: source, matched: false, newId: null };
-  }
-  if (document2.getElementById(newId)) {
-    let suffix = 2;
-    const base = newId;
-    while (document2.getElementById(newId)) {
-      newId = `${base}-${suffix++}`;
+function validateDependencyGraph(projectDir, targetAbs, sourceAbs) {
+  const visited = /* @__PURE__ */ new Set();
+  const visiting = /* @__PURE__ */ new Set();
+  const visit = (file) => {
+    if (file === targetAbs) {
+      throw new CompositionInsertionError("Composition insertion would create a cycle", 400);
+    }
+    if (visiting.has(file)) {
+      throw new CompositionInsertionError("Composition dependency cycle detected", 400);
+    }
+    if (visited.has(file)) return;
+    visiting.add(file);
+    const source = readFileSync4(file, "utf-8");
+    const { document } = compositionRoot(source);
+    for (const host of descendants(document, "[data-composition-src]")) {
+      const dependency = host.getAttribute("data-composition-src");
+      if (dependency) {
+        visit(canonicalDependency(projectDir, file, dependency));
+      }
     }
-  }
-  const firstDuration = splitTime - start;
-  const secondDuration = duration - firstDuration;
-  const clone = el.cloneNode(true);
-  if (!isHTMLElement(clone)) return { html: source, matched: false, newId: null };
-  clone.setAttribute("id", newId);
-  clone.removeAttribute("data-hf-id");
-  for (const node of clone.querySelectorAll("[data-hf-id]")) node.removeAttribute("data-hf-id");
-  clone.setAttribute("data-start", String(Math.round(splitTime * 1e3) / 1e3));
-  setElementDuration(clone, splitTime, secondDuration, usesDataEnd);
-  const playbackStartAttr = el.hasAttribute("data-playback-start") ? "data-playback-start" : el.hasAttribute("data-media-start") ? "data-media-start" : null;
-  if (playbackStartAttr) {
-    const currentTrim = parseFloat(el.getAttribute(playbackStartAttr) ?? "0") || 0;
-    const rateRaw = parseFloat(el.getAttribute("data-playback-rate") ?? "");
-    const rate = Number.isFinite(rateRaw) ? rateRaw : 1;
-    clone.setAttribute(
-      playbackStartAttr,
-      String(Math.round((currentTrim + firstDuration * rate) * 1e3) / 1e3)
-    );
-  }
-  const originalId = el.getAttribute("id");
-  if (originalId) {
-    duplicateCssRulesForId(document2, originalId, newId);
-  }
-  el.setAttribute("data-start", String(Math.round(start * 1e3) / 1e3));
-  setElementDuration(el, start, firstDuration, usesDataEnd);
-  if (el.nextSibling) {
-    el.parentElement.insertBefore(clone, el.nextSibling);
-  } else {
-    el.parentElement.appendChild(clone);
-  }
-  const html = wrappedFragment ? document2.body.innerHTML || "" : document2.toString();
-  return {
-    // The split owns its new nodes' stable ids. Leaving the clone unstamped makes
-    // the next preview request persist different bytes after history is recorded.
-    html: ensureHfIds(html),
-    matched: true,
-    newId
+    visiting.delete(file);
+    visited.add(file);
   };
+  visit(sourceAbs);
 }
-function getInlineStylePx(el, property) {
-  const style = (isHTMLElement(el) ? el.getAttribute("style") : null) ?? "";
-  const { props } = parseStyleDecls(style);
-  const raw = props.get(property);
-  if (!raw) return 0;
-  const n = parseFloat(raw);
-  return Number.isFinite(n) ? n : 0;
-}
-function setInlineLeftTop(el, left, top) {
-  let style = el.getAttribute("style") ?? "";
-  style = patchStyleAttrString(style, "left", `${left}px`);
-  style = patchStyleAttrString(style, "top", `${top}px`);
-  el.setAttribute("style", style);
-}
-function uniqueGroupDomId(document2, groupId) {
-  const base = groupId.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "group";
-  let id = base;
-  let n = 2;
-  while (document2.getElementById(id)) {
-    id = `${base}-${n}`;
-    n += 1;
-  }
-  return id;
+function numberAttribute(element, name, fallback = 0) {
+  const value = Number.parseFloat(element.getAttribute(name) ?? "");
+  return Number.isFinite(value) ? value : fallback;
 }
-function wrapElementsInHtml(source, targets, groupId, bbox, rebases) {
-  const { document: document2, wrappedFragment } = parseSourceDocument(source);
-  if (targets.length === 0) {
-    return { html: source, matched: false, groupId: null, error: "no targets" };
-  }
-  const els = [];
-  const seen = /* @__PURE__ */ new Set();
-  for (const target of targets) {
-    const el = findTargetElement(document2, target);
-    if (!el || !isHTMLElement(el) || seen.has(el)) continue;
-    seen.add(el);
-    els.push(el);
-  }
-  if (els.length === 0) {
-    return { html: source, matched: false, groupId: null, error: "no targets matched" };
-  }
-  const parent = els[0]?.parentElement;
-  if (!parent || els.some((el) => el.parentElement !== parent)) {
-    return {
-      html: source,
-      matched: false,
-      groupId: null,
-      error: "grouped elements must share a single parent"
-    };
-  }
-  const memberSet = new Set(els);
-  const ordered = Array.from(parent.children).filter((c) => memberSet.has(c));
-  const rebaseByEl = /* @__PURE__ */ new Map();
-  for (const rebase of rebases) {
-    const el = findTargetElement(document2, rebase.target);
-    if (el) rebaseByEl.set(el, { left: rebase.left, top: rebase.top });
-  }
-  const wrapper = document2.createElement("div");
-  wrapper.setAttribute("data-hf-group", groupId);
-  wrapper.setAttribute("id", uniqueGroupDomId(document2, groupId));
-  const memberZIndexes = ordered.map(
-    (el) => Number.parseInt(
-      parseStyleDecls(el.getAttribute("style") ?? "").props.get("z-index") ?? "",
-      10
-    )
-  ).filter((z) => Number.isFinite(z));
-  const maxZ = memberZIndexes.length > 0 ? Math.max(...memberZIndexes) : null;
-  wrapper.setAttribute(
+function rangesOverlap(start, duration, other) {
+  const otherStart = numberAttribute(other, "data-start");
+  const otherDuration = numberAttribute(other, "data-duration");
+  return start < otherStart + otherDuration && otherStart < start + duration;
+}
+function resolveTrack(root, desiredTrack, start, duration) {
+  const clips = descendants(root, "[data-start][data-duration]").filter(
+    (element) => element !== root && element.parentElement?.closest("[data-composition-id]") === root
+  );
+  const tracks = [...new Set(clips.map((clip) => numberAttribute(clip, "data-track-index")))].sort(
+    (a, b) => a - b
+  );
+  const isFree = (track) => !clips.some(
+    (clip) => numberAttribute(clip, "data-track-index") === track && rangesOverlap(start, duration, clip)
+  );
+  if (isFree(desiredTrack)) return desiredTrack;
+  const row = tracks.indexOf(desiredTrack);
+  for (let index = row - 1; index >= 0; index--) {
+    const track = tracks[index];
+    if (track !== void 0 && isFree(track)) return track;
+  }
+  for (let index = Math.max(0, row + 1); index < tracks.length; index++) {
+    const track = tracks[index];
+    if (track !== void 0 && isFree(track)) return track;
+  }
+  return Math.max(desiredTrack, ...tracks, -1) + 1;
+}
+function uniqueHostId(root, base) {
+  const ids = /* @__PURE__ */ new Set([
+    ...descendants(root, "[id]").map((element) => element.id),
+    ...descendants(root, "[data-composition-id]").flatMap((element) => {
+      const id = element.getAttribute("data-composition-id");
+      return id ? [id] : [];
+    })
+  ]);
+  if (!ids.has(base)) return base;
+  let suffix = 2;
+  while (ids.has(`${base}_${suffix}`)) suffix += 1;
+  return `${base}_${suffix}`;
+}
+function relativeSourcePath(targetAbs, sourceAbs) {
+  return relative3(dirname(targetAbs), sourceAbs).split(sep).join("/");
+}
+function insertCompositionIntoSource(input) {
+  const targetAbs = canonicalProjectFile(input.projectDir, input.targetPath);
+  const sourceAbs = canonicalProjectFile(input.projectDir, input.sourcePath);
+  validateDependencyGraph(input.projectDir, targetAbs, sourceAbs);
+  const source = readFileSync4(sourceAbs, "utf-8");
+  const sourceComposition = compositionRoot(source).root;
+  const duration = positiveAttribute(
+    sourceComposition,
+    "data-composition-duration",
+    "data-duration"
+  );
+  const width = positiveAttribute(sourceComposition, "data-width");
+  const height = positiveAttribute(sourceComposition, "data-height");
+  const { document, root } = compositionRoot(input.parentSource);
+  const parentDuration = positiveAttribute(root, "data-duration", "data-composition-duration");
+  const base = (sourceComposition.getAttribute("data-composition-id") ?? "composition").replace(/[^a-zA-Z0-9_-]+/g, "-").replace(/^-+|-+$/g, "") || "composition";
+  const hostId = uniqueHostId(root, base);
+  const track = resolveTrack(
+    root,
+    Math.max(0, Math.round(input.desiredTrack)),
+    input.start,
+    duration
+  );
+  const zIndex = Math.max(
+    0,
+    ...descendants(root, "[style]").map((element) => {
+      const match = /(?:^|;)\s*z-index\s*:\s*(-?\d+)/i.exec(element.getAttribute("style") ?? "");
+      return match?.[1] ? Number.parseInt(match[1], 10) : 0;
+    })
+  ) + 1;
+  const host = document.createElement("div");
+  host.id = hostId;
+  host.className = "clip";
+  host.setAttribute("data-hf-id", `hf-${randomUUID2()}`);
+  host.setAttribute("data-composition-id", hostId);
+  host.setAttribute("data-composition-src", relativeSourcePath(targetAbs, sourceAbs));
+  host.setAttribute("data-start", String(Math.round(input.start * 100) / 100));
+  host.setAttribute("data-duration", String(duration));
+  host.setAttribute("data-playback-start", "0");
+  host.setAttribute("data-track-index", String(track));
+  host.setAttribute("data-width", String(width));
+  host.setAttribute("data-height", String(height));
+  host.setAttribute(
     "style",
-    `position: absolute; left: ${bbox.left}px; top: ${bbox.top}px; width: ${bbox.width}px; height: ${bbox.height}px` + (maxZ !== null ? `; z-index: ${maxZ}` : "")
+    `position: absolute; left: 0px; top: 0px; width: ${width}px; height: ${height}px; z-index: ${zIndex}`
   );
-  parent.insertBefore(wrapper, ordered[ordered.length - 1] ?? null);
-  for (const el of ordered) {
-    const rebase = rebaseByEl.get(el);
-    if (rebase) setInlineLeftTop(el, rebase.left, rebase.top);
-    wrapper.appendChild(el);
-  }
-  return {
-    html: wrappedFragment ? document2.body.innerHTML || "" : document2.toString(),
-    matched: true,
-    groupId
-  };
-}
-function unwrapElementsFromHtml(source, groupTarget) {
-  const { document: document2, wrappedFragment } = parseSourceDocument(source);
-  const group = findTargetElement(document2, groupTarget);
-  if (!group || !isHTMLElement(group)) return { html: source, unwrapped: false };
-  if (!group.hasAttribute("data-hf-group")) return { html: source, unwrapped: false };
-  const parent = group.parentElement;
-  if (!parent) return { html: source, unwrapped: false };
-  const wLeft = getInlineStylePx(group, "left");
-  const wTop = getInlineStylePx(group, "top");
-  const groupCenter = {
-    cx: wLeft + getInlineStylePx(group, "width") / 2,
-    cy: wTop + getInlineStylePx(group, "height") / 2
-  };
-  const members = [];
-  for (const child of Array.from(group.children)) {
-    if (isHTMLElement(child)) {
-      const newLeft = getInlineStylePx(child, "left") + wLeft;
-      const newTop = getInlineStylePx(child, "top") + wTop;
-      setInlineLeftTop(child, newLeft, newTop);
-      if (child.id) {
-        members.push({
-          id: child.id,
-          cx: newLeft + getInlineStylePx(child, "width") / 2,
-          cy: newTop + getInlineStylePx(child, "height") / 2
-        });
-      }
-    }
-    parent.insertBefore(child, group);
+  root.appendChild(host);
+  if (input.start + duration > parentDuration) {
+    const name = root.hasAttribute("data-duration") ? "data-duration" : "data-composition-duration";
+    root.setAttribute(name, String(Math.round((input.start + duration) * 100) / 100));
   }
-  const groupId = group.id || void 0;
-  group.remove();
-  return {
-    html: wrappedFragment ? document2.body.innerHTML || "" : document2.toString(),
-    unwrapped: true,
-    unwrappedGroupId: groupId,
-    members,
-    groupCenter
-  };
+  return { html: document.toString(), hostId, track, duration };
 }
 
 // src/routes/files.ts
-import { parseHTML as parseHTML2 } from "linkedom";
 function isAcornGsapWriterEnabled() {
   const val = process.env["STUDIO_SDK_CUTOVER_ENABLED"];
   return val === "true" || val === "1";
@@ -1076,7 +865,7 @@ async function resolveProjectPath(c, adapter, pathPrefix, opts) {
   if (!absPath) {
     return { error: c.json({ error: "forbidden" }, 403) };
   }
-  if (opts?.mustExist && !existsSync3(absPath)) {
+  if (opts?.mustExist && !existsSync4(absPath)) {
     return { error: c.json({ error: "not found" }, 404) };
   }
   return { project, filePath, absPath };
@@ -1087,6 +876,25 @@ function resolveProjectFile(c, adapter, opts) {
 function resolveFileMutationContext(c, adapter, operation) {
   return resolveProjectPath(c, adapter, (id) => `/projects/${id}/file-mutations/${operation}/`);
 }
+function isAtomicCutTarget(value) {
+  if (!value || typeof value !== "object") return false;
+  const target = value;
+  return !!target.target && typeof target.target === "object" && Number.isFinite(target.splitTime) && Number.isFinite(target.elementStart) && Number.isFinite(target.elementDuration) && Number(target.elementDuration) > 0;
+}
+function isAtomicCutFileRequest(value) {
+  if (!value || typeof value !== "object") return false;
+  const file = value;
+  return typeof file.path === "string" && file.path.length > 0 && typeof file.expectedVersion === "string" && Array.isArray(file.targets) && file.targets.length > 0 && file.targets.every(isAtomicCutTarget);
+}
+var atomicCutTail = Promise.resolve();
+function serializeAtomicCut(task) {
+  const next = atomicCutTail.then(task, task);
+  atomicCutTail = next.then(
+    () => void 0,
+    () => void 0
+  );
+  return next;
+}
 function isElementPatchRequest(value) {
   if (typeof value !== "object" || value === null) return false;
   if (!("target" in value) || typeof value.target !== "object" || value.target === null) {
@@ -1122,7 +930,7 @@ function commitElementPatchBatches(projectDir, batches, writeFile = writeFileSyn
     resolvedPaths.add(absPath);
     let before;
     try {
-      before = readFileSync4(absPath, "utf-8");
+      before = readFileSync5(absPath, "utf-8");
     } catch {
       return { error: "not-found", sourceFile: batch.sourceFile };
     }
@@ -1234,8 +1042,8 @@ async function parseMutationBody(c) {
   return { target: body.target, body };
 }
 function ensureDir(filePath) {
-  const dir = dirname(filePath);
-  if (!existsSync3(dir)) mkdirSync3(dir, { recursive: true });
+  const dir = dirname2(filePath);
+  if (!existsSync4(dir)) mkdirSync3(dir, { recursive: true });
 }
 function generateCopyPath(projectDir, originalPath) {
   const ext = originalPath.includes(".") ? "." + originalPath.split(".").pop() : "";
@@ -1244,7 +1052,7 @@ function generateCopyPath(projectDir, originalPath) {
   const cleanBase = copyMatch ? base.slice(0, -copyMatch[0].length) : base;
   let num = copyMatch ? copyMatch[1] ? parseInt(copyMatch[1]) + 1 : 2 : 1;
   let candidate = num === 1 ? `${cleanBase} (copy)${ext}` : `${cleanBase} (copy ${num})${ext}`;
-  while (existsSync3(resolve3(projectDir, candidate))) {
+  while (existsSync4(resolve3(projectDir, candidate))) {
     num++;
     candidate = `${cleanBase} (copy ${num})${ext}`;
   }
@@ -1255,7 +1063,7 @@ function walkFiles(dir, filter) {
   for (const entry of readdirSync4(dir, { withFileTypes: true })) {
     const full = join6(dir, entry.name);
     if (entry.isDirectory()) {
-      if (entry.name === "node_modules" || entry.name === ".thumbnails" || entry.name === "renders")
+      if (entry.name === "node_modules" || entry.name === ".thumbnails" || entry.name === "renders" || entry.name === ".transcode-cache")
         continue;
       results.push(...walkFiles(full, filter));
     } else if (filter(entry.name)) {
@@ -1271,7 +1079,7 @@ function updateReferences(projectDir, oldPath, newPath) {
   );
   let updatedCount = 0;
   for (const file of textFiles) {
-    const content = readFileSync4(file, "utf-8");
+    const content = readFileSync5(file, "utf-8");
     if (!content.includes(oldPath)) continue;
     const updated = content.split(oldPath).join(newPath);
     if (updated !== content) {
@@ -1282,10 +1090,10 @@ function updateReferences(projectDir, oldPath, newPath) {
   return updatedCount;
 }
 function extractGsapScriptBlock(html) {
-  const { document: document2 } = parseHTML2(html);
+  const { document } = parseHTML2(html);
   const scripts = [
-    ...document2.querySelectorAll("script:not([src])"),
-    ...Array.from(document2.querySelectorAll("template")).flatMap(
+    ...document.querySelectorAll("script:not([src])"),
+    ...Array.from(document.querySelectorAll("template")).flatMap(
       (tmpl) => Array.from(tmpl.querySelectorAll("script:not([src])"))
     )
   ];
@@ -1294,10 +1102,10 @@ function extractGsapScriptBlock(html) {
     if (content.includes("gsap.timeline") || content.includes(".set(") || content.includes(".to(")) {
       return {
         scriptText: content,
-        document: document2,
+        document,
         replaceScript(newText) {
           script.textContent = newText;
-          return document2.toString();
+          return document.toString();
         }
       };
     }
@@ -1395,11 +1203,11 @@ function bakeGroupTransformIntoMembers(html, groupId, members, groupCenter) {
   }
   return block.replaceScript(script);
 }
-function stripStudioEditsFromTarget(document2, selector) {
+function stripStudioEditsFromTarget(document, selector) {
   if (!selector) return 0;
   let stripped = 0;
   try {
-    for (const el of document2.querySelectorAll(selector)) {
+    for (const el of document.querySelectorAll(selector)) {
       if (!isHTMLElement(el)) continue;
       const htmlEl = el;
       let touched = false;
@@ -1469,11 +1277,11 @@ function resolveFinalOpacity(anim) {
   const num = Number(raw);
   return Number.isFinite(num) && num !== 0 ? num : null;
 }
-function bakeVisibilityOnDelete(document2, anim) {
+function bakeVisibilityOnDelete(document, anim) {
   const opacity = resolveFinalOpacity(anim);
   if (opacity === null) return;
   try {
-    for (const el of document2.querySelectorAll(anim.targetSelector)) {
+    for (const el of document.querySelectorAll(anim.targetSelector)) {
       if (isHTMLElement(el)) el.style.setProperty("opacity", String(opacity));
     }
   } catch {
@@ -1528,7 +1336,7 @@ function validateGsapMutationRequest(c, body) {
   return null;
 }
 async function prepareGsapMutationScript(c, res, firstMutation) {
-  const beforeHtml = readFileSync4(res.absPath, "utf-8");
+  const beforeHtml = readFileSync5(res.absPath, "utf-8");
   let html = beforeHtml;
   let block = extractGsapScriptBlock(html);
   if (!block && (firstMutation.type === "add" || firstMutation.type === "add-with-keyframes")) {
@@ -1588,7 +1396,7 @@ async function applyGsapMutations(c, res, mutations) {
   const changed = block.scriptText !== initialScript;
   const newHtml = changed ? block.replaceScript(block.scriptText) : html;
   let backupPath = null;
-  if (readFileSync4(res.absPath, "utf-8") !== beforeHtml) {
+  if (readFileSync5(res.absPath, "utf-8") !== beforeHtml) {
     return c.json({ error: "file changed during GSAP mutation", conflict: true }, 409);
   }
   if (changed) {
@@ -2211,6 +2019,74 @@ async function executeGsapMutationRecast(body, block, respond) {
       return respond({ error: `unknown mutation type: ${body.type}` }, 400);
   }
 }
+async function foldAtomicCutFile(c, file, absPath, before) {
+  let after = before;
+  let splitCount = 0;
+  const skippedSelectors = /* @__PURE__ */ new Set();
+  const respond = (data, status) => status ? c.json(data, status) : c.json(data);
+  const orderedTargets = file.targets.map((cut, index) => ({ cut, index })).sort((left, right) => {
+    const locatorKey = (entry) => !entry.target.id && !entry.target.hfId && entry.target.selector ? entry.target.selector : null;
+    const leftKey = locatorKey(left.cut);
+    const rightKey = locatorKey(right.cut);
+    if (leftKey && rightKey) {
+      return leftKey.localeCompare(rightKey) || (right.cut.target.selectorIndex ?? 0) - (left.cut.target.selectorIndex ?? 0);
+    }
+    if (leftKey) return -1;
+    if (rightKey) return 1;
+    return left.index - right.index;
+  }).map(({ cut }) => cut);
+  for (const cut of orderedTargets) {
+    const baseId = cut.originalId || cut.target.id || "clip";
+    const split = splitElementInHtml(after, cut.target, cut.splitTime, `${baseId}-split`, {
+      start: cut.elementStart,
+      duration: cut.elementDuration,
+      playbackStart: cut.playbackStart,
+      playbackRate: cut.playbackRate,
+      stampPlaybackStart: cut.isComposition
+    });
+    if (!split.matched || !split.newId) {
+      return c.json(
+        { error: `Cut target was not found or was outside its authored bounds in ${file.path}` },
+        400
+      );
+    }
+    after = split.html;
+    splitCount++;
+    if (!cut.originalId) continue;
+    const block = extractGsapScriptBlock(after);
+    if (!block) continue;
+    const result = await executeGsapMutation(
+      {
+        type: "split-animations",
+        originalId: cut.originalId,
+        newId: split.newId,
+        splitTime: cut.splitTime,
+        elementStart: cut.elementStart,
+        elementDuration: cut.elementDuration
+      },
+      block,
+      respond
+    );
+    if (result instanceof Response) return result;
+    let script = typeof result === "string" ? result : result.script;
+    if (typeof result !== "string") {
+      for (const selector of result.skippedSelectors) skippedSelectors.add(selector);
+    }
+    if (script !== block.scriptText) {
+      const parser = await loadGsapParser();
+      script = parser.syncPositionHoldsBeforeKeyframes(script);
+      after = block.replaceScript(script);
+    }
+  }
+  return {
+    path: file.path,
+    absPath,
+    before,
+    after,
+    splitCount,
+    skippedSelectors: [...skippedSelectors]
+  };
+}
 async function processUploadedFiles(formData, targetDir, projectDir) {
   const MAX_UPLOAD_BYTES = 500 * 1024 * 1024;
   const uploaded = [];
@@ -2230,13 +2106,13 @@ async function processUploadedFiles(formData, targetDir, projectDir) {
     if (!isSafePath(projectDir, destPath)) continue;
     let finalPath = destPath;
     let finalName = name;
-    if (existsSync3(finalPath)) {
+    if (existsSync4(finalPath)) {
       const dotIdx = name.indexOf(".", name.startsWith(".") ? 1 : 0);
       const ext = dotIdx > 0 ? name.slice(dotIdx) : "";
       const base = dotIdx > 0 ? name.slice(0, dotIdx) : name;
       let n = 2;
       const MAX_COPY_INDEX = 1e4;
-      while (n < MAX_COPY_INDEX && existsSync3(resolve3(targetDir, `${base} (${n})${ext}`))) n++;
+      while (n < MAX_COPY_INDEX && existsSync4(resolve3(targetDir, `${base} (${n})${ext}`))) n++;
       if (n >= MAX_COPY_INDEX) {
         skipped.push(name);
         continue;
@@ -2264,13 +2140,13 @@ function registerFileRoutes(api, adapter) {
   api.get("/projects/:id/files/*", async (c) => {
     const res = await resolveProjectFile(c, adapter);
     if ("error" in res) return res.error;
-    if (!existsSync3(res.absPath)) {
+    if (!existsSync4(res.absPath)) {
       if (c.req.query("optional") === "1") {
         return c.json({ filename: res.filePath, content: "" });
       }
       return c.json({ error: "not found" }, 404);
     }
-    const content = readFileSync4(res.absPath, "utf-8");
+    const content = readFileSync5(res.absPath, "utf-8");
     const version = fileContentVersion(content);
     c.header("ETag", version);
     return c.json({ filename: res.filePath, content, version });
@@ -2284,7 +2160,7 @@ function registerFileRoutes(api, adapter) {
     if (expectedVersion === null && !createOnly) {
       let currentContent = null;
       try {
-        currentContent = readFileSync4(res.absPath, "utf-8");
+        currentContent = readFileSync5(res.absPath, "utf-8");
       } catch (error) {
         if (!error || typeof error !== "object" || !("code" in error) || error.code !== "ENOENT") {
           throw error;
@@ -2310,7 +2186,7 @@ function registerFileRoutes(api, adapter) {
         if (!error || typeof error !== "object" || !("code" in error) || error.code !== "EEXIST") {
           throw error;
         }
-        const currentContent = readFileSync4(res.absPath, "utf-8");
+        const currentContent = readFileSync5(res.absPath, "utf-8");
         return c.json(
           {
             error: "file conflict",
@@ -2345,7 +2221,7 @@ function registerFileRoutes(api, adapter) {
         );
       }
       try {
-        const currentContent = readFileSync4(fd, "utf-8");
+        const currentContent = readFileSync5(fd, "utf-8");
         const currentVersion = fileContentVersion(currentContent);
         if (expectedVersion !== currentVersion) {
           return c.json(
@@ -2382,7 +2258,7 @@ function registerFileRoutes(api, adapter) {
   api.post("/projects/:id/files/*", async (c) => {
     const res = await resolveProjectFile(c, adapter);
     if ("error" in res) return res.error;
-    if (existsSync3(res.absPath)) {
+    if (existsSync4(res.absPath)) {
       return c.json({ error: "already exists" }, 409);
     }
     ensureDir(res.absPath);
@@ -2406,15 +2282,71 @@ function registerFileRoutes(api, adapter) {
       backupPath: backupPathForResponse(res.project.dir, backup.backupPath)
     });
   });
+  api.post("/projects/:id/file-mutations/insert-composition/*", async (c) => {
+    const ctx = await resolveFileMutationContext(c, adapter, "insert-composition");
+    if ("error" in ctx) return ctx.error;
+    const body = await c.req.json().catch(() => null);
+    if (!body || typeof body.sourcePath !== "string" || typeof body.start !== "number" || !Number.isFinite(body.start) || body.start < 0 || typeof body.track !== "number" || !Number.isFinite(body.track) || typeof body.expectedVersion !== "string") {
+      return c.json({ error: "sourcePath, finite placement, and expectedVersion required" }, 400);
+    }
+    let before;
+    try {
+      before = readFileSync5(ctx.absPath, "utf-8");
+    } catch (error) {
+      if (!error || typeof error !== "object" || !("code" in error) || error.code !== "ENOENT") {
+        throw error;
+      }
+      return c.json({ error: "not found" }, 404);
+    }
+    const currentVersion = fileContentVersion(before);
+    if (body.expectedVersion !== currentVersion) {
+      return c.json({ error: "file conflict", currentVersion, currentContent: before }, 409);
+    }
+    let insertion;
+    try {
+      insertion = insertCompositionIntoSource({
+        projectDir: ctx.project.dir,
+        targetPath: ctx.filePath,
+        sourcePath: body.sourcePath,
+        parentSource: before,
+        start: body.start,
+        desiredTrack: body.track
+      });
+    } catch (error) {
+      if (error instanceof CompositionInsertionError) {
+        return c.json({ error: error.message }, error.status);
+      }
+      throw error;
+    }
+    const backup = snapshotBeforeWrite(ctx.project.dir, ctx.absPath);
+    if (backup.error) return c.json({ error: `backup failed: ${backup.error}` }, 500);
+    writeFileSync4(ctx.absPath, insertion.html, "utf-8");
+    const version = fileContentVersion(insertion.html);
+    const writeToken = createWriteToken(c.req.header("X-Hyperframes-Write-Token"));
+    recordFileWriteReceipt(ctx.absPath, { path: ctx.filePath, version, writeToken });
+    c.header("ETag", version);
+    return c.json({
+      ok: true,
+      path: ctx.filePath,
+      hostId: insertion.hostId,
+      track: insertion.track,
+      duration: insertion.duration,
+      before,
+      after: insertion.html,
+      version,
+      writeToken,
+      backupPath: backupPathForResponse(ctx.project.dir, backup.backupPath)
+    });
+  });
   api.post("/projects/:id/file-mutations/remove-element/*", async (c) => {
     const ctx = await resolveFileMutationContext(c, adapter, "remove-element");
     if ("error" in ctx) return ctx.error;
-    if (!existsSync3(ctx.absPath)) {
+    if (!existsSync4(ctx.absPath)) {
       return c.json({ error: "not found" }, 404);
     }
     const parsed = await parseMutationBody(c);
     if ("error" in parsed) return parsed.error;
-    const originalContent = readFileSync4(ctx.absPath, "utf-8");
+    const originalContent = readFileSync5(ctx.absPath, "utf-8");
     return writeIfChanged(
       c,
       ctx.project.dir,
@@ -2424,6 +2356,130 @@ function registerFileRoutes(api, adapter) {
       removeElementFromHtml(originalContent, parsed.target)
     );
   });
+  api.post("/projects/:id/file-mutations/split-batch", async (c) => {
+    const body = await c.req.json().catch(() => null);
+    if (!Array.isArray(body?.files) || body.files.length === 0 || !body.files.every(isAtomicCutFileRequest)) {
+      return c.json({ error: "files with path, expectedVersion, and cut targets required" }, 400);
+    }
+    const files = body.files;
+    const project = await adapter.resolveProject(c.req.param("id"));
+    if (!project) return c.json({ error: "not found" }, 404);
+    return serializeAtomicCut(async () => {
+      const seen = /* @__PURE__ */ new Set();
+      const prepared = [];
+      for (const file of files) {
+        const absPath = resolveWithinProject(project.dir, file.path);
+        if (!absPath) return c.json({ error: `forbidden path: ${file.path}` }, 403);
+        if (seen.has(absPath)) return c.json({ error: `duplicate path: ${file.path}` }, 400);
+        seen.add(absPath);
+        let before;
+        try {
+          before = readFileSync5(absPath, "utf-8");
+        } catch {
+          return c.json({ error: `not found: ${file.path}` }, 404);
+        }
+        const currentVersion = fileContentVersion(before);
+        if (currentVersion !== file.expectedVersion) {
+          return c.json(
+            {
+              error: `file conflict: ${file.path}`,
+              path: file.path,
+              currentVersion,
+              currentContent: before
+            },
+            409
+          );
+        }
+        let folded;
+        try {
+          folded = await foldAtomicCutFile(c, file, absPath, before);
+        } catch (error) {
+          const message = error instanceof Error ? error.message : "Cut transform failed";
+          return c.json({ error: message }, 400);
+        }
+        if (folded instanceof Response) return folded;
+        prepared.push(folded);
+      }
+      for (const file of prepared) {
+        const current = readFileSync5(file.absPath, "utf-8");
+        if (current !== file.before) {
+          return c.json(
+            {
+              error: `file conflict: ${file.path}`,
+              path: file.path,
+              currentVersion: fileContentVersion(current),
+              currentContent: current
+            },
+            409
+          );
+        }
+      }
+      const backups = /* @__PURE__ */ new Map();
+      for (const file of prepared) {
+        const backup = snapshotBeforeWrite(project.dir, file.absPath);
+        if (backup.error) {
+          return c.json(
+            { error: `Failed to create backup for ${file.path}: ${backup.error}` },
+            500
+          );
+        }
+        backups.set(file.path, backupPathForResponse(project.dir, backup.backupPath));
+      }
+      const writeToken = createWriteToken(
+        typeof body.transactionToken === "string" ? body.transactionToken : c.req.header("X-Hyperframes-Write-Token")
+      );
+      const written = [];
+      try {
+        for (const file of prepared) {
+          writeFileSync4(file.absPath, file.after, "utf-8");
+          written.push(file);
+          recordFileWriteReceipt(file.absPath, {
+            path: file.path,
+            version: fileContentVersion(file.after),
+            writeToken
+          });
+        }
+      } catch (error) {
+        const conflicts = [];
+        for (const file of written.reverse()) {
+          try {
+            const current = readFileSync5(file.absPath, "utf-8");
+            if (current !== file.after) {
+              conflicts.push(file.path);
+              continue;
+            }
+            writeFileSync4(file.absPath, file.before, "utf-8");
+            recordFileWriteReceipt(file.absPath, {
+              path: file.path,
+              version: fileContentVersion(file.before),
+              writeToken
+            });
+          } catch {
+            conflicts.push(file.path);
+          }
+        }
+        return c.json(
+          {
+            error: error instanceof Error ? error.message : "Cut write failed",
+            outcome: conflicts.length ? "aborted-with-conflicts" : "aborted-restored",
+            conflicts
+          },
+          conflicts.length ? 409 : 500
+        );
+      }
+      const result = prepared.map((file) => ({
+        path: file.path,
+        before: file.before,
+        after: file.after,
+        version: fileContentVersion(file.after),
+        writeToken,
+        backupPath: backups.get(file.path) ?? null,
+        splitCount: file.splitCount,
+        skippedSelectors: file.skippedSelectors
+      }));
+      return c.json({ ok: true, outcome: "committed", files: result });
+    });
+  });
   api.post("/projects/:id/file-mutations/split-element/*", async (c) => {
     const ctx = await resolveFileMutationContext(c, adapter, "split-element");
     if ("error" in ctx) return ctx.error;
@@ -2435,7 +2491,7 @@ function registerFileRoutes(api, adapter) {
     const fallbackTiming = typeof parsed.body.elementStart === "number" && typeof parsed.body.elementDuration === "number" ? { start: parsed.body.elementStart, duration: parsed.body.elementDuration } : void 0;
     let originalContent;
     try {
-      originalContent = readFileSync4(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -2486,7 +2542,7 @@ function registerFileRoutes(api, adapter) {
     }
     let originalContent;
     try {
-      originalContent = readFileSync4(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -2576,7 +2632,7 @@ function registerFileRoutes(api, adapter) {
     }
     let originalContent;
     try {
-      originalContent = readFileSync4(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -2618,7 +2674,7 @@ function registerFileRoutes(api, adapter) {
     if ("error" in parsed) return parsed.error;
     let originalContent;
     try {
-      originalContent = readFileSync4(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -2647,7 +2703,7 @@ function registerFileRoutes(api, adapter) {
     if ("error" in parsed) return parsed.error;
     let content;
     try {
-      content = readFileSync4(ctx.absPath, "utf-8");
+      content = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ exists: false });
     }
@@ -2665,7 +2721,7 @@ function registerFileRoutes(api, adapter) {
     if (!newAbs) {
       return c.json({ error: "forbidden" }, 403);
     }
-    if (existsSync3(newAbs)) {
+    if (existsSync4(newAbs)) {
       return c.json({ error: "already exists" }, 409);
     }
     ensureDir(newAbs);
@@ -2681,7 +2737,7 @@ function registerFileRoutes(api, adapter) {
       return c.json({ error: "path required" }, 400);
     }
     const srcAbs = resolveWithinProject(project.dir, body.path);
-    if (!srcAbs || !existsSync3(srcAbs)) {
+    if (!srcAbs || !existsSync4(srcAbs)) {
       return c.json({ error: "not found" }, 404);
     }
     const copyPath = generateCopyPath(project.dir, body.path);
@@ -2690,7 +2746,7 @@ function registerFileRoutes(api, adapter) {
       return c.json({ error: "forbidden" }, 403);
     }
     ensureDir(destAbs);
-    writeFileSync4(destAbs, readFileSync4(srcAbs));
+    writeFileSync4(destAbs, readFileSync5(srcAbs));
     return c.json({ ok: true, path: copyPath }, 201);
   });
   const MAX_UPLOAD_BYTES = 500 * 1024 * 1024;
@@ -2706,7 +2762,7 @@ function registerFileRoutes(api, adapter) {
       const subDir = c.req.query("dir") ?? "";
       const targetDir = subDir ? resolveWithinProject(project.dir, subDir) : project.dir;
       if (!targetDir) return c.json({ error: "forbidden" }, 403);
-      if (subDir && !existsSync3(targetDir)) mkdirSync3(targetDir, { recursive: true });
+      if (subDir && !existsSync4(targetDir)) mkdirSync3(targetDir, { recursive: true });
       const formData = await c.req.formData();
       const result = await processUploadedFiles(formData, targetDir, project.dir);
       return c.json(
@@ -2720,7 +2776,7 @@ function registerFileRoutes(api, adapter) {
       mustExist: true
     });
     if ("error" in res) return res.error;
-    const html = readFileSync4(res.absPath, "utf-8");
+    const html = readFileSync5(res.absPath, "utf-8");
     const block = extractGsapScriptBlock(html);
     if (!block) {
       return c.json({
@@ -2779,7 +2835,7 @@ function registerFileRoutes(api, adapter) {
     if (!body || typeof body.expected !== "string" || typeof body.restore !== "string") {
       return c.json({ error: "expected and restore contents required" }, 400);
     }
-    const current = readFileSync4(res.absPath, "utf-8");
+    const current = readFileSync5(res.absPath, "utf-8");
     if (current !== body.expected) {
       return c.json({ ok: true, restored: false, conflict: true });
     }
@@ -2789,13 +2845,13 @@ function registerFileRoutes(api, adapter) {
 }
 
 // src/routes/preview.ts
-import { existsSync as existsSync5, readFileSync as readFileSync7, statSync as statSync2 } from "fs";
+import { existsSync as existsSync6, readFileSync as readFileSync8, statSync as statSync2 } from "fs";
 import { join as join8 } from "path";
 import { createHash as createHash3 } from "crypto";
 import { injectScriptsIntoHtml, stripEmbeddedRuntimeScripts as stripEmbeddedRuntimeScripts2 } from "@hyperframes/core/compiler";
 
 // src/helpers/subComposition.ts
-import { existsSync as existsSync4, readFileSync as readFileSync5 } from "fs";
+import { existsSync as existsSync5, readFileSync as readFileSync6 } from "fs";
 import { join as join7 } from "path";
 import { parseHTML as parseHTML3 } from "linkedom";
 import {
@@ -2903,8 +2959,8 @@ function tagRootCompositionFile(bodyHtml, compPath) {
 }
 function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, rawOverride) {
   const compFile = join7(projectDir, compPath);
-  if (!existsSync4(compFile)) return null;
-  const rawComp = rawOverride ?? readFileSync5(compFile, "utf-8");
+  if (!existsSync5(compFile)) return null;
+  const rawComp = rawOverride ?? readFileSync6(compFile, "utf-8");
   let compHeadContent = "";
   let rewrittenContent;
   let htmlAttrs = "";
@@ -2936,8 +2992,8 @@ function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, raw
   rewrittenContent = tagRootCompositionFile(rewrittenContent, compPath);
   const indexPath = join7(projectDir, "index.html");
   let headContent = "";
-  if (existsSync4(indexPath)) {
-    const indexHtml = readFileSync5(indexPath, "utf-8");
+  if (existsSync5(indexPath)) {
+    const indexHtml = readFileSync6(indexPath, "utf-8");
     const headMatch = indexHtml.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
     headContent = headMatch?.[1] ?? "";
   }
@@ -2970,215 +3026,28 @@ ${rewrittenContent}
 </html>`;
 }
 
-// src/helpers/studioMotionRenderScript.ts
-var STUDIO_MOTION_PATH = ".hyperframes/studio-motion.json";
-function hasStudioMotionEntries(manifestContent) {
-  try {
-    const parsed = JSON.parse(manifestContent);
-    return Array.isArray(parsed.motions) && parsed.motions.length > 0;
-  } catch {
-    return false;
-  }
-}
-function createStudioMotionRenderBodyScript(manifestContent, options = {}) {
-  if (!manifestContent.trim() || !hasStudioMotionEntries(manifestContent)) return null;
-  return `(${studioMotionRenderRuntime.toString()})(${JSON.stringify(manifestContent)}, ${JSON.stringify(options.activeCompositionPath ?? null)});`;
-}
-function studioMotionRenderRuntime(manifestContent, activeCompositionPath) {
-  const STUDIO_MOTION_TIMELINE_ID = "studio-motion";
-  const STUDIO_MOTION_ATTR = "data-hf-studio-motion";
-  const ORIGINAL_TRANSFORM_ATTR = "data-hf-studio-motion-original-transform";
-  const ORIGINAL_OPACITY_ATTR = "data-hf-studio-motion-original-opacity";
-  const ORIGINAL_VISIBILITY_ATTR = "data-hf-studio-motion-original-visibility";
-  const objectRecord = (value) => value && typeof value === "object" ? value : null;
-  const finiteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
-  const runtimeWindow = window;
-  const parseMotionValues = (value) => {
-    const record = objectRecord(value);
-    if (!record) return null;
-    const parsed = {};
-    for (const key of ["x", "y", "scale", "rotation", "opacity", "autoAlpha"]) {
-      const next = finiteNumber(record[key]);
-      if (next != null) parsed[key] = next;
-    }
-    return Object.keys(parsed).length > 0 ? parsed : null;
-  };
-  const parseCustomEase = (value) => {
-    const record = objectRecord(value);
-    if (!record) return null;
-    const id = typeof record.id === "string" ? record.id.trim() : "";
-    const data = typeof record.data === "string" ? record.data.trim() : "";
-    if (!id || !data) return null;
-    return { id, data };
-  };
-  const parsedManifest = (() => {
-    try {
-      return objectRecord(JSON.parse(manifestContent));
-    } catch {
-      return null;
-    }
-  })();
-  const manifestMotions = Array.isArray(parsedManifest?.motions) ? parsedManifest.motions : [];
-  const sourceFileForElement = (element) => {
-    let current = element;
-    while (current) {
-      const sourceFile = current.getAttribute("data-composition-file") ?? current.getAttribute("data-composition-src");
-      if (sourceFile) return sourceFile;
-      current = current.parentElement;
-    }
-    return activeCompositionPath ?? "index.html";
-  };
-  const elementMatchesSourceFile = (element, sourceFile) => sourceFileForElement(element) === sourceFile;
-  const isHTMLElement2 = (element) => element instanceof HTMLElement;
-  const querySelectorCandidates = (selector) => {
-    const className = selector.match(/^\.([A-Za-z0-9_-]+)$/)?.[1];
-    if (className) {
-      return Array.from(document.getElementsByTagName("*")).filter(
-        (element) => isHTMLElement2(element) && element.classList.contains(className)
-      );
-    }
-    if (/^[A-Za-z][A-Za-z0-9-]*$/.test(selector)) {
-      return Array.from(document.getElementsByTagName(selector)).filter(isHTMLElement2);
-    }
-    return Array.from(document.querySelectorAll(selector)).filter(isHTMLElement2);
-  };
-  const resolveTarget = (targetRecord) => {
-    const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
-    if (!sourceFile) return null;
-    const id = typeof targetRecord.id === "string" ? targetRecord.id : "";
-    if (id) {
-      const byId = document.getElementById(id);
-      if (isHTMLElement2(byId) && elementMatchesSourceFile(byId, sourceFile)) return byId;
-    }
-    const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : "";
-    if (!selector) return null;
-    try {
-      const selectorIndex = Math.max(0, Math.floor(finiteNumber(targetRecord.selectorIndex) ?? 0));
-      return querySelectorCandidates(selector).filter(
-        (element) => elementMatchesSourceFile(element, sourceFile)
-      )[selectorIndex] ?? null;
-    } catch {
-      return null;
-    }
-  };
-  const restoreElement = (element) => {
-    runtimeWindow.gsap?.set?.(element, { clearProps: "transform,opacity,visibility" });
-    element.style.transform = element.getAttribute(ORIGINAL_TRANSFORM_ATTR) ?? "";
-    element.style.opacity = element.getAttribute(ORIGINAL_OPACITY_ATTR) ?? "";
-    element.style.visibility = element.getAttribute(ORIGINAL_VISIBILITY_ATTR) ?? "";
-    element.removeAttribute(STUDIO_MOTION_ATTR);
-    element.removeAttribute(ORIGINAL_TRANSFORM_ATTR);
-    element.removeAttribute(ORIGINAL_OPACITY_ATTR);
-    element.removeAttribute(ORIGINAL_VISIBILITY_ATTR);
-  };
-  const restoreStudioMotionElements = () => {
-    for (const element of Array.from(document.querySelectorAll(`[${STUDIO_MOTION_ATTR}]`))) {
-      if (isHTMLElement2(element)) restoreElement(element);
-    }
-  };
-  const readCurrentTime = () => {
-    try {
-      const playerTime = runtimeWindow.__player?.getTime?.();
-      if (typeof playerTime === "number" && Number.isFinite(playerTime)) {
-        return Math.max(0, playerTime);
-      }
-    } catch {
-    }
-    try {
-      const timelineTime = runtimeWindow.__timeline?.time?.();
-      if (typeof timelineTime === "number" && Number.isFinite(timelineTime)) {
-        return Math.max(0, timelineTime);
-      }
-    } catch {
-    }
-    return 0;
-  };
-  const resolveEase = (motion) => {
-    const fallback = typeof motion.ease === "string" && motion.ease.trim() ? motion.ease.trim() : "none";
-    const customEase = parseCustomEase(motion.customEase);
-    const customEasePlugin = runtimeWindow.CustomEase;
-    if (!customEase || typeof customEasePlugin?.create !== "function") return fallback;
-    try {
-      runtimeWindow.gsap?.registerPlugin?.(customEasePlugin);
-      customEasePlugin.create(customEase.id, customEase.data);
-      return customEase.id;
-    } catch {
-      return fallback;
-    }
-  };
-  const applyManifest = () => {
-    runtimeWindow.__timelines = runtimeWindow.__timelines ?? {};
-    runtimeWindow.__timelines[STUDIO_MOTION_TIMELINE_ID]?.kill?.();
-    delete runtimeWindow.__timelines[STUDIO_MOTION_TIMELINE_ID];
-    restoreStudioMotionElements();
-    const gsap = runtimeWindow.gsap;
-    if (!gsap?.timeline || manifestMotions.length === 0) return 0;
-    const timeline = gsap.timeline({ paused: true, defaults: { overwrite: "auto" } });
-    let applied = 0;
-    for (const motionValue of manifestMotions) {
-      const motion = objectRecord(motionValue);
-      if (!motion || motion.kind !== "gsap-motion") continue;
-      const targetRecord = objectRecord(motion.target);
-      if (!targetRecord) continue;
-      const target = resolveTarget(targetRecord);
-      if (!target || typeof timeline.fromTo !== "function") continue;
-      const start = finiteNumber(motion.start);
-      const duration = finiteNumber(motion.duration);
-      if (start == null || duration == null || start < 0 || duration <= 0) continue;
-      const from = parseMotionValues(motion.from);
-      const to = parseMotionValues(motion.to);
-      if (!from || !to) continue;
-      if (!target.hasAttribute(STUDIO_MOTION_ATTR)) {
-        target.setAttribute(ORIGINAL_TRANSFORM_ATTR, target.style.transform);
-        target.setAttribute(ORIGINAL_OPACITY_ATTR, target.style.opacity);
-        target.setAttribute(ORIGINAL_VISIBILITY_ATTR, target.style.visibility);
-      }
-      target.setAttribute(STUDIO_MOTION_ATTR, "true");
-      timeline.fromTo(
-        target,
-        from,
-        { ...to, duration, ease: resolveEase(motion), overwrite: "auto", immediateRender: false },
-        start
-      );
-      applied += 1;
-    }
-    if (applied === 0) {
-      timeline.kill?.();
-      return 0;
-    }
-    runtimeWindow.__timelines[STUDIO_MOTION_TIMELINE_ID] = timeline;
-    timeline.pause?.();
-    const currentTime = readCurrentTime();
-    if (typeof timeline.totalTime === "function") timeline.totalTime(currentTime, false);
-    else timeline.time?.(currentTime);
-    return applied;
-  };
-  runtimeWindow.__hfStudioMotionApply = applyManifest;
-  applyManifest();
-}
-
 // src/routes/preview.ts
-import { ensureHfIds as ensureHfIds3 } from "@hyperframes/parsers/hf-ids";
+import { ensureHfIds as ensureHfIds2 } from "@hyperframes/parsers/hf-ids";
 
 // src/helpers/hfIdPersist.ts
-import { ensureHfIds as ensureHfIds2 } from "@hyperframes/parsers/hf-ids";
+import { ensureHfIds } from "@hyperframes/parsers/hf-ids";
 import {
   closeSync as closeSync2,
   constants,
   fstatSync,
   ftruncateSync as ftruncateSync2,
   openSync as openSync2,
-  readFileSync as readFileSync6,
+  readFileSync as readFileSync7,
   writeFileSync as writeFileSync5,
   writeSync as writeSync2
 } from "fs";
 function persistHfIdsIfNeeded(filePath, html) {
-  const normalized = ensureHfIds2(html);
+  const normalized = ensureHfIds(html);
   const idsBefore = (html.match(/\bdata-hf-id=/g) ?? []).length;
   const idsAfter = (normalized.match(/\bdata-hf-id=/g) ?? []).length;
   if (idsAfter > idsBefore) {
     try {
-      const current = readFileSync6(filePath, "utf-8");
+      const current = readFileSync7(filePath, "utf-8");
       if (current === html) {
         writeFileSync5(filePath, normalized, "utf-8");
       }
@@ -3206,8 +3075,8 @@ function stampFileHfIds(filePath) {
   if (fd === null) return null;
   try {
     if (!fstatSync(fd).isFile()) return null;
-    const html = readFileSync6(fd, "utf-8");
-    const normalized = ensureHfIds2(html);
+    const html = readFileSync7(fd, "utf-8");
+    const normalized = ensureHfIds(html);
     const idsBefore = (html.match(/\bdata-hf-id=/g) ?? []).length;
     const idsAfter = (normalized.match(/\bdata-hf-id=/g) ?? []).length;
     if (writable && idsAfter > idsBefore) {
@@ -3250,9 +3119,9 @@ ${html}`;
 }
 function readStudioMotionManifestContent(projectDir) {
   const manifestPath = join8(projectDir, STUDIO_MOTION_PATH);
-  if (!existsSync5(manifestPath)) return "";
+  if (!existsSync6(manifestPath)) return "";
   try {
-    return readFileSync7(manifestPath, "utf-8");
+    return readFileSync8(manifestPath, "utf-8");
   } catch {
     return "";
   }
@@ -3408,12 +3277,18 @@ async function transformPreviewHtml(html, adapter, project, activeCompositionPat
 }
 function resolveProjectMainHtml(projectDir, projectId) {
   const indexPath = join8(projectDir, "index.html");
-  if (existsSync5(indexPath)) {
-    return { html: readFileSync7(indexPath, "utf-8"), compositionPath: "index.html" };
+  if (existsSync6(indexPath)) {
+    return {
+      html: readFileSync8(indexPath, "utf-8"),
+      compositionPath: "index.html"
+    };
   }
   const blockHtmlPath = join8(projectDir, `${projectId}.html`);
-  if (existsSync5(blockHtmlPath)) {
-    return { html: readFileSync7(blockHtmlPath, "utf-8"), compositionPath: `${projectId}.html` };
+  if (existsSync6(blockHtmlPath)) {
+    return {
+      html: readFileSync8(blockHtmlPath, "utf-8"),
+      compositionPath: `${projectId}.html`
+    };
   }
   return null;
 }
@@ -3422,6 +3297,7 @@ function registerPreviewRoutes(api, adapter) {
     "Cache-Control": "private, no-cache",
     ETag: etag
   });
+  const mediaCodecProbeCache = resolvePreviewMediaCodecProbeCache(adapter);
   api.get("/projects/:id/preview", async (c) => {
     const resolved = await resolveProjectAndSignature(adapter, c.req.param("id"));
     if (!resolved) return c.json({ error: "not found" }, 404);
@@ -3432,7 +3308,10 @@ function registerPreviewRoutes(api, adapter) {
     const etag = `"preview:${signature}${variablesEtagSalt(vars.raw)}"`;
     const ifNoneMatch = c.req.header("If-None-Match");
     if (ifNoneMatch === etag) {
-      return new Response(null, { status: 304, headers: previewCacheHeaders(etag) });
+      return new Response(null, {
+        status: 304,
+        headers: previewCacheHeaders(etag)
+      });
     }
     const diskMain = resolveProjectMainHtml(project.dir, project.id);
     const normalizedDisk = diskMain ? persistHfIdsIfNeeded(join8(project.dir, diskMain.compositionPath), diskMain.html) : null;
@@ -3455,12 +3334,19 @@ ${runtimeTag}`;
         bundled = bundled.replace(/<head>/i, `<head><base href="${baseHref}">`);
       }
       bundled = injectStudioPreviewAugmentations(
-        ensureHfIds3(await transformPreviewHtml(bundled, adapter, project, mainCompositionPath)),
+        ensureHfIds2(await transformPreviewHtml(bundled, adapter, project, mainCompositionPath)),
         adapter,
         project.dir,
         mainCompositionPath
       );
       if (previewVariables) bundled = injectPreviewVariables(bundled, previewVariables);
+      bundled = await injectMediaCodecMap(
+        bundled,
+        adapter,
+        project.dir,
+        mainCompositionPath,
+        mediaCodecProbeCache
+      );
       return c.html(bundled, 200, previewCacheHeaders(etag));
     } catch {
       const fallback = resolveProjectMainHtml(project.dir, project.id);
@@ -3478,6 +3364,13 @@ ${runtimeTag}`;
         if (previewVariables) {
           fallbackAugmented = injectPreviewVariables(fallbackAugmented, previewVariables);
         }
+        fallbackAugmented = await injectMediaCodecMap(
+          fallbackAugmented,
+          adapter,
+          project.dir,
+          fallback.compositionPath,
+          mediaCodecProbeCache
+        );
         return c.html(fallbackAugmented, 200, previewCacheHeaders(etag));
       }
       return c.text("not found", 404);
@@ -3498,13 +3391,16 @@ ${runtimeTag}`;
       c.req.path.replace(`/projects/${project.id}/preview/comp/`, "").split("?")[0] ?? ""
     );
     const compFile = resolveWithinProject(project.dir, compPath);
-    if (!compFile || !existsSync5(compFile) || !statSync2(compFile).isFile()) {
+    if (!compFile || !existsSync6(compFile) || !statSync2(compFile).isFile()) {
       return c.text("not found", 404);
     }
     const etag = `"comp:v2:${compPath}:${signature}${variablesEtagSalt(vars.raw)}"`;
     const ifNoneMatch = c.req.header("If-None-Match");
     if (ifNoneMatch === etag) {
-      return new Response(null, { status: 304, headers: previewCacheHeaders(etag) });
+      return new Response(null, {
+        status: 304,
+        headers: previewCacheHeaders(etag)
+      });
     }
     const stamped = pinSubCompHfIds(compFile, compPath);
     if (stamped === null) return c.text("not found", 404);
@@ -3517,9 +3413,10 @@ ${runtimeTag}`;
       stamped
     );
     if (!html) return c.text("not found", 404);
-    html = ensureHfIds3(await transformPreviewHtml(html, adapter, project, compPath));
+    html = ensureHfIds2(await transformPreviewHtml(html, adapter, project, compPath));
     html = injectStudioPreviewAugmentations(html, adapter, project.dir, compPath);
     if (previewVariables) html = injectPreviewVariables(html, previewVariables);
+    html = await injectMediaCodecMap(html, adapter, project.dir, compPath, mediaCodecProbeCache);
     return c.html(html, 200, previewCacheHeaders(etag));
   });
   api.get("/projects/:id/preview/*", async (c) => {
@@ -3532,21 +3429,55 @@ ${runtimeTag}`;
     if (!file) {
       return c.text("not found", 404);
     }
-    const stat = existsSync5(file) ? statSync2(file) : null;
+    const stat = existsSync6(file) ? statSync2(file) : null;
     if (!stat?.isFile()) {
       return c.text("not found", 404);
     }
     const contentType = getMimeType(subPath);
     const isText = /\.(html|css|js|json|svg|txt|md|cube)$/i.test(subPath);
-    const etag = `"${stat.mtimeMs.toString(36)}-${stat.size.toString(36)}"`;
-    const cacheHeaders = isText ? { "Cache-Control": "no-store" } : { "Cache-Control": "private, max-age=3600, must-revalidate", ETag: etag };
+    const proxyParam = c.req.query("hf-proxy");
+    let proxyVariant;
+    if (proxyParam !== void 0) {
+      if (!isProxyVariantRequest(proxyParam) || !contentType.startsWith("video/") || !isAutoProxyEnabled(adapter)) {
+        return c.text("not found", 404);
+      }
+      const facts = await probeAssetCodec(file);
+      const eligibility = decideMediaProxyEligibility(facts);
+      if (!eligibility.eligible) {
+        return c.text(`media proxy unavailable: ${eligibility.reason}`, 422);
+      }
+      if (!facts) return c.text("media proxy unavailable: unknown_codec", 422);
+      proxyVariant = resolveProxyVariantRequest(proxyParam, facts) ?? void 0;
+      if (!proxyVariant) {
+        return c.text("media proxy variant does not match asset", 422);
+      }
+    }
+    const etag = `"${stat.mtimeMs.toString(36)}-${stat.size.toString(36)}${proxyEtagSalt(proxyVariant)}"`;
+    const cacheHeaders = isText ? { "Cache-Control": "no-store" } : {
+      "Cache-Control": "private, max-age=3600, must-revalidate",
+      ETag: etag
+    };
     if (!isText) {
       const ifNoneMatch = c.req.header("If-None-Match");
       if (ifNoneMatch === etag) {
         return new Response(null, { status: 304, headers: cacheHeaders });
       }
     }
-    const buffer = isText ? Buffer.from(readFileSync7(file, "utf-8"), "utf-8") : readFileSync7(file);
+    let servedPath = file;
+    let servedContentType = contentType;
+    if (proxyVariant !== void 0) {
+      try {
+        servedPath = await resolveProxy(project.dir, file, proxyVariant);
+      } catch (err) {
+        if (err instanceof ProxyCapacityError) {
+          return c.text(err.message, 503, { "Retry-After": "5" });
+        }
+        const message = err instanceof ProxyTranscodeError ? err.message : "proxy transcode failed";
+        return c.text(message, 502);
+      }
+      servedContentType = PROXY_VARIANT_CONFIG[proxyVariant].contentType;
+    }
+    const buffer = isText ? Buffer.from(readFileSync8(file, "utf-8"), "utf-8") : readFileSync8(servedPath);
     const totalSize = buffer.length;
     const rangeHeader = c.req.header("Range");
     if (rangeHeader) {
@@ -3560,7 +3491,7 @@ ${runtimeTag}`;
           status: 206,
           headers: {
             ...cacheHeaders,
-            "Content-Type": contentType,
+            "Content-Type": servedContentType,
             "Content-Range": `bytes ${start}-${safeEnd}/${totalSize}`,
             "Accept-Ranges": "bytes",
             "Content-Length": String(chunkSize)
@@ -3571,7 +3502,7 @@ ${runtimeTag}`;
     return new Response(new Uint8Array(buffer), {
       headers: {
         ...cacheHeaders,
-        "Content-Type": contentType,
+        "Content-Type": servedContentType,
         "Accept-Ranges": "bytes",
         "Content-Length": String(totalSize)
       }
@@ -3580,7 +3511,7 @@ ${runtimeTag}`;
 }
 
 // src/routes/lint.ts
-import { readFileSync as readFileSync8 } from "fs";
+import { readFileSync as readFileSync9 } from "fs";
 import { join as join9 } from "path";
 function registerLintRoutes(api, adapter) {
   api.get("/projects/:id/lint", async (c) => {
@@ -3592,7 +3523,7 @@ function registerLintRoutes(api, adapter) {
       );
       const allFindings = [];
       for (const file of htmlFiles) {
-        const content = readFileSync8(join9(project.dir, file), "utf-8");
+        const content = readFileSync9(join9(project.dir, file), "utf-8");
         const result = await adapter.lint(content, { filePath: file });
         if (result?.findings) {
           for (const f of result.findings) {
@@ -3610,7 +3541,7 @@ function registerLintRoutes(api, adapter) {
 
 // src/routes/render.ts
 import { streamSSE } from "hono/streaming";
-import { existsSync as existsSync6, readFileSync as readFileSync9, mkdirSync as mkdirSync4, unlinkSync as unlinkSync3, readdirSync as readdirSync5, statSync as statSync3 } from "fs";
+import { existsSync as existsSync7, readFileSync as readFileSync10, mkdirSync as mkdirSync4, unlinkSync as unlinkSync3, readdirSync as readdirSync5, statSync as statSync3 } from "fs";
 import { join as join10 } from "path";
 import { VALID_CANVAS_RESOLUTIONS } from "@hyperframes/parsers";
 import { formatRenderOutputTimestamp, parseFps } from "@hyperframes/core";
@@ -3669,7 +3600,7 @@ function registerRenderRoutes(api, adapter) {
     const now = /* @__PURE__ */ new Date();
     const jobId = `${project.id}_${formatRenderOutputTimestamp(now)}`;
     const rendersDir = adapter.rendersDir(project);
-    if (!existsSync6(rendersDir)) mkdirSync4(rendersDir, { recursive: true });
+    if (!existsSync7(rendersDir)) mkdirSync4(rendersDir, { recursive: true });
     const ext = FORMAT_EXT[format] ?? ".mp4";
     const outputPath = join10(rendersDir, `${jobId}${ext}`);
     const jobState = adapter.startRender({
@@ -3734,12 +3665,12 @@ function registerRenderRoutes(api, adapter) {
   api.get("/render/:jobId/view", (c) => {
     const { jobId } = c.req.param();
     const job = renderJobs.get(jobId);
-    if (!job?.outputPath || !existsSync6(job.outputPath)) {
+    if (!job?.outputPath || !existsSync7(job.outputPath)) {
       return c.json({ error: "not found" }, 404);
     }
     const contentType = renderContentType(job.outputPath);
     const filename = job.outputPath.split("/").pop() ?? `render.mp4`;
-    const content = readFileSync9(job.outputPath);
+    const content = readFileSync10(job.outputPath);
     return new Response(content, {
       headers: {
         "Content-Type": contentType,
@@ -3752,12 +3683,12 @@ function registerRenderRoutes(api, adapter) {
   api.get("/render/:jobId/download", (c) => {
     const { jobId } = c.req.param();
     const job = renderJobs.get(jobId);
-    if (!job?.outputPath || !existsSync6(job.outputPath)) {
+    if (!job?.outputPath || !existsSync7(job.outputPath)) {
       return c.json({ error: "not found" }, 404);
     }
     const contentType = renderContentType(job.outputPath);
     const filename = job.outputPath.split("/").pop() ?? `render.mp4`;
-    const content = readFileSync9(job.outputPath);
+    const content = readFileSync10(job.outputPath);
     return new Response(content, {
       headers: {
         "Content-Type": contentType,
@@ -3772,7 +3703,7 @@ function registerRenderRoutes(api, adapter) {
         const dir = state.outputPath.replace(/\/[^/]+$/, "");
         for (const ext of [".mp4", ".webm", ".mov", ".meta.json"]) {
           const fp = join10(dir, `${jobId}${ext}`);
-          if (existsSync6(fp)) unlinkSync3(fp);
+          if (existsSync7(fp)) unlinkSync3(fp);
         }
         break;
       }
@@ -3788,9 +3719,9 @@ function registerRenderRoutes(api, adapter) {
     const rendersDir = adapter.rendersDir(project);
     const fp = resolveWithinProject(rendersDir, filename);
     if (!fp) return c.json({ error: "forbidden" }, 403);
-    if (!existsSync6(fp)) return c.json({ error: "not found" }, 404);
+    if (!existsSync7(fp)) return c.json({ error: "not found" }, 404);
     const contentType = renderContentType(fp);
-    const content = readFileSync9(fp);
+    const content = readFileSync10(fp);
     return new Response(content, {
       headers: {
         "Content-Type": contentType,
@@ -3804,7 +3735,7 @@ function registerRenderRoutes(api, adapter) {
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "not found" }, 404);
     const rendersDir = adapter.rendersDir(project);
-    if (!existsSync6(rendersDir)) return c.json({ renders: [] });
+    if (!existsSync7(rendersDir)) return c.json({ renders: [] });
     const files = readdirSync5(rendersDir).filter((f) => f.endsWith(".mp4") || f.endsWith(".webm") || f.endsWith(".mov")).map((f) => {
       const fp = join10(rendersDir, f);
       const stat = statSync3(fp);
@@ -3812,10 +3743,10 @@ function registerRenderRoutes(api, adapter) {
       const metaPath = join10(rendersDir, `${rid}.meta.json`);
       let status = "complete";
       let durationMs;
-      if (existsSync6(metaPath)) {
+      if (existsSync7(metaPath)) {
         try {
-          const meta = JSON.parse(readFileSync9(metaPath, "utf-8"));
-          if (meta.status === "failed") status = "failed";
+          const meta = JSON.parse(readFileSync10(metaPath, "utf-8"));
+          if (meta.status === "failed" && !existsSync7(fp)) status = "failed";
           if (meta.durationMs) durationMs = meta.durationMs;
         } catch {
         }
@@ -3845,589 +3776,9 @@ function registerRenderRoutes(api, adapter) {
 }
 
 // src/routes/thumbnail.ts
-import { existsSync as existsSync7, readFileSync as readFileSync10, writeFileSync as writeFileSync6, mkdirSync as mkdirSync5, statSync as statSync4 } from "fs";
+import { existsSync as existsSync8, readFileSync as readFileSync11, writeFileSync as writeFileSync6, mkdirSync as mkdirSync5, statSync as statSync4 } from "fs";
 import { join as join11 } from "path";
 import { createHash as createHash4 } from "crypto";
-
-// src/helpers/manualEditsRenderScript.ts
-var STUDIO_MANUAL_EDITS_PATH = ".hyperframes/studio-manual-edits.json";
-function createStudioManualEditsRenderBodyScript(manifestContent, options = {}) {
-  if (!manifestContent.trim()) return null;
-  return `(${studioManualEditsRenderRuntime.toString()})(${JSON.stringify(manifestContent)}, ${JSON.stringify(options.activeCompositionPath ?? null)});`;
-}
-function createStudioPositionSeekReapplyScript() {
-  return `(${studioPositionSeekReapplyRuntime.toString()})();`;
-}
-function studioPositionSeekReapplyRuntime() {
-  const OFFSET_X_PROP = "--hf-studio-offset-x";
-  const OFFSET_Y_PROP = "--hf-studio-offset-y";
-  const WIDTH_PROP = "--hf-studio-width";
-  const HEIGHT_PROP = "--hf-studio-height";
-  const ROTATION_PROP = "--hf-studio-rotation";
-  const PATH_OFFSET_ATTR = "data-hf-studio-path-offset";
-  const BOX_SIZE_ATTR = "data-hf-studio-box-size";
-  const ROTATION_ATTR = "data-hf-studio-rotation";
-  const ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
-  const ORIGINAL_ROTATE_ATTR = "data-hf-studio-original-rotate";
-  const MOTION_ATTR = "data-hf-studio-motion";
-  const MOTION_TL_KEY = "studio-motion";
-  const WRAPPED_PROP = "__hfStudioPositionSeekReapplyWrapped";
-  if (!document.querySelector("[" + PATH_OFFSET_ATTR + '="true"]') && !document.querySelector("[" + BOX_SIZE_ATTR + '="true"]') && !document.querySelector("[" + ROTATION_ATTR + '="true"]') && !document.querySelector("[" + MOTION_ATTR + "]"))
-    return;
-  const splitTopLevelWhitespace = (value) => {
-    const parts = [];
-    let depth = 0;
-    let current = "";
-    for (const char of value.trim()) {
-      if (char === "(") depth += 1;
-      if (char === ")") depth = Math.max(0, depth - 1);
-      if (/\s/.test(char) && depth === 0) {
-        if (current) parts.push(current);
-        current = "";
-      } else {
-        current += char;
-      }
-    }
-    if (current) parts.push(current);
-    return parts;
-  };
-  const composeTranslate = (element, x, y) => {
-    const original = element.getAttribute(ORIGINAL_TRANSLATE_ATTR)?.trim();
-    if (!original || original === "none") return x + " " + y;
-    const parts = splitTopLevelWhitespace(original);
-    if (parts.length === 1) return "calc(" + parts[0] + " + " + x + ") " + y;
-    if (parts.length >= 2) {
-      const z = parts.length >= 3 ? " " + parts[2] : "";
-      return "calc(" + parts[0] + " + " + x + ") calc(" + parts[1] + " + " + y + ")" + z;
-    }
-    return x + " " + y;
-  };
-  const isSimpleRotateAngle = (value) => /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/.test(value.trim());
-  const composeRotation = (element, rotationValue) => {
-    const original = element.getAttribute(ORIGINAL_ROTATE_ATTR)?.trim();
-    if (!original || original === "none" || !isSimpleRotateAngle(original)) return rotationValue;
-    return "calc(" + original + " + " + rotationValue + ")";
-  };
-  let lastSeekTime = 0;
-  let cachedMotionKey = "";
-  const finiteNum = (v) => typeof v === "number" && Number.isFinite(v) ? v : null;
-  const computeMotionKey = (motionEls) => {
-    let key = "";
-    for (let i = 0; i < motionEls.length; i++) {
-      const json = motionEls[i].getAttribute?.(MOTION_ATTR);
-      if (json) key += (key ? "\n" : "") + json;
-    }
-    return key;
-  };
-  const reapplyMotionTimeline = () => {
-    const motionEls = document.querySelectorAll("[" + MOTION_ATTR + "]");
-    if (motionEls.length === 0) {
-      cachedMotionKey = "";
-      return;
-    }
-    const win = window;
-    const gsap = win.gsap;
-    if (!gsap || typeof gsap.timeline !== "function") return;
-    win.__timelines = win.__timelines || {};
-    const motionKey = computeMotionKey(motionEls);
-    const existing = win.__timelines[MOTION_TL_KEY];
-    if (motionKey && motionKey === cachedMotionKey && existing && typeof existing.totalTime === "function") {
-      existing.totalTime(lastSeekTime, false);
-      return;
-    }
-    if (existing && typeof existing.kill === "function") existing.kill();
-    const tl = gsap.timeline({ paused: true, defaults: { overwrite: "auto" } });
-    const fromTo = tl.fromTo;
-    if (typeof fromTo !== "function") return;
-    let applied = 0;
-    for (let i = 0; i < motionEls.length; i++) {
-      const el = motionEls[i];
-      if (!(el instanceof HTMLElement)) continue;
-      const json = el.getAttribute(MOTION_ATTR);
-      if (!json) continue;
-      try {
-        const m = JSON.parse(json);
-        const start = finiteNum(m.start);
-        const duration = finiteNum(m.duration);
-        if (start == null || duration == null || duration <= 0) continue;
-        const ease = typeof m.ease === "string" ? m.ease : "none";
-        const from = m.from && typeof m.from === "object" ? m.from : {};
-        const to = m.to && typeof m.to === "object" ? m.to : {};
-        const customEase = m.customEase;
-        let resolvedEase = ease;
-        if (customEase?.id && customEase?.data && win.CustomEase?.create) {
-          try {
-            gsap.registerPlugin?.(win.CustomEase);
-            win.CustomEase.create(customEase.id, customEase.data);
-            resolvedEase = customEase.id;
-          } catch {
-          }
-        }
-        fromTo.call(
-          tl,
-          el,
-          { ...from },
-          { ...to, duration, ease: resolvedEase, overwrite: "auto", immediateRender: false },
-          start
-        );
-        applied += 1;
-      } catch {
-      }
-    }
-    if (applied === 0) {
-      cachedMotionKey = "";
-      if (typeof tl.kill === "function")
-        tl.kill();
-      return;
-    }
-    cachedMotionKey = motionKey;
-    win.__timelines[MOTION_TL_KEY] = tl;
-    if (typeof tl.pause === "function") tl.pause();
-    if (typeof tl.totalTime === "function")
-      tl.totalTime(lastSeekTime, false);
-  };
-  const stripGsapTranslateFromTransform = (el) => {
-    const transform = el.style.getPropertyValue("transform");
-    if (!transform || transform === "none") return;
-    const win = el.ownerDocument.defaultView;
-    const MatrixCtor = win?.DOMMatrix;
-    if (!MatrixCtor) return;
-    try {
-      const m = new MatrixCtor(transform);
-      if (m.m41 === 0 && m.m42 === 0) return;
-      m.m41 = 0;
-      m.m42 = 0;
-      if (m.is2D && m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1) {
-        el.style.removeProperty("transform");
-      } else {
-        el.style.setProperty("transform", m.toString());
-      }
-    } catch {
-    }
-  };
-  const reapplyAll = () => {
-    const offsetEls = document.querySelectorAll("[" + PATH_OFFSET_ATTR + '="true"]');
-    for (let i = 0; i < offsetEls.length; i++) {
-      const el = offsetEls[i];
-      if (!(el instanceof HTMLElement)) continue;
-      const x = el.style.getPropertyValue(OFFSET_X_PROP);
-      const y = el.style.getPropertyValue(OFFSET_Y_PROP);
-      if (x || y) {
-        el.style.setProperty(
-          "translate",
-          composeTranslate(
-            el,
-            "var(" + OFFSET_X_PROP + ", 0px)",
-            "var(" + OFFSET_Y_PROP + ", 0px)"
-          )
-        );
-        stripGsapTranslateFromTransform(el);
-      }
-    }
-    const boxSizeEls = document.querySelectorAll("[" + BOX_SIZE_ATTR + '="true"]');
-    for (let i = 0; i < boxSizeEls.length; i++) {
-      const el = boxSizeEls[i];
-      if (!(el instanceof HTMLElement)) continue;
-      const w = el.style.getPropertyValue(WIDTH_PROP);
-      const h = el.style.getPropertyValue(HEIGHT_PROP);
-      if (w) el.style.setProperty("width", w);
-      if (h) el.style.setProperty("height", h);
-    }
-    const rotEls = document.querySelectorAll("[" + ROTATION_ATTR + '="true"]');
-    for (let i = 0; i < rotEls.length; i++) {
-      const el = rotEls[i];
-      if (!(el instanceof HTMLElement)) continue;
-      const rot = el.style.getPropertyValue(ROTATION_PROP);
-      if (rot) {
-        el.style.setProperty("rotate", composeRotation(el, "var(" + ROTATION_PROP + ", 0deg)"));
-        stripGsapTranslateFromTransform(el);
-      }
-    }
-    reapplyMotionTimeline();
-  };
-  const runtimeWindow = window;
-  const isWrapped = (fn) => Boolean(fn[WRAPPED_PROP]);
-  const markWrapped = (fn) => {
-    try {
-      Object.defineProperty(fn, WRAPPED_PROP, {
-        configurable: false,
-        enumerable: false,
-        value: true
-      });
-    } catch {
-      try {
-        fn[WRAPPED_PROP] = true;
-      } catch {
-      }
-    }
-  };
-  const wrapFn = (get, set) => {
-    const fn = get();
-    if (typeof fn !== "function") return false;
-    const seek = fn;
-    if (isWrapped(seek)) {
-      reapplyAll();
-      return true;
-    }
-    const wrapped = function(time) {
-      lastSeekTime = typeof time === "number" && Number.isFinite(time) ? Math.max(0, time) : 0;
-      const result = seek.call(this, time);
-      reapplyAll();
-      return result;
-    };
-    markWrapped(wrapped);
-    set(wrapped);
-    reapplyAll();
-    return true;
-  };
-  const wrapSeekFunctions = () => {
-    const a = wrapFn(
-      () => runtimeWindow.__hf?.["seek"],
-      (fn) => {
-        if (runtimeWindow.__hf) runtimeWindow.__hf["seek"] = fn;
-      }
-    );
-    const b = wrapFn(
-      () => runtimeWindow.__player?.["renderSeek"],
-      (fn) => {
-        if (runtimeWindow.__player) runtimeWindow.__player["renderSeek"] = fn;
-      }
-    );
-    return a || b;
-  };
-  const installSeekTrap = (obj, key, getter, setter) => {
-    if (!obj) return;
-    try {
-      let current = obj[key];
-      Object.defineProperty(obj, key, {
-        configurable: true,
-        enumerable: true,
-        get() {
-          return current;
-        },
-        set(value) {
-          current = value;
-          if (typeof value === "function" && !isWrapped(value)) {
-            wrapFn(getter, setter);
-          }
-        }
-      });
-    } catch {
-    }
-  };
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => reapplyAll(), { once: true });
-  } else {
-    reapplyAll();
-  }
-  wrapSeekFunctions();
-  installSeekTrap(
-    runtimeWindow.__hf,
-    "seek",
-    () => runtimeWindow.__hf?.["seek"],
-    (fn) => {
-      if (runtimeWindow.__hf) runtimeWindow.__hf["seek"] = fn;
-    }
-  );
-  installSeekTrap(
-    runtimeWindow.__player,
-    "renderSeek",
-    () => runtimeWindow.__player?.["renderSeek"],
-    (fn) => {
-      if (runtimeWindow.__player) runtimeWindow.__player["renderSeek"] = fn;
-    }
-  );
-  let remaining = 120;
-  const interval = setInterval(() => {
-    wrapSeekFunctions();
-    remaining -= 1;
-    if (remaining <= 0) clearInterval(interval);
-  }, 50);
-}
-function studioManualEditsRenderRuntime(manifestContent, activeCompositionPath) {
-  const OFFSET_X_PROP = "--hf-studio-offset-x";
-  const OFFSET_Y_PROP = "--hf-studio-offset-y";
-  const WIDTH_PROP = "--hf-studio-width";
-  const HEIGHT_PROP = "--hf-studio-height";
-  const ROTATION_PROP = "--hf-studio-rotation";
-  const PATH_OFFSET_ATTR = "data-hf-studio-path-offset";
-  const BOX_SIZE_ATTR = "data-hf-studio-box-size";
-  const ROTATION_ATTR = "data-hf-studio-rotation";
-  const ORIGINAL_TRANSLATE_ATTR = "data-hf-studio-original-translate";
-  const ORIGINAL_ROTATE_ATTR = "data-hf-studio-original-rotate";
-  const WRAPPED_SEEK_PROP = "__hfStudioManualEditsWrapped";
-  const ROTATION_TRANSFORM_ORIGIN = "center center";
-  const finiteNumber = (value) => typeof value === "number" && Number.isFinite(value) ? value : null;
-  const objectRecord = (value) => value && typeof value === "object" ? value : null;
-  const runtimeWindow = window;
-  const parsedManifest = (() => {
-    try {
-      return objectRecord(JSON.parse(manifestContent));
-    } catch {
-      return null;
-    }
-  })();
-  const manifestEdits = Array.isArray(parsedManifest?.edits) ? parsedManifest.edits : [];
-  if (manifestEdits.length === 0) return;
-  const sourceFileForElement = (element) => {
-    let current = element;
-    while (current) {
-      const sourceFile = current.getAttribute("data-composition-file") ?? current.getAttribute("data-composition-src");
-      if (sourceFile) return sourceFile;
-      current = current.parentElement;
-    }
-    return activeCompositionPath ?? "index.html";
-  };
-  const elementMatchesSourceFile = (element, sourceFile) => sourceFileForElement(element) === sourceFile;
-  const styleUsesStudioOffset = (value) => value.includes(OFFSET_X_PROP) || value.includes(OFFSET_Y_PROP);
-  const styleUsesStudioRotation = (value) => value.includes(ROTATION_PROP);
-  const splitTopLevelWhitespace = (value) => {
-    const parts = [];
-    let depth = 0;
-    let current = "";
-    for (const char of value.trim()) {
-      if (char === "(") depth += 1;
-      if (char === ")") depth = Math.max(0, depth - 1);
-      if (/\s/.test(char) && depth === 0) {
-        if (current) parts.push(current);
-        current = "";
-      } else {
-        current += char;
-      }
-    }
-    if (current) parts.push(current);
-    return parts;
-  };
-  const composeTranslate = (element, x, y) => {
-    const original = element.getAttribute(ORIGINAL_TRANSLATE_ATTR)?.trim();
-    if (!original || original === "none") return `${x} ${y}`;
-    const parts = splitTopLevelWhitespace(original);
-    if (parts.length === 1) return `calc(${parts[0]} + ${x}) ${y}`;
-    if (parts.length === 2) return `calc(${parts[0]} + ${x}) calc(${parts[1]} + ${y})`;
-    if (parts.length === 3) {
-      return `calc(${parts[0]} + ${x}) calc(${parts[1]} + ${y}) ${parts[2]}`;
-    }
-    return `${x} ${y}`;
-  };
-  const readStyleOrComputed = (element, property) => {
-    try {
-      return element.style.getPropertyValue(property) || getComputedStyle(element).getPropertyValue(property);
-    } catch {
-      return element.style.getPropertyValue(property);
-    }
-  };
-  const readTransformLonghandBase = (element, property) => {
-    const value = readStyleOrComputed(element, property).trim();
-    return value === "none" ? "" : value;
-  };
-  const preparePathOffsetBase = (element) => {
-    const currentTranslate = readTransformLonghandBase(element, "translate");
-    const hasMarker = element.hasAttribute(PATH_OFFSET_ATTR);
-    const wasResetByAnimation = !styleUsesStudioOffset(currentTranslate);
-    if (!hasMarker) {
-      element.setAttribute(ORIGINAL_TRANSLATE_ATTR, wasResetByAnimation ? currentTranslate : "");
-    } else if (wasResetByAnimation) {
-      element.setAttribute(ORIGINAL_TRANSLATE_ATTR, currentTranslate);
-    }
-  };
-  const prepareRotationBase = (element) => {
-    const currentRotate = readTransformLonghandBase(element, "rotate");
-    const hasMarker = element.hasAttribute(ROTATION_ATTR);
-    const wasResetByAnimation = !styleUsesStudioRotation(currentRotate);
-    if (!hasMarker) {
-      element.setAttribute(ORIGINAL_ROTATE_ATTR, wasResetByAnimation ? currentRotate : "");
-    } else if (wasResetByAnimation) {
-      element.setAttribute(ORIGINAL_ROTATE_ATTR, currentRotate);
-    }
-  };
-  const querySelectorCandidates = (selector) => {
-    const isCandidate = (element) => element instanceof HTMLElement;
-    const className = selector.match(/^\.([A-Za-z0-9_-]+)$/)?.[1];
-    if (className) {
-      return Array.from(document.getElementsByTagName("*")).filter(
-        (element) => isCandidate(element) && element.classList.contains(className)
-      );
-    }
-    if (/^[A-Za-z][A-Za-z0-9-]*$/.test(selector)) {
-      return Array.from(document.getElementsByTagName(selector)).filter(isCandidate);
-    }
-    return Array.from(document.querySelectorAll(selector)).filter(isCandidate);
-  };
-  const resolveTarget = (edit) => {
-    const targetRecord = objectRecord(edit.target);
-    if (!targetRecord) return null;
-    const sourceFile = typeof targetRecord.sourceFile === "string" ? targetRecord.sourceFile : "";
-    if (!sourceFile) return null;
-    const id = typeof targetRecord.id === "string" ? targetRecord.id : "";
-    if (id) {
-      const byId = document.getElementById(id);
-      if (byId instanceof HTMLElement && elementMatchesSourceFile(byId, sourceFile)) return byId;
-      const matchesById = [
-        document.documentElement,
-        ...Array.from(document.getElementsByTagName("*"))
-      ].filter(
-        (element) => element instanceof HTMLElement && element.id === id && elementMatchesSourceFile(element, sourceFile)
-      );
-      if (matchesById[0]) return matchesById[0];
-    }
-    const selector = typeof targetRecord.selector === "string" ? targetRecord.selector : "";
-    if (!selector) return null;
-    try {
-      const matches = querySelectorCandidates(selector).filter(
-        (element) => elementMatchesSourceFile(element, sourceFile)
-      );
-      const selectorIndex = finiteNumber(targetRecord.selectorIndex) ?? 0;
-      return matches[Math.max(0, Math.floor(selectorIndex))] ?? null;
-    } catch {
-      return null;
-    }
-  };
-  const roundRotationAngle = (angle) => Math.round(angle * 10) / 10;
-  const isSimpleRotateAngle = (value) => /^-?(?:\d+(?:\.\d+)?|\.\d+)(?:deg|rad|turn|grad)$/.test(value.trim());
-  const composeRotation = (element, rotationValue) => {
-    const original = element.getAttribute(ORIGINAL_ROTATE_ATTR)?.trim();
-    if (!original || original === "none" || !isSimpleRotateAngle(original)) {
-      return rotationValue;
-    }
-    return `calc(${original} + ${rotationValue})`;
-  };
-  const applyPathOffset = (element, edit) => {
-    const x = finiteNumber(edit.x);
-    const y = finiteNumber(edit.y);
-    if (x == null || y == null) return;
-    preparePathOffsetBase(element);
-    element.setAttribute(PATH_OFFSET_ATTR, "true");
-    element.style.setProperty(OFFSET_X_PROP, `${Math.round(x)}px`);
-    element.style.setProperty(OFFSET_Y_PROP, `${Math.round(y)}px`);
-    element.style.setProperty(
-      "translate",
-      composeTranslate(element, `var(${OFFSET_X_PROP}, 0px)`, `var(${OFFSET_Y_PROP}, 0px)`)
-    );
-  };
-  const readParentFlexBasisPixels = (element, size) => {
-    const parent = element.parentElement;
-    if (!parent) return null;
-    const styles = getComputedStyle(parent);
-    if (styles.display !== "flex" && styles.display !== "inline-flex") return null;
-    return Math.round(
-      Math.max(1, styles.flexDirection.startsWith("column") ? size.height : size.width)
-    );
-  };
-  const applyBoxSize = (element, edit) => {
-    const width = finiteNumber(edit.width);
-    const height = finiteNumber(edit.height);
-    if (width == null || height == null || width <= 0 || height <= 0) return;
-    const rounded = {
-      width: Math.round(Math.max(1, width)),
-      height: Math.round(Math.max(1, height))
-    };
-    element.setAttribute(BOX_SIZE_ATTR, "true");
-    element.style.setProperty(WIDTH_PROP, `${rounded.width}px`);
-    element.style.setProperty(HEIGHT_PROP, `${rounded.height}px`);
-    element.style.setProperty("box-sizing", "border-box");
-    element.style.setProperty("width", `${rounded.width}px`);
-    element.style.setProperty("height", `${rounded.height}px`);
-    element.style.setProperty("min-width", "0px");
-    element.style.setProperty("min-height", "0px");
-    element.style.setProperty("max-width", "none");
-    element.style.setProperty("max-height", "none");
-    const flexBasis = readParentFlexBasisPixels(element, rounded);
-    if (flexBasis != null) {
-      element.style.setProperty("flex-basis", `${flexBasis}px`);
-      element.style.setProperty("flex-grow", "0");
-      element.style.setProperty("flex-shrink", "0");
-    }
-    if (getComputedStyle(element).display === "inline") {
-      element.style.setProperty("display", "inline-block");
-    }
-  };
-  const applyRotation = (element, edit) => {
-    const angle = finiteNumber(edit.angle);
-    if (angle == null) return;
-    prepareRotationBase(element);
-    element.setAttribute(ROTATION_ATTR, "true");
-    element.style.setProperty(ROTATION_PROP, `${roundRotationAngle(angle)}deg`);
-    element.style.setProperty("transform-origin", ROTATION_TRANSFORM_ORIGIN);
-    element.style.setProperty("rotate", composeRotation(element, `var(${ROTATION_PROP}, 0deg)`));
-  };
-  const applyManifest = () => {
-    let applied = 0;
-    for (const edit of manifestEdits) {
-      const editRecord = objectRecord(edit);
-      if (!editRecord) continue;
-      const element = resolveTarget(editRecord);
-      if (!element) continue;
-      if (editRecord.kind === "path-offset") applyPathOffset(element, editRecord);
-      if (editRecord.kind === "box-size") applyBoxSize(element, editRecord);
-      if (editRecord.kind === "rotation") applyRotation(element, editRecord);
-      applied += 1;
-    }
-    return applied;
-  };
-  runtimeWindow.__hfStudioManualEditsApply = applyManifest;
-  const markWrapped = (fn) => {
-    try {
-      Object.defineProperty(fn, WRAPPED_SEEK_PROP, {
-        configurable: false,
-        enumerable: false,
-        value: true
-      });
-    } catch {
-      try {
-        fn[WRAPPED_SEEK_PROP] = true;
-      } catch {
-      }
-    }
-  };
-  const isWrapped = (fn) => Boolean(fn[WRAPPED_SEEK_PROP]);
-  const wrapFunction = (get, set) => {
-    const fn = get();
-    if (!fn) return false;
-    const seek = fn;
-    if (isWrapped(seek)) {
-      applyManifest();
-      return true;
-    }
-    const wrappedSeek = function(time) {
-      const result = seek.call(this, time);
-      applyManifest();
-      return result;
-    };
-    markWrapped(wrappedSeek);
-    set(wrappedSeek);
-    applyManifest();
-    return true;
-  };
-  const wrapSeekFunctions = () => {
-    const wrappedHfSeek = wrapFunction(
-      () => runtimeWindow.__hf?.seek,
-      (fn) => {
-        if (runtimeWindow.__hf) runtimeWindow.__hf.seek = fn;
-      }
-    );
-    const wrappedPlayerRenderSeek = wrapFunction(
-      () => runtimeWindow.__player?.renderSeek,
-      (fn) => {
-        if (runtimeWindow.__player) runtimeWindow.__player.renderSeek = fn;
-      }
-    );
-    return wrappedHfSeek || wrappedPlayerRenderSeek;
-  };
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => applyManifest(), { once: true });
-  } else {
-    applyManifest();
-  }
-  wrapSeekFunctions();
-  let remainingSeekWrapAttempts = 120;
-  const seekWrapInterval = setInterval(() => {
-    wrapSeekFunctions();
-    remainingSeekWrapAttempts -= 1;
-    if (remainingSeekWrapAttempts <= 0) clearInterval(seekWrapInterval);
-  }, 50);
-}
-
-// src/routes/thumbnail.ts
 var THUMBNAIL_CACHE_VERSION = "v4";
 function registerThumbnailRoutes(api, adapter) {
   api.get("/projects/:id/thumbnail/*", async (c) => {
@@ -4457,8 +3808,8 @@ function registerThumbnailRoutes(api, adapter) {
     let sourceMtime = 0;
     let sourceKey = "";
     const htmlFile = join11(project.dir, compPath);
-    if (existsSync7(htmlFile)) {
-      const html = readFileSync10(htmlFile, "utf-8");
+    if (existsSync8(htmlFile)) {
+      const html = readFileSync11(htmlFile, "utf-8");
       sourceKey = `_${createHash4("sha1").update(html).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.round(statSync4(htmlFile).mtimeMs);
       if (!vpWidth) {
@@ -4470,15 +3821,15 @@ function registerThumbnailRoutes(api, adapter) {
     }
     const manualEditsFile = join11(project.dir, STUDIO_MANUAL_EDITS_PATH);
     let manualEditsKey = "";
-    if (existsSync7(manualEditsFile)) {
-      const manualEditsContent = readFileSync10(manualEditsFile, "utf-8");
+    if (existsSync8(manualEditsFile)) {
+      const manualEditsContent = readFileSync11(manualEditsFile, "utf-8");
       manualEditsKey = `_${createHash4("sha1").update(manualEditsContent).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.max(sourceMtime, Math.round(statSync4(manualEditsFile).mtimeMs));
     }
     const motionFile = join11(project.dir, STUDIO_MOTION_PATH);
     let motionKey = "";
-    if (existsSync7(motionFile)) {
-      const motionContent = readFileSync10(motionFile, "utf-8");
+    if (existsSync8(motionFile)) {
+      const motionContent = readFileSync11(motionFile, "utf-8");
       motionKey = `_${createHash4("sha1").update(motionContent).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.max(sourceMtime, Math.round(statSync4(motionFile).mtimeMs));
     }
@@ -4488,8 +3839,8 @@ function registerThumbnailRoutes(api, adapter) {
     const urlVersionKey = urlVersion ? `_${urlVersion.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 32)}` : "";
     const cacheKey = `${THUMBNAIL_CACHE_VERSION}${urlVersionKey}${manualEditsKey}${motionKey}${sourceKey}_${format}_${compPath.replace(/\//g, "_")}_${compW}x${compH}_${sourceMtime}_${seekTime.toFixed(2)}${selectorKey}.${format === "png" ? "png" : "jpg"}`;
     const cachePath = join11(cacheDir, cacheKey);
-    if (existsSync7(cachePath)) {
-      return new Response(new Uint8Array(readFileSync10(cachePath)), {
+    if (existsSync8(cachePath)) {
+      return new Response(new Uint8Array(readFileSync11(cachePath)), {
         headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
       });
     }
@@ -4511,7 +3862,7 @@ function registerThumbnailRoutes(api, adapter) {
           500
         );
       }
-      if (!existsSync7(cacheDir)) mkdirSync5(cacheDir, { recursive: true });
+      if (!existsSync8(cacheDir)) mkdirSync5(cacheDir, { recursive: true });
       writeFileSync6(cachePath, buffer);
       return new Response(new Uint8Array(buffer), {
         headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
@@ -4524,7 +3875,7 @@ function registerThumbnailRoutes(api, adapter) {
 }
 
 // src/routes/waveform.ts
-import { existsSync as existsSync8, readFileSync as readFileSync11, writeFileSync as writeFileSync7, mkdirSync as mkdirSync6 } from "fs";
+import { existsSync as existsSync9, readFileSync as readFileSync12, writeFileSync as writeFileSync7, mkdirSync as mkdirSync6 } from "fs";
 import { join as join12 } from "path";
 function registerWaveformRoutes(api, adapter) {
   api.get("/projects/:id/waveform/*", async (c) => {
@@ -4534,12 +3885,12 @@ function registerWaveformRoutes(api, adapter) {
       c.req.path.replace(`/projects/${project.id}/waveform/`, "").split("?")[0] ?? ""
     );
     const audioPath = join12(project.dir, assetPath);
-    if (!existsSync8(audioPath)) return c.json({ error: "file not found" }, 404);
+    if (!existsSync9(audioPath)) return c.json({ error: "file not found" }, 404);
     const cacheDir = join12(project.dir, ".waveform-cache");
     const cachePath = join12(cacheDir, buildWaveformCacheKey(assetPath));
-    if (existsSync8(cachePath)) {
+    if (existsSync9(cachePath)) {
       try {
-        const peaks2 = JSON.parse(readFileSync11(cachePath, "utf-8"));
+        const peaks2 = JSON.parse(readFileSync12(cachePath, "utf-8"));
         return c.json({ peaks: peaks2 });
       } catch {
       }
@@ -4823,102 +4174,29 @@ function registerSelectionRoutes(api, adapter) {
 
 // src/routes/media.ts
 import { streamSSE as streamSSE2 } from "hono/streaming";
-import { existsSync as existsSync9, mkdirSync as mkdirSync7 } from "fs";
-import { basename as basename2, dirname as dirname2, extname as extname3, join as join13 } from "path";
-
-// src/helpers/mediaMetadata.ts
-import { spawnSync as spawnSync2 } from "child_process";
-import { extname as extname2 } from "path";
-var VIDEO_EXT2 = /* @__PURE__ */ new Set([".mp4", ".mov", ".webm", ".mkv", ".avi", ".m4v"]);
-var IMAGE_EXT = /* @__PURE__ */ new Set([".jpg", ".jpeg", ".png", ".webp", ".avif"]);
-var AUDIO_EXT2 = /* @__PURE__ */ new Set([".mp3", ".wav", ".ogg", ".m4a", ".aac"]);
-function lower(value) {
-  return value?.toLowerCase() ?? "";
-}
-function inferKindFromPath(path) {
-  const ext = extname2(path).toLowerCase();
-  if (VIDEO_EXT2.has(ext)) return "video";
-  if (IMAGE_EXT.has(ext)) return "image";
-  if (AUDIO_EXT2.has(ext)) return "audio";
-  return "unknown";
-}
-function colorLabel(input) {
-  if (input.isHdr) {
-    if (input.hdrTransfer === "pq") return "HDR PQ";
-    if (input.hdrTransfer === "hlg") return "HDR HLG";
-    return "HDR";
-  }
-  if (input.colorPrimaries.includes("bt709") || input.colorSpace.includes("bt709") || input.colorTransfer.includes("bt709")) {
-    return "SDR Rec.709";
-  }
-  return "SDR/unknown";
-}
-function classifyMediaColor(stream) {
-  const colorPrimaries = lower(stream?.color_primaries);
-  const colorSpace = lower(stream?.color_space);
-  const colorTransfer = lower(stream?.color_transfer);
-  const isHdr = colorPrimaries.includes("bt2020") || colorSpace.includes("bt2020") || colorTransfer === "smpte2084" || colorTransfer === "arib-std-b67";
-  const hdrTransfer = isHdr ? colorTransfer === "smpte2084" ? "pq" : colorTransfer === "arib-std-b67" ? "hlg" : "unknown" : null;
-  return {
-    dynamicRange: stream ? isHdr ? "hdr" : "sdr" : "unknown",
-    hdrTransfer,
-    label: stream ? colorLabel({ isHdr, hdrTransfer, colorPrimaries, colorSpace, colorTransfer }) : "Unknown",
-    isHdr,
-    codecName: stream?.codec_name,
-    profile: stream?.profile,
-    pixelFormat: stream?.pix_fmt,
-    colorSpace: stream?.color_space,
-    colorTransfer: stream?.color_transfer,
-    colorPrimaries: stream?.color_primaries,
-    bitsPerRawSample: stream?.bits_per_raw_sample
-  };
-}
-function probeMediaMetadata(filePath, runner = spawnSync2) {
-  const kind = inferKindFromPath(filePath);
-  if (kind === "audio" || kind === "unknown") {
-    return { kind, color: classifyMediaColor(null) };
-  }
-  const result = runner(
-    "ffprobe",
-    [
-      "-v",
-      "error",
-      "-show_entries",
-      "stream=codec_type,codec_name,profile,pix_fmt,color_space,color_transfer,color_primaries,bits_per_raw_sample",
-      "-of",
-      "json",
-      filePath
-    ],
-    { timeout: 15e3, maxBuffer: 1024 * 1024 }
-  );
-  if (result.error?.code === "ENOENT") {
-    return { kind, color: classifyMediaColor(null), probeError: "ffprobe unavailable" };
-  }
-  if (result.status !== 0) {
-    return { kind, color: classifyMediaColor(null), probeError: "ffprobe failed" };
-  }
-  try {
-    const parsed = JSON.parse(String(result.stdout || "{}"));
-    const stream = parsed.streams?.find(
-      (item) => kind === "image" ? item.codec_type === "video" : item.codec_type === kind
-    );
-    return { kind, color: classifyMediaColor(stream) };
-  } catch {
-    return { kind, color: classifyMediaColor(null), probeError: "ffprobe returned invalid json" };
-  }
-}
-
-// src/routes/media.ts
-var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([".mp4", ".mov", ".webm", ".mkv", ".avi"]);
+import { existsSync as existsSync10, mkdirSync as mkdirSync7 } from "fs";
+import { basename as basename2, dirname as dirname3, extname as extname2, join as join13 } from "path";
+var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".mp4",
+  ".mov",
+  ".webm",
+  ".mkv",
+  ".avi",
+  ".m4v",
+  ".mxf",
+  ".mts",
+  ".m2ts",
+  ".ts"
+]);
 var IMAGE_EXTENSIONS = /* @__PURE__ */ new Set([".jpg", ".jpeg", ".png", ".webp"]);
 var VIDEO_OUTPUT_EXTENSIONS = /* @__PURE__ */ new Set([".webm", ".mov"]);
 var QUALITIES = /* @__PURE__ */ new Set(["fast", "balanced", "best"]);
 var DEVICES = /* @__PURE__ */ new Set(["auto", "cpu", "coreml", "cuda"]);
 function isVideoPath(path) {
-  return VIDEO_EXTENSIONS.has(extname3(path).toLowerCase());
+  return VIDEO_EXTENSIONS.has(extname2(path).toLowerCase());
 }
 function isImagePath(path) {
-  return IMAGE_EXTENSIONS.has(extname3(path).toLowerCase());
+  return IMAGE_EXTENSIONS.has(extname2(path).toLowerCase());
 }
 function normalizeProjectAssetPath(path) {
   return path.trim().replace(/^[.]\//, "").replace(/[?#].*$/, "");
@@ -4927,14 +4205,14 @@ function containsNullByte(path) {
   return path.includes("\0");
 }
 function slugFileBase(path) {
-  const name = basename2(path, extname3(path)).replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
+  const name = basename2(path, extname2(path)).replace(/[^a-zA-Z0-9._-]+/g, "-").replace(/^-+|-+$/g, "");
   return name || "media";
 }
 function uniqueAssetPath(projectDir, assetPath) {
-  const ext = extname3(assetPath);
+  const ext = extname2(assetPath);
   const withoutExt = assetPath.slice(0, -ext.length);
   let candidate = assetPath;
-  for (let index = 2; existsSync9(join13(projectDir, candidate)); index++) {
+  for (let index = 2; existsSync10(join13(projectDir, candidate)); index++) {
     candidate = `${withoutExt}-${index}${ext}`;
   }
   return candidate;
@@ -4985,8 +4263,8 @@ function registerMediaRoutes(api, adapter, options = {}) {
     }
     const filePath = resolveWithinProject(project.dir, assetPath);
     if (!filePath) return c.json({ error: "forbidden" }, 403);
-    if (!existsSync9(filePath)) return c.json({ error: "media not found" }, 404);
-    return c.json({ path: assetPath, metadata: readMediaMetadata(filePath) });
+    if (!existsSync10(filePath)) return c.json({ error: "media not found" }, 404);
+    return c.json({ path: assetPath, metadata: await readMediaMetadata(filePath) });
   });
   api.post(
     "/projects/:id/media/remove-background",
@@ -5007,7 +4285,7 @@ function registerMediaRoutes(api, adapter, options = {}) {
       }
       const inputPath = resolveWithinProject(project.dir, inputAssetPath);
       if (!inputPath) return c.json({ error: "forbidden" }, 403);
-      if (!existsSync9(inputPath)) return c.json({ error: "input media not found" }, 404);
+      if (!existsSync10(inputPath)) return c.json({ error: "input media not found" }, 404);
       const inputIsVideo = isVideoPath(inputAssetPath);
       const inputIsImage = isImagePath(inputAssetPath);
       if (!inputIsVideo && !inputIsImage) {
@@ -5023,10 +4301,10 @@ function registerMediaRoutes(api, adapter, options = {}) {
       const outputAssetPath = requestedOutput ? uniqueAssetPath(project.dir, requestedOutput) : defaultOutputPath(project.dir, inputAssetPath);
       const outputPath = resolveWithinProject(project.dir, outputAssetPath);
       if (!outputPath) return c.json({ error: "forbidden" }, 403);
-      if (inputIsVideo && !VIDEO_OUTPUT_EXTENSIONS.has(extname3(outputAssetPath).toLowerCase())) {
+      if (inputIsVideo && !VIDEO_OUTPUT_EXTENSIONS.has(extname2(outputAssetPath).toLowerCase())) {
         return c.json({ error: "video background removal output must be .webm or .mov" }, 400);
       }
-      if (inputIsImage && extname3(outputAssetPath).toLowerCase() !== ".png") {
+      if (inputIsImage && extname2(outputAssetPath).toLowerCase() !== ".png") {
         return c.json({ error: "image background removal output must be .png" }, 400);
       }
       let backgroundOutputAssetPath;
@@ -5041,8 +4319,8 @@ function registerMediaRoutes(api, adapter, options = {}) {
           return c.json({ error: "forbidden" }, 403);
         }
       }
-      mkdirSync7(dirname2(outputPath), { recursive: true });
-      if (backgroundOutputPath) mkdirSync7(dirname2(backgroundOutputPath), { recursive: true });
+      mkdirSync7(dirname3(outputPath), { recursive: true });
+      if (backgroundOutputPath) mkdirSync7(dirname3(backgroundOutputPath), { recursive: true });
       const jobId = makeJobId(project.id, mediaJobs);
       const state = adapter.startBackgroundRemoval({
         project,
@@ -5099,14 +4377,14 @@ function registerMediaRoutes(api, adapter, options = {}) {
 }
 
 // src/routes/globalAssets.ts
-import { existsSync as existsSync10, readFileSync as readFileSync12 } from "fs";
+import { existsSync as existsSync11, readFileSync as readFileSync13 } from "fs";
 import { homedir } from "os";
 import { join as join14 } from "path";
 function readGlobalAssets(home = homedir()) {
   const manifestPath = join14(home, ".media", "manifest.jsonl");
-  if (!existsSync10(manifestPath)) return [];
+  if (!existsSync11(manifestPath)) return [];
   const out = [];
-  for (const line of readFileSync12(manifestPath, "utf8").split("\n")) {
+  for (const line of readFileSync13(manifestPath, "utf8").split("\n")) {
     if (!line.trim()) continue;
     try {
       const rec = JSON.parse(line);
@@ -5142,29 +4420,6 @@ function createStudioApi(adapter) {
   return api;
 }
 
-// src/helpers/screenshotClip.ts
-function getElementScreenshotClip(selector, selectorIndex) {
-  const matches = Array.from(document.querySelectorAll(selector)).filter(
-    (el2) => el2 instanceof HTMLElement
-  );
-  const safeIndex = Math.max(0, Math.min(matches.length - 1, Math.floor(selectorIndex ?? 0)));
-  const el = matches[safeIndex] ?? null;
-  if (!(el instanceof HTMLElement)) return void 0;
-  const rect = el.getBoundingClientRect();
-  if (rect.width < 4 || rect.height < 4) return void 0;
-  const pad = 8;
-  const x = Math.max(0, rect.left - pad);
-  const y = Math.max(0, rect.top - pad);
-  const maxWidth = window.innerWidth - x;
-  const maxHeight = window.innerHeight - y;
-  return {
-    x,
-    y,
-    width: Math.max(1, Math.min(rect.width + pad * 2, maxWidth)),
-    height: Math.max(1, Math.min(rect.height + pad * 2, maxHeight))
-  };
-}
-
 // src/helpers/backgroundRemovalJob.ts
 function createBackgroundRemovalJob(opts, render) {
   const state = {