@hyperframes/studio 0.7.54 → 0.7.56

package/src/hooks/timelineEditingHelpers.ts

@@ -6,12 +6,10 @@ import {
 } from "../player/components/timelineEditing";
 import { getElementZIndex } from "../player/lib/layerOrdering";
 import { getTimelineElementIdentity } from "../player/lib/timelineElementHelpers";
-import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
-import { selectedKeyframePercentagesForElement } from "../utils/keyframeSelection";
-import type { EditHistoryKind } from "../utils/editHistory";
+import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
 import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
 import { extendRootDurationInSource } from "../utils/rootDuration";
-
+export { deleteSelectedKeyframes } from "./deleteSelectedKeyframes";
 function isHTMLElement(element: Element | null): element is HTMLElement {
   if (!element) return false;
   // Use the element's OWN realm's HTMLElement: timeline clips live in the preview
@@ -20,7 +18,6 @@ function isHTMLElement(element: Element | null): element is HTMLElement {
   const Ctor = element.ownerDocument?.defaultView?.HTMLElement ?? globalThis.HTMLElement;
   return element instanceof Ctor;
 }
-
 /**
  * Resolve a timeline vertical move to a z-index stacking reorder and commit it
  * through the shared layers-panel reorder path. Reads live sibling z-index from
@@ -38,13 +35,12 @@ export function applyTimelineStackingReorder(input: {
   iframe: HTMLIFrameElement | null;
   activeCompPath: string | null;
   commit: TimelineZIndexReorderCommit | null | undefined;
+  coalesceKey?: string;
 }): Promise<void> {
   // Audio has no visual stacking; a vertical drag on it must never write z-index.
   if (input.element.tag === "audio") return Promise.resolve();
-
   const intent = input.stackingReorder ?? null;
   if (intent == null || intent.zIndexChanges.length === 0) return Promise.resolve();
-
   // Resolve each change's live element from the change's OWN locator (the intent
   // is self-contained), falling back to the top-level element list. Sub-comp
   // children aren't in `timelineElements`, so a list-only lookup would miss them.
@@ -67,7 +63,6 @@ export function applyTimelineStackingReorder(input: {
     sourceFile: string;
     key: string;
   }> = [];
-
   for (const change of intent.zIndexChanges) {
     const sibling = siblingByKey.get(change.key);
     const domId = change.domId ?? sibling?.domId;
@@ -86,48 +81,17 @@ export function applyTimelineStackingReorder(input: {
       key: change.key,
     });
   }
-
   if (commitEntries.length === 0) return Promise.resolve();
-  return input.commit?.(commitEntries) ?? Promise.resolve();
-}
-
-/**
- * Remove the keyframes currently selected in the player store from the active
- * element's GSAP animation. Reads selection lazily so it stays correct when
- * invoked from a ref callback. Extracted from StudioApp to keep it under the
- * studio 600-LOC cap.
- */
-export function deleteSelectedKeyframes(session: {
-  selectedGsapAnimations: readonly { id: string; keyframes?: unknown }[];
-  handleGsapRemoveKeyframe: (animId: string, pct: number) => void;
-}): void {
-  const { selectedKeyframes, selectedElementId } = usePlayerStore.getState();
-  const animation = session.selectedGsapAnimations.find((anim) => anim.keyframes);
-  if (!animation) return;
-  // Only the active element's keyframes; a stale cross-element selection must not delete here.
-  for (const pct of selectedKeyframePercentagesForElement(selectedKeyframes, selectedElementId)) {
-    session.handleGsapRemoveKeyframe(animation.id, pct);
-  }
+  return input.commit?.(commitEntries, input.coalesceKey) ?? Promise.resolve();
 }
-
 export function extendRootDurationIfNeeded(newEnd: number): boolean {
   const store = usePlayerStore.getState();
   if (newEnd <= store.duration) return false;
   store.setDuration(newEnd);
   return true;
 }
-
 // ── Types ──
-
-export interface RecordEditInput {
-  label: string;
-  kind: EditHistoryKind;
-  coalesceKey?: string;
-  /** Per-entry coalesce window override (ms); lets a slow follow-up still merge. */
-  coalesceMs?: number;
-  files: Record<string, { before: string; after: string }>;
-}
-
+export type { RecordEditInput } from "../utils/studioFileHistory";
 export function buildPatchTarget(element: {
   domId?: string;
   hfId?: string;
@@ -150,9 +114,7 @@ export function buildPatchTarget(element: {
   }
   return null;
 }
-
 export type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
-
 // The runtime re-reads data-start/data-duration from the DOM on each sync tick
 // (packages/core/src/runtime/init.ts:1324-1368), so attribute mutations here are
 // picked up automatically on the next frame without a rebind call.
@@ -172,7 +134,6 @@ export function findTimelineElementInIframe(
     return null;
   }
 }
-
 export function patchIframeDomTiming(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
@@ -186,7 +147,6 @@ export function patchIframeDomTiming(
     // Cross-origin or mid-navigation — file save is enqueued; iframe patch is best-effort.
   }
 }
-
 function postRootDurationToPreview(
   iframe: HTMLIFrameElement | null,
   durationSeconds: number,
@@ -203,7 +163,6 @@ function postRootDurationToPreview(
     "*",
   );
 }
-
 // fallow-ignore-next-line complexity
 function resolveResizePlaybackStart(
   original: string,
@@ -236,12 +195,26 @@ export function buildTimelineMoveTimingPatch(
   target: PatchTarget,
   start: number,
   duration: number,
+  track?: number,
 ): string {
-  const patched = applyPatchByTarget(original, target, {
+  if (!Number.isFinite(start) || !Number.isFinite(duration)) {
+    console.warn(
+      `[Timeline] buildTimelineMoveTimingPatch: non-finite timing (start=${start}, duration=${duration}) — patch skipped`,
+    );
+    return original;
+  }
+  let patched = applyPatchByTarget(original, target, {
     type: "attribute",
     property: "start",
     value: formatTimelineAttributeNumber(start),
   });
+  if (track != null && Number.isFinite(track)) {
+    patched = applyPatchByTarget(patched, target, {
+      type: "attribute",
+      property: "track-index",
+      value: formatTimelineAttributeNumber(track),
+    });
+  }
   return extendRootDurationInSource(patched, start + duration);
 }
 
@@ -595,5 +568,6 @@ export function foldedScaleGsapMutation(input: {
     });
 }
 
-// Re-export applyPatchByTarget for use in the hook (avoids double import in callers)
 export { applyPatchByTarget, formatTimelineAttributeNumber };
+
+export { patchDocumentRootDuration } from "./timelineEditingGsap";

package/src/hooks/timelineMoveAdapter.test.ts

@@ -0,0 +1,77 @@
+import { describe, expect, it, vi } from "vitest";
+import type { TimelineElement } from "../player";
+import { persistTimelineMoveEditsAtomically } from "./timelineMoveAdapter";
+
+const element = (id: string, track: number): TimelineElement => ({
+  id,
+  key: id,
+  tag: "div",
+  start: 0,
+  duration: 2,
+  track,
+});
+
+describe("persistTimelineMoveEditsAtomically", () => {
+  it("persists two vertical edits as one group with the gesture coalesce key", async () => {
+    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
+    const edits = [
+      { element: element("a", 0), updates: { start: 1, track: 1 } },
+      { element: element("b", 1), updates: { start: 3, track: 2 } },
+    ];
+    await persistTimelineMoveEditsAtomically(edits, "clip-lane-move:7", "track-insert", {
+      handleTimelineGroupMove,
+    });
+    expect(handleTimelineGroupMove).toHaveBeenCalledTimes(1);
+    expect(handleTimelineGroupMove).toHaveBeenCalledWith(
+      [
+        { element: edits[0].element, start: 1, track: 1 },
+        { element: edits[1].element, start: 3, track: 2 },
+      ],
+      { coalesceKey: "clip-lane-move:7" },
+    );
+  });
+
+  it("does not persist track attrs for a single z-only lane reorder", async () => {
+    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
+    const edit = { element: element("a", 0), updates: { start: 1, track: 1 } };
+    await persistTimelineMoveEditsAtomically([edit], "clip-lane-move:7", "lane-reorder", {
+      handleTimelineGroupMove,
+    });
+    expect(handleTimelineGroupMove).toHaveBeenCalledWith([{ element: edit.element, start: 1 }], {
+      coalesceKey: "clip-lane-move:7",
+    });
+  });
+
+  it("does not persist track attrs for a multi-selection lane drag", async () => {
+    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
+    const edits = [
+      { element: element("a", 0), updates: { start: 1, track: 1 } },
+      { element: element("b", 2), updates: { start: 3, track: 2 } },
+    ];
+    await persistTimelineMoveEditsAtomically(edits, "clip-lane-move:7", "lane-reorder", {
+      handleTimelineGroupMove,
+    });
+    expect(handleTimelineGroupMove).toHaveBeenCalledWith(
+      [
+        { element: edits[0].element, start: 1 },
+        { element: edits[1].element, start: 3 },
+      ],
+      { coalesceKey: "clip-lane-move:7" },
+    );
+  });
+
+  it("rejects without retrying individual members when the atomic batch fails", async () => {
+    const failure = new Error("batch failed");
+    const handleTimelineGroupMove = vi.fn().mockRejectedValue(failure);
+    const edits = [
+      { element: element("a", 0), updates: { start: 1, track: 1 } },
+      { element: element("b", 1), updates: { start: 3, track: 2 } },
+    ];
+    await expect(
+      persistTimelineMoveEditsAtomically(edits, "clip-lane-move:7", "track-insert", {
+        handleTimelineGroupMove,
+      }),
+    ).rejects.toBe(failure);
+    expect(handleTimelineGroupMove).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/timelineMoveAdapter.ts

@@ -0,0 +1,37 @@
+import type { TimelineElement } from "../player";
+import type {
+  TimelineGroupCommitOptions,
+  TimelineGroupMoveChange,
+} from "./useTimelineGroupEditing";
+
+interface MoveEdit {
+  element: TimelineElement;
+  updates: Pick<TimelineElement, "start" | "track">;
+}
+
+interface AtomicMoveDeps {
+  handleTimelineGroupMove: (
+    changes: TimelineGroupMoveChange[],
+    options?: TimelineGroupCommitOptions,
+  ) => Promise<void>;
+}
+
+export type TimelineMoveOperation = "timing" | "lane-reorder" | "track-insert";
+
+export function persistTimelineMoveEditsAtomically(
+  edits: MoveEdit[],
+  coalesceKey: string | undefined,
+  operation: TimelineMoveOperation,
+  deps: AtomicMoveDeps,
+): Promise<void> {
+  return deps.handleTimelineGroupMove(
+    edits.map(({ element, updates }) => ({
+      element,
+      start: updates.start,
+      // A single vertical edit is the z-only reorder path. Multi-edit gestures
+      // are track inserts/ripples and must persist every resulting lane index.
+      track: operation === "track-insert" ? updates.track : undefined,
+    })),
+    { coalesceKey },
+  );
+}

package/src/hooks/useAnimatedPropertyCommit.test.tsx

@@ -1,12 +1,12 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
+import { mountReactHarness } from "./domSelectionTestHarness";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -58,13 +58,7 @@ function renderHookWith(
     onReady(commitAnimatedProperties);
     return null;
   }
-  const host = document.createElement("div");
-  document.body.append(host);
-  const root = createRoot(host);
-  act(() => {
-    root.render(<Harness />);
-  });
-  return root;
+  return mountReactHarness(<Harness />);
 }
 
 function renderCommitHook(
@@ -163,4 +157,38 @@ describe("commitStaticSet group routing", () => {
     expect(update!.mutation.animationId).toBe("#box-set-0-position");
     expect(update!.label).toBe("Move layer");
   });
+
+  it("width edit updates its duration-zero size hold instead of appending a set", async () => {
+    const instantSizeHold = {
+      id: "#box-to-0-size",
+      targetSelector: "#box",
+      propertyGroup: "size",
+      method: "to",
+      properties: { width: 150, height: 150 },
+      resolvedStart: 0,
+      duration: 0,
+      extras: { immediateRender: "__raw:true" },
+    } as unknown as GsapAnimation;
+    const committed: Array<{ mutation: Record<string, unknown>; label: string }> = [];
+    let commit!: Commit;
+    renderHookWith(
+      [positionSet, instantSizeHold],
+      (mutation, label) => committed.push({ mutation, label }),
+      (c) => (commit = c),
+    );
+
+    await act(async () => {
+      await commit(selection, { width: 344 });
+    });
+
+    expect(committed).toHaveLength(1);
+    expect(committed[0]!.mutation).toEqual({
+      type: "update-properties",
+      animationId: instantSizeHold.id,
+      properties: { width: 344 },
+    });
+    expect(committed[0]!.label).toBe("Resize layer");
+    expect(committed.some(({ mutation }) => mutation.type === "add")).toBe(false);
+    expect(committed[0]!.mutation.animationId).not.toBe(positionSet.id);
+  });
 });

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -14,7 +14,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeBridge";
 import type { SetPatchProps } from "./gsapRuntimePatch";
-import { selectorFromSelection, computeElementPercentage } from "./gsapShared";
+import { selectorFromSelection, computeElementPercentage, isInstantHold } from "./gsapShared";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { roundTo3 } from "../utils/rounding";
 import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
@@ -161,8 +161,8 @@ async function commitSetProps(
 /**
  * Static element (no keyframes on ANY of its tweens): persist the 3D props as a
  * `tl.set` — NEVER keyframes. Mirrors manual drag / resize / rotate, which `tl.set`
- * a static element instead of animating it. Updates an existing `set` in place, or
- * creates a dedicated `set` at position 0 when the element has none.
+ * a static element instead of animating it. Updates an existing same-group static
+ * hold in place, or creates a dedicated `set` at position 0 when the element has none.
  */
 async function commitStaticSet(
   selection: DomEditSelection,
@@ -172,12 +172,12 @@ async function commitStaticSet(
   commit: Commit,
 ): Promise<void> {
   if (!selector) return;
-  // One commit per PROPERTY GROUP, each into a set that owns that group — never a
-  // flat `to`/`from`, and never a foreign-group set (a width edit used to merge
-  // into the element's position set, producing a mixed set the split machinery
-  // exists to prevent). Within a group everything batches into ONE commit: a
-  // set's id is group-derived, so a per-prop loop would shift the id mid-way and
-  // 404 the next update.
+  // One commit per PROPERTY GROUP, each into a static write that owns that group —
+  // never a live tween, and never a foreign-group write (a width edit used to
+  // merge into the element's position set, producing a mixed write the split
+  // machinery exists to prevent). Within a group everything batches into ONE
+  // commit: a write's id is group-derived, so a per-prop loop would shift the id
+  // mid-way and 404 the next update.
   const byGroup = new Map<string, [string, number | string][]>();
   for (const entry of propEntries) {
     const group = classifyPropertyGroup(entry[0]);
@@ -185,24 +185,24 @@ async function commitStaticSet(
     batch.push(entry);
     byGroup.set(group, batch);
   }
-  const sets = animations.filter((a) => a.method === "set" && a.targetSelector === selector);
+  const staticWrites = animations.filter((a) => isInstantHold(a) && a.targetSelector === selector);
   // Resolve every group's target BEFORE committing anything, and coalesce
-  // groups that land on the SAME set into one commit: the `sets` snapshot is
-  // captured once, so if two groups resolved to one legacy mixed set, a first
+  // groups that land on the SAME write into one commit: the snapshot is captured
+  // once, so if two groups resolved to one legacy mixed write, a first
   // commit could re-shape it server-side and leave the second chasing a stale
   // id (404 on legacy pre-split files).
-  const byTargetSet = new Map<GsapAnimation, [string, number | string][]>();
+  const byTargetWrite = new Map<GsapAnimation, [string, number | string][]>();
   const newSetBatches: [string, number | string][][] = [];
   for (const [group, batch] of byGroup) {
-    const existingSet = findGroupOwningSet(sets, group);
-    if (existingSet) {
-      byTargetSet.set(existingSet, [...(byTargetSet.get(existingSet) ?? []), ...batch]);
+    const existingWrite = findGroupOwningStaticWrite(staticWrites, group);
+    if (existingWrite) {
+      byTargetWrite.set(existingWrite, [...(byTargetWrite.get(existingWrite) ?? []), ...batch]);
     } else {
       newSetBatches.push(batch);
     }
   }
-  for (const [targetSet, batch] of byTargetSet) {
-    await commitSetProps(selection, targetSet, batch, selector, animations, commit);
+  for (const [targetWrite, batch] of byTargetWrite) {
+    await commitSetProps(selection, targetWrite, batch, selector, animations, commit);
   }
   // Fresh adds don't reshape existing sets, so their ids can't go stale.
   for (const batch of newSetBatches) {
@@ -211,14 +211,19 @@ async function commitStaticSet(
 }
 
 /**
- * The set that owns a property group: one already dedicated to the group wins;
- * else a mixed set that already carries a property of the group (merging
- * same-group values there beats spawning a second writer for the channel).
+ * The static write that owns a property group: one already dedicated to the
+ * group wins; else a mixed write that already carries a property of the group
+ * (merging same-group values there beats spawning a second writer for the channel).
  */
-function findGroupOwningSet(sets: GsapAnimation[], group: string): GsapAnimation | undefined {
+function findGroupOwningStaticWrite(
+  staticWrites: GsapAnimation[],
+  group: string,
+): GsapAnimation | undefined {
   return (
-    sets.find((a) => a.propertyGroup === group) ??
-    sets.find((a) => Object.keys(a.properties).some((k) => classifyPropertyGroup(k) === group))
+    staticWrites.find((a) => a.propertyGroup === group) ??
+    staticWrites.find((a) =>
+      Object.keys(a.properties).some((k) => classifyPropertyGroup(k) === group),
+    )
   );
 }
 
@@ -445,8 +450,8 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
         }
 
         // Existing static hold on a NON-animated element — merge the props into the
-        // `set` in place (maybeAutoKeyframeSet no-ops when nothing else is keyframed).
-        if (anim?.method === "set") {
+        // same write (maybeAutoKeyframeSet no-ops when nothing else is keyframed).
+        if (anim && isInstantHold(anim)) {
           await commitSetProps(
             selection,
             anim,

package/src/hooks/useAppHotkeys.ts

@@ -4,7 +4,7 @@ import type { TimelineElement } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
 import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
-import { shouldHandleTimelineToggleHotkey, isEditableTarget } from "../utils/timelineDiscovery";
+import { isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { STUDIO_RAZOR_TOOL_ENABLED } from "../components/editor/manualEditingAvailability";
@@ -81,6 +81,8 @@ interface HistoryResult {
   reason?: string;
   label?: string;
   paths?: string[];
+  /** Per-file restored/previous content, used to soft-apply the preview. */
+  files?: Record<string, { previous: string; restored: string }>;
 }
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
@@ -96,7 +98,6 @@ interface EditHistoryHandle {
 }
 
 interface UseAppHotkeysParams {
-  toggleTimelineVisibility: () => void;
   handleTimelineElementDelete: (element: TimelineElement) => Promise<void>;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
   handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
@@ -108,7 +109,10 @@ interface UseAppHotkeysParams {
   writeProjectFile: (path: string, content: string) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   showToast: (message: string, tone?: "error" | "info") => void;
-  syncHistoryPreviewAfterApply: (paths: string[] | undefined) => Promise<void>;
+  syncHistoryPreviewAfterApply: (restore: {
+    paths?: string[];
+    files?: Record<string, { previous: string; restored: string }>;
+  }) => Promise<void>;
   waitForPendingDomEditSaves: () => Promise<void>;
   leftSidebarRef: React.RefObject<LeftSidebarHandle | null>;
   handleCopy: () => boolean;
@@ -135,7 +139,6 @@ interface UseAppHotkeysParams {
 // ── Extracted keydown dispatch (pure function, no hooks) ──
 
 interface HotkeyCallbacks {
-  toggleTimelineVisibility: () => void;
   handleTimelineElementDelete: (element: TimelineElement) => Promise<void>;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
   handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
@@ -291,9 +294,14 @@ function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks
         return;
       }
     }
-    const { selectedElementId, elements } = usePlayerStore.getState();
-    if (selectedElementId) {
-      const el = elements.find((e) => (e.key ?? e.id) === selectedElementId);
+    // Delete acts on the primary selection OR the marquee multi-selection —
+    // the delete handler expands a clip that is part of the multi-selection
+    // into an atomic delete of the whole selection (single undo).
+    const { selectedElementId, selectedElementIds, elements } = usePlayerStore.getState();
+    const selectionKeys = new Set(selectedElementIds);
+    if (selectedElementId) selectionKeys.add(selectedElementId);
+    if (selectionKeys.size > 0) {
+      const el = elements.find((e) => selectionKeys.has(e.key ?? e.id));
       if (el) {
         event.preventDefault();
         void cb.handleTimelineElementDelete(el);
@@ -317,7 +325,6 @@ function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks
 // ── Hook ──
 
 export function useAppHotkeys({
-  toggleTimelineVisibility,
   handleTimelineElementDelete,
   handleTimelineElementSplit,
   handleDomEditElementDelete,
@@ -346,15 +353,6 @@ export function useAppHotkeys({
   const previewHotkeyWindowRef = useRef<Window | null>(null);
   const previewHistoryCleanupRef = useRef<(() => void) | null>(null);
 
-  const handleTimelineToggleHotkey = useCallback(
-    (event: KeyboardEvent) => {
-      if (!shouldHandleTimelineToggleHotkey(event)) return;
-      event.preventDefault();
-      toggleTimelineVisibility();
-    },
-    [toggleTimelineVisibility],
-  );
-
   // ── Undo / Redo ──
 
   const readHistoryFile = useCallback(
@@ -397,7 +395,7 @@ export function useAppHotkeys({
         if (activeCompPath && result.paths?.includes(activeCompPath)) {
           forceReloadSdkSession?.();
         }
-        await syncHistoryPreviewAfterApply(result.paths);
+        await syncHistoryPreviewAfterApply({ paths: result.paths, files: result.files });
         showToast(`${direction === "undo" ? "Undid" : "Redid"} ${result.label}`, "info");
       }
     },
@@ -421,7 +419,6 @@ export function useAppHotkeys({
 
   const cbRef = useRef<HotkeyCallbacks>(null!);
   cbRef.current = {
-    toggleTimelineVisibility,
     handleTimelineElementDelete,
     handleTimelineElementSplit,
     handleDomEditElementDelete,
@@ -444,11 +441,6 @@ export function useAppHotkeys({
 
   const handleAppKeyDown = useCallback((event: KeyboardEvent) => {
     const cb = cbRef.current;
-    if (shouldHandleTimelineToggleHotkey(event)) {
-      event.preventDefault();
-      cb.toggleTimelineVisibility();
-      return;
-    }
     const key = event.key.toLowerCase();
     if (event.metaKey || event.ctrlKey) {
       dispatchModifierKey(event, key, cb);
@@ -537,6 +529,5 @@ export function useAppHotkeys({
     handleRedo,
     syncPreviewTimelineHotkey,
     syncPreviewHistoryHotkey,
-    handleTimelineToggleHotkey,
   };
 }