fix(studio): an automation lane edit is refused on a locked clip and reports how it saved

packages/studio/src/App.tsx

@@ -260,7 +260,10 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     handleDuplicate,
     onResetKeyframes: () => resetKeyframesRef.current(),
     onDeleteSelectedKeyframes: () => deleteSelectedKeyframesRef.current(),
-    onAfterUndoRedo: () => invalidateGsapCacheRef.current(),
+    onAfterUndoRedo: (restore) => {
+      invalidateGsapCacheRef.current();
+      timelineEditing.restoreLiveLanes(restore);
+    },
     onGroupSelection: () => domEditSessionRef.current.handleGroupSelection(),
     onUngroupSelection: () => domEditSessionRef.current.handleUngroupSelection(),
     activeCompPath,

packages/studio/src/components/editor/TimelineFxPopover.test.tsx

@@ -87,7 +87,7 @@ describe("TimelineFxPopover", () => {
     act(() => {
       button?.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
     });
-    expect(onChainPreview).toHaveBeenCalledWith(EMPTY_CHAIN);
+    expect(onChainPreview).toHaveBeenCalledWith(EMPTY_CHAIN, true);
   });
 
   it("Escape closes without letting the keystroke propagate past the popover", () => {

packages/studio/src/components/editor/TimelineFxPopover.tsx

@@ -75,7 +75,7 @@ export interface TimelineFxPopoverProps {
    *  selected clip's attribute — the caller resolves which). */
   onChainChange: (next: HfAudioFxChain) => void;
   /** Preview a hypothetical chain on the running graph without persisting. */
-  onChainPreview?: (next: HfAudioFxChain) => void;
+  onChainPreview?: (next: HfAudioFxChain, ended?: boolean) => void;
   onAuditionTransport?: (on: boolean) => void;
   /** Select the target the way clicking it in the timeline does, and ensure
    *  the property panel's Audio FX group is expanded. */

packages/studio/src/components/editor/useFxAudition.ts

@@ -11,7 +11,7 @@ import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
 
 export function useFxAudition(
   chain: HfAudioFxChain,
-  onChainPreview: ((chain: HfAudioFxChain) => void) | undefined,
+  onChainPreview: ((chain: HfAudioFxChain, ended?: boolean) => void) | undefined,
   onAuditionTransport: ((on: boolean) => void) | undefined,
 ) {
   /**
@@ -45,7 +45,7 @@ export function useFxAudition(
         // Stop before reverting, for the mirror of that reason — the last thing
         // heard should be the preset, not a frame of the chain coming back.
         onAuditionTransport?.(false);
-        onChainPreview(auditionBase.current);
+        onChainPreview(auditionBase.current, true);
         auditionBase.current = null;
       }
     },
@@ -96,7 +96,7 @@ export function useFxAudition(
     () => () => {
       if (auditionBase.current) {
         transportRef.current?.(false);
-        previewRef.current?.(auditionBase.current);
+        previewRef.current?.(auditionBase.current, true);
       }
     },
     [],

packages/studio/src/components/nle/useTimelineEditCallbacks.ts

@@ -41,6 +41,7 @@ export interface TimelineEditCallbackDeps {
   handleToggleTrackHidden: (track: number, hidden: boolean) => Promise<void> | void;
   setAudioGroupAttribute: {
     setLive: (groupId: string, attr: string, value: string | null) => void;
+    revertLive?: (groupId: string, attr: string) => void;
     setQuiet: (
       groupId: string,
       attr: string,
@@ -61,6 +62,7 @@ export interface TimelineEditCallbackDeps {
   /** C1's single-clip FX write, addressed by the clip itself. */
   setElementFxAttribute?: {
     setLive: (element: TimelineElement, attr: string, value: string | null) => void;
+    revertLive?: (element: TimelineElement, attr: string) => void;
     setQuiet: (
       element: TimelineElement,
       attr: string,
@@ -216,9 +218,11 @@ export function useTimelineEditCallbacks({
       onToggleTrackHidden: handleToggleTrackHidden,
       onSetAudioGroupAttributeLive: setAudioGroupAttribute.setLive,
       onSetAudioGroupAttributeQuiet: setAudioGroupAttribute.setQuiet,
+      onRevertAudioGroupAttributeLive: setAudioGroupAttribute.revertLive,
       onGroupClips: handleGroupClips,
       onSetElementAttributeLive: setElementFxAttribute?.setLive,
       onSetElementAttributeQuiet: setElementFxAttribute?.setQuiet,
+      onRevertElementAttributeLive: setElementFxAttribute?.revertLive,
       onBlockedEditAttempt: handleBlockedTimelineEdit,
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,

packages/studio/src/contexts/DomEditContext.tsx

@@ -13,6 +13,7 @@ export interface DomEditActionsValue extends Pick<
   | "handlePreviewCanvasPointerLeave"
   | "applyDomSelection"
   | "clearDomSelection"
+  | "refreshDomEditSelectionFromPreview"
   | "handleDomStyleCommit"
   | "handleDomStyleCommitForSelection"
   | "handleDomAttributeCommit"
@@ -155,6 +156,7 @@ export function DomEditProvider({
     handlePreviewCanvasPointerLeave,
     applyDomSelection,
     clearDomSelection,
+    refreshDomEditSelectionFromPreview,
     handleDomStyleCommit,
     handleDomStyleCommitForSelection,
     handleDomAttributeCommit,
@@ -248,6 +250,7 @@ export function DomEditProvider({
       handlePreviewCanvasPointerLeave,
       applyDomSelection,
       clearDomSelection,
+      refreshDomEditSelectionFromPreview,
       handleDomStyleCommit,
       handleDomStyleCommitForSelection,
       handleDomAttributeCommit,
@@ -322,6 +325,7 @@ export function DomEditProvider({
       handlePreviewCanvasPointerLeave,
       applyDomSelection,
       clearDomSelection,
+      refreshDomEditSelectionFromPreview,
       handleDomStyleCommit,
       handleDomStyleCommitForSelection,
       handleDomAttributeCommit,

packages/studio/src/contexts/TimelineEditContext.tsx

@@ -44,9 +44,11 @@ export function TimelineEditProvider({
       value.onToggleTrackHidden,
       value.onSetAudioGroupAttributeLive,
       value.onSetAudioGroupAttributeQuiet,
+      value.onRevertAudioGroupAttributeLive,
       value.onGroupClips,
       value.onSetElementAttributeLive,
       value.onSetElementAttributeQuiet,
+      value.onRevertElementAttributeLive,
       value.onBlockedEditAttempt,
       value.onSplitElement,
       value.onRazorSplit,

packages/studio/src/hooks/liveLanes.ts

@@ -0,0 +1,147 @@
+import { useRef, useState } from "react";
+import { readTargetAttribute, type PatchTarget } from "./timelineEditingHelpers";
+
+/** Where a lane's value lives in source, so an undo can re-read it. */
+export interface LiveLaneSource {
+  path: string;
+  target: PatchTarget | null;
+  attr: string;
+}
+
+/** The files an undo or redo rewrote. */
+export interface LiveLaneRestore {
+  paths?: string[];
+  files?: Record<string, { restored: string }>;
+}
+
+/** Per-lane live-preview state: the value before a gesture, pending saves, the last verified value. */
+function createLiveLanes(project: () => string, composition: () => string) {
+  const before = new Map<string, string | null>();
+  const sources = new Map<string, LiveLaneSource>();
+  const pending = new Map<string, Set<number>>();
+  const verified = new Map<string, string | null>();
+  // Lanes whose before-value was read with no save pending, so it is what the file holds.
+  const clean = new Set<string>();
+  let saves = 0;
+  const take = (key: string): string | null | undefined => {
+    const claimed = before.has(key) ? (before.get(key) ?? null) : undefined;
+    before.delete(key);
+    clean.delete(key);
+    if (!pending.has(key)) sources.delete(key);
+    return claimed;
+  };
+  const overtaken = (key: string, save: number): boolean =>
+    [...(pending.get(key) ?? [])].some((newer) => newer > save);
+  const rebase = (key: string, value: string | null | undefined): void => {
+    if (value === undefined) {
+      clean.delete(key);
+      verified.delete(key);
+      return;
+    }
+    if (before.has(key)) before.set(key, value);
+    if (pending.has(key)) verified.set(key, value);
+    if (pending.has(key)) clean.delete(key);
+    else clean.add(key);
+  };
+  const scoped = (laneKey: string): string => `${project()}\n${composition()}\n${laneKey}`;
+  return {
+    preview(laneKey: string, readCurrent: () => string | null, source: LiveLaneSource): void {
+      const key = scoped(laneKey);
+      if (before.has(key)) return;
+      before.set(key, readCurrent());
+      sources.set(key, source);
+      if (!pending.has(key)) clean.add(key);
+    },
+    // A save. Its settle records what the file holds: `saved`, else the last value verified on
+    // this lane (a landed save, a read-back, or a clean before-value), never an unsaved one.
+    // Store and preview follow only while no newer save is pending and its composition is open,
+    // and the preview only while no drag is live.
+    claim(laneKey: string, apply: LiveLaneApply, source: LiveLaneSource): LiveLaneSave {
+      const key = scoped(laneKey);
+      const open = () => scoped(laneKey) === key;
+      const trusted = clean.has(key);
+      const claimed = take(key);
+      const mine = ++saves;
+      sources.set(key, source);
+      if (claimed !== undefined && trusted) verified.set(key, claimed);
+      pending.set(key, (pending.get(key) ?? new Set<number>()).add(mine));
+      const preview = (value: string | null) => {
+        if (open() && !before.has(key) && !overtaken(key, mine)) apply.preview(value);
+      };
+      return {
+        preview,
+        read(value) {
+          verified.set(key, value);
+        },
+        settle(saved) {
+          const inFlight = pending.get(key);
+          inFlight?.delete(mine);
+          if (saved !== undefined) verified.set(key, saved);
+          const value = verified.get(key);
+          // With no save left in flight the file can change under it (undo, an outside edit).
+          if (!inFlight?.size) {
+            pending.delete(key);
+            verified.delete(key);
+            if (!before.has(key)) sources.delete(key);
+          }
+          if (value === undefined || overtaken(key, mine) || !open()) return;
+          if (before.has(key)) {
+            before.set(key, value);
+            clean.add(key);
+          }
+          apply.store(value);
+          preview(value);
+        },
+      };
+    },
+    // A gesture refused before it saved: put its before-value back, which hands the lane
+    // back to any save still pending on it.
+    revert(laneKey: string, apply: LiveLaneApply): void {
+      const claimed = take(scoped(laneKey));
+      if (claimed === undefined) return;
+      apply.preview(claimed);
+      apply.store(claimed);
+    },
+    // An undo or redo rewrote files under the project's live gestures and pending saves, in any
+    // composition: each takes what the restored file holds, or stops trusting a value it cannot read.
+    restore({ paths = [], files }: LiveLaneRestore): void {
+      const inProject = `${project()}\n`;
+      for (const [key, source] of sources) {
+        if (key.startsWith(inProject) && paths.includes(source.path)) {
+          rebase(key, restoredValue(source, files));
+        }
+      }
+    },
+  };
+}
+
+function restoredValue({ path, target, attr }: LiveLaneSource, files: LiveLaneRestore["files"]) {
+  const html = files?.[path]?.restored;
+  return html === undefined || !target ? undefined : readTargetAttribute(html, target, attr);
+}
+
+/** A hook's live lanes, scoped to the project and composition open when each save starts. */
+export function useLiveLanes(
+  projectIdRef: { readonly current: string | null },
+  activeCompPath: string | null,
+) {
+  const compositionRef = useRef(activeCompPath);
+  compositionRef.current = activeCompPath;
+  const [lanes] = useState(() =>
+    createLiveLanes(
+      () => projectIdRef.current ?? "",
+      () => compositionRef.current ?? "",
+    ),
+  );
+  return lanes;
+}
+
+interface LiveLaneSave {
+  preview: (value: string | null) => void;
+  read: (value: string | null) => void;
+  settle: (saved?: string | null) => void;
+}
+interface LiveLaneApply {
+  preview: (value: string | null) => void;
+  store: (value: string | null) => void;
+}