@hyperframes/studio 0.8.107 → 0.8.109

package/src/player/components/clipMenuToolItems.tsx

@@ -0,0 +1,233 @@
+import { useRef, useState, type KeyboardEvent } from "react";
+import { HF_AUDIO_FX_ATTR } from "@hyperframes/core/audio-fx";
+import { HF_COLOR_GRADING_ATTR } from "@hyperframes/core/color-grading";
+import type { TimelineElement } from "../store/playerStore";
+import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
+import { useCropPresetBarStore } from "../../components/editor/cropPresetStore";
+import {
+  CHARACTER_CHOICES,
+  LOOK_CHOICES,
+  VOICE_CHOICES,
+  activeLook,
+  activeVoicePreset,
+  chainWithVoicePreset,
+  lookAttrValue,
+  type ClipToolChoice,
+} from "./clipToolAttrs";
+import { useClipToolState } from "./useClipToolState";
+
+export type ClipMenuToolGroup = "time" | "sound" | "picture";
+
+interface ClipMenuToolItemsProps {
+  group: ClipMenuToolGroup;
+  element: TimelineElement;
+  currentTime: number;
+  onClose: () => void;
+}
+
+const ROW_CLASS =
+  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none focus-visible:bg-neutral-800 text-neutral-300 hover:bg-neutral-800 cursor-pointer";
+const DISABLED_ROW_CLASS =
+  "w-full flex items-center justify-between px-3 py-1.5 text-xs text-left outline-none text-neutral-600 cursor-not-allowed";
+const SUBMENU_WIDTH = 170;
+
+interface ChoiceSection {
+  heading?: string;
+  choices: readonly ClipToolChoice[];
+}
+
+function focusSibling(menu: HTMLElement | null, step: number): void {
+  if (!menu) return;
+  const items = Array.from(menu.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]'));
+  const index = items.findIndex((item) => item === document.activeElement);
+  items[(index + step + items.length) % items.length]?.focus();
+}
+
+function ChoiceSubmenu({
+  label,
+  sections,
+  activeId,
+  onPick,
+}: {
+  label: string;
+  sections: readonly ChoiceSection[];
+  activeId: string | null;
+  onPick: (id: string | null) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [flipLeft, setFlipLeft] = useState(false);
+  const rowRef = useRef<HTMLButtonElement | null>(null);
+  const submenuRef = useRef<HTMLDivElement | null>(null);
+
+  const show = (focusFirst: boolean) => {
+    const rect = rowRef.current?.getBoundingClientRect();
+    setFlipLeft(rect ? rect.right + SUBMENU_WIDTH > window.innerWidth : false);
+    setOpen(true);
+    if (focusFirst) requestAnimationFrame(() => focusSibling(submenuRef.current, 1));
+  };
+
+  const onSubmenuKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      event.stopPropagation();
+      focusSibling(submenuRef.current, event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+      rowRef.current?.focus();
+    }
+  };
+
+  const choiceRow = (id: string | null, text: string) => (
+    <button
+      key={id ?? "none"}
+      type="button"
+      role="menuitemradio"
+      aria-checked={activeId === id}
+      className={ROW_CLASS}
+      onClick={() => onPick(id)}
+    >
+      <span className="flex items-center gap-1.5">
+        <span aria-hidden="true" className="w-3 text-center">
+          {activeId === id ? "✓" : ""}
+        </span>
+        {text}
+      </span>
+    </button>
+  );
+
+  return (
+    <div className="relative" onMouseEnter={() => show(false)} onMouseLeave={() => setOpen(false)}>
+      <button
+        ref={rowRef}
+        type="button"
+        role="menuitem"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className={ROW_CLASS}
+        onClick={() => show(true)}
+        onKeyDown={(event) => {
+          if (event.key !== "ArrowRight") return;
+          event.preventDefault();
+          show(true);
+        }}
+      >
+        <span>{label}</span>
+        <span className="text-neutral-500 text-[10px] ml-3">▸</span>
+      </button>
+      {open && (
+        <div
+          ref={submenuRef}
+          role="menu"
+          aria-label={label}
+          className="absolute top-0 z-10 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1"
+          style={{ width: SUBMENU_WIDTH, ...(flipLeft ? { right: "100%" } : { left: "100%" }) }}
+          onKeyDown={onSubmenuKeyDown}
+        >
+          {choiceRow(null, "None")}
+          {sections.map((section, index) => (
+            <div key={section.heading ?? index}>
+              {section.heading && (
+                <>
+                  <div className="my-1 border-t border-neutral-700/60" />
+                  <div className="px-3 py-1 text-[9px] uppercase tracking-wide text-neutral-500">
+                    {section.heading}
+                  </div>
+                </>
+              )}
+              {section.choices.map((choice) => choiceRow(choice.id, choice.label))}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+const VOICE_SECTIONS: readonly ChoiceSection[] = [
+  { choices: VOICE_CHOICES },
+  { heading: "Character", choices: CHARACTER_CHOICES },
+];
+const LOOK_SECTIONS: readonly ChoiceSection[] = [{ choices: LOOK_CHOICES }];
+
+function isPictureClip(tag: string): boolean {
+  return tag === "video" || tag === "img";
+}
+
+function FreezeFrameItem({ element, currentTime, onClose }: Omit<ClipMenuToolItemsProps, "group">) {
+  const { onFreezeFrame } = useTimelineEditContextOptional();
+  if (!onFreezeFrame || element.tag.trim().toLowerCase() !== "video") return null;
+  const inside = currentTime > element.start && currentTime < element.start + element.duration;
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      className={inside ? ROW_CLASS : DISABLED_ROW_CLASS}
+      disabled={!inside}
+      onClick={() => {
+        void onFreezeFrame(element, currentTime);
+        onClose();
+      }}
+    >
+      <span>{inside ? "Freeze frame" : "Freeze frame (move playhead inside clip)"}</span>
+    </button>
+  );
+}
+
+/** Freeze (time), Voice (sound), Look and Crop (picture). */
+export function ClipMenuToolItems(props: ClipMenuToolItemsProps) {
+  if (props.group === "time") return <FreezeFrameItem {...props} />;
+  return <ClipMenuAttributeItems {...props} />;
+}
+
+function ClipMenuAttributeItems({ group, element, onClose }: ClipMenuToolItemsProps) {
+  const { onSetElementAttributeQuiet } = useTimelineEditContextOptional();
+  const state = useClipToolState(element);
+  const openCropBar = useCropPresetBarStore((s) => s.open);
+  if (!onSetElementAttributeQuiet) return null;
+
+  const write = (attr: string, value: string | null, label: string) => {
+    void onSetElementAttributeQuiet(element, attr, value, label);
+    onClose();
+  };
+
+  if (group === "sound") {
+    if (!state.hasSound) return null;
+    return (
+      <>
+        <ChoiceSubmenu
+          label="Voice"
+          sections={VOICE_SECTIONS}
+          activeId={activeVoicePreset(state.fxChain)}
+          onPick={(id) =>
+            write(HF_AUDIO_FX_ATTR, chainWithVoicePreset(state.fxChain, id), "Voice preset")
+          }
+        />
+      </>
+    );
+  }
+
+  if (!isPictureClip(state.tag)) return null;
+  return (
+    <>
+      <ChoiceSubmenu
+        label="Look"
+        sections={LOOK_SECTIONS}
+        activeId={activeLook(state.colorGrading)}
+        onPick={(id) => write(HF_COLOR_GRADING_ATTR, lookAttrValue(id), "Look")}
+      />
+      <button
+        type="button"
+        role="menuitem"
+        className={ROW_CLASS}
+        onClick={() => {
+          openCropBar({ hfId: element.hfId, id: element.domId ?? element.id });
+          onClose();
+        }}
+      >
+        <span>Crop</span>
+      </button>
+    </>
+  );
+}

package/src/player/components/clipPeakRuns.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { clipPeakRuns } from "./clipPeakRuns";
+
+const map = (bins: number[]) => ({ binSeconds: 1, bins });
+
+describe("clipPeakRuns", () => {
+  it("marks bins at or above -1 dBFS after the clip's gain and names the loudest", () => {
+    const { runs, peakDbfs } = clipPeakRuns(
+      map([0.1, 0.95, 0.99, 0.2, 0.9]),
+      { mediaStart: 0, sourceSpan: 5 },
+      1,
+    );
+    expect(runs).toEqual([
+      { from: 0.2, to: 0.6 },
+      { from: 0.8, to: 1 },
+    ]);
+    expect(peakDbfs).toBeCloseTo(20 * Math.log10(0.99), 6);
+  });
+
+  it("puts nothing on a -12 dBFS clip, and marks it once boosted by +12 dB", () => {
+    const quiet = map([0.25, 0.25]);
+    expect(clipPeakRuns(quiet, { mediaStart: 0, sourceSpan: 2 }, 1)).toEqual({
+      runs: [],
+      peakDbfs: null,
+    });
+    expect(clipPeakRuns(quiet, { mediaStart: 0, sourceSpan: 2 }, 4).runs).toHaveLength(1);
+  });
+
+  it("only reads the trimmed window, positioned within the clip", () => {
+    const { runs } = clipPeakRuns(map([1, 0, 0, 1, 0]), { mediaStart: 2, sourceSpan: 2 }, 1);
+    expect(runs).toEqual([{ from: 0.5, to: 1 }]);
+  });
+
+  it("is empty for a muted clip or an empty window", () => {
+    expect(clipPeakRuns(map([1]), { mediaStart: 0, sourceSpan: 1 }, 0).runs).toEqual([]);
+    expect(clipPeakRuns(map([1]), { mediaStart: 0, sourceSpan: 0 }, 1).runs).toEqual([]);
+  });
+});

package/src/player/components/clipPeakRuns.ts

@@ -0,0 +1,59 @@
+import { EXPORT_PEAK_CEILING } from "../../utils/exportPeakCeiling";
+
+export interface PeakMap {
+  binSeconds: number;
+  bins: number[];
+}
+
+export interface ClipSourceWindow {
+  mediaStart: number;
+  sourceSpan: number;
+}
+
+export interface ClipPeakMarkRuns {
+  runs: Array<{ from: number; to: number }>;
+  peakDbfs: number | null;
+}
+
+/**
+ * Where, as fractions of the clip, its source at the clip's own gain reaches the
+ * export ceiling, and the loudest point when it does. Adjacent hot bins merge.
+ */
+export function clipPeakRuns(
+  map: PeakMap,
+  window: ClipSourceWindow,
+  gain: number,
+): ClipPeakMarkRuns {
+  const runs: ClipPeakMarkRuns["runs"] = [];
+  if (!(window.sourceSpan > 0) || !(map.binSeconds > 0) || !(gain > 0))
+    return { runs, peakDbfs: null };
+  const first = Math.max(0, Math.floor(window.mediaStart / map.binSeconds));
+  const last = Math.min(
+    map.bins.length,
+    Math.ceil((window.mediaStart + window.sourceSpan) / map.binSeconds),
+  );
+  const toFraction = (bin: number) =>
+    Math.min(1, Math.max(0, (bin * map.binSeconds - window.mediaStart) / window.sourceSpan));
+  let loudest = 0;
+  for (let bin = first; bin < last; bin++) {
+    const level = (map.bins[bin] ?? 0) * gain;
+    if (level < EXPORT_PEAK_CEILING) continue;
+    loudest = Math.max(loudest, level);
+    const previous = runs.at(-1);
+    const from = toFraction(bin);
+    const to = toFraction(bin + 1);
+    if (previous && previous.to >= from) previous.to = to;
+    else runs.push({ from, to });
+  }
+  return { runs, peakDbfs: runs.length > 0 ? 20 * Math.log10(loudest) : null };
+}
+
+export function isPeakMap(value: unknown): value is PeakMap {
+  if (typeof value !== "object" || value === null) return false;
+  const bins: unknown = Reflect.get(value, "bins");
+  return (
+    typeof Reflect.get(value, "binSeconds") === "number" &&
+    Array.isArray(bins) &&
+    bins.every((bin) => typeof bin === "number")
+  );
+}

package/src/player/components/clipSync.test.ts

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import { clipSyncState, syncPartnerOf } from "./clipSync";
+
+const clip = (id: string, tag: string, start: number, extra: Record<string, unknown> = {}) => ({
+  id,
+  tag,
+  start,
+  duration: 4,
+  track: 0,
+  syncOrigin: "lk-1",
+  ...extra,
+});
+
+describe("syncPartnerOf", () => {
+  it("pairs a video with the audio sharing its sync origin, not another video", () => {
+    const v = clip("v", "video", 0);
+    const a = clip("a", "audio", 0);
+    const other = clip("v2", "video", 0);
+    expect(syncPartnerOf(a, [v, a, other])?.id).toBe("v");
+    expect(syncPartnerOf(v, [v, a, other])?.id).toBe("a");
+  });
+
+  it("ignores clips with no or another origin", () => {
+    const v = clip("v", "video", 0);
+    expect(syncPartnerOf(v, [v, clip("a", "audio", 0, { syncOrigin: "lk-2" })])).toBeNull();
+    expect(syncPartnerOf({ ...v, syncOrigin: undefined }, [v])).toBeNull();
+  });
+
+  it.each([{ sourceFile: "child.html" }, { compositionScope: "child" }])(
+    "never pairs across compositions reusing an origin (%o)",
+    (scope) => {
+      const v = clip("v", "video", 0);
+      expect(syncPartnerOf(v, [v, clip("a", "audio", 0, scope)])).toBeNull();
+    },
+  );
+
+  it("after a split, picks the partner sharing the most timeline", () => {
+    const a = clip("a", "audio", 4.2);
+    const left = clip("v", "video", 0);
+    const right = clip("v-split", "video", 4);
+    expect(syncPartnerOf(a, [left, right, a])?.id).toBe("v-split");
+  });
+});
+
+describe("clipSyncState", () => {
+  it("is null in sync and signed per side when drifted", () => {
+    const v = clip("v", "video", 1);
+    expect(clipSyncState(v, [v, clip("a", "audio", 1)], 30)).toBeNull();
+    const late = clip("a", "audio", 1 + 10 / 30);
+    expect(clipSyncState(late, [v, late], 30)?.frames).toBe(10);
+    expect(clipSyncState(v, [v, late], 30)?.frames).toBe(-10);
+  });
+
+  it("offers move and slip targets that each restore sync", () => {
+    const v = clip("v", "video", 1, { playbackStart: 0 });
+    const a = clip("a", "audio", 1.5, { playbackStart: 0 });
+    const state = clipSyncState(a, [v, a], 30);
+    expect(state?.moveStart).toBeCloseTo(1);
+    expect(state?.slipMediaStart).toBeCloseTo(0.5);
+  });
+
+  it("has no badge when the halves play at different rates", () => {
+    const v = clip("v", "video", 1, { playbackRate: 2 });
+    const a = clip("a", "audio", 2);
+    expect(clipSyncState(a, [v, a], 30)).toBeNull();
+  });
+});

package/src/player/components/clipSync.ts

@@ -0,0 +1,80 @@
+import {
+  moveIntoSyncStart,
+  slipIntoSyncMediaStart,
+  syncOffsetFrames,
+  type SyncTiming,
+} from "@hyperframes/core/media-link";
+import { sameCompositionScope, type TimelineElement } from "../store/timelineElement";
+
+type SyncElement = Pick<
+  TimelineElement,
+  "id" | "key" | "tag" | "start" | "duration" | "playbackStart" | "playbackRate" | "syncOrigin"
+> &
+  Pick<TimelineElement, "sourceFile" | "compositionScope">;
+
+const keyOf = (el: Pick<TimelineElement, "id" | "key">) => el.key ?? el.id;
+const kindOf = (el: Pick<TimelineElement, "tag">) => el.tag.trim().toLowerCase();
+
+function syncTimingOf(el: SyncElement): SyncTiming {
+  return { start: el.start, mediaStart: el.playbackStart ?? 0, playbackRate: el.playbackRate ?? 1 };
+}
+
+function overlap(a: SyncElement, b: SyncElement): number {
+  return Math.min(a.start + a.duration, b.start + b.duration) - Math.max(a.start, b.start);
+}
+
+/**
+ * The other half of `el`'s source pair: a video for an audio and the reverse,
+ * sharing its sync origin. After splits several may qualify; the one sharing the
+ * most timeline wins, then the nearest start.
+ */
+export function syncPartnerOf<T extends SyncElement>(el: T, elements: readonly T[]): T | null {
+  const kind = kindOf(el);
+  if (!el.syncOrigin || (kind !== "video" && kind !== "audio")) return null;
+  const partnerKind = kind === "video" ? "audio" : "video";
+  const candidates = elements.filter(
+    (other) =>
+      keyOf(other) !== keyOf(el) &&
+      other.syncOrigin === el.syncOrigin &&
+      sameCompositionScope(other, el) &&
+      kindOf(other) === partnerKind,
+  );
+  const rank = (other: T) => [overlap(el, other), -Math.abs(other.start - el.start)] as const;
+  let best: T | null = null;
+  for (const candidate of candidates) {
+    if (!best) best = candidate;
+    else {
+      const [o1, d1] = rank(candidate);
+      const [o2, d2] = rank(best);
+      if (o1 > o2 || (o1 === o2 && d1 > d2)) best = candidate;
+    }
+  }
+  return best;
+}
+
+export interface ClipSyncState<T> {
+  partner: T;
+  frames: number;
+  moveStart: number | null;
+  slipMediaStart: number | null;
+}
+
+/** `el`'s drift from its source partner, or null when in sync, unpaired or at a different rate. */
+export function clipSyncState<T extends SyncElement>(
+  el: T,
+  elements: readonly T[],
+  fps: number,
+): ClipSyncState<T> | null {
+  const partner = syncPartnerOf(el, elements);
+  if (!partner) return null;
+  const self = syncTimingOf(el);
+  const other = syncTimingOf(partner);
+  const frames = syncOffsetFrames(self, other, fps);
+  if (frames === null || frames === 0) return null;
+  return {
+    partner,
+    frames,
+    moveStart: moveIntoSyncStart(self, other),
+    slipMediaStart: slipIntoSyncMediaStart(self, other),
+  };
+}

package/src/player/components/clipToolAttrs.test.ts

@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vitest";
+import { parseAudioFxChain, serializeAudioFxChain } from "@hyperframes/core/audio-fx";
+import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
+import {
+  activeLook,
+  activeVoicePreset,
+  chainWithVoicePreset,
+  hasCrop,
+  isDucked,
+  lookAttrValue,
+  readClipBadges,
+  splitVisibleBadges,
+  type ClipToolState,
+} from "./clipToolAttrs";
+
+const presetsIn = (raw: string | null) =>
+  raw ? [...new Set(parseAudioFxChain(raw).nodes.map((n) => n.fromPreset ?? n.type))] : [];
+
+const handNode = serializeAudioFxChain({
+  version: 1,
+  nodes: [{ id: "n1", type: "highpass", enabled: true, params: { frequency: 80 } }],
+});
+
+describe("voice presets", () => {
+  it("writes the chosen preset's nodes and reads it back", () => {
+    const raw = chainWithVoicePreset(null, "voice-clean");
+    expect(presetsIn(raw)).toEqual(["voice-clean"]);
+    expect(activeVoicePreset(raw)).toBe("voice-clean");
+  });
+
+  it("is single-choice: picking another menu preset replaces the first", () => {
+    const raw = chainWithVoicePreset(chainWithVoicePreset(null, "voice-clean"), "telephone");
+    expect(presetsIn(raw)).toEqual(["telephone"]);
+  });
+
+  it("None drops the attribute when the chain held only the preset", () => {
+    expect(chainWithVoicePreset(chainWithVoicePreset(null, "voice-warm"), null)).toBeNull();
+  });
+
+  it("None keeps nodes that are not from a menu preset", () => {
+    const withPreset = chainWithVoicePreset(handNode, "voice-broadcast");
+    expect(presetsIn(withPreset)).toEqual(["highpass", "voice-broadcast"]);
+    expect(chainWithVoicePreset(withPreset, null)).toBe(handNode);
+  });
+
+  it("re-applying the same preset keeps one copy", () => {
+    const once = chainWithVoicePreset(null, "megaphone");
+    const twice = chainWithVoicePreset(once, "megaphone");
+    expect(parseAudioFxChain(twice ?? "").nodes).toHaveLength(
+      parseAudioFxChain(once ?? "").nodes.length,
+    );
+  });
+});
+
+describe("looks", () => {
+  it("writes the minimal preset form the runtime resolves", () => {
+    const raw = lookAttrValue("warm-daylight");
+    expect(raw).toBe('{"preset":"warm-daylight","intensity":1}');
+    expect(normalizeHfColorGrading(JSON.parse(raw ?? ""))?.preset).toBe("warm-daylight");
+    expect(activeLook(raw)).toBe("warm-daylight");
+  });
+
+  it("None removes the attribute", () => {
+    expect(lookAttrValue(null)).toBeNull();
+  });
+
+  it("reads a full inspector-written grading and ignores garbage", () => {
+    expect(activeLook('{"preset":"mono-clean","intensity":0.4,"adjust":{"contrast":0.2}}')).toBe(
+      "mono-clean",
+    );
+    expect(activeLook("{nope")).toBeNull();
+    expect(activeLook('{"preset":"mono-clean","enabled":false}')).toBeNull();
+  });
+});
+
+describe("small readers", () => {
+  it("treats an inset of zero or none as no crop", () => {
+    expect(hasCrop("inset(10px 0px 10px 0px)")).toBe(true);
+    expect(hasCrop("inset(0px)")).toBe(false);
+    expect(hasCrop("none")).toBe(false);
+    expect(hasCrop(null)).toBe(false);
+  });
+
+  it("reads a carve as ducked unless it is switched off", () => {
+    expect(isDucked('{"sources":["vo"]}')).toBe(true);
+    expect(isDucked('{"enabled":false,"sources":["vo"]}')).toBe(false);
+    expect(isDucked(null)).toBe(false);
+  });
+});
+
+const baseState: ClipToolState = {
+  tag: "video",
+  hasSound: true,
+  volume: null,
+  muted: false,
+  fxChain: null,
+  automation: null,
+  colorGrading: null,
+  clipPath: null,
+  carve: null,
+  link: null,
+};
+
+const rampAutomation = JSON.stringify({
+  version: 1,
+  lanes: [
+    {
+      target: "rate",
+      points: [
+        { t: 0, v: 0.5 },
+        { t: 2, v: 1 },
+      ],
+    },
+  ],
+});
+
+describe("readClipBadges", () => {
+  it("shows nothing for a plain clip at 100%", () => {
+    expect(readClipBadges(baseState)).toEqual([]);
+  });
+
+  it("lists every applied tool in the wireframe's order", () => {
+    const labels = readClipBadges({
+      ...baseState,
+      volume: 1.8,
+      fxChain: chainWithVoicePreset(null, "voice-clean"),
+      automation: rampAutomation,
+      colorGrading: lookAttrValue("warm-daylight"),
+      clipPath: "inset(0px 20px)",
+      carve: "{}",
+      link: "talk",
+    }).map((b) => b.label);
+    expect(labels).toEqual([
+      "Linked",
+      "Warm daylight",
+      "Voice: Clean",
+      "Ramp",
+      "Crop",
+      "Ducked",
+      "180%",
+    ]);
+  });
+
+  it("badges a muted audio clip but not muted b-roll", () => {
+    expect(readClipBadges({ ...baseState, tag: "audio", muted: true })[0]?.label).toBe("Muted");
+    expect(readClipBadges({ ...baseState, hasSound: false, muted: true })).toEqual([]);
+  });
+
+  it("caps at two visible badges plus the link badge", () => {
+    const badges = readClipBadges({
+      ...baseState,
+      link: "talk",
+      colorGrading: lookAttrValue("mono-clean"),
+      clipPath: "inset(5px)",
+      volume: 0.6,
+    });
+    const { visible, hidden } = splitVisibleBadges(badges);
+    expect(visible.map((b) => b.label)).toEqual(["Linked", "Mono", "Crop"]);
+    expect(hidden.map((b) => b.label)).toEqual(["60%"]);
+  });
+});