@hyperframes/studio 0.8.113 → 0.8.114

package/src/hooks/gsapRuntimeReaders.test.ts

@@ -1,5 +1,6 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
+import { gsap } from "gsap";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import {
   COLOR_GRADING_SOURCE_HIDDEN_ATTR,
@@ -109,3 +110,50 @@ describe("color-grading opacity truth", () => {
     expect(readGsapProperty(iframe, "#clip", "opacity")).toBe(0.3);
   });
 });
+
+describe("readAllAnimatedProperties with a sibling tween", () => {
+  it("leaves a sibling tween's rotation to that tween after an opacity keyframe edit", () => {
+    const el = document.createElement("div");
+    el.id = "clip";
+    document.body.appendChild(el);
+    const build = (keyframes: Record<string, Record<string, number>>) => {
+      const tl = gsap.timeline({ paused: true });
+      tl.to(el, { duration: 4, ease: "none", keyframes }, 0);
+      tl.to(el, { rotation: 90, duration: 3 }, 0);
+      return tl;
+    };
+    const live = build({ "0%": { opacity: 0 }, "100%": { opacity: 1 } });
+    live.seek(2);
+    const iframe = {
+      contentWindow: { __timelines: { main: live }, gsap },
+      contentDocument: document,
+    } as unknown as HTMLIFrameElement;
+    const anim = {
+      id: "#clip-to-0-visual",
+      targetSelector: "#clip",
+      method: "to",
+      properties: {},
+      keyframes: {
+        keyframes: [
+          { percentage: 0, properties: { opacity: 0 } },
+          { percentage: 100, properties: { opacity: 1 } },
+        ],
+      },
+    } as unknown as GsapAnimation;
+
+    // commitKeyframeProps: these values plus the edit at the playhead, and backfilled into the rest.
+    const read = readAllAnimatedProperties(iframe, "#clip", anim);
+    live.kill();
+    gsap.set(el, { clearProps: "all" });
+    const edited = build({
+      "0%": { ...read, opacity: 0 },
+      "50%": { ...read, opacity: 0.3 },
+      "100%": { ...read, opacity: 1 },
+    });
+    edited.seek(3.2);
+    edited.seek(3.5);
+
+    expect(gsap.getProperty(el, "rotation")).toBe(90);
+    edited.kill();
+  });
+});

package/src/hooks/gsapRuntimeReaders.ts

@@ -8,6 +8,7 @@ import {
   HF_COLOR_GRADING_CANVAS_ID_PREFIX,
 } from "@hyperframes/core/color-grading";
 import { getIframeGsap, queryIframeElement, type IframeGsap } from "./gsapShared";
