@hyperframes/studio-server 0.8.133 → 0.8.134

package/dist/index.js

@@ -159,10 +159,10 @@ function registerProjectRoutes(api, adapter) {
 import { bodyLimit } from "hono/body-limit";
 import {
   closeSync,
-  existsSync as existsSync3,
+  existsSync as existsSync4,
   lstatSync as lstatSync2,
   openSync,
-  readFileSync as readFileSync3,
+  readFileSync as readFileSync5,
   readlinkSync,
   unlinkSync as unlinkSync2,
   rmSync as rmSync3,
@@ -172,7 +172,7 @@ import {
   readdirSync as readdirSync2,
   realpathSync
 } from "fs";
-import { resolve as resolve2, dirname as dirname3, join as join5 } from "path";
+import { resolve as resolve2, dirname as dirname3, join as join6 } from "path";
 
 // src/helpers/mime.ts
 var MIME_TYPES = {
@@ -216,8 +216,504 @@ function getMimeType(path) {
   const ext = path.slice(path.lastIndexOf(".")).toLowerCase();
   return MIME_TYPES[ext] || "application/octet-stream";
 }
-function isAudioFile(name) {
-  return (getMimeType(name) ?? "").startsWith("audio/");
+function isAudioFile(name) {
+  return (getMimeType(name) ?? "").startsWith("audio/");
+}
+
+// src/helpers/compositionInputs.ts
+import { readFileSync as readFileSync2 } from "fs";
+import { createHash } from "crypto";
+import { parseHTML as parseHTML3 } from "linkedom";
+
+// src/helpers/subComposition.ts
+import { existsSync, readFileSync } from "fs";
+import { join as join2 } from "path";
+import { parseHTML } from "linkedom";
+import {
+  rewriteAssetPaths,
+  rewriteCssAssetUrls,
+  rewriteInlineStyleAssetUrls
+} from "@hyperframes/core";
+import {
+  deferScriptsUntilFonts,
+  RUNTIME_BOOTSTRAP_ATTR,
+  stripEmbeddedRuntimeScripts
+} from "@hyperframes/core/compiler";
+import { isFullHtmlDocument } from "@hyperframes/core/compiler/html-document";
+import { gsapCdnDist } from "@hyperframes/core/gsap-cdn";
+function rewriteRelativePaths(root, compPath, projectDir) {
+  const assetExists = (path) => existsSync(join2(projectDir, path));
+  rewriteAssetPaths(
+    root.querySelectorAll("[src], [href]"),
+    compPath,
+    (el, attr) => el.getAttribute(attr),
+    (el, attr, value) => el.setAttribute(attr, value),
+    assetExists
+  );
+  rewriteInlineStyleAssetUrls(
+    root.querySelectorAll("[style]"),
+    compPath,
+    (el) => el.getAttribute("style"),
+    (el, value) => el.setAttribute("style", value),
+    assetExists
+  );
+  for (const styleEl of root.querySelectorAll("style")) {
+    styleEl.textContent = rewriteCssAssetUrls(styleEl.textContent || "", compPath, assetExists);
+  }
+}
+function escapeLeadingDigitIdent(id) {
+  return `\\${id.charCodeAt(0).toString(16)} ${id.slice(1)}`;
+}
+var REGEXP_SPECIALS = /[.*+?^${}()|[\]\\]/g;
+function fixDigitLeadingIdSelectors(root) {
+  const digitIds = /* @__PURE__ */ new Set();
+  for (const el of root.querySelectorAll("[id]")) {
+    const id = el.getAttribute("id");
+    if (id && /^\d/.test(id)) digitIds.add(id);
+  }
+  if (digitIds.size === 0) return;
+  for (const styleEl of root.querySelectorAll("style")) {
+    let css = styleEl.textContent || "";
+    for (const id of digitIds) {
+      const pattern = new RegExp(`#${id.replace(REGEXP_SPECIALS, "\\$&")}(?![\\w-])`, "g");
+      css = css.replace(pattern, `#${escapeLeadingDigitIdent(id)}`);
+    }
+    styleEl.textContent = css;
+  }
+}
+function extractFullDocumentParts(rawHtml, compPath, projectDir) {
+  const { document: doc } = parseHTML(rawHtml);
+  const rewriteTargets = [doc.head, doc.body].filter(Boolean);
+  for (const target of rewriteTargets) {
+    rewriteRelativePaths(target, compPath, projectDir);
+  }
+  fixDigitLeadingIdSelectors(doc);
+  const headContent = doc.head?.innerHTML ?? "";
+  const bodyContent = doc.body?.innerHTML ?? "";
+  const htmlEl = doc.documentElement;
+  const htmlAttrs = extractElementAttrs(htmlEl);
+  const bodyAttrs = doc.body ? extractElementAttrs(doc.body) : "";
+  return { headContent, bodyContent, htmlAttrs, bodyAttrs };
+}
+function extractTemplateInnerHtml(rawComp) {
+  const { document: doc } = parseHTML(rawComp);
+  const template = doc.querySelector("template");
+  return template ? template.innerHTML : null;
+}
+function escapeAttrValue(value) {
+  return value.replace(/&/g, "&").replace(/"/g, """);
+}
+function extractElementAttrs(el) {
+  const parts = [];
+  for (let i = 0; i < el.attributes.length; i++) {
+    const attr = el.attributes[i];
+    if (attr.value === "") {
+      parts.push(attr.name);
+    } else {
+      parts.push(`${attr.name}="${escapeAttrValue(attr.value)}"`);
+    }
+  }
+  return parts.join(" ");
+}
+var NON_RENDERED_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "LINK", "META", "TEMPLATE", "NOSCRIPT"]);
+function promoteTemplateCompositionId(rawComp, body) {
+  let templateCompositionId;
+  for (const tag of rawComp.matchAll(/<template\b[^>]*/gi)) {
+    const id = /\bdata-composition-id\s*=\s*["']([^"']+)["']/i.exec(tag[0] ?? "")?.[1];
+    if (id) {
+      templateCompositionId = id;
+      break;
+    }
+  }
+  if (!templateCompositionId) return;
+  if (body.querySelector("[data-composition-id]")) return;
+  const root = Array.from(body.children).find((el) => !NON_RENDERED_TAGS.has(el.tagName));
+  root?.setAttribute("data-composition-id", templateCompositionId);
+}
+function tagRootCompositionFile(bodyHtml, compPath) {
+  const match = bodyHtml.match(/<[a-zA-Z][^>]*\bdata-composition-id=/);
+  if (match?.index == null) return bodyHtml;
+  const tagEnd = bodyHtml.indexOf(">", match.index);
+  if (tagEnd === -1) return bodyHtml;
+  if (bodyHtml.slice(match.index, tagEnd).includes("data-composition-file")) return bodyHtml;
+  return bodyHtml.slice(0, tagEnd) + ` data-composition-file="${compPath}"` + bodyHtml.slice(tagEnd);
+}
+function rootHeadContent(rootHtml) {
+  return rootHtml.match(/<head[^>]*>([\s\S]*?)<\/head>/i)?.[1] ?? "";
+}
+function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, rawOverride) {
+  const compFile = join2(projectDir, compPath);
+  if (!existsSync(compFile)) return null;
+  const rawComp = rawOverride ?? readFileSync(compFile, "utf-8");
+  let compHeadContent = "";
+  let rewrittenContent;
+  let htmlAttrs = "";
+  let bodyAttrs = "";
+  const templateInner = extractTemplateInnerHtml(rawComp);
+  if (templateInner != null) {
+    const { document: contentDoc } = parseHTML(
+      `<!DOCTYPE html><html><head></head><body>${templateInner}</body></html>`
+    );
+    rewriteRelativePaths(contentDoc, compPath, projectDir);
+    fixDigitLeadingIdSelectors(contentDoc);
+    promoteTemplateCompositionId(rawComp, contentDoc.body);
+    rewrittenContent = contentDoc.body.innerHTML || templateInner;
+  } else if (isFullHtmlDocument(rawComp)) {
+    const parts = extractFullDocumentParts(rawComp, compPath, projectDir);
+    compHeadContent = parts.headContent;
+    rewrittenContent = parts.bodyContent;
+    htmlAttrs = parts.htmlAttrs;
+    bodyAttrs = parts.bodyAttrs;
+  } else {
+    const { document: contentDoc } = parseHTML(
+      `<!DOCTYPE html><html><head></head><body>${rawComp}</body></html>`
+    );
+    rewriteRelativePaths(contentDoc, compPath, projectDir);
+    fixDigitLeadingIdSelectors(contentDoc);
+    rewrittenContent = contentDoc.body.innerHTML || rawComp;
+  }
+  rewrittenContent = stripEmbeddedRuntimeScripts(rewrittenContent);
+  const { document: scriptsDoc } = parseHTML(
+    `<!DOCTYPE html><html><head></head><body>${rewrittenContent}</body></html>`
+  );
+  deferScriptsUntilFonts(scriptsDoc);
+  rewrittenContent = scriptsDoc.body.innerHTML;
+  rewrittenContent = tagRootCompositionFile(rewrittenContent, compPath);
+  const indexPath = join2(projectDir, "index.html");
+  let headContent = "";
+  if (existsSync(indexPath)) headContent = rootHeadContent(readFileSync(indexPath, "utf-8"));
+  if (baseHref && !hasBaseElement(headContent)) {
+    headContent = `<base href="${baseHref}">
+${headContent}`;
+  }
+  if (compHeadContent) headContent += `
+${compHeadContent}`;
+  headContent = stripEmbeddedRuntimeScripts(headContent);
+  headContent += `
+<script ${RUNTIME_BOOTSTRAP_ATTR}="1" src="${runtimeUrl}"></script>`;
+  if (!headContent.includes("gsap")) {
+    headContent += `
+<script src="${gsapCdnDist()}gsap.min.js"></script>`;
+  }
+  const htmlOpen = htmlAttrs ? `<html ${htmlAttrs}>` : "<html>";
+  const bodyOpen = bodyAttrs ? `<body ${bodyAttrs}>` : "<body>";
+  return `<!DOCTYPE html>
+${htmlOpen}
+<head>
+${headContent}
+</head>
+${bodyOpen}
+<script>window.__timelines=window.__timelines||{};</script>
+${rewrittenContent}
+</body>
+</html>`;
+}
+function hasBaseElement(html) {
+  return parseHTML(html).document.querySelector("base") !== null;
+}
+
+// src/helpers/compositionInsertion.ts
+import { existsSync as existsSync2 } from "fs";
+import { readProjectFile } from "@hyperframes/parsers/asset-resolution";
+import { randomUUID } from "crypto";
+import { dirname, relative, resolve, sep } from "path";
+import { parseHTML as parseHTML2 } from "linkedom";
+import { ProjectRootMissingError } from "@hyperframes/core";
+var CompositionInsertionError = class extends Error {
+  constructor(message, status) {
+    super(message);
+    this.status = status;
+  }
+  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 [...new Set(found)];
+}
+function compositionRoot(source) {
+  const document = parseHTML2(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 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 canonicalProjectPath(projectDir, candidate) {
+  if (!candidate) {
+    if (folderGone(projectDir)) throw new ProjectRootMissingError(projectDir);
+    throw new CompositionInsertionError("Composition source escapes the project", 400);
+  }
+  if (!existsSync2(candidate)) {
+    throw new CompositionInsertionError("Composition source was not found", 404);
+  }
+  const canonical = realpath(candidate);
+  if (!isSafePath(realpath(projectDir), canonical)) {
+    throw new CompositionInsertionError("Composition source escapes the project", 400);
+  }
+  return canonical;
+}
+function readCompositionSource(file) {
+  const read = readProjectFile(file);
+  if (read.kind === "folder") {
+    throw new CompositionInsertionError("Composition source is a folder, not an HTML file", 400);
+  }
+  if (read.kind === "missing") {
+    throw new CompositionInsertionError("Composition source was not found", 404);
+  }
+  return read.text;
+}
+function validateSourcePath(sourcePath) {
+  if (!sourcePath.trim() || sourcePath.includes("\0") || /^[a-z]+:/i.test(sourcePath)) {
+    throw new CompositionInsertionError("Invalid composition source path", 400);
+  }
+}
+function canonicalProjectFile(projectDir, sourcePath) {
+  validateSourcePath(sourcePath);
+  return canonicalProjectPath(projectDir, resolveWithinProject(projectDir, sourcePath));
+}
+function canonicalDependency(projectDir, ownerAbs, sourcePath) {
+  validateSourcePath(sourcePath);
+  return canonicalProjectPath(
+    projectDir,
+    resolveWithinProject(projectDir, relative(projectDir, resolve(dirname(ownerAbs), sourcePath)))
+  );
+}
+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 = readCompositionSource(file);
+    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));
+      }
+    }
+    visiting.delete(file);
+    visited.add(file);
+  };
+  visit(sourceAbs);
+}
+function numberAttribute(element, name, fallback = 0) {
+  const value = Number.parseFloat(element.getAttribute(name) ?? "");
+  return Number.isFinite(value) ? value : fallback;
+}
+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 relative(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 = readCompositionSource(sourceAbs);
+  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-${randomUUID()}`);
+  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: 0px; top: 0px; width: ${width}px; height: ${height}px; z-index: ${zIndex}`
+  );
+  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));
+  }
+  return { html: document.toString(), hostId, track, duration };
+}
+
+// src/helpers/compositionInputs.ts
+var ROOT_COMPOSITION = "index.html";
+var COMPOSITION_SRC = /\bdata-composition-src\s*=\s*(["'])(.*?)\1/g;
+function projectReader(projectDir) {
+  const sources = /* @__PURE__ */ new Map();
+  return (compPath) => {
+    if (!sources.has(compPath)) {
+      const file = resolveWithinProject(projectDir, compPath);
+      let source = null;
+      try {
+        source = file ? readFileSync2(file, "utf-8") : null;
+      } catch {
+      }
+      sources.set(compPath, source);
+    }
+    return sources.get(compPath) ?? null;
+  };
+}
+function normalizeSource(src) {
+  if (/^[a-z][a-z0-9+.-]*:/i.test(src) || src.startsWith("//")) return null;
+  const path = src.split(/[?#]/)[0]?.replace(/^\.?\//, "") ?? "";
+  return path || null;
+}
+function closureOf(read, compPath) {
+  const closure = /* @__PURE__ */ new Set();
+  const visit = (path) => {
+    if (closure.has(path)) return;
+    closure.add(path);
+    for (const match of (read(path) ?? "").matchAll(COMPOSITION_SRC)) {
+      const mounted = normalizeSource(match[2] ?? "");
+      if (mounted) visit(mounted);
+    }
+  };
+  visit(compPath);
+  return closure;
+}
+function lengthIsTimeline(projectDir, compPath) {
+  const read = projectReader(projectDir);
+  const documents = /* @__PURE__ */ new Map();
+  const elements = (path, selector) => {
+    let document = documents.get(path);
+    if (!document) documents.set(path, document = parseHTML3(read(path) ?? "").document);
+    return descendants(document, selector);
+  };
+  const comp = normalizeSource(compPath) ?? compPath;
+  const unsized = (path) => {
+    const [root] = elements(path, "[data-composition-id]");
+    return Boolean(root && !root.hasAttribute("data-duration"));
+  };
+  if (unsized(ROOT_COMPOSITION)) return true;
+  const hosts = [...closureOf(read, ROOT_COMPOSITION)].flatMap(
+    (path) => elements(path, "[data-composition-src]").filter(
+      (host) => normalizeSource(host.getAttribute("data-composition-src") ?? "") === comp
+    )
+  );
+  if (comp === ROOT_COMPOSITION || hosts.length === 0) return unsized(comp);
+  return hosts.some(
+    (host) => !host.hasAttribute("data-duration") && !host.hasAttribute("data-end")
+  );
+}
+var inputSignatures = /* @__PURE__ */ new Map();
+var rootMemos = /* @__PURE__ */ new Map();
+var sha1 = (text2) => createHash("sha1").update(text2).digest("hex");
+function rootHashes(read) {
+  const source = read(ROOT_COMPOSITION) ?? "";
+  return { root: sha1(source), head: sha1(rootHeadContent(source)) };
+}
+function compositionInputSignature(projectDir, compPath, projectSignature) {
+  const key = `${projectDir}\0${compPath}`;
+  const known = inputSignatures.get(key);
+  if (known?.projectSignature === projectSignature) return known.inputSignature;
+  const read = projectReader(projectDir);
+  const comp = normalizeSource(compPath) ?? compPath;
+  const inputs = closureOf(read, comp).add(ROOT_COMPOSITION);
+  const excluded = new Set(
+    [...closureOf(read, ROOT_COMPOSITION)].filter((path) => !inputs.has(path))
+  );
+  let inputSignature;
+  if (comp === ROOT_COMPOSITION) {
+    inputSignature = createProjectSignature(projectDir, excluded);
+  } else {
+    const hashes = rootHashes(read);
+    if (!rootMemos.has(projectDir)) rootMemos.set(projectDir, { ...hashes, affected: null });
+    inputSignature = `${createProjectSignature(projectDir, excluded.add(ROOT_COMPOSITION))}:${hashes.head}`;
+  }
+  inputSignatures.set(key, { projectSignature, inputSignature });
+  return inputSignature;
+}
+function compositionsAffectedBy(projectDir, changedPath) {
+  const changed = changedPath.replace(/\\/g, "/");
+  const read = projectReader(projectDir);
+  if (changed === ROOT_COMPOSITION) {
+    const now = rootHashes(read);
+    const memo = rootMemos.get(projectDir);
+    if (memo?.root === now.root) return memo.affected;
+    const affected = memo?.head === now.head ? [ROOT_COMPOSITION] : null;
+    rootMemos.set(projectDir, { ...now, affected });
+    return affected;
+  }
+  const mounted = closureOf(read, ROOT_COMPOSITION);
+  if (!mounted.has(changed)) return null;
+  return [...mounted].filter((path) => closureOf(read, path).has(changed));
 }
 
 // src/routes/files.ts
@@ -226,7 +722,7 @@ import { createFileAtomically, replaceFileAtomically as replaceFileAtomically2 }
 // src/helpers/waveform.ts
 import { spawn } from "child_process";
 import {
-  existsSync,
+  existsSync as existsSync3,
   writeFileSync,
   mkdirSync,
   lstatSync,
@@ -235,7 +731,7 @@ import {
   rmSync,
   statSync
 } from "fs";
-import { dirname, join as join2 } from "path";
+import { dirname as dirname2, join as join3 } from "path";
 import { findFfBinary } from "@hyperframes/parsers/ff-binaries";
 var SAMPLE_RATE = 4e3;
 var PEAK_COUNT = 4e3;
@@ -302,12 +798,12 @@ function decodeAudioPeaks(audioPath) {
   });
 }
 async function generateWaveformCache(projectDir, assetPath) {
-  const audioPath = join2(projectDir, assetPath);
-  if (!existsSync(audioPath)) return;
+  const audioPath = join3(projectDir, assetPath);
+  if (!existsSync3(audioPath)) return;
   const stats = statSync(audioPath);
-  const cacheDir = join2(projectDir, ".waveform-cache");
-  const cachePath = join2(cacheDir, buildWaveformCacheKey(assetPath, stats));
-  if (isWaveformCacheDirectory(cacheDir) && existsSync(cachePath)) return;
+  const cacheDir = join3(projectDir, ".waveform-cache");
+  const cachePath = join3(cacheDir, buildWaveformCacheKey(assetPath, stats));
+  if (isWaveformCacheDirectory(cacheDir) && existsSync3(cachePath)) return;
   const peaks = await decodeAudioPeaks(audioPath);
   writeWaveformCache(cachePath, peaks);
 }
@@ -315,7 +811,7 @@ function isWaveformCacheDirectory(cacheDir) {
   return lstatSync(cacheDir, { throwIfNoEntry: false })?.isDirectory() ?? false;
 }
 function writeWaveformCache(cachePath, peaks) {
-  const cacheDir = dirname(cachePath);
+  const cacheDir = dirname2(cachePath);
   try {
     mkdirSync(cacheDir, { mode: 448 });
   } catch (error) {
@@ -324,9 +820,9 @@ function writeWaveformCache(cachePath, peaks) {
   if (!isWaveformCacheDirectory(cacheDir)) {
     throw new Error("Waveform cache must be a directory, not a symlink");
   }
-  const stagingDir = mkdtempSync(join2(cacheDir, ".waveform-"));
+  const stagingDir = mkdtempSync(join3(cacheDir, ".waveform-"));
   try {
-    const stagingPath = join2(stagingDir, "peaks.json");
+    const stagingPath = join3(stagingDir, "peaks.json");
     writeFileSync(stagingPath, JSON.stringify(peaks), { flag: "wx" });
     renameSync(stagingPath, cachePath);
   } finally {
@@ -341,7 +837,7 @@ function writeWaveformCache(cachePath, peaks) {
 import { spawnSync } from "child_process";
 import { mkdtempSync as mkdtempSync2, rmSync as rmSync2, writeFileSync as writeFileSync2 } from "fs";
 import { tmpdir } from "os";
-import { basename, join as join3 } from "path";
+import { basename, join as join4 } from "path";
 import { FFPROBE_PATH_ENV, findFfBinary as findFfBinary2 } from "@hyperframes/parsers/ff-binaries";
 var VIDEO_EXT = /\.(mp4|webm|mov|mkv|avi|m4v|mxf|mts|m2ts|ts)$/i;
 var AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac|flac)$/i;
@@ -392,8 +888,8 @@ function checkStreams(stdout, isVideo, isAudio) {
   }
 }
 function validateUploadedMediaBuffer(fileName, buffer, runner = defaultRunner) {
-  const tempDir = mkdtempSync2(join3(tmpdir(), "hyperframes-upload-"));
-  const tempPath = join3(tempDir, basename(fileName));
+  const tempDir = mkdtempSync2(join4(tmpdir(), "hyperframes-upload-"));
+  const tempPath = join4(tempDir, basename(fileName));
   try {
     writeFileSync2(tempPath, buffer);
     return validateUploadedMedia(tempPath, runner);
@@ -403,9 +899,9 @@ function validateUploadedMediaBuffer(fileName, buffer, runner = defaultRunner) {
 }
 
 // src/helpers/backupJournal.ts
-import { readdirSync, readFileSync, unlinkSync, writeFileSync as writeFileSync3 } from "fs";
+import { readdirSync, readFileSync as readFileSync3, unlinkSync, writeFileSync as writeFileSync3 } from "fs";
 import { Buffer as Buffer2 } from "buffer";
-import { join as join4, relative } from "path";
+import { join as join5, relative as relative2 } from "path";
 var DEFAULT_KEEP_PER_FILE = 10;
 function backupKeyForPath(path) {
   return Buffer2.from(path, "utf-8").toString("base64url");
@@ -415,16 +911,16 @@ function timestampPrefix() {
 }
 function backupPathForResponse(projectDir, backupPath) {
   if (!backupPath) return null;
-  const rel = relative(projectDir, backupPath);
+  const rel = relative2(projectDir, backupPath);
   if (!rel || rel.startsWith("..")) return null;
   return rel.split("\\").join("/");
 }
 function snapshotBeforeWrite(projectDir, absPath, options = {}) {
   if (!isSafePath(projectDir, absPath)) return { backupPath: null };
   try {
-    const content = readFileSync(absPath);
-    const relativePath = relative(projectDir, absPath);
-    const backupDir = join4(projectDir, ".hyperframes", "backup");
+    const content = readFileSync3(absPath);
+    const relativePath = relative2(projectDir, absPath);
+    const backupDir = join5(projectDir, ".hyperframes", "backup");
     mkdirWithinProject(projectDir, backupDir);
     const backupKey = backupKeyForPath(relativePath);
     const backupPath = nextBackupPath(backupDir, backupKey);
@@ -441,18 +937,18 @@ function snapshotBeforeWrite(projectDir, absPath, options = {}) {
 }
 function nextBackupPath(backupDir, backupKey) {
   const base = `${timestampPrefix()}-${backupKey}`;
-  let candidate = join4(backupDir, base);
+  let candidate = join5(backupDir, base);
   let counter = 2;
   while (true) {
     try {
-      readFileSync(candidate);
+      readFileSync3(candidate);
     } catch (error) {
       if (error && typeof error === "object" && "code" in error && error.code === "ENOENT") {
         return candidate;
       }
       throw error;
     }
-    candidate = join4(backupDir, `${base}-${counter}`);
+    candidate = join5(backupDir, `${base}-${counter}`);
     counter += 1;
   }
 }
@@ -460,7 +956,7 @@ function pruneBackups(backupDir, backupKey, keepPerFile) {
   const keep = Math.max(1, Math.floor(keepPerFile));
   const suffix = `-${backupKey}`;
   const numberedSuffix = new RegExp(`-${backupKey}-\\d+$`);
-  const matches = readdirSync(backupDir).filter((name) => name.endsWith(suffix) || numberedSuffix.test(name)).map((name) => join4(backupDir, name)).sort((a, b) => {
+  const matches = readdirSync(backupDir).filter((name) => name.endsWith(suffix) || numberedSuffix.test(name)).map((name) => join5(backupDir, name)).sort((a, b) => {
     return b.localeCompare(a);
   });
   for (const file of matches.slice(keep)) {
@@ -481,17 +977,17 @@ function replaceWithProjectDirMissing(c, hostHeaders) {
 }
 
 // src/helpers/applyFileMutations.ts
-import { readFileSync as readFileSync2, statSync as statSync2 } from "fs";
+import { readFileSync as readFileSync4, statSync as statSync2 } from "fs";
 import { replaceFileAtomically } from "@hyperframes/core/atomic-file";
 function applyFileMutations(projectDir, mutations, requestToken, writeFile = (path, content) => replaceFileAtomically(path, content, statSync2(path).mode)) {
   const prepared = mutations.map((mutation) => ({
     ...mutation,
-    before: mutation.before ?? readFileSync2(mutation.absPath, "utf-8")
+    before: mutation.before ?? readFileSync4(mutation.absPath, "utf-8")
   }));
   const results = [];
   const attempted = [];
   for (const mutation of prepared)
-    assertExpectedVersion(mutation, readFileSync2(mutation.absPath, "utf-8"));
+    assertExpectedVersion(mutation, readFileSync4(mutation.absPath, "utf-8"));
   try {
     for (const mutation of prepared) {
       results.push(applyOneMutation(projectDir, mutation, requestToken, writeFile, attempted));
@@ -501,7 +997,7 @@ function applyFileMutations(projectDir, mutations, requestToken, writeFile = (pa
     const rollbackErrors = [];
     for (const mutation of attempted.reverse()) {
       try {
-        if (!mutation.written || readFileSync2(mutation.absPath, "utf-8") === mutation.after)
+        if (!mutation.written || readFileSync4(mutation.absPath, "utf-8") === mutation.after)
           writeFile(mutation.absPath, mutation.before, "utf-8");
         clearFileWriteReceipt(mutation.absPath, mutation.version, mutation.writeToken);
       } catch (rollbackError) {
@@ -518,7 +1014,7 @@ function applyFileMutations(projectDir, mutations, requestToken, writeFile = (pa
   }
 }
 function applyOneMutation(projectDir, mutation, requestToken, writeFile, attempted) {
-  const current = readFileSync2(mutation.absPath, "utf-8");
+  const current = readFileSync4(mutation.absPath, "utf-8");
   assertExpectedVersion(mutation, current);
   if (mutation.after === mutation.before) {
     return {
@@ -532,7 +1028,7 @@ function applyOneMutation(projectDir, mutation, requestToken, writeFile, attempt
   }
   const backup = snapshotBeforeWrite(projectDir, mutation.absPath);
   if (backup.error) throw new Error(`backup failed: ${backup.error}`);
-  assertExpectedVersion(mutation, readFileSync2(mutation.absPath, "utf-8"));
+  assertExpectedVersion(mutation, readFileSync4(mutation.absPath, "utf-8"));
   const before = current;
   const version = fileContentVersion(mutation.after);
   const writeToken = createWriteToken(requestToken);
@@ -541,295 +1037,96 @@ function applyOneMutation(projectDir, mutation, requestToken, writeFile, attempt
   writeFile(mutation.absPath, mutation.after, "utf-8");
   attempt.written = true;
   recordFileWriteReceipt(mutation.absPath, {
-    path: mutation.sourceFile,
-    version,
-    writeToken,
-    overwrote: before
-  });
-  return {
-    ...mutation,
-    before,
-    changed: true,
-    backupPath: backupPathForResponse(projectDir, backup.backupPath),
-    version,
-    writeToken
-  };
-}
-var FileChangedError = class extends Error {
-  constructor(sourceFile) {
-    super("file changed since the timeline was read");
-    this.sourceFile = sourceFile;
-  }
-  sourceFile;
-};
-function assertExpectedVersion(mutation, current) {
-  const stale = mutation.expectedVersion === void 0 ? current !== mutation.before : fileContentVersion(current) !== mutation.expectedVersion;
-  if (stale) throw new FileChangedError(mutation.sourceFile);
-}
-
-// src/routes/files.ts
-import { classifyPropertyGroup } from "@hyperframes/parsers/gsap-constants";
-import { findTimelineScript, parseGsapScriptAcorn } from "@hyperframes/parsers/gsap-parser-acorn";
-import { unrollComputedTimeline } from "@hyperframes/parsers";
-import {
-  updateAnimationInScript,
-  addAnimationToScript,
-  removeAnimationFromScript,
-  addKeyframeToScript,
-  removeKeyframeFromScript,
-  moveKeyframeInScript,
-  resizeKeyframedTweenInScript,
-  updateKeyframeInScript,
-  convertToKeyframesFromScript,
-  removeAllKeyframesFromScript,
-  materializeKeyframesFromScript,
-  unrollDynamicAnimations,
-  setArcPathInScript,
-  updateArcSegmentInScript,
-  updateMotionPathPointInScript,
-  addMotionPathPointInScript,
-  removeMotionPathPointInScript,
-  addMotionPathToScript,
-  removeArcPathFromScript,
-  addAnimationWithKeyframesToScript,
-  replaceTweenWithKeyframesInScript,
-  splitAnimationsInScript,
-  splitIntoPropertyGroupsFromScript,
-  retimeClipTweensInScript,
-  dedupePositionWritesInScript,
-  syncPositionHoldsBeforeKeyframes,
-  clipQueryRoot
-} from "@hyperframes/parsers/gsap-writer-acorn";
-
-// src/helpers/studioFontFace.ts
-var FONT_STYLE_RE = /<style\b[^>]*data-hf-studio-fonts=(["'])true\1[^>]*>([\s\S]*?)<\/style>/i;
-var ONE_FONT_FACE_RULE = /^@font-face \{(?:[^{}<"'\\]|"(?:[^"\\<\n\r\f]|\\[^<\n\r\f])*"|'(?:[^'\\<\n\r\f]|\\[^<\n\r\f])*')*\}$/;
-function isStudioFontFaceCss(css) {
-  return typeof css === "string" && ONE_FONT_FACE_RULE.test(css);
-}
-function ensureStudioFontFaceCss(html, css) {
-  if (html.includes(css)) return html;
-  const block = FONT_STYLE_RE.exec(html);
-  if (block) {
-    const next = `${(block[2] ?? "").trim()}
-${css}`.trim();
-    return html.replace(block[0], () => `<style data-hf-studio-fonts="true">
-${next}
-</style>`);
-  }
-  const styleTag = `<style data-hf-studio-fonts="true">
-${css}
-</style>`;
-  if (/<\/head>/i.test(html)) return html.replace(/<\/head>/i, () => `  ${styleTag}
-  </head>`);
-  return `${styleTag}
-${html}`;
-}
-
-// src/routes/files.ts
-import { parseHTML as parseHTML2 } from "linkedom";
-import { ensureHfIds } from "@hyperframes/parsers/hf-ids";
-
-// src/helpers/compositionInsertion.ts
-import { existsSync as existsSync2 } from "fs";
-import { readProjectFile } from "@hyperframes/parsers/asset-resolution";
-import { randomUUID } from "crypto";
-import { dirname as dirname2, relative as relative2, resolve, sep } from "path";
-import { parseHTML } from "linkedom";
-import { ProjectRootMissingError } from "@hyperframes/core";
-var CompositionInsertionError = class extends Error {
-  constructor(message, status) {
-    super(message);
-    this.status = status;
-  }
-  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 [...new Set(found)];
-}
-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 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 canonicalProjectPath(projectDir, candidate) {
-  if (!candidate) {
-    if (folderGone(projectDir)) throw new ProjectRootMissingError(projectDir);
-    throw new CompositionInsertionError("Composition source escapes the project", 400);
-  }
-  if (!existsSync2(candidate)) {
-    throw new CompositionInsertionError("Composition source was not found", 404);
-  }
-  const canonical = realpath(candidate);
-  if (!isSafePath(realpath(projectDir), canonical)) {
-    throw new CompositionInsertionError("Composition source escapes the project", 400);
-  }
-  return canonical;
-}
-function readCompositionSource(file) {
-  const read = readProjectFile(file);
-  if (read.kind === "folder") {
-    throw new CompositionInsertionError("Composition source is a folder, not an HTML file", 400);
-  }
-  if (read.kind === "missing") {
-    throw new CompositionInsertionError("Composition source was not found", 404);
-  }
-  return read.text;
-}
-function validateSourcePath(sourcePath) {
-  if (!sourcePath.trim() || sourcePath.includes("\0") || /^[a-z]+:/i.test(sourcePath)) {
-    throw new CompositionInsertionError("Invalid composition source path", 400);
-  }
-}
-function canonicalProjectFile(projectDir, sourcePath) {
-  validateSourcePath(sourcePath);
-  return canonicalProjectPath(projectDir, resolveWithinProject(projectDir, sourcePath));
-}
-function canonicalDependency(projectDir, ownerAbs, sourcePath) {
-  validateSourcePath(sourcePath);
-  return canonicalProjectPath(
-    projectDir,
-    resolveWithinProject(projectDir, relative2(projectDir, resolve(dirname2(ownerAbs), sourcePath)))
-  );
-}
-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 = readCompositionSource(file);
-    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));
-      }
-    }
-    visiting.delete(file);
-    visited.add(file);
-  };
-  visit(sourceAbs);
-}
-function numberAttribute(element, name, fallback = 0) {
-  const value = Number.parseFloat(element.getAttribute(name) ?? "");
-  return Number.isFinite(value) ? value : fallback;
-}
-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;
+    path: mutation.sourceFile,
+    version,
+    writeToken,
+    overwrote: before
+  });
+  return {
+    ...mutation,
+    before,
+    changed: true,
+    backupPath: backupPathForResponse(projectDir, backup.backupPath),
+    version,
+    writeToken
+  };
 }
-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}`;
+var FileChangedError = class extends Error {
+  constructor(sourceFile) {
+    super("file changed since the timeline was read");
+    this.sourceFile = sourceFile;
+  }
+  sourceFile;
+};
+function assertExpectedVersion(mutation, current) {
+  const stale = mutation.expectedVersion === void 0 ? current !== mutation.before : fileContentVersion(current) !== mutation.expectedVersion;
+  if (stale) throw new FileChangedError(mutation.sourceFile);
 }
-function relativeSourcePath(targetAbs, sourceAbs) {
-  return relative2(dirname2(targetAbs), sourceAbs).split(sep).join("/");
+
+// src/routes/files.ts
+import { classifyPropertyGroup } from "@hyperframes/parsers/gsap-constants";
+import { findTimelineScript, parseGsapScriptAcorn } from "@hyperframes/parsers/gsap-parser-acorn";
+import { unrollComputedTimeline } from "@hyperframes/parsers";
+import {
+  updateAnimationInScript,
+  addAnimationToScript,
+  removeAnimationFromScript,
+  addKeyframeToScript,
+  removeKeyframeFromScript,
+  moveKeyframeInScript,
+  resizeKeyframedTweenInScript,
+  updateKeyframeInScript,
+  convertToKeyframesFromScript,
+  removeAllKeyframesFromScript,
+  materializeKeyframesFromScript,
+  unrollDynamicAnimations,
+  setArcPathInScript,
+  updateArcSegmentInScript,
+  updateMotionPathPointInScript,
+  addMotionPathPointInScript,
+  removeMotionPathPointInScript,
+  addMotionPathToScript,
+  removeArcPathFromScript,
+  addAnimationWithKeyframesToScript,
+  replaceTweenWithKeyframesInScript,
+  splitAnimationsInScript,
+  splitIntoPropertyGroupsFromScript,
+  retimeClipTweensInScript,
+  dedupePositionWritesInScript,
+  syncPositionHoldsBeforeKeyframes,
+  trimTrailingKeyframeSpans,
+  clipQueryRoot
+} from "@hyperframes/parsers/gsap-writer-acorn";
+
+// src/helpers/studioFontFace.ts
+var FONT_STYLE_RE = /<style\b[^>]*data-hf-studio-fonts=(["'])true\1[^>]*>([\s\S]*?)<\/style>/i;
+var ONE_FONT_FACE_RULE = /^@font-face \{(?:[^{}<"'\\]|"(?:[^"\\<\n\r\f]|\\[^<\n\r\f])*"|'(?:[^'\\<\n\r\f]|\\[^<\n\r\f])*')*\}$/;
+function isStudioFontFaceCss(css) {
+  return typeof css === "string" && ONE_FONT_FACE_RULE.test(css);
 }
-function insertCompositionIntoSource(input) {
-  const targetAbs = canonicalProjectFile(input.projectDir, input.targetPath);
-  const sourceAbs = canonicalProjectFile(input.projectDir, input.sourcePath);
-  validateDependencyGraph(input.projectDir, targetAbs, sourceAbs);
-  const source = readCompositionSource(sourceAbs);
-  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-${randomUUID()}`);
-  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: 0px; top: 0px; width: ${width}px; height: ${height}px; z-index: ${zIndex}`
-  );
-  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));
+function ensureStudioFontFaceCss(html, css) {
+  if (html.includes(css)) return html;
+  const block = FONT_STYLE_RE.exec(html);
+  if (block) {
+    const next = `${(block[2] ?? "").trim()}
+${css}`.trim();
+    return html.replace(block[0], () => `<style data-hf-studio-fonts="true">
+${next}
+</style>`);
   }
-  return { html: document.toString(), hostId, track, duration };
+  const styleTag = `<style data-hf-studio-fonts="true">
+${css}
+</style>`;
+  if (/<\/head>/i.test(html)) return html.replace(/<\/head>/i, () => `  ${styleTag}
+  </head>`);
+  return `${styleTag}
+${html}`;
 }
 
+// src/routes/files.ts
+import { parseHTML as parseHTML4 } from "linkedom";
+import { ensureHfIds } from "@hyperframes/parsers/hf-ids";
+
 // src/routes/gsapMutationCapabilities.ts
 var differential = (family) => ({
   family,
@@ -946,7 +1243,7 @@ async function resolveProjectPath(c, adapter, route, opts) {
     }
     return { error: c.json({ error: "forbidden", why: "outside_project" }, 403) };
   }
-  if (opts?.mustExist && !existsSync3(absPath)) {
+  if (opts?.mustExist && !existsSync4(absPath)) {
     return { error: c.json({ error: "not found" }, 404) };
   }
   return { project, filePath, absPath };
@@ -1012,7 +1309,7 @@ function projectHtmlIds(projectDir) {
     if (!rel.endsWith(".html") || isInHiddenOrVendorDir(rel)) continue;
     let html;
     try {
-      html = readFileSync3(join5(projectDir, rel), "utf-8");
+      html = readFileSync5(join6(projectDir, rel), "utf-8");
     } catch {
       continue;
     }
@@ -1041,7 +1338,7 @@ function foldAndCommitElementPatchBatches(projectDir, batches, writeFile, reques
     resolvedPaths.add(absPath);
     let before;
     try {
-      before = readFileSync3(absPath, "utf-8");
+      before = readFileSync5(absPath, "utf-8");
     } catch {
       return { error: "not-found", sourceFile: batch.sourceFile };
     }
@@ -1097,7 +1394,7 @@ function commitElementPatchBatchesWithReceipts(c, projectDir, batches) {
   );
 }
 function writeFileWithReceipt(c, filePath, absPath, html) {
-  const overwrote = readFileSync3(absPath);
+  const overwrote = readFileSync5(absPath);
   replaceFileAtomically2(absPath, html, statSync3(absPath).mode);
   const version = fileContentVersion(html);
   const writeToken = createWriteToken(c.req.header("X-Hyperframes-Write-Token"));
@@ -1107,7 +1404,7 @@ function writeFileWithReceipt(c, filePath, absPath, html) {
 function writeMutationResult(c, projectDir, filePath, absPath, html, original) {
   const backup = snapshotBeforeWrite(projectDir, absPath);
   if (backup.error) return c.json({ error: `backup failed: ${backup.error}` }, 500);
-  if (readFileSync3(absPath, "utf-8") !== original) {
+  if (readFileSync5(absPath, "utf-8") !== original) {
     return c.json({ error: "file changed", conflict: true, path: filePath }, 409);
   }
   const { version } = writeFileWithReceipt(c, filePath, absPath, html);
@@ -1162,7 +1459,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(resolve2(projectDir, candidate))) {
+  while (existsSync4(resolve2(projectDir, candidate))) {
     num++;
     candidate = `${cleanBase} (copy ${num})${ext}`;
   }
@@ -1171,7 +1468,7 @@ function generateCopyPath(projectDir, originalPath) {
 function walkFiles(dir, filter) {
   const results = [];
   for (const entry of readableEntries(dir)) {
-    const full = join5(dir, entry.name);
+    const full = join6(dir, entry.name);
     if (entry.isDirectory()) {
       if (entry.name === "node_modules" || entry.name === ".thumbnails" || entry.name === "renders" || entry.name === ".transcode-cache")
         continue;
@@ -1196,7 +1493,7 @@ function readableEntries(dir) {
 }
 function readableText(file) {
   try {
-    return readFileSync3(file, "utf-8");
+    return readFileSync5(file, "utf-8");
   } catch (error) {
     if (skippable(error)) return null;
     throw error;
@@ -1254,7 +1551,7 @@ function occurrences(text2, part) {
 }
 function projectPaths(root, dir = root, prefix = "", ancestors = /* @__PURE__ */ new Set()) {
   return readableEntries(dir).flatMap((entry) => {
-    const [path, full] = [`${prefix}${entry.name}`, join5(dir, entry.name)];
+    const [path, full] = [`${prefix}${entry.name}`, join6(dir, entry.name)];
     const real = entry.name === "node_modules" ? null : directoryReal(entry, full);
     if (real === null || ancestors.has(real) || !isSafePath(root, full)) return [path];
     return [path, ...projectPaths(root, full, `${path}/`, /* @__PURE__ */ new Set([...ancestors, real]))];
@@ -1287,7 +1584,7 @@ function updateReferences(projectDir, oldPath, newPath, isDirectory) {
   return updatedCount;
 }
 function extractGsapScriptBlock(html) {
-  const { document } = parseHTML2(ensureHfIds(html));
+  const { document } = parseHTML4(ensureHfIds(html));
   const scripts = [
     ...document.querySelectorAll("script:not([src])"),
     ...Array.from(document.querySelectorAll("template")).flatMap(
@@ -1562,7 +1859,7 @@ function containsRawGsapExpression(value) {
   return Object.values(value).some(containsRawGsapExpression);
 }
 async function prepareGsapMutationScript(c, res, firstMutation) {
-  const beforeHtml = readFileSync3(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")) {
@@ -1637,6 +1934,7 @@ async function applyGsapMutations(c, res, mutations) {
   const prepared = await prepareGsapMutationScript(c, res, firstMutation);
   if (prepared instanceof Response) return prepared;
   const { html, beforeHtml, block } = prepared;
+  let lengthIsAuthored;
   const initialScript = block.scriptText;
   const skippedSelectors = /* @__PURE__ */ new Set();
   const respond = (data, status) => status ? c.json(data, status) : c.json(data);
@@ -1668,7 +1966,9 @@ async function applyGsapMutations(c, res, mutations) {
       for (const selector of result.skippedSelectors) skippedSelectors.add(selector);
     }
     if (HOLD_SYNC_MUTATION_TYPES.has(mutation.type)) {
-      newScript = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(newScript) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(newScript);
+      lengthIsAuthored ??= !lengthIsTimeline(res.project.dir, res.filePath);
+      if (lengthIsAuthored) newScript = trimTrailingKeyframeSpans(previousScript, newScript);
+      newScript = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(newScript, previousScript) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(newScript, previousScript);
     }
     mutationChanges.push(newScript !== previousScript);
     block.scriptText = newScript;
@@ -1676,7 +1976,7 @@ async function applyGsapMutations(c, res, mutations) {
   const changed = block.scriptText !== initialScript;
   const newHtml = changed ? block.replaceScript(block.scriptText) : html;
   let backupPath = null;
-  if (readFileSync3(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) {
@@ -2367,7 +2667,7 @@ async function foldAtomicCutFile(c, file, absPath, before, writer) {
       for (const selector of result.skippedSelectors) skippedSelectors.add(selector);
     }
     if (script !== block.scriptText) {
-      script = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(script) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(script);
+      script = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(script, block.scriptText) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(script, block.scriptText);
       after = block.replaceScript(script);
     }
   }
@@ -2406,9 +2706,9 @@ async function processUploadedFiles(formData, targetDir, projectDir) {
     const base = dotIdx > 0 ? name.slice(0, dotIdx) : name;
     const MAX_COPY_INDEX = 1e4;
     let n = 1;
-    if (existsSync3(finalPath)) {
+    if (existsSync4(finalPath)) {
       n = 2;
-      while (n < MAX_COPY_INDEX && existsSync3(resolve2(targetDir, `${base} (${n})${ext}`))) n++;
+      while (n < MAX_COPY_INDEX && existsSync4(resolve2(targetDir, `${base} (${n})${ext}`))) n++;
       if (n >= MAX_COPY_INDEX) {
         skipped.push(name);
         continue;
@@ -2442,7 +2742,7 @@ async function processUploadedFiles(formData, targetDir, projectDir) {
       if (n >= MAX_COPY_INDEX) skipped.push(name);
       continue;
     }
-    const relativePath = subDir ? join5(subDir, finalName) : finalName;
+    const relativePath = subDir ? join6(subDir, finalName) : finalName;
     uploaded.push(relativePath);
     if (validation.unchecked) unchecked.push({ name: finalName, reason: validation.unchecked });
     if (isAudioFile(finalName)) {
@@ -2475,7 +2775,7 @@ function registerFileRoutes(api, adapter) {
       if (stat2.size > MAX_TEXT_READ_BYTES) {
         return c.json({ error: "too large to read as text", why: "too_large" }, 413);
       }
-      const content = readFileSync3(fd);
+      const content = readFileSync5(fd);
       const version = fileContentVersion(content);
       c.header("ETag", version);
       if (content.subarray(0, GIT_BINARY_SNIFF_BYTES).includes(0)) {
@@ -2500,7 +2800,7 @@ function registerFileRoutes(api, adapter) {
     if (expectedVersion === null && !createOnly) {
       let currentContent = null;
       try {
-        currentContent = readFileSync3(res.absPath);
+        currentContent = readFileSync5(res.absPath);
       } catch (error) {
         if (!error || typeof error !== "object" || !("code" in error) || error.code !== "ENOENT") {
           throw error;
@@ -2526,7 +2826,7 @@ function registerFileRoutes(api, adapter) {
         if (!error || typeof error !== "object" || !("code" in error) || error.code !== "EEXIST") {
           throw error;
         }
-        const currentContent = readFileSync3(res.absPath);
+        const currentContent = readFileSync5(res.absPath);
         return c.json(
           {
             error: "file conflict",
@@ -2556,7 +2856,7 @@ function registerFileRoutes(api, adapter) {
         );
       }
       try {
-        const currentContent = readFileSync3(fd);
+        const currentContent = readFileSync5(fd);
         overwrote = currentContent;
         const currentVersion = fileContentVersion(currentContent);
         if (expectedVersion !== currentVersion) {
@@ -2632,7 +2932,7 @@ function registerFileRoutes(api, adapter) {
     }
     let before;
     try {
-      before = readFileSync3(ctx.absPath, "utf-8");
+      before = readFileSync5(ctx.absPath, "utf-8");
     } catch (error) {
       if (!error || typeof error !== "object" || !("code" in error) || error.code !== "ENOENT") {
         throw error;
@@ -2661,7 +2961,7 @@ function registerFileRoutes(api, adapter) {
     }
     const backup = snapshotBeforeWrite(ctx.project.dir, ctx.absPath);
     if (backup.error) return c.json({ error: `backup failed: ${backup.error}` }, 500);
-    const current = readFileSync3(ctx.absPath, "utf-8");
+    const current = readFileSync5(ctx.absPath, "utf-8");
     if (current !== before) {
       const currentVersion2 = fileContentVersion(current);
       return c.json({ error: "file conflict", currentVersion: currentVersion2, currentContent: current }, 409);
@@ -2689,12 +2989,12 @@ function registerFileRoutes(api, adapter) {
   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 = readFileSync3(ctx.absPath, "utf-8");
+    const originalContent = readFileSync5(ctx.absPath, "utf-8");
     return writeIfChanged(
       c,
       ctx.project.dir,
@@ -2707,7 +3007,7 @@ function registerFileRoutes(api, adapter) {
   api.post("/projects/:id/file-mutations/remove-elements/*", async (c) => {
     const ctx = await resolveFileMutationContext(c, adapter, "remove-elements");
     if ("error" in ctx) return ctx.error;
-    if (!existsSync3(ctx.absPath)) {
+    if (!existsSync4(ctx.absPath)) {
       return c.json({ error: "not found" }, 404);
     }
     const body = await c.req.json().catch(() => null);
@@ -2715,7 +3015,7 @@ function registerFileRoutes(api, adapter) {
     if (!Array.isArray(targets) || targets.length === 0) {
       return c.json({ error: "targets required" }, 400);
     }
-    const originalContent = readFileSync3(ctx.absPath, "utf-8");
+    const originalContent = readFileSync5(ctx.absPath, "utf-8");
     return writeIfChanged(
       c,
       ctx.project.dir,
@@ -2751,7 +3051,7 @@ function registerFileRoutes(api, adapter) {
         seen.add(absPath);
         let before;
         try {
-          before = readFileSync3(absPath, "utf-8");
+          before = readFileSync5(absPath, "utf-8");
         } catch {
           return c.json({ error: `not found: ${file.path}` }, 404);
         }
@@ -2778,7 +3078,7 @@ function registerFileRoutes(api, adapter) {
         prepared.push(folded);
       }
       for (const file of prepared) {
-        const current = readFileSync3(file.absPath, "utf-8");
+        const current = readFileSync5(file.absPath, "utf-8");
         if (current !== file.before) {
           return c.json(
             {
@@ -2821,7 +3121,7 @@ function registerFileRoutes(api, adapter) {
         const conflicts = [];
         for (const file of written.reverse()) {
           try {
-            const current = readFileSync3(file.absPath, "utf-8");
+            const current = readFileSync5(file.absPath, "utf-8");
             if (current !== file.after) {
               conflicts.push(file.path);
               continue;
@@ -2869,7 +3169,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 = readFileSync3(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -2931,7 +3231,7 @@ function registerFileRoutes(api, adapter) {
     for (let attempt = 1; ; attempt += 1) {
       let originalContent;
       try {
-        originalContent = readFileSync3(ctx.absPath, "utf-8");
+        originalContent = readFileSync5(ctx.absPath, "utf-8");
       } catch {
         return c.json({ error: "not found" }, 404);
       }
@@ -3043,7 +3343,7 @@ function registerFileRoutes(api, adapter) {
     }
     let originalContent;
     try {
-      originalContent = readFileSync3(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -3099,7 +3399,7 @@ function registerFileRoutes(api, adapter) {
     ).map((entry) => ({ target: entry.target, track: entry.track }));
     let originalContent;
     try {
-      originalContent = readFileSync3(ctx.absPath, "utf-8");
+      originalContent = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ error: "not found" }, 404);
     }
@@ -3128,7 +3428,7 @@ function registerFileRoutes(api, adapter) {
     if ("error" in parsed) return parsed.error;
     let content;
     try {
-      content = readFileSync3(ctx.absPath, "utf-8");
+      content = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ exists: false });
     }
@@ -3142,7 +3442,7 @@ function registerFileRoutes(api, adapter) {
     if (!Array.isArray(body?.targets)) return c.json({ error: "targets required" }, 400);
     let content;
     try {
-      content = readFileSync3(ctx.absPath, "utf-8");
+      content = readFileSync5(ctx.absPath, "utf-8");
     } catch {
       return c.json({ exists: body.targets.map(() => false) });
     }
@@ -3159,7 +3459,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);
     }
     const isDirectory = statSync3(res.absPath, { throwIfNoEntry: false })?.isDirectory() ?? false;
@@ -3176,7 +3476,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);
@@ -3186,7 +3486,7 @@ function registerFileRoutes(api, adapter) {
     }
     ensureDir(project.dir, destAbs);
     try {
-      createFileAtomically(destAbs, readFileSync3(srcAbs));
+      createFileAtomically(destAbs, readFileSync5(srcAbs));
     } catch (error) {
       if (!error || typeof error !== "object" || !("code" in error) || error.code !== "EEXIST") {
         throw error;
@@ -3230,7 +3530,7 @@ function registerFileRoutes(api, adapter) {
       mustExist: true
     });
     if ("error" in res) return res.error;
-    const html = readFileSync3(res.absPath, "utf-8");
+    const html = readFileSync5(res.absPath, "utf-8");
     const etag = `${fileContentVersion(html).slice(0, -1)}:gsap-animations:v1"`;
     const headers = { ETag: etag, "Cache-Control": "no-cache" };
     if (c.req.header("If-None-Match") === etag) return new Response(null, { status: 304, headers });
@@ -3253,256 +3553,67 @@ function registerFileRoutes(api, adapter) {
     const res = await resolveProjectPath(c, adapter, "gsap-mutations", {
       mustExist: true,
       pin: true
-    });
-    if ("error" in res) return res.error;
-    const body = await c.req.json().catch(() => null);
-    if (!body) return c.json({ error: "mutation type required" }, 400);
-    const error = validateGsapMutationRequest(c, body);
-    if (error) return error;
-    return applyGsapMutations(c, res, [body]);
-  });
-  api.post("/projects/:id/gsap-mutations-batch/*", async (c) => {
-    const res = await resolveProjectPath(c, adapter, "gsap-mutations-batch", {
-      mustExist: true,
-      pin: true
-    });
-    if ("error" in res) return res.error;
-    const body = await c.req.json().catch(() => null);
-    if (!body || !Array.isArray(body.mutations) || body.mutations.length === 0) {
-      return c.json({ error: "mutations array required" }, 400);
-    }
-    for (const mutation of body.mutations) {
-      const error = validateGsapMutationRequest(c, mutation);
-      if (error) return error;
-    }
-    return applyGsapMutations(c, res, body.mutations);
-  });
-  api.post("/projects/:id/gsap-mutation-rollback/*", async (c) => {
-    const res = await resolveProjectPath(c, adapter, "gsap-mutation-rollback", {
-      mustExist: true,
-      pin: true
-    });
-    if ("error" in res) return res.error;
-    const body = await c.req.json().catch(() => null);
-    if (!body || typeof body.expected !== "string" || typeof body.restore !== "string") {
-      return c.json({ error: "expected and restore contents required" }, 400);
-    }
-    const current = readFileSync3(res.absPath, "utf-8");
-    if (current !== body.expected) {
-      return c.json({ ok: true, restored: false, conflict: true });
-    }
-    replaceFileAtomically2(res.absPath, body.restore, statSync3(res.absPath).mode);
-    return c.json({ ok: true, restored: true, conflict: false });
-  });
-}
-
-// src/routes/preview.ts
-import { parseHTML as parseHTML5 } from "linkedom";
-import { createReadStream, existsSync as existsSync5, readFileSync as readFileSync5, statSync as statSync4 } from "fs";
-import { Readable } from "stream";
-import { join as join8, resolve as resolve4 } from "path";
-import { createHash } from "crypto";
-import {
-  AFTER_FONTS_SCRIPT_TYPE,
-  addScenePartsManifest,
-  RUNTIME_BOOTSTRAP_ATTR as RUNTIME_BOOTSTRAP_ATTR2,
-  insertBeforeCloseTag as insertBeforeCloseTag2,
-  insertRuntimeTag,
-  stripEmbeddedRuntimeScripts as stripEmbeddedRuntimeScripts2
-} from "@hyperframes/core/compiler";
-import { STUDIO_PREVIEW_MARK_META } from "@hyperframes/core/studio-preview-mark";
-import { gsapCdnDist as gsapCdnDist2, motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
-import { findStartTags as findStartTags2, injectTagsAtHeadStart } from "@hyperframes/core/compiler/html-document";
-import { isWithinProjectRoot } from "@hyperframes/parsers/asset-resolution";
-
-// src/helpers/subComposition.ts
-import { existsSync as existsSync4, readFileSync as readFileSync4 } from "fs";
-import { join as join6 } from "path";
-import { parseHTML as parseHTML3 } from "linkedom";
-import {
-  rewriteAssetPaths,
-  rewriteCssAssetUrls,
-  rewriteInlineStyleAssetUrls
-} from "@hyperframes/core";
-import {
-  deferScriptsUntilFonts,
-  RUNTIME_BOOTSTRAP_ATTR,
-  stripEmbeddedRuntimeScripts
-} from "@hyperframes/core/compiler";
-import { isFullHtmlDocument } from "@hyperframes/core/compiler/html-document";
-import { gsapCdnDist } from "@hyperframes/core/gsap-cdn";
-function rewriteRelativePaths(root, compPath, projectDir) {
-  const assetExists = (path) => existsSync4(join6(projectDir, path));
-  rewriteAssetPaths(
-    root.querySelectorAll("[src], [href]"),
-    compPath,
-    (el, attr) => el.getAttribute(attr),
-    (el, attr, value) => el.setAttribute(attr, value),
-    assetExists
-  );
-  rewriteInlineStyleAssetUrls(
-    root.querySelectorAll("[style]"),
-    compPath,
-    (el) => el.getAttribute("style"),
-    (el, value) => el.setAttribute("style", value),
-    assetExists
-  );
-  for (const styleEl of root.querySelectorAll("style")) {
-    styleEl.textContent = rewriteCssAssetUrls(styleEl.textContent || "", compPath, assetExists);
-  }
-}
-function escapeLeadingDigitIdent(id) {
-  return `\\${id.charCodeAt(0).toString(16)} ${id.slice(1)}`;
-}
-var REGEXP_SPECIALS = /[.*+?^${}()|[\]\\]/g;
-function fixDigitLeadingIdSelectors(root) {
-  const digitIds = /* @__PURE__ */ new Set();
-  for (const el of root.querySelectorAll("[id]")) {
-    const id = el.getAttribute("id");
-    if (id && /^\d/.test(id)) digitIds.add(id);
-  }
-  if (digitIds.size === 0) return;
-  for (const styleEl of root.querySelectorAll("style")) {
-    let css = styleEl.textContent || "";
-    for (const id of digitIds) {
-      const pattern = new RegExp(`#${id.replace(REGEXP_SPECIALS, "\\$&")}(?![\\w-])`, "g");
-      css = css.replace(pattern, `#${escapeLeadingDigitIdent(id)}`);
+    });
+    if ("error" in res) return res.error;
+    const body = await c.req.json().catch(() => null);
+    if (!body) return c.json({ error: "mutation type required" }, 400);
+    const error = validateGsapMutationRequest(c, body);
+    if (error) return error;
+    return applyGsapMutations(c, res, [body]);
+  });
+  api.post("/projects/:id/gsap-mutations-batch/*", async (c) => {
+    const res = await resolveProjectPath(c, adapter, "gsap-mutations-batch", {
+      mustExist: true,
+      pin: true
+    });
+    if ("error" in res) return res.error;
+    const body = await c.req.json().catch(() => null);
+    if (!body || !Array.isArray(body.mutations) || body.mutations.length === 0) {
+      return c.json({ error: "mutations array required" }, 400);
     }
-    styleEl.textContent = css;
-  }
-}
-function extractFullDocumentParts(rawHtml, compPath, projectDir) {
-  const { document: doc } = parseHTML3(rawHtml);
-  const rewriteTargets = [doc.head, doc.body].filter(Boolean);
-  for (const target of rewriteTargets) {
-    rewriteRelativePaths(target, compPath, projectDir);
-  }
-  fixDigitLeadingIdSelectors(doc);
-  const headContent = doc.head?.innerHTML ?? "";
-  const bodyContent = doc.body?.innerHTML ?? "";
-  const htmlEl = doc.documentElement;
-  const htmlAttrs = extractElementAttrs(htmlEl);
-  const bodyAttrs = doc.body ? extractElementAttrs(doc.body) : "";
-  return { headContent, bodyContent, htmlAttrs, bodyAttrs };
-}
-function extractTemplateInnerHtml(rawComp) {
-  const { document: doc } = parseHTML3(rawComp);
-  const template = doc.querySelector("template");
-  return template ? template.innerHTML : null;
-}
-function escapeAttrValue(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
-}
-function extractElementAttrs(el) {
-  const parts = [];
-  for (let i = 0; i < el.attributes.length; i++) {
-    const attr = el.attributes[i];
-    if (attr.value === "") {
-      parts.push(attr.name);
-    } else {
-      parts.push(`${attr.name}="${escapeAttrValue(attr.value)}"`);
+    for (const mutation of body.mutations) {
+      const error = validateGsapMutationRequest(c, mutation);
+      if (error) return error;
     }
-  }
-  return parts.join(" ");
-}
-var NON_RENDERED_TAGS = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "LINK", "META", "TEMPLATE", "NOSCRIPT"]);
-function promoteTemplateCompositionId(rawComp, body) {
-  let templateCompositionId;
-  for (const tag of rawComp.matchAll(/<template\b[^>]*/gi)) {
-    const id = /\bdata-composition-id\s*=\s*["']([^"']+)["']/i.exec(tag[0] ?? "")?.[1];
-    if (id) {
-      templateCompositionId = id;
-      break;
+    return applyGsapMutations(c, res, body.mutations);
+  });
+  api.post("/projects/:id/gsap-mutation-rollback/*", async (c) => {
+    const res = await resolveProjectPath(c, adapter, "gsap-mutation-rollback", {
+      mustExist: true,
+      pin: true
+    });
+    if ("error" in res) return res.error;
+    const body = await c.req.json().catch(() => null);
+    if (!body || typeof body.expected !== "string" || typeof body.restore !== "string") {
+      return c.json({ error: "expected and restore contents required" }, 400);
     }
-  }
-  if (!templateCompositionId) return;
-  if (body.querySelector("[data-composition-id]")) return;
-  const root = Array.from(body.children).find((el) => !NON_RENDERED_TAGS.has(el.tagName));
-  root?.setAttribute("data-composition-id", templateCompositionId);
-}
-function tagRootCompositionFile(bodyHtml, compPath) {
-  const match = bodyHtml.match(/<[a-zA-Z][^>]*\bdata-composition-id=/);
-  if (match?.index == null) return bodyHtml;
-  const tagEnd = bodyHtml.indexOf(">", match.index);
-  if (tagEnd === -1) return bodyHtml;
-  if (bodyHtml.slice(match.index, tagEnd).includes("data-composition-file")) return bodyHtml;
-  return bodyHtml.slice(0, tagEnd) + ` data-composition-file="${compPath}"` + bodyHtml.slice(tagEnd);
-}
-function rootHeadContent(rootHtml) {
-  return rootHtml.match(/<head[^>]*>([\s\S]*?)<\/head>/i)?.[1] ?? "";
-}
-function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, rawOverride) {
-  const compFile = join6(projectDir, compPath);
-  if (!existsSync4(compFile)) return null;
-  const rawComp = rawOverride ?? readFileSync4(compFile, "utf-8");
-  let compHeadContent = "";
-  let rewrittenContent;
-  let htmlAttrs = "";
-  let bodyAttrs = "";
-  const templateInner = extractTemplateInnerHtml(rawComp);
-  if (templateInner != null) {
-    const { document: contentDoc } = parseHTML3(
-      `<!DOCTYPE html><html><head></head><body>${templateInner}</body></html>`
-    );
-    rewriteRelativePaths(contentDoc, compPath, projectDir);
-    fixDigitLeadingIdSelectors(contentDoc);
-    promoteTemplateCompositionId(rawComp, contentDoc.body);
-    rewrittenContent = contentDoc.body.innerHTML || templateInner;
-  } else if (isFullHtmlDocument(rawComp)) {
-    const parts = extractFullDocumentParts(rawComp, compPath, projectDir);
-    compHeadContent = parts.headContent;
-    rewrittenContent = parts.bodyContent;
-    htmlAttrs = parts.htmlAttrs;
-    bodyAttrs = parts.bodyAttrs;
-  } else {
-    const { document: contentDoc } = parseHTML3(
-      `<!DOCTYPE html><html><head></head><body>${rawComp}</body></html>`
-    );
-    rewriteRelativePaths(contentDoc, compPath, projectDir);
-    fixDigitLeadingIdSelectors(contentDoc);
-    rewrittenContent = contentDoc.body.innerHTML || rawComp;
-  }
-  rewrittenContent = stripEmbeddedRuntimeScripts(rewrittenContent);
-  const { document: scriptsDoc } = parseHTML3(
-    `<!DOCTYPE html><html><head></head><body>${rewrittenContent}</body></html>`
-  );
-  deferScriptsUntilFonts(scriptsDoc);
-  rewrittenContent = scriptsDoc.body.innerHTML;
-  rewrittenContent = tagRootCompositionFile(rewrittenContent, compPath);
-  const indexPath = join6(projectDir, "index.html");
-  let headContent = "";
-  if (existsSync4(indexPath)) headContent = rootHeadContent(readFileSync4(indexPath, "utf-8"));
-  if (baseHref && !hasBaseElement(headContent)) {
-    headContent = `<base href="${baseHref}">
-${headContent}`;
-  }
-  if (compHeadContent) headContent += `
-${compHeadContent}`;
-  headContent = stripEmbeddedRuntimeScripts(headContent);
-  headContent += `
-<script ${RUNTIME_BOOTSTRAP_ATTR}="1" src="${runtimeUrl}"></script>`;
-  if (!headContent.includes("gsap")) {
-    headContent += `
-<script src="${gsapCdnDist()}gsap.min.js"></script>`;
-  }
-  const htmlOpen = htmlAttrs ? `<html ${htmlAttrs}>` : "<html>";
-  const bodyOpen = bodyAttrs ? `<body ${bodyAttrs}>` : "<body>";
-  return `<!DOCTYPE html>
-${htmlOpen}
-<head>
-${headContent}
-</head>
-${bodyOpen}
-<script>window.__timelines=window.__timelines||{};</script>
-${rewrittenContent}
-</body>
-</html>`;
-}
-function hasBaseElement(html) {
-  return parseHTML3(html).document.querySelector("base") !== null;
+    const current = readFileSync5(res.absPath, "utf-8");
+    if (current !== body.expected) {
+      return c.json({ ok: true, restored: false, conflict: true });
+    }
+    replaceFileAtomically2(res.absPath, body.restore, statSync3(res.absPath).mode);
+    return c.json({ ok: true, restored: true, conflict: false });
+  });
 }
 
 // src/routes/preview.ts
+import { parseHTML as parseHTML6 } from "linkedom";
+import { createReadStream, existsSync as existsSync5, readFileSync as readFileSync6, statSync as statSync4 } from "fs";
+import { Readable } from "stream";
+import { join as join8, resolve as resolve4 } from "path";
+import { createHash as createHash2 } from "crypto";
+import {
+  AFTER_FONTS_SCRIPT_TYPE,
+  addScenePartsManifest,
+  RUNTIME_BOOTSTRAP_ATTR as RUNTIME_BOOTSTRAP_ATTR2,
+  insertBeforeCloseTag as insertBeforeCloseTag2,
+  insertRuntimeTag,
+  stripEmbeddedRuntimeScripts as stripEmbeddedRuntimeScripts2
+} from "@hyperframes/core/compiler";
+import { STUDIO_PREVIEW_MARK_META } from "@hyperframes/core/studio-preview-mark";
+import { gsapCdnDist as gsapCdnDist2, motionPathPluginUrl } from "@hyperframes/core/gsap-cdn";
+import { findStartTags as findStartTags2, injectTagsAtHeadStart } from "@hyperframes/core/compiler/html-document";
+import { isWithinProjectRoot } from "@hyperframes/parsers/asset-resolution";
 import { ensureHfIds as ensureHfIds2 } from "@hyperframes/parsers/hf-ids";
 
 // src/helpers/previewReads.ts
@@ -3606,7 +3717,7 @@ function injectPreviewVariables(html, values) {
 
 // src/helpers/lazyPreviewImages.ts
 import { findStartTags } from "@hyperframes/core/compiler/html-document";
-import { parseHTML as parseHTML4 } from "linkedom";
+import { parseHTML as parseHTML5 } from "linkedom";
 import { STUDIO_PREVIEW_LAZY_ATTR } from "@hyperframes/core/studio-preview-mark";
 function startsAfterZero(el) {
   for (let node = el; node; node = node.parentElement) {
@@ -3617,7 +3728,7 @@ function startsAfterZero(el) {
 var hasLoading = (img) => Array.from(img.attributes).some((attr) => attr.name.toLowerCase() === "loading");
 function lazyPreviewImages(html) {
   if (!/<!doctype|<html[\s>]/i.test(html)) return html;
-  const images = [...parseHTML4(html).document.querySelectorAll("img")];
+  const images = [...parseHTML5(html).document.querySelectorAll("img")];
   const tags = findStartTags(html, "img");
   if (tags.length !== images.length) return html;
   const parts = [];
@@ -3653,7 +3764,7 @@ function readStudioMotionManifestContent(projectDir) {
   const manifestPath = join8(projectDir, STUDIO_MOTION_PATH);
   if (!existsSync5(manifestPath)) return "";
   try {
-    return readFileSync5(manifestPath, "utf-8");
+    return readFileSync6(manifestPath, "utf-8");
   } catch {
     return "";
   }
@@ -3708,7 +3819,7 @@ function isGsapCoreUrl(src) {
   return URL.canParse(src, base) && /\/gsap(\.min)?\.js$/i.test(new URL(src, base).pathname);
 }
 function findGsapCoreScript(html) {
-  const scripts = [...parseHTML5(html).document.querySelectorAll("script")];
+  const scripts = [...parseHTML6(html).document.querySelectorAll("script")];
   const starts = findStartTags2(html, "script");
   if (starts.length !== scripts.length) return null;
   const at = scripts.findIndex(
@@ -3795,7 +3906,7 @@ function parsePreviewVariablesParam(raw) {
 }
 function variablesEtagSalt(raw) {
   if (!raw) return "";
-  return `:vars:${createHash("sha1").update(raw).digest("hex").slice(0, 12)}`;
+  return `:vars:${createHash2("sha1").update(raw).digest("hex").slice(0, 12)}`;
 }
 function previewVariablesFromRequest(rawVariables) {
   const parse2 = parsePreviewVariablesParam(rawVariables);
@@ -3835,13 +3946,13 @@ function resolveProjectMainHtml(projectDir, projectId) {
   recordPreviewRead(projectDir, blockHtmlPath);
   if (existsSync5(indexPath)) {
     return {
-      html: readFileSync5(indexPath, "utf-8"),
+      html: readFileSync6(indexPath, "utf-8"),
       compositionPath: "index.html"
     };
   }
   if (existsSync5(blockHtmlPath)) {
     return {
-      html: readFileSync5(blockHtmlPath, "utf-8"),
+      html: readFileSync6(blockHtmlPath, "utf-8"),
       compositionPath: `${projectId}.html`
     };
   }
@@ -3972,7 +4083,7 @@ ${etag}`;
   function pinSubCompHfIds(compFile, compPath) {
     if (!/\.html?$/i.test(compPath)) return void 0;
     try {
-      return ensureHfIds2(readFileSync5(compFile, "utf-8"));
+      return ensureHfIds2(readFileSync6(compFile, "utf-8"));
     } catch {
       return null;
     }
@@ -3991,7 +4102,7 @@ ${etag}`;
     if (!compFile || !existsSync5(compFile) || !statSync4(compFile).isFile()) {
       return c.text("not found", 404);
     }
-    const compPathHash = createHash("sha1").update(compPath).digest("hex");
+    const compPathHash = createHash2("sha1").update(compPath).digest("hex");
     const capture = c.req.query(PREVIEW_CAPTURE_PARAM) !== void 0;
     const etag = `"comp:v2:${compPathHash}:${signature}${variablesEtagSalt(vars.raw)}${capture ? ":capture" : ""}"`;
     const ifNoneMatch = c.req.header("If-None-Match");
@@ -4083,7 +4194,7 @@ ${etag}`;
       recordProxyRequest();
       servedContentType = PROXY_VARIANT_CONFIG[proxyVariant].contentType;
     }
-    const textBuffer = isText ? Buffer.from(readFileSync5(file, "utf-8"), "utf-8") : null;
+    const textBuffer = isText ? Buffer.from(readFileSync6(file, "utf-8"), "utf-8") : null;
     const totalSize = textBuffer ? textBuffer.length : statSync4(servedPath).size;
     const bodyFor = (start, end) => textBuffer ? new Uint8Array(textBuffer.subarray(start, end + 1)) : (
       // Node's web stream type and the DOM one do not overlap for tsc on
@@ -4127,7 +4238,7 @@ ${etag}`;
 }
 
 // src/routes/lint.ts
-import { readFileSync as readFileSync6 } from "fs";
+import { readFileSync as readFileSync7 } from "fs";
 import { join as join9 } from "path";
 async function collectProjectFindings(adapter, projectDir) {
   const findings = [];
@@ -4146,7 +4257,7 @@ async function lintUncoveredHtml(adapter, projectDir, htmlFiles, coveredFiles) {
   const findings = [];
   for (const file of htmlFiles) {
     if (coveredFiles.has(file)) continue;
-    const content = readFileSync6(join9(projectDir, file), "utf-8");
+    const content = readFileSync7(join9(projectDir, file), "utf-8");
     const result = await adapter.lint(content, { filePath: file, isSubComposition: true });
     for (const finding of result?.findings ?? []) {
       findings.push({ ...finding, file });
@@ -4179,7 +4290,7 @@ function registerLintRoutes(api, adapter) {
 
 // src/routes/render.ts
 import { streamSSE } from "hono/streaming";
-import { existsSync as existsSync6, readFileSync as readFileSync7, unlinkSync as unlinkSync3, readdirSync as readdirSync3, statSync as statSync5 } from "fs";
+import { existsSync as existsSync6, readFileSync as readFileSync8, unlinkSync as unlinkSync3, readdirSync as readdirSync3, statSync as statSync5 } from "fs";
 import { join as join10 } from "path";
 import { VALID_CANVAS_RESOLUTIONS } from "@hyperframes/parsers";
 import { formatRenderOutputTimestamp, parseFps } from "@hyperframes/core";
@@ -4319,7 +4430,7 @@ function registerRenderRoutes(api, adapter) {
     }
     const contentType = renderContentType(job.outputPath);
     const filename = job.outputPath.split("/").pop() ?? `render.mp4`;
-    const content = readFileSync7(job.outputPath);
+    const content = readFileSync8(job.outputPath);
     return new Response(content, {
       headers: {
         "Content-Type": contentType,
@@ -4337,7 +4448,7 @@ function registerRenderRoutes(api, adapter) {
     }
     const contentType = renderContentType(job.outputPath);
     const filename = job.outputPath.split("/").pop() ?? `render.mp4`;
-    const content = readFileSync7(job.outputPath);
+    const content = readFileSync8(job.outputPath);
     return new Response(content, {
       headers: {
         "Content-Type": contentType,
@@ -4370,7 +4481,7 @@ function registerRenderRoutes(api, adapter) {
     if (!fp) return c.json({ error: "forbidden" }, 403);
     if (!existsSync6(fp)) return c.json({ error: "not found" }, 404);
     const contentType = renderContentType(fp);
-    const content = readFileSync7(fp);
+    const content = readFileSync8(fp);
     return new Response(content, {
       headers: {
         "Content-Type": contentType,
@@ -4395,7 +4506,7 @@ function registerRenderRoutes(api, adapter) {
       let audioLoweredDb;
       if (existsSync6(metaPath)) {
         try {
-          const meta = JSON.parse(readFileSync7(metaPath, "utf-8"));
+          const meta = JSON.parse(readFileSync8(metaPath, "utf-8"));
           if (meta.status === "failed" && !existsSync6(fp)) status = "failed";
           if (meta.durationMs) durationMs = meta.durationMs;
           if (typeof meta.audioLoweredDb === "number") audioLoweredDb = meta.audioLoweredDb;
@@ -4430,7 +4541,7 @@ function registerRenderRoutes(api, adapter) {
 // src/routes/imageThumbnail.ts
 import { HTTPException } from "hono/http-exception";
 import { open, stat } from "fs/promises";
-import { createHash as createHash2 } from "crypto";
+import { createHash as createHash3 } from "crypto";
 
 // src/routes/thumbnailGenerationCoordinator.ts
 var ThumbnailGenerationCoordinator = class {
@@ -4612,7 +4723,7 @@ function registerImageThumbnailRoutes(api, adapter) {
   api.get("/projects/:id/image-thumbnail/*", async (c) => {
     try {
       const { path, info } = await resolveSource(adapter, c.req.param("id"), c.req.url);
-      const key = createHash2("sha256").update(JSON.stringify([path, info.dev, info.ino, info.size, info.mtimeMs, info.ctimeMs])).digest("hex");
+      const key = createHash3("sha256").update(JSON.stringify([path, info.dev, info.ino, info.size, info.mtimeMs, info.ctimeMs])).digest("hex");
       const etag = `"${key}"`;
       c.header("ETag", etag);
       c.header("Cache-Control", "private, no-cache");
@@ -4653,90 +4764,6 @@ import {
 } from "fs";
 import { join as join11 } from "path";
 import { createHash as createHash4, randomUUID as randomUUID2 } from "crypto";
-
-// src/helpers/compositionInputs.ts
-import { readFileSync as readFileSync8 } from "fs";
-import { createHash as createHash3 } from "crypto";
-var ROOT_COMPOSITION = "index.html";
-var COMPOSITION_SRC = /\bdata-composition-src\s*=\s*(["'])(.*?)\1/g;
-function projectReader(projectDir) {
-  const sources = /* @__PURE__ */ new Map();
-  return (compPath) => {
-    if (!sources.has(compPath)) {
-      const file = resolveWithinProject(projectDir, compPath);
-      let source = null;
-      try {
-        source = file ? readFileSync8(file, "utf-8") : null;
-      } catch {
-      }
-      sources.set(compPath, source);
-    }
-    return sources.get(compPath) ?? null;
-  };
-}
-function normalizeSource(src) {
-  if (/^[a-z][a-z0-9+.-]*:/i.test(src) || src.startsWith("//")) return null;
-  const path = src.split(/[?#]/)[0]?.replace(/^\.?\//, "") ?? "";
-  return path || null;
-}
-function closureOf(read, compPath) {
-  const closure = /* @__PURE__ */ new Set();
-  const visit = (path) => {
-    if (closure.has(path)) return;
-    closure.add(path);
-    for (const match of (read(path) ?? "").matchAll(COMPOSITION_SRC)) {
-      const mounted = normalizeSource(match[2] ?? "");
-      if (mounted) visit(mounted);
-    }
-  };
-  visit(compPath);
-  return closure;
-}
-var inputSignatures = /* @__PURE__ */ new Map();
-var rootMemos = /* @__PURE__ */ new Map();
-var sha1 = (text2) => createHash3("sha1").update(text2).digest("hex");
-function rootHashes(read) {
-  const source = read(ROOT_COMPOSITION) ?? "";
-  return { root: sha1(source), head: sha1(rootHeadContent(source)) };
-}
-function compositionInputSignature(projectDir, compPath, projectSignature) {
-  const key = `${projectDir}\0${compPath}`;
-  const known = inputSignatures.get(key);
-  if (known?.projectSignature === projectSignature) return known.inputSignature;
-  const read = projectReader(projectDir);
-  const comp = normalizeSource(compPath) ?? compPath;
-  const inputs = closureOf(read, comp).add(ROOT_COMPOSITION);
-  const excluded = new Set(
-    [...closureOf(read, ROOT_COMPOSITION)].filter((path) => !inputs.has(path))
-  );
-  let inputSignature;
-  if (comp === ROOT_COMPOSITION) {
-    inputSignature = createProjectSignature(projectDir, excluded);
-  } else {
-    const hashes = rootHashes(read);
-    if (!rootMemos.has(projectDir)) rootMemos.set(projectDir, { ...hashes, affected: null });
-    inputSignature = `${createProjectSignature(projectDir, excluded.add(ROOT_COMPOSITION))}:${hashes.head}`;
-  }
-  inputSignatures.set(key, { projectSignature, inputSignature });
-  return inputSignature;
-}
-function compositionsAffectedBy(projectDir, changedPath) {
-  const changed = changedPath.replace(/\\/g, "/");
-  const read = projectReader(projectDir);
-  if (changed === ROOT_COMPOSITION) {
-    const now = rootHashes(read);
-    const memo = rootMemos.get(projectDir);
-    if (memo?.root === now.root) return memo.affected;
-    const affected = memo?.head === now.head ? [ROOT_COMPOSITION] : null;
-    rootMemos.set(projectDir, { ...now, affected });
-    return affected;
-  }
-  const mounted = closureOf(read, ROOT_COMPOSITION);
-  if (!mounted.has(changed)) return null;
-  return [...mounted].filter((path) => closureOf(read, path).has(changed));
-}
-
-// src/routes/thumbnail.ts
 var THUMBNAIL_CACHE_VERSION = "v5";
 var THUMBNAIL_MAX_OUTPUT_WIDTH = 240;
 var THUMBNAIL_MAX_OUTPUT_HEIGHT = 135;