@hyperframes/studio-server 0.7.59 → 0.7.61

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-XVQX2JHE.js";
+import {
+  getElementScreenshotClip
+} from "./chunk-W2SBTCO2.js";
+import {
+  injectMediaCodecMap,
+  isAutoProxyEnabled,
+  proxyEtagSalt,
+  resolvePreviewMediaCodecProbeCache
+} from "./chunk-ZUW4PULZ.js";
+import {
+  ProxyCapacityError,
+  ProxyTranscodeError,
+  resolveProxy
+} from "./chunk-YBR7MXIO.js";
+import {
+  PROXY_VARIANT_CONFIG,
+  decideMediaProxyEligibility,
+  isProxyVariantRequest,
+  probeAssetCodec,
+  probeMediaMetadata,
+  resolveProxyVariantRequest
+} from "./chunk-LVXVG4V6.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";
 
@@ -288,9 +333,13 @@ function registerStoryboardRoutes(api, adapter) {
 // src/routes/files.ts
 import { bodyLimit } from "hono/body-limit";
 import {
+  closeSync,
   existsSync as existsSync3,
+  ftruncateSync,
+  openSync,
   readFileSync as readFileSync4,
   writeFileSync as writeFileSync4,
+  writeSync,
   mkdirSync as mkdirSync3,
   unlinkSync as unlinkSync2,
   rmSync as rmSync2,
@@ -298,7 +347,7 @@ import {
   renameSync,
   readdirSync as readdirSync4
 } from "fs";
-import { resolve as resolve3, dirname, join as join6 } from "path";
+import { resolve as resolve2, dirname, join as join6 } from "path";
 
 // src/helpers/mime.ts
 var MIME_TYPES = {
@@ -315,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",
@@ -343,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";
@@ -366,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,
@@ -426,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);
@@ -544,29 +595,36 @@ function pruneBackups(backupDir, backupKey, keepPerFile) {
   }
 }
 
-// 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)
+// src/helpers/fileVersion.ts
+import { createHash as createHash2, randomUUID } from "crypto";
+var RECEIPT_TTL_MS = 1e4;
+var receipts = /* @__PURE__ */ new Map();
+function fileContentVersion(content) {
+  return `"sha256:${createHash2("sha256").update(content, "utf8").digest("hex")}"`;
+}
+function createWriteToken(requestToken) {
+  const token = requestToken?.trim();
+  return token && token.length <= 200 ? token : randomUUID();
+}
+function recordFileWriteReceipt(absPath, receipt) {
+  const now = Date.now();
+  const current = (receipts.get(absPath) ?? []).filter(
+    (entry) => now - entry.recordedAt < RECEIPT_TTL_MS
   );
+  current.push({ ...receipt, recordedAt: now });
+  receipts.set(absPath, current);
 }
-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)
-  });
+function consumeFileWriteReceipt(absPath) {
+  const now = Date.now();
+  const current = (receipts.get(absPath) ?? []).filter(
+    (entry) => now - entry.recordedAt < RECEIPT_TTL_MS
+  );
+  const receipt = current.shift() ?? null;
+  if (current.length > 0) receipts.set(absPath, current);
+  else receipts.delete(absPath);
+  if (!receipt) return null;
+  const { path, version, writeToken } = receipt;
+  return { path, version, writeToken };
 }
 
 // src/routes/files.ts
@@ -596,429 +654,7 @@ import {
   scalePositionsInScript,
   dedupePositionWritesInScript
 } from "@hyperframes/parsers/gsap-writer-acorn";
-
-// src/helpers/sourceMutation.ts
 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);
