@hyperframes/studio 0.7.46 → 0.7.47

package/src/hooks/previewVariablesStore.ts

@@ -0,0 +1,34 @@
+import { create } from "zustand";
+
+/**
+ * Ephemeral composition-variable overrides for the preview iframe.
+ *
+ * Values here are NEVER persisted to the composition — they ride the preview
+ * URL as `?variables=<json>` (see the studio-server preview routes), which the
+ * server injects as `window.__hfVariables` exactly like render-time injection,
+ * so what the user previews is what `hyperframes render --variables` produces.
+ * `null` means "preview with declared defaults".
+ */
+interface PreviewVariablesState {
+  values: Record<string, unknown> | null;
+  setValues: (values: Record<string, unknown> | null) => void;
+}
+
+export const usePreviewVariablesStore = create<PreviewVariablesState>((set) => ({
+  values: null,
+  setValues: (values) => set({ values: values && Object.keys(values).length > 0 ? values : null }),
+}));
+
+/**
+ * Apply the current preview-variable overrides to a preview URL (both the
+ * Player's initial mount and refreshPlayer's soft reload route through this,
+ * so a hard remount can't silently drop the active overrides).
+ */
+export function applyPreviewVariablesToUrl(url: URL): void {
+  const values = usePreviewVariablesStore.getState().values;
+  if (values) {
+    url.searchParams.set("variables", JSON.stringify(values));
+  } else {
+    url.searchParams.delete("variables");
+  }
+}

package/src/hooks/timelineEditingHelpers.test.ts

@@ -0,0 +1,104 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { applyTimelineStackingReorder, extendRootDurationIfNeeded } from "./timelineEditingHelpers";
+import type { TimelineElement } from "../player/store/playerStore";
+import { usePlayerStore } from "../player/store/playerStore";
+
+afterEach(() => {
+  usePlayerStore.getState().reset();
+});
+
+function makeIframeWith(html: string): HTMLIFrameElement {
+  const iframe = document.createElement("iframe");
+  document.body.append(iframe);
+  const doc = iframe.contentDocument;
+  if (!doc) throw new Error("expected iframe document");
+  doc.body.innerHTML = html;
+  return iframe;
+}
+
+function el(input: Partial<TimelineElement> & { id: string; tag: string }): TimelineElement {
+  return {
+    label: input.id,
+    start: 0,
+    duration: 5,
+    track: 0,
+    zIndex: 0,
+    hasExplicitZIndex: false,
+    stackingContextId: null,
+    ...input,
+  };
+}
+
+describe("applyTimelineStackingReorder", () => {
+  it("commits via the change's own locator even when the element is not in timelineElements", () => {
+    // Sub-comp children live in the preview iframe but NOT in the top-level
+    // timelineElements list — the intent must be self-contained.
+    const iframe = makeIframeWith(`<div id="chip" style="z-index: 1"></div>`);
+    const commit = vi.fn<(entries: unknown[]) => void>();
+
+    applyTimelineStackingReorder({
+      element: el({ id: "chip", tag: "div" }),
+      stackingReorder: {
+        contextKey: "scene",
+        placement: { type: "above", layerId: "layer:scene:x" },
+        zIndexChanges: [
+          {
+            key: "scenes/scene.html#chip",
+            zIndex: 5,
+            domId: "chip",
+            sourceFile: "scenes/scene.html",
+          },
+        ],
+      },
+      timelineElements: [], // element intentionally absent from the top-level list
+      iframe,
+      activeCompPath: "index.html",
+      commit,
+    });
+
+    expect(commit).toHaveBeenCalledTimes(1);
+    const entries = commit.mock.calls[0]![0] as Array<{
+      zIndex: number;
+      id?: string;
+      sourceFile: string;
+    }>;
+    expect(entries).toHaveLength(1);
+    expect(entries[0]!.zIndex).toBe(5);
+    expect(entries[0]!.id).toBe("chip");
+    expect(entries[0]!.sourceFile).toBe("scenes/scene.html");
+  });
+
+  it("never commits when the dragged clip is audio", () => {
+    const iframe = makeIframeWith(`<audio id="track"></audio>`);
+    const commit = vi.fn<(entries: unknown[]) => void>();
+
+    applyTimelineStackingReorder({
+      element: el({ id: "track", tag: "audio" }),
+      stackingReorder: {
+        contextKey: "main",
+        placement: { type: "above", layerId: "layer:main:x" },
+        zIndexChanges: [{ key: "track", zIndex: 5, domId: "track" }],
+      },
+      timelineElements: [],
+      iframe,
+      activeCompPath: "index.html",
+      commit,
+    });
+
+    expect(commit).not.toHaveBeenCalled();
+  });
+});
+
+describe("extendRootDurationIfNeeded", () => {
+  it("extends the player duration only when the new end is larger", () => {
+    usePlayerStore.getState().setDuration(4);
+
+    expect(extendRootDurationIfNeeded(5)).toBe(true);
+    expect(usePlayerStore.getState().duration).toBe(5);
+
+    expect(extendRootDurationIfNeeded(5)).toBe(false);
+    expect(extendRootDurationIfNeeded(3)).toBe(false);
+    expect(usePlayerStore.getState().duration).toBe(5);
+  });
+});

