@hyperframes/studio 0.8.52 → 0.8.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.52",
+  "version": "0.8.53",
   "description": "",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
       "types": "./dist/styles/tailwind-preset.d.ts"
     },
     "./theme.css": "./src/styles/theme.css",
+    "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
   "publishConfig": {
@@ -50,11 +51,11 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.52",
-    "@hyperframes/player": "0.8.52",
-    "@hyperframes/sdk": "0.8.52",
-    "@hyperframes/parsers": "0.8.52",
-    "@hyperframes/studio-server": "0.8.52"
+    "@hyperframes/core": "0.8.53",
+    "@hyperframes/sdk": "0.8.53",
+    "@hyperframes/player": "0.8.53",
+    "@hyperframes/parsers": "0.8.53",
+    "@hyperframes/studio-server": "0.8.53"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -70,7 +71,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.52"
+    "@hyperframes/producer": "0.8.53"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -1,7 +1,7 @@
 import { useOwnPreviewIframe, usePreviewIframeStore } from "./player/store/previewIframeStore";
 import { buildProjectApiPath } from "./utils/projectRouting";
 import { useState, useCallback, useRef, useMemo, useLayoutEffect } from "react";
-import type { LeftSidebarHandle, SidebarTab } from "./components/sidebar/LeftSidebar";
+import { useDismissingTabSetter, useRightPanelIntent } from "./hooks/useRightPanelIntents";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
 import { usePlayerStore } from "./player";
 import { StudioOverlays } from "./components/StudioOverlays";
@@ -48,9 +48,9 @@ import type { DomEditSelection } from "./components/editor/domEditing";
 import { StudioHeader } from "./components/StudioHeader";
 import { useGestureCommit } from "./hooks/useGestureCommit";
 import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
-import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
+import { StudioLeftPanels } from "./components/StudioLeftPanels";
 import { EditorShell } from "./components/EditorShell";
-import { StudioRightPanel } from "./components/StudioRightPanel";
+import { StudioRightPanels } from "./components/StudioRightPanels";
 import { TimelineToolbar } from "./components/TimelineToolbar";
 import { StudioPlaybackProvider, StudioShellProvider } from "./contexts/StudioContext";
 import { PanelLayoutProvider } from "./contexts/PanelLayoutContext";
@@ -75,7 +75,6 @@ export function StudioApp() {
   const [previewDocumentVersion, refreshPreviewDocumentVersion] = usePreviewDocumentVersion();
   const [blockPreview, setBlockPreview] = useState<BlockPreviewInfo | null>(null);
   const previewIframeRef = useRef<HTMLIFrameElement | null>(null);
-  const leftSidebarRef = useRef<LeftSidebarHandle>(null);
   const captionEditMode = useCaptionStore((s) => s.isEditMode);
   const captionHasSelection = useCaptionStore((s) => s.selectedSegmentIds.size > 0);
   const captionSync = useCaptionSync(projectId);
@@ -202,6 +201,13 @@ export function StudioApp() {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab,
   });
+  const dismissBlockParams = useCallback(() => setActiveBlockParams(null), [setActiveBlockParams]);
+  const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
+  const layout = useMemo(
+    () => ({ ...panelLayout, setRightPanelTab }),
+    [panelLayout, setRightPanelTab],
+  );
+
   const clearDomSelectionRef = useRef<() => void>(() => {});
   const domEditSelectionBridgeRef = useRef<DomEditSelection | null>(null);
   type DomEditDelete = (s: DomEditSelection, o?: { expandGroup?: boolean }) => Promise<void>;
@@ -234,7 +240,6 @@ export function StudioApp() {
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
     waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
-    leftSidebarRef,
     handleCopy,
     handlePaste,
     handleCut,
@@ -248,10 +253,6 @@ export function StudioApp() {
     forceReloadSdkSession: sdkHandle.forceReload,
     onToggleRecording: () => handleToggleRecordingRef.current(),
   });
-  const sidebarTabRef = useRef({
-    select: (t: SidebarTab) => leftSidebarRef.current?.selectTab(t),
-    get: () => leftSidebarRef.current?.getTab() ?? "compositions",
-  });
   const domEditSession = useDomEditSession({
     projectId,
     activeCompPath,
@@ -264,7 +265,7 @@ export function StudioApp() {
     setSelectedTimelineElementId,
     setTimelineSelectionSet,
     setRightCollapsed: panelLayout.setRightCollapsed,
-    setRightPanelTab: panelLayout.setRightPanelTab,
+    setRightPanelTab,
     showToast,
     isRecordingRef: isGestureRecordingRef,
     refreshPreviewDocumentVersion,
@@ -286,8 +287,6 @@ export function StudioApp() {
     reloadPreview,
     setRefreshKey,
     openSourceForSelection: fileManager.openSourceForSelection,
-    selectSidebarTab: sidebarTabRef.current.select,
-    getSidebarTab: sidebarTabRef.current.get,
     sdkSession: editFlowSdkSession,
     publishSdkSession: sdkHandle.publish,
     forceReloadSdkSession: sdkHandle.forceReload,
@@ -367,20 +366,18 @@ export function StudioApp() {
     },
     [appHotkeys, resetConsoleErrors, refreshPreviewDocumentVersion],
   );
-  const {
-    designPanelActive,
-    inspectorPanelActive,
-    inspectorButtonActive,
-    shouldShowMotionPath,
-    shouldShowSelectedDomBounds,
-  } = useInspectorState(
-    panelLayout.rightPanelTab,
-    panelLayout.rightInspectorPanes,
-    panelLayout.effectiveRightCollapsed,
-    isPlaying,
-    domEditSession.domEditSelection,
-    gestureState === "recording",
-  );
+  const rightPanel = useRightPanelIntent();
+  const { inspectorPanelActive, shouldShowMotionPath, shouldShowSelectedDomBounds } =
+    useInspectorState(
+      rightPanel,
+      isPlaying,
+      domEditSession.domEditSelection,
+      gestureState === "recording",
+    );
+  // The dock has no separate "railed by window width" state (it shrinks
+  // panels, never auto-hides the group), so rightCollapsed is already the
+  // value that decides whether the panel is actually showing.
+  const inspectorButtonActive = !panelLayout.rightCollapsed && inspectorPanelActive;
   useStudioUrlState({
     projectId,
     activeCompPath,
@@ -397,7 +394,7 @@ export function StudioApp() {
     applyMarqueeSelection: domEditSession.applyMarqueeSelection,
     buildDomSelectionFromTarget: domEditSession.buildDomSelectionFromTarget,
     applyDomSelection: domEditSession.applyDomSelection,
-    setRightPanelTab: panelLayout.setRightPanelTab,
+    setRightPanelTab,
     initialState: initialUrlStateRef.current,
   });
   const studioCtxValue = buildStudioContextValue({
@@ -437,7 +434,7 @@ export function StudioApp() {
   return (
     <StudioShellProvider value={studioCtxValue}>
       <StudioPlaybackProvider value={studioCtxValue}>
-        <PanelLayoutProvider value={panelLayout}>
+        <PanelLayoutProvider value={layout}>
           <FileManagerProvider value={fileManager}>
             <DomEditProvider value={domEditSession}>
               <div
@@ -468,26 +465,23 @@ export function StudioApp() {
                 )}
                 <ExternalFileConflictBanner coordinator={externalFileChanges} />
                 <EditorShell
-                  left={
-                    <StudioLeftSidebar
-                      leftSidebarRef={leftSidebarRef}
-                      onSelectComposition={handleSelectComposition}
-                      onAddBlock={handleAddBlock}
-                      onPreviewBlock={setBlockPreview}
-                      onLint={handleLint}
-                      linting={linting}
-                      lintFindingCount={lintModal?.length ?? findingsByFile.size}
-                      lintFindingsByFile={findingsByFile}
-                      lintHasError={hasLintError}
-                      onAddAssetToTimeline={handleAddAssetAtPlayhead}
-                      onAddCompositionToTimeline={handleAddCompositionAtPlayhead}
-                    />
-                  }
-                  right={
-                    panelLayout.effectiveRightCollapsed ? null : (
-                      <StudioRightPanel
-                        designPanelActive={designPanelActive}
+                  panels={
+                    <>
+                      <StudioLeftPanels
+                        onSelectComposition={handleSelectComposition}
+                        onAddBlock={handleAddBlock}
+                        onPreviewBlock={setBlockPreview}
+                        onLint={handleLint}
+                        linting={linting}
+                        lintFindingCount={lintModal?.length ?? findingsByFile.size}
+                        lintFindingsByFile={findingsByFile}
+                        lintHasError={hasLintError}
+                        onAddAssetToTimeline={handleAddAssetAtPlayhead}
+                        onAddCompositionToTimeline={handleAddCompositionAtPlayhead}
+                      />
+                      <StudioRightPanels
                         activeBlockParams={activeBlockParams}
+                        onDismissBlockParams={dismissBlockParams}
                         onCloseBlockParams={() => {
                           setActiveBlockParams(null);
                           panelLayout.setRightPanelTab("design");
@@ -504,7 +498,7 @@ export function StudioApp() {
                         onAutoGroupCarveSources={timelineEditing.handleAutoGroupCarveSources}
                         onAddMediaOverlay={handleAddMediaOverlay}
                       />
-                    )
+                    </>
                   }
                   timelineToolbar={timelineToolbar}
                   renderClipContent={renderClipContent}

package/src/components/EditorShell.selectionSync.test.tsx

@@ -42,7 +42,6 @@ vi.mock("./nle/NLEContext", () => ({
   useNLEContext: () => ({
     compositionStack: [],
     updateCompositionStack: vi.fn(),
-    containerRef: { current: null },
   }),
 }));
 vi.mock("./nle/useTimelineEditCallbacks", () => ({
@@ -53,7 +52,14 @@ vi.mock("./nle/PreviewOverlays", () => ({ PreviewOverlays: () => null }));
 vi.mock("./nle/TimelinePane", () => ({ TimelinePane: () => null }));
 vi.mock("../captions/components/CaptionTimeline", () => ({ CaptionTimeline: () => null }));
 
-Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+Object.assign(globalThis, {
+  IS_REACT_ACT_ENVIRONMENT: true,
+  ResizeObserver: class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+});
 
 afterEach(() => {
   document.body.innerHTML = "";
@@ -69,8 +75,7 @@ describe("EditorShell timeline selection sync", () => {
     act(() => {
       root.render(
         <EditorShell
-          left={null}
-          right={null}
+          panels={null}
           timelineToolbar={null}
           renderClipContent={() => null}
           handleTimelineElementDelete={vi.fn()}

package/src/components/EditorShell.tsx

@@ -17,6 +17,7 @@ import type { GestureRecordingState } from "./editor/GestureRecordControl";
 import { useTimelineSelectionPreviewSync } from "../hooks/useTimelineSelectionPreviewSync";
 import { StudioAgentTools } from "../webmcp/StudioAgentTools";
 import type { TimelineDropPlacement } from "../player/components/timelineCallbacks";
+import { Dock } from "./dock/Dock";
 
 type RenderClipContent = (
   element: TimelineElement,
@@ -26,10 +27,8 @@ type RenderClipContent = (
 // The seven move/resize/split/razor handlers come from TimelineEditCallbackDeps
 // (shared with useTimelineEditCallbacks); the rest are drop + wiring props.
 export interface EditorShellProps extends TimelineEditCallbackDeps {
-  /** Left sidebar (media/library), rendered in the top row. */
-  left: ReactNode;
-  /** Right panel (inspector/design) or null when collapsed, in the top row. */
-  right: ReactNode;
+  /** Dock.Panel elements for every panel except the built-in preview and timeline. */
+  panels: ReactNode;
   timelineToolbar: ReactNode;
   renderClipContent: RenderClipContent;
   handleTimelineElementDelete: (element: TimelineElement) => Promise<void> | void;
@@ -72,12 +71,11 @@ export interface EditorShellProps extends TimelineEditCallbackDeps {
   gestureOverlay?: ReactNode;
 }
 
-// The CapCut-style shell: [left | preview | right] in a top row, with a
-// full-width timeline spanning the bottom. Owns the shared player +
-// composition-stack state via NLEProvider so both rows share one player.
+// The dockable shell: every panel lives in one Dock, arranged by the user's
+// saved layout. Owns the shared player + composition-stack state via
+// NLEProvider so every panel shares one player.
 export function EditorShell({
-  left,
-  right,
+  panels,
   timelineToolbar,
   renderClipContent,
   handleTimelineElementDelete,
@@ -178,8 +176,8 @@ export function EditorShell({
           }}
         >
           <EditorShellBody
-            left={left}
-            right={right}
+            projectId={projectId}
+            panels={panels}
             captionEditMode={captionEditMode}
             onSelectTimelineElement={handleTimelineElementSelect}
             onPreviewBlockDrop={handlePreviewBlockDrop}
@@ -213,8 +211,8 @@ export function EditorShell({
 }
 
 interface EditorShellBodyProps {
-  left: ReactNode;
-  right: ReactNode;
+  panels: ReactNode;
+  projectId: string;
   captionEditMode: boolean;
   previewOverlay: ReactNode;
   onSelectTimelineElement: (element: TimelineElement | null) => void;
@@ -239,8 +237,8 @@ interface EditorShellBodyProps {
 }
 
 function EditorShellBody({
-  left,
-  right,
+  panels,
+  projectId,
   captionEditMode,
   previewOverlay,
   onSelectTimelineElement,
@@ -257,7 +255,7 @@ function EditorShellBody({
   onDuplicateClip,
   canPasteClip,
 }: EditorShellBodyProps) {
-  const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
+  const { compositionStack, updateCompositionStack } = useNLEContext();
 
   // The caption track's blocks are seek targets; CaptionTimeline took an onSeek
   // prop that nothing ever passed, so clicking a block did nothing.
@@ -277,7 +275,6 @@ function EditorShellBody({
 
   return (
     <div
-      ref={containerRef}
       // Shell canvas is a step LIGHTER than the near-black panel cards so the
       // gaps between panels read as visible seams (CapCut-style).
       className="flex flex-col flex-1 min-h-0 bg-panel-surface"
@@ -287,47 +284,46 @@ function EditorShellBody({
       {/* Renders nothing; exposes Studio's state to an agentic browser. Mounted
           here rather than in App because it needs the DomEdit contexts. */}
       <StudioAgentTools />
-      {/* Top row: [left | preview | right] — outer padding + the 8px resize
-          seams give the panels CapCut-style separation on the dark canvas. */}
-      <div className="flex flex-row flex-1 min-h-0 px-px pt-px">
-        {left}
-        <div className="flex-1 min-w-0 flex flex-col relative">
-          <PreviewPane
-            previewOverlay={previewOverlay}
+      <Dock.Root projectId={projectId}>
+        <Dock.Panel id="preview">
+          <div className="relative flex h-full w-full min-w-0 flex-col">
+            <PreviewPane
+              previewOverlay={previewOverlay}
+              onSelectTimelineElement={onSelectTimelineElement}
+              onPreviewBlockDrop={onPreviewBlockDrop}
+            />
+          </div>
+        </Dock.Panel>
+        <Dock.Panel id="timeline">
+          <TimelinePane
+            timelineToolbar={timelineToolbar}
+            renderClipContent={renderClipContent}
+            onFileDrop={onFileDrop}
+            onAssetDrop={onAssetDrop}
+            onBlockDrop={onBlockDrop}
+            onCompositionDrop={onCompositionDrop}
+            onDeleteElement={onDeleteElement}
+            onCopyClip={onCopyClip}
+            onPasteClip={onPasteClip}
+            onDuplicateClip={onDuplicateClip}
+            canPasteClip={canPasteClip}
             onSelectTimelineElement={onSelectTimelineElement}
-            onPreviewBlockDrop={onPreviewBlockDrop}
+            timelineFooter={
+              captionEditMode ? (
+                <div className="border-t border-neutral-800/30 shrink-0" style={{ height: 60 }}>
+                  <div className="flex items-center gap-1.5 px-2 py-0.5">
+                    <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
+                      Captions
+                    </span>
+                  </div>
+                  <CaptionTimeline pixelsPerSecond={100} onSeek={seekCaptionTime} />
+                </div>
+              ) : undefined
+            }
           />
-        </div>
-        {right}
-      </div>
-
-      {/* Full-width timeline row */}
-      <TimelinePane
-        timelineToolbar={timelineToolbar}
-        renderClipContent={renderClipContent}
-        onFileDrop={onFileDrop}
-        onAssetDrop={onAssetDrop}
-        onBlockDrop={onBlockDrop}
-        onCompositionDrop={onCompositionDrop}
-        onDeleteElement={onDeleteElement}
-        onCopyClip={onCopyClip}
-        onPasteClip={onPasteClip}
-        onDuplicateClip={onDuplicateClip}
-        canPasteClip={canPasteClip}
-        onSelectTimelineElement={onSelectTimelineElement}
-        timelineFooter={
-          captionEditMode ? (
-            <div className="border-t border-neutral-800/30 shrink-0" style={{ height: 60 }}>
-              <div className="flex items-center gap-1.5 px-2 py-0.5">
-                <span className="text-[9px] font-medium text-neutral-500 uppercase tracking-wider">
-                  Captions
-                </span>
-              </div>
-              <CaptionTimeline pixelsPerSecond={100} onSeek={seekCaptionTime} />
-            </div>
-          ) : undefined
-        }
-      />
+        </Dock.Panel>
+        {panels}
+      </Dock.Root>
     </div>
   );
 }

package/src/components/StudioHeader.dom.test.tsx

@@ -33,7 +33,7 @@ vi.mock("../contexts/StudioContext", () => ({
 
 vi.mock("../contexts/PanelLayoutContext", () => ({
   usePanelLayoutContext: () => ({
-    effectiveRightCollapsed: false,
+    rightCollapsed: false,
     setRightCollapsed: vi.fn(),
     setRightPanelTab: vi.fn(),
   }),

package/src/components/StudioHeader.test.ts

@@ -13,16 +13,4 @@ describe("shouldOpenInspector", () => {
   it("closes when the inspector is genuinely on screen", () => {
     expect(shouldOpenInspector(false, true)).toBe(false);
   });
-
-  it("opens when the window railed the panel away", () => {
-    // The regression this guards: the button used to branch on the raw
-    // rightCollapsed intent, which is still `false` while the window has the
-    // panel railed. That took the close branch, wrote rightCollapsed=true, and
-    // since that value is synced into the shareable Studio URL, a click that
-    // did nothing visible rewrote the link.
-    const userIntentIsOpen = false;
-    const windowRailedItAway = true;
-    expect(shouldOpenInspector(windowRailedItAway, true)).toBe(true);
-    expect(shouldOpenInspector(userIntentIsOpen, true)).toBe(false);
-  });
 });

package/src/components/StudioHeader.tsx

@@ -4,6 +4,7 @@ import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { Button, buttonBase, buttonSizes, buttonVariants, cn, Tooltip } from "./ui";
+import { Dock } from "./dock/Dock";
 
 export interface StudioHeaderProps {
   captureFrameHref: string;
@@ -16,7 +17,7 @@ export interface StudioHeaderProps {
   onExport?: () => void;
 }
 
-function HyperframesLogo() {
+export function HyperframesLogo() {
   // Full logo from logo-dark.svg (263×79): heygen label + gradient mark + hyperframes wordmark.
   // All fill="black" paths inverted to white for the dark header.
   const height = 28;
@@ -140,16 +141,15 @@ function HyperframesLogo() {
 /**
  * Does the header's Inspector button open the panel, or close it?
  *
- * Takes the EFFECTIVE collapse state, so a panel the window has railed away
- * counts as closed even though the user's stored intent still says open. The
- * argument name is the guard: passing raw intent here is the bug this exists
- * to keep out.
+ * The dock has no separate "railed by window width" state (it shrinks panels,
+ * never auto-hides the group), so `rightCollapsed` here is already the state
+ * that decides whether the panel is actually showing.
  */
 export function shouldOpenInspector(
-  effectiveRightCollapsed: boolean,
+  rightCollapsed: boolean,
   inspectorPanelActive: boolean,
 ): boolean {
-  return effectiveRightCollapsed || !inspectorPanelActive;
+  return rightCollapsed || !inspectorPanelActive;
 }
 
 // fallow-ignore-next-line complexity
@@ -164,11 +164,7 @@ export function StudioHeader({
   onExport,
 }: StudioHeaderProps) {
   const { projectId, renderQueue } = useStudioShellContext();
-  // effectiveRightCollapsed, not the raw intent: in the auto-railed state the
-  // intent is still "open" while the panel is hidden, so branching on intent
-  // made this button write rightCollapsed=true — and that value is synced into
-  // the shareable Studio URL, so a dead click would rewrite a link.
-  const { effectiveRightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
+  const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
   const isRendering = renderQueue.isRendering;
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
@@ -265,7 +261,7 @@ export function StudioHeader({
                 </svg>
               }
               onClick={() => {
-                if (shouldOpenInspector(effectiveRightCollapsed, inspectorPanelActive)) {
+                if (shouldOpenInspector(rightCollapsed, inspectorPanelActive)) {
                   trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
                   setRightPanelTab("design");
                   setRightCollapsed(false);
@@ -281,6 +277,7 @@ export function StudioHeader({
             </Button>
           </Tooltip>
         </div>
+        <Dock.WindowMenu />
         <Tooltip
           label={
             ffmpegMissing