@hyperframes/studio 0.8.50 → 0.8.53-desktop.0

package/src/hooks/useRightPanelIntents.ts

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useDockLayoutStore, visiblePanelInZone } from "../components/dock/dockLayoutStore";
+
+/** Opens the Slideshow panel when the file becomes a slideshow and closes it when it stops being one; a user's own close, and a restored layout's placement, stick. */
+export function useSlideshowDockPanel(isSlideshowComposition: boolean) {
+  const controller = useDockLayoutStore((state) => state.controller);
+  const wasSlideshow = useRef(false);
+  useEffect(() => {
+    if (!controller) return;
+    const inDock = useDockLayoutStore.getState().openPanels.has("slideshow");
+    if (isSlideshowComposition && !inDock) controller.open("slideshow");
+    if (!isSlideshowComposition && wasSlideshow.current && inDock) controller.close("slideshow");
+    wasSlideshow.current = isSlideshowComposition;
+  }, [isSlideshowComposition, controller]);
+}
+
+/** Block params replace the Design body until Design stops showing; picking another tab dismisses them elsewhere. */
+export function useBlockParamsDismissal({
+  hasBlockParams,
+  onDismiss,
+}: {
+  hasBlockParams: boolean;
+  onDismiss: () => void;
+}) {
+  const designVisible = useDockLayoutStore((state) => state.visiblePanels.has("design"));
+  useEffect(() => {
+    if (hasBlockParams && !designVisible) onDismiss();
+  }, [hasBlockParams, designVisible, onDismiss]);
+}
+
+/** Wraps a tab setter so any tab other than block-params first dismisses the block-params view. */
+export function useDismissingTabSetter<Tab extends string>(
+  setTab: (tab: Tab) => void,
+  dismissBlockParams: () => void,
+) {
+  return useCallback(
+    (tab: Tab) => {
+      if (tab !== "block-params") dismissBlockParams();
+      setTab(tab);
+    },
+    [setTab, dismissBlockParams],
+  );
+}
+
+/** Caption edit mode owns the Design panel: whenever the right column shows something else, bring Design back. */
+export function useCaptionDesignFocus(captionEditMode: boolean) {
+  const designVisible = useDockLayoutStore((state) => state.visiblePanels.has("design"));
+  const rightShown = useDockLayoutStore(
+    (state) => visiblePanelInZone("right", state.lastActive, state.visiblePanels) !== null,
+  );
+  useEffect(() => {
+    if (captionEditMode && rightShown && !designVisible) {
+      useDockLayoutStore.getState().activatePanel("design");
+    }
+  }, [captionEditMode, rightShown, designVisible]);
+}
+
+/** The right-column panel the user last focused, whether or not the column is currently showing. */
+export function useRightPanelIntent() {
+  return useDockLayoutStore((state) =>
+    visiblePanelInZone("right", state.lastActive, state.openPanels),
+  );
+}

package/src/hooks/useSdkSession.lifecycle.test.tsx

@@ -164,17 +164,62 @@ describe("useSdkSession unavailable telemetry", () => {
 
   // Every cutover chokepoint silently takes the server path when there is no
   // session, and the shadow never runs either — so a missing session is a total,
-  // otherwise-invisible SDK bypass. These three exits are its only origin.
-  it("reports an unreadable composition", async () => {
+  // otherwise-invisible SDK bypass. These exits are its only origin.
+  //
+  // `stage: read` carries a reason because it was the largest remaining class
+  // and a single opaque string: 56 users hit it in a 7-day window and never
+  // landed one successful SDK edit between them, with no way to tell a genuinely
+  // absent file from a request that never reached one.
+  it("reports the HTTP status when the read fails", async () => {
     vi.stubGlobal(
       "fetch",
-      vi.fn(async () => ({ ok: false, json: async () => ({}) }) as Response),
+      vi.fn(async () => ({ ok: false, status: 404, json: async () => ({}) }) as Response),
     );
     const root = createRoot(document.createElement("div"));
     await act(async () => root.render(<Probe projectId="project-a" />));
     await flushAsyncEffects();
 
-    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", { stage: "read" });
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "http_error",
+      status: 404,
+    });
+    await act(async () => root.unmount());
+  });
+
+  it("separates an unexpected response shape from a failed request", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({}) }) as Response),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "missing_content",
+    });
+    await act(async () => root.unmount());
+  });
+
+  // `optional=1` answers a file that is not on disk with 200 + an empty string,
+  // so this is what "the composition genuinely is not there" looks like on the
+  // wire — previously indistinguishable from a broken request. The shim and a
+  // real 0-byte file are the same response, hence the name.
+  it("separates a file that is not on disk", async () => {
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(async () => ({ ok: true, json: async () => ({ content: "" }) }) as Response),
+    );
+    const root = createRoot(document.createElement("div"));
+    await act(async () => root.render(<Probe projectId="project-a" />));
+    await flushAsyncEffects();
+
+    expect(trackMock).toHaveBeenCalledWith("sdk_session_unavailable", {
+      stage: "read",
+      reason: "absent_or_empty",
+    });
     await act(async () => root.unmount());
   });
 

