@hyperframes/studio 0.7.58 → 0.7.60

package/src/hooks/useGsapSelectionHandlers.ts

@@ -3,7 +3,11 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 import { computeCurrentPercentage } from "./gsapDragCommit";
-import { trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
+import {
+  getStudioSaveErrorMessage,
+  isStudioSaveErrorAlreadyToasted,
+  trackStudioSaveFailure,
+} from "../utils/studioSaveDiagnostics";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import type { CommitMutationOptions } from "./gsapScriptCommitTypes";
 
@@ -34,6 +38,7 @@ export function useGsapSelectionHandlers({
   removeAllKeyframes,
   handleDomManualEditsReset,
   selectedGsapAnimations,
+  showToast,
 }: {
   domEditSelection: DomEditSelection | null;
   updateGsapProperty: (
@@ -46,24 +51,24 @@ export function useGsapSelectionHandlers({
     sel: DomEditSelection,
     animId: string,
     updates: { duration?: number; ease?: string; position?: number },
-  ) => void;
-  deleteGsapAnimation: (sel: DomEditSelection, animId: string) => void;
-  deleteAllForSelector: (sel: DomEditSelection, targetSelector: string) => void;
+  ) => Promise<void>;
+  deleteGsapAnimation: (sel: DomEditSelection, animId: string) => Promise<void>;
+  deleteAllForSelector: (sel: DomEditSelection, targetSelector: string) => Promise<void>;
   addGsapAnimation: (
     sel: DomEditSelection,
     method: "to" | "from" | "set" | "fromTo",
     time: number,
   ) => Promise<void>;
-  addGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
-  removeGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
+  addGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
+  removeGsapProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
   updateGsapFromProperty: (
     sel: DomEditSelection,
     animId: string,
     prop: string,
     value: number | string,
-  ) => void;
-  addGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
-  removeGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => void;
+  ) => Promise<void>;
+  addGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
+  removeGsapFromProperty: (sel: DomEditSelection, animId: string, prop: string) => Promise<void>;
   addKeyframe: (
     sel: DomEditSelection,
     animId: string,
@@ -104,10 +109,11 @@ export function useGsapSelectionHandlers({
     duration?: number,
     commitOverrides?: Partial<CommitMutationOptions>,
   ) => Promise<void>;
-  removeAllKeyframes: (sel: DomEditSelection, animId: string) => void;
+  removeAllKeyframes: (sel: DomEditSelection, animId: string) => Promise<void>;
 
   handleDomManualEditsReset: (sel: DomEditSelection) => void;
   selectedGsapAnimations: GsapAnimation[];
+  showToast: (message: string, tone?: "error" | "info") => void;
 }) {
   const lastSelectionRef = useRef<DomEditSelection | null>(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
@@ -124,8 +130,20 @@ export function useGsapSelectionHandlers({
         targetSelector: selection.selector,
         targetSourceFile: selection.sourceFile,
       });
+      if (!isStudioSaveErrorAlreadyToasted(error)) {
+        showToast(`Couldn't save animation: ${getStudioSaveErrorMessage(error)}`, "error");
+      }
+    },
+    [showToast],
+  );
+
+  const observeGsapMutation = useCallback(
+    (mutation: Promise<void>, selection: DomEditSelection, mutationType: string, label: string) => {
+      void mutation.catch((error) => {
+        trackGsapHandlerFailure(error, selection, mutationType, label);
+      });
     },
-    [],
+    [trackGsapHandlerFailure],
   );
 
   const handleGsapUpdateProperty = useCallback(
@@ -144,18 +162,23 @@ export function useGsapSelectionHandlers({
     ) => {
       const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
-      updateGsapMeta(sel, animId, updates);
+      observeGsapMutation(
+        updateGsapMeta(sel, animId, updates),
+        sel,
+        "update-meta",
+        "Edit GSAP animation",
+      );
     },
-    [domEditSelection, updateGsapMeta],
+    [domEditSelection, observeGsapMutation, updateGsapMeta],
   );
 
   const handleGsapDeleteAnimation = useCallback(
     (animId: string) => {
       const sel = domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
-      deleteGsapAnimation(sel, animId);
+      observeGsapMutation(deleteGsapAnimation(sel, animId), sel, "delete", "Delete GSAP animation");
     },
-    [domEditSelection, deleteGsapAnimation],
+    [domEditSelection, deleteGsapAnimation, observeGsapMutation],
   );
 
   const handleGsapDeleteAllForElement = useCallback(
@@ -163,9 +186,14 @@ export function useGsapSelectionHandlers({
       const sel = domEditSelection ?? lastSelectionRef.current;
       if (!sel) return;
       trackStudioEvent("keyframe", { action: "delete_all" });
-      deleteAllForSelector(sel, targetSelector);
+      observeGsapMutation(
+        deleteAllForSelector(sel, targetSelector),
+        sel,
+        "delete-all-for-selector",
+        "Delete all animations for element",
+      );
     },
-    [domEditSelection, deleteAllForSelector],
+    [domEditSelection, deleteAllForSelector, observeGsapMutation],
   );
 
   const handleGsapAddAnimation = useCallback(
@@ -186,41 +214,66 @@ export function useGsapSelectionHandlers({
   const handleGsapAddProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      addGsapProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        addGsapProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "add-property",
+        `Add GSAP ${prop}`,
+      );
     },
-    [domEditSelection, addGsapProperty],
+    [domEditSelection, addGsapProperty, observeGsapMutation],
   );
 
   const handleGsapRemoveProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      removeGsapProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        removeGsapProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "remove-property",
+        `Remove GSAP ${prop}`,
+      );
     },
-    [domEditSelection, removeGsapProperty],
+    [domEditSelection, observeGsapMutation, removeGsapProperty],
   );
 
   const handleGsapUpdateFromProperty = useCallback(
     (animId: string, prop: string, value: number | string) => {
       if (!domEditSelection) return;
-      updateGsapFromProperty(domEditSelection, animId, prop, value);
+      observeGsapMutation(
+        updateGsapFromProperty(domEditSelection, animId, prop, value),
+        domEditSelection,
+        "update-from-property",
+        `Edit GSAP from-${prop}`,
+      );
     },
-    [domEditSelection, updateGsapFromProperty],
+    [domEditSelection, observeGsapMutation, updateGsapFromProperty],
   );
 
   const handleGsapAddFromProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      addGsapFromProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        addGsapFromProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "add-from-property",
+        `Add GSAP from-${prop}`,
+      );
     },