+import { gsapWritesChannels } from "./gsapRuntimeKeyframes";
 import { roundTo3 } from "../utils/rounding";
 
 /**
@@ -50,27 +51,6 @@ export function readGsapProperty(
 }
 
 export const POSITION_PROPS = new Set(["x", "y", "xPercent", "yPercent"]);
-const GSAP_CONFIG_KEYS = new Set([
-  "duration",
-  "ease",
-  "delay",
-  "stagger",
-  "id",
-  "onComplete",
-  "onUpdate",
-  "onStart",
-  "onRepeat",
-  "repeat",
-  "yoyo",
-  "repeatDelay",
-  "paused",
-  "immediateRender",
-  "lazy",
-  "overwrite",
-  "keyframes",
-  "parent",
-]);
-
 export function readAllAnimatedProperties(
   iframe: HTMLIFrameElement | null,
   selector: string,
@@ -115,74 +95,7 @@ export function readAllAnimatedProperties(
     }
   }
 
-  const otherTweenProps = new Set<string>();
-  try {
-    const win = iframe.contentWindow as unknown as { __timelines?: Record<string, unknown> };
-    const timelines = win.__timelines;
-    if (timelines) {
-      for (const tl of Object.values(timelines)) {
-        const tlObj = tl as {
-          getChildren?: (
-            deep: boolean,
-          ) => Array<{ targets?: () => Element[]; vars?: Record<string, unknown> }>;
-        };
-        if (!tlObj?.getChildren) continue;
-        for (const child of tlObj.getChildren(true)) {
-          if (typeof child.targets !== "function") continue;
-          const targets = child.targets();
-          if (!targets.includes(el)) continue;
-          const vars = child.vars;
-          if (!vars) continue;
-          for (const k of Object.keys(vars)) {
-            if (!GSAP_CONFIG_KEYS.has(k) && inGroup(k)) otherTweenProps.add(k);
-          }
-        }
-      }
-    }
-  } catch {}
-  for (const p of groupedPropKeys) otherTweenProps.delete(p);
-
-  // Tier 1: Transform + visual properties with universal CSS defaults.
-  // Safe to compare against hardcoded values — these are always 0 or 1
-  // regardless of the element's stylesheet.
-  const UNIVERSAL_BASELINE: Record<string, number> = {
-    opacity: 1,
-    scale: 1,
-    scaleX: 1,
-    scaleY: 1,
-    scaleZ: 1,
-    rotation: 0,
-    rotationX: 0,
-    rotationY: 0,
-    skewX: 0,
-    skewY: 0,
-    z: 0,
-    xPercent: 0,
-    yPercent: 0,
-    transformPerspective: 0,
-    blur: 0,
-    brightness: 1,
-    contrast: 1,
-    saturate: 1,
-    hueRotate: 0,
-    grayscale: 0,
-    sepia: 0,
-    invert: 0,
-  };
-  // Collect all properties that ANY tween on this element explicitly targets.
-  // Only capture baseline values for these — GSAP reports non-default values
-  // (scaleZ=0, brightness=0) for untouched properties, polluting keyframes.
-  const allTweenedProps = new Set([...groupedPropKeys, ...otherTweenProps]);
-  for (const [prop, defaultVal] of Object.entries(UNIVERSAL_BASELINE)) {
-    if (prop in result) continue;
-    if (!allTweenedProps.has(prop)) continue;
-    const val = readLiveGsapValue(gsap, el, prop);
-    if (Number.isFinite(val) && Math.round(val * 1000) !== Math.round(defaultVal * 1000)) {
-      result[prop] = roundTo3(val);
-    }
-  }
-
-  // Tier 2: Element-dependent properties — their "default" depends on the
+  // Element-dependent properties — their "default" depends on the
   // stylesheet, so we compare GSAP's runtime value against the element's
   // computed CSS value. Only capture if GSAP has actively changed it.
   const COMPUTED_BASELINE = [
@@ -209,7 +122,7 @@ export function readAllAnimatedProperties(
   for (const prop of COMPUTED_BASELINE) {
     if (prop in result) continue;
     if (!inGroup(prop)) continue;
-    if (otherTweenProps.has(prop)) continue;
+    if (gsapWritesChannels(el, [prop])) continue;
     const gsapVal = Number(gsap.getProperty(el, prop));
     if (!Number.isFinite(gsapVal)) continue;
     let cssVal = NaN;

package/src/hooks/useAppHotkeys.ts

@@ -15,6 +15,7 @@ import {
   type EditHistoryHandle,
   type UseEditHistoryActionsOptions,
 } from "./useEditHistoryActions";
+import { useStableHandlers } from "./useStableHandlers";
 
 function iframeContentWindow(iframe: HTMLIFrameElement | null): Window | null {
   try {
@@ -72,6 +73,7 @@ function tryApplyBeatHistory(
 // ── Types ──
 
 interface UseAppHotkeysParams {
+  projectId?: string | null;
   handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
   handleLinkEdit?: LinkShortcutCallbacks["handleLinkEdit"];
   handleTimelineElementDeleteOnly?: LinkShortcutCallbacks["handleTimelineElementDeleteOnly"];
@@ -117,6 +119,7 @@ interface UseAppHotkeysParams {
 // ── Hook ──
 
 export function useAppHotkeys({
+  projectId,
   handleTimelineElementsDelete,
   handleLinkEdit,
   handleTimelineElementDeleteOnly,
@@ -266,9 +269,12 @@ export function useAppHotkeys({
     [],
   );
 
-  return {
-    handleUndo,
-    handleRedo,
-    syncPreviewHotkeys,
-  };
+  return useStableHandlers(
+    {
+      handleUndo,
+      handleRedo,
+      syncPreviewHotkeys,
+    },
+    projectId,
+  );
 }

package/src/hooks/useFrameCapture.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef, type MouseEvent } from "react";
+import { useMemo, useState, useCallback, useRef, type MouseEvent } from "react";
 import { useMountEffect } from "./useMountEffect";
 import { liveTime, usePlayerStore } from "../player";
 import { buildFrameCaptureFilename, buildFrameCaptureUrl } from "../utils/frameCapture";
@@ -34,8 +34,10 @@ export function useFrameCapture({
     return isPlaying ? livePlayheadRef.current : currentTime;
   }, []);
 
+  const [captureStamp, setCaptureStamp] = useState(Date.now);
   const refreshCaptureFrameTime = useCallback(() => {
     setCaptureFrameTime(playheadTime());
+    setCaptureStamp(Date.now());
   }, [playheadTime]);
 
   const handleCaptureFrameClick = useCallback(
@@ -103,13 +105,18 @@ export function useFrameCapture({
     [activeCompPath, playheadTime, projectId, showToast, waitForPendingDomEditSaves],
   );
 
-  const captureFrameHref = projectId
-    ? buildFrameCaptureUrl({
-        projectId,
-        compositionPath: activeCompPath,
-        currentTime: captureFrameTime,
-      })
-    : "#";
+  const captureFrameHref = useMemo(
+    () =>
+      projectId
+        ? buildFrameCaptureUrl({
+            projectId,
+            compositionPath: activeCompPath,
+            currentTime: captureFrameTime,
+            version: captureStamp,
+          })
+        : "#",
+    [projectId, activeCompPath, captureFrameTime, captureStamp],
+  );
   const captureFrameFilename = buildFrameCaptureFilename(activeCompPath, captureFrameTime);
 
   return {

package/src/hooks/useGestureCommit.ts

@@ -14,6 +14,7 @@ import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 import { roundTo3 } from "../utils/rounding";
 import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 import { isInstantHold, idSelector, writeTargetSelector, tweenTargetsElement } from "./gsapShared";
+import { useStableHandlers } from "./useStableHandlers";
 
 type RecordedKeyframe = {
   percentage: number;
@@ -83,6 +84,7 @@ function reloadOnlyLast(index: number, count: number): Partial<CommitMutationOpt
 let gestureRecordingCommitCounter = 0;
 
 interface UseGestureCommitParams {
+  projectId?: string | null;
   domEditSessionRef: React.MutableRefObject<GestureSessionRef>;
   previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
   showToast: (message: string, tone?: "error" | "info") => void;
@@ -98,6 +100,7 @@ export interface UseGestureCommitResult {
 
 // fallow-ignore-next-line complexity
 export function useGestureCommit({
+  projectId,
   domEditSessionRef,
   previewIframeRef,
   showToast,
@@ -401,5 +404,5 @@ export function useGestureCommit({
     readOnlyPreview,
   ]);
 
-  return { gestureState, gestureRecording, handleToggleRecording };
+  return useStableHandlers({ gestureState, gestureRecording, handleToggleRecording }, projectId);
 }

package/src/hooks/useGestureTrailOverlay.tsx

@@ -0,0 +1,33 @@
+import { useLayoutEffect, useRef } from "react";
+import { GestureTrailOverlay } from "../components/editor/GestureTrailOverlay";
+import type { UseGestureCommitResult } from "./useGestureCommit";
+
+/** The live gesture trail drawn over the preview while a gesture is recording, or nothing. */
+export function useGestureTrailOverlay(
+  {
+    gestureState,
+    gestureRecording,
+  }: Pick<UseGestureCommitResult, "gestureState" | "gestureRecording">,
+  previewIframe: HTMLIFrameElement | null,
+  compositionSize: { width: number; height: number } | null,
+) {
+  const canvasRectRef = useRef<DOMRect | null>(null);
+  useLayoutEffect(() => {
+    if (gestureState !== "recording" || !previewIframe) {
+      canvasRectRef.current = null;
+      return;
+    }
+    canvasRectRef.current = previewIframe.getBoundingClientRect();
+  }, [gestureState, previewIframe]);
+  if (gestureState !== "recording" || !previewIframe) return undefined;
+  return (
+    <GestureTrailOverlay
+      samples={gestureRecording.samplesRef.current}
+      sampleCount={gestureRecording.samplesRef.current.length}
+      trail={gestureRecording.trailRef.current}
+      canvasRect={canvasRectRef.current!}
+      compositionSize={compositionSize ?? undefined}
+      mode="recording"
+    />
+  );
+}

