@hyperframes/studio 0.8.107 → 0.8.108

package/src/hooks/useFreezeFrame.ts

@@ -0,0 +1,121 @@
+import { useCallback, useRef } from "react";
+import type { TimelineElement } from "../player";
+import { toAuthoredStart } from "../player/store/timelineElement";
+import { buildPatchTarget } from "../utils/timelineElementSplit";
+import { buildProjectApiPath } from "../utils/projectRouting";
+import { markStudioWriteToken } from "../utils/studioFileVersion";
+import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
+import type { RecordEditInput } from "../utils/studioFileHistory";
+
+type ProjectFileWriter = (path: string, content: string, expectedContent?: string) => Promise<void>;
+
+interface FreezeFrameResponse {
+  before: string;
+  after: string;
+  version: string;
+}
+
+function isFreezeFrameResponse(value: unknown): value is FreezeFrameResponse {
+  if (typeof value !== "object" || value === null) return false;
+  const body: Partial<Record<keyof FreezeFrameResponse, unknown>> = value;
+  return (
+    typeof body.before === "string" &&
+    typeof body.after === "string" &&
+    typeof body.version === "string"
+  );
+}
+
+function errorOf(value: unknown): string | null {
+  if (typeof value !== "object" || value === null || !("error" in value)) return null;
+  return typeof value.error === "string" ? value.error : null;
+}
+
+async function readVersion(projectId: string, path: string): Promise<string> {
+  const response = await fetch(
+    buildProjectApiPath(projectId, `/files/${encodeURIComponent(path)}`),
+  );
+  const body: unknown = await response.json().catch(() => null);
+  const version =
+    typeof body === "object" && body !== null && "version" in body ? body.version : null;
+  if (!response.ok || typeof version !== "string") throw new Error(`Could not read ${path}`);
+  return version;
+}
+
+/** POST the freeze to studio-server, which extracts the still and writes the whole edit at once. */
+export async function requestFreezeFrame(input: {
+  projectId: string;
+  path: string;
+  element: TimelineElement;
+  playhead: number;
+}): Promise<FreezeFrameResponse> {
+  const target = buildPatchTarget(input.element);
+  if (!target) throw new Error("This clip has no id to freeze it by");
+  const expectedVersion = await readVersion(input.projectId, input.path);
+  const transactionToken = `freeze:${crypto.randomUUID()}`;
+  markStudioWriteToken(transactionToken);
+  const response = await fetch(
+    buildProjectApiPath(input.projectId, "/file-mutations/freeze-frame"),
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-Hyperframes-Write-Token": transactionToken,
+      },
+      body: JSON.stringify({
+        path: input.path,
+        expectedVersion,
+        target,
+        playhead: toAuthoredStart(input.element, input.playhead),
+        transactionToken,
+      }),
+    },
+  );
+  const body: unknown = await response.json().catch(() => null);
+  if (!response.ok || !isFreezeFrameResponse(body)) {
+    throw new Error(errorOf(body) ?? `Freeze frame failed (${response.status})`);
+  }
+  return body;
+}
+
+interface UseFreezeFrameOptions {
+  projectId: string | null;
+  activeCompPath: string | null;
+  showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile: ProjectFileWriter;
+  observeProjectFileVersion?: (path: string, version: string | null) => void;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  reloadPreview: () => void;
+  forceReloadSdkSession?: () => void;
+  isRecordingRef?: React.RefObject<boolean>;
+}
+
+export function useFreezeFrame(options: UseFreezeFrameOptions) {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  return useCallback(async (element: TimelineElement, playhead: number) => {
+    const opts = optionsRef.current;
+    if (opts.isRecordingRef?.current) {
+      opts.showToast("Cannot edit timeline while recording", "error");
+      return;
+    }
+    const projectId = opts.projectId;
+    if (!projectId) return;
+    const path = element.sourceFile || opts.activeCompPath || "index.html";
+    try {
+      await serializeStudioFileMutations(opts.writeProjectFile, [path], async () => {
+        const result = await requestFreezeFrame({ projectId, path, element, playhead });
+        await opts.recordEdit({
+          label: "Freeze frame",
+          files: { [path]: { before: result.before, after: result.after } },
+        });
+        opts.observeProjectFileVersion?.(path, result.version);
+      });
+      opts.forceReloadSdkSession?.();
+      opts.reloadPreview();
+      opts.showToast(`Froze a 2 s still at ${playhead.toFixed(2)}s`, "info");
+    } catch (error) {
+      opts.showToast(error instanceof Error ? error.message : "Freeze frame failed", "error");
+    }
+  }, []);
+}

