@hyperframes/studio 0.8.47 → 0.8.49

package/src/hooks/useGroupCommits.ts

@@ -5,13 +5,24 @@ import {
   saveProjectFilesWithHistory,
   type DomEditCommitBaseParams,
 } from "../utils/studioFileHistory";
-import { buildDomEditPatchTarget, type DomEditSelection } from "../components/editor/domEditing";
+import {
+  buildDomEditPatchTarget,
+  readHfId,
+  type DomEditSelection,
+} from "../components/editor/domEditing";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
+import {
+  findMatchingTimelineElementId,
+  resolveElementTrack,
+  type ElementMatchSelection,
+} from "../utils/studioHelpers";
+import type { TimelineElement } from "../player";
 
 interface UseGroupCommitsParams extends DomEditCommitBaseParams {
   /** Resync the SDK session after a server-side write (the wrapper/unwrap changes
    * structure the in-memory doc doesn't know about). */
   forceReloadSdkSession?: () => void;
+  timelineElements: TimelineElement[];
 }
 
 interface PatchTarget {
@@ -24,7 +35,21 @@ interface PatchTarget {
 interface GroupGeometry {
   bbox: { left: number; top: number; width: number; height: number };
   targets: PatchTarget[];
-  rebases: Array<{ target: PatchTarget; left: number; top: number }>;
+  rebases: Array<{ target: PatchTarget; left: number; top: number; track?: number }>;
+}
+
+// The member's current resolved track (authored, or the runtime's positional-
+// index fallback). Threaded through so the server can stamp it explicitly —
+// same hazard and fix as the razor split.
+function resolveAuthoredTrack(
+  selection: ElementMatchSelection,
+  timelineElements: TimelineElement[],
+): number | undefined {
+  const id = findMatchingTimelineElementId(selection, timelineElements);
+  if (!id) return undefined;
+  const match = timelineElements.find((el) => (el.key ?? el.id) === id);
+  if (!match) return undefined;
+  return resolveElementTrack(match);
 }
 
 // Wrapper sits at the members' bounding box top-left; each member is rebased so
@@ -32,13 +57,17 @@ interface GroupGeometry {
 // composition space (transforms excluded), exactly the space the rebase formula
 // `left_new = left_old - W.left` operates in — GSAP x/y and offset vars are
 // transform deltas and stay correct without adjustment.
-function computeGroupGeometry(members: DomEditSelection[]): GroupGeometry {
+export function computeGroupGeometry(
+  members: DomEditSelection[],
+  timelineElements: TimelineElement[],
+): GroupGeometry {
   const boxes = members.map((m) => ({
     target: buildDomEditPatchTarget(m),
     left: m.element.offsetLeft,
     top: m.element.offsetTop,
     right: m.element.offsetLeft + m.element.offsetWidth,
     bottom: m.element.offsetTop + m.element.offsetHeight,
+    track: resolveAuthoredTrack(m, timelineElements),
   }));
   const left = Math.min(...boxes.map((b) => b.left));
   const top = Math.min(...boxes.map((b) => b.top));
@@ -47,10 +76,37 @@ function computeGroupGeometry(members: DomEditSelection[]): GroupGeometry {
   return {
     bbox: { left, top, width, height },
     targets: boxes.map((b) => b.target),
-    rebases: boxes.map((b) => ({ target: b.target, left: b.left - left, top: b.top - top })),
+    rebases: boxes.map((b) => ({
+      target: b.target,
+      left: b.left - left,
+      top: b.top - top,
+      track: b.track,
+    })),
   };
 }
 
+// Ungroup re-derives each child's track from the raw DOM (no DomEditSelection
+// exists per child); matches by id, falling back to hfId for a child with no
+// authored id. A child with neither keeps its current track, unstamped.
+export function resolveGroupChildTracks(
+  group: DomEditSelection,
+  timelineElements: TimelineElement[],
+): Array<{ target: PatchTarget; track?: number }> {
+  const sourceFile = group.sourceFile || "index.html";
+  const result: Array<{ target: PatchTarget; track?: number }> = [];
+  for (const child of Array.from(group.element.children)) {
+    const id = (child as HTMLElement).id || undefined;
+    const hfId = readHfId(child);
+    if (!id && !hfId) continue;
+    const track = resolveAuthoredTrack(
+      { id, hfId, sourceFile, isCompositionHost: false },
+      timelineElements,
+    );
+    result.push({ target: buildDomEditPatchTarget({ id, hfId }), track });
+  }
+  return result;
+}
+
 // Shared read → mutate-route → save-with-history → reload pipeline for both
 // wrap (group) and unwrap (ungroup). Mirrors the structural-mutation pattern in
 // useElementLifecycleOps (delete). Returns the route's JSON, or throws.
@@ -103,7 +159,7 @@ async function commitStructuralMutation(
 }
 
 export function useGroupCommits(params: UseGroupCommitsParams) {
-  const { activeCompPath, showToast, projectIdRef } = params;
+  const { activeCompPath, showToast, projectIdRef, timelineElements } = params;
 
   const groupSelection = useCallback(
     async (members: DomEditSelection[]): Promise<string | null> => {
@@ -121,7 +177,7 @@ export function useGroupCommits(params: UseGroupCommitsParams) {
       // Auto-name "Group N" by the count of existing groups in the document.
       const doc = members[0].element.ownerDocument;
       const groupId = `Group ${doc.querySelectorAll("[data-hf-group]").length + 1}`;
-      const { bbox, targets, rebases } = computeGroupGeometry(members);
+      const { bbox, targets, rebases } = computeGroupGeometry(members, timelineElements);
 
       try {
         const data = await commitStructuralMutation(
@@ -138,7 +194,7 @@ export function useGroupCommits(params: UseGroupCommitsParams) {
         return null;
       }
     },
-    [activeCompPath, projectIdRef, showToast, params],
+    [activeCompPath, projectIdRef, showToast, params, timelineElements],
   );
 
   const ungroupSelection = useCallback(
@@ -146,13 +202,14 @@ export function useGroupCommits(params: UseGroupCommitsParams) {
       const pid = projectIdRef.current;
       if (!pid) return;
       const targetPath = group.sourceFile || activeCompPath || "index.html";
+      const childTracks = resolveGroupChildTracks(group, timelineElements);
 
       try {
         await commitStructuralMutation(
           pid,
           targetPath,
           "unwrap-elements",
-          { target: buildDomEditPatchTarget(group) },
+          { target: buildDomEditPatchTarget(group), childTracks },
           "Ungroup elements",
           params,
         );
@@ -160,7 +217,7 @@ export function useGroupCommits(params: UseGroupCommitsParams) {
         showToast(error instanceof Error ? error.message : "Failed to ungroup elements", "error");
       }
     },
-    [activeCompPath, projectIdRef, showToast, params],
+    [activeCompPath, projectIdRef, showToast, params, timelineElements],
   );
 
   return { groupSelection, ungroupSelection };

package/src/hooks/useResetSelectionOnProjectSwitch.test.tsx

@@ -0,0 +1,234 @@
+// @vitest-environment happy-dom
+
+import { act, useMemo, useRef, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useResetSelectionOnProjectSwitch } from "./useResetSelectionOnProjectSwitch";
+import { useAutoOpenRootComposition } from "./useAutoOpenRootComposition";
+import { useActiveComposition } from "./useActiveComposition";
+import { useFileTree } from "./useFileTree";
+import {
+  isHydratedFromUrlState,
+  readStudioUrlStateFromWindow,
+  resolveMasterCompositionPath,
+} from "../utils/studioUrlState";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+  if (root) act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+  window.location.hash = "";
+});
+
+describe("useResetSelectionOnProjectSwitch", () => {
+  function ResetHarness({ projectId }: { projectId: string | null }) {
+    const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
+    const [activeCompPath, setActiveCompPath] = useState<string | null>("stale-comp.html");
+    const [activeCompPathHydrated, setActiveCompPathHydrated] = useState(true);
+    useResetSelectionOnProjectSwitch({
+      projectId,
+      initialUrlStateRef,
+      setActiveCompPath,
+      setActiveCompPathHydrated,
+    });
+    return (
+      <div
+        data-active-comp-path={activeCompPath ?? ""}
+        data-hydrated={String(activeCompPathHydrated)}
+      />
+    );
+  }
+
+  it("does not reset on the initial resolution from null", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    act(() => {
+      root?.render(<ResetHarness projectId={null} />);
+    });
+    act(() => {
+      root?.render(<ResetHarness projectId="project-a" />);
+    });
+    const el = host.firstElementChild as HTMLElement;
+    expect(el.dataset.activeCompPath).toBe("stale-comp.html");
+  });
+
+  it("resets activeCompPath and re-derives hydrated on an actual project switch", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    act(() => {
+      root?.render(<ResetHarness projectId="project-a" />);
+    });
+    act(() => {
+      root?.render(<ResetHarness projectId="project-b" />);
+    });
+    const el = host.firstElementChild as HTMLElement;
+    expect(el.dataset.activeCompPath).toBe("");
+    expect(el.dataset.hydrated).toBe("true");
+  });
+});
+
+describe("project switch integration (mirrors App.tsx's wiring)", () => {
+  function AppLikeHarness({
+    projectId,
+    masterCompPath,
+    onSelectComposition,
+  }: {
+    projectId: string | null;
+    masterCompPath: string | null;
+    onSelectComposition: (comp: string) => void;
+  }) {
+    const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
+    const [activeCompPath, setActiveCompPath] = useState<string | null>(null);
+    const [activeCompPathHydrated, setActiveCompPathHydrated] = useState(() =>
+      isHydratedFromUrlState(initialUrlStateRef.current),
+    );
+    // Mirrors handleSelectComposition (useCompositionContentLoader): selecting a composition
+    // also updates activeCompPath, which is exactly the state that must be reset on switch.
+    const handleSelect = (comp: string) => {
+      setActiveCompPath(comp);
+      onSelectComposition(comp);
+    };
+    // Mirrors useActiveComposition's wiring: reset as a sibling call, before auto-open.
+    useResetSelectionOnProjectSwitch({
+      projectId,
+      initialUrlStateRef,
+      setActiveCompPath,
+      setActiveCompPathHydrated,
+    });
+    useAutoOpenRootComposition({
+      projectId,
+      activeCompPath,
+      activeCompPathHydrated,
+      masterCompPath,
+      onSelectComposition: handleSelect,
+    });
+    return null;
+  }
+
+  it("opens the new project's root after switching projects with a composition already open", () => {
+    const onSelectComposition = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    // Project A resolves and auto-opens its root, which also sets activeCompPath — the
+    // "something already open" state a real user would be in before switching projects.
+    act(() => {
+      root?.render(
+        <AppLikeHarness
+          projectId="project-a"
+          masterCompPath="index.html"
+          onSelectComposition={onSelectComposition}
+        />,
+      );
+    });
+    expect(onSelectComposition).toHaveBeenCalledExactlyOnceWith("index.html");
+    onSelectComposition.mockClear();
+
+    // Switch to project B in-session (hash change, no remount) — this is the exact scenario
+    // the adversarial review found broken: activeCompPath was never reset, so project B's
+    // auto-open silently no-op'd because activeCompPath still read as "already set".
+    act(() => {
+      root?.render(
+        <AppLikeHarness
+          projectId="project-b"
+          masterCompPath="hero.html"
+          onSelectComposition={onSelectComposition}
+        />,
+      );
+    });
+
+    expect(onSelectComposition).toHaveBeenCalledExactlyOnceWith("hero.html");
+  });
+});
+
+describe("full stack: useFileTree -> useActiveComposition (masterCompPath staleness)", () => {
+  const PROJECT_DATA: Record<string, { files: string[]; compositions: string[] }> = {
+    "project-a": { files: ["index.html"], compositions: ["index.html"] },
+    "project-b": { files: ["hero.html"], compositions: ["hero.html"] },
+    // A preset/vendor .html can be in `files` without being a real composition —
+    // this is the exact shape a review found auto-open mis-targeting.
+    "project-c": { files: ["preset.html", "hero.html"], compositions: ["hero.html"] },
+  };
+
+  function mockFetch(url: string): Promise<Response> {
+    const match = /^\/api\/projects\/([^/]+)$/.exec(url);
+    if (match) {
+      const data = PROJECT_DATA[decodeURIComponent(match[1])] ?? { files: [], compositions: [] };
+      return Promise.resolve(new Response(JSON.stringify(data), { status: 200 }));
+    }
+    return Promise.resolve(new Response(null, { status: 404 }));
+  }
+
+  function FullStackHarness({ projectId }: { projectId: string | null }) {
+    const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
+    const projectIdRef = useRef(projectId);
+    projectIdRef.current = projectId;
+    const { fileTree, fileTreeLoaded, compositions } = useFileTree({ projectId, projectIdRef });
+    const masterCompPath = useMemo(
+      () => resolveMasterCompositionPath(compositions),
+      [compositions],
+    );
+    const { activeCompPath } = useActiveComposition({
+      projectId,
+      initialUrlStateRef,
+      fileTree,
+      fileTreeLoaded,
+      masterCompPath,
+      setEditingFile: vi.fn(),
+      showToast: vi.fn(),
+    });
+    return <div data-active-comp-path={activeCompPath ?? ""} />;
+  }
+
+  it("opens project B's real root, not project A's stale master path, on an in-session switch", async () => {
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(mockFetch as typeof fetch);
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () => {
+      root?.render(<FullStackHarness projectId="project-a" />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    let el = host.firstElementChild as HTMLElement;
+    expect(el.dataset.activeCompPath).toBe("index.html");
+
+    // Switch in-session (no remount) before asserting — this is the exact race the
+    // adversarial review found: project A's fileTree/masterCompPath are still in state
+    // for at least one render after projectId flips, until B's own fetch resolves.
+    await act(async () => {
+      root?.render(<FullStackHarness projectId="project-b" />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    el = host.firstElementChild as HTMLElement;
+    expect(el.dataset.activeCompPath).toBe("hero.html");
+
+    fetchSpy.mockRestore();
+  });
+
+  it("auto-opens the real composition, not a non-composition .html earlier in the file list", async () => {
+    const fetchSpy = vi.spyOn(globalThis, "fetch").mockImplementation(mockFetch as typeof fetch);
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+
+    await act(async () => {
+      root?.render(<FullStackHarness projectId="project-c" />);
+      await Promise.resolve();
+      await Promise.resolve();
+    });
+    const el = host.firstElementChild as HTMLElement;
+    expect(el.dataset.activeCompPath).toBe("hero.html");
+
+    fetchSpy.mockRestore();
+  });
+});

package/src/hooks/useResetSelectionOnProjectSwitch.ts

@@ -0,0 +1,34 @@
+import { useRef, type Dispatch, type MutableRefObject, type SetStateAction } from "react";
+import {
+  isHydratedFromUrlState,
+  readStudioUrlStateFromWindow,
+  type StudioUrlState,
+} from "../utils/studioUrlState";
+
+/**
+ * Resets selection when `projectId` switches in-session. Runs during render, not an
+ * effect, so the caller never sees a stale activeCompPath in the same commit.
+ */
+export function useResetSelectionOnProjectSwitch({
+  projectId,
+  initialUrlStateRef,
+  setActiveCompPath,
+  setActiveCompPathHydrated,
+}: {
+  projectId: string | null;
+  initialUrlStateRef: MutableRefObject<StudioUrlState>;
+  setActiveCompPath: Dispatch<SetStateAction<string | null>>;
+  setActiveCompPathHydrated: Dispatch<SetStateAction<boolean>>;
+}): void {
+  const previousProjectIdRef = useRef(projectId);
+
+  if (previousProjectIdRef.current !== projectId) {
+    const isSwitch = previousProjectIdRef.current !== null;
+    previousProjectIdRef.current = projectId;
+    if (isSwitch) {
+      initialUrlStateRef.current = readStudioUrlStateFromWindow();
+      setActiveCompPath(null);
+      setActiveCompPathHydrated(isHydratedFromUrlState(initialUrlStateRef.current));
+    }
+  }
+}

package/src/hooks/useTimelineAssetDropOps.test.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useTimelineAssetDropOps } from "./useTimelineAssetDropOps";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { usePlayerStore } from "../player/store/playerStore";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+  usePlayerStore.getState().reset();
+});
+
+type DropFn = ReturnType<typeof useTimelineAssetDropOps>["handleTimelineAssetDrop"];
+
+function renderDropHook(
+  sourceContent: string,
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>,
+) {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn().mockResolvedValue({ ok: true, json: async () => ({ content: sourceContent }) }),
+  );
+  let drop: DropFn | null = null;
+  function Harness() {
+    const { handleTimelineAssetDrop } = useTimelineAssetDropOps({
+      projectIdRef: { current: "project" },
+      activeCompPath: "index.html",
+      timelineElements: [],
+      showToast: vi.fn(),
+      writeProjectFile,
+      recordEdit: vi.fn().mockResolvedValue(undefined),
+      reloadPreview: vi.fn(),
+      uploadProjectFiles: vi.fn().mockResolvedValue([]),
+    });
+    drop = handleTimelineAssetDrop;
+    return null;
+  }
+  mountReactHarness(<Harness />);
+  return () => drop!;
+}
+
+describe("useTimelineAssetDropOps handleTimelineAssetDrop", () => {
+  it("grows the root duration when the drop lands past the current end", async () => {
+    const source =
+      '<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080"></main>';
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(source, writeProjectFile);
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 8, track: 0 }, 5);
+    });
+
+    const [, written] = writeProjectFile.mock.calls[0] as [string, string];
+    expect(written).toContain('data-duration="13"');
+  });
+
+  it("leaves the root duration alone when the drop lands inside the current end", async () => {
+    const source =
+      '<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080"></main>';
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(source, writeProjectFile);
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 1, track: 0 }, 2);
+    });
+
+    const [, written] = writeProjectFile.mock.calls[0] as [string, string];
+    expect(written).toContain('data-duration="10"');
+  });
+
+  it("selects and reveals the newly dropped clip", async () => {
+    const source =
+      '<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080"></main>';
+    const writeProjectFile = vi.fn().mockResolvedValue(undefined);
+    const getDrop = renderDropHook(source, writeProjectFile);
+
+    await act(async () => {
+      await getDrop()("clip.mp4", { start: 1, track: 0 }, 2);
+    });
+
+    expect(usePlayerStore.getState().selectedElementId).toBe("index.html#clip");
+  });
+});

