@hyperframes/studio 0.8.108 → 0.8.110

package/dist/ui.js

@@ -30,7 +30,7 @@ import {
   fieldBase,
   fieldText,
   popupSurface
-} from "./chunk-NCUBAVGK.js";
+} from "./chunk-5VSXRGIX.js";
 import "./chunk-PZ5AY32C.js";
 export {
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.108",
+  "version": "0.8.110",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.108",
-    "@hyperframes/parsers": "0.8.108",
-    "@hyperframes/player": "0.8.108",
-    "@hyperframes/sdk": "0.8.108",
-    "@hyperframes/studio-server": "0.8.108",
-    "@hyperframes/shader-transitions": "0.8.108"
+    "@hyperframes/parsers": "0.8.110",
+    "@hyperframes/player": "0.8.110",
+    "@hyperframes/core": "0.8.110",
+    "@hyperframes/studio-server": "0.8.110",
+    "@hyperframes/shader-transitions": "0.8.110",
+    "@hyperframes/sdk": "0.8.110"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.108"
+    "@hyperframes/producer": "0.8.110"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -17,11 +17,7 @@ import { useFileManager } from "./hooks/useFileManager";
 import { usePreviewPersistence } from "./hooks/usePreviewPersistence";
 import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion";
 import { useTimelineEditing } from "./hooks/useTimelineEditing";
-import {
-  persistTimelineMoveEditsAtomically,
-  type TimelineMoveEditsHandler,
-  type TimelineMoveOperation,
-} from "./hooks/timelineMoveAdapter";
+import { useTimelineMoveEditsHandler } from "./hooks/timelineMoveAdapter";
 import type { TimelineZIndexReorderCommit } from "./hooks/useTimelineEditingTypes";
 import type { BlockPreviewInfo } from "./components/sidebar/BlocksTab";
 import { useDomEditSession } from "./hooks/useDomEditSession";
@@ -179,12 +175,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     invalidateGsapCache,
     handleDomZIndexReorderCommitRef,
   });
