@hyperframes/studio 0.7.57 → 0.7.59

package/src/hooks/gsapScriptCommitTypes.ts

@@ -2,6 +2,7 @@ import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
+import type { PublishSdkSession } from "../utils/sdkCutover";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 
 export interface MutationResult {
@@ -22,10 +23,9 @@ export interface CommitMutationOptions {
   beforeReload?: () => void;
   /**
    * Serialize this commit against others sharing the same key. Used to chain
-   * per-animationId GSAP meta updates so overlapping read-modify-write POSTs to
-   * one file can't interleave — which would pair the shadow fidelity diff with a
-   * stale server result and report false ease mismatches. Commits without a key
-   * (and under distinct keys) run concurrently as before.
+   * per-animationId GSAP meta updates. Every commit independently takes the
+   * project/file mutation lock, so this key only adds ordering and can never
+   * bypass whole-file serialization.
    */
   serializeKey?: string;
   /**
@@ -87,6 +87,8 @@ export interface GsapScriptCommitsParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   /** Stage 7 §3.5: SDK session for routing GSAP tween ops through addGsapTween/setGsapTween/removeGsapTween. */
   sdkSession?: Composition | null;
+  /** Publish a fully persisted candidate SDK session. */
+  publishSdkSession?: PublishSdkSession;
   writeProjectFile?: (path: string, content: string) => Promise<void>;
   /** Resync the in-memory SDK session after a server-authoritative write. */
   forceReloadSdkSession?: () => void;

package/src/hooks/timelineEditingHelpers.test.ts

@@ -5,6 +5,7 @@ import {
   buildTimelineMoveTimingPatch,
   deleteSelectedKeyframes,
   extendRootDurationIfNeeded,
+  patchIframeDomTiming,
   persistTimelineBatchEdit,
   type PersistTimelineBatchChange,
 } from "./timelineEditingHelpers";
@@ -42,7 +43,11 @@ describe("applyTimelineStackingReorder", () => {
   it("commits via the change's own locator even when the element is not in timelineElements", () => {
     // Sub-comp children live in the preview iframe but NOT in the top-level
     // timelineElements list — the intent must be self-contained.
-    const iframe = makeIframeWith(`<div id="chip" style="z-index: 1"></div>`);
+    const iframe = makeIframeWith(`
+      <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+        <div id="chip" style="z-index: 1"></div>
+      </div>
+    `);
     const commit = vi.fn<(entries: unknown[]) => void>();
 
     applyTimelineStackingReorder({
@@ -96,6 +101,92 @@ describe("applyTimelineStackingReorder", () => {
 
     expect(commit).not.toHaveBeenCalled();
   });
+
+  it("resolves selectorIndex within the change's source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div class="chip">root</div>
+        <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+          <div class="chip">scene zero</div>
+          <div class="chip" style="z-index: 1">scene one</div>
+        </div>
+      </div>
+    `);
+    const sceneOne = iframe.contentDocument?.querySelectorAll(".chip")[2];
+    const commit = vi.fn<(entries: unknown[]) => void>();
+
+    applyTimelineStackingReorder({
+      element: el({ id: "scene-one", tag: "div" }),
+      stackingReorder: {
+        contextKey: "scene",
+        placement: { type: "above", layerId: "layer:scene:x" },
+        zIndexChanges: [
+          {
+            key: "scenes/scene.html#.chip:1",
+            zIndex: 5,
+            selector: ".chip",
+            selectorIndex: 1,
+            sourceFile: "scenes/scene.html",
+          },
+        ],
+      },
+      timelineElements: [],
+      iframe,
+      activeCompPath: "index.html",
+      commit,
+    });
+
+    const entries = commit.mock.calls[0]![0] as Array<{ element: Element }>;
+    expect(entries[0]!.element).toBe(sceneOne);
+  });
+});
+
+describe("patchIframeDomTiming", () => {
+  it("resolves selectorIndex within the element's source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div class="clip" data-start="1">root</div>
+        <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+          <div class="clip" data-start="2">scene zero</div>
+          <div class="clip" data-start="3">scene one</div>
+        </div>
+      </div>
+    `);
+    const clips = iframe.contentDocument?.querySelectorAll<HTMLElement>(".clip");
+    const target = el({
+      id: "scene-one",
+      tag: "div",
+      selector: ".clip",
+      selectorIndex: 1,
+      sourceFile: "scenes/scene.html",
+    });
+
+    patchIframeDomTiming(iframe, target, [["data-start", "9"]], "index.html");
+
+    expect([...clips!].map((clip) => clip.dataset.start)).toEqual(["1", "2", "9"]);
+  });
+
+  it("resolves duplicate domId within the element's source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div id="card" data-start="1">root</div>
+        <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+          <div id="card" data-start="2">scene</div>
+        </div>
+      </div>
+    `);
+    const cards = iframe.contentDocument?.querySelectorAll<HTMLElement>("#card");
+    const target = el({
+      id: "scene-card",
+      tag: "div",
+      domId: "card",
+      sourceFile: "scenes/scene.html",
+    });
+
+    patchIframeDomTiming(iframe, target, [["data-start", "9"]], "index.html");
+
+    expect([...cards!].map((card) => card.dataset.start)).toEqual(["1", "9"]);
+  });
 });
 
 describe("extendRootDurationIfNeeded", () => {

package/src/hooks/timelineEditingHelpers.ts

@@ -13,6 +13,7 @@ import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/stud
 import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
 import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
 import { readFileContent } from "./timelineTimingSync";
+import { findElementForSelection } from "../components/editor/domEditingElement";
 export { deleteSelectedKeyframes } from "./deleteSelectedKeyframes";
 export { readFileContent };
 function isHTMLElement(element: Element | null): element is HTMLElement {
@@ -53,12 +54,6 @@ export function applyTimelineStackingReorder(input: {
     input.timelineElements.map((el) => [getTimelineElementIdentity(el), el]),
   );
   const doc = input.iframe?.contentDocument ?? null;
-  const findLive = (domId?: string, selector?: string, selectorIndex?: number): Element | null => {
-    if (!doc) return null;
-    if (domId) return doc.getElementById(domId);
-    if (selector) return doc.querySelectorAll(selector)[selectorIndex ?? 0] ?? null;
-    return null;
-  };
   const commitEntries: Array<{
     element: HTMLElement;
     zIndex: number;
@@ -73,7 +68,15 @@ export function applyTimelineStackingReorder(input: {
     const domId = change.domId ?? sibling?.domId;
     const selector = change.selector ?? sibling?.selector;
     const selectorIndex = change.selectorIndex ?? sibling?.selectorIndex;
-    const element = findLive(domId, selector, selectorIndex);
+    const sourceFile =
+      change.sourceFile ?? sibling?.sourceFile ?? input.activeCompPath ?? "index.html";
+    const element = doc
+      ? findElementForSelection(
+          doc,
+          { id: domId, selector, selectorIndex, sourceFile },
+          input.activeCompPath,
+        )
+      : null;
     if (!isHTMLElement(element)) return Promise.resolve();
     if (getElementZIndex(element) === change.zIndex) continue;
     commitEntries.push({
@@ -82,12 +85,15 @@ export function applyTimelineStackingReorder(input: {
       id: domId ?? sibling?.id ?? change.key,
       selector,
       selectorIndex,
-      sourceFile: change.sourceFile ?? sibling?.sourceFile ?? input.activeCompPath ?? "index.html",
+      sourceFile,
       key: change.key,
     });
   }
   if (commitEntries.length === 0) return Promise.resolve();
-  return input.commit?.(commitEntries, input.coalesceKey) ?? Promise.resolve();
+  // The durability report is for gesture-level callers (z→lane mirror); this
+  // lane-drag z-sync path has no dependent follow-up write — swallow it.
+  // Promise.resolve-wrapped: a commit implementation may return void.
+  return Promise.resolve(input.commit?.(commitEntries, input.coalesceKey)).then(() => undefined);
 }
 export function extendRootDurationIfNeeded(newEnd: number): boolean {
   const store = usePlayerStore.getState();
@@ -126,15 +132,22 @@ export type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
 export function findTimelineElementInIframe(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
+  activeCompositionPath: string | null = null,
 ): Element | null {
   try {
     const doc = iframe?.contentDocument;
     if (!doc) return null;
-    return element.domId
-      ? doc.getElementById(element.domId)
-      : element.selector
-        ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
-        : null;
+    return findElementForSelection(
+      doc,
+      {
+        hfId: element.hfId,
+        id: element.domId,
+        selector: element.selector,
+        selectorIndex: element.selectorIndex,
+        sourceFile: element.sourceFile || activeCompositionPath || "index.html",
+      },
+      activeCompositionPath,
+    );
   } catch {
     return null;
   }
@@ -143,9 +156,10 @@ export function patchIframeDomTiming(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
   attrs: Array<[string, string]>,
+  activeCompositionPath: string | null = null,
 ): void {
   try {
-    const el = findTimelineElementInIframe(iframe, element);
+    const el = findTimelineElementInIframe(iframe, element, activeCompositionPath);
     if (!el) return;
     for (const [name, value] of attrs) el.setAttribute(name, value);
   } catch {
@@ -299,6 +313,8 @@ export interface PersistTimelineBatchEditInput {
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
   coalesceKey?: string;
+  /** Per-entry undo coalesce window override (ms) — see EditHistoryEntry.coalesceMs. */
+  coalesceMs?: number;
 }
 
 export async function persistTimelineBatchEdit(
@@ -347,6 +363,7 @@ export async function persistTimelineBatchEdit(
     label: input.label,
     kind: "timeline",
     coalesceKey: input.coalesceKey,
+    coalesceMs: input.coalesceMs,
     files,
     readFile: async (path) => originals.get(path) ?? readFileContent(input.projectId, path),
     writeFile: input.writeProjectFile,

package/src/hooks/timelineMoveAdapter.ts

@@ -23,6 +23,7 @@ export function persistTimelineMoveEditsAtomically(
   coalesceKey: string | undefined,
   operation: TimelineMoveOperation,
   deps: AtomicMoveDeps,
+  coalesceMs?: number,
 ): Promise<void> {
   return deps.handleTimelineGroupMove(
     edits.map(({ element, updates }) => ({
@@ -34,6 +35,6 @@ export function persistTimelineMoveEditsAtomically(
       // ("timing") omit it so they stay eligible for the SDK fast path.
       track: operation === "timing" ? undefined : updates.track,
     })),
-    { coalesceKey },
+    { coalesceKey, coalesceMs },
   );
 }