@hyperframes/studio-server 0.8.114 → 0.8.115

package/dist/chunk-IMG2GSY6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/helpers/screenshotClip.ts"],"sourcesContent":["export interface ScreenshotClip {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n}\n\n// Serialised by page.evaluate, so self-contained; fades everything but the element's own branch.\nexport function getElementScreenshotClip(\n  selector: string,\n  selectorIndex?: number,\n): ScreenshotClip | undefined {\n  // Guard against invalid CSS selectors (e.g. `#0` — a digit-leading id from\n  // user HTML that upstream producers forgot to CSS.escape). querySelectorAll\n  // throws SyntaxError on those, which bubbles out of page.evaluate and fails\n  // the whole thumbnail. Returning undefined here falls back to a full-page\n  // screenshot, so the user still sees a thumbnail instead of a broken image.\n  let matches: HTMLElement[];\n  try {\n    matches = Array.from(document.querySelectorAll(selector)).filter(\n      (el): el is HTMLElement => el instanceof HTMLElement,\n    );\n  } catch {\n    return undefined;\n  }\n  const safeIndex = Math.max(0, Math.min(matches.length - 1, Math.floor(selectorIndex ?? 0)));\n  const el = matches[safeIndex] ?? null;\n  if (!(el instanceof HTMLElement)) return undefined;\n  // Opacity, not visibility; each prior inline opacity is kept for clearElementScreenshotIsolation.\n  const page = window as Window & { __hfThumbnailFaded?: [CSSStyleDeclaration, string, string][] };\n  const faded = (page.__hfThumbnailFaded ??= []);\n  for (let node: Element = el; node.parentElement; node = node.parentElement) {\n    for (const sibling of Array.from(node.parentElement.children)) {\n      const style = (sibling as HTMLElement).style;\n      if (sibling === node || !style) continue;\n      faded.push([style, style.getPropertyValue(\"opacity\"), style.getPropertyPriority(\"opacity\")]);\n      style.setProperty(\"opacity\", \"0\", \"important\");\n    }\n  }\n  const rect = el.getBoundingClientRect();\n  if (rect.width < 4 || rect.height < 4) return undefined;\n  const pad = 8;\n  const x = Math.max(0, rect.left - pad);\n  const y = Math.max(0, rect.top - pad);\n  const maxWidth = window.innerWidth - x;\n  const maxHeight = window.innerHeight - y;\n  return {\n    x,\n    y,\n    width: Math.max(1, Math.min(rect.width + pad * 2, maxWidth)),\n    height: Math.max(1, Math.min(rect.height + pad * 2, maxHeight)),\n  };\n}\n\nexport function clearElementScreenshotIsolation(): void {\n  const page = window as Window & { __hfThumbnailFaded?: [CSSStyleDeclaration, string, string][] };\n  for (const [style, value, priority] of (page.__hfThumbnailFaded ?? []).reverse()) {\n    if (value) style.setProperty(\"opacity\", value, priority);\n    else style.removeProperty(\"opacity\");\n  }\n  page.__hfThumbnailFaded = [];\n}\n"],"mappings":";AAQO,SAAS,yBACd,UACA,eAC4B;AAM5B,MAAI;AACJ,MAAI;AACF,cAAU,MAAM,KAAK,SAAS,iBAAiB,QAAQ,CAAC,EAAE;AAAA,MACxD,CAACA,QAA0BA,eAAc;AAAA,IAC3C;AAAA,EACF,QAAQ;AACN,WAAO;AAAA,EACT;AACA,QAAM,YAAY,KAAK,IAAI,GAAG,KAAK,IAAI,QAAQ,SAAS,GAAG,KAAK,MAAM,iBAAiB,CAAC,CAAC,CAAC;AAC1F,QAAM,KAAK,QAAQ,SAAS,KAAK;AACjC,MAAI,EAAE,cAAc,aAAc,QAAO;AAEzC,QAAM,OAAO;AACb,QAAM,QAAS,KAAK,uBAAuB,CAAC;AAC5C,WAAS,OAAgB,IAAI,KAAK,eAAe,OAAO,KAAK,eAAe;AAC1E,eAAW,WAAW,MAAM,KAAK,KAAK,cAAc,QAAQ,GAAG;AAC7D,YAAM,QAAS,QAAwB;AACvC,UAAI,YAAY,QAAQ,CAAC,MAAO;AAChC,YAAM,KAAK,CAAC,OAAO,MAAM,iBAAiB,SAAS,GAAG,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAC3F,YAAM,YAAY,WAAW,KAAK,WAAW;AAAA,IAC/C;AAAA,EACF;AACA,QAAM,OAAO,GAAG,sBAAsB;AACtC,MAAI,KAAK,QAAQ,KAAK,KAAK,SAAS,EAAG,QAAO;AAC9C,QAAM,MAAM;AACZ,QAAM,IAAI,KAAK,IAAI,GAAG,KAAK,OAAO,GAAG;AACrC,QAAM,IAAI,KAAK,IAAI,GAAG,KAAK,MAAM,GAAG;AACpC,QAAM,WAAW,OAAO,aAAa;AACrC,QAAM,YAAY,OAAO,cAAc;AACvC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,QAAQ,MAAM,GAAG,QAAQ,CAAC;AAAA,IAC3D,QAAQ,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,SAAS,MAAM,GAAG,SAAS,CAAC;AAAA,EAChE;AACF;AAEO,SAAS,kCAAwC;AACtD,QAAM,OAAO;AACb,aAAW,CAAC,OAAO,OAAO,QAAQ,MAAM,KAAK,sBAAsB,CAAC,GAAG,QAAQ,GAAG;AAChF,QAAI,MAAO,OAAM,YAAY,WAAW,OAAO,QAAQ;AAAA,QAClD,OAAM,eAAe,SAAS;AAAA,EACrC;AACA,OAAK,qBAAqB,CAAC;AAC7B;","names":["el"]}

