@hyperframes/studio 0.7.18 → 0.7.20

package/src/components/editor/keyframeRetime.ts

@@ -0,0 +1,121 @@
+/**
+ * Pure move-vs-resize decision + absolute-time remap for keyframe drag-to-retime.
+ *
+ * Keyframes live inside the ANIMATION's window (tween position + duration), which
+ * is usually shorter than the clip. Dragging a keyframe is one of:
+ *   - MOVE: the drop stays within `[tweenStart, tweenEnd]` → re-key the tween-%.
+ *   - RESIZE: the drop crosses the tween boundary (the LAST keyframe past the end,
+ *     or the FIRST before the start, but still inside the clip — the gesture layer
+ *     already clamped to neighbours + clip). The tween's window grows so the
+ *     dragged keyframe lands exactly where dropped; every OTHER keyframe keeps its
+ *     ABSOLUTE time (its tween-% remaps onto the new, longer window). Value + ease
+ *     are preserved per keyframe.
+ *
+ * Kept pure (no React/store/GSAP) so the trickiest math is unit-testable. The
+ * caller supplies the resolved tween window + the drop's absolute time.
+ */
+
+export interface RetimeKeyframe {
+  /** Tween-relative percentage (the writer/runtime key on this). */
+  percentage: number;
+  properties: Record<string, number | string>;
+  ease?: string;
+}
+
+/** One existing keyframe's old→new tween-% under a resize remap. */
+export interface KeyframePctRemap {
+  /** The existing keyframe's current tween-relative %. */
+  from: number;
+  /** Its new tween-relative % on the resized window. */
+  to: number;
+}
+
+export interface KeyframeRetimeResult {
+  kind: "noop" | "move" | "resize";
+  /** MOVE: tween-relative drop position. */
+  toTweenPct?: number;
+  /** RESIZE: new tween position (absolute seconds). */
+  position?: number;
+  /** RESIZE: new tween duration (seconds). */
+  duration?: number;
+  /**
+   * RESIZE: each existing keyframe's old→new tween-%. The commit re-keys each
+   * keyframe IN PLACE (round-tripping its value node), so `_auto`, per-keyframe
+   * `ease`, `easeEach`, and the outer tween `ease` all survive — unlike rebuilding
+   * a fresh keyframes array.
+   */
+  pctRemap?: KeyframePctRemap[];
+}
+
+/** Below this (tween-%) a move resolves onto the source keyframe → skip the write. */
+const NOOP_EPSILON_PCT = 0.1;
+/** Slack (seconds) for the within-tween boundary test. */
+const EPSILON_TIME = 1e-4;
+
+const round3 = (n: number) => Math.round(n * 1000) / 1000;
+const round1 = (n: number) => Math.round(n * 10) / 10; // 0.1% precision
+const clamp = (n: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, n));
+
+/**
+ * Decide move vs resize for a dragged keyframe and, for resize, return the new
+ * tween window + remapped keyframes.
+ *
+ * - `keyframes`: the tween's keyframes (tween-relative %, with value + ease).
+ * - `draggedTweenPct`: identifies which keyframe is being dragged (closest match).
+ * - `tweenStart` / `tweenDuration`: the tween's resolved absolute window.
+ * - `dropAbsTime`: the drop's absolute time (handler converts clip-% → seconds).
+ */
+export function resolveKeyframeRetime(opts: {
+  keyframes: ReadonlyArray<RetimeKeyframe>;
+  draggedTweenPct: number;
+  tweenStart: number;
+  tweenDuration: number;
+  dropAbsTime: number;
+}): KeyframeRetimeResult {
+  const { keyframes, draggedTweenPct, tweenStart, tweenDuration, dropAbsTime } = opts;
+  if (tweenDuration <= 0) return { kind: "noop" };
+  const tweenEnd = tweenStart + tweenDuration;
+
+  // Within the tween window → plain move (re-key the tween-%). This branch never
+  // touches the keyframes array, so it still works for synthesized flat tweens.
+  if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
+    const toTweenPct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
+    if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
+    return { kind: "move", toTweenPct };
+  }
+
+  // Boundary resize needs the real keyframes to remap; a flat tween has none here.
+  if (keyframes.length === 0) return { kind: "noop" };
+
+  const newStart = Math.min(dropAbsTime, tweenStart);
+  const newEnd = Math.max(dropAbsTime, tweenEnd);
+  const newDuration = Math.max(0.01, newEnd - newStart);
+
+  // The dragged keyframe is the one whose tween-% is closest to draggedTweenPct.
+  let draggedIdx = 0;
+  let best = Infinity;
+  keyframes.forEach((kf, i) => {
+    const d = Math.abs(kf.percentage - draggedTweenPct);
+    if (d < best) {
+      best = d;
+      draggedIdx = i;
+    }
+  });
+
+  // Map each existing keyframe to its new tween-% on the grown window, preserving
+  // its absolute time (the dragged one lands at the drop). Carry only the old→new
+  // percentages; the commit re-keys in place so value + ease + _auto + easeEach
+  // survive verbatim (no rebuilt keyframes array).
+  const pctRemap: KeyframePctRemap[] = keyframes.map((kf, i) => {
+    const absTime =
+      i === draggedIdx ? dropAbsTime : tweenStart + (kf.percentage / 100) * tweenDuration;
+    return { from: kf.percentage, to: round1(((absTime - newStart) / newDuration) * 100) };
+  });
+
+  return {
+    kind: "resize",
+    position: round3(newStart),
+    duration: round3(newDuration),
+    pctRemap,
+  };
+}

