@hyperframes/studio 0.8.108 → 0.8.109

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

@@ -1,14 +1,16 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
+import { cleanupMounted, trackedRoot } from "../ui/mountHost.testHelpers";
 import { InlineTextToolbar, swatchBackground } from "./InlineTextToolbar";
 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 bar is portaled there, so clearing first orphans React's node.
+  cleanupMounted();
   document.body.innerHTML = "";
 });
 
@@ -33,7 +35,7 @@ function scene(html: string) {
 function render(session: InlineTextEditSession | null, iframe: HTMLIFrameElement | null) {
   const host = document.createElement("div");
   document.body.append(host);
-  const root = createRoot(host);
+  const root = trackedRoot(host);
   act(() => root.render(<InlineTextToolbar session={session} iframe={iframe} />));
   return { host, root, rerender: () => act(() => root.render(<div />)) };
 }
@@ -49,8 +51,21 @@ function selectAll(element: HTMLElement) {
   });
 }
 
+function selectAt(element: HTMLElement, top: number) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  range.getBoundingClientRect = () =>
+    ({ left: 20, top, width: 100, height: 10 }) as unknown as DOMRect;
+  const selection = document.getSelection()!;
+  act(() => {
+    selection.removeAllRanges();
+    selection.addRange(range);
+    document.dispatchEvent(new Event("selectionchange"));
+  });
+}
+
 function toolbarIn(host: HTMLElement): HTMLElement | null {
-  return host.querySelector<HTMLElement>('[data-inline-text-toolbar="true"]');
+  return host.ownerDocument.querySelector<HTMLElement>('[data-inline-text-toolbar="true"]');
 }
 
 function renderSelected(html = "hello world") {
@@ -120,7 +135,7 @@ describe("InlineTextToolbar", () => {
     // these are the handlers that would deselect the element.
     const host = document.createElement("div");
     document.body.append(host);
-    const root = createRoot(host);
+    const root = trackedRoot(host);
     act(() =>
       root.render(
         <div
@@ -152,7 +167,7 @@ describe("InlineTextToolbar", () => {
     const { host } = render(session, iframe);
     selectAll(element);
 
-    const input = host.querySelector<HTMLInputElement>('input[type="color"]')!;
+    const input = host.ownerDocument.querySelector<HTMLInputElement>('input[type="color"]')!;
     expect(input.className).toContain("w-full");
     expect(input.className).toContain("h-full");
     expect(input.className).toContain("min-w-0");
@@ -161,14 +176,14 @@ describe("InlineTextToolbar", () => {
   it("styles the selected characters when a control is used", () => {
     const { element, host } = renderSelected();
 
-    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
+    act(() => host.ownerDocument.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
 
     expect(element.innerHTML).toBe('<span style="font-weight: 700">hello world</span>');
   });
 
   it("ignores a click when the selection disappeared before React hid the toolbar", () => {
     const { element, host } = renderSelected();
-    const bold = host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!;
+    const bold = host.ownerDocument.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!;
 
     expect(() => {
       act(() => {
@@ -185,8 +200,12 @@ describe("InlineTextToolbar", () => {
 
     selectAll(element);
 
-    expect(host.querySelector('[aria-label="Italic"]')?.getAttribute("aria-pressed")).toBe("true");
-    expect(host.querySelector('[aria-label="Bold"]')?.getAttribute("aria-pressed")).toBe("false");
+    expect(
+      host.ownerDocument.querySelector('[aria-label="Italic"]')?.getAttribute("aria-pressed"),
+    ).toBe("true");
+    expect(
+      host.ownerDocument.querySelector('[aria-label="Bold"]')?.getAttribute("aria-pressed"),
+    ).toBe("false");
   });
 
   it("turns a style back off when the control is used again", () => {
@@ -194,7 +213,7 @@ describe("InlineTextToolbar", () => {
     const { host } = render(session, iframe);
     selectAll(element);
 
-    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
+    act(() => host.ownerDocument.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
 
     expect(element.innerHTML).toBe("words");
   });
@@ -202,16 +221,7 @@ describe("InlineTextToolbar", () => {
   it("places itself over the selection, mapped out of the scaled composition", () => {
     const { element, session, iframe } = scene("hello world");
     const { host } = render(session, iframe);
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.getBoundingClientRect = () =>
-      ({ left: 20, top: 40, width: 100, height: 10 }) as unknown as DOMRect;
-    const selection = document.getSelection()!;
-    act(() => {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.dispatchEvent(new Event("selectionchange"));
-    });
+    selectAt(element, 40);
 
     const toolbar = toolbarIn(host)!;
     // Frame at 100,50; scale 400/innerWidth; centre of the range, above it.
@@ -223,16 +233,7 @@ describe("InlineTextToolbar", () => {
     const { element, session, iframe } = scene("hello world");
     iframe.getBoundingClientRect = () => ({ left: 0, top: 0, width: 400 }) as DOMRect;
     const { host } = render(session, iframe);
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.getBoundingClientRect = () =>
-      ({ left: 20, top: 0, width: 100, height: 10 }) as unknown as DOMRect;
-    const selection = document.getSelection()!;
-    act(() => {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.dispatchEvent(new Event("selectionchange"));
-    });
+    selectAt(element, 0);
 
     const toolbar = toolbarIn(host)!;
     const scale = 400 / window.innerWidth;
@@ -271,7 +272,9 @@ describe("InlineTextToolbar", () => {
 
     selectAll(element);
 
-    expect(host.querySelector<HTMLInputElement>('input[type="color"]')?.value).toBe("#ff0000");
+    expect(host.ownerDocument.querySelector<HTMLInputElement>('input[type="color"]')?.value).toBe(
+      "#ff0000",
+    );
   });
 });
 

package/src/components/editor/InlineTextToolbar.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { applyInlineStyle } from "./inlineTextStyleRange";
 import { readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRead";
 import { parseCssColor, toHexColor } from "./colorValue";
@@ -69,10 +70,10 @@ export function InlineTextToolbar({
     [session, refresh],
   );
 
-  if (!placement) return null;
+  if (!placement || !iframe) return null;
   const styles = placement.styles;
 
-  return (
+  return createPortal(
     <div
       data-inline-text-toolbar="true"
       role="toolbar"
@@ -89,8 +90,8 @@ export function InlineTextToolbar({
       // The default, because a press anywhere in Studio moves the focus, and
       // moving it out of the text collapses the selection being styled.
       //
-      // The propagation, because this renders inside the canvas overlay: a
-      // press that reaches the canvas is read as a click on the composition,
+      // The propagation, because React bubbles it through the canvas overlay
+      // that renders this bar: a press that reaches the canvas is read as a click on the composition,
       // which deselects the element and commits the edit out from under the
       // button that was just pressed.
       onPointerDown={swallow}
@@ -147,7 +148,8 @@ export function InlineTextToolbar({
         on={styles["text-decoration-line"] === "underline"}
         onToggle={(on) => apply({ "text-decoration-line": on ? "underline" : null })}
       />
-    </div>
+    </div>,
+    iframe.ownerDocument.body,
   );
 }
 

package/src/components/editor/PropertyPanelFlat.tsx

@@ -5,6 +5,7 @@ import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext
 import { slugifyDesignInput } from "../../utils/designInputTracking";
 import { isTextEditableSelection } from "./domEditing";
 import type { PropertyPanelFlatProps } from "./propertyPanelFlatProps";
+import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { formatPxMetricValue } from "./propertyPanelHelpers";
 import { audioFxSummary } from "./audioFxSummary";
 import { resolveAudioGroups } from "@hyperframes/core/audio-groups";
@@ -289,10 +290,12 @@ export function PropertyPanelFlat({
   const showMotionEffects = gsapEffectHandlers !== null && !audioSelection;
   const showMotionGroup = showMotionTiming || showMotionEffects;
 
+  const linkedSpeed = useLinkedSpeedCommit(element, forwardedProps.onSetAttributeBatch);
   const volumeAutomation = useVolumeAutomation(
     element,
     currentTime,
     onSetAttributeQuiet ?? onSetAttributeLive,
+    linkedSpeed,
   );
 
   // The group this clip belongs to, if any — the Audio FX summary reads
@@ -505,7 +508,7 @@ export function PropertyPanelFlat({
           element={element}
           styles={styles}
           onSetStyle={onSetStyle}
-          onSetAttribute={onSetAttribute}
+          onSetAttribute={withLinkedPlaybackRate(onSetAttribute, linkedSpeed)}
           {...volumeAutomation}
         />
       ),

package/src/components/editor/domEditInlineText.ts

@@ -54,18 +54,20 @@ export function canEditElementTextInline(element: HTMLElement | null): boolean {
 }
 
 function hasOnlyFormattingChildren(element: HTMLElement): boolean {
-  const HTMLElementClass = element.ownerDocument.defaultView?.HTMLElement;
-  if (!HTMLElementClass) return false;
   for (const child of Array.from(element.children)) {
     if (!isRichTextFormattingTag(child.tagName)) return false;
-    if (!(child instanceof HTMLElementClass)) return false;
+    if (!isHtmlFromAnyWindow(child)) return false;
     // Formatting nests, and a structural child hidden inside a span is still
     // structural.
-    if (!hasOnlyFormattingChildren(child)) return false;
+    if (!hasOnlyFormattingChildren(child as HTMLElement)) return false;
   }
   return true;
 }
 
+function isHtmlFromAnyWindow(node: Element): boolean {
+  return node.namespaceURI === "http://www.w3.org/1999/xhtml";
+}
+
 /** Where and when a press landed, for recognising the next one as a pair. */
 export interface PressMark {
   x: number;

package/src/components/editor/domEditInlineTextElement.test.ts

@@ -30,6 +30,13 @@ describe("canEditElementTextInline", () => {
     expect(canEditElementTextInline(element)).toBe(true);
   });
 
+  it("opens styled copy whose formatting comes from another window", () => {
+    const element = mount("<h1>a <strong>bold</strong></h1>");
+    // happy-dom shares classes across windows; drop this window's HTMLElement as a foreign realm would.
+    Object.setPrototypeOf(element.firstElementChild, Element.prototype);
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
   it("keeps out an element with a structural child, which the panel edits field by field", () => {
     expect(canEditElementTextInline(mount("<div><h1>a</h1><p>b</p></div>"))).toBe(false);
   });

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

@@ -0,0 +1,164 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { createHappyDomRootHarness } from "../../player/components/testRootHarness";
+import { usePlayerStore, type TimelineElement } from "../../player/store/playerStore";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import type { DomEditSelection } from "./domEditingTypes";
+import {
+  fanOutAttributeInSource,
+  linkedPartnerTargets,
+  useLinkedSpeedCommit,
+  withLinkedPlaybackRate,
+  type LinkedSpeedCommit,
+} from "./linkedSpeedEdits";
+import { useVolumeAutomation } from "./useVolumeAutomation";
+import { useLinkedClipPreferences } from "../../utils/linkedClipPreferences";
+
+const clip = (id: string, tag: string, link?: string): TimelineElement => ({
+  id,
+  domId: id,
+  tag,
+  start: 0,
+  duration: 4,
+  track: 0,
+  ...(link ? { link } : {}),
+});
+
+const elements = [
+  clip("talk", "video", "lk-1"),
+  clip("talk-audio", "audio", "lk-1"),
+  clip("music", "audio"),
+];
+
+const source = `<div data-composition-id="main">
+<video id="talk" data-start="0" data-duration="4" data-link="lk-1" muted></video>
+<audio id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="{&quot;version&quot;:1,&quot;lanes&quot;:[]}"></audio>
+<audio id="music" data-start="0" data-duration="4"></audio>
+</div>`;
+
+function selection(id: string, dataAttributes: Record<string, string> = {}): DomEditSelection {
+  const element = document.createElement("video");
+  element.id = id;
+  return {
+    id,
+    element,
+    label: id,
+    tagName: "video",
+    sourceFile: "index.html",
+    compositionPath: "index.html",
+    isCompositionHost: false,
+    isInsideLockedComposition: false,
+    boundingBox: { x: 0, y: 0, width: 0, height: 0 },
+    textContent: null,
+    dataAttributes: { start: "0", duration: "4", ...dataAttributes },
+    inlineStyles: {},
+    computedStyles: {},
+    textFields: [],
+    capabilities: {
+      canSelect: true,
+      canEditStyles: true,
+      canCrop: true,
+      canMove: true,
+      canResize: true,
+      canApplyManualOffset: true,
+      canApplyManualSize: true,
+      canApplyManualRotation: true,
+    },
+  };
+}
+
+describe("linkedPartnerTargets", () => {
+  it("returns the other data-link members and nothing for an unlinked clip", () => {
+    expect(linkedPartnerTargets({ id: "talk" }, elements)).toEqual([{ id: "talk-audio" }]);
+    expect(linkedPartnerTargets({ id: "music" }, elements)).toEqual([]);
+  });
+
+  it("reaches no partner with Linked Selection off", () => {
+    useLinkedClipPreferences.getState().setLinkedSelection(false);
+    try {
+      expect(linkedPartnerTargets({ id: "talk" }, elements)).toEqual([]);
+    } finally {
+      useLinkedClipPreferences.getState().setLinkedSelection(true);
+    }
+  });
+});
+
+describe("fanOutAttributeInSource", () => {
+  it("writes each partner from its own current value", () => {
+    const seen: Array<string | undefined> = [];
+    const next = fanOutAttributeInSource(
+      source,
+      [{ id: "talk-audio" }],
+      "data-automation",
+      (raw) => {
+        seen.push(raw);
+        return "rate-lane";
+      },
+    );
+    expect(seen).toEqual(['{"version":1,"lanes":[]}']);
+    expect(next).toContain(
+      'id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="rate-lane"',
+    );
+    expect(next).not.toContain('id="music" data-start="0" data-duration="4" data-automation');
+  });
+});
+
+const harness = createHappyDomRootHarness();
+
+function renderLinked(sel: DomEditSelection, commit: CommitDomAttributeBatch) {
+  let linked: LinkedSpeedCommit | null = null;
+  let rate: ReturnType<typeof useVolumeAutomation>["rate"] | null = null;
+  function Probe() {
+    linked = useLinkedSpeedCommit(sel, commit);
+    rate = useVolumeAutomation(sel, 0, vi.fn(), linked).rate;
+    return null;
+  }
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  act(() => harness.mount(host).render(<Probe />));
+  return { linked: () => linked, rate: () => rate };
+}
+
+describe("linked speed edits", () => {
+  it("fans a playback-rate edit out to the partner in one batch commit", async () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const onSetAttribute = vi.fn();
+    const probe = renderLinked(selection("talk"), commit);
+    await withLinkedPlaybackRate(onSetAttribute, probe.linked())("playback-rate", "2");
+    expect(onSetAttribute).not.toHaveBeenCalled();
+    expect(commit).toHaveBeenCalledTimes(1);
+    const [, ops, options] = commit.mock.calls[0] ?? [];
+    expect(ops).toEqual([{ type: "attribute", property: "playback-rate", value: "2" }]);
+    expect(options?.prepareContent?.(source)).toContain(
+      'id="talk-audio" data-start="0" data-duration="4" data-link="lk-1" data-automation="{&quot;version&quot;:1,&quot;lanes&quot;:[]}" data-playback-rate="2"',
+    );
+  });
+
+  it("fans a ramp preset out as one commit carrying each member's rate lane", () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const probe = renderLinked(selection("talk"), commit);
+    act(() => probe.rate()?.onApplyPreset("ramp-in"));
+    expect(commit).toHaveBeenCalledTimes(1);
+    const [, ops, options] = commit.mock.calls[0] ?? [];
+    expect(ops?.[0]?.property).toBe("automation");
+    expect(String(ops?.[0]?.value)).toContain('"target":"rate"');
+    const partner = /id="talk-audio"[^>]*data-automation="([^"]*)"/.exec(
+      options?.prepareContent?.(source) ?? "",
+    )?.[1];
+    expect(partner).toContain("rate");
+  });
+
+  it("leaves an unlinked clip on its usual write path", async () => {
+    usePlayerStore.getState().setElements(elements);
+    const commit = vi.fn<CommitDomAttributeBatch>(async () => true);
+    const onSetAttribute = vi.fn();
+    const probe = renderLinked(selection("music"), commit);
+    expect(probe.linked()).toBeNull();
+    await withLinkedPlaybackRate(onSetAttribute, probe.linked())("playback-rate", "2");
+    expect(onSetAttribute).toHaveBeenCalledWith("playback-rate", "2");
+    expect(commit).not.toHaveBeenCalled();
+  });
+});

package/src/components/editor/linkedSpeedEdits.ts

@@ -0,0 +1,94 @@
+import { usePlayerStore, type TimelineElement } from "../../player/store/playerStore";
+import { expandToLinkedMembers } from "../../player/components/audioClipLink";
+import { isLinkedSelectionOn } from "../../utils/linkedClipPreferences";
+import {
+  applyPatchByTarget,
+  readAttributeByTarget,
+  type PatchTarget,
+} from "../../utils/sourcePatcher";
+import type { CommitDomAttributeBatch } from "../../hooks/domEditCommitTypes";
+import { buildPatchTarget } from "../../hooks/timelineEditingHelpers";
+import type { DomEditSelection } from "./domEditingTypes";
+
+type AttributeValueFor = (current: string | undefined) => string | null;
+
+/** Writes a speed attribute on the selection and every `data-link` partner as one undo step. */
+export interface LinkedSpeedCommit {
+  commitAttribute: (attr: string, valueFor: AttributeValueFor, label: string) => Promise<boolean>;
+}
+
+const keyOf = (el: TimelineElement) => el.key ?? el.id;
+const dataProperty = (attr: string) => (attr.startsWith("data-") ? attr.slice(5) : attr);
+
+function isSelected(el: TimelineElement, selection: PatchTarget): boolean {
+  if (selection.hfId && el.hfId) return el.hfId === selection.hfId;
+  return selection.id != null && (el.domId ?? el.id) === selection.id;
+}
+
+export function linkedPartnerTargets(
+  selection: PatchTarget,
+  elements: readonly TimelineElement[],
+): PatchTarget[] {
+  const self = elements.find((el) => isSelected(el, selection));
+  if (!self?.link) return [];
+  const members = expandToLinkedMembers([keyOf(self)], elements, isLinkedSelectionOn());
+  members.delete(keyOf(self));
+  return elements
+    .filter((el) => members.has(keyOf(el)))
+    .map(buildPatchTarget)
+    .filter((target): target is NonNullable<typeof target> => target !== null);
+}
+
+export function fanOutAttributeInSource(
+  source: string,
+  targets: readonly PatchTarget[],
+  attr: string,
+  valueFor: AttributeValueFor,
+): string {
+  const property = dataProperty(attr);
+  return targets.reduce(
+    (html, target) =>
+      applyPatchByTarget(html, target, {
+        type: "attribute",
+        property,
+        value: valueFor(readAttributeByTarget(html, target, attr)),
+      }),
+    source,
+  );
+}
+
+/** Null when the selection has no link partner, so unlinked clips keep their usual write path. */
+export function useLinkedSpeedCommit(
+  selection: DomEditSelection,
+  commit: CommitDomAttributeBatch | undefined,
+): LinkedSpeedCommit | null {
+  const elements = usePlayerStore((s) => s.elements);
+  if (!commit) return null;
+  const partners = linkedPartnerTargets(selection, elements);
+  if (partners.length === 0) return null;
+  return {
+    commitAttribute: (attr, valueFor, label) => {
+      const property = dataProperty(attr);
+      return commit(
+        selection,
+        [{ type: "attribute", property, value: valueFor(selection.dataAttributes[property]) }],
+        {
+          label,
+          prepareContent: (html) => fanOutAttributeInSource(html, partners, attr, valueFor),
+        },
+      );
+    },
+  };
+}
+
+/** Routes `playback-rate` through the linked commit; every other attribute keeps `onSetAttribute`. */
+export function withLinkedPlaybackRate(
+  onSetAttribute: (attr: string, value: string) => void | Promise<void>,
+  linked: LinkedSpeedCommit | null,
+): (attr: string, value: string) => void | Promise<void> {
+  if (!linked) return onSetAttribute;
+  return async (attr, value) => {
+    if (attr !== "playback-rate") return onSetAttribute(attr, value);
+    await linked.commitAttribute("data-playback-rate", () => value, "Edit speed");
+  };
+}

package/src/components/editor/mediaAudioEdits.test.ts

@@ -88,9 +88,9 @@ describe("cutoutOps", () => {
 describe("mintLinkId", () => {
   it("dedupes against element ids and existing links", () => {
     const doc = document.implementation.createHTMLDocument("t");
-    expect(mintLinkId(doc)).toBe("link");
-    doc.body.innerHTML = '<div id="link"></div><video data-link="link-2"></video>';
-    expect(mintLinkId(doc)).toBe("link-3");
+    expect(mintLinkId(doc)).toBe("lk-1");
+    doc.body.innerHTML = '<div id="lk-1"></div><video data-link="lk-2"></video>';
+    expect(mintLinkId(doc)).toBe("lk-3");
   });
 });
 
@@ -176,10 +176,26 @@ describe("buildKeepSoundCutoutEdit", () => {
       { target: "rate", points: [{ t: 0, v: 2 }] },
     ]);
     expect(audio.getAttribute("data-link")).toBe(video.getAttribute("data-link"));
-    expect(video.getAttribute("data-link")).toBe("link");
+    expect(video.getAttribute("data-link")).toBe("lk-1");
+    expect(video.getAttribute("data-sync-origin")).toBe("lk-1");
+    expect(audio.getAttribute("data-sync-origin")).toBe("lk-1");
     expect(audio.parentElement).toBe(video.parentElement);
   });
 
+  it("keeps a hidden video's sound silent on the linked audio", () => {
+    const video = liveVideo();
+    video.setAttribute("data-hidden", "");
+    const edit = buildKeepSoundCutoutEdit({
+      video,
+      videoId: "clip",
+      target: { id: "clip" },
+      cutoutSrc: "assets/talk-cutout.webm",
+    });
+    const hidden = source.replace('<video id="clip"', '<video id="clip" data-hidden');
+    const doc = parse(applyEdit(hidden, edit));
+    expect(doc.getElementById("clip-audio")?.hasAttribute("data-hidden")).toBe(true);
+  });
+
   it("drops the video's automation attribute when it held no rate lane", () => {
     const video = makeVideo({
       id: "clip",