@hyperframes/studio 0.7.56 → 0.7.58

package/src/hooks/timelineEditingHelpers.test.ts

@@ -2,8 +2,12 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import {
   applyTimelineStackingReorder,
+  buildTimelineMoveTimingPatch,
   deleteSelectedKeyframes,
   extendRootDurationIfNeeded,
+  patchIframeDomTiming,
+  persistTimelineBatchEdit,
+  type PersistTimelineBatchChange,
 } from "./timelineEditingHelpers";
 import type { TimelineElement } from "../player/store/playerStore";
 import { usePlayerStore } from "../player/store/playerStore";
@@ -39,7 +43,11 @@ 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 iframe = makeIframeWith(`
+      <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+        <div id="chip" style="z-index: 1"></div>
+      </div>
+    `);
     const commit = vi.fn<(entries: unknown[]) => void>();
 
     applyTimelineStackingReorder({
@@ -93,6 +101,92 @@ describe("applyTimelineStackingReorder", () => {
 
     expect(commit).not.toHaveBeenCalled();
   });
+
+  it("resolves selectorIndex within the change's source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div class="chip">root</div>
+        <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+          <div class="chip">scene zero</div>
+          <div class="chip" style="z-index: 1">scene one</div>
+        </div>
+      </div>
+    `);
+    const sceneOne = iframe.contentDocument?.querySelectorAll(".chip")[2];
+    const commit = vi.fn<(entries: unknown[]) => void>();
+
+    applyTimelineStackingReorder({
+      element: el({ id: "scene-one", tag: "div" }),
+      stackingReorder: {
+        contextKey: "scene",
+        placement: { type: "above", layerId: "layer:scene:x" },
+        zIndexChanges: [
+          {
+            key: "scenes/scene.html#.chip:1",
+            zIndex: 5,
+            selector: ".chip",
+            selectorIndex: 1,
+            sourceFile: "scenes/scene.html",
+          },
+        ],
+      },
+      timelineElements: [],
+      iframe,
+      activeCompPath: "index.html",
+      commit,
+    });
+
+    const entries = commit.mock.calls[0]![0] as Array<{ element: Element }>;
+    expect(entries[0]!.element).toBe(sceneOne);
+  });
+});
+
+describe("patchIframeDomTiming", () => {
+  it("resolves selectorIndex within the element's source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div class="clip" data-start="1">root</div>
+        <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+          <div class="clip" data-start="2">scene zero</div>
+          <div class="clip" data-start="3">scene one</div>
+        </div>
+      </div>
+    `);
+    const clips = iframe.contentDocument?.querySelectorAll<HTMLElement>(".clip");
+    const target = el({
+      id: "scene-one",
+      tag: "div",
+      selector: ".clip",
+      selectorIndex: 1,
+      sourceFile: "scenes/scene.html",
+    });
+
+    patchIframeDomTiming(iframe, target, [["data-start", "9"]], "index.html");
+
+    expect([...clips!].map((clip) => clip.dataset.start)).toEqual(["1", "2", "9"]);
+  });
+
+  it("resolves duplicate domId within the element's source file", () => {
+    const iframe = makeIframeWith(`
+      <div data-composition-id="root">
+        <div id="card" data-start="1">root</div>
+        <div data-composition-id="scene" data-composition-file="scenes/scene.html">
+          <div id="card" data-start="2">scene</div>
+        </div>
+      </div>
+    `);
+    const cards = iframe.contentDocument?.querySelectorAll<HTMLElement>("#card");
+    const target = el({
+      id: "scene-card",
+      tag: "div",
+      domId: "card",
+      sourceFile: "scenes/scene.html",
+    });
+
+    patchIframeDomTiming(iframe, target, [["data-start", "9"]], "index.html");
+
+    expect([...cards!].map((card) => card.dataset.start)).toEqual(["1", "9"]);
+  });
 });
 
 describe("extendRootDurationIfNeeded", () => {
@@ -108,6 +202,94 @@ describe("extendRootDurationIfNeeded", () => {
   });
 });
 
