@hyperframes/studio 0.7.54 → 0.7.56

package/src/hooks/useDomEditTextCommits.test.tsx

@@ -0,0 +1,135 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection, DomEditTextField } from "../components/editor/domEditing";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { useDomEditTextCommits, type UseDomEditTextCommitsParams } from "./useDomEditTextCommits";
+
+Reflect.set(globalThis, "IS_REACT_ACT_ENVIRONMENT", true);
+
+interface Deferred<T> {
+  promise: Promise<T>;
+  resolve: (value: T | PromiseLike<T>) => void;
+  reject: (reason?: unknown) => void;
+}
+
+function createDeferred<T>(): Deferred<T> {
+  let resolve: Deferred<T>["resolve"] | undefined;
+  let reject: Deferred<T>["reject"] | undefined;
+  const promise = new Promise<T>((resolvePromise, rejectPromise) => {
+    resolve = resolvePromise;
+    reject = rejectPromise;
+  });
+  if (!resolve || !reject) throw new Error("deferred callbacks were not initialized");
+  return { promise, resolve, reject };
+}
+
+function textField(value: string): DomEditTextField {
+  return {
+    key: "self",
+    label: "Text",
+    value,
+    tagName: "div",
+    attributes: [],
+    inlineStyles: {},
+    computedStyles: {},
+    source: "self",
+  };
+}
+
+function selectionFor(element: HTMLElement): DomEditSelection {
+  return {
+    id: element.id,
+    element,
+    label: "Card",
+    tagName: "div",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 100, height: 100 },
+    textContent: element.textContent,
+    dataAttributes: {},
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [textField(element.textContent ?? "")],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+let cleanup: (() => void) | null = null;
+
+function renderTextCommitHook(params: UseDomEditTextCommitsParams) {
+  const captured: { hook: ReturnType<typeof useDomEditTextCommits> | null } = { hook: null };
+  function TextCommitProbe() {
+    captured.hook = useDomEditTextCommits(params);
+    return null;
+  }
+  const root = mountReactHarness(<TextCommitProbe />);
+  cleanup = () => act(() => root.unmount());
+  if (!captured.hook) throw new Error("hook did not initialize");
+  return captured.hook;
+}
+
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+  document.body.replaceChildren();
+  vi.restoreAllMocks();
+});
+
+describe("useDomEditTextCommits", () => {
+  it("does not let a stale failed fields commit revert newer text", async () => {
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument;
+    if (!doc) throw new Error("expected iframe document");
+    doc.body.innerHTML = '<div id="card">Original</div>';
+    const element = doc.getElementById("card");
+    const HTMLElementCtor = doc.defaultView?.HTMLElement;
+    if (!HTMLElementCtor || !(element instanceof HTMLElementCtor)) {
+      throw new Error("expected preview element");
+    }
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    const selection = selectionFor(element);
+    const stalePersist = createDeferred<void>();
+    const persistDomEditOperations = vi
+      .fn()
+      .mockImplementationOnce(() => stalePersist.promise)
+      .mockResolvedValueOnce(undefined);
+    const hook = renderTextCommitHook({
+      activeCompPath: "index.html",
+      previewIframeRef: { current: iframe },
+      showToast: vi.fn(),
+      domEditSelection: selection,
+      applyDomSelection: vi.fn(),
+      refreshDomEditSelectionFromPreview: vi.fn(),
+      buildDomSelectionFromTarget: vi.fn(async () => null),
+      persistDomEditOperations,
+      resolveImportedFontAsset: () => null,
+    });
+
+    let staleCommit: Promise<void> | undefined;
+    act(() => {
+      staleCommit = hook.commitDomTextFields(selection, [textField("Stale")]);
+    });
+    await act(async () => {
+      await hook.commitDomTextFields(selection, [textField("Newest")]);
+    });
+    stalePersist.reject(new Error("stale request failed"));
+    await act(async () => {
+      await staleCommit;
+    });
+
+    expect(element.innerHTML).toBe("Newest");
+  });
+});

