@hyperframes/studio 0.8.108 → 0.8.110

package/src/player/components/clipMenuToolItems.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, type KeyboardEvent } from "react";
+import { useEffect, 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";
@@ -30,6 +30,47 @@ const ROW_CLASS =
 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;
+const HOVER_PREVIEW_DELAY_MS = 80;
+
+interface HoverPreview {
+  apply: (id: string | null) => void;
+  clear: () => void;
+}
+
+function useHoverPreview(preview: HoverPreview | undefined) {
+  const previewRef = useRef(preview);
+  previewRef.current = preview;
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const activeRef = useRef(false);
+
+  const cancelTimer = () => {
+    if (timerRef.current === null) return;
+    clearTimeout(timerRef.current);
+    timerRef.current = null;
+  };
+  const end = () => {
+    cancelTimer();
+    if (!activeRef.current) return;
+    activeRef.current = false;
+    previewRef.current?.clear();
+  };
+  const settle = () => {
+    cancelTimer();
+    activeRef.current = false;
+  };
+  const start = (id: string | null) => {
+    if (!previewRef.current) return;
+    cancelTimer();
+    timerRef.current = setTimeout(() => {
+      timerRef.current = null;
+      activeRef.current = true;
+      previewRef.current?.apply(id);
+    }, HOVER_PREVIEW_DELAY_MS);
+  };
+
+  useEffect(() => end, []);
+  return { start, end, settle };
+}
 
 interface ChoiceSection {
   heading?: string;
@@ -48,22 +89,36 @@ function ChoiceSubmenu({
   sections,
   activeId,
   onPick,
+  preview,
 }: {
   label: string;
   sections: readonly ChoiceSection[];
   activeId: string | null;
   onPick: (id: string | null) => void;
+  preview?: HoverPreview;
 }) {
   const [open, setOpen] = useState(false);
   const [flipLeft, setFlipLeft] = useState(false);
   const rowRef = useRef<HTMLButtonElement | null>(null);
   const submenuRef = useRef<HTMLDivElement | null>(null);
+  const hover = useHoverPreview(preview);
+  const openingFocusRef = useRef(false);
+
+  const hideSubmenu = () => {
+    hover.end();
+    setOpen(false);
+  };
 
   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));
+    if (!focusFirst) return;
+    openingFocusRef.current = true;
+    requestAnimationFrame(() => {
+      focusSibling(submenuRef.current, 1);
+      openingFocusRef.current = false;
+    });
   };
 
   const onSubmenuKeyDown = (event: KeyboardEvent) => {
@@ -74,7 +129,7 @@ function ChoiceSubmenu({
     } else if (event.key === "ArrowLeft") {
       event.preventDefault();
       event.stopPropagation();
-      setOpen(false);
+      hideSubmenu();
       rowRef.current?.focus();
     }
   };
@@ -86,7 +141,15 @@ function ChoiceSubmenu({
       role="menuitemradio"
       aria-checked={activeId === id}
       className={ROW_CLASS}
-      onClick={() => onPick(id)}
+      onClick={() => {
+        hover.settle();
+        onPick(id);
+      }}
+      onMouseEnter={() => hover.start(id)}
+      onFocus={() => {
+        if (openingFocusRef.current) openingFocusRef.current = false;
+        else hover.start(id);
+      }}
     >
       <span className="flex items-center gap-1.5">
         <span aria-hidden="true" className="w-3 text-center">
@@ -98,7 +161,7 @@ function ChoiceSubmenu({
   );
 
   return (
-    <div className="relative" onMouseEnter={() => show(false)} onMouseLeave={() => setOpen(false)}>
+    <div className="relative" onMouseEnter={() => show(false)} onMouseLeave={hideSubmenu}>
       <button
         ref={rowRef}
         type="button"
@@ -175,14 +238,15 @@ function FreezeFrameItem({ element, currentTime, onClose }: Omit<ClipMenuToolIte
   );
 }
 
-/** Freeze (time), Voice (sound), Look and Crop (picture); sound and picture end in their own divider. */
+/** 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 { onSetElementAttributeQuiet, onSetElementAttributeLive, onRevertElementAttributeLive } =
+    useTimelineEditContextOptional();
   const state = useClipToolState(element);
   const openCropBar = useCropPresetBarStore((s) => s.open);
   if (!onSetElementAttributeQuiet) return null;
@@ -204,12 +268,19 @@ function ClipMenuAttributeItems({ group, element, onClose }: ClipMenuToolItemsPr
             write(HF_AUDIO_FX_ATTR, chainWithVoicePreset(state.fxChain, id), "Voice preset")
           }
         />
-        <div className="my-1 border-t border-neutral-700/60" />
       </>
     );
   }
 
   if (!isPictureClip(state.tag)) return null;
+  const lookPreview =
+    onSetElementAttributeLive && onRevertElementAttributeLive
+      ? {
+          apply: (id: string | null) =>
+            onSetElementAttributeLive(element, HF_COLOR_GRADING_ATTR, lookAttrValue(id)),
+          clear: () => onRevertElementAttributeLive(element, HF_COLOR_GRADING_ATTR),
+        }
+      : undefined;
   return (
     <>
       <ChoiceSubmenu
@@ -217,6 +288,7 @@ function ClipMenuAttributeItems({ group, element, onClose }: ClipMenuToolItemsPr
         sections={LOOK_SECTIONS}
         activeId={activeLook(state.colorGrading)}
         onPick={(id) => write(HF_COLOR_GRADING_ATTR, lookAttrValue(id), "Look")}
+        preview={lookPreview}
       />
       <button
         type="button"
@@ -229,7 +301,6 @@ function ClipMenuAttributeItems({ group, element, onClose }: ClipMenuToolItemsPr
       >
         <span>Crop</span>
       </button>
-      <div className="my-1 border-t border-neutral-700/60" />
     </>
   );
 }

package/src/player/components/clipPeakMap.ts

@@ -0,0 +1,46 @@
+import { buildProjectApiPath } from "../../utils/projectRouting";
+import { resolvePreviewRelative } from "../../utils/previewRelativePath";
+import type { TimelineElement } from "../store/timelineElement";
+import { clipSourcePeak, isPeakMap, type ClipSourceWindow, type PeakMap } from "./clipPeakRuns";
+import { encodePreviewPath, resolveMediaPreviewUrl } from "./thumbnailUtils";
+
+const peakMapRequests = new Map<string, Promise<PeakMap | null>>();
+
+/** One fetch per peak-map URL per session; a failed or malformed answer reads as null. */
+export function loadPeakMap(url: string): Promise<PeakMap | null> {
+  const pending = peakMapRequests.get(url);
+  if (pending) return pending;
+  const request = fetch(url)
+    .then((res) => (res.ok ? res.json() : null))
+    .then((body: unknown) => (isPeakMap(body) ? body : null))
+    .catch(() => null);
+  peakMapRequests.set(url, request);
+  return request;
+}
+
+/** The studio-server `/peaks/*` URL for a clip's project media, or undefined for outside media. */
+export function clipPeaksUrl(src: string | undefined, projectId: string): string | undefined {
+  const origin = window.location.origin;
+  const relative = resolvePreviewRelative(
+    resolveMediaPreviewUrl(src ?? "", projectId, origin),
+    projectId,
+    origin,
+  );
+  return relative
+    ? buildProjectApiPath(projectId, `/peaks/${encodePreviewPath(relative)}`)
+    : undefined;
+}
+
+export function clipSourceWindow(el: TimelineElement): ClipSourceWindow {
+  return { mediaStart: el.playbackStart ?? 0, sourceSpan: el.duration * (el.playbackRate ?? 1) };
+}
+
+/** The clip's source peak, linear, over the part it plays; null when it cannot be measured. */
+export async function measureClipSourcePeak(
+  el: TimelineElement,
+  projectId: string,
+): Promise<number | null> {
+  const url = clipPeaksUrl(el.src, projectId);
+  const map = url ? await loadPeakMap(url) : null;
+  return map ? clipSourcePeak(map, clipSourceWindow(el)) : null;
+}

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { clipPeakRuns } from "./clipPeakRuns";
+import { clipPeakRuns, clipSourcePeak } from "./clipPeakRuns";
 
 const map = (bins: number[]) => ({ binSeconds: 1, bins });
 
@@ -36,3 +36,16 @@ describe("clipPeakRuns", () => {
     expect(clipPeakRuns(map([1]), { mediaStart: 0, sourceSpan: 0 }, 1).runs).toEqual([]);
   });
 });
+
+describe("clipSourcePeak", () => {
+  it("is the loudest bin inside the played source window only", () => {
+    const bins = map([0.9, 0.2, 0.4, 0.3, 1]);
+    expect(clipSourcePeak(bins, { mediaStart: 1, sourceSpan: 3 })).toBe(0.4);
+    expect(clipSourcePeak(bins, { mediaStart: 0, sourceSpan: 5 })).toBe(1);
+  });
+
+  it("is null for an empty window or one past the file's end", () => {
+    expect(clipSourcePeak(map([0.5]), { mediaStart: 0, sourceSpan: 0 })).toBeNull();
+    expect(clipSourcePeak(map([0.5]), { mediaStart: 4, sourceSpan: 2 })).toBeNull();
+  });
+});

package/src/player/components/clipPeakRuns.ts

@@ -48,6 +48,17 @@ export function clipPeakRuns(
   return { runs, peakDbfs: runs.length > 0 ? 20 * Math.log10(loudest) : null };
 }
 
+export function clipSourcePeak(map: PeakMap, window: ClipSourceWindow): number | null {
+  if (!(window.sourceSpan > 0) || !(map.binSeconds > 0)) return 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),
+  );
+  if (last <= first) return null;
+  return map.bins.slice(first, last).reduce((loudest, bin) => Math.max(loudest, bin), 0);
+}
+
 export function isPeakMap(value: unknown): value is PeakMap {
   if (typeof value !== "object" || value === null) return false;
   const bins: unknown = Reflect.get(value, "bins");

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

@@ -5,11 +5,12 @@ import {
   activeLook,
   activeVoicePreset,
   chainWithVoicePreset,
+  clipSpeedSuffix,
   hasCrop,
   isDucked,
+  clipVolumeBadge,
   lookAttrValue,
-  readClipBadges,
-  splitVisibleBadges,
+  readClipEffects,
   type ClipToolState,
 } from "./clipToolAttrs";
 
@@ -98,7 +99,6 @@ const baseState: ClipToolState = {
   colorGrading: null,
   clipPath: null,
   carve: null,
-  link: null,
 };
 
 const rampAutomation = JSON.stringify({
@@ -114,48 +114,64 @@ const rampAutomation = JSON.stringify({
   ],
 });
 
-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%",
-    ]);
+describe("readClipEffects", () => {
+  it("lists nothing for a plain clip, so the fx badge stays grey", () => {
+    expect(readClipEffects(baseState)).toEqual([]);
+    expect(readClipEffects({ ...baseState, automation: rampAutomation, volume: 1.8 })).toEqual([]);
   });
 
-  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("lists every applied effect in the tooltip's order", () => {
+    expect(
+      readClipEffects({
+        ...baseState,
+        fxChain: chainWithVoicePreset(null, "voice-clean"),
+        colorGrading: lookAttrValue("warm-daylight"),
+        clipPath: "inset(0px 20px)",
+        carve: "{}",
+      }),
+    ).toEqual(["Look: Warm daylight", "Voice: Clean", "Crop", "Ducked"]);
   });
 
-  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,
+  it("names a hand-added effect and skips disabled and carve-generated nodes", () => {
+    const chain = serializeAudioFxChain({
+      version: 1,
+      nodes: [
+        { id: "a", type: "highpass", enabled: true, params: { frequency: 80 } },
+        { id: "b", type: "gain", enabled: false, params: {} },
+        { id: "c", type: "gain", enabled: true, fromCarve: true, params: {} },
+      ],
     });
-    const { visible, hidden } = splitVisibleBadges(badges);
-    expect(visible.map((b) => b.label)).toEqual(["Linked", "Mono", "Crop"]);
-    expect(hidden.map((b) => b.label)).toEqual(["60%"]);
+    const effects = readClipEffects({ ...baseState, fxChain: chain });
+    expect(effects).toHaveLength(1);
+    expect(effects[0]).not.toBe("highpass");
+  });
+
+  it("reads a hand-made grading without a menu preset as a Look", () => {
+    expect(readClipEffects({ ...baseState, colorGrading: '{"adjust":{"contrast":0.2}}' })).toEqual([
+      "Look",
+    ]);
+  });
+});
+
+describe("clipVolumeBadge", () => {
+  it("shows volume off 100% and Muted only on a clip with sound", () => {
+    expect(clipVolumeBadge({ ...baseState, volume: 1.8 })).toBe("180%");
+    expect(clipVolumeBadge(baseState)).toBeNull();
+    expect(clipVolumeBadge({ ...baseState, tag: "audio", muted: true })).toBe("Muted");
+    expect(clipVolumeBadge({ ...baseState, hasSound: false, muted: true })).toBeNull();
+  });
+});
+
+describe("clipSpeedSuffix", () => {
+  it("shows a constant speed as a percentage and hides 100%", () => {
+    expect(clipSpeedSuffix(1.5, null)).toBe(" [150%]");
+    expect(clipSpeedSuffix(0.35, null)).toBe(" [35%]");
+    expect(clipSpeedSuffix(1, null)).toBe("");
+    expect(clipSpeedSuffix(undefined, null)).toBe("");
+  });
+
+  it("shows a rate lane as a ramp, whatever the base rate", () => {
+    expect(clipSpeedSuffix(2, rampAutomation)).toBe(" [ramp]");
+    expect(clipSpeedSuffix(1, rampAutomation)).toBe(" [ramp]");
   });
 });