-  const handleTimelineElementsMove: TimelineMoveEditsHandler = useCallback(
-    async (edits, coalesceKey, operation: TimelineMoveOperation = "timing", coalesceMs) => {
-      const deps = { handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove };
-      await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
-    },
-    [timelineEditing.handleTimelineGroupMove],
+  const handleTimelineElementsMove = useTimelineMoveEditsHandler(
+    timelineEditing.handleTimelineGroupMove,
   );
   const {
     addAssetAtPlayhead: handleAddAssetAtPlayhead,
@@ -246,6 +238,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
   });
   const appHotkeys = useAppHotkeys({
     handleTimelineElementsDelete: timelineEditing.handleTimelineElementsDelete,
+    handleLinkEdit: timelineEditing.handleLinkEdit,
+    handleTimelineElementDeleteOnly: timelineEditing.handleTimelineElementDeleteOnly,
     handleTimelineElementSplit: timelineEditing.handleTimelineElementSplit,
     handleDomEditElementDelete: domEditDeleteBridge,
     domEditSelectionRef: domEditSelectionBridgeRef,
@@ -553,6 +547,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                   handleRazorSplit={timelineEditing.handleRazorSplit}
                   handleRazorSplitAll={timelineEditing.handleRazorSplitAll}
                   handleFreezeFrame={timelineEditing.handleFreezeFrame}
+                  handleLinkEdit={timelineEditing.handleLinkEdit}
+                  handleTimelineElementDeleteOnly={timelineEditing.handleTimelineElementDeleteOnly}
                   onCopyClip={handleCopy}
                   onPasteClip={handlePaste}
                   onDuplicateClip={handleDuplicate}

package/src/components/EditorShell.tsx

@@ -104,6 +104,8 @@ export function EditorShell({
   handleRazorSplit,
   handleRazorSplitAll,
   handleFreezeFrame,
+  handleLinkEdit,
+  handleTimelineElementDeleteOnly,
   onCopyClip,
   onPasteClip,
   onDuplicateClip,
@@ -165,6 +167,8 @@ export function EditorShell({
     handleRazorSplit,
     handleRazorSplitAll,
     handleFreezeFrame,
+    handleLinkEdit,
+    handleTimelineElementDeleteOnly,
   });
 
   return (

package/src/components/LinkedSelectionToggle.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+import { LinkSimple } from "@phosphor-icons/react";
+import { useContextMenuDismiss } from "../hooks/useContextMenuDismiss";
+import { useMenuKeyboardNav } from "../player/components/menuKeyboardNav";
+import { useLinkedClipPreferences } from "../utils/linkedClipPreferences";
+import { Tooltip } from "./ui";
+import { flatActive, flatIdle } from "./timelineToolbarStyles";
+
+function SyncIndicatorMenu({ x, y, onClose }: { x: number; y: number; onClose: () => void }) {
+  const menuRef = useContextMenuDismiss(onClose);
+  useMenuKeyboardNav(menuRef);
+  const visible = useLinkedClipPreferences((s) => s.syncIndicatorsVisible);
+  const setVisible = useLinkedClipPreferences((s) => s.setSyncIndicatorsVisible);
+  return createPortal(
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Linked clips"
+      className="fixed z-200 min-w-[200px] rounded-sm border border-neutral-700 bg-neutral-900 py-1 shadow-lg"
+      style={{ left: x, top: y }}
+    >
+      <button
+        type="button"
+        role="menuitemcheckbox"
+        aria-checked={visible}
+        className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-neutral-300 outline-hidden hover:bg-neutral-800 focus-visible:bg-neutral-800"
+        onClick={() => {
+          setVisible(!visible);
+          onClose();
+        }}
+      >
+        <span className="w-3 text-studio-accent">{visible ? "✓" : ""}</span>
+        Show out-of-sync indicators
+      </button>
+    </div>,
+    document.body,
+  );
+}
+
+/** Premiere's Linked Selection; right-click holds the out-of-sync indicator preference. */
+export function LinkedSelectionToggle() {
+  const linkedSelection = useLinkedClipPreferences((s) => s.linkedSelection);
+  const setLinkedSelection = useLinkedClipPreferences((s) => s.setLinkedSelection);
+  const [menuAt, setMenuAt] = useState<{ x: number; y: number } | null>(null);
+  const closeMenu = useCallback(() => setMenuAt(null), []);
+  return (
+    <>
+      <Tooltip
+        label={
+          linkedSelection
+            ? "Linked Selection on — a click selects both halves (⌥-click for one)"
+            : "Linked Selection off — a click selects one clip"
+        }
+      >
+        <button
+          type="button"
+          onClick={() => setLinkedSelection(!linkedSelection)}
+          onContextMenu={(e) => {
+            e.preventDefault();
+            setMenuAt({ x: e.clientX, y: e.clientY });
+          }}
+          aria-label="Linked Selection"
+          aria-pressed={linkedSelection}
+          className={linkedSelection ? flatActive : flatIdle}
+        >
+          <LinkSimple size={16} weight="bold" aria-hidden="true" />
+        </button>
+      </Tooltip>
+      {menuAt && <SyncIndicatorMenu x={menuAt.x} y={menuAt.y} onClose={closeMenu} />}
+    </>
+  );
+}

package/src/components/TimelineToolbar.test.tsx

@@ -391,3 +391,34 @@ describe("TimelineToolbar add beat", () => {
     act(() => root.unmount());
   });
 });
+
+describe("TimelineToolbar Linked Selection", () => {
+  it("is on by default, first among the editing toggles, and persists a click", async () => {
+    const { useLinkedClipPreferences } = await import("../utils/linkedClipPreferences");
+    const { host } = renderToolbar();
+    const button = host.querySelector<HTMLButtonElement>('button[aria-label="Linked Selection"]');
+    expect(button?.getAttribute("aria-pressed")).toBe("true");
+    const snapping = host.querySelector('button[aria-label="Toggle timeline snapping"]');
+    expect(snapping && button?.compareDocumentPosition(snapping)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+    act(() => button?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(button?.getAttribute("aria-pressed")).toBe("false");
+    expect(readStudioUiPreferences().linkedSelectionEnabled).toBe(false);
+    act(() => useLinkedClipPreferences.getState().setLinkedSelection(true));
+  });
+
+  it("right-click toggles the out-of-sync indicator preference", async () => {
+    const { useLinkedClipPreferences } = await import("../utils/linkedClipPreferences");
+    const { host } = renderToolbar();
+    const button = host.querySelector('button[aria-label="Linked Selection"]');
+    act(() => button?.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true })));
+    const item = document.querySelector<HTMLButtonElement>('[role="menuitemcheckbox"]');
+    expect(item?.textContent).toContain("Show out-of-sync indicators");
+    expect(item?.getAttribute("aria-checked")).toBe("true");
+    act(() => item?.click());
+    expect(useLinkedClipPreferences.getState().syncIndicatorsVisible).toBe(false);
+    expect(readStudioUiPreferences().syncIndicatorsVisible).toBe(false);
+    act(() => useLinkedClipPreferences.getState().setSyncIndicatorsVisible(true));
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -31,6 +31,7 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
+import { LinkedSelectionToggle } from "./LinkedSelectionToggle";
 import { useProjectHasAudio } from "../utils/audioMeterMath";
 import { canAddBeatAt, addBeatAtCompositionTime } from "../utils/beatEditActions";
 import { isTypingTarget } from "../utils/typingTarget";
@@ -218,6 +219,7 @@ export function TimelineToolbar({
           <TimelineToolPicker showSelectAroundPlayhead={showSelectAroundPlayhead} />
           {/* Divider: tool-mode | editing-actions */}
           <div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
+          <LinkedSelectionToggle />
           <Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>
             <button
               type="button"

package/src/components/editor/DomEditCropHandles.test.tsx

@@ -35,6 +35,19 @@ function makeEl(id: string, clip: string): HTMLElement {
   return el;
 }
 
+/** Presses at the first x, moves through the rest with their buttons, and lets go where the last held move was. */
+function dragCropRight(handle: HTMLElement, pointerId: number, points: [number, number][]) {
+  const [[start], ...moves] = points;
+  const release = moves.filter(([, buttons]) => buttons & 1).at(-1)?.[0] ?? start;
+  const send = (type: string, clientX: number, buttons: number) =>
+    handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId, buttons, clientX }));
+  act(() => {
+    send("pointerdown", start, 1);
+    for (const [x, buttons] of moves) send("pointermove", x, buttons);
+    send("pointerup", release, 0);
+  });
+}
+
 function render(
   el: HTMLElement,
   onStyleCommit: (property: string, value: string) => Promise<unknown> | void = () => undefined,
@@ -111,7 +124,14 @@ describe("DomEditCropHandles clip lift", () => {
     ] as const) {
       const at = { clientX: 100 + d * c.dx, clientY: 50 + d * c.dy };
       act(() =>
-        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 3, ...at })),
+        handle.dispatchEvent(
+          new PointerEvent(type, {
+            bubbles: true,
+            buttons: type === "pointerup" ? 0 : 1,
+            pointerId: 3,
+            ...at,
+          }),
+        ),
       );
     }
     expect(onStyleCommit).not.toHaveBeenCalled();
@@ -121,16 +141,23 @@ describe("DomEditCropHandles clip lift", () => {
     const onStyleCommit = vi.fn();
     render(makeEl("a", "inset(10px)"), onStyleCommit);
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
-    act(() => {
-      for (const [type, clientX] of [
-        ["pointerdown", 100],
-        ["pointermove", 90],
-        ["pointermove", 80],
-        ["pointerup", 80],
-      ] as const) {
-        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 4, clientX }));
-      }
-    });
+    dragCropRight(handle, 4, [
+      [100, 1],
+      [90, 1],
+      [80, 1],
+    ]);
+    expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
+  });
+
+  it("commits where the pointer let go, not at a buttonless move back at the press point", () => {
+    const onStyleCommit = vi.fn();
+    render(makeEl("a", "inset(10px)"), onStyleCommit);
+    const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
+    dragCropRight(handle, 6, [
+      [100, 1],
+      [80, 1],
+      [100, 0],
+    ]);
     expect(onStyleCommit).toHaveBeenCalledWith("clip-path", "inset(10px 30px 10px 10px)");
   });
 