package/src/hooks/useDomEditTextCommits.ts

@@ -174,7 +174,11 @@ export function useDomEditTextCommits({
       let editedElement: HTMLElement | null = null;
       let previousInlineValue: string | null = null;
       const operations = buildDomStyleCommitOperations(property, value, isImageBackgroundCommit);
-      const skipRefresh = property !== "z-index";
+      // Inline-style commits never full-reload the preview (that blanks the iframe
+      // until it re-renders): the live element was already mutated optimistically in
+      // apply(). z-index is no exception — setting `element.style.zIndex` restacks the
+      // element in-browser immediately, so a reload would only cost a black blink.
+      const skipRefresh = true;
 
       await runDomEditCommit({
         capture: () => {
@@ -305,6 +309,7 @@ export function useDomEditTextCommits({
       nextTextFields: DomEditTextField[],
       options?: { importedFont?: ImportedFontAsset | null },
     ) => {
+      const isLatestTextCommit = bumpDomEditCommitVersion(domTextCommitVersionRef);
       const textCommit = planDomTextCommit(
         selection.textFields,
         nextTextFields,
@@ -344,14 +349,14 @@ export function useDomEditTextCommits({
               : undefined,
           });
         },
-        shouldRevert: () => true,
+        shouldRevert: () => isLatestTextCommit(),
         revert: () => {
           if (!editedElement || previousInnerHtml === null) return;
           editedElement.innerHTML = previousInnerHtml;
         },
         onError: (error) =>
           reportDomEditPersistFailure(selection, textCommit.operations, error, showToast),
-        shouldResync: () => true,
+        shouldResync: isLatestTextCommit,
         resync: () =>
           resyncDomTextSelectionFromPreview(
             doc,

package/src/hooks/useDomEditWiring.ts

@@ -11,7 +11,6 @@ import { useCallback, useEffect, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { usePlayerStore } from "../player";
-import { resolveTimelineIdForSelection } from "../utils/studioHelpers";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import { useGsapAnimationsForElement, usePopulateKeyframeCacheForFile } from "./useGsapTweenCache";
 import { useGsapAnimationFetchFallback } from "./useGsapAnimationFetchFallback";
@@ -171,14 +170,13 @@ export function useDomEditWiring({
 
   useEffect(() => {
     if (!domEditSelection?.id) return;
-    const { selectedElementId, elements, setSelectionAnchor } = usePlayerStore.getState();
-    // Resolve through the canonical resolver (source-file + ancestor + active-comp
-    // fallback) rather than a narrow domId/id match, so a sub-composition selection
-    // maps to the same clip the rest of the selection pipeline picks. Use the
-    // anchor-only setter: this is a DOM->store echo and must not collapse a group.
-    const key = resolveTimelineIdForSelection(domEditSelection, elements, activeCompPath);
-    if (key && key !== selectedElementId) setSelectionAnchor(key);
-  }, [domEditSelection, activeCompPath]);
+    const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
+    const matchKey = elements.find(
+      (el) => el.domId === domEditSelection.id || el.id === domEditSelection.id,
+    );
+    const key = matchKey ? (matchKey.key ?? matchKey.id) : null;
+    if (key && key !== selectedElementId) setSelectedElementId(key);
+  }, [domEditSelection?.id]);
 
   // ── GSAP cache sync ──
 

package/src/hooks/useDomGeometryCommits.ts

@@ -61,14 +61,29 @@ export function useDomGeometryCommits({
   );
 
   const handleDomBoxSizeCommit = useCallback(
-    (selection: DomEditSelection, next: { width: number; height: number }) => {
+    (
+      selection: DomEditSelection,
+      next: { width: number; height: number },
+      offset?: { x: number; y: number },
+    ) => {
       if (isElementGsapTargeted(previewIframeRef.current, selection.element)) {
         const error = new Error(GSAP_CSS_FALLBACK_BLOCKED_MESSAGE);
         showToast(error.message, "error");
         return Promise.reject(error);
       }
       applyStudioBoxSize(selection.element, next);
-      return commitPositionPatchToHtml(selection, buildBoxSizePatches(selection.element), {
+      // Anchored-corner resize (NW/NE/SW) also moves the element to keep the
+      // opposite corner fixed. Apply the offset and emit BOTH patch sets in a
+      // SINGLE commit: one persist = one undo entry, and there is no
+      // intermediate re-stamp where the new size is in source but the anchor
+      // offset is not (that frame was the release "jump"). Both builders read
+      // the already-mutated live element, so concatenation is safe.
+      const patches = buildBoxSizePatches(selection.element);
+      if (offset) {
+        applyStudioPathOffset(selection.element, offset);
+        patches.push(...buildPathOffsetPatches(selection.element));
+      }
+      return commitPositionPatchToHtml(selection, patches, {
         label: "Resize layer box",
         coalesceKey: `box-size:${getDomEditTargetKey(selection)}`,
       });

package/src/hooks/useDomSelection.test.ts

@@ -2,9 +2,7 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
-import type { TimelineElement } from "../player";
-import { usePlayerStore } from "../player/store/playerStore";
+import { describe, expect, it, vi } from "vitest";
 import { installReactActEnvironment, makeSelection } from "./domSelectionTestHarness";
 import { useDomSelection } from "./useDomSelection";
 
@@ -14,7 +12,6 @@ interface HarnessProps {
   activeCompPath: string | null;
   projectId: string | null;
   refreshKey: number;
-  timelineElements?: TimelineElement[];
 }
 
 function renderHarness(initialProps: HarnessProps): {
@@ -35,7 +32,7 @@ function renderHarness(initialProps: HarnessProps): {
       compIdToSrc: new Map(),
       captionEditMode: false,
       previewIframeRef: { current: null },
-      timelineElements: props.timelineElements ?? [],
+      timelineElements: [],
       setSelectedTimelineElementId: vi.fn(),
       setRightCollapsed: vi.fn(),
       setRightPanelTab: vi.fn(),
@@ -67,10 +64,6 @@ function renderHarness(initialProps: HarnessProps): {
   };
 }
 
-afterEach(() => {
-  usePlayerStore.getState().reset();
-});
-
 function setupSelectedHarness() {
   const element = document.createElement("div");
   element.id = "headline";
@@ -138,31 +131,4 @@ describe("useDomSelection", () => {
     expect(harness.current().domEditSelection).toBe(selection);
     harness.cleanup();
   });
-
-  it("keeps preview marquee selections mirrored to the full timeline selection set", () => {
-    const first = document.createElement("div");
-    first.id = "clip-1";
-    const second = document.createElement("div");
-    second.id = "clip-2";
-    const firstSelection = makeSelection("First", first);
-    const secondSelection = makeSelection("Second", second);
-    const harness = renderHarness({
-      activeCompPath: "intro.html",
-      projectId: "project-1",
-      refreshKey: 0,
-      timelineElements: [
-        { id: "clip-1", domId: "clip-1", tag: "div", start: 0, duration: 1, track: 0 },
-        { id: "clip-2", domId: "clip-2", tag: "div", start: 1, duration: 1, track: 1 },
-      ],
-    });
-
-    act(() => harness.current().applyMarqueeSelection([secondSelection, firstSelection], false));
-
-    const state = usePlayerStore.getState();
-    expect([...state.selectedElementIds]).toEqual(["clip-2", "clip-1"]);
-    expect(state.selectedElementId).toBe("clip-2");
-    expect(harness.current().domEditGroupSelections).toHaveLength(2);
-    expect(harness.current().domEditSelection).toBe(secondSelection);
-    harness.cleanup();
-  });
 });

package/src/hooks/useDomSelection.ts

@@ -1,10 +1,14 @@
 import { useState, useCallback, useRef, useEffect } from "react";
-import type { TimelineElement } from "../player";
+import type { SelectElementOptions, TimelineElement } from "../player";
 import {
   getAllPreviewTargetsFromPointer,
   getPreviewTargetFromPointer,
 } from "../utils/studioPreviewHelpers";
-import { resolveTimelineIdForSelection, type RightPanelTab } from "../utils/studioHelpers";
+import {
+  findMatchingTimelineElementId,
+  findTimelineIdByAncestor,
+  type RightPanelTab,
+} from "../utils/studioHelpers";
 import {
   domEditSelectionsTargetSame,
   domEditSelectionInGroup,
@@ -20,7 +24,6 @@ import {
   type DomEditSelection,
 } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
-import { usePlayerStore } from "../player/store/playerStore";
 
 // ── Types ──
 
@@ -44,7 +47,7 @@ export interface UseDomSelectionParams {
   captionEditMode: boolean;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   timelineElements: TimelineElement[];
-  setSelectedTimelineElementId: (id: string | null) => void;
+  setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
   previewIframe: HTMLIFrameElement | null;
@@ -92,6 +95,7 @@ export interface UseDomSelectionReturn {
   ) => Promise<DomEditSelection | null>;
   handleTimelineElementSelect: (element: TimelineElement | null) => Promise<void>;
   refreshDomEditSelectionFromPreview: (selection: DomEditSelection) => Promise<void>;
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
   applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
 }
 
@@ -206,42 +210,27 @@ export function useDomSelection({
       if (nextSelection) {
         if (options?.revealPanel !== false) {
           setRightCollapsed(false);
-          // Keep the Variables tab in place — selecting elements is part of
-          // the bind flow there; yanking to Design would lose the context.
+          // Keep the Variables tab in place — selecting elements is part of the bind
+          // flow there; yanking to Design would lose the context.
           if (rightPanelTabRef.current !== "variables") {
             setRightPanelTab("design");
           }
         }
-        // Mirror the whole DOM group to the store so it stays the single source of
-        // truth: a single selection collapses to one id; a preserved group (echo
-        // during a gesture) keeps every member instead of shrinking to the anchor.
-        const anchorId = resolveTimelineIdForSelection(
-          nextSelection,
-          timelineElements,
-          activeCompPath,
-        );
-        const groupIds = nextGroup
-          .map((selection) =>
-            resolveTimelineIdForSelection(selection, timelineElements, activeCompPath),
-          )
-          .filter((id): id is string => Boolean(id));
-        if (groupIds.length > 0) {
-          usePlayerStore.getState().setSelection(groupIds, anchorId);
-        } else {
-          setSelectedTimelineElementId(anchorId);
-        }
+        const nextSelectedTimelineId =
+          findMatchingTimelineElementId(nextSelection, timelineElements) ??
+          findTimelineIdByAncestor(
+            nextSelection.element,
+            timelineElements,
+            nextSelection.sourceFile || "index.html",
+          );
+        // Late marquee notify: a primary already in the live set must not collapse it.
+        setSelectedTimelineElementId(nextSelectedTimelineId, { preserveSet: true });
         return;
       }
 
       setSelectedTimelineElementId(null);
     },
-    [
-      setSelectedTimelineElementId,
-      timelineElements,
-      setRightCollapsed,
-      setRightPanelTab,
-      activeCompPath,
-    ],
+    [setSelectedTimelineElementId, timelineElements, setRightCollapsed, setRightPanelTab],
   );
 
   const clearDomSelection = useCallback(() => {
@@ -424,6 +413,55 @@ export function useDomSelection({
     [activeCompPath, applyDomSelection, buildDomSelectionFromTarget, previewIframeRef],
   );
 
+  const refreshDomEditGroupSelectionsFromPreview = useCallback(
+    // fallow-ignore-next-line complexity
+    async (selections: DomEditSelection[]) => {
+      const iframe = previewIframeRef.current;
+      let doc: Document | null = null;
+      try {
+        doc = iframe?.contentDocument ?? null;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      const nextGroup: DomEditSelection[] = [];
+      for (const selection of selections) {
+        const element = findElementForSelection(doc, selection, activeCompPath);
+        if (!element) continue;
+        const nextSelection = await buildDomSelectionFromTarget(element);
+        if (nextSelection) nextGroup.push(nextSelection);
+      }
+      if (nextGroup.length === 0) return;
+
+      const currentSelection = domEditSelectionRef.current;
+      const nextSelection =
+        nextGroup.find((selection) => domEditSelectionsTargetSame(selection, currentSelection)) ??
+        nextGroup[0] ??
+        null;
+
+      domEditSelectionRef.current = nextSelection;
+      domEditGroupSelectionsRef.current = nextGroup;
+      setDomEditSelection(nextSelection);
+      setDomEditGroupSelections(nextGroup);
+
+      if (nextSelection) {
+        setSelectedTimelineElementId(
+          findMatchingTimelineElementId(nextSelection, timelineElements),
+        );
+      } else {
+        setSelectedTimelineElementId(null);
+      }
+    },
+    [
+      activeCompPath,
+      buildDomSelectionFromTarget,
+      setSelectedTimelineElementId,
+      timelineElements,
+      previewIframeRef,
+    ],
+  );
+
   // ── Effects ──
 
   // Clear hover unconditionally on composition/project/preview change
@@ -471,8 +509,7 @@ export function useDomSelection({
   const applyMarqueeSelection = useCallback(
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
-      // Honor the inspector-panels kill switch like applyDomSelection does, so
-      // marquee can't land selections while the inspector UI is suppressed.
+      // Honor the inspector-panels kill switch like applyDomSelection does.
       if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
         domEditSelectionRef.current = null;
         domEditGroupSelectionsRef.current = [];
@@ -493,8 +530,7 @@ export function useDomSelection({
           if (!domEditSelectionInGroup(nextGroup, s)) nextGroup = [...nextGroup, s];
         }
       } else {
-        // Dedupe by target: under select-as-unit several marquee'd members collapse
-        // to the same group, which must count as one selection, not many duplicates.
+        // Dedupe by target: select-as-unit collapses marquee'd members to one group.
         nextGroup = [];
         for (const s of selections) {
           if (!domEditSelectionInGroup(nextGroup, s)) nextGroup.push(s);
@@ -505,23 +541,16 @@ export function useDomSelection({
       domEditGroupSelectionsRef.current = nextGroup;
       setDomEditSelection(nextSelection);
       setDomEditGroupSelections(nextGroup);
-      const nextTimelineId = resolveTimelineIdForSelection(
-        nextSelection,
-        timelineElements,
-        activeCompPath,
-      );
-      const nextTimelineIds = nextGroup
-        .map((selection) =>
-          resolveTimelineIdForSelection(selection, timelineElements, activeCompPath),
-        )
-        .filter((id): id is string => Boolean(id));
-      if (nextTimelineIds.length > 0) {
-        usePlayerStore.getState().setSelection(nextTimelineIds, nextTimelineId);
-      } else {
-        setSelectedTimelineElementId(null);
-      }
+      const nextTimelineId =
+        findMatchingTimelineElementId(nextSelection, timelineElements) ??
+        findTimelineIdByAncestor(
+          nextSelection.element,
+          timelineElements,
+          nextSelection.sourceFile || "index.html",
+        );
+      setSelectedTimelineElementId(nextTimelineId);
     },
-    [applyDomSelection, timelineElements, setSelectedTimelineElementId, activeCompPath],
+    [applyDomSelection, timelineElements, setSelectedTimelineElementId],
   );
 
   // Disabled inspector effect
@@ -558,6 +587,7 @@ export function useDomSelection({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
     applyMarqueeSelection,
   };
 }