@hyperframes/studio 0.8.107 → 0.8.109

package/src/player/components/OutOfSyncBadge.tsx

@@ -0,0 +1,119 @@
+import { memo, useCallback, useState, type SyntheticEvent } from "react";
+import { createPortal } from "react-dom";
+import { formatSyncOffset } from "@hyperframes/core/media-link";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
+import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { clipSyncState, type ClipSyncState } from "./clipSync";
+import { useMenuKeyboardNav } from "./menuKeyboardNav";
+
+const stop = (e: SyntheticEvent) => e.stopPropagation();
+
+const MENU_ROW =
+  "block w-full px-3 py-1.5 text-left text-xs text-neutral-300 outline-hidden hover:bg-neutral-800 focus-visible:bg-neutral-800 disabled:opacity-40";
+
+function SyncMenu({
+  x,
+  y,
+  el,
+  sync,
+  onClose,
+}: {
+  x: number;
+  y: number;
+  el: TimelineElement;
+  sync: ClipSyncState<TimelineElement>;
+  onClose: () => void;
+}) {
+  const menuRef = useContextMenuDismiss(onClose);
+  useMenuKeyboardNav(menuRef);
+  const { onLinkEdit } = useTimelineEditContextOptional();
+  const { moveStart, slipMediaStart } = sync;
+  const menuWidth = 170;
+  const menuHeight = 66;
+  const left = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const top = y + menuHeight > window.innerHeight ? Math.max(0, y - menuHeight) : y;
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Out of sync"
+      className="fixed z-200 min-w-[170px] rounded-sm border border-neutral-700 bg-neutral-900 py-1 shadow-lg"
+      style={{ left, top }}
+    >
+      <button
+        type="button"
+        role="menuitem"
+        className={MENU_ROW}
+        disabled={!onLinkEdit || moveStart === null}
+        title={moveStart === null ? "Would move the clip before 0:00" : undefined}
+        onClick={() => {
+          if (moveStart !== null)
+            void onLinkEdit?.({ kind: "move-into-sync", element: el, start: moveStart });
+          onClose();
+        }}
+      >
+        Move into Sync
+      </button>
+      <button
+        type="button"
+        role="menuitem"
+        className={MENU_ROW}
+        disabled={!onLinkEdit || slipMediaStart === null}
+        title={slipMediaStart === null ? "Would slip before the start of the file" : undefined}
+        onClick={() => {
+          if (slipMediaStart !== null) {
+            void onLinkEdit?.({ kind: "slip-into-sync", element: el, mediaStart: slipMediaStart });
+          }
+          onClose();
+        }}
+      >
+        Slip into Sync
+      </button>
+    </div>,
+    document.body,
+  );
+}
+
+/**
+ * Premiere's red out-of-sync number, at the start of each half of a source pair
+ * that drifted. The whole badge opens Move / Slip into Sync (Premiere's own hit
+ * target is a sliver at the badge edge, a known complaint).
+ */
+export const OutOfSyncBadge = memo(function OutOfSyncBadge({ el }: { el: TimelineElement }) {
+  const visible = useLinkedClipPreferences((s) => s.syncIndicatorsVisible);
+  const fps = useLinkedClipPreferences((s) => s.compositionFps);
+  const elements = usePlayerStore((s) => s.elements);
+  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
+  const closeMenu = useCallback(() => setMenuAt(null), []);
+  const sync = visible ? clipSyncState(el, elements, fps) : null;
+  if (!sync) return null;
+  const label = formatSyncOffset(sync.frames, fps);
+  const partnerName = sync.partner.label || sync.partner.id;
+  const open = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenuAt({ x: e.clientX, y: e.clientY });
+  };
+  return (
+    <>
+      <span
+        role="button"
+        tabIndex={-1}
+        aria-haspopup="menu"
+        aria-label={`Out of sync with ${partnerName} by ${label} frames`}
+        title={`Out of sync with ${partnerName} by ${label} — click for Move or Slip into Sync`}
+        data-testid="out-of-sync-badge"
+        className="absolute bottom-0.5 left-1 z-[7] cursor-pointer rounded-[3px] bg-red-600 px-1 font-mono text-[9px] leading-[14px] text-white tabular-nums"
+        onPointerDown={stop}
+        onDoubleClick={stop}
+        onClick={open}
+        onContextMenu={open}
+      >
+        {label}
+      </span>
+      {menuAt && <SyncMenu x={menuAt.x} y={menuAt.y} el={el} sync={sync} onClose={closeMenu} />}
+    </>
+  );
+});

