@hyperframes/studio 0.7.102 → 0.7.104

package/src/hooks/useDomEditCommits.ts

@@ -33,6 +33,7 @@ import {
   readErrorResponseBody,
 } from "./useDomEditCommitsHelpers";
 import { cutoverCommittedOrThrow, type CutoverResult } from "../utils/sdkCutover";
+import { studioWriteHeaders } from "../utils/studioFileVersion";
 interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
@@ -201,7 +202,7 @@ export function useDomEditCommits({
         `/api/projects/${pid}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
         {
           method: "POST",
-          headers: { "Content-Type": "application/json" },
+          headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
           body: JSON.stringify(patchBody),
         },
       );

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -1,6 +1,7 @@
 import { StudioSaveHttpError, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
 import type { DomEditPatchBatch } from "./domEditCommitTypes";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
+import { studioWriteHeaders } from "../utils/studioFileVersion";
 
 export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
@@ -99,7 +100,7 @@ export async function patchElementBatches(projectId: string, batches: DomEditPat
       `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
       {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
         body,
       },
     );

package/src/hooks/useDomEditPreviewSync.ts

@@ -8,13 +8,17 @@ import { findElementForSelection, type DomEditSelection } from "../components/ed
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 import type { SidebarTab } from "../components/sidebar/LeftSidebar";
 import type { PatchTarget } from "../utils/sourcePatcher";
+import { logSelect } from "../utils/selectDebug";
 
 interface UseDomEditPreviewSyncParams {
   previewIframe: HTMLIFrameElement | null;
   activeCompPath: string | null;
   captionEditMode: boolean;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
+  domEditGroupSelectionsRef: React.MutableRefObject<DomEditSelection[]>;
   domEditSelection: DomEditSelection | null;
+  /** Re-resolves a whole multi-selection against the current preview document. */
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
   applyDomSelection: (
     selection: DomEditSelection | null,
     options?: { revealPanel?: boolean; preserveGroup?: boolean },
@@ -35,8 +39,10 @@ export function useDomEditPreviewSync({
   activeCompPath,
   captionEditMode,
   domEditSelectionRef,
+  domEditGroupSelectionsRef,
   domEditSelection,
   applyDomSelection,
+  refreshDomEditGroupSelectionsFromPreview,
   buildDomSelectionFromTarget,
   refreshPreviewDocumentVersion,
   syncPreviewHistoryHotkey,
@@ -72,6 +78,21 @@ export function useDomEditPreviewSync({
         // Clear so overlay geometry isn't computed on a stale, detached node.
         // (Drag-release-in-gray-zone is handled separately by
         // suppressNextBoxClickRef; the dragged element still resolves here.)
+        //
+        // One lost member is not the whole selection though. A multi-select that
+        // loses its primary here used to be wiped entirely, so moving a group and
+        // having any one of its elements fail to re-resolve deselected all of
+        // them. Re-resolve the group instead and keep whoever survived; it only
+        // clears when nobody did.
+        const group = domEditGroupSelectionsRef.current;
+        logSelect("preview-sync-lost", {
+          target: currentSelection.selector ?? currentSelection.id ?? null,
+          group: group.length,
+        });
+        if (group.length > 1) {
+          await refreshDomEditGroupSelectionsFromPreview(group);
+          return;
+        }
         applyDomSelection(null, { revealPanel: false });
         return;
       }
@@ -103,8 +124,10 @@ export function useDomEditPreviewSync({
     applyDomSelection,
     buildDomSelectionFromTarget,
     captionEditMode,
+    domEditGroupSelectionsRef,
     domEditSelectionRef,
     previewIframe,
+    refreshDomEditGroupSelectionsFromPreview,
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,
     applyStudioManualEditsToPreviewRef,

package/src/hooks/useDomEditSession.test.tsx

@@ -60,6 +60,46 @@ const capturedOnReorderShadow: { fn: ((targets: string[]) => void) | undefined }
 const domEditSelectionRef: { current: DomEditSelection | null } = { current: null };
 const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
 
+function createSessionParams(
+  overrides: Partial<UseDomEditSessionParams> = {},
+): UseDomEditSessionParams {
+  return {
+    projectId: "proj-1",
+    activeCompPath: "index.html",
+    compIdToSrc: new Map(),
+    captionEditMode: false,
+    compositionLoading: false,
+    previewIframeRef: { current: null },
+    timelineElements: [],
+    getTimelineSelectionSet: () => new Set(),
+    setSelectedTimelineElementId: vi.fn(),
+    setTimelineSelectionSet: vi.fn(),
+    setRightCollapsed: vi.fn(),
+    setRightPanelTab: vi.fn(),
+    showToast: vi.fn(),
+    refreshPreviewDocumentVersion: vi.fn(),
+    queueDomEditSave: async <T,>(save: () => Promise<T>) => save(),
+    readProjectFile: async () => "",
+    writeProjectFile: async () => {},
+    updateEditingFileContent: vi.fn(),
+    domEditSaveTimestampRef: { current: 0 },
+    editHistory: { recordEdit: async () => {} },
+    fileTree: [],
+    importedFontAssetsRef: { current: [] },
+    projectDir: null,
+    projectIdRef: { current: "proj-1" },
+    previewIframe: null,
+    refreshKey: 0,
+    previewDocumentVersion: 0,
+    rightPanelTab: "design",
+    applyStudioManualEditsToPreviewRef: { current: async () => {} },
+    syncPreviewHistoryHotkey: vi.fn(),
+    reloadPreview: vi.fn(),
+    setRefreshKey: vi.fn(),
+    ...overrides,
+  };
+}
+
 vi.mock("../utils/sdkResolverShadow", () => ({
   runResolverShadow: vi.fn(),
   recordResolverParity: (...args: unknown[]) => recordResolverParity(...args),
@@ -220,43 +260,16 @@ describe("onReorderShadow source filter", () => {
     const sdkSession = {} as unknown as Composition;
 
     function Probe() {
-      const params: UseDomEditSessionParams = {
-        projectId: "proj-1",
-        activeCompPath: "index.html",
-        isMasterView: false,
-        compIdToSrc: new Map(),
-        captionEditMode: false,
-        compositionLoading: false,
-        previewIframeRef: { current: null },
-        timelineElements: [],
-        setSelectedTimelineElementId: vi.fn(),
-        setRightCollapsed: vi.fn(),
-        setRightPanelTab: vi.fn(),
-        showToast: vi.fn(),
-        refreshPreviewDocumentVersion: vi.fn(),
+      const params = createSessionParams({
         queueDomEditSave: vi.fn(async <T,>(save: () => Promise<T>) => save()) as <T>(
           save: () => Promise<T>,
         ) => Promise<T>,
         readProjectFile,
         writeProjectFile: vi.fn(async () => {}),
-        updateEditingFileContent: vi.fn(),
-        domEditSaveTimestampRef: { current: 0 },
         editHistory: { recordEdit: vi.fn(async () => {}) },
-        fileTree: [],
-        importedFontAssetsRef: { current: [] },
-        projectDir: null,
-        projectIdRef: { current: "proj-1" },
-        previewIframe: null,
-        refreshKey: 0,
-        previewDocumentVersion: 0,
-        rightPanelTab: "design",
-        applyStudioManualEditsToPreviewRef: { current: async () => {} },
-        syncPreviewHistoryHotkey: vi.fn(),
-        reloadPreview: vi.fn(),
-        setRefreshKey: vi.fn(),
         sdkSession,
         forceReloadSdkSession: vi.fn(),
-      };
+      });
       useDomEditSession(params);
       return null;
     }
@@ -318,39 +331,7 @@ describe("bulk segment ease commits", () => {
       | undefined;
 
     function Probe() {
-      const params: UseDomEditSessionParams = {
-        projectId: "proj-1",
-        activeCompPath: "index.html",
-        isMasterView: false,
-        compIdToSrc: new Map(),
-        captionEditMode: false,
-        compositionLoading: false,
-        previewIframeRef: { current: null },
-        timelineElements: [],
-        setSelectedTimelineElementId: vi.fn(),
-        setRightCollapsed: vi.fn(),
-        setRightPanelTab: vi.fn(),
-        showToast: vi.fn(),
-        refreshPreviewDocumentVersion: vi.fn(),
-        queueDomEditSave: async <T,>(save: () => Promise<T>) => save(),
-        readProjectFile: async () => "",
-        writeProjectFile: async () => {},
-        updateEditingFileContent: vi.fn(),
-        domEditSaveTimestampRef: { current: 0 },
-        editHistory: { recordEdit: async () => {} },
-        fileTree: [],
-        importedFontAssetsRef: { current: [] },
-        projectDir: null,
-        projectIdRef: { current: "proj-1" },
-        previewIframe: null,
-        refreshKey: 0,
-        previewDocumentVersion: 0,
-        rightPanelTab: "design",
-        applyStudioManualEditsToPreviewRef: { current: async () => {} },
-        syncPreviewHistoryHotkey: vi.fn(),
-        reloadPreview: vi.fn(),
-        setRefreshKey: vi.fn(),
-      };
+      const params = createSessionParams();
       updateSegmentEase = useDomEditSession(params).handleUpdateSegmentEase;
       return null;
     }

package/src/hooks/useDomEditSession.ts

@@ -31,13 +31,14 @@ interface RecordEditInput {
 export interface UseDomEditSessionParams {
   projectId: string | null;
   activeCompPath: string | null;
-  isMasterView: boolean;
   compIdToSrc: Map<string, string>;
   captionEditMode: boolean;
   compositionLoading: boolean;
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
   timelineElements: TimelineElement[];
+  getTimelineSelectionSet: () => ReadonlySet<string>;
   setSelectedTimelineElementId: (id: string | null, options?: SelectElementOptions) => void;
+  setTimelineSelectionSet: (ids: Set<string>) => void;
   setRightCollapsed: (collapsed: boolean) => void;
   setRightPanelTab: (tab: RightPanelTab) => void;
   showToast: (message: string, tone?: "error" | "info") => void;
@@ -73,13 +74,14 @@ export interface UseDomEditSessionParams {
 export function useDomEditSession({
   projectId,
   activeCompPath,
-  isMasterView,
   compIdToSrc,
   captionEditMode,
   compositionLoading,
   previewIframeRef,
   timelineElements,
+  getTimelineSelectionSet,
   setSelectedTimelineElementId,
+  setTimelineSelectionSet,
   setRightCollapsed,
   setRightPanelTab,
   showToast,
@@ -109,6 +111,7 @@ export function useDomEditSession({
   publishSdkSession,
   forceReloadSdkSession,
 }: UseDomEditSessionParams) {
+  const isMasterView = !activeCompPath || activeCompPath === "index.html";
   void _setRefreshKey;
   const {
     domEditSelection,
@@ -127,6 +130,7 @@ export function useDomEditSession({
     buildDomSelectionForTimelineElement,
     handleTimelineElementSelect,
     refreshDomEditSelectionFromPreview,
+    refreshDomEditGroupSelectionsFromPreview,
     applyMarqueeSelection,
   } = useDomSelection({
     projectId,
@@ -136,7 +140,9 @@ export function useDomEditSession({
     captionEditMode,
     previewIframeRef,
     timelineElements,
+    getTimelineSelectionSet,
     setSelectedTimelineElementId,
+    setTimelineSelectionSet,
     setRightCollapsed,
     setRightPanelTab,
     previewIframe,
@@ -382,6 +388,8 @@ export function useDomEditSession({
     activeCompPath,
     domEditSelection,
     domEditSelectionRef,
+    domEditGroupSelectionsRef,
+    refreshDomEditGroupSelectionsFromPreview,
     previewIframeRef,
     previewIframe,
     captionEditMode,

package/src/hooks/useDomEditWiring.ts

@@ -23,6 +23,8 @@ export interface UseDomEditWiringParams {
   activeCompPath: string | null;
   domEditSelection: DomEditSelection | null;
   domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
+  domEditGroupSelectionsRef: React.MutableRefObject<DomEditSelection[]>;
+  refreshDomEditGroupSelectionsFromPreview: (selections: DomEditSelection[]) => Promise<void>;
   previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
   previewIframe: HTMLIFrameElement | null;
   captionEditMode: boolean;
@@ -115,6 +117,8 @@ export function useDomEditWiring({
   activeCompPath,
   domEditSelection,
   domEditSelectionRef,
+  domEditGroupSelectionsRef,
+  refreshDomEditGroupSelectionsFromPreview,
   previewIframeRef,
   previewIframe,
   captionEditMode,
@@ -254,8 +258,10 @@ export function useDomEditWiring({
     activeCompPath,
     captionEditMode,
     domEditSelectionRef,
+    domEditGroupSelectionsRef,
     domEditSelection,
     applyDomSelection,
+    refreshDomEditGroupSelectionsFromPreview,
     buildDomSelectionFromTarget,
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,

package/src/hooks/useDomSelection.test.ts

@@ -5,6 +5,7 @@ import { createRoot } from "react-dom/client";
 import { describe, expect, it, vi } from "vitest";
 import { installReactActEnvironment, makeSelection } from "./domSelectionTestHarness";
 import { useDomSelection } from "./useDomSelection";
+import type { TimelineElement } from "../player";
 
 installReactActEnvironment();
 
@@ -14,11 +15,24 @@ interface HarnessProps {
   refreshKey: number;
 }
 
-function renderHarness(initialProps: HarnessProps): {
+interface TimelineSpies {
+  setSelectedTimelineElementId: ReturnType<typeof vi.fn>;
+  setTimelineSelectionSet: ReturnType<typeof vi.fn>;
+}
+
+function renderHarness(
+  initialProps: HarnessProps,
+  options: { timelineElements?: TimelineElement[] } = {},
+): {
   current: () => ReturnType<typeof useDomSelection>;
   rerender: (props: HarnessProps) => void;
   cleanup: () => void;
+  timeline: TimelineSpies;
 } {
+  const timeline: TimelineSpies = {
+    setSelectedTimelineElementId: vi.fn(),
+    setTimelineSelectionSet: vi.fn(),
+  };
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
@@ -32,8 +46,10 @@ function renderHarness(initialProps: HarnessProps): {
       compIdToSrc: new Map(),
       captionEditMode: false,
       previewIframeRef: { current: null },
-      timelineElements: [],
-      setSelectedTimelineElementId: vi.fn(),
+      timelineElements: options.timelineElements ?? [],
+      getTimelineSelectionSet: () => new Set(),
+      setSelectedTimelineElementId: timeline.setSelectedTimelineElementId,
+      setTimelineSelectionSet: timeline.setTimelineSelectionSet,
       setRightCollapsed: vi.fn(),
       setRightPanelTab: vi.fn(),
       previewIframe: null,
@@ -61,6 +77,7 @@ function renderHarness(initialProps: HarnessProps): {
       act(() => root.unmount());
       host.remove();
     },
+    timeline,
   };
 }
 
@@ -77,6 +94,119 @@ function setupSelectedHarness() {
   return { selection, harness };
 }
 
+function timelineElement(domId: string): TimelineElement {
+  return {
+    id: domId,
+    key: domId,
+    domId,
+    tag: "div",
+    start: 0,
+    duration: 1,
+    track: 0,
+    sourceFile: "index.html",
+  } as TimelineElement;
+}
+
+/**
+ * A marquee builds the group correctly and then used to lose it: it announced only
+ * the primary to the timeline, the timeline is the source of truth for what is
+ * selected, and the sync back to the canvas replaced the group with that one
+ * element a moment after the drop. The whole set has to be announced, with the
+ * primary as its anchor rather than as a new single selection.
+ */
+describe("useDomSelection marquee", () => {
+  it("announces every marquee'd element to the timeline, anchored on the primary", () => {
+    const first = document.createElement("div");
+    first.id = "card";
+    const second = document.createElement("div");
+    second.id = "chip";
+    document.body.append(first, second);
+    const harness = renderHarness(
+      { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
+      { timelineElements: [timelineElement("card"), timelineElement("chip")] },
+    );
+
+    act(() =>
+      harness
+        .current()
+        .applyMarqueeSelection(
+          [makeSelection("Card", first), makeSelection("Chip", second)],
+          false,
+        ),
+    );
+
+    expect(harness.current().domEditGroupSelections).toHaveLength(2);
+    expect(harness.timeline.setTimelineSelectionSet).toHaveBeenCalledWith(
+      new Set(["card", "chip"]),
+    );
+    expect(harness.timeline.setSelectedTimelineElementId).toHaveBeenCalledWith("card", {
+      preserveSet: true,
+    });
+    harness.cleanup();
+  });
+
+  it("uses a surviving group member as the timeline anchor when the canvas primary has no row", () => {
+    const canvasOnly = document.createElement("div");
+    canvasOnly.id = "canvas-only";
+    const card = document.createElement("div");
+    card.id = "card";
+    document.body.append(canvasOnly, card);
+    const harness = renderHarness(
+      { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
+      { timelineElements: [timelineElement("card")] },
+    );
+
+    act(() =>
+      harness
+        .current()
+        .applyMarqueeSelection(
+          [makeSelection("Canvas only", canvasOnly), makeSelection("Card", card)],
+          false,
+        ),
+    );
+
+    expect(harness.timeline.setTimelineSelectionSet).toHaveBeenCalledWith(new Set(["card"]));
+    expect(harness.timeline.setSelectedTimelineElementId).toHaveBeenCalledWith("card", {
+      preserveSet: true,
+    });
+    harness.cleanup();
+  });
+});
+
+/**
+ * Adding a second element announced only that element, with preserveSet — and
+ * preserving a set that does not contain the id empties it. An empty timeline
+ * selection syncs back as "nothing is selected", so growing a group could wipe
+ * it instead, and so could re-resolving one after a move.
+ */
+describe("useDomSelection additive", () => {
+  it("announces both members when a second element joins the selection", () => {
+    const first = document.createElement("div");
+    first.id = "card";
+    const second = document.createElement("div");
+    second.id = "chip";
+    document.body.append(first, second);
+    const harness = renderHarness(
+      { activeCompPath: "index.html", projectId: "project-1", refreshKey: 0 },
+      { timelineElements: [timelineElement("card"), timelineElement("chip")] },
+    );
+
+    act(() => harness.current().applyDomSelection(makeSelection("Card", first)));
+    act(() =>
+      harness.current().applyDomSelection(makeSelection("Chip", second), { additive: true }),
+    );
+
+    expect(harness.current().domEditGroupSelections).toHaveLength(2);
+    expect(harness.timeline.setTimelineSelectionSet).toHaveBeenLastCalledWith(
+      new Set(["card", "chip"]),
+    );
+    expect(harness.timeline.setSelectedTimelineElementId).toHaveBeenLastCalledWith("chip", {
+      preserveSet: true,
+    });
+    harness.cleanup();
+  });
+});
+
 describe("useDomSelection", () => {
   it("clears a committed selection when the active composition path changes", () => {
     const { selection, harness } = setupSelectedHarness();