@hyperframes/studio 0.7.7 → 0.7.9

package/src/components/editor/transform3dProjection.ts

@@ -0,0 +1,172 @@
+/**
+ * Pure cube projection for the 3D-transform widget. Given an element's
+ * rotationX/Y/Z (degrees), project a unit cube to 2D SVG polygons with
+ * back-face culling and painter's-order sorting — no DOM, no React, so it
+ * unit-tests in isolation. Used by Transform3DCube to draw a live preview of
+ * the element's orientation.
+ */
+
+export interface Vec3 {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface ProjectedFace {
+  /** Stable face id (front/back/left/right/top/bottom) for keying + theming. */
+  id: string;
+  /** SVG polygon points: "x,y x,y x,y x,y". */
+  points: string;
+  /** 0..1 brightness from how front-facing the rotated normal is (lighting cue). */
+  shade: number;
+  /** Mean depth of the face's corners; larger = nearer the viewer. */
+  depth: number;
+}
+
+const DEG = Math.PI / 180;
+
+/** Rotate a point intrinsically by X, then Y, then Z (degrees). */
+export function rotate(v: Vec3, rx: number, ry: number, rz: number): Vec3 {
+  let { x, y, z } = v;
+  const cx = Math.cos(rx * DEG);
+  const sx = Math.sin(rx * DEG);
+  [y, z] = [y * cx - z * sx, y * sx + z * cx];
+  const cy = Math.cos(ry * DEG);
+  const sy = Math.sin(ry * DEG);
+  [x, z] = [x * cy + z * sy, -x * sy + z * cy];
+  const cz = Math.cos(rz * DEG);
+  const sz = Math.sin(rz * DEG);
+  [x, y] = [x * cz - y * sz, x * sz + y * cz];
+  return { x, y, z };
+}
+
+// Unit-cube corners (±1) — 0-3 back face (z=-1), 4-7 front face (z=1).
+const CORNERS: Vec3[] = [
+  { x: -1, y: -1, z: -1 },
+  { x: 1, y: -1, z: -1 },
+  { x: 1, y: 1, z: -1 },
+  { x: -1, y: 1, z: -1 },
+  { x: -1, y: -1, z: 1 },
+  { x: 1, y: -1, z: 1 },
+  { x: 1, y: 1, z: 1 },
+  { x: -1, y: 1, z: 1 },
+];
+
+const FACES: { id: string; idx: [number, number, number, number]; normal: Vec3 }[] = [
+  { id: "front", idx: [4, 5, 6, 7], normal: { x: 0, y: 0, z: 1 } },
+  { id: "back", idx: [1, 0, 3, 2], normal: { x: 0, y: 0, z: -1 } },
+  { id: "left", idx: [0, 4, 7, 3], normal: { x: -1, y: 0, z: 0 } },
+  { id: "right", idx: [5, 1, 2, 6], normal: { x: 1, y: 0, z: 0 } },
+  // y=+1 corners project to screen-top (SVG y is flipped), so that face is "top".
+  { id: "top", idx: [7, 6, 2, 3], normal: { x: 0, y: 1, z: 0 } },
+  { id: "bottom", idx: [4, 5, 1, 0], normal: { x: 0, y: -1, z: 0 } },
+];
+
+export interface ProjectOpts {
+  /** Center of the SVG viewport. */
+  cx: number;
+  cy: number;
+  /** Half-extent of the cube in SVG units (drawn cube ≈ 2·r before perspective). */
+  r: number;
+  /** Weak-perspective strength in units of `r` (larger = flatter; ~3-6 reads as 3D). */
+  persp?: number;
+}
+
+function round(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+// Directional light (upper-front-right), normalized — drives per-face shading so
+// top/front/side read as distinct planes instead of one flat fill.
+const LIGHT = (() => {
+  const v = { x: 0.32, y: 0.56, z: 0.76 };
+  const m = Math.hypot(v.x, v.y, v.z);
+  return { x: v.x / m, y: v.y / m, z: v.z / m };
+})();
+
+/**
+ * Project the cube at the given orientation. Returns only the front-facing
+ * faces (≤3), painter-sorted far→near so the SVG draws nearer faces on top.
+ * Screen Y is flipped (SVG y grows downward). `shade` is a 0..1 lambert term
+ * from {@link LIGHT} for clean directional face tones.
+ */
+export function projectCubeFaces(
+  rx: number,
+  ry: number,
+  rz: number,
+  opts: ProjectOpts,
+): ProjectedFace[] {
+  const { cx, cy, r } = opts;
+  const persp = opts.persp ?? 4;
+  const view = (v: Vec3) => rotate(v, rx, ry, rz);
+  const rotated = CORNERS.map(view);
+  const faces: ProjectedFace[] = [];
+  for (const f of FACES) {
+    const n = view(f.normal);
+    if (n.z <= 1e-6) continue; // back-face cull: normal must point toward viewer
+    const corners = f.idx.map((i) => rotated[i]!);
+    const depth = corners.reduce((s, p) => s + p.z, 0) / 4;
+    const points = corners
+      .map((p) => {
+        // Weak perspective: nearer corners (higher z) project slightly larger.
+        const s = persp / (persp - p.z);
+        return `${round(cx + p.x * r * s)},${round(cy - p.y * r * s)}`;
+      })
+      .join(" ");
+    const lum = Math.max(0, n.x * LIGHT.x + n.y * LIGHT.y + n.z * LIGHT.z);
+    faces.push({ id: f.id, points, shade: 0.3 + lum * 0.7, depth });
+  }
+  faces.sort((a, b) => a.depth - b.depth);
+  return faces;
+}
+
+export interface ProjectedAxis {
+  id: "x" | "y" | "z";
+  /** Axis color (standard X=red, Y=green, Z=blue). */
+  color: string;
+  /** Tip position in SVG coords. */
+  x2: number;
+  y2: number;
+  /** Whether the tip points toward the viewer (drawn in front of the cube). */
+  front: boolean;
+}
+
+const AXES: { id: "x" | "y" | "z"; dir: Vec3; color: string }[] = [
+  { id: "x", dir: { x: 1, y: 0, z: 0 }, color: "#ff6b81" },
+  { id: "y", dir: { x: 0, y: 1, z: 0 }, color: "#5ff08a" },
+  { id: "z", dir: { x: 0, y: 0, z: 1 }, color: "#62b6ff" },
+];
+
+/**
+ * Project the 3 orientation axes (from the cube center) for an X/Y/Z gizmo.
+ * Orthographic — thin lines don't need perspective. `front` lets the caller draw
+ * away-facing axes behind the cube and toward-facing axes on top.
+ */
+export function projectAxes(
+  rx: number,
+  ry: number,
+  rz: number,
+  opts: ProjectOpts,
+): ProjectedAxis[] {
+  const { cx, cy, r } = opts;
+  const len = r * 1.5;
+  const view = (v: Vec3) => rotate(v, rx, ry, rz);
+  return AXES.map((a) => {
+    const p = view(a.dir);
+    return {
+      id: a.id,
+      color: a.color,
+      x2: round(cx + p.x * len),
+      y2: round(cy - p.y * len),
+      front: p.z >= -1e-6,
+    };
+  });
+}
+
+/** Wrap an angle to (-180, 180] so drag accumulation never runs away. */
+export function wrapDeg(deg: number): number {
+  let d = deg % 360;
+  if (d > 180) d -= 360;
+  if (d <= -180) d += 360;
+  return d;
+}

package/src/components/sidebar/AssetsTab.tsx

@@ -3,17 +3,17 @@ import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
 import { MEDIA_EXT, IMAGE_EXT, VIDEO_EXT, FONT_EXT } from "../../utils/mediaTypes";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
 import { copyTextToClipboard } from "../../utils/clipboard";
-import { ContextMenu, DeleteConfirm } from "./AssetContextMenu";
+import { ContextMenu } from "./AssetContextMenu";
 import { usePlayerStore } from "../../player/store/playerStore";
 import {
   type MediaCategory,
   getCategory,
-  getAudioSubtype,
   basename,
   ext,
   CATEGORY_LABELS,
   FILTER_ORDER,
 } from "./assetHelpers";
+import { AudioRow } from "./AudioRow";
 
 interface AssetsTabProps {
   projectId: string;
@@ -23,215 +23,7 @@ interface AssetsTabProps {
   onRename?: (oldPath: string, newPath: string) => void;
 }
 
-function AudioRow({
-  projectId,
-  asset,
-  used,
-  meta,
-  onCopy,
-  isCopied,
-  onDelete,
-  onRename,
-}: {
-  projectId: string;
-  asset: string;
-  used: boolean;
-  meta?: { description?: string; duration?: number };
-  onCopy: (path: string) => void;
-  isCopied: boolean;
-  onDelete?: (path: string) => void;
-  onRename?: (oldPath: string, newPath: string) => void;
-}) {
-  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [playing, setPlaying] = useState(false);
-  const [bars, setBars] = useState<number[]>([]);
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const actxRef = useRef<AudioContext | null>(null);
-  const analyserRef = useRef<AnalyserNode | null>(null);
-  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
-  const animRef = useRef<number>(0);
-  const name = basename(asset);
-  const subtype = getAudioSubtype(asset);
-  const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
-
-  useEffect(() => {
-    return () => {
-      cancelAnimationFrame(animRef.current);
-      audioRef.current?.pause();
-      actxRef.current?.close();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (playing) {
-      const barCount = 24;
-      const loop = () => {
-        const analyser = analyserRef.current;
-        if (!analyser) {
-          animRef.current = requestAnimationFrame(loop);
-          return;
-        }
-        const data = new Uint8Array(analyser.frequencyBinCount);
-        analyser.getByteFrequencyData(data);
-        const step = Math.floor(data.length / barCount);
-        const next: number[] = [];
-        for (let i = 0; i < barCount; i++) {
-          let sum = 0;
-          for (let j = 0; j < step; j++) sum += data[i * step + j];
-          next.push(sum / step / 255);
-        }
-        setBars(next);
-        if (audioRef.current && !audioRef.current.paused)
-          animRef.current = requestAnimationFrame(loop);
-      };
-      animRef.current = requestAnimationFrame(loop);
-    } else {
-      setBars([]);
-    }
-    return () => cancelAnimationFrame(animRef.current);
-  }, [playing]);
-
-  const togglePlay = useCallback(async () => {
-    if (playing) {
-      audioRef.current?.pause();
-      setPlaying(false);
-      cancelAnimationFrame(animRef.current);
-      return;
-    }
-
-    if (!actxRef.current) {
-      actxRef.current = new AudioContext();
-      analyserRef.current = actxRef.current.createAnalyser();
-      analyserRef.current.fftSize = 256;
-      analyserRef.current.smoothingTimeConstant = 0.7;
-    }
-
-    if (!audioRef.current) {
-      const el = new Audio();
-      el.onended = () => {
-        setPlaying(false);
-        cancelAnimationFrame(animRef.current);
-      };
-      audioRef.current = el;
-      sourceRef.current = actxRef.current.createMediaElementSource(el);
-      sourceRef.current.connect(analyserRef.current!);
-      analyserRef.current!.connect(actxRef.current.destination);
-      el.src = serveUrl;
-    }
-
-    if (actxRef.current.state === "suspended") await actxRef.current.resume();
-    audioRef.current.currentTime = 0;
-    await audioRef.current.play();
-    setPlaying(true);
-  }, [serveUrl, playing]);
-
-  return (
-    <>
-      <div
-        draggable
-        onClick={() => onCopy(asset)}
-        onDragStart={(e) => {
-          e.dataTransfer.effectAllowed = "copy";
-          e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
-          e.dataTransfer.setData("text/plain", asset);
-        }}
-        onContextMenu={(e) => {
-          e.preventDefault();
-          setContextMenu({ x: e.clientX, y: e.clientY });
-        }}
-        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-all cursor-pointer ${
-          playing
-            ? "bg-panel-accent/[0.06]"
-            : isCopied
-              ? "bg-panel-accent/10"
-              : "hover:bg-panel-surface-hover"
-        }`}
-      >
-        <button
-          className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center transition-all ${
-            playing
-              ? "bg-panel-accent/15 text-panel-accent"
-              : "text-panel-text-5 group-hover:text-panel-text-3"
-          }`}
-          onClick={(e) => {
-            e.stopPropagation();
-            togglePlay();
-          }}
-        >
-          {playing ? (
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-              <rect x="6" y="4" width="4" height="16" rx="1" />
-              <rect x="14" y="4" width="4" height="16" rx="1" />
-            </svg>
-          ) : (
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
-              <polygon points="6,4 20,12 6,20" />
-            </svg>
-          )}
-        </button>
-        <div className="min-w-0 flex-1">
-          <div className="flex items-center gap-1.5">
-            <span
-              className={`text-[12px] font-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
-            >
-              {name}
-            </span>
-            {!playing && (
-              <span className="text-[11px] text-panel-text-5 flex-shrink-0">
-                {meta?.duration ? `${meta.duration}s · ` : ""}
-                {subtype}
-              </span>
-            )}
-            {used && (
-              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded flex-shrink-0">
-                in use
-              </span>
-            )}
-          </div>
-          {bars.length > 0 && (
-            <div className="flex items-end gap-[2px] h-[14px] mt-0.5">
-              {bars.map((v, i) => (
-                <div
-                  key={i}
-                  className="flex-1 rounded-[1px]"
-                  style={{
-                    height: `${Math.max(10, v * 100)}%`,
-                    background: `linear-gradient(to top, rgba(60, 230, 172, ${0.3 + v * 0.5}), rgba(60, 230, 172, ${0.5 + v * 0.5}))`,
-                    transition: "height 80ms ease-out",
-                  }}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-
-      {contextMenu && (
-        <ContextMenu
-          x={contextMenu.x}
-          y={contextMenu.y}
-          asset={asset}
-          onClose={() => setContextMenu(null)}
-          onCopy={onCopy}
-          onDelete={onDelete}
-          onRename={onRename}
-        />
-      )}
-      {confirmDelete && (
-        <DeleteConfirm
-          name={name}
-          onConfirm={() => {
-            onDelete?.(asset);
-            setConfirmDelete(false);
-          }}
-          onCancel={() => setConfirmDelete(false)}
-        />
-      )}
-    </>
-  );
-}
-
+// fallow-ignore-next-line complexity
 function ImageCard({
   projectId,
   asset,
@@ -396,10 +188,25 @@ export const AssetsTab = memo(function AssetsTab({
     Map<string, { description?: string; duration?: number; width?: number; height?: number }>
   >(new Map());
 
+  // Projects whose media manifest 404'd — most don't have one. Cache the miss so
+  // we don't re-fetch (and spam the console) on every re-render; the effect was
+  // also keyed on the `assets` array reference, which changes each render, so it
+  // re-fired constantly. Key on a stable join + skip known-missing manifests.
+  const manifest404Ref = useRef<Set<string>>(new Set());
+  const assetsKey = assets.join("|");
   useEffect(() => {
+    if (manifest404Ref.current.has(projectId)) return;
+    let cancelled = false;
     fetch(`/api/projects/${projectId}/preview/.media/manifest.jsonl`)
-      .then((r) => (r.ok ? r.text() : ""))
+      .then((r) => {
+        if (!r.ok) {
+          manifest404Ref.current.add(projectId);
+          return "";
+        }
+        return r.text();
+      })
       .then((text) => {
+        if (cancelled || !text) return;
         const m = new Map<
           string,
           { description?: string; duration?: number; width?: number; height?: number }
@@ -416,7 +223,10 @@ export const AssetsTab = memo(function AssetsTab({
         setManifest(m);
       })
       .catch(() => {});
-  }, [projectId, assets]);
+    return () => {
+      cancelled = true;
+    };
+  }, [projectId, assetsKey]);
 
   const handleDrop = useCallback(
     (e: React.DragEvent) => {

package/src/components/sidebar/AudioRow.tsx

@@ -0,0 +1,202 @@
+import { useState, useRef, useEffect, useCallback } from "react";
+import { ContextMenu } from "./AssetContextMenu";
+import { basename, getAudioSubtype } from "./assetHelpers";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+
+export function AudioRow({
+  projectId,
+  asset,
+  used,
+  meta,
+  onCopy,
+  isCopied,
+  onDelete,
+  onRename,
+}: {
+  projectId: string;
+  asset: string;
+  used: boolean;
+  meta?: { description?: string; duration?: number };
+  onCopy: (path: string) => void;
+  isCopied: boolean;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+}) {
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const [playing, setPlaying] = useState(false);
+  const [bars, setBars] = useState<number[]>([]);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const actxRef = useRef<AudioContext | null>(null);
+  const analyserRef = useRef<AnalyserNode | null>(null);
+  const sourceRef = useRef<MediaElementAudioSourceNode | null>(null);
+  const animRef = useRef<number>(0);
+  const name = basename(asset);
+  const subtype = getAudioSubtype(asset);
+  const serveUrl = `/api/projects/${projectId}/preview/${asset}`;
+
+  useEffect(() => {
+    return () => {
+      cancelAnimationFrame(animRef.current);
+      audioRef.current?.pause();
+      actxRef.current?.close();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (playing) {
+      const barCount = 24;
+      const loop = () => {
+        const analyser = analyserRef.current;
+        if (!analyser) {
+          animRef.current = requestAnimationFrame(loop);
+          return;
+        }
+        const data = new Uint8Array(analyser.frequencyBinCount);
+        analyser.getByteFrequencyData(data);
+        const step = Math.floor(data.length / barCount);
+        const next: number[] = [];
+        for (let i = 0; i < barCount; i++) {
+          let sum = 0;
+          for (let j = 0; j < step; j++) sum += data[i * step + j];
+          next.push(sum / step / 255);
+        }
+        setBars(next);
+        if (audioRef.current && !audioRef.current.paused)
+          animRef.current = requestAnimationFrame(loop);
+      };
+      animRef.current = requestAnimationFrame(loop);
+    } else {
+      setBars([]);
+    }
+    return () => cancelAnimationFrame(animRef.current);
+  }, [playing]);
+
+  const togglePlay = useCallback(async () => {
+    if (playing) {
+      audioRef.current?.pause();
+      setPlaying(false);
+      cancelAnimationFrame(animRef.current);
+      return;
+    }
+
+    if (!actxRef.current) {
+      actxRef.current = new AudioContext();
+      analyserRef.current = actxRef.current.createAnalyser();
+      analyserRef.current.fftSize = 256;
+      analyserRef.current.smoothingTimeConstant = 0.7;
+    }
+
+    if (!audioRef.current) {
+      const el = new Audio();
+      el.onended = () => {
+        setPlaying(false);
+        cancelAnimationFrame(animRef.current);
+      };
+      audioRef.current = el;
+      sourceRef.current = actxRef.current.createMediaElementSource(el);
+      sourceRef.current.connect(analyserRef.current!);
+      analyserRef.current!.connect(actxRef.current.destination);
+      el.src = serveUrl;
+    }
+
+    if (actxRef.current.state === "suspended") await actxRef.current.resume();
+    audioRef.current.currentTime = 0;
+    await audioRef.current.play();
+    setPlaying(true);
+  }, [serveUrl, playing]);
+
+  return (
+    <>
+      <div
+        draggable
+        onClick={() => onCopy(asset)}
+        onDragStart={(e) => {
+          e.dataTransfer.effectAllowed = "copy";
+          e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+          e.dataTransfer.setData("text/plain", asset);
+        }}
+        onContextMenu={(e) => {
+          e.preventDefault();
+          setContextMenu({ x: e.clientX, y: e.clientY });
+        }}
+        className={`group w-full text-left px-4 py-1.5 flex items-center gap-2.5 transition-all cursor-pointer ${
+          playing
+            ? "bg-panel-accent/[0.06]"
+            : isCopied
+              ? "bg-panel-accent/10"
+              : "hover:bg-panel-surface-hover"
+        }`}
+      >
+        <button
+          className={`w-7 h-7 rounded-md flex-shrink-0 flex items-center justify-center transition-all ${
+            playing
+              ? "bg-panel-accent/15 text-panel-accent"
+              : "text-panel-text-5 group-hover:text-panel-text-3"
+          }`}
+          onClick={(e) => {
+            e.stopPropagation();
+            togglePlay();
+          }}
+        >
+          {playing ? (
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              <rect x="6" y="4" width="4" height="16" rx="1" />
+              <rect x="14" y="4" width="4" height="16" rx="1" />
+            </svg>
+          ) : (
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
+              <polygon points="6,4 20,12 6,20" />
+            </svg>
+          )}
+        </button>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-1.5">
+            <span
+              className={`text-[12px] font-medium truncate ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
+            >
+              {name}
+            </span>
+            {!playing && (
+              <span className="text-[11px] text-panel-text-5 flex-shrink-0">
+                {meta?.duration ? `${meta.duration}s · ` : ""}
+                {subtype}
+              </span>
+            )}
+            {used && (
+              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded flex-shrink-0">
+                in use
+              </span>
+            )}
+          </div>
+          {bars.length > 0 && (
+            <div className="flex items-end gap-[2px] h-[14px] mt-0.5">
+              {bars.map((v, i) => (
+                <div
+                  key={i}
+                  className="flex-1 rounded-[1px]"
+                  style={{
+                    height: `${Math.max(10, v * 100)}%`,
+                    background: `linear-gradient(to top, rgba(60, 230, 172, ${0.3 + v * 0.5}), rgba(60, 230, 172, ${0.5 + v * 0.5}))`,
+                    transition: "height 80ms ease-out",
+                  }}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          asset={asset}
+          onClose={() => setContextMenu(null)}
+          onCopy={onCopy}
+          onDelete={onDelete}
+          onRename={onRename}
+        />
+      )}
+    </>
+  );
+}

package/src/contexts/DomEditContext.tsx

@@ -55,6 +55,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleGsapRemoveAllKeyframes"
   | "handleResetSelectedElementKeyframes"
   | "commitAnimatedProperty"
+  | "commitAnimatedProperties"
   | "handleSetArcPath"
   | "handleUpdateArcSegment"
   | "handleUnroll"
@@ -164,6 +165,7 @@ export function DomEditProvider({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
     commitAnimatedProperty,
+    commitAnimatedProperties,
     handleSetArcPath,
     handleUpdateArcSegment,
     handleUnroll,
@@ -238,6 +240,7 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      commitAnimatedProperties,
       handleSetArcPath,
       handleUpdateArcSegment,
       handleUnroll,
@@ -298,6 +301,7 @@ export function DomEditProvider({
       handleGsapRemoveAllKeyframes,
       handleResetSelectedElementKeyframes,
       commitAnimatedProperty,
+      commitAnimatedProperties,
       handleSetArcPath,
       handleUpdateArcSegment,
       handleUnroll,