@hyperframes/studio 0.7.78 → 0.7.80

package/src/hooks/newTweenTarget.test.ts

@@ -0,0 +1,364 @@
+// @vitest-environment jsdom
+/**
+ * Sibling writers of the "add keyframe at playhead" path fixed in
+ * gsapShared.writeTarget.test.ts. Every mutation that authors a NEW tween must
+ * address ONE element; a bare class attributes the write to every sibling that
+ * shares it, which is what collapsed the timeline to a single row.
+ *
+ * Same round trip as the U3 test: author through the real writer, re-parse with
+ * the real parser, resolve through the very function that feeds the keyframe
+ * cache and the lanes.
+ */
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { parseGsapScript } from "@hyperframes/core/gsap-parser";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { buildStableSelector, getSelectorIndex } from "../components/editor/domEditingDom";
+import { resolveSelectorElementIds } from "./gsapShared";
+import { ensureElementAddressable } from "./gsapScriptCommitHelpers";
+import {
+  commitStaticGsapPosition,
+  commitStaticGsapRotation,
+  commitStaticGsapSize,
+  commitKeyframedSizeFromResize,
+  commitWholePathOffset,
+  findExistingPositionWrite,
+} from "./gsapDragCommit";
+import { promoteSetToKeyframes } from "./useEnableKeyframes";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function selectionFor(el: HTMLElement): DomEditSelection {
+  const selector = buildStableSelector(el);
+  return {
+    element: el,
+    id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
+    selector,
+    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+/** Five class-only siblings, each with an id so attribution is nameable. */
+function mountGroupSiblings(): HTMLElement[] {
+  document.body.innerHTML = `
+    <div id="scene" class="clip" data-start="0" data-duration="2">
+      <div class="group" id="group-0"></div>
+      <div class="group" id="group-1"></div>
+      <div class="group" id="group-2"></div>
+      <div class="group" id="group-3"></div>
+      <div class="group" id="group-4"></div>
+    </div>
+  `;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}
+
+/**
+ * The selection production hands these writers: the element HAS an id in the
+ * DOM (so resolveSelectorElementIds can name it) but the SELECTION carries none,
+ * which is the id-less shape buildStableSelector answers with a bare class.
+ */
+function classOnlySelection(el: HTMLElement): DomEditSelection {
+  return { ...selectionFor(el), id: undefined, selector: ".group" } as DomEditSelection;
+}
+
+/** The elements a written targetSelector actually attributes the tween to. */
+function attributedTo(targetSelector: string): string[] {
+  return resolveSelectorElementIds(targetSelector, document);
+}
+
+function recorder() {
+  const mutations: Array<Record<string, unknown>> = [];
+  const commitMutation = vi.fn(async (_sel, mutation, _opts) => {
+    mutations.push(mutation as Record<string, unknown>);
+  });
+  return { mutations, callbacks: { commitMutation } as never };
+}
+
+/** Every `targetSelector` a run of mutations wrote. */
+function writtenTargets(mutations: Array<Record<string, unknown>>): string[] {
+  return mutations.map((m) => m.targetSelector).filter((s): s is string => typeof s === "string");
+}
+
+describe("ensureElementAddressable — add-animation button", () => {
+  it("addresses one element when the selection's only identity is a shared class", () => {
+    // Truly id-less siblings: the shape production reaches this path with (an
+    // element WITH an id never gets here, selection.id short-circuits above).
+    document.body.innerHTML = `
+      <div id="scene" class="clip">
+        <div class="group"></div><div class="group"></div><div class="group"></div>
+      </div>
+    `;
+    const el = document.querySelectorAll<HTMLElement>(".group")[1]!;
+    const selection = selectionFor(el);
+    expect(selection.selector).toBe(".group");
+
+    const { selector, autoId } = ensureElementAddressable(selection);
+
+    expect(autoId).toBeTruthy();
+    expect(document.querySelectorAll(selector)).toHaveLength(1);
+    expect(document.querySelector(selector)).toBe(el);
+    expect(attributedTo(selector)).toEqual([autoId]);
+  });
+
+  it("keeps a unique #id target", () => {
+    document.body.innerHTML = `<div id="box" class="card"></div>`;
+    const el = document.querySelector<HTMLElement>("#box")!;
+
+    expect(ensureElementAddressable(selectionFor(el)).selector).toBe("#box");
+  });
+
+  it("keeps an already-unique class selector as authored", () => {
+    document.body.innerHTML = `<div id="scene"><div class="header"></div></div>`;
+    const el = document.querySelector<HTMLElement>(".header")!;
+
+    expect(ensureElementAddressable(selectionFor(el)).selector).toBe(".header");
+  });
+
+  it("still mints an id when there is no live element to disambiguate against", () => {
+    document.body.innerHTML = `<div id="scene"><div></div></div>`;
+    const el = document.querySelector<HTMLElement>("#scene > div")!;
+    const selection = { ...selectionFor(el), selector: undefined } as DomEditSelection;
+
+    const { selector, autoId } = ensureElementAddressable(selection);
+
+    expect(autoId).toBe("div");
+    expect(selector).toBe("#div");
+  });
+});
+
+describe("gsapDragCommit — new-tween targets", () => {
+  it("commitStaticGsapPosition authors the new set against one element", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+
+    await commitStaticGsapPosition(
+      classOnlySelection(groups[2]!),
+      { x: 10, y: 10 },
+      { x: 0, y: 0 },
+      ".group",
+      null,
+      callbacks,
+    );
+
+    expect(attributedTo(writtenTargets(mutations)[0]!)).toEqual(["group-2"]);
+  });
+
+  it("commitStaticGsapRotation authors the new set against one element", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+
+    await commitStaticGsapRotation(classOnlySelection(groups[1]!), 42, ".group", null, callbacks);
+
+    expect(attributedTo(writtenTargets(mutations)[0]!)).toEqual(["group-1"]);
+  });
+
+  it("commitStaticGsapSize authors the new set against one element", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+
+    await commitStaticGsapSize(
+      classOnlySelection(groups[4]!),
+      { width: 100, height: 50 },
+      ".group",
+      null,
+      callbacks,
+    );
+
+    expect(attributedTo(writtenTargets(mutations)[0]!)).toEqual(["group-4"]);
+  });
+
+  it("commitKeyframedSizeFromResize authors the new keyframe tween against one element", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+    const animatedTween = {
+      id: "t1",
+      targetSelector: ".group",
+      method: "to",
+      properties: {},
+      resolvedStart: 0,
+      duration: 2,
+      keyframes: { keyframes: [{ percentage: 0, properties: { x: 0 } }] },
+    } as unknown as GsapAnimation;
+
+    const handled = await commitKeyframedSizeFromResize(
+      classOnlySelection(groups[3]!),
+      { width: 80, height: 40 },
+      ".group",
+      null,
+      animatedTween,
+      callbacks,
+    );
+
+    expect(handled).toBe(true);
+    expect(attributedTo(writtenTargets(mutations)[0]!)).toEqual(["group-3"]);
+  });
+
+  it("commitStaticGsapPosition replaces a corrupt keyframed hold against one element", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+    const corruptHold = {
+      id: "hold-1",
+      targetSelector: ".group",
+      method: "to",
+      properties: {},
+      duration: 0,
+      keyframes: { keyframes: [{ percentage: 0, properties: { x: 0, y: 0 } }] },
+    } as unknown as GsapAnimation;
+
+    await commitStaticGsapPosition(
+      classOnlySelection(groups[0]!),
+      { x: 5, y: 5 },
+      { x: 0, y: 0 },
+      ".group",
+      corruptHold,
+      callbacks,
+    );
+
+    expect(attributedTo(writtenTargets(mutations)[0]!)).toEqual(["group-0"]);
+  });
+});
+
+describe("gsapDragCommit — retargeting an existing tween is left alone", () => {
+  it("commitWholePathOffset keeps the tween's own group target", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+    const groupTween = {
+      id: "t-group",
+      targetSelector: ".group",
+      method: "to",
+      properties: { x: 100 },
+      resolvedStart: 0,
+      duration: 2,
+    } as unknown as GsapAnimation;
+
+    await commitWholePathOffset(
+      classOnlySelection(groups[2]!),
+      groupTween,
+      { x: 10, y: 0 },
+      { x: 0, y: 0 },
+      null,
+      ".group",
+      callbacks,
+    );
+
+    // A tween the author aimed at all five siblings must STAY aimed at all five:
+    // narrowing it here would silently drop four elements out of the animation.
+    expect(writtenTargets(mutations)[0]).toBe(".group");
+    expect(attributedTo(writtenTargets(mutations)[0]!)).toHaveLength(5);
+  });
+});
+
+/**
+ * The write selector and the "is there already a write for this element?"
+ * lookup are two halves of one contract. Narrowing only the write half would
+ * make the next nudge miss its own previous write and append a second one — the
+ * duplicate-position-write bug findExistingPositionWrite exists to prevent.
+ */
+describe("a re-nudge updates its own previous write instead of stacking a second one", () => {
+  it("finds the write the first nudge authored", async () => {
+    const groups = mountGroupSiblings();
+    const selection = classOnlySelection(groups[2]!);
+    const first = recorder();
+
+    await commitStaticGsapPosition(
+      selection,
+      { x: 10, y: 10 },
+      { x: 0, y: 0 },
+      ".group",
+      null,
+      first.callbacks,
+    );
+    const written = writtenTargets(first.mutations)[0]!;
+
+    // Read the first write back the way the next drag does: parse the source,
+    // then run the production lookup for this element's position write.
+    const script = `
+const tl = gsap.timeline({ paused: true });
+gsap.set(${JSON.stringify(written)}, { x: 10, y: 10 });
+`.trim();
+    const animations = parseGsapScript(script).animations;
+    const existing = findExistingPositionWrite(animations, ".group", selection.element);
+    expect(existing).toBeTruthy();
+
+    const second = recorder();
+    await commitStaticGsapPosition(
+      selection,
+      { x: 5, y: 0 },
+      { x: 10, y: 10 },
+      ".group",
+      existing,
+      second.callbacks,
+    );
+
+    expect(second.mutations[0]!.type).toBe("update-properties");
+    expect(second.mutations[0]!.animationId).toBe(existing!.id);
+  });
+});
+
+/**
+ * Candidate C. Every `replace-with-keyframes` in useEnableKeyframes names an
+ * `animationId` parsed out of the CURRENT SOURCE (the anims list comes from
+ * tryFetchAnimationsForElement), so each one rewrites a tween the author already
+ * has. Narrowing those to one element would silently drop the other four
+ * siblings out of an animation that was aimed at the group on purpose.
+ */
+describe("useEnableKeyframes — rewriting an existing tween keeps its group target", () => {
+  it("promoteSetToKeyframes leaves a group-authored set aimed at the group", async () => {
+    const groups = mountGroupSiblings();
+    const mutations: Array<Record<string, unknown>> = [];
+    const setAnim = {
+      id: "set-group",
+      targetSelector: ".group",
+      method: "set",
+      properties: { x: 0, y: 0 },
+      resolvedStart: 0,
+      duration: 0,
+    } as unknown as GsapAnimation;
+    const session = {
+      commitMutation: async (mutation: Record<string, unknown>) => {
+        mutations.push(mutation);
+      },
+      handleGsapRemoveKeyframe: vi.fn(),
+    };
+
+    // Playhead at the set: the branch that replaces it with a single keyframe,
+    // which can source its value from the set itself (no live iframe needed).
+    await promoteSetToKeyframes(session as never, classOnlySelection(groups[2]!), setAnim, 0, null);
+
+    expect(mutations[0]!.type).toBe("replace-with-keyframes");
+    expect(mutations[0]!.animationId).toBe("set-group");
+    expect(mutations[0]!.targetSelector).toBe(".group");
+    expect(attributedTo(mutations[0]!.targetSelector as string)).toHaveLength(5);
+  });
+});
+
+describe("the written selector survives the real writer and parser", () => {
+  it("re-parses to a tween attributed to the one element it targeted", async () => {
+    const groups = mountGroupSiblings();
+    const { mutations, callbacks } = recorder();
+
+    await commitStaticGsapPosition(
+      classOnlySelection(groups[2]!),
+      { x: 10, y: 10 },
+      { x: 0, y: 0 },
+      ".group",
+      null,
+      callbacks,
+    );
+    const written = writtenTargets(mutations)[0]!;
+
+    const script = `
+const tl = gsap.timeline({ paused: true });
+gsap.set(${JSON.stringify(written)}, { x: 10, y: 10 });
+`.trim();
+    const parsed = parseGsapScript(script).animations.find((a) => a.targetSelector === written);
+
+    expect(parsed).toBeTruthy();
+    expect(resolveSelectorElementIds(parsed!.targetSelector, document)).toEqual(["group-2"]);
+  });
+});

