@hyperframes/studio 0.6.97 → 0.6.98

package/src/player/lib/timelineIframeHelpers.ts

@@ -170,6 +170,95 @@ export function resolveIframe(el: Element | null): HTMLIFrameElement | null {
   return el.shadowRoot?.querySelector("iframe") ?? el.querySelector("iframe") ?? null;
 }
 
+// ---------------------------------------------------------------------------
+// Audio scrubbing
+// ---------------------------------------------------------------------------
+// Plays a brief slice of the music track while the user drags the playhead,
+// like an NLE scrub. Repeated calls keep playback alive; it auto-pauses shortly
+// after scrubbing stops and restores the element's prior muted state.
+
+const SCRUB_VOLUME = 0.25;
+
+let scrubAudioEl: HTMLAudioElement | null = null;
+let scrubStopTimer: ReturnType<typeof setTimeout> | null = null;
+let scrubPrevMuted: boolean | null = null;
+let scrubPrevVolume: number | null = null;
+
+// Resolve the SAME element the store identified as music: prefer its id, then
+// the role attribute, and only fall back to the first <audio> (which could be a
+// voiceover, so the id hint matters).
+function resolveScrubAudioEl(doc: Document, musicId?: string | null): HTMLAudioElement | null {
+  if (musicId) {
+    const byId = doc.getElementById(musicId);
+    if (byId instanceof HTMLAudioElement) return byId;
+  }
+  return (
+    doc.querySelector<HTMLAudioElement>("audio[data-timeline-role='music']") ??
+    doc.querySelector<HTMLAudioElement>("audio")
+  );
+}
+
+function applyScrub(el: HTMLAudioElement, audioFileTime: number): void {
+  if (scrubAudioEl && scrubAudioEl !== el) stopScrubPreviewAudio();
+  if (scrubPrevMuted === null) scrubPrevMuted = el.muted;
+  if (scrubPrevVolume === null) scrubPrevVolume = el.volume;
+  scrubAudioEl = el;
+  try {
+    el.muted = false;
+    el.volume = SCRUB_VOLUME;
+    if (Math.abs(el.currentTime - audioFileTime) > 0.04) el.currentTime = audioFileTime;
+    if (el.paused) void el.play().catch(() => {});
+  } catch {
+    /* element not ready */
+  }
+  if (scrubStopTimer) clearTimeout(scrubStopTimer);
+  scrubStopTimer = setTimeout(stopScrubPreviewAudio, 140);
+}
+
+/**
+ * Scrub the preview music audio to `audioFileTime` (seconds into the source
+ * file). Pass `null` to stop. Safe to call rapidly during a playhead drag.
+ */
+export function scrubPreviewAudio(
+  iframe: HTMLIFrameElement | null,
+  audioFileTime: number | null,
+  musicId?: string | null,
+): void {
+  if (!iframe) return;
+  if (audioFileTime === null) {
+    stopScrubPreviewAudio();
+    return;
+  }
+  let doc: Document | null = null;
+  try {
+    doc = iframe.contentDocument;
+  } catch {
+    return;
+  }
+  if (!doc) return;
+  const el = resolveScrubAudioEl(doc, musicId);
+  if (el) applyScrub(el, audioFileTime);
+}
+
+export function stopScrubPreviewAudio(): void {
+  if (scrubStopTimer) {
+    clearTimeout(scrubStopTimer);
+    scrubStopTimer = null;
+  }
+  const el = scrubAudioEl;
+  scrubAudioEl = null;
+  if (!el) return;
+  try {
+    el.pause();
+    if (scrubPrevMuted !== null) el.muted = scrubPrevMuted;
+    if (scrubPrevVolume !== null) el.volume = scrubPrevVolume;
+  } catch {
+    /* ignore */
+  }
+  scrubPrevMuted = null;
+  scrubPrevVolume = null;
+}
+
 // ---------------------------------------------------------------------------
 // Enrich missing compositions from DOM
 // ---------------------------------------------------------------------------

package/src/player/store/playerStore.ts

@@ -1,4 +1,6 @@
 import { create } from "zustand";
