@hyperframes/studio 0.8.47 → 0.8.48

package/src/contexts/FileManagerContext.tsx

@@ -24,7 +24,6 @@ export function FileManagerProvider({
     projectDir,
     fileTree,
     fileTreeLoaded,
-    setFileTree,
     editingPathRef,
     projectIdRef,
     saveRafRef,
@@ -68,7 +67,6 @@ export function FileManagerProvider({
       projectDir,
       fileTree,
       fileTreeLoaded,
-      setFileTree,
       editingPathRef,
       projectIdRef,
       saveRafRef,
@@ -106,7 +104,6 @@ export function FileManagerProvider({
       projectDir,
       fileTree,
       fileTreeLoaded,
-      setFileTree,
       editingPathRef,
       projectIdRef,
       saveRafRef,

package/src/hooks/appHotkeysDispatch.ts

@@ -0,0 +1,256 @@
+import { automationOwnsKey } from "./useAutomationSelectionKeyboard";
+import { usePlayerStore } from "../player";
+import type { TimelineElement } from "../player";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { LeftSidebarHandle } from "../components/sidebar/LeftSidebar";
+import { isTypingTarget } from "../utils/typingTarget";
+import { isEditableTarget } from "../utils/timelineDiscovery";
+import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
+import { canSplitElement } from "../utils/timelineElementSplit";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+
+// Extracted from useAppHotkeys.ts to keep it under the studio 600-line cap,
+// following useTimelineDeleteOps's precedent. Pure functions, no hooks — the
+// hook still owns the actual keydown listeners and calls into these.
+
+/** Exported so useAppHotkeys's own history-only preview listener can reuse
+ *  the same undo/redo key arbitration without duplicating it. */
+export function handleUndoRedoKey(
+  event: KeyboardEvent,
+  onUndo: () => void,
+  onRedo: () => void,
+): boolean {
+  const key = event.key.toLowerCase();
+  if (key === "z" && !event.shiftKey) {
+    event.preventDefault();
+    onUndo();
+    return true;
+  }
+  if ((key === "z" && event.shiftKey) || (event.ctrlKey && !event.metaKey && key === "y")) {
+    event.preventDefault();
+    onRedo();
+    return true;
+  }
+  return false;
+}
+
+export interface HotkeyCallbacks {
+  handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
+  handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void>;
+  handleDomEditElementDelete: (
+    selection: DomEditSelection,
+    options?: { expandGroup?: boolean },
+  ) => Promise<void>;
+  handleUndo: () => Promise<void>;
+  handleRedo: () => Promise<void>;
+  handleCopy: () => boolean;
+  handlePaste: () => Promise<void>;
+  handleCut: () => Promise<boolean>;
+  onResetKeyframes: () => boolean;
+  onDeleteSelectedKeyframes: () => void;
+  onToggleRecording?: () => void;
+  onGroupSelection?: () => void;
+  onUngroupSelection?: () => void;
+  leftSidebarRef: React.RefObject<LeftSidebarHandle | null>;
+  domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
+  showToast: (message: string, tone?: "error" | "info") => void;
+}
+
+/** Exported for tests, like dispatchPlainKey below: lets the Cmd+C/Cmd+V
+ *  arbitration between an automation range and the clip clipboard be asserted
+ *  without standing up the whole hook. */
+export function dispatchModifierKey(
+  event: KeyboardEvent,
+  key: string,
+  cb: HotkeyCallbacks,
+): boolean {
+  if (
+    !shouldIgnoreHistoryShortcut(event.target) &&
+    handleUndoRedoKey(
+      event,
+      () => {
+        trackStudioEvent("keyboard_shortcut", { action: "undo" });
+        void cb.handleUndo();
+      },
+      () => {
+        trackStudioEvent("keyboard_shortcut", { action: "redo" });
+        void cb.handleRedo();
+      },
+    )
+  )
+    return true;
+
+  if (event.key === "1") {
+    event.preventDefault();
+    trackStudioEvent("keyboard_shortcut", { action: "tab_compositions" });
+    cb.leftSidebarRef.current?.selectTab("compositions");
+    return true;
+  }
+  if (event.key === "2") {
+    event.preventDefault();
+    trackStudioEvent("keyboard_shortcut", { action: "tab_assets" });
+    cb.leftSidebarRef.current?.selectTab("assets");
+    return true;
+  }
+
+  if (key === "g" && !event.altKey && !isTypingTarget(event.target)) {
+    event.preventDefault();
+    if (event.shiftKey) cb.onUngroupSelection?.();
+    else cb.onGroupSelection?.();
+    return true;
+  }
+
+  if (!event.shiftKey && !event.altKey && !isEditableTarget(event.target)) {
+    // An active automation range owns Cmd+C/Cmd+V, same as Delete below: this
+    // capture listener runs before useAutomationSelectionKeyboard's, so without
+    // this both clipboards raced the same key. No preventDefault, so the
+    // downstream handler still sees it.
+    if (automationOwnsKey(event)) return true;
+    if (key === "c") {
+      if (cb.handleCopy()) {
+        event.preventDefault();
+        trackStudioEvent("keyboard_shortcut", { action: "copy" });
+      }
+      return true;
+    }
+    if (key === "v") {
+      event.preventDefault();
+      trackStudioEvent("keyboard_shortcut", { action: "paste" });
+      void cb.handlePaste();
+      return true;
+    }
+    if (key === "x") {
+      if (usePlayerStore.getState().selectedElementId || cb.domEditSelectionRef.current) {
+        event.preventDefault();
+        trackStudioEvent("keyboard_shortcut", { action: "cut" });
+        void cb.handleCut();
+      }
+      return true;
+    }
+  }
+  return false;
+}
+
+// fallow-ignore-next-line complexity
+/** Exported for tests: the unmodified-key half of the dispatcher, so the
+ *  Delete arbitration between keyframes, an automation range and the clip can
+ *  be asserted without standing up the whole hook. */
+export function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks): void {
+  if (key === "f" && !event.shiftKey && !event.altKey) {
+    event.preventDefault();
+    if (document.fullscreenElement) void document.exitFullscreen();
+    else
+      document.querySelector<HTMLElement>("[data-studio-fullscreen-target]")?.requestFullscreen();
+    return;
+  }
+
+  if (event.key === "s" && !event.altKey) {
+    // Reserve bare `s` for Split even when the current selection cannot split,
+    // so secondary listeners do not reinterpret the same key as Snap toggle.
+    event.preventDefault();
+    const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
+    if (selectedElementId) {
+      const el = elements.find((e) => (e.key ?? e.id) === selectedElementId);
+      if (
+        el &&
+        canSplitElement(el) &&
+        currentTime > el.start &&
+        currentTime < el.start + el.duration
+      ) {
+        void cb.handleTimelineElementSplit(el, currentTime);
+        return;
+      }
+      // Expanded sub-comp children carry a qualified `sourceFile#id` selection
+      // that isn't in the raw `elements` list, so the s-key can't resolve them.
+      // Nudge toward the razor tool instead of failing silently.
+      if (!el && selectedElementId.includes("#")) {
+        cb.showToast("Use the razor tool (B) to split clips inside a sub-composition", "info");
+        return;
+      }
+    }
+  }
+
+  if (key === "b" && !event.shiftKey && !event.altKey) {
+    event.preventDefault();
+    const { activeTool, setActiveTool } = usePlayerStore.getState();
+    setActiveTool(activeTool === "razor" ? "select" : "razor");
+    return;
+  }
+
+  if (key === "v" && !event.shiftKey && !event.altKey) {
+    event.preventDefault();
+    usePlayerStore.getState().setActiveTool("select");
+    return;
+  }
+
+  // CapCut returns to the select tool with "A". Scoped to the razor being
+  // armed; usePlaybackKeyboard.ts's own "A" (seek to in-point) checks the
+  // same activeTool to stay out of the way.
+  if (key === "a" && !event.shiftKey && !event.altKey) {
+    const { activeTool, setActiveTool } = usePlayerStore.getState();
+    if (activeTool === "razor") {
+      event.preventDefault();
+      setActiveTool("select");
+      return;
+    }
+  }
+
+  if (event.key === "Escape") {
+    const { activeTool, selectedElementId, setActiveTool, setSelectedElementId } =
+      usePlayerStore.getState();
+    if (activeTool === "razor") {
+      if (selectedElementId) setSelectedElementId(null);
+      else setActiveTool("select");
+      event.preventDefault();
+      return;
+    }
+  }
+
+  if ((event.key === "Delete" || event.key === "Backspace") && !event.altKey) {
+    if (usePlayerStore.getState().selectedKeyframes.size > 0) {
+      cb.onDeleteSelectedKeyframes();
+      usePlayerStore.getState().clearSelectedKeyframes();
+      event.preventDefault();
+      return;
+    }
+    // An active automation range owns Delete (empties the range in place).
+    // No preventDefault: this capture listener runs first, so falling through
+    // is what lets the document-level handler still see the key instead of
+    // the press reaching the clip delete below.
+    if (usePlayerStore.getState().automationSelection) return;
+    if (event.key === "Backspace") {
+      const { selectedElementId, keyframeCache } = usePlayerStore.getState();
+      if (selectedElementId && keyframeCache.has(selectedElementId) && cb.onResetKeyframes()) {
+        event.preventDefault();
+        return;
+      }
+    }
+    // The canvas selection owns Delete first: the timeline mirror of it is
+    // lossy (drops a member with no timeline row of its own), so deleting via
+    // the timeline left other selected elements behind. Timeline stays as the
+    // fallback for rows with no canvas node (audio, an inactive comp).
+    const domSel = cb.domEditSelectionRef.current;
+    if (domSel) {
+      event.preventDefault();
+      // The whole marquee group, not just the primary the ref holds.
+      void cb.handleDomEditElementDelete(domSel, { expandGroup: true });
+      return;
+    }
+    // Takes the WHOLE selection: `find` returned the first match, so selecting
+    // every clip and pressing Delete removed exactly one of them.
+    const { selectedElementId, selectedElementIds, elements } = usePlayerStore.getState();
+    const selectionKeys = new Set(selectedElementIds);
+    if (selectedElementId) selectionKeys.add(selectedElementId);
+    const selected = elements.filter((e) => selectionKeys.has(e.key ?? e.id));
+    if (selected.length > 0) {
+      event.preventDefault();
+      void cb.handleTimelineElementsDelete(selected);
+    }
+    return;
+  }
+
+  if (event.key === "r" && !event.shiftKey && !event.altKey && cb.onToggleRecording) {
+    event.preventDefault();
+    cb.onToggleRecording();
+  }
+}

package/src/hooks/domEditDeleteMembers.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { timelineElementsForDelete } from "./domEditDeleteMembers";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { TimelineElement } from "../player";
+
+const sel = (id: string, sourceFile = "index.html") => ({ id, sourceFile }) as DomEditSelection;
+
+const clip = (id: string, domId: string, sourceFile = "index.html"): TimelineElement =>
+  ({ id, domId, sourceFile, tag: "video", start: 0, duration: 1, track: 0 }) as TimelineElement;
+
+describe("timelineElementsForDelete", () => {
+  it("resolves every member to its exact timeline row", () => {
+    const elements = [clip("a", "clip-a"), clip("b", "clip-b")];
+    const result = timelineElementsForDelete([sel("clip-a"), sel("clip-b")], elements);
+    expect(result).toEqual([elements[0], elements[1]]);
+  });
+
+  it("returns null when any member has no timeline row of its own", () => {
+    const elements = [clip("a", "clip-a")];
+    // "plain-child" is not a timeline element — a nested DOM node inside a clip.
+    const result = timelineElementsForDelete([sel("clip-a"), sel("plain-child")], elements);
+    expect(result).toBeNull();
+  });
+
+  it("does not fall back to the ancestor clip for a nested child", () => {
+    // A click inside a clip must not resolve to (and so delete) the whole clip.
+    const elements = [clip("a", "clip-a")];
+    expect(timelineElementsForDelete([sel("nested-text")], elements)).toBeNull();
+  });
+});

package/src/hooks/domEditDeleteMembers.ts

@@ -7,6 +7,8 @@
 
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
+import type { TimelineElement } from "../player";
+import { findMatchingTimelineElementId } from "../utils/studioHelpers";
 
 /** One entry in the studio's edit history, as `useDomEditSession`'s caller
  *  supplies it. */
@@ -32,3 +34,20 @@ export function membersForDelete(
 ): DomEditSelection[] {
   return options?.expandGroup && group.length > 0 ? group : [selection];
 }
+
+/** The timeline row for each member, only when EVERY member is one — a mixed
+ *  group stays on the DOM path. Exact-identity match only, no ancestor
+ *  fallback: a click inside a clip must not delete the whole clip. */
+export function timelineElementsForDelete(
+  members: readonly DomEditSelection[],
+  elements: TimelineElement[],
+): TimelineElement[] | null {
+  const matches: TimelineElement[] = [];
+  for (const member of members) {
+    const id = findMatchingTimelineElementId(member, elements);
+    const match = id ? elements.find((el) => (el.key ?? el.id) === id) : undefined;
+    if (!match) return null;
+    matches.push(match);
+  }
+  return matches;
+}

package/src/hooks/useActiveComposition.ts

@@ -0,0 +1,69 @@
+import { useState, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import { useHydrateActiveCompPathFromUrl } from "./useHydrateActiveCompPathFromUrl";
+import { useAutoOpenRootComposition } from "./useAutoOpenRootComposition";
+import { useCompositionContentLoader } from "./useCompositionContentLoader";
+import { useResetSelectionOnProjectSwitch } from "./useResetSelectionOnProjectSwitch";
+import { isHydratedFromUrlState, type StudioUrlState } from "../utils/studioUrlState";
+import type { AppToast, EditingFile } from "../utils/studioHelpers";
+
+/** Owns which composition is open: state, URL hydration, auto-open and content loading. */
+export function useActiveComposition({
+  projectId,
+  initialUrlStateRef,
+  fileTree,
+  fileTreeLoaded,
+  masterCompPath,
+  setEditingFile,
+  showToast,
+}: {
+  projectId: string | null;
+  initialUrlStateRef: MutableRefObject<StudioUrlState>;
+  fileTree: string[];
+  fileTreeLoaded: boolean;
+  masterCompPath: string | null;
+  setEditingFile: (file: EditingFile) => void;
+  showToast: (message: string, tone?: AppToast["tone"]) => void;
+}): {
+  activeCompPath: string | null;
+  activeCompPathHydrated: boolean;
+  setActiveCompPath: Dispatch<SetStateAction<string | null>>;
+  handleSelectComposition: (comp: string) => void;
+} {
+  const [activeCompPath, setActiveCompPath] = useState<string | null>(null);
+  const [activeCompPathHydrated, setActiveCompPathHydrated] = useState(() =>
+    isHydratedFromUrlState(initialUrlStateRef.current),
+  );
+
+  useResetSelectionOnProjectSwitch({
+    projectId,
+    initialUrlStateRef,
+    setActiveCompPath,
+    setActiveCompPathHydrated,
+  });
+
+  useHydrateActiveCompPathFromUrl({
+    hydrated: activeCompPathHydrated,
+    fileTreeLoaded,
+    fileTree,
+    initialUrlStateRef,
+    setActiveCompPath,
+    setHydrated: setActiveCompPathHydrated,
+  });
+
+  const handleSelectComposition = useCompositionContentLoader({
+    projectId,
+    setEditingFile,
+    setActiveCompPath,
+    showToast,
+  });
+
+  useAutoOpenRootComposition({
+    projectId,
+    activeCompPath,
+    activeCompPathHydrated,
+    masterCompPath,
+    onSelectComposition: handleSelectComposition,
+  });
+
+  return { activeCompPath, activeCompPathHydrated, setActiveCompPath, handleSelectComposition };
+}

package/src/hooks/useAppHotkeys.test.ts

@@ -1,6 +1,6 @@
 // @vitest-environment happy-dom
 import { afterEach, describe, expect, it, vi } from "vitest";
-import { dispatchModifierKey, dispatchPlainKey } from "./useAppHotkeys";
+import { dispatchModifierKey, dispatchPlainKey } from "./appHotkeysDispatch";
 import { usePlayerStore } from "../player/store/playerStore";
 import { clearAutomationClipboard, copyRange } from "../player/components/automationClipboard";
 import { VOLUME_RANGE } from "@hyperframes/core/audio-automation";
@@ -277,3 +277,25 @@ describe("dispatchModifierKey — Cmd+C/Cmd+V arbitration", () => {
     expect(e.defaultPrevented).toBe(false);
   });
 });
+
+describe('dispatchPlainKey — "A" returns to select while the razor is armed', () => {
+  afterEach(() => {
+    usePlayerStore.setState({ activeTool: "select" });
+  });
+
+  it("returns to the select tool, matching CapCut's keybinding", () => {
+    usePlayerStore.setState({ activeTool: "razor" });
+    const e = press("a");
+    dispatchPlainKey(e, "a", callbacks());
+    expect(usePlayerStore.getState().activeTool).toBe("select");
+    expect(e.defaultPrevented).toBe(true);
+  });
+
+  it("does not intercept plain \"a\" when the razor isn't armed, leaving playback's seek-to-in-point live", () => {
+    usePlayerStore.setState({ activeTool: "select" });
+    const e = press("a");
+    dispatchPlainKey(e, "a", callbacks());
+    expect(usePlayerStore.getState().activeTool).toBe("select");
+    expect(e.defaultPrevented).toBe(false);
+  });
+});