package/src/hooks/newTweenTargetHooks.test.tsx

@@ -0,0 +1,255 @@
+// @vitest-environment jsdom
+/**
+ * Hook-level siblings of newTweenTarget.test.ts: the property panel and the
+ * gesture recorder also author NEW tweens, so they face the same bare-class
+ * blow-up. Driven through the real hooks so the classification under test
+ * (new tween vs retarget of an existing one) is the production one.
+ */
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { usePlayerStore } from "../player/store/playerStore";
+import { resolveSelectorElementIds } from "./gsapShared";
+import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
+import { useGestureCommit } from "./useGestureCommit";
+import { mountReactHarness, installReactActEnvironment } from "./domSelectionTestHarness";
+
+installReactActEnvironment();
+
+const frozenSamples = [
+  { time: 0, properties: { x: 0, y: 0 } },
+  { time: 0.5, properties: { x: 60, y: 10 } },
+  { time: 1, properties: { x: 120, y: 40 } },
+];
+
+vi.mock("./useGestureRecording", () => ({
+  useGestureRecording: () => ({
+    startRecording: vi.fn(),
+    stopRecording: () => frozenSamples,
+    clearSamples: vi.fn(),
+    samples: frozenSamples,
+  }),
+}));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ autoKeyframeEnabled: true, currentTime: 0 });
+});
+
+function mountGroupSiblings(): HTMLElement[] {
+  document.body.innerHTML = `
+    <div id="scene" class="clip" data-start="0" data-duration="2">
+      <div class="group" id="group-0"></div>
+      <div class="group" id="group-1"></div>
+      <div class="group" id="group-2"></div>
+      <div class="group" id="group-3"></div>
+      <div class="group" id="group-4"></div>
+    </div>
+  `;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}
+
+/** The id-less shape buildStableSelector answers with a bare class. */
+function classOnlySelection(el: HTMLElement): DomEditSelection {
+  return {
+    element: el,
+    id: undefined,
+    selector: ".group",
+    selectorIndex: Array.prototype.indexOf.call(el.parentElement!.children, el),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+function attributedTo(targetSelector: unknown): string[] {
+  return resolveSelectorElementIds(String(targetSelector), document);
+}
+
+type Commit = (
+  selection: DomEditSelection,
+  props: Record<string, number | string>,
+) => Promise<void>;
+
+function renderPropertyCommit(
+  animations: GsapAnimation[],
+  mutations: Array<Record<string, unknown>>,
+  onReady: (commit: Commit) => void,
+) {
+  function Harness() {
+    const { commitAnimatedProperties } = useAnimatedPropertyCommit({
+      selectedGsapAnimations: animations,
+      gsapCommitMutation: async (_sel: DomEditSelection, mutation: Record<string, unknown>) => {
+        mutations.push(mutation);
+      },
+      addGsapAnimation: vi.fn(),
+      convertToKeyframes: vi.fn(),
+      previewIframeRef: { current: null },
+      bumpGsapCache: vi.fn(),
+    } as never);
+    onReady(commitAnimatedProperties);
+    return null;
+  }
+  return mountReactHarness(<Harness />);
+}
+
+describe("useAnimatedPropertyCommit — new-tween targets", () => {
+  it("authors a new static set against one element", async () => {
+    const groups = mountGroupSiblings();
+    const mutations: Array<Record<string, unknown>> = [];
+    let commit: Commit | undefined;
+    const root = renderPropertyCommit([], mutations, (fn) => (commit = fn));
+
+    await act(async () => {
+      await commit!(classOnlySelection(groups[2]!), { rotationX: 30 });
+    });
+
+    const added = mutations.find((m) => m.type === "add");
+    expect(added).toBeTruthy();
+    expect(attributedTo(added!.targetSelector)).toEqual(["group-2"]);
+    act(() => root.unmount());
+  });
+
+  it("authors the first same-group keyframe tween against one element", async () => {
+    const groups = mountGroupSiblings();
+    // A position tween exists, so the element IS animated; a rotation edit has
+    // no same-group tween to join and must author a fresh one.
+    const positionTween = {
+      id: "t-pos",
+      targetSelector: ".group",
+      propertyGroup: "position",
+      method: "to",
+      properties: { x: 0 },
+      resolvedStart: 0,
+      duration: 2,
+      keyframes: {
+        keyframes: [
+          { percentage: 0, properties: { x: 0 } },
+          { percentage: 100, properties: { x: 50 } },
+        ],
+      },
+    } as unknown as GsapAnimation;
+    const mutations: Array<Record<string, unknown>> = [];
+    let commit: Commit | undefined;
+    const root = renderPropertyCommit([positionTween], mutations, (fn) => (commit = fn));
+
+    await act(async () => {
+      await commit!(classOnlySelection(groups[1]!), { rotationY: 15 });
+    });
+
+    const added = mutations.find((m) => m.type === "add-with-keyframes");
+    expect(added).toBeTruthy();
+    expect(attributedTo(added!.targetSelector)).toEqual(["group-1"]);
+    act(() => root.unmount());
+  });
+
+  it("leaves an existing group tween aimed at its whole group", async () => {
+    const groups = mountGroupSiblings();
+    usePlayerStore.setState({ autoKeyframeEnabled: false, currentTime: 0 });
+    const groupTween = {
+      id: "t-pos",
+      targetSelector: ".group",
+      propertyGroup: "position",
+      method: "to",
+      properties: { x: 0 },
+      resolvedStart: 0,
+      duration: 2,
+      keyframes: {
+        keyframes: [
+          { percentage: 0, properties: { x: 0, y: 0 } },
+          { percentage: 100, properties: { x: 50, y: 0 } },
+        ],
+      },
+    } as unknown as GsapAnimation;
+    const mutations: Array<Record<string, unknown>> = [];
+    let commit: Commit | undefined;
+    const root = renderPropertyCommit([groupTween], mutations, (fn) => (commit = fn));
+
+    await act(async () => {
+      await commit!(classOnlySelection(groups[2]!), { x: 90 });
+    });
+
+    const replaced = mutations.find((m) => m.type === "replace-with-keyframes");
+    expect(replaced).toBeTruthy();
+    expect(replaced!.targetSelector).toBe(".group");
+    act(() => root.unmount());
+  });
+});
+
+function renderGestureCommit(
+  animations: GsapAnimation[],
+  mutations: Array<Record<string, unknown>>,
+  selection: DomEditSelection,
+) {
+  let toggle: (() => void) | undefined;
+  function Harness() {
+    const { handleToggleRecording } = useGestureCommit({
+      domEditSessionRef: {
+        current: {
+          domEditSelection: selection,
+          selectedGsapAnimations: animations,
+          commitMutation: async (mutation: Record<string, unknown>) => {
+            mutations.push(mutation);
+          },
+        },
+      } as never,
+      previewIframeRef: { current: document.createElement("iframe") },
+      showToast: vi.fn(),
+      isGestureRecordingRef: { current: false },
+    });
+    toggle = handleToggleRecording;
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  return { root, toggle: () => toggle!() };
+}
+
+describe("useGestureCommit — new-tween targets", () => {
+  it("authors the recorded tween against one element", async () => {
+    const groups = mountGroupSiblings();
+    const mutations: Array<Record<string, unknown>> = [];
+    const { root, toggle } = renderGestureCommit([], mutations, classOnlySelection(groups[3]!));
+
+    act(() => toggle()); // start
+    await act(async () => {
+      toggle(); // stop + commit
+      await Promise.resolve();
+    });
+
+    const added = mutations.find((m) => m.type === "add-with-keyframes");
+    expect(added).toBeTruthy();
+    expect(attributedTo(added!.targetSelector)).toEqual(["group-3"]);
+    act(() => root.unmount());
+  });
+
+  it("leaves a merged existing group tween aimed at its whole group", async () => {
+    const groups = mountGroupSiblings();
+    const existing = {
+      id: "t-pos",
+      targetSelector: ".group",
+      propertyGroup: "position",
+      method: "to",
+      properties: { x: 0 },
+      resolvedStart: 0,
+      duration: 2,
+      keyframes: { keyframes: [{ percentage: 0, properties: { x: 0, y: 0 } }] },
+    } as unknown as GsapAnimation;
+    const mutations: Array<Record<string, unknown>> = [];
+    const { root, toggle } = renderGestureCommit(
+      [existing],
+      mutations,
+      classOnlySelection(groups[3]!),
+    );
+
+    act(() => toggle());
+    await act(async () => {
+      toggle();
+      await Promise.resolve();
+    });
+
+    const replaced = mutations.find((m) => m.type === "replace-with-keyframes");
+    expect(replaced).toBeTruthy();
+    expect(replaced!.targetSelector).toBe(".group");
+    act(() => root.unmount());
+  });
+});

package/src/hooks/timelineTrackVisibility.test.ts

@@ -95,7 +95,9 @@ describe("toggleTimelineTrackHidden", () => {
     expect(pendingRef.current).toEqual(new Set(["index.html", "scene.html"]));
     expect(timestampRef.current).toBeGreaterThan(0);
     expect(recordEdit).toHaveBeenCalledTimes(1);
-    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide track 0");
+    // Display row, not the raw key: track 0 is the first row, so it reads "1",
+    // the same number the track header announces for that row.
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide track 1");
     expect(Object.keys(recordEdit.mock.calls[0]?.[0]?.files ?? {}).sort()).toEqual([
       "index.html",
       "scene.html",
@@ -134,6 +136,64 @@ describe("toggleTimelineTrackHidden", () => {
 
     expect(writes.get("index.html")).not.toContain("data-hidden");
   });
+
+  // An expanded sub-comp child gets a synthesized FRACTIONAL track key
+  // (`display.track + n / (siblings + 2)`), so a label built from the raw key
+  // reads "Hide track 0.16666666666666666" in the undo history. Track 0 would
+  // format cleanly and prove nothing, hence 1 / 6.
+  it("labels the undo entry with the display row, not the fractional track key", async () => {
+    const files = new Map([
+      ["index.html", `<div id="child" data-start="0" data-duration="2"></div>`],
+    ]);
+    stubProjectFiles(files);
+
+    const recordEdit = vi.fn();
+
+    await toggleTimelineTrackHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [
+        element({ id: "host", domId: "host", track: 0 }),
+        element({ id: "child", domId: "child", track: 1 / 6 }),
+      ],
+      track: 1 / 6,
+      hidden: true,
+      previewIframe: null,
+      writeProjectFile: async () => {},
+      recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set() },
+    });
+
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide track 2");
+  });
+
+  it("labels a show back with the display row too", async () => {
+    const files = new Map([
+      ["index.html", `<div id="child" data-start="0" data-duration="2" data-hidden=""></div>`],
+    ]);
+    stubProjectFiles(files);
+
+    const recordEdit = vi.fn();
+
+    await toggleTimelineTrackHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [
+        element({ id: "host", domId: "host", track: 0 }),
+        element({ id: "child", domId: "child", track: 1 / 6, hidden: true }),
+      ],
+      track: 1 / 6,
+      hidden: false,
+      previewIframe: null,
+      writeProjectFile: async () => {},
+      recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set() },
+    });
+
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Show track 2");
+  });
 });
 
 describe("toggleTimelineElementHidden", () => {