@hyperframes/studio 0.6.90 → 0.6.92

package/src/components/editor/gsapAnimatesProperty.ts

@@ -1,7 +1,37 @@
+// GSAP's CSSPlugin takes ownership of the element's entire transform stack
+// when it tweens ANY of these — it bakes the CSS `translate` longhand into
+// style.transform at init and writes `translate: none` every tick. Position
+// reapply/strip logic must therefore stand down for all of them, not just x/y.
+const GSAP_TRANSFORM_PROPS = [
+  "x",
+  "y",
+  "xPercent",
+  "yPercent",
+  "scale",
+  "scaleX",
+  "scaleY",
+  "rotation",
+  "rotate",
+  "rotationX",
+  "rotationY",
+  "skewX",
+  "skewY",
+  "transform",
+];
+
+/**
+ * True when GSAP animates any transform-affecting property on the element,
+ * meaning GSAP owns `style.transform` and has neutralized CSS `translate`.
+ */
+export function gsapAnimatesTransform(el: HTMLElement): boolean {
+  return gsapAnimatesProperty(el, ...GSAP_TRANSFORM_PROPS);
+}
+
 /**
  * Checks whether GSAP actively animates one or more CSS/GSAP properties on
  * the given element by inspecting all registered `__timelines`.
  */
+// fallow-ignore-next-line complexity
 export function gsapAnimatesProperty(el: HTMLElement, ...props: string[]): boolean {
   const win = el.ownerDocument.defaultView as
     | (Window & {

package/src/components/editor/manualEditingAvailability.test.ts

@@ -25,6 +25,18 @@ describe("manual editing availability", () => {
     expect(availability.STUDIO_MOTION_PANEL_ENABLED).toBe(false);
   });
 
+  it("disables GSAP drag intercept by default", async () => {
+    const availability = await loadAvailabilityWithEnv({});
+    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(false);
+  });
+
+  it("enables GSAP drag intercept when env var is set", async () => {
+    const availability = await loadAvailabilityWithEnv({
+      VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT: "true",
+    });
+    expect(availability.STUDIO_GSAP_DRAG_INTERCEPT_ENABLED).toBe(true);
+  });
+
   it("disables preview selection when the inspector panel flag is explicitly off", async () => {
     const availability = await loadAvailabilityWithEnv({
       VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",

package/src/components/editor/manualEditingAvailability.ts

@@ -77,6 +77,22 @@ export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_RAZOR_TOOL", "VITE_STUDIO_RAZOR_TOOL_ENABLED"],
+  false,
+);
+
+// When disabled (the default), drag/resize/rotate commits always take the CSS
+// persist path instead of being intercepted into GSAP script keyframe
+// mutations. The keyframe intercept rewrites timeline tweens from drag
+// gestures and is opt-in until its recording path is hardened.
+export const STUDIO_GSAP_DRAG_INTERCEPT_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_GSAP_DRAG_INTERCEPT", "VITE_STUDIO_GSAP_DRAG_INTERCEPT_ENABLED"],
+  true,
+);
+
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
 export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";

package/src/components/editor/manualEditsDom.ts

@@ -277,14 +277,34 @@ export function applyStudioPathOffsetDraft(
 
   const isGsapAnimated = gsapAnimatesProperty(element, "x", "y");
   if (isGsapAnimated) {
-    // For GSAP-animated elements: use gsap.set for positioning (the timeline
-    // is paused during drag). Set translate:none explicitly to prevent
-    // double-counting with the transform.
     element.style.setProperty("translate", "none");
     const win = element.ownerDocument.defaultView as
-      | (Window & { gsap?: { set: (el: Element, vars: Record<string, unknown>) => void } })
+      | (Window & {
+          gsap?: {
+            set: (el: Element, vars: Record<string, unknown>) => void;
+            getProperty: (el: Element, prop: string) => number;
+          };
+        })
       | null;
-    win?.gsap?.set(element, { x: offset.x, y: offset.y });
+    if (win?.gsap) {
+      const baseX = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-x") ?? "");
+      const baseY = Number.parseFloat(element.getAttribute("data-hf-drag-gsap-base-y") ?? "");
+      const origX = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-x") ?? "");
+      const origY = Number.parseFloat(element.getAttribute("data-hf-drag-initial-offset-y") ?? "");
+      const gsapBaseX = Number.isFinite(baseX)
+        ? baseX
+        : (win.gsap.getProperty(element, "x") as number);
+      const gsapBaseY = Number.isFinite(baseY)
+        ? baseY
+        : (win.gsap.getProperty(element, "y") as number);
+      if (!Number.isFinite(baseX))
+        element.setAttribute("data-hf-drag-gsap-base-x", String(gsapBaseX));
+      if (!Number.isFinite(baseY))
+        element.setAttribute("data-hf-drag-gsap-base-y", String(gsapBaseY));
+      const deltaX = offset.x - (Number.isFinite(origX) ? origX : 0);
+      const deltaY = offset.y - (Number.isFinite(origY) ? origY : 0);
+      win.gsap.set(element, { x: gsapBaseX + deltaX, y: gsapBaseY + deltaY });
+    }
   } else {
     // Non-GSAP elements: use CSS translate as before.
     element.style.setProperty(

package/src/components/editor/manualEditsDomPatches.test.ts

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 // @vitest-environment happy-dom
 
 import { describe, it, expect } from "vitest";

package/src/components/editor/manualEditsDomPatches.ts

@@ -72,7 +72,23 @@ function appendTransformDisplayOps(element: HTMLElement, ops: PatchOperation[]):
 
 export function buildPathOffsetPatches(element: HTMLElement): PatchOperation[] {
   const ops: PatchOperation[] = [];
-  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP, "translate"], ops);
+  collectInlineStyleOps(element, [STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP], ops);
+  // When GSAP owns the element's transform, the live inline translate is kept
+  // at "none" (the offset lives in GSAP's cache — see applyStudioPathOffset).
+  // Persist the var() expression in that case, so a reload re-folds the offset.
+  const inlineTranslate = element.style.getPropertyValue("translate");
+  const hasOffsetVars =
+    element.style.getPropertyValue(STUDIO_OFFSET_X_PROP) ||
+    element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
+  const translateValue =
+    inlineTranslate && inlineTranslate !== "none"
+      ? inlineTranslate
+      : hasOffsetVars
+        ? `var(${STUDIO_OFFSET_X_PROP}, 0px) var(${STUDIO_OFFSET_Y_PROP}, 0px)`
+        : null;
+  if (translateValue) {
+    ops.push({ type: "inline-style", property: "translate", value: translateValue });
+  }
   ops.push({ type: "attribute", property: STUDIO_PATH_OFFSET_ATTR, value: "true" });
   collectAttributeOps(
     element,

package/src/components/editor/manualEditsSnapshot.ts

@@ -183,6 +183,22 @@ export function restoreStudioPathOffset(
     STUDIO_ORIGINAL_INLINE_TRANSLATE_ATTR,
     previous.originalInlineTranslate,
   );
+
+  // Restore GSAP x/y if a draft was applied via gsap.set during drag
+  const baseX = element.getAttribute("data-hf-drag-gsap-base-x");
+  const baseY = element.getAttribute("data-hf-drag-gsap-base-y");
+  if (baseX != null || baseY != null) {
+    const win = element.ownerDocument.defaultView as
+      | (Window & { gsap?: { set: (el: Element, vars: Record<string, unknown>) => void } })
+      | null;
+    if (win?.gsap) {
+      const x = Number.parseFloat(baseX ?? "0") || 0;
+      const y = Number.parseFloat(baseY ?? "0") || 0;
+      win.gsap.set(element, { x, y });
+    }
+    element.removeAttribute("data-hf-drag-gsap-base-x");
+    element.removeAttribute("data-hf-drag-gsap-base-y");
+  }
 }
 
 /* ── Clear functions ──────────────────────────────────────────────── */

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -13,6 +13,7 @@ type KeyframeEntry = Array<{
 interface PropertyPanel3dTransformProps {
   gsapRuntimeValues: Record<string, number>;
   gsapAnimId: string | null;
+  resolveAnimIdForProp?: (prop: string) => string | null;
   gsapKeyframes: KeyframeEntry;
   currentPct: number;
   elStart: number;
@@ -31,6 +32,7 @@ interface PropertyPanel3dTransformProps {
 export function PropertyPanel3dTransform({
   gsapRuntimeValues,
   gsapAnimId,
+  resolveAnimIdForProp,
   gsapKeyframes,
   currentPct,
   elStart,
@@ -41,6 +43,7 @@ export function PropertyPanel3dTransform({
   onRemoveKeyframe,
   onConvertToKeyframes,
 }: PropertyPanel3dTransformProps) {
+  const idFor = (prop: string) => resolveAnimIdForProp?.(prop) ?? gsapAnimId;
   return (
     <div className="mt-3 border-t border-neutral-800/40 pt-3">
       <div className="mb-2 text-[10px] font-medium uppercase tracking-wider text-neutral-600">
@@ -72,8 +75,14 @@ export function PropertyPanel3dTransform({
                   void onCommitAnimatedProperty(element, "z", gsapRuntimeValues?.z ?? 0);
                 }
               }}
-              onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
-              onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+              onRemoveKeyframe={(pct) => {
+                const id = idFor("z");
+                if (id) onRemoveKeyframe?.(id, pct);
+              }}
+              onConvertToKeyframes={() => {
+                const id = idFor("z");
+                if (id) onConvertToKeyframes?.(id);
+              }}
             />
           )}
         </div>
@@ -102,8 +111,14 @@ export function PropertyPanel3dTransform({
                   void onCommitAnimatedProperty(element, "scale", gsapRuntimeValues?.scale ?? 1);
                 }
               }}
-              onRemoveKeyframe={(pct) => gsapAnimId && onRemoveKeyframe?.(gsapAnimId, pct)}
-              onConvertToKeyframes={() => gsapAnimId && onConvertToKeyframes?.(gsapAnimId)}
+              onRemoveKeyframe={(pct) => {
+                const id = idFor("scale");
+                if (id) onRemoveKeyframe?.(id, pct);
+              }}
+              onConvertToKeyframes={() => {
+                const id = idFor("scale");
+                if (id) onConvertToKeyframes?.(id);
+              }}
             />
           )}
         </div>

package/src/components/editor/useOffScreenIndicators.ts

@@ -0,0 +1,197 @@
+/**
+ * Detects GSAP-animated elements whose center is outside the visible composition
+ * area and returns edge-clamped indicator positions for each.
+ */
+import { useRef, useState, type RefObject } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
+
+export interface OffScreenIndicator {
+  key: string;
+  elementId: string;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+interface CompRect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  scaleX: number;
+  scaleY: number;
+}
+
+type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
+
+function isHtmlElement(node: unknown): node is HTMLElement {
+  return (
+    typeof node === "object" &&
+    node !== null &&
+    typeof (node as HTMLElement).getBoundingClientRect === "function" &&
+    typeof (node as HTMLElement).tagName === "string"
+  );
+}
+
+function collectGsapTargetElements(iframe: HTMLIFrameElement): HTMLElement[] {
+  const win = iframe.contentWindow as
+    | (Window & { __timelines?: Record<string, TimelineLike> })
+    | null;
+  if (!win) return [];
+
+  let timelines: Record<string, TimelineLike> | undefined;
+  try {
+    timelines = win.__timelines;
+  } catch {
+    return [];
+  }
+  if (!timelines) return [];
+
+  const seen = new Set<HTMLElement>();
+  for (const tl of Object.values(timelines)) {
+    if (!tl?.getChildren) continue;
+    try {
+      for (const child of tl.getChildren(true)) {
+        if (!child.targets) continue;
+        for (const t of child.targets()) {
+          if (isHtmlElement(t)) seen.add(t);
+        }
+      }
+    } catch {
+      // cross-origin or detached timeline — skip
+    }
+  }
+  return Array.from(seen);
+}
+
+function indicatorsEqual(a: OffScreenIndicator[], b: OffScreenIndicator[]): boolean {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    const ai = a[i]!;
+    const bi = b[i]!;
+    if (
+      ai.key !== bi.key ||
+      Math.abs(ai.left - bi.left) > 0.5 ||
+      Math.abs(ai.top - bi.top) > 0.5 ||
+      Math.abs(ai.width - bi.width) > 0.5 ||
+      Math.abs(ai.height - bi.height) > 0.5
+    )
+      return false;
+  }
+  return true;
+}
+
+export function useOffScreenIndicators({
+  iframeRef,
+  overlayRef,
+  compRect,
+}: {
+  iframeRef: RefObject<HTMLIFrameElement | null>;
+  overlayRef: RefObject<HTMLDivElement | null>;
+  compRect: CompRect;
+}): OffScreenIndicator[] {
+  const [indicators, setIndicators] = useState<OffScreenIndicator[]>([]);
+  const prevRef = useRef<OffScreenIndicator[]>([]);
+  const compRectRef = useRef(compRect);
+  compRectRef.current = compRect;
+
+  useMountEffect(() => {
+    let frame = 0;
+
+    const update = () => {
+      frame = requestAnimationFrame(update);
+
+      const iframe = iframeRef.current;
+      const overlayEl = overlayRef.current;
+      const cr = compRectRef.current;
+      if (!iframe || !overlayEl || cr.width <= 0 || cr.height <= 0) {
+        if (prevRef.current.length > 0) {
+          prevRef.current = [];
+          setIndicators([]);
+        }
+        return;
+      }
+
+      const iframeRect = iframe.getBoundingClientRect();
+      const overlayRect = overlayEl.getBoundingClientRect();
+
+      const doc = iframe.contentDocument;
+      const root =
+        doc?.querySelector<HTMLElement>("[data-composition-id]") ?? doc?.documentElement ?? null;
+      if (!root) return;
+
+      const declaredWidth =
+        Number.parseFloat(root.getAttribute("data-width") ?? "") || iframeRect.width;
+      const declaredHeight =
+        Number.parseFloat(root.getAttribute("data-height") ?? "") || iframeRect.height;
+      const rootScaleX = iframeRect.width / declaredWidth;
+      const rootScaleY = iframeRect.height / declaredHeight;
+
+      const targets = collectGsapTargetElements(iframe);
+      if (targets.length === 0) {
+        if (prevRef.current.length > 0) {
+          prevRef.current = [];
+          setIndicators([]);
+        }
+        return;
+      }
+
+      // Composition bounds in overlay coordinates
+      const compLeft = cr.left;
+      const compTop = cr.top;
+      const compRight = compLeft + cr.width;
+      const compBottom = compTop + cr.height;
+
+      const next: OffScreenIndicator[] = [];
+      const keyCounts = new Map<string, number>();
+
+      for (const el of targets) {
+        if (!el.isConnected) continue;
+
+        const elRect = el.getBoundingClientRect();
+        if (elRect.width <= 0 && elRect.height <= 0) continue;
+
+        // Element rect in overlay coordinates
+        const elLeft = iframeRect.left - overlayRect.left + elRect.left * rootScaleX;
+        const elTop = iframeRect.top - overlayRect.top + elRect.top * rootScaleY;
+        const elW = elRect.width * rootScaleX;
+        const elH = elRect.height * rootScaleY;
+
+        // Check if the element is fully inside the composition
+        if (
+          elLeft >= compLeft &&
+          elTop >= compTop &&
+          elLeft + elW <= compRight &&
+          elTop + elH <= compBottom
+        ) {
+          continue;
+        }
+
+        // Only elements with a real id attribute can be selected via getElementById
+        if (!el.id) continue;
+        const count = keyCounts.get(el.id) ?? 0;
+        keyCounts.set(el.id, count + 1);
+        const key = count > 0 ? `${el.id}:${count}` : el.id;
+        next.push({
+          key,
+          elementId: el.id,
+          left: elLeft,
+          top: elTop,
+          width: elW,
+          height: elH,
+        });
+      }
+
+      if (!indicatorsEqual(prevRef.current, next)) {
+        prevRef.current = next;
+        setIndicators(next);
+      }
+    };
+
+    frame = requestAnimationFrame(update);
+    return () => cancelAnimationFrame(frame);
+  });
+
+  return indicators;
+}

package/src/components/nle/NLELayout.tsx

@@ -10,7 +10,7 @@ import {
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useTimelinePlayer, PlayerControls, Timeline, usePlayerStore } from "../../player";
 import type { TimelineElement } from "../../player";
-import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
+import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
 import { NLEPreview } from "./NLEPreview";
 import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
 import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
@@ -20,7 +20,7 @@ import {
   getTimelineToggleTitle,
 } from "../../utils/timelineDiscovery";
 
-interface NLELayoutProps {
+interface NLELayoutProps extends TimelineEditCallbacks {
   projectId: string;
   portrait?: boolean;
   /** Slot for overlays rendered on top of the preview (cursors, highlights, etc.) */
@@ -59,23 +59,7 @@ interface NLELayoutProps {
     blockName: string,
     position: { left: number; top: number },
   ) => Promise<void> | void;
-  /** Persist timeline move actions back into source HTML */
-  onMoveElement?: (
-    element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "track">,
-  ) => Promise<void> | void;
-  onResizeElement?: (
-    element: TimelineElement,
-    updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
-  ) => Promise<void> | void;
-  onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
-  onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onSelectTimelineElement?: (element: TimelineElement | null) => void;
-  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
-  onDeleteAllKeyframes?: (elementId: string) => void;
-  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
-  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
-  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -124,6 +108,8 @@ export const NLELayout = memo(function NLELayout({
   onResizeElement,
   onBlockedEditAttempt,
   onSplitElement,
+  onRazorSplit,
+  onRazorSplitAll,
   onSelectTimelineElement,
   onDeleteKeyframe,
   onDeleteAllKeyframes,
@@ -380,25 +366,27 @@ export const NLELayout = memo(function NLELayout({
       {/* Preview + player controls */}
       <div className="flex-1 min-h-0 flex flex-col">
         <div
-          className="flex-1 min-h-0 relative overflow-hidden"
+          className="flex-1 min-h-0 relative"
           data-preview-pan-surface="true"
           onDragOver={handlePreviewDragOver}
           onDragLeave={handlePreviewDragLeave}
           onDrop={handlePreviewDrop}
         >
-          <NLEPreview
-            projectId={projectId}
-            iframeRef={iframeRef}
-            onIframeLoad={onIframeLoad}
-            onCompositionLoadingChange={setCompositionLoading}
-            portrait={portrait}
-            directUrl={directUrl}
-            suppressLoadingOverlay={hasLoadedOnceRef.current}
-            onStageRef={handleStageRef}
-          />
-          {previewDragOver && (
-            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
-          )}
+          <div className="absolute inset-0 overflow-hidden">
+            <NLEPreview
+              projectId={projectId}
+              iframeRef={iframeRef}
+              onIframeLoad={onIframeLoad}
+              onCompositionLoadingChange={setCompositionLoading}
+              portrait={portrait}
+              directUrl={directUrl}
+              suppressLoadingOverlay={hasLoadedOnceRef.current}
+              onStageRef={handleStageRef}
+            />
+            {previewDragOver && (
+              <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
+            )}
+          </div>
           {!isFullscreen && previewOverlay}
         </div>
         <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">
@@ -460,6 +448,8 @@ export const NLELayout = memo(function NLELayout({
                 onResizeElement={onResizeElement}
                 onBlockedEditAttempt={onBlockedEditAttempt}
                 onSplitElement={onSplitElement}
+                onRazorSplit={onRazorSplit}
+                onRazorSplitAll={onRazorSplitAll}
                 onSelectElement={onSelectTimelineElement}
                 onDeleteKeyframe={onDeleteKeyframe}
                 onDeleteAllKeyframes={onDeleteAllKeyframes}

package/src/components/nle/TimelineEditorNotice.tsx

@@ -1,4 +1,5 @@
 import { TIMELINE_TOGGLE_SHORTCUT_LABEL } from "../../utils/timelineDiscovery";
+import { PlayheadIndicator } from "../../player/components/PlayheadIndicator";
 
 interface TimelineEditorNoticeProps {
   onDismiss: () => void;
@@ -76,31 +77,7 @@ export function TimelineEditorNotice({ onDismiss }: TimelineEditorNoticeProps) {
                     "hfTimelineNoticePlayheadSweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite",
                 }}
               >
-                <div
-                  className="absolute top-0 bottom-0"
-                  style={{
-                    left: "50%",
-                    width: 2,
-                    marginLeft: -1,
-                    background: "var(--hf-accent, #3CE6AC)",
-                    boxShadow: "0 0 8px rgba(60,230,172,0.5)",
-                  }}
-                />
-                <div
-                  className="absolute"
-                  style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}
-                >
-                  <div
-                    style={{
-                      width: 0,
-                      height: 0,
-                      borderLeft: "6px solid transparent",
-                      borderRight: "6px solid transparent",
-                      borderTop: "8px solid var(--hf-accent, #3CE6AC)",
-                      filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
-                    }}
-                  />
-                </div>
+                <PlayheadIndicator />
               </div>
 
               <div className="flex flex-col gap-1.5">

package/src/contexts/DomEditContext.tsx

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { createContext, useContext, useMemo, type ReactNode } from "react";
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 
@@ -60,6 +61,7 @@ export function DomEditProvider({
     handleGsapUpdateProperty,
     handleGsapUpdateMeta,
     handleGsapDeleteAnimation,
+    handleGsapDeleteAllForElement,
     handleGsapAddAnimation,
     handleGsapAddProperty,
     handleGsapRemoveProperty,
@@ -133,6 +135,7 @@ export function DomEditProvider({
       handleGsapUpdateProperty,
       handleGsapUpdateMeta,
       handleGsapDeleteAnimation,
+      handleGsapDeleteAllForElement,
       handleGsapAddAnimation,
       handleGsapAddProperty,
       handleGsapRemoveProperty,
@@ -200,6 +203,7 @@ export function DomEditProvider({
       handleGsapUpdateProperty,
       handleGsapUpdateMeta,
       handleGsapDeleteAnimation,
+      handleGsapDeleteAllForElement,
       handleGsapAddAnimation,
       handleGsapAddProperty,
       handleGsapRemoveProperty,