package/src/hooks/usePersistentEditHistory.test.ts

@@ -243,8 +243,14 @@ it("a step that cannot reach the server says so", async () => {
   });
 });
 
-it("predicts a step from what this tab wrote, and not while a claim or step may have moved the history", async () => {
+it("predicts a step from what this tab wrote as soon as its save ends, and not while a claim or step may have moved the history", async () => {
   const { hook, save, readFile } = await studio();
+  const real = globalThis.fetch;
+  const slowView = (url: string, init?: RequestInit) =>
+    url.endsWith("/history")
+      ? new Promise((r) => setTimeout(r, 50)).then(() => real(url, init))
+      : real(url, init);
+  vi.stubGlobal("fetch", slowView);
   save("B");
   const claim = hook().recordEdit({
     label: "Moved Title",
@@ -252,11 +258,8 @@ it("predicts a step from what this tab wrote, and not while a claim or step may
   });
   expect(hook().predict("undo")).toBeNull();
   await act(() => claim);
-  const predicted = await vi.waitFor(() => {
-    const next = hook().predict("undo");
-    expect(next?.files).toEqual({ "index.html": { previous: "B", restored: "A" } });
-    return next!;
-  });
+  const predicted = hook().predict("undo")!;
+  expect(predicted?.files).toEqual({ "index.html": { previous: "B", restored: "A" } });
 
   hook().noteOutsideChange();
   expect(hook().predict("undo")).toBeNull();

package/src/hooks/usePersistentEditHistory.ts

@@ -223,7 +223,7 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
       const claimed = claimHeld(reply, label);
       if (claimed) own.remember(claimed, files);
       heldClaimRef.current = claimed && coalesceKey ? { paths, at: Date.now() } : null;
-      void refresh();
+      await refresh();
     },
     [projectId, refresh, own],
   );

package/src/hooks/useRazorSplit.ts

@@ -6,6 +6,7 @@ import { trackStudioRazorSplit } from "../telemetry/events";
 import { canSplitElementAt, selectSplittableElements } from "../utils/timelineElementSplit";
 import { buildAtomicCutIntents, runAtomicCutTransaction } from "../utils/razorSplitTransaction";
 import type { RecordEditInput } from "./timelineEditingHelpers";
+import { useFreezeFrame } from "./useFreezeFrame";
 
 interface UseRazorSplitOptions {
   projectId: string | null;
@@ -135,5 +136,17 @@ export function useRazorSplit({
     [isRecordingRef, runCut, showToast],
   );
 
-  return { handleRazorSplit, handleRazorSplitAll };
+  const handleFreezeFrame = useFreezeFrame({
+    projectId,
+    activeCompPath,
+    showToast,
+    writeProjectFile,
+    observeProjectFileVersion,
+    recordEdit,
+    reloadPreview,
+    forceReloadSdkSession,
+    isRecordingRef,
+  });
+
+  return { handleRazorSplit, handleRazorSplitAll, handleFreezeFrame };
 }

package/src/hooks/useRenderClipContent.test.ts

@@ -5,6 +5,14 @@ import { createRoot } from "react-dom/client";
 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 { ClipPeakMarks } from "../player/components/ClipPeakMarks";
+
+function unwrapPeakMarks(node: ReactNode): ReactNode {
+  return isValidElement<{ children?: ReactNode }>(node) && node.type === ClipPeakMarks
+    ? node.props.children
+    : node;
+}
 import type { TimelineClipRenderContext } from "../player/components/TimelineTypes";
 import { usePlayerStore, type TimelineElement } from "../player/store/playerStore";
 import { buildCompositionThumbnailUrl } from "../player/components/CompositionThumbnail";
@@ -93,9 +101,51 @@ describe("useRenderClipContent", () => {
       root.render(React.createElement(Harness));
     });
     act(() => root.unmount());
+    return unwrapPeakMarks(content);
+  }
+
+  function renderRaw(el: TimelineElement): ReactNode {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    let content: ReactNode = null;
+    function Harness() {
+      const render = useRenderClipContent({
+        projectIdRef: { current: "my-project" },
+        compIdToSrc: new Map(),
+        activePreviewUrl: null,
+        effectiveTimelineDuration: 12,
+      });
+      content = render(el, { clip: "#222", label: "#fff" });
+      return null;
+    }
+    act(() => root.render(React.createElement(Harness)));
+    act(() => root.unmount());
     return content;
   }
 
+  it("wraps a clip's waveform in peak marks at its own gain over its played source window", () => {
+    const content = renderRaw({
+      id: "voiceover",
+      tag: "audio",
+      start: 1,
+      duration: 4,
+      track: 1,
+      src: "assets/voiceover.mp3",
+      playbackStart: 2,
+      playbackRate: 1.5,
+      volume: 2,
+    });
+    expect(isValidElement(content) && content.type).toBe(ClipPeakMarks);
+    if (isValidElement<Record<string, unknown>>(content)) {
+      expect(content.props).toMatchObject({
+        peaksUrl: "/api/projects/my-project/peaks/assets/voiceover.mp3",
+        sourceWindow: { mediaStart: 2, sourceSpan: 6 },
+        gain: 2,
+      });
+    }
+  });
+
   it("renders audio clips as waveforms even when a composition preview URL is active", () => {
     const content = renderClipContent({
       id: "voiceover",
@@ -176,6 +226,58 @@ describe("useRenderClipContent", () => {
     }
   });
 
+  it("draws a waveform strip under the thumbnails of a video with sound", () => {
+    usePlayerStore.setState({ thumbnailMode: "adaptive" });
+    const content = renderClipContent(
+      {
+        id: "talk",
+        tag: "video",
+        start: 0,
+        duration: 4,
+        track: 0,
+        src: "talk.mp4",
+        hasAudio: true,
+      },
+      null,
+    );
+    expect(isValidElement<{ thumbnail: ReactNode; waveform: ReactNode }>(content)).toBe(true);
+    if (!isValidElement<{ thumbnail: ReactNode; waveform: ReactNode }>(content)) return;
+    expect(content.type).toBe(AudibleVideoClipContent);
+    const { thumbnail } = content.props;
+    const waveform = unwrapPeakMarks(content.props.waveform);
+    expect(isValidElement(thumbnail) && thumbnail.type).toBe(VideoThumbnail);
+    expect(isValidElement<{ waveformUrl: string }>(waveform) && waveform.props.waveformUrl).toBe(
+      "/api/projects/my-project/waveform/talk.mp4",
+    );
+  });
+
+  it("keeps a muted or silent video to thumbnails only", () => {
+    usePlayerStore.setState({ thumbnailMode: "adaptive" });
+    for (const extra of [{ hasAudio: true, muted: true }, { hasAudio: false }]) {
+      const content = renderClipContent(
+        { id: "b", tag: "video", start: 0, duration: 4, track: 0, src: "b.mp4", ...extra },
+        null,
+      );
+      expect(isValidElement(content) && content.type).toBe(VideoThumbnail);
+    }
+  });
+
+  it("still shows the sound strip when thumbnails are off", () => {
+    const content = renderClipContent(
+      {
+        id: "talk",
+        tag: "video",
+        start: 0,
+        duration: 4,
+        track: 0,
+        src: "talk.mp4",
+        hasAudio: true,
+      },
+      null,
+    );
+    expect(isValidElement(content) && content.type).toBe(AudibleVideoClipContent);
+  });
+
   it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
     usePlayerStore.setState({ thumbnailMode: "adaptive" });
 

package/src/hooks/useRenderClipContent.ts

@@ -1,4 +1,5 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
+import { resolvePreviewRelative } from "../utils/previewRelativePath";
 import { useCallback, type ReactNode } from "react";
 import { createElement } from "react";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
@@ -11,6 +12,9 @@ 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 { AudibleVideoClipContent } from "../player/components/AudibleVideoClipContent";
+import { ClipPeakMarks } from "../player/components/ClipPeakMarks";
+import { clipHasSound } from "../player/components/clipMenuNormalize";
 import { encodePreviewPath, resolveMediaPreviewUrl } from "../player/components/thumbnailUtils";
 import { usePlayerStore } from "../player/store/playerStore";
 import { thumbnailRevisionOf } from "../player/store/thumbnailSlice";
@@ -33,24 +37,6 @@ export function normalizeCompositionSrc(
   return compSrc;
 }
 
-/** Resolve a media src to its project-relative preview path, or null. */
-function resolvePreviewRelative(
-  src: string | undefined,
-  pid: string,
-  origin: string,
-): string | null {
-  if (!src) return null;
-  try {
-    const parsed = new URL(src, origin);
-    const base = new URL(buildProjectApiPath(pid, `/preview/`), origin).pathname;
-    return parsed.pathname.startsWith(base)
-      ? decodeURIComponent(parsed.pathname.slice(base.length))
-      : null;
-  } catch {
-    return null;
-  }
-}
-
 /**
  * The trimmed source slice as start/end fractions (0–1) of the source, so the
  * waveform can window its peaks to the clip edges. Undefined when the source
@@ -88,7 +74,7 @@ function renderAudioClip(
     ? buildProjectApiPath(pid, `/waveform/${encodedRelative}`)
     : undefined;
   const { start, end } = trimFractions(el);
-  return createElement(AudioWaveform, {
+  const waveform = createElement(AudioWaveform, {
     audioUrl,
     waveformUrl,
     label: "",
@@ -100,6 +86,27 @@ function renderAudioClip(
     priority: context.priority,
     ...audioPillFlags(el, elements),
   });
+  return createElement(
+    ClipPeakMarks,
+    {
+      peaksUrl: encodedRelative ? buildProjectApiPath(pid, `/peaks/${encodedRelative}`) : undefined,
+      sourceWindow: {
+        mediaStart: el.playbackStart ?? 0,
+        sourceSpan: el.duration * (el.playbackRate ?? 1),
+      },
+      gain: el.volume ?? 1,
+    },
+    waveform,
+  );
+}
+
+function withSoundStrip(
+  el: TimelineElement,
+  thumbnail: ReactNode,
+  waveform: () => ReactNode,
+): ReactNode {
+  if (el.tag !== "video" || !clipHasSound(el)) return thumbnail;
+  return createElement(AudibleVideoClipContent, { thumbnail, waveform: waveform() });
 }
 
 export interface UseRenderClipContentOptions {
@@ -134,10 +141,9 @@ export function useRenderClipContent({
 
       // Thumbnail generation disabled (perf) -> plain clip bars. Audio still shows
       // its waveform (cheap, not a frame thumbnail). Toggle: timeline toolbar.
+      const waveform = () => renderAudioClip(el, pid, sessionEpoch, style.label, context, elements);
       if (effectiveMode === "hidden") {
-        return rendersWaveform(el)
-          ? renderAudioClip(el, pid, sessionEpoch, style.label, context, elements)
-          : null;
+        return rendersWaveform(el) ? waveform() : withSoundStrip(el, null, waveform);
       }
 
       let compSrc = el.compositionSrc;
@@ -222,7 +228,7 @@ export function useRenderClipContent({
             rich: context.rich,
           });
         }
-        return createElement(VideoThumbnail, {
+        const thumbnail = createElement(VideoThumbnail, {
           videoSrc: mediaSrc,
           label: "",
           labelColor: style.label,
@@ -233,6 +239,7 @@ export function useRenderClipContent({
           sessionEpoch,
           priority: context.priority,
         });
+        return withSoundStrip(el, thumbnail, waveform);
       }
 
       if (htmlPreviewEligible) {

package/src/hooks/useTimelineEditing.ts

@@ -492,8 +492,7 @@ export function useTimelineEditing({
     });
 
   const handleBlockedTimelineEdit = useBlockedTimelineEditToast(showToast);
-
-  const { handleRazorSplit, handleRazorSplitAll } = useRazorSplit({
+  const { handleRazorSplit, handleRazorSplitAll, handleFreezeFrame } = useRazorSplit({
     projectId,
     activeCompPath,
     showToast,
@@ -575,6 +574,7 @@ export function useTimelineEditing({
     ),
     handleTimelineElementSplit: trackedRazorSplit,
     handleRazorSplit: trackedRazorSplit,
+    handleFreezeFrame: track(guard((element) => [element], handleFreezeFrame)),
     // Same selection the handler itself splits (useRazorSplit.ts).
     handleRazorSplitAll: track(
       guard(

package/src/index.ts

@@ -175,6 +175,7 @@ export { TimelineHistoryButtons } from "./components/TimelineHistoryButtons";
 export type { TimelineHistoryButtonsProps } from "./components/TimelineHistoryButtons";
 export { AudioMeterStrip } from "./components/nle/AudioMeterStrip";
 export type { AudioMeterStripProps } from "./components/nle/AudioMeterStrip";
+export { useAudioMetersVisible } from "./utils/audioMeterVisibility";
 export { useClipboard } from "./hooks/useClipboard";
 export type { UseClipboardOptions } from "./hooks/useClipboard";
 

package/src/player/components/AudibleVideoClipContent.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react";
+
+/** Share of the clip height the sound strip takes under a video's thumbnails. */
+const AUDIBLE_VIDEO_WAVE_SHARE = 0.38;
+
+/** A video that carries sound: thumbnails on top, its waveform strip along the bottom. */
+export function AudibleVideoClipContent({
+  thumbnail,
+  waveform,
+}: {
+  thumbnail: ReactNode;
+  waveform: ReactNode;
+}) {
+  const waveHeight = `${AUDIBLE_VIDEO_WAVE_SHARE * 100}%`;
+  return (
+    <div className="relative h-full w-full" data-testid="audible-video-clip">
+      <div className="absolute inset-x-0 top-0" style={{ bottom: waveHeight }}>
+        {thumbnail}
+      </div>
+      <div
+        className="absolute inset-x-0 bottom-0 bg-black/30"
+        data-testid="audible-video-wave"
+        style={{ height: waveHeight }}
+      >
+        {waveform}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import type { TimelineElement } from "../store/playerStore";
+import { usePreviewIframeStore } from "../store/previewIframeStore";
+import { ClipBadges } from "./ClipBadges";
+
+Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
+  configurable: true,
+  value: true,
+});
+
+let root: Root | null = null;
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  usePreviewIframeStore.getState().setIframe(null);
+  document.body.innerHTML = "";
+});
+
+const talk: TimelineElement = {
+  id: "talk",
+  domId: "talk",
+  tag: "video",
+  start: 0,
+  duration: 6,
+  track: 0,
+  hasAudio: true,
+};
+
+function render(el: TimelineElement) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  act(() => root?.render(<ClipBadges el={el} />));
+}
+
+const labels = () =>
+  Array.from(document.querySelectorAll("[data-badge]")).map(
+    (badge) => `${badge.getAttribute("data-badge")}:${badge.textContent}`,
+  );
+
+function mountPreview(html: string): Document {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("no iframe document");
+  doc.body.innerHTML = html;
+  usePreviewIframeStore.getState().setIframe(iframe);
+  return doc;
+}
+
+describe("ClipBadges", () => {
+  it("renders nothing for an untouched clip", () => {
+    render(talk);
+    expect(document.querySelector("[data-testid='clip-badges']")).toBeNull();
+  });
+
+  it("falls back to the store's volume without a preview", () => {
+    render({ ...talk, volume: 1.8 });
+    expect(labels()).toEqual(["volume:180%"]);
+  });
+
+  it("reads the live node and follows an agent's attribute edit", async () => {
+    const doc = mountPreview(
+      `<video id="talk" data-has-audio="true" data-link="talk-pair" style="clip-path: inset(10px)"></video>`,
+    );
+    render(talk);
+    expect(labels()).toEqual(["link:🔗", "crop:Crop"]);
+    const node = doc.getElementById("talk");
+    await act(async () => {
+      node?.setAttribute("data-color-grading", '{"preset":"warm-daylight","intensity":1}');
+      node?.setAttribute("data-volume", "0.6");
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(labels()).toEqual(["link:🔗", "look:Warm daylight", "crop:Crop", "more:+1"]);
+    expect(document.querySelector("[data-badge='more']")?.getAttribute("title")).toBe("60%");
+  });
+});

package/src/player/components/ClipBadges.tsx

@@ -0,0 +1,67 @@
+import { memo } from "react";
+import type { TimelineElement } from "../store/playerStore";
+import { readClipBadges, splitVisibleBadges, type ClipBadge } from "./clipToolAttrs";
+import { useClipToolState } from "./useClipToolState";
+
+function SpeakerGlyph({ muted }: { muted: boolean }) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 16 16" aria-hidden="true">
+      <path d="M2 6h3l4-3v10l-4-3H2z" fill="currentColor" />
+      {muted ? (
+        <path d="M11 6l4 4M15 6l-4 4" stroke="currentColor" strokeWidth="1.4" />
+      ) : (
+        <path
+          d="M11 5.5a3.5 3.5 0 0 1 0 5M12.5 3.5a6 6 0 0 1 0 9"
+          stroke="currentColor"
+          fill="none"
+          strokeWidth="1.4"
+        />
+      )}
+    </svg>
+  );
+}
+
+function BadgeContent({ badge }: { badge: ClipBadge }) {
+  if (badge.kind === "link") return <span aria-hidden="true">🔗</span>;
+  if (badge.kind === "volume") {
+    const muted = badge.label === "Muted";
+    return (
+      <>
+        <SpeakerGlyph muted={muted} />
+        {muted ? null : <span>{badge.label}</span>}
+      </>
+    );
+  }
+  return <span>{badge.label}</span>;
+}
+
+const BADGE_CLASS =
+  "inline-flex items-center gap-0.5 rounded-[3px] border border-white/20 bg-black/55 px-1 text-[9px] leading-[14px] text-white/90 whitespace-nowrap";
+
+/** What is applied to a clip, read from its attributes: a link badge, then at most two more and `+N`. */
+export const ClipBadges = memo(function ClipBadges({ el }: { el: TimelineElement }) {
+  const state = useClipToolState(el);
+  const { visible, hidden } = splitVisibleBadges(readClipBadges(state));
+  if (visible.length === 0) return null;
+  return (
+    <span
+      className="pointer-events-none absolute right-1.5 top-0.5 z-[3] flex gap-1"
+      data-testid="clip-badges"
+    >
+      {visible.map((badge) => (
+        <span key={badge.kind} className={BADGE_CLASS} title={badge.label} data-badge={badge.kind}>
+          <BadgeContent badge={badge} />
+        </span>
+      ))}
+      {hidden.length > 0 && (
+        <span
+          className={`${BADGE_CLASS} pointer-events-auto`}
+          title={hidden.map((badge) => badge.label).join(", ")}
+          data-badge="more"
+        >
+          +{hidden.length}
+        </span>
+      )}
+    </span>
+  );
+});

package/src/player/components/ClipContextMenu.tsx

@@ -5,6 +5,8 @@ import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 import { useMenuKeyboardNav } from "./menuKeyboardNav";
 import type { TimelineClipMenuItem } from "./TimelineTypes";
+import { ClipMenuToolItems } from "./clipMenuToolItems";
+import { ClipMenuAudioItems } from "./clipMenuAudioItems";
 
 interface ClipContextMenuProps {
   x: number;
@@ -144,10 +146,18 @@ export const ClipContextMenu = memo(function ClipContextMenu({
             <span>{splitLabel}</span>
             <span className="text-neutral-500 text-[10px] ml-3">S</span>
           </button>
+          <ClipMenuToolItems
+            group="time"
+            element={element}
+            currentTime={currentTime}
+            onClose={onClose}
+          />
           <div className="my-1 border-t border-neutral-700/60" />
         </>
       )}
 
+      <ClipMenuAudioItems element={element} onClose={onClose} />
+
       {(onCopy || onPaste || onDuplicate) && (
         <>
           {onCopy && (
@@ -198,6 +208,18 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         </>
       )}
 
+      <ClipMenuToolItems
+        group="sound"
+        element={element}
+        currentTime={currentTime}
+        onClose={onClose}
+      />
+      <ClipMenuToolItems
+        group="picture"
+        element={element}
+        currentTime={currentTime}
+        onClose={onClose}
+      />
       <button
         type="button"
         role="menuitem"