package/src/player/components/TimelineClip.test.tsx

@@ -105,6 +105,23 @@ describe("TimelineClip", () => {
     expect(seen).toEqual([{ fadeIn: 1, fadeOut: 0.5, duration: 4 }, null]);
   });
 
+  it("gives both halves of a link group the same label colour, and unlinked clips none", () => {
+    const colorOf = (element: TimelineElement) => {
+      const { host, root } = renderClip({ element });
+      const clip = host.querySelector<HTMLElement>(".timeline-clip");
+      const color = clip?.getAttribute("data-link-color") ?? null;
+      expect(clip?.style.getPropertyValue("--clip-link-color") || null).toBe(color);
+      act(() => root.unmount());
+      return color;
+    };
+    const base = { start: 0, duration: 2, track: 0 };
+    const video = colorOf({ id: "v", tag: "video", link: "lk-3", ...base });
+    expect(video).not.toBeNull();
+    expect(colorOf({ id: "a", tag: "audio", link: "lk-3", ...base })).toBe(video);
+    expect(colorOf({ id: "b", tag: "audio", link: "lk-4", ...base })).not.toBe(video);
+    expect(colorOf({ id: "c", tag: "audio", ...base })).toBeNull();
+  });
+
   it("renders the clip label above custom content without showing default timecode", () => {
     const { host, root } = renderClip({
       element: { id: "hero", label: "Hero", tag: "div", start: 1, duration: 1, track: 0 },

package/src/player/components/TimelineClip.tsx

@@ -11,6 +11,9 @@ import { isAudioTimelineElement } from "../../utils/timelineInspector";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
 import { ClipFadesContext, TimelineClipFades, useClipFadeDraft } from "./TimelineClipFades";
 import { rendersWaveform } from "./AudioWaveform";
+import { ClipBadges } from "./ClipBadges";
+import { linkLabelColor } from "./linkLabelColor";
+import { OutOfSyncBadge } from "./OutOfSyncBadge";
 
 interface TimelineClipProps {
   el: TimelineElement;
@@ -82,6 +85,8 @@ export const TimelineClip = memo(function TimelineClip({
     "--clip-border-active": theme.clipBorderActive,
     "--clip-handle": theme.handleColor,
   } as CSSProperties;
+  const linkColor = linkLabelColor(el.link);
+  if (linkColor) Object.assign(themeVariables, { "--clip-link-color": linkColor });
   const isAudioClip = isAudioTimelineElement(el);
   const hasFades = (isAudioClip || Boolean(el.hasAudio)) && !isGestureActor;
   const fade = useClipFadeDraft(el);
@@ -123,6 +128,7 @@ export const TimelineClip = memo(function TimelineClip({
       data-clip-start={el.start}
       data-clip-end={el.start + el.duration}
       data-clip-hidden={el.hidden ? "true" : undefined}
+      data-link-color={linkColor ?? undefined}
       data-ladder={ladder}
       data-active={isActive ? "" : undefined}
       aria-hidden={isGestureActor ? "true" : undefined}
@@ -204,6 +210,8 @@ export const TimelineClip = memo(function TimelineClip({
         </div>
       )}
       {showLabel && <span className="timeline-clip__label">{displayLabel}</span>}
+      {showLabel && !isGestureActor && <ClipBadges el={el} />}
+      {!isGestureActor && el.syncOrigin && <OutOfSyncBadge el={el} />}
       {showDefaultText && (
         <span className="timeline-clip__timecode">
           {startLabel}-{endLabel}s

package/src/player/components/TimelineFxButton.test.tsx

@@ -181,13 +181,13 @@ describe("TimelineFxButton", () => {
       <TimelineFxButton
         variant="group-pointer"
         clipCount={2}
-        refusal="Video audio can't be grouped yet — only audio clips can join a group."
+        refusal="This track can't be grouped."
         onGroupClips={onGroupClips}
       />,
     );
     act(() => byTextButton(host, "FX")?.click());
     const dialog = document.querySelector('[role="dialog"]');
-    expect(dialog?.textContent).toContain("Video audio can't be grouped yet");
+    expect(dialog?.textContent).toContain("This track can't be grouped");
     expect(document.querySelector('input[aria-label="Group name"]')).toBeNull();
     expect(
       Array.from(document.body.querySelectorAll("button")).some((b) => b.textContent === "Group"),

package/src/player/components/TimelineTrackHeader.test.tsx

@@ -869,6 +869,43 @@ describe("TimelineTrackHeader", () => {
       act(() => view.root.unmount());
     });
 
+    it("offers grouping on a track of audible videos, not on muted b-roll", () => {
+      const aRoll: TimelineElement = {
+        ...VOICE,
+        id: "a-roll",
+        domId: "a-roll",
+        tag: "video",
+        hasAudio: true,
+      };
+      const aRoll2: TimelineElement = { ...aRoll, id: "a-roll-2", domId: "a-roll-2" };
+      const bRoll: TimelineElement = {
+        ...aRoll,
+        id: "b-roll",
+        domId: "b-roll",
+        hasAudio: undefined,
+      };
+      const bRoll2: TimelineElement = { ...bRoll, id: "b-roll-2", domId: "b-roll-2" };
+      const opts = {
+        keyframeClip: aRoll,
+        trackElements: [aRoll, aRoll2],
+        clipCount: 2,
+        animations: [],
+        expanded: false,
+      };
+      const pointer = (host: HTMLElement) =>
+        host.querySelector<HTMLButtonElement>(
+          'button[aria-label="Effects — group these clips first"]',
+        );
+      const view = renderHeader(opts);
+      const button = pointer(view.host);
+      expect(button).not.toBeNull();
+      act(() => button?.click());
+      expect(document.body.textContent).not.toContain("can't be grouped");
+      view.rerender({ ...opts, keyframeClip: bRoll, trackElements: [bRoll, bRoll2] });
+      expect(pointer(view.host)).toBeNull();
+      act(() => view.root.unmount());
+    });
+
     // The header is a 48px column of exactly TWO lines — what the row is, then
     // what you can do to it. The group pointer used to render as a sibling of
     // both, making a third: 17 + 24 + 24 + gaps in a 48px box, which

package/src/player/components/TimelineTrackHeader.tsx

@@ -226,11 +226,9 @@ export function TimelineTrackHeader({
   const singleAudioClip =
     isAudioTrack && clipCount === 1 && trackElements.length > 0 ? trackElements[0] : null;
   const isTrackGrouped = trackElements.some((el) => el.audioGroup);
-  // A video track carries sound the render mixes but preview never routes
-  // through Web Audio, which is why §1.4 keeps groups audio-only. It still
-  // needs to be TOLD that, so it earns the button and a refusal.
-  const isVideoWithAudioTrack =
-    !isAudioTrack && trackElements.some((el) => el.tag.toLowerCase() === "video");
+  const audioBearingClips = isAudioTrack
+    ? trackElements
+    : trackElements.filter((el) => el.hasAudio === true);
   const writeClipFxChain = (
     clip: TimelineElement,
     next: HfAudioFxChain,
@@ -256,7 +254,7 @@ export function TimelineTrackHeader({
   // UI showed the track as grouped. The button is withheld instead of acting on
   // a subset, which is also why the carve path's loud guard cannot catch this:
   // the unresolvable ids were filtered out before the call.
-  const groupableClipIds = trackElements.map(runtimeAudioId);
+  const groupableClipIds = audioBearingClips.map(runtimeAudioId);
   const allGroupableClipIds = groupableClipIds.every((id): id is string => id !== null)
     ? groupableClipIds
     : null;
@@ -342,25 +340,14 @@ export function TimelineTrackHeader({
                       onOpenRack={() => openClipFxRack(singleAudioClip)}
                     />
                   )}
-                  {showAudioEffects &&
-                    clipCount > 1 &&
-                    !isTrackGrouped &&
-                    (isAudioTrack ? canGroupWholeTrack : isVideoWithAudioTrack) && (
-                      <TimelineFxButton
-                        variant="group-pointer"
-                        clipCount={trackElements.length}
-                        defaultLabel={trackLabel}
-                        // Groups are audio-only in v1 (§1.4). A video track showing no
-                        // button at all is the silent limit §5 forbids, so it gets the
-                        // button and a reason instead.
-                        refusal={
-                          isAudioTrack
-                            ? undefined
-                            : "Video audio can't be grouped yet — only audio clips can join a group."
-                        }
-                        onGroupClips={groupUngroupedClips}
-                      />
-                    )}
+                  {showAudioEffects && clipCount > 1 && !isTrackGrouped && canGroupWholeTrack && (
+                    <TimelineFxButton
+                      variant="group-pointer"
+                      clipCount={audioBearingClips.length}
+                      defaultLabel={trackLabel}
+                      onGroupClips={groupUngroupedClips}
+                    />
+                  )}
                   {/* The lane disclosure, on the row's own layout rather than by
                     swapping it for a keyframe-layer row. */}
                   {disclosable && (

package/src/player/components/audioClipLink.test.ts

@@ -1,34 +1,231 @@
+// @vitest-environment happy-dom
 import { describe, expect, it } from "vitest";
-import { audioPillFlags, isLinkedVideoAudio } from "./audioClipLink";
-
-const audio = { id: "bed", tag: "audio", src: "assets/City Ride.mp4?v=2" };
-
-describe("isLinkedVideoAudio", () => {
-  it("links an audio pill to a video of the same file", () => {
-    expect(
-      isLinkedVideoAudio(audio, [
-        audio,
-        { id: "picture", tag: "video", src: "/preview/assets/city ride.mp4" },
-      ]),
-    ).toBe(true);
-  });
-
-  it("greys a hidden clip and a muted group without dropping the link", () => {
-    expect(audioPillFlags({ ...audio, hidden: true }, [])).toEqual({
-      muted: true,
-      linked: false,
-    });
-    expect(audioPillFlags({ ...audio, audioGroupHidden: true }, [])).toEqual({
-      muted: true,
-      linked: false,
-    });
-  });
-
-  it("leaves a standalone audio file unlinked", () => {
-    expect(
-      isLinkedVideoAudio({ id: "vo", tag: "audio", src: "assets/voice.wav" }, [
-        { id: "picture", tag: "video", src: "assets/city.mp4" },
-      ]),
-    ).toBe(false);
+import {
+  audioPillFlags,
+  expandToLinkedMembers,
+  linkedGestureKeys,
+  linkedMembersOf,
+  mediaAssetIdentity,
+} from "./audioClipLink";
+import { createTimelineElementFromManifestClip, parseTimelineFromDOM } from "../lib/timelineDOM";
+
+const video = { id: "talk", link: "lk-1" };
+const audio = { id: "talk-audio", link: "lk-1" };
+const other = { id: "music", link: "lk-2" };
+const otherAudio = { id: "music-audio", link: "lk-2" };
+const plain = { id: "title" };
+const elements = [video, audio, other, otherAudio, plain];
+
+describe("audioPillFlags", () => {
+  it("greys a hidden clip and a muted group", () => {
+    expect(audioPillFlags({ hidden: true }).muted).toBe(true);
+    expect(audioPillFlags({ audioGroupHidden: true }).muted).toBe(true);
+  });
+});
+
+describe("mediaAssetIdentity", () => {
+  it("tells same-named files in different folders apart", () => {
+    expect(mediaAssetIdentity({ src: "assets/one/talk.mp4" })).not.toBe(
+      mediaAssetIdentity({ src: "assets/two/talk.mp4" }),
+    );
+  });
+
+  it("resolves a src against its own source file and drops query and hash", () => {
+    expect(mediaAssetIdentity({ src: "../assets/talk.mp4?v=2", sourceFile: "scenes/a.html" })).toBe(
+      mediaAssetIdentity({ src: "./assets/talk.mp4#t=1" }),
+    );
+    expect(mediaAssetIdentity({ src: "assets/City%20Ride.mp4" })).toBe(
+      mediaAssetIdentity({ src: "assets/City Ride.mp4" }),
+    );
+    expect(mediaAssetIdentity({ src: "" })).toBeNull();
+  });
+
+  it("keeps a remote url's query, since it can select a different file", () => {
+    expect(mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?id=1" })).not.toBe(
+      mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?id=2" }),
+    );
+    expect(mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?clip=a%26x=b" })).not.toBe(
+      mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?clip=a&x=b" }),
+    );
+    expect(mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4%3Fclip=a" })).not.toBe(
+      mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?clip=a" }),
+    );
+    expect(mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?id=1#t=3" })).toBe(
+      mediaAssetIdentity({ src: "https://cdn.example.com/v.mp4?id=1" }),
+    );
+  });
+});
+
+describe("expandToLinkedMembers", () => {
+  it("adds every partner of a linked clip", () => {
+    expect(expandToLinkedMembers(["talk"], elements)).toEqual(new Set(["talk", "talk-audio"]));
+  });
+
+  it("leaves unlinked clips alone and does not pull in other groups", () => {
+    expect(expandToLinkedMembers(["title"], elements)).toEqual(new Set(["title"]));
+    expect(expandToLinkedMembers(["talk-audio", "title"], elements)).toEqual(
+      new Set(["talk-audio", "talk", "title"]),
+    );
+  });
+
+  it("prefers the store key over the id", () => {
+    const keyed = [
+      { id: "a", key: "k-a", link: "lk-9" },
+      { id: "b", key: "k-b", link: "lk-9" },
+    ];
+    expect(expandToLinkedMembers(["k-a"], keyed)).toEqual(new Set(["k-a", "k-b"]));
+  });
+});
+
+describe("link groups stay inside their composition", () => {
+  const root = [
+    { id: "v", link: "lk-1", sourceFile: undefined },
+    { id: "a", link: "lk-1", sourceFile: undefined },
+  ];
+  const child = [
+    { id: "cv", key: "child.html#cv", link: "lk-1", sourceFile: "child.html" },
+    { id: "ca", key: "child.html#ca", link: "lk-1", sourceFile: "child.html" },
+  ];
+  const all = [...root, ...child];
+
+  it("does not pull a child file's same-id link into the root group", () => {
+    expect(linkedMembersOf(root[0] ?? video, all).map((el) => el.id)).toEqual(["v", "a"]);
+    expect(expandToLinkedMembers(["child.html#cv"], all)).toEqual(
+      new Set(["child.html#cv", "child.html#ca"]),
+    );
+  });
+
+  const media = (id: string, tag: string, start: number) =>
+    `<${tag} id="${id}" class="clip" src="${id}.mp4" data-link="lk-1" data-start="${start}" data-duration="4"></${tag}>`;
+  const inlineDoc = () => {
+    const doc = document.implementation.createHTMLDocument();
+    doc.body.innerHTML = `<div data-composition-id="main" data-duration="20">
+      ${media("v", "video", 0)}${media("a", "audio", 0)}
+      <div id="child" data-composition-id="child" data-start="0" data-duration="10">
+        ${media("cv", "video", 5)}${media("ca", "audio", 5)}
+      </div>
+    </div>`;
+    return doc;
+  };
+
+  it("does not pull an inline composition's same-id link into the root group", () => {
+    const rows = parseTimelineFromDOM(inlineDoc(), 20).filter((row) => row.link);
+    const byId = (id: string) => rows.find((row) => row.domId === id) ?? video;
+    expect(linkedMembersOf(byId("v"), rows).map((row) => row.domId)).toEqual(["v", "a"]);
+    expect(linkedMembersOf(byId("cv"), rows).map((row) => row.domId)).toEqual(["cv", "ca"]);
+  });
+
+  it("keeps the inline composition apart on rows built from the runtime manifest", () => {
+    const doc = inlineDoc();
+    const rows = ["v", "a", "cv", "ca"].map((id, fallbackIndex) =>
+      createTimelineElementFromManifestClip({
+        clip: {
+          ...{ id, label: id, start: 0, duration: 4, track: 0, kind: "video", tagName: "video" },
+          ...{
+            compositionId: null,
+            parentCompositionId: null,
+            compositionSrc: null,
+            assetUrl: null,
+          },
+        },
+        fallbackIndex,
+        doc,
+        hostEl: doc.getElementById(id),
+      }),
+    );
+    const [rootVideo] = rows;
+    expect(linkedMembersOf(rootVideo ?? video, rows).map((row) => row.domId)).toEqual(["v", "a"]);
+  });
+});
+
+describe("linkedMembersOf", () => {
+  it("returns the group, or the clip alone when unlinked", () => {
+    expect(linkedMembersOf(video, elements).map((el) => el.id)).toEqual(["talk", "talk-audio"]);
+    expect(linkedMembersOf(plain, elements)).toEqual([plain]);
+  });
+});
+
+describe("linkedGestureKeys", () => {
+  it("drags an unselected linked clip with its partner", () => {
+    expect(linkedGestureKeys(new Set(["title"]), video, elements, false)).toEqual(
+      new Set(["talk", "talk-audio"]),
+    );
+  });
+
+  it("keeps a selection that holds the grabbed clip and adds partners", () => {
+    expect(linkedGestureKeys(new Set(["talk", "title"]), video, elements, false)).toEqual(
+      new Set(["talk", "talk-audio", "title"]),
+    );
+  });
+
+  it("Linked Selection off edits the grabbed clip alone without Alt", () => {
+    expect(linkedGestureKeys(new Set(["talk"]), video, elements, false, false)).toEqual(
+      new Set(["talk"]),
+    );
+  });
+
+  it("Alt edits the grabbed clip alone", () => {
+    expect(linkedGestureKeys(new Set(["talk", "talk-audio"]), video, elements, true)).toEqual(
+      new Set(["talk"]),
+    );
+  });
+});
+
+describe("selectClipWithLinks", () => {
+  const linkedPair = [
+    { id: "talk", tag: "video", start: 0, duration: 4, track: 0, link: "lk-1" },
+    { id: "talk-audio", tag: "audio", start: 0, duration: 4, track: 1, link: "lk-1" },
+    { id: "title", tag: "div", start: 0, duration: 4, track: 2 },
+  ];
+
+  async function store() {
+    const { usePlayerStore } = await import("../store/playerStore");
+    const { selectClipWithLinks } = await import("./timelineLinkSelection");
+    usePlayerStore.getState().setElements(linkedPair);
+    const click = (key: string, alt = false) =>
+      selectClipWithLinks(key, alt, usePlayerStore.getState().setSelectedElementId);
+    return { usePlayerStore, click };
+  }
+
+  it("a click selects the whole pair; Alt-click then narrows to one member", async () => {
+    const { usePlayerStore, click } = await store();
+    click("talk");
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk", "talk-audio"]));
+    click("talk-audio", true);
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk-audio"]));
+  });
+
+  it("a plain click collapses a larger selection to the clicked clip's link group", async () => {
+    const { usePlayerStore, click } = await store();
+    usePlayerStore.getState().setSelection(["talk", "talk-audio", "title"], "title");
+    click("talk");
+    expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk", "talk-audio"]));
+    expect(usePlayerStore.getState().selectedElementId).toBe("talk");
+  });
+});
+
+describe("Linked Selection off", () => {
+  const linkedPair = [
+    { id: "talk", tag: "video", start: 0, duration: 4, track: 0, link: "lk-1" },
+    { id: "talk-audio", tag: "audio", start: 0, duration: 4, track: 1, link: "lk-1" },
+  ];
+
+  it("expands and lists nothing past the clip itself", () => {
+    expect(expandToLinkedMembers(["talk"], linkedPair, false)).toEqual(new Set(["talk"]));
+    expect(linkedMembersOf(linkedPair[0], linkedPair, false)).toEqual([linkedPair[0]]);
+  });
+
+  it("a click selects only the clicked clip", async () => {
+    const { usePlayerStore } = await import("../store/playerStore");
+    const { selectClipWithLinks } = await import("./timelineLinkSelection");
+    const { useLinkedClipPreferences } = await import("../../utils/linkedClipPreferences");
+    usePlayerStore.getState().setElements(linkedPair);
+    useLinkedClipPreferences.getState().setLinkedSelection(false);
+    try {
+      selectClipWithLinks("talk", false, usePlayerStore.getState().setSelectedElementId);
+      expect(usePlayerStore.getState().selectedElementIds).toEqual(new Set(["talk"]));
+    } finally {
+      useLinkedClipPreferences.getState().setLinkedSelection(true);
+    }
   });
 });