package/dist/helpers/screenshotClip.d.ts

@@ -5,5 +5,6 @@ interface ScreenshotClip {
     height: number;
 }
 declare function getElementScreenshotClip(selector: string, selectorIndex?: number): ScreenshotClip | undefined;
+declare function clearElementScreenshotIsolation(): void;
 
-export { type ScreenshotClip, getElementScreenshotClip };
+export { type ScreenshotClip, clearElementScreenshotIsolation, getElementScreenshotClip };

package/dist/helpers/screenshotClip.js

@@ -1,7 +1,9 @@
 import {
+  clearElementScreenshotIsolation,
   getElementScreenshotClip
-} from "../chunk-W2SBTCO2.js";
+} from "../chunk-IMG2GSY6.js";
 export {
+  clearElementScreenshotIsolation,
   getElementScreenshotClip
 };
 //# sourceMappingURL=screenshotClip.js.map

package/dist/helpers/sourceMutation.d.ts

@@ -9,6 +9,11 @@ declare function parseSourceDocument(raw: string): {
     wrappedFragment: boolean;
 };
 declare function findTargetElement(document: Document, target: SourceMutationTarget): Element | null;
+/**
+ * Removes every target in one parse and one serialization. A target nested inside one already
+ * removed no longer matches, which is a normal outcome rather than a failure.
+ */
+declare function removeElementsFromHtml(source: string, targets: readonly SourceMutationTarget[]): string;
 declare function removeElementFromHtml(source: string, target: SourceMutationTarget): string;
 declare function isHTMLElement(el: Node): el is HTMLElement;
 declare function dedupeClonedCompositionId(document: Document, clone: Element): void;
@@ -23,6 +28,8 @@ declare function patchElementInHtml(source: string, target: SourceMutationTarget
     html: string;
     matched: boolean;
 };
