@hyperframes/studio 0.8.74 → 0.8.76

package/src/components/nle/PreviewPoster.tsx

@@ -0,0 +1,99 @@
+import { useCallback, useRef, useState } from "react";
+import { buildProjectApiPath } from "../../utils/projectRouting";
+import type { PreviewCompositionSize } from "../../utils/previewCompositionSize";
+
+/** Frame 0 as the thumbnail route last rendered it; `cachedOnly` never starts a render. */
+function previewPosterUrl(projectId: string, cachedOnly: boolean): string {
+  const query = `t=0&output=source${cachedOnly ? "&cached=1" : ""}`;
+  return buildProjectApiPath(projectId, `/thumbnail/index.html?${query}`);
+}
+
+const PREVIEW_POSTER_STYLE: React.CSSProperties = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "contain",
+  zIndex: 2,
+  pointerEvents: "none",
+};
+
+/** Covers the live preview with the cached frame 0; reports its size so the stage fits it. */
+export function PreviewPoster({
+  projectId,
+  hidden,
+  onSize,
+  onLoaded,
+  onMissing,
+}: {
+  projectId: string;
+  hidden: boolean;
+  onSize: (size: PreviewCompositionSize) => void;
+  onLoaded: () => void;
+  onMissing: () => void;
+}) {
+  return (
+    <img
+      src={previewPosterUrl(projectId, true)}
+      alt=""
+      aria-hidden
+      data-testid="preview-poster"
+      hidden={hidden}
+      style={PREVIEW_POSTER_STYLE}
+      onLoad={(event) => {
+        const { naturalWidth: width, naturalHeight: height } = event.currentTarget;
+        if (!hidden && width > 0 && height > 0) onSize({ width, height });
+        onLoaded();
+      }}
+      onError={onMissing}
+    />
+  );
+}
+
+/** The poster covers the live slot until its first frame is ready; a missing poster is rendered
+ * after both are known, in either order, off the open path, for the next open. */
+export function usePreviewPoster(
+  projectId: string,
+  activeKey: string,
+  directUrl: string | undefined,
+) {
+  const visit = useVisitNumber(activeKey);
+  const [coverDoneFor, setCoverDoneFor] = useState<number | null>(null);
+  const [posterSettledFor, setPosterSettledFor] = useState<number | null>(null);
+  const missingForRef = useRef<number | null>(null);
+  const liveReadyForRef = useRef<number | null>(null);
+  const renderMissingPoster = useCallback(() => {
+    if (missingForRef.current !== visit || liveReadyForRef.current !== visit) return;
+    missingForRef.current = null;
+    void fetch(previewPosterUrl(projectId, false)).catch(() => {});
+  }, [visit, projectId]);
+  const onLiveReadyToShowChange = useCallback(
+    (ready: boolean) => {
+      if (!ready) return;
+      setCoverDoneFor(visit);
+      liveReadyForRef.current = visit;
+      renderMissingPoster();
+    },
+    [visit, renderMissingPoster],
+  );
+  return {
+    mountPoster: !directUrl && (coverDoneFor !== visit || posterSettledFor !== visit),
+    hidePoster: coverDoneFor === visit,
+    onLiveReadyToShowChange,
+    onPreviewError: () => setCoverDoneFor(visit),
+    onPosterLoaded: () => setPosterSettledFor(visit),
+    onPosterMissing: () => {
+      setCoverDoneFor(visit);
+      setPosterSettledFor(visit);
+      missingForRef.current = visit;
+      renderMissingPoster();
+    },
+  };
+}
+
+function useVisitNumber(key: string): number {
+  const [seen, setSeen] = useState({ key, visit: 0 });
+  if (seen.key === key) return seen.visit;
+  setSeen({ key, visit: seen.visit + 1 });
+  return seen.visit + 1;
+}

package/src/components/nle/useCanvasZOrderTimelineMirror.test.tsx

