@hyperframes/studio 0.8.114 → 0.8.116

package/src/hooks/useProjectFileWriter.ts

@@ -6,11 +6,22 @@ import {
   StudioSaveNetworkError,
 } from "../utils/studioSaveDiagnostics";
 import { studioExpectedFileVersion, studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 export interface UseProjectFileWriterOptions {
   projectId: string | null;
 }
 
+async function fetchProjectFile(projectId: string | null, path: string, query: string) {
+  if (!projectId) throw new Error("No active project");
+  const response = await studioApiFetch(
+    `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}${query}`,
+  );
+  if (!response.ok) throw new Error(`Failed to read ${path}`);
+  const data = (await response.json()) as { content?: string; version?: string };
+  return { content: data.content, version: data.version ?? response.headers.get("etag") };
+}
+
 // The etag-guarded project-file read/write pair every Studio save path
 // shares. A host mounting hand editing outside Studio needs only this, not
 // the full file manager (file tree, editor tabs, uploads, font assets).
@@ -30,29 +41,19 @@ export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions)
 
   const readProjectFile = useCallback(
     async (path: string): Promise<string> => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`,
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = (await response.json()) as { content?: string; version?: string };
-      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return data.content;
+      const { content, version } = await fetchProjectFile(projectId, path, "");
+      if (typeof content !== "string") throw new Error(`Missing file contents for ${path}`);
+      fileVersions.set(path, version);
+      return content;
     },
     [fileVersions, projectId],
   );
 
   const readOptionalProjectFile = useCallback(
     async (path: string): Promise<string> => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = (await response.json()) as { content?: string; version?: string };
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return typeof data.content === "string" ? data.content : "";
+      const { content, version } = await fetchProjectFile(projectId, path, "?optional=1");
+      fileVersions.set(path, version);
+      return typeof content === "string" ? content : "";
     },
     [fileVersions, projectId],
   );
@@ -63,7 +64,7 @@ export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions)
       const writeProjectId = projectId;
       let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
       if (expectedVersion === undefined) {
-        const preflight = await fetch(
+        const preflight = await studioApiFetch(
           `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
         );
         if (preflight.ok) {
@@ -86,7 +87,7 @@ export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions)
         // the retry can produce a second filesystem receipt that must be suppressed independently.
         let response: Response;
         try {
-          response = await fetch(
+          response = await studioApiFetch(
             `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
             {
               method: "PUT",

package/src/hooks/useRemoveBackground.ts

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from "react";
 import { waitForMediaJob } from "../components/studioMediaJobs";
 import type { BackgroundRemovalProgress } from "../components/editor/propertyPanelTypes";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface RemoveBackgroundOptions {
   createBackgroundPlate?: boolean;
@@ -31,7 +32,7 @@ export function useRemoveBackground(
   return useCallback(
     // fallow-ignore-next-line complexity
     async (inputPath: string, options: RemoveBackgroundOptions) => {
-      const response = await fetch(
+      const response = await studioApiFetch(
         `/api/projects/${encodeURIComponent(projectId)}/media/remove-background`,
         {
           method: "POST",

package/src/hooks/useRenderClipContent.test.ts

@@ -6,6 +6,7 @@ import { afterEach, describe, expect, it } from "vitest";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
 import { AudibleVideoClipContent } from "../player/components/AudibleVideoClipContent";
+import { TextClipContent } from "../player/components/TextClipContent";
 import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
 
 function unwrapPeakMarks(node: ReactNode): ReactNode {
@@ -280,6 +281,23 @@ describe("useRenderClipContent", () => {
     expect(isValidElement(content) && content.type).toBe(AudibleVideoClipContent);
   });
 
+  it("gives a layer spanning the whole film its own frame, whatever its id", () => {
+    usePlayerStore.setState({ thumbnailMode: "adaptive" });
+    for (const id of ["waves", "background-glyphs"]) {
+      const content = renderClipContent({ id, tag: "div", start: 0, duration: 12, track: 0 }, null);
+      expect(isValidElement(content) && content.type).toBe(CompositionThumbnail);
+    }
+  });
+
+  it("draws a text layer's own words instead of capturing them", () => {
+    usePlayerStore.setState({ thumbnailMode: "adaptive" });
+    const content = renderClipContent(
+      { id: "title", tag: "h1", start: 0, duration: 12, track: 0, text: { value: "Ship it" } },
+      null,
+    );
+    expect(isValidElement(content) && content.type).toBe(TextClipContent);
+  });
+
   it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
     usePlayerStore.setState({ thumbnailMode: "adaptive" });
 

package/src/hooks/useRenderClipContent.ts

@@ -12,6 +12,7 @@ import type { TimelineClipRenderContext } from "../player/components/TimelineTyp
 import { audioPillFlags } from "../player/components/audioClipLink";
 import { AudioWaveform, rendersWaveform } from "../player/components/AudioWaveform";
 import { ImageThumbnail } from "../player/components/ImageThumbnail";
+import { TextClipContent } from "../player/components/TextClipContent";
 import { AudibleVideoClipContent } from "../player/components/AudibleVideoClipContent";
 import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
 import { clipPeaksUrl, clipSourceWindow } from "../player/components/clipPeakMap";
@@ -184,6 +185,8 @@ export function useRenderClipContent({
         return renderAudioClip(el, pid, sessionEpoch, style.label, context, elements);
       }
 
+      if (el.text) return createElement(TextClipContent, { text: el.text });
+
       // When drilled into a composition, render all inner elements via
       // CompositionThumbnail at their start time — most accurate visual.
       if (activePreviewUrl && el.duration > 0) {
@@ -207,11 +210,7 @@ export function useRenderClipContent({
         });
       }
 
-      const htmlPreviewEligible =
-        el.duration > 0 &&
-        effectiveTimelineDuration > 0 &&
-        el.duration < effectiveTimelineDuration * 0.92 &&
-        !/(backdrop|background|overlay|scrim|mask)/i.test(el.id);
+      const htmlPreviewEligible = el.duration > 0 && effectiveTimelineDuration > 0;
 
       if ((el.tag === "video" || el.tag === "img") && el.src) {
         const mediaSrc = resolveMediaPreviewUrl(el.src, pid, window.location.origin);

package/src/hooks/useSdkSession.ts

@@ -6,6 +6,7 @@ import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { PublishSdkSession } from "../utils/sdkCutover";
 import { addExternalFileReloadListener } from "./externalFileReloadBus";
 import { whenPreviewBooted } from "../player/store/playerStore";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 /**
  * Why an optional project-file read produced no usable content. `stage: "read"`
@@ -194,7 +195,7 @@ async function readProjectFileOptional(
   let res: Response;
   const fetchStarted = performance.now();
   try {
-    res = await fetch(
+    res = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
     );
   } catch {

package/src/hooks/useServerConnection.ts

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import { buildProjectHash, parseProjectIdFromHash } from "../utils/projectRouting";
 import { useMountEffect } from "./useMountEffect";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface ServerConnectionState {
   projectId: string | null;
@@ -37,7 +38,7 @@ type ProjectHashVerdict = {
 
 async function resolveHashProject(id: string): Promise<ProjectHashVerdict> {
   try {
-    const res = await fetch(`/api/projects/${encodeURIComponent(id)}`);
+    const res = await studioApiFetch(`/api/projects/${encodeURIComponent(id)}`);
     if (res.ok) return { outcome: "ok", status: res.status };
     return { outcome: res.status === 404 ? "missing" : "unknown", status: res.status };
   } catch {
@@ -72,7 +73,7 @@ function replaceProjectHash(projectId: string): void {
  */
 async function firstProjectId(): Promise<string | null> {
   try {
-    const res = await fetch("/api/projects");
+    const res = await studioApiFetch("/api/projects");
     const data = (await res.json()) as { projects?: Array<{ id?: string }> };
     return data.projects?.[0]?.id ?? null;
   } catch {
@@ -107,7 +108,7 @@ export function useServerConnection(): ServerConnectionState {
     }
 
     function tryConnect() {
-      fetch("/api/projects")
+      studioApiFetch("/api/projects")
         .then((r) => r.json())
         .then(async (data) => {
           if (cancelled) return;

package/src/hooks/useStudioSelectionPublisher.ts

@@ -3,6 +3,7 @@ import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 import { buildStudioSelectionSnapshot } from "../utils/studioSelectionSnapshot";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseStudioSelectionPublisherParams {
   projectId: string | null;
@@ -26,7 +27,7 @@ function reportSelectionPublishError(error: unknown): void {
 }
 
 function putSelection(projectId: string, selection: unknown, signal?: AbortSignal): Promise<void> {
-  return fetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
+  return studioApiFetch(`/api/projects/${encodeURIComponent(projectId)}/selection`, {
     method: "PUT",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ selection }),

package/src/hooks/useThumbnailStill.test.ts

@@ -0,0 +1,100 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { thumbnailScheduler } from "../player/lib/thumbnailScheduler";
+// By package name, as a host imports it: the test fails if the export goes.
+import { useThumbnailStill, type ThumbnailStill } from "@hyperframes/studio";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", { configurable: true, value: true });
+
+class MockImage {
+  onload: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+  naturalWidth = 320;
+  naturalHeight = 180;
+  set src(_value: string) {
+    queueMicrotask(() => this.onload?.());
+  }
+}
+
+const URL_ONE = "http://localhost:3000/api/projects/demo/thumbnail/index.html?t=1.00&revision=1";
+const originalImage = globalThis.Image;
+const originalFetch = globalThis.fetch;
+const originalCreate = URL.createObjectURL;
+const originalRevoke = URL.revokeObjectURL;
+let host: HTMLDivElement;
+let root: Root | null = null;
+let shown: ThumbnailStill | null = null;
+
+function Still({ url }: { url: string | null }) {
+  shown = useThumbnailStill(url, "demo");
+  return null;
+}
+
+const mount = (url: string | null) =>
+  act(async () => {
+    root ??= createRoot(host);
+    root.render(React.createElement(Still, { url }));
+  });
+
+beforeEach(() => {
+  globalThis.Image = MockImage as unknown as typeof Image;
+  globalThis.fetch = vi.fn(async () => new Response(new Blob(["still"]), { status: 200 }));
+  URL.createObjectURL = vi.fn(() => "blob:still");
+  URL.revokeObjectURL = vi.fn();
+  shown = null;
+  host = document.createElement("div");
+  document.body.append(host);
+});
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  thumbnailScheduler.setPreviewReloading(false);
+  thumbnailScheduler.invalidateProject("demo");
+  globalThis.Image = originalImage;
+  globalThis.fetch = originalFetch;
+  URL.createObjectURL = originalCreate;
+  URL.revokeObjectURL = originalRevoke;
+  document.body.replaceChildren();
+});
+
+describe("useThumbnailStill", () => {
+  it("hands back the still's object URL once the scheduler has loaded it", async () => {
+    await mount(URL_ONE);
+    expect(globalThis.fetch).toHaveBeenCalledWith(URL_ONE, expect.anything());
+    await vi.waitFor(() => expect(shown).toEqual({ status: "ready", url: "blob:still" }));
+  });
+
+  it("hands back the same object while nothing changes", async () => {
+    await mount(URL_ONE);
+    await vi.waitFor(() => expect(shown).toEqual({ status: "ready", url: "blob:still" }));
+    const first = shown;
+    await mount(URL_ONE);
+    expect(shown).toBe(first);
+  });
+
+  it("asks for nothing without a url", async () => {
+    await mount(null);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(shown).toEqual({ status: "loading" });
+  });
+
+  it("says failed when the still cannot load, so a host can fall back", async () => {
+    globalThis.fetch = vi.fn(async () => new Response("", { status: 500 }));
+    await mount(URL_ONE);
+    await vi.waitFor(() => expect(shown).toEqual({ status: "failed" }));
+  });
+
+  it("holds the fetch while a preview reloads, and runs it once the reload is over", async () => {
+    thumbnailScheduler.setPreviewReloading(true);
+    await mount(URL_ONE);
+    expect(globalThis.fetch).not.toHaveBeenCalled();
+    expect(shown).toEqual({ status: "loading" });
+    await act(async () => thumbnailScheduler.setPreviewReloading(false));
+    expect(globalThis.fetch).toHaveBeenCalledTimes(1);
+    await vi.waitFor(() => expect(shown).toEqual({ status: "ready", url: "blob:still" }));
+  });
+});

package/src/hooks/useThumbnailStill.ts

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { compositionThumbnailRequest } from "../player/components/CompositionThumbnail";
+import type { ThumbnailPriority } from "../player/lib/thumbnailScheduler";
+import { useThumbnailLease } from "./useThumbnailLease";
+
+export interface UseThumbnailStillOptions {
+  sessionEpoch?: number;
+  priority?: ThumbnailPriority;
+}
+
+export type ThumbnailStill =
+  | { status: "loading" }
+  | { status: "ready"; url: string }
+  | { status: "failed" };
+
+const LOADING: ThumbnailStill = Object.freeze({ status: "loading" });
+const FAILED: ThumbnailStill = Object.freeze({ status: "failed" });
+
+/** A host picture's server still through the thumbnail scheduler, so it yields to a preview reload. */
+export function useThumbnailStill(
+  url: string | null,
+  projectId: string,
+  { sessionEpoch = 0, priority = "visible" }: UseThumbnailStillOptions = {},
+): ThumbnailStill {
+  const request = useMemo(
+    () => (url ? compositionThumbnailRequest(url, projectId, { sessionEpoch, priority }) : null),
+    [priority, projectId, sessionEpoch, url],
+  );
+  const snapshot = useThumbnailLease(request);
+  const ready =
+    snapshot.status === "ready" && snapshot.value.kind === "image" ? snapshot.value.url : null;
+  return useMemo(
+    () =>
+      ready ? { status: "ready", url: ready } : snapshot.status === "error" ? FAILED : LOADING,
+    [ready, snapshot.status],
+  );
+}

package/src/hooks/useTimelineDeleteOps.test.tsx

@@ -28,6 +28,17 @@ describe("applyRippleShifts", () => {
   });
 });
 
+function stubRemoveElementsFetch(current: string, afterRemoval: string) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (input: RequestInfo | URL) => {
+      const isRemoval = String(input).includes("/file-mutations/remove-elements/");
+      const content = isRemoval ? afterRemoval : current;
+      return new Response(JSON.stringify({ changed: isRemoval, content }), { status: 200 });
+    }),
+  );
+}
+
 describe("useTimelineDeleteOps: ripple undo label", () => {
   const html = `<!DOCTYPE html><html data-composition-variables='[]'><body>
 <div data-hf-id="hf-stage" data-hf-root data-duration="6">
@@ -38,16 +49,7 @@ describe("useTimelineDeleteOps: ripple undo label", () => {
 </body></html>`;
 
   beforeEach(() => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async (input: RequestInfo | URL) => {
-        const url = String(input);
-        if (url.includes("/file-mutations/remove-element/")) {
-          return new Response(JSON.stringify({ changed: true, content: html }), { status: 200 });
-        }
-        return new Response(JSON.stringify({ content: html }), { status: 200 });
-      }),
-    );
+    stubRemoveElementsFetch(html, html);
   });
 
   afterEach(() => {
@@ -118,6 +120,23 @@ describe("useTimelineDeleteOps: ripple undo label", () => {
     );
   });
 
+  it("removes a multi-clip selection with one request, however many clips it holds", async () => {
+    const handleTimelineGroupMove = vi.fn().mockResolvedValue(undefined);
+    const { elements, getHook } = mountDeleteHarness({ handleTimelineGroupMove });
+
+    await act(async () => {
+      await getHook().handleTimelineElementsDelete(elements);
+    });
+
+    const removals = vi
+      .mocked(fetch)
+      .mock.calls.filter(([url]) => String(url).includes("/file-mutations/remove-element"));
+    expect(removals).toHaveLength(1);
+    const [, init] = removals[0] as [unknown, RequestInit];
+    const body = JSON.parse(String(init.body));
+    expect(body.targets).toHaveLength(elements.length);
+  });
+
   it("shows exactly one toast when a ripple fails to persist after a committed delete", async () => {
     const handleTimelineGroupMove = vi.fn().mockRejectedValue(new Error("persist failed"));
     const showToast = vi.fn();
@@ -162,18 +181,7 @@ describe("useTimelineDeleteOps: undo race", () => {
 </body></html>`;
 
   beforeEach(() => {
-    vi.stubGlobal(
-      "fetch",
-      vi.fn(async (input: RequestInfo | URL) => {
-        const url = String(input);
-        if (url.includes("/file-mutations/remove-element/")) {
-          return new Response(JSON.stringify({ changed: true, content: htmlAfterDeletingC }), {
-            status: 200,
-          });
-        }
-        return new Response(JSON.stringify({ content: html }), { status: 200 });
-      }),
-    );
+    stubRemoveElementsFetch(html, htmlAfterDeletingC);
   });
 
   afterEach(() => {

package/src/hooks/useTimelineDeleteOps.ts

@@ -21,6 +21,7 @@ import type {
   TimelineGroupCommitOptions,
   TimelineGroupMoveChange,
 } from "./useTimelineGroupEditing";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 /** Apply already-resolved ripple changes to the surviving elements for the
  *  optimistic store update after a delete. Pure — no IO. */
@@ -121,38 +122,32 @@ export function useTimelineDeleteOps({
             writeFile: writeProjectFile,
             recordEdit,
             rewrite: async (originalContent) => {
-              // 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) {
+              // One request removes every selected element and rewrites the file once, so a
+              // large selection is a single round trip and a single history entry.
+              const patchTargets = sameFile.map((target) => {
                 const patchTarget = buildPatchTarget(target);
                 if (!patchTarget) {
                   throw new Error(`Timeline element ${target.id} is missing a patchable target`);
                 }
-
-                const removeResponse = await fetch(
-                  buildProjectApiPath(
-                    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;
-                };
-                if (typeof removeData.content === "string") removedContent = removeData.content;
+                return patchTarget;
+              });
+              const removeResponse = await studioApiFetch(
+                buildProjectApiPath(
+                  pid,
+                  `/file-mutations/remove-elements/${encodeURIComponent(targetPath)}`,
+                ),
+                {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+                  body: JSON.stringify({ targets: patchTargets }),
+                },
+              );
+              if (!removeResponse.ok) {
+                throw new Error(`Failed to delete ${sameFile.length} clips from ${targetPath}`);
               }
+              const removeData = (await removeResponse.json()) as { content?: string };
+              const removedContent =
+                typeof removeData.content === "string" ? removeData.content : originalContent;
               // Shrink to the furthest remaining clip end, read from the post-removal source:
               // store durations are runtime-truncated.
               const deleteContentEnd = furthestClipEndFromSource(removedContent);

package/src/hooks/useTimelineEditing.test.tsx

@@ -1296,7 +1296,7 @@ describe("useTimelineEditing duration rollback on failed persist", () => {
       if (url.includes("/api/projects/p1/files/")) {
         return jsonResponse({ content: DELETE_SOURCE });
       }
-      if (url.includes("/api/projects/p1/file-mutations/remove-element/")) {
+      if (url.includes("/api/projects/p1/file-mutations/remove-elements/")) {
         return jsonResponse({ changed: true, content: DELETE_REMOVED_SOURCE });
       }
       throw new Error(`Unexpected fetch: ${url}`);

package/src/index.ts

@@ -76,6 +76,8 @@ export type { AudioWaveformProps } from "./player/components/AudioWaveform";
 export { ImageThumbnail } from "./player/components/ImageThumbnail";
 export type { ImageThumbnailProps } from "./player/components/ImageThumbnail";
 export { useRenderClipContent } from "./hooks/useRenderClipContent";
+export { useThumbnailStill } from "./hooks/useThumbnailStill";
+export type { ThumbnailStill, UseThumbnailStillOptions } from "./hooks/useThumbnailStill";
 export type { UseRenderClipContentOptions } from "./hooks/useRenderClipContent";
 export type { ThumbnailPriority } from "./player/lib/thumbnailScheduler";
 export type {
@@ -208,6 +210,8 @@ export type { DomEditZOrder } from "./components/editor/useDomEditZOrder";
 export type { ZOrderAction } from "./components/editor/canvasContextMenuZOrder";
 export type { DomEditCapabilities, DomEditSelection } from "./components/editor/domEditingTypes";
 export { useDomStyleCommit } from "./hooks/useDomStyleCommit";
+export { ColorField } from "./components/editor/propertyPanelColor";
+export { GradientField } from "./components/editor/propertyPanelFill";
 export type { UseDomStyleCommitOptions } from "./hooks/useDomStyleCommit";
 export type { DomEditCommitDeclineReason, DomEditCommitOutcome } from "./hooks/domEditCommitRunner";
 export { resolveDomEditSelection } from "./components/editor/domEditingLayers";

package/src/player/components/AudioWaveform.tsx

@@ -5,6 +5,7 @@ import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
 import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
 import { ClipFadesContext, type ClipFadeShape } from "./TimelineClipFades";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export interface AudioWaveformProps {
   audioUrl: string;
@@ -124,7 +125,7 @@ async function loadWaveform(
 }
 
 async function fetchWaveformPeaks(url: string, signal: AbortSignal): Promise<number[]> {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Waveform request failed (${response.status})`);
   const data: unknown = await response.json();
   if (
@@ -140,7 +141,7 @@ async function fetchWaveformPeaks(url: string, signal: AbortSignal): Promise<num
 }
 
 async function decodeWaveformPeaks(url: string, signal: AbortSignal): Promise<number[]> {
-  const response = await fetch(url, { signal });
+  const response = await studioApiFetch(url, { signal });
   if (!response.ok) throw new Error(`Audio request failed (${response.status})`);
   const buffer = await response.arrayBuffer();
   if (signal.aborted) throw new DOMException("Aborted", "AbortError");

package/src/player/components/AutomationSelectionMenu.tsx

@@ -8,6 +8,7 @@ import { memo } from "react";
 import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { AUTOMATION_SHAPES, type AutomationShapeId } from "./automationShapes";
+import { menuClasses } from "../../components/ui/menuStyle";
 
 interface AutomationSelectionMenuProps {
   x: number;
@@ -45,7 +46,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
       // portaled to `document.body`, but the ruler's sticky header sits at z-70
       // in the SAME root stacking context, so a z-50 menu opened near the top of
       // the timeline is painted through by the ruler and the playhead.
-      className="hf-automation-menu fixed z-200 min-w-[140px] rounded-sm border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      className={`${menuClasses.panel} hf-automation-menu fixed z-200 min-w-[140px]`}
       style={{ left: adjustedX, top: adjustedY }}
     >
       {AUTOMATION_SHAPES.map((shape) => (
@@ -61,7 +62,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
           {shape.label}
         </button>
       ))}
-      <div className="my-1 border-t border-panel-border-input" />
+      <div className={menuClasses.divider} />
       <button
         type="button"
         className={row}