@hyperframes/studio 0.8.106 → 0.8.108

package/src/hooks/inspectorSaveReload.test.tsx

@@ -0,0 +1,107 @@
+// @vitest-environment happy-dom
+import { act, createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import {
+  makePreview,
+  mountPlayerWithPreview,
+  paintShadow,
+  resetPlayerStore,
+} from "../player/hooks/timelinePlayerTestHarness";
+import { useDomEditCommits } from "./useDomEditCommits";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+vi.mock("../utils/gsapSoftReload", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../utils/gsapSoftReload")>()),
+  ensureMotionPathPluginLoaded: vi.fn(),
+}));
+
+/** The project file; the patch route applies a colour to it, and each preview load serves it. */
+let color = "red";
+const card = () => `<div data-hf-id="hf-card" style="color: ${color}">Card</div>`;
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+  document.body.innerHTML = "";
+  resetPlayerStore();
+});
+
+it("an inspector save made while a reload loads is not undone when that reload goes on screen", async () => {
+  color = "red";
+  let land = () => {};
+  const landed = new Promise<void>((resolve) => (land = resolve));
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: string, init?: RequestInit) => {
+      if (!input.includes("/file-mutations/patch-element/"))
+        return Response.json({ content: card() });
+      await landed;
+      const { operations } = JSON.parse(String(init?.body)) as { operations: { value: string }[] };
+      color = operations[0]!.value;
+      return Response.json({ ok: true, changed: true, matched: true, content: card() });
+    }),
+  );
+  const live = makePreview(card());
+  const player = mountPlayerWithPreview(live);
+  const element = live.contentDocument!.querySelector<HTMLElement>("[data-hf-id]")!;
+  const selection = {
+    element,
+    label: "Card",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    textFields: [],
+    inlineStyles: { color: "red" },
+    computedStyles: {},
+    dataAttributes: {},
+    capabilities: { canSelect: true, canEditStyles: true },
+    hfId: "hf-card",
+    selector: '[data-hf-id="hf-card"]',
+    selectorIndex: 0,
+  } as unknown as DomEditSelection;
+  let commits: ReturnType<typeof useDomEditCommits> | null = null;
+  function Inspector() {
+    commits = useDomEditCommits({
+      activeCompPath: "index.html",
+      previewIframeRef: player.getApi().iframeRef,
+      showToast: () => {},
+      queueDomEditSave: (save) => save(),
+      writeProjectFile: async () => {},
+      editHistory: { recordEdit: async () => {} },
+      fileTree: [],
+      importedFontAssetsRef: { current: [] },
+      projectId: "p1",
+      projectIdRef: { current: "p1" },
+      reloadPreview: () => {},
+      domEditSelection: selection,
+      applyDomSelection: () => {},
+      clearDomSelection: () => {},
+      refreshDomEditSelectionFromPreview: () => {},
+      buildDomSelectionFromTarget: async () => null,
+      readOnlyPreview: false,
+    });
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(createElement(Inspector)));
+
+  act(() => player.getApi().refreshPlayer());
+  const beforeSave = makePreview(card(), "?_t=1");
+  let saved: Promise<unknown> = Promise.resolve();
+  act(() => void (saved = commits!.handleDomStyleCommit("color", "green")));
+  await act(async () => {
+    land();
+    await saved;
+  });
+  expect(color).toBe("green");
+
+  const requested = await paintShadow(player.getApi, beforeSave);
+  expect(player.getApi().iframeRef.current, "the file before the save").toBe(live);
+  const fresh = makePreview(card(), "?_t=2");
+  expect(await paintShadow(player.getApi, fresh)).toBeGreaterThan(requested);
+  expect(player.getApi().iframeRef.current).toBe(fresh);
+  act(() => root.unmount());
+  act(() => player.root.unmount());
+});

package/src/hooks/useAppHotkeys.previewForwarding.test.tsx

@@ -16,6 +16,7 @@ vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 const domDelete = vi.fn(async () => undefined);
 const historyUndo = vi.fn(async () => ({ ok: false }));
 const historyRedo = vi.fn(async () => ({ ok: false }));
+const settle = vi.fn(async () => undefined);
 let root: Root | null = null;
 let sync: ((iframe: HTMLIFrameElement | null) => void) | null = null;
 