package/src/hooks/usePanelLayout.ts

@@ -3,6 +3,7 @@ import type { RightPanelTab } from "../utils/studioHelpers";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { useDockLayoutStore, visiblePanelInZone } from "../components/dock/dockLayoutStore";
 import { PANEL_DEFINITIONS, type PanelId } from "../components/dock/panelRegistry";
+import { useStableHandlers } from "./useStableHandlers";
 
 export interface InitialPanelLayoutState {
   rightCollapsed?: boolean | null;
@@ -66,5 +67,8 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     store.setZoneVisible("right", !collapsed);
   }, []);
 
-  return { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab };
+  return useStableHandlers(
+    { rightCollapsed, setRightCollapsed, rightPanelTab, setRightPanelTab },
+    null,
+  );
 }

package/src/hooks/useShellSlices.ts

@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import type { EnableKeyframesSession } from "./useEnableKeyframes";
+
+interface HistoryFlags {
+  canUndo: boolean;
+  canRedo: boolean;
+  undoLabel: string | undefined;
+  redoLabel: string | undefined;
+}
+
+/** The four history fields the shell context carries, as one object that changes only when they do. */
+export function useHistoryFlags({ canUndo, canRedo, undoLabel, redoLabel }: HistoryFlags) {
+  return useMemo(
+    () => ({ canUndo, canRedo, undoLabel, redoLabel }),
+    [canUndo, canRedo, undoLabel, redoLabel],
+  );
+}
+
+/** The session fields the timeline toolbar reads, so a hover or any other session change leaves it alone. */
+export function useToolbarSession(session: EnableKeyframesSession): EnableKeyframesSession {
+  const {
+    domEditSelection,
+    selectedGsapAnimations,
+    previewIframeRef,
+    commitMutation,
+    handleGsapAddAnimation,
+    handleGsapAddKeyframeBatch,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveKeyframe,
+  } = session;
+  return useMemo(
+    () => ({
+      domEditSelection,
+      selectedGsapAnimations,
+      previewIframeRef,
+      commitMutation,
+      handleGsapAddAnimation,
+      handleGsapAddKeyframeBatch,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveKeyframe,
+    }),
+    [
+      domEditSelection,
+      selectedGsapAnimations,
+      previewIframeRef,
+      commitMutation,
+      handleGsapAddAnimation,
+      handleGsapAddKeyframeBatch,
+      handleGsapConvertToKeyframes,
+      handleGsapRemoveKeyframe,
+    ],
+  );
+}

