@hyperframes/studio 0.8.52 → 0.8.53

package/src/components/StudioLeftPanels.tsx

@@ -0,0 +1,202 @@
+import { useCallback, type ReactNode } from "react";
+import { SourceEditor } from "./editor/SourceEditor";
+import { FileTree } from "./editor/FileTree";
+import { MediaPreview } from "./MediaPreview";
+import { AssetsTab } from "./sidebar/AssetsTab";
+import { BlocksTab, type BlockPreviewInfo } from "./sidebar/BlocksTab";
+import { CompositionsPanel } from "./sidebar/CompositionsPanel";
+import { SidebarLintButton } from "./sidebar/SidebarLintButton";
+import { Dock } from "./dock/Dock";
+import { useDockLayoutStore } from "./dock/dockLayoutStore";
+import { isMediaFile } from "../utils/mediaTypes";
+import { useStudioShellContext } from "../contexts/StudioContext";
+import { useFileManagerContext } from "../contexts/FileManagerContext";
+import { getPersistedRenderSettings } from "./renders/renderSettings";
+
+interface StudioLeftPanelsProps {
+  onSelectComposition: (comp: string) => void;
+  onAddBlock: (blockName: string) => void;
+  onPreviewBlock?: (preview: BlockPreviewInfo | null) => void;
+  onLint: () => void;
+  linting: boolean;
+  lintFindingCount?: number;
+  lintHasError?: boolean;
+  lintFindingsByFile?: Map<string, { count: number; messages: string[] }>;
+  onAddAssetToTimeline?: (path: string) => void;
+  onAddCompositionToTimeline?: (path: string) => void;
+}
+
+function PanelColumn({ footer, children }: { footer: ReactNode; children: ReactNode }) {
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-neutral-950">
+      <div className="flex min-h-0 flex-1 flex-col">{children}</div>
+      {footer}
+    </div>
+  );
+}
+
+// fallow-ignore-next-line complexity
+export function StudioLeftPanels({
+  onSelectComposition,
+  onAddBlock,
+  onPreviewBlock,
+  onLint,
+  linting,
+  lintFindingCount,
+  lintHasError,
+  lintFindingsByFile,
+  onAddAssetToTimeline,
+  onAddCompositionToTimeline,
+}: StudioLeftPanelsProps) {
+  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioShellContext();
+  const {
+    compositions,
+    assets,
+    editingFile,
+    fileTree,
+    revealSourceOffset,
+    handleFileSelect,
+    handleCreateFile,
+    handleCreateFolder,
+    handleDeleteFile,
+    handleRenameFile,
+    handleDuplicateFile,
+    handleMoveFile,
+    handleImportFiles,
+    handleContentChange,
+  } = useFileManagerContext();
+
+  const handleRenderComposition = useCallback(
+    async (comp: string) => {
+      // startRender refuses without an encoder and reports why as a row in the
+      // Renders panel, which may be closed or behind another tab: bring it up.
+      if (renderQueue.ffmpegMissing) {
+        useDockLayoutStore.getState().activatePanel("renders");
+        return;
+      }
+      await waitForPendingDomEditSaves();
+      const { format, quality, fps } = getPersistedRenderSettings();
+      await renderQueue.startRender({ composition: comp, format, quality, fps });
+    },
+    [renderQueue, waitForPendingDomEditSaves],
+  );
+
+  const importFiles = async (files: FileList, dir?: string) => {
+    await handleImportFiles(files, dir);
+  };
+  const lintButton = (
+    <SidebarLintButton
+      onLint={onLint}
+      linting={linting}
+      findingCount={lintFindingCount}
+      hasError={lintHasError}
+    />
+  );
+
+  return (
+    <>
+      <Dock.Panel id="compositions">
+        <PanelColumn footer={lintButton}>
+          <CompositionsPanel
+            projectId={projectId}
+            compositions={compositions}
+            activeComposition={editingFile?.path ?? null}
+            onSelect={onSelectComposition}
+            onAddToTimeline={onAddCompositionToTimeline}
+            onRenderComposition={handleRenderComposition}
+            isRendering={renderQueue.isRendering}
+            lintFindingsByFile={lintFindingsByFile}
+          />
+        </PanelColumn>
+      </Dock.Panel>
+      <Dock.Panel id="assets">
+        <PanelColumn footer={lintButton}>
+          <AssetsTab
+            projectId={projectId}
+            assets={assets}
+            onImport={importFiles}
+            onDelete={handleDeleteFile}
+            onRename={handleRenameFile}
+            onAddAssetToTimeline={onAddAssetToTimeline}
+          />
+        </PanelColumn>
+      </Dock.Panel>
+      <Dock.Panel id="code">
+        <PanelColumn footer={lintButton}>
+          <div className="flex min-h-0 flex-1">
+            {fileTree.length > 0 && (
+              <div className="w-[160px] shrink-0 border-r border-neutral-800 overflow-y-auto">
+                <FileTree
+                  files={fileTree}
+                  activeFile={editingFile?.path ?? null}
+                  onSelectFile={handleFileSelect}
+                  onCreateFile={handleCreateFile}
+                  onCreateFolder={handleCreateFolder}
+                  onDeleteFile={handleDeleteFile}
+                  onRenameFile={handleRenameFile}
+                  onDuplicateFile={handleDuplicateFile}
+                  onMoveFile={handleMoveFile}
+                  onImportFiles={importFiles}
+                  lintFindingsByFile={lintFindingsByFile}
+                />
+              </div>
+            )}
+            <div className="flex-1 overflow-hidden min-w-0">
+              <CodeBody
+                projectId={projectId}
+                editingFile={editingFile}
+                revealOffset={revealSourceOffset}
+                onChange={handleContentChange}
+              />
+            </div>
+          </div>
+        </PanelColumn>
+      </Dock.Panel>
+      <Dock.Panel id="catalog">
+        <PanelColumn footer={lintButton}>
+          <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
+        </PanelColumn>
+      </Dock.Panel>
+    </>
+  );
+}
+
+function CodeBody({
+  projectId,
+  editingFile,
+  revealOffset,
+  onChange,
+}: {
+  projectId: string;
+  editingFile: { path: string; content: string | null } | null;
+  revealOffset: React.ComponentProps<typeof SourceEditor>["revealOffset"];
+  onChange: (content: string) => void;
+}) {
+  if (!editingFile) {
+    return (
+      <div className="flex items-center justify-center h-full text-neutral-600 text-sm">
+        Select a file to edit
+      </div>
+    );
+  }
+  if (isMediaFile(editingFile.path)) {
+    return <MediaPreview projectId={projectId} filePath={editingFile.path} />;
+  }
+  // Never mount the editor on unloaded content: a keystroke would autosave an
+  // empty document over the real file.
+  if (editingFile.content == null) {
+    return (
+      <div className="flex h-full items-center justify-center text-[11px] text-neutral-600">
+        Loading {editingFile.path}…
+      </div>
+    );
+  }
+  return (
+    <SourceEditor
+      content={editingFile.content}
+      filePath={editingFile.path}
+      onChange={onChange}
+      revealOffset={revealOffset}
+    />
+  );
+}

