@hyperframes/studio 0.8.52 → 0.8.53

package/src/hooks/useSlideshowTabState.ts

@@ -1,29 +1,22 @@
-import { useEffect, useMemo, type MutableRefObject } from "react";
+import { useMemo, type MutableRefObject } from "react";
 import { SLIDESHOW_ISLAND_TYPE, slideshowIslandRegex } from "@hyperframes/core/slideshow";
 import type { SceneInfo } from "../components/panels/SlideshowPanel";
 import type { IframeWindow } from "../player/lib/playbackTypes";
-import type { RightPanelTab } from "../utils/studioHelpers";
 
 /**
  * Derives whether the currently-edited composition is a slideshow (carries
  * the slideshow JSON island — the same definitive marker the CLI's `present`
  * command requires; it refuses to run without one) and the live scene list
- * for the Slideshow panel, and bounces `rightPanelTab` off "slideshow" the
- * moment it stops applying (e.g. the user switches to a non-slideshow file
- * while that tab was open) so the panel never shows a dangling active tab
- * whose button is no longer even rendered.
- *
- * Extracted from StudioRightPanel to keep that file under the 600-LOC gate.
+ * for the Slideshow panel. Extracted from StudioRightPanels to keep that file
+ * under the 600-LOC gate.
  */
 export function useSlideshowTabState(params: {
   editingFileContent: string | null | undefined;
   previewIframeRef: MutableRefObject<HTMLIFrameElement | null>;
   refreshKey: number;
-  rightPanelTab: RightPanelTab;
-  setRightPanelTab: (tab: RightPanelTab) => void;
+  slideshowVisible: boolean;
 }): { isSlideshowComposition: boolean; slideshowScenes: SceneInfo[] } {
-  const { editingFileContent, previewIframeRef, refreshKey, rightPanelTab, setRightPanelTab } =
-    params;
+  const { editingFileContent, previewIframeRef, refreshKey, slideshowVisible } = params;
 
   // Presence-only (not full manifest validation): a malformed island should
   // still surface the Slideshow tab so the user can see/fix it, rather than
@@ -49,13 +42,7 @@ export function useSlideshowTabState(params: {
       return [];
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [previewIframeRef, rightPanelTab, refreshKey]);
-
-  useEffect(() => {
-    if (rightPanelTab === "slideshow" && !isSlideshowComposition) {
-      setRightPanelTab("renders");
-    }
-  }, [rightPanelTab, isSlideshowComposition, setRightPanelTab]);
+  }, [previewIframeRef, slideshowVisible, refreshKey]);
 
   return { isSlideshowComposition, slideshowScenes };
 }

package/src/hooks/useStudioContextValue.test.ts