package/src/hooks/useStableHandlers.test.tsx

@@ -0,0 +1,77 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { useStableHandlers } from "./useStableHandlers";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+interface Result {
+  count: number;
+  read: () => number;
+}
+
+let root: Root | null = null;
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+});
+
+function renderStable(seen: Result[]) {
+  function Probe({ count, base }: { count: number; base: number }) {
+    seen.push(useStableHandlers({ count, read: () => base }, "project"));
+    return null;
+  }
+  root = createRoot(document.createElement("div"));
+  return (count: number, base: number) =>
+    act(() => root!.render(<Probe count={count} base={base} />));
+}
+
+describe("useStableHandlers", () => {
+  it("keeps the object while only its handlers change, and the handler calls the latest one", () => {
+    const seen: Result[] = [];
+    const render = renderStable(seen);
+    render(1, 10);
+    render(1, 20);
+    expect(seen[1]).toBe(seen[0]);
+    expect(seen[1]!.read()).toBe(20);
+  });
+
+  it("gives a new object when a data field changes, with the same handler identity", () => {
+    const seen: Result[] = [];
+    const render = renderStable(seen);
+    render(1, 10);
+    render(2, 10);
+    expect(seen[1]).not.toBe(seen[0]);
+    expect(seen[1]!.count).toBe(2);
+    expect(seen[1]!.read).toBe(seen[0]!.read);
+  });
+
+  it("keeps a wrapper from an earlier scope calling that scope's handler", () => {
+    const seen: { write: () => string }[] = [];
+    function Scoped({ project }: { project: string }) {
+      seen.push(useStableHandlers({ write: () => project }, project));
+      return null;
+    }
+    root = createRoot(document.createElement("div"));
+    act(() => root!.render(<Scoped project="a" />));
+    const kept = seen[0]!.write;
+    act(() => root!.render(<Scoped project="b" />));
+    expect(kept()).toBe("a");
+    expect(seen[1]!.write).not.toBe(kept);
+    expect(seen[1]!.write()).toBe("b");
+  });
+
+  it("gives a new object when a key is swapped for another with the same value", () => {
+    const seen: Record<string, unknown>[] = [];
+    function Keys({ name }: { name: string }) {
+      seen.push(useStableHandlers({ [name]: undefined }, "project"));
+      return null;
+    }
+    root = createRoot(document.createElement("div"));
+    act(() => root!.render(<Keys name="old" />));
+    act(() => root!.render(<Keys name="fresh" />));
+    expect(Object.keys(seen[1]!)).toEqual(["fresh"]);
+  });
+});

