@hyperframes/studio 0.8.89 → 0.8.90

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.89",
+  "version": "0.8.90",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/parsers": "0.8.89",
-    "@hyperframes/sdk": "0.8.89",
-    "@hyperframes/shader-transitions": "0.8.89",
-    "@hyperframes/core": "0.8.89",
-    "@hyperframes/player": "0.8.89",
-    "@hyperframes/studio-server": "0.8.89"
+    "@hyperframes/core": "0.8.90",
+    "@hyperframes/parsers": "0.8.90",
+    "@hyperframes/player": "0.8.90",
+    "@hyperframes/sdk": "0.8.90",
+    "@hyperframes/shader-transitions": "0.8.90",
+    "@hyperframes/studio-server": "0.8.90"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.89"
+    "@hyperframes/producer": "0.8.90"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/editor/useInlineTextEditing.tsx

@@ -61,10 +61,8 @@ export function useInlineTextEditing(
   const elementUnderPress = (event: { clientX: number; clientY: number }) => {
     const iframe = actions?.previewIframeRef?.current;
     if (!iframe) return null;
-    // Studio suppresses pointer events inside the composition so the canvas
-    // overlay can own input, which means a plain elementFromPoint only ever
-    // finds wrappers. This helper lifts that for the length of the hit test,
-    // and is the same one the canvas uses to decide what was clicked.
+    // The same hit test the canvas uses to decide what was clicked; a plain
+    // elementFromPoint only finds wrappers, since Studio suppresses pointer events.
     return getPreviewTargetFromPointer(
       iframe,
       event.clientX,

package/src/player/sceneSwap.ts

@@ -17,6 +17,27 @@ export function onPreviewContentReplaced(
   };
 }
 
+export function markScenesStale(iframe: HTMLIFrameElement | null, files: readonly string[]): void {
+  const doc = iframe?.contentDocument;
+  const meta = doc?.querySelector<HTMLMetaElement>('meta[name="hf-scene-parts"]');
+  if (!doc || !meta) return;
+  let parts: { shared: string; scenes: Record<string, string> };
+  try {
+    parts = JSON.parse(meta.content);
+  } catch {
+    return;
+  }
+  for (const file of files) {
+    const hosts = doc.querySelectorAll(`[data-composition-file="${CSS.escape(file)}"]`);
+    if (hosts.length === 0 && file.endsWith(".html")) parts.shared = "";
+    for (const host of hosts) {
+      const scene = host.closest("[data-hf-scene]")?.getAttribute("data-hf-scene");
+      if (scene && scene in parts.scenes) parts.scenes[scene] = "";
+    }
+  }
+  meta.content = JSON.stringify(parts);
+}
+
 /** Null when the preview cannot swap; rejects when superseded, cancelled or a full reload is needed. */
 export function sceneSwapFor(
   iframe: HTMLIFrameElement,

package/src/utils/gsapUndoRestore.test.ts

@@ -259,6 +259,64 @@ describe("applyUndoRestoreToPreview", () => {
     expect(reloadPreview).toHaveBeenCalledTimes(1);
   });
 
+  it("blanks a restored scene's live hash before reloading, so the scene swap takes it", () => {
+    const { iframe, doc } = buildLiveIframe(
+      `<div data-hf-scene="scene0" data-composition-file="scenes/intro.html"><h1>Rep0</h1></div>` +
+        `<div data-hf-scene="scene1" data-composition-file="scenes/outro.html"></div>`,
+    );
+    const meta = doc.createElement("meta");
+    meta.name = "hf-scene-parts";
+    meta.content = JSON.stringify({ shared: "s", scenes: { scene0: "h0", scene1: "h1" } });
+    doc.head.append(meta);
+    let partsAtReload: unknown;
+    const reloadPreview = vi.fn(() => (partsAtReload = JSON.parse(meta.content)));
+    const files = {
+      "scenes/intro.html": { previous: "<h1>Rep0</h1>", restored: "<h1>Alpha</h1>" },
+    };
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(partsAtReload).toEqual({ shared: "s", scenes: { scene0: "", scene1: "h1" } });
+
+    const withRoot = {
+      ...files,
+      [ROOT]: { previous: wrap("<p>b</p>"), restored: wrap("<p>a</p>") },
+    };
+    applyUndoRestoreToPreview(iframe, ROOT, withRoot, 3, reloadPreview);
+    // A restored page outside every scene forces the full reload, never a partial swap.
+    expect(partsAtReload).toEqual({ shared: "", scenes: { scene0: "", scene1: "h1" } });
+  });
+
+  it("leaves the scene hashes alone on a soft restore, so the next edit can still swap", () => {
+    const { iframe, doc } = buildLiveIframe(`<div id="a" style="color: red">t</div>`);
+    const meta = doc.createElement("meta");
+    meta.name = "hf-scene-parts";
+    meta.content = JSON.stringify({ shared: "s", scenes: { scene0: "h0" } });
+    doc.head.append(meta);
+    const files = {
+      [ROOT]: {
+        previous: wrap(`<div id="a" style="color: red">t</div>`),
+        restored: wrap(`<div id="a" style="color: blue">t</div>`),
+      },
+    };
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, vi.fn())).toBe("soft");
+    expect(JSON.parse(meta.content)).toEqual({ shared: "s", scenes: { scene0: "h0" } });
+  });
+
+  it.each([
+    ["a restored stylesheet leaves the shared hash", "styles.css", '{"shared":"s","scenes":{}}'],
+    ["an unreadable manifest still reloads", "scenes/intro.html", "not json"],
+  ])("%s", (_name, path, content) => {
+    const { iframe, doc } = buildLiveIframe(`<div id="a">t</div>`);
+    const meta = doc.createElement("meta");
+    meta.name = "hf-scene-parts";
+    meta.content = content;
+    doc.head.append(meta);
+    const reloadPreview = vi.fn();
+    const files = { [path]: { previous: "a", restored: "b" } };
+    expect(applyUndoRestoreToPreview(iframe, ROOT, files, 3, reloadPreview)).toBe("full");
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+    expect(meta.content).toBe(content);
+  });
+
   it("full-reloads when the restore touches a sub-comp, not the active comp", () => {
     const { iframe } = buildLiveIframe(`<div id="a">t</div>`);
     const reloadPreview = vi.fn();

package/src/utils/gsapUndoRestore.ts

@@ -8,6 +8,7 @@ import {
   extractGsapScriptText,
   findGsapScriptElements,
 } from "./gsapSoftReload";
+import { markScenesStale } from "../player/sceneSwap";
 
 type PreviewWindow = Window & {
   __player?: { seek?: (t: number) => void };
@@ -184,7 +185,7 @@ export function applyUndoRestoreToPreview(
   activeCompPath: string | null,
   files: Record<string, UndoRestoreFile> | undefined,
   currentTime: number,
-  reloadPreview: () => void,
+  reload: () => void,
 ): "soft" | "full" {
   // The master view carries a NULL activeCompPath but the root iframe shows
   // index.html — the codebase-wide convention (`activeCompPath || "index.html"`).
@@ -192,6 +193,10 @@ export function applyUndoRestoreToPreview(
   // full-reloaded: the original "undo always blinks".
   const activeDocPath = activeCompPath ?? "index.html";
   const paths = files ? Object.keys(files) : [];
+  const reloadPreview = () => {
+    markScenesStale(iframe, paths);
+    reload();
+  };
   // Soft path only covers the single active-comp document in the root iframe.
   if (!iframe || !files || paths.length !== 1 || paths[0] !== activeDocPath) {
     reloadPreview();

package/src/utils/studioPreviewHelpers.test.ts

@@ -3,6 +3,7 @@
 import { describe, expect, it, vi } from "vitest";
 import {
   coversComposition,
+  getAllPreviewTargetsFromPointer,
   getPreviewTargetFromPointer,
   pauseStudioPreviewPlayback,
 } from "./studioPreviewHelpers";
@@ -141,6 +142,34 @@ describe("getPreviewTargetFromPointer", () => {
     iframe.remove();
   });
 
+  it("hit-tests without adding styles to the preview document", () => {
+    const { iframe, doc } = createPreviewIframe();
+    doc.body.innerHTML = `<main data-composition-id="scene"><h1 id="headline">Title</h1></main>`;
+    const scene = doc.querySelector<HTMLElement>("main")!;
+    const headline = doc.getElementById("headline")!;
+    stubRect(iframe, domRect(0, 0, 400, 300));
+    stubRect(scene, domRect(0, 0, 400, 300));
+    stubRect(headline, domRect(40, 40, 160, 48));
+    const stylesAtHitTest: number[] = [];
+    doc.elementsFromPoint = () => {
+      stylesAtHitTest.push(doc.querySelectorAll("style").length + doc.adoptedStyleSheets.length);
+      return [headline, scene];
+    };
+    // First call runs the once-per-document inheritance probe, a body mutation.
+    expect(getPreviewTargetFromPointer(iframe, 80, 64, "index.html")).toBe(headline);
+    const observer = new MutationObserver(() => {});
+    observer.observe(doc, { subtree: true, childList: true, attributes: true });
+
+    expect(getPreviewTargetFromPointer(iframe, 80, 64, "index.html")).toBe(headline);
+    expect(getAllPreviewTargetsFromPointer(iframe, 80, 64, "index.html")).toEqual([headline]);
+    const mutations = observer.takeRecords();
+    observer.disconnect();
+
+    expect(stylesAtHitTest).toEqual([0, 0, 0]);
+    expect(mutations).toEqual([]);
+    iframe.remove();
+  });
+
   it("skips candidates hidden from author hit-testing by inherited pointer-events:none", () => {
     const { iframe, doc } = createPreviewIframe();
 

package/src/utils/studioPreviewHelpers.ts

@@ -70,28 +70,6 @@ function resolvePreviewLocalPointer(
   };
 }
 
-const POINTER_EVENTS_OVERRIDE_ID = "__hf_studio_pointer_events_override__";
-
-function forcePointerEventsAuto(doc: Document): HTMLStyleElement | null {
-  try {
-    const style = doc.createElement("style");
-    style.id = POINTER_EVENTS_OVERRIDE_ID;
-    style.textContent = "* { pointer-events: auto !important; }";
-    doc.head.appendChild(style);
-    return style;
-  } catch {
-    return null;
-  }
-}
-
-function removePointerEventsOverride(style: HTMLStyleElement | null): void {
-  try {
-    style?.remove();
-  } catch {
-    // cross-origin or detached doc
-  }
-}
-
 const pointerEventsInheritanceFallbackByDocument = new WeakMap<Document, boolean>();
 
 function needsPointerEventsInheritanceFallback(doc: Document, win: Window): boolean {
@@ -222,45 +200,33 @@ export function getPreviewTargetFromPointer(
   const localPointer = resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
   if (!localPointer) return null;
 
-  let overrideStyle = forcePointerEventsAuto(doc);
-  try {
-    if (typeof doc.elementsFromPoint === "function") {
-      const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
-      removePointerEventsOverride(overrideStyle);
-      overrideStyle = null;
-      const candidates = filterAuthorInteractiveTargets(elements, activeCompositionPath);
-      const visualTarget =
-        candidates.find((el) => !isFullBleedTarget(el, localPointer.viewport)) ?? null;
-      if (visualTarget) return visualTarget;
-    }
-
-    // Belt-and-suspenders: elementsFromPoint is universally supported in the
-    // browsers this ships in, so the override is already removed by this
-    // point in practice — but guard the environment without it too, so
-    // hasAuthorPointerEventsNone below never reads a forced-auto value.
-    removePointerEventsOverride(overrideStyle);
-    overrideStyle = null;
-
-    // No element hit (e.g. empty space inside an animated group's overlay) — fall
-    // back to the group whose member-union contains the point, so the whole group
-    // area is hoverable/selectable, not just where a member currently sits.
-    const groupHit = findGroupAtPoint(doc, localPointer.x, localPointer.y);
-    if (
-      groupHit &&
-      !hasAuthorPointerEventsNone(groupHit) &&
-      getDomLayerPatchTarget(groupHit, activeCompositionPath)
-    )
-      return groupHit;
-
-    const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
-    if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return null;
-    if (hasAuthorPointerEventsNone(fallback)) return null;
-    if (!isElementComputedVisible(fallback)) return null;
-    if (isFullBleedTarget(fallback, localPointer.viewport)) return null;
-    return fallback;
-  } finally {
-    removePointerEventsOverride(overrideStyle);
+  // Hit-test without touching the preview document: any style added here, even
+  // briefly, restyles every element in the film on each click and hover.
+  if (typeof doc.elementsFromPoint === "function") {
+    const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
+    const candidates = filterAuthorInteractiveTargets(elements, activeCompositionPath);
+    const visualTarget =
+      candidates.find((el) => !isFullBleedTarget(el, localPointer.viewport)) ?? null;
+    if (visualTarget) return visualTarget;
   }
+
+  // No element hit (e.g. empty space inside an animated group's overlay) — fall
+  // back to the group whose member-union contains the point, so the whole group
+  // area is hoverable/selectable, not just where a member currently sits.
+  const groupHit = findGroupAtPoint(doc, localPointer.x, localPointer.y);
+  if (
+    groupHit &&
+    !hasAuthorPointerEventsNone(groupHit) &&
+    getDomLayerPatchTarget(groupHit, activeCompositionPath)
+  )
+    return groupHit;
+
+  const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
+  if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return null;
+  if (hasAuthorPointerEventsNone(fallback)) return null;
+  if (!isElementComputedVisible(fallback)) return null;
+  if (isFullBleedTarget(fallback, localPointer.viewport)) return null;
+  return fallback;
 }
 
 /** Returns all independently-selectable elements at the pointer (topmost first). */
@@ -283,27 +249,18 @@ export function getAllPreviewTargetsFromPointer(
   const localPointer = resolvePreviewLocalPointer(iframe, doc, win, clientX, clientY);
   if (!localPointer) return [];
 
-  let overrideStyle = forcePointerEventsAuto(doc);
-  try {
-    if (typeof doc.elementsFromPoint === "function") {
-      const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
-      removePointerEventsOverride(overrideStyle);
-      overrideStyle = null;
-      return filterAuthorInteractiveTargets(elements, activeCompositionPath).filter(
-        (el) => !isFullBleedTarget(el, localPointer.viewport),
-      );
-    }
-    const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
-    if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return [];
-    removePointerEventsOverride(overrideStyle);
-    overrideStyle = null;
-    if (hasAuthorPointerEventsNone(fallback)) return [];
-    if (!isElementComputedVisible(fallback)) return [];
-    if (isFullBleedTarget(fallback, localPointer.viewport)) return [];
-    return [fallback];
-  } finally {
-    removePointerEventsOverride(overrideStyle);
+  if (typeof doc.elementsFromPoint === "function") {
+    const elements = doc.elementsFromPoint(localPointer.x, localPointer.y);
+    return filterAuthorInteractiveTargets(elements, activeCompositionPath).filter(
+      (el) => !isFullBleedTarget(el, localPointer.viewport),
+    );
   }
+  const fallback = getEventTargetElement(doc.elementFromPoint(localPointer.x, localPointer.y));
+  if (!fallback || !getDomLayerPatchTarget(fallback, activeCompositionPath)) return [];
+  if (hasAuthorPointerEventsNone(fallback)) return [];
+  if (!isElementComputedVisible(fallback)) return [];
+  if (isFullBleedTarget(fallback, localPointer.viewport)) return [];
+  return [fallback];
 }
 
 function objectLike(value: unknown): object | null {