@hyperframes/studio 0.6.122-alpha.0 → 0.7.1

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -0,0 +1,366 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// Mock the two preview-sync primitives so we can assert which path runCommit took.
+// `patchRuntimeTweenInPlace` is the instant in-place patch; `applySoftReload` is
+// the existing fallback. `extractGsapScriptText` is re-exported from the same
+// module and used elsewhere in the hook — keep it a harmless stub.
+const patchRuntimeTweenInPlace = vi.fn<(...args: unknown[]) => boolean>();
+const applySoftReload = vi.fn<(...args: unknown[]) => string>();
+const trackStudioEvent = vi.fn();
+
+vi.mock("./gsapRuntimePatch", () => ({
+  patchRuntimeTweenInPlace: (...args: unknown[]) => patchRuntimeTweenInPlace(...args),
+}));
+vi.mock("../utils/gsapSoftReload", () => ({
+  applySoftReload: (...args: unknown[]) => applySoftReload(...args),
+  extractGsapScriptText: () => "",
+}));
+vi.mock("../utils/studioTelemetry", () => ({
+  trackStudioEvent: (...args: unknown[]) => trackStudioEvent(...args),
+}));
+
+// Tell React this is an act-capable environment so act(...) flushes effects
+// without warning (React reads this global at call time).
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { MutationResult } from "./gsapScriptCommitTypes";
+import { applyPreviewSync, useGsapScriptCommits } from "./useGsapScriptCommits";
+
+// ── applyPreviewSync (pure preview-sync decision) ────────────────────────────
+
+const FAKE_IFRAME = {} as HTMLIFrameElement;
+
+function result(over: Partial<MutationResult> = {}): MutationResult {
+  return { ok: true, scriptText: "tl.set('#a',{})", ...over };
+}
+
+describe("applyPreviewSync", () => {
+  beforeEach(() => {
+    patchRuntimeTweenInPlace.mockReset();
+    applySoftReload.mockReset();
+    trackStudioEvent.mockReset();
+  });
+
+  it("instantPatch + patch succeeds: skips both soft reload and full reload", () => {
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result(),
+      {
+        label: "drag",
+        softReload: true,
+        instantPatch: { selector: "#a", change: { kind: "set", props: { x: 10 } } },
+      },
+      reloadPreview,
+    );
+
+    expect(patchRuntimeTweenInPlace).toHaveBeenCalledWith(FAKE_IFRAME, "#a", {
+      kind: "set",
+      props: { x: 10 },
+    });
+    expect(applySoftReload).not.toHaveBeenCalled();
+    expect(reloadPreview).not.toHaveBeenCalled();
+  });
+
+  it("instantPatch + patch fails: falls back to the soft reload, passing onAsyncFailure", () => {
+    patchRuntimeTweenInPlace.mockReturnValue(false);
+    applySoftReload.mockReturnValue("applied");
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      {
+        label: "drag",
+        softReload: true,
+        instantPatch: { selector: "#a", change: { kind: "set", props: { x: 10 } } },
+      },
+      reloadPreview,
+    );
+
+    // reloadPreview is wired as onAsyncFailure (3rd arg) so a MotionPath-plugin
+    // CDN load failure escalates to a full reload — but it is NOT called eagerly.
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", reloadPreview);
+    expect(reloadPreview).not.toHaveBeenCalled();
+    // A successful instant patch is the fast path; here it missed → fallback event.
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "gsap_instant_patch_fallback",
+      expect.objectContaining({ selector: "#a" }),
+    );
+  });
+
+  it('instantPatch + patch fails + soft reload "verify-failed": transient, does NOT escalate (U4)', () => {
+    patchRuntimeTweenInPlace.mockReturnValue(false);
+    applySoftReload.mockReturnValue("verify-failed");
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      {
+        label: "drag",
+        softReload: true,
+        instantPatch: { selector: "#a", change: { kind: "set", props: { x: 10 } } },
+      },
+      reloadPreview,
+    );
+
+    // U4: "verify-failed" is the TRANSIENT empty-timeline window — the live state
+    // is correct, so we must NOT escalate to a full reload.
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", reloadPreview);
+    expect(reloadPreview).not.toHaveBeenCalled();
+    // Telemetry records the suppressed transient (escalated: false).
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "gsap_soft_reload_outcome",
+      expect.objectContaining({
+        origin: "preview_sync",
+        result: "verify-failed",
+        escalated: false,
+      }),
+    );
+  });
+
+  it('instantPatch + patch fails + soft reload "cannot-soft-reload": escalates to full reload', () => {
+    patchRuntimeTweenInPlace.mockReturnValue(false);
+    applySoftReload.mockReturnValue("cannot-soft-reload");
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      {
+        label: "drag",
+        softReload: true,
+        instantPatch: { selector: "#a", change: { kind: "set", props: { x: 10 } } },
+      },
+      reloadPreview,
+    );
+
+    // Structural failure: the preview is genuinely stale/broken → full reload.
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", reloadPreview);
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "gsap_soft_reload_outcome",
+      expect.objectContaining({
+        origin: "preview_sync",
+        result: "cannot-soft-reload",
+        escalated: true,
+      }),
+    );
+  });
+
+  it("no instantPatch + softReload + scriptText: soft reloads, passing onAsyncFailure", () => {
+    applySoftReload.mockReturnValue("applied");
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { label: "x", softReload: true },
+      reloadPreview,
+    );
+
+    expect(patchRuntimeTweenInPlace).not.toHaveBeenCalled();
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", reloadPreview);
+    expect(reloadPreview).not.toHaveBeenCalled();
+    // "applied" emits no telemetry (only the failure paths do).
+    expect(trackStudioEvent).not.toHaveBeenCalled();
+  });
+
+  it('no instantPatch + softReload "verify-failed": transient, does NOT escalate (U4)', () => {
+    applySoftReload.mockReturnValue("verify-failed");
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { label: "x", softReload: true },
+      reloadPreview,
+    );
+
+    // onAsyncFailure is wired, but the transient result does not trigger it.
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", reloadPreview);
+    expect(reloadPreview).not.toHaveBeenCalled();
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "gsap_soft_reload_outcome",
+      expect.objectContaining({ result: "verify-failed", escalated: false }),
+    );
+  });
+
+  it('no instantPatch + softReload "cannot-soft-reload": escalates to full reload', () => {
+    applySoftReload.mockReturnValue("cannot-soft-reload");
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(
+      FAKE_IFRAME,
+      result({ scriptText: "SCRIPT" }),
+      { label: "x", softReload: true },
+      reloadPreview,
+    );
+
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", reloadPreview);
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+    expect(trackStudioEvent).toHaveBeenCalledWith(
+      "gsap_soft_reload_outcome",
+      expect.objectContaining({ result: "cannot-soft-reload", escalated: true }),
+    );
+  });
+
+  it("no instantPatch + no softReload: full reload (today's behavior)", () => {
+    const reloadPreview = vi.fn();
+
+    applyPreviewSync(FAKE_IFRAME, result(), { label: "x" }, reloadPreview);
+
+    expect(patchRuntimeTweenInPlace).not.toHaveBeenCalled();
+    expect(applySoftReload).not.toHaveBeenCalled();
+    expect(reloadPreview).toHaveBeenCalledTimes(1);
+  });
+});
+
+// ── runCommit (full hook path: persist + preview sync) ───────────────────────
+
+type HookApi = ReturnType<typeof useGsapScriptCommits>;
+
+let cleanup: (() => void) | null = null;
+
+function renderCommitHook() {
+  const reloadPreview = vi.fn();
+  const onCacheInvalidate = vi.fn();
+  const forceReloadSdkSession = vi.fn();
+  const recordEdit = vi.fn(async () => {});
+  const showToast = vi.fn();
+
+  const captured: { api: HookApi | null } = { api: null };
+  function Probe() {
+    captured.api = useGsapScriptCommits({
+      projectIdRef: { current: "proj-1" },
+      activeCompPath: "index.html",
+      previewIframeRef: { current: FAKE_IFRAME },
+      editHistory: { recordEdit },
+      domEditSaveTimestampRef: { current: 0 },
+      reloadPreview,
+      onCacheInvalidate,
+      onFileContentChanged: undefined,
+      showToast,
+      sdkSession: null,
+      writeProjectFile: undefined,
+      forceReloadSdkSession,
+    });
+    return null;
+  }
+
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  act(() => {
+    root.render(<Probe />);
+  });
+  cleanup = () => act(() => root.unmount());
+  const hookApi = captured.api;
+  if (!hookApi) throw new Error("hook did not initialize");
+  return {
+    api: hookApi,
+    reloadPreview,
+    onCacheInvalidate,
+    forceReloadSdkSession,
+    recordEdit,
+    showToast,
+  };
+}
+
+const selection: DomEditSelection = { id: "a", selector: "#a" } as DomEditSelection;
+
+function mockFetchResult(over: Partial<MutationResult> = {}): void {
+  const body: MutationResult = {
+    ok: true,
+    changed: true,
+    before: "BEFORE",
+    after: "AFTER",
+    scriptText: "SCRIPT",
+    ...over,
+  };
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async () => ({ ok: true, json: async () => body }) as unknown as Response),
+  );
+}
+
+describe("runCommit — instantPatch wiring", () => {
+  beforeEach(() => {
+    patchRuntimeTweenInPlace.mockReset();
+    applySoftReload.mockReset();
+    trackStudioEvent.mockReset();
+  });
+  afterEach(() => {
+    cleanup?.();
+    cleanup = null;
+    vi.unstubAllGlobals();
+  });
+
+  it("instantPatch succeeds: persists, invalidates cache, NO reload", async () => {
+    patchRuntimeTweenInPlace.mockReturnValue(true);
+    mockFetchResult();
+    const deps = renderCommitHook();
+
+    await act(async () => {
+      await deps.api.commitMutation(
+        selection,
+        { x: 10 },
+        {
+          label: "drag",
+          softReload: true,
+          instantPatch: { selector: "#a", change: { kind: "set", props: { x: 10 } } },
+        },
+      );
+    });
+
+    expect(fetch).toHaveBeenCalledTimes(1); // source mutation persisted
+    expect(deps.recordEdit).toHaveBeenCalledTimes(1);
+    expect(deps.onCacheInvalidate).toHaveBeenCalledTimes(1);
+    expect(applySoftReload).not.toHaveBeenCalled();
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+
+  it("instantPatch fails: persists AND falls back to soft reload", async () => {
+    patchRuntimeTweenInPlace.mockReturnValue(false);
+    applySoftReload.mockReturnValue("applied");
+    mockFetchResult();
+    const deps = renderCommitHook();
+
+    await act(async () => {
+      await deps.api.commitMutation(
+        selection,
+        { x: 10 },
+        {
+          label: "drag",
+          softReload: true,
+          instantPatch: { selector: "#a", change: { kind: "set", props: { x: 10 } } },
+        },
+      );
+    });
+
+    expect(fetch).toHaveBeenCalledTimes(1);
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", deps.reloadPreview);
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+    expect(deps.onCacheInvalidate).toHaveBeenCalledTimes(1);
+  });
+
+  it("no instantPatch: identical to today — soft reload when softReload+scriptText", async () => {
+    applySoftReload.mockReturnValue("applied");
+    mockFetchResult();
+    const deps = renderCommitHook();
+
+    await act(async () => {
+      await deps.api.commitMutation(selection, { x: 10 }, { label: "drag", softReload: true });
+    });
+
+    expect(patchRuntimeTweenInPlace).not.toHaveBeenCalled();
+    expect(applySoftReload).toHaveBeenCalledWith(FAKE_IFRAME, "SCRIPT", deps.reloadPreview);
+    expect(deps.reloadPreview).not.toHaveBeenCalled();
+  });
+});

package/src/hooks/useGsapScriptCommits.ts

@@ -1,9 +1,13 @@
 import { useCallback, useMemo, useRef } from "react";
+import { editLog } from "../utils/editDebugLog";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { applySoftReload, extractGsapScriptText } from "../utils/gsapSoftReload";
+import type { SoftReloadResult } from "../utils/gsapSoftReload";
+import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { CutoverDeps } from "../utils/sdkCutover";
 import { updateKeyframeCacheFromParsed } from "./gsapKeyframeCacheHelpers";
+import { patchRuntimeTweenInPlace } from "./gsapRuntimePatch";
 import { createKeyedSerializer } from "./serializeByKey";
 import {
   GsapMutationHttpError,
@@ -43,6 +47,77 @@ async function mutateGsapScript(
   return result;
 }
 
+/**
+ * Apply a soft reload and enforce the U4 invariant via the richer
+ * `SoftReloadResult`, with telemetry on every non-success path so the invariant
+ * is observable in production, not just asserted in tests:
+ *
+ * - `"cannot-soft-reload"` (PERMANENT/STRUCTURAL: no gsap runtime, no rebind
+ *   hook, no scopable key, no script element, or the sync re-run threw) →
+ *   escalate to a full `reloadPreview()`; the preview is genuinely stale/broken.
+ * - `"verify-failed"` (TRANSIENT: re-run happened, `__timelines` momentarily
+ *   empty) → do NOT escalate; the live `gsap.set` already shows the correct value
+ *   and a remount would re-flash the WebGL context + revert subcomp keyframes.
+ * - `"applied"` → success (or deferred to async plugin load; `onAsyncFailure`
+ *   covers the CDN-error escalation).
+ */
+function softReloadOrEscalate(
+  iframe: HTMLIFrameElement | null,
+  scriptText: string,
+  reloadPreview: () => void,
+  origin: "preview_sync" | "sdk_refresh",
+): void {
+  const result: SoftReloadResult = applySoftReload(iframe, scriptText, reloadPreview);
+  if (result === "applied") return;
+  trackStudioEvent("gsap_soft_reload_outcome", {
+    origin,
+    result,
+    escalated: result === "cannot-soft-reload",
+  });
+  // PERMANENT failure: the preview can't be soft-updated → full reload. TRANSIENT
+  // "verify-failed" is suppressed (live state is correct).
+  if (result === "cannot-soft-reload") reloadPreview();
+}
+
+/**
+ * Sync the preview after a persisted commit. For a value-only edit
+ * (`options.instantPatch`), try the in-place runtime patch first: on success the
+ * preview is already correct, so we skip the reload entirely (instant). On `false`
+ * — or when no `instantPatch` is supplied — fall back to the existing soft/full
+ * reload. Pure (no React) so `runCommit`'s preview-sync decision is unit-testable.
+ */
+export function applyPreviewSync(
+  iframe: HTMLIFrameElement | null,
+  result: MutationResult,
+  options: CommitMutationOptions,
+  reloadPreview: () => void,
+): void {
+  if (options.instantPatch) {
+    const patched = patchRuntimeTweenInPlace(
+      iframe,
+      options.instantPatch.selector,
+      options.instantPatch.change,
+    );
+    // Patched in place — element is already correct on screen; no reload needed.
+    if (patched) return;
+    // The instant path couldn't patch in place — record the fallback so we can
+    // track how often the fast path misses before the soft/full reload below.
+    trackStudioEvent("gsap_instant_patch_fallback", { selector: options.instantPatch.selector });
+    // Fall through to the soft/full reload path below.
+  }
+  if (options.softReload && result.scriptText) {
+    // A soft-reloadable edit escalates to a full iframe remount ONLY on the
+    // PERMANENT "cannot-soft-reload" result (the preview is genuinely stale/
+    // broken). The TRANSIENT "verify-failed" does NOT escalate — the value is
+    // already correct on screen, and a remount re-flashes the WebGL context AND
+    // re-inlines subcomps (reverting their keyframes). The async MotionPath-plugin
+    // load failure escalates separately via `onAsyncFailure`.
+    softReloadOrEscalate(iframe, result.scriptText, reloadPreview, "preview_sync");
+  } else {
+    reloadPreview();
+  }
+}
+
 // oxfmt-ignore
 // fallow-ignore-next-line complexity
 export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession, writeProjectFile, forceReloadSdkSession }: GsapScriptCommitsParams) {
@@ -55,6 +130,12 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
   const runCommit = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
     const pid = projectIdRef.current;
     if (!pid) return;
+    editLog("gsap-commit", {
+      type: mutation.type,
+      id: selection.id,
+      file: selection.sourceFile || activeCompPath,
+      label: options.label,
+    });
     const unsafeFields = findUnsafeMutationValues(mutation);
     if (unsafeFields.length > 0) {
       showToast?.("Couldn't read element layout — try again at a different playhead time", "error");
@@ -82,12 +163,13 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     if (options.skipReload) return;
     if (result.parsed?.animations) updateKeyframeCacheFromParsed(result.parsed.animations, targetPath, selection.id ?? undefined, mutation);
     options.beforeReload?.();
-    if (options.softReload && result.scriptText) {
-      if (!applySoftReload(previewIframeRef.current, result.scriptText)) reloadPreview();
-    } else {
-      reloadPreview();
-    }
+    applyPreviewSync(previewIframeRef.current, result, options, reloadPreview);
     onCacheInvalidate();
+    editLog("gsap-commit:done", {
+      type: mutation.type,
+      changed: result.changed,
+      instant: Boolean(options.instantPatch),
+    });
   }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, forceReloadSdkSession]);
   // Every GSAP-script commit is a read-modify-write of one file. Overlapping
   // commits to the SAME file (any op type, any animation) interleave server-side,