+describe("persistTimelineBatchEdit", () => {
+  const SOURCE = `<div id="root"><video id="a" class="clip" data-start="1" data-track-index="0"></video><video id="b" class="clip" data-start="2" data-track-index="1"></video></div>`;
+
+  function batchInput(changes: PersistTimelineBatchChange[], writes: Array<[string, string]>) {
+    return {
+      projectId: "p1",
+      activeCompPath: "index.html",
+      label: "Move timeline clips",
+      changes,
+      writeProjectFile: async (path: string, content: string) => {
+        writes.push([path, content]);
+      },
+      recordEdit: async () => {},
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set<string>() },
+    };
+  }
+
+  function stubReadFileContent(content: string) {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({
+        ok: true,
+        json: async () => ({ content }),
+      })),
+    );
+  }
+
+  function moveMember(
+    id: string,
+    start: number,
+    fromTrack: number,
+    toTrack: number,
+  ): PersistTimelineBatchChange {
+    return {
+      element: el({ id, tag: "video", domId: id, start, track: fromTrack }),
+      buildPatches: (original, target) =>
+        buildTimelineMoveTimingPatch(original, target, start, 5, toTrack),
+    };
+  }
+
+  async function runBatch(changes: PersistTimelineBatchChange[]) {
+    stubReadFileContent(SOURCE);
+    const writes: Array<[string, string]> = [];
+    await persistTimelineBatchEdit(batchInput(changes, writes));
+    return writes;
+  }
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("skips no-op members instead of aborting the batch (track-insert renumber)", async () => {
+    // A track-insert renumber can include a member whose attributes already
+    // hold the target values — its patch is string-identical. The batch must
+    // skip it and still persist the members that DID change.
+    const writes = await runBatch([
+      // no-op: data-start already "1", track already 0
+      moveMember("a", 1, 0, 0),
+      // real change: track 1 -> 2
+      moveMember("b", 2, 1, 2),
+    ]);
+
+    expect(writes).toHaveLength(1);
+    expect(writes[0]![0]).toBe("index.html");
+    expect(writes[0]![1]).toContain('id="b" class="clip" data-start="2" data-track-index="2"');
+  });
+
+  it("saves nothing when every member is a no-op", async () => {
+    const writes = await runBatch([moveMember("a", 1, 0, 0)]);
+
+    expect(writes).toHaveLength(0);
+  });
+
+  it("throws on a mistargeted member instead of silently dropping it", async () => {
+    // A member whose target does not resolve in the source (stale id) patches
+    // to the identical string too — but that is a targeting FAILURE, not an
+    // already-at-target no-op, and must abort the batch like the single path.
+    stubReadFileContent(SOURCE);
+    const writes: Array<[string, string]> = [];
+
+    await expect(
+      persistTimelineBatchEdit(batchInput([moveMember("ghost", 3, 0, 2)], writes)),
+    ).rejects.toThrow("Unable to patch timeline element ghost in index.html");
+    expect(writes).toHaveLength(0);
+  });
+});
+
 describe("deleteSelectedKeyframes", () => {
   it("coalesces all removals and reloads only after the last one", () => {
     usePlayerStore.setState({

package/src/hooks/timelineEditingHelpers.ts

@@ -1,15 +1,21 @@
 import { type TimelineElement, usePlayerStore } from "../player/store/playerStore";
-import { applyPatchByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
+import { applyPatchByTarget, findTagByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
 import {
   formatTimelineAttributeNumber,
   type TimelineStackingReorderIntent,
 } from "../player/components/timelineEditing";
 import { getElementZIndex } from "../player/lib/layerOrdering";
-import { getTimelineElementIdentity } from "../player/lib/timelineElementHelpers";
+import {
+  furthestClipEndFromSource,
+  getTimelineElementIdentity,
+} from "../player/lib/timelineElementHelpers";
 import { saveProjectFilesWithHistory, type RecordEditInput } from "../utils/studioFileHistory";
 import type { TimelineZIndexReorderCommit } from "./useTimelineEditingTypes";
-import { extendRootDurationInSource } from "../utils/rootDuration";
+import { setCompositionDurationToContent } from "../utils/timelineAssetDrop";
+import { readFileContent } from "./timelineTimingSync";
+import { findElementForSelection } from "../components/editor/domEditingElement";
 export { deleteSelectedKeyframes } from "./deleteSelectedKeyframes";
+export { readFileContent };
 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
@@ -48,12 +54,6 @@ export function applyTimelineStackingReorder(input: {
     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;
@@ -68,7 +68,15 @@ export function applyTimelineStackingReorder(input: {
     const domId = change.domId ?? sibling?.domId;
     const selector = change.selector ?? sibling?.selector;
     const selectorIndex = change.selectorIndex ?? sibling?.selectorIndex;
-    const element = findLive(domId, selector, selectorIndex);
+    const sourceFile =
+      change.sourceFile ?? sibling?.sourceFile ?? input.activeCompPath ?? "index.html";
+    const element = doc
+      ? findElementForSelection(
+          doc,
+          { id: domId, selector, selectorIndex, sourceFile },
+          input.activeCompPath,
+        )
+      : null;
     if (!isHTMLElement(element)) return Promise.resolve();
     if (getElementZIndex(element) === change.zIndex) continue;
     commitEntries.push({
@@ -77,12 +85,15 @@ export function applyTimelineStackingReorder(input: {
       id: domId ?? sibling?.id ?? change.key,
       selector,
       selectorIndex,
-      sourceFile: change.sourceFile ?? sibling?.sourceFile ?? input.activeCompPath ?? "index.html",
+      sourceFile,
       key: change.key,
     });
   }
   if (commitEntries.length === 0) return Promise.resolve();
-  return input.commit?.(commitEntries, input.coalesceKey) ?? Promise.resolve();
+  // The durability report is for gesture-level callers (z→lane mirror); this
+  // lane-drag z-sync path has no dependent follow-up write — swallow it.
+  // Promise.resolve-wrapped: a commit implementation may return void.
+  return Promise.resolve(input.commit?.(commitEntries, input.coalesceKey)).then(() => undefined);
 }
 export function extendRootDurationIfNeeded(newEnd: number): boolean {
   const store = usePlayerStore.getState();
@@ -121,15 +132,22 @@ export type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
 export function findTimelineElementInIframe(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
+  activeCompositionPath: string | null = null,
 ): Element | null {
   try {
     const doc = iframe?.contentDocument;
     if (!doc) return null;
-    return element.domId
-      ? doc.getElementById(element.domId)
-      : element.selector
-        ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
-        : null;
+    return findElementForSelection(
+      doc,
+      {
+        hfId: element.hfId,
+        id: element.domId,
+        selector: element.selector,
+        selectorIndex: element.selectorIndex,
+        sourceFile: element.sourceFile || activeCompositionPath || "index.html",
+      },
+      activeCompositionPath,
+    );
   } catch {
     return null;
   }
@@ -138,31 +156,16 @@ export function patchIframeDomTiming(
   iframe: HTMLIFrameElement | null,
   element: TimelineElement,
   attrs: Array<[string, string]>,
+  activeCompositionPath: string | null = null,
 ): void {
   try {
-    const el = findTimelineElementInIframe(iframe, element);
+    const el = findTimelineElementInIframe(iframe, element, activeCompositionPath);
     if (!el) return;
     for (const [name, value] of attrs) el.setAttribute(name, value);
   } catch {
     // Cross-origin or mid-navigation — file save is enqueued; iframe patch is best-effort.
   }
 }
-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
 function resolveResizePlaybackStart(
   original: string,
@@ -215,7 +218,12 @@ export function buildTimelineMoveTimingPatch(
       value: formatTimelineAttributeNumber(track),
     });
   }
-  return extendRootDurationInSource(patched, start + duration);
+  // Content-driven duration: sync data-duration to the furthest clip end read
+  // from the PATCHED SOURCE (raw data-duration), so it grows if a clip moved
+  // past the end and shrinks if the furthest clip moved left. Measured from the
+  // source, NOT the store — store durations are runtime-truncated to the current
+  // comp length, which would ratchet the duration down every move.
+  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
 }
 
 export function buildTimelineResizeTimingPatch(
@@ -242,7 +250,10 @@ export function buildTimelineResizeTimingPatch(
       value: formatTimelineAttributeNumber(pbs.value),
     });
   }
-  return extendRootDurationInSource(patched, updates.start + updates.duration);
+  // Content-driven duration from the PATCHED SOURCE (raw data-duration) —
+  // grows/shrinks to the furthest clip end. Not from the store, whose
+  // durations are runtime-truncated.
+  return setCompositionDurationToContent(patched, furthestClipEndFromSource(patched));
 }
 
 export interface PersistTimelineEditInput {
@@ -302,6 +313,8 @@ export interface PersistTimelineBatchEditInput {
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
   coalesceKey?: string;
+  /** Per-entry undo coalesce window override (ms) — see EditHistoryEntry.coalesceMs. */
+  coalesceMs?: number;
 }
 
 export async function persistTimelineBatchEdit(
@@ -322,13 +335,24 @@ export async function persistTimelineBatchEdit(
     }
 
     const current = patchedByPath.get(targetPath) ?? original;
-    const patched = change.buildPatches(current, patchTarget);
-    if (patched === current) {
+    // Resolve the target FIRST: byte-identical output below is only a legit
+    // no-op when the member actually resolved in the source. A mistargeted
+    // member (stale id/selector) must fail loudly like the single-edit path,
+    // not be silently dropped as "already at target".
+    if (!findTagByTarget(current, patchTarget)) {
       throw new Error(`Unable to patch timeline element ${change.element.id} in ${targetPath}`);
     }
+    const patched = change.buildPatches(current, patchTarget);
+    // The target resolved, so a member whose attributes already hold the target
+    // values patches to the identical string — e.g. a track-insert renumber
+    // where one clip's lane is already correct. That is a legitimate no-op:
+    // skip it instead of aborting (and rolling back) the whole batch.
+    if (patched === current) continue;
     patchedByPath.set(targetPath, patched);
   }
 
+  if (patchedByPath.size === 0) return;
+
   const files = Object.fromEntries(patchedByPath);
   for (const targetPath of Object.keys(files)) {
     input.pendingTimelineEditPathRef.current.add(targetPath);
@@ -339,6 +363,7 @@ export async function persistTimelineBatchEdit(
     label: input.label,
     kind: "timeline",
     coalesceKey: input.coalesceKey,
+    coalesceMs: input.coalesceMs,
     files,
     readFile: async (path) => originals.get(path) ?? readFileContent(input.projectId, path),
     writeFile: input.writeProjectFile,
@@ -347,227 +372,6 @@ export async function persistTimelineBatchEdit(
   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}`);
-  }
-  const response = await fetch(
-    `/api/projects/${projectId}/files/${encodeURIComponent(targetPath)}`,
-  );
-  if (!response.ok) {
-    throw new Error(`Failed to read ${targetPath}`);
-  }
-  const data = (await response.json()) as { content?: string };
-  if (typeof data.content !== "string") {
-    throw new Error(`Missing file contents for ${targetPath}`);
-  }
-  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.
- */
-export async function shiftGsapPositions(
-  projectId: string,
-  filePath: string,
-  elementId: string,
-  delta: number,
-): Promise<GsapMutationStatus> {
-  if (delta === 0 || !elementId) return { mutated: false };
-  const res = await fetch(
-    `/api/projects/${projectId}/gsap-mutations/${encodeURIComponent(filePath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        type: "shift-positions",
-        targetSelector: `#${elementId}`,
-        delta,
-      }),
-    },
-  );
-  if (!res.ok) {
-    const err = await res.json().catch(() => null);
-    throw new Error(readMutationError(err, "shift-positions failed"));
-  }
-  return readMutationStatus(await res.json().catch(() => null));
-}
-
-export async function scaleGsapPositions(
-  projectId: string,
-  filePath: string,
-  elementId: string,
-  oldStart: number,
-  oldDuration: number,
-  newStart: number,
-  newDuration: number,
-): 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)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        type: "scale-positions",
-        targetSelector: `#${elementId}`,
-        oldStart,
-        oldDuration,
-        newStart,
-        newDuration,
-      }),
-    },
-  );
-  if (!res.ok) {
-    const err = await res.json().catch(() => null);
-    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,
-        ),
-    });
-}
-
 export { applyPatchByTarget, formatTimelineAttributeNumber };
 
 export { patchDocumentRootDuration } from "./timelineEditingGsap";