-    [domEditSelection, addGsapFromProperty],
+    [domEditSelection, addGsapFromProperty, observeGsapMutation],
   );
 
   const handleGsapRemoveFromProperty = useCallback(
     (animId: string, prop: string) => {
       if (!domEditSelection) return;
-      removeGsapFromProperty(domEditSelection, animId, prop);
+      observeGsapMutation(
+        removeGsapFromProperty(domEditSelection, animId, prop),
+        domEditSelection,
+        "remove-from-property",
+        `Remove GSAP from-${prop}`,
+      );
     },
-    [domEditSelection, removeGsapFromProperty],
+    [domEditSelection, observeGsapMutation, removeGsapFromProperty],
   );
 
   const handleGsapAddKeyframe = useCallback(
@@ -354,18 +407,28 @@ export function useGsapSelectionHandlers({
   const handleGsapRemoveAllKeyframes = useCallback(
     (animId: string) => {
       if (!domEditSelection) return;
-      removeAllKeyframes(domEditSelection, animId);
+      observeGsapMutation(
+        removeAllKeyframes(domEditSelection, animId),
+        domEditSelection,
+        "remove-all-keyframes",
+        "Remove all keyframes",
+      );
     },
-    [domEditSelection, removeAllKeyframes],
+    [domEditSelection, observeGsapMutation, removeAllKeyframes],
   );
 
   const handleResetSelectedElementKeyframes = useCallback((): boolean => {
     if (!domEditSelection) return false;
     const withKeyframes = selectedGsapAnimations.find((a) => a.keyframes);
     if (!withKeyframes) return false;
-    removeAllKeyframes(domEditSelection, withKeyframes.id);
+    observeGsapMutation(
+      removeAllKeyframes(domEditSelection, withKeyframes.id),
+      domEditSelection,
+      "remove-all-keyframes",
+      "Remove all keyframes",
+    );
     return true;
-  }, [domEditSelection, selectedGsapAnimations, removeAllKeyframes]);
+  }, [domEditSelection, observeGsapMutation, removeAllKeyframes, selectedGsapAnimations]);
 
   return {
     handleGsapUpdateProperty,

package/src/hooks/useInspectorSplitResize.ts

@@ -0,0 +1,51 @@
+import { useCallback, useRef, useState, type PointerEvent as ReactPointerEvent } from "react";
+
+const MIN_INSPECTOR_SPLIT_PERCENT = 20;
+const MAX_INSPECTOR_SPLIT_PERCENT = 75;
+
+export function useInspectorSplitResize() {
+  const [layersPanePercent, setLayersPanePercent] = useState(40);
+  const splitContainerRef = useRef<HTMLDivElement>(null);
+  const splitDragRef = useRef<{
+    startY: number;
+    startPercent: number;
+    height: number;
+  } | null>(null);
+
+  const handleInspectorSplitResizeStart = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.preventDefault();
+      event.currentTarget.setPointerCapture(event.pointerId);
+      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
+      splitDragRef.current = {
+        startY: event.clientY,
+        startPercent: layersPanePercent,
+        height,
+      };
+    },
+    [layersPanePercent],
+  );
+
+  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const drag = splitDragRef.current;
+    if (!drag || drag.height <= 0) return;
+    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
+    const next = Math.min(
+      MAX_INSPECTOR_SPLIT_PERCENT,
+      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
+    );
+    setLayersPanePercent(next);
+  }, []);
+
+  const handleInspectorSplitResizeEnd = useCallback(() => {
+    splitDragRef.current = null;
+  }, []);
+
+  return {
+    layersPanePercent,
+    splitContainerRef,
+    handleInspectorSplitResizeStart,
+    handleInspectorSplitResizeMove,
+    handleInspectorSplitResizeEnd,
+  };
+}