package/src/hooks/useTimelineAssetDropOps.ts

@@ -20,7 +20,9 @@ import { collectHtmlIds, resolveDroppedAssetDuration } from "../utils/studioHelp
 import { formatTimelineAttributeNumber } from "./timelineEditingHelpers";
 import { readFileContent } from "./timelineTimingSync";
 import { commitTimelineCompositionInsertion } from "../utils/timelineCompositionInsert";
-import { usePlayerStore } from "../player";
+import { extendRootDurationInSource } from "../utils/rootDuration";
+import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
+import { selectAndRevealTimelineElement } from "../player/components/timelineDropReveal";
 
 interface UseTimelineAssetDropOpsOptions {
   projectIdRef: MutableRefObject<string | null>;
@@ -89,22 +91,25 @@ export function useTimelineAssetDropOps({
         );
         const newElementZIndex = Math.max(1, relevantElements.length + 1);
 
-        const patchedContent = insertTimelineAssetIntoSource(
-          originalContent,
-          buildTimelineAssetInsertHtml({
-            id: newId,
-            hfId: `hf-${generateId()}`,
-            assetPath: resolvedAssetSrc,
-            kind,
-            start: normalizedStart,
-            duration: normalizedDuration,
-            track: placement.track,
-            zIndex: newElementZIndex,
-            geometry: fitTimelineAssetGeometry(
-              null,
-              resolveTimelineAssetCompositionSize(originalContent),
-            ),
-          }),
+        const patchedContent = extendRootDurationInSource(
+          insertTimelineAssetIntoSource(
+            originalContent,
+            buildTimelineAssetInsertHtml({
+              id: newId,
+              hfId: `hf-${generateId()}`,
+              assetPath: resolvedAssetSrc,
+              kind,
+              start: normalizedStart,
+              duration: normalizedDuration,
+              track: placement.track,
+              zIndex: newElementZIndex,
+              geometry: fitTimelineAssetGeometry(
+                null,
+                resolveTimelineAssetCompositionSize(originalContent),
+              ),
+            }),
+          ),
+          normalizedStart + normalizedDuration,
         );
 
         await saveProjectFilesWithHistory({
@@ -117,6 +122,7 @@ export function useTimelineAssetDropOps({
           recordEdit,
         });
 
+        selectAndRevealTimelineElement(deriveTimelineStoreKeyForDomId(newId, targetPath));
         forceReloadSdkSession?.();
         reloadPreview();
       } catch (error) {
@@ -190,7 +196,7 @@ export function useTimelineAssetDropOps({
           writeFile: writeProjectFile,
           recordEdit,
           observeVersion: observeProjectFileVersion,
-          selectHost: (key) => usePlayerStore.getState().setSelectedElementId(key),
+          selectHost: selectAndRevealTimelineElement,
           resync: forceReloadSdkSession,
           refresh: reloadPreview,
         });