package/src/components/{StudioRightPanel.tsx → StudioRightPanels.tsx}

@@ -1,7 +1,6 @@
 import { useCallback } from "react";
-import type { StudioRightPanelProps } from "./StudioRightPanel.types";
+import type { StudioRightPanelsProps } from "./StudioRightPanels.types";
 
-export type { StudioRightPanelProps };
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
@@ -9,14 +8,18 @@ import { BlockParamsPanel } from "./editor/BlockParamsPanel";
 import { RenderQueuePanel } from "./renders/RenderQueuePanel";
 import { SlideshowPanel } from "./panels/SlideshowPanel";
 import { VariablesPanel } from "./panels/VariablesPanel";
-import { RightPanelTabs, type RightPanelTabDescriptor } from "./RightPanelTabs";
+import { Dock } from "./dock/Dock";
+import { useDockLayoutStore } from "./dock/dockLayoutStore";
 import type { RenderJob } from "./renders/useRenderQueue";
-import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
 import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
 import { useSlideshowTabState } from "../hooks/useSlideshowTabState";
+import {
+  useBlockParamsDismissal,
+  useCaptionDesignFocus,
+  useSlideshowDockPanel,
+} from "../hooks/useRightPanelIntents";
 import { DesignPanelPromoteProvider } from "./DesignPanelPromoteProvider";
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
-import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
 import { usePlayerStore } from "../player";