package/src/hooks/usePanelLayout.test.ts

@@ -0,0 +1,118 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePanelLayout } from "./usePanelLayout";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  vi.doUnmock("../components/editor/manualEditingAvailability");
+  vi.resetModules();
+});
+
+function renderPanelLayoutWith(hook: typeof usePanelLayout) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  let current: ReturnType<typeof usePanelLayout> | null = null;
+
+  function Harness() {
+    current = hook();
+    return null;
+  }
+
+  act(() => {
+    root.render(React.createElement(Harness));
+  });
+
+  return {
+    getState: (): ReturnType<typeof usePanelLayout> => {
+      if (!current) throw new Error("usePanelLayout did not render");
+      return current;
+    },
+    unmount: () => act(() => root.unmount()),
+  };
+}
+
+function renderPanelLayout() {
+  return renderPanelLayoutWith(usePanelLayout);
+}
+
+describe("usePanelLayout — right inspector panes", () => {
+  it("toggleRightInspectorPane independently flips one pane, allowing both open at once", () => {
+    const harness = renderPanelLayout();
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    act(() => harness.getState().toggleRightInspectorPane("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: true });
+
+    harness.unmount();
+  });
+
+  it("toggleRightInspectorPane refuses to turn off the last remaining pane", () => {
+    const harness = renderPanelLayout();
+    act(() => harness.getState().toggleRightInspectorPane("design"));
+    // Only "design" was on; toggling it off would leave both false — guarded.
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+    harness.unmount();
+  });
+
+  it("setExclusiveRightInspectorPane is radio-style — selecting one turns the other off", () => {
+    const harness = renderPanelLayout();
+    act(() => harness.getState().toggleRightInspectorPane("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: true });
+
+    act(() => harness.getState().setExclusiveRightInspectorPane("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: false });
+
+    act(() => harness.getState().setExclusiveRightInspectorPane("design"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    harness.unmount();
+  });
+
+  it("setRightPanelTab additively opens a pane when the flat inspector is off (legacy behavior)", async () => {
+    vi.resetModules();
+    vi.doMock("../components/editor/manualEditingAvailability", async () => {
+      const actual = await vi.importActual<
+        typeof import("../components/editor/manualEditingAvailability")
+      >("../components/editor/manualEditingAvailability");
+      return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: false };
+    });
+    const { usePanelLayout: usePanelLayoutFlatOff } = await import("./usePanelLayout");
+    const harness = renderPanelLayoutWith(usePanelLayoutFlatOff);
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    act(() => harness.getState().setRightPanelTab("layers"));
+    // Legacy (split-view) behavior: additive, both panes end up open.
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: true });
+
+    harness.unmount();
+  });
+
+  it("setRightPanelTab is flat-aware: exclusivity holds for callers other than a direct in-panel tab click", async () => {
+    vi.resetModules();
+    vi.doMock("../components/editor/manualEditingAvailability", async () => {
+      const actual = await vi.importActual<
+        typeof import("../components/editor/manualEditingAvailability")
+      >("../components/editor/manualEditingAvailability");
+      return { ...actual, STUDIO_FLAT_INSPECTOR_ENABLED: true };
+    });
+    const { usePanelLayout: usePanelLayoutFlatOn } = await import("./usePanelLayout");
+    const harness = renderPanelLayoutWith(usePanelLayoutFlatOn);
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });
+
+    // Element-select / block-params-close / header Inspector-button callers
+    // all reach setRightPanelTab directly, not through the in-panel tab
+    // click's own setExclusiveRightInspectorPane call — this must still
+    // enforce exclusivity under the flat flag, or both tabs end up
+    // highlighted while only one pane actually renders.
+    act(() => harness.getState().setRightPanelTab("layers"));
+    expect(harness.getState().rightInspectorPanes).toEqual({ layers: true, design: false });
+
+    harness.unmount();
+  });
+});

package/src/hooks/usePanelLayout.ts

@@ -6,6 +6,7 @@ import type {
 } from "../utils/studioHelpers";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../utils/studioUiPreferences";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { STUDIO_FLAT_INSPECTOR_ENABLED } from "../components/editor/manualEditingAvailability";
 
 export interface InitialPanelLayoutState {
   rightCollapsed?: boolean | null;
@@ -80,7 +81,20 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
   const trackedSetRightPanelTab = useCallback(
     (tab: RightPanelTab) => {
       if (tab === "design" || tab === "layers") {
-        setRightInspectorPanes((panes) => ({ ...panes, [tab]: true }));
+        // Flat inspector: Layers always renders full-height by itself (see
+        // StudioRightPanel's render gate), so this MUST land on the same
+        // radio-style exclusivity setExclusiveRightInspectorPane enforces for
+        // the direct in-panel tab click — every OTHER path that reaches here
+        // (element select, closing block-params, the header Inspector
+        // button, and this function's own callers outside an active
+        // inspector tab) would otherwise additively leave both panes `true`
+        // and reproduce the "both tabs highlight, only one renders" bug this
+        // still-additive branch used to cause under the flat flag.
+        setRightInspectorPanes(
+          STUDIO_FLAT_INSPECTOR_ENABLED
+            ? { design: tab === "design", layers: tab === "layers" }
+            : (panes) => ({ ...panes, [tab]: true }),
+        );
       }
       setRightPanelTab(tab);
       trackStudioEvent("tab_switch", { panel: "right_panel", tab });
@@ -96,6 +110,14 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     });
   }, []);
 
+  // Radio-style variant for the flat inspector: Layers always renders full-
+  // height by itself there (never split-shared with Design), so leaving both
+  // panes independently toggleable would highlight both tabs as "active"
+  // while only one actually shows. Selecting one turns the other off.
+  const setExclusiveRightInspectorPane = useCallback((pane: RightInspectorPane) => {
+    setRightInspectorPanes({ design: pane === "design", layers: pane === "layers" });
+  }, []);
+
   return {
     leftWidth,
     setLeftWidth,
@@ -109,6 +131,7 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     setRightPanelTab: trackedSetRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,

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

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
+import { usePersistentEditHistory } from "./usePersistentEditHistory";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+async function flushAsyncEffects(): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+describe("usePersistentEditHistory project ownership", () => {
+  it("rejects a delayed project A recorder after project B becomes active", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const now = () => 100;
+    const captured: { history: ReturnType<typeof usePersistentEditHistory> | null } = {
+      history: null,
+    };
+
+    function Probe({ projectId }: { projectId: string }) {
+      captured.history = usePersistentEditHistory({ projectId, storage, now });
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+    const recordProjectA = captured.history?.recordEdit;
+    if (!recordProjectA) throw new Error("project A history did not load");
+
+    await act(async () => root.render(<Probe projectId="project-b" />));
+    await expect(
+      recordProjectA({
+        label: "Delayed A edit",
+        kind: "manual",
+        files: { "index.html": { before: "A", after: "A2" } },
+      }),
+    ).rejects.toThrow("inactive project project-a");
+    await flushAsyncEffects();
+
+    const recordProjectB = captured.history?.recordEdit;
+    if (!recordProjectB) throw new Error("project B history did not load");
+    await act(async () => {
+      await recordProjectB({
+        label: "B edit",
+        kind: "manual",
+        files: { "index.html": { before: "B", after: "B2" } },
+      });
+    });
+
+    expect(await storage.get("project-a")).toBeNull();
+    expect((await storage.get("project-b"))?.undo.map((entry) => entry.label)).toEqual(["B edit"]);
+
+    await act(async () => root.unmount());
+  });
+});

package/src/hooks/usePersistentEditHistory.test.ts

@@ -1,7 +1,11 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { createEmptyEditHistory } from "../utils/editHistory";
 import type { EditHistoryStorageAdapter } from "../utils/editHistoryStorage";
 import { createMemoryEditHistoryStorage } from "../utils/editHistoryStorage";
+import {
+  serializeStudioFileMutation,
+  serializeStudioFileMutations,
+} from "../utils/studioFileMutationCoordinator";
 import {
   createPersistentEditHistoryController,
   createPersistentEditHistoryStore,
@@ -213,6 +217,50 @@ describe("createPersistentEditHistoryController", () => {
     expect(store.snapshot().canRedo).toBe(true);
   });
 
+  it("waits for same-file mutations before checking an undo hash", async () => {
+    const storage = createMemoryEditHistoryStorage();
+    const store = createPersistentEditHistoryStore({
+      projectId: "project-1",
+      storage,
+      initialState: createEmptyEditHistory(),
+      now: () => 100,
+      onChange: () => {},
+    });
+    await store.recordEdit({
+      label: "Edit source",
+      kind: "source",
+      files: { "index.html": { before: "before", after: "after" } },
+    });
+
+    let disk = "after";
+    let release!: () => void;
+    const blocked = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const writeFile = vi.fn(async (_path: string, content: string) => {
+      disk = content;
+    });
+    const priorMutation = serializeStudioFileMutation(writeFile, "index.html", async () => {
+      await blocked;
+      disk = "newer-edit";
+    });
+    const readFile = vi.fn(async () => disk);
+    const undo = store.undo({
+      readFile,
+      writeFile,
+      serialize: (paths, task) => serializeStudioFileMutations(writeFile, paths, task),
+    });
+
+    await Promise.resolve();
+    expect(readFile).not.toHaveBeenCalled();
+    release();
+    await priorMutation;
+    await expect(undo).resolves.toMatchObject({ ok: false, reason: "content-mismatch" });
+    expect(disk).toBe("newer-edit");
+    expect(writeFile).not.toHaveBeenCalled();
+    expect(store.snapshot().canUndo).toBe(true);
+  });
+
   it("returns per-file restored/previous content so the preview can soft-apply", async () => {
     const storage = createMemoryEditHistoryStorage();
     const store = createPersistentEditHistoryStore({