@hyperframes/studio 0.7.106 → 0.7.108

package/src/hooks/useInlineTextEdit.ts

@@ -0,0 +1,320 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { sanitizeRichTextChildren } from "@hyperframes/core/rich-text-sanitize";
+
+/**
+ * Editing an element's text where it sits, in the composition itself.
+ *
+ * The alternative is an input positioned over the element, which has to
+ * reproduce its font, size, weight, spacing, colour, alignment and wrapping to
+ * look right, and is subtly wrong the moment any of those is missed. The
+ * preview is a same-origin document holding the real element, and the commit
+ * path already mutates that exact node, so the element is both the most
+ * accurate surface to type into and the one the rest of the code understands.
+ *
+ * The session owns the element's editable state for its whole life, and tears
+ * down the same way whichever way it ends. A session that failed to close
+ * would leave the canvas unable to select anything.
+ */
+
+/**
+ * `true`, not `plaintext-only`.
+ *
+ * `plaintext-only` was what kept a text edit from becoming a structural one,
+ * and it also made it impossible to give three characters a colour, which is
+ * the point of editing in the composition rather than in a field. The guard it
+ * was providing is rebuilt as two narrower ones that do not cost the feature:
+ * paste arrives as plain text, and what leaves the element goes through the
+ * sanitiser before anyone writes it to a file.
+ */
+const EDITABLE = "true";
+/** Studio's accent, so the mark belongs to Studio rather than to the design. */
+const EDITING_OUTLINE = "2px solid #3CE6AC";
+
+export interface InlineTextEditSession {
+  element: HTMLElement;
+  /**
+   * The element's markup when editing started, for putting back on cancel.
+   * Markup rather than text: cancelling an edit that recoloured a word has to
+   * restore the colours it replaced, not just the letters.
+   */
+  original: string;
+  /** The element's own outline, to put back when the session ends. */
+  outline: string;
+  /** The element's own outline offset, restored with the outline. */
+  outlineOffset: string;
+}
+
+/** The live markup to persist and the session snapshot to restore on failure. */
+export interface InlineTextEditCommit {
+  /** The exact preview node that owned the edit; a reload must not retarget it. */
+  element: HTMLElement;
+  html: string;
+  previousHtml: string;
+}
+
+export interface InlineTextEditControls {
+  session: InlineTextEditSession | null;
+  /**
+   * Begin editing this element. `caretAt` is a point in the element's own
+   * document, so the caret can open where the user pointed rather than at a
+   * fixed end. Returns false when a session is already open.
+   */
+  start: (element: HTMLElement, caretAt?: { x: number; y: number }) => boolean;
+  /** Hand the current text to the commit function and close. */
+  commit: () => void;
+  /** Put the original text back and close, persisting nothing. */
+  cancel: () => void;
+}
+
+/**
+ * Drop the text selection, but only when it lives inside this element.
+ *
+ * A selection somewhere else in the preview belongs to whatever put it there
+ * and is not this session's to clear.
+ */
+function clearSelectionWithin(element: HTMLElement): void {
+  const selection = element.ownerDocument.defaultView?.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (!element.contains(range.startContainer) && !element.contains(range.endContainer)) return;
+  selection.removeAllRanges();
+}
+
+export function useInlineTextEdit({
+  onCommit,
+  onPause,
+}: {
+  /** Where the edited text goes. The caller owns persistence. */
+  onCommit: (commit: InlineTextEditCommit) => void;
+  /** Stop playback, so the element is not animating under the caret. */
+  onPause?: () => void;
+}): InlineTextEditControls {
+  const [session, setSession] = useState<InlineTextEditSession | null>(null);
+  // The teardown reads this rather than the state, so an exit path that runs
+  // before React re-renders still sees the element it has to clean up.
+  const openRef = useRef<InlineTextEditSession | null>(null);
+  /** The pending caret placement, so a session that closes first can drop it. */
+  const framesRef = useRef<number | null>(null);
+
+  const teardown = useCallback((): InlineTextEditSession | null => {
+    const open = openRef.current;
+    if (!open) return null;
+    if (framesRef.current !== null) {
+      open.element.ownerDocument.defaultView?.cancelAnimationFrame(framesRef.current);
+      framesRef.current = null;
+    }
+    openRef.current = null;
+    setSession(null);
+    // An element removed from the document mid-session is not an error, it is
+    // just nothing left to clean up.
+    if (open.element.isConnected) {
+      open.element.removeAttribute("contenteditable");
+      // Restored rather than cleared: the composition may have authored one.
+      open.element.style.outline = open.outline;
+      open.element.style.outlineOffset = open.outlineOffset;
+      // Drop the highlight too. Removing contenteditable and blurring leaves a
+      // selection made inside the element painted on screen, so a word picked
+      // with a double press stayed grey after the click that closed the edit.
+      clearSelectionWithin(open.element);
+      open.element.blur();
+    }
+    return open;
+  }, []);
+
+  const start = useCallback(
+    (element: HTMLElement, caretAt?: { x: number; y: number }): boolean => {
+      if (openRef.current) return false;
+
+      const open = {
+        element,
+        original: element.innerHTML,
+        outline: element.style.outline,
+        outlineOffset: element.style.outlineOffset,
+      };
+      // Drawn on the element itself, not in Studio's overlay above it. This is
+      // the only mark that says the caret is in the TEXT rather than the
+      // element being selected, and it has to sit in the same document as the
+      // caret to read that way.
+      element.style.outline = EDITING_OUTLINE;
+      element.style.outlineOffset = "2px";
+      openRef.current = open;
+      setSession(open);
+      onPause?.();
+
+      element.setAttribute("contenteditable", EDITABLE);
+      // Focused and selected on the next frame, not now. The press that opened
+      // this is still in flight: the canvas overlay takes focus on its own
+      // pointer-down, and the click that follows puts a caret in the element
+      // and collapses any selection. Doing it after all of that is what lands.
+      const view = element.ownerDocument.defaultView;
+      const raf = view?.requestAnimationFrame(() => {
+        framesRef.current = null;
+        if (openRef.current?.element !== element) return;
+        element.focus({ preventScroll: true });
+        placeCaret(element, caretAt);
+      });
+      framesRef.current = raf ?? null;
+      return true;
+    },
+    [onPause],
+  );
+
+  const commit = useCallback(() => {
+    const open = openRef.current;
+    if (!open) return;
+    // Sanitised here, in the element, so the preview shows exactly what will be
+    // saved rather than something the server will quietly cut down.
+    sanitizeRichTextChildren(open.element);
+    const html = open.element.innerHTML;
+    teardown();
+    // After teardown, so the commit path's own resync does not fight an
+    // element that is still editable.
+    onCommit({ element: open.element, html, previousHtml: open.original });
+  }, [onCommit, teardown]);
+
+  const cancel = useCallback(() => {
+    const open = openRef.current;
+    if (!open) return;
+    if (open.element.isConnected) open.element.innerHTML = open.original;
+    teardown();
+  }, [teardown]);
+
+  // The keys belong to the element, not to the document: the element lives in
+  // the preview's own document, so a listener on Studio's would never see them.
+  useEffect(() => {
+    const element = session?.element;
+    if (!element) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      // Shift+Enter is a line break in a multi-line element, and is left alone.
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        commit();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    // Clicking away keeps the work, which is what every other field in Studio
+    // does and what a user who has just typed something expects.
+    const onBlur = () => commit();
+    // Nothing here for double or triple click: the browser already takes the
+    // word on two and the whole text on three, which is what a text field does
+    // everywhere else. Overriding the double click to take everything cost the
+    // word selection and gained nothing the triple click did not already do.
+    // Dropping `plaintext-only` means the browser would otherwise paste a whole
+    // web page's markup straight in. What arrives is the words.
+    const insertPlainText = (text: string) => {
+      if (text) element.ownerDocument.execCommand("insertText", false, text);
+    };
+    const onPaste = (event: ClipboardEvent) => {
+      event.preventDefault();
+      insertPlainText(event.clipboardData?.getData("text/plain") ?? "");
+    };
+    // `contenteditable="true"` accepts dragged HTML as eagerly as pasted HTML.
+    // Keep the drop path on the same plain-text rail as paste so markup cannot
+    // execute in the same-origin preview before commit-time sanitisation.
+    const onDragOver = (event: DragEvent) => event.preventDefault();
+    const onDrop = (event: DragEvent) => {
+      event.preventDefault();
+      insertPlainText(event.dataTransfer?.getData("text/plain") ?? "");
+    };
+
+    element.addEventListener("keydown", onKeyDown);
+    element.addEventListener("blur", onBlur);
+    element.addEventListener("paste", onPaste);
+    element.addEventListener("dragover", onDragOver);
+    element.addEventListener("drop", onDrop);
+    return () => {
+      element.removeEventListener("keydown", onKeyDown);
+      element.removeEventListener("blur", onBlur);
+      element.removeEventListener("paste", onPaste);
+      element.removeEventListener("dragover", onDragOver);
+      element.removeEventListener("drop", onDrop);
+    };
+  }, [session, commit, cancel]);
+
+  // Navigation can remove the overlay while the opening frame is pending.
+  // Teardown is the single owner of cancelling that frame and restoring the
+  // composition node, so unmount closes through the same path as every exit.
+  useEffect(
+    () => () => {
+      teardown();
+    },
+    [teardown],
+  );
+
+  return { session, start, commit, cancel };
+}
+
+/**
+ * Put the caret where the user pointed, or after the last character.
+ *
+ * Opening on a point is what makes this feel like text rather than a dialog:
+ * the caret lands between the two letters that were clicked, exactly as it
+ * would in any other editor.
+ */
+function placeCaret(element: HTMLElement, at?: { x: number; y: number }): void {
+  const doc = element.ownerDocument;
+  const selection = doc.defaultView?.getSelection();
+  if (!selection) return;
+
+  const range = at ? caretRangeAt(doc, at) : null;
+  if (range && element.contains(range.startContainer)) {
+    selection.removeAllRanges();
+    selection.addRange(range);
+    return;
+  }
+  placeCaretAtEnd(element);
+}
+
+/** The caret position under a point, across the two APIs browsers expose. */
+function caretRangeAt(doc: Document, at: { x: number; y: number }): Range | null {
+  const legacy = doc as Document & {
+    caretRangeFromPoint?: (x: number, y: number) => Range | null;
+  };
+  if (typeof legacy.caretRangeFromPoint === "function") {
+    return legacy.caretRangeFromPoint(at.x, at.y);
+  }
+  const standard = doc as Document & {
+    caretPositionFromPoint?: (x: number, y: number) => { offsetNode: Node; offset: number } | null;
+  };
+  const position = standard.caretPositionFromPoint?.(at.x, at.y);
+  if (!position) return null;
+  const range = doc.createRange();
+  range.setStart(position.offsetNode, position.offset);
+  range.collapse(true);
+  return range;
+}
+
+/**
+ * Put the caret after the last character, with nothing selected.
+ *
+ * Selecting the whole text would mean the next keystroke silently destroys it,
+ * which is a bad thing to do to someone who double-clicked to fix a typo. A
+ * caret at the end is where a person who wants to keep typing expects to be,
+ * and everything else stays available: click anywhere to move it, drag to
+ * select, Cmd+A to take the lot.
+ */
+function placeCaretAtEnd(element: HTMLElement): void {
+  const doc = element.ownerDocument;
+  const selection = doc.defaultView?.getSelection();
+  if (!selection) return;
+  const range = doc.createRange();
+  // Into the text node, not just past the last child: collapsing the element's
+  // contents leaves the caret at a node boundary, which types in the right
+  // place but reports itself as "after child 0" and is a different position
+  // from the one the user sees at the end of the word.
+  const last = element.lastChild;
+  if (last && last.nodeType === 3) {
+    range.setStart(last, last.textContent?.length ?? 0);
+    range.collapse(true);
+  } else {
+    range.selectNodeContents(element);
+    range.collapse(false);
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}

package/src/hooks/useLivePlayheadTime.ts

@@ -0,0 +1,49 @@
+/**
+ * The playhead in composition seconds, live while the transport runs.
+ *
+ * The RAF loop deliberately does not push every frame through the store — it
+ * notifies `liveTime` instead, so the playhead can move without re-rendering the
+ * app. A panel that wants to follow it therefore has to subscribe itself, and
+ * throttle: 30 Hz reads as continuous and costs an order of magnitude less than a
+ * render per frame.
+ *
+ * Paused, the store is the truth — a seek or a scrub lands there — so this returns
+ * that instead, which is what lets a readout follow the playhead while it is being
+ * dragged as well as while it is playing.
+ */
+import { useEffect, useRef, useState } from "react";
+import { liveTime, usePlayerStore } from "../player";
+
+/** Long enough to be much cheaper than a frame, short enough to read as motion. */
+const THROTTLE_MS = 33;
+
+export function useLivePlayheadTime(): number {
+  const storeTime = usePlayerStore((s) => s.currentTime);
+  const isPlaying = usePlayerStore((s) => s.isPlaying);
+  const liveRef = useRef(storeTime);
+  const [, forceRender] = useState(0);
+
+  // Paused, the ref tracks the store so the first frame of playback is never a
+  // stale value from the last time the transport ran.
+  if (!isPlaying) liveRef.current = storeTime;
+
+  useEffect(() => {
+    if (!isPlaying) return;
+    let timerId: ReturnType<typeof setTimeout> | 0 = 0;
+    const unsubscribe = liveTime.subscribe((t) => {
+      liveRef.current = t;
+      if (!timerId) {
+        timerId = setTimeout(() => {
+          timerId = 0;
+          forceRender((v) => v + 1);
+        }, THROTTLE_MS);
+      }
+    });
+    return () => {
+      unsubscribe();
+      if (timerId) clearTimeout(timerId);
+    };
+  }, [isPlaying]);
+
+  return isPlaying ? liveRef.current : storeTime;
+}

package/src/hooks/usePreviewPersistence.ts

@@ -14,6 +14,7 @@ import {
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { applyUndoRestoreToPreview, type UndoRestoreFile } from "../utils/gsapUndoRestore";
 import { usePlayerStore } from "../player";
+import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 
 /** The restore payload the undo/redo preview-sync consumes (from the history store). */
 interface HistoryPreviewRestore {
@@ -207,7 +208,13 @@ export function usePreviewPersistence({
         player.setElements([]);
         player.setSelectedElementId(null);
         player.setTimelineReady(false);
+        return;
       }
+      // A soft restore patched the reverted attributes onto the live preview, but the
+      // player store keeps its own copy and that copy is what the automation lanes
+      // draw — so without this an undone envelope edit stayed invisible until a
+      // reload. The full path above clears the store and waits for discovery instead.
+      syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
     },
     [previewIframeRef, activeCompPathRef, reloadPreview],
   );

package/src/hooks/useTimelineEditing.ts

@@ -449,6 +449,9 @@ export function useTimelineEditing({
             kind: "timeline",
             files: { [targetPath]: patchedContent },
             readFile: async () => originalContent,
+            // remove-element already wrote the removal, so disk holds THAT — not the
+            // content read at the top. Undo still goes back to the original.
+            diskContent: { [targetPath]: removedContent },
             writeFile: writeProjectFile,
             recordEdit,
           });

package/src/player/components/AutomationSelectionMenu.tsx

@@ -0,0 +1,76 @@
+/**
+ * Context menu for a right-click inside an automation time selection: the four
+ * utility shapes, then Simplify. Portal + dismiss handling mirror
+ * TrackGapContextMenu; rows never vanish — an inapplicable Simplify dims with
+ * a reason instead of leaving a shorter menu.
+ */
+import { memo } from "react";
+import { createPortal } from "react-dom";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { AUTOMATION_SHAPES, type AutomationShapeId } from "./automationShapes";
+
+interface AutomationSelectionMenuProps {
+  x: number;
+  y: number;
+  onClose(): void;
+  onInsertShape(shape: AutomationShapeId): void;
+  onSimplify(): void;
+  /** At least three points in the range — fewer has nothing to thin. */
+  canSimplify: boolean;
+}
+
+export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
+  x,
+  y,
+  onClose,
+  onInsertShape,
+  onSimplify,
+  canSimplify,
+}: AutomationSelectionMenuProps) {
+  const menuRef = useContextMenuDismiss(onClose);
+  const row =
+    "block w-full px-2 py-1 text-left text-[11px] text-panel-text-1 hover:bg-panel-bg-3 disabled:opacity-40";
+  // Same edge-clamping precedent as TrackGapContextMenu: without it a
+  // right-click near the bottom/right of the timeline renders this menu
+  // partially off-screen.
+  const menuWidth = 140;
+  const menuHeight = AUTOMATION_SHAPES.length * 24 + 32;
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="hf-automation-menu fixed z-50 min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      style={{ left: adjustedX, top: adjustedY }}
+    >
+      {AUTOMATION_SHAPES.map((shape) => (
+        <button
+          key={shape.id}
+          type="button"
+          className={row}
+          onClick={() => {
+            onInsertShape(shape.id);
+            onClose();
+          }}
+        >
+          {shape.label}
+        </button>
+      ))}
+      <div className="my-1 border-t border-panel-border-input" />
+      <button
+        type="button"
+        className={row}
+        disabled={!canSimplify}
+        title={canSimplify ? undefined : "Fewer than three points in the selection"}
+        onClick={() => {
+          onSimplify();
+          onClose();
+        }}
+      >
+        Simplify
+      </button>
+    </div>,
+    document.body,
+  );
+});