@@ -27,14 +30,13 @@ import {
 } from "./studioColorGradingScope";
 import { timelineKeysForSelections } from "../utils/studioHelpers";
 import { canHideSelections } from "../utils/timelineInspector";
-import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 import { useRemoveBackground } from "../hooks/useRemoveBackground";
 
 // fallow-ignore-next-line complexity
-export function StudioRightPanel({
-  designPanelActive,
+export function StudioRightPanels({
   activeBlockParams,
   onCloseBlockParams,
+  onDismissBlockParams,
   recordingState,
   recordingDuration,
   onToggleRecording,
@@ -46,20 +48,7 @@ export function StudioRightPanel({
   onToggleElementHidden,
   onAutoGroupCarveSources,
   onAddMediaOverlay,
-}: StudioRightPanelProps) {
-  const {
-    rightWidth,
-    adjustPanelWidth,
-    rightPanelTab,
-    setRightPanelTab,
-    rightInspectorPanes,
-    toggleRightInspectorPane,
-    setExclusiveRightInspectorPane,
-    handlePanelResizeStart,
-    handlePanelResizeMove,
-    handlePanelResizeEnd,
-  } = usePanelLayoutContext();
-
+}: StudioRightPanelsProps) {
   const {
     previewIframeRef,
     projectId,
@@ -154,41 +143,20 @@ export function StudioRightPanel({
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes",
   });
 
-  const {
-    layersPanePercent,
-    splitContainerRef,
-    handleInspectorSplitResizeStart,
-    handleInspectorSplitResizeMove,
-    handleInspectorSplitResizeEnd,
-  } = useInspectorSplitResize();
-
   const renderJobs = renderQueue.jobs as RenderJob[];
-  const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-
+  const slideshowVisible = useDockLayoutStore((state) => state.visiblePanels.has("slideshow"));
   const { isSlideshowComposition, slideshowScenes } = useSlideshowTabState({
     editingFileContent: editingFile?.content,
     previewIframeRef,
     refreshKey,
-    rightPanelTab,
-    setRightPanelTab,
+    slideshowVisible,
   });
-  const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
-  const layersPaneOpen = inspectorTabActive && rightInspectorPanes.layers;
-
-  const handleInspectorPaneButtonClick = (pane: "design" | "layers") => {
-    if (!inspectorTabActive) {
-      setRightPanelTab(pane);
-      return;
-    }
-    // Flat inspector: Layers always renders full-height by itself (see the
-    // render branch below), so the two panes are mutually exclusive here —
-    // otherwise both tabs could show "active" while only one actually shows.
-    if (STUDIO_FLAT_INSPECTOR_ENABLED) {
-      setExclusiveRightInspectorPane(pane);
-      return;
-    }
-    toggleRightInspectorPane(pane);
-  };
+  useSlideshowDockPanel(isSlideshowComposition);
+  useBlockParamsDismissal({
+    hasBlockParams: activeBlockParams != null,
+    onDismiss: onDismissBlockParams,
+  });
+  useCaptionDesignFocus(captionEditMode);
 
   const handleApplyColorGradingScope = useCallback(
     async (scope: ColorGradingScope, value: string | null) =>
@@ -337,165 +305,48 @@ export function StudioRightPanel({
     </DesignPanelPromoteProvider>
   );
 
-  const renderQueuePanel = <RenderQueuePanel />;
-
-  // Slideshow appears only for a slideshow composition, so the strip is built
-  // rather than written out: a tab that is not in this list is not reachable by
-  // an arrow key either.
-  const inspectorTabs: RightPanelTabDescriptor[] = [
-    {
-      id: "design",
-      label: "Design",
-      tooltip: "Element styles and properties",
-      active: designPaneOpen,
-      onSelect: () => handleInspectorPaneButtonClick("design"),
-    },
-    {
-      id: "layers",
-      label: "Layers",
-      tooltip: "Composition layer stack",
-      active: layersPaneOpen,
-      onSelect: () => handleInspectorPaneButtonClick("layers"),
-    },
-    {
-      id: "renders",
-      label: renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders",
-      tooltip: "Render queue and exports",
-      active: rightPanelTab === "renders",
-      onSelect: () => setRightPanelTab("renders"),
-    },
-    ...(isSlideshowComposition
-      ? [
-          {
-            id: "slideshow",
-            label: "Slideshow",
-            tooltip: "Slideshow branching editor",
-            active: rightPanelTab === "slideshow",
-            onSelect: () => setRightPanelTab("slideshow"),
-          },
-        ]
-      : []),
-    {
-      id: "variables",
-      label: "Variables",
-      tooltip: "Template variables — declare, preview with values",
-      active: rightPanelTab === "variables",
-      onSelect: () => setRightPanelTab("variables"),
-    },
-  ];
+  let designBody = propertyPanel;
+  if (captionEditMode) {
+    designBody = <CaptionPropertyPanel iframeRef={previewIframeRef} />;
+  } else if (activeBlockParams) {
+    designBody = (
+      <BlockParamsPanel
+        blockName={activeBlockParams.blockName}
+        blockTitle={activeBlockParams.blockTitle}
+        params={activeBlockParams.params}
+        compositionPath={activeBlockParams.compositionPath}
+        onClose={onCloseBlockParams ?? (() => {})}
+      />
+    );
+  }
 
   return (
     <>
-      {/* Vertical resize divider: 3px visible seam, 13px hit zone via the inner div. */}
-      <div
-        role="separator"
-        aria-label="Resize inspector panel"
-        aria-orientation="vertical"
-        tabIndex={0}
-        className="group relative w-[3px] shrink-0 cursor-col-resize outline-hidden focus-visible:bg-studio-accent/20"
-        style={{ touchAction: "none" }}
-        onPointerDown={(e) => handlePanelResizeStart("right", e)}
-        onPointerMove={handlePanelResizeMove}
-        onPointerUp={handlePanelResizeEnd}
-        onPointerCancel={handlePanelResizeEnd}
-        onKeyDown={(e) => {
-          if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
-          e.preventDefault();
-          // Panel is right-anchored: ArrowLeft grows it, ArrowRight shrinks it.
-          const delta = e.key === "ArrowLeft" ? 16 : -16;
-          adjustPanelWidth("right", delta);
-        }}
-      >
-        {/* Asymmetric hit zone: 8px into the preview's p-2 gutter (the only dead
-            space), the 3px seam, 2px into the card. Stops short of the 24px WCAG
-            2.5.8 target because the next pixel each way is live. */}
-        <div className="absolute inset-y-0 left-[-8px] w-[13px]" />
-        {/* Visible hairline */}
-        <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
-      </div>
-      <div
-        className="flex min-w-0 shrink-0 flex-col overflow-hidden rounded-lg border border-neutral-800 bg-neutral-950"
-        style={{ width: rightWidth }}
+      <Dock.Panel id="design">{designBody}</Dock.Panel>
+      <Dock.Panel id="layers">
+        <LayersPanel />
+      </Dock.Panel>
+      <Dock.Panel
+        id="renders"
+        title={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : undefined}
       >
-        {captionEditMode ? (
-          <CaptionPropertyPanel iframeRef={previewIframeRef} />
-        ) : (
-          <>
-            <RightPanelTabs tabs={inspectorTabs} activateOnFocus={STUDIO_FLAT_INSPECTOR_ENABLED} />
-            <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
-              {rightPanelTab === "block-params" && activeBlockParams ? (
-                <BlockParamsPanel
-                  blockName={activeBlockParams.blockName}
-                  blockTitle={activeBlockParams.blockTitle}
-                  params={activeBlockParams.params}
-                  compositionPath={activeBlockParams.compositionPath}
-                  onClose={onCloseBlockParams ?? (() => {})}
-                />
-              ) : rightPanelTab === "slideshow" && isSlideshowComposition ? (
-                <SlideshowPanel
-                  scenes={slideshowScenes}
-                  onPersist={onPersistSlideshow}
-                  onPersistNotes={onPersistSlideshowNotes}
-                />
-              ) : rightPanelTab === "variables" ? (
-                <VariablesPanel
-                  sdkSession={sdkSession}
-                  publishSdkSession={publishSdkSession}
-                  reloadPreview={reloadPreview}
-                  recordEdit={recordEdit}
-                />
-              ) : layersPaneOpen && designPaneOpen && !STUDIO_FLAT_INSPECTOR_ENABLED ? (
-                <div ref={splitContainerRef} className="flex h-full min-h-0 min-w-0 flex-col">
-                  <div
-                    className="min-h-[120px] overflow-hidden"
-                    style={{ flexBasis: `${layersPanePercent}%`, flexShrink: 0 }}
-                  >
-                    <LayersPanel />
-                  </div>
-                  <div
-                    role="separator"
-                    aria-label="Resize Layers and Design panes"
-                    aria-orientation="horizontal"
-                    className="group flex h-2 shrink-0 cursor-row-resize items-center justify-center border-y border-neutral-800 bg-neutral-900"
-                    style={{ touchAction: "none" }}
-                    onPointerDown={handleInspectorSplitResizeStart}
-                    onPointerMove={handleInspectorSplitResizeMove}
-                    onPointerUp={handleInspectorSplitResizeEnd}
-                    onPointerCancel={handleInspectorSplitResizeEnd}
-                  >
-                    <div className="h-px w-10 rounded-full bg-white/12 transition-colors group-hover:bg-white/24 group-active:bg-studio-accent/70" />
-                  </div>
-                  <div className="min-h-0 flex-1 overflow-hidden">{propertyPanel}</div>
-                </div>
-              ) : layersPaneOpen ? (
-                <LayersPanel />
-              ) : designPaneOpen ? (
-                propertyPanel
-              ) : inspectorTabActive ? (
-                // Inspector tab selected but no pane can render (panes toggled
-                // off, or inspector inactive during playback/recording): show an
-                // explanation instead of silently rendering the render queue
-                // under a highlighted inspector tab.
-                <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
-                  <p className="text-xs text-neutral-500">
-                    Inspector is unavailable right now — select the Design or Layers pane above, or
-                    pause playback/recording to inspect elements.
-                  </p>
-                  <button
-                    type="button"
-                    onClick={() => setRightPanelTab("renders")}
-                    className="h-7 rounded-md border border-neutral-800 px-3 text-[11px] font-medium text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200 active:scale-[0.98]"
-                  >
-                    Show Renders
-                  </button>
-                </div>
-              ) : (
-                renderQueuePanel
-              )}
-            </div>
-          </>
-        )}
-      </div>
+        <RenderQueuePanel />
+      </Dock.Panel>
+      <Dock.Panel id="variables">
+        <VariablesPanel
+          sdkSession={sdkSession}
+          publishSdkSession={publishSdkSession}
+          reloadPreview={reloadPreview}
+          recordEdit={recordEdit}
+        />
+      </Dock.Panel>
+      <Dock.Panel id="slideshow">
+        <SlideshowPanel
+          scenes={slideshowScenes}
+          onPersist={onPersistSlideshow}
+          onPersistNotes={onPersistSlideshowNotes}
+        />
+      </Dock.Panel>
     </>
   );
 }

package/src/components/{StudioRightPanel.types.ts → StudioRightPanels.types.ts}

@@ -1,5 +1,5 @@
 /**
- * Props for StudioRightPanel.
+ * Props for StudioRightPanels.
  *
  * Kept beside the component rather than inside it: the panel is at the file-size
  * cap, and this block is the part that changes least, so moving it keeps the
@@ -14,8 +14,7 @@ import type { UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
 import type { AddMediaOverlayHandler } from "./editor/propertyPanelTypes";
 import type { ToggleHiddenHandler } from "../utils/studioHelpers";
 
-export interface StudioRightPanelProps extends StudioEditPersistenceProps {
-  designPanelActive: boolean;
+export interface StudioRightPanelsProps extends StudioEditPersistenceProps {
   activeBlockParams?: {
     blockName: string;
     blockTitle: string;
@@ -23,6 +22,8 @@ export interface StudioRightPanelProps extends StudioEditPersistenceProps {
     compositionPath: string;
   } | null;
   onCloseBlockParams?: () => void;
+  /** Drops the block-params view without touching the dock (selection or leaving Design). */
+  onDismissBlockParams: () => void;
   recordingState?: "idle" | "recording" | "preview";
   recordingDuration?: number;
   onToggleRecording?: () => void;

package/src/components/dock/Dock.test.tsx

@@ -54,7 +54,10 @@ const applySideMinimums = vi.mocked(dockLayout.applySideMinimums);
 
 let root: Root | null = null;
 
-function mount(projectId: string | null) {
+function mount(
+  projectId: string | null,
+  titles: Partial<Record<(typeof PANEL_IDS)[number], string>> = {},
+) {
   const host = document.createElement("div");
   document.body.append(host);
   root = createRoot(host);
@@ -62,7 +65,7 @@ function mount(projectId: string | null) {
     root?.render(
       <Dock.Root projectId={projectId}>
         {PANEL_IDS.map((id) => (
-          <Dock.Panel key={id} id={id}>
+          <Dock.Panel key={id} id={id} title={titles[id]}>
             <div data-testid={`content-${id}`}>{id}</div>
           </Dock.Panel>
         ))}
@@ -142,6 +145,17 @@ describe("Dock on React 19", () => {
     expect(host.querySelector('[data-testid="content-renders"]')).not.toBeNull();
   });
 
+  it("keeps a panel's custom title when it is closed and reopened", async () => {
+    const host = mount("p1", { renders: "Renders (2)" });
+    expect(host.textContent).toContain("Renders (2)");
+    act(() => useDockLayoutStore.getState().closePanel("renders"));
+    await act(async () => {
+      useDockLayoutStore.getState().togglePanel("renders");
+      await Promise.resolve();
+    });
+    expect(host.textContent).toContain("Renders (2)");
+  });
+
   it("reopens a closed panel as a tab of its zone's group, not a new group", () => {
     mount("p1");
     act(() => useDockLayoutStore.getState().closePanel("compositions"));

package/src/components/dock/Dock.tsx

@@ -69,8 +69,17 @@ function snapshot(api: DockviewApi): DockSnapshot {
     openPanels.add(panel.id);
     if (panel.api.isVisible && panel.group.api.isVisible) visiblePanels.add(panel.id);
   }
+  const groupActivePanels = api.groups.flatMap((group) => {
+    const id = group.activePanel?.id;
+    return isPanelId(id) ? [id] : [];
+  });
   const active = api.activePanel?.id;
-  return { openPanels, visiblePanels, activePanel: isPanelId(active) ? active : null };
+  return {
+    openPanels,
+    visiblePanels,
+    activePanel: isPanelId(active) ? active : null,
+    groupActivePanels,
+  };
 }
 
 function createController(api: DockviewApi): DockController {
@@ -206,10 +215,11 @@ function Panel({ id, title, children }: { id: PanelId; title?: string; children:
   const element = useSlots().slots[id];
   const visible = useDockLayoutStore((state) => state.visiblePanels.has(id));
   const controller = useDockLayoutStore((state) => state.controller);
+  const open = useDockLayoutStore((state) => state.openPanels.has(id));
   const label = title ?? PANEL_DEFINITIONS[id].title;
   useEffect(() => {
-    controller?.setTitle(id, label);
-  }, [controller, id, label]);
+    if (open) controller?.setTitle(id, label);
+  }, [controller, id, label, open]);
   const definition: PanelDefinition = PANEL_DEFINITIONS[id];
   const shown = visible || definition.keepMounted;
   return element && shown ? createPortal(children, element) : null;

package/src/components/dock/dockLayoutStore.test.ts

@@ -0,0 +1,28 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import { useDockLayoutStore } from "./dockLayoutStore";
+import type { PanelId } from "./panelRegistry";
+
+const snapshot = (groupActivePanels: PanelId[], activePanel: PanelId | null = null) => ({
+  openPanels: new Set<PanelId>(["design", "renders", "compositions"]),
+  visiblePanels: new Set<PanelId>(groupActivePanels),
+  activePanel,
+  groupActivePanels,
+});
+
+describe("dock store sync", () => {
+  beforeEach(() => useDockLayoutStore.setState({ lastActive: {} }));
+
+  it("records what every side group shows, not only the globally active panel", () => {
+    useDockLayoutStore.getState().sync(snapshot(["compositions", "renders"], "compositions"));
+    expect(useDockLayoutStore.getState().lastActive).toEqual({
+      left: "compositions",
+      right: "renders",
+    });
+  });
+
+  it("forgets the previous dock's memory on detach", () => {
+    useDockLayoutStore.getState().sync(snapshot(["renders"], "renders"));
+    useDockLayoutStore.getState().detach();
+    expect(useDockLayoutStore.getState().lastActive).toEqual({});
+  });
+});