@hyperframes/studio 0.7.70 → 0.7.72

package/src/hooks/useBlockHandlers.ts

@@ -9,6 +9,7 @@ import { addBlockToProject } from "../utils/blockInstaller";
 import type { BlockParam } from "@hyperframes/core/registry";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
+import type { MediaOverlayPlacement } from "../components/editor/propertyPanelTypes";
 
 interface BlockCtxDeps {
   activeCompPath: string | null;
@@ -46,6 +47,7 @@ export interface UseBlockHandlersResult {
   >;
   handleAddBlock: (blockName: string) => void;
   handleTimelineBlockDrop: (blockName: string, placement: { start: number; track: number }) => void;
+  handleAddMediaOverlay: (blockName: string, placement: MediaOverlayPlacement) => Promise<void>;
   handlePreviewBlockDrop: (blockName: string, position: { left: number; top: number }) => void;
 }
 
@@ -151,6 +153,25 @@ export function useBlockHandlers({
     [projectId, blockCtx, previewIframeRef, runBlockInstall],
   );
 
+  const handleAddMediaOverlay = useCallback(
+    async (blockName: string, placement: MediaOverlayPlacement) => {
+      if (!projectId) return;
+      const { compositionPath, ...timelinePlacement } = placement;
+      await runBlockInstall(blockName, () =>
+        addBlockToProject({
+          projectId,
+          blockName,
+          ...blockCtx,
+          activeCompPath: compositionPath ?? blockCtx.activeCompPath,
+          placement: timelinePlacement,
+          previewIframe: previewIframeRef.current,
+          currentTime: usePlayerStore.getState().currentTime,
+        }),
+      );
+    },
+    [projectId, blockCtx, previewIframeRef, runBlockInstall],
+  );
+
   const handlePreviewBlockDrop = useCallback(
     (blockName: string, position: { left: number; top: number }) => {
       if (!projectId) return;
@@ -173,6 +194,7 @@ export function useBlockHandlers({
     setActiveBlockParams,
     handleAddBlock,
     handleTimelineBlockDrop,
+    handleAddMediaOverlay,
     handlePreviewBlockDrop,
   };
 }

package/src/hooks/useGsapScriptCommits.test.tsx

@@ -283,6 +283,21 @@ function mockFetchResult(over: Partial<MutationResult> = {}): void {
 }
 
 describe("runCommit — instantPatch wiring", () => {
+  it("explains a deliberate mutation that the server safely rejected as unchanged", async () => {
+    mockFetchResult({ changed: false });
+    const deps = renderCommitHook();
+
+    await act(async () => {
+      await deps.api.commitMutation(
+        selection,
+        { type: "move-keyframe", fromPercentage: 50, toPercentage: 100 },
+        { label: "Move keyframe" },
+      );
+    });
+
+    expect(deps.showToast).toHaveBeenCalledWith("A keyframe already exists at that time", "info");
+  });
+
   it("no-op commit with an instantPatch still patches the runtime (paired x/y commits)", async () => {
     patchRuntimeTweenInPlace.mockReturnValue(true);
     mockFetchResult({ changed: false });

package/src/hooks/useGsapScriptCommits.ts

@@ -77,6 +77,17 @@ async function mutateGsapScriptBatch(
 
 type ShowToast = (message: string, tone?: "error" | "info") => void;
 
+function showUnchangedMutationFeedback(
+  mutations: Record<string, unknown>[],
+  result: MutationResult,
+  showToast: ShowToast | undefined,
+): void {
+  if (result.changed !== false || mutations.length !== 1) return;
+  if (mutations[0]?.type === "move-keyframe") {
+    showToast?.("A keyframe already exists at that time", "info");
+  }
+}
+
 async function runMutationRequest(
   mutations: Record<string, unknown>[],
   options: CommitMutationOptions,
@@ -94,7 +105,9 @@ async function runMutationRequest(
     );
   }
   try {
-    return await request();
+    const result = await request();
+    showUnchangedMutationFeedback(mutations, result, showToast);
+    return result;
   } catch (error) {
     if (error instanceof GsapMutationHttpError) {
       showToast?.(formatGsapMutationRejectionToast(error), "error");

package/src/hooks/usePanelLayout.test.ts

@@ -2,11 +2,30 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { readStudioUiPreferences } from "../utils/studioUiPreferences";
 import { usePanelLayout } from "./usePanelLayout";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+beforeEach(() => {
+  const entries = new Map<string, string>();
+  Object.defineProperty(window, "localStorage", {
+    configurable: true,
+    value: {
+      get length() {
+        return entries.size;
+      },
+      clear: () => entries.clear(),
+      getItem: (key: string) => entries.get(key) ?? null,
+      key: (index: number) => Array.from(entries.keys())[index] ?? null,
+      removeItem: (key: string) => entries.delete(key),
+      setItem: (key: string, value: string) => entries.set(key, value),
+    } satisfies Storage,
+  });
+  Object.defineProperty(window, "innerWidth", { configurable: true, value: 1496 });
+});
+
 afterEach(() => {
   document.body.innerHTML = "";
   vi.doUnmock("../components/editor/manualEditingAvailability");
@@ -42,6 +61,54 @@ function renderPanelLayout() {
 }
 
 describe("usePanelLayout — right inspector panes", () => {
+  it("opens Design with the intended viewport-scaled panel widths", () => {
+    const harness = renderPanelLayout();
+
+    expect(harness.getState()).toMatchObject({
+      leftWidth: 384,
+      rightWidth: 424,
+      rightCollapsed: false,
+      rightPanelTab: "design",
+    });
+
+    harness.unmount();
+  });
+
+  it("persists the latest pointer width even before React rerenders", () => {
+    const harness = renderPanelLayout();
+    const state = harness.getState();
+    const target = { setPointerCapture: vi.fn() };
+
+    act(() => {
+      state.handlePanelResizeStart("left", {
+        preventDefault: vi.fn(),
+        target,
+        pointerId: 1,
+        clientX: 100,
+      } as unknown as React.PointerEvent);
+      state.handlePanelResizeMove({ clientX: 140 } as React.PointerEvent);
+      state.handlePanelResizeEnd();
+    });
+
+    expect(harness.getState().leftWidth).toBe(424);
+    expect(readStudioUiPreferences().leftWidth).toBe(424);
+    harness.unmount();
+  });
+
+  it("accumulates and persists rapid keyboard resize steps", () => {
+    const harness = renderPanelLayout();
+    const state = harness.getState();
+
+    act(() => {
+      state.adjustPanelWidth("right", 16);
+      state.adjustPanelWidth("right", 16);
+    });
+
+    expect(harness.getState().rightWidth).toBe(456);
+    expect(readStudioUiPreferences().rightWidth).toBe(456);
+    harness.unmount();
+  });
+
   it("toggleRightInspectorPane independently flips one pane, allowing both open at once", () => {
     const harness = renderPanelLayout();
     expect(harness.getState().rightInspectorPanes).toEqual({ layers: false, design: true });

package/src/hooks/usePanelLayout.ts

@@ -13,30 +13,76 @@ export interface InitialPanelLayoutState {
   rightPanelTab?: RightPanelTab | null;
 }
 
+type PanelSide = "left" | "right";
+
 function getInitialRightInspectorPanes(tab?: RightPanelTab | null): RightInspectorPanes {
   if (tab === "layers") return { layers: true, design: false };
   return { layers: false, design: true };
 }
 
+function getInitialPanelWidths(): { left: number; right: number } {
+  const viewportWidth = typeof window === "undefined" ? 1496 : window.innerWidth;
+  const preferences = readStudioUiPreferences();
+  const leftDefault = Math.max(240, Math.min(384, Math.round(viewportWidth * 0.257)));
+  const rightDefault = Math.max(320, Math.min(424, Math.round(viewportWidth * 0.284)));
+  return {
+    left: Math.max(
+      160,
+      Math.min(Math.floor(viewportWidth * 0.5), preferences.leftWidth ?? leftDefault),
+    ),
+    right: Math.max(160, Math.min(600, preferences.rightWidth ?? rightDefault)),
+  };
+}
+
+function clampPanelWidth(side: PanelSide, width: number): number {
+  const max = side === "left" ? Math.floor(window.innerWidth * 0.5) : 600;
+  return Math.max(160, Math.min(max, width));
+}
+
 export function usePanelLayout(initialState?: InitialPanelLayoutState) {
-  const [leftWidth, setLeftWidth] = useState(240);
-  const [rightWidth, setRightWidth] = useState(400);
+  const [initialPanelWidths] = useState(getInitialPanelWidths);
+  const [leftWidth, setLeftWidth] = useState(initialPanelWidths.left);
+  const [rightWidth, setRightWidth] = useState(initialPanelWidths.right);
+  const panelWidthsRef = useRef(initialPanelWidths);
   const [leftCollapsed, setLeftCollapsed] = useState(
     () => readStudioUiPreferences().leftCollapsed ?? false,
   );
-  const [rightCollapsed, setRightCollapsed] = useState(initialState?.rightCollapsed ?? true);
+  const [rightCollapsed, setRightCollapsed] = useState(initialState?.rightCollapsed ?? false);
   const [rightPanelTab, setRightPanelTab] = useState<RightPanelTab>(
-    initialState?.rightPanelTab ?? "renders",
+    initialState?.rightPanelTab ?? "design",
   );
   const [rightInspectorPanes, setRightInspectorPanes] = useState<RightInspectorPanes>(() =>
     getInitialRightInspectorPanes(initialState?.rightPanelTab),
   );
   const panelDragRef = useRef<{
-    side: "left" | "right";
+    side: PanelSide;
     startX: number;
     startW: number;
   } | null>(null);
 
+  const updatePanelWidth = useCallback((side: PanelSide, width: number) => {
+    const next = clampPanelWidth(side, width);
+    panelWidthsRef.current[side] = next;
+    if (side === "left") setLeftWidth(next);
+    else setRightWidth(next);
+    return next;
+  }, []);
+
+  const commitPanelWidth = useCallback(
+    (side: PanelSide, width: number) => {
+      const next = updatePanelWidth(side, Math.round(width));
+      writeStudioUiPreferences(side === "left" ? { leftWidth: next } : { rightWidth: next });
+    },
+    [updatePanelWidth],
+  );
+
+  const adjustPanelWidth = useCallback(
+    (side: PanelSide, delta: number) => {
+      commitPanelWidth(side, panelWidthsRef.current[side] + delta);
+    },
+    [commitPanelWidth],
+  );
+
   const toggleLeftSidebar = useCallback(() => {
     setLeftCollapsed((collapsed) => {
       writeStudioUiPreferences({ leftCollapsed: !collapsed });
@@ -45,38 +91,31 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
     });
   }, []);
 
-  const handlePanelResizeStart = useCallback(
-    (side: "left" | "right", e: React.PointerEvent) => {
-      e.preventDefault();
-      (e.target as HTMLElement).setPointerCapture(e.pointerId);
-      panelDragRef.current = {
-        side,
-        startX: e.clientX,
-        startW: side === "left" ? leftWidth : rightWidth,
-      };
+  const handlePanelResizeStart = useCallback((side: PanelSide, e: React.PointerEvent) => {
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    panelDragRef.current = {
+      side,
+      startX: e.clientX,
+      startW: panelWidthsRef.current[side],
+    };
+  }, []);
+
+  const handlePanelResizeMove = useCallback(
+    (e: React.PointerEvent) => {
+      const drag = panelDragRef.current;
+      if (!drag) return;
+      const delta = e.clientX - drag.startX;
+      updatePanelWidth(drag.side, drag.startW + (drag.side === "left" ? delta : -delta));
     },
-    [leftWidth, rightWidth],
+    [updatePanelWidth],
   );
 
-  const handlePanelResizeMove = useCallback((e: React.PointerEvent) => {
-    const drag = panelDragRef.current;
-    if (!drag) return;
-    const delta = e.clientX - drag.startX;
-    const maxLeft = Math.floor(window.innerWidth * 0.5);
-    const newW = Math.max(
-      160,
-      Math.min(
-        drag.side === "left" ? maxLeft : 600,
-        drag.startW + (drag.side === "left" ? delta : -delta),
-      ),
-    );
-    if (drag.side === "left") setLeftWidth(newW);
-    else setRightWidth(newW);
-  }, []);
-
   const handlePanelResizeEnd = useCallback(() => {
+    const side = panelDragRef.current?.side;
+    if (side) commitPanelWidth(side, panelWidthsRef.current[side]);
     panelDragRef.current = null;
-  }, []);
+  }, [commitPanelWidth]);
 
   const trackedSetRightPanelTab = useCallback(
     (tab: RightPanelTab) => {
@@ -120,9 +159,8 @@ export function usePanelLayout(initialState?: InitialPanelLayoutState) {
 
   return {
     leftWidth,
-    setLeftWidth,
     rightWidth,
-    setRightWidth,
+    adjustPanelWidth,
     leftCollapsed,
     setLeftCollapsed,
     rightCollapsed,