@hyperframes/studio 0.8.3 → 0.8.5

package/src/hooks/useDomEditSession.ts

@@ -20,6 +20,7 @@ import { useDomEditWiring } from "./useDomEditWiring";
 import { useGsapAwareEditing } from "./useGsapAwareEditing";
 import { useStudioSelectionPublisher } from "./useStudioSelectionPublisher";
 import { useKeyframeEaseCommits } from "./useKeyframeEaseCommits";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
 
 interface RecordEditInput {
   label: string;
@@ -42,6 +43,7 @@ export interface UseDomEditSessionParams {
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
   showToast: (message: string, tone?: "error" | "info") => void;
+  isRecordingRef?: React.RefObject<boolean>;
   refreshPreviewDocumentVersion: () => void;
   queueDomEditSave: <T>(save: () => Promise<T>) => Promise<T>;
   readProjectFile: (path: string) => Promise<string>;
@@ -60,7 +62,7 @@ export interface UseDomEditSessionParams {
   applyStudioManualEditsToPreviewRef: React.MutableRefObject<
     (iframe: HTMLIFrameElement) => Promise<void>
   >;
-  syncPreviewHistoryHotkey: (iframe: HTMLIFrameElement | null) => void;
+  syncPreviewHotkeys: (iframe: HTMLIFrameElement | null) => void;
   reloadPreview: () => void;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
   openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
@@ -71,6 +73,22 @@ export interface UseDomEditSessionParams {
   forceReloadSdkSession?: () => void;
 }
 
+/**
+ * Which elements a delete acts on. `expandGroup` widens the primary to the
+ * whole marquee group, which is what the Delete key means.
+ *
+ * The caller chooses rather than the delete deciding for everyone: Cut copies
+ * the primary alone, so expanding for it put one element on the clipboard and
+ * removed every other member of the group with it.
+ */
+export function membersForDelete(
+  selection: DomEditSelection,
+  group: DomEditSelection[],
+  options?: { expandGroup?: boolean },
+): DomEditSelection[] {
+  return options?.expandGroup && group.length > 0 ? group : [selection];
+}
+
 export function useDomEditSession({
   projectId,
   activeCompPath,
@@ -85,6 +103,7 @@ export function useDomEditSession({
   setRightCollapsed,
   setRightPanelTab,
   showToast,
+  isRecordingRef,
   refreshPreviewDocumentVersion,
   queueDomEditSave,
   readProjectFile,
@@ -101,7 +120,7 @@ export function useDomEditSession({
   previewDocumentVersion,
   rightPanelTab,
   applyStudioManualEditsToPreviewRef,
-  syncPreviewHistoryHotkey,
+  syncPreviewHotkeys,
   reloadPreview,
   setRefreshKey: _setRefreshKey,
   openSourceForSelection,
@@ -238,7 +257,7 @@ export function useDomEditSession({
     handleDomRemoveTextField,
     handleDomBoxSizeCommit,
     handleDomManualEditsReset,
-    handleDomEditElementDelete,
+    handleDomEditElementsDelete,
     handleDomZIndexReorderCommit,
   } = useDomEditCommits({
     activeCompPath,
@@ -332,6 +351,21 @@ export function useDomEditSession({
     forceReloadSdkSession,
   });
 
+  const handleDomEditElementDelete = useCallback(
+    async (selection: DomEditSelection, options?: { expandGroup?: boolean }) => {
+      // Same structural edit the timeline delete refuses mid-recording, so it
+      // refuses here too — this is now the path a Delete press takes whenever
+      // the canvas holds a selection.
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
+      const members = membersForDelete(selection, domEditGroupSelectionsRef.current, options);
+      await handleDomEditElementsDelete(members);
+    },
+    [domEditGroupSelectionsRef, handleDomEditElementsDelete, isRecordingRef, showToast],
+  );
+
   const handleGroupSelection = useCallback(() => {
     const group = domEditGroupSelectionsRef.current;
     const single = domEditSelectionRef.current;
@@ -400,7 +434,7 @@ export function useDomEditSession({
     bumpGsapCache,
     showToast,
     refreshPreviewDocumentVersion,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     applyDomSelection,
     buildDomSelectionFromTarget,

package/src/hooks/useDomEditWiring.ts

@@ -33,7 +33,7 @@ export interface UseDomEditWiringParams {
   bumpGsapCache: () => void;
   showToast: (message: string, tone?: "error" | "info") => void;
   refreshPreviewDocumentVersion: () => void;
-  syncPreviewHistoryHotkey: (iframe: HTMLIFrameElement | null) => void;
+  syncPreviewHotkeys: (iframe: HTMLIFrameElement | null) => void;
   applyStudioManualEditsToPreviewRef: React.MutableRefObject<
     (iframe: HTMLIFrameElement) => Promise<void>
   >;
@@ -127,7 +127,7 @@ export function useDomEditWiring({
   bumpGsapCache,
   showToast,
   refreshPreviewDocumentVersion,
-  syncPreviewHistoryHotkey,
+  syncPreviewHotkeys,
   applyStudioManualEditsToPreviewRef,
   applyDomSelection,
   buildDomSelectionFromTarget,
@@ -264,7 +264,7 @@ export function useDomEditWiring({
     refreshDomEditGroupSelectionsFromPreview,
     buildDomSelectionFromTarget,
     refreshPreviewDocumentVersion,
-    syncPreviewHistoryHotkey,
+    syncPreviewHotkeys,
     applyStudioManualEditsToPreviewRef,
     openSourceForSelection,
     getSidebarTab,

package/src/hooks/useDomSelection.ts

@@ -29,6 +29,9 @@ export interface ApplyDomSelectionOptions {
   revealPanel?: boolean;
   additive?: boolean;
   preserveGroup?: boolean;
+  // A clear that came FROM the timeline must not be echoed back, or picking a
+  // clip with no canvas node would deselect the clip you just picked.
+  announce?: boolean;
 }
 
 export interface ResolveDomSelectionOptions {
@@ -170,21 +173,14 @@ export function useDomSelection({
 
   const applyDomSelection = useCallback(
     // fallow-ignore-next-line complexity
-    (
-      selection: DomEditSelection | null,
-      options?: {
-        revealPanel?: boolean;
-        additive?: boolean;
-        preserveGroup?: boolean;
-      },
-    ) => {
+    (selection: DomEditSelection | null, options?: ApplyDomSelectionOptions) => {
       if (!selection) {
         logSelect("clear", { hadGroup: domEditGroupSelectionsRef.current.length });
         domEditSelectionRef.current = null;
         domEditGroupSelectionsRef.current = [];
         setDomEditSelection(null);
         setDomEditGroupSelections([]);
-        announceTimelineSelection([], null);
+        if (options?.announce !== false) announceTimelineSelection([], null);
         return;
       }
 
@@ -393,7 +389,14 @@ export function useDomSelection({
       const selection = await buildDomSelectionForTimelineElement(element);
       // A newer selection superseded this one while we were resolving — drop the stale result.
       if (seq !== timelineSelectSeqRef.current) return;
-      if (selection) applyDomSelection(selection);
+      if (selection) {
+        applyDomSelection(selection);
+        return;
+      }
+      // No canvas node (audio, a comp that is not the active one). Leaving the
+      // previous selection pointed the canvas at something the user did not pick,
+      // and Delete acts on the canvas first — so it removed that, not the clip.
+      applyDomSelection(null, { revealPanel: false, announce: false });
     },
     [applyDomSelection, buildDomSelectionForTimelineElement],
   );

package/src/hooks/useDomSelectionSelectionGuards.test.ts

@@ -278,3 +278,52 @@ describe("useDomSelection — marquee multi-select survives the late async prima
     iframe.remove();
   });
 });
+
+describe("useDomSelection — picking a clip with no canvas node", () => {
+  function timelineEl(id: string): TimelineElement {
+    return { id, domId: id, tag: "div", start: 0, duration: 1, track: 0 };
+  }
+
+  it("drops the canvas selection without deselecting the clip", async () => {
+    // Delete acts on the canvas first, so a canvas selection left pointing at
+    // the previous element removed THAT element when the user pressed Delete
+    // right after picking an audio clip. Clearing it has to stay quiet, though:
+    // announcing the clear back would deselect the clip that was just picked.
+    const iframe = document.createElement("iframe");
+    document.body.append(iframe);
+    const doc = iframe.contentDocument!;
+    const onCanvas = doc.createElement("div");
+    onCanvas.id = "on-canvas";
+    doc.body.append(onCanvas);
+
+    const setSelectedTimelineElementId = vi.fn();
+    const setTimelineSelectionSet = vi.fn();
+    const harness = renderHarness({
+      rightPanelTab: "design",
+      setRightPanelTab: vi.fn(),
+      iframe,
+      timelineElements: [timelineEl("on-canvas"), timelineEl("audio-only")],
+      setSelectedTimelineElementId,
+      setTimelineSelectionSet,
+    });
+
+    await act(async () => {
+      const pending = harness.current().handleTimelineElementSelect(timelineEl("on-canvas"));
+      deferreds.get("on-canvas")?.resolve();
+      await pending;
+    });
+    expect(harness.current().domEditSelectionRef.current).not.toBeNull();
+
+    setSelectedTimelineElementId.mockClear();
+    setTimelineSelectionSet.mockClear();
+    await act(async () => {
+      await harness.current().handleTimelineElementSelect(timelineEl("audio-only"));
+    });
+
+    expect(harness.current().domEditSelectionRef.current).toBeNull();
+    expect(setSelectedTimelineElementId).not.toHaveBeenCalled();
+    expect(setTimelineSelectionSet).not.toHaveBeenCalled();
+
+    harness.cleanup();
+  });
+});

package/src/hooks/useElementLifecycleOps.multiDelete.test.tsx

@@ -0,0 +1,100 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useElementLifecycleOps } from "./useElementLifecycleOps";
+import { makeLifecycleOpsParams } from "./elementLifecycleOpsTestUtils";
+import { mountReactHarness, makeSelection } from "./domSelectionTestHarness";
+
+function selectionFor(id: string) {
+  const el = document.createElement("div");
+  el.id = id;
+  document.body.append(el);
+  return { ...makeSelection(id, el), sourceFile: "index.html" };
+}
+
+describe("useElementLifecycleOps — deleting a canvas multi-selection", () => {
+  const removed: string[] = [];
+  const requests: string[] = [];
+  let changes = true;
+
+  beforeEach(() => {
+    removed.length = 0;
+    requests.length = 0;
+    changes = true;
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async (url: string, init?: RequestInit) => {
+        requests.push(String(url));
+        const body = JSON.parse(String(init?.body ?? "{}")) as {
+          targets?: { id?: string; selector?: string }[];
+        };
+        for (const target of body.targets ?? []) {
+          const key = target.id ?? target.selector;
+          if (key) removed.push(key);
+        }
+        return {
+          ok: true,
+          json: async () => ({ changed: changes, content: "<html></html>" }),
+        } as unknown as Response;
+      }),
+    );
+  });
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("removes every selected element, not just the first", async () => {
+    // The reported bug: select several elements on the canvas, press Delete, and
+    // one disappears while the rest stay — still drawn as selected.
+    let ops: ReturnType<typeof useElementLifecycleOps> | null = null;
+    function Probe() {
+      ops = useElementLifecycleOps(
+        makeLifecycleOpsParams({
+          commitDomEditPatchBatches: vi.fn(async () => ({ ok: true }) as never),
+          projectIdRef: { current: "p1" },
+        }),
+      );
+      return null;
+    }
+    mountReactHarness(<Probe />);
+
+    const selections = ["a", "b", "c"].map(selectionFor);
+    await act(async () => {
+      await ops!.handleDomEditElementsDelete(selections);
+    });
+
+    // The defect: only the first was ever removed.
+    expect(removed).toEqual(["a", "b", "c"]);
+    // And one request for the selection, not one per member: a canvas selection
+    // runs to hundreds, and a round trip each made Delete look like a no-op.
+    expect(requests.filter((url) => url.includes("remove-elements"))).toHaveLength(1);
+  });
+
+  it("says so when the preview is stale instead of claiming a delete", async () => {
+    // Every target missing means the preview is describing a document the file
+    // does not have. Reporting success there is what read as Delete doing
+    // nothing at all, with nothing on screen to explain it.
+    changes = false;
+    const showToast = vi.fn();
+    let ops: ReturnType<typeof useElementLifecycleOps> | null = null;
+    function Probe() {
+      ops = useElementLifecycleOps(
+        makeLifecycleOpsParams({
+          commitDomEditPatchBatches: vi.fn(async () => ({ ok: true }) as never),
+          projectIdRef: { current: "p1" },
+          showToast,
+        }),
+      );
+      return null;
+    }
+    mountReactHarness(<Probe />);
+
+    await act(async () => {
+      await ops!.handleDomEditElementsDelete([selectionFor("a")]);
+    });
+
+    expect(showToast.mock.calls.flat().join(" ")).toContain("out of date");
+  });
+});

package/src/hooks/useElementLifecycleOps.ts

@@ -85,39 +85,77 @@ export function useElementLifecycleOps({
   onElementDeleted,
 }: UseElementLifecycleOpsParams) {
   // fallow-ignore-next-line complexity
-  const handleDomEditElementDelete = useCallback(
+  const handleDomEditElementsDelete = useCallback(
     // fallow-ignore-next-line complexity
-    async (selection: DomEditSelection) => {
+    async (selections: DomEditSelection[]) => {
       const pid = projectIdRef.current;
       if (!pid) return;
-      const label = selection.label || selection.id || selection.selector || selection.tagName;
+      const [selection] = selections;
+      if (!selection) return;
+      const label =
+        selections.length === 1
+          ? selection.label || selection.id || selection.selector || selection.tagName
+          : `${selections.length} elements`;
+      // Say the press landed before doing the work. Deleting a marquee selection
+      // takes seconds — reading the file, removing every member, saving, then
+      // reloading the preview — and until it finishes the canvas looks exactly
+      // like it did before. With nothing acknowledging the key, that silence is
+      // indistinguishable from Delete being broken, which is how it got read.
+      if (selections.length > 1) showToast(`Deleting ${label}...`, "info");
 
+      // One file per pass; anything authored elsewhere is dropped rather than
+      // patched into the wrong document.
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
+      const sameFile = selections.filter(
+        (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath,
+      );
       try {
         const originalContent = await readProjectFileContent(pid, targetPath);
 
-        const patchTarget = buildDomEditPatchTarget(selection);
-        if (!patchTarget.id && !patchTarget.selector && !patchTarget.hfId) {
+        const patchTargets = sameFile.map((member) => buildDomEditPatchTarget(member));
+        if (patchTargets.some((t) => !t.id && !t.selector && !t.hfId)) {
           throw new Error("Selected element has no patchable target");
         }
 
-        if (onTrySdkDelete && selection.hfId) {
-          const handled = await onTrySdkDelete(selection.hfId, originalContent, targetPath);
-          if (cutoverCommittedOrThrow(handled)) {
+        // The SDK path can take the whole selection only when every member is
+        // addressable in the SDK doc; otherwise fall through to REST for all of
+        // them rather than deleting a subset through each route.
+        const hfIds = sameFile
+          .map((member) => member.hfId)
+          .filter((hfId): hfId is string => Boolean(hfId));
+        if (onTrySdkDelete && hfIds.length === sameFile.length) {
+          let allHandled = true;
+          for (const hfId of hfIds) {
+            // The SDK owns the document it edits, so every member is removed
+            // against the same starting content rather than a threaded copy.
+            const handled = await onTrySdkDelete(hfId, originalContent, targetPath);
+            if (!cutoverCommittedOrThrow(handled)) {
+              allHandled = false;
+              break;
+            }
+          }
+          if (allHandled) {
             clearDomSelection();
             usePlayerStore.getState().setSelectedElementId(null);
-            showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+            showToast(
+              `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+              "info",
+            );
             return;
           }
         }
 
         domEditSaveTimestampRef.current = Date.now();
+        // One request for the whole selection. Removing members one at a time
+        // cost a round trip and a rewrite of the file EACH, and a canvas
+        // selection runs to hundreds of members — the file ended up correct, but
+        // only after long enough that Delete looked like it had done nothing.
         const removeResponse = await fetch(
-          `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+          `/api/projects/${pid}/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,
           {
             method: "POST",
             headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-            body: JSON.stringify({ target: patchTarget }),
+            body: JSON.stringify({ targets: patchTargets }),
           },
         );
         if (!removeResponse.ok) {
@@ -126,8 +164,18 @@ export function useElementLifecycleOps({
             `Failed to delete element from ${targetPath}`,
           );
         }
-
-        const removeData = (await removeResponse.json()) as { changed?: boolean; content?: string };
+        const removeData = (await removeResponse.json()) as {
+          changed?: boolean;
+          content?: string;
+        };
+        if (!removeData.changed) {
+          // A member the file no longer holds simply does not match, which is
+          // normal for one nested inside another member already removed. Nothing
+          // matching at all means the preview is describing a document the file
+          // does not have — say so rather than reporting a delete that happened.
+          reloadPreview();
+          throw new Error("Nothing to delete — the preview was out of date. Try again.");
+        }
         const patchedContent =
           typeof removeData.content === "string" ? removeData.content : originalContent;
         // ponytail: the server remove-element route (removeElementFromHtml) strips
@@ -155,8 +203,11 @@ export function useElementLifecycleOps({
         // SDK edit doesn't resurrect the deleted element.
         forceReloadSdkSession?.();
         reloadPreview();
-        onElementDeleted?.(selection);
-        showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+        for (const member of sameFile) onElementDeleted?.(member);
+        showToast(
+          `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+          "info",
+        );
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete element";
         showToast(message);
@@ -337,8 +388,16 @@ export function useElementLifecycleOps({
     [commitDomEditPatchBatches, onReorderShadow],
   );
 
+  const handleDomEditElementDelete = useCallback(
+    async (selection: DomEditSelection) => {
+      await handleDomEditElementsDelete([selection]);
+    },
+    [handleDomEditElementsDelete],
+  );
+
   return {
     handleDomEditElementDelete,
+    handleDomEditElementsDelete,
     handleDomZIndexReorderCommit,
   };
 }

package/src/hooks/useStudioUrlState.hydration.test.ts

@@ -0,0 +1,39 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from "vitest";
+import { resolveUrlSelections } from "./useStudioUrlState";
+
+describe("restoring a selection from the URL", () => {
+  it("probes the source for the primary only, never for the group", async () => {
+    // Each probe is its own request and they are awaited one after another,
+    // while the URL carries the whole selection — so a marquee over a captured
+    // page turned every later reload into hundreds of serial round trips before
+    // the canvas answered anything.
+    const doc = document.implementation.createHTMLDocument();
+    const ids = ["a", "b", "c", "d"];
+    for (const id of ids) {
+      const el = doc.createElement("div");
+      el.id = id;
+      doc.body.append(el);
+    }
+    const probed: (boolean | undefined)[] = [];
+    const buildDomSelection = vi.fn(
+      async (element: HTMLElement, options?: { skipSourceProbe?: boolean }) => {
+        probed.push(options?.skipSourceProbe);
+        return { element, id: element.id } as never;
+      },
+    );
+
+    await resolveUrlSelections({
+      doc,
+      primaryElement: doc.getElementById("a") as HTMLElement,
+      selection: { sourceFile: "index.html" } as never,
+      group: ids.slice(1).map((id) => ({ id, sourceFile: "index.html" })) as never,
+      activeCompPath: "index.html",
+      isCurrent: () => true,
+      buildDomSelection,
+    });
+
+    expect(probed[0]).toBeUndefined();
+    expect(probed.slice(1)).toEqual([true, true, true]);
+  });
+});

package/src/hooks/useStudioUrlState.ts

@@ -27,7 +27,7 @@ interface UseStudioUrlStateParams {
   applyMarqueeSelection: (selections: DomEditSelection[], additive: boolean) => void;
   buildDomSelectionFromTarget: (
     target: HTMLElement,
-    options?: { preferClipAncestor?: boolean },
+    options?: { preferClipAncestor?: boolean; skipSourceProbe?: boolean },
   ) => Promise<DomEditSelection | null>;
   applyDomSelection: (
     selection: DomEditSelection | null,
@@ -124,10 +124,16 @@ async function buildOptionalDomSelection(
   buildDomSelection: UseStudioUrlStateParams["buildDomSelectionFromTarget"],
 ): Promise<DomEditSelection | null> {
   if (!element) return null;
-  return buildDomSelection(element, { preferClipAncestor: false });
+  // No source probe for group members. Each one costs a request, they are
+  // resolved one after another, and the URL carries the whole selection — so a
+  // marquee over a captured page turned every reload into hundreds of serial
+  // round trips before the canvas answered anything, including a Delete press.
+  // The marquee that produced these members already skips the probe for the
+  // same reason; only the primary, whose panel reads the flag, still pays it.
+  return buildDomSelection(element, { preferClipAncestor: false, skipSourceProbe: true });
 }
 
-async function resolveUrlSelections({
+export async function resolveUrlSelections({
   doc,
   primaryElement,
   selection,

package/src/hooks/useTimelineEditing.ts

@@ -389,44 +389,59 @@ export function useTimelineEditing({
   });
 
   // fallow-ignore-next-line complexity
-  const handleTimelineElementDelete = useCallback(
+  const handleTimelineElementsDelete = useCallback(
     // fallow-ignore-next-line complexity
-    async (element: TimelineElement) => {
+    async (selection: TimelineElement[]) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
       }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
-      const label = getTimelineElementLabel(element);
+      const [element] = selection;
+      if (!element) return;
+      const label =
+        selection.length === 1 ? getTimelineElementLabel(element) : `${selection.length} clips`;
 
+      // One file per delete pass. Every element in a marquee selection lives in
+      // the composition being edited, so they share a target; anything that
+      // does not is dropped rather than written to the wrong file.
       const targetPath = element.sourceFile || activeCompPath || "index.html";
+      const sameFile = selection.filter(
+        (candidate) => (candidate.sourceFile || activeCompPath || "index.html") === targetPath,
+      );
       try {
         const originalContent = await readFileContent(pid, targetPath);
 
-        const patchTarget = buildPatchTarget(element);
-        if (!patchTarget) {
-          throw new Error(`Timeline element ${element.id} is missing a patchable target`);
-        }
+        // Remove every selected element before saving once. The server rewrites
+        // the file per call, so `removedContent` after the last one holds them
+        // all — which is what makes this a single history entry, and a single
+        // undo, rather than one per clip.
+        let removedContent = originalContent;
+        for (const target of sameFile) {
+          const patchTarget = buildPatchTarget(target);
+          if (!patchTarget) {
+            throw new Error(`Timeline element ${target.id} is missing a patchable target`);
+          }
 
-        const removeResponse = await fetch(
-          `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
-          {
-            method: "POST",
-            headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-            body: JSON.stringify({ target: patchTarget }),
-          },
-        );
-        if (!removeResponse.ok) {
-          throw new Error(`Failed to delete ${element.id} from ${targetPath}`);
-        }
+          const removeResponse = await fetch(
+            `/api/projects/${pid}/file-mutations/remove-element/${encodeURIComponent(targetPath)}`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+              body: JSON.stringify({ target: patchTarget }),
+            },
+          );
+          if (!removeResponse.ok) {
+            throw new Error(`Failed to delete ${target.id} from ${targetPath}`);
+          }
 
-        const removeData = (await removeResponse.json()) as {
-          changed?: boolean;
-          content?: string;
-        };
-        const removedContent =
-          typeof removeData.content === "string" ? removeData.content : originalContent;
+          const removeData = (await removeResponse.json()) as {
+            changed?: boolean;
+            content?: string;
+          };
+          if (typeof removeData.content === "string") removedContent = removeData.content;
+        }
         // Content-driven duration: shrink the composition to the furthest
         // remaining clip end, read from the post-removal SOURCE (raw
         // data-duration), so deleting the last/longest clip removes trailing
@@ -460,15 +475,18 @@ export function useTimelineEditing({
           throw error;
         }
 
+        const deletedKeys = new Set(sameFile.map((te) => te.key ?? te.id));
         usePlayerStore
           .getState()
-          .setElements(
-            timelineElements.filter((te) => (te.key ?? te.id) !== (element.key ?? element.id)),
-          );
+          .setElements(timelineElements.filter((te) => !deletedKeys.has(te.key ?? te.id)));
         usePlayerStore.getState().setSelectedElementId(null);
+        usePlayerStore.getState().setSelectedElementIds(new Set());
         forceReloadSdkSession?.();
         reloadPreview();
-        showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
+        showToast(
+          `Deleted ${label}. Use Undo to restore ${sameFile.length === 1 ? "it" : "them"}.`,
+          "info",
+        );
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete timeline clip";
         showToast(message);
@@ -488,6 +506,14 @@ export function useTimelineEditing({
     ],
   );
 
+  /** Single-clip delete — the context menu and clip chrome path. */
+  const handleTimelineElementDelete = useCallback(
+    async (element: TimelineElement) => {
+      await handleTimelineElementsDelete([element]);
+    },
+    [handleTimelineElementsDelete],
+  );
+
   const { handleTimelineAssetDrop, handleTimelineFileDrop, handleTimelineCompositionDrop } =
     useTimelineAssetDropOps({
       projectIdRef,
@@ -533,6 +559,7 @@ export function useTimelineEditing({
     handleToggleTrackHidden,
     handleToggleElementHidden,
     handleTimelineElementDelete,
+    handleTimelineElementsDelete,
     handleTimelineElementSplit: handleRazorSplit,
     handleRazorSplit,
     handleRazorSplitAll,