package/src/hooks/timelineEditingHelpers.ts

@@ -1,8 +1,121 @@
-import type { TimelineElement } from "../player/store/playerStore";
+import { type TimelineElement, usePlayerStore } from "../player/store/playerStore";
 import { applyPatchByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
-import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+import {
+  formatTimelineAttributeNumber,
+  type TimelineStackingReorderIntent,
+} from "../player/components/timelineEditing";
+import { getElementZIndex } from "../player/lib/layerOrdering";
+import { getTimelineElementIdentity } from "../player/lib/timelineElementHelpers";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
+import { selectedKeyframePercentagesForElement } from "../utils/keyframeSelection";
 import type { EditHistoryKind } from "../utils/editHistory";
+import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
+import { extendRootDurationInSource } from "../utils/rootDuration";
+
+function isHTMLElement(element: Element | null): element is HTMLElement {
+  if (!element) return false;
+  // Use the element's OWN realm's HTMLElement: timeline clips live in the preview
+  // iframe, and cross-realm `element instanceof HTMLElement` (main window) is
+  // always false — which silently dropped every timeline z-index commit.
+  const Ctor = element.ownerDocument?.defaultView?.HTMLElement ?? globalThis.HTMLElement;
+  return element instanceof Ctor;
+}
+
+/**
+ * Resolve a timeline vertical move to a z-index stacking reorder and commit it
+ * through the shared layers-panel reorder path. Reads live sibling z-index from
+ * the preview DOM, remaps with the dup-preserving reorder math, and writes only
+ * z-index (never data-track-index). No-op when the move isn't a reorder, the
+ * dragged clip is audio (no visual layer to restack), or the live siblings can't
+ * be resolved. Extracted from StudioApp's timeline hook to keep it under the
+ * studio 600-LOC cap.
+ */
+// fallow-ignore-next-line complexity
+export function applyTimelineStackingReorder(input: {
+  element: TimelineElement;
+  stackingReorder: TimelineStackingReorderIntent | null | undefined;
+  timelineElements: readonly TimelineElement[];
+  iframe: HTMLIFrameElement | null;
+  activeCompPath: string | null;
+  commit: TimelineZIndexReorderCommit | null | undefined;
+}): Promise<void> {
+  // Audio has no visual stacking; a vertical drag on it must never write z-index.
+  if (input.element.tag === "audio") return Promise.resolve();
+
+  const intent = input.stackingReorder ?? null;
+  if (intent == null || intent.zIndexChanges.length === 0) return Promise.resolve();
+
+  // Resolve each change's live element from the change's OWN locator (the intent
+  // is self-contained), falling back to the top-level element list. Sub-comp
+  // children aren't in `timelineElements`, so a list-only lookup would miss them.
+  const siblingByKey = new Map(
+    input.timelineElements.map((el) => [getTimelineElementIdentity(el), el]),
+  );
+  const doc = input.iframe?.contentDocument ?? null;
+  const findLive = (domId?: string, selector?: string, selectorIndex?: number): Element | null => {
+    if (!doc) return null;
+    if (domId) return doc.getElementById(domId);
+    if (selector) return doc.querySelectorAll(selector)[selectorIndex ?? 0] ?? null;
+    return null;
+  };
+  const commitEntries: Array<{
+    element: HTMLElement;
+    zIndex: number;
+    id?: string;
+    selector?: string;
+    selectorIndex?: number;
+    sourceFile: string;
+    key: string;
+  }> = [];
+
+  for (const change of intent.zIndexChanges) {
+    const sibling = siblingByKey.get(change.key);
+    const domId = change.domId ?? sibling?.domId;
+    const selector = change.selector ?? sibling?.selector;
+    const selectorIndex = change.selectorIndex ?? sibling?.selectorIndex;
+    const element = findLive(domId, selector, selectorIndex);
+    if (!isHTMLElement(element)) return Promise.resolve();
+    if (getElementZIndex(element) === change.zIndex) continue;
+    commitEntries.push({
+      element,
+      zIndex: change.zIndex,
+      id: domId ?? sibling?.id ?? change.key,
+      selector,
+      selectorIndex,
+      sourceFile: change.sourceFile ?? sibling?.sourceFile ?? input.activeCompPath ?? "index.html",
+      key: change.key,
+    });
+  }
+
+  if (commitEntries.length === 0) return Promise.resolve();
+  return input.commit?.(commitEntries) ?? Promise.resolve();
+}
+
+/**
+ * Remove the keyframes currently selected in the player store from the active
+ * element's GSAP animation. Reads selection lazily so it stays correct when
+ * invoked from a ref callback. Extracted from StudioApp to keep it under the
+ * studio 600-LOC cap.
+ */
+export function deleteSelectedKeyframes(session: {
+  selectedGsapAnimations: readonly { id: string; keyframes?: unknown }[];
+  handleGsapRemoveKeyframe: (animId: string, pct: number) => void;
+}): void {
+  const { selectedKeyframes, selectedElementId } = usePlayerStore.getState();
+  const animation = session.selectedGsapAnimations.find((anim) => anim.keyframes);
+  if (!animation) return;
+  // Only the active element's keyframes; a stale cross-element selection must not delete here.
+  for (const pct of selectedKeyframePercentagesForElement(selectedKeyframes, selectedElementId)) {
+    session.handleGsapRemoveKeyframe(animation.id, pct);
+  }
+}
+
+export function extendRootDurationIfNeeded(newEnd: number): boolean {
+  const store = usePlayerStore.getState();
+  if (newEnd <= store.duration) return false;
+  store.setDuration(newEnd);
+  return true;
+}
 
 // ── Types ──
 
@@ -10,6 +123,8 @@ export interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
+  /** Per-entry coalesce window override (ms); lets a slow follow-up still merge. */
+  coalesceMs?: number;
   files: Record<string, { before: string; after: string }>;
 }
 
