@hyperframes/studio 0.8.107 → 0.8.109

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`);
+  });
+});

package/src/components/editor/InlineTextCaret.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
+
+/** The drawn caret's width on screen, whatever the preview's scale. */
+export const CARET_PX = 2;
+
+interface CaretPlacement {
+  left: number;
+  top: number;
+  height: number;
+  color: string;
+}
+
+/**
+ * The caret of a text edited in place, drawn at screen size: the preview is scaled, so the browser's 1 px caret
+ * shrinks below a pixel. This one follows the real selection; the browser's own is transparent meanwhile.
+ */
+export function InlineTextCaret({
+  session,
+  iframe,
+}: {
+  session: InlineTextEditSession | null;
+  iframe: HTMLIFrameElement | null;
+}) {
+  const [placement, setPlacement] = useState<CaretPlacement | null>(null);
+  const element = session?.element ?? null;
+
+  useEffect(() => {
+    if (!element || !iframe) {
+      setPlacement(null);
+      return;
+    }
+    const doc = element.ownerDocument;
+    const view = doc.defaultView;
+    const studio = iframe.ownerDocument.defaultView;
+    const color = caretColorOf(element);
+    const ownCaret = element.style.caretColor;
+    element.style.caretColor = "transparent";
+    let composing = false;
+    let side: CaretSide = "after";
+    const update = () =>
+      setPlacement(composing ? null : placeAtCaret(element, iframe, color, side));
+    // The DOM has no side for a soft-wrap point (one line's end is the next one's start): the key that moved there
+    // says which, as CodeMirror and ProseMirror keep it.
+    const onKey = ({ key }: KeyboardEvent) => {
+      if (!MODIFIERS.has(key)) side = SIDE_OF_KEY[key] ?? "after";
+    };
+    const onPress = () => void (side = "after");
+    const composition = (on: boolean) => () => {
+      composing = on;
+      update();
+    };
+    const start = composition(true);
+    const end = composition(false);
+    // The preview moves by transforms (the player's scale, a pan or zoom of the stage) that fire no event: the iframe's
+    // box is checked each frame and a move re-places the caret.
+    let box = "";
+    let frame = 0;
+    const follow = () => {
+      const { left, top, width, height } = iframe.getBoundingClientRect();
+      const now = `${left},${top},${width},${height}`;
+      if (now !== box) {
+        box = now;
+        update();
+      }
+      frame = studio?.requestAnimationFrame(follow) ?? 0;
+    };
+    doc.addEventListener("selectionchange", update);
+    element.addEventListener("keydown", onKey);
+    element.addEventListener("pointerdown", onPress);
+    element.addEventListener("input", update);
+    element.addEventListener("focus", update);
+    element.addEventListener("blur", update);
+    element.addEventListener("compositionstart", start);
+    element.addEventListener("compositionend", end);
+    view?.addEventListener("resize", update);
+    view?.addEventListener("scroll", update, true);
+    follow();
+    return () => {
+      studio?.cancelAnimationFrame(frame);
+      doc.removeEventListener("selectionchange", update);
+      element.removeEventListener("keydown", onKey);
+      element.removeEventListener("pointerdown", onPress);
+      element.removeEventListener("input", update);
+      element.removeEventListener("focus", update);
+      element.removeEventListener("blur", update);
+      element.removeEventListener("compositionstart", start);
+      element.removeEventListener("compositionend", end);
+      view?.removeEventListener("resize", update);
+      view?.removeEventListener("scroll", update, true);
+      element.style.caretColor = ownCaret;
+    };
+  }, [element, iframe]);
+
+  if (!placement || !iframe) return null;
+  // On Studio's body: a transformed ancestor in the canvas would make `fixed` relative to itself, not the viewport.
+  return createPortal(
+    <div
+      // Keyed on where it stands, so each move starts the blink lit, as the system caret does.
+      key={`${placement.left},${placement.top}`}
+      data-inline-text-caret="true"
+      aria-hidden="true"
+      className="hf-inline-text-caret pointer-events-none fixed z-200"
+      style={{
+        left: placement.left,
+        top: placement.top,
+        width: CARET_PX,
+        height: placement.height,
+        background: placement.color,
+      }}
+    />,
+    iframe.ownerDocument.body,
+  );
+}
+
+/** The colour the browser would draw its caret in: `caret-color`, or the text's colour when that is `auto`. */
+function caretColorOf(element: HTMLElement): string {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  if (!style) return "currentColor";
+  return style.caretColor && style.caretColor !== "auto" ? style.caretColor : style.color;
+}
+
+type CaretSide = "before" | "after";
+const MODIFIERS = new Set(["Shift", "Control", "Alt", "Meta"]);
+// Only End leaves Chrome's own caret at the earlier line's end; an arrow onto a wrap point lands on the next line.
+const SIDE_OF_KEY: Record<string, CaretSide> = { End: "before" };
+
+/** Where the caret stands on Studio's screen, or null when there is none to draw: a range selected, the text not
+ * focused, or the selection outside it. */
+
+function placeAtCaret(
+  element: HTMLElement,
+  iframe: HTMLIFrameElement,
+  color: string,
+  side: CaretSide,
+): CaretPlacement | null {
+  const view = element.ownerDocument.defaultView;
+  const range = view ? caretRange(element, view) : null;
+  if (!view || !range) return null;
+  const rect = (side === "before" && endOfCharBefore(range)) || caretRect(range, element, view);
+  const box = iframe.getBoundingClientRect();
+  const scale = view.innerWidth ? box.width / view.innerWidth : 1;
+  return {
+    left: box.left + rect.left * scale - CARET_PX / 2,
+    top: box.top + rect.top * scale,
+    height: rect.height * scale,
+    color,
+  };
+}
+
+/** The collapsed range's box on its line. A caret between two nodes has none, so it stands beside them; an empty
+ * text has neither, so it stands at the text's start, one line tall. */
+function caretRect(range: Range, element: HTMLElement, view: Window) {
+  const last = [...range.getClientRects()].reverse().find((rect) => rect.height > 0);
+  if (last) return { left: last.left, top: last.top, height: last.height };
+  const beside = besideNode(range);
+  if (beside) return beside;
+  const style = view.getComputedStyle(element);
+  const box = element.getBoundingClientRect();
+  const fontSize = Number.parseFloat(style.fontSize) || 16;
+  const line = Number.parseFloat(style.lineHeight) || fontSize * 1.2;
+  return {
+    left: box.left + (Number.parseFloat(style.paddingLeft) || 0),
+    top: box.top + (Number.parseFloat(style.paddingTop) || 0),
+    height: line,
+  };
+}
+
+function caretRange(element: HTMLElement, view: Window): Range | null {
+  const doc = element.ownerDocument;
+  const selection = view.getSelection();
+  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) return null;
+  if (!doc.hasFocus() || !element.contains(doc.activeElement)) return null;
+  const range = selection.getRangeAt(0);
+  return element.contains(range.startContainer) ? range : null;
+}
+
+/** The right edge of the character just before a collapsed range in a text node: where a caret that came from
+ * before a soft-wrap point stands, at the end of the earlier line. */
+function endOfCharBefore({ startContainer: at, startOffset: offset }: Range) {
+  if (at.nodeType !== Node.TEXT_NODE || offset === 0) return null;
+  const char = at.ownerDocument!.createRange();
+  // An emoji's second half alone has no box: take the whole pair.
+  const low = /[\uDC00-\uDFFF]/.test((at as Text).data[offset - 1] ?? "");
+  char.setStart(at, offset - (low && offset > 1 ? 2 : 1));
+  char.setEnd(at, offset);
+  // A trailing space at a wrap has a box on each line; the earlier line's comes first.
+  const rect = [...char.getClientRects()].find((each) => each.height > 0);
+  return rect ? { left: rect.right, top: rect.top, height: rect.height } : null;
+}
+
+/** At an element boundary: the end of the node before, or the start of the node after (a line break's own line). */
+function besideNode(range: Range) {
+  const [before, after] = neighbours(range);
+  const node = before && before.nodeName !== "BR" ? before : (after ?? before);
+  if (!node) return null;
+  const around = range.cloneRange();
+  around.selectNode(node);
+  const rects = [...around.getClientRects()].filter((rect) => rect.height > 0);
+  const end = node === before;
+  const rect = end ? rects.at(-1) : rects[0];
+  return rect ? { left: end ? rect.right : rect.left, top: rect.top, height: rect.height } : null;
+}
+
+/** The nodes either side of a collapsed range; an empty text node is a boundary too, between its siblings. */
+function neighbours({ startContainer: at, startOffset: offset }: Range) {
+  return at.nodeType === Node.TEXT_NODE
+    ? [at.previousSibling, at.nextSibling]
+    : [at.childNodes[offset - 1] ?? null, at.childNodes[offset] ?? null];
+}

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/carveOutput.ts

@@ -0,0 +1,54 @@
+import {
+  HF_AUDIO_FX_ATTR,
+  serializeAudioFxChain,
+  type HfAudioFxChain,
+} from "@hyperframes/core/audio-fx";
+import { type HfAutomation } from "@hyperframes/core/audio-automation";
+import { isCarveVoiceElement } from "./useFxCarveGrouping.js";
+import { automationAttrValue, HF_AUDIO_AUTOMATION_ATTR } from "./propertyPanelAutomation";
+import type { CarveClip } from "./useFxCarveNodes.js";
+import { readClipClock } from "./clipAudioClock.js";
+
+/** Lanes belonging to nodes the carve generated, which a re-run replaces. */
+export function withoutCarveLanes(automation: HfAutomation, chain: HfAudioFxChain): HfAutomation {
+  const prefixes = chain.nodes.filter((n) => n.fromCarve && n.id).map((n) => `fx.${n.id}.`);
+  if (prefixes.length === 0) return automation;
+  return {
+    version: automation.version,
+    lanes: automation.lanes.filter((lane) => !prefixes.some((p) => lane.target.startsWith(p))),
+  };
+}
+
+/** Every named voice still present with a src; a deleted source is skipped, not fatal. */
+export function resolveCarveVoices(doc: Document, sources: readonly string[]): CarveClip[] {
+  const voices: CarveClip[] = [];
+  for (const id of sources) {
+    const el = doc.getElementById(id);
+    // By tag name: iframe-realm elements fail `instanceof HTMLAudioElement`.
+    if (!isCarveVoiceElement(el)) continue;
+    const src = el.getAttribute("src");
+    if (!src) continue;
+    const clock = readClipClock((name) => el.getAttribute(name));
+    voices.push({ src, start: el.getAttribute("data-start"), clock });
+  }
+  return voices;
+}
+
+/** Remove the filters and lanes a carve generated once it no longer names a voice. */
+export async function dropCarveOutput(
+  chain: HfAudioFxChain,
+  automation: HfAutomation,
+  onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
+): Promise<void> {
+  const carriedOver = withoutCarveLanes(automation, chain);
+  if (carriedOver.lanes.length !== automation.lanes.length) {
+    await onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(carriedOver) || null);
+  }
+  const kept = chain.nodes.filter((n) => !n.fromCarve);
+  if (kept.length !== chain.nodes.length) {
+    await onSetAttributeQuiet(
+      HF_AUDIO_FX_ATTR,
+      kept.length ? serializeAudioFxChain({ version: 1, nodes: kept }) : null,
+    );
+  }
+}

package/src/components/editor/cropPresetStore.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+export interface CropPresetBarTarget {
+  hfId?: string;
+  id?: string;
+}
+
+interface CropPresetBarState {
+  openFor: CropPresetBarTarget | null;
+  open: (target: CropPresetBarTarget) => void;
+  close: () => void;
+}
+
+/** Which clip the crop preset bar is open for; the canvas shows it while that element is selected. */
+export const useCropPresetBarStore = create<CropPresetBarState>((set) => ({
+  openFor: null,
+  open: (target) => set({ openFor: target }),
+  close: () => set({ openFor: null }),
+}));
+
+export function isCropBarTarget(element: Element, target: CropPresetBarTarget | null): boolean {
+  if (!target) return false;
+  const hfId = element.getAttribute("data-hf-id");
+  if (target.hfId && hfId) return target.hfId === hfId;
+  return Boolean(target.id) && element.id === target.id;
+}
+
+/** The crop lift is a stylesheet rule, so the inline clip-path is still the committed one. */
+export function committedClipPath(element: Element): string | null {
+  const style = element.getAttribute("style") ?? "";
+  const match = /(?:^|;)\s*clip-path\s*:\s*([^;]+)/i.exec(style);
+  return match?.[1]?.trim() ?? null;
+}