@@ -109,8 +191,22 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
   // the playhead) and invalidates the panel cache, matching the server path.
   const sdkRefresh = useCallback(
     (after: string) => {
+      // extractGsapScriptText returns null when zero/multiple GSAP scripts are
+      // present — that's an ambiguous/structural change that genuinely needs a full
+      // reload. But a SINGLE-script soft-reloadable edit must not escalate to a full
+      // remount even if applySoftReload reports failure (same U4 invariant as
+      // applyPreviewSync): the live state is already correct, and a remount re-inlines
+      // subcomps + reverts their keyframes.
       const script = extractGsapScriptText(after);
-      if (!(script && applySoftReload(previewIframeRef.current, script))) reloadPreview();
+      if (script) {
+        // Soft-reload in place. reloadPreview is the ASYNC-failure escalation — a
+        // plugin-CDN load error genuinely breaks the iframe → full reload. Per U4, a
+        // synchronous "verify-failed" (transient empty __timelines) does NOT escalate,
+        // but a "cannot-soft-reload" (structural failure) does.
+        softReloadOrEscalate(previewIframeRef.current, script, reloadPreview, "sdk_refresh");
+      } else {
+        reloadPreview();
+      }
       onCacheInvalidate();
     },
     [previewIframeRef, reloadPreview, onCacheInvalidate],

package/src/hooks/useGsapTweenCache.ts

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
 import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
+import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBridge";
 import {
@@ -107,7 +108,12 @@ export async function fetchParsedAnimations(
     const res = await fetch(
       `/api/projects/${encodeURIComponent(projectId)}/gsap-animations/${encodeURIComponent(sourceFile)}`,
     );
-    return res.ok ? ((await res.json()) as ParsedGsap) : null;
+    if (!res.ok) return null;
+    const parsed = (await res.json()) as ParsedGsap;
+    // Studio-emitted pre-keyframe hold `set`s are an internal runtime detail (they
+    // hold an element's first keyframe before its tween). They must not surface as
+    // user animations — otherwise they pollute the keyframe cache / timeline diamonds.
+    return { ...parsed, animations: parsed.animations.filter((a) => !isStudioHoldSet(a)) };
   } catch {
     return null;
   }
@@ -131,7 +137,8 @@ export function useGsapAnimationsForElement(
   const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    const fetchKey = `${projectId}:${sourceFile}:${version}`;
+    const targetKey = target?.id ?? target?.selector ?? "";
+    const fetchKey = `${projectId}:${sourceFile}:${version}:${targetKey}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
 
@@ -360,9 +367,7 @@ export function usePopulateKeyframeCacheForFile(
 
     const sf = sourceFile;
     fetchParsedAnimations(projectId, sf).then((parsed) => {
-      if (!parsed) {
-        return;
-      }
+      if (!parsed) return;
       const { setKeyframeCache } = usePlayerStore.getState();
       clearKeyframeCacheForFile(sf);
       const { elements } = usePlayerStore.getState();
@@ -370,13 +375,9 @@ export function usePopulateKeyframeCacheForFile(
       for (const anim of parsed.animations) {
         const id = extractIdFromSelector(anim.targetSelector);
         if (!id) continue;
-        if (anim.hasUnresolvedKeyframes) {
-          continue;
-        }
+        if (anim.hasUnresolvedKeyframes) continue;
         const kfData = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
-        if (!kfData) {
-          continue;
-        }
+        if (!kfData) continue;
         const tweenPos =
           anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
         const tweenDur = anim.duration ?? 1;

package/src/hooks/useRazorSplit.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef } from "react";
+import { editLog } from "../utils/editDebugLog";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
@@ -38,13 +39,21 @@ async function splitHtmlElement(
   patchTarget: NonNullable<ReturnType<typeof buildPatchTarget>>,
   splitTime: number,
   newId: string,
+  elementStart: number,
+  elementDuration: number,
 ): Promise<{ ok: boolean; changed?: boolean; content?: string }> {
   const response = await fetch(
     `/api/projects/${projectId}/file-mutations/split-element/${encodeURIComponent(targetPath)}`,
     {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ target: patchTarget, splitTime, newId }),
+      body: JSON.stringify({
+        target: patchTarget,
+        splitTime,
+        newId,
+        elementStart,
+        elementDuration,
+      }),
     },
   );
   if (!response.ok) throw new Error("Split request failed");
@@ -111,11 +120,21 @@ async function executeSplit(
   if (!patchTarget) throw new Error("Clip is missing a patchable target.");
 
   const targetPath = element.sourceFile || activeCompPath || "index.html";
+  editLog("razor-split", { id: element.domId ?? element.id, splitTime, file: targetPath });
   const originalContent = await readFileContent(pid, targetPath);
   const newId = generateSplitId(collectHtmlIds(originalContent), element.domId || "clip");
 
-  const splitResult = await splitHtmlElement(pid, targetPath, patchTarget, splitTime, newId);
+  const splitResult = await splitHtmlElement(
+    pid,
+    targetPath,
+    patchTarget,
+    splitTime,
+    newId,
+    element.start,
+    element.duration,
+  );
   if (!splitResult.ok) throw new Error("Failed to split clip.");
+  editLog("razor-split:done", { changed: splitResult.changed, newId });
   if (!splitResult.changed) {
     return { targetPath, originalContent, patchedContent: originalContent, changed: false };
   }