-  }
-  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;
-  }
-  return [];
-}
-function escapeCssAttrValue(value) {
-  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-}
-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 findTargetElement(document2, target) {
-  if (target.hfId) {
-    const el = findByHfId(document2, target.hfId);
-    if (el) return el;
-  }
-  if (target.id) {
-    const byId = document2.getElementById(target.id);
-    if (byId) return byId;
-  }
-  if (!target.selector) return null;
-  try {
-    const matches = querySelectorAllWithTemplates(document2, target.selector);
-    return matches[target.selectorIndex ?? 0] ?? null;
-  } catch {
-    return null;
-  }
-}
-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 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 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 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++}`;
-    }
-  }
-  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
-  };
-}
-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 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(
-    "style",
-    `position: absolute; left: ${bbox.left}px; top: ${bbox.top}px; width: ${bbox.width}px; height: ${bbox.height}px` + (maxZ !== null ? `; z-index: ${maxZ}` : "")
-  );
-  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);
-  }
-  const groupId = group.id || void 0;
-  group.remove();
-  return {
-    html: wrappedFragment ? document2.body.innerHTML || "" : document2.toString(),
-    unwrapped: true,
-    unwrappedGroupId: groupId,
-    members,
-    groupCenter
-  };
-}
-
-// 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";
@@ -1208,7 +844,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 (existsSync3(resolve2(projectDir, candidate))) {
     num++;
     candidate = `${cleanBase} (copy ${num})${ext}`;
   }
@@ -1219,7 +855,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)) {
@@ -1246,10 +882,10 @@ function updateReferences(projectDir, oldPath, newPath) {
   return updatedCount;
 }
 function extractGsapScriptBlock(html) {
-  const { document: document2 } = parseHTML2(html);
+  const { document } = parseHTML(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])"))
     )
   ];
@@ -1258,10 +894,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();
         }
       };
     }
@@ -1359,11 +995,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;
@@ -1433,11 +1069,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 {
@@ -1570,9 +1206,11 @@ async function applyGsapMutations(c, res, mutations) {
     after: newHtml,
     scriptText: block.scriptText,
     path: res.filePath,
+    version: fileContentVersion(newHtml),
     backupPath
   };
   if (skippedSelectors.size > 0) responsePayload.skippedSelectors = [...skippedSelectors];
+  c.header("ETag", responsePayload.version);
   return c.json(responsePayload);
 }
 function executeGsapMutationAcorn(body, block, respond) {
@@ -2188,7 +1826,7 @@ async function processUploadedFiles(formData, targetDir, projectDir) {
       skipped.push(name);
       continue;
     }
-    const destPath = resolve3(targetDir, name);
+    const destPath = resolve2(targetDir, name);
     if (!isSafePath(projectDir, destPath)) continue;
     let finalPath = destPath;
     let finalName = name;
@@ -2198,13 +1836,13 @@ async function processUploadedFiles(formData, targetDir, projectDir) {
       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 && existsSync3(resolve2(targetDir, `${base} (${n})${ext}`))) n++;
       if (n >= MAX_COPY_INDEX) {
         skipped.push(name);
         continue;
       }
       finalName = `${base} (${n})${ext}`;
-      finalPath = resolve3(targetDir, finalName);
+      finalPath = resolve2(targetDir, finalName);
     }
     const buffer = Buffer.from(await value.arrayBuffer());
     const validation = validateUploadedMediaBuffer(finalName, buffer);
@@ -2233,19 +1871,111 @@ function registerFileRoutes(api, adapter) {
       return c.json({ error: "not found" }, 404);
     }
     const content = readFileSync4(res.absPath, "utf-8");
-    return c.json({ filename: res.filePath, content });
+    const version = fileContentVersion(content);
+    c.header("ETag", version);
+    return c.json({ filename: res.filePath, content, version });
   });
   api.put("/projects/:id/files/*", async (c) => {
     const res = await resolveProjectFile(c, adapter);
     if ("error" in res) return res.error;
-    ensureDir(res.absPath);
     const body = await c.req.text();
-    const backup = snapshotBeforeWrite(res.project.dir, res.absPath);
-    if (backup.error) console.warn(`Failed to create backup for ${res.filePath}: ${backup.error}`);
-    writeFileSync4(res.absPath, body, "utf-8");
+    const expectedVersion = c.req.header("If-Match")?.trim() ?? null;
+    const createOnly = c.req.header("If-None-Match")?.trim() === "*";
+    if (expectedVersion === null && !createOnly) {
+      let currentContent = null;
+      try {
+        currentContent = readFileSync4(res.absPath, "utf-8");
+      } catch (error) {
+        if (!error || typeof error !== "object" || !("code" in error) || error.code !== "ENOENT") {
+          throw error;
+        }
+      }
+      return c.json(
+        {
+          error: "precondition required",
+          path: res.filePath,
+          currentVersion: currentContent === null ? null : fileContentVersion(currentContent),
+          currentContent
+        },
+        428
+      );
+    }
+    let backup = { backupPath: null };
+    if (createOnly) {
+      ensureDir(res.absPath);
+      let fd;
+      try {
+        fd = openSync(res.absPath, "wx");
+      } catch (error) {
+        if (!error || typeof error !== "object" || !("code" in error) || error.code !== "EEXIST") {
+          throw error;
+        }
+        const currentContent = readFileSync4(res.absPath, "utf-8");
+        return c.json(
+          {
+            error: "file conflict",
+            path: res.filePath,
+            currentVersion: fileContentVersion(currentContent),
+            currentContent
+          },
+          409
+        );
+      }
+      try {
+        writeSync(fd, body, 0, "utf-8");
+      } finally {
+        closeSync(fd);
+      }
+    } else {
+      let fd;
+      try {
+        fd = openSync(res.absPath, "r+");
+      } catch (error) {
+        if (!error || typeof error !== "object" || !("code" in error) || error.code !== "ENOENT") {
+          throw error;
+        }
+        return c.json(
+          {
+            error: "file conflict",
+            path: res.filePath,
+            currentVersion: null,
+            currentContent: null
+          },
+          409
+        );
+      }
+      try {
+        const currentContent = readFileSync4(fd, "utf-8");
+        const currentVersion = fileContentVersion(currentContent);
+        if (expectedVersion !== currentVersion) {
+          return c.json(
+            {
+              error: "file conflict",
+              path: res.filePath,
+              currentVersion,
+              currentContent
+            },
+            409
+          );
+        }
+        backup = snapshotBeforeWrite(res.project.dir, res.absPath);
+        if (backup.error)
+          console.warn(`Failed to create backup for ${res.filePath}: ${backup.error}`);
+        ftruncateSync(fd, 0);
+        writeSync(fd, body, 0, "utf-8");
+      } finally {
+        closeSync(fd);
+      }
+    }
+    const version = fileContentVersion(body);
+    const writeToken = createWriteToken(c.req.header("X-Hyperframes-Write-Token"));
+    recordFileWriteReceipt(res.absPath, { path: res.filePath, version, writeToken });
+    c.header("ETag", version);
     return c.json({
       ok: true,
       path: res.filePath,
+      version,
+      writeToken,
       backupPath: backupPathForResponse(res.project.dir, backup.backupPath)
     });
   });
@@ -2317,17 +2047,28 @@ function registerFileRoutes(api, adapter) {
       fallbackTiming
     );
     if (!result.matched) {
-      return c.json({ ok: false, changed: false, content: originalContent, path: ctx.filePath });
+      const version2 = fileContentVersion(originalContent);
+      c.header("ETag", version2);
+      return c.json({
+        ok: false,
+        changed: false,
+        content: originalContent,
+        path: ctx.filePath,
+        version: version2
+      });
     }
     const backup = snapshotBeforeWrite(ctx.project.dir, ctx.absPath);
     if (backup.error) console.warn(`Failed to create backup for ${ctx.filePath}: ${backup.error}`);
     writeFileSync4(ctx.absPath, result.html, "utf-8");
+    const version = fileContentVersion(result.html);
+    c.header("ETag", version);
     return c.json({
       ok: true,
       changed: true,
       content: result.html,
       newId: result.newId,
       path: ctx.filePath,
+      version,
       backupPath: backupPathForResponse(ctx.project.dir, backup.backupPath)
     });
   });
@@ -2650,13 +2391,13 @@ function registerFileRoutes(api, adapter) {
 // src/routes/preview.ts
 import { existsSync as existsSync5, readFileSync as readFileSync7, statSync as statSync2 } from "fs";
 import { join as join8 } from "path";
-import { createHash as createHash2 } from "crypto";
+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 { join as join7 } from "path";
-import { parseHTML as parseHTML3 } from "linkedom";
+import { parseHTML as parseHTML2 } from "linkedom";
 import {
   rewriteAssetPaths,
   rewriteCssAssetUrls,
@@ -2704,7 +2445,7 @@ function fixDigitLeadingIdSelectors(root) {
   }
 }
 function extractFullDocumentParts(rawHtml, compPath) {
-  const { document: doc } = parseHTML3(rawHtml);
+  const { document: doc } = parseHTML2(rawHtml);
   const rewriteTargets = [doc.head, doc.body].filter(Boolean);
   for (const target of rewriteTargets) {
     rewriteRelativePaths(target, compPath);
@@ -2718,7 +2459,7 @@ function extractFullDocumentParts(rawHtml, compPath) {
   return { headContent, bodyContent, htmlAttrs, bodyAttrs };
 }
 function extractTemplateInnerHtml(rawComp) {
-  const { document: doc } = parseHTML3(rawComp);
+  const { document: doc } = parseHTML2(rawComp);
   const template = doc.querySelector("template");
   return template ? template.innerHTML : null;
 }
@@ -2770,7 +2511,7 @@ function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, raw
   let bodyAttrs = "";
   const templateInner = extractTemplateInnerHtml(rawComp);
   if (templateInner != null) {
-    const { document: contentDoc } = parseHTML3(
+    const { document: contentDoc } = parseHTML2(
       `<!DOCTYPE html><html><head></head><body>${templateInner}</body></html>`
     );
     rewriteRelativePaths(contentDoc, compPath);
@@ -2784,7 +2525,7 @@ function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, raw
     htmlAttrs = parts.htmlAttrs;
     bodyAttrs = parts.bodyAttrs;
   } else {
-    const { document: contentDoc } = parseHTML3(
+    const { document: contentDoc } = parseHTML2(
       `<!DOCTYPE html><html><head></head><body>${rawComp}</body></html>`
     );
     rewriteRelativePaths(contentDoc, compPath);
@@ -2829,210 +2570,23 @@ ${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,
+  closeSync as closeSync2,
   constants,
   fstatSync,
-  ftruncateSync,
-  openSync,
+  ftruncateSync as ftruncateSync2,
+  openSync as openSync2,
   readFileSync as readFileSync6,
   writeFileSync as writeFileSync5,
-  writeSync
+  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) {
@@ -3050,7 +2604,7 @@ function persistHfIdsIfNeeded(filePath, html) {
 function openNoFollow(filePath, flags) {
   const noFollow = constants.O_NOFOLLOW ?? 0;
   try {
-    return openSync(filePath, flags | noFollow);
+    return openSync2(filePath, flags | noFollow);
   } catch {
     return null;
   }
@@ -3066,19 +2620,19 @@ function stampFileHfIds(filePath) {
   try {
     if (!fstatSync(fd).isFile()) return null;
     const html = readFileSync6(fd, "utf-8");
-    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 (writable && idsAfter > idsBefore) {
-      ftruncateSync(fd, 0);
-      writeSync(fd, normalized, 0, "utf-8");
+      ftruncateSync2(fd, 0);
+      writeSync2(fd, normalized, 0, "utf-8");
     }
     return normalized;
   } catch (err) {
     console.warn("[hyperframes] stampFileHfIds: failed to stamp ids:", err);
     return null;
   } finally {
-    closeSync(fd);
+    closeSync2(fd);
   }
 }
 
@@ -3234,7 +2788,7 @@ function parsePreviewVariablesParam(raw) {
 }
 function variablesEtagSalt(raw) {
   if (!raw) return "";
-  return `:vars:${createHash2("sha1").update(raw).digest("hex").slice(0, 12)}`;
+  return `:vars:${createHash3("sha1").update(raw).digest("hex").slice(0, 12)}`;
 }
 function previewVariablesFromRequest(rawVariables) {
   const parse = parsePreviewVariablesParam(rawVariables);
@@ -3268,11 +2822,17 @@ 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" };
+    return {
+      html: readFileSync7(indexPath, "utf-8"),
+      compositionPath: "index.html"
+    };
   }
   const blockHtmlPath = join8(projectDir, `${projectId}.html`);
   if (existsSync5(blockHtmlPath)) {
-    return { html: readFileSync7(blockHtmlPath, "utf-8"), compositionPath: `${projectId}.html` };
+    return {
+      html: readFileSync7(blockHtmlPath, "utf-8"),
+      compositionPath: `${projectId}.html`
+    };
   }
   return null;
 }
@@ -3281,6 +2841,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);
@@ -3291,7 +2852,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;
@@ -3314,12 +2878,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);
@@ -3337,6 +2908,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);
@@ -3363,7 +2941,10 @@ ${runtimeTag}`;
     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);
