@hyperframes/studio 0.8.79 → 0.8.81

package/src/player/components/TimelineAutomationLane.tsx

@@ -27,6 +27,7 @@ import {
   type HfAutomationLane,
   type HfAutomationPoint,
 } from "@hyperframes/core/audio-automation";
+import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
 import { envelopePath, fromUnit, laneFor, PAD_X, toUnit, withLane } from "./automationLaneGeometry";
 import { useAutomationLaneGestures } from "./useAutomationLaneGestures";
 import { AutomationValueInput } from "./AutomationValueInput";
@@ -180,9 +181,9 @@ export interface TimelineAutomationLaneProps {
   /** Clip-local seconds of the playhead, or null when it is outside the clip. */
   playheadSec: number | null;
   /** Continuous write while dragging; does not persist. */
-  onPreview(automation: HfAutomation): void;
+  onPreview(automation: HfAutomation, ended?: boolean): void;
   /** Gesture-end write; this is the one that persists and lands in undo. */
-  onCommit(automation: HfAutomation): void;
+  onCommit(automation: HfAutomation): Promise<TimelineEditOutcome | void> | void;
   /**
    * Clip-local times a dragged point snaps to — the beat grid, shifted into this
    * clip's frame. Its own neighbouring points are added on top.
@@ -241,14 +242,6 @@ export function TimelineAutomationLane({
     [draft, target, stored],
   );
 
-  // The draft is released when the automation it was drawn over actually
-  // changes — the persisted edit landing, or an edit from elsewhere. Releasing
-  // it merely because the drag ended would snap the point back to where it
-  // started for as long as the write takes to come around.
-  useEffect(() => {
-    if (draft && draft.basedOn !== automation) setDraft(null);
-  }, [automation, draft]);
-
   // A different parameter is a different envelope; the draft does not carry over.
   useEffect(() => {
     setDraft(null);
@@ -289,12 +282,16 @@ export function TimelineAutomationLane({
   );
 
   const commitPoints = useCallback(
-    (points: HfAutomationLane["points"], persist: boolean): void => {
+    (points: HfAutomationLane["points"], persist: boolean, ended?: boolean): void => {
       // Draw from the draft immediately; the write is what eventually agrees.
       setDraft({ points, basedOn: automation });
       const next = withLane(automation, { target, points });
-      if (persist) onCommit(next);
-      else onPreview(next);
+      if (!persist) return onPreview(next, ended);
+      void Promise.resolve(onCommit(next)).then((outcome) => {
+        if (outcome && outcome.status !== "saved") {
+          setDraft((current) => (current?.points === points ? null : current));
+        }
+      });
     },
     [automation, target, onCommit, onPreview],
   );
@@ -319,6 +316,7 @@ export function TimelineAutomationLane({
     duration,
     rangeSelection,
   });
+
   const {
     dragIndex,
     curveIndex,
@@ -329,6 +327,13 @@ export function TimelineAutomationLane({
     hint,
     editing,
   } = gestures;
+  // Released when the automation it was drawn over changes, not on drag end (the point would
+  // snap back until the write lands) and not under a live gesture (its release would commit
+  // an older save's points).
+  const gestureLive = [dragIndex, curveIndex, segmentDragIndex, edgeDrag].some((g) => g !== null);
+  useEffect(() => {
+    if (draft && draft.basedOn !== automation && !gestureLive) setDraft(null);
+  }, [automation, draft, gestureLive]);
 
   const removeAt = useCallback(
     (index: number): void => {

package/src/player/components/TimelineAutomationLaneSlot.test.tsx

@@ -32,7 +32,6 @@ function mountSlot(binding: Partial<AutomationLaneBinding>) {
       onCommit: vi.fn(),
       onSelect: vi.fn(),
       readOnly: false,
-      commitTargetKey: "bgm",
       selection: null,
       onRangeSelect: vi.fn(),
       onRangeClear,
@@ -96,7 +95,6 @@ const readingBind = (element: TimelineElement, isSelected: boolean): AutomationL
   onCommit: vi.fn(),
   onSelect: vi.fn(),
   readOnly: !isSelected,
-  commitTargetKey: null,
   selection: null,
   onRangeSelect: vi.fn(),
   onRangeClear: vi.fn(),

package/src/player/components/TimelineClipFades.test.tsx

@@ -33,6 +33,7 @@ function render(
   const root = createRoot(host);
   const onSetElementAttributeLive = vi.fn();
   const onSetElementAttributeQuiet = vi.fn().mockResolvedValue(undefined);
+  const onRevertElementAttributeLive = vi.fn();
   // Stands in for the TimelineClip button the handles live inside.
   const node = (
     <div data-testid="clip" onPointerDown={options.onClipPointerDown}>
@@ -49,13 +50,25 @@ function render(
       options.provide === false ? (
         node
       ) : (
-        <TimelineEditProvider value={{ onSetElementAttributeLive, onSetElementAttributeQuiet }}>
+        <TimelineEditProvider
+          value={{
+            onSetElementAttributeLive,
+            onSetElementAttributeQuiet,
+            onRevertElementAttributeLive,
+          }}
+        >
           {node}
         </TimelineEditProvider>
       ),
     );
   });
-  return { host, root, onSetElementAttributeLive, onSetElementAttributeQuiet };
+  return {
+    host,
+    root,
+    onSetElementAttributeLive,
+    onSetElementAttributeQuiet,
+    onRevertElementAttributeLive,
+  };
 }
 
 function pointer(type: string, clientX: number, pointerId = 1) {
@@ -146,14 +159,22 @@ describe("TimelineClipFades", () => {
   });
 
   it("puts the live value back and writes nothing when the gesture is cancelled", () => {
-    const { host, root, onSetElementAttributeLive, onSetElementAttributeQuiet } = render(clip);
+    const {
+      host,
+      root,
+      onSetElementAttributeLive,
+      onRevertElementAttributeLive,
+      onSetElementAttributeQuiet,
+    } = render(clip);
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
     if (!handle) throw new Error("expected a fade-in handle");
     armCapture(handle);
     act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
     act(() => handle.dispatchEvent(pointer("pointermove", 300)));
     act(() => handle.dispatchEvent(pointer("pointercancel", 300)));
+    // Written back live for a host without the revert, then ended through the lanes' revert.
     expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-in", "1");
+    expect(onRevertElementAttributeLive).toHaveBeenCalledWith(clip, "data-fade-in");
     expect(onSetElementAttributeQuiet).not.toHaveBeenCalled();
     act(() => root.unmount());
   });

package/src/player/components/TimelineClipFades.tsx

@@ -32,7 +32,7 @@ interface TimelineClipFadesProps {
 
 /** Corner dots that drag `data-fade-in` / `data-fade-out`; the wedge is the faded region. */
 export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineClipFadesProps) {
-  const { onSetElementAttributeLive, onSetElementAttributeQuiet } =
+  const { onSetElementAttributeLive, onSetElementAttributeQuiet, onRevertElementAttributeLive } =
     useTimelineEditContextOptional();
   const canEdit = Boolean(onSetElementAttributeLive && onSetElementAttributeQuiet);
 
@@ -126,7 +126,10 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
 
   /** Puts the live document back where the file has it and drops the draft. */
   const revertGesture = (g: Gesture) => {
-    if (g.moved) onSetElementAttributeLive?.(el, attrFor(g.edge), attrText(g.originSeconds));
+    if (g.moved) {
+      onSetElementAttributeLive?.(el, attrFor(g.edge), attrText(g.originSeconds));
+      onRevertElementAttributeLive?.(el, attrFor(g.edge));
+    }
     setDraft(null);
   };
 

package/src/player/components/TimelineFxButton.tsx

@@ -157,7 +157,7 @@ interface TimelineFxButtonChainProps {
   onOpenRack: () => void;
   fxChainRaw: string | undefined;
   onChainChange: (next: HfAudioFxChain) => void;
-  onChainPreview?: (next: HfAudioFxChain) => void;
+  onChainPreview?: (next: HfAudioFxChain, ended?: boolean) => void;
   /** The clips this chain is heard through, so an audition starts where they
    *  actually sound rather than from a playhead parked before the first. */
   auditionSpans?: readonly AuditionSpan[];

package/src/player/components/TimelineGroupHeader.tsx

@@ -18,7 +18,7 @@ interface TimelineGroupHeaderProps {
   /** C1: the group's serialized `data-fx-chain`, when set. */
   fxChain?: string;
   onFxChainChange: (next: HfAudioFxChain) => void;
-  onFxChainPreview?: (next: HfAudioFxChain) => void;
+  onFxChainPreview?: (next: HfAudioFxChain, ended?: boolean) => void;
   /** Member clips, so hovering a preset auditions where the group sounds. */
   auditionSpans?: readonly AuditionSpan[];
   onOpenFxRack: () => void;

package/src/player/components/TimelineGroupRow.test.tsx

@@ -84,7 +84,6 @@ function renderRow(
                   onCommit: vi.fn(),
                   onSelect: vi.fn(),
                   readOnly: true,
-                  commitTargetKey: null,
                   selection: null,
                   onRangeSelect: vi.fn(),
                   onRangeClear: vi.fn(),

package/src/player/components/TimelineGroupRow.tsx

@@ -80,9 +80,8 @@ export function TimelineGroupRow({
   // The group wearing a clip's shape so the lane machinery can render it — see
   // `groupAutomationElement` for why that beats a second, parallel lane path.
   const groupElement = groupAutomationElement(group, compositionDuration);
-  // The binder writes through the dom-edit selection, so a group lane is
-  // editable exactly when the group is the selected element — which clicking
-  // its name in the header does.
+  // A group lane is editable exactly when the group is the selected element,
+  // which clicking its name in the header does.
   const domSelection = useDomEditSelectionContextOptional()?.domEditSelection ?? null;
   const isGroupSelected = domSelection?.id === group.id;
   const isLaneOpen = expandedLaneOwnerIds.has(group.id);
@@ -90,14 +89,21 @@ export function TimelineGroupRow({
   // provider in read-only hosts (Timeline.test.ts asserts it), and the throwing
   // hook took the whole timeline down with it the moment a group existed —
   // not just this row.
-  const { onSetAudioGroupAttributeLive, onSetAudioGroupAttributeQuiet } =
-    useTimelineEditContextOptional();
+  const {
+    onSetAudioGroupAttributeLive,
+    onSetAudioGroupAttributeQuiet,
+    onRevertAudioGroupAttributeLive,
+  } = useTimelineEditContextOptional();
   const domEditActions = useDomEditActionsContextOptional();
   const revealAudioFx = usePlayerStore((state) => state.setRevealedAudioFxTarget);
-  const writeGroupFxChain = (next: HfAudioFxChain, live: boolean) => {
+  const writeGroupFxChain = (next: HfAudioFxChain, live: boolean, ended = false) => {
     const value = next.nodes.length ? serializeAudioFxChain(next) : null;
-    if (live) onSetAudioGroupAttributeLive?.(group.id, HF_AUDIO_FX_ATTR, value);
-    else void onSetAudioGroupAttributeQuiet?.(group.id, HF_AUDIO_FX_ATTR, value, "Apply preset");
+    if (!live) {
+      void onSetAudioGroupAttributeQuiet?.(group.id, HF_AUDIO_FX_ATTR, value, "Apply preset");
+      return;
+    }
+    onSetAudioGroupAttributeLive?.(group.id, HF_AUDIO_FX_ATTR, value);
+    if (ended) onRevertAudioGroupAttributeLive?.(group.id, HF_AUDIO_FX_ATTR);
   };
   const openGroupFxRack = (automationTarget?: string) => {
     // Use the guarded timeline-selection path even though the bus is synthetic:
@@ -157,7 +163,7 @@ export function TimelineGroupRow({
           onToggleLanes={() => toggleLaneOwnerExpanded(group.id)}
           fxChain={group.fxChain}
           onFxChainChange={(next) => writeGroupFxChain(next, false)}
-          onFxChainPreview={(next) => writeGroupFxChain(next, true)}
+          onFxChainPreview={(next, ended) => writeGroupFxChain(next, true, ended)}
           auditionSpans={memberElements}
           onOpenFxRack={() => openGroupFxRack()}
           // Same width as every other row's header. The group row needs a real
@@ -169,8 +175,8 @@ export function TimelineGroupRow({
           theme={theme}
         />
         {/* The group's OWN curves, under the strip. Selected-gated exactly like a
-          clip's: the binder writes through the dom-edit selection, so a lane is
-          editable once the group is selected — which clicking its name does. */}
+          clip's: a lane is editable once the group is selected, which clicking
+          its name does. */}
         {/* The label column for those lanes, on the accent rail — inside the
             sticky column above, so they pin with the header. */}
         {isLaneOpen && (

package/src/player/components/TimelineTrackHeader.tsx

@@ -214,8 +214,12 @@ export function TimelineTrackHeader({
   // track holding several ungrouped ones has no single chain — the design
   // doc refuses to build "N clips = N chains", so that case gets a pointer
   // at grouping (B6's normative rule) instead of a popover.
-  const { onGroupClips, onSetElementAttributeLive, onSetElementAttributeQuiet } =
-    useTimelineEditContextOptional();
+  const {
+    onGroupClips,
+    onSetElementAttributeLive,
+    onSetElementAttributeQuiet,
+    onRevertElementAttributeLive,
+  } = useTimelineEditContextOptional();
   const domEditActions = useDomEditActionsContextOptional();
   const singleAudioClip =
     isAudioTrack && clipCount === 1 && trackElements.length > 0 ? trackElements[0] : null;
@@ -225,10 +229,19 @@ export function TimelineTrackHeader({
   // needs to be TOLD that, so it earns the button and a refusal.
   const isVideoWithAudioTrack =
     !isAudioTrack && trackElements.some((el) => el.tag.toLowerCase() === "video");
-  const writeClipFxChain = (clip: TimelineElement, next: HfAudioFxChain, live: boolean) => {
+  const writeClipFxChain = (
+    clip: TimelineElement,
+    next: HfAudioFxChain,
+    live: boolean,
+    ended = false,
+  ) => {
     const value = next.nodes.length ? serializeAudioFxChain(next) : null;
-    if (live) onSetElementAttributeLive?.(clip, HF_AUDIO_FX_ATTR, value);
-    else void onSetElementAttributeQuiet?.(clip, HF_AUDIO_FX_ATTR, value, "Apply preset");
+    if (!live) {
+      void onSetElementAttributeQuiet?.(clip, HF_AUDIO_FX_ATTR, value, "Apply preset");
+      return;
+    }
+    onSetElementAttributeLive?.(clip, HF_AUDIO_FX_ATTR, value);
+    if (ended) onRevertElementAttributeLive?.(clip, HF_AUDIO_FX_ATTR);
   };
   const openClipFxRack = (clip: TimelineElement) => {
     void domEditActions?.handleTimelineElementSelect(clip);
@@ -309,7 +322,9 @@ export function TimelineTrackHeader({
                       fxChainRaw={singleAudioClip.fxChain}
                       trackKind={classifyAudioName(singleAudioClip.id, singleAudioClip.src)}
                       onChainChange={(next) => writeClipFxChain(singleAudioClip, next, false)}
-                      onChainPreview={(next) => writeClipFxChain(singleAudioClip, next, true)}
+                      onChainPreview={(next, ended) =>
+                        writeClipFxChain(singleAudioClip, next, true, ended)
+                      }
                       // Muted, an audition is silent — so the hover lifts the mute on
                       // the running graph and puts it back on the way out, the same
                       // borrow-and-return it already does with the playhead.

package/src/player/components/groupAutomationElement.ts

@@ -16,12 +16,18 @@
 import type { TimelineElement } from "../store/playerStore";
 import type { TimelineTrackGroupInfo } from "./useTimelineTrackDerivations";
 
+const groupElements = new WeakSet<TimelineElement>();
+
+export function isGroupAutomationElement(element: TimelineElement): boolean {
+  return groupElements.has(element);
+}
+
 /** The synthetic element's track number — the group row's own anchor. */
 export function groupAutomationElement(
   group: Pick<TimelineTrackGroupInfo, "id" | "label" | "automation" | "fxChain" | "anchorKey">,
   compositionDuration: number,
 ): TimelineElement {
-  return {
+  const element: TimelineElement = {
     id: group.id,
     // The DOM id, so a write lands on the `<hf-audio-group>` and not on a clip.
     domId: group.id,
@@ -34,4 +40,6 @@ export function groupAutomationElement(
     ...(group.automation ? { automation: group.automation } : {}),
     ...(group.fxChain ? { fxChain: group.fxChain } : {}),
   };
+  groupElements.add(element);
+  return element;
 }

package/src/player/components/timelineCallbacks.ts

@@ -84,6 +84,7 @@ export interface TimelineEditCallbacks {
   ) => Promise<void> | void;
   /** B7's bus strip: live-write the group's own attribute while dragging. */
   onSetAudioGroupAttributeLive?: (groupId: string, attr: string, value: string | null) => void;
+  onRevertAudioGroupAttributeLive?: (groupId: string, attr: string) => void;
   /** ...and persist one undo entry on release. */
   onSetAudioGroupAttributeQuiet?: (
     groupId: string,
@@ -106,6 +107,7 @@ export interface TimelineEditCallbacks {
     attr: string,
     value: string | null,
   ) => void;
+  onRevertElementAttributeLive?: (element: TimelineElement, attr: string) => void;
   onSetElementAttributeQuiet?: (
     element: TimelineElement,
     attr: string,

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

@@ -291,6 +291,47 @@ describe("computeResizePreview — composition source continuity", () => {
       previewPlaybackStart: 2,
     });
   });
+
+  it("does not let a tail snap shrink a clip below the drag's minimum duration", () => {
+    const result = computeResizePreview(
+      {
+        element: clip("vo", 0, 2, 1, 0),
+        edge: "end",
+        originClientX: 0,
+        previewStart: 2,
+        previewDuration: 1,
+        started: true,
+      },
+      -95,
+      { scroll: fakeScroll(), pps: 100, buildSnapTargets: () => [{ time: 2.07, type: "beat" }] },
+    );
+
+    expect(result).toMatchObject({ previewDuration: 0.1, snapTime: null });
+  });
+
+  it("keeps a slowed clip's media clock when its head snaps to a beat", () => {
+    const element = { ...clip("vo", 0, 2, 4, 0), playbackStart: 3, playbackRate: 0.8 };
+    const result = computeResizePreview(
+      {
+        element,
+        edge: "start",
+        originClientX: 0,
+        previewStart: 2,
+        previewDuration: 4,
+        started: true,
+      },
+      30,
+      {
+        scroll: fakeScroll(),
+        pps: 100,
+        buildSnapTargets: () => [{ time: 2.3456, type: "beat" }],
+      },
+    );
+
+    expect(result.snapTime).toBe(2.3456);
+    const clock = result.previewStart - result.previewPlaybackStart! / 0.8;
+    expect(clock).toBeCloseTo(2 - 3 / 0.8, 9);
+  });
 });
 
 describe("getTimelineDragOverlayPosition", () => {

package/src/player/components/timelineClipDragPreview.ts

@@ -1,4 +1,9 @@
 import { resolveTimelineMove, resolveTimelineResize } from "./timelineEditing";
+import {
+  applyClipStartTrimDelta,
+  clipStartTrimDeltaBounds,
+  resolveTimelineMinDuration,
+} from "./timelineGroupEditing";
 import type { TimelineElement } from "../store/playerStore";
 import {
   getTimelineInsertBoundaryBand,
@@ -275,7 +280,6 @@ export function computeResizePreview(
   const normalizedTag = resize.element.tag.toLowerCase();
   const canSeedPlaybackStart =
     resize.element.kind === "composition" || normalizedTag === "audio" || normalizedTag === "video";
-  const playbackRate = Math.max(resize.element.playbackRate ?? 1, 0.1);
   // Trim limit = available source media only — NOT the composition length.
   // Duration is content-driven (the comp grows/shrinks to fit on commit), so
   // capping a trim at the current comp end both blocked extending the last clip
@@ -319,35 +323,22 @@ export function computeResizePreview(
       // Stay within [start+minDuration, maxEnd] so the snap can't create a
       // degenerate clip or run past the source/composition limit.
       const snappedDuration = Math.round((snapped - nextResize.start) * 1000) / 1000;
-      if (target && snapped <= maxEnd + 1e-6 && snappedDuration >= 0.05) {
+      if (
+        target &&
+        snapped <= maxEnd + 1e-6 &&
+        snappedDuration >= resolveTimelineMinDuration() - 1e-6
+      ) {
         // An edge already on the target still owns the guide; only move it when off.
         if (snapped !== edgeTime) nextResize = { ...nextResize, duration: snappedDuration };
         snap = target;
       }
     } else {
       const { time: snapped, target } = snapTimelineTime(nextResize.start, trimTargets, snapSecs);
-      const delta = nextResize.start - snapped; // >0 when snapping left
-      // Leftward snap reveals more source; cap so playbackStart can't go < 0.
-      const maxLeftDelta =
-        nextResize.playbackStart != null
-          ? nextResize.playbackStart / playbackRate
-          : Number.POSITIVE_INFINITY;
-      // Also require the resulting duration to stay >= minDuration so a rightward
-      // snap (delta < 0) can't collapse the clip to zero/negative.
-      const snappedDuration = Math.round((nextResize.duration + delta) * 1000) / 1000;
-      if (target && snapped >= 0 && delta <= maxLeftDelta + 1e-6 && snappedDuration >= 0.05) {
-        if (snapped !== nextResize.start) {
-          nextResize = {
-            ...nextResize,
-            start: snapped,
-            duration: snappedDuration,
-            playbackStart:
-              nextResize.playbackStart != null
-                ? Math.round(Math.max(0, nextResize.playbackStart - delta * playbackRate) * 1000) /
-                  1000
-                : undefined,
-          };
-        }
+      const clip = { ...nextResize, playbackRate: resize.element.playbackRate };
+      const delta = snapped - nextResize.start;
+      const bounds = clipStartTrimDeltaBounds(clip, 0, resolveTimelineMinDuration());
+      if (target && delta >= bounds.minDelta - 1e-6 && delta <= bounds.maxDelta + 1e-6) {
+        if (snapped !== nextResize.start) nextResize = applyClipStartTrimDelta(clip, delta);
         snap = target;
       }
     }

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

@@ -5,6 +5,8 @@ import {
   buildTimelineElementAgentPrompt,
   buildTimelineAgentPrompt,
   clampTimelineGroupResizeDelta,
+  formatTimelineAttributeNumber,
+  formatTimelineMediaOffset,
   getTimelineEditCapabilities,
   hasPatchableTimelineTarget,
   resolveBlockedTimelineEditIntent,
@@ -366,6 +368,15 @@ describe("resolveTimelineGroupResize", () => {
       ],
     });
   });
+
+  it("derives a slowed member's playback start from its rounded start", () => {
+    const [member] = resolveTimelineGroupResize(
+      [{ start: 2, duration: 3, playbackStart: 1, playbackRate: 0.8 }],
+      "start",
+      0.373,
+    ).members;
+    expect(member!.start - member!.playbackStart! / 0.8).toBeCloseTo(2 - 1 / 0.8, 9);
+  });
 });
 
 describe("hasPatchableTimelineTarget", () => {
@@ -795,7 +806,7 @@ describe("resolveTimelineResize", () => {
         "start",
         0,
       ),
-    ).toEqual({ start: 0.8, duration: 3.2, playbackStart: 0 });
+    ).toEqual({ start: 0.8, duration: 3.2, playbackStart: expect.closeTo(0, 9) });
   });
 
   it("trims generic element start without media offset", () => {
@@ -831,6 +842,93 @@ describe("resolveTimelineResize", () => {
       ),
     ).toEqual({ start: 0, duration: 4, playbackStart: undefined });
   });
+
+  it("rounds a fully-left head trim inward so the in-point is never clamped off the media clock", () => {
+    const next = resolveTimelineResize(
+      {
+        start: 2,
+        duration: 3,
+        originClientX: 0,
+        pixelsPerSecond: 100,
+        minStart: 0,
+        maxEnd: 10,
+        playbackStart: 1,
+        playbackRate: 1.5,
+      },
+      "start",
+      -1000,
+    );
+    expect(next.start).toBe(1.34);
+    expect(next.start - next.playbackStart! / 1.5).toBeCloseTo(2 - 1 / 1.5, 9);
+  });
+
+  it("lets a fully-left head trim reach a reloaded in-point's media start at a 5-decimal speed", () => {
+    const next = resolveTimelineResize(
+      {
+        start: 2.37,
+        duration: 2.63,
+        originClientX: 0,
+        pixelsPerSecond: 100,
+        minStart: 0,
+        maxEnd: 10,
+        playbackStart: Number(formatTimelineMediaOffset(0.37 * 0.33333)),
+        playbackRate: 0.33333,
+      },
+      "start",
+      -1000,
+    );
+    expect(next.start).toBe(2);
+  });
+
+  it("moves every group member by the same amount when one reaches its media start", () => {
+    const members = [
+      { start: 2, duration: 3, playbackStart: 1, playbackRate: 1.5 },
+      { start: 5, duration: 3, playbackStart: 4, playbackRate: 1 },
+    ];
+    const result = resolveTimelineGroupResize(members, "start", -10);
+    for (const [i, member] of members.entries()) {
+      const next = result.members[i]!;
+      expect(next.start - member.start).toBeCloseTo(result.delta, 9);
+      expect(next.start - next.playbackStart! / member.playbackRate).toBeCloseTo(
+        member.start - member.playbackStart / member.playbackRate,
+        9,
+      );
+    }
+  });
+
+  it("keeps a clip's media clock and end fixed across repeated head trims at any speed", () => {
+    const dragsPx = [37.3, -12.9, 81.7, -5.3];
+    for (const playbackRate of [0.25, 0.5, 0.8, 1, 1.25, 2]) {
+      let clip = { start: 2, duration: 6, playbackStart: 3 };
+      const clock = clip.start - clip.playbackStart / playbackRate;
+      const end = clip.start + clip.duration;
+      for (const clientX of dragsPx) {
+        const next = resolveTimelineResize(
+          {
+            ...clip,
+            originClientX: 0,
+            pixelsPerSecond: 100,
+            minStart: 0,
+            maxEnd: 20,
+            playbackRate,
+          },
+          "start",
+          clientX,
+        );
+        // Round-trip through the saved attributes, as a reload would.
+        const savedInPoint = formatTimelineMediaOffset(next.playbackStart!);
+        if (playbackRate === 1)
+          expect(savedInPoint).toBe(formatTimelineAttributeNumber(next.playbackStart!));
+        clip = {
+          start: Number(formatTimelineAttributeNumber(next.start)),
+          duration: Number(formatTimelineAttributeNumber(next.duration)),
+          playbackStart: Number(savedInPoint),
+        };
+        expect(clip.start - clip.playbackStart / playbackRate).toBeCloseTo(clock, 9);
+        expect(clip.start + clip.duration).toBeCloseTo(end, 9);
+      }
+    }
+  });
 });
 
 describe("buildPromptCopyText", () => {

package/src/player/components/timelineEditing.ts

@@ -236,14 +236,7 @@ export function resolveTimelineResize(
 
   const { minDelta, maxDelta } = clipStartTrimDeltaBounds(input, input.minStart, minDuration);
   const clampedDelta = clamp(deltaTime, minDelta, maxDelta);
-  const trimmed = applyClipStartTrimDelta(input, clampedDelta);
-
-  return {
-    start: roundToCentiseconds(trimmed.start),
-    duration: roundToCentiseconds(trimmed.duration),
-    playbackStart:
-      trimmed.playbackStart != null ? roundToCentiseconds(trimmed.playbackStart) : undefined,
-  };
+  return applyClipStartTrimDelta(input, clampedDelta);
 }
 
 export interface TimelinePromptElement {
@@ -476,6 +469,10 @@ export function formatTimelineAttributeNumber(value: number): string {
   return Number(roundToCentiseconds(value).toFixed(2)).toString();
 }
 
+export function formatTimelineMediaOffset(value: number): string {
+  return Number(value.toFixed(6)).toString();
+}
+
 /**
  * Apply one edge auto-scroll step: scroll `scroll` toward the edge zone the
  * pointer is in, clamped to the scrollable range. Returns true when the

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

@@ -1,6 +1,7 @@
 import { describe, expect, it } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import {
+  applyTimelineGroupResizePreview,
   buildTimelineGroupResizeMembers,
   resolveTimelineGroupResize,
   resolveTimelineGroupResizeChanges,
@@ -132,3 +133,29 @@ describe("resolveTimelineGroupResizeChanges (rigid group patch set)", () => {
     ).toEqual(raw.members);
   });
 });
+
+describe("applyTimelineGroupResizePreview", () => {
+  it("keeps each slowed member's media clock through the group preview", () => {
+    const a = el("a", { start: 2, duration: 3, playbackStart: 1, playbackRate: 0.8 });
+    const b = el("b", { start: 6, duration: 3, playbackStart: 2, playbackRate: 1.25 });
+    const members = buildTimelineGroupResizeMembers([a, b], keys("a", "b"), "a", "start")!;
+    const session = {
+      grabbedKey: "a",
+      edge: "start" as const,
+      members,
+      changes: [],
+      hasChanged: false,
+    };
+
+    applyTimelineGroupResizePreview(session, { previewStart: 2.373, previewDuration: 2.627 });
+
+    for (const [i, member] of [a, b].entries()) {
+      const change = session.changes[i]!;
+      const rate = member.playbackRate!;
+      expect(change.start - change.playbackStart! / rate).toBeCloseTo(
+        member.start - member.playbackStart! / rate,
+        9,
+      );
+    }
+  });
+});