+/** Whether each target exists in `source`; the document is parsed once however many targets ask. */
+declare function probeElementsInSource(source: string, targets: readonly SourceMutationTarget[]): boolean[];
 declare function probeElementInSource(source: string, target: SourceMutationTarget): boolean;
 interface SplitElementResult {
     html: string;
@@ -87,4 +94,4 @@ declare function unwrapElementsFromHtml(source: string, groupTarget: SourceMutat
 /** After a cut, give each linked group's right halves their own `data-link` and `data-sync-origin`. */
 declare function relinkSplitHalvesInHtml(source: string, rightHalfIds: readonly string[]): string;
 
-export { type ElementRebase, type PatchOperation, type SourceMutationTarget, type SplitElementResult, type UnwrapChildTrack, type UnwrapElementsResult, type WrapElementsResult, dedupeClonedCompositionId, findTargetElement, isHTMLElement, parseSourceDocument, patchElementInHtml, probeElementInSource, relinkSplitHalvesInHtml, removeElementFromHtml, splitElementInHtml, unwrapElementsFromHtml, wrapElementsInHtml };
+export { type ElementRebase, type PatchOperation, type SourceMutationTarget, type SplitElementResult, type UnwrapChildTrack, type UnwrapElementsResult, type WrapElementsResult, dedupeClonedCompositionId, findTargetElement, isHTMLElement, parseSourceDocument, patchElementInHtml, probeElementInSource, probeElementsInSource, relinkSplitHalvesInHtml, removeElementFromHtml, removeElementsFromHtml, splitElementInHtml, unwrapElementsFromHtml, wrapElementsInHtml };

package/dist/helpers/sourceMutation.js

@@ -5,12 +5,14 @@ import {
   parseSourceDocument,
   patchElementInHtml,
   probeElementInSource,
+  probeElementsInSource,
   relinkSplitHalvesInHtml,
   removeElementFromHtml,
+  removeElementsFromHtml,
   splitElementInHtml,
   unwrapElementsFromHtml,
   wrapElementsInHtml
-} from "../chunk-Z4DIWF3Z.js";
+} from "../chunk-G4YB7Q2Q.js";
 export {
   dedupeClonedCompositionId,
   findTargetElement,
@@ -18,8 +20,10 @@ export {
   parseSourceDocument,
   patchElementInHtml,
   probeElementInSource,
+  probeElementsInSource,
   relinkSplitHalvesInHtml,
   removeElementFromHtml,
+  removeElementsFromHtml,
   splitElementInHtml,
   unwrapElementsFromHtml,
   wrapElementsInHtml

package/dist/history/index.js

@@ -10,7 +10,7 @@ import {
   listProjectHistories,
   openProjectHistory,
   pruneGoneProjectHistories
-} from "../chunk-EPL4YKGI.js";
+} from "../chunk-E3HLZKPI.js";
 import "../chunk-TTWLTYSQ.js";
 export {
   DEFAULT_HISTORY_ROOT,

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { walkDir } from './helpers/safePath.js';
 export { stampProjectHfIds } from './helpers/hfIdPersist.js';
 import { SourceMutationTarget } from './helpers/sourceMutation.js';
 export { PatchOperation, dedupeClonedCompositionId, findTargetElement, parseSourceDocument, patchElementInHtml, removeElementFromHtml, splitElementInHtml } from './helpers/sourceMutation.js';
-export { ScreenshotClip, getElementScreenshotClip } from './helpers/screenshotClip.js';
+export { ScreenshotClip, clearElementScreenshotIsolation, getElementScreenshotClip } from './helpers/screenshotClip.js';
 export { STUDIO_MANUAL_EDITS_PATH, StudioManualEditsRenderScriptOptions, createStudioManualEditsRenderBodyScript, createStudioPositionSeekReapplyScript } from './helpers/manualEditsRenderScript.js';
 export { STUDIO_MOTION_PATH, StudioMotionRenderScriptOptions, createStudioMotionRenderBodyScript } from './helpers/studioMotionRenderScript.js';
 export { isSafePath } from '@hyperframes/core/safe-path';
@@ -54,7 +54,8 @@ declare function createProjectSignature(projectDir: string, excluding?: Readonly
 
 /**
  * Compositions whose rendered frames a write at `changedPath` can change, or `null` for all
- * of them: the root, assets and any file the root does not mount reach every composition.
+ * of them: assets, a root head edit, and any file the root does not mount reach every
+ * composition. A head-preserving root write changes only the root's own frames.
  */
 declare function compositionsAffectedBy(projectDir: string, changedPath: string): string[] | null;
 

package/dist/index.js

@@ -9,12 +9,14 @@ import {
   parseSourceDocument,
   patchElementInHtml,
   probeElementInSource,
+  probeElementsInSource,
   relinkSplitHalvesInHtml,
   removeElementFromHtml,
+  removeElementsFromHtml,
   splitElementInHtml,
   unwrapElementsFromHtml,
   wrapElementsInHtml
-} from "./chunk-Z4DIWF3Z.js";
+} from "./chunk-G4YB7Q2Q.js";
 import {
   isCompositionSource,
   stampProjectHfIds
@@ -44,10 +46,11 @@ import {
   resolveProjectAndSignature,
   resolveProjectSignature,
   settledFileTag
-} from "./chunk-EPL4YKGI.js";
+} from "./chunk-E3HLZKPI.js";
 import {
+  clearElementScreenshotIsolation,
   getElementScreenshotClip
-} from "./chunk-W2SBTCO2.js";
+} from "./chunk-IMG2GSY6.js";
 import {
   DEFAULT_TARGET_LUFS,
   absoluteLoudnessPlan,
@@ -1578,7 +1581,9 @@ async function applyGsapMutations(c, res, mutations) {
   } catch (error) {
     return c.json({ error: error instanceof Error ? error.message : String(error) }, 400);
   }
+  const mutationChanges = [];
   for (const mutation of mutations) {
+    const previousScript = block.scriptText;
     const result = await executeGsapMutation(mutation, block, respond, writer);
     if (result instanceof Response) return result;
     let newScript = typeof result === "string" ? result : result.script;
@@ -1588,6 +1593,7 @@ async function applyGsapMutations(c, res, mutations) {
     if (HOLD_SYNC_MUTATION_TYPES.has(mutation.type)) {
       newScript = writer === "acorn" ? syncPositionHoldsBeforeKeyframes(newScript) : (await loadGsapParser()).syncPositionHoldsBeforeKeyframes(newScript);
     }
+    mutationChanges.push(newScript !== previousScript);
     block.scriptText = newScript;
   }
   const changed = block.scriptText !== initialScript;
@@ -1612,6 +1618,7 @@ async function applyGsapMutations(c, res, mutations) {
     ok: true,
     changed,
     mutated: changed,
+    mutationChanges,
     parsed: parseGsapScriptAcorn(block.scriptText),
     before: beforeHtml,
     after: newHtml,
@@ -2671,11 +2678,14 @@ function registerFileRoutes(api, adapter) {
       return c.json({ error: "targets required" }, 400);
     }
     const originalContent = readFileSync3(ctx.absPath, "utf-8");
-    let next = originalContent;
-    for (const target of targets) {
-      next = removeElementFromHtml(next, target);
-    }
-    return writeIfChanged(c, ctx.project.dir, ctx.filePath, ctx.absPath, originalContent, next);
+    return writeIfChanged(
+      c,
+      ctx.project.dir,
+      ctx.filePath,
+      ctx.absPath,
+      originalContent,
+      removeElementsFromHtml(originalContent, targets)
+    );
   });
   api.post("/projects/:id/file-mutations/split-batch", async (c) => {
     const body = await c.req.json().catch(() => null);
@@ -3079,6 +3089,19 @@ function registerFileRoutes(api, adapter) {
     const exists = probeElementInSource(content, parsed.target);
     return c.json({ exists });
   });
+  api.post("/projects/:id/file-mutations/probe-elements/*", async (c) => {
+    const ctx = await resolveFileMutationContext(c, adapter, "probe-elements");
+    if ("error" in ctx) return ctx.error;
+    const body = await c.req.json().catch(() => null);
+    if (!Array.isArray(body?.targets)) return c.json({ error: "targets required" }, 400);
+    let content;
+    try {
+      content = readFileSync3(ctx.absPath, "utf-8");
+    } catch {
+      return c.json({ exists: body.targets.map(() => false) });
+    }
+    return c.json({ exists: probeElementsInSource(content, body.targets) });
+  });
   api.patch("/projects/:id/files/*", async (c) => {
     const res = await resolveProjectFile(c, adapter, { mustExist: true });
     if ("error" in res) return res.error;
@@ -3162,17 +3185,18 @@ function registerFileRoutes(api, adapter) {
     });
     if ("error" in res) return res.error;
     const html = readFileSync3(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 });
     const block = extractGsapScriptBlock(html);
     if (!block) {
-      return c.json({
-        animations: [],
-        timelineVar: "tl",
-        preamble: "",
-        postamble: ""
-      });
+      return c.json(
+        { animations: [], timelineVar: "tl", preamble: "", postamble: "" },
+        200,
+        headers
+      );
     }
-    const parsed = parseGsapScriptAcorn(block.scriptText);
-    return c.json(parsed);
+    return c.json(parseGsapScriptAcorn(block.scriptText), 200, headers);
   });
   api.get("/projects/:id/gsap-mutation-capabilities", async (c) => {
     const project = await adapter.resolveProject(c.req.param("id"));
@@ -3349,6 +3373,9 @@ function tagRootCompositionFile(bodyHtml, compPath) {
   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;
@@ -3384,11 +3411,7 @@ function buildSubCompositionHtml(projectDir, compPath, runtimeUrl, baseHref, raw
   rewrittenContent = tagRootCompositionFile(rewrittenContent, compPath);
   const indexPath = join6(projectDir, "index.html");
   let headContent = "";
-  if (existsSync4(indexPath)) {
-    const indexHtml = readFileSync4(indexPath, "utf-8");
-    const headMatch = indexHtml.match(/<head[^>]*>([\s\S]*?)<\/head>/i);
-    headContent = headMatch?.[1] ?? "";
-  }
+  if (existsSync4(indexPath)) headContent = rootHeadContent(readFileSync4(indexPath, "utf-8"));
   if (baseHref && !hasBaseElement(headContent)) {
     headContent = `<base href="${baseHref}">
 ${headContent}`;
@@ -4544,10 +4567,11 @@ import {
   writeFileSync as writeFileSync4
 } from "fs";
 import { join as join11 } from "path";
-import { createHash as createHash3, randomUUID as randomUUID2 } from "crypto";
+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) {
@@ -4584,27 +4608,51 @@ function closureOf(read, 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 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));
+  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 (changed === ROOT_COMPOSITION || !mounted.has(changed)) return null;
+  if (!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_CACHE_VERSION = "v5";
 var THUMBNAIL_MAX_OUTPUT_WIDTH = 240;
 var THUMBNAIL_MAX_OUTPUT_HEIGHT = 135;
 var THUMBNAIL_CACHE_MAX_BYTES = 512 * 1024 * 1024;
@@ -4677,7 +4725,7 @@ function readFileOnce(file) {
 function manifestKey(file) {
   const manifest = readFileOnce(file);
   if (typeof manifest === "string") return { key: "", mtimeMs: -Infinity };
-  const hash = createHash3("sha1").update(manifest.data).digest("hex").slice(0, 16);
+  const hash = createHash4("sha1").update(manifest.data).digest("hex").slice(0, 16);
   return { key: `_${hash}`, mtimeMs: Math.round(manifest.mtimeMs) };
 }
 function registerThumbnailRoutes(api, adapter) {
@@ -4714,7 +4762,7 @@ function registerThumbnailRoutes(api, adapter) {
     let sourceKey = "";
     if (source !== "missing") {
       const html = source.data.toString("utf-8");
-      sourceKey = `_${createHash3("sha1").update(html).digest("hex").slice(0, 16)}`;
+      sourceKey = `_${createHash4("sha1").update(html).digest("hex").slice(0, 16)}`;
       sourceMtime = Math.round(source.mtimeMs);
       if (!vpWidth) {
         const wMatch = html.match(/data-width=["'](\d+)["']/);
@@ -4730,9 +4778,9 @@ function registerThumbnailRoutes(api, adapter) {
     const previewPath = compPath === "index.html" ? `${projectUrl}/preview` : `${projectUrl}/preview/comp/${compPath.split("/").map(encodeURIComponent).join("/")}`;
     const previewUrl = `${previewPath}?${PREVIEW_CAPTURE_PARAM}=1`;
     const cacheDir = join11(project.dir, ".thumbnails");
-    const selectorKey = selector ? `_${selector.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 80)}_${selectorIndex ?? 0}` : "";
+    const selectorKey = selector ? `_${createHash4("sha1").update(selector).digest("hex").slice(0, 16)}_${selectorIndex ?? 0}` : "";
     const urlVersionKey = urlVersion ? `_${urlVersion.replace(/[^a-zA-Z0-9_-]+/g, "_").slice(0, 32)}` : "";
-    const inputSignatureKey = `_${createHash3("sha1").update(inputSignature).digest("hex").slice(0, 16)}`;
+    const inputSignatureKey = `_${createHash4("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));
@@ -4852,7 +4900,7 @@ import { findFfBinary as findFfBinary3 } from "@hyperframes/parsers/ff-binaries"
 import { replaceFileAtomically as replaceFileAtomically3 } from "@hyperframes/core/atomic-file";
 
 // src/helpers/freezeFrame.ts
-import { createHash as createHash4, randomBytes } from "crypto";
+import { createHash as createHash5, randomBytes } from "crypto";
 import { ensureHfIds as ensureHfIds3 } from "@hyperframes/parsers/hf-ids";
 import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 import { resolveRateSpec, sourceTimeAt } from "@hyperframes/core/speed-ramp";
@@ -4879,7 +4927,7 @@ function freezeExtractArgs(src, mediaTime, output) {
 var randomStillToken = () => randomBytes(4).toString("hex");
 function freezeStillFileName(clipId, playhead, token = randomStillToken()) {
   const stem = clipId.replace(/[^A-Za-z0-9_-]/g, "_").slice(0, 48) || "clip";
-  const idHash = createHash4("sha256").update(clipId).digest("hex").slice(0, 10);
+  const idHash = createHash5("sha256").update(clipId).digest("hex").slice(0, 10);
   return `${stem}-${idHash}-${Math.round(playhead * 1e3)}-${token}.png`;
 }
 function readFreezeSource(html, target, playhead) {
@@ -6087,13 +6135,13 @@ function numericAttribute(element, name) {
 }
 
 // src/helpers/previewDocumentStore.ts
-import { createHash as createHash5 } from "crypto";
+import { createHash as createHash6 } from "crypto";
 import { readFileSync as readFileSync14, readdirSync as readdirSync5, rmSync as rmSync5 } from "fs";
 import { join as join17 } from "path";
 import { replaceFileAtomically as replaceFileAtomically4 } from "@hyperframes/core/atomic-file";
 function createPreviewDocumentStore(projectDir, salt) {
   const dir = join17(projectDir, ".hyperframes", "preview");
-  const fileFor = (key) => join17(dir, `${createHash5("sha256").update(`${salt}
+  const fileFor = (key) => join17(dir, `${createHash6("sha256").update(`${salt}
 ${key}`).digest("hex").slice(0, 32)}.html`);
   return {
     read(key) {
@@ -6203,6 +6251,7 @@ export {
   applyFileMutations,
   buildSubCompositionHtml,
   cleanupProxyCache,
+  clearElementScreenshotIsolation,
   compositionsAffectedBy,
   consumeFileWriteReceipt,
   createBackgroundRemovalJob,