package/src/hooks/useStableHandlers.ts

@@ -0,0 +1,44 @@
+import { useRef } from "react";
+
+type Handler = (...args: never[]) => unknown;
+type Epoch = {
+  scope: unknown;
+  latest: object;
+  wrappers: Map<string, Handler>;
+  previous: object | null;
+};
+
+// The same object while its non-function fields are unchanged, and one identity per function field calling the
+// latest one; a new `scope` (the project) starts new identities, and a wrapper kept from before calls its own scope's.
+export function useStableHandlers<T extends object>(value: T, scope: unknown): T {
+  const epoch = useRef<Epoch | null>(null);
+  if (!epoch.current || !Object.is(epoch.current.scope, scope))
+    epoch.current = { scope, latest: value, wrappers: new Map(), previous: null };
+  const current = epoch.current;
+  current.latest = value;
+
+  const next: Record<string, unknown> = {};
+  for (const [key, field] of Object.entries(value)) {
+    if (typeof field !== "function") {
+      next[key] = field;
+      continue;
+    }
+    let wrapper = current.wrappers.get(key);
+    if (!wrapper) {
+      wrapper = (...args: never[]) =>
+        (current.latest as Record<string, (...a: never[]) => unknown>)[key]!(...args);
+      current.wrappers.set(key, wrapper);
+    }
+    next[key] = wrapper;
+  }
+  const prev = current.previous as Record<string, unknown> | null;
+  const keys = Object.keys(next);
+  if (
+    prev &&
+    keys.length === Object.keys(prev).length &&
+    keys.every((k) => k in prev && prev[k] === next[k])
+  )
+    return prev as T;
+  current.previous = next;
+  return next as T;
+}

package/src/hooks/useStudioSdkSessions.ts

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useSdkSession } from "./useSdkSession";
 import { usePreviewVariablesStore } from "./previewVariablesStore";