package/src/player/components/AutomationValueInput.tsx

@@ -0,0 +1,51 @@
+/**
+ * Typing an exact value into a breakpoint.
+ *
+ * Dragging is how an envelope is shaped, but it cannot land on a number: -6.0 dB
+ * is not a pixel you can find. This is the lane's keyboard route to one value,
+ * kept in its own file so the lane component stays about the pointer.
+ */
+
+export interface AutomationValueInputProps {
+  text: string;
+  /** Left edge in the lane's own coordinates. */
+  leftPx: number;
+  label: string;
+  onChange(text: string): void;
+  /** Enter or blur: apply what was typed. */
+  onCommit(): void;
+  /** Escape: leave the point where it was. */
+  onCancel(): void;
+}
+
+export function AutomationValueInput({
+  text,
+  leftPx,
+  label,
+  onChange,
+  onCommit,
+  onCancel,
+}: AutomationValueInputProps) {
+  return (
+    <input
+      // pointer-events-auto: the lane band around it takes none, so that clips
+      // sharing the row do not cover each other's envelopes (see the lane).
+      className="hf-automation-value pointer-events-auto absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1"
+      style={{ left: leftPx, top: 1, width: 44, zIndex: 4 }}
+      // The lane is a pointer surface, and the timeline above it owns single-key
+      // shortcuts. Without stopping both, a press lands on the lane instead of
+      // the field and a typed "5" scrubs the transport.
+      onPointerDown={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") onCommit();
+        if (e.key === "Escape") onCancel();
+      }}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onCommit}
+      value={text}
+      aria-label={`${label} value`}
+      autoFocus
+    />
+  );
+}

