@hyperframes/studio 0.6.109 → 0.6.111

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 });
+  });
+});

package/src/hooks/useGsapPropertyDebounce.ts

@@ -1,11 +1,56 @@
 import { useCallback, useEffect, useRef } from "react";
+import type { Composition } from "@hyperframes/sdk";
+import { parseGsapScriptAcorn } from "@hyperframes/core/gsap-parser-acorn";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import {
+  sdkGsapTweenPersist,
+  sdkGsapRemovePropertyPersist,
+  type CutoverDeps,
+} from "../utils/sdkCutover";
+import { extractGsapScriptText } from "../utils/gsapSoftReload";
 import { PROPERTY_DEFAULTS } from "./gsapScriptCommitHelpers";
 import type { SafeGsapCommitMutation } from "./gsapScriptCommitTypes";
 
 const DEBOUNCE_MS = 150;
 
-export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMutation) {
+/**
+ * The SDK `setGsapTween` 'set' path REPLACES a tween's editable property set
+ * (engine `handleSetGsapTween` → `updateAnimationInScript`), so sending only the
+ * single edited key would silently drop the tween's other animated props. Mirror
+ * the legacy server path (`{ ...anim.properties, [property]: val }`): read the
+ * tween's CURRENT properties from the in-memory SDK doc and merge the one edit in,
+ * so REPLACE semantics preserve siblings. Returns the single-key map unchanged
+ * when the tween/script can't be found (best-effort; before===after then falls
+ * back to the server path).
+ */
+export function mergeTweenProperties(
+  sdkSession: Composition,
+  animationId: string,
+  edited: Record<string, number | string>,
+  kind: "to" | "from",
+): Record<string, number | string> {
+  try {
+    const script = extractGsapScriptText(sdkSession.serialize());
+    if (!script) return { ...edited };
+    const anim = parseGsapScriptAcorn(script).animations.find((a) => a.id === animationId);
+    if (!anim) return { ...edited };
+    const existing = kind === "from" ? (anim.fromProperties ?? {}) : anim.properties;
+    return { ...existing, ...edited };
+  } catch {
+    return { ...edited };
+  }
+}
+
+interface SdkPropertyDeps {
+  sdkSession?: Composition | null;
+  sdkDeps?: CutoverDeps | null;
+  activeCompPath?: string | null;
+}
+
+export function useGsapPropertyDebounce(
+  commitMutationSafely: SafeGsapCommitMutation,
+  sdk?: SdkPropertyDeps,
+) {
   const pendingPropertyEditRef = useRef<{
     selection: DomEditSelection;
     animationId: string;
@@ -14,11 +59,38 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
   } | null>(null);
   const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const flushPendingPropertyEdit = useCallback(() => {
+  // The caller passes `sdk` as a fresh object literal every render. Keying any
+  // callback's deps on it (esp. flushPendingPropertyEdit, whose identity drives
+  // the unmount-flush cleanup effect) re-fires the cleanup on EVERY parent
+  // re-render — so a playhead tick mid-slider-drag would flush + record an undo
+  // entry per render. Hold the latest value in a ref instead so every callback
+  // reads current deps without re-subscribing on identity churn.
+  const sdkRef = useRef(sdk);
+  sdkRef.current = sdk;
+
+  const flushPendingPropertyEdit = useCallback(async () => {
     const pending = pendingPropertyEditRef.current;
     if (!pending) return;
     pendingPropertyEditRef.current = null;
     const { selection, animationId, property, value } = pending;
+    const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
+    if (sdkSession && sdkDeps) {
+      const targetPath = selection.sourceFile || activeCompPath || "index.html";
+      const handled = await sdkGsapTweenPersist(
+        targetPath,
+        {
+          kind: "set",
+          animationId,
+          properties: {
+            properties: mergeTweenProperties(sdkSession, animationId, { [property]: value }, "to"),
+          },
+        },
+        sdkSession,
+        sdkDeps,
+        { label: `Edit GSAP ${property}`, coalesceKey: `gsap:${animationId}:${property}` },
+      );
+      if (handled) return;
+    }
     commitMutationSafely(
       selection,
       { type: "update-property", animationId, property, value },
@@ -39,7 +111,9 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
     ) => {
       pendingPropertyEditRef.current = { selection, animationId, property, value };
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-      debounceTimerRef.current = setTimeout(flushPendingPropertyEdit, DEBOUNCE_MS);
+      debounceTimerRef.current = setTimeout(() => {
+        void flushPendingPropertyEdit();
+      }, DEBOUNCE_MS);
     },
     [flushPendingPropertyEdit],
   );
@@ -47,12 +121,14 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
   useEffect(() => {
     return () => {
       if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-      flushPendingPropertyEdit();
+      void flushPendingPropertyEdit();
     };
   }, [flushPendingPropertyEdit]);
 
+  // fallow-ignore-next-line complexity
   const addGsapProperty = useCallback(
-    (selection: DomEditSelection, animationId: string, property: string) => {
+    // fallow-ignore-next-line complexity
+    async (selection: DomEditSelection, animationId: string, property: string) => {
       let defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
       const el = selection.element;
       if (property === "width" || property === "height") {
@@ -60,7 +136,33 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
         defaultValue = Math.round(property === "width" ? rect.width : rect.height);
       } else if (property === "opacity" || property === "autoAlpha") {
         const cs = el.ownerDocument.defaultView?.getComputedStyle(el);
-        defaultValue = cs ? Number.parseFloat(cs.opacity) || 1 : 1;
+        // Use `|| 1` only as a non-finite fallback, not a falsy fallback: an
+        // element currently at opacity 0 must seed 0, not 1.
+        const current = cs ? Number.parseFloat(cs.opacity) : Number.NaN;
+        defaultValue = Number.isFinite(current) ? current : 1;
+      }
+      const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          {
+            kind: "set",
+            animationId,
+            properties: {
+              properties: mergeTweenProperties(
+                sdkSession,
+                animationId,
+                { [property]: defaultValue },
+                "to",
+              ),
+            },
+          },
+          sdkSession,
+          sdkDeps,
+          { label: `Add GSAP ${property}` },
+        );
+        if (handled) return;
       }
       commitMutationSafely(
         selection,
@@ -71,24 +173,82 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
     [commitMutationSafely],
   );
 
-  const removeGsapProperty = useCallback(
-    (selection: DomEditSelection, animationId: string, property: string) => {
-      commitMutationSafely(
-        selection,
-        { type: "remove-property", animationId, property },
-        { label: `Remove GSAP ${property}` },
-      );
+  const removeProperty = useCallback(
+    async (selection: DomEditSelection, animationId: string, property: string, from: boolean) => {
+      const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapRemovePropertyPersist(
+          targetPath,
+          animationId,
+          property,
+          from,
+          sdkSession,
+          sdkDeps,
+          { label: `Remove GSAP ${from ? `from-${property}` : property}` },
+        );
+        if (handled) return;
+      }
+      if (from) {
+        commitMutationSafely(
+          selection,
+          { type: "remove-from-property", animationId, property },
+          {
+            label: `Remove GSAP from-${property}`,
+          },
+        );
+      } else {
+        commitMutationSafely(
+          selection,
+          { type: "remove-property", animationId, property },
+          {
+            label: `Remove GSAP ${property}`,
+          },
+        );
+      }
     },
     [commitMutationSafely],
   );
 
+  const removeGsapProperty = useCallback(
+    (selection: DomEditSelection, animationId: string, property: string) =>
+      removeProperty(selection, animationId, property, false),
+    [removeProperty],
+  );
+
   const updateGsapFromProperty = useCallback(
-    (
+    async (
       selection: DomEditSelection,
       animationId: string,
       property: string,
       value: number | string,
     ) => {
+      const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          {
+            kind: "set",
+            animationId,
+            properties: {
+              fromProperties: mergeTweenProperties(
+                sdkSession,
+                animationId,
+                { [property]: value },
+                "from",
+              ),
+            },
+          },
+          sdkSession,
+          sdkDeps,
+          {
+            label: `Edit GSAP from-${property}`,
+            coalesceKey: `gsap:${animationId}:from:${property}`,
+          },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "update-from-property", animationId, property, value },
@@ -102,8 +262,31 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
   );
 
   const addGsapFromProperty = useCallback(
-    (selection: DomEditSelection, animationId: string, property: string) => {
+    async (selection: DomEditSelection, animationId: string, property: string) => {
       const defaultValue = PROPERTY_DEFAULTS[property] ?? 0;
+      const { sdkSession, sdkDeps, activeCompPath } = sdkRef.current ?? {};
+      if (sdkSession && sdkDeps) {
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
+        const handled = await sdkGsapTweenPersist(
+          targetPath,
+          {
+            kind: "set",
+            animationId,
+            properties: {
+              fromProperties: mergeTweenProperties(
+                sdkSession,
+                animationId,
+                { [property]: defaultValue },
+                "from",
+              ),
+            },
+          },
+          sdkSession,
+          sdkDeps,
+          { label: `Add GSAP from-${property}` },
+        );
+        if (handled) return;
+      }
       commitMutationSafely(
         selection,
         { type: "add-from-property", animationId, property, defaultValue },
@@ -114,14 +297,9 @@ export function useGsapPropertyDebounce(commitMutationSafely: SafeGsapCommitMuta
   );
 
   const removeGsapFromProperty = useCallback(
-    (selection: DomEditSelection, animationId: string, property: string) => {
-      commitMutationSafely(
-        selection,
-        { type: "remove-from-property", animationId, property },
-        { label: `Remove GSAP from-${property}` },
-      );
-    },
-    [commitMutationSafely],
+    (selection: DomEditSelection, animationId: string, property: string) =>
+      removeProperty(selection, animationId, property, true),
+    [removeProperty],
   );
 
   return {