+import { useStableHandlers } from "./useStableHandlers";
 
 /**
  * Open the studio's SDK session with master-view semantics.
@@ -37,5 +38,5 @@ export function useStudioSdkSessions(
   useEffect(() => {
     usePreviewVariablesStore.getState().setValues(null);
   }, [projectId, activeCompPath]);
-  return { sdkHandle, editFlowSdkSession };
+  return { sdkHandle: useStableHandlers(sdkHandle, projectId), editFlowSdkSession };
 }

package/src/hooks/useStudioSidePanels.test.tsx

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+
+import React, { act, type ComponentProps } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { StudioLeftPanels } from "../components/StudioLeftPanels";
+import type { StudioRightPanels } from "../components/StudioRightPanels";
+import { useStudioSidePanels } from "./useStudioSidePanels";
+
+const rightProps = vi.hoisted(() => [] as { recordEdit: (project: string) => string }[]);
+vi.mock("../components/StudioLeftPanels", () => ({ StudioLeftPanels: () => null }));
+vi.mock("../components/StudioRightPanels", () => ({
+  StudioRightPanels: (props: { recordEdit: (project: string) => string }) => {
+    rightProps.push(props);
+    return null;
+  },
+}));
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  rightProps.length = 0;
+});
+
+function Panels({ project }: { project: string }) {
+  const right = { recordEdit: () => project } as unknown as ComponentProps<
+    typeof StudioRightPanels
+  >;
+  return useStudioSidePanels({} as ComponentProps<typeof StudioLeftPanels>, right, project);
+}
+
+describe("useStudioSidePanels", () => {
+  it("keeps a panel handler from one project calling that project after a switch", () => {
+    root = createRoot(document.createElement("div"));
+    act(() => root!.render(<Panels project="a" />));
+    const kept = rightProps.at(-1)!.recordEdit;
+    act(() => root!.render(<Panels project="b" />));
+    expect(kept("")).toBe("a");
+    expect(rightProps.at(-1)!.recordEdit("")).toBe("b");
+  });
+});

package/src/hooks/useStudioSidePanels.tsx

@@ -0,0 +1,23 @@
+import { useMemo, type ComponentProps } from "react";
+import { StudioLeftPanels } from "../components/StudioLeftPanels";
+import { StudioRightPanels } from "../components/StudioRightPanels";
+import { useStableHandlers } from "./useStableHandlers";
+
+/** Both side panels as one element that changes only when a panel's data does, never for a new handler. */
+export function useStudioSidePanels(
+  left: ComponentProps<typeof StudioLeftPanels>,
+  right: ComponentProps<typeof StudioRightPanels>,
+  projectId: string | null,
+) {
+  const stableLeft = useStableHandlers(left, projectId);
+  const stableRight = useStableHandlers(right, projectId);
+  return useMemo(
+    () => (
+      <>
+        <StudioLeftPanels {...stableLeft} />
+        <StudioRightPanels {...stableRight} />
+      </>
+    ),
+    [stableLeft, stableRight],
+  );
+}

package/src/hooks/useTimelineAddAtPlayhead.ts

@@ -1,15 +1,23 @@
 import { useCallback } from "react";
 import { usePlayerStore } from "../player";
+import { useStableHandlers } from "./useStableHandlers";
 
 type AddAtPlacement = (path: string, placement: { start: number; track: number }) => unknown;
 
-export function useTimelineAddAtPlayhead(addAsset: AddAtPlacement, addComposition: AddAtPlacement) {
+export function useTimelineAddAtPlayhead(
+  addAsset: AddAtPlacement,
+  addComposition: AddAtPlacement,
+  projectId: string | null,
+) {
   const placement = () => ({ start: usePlayerStore.getState().currentTime, track: 0 });
-  return {
-    addAssetAtPlayhead: useCallback((path: string) => addAsset(path, placement()), [addAsset]),
-    addCompositionAtPlayhead: useCallback(
-      (path: string) => addComposition(path, placement()),
-      [addComposition],
-    ),
-  };
+  return useStableHandlers(
+    {
+      addAssetAtPlayhead: useCallback((path: string) => addAsset(path, placement()), [addAsset]),
+      addCompositionAtPlayhead: useCallback(
+        (path: string) => addComposition(path, placement()),
+        [addComposition],
+      ),
+    },
+    projectId,
+  );
 }