@hyperframes/studio-server 0.8.79 → 0.8.80

package/dist/index.js

@@ -13,7 +13,7 @@ import {
   splitElementInHtml,
   unwrapElementsFromHtml,
   wrapElementsInHtml
-} from "./chunk-QYDRVMJ6.js";
+} from "./chunk-P5EJPIH3.js";
 import {
   getElementScreenshotClip
 } from "./chunk-W2SBTCO2.js";
@@ -22,12 +22,12 @@ import {
   isAutoProxyEnabled,
   proxyEtagSalt,
   resolvePreviewMediaCodecProbeCache
-} from "./chunk-X3T65KC2.js";
+} from "./chunk-YGANSFUU.js";
 import {
   ProxyCapacityError,
   ProxyTranscodeError,
   resolveProxy
-} from "./chunk-45POWYFS.js";
+} from "./chunk-56JREE33.js";
 import {
   PROXY_VARIANT_CONFIG,
   decideMediaProxyEligibility,
@@ -36,7 +36,7 @@ import {
   probeMediaMetadata,
   recordProxyRequest,
   resolveProxyVariantRequest
-} from "./chunk-4MNTZVVZ.js";
+} from "./chunk-KOB22VPG.js";
 import {
   STUDIO_MANUAL_EDITS_PATH,
   createStudioManualEditsRenderBodyScript,
@@ -289,22 +289,22 @@ function collectProjectSignatureFiles(projectDir, dir, files) {
     if (SIGNATURE_EXCLUDED_DIRS.has(entry)) continue;
     const file = resolve(dir, entry);
     if (!isPathWithin(projectDir, file)) continue;
-    let stat2;
+    let stat3;
     try {
-      stat2 = lstatSync(file);
+      stat3 = lstatSync(file);
     } catch {
       continue;
     }
-    if (stat2.isSymbolicLink()) continue;
-    if (stat2.isDirectory()) {
+    if (stat3.isSymbolicLink()) continue;
+    if (stat3.isDirectory()) {
       collectProjectSignatureFiles(projectDir, file, files);
-    } else if (stat2.isFile()) {
+    } else if (stat3.isFile()) {
       files.push({
         file,
-        mtimeMs: stat2.mtimeMs,
-        ctimeMs: stat2.ctimeMs,
-        size: stat2.size,
-        textContentEligible: isTextContentEligible(file, stat2.size)
+        mtimeMs: stat3.mtimeMs,
+        ctimeMs: stat3.ctimeMs,
+        size: stat3.size,
+        textContentEligible: isTextContentEligible(file, stat3.size)
       });
     }
   }
@@ -314,19 +314,19 @@ function collectProjectSignatureManifestFiles(projectDir, files) {
   for (const manifestPath of STUDIO_SIGNATURE_MANIFEST_PATHS) {
     const file = resolve(projectDir, manifestPath);
     if (seen.has(file) || !isPathWithin(projectDir, file)) continue;
-    let stat2;
+    let stat3;
     try {
-      stat2 = lstatSync(file);
+      stat3 = lstatSync(file);
     } catch {
       continue;
     }
-    if (stat2.isSymbolicLink() || !stat2.isFile()) continue;
+    if (stat3.isSymbolicLink() || !stat3.isFile()) continue;
     files.push({
       file,
-      mtimeMs: stat2.mtimeMs,
-      ctimeMs: stat2.ctimeMs,
-      size: stat2.size,
-      textContentEligible: isTextContentEligible(file, stat2.size)
+      mtimeMs: stat3.mtimeMs,
+      ctimeMs: stat3.ctimeMs,
+      size: stat3.size,
+      textContentEligible: isTextContentEligible(file, stat3.size)
     });
     seen.add(file);
   }
@@ -761,9 +761,9 @@ function hashVersion(hex) {
 function hashOfVersion(version) {
   return /^"sha256:([0-9a-f]{64})"$/.exec(version)?.[1];
 }
-function settledFileTag(stat2, now = Date.now()) {
-  if (now - stat2.ctimeMs < 3e3) return null;
-  return [stat2.ino, stat2.ctimeMs, stat2.size].map((n) => n.toString(36)).join("-");
+function settledFileTag(stat3, now = Date.now()) {
+  if (now - stat3.ctimeMs < 3e3) return null;
+  return [stat3.ino, stat3.ctimeMs, stat3.size].map((n) => n.toString(36)).join("-");
 }
 function createWriteToken(requestToken) {
   const token = requestToken?.trim();
@@ -2776,10 +2776,10 @@ function registerFileRoutes(api, adapter) {
   api.delete("/projects/:id/files/*", async (c) => {
     const res = await resolveProjectFile(c, adapter, { mustExist: true });
     if ("error" in res) return res.error;
-    const stat2 = statSync3(res.absPath);
+    const stat3 = statSync3(res.absPath);
     const backup = snapshotBeforeWrite(res.project.dir, res.absPath);
     if (backup.error) return c.json({ error: `backup failed: ${backup.error}` }, 500);
-    if (stat2.isDirectory()) {
+    if (stat3.isDirectory()) {
       rmSync3(res.absPath, { recursive: true });
     } else {
       unlinkSync2(res.absPath);
@@ -3429,7 +3429,7 @@ function registerFileRoutes(api, adapter) {
 // src/routes/preview.ts
 import { createReadStream, existsSync as existsSync5, readFileSync as readFileSync8, statSync as statSync4 } from "fs";
 import { Readable } from "stream";
-import { join as join9, resolve as resolve4 } from "path";
+import { join as join10, resolve as resolve5 } from "path";
 import { createHash as createHash4 } from "crypto";
 import {
   addScenePartsManifest,
@@ -3622,6 +3622,83 @@ function hasBaseElement(html) {
 // src/routes/preview.ts
 import { ensureHfIds as ensureHfIds3 } from "@hyperframes/parsers/hf-ids";
 
+// src/helpers/previewReads.ts
+import { readlinkSync as readlinkSync2 } from "fs";
+import { dirname as dirname6, join as join9, parse, relative as relative5, resolve as resolve4 } from "path";
+var ALWAYS_AFFECTS = ["hyperframes.json", ...STUDIO_SIGNATURE_MANIFEST_PATHS];
+var REFERENCE = /\b(?:src|href|poster|data-composition-src)\s*=\s*(?:"([^"\n]*)"|'([^'\n]*)')|url\(\s*(?:"([^"\n]*)"|'([^'\n]*)'|([^"'\s)]+))/gi;
+var pathKey = process.platform === "darwin" || process.platform === "win32" ? (path) => resolve4(path).toLowerCase() : (path) => resolve4(path);
+var readsByProject = /* @__PURE__ */ new Map();
+var builtProjects = /* @__PURE__ */ new Set();
+var projectKey = (projectDir) => pathKey(realFilePath(resolve4(projectDir)));
+var inRealProject = (projectDir, path) => join9(realFilePath(resolve4(projectDir)), relative5(resolve4(projectDir), resolve4(projectDir, path)));
+var readLink = (path) => {
+  try {
+    return readlinkSync2(path);
+  } catch {
+    return null;
+  }
+};
+function linksOnTheWay(path) {
+  const passed = [];
+  let at = parse(path).root;
+  let rest = path.slice(at.length).split(/[\\/]+/);
+  for (let hops = 0; rest.length > 0; ) {
+    const part = rest.shift();
+    if (!part || part === ".") continue;
+    if (part === "..") {
+      at = dirname6(at);
+      continue;
+    }
+    const next = join9(at, part);
+    const target = hops < 40 ? readLink(next) : null;
+    if (target === null) {
+      at = next;
+      continue;
+    }
+    hops++;
+    passed.push(next);
+    const root = parse(target).root;
+    if (root) at = root;
+    rest = [...target.slice(root.length).split(/[\\/]+/), ...rest];
+  }
+  passed.push(at);
+  return passed;
+}
+function recordPreviewRead(projectDir, filePath) {
+  const key = projectKey(projectDir);
+  let reads = readsByProject.get(key);
+  if (!reads) readsByProject.set(key, reads = /* @__PURE__ */ new Set());
+  const read = inRealProject(projectDir, filePath);
+  for (const found of [read, ...linksOnTheWay(read)]) {
+    for (let path = pathKey(found); !reads.has(path); path = dirname6(path)) reads.add(path);
+  }
+}
+function recordPreviewReferences(projectDir, html) {
+  const named = /* @__PURE__ */ new Set();
+  for (const match of html.matchAll(REFERENCE)) {
+    const url = (match[1] ?? match[2] ?? match[3] ?? match[4] ?? match[5] ?? "").trim();
+    if (!url || /^(?:[a-z][a-z0-9+.-]*:|[/#])/i.test(url)) continue;
+    const path = url.split(/[?#]/)[0] ?? "";
+    let decoded = path;
+    try {
+      decoded = decodeURIComponent(path);
+    } catch {
+    }
+    if (decoded) named.add(decoded);
+  }
+  for (const path of named) recordPreviewRead(projectDir, path);
+}
+function recordPreviewBuilt(projectDir) {
+  for (const path of ALWAYS_AFFECTS) recordPreviewRead(projectDir, path);
+  builtProjects.add(projectKey(projectDir));
+}
+function affectsPreview(projectDir, changedPath) {
+  const key = projectKey(projectDir);
+  if (!builtProjects.has(key)) return true;
+  return readsByProject.get(key)?.has(pathKey(inRealProject(projectDir, changedPath))) ?? false;
+}
+
 // src/helpers/variablesPayload.ts
 var VARIABLES_PAYLOAD_ERROR = "variables must be a JSON object of {variableId: value}";
 function isVariablesPayload(value) {
@@ -3663,7 +3740,7 @@ function injectProjectSignature(html, signature) {
 ${html}`;
 }
 function readStudioMotionManifestContent(projectDir) {
-  const manifestPath = join9(projectDir, STUDIO_MOTION_PATH);
+  const manifestPath = join10(projectDir, STUDIO_MOTION_PATH);
   if (!existsSync5(manifestPath)) return "";
   try {
     return readFileSync8(manifestPath, "utf-8");
@@ -3779,9 +3856,9 @@ function variablesEtagSalt(raw) {
   return `:vars:${createHash4("sha1").update(raw).digest("hex").slice(0, 12)}`;
 }
 function previewVariablesFromRequest(rawVariables) {
-  const parse = parsePreviewVariablesParam(rawVariables);
-  if (!parse.ok) return { error: parse.error };
-  return { raw: rawVariables, values: parse.values };
+  const parse2 = parsePreviewVariablesParam(rawVariables);
+  if (!parse2.ok) return { error: parse2.error };
+  return { raw: rawVariables, values: parse2.values };
 }
 function injectStudioPreviewAugmentations(html, adapter, projectDir, activeCompositionPath) {
   return injectStudioMotionScript(
@@ -3808,14 +3885,16 @@ async function transformPreviewHtml(html, adapter, project, activeCompositionPat
   }
 }
 function resolveProjectMainHtml(projectDir, projectId) {
-  const indexPath = join9(projectDir, "index.html");
+  const indexPath = join10(projectDir, "index.html");
+  const blockHtmlPath = join10(projectDir, `${projectId}.html`);
+  recordPreviewRead(projectDir, indexPath);
+  recordPreviewRead(projectDir, blockHtmlPath);
   if (existsSync5(indexPath)) {
     return {
       html: readFileSync8(indexPath, "utf-8"),
       compositionPath: "index.html"
     };
   }
-  const blockHtmlPath = join9(projectDir, `${projectId}.html`);
   if (existsSync5(blockHtmlPath)) {
     return {
       html: readFileSync8(blockHtmlPath, "utf-8"),
@@ -3847,13 +3926,18 @@ function registerPreviewRoutes(api, adapter) {
     const diskMain = resolveProjectMainHtml(project.dir, project.id);
     const normalizedDisk = diskMain ? ensureHfIds3(diskMain.html) : null;
     try {
-      let bundled = await adapter.bundle(project.dir, { stampHfIds: true });
+      let bundled = await adapter.bundle(project.dir, {
+        stampHfIds: true,
+        onRead: (filePath) => recordPreviewRead(project.dir, filePath)
+      });
       let mainCompositionPath = "index.html";
       if (!bundled) {
         if (!diskMain) return null;
         bundled = stripEmbeddedRuntimeScripts2(normalizedDisk ?? diskMain.html);
         mainCompositionPath = diskMain.compositionPath;
       }
+      recordPreviewReferences(project.dir, bundled);
+      recordPreviewBuilt(project.dir);
       if (!bundled.includes("hyperframe.runtime") && !bundled.includes("hyperframes-preview-runtime")) {
         const runtimeTag = `<script src="${adapter.runtimeUrl}"></script>`;
         bundled = insertBeforeCloseTag2(bundled, "body", `${runtimeTag}
@@ -3957,6 +4041,8 @@ ${etag}`;
     const previewVariables = vars.values;
     const compPath = requestSubPath(c.req.url, "projects/:id/preview/comp");
     const compFile = resolveWithinProject2(project.dir, compPath);
+    if (compFile) recordPreviewRead(project.dir, compFile);
+    recordPreviewRead(project.dir, "index.html");
     if (!compFile || !existsSync5(compFile) || !statSync4(compFile).isFile()) {
       return c.text("not found", 404);
     }
@@ -3980,6 +4066,7 @@ ${etag}`;
       stamped
     );
     if (!html) return c.text("not found", 404);
+    recordPreviewReferences(project.dir, html);
     html = ensureHfIds3(await transformPreviewHtml(html, adapter, project, compPath));
     html = injectStudioPreviewAugmentations(html, adapter, project.dir, compPath);
     if (previewVariables) html = injectPreviewVariables(html, previewVariables);
@@ -3990,13 +4077,14 @@ ${etag}`;
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "not found" }, 404);
     const subPath = requestSubPath(c.req.url, "projects/:id/preview");
-    const candidate = resolve4(project.dir, subPath);
+    const candidate = resolve5(project.dir, subPath);
     const file = isWithinProjectRoot(project.dir, candidate) ? candidate : null;
     if (!file) {
       return c.text("not found", 404);
     }
-    const stat2 = existsSync5(file) ? statSync4(file) : null;
-    if (!stat2?.isFile()) {
+    recordPreviewRead(project.dir, file);
+    const stat3 = existsSync5(file) ? statSync4(file) : null;
+    if (!stat3?.isFile()) {
       return c.text("not found", 404);
     }
     const contentType = getMimeType(subPath);
@@ -4007,7 +4095,7 @@ ${etag}`;
       if (!isProxyVariantRequest(proxyParam) || !contentType.startsWith("video/") || !isAutoProxyEnabled(adapter)) {
         return c.text("not found", 404);
       }
-      const facts = await probeAssetCodec(file);
+      const facts = await probeAssetCodec(file, void 0, mediaCodecProbeCache);
       const eligibility = decideMediaProxyEligibility(facts);
       if (!eligibility.eligible) {
         return c.text(`media proxy unavailable: ${eligibility.reason}`, 422);
@@ -4018,7 +4106,7 @@ ${etag}`;
         return c.text("media proxy variant does not match asset", 422);
       }
     }
-    const tag = settledFileTag(stat2);
+    const tag = settledFileTag(stat3);
     const etag = tag && `"${tag}${proxyEtagSalt(proxyVariant)}"`;
     const cacheHeaders = isText ? { "Cache-Control": "no-store" } : { "Cache-Control": "private, no-cache", ...etag && { ETag: etag } };
     if (!isText && etag) {
@@ -4087,7 +4175,7 @@ ${etag}`;
 
 // src/routes/lint.ts
 import { readFileSync as readFileSync9 } from "fs";
-import { join as join10 } from "path";
+import { join as join11 } from "path";
 async function collectProjectFindings(adapter, projectDir) {
   const findings = [];
   const coveredFiles = /* @__PURE__ */ new Set();
@@ -4105,7 +4193,7 @@ async function lintUncoveredHtml(adapter, projectDir, htmlFiles, coveredFiles) {
   const findings = [];
   for (const file of htmlFiles) {
     if (coveredFiles.has(file)) continue;
-    const content = readFileSync9(join10(projectDir, file), "utf-8");
+    const content = readFileSync9(join11(projectDir, file), "utf-8");
     const result = await adapter.lint(content, { filePath: file, isSubComposition: true });
     for (const finding of result?.findings ?? []) {
       findings.push({ ...finding, file });
@@ -4139,7 +4227,7 @@ function registerLintRoutes(api, adapter) {
 // src/routes/render.ts
 import { streamSSE } from "hono/streaming";
 import { existsSync as existsSync6, readFileSync as readFileSync10, mkdirSync as mkdirSync5, unlinkSync as unlinkSync3, readdirSync as readdirSync5, statSync as statSync5 } from "fs";
-import { join as join11 } from "path";
+import { join as join12 } from "path";
 import { VALID_CANVAS_RESOLUTIONS } from "@hyperframes/parsers";
 import { formatRenderOutputTimestamp, parseFps } from "@hyperframes/core";
 var VALID_RESOLUTIONS = new Set(VALID_CANVAS_RESOLUTIONS);
@@ -4207,7 +4295,7 @@ function registerRenderRoutes(api, adapter) {
     const rendersDir = adapter.rendersDir(project);
     if (!existsSync6(rendersDir)) mkdirSync5(rendersDir, { recursive: true });
     const ext = FORMAT_EXT[format] ?? ".mp4";
-    const outputPath = join11(rendersDir, `${jobId}${ext}`);
+    const outputPath = join12(rendersDir, `${jobId}${ext}`);
     const jobState = adapter.startRender({
       project,
       outputPath,
@@ -4308,7 +4396,7 @@ function registerRenderRoutes(api, adapter) {
       if (state.id === jobId && state.outputPath) {
         const dir = state.outputPath.replace(/\/[^/]+$/, "");
         for (const ext of [".mp4", ".webm", ".mov", ".meta.json"]) {
-          const fp = join11(dir, `${jobId}${ext}`);
+          const fp = join12(dir, `${jobId}${ext}`);
           if (existsSync6(fp)) unlinkSync3(fp);
         }
         break;
@@ -4343,10 +4431,10 @@ function registerRenderRoutes(api, adapter) {
     const rendersDir = adapter.rendersDir(project);
     if (!existsSync6(rendersDir)) return c.json({ renders: [] });
     const files = readdirSync5(rendersDir).filter((f) => f.endsWith(".mp4") || f.endsWith(".webm") || f.endsWith(".mov")).map((f) => {
-      const fp = join11(rendersDir, f);
-      const stat2 = statSync5(fp);
+      const fp = join12(rendersDir, f);
+      const stat3 = statSync5(fp);
       const rid = f.replace(/\.(mp4|webm|mov)$/, "");
-      const metaPath = join11(rendersDir, `${rid}.meta.json`);
+      const metaPath = join12(rendersDir, `${rid}.meta.json`);
       let status = "complete";
       let durationMs;
       if (existsSync6(metaPath)) {
@@ -4360,8 +4448,8 @@ function registerRenderRoutes(api, adapter) {
       return {
         id: rid,
         filename: f,
-        size: stat2.size,
-        createdAt: stat2.mtimeMs,
+        size: stat3.size,
+        createdAt: stat3.mtimeMs,
         status,
         durationMs
       };
@@ -4372,7 +4460,7 @@ function registerRenderRoutes(api, adapter) {
           id: file.id,
           status: file.status,
           progress: 100,
-          outputPath: join11(rendersDir, file.filename),
+          outputPath: join12(rendersDir, file.filename),
           createdAt: file.createdAt
         });
       }
@@ -4381,80 +4469,11 @@ function registerRenderRoutes(api, adapter) {
   });
 }
 
-// src/routes/thumbnail.ts
-import {
-  closeSync as closeSync3,
-  existsSync as existsSync7,
-  fstatSync as fstatSync3,
-  openSync as openSync3,
-  mkdirSync as mkdirSync6,
-  readFileSync as readFileSync12,
-  readdirSync as readdirSync6,
-  renameSync as renameSync3,
-  rmSync as rmSync4,
-  statSync as statSync6,
-  unlinkSync as unlinkSync4,
-  writeFileSync as writeFileSync6
-} from "fs";
-import { join as join12 } from "path";
-import { createHash as createHash5, randomUUID as randomUUID4 } from "crypto";
-
-// src/helpers/compositionInputs.ts
-import { readFileSync as readFileSync11 } from "fs";
-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 = resolveWithinProject2(projectDir, compPath);
-      let source = null;
-      try {
-        source = file ? readFileSync11(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();
-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 inputs = closureOf(read, normalizeSource(compPath) ?? compPath).add(ROOT_COMPOSITION);
-  const siblings = [...closureOf(read, ROOT_COMPOSITION)].filter((path) => !inputs.has(path));
-  const inputSignature = createProjectSignature(projectDir, new Set(siblings));
-  inputSignatures.set(key, { projectSignature, inputSignature });
-  return inputSignature;
-}
-function compositionsAffectedBy(projectDir, changedPath) {
-  const changed = changedPath.replace(/\\/g, "/");
-  const read = projectReader(projectDir);
-  const mounted = closureOf(read, ROOT_COMPOSITION);
-  if (changed === ROOT_COMPOSITION || !mounted.has(changed)) return null;
-  return [...mounted].filter((path) => closureOf(read, path).has(changed));
-}
+// src/routes/imageThumbnail.ts
+import { HTTPException } from "hono/http-exception";
+import { open, stat } from "fs/promises";
+import { createHash as createHash5 } from "crypto";
+import sharp from "sharp";
 
 // src/routes/thumbnailGenerationCoordinator.ts
 var ThumbnailGenerationCoordinator = class {
@@ -4473,10 +4492,10 @@ var ThumbnailGenerationCoordinator = class {
     if (signal.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
     let entry = this.entries.get(key);
     if (!entry) {
-      let resolve8;
+      let resolve9;
       let reject;
       const promise = new Promise((resolvePromise, rejectPromise) => {
-        resolve8 = resolvePromise;
+        resolve9 = resolvePromise;
         reject = rejectPromise;
       });
       entry = {
@@ -4486,7 +4505,7 @@ var ThumbnailGenerationCoordinator = class {
         state: "queued",
         work,
         promise,
-        resolve: resolve8,
+        resolve: resolve9,
         reject
       };
       this.entries.set(key, entry);
@@ -4500,7 +4519,7 @@ var ThumbnailGenerationCoordinator = class {
     return /* @__PURE__ */ new Set([...this.entries.keys(), ...[...this.activeEntries].map((entry) => entry.key)]);
   }
   lease(entry, signal) {
-    return new Promise((resolve8, reject) => {
+    return new Promise((resolve9, reject) => {
       let released = false;
       const release = () => {
         if (released) return;
@@ -4524,7 +4543,7 @@ var ThumbnailGenerationCoordinator = class {
       entry.promise.then(
         (value) => {
           release();
-          resolve8(value);
+          resolve9(value);
         },
         (reason) => {
           release();
@@ -4559,6 +4578,171 @@ var ThumbnailGenerationCoordinator = class {
 };
 var thumbnailGenerationCoordinator = new ThumbnailGenerationCoordinator(1);
 
+// src/routes/imageThumbnail.ts
+var MAX_SOURCE_BYTES = 64 * 1024 * 1024;
+var MAX_CACHE_BYTES = 8 * 1024 * 1024;
+async function generateThumbnail(path, signal) {
+  const file = await open(path, "r");
+  try {
+    const info = await file.stat();
+    if (!info.isFile() || info.size > MAX_SOURCE_BYTES) throw new Error("Unsupported image");
+    const source = Buffer.alloc(info.size);
+    let offset = 0;
+    while (offset < source.length) {
+      signal.throwIfAborted();
+      const { bytesRead } = await file.read(source, offset, source.length - offset, offset);
+      if (!bytesRead) break;
+      offset += bytesRead;
+    }
+    if (source[0] !== 255 || source[1] !== 216) throw new Error("Unsupported image");
+    const image = sharp(source.subarray(0, offset), { limitInputPixels: 4e7 });
+    if ((await image.metadata()).format !== "jpeg") throw new Error("Unsupported image");
+    signal.throwIfAborted();
+    const result = await image.rotate().resize(240, 135, { fit: "inside", withoutEnlargement: true }).jpeg({ quality: 80 }).toBuffer();
+    signal.throwIfAborted();
+    return result;
+  } finally {
+    await file.close();
+  }
+}
+async function resolveSource(adapter, id, url) {
+  const project = await adapter.resolveProject(id);
+  if (!project) throw new HTTPException(404);
+  let relative7;
+  try {
+    relative7 = requestSubPath(url, "projects/:id/image-thumbnail");
+  } catch {
+    throw new HTTPException(400);
+  }
+  if (!/\.jpe?g$/i.test(relative7)) throw new HTTPException(415);
+  const path = pinWithinProject(project.dir, relative7);
+  if (!path) throw new HTTPException(404);
+  const info = await stat(path).catch(() => {
+    throw new HTTPException(404);
+  });
+  if (!info.isFile()) throw new HTTPException(404);
+  if (info.size > MAX_SOURCE_BYTES) throw new HTTPException(413);
+  return { path, info };
+}
+function registerImageThumbnailRoutes(api, adapter) {
+  const coordinator = new ThumbnailGenerationCoordinator(2);
+  const cache = /* @__PURE__ */ new Map();
+  let cacheBytes = 0;
+  const remember = (key, image) => {
+    cacheBytes -= cache.get(key)?.byteLength ?? 0;
+    cache.delete(key);
+    cache.set(key, image);
+    cacheBytes += image.byteLength;
+    while (cacheBytes > MAX_CACHE_BYTES || cache.size > 128) {
+      const oldest = cache.keys().next().value;
+      if (oldest === void 0) break;
+      cacheBytes -= cache.get(oldest)?.byteLength ?? 0;
+      cache.delete(oldest);
+    }
+  };
+  api.get("/projects/:id/image-thumbnail/*", async (c) => {
+    try {
+      const { path, info } = await resolveSource(adapter, c.req.param("id"), c.req.url);
+      const key = createHash5("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");
+      c.header("X-Content-Type-Options", "nosniff");
+      if (c.req.header("If-None-Match") === etag) return c.body(null, 304);
+      let result = cache.get(key);
+      if (result) remember(key, result);
+      else {
+        if (coordinator.protectedKeys().size >= 32) return c.text("thumbnail queue full", 429);
+        result = await coordinator.acquire(key, c.req.raw.signal, async (signal) => {
+          const image = await generateThumbnail(path, signal);
+          remember(key, image);
+          return image;
+        }) ?? void 0;
+      }
+      if (!result) return c.text("image unavailable", 422);
+      c.header("Content-Type", "image/jpeg");
+      return c.body(new Uint8Array(result));
+    } catch (error) {
+      if (error instanceof HTTPException) return error.getResponse();
+      return c.text("image unavailable", 422);
+    }
+  });
+}
+
+// src/routes/thumbnail.ts
+import {
+  closeSync as closeSync3,
+  fstatSync as fstatSync3,
+  openSync as openSync3,
+  mkdirSync as mkdirSync6,
+  readFileSync as readFileSync12,
+  readdirSync as readdirSync6,
+  renameSync as renameSync3,
+  rmSync as rmSync4,
+  statSync as statSync6,
+  unlinkSync as unlinkSync4,
+  writeFileSync as writeFileSync6
+} from "fs";
+import { join as join13 } from "path";
+import { createHash as createHash6, randomUUID as randomUUID4 } from "crypto";
+
+// src/helpers/compositionInputs.ts
+import { readFileSync as readFileSync11 } from "fs";
+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 = resolveWithinProject2(projectDir, compPath);
+      let source = null;
+      try {
+        source = file ? readFileSync11(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();
+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 inputs = closureOf(read, normalizeSource(compPath) ?? compPath).add(ROOT_COMPOSITION);
+  const siblings = [...closureOf(read, ROOT_COMPOSITION)].filter((path) => !inputs.has(path));
+  const inputSignature = createProjectSignature(projectDir, new Set(siblings));
+  inputSignatures.set(key, { projectSignature, inputSignature });
+  return inputSignature;
+}
+function compositionsAffectedBy(projectDir, changedPath) {
+  const changed = changedPath.replace(/\\/g, "/");
+  const read = projectReader(projectDir);
+  const mounted = closureOf(read, ROOT_COMPOSITION);
+  if (changed === ROOT_COMPOSITION || !mounted.has(changed)) return null;
+  return [...mounted].filter((path) => closureOf(read, path).has(changed));
+}
+
 // src/routes/thumbnail.ts
 var THUMBNAIL_CACHE_VERSION = "v4";
 var THUMBNAIL_MAX_OUTPUT_WIDTH = 240;
@@ -4567,10 +4751,16 @@ var THUMBNAIL_CACHE_MAX_BYTES = 512 * 1024 * 1024;
 var THUMBNAIL_CACHE_MAX_AGE_MS = 14 * 24 * 60 * 60 * 1e3;
 var prunedCacheDirs = /* @__PURE__ */ new Set();
 function pruneThumbnailCache(cacheDir, protectedPaths, now = Date.now()) {
-  if (!existsSync7(cacheDir)) return;
-  const files = readdirSync6(cacheDir, { withFileTypes: true }).flatMap((entry) => {
+  let entries;
+  try {
+    entries = readdirSync6(cacheDir, { withFileTypes: true });
+  } catch (err) {
+    if (err.code === "ENOENT") return;
+    throw err;
+  }
+  const files = entries.flatMap((entry) => {
     if (!entry.isFile()) return [];
-    const path = join12(cacheDir, entry.name);
+    const path = join13(cacheDir, entry.name);
     try {
       const stats = statSync6(path);
       return [{ path, bytes: stats.size, mtimeMs: stats.mtimeMs }];
@@ -4606,22 +4796,30 @@ function writeThumbnailAtomically(path, buffer) {
     rmSync4(temporaryPath, { force: true });
   }
 }
-function readCompositionSource(file) {
+function readFileOnce(file) {
   let fd;
   try {
     fd = openSync3(file, "r");
   } catch (err) {
-    if (err.code === "ENOENT") return "missing";
+    const code = err.code;
+    if (code === "ENOENT") return "missing";
+    if (code === "ENOTDIR") return "not-a-file";
     throw err;
   }
   try {
-    const stat2 = fstatSync3(fd);
-    if (!stat2.isFile()) return "not-a-file";
-    return { html: readFileSync12(fd, "utf-8"), mtimeMs: stat2.mtimeMs };
+    const stat3 = fstatSync3(fd);
+    if (!stat3.isFile()) return "not-a-file";
+    return { data: readFileSync12(fd), mtimeMs: stat3.mtimeMs };
   } finally {
     closeSync3(fd);
   }
 }
+function manifestKey(file) {
+  const manifest = readFileOnce(file);
+  if (typeof manifest === "string") return { key: "", mtimeMs: -Infinity };
+  const hash = createHash6("sha1").update(manifest.data).digest("hex").slice(0, 16);
+  return { key: `_${hash}`, mtimeMs: Math.round(manifest.mtimeMs) };
+}
 function registerThumbnailRoutes(api, adapter) {
   api.get("/projects/:id/thumbnail/*", async (c) => {
     if (!adapter.generateThumbnail) {
@@ -4633,7 +4831,7 @@ function registerThumbnailRoutes(api, adapter) {
     let compPath = requestSubPath(c.req.url, "projects/:id/thumbnail");
     if (compPath && !compPath.includes(".")) compPath += ".html";
     const htmlFile = resolveWithinProject2(project.dir, compPath);
-    const source = htmlFile ? readCompositionSource(htmlFile) : "not-a-file";
+    const source = htmlFile ? readFileOnce(htmlFile) : "not-a-file";
     if (source === "not-a-file") return c.json({ error: "not found" }, 404);
     const inputSignature = compositionInputSignature(project.dir, compPath, projectSignature);
     const url = new URL(c.req.url, `http://${c.req.header("host") || "localhost"}`);
@@ -4655,8 +4853,8 @@ function registerThumbnailRoutes(api, adapter) {
     let sourceMtime = 0;
     let sourceKey = "";
     if (source !== "missing") {
-      const { html } = source;
-      sourceKey = `_${createHash5("sha1").update(html).digest("hex").slice(0, 16)}`;
+      const html = source.data.toString("utf-8");
+      sourceKey = `_${createHash6("sha1").update(html).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.round(source.mtimeMs);
       if (!vpWidth) {
         const wMatch = html.match(/data-width=["'](\d+)["']/);
@@ -4665,31 +4863,20 @@ function registerThumbnailRoutes(api, adapter) {
         if (hMatch?.[1]) compH = parseInt(hMatch[1]);
       }
     }
-    const manualEditsFile = join12(project.dir, STUDIO_MANUAL_EDITS_PATH);
-    let manualEditsKey = "";
-    if (existsSync7(manualEditsFile)) {
-      const manualEditsContent = readFileSync12(manualEditsFile, "utf-8");
-      manualEditsKey = `_${createHash5("sha1").update(manualEditsContent).digest("hex").slice(0, 16)}`;
-      sourceMtime = Math.max(sourceMtime, Math.round(statSync6(manualEditsFile).mtimeMs));
-    }
-    const motionFile = join12(project.dir, STUDIO_MOTION_PATH);
-    let motionKey = "";
-    if (existsSync7(motionFile)) {
-      const motionContent = readFileSync12(motionFile, "utf-8");
-      motionKey = `_${createHash5("sha1").update(motionContent).digest("hex").slice(0, 16)}`;
-      sourceMtime = Math.max(sourceMtime, Math.round(statSync6(motionFile).mtimeMs));
-    }
+    const manualEdits = manifestKey(join13(project.dir, STUDIO_MANUAL_EDITS_PATH));
+    const motion = manifestKey(join13(project.dir, STUDIO_MOTION_PATH));
+    sourceMtime = Math.max(sourceMtime, manualEdits.mtimeMs, motion.mtimeMs);
     const projectUrl = `http://${c.req.header("host")}/api/projects/${encodeURIComponent(project.id)}`;
     const previewUrl = compPath === "index.html" ? `${projectUrl}/preview` : `${projectUrl}/preview/comp/${compPath.split("/").map(encodeURIComponent).join("/")}`;
-    const cacheDir = join12(project.dir, ".thumbnails");
+    const cacheDir = join13(project.dir, ".thumbnails");
     const selectorKey = selector ? `_${selector.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 80)}_${selectorIndex ?? 0}` : "";
     const urlVersionKey = urlVersion ? `_${urlVersion.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 32)}` : "";
-    const inputSignatureKey = `_${createHash5("sha1").update(inputSignature).digest("hex").slice(0, 16)}`;
+    const inputSignatureKey = `_${createHash6("sha1").update(inputSignature).digest("hex").slice(0, 16)}`;
     const outputScale = outputMode === "source" ? 1 : Math.min(1, THUMBNAIL_MAX_OUTPUT_WIDTH / compW, THUMBNAIL_MAX_OUTPUT_HEIGHT / compH);
     const outputWidth = Math.max(1, Math.round(compW * outputScale));
     const outputHeight = Math.max(1, Math.round(compH * outputScale));
-    const cacheKey = `${THUMBNAIL_CACHE_VERSION}${urlVersionKey}${inputSignatureKey}${manualEditsKey}${motionKey}${sourceKey}_${format}_${outputMode}_${compPath.replace(/\//g, "_")}_${compW}x${compH}_${outputWidth}x${outputHeight}_${sourceMtime}_${seekTime.toFixed(2)}${selectorKey}.${format === "png" ? "png" : "jpg"}`;
-    const cachePath = join12(cacheDir, cacheKey);
+    const cacheKey = `${THUMBNAIL_CACHE_VERSION}${urlVersionKey}${inputSignatureKey}${manualEdits.key}${motion.key}${sourceKey}_${format}_${outputMode}_${compPath.replace(/\//g, "_")}_${compW}x${compH}_${outputWidth}x${outputHeight}_${sourceMtime}_${seekTime.toFixed(2)}${selectorKey}.${format === "png" ? "png" : "jpg"}`;
+    const cachePath = join13(cacheDir, cacheKey);
     if (!prunedCacheDirs.has(cacheDir)) {
       prunedCacheDirs.add(cacheDir);
       pruneThumbnailCache(
@@ -4697,8 +4884,9 @@ function registerThumbnailRoutes(api, adapter) {
         /* @__PURE__ */ new Set([...thumbnailGenerationCoordinator.protectedKeys(), cachePath])
       );
     }
-    if (existsSync7(cachePath)) {
-      return new Response(new Uint8Array(readFileSync12(cachePath)), {
+    const cached = readFileOnce(cachePath);
+    if (typeof cached === "object") {
+      return new Response(new Uint8Array(cached.data), {
         headers: { "Content-Type": contentType, "Cache-Control": "no-cache" }
       });
     }
@@ -4728,7 +4916,7 @@ function registerThumbnailRoutes(api, adapter) {
           if (afterGeneration?.project.dir !== project.dir || !inputsUnchanged(afterGeneration.signature) || !inputsUnchanged(createProjectSignature(project.dir))) {
             return generated;
           }
-          if (!existsSync7(cacheDir)) mkdirSync6(cacheDir, { recursive: true });
+          mkdirSync6(cacheDir, { recursive: true });
           writeThumbnailAtomically(cachePath, generated);
           return generated;
         }
@@ -4754,24 +4942,24 @@ function registerThumbnailRoutes(api, adapter) {
 }
 
 // src/routes/waveform.ts
-import { existsSync as existsSync8, readFileSync as readFileSync13, statSync as statSync7 } from "fs";
-import { join as join13, resolve as resolve5 } from "path";
+import { existsSync as existsSync7, readFileSync as readFileSync13, statSync as statSync7 } from "fs";
+import { join as join14, resolve as resolve6 } from "path";
 import { isWithinProjectRoot as isWithinProjectRoot2 } from "@hyperframes/parsers/asset-resolution";
 function registerWaveformRoutes(api, adapter) {
   api.get("/projects/:id/waveform/*", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "not found" }, 404);
     const assetPath = requestSubPath(c.req.url, "projects/:id/waveform");
-    const audioPath = resolve5(project.dir, assetPath);
+    const audioPath = resolve6(project.dir, assetPath);
     if (!isWithinProjectRoot2(project.dir, audioPath)) {
       return c.json({ error: "file not found" }, 404);
     }
     const stats = statSync7(audioPath, { throwIfNoEntry: false });
     if (!stats) return c.json({ error: "file not found" }, 404);
-    const cacheDir = join13(project.dir, ".waveform-cache");
-    const cachePath = join13(cacheDir, buildWaveformCacheKey(assetPath, stats));
+    const cacheDir = join14(project.dir, ".waveform-cache");
+    const cachePath = join14(cacheDir, buildWaveformCacheKey(assetPath, stats));
     try {
-      if (isWaveformCacheDirectory(cacheDir) && existsSync8(cachePath)) {
+      if (isWaveformCacheDirectory(cacheDir) && existsSync7(cachePath)) {
         const peaks2 = JSON.parse(readFileSync13(cachePath, "utf-8"));
         return c.json({ peaks: peaks2 });
       }
@@ -4904,12 +5092,12 @@ function registerFontRoutes(api) {
       return c.json({ error: "font file not accessible" }, 404);
     }
     try {
-      const stat2 = fstatSync4(fd);
-      if (stat2.size > SYSTEM_FONT_SIZE_LIMIT) {
+      const stat3 = fstatSync4(fd);
+      if (stat3.size > SYSTEM_FONT_SIZE_LIMIT) {
         return c.json({ error: "font file too large" }, 413);
       }
-      const buffer = Buffer.alloc(stat2.size);
-      readSync(fd, buffer, 0, stat2.size, 0);
+      const buffer = Buffer.alloc(stat3.size);
+      readSync(fd, buffer, 0, stat3.size, 0);
       const mimeType = located.format === "otf" ? "font/otf" : located.format === "woff2" ? "font/woff2" : located.format === "woff" ? "font/woff" : located.format === "ttc" ? "font/collection" : "font/ttf";
       const fileName = `${family.replace(/[^a-zA-Z0-9 -]/g, "")}.${located.format}`;
       return new Response(buffer, {
@@ -4937,7 +5125,7 @@ function registerRegistryRoutes(api, adapter) {
   });
   api.post("/projects/:id/registry/install", async (c) => {
     if (!adapter.installRegistryBlock) {
-      return c.json({ error: "Registry install not available" }, 501);
+      return c.json({ error: "Installing catalog items needs hyperframes preview" }, 501);
     }
     const project = await adapter.resolveProject(c.req.param("id"));
     if (!project) return c.json({ error: "Project not found" }, 404);
@@ -5055,8 +5243,8 @@ 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 basename3, dirname as dirname6, extname as extname2, join as join14 } from "path";
+import { existsSync as existsSync8, mkdirSync as mkdirSync7 } from "fs";
+import { basename as basename3, dirname as dirname7, extname as extname2, join as join15 } from "path";
 var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([
   ".mp4",
   ".mov",
@@ -5093,7 +5281,7 @@ function uniqueAssetPath(projectDir, assetPath) {
   const ext = extname2(assetPath);
   const withoutExt = assetPath.slice(0, -ext.length);
   let candidate = assetPath;
-  for (let index = 2; existsSync9(join14(projectDir, candidate)); index++) {
+  for (let index = 2; existsSync8(join15(projectDir, candidate)); index++) {
     candidate = `${withoutExt}-${index}${ext}`;
   }
   return candidate;
@@ -5144,7 +5332,7 @@ function registerMediaRoutes(api, adapter, options = {}) {
     }
     const filePath = resolveWithinProject2(project.dir, assetPath);
     if (!filePath) return c.json({ error: "forbidden" }, 403);
-    if (!existsSync9(filePath)) return c.json({ error: "media not found" }, 404);
+    if (!existsSync8(filePath)) return c.json({ error: "media not found" }, 404);
     return c.json({ path: assetPath, metadata: await readMediaMetadata(filePath) });
   });
   api.post(
@@ -5166,7 +5354,7 @@ function registerMediaRoutes(api, adapter, options = {}) {
       }
       const inputPath = resolveWithinProject2(project.dir, inputAssetPath);
       if (!inputPath) return c.json({ error: "forbidden" }, 403);
-      if (!existsSync9(inputPath)) return c.json({ error: "input media not found" }, 404);
+      if (!existsSync8(inputPath)) return c.json({ error: "input media not found" }, 404);
       const inputIsVideo = isVideoPath(inputAssetPath);
       const inputIsImage = isImagePath(inputAssetPath);
       if (!inputIsVideo && !inputIsImage) {
@@ -5200,8 +5388,8 @@ function registerMediaRoutes(api, adapter, options = {}) {
           return c.json({ error: "forbidden" }, 403);
         }
       }
-      mkdirSync7(dirname6(outputPath), { recursive: true });
-      if (backgroundOutputPath) mkdirSync7(dirname6(backgroundOutputPath), { recursive: true });
+      mkdirSync7(dirname7(outputPath), { recursive: true });
+      if (backgroundOutputPath) mkdirSync7(dirname7(backgroundOutputPath), { recursive: true });
       const jobId = makeJobId(project.id, mediaJobs);
       const state = adapter.startBackgroundRemoval({
         project,
@@ -5258,12 +5446,12 @@ function registerMediaRoutes(api, adapter, options = {}) {
 }
 
 // src/routes/globalAssets.ts
-import { existsSync as existsSync10, readFileSync as readFileSync14 } from "fs";
+import { existsSync as existsSync9, readFileSync as readFileSync14 } from "fs";
 import { homedir } from "os";
-import { join as join15 } from "path";
+import { join as join16 } from "path";
 function readGlobalAssets(home = homedir()) {
-  const manifestPath = join15(home, ".media", "manifest.jsonl");
-  if (!existsSync10(manifestPath)) return [];
+  const manifestPath = join16(home, ".media", "manifest.jsonl");
+  if (!existsSync9(manifestPath)) return [];
   const out = [];
   for (const line of readFileSync14(manifestPath, "utf8").split("\n")) {
     if (!line.trim()) continue;
@@ -5286,7 +5474,7 @@ function registerGlobalAssetRoutes(api) {
 import { randomUUID as randomUUID8 } from "crypto";
 import { readdir as readdir2, rm as rm2, rmdir, writeFile } from "fs/promises";
 import {
-  existsSync as existsSync12,
+  existsSync as existsSync11,
   lstatSync as lstatSync4,
   statSync as statSync9,
   mkdirSync as mkdirSync11,
@@ -5296,21 +5484,21 @@ import {
   rmSync as rmSync6
 } from "fs";
 import { homedir as homedir2 } from "os";
-import { dirname as dirname9, isAbsolute as isAbsolute3, join as join19, relative as relative5, resolve as resolve7, sep as sep4 } from "path";
+import { dirname as dirname10, isAbsolute as isAbsolute3, join as join20, relative as relative6, resolve as resolve8, sep as sep4 } from "path";
 
 // src/history/blobStore.ts
-import { createHash as createHash6, randomUUID as randomUUID5 } from "crypto";
+import { createHash as createHash7, randomUUID as randomUUID5 } from "crypto";
 import { constants as constants3, createReadStream as createReadStream2, renameSync as renameSync4 } from "fs";
-import { copyFile, mkdir, readdir, readFile as readFile2, rename, rm, stat } from "fs/promises";
-import { dirname as dirname7, join as join16 } from "path";
+import { copyFile, mkdir, readdir, readFile as readFile2, rename, rm, stat as stat2 } from "fs/promises";
+import { dirname as dirname8, join as join17 } from "path";
 var BLOB_HASH = /^[0-9a-f]{64}$/;
 async function hashFile(path) {
-  const hash = createHash6("sha256");
+  const hash = createHash7("sha256");
   for await (const chunk of createReadStream2(path)) hash.update(chunk);
   return hash.digest("hex");
 }
 async function cloneOrCopy(from, to, beforeReplace) {
-  await mkdir(dirname7(to), { recursive: true });
+  await mkdir(dirname8(to), { recursive: true });
   const temp = `${to}.${randomUUID5()}.tmp`;
   try {
     await copyFile(from, temp, constants3.COPYFILE_FICLONE);
@@ -5325,16 +5513,16 @@ async function openBlobStore(dir) {
   const sizes = /* @__PURE__ */ new Map();
   await mkdir(dir, { recursive: true });
   for (const shard of await readdir(dir))
-    for (const hash of await readdir(join16(dir, shard)).catch(() => []))
-      sizes.set(hash, (await stat(join16(dir, shard, hash))).size);
+    for (const hash of await readdir(join17(dir, shard)).catch(() => []))
+      sizes.set(hash, (await stat2(join17(dir, shard, hash))).size);
   const pathOf = (hash) => {
     if (!BLOB_HASH.test(hash)) throw new Error("That is not a history blob.");
-    return join16(dir, hash.slice(0, 2), hash);
+    return join17(dir, hash.slice(0, 2), hash);
   };
   let total = [...sizes.values()].reduce((sum, size) => sum + size, 0);
   return {
     async put(absPath) {
-      const temp = join16(dir, `incoming-${randomUUID5()}`);
+      const temp = join17(dir, `incoming-${randomUUID5()}`);
       await mkdir(dir, { recursive: true });
       await copyFile(absPath, temp, constants3.COPYFILE_FICLONE);
       const hash = await hashFile(temp);
@@ -5342,8 +5530,8 @@ async function openBlobStore(dir) {
         await rm(temp, { force: true });
         return hash;
       }
-      await mkdir(dirname7(pathOf(hash)), { recursive: true });
-      const size = (await stat(temp)).size;
+      await mkdir(dirname8(pathOf(hash)), { recursive: true });
+      const size = (await stat2(temp)).size;
       await rename(temp, pathOf(hash));
       sizes.set(hash, size);
       total += size;
@@ -5367,13 +5555,13 @@ async function openBlobStore(dir) {
 
 // src/history/historyId.ts
 import { randomUUID as randomUUID6 } from "crypto";
-import { existsSync as existsSync11, mkdirSync as mkdirSync8, readFileSync as readFileSync15, statSync as statSync8, writeFileSync as writeFileSync7 } from "fs";
-import { join as join17, resolve as resolve6 } from "path";
-var ID_PATH = join17(".hyperframes", "history-id");
+import { existsSync as existsSync10, mkdirSync as mkdirSync8, readFileSync as readFileSync15, statSync as statSync8, writeFileSync as writeFileSync7 } from "fs";
+import { join as join18, resolve as resolve7 } from "path";
+var ID_PATH = join18(".hyperframes", "history-id");
 var ID_SHAPE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/;
 function readId(projectDir) {
   try {
-    const id = readFileSync15(join17(projectDir, ID_PATH), "utf-8").trim();
+    const id = readFileSync15(join18(projectDir, ID_PATH), "utf-8").trim();
     return ID_SHAPE.test(id) ? id : null;
   } catch {
     return null;
@@ -5382,35 +5570,35 @@ function readId(projectDir) {
 var sameFolder = (a, b) => a.ino === b.ino && a.birthtimeMs === b.birthtimeMs;
 function isRecordedFolder(historyDir, folder) {
   try {
-    const was = JSON.parse(readFileSync15(join17(historyDir, "project.json"), "utf-8"));
+    const was = JSON.parse(readFileSync15(join18(historyDir, "project.json"), "utf-8"));
     return sameFolder({ ino: was.ino, birthtimeMs: was.born }, folder);
   } catch {
     return false;
   }
 }
 function projectHistoryId(projectDir, historyRoot) {
-  const dir = resolve6(projectDir);
+  const dir = resolve7(projectDir);
   const folder = statSync8(dir);
   let id = readId(dir);
-  if (!id || existsSync11(join17(historyRoot, id)) && !isRecordedFolder(join17(historyRoot, id), folder)) {
+  if (!id || existsSync10(join18(historyRoot, id)) && !isRecordedFolder(join18(historyRoot, id), folder)) {
     id = randomUUID6();
-    mkdirSync8(join17(dir, ".hyperframes"), { recursive: true });
-    writeFileSync7(join17(dir, ID_PATH), `${id}
+    mkdirSync8(join18(dir, ".hyperframes"), { recursive: true });
+    writeFileSync7(join18(dir, ID_PATH), `${id}
 `);
   }
-  recordProject(join17(historyRoot, id), dir, folder);
+  recordProject(join18(historyRoot, id), dir, folder);
   return id;
 }
 function recordProject(historyDir, dir, folder) {
   const record = { dir, ino: folder.ino, born: folder.birthtimeMs };
   mkdirSync8(historyDir, { recursive: true });
-  replaceFileAtomically(join17(historyDir, "project.json"), JSON.stringify(record), 420);
+  replaceFileAtomically(join18(historyDir, "project.json"), JSON.stringify(record), 420);
 }
 
 // src/history/ownerLock.ts
 import { randomUUID as randomUUID7 } from "crypto";
 import { linkSync, mkdirSync as mkdirSync9, readFileSync as readFileSync16, rmSync as rmSync5, writeFileSync as writeFileSync8 } from "fs";
-import { join as join18 } from "path";
+import { join as join19 } from "path";
 var HistoryBusyError = class extends Error {
   constructor(pid) {
     super(`This project's history is open in another process (pid ${pid}).`);
@@ -5469,7 +5657,7 @@ function evictDeadOwner(file) {
   }
 }
 async function takeHistoryOwnership(home, waitMs) {
-  const file = join18(home, "owner.pid");
+  const file = join19(home, "owner.pid");
   const deadline = Date.now() + waitMs;
   mkdirSync9(home, { recursive: true });
   for (; ; ) {
@@ -5490,7 +5678,7 @@ async function takeHistoryOwnership(home, waitMs) {
 
 // src/history/historyLog.ts
 import { closeSync as closeSync5, constants as constants4, mkdirSync as mkdirSync10, openSync as openSync5, readFileSync as readFileSync17, writeSync as writeSync2 } from "fs";
-import { dirname as dirname8 } from "path";
+import { dirname as dirname9 } from "path";
 var START = "start";
 function parseRecord(line) {
   try {
@@ -5542,7 +5730,7 @@ function writeLog(file, log) {
     ...log.entries.map((entry) => ({ type: "entry", entry })),
     ...[...log.pins].map((id) => ({ type: "pin", id, pinned: true }))
   ];
-  mkdirSync10(dirname8(file), { recursive: true });
+  mkdirSync10(dirname9(file), { recursive: true });
   replaceFileAtomically(file, records.map((r) => `${JSON.stringify(r)}
 `).join(""), 420);
 }
@@ -5615,7 +5803,7 @@ function referencedHashes(log, current) {
 }
 
 // src/history/projectHistory.ts
-var DEFAULT_HISTORY_ROOT = join19(homedir2(), ".cache", "hyperframes", "history");
+var DEFAULT_HISTORY_ROOT = join20(homedir2(), ".cache", "hyperframes", "history");
 var MAX_WINDOW_IDLE_MS = 10 * 6e4;
 var UNDO_MODES = ["just-this", "back-to-before", "keep-later-edits"];
 var OUTSIDE = { kind: "outside", name: "Outside" };
@@ -5641,20 +5829,20 @@ async function removeEmptyFolders(dir) {
     throw error;
   }
   for (const entry of entries)
-    if (entry.isDirectory()) await removeEmptyFolders(join19(dir, entry.name));
+    if (entry.isDirectory()) await removeEmptyFolders(join20(dir, entry.name));
   await rmdir(dir);
 }
 function fileLeftIn(dir, at, deleted) {
   for (const entry of readdirSync7(dir, { withFileTypes: true })) {
     const path = `${at}/${entry.name}`;
-    const left = entry.isDirectory() ? fileLeftIn(join19(dir, entry.name), path, deleted) : deleted.has(path) ? void 0 : path;
+    const left = entry.isDirectory() ? fileLeftIn(join20(dir, entry.name), path, deleted) : deleted.has(path) ? void 0 : path;
     if (left) return left;
   }
   return void 0;
 }
 function ignoresCase(dir) {
-  const self = statSync9(join19(dir, ID_PATH), { throwIfNoEntry: false });
-  const other = statSync9(join19(dir, ID_PATH.toUpperCase()), { throwIfNoEntry: false });
+  const self = statSync9(join20(dir, ID_PATH), { throwIfNoEntry: false });
+  const other = statSync9(join20(dir, ID_PATH.toUpperCase()), { throwIfNoEntry: false });
   return self !== void 0 && other?.ino === self.ino && other.dev === self.dev;
 }
 var blocks = (removed, added) => added.startsWith(`${removed}/`) || removed.startsWith(`${added}/`);
@@ -5670,8 +5858,8 @@ var Engine = class {
     this.options = options;
     this.projectId = projectId;
     this.blobs = blobs;
-    this.dir = resolve7(options.projectDir);
-    this.home = join19(options.historyRoot, projectId);
+    this.dir = resolve8(options.projectDir);
+    this.home = join20(options.historyRoot, projectId);
     this.foldsCase = ignoresCase(this.dir);
     const folder = statSync9(this.dir, { throwIfNoEntry: false });
     if (!folder || readId(this.dir) !== projectId || !isRecordedFolder(this.home, folder))
@@ -5704,7 +5892,7 @@ var Engine = class {
     return this.foldsCase ? path.toLowerCase() : path;
   }
   get logFile() {
-    return join19(this.home, "log.jsonl");
+    return join20(this.home, "log.jsonl");
   }
   now() {
     return (this.options.now ?? Date.now)();
@@ -5732,7 +5920,7 @@ var Engine = class {
   persistLog(record) {
     if (record) saveRecord(this.logFile, this.log, record);
     else writeLog(this.logFile, this.log);
-    if (!existsSync12(join19(this.home, "project.json")))
+    if (!existsSync11(join20(this.home, "project.json")))
       recordProject(this.home, this.dir, this.folder);
   }
   replaced() {
@@ -5782,7 +5970,7 @@ var Engine = class {
   }
   readStatCache() {
     try {
-      const files = JSON.parse(readFileSync18(join19(this.home, "stat.json"), "utf-8"));
+      const files = JSON.parse(readFileSync18(join20(this.home, "stat.json"), "utf-8"));
       return new Map(Object.entries(files));
     } catch {
       return /* @__PURE__ */ new Map();
@@ -5791,7 +5979,7 @@ var Engine = class {
   saveStatCache() {
     const files = JSON.stringify(Object.fromEntries(this.tracked));
     mkdirSync11(this.home, { recursive: true });
-    replaceFileAtomically(join19(this.home, "stat.json"), files, 420);
+    replaceFileAtomically(join20(this.home, "stat.json"), files, 420);
   }
   /**
    * Takes in every write since the last sweep and files each change to its writer. ponytail: always the whole
@@ -5831,23 +6019,23 @@ var Engine = class {
   /** The file's hash once copied in; null when it was removed before the copy (the next sweep records that). */
   async storeIfPresent(path) {
     try {
-      return await this.blobs.put(join19(this.dir, path));
+      return await this.blobs.put(join20(this.dir, path));
     } catch (error) {
       if (error.code === "ENOENT") return null;
       throw error;
     }
   }
-  async observe(path, stat2, at) {
+  async observe(path, stat3, at) {
     const known = this.tracked.get(path) ?? { hash: null, stat: null };
-    if (stat2 && known.stat === stat2) return false;
+    if (stat3 && known.stat === stat3) return false;
     const hash = await this.storeIfPresent(path);
     if (hash === null || this.whereFolder() !== "here") return false;
-    this.tracked.set(path, { hash, stat: stat2 });
+    this.tracked.set(path, { hash, stat: stat3 });
     if (known.hash !== hash) await this.record(path, known.hash, hash, at);
-    return known.hash !== hash || known.stat !== stat2;
+    return known.hash !== hash || known.stat !== stat3;
   }
   async record(path, before, after, at) {
-    const endedBeforeThisWrite = this.windows.filter((open) => !takesWrite(open, at));
+    const endedBeforeThisWrite = this.windows.filter((open2) => !takesWrite(open2, at));
     if (endedBeforeThisWrite.length) await this.commitOutside();
     for (const window2 of endedBeforeThisWrite) await this.endWindow(window2);
     const window = this.windows.at(-1);
@@ -5880,7 +6068,7 @@ var Engine = class {
       if (window.changes.size) await this.commitCut(window, [...window.changes.keys()]);
   }
   pendingElsewhere() {
-    return Boolean(this.outside?.changes.size) || this.windows.some((open) => open.changes.size > 0);
+    return Boolean(this.outside?.changes.size) || this.windows.some((open2) => open2.changes.size > 0);
   }
   /** The held claim `taken` continues: same key, each file from its own last change, no held file changed since. */
   heldFor(key, taken) {
@@ -5894,7 +6082,7 @@ var Engine = class {
     return group && taken.every((change) => after(change.path, change.before) === change.before) && [...group.changes.values()].every(untouched) ? group : null;
   }
   logPath(path) {
-    return relative5(this.dir, resolve7(this.dir, path)).split(sep4).join("/");
+    return relative6(this.dir, resolve8(this.dir, path)).split(sep4).join("/");
   }
   /** Takes `paths`' uncommitted changes from others, cut at what `who` overwrote. */
   async takeClaimed(who, paths, overwrote) {
@@ -5905,7 +6093,7 @@ var Engine = class {
         hashOfVersion(version)
       ])
     );
-    const others = this.windows.filter((open) => !sameWho(open.who, who));
+    const others = this.windows.filter((open2) => !sameWho(open2.who, who));
     const groups = this.outside ? [this.outside, ...others] : others;
     const hits = groups.flatMap(
       (group) => [...group.changes.values()].filter((change) => wanted.has(change.path)).map((change) => ({ group, change }))
@@ -5918,7 +6106,7 @@ var Engine = class {
     }
     hits.forEach(
       ({ change }, i) => forgetOverwrittenBytes(
-        join19(this.dir, change.path),
+        join20(this.dir, change.path),
         new Set([...walked[i]].map(hashVersion))
       )
     );
@@ -5926,7 +6114,7 @@ var Engine = class {
   }
   /** Walks the server's writes back from `change.after` to the bytes they replaced, stored so an undo restores them. */
   async overwrittenBy(change, told, seen) {
-    const absPath = join19(this.dir, change.path);
+    const absPath = join20(this.dir, change.path);
     let bytes;
     for (let hash = change.after; hash; ) {
       if (seen.has(hash)) return void 0;
@@ -5938,7 +6126,7 @@ var Engine = class {
       if (hash === change.before || hash === told) return hash;
     }
     if (bytes === void 0) return void 0;
-    const staged = join19(this.home, `overwrote-${randomUUID8()}`);
+    const staged = join20(this.home, `overwrote-${randomUUID8()}`);
     await writeFile(staged, bytes);
     try {
       return await this.blobs.put(staged);
@@ -6051,7 +6239,7 @@ var Engine = class {
   }
   /** A watcher saw a write: one sweep per burst takes it in (a deleted folder is reported by its name alone). */
   noteChange(path) {
-    if (this.notedTimer || !affectsProjectSignature(this.dir, resolve7(this.dir, path))) return;
+    if (this.notedTimer || !affectsProjectSignature(this.dir, resolve8(this.dir, path))) return;
     this.notedTimer = setTimeout(() => {
       this.notedTimer = null;
       this.background(() => this.sweep());
@@ -6093,7 +6281,7 @@ var Engine = class {
     if (!this.windows.includes(window)) return window.entry ?? null;
     clearTimeout(window.idleTimer);
     await this.commitClaim();
-    this.windows = this.windows.filter((open) => open !== window);
+    this.windows = this.windows.filter((open2) => open2 !== window);
     window.entry = await this.commit(window) ?? window.entry ?? null;
     return window.entry;
   }
@@ -6109,9 +6297,9 @@ var Engine = class {
     const parts = path.split("/");
     for (let depth = 1; depth <= parts.length; depth += 1) {
       const at = parts.slice(0, depth).join("/");
-      const stat2 = lstatSync4(join19(this.dir, at), { throwIfNoEntry: false });
-      if (!stat2) return void 0;
-      if (at === path || !stat2.isDirectory()) return { at, stat: stat2 };
+      const stat3 = lstatSync4(join20(this.dir, at), { throwIfNoEntry: false });
+      if (!stat3) return void 0;
+      if (at === path || !stat3.isDirectory()) return { at, stat: stat3 };
     }
     return void 0;
   }
@@ -6121,8 +6309,8 @@ var Engine = class {
     if (!standing) return void 0;
     if (standing.stat.isSymbolicLink()) return standing.at;
     if (standing.at === path && !standing.stat.isDirectory()) return void 0;
-    const real = realpathSync3.native(join19(this.dir, standing.at));
-    const at = relative5(realpathSync3.native(this.dir), real).split(sep4).join("/");
+    const real = realpathSync3.native(join20(this.dir, standing.at));
+    const at = relative6(realpathSync3.native(this.dir), real).split(sep4).join("/");
     if (standing.at !== path) return deleted.has(at) ? void 0 : at;
     return fileLeftIn(real, at, deleted);
   }
@@ -6139,14 +6327,14 @@ var Engine = class {
       for (const [path, hash] of changes) await this.writeProjectFile(path, hash);
       await this.sweep();
     } finally {
-      this.windows = this.windows.filter((open) => open !== group);
+      this.windows = this.windows.filter((open2) => open2 !== group);
     }
     return this.commit(group, extra);
   }
   /** Writes one project file (null deletes it), first leaving the running operation's receipt for its echo. */
   async writeProjectFile(path, hash) {
     this.assertWritable();
-    const absPath = join19(this.dir, path);
+    const absPath = join20(this.dir, path);
     const { writeToken } = this;
     if (writeToken) {
       const version = hash === null ? DELETED_VERSION : hashVersion(hash);
@@ -6270,18 +6458,18 @@ var Engine = class {
       },
       checkout: (entryId, side, emptyDir) => this.queue(async () => {
         this.entry(entryId);
-        if (!existsSync12(this.dir)) throw new Error(`The project folder is gone: ${this.dir}`);
-        const dest = resolve7(emptyDir);
+        if (!existsSync11(this.dir)) throw new Error(`The project folder is gone: ${this.dir}`);
+        const dest = resolve8(emptyDir);
         if (isWithin(this.dir, dest))
           throw new Error(`Checkout writes outside the project only: ${dest}`);
         if ((await readdir2(dest).catch(missingIsEmpty)).length > 0)
           throw new Error(`Checkout writes into an empty folder only: ${dest}`);
         const files = manifestAround(this.log, entryId, side);
         try {
-          for (const [path, hash] of files) await this.blobs.writeTo(hash, join19(dest, path));
+          for (const [path, hash] of files) await this.blobs.writeTo(hash, join20(dest, path));
         } catch (error) {
           for (const name of await readdir2(dest).catch(() => []))
-            await rm2(join19(dest, name), { recursive: true, force: true });
+            await rm2(join20(dest, name), { recursive: true, force: true });
           throw error;
         }
       }),
@@ -6316,9 +6504,9 @@ var Engine = class {
   }
 };
 function isWithin(dir, path) {
-  let probe = resolve7(path);
-  while (!existsSync12(probe) && dirname9(probe) !== probe) probe = dirname9(probe);
-  const rel = relative5(realpathSync3.native(dir), realpathSync3.native(probe));
+  let probe = resolve8(path);
+  while (!existsSync11(probe) && dirname10(probe) !== probe) probe = dirname10(probe);
+  const rel = relative6(realpathSync3.native(dir), realpathSync3.native(probe));
   return rel === "" || rel !== ".." && !rel.startsWith(`..${sep4}`) && !isAbsolute3(rel);
 }
 function missingIsEmpty(error) {
@@ -6332,15 +6520,15 @@ var HistoryClosedError = class extends Error {
   }
 };
 async function openProjectHistory(options) {
-  if (!existsSync12(options.projectDir))
+  if (!existsSync11(options.projectDir))
     throw new HistoryClosedError(`${options.projectDir} is gone or now another project.`);
   const projectId = projectHistoryId(options.projectDir, options.historyRoot);
   const release = await takeHistoryOwnership(
-    join19(options.historyRoot, projectId),
+    join20(options.historyRoot, projectId),
     options.ownerWaitMs ?? 5e3
   );
   try {
-    const blobs = await openBlobStore(join19(options.historyRoot, projectId, "blobs"));
+    const blobs = await openBlobStore(join20(options.historyRoot, projectId, "blobs"));
     const engine = new Engine(options, projectId, blobs);
     await engine.queue(() => engine.start());
     const api = engine.api();
@@ -6499,6 +6687,7 @@ function createStudioApi(adapter) {
   registerLintRoutes(api, adapter);
   registerRenderRoutes(api, adapter);
   registerThumbnailRoutes(api, adapter);
+  registerImageThumbnailRoutes(api, adapter);
   registerSelectionRoutes(api, adapter);
   registerMediaRoutes(api, adapter);
   registerWaveformRoutes(api, adapter);
@@ -6510,14 +6699,14 @@ function createStudioApi(adapter) {
 }
 
 // src/history/historyCache.ts
-function historyCache(open) {
+function historyCache(open2) {
   const histories = /* @__PURE__ */ new Map();
   const get = async (projectDir) => {
     let cached = histories.get(projectDir);
-    if (!cached) histories.set(projectDir, cached = open(projectDir));
+    if (!cached) histories.set(projectDir, cached = open2(projectDir));
     const opened = await cached;
     if (!opened?.replacedAtPath()) return opened;
-    const reopen = () => open(projectDir);
+    const reopen = () => open2(projectDir);
     if (histories.get(projectDir) === cached)
       histories.set(projectDir, opened.close().then(reopen, reopen));
     return get(projectDir);
@@ -6534,6 +6723,7 @@ function historyCache(open) {
 }
 
 // src/helpers/duplicateElement.ts
+import { sameInstant } from "@hyperframes/core/clip-facts";
 import { ensureHfIds as ensureHfIds4 } from "@hyperframes/parsers/hf-ids";
 function duplicateElementInHtml(source, target, newId, at) {
   const { document, wrappedFragment } = parseSourceDocument(source);
@@ -6568,9 +6758,10 @@ function rippleElements(document, element, at, duration, track) {
       continue;
     }
     const start = numericAttribute(candidate, "data-start");
-    if (start !== null && start >= at) {
-      candidate.setAttribute("data-start", String(start + duration));
-    }
+    if (start === null) continue;
+    const metInsertionPoint = sameInstant(start, at);
+    if (start < at && !metInsertionPoint) continue;
+    candidate.setAttribute("data-start", String((metInsertionPoint ? at : start) + duration));
   }
 }
 function stripStableIds(element) {
@@ -6585,11 +6776,11 @@ function numericAttribute(element, name) {
 }
 
 // src/helpers/previewDocumentStore.ts
-import { createHash as createHash7 } from "crypto";
+import { createHash as createHash8 } from "crypto";
 import { mkdirSync as mkdirSync12, readFileSync as readFileSync19, readdirSync as readdirSync8, rmSync as rmSync7 } from "fs";
-import { join as join20 } from "path";
+import { join as join21 } from "path";
 function createPreviewDocumentStore(dir, salt) {
-  const fileFor = (key) => join20(dir, `${createHash7("sha256").update(`${salt}
+  const fileFor = (key) => join21(dir, `${createHash8("sha256").update(`${salt}
 ${key}`).digest("hex").slice(0, 32)}.html`);
   return {
     read(key) {
@@ -6605,7 +6796,7 @@ ${key}`).digest("hex").slice(0, 32)}.html`);
         const file = fileFor(key);
         replaceFileAtomically(file, html, 420);
         for (const name of readdirSync8(dir)) {
-          if (join20(dir, name) !== file) rmSync7(join20(dir, name), { force: true });
+          if (join21(dir, name) !== file) rmSync7(join21(dir, name), { force: true });
         }
       } catch {
       }
@@ -6692,6 +6883,7 @@ export {
   STUDIO_MANUAL_EDITS_PATH,
   STUDIO_MOTION_PATH,
   UNDO_MODES,
+  affectsPreview,
   affectsProjectSignature,
   applyFileMutations,
   buildSubCompositionHtml,