@hyperframes/studio 0.8.47 → 0.8.49

package/src/hooks/useDomEditSession.ts

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { isAudioDomElement } from "../utils/timelineInspector";
-import type { SelectElementOptions, TimelineElement } from "../player";
+import type { TimelineElement } from "../player";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { RightPanelTab } from "../utils/studioHelpers";
 import type { PatchTarget } from "../utils/sourcePatcher";
@@ -21,25 +21,15 @@ import { useGsapAwareEditing } from "./useGsapAwareEditing";
 import { useStudioSelectionPublisher } from "./useStudioSelectionPublisher";
 import { useKeyframeEaseCommits } from "./useKeyframeEaseCommits";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import { membersForDelete } from "./domEditDeleteMembers";
+import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMembers";
 import type { RecordEditInput } from "./domEditDeleteMembers";
+import type { DomEditTimelineParams } from "./useDomSelectionTypes";
 // Re-exported: the delete rule lives in its own module now, and callers (and its
 // own test) have always imported it from here.
 export { membersForDelete };
 
-export interface UseDomEditSessionParams {
-  projectId: string | null;
-  activeCompPath: string | null;
-  compIdToSrc: Map<string, string>;
-  captionEditMode: boolean;
+export interface UseDomEditSessionParams extends DomEditTimelineParams {
   compositionLoading: boolean;
-  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
-  timelineElements: TimelineElement[];
-  getTimelineSelectionSet: () => ReadonlySet<string>;
-  setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
-  setTimelineSelectionSet: (ids: Set<string>) => void;
-  setRightCollapsed: (collapsed: boolean) => void;
-  setRightPanelTab: (tab: RightPanelTab) => void;
   showToast: (message: string, tone?: "error" | "info") => void;
   isRecordingRef?: React.RefObject<boolean>;
   refreshPreviewDocumentVersion: () => void;
@@ -68,6 +58,9 @@ export interface UseDomEditSessionParams {
   sdkSession?: Composition | null;
   publishSdkSession?: PublishSdkSession;
   forceReloadSdkSession?: () => void;
+  /** The timeline context menu's delete op — a canvas selection that IS a
+   *  timeline row hands off here instead of the REST remove-elements path. */
+  handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
 }
 
 export function useDomEditSession({
@@ -109,6 +102,7 @@ export function useDomEditSession({
   sdkSession,
   publishSdkSession,
   forceReloadSdkSession,
+  handleTimelineElementsDelete,
 }: UseDomEditSessionParams) {
   const isMasterView = !activeCompPath || activeCompPath === "index.html";
   void _setRefreshKey;
@@ -260,11 +254,9 @@ export function useDomEditSession({
     forceReloadSdkSession,
     onTrySdkPersist: sdkSession
       ? (selection, operations, originalContent, targetPath, options) => {
-          // Resolver shadow runs regardless of the cutover flag — decoupled tripwire.
-          // Pass originalContent so the runtime-node filter can suppress hf-ids
-          // absent from source (script-created nodes the SDK can't model), and
-          // the paths so cross-file edits (session models only the active comp)
-          // skip instead of emitting structural element_not_found noise.
+          // Decoupled tripwire, runs regardless of the cutover flag. originalContent lets
+          // the runtime-node filter suppress hf-ids absent from source (script-created
+          // nodes); the paths let a cross-file edit skip instead of a false not-found.
           runResolverShadow(sdkSession, selection.hfId, operations, originalContent, {
             targetPath,
             compositionPath: activeCompPath,
@@ -298,9 +290,8 @@ export function useDomEditSession({
             publishSession: publishSdkSession,
           })
       : undefined,
-    // Resolver shadow for the z-index reorder edit: it takes the server path (no
-    // SDK persist), but the tripwire is decoupled from cutover — record whether
-    // the SDK resolves each reordered element (the reorderElements op's targets).
+    // Z-index reorder takes the server path (no SDK persist); this decoupled
+    // tripwire still records whether the SDK resolves each reordered target.
     onReorderShadow: sdkSession
       ? (targets: string[]) => {
           // Single-flight: every target in one reorder batch shares the same file, so
@@ -326,21 +317,33 @@ export function useDomEditSession({
     reloadPreview,
     clearDomSelection,
     forceReloadSdkSession,
+    timelineElements,
   });
 
   const handleDomEditElementDelete = useCallback(
     async (selection: DomEditSelection, options?: { expandGroup?: boolean }) => {
-      // Same structural edit the timeline delete refuses mid-recording, so it
-      // refuses here too — this is now the path a Delete press takes whenever
-      // the canvas holds a selection.
+      // Same structural edit the timeline delete refuses mid-recording.
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
       }
       const members = membersForDelete(selection, domEditGroupSelectionsRef.current, options);
+      // A selection that is itself timeline rows shares the context menu's delete op.
+      const timelineTargets = timelineElementsForDelete(members, timelineElements);
+      if (timelineTargets) {
+        await handleTimelineElementsDelete(timelineTargets);
+        return;
+      }
       await handleDomEditElementsDelete(members);
     },
-    [domEditGroupSelectionsRef, handleDomEditElementsDelete, isRecordingRef, showToast],
+    [
+      domEditGroupSelectionsRef,
+      handleDomEditElementsDelete,
+      handleTimelineElementsDelete,
+      isRecordingRef,
+      showToast,
+      timelineElements,
+    ],
   );
 
   const handleGroupSelection = useCallback(() => {
@@ -351,14 +354,8 @@ export function useDomEditSession({
       showToast("Select at least 2 elements to group", "info");
       return;
     }
-    // A layout group is a positioned wrapper: it takes the members' bounding
-    // box, rebases each child's left/top against it, and adopts the topmost
-    // z-index. An <audio> clip has no box — offsetWidth/Height are 0 — so
-    // grouping audio produced a 0x0 div with inline left/top written onto
-    // elements that have never been laid out, and the timeline gained a
-    // wrapper standing for nothing audible. The audio answer to "these clips
-    // belong together" is an <hf-audio-group> bus, which the timeline's own FX
-    // pointer creates, so the refusal names it rather than just declining.
+    // A layout group takes the members' bounding box; audio has no box (0x0),
+    // so it groups into an <hf-audio-group> bus via the track's FX pointer instead.
     if (members.some((m) => isAudioDomElement(m.element))) {
       showToast(
         members.every((m) => isAudioDomElement(m.element))

package/src/hooks/useDomSelectionTypes.ts

@@ -20,10 +20,11 @@ export interface ResolveDomSelectionOptions {
   exactTarget?: boolean;
 }
 
-export interface UseDomSelectionParams {
+// Shared by every hook that needs the project/timeline/panel context a DOM
+// edit session is built around — useDomEditSession has its own superset.
+export interface DomEditTimelineParams {
   projectId: string | null;
   activeCompPath: string | null;
-  isMasterView: boolean;
   compIdToSrc: Map<string, string>;
   captionEditMode: boolean;
   previewIframeRef: MutableRefObject<HTMLIFrameElement | null>;
@@ -34,6 +35,10 @@ export interface UseDomSelectionParams {
   setTimelineSelectionSet: (ids: Set<string>) => void;
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
+}
+
+export interface UseDomSelectionParams extends DomEditTimelineParams {
+  isMasterView: boolean;
   previewIframe: HTMLIFrameElement | null;
   refreshKey: number;
   rightPanelTab: RightPanelTab;

package/src/hooks/useElementLifecycleOps.ts

@@ -389,15 +389,7 @@ export function useElementLifecycleOps({
     [commitDomEditPatchBatches, onReorderShadow],
   );
 
-  const handleDomEditElementDelete = useCallback(
-    async (selection: DomEditSelection) => {
-      await handleDomEditElementsDelete([selection]);
-    },
-    [handleDomEditElementsDelete],
-  );
-
   return {
-    handleDomEditElementDelete,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit,
   };

package/src/hooks/useFileManager.projectOwnership.test.tsx

@@ -7,7 +7,6 @@ vi.mock("./useFileTree", () => ({
   useFileTree: () => ({
     projectDir: "",
     fileTree: [],
-    setFileTree: vi.fn(),
     fileTreeLoaded: true,
     refreshFileTree: vi.fn(async () => {}),
     compositions: [],

package/src/hooks/useFileManager.ts

@@ -67,7 +67,6 @@ export function useFileManager({
   const {
     projectDir,
     fileTree,
-    setFileTree,
     fileTreeLoaded,
     refreshFileTree,
     compositions,
@@ -501,7 +500,6 @@ export function useFileManager({
     projectDir,
     fileTree,
     fileTreeLoaded,
-    setFileTree,
 
     // Refs
     editingPathRef,

package/src/hooks/useFileTree.test.tsx

@@ -0,0 +1,214 @@
+// @vitest-environment happy-dom
+
+import { act, useImperativeHandle, useRef, forwardRef } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useFileTree } from "./useFileTree";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+});
+
+interface Handle {
+  compositions: string[];
+  refresh: () => Promise<void>;
+}
+
+const Harness = forwardRef<Handle, { projectId: string }>(function Harness({ projectId }, ref) {
+  const projectIdRef = useRef(projectId);
+  projectIdRef.current = projectId;
+  const { compositions, refreshFileTree } = useFileTree({ projectId, projectIdRef });
+  useImperativeHandle(ref, () => ({ compositions, refresh: refreshFileTree }), [
+    compositions,
+    refreshFileTree,
+  ]);
+  return null;
+});
+
+async function renderHarness(projectId: string): Promise<{ current: Handle | null }> {
+  const handleRef = { current: null as Handle | null };
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+
+  await act(async () => {
+    root?.render(
+      <Harness
+        ref={(h) => {
+          handleRef.current = h;
+        }}
+        projectId={projectId}
+      />,
+    );
+    await Promise.resolve();
+    await Promise.resolve();
+  });
+
+  return handleRef;
+}
+
+describe("useFileTree.refreshFileTree", () => {
+  it("updates compositions, not just the raw file list, on refresh", async () => {
+    let call = 0;
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async () => {
+      call += 1;
+      // Initial load: one composition. After a refresh (e.g. a new file created),
+      // the server now reports a second one — this is the exact shape a refresh
+      // after creating/duplicating a composition produces.
+      const body =
+        call === 1
+          ? { files: ["index.html"], compositions: ["index.html"] }
+          : { files: ["index.html", "hero.html"], compositions: ["index.html", "hero.html"] };
+      return new Response(JSON.stringify(body), { status: 200 });
+    });
+
+    const handleRef = await renderHarness("project-a");
+    expect(handleRef.current?.compositions).toEqual(["index.html"]);
+
+    await act(async () => {
+      await handleRef.current?.refresh();
+    });
+    expect(handleRef.current?.compositions).toEqual(["index.html", "hero.html"]);
+
+    fetchSpy.mockRestore();
+  });
+
+  it("keeps the most-recently-issued refresh's data when an earlier one resolves later", async () => {
+    let call = 0;
+    const deferred: Array<(value: Response) => void> = [];
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async () => {
+      call += 1;
+      if (call === 1) {
+        return new Response(
+          JSON.stringify({ files: ["index.html"], compositions: ["index.html"] }),
+          {
+            status: 200,
+          },
+        );
+      }
+      return new Promise<Response>((resolve) => {
+        deferred.push(resolve);
+      });
+    });
+
+    const handleRef = await renderHarness("project-a");
+
+    let firstDone = false;
+    let secondDone = false;
+    act(() => {
+      void handleRef.current?.refresh().then(() => {
+        firstDone = true;
+      });
+      void handleRef.current?.refresh().then(() => {
+        secondDone = true;
+      });
+    });
+
+    // The second (later-issued) request resolves first, with its own data.
+    await act(async () => {
+      deferred[1](
+        new Response(
+          JSON.stringify({
+            files: ["index.html", "second.html"],
+            compositions: ["index.html", "second.html"],
+          }),
+          {
+            status: 200,
+          },
+        ),
+      );
+      await vi.waitFor(() => secondDone);
+    });
+    expect(handleRef.current?.compositions).toEqual(["index.html", "second.html"]);
+
+    // The first (earlier-issued, now stale) request resolves after — it must not win.
+    await act(async () => {
+      deferred[0](
+        new Response(
+          JSON.stringify({
+            files: ["index.html", "stale.html"],
+            compositions: ["index.html", "stale.html"],
+          }),
+          {
+            status: 200,
+          },
+        ),
+      );
+      await vi.waitFor(() => firstDone);
+    });
+    expect(handleRef.current?.compositions).toEqual(["index.html", "second.html"]);
+
+    fetchSpy.mockRestore();
+  });
+
+  it("aborts the superseded request's fetch when a newer refresh is issued", async () => {
+    let call = 0;
+    const signals: AbortSignal[] = [];
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (_url, init?: RequestInit) => {
+        call += 1;
+        if (call === 1) {
+          return new Response(
+            JSON.stringify({ files: ["index.html"], compositions: ["index.html"] }),
+            { status: 200 },
+          );
+        }
+        if (init?.signal) signals.push(init.signal);
+        return new Promise<Response>(() => {});
+      });
+
+    const handleRef = await renderHarness("project-a");
+
+    act(() => {
+      void handleRef.current?.refresh();
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+    expect(signals).toHaveLength(1);
+    expect(signals[0].aborted).toBe(false);
+
+    act(() => {
+      void handleRef.current?.refresh();
+    });
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(signals).toHaveLength(2);
+    expect(signals[0].aborted).toBe(true);
+    expect(signals[1].aborted).toBe(false);
+
+    fetchSpy.mockRestore();
+  });
+
+  it("keeps the prior compositions list when a refresh response omits the field", async () => {
+    let call = 0;
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(async () => {
+      call += 1;
+      const body =
+        call === 1
+          ? { files: ["index.html"], compositions: ["index.html"] }
+          : { files: ["index.html", "hero.html"] };
+      return new Response(JSON.stringify(body), { status: 200 });
+    });
+
+    const handleRef = await renderHarness("project-a");
+    expect(handleRef.current?.compositions).toEqual(["index.html"]);
+
+    await act(async () => {
+      await handleRef.current?.refresh();
+    });
+    // `files` grew but the response carried no `compositions` field — the known-good
+    // list must survive, not collapse to empty.
+    expect(handleRef.current?.compositions).toEqual(["index.html"]);
+
+    fetchSpy.mockRestore();
+  });
+});

package/src/hooks/useFileTree.ts

@@ -1,5 +1,5 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
 import { FONT_EXT } from "../utils/mediaTypes";
 import { fontFamilyFromAssetPath, type ImportedFontAsset } from "../components/editor/fontAssets";
 import { captureProjectProvenance } from "../components/feedback/projectProvenance";
@@ -9,52 +9,95 @@ interface UseFileTreeOptions {
   projectIdRef: React.RefObject<string | null>;
 }
 
+interface FetchedFileTree {
+  projectId: string;
+  loaded: boolean;
+  fileTree: string[];
+  compositionPaths: string[];
+  projectDir: string | null;
+}
+
+// Stable references so a mismatched projectId doesn't create a new array every render
+// and defeat useMemo/useCallback deps downstream (e.g. the `assets` memo below).
+const EMPTY_FILE_LIST: string[] = [];
+
+/**
+ * Holds the tree with the `projectId` it was fetched for; exposes empty/not-loaded
+ * whenever that id doesn't match the current one, so a switch can't read another project's tree.
+ */
 export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
-  const [projectDir, setProjectDir] = useState<string | null>(null);
-  const [fileTree, setFileTree] = useState<string[]>([]);
-  const [compositionPaths, setCompositionPaths] = useState<string[]>([]);
-  const [fileTreeLoaded, setFileTreeLoaded] = useState(false);
+  const [fetched, setFetched] = useState<FetchedFileTree | null>(null);
+  const current = fetched?.projectId === projectId ? fetched : null;
+  const fileTree = current?.fileTree ?? EMPTY_FILE_LIST;
+  const compositionPaths = current?.compositionPaths ?? EMPTY_FILE_LIST;
+  const projectDir = current?.projectDir ?? null;
+  const fileTreeLoaded = current?.loaded ?? false;
 
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
-    if (!projectId) {
-      setFileTreeLoaded(false);
-      return;
-    }
+    if (!projectId) return;
     let cancelled = false;
-    setFileTreeLoaded(false);
+    setFetched({ projectId, loaded: false, fileTree: [], compositionPaths: [], projectDir: null });
     fetch(buildProjectApiPath(projectId))
       .then((r) => r.json())
       .then((data: { files?: string[]; dir?: string; compositions?: string[] }) => {
         if (cancelled) return;
-        if (data.files) setFileTree(data.files);
-        if (data.compositions) setCompositionPaths(data.compositions);
-        setProjectDir(typeof data.dir === "string" ? data.dir : null);
+        setFetched({
+          projectId,
+          loaded: true,
+          fileTree: data.files ?? [],
+          compositionPaths: data.compositions ?? [],
+          projectDir: typeof data.dir === "string" ? data.dir : null,
+        });
         // Snapshot how this project was made, while the listing is in hand and
         // the app is still alive. A crash later has no other way to learn it.
         void captureProjectProvenance(projectId, data.files ?? [], data.compositions ?? []);
       })
       .catch(() => {
-        if (!cancelled) setProjectDir(null);
-      })
-      .finally(() => {
-        if (!cancelled) setFileTreeLoaded(true);
+        if (!cancelled) {
+          setFetched((prev) => (prev?.projectId === projectId ? { ...prev, loaded: true } : prev));
+        }
       });
     return () => {
       cancelled = true;
     };
   }, [projectId]);
 
+  const refreshRequestRef = useRef(0);
+  const refreshAbortRef = useRef<AbortController | null>(null);
+
   const refreshFileTree = useCallback(async () => {
     const pid = projectIdRef.current;
     if (!pid) return;
-    const res = await fetch(buildProjectApiPath(pid));
-    const data = await res.json();
-    if (data.files) setFileTree(data.files);
+    // Same id+abort pair as useFileManager.ts's openSourceForSelection: cancel the
+    // superseded request instead of letting it complete and discarding the result.
+    refreshAbortRef.current?.abort();
+    const requestId = ++refreshRequestRef.current;
+    const controller = new AbortController();
+    refreshAbortRef.current = controller;
+    let data: { files?: string[]; compositions?: string[] };
+    try {
+      const res = await fetch(buildProjectApiPath(pid), { signal: controller.signal });
+      data = await res.json();
+    } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
+      throw err;
+    }
+    if (data.files && requestId === refreshRequestRef.current) {
+      setFetched((prev) =>
+        prev?.projectId === pid
+          ? {
+              ...prev,
+              fileTree: data.files ?? prev.fileTree,
+              // A response that omits `compositions` must not wipe out a
+              // known-good list — only replace it when the field is present.
+              compositionPaths: data.compositions ?? prev.compositionPaths,
+            }
+          : prev,
+      );
+    }
   }, [projectIdRef]);
 
-  const compositions = compositionPaths;
-
   const assets = useMemo(
     () =>
       fileTree.filter((f) => !f.endsWith(".html") && !f.endsWith(".md") && !f.endsWith(".json")),
@@ -76,10 +119,9 @@ export function useFileTree({ projectId, projectIdRef }: UseFileTreeOptions) {
   return {
     projectDir,
     fileTree,
-    setFileTree,
     fileTreeLoaded,
     refreshFileTree,
-    compositions,
+    compositions: compositionPaths,
     assets,
     fontAssets,
   };

package/src/hooks/useGroupCommits.test.ts

@@ -0,0 +1,98 @@
+// @vitest-environment jsdom
+import { describe, expect, it } from "vitest";
+import type { TimelineElement } from "../player";
+import { computeGroupGeometry, resolveGroupChildTracks } from "./useGroupCommits";
+import { makeSelection } from "./domSelectionTestHarness";
+
+const timelineElement = (over: Partial<TimelineElement> = {}): TimelineElement => ({
+  id: "clip",
+  domId: "clip",
+  tag: "div",
+  start: 0,
+  duration: 4,
+  track: 0,
+  timingSource: "authored",
+  sourceFile: "index.html",
+  ...over,
+});
+
+describe("computeGroupGeometry — track threading", () => {
+  it("carries each member's authored track onto its rebase entry, so the server can pin it through the wrap", () => {
+    const elA = document.createElement("div");
+    elA.id = "clip-a";
+    const elB = document.createElement("div");
+    elB.id = "clip-b";
+    const members = [makeSelection("A", elA), makeSelection("B", elB)];
+    const timelineElements = [
+      timelineElement({ id: "clip-a", domId: "clip-a", authoredTrack: 2 }),
+      timelineElement({ id: "clip-b", domId: "clip-b" }),
+    ];
+
+    const { rebases } = computeGroupGeometry(members, timelineElements);
+
+    expect(rebases[0]?.track).toBe(2);
+    expect(rebases[1]?.track).toBe(0);
+  });
+});
+
+describe("resolveGroupChildTracks", () => {
+  it("resolves each child's authored track by DOM id, so ungroup can pin it through the unwrap", () => {
+    const group = document.createElement("div");
+    group.id = "group-1";
+    const childA = document.createElement("div");
+    childA.id = "child-a";
+    const childB = document.createElement("div");
+    childB.id = "child-b";
+    group.append(childA, childB);
+
+    const timelineElements = [
+      timelineElement({ id: "child-a", domId: "child-a", authoredTrack: 1 }),
+      timelineElement({ id: "child-b", domId: "child-b" }),
+    ];
+
+    const result = resolveGroupChildTracks(makeSelection("Group 1", group), timelineElements);
+
+    expect(result).toEqual([
+      { target: { id: "child-a", hfId: undefined }, track: 1 },
+      { target: { id: "child-b", hfId: undefined }, track: 0 },
+    ]);
+  });
+
+  it("resolves a child's track by hfId when it has no DOM id, so an unauthored ungroup child can't drift to a new row", () => {
+    const group = document.createElement("div");
+    group.id = "group-1";
+    const child = document.createElement("div");
+    child.setAttribute("data-hf-id", "hf-child-a");
+    group.append(child);
+
+    const timelineElements = [timelineElement({ hfId: "hf-child-a", authoredTrack: 3 })];
+
+    const result = resolveGroupChildTracks(makeSelection("Group 1", group), timelineElements);
+
+    expect(result).toEqual([{ target: { id: undefined, hfId: "hf-child-a" }, track: 3 }]);
+  });
+
+  it("skips a child with neither a DOM id nor an hfId", () => {
+    const group = document.createElement("div");
+    const anonymous = document.createElement("div");
+    group.append(anonymous);
+
+    const result = resolveGroupChildTracks(makeSelection("Group 1", group), []);
+
+    expect(result).toEqual([]);
+  });
+
+  it("falls back to the runtime's resolved track for an implicit child with no authoredTrack", () => {
+    const group = document.createElement("div");
+    group.id = "group-1";
+    const child = document.createElement("div");
+    child.id = "child-a";
+    group.append(child);
+
+    const timelineElements = [timelineElement({ id: "child-a", domId: "child-a", track: 3 })];
+
+    const result = resolveGroupChildTracks(makeSelection("Group 1", group), timelineElements);
+
+    expect(result).toEqual([{ target: { id: "child-a", hfId: undefined }, track: 3 }]);
+  });
+});