@hyperframes/studio 0.6.110 → 0.6.111

package/src/hooks/useElementLifecycleOps.ts

@@ -26,6 +26,10 @@ interface UseElementLifecycleOpsParams {
   projectIdRef: React.MutableRefObject<string | null>;
   reloadPreview: () => void;
   clearDomSelection: () => void;
+  /** Route delete through SDK when session resolves the hf-id; returns true if handled. */
+  onTrySdkDelete?: (hfId: string, originalContent: string, targetPath: string) => Promise<boolean>;
+  /** Resync the SDK session after a server-fallback delete. */
+  forceReloadSdkSession?: () => void;
   commitPositionPatchToHtml: (
     selection: DomEditSelection,
     patches: PatchOperation[],
@@ -44,6 +48,8 @@ export function useElementLifecycleOps({
   projectIdRef,
   reloadPreview,
   clearDomSelection,
+  onTrySdkDelete,
+  forceReloadSdkSession,
   commitPositionPatchToHtml,
   onElementDeleted,
 }: UseElementLifecycleOpsParams) {
@@ -74,6 +80,16 @@ export function useElementLifecycleOps({
           throw new Error("Selected element has no patchable target");
         }
 
+        if (onTrySdkDelete && selection.hfId) {
+          const handled = await onTrySdkDelete(selection.hfId, originalContent, targetPath);
+          if (handled) {
+            clearDomSelection();
+            usePlayerStore.getState().setSelectedElementId(null);
+            showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+            return;
+          }
+        }
+
         domEditSaveTimestampRef.current = Date.now();
         const removeResponse = await fetch(
           `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
@@ -93,6 +109,12 @@ export function useElementLifecycleOps({
         const removeData = (await removeResponse.json()) as { changed?: boolean; content?: string };
         const patchedContent =
           typeof removeData.content === "string" ? removeData.content : originalContent;
+        // ponytail: the server remove-element route (removeElementFromHtml) strips
+        // only the element node — it does NOT cascade-remove GSAP tweens targeting
+        // it, unlike the SDK path (removeElement → cascadeRemoveAnimations). This
+        // fallback runs only when the element isn't in the SDK doc (e.g. runtime-
+        // generated / unaddressable), where targeting tweens are unlikely. Upgrade
+        // path: cascade in removeElementFromHtml by selector/hf-id to fully match.
         await saveProjectFilesWithHistory({
           projectId: pid,
           label: "Delete element",
@@ -105,6 +127,9 @@ export function useElementLifecycleOps({
 
         clearDomSelection();
         usePlayerStore.getState().setSelectedElementId(null);
+        // Server wrote the file; resync the stale in-memory SDK doc so a later
+        // SDK edit doesn't resurrect the deleted element.
+        forceReloadSdkSession?.();
         reloadPreview();
         onElementDeleted?.(selection);
         showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
@@ -118,7 +143,9 @@ export function useElementLifecycleOps({
       clearDomSelection,
       domEditSaveTimestampRef,
       editHistory.recordEdit,
+      onTrySdkDelete,
       onElementDeleted,
+      forceReloadSdkSession,
       projectIdRef,
       reloadPreview,
       showToast,
@@ -126,6 +153,9 @@ export function useElementLifecycleOps({
     ],
   );
 
+  // ponytail: z-index reorder writes inline-style patches via commitPositionPatchToHtml →
+  // persistDomEditOperations → onTrySdkPersist, so it is already SDK-cut-over as setStyle.
+  // No SDK reorder/reparent op exists; DOM sibling order stays server-authoritative if ever needed.
   const handleDomZIndexReorderCommit = useCallback(
     (
       entries: Array<{

package/src/hooks/useGsapAnimationOps.ts

@@ -2,21 +2,28 @@ import { useCallback } from "react";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { roundTo3 } from "../utils/rounding";
-import { runShadowGsapTween, type ShadowGsapOp } from "../utils/sdkShadow";
+import {
+  sdkGsapTweenPersist,
+  sdkGsapDeleteAllForSelectorPersist,
+  type CutoverDeps,
+} from "../utils/sdkCutover";
 import {
   assignGsapTargetAutoIdIfNeeded,
   ensureElementAddressable,
 } from "./gsapScriptCommitHelpers";
 import type { CommitMutation, SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
 
-interface GsapAnimationOpsParams {
+interface SdkAnimationDeps {
+  sdkSession?: Composition | null;
+  sdkDeps?: CutoverDeps | null;
+}
+
+interface GsapAnimationOpsParams extends SdkAnimationDeps {
   projectIdRef: React.MutableRefObject<string | null>;
   activeCompPath: string | null;
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
   showToast: (message: string, tone?: "error" | "info") => void;
-  /** Stage 7 Step 3b: SDK session for shadow GSAP dispatch (server stays authoritative). */
-  sdkSession?: Composition | null;
 }
 
 export function useGsapAnimationOps({
@@ -26,60 +33,79 @@ export function useGsapAnimationOps({
   commitMutationSafely,
   showToast,
   sdkSession,
+  sdkDeps,
 }: GsapAnimationOpsParams) {
   const updateGsapMeta = useCallback(
-    (
+    async (
       selection: DomEditSelection,
       animationId: string,
       updates: { duration?: number; ease?: string; position?: number },
     ) => {
-      // Shadow op (server animationId shares the SDK id-space): existence via
-      // runShadowGsapTween (live session) + value fidelity via the chokepoint.
-      const shadowGsapOp: ShadowGsapOp = {
-        kind: "set",
-        animationId,
-        properties: { duration: updates.duration, ease: updates.ease, position: updates.position },
-      };
-      // coalesceKey groups rapid meta edits into one history entry. Request
-      // serialization is now handled per-file at the commitMutation chokepoint
-      // (useGsapScriptCommits), so no per-op serializeKey is needed here.
-      const metaKey = `gsap:${animationId}:meta`;
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          { kind: "set", animationId, properties: updates },
+          sdkSession,
+          sdkDeps,
+          { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta` },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "update-meta", animationId, updates },
-        { label: "Edit GSAP animation", coalesceKey: metaKey, shadowGsapOp },
+        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta` },
       );
-      if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [commitMutationSafely, sdkSession],
+    [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],
   );
 
   const deleteGsapAnimation = useCallback(
-    (selection: DomEditSelection, animationId: string) => {
-      const shadowGsapOp: ShadowGsapOp = { kind: "remove", animationId };
+    async (selection: DomEditSelection, animationId: string) => {
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          { kind: "remove", animationId },
+          sdkSession,
+          sdkDeps,
+          { label: "Delete GSAP animation" },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "delete", animationId, stripStudioEdits: true },
-        { label: "Delete GSAP animation", shadowGsapOp },
+        { label: "Delete GSAP animation" },
       );
-      if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [commitMutationSafely, sdkSession],
+    [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],
   );
 
   const deleteAllForSelector = useCallback(
-    (selection: DomEditSelection, targetSelector: string) => {
+    async (selection: DomEditSelection, targetSelector: string) => {
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapDeleteAllForSelectorPersist(
+          targetPath,
+          targetSelector,
+          sdkSession,
+          sdkDeps,
+          { label: "Delete all animations for element" },
+        );
+        if (handled) return;
+      }
       void commitMutation(
         selection,
         { type: "delete-all-for-selector", targetSelector },
         { label: "Delete all animations for element" },
       );
     },
-    [commitMutation],
+    [commitMutation, activeCompPath, sdkSession, sdkDeps],
   );
 
-  // Pre-existing complexity (auto-id assignment + per-method defaults); this PR
-  // adds only a guarded shadow-op construction at the tail.
+  // fallow-ignore-next-line complexity
   const addGsapAnimation = useCallback(
     // fallow-ignore-next-line complexity
     async (
@@ -114,25 +140,28 @@ export function useGsapAnimationOps({
         fromTo: { x: 0, y: 0, opacity: 1 },
       };
 
-      // Shadow op (server stays authoritative). "set" has no SDK method, so it
-      // is not shadowed; otherwise: existence via runShadowGsapTween (live) +
-      // value fidelity via the chokepoint (shadowGsapOp in options).
-      const shadowGsapOp: ShadowGsapOp | undefined =
-        selection.hfId && method !== "set"
-          ? {
-              kind: "add",
-              target: selection.hfId,
-              tween: {
-                method,
-                position,
-                duration,
-                ease: "power2.out",
-                ...(method === "fromTo"
-                  ? { fromProperties: { opacity: 0 }, toProperties: toDefaults[method] }
-                  : { properties: toDefaults[method] ?? { opacity: 1 } }),
-              },
-            }
-          : undefined;
+      // Skip SDK path when an id was just assigned server-side (autoId): the
+      // SDK session hasn't reloaded that write yet, so persisting its
+      // serialization would clobber the new id — let the server add the tween
+      // atomically with the id it wrote.
+      if (!autoId && selection.hfId && sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const spec = {
+          method,
+          position,
+          ...(method !== "set" ? { duration, ease: "power2.out" as const } : {}),
+          properties: toDefaults[method] ?? { opacity: 1 },
+          ...(method === "fromTo" ? { fromProperties: { opacity: 0 } } : {}),
+        };
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          { kind: "add", target: selection.hfId, spec },
+          sdkSession,
+          sdkDeps,
+          { label: `Add GSAP ${method} animation` },
+        );
+        if (handled) return;
+      }
 
       await commitMutation(
         selection,
@@ -146,12 +175,10 @@ export function useGsapAnimationOps({
           properties: toDefaults[method] ?? { opacity: 1 },
           fromProperties: method === "fromTo" ? { opacity: 0 } : undefined,
         },
-        { label: `Add GSAP ${method} animation`, shadowGsapOp },
+        { label: `Add GSAP ${method} animation` },
       );
-
-      if (sdkSession && shadowGsapOp) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession],
+    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession, sdkDeps],
   );
 
   return {

package/src/hooks/useGsapKeyframeOps.ts

@@ -1,8 +1,15 @@
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
-import type { ShadowKeyframeOp } from "../utils/sdkShadowGsapKeyframe";
+import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { executeOptimistic } from "../utils/optimisticUpdate";
+import {
+  sdkGsapKeyframePersist,
+  sdkGsapRemoveKeyframePersist,
+  sdkGsapRemoveAllKeyframesPersist,
+  sdkGsapConvertToKeyframesPersist,
+  type CutoverDeps,
+} from "../utils/sdkCutover";
 import type { KeyframeCacheEntry } from "../player/store/playerStore";
 import { commitKeyframeAtTimeImpl } from "./gsapKeyframeCommit";
 import { readKeyframeSnapshot, writeKeyframeCache } from "./gsapKeyframeCacheHelpers";
@@ -31,7 +38,12 @@ function executeOptimisticKeyframeCacheUpdate(options: {
   });
 }
 
-interface GsapKeyframeOpsParams {
+interface SdkKeyframeDeps {
+  sdkSession?: Composition | null;
+  sdkDeps?: CutoverDeps | null;
+}
+
+interface GsapKeyframeOpsParams extends SdkKeyframeDeps {
   activeCompPath: string | null;
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
@@ -43,6 +55,8 @@ export function useGsapKeyframeOps({
   commitMutation,
   commitMutationSafely,
   trackGsapSaveFailure,
+  sdkSession,
+  sdkDeps,
 }: GsapKeyframeOpsParams) {
   const addKeyframe = useCallback(
     (
@@ -59,111 +73,181 @@ export function useGsapKeyframeOps({
         percentage,
         properties: { [property]: value },
       };
-      // Shadow op (gsap_keyframe): SDK equivalent diffed via the commit chokepoint.
-      const shadowKeyframeOp: ShadowKeyframeOp = {
-        kind: "add",
-        animationId,
-        percentage,
-        properties: { [property]: value },
-      };
       void executeOptimisticKeyframeCacheUpdate({
         sourceFile,
         elementId: selection.id,
-        apply: (prev) => ({
-          ...prev,
-          keyframes: [...prev.keyframes, { percentage, properties: { [property]: value } }].sort(
-            (a, b) => a.percentage - b.percentage,
-          ),
-        }),
-        persist: () =>
-          commitMutation(selection, mutation, {
+        // Merge into an existing keyframe at this percentage rather than
+        // appending a duplicate — matches addKeyframeToScript, which writes one
+        // keyframe per percentage (merging properties).
+        apply: (prev) => {
+          // Match addKeyframeToScript's merge tolerance (PCT_TOLERANCE = 2 in
+          // gsapWriterAcorn): a keyframe added within 2% of an existing one
+          // merges on disk, so the optimistic cache must merge it too — else the
+          // UI shows a phantom keyframe that vanishes on the next reload.
+          const idx = prev.keyframes.findIndex(
+            (kf) => Math.abs((kf.tweenPercentage ?? kf.percentage) - percentage) <= 2,
+          );
+          if (idx >= 0) {
+            const keyframes = prev.keyframes.slice();
+            keyframes[idx] = {
+              ...keyframes[idx],
+              properties: { ...keyframes[idx].properties, [property]: value },
+            };
+            return { ...prev, keyframes };
+          }
+          return {
+            ...prev,
+            keyframes: [...prev.keyframes, { percentage, properties: { [property]: value } }].sort(
+              (a, b) => a.percentage - b.percentage,
+            ),
+          };
+        },
+        persist: async () => {
+          if (sdkSession && sdkDeps) {
+            const handled = await sdkGsapKeyframePersist(
+              sourceFile,
+              animationId,
+              percentage,
+              { [property]: value },
+              sdkSession,
+              sdkDeps,
+              {
+                label: `Add keyframe at ${percentage}%`,
+                coalesceKey: `gsap:${animationId}:kf:${percentage}`,
+              },
+            );
+            if (handled) return;
+          }
+          await commitMutation(selection, mutation, {
             label: `Add keyframe at ${percentage}%`,
             softReload: true,
-            shadowKeyframeOp,
-          }),
+          });
+        },
       }).catch((error) => {
         trackGsapSaveFailure(error, selection, mutation, `Add keyframe at ${percentage}%`);
       });
     },
-    [activeCompPath, commitMutation, trackGsapSaveFailure],
+    [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps],
   );
 
   const addKeyframeBatch = useCallback(
-    (
+    async (
       selection: DomEditSelection,
       animationId: string,
       percentage: number,
       properties: Record<string, number | string>,
     ) => {
-      const shadowKeyframeOp: ShadowKeyframeOp = {
-        kind: "add",
-        animationId,
-        percentage,
-        properties,
-      };
+      if (sdkSession && sdkDeps) {
+        const sourceFile = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapKeyframePersist(
+          sourceFile,
+          animationId,
+          percentage,
+          properties,
+          sdkSession,
+          sdkDeps,
+          { label: `Add keyframe at ${percentage}%` },
+        );
+        if (handled) return;
+      }
       return commitMutation(
         selection,
         { type: "add-keyframe", animationId, percentage, properties },
-        { label: `Add keyframe at ${percentage}%`, softReload: true, shadowKeyframeOp },
+        { label: `Add keyframe at ${percentage}%`, softReload: true },
       );
     },
-    [commitMutation],
+    [commitMutation, activeCompPath, sdkSession, sdkDeps],
   );
 
   const removeKeyframe = useCallback(
     (selection: DomEditSelection, animationId: string, percentage: number) => {
       const sourceFile = selection.sourceFile || activeCompPath || "index.html";
       const mutation = { type: "remove-keyframe", animationId, percentage };
-      // Shadow op (gsap_keyframe): SDK has no %-based removeGsapKeyframe on main,
-      // so the runner resolves percentage → keyframeIndex against the pre-op
-      // script and no-ops on ambiguity (duplicate-percentage keyframes).
-      const shadowKeyframeOp: ShadowKeyframeOp = { kind: "remove", animationId, percentage };
       void executeOptimisticKeyframeCacheUpdate({
         sourceFile,
         elementId: selection.id,
         apply: (prev) => ({
           ...prev,
+          // Match the writer's removal tolerance (PCT_TOLERANCE = 2 in
+          // gsapWriterAcorn): removing at e.g. 49% drops a keyframe at 50% on
+          // disk, so the optimistic cache must drop it too — else the stranded
+          // entry is a phantom that vanishes on the next reload (mirror of the
+          // add-path tolerance fix).
           keyframes: prev.keyframes.filter(
-            (kf) => Math.abs((kf.tweenPercentage ?? kf.percentage) - percentage) > 0.2,
+            (kf) => Math.abs((kf.tweenPercentage ?? kf.percentage) - percentage) > 2,
           ),
         }),
-        persist: () =>
-          commitMutation(selection, mutation, {
+        persist: async () => {
+          if (sdkSession && sdkDeps) {
+            const handled = await sdkGsapRemoveKeyframePersist(
+              sourceFile,
+              animationId,
+              percentage,
+              sdkSession,
+              sdkDeps,
+              { label: `Remove keyframe at ${percentage}%` },
+            );
+            if (handled) return;
+          }
+          await commitMutation(selection, mutation, {
             label: `Remove keyframe at ${percentage}%`,
             softReload: true,
-            shadowKeyframeOp,
-          }),
+          });
+        },
       }).catch((error) => {
         trackGsapSaveFailure(error, selection, mutation, `Remove keyframe at ${percentage}%`);
       });
     },
-    [activeCompPath, commitMutation, trackGsapSaveFailure],
+    [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps],
   );
 
   const convertToKeyframes = useCallback(
-    (
+    async (
       selection: DomEditSelection,
       animationId: string,
       resolvedFromValues?: Record<string, number | string>,
     ) => {
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapConvertToKeyframesPersist(
+          targetPath,
+          animationId,
+          resolvedFromValues,
+          sdkSession,
+          sdkDeps,
+          { label: "Convert to keyframes" },
+        );
+        if (handled) return;
+      }
       return commitMutation(
         selection,
         { type: "convert-to-keyframes", animationId, resolvedFromValues },
         { label: "Convert to keyframes" },
       );
     },
-    [commitMutation],
+    [commitMutation, activeCompPath, sdkSession, sdkDeps],
   );
 
   const removeAllKeyframes = useCallback(
-    (selection: DomEditSelection, animationId: string) => {
+    async (selection: DomEditSelection, animationId: string) => {
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapRemoveAllKeyframesPersist(
+          targetPath,
+          animationId,
+          sdkSession,
+          sdkDeps,
+          { label: "Remove all keyframes" },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "remove-all-keyframes", animationId },
         { label: "Remove all keyframes", softReload: true },
       );
     },
-    [commitMutationSafely],
+    [commitMutationSafely, activeCompPath, sdkSession, sdkDeps],
   );
 
   const commitKeyframeAtTime = useCallback(

package/src/hooks/useGsapPropertyDebounce.test.ts

@@ -0,0 +1,70 @@
+// @vitest-environment happy-dom
+import { describe, it, expect } from "vitest";
+import { openComposition } from "@hyperframes/sdk";
+import { createMemoryAdapter } from "@hyperframes/sdk/adapters/memory";
+import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
+import { mergeTweenProperties } from "./useGsapPropertyDebounce";
+import { extractGsapScriptText } from "../utils/gsapSoftReload";
+
+const HTML = `<!DOCTYPE html><html><head></head><body>
+<div id="box" data-hf-id="hf-box" style="opacity:1"></div>
+<script data-hf-gsap>
+const tl = gsap.timeline({ paused: true });
+window.__timelines = { main: tl };
+tl.to('#box', { duration: 1, x: 100, y: 50, opacity: 1 });
+</script>
+</body></html>`;
+
+const FROMTO_HTML = `<!DOCTYPE html><html><head></head><body>
+<div id="box" data-hf-id="hf-box" style="opacity:1"></div>
+<script data-hf-gsap>
+const tl = gsap.timeline({ paused: true });
+window.__timelines = { main: tl };
+tl.fromTo('#box', { x: 0, y: 0 }, { duration: 1, x: 100, y: 50 });
+</script>
+</body></html>`;
+
+function tweenProps(comp: { serialize(): string }) {
+  const parsed = parseGsapScriptAcorn(extractGsapScriptText(comp.serialize()) ?? "");
+  const anim = parsed.animations[0];
+  return { id: anim?.id, properties: anim?.properties, fromProperties: anim?.fromProperties };
+}
+
+describe("setGsapTween replace semantics (finding #1)", () => {
+  it("REGRESSION: a single-key set drops the tween's other animated props", async () => {
+    // This documents the bug the merge fixes: setGsapTween REPLACES the property
+    // set, so sending only the edited key loses the siblings.
+    const comp = await openComposition(HTML, { persist: createMemoryAdapter() });
+    const id = tweenProps(comp).id ?? "";
+    comp.setGsapTween(id, { properties: { x: 200 } });
+    const after = tweenProps(comp);
+    expect(after.properties).toEqual({ x: 200 });
+    expect(after.properties).not.toHaveProperty("y");
+    expect(after.properties).not.toHaveProperty("opacity");
+  });
+});
+
+describe("mergeTweenProperties (finding #1)", () => {
+  it("editing x preserves y and opacity through a real SDK write", async () => {
+    const comp = await openComposition(HTML, { persist: createMemoryAdapter() });
+    const id = tweenProps(comp).id ?? "";
+    // Mirror the send site: merge the single edited prop into the existing set.
+    const merged = mergeTweenProperties(comp, id, { x: 200 }, "to");
+    expect(merged).toEqual({ x: 200, y: 50, opacity: 1 });
+    comp.setGsapTween(id, { properties: merged });
+    const after = tweenProps(comp);
+    expect(after.properties).toMatchObject({ x: 200, y: 50, opacity: 1 });
+  });
+
+  it("editing a from-property preserves the other from-properties", async () => {
+    const comp = await openComposition(FROMTO_HTML, { persist: createMemoryAdapter() });
+    const id = tweenProps(comp).id ?? "";
+    const merged = mergeTweenProperties(comp, id, { x: 25 }, "from");
+    expect(merged).toEqual({ x: 25, y: 0 });
+  });
+
+  it("returns the single edit unchanged when the tween id is unknown", async () => {
+    const comp = await openComposition(HTML, { persist: createMemoryAdapter() });
+    expect(mergeTweenProperties(comp, "no-such-id", { x: 5 }, "to")).toEqual({ x: 5 });
+  });
+});