package/src/player/components/LayerDisclosureRow.tsx

@@ -1,12 +1,11 @@
 import { CaretRight } from "@phosphor-icons/react";
-import type { TimelineElement } from "../store/playerStore";
 import { TRACK_H } from "./timelineLayout";
 import { TrackClipCount } from "./TrackClipCount";
 
 // Layer row (Figma order: disclosure ▸/▾, diamond, name) — the disclosure lives
 // here, not on the clip bar, and re-expands a collapsed layer.
 export function LayerDisclosureRow({
-  keyframeClip,
+  name,
   clipCount,
   isExpanded,
   gutterBackground,
@@ -15,7 +14,10 @@ export function LayerDisclosureRow({
   onToggleClipExpanded,
   children,
 }: {
-  keyframeClip: TimelineElement;
+  /** What this row is called. The active clip's own name when it is alone on the
+   *  track; the track itself once it holds several, since naming a shared row
+   *  after one of its clips reads as if the rows under it were that clip's. */
+  name: string;
   clipCount: number;
   isExpanded: boolean;
   gutterBackground: string;
@@ -31,7 +33,6 @@ export function LayerDisclosureRow({
   /** Trailing controls that act on the LAYER (the visibility eye), not on a lane. */
   children?: React.ReactNode;
 }) {
-  const name = keyframeClip.label ?? keyframeClip.domId ?? keyframeClip.id;
   return (
     <div
       className="absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"

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

@@ -37,6 +37,7 @@ import {
   getTimelineLaneTop,
   createTimelineRowGeometry,
 } from "./timelineLayout";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 import { formatTime } from "../lib/time";
 import { usePlayerStore } from "../store/playerStore";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
@@ -578,6 +579,89 @@ describe("Timeline provider boundary", () => {
     act(() => root.unmount());
   });
 
+  // The caret belongs to the row, not to whichever clip on it is selected: the
+  // automation lanes below it are the track's, shared per property. Toggling one
+  // clip left the row's state depending on the selection, and a collapse that
+  // only dropped the active clip left the row stuck open.
+  it("expands and collapses every clip on a shared track together", () => {
+    const host = createSizedTimelineHost(720);
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+    });
+    usePlayerStore.setState({
+      duration: 8,
+      timelineReady: true,
+      elements: [
+        { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
+        { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
+      ],
+    });
+    const root = createRoot(host);
+    act(() => root.render(React.createElement(Timeline)));
+
+    const row = host.querySelector<HTMLElement>('[data-el-id="narration-1"]')?.parentElement
+      ?.parentElement;
+    // A row of several clips is named for the track, so the caret is too.
+    const caret = () => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]');
+    expect(caret()?.getAttribute("aria-label")).toBe("Expand Track 1 keyframes");
+
+    act(() => caret()?.click());
+    // One shared volume row, and BOTH clips hold it open.
+    expectTrackExpansion(row, ["narration-1", "narration-2"], TRACK_H + AUTOMATION_LANE_H);
+
+    // Every clip bar on the row is capped to one track height. Only the clip
+    // owning the property lanes used to be, so its siblings stretched the whole
+    // expanded row and painted their waveforms over the envelopes below.
+    expect(
+      ["narration-1", "narration-2"].map(
+        (id) => host.querySelector<HTMLElement>(`[data-el-id="${id}"]`)?.style.height,
+      ),
+    ).toEqual([`${TRACK_H - 2 * CLIP_Y}px`, `${TRACK_H - 2 * CLIP_Y}px`]);
+
+    act(() => caret()?.click());
+    expectTrackExpansion(row, [], TRACK_H);
+    act(() => root.unmount());
+  });
+
+  // The lanes are the row's, and selecting a clip must not rebuild them. They
+  // used to hang off the active clip's property lanes, so clicking a sibling
+  // moved the whole subtree into a different element and remounted every lane —
+  // which threw away each one's hover state and any gesture in flight. Pressing
+  // a lane to select its clip therefore made the handles vanish under the
+  // pointer, which is the one gesture the read-only lane exists to support.
+  it("keeps the automation lanes mounted when the selection moves along the row", () => {
+    const host = createSizedTimelineHost(720);
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+    });
+    usePlayerStore.setState({
+      duration: 8,
+      timelineReady: true,
+      selectedElementId: "narration-2",
+      elements: [
+        { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
+        { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
+      ],
+    });
+    const root = createRoot(host);
+    act(() => root.render(React.createElement(Timeline)));
+    act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]')?.click());
+
+    const before = [...host.querySelectorAll(".hf-automation-lane")];
+    expect(before).toHaveLength(2);
+
+    act(() => usePlayerStore.setState({ selectedElementId: "narration-1" }));
+
+    // Identity, not deep equality: a remount produces structurally identical
+    // nodes, so only `toBe` can tell the two apart.
+    const after = [...host.querySelectorAll(".hf-automation-lane")];
+    expect(after).toHaveLength(before.length);
+    after.forEach((node, index) => expect(node).toBe(before[index]));
+    act(() => root.unmount());
+  });
+
   it("marks every clip in selectedElementIds as selected", () => {
     const host = createSizedTimelineHost(720);