@hyperframes/studio 0.8.118 → 0.8.120

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.118",
+  "version": "0.8.120",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.118",
-    "@hyperframes/sdk": "0.8.118",
-    "@hyperframes/studio-server": "0.8.118",
-    "@hyperframes/parsers": "0.8.118",
-    "@hyperframes/player": "0.8.118",
-    "@hyperframes/shader-transitions": "0.8.118"
+    "@hyperframes/core": "0.8.120",
+    "@hyperframes/parsers": "0.8.120",
+    "@hyperframes/sdk": "0.8.120",
+    "@hyperframes/shader-transitions": "0.8.120",
+    "@hyperframes/studio-server": "0.8.120",
+    "@hyperframes/player": "0.8.120"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -81,7 +81,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.118"
+    "@hyperframes/producer": "0.8.120"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/EditorShell.tsx

@@ -59,6 +59,7 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
   onDuplicateClip: () => Promise<boolean>;
   canPasteClip: () => boolean;
   clipMenuItems?: TimelineProps["clipMenuItems"];
+  splitShortcut?: TimelineProps["splitShortcut"];
   setCompIdToSrc: (map: Map<string, string>) => void;
   setCompositionLoading: (loading: boolean) => void;
   shouldShowMotionPath: boolean;
@@ -111,6 +112,7 @@ export const EditorShell = memo(function EditorShell({
   onDuplicateClip,
   canPasteClip,
   clipMenuItems,
+  splitShortcut,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowMotionPath,
@@ -211,6 +213,7 @@ export const EditorShell = memo(function EditorShell({
               onDuplicateClip={onDuplicateClip}
               canPasteClip={canPasteClip}
               clipMenuItems={clipMenuItems}
+              splitShortcut={splitShortcut}
               previewOverlay={
                 <PreviewOverlays
                   shouldShowMotionPath={shouldShowMotionPath}
@@ -255,6 +258,7 @@ interface EditorShellBodyProps {
   onDuplicateClip: () => Promise<boolean>;
   canPasteClip: () => boolean;
   clipMenuItems?: TimelineProps["clipMenuItems"];
+  splitShortcut?: TimelineProps["splitShortcut"];
 }
 
 function EditorShellBody({
@@ -276,6 +280,7 @@ function EditorShellBody({
   onDuplicateClip,
   canPasteClip,
   clipMenuItems,
+  splitShortcut,
 }: EditorShellBodyProps) {
   const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
 
@@ -329,6 +334,7 @@ function EditorShellBody({
             onDuplicateClip={onDuplicateClip}
             canPasteClip={canPasteClip}
             clipMenuItems={clipMenuItems}
+            splitShortcut={splitShortcut}
             onSelectTimelineElement={onSelectTimelineElement}
             timelineFooter={
               captionEditMode ? (

package/src/components/nle/TimelinePane.tsx

@@ -47,6 +47,7 @@ export interface TimelinePaneProps {
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
   clipMenuItems?: TimelineProps["clipMenuItems"];
+  splitShortcut?: TimelineProps["splitShortcut"];
 }
 
 export function TimelinePane({
@@ -67,6 +68,7 @@ export function TimelinePane({
   onDuplicateClip,
   canPasteClip,
   clipMenuItems,
+  splitShortcut,
 }: TimelinePaneProps) {
   const {
     seek,
@@ -123,6 +125,7 @@ export function TimelinePane({
               onDuplicateClip={onDuplicateClip}
               canPasteClip={canPasteClip}
               clipMenuItems={clipMenuItems}
+              splitShortcut={splitShortcut}
             />
           </div>
           <AudioMeterStrip />

package/src/hooks/fetchStubTestUtils.ts

@@ -1,10 +1,8 @@
-// Shared helpers for test-side `fetch` stubs (timelineTimingSync.test.ts,
-// useTimelineEditing.test.tsx): a JSON Response factory and a Request → URL
-// normalizer. Test-only module — imported exclusively from *.test.* files.
+// Test-only helpers for `fetch` stubs: a JSON Response factory and a Request → URL normalizer.
 
-export function jsonResponse(body: unknown): Response {
+export function jsonResponse(body: unknown, status = 200): Response {
   return new Response(JSON.stringify(body), {
-    status: 200,
+    status,
     headers: { "content-type": "application/json" },
   });
 }

package/src/hooks/gsapMutationClient.ts

@@ -88,6 +88,22 @@ function readMutationError(value: unknown, fallback: string): string {
   return fallback;
 }
 
+export function requestGsapMutation(
+  projectId: string,
+  route: "gsap-mutations" | "gsap-mutations-batch",
+  filePath: string,
+  body: unknown,
+): Promise<Response> {
+  return studioApiFetch(
+    `/api/projects/${encodeURIComponent(projectId)}/${route}/${encodeURIComponent(filePath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+      body: JSON.stringify(body),
+    },
+  );
+}
+
 export async function postGsapMutation(
   projectId: string,
   filePath: string,
@@ -96,14 +112,7 @@ export async function postGsapMutation(
 ): Promise<GsapMutationStatus> {
   let response: Response;
   try {
-    response = await studioApiFetch(
-      `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(filePath)}`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-        body: JSON.stringify(mutation),
-      },
-    );
+    response = await requestGsapMutation(projectId, "gsap-mutations", filePath, mutation);
   } catch (error) {
     throw new GsapPreviewConvergenceError(`${fallback}: mutation outcome unknown`, {
       cause: error,

package/src/hooks/gsapScriptCommitHelpers.ts

@@ -1,22 +1,11 @@
-import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 
 export { PROPERTY_DEFAULTS } from "./gsapShared";
 import { idSelector, matchesExactlyOne } from "./gsapShared";
-import { studioWriteHeaders } from "../utils/studioFileVersion";
-import { studioApiFetch } from "../utils/studioApiFetch";
 
 /**
- * The selector to author a NEW tween against, minting an id on the element when
- * it has no address of its own.
- *
- * `selection.selector` is only usable when it addresses ONE element:
- * `buildStableSelector` hands back a bare class for an id-less element, so
- * returning it unconditionally aimed "add animation" at every sibling sharing
- * the class (the attribution blow-up that collapsed the timeline to one row,
- * see writeTargetSelector). A non-unique selector falls through to the id mint
- * below, which is the stronger fix here than a structural path: the id it writes
- * back to the source also makes every later lookup for this element exact.
+ * The selector for a NEW tween; a shared-class selector would hit every sibling, so an
+ * element without a unique one gets an `autoId` proposal the server makes unique (`ensure-id`).
  */
 export function ensureElementAddressable(selection: DomEditSelection): {
   selector: string;
@@ -37,7 +26,6 @@ export function ensureElementAddressable(selection: DomEditSelection): {
     n += 1;
     id = `${tag}-${n}`;
   }
-  el.setAttribute("id", id);
   return { selector: idSelector(id), autoId: id };
 }
 
@@ -87,53 +75,3 @@ export function formatGsapMutationRejectionToast(error: GsapMutationHttpError):
   }
   return `Couldn't save animation: ${error.message}`;
 }
-
-interface AssignAutoIdParams {
-  projectId: string;
-  targetPath: string;
-  selection: DomEditSelection;
-  autoId: string;
-  showToast?: (message: string, tone?: "error" | "info") => void;
-}
-
-export async function assignGsapTargetAutoIdIfNeeded({
-  projectId,
-  targetPath,
-  selection,
-  autoId,
-  showToast,
-}: AssignAutoIdParams): Promise<boolean> {
-  const patchBody = {
-    target: {
-      id: selection.id,
-      hfId: selection.hfId,
-      selector: selection.selector,
-      selectorIndex: selection.selectorIndex,
-    },
-    operations: [{ type: "html-attribute", property: "id", value: autoId }],
-  };
-  const unsafePatchFields = findUnsafeDomPatchValues(patchBody);
-  if (unsafePatchFields.length > 0) {
-    showToast?.("Couldn't assign element id because the patch contains invalid values", "error");
-    return false;
-  }
-  const res = await studioApiFetch(
-    `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-      body: JSON.stringify(patchBody),
-    },
-  );
-  if (!res.ok) {
-    showToast?.(
-      formatGsapMutationRejectionToast(
-        new GsapMutationHttpError(res.status, await readJsonResponseBody(res)),
-      ),
-      "error",
-    );
-    return false;
-  }
-  const data = (await res.json()) as { changed?: boolean };
-  return data.changed === true;
-}

package/src/hooks/newTweenTarget.test.ts

@@ -73,6 +73,9 @@ describe("ensureElementAddressable — add-animation button", () => {
     const { selector, autoId } = ensureElementAddressable(selection);
 
     expect(autoId).toBeTruthy();
+    expect(el.hasAttribute("id")).toBe(false);
+    // addGsapAnimation sets the id the server confirms; the proposal is free in the preview.
+    el.setAttribute("id", autoId!);
     expect(document.querySelectorAll(selector)).toHaveLength(1);
     expect(document.querySelector(selector)).toBe(el);
     expect(attributedTo(selector)).toEqual([autoId]);

package/src/hooks/useDomEditCommitsHelpers.test.ts

@@ -0,0 +1,116 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { jsonResponse, requestUrl } from "./fetchStubTestUtils";
+import { assignGsapTargetAutoIdIfNeeded } from "./useDomEditCommitsHelpers";
+
+const selection = {
+  hfId: "hf-card",
+  selector: '[data-hf-id="hf-card"]',
+  selectorIndex: 0,
+} as DomEditSelection;
+
+function stubPatch(response: Response) {
+  const fetchMock = vi.fn(async (input: Parameters<typeof fetch>[0], _init?: RequestInit) => {
+    const url = requestUrl(input);
+    if (url.includes("/api/projects/p1/file-mutations/patch-element/index.html")) return response;
+    throw new Error(`Unexpected fetch: ${url}`);
+  });
+  vi.stubGlobal("fetch", fetchMock);
+  return fetchMock;
+}
+
+function assign(over: Partial<Parameters<typeof assignGsapTargetAutoIdIfNeeded>[0]> = {}) {
+  const showToast = vi.fn();
+  const result = assignGsapTargetAutoIdIfNeeded({
+    projectId: "p1",
+    targetPath: "index.html",
+    selection,
+    autoId: "hf-auto-1",
+    showToast,
+    ...over,
+  });
+  return { result, showToast };
+}
+
+describe("assignGsapTargetAutoIdIfNeeded", () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  it("asks the patch-element client to ensure the id and returns the one the file holds", async () => {
+    const fetchMock = stubPatch(jsonResponse({ changed: true, elementId: "hf-auto-1-2" }));
+    const { result } = assign();
+
+    await expect(result).resolves.toBe("hf-auto-1-2");
+    const [, init] = fetchMock.mock.calls[0]!;
+    expect(init?.method).toBe("POST");
+    expect(new Headers(init?.headers).get("X-Hyperframes-Write-Token")).toBeTruthy();
+    expect(JSON.parse(String(init?.body))).toEqual({
+      target: { hfId: "hf-card", selector: '[data-hf-id="hf-card"]', selectorIndex: 0 },
+      operations: [{ type: "ensure-id", property: "id", value: "hf-auto-1" }],
+    });
+  });
+
+  it("returns the id the element already holds in the file", async () => {
+    stubPatch(jsonResponse({ changed: false, matched: true, elementId: "div" }));
+    await expect(assign().result).resolves.toBe("div");
+  });
+
+  it.each([
+    ["the target is not in the file", { changed: false, matched: false }],
+    ["the reply names no id", {}],
+  ])("is null with a toast when %s", async (_name, body) => {
+    stubPatch(jsonResponse(body));
+    const { result, showToast } = assign();
+
+    await expect(result).resolves.toBeNull();
+    expect(showToast).toHaveBeenCalledWith(
+      "Couldn't assign element id: element not found in index.html",
+      "error",
+    );
+  });
+
+  it("is null with the server's reason in a toast when the patch is refused", async () => {
+    stubPatch(
+      new Response(JSON.stringify({ error: "target not found" }), {
+        status: 409,
+        headers: { "content-type": "application/json" },
+      }),
+    );
+    const { result, showToast } = assign();
+
+    await expect(result).resolves.toBeNull();
+    expect(showToast).toHaveBeenCalledWith("Couldn't save edit: target not found", "error");
+  });
+
+  it("is null with a plain toast when the refusal has no JSON reason", async () => {
+    stubPatch(new Response("boom", { status: 500, headers: { "content-type": "text/plain" } }));
+    const { result, showToast } = assign();
+
+    await expect(result).resolves.toBeNull();
+    expect(showToast).toHaveBeenCalledWith("Couldn't save edit", "error");
+  });
+
+  it("refuses a non-finite target before any request", async () => {
+    const fetchMock = stubPatch(jsonResponse({ changed: true }));
+    const { result, showToast } = assign({
+      selection: { ...selection, selectorIndex: Number.NaN },
+    });
+
+    await expect(result).resolves.toBeNull();
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(showToast).toHaveBeenCalledWith(
+      "Couldn't assign element id because the patch contains invalid values",
+      "error",
+    );
+  });
+
+  it("lets a network failure through", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => {
+        throw new TypeError("offline");
+      }),
+    );
+    await expect(assign().result).rejects.toThrow("offline");
+  });
+});

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -8,6 +8,8 @@ import type { DomEditPatchBatch } from "./domEditCommitTypes";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
 import { studioApiFetch } from "../utils/studioApiFetch";
+import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
 
 export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
@@ -169,6 +171,8 @@ export interface PatchElementResponse {
   content?: string;
   path?: string;
   version?: string;
+  /** The patched element's id after the patch; absent when the target was not found. */
+  elementId?: string | null;
 }
 
 type ShowToast = (message: string, tone?: "error" | "info") => void;
@@ -199,6 +203,46 @@ export async function postPatchElement(
   return (await response.json()) as PatchElementResponse;
 }
 
+interface AssignAutoIdParams {
+  projectId: string;
+  targetPath: string;
+  selection: DomEditSelection;
+  autoId: string;
+  showToast: ShowToast;
+}
+
+/** The id the file holds for the element after proposing `autoId` (the server keeps or dedupes it); null if none. */
+export async function assignGsapTargetAutoIdIfNeeded({
+  projectId,
+  targetPath,
+  selection,
+  autoId,
+  showToast,
+}: AssignAutoIdParams): Promise<string | null> {
+  const patchBody = {
+    target: {
+      id: selection.id,
+      hfId: selection.hfId,
+      selector: selection.selector,
+      selectorIndex: selection.selectorIndex,
+    },
+    operations: [{ type: "ensure-id", property: "id", value: autoId }],
+  };
+  if (findUnsafeDomPatchValues(patchBody).length > 0) {
+    showToast("Couldn't assign element id because the patch contains invalid values", "error");
+    return null;
+  }
+  try {
+    const { elementId } = await postPatchElement(projectId, targetPath, patchBody, showToast);
+    if (elementId) return elementId;
+    showToast(`Couldn't assign element id: element not found in ${targetPath}`, "error");
+    return null;
+  } catch (error) {
+    if (error instanceof StudioSaveHttpError && error.alreadyToasted) return null;
+    throw error;
+  }
+}
+
 export async function writePreparedContent(
   targetPath: string,
   patchedContent: string,

package/src/hooks/useGsapAnimationOps.test.tsx

@@ -3,6 +3,8 @@ import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { patchElementInHtml } from "../../../studio-server/src/helpers/sourceMutation.js";
+import { jsonResponse } from "./fetchStubTestUtils";
 import { useGsapAnimationOps } from "./useGsapAnimationOps";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
@@ -13,6 +15,8 @@ let cleanup: (() => void) | null = null;
 afterEach(() => {
   cleanup?.();
   cleanup = null;
+  vi.unstubAllGlobals();
+  document.body.replaceChildren();
 });
 
 const selection = { id: "box", selector: "#box" } as DomEditSelection;
@@ -20,11 +24,12 @@ const selection = { id: "box", selector: "#box" } as DomEditSelection;
 function renderOps(
   commitMutationSafely: (...args: unknown[]) => Promise<void>,
   commitMutation: (...args: unknown[]) => Promise<void> = vi.fn(async () => undefined),
+  projectId: string | null = "project",
 ): HookApi {
   const captured: { api: HookApi | null } = { api: null };
   function Probe() {
     captured.api = useGsapAnimationOps({
-      projectIdRef: { current: "project" },
+      projectIdRef: { current: projectId },
       activeCompPath: "index.html",
       commitMutation,
       commitMutationSafely,
@@ -42,6 +47,52 @@ function renderOps(
   return captured.api;
 }
 
+const CARDS = `<div data-hf-id="hf-a" class="card"></div><div data-hf-id="hf-b" class="card"></div>`;
+
+function mountCards(): HTMLElement[] {
+  document.body.innerHTML = CARDS;
+  return [...document.body.querySelectorAll<HTMLElement>(".card")];
+}
+
+function addTo(api: HookApi, element: HTMLElement, hfId: string): Promise<void> {
+  return api.addGsapAnimation({ element, hfId } as unknown as DomEditSelection, "from");
+}
+
+/** The patch-element route over an in-memory copy of CARDS, patched by the server's own code. */
+function serveCards() {
+  let html = CARDS;
+  return {
+    handle(init?: RequestInit): Response {
+      const { target, operations } = JSON.parse(String(init?.body));
+      const result = patchElementInHtml(html, target, operations);
+      const changed = result.html !== html;
+      html = result.html;
+      return jsonResponse({
+        ok: true,
+        changed,
+        matched: result.matched,
+        elementId: result.elementId,
+      });
+    },
+    stub(route: (init: RequestInit | undefined, call: number) => Promise<Response>) {
+      let calls = 0;
+      vi.stubGlobal(
+        "fetch",
+        vi.fn(async (_input: unknown, init?: RequestInit) => route(init, ++calls)),
+      );
+    },
+    ids(): Record<string, string | null> {
+      const doc = new DOMParser().parseFromString(html, "text/html");
+      return Object.fromEntries(
+        [...doc.querySelectorAll("[data-hf-id]")].map((el) => [
+          el.getAttribute("data-hf-id"),
+          el.getAttribute("id"),
+        ]),
+      );
+    },
+  };
+}
+
 function deferredCommit() {
   let release!: () => void;
   const promise = new Promise<void>((resolve) => {
@@ -86,6 +137,135 @@ describe("useGsapAnimationOps settlement", () => {
     );
   });
 
+  it.each([
+    ["saved", true, "div"],
+    ["refused", false, null],
+  ])(
+    "an id-less element takes the file's id only when the id write is %s",
+    async (_name, saved, id) => {
+      const server = serveCards();
+      const [element] = mountCards();
+      server.stub(async (init) =>
+        saved ? server.handle(init) : jsonResponse({ error: "file changed" }, 409),
+      );
+      const commitMutation = vi.fn(async () => undefined);
+      const api = renderOps(
+        vi.fn(async () => undefined),
+        commitMutation,
+      );
+
+      await addTo(api, element!, "hf-a");
+
+      expect(element!.getAttribute("id")).toBe(id);
+      expect(server.ids()).toEqual({ "hf-a": id, "hf-b": null });
+      expect(commitMutation).toHaveBeenCalledTimes(id ? 1 : 0);
+    },
+  );
+
+  it("a reply lost after the id is saved never lets a sibling reuse that id", async () => {
+    const server = serveCards();
+    const [first, second] = mountCards();
+    server.stub(async (init, call) => {
+      const reply = server.handle(init);
+      if (call === 1) throw new TypeError("connection reset");
+      return reply;
+    });
+    const commitMutation = vi.fn(async () => undefined);
+    const api = renderOps(
+      vi.fn(async () => undefined),
+      commitMutation,
+    );
+
+    await expect(addTo(api, first!, "hf-a")).rejects.toThrow("connection reset");
+    await addTo(api, second!, "hf-b");
+
+    expect(server.ids()).toEqual({ "hf-a": "div", "hf-b": "div-2" });
+    expect(second!.id).toBe("div-2");
+    expect(commitMutation).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({ targetSelector: "#div-2" }),
+      expect.anything(),
+    );
+
+    await addTo(api, first!, "hf-a");
+
+    expect(server.ids()).toEqual({ "hf-a": "div", "hf-b": "div-2" });
+    expect(first!.id).toBe("div");
+  });
+
+  it("a refused add never strips the id an overlapping saved add gave the same element", async () => {
+    const server = serveCards();
+    const [element] = mountCards();
+    let release!: () => void;
+    const held = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    server.stub(async (init, call) => {
+      if (call !== 1) return server.handle(init);
+      await held;
+      return jsonResponse({ error: "file changed" }, 409);
+    });
+    const api = renderOps(vi.fn(async () => undefined));
+
+    const refused = addTo(api, element!, "hf-a");
+    await addTo(api, element!, "hf-a");
+    release();
+    await refused;
+
+    expect(server.ids()["hf-a"]).toBeTruthy();
+    expect(element!.id).toBe(server.ids()["hf-a"]);
+  });
+
+  it("overlapping adds on siblings take the ids the file holds, never one id twice", async () => {
+    const server = serveCards();
+    const [first, second] = mountCards();
+    let release!: () => void;
+    const held = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    server.stub(async (init, call) => {
+      if (call === 1) await held;
+      return server.handle(init);
+    });
+    const api = renderOps(vi.fn(async () => undefined));
+
+    const adding = addTo(api, first!, "hf-a");
+    await addTo(api, second!, "hf-b");
+    release();
+    await adding;
+
+    const ids = server.ids();
+    expect(new Set([ids["hf-a"], ids["hf-b"]])).toEqual(new Set(["div", "div-2"]));
+    expect([first!.id, second!.id]).toEqual([ids["hf-a"], ids["hf-b"]]);
+  });
+
+  it("leaves no id when the id write never reaches the file", async () => {
+    const [element] = mountCards();
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => {
+        throw new TypeError("offline");
+      }),
+    );
+    const api = renderOps(vi.fn(async () => undefined));
+
+    await expect(addTo(api, element!, "hf-a")).rejects.toThrow("offline");
+    expect(element!.hasAttribute("id")).toBe(false);
+  });
+
+  it("leaves no id when there is no project to save it to", async () => {
+    const [element] = mountCards();
+    const api = renderOps(
+      vi.fn(async () => undefined),
+      undefined,
+      null,
+    );
+
+    await addTo(api, element!, "hf-a");
+
+    expect(element!.hasAttribute("id")).toBe(false);
+  });
+
   it("soft-reloads the preview when deleting an animation", async () => {
     const commitMutationSafely = vi.fn(async () => undefined);
     const api = renderOps(commitMutationSafely);