@@ -49,7 +50,7 @@ function Harness() {
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
-    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    settlePendingEdits: settle,
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(() => false),
     handleCut: vi.fn(() => false),
@@ -69,6 +70,8 @@ afterEach(() => {
   domDelete.mockClear();
   historyUndo.mockClear();
   historyRedo.mockClear();
+  settle.mockReset();
+  settle.mockImplementation(async () => undefined);
   vi.mocked(trackStudioEvent).mockClear();
 });
 
@@ -122,6 +125,18 @@ describe("preview iframe hotkey forwarding", () => {
     expect(trackStudioEvent).toHaveBeenCalledWith("keyboard_shortcut", { action: "undo" });
   });
 
+  it("settles pending edits, failed ones included, before Cmd+Z steps the history", async () => {
+    let settled!: () => void;
+    settle.mockImplementation(
+      () => new Promise<undefined>((resolve) => (settled = () => resolve(undefined))),
+    );
+    await press(mountWithPreview(), { key: "z", ctrlKey: true });
+    expect(settle).toHaveBeenCalledTimes(1);
+    expect(historyUndo).not.toHaveBeenCalled();
+    await act(async () => settled());
+    expect(historyUndo).toHaveBeenCalledTimes(1);
+  });
+
   it.each([
     ["Shift+Cmd+Z", { key: "Z", metaKey: true, shiftKey: true }],
     ["Ctrl+Y", { key: "y", ctrlKey: true }],

package/src/hooks/useAppHotkeys.test.ts

@@ -61,6 +61,9 @@ afterEach(() => {
 });
 
 describe("keys on a focused slider", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
   const slider = () => {
     const el = document.createElement("div");
     el.setAttribute("role", "slider");
@@ -85,6 +88,20 @@ describe("keys on a focused slider", () => {
     expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
   });
 
+  it.each(["video", "audio"])("leaves Delete to a focused <%s controls>", (tag) => {
+    usePlayerStore.setState({
+      elements: [bgmElement],
+      selectedElementId: "bgm",
+      selectedElementIds: new Set(["bgm"]),
+    });
+    const player = document.body.appendChild(document.createElement(tag));
+    player.setAttribute("controls", "");
+    const cb = callbacks();
+    dispatchPlainKey(from(player, { key: "Delete" }), "delete", cb);
+    expect(cb.handleTimelineElementsDelete).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+  });
+
   it("still undoes with Cmd+Z while a slider has focus", () => {
     const cb = callbacks();
     dispatchModifierKey(from(slider(), { key: "z", metaKey: true }), "z", cb);

package/src/hooks/useAppHotkeys.textEditing.test.tsx

@@ -86,7 +86,7 @@ function Harness() {
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
-    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    settlePendingEdits: vi.fn(async () => undefined),
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),

package/src/hooks/useAppHotkeys.ts

@@ -85,7 +85,7 @@ interface UseAppHotkeysParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   syncHistoryPreviewAfterApply: UseEditHistoryActionsOptions["syncHistoryPreviewAfterApply"];
   showHistoryRestoreNow?: UseEditHistoryActionsOptions["showHistoryRestoreNow"];
-  waitForPendingDomEditSaves: () => Promise<void>;
+  settlePendingEdits: () => Promise<void>;
   handleCopy: () => boolean;
   handlePaste: () => Promise<void>;
   handleCut: () => Promise<boolean>;
@@ -124,7 +124,7 @@ export function useAppHotkeys({
   showToast,
   syncHistoryPreviewAfterApply,
   showHistoryRestoreNow,
-  waitForPendingDomEditSaves,
+  settlePendingEdits,
   handleCopy,
   handlePaste,
   handleCut,
@@ -151,7 +151,7 @@ export function useAppHotkeys({
     showToast,
     syncHistoryPreviewAfterApply,
     showHistoryRestoreNow,
-    waitForPendingDomEditSaves,
+    waitForPendingDomEditSaves: settlePendingEdits,
     onAfterUndoRedo,
     activeCompPath,
     forceReloadSdkSession,

package/src/hooks/useAutomationSelectionKeyboard.test.tsx

@@ -216,6 +216,23 @@ describe("useAutomationSelectionKeyboard", () => {
     input.remove();
   });
 
+  describe("with a focused picker", () => {
+    const picker = document.createElement("button");
+    picker.setAttribute("role", "combobox");
+    afterEach(() => picker.remove());
+
+    it("is inert while a picker that owns typing has focus", () => {
+      usePlayerStore
+        .getState()
+        .setAutomationSelection(wholeAxis({ elementKey: "bgm", target: "volume", t0: 1, t1: 3 }));
+      const { onCommit } = setup({});
+      document.body.append(picker);
+      picker.focus();
+      key("Delete");
+      expect(onCommit).not.toHaveBeenCalled();
+    });
+  });
+
   it("Cmd+C copies the active selection", () => {
     clearAutomationClipboard();
     usePlayerStore.setState({ elements: [bgmElement], selectedElementId: "bgm" });

package/src/hooks/useAutomationSelectionKeyboard.ts

@@ -31,6 +31,7 @@ import {
   type HfAutomationLane,
 } from "@hyperframes/core/audio-automation";
 import { clampNumber } from "../utils/studioHelpers";
+import { isTypingTarget } from "../utils/typingTarget";
 import type { AutomationSelection } from "../player/store/automationSelectionSlice";
 import type {
   AutomationLaneBinding,
@@ -39,13 +40,6 @@ import type {
 
 type PlayerState = ReturnType<typeof usePlayerStore.getState>;
 
-function isTextInput(el: Element | null): boolean {
-  if (!el) return false;
-  const tag = el.tagName;
-  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
-  return el instanceof HTMLElement && el.isContentEditable;
-}
-
 /**
  * A Cmd/Ctrl+<letter> chord. `e.key` is normalised because CapsLock makes it
  * "V"/"C", and useAppHotkeys already lowercases — a raw `e.key === "v"` test
@@ -302,7 +296,7 @@ function handleCopy(
  * dead key beats today's double write.
  */
 export function automationOwnsKey(e: KeyboardEvent): boolean {
-  if (isTextInput(document.activeElement)) return false;
+  if (isTypingTarget(document.activeElement)) return false;
   const state = usePlayerStore.getState();
   if (isChord(e, "c")) return state.automationSelection !== null;
   if (!isChord(e, "v")) return false;
@@ -340,7 +334,7 @@ export function useAutomationSelectionKeyboard({
 }): void {
   useEffect(() => {
     const handler = (e: KeyboardEvent): void => {
-      if (isTextInput(document.activeElement)) return;
+      if (isTypingTarget(document.activeElement)) return;
       // Somebody upstream already claimed this key. useAppHotkeys is on
       // window/capture so it always runs first, and it deliberately lets a
       // keyframe selection outrank an automation range on Delete — without

package/src/hooks/useDomEditAttributeCommits.ts

@@ -5,8 +5,11 @@ import {
   getDomEditTargetKey,
   type DomEditSelection,
 } from "../components/editor/domEditing";
-import type { PersistDomEditOperations } from "./domEditCommitTypes";
-import { reportDomEditPersistFailure } from "./domEditPersistFailure";
+import type { CommitDomAttributeBatch, PersistDomEditOperations } from "./domEditCommitTypes";
+import {
+  DomEditPersistPreparedWriteError,
+  reportDomEditPersistFailure,
+} from "./domEditPersistFailure";
 import { bumpDomEditCommitMapVersion, runDomEditCommit } from "./domEditCommitRunner";
 import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 import { HF_AUDIO_GROUP_ATTR, HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
@@ -54,6 +57,15 @@ export function resolveOptimisticAttributeValue(attr: string, value: string | nu
   return value === "false" && HTML_BOOLEAN_ATTRIBUTES.has(attr) ? null : value;
 }
 
+function previewAttributeName(op: PatchOperation): string {
+  return op.type === "attribute" ? resolveFullAttrName(op.property, true) : op.property;
+}
+
+function previewAttributeValue(op: PatchOperation): string | null {
+  if (op.type === "html-attribute") return resolveOptimisticAttributeValue(op.property, op.value);
+  return op.value === "" ? null : op.value;
+}
+
 function setOrRemovePreviewAttribute(
   el: HTMLElement,
   fullAttr: string,
@@ -209,7 +221,7 @@ export function useDomEditAttributeCommits({
     ],
   );
 
-  // Commits several data-* attributes on the SAME element in ONE persist call
+  // Commits several data-* and HTML attributes on the SAME element in ONE persist call
   // — needed when two attributes together describe a single logical value
   // (e.g. a pinned timing range's start+duration): committing them through two
   // separate sequential `commitDataAttribute` calls leaves a window where the
@@ -221,32 +233,30 @@ export function useDomEditAttributeCommits({
   // explicit, caller-supplied `selection` (not the "current" one) closes both
   // gaps — matching `onCommitAnimatedProperties`'s same-shaped fix for GSAP
   // property batches.
-  const commitDataAttributes = useCallback(
+  const commitAttributeOps = useCallback(
     async (
       selection: DomEditSelection,
-      attrs: Record<string, string | null>,
-      options: DataAttributeCommitOptions,
-    ) => {
+      ops: PatchOperation[],
+      options: DataAttributeCommitOptions & {
+        prepareContent?: (html: string) => string;
+        syncAutomation?: boolean;
+      },
+    ): Promise<boolean> => {
       const iframe = previewIframeRef.current;
-      const entries = Object.entries(attrs).map(([attr, value]) => ({
-        attr,
-        fullAttr: resolveFullAttrName(attr, true),
-        value,
+      const entries = ops.map((op) => ({
+        fullAttr: previewAttributeName(op),
+        value: previewAttributeValue(op),
       }));
-      const commitKey = `${options.coalescePrefix}:${entries
-        .map((entry) => entry.attr)
+      const commitKey = `${options.coalescePrefix}:${ops
+        .map((op) => op.property)
         .sort()
         .join(",")}:${getDomEditTargetKey(selection)}`;
       const isLatestCommit = bumpDomEditCommitMapVersion(
         domAttributeCommitVersionRef.current,
         commitKey,
       );
-      const ops: PatchOperation[] = entries.map((entry) => ({
-        type: "attribute",
-        property: entry.attr,
-        value: entry.value,
-      }));
       let captured: CapturedMultiAttributeElement | null = null;
+      let landed = false;
 
       await runDomEditCommit({
         capture: () => {
@@ -260,8 +270,7 @@ export function useDomEditAttributeCommits({
         apply: () => {
           if (!captured) return;
           for (const entry of entries) {
-            const nextValue = entry.value === null || entry.value === "" ? null : entry.value;
-            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, nextValue);
+            setOrRemovePreviewAttribute(captured.element, entry.fullAttr, entry.value);
           }
         },
         persist: () =>
@@ -269,8 +278,10 @@ export function useDomEditAttributeCommits({
             label: options.label,
             coalesceKey: commitKey,
             skipRefresh: options.skipRefresh,
+            prepareContent: options.prepareContent,
           }),
-        shouldRevert: () => isLatestCommit(),
+        shouldRevert: (error) =>
+          isLatestCommit() && !(error instanceof DomEditPersistPreparedWriteError),
         revert: () => {
           if (!captured) return;
           for (const entry of entries) {
@@ -283,10 +294,19 @@ export function useDomEditAttributeCommits({
         },
         onError: (error) => reportDomEditPersistFailure(selection, ops, error, showToast),
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
-        resync: () => refreshDomEditSelectionFromPreview(selection),
-        onSettled: options.onSettled,
+        resync: () => {
+          refreshDomEditSelectionFromPreview(selection);
+          if (options.syncAutomation) {
+            syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
+          }
+        },
+        onSettled: (ok) => {
+          landed = ok;
+          options.onSettled?.(ok);
+        },
         onFinally: isLatestCommit.release,
       });
+      return landed;
     },
     [
       activeCompPath,
@@ -299,14 +319,35 @@ export function useDomEditAttributeCommits({
 
   const handleDomAttributesCommit = useCallback(
     async (selection: DomEditSelection, attrs: Record<string, string>) => {
-      await commitDataAttributes(selection, attrs, {
-        label: "Edit timing",
-        coalescePrefix: "attrs",
+      await commitAttributeOps(
+        selection,
+        Object.entries(attrs).map(([property, value]) => ({
+          type: "attribute",
+          property,
+          value,
+        })),
+        {
+          label: "Edit timing",
+          coalescePrefix: "attrs",
+          skipRefresh: false,
+          refreshAfter: true,
+        },
+      );
+    },
+    [commitAttributeOps],
+  );
+
+  const handleDomAttributeBatchCommit: CommitDomAttributeBatch = useCallback(
+    (selection, ops, options) =>
+      commitAttributeOps(selection, ops, {
+        label: options.label,
+        coalescePrefix: "attr-batch",
         skipRefresh: false,
         refreshAfter: true,
-      });
-    },
-    [commitDataAttributes],
+        syncAutomation: true,
+        prepareContent: options.prepareContent,
+      }),
+    [commitAttributeOps],
   );
 
   const handleDomAttributeCommit = useCallback(
@@ -438,5 +479,6 @@ export function useDomEditAttributeCommits({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
   };
 }