package/src/hooks/useSdkSession.ts

@@ -7,25 +7,53 @@ import type { PublishSdkSession } from "../utils/sdkCutover";
 import { addExternalFileReloadListener } from "./externalFileReloadBus";
 
 /**
- * Read a project file's content, or undefined on a non-2xx (optional read).
- * Replaces the removed SDK http adapter's `read()` — the only thing Studio used
- * it for (Studio is the sole writer, so the adapter's write path was dead).
+ * Why an optional project-file read produced no usable content. `stage: "read"`
+ * was a single opaque reason covering all of these, which made the largest
+ * remaining class of SDK-session failures undiagnosable: 56 users in a 7-day
+ * window hit it and, between them, never landed a single successful SDK edit.
+ * Knowing which branch fired is the difference between "the file legitimately
+ * is not there" and "the request never reached the file".
+ *
+ * Every reason lives in this union so the full surface is readable from one
+ * place — `absent_or_empty` included, even though it is a 2xx.
+ */
+type ProjectFileReadFailure =
+  | { ok: false; reason: "unsafe_path" }
+  | { ok: false; reason: "http_error"; status: number }
+  | { ok: false; reason: "missing_content" }
+  | { ok: false; reason: "absent_or_empty" };
+
+type ProjectFileReadResult = { ok: true; content: string } | ProjectFileReadFailure;
+
+/**
+ * Read a project file's content (optional read — a missing file is not an
+ * error). Replaces the removed SDK http adapter's `read()` — the only thing
+ * Studio used it for (Studio is the sole writer, so the adapter's write path
+ * was dead).
  */
 async function readProjectFileOptional(
   projectId: string,
   path: string,
-): Promise<string | undefined> {
+): Promise<ProjectFileReadResult> {
   // Reject traversal / NUL before building the request URL — `path` is a
   // user-influenced composition path (mirrors the guard in timelineEditingHelpers,
   // and closes the CodeQL client-side-request-forgery flag). encodeURIComponent
   // already confines both values to single segments of this same-origin URL.
-  if (path.includes("\0") || path.includes("..")) return undefined;
+  if (path.includes("\0") || path.includes("..")) return { ok: false, reason: "unsafe_path" };
   const res = await fetch(
     `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
   );
-  if (!res.ok) return undefined;
+  if (!res.ok) return { ok: false, reason: "http_error", status: res.status };
   const data = (await res.json()) as { content?: string };
-  return typeof data.content === "string" ? data.content : undefined;
+  // `optional=1` answers a missing file with 200 + `content: ""`, so a
+  // non-string here means a response shape we did not expect, not absence.
+  if (typeof data.content !== "string") return { ok: false, reason: "missing_content" };
+  // An empty body parses into a session with no elements, which declines every
+  // edit wholesale — not a session worth opening. The absent-file shim and a
+  // genuinely 0-byte file are the same 200 on the wire and cannot be told
+  // apart here, hence the name; for a composition it is always the former.
+  if (data.content === "") return { ok: false, reason: "absent_or_empty" };
+  return { ok: true, content: data.content };
 }
 
 /**
@@ -180,16 +208,21 @@ export function useSdkSession(
     };
 
     readProjectFileOptional(projectId, activeCompPath)
-      .then(async (content) => {
+      .then(async (read) => {
         if (cancelled) return;
-        if (typeof content !== "string") {
+        if (!read.ok) {
           // No SDK session follows, so EVERY cutover chokepoint below takes the
           // server path and emits nothing — the shadow never runs either. This
           // is the only place a missing session can originate, so a broken read
           // would otherwise be a silent, total SDK bypass.
-          trackStudioEvent("sdk_session_unavailable", { stage: "read" });
+          trackStudioEvent("sdk_session_unavailable", {
+            stage: "read",
+            reason: read.reason,
+            ...(read.reason === "http_error" ? { status: read.status } : {}),
+          });
           return;
         }
+        const content = read.content;
         // No persist queue: Studio's writeProjectFile (via sdkCutover's
         // persistSdkSerialize) is the SINGLE writer. Wiring the SDK persist
         // queue too would double-write the file (queue auto-writes on every

package/src/hooks/useServerConnection.hashProject.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useServerConnection } from "./useServerConnection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const captured: { projectId: string | null } = { projectId: null };
+
+function Probe() {
+  captured.projectId = useServerConnection().projectId;
+  return null;
+}
+
+async function flush(): Promise<void> {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+/**
+ * The hash project id outlives the project it names — a renamed folder, or a
+ * bookmark from a project that is gone. It used to be trusted unconditionally,
+ * so every later /api/projects/<id>/... request 404'd for the life of the tab,
+ * including the composition read that opens the SDK session. Telemetry after
+ * the read-reason split: 120 http_error/404 reads across 5 users in 24h.
+ */
+function stubFetch(projectRoute: { status: number } | "reject") {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string) => {
+      if (url === "/api/projects") {
+        return { ok: true, json: async () => ({ projects: [{ id: "real-project" }] }) } as Response;
+      }
+      if (projectRoute === "reject") throw new TypeError("Failed to fetch");
+      return { ok: projectRoute.status === 200, status: projectRoute.status } as Response;
+    }),
+  );
+}
+
+async function renderWithHash(hash: string) {
+  window.location.hash = hash;
+  const root = createRoot(document.createElement("div"));
+  await act(async () => root.render(<Probe />));
+  await flush();
+  return root;
+}
+
+describe("useServerConnection hash project id", () => {
+  beforeEach(() => {
+    captured.projectId = null;
+    window.location.hash = "";
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps a hash id the server can resolve", async () => {
+    stubFetch({ status: 200 });
+    const root = await renderWithHash("#project/stale-or-not");
+
+    expect(captured.projectId).toBe("stale-or-not");
+    await act(async () => root.unmount());
+  });
+
+  it("falls back to the first project when the hash id is gone", async () => {
+    stubFetch({ status: 404 });
+    const root = await renderWithHash("#project/deleted-project");
+
+    expect(captured.projectId).toBe("real-project");
+    expect(window.location.hash).toContain("real-project");
+    await act(async () => root.unmount());
+  });
+
+  // The important one: a blip must not rewrite the user's hash out from under a
+  // project that is actually fine. Only a definite 404 is "missing".
+  it("keeps the hash id when the check itself fails", async () => {
+    stubFetch("reject");
+    const root = await renderWithHash("#project/unreachable-check");
+
+    expect(captured.projectId).toBe("unreachable-check");
+    await act(async () => root.unmount());
+  });
+
+  it("keeps the hash id on a non-404 error status", async () => {
+    stubFetch({ status: 500 });
+    const root = await renderWithHash("#project/server-erroring");
+
+    expect(captured.projectId).toBe("server-erroring");
+    await act(async () => root.unmount());
+  });
+});

package/src/hooks/useServerConnection.ts

@@ -18,6 +18,26 @@ interface ServerConnectionState {
  * Polls every 2 s until the server responds, then transitions automatically.
  * Cleans up pending timers on unmount so it is safe under React StrictMode.
  */
+/**
+ * Whether a hash-supplied project id still names something the server can
+ * resolve. Three answers, not two: a failed request must NOT be read as
+ * "missing", or one network blip would discard a perfectly good deep link.
+ *
+ * Resolved through `/api/projects/:id`, which calls the same
+ * `adapter.resolveProject` the file routes use. A match against the
+ * `/api/projects` list would be wrong twice over: that list omits session ids
+ * (which resolve fine) and skips project dirs without an `index.html`.
+ */
+async function resolveHashProject(id: string): Promise<"ok" | "missing" | "unknown"> {
+  try {
+    const res = await fetch(`/api/projects/${encodeURIComponent(id)}`);
+    if (res.ok) return "ok";
+    return res.status === 404 ? "missing" : "unknown";
+  } catch {
+    return "unknown";
+  }
+}
+
 export function useServerConnection(): ServerConnectionState {
   const [projectId, setProjectId] = useState<string | null>(null);
   const [resolving, setResolving] = useState(true);
@@ -39,21 +59,34 @@ export function useServerConnection(): ServerConnectionState {
     function tryConnect() {
       fetch("/api/projects")
         .then((r) => r.json())
-        .then((data) => {
+        .then(async (data) => {
           if (cancelled) return;
+          // A hash project id outlives the project it names — a renamed folder,
+          // or a bookmark from a project that is gone. Trusting it blindly made
+          // every later /api/projects/<id>/... request 404 for the life of the
+          // tab, including the composition read that opens the SDK session, so
+          // every edit fell back to the server path with nothing to show why.
+          // Telemetry after the read-reason split: 120 http_error/404 reads
+          // across 5 users in 24h, ~24 each, never recovering.
           if (hashProjectId) {
-            setProjectId(hashProjectId);
-            setWaitingForServer(false);
-          } else {
-            const first = (data.projects ?? [])[0];
-            if (first) {
-              setProjectId(first.id);
+            const state = await resolveHashProject(hashProjectId);
+            if (cancelled) return;
+            // "unknown" keeps the old behaviour: a transient failure must not
+            // rewrite the user's hash out from under a valid project.
+            if (state !== "missing") {
+              setProjectId(hashProjectId);
               setWaitingForServer(false);
-              window.location.hash = buildProjectHash(first.id);
-            } else {
-              scheduleRetry();
+              return;
             }
           }
+          const first = (data.projects ?? [])[0];
+          if (first) {
+            setProjectId(first.id);
+            setWaitingForServer(false);
+            window.location.hash = buildProjectHash(first.id);
+          } else {
+            scheduleRetry();
+          }
         })
         .catch(() => {
           if (!cancelled) scheduleRetry();

package/src/hooks/useSlideshowTabState.test.ts

@@ -4,7 +4,6 @@ import React, { act } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
 import { useSlideshowTabState } from "./useSlideshowTabState";
-import type { RightPanelTab } from "../utils/studioHelpers";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -15,14 +14,10 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function renderHook(params: {
-  editingFileContent: string | null | undefined;
-  rightPanelTab: RightPanelTab;
-}) {
+function renderHook(params: { editingFileContent: string | null | undefined }) {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
-  const setRightPanelTabCalls: RightPanelTab[] = [];
   let current: ReturnType<typeof useSlideshowTabState> | null = null;
 
   function Harness() {
@@ -30,8 +25,7 @@ function renderHook(params: {
       editingFileContent: params.editingFileContent,
       previewIframeRef: { current: null },
       refreshKey: 0,
-      rightPanelTab: params.rightPanelTab,
-      setRightPanelTab: (tab) => setRightPanelTabCalls.push(tab),
+      slideshowVisible: false,
     });
     return null;
   }
@@ -45,52 +39,36 @@ function renderHook(params: {
       if (!current) throw new Error("useSlideshowTabState did not render");
       return current;
     },
-    setRightPanelTabCalls,
     unmount: () => act(() => root.unmount()),
   };
 }
 
+// Whether "slideshow" stays the active dock tab across a file switch is
+// StudioRightPanels' own effect now (it opens/closes the dock panel), not
+// this hook's job — this only derives the two values that effect reads.
 describe("useSlideshowTabState", () => {
   it("detects a slideshow composition via the JSON island", () => {
-    const harness = renderHook({ editingFileContent: SLIDESHOW_HTML, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: SLIDESHOW_HTML });
     expect(harness.getState().isSlideshowComposition).toBe(true);
     harness.unmount();
   });
 
   it("reports false for a plain (non-slideshow) composition", () => {
-    const harness = renderHook({ editingFileContent: PLAIN_HTML, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: PLAIN_HTML });
     expect(harness.getState().isSlideshowComposition).toBe(false);
     harness.unmount();
   });
 
   it("reports false when there is no editing file yet", () => {
-    const harness = renderHook({ editingFileContent: undefined, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: undefined });
     expect(harness.getState().isSlideshowComposition).toBe(false);
     harness.unmount();
   });
 
   it("still detects a malformed island — presence-only, not full manifest validation", () => {
     const malformed = `<html><body><script type="application/hyperframes-slideshow+json">{not valid json</script></body></html>`;
-    const harness = renderHook({ editingFileContent: malformed, rightPanelTab: "design" });
+    const harness = renderHook({ editingFileContent: malformed });
     expect(harness.getState().isSlideshowComposition).toBe(true);
     harness.unmount();
   });
-
-  it("bounces rightPanelTab off 'slideshow' to 'renders' on a non-slideshow composition", () => {
-    const harness = renderHook({ editingFileContent: PLAIN_HTML, rightPanelTab: "slideshow" });
-    expect(harness.setRightPanelTabCalls).toEqual(["renders"]);
-    harness.unmount();
-  });
-
-  it("does not bounce when the composition is a slideshow", () => {
-    const harness = renderHook({ editingFileContent: SLIDESHOW_HTML, rightPanelTab: "slideshow" });
-    expect(harness.setRightPanelTabCalls).toEqual([]);
-    harness.unmount();
-  });
-
-  it("does not bounce a tab other than 'slideshow'", () => {
-    const harness = renderHook({ editingFileContent: PLAIN_HTML, rightPanelTab: "renders" });
-    expect(harness.setRightPanelTabCalls).toEqual([]);
-    harness.unmount();
-  });
 });

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. */