@@ -4,14 +4,12 @@ import React from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it } from "vitest";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { RightInspectorPanes } from "../utils/studioHelpers";
+import type { PanelId } from "../components/dock/panelRegistry";
 import { makeSelection } from "./domSelectionTestHarness";
 import { useInspectorState, type InspectorState } from "./useStudioContextValue";
 
 interface HarnessProps {
-  rightPanelTab: string;
-  rightInspectorPanes: RightInspectorPanes;
-  rightCollapsed: boolean;
+  rightPanel: PanelId | null;
   isPlaying: boolean;
   isGestureRecording: boolean;
   domEditSelection: DomEditSelection | null;
@@ -22,9 +20,7 @@ function renderInspectorState(props: HarnessProps): InspectorState {
 
   function Harness() {
     state = useInspectorState(
-      props.rightPanelTab,
-      props.rightInspectorPanes,
-      props.rightCollapsed,
+      props.rightPanel,
       props.isPlaying,
       props.domEditSelection,
       props.isGestureRecording,
@@ -42,9 +38,7 @@ function selectedProps(
 ): HarnessProps & { domEditSelection: DomEditSelection } {
   const element = document.createElement("div");
   return {
-    rightPanelTab: "renders",
-    rightInspectorPanes: { layers: false, design: false },
-    rightCollapsed: true,
+    rightPanel: "renders",
     isPlaying: false,
     isGestureRecording: false,
     domEditSelection: makeSelection("Selected", element),
@@ -78,16 +72,10 @@ describe("useInspectorState", () => {
   it("keeps selected DOM bounds coupled to the inspector or variables panel", () => {
     expect(renderInspectorState(selectedProps()).shouldShowSelectedDomBounds).toBe(false);
     expect(
-      renderInspectorState(
-        selectedProps({
-          rightPanelTab: "design",
-          rightInspectorPanes: { layers: false, design: true },
-        }),
-      ).shouldShowSelectedDomBounds,
+      renderInspectorState(selectedProps({ rightPanel: "design" })).shouldShowSelectedDomBounds,
     ).toBe(true);
     expect(
-      renderInspectorState(selectedProps({ rightPanelTab: "variables" }))
-        .shouldShowSelectedDomBounds,
+      renderInspectorState(selectedProps({ rightPanel: "variables" })).shouldShowSelectedDomBounds,
     ).toBe(true);
   });
 });

package/src/hooks/useStudioContextValue.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo, type DragEvent } from "react";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { StudioContextValue } from "../contexts/StudioContext";
-import type { RightInspectorPanes } from "../utils/studioHelpers";
+import type { PanelId } from "../components/dock/panelRegistry";
 import type { TimelineFileDropHandler } from "./useTimelineEditingTypes";
 import { usePlayerStore } from "../player";
 
@@ -66,33 +66,21 @@ export function buildStudioContextValue(input: StudioContextInput): StudioContex
 }
 
 export interface InspectorState {
-  layersPanelActive: boolean;
-  designPanelActive: boolean;
   inspectorPanelActive: boolean;
-  inspectorButtonActive: boolean;
   shouldShowMotionPath: boolean;
   shouldShowSelectedDomBounds: boolean;
 }
 
 export function useInspectorState(
-  rightPanelTab: string,
-  rightInspectorPanes: RightInspectorPanes,
-  rightCollapsed: boolean,
+  rightPanel: PanelId | null,
   isPlaying: boolean,
   domEditSelection: DomEditSelection | null,
   isGestureRecording?: boolean,
 ): InspectorState {
-  // fallow-ignore-next-line complexity
   return useMemo(() => {
-    const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-    const layersPanelActive = inspectorTabActive && rightInspectorPanes.layers;
-    const designPanelActive = inspectorTabActive && rightInspectorPanes.design;
-    const inspectorPanelActive = layersPanelActive || designPanelActive;
+    const inspectorPanelActive = rightPanel === "layers" || rightPanel === "design";
     return {
-      layersPanelActive,
-      designPanelActive,
       inspectorPanelActive,
-      inspectorButtonActive: !rightCollapsed && inspectorPanelActive,
       // Deliberately wider than shouldShowSelectedDomBounds: the on-canvas path
       // handles ARE the arc-drag affordance, so gating them on an open Inspector
       // would make keyframe path editing reachable only from a side panel.
@@ -102,18 +90,9 @@ export function useInspectorState(
       // The Variables tab also works against the canvas selection (bind card),
       // so the selection outline stays visible there too.
       shouldShowSelectedDomBounds:
-        (inspectorPanelActive || rightPanelTab === "variables") &&
-        !isPlaying &&
-        !isGestureRecording,
+        (inspectorPanelActive || rightPanel === "variables") && !isPlaying && !isGestureRecording,
     };
-  }, [
-    rightPanelTab,
-    rightInspectorPanes,
-    rightCollapsed,
-    isPlaying,
-    isGestureRecording,
-    domEditSelection,
-  ]);
+  }, [rightPanel, isPlaying, isGestureRecording, domEditSelection]);
 }
 
 /** Lets an OS file drop reach `onDrop` anywhere in the shell; the timeline shows its own landing preview. */

package/src/index.ts

@@ -1,9 +1,10 @@
 // UI primitives
-export { Button, buttonBase, buttonVariants } from "./components/ui/Button";
+export { Button, buttonBase, buttonSizes, buttonVariants } from "./components/ui/Button";
 export type { ButtonSize, ButtonVariant, PreviewState } from "./components/ui/Button";
 export { IconButton } from "./components/ui/IconButton";
 export { Tab, TabPanel, Tabs, TabsList } from "./components/ui/Tabs";
 export { Tooltip } from "./components/ui/Tooltip";
+export { HyperframesLogo } from "./components/StudioHeader";
 export { cn } from "./components/ui/cn";
 export {
   ContextMenu,

package/src/main.tsx

@@ -65,6 +65,10 @@ window.addEventListener("error", (event) => {
 });
 
 let filteredAssetErrorCount = 0;
+let filteredAbortCount = 0;
+// Bounded so a hostile extension cannot grow it; a novel abort message still surfaces once.
+const seenAbortMessages = new Set<string>();
+const MAX_SEEN_ABORT_MESSAGES = 20;
 
 // fallow-ignore-next-line complexity
 window.addEventListener("unhandledrejection", (event) => {
@@ -80,6 +84,28 @@ window.addEventListener("unhandledrejection", (event) => {
     }
     return;
   }
+  // An AbortError rejection is a cancellation we asked for, not a failure. Our own
+  // fetch chains handle it; the unhandled copies come from browser extensions that
+  // wrap window.fetch and derive a promise from each request without a rejection
+  // handler, so they reject with our abort reason whenever a thumbnail lease is
+  // released mid-fetch. Filtered before the cap so a scroll burst cannot exhaust
+  // ERROR_CAP and silence the session's real rejections. Sampled per distinct
+  // message, so an abort we have not seen before (e.g. our own "Aborted") is
+  // recorded once instead of drowning in the extension flood.
+  if (props.error_name === "AbortError") {
+    filteredAbortCount++;
+    const message = props.error_message.slice(0, 200);
+    const novel =
+      !seenAbortMessages.has(message) && seenAbortMessages.size < MAX_SEEN_ABORT_MESSAGES;
+    if (novel) seenAbortMessages.add(message);
+    if (novel || filteredAbortCount % 100 === 0) {
+      trackStudioEvent("abort_rejection_filtered", {
+        error_message: message,
+        total_filtered: filteredAbortCount,
+      });
+    }
+    return;
+  }
 
   rejectionCount++;
   if (rejectionCount > ERROR_CAP) {

package/src/player/components/Timeline.tsx

@@ -448,7 +448,7 @@ export const Timeline = memo(function Timeline({
   return (
     <div
       ref={setContainerRef}
-      aria-label="Timeline"
+      aria-label="Timeline track view"
       data-timeline-element-count={expandedElements.length}
       className={`relative border-t select-none h-full overflow-hidden ${assetDrop.isDragOver ? "ring-1 ring-inset ring-studio-accent/60" : ""} ${activeTool === "razor" ? "cursor-crosshair" : shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       onMouseMove={updateRazorGuide}

package/src/player/lib/timelinePerformanceDiagnostics.test.ts

@@ -14,7 +14,7 @@ describe("timeline performance diagnostics", () => {
 
   it("reads mounted resources without mutating the timeline", () => {
     document.body.innerHTML = `
-      <div aria-label="Timeline" data-timeline-scheduler-queued="3"
+      <div aria-label="Timeline track view" data-timeline-scheduler-queued="3"
            data-timeline-scheduler-active="2" data-timeline-cache-bytes="4096">
         <div data-timeline-row><div data-clip="true"></div><div data-clip="true"></div></div>
         <div data-timeline-row><div data-clip="true"></div></div>
@@ -41,7 +41,8 @@ describe("timeline performance diagnostics", () => {
   });
 
   it("returns the zero baseline after unmount or reset removes the DOM", () => {
-    document.body.innerHTML = '<div aria-label="Timeline"><div data-clip="true"></div></div>';
+    document.body.innerHTML =
+      '<div aria-label="Timeline track view"><div data-clip="true"></div></div>';
     expect(readTimelinePerformanceDiagnostics().mountedClipRoots).toBe(1);
 
     document.body.replaceChildren();

package/src/player/lib/timelinePerformanceDiagnostics.ts

@@ -69,7 +69,7 @@ function sumDataAttribute(root: ParentNode, selector: string, dataKey: string):
 export function readTimelinePerformanceDiagnostics(
   root: ParentNode = document,
 ): Readonly<TimelinePerformanceDiagnostics> {
-  const timelineRoots = root.querySelectorAll<HTMLElement>('[aria-label="Timeline"]');
+  const timelineRoots = root.querySelectorAll<HTMLElement>('[aria-label="Timeline track view"]');
   let mountedTimelineDescendants = 0;
   for (const timelineRoot of timelineRoots) {
     mountedTimelineDescendants += timelineRoot.querySelectorAll("*").length;

package/src/utils/studioHelpers.ts

@@ -22,13 +22,6 @@ export type RightPanelTab =
   | "block-params"
   | "slideshow"
   | "variables";
-export type RightInspectorPane = "layers" | "design";
-
-export interface RightInspectorPanes {
-  layers: boolean;
-  design: boolean;
-}
-
 export interface AgentModalAnchorPoint {
   x: number;
   y: number;

package/src/utils/studioUiPreferences.test.ts

@@ -20,7 +20,6 @@ describe("studio UI preferences", () => {
     const storage = createStorage();
 
     writeStudioUiPreferences({ timelineVisible: false }, storage);
-    writeStudioUiPreferences({ leftWidth: 384, rightWidth: 424 }, storage);
     writeStudioUiPreferences({ playbackRate: 1.5 }, storage);
     writeStudioUiPreferences({ audioMuted: true }, storage);
     writeStudioUiPreferences({ audioVolume: 0.4 }, storage);
@@ -28,8 +27,6 @@ describe("studio UI preferences", () => {
 
     expect(readStudioUiPreferences(storage)).toEqual({
       timelineVisible: false,
-      leftWidth: 384,
-      rightWidth: 424,
       playbackRate: 1.5,
       audioMuted: true,
       audioVolume: 0.4,
@@ -57,9 +54,6 @@ describe("studio UI preferences", () => {
     storage.setItem(
       "hf-studio-ui-preferences",
       JSON.stringify({
-        leftCollapsed: "yes",
-        leftWidth: "wide",
-        rightWidth: Number.NaN,
         timelineVisible: true,
         playbackRate: Number.NaN,
         audioMuted: "false",
@@ -119,28 +113,28 @@ describe("thumbnailMode preference", () => {
 describe("per-project scoping", () => {
   it("keeps two projects' preferences independent", () => {
     const storage = createStorage();
-    writeStudioUiPreferences({ leftWidth: 300 }, storage, "alpha");
-    writeStudioUiPreferences({ leftWidth: 500 }, storage, "beta");
+    writeStudioUiPreferences({ playbackRate: 1.25 }, storage, "alpha");
+    writeStudioUiPreferences({ playbackRate: 2 }, storage, "beta");
 
-    expect(readStudioUiPreferences(storage, "alpha").leftWidth).toBe(300);
-    expect(readStudioUiPreferences(storage, "beta").leftWidth).toBe(500);
+    expect(readStudioUiPreferences(storage, "alpha").playbackRate).toBe(1.25);
+    expect(readStudioUiPreferences(storage, "beta").playbackRate).toBe(2);
   });
 
   it("a project with nothing saved yet inherits the pre-scoping global entry once", () => {
     const storage = createStorage();
-    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ leftWidth: 600 }));
+    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ playbackRate: 0.5 }));
 
-    expect(readStudioUiPreferences(storage, "gamma").leftWidth).toBe(600);
+    expect(readStudioUiPreferences(storage, "gamma").playbackRate).toBe(0.5);
   });
 
   it("stops inheriting the global entry once the project has its own write", () => {
     const storage = createStorage();
-    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ leftWidth: 600 }));
+    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ playbackRate: 0.5 }));
 
-    writeStudioUiPreferences({ leftWidth: 250 }, storage, "gamma");
+    writeStudioUiPreferences({ playbackRate: 1.75 }, storage, "gamma");
 
-    expect(readStudioUiPreferences(storage, "gamma").leftWidth).toBe(250);
-    expect(readStudioUiPreferences(storage, null).leftWidth).toBe(600);
+    expect(readStudioUiPreferences(storage, "gamma").playbackRate).toBe(1.75);
+    expect(readStudioUiPreferences(storage, null).playbackRate).toBe(0.5);
   });
 });
 

package/src/utils/studioUiPreferences.ts

@@ -10,11 +10,7 @@ export interface StoredPreviewZoomState {
 export type TimelineTimeDisplayMode = "time" | "frame";
 
 export interface StudioUiPreferences {
-  leftCollapsed?: boolean;
-  leftWidth?: number;
-  rightWidth?: number;
   timelineVisible?: boolean;
-  timelineHeight?: number;
   playbackRate?: number;
   audioMuted?: boolean;
   audioVolume?: number;
@@ -83,21 +79,9 @@ function readStorage(storage: Storage | null, key: string): StudioUiPreferences
     if (!isRecord(parsed)) return {};
 
     const preferences: StudioUiPreferences = {};
-    if (typeof parsed.leftCollapsed === "boolean") {
-      preferences.leftCollapsed = parsed.leftCollapsed;
-    }
-    if (typeof parsed.leftWidth === "number" && Number.isFinite(parsed.leftWidth)) {
-      preferences.leftWidth = parsed.leftWidth;
-    }
-    if (typeof parsed.rightWidth === "number" && Number.isFinite(parsed.rightWidth)) {
-      preferences.rightWidth = parsed.rightWidth;
-    }
     if (typeof parsed.timelineVisible === "boolean") {
       preferences.timelineVisible = parsed.timelineVisible;
     }
-    if (typeof parsed.timelineHeight === "number" && Number.isFinite(parsed.timelineHeight)) {
-      preferences.timelineHeight = parsed.timelineHeight;
-    }
     if (typeof parsed.playbackRate === "number" && Number.isFinite(parsed.playbackRate)) {
       preferences.playbackRate = parsed.playbackRate;
     }