@hyperframes/studio 0.8.137 → 0.8.139

package/src/components/editor/PropertyPanel.test.tsx

@@ -5,6 +5,9 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { PropertyPanelProps } from "./propertyPanelHelpers";
 import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
+import { PropertyPanel } from "./PropertyPanel";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
+import { usePlayerStore } from "../../player/store/playerStore";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -17,10 +20,35 @@ vi.mock("../../contexts/StudioContext", async () => {
   return { ...actual, useStudioShellContext: () => ({ showToast: vi.fn() }) };
 });
 
+// The panel is imported once: re-importing it per test made the first test pay a cold transform.
+const panel = vi.hoisted(() => ({
+  flat: false,
+  actions: null as null | {
+    refreshDomEditSelectionFromPreview: unknown;
+    domEditSelectionRef: unknown;
+  },
+}));
+vi.mock("./manualEditingAvailability", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("./manualEditingAvailability")>()),
+  get STUDIO_FLAT_INSPECTOR_ENABLED() {
+    return panel.flat;
+  },
+}));
+vi.mock("../../contexts/DomEditContext", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("../../contexts/DomEditContext")>();
+  return {
+    ...actual,
+    useDomEditActionsContextOptional: () =>
+      panel.actions ?? actual.useDomEditActionsContextOptional(),
+  };
+});
+
+const initialPlayerState = usePlayerStore.getState();
+
 afterEach(() => {
   document.body.innerHTML = "";
-  vi.doUnmock("./manualEditingAvailability");
-  vi.resetModules();
+  panel.actions = null;
+  usePlayerStore.setState(initialPlayerState, true);
 });
 
 function baseElement(): NonNullable<PropertyPanelProps["element"]> {
@@ -244,39 +272,17 @@ async function renderPanel(
     selectionRef?: { current: unknown };
   } = {},
 ) {
-  vi.resetModules();
-  vi.doMock("./manualEditingAvailability", async () => {
-    const actual = await vi.importActual<typeof import("./manualEditingAvailability")>(
-      "./manualEditingAvailability",
-    );
-    return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: flatEnabled };
-  });
-  vi.doMock("../../contexts/DomEditContext", async () => {
-    const actual = await vi.importActual<typeof import("../../contexts/DomEditContext")>(
-      "../../contexts/DomEditContext",
-    );
-    const { refreshSelection: refresh, selectionRef } = options;
-    return refresh && selectionRef
-      ? {
-          ...actual,
-          useDomEditActionsContextOptional: () => ({
-            refreshDomEditSelectionFromPreview: refresh,
-            domEditSelectionRef: selectionRef,
-          }),
-        }
-      : actual;
-  });
-  // Seed the playhead and selection on the same store instance PropertyPanel.tsx
-  // reads (module-fresh after the resetModules() above), before it is imported so
-  // its first render sees them.
-  const { usePlayerStore } = await import("../../player/store/playerStore");
+  panel.flat = flatEnabled;
+  const { refreshSelection: refresh, selectionRef } = options;
+  panel.actions =
+    refresh && selectionRef
+      ? { refreshDomEditSelectionFromPreview: refresh, domEditSelectionRef: selectionRef }
+      : null;
   if (options.currentTime !== undefined) {
     usePlayerStore.getState().setCurrentTime(options.currentTime);
   }
   if (options.selectedElementId)
     usePlayerStore.setState({ selectedElementId: options.selectedElementId });
-  const { PropertyPanel } = await import("./PropertyPanel");
-  const { TimelineEditProvider } = await import("../../contexts/TimelineEditContext");
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
@@ -304,15 +310,6 @@ async function renderPanel(
   return { host, root, render };
 }
 