+import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
+import type { BeatEditState } from "../../utils/beatEditing";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
 
 /** Minimal keyframe cache types — mirrors GsapKeyframesData without pulling in Node-only gsap-parser. */
@@ -46,6 +48,8 @@ export interface TimelineElement {
   timingSource?: "authored" | "implicit";
   /** Set by data-timeline-locked on the host element — disables move and trim in Studio. */
   timelineLocked?: boolean;
+  /** Value of data-timeline-role attribute — used to identify music vs. voiceover. */
+  timelineRole?: string;
 }
 
 export type ZoomMode = "fit" | "manual";
@@ -56,6 +60,8 @@ interface PlayerState {
   currentTime: number;
   duration: number;
   timelineReady: boolean;
+  /** True while a beat dot is being dragged — hides the playhead guideline. */
+  beatDragging: boolean;
   elements: TimelineElement[];
   selectedElementId: string | null;
   playbackRate: number;
@@ -88,18 +94,6 @@ interface PlayerState {
   toggleSelectedElementId: (id: string) => void;
   clearSelectedElementIds: () => void;
 
-  /** Clipboard for keyframe copy/paste — stores keyframes with relative times. */
-  keyframeClipboard: Array<{
-    relativeTime: number;
-    properties: Record<string, number | string>;
-    ease?: string;
-  }> | null;
-  setKeyframeClipboard: (data: PlayerState["keyframeClipboard"]) => void;
-
-  /** Elements with expanded property rows in the timeline. */
-  expandedTimelineElements: Set<string>;
-  toggleExpandedElement: (id: string) => void;
-
   /** Keyframe data per element id, populated from parsed GSAP animations. */
   keyframeCache: Map<string, KeyframeCacheEntry>;
   setKeyframeCache: (elementId: string, data: KeyframeCacheEntry | undefined) => void;
@@ -111,6 +105,7 @@ interface PlayerState {
   setAudioMuted: (muted: boolean) => void;
   setLoopEnabled: (enabled: boolean) => void;
   setTimelineReady: (ready: boolean) => void;
+  setBeatDragging: (dragging: boolean) => void;
   setElements: (elements: TimelineElement[]) => void;
   setSelectedElementId: (id: string | null) => void;
   updateElement: (
@@ -131,11 +126,34 @@ interface PlayerState {
   requestSeek: (time: number) => void;
   clearSeekRequest: () => void;
 
-  autoKeyframeEnabled: boolean;
-  setAutoKeyframeEnabled: (enabled: boolean) => void;
-
   lintFindingsByElement: Map<string, { count: number; messages: string[] }>;
   setLintFindingsByElement: (map: Map<string, { count: number; messages: string[] }>) => void;
+
+  beatAnalysis: MusicBeatAnalysis | null;
+  setBeatAnalysis: (analysis: MusicBeatAnalysis | null) => void;
+
+  /** User edits (add/move/delete) layered over the detected beat grid. */
+  beatEdits: BeatEditState | null;
+  setBeatEdits: (edits: BeatEditState | null) => void;
+  /** Undo/redo stacks for beat edits (in-memory, session-only). */
+  beatUndo: BeatHistoryEntry[];
+  beatRedo: BeatHistoryEntry[];
+  /** Apply a beat edit and record it for undo. */
+  commitBeatEdits: (next: BeatEditState | null, label: string) => void;
+  /** Undo/redo the most recent beat edit; returns its label or null if none. */
+  undoBeatEdits: () => string | null;
+  redoBeatEdits: () => string | null;
+  /** Clear beat edit history (e.g. when the music track changes). */
+  resetBeatHistory: () => void;
+  /** Callback that persists current beats to disk; registered by the analysis hook. */
+  beatPersist: (() => void) | null;
+  setBeatPersist: (fn: (() => void) | null) => void;
+}
+
+interface BeatHistoryEntry {
+  restore: BeatEditState | null; // state to restore when this entry is applied
+  at: number; // original edit timestamp (for global undo ordering)
+  label: string;
 }
 
 // Lightweight pub-sub for current time during playback.
@@ -151,11 +169,12 @@ export const liveTime = {
   },
 };
 
-export const usePlayerStore = create<PlayerState>((set) => ({
+export const usePlayerStore = create<PlayerState>((set, get) => ({
   isPlaying: false,
   currentTime: 0,
   duration: 0,
   timelineReady: false,
+  beatDragging: false,
   elements: [],
   selectedElementId: null,
   playbackRate: readStudioUiPreferences().playbackRate ?? 1,
@@ -182,9 +201,6 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   activeKeyframePct: null,
   setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
 
-  keyframeClipboard: null,
-  setKeyframeClipboard: (data) => set({ keyframeClipboard: data }),
-
   selectedElementIds: new Set<string>(),
   toggleSelectedElementId: (id: string) =>
     set((s) => {
@@ -195,15 +211,6 @@ export const usePlayerStore = create<PlayerState>((set) => ({
     }),
   clearSelectedElementIds: () => set({ selectedElementIds: new Set() }),
 
-  expandedTimelineElements: new Set<string>(),
-  toggleExpandedElement: (id: string) =>
-    set((s) => {
-      const next = new Set(s.expandedTimelineElements);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return { expandedTimelineElements: next };
-    }),
-
   keyframeCache: new Map(),
   setKeyframeCache: (elementId, data) =>
     set((s) => {
@@ -217,13 +224,57 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   requestSeek: (time) => set({ requestedSeekTime: time }),
   clearSeekRequest: () => set({ requestedSeekTime: null }),
 
-  autoKeyframeEnabled: true,
-  setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
-
   lintFindingsByElement: new Map(),
   setLintFindingsByElement: (map) => set({ lintFindingsByElement: map }),
 
-  setIsPlaying: (playing) => set({ isPlaying: playing }),
+  beatAnalysis: null,
+  setBeatAnalysis: (analysis) => set({ beatAnalysis: analysis }),
+
+  beatEdits: null,
+  setBeatEdits: (edits) => set({ beatEdits: edits }),
+
+  beatUndo: [],
+  beatRedo: [],
+  beatPersist: null,
+  setBeatPersist: (fn) => set({ beatPersist: fn }),
+  commitBeatEdits: (next, label) => {
+    set((s) => ({
+      beatEdits: next,
+      beatUndo: [...s.beatUndo, { restore: s.beatEdits, at: Date.now(), label }],
+      beatRedo: [],
+    }));
+    get().beatPersist?.();
+  },
+  undoBeatEdits: () => {
+    const s = get();
+    const entry = s.beatUndo[s.beatUndo.length - 1];
+    if (!entry) return null;
+    set({
+      beatEdits: entry.restore,
+      beatUndo: s.beatUndo.slice(0, -1),
+      beatRedo: [...s.beatRedo, { restore: s.beatEdits, at: entry.at, label: entry.label }],
+    });
+    get().beatPersist?.();
+    return entry.label;
+  },
+  resetBeatHistory: () => set({ beatUndo: [], beatRedo: [] }),
+  redoBeatEdits: () => {
+    const s = get();
+    const entry = s.beatRedo[s.beatRedo.length - 1];
+    if (!entry) return null;
+    set({
+      beatEdits: entry.restore,
+      beatRedo: s.beatRedo.slice(0, -1),
+      beatUndo: [...s.beatUndo, { restore: s.beatEdits, at: entry.at, label: entry.label }],
+    });
+    get().beatPersist?.();
+    return entry.label;
+  },
+
+  setIsPlaying: (playing) => {
+    if (get().isPlaying === playing) return;
+    set({ isPlaying: playing });
+  },
   setPlaybackRate: (rate) => {
     writeStudioUiPreferences({ playbackRate: rate });
     set({ playbackRate: rate });
@@ -260,6 +311,7 @@ export const usePlayerStore = create<PlayerState>((set) => ({
   setCurrentTime: (time) => set({ currentTime: Number.isFinite(time) ? time : 0 }),
   setDuration: (duration) => set({ duration: Number.isFinite(duration) ? duration : 0 }),
   setTimelineReady: (ready) => set({ timelineReady: ready }),
+  setBeatDragging: (dragging) => set({ beatDragging: dragging }),
   setElements: (elements) => set({ elements }),
   setSelectedElementId: (id) => set({ selectedElementId: id }),
   updateElement: (elementId, updates) =>
@@ -277,6 +329,7 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       currentTime: 0,
       duration: 0,
       timelineReady: false,
+      beatDragging: false,
       elements: [],
       selectedElementId: null,
       inPoint: null,
@@ -284,7 +337,13 @@ export const usePlayerStore = create<PlayerState>((set) => ({
       activeTool: "select",
       selectedKeyframes: new Set(),
       selectedElementIds: new Set(),
-      expandedTimelineElements: new Set(),
       keyframeCache: new Map(),
+      // Beat state is project-specific — clear it so a project switch can't
+      // apply the previous project's beats/undo/persist to the new one.
+      beatAnalysis: null,
+      beatEdits: null,
+      beatUndo: [],
+      beatRedo: [],
+      beatPersist: null,
     }),
 }));

package/src/utils/beatEditActions.ts

@@ -0,0 +1,109 @@
+// Imperative beat-edit operations driven by the player store. Times passed in
+// are COMPOSITION coordinates (timeline seconds); they're converted to audio-file
+// coordinates internally and strength is measured from the decoded audio.
+
+import { usePlayerStore, type TimelineElement } from "../player/store/playerStore";
+import { isMusicTrack } from "./timelineInspector";
+import { strengthAtTime, type MusicBeatAnalysis } from "@hyperframes/core/beats";
+import {
+  addUserBeat,
+  removeUserBeat,
+  moveUserBeat,
+  mergeUserBeats,
+  type BeatEditState,
+} from "./beatEditing";
+
+/**
+ * Merge user beat edits into the detected analysis and remap from audio-file to
+ * composition coordinates (filtered to the music clip's visible range). Returns
+ * null when there's no music element, so beats never paint at wrong positions.
+ */
+export function remapBeatAnalysisToComposition(
+  beatAnalysis: MusicBeatAnalysis | null,
+  musicElement: Pick<TimelineElement, "src" | "start" | "playbackStart" | "duration"> | null,
+  beatEdits: BeatEditState | null,
+): MusicBeatAnalysis | null {
+  if (!beatAnalysis || !musicElement) return null;
+  const merged = mergeUserBeats(
+    beatAnalysis.beatTimes,
+    beatAnalysis.beatStrengths,
+    beatEdits,
+    musicElement.src ?? null,
+  );
+  const playbackStart = musicElement.playbackStart ?? 0;
+  const clipEnd = playbackStart + musicElement.duration;
+  const offset = musicElement.start - playbackStart;
+  const times: number[] = [];
+  const strengths: number[] = [];
+  merged.times.forEach((t, i) => {
+    if (t >= playbackStart && t <= clipEnd) {
+      times.push(Math.round((t + offset) * 1000) / 1000);
+      strengths.push(merged.strengths[i] ?? 1);
+    }
+  });
+  return { ...beatAnalysis, beatTimes: times, beatStrengths: strengths };
+}
+
+function ctx() {
+  const s = usePlayerStore.getState();
+  const music = s.elements.find(isMusicTrack);
+  const analysis = s.beatAnalysis;
+  if (!music || !analysis || !music.src) return null;
+  return { s, music, analysis, src: music.src };
+}
+
+function compToAudio(start: number, playbackStart: number, compT: number): number {
+  return playbackStart + (compT - start);
+}
+
+// Clip length on the timeline. Falls back to source/analysis length when the
+// media duration hasn't been probed yet (0), so the add window isn't degenerate.
+function clipDuration(music: { duration: number; sourceDuration?: number }): number {
+  if (music.duration > 0) return music.duration;
+  if (music.sourceDuration && music.sourceDuration > 0) return music.sourceDuration;
+  return Number.POSITIVE_INFINITY;
+}
+
+/** True when a music track with analysis exists and the time is inside the clip. */
+export function canAddBeatAt(compT: number): boolean {
+  const c = ctx();
+  if (!c) return false;
+  return compT >= c.music.start && compT <= c.music.start + clipDuration(c.music);
+}
+
+export function addBeatAtCompositionTime(compT: number): void {
+  const c = ctx();
+  if (!c) return;
+  const playbackStart = c.music.playbackStart ?? 0;
+  const audioT = compToAudio(c.music.start, playbackStart, compT);
+  if (audioT < playbackStart || audioT > playbackStart + clipDuration(c.music)) return;
+  const strength = strengthAtTime(c.analysis, audioT);
+  const next = addUserBeat(c.s.beatEdits, c.src, { time: audioT, strength }, c.analysis.beatTimes);
+  // No-op when the beat lands on an existing one — skip the undo entry + write.
+  if (next !== c.s.beatEdits) c.s.commitBeatEdits(next, "add beat");
+}
+
+export function deleteBeatAtCompositionTime(compT: number): void {
+  const c = ctx();
+  if (!c) return;
+  const audioT = compToAudio(c.music.start, c.music.playbackStart ?? 0, compT);
+  const next = removeUserBeat(c.s.beatEdits, c.src, c.analysis.beatTimes, audioT);
+  // No-op when there was no beat to remove — skip the undo entry + write.
+  if (next !== c.s.beatEdits) c.s.commitBeatEdits(next, "delete beat");
+}
+
+export function moveBeatCompositionTime(fromCompT: number, toCompT: number): void {
+  const c = ctx();
+  if (!c) return;
+  const playbackStart = c.music.playbackStart ?? 0;
+  const fromAudio = compToAudio(c.music.start, playbackStart, fromCompT);
+  const toAudio = compToAudio(c.music.start, playbackStart, toCompT);
+  const clamped = Math.max(playbackStart, Math.min(playbackStart + clipDuration(c.music), toAudio));
+  const strength = strengthAtTime(c.analysis, clamped);
+  const next = moveUserBeat(c.s.beatEdits, c.src, c.analysis.beatTimes, fromAudio, {
+    time: clamped,
+    strength,
+  });
+  // No-op when the move resolves to no change — skip the undo entry + write.
+  if (next !== c.s.beatEdits) c.s.commitBeatEdits(next, "move beat");
+}

package/src/utils/beatEditing.ts

@@ -0,0 +1,136 @@
+// User edits to the detected beat grid. All times are in AUDIO-FILE coordinates
+// (offsets into the music source), matching MusicBeatAnalysis.beatTimes, so edits
+// survive moving/trimming the music clip on the timeline.
+
+export interface UserBeat {
+  time: number; // audio-file seconds
+  strength: number; // 0–1, measured from audio
+}
+
+export interface BeatEditState {
+  /** Music src these edits apply to; edits reset when the src changes. */
+  src: string;
+  /** Beats the user added (audio-file coords). */
+  added: UserBeat[];
+  /** Audio-file times of detected beats the user removed. */
+  removed: number[];
+}
+
+// Two beat times within this many seconds are treated as the same beat.
+const MATCH_EPS = 0.015;
+
+function near(a: number, b: number): boolean {
+  return Math.abs(a - b) < MATCH_EPS;
+}
+
+function activeEdits(edits: BeatEditState | null, src: string | null): BeatEditState | null {
+  return edits && src && edits.src === src ? edits : null;
+}
+
+/** Merge detected beats with user edits → effective beats (audio-file coords). */
+export function mergeUserBeats(
+  detectedTimes: number[],
+  detectedStrengths: number[],
+  edits: BeatEditState | null,
+  src: string | null,
+): { times: number[]; strengths: number[] } {
+  const e = activeEdits(edits, src);
+  const removed = e?.removed ?? [];
+  const merged: UserBeat[] = [];
+  for (let i = 0; i < detectedTimes.length; i++) {
+    const t = detectedTimes[i]!;
+    if (removed.some((r) => near(r, t))) continue;
+    merged.push({ time: t, strength: detectedStrengths[i] ?? 0.5 });
+  }
+  if (e) {
+    // Skip added beats that land on an already-present (detected) beat so an
+    // "add" near an existing beat doesn't create a near-duplicate.
+    for (const b of e.added) {
+      if (!merged.some((m) => near(m.time, b.time))) merged.push(b);
+    }
+  }
+  merged.sort((a, b) => a.time - b.time);
+  return { times: merged.map((b) => b.time), strengths: merged.map((b) => b.strength) };
+}
+
+function base(edits: BeatEditState | null, src: string): BeatEditState {
+  const e = activeEdits(edits, src);
+  return e
+    ? { ...e, added: [...e.added], removed: [...e.removed] }
+    : { src, added: [], removed: [] };
+}
+
+/**
+ * Add a beat at an audio-file time. `detectedTimes` lets us no-op when the beat
+ * lands on an existing (non-removed) detected beat — otherwise the merge would
+ * drop it anyway and we'd record a phantom edit/undo/write. Returns the SAME
+ * reference when nothing changed so callers can skip persisting.
+ */
+export function addUserBeat(
+  edits: BeatEditState | null,
+  src: string,
+  beat: UserBeat,
+  detectedTimes: number[] = [],
+): BeatEditState | null {
+  const active = activeEdits(edits, src);
+  // Already covered by a surviving detected beat → nothing to do.
+  const onLiveDetected =
+    detectedTimes.some((t) => near(t, beat.time)) &&
+    !(active?.removed ?? []).some((r) => near(r, beat.time));
+  if (onLiveDetected) return edits;
+  // Already an added beat here → nothing to do.
+  if ((active?.added ?? []).some((b) => near(b.time, beat.time))) return edits;
+
+  const next = base(edits, src);
+  // If a detected beat here was previously removed, drop the removal instead of stacking.
+  const ri = next.removed.findIndex((r) => near(r, beat.time));
+  if (ri >= 0) {
+    next.removed.splice(ri, 1);
+    return next;
+  }
+  next.added.push(beat);
+  return next;
+}
+
+/**
+ * Remove the beat nearest `time` — drops a user-added beat or hides a detected
+ * one. Returns the SAME reference when nothing changed (no added beat near
+ * `time`, and no live detected beat to hide) so callers can skip persisting a
+ * phantom edit/undo/write.
+ */
+export function removeUserBeat(
+  edits: BeatEditState | null,
+  src: string,
+  detectedTimes: number[],
+  time: number,
+): BeatEditState | null {
+  const active = activeEdits(edits, src);
+  const hasAdded = (active?.added ?? []).some((b) => near(b.time, time));
+  const detected = detectedTimes.find((t) => near(t, time));
+  const alreadyHidden =
+    detected !== undefined && (active?.removed ?? []).some((r) => near(r, detected));
+  if (!hasAdded && (detected === undefined || alreadyHidden)) return edits;
+
+  const next = base(edits, src);
+  const ai = next.added.findIndex((b) => near(b.time, time));
+  if (ai >= 0) {
+    next.added.splice(ai, 1);
+    return next;
+  }
+  if (detected !== undefined && !next.removed.some((r) => near(r, detected))) {
+    next.removed.push(detected);
+  }
+  return next;
+}
+
+/** Move the beat at `fromTime` to `toBeat` (delete original, add new). */
+export function moveUserBeat(
+  edits: BeatEditState | null,
+  src: string,
+  detectedTimes: number[],
+  fromTime: number,
+  toBeat: UserBeat,
+): BeatEditState | null {
+  const removed = removeUserBeat(edits, src, detectedTimes, fromTime);
+  return addUserBeat(removed, src, toBeat, detectedTimes) ?? removed;
+}

package/src/utils/clipboardPayload.ts

@@ -1,3 +1,5 @@
+import { COMPOSITION_ROOT_OPEN_TAG_RE } from "./compositionPatterns";
+
 const CLIPBOARD_MARKER = "hyperframes-clipboard:v1";
 
 export interface ClipboardPayload {
@@ -99,8 +101,7 @@ export function insertAsSibling(
   }
 
   // Fallback: insert after composition root opening tag (same as timeline clips)
-  const rootOpenTag = /<[^>]*data-composition-id="[^"]+"[^>]*>/i;
-  const rootMatch = rootOpenTag.exec(source);
+  const rootMatch = COMPOSITION_ROOT_OPEN_TAG_RE.exec(source);
   if (rootMatch && rootMatch.index != null) {
     const insertAt = rootMatch.index + rootMatch[0].length;
     return source.slice(0, insertAt) + newHtml + source.slice(insertAt);

package/src/utils/compositionPatterns.ts

@@ -0,0 +1,2 @@
+/** Matches the opening tag of a composition root element (e.g. `<div data-composition-id="main">`). */
+export const COMPOSITION_ROOT_OPEN_TAG_RE = /<[^>]*data-composition-id="[^"]+"[^>]*>/i;

package/src/utils/keyframeSelection.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest";
+import { selectedKeyframePercentagesForElement } from "./keyframeSelection";
+
+describe("selectedKeyframePercentagesForElement", () => {
+  it("returns the percentages of keyframes on the active element", () => {
+    const selected = new Set(["comp#a:25", "comp#a:75"]);
+    expect(selectedKeyframePercentagesForElement(selected, "comp#a")).toEqual([25, 75]);
+  });
+
+  it("drops keyframes that belong to other elements", () => {
+    // The bug: a stale shift-selection on `comp#b` would otherwise have its
+    // percentages applied to the now-active `comp#a`, deleting the wrong keyframes.
+    const selected = new Set(["comp#a:25", "comp#b:50", "comp#b:80"]);
+    expect(selectedKeyframePercentagesForElement(selected, "comp#a")).toEqual([25]);
+  });
+
+  it("returns nothing when no key belongs to the active element", () => {
+    const selected = new Set(["comp#b:50"]);
+    expect(selectedKeyframePercentagesForElement(selected, "comp#a")).toEqual([]);
+  });
+
+  it("returns nothing when there is no active element", () => {
+    const selected = new Set(["comp#a:25"]);
+    expect(selectedKeyframePercentagesForElement(selected, null)).toEqual([]);
+  });
+
+  it("returns nothing for an empty selection", () => {
+    expect(selectedKeyframePercentagesForElement(new Set(), "comp#a")).toEqual([]);
+  });
+
+  it("splits on the final colon so element ids containing ':' still match", () => {
+    const selected = new Set(["a:b:40"]);
+    expect(selectedKeyframePercentagesForElement(selected, "a:b")).toEqual([40]);
+  });
+
+  it("skips keys without a percentage separator", () => {
+    const selected = new Set(["comp#a"]);
+    expect(selectedKeyframePercentagesForElement(selected, "comp#a")).toEqual([]);
+  });
+
+  it("skips keys whose percentage is not a finite number", () => {
+    const selected = new Set(["comp#a:abc", "comp#a:NaN", "comp#a:30"]);
+    expect(selectedKeyframePercentagesForElement(selected, "comp#a")).toEqual([30]);
+  });
+});

package/src/utils/keyframeSelection.ts

@@ -0,0 +1,29 @@
+/**
+ * Resolves which keyframe percentages a bulk operation should act on.
+ *
+ * `selectedKeyframes` holds `"<elementId>:<percentage>"` keys and can contain
+ * keyframes from more than one element — e.g. a shift-selection made before the
+ * active element changed (via a keyframe click, a clip click, the layers panel,
+ * or the keyframe context menu). A bulk delete only targets the active
+ * element's animation, so keys belonging to other elements must be dropped;
+ * otherwise their percentages get applied to the active element and remove
+ * keyframes the user never selected on it.
+ *
+ * The element id is everything before the final `:` so element ids that happen
+ * to contain `:` are handled correctly.
+ */
+export function selectedKeyframePercentagesForElement(
+  selectedKeyframes: ReadonlySet<string>,
+  activeElementId: string | null,
+): number[] {
+  if (!activeElementId) return [];
+  const percentages: number[] = [];
+  for (const key of selectedKeyframes) {
+    const separator = key.lastIndexOf(":");
+    if (separator < 0) continue;
+    if (key.slice(0, separator) !== activeElementId) continue;
+    const percentage = Number(key.slice(separator + 1));
+    if (Number.isFinite(percentage)) percentages.push(percentage);
+  }
+  return percentages;
+}

package/src/utils/rounding.ts

@@ -0,0 +1,9 @@
+/** Round to 3 decimal places (millisecond precision for GSAP values). */
+export function roundTo3(val: number): number {
+  return Math.round(val * 1000) / 1000;
+}
+
+/** Round to 2 decimal places (centisecond precision for timeline values). */
+export function roundToCenti(val: number): number {
+  return Math.round(val * 100) / 100;
+}