package/src/contexts/DomEditContext.tsx

@@ -54,6 +54,9 @@ export interface DomEditActionsValue extends Pick<
   | "handleGsapAddKeyframe"
   | "handleGsapAddKeyframeBatch"
   | "handleGsapRemoveKeyframe"
+  | "handleGsapMoveKeyframeToPlayhead"
+  | "handleGsapMoveKeyframe"
+  | "handleGsapResizeKeyframedTween"
   | "handleGsapConvertToKeyframes"
   | "handleGsapRemoveAllKeyframes"
   | "handleResetSelectedElementKeyframes"
@@ -169,6 +172,9 @@ export function DomEditProvider({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
@@ -247,6 +253,9 @@ export function DomEditProvider({
       handleGsapAddKeyframe,
       handleGsapAddKeyframeBatch,
       handleGsapRemoveKeyframe,
+      handleGsapMoveKeyframeToPlayhead,
+      handleGsapMoveKeyframe,
+      handleGsapResizeKeyframedTween,
       handleGsapConvertToKeyframes,
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
@@ -311,6 +320,9 @@ export function DomEditProvider({
       handleGsapAddKeyframe,
       handleGsapAddKeyframeBatch,
       handleGsapRemoveKeyframe,
+      handleGsapMoveKeyframeToPlayhead,
+      handleGsapMoveKeyframe,
+      handleGsapResizeKeyframedTween,
       handleGsapConvertToKeyframes,
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,

package/src/contexts/TimelineEditContext.tsx

@@ -39,6 +39,8 @@ export function TimelineEditProvider({
       value.onDeleteKeyframe,
       value.onDeleteAllKeyframes,
       value.onChangeKeyframeEase,
+      value.onMoveKeyframeToPlayhead,
+      value.onMoveKeyframe,
       value.onToggleKeyframeAtPlayhead,
     ],
   );

package/src/hooks/gsapDragCommit.ts

@@ -156,6 +156,33 @@ function findPositionSetAnimation(
   );
 }
 
+/**
+ * Find the EXISTING static position HOLD to update for a static-hold drag. Not
+ * just a `set`: a degenerate `tl.to("#el",{duration:0,x,y})` (what
+ * remove-all-keyframes leaves behind) is a held position too, and the next drag
+ * must UPDATE it in place rather than append a second `gsap.set` that fights it
+ * (the duplicate-position-write bug). Only zero-duration holds qualify — a
+ * live-duration `to`/`from` is NOT a static hold (and in the static path it's a
+ * stale/phantom parse: re-committing it would resurrect a just-deleted tween).
+ * Prefers a `set` (the canonical static channel) when both forms exist.
+ */
+function findExistingPositionWrite(
+  animations: GsapAnimation[],
+  selector: string,
+): GsapAnimation | null {
+  const set = findPositionSetAnimation(animations, selector);
+  if (set) return set;
+  return (
+    animations.find(
+      (a) =>
+        a.targetSelector === selector &&
+        a.propertyGroup === "position" &&
+        !a.keyframes &&
+        (a.duration ?? 0) === 0,
+    ) ?? null
+  );
+}
+
 /**
  * Commit a STATIC element drag as a `tl.set("#el",{x,y})` — the single-source
  * position channel for elements with no position animation. Idempotent: a
@@ -235,7 +262,7 @@ export async function commitStaticGsapPosition(
   );
 }
 
-export { findPositionSetAnimation };
+export { findExistingPositionWrite };
 
 function findRotationSetAnimation(
   animations: GsapAnimation[],

package/src/hooks/gsapPositionDetection.ts

@@ -0,0 +1,98 @@
+/**
+ * GSAP position-write detection helpers for the drag bridge: read the live
+ * runtime position from the preview iframe, and find/score the position
+ * animation for a selector (and pick the tween closest to the playhead).
+ *
+ * Extracted from gsapRuntimeBridge.ts to keep that file under the size cap.
+ */
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { usePlayerStore } from "../player/store/playerStore";
+import { getIframeGsap, queryIframeElement } from "./gsapShared";
+import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
+
+// fallow-ignore-next-line complexity
+export function readGsapPositionFromIframe(
+  iframe: HTMLIFrameElement | null,
+  elementSelector: string,
+): { x: number; y: number } | null {
+  const gsap = getIframeGsap(iframe);
+  if (!gsap) return null;
+
+  const element = queryIframeElement(iframe, elementSelector);
+  if (!element) return null;
+
+  const x = Number(gsap.getProperty(element, "x")) || 0;
+  const y = Number(gsap.getProperty(element, "y")) || 0;
+  return { x, y };
+}
+
+// fallow-ignore-next-line complexity
+function animHasPosition(anim: GsapAnimation): boolean {
+  if (anim.keyframes?.keyframes.some((kf) => "x" in kf.properties || "y" in kf.properties))
+    return true;
+  if (anim.method === "fromTo") {
+    const from = anim.fromProperties;
+    return (
+      "x" in anim.properties || "y" in anim.properties || !!(from && ("x" in from || "y" in from))
+    );
+  }
+  return "x" in anim.properties || "y" in anim.properties;
+}
+
+// fallow-ignore-next-line complexity
+export function findGsapPositionAnimation(
+  animations: GsapAnimation[],
+  selector?: string,
+): GsapAnimation | null {
+  if (animations.length === 0) return null;
+  const currentTime = usePlayerStore.getState().currentTime;
+
+  const scored = animations
+    .filter((a) => animHasPosition(a) || a.keyframes || animations.length === 1)
+    .map((a) => {
+      let score = 0;
+      if (animHasPosition(a)) score += 10;
+      if (a.keyframes) score += 5;
+      if (selector && a.targetSelector === selector) score += 8;
+      else if (a.targetSelector.includes(",")) score -= 5;
+      const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+      const dur = a.duration ?? 0;
+      if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 50;
+      else
+        score -= Math.round(
+          Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5,
+        );
+      return { anim: a, score };
+    });
+  scored.sort((a, b) => b.score - a.score);
+  return scored[0]?.anim ?? animations[0];
+}
+
+/**
+ * From a set of candidate tweens, pick the one whose time range is closest to
+ * the current playhead. A tween that *contains* the playhead wins outright;
+ * otherwise the nearest endpoint wins. This ensures a drag at t=6s edits (or
+ * extends) the 4s tween, not the 1.5s one. Tie-break: most keyframes (so a
+ * gesture-recorded tween beats a stub when both are equidistant).
+ */
+// fallow-ignore-next-line complexity
+export function pickClosestToPlayhead(anims: GsapAnimation[]): GsapAnimation | null {
+  if (anims.length <= 1) return anims[0] ?? null;
+  const ct = usePlayerStore.getState().currentTime;
+  return anims.reduce((best, a) => {
+    const s = resolveTweenStart(a) ?? 0;
+    const e = s + resolveTweenDuration(a);
+    const dist = ct >= s && ct <= e ? 0 : Math.min(Math.abs(ct - s), Math.abs(ct - e));
+    const bestS = resolveTweenStart(best) ?? 0;
+    const bestE = bestS + resolveTweenDuration(best);
+    const bestDist =
+      ct >= bestS && ct <= bestE ? 0 : Math.min(Math.abs(ct - bestS), Math.abs(ct - bestE));
+    if (dist < bestDist) return a;
+    if (
+      dist === bestDist &&
+      (a.keyframes?.keyframes.length ?? 0) > (best.keyframes?.keyframes.length ?? 0)
+    )
+      return a;
+    return best;
+  });
+}

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -127,6 +127,39 @@ describe("tryGsapDragIntercept — stale-parse guard (no resurrection after dele
     });
   });
 
+  it("updates a degenerate duration:0 hold-`to` in place instead of appending a gsap.set", async () => {
+    const commitMutation = vi.fn();
+    const iframe = fakeIframe("puck-b", []); // runtime empty → STATIC path
+    // What remove-all-keyframes leaves behind: a zero-duration immediateRender
+    // `tl.to` hold. A drag must UPDATE it, not append a 2nd (gsap.set) position
+    // write that silently overrides it (the duplicate-position-write bug).
+    const degenerateHold = {
+      id: "#puck-b-to-0-position",
+      targetSelector: "#puck-b",
+      method: "to",
+      propertyGroup: "position",
+      properties: { x: -766, y: 314 },
+      position: 1.333,
+      resolvedStart: 1.333,
+      duration: 0,
+    } as unknown as GsapAnimation;
+
+    const handled = await tryGsapDragIntercept(
+      selection,
+      { x: -50, y: 30 },
+      [degenerateHold],
+      iframe,
+      commitMutation,
+    );
+
+    expect(handled).toBe(true);
+    // In-place update (2 coalesced update-property), NOT an `add`/`add-keyframe`.
+    const types = commitMutation.mock.calls.map(([, m]) => m.type);
+    expect(types.every((t: string) => t === "update-property")).toBe(true);
+    expect(types).not.toContain("add");
+    expect(types).not.toContain("add-keyframe");
+  });
+
   it("does not trip the stale-parse guard when the runtime still has the tween", async () => {
     const logSpy = vi.spyOn(console, "log").mockImplementation(() => {});
     const liveTween = {

package/src/hooks/gsapRuntimeBridge.ts

@@ -21,110 +21,24 @@ import {
   commitKeyframedSizeFromResize,
   commitWholePathOffset,
   computeCurrentPercentage,
-  findPositionSetAnimation,
+  findExistingPositionWrite,
   findRotationSetAnimation,
   findSizeSetAnimation,
   materializeIfDynamic,
 } from "./gsapDragCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
-import { getIframeGsap, queryIframeElement, selectorFromSelection } from "./gsapShared";
+import { selectorFromSelection } from "./gsapShared";
+import {
+  findGsapPositionAnimation,
+  pickClosestToPlayhead,
+  readGsapPositionFromIframe,
+} from "./gsapPositionDetection";
 import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
 import { roundTo3 } from "../utils/rounding";
 
-// ── Runtime reads ──────────────────────────────────────────────────────────
-
-// fallow-ignore-next-line complexity
-function readGsapPositionFromIframe(
-  iframe: HTMLIFrameElement | null,
-  elementSelector: string,
-): { x: number; y: number } | null {
-  const gsap = getIframeGsap(iframe);
-  if (!gsap) return null;
-
-  const element = queryIframeElement(iframe, elementSelector);
-  if (!element) return null;
-
-  const x = Number(gsap.getProperty(element, "x")) || 0;
-  const y = Number(gsap.getProperty(element, "y")) || 0;
-  return { x, y };
-}
-
-// ── Animation matching ─────────────────────────────────────────────────────
-
-// fallow-ignore-next-line complexity
-function animHasPosition(anim: GsapAnimation): boolean {
-  if (anim.keyframes?.keyframes.some((kf) => "x" in kf.properties || "y" in kf.properties))
-    return true;
-  if (anim.method === "fromTo") {
-    const from = anim.fromProperties;
-    return (
-      "x" in anim.properties || "y" in anim.properties || !!(from && ("x" in from || "y" in from))
-    );
-  }
-  return "x" in anim.properties || "y" in anim.properties;
-}
-
-function findGsapPositionAnimation(
-  animations: GsapAnimation[],
-  selector?: string,
-): GsapAnimation | null {
-  if (animations.length === 0) return null;
-  const currentTime = usePlayerStore.getState().currentTime;
-
-  const scored = animations
-    .filter((a) => animHasPosition(a) || a.keyframes || animations.length === 1)
-    .map((a) => {
-      let score = 0;
-      if (animHasPosition(a)) score += 10;
-      if (a.keyframes) score += 5;
-      if (selector && a.targetSelector === selector) score += 8;
-      else if (a.targetSelector.includes(",")) score -= 5;
-      const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
-      const dur = a.duration ?? 0;
-      if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 50;
-      else
-        score -= Math.round(
-          Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5,
-        );
-      return { anim: a, score };
-    });
-  scored.sort((a, b) => b.score - a.score);
-  return scored[0]?.anim ?? animations[0];
-}
-
-// ── Selector resolution ────────────────────────────────────────────────────
-
 // ── Property-group tween resolution ───────────────────────────────────────
 
-/**
- * From a set of candidate tweens, pick the one whose time range is closest to
- * the current playhead. A tween that *contains* the playhead wins outright;
- * otherwise the nearest endpoint wins. This ensures a drag at t=6s edits (or
- * extends) the 4s tween, not the 1.5s one. Tie-break: most keyframes (so a
- * gesture-recorded tween beats a stub when both are equidistant).
- */
-function pickClosestToPlayhead(anims: GsapAnimation[]): GsapAnimation | null {
-  if (anims.length <= 1) return anims[0] ?? null;
-  const ct = usePlayerStore.getState().currentTime;
-  return anims.reduce((best, a) => {
-    const s = resolveTweenStart(a) ?? 0;
-    const e = s + resolveTweenDuration(a);
-    const dist = ct >= s && ct <= e ? 0 : Math.min(Math.abs(ct - s), Math.abs(ct - e));
-    const bestS = resolveTweenStart(best) ?? 0;
-    const bestE = bestS + resolveTweenDuration(best);
-    const bestDist =
-      ct >= bestS && ct <= bestE ? 0 : Math.min(Math.abs(ct - bestS), Math.abs(ct - bestE));
-    if (dist < bestDist) return a;
-    if (
-      dist === bestDist &&
-      (a.keyframes?.keyframes.length ?? 0) > (best.keyframes?.keyframes.length ?? 0)
-    )
-      return a;
-    return best;
-  });
-}
-
 /**
  * Find the tween for a given property group, splitting a legacy mixed tween
  * if necessary. Returns the resolved animation or null if none exists.
@@ -212,18 +126,48 @@ export async function tryGsapDragIntercept(
     return false;
   }
 
+  // Self-heal: enforce a single position write BEFORE committing. A corrupted
+  // file can carry 2+ conflicting position writes for one selector (e.g. a
+  // degenerate `tl.to(...,{duration:0,x,y})` AND a `gsap.set(...,{x,y})`) — the
+  // later one silently overrides the earlier, so the element "can't move". Keep
+  // the live keyframed/real tween if present (else any), strip the rest, so the
+  // commit below updates ONE write instead of fighting duplicates.
+  let workingAnimations = animations;
+  const isPosWrite = (a: GsapAnimation) =>
+    a.targetSelector === selector && a.propertyGroup === "position";
+  if (animations.filter(isPosWrite).length > 1 && fetchFallbackAnimations) {
+    const fresh = await fetchFallbackAnimations();
+    const dupes = fresh.filter(isPosWrite);
+    if (dupes.length > 1) {
+      const keeper =
+        dupes.find((a) => a.keyframes) ?? dupes.find((a) => (a.duration ?? 0) > 0) ?? dupes[0]!;
+      await commitMutation(
+        selection,
+        {
+          type: "consolidate-position-writes",
+          targetSelector: selector,
+          keepAnimationId: keeper.id,
+        },
+        { label: "Consolidate position writes", skipReload: true },
+      );
+      workingAnimations = await fetchFallbackAnimations();
+    } else {
+      workingAnimations = fresh;
+    }
+  }
+
   const resolved = await resolveGroupTween(
     "position",
-    animations,
+    workingAnimations,
     selection,
     commitMutation,
     fetchFallbackAnimations,
   );
 
   let posAnim = resolved?.anim ?? null;
-  let resolvedAnimations = resolved?.animations ?? animations;
+  let resolvedAnimations = resolved?.animations ?? workingAnimations;
   if (!posAnim) {
-    posAnim = findGsapPositionAnimation(animations, selector);
+    posAnim = findGsapPositionAnimation(workingAnimations, selector);
     if (!posAnim && fetchFallbackAnimations) {
       const fresh = await fetchFallbackAnimations();
       resolvedAnimations = fresh;
@@ -253,7 +197,7 @@ export async function tryGsapDragIntercept(
     const existingSet =
       posAnim && posAnim.method === "set" && posAnim.targetSelector === selector
         ? posAnim
-        : findPositionSetAnimation(resolvedAnimations, selector);
+        : findExistingPositionWrite(resolvedAnimations, selector);
     await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
       commitMutation,
       fetchAnimations: fetchFallbackAnimations,

package/src/hooks/useDomEditSession.ts

@@ -201,6 +201,8 @@ export function useDomEditSession({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     setArcPath,
@@ -356,6 +358,9 @@ export function useDomEditSession({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
@@ -393,6 +398,8 @@ export function useDomEditSession({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     handleDomManualEditsReset,
@@ -553,6 +560,9 @@ export function useDomEditSession({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,

package/src/hooks/useDomEditWiring.ts

@@ -87,6 +87,19 @@ export interface UseDomEditWiringParams {
     properties: Record<string, number | string>,
   ) => Promise<void>;
   removeKeyframe: (sel: DomEditSelection, animId: string, percentage: number) => void;
+  moveKeyframe: (
+    sel: DomEditSelection,
+    animId: string,
+    fromPercentage: number,
+    toPercentage: number,
+  ) => void;
+  resizeKeyframedTween: (
+    sel: DomEditSelection,
+    animId: string,
+    position: number,
+    duration: number,
+    pctRemap: Array<{ from: number; to: number }>,
+  ) => void;
   convertToKeyframes: (
     sel: DomEditSelection,
     animId: string,
@@ -131,6 +144,8 @@ export function useDomEditWiring({
   addKeyframe,
   addKeyframeBatch,
   removeKeyframe,
+  moveKeyframe,
+  resizeKeyframedTween,
   convertToKeyframes,
   removeAllKeyframes,
   handleDomManualEditsReset,
@@ -224,6 +239,8 @@ export function useDomEditWiring({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     handleDomManualEditsReset,