package/src/player/components/clipToolAttrs.ts

@@ -4,11 +4,13 @@
  */
 
 import {
+  getAudioFxDef,
   parseAudioFxChain,
   serializeAudioFxChain,
   type HfAudioFxChain,
+  type HfAudioFxNode,
 } from "@hyperframes/core/audio-fx";
-import { activeAudioFxPresetIds } from "@hyperframes/core/audio-fx-presets";
+import { activeAudioFxPresetIds, getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
 import { normalizeHfColorGrading } from "@hyperframes/core/color-grading";
 import { parseRateLane } from "@hyperframes/core/speed-ramp";
 import { applyPresetToChain } from "../../components/editor/useApplyAudioFxPreset";
@@ -117,6 +119,17 @@ function hasRateRamp(rawAutomation: string | null | undefined): boolean {
   return parseRateLane(rawAutomation) !== null;
 }
 
+/** Premiere's speed cue on the clip name: ` [ramp]` under a rate lane, else ` [150%]` off 100%. */
+export function clipSpeedSuffix(
+  playbackRate: number | null | undefined,
+  rawAutomation: string | null | undefined,
+): string {
+  if (hasRateRamp(rawAutomation)) return " [ramp]";
+  const rate = playbackRate ?? 1;
+  if (!Number.isFinite(rate) || Math.abs(rate - 1) < 0.005) return "";
+  return ` [${Math.round(rate * 100)}%]`;
+}
+
 const ZERO_INSET = /^inset\(\s*0(px|%)?\s*\)$/i;
 
 export function hasCrop(clipPath: string | null | undefined): boolean {
@@ -124,13 +137,6 @@ export function hasCrop(clipPath: string | null | undefined): boolean {
   return value !== "" && value !== "none" && !ZERO_INSET.test(value);
 }
 
-export type ClipBadgeKind = "link" | "look" | "voice" | "ramp" | "crop" | "ducked" | "volume";
-
-export interface ClipBadge {
-  kind: ClipBadgeKind;
-  label: string;
-}
-
 /** What a clip's attributes say is applied; the element's own attributes, as read off its node. */
 export interface ClipToolState {
   tag: string;
@@ -142,46 +148,43 @@ export interface ClipToolState {
   colorGrading: string | null;
   clipPath: string | null;
   carve: string | null;
-  link: string | null;
 }
 
-function volumeBadge(state: ClipToolState): ClipBadge | null {
-  const isAudio = state.tag === "audio";
-  if (!isAudio && !state.hasSound) return null;
-  if (state.muted) return { kind: "volume", label: "Muted" };
+export function clipVolumeBadge(state: ClipToolState): string | null {
+  if (state.tag !== "audio" && !state.hasSound) return null;
+  if (state.muted) return "Muted";
   const volume = state.volume ?? 1;
   if (Math.abs(volume - 1) < 0.005) return null;
-  return { kind: "volume", label: `${Math.round(volume * 100)}%` };
-}
-
-/** Badges in the wireframe's order: look, voice, ramp, crop, ducked, volume. The link badge leads. */
-export function readClipBadges(state: ClipToolState): ClipBadge[] {
-  const look = lookLabel(activeLook(state.colorGrading));
-  const voice = voicePresetLabel(activeVoicePreset(state.fxChain));
-  const volume = volumeBadge(state);
-  const badges: Array<ClipBadge | null> = [
-    state.link ? { kind: "link", label: "Linked" } : null,
-    look ? { kind: "look", label: look } : null,
-    voice ? { kind: "voice", label: `Voice: ${voice}` } : null,
-    hasRateRamp(state.automation) ? { kind: "ramp", label: "Ramp" } : null,
-    hasCrop(state.clipPath) ? { kind: "crop", label: "Crop" } : null,
-    isDucked(state.carve) ? { kind: "ducked", label: "Ducked" } : null,
-    volume,
+  return `${Math.round(volume * 100)}%`;
+}
+
+function lookEffect(rawGrading: string | null): string | null {
+  const grading = normalizeHfColorGrading(parseJson(rawGrading));
+  if (!grading) return null;
+  const label = lookLabel(grading.preset ?? null);
+  return label ? `Look: ${label}` : "Look";
+}
+
+function presetEffect(presetId: string): string {
+  const voice = voicePresetLabel(presetId);
+  return voice ? `Voice: ${voice}` : (getAudioFxPreset(presetId)?.label ?? presetId);
+}
+
+function chainNodeEffect(node: HfAudioFxNode): string | null {
+  if (node.enabled === false || node.fromCarve) return null;
+  if (node.fromPreset) return presetEffect(node.fromPreset);
+  if (node.fromEq) return "EQ";
+  if (node.fromLeveller) return "Leveller";
+  return node.label ?? getAudioFxDef(node.type)?.label ?? node.type;
+}
+
+/** Every effect on the clip, in the fx badge tooltip's order; empty means a grey badge. */
+export function readClipEffects(state: ClipToolState): string[] {
+  const effects: Array<string | null> = [
+    lookEffect(state.colorGrading),
+    ...parseChainOrEmpty(state.fxChain).nodes.map(chainNodeEffect),
+    hasCrop(state.clipPath) ? "Crop" : null,
+    isDucked(state.carve) ? "Ducked" : null,
   ];
-  return badges.filter((badge): badge is ClipBadge => badge !== null);
-}
-
-const MAX_VISIBLE_BADGES = 2;
-
-/** The link badge is always shown; the rest cap at two, then `+N`. */
-export function splitVisibleBadges(badges: readonly ClipBadge[]): {
-  visible: ClipBadge[];
-  hidden: ClipBadge[];
-} {
-  const link = badges.filter((badge) => badge.kind === "link");
-  const rest = badges.filter((badge) => badge.kind !== "link");
-  return {
-    visible: [...link, ...rest.slice(0, MAX_VISIBLE_BADGES)],
-    hidden: rest.slice(MAX_VISIBLE_BADGES),
-  };
+  return [...new Set(effects.filter((effect): effect is string => effect !== null))];
 }