@hyperframes/studio 0.8.109 → 0.8.111

package/src/player/components/timelineEditing.ts

@@ -382,17 +382,6 @@ export function resolveBlockedTimelineEditIntent(input: {
   return "move";
 }
 
-export function buildClipRangeSelection(
-  clip: { start: number; duration: number },
-  anchor: { anchorX: number; anchorY: number },
-): TimelineRangeSelection {
-  return {
-    start: clip.start,
-    end: clip.start + clip.duration,
-    anchorX: anchor.anchorX,
-    anchorY: anchor.anchorY,
-  };
-}
 export function buildTimelineAgentPrompt({
   rangeStart,
   rangeEnd,

package/src/player/components/timelineLaneProps.ts

@@ -66,11 +66,6 @@ export interface TimelineLaneBaseProps {
   setResizingClip: (v: ResizingClipState | null) => void;
   setDraggedClip: (v: DraggedClipState | null) => void;
   setSelectedElementId: (id: string | null) => void;
-  shiftClickClipRef: React.RefObject<{
-    element: TimelineElement;
-    anchorX: number;
-    anchorY: number;
-  } | null>;
   getPreviewElement: (element: TimelineElement) => TimelineElement;
   getTrackStyle: (tag: string) => TrackVisualStyle;
   keyframeCache?: Map<string, KeyframeCacheEntry>;

package/src/player/components/timelineLinkSelection.ts

@@ -1,5 +1,5 @@
-import { usePlayerStore } from "../store/playerStore";
-import { expandToLinkedMembers } from "./audioClipLink";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { expandToLinkedMembers, linkedMembersOf } from "./audioClipLink";
 import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
 
 /**
@@ -21,3 +21,21 @@ export function selectClipWithLinks(
   const expanded = expandToLinkedMembers(selectedElementIds, elements);
   if (expanded.size > selectedElementIds.size) state.setSelection(expanded, key);
 }
+
+export function toggleClipWithLinks(key: string, altKey: boolean): TimelineElement | null {
+  const state = usePlayerStore.getState();
+  const element = state.elements.find((el) => (el.key ?? el.id) === key);
+  const members = element
+    ? linkedMembersOf(element, state.elements, !altKey && isLinkedSelectionOn())
+    : [];
+  const memberKeys = members.length > 0 ? members.map((el) => el.key ?? el.id) : [key];
+  const next = new Set(state.selectedElementIds);
+  const removing = next.has(key);
+  for (const memberKey of memberKeys) {
+    if (removing) next.delete(memberKey);
+    else next.add(memberKey);
+  }
+  state.setSelection(next, removing ? state.selectedElementId : key);
+  const primary = usePlayerStore.getState().selectedElementId;
+  return state.elements.find((el) => (el.key ?? el.id) === primary) ?? null;
+}

package/src/player/components/timelineViewportGeometry.ts

@@ -40,7 +40,10 @@ export function getTimelineScrollTopForGeometryChange(
   previous: TimelineRowGeometry,
   next: TimelineRowGeometry,
   scrollTop: number,
+  dragAutoScrollOwnsScrollTop = false,
 ): number {
+  const atTopSoRowsAddedAboveStayShown = scrollTop <= 0;
+  if (dragAutoScrollOwnsScrollTop || atTopSoRowsAddedAboveStayShown) return scrollTop;
   const anchor = previous.getRowPositionFromY(scrollTop + RULER_H);
   if (anchor.row < 0 || anchor.row >= previous.rowKeys.length) return scrollTop;
   const anchorKey = previous.rowKeys[anchor.row];

package/src/player/components/useClipToolState.ts

@@ -11,14 +11,11 @@ import { committedClipPath } from "../../components/editor/cropPresetStore";
 import { isAudibleVideoNode } from "../lib/timelineElementHelpers";
 import type { ClipToolState } from "./clipToolAttrs";
 
-const LINK_ATTR = "data-link";
-
 const WATCHED_ATTRS = [
   HF_AUDIO_FX_ATTR,
   HF_AUDIO_AUTOMATION_ATTR,
   HF_AUDIO_CARVE_ATTR,
   HF_COLOR_GRADING_ATTR,
-  LINK_ATTR,
   "data-volume",
   "data-has-audio",
   "muted",
@@ -42,7 +39,6 @@ function toolStateFromNode(node: Element): ClipToolState {
     colorGrading: node.getAttribute(HF_COLOR_GRADING_ATTR),
     clipPath: committedClipPath(node),
     carve: node.getAttribute(HF_AUDIO_CARVE_ATTR),
-    link: node.getAttribute(LINK_ATTR),
   };
 }
 
@@ -58,7 +54,6 @@ function toolStateFromElement(el: TimelineElement): ClipToolState {
     colorGrading: null,
     clipPath: null,
     carve: null,
-    link: null,
   };
 }
 

package/src/player/components/useTimelineClipDrag.ts

@@ -27,7 +27,7 @@ import type {
   BlockedClipState,
 } from "./timelineClipDragTypes";
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
-import { linkedGestureKeys } from "./audioClipLink";
+import { dropMisalignedTrimPartners, linkedGestureKeys } from "./audioClipLink";
 import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
 import type { TimelineRowGeometry } from "./timelineLayout";
 import {
@@ -242,12 +242,17 @@ export function useTimelineClipDrag({
         return;
       }
       beginGesture("resize", next.pointerId);
-      gestureSelectedKeysRef.current = linkedGestureKeys(
-        gestureSelectedKeysRef.current,
+      gestureSelectedKeysRef.current = dropMisalignedTrimPartners(
+        linkedGestureKeys(
+          gestureSelectedKeysRef.current,
+          next.element,
+          elementsRef.current,
+          next.altKey === true,
+          isLinkedSelectionOn(),
+        ),
         next.element,
         elementsRef.current,
-        next.altKey === true,
-        isLinkedSelectionOn(),
+        next.edge,
       );
       publishResizingClip(next);
     },
@@ -324,6 +329,8 @@ export function useTimelineClipDrag({
         scroll: scrollRef.current,
         pps: ppsRef.current,
         buildSnapTargets,
+        elements: elementsRef.current,
+        gestureKeys: gestureSelectedKeysRef.current,
       });
       trimSeekOriginRef.current ??= usePlayerStore.getState().currentTime;
       const setResizeState = (v: ResizePreviewResult) => {

package/src/player/components/useTimelineOverlaysState.ts

@@ -32,7 +32,6 @@ type OverlayStateInputs = Omit<
 
 export type TimelineOverlaysStateResult = {
   overlays: TimelineOverlaysState;
-  shiftClickClipRef: ReturnType<typeof useTimelineRangeSelection>["shiftClickClipRef"];
   marqueeRect: ReturnType<typeof useTimelineRangeSelection>["marqueeRect"];
   isScrubbing: ReturnType<typeof useTimelineRangeSelection>["isScrubbing"];
   handlePointerDown: ReturnType<typeof useTimelineRangeSelection>["handlePointerDown"];
@@ -55,7 +54,6 @@ export function useTimelineOverlaysState({
   const {
     rangeSelection,
     setRangeSelection,
-    shiftClickClipRef,
     marqueeRect,
     isScrubbing,
     handlePointerDown,
@@ -86,7 +84,6 @@ export function useTimelineOverlaysState({
       onCloseAllTrackGaps: gap.closeAllTrackGaps,
       onHoverGapAction: gap.setHoveredGapAction,
     },
-    shiftClickClipRef,
     marqueeRect,
     isScrubbing,
     handlePointerDown,

package/src/player/components/useTimelineProviderState.tsx

@@ -420,7 +420,6 @@ export function useTimelineProviderState({
     gapHighlight,
     openGapMenu,
     onContextMenuClip,
-    shiftClickClipRef,
     marqueeRect,
     isScrubbing,
     handlePointerDown,
@@ -503,7 +502,6 @@ export function useTimelineProviderState({
     setResizingClip,
     setDraggedClip,
     setSelectedElementId,
-    shiftClickClipRef,
     getPreviewElement,
     getTrackStyle,
     keyframeCache,

package/src/player/components/useTimelineRangeSelection.ts

@@ -1,6 +1,5 @@
 import { useRef, useState, useCallback, useEffect } from "react";
 import {
-  buildClipRangeSelection,
   applyTimelineAutoScrollStep,
   resolveTimelineAutoScrollLoopAction,
   type TimelineRangeSelection,
@@ -149,11 +148,6 @@ export function useTimelineRangeSelection({
   // rendering). Drives the playhead head's filled-vs-hollow state.
   const [isScrubbing, setIsScrubbing] = useState(false);
   const [rangeSelection, setRangeSelection] = useState<TimelineRangeSelection | null>(null);
-  const shiftClickClipRef = useRef<{
-    element: TimelineElement;
-    anchorX: number;
-    anchorY: number;
-  } | null>(null);
 
   const seekRafRef = useRef(0);
   const pendingClientXRef = useRef(0);
@@ -322,7 +316,6 @@ export function useTimelineRangeSelection({
         beginRangeSelection(e);
         return;
       }
-      shiftClickClipRef.current = null;
       if ((e.target as HTMLElement).closest("[data-clip]")) return;
       (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
       activePointerIdRef.current = e.pointerId;
@@ -427,13 +420,7 @@ export function useTimelineRangeSelection({
   // clip range), otherwise clear it.
   const finishRangeSelection = useCallback(() => {
     isRangeSelecting.current = false;
-    const pendingShiftClick = shiftClickClipRef.current;
-    shiftClickClipRef.current = null;
     setRangeSelection((prev) => {
-      if (prev && pendingShiftClick && Math.abs(prev.end - prev.start) <= 0.2) {
-        setShowPopover(true);
-        return buildClipRangeSelection(pendingShiftClick.element, pendingShiftClick);
-      }
       if (prev && Math.abs(prev.end - prev.start) > 0.2) {
         setShowPopover(true);
         return prev;
@@ -589,7 +576,6 @@ export function useTimelineRangeSelection({
   return {
     rangeSelection,
     setRangeSelection,
-    shiftClickClipRef,
     marqueeRect,
     isScrubbing,
     handlePointerDown,

package/src/player/components/useTimelineRowVirtualization.ts

@@ -120,6 +120,7 @@ export function useTimelineRowVirtualization({
         previousGeometry,
         rowGeometry,
         scroll.scrollTop,
+        draggedRowKey !== undefined,
       );
       if (nextScrollTop !== scroll.scrollTop) {
         scroll.scrollTop = nextScrollTop;
@@ -127,7 +128,7 @@ export function useTimelineRowVirtualization({
       }
     }
     previousLayoutRef.current = rowGeometry;
-  }, [lastScrollLeftRef, rowGeometry, scrollRef, sessionEpoch, syncScrollViewport]);
+  }, [draggedRowKey, lastScrollLeftRef, rowGeometry, scrollRef, sessionEpoch, syncScrollViewport]);
 
   return {
     enabled,

package/src/utils/sdkCutover.linkedTiming.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it, vi } from "vitest";
+import { openComposition } from "@hyperframes/sdk";
+import { cutoverCommittedOrThrow, sdkTimingBatchPersist } from "./sdkCutover";
+import { getStudioSaveErrorMessage } from "./studioSaveDiagnostics";
+
+vi.mock("../components/editor/manualEditingAvailability", () => ({
+  STUDIO_SDK_CUTOVER_ENABLED: true,
+  STUDIO_SDK_RESOLVER_SHADOW_ENABLED: false,
+}));
+vi.mock("./studioTelemetry", () => ({
+  trackStudioEvent: vi.fn(),
+}));
+
+const OFFSET_LINKED_HTML = `
+<div data-hf-id="hf-stage" data-hf-root style="width:1280px;height:720px" data-duration="10">
+  <video data-hf-id="hf-talk" src="talk.mp4" muted data-link="lk-1" data-start="2" data-duration="6" data-track-index="0"></video>
+  <audio data-hf-id="hf-talk-audio" src="talk.mp4" data-link="lk-1" data-start="3" data-duration="5" data-track-index="2"></audio>
+</div>
+`.trim();
+
+describe("a linked trim the SDK refuses", () => {
+  it("fails the cutover with the SDK's reason, which the resize toast shows, and writes nothing", async () => {
+    const session = await openComposition(OFFSET_LINKED_HTML);
+    const before = session.serialize();
+    const deps = {
+      editHistory: { recordEdit: vi.fn().mockResolvedValue(undefined) },
+      writeProjectFile: vi.fn().mockResolvedValue(undefined),
+      reloadPreview: vi.fn(),
+      publishSession: vi.fn(),
+      createCandidateSession: async () => session,
+    };
+    const result = await sdkTimingBatchPersist(
+      [{ hfId: "hf-talk", timingUpdate: { start: 2, duration: 0.5 } }],
+      "index.html",
+      session,
+      deps,
+    );
+    expect(result.status).toBe("failed");
+    let thrown: unknown;
+    try {
+      cutoverCommittedOrThrow(result);
+    } catch (error) {
+      thrown = error;
+    }
+    expect(getStudioSaveErrorMessage(thrown)).toBe(
+      "Linked audio would start after the new end — unlink or trim the audio first.",
+    );
+    expect(deps.writeProjectFile).not.toHaveBeenCalled();
+    expect(deps.editHistory.recordEdit).not.toHaveBeenCalled();
+    expect(session.serialize()).toBe(before);
+  });
+});

package/src/utils/studioPendingEdits.test.ts

@@ -10,6 +10,7 @@ import {
   trackedStudioEdit,
 } from "./studioPendingEdits";
 import { StudioFileConflictError } from "./studioSaveDiagnostics";
+import { revertNewestStudioPendingEdit as hostRevert } from "../index";
 
 describe("studio pending edit flush", () => {
   it("waits for mounted panels to persist pending local edits", async () => {
@@ -277,3 +278,20 @@ describe("a pending edit whose start throws", () => {
     expect(hasStudioPendingEdits()).toBe(false);
   });
 });
+
+describe("the package's public revert", () => {
+  it("lets a host's own undo key paint a still-saving move back at once", async () => {
+    let left = "120px";
+    const edit = beginStudioPendingEdit(() => ((left = "0px"), () => void (left = "120px")));
+    try {
+      const putBack = hostRevert();
+      expect(left).toBe("0px");
+      expect(hostRevert()).toBeNull();
+      putBack?.();
+      expect(left).toBe("120px");
+    } finally {
+      edit.settle();
+      await flushStudioPendingEdits();
+    }
+  });
+});

package/src/utils/typingTarget.test.ts

@@ -54,6 +54,14 @@ describe("isTypingTarget", () => {
     expect(isTypingTarget(mount('<h1 contenteditable="false">Hi</h1>'))).toBe(false);
   });
 
+  it("keeps a modal dialog's buttons out of the global shortcuts", () => {
+    const host = mount('<div role="dialog" aria-modal="true"><button>OK</button></div>');
+    expect(isTypingTarget(host.querySelector("button"))).toBe(true);
+    expect(
+      isTypingTarget(mount('<div role="dialog"><button>OK</button></div>').querySelector("button")),
+    ).toBe(false);
+  });
+
   it("says no to nothing at all", () => {
     expect(isTypingTarget(null)).toBe(false);
     expect(isTypingTarget({} as EventTarget)).toBe(false);

package/src/utils/typingTarget.ts

@@ -45,6 +45,7 @@ const TYPING_SELECTOR = [
   // `input` and matched above. Without this row the shared Toggle would let a
   // global shortcut claim Space instead of flipping the control (KTD13).
   "[role='switch']",
+  "[role='dialog'][aria-modal='true']",
   ".cm-editor",
 ].join(",");