@hyperframes/studio 0.7.106 → 0.7.108

package/src/contexts/DomEditContext.tsx

@@ -15,6 +15,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleDomStyleCommit"
   | "handleDomAttributeCommit"
   | "handleDomAttributeLiveCommit"
+  | "handleDomAttributeQuietCommit"
   | "handleDomHtmlAttributeCommit"
   | "handleDomAttributesCommit"
   | "handleDomPathOffsetCommit"
@@ -24,6 +25,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleDomRotationCommit"
   | "handleDomManualEditsReset"
   | "handleDomTextCommit"
+  | "handleDomRichTextCommit"
   | "handleDomTextFieldStyleCommit"
   | "handleDomAddTextField"
   | "handleDomRemoveTextField"
@@ -115,6 +117,13 @@ export function useDomEditSelectionContext(): DomEditSelectionValue {
   return ctx;
 }
 
+/** Optional counterpart to useDomEditActionsContextOptional — same reason: the
+ *  player package's own components mount outside a provider in standalone and
+ *  test trees, where "no dom-edit selection" is the correct answer. */
+export function useDomEditSelectionContextOptional(): DomEditSelectionValue | null {
+  return useContext(DomEditSelectionContext);
+}
+
 /** @deprecated Prefer useDomEditActionsContext or useDomEditSelectionContext. */
 export function useDomEditContext(): DomEditValue {
   return { ...useDomEditActionsContext(), ...useDomEditSelectionContext() };
@@ -139,6 +148,7 @@ export function DomEditProvider({
     handleDomStyleCommit,
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
+    handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
     handleDomPathOffsetCommit,
@@ -149,6 +159,7 @@ export function DomEditProvider({
     handleDomManualEditsReset,
 
     handleDomTextCommit,
+    handleDomRichTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
     handleDomRemoveTextField,
@@ -227,6 +238,7 @@ export function DomEditProvider({
       handleDomStyleCommit,
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
+      handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
       handleDomPathOffsetCommit,
@@ -236,6 +248,7 @@ export function DomEditProvider({
       handleDomRotationCommit,
       handleDomManualEditsReset,
       handleDomTextCommit,
+      handleDomRichTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
       handleDomRemoveTextField,
@@ -296,6 +309,7 @@ export function DomEditProvider({
       handleDomStyleCommit,
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
+      handleDomAttributeQuietCommit,
       handleDomHtmlAttributeCommit,
       handleDomAttributesCommit,
       handleDomPathOffsetCommit,
@@ -305,6 +319,7 @@ export function DomEditProvider({
       handleDomRotationCommit,
       handleDomManualEditsReset,
       handleDomTextCommit,
+      handleDomRichTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
       handleDomRemoveTextField,

package/src/hooks/domEditPersistFailure.ts

@@ -19,13 +19,6 @@ export class DomEditPersistUnsafeValueError extends Error {
   }
 }
 
-export class DomEditPersistUnsupportedTextStructureError extends Error {
-  constructor() {
-    super("Couldn't save this text structure change");
-    this.name = "DomEditPersistUnsupportedTextStructureError";
-  }
-}
-
 export type DomEditPersistFailureSelection = Pick<
   DomEditSelection,
   "label" | "hfId" | "id" | "selector" | "selectorIndex" | "sourceFile"

package/src/hooks/useAppHotkeys.test.ts

@@ -0,0 +1,198 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { dispatchModifierKey, dispatchPlainKey } from "./useAppHotkeys";
+import { usePlayerStore } from "../player/store/playerStore";
+import { clearAutomationClipboard, copyRange } from "../player/components/automationClipboard";
+import { VOLUME_RANGE } from "@hyperframes/core/audio-automation";
+import type { TimelineElement } from "../player/store/timelineElement";
+
+/** Minimal valid fixture — TimelineElement only requires these five fields. */
+const bgmElement: TimelineElement = {
+  id: "bgm",
+  key: "bgm",
+  tag: "audio",
+  start: 0,
+  duration: 6,
+  track: 0,
+};
+
+/** Every callback dispatchPlainKey can reach, so a test can assert which one
+ *  a key resolved to. Unannotated on purpose: the parameter type is not
+ *  exported, and structural inference checks it at the call site. */
+function callbacks() {
+  return {
+    handleTimelineElementDelete: vi.fn(async () => {}),
+    handleTimelineElementSplit: vi.fn(async () => {}),
+    handleDomEditElementDelete: vi.fn(async () => {}),
+    handleUndo: vi.fn(async () => {}),
+    handleRedo: vi.fn(async () => {}),
+    handleCopy: vi.fn(() => false),
+    handlePaste: vi.fn(async () => {}),
+    handleCut: vi.fn(async () => false),
+    onResetKeyframes: vi.fn(() => true),
+    onDeleteSelectedKeyframes: vi.fn(),
+    showToast: vi.fn(),
+    leftSidebarRef: { current: null },
+    domEditSelectionRef: { current: null },
+  };
+}
+
+const press = (key: string) =>
+  new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
+
+const chord = (key: string) =>
+  new KeyboardEvent("keydown", { key, metaKey: true, bubbles: true, cancelable: true });
+
+afterEach(() => {
+  clearAutomationClipboard();
+  usePlayerStore.getState().clearAutomationSelection();
+  usePlayerStore.setState({
+    elements: [],
+    selectedElementId: null,
+    selectedElementIds: new Set<string>(),
+    selectedKeyframes: new Set<string>(),
+  });
+});
+
+describe("dispatchPlainKey — Delete arbitration", () => {
+  const selectBgm = () =>
+    usePlayerStore.setState({ elements: [bgmElement], selectedElementId: "bgm" });
+
+  const selectRange = () =>
+    usePlayerStore
+      .getState()
+      .setAutomationSelection({ elementKey: "bgm", target: "volume", t0: 2, t1: 4 });
+
+  it("deletes the selected clip when no automation range is active", () => {
+    selectBgm();
+    const cb = callbacks();
+    const e = press("Delete");
+    dispatchPlainKey(e, "delete", cb);
+    // The pre-existing contract, pinned so the new guard cannot widen.
+    expect(cb.handleTimelineElementDelete).toHaveBeenCalledTimes(1);
+    expect(e.defaultPrevented).toBe(true);
+  });
+
+  it("leaves the clip alone when an automation range is active", () => {
+    // The bug: this listener is on window/capture so it runs BEFORE
+    // useAutomationSelectionKeyboard's document/capture handler. Without the
+    // guard, clearing a 2s automation range deleted the whole audio clip.
+    selectBgm();
+    selectRange();
+    const cb = callbacks();
+    const e = press("Delete");
+    dispatchPlainKey(e, "delete", cb);
+    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+    // Must NOT be consumed: the automation handler downstream still needs it.
+    expect(e.defaultPrevented).toBe(false);
+  });
+
+  it("leaves keyframe reset alone when an automation range is active", () => {
+    // Backspace's reset-keyframes branch sits below the guard, so it has to be
+    // covered too — otherwise Backspace wiped every keyframe on the clip.
+    selectBgm();
+    usePlayerStore.setState({
+      keyframeCache: new Map([["bgm", { targets: [], version: 0 }]]),
+    });
+    selectRange();
+    const cb = callbacks();
+    const e = press("Backspace");
+    dispatchPlainKey(e, "backspace", cb);
+    expect(cb.onResetKeyframes).not.toHaveBeenCalled();
+    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+    expect(e.defaultPrevented).toBe(false);
+  });
+
+  it("still lets a keyframe selection win over an automation range", () => {
+    // Ordering: the keyframe guard precedes the automation one, so a keyframe
+    // selection keeps Delete even with a range showing.
+    selectBgm();
+    selectRange();
+    usePlayerStore.setState({ selectedKeyframes: new Set(["bgm:opacity:0"]) });
+    const cb = callbacks();
+    const e = press("Delete");
+    dispatchPlainKey(e, "delete", cb);
+    expect(cb.onDeleteSelectedKeyframes).toHaveBeenCalledTimes(1);
+    expect(cb.handleTimelineElementDelete).not.toHaveBeenCalled();
+    expect(e.defaultPrevented).toBe(true);
+  });
+});
+
+describe("dispatchModifierKey — Cmd+C/Cmd+V arbitration", () => {
+  const clip: TimelineElement = {
+    id: "bgm",
+    key: "bgm",
+    tag: "audio",
+    start: 0,
+    duration: 6,
+    track: 0,
+  };
+
+  it("lets the clip clipboard have Cmd+C when no automation range is active", () => {
+    usePlayerStore.setState({ elements: [clip], selectedElementId: "bgm" });
+    const cb = callbacks();
+    dispatchModifierKey(chord("c"), "c", cb);
+    expect(cb.handleCopy).toHaveBeenCalled();
+  });
+
+  it("keeps Cmd+C from the clip clipboard when an automation range is active", () => {
+    // Both clipboards arming on one press double-wrote and toasted "Copied clip".
+    usePlayerStore.setState({ elements: [clip], selectedElementId: "bgm" });
+    usePlayerStore.getState().setAutomationSelection({
+      elementKey: "bgm",
+      target: "volume",
+      t0: 1,
+      t1: 3,
+    });
+    const cb = callbacks();
+    const e = chord("c");
+    expect(dispatchModifierKey(e, "c", cb)).toBe(true);
+    expect(cb.handleCopy).not.toHaveBeenCalled();
+    // No preventDefault: the automation handler downstream still needs the key.
+    expect(e.defaultPrevented).toBe(false);
+  });
+
+  it("lets the clip clipboard have Cmd+V when the automation clipboard is empty", () => {
+    // Nothing to paste means nothing to claim — the clip paste should still run.
+    clearAutomationClipboard();
+    usePlayerStore.setState({ elements: [clip], selectedElementId: "bgm" });
+    usePlayerStore.getState().setAutomationSelection({
+      elementKey: "bgm",
+      target: "volume",
+      t0: 1,
+      t1: 3,
+    });
+    const cb = callbacks();
+    dispatchModifierKey(chord("v"), "v", cb);
+    expect(cb.handlePaste).toHaveBeenCalled();
+  });
+
+  it("keeps Cmd+V from duplicating the clip while an automation paste is pending", () => {
+    clearAutomationClipboard();
+    copyRange(
+      null,
+      {
+        target: "volume",
+        points: [
+          { t: 1, v: 1 },
+          { t: 3, v: 0.25 },
+        ],
+      },
+      VOLUME_RANGE,
+      1,
+      3,
+    );
+    usePlayerStore.setState({ elements: [clip], selectedElementId: "bgm" });
+    usePlayerStore.getState().setAutomationSelection({
+      elementKey: "bgm",
+      target: "volume",
+      t0: 1,
+      t1: 3,
+    });
+    const cb = callbacks();
+    const e = chord("v");
+    dispatchModifierKey(e, "v", cb);
+    expect(cb.handlePaste).not.toHaveBeenCalled();
+    expect(e.defaultPrevented).toBe(false);
+  });
+});

package/src/hooks/useAppHotkeys.ts

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useRef } from "react";
+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 { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
+import { isTypingTarget } from "../utils/typingTarget";
 import { isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
@@ -158,7 +160,14 @@ interface HotkeyCallbacks {
   showToast: (message: string, tone?: "error" | "info") => void;
 }
 
-function dispatchModifierKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks): boolean {
+/** 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(
@@ -188,7 +197,7 @@ function dispatchModifierKey(event: KeyboardEvent, key: string, cb: HotkeyCallba
     return true;
   }
 
-  if (key === "g" && !event.altKey && !isEditableTarget(event.target)) {
+  if (key === "g" && !event.altKey && !isTypingTarget(event.target)) {
     event.preventDefault();
     if (event.shiftKey) cb.onUngroupSelection?.();
     else cb.onGroupSelection?.();
@@ -196,6 +205,14 @@ function dispatchModifierKey(event: KeyboardEvent, key: string, cb: HotkeyCallba
   }
 
   if (!event.shiftKey && !event.altKey && !isEditableTarget(event.target)) {
+    // An active automation range owns Cmd+C/Cmd+V, the same way it owns Delete
+    // below. This listener is on window/capture and runs before
+    // useAutomationSelectionKeyboard's document/capture handler, so without
+    // this the clip clipboard also claimed the key: Cmd+V duplicated the clip
+    // while the automation paste wrote the same file, and Cmd+C armed both
+    // clipboards and toasted "Copied clip". Return without preventDefault so
+    // the downstream handler still sees the key.
+    if (automationOwnsKey(event)) return true;
     if (key === "c") {
       if (cb.handleCopy()) {
         event.preventDefault();
@@ -222,7 +239,10 @@ function dispatchModifierKey(event: KeyboardEvent, key: string, cb: HotkeyCallba
 }
 
 // fallow-ignore-next-line complexity
-function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks): void {
+/** 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();
@@ -288,6 +308,13 @@ function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks
       event.preventDefault();
       return;
     }
+    // An active automation range owns Delete: useAutomationSelectionKeyboard
+    // empties the range in place, pinning the anchors. Fall through WITHOUT
+    // preventDefault so that document-level handler still sees the key — this
+    // listener is on window/capture, so it runs first and everything below
+    // would otherwise win. Without this the press reaches the clip delete
+    // below and destroys the whole clip the lane belongs to.
+    if (usePlayerStore.getState().automationSelection) return;
     if (event.key === "Backspace") {
       const { selectedElementId, keyframeCache } = usePlayerStore.getState();
       if (selectedElementId && keyframeCache.has(selectedElementId) && cb.onResetKeyframes()) {
@@ -454,7 +481,7 @@ export function useAppHotkeys({
       dispatchModifierKey(event, key, cb);
       return;
     }
-    if (!isEditableTarget(event.target)) dispatchPlainKey(event, key, cb);
+    if (!isTypingTarget(event.target)) dispatchPlainKey(event, key, cb);
   }, []);
 
   // eslint-disable-next-line no-restricted-syntax