@@ -12,12 +12,6 @@ import {
 } from "./useCanvasZOrderTimelineMirror";
 import { makeLifecycleOpsParams } from "../../hooks/elementLifecycleOpsTestUtils";
 import { mountReactHarness } from "../../hooks/domSelectionTestHarness";
-import {
-  buildEditHistoryEntry,
-  createEmptyEditHistory,
-  pushEditHistoryEntry,
-  type EditHistoryState,
-} from "../../utils/editHistory";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -61,45 +55,38 @@ interface HarnessApi {
   mirror: (input: MirrorZOrderInput) => Promise<boolean>;
 }
 
+interface RecordedWrite {
+  label: string;
+  coalesceKey: string;
+  after: string;
+}
+
 /**
  * Mount the REAL wiring pair PreviewOverlays composes — handleDomZIndexReorderCommit
- * (z persist) + useCanvasZOrderTimelineMirror (lane mirror) — over a shared,
- * real editHistory reducer so the undo-fold assertion exercises the actual
- * pushEditHistoryEntry coalescing:
+ * (z persist) + useCanvasZOrderTimelineMirror (lane mirror). The server (not this
+ * test) owns folding two records that share a coalesceKey into one undo entry
+ * (projectHistory.ts, "claim: a writer that records after writing"), so this harness
+ * only captures what Studio sends on each write:
  *
  * - the z sink mimics commitDomEditPatchBatches' recordEdit call verbatim
- *   (kind "manual", options.coalesceKey — see useDomEditCommits.ts), and
+ *   (options.coalesceKey — see useDomEditCommits.ts), and
  * - the move sink mimics persistTimelineBatchEdit → saveProjectFilesWithHistory
- *   (kind "timeline", the coalesceKey forwarded through onMoveElements — see
- *   timelineEditingHelpers.ts / studioFileHistory.ts),
- *
- * with a deterministic clock inside the reducer's 300ms coalesce window.
+ *   (the coalesceKey forwarded through onMoveElements — see
+ *   timelineEditingHelpers.ts / studioFileHistory.ts).
  */
 function mountMirrorHarness(history: {
-  state: EditHistoryState;
-  now: () => number;
   fileContent: { current: string };
   moveCoalesceKeys: string[];
+  records: RecordedWrite[];
 }) {
   const record = (
     label: string,
-    kind: "manual" | "timeline",
     coalesceKey: string,
-    coalesceMs: number | undefined,
+    _coalesceMs: number | undefined,
     after: string,
   ) => {
-    const entry = buildEditHistoryEntry({
-      id: `e-${history.now()}`,
-      projectId: "p",
-      label,
-      kind,
-      coalesceKey,
-      coalesceMs,
-      now: history.now(),
-      files: { "index.html": { before: history.fileContent.current, after } },
-    });
+    history.records.push({ label, coalesceKey, after });
     history.fileContent.current = after;
-    history.state = pushEditHistoryEntry(history.state, entry);
   };
 
   const onMoveElements: TimelineEditCallbacks["onMoveElements"] = (
@@ -109,7 +96,7 @@ function mountMirrorHarness(history: {
     coalesceMs,
   ) => {
     history.moveCoalesceKeys.push(coalesceKey ?? "<none>");
-    record("Move timeline clips", "timeline", coalesceKey ?? "<none>", coalesceMs, "C-move");
+    record("Move timeline clips", coalesceKey ?? "<none>", coalesceMs, "C-move");
   };
 
   const api: Partial<HarnessApi> = {};
@@ -117,7 +104,7 @@ function mountMirrorHarness(history: {
     const { handleDomZIndexReorderCommit } = useElementLifecycleOps(
       makeLifecycleOpsParams({
         commitDomEditPatchBatches: async (_batches, options) => {
-          record(options.label, "manual", options.coalesceKey, options.coalesceMs, "B-z");
+          record(options.label, options.coalesceKey, options.coalesceMs, "B-z");
           return { durable: true, allMatched: true, changed: true };
         },
       }),
@@ -135,17 +122,10 @@ function mountMirrorHarness(history: {
 }
 
 function makeHistory() {
-  let tick = 1000;
   return {
-    state: createEmptyEditHistory(),
-    // Deterministic clock: consecutive records land 400ms apart — PAST the
-    // reducer's default 300ms coalesce window, as in the live flow where the
-    // mirror is dispatched only after the z persist's server round-trip
-    // resolves (real network latency exceeds 300ms). The fold must therefore
-    // ride the gesture's explicit coalesceMs window, not the default.
-    now: () => (tick += 400),
     fileContent: { current: "A-original" },
     moveCoalesceKeys: [] as string[],
+    records: [] as RecordedWrite[],
   };
 }
 
@@ -208,13 +188,12 @@ describe("useCanvasZOrderTimelineMirror", () => {
 
     // The move persist received the EXACT z coalesce key…
     expect(history.moveCoalesceKeys).toEqual([coalesceKey]);
-    // …and the real reducer folded the two records into one undo entry spanning
-    // pre-z "before" → post-move "after". One Cmd+Z reverts both writes.
-    expect(history.state.undo).toHaveLength(1);
-    expect(history.state.undo[0].files["index.html"]).toMatchObject({
-      before: "A-original",
-      after: "C-move",
-    });
+    // …and both writes carry that SAME non-empty coalesceKey: that is what lets
+    // the server (projectHistory.ts) fold them into one undo entry. One Cmd+Z
+    // then reverts both writes.
+    expect(history.records.map((r) => r.coalesceKey)).toEqual([coalesceKey, coalesceKey]);
+    expect(history.records[0]?.after).toBe("B-z");
+    expect(history.records[1]?.after).toBe("C-move");
     // Timeline UI reflects the lane change without a reload: optimistic store update.
     const t = usePlayerStore.getState().elements.find((e) => e.key === "index.html#t");
     expect(t?.track).toBe(0);
@@ -265,8 +244,10 @@ describe("useCanvasZOrderTimelineMirror", () => {
     }
 
     expect(keys[0]).not.toBe(keys[1]); // fresh key per gesture
-    // Each gesture folded its own z+move pair, but the two gestures stayed apart.
-    expect(history.state.undo).toHaveLength(2);
+    // Each gesture's z+move pair shares that gesture's own key, so the server folds
+    // each pair on its own — but the two gestures never share a key, so they stay apart.
+    expect(history.records).toHaveLength(4);
+    expect(history.records.map((r) => r.coalesceKey)).toEqual([keys[0], keys[0], keys[1], keys[1]]);
     expect(history.moveCoalesceKeys).toEqual(keys);
   });
 
@@ -299,7 +280,7 @@ describe("useCanvasZOrderTimelineMirror", () => {
     });
 
     expect(history.moveCoalesceKeys).toEqual([]); // no lane persist dispatched
-    expect(history.state.undo).toHaveLength(1); // just the z entry
+    expect(history.records).toHaveLength(1); // just the z write
     const t = usePlayerStore.getState().elements.find((e) => e.key === "index.html#t");
     expect(t?.track).toBe(1); // lane unchanged
   });

package/src/components/panels/VariablesPanel.tsx

@@ -5,7 +5,6 @@ import type {
   VariableUsageReport,
   VariableValidationIssue,
 } from "@hyperframes/sdk";
-import type { EditHistoryKind } from "../../utils/editHistory";
 import type { PublishSdkSession } from "../../utils/sdkCutover";
 import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
 import { useDomEditContext } from "../../contexts/DomEditContext";
@@ -37,7 +36,6 @@ export interface StudioEditPersistenceProps {
   reloadPreview: () => void;
   recordEdit: (entry: {
     label: string;
-    kind: EditHistoryKind;
     files: Record<string, { before: string; after: string }>;
   }) => Promise<void>;
 }

package/src/components/sidebar/CompositionsTab.drag.test.tsx

@@ -2,7 +2,7 @@
 
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
 import { CompositionsTab } from "./CompositionsTab";
@@ -14,6 +14,10 @@ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
 
 let root: Root | null = null;
 
+beforeEach(() => {
+  usePlayerStore.setState({ previewBooted: true });
+});
+
 afterEach(() => {
   if (root) act(() => root?.unmount());
   root = null;

package/src/components/sidebar/CompositionsTab.rootBadge.test.tsx

@@ -39,6 +39,20 @@ function mount(compositions: string[], masterCompositionPath: string | null) {
   return host;
 }
 
+describe("CompositionsTab card thumbnails", () => {
+  it("waits for the live preview to boot and keeps them through edit reloads", () => {
+    usePlayerStore.getState().reset();
+    const host = mount(["index.html"], "index.html");
+    expect(host.querySelector("img")).toBeNull();
+
+    act(() => usePlayerStore.getState().markPreviewBooted());
+    expect(host.querySelector("img")?.getAttribute("src")).toContain("/thumbnail/index.html");
+
+    act(() => usePlayerStore.getState().setTimelineReady(false));
+    expect(host.querySelector("img")).not.toBeNull();
+  });
+});
+
 describe("CompositionsTab root badge", () => {
   it("marks the composition matching masterCompositionPath as root", () => {
     const compositions = ["index.html", "compositions/headline.html"];

package/src/components/sidebar/CompositionsTab.test.ts

@@ -1,9 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
-import {
-  resolveCompositionPreviewScale,
-  resolveThumbnailSeekTime,
-  syncIframePlayback,
-} from "./CompositionsTab";
+import { resolveThumbnailSeekTime } from "../../player/components/CompositionThumbnail";
+import { resolveCompositionPreviewScale, syncIframePlayback } from "./CompositionsTab";
 
 describe("resolveCompositionPreviewScale", () => {
   it("scales a 16:9 stage to fit the composition card", () => {
@@ -45,8 +42,9 @@ describe("resolveThumbnailSeekTime", () => {
     expect(resolveThumbnailSeekTime(6)).toBe(3);
   });
 
-  it("uses the midpoint for compositions shorter than 3s", () => {
+  it("uses the midpoint for compositions of 3s or shorter, never their end frame", () => {
     expect(resolveThumbnailSeekTime(2)).toBe(1);
+    expect(resolveThumbnailSeekTime(3)).toBe(1.5);
   });
 
   it("falls back to the default 3s frame when duration is unknown", () => {

package/src/components/sidebar/CompositionsTab.tsx

@@ -1,9 +1,14 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
-import { buildCompositionThumbnailUrl } from "../../player/components/CompositionThumbnail";
+import {
+  buildCompositionThumbnailUrl,
+  resolveThumbnailSeekTime,
+  THUMBNAIL_SEEK_TIME_SECONDS,
+} from "../../player/components/CompositionThumbnail";
 import { setPreviewMediaMuted } from "../../player/lib/timelineIframeHelpers";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { thumbnailRevisionOf } from "../../player/store/thumbnailSlice";
+import { encodePreviewPath } from "../../player/components/thumbnailUtils";
 import { TIMELINE_COMPOSITION_MIME } from "../../utils/timelineCompositionDrop";
 import { Tooltip } from "../ui/Tooltip";
 
@@ -23,7 +28,6 @@ interface CompositionsTabProps {
 const DEFAULT_PREVIEW_STAGE = { width: 1920, height: 1080 };
 const CARD_W = 80;
 const CARD_H = 45;
-const THUMBNAIL_SEEK_TIME_SECONDS = 3;
 const THUMBNAIL_PLAYBACK_SYNC_ATTEMPTS = 10;
 
 type PreviewWindow = Window & {
@@ -54,17 +58,22 @@ export function resolveCompositionPreviewScale(input: {
   return Math.min(scaleX, scaleY);
 }
 
-export function resolveThumbnailSeekTime(durationSeconds: number | null | undefined): number {
-  if (
-    Number.isFinite(durationSeconds) &&
-    durationSeconds != null &&
-    durationSeconds > 0 &&
-    durationSeconds < THUMBNAIL_SEEK_TIME_SECONDS
-  ) {
-    return durationSeconds / 2;
-  }
+function compositionPreviewUrl(projectId: string, comp: string): string {
+  return buildProjectApiPath(projectId, `/preview/comp/${encodePreviewPath(comp)}`);
+}
 
-  return THUMBNAIL_SEEK_TIME_SECONDS;
+export function compositionCardThumbnailUrl(
+  projectId: string,
+  comp: string,
+  contentRevision: number,
+): string {
+  return buildCompositionThumbnailUrl({
+    previewUrl: compositionPreviewUrl(projectId, comp),
+    seekTime: THUMBNAIL_SEEK_TIME_SECONDS,
+    duration: 0,
+    origin: window.location.origin,
+    contentRevision,
+  });
 }
 
 function parsePositiveNumber(value: string | null): number | null {
@@ -127,6 +136,7 @@ function CompCard({
   lintInfo,
   onAddToTimeline,
   contentRevision,
+  previewBooted,
 }: {
   projectId: string;
   comp: string;
@@ -138,6 +148,7 @@ function CompCard({
   lintInfo?: { count: number; messages: string[] };
   onAddToTimeline?: () => void;
   contentRevision: number;
+  previewBooted: boolean;
 }) {
   const [hovered, setHovered] = useState(false);
   const [stageSize, setStageSize] = useState(DEFAULT_PREVIEW_STAGE);
@@ -179,14 +190,8 @@ function CompCard({
     setLivePreviewLoaded(false);
   };
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
-  const previewUrl = buildProjectApiPath(projectId, `/preview/comp/${comp}`);
-  const thumbnailUrl = buildCompositionThumbnailUrl({
-    previewUrl,
-    seekTime: THUMBNAIL_SEEK_TIME_SECONDS,
-    duration: 0,
-    origin: window.location.origin,
-    contentRevision,
-  });
+  const previewUrl = compositionPreviewUrl(projectId, comp);
+  const thumbnailUrl = compositionCardThumbnailUrl(projectId, comp, contentRevision);
   const thumbnailFailed = failedThumbnailUrl === thumbnailUrl;
   const previewScale = resolveCompositionPreviewScale({
     cardWidth: CARD_W,
@@ -250,7 +255,7 @@ function CompCard({
           <div className="absolute inset-0 flex items-center justify-center px-1 text-center text-[8px] leading-tight text-neutral-600">
             Preview unavailable
           </div>
-        ) : (
+        ) : !previewBooted ? null : (
           <img
             src={thumbnailUrl}
             alt=""
@@ -390,6 +395,7 @@ export const CompositionsTab = memo(function CompositionsTab({
   lintFindingsByFile,
 }: CompositionsTabProps) {
   const thumbnailRevisions = usePlayerStore((state) => state.thumbnailRevisions);
+  const previewBooted = usePlayerStore((state) => state.previewBooted);
   if (compositions.length === 0) {
     return (
       <div className="flex-1 flex items-center justify-center px-4">
@@ -413,6 +419,7 @@ export const CompositionsTab = memo(function CompositionsTab({
           isRendering={isRendering}
           lintInfo={lintFindingsByFile?.get(comp)}
           contentRevision={thumbnailRevisionOf(thumbnailRevisions, comp)}
+          previewBooted={previewBooted}
         />
       ))}
     </div>

package/src/components/studioColorGradingScope.ts

@@ -1,4 +1,3 @@
-import type { EditHistoryKind } from "../utils/editHistory";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { patchMediaColorGradingInHtml } from "./editor/colorGradingScopePatch";
 import { hasRelativeLutSource } from "./studioMediaJobs";
@@ -11,7 +10,6 @@ type ProjectFileWriter = (path: string, content: string) => Promise<void>;
 type ShowToast = (message: string, tone?: "error" | "info") => void;
 type RecordEdit = (entry: {
   label: string;
-  kind: EditHistoryKind;
   files: Record<string, { before: string; after: string }>;
 }) => Promise<void>;
 
@@ -105,7 +103,6 @@ export async function applyColorGradingScopeUpdate({
   const changedPaths = await saveProjectFilesWithHistory({
     projectId,
     label: value ? "Apply color grading" : "Clear color grading",
-    kind: "manual",
     files,
     readFile: readProjectFile,
     writeFile: writeProjectFile,

package/src/hooks/domEditDeleteMembers.ts

@@ -6,7 +6,6 @@
  */
 
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import type { EditHistoryKind } from "../utils/editHistory";
 import type { TimelineElement } from "../player";
 import { findMatchingTimelineElementId } from "../utils/studioHelpers";
 
@@ -14,7 +13,6 @@ import { findMatchingTimelineElementId } from "../utils/studioHelpers";
  *  supplies it. */
 export interface RecordEditInput {
   label: string;
-  kind: EditHistoryKind;
   coalesceKey?: string;
   files: Record<string, { before: string; after: string }>;
 }

package/src/hooks/gsapScriptCommitTypes.ts

@@ -1,7 +1,6 @@
 import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import type { EditHistoryKind } from "../utils/editHistory";
 import type { PublishSdkSession } from "../utils/sdkCutover";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 
@@ -96,7 +95,6 @@ export interface GsapScriptCommitsParams {
   editHistory: {
     recordEdit: (entry: {
       label: string;
-      kind: EditHistoryKind;
       coalesceKey?: string;
       coalesceMs?: number;
       files: Record<string, { before: string; after: string }>;

package/src/hooks/keyframeCacheAstLoad.test.ts

@@ -1,5 +1,6 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { fetchParsedAnimations } from "./keyframeCacheAstLoad";
+import { usePlayerStore } from "../player/store/playerStore";
 
 /**
  * Parsing a composition is a whole-file read + parse on the server, and a
@@ -9,10 +10,39 @@ import { fetchParsedAnimations } from "./keyframeCacheAstLoad";
  * pre-write answer.
  */
 describe("fetchParsedAnimations — in-flight sharing", () => {
+  beforeEach(() => {
+    usePlayerStore.setState({ timelineProjectId: "p", previewBooted: true });
+  });
   afterEach(() => {
     vi.unstubAllGlobals();
   });
 
+  it("does not ask the server to parse until the live preview has booted", async () => {
+    usePlayerStore.setState({ previewBooted: false });
+    const fetchStub = stubFetch();
+
+    const parsed = fetchParsedAnimations("p", "boot.html");
+    await Promise.resolve();
+    expect(fetchStub.calls()).toBe(0);
+
+    usePlayerStore.getState().markPreviewBooted();
+    await vi.waitFor(() => expect(fetchStub.calls()).toBe(1));
+    fetchStub.settle();
+    expect((await parsed)?.animations).toHaveLength(1);
+  });
+
+  it("drops a parse for a project the user left before its preview booted", async () => {
+    usePlayerStore.setState({ previewBooted: false });
+    const fetchStub = stubFetch();
+
+    const parsed = fetchParsedAnimations("p", "left.html");
+    usePlayerStore.getState().beginTimelineSession("q");
+    usePlayerStore.getState().markPreviewBooted();
+
+    expect(await parsed).toBeNull();
+    expect(fetchStub.calls()).toBe(0);
+  });
+
   function stubFetch(): { calls: () => number; settle: () => void } {
     let calls = 0;
     const pending: Array<() => void> = [];

package/src/hooks/keyframeCacheAstLoad.ts

@@ -5,7 +5,7 @@
  */
 import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/core/gsap-parser";
 import { isStudioHoldSet } from "@hyperframes/core/gsap-parser";
-import { usePlayerStore } from "../player/store/playerStore";
+import { isPreviewBooted, usePlayerStore, whenPreviewBooted } from "../player/store/playerStore";
 import { replaceKeyframeCacheForFile } from "./gsapKeyframeCacheHelpers";
 import { resolveClipTimingBasis, resolveSelectorElementIds, toClipKeyframes } from "./gsapShared";
 import {
@@ -74,6 +74,7 @@ async function requestParsedAnimations(
   projectId: string,
   sourceFile: string,
 ): Promise<ParsedGsapAnimations | null> {
+  if (!isPreviewBooted(projectId) && !(await whenPreviewBooted(projectId))) return null;
   try {
     const res = await fetch(
       `/api/projects/${encodeURIComponent(projectId)}/gsap-animations/${encodeURIComponent(sourceFile)}`,

package/src/hooks/timelineAudioGroupCreate.ts

@@ -237,7 +237,6 @@ export async function createAudioGroupAndAssignMembers({
       label: groupLabel
         ? `Group ${elements.length} clips as ${groupLabel}`
         : `Group ${elements.length} voice clips`,
-      kind: "timeline",
       files,
       readFile: async (path) => {
         const original = originalByPath.get(path);

package/src/hooks/timelineEditingHelpers.ts

@@ -182,6 +182,17 @@ export function patchIframeDomTiming(
   }
 }
 
+/** Takes deleted clips out of the live preview at once: until the reload lands, anything that re-reads the
+ *  preview (composition enrichment) would otherwise put them back on the timeline. */
+export function removeIframeTimelineElements(
+  iframe: HTMLIFrameElement | null,
+  elements: TimelineElement[],
+  activeCompositionPath: string | null = null,
+): void {
+  for (const element of elements)
+    findTimelineElementInIframe(iframe, element, activeCompositionPath)?.remove();
+}
+
 export function playbackStartAttributeForElement(
   element: Pick<TimelineElement, "kind" | "playbackStartAttr">,
 ): "data-media-start" | "data-playback-start" {
@@ -307,7 +318,6 @@ export async function persistTimelineEdit(input: PersistTimelineEditInput): Prom
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
-    kind: "timeline",
     coalesceKey: input.coalesceKey,
     files: { [targetPath]: patchedContent },
     readFile: async () => originalContent,
@@ -377,7 +387,6 @@ export async function persistTimelineBatchEdit(
   await saveProjectFilesWithHistory({
     projectId: input.projectId,
     label: input.label,
-    kind: "timeline",
     coalesceKey: input.coalesceKey,
     coalesceMs: input.coalesceMs,
     files,
@@ -455,7 +464,6 @@ export async function persistElementAttribute({
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label,
-      kind: "timeline",
       files: { [targetPath]: patched },
       readFile: async (path) => (path === targetPath ? before : readFileContent(projectId, path)),
       writeFile: writeProjectFile,

package/src/hooks/timelineTimingSync.ts

@@ -399,7 +399,6 @@ async function foldGsapMutationIntoHistory(input: {
       if (Object.keys(files).length > 0) {
         await input.recordEdit({
           label: input.label,
-          kind: "timeline",
           coalesceKey: input.coalesceKey,
           coalesceMs: GSAP_HISTORY_COALESCE_MS,
           files,

package/src/hooks/timelineTrackVisibility.ts

@@ -175,7 +175,6 @@ async function setElementsHidden({
     const changedPaths = await saveProjectFilesWithHistory({
       projectId,
       label,
-      kind: "timeline",
       files,
       readFile: async (path) => {
         const original = originalByPath.get(path);

package/src/hooks/useBlockHandlers.ts

@@ -8,7 +8,6 @@ import { usePlayerStore } from "../player";
 import { addBlockToProject } from "../utils/blockInstaller";
 import { selectAndRevealTimelineElement } from "../player/components/timelineDropReveal";
 import type { BlockParam } from "@hyperframes/core/registry";
-import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
 import type { MediaOverlayPlacement } from "../components/editor/propertyPanelTypes";
 
@@ -19,7 +18,6 @@ interface BlockCtxDeps {
   writeProjectFile: (path: string, content: string) => Promise<void>;
   recordEdit: (entry: {
     label: string;
-    kind: EditHistoryKind;
     coalesceKey?: string;
     files: Record<string, { before: string; after: string }>;
   }) => Promise<void>;