-// renderPanel resetModules()+dynamic-imports PropertyPanel (needed for a fresh
-// flag read); transforming the full section graph uncached can exceed the 5s
-// default under heavy parallel full-suite load, so give these a wider margin.
-// 20s itself has now been observed timing out in CI's full-monorepo run (the
-// same suite passes in well under 2s standalone) — widened again rather than
-// re-tuned down to a number that will just need doing again next time CI adds
-// load.
-const RENDER_TIMEOUT_MS = 45_000;
-
 // Find the collapsed accordion row whose title matches and click it open.
 function openFlatGroup(host: HTMLElement, title: string) {
   const row = Array.from(host.querySelectorAll('[data-flat-group-collapsed="true"]')).find((el) =>
@@ -326,229 +323,181 @@ const openGroupText = (host: HTMLElement) =>
   host.querySelector('[data-flat-group-open="true"]')?.textContent ?? "";
 
 describe("PropertyPanel — STUDIO_FLAT_INSPECTOR_ENABLED off", () => {
-  it(
-    "renders the legacy header, not the flat header",
-    async () => {
-      const { host, root } = await renderPanel(false);
-      expect(host.querySelector('[data-flat-header-icon="true"]')).toBeNull();
-      expect(host.textContent).toContain("Mono Label");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders the legacy header, not the flat header", async () => {
+    const { host, root } = await renderPanel(false);
+    expect(host.querySelector('[data-flat-header-icon="true"]')).toBeNull();
+    expect(host.textContent).toContain("Mono Label");
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — STUDIO_FLAT_INSPECTOR_ENABLED on", () => {
-  it(
-    "renders the flat header, the Text group open by default, and the flat footer",
-    async () => {
-      const { host, root } = await renderPanel(true);
-      expect(host.querySelector('[data-flat-header-icon="true"]')).not.toBeNull();
-      expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
-      expect(host.textContent).toContain("Ask agent about this element");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders the flat header, the Text group open by default, and the flat footer", async () => {
+    const { host, root } = await renderPanel(true);
+    expect(host.querySelector('[data-flat-header-icon="true"]')).not.toBeNull();
+    expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
+    expect(host.textContent).toContain("Ask agent about this element");
+    act(() => root.unmount());
+  });
 
-  it(
-    "collapses the Text group on caret click and can reopen it",
-    async () => {
-      const { host, root } = await renderPanel(true);
-      const collapseButton = host.querySelector<HTMLButtonElement>(
-        '[data-flat-group-open="true"] button[title="Collapse"]',
-      );
-      act(() => collapseButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-      expect(host.querySelector('[data-flat-group-open="true"]')).toBeNull();
-      const collapsedRow = host.querySelector<HTMLButtonElement>(
-        '[data-flat-group-collapsed="true"]',
-      );
-      expect(collapsedRow).not.toBeNull();
-      act(() => collapsedRow?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-      expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("collapses the Text group on caret click and can reopen it", async () => {
+    const { host, root } = await renderPanel(true);
+    const collapseButton = host.querySelector<HTMLButtonElement>(
+      '[data-flat-group-open="true"] button[title="Collapse"]',
+    );
+    act(() => collapseButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(host.querySelector('[data-flat-group-open="true"]')).toBeNull();
+    const collapsedRow = host.querySelector<HTMLButtonElement>(
+      '[data-flat-group-collapsed="true"]',
+    );
+    expect(collapsedRow).not.toBeNull();
+    act(() => collapsedRow?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
+    act(() => root.unmount());
+  });
 
-  it(
-    "renders no Text group at all for a non-text element (bug 1)",
-    async () => {
-      // nonTextElement() inherits canEditStyles: true from baseElement(), so
-      // the Style group (Task 10) renders and opens by default here — the
-      // invariant under test is narrower than "no flat group at all": no
-      // group titled "Text" may appear, open or collapsed.
-      const { host, root } = await renderPanel(true, nonTextElement());
-      const openTitle = host.querySelector(
-        '[data-flat-group-open="true"] .text-panel-text-0',
-      )?.textContent;
-      const collapsedTitles = Array.from(
-        host.querySelectorAll('[data-flat-group-collapsed="true"] .text-panel-text-2'),
-      ).map((el) => el.textContent);
-      expect(openTitle).not.toBe("Text");
-      expect(collapsedTitles).not.toContain("Text");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders no Text group at all for a non-text element (bug 1)", async () => {
+    // nonTextElement() inherits canEditStyles: true from baseElement(), so
+    // the Style group (Task 10) renders and opens by default here — the
+    // invariant under test is narrower than "no flat group at all": no
+    // group titled "Text" may appear, open or collapsed.
+    const { host, root } = await renderPanel(true, nonTextElement());
+    const openTitle = host.querySelector(
+      '[data-flat-group-open="true"] .text-panel-text-0',
+    )?.textContent;
+    const collapsedTitles = Array.from(
+      host.querySelectorAll('[data-flat-group-collapsed="true"] .text-panel-text-2'),
+    ).map((el) => el.textContent);
+    expect(openTitle).not.toBe("Text");
+    expect(collapsedTitles).not.toContain("Text");
+    act(() => root.unmount());
+  });
 
-  it(
-    "renders exactly one Text heading for a multi-field text element (bug 2)",
-    async () => {
-      const { host, root } = await renderPanel(true, multiFieldTextElement());
-      // The FlatGroup's own "Text" heading is the only one that should exist —
-      // the legacy TextSection's internal Section heading (data-panel-section
-      // ="text") must never appear, since the flat multi-field path no longer
-      // delegates to that component at all.
-      expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
-      expect(host.querySelector('[data-panel-section="text"]')).toBeNull();
-      // Content from the flat multi-field layer list must render.
-      expect(host.textContent).toContain("Text layers");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders exactly one Text heading for a multi-field text element (bug 2)", async () => {
+    const { host, root } = await renderPanel(true, multiFieldTextElement());
+    // The FlatGroup's own "Text" heading is the only one that should exist —
+    // the legacy TextSection's internal Section heading (data-panel-section
+    // ="text") must never appear, since the flat multi-field path no longer
+    // delegates to that component at all.
+    expect(host.querySelector('[data-flat-group-open="true"]')).not.toBeNull();
+    expect(host.querySelector('[data-panel-section="text"]')).toBeNull();
+    // Content from the flat multi-field layer list must render.
+    expect(host.textContent).toContain("Text layers");
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — Style group (flag on)", () => {
-  it(
-    "renders the Style group for a style-editable, non-text element",
-    async () => {
-      const { host, root } = await renderPanel(true, styleOnlyElement());
-      expect(host.textContent).toContain("Style");
-      expect(host.textContent).toContain("Fill");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders the Style group for a style-editable, non-text element", async () => {
+    const { host, root } = await renderPanel(true, styleOnlyElement());
+    expect(host.textContent).toContain("Style");
+    expect(host.textContent).toContain("Fill");
+    act(() => root.unmount());
+  });
 
-  it(
-    "one-open accordion: opening Style closes Text",
-    async () => {
-      // baseElement() is text-editable and has capabilities.canEditStyles:
-      // true, so both the Text and Style groups render for it.
-      const { host, root } = await renderPanel(true);
-      const textGroup = () => host.querySelector('[data-flat-group-open="true"]');
-      expect(textGroup()?.textContent).toContain("Text");
-      const styleCollapsedRow = Array.from(
-        host.querySelectorAll('[data-flat-group-collapsed="true"]'),
-      ).find((el) => el.textContent?.includes("Style"));
-      if (!styleCollapsedRow) throw new Error("expected a collapsed Style row");
-      act(() => styleCollapsedRow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-      expect(textGroup()?.textContent).not.toContain("Text");
-      expect(host.querySelector('[data-flat-group-open="true"]')?.textContent).toContain("Style");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("one-open accordion: opening Style closes Text", async () => {
+    // baseElement() is text-editable and has capabilities.canEditStyles:
+    // true, so both the Text and Style groups render for it.
+    const { host, root } = await renderPanel(true);
+    const textGroup = () => host.querySelector('[data-flat-group-open="true"]');
+    expect(textGroup()?.textContent).toContain("Text");
+    const styleCollapsedRow = Array.from(
+      host.querySelectorAll('[data-flat-group-collapsed="true"]'),
+    ).find((el) => el.textContent?.includes("Style"));
+    if (!styleCollapsedRow) throw new Error("expected a collapsed Style row");
+    act(() => styleCollapsedRow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(textGroup()?.textContent).not.toContain("Text");
+    expect(host.querySelector('[data-flat-group-open="true"]')?.textContent).toContain("Style");
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — Layout group (Plan 3a)", () => {
-  it(
-    "always renders the Layout group, and opening it closes whichever other group was open",
-    async () => {
-      const { host, root } = await renderPanel(true);
-      // Text group is open by default for the base text-editable fixture.
-      expect(host.querySelector('[data-flat-group-open="true"]')?.textContent).toContain("Text");
-
-      const layoutCollapsedRow = Array.from(
-        host.querySelectorAll('[data-flat-group-collapsed="true"]'),
-      ).find((el) => el.textContent?.includes("Layout"));
-      if (!layoutCollapsedRow) throw new Error("expected a collapsed Layout row");
-      act(() => layoutCollapsedRow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-
-      const openGroup = host.querySelector('[data-flat-group-open="true"]');
-      expect(openGroup?.textContent).toContain("Layout");
-      expect(openGroup?.textContent).toContain("X");
-      expect(openGroup?.textContent).not.toContain("Ask agent"); // sanity: not matching the footer
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("always renders the Layout group, and opening it closes whichever other group was open", async () => {
+    const { host, root } = await renderPanel(true);
+    // Text group is open by default for the base text-editable fixture.
+    expect(host.querySelector('[data-flat-group-open="true"]')?.textContent).toContain("Text");
+
+    const layoutCollapsedRow = Array.from(
+      host.querySelectorAll('[data-flat-group-collapsed="true"]'),
+    ).find((el) => el.textContent?.includes("Layout"));
+    if (!layoutCollapsedRow) throw new Error("expected a collapsed Layout row");
+    act(() => layoutCollapsedRow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+
+    const openGroup = host.querySelector('[data-flat-group-open="true"]');
+    expect(openGroup?.textContent).toContain("Layout");
+    expect(openGroup?.textContent).toContain("X");
+    expect(openGroup?.textContent).not.toContain("Ask agent"); // sanity: not matching the footer
+    act(() => root.unmount());
+  });
 
-  it(
-    "renders Flex exactly once on the flat path (flat Layout only, legacy suppressed)",
-    async () => {
-      const { host, root } = await renderPanel(true, flexElement());
-      const layoutCollapsedRow = Array.from(
-        host.querySelectorAll('[data-flat-group-collapsed="true"]'),
-      ).find((el) => el.textContent?.includes("Layout"));
-      if (!layoutCollapsedRow) throw new Error("expected a collapsed Layout row");
-      act(() => layoutCollapsedRow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-
-      // The legacy StyleSections Flex `Section` (data-panel-section="flex") must
-      // NOT render on the flat path — the only two Flex renderers are the legacy
-      // Section and the flat LayoutFlexBlock, so its absence + the flat block's
-      // presence proves Flex renders exactly once (not twice, not zero).
-      expect(host.querySelector('[data-panel-section="flex"]')).toBeNull();
-      const openGroup = host.querySelector('[data-flat-group-open="true"]');
-      expect(openGroup?.textContent).toContain("Layout");
-      expect(openGroup?.textContent).toContain("Flex");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders Flex exactly once on the flat path (flat Layout only, legacy suppressed)", async () => {
+    const { host, root } = await renderPanel(true, flexElement());
+    const layoutCollapsedRow = Array.from(
+      host.querySelectorAll('[data-flat-group-collapsed="true"]'),
+    ).find((el) => el.textContent?.includes("Layout"));
+    if (!layoutCollapsedRow) throw new Error("expected a collapsed Layout row");
+    act(() => layoutCollapsedRow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+
+    // The legacy StyleSections Flex `Section` (data-panel-section="flex") must
+    // NOT render on the flat path — the only two Flex renderers are the legacy
+    // Section and the flat LayoutFlexBlock, so its absence + the flat block's
+    // presence proves Flex renders exactly once (not twice, not zero).
+    expect(host.querySelector('[data-panel-section="flex"]')).toBeNull();
+    const openGroup = host.querySelector('[data-flat-group-open="true"]');
+    expect(openGroup?.textContent).toContain("Layout");
+    expect(openGroup?.textContent).toContain("Flex");
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — Motion group (Plan 3b)", () => {
-  it(
-    "renders the Motion group with Timing, and opening it closes the previously open group (4-way exclusivity)",
-    async () => {
-      const { host, root } = await renderPanel(true, animatedElement());
-      // Text is open by default for the text-editable fixture.
-      expect(openGroupText(host)).toContain("Text");
-
-      openFlatGroup(host, "Motion");
-      const openGroup = openGroupText(host);
-      expect(openGroup).toContain("Motion");
-      // FlatTimingRow (Start/End/Duration) renders inside the Motion group.
-      expect(openGroup).toContain("Start");
-      expect(openGroup).toContain("Duration");
-      // One-open accordion: opening Motion closed the Text group.
-      expect(openGroup).not.toContain("Text");
-
-      // Reverse direction: opening Layout closes Motion.
-      openFlatGroup(host, "Layout");
-      const openAfter = openGroupText(host);
-      expect(openAfter).toContain("Layout");
-      expect(openAfter).not.toContain("Motion");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders the Motion group with Timing, and opening it closes the previously open group (4-way exclusivity)", async () => {
+    const { host, root } = await renderPanel(true, animatedElement());
+    // Text is open by default for the text-editable fixture.
+    expect(openGroupText(host)).toContain("Text");
+
+    openFlatGroup(host, "Motion");
+    const openGroup = openGroupText(host);
+    expect(openGroup).toContain("Motion");
+    // FlatTimingRow (Start/End/Duration) renders inside the Motion group.
+    expect(openGroup).toContain("Start");
+    expect(openGroup).toContain("Duration");
+    // One-open accordion: opening Motion closed the Text group.
+    expect(openGroup).not.toContain("Text");
+
+    // Reverse direction: opening Layout closes Motion.
+    openFlatGroup(host, "Layout");
+    const openAfter = openGroupText(host);
+    expect(openAfter).toContain("Layout");
+    expect(openAfter).not.toContain("Motion");
+    act(() => root.unmount());
+  });
 
-  it(
-    "hides the effect list (showEffects off) when the GSAP edit handlers are absent",
-    async () => {
-      // None of the five required edit handlers are supplied here, so the
-      // effect list stays closed — only the Timing row shows.
-      const { host, root } = await renderPanel(true, animatedElement());
-      openFlatGroup(host, "Motion");
-      const openGroup = openGroupText(host);
-      expect(openGroup).toContain("Motion");
-      expect(openGroup).toContain("Duration"); // Timing still shows
-      expect(openGroup).not.toContain("Add effect"); // effects gated off
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("hides the effect list (showEffects off) when the GSAP edit handlers are absent", async () => {
+    // None of the five required edit handlers are supplied here, so the
+    // effect list stays closed — only the Timing row shows.
+    const { host, root } = await renderPanel(true, animatedElement());
+    openFlatGroup(host, "Motion");
+    const openGroup = openGroupText(host);
+    expect(openGroup).toContain("Motion");
+    expect(openGroup).toContain("Duration"); // Timing still shows
+    expect(openGroup).not.toContain("Add effect"); // effects gated off
+    act(() => root.unmount());
+  });
 
-  it(
-    "shows the effect list (showEffects on) when the flag and all five handlers are present",
-    async () => {
-      const { host, root } = await renderPanel(true, animatedElement(), {
-        onUpdateGsapProperty: vi.fn(),
-        onUpdateGsapMeta: vi.fn(),
-        onDeleteGsapAnimation: vi.fn(),
-        onAddGsapProperty: vi.fn(),
-        onAddGsapAnimation: vi.fn(),
-      });
-      openFlatGroup(host, "Motion");
-      expect(openGroupText(host)).toContain("Add effect");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("shows the effect list (showEffects on) when the flag and all five handlers are present", async () => {
+    const { host, root } = await renderPanel(true, animatedElement(), {
+      onUpdateGsapProperty: vi.fn(),
+      onUpdateGsapMeta: vi.fn(),
+      onDeleteGsapAnimation: vi.fn(),
+      onAddGsapProperty: vi.fn(),
+      onAddGsapAnimation: vi.fn(),
+    });
+    openFlatGroup(host, "Motion");
+    expect(openGroupText(host)).toContain("Add effect");
+    act(() => root.unmount());
+  });
 });
 
 // Whole-plan coherence fix: Layout's keyframe-seek basis and Motion's Timing
@@ -557,69 +506,55 @@ describe("PropertyPanel — Motion group (Plan 3b)", () => {
 // to a naive `duration ?? 1` while Motion correctly inferred the range from
 // the tween (position 2, duration 3 -> start 2 / duration 3 / end 5).
 describe("PropertyPanel — flat Layout/Motion timing agreement (whole-plan coherence fix)", () => {
-  it(
-    "Motion's Timing row shows the inferred start/end/duration for an element with animations but no explicit duration",
-    async () => {
-      const { host, root } = await renderPanel(true, inferredMotionElement(), {
-        gsapAnimations: [INFERRED_TIMING_ANIMATION],
-      });
-      openFlatGroup(host, "Motion");
-      const motionGroup = host.querySelector('[data-flat-group-open="true"]');
-      if (!motionGroup) throw new Error("expected the Motion group to be open");
-      expect(motionGroup.textContent).toContain("Inferred");
-      const inputs = motionGroup.querySelectorAll<HTMLInputElement>("input");
-      // FlatTimingRow renders Start, End, Duration in that order.
-      expect(inputs[0]?.value).toBe("2.00s");
-      expect(inputs[1]?.value).toBe("5.00s");
-      expect(inputs[2]?.value).toBe("3.00s");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("Motion's Timing row shows the inferred start/end/duration for an element with animations but no explicit duration", async () => {
+    const { host, root } = await renderPanel(true, inferredMotionElement(), {
+      gsapAnimations: [INFERRED_TIMING_ANIMATION],
+    });
+    openFlatGroup(host, "Motion");
+    const motionGroup = host.querySelector('[data-flat-group-open="true"]');
+    if (!motionGroup) throw new Error("expected the Motion group to be open");
+    expect(motionGroup.textContent).toContain("Inferred");
+    const inputs = motionGroup.querySelectorAll<HTMLInputElement>("input");
+    // FlatTimingRow renders Start, End, Duration in that order.
+    expect(inputs[0]?.value).toBe("2.00s");
+    expect(inputs[1]?.value).toBe("5.00s");
+    expect(inputs[2]?.value).toBe("3.00s");
+    act(() => root.unmount());
+  });
 
-  it(
-    "Layout's X-row keyframe gutter seeks to the SAME absolute time Motion's Timing row shows as the midpoint (50% of an inferred 2s-5s range = 3.5s)",
-    async () => {
-      const onSeekToTime = vi.fn();
-      // Seed the playhead at the clip's real start (t=2, the 0% keyframe's
-      // absolute time) — now that the follow-up fix also recomputes
-      // `currentPct` from the corrected elStart/elDuration basis, "current
-      // position is at the 0% keyframe" must be expressed as an actual t=2
-      // seek rather than relying on the store's untouched t=0 default (which,
-      // post-fix, resolves to a currentPct of -66.7% — well outside the 0%
-      // keyframe's tolerance window, and no longer "the case the coherence
-      // bug affected" that this test documents).
-      const { host, root } = await renderPanel(
-        true,
-        inferredMotionElement(),
-        { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
-        { currentTime: 2 },
-      );
-      openFlatGroup(host, "Layout");
-      const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
-      if (!layoutGroup) throw new Error("expected the Layout group to be open");
+  it("Layout's X-row keyframe gutter seeks to the SAME absolute time Motion's Timing row shows as the midpoint (50% of an inferred 2s-5s range = 3.5s)", async () => {
+    const onSeekToTime = vi.fn();
+    // The playhead sits at the clip's start (t=2, the 0% keyframe): the store's t=0 default
+    // resolves to -66.7%, outside that keyframe's window.
+    const { host, root } = await renderPanel(
+      true,
+      inferredMotionElement(),
+      { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
+      { currentTime: 2 },
+    );
+    openFlatGroup(host, "Layout");
+    const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
+    if (!layoutGroup) throw new Error("expected the Layout group to be open");
 
-      const xRow = Array.from(layoutGroup.querySelectorAll<HTMLElement>(".group")).find(
-        (el) => el.querySelector("span")?.textContent === "X",
-      );
-      if (!xRow) throw new Error("expected an X row");
-      const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
-      if (!gutter) throw new Error("expected a keyframe gutter on the X row");
-      // At currentPct=0 (playhead on the 0% keyframe) the prev arrow is
-      // disabled (no earlier keyframe) and the next arrow seeks to the 50%
-      // keyframe — exactly the case the coherence bug affected.
-      const nextArrow = Array.from(gutter.querySelectorAll<HTMLButtonElement>("button")).find(
-        (b) => b.title === "Next keyframe" && !b.disabled,
-      );
-      if (!nextArrow) throw new Error("expected an enabled next-keyframe arrow button");
-      act(() => nextArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    const xRow = Array.from(layoutGroup.querySelectorAll<HTMLElement>(".group")).find(
+      (el) => el.querySelector("span")?.textContent === "X",
+    );
+    if (!xRow) throw new Error("expected an X row");
+    const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
+    if (!gutter) throw new Error("expected a keyframe gutter on the X row");
+    // At currentPct=0 (playhead on the 0% keyframe) the prev arrow is
+    // disabled (no earlier keyframe) and the next arrow seeks to the 50%
+    // keyframe — exactly the case the coherence bug affected.
+    const nextArrow = Array.from(gutter.querySelectorAll<HTMLButtonElement>("button")).find(
+      (b) => b.title === "Next keyframe" && !b.disabled,
+    );
+    if (!nextArrow) throw new Error("expected an enabled next-keyframe arrow button");
+    act(() => nextArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
 
-      // Same basis as the Timing row: start 2 + 50% * duration 3 = 3.5.
-      expect(onSeekToTime).toHaveBeenCalledWith(3.5);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+    // Same basis as the Timing row: start 2 + 50% * duration 3 = 3.5.
+    expect(onSeekToTime).toHaveBeenCalledWith(3.5);
+    act(() => root.unmount());
+  });
 });
 
 // Follow-up fix (review of 684ec4e87): the seek-basis fix above corrected
@@ -631,80 +566,67 @@ describe("PropertyPanel — flat Layout/Motion timing agreement (whole-plan cohe
 // absolute time of the 50% keyframe (2 + 0.5*3 = 3.5) and confirm its diamond
 // renders "active" (title="Remove x keyframe"), not "inactive"/"ghost".
 describe("PropertyPanel — flat Layout currentPct basis (currentPct follow-up fix)", () => {
-  it(
-    "lights the X-row keyframe diamond as active when the playhead is seeked to that keyframe's real absolute time (inferred 2s-5s range, 50% keyframe = 3.5s)",
-    async () => {
-      const { host, root } = await renderPanel(
-        true,
-        inferredMotionElement(),
-        { gsapAnimations: [INFERRED_TIMING_ANIMATION] },
-        { currentTime: 3.5 },
-      );
-      openFlatGroup(host, "Layout");
-      const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
-      if (!layoutGroup) throw new Error("expected the Layout group to be open");
+  it("lights the X-row keyframe diamond as active when the playhead is seeked to that keyframe's real absolute time (inferred 2s-5s range, 50% keyframe = 3.5s)", async () => {
+    const { host, root } = await renderPanel(
+      true,
+      inferredMotionElement(),
+      { gsapAnimations: [INFERRED_TIMING_ANIMATION] },
+      { currentTime: 3.5 },
+    );
+    openFlatGroup(host, "Layout");
+    const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
+    if (!layoutGroup) throw new Error("expected the Layout group to be open");
 
-      const xRow = Array.from(layoutGroup.querySelectorAll<HTMLElement>(".group")).find(
-        (el) => el.querySelector("span")?.textContent === "X",
-      );
-      if (!xRow) throw new Error("expected an X row");
-      const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
-      if (!gutter) throw new Error("expected a keyframe gutter on the X row");
-      // The diamond is the only gutter button that reports a pressed state;
-      // the prev/next arrows carry titles too, so `button[title]` is ambiguous.
-      const diamond = gutter.querySelector<HTMLButtonElement>("button[aria-pressed]");
-      if (!diamond) throw new Error("expected a keyframe diamond button");
-      // KeyframeDiamond's title mapping: active -> "Remove ... keyframe",
-      // inactive -> "Add ... keyframe", ghost -> "Convert ... to keyframes".
-      // Before this fix, currentPct was computed against the naive
-      // elStart=0/elDuration=1 basis, so t=3.5 produced currentPct=350% —
-      // nowhere near the 50% keyframe within KeyframeNavigation's tolerance —
-      // and the diamond stayed "inactive" even though the playhead was
-      // exactly on that keyframe's real time.
-      expect(diamond.title).toBe("Remove x keyframe");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+    const xRow = Array.from(layoutGroup.querySelectorAll<HTMLElement>(".group")).find(
+      (el) => el.querySelector("span")?.textContent === "X",
+    );
+    if (!xRow) throw new Error("expected an X row");
+    const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
+    if (!gutter) throw new Error("expected a keyframe gutter on the X row");
+    // The diamond is the only gutter button that reports a pressed state;
+    // the prev/next arrows carry titles too, so `button[title]` is ambiguous.
+    const diamond = gutter.querySelector<HTMLButtonElement>("button[aria-pressed]");
+    if (!diamond) throw new Error("expected a keyframe diamond button");
+    // "Remove" means active: on the naive 0..1 basis t=3.5 read as 350% and the diamond stayed
+    // "Add" although the playhead sat on that keyframe.
+    expect(diamond.title).toBe("Remove x keyframe");
+    act(() => root.unmount());
+  });
 
-  it(
-    "prev/next arrows re-center on the current keyframe once currentPct agrees with the corrected seek basis",
-    async () => {
-      const onSeekToTime = vi.fn();
-      const { host, root } = await renderPanel(
-        true,
-        inferredMotionElement(),
-        { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
-        { currentTime: 3.5 },
-      );
-      openFlatGroup(host, "Layout");
-      const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
-      if (!layoutGroup) throw new Error("expected the Layout group to be open");
+  it("prev/next arrows re-center on the current keyframe once currentPct agrees with the corrected seek basis", async () => {
+    const onSeekToTime = vi.fn();
+    const { host, root } = await renderPanel(
+      true,
+      inferredMotionElement(),
+      { gsapAnimations: [INFERRED_TIMING_ANIMATION], onSeekToTime },
+      { currentTime: 3.5 },
+    );
+    openFlatGroup(host, "Layout");
+    const layoutGroup = host.querySelector('[data-flat-group-open="true"]');
+    if (!layoutGroup) throw new Error("expected the Layout group to be open");
 
-      const xRow = Array.from(layoutGroup.querySelectorAll<HTMLElement>(".group")).find(
-        (el) => el.querySelector("span")?.textContent === "X",
-      );
-      if (!xRow) throw new Error("expected an X row");
-      const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
-      if (!gutter) throw new Error("expected a keyframe gutter on the X row");
-      const buttons = Array.from(gutter.querySelectorAll<HTMLButtonElement>("button"));
-      const [prevArrow, , nextArrow] = buttons;
-      if (!prevArrow || !nextArrow) throw new Error("expected prev/next arrow buttons");
-      // At the 50% keyframe (t=3.5), prev should target the 0% keyframe
-      // (absolute t=2) and next should target the 100% keyframe (absolute
-      // t=5) — both only resolvable once currentPct agrees with elStart=2/
-      // elDuration=3, the same basis the seek fix already uses.
-      expect(prevArrow.disabled).toBe(false);
-      act(() => prevArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-      expect(onSeekToTime).toHaveBeenLastCalledWith(2);
-
-      expect(nextArrow.disabled).toBe(false);
-      act(() => nextArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-      expect(onSeekToTime).toHaveBeenLastCalledWith(5);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+    const xRow = Array.from(layoutGroup.querySelectorAll<HTMLElement>(".group")).find(
+      (el) => el.querySelector("span")?.textContent === "X",
+    );
+    if (!xRow) throw new Error("expected an X row");
+    const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
+    if (!gutter) throw new Error("expected a keyframe gutter on the X row");
+    const buttons = Array.from(gutter.querySelectorAll<HTMLButtonElement>("button"));
+    const [prevArrow, , nextArrow] = buttons;
+    if (!prevArrow || !nextArrow) throw new Error("expected prev/next arrow buttons");
+    // At the 50% keyframe (t=3.5), prev should target the 0% keyframe
+    // (absolute t=2) and next should target the 100% keyframe (absolute
+    // t=5) — both only resolvable once currentPct agrees with elStart=2/
+    // elDuration=3, the same basis the seek fix already uses.
+    expect(prevArrow.disabled).toBe(false);
+    act(() => prevArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onSeekToTime).toHaveBeenLastCalledWith(2);
+
+    expect(nextArrow.disabled).toBe(false);
+    act(() => nextArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(onSeekToTime).toHaveBeenLastCalledWith(5);
+    act(() => root.unmount());
+  });
 });
 
 // Media fixtures (Plan 4 Task 7): the three tag values resolveEditingSections
@@ -760,126 +682,97 @@ function flatGroupTitles(host: HTMLElement): string[] {
 }
 
 describe("PropertyPanel — Grade group (flag on)", () => {
-  it(
-    "renders the Grade group with its accessory for a grade-editable (video) element",
-    async () => {
-      const { host, root } = await renderPanel(true, {
-        ...baseElement(),
-        tagName: "video",
-        textFields: [],
-      });
-      const gradeCollapsedOrOpen =
-        host.querySelector('[data-flat-group-collapsed="true"]') ||
-        host.querySelector('[data-flat-group-open="true"]');
-      expect(host.textContent).toContain("Grade");
-      expect(gradeCollapsedOrOpen).not.toBeNull();
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders the Grade group with its accessory for a grade-editable (video) element", async () => {
+    const { host, root } = await renderPanel(true, {
+      ...baseElement(),
+      tagName: "video",
+      textFields: [],
+    });
+    const gradeCollapsedOrOpen =
+      host.querySelector('[data-flat-group-collapsed="true"]') ||
+      host.querySelector('[data-flat-group-open="true"]');
+    expect(host.textContent).toContain("Grade");
+    expect(gradeCollapsedOrOpen).not.toBeNull();
+    act(() => root.unmount());
+  });
 
-  it(
-    "does not render the legacy Style/Grade Section duplicates for a style-and-grade-editable element",
-    async () => {
-      // A <video> with no text fields is both style-editable (inherited
-      // capabilities.canEditStyles: true) and grade-editable (tag === "video"),
-      // so both the flat Style and Grade groups render — the exact shape that
-      // used to also mount the legacy ColorGradingSection + StyleSections below
-      // them (the hybrid-duplication bug this task retires).
-      const { host, root } = await renderPanel(true, {
-        ...baseElement(),
-        tagName: "video",
-        textFields: [],
-      });
-      expect(host.textContent).toContain("Style");
-      expect(host.textContent).toContain("Grade");
-      // The legacy `Section` primitive (propertyPanelStyleSections.tsx /
-      // propertyPanelColorGradingSection.tsx) renders a `<section
-      // data-panel-section="<slugified-title>">` for each of its sections. A
-      // bare textContent check can't tell a legacy Section title apart from a
-      // flat row label with the same word — "Fill" is both the legacy Fill
-      // `Section` title AND a row label inside FlatStyleSection, which is
-      // supposed to still be there — so assert on the legacy Section's actual
-      // DOM shape instead of a substring match.
-      for (const slug of [
-        "radius",
-        "stroke",
-        "effects",
-        "clip",
-        "transparency",
-        "fill",
-        "color-grading",
-      ]) {
-        expect(host.querySelector(`[data-panel-section="${slug}"]`)).toBeNull();
-      }
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("does not render the legacy Style/Grade Section duplicates for a style-and-grade-editable element", async () => {
+    // A <video> with no text fields is both style- and grade-editable: the shape that also
+    // mounted the legacy ColorGradingSection and StyleSections below the flat groups.
+    const { host, root } = await renderPanel(true, {
+      ...baseElement(),
+      tagName: "video",
+      textFields: [],
+    });
+    expect(host.textContent).toContain("Style");
+    expect(host.textContent).toContain("Grade");
+    // Each legacy Section renders `<section data-panel-section="<slug>">`; text alone cannot tell
+    // it from a flat row of the same name ("Fill" is both), so match that shape.
+    for (const slug of [
+      "radius",
+      "stroke",
+      "effects",
+      "clip",
+      "transparency",
+      "fill",
+      "color-grading",
+    ]) {
+      expect(host.querySelector(`[data-panel-section="${slug}"]`)).toBeNull();
+    }
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — Media group (Plan 4)", () => {
-  it(
-    "renders the flat Media group and not the legacy MediaSection, for a video element",
-    async () => {
-      const { host, root } = await renderPanel(true, videoElement() as never);
-      // A Media FlatGroup exists (open or collapsed).
-      expect(flatGroupTitles(host)).toContain("Media");
-      // The legacy MediaSection renders its rows inside a `Section` whose
-      // data-panel-section slug is the media title ("video"/"image"/"audio").
-      // On the flat path it's fully replaced, so none of those may appear.
-      expect(host.querySelector('[data-panel-section="video"]')).toBeNull();
-      expect(host.querySelector('[data-panel-section="image"]')).toBeNull();
-      expect(host.querySelector('[data-panel-section="audio"]')).toBeNull();
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders the flat Media group and not the legacy MediaSection, for a video element", async () => {
+    const { host, root } = await renderPanel(true, videoElement() as never);
+    // A Media FlatGroup exists (open or collapsed).
+    expect(flatGroupTitles(host)).toContain("Media");
+    // The legacy MediaSection renders its rows inside a `Section` whose
+    // data-panel-section slug is the media title ("video"/"image"/"audio").
+    // On the flat path it's fully replaced, so none of those may appear.
+    expect(host.querySelector('[data-panel-section="video"]')).toBeNull();
+    expect(host.querySelector('[data-panel-section="image"]')).toBeNull();
+    expect(host.querySelector('[data-panel-section="audio"]')).toBeNull();
+    act(() => root.unmount());
+  });
 
-  it(
-    "one-open accordion: opening Media closes whichever other group was open, and vice versa (5-way exclusivity)",
-    async () => {
-      // videoElement() has canEditStyles: true and no text fields, so Style is
-      // the default-open group; Layout and Media render collapsed alongside it.
-      const { host, root } = await renderPanel(true, videoElement() as never);
-      expect(openGroupText(host)).toContain("Style");
-
-      // Opening Media closes Style.
-      openFlatGroup(host, "Media");
-      const afterMedia = openGroupText(host);
-      expect(afterMedia).toContain("Media");
-      expect(afterMedia).not.toContain("Style");
-
-      // Reverse direction: opening Layout closes Media — same shared openGroupId.
-      openFlatGroup(host, "Layout");
-      const afterLayout = openGroupText(host);
-      expect(afterLayout).toContain("Layout");
-      expect(afterLayout).not.toContain("Media");
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("one-open accordion: opening Media closes whichever other group was open, and vice versa (5-way exclusivity)", async () => {
+    // videoElement() has canEditStyles: true and no text fields, so Style is
+    // the default-open group; Layout and Media render collapsed alongside it.
+    const { host, root } = await renderPanel(true, videoElement() as never);
+    expect(openGroupText(host)).toContain("Style");
+
+    // Opening Media closes Style.
+    openFlatGroup(host, "Media");
+    const afterMedia = openGroupText(host);
+    expect(afterMedia).toContain("Media");
+    expect(afterMedia).not.toContain("Style");
+
+    // Reverse direction: opening Layout closes Media — same shared openGroupId.
+    openFlatGroup(host, "Layout");
+    const afterLayout = openGroupText(host);
+    expect(afterLayout).toContain("Layout");
+    expect(afterLayout).not.toContain("Media");
+    act(() => root.unmount());
+  });
 
-  it(
-    "gates the Media group exactly like the legacy MediaSection: present for video/img/audio, absent for a plain div/text element",
-    async () => {
-      for (const fixture of [videoElement, imageElement, audioElement]) {
-        const { host, root } = await renderPanel(true, fixture() as never);
-        expect(flatGroupTitles(host)).toContain("Media");
-        act(() => root.unmount());
-      }
-
-      // baseElement() is a plain <div> with text — sections.media is false, so
-      // no Media group (flat or legacy) may render.
-      const { host, root } = await renderPanel(true);
-      expect(flatGroupTitles(host)).not.toContain("Media");
-      expect(host.querySelector('[data-panel-section="video"]')).toBeNull();
-      expect(host.querySelector('[data-panel-section="image"]')).toBeNull();
-      expect(host.querySelector('[data-panel-section="audio"]')).toBeNull();
+  it("gates the Media group exactly like the legacy MediaSection: present for video/img/audio, absent for a plain div/text element", async () => {
+    for (const fixture of [videoElement, imageElement, audioElement]) {
+      const { host, root } = await renderPanel(true, fixture() as never);
+      expect(flatGroupTitles(host)).toContain("Media");
       act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+    }
+
+    // baseElement() is a plain <div> with text — sections.media is false, so
+    // no Media group (flat or legacy) may render.
+    const { host, root } = await renderPanel(true);
+    expect(flatGroupTitles(host)).not.toContain("Media");
+    expect(host.querySelector('[data-panel-section="video"]')).toBeNull();
+    expect(host.querySelector('[data-panel-section="image"]')).toBeNull();
+    expect(host.querySelector('[data-panel-section="audio"]')).toBeNull();
+    act(() => root.unmount());
+  });
 });
 
 // design_handoff scrollable-open-section: collapsed headers before/after the
@@ -891,135 +784,118 @@ describe("PropertyPanel — Media group (Plan 4)", () => {
 // renders as an open header + scrollable body, grade/effects/media render as fixed
 // collapsed headers after it — in exactly that DOM order, nothing sticky.
 describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)", () => {
-  it(
-    "renders before-open headers, the open group (header + scrollable body), then after-open headers, in that exact order, with nothing sticky",
-    async () => {
-      const { host, root } = await renderPanel(true, sixGroupElement());
-      // sixGroupElement() opens Text by default; open Motion (index 3) to
-      // match the worked example.
-      openFlatGroup(host, "Motion");
-      expect(openGroupText(host)).toContain("Motion");
-
-      const body = host.querySelector('[data-flat-panel-body="true"]');
-      if (!body) throw new Error("expected the flat panel body container");
-
-      // Titles in DOM order: each child is either a collapsed header button
-      // (before/after the open group) or the open-group wrapper div.
-      const titles = Array.from(body.children).map((child) => {
-        if (child.matches('[data-flat-group-collapsed="true"]')) return child.textContent ?? "";
-        if (child.matches('[data-flat-group-open="true"]')) return child.textContent ?? "";
-        return null;
-      });
-      // Filter to just the group entries (drop any non-group nulls).
-      const groupTitles = titles.filter((t): t is string => t !== null);
-      expect(groupTitles).toHaveLength(7);
-      expect(groupTitles[0]).toContain("Text");
-      expect(groupTitles[1]).toContain("Style");
-      expect(groupTitles[2]).toContain("Layout");
-      expect(groupTitles[3]).toContain("Motion");
-      expect(groupTitles[4]).toContain("Grade");
-      expect(groupTitles[5]).toContain("Effects");
-      expect(groupTitles[6]).toContain("Media");
-
-      // The open group (Motion, index 3) is the one wrapped in
-      // data-flat-group-open, sitting between the before/after collapsed
-      // headers — and it must contain a dedicated scrollable body.
-      const openWrapper = host.querySelector('[data-flat-group-open="true"]');
-      if (!openWrapper) throw new Error("expected the open-group wrapper");
-      expect(openWrapper.textContent).toContain("Motion");
-      expect(openWrapper.querySelector(".overflow-y-auto")).not.toBeNull();
-
-      // Nothing anywhere in the panel body carries inline sticky positioning
-      // — the entire sticky-stacking mechanism is gone.
-      const stickyEls = Array.from(body.querySelectorAll<HTMLElement>("[style]")).filter(
-        (el) => el.style.position === "sticky",
-      );
-      expect(stickyEls).toHaveLength(0);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("renders before-open headers, the open group (header + scrollable body), then after-open headers, in that exact order, with nothing sticky", async () => {
+    const { host, root } = await renderPanel(true, sixGroupElement());
+    // sixGroupElement() opens Text by default; open Motion (index 3) to
+    // match the worked example.
+    openFlatGroup(host, "Motion");
+    expect(openGroupText(host)).toContain("Motion");
+
+    const body = host.querySelector('[data-flat-panel-body="true"]');
+    if (!body) throw new Error("expected the flat panel body container");
+
+    // Titles in DOM order: each child is either a collapsed header button
+    // (before/after the open group) or the open-group wrapper div.
+    const titles = Array.from(body.children).map((child) => {
+      if (child.matches('[data-flat-group-collapsed="true"]')) return child.textContent ?? "";
+      if (child.matches('[data-flat-group-open="true"]')) return child.textContent ?? "";
+      return null;
+    });
+    // Filter to just the group entries (drop any non-group nulls).
+    const groupTitles = titles.filter((t): t is string => t !== null);
+    expect(groupTitles).toHaveLength(7);
+    expect(groupTitles[0]).toContain("Text");
+    expect(groupTitles[1]).toContain("Style");
+    expect(groupTitles[2]).toContain("Layout");
+    expect(groupTitles[3]).toContain("Motion");
+    expect(groupTitles[4]).toContain("Grade");
+    expect(groupTitles[5]).toContain("Effects");
+    expect(groupTitles[6]).toContain("Media");
+
+    // The open group (Motion, index 3) is the one wrapped in
+    // data-flat-group-open, sitting between the before/after collapsed
+    // headers — and it must contain a dedicated scrollable body.
+    const openWrapper = host.querySelector('[data-flat-group-open="true"]');
+    if (!openWrapper) throw new Error("expected the open-group wrapper");
+    expect(openWrapper.textContent).toContain("Motion");
+    expect(openWrapper.querySelector(".overflow-y-auto")).not.toBeNull();
+
+    // Nothing anywhere in the panel body carries inline sticky positioning
+    // — the entire sticky-stacking mechanism is gone.
+    const stickyEls = Array.from(body.querySelectorAll<HTMLElement>("[style]")).filter(
+      (el) => el.style.position === "sticky",
+    );
+    expect(stickyEls).toHaveLength(0);
+    act(() => root.unmount());
+  });
 
-  it(
-    "renders every group as a plain collapsed header with no scrollable middle region when nothing is open",
-    async () => {
-      const { host, root } = await renderPanel(true, sixGroupElement());
-      // Collapse the default-open Text group so openGroupId becomes "".
-      const collapseButton = host.querySelector<HTMLButtonElement>(
-        '[data-flat-group-open="true"] button[title="Collapse"]',
-      );
-      act(() => collapseButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
-      expect(host.querySelector('[data-flat-group-open="true"]')).toBeNull();
+  it("renders every group as a plain collapsed header with no scrollable middle region when nothing is open", async () => {
+    const { host, root } = await renderPanel(true, sixGroupElement());
+    // Collapse the default-open Text group so openGroupId becomes "".
+    const collapseButton = host.querySelector<HTMLButtonElement>(
+      '[data-flat-group-open="true"] button[title="Collapse"]',
+    );
+    act(() => collapseButton?.dispatchEvent(new MouseEvent("click", { bubbles: true })));
+    expect(host.querySelector('[data-flat-group-open="true"]')).toBeNull();
 
-      const collapsedRows = Array.from(
-        host.querySelectorAll<HTMLButtonElement>('[data-flat-group-collapsed="true"]'),
-      );
-      expect(collapsedRows).toHaveLength(7);
-      const titlesInOrder = collapsedRows.map((el) => el.textContent ?? "");
-      expect(titlesInOrder[0]).toContain("Text");
-      expect(titlesInOrder[1]).toContain("Style");
-      expect(titlesInOrder[2]).toContain("Layout");
-      expect(titlesInOrder[3]).toContain("Motion");
-      expect(titlesInOrder[4]).toContain("Grade");
-      expect(titlesInOrder[5]).toContain("Effects");
-      expect(titlesInOrder[6]).toContain("Media");
-
-      const body = host.querySelector('[data-flat-panel-body="true"]');
-      expect(body?.querySelector(".overflow-y-auto")).toBeNull();
-      for (const row of collapsedRows) {
-        expect(row.style.position).toBe("");
-      }
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+    const collapsedRows = Array.from(
+      host.querySelectorAll<HTMLButtonElement>('[data-flat-group-collapsed="true"]'),
+    );
+    expect(collapsedRows).toHaveLength(7);
+    const titlesInOrder = collapsedRows.map((el) => el.textContent ?? "");
+    expect(titlesInOrder[0]).toContain("Text");
+    expect(titlesInOrder[1]).toContain("Style");
+    expect(titlesInOrder[2]).toContain("Layout");
+    expect(titlesInOrder[3]).toContain("Motion");
+    expect(titlesInOrder[4]).toContain("Grade");
+    expect(titlesInOrder[5]).toContain("Effects");
+    expect(titlesInOrder[6]).toContain("Media");
+
+    const body = host.querySelector('[data-flat-panel-body="true"]');
+    expect(body?.querySelector(".overflow-y-auto")).toBeNull();
+    for (const row of collapsedRows) {
+      expect(row.style.position).toBe("");
+    }
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — flat group entrance animation scoping (fix round)", () => {
-  it(
-    "animates only the opening group and the implicitly-closed group on a non-adjacent toggle, never untouched siblings",
-    async () => {
-      const { host, root } = await renderPanel(true, sixGroupElement());
-      // sixGroupElement() opens Text by default; jump straight to Motion
-      // (skipping over Style/Layout) first, matching the Plan 11 worked
-      // example, then jump back to Text — non-adjacent from Motion, again
-      // skipping over Style/Layout. This is the exact array-slice-position-
-      // shift scenario the justToggledIds mechanism exists to guard: Style
-      // and Layout shift position in the before/after-open slices on both
-      // toggles even though neither of them is the group being toggled.
-      openFlatGroup(host, "Motion");
-      expect(openGroupText(host)).toContain("Motion");
-      openFlatGroup(host, "Text");
-      expect(openGroupText(host)).toContain("Text");
-
-      const collapsedRowByTitle = (title: string) => {
-        const row = Array.from(host.querySelectorAll('[data-flat-group-collapsed="true"]')).find(
-          (el) => el.textContent?.includes(title),
-        );
-        if (!row) throw new Error(`expected a collapsed ${title} row`);
-        return row;
-      };
-
-      // Untouched, non-adjacent siblings must NOT receive the entrance class,
-      // even though they shifted position in the collapsed-header list.
-      expect(collapsedRowByTitle("Style").classList.contains("hf-flat-group-enter")).toBe(false);
-      expect(collapsedRowByTitle("Layout").classList.contains("hf-flat-group-enter")).toBe(false);
-      expect(collapsedRowByTitle("Grade").classList.contains("hf-flat-group-enter")).toBe(false);
-      expect(collapsedRowByTitle("Media").classList.contains("hf-flat-group-enter")).toBe(false);
-
-      // Motion — open a moment ago, just implicitly closed by the click on
-      // Text — must still play its own collapse-entrance animation (Finding 1).
-      expect(collapsedRowByTitle("Motion").classList.contains("hf-flat-group-enter")).toBe(true);
-
-      // Text — the group actually clicked open — must animate too.
-      const openWrapper = host.querySelector('[data-flat-group-open="true"]');
-      if (!openWrapper) throw new Error("expected the open-group wrapper");
-      expect(openWrapper.querySelector(".hf-flat-group-enter")).not.toBeNull();
-
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("animates only the opening group and the implicitly-closed group on a non-adjacent toggle, never untouched siblings", async () => {
+    const { host, root } = await renderPanel(true, sixGroupElement());
+    // Text opens by default; jumping to Motion and back skips Style and Layout both ways, so they
+    // shift position in the open slices without being toggled: what justToggledIds guards.
+    openFlatGroup(host, "Motion");
+    expect(openGroupText(host)).toContain("Motion");
+    openFlatGroup(host, "Text");
+    expect(openGroupText(host)).toContain("Text");
+
+    const collapsedRowByTitle = (title: string) => {
+      const row = Array.from(host.querySelectorAll('[data-flat-group-collapsed="true"]')).find(
+        (el) => el.textContent?.includes(title),
+      );
+      if (!row) throw new Error(`expected a collapsed ${title} row`);
+      return row;
+    };
+
+    // Untouched, non-adjacent siblings must NOT receive the entrance class,
+    // even though they shifted position in the collapsed-header list.
+    expect(collapsedRowByTitle("Style").classList.contains("hf-flat-group-enter")).toBe(false);
+    expect(collapsedRowByTitle("Layout").classList.contains("hf-flat-group-enter")).toBe(false);
+    expect(collapsedRowByTitle("Grade").classList.contains("hf-flat-group-enter")).toBe(false);
+    expect(collapsedRowByTitle("Media").classList.contains("hf-flat-group-enter")).toBe(false);
+
+    // Motion — open a moment ago, just implicitly closed by the click on
+    // Text — must still play its own collapse-entrance animation (Finding 1).
+    expect(collapsedRowByTitle("Motion").classList.contains("hf-flat-group-enter")).toBe(true);
+
+    // Text — the group actually clicked open — must animate too.
+    const openWrapper = host.querySelector('[data-flat-group-open="true"]');
+    if (!openWrapper) throw new Error("expected the open-group wrapper");
+    expect(openWrapper.querySelector(".hf-flat-group-enter")).not.toBeNull();
+
+    act(() => root.unmount());
+  });
 });
 
 describe("PropertyPanel — Motion is for things that move", () => {
@@ -1033,148 +909,124 @@ describe("PropertyPanel — Motion is for things that move", () => {
         return element;
       },
     ],
-  ])(
-    "recognizes %s through the shared audio predicate",
-    async (_label, makeElement) => {
-      const fixture = {
-        ...audioClipElement(),
-        element: makeElement(),
-        tagName: "div",
-      };
-      const { host, root } = await renderPanel(true, fixture);
-      const titles = Array.from(
-        host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
-      ).map((node) => node.textContent ?? "");
-      expect(titles.some((title) => title.includes("Motion"))).toBe(false);
-      expect(titles.some((title) => title.includes("Timing"))).toBe(true);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  ])("recognizes %s through the shared audio predicate", async (_label, makeElement) => {
+    const fixture = {
+      ...audioClipElement(),
+      element: makeElement(),
+      tagName: "div",
+    };
+    const { host, root } = await renderPanel(true, fixture);
+    const titles = Array.from(
+      host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
+    ).map((node) => node.textContent ?? "");
+    expect(titles.some((title) => title.includes("Motion"))).toBe(false);
+    expect(titles.some((title) => title.includes("Timing"))).toBe(true);
+    act(() => root.unmount());
+  });
 
-  it(
-    "calls the section Timing on an audio clip, and offers no tween editor",
-    async () => {
-      const { host, root } = await renderPanel(true, audioClipElement());
-      const titles = Array.from(
-        host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
-      ).map((el) => el.textContent ?? "");
-      // The clip's placement survives — it is still a clip on a track.
-      expect(titles.some((t) => t.includes("Timing"))).toBe(true);
-      // "Motion" named the tween editor, which an <audio> element has no
-      // transform, opacity or box for. Showing it was the panel gating on
-      // handler presence rather than on the element.
-      expect(titles.some((t) => t.includes("Motion"))).toBe(false);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("calls the section Timing on an audio clip, and offers no tween editor", async () => {
+    const { host, root } = await renderPanel(true, audioClipElement());
+    const titles = Array.from(
+      host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
+    ).map((el) => el.textContent ?? "");
+    // The clip's placement survives — it is still a clip on a track.
+    expect(titles.some((t) => t.includes("Timing"))).toBe(true);
+    // "Motion" named the tween editor, which an <audio> element has no
+    // transform, opacity or box for. Showing it was the panel gating on
+    // handler presence rather than on the element.
+    expect(titles.some((t) => t.includes("Motion"))).toBe(false);
+    act(() => root.unmount());
+  });
 
-  it(
-    "offers a mute on an audible audio clip and toggles it through the timeline",
-    async () => {
-      const onToggleElementHidden = vi.fn();
-      const { host, root } = await renderPanel(
-        true,
-        audioClipElement(),
-        { onToggleElementHidden },
-        { selectedElementId: "vo-1" },
-      );
-      act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
-      expect(onToggleElementHidden).toHaveBeenCalledWith("vo-1", true);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("offers a mute on an audible audio clip and toggles it through the timeline", async () => {
+    const onToggleElementHidden = vi.fn();
+    const { host, root } = await renderPanel(
+      true,
+      audioClipElement(),
+      { onToggleElementHidden },
+      { selectedElementId: "vo-1" },
+    );
+    act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
+    expect(onToggleElementHidden).toHaveBeenCalledWith("vo-1", true);
+    act(() => root.unmount());
+  });
 
   // A bus has no timeline row, so the panel is its only mute; it must go both ways.
-  it(
-    "mutes, unmutes and mutes an audio group from the panel header",
-    async () => {
-      const bus = (hidden: boolean) => {
-        const element = audioBusElement();
-        return {
-          ...element,
-          dataAttributes: { ...element.dataAttributes, ...(hidden ? { hidden: "" } : {}) },
-        };
-      };
-      let hidden = true;
-      const onSetAudioGroupAttributeQuiet = vi.fn(
-        async (_id: string, _attr: string, value: string | null, _label: string) => {
-          hidden = value !== null;
-        },
-      );
-      // The panel re-reads its selection after the write; nothing else re-renders it here.
-      const { host, root, render } = await renderPanel(
-        true,
-        bus(true),
-        {},
-        {
-          timelineEdit: { onSetAudioGroupAttributeQuiet },
-          selectionRef: { current: bus(true) },
-          refreshSelection: () => render(bus(hidden)),
-        },
-      );
-      const press = async (label: string) => {
-        const button = host.querySelector<HTMLElement>(`button[aria-label="${label}"]`);
-        if (!button) throw new Error(`Expected a "${label}" button`);
-        await act(async () => button.click());
+  it("mutes, unmutes and mutes an audio group from the panel header", async () => {
+    const bus = (hidden: boolean) => {
+      const element = audioBusElement();
+      return {
+        ...element,
+        dataAttributes: { ...element.dataAttributes, ...(hidden ? { hidden: "" } : {}) },
       };
-      await press("Unmute element");
-      await press("Mute element");
-      await press("Unmute element");
-      expect(onSetAudioGroupAttributeQuiet.mock.calls).toEqual([
-        ["voiceover", "data-hidden", null, "Unmute element"],
-        ["voiceover", "data-hidden", "", "Mute element"],
-        ["voiceover", "data-hidden", null, "Unmute element"],
-      ]);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+    };
+    let hidden = true;
+    const onSetAudioGroupAttributeQuiet = vi.fn(
+      async (_id: string, _attr: string, value: string | null, _label: string) => {
+        hidden = value !== null;
+      },
+    );
+    // The panel re-reads its selection after the write; nothing else re-renders it here.
+    const { host, root, render } = await renderPanel(
+      true,
+      bus(true),
+      {},
+      {
+        timelineEdit: { onSetAudioGroupAttributeQuiet },
+        selectionRef: { current: bus(true) },
+        refreshSelection: () => render(bus(hidden)),
+      },
+    );
+    const press = async (label: string) => {
+      const button = host.querySelector<HTMLElement>(`button[aria-label="${label}"]`);
+      if (!button) throw new Error(`Expected a "${label}" button`);
+      await act(async () => button.click());
+    };
+    await press("Unmute element");
+    await press("Mute element");
+    await press("Unmute element");
+    expect(onSetAudioGroupAttributeQuiet.mock.calls).toEqual([
+      ["voiceover", "data-hidden", null, "Unmute element"],
+      ["voiceover", "data-hidden", "", "Mute element"],
+      ["voiceover", "data-hidden", null, "Unmute element"],
+    ]);
+    act(() => root.unmount());
+  });
 
-  it(
-    "re-reads the current selection, not the muted bus, once the write lands",
-    async () => {
-      let land = () => {};
-      const onSetAudioGroupAttributeQuiet = vi.fn(
-        () => new Promise<void>((resolve) => (land = resolve)),
-      );
-      const selectionRef: { current: unknown } = { current: audioBusElement() };
-      const refreshSelection = vi.fn();
-      const { host, root } = await renderPanel(
-        true,
-        audioBusElement(),
-        {},
-        {
-          timelineEdit: { onSetAudioGroupAttributeQuiet },
-          selectionRef,
-          refreshSelection,
-        },
-      );
-      act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
-      const next = audioClipElement();
-      selectionRef.current = next;
-      await act(async () => land());
-      expect(refreshSelection.mock.calls).toEqual([[next]]);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("re-reads the current selection, not the muted bus, once the write lands", async () => {
+    let land = () => {};
+    const onSetAudioGroupAttributeQuiet = vi.fn(
+      () => new Promise<void>((resolve) => (land = resolve)),
+    );
+    const selectionRef: { current: unknown } = { current: audioBusElement() };
+    const refreshSelection = vi.fn();
+    const { host, root } = await renderPanel(
+      true,
+      audioBusElement(),
+      {},
+      {
+        timelineEdit: { onSetAudioGroupAttributeQuiet },
+        selectionRef,
+        refreshSelection,
+      },
+    );
+    act(() => host.querySelector<HTMLElement>('button[aria-label="Mute element"]')!.click());
+    const next = audioClipElement();
+    selectionRef.current = next;
+    await act(async () => land());
+    expect(refreshSelection.mock.calls).toEqual([[next]]);
+    act(() => root.unmount());
+  });
 
-  it(
-    "offers a bus neither — it has no clip range to edit",
-    async () => {
-      const { host, root } = await renderPanel(true, audioBusElement());
-      const titles = Array.from(
-        host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
-      ).map((el) => el.textContent ?? "");
-      expect(titles.some((t) => t.includes("Motion"))).toBe(false);
-      expect(titles.some((t) => t.includes("Timing"))).toBe(false);
-      // It is still a mixer bus: the reason to select one at all.
-      expect(titles.some((t) => t.includes("Audio FX"))).toBe(true);
-      act(() => root.unmount());
-    },
-    RENDER_TIMEOUT_MS,
-  );
+  it("offers a bus neither — it has no clip range to edit", async () => {
+    const { host, root } = await renderPanel(true, audioBusElement());
+    const titles = Array.from(
+      host.querySelectorAll<HTMLElement>("[data-flat-group-collapsed], [data-flat-group-open]"),
+    ).map((el) => el.textContent ?? "");
+    expect(titles.some((t) => t.includes("Motion"))).toBe(false);
+    expect(titles.some((t) => t.includes("Timing"))).toBe(false);
+    // It is still a mixer bus: the reason to select one at all.
+    expect(titles.some((t) => t.includes("Audio FX"))).toBe(true);
+    act(() => root.unmount());
+  });
 });