@@ -72,8 +187,25 @@ export function patchIframeDomTiming(
   }
 }
 
+function postRootDurationToPreview(
+  iframe: HTMLIFrameElement | null,
+  durationSeconds: number,
+): void {
+  const duration = Number(durationSeconds);
+  if (!Number.isFinite(duration) || duration <= 0) return;
+  iframe?.contentWindow?.postMessage(
+    {
+      source: "hf-parent",
+      type: "control",
+      action: "set-root-duration",
+      durationSeconds: duration,
+    },
+    "*",
+  );
+}
+
 // fallow-ignore-next-line complexity
-export function resolveResizePlaybackStart(
+function resolveResizePlaybackStart(
   original: string,
   target: PatchTarget,
   element: TimelineElement,
@@ -99,6 +231,47 @@ export function resolveResizePlaybackStart(
   };
 }
 
+export function buildTimelineMoveTimingPatch(
+  original: string,
+  target: PatchTarget,
+  start: number,
+  duration: number,
+): string {
+  const patched = applyPatchByTarget(original, target, {
+    type: "attribute",
+    property: "start",
+    value: formatTimelineAttributeNumber(start),
+  });
+  return extendRootDurationInSource(patched, start + duration);
+}
+
+export function buildTimelineResizeTimingPatch(
+  original: string,
+  target: PatchTarget,
+  element: TimelineElement,
+  updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+): string {
+  const pbs = resolveResizePlaybackStart(original, target, element, updates);
+  let patched = applyPatchByTarget(original, target, {
+    type: "attribute",
+    property: "start",
+    value: formatTimelineAttributeNumber(updates.start),
+  });
+  patched = applyPatchByTarget(patched, target, {
+    type: "attribute",
+    property: "duration",
+    value: formatTimelineAttributeNumber(updates.duration),
+  });
+  if (pbs) {
+    patched = applyPatchByTarget(patched, target, {
+      type: "attribute",
+      property: pbs.attrName,
+      value: formatTimelineAttributeNumber(pbs.value),
+    });
+  }
+  return extendRootDurationInSource(patched, updates.start + updates.duration);
+}
+
 export interface PersistTimelineEditInput {
   projectId: string;
   element: TimelineElement;
@@ -141,6 +314,66 @@ export async function persistTimelineEdit(input: PersistTimelineEditInput): Prom
   input.domEditSaveTimestampRef.current = Date.now();
 }
 
+export interface PersistTimelineBatchChange {
+  element: TimelineElement;
+  buildPatches: (original: string, target: PatchTarget) => string;
+}
+
+export interface PersistTimelineBatchEditInput {
+  projectId: string;
+  activeCompPath: string | null;
+  label: string;
+  changes: PersistTimelineBatchChange[];
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: React.MutableRefObject<number>;
+  pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
+  coalesceKey?: string;
+}
+
+export async function persistTimelineBatchEdit(
+  input: PersistTimelineBatchEditInput,
+): Promise<void> {
+  const originals = new Map<string, string>();
+  const patchedByPath = new Map<string, string>();
+
+  for (const change of input.changes) {
+    const targetPath = change.element.sourceFile || input.activeCompPath || "index.html";
+    const original =
+      originals.get(targetPath) ?? (await readFileContent(input.projectId, targetPath));
+    originals.set(targetPath, original);
+
+    const patchTarget = buildPatchTarget(change.element);
+    if (!patchTarget) {
+      throw new Error(`Timeline element ${change.element.id} is missing a patchable target`);
+    }
+
+    const current = patchedByPath.get(targetPath) ?? original;
+    const patched = change.buildPatches(current, patchTarget);
+    if (patched === current) {
+      throw new Error(`Unable to patch timeline element ${change.element.id} in ${targetPath}`);
+    }
+    patchedByPath.set(targetPath, patched);
+  }
+
+  const files = Object.fromEntries(patchedByPath);
+  for (const targetPath of Object.keys(files)) {
+    input.pendingTimelineEditPathRef.current.add(targetPath);
+  }
+  input.domEditSaveTimestampRef.current = Date.now();
+  await saveProjectFilesWithHistory({
+    projectId: input.projectId,
+    label: input.label,
+    kind: "timeline",
+    coalesceKey: input.coalesceKey,
+    files,
+    readFile: async (path) => originals.get(path) ?? readFileContent(input.projectId, path),
+    writeFile: input.writeProjectFile,
+    recordEdit: input.recordEdit,
+  });
+  input.domEditSaveTimestampRef.current = Date.now();
+}
+
 export async function readFileContent(projectId: string, targetPath: string): Promise<string> {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
     throw new Error(`Unsafe path: ${targetPath}`);
@@ -158,6 +391,94 @@ export async function readFileContent(projectId: string, targetPath: string): Pr
   return data.content;
 }
 
+export type GsapMutationStatus = { mutated: boolean };
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+function readMutationStatus(value: unknown): GsapMutationStatus {
+  if (!isRecord(value)) return { mutated: false };
+  return { mutated: value.mutated === true || value.changed === true };
+}
+
+function readMutationError(value: unknown, fallback: string): string {
+  if (isRecord(value) && typeof value.error === "string") return value.error;
+  return fallback;
+}
+
+export async function finishTimelineTimingFallback(input: {
+  iframe: HTMLIFrameElement | null;
+  needsExtension: boolean;
+  rootDurationSeconds: number;
+  reloadPreview: () => void;
+  gsapMutation?: () => Promise<GsapMutationStatus>;
+  onGsapError: (error: unknown) => void;
+}): Promise<void> {
+  let gsapMutated = false;
+  if (input.gsapMutation) {
+    try {
+      gsapMutated = (await input.gsapMutation()).mutated;
+    } catch (error) {
+      input.onGsapError(error);
+      return;
+    }
+  }
+  if (input.needsExtension) {
+    postRootDurationToPreview(input.iframe, input.rootDurationSeconds);
+    if (gsapMutated) input.reloadPreview();
+    return;
+  }
+  input.reloadPreview();
+}
+
+// Coalesce window for folding a GSAP mutation into the preceding timing edit; only has to
+// outlast one GSAP server round-trip, never a real second edit.
+const GSAP_HISTORY_COALESCE_MS = 10_000;
+
+/**
+ * A server GSAP rewrite mutates the same file the timing patch just wrote, but AFTER the
+ * timing edit was recorded, leaving the recorded `after` stale so an undo hits a hash
+ * conflict. This snapshots every touched file, runs the mutation, then records a follow-up
+ * edit under the same coalesceKey with a window wide enough to survive the GSAP round-trip,
+ * folding both writes into one undo step. Returns the mutation status for caller reloads.
+ */
+export async function foldGsapMutationIntoHistory(input: {
+  projectId: string;
+  paths: string[];
+  label: string;
+  coalesceKey?: string;
+  recordEdit: (edit: RecordEditInput) => Promise<void>;
+  gsapMutation: () => Promise<GsapMutationStatus>;
+}): Promise<GsapMutationStatus> {
+  const uniquePaths = [...new Set(input.paths)];
+  const before = new Map<string, string>();
+  for (const path of uniquePaths) {
+    before.set(path, await readFileContent(input.projectId, path));
+  }
+  const status = await input.gsapMutation();
+  if (status.mutated) {
+    const files: Record<string, { before: string; after: string }> = {};
+    for (const path of uniquePaths) {
+      const priorContent = before.get(path);
+      const finalContent = await readFileContent(input.projectId, path);
+      if (priorContent !== undefined && finalContent !== priorContent) {
+        files[path] = { before: priorContent, after: finalContent };
+      }
+    }
+    if (Object.keys(files).length > 0) {
+      await input.recordEdit({
+        label: input.label,
+        kind: "timeline",
+        coalesceKey: input.coalesceKey,
+        coalesceMs: GSAP_HISTORY_COALESCE_MS,
+        files,
+      });
+    }
+  }
+  return status;
+}
+
 /**
  * Shift all GSAP animation positions targeting a given element by a time delta.
  * Calls the server-side GSAP mutation endpoint which uses the AST-based parser.
@@ -167,8 +488,8 @@ export async function shiftGsapPositions(
   filePath: string,
   elementId: string,
   delta: number,
-): Promise<void> {
-  if (delta === 0 || !elementId) return;
+): Promise<GsapMutationStatus> {
+  if (delta === 0 || !elementId) return { mutated: false };
   const res = await fetch(
     `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
     {
@@ -183,8 +504,9 @@ export async function shiftGsapPositions(
   );
   if (!res.ok) {
     const err = await res.json().catch(() => null);
-    throw new Error((err as { error?: string })?.error ?? "shift-positions failed");
+    throw new Error(readMutationError(err, "shift-positions failed"));
   }
+  return readMutationStatus(await res.json().catch(() => null));
 }
 
 export async function scaleGsapPositions(
@@ -195,9 +517,9 @@ export async function scaleGsapPositions(
   oldDuration: number,
   newStart: number,
   newDuration: number,
-): Promise<void> {
-  if (!elementId || oldDuration <= 0 || newDuration <= 0) return;
-  if (oldStart === newStart && oldDuration === newDuration) return;
+): Promise<GsapMutationStatus> {
+  if (!elementId || oldDuration <= 0 || newDuration <= 0) return { mutated: false };
+  if (oldStart === newStart && oldDuration === newDuration) return { mutated: false };
   const res = await fetch(
     `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
     {
@@ -215,8 +537,62 @@ export async function scaleGsapPositions(
   );
   if (!res.ok) {
     const err = await res.json().catch(() => null);
-    throw new Error((err as { error?: string })?.error ?? "scale-positions failed");
+    throw new Error(readMutationError(err, "scale-positions failed"));
   }
+  return readMutationStatus(await res.json().catch(() => null));
+}
+
+/** Single-clip move GSAP shift, folded into the timing edit's history entry (see above). */
+export function foldedShiftGsapMutation(input: {
+  projectId: string;
+  targetPath: string;
+  domId: string;
+  delta: number;
+  label: string;
+  coalesceKey?: string;
+  recordEdit: (edit: RecordEditInput) => Promise<void>;
+}): () => Promise<GsapMutationStatus> {
+  return () =>
+    foldGsapMutationIntoHistory({
+      projectId: input.projectId,
+      paths: [input.targetPath],
+      label: input.label,
+      coalesceKey: input.coalesceKey,
+      recordEdit: input.recordEdit,
+      gsapMutation: () =>
+        shiftGsapPositions(input.projectId, input.targetPath, input.domId, input.delta),
+    });
+}
+
+/** Single-clip resize GSAP scale, folded into the timing edit's history entry (see above). */
+export function foldedScaleGsapMutation(input: {
+  projectId: string;
+  targetPath: string;
+  domId: string;
+  from: { start: number; duration: number };
+  to: { start: number; duration: number };
+  label: string;
+  coalesceKey?: string;
+  recordEdit: (edit: RecordEditInput) => Promise<void>;
+}): () => Promise<GsapMutationStatus> {
+  return () =>
+    foldGsapMutationIntoHistory({
+      projectId: input.projectId,
+      paths: [input.targetPath],
+      label: input.label,
+      coalesceKey: input.coalesceKey,
+      recordEdit: input.recordEdit,
+      gsapMutation: () =>
+        scaleGsapPositions(
+          input.projectId,
+          input.targetPath,
+          input.domId,
+          input.from.start,
+          input.from.duration,
+          input.to.start,
+          input.to.duration,
+        ),
+    });
 }
 
 // Re-export applyPatchByTarget for use in the hook (avoids double import in callers)

package/src/hooks/useDomEditWiring.ts

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { usePlayerStore } from "../player";
+import { resolveTimelineIdForSelection } from "../utils/studioHelpers";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import { useGsapAnimationsForElement, usePopulateKeyframeCacheForFile } from "./useGsapTweenCache";
 import { useGsapAnimationFetchFallback } from "./useGsapAnimationFetchFallback";
@@ -170,13 +171,14 @@ export function useDomEditWiring({
 
   useEffect(() => {
     if (!domEditSelection?.id) return;
-    const { selectedElementId, elements, setSelectedElementId } = usePlayerStore.getState();
-    const matchKey = elements.find(
-      (el) => el.domId === domEditSelection.id || el.id === domEditSelection.id,
-    );
-    const key = matchKey ? (matchKey.key ?? matchKey.id) : null;
-    if (key && key !== selectedElementId) setSelectedElementId(key);
-  }, [domEditSelection?.id]);
+    const { selectedElementId, elements, setSelectionAnchor } = usePlayerStore.getState();
+    // Resolve through the canonical resolver (source-file + ancestor + active-comp
+    // fallback) rather than a narrow domId/id match, so a sub-composition selection
+    // maps to the same clip the rest of the selection pipeline picks. Use the
+    // anchor-only setter: this is a DOM->store echo and must not collapse a group.
+    const key = resolveTimelineIdForSelection(domEditSelection, elements, activeCompPath);
+    if (key && key !== selectedElementId) setSelectionAnchor(key);
+  }, [domEditSelection, activeCompPath]);
 
   // ── GSAP cache sync ──