@hyperframes/studio 0.8.106 → 0.8.108

package/src/components/nle/AudioMeterStrip.test.tsx

@@ -12,6 +12,8 @@ import { SILENT_CHANNEL } from "../../utils/audioMeterMath";
 import {
   AudioMeterStrip,
   type AudioMeterStripProps,
+  CLIP_LATCH_PEAK,
+  stepClipLatch,
   evictGoneMeterState,
   followMeterHook,
   stepAndPaintStrips,
@@ -416,3 +418,54 @@ describe("stepAndPaintStrips", () => {
     expect(state.has("loud")).toBe(true);
   });
 });
+
+describe("CLIP light", () => {
+  const hookAt = (peak: number) => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    read: vi.fn(() => ({ master: { l: peak, r: 0 }, groups: {} })),
+  });
+
+  it("latches at the -1 dBFS export ceiling, stays lit when the level drops, and resets on click", () => {
+    usePlayerStore.setState({ elements: [clip({})] });
+    const hook = hookAt(1);
+    setHook(hook);
+    const { host } = mount();
+    const light = host.querySelector<HTMLElement>("[data-testid=meter-clip-light]");
+    expect(light?.dataset.lit).toBe("false");
+    tick();
+    expect(light?.dataset.lit).toBe("true");
+    hook.read.mockReturnValue({ master: { l: 0.1, r: 0.1 }, groups: {} });
+    tick();
+    expect(light?.dataset.lit).toBe("true");
+    act(() => light?.click());
+    expect(light?.dataset.lit).toBe("false");
+    tick();
+    expect(light?.dataset.lit).toBe("false");
+  });
+
+  it("stays dark in the red band just under the ceiling", () => {
+    usePlayerStore.setState({ elements: [clip({})] });
+    setHook(hookAt(10 ** (-1.2 / 20)));
+    const { host } = mount();
+    tick();
+    expect(host.querySelector<HTMLElement>("[data-testid=meter-clip-light]")?.dataset.lit).toBe(
+      "false",
+    );
+  });
+});
+
+describe("stepClipLatch", () => {
+  it("lights exactly at -1 dBFS on either channel, not below", () => {
+    expect(CLIP_LATCH_PEAK).toBeCloseTo(0.891251, 6);
+    expect(stepClipLatch(false, { l: CLIP_LATCH_PEAK, r: 0 })).toBe(true);
+    expect(stepClipLatch(false, { l: 0, r: CLIP_LATCH_PEAK })).toBe(true);
+    expect(stepClipLatch(false, { l: CLIP_LATCH_PEAK - 1e-6, r: 0 })).toBe(false);
+    expect(stepClipLatch(false, undefined)).toBe(false);
+  });
+
+  it("holds once lit, whatever comes next", () => {
+    expect(stepClipLatch(true, { l: 0, r: 0 })).toBe(true);
+    expect(stepClipLatch(true, undefined)).toBe(true);
+  });
+});

package/src/components/nle/AudioMeterStrip.tsx

@@ -5,6 +5,7 @@ import {
   useMemo,
   useRef,
   type PointerEvent as ReactPointerEvent,
+  type ReactNode,
   type Ref,
   type RefObject,
 } from "react";
@@ -20,6 +21,7 @@ import type { StereoLevel } from "@hyperframes/core/runtime/levelTap";
 import { usePlayerStore } from "../../player";
 import { clampNumber } from "../../utils/studioHelpers";
 import { useAudioMetersVisible } from "../../utils/audioMeterVisibility";
