@hyperframes/studio 0.8.108 → 0.8.110

package/src/player/components/useTimelineClipDrag.ts

@@ -27,6 +27,8 @@ import type {
   BlockedClipState,
 } from "./timelineClipDragTypes";
 import { getTimelineElementIndexes } from "../lib/timelineElementIndexes";
+import { dropMisalignedTrimPartners, linkedGestureKeys } from "./audioClipLink";
+import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
 import type { TimelineRowGeometry } from "./timelineLayout";
 import {
   mountTimelineClipDragGestureLifecycle,
@@ -65,6 +67,7 @@ interface UseTimelineClipDragInput {
   ) => Promise<void> | void;
   onResizeElements?: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedClipState["intent"]) => void;
+  onLinkEdit?: TimelineEditCallbacks["onLinkEdit"];
   /** Seeks the preview; a trim shows the frame at its dragged edge. */
   onSeek?: (time: number, options?: { keepPlaying?: boolean; follow?: boolean }) => void;
   setShowPopover: (show: boolean) => void;
@@ -95,6 +98,7 @@ export function useTimelineClipDrag({
   onResizeElement,
   onResizeElements,
   onBlockedEditAttempt,
+  onLinkEdit,
   onSeek,
   setShowPopover,
   setRangeSelectionRef,
@@ -220,6 +224,13 @@ export function useTimelineClipDrag({
         return;
       }
       beginGesture("drag", next.pointerId);
+      gestureSelectedKeysRef.current = linkedGestureKeys(
+        gestureSelectedKeysRef.current,
+        next.element,
+        elementsRef.current,
+        next.altKey === true,
+        isLinkedSelectionOn(),
+      );
       publishDraggedClip(next);
     },
     [beginGesture, publishDraggedClip],
@@ -231,6 +242,18 @@ export function useTimelineClipDrag({
         return;
       }
       beginGesture("resize", next.pointerId);
+      gestureSelectedKeysRef.current = dropMisalignedTrimPartners(
+        linkedGestureKeys(
+          gestureSelectedKeysRef.current,
+          next.element,
+          elementsRef.current,
+          next.altKey === true,
+          isLinkedSelectionOn(),
+        ),
+        next.element,
+        elementsRef.current,
+        next.edge,
+      );
       publishResizingClip(next);
     },
     [beginGesture, publishResizingClip],
@@ -249,6 +272,8 @@ export function useTimelineClipDrag({
   onMoveElementsRef.current = onMoveElements;
   const onBlockedEditAttemptRef = useRef(onBlockedEditAttempt);
   onBlockedEditAttemptRef.current = onBlockedEditAttempt;
+  const onLinkEditRef = useRef(onLinkEdit);
+  onLinkEditRef.current = onLinkEdit;
   const onResizeElementRef = useRef(onResizeElement);
   onResizeElementRef.current = onResizeElement;
   const onResizeElementsRef = useRef(onResizeElements);
@@ -304,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) => {
@@ -422,6 +449,7 @@ export function useTimelineClipDrag({
       refreshAfterLaneMoveRef,
       readZIndexRef,
       onBlockedEditAttemptRef,
+      onLinkEditRef,
       onResizeElementsRef,
       onResizeElementRef,
       onMoveElementsRef,

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

@@ -86,6 +86,7 @@ export function useTimelineProviderState({
     onResizeElement,
     onResizeElements,
     onBlockedEditAttempt,
+    onLinkEdit,
     onSplitElement,
     onRazorSplitAll,
     onDeleteKeyframe,
@@ -105,6 +106,7 @@ export function useTimelineProviderState({
   const readOnlyPress = useTimelineReadOnlyPress();
   const oneShotEdits = refuseWhenReadOnly(readOnlyPress, {
     onBlockedEditAttempt,
+    onLinkEdit,
     onRazorSplitAll,
     onToggleTrackHidden: editContext.onToggleTrackHidden,
     onTogglePropertyGroupKeyframe: editContext.onTogglePropertyGroupKeyframe,
@@ -217,6 +219,7 @@ export function useTimelineProviderState({
     onResizeElement: pinnedOnResizeElement,
     onResizeElements: pinnedOnResizeElements,
     onBlockedEditAttempt: oneShotEdits.onBlockedEditAttempt,
+    onLinkEdit: oneShotEdits.onLinkEdit,
     onSeek,
     setShowPopover,
     setRangeSelectionRef,
@@ -417,7 +420,6 @@ export function useTimelineProviderState({
     gapHighlight,
     openGapMenu,
     onContextMenuClip,
-    shiftClickClipRef,
     marqueeRect,
     isScrubbing,
     handlePointerDown,
@@ -500,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/player/hooks/timelinePlayerSync.test.ts

@@ -13,9 +13,15 @@ describe("timelineElementsChanged", () => {
     ["audio group hidden", { audioGroupHidden: true }],
     ["fade in", { fadeIn: 1 }],
     ["fade out", { fadeOut: 1 }],
+    ["link", { link: "lk-1" }],
     ["source (re-pointed at its preview copy)", { src: "clip1.mp4?hf-proxy=h264" }],
   ])("sees a clip whose %s changed with no timing change", (_name, change) => {
     expect(timelineElementsChanged([clip], [{ ...clip, ...change }])).toBe(true);
     expect(timelineElementsChanged([{ ...clip, ...change }], [{ ...clip, ...change }])).toBe(false);
   });
+
+  it("sees an unlink: the same clips re-derived without their link", () => {
+    const linked = { ...clip, link: "lk-1" };
+    expect(timelineElementsChanged([linked], [clip])).toBe(true);
+  });
 });

package/src/player/hooks/timelinePlayerSync.ts

@@ -16,6 +16,7 @@ const RENDERED_FIELDS: readonly (keyof TimelineElement)[] = [
   "fadeIn",
   "fadeOut",
   "src",
+  "link",
 ];
 
 /** Whether a derived timeline changes any field that affects rendering. */

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -15,6 +15,7 @@ import type { PlaybackAdapter, IframeWindow } from "../lib/playbackTypes";
 import { readTimelineDurationFromDocument } from "../lib/timelineDOM";
 import { buildMissingCompositionElements } from "../lib/timelineIframeHelpers";
 import { acceptedRuntimeMessageFps } from "../lib/runtimeProtocol";
+import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
 import {
   buildTimelineElementsFromClips,
   syncManifestTimeline,
@@ -196,8 +197,10 @@ export function useTimelineSyncCallbacks({
       // at the authored root `data-duration` so a runtime that measures only the
       // furthest clip end (shorter than the authored window) can't leave a stale,
       // too-short total in the transport (the "0:44/0:40" bug).
+      const fps = acceptedRuntimeMessageFps(data);
+      useLinkedClipPreferences.getState().setCompositionFps(fps);
       const newDuration = resolveTimelineTotalDuration({
-        manifestDurationSeconds: data.durationInFrames / acceptedRuntimeMessageFps(data),
+        manifestDurationSeconds: data.durationInFrames / fps,
         authoredRootDurationSeconds: readTimelineDurationFromDocument(iframeDoc),
       });
       syncManifestTimeline(

package/src/player/lib/timelineDOM.test.ts

@@ -281,6 +281,37 @@ describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
 
     expect(element.hidden).toBe(true);
   });
+
+  it("reads data-link and data-sync-origin on both the DOM and manifest paths", () => {
+    const doc = makeDoc(`
+      <div data-composition-id="root">
+        <video id="talk" class="clip" src="t.mp4" muted data-link="lk-1" data-sync-origin="lk-1" data-start="0" data-duration="5"></video>
+      </div>
+    `);
+    const fromDom = parseTimelineFromDOM(doc, 10).find((el) => el.domId === "talk");
+    expect(fromDom?.link).toBe("lk-1");
+    expect(fromDom?.syncOrigin).toBe("lk-1");
+    const element = createTimelineElementFromManifestClip({
+      clip: {
+        id: "talk",
+        label: "Talk",
+        kind: "element",
+        tagName: "video",
+        start: 0,
+        duration: 5,
+        track: 0,
+        compositionId: null,
+        parentCompositionId: null,
+        compositionSrc: null,
+        assetUrl: null,
+      },
+      fallbackIndex: 0,
+      doc,
+      hostEl: doc.getElementById("talk"),
+    });
+    expect(element.link).toBe("lk-1");
+    expect(element.syncOrigin).toBe("lk-1");
+  });
 });
 
 describe("group info cache", () => {

package/src/player/lib/timelineDOM.ts

@@ -12,6 +12,7 @@ import type { TimelineElement } from "../store/playerStore";
 import type { ClipManifestClip, IframeWindow, TimelineLike } from "./playbackTypes";
 import { resolveCssStackingContextId } from "@hyperframes/core/runtime/stacking-context";
 import { readClipTiming } from "@hyperframes/core/composition-contract";
+import { linkScopeOf } from "@hyperframes/core/media-link";
 import { createRuntimeStartTimeResolver } from "@hyperframes/core/runtime/start-resolver";
 import { groupInfoFor } from "./timelineGroupInfo";
 import { transitionLabelsForDocument } from "./timelineTransitionMetadata";
@@ -150,6 +151,12 @@ export function createTimelineElementFromManifestClip(params: {
     if (hostEl.hasAttribute("data-hidden")) entry.hidden = true;
     const timelineRole = hostEl.getAttribute("data-timeline-role");
     if (timelineRole) entry.timelineRole = timelineRole;
+    const link = hostEl.getAttribute("data-link");
+    if (link) entry.link = link;
+    const compositionScope = linkScopeOf(hostEl)?.getAttribute("data-composition-id");
+    if (compositionScope) entry.compositionScope = compositionScope;
+    const syncOrigin = hostEl.getAttribute("data-sync-origin");
+    if (syncOrigin) entry.syncOrigin = syncOrigin;
     const audioGroup = hostEl.getAttribute("data-audio-group");
     if (audioGroup) {
       entry.audioGroup = audioGroup;
@@ -337,6 +344,12 @@ export function parseTimelineFromDOM(
 
     const timelineRole = el.getAttribute("data-timeline-role");
     if (timelineRole) entry.timelineRole = timelineRole;
+    const domLink = el.getAttribute("data-link");
+    if (domLink) entry.link = domLink;
+    const domCompositionScope = linkScopeOf(el)?.getAttribute("data-composition-id");
+    if (domCompositionScope) entry.compositionScope = domCompositionScope;
+    const domSyncOrigin = el.getAttribute("data-sync-origin");
+    if (domSyncOrigin) entry.syncOrigin = domSyncOrigin;
 
     const domAudioGroup = el.getAttribute("data-audio-group");
     if (domAudioGroup) {

package/src/player/store/timelineElement.ts

@@ -83,6 +83,9 @@ export interface TimelineElement {
   /** The owning group's serialized `data-fx-chain`, when set — resolved once per parse. */
   audioGroupFxChain?: string;
   audioGroupAutomation?: string;
+  link?: string;
+  compositionScope?: string;
+  syncOrigin?: string;
   /**
    * Master start of the composition this row runs in, which its tweens and its
    * `data-start` are local to; 0 at the root. Writes go through toAuthoredStart.
@@ -116,6 +119,15 @@ export function toCompositionTime(element: RowClock, masterTime: number): number
   return masterTime - (element.parentCompositionStart ?? 0);
 }
 
+type CompositionScoped = Pick<TimelineElement, "sourceFile" | "compositionScope">;
+
+export function sameCompositionScope(a: CompositionScoped, b: CompositionScoped): boolean {
+  return (
+    (a.sourceFile ?? "") === (b.sourceFile ?? "") &&
+    (a.compositionScope ?? "") === (b.compositionScope ?? "")
+  );
+}
+
 /**
  * The fields `updateElement` may write.
  *

package/src/styles/components.css

@@ -296,17 +296,6 @@
   transition: none;
 }
 
-.timeline-audio-link {
-  position: absolute;
-  z-index: 4;
-  top: -9px;
-  left: 50%;
-  width: 1px;
-  height: 10px;
-  background: var(--timeline-audio-link);
-  pointer-events: none;
-}
-
 .timeline-clip.is-hovered {
   background-color: var(--clip-bg-hover);
 }
@@ -362,6 +351,16 @@
   white-space: nowrap;
 }
 
+/* Link groups share a label colour on the border and the name chip. */
+.timeline-clip[data-link-color] {
+  border-color: var(--clip-link-color);
+}
+
+.timeline-clip[data-link-color] .timeline-clip__label {
+  box-shadow: inset 3px 0 0 var(--clip-link-color);
+  padding-left: 8px;
+}
+
 .timeline-clip.is-audio .timeline-clip__label {
   top: 11px;
   left: 9px;
@@ -517,6 +516,23 @@
   transition: transform 160ms ease;
 }
 
+/* The caret of a text edited in place (InlineTextCaret): lit half the time, like the system caret */
+.hf-inline-text-caret {
+  animation: hf-inline-text-caret-blink 1.06s step-end infinite;
+}
+
+@keyframes hf-inline-text-caret-blink {
+  50% {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hf-inline-text-caret {
+    animation: none;
+  }
+}
+
 /* Toast enter/exit (StudioToast) */
 @keyframes hf-toast-in {
   from {

package/src/styles/theme.css

@@ -117,7 +117,6 @@
   --timeline-clip-audio-bg-hover: oklch(0.49 0.12 300);
   --timeline-clip-audio-bg-dragging: oklch(0.42 0.12 300 / 0.96);
   --timeline-clip-audio-muted-bg: rgb(72, 74, 78);
-  --timeline-audio-link: light-dark(#626d66, #a0aaa4);
   --timeline-clip-selection: light-dark(#0f766e, rgba(255, 255, 255, 0.85));
   --timeline-clip-selection-highlight: rgb(255 255 255 / 0.55);
   --timeline-clip-radius: 8px;