@@ -3376,9 +2957,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) => {
@@ -3397,15 +2979,49 @@ ${runtimeTag}`;
     }
     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(readFileSync7(file, "utf-8"), "utf-8") : readFileSync7(servedPath);
     const totalSize = buffer.length;
     const rangeHeader = c.req.header("Range");
     if (rangeHeader) {
@@ -3419,7 +3035,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)
@@ -3430,7 +3046,7 @@ ${runtimeTag}`;
     return new Response(new Uint8Array(buffer), {
       headers: {
         ...cacheHeaders,
-        "Content-Type": contentType,
+        "Content-Type": servedContentType,
         "Accept-Ranges": "bytes",
         "Content-Length": String(totalSize)
       }
@@ -3706,587 +3322,7 @@ 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 { join as join11 } from "path";
-import { createHash as createHash3 } 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
+import { createHash as createHash4 } from "crypto";
 var THUMBNAIL_CACHE_VERSION = "v4";
 function registerThumbnailRoutes(api, adapter) {
   api.get("/projects/:id/thumbnail/*", async (c) => {
@@ -4318,7 +3354,7 @@ function registerThumbnailRoutes(api, adapter) {
     const htmlFile = join11(project.dir, compPath);
     if (existsSync7(htmlFile)) {
       const html = readFileSync10(htmlFile, "utf-8");
-      sourceKey = `_${createHash3("sha1").update(html).digest("hex").slice(0, 16)}`;
+      sourceKey = `_${createHash4("sha1").update(html).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.round(statSync4(htmlFile).mtimeMs);
       if (!vpWidth) {
         const wMatch = html.match(/data-width=["'](\d+)["']/);
@@ -4331,14 +3367,14 @@ function registerThumbnailRoutes(api, adapter) {
     let manualEditsKey = "";
     if (existsSync7(manualEditsFile)) {
       const manualEditsContent = readFileSync10(manualEditsFile, "utf-8");
-      manualEditsKey = `_${createHash3("sha1").update(manualEditsContent).digest("hex").slice(0, 16)}`;
+      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");
-      motionKey = `_${createHash3("sha1").update(motionContent).digest("hex").slice(0, 16)}`;
+      motionKey = `_${createHash4("sha1").update(motionContent).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.max(sourceMtime, Math.round(statSync4(motionFile).mtimeMs));
     }
     const previewUrl = compPath === "index.html" ? `http://${c.req.header("host")}/api/projects/${project.id}/preview` : `http://${c.req.header("host")}/api/projects/${project.id}/preview/comp/${compPath}`;
@@ -4419,7 +3455,7 @@ function registerWaveformRoutes(api, adapter) {
 }
 
 // src/routes/fonts.ts
-import { closeSync as closeSync2, constants as constants2, fstatSync as fstatSync2, openSync as openSync2, readSync } from "fs";
+import { closeSync as closeSync3, constants as constants2, fstatSync as fstatSync2, openSync as openSync3, readSync } from "fs";
 import {
   collectFontFileEntries,
   fontDirectories,
@@ -4526,7 +3562,7 @@ function registerFontRoutes(api) {
     if (!located) return c.json({ error: "font not found" }, 404);
     let fd;
     try {
-      fd = openSync2(located.path, constants2.O_RDONLY | constants2.O_NOFOLLOW);
+      fd = openSync3(located.path, constants2.O_RDONLY | constants2.O_NOFOLLOW);
     } catch {
       return c.json({ error: "font file not accessible" }, 404);
     }
@@ -4548,7 +3584,7 @@ function registerFontRoutes(api) {
     } catch {
       return c.json({ error: "failed to read font file" }, 500);
     } finally {
-      closeSync2(fd);
+      closeSync3(fd);
     }
   });
 }
@@ -4683,101 +3719,28 @@ 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 { basename as basename2, dirname as dirname2, 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(/[?#].*$/, "");
@@ -4786,11 +3749,11 @@ 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++) {
@@ -4845,7 +3808,7 @@ 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) });
+    return c.json({ path: assetPath, metadata: await readMediaMetadata(filePath) });
   });
   api.post(
     "/projects/:id/media/remove-background",
@@ -4882,10 +3845,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;
@@ -5001,29 +3964,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 = {
@@ -5082,12 +4022,14 @@ export {
   STUDIO_MANUAL_EDITS_PATH,
   STUDIO_MOTION_PATH,
   buildSubCompositionHtml,
+  consumeFileWriteReceipt,
   createBackgroundRemovalJob,
   createProjectSignature,
   createStudioApi,
   createStudioManualEditsRenderBodyScript,
   createStudioMotionRenderBodyScript,
   createStudioPositionSeekReapplyScript,
+  fileContentVersion,
   getElementScreenshotClip,
   getMimeType,
   isSafePath,