+import { EXPORT_PEAK_CEILING } from "../../utils/exportPeakCeiling";
 import { useStudioShellContextOptional } from "../../contexts/StudioContext";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import {
@@ -49,6 +51,24 @@ type StripBars = [Bars, Bars];
 
 const MONITOR_LABEL = "Monitor";
 
+/** The CLIP light latches at the export ceiling, stricter than RED_AT. */
+export const CLIP_LATCH_PEAK = EXPORT_PEAK_CEILING;
+
+export function stepClipLatch(latched: boolean, master: StereoLevel | undefined): boolean {
+  if (latched || !master) return latched;
+  return Math.max(master.l, master.r) >= CLIP_LATCH_PEAK;
+}
+
+function paintClipLight(el: HTMLElement | null, lit: boolean): void {
+  if (!el) return;
+  el.dataset.lit = String(lit);
+  el.style.setProperty(
+    "background-color",
+    lit ? "var(--color-red-500)" : "var(--color-neutral-800)",
+  );
+  el.style.setProperty("color", lit ? "var(--color-white)" : "var(--color-neutral-500)");
+}
+
 /** Where the fill turns amber, then red, on the same piecewise dB scale the marks use. */
 const AMBER_AT = markFraction(-6);
 const RED_AT = markFraction(-3);
@@ -178,10 +198,16 @@ export function stepAndPaintStrips(
 }
 
 /** One rAF loop re-reads the hook off the live preview window, so a reloaded iframe is followed. */
+interface ClipLatch {
+  lit: boolean;
+  light: HTMLElement | null;
+}
+
 function useMeterLoop(
   strips: Strip[],
   bars: RefObject<Map<string | null, StripBars>>,
   iframeRef: RefObject<HTMLIFrameElement | null> | undefined,
+  clip: RefObject<ClipLatch>,
 ) {
   const shell = useStudioShellContextOptional();
   const previewIframeRef = iframeRef ?? shell?.previewIframeRef;
@@ -200,6 +226,11 @@ function useMeterLoop(
       last = now;
       evictGoneMeterState(state, new Set(stripsRef.current.map((s) => s.id)));
       stepAndPaintStrips(stripsRef.current, state, bars.current, levels, now, dt);
+      const lit = stepClipLatch(clip.current.lit, levels?.master);
+      if (lit !== clip.current.lit) {
+        clip.current.lit = lit;
+        paintClipLight(clip.current.light, lit);
+      }
     };
     raf = requestAnimationFrame(tick);
     return () => {
@@ -210,7 +241,29 @@ function useMeterLoop(
         // Preview iframe already gone.
       }
     };
-  }, [previewIframeRef, bars]);
+  }, [previewIframeRef, bars, clip]);
+}
+
+function ClipLight({ clip }: { clip: RefObject<ClipLatch> }) {
+  return (
+    <button
+      type="button"
+      data-testid="meter-clip-light"
+      data-lit="false"
+      title="Lights when the preview reaches −1 dBFS, the export ceiling. Click to reset."
+      ref={(el) => {
+        clip.current.light = el;
+        paintClipLight(el, clip.current.lit);
+      }}
+      onClick={() => {
+        clip.current.lit = false;
+        paintClipLight(clip.current.light, false);
+      }}
+      className="rounded-[2px] px-1 font-mono text-[9px] leading-[14px] font-bold tracking-wide"
+    >
+      CLIP
+    </button>
+  );
 }
 
 function Bar({ maskRef, peakRef }: { maskRef: Ref<HTMLDivElement>; peakRef: Ref<HTMLDivElement> }) {
@@ -341,11 +394,13 @@ function MeterStrip({
   register,
   onLive,
   onCommit,
+  clipLight,
 }: {
   strip: Strip;
   register: (id: string | null, bars: StripBars | null) => void;
   onLive: (id: string | null, volume: number) => void;
   onCommit: (id: string | null, volume: number) => void;
+  clipLight?: ReactNode;
 }) {
   const refs = [
     useRef<HTMLDivElement>(null),
@@ -364,6 +419,7 @@ function MeterStrip({
   }, [strip.id, register]);
   return (
     <div className="flex w-[104px] shrink-0 flex-col items-center gap-1 px-1.5 pt-2 pb-1">
+      {clipLight}
       <div
         className="flex min-h-0 flex-1 items-stretch gap-1.5"
         aria-label={`${strip.label} level`}
@@ -421,7 +477,8 @@ function MeterStripBody({ previewIframeRef }: AudioMeterStripProps) {
     else bars.current.delete(id);
   }).current;
   const { onLive, onCommit } = useVolumeHandlers();
-  useMeterLoop(strips, bars, previewIframeRef);
+  const clip = useRef<ClipLatch>({ lit: false, light: null });
+  useMeterLoop(strips, bars, previewIframeRef, clip);
   return (
     <div
       data-testid="audio-meter-strip"
@@ -434,6 +491,7 @@ function MeterStripBody({ previewIframeRef }: AudioMeterStripProps) {
           register={register}
           onLive={onLive}
           onCommit={onCommit}
+          clipLight={strip.id === null ? <ClipLight clip={clip} /> : undefined}
         />
       ))}
     </div>

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -53,6 +53,7 @@ export interface TimelineEditCallbackDeps {
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
+  handleFreezeFrame?: (element: TimelineElement, time: number) => Promise<void> | void;
   /** C1's ungrouped-track FX pointer — same auto-grouping write B6's carve uses. */
   handleGroupClips?: (
     clipIds: readonly string[],
@@ -132,6 +133,7 @@ export function useTimelineEditCallbacks({
   handleTimelineElementSplit,
   handleRazorSplit,
   handleRazorSplitAll,
+  handleFreezeFrame,
   handleGroupClips,
   setElementFxAttribute,
 }: TimelineEditCallbackDeps): TimelineEditCallbacks {
@@ -227,6 +229,7 @@ export function useTimelineEditCallbacks({
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
       onRazorSplitAll: handleRazorSplitAll,
+      onFreezeFrame: handleFreezeFrame,
       onDeleteAllKeyframes: (element, animationId) => {
         // Hold the element where it is (collapse keyframes to a static set) rather
         // than deleting the whole animation — deleting strands a stale GSAP base
@@ -423,6 +426,7 @@ export function useTimelineEditCallbacks({
       handleTimelineElementSplit,
       handleRazorSplit,
       handleRazorSplitAll,
+      handleFreezeFrame,
       handleGsapRemoveAllKeyframes,
       resolveElementAnimations,
       resolveKeyframeTarget,

package/src/components/panels/SlideshowPanel.test.ts

@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import {
   toggleMainLineSlide,
@@ -14,6 +16,7 @@ import {
   removeHotspot,
   safeParseManifest,
   makeSlideshowNotesController,
+  isPanelUndoKey,
 } from "./SlideshowPanel";
 import type { SlideshowManifest } from "@hyperframes/core/slideshow";
 
@@ -518,3 +521,27 @@ describe("makeSlideshowNotesController", () => {
     expect(persist).not.toHaveBeenCalled();
   });
 });
+
+describe("isPanelUndoKey", () => {
+  function undoFrom(html: string) {
+    document.body.innerHTML = `<div>${html}</div>`;
+    const target = document.body.firstElementChild!.firstElementChild!;
+    return { metaKey: true, ctrlKey: false, shiftKey: false, key: "z", target };
+  }
+
+  it("undoes the panel from a button or a slider", () => {
+    expect(isPanelUndoKey(undoFrom("<button>Add</button>"))).toBe(true);
+    expect(isPanelUndoKey(undoFrom('<div role="slider" tabindex="0"></div>'))).toBe(true);
+  });
+
+  it("leaves Cmd+Z to a text field, contenteditable and select included", () => {
+    expect(isPanelUndoKey(undoFrom("<input />"))).toBe(false);
+    expect(isPanelUndoKey(undoFrom('<p contenteditable="plaintext-only">Note</p>'))).toBe(false);
+    expect(isPanelUndoKey(undoFrom("<select><option>a</option></select>"))).toBe(false);
+  });
+
+  it("ignores Cmd+Shift+Z and a bare z", () => {
+    expect(isPanelUndoKey({ ...undoFrom("<button />"), shiftKey: true })).toBe(false);
+    expect(isPanelUndoKey({ ...undoFrom("<button />"), metaKey: false })).toBe(false);
+  });
+});

package/src/components/panels/SlideshowPanel.tsx

@@ -21,6 +21,7 @@ import { usePlayerStore } from "../../player";
 import { useDomEditSelectionContext } from "../../contexts/DomEditContext";
 import { useFileManagerContext } from "../../contexts/FileManagerContext";
 import { generateId } from "../../utils/generateId";
+import { isTypingTarget } from "../../utils/typingTarget";
 import {
   SectionHeader,
   SlideList,
@@ -153,6 +154,13 @@ export function makeSlideshowNotesController(): NotesController {
   };
 }
 
+export function isPanelUndoKey(
+  e: Pick<KeyboardEvent, "metaKey" | "ctrlKey" | "shiftKey" | "key" | "target">,
+): boolean {
+  if (!(e.metaKey || e.ctrlKey) || e.shiftKey || e.key.toLowerCase() !== "z") return false;
+  return !isTypingTarget(e.target);
+}
+
 // ── Component ─────────────────────────────────────────────────────────────
 
 export interface SlideshowPanelProps {
@@ -416,13 +424,10 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
       className="flex flex-col h-full overflow-y-auto text-text-0"
       onKeyDown={(e) => {
         // In-panel undo — scoped so it never fights the app-level file undo.
-        if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
-          const target = e.target instanceof HTMLElement ? e.target.tagName : "";
-          if (target === "TEXTAREA" || target === "INPUT") return;
-          e.preventDefault();
-          e.stopPropagation();
-          handleUndo();
-        }
+        if (!isPanelUndoKey(e)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        handleUndo();
       }}
     >
       {persistError && (

package/src/contexts/DomEditContext.test.tsx

@@ -0,0 +1,62 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, expect, it, vi } from "vitest";
+import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
+import { DomEditProvider, useDomEditActionsContext } from "./DomEditContext";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const cleanup: Array<() => void> = [];
+afterEach(() => cleanup.splice(0).forEach((step) => step()));
+
+/** A resize whose save is still running, committed through the actions the canvas and panels use. */
+function commitResize(save: Promise<void>) {
+  const handleDomBoxSizeCommit = vi.fn(() => save);
+  const value = { handleDomBoxSizeCommit } as unknown as Parameters<
+    typeof DomEditProvider
+  >[0]["value"];
+  let actions!: ReturnType<typeof useDomEditActionsContext>;
+  function Canvas() {
+    actions = useDomEditActionsContext();
+    return null;
+  }
+  const root = createRoot(document.createElement("div"));
+  act(() =>
+    root.render(
+      <DomEditProvider value={value}>
+        <Canvas />
+      </DomEditProvider>,
+    ),
+  );
+  cleanup.push(() => act(() => root.unmount()));
+  const committed = actions.handleDomBoxSizeCommit(
+    {} as never,
+    { width: 300, height: 200 },
+    undefined,
+  );
+  return { committed, handleDomBoxSizeCommit };
+}
+
+it("undo waits for an edit committed before its save has written anything", async () => {
+  let finish!: () => void;
+  const { committed } = commitResize(new Promise<void>((resolve) => (finish = resolve)));
+  let drained = false;
+  const drain = flushStudioPendingEdits().then(() => (drained = true));
+  await new Promise((resolve) => setTimeout(resolve, 20));
+  expect(drained).toBe(false);
+  finish();
+  await drain;
+  await committed;
+  expect(drained).toBe(true);
+});
+
+it("an edit that fails is waited out and reported to the drain, like every tracked edit", async () => {
+  let fail!: (error: Error) => void;
+  const { committed } = commitResize(new Promise<void>((_, reject) => (fail = reject)));
+  const drain = flushStudioPendingEdits();
+  const failure = new Error("blocked");
+  fail(failure);
+  await expect(committed).rejects.toThrow("blocked");
+  await expect(drain).resolves.toEqual({ status: "failed", error: failure });
+});

package/src/contexts/DomEditContext.tsx

@@ -2,85 +2,88 @@
 import type { useDomEditSession } from "../hooks/useDomEditSession";
 import { useCallback, useContext, useMemo, useRef, type ReactNode } from "react";
 import { createStableContext } from "../utils/hmrStableContext";
+import { trackedStudioEdit } from "../utils/studioPendingEdits";
 
 type DomEditValue = ReturnType<typeof useDomEditSession>;
 
-export interface DomEditActionsValue extends Pick<
-  DomEditValue,
-  | "handleTimelineElementSelect"
-  | "handlePreviewCanvasMouseDown"
-  | "handlePreviewCanvasPointerMove"
-  | "handlePreviewCanvasPointerLeave"
-  | "applyDomSelection"
-  | "clearDomSelection"
-  | "refreshDomEditSelectionFromPreview"
-  | "handleDomStyleCommit"
-  | "handleDomStyleCommitForSelection"
-  | "handleDomAttributeCommit"
-  | "handleDomAttributeLiveCommit"
-  | "handleDomAttributeQuietCommit"
-  | "handleDomHtmlAttributeCommit"
-  | "handleDomAttributesCommit"
-  | "handleDomPathOffsetCommit"
-  | "handleDomGroupPathOffsetCommit"
-  | "handleDomZIndexReorderCommit"
-  | "handleDomBoxSizeCommit"
-  | "handleDomRotationCommit"
-  | "handleDomManualEditsReset"
-  | "handleDomTextCommit"
-  | "handleDomTextCommitForSelection"
-  | "handleDomRichTextCommit"
-  | "handleDomTextFieldStyleCommit"
-  | "handleDomAddTextField"
-  | "handleDomRemoveTextField"
-  | "getGsapAnimationsForSelection"
-  | "handleAskAgent"
-  | "handleAgentModalSubmit"
-  | "handleBlockedDomMove"
-  | "handleDomManualDragStart"
-  | "handleDomEditElementDelete"
-  | "handleGroupSelection"
-  | "handleUngroupSelection"
-  | "setActiveGroupElement"
-  | "buildDomSelectionFromTarget"
-  | "buildDomSelectionForTimelineElement"
-  | "updateDomEditHoverSelection"
-  | "resolveImportedFontAsset"
-  | "setAgentModalOpen"
-  | "setAgentPromptSelectionContext"
-  | "setAgentModalAnchorPoint"
-  | "handleGsapUpdateProperty"
-  | "handleGsapUpdateMeta"
-  | "handleGsapDeleteAnimation"
-  | "handleGsapDeleteAllForElement"
-  | "handleGsapAddAnimation"
-  | "handleGsapAddProperty"
-  | "handleGsapRemoveProperty"
-  | "handleGsapUpdateFromProperty"
-  | "handleGsapAddFromProperty"
-  | "handleGsapRemoveFromProperty"
-  | "handleGsapAddKeyframe"
-  | "handleGsapAddKeyframeBatch"
-  | "handleGsapRemoveKeyframe"
-  | "handleGsapMoveKeyframeToPlayhead"
-  | "handleGsapMoveKeyframe"
-  | "handleGsapResizeKeyframedTween"
-  | "handleGsapConvertToKeyframes"
-  | "handleGsapRemoveAllKeyframes"
-  | "handleResetSelectedElementKeyframes"
-  | "commitAnimatedProperty"
-  | "commitAnimatedProperties"
-  | "handleSetArcPath"
-  | "handleUpdateArcSegment"
-  | "handleUnroll"
-  | "invalidateGsapCache"
-  | "previewIframeRef"
-  | "commitMutation"
-  | "applyMarqueeSelection"
-  | "handleUpdateKeyframeEase"
-  | "handleUpdateSegmentEase"
-  | "handleSetAllKeyframeEases"
-> {}
+const SAVES_AN_EDIT = {
+  handleTimelineElementSelect: false,
+  handlePreviewCanvasMouseDown: false,
+  handlePreviewCanvasPointerMove: false,
+  handlePreviewCanvasPointerLeave: false,
+  applyDomSelection: false,
+  clearDomSelection: false,
+  refreshDomEditSelectionFromPreview: false,
+  handleDomStyleCommit: true,
+  handleDomStyleCommitForSelection: true,
+  handleDomAttributeCommit: true,
+  handleDomAttributeLiveCommit: false,
+  handleDomAttributeQuietCommit: true,
+  handleDomHtmlAttributeCommit: true,
+  handleDomAttributesCommit: true,
+  handleDomAttributeBatchCommit: true,
+  handleDomPathOffsetCommit: true,
+  handleDomGroupPathOffsetCommit: true,
+  handleDomZIndexReorderCommit: true,
+  handleDomBoxSizeCommit: true,
+  handleDomRotationCommit: true,
+  handleDomManualEditsReset: true,
+  handleDomTextCommit: true,
+  handleDomTextCommitForSelection: true,
+  handleDomRichTextCommit: true,
+  handleDomTextFieldStyleCommit: true,
+  handleDomAddTextField: true,
+  handleDomRemoveTextField: true,
+  getGsapAnimationsForSelection: false,
+  handleAskAgent: false,
+  handleAgentModalSubmit: false,
+  handleBlockedDomMove: false,
+  handleDomManualDragStart: false,
+  handleDomEditElementDelete: true,
+  handleGroupSelection: true,
+  handleUngroupSelection: true,
+  setActiveGroupElement: false,
+  buildDomSelectionFromTarget: false,
+  buildDomSelectionForTimelineElement: false,
+  updateDomEditHoverSelection: false,
+  resolveImportedFontAsset: false,
+  setAgentModalOpen: false,
+  setAgentPromptSelectionContext: false,
+  setAgentModalAnchorPoint: false,
+  handleGsapUpdateProperty: true,
+  handleGsapUpdateMeta: true,
+  handleGsapDeleteAnimation: true,
+  handleGsapDeleteAllForElement: true,
+  handleGsapAddAnimation: true,
+  handleGsapAddProperty: true,
+  handleGsapRemoveProperty: true,
+  handleGsapUpdateFromProperty: true,
+  handleGsapAddFromProperty: true,
+  handleGsapRemoveFromProperty: true,
+  handleGsapAddKeyframe: true,
+  handleGsapAddKeyframeBatch: true,
+  handleGsapRemoveKeyframe: true,
+  handleGsapMoveKeyframeToPlayhead: true,
+  handleGsapMoveKeyframe: true,
+  handleGsapResizeKeyframedTween: true,
+  handleGsapConvertToKeyframes: true,
+  handleGsapRemoveAllKeyframes: true,
+  handleResetSelectedElementKeyframes: true,
+  commitAnimatedProperty: true,
+  commitAnimatedProperties: true,
+  handleSetArcPath: true,
+  handleUpdateArcSegment: true,
+  handleUnroll: true,
+  invalidateGsapCache: false,
+  previewIframeRef: false,
+  commitMutation: true,
+  applyMarqueeSelection: false,
+  handleUpdateKeyframeEase: true,
+  handleUpdateSegmentEase: true,
+  handleSetAllKeyframeEases: true,
+} as const satisfies Partial<Record<keyof DomEditValue, boolean>>;
+
+export interface DomEditActionsValue extends Pick<DomEditValue, keyof typeof SAVES_AN_EDIT> {}
 
 export interface DomEditSelectionValue extends Pick<
   DomEditValue,
@@ -98,6 +101,15 @@ export interface DomEditSelectionValue extends Pick<
   | "agentPromptSelectionContext"
 > {}
 
+function trackEditCommits(actions: DomEditActionsValue): DomEditActionsValue {
+  const tracked: Record<string, unknown> = { ...actions };
+  for (const key of Object.keys(SAVES_AN_EDIT) as Array<keyof typeof SAVES_AN_EDIT>) {
+    if (!SAVES_AN_EDIT[key]) continue;
+    tracked[key] = trackedStudioEdit(actions[key] as (...args: unknown[]) => unknown);
+  }
+  return tracked as unknown as DomEditActionsValue;
+}
+
 const DomEditActionsContext = createStableContext<DomEditActionsValue | null>(
   "DomEditActionsContext",
   null,
@@ -164,6 +176,7 @@ export function DomEditProvider({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -242,7 +255,7 @@ export function DomEditProvider({
     [],
   );
 
-  const actions = useMemo<DomEditActionsValue>(
+  const untrackedActions = useMemo<DomEditActionsValue>(
     () => ({
       handleTimelineElementSelect,
       handlePreviewCanvasMouseDown,
@@ -258,6 +271,7 @@ export function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -333,6 +347,7 @@ export function DomEditProvider({
       handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
+      handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -395,6 +410,8 @@ export function DomEditProvider({
     ],
   );
 
+  const actions = useMemo(() => trackEditCommits(untrackedActions), [untrackedActions]);
+
   const selection = useMemo<DomEditSelectionValue>(
     () => ({
       domEditSelection,

package/src/contexts/TimelineEditContext.tsx

@@ -42,6 +42,7 @@ const EDIT_CALLBACK_KEY_SET: Record<keyof TimelineEditCallbacks, true> = {
   onSplitElement: true,
   onRazorSplit: true,
   onRazorSplitAll: true,
+  onFreezeFrame: true,
   onDeleteKeyframe: true,
   onDeleteAllKeyframes: true,
   onMoveKeyframeToPlayhead: true,