@@ -138,16 +165,11 @@ describe("DomEditCropHandles clip lift", () => {
     const a = makeEl("a", "");
     const { root } = render(a, (property, value) => void a.style.setProperty(property, value));
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
-    act(() => {
-      for (const [type, clientX] of [
-        ["pointerdown", 100],
-        ["pointermove", 90],
-        ["pointermove", 80],
-        ["pointerup", 80],
-      ] as const) {
-        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 5, clientX }));
-      }
-    });
+    dragCropRight(handle, 5, [
+      [100, 1],
+      [90, 1],
+      [80, 1],
+    ]);
     await act(async () => undefined);
     act(() => root.unmount());
     expect(a.style.getPropertyValue("clip-path")).toBe("inset(0px 20px 0px 0px)");
@@ -163,7 +185,14 @@ describe("DomEditCropHandles clip lift", () => {
     const handle = document.querySelector<HTMLButtonElement>('[aria-label="Crop right"]')!;
     const press = (type: string, clientX: number) =>
       act(() =>
-        handle.dispatchEvent(new PointerEvent(type, { bubbles: true, pointerId: 1, clientX })),
+        handle.dispatchEvent(
+          new PointerEvent(type, {
+            bubbles: true,
+            buttons: type === "pointerup" ? 0 : 1,
+            pointerId: 1,
+            clientX,
+          }),
+        ),
       );
     press("pointerdown", 100);
     press("pointermove", 80);

package/src/components/editor/DomEditCropHandles.tsx

@@ -17,6 +17,7 @@ import { buildInsetClipPathSides, type ClipPathInsetSides } from "./clipPathHelp
 import { readCropFollowingResize } from "./cropResize";
 import { isCropBarTarget, useCropPresetBarStore } from "./cropPresetStore";
 import { CropPresetBar } from "./CropPresetBar";
+import { movesGesture } from "./domEditOverlayGestures";
 
 interface CropGestureState {
   edge: CropEdge | "move";
@@ -188,7 +189,7 @@ export function DomEditCropHandles({
 
   const updateCropGesture = (event: ReactPointerEvent<HTMLElement>) => {
     const gesture = gestureRef.current;
-    if (!gesture || gesture.pointerId !== event.pointerId) return;
+    if (!gesture || !movesGesture(gesture, event)) return;
     event.preventDefault();
     event.stopPropagation();
     const local = rotateDeltaIntoFrame(

package/src/components/editor/InlineTextCaret.test.tsx

@@ -0,0 +1,150 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanupMounted, trackedRoot } from "../ui/mountHost.testHelpers";
+import { CARET_PX, InlineTextCaret } from "./InlineTextCaret";
+import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  // Unmount before clearing the body: the caret is portaled there, so clearing first orphans React's node.
+  cleanupMounted();
+  document.body.innerHTML = "";
+  vi.restoreAllMocks();
+});
+
+/** A frame showing the composition at a quarter of its width, from 100,50 on Studio's screen. */
+function fakeFrame() {
+  const iframe = document.body.appendChild(document.createElement("iframe"));
+  iframe.getBoundingClientRect = () =>
+    ({ left: 100, top: 50, width: window.innerWidth / 4 }) as DOMRect;
+  return iframe;
+}
+
+/** A text open for editing in a fake frame shown at a quarter of the composition's width, its caret after "Ti". */
+function scene() {
+  document.body.innerHTML = `<h1 contenteditable="true" style="color: rgb(250, 250, 250)">Title</h1>`;
+  const element = document.body.firstElementChild as HTMLElement;
+  const iframe = fakeFrame();
+  vi.spyOn(Range.prototype, "getClientRects").mockReturnValue([
+    { left: 400, top: 200, height: 120 },
+  ] as unknown as DOMRectList);
+  element.focus();
+  const text = element.firstChild as Text;
+  window.getSelection()!.collapse(text, 2);
+  const session: InlineTextEditSession = {
+    element,
+    original: "Title",
+    outline: "",
+    outlineOffset: "",
+  };
+  return { element, iframe, session, text };
+}
+
+function render(session: InlineTextEditSession | null, iframe: HTMLIFrameElement | null) {
+  const root = trackedRoot(document.body.appendChild(document.createElement("div")));
+  act(() => root.render(<InlineTextCaret session={session} iframe={iframe} />));
+  return { root, caret: () => document.querySelector<HTMLElement>("[data-inline-text-caret]") };
+}
+
+const fire = (target: EventTarget, type: string) =>
+  act(() => void target.dispatchEvent(new Event(type)));
+
+describe("InlineTextCaret", () => {
+  it("draws a 2 px caret on Studio's screen where the composition's caret stands, in the text's colour", () => {
+    const { iframe, session } = scene();
+    const caret = render(session, iframe).caret();
+    expect(caret).not.toBeNull();
+    expect(caret!.style.left).toBe(`${100 + 400 / 4 - CARET_PX / 2}px`);
+    expect(caret!.style.top).toBe(`${50 + 200 / 4}px`);
+    expect(caret!.style.height).toBe(`${120 / 4}px`);
+    expect(caret!.style.width).toBe(`${CARET_PX}px`);
+    expect(caret!.style.background).toBe("rgb(250, 250, 250)");
+  });
+
+  it("follows a pan or zoom of the preview, which moves the iframe with no event", async () => {
+    const { iframe, session } = scene();
+    const caret = render(session, iframe).caret;
+    iframe.getBoundingClientRect = () =>
+      ({ left: 140, top: 50, width: window.innerWidth / 4 }) as DOMRect;
+    await act(() => new Promise((done) => requestAnimationFrame(() => done(undefined))));
+    expect(caret()!.style.left).toBe(`${140 + 400 / 4 - CARET_PX / 2}px`);
+  });
+
+  it("after End at a soft wrap the caret stands at the earlier line's end; after Home, at the next line's start", () => {
+    const { element, iframe, session } = scene();
+    // A collapsed range at a wrap point has the next line's box; the character before it ends the earlier line.
+    vi.spyOn(Range.prototype, "getClientRects").mockImplementation(function (this: Range) {
+      return (this.collapsed
+        ? [{ left: 0, top: 320, height: 120 }]
+        : [{ left: 300, right: 400, top: 200, height: 120 }]) as unknown as DOMRectList;
+    });
+    const caret = render(session, iframe).caret;
+    const press = (key: string) => {
+      act(() => void element.dispatchEvent(new KeyboardEvent("keydown", { key })));
+      fire(document, "selectionchange");
+    };
+    press("End");
+    expect([caret()!.style.left, caret()!.style.top]).toEqual([
+      `${100 + 400 / 4 - CARET_PX / 2}px`,
+      `${50 + 200 / 4}px`,
+    ]);
+    press("Shift");
+    expect(caret()!.style.top, "a modifier alone keeps the side").toBe(`${50 + 200 / 4}px`);
+    press("Home");
+    expect([caret()!.style.left, caret()!.style.top]).toEqual([
+      `${100 - CARET_PX / 2}px`,
+      `${50 + 320 / 4}px`,
+    ]);
+  });
+
+  it("shows no caret while a range is selected, and again once the selection collapses", () => {
+    const { iframe, session, text } = scene();
+    const { caret } = render(session, iframe);
+    act(() => window.getSelection()!.setBaseAndExtent(text, 0, text, 3));
+    fire(document, "selectionchange");
+    expect(caret()).toBeNull();
+    act(() => window.getSelection()!.collapse(text, 3));
+    fire(document, "selectionchange");
+    expect(caret()).not.toBeNull();
+  });
+
+  it("shows no caret while an input method composes, nor once the text loses focus", () => {
+    const { element, iframe, session } = scene();
+    const { caret } = render(session, iframe);
+    fire(element, "compositionstart");
+    expect(caret()).toBeNull();
+    fire(element, "compositionend");
+    expect(caret()).not.toBeNull();
+    act(() => element.blur());
+    fire(element, "blur");
+    expect(caret()).toBeNull();
+  });
+
+  it("hides the browser's own caret while it draws one, and gives it back after", () => {
+    const { element, iframe, session } = scene();
+    element.style.caretColor = "red";
+    const { root } = render(session, iframe);
+    expect(element.style.caretColor).toBe("transparent");
+    act(() => root.render(<InlineTextCaret session={null} iframe={iframe} />));
+    expect(element.style.caretColor).toBe("red");
+  });
+
+  it("stands at the end of a bold word when the caret is past it, where no box of its own is drawn", () => {
+    document.body.innerHTML = `<h1 contenteditable="true">Go <strong>bold</strong></h1>`;
+    const element = document.body.firstElementChild as HTMLElement;
+    const iframe = fakeFrame();
+    vi.spyOn(Range.prototype, "getClientRects").mockImplementation(function (this: Range) {
+      const rects = this.collapsed ? [] : [{ left: 300, right: 500, top: 200, height: 120 }];
+      return rects as unknown as DOMRectList;
+    });
+    element.focus();
+    window.getSelection()!.collapse(element, element.childNodes.length);
+    const session = { element, original: "", outline: "", outlineOffset: "" };
+    const caret = render(session, iframe).caret();
+    expect(caret!.style.left).toBe(`${100 + 500 / 4 - CARET_PX / 2}px`);
+    expect(caret!.style.top).toBe(`${50 + 200 / 4}px`);
+  });
+});