@hyperframes/studio 0.7.82 → 0.7.84

package/src/components/sidebar/LeftSidebar.tsx

@@ -12,7 +12,6 @@ import { AssetsTab } from "./AssetsTab";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { BlocksTab, type BlockPreviewInfo } from "./BlocksTab";
 import { FileTree } from "../editor/FileTree";
-import { STUDIO_BLOCKS_PANEL_ENABLED } from "../editor/manualEditingAvailability";
 import { Tooltip } from "../ui";
 
 export type SidebarTab = "compositions" | "assets" | "code" | "blocks";
@@ -127,11 +126,7 @@ export const LeftSidebar = memo(
               <div className="flex items-center gap-2">
                 <div
                   className="grid min-w-0 flex-1 gap-0.5 rounded-[18px] bg-neutral-900 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]"
-                  style={{
-                    gridTemplateColumns: STUDIO_BLOCKS_PANEL_ENABLED
-                      ? "1fr 1fr 1fr 1fr"
-                      : "1fr 1fr 1fr",
-                  }}
+                  style={{ gridTemplateColumns: "1fr 1fr 1fr 1fr" }}
                 >
                   <Tooltip label="Source code editor" side="bottom">
                     <button
@@ -172,21 +167,19 @@ export const LeftSidebar = memo(
                       Assets
                     </button>
                   </Tooltip>
-                  {STUDIO_BLOCKS_PANEL_ENABLED && (
-                    <Tooltip label="Browse blocks and components" side="bottom">
-                      <button
-                        type="button"
-                        onClick={() => selectTab("blocks")}
-                        className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
-                          tab === "blocks"
-                            ? "bg-neutral-800 text-white"
-                            : "text-neutral-500 hover:text-neutral-200"
-                        }`}
-                      >
-                        Catalog
-                      </button>
-                    </Tooltip>
-                  )}
+                  <Tooltip label="Browse blocks and components" side="bottom">
+                    <button
+                      type="button"
+                      onClick={() => selectTab("blocks")}
+                      className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
+                        tab === "blocks"
+                          ? "bg-neutral-800 text-white"
+                          : "text-neutral-500 hover:text-neutral-200"
+                      }`}
+                    >
+                      Catalog
+                    </button>
+                  </Tooltip>
                 </div>
                 {onToggleCollapse && (
                   <button
@@ -267,7 +260,7 @@ export const LeftSidebar = memo(
               </div>
             )}
 
-            {STUDIO_BLOCKS_PANEL_ENABLED && tab === "blocks" && (
+            {tab === "blocks" && (
               <BlocksTab onAddBlock={onAddBlock} onPreviewBlock={onPreviewBlock} />
             )}
 

package/src/components/ui/Tooltip.tsx

@@ -1,5 +1,14 @@
-import { useState, useRef, useCallback, useEffect, useId, type ReactNode } from "react";
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useId,
+  type ReactNode,
+} from "react";
 import { createPortal } from "react-dom";
+import { clampCentredLeft } from "../editor/floatingPanel";
 
 interface TooltipProps {
   label: string;
@@ -19,6 +28,8 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
   const [resolvedSide, setResolvedSide] = useState<"top" | "bottom">(side);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const triggerRef = useRef<HTMLSpanElement>(null);
+  const bubbleRef = useRef<HTMLDivElement>(null);
+  const [bubbleWidth, setBubbleWidth] = useState(0);
   // WCAG 4.1.2: programmatically associate the bubble with its trigger.
   const tooltipId = useId();
 
@@ -40,13 +51,11 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
       ) {
         nextSide = "top";
       }
-      const x = Math.min(
-        Math.max(rect.left + rect.width / 2, VIEWPORT_MARGIN),
-        window.innerWidth - VIEWPORT_MARGIN,
-      );
       setResolvedSide(nextSide);
       setPos({
-        x,
+        // Raw trigger centre; clamped to the viewport at render, once the
+        // bubble's own width is known (see clampedX).
+        x: rect.left + rect.width / 2,
         y: nextSide === "top" ? rect.top - 6 : rect.bottom + 6,
       });
       setVisible(true);
@@ -61,6 +70,12 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
     setVisible(false);
   }, []);
 
+  // Measure before paint so a wide bubble near a viewport edge is clamped in
+  // the same commit it appears in (no visible jump).
+  useLayoutEffect(() => {
+    setBubbleWidth(visible ? (bubbleRef.current?.offsetWidth ?? 0) : 0);
+  }, [visible, label]);
+
   // WCAG 1.4.13: tooltip content must be dismissible with Escape.
   useEffect(() => {
     if (!visible) return;
@@ -71,6 +86,8 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [visible, hide]);
 
+  const clampedX = clampCentredLeft(pos.x, bubbleWidth, window.innerWidth, VIEWPORT_MARGIN);
+
   return (
     <>
       <span
@@ -89,12 +106,13 @@ export function Tooltip({ label, children, delay = 400, side = "top" }: TooltipP
           <div
             className="fixed z-[200] pointer-events-none"
             style={{
-              left: pos.x,
+              left: clampedX,
               top: pos.y,
               transform: resolvedSide === "top" ? "translate(-50%, -100%)" : "translate(-50%, 0)",
             }}
           >
             <div
+              ref={bubbleRef}
               role="tooltip"
               id={tooltipId}
               className="px-2 py-1 rounded-md bg-neutral-800 border border-neutral-700/50 text-[10px] font-medium text-neutral-200 whitespace-nowrap shadow-lg"

package/src/hooks/useAppHotkeys.ts

@@ -7,7 +7,6 @@ import { STUDIO_MOTION_PATH } from "../components/editor/studioMotion";
 import { isEditableTarget } from "../utils/timelineDiscovery";
 import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
-import { STUDIO_RAZOR_TOOL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 
@@ -258,7 +257,7 @@ function dispatchPlainKey(event: KeyboardEvent, key: string, cb: HotkeyCallbacks
     }
   }
 
-  if (STUDIO_RAZOR_TOOL_ENABLED && key === "b" && !event.shiftKey && !event.altKey) {
+  if (key === "b" && !event.shiftKey && !event.altKey) {
     event.preventDefault();
     const { activeTool, setActiveTool } = usePlayerStore.getState();
     setActiveTool(activeTool === "razor" ? "select" : "razor");

package/src/hooks/useDomEditPreviewSync.ts

@@ -4,7 +4,6 @@
  * Extracted from useDomEditSession to keep file sizes under the 600-line limit.
  */
 import { useEffect, useRef } from "react";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
 import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 import type { SidebarTab } from "../components/sidebar/LeftSidebar";
@@ -53,7 +52,7 @@ export function useDomEditPreviewSync({
 
     // fallow-ignore-next-line complexity
     const syncSelectionFromDocument = async () => {
-      if (!STUDIO_INSPECTOR_PANELS_ENABLED || captionEditMode) return;
+      if (captionEditMode) return;
       const currentSelection = domEditSelectionRef.current;
       if (!currentSelection) return;
       let doc: Document | null = null;

package/src/hooks/useDomEditWiring.ts

@@ -9,7 +9,6 @@
  */
 import { useCallback, useEffect, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
-import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { usePlayerStore } from "../player";
 import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import { useGsapAnimationsForElement, usePopulateKeyframeCacheForFile } from "./useGsapTweenCache";
@@ -195,7 +194,7 @@ export function useDomEditWiring({
   const gsapSourceFile = domEditSelection?.sourceFile || activeCompPath || "index.html";
 
   usePopulateKeyframeCacheForFile(
-    STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
+    projectId ?? null,
     gsapSourceFile,
     gsapCacheVersion,
     previewIframeRef,
@@ -206,7 +205,7 @@ export function useDomEditWiring({
     multipleTimelines: gsapMultipleTimelines,
     unsupportedTimelinePattern: gsapUnsupportedTimelinePattern,
   } = useGsapAnimationsForElement(
-    STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
+    projectId ?? null,
     gsapSourceFile,
     domEditSelection
       ? { id: domEditSelection.id ?? null, selector: domEditSelection.selector ?? null }

package/src/hooks/useDomSelection.ts

@@ -16,7 +16,6 @@ import {
   replaceDomEditGroupSelection,
   seedDomEditGroupWithSelection,
 } from "../utils/domEditHelpers";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import {
   findElementForSelection,
   findElementForTimelineElement,
@@ -164,14 +163,6 @@ export function useDomSelection({
         setSelectedTimelineElementId(null);
         return;
       }
-      if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
-        domEditSelectionRef.current = null;
-        domEditGroupSelectionsRef.current = [];
-        setDomEditSelection(null);
-        setDomEditGroupSelections([]);
-        setSelectedTimelineElementId(null);
-        return;
-      }
 
       const isAdditiveSelection = Boolean(options?.additive);
       const currentSelection = domEditSelectionRef.current;
@@ -370,7 +361,6 @@ export function useDomSelection({
 
   const handleTimelineElementSelect = useCallback(
     async (element: TimelineElement | null) => {
-      if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
       const seq = ++timelineSelectSeqRef.current;
       if (!element) {
         applyDomSelection(null, { revealPanel: false });
@@ -513,14 +503,6 @@ export function useDomSelection({
   const applyMarqueeSelection = useCallback(
     // fallow-ignore-next-line complexity
     (selections: DomEditSelection[], additive: boolean) => {
-      // Honor the inspector-panels kill switch like applyDomSelection does.
-      if (!STUDIO_INSPECTOR_PANELS_ENABLED) {
-        domEditSelectionRef.current = null;
-        domEditGroupSelectionsRef.current = [];
-        setDomEditSelection(null);
-        setDomEditGroupSelections([]);
-        return;
-      }
       if (selections.length === 0) {
         if (!additive) applyDomSelection(null, { revealPanel: false });
         return;
@@ -557,15 +539,6 @@ export function useDomSelection({
     [applyDomSelection, timelineElements, setSelectedTimelineElementId],
   );
 
-  // Disabled inspector effect
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (STUDIO_INSPECTOR_PANELS_ENABLED) return;
-    updateDomEditHoverSelection(null);
-    applyDomSelection(null, { revealPanel: false });
-    if (rightPanelTab !== "renders") setRightPanelTab("renders");
-  }, [applyDomSelection, rightPanelTab, updateDomEditHoverSelection, setRightPanelTab]);
-
   return {
     // State
     domEditSelection,

package/src/hooks/usePreviewInteraction.ts

@@ -1,7 +1,6 @@
 import { useCallback, useRef } from "react";
 import { liveTime, usePlayerStore } from "../player";
 import { pauseStudioPreviewPlayback } from "../utils/studioPreviewHelpers";
-import { STUDIO_PREVIEW_SELECTION_ENABLED } from "../components/editor/manualEditingAvailability";
 import { type DomEditSelection } from "../components/editor/domEditing";
 import type { ApplyDomSelectionOptions, ResolveDomSelectionOptions } from "./useDomSelection";
 import { trackStudioEvent } from "../utils/studioTelemetry";
@@ -87,7 +86,7 @@ export function usePreviewInteraction({
   const handlePreviewCanvasMouseDown = useCallback(
     // fallow-ignore-next-line complexity
     async (e: React.MouseEvent<HTMLDivElement>, options?: PreviewMouseDownOptions) => {
-      if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) return;
+      if (captionEditMode || compositionLoading) return;
 
       // Manual double-click detection (see DOUBLE_CLICK_MS): the first click
       // re-renders the overlay so `e.detail` never reaches 2 on the canvas.
@@ -236,7 +235,7 @@ export function usePreviewInteraction({
   const handlePreviewCanvasPointerMove = useCallback(
     // fallow-ignore-next-line complexity
     async (e: React.PointerEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
-      if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) {
+      if (captionEditMode || compositionLoading) {
         updateDomEditHoverSelection(null);
         return null;
       }

package/src/hooks/useStudioContextValue.ts

@@ -1,5 +1,4 @@
 import { useCallback, useMemo, useRef, useState, type DragEvent } from "react";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { StudioContextValue } from "../contexts/StudioContext";
 import type { RightInspectorPanes } from "../utils/studioHelpers";
@@ -85,17 +84,14 @@ export function useInspectorState(
   // fallow-ignore-next-line complexity
   return useMemo(() => {
     const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
-    const layersPanelActive =
-      STUDIO_INSPECTOR_PANELS_ENABLED && inspectorTabActive && rightInspectorPanes.layers;
-    const designPanelActive =
-      STUDIO_INSPECTOR_PANELS_ENABLED && inspectorTabActive && rightInspectorPanes.design;
+    const layersPanelActive = inspectorTabActive && rightInspectorPanes.layers;
+    const designPanelActive = inspectorTabActive && rightInspectorPanes.design;
     const inspectorPanelActive = layersPanelActive || designPanelActive;
     return {
       layersPanelActive,
       designPanelActive,
       inspectorPanelActive,
-      inspectorButtonActive:
-        STUDIO_INSPECTOR_PANELS_ENABLED && !rightCollapsed && 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.

package/src/player/components/Timeline.tsx

@@ -32,7 +32,6 @@ import {
   useTimelineTrackLayout,
 } from "./useTimelineTrackLayout";
 import { useTimelineKeyframeHandlers } from "./useTimelineKeyframeHandlers";
-import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import { useTrackGapMenu } from "./useTrackGapMenu";
 import { useTimelineGapHighlights } from "./useTimelineGapHighlights";
 import { useStudioPlaybackContextOptional } from "../../contexts/StudioContext";
@@ -126,7 +125,7 @@ export const Timeline = memo(function Timeline({
       ),
     [gsapAnimations],
   );
-  const labelMode = STUDIO_KEYFRAMES_ENABLED && hasKeyframedClips;
+  const labelMode = hasKeyframedClips;
   // Without the label column the pre-t=0 breathing room is still TRACKS_LEFT_PAD
   // (dropping it would jam clip 0 against the gutter on every non-keyframed
   // composition); in label mode the 232px label column already provides it.

package/src/player/components/TimelineLanes.tsx

@@ -17,7 +17,6 @@ import {
 } from "./timelineMultiDragPreview";
 import type { TimelineLaneBaseProps } from "./timelineLaneProps";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
-import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import { trackStudioKeyframeLaneExpand } from "../../telemetry/events";
 import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 import { isAudioTimelineElement, isMusicTrack } from "../../utils/timelineInspector";
@@ -134,9 +133,12 @@ export function TimelineLanes({
           // The one keyframed element this track shows lanes for (selected, else
           // most lanes). A track can hold several elements; scoping to one keeps
           // their keyframes from cramming into a single row.
-          const keyframeClip = STUDIO_KEYFRAMES_ENABLED
-            ? resolveTrackKeyframeClip(els, laneCounts, selectedElementId, selectedElementIds)
-            : null;
+          const keyframeClip = resolveTrackKeyframeClip(
+            els,
+            laneCounts,
+            selectedElementId,
+            selectedElementIds,
+          );
           const keyframeClipKey = keyframeClip?.key ?? keyframeClip?.id;
           const keyframeClipExpanded =
             keyframeClipKey != null && expandedClipIds.has(keyframeClipKey);
@@ -249,8 +251,7 @@ export function TimelineLanes({
                     // Only the track's active keyframe clip shows expanded lanes;
                     // other clips (incl. siblings on a shared track) show compact
                     // diamonds on their own bar instead.
-                    const isTrackKeyframeClip =
-                      STUDIO_KEYFRAMES_ENABLED && elementKey === keyframeClipKey;
+                    const isTrackKeyframeClip = elementKey === keyframeClipKey;
                     const showsLanes = isTrackKeyframeClip && keyframeClipExpanded;
                     const capabilities = getTimelineEditCapabilities(el);
                     const isSelected =
@@ -428,35 +429,32 @@ export function TimelineLanes({
                           renderClipContent,
                           renderClipOverlay,
                         )}
-                        {STUDIO_KEYFRAMES_ENABLED &&
-                          !showsLanes &&
-                          keyframeCache?.get(elementKey) && (
-                            <TimelineClipDiamonds
-                              keyframesData={keyframeCache.get(elementKey)!}
-                              clipWidthPx={Math.max(previewElement.duration * pps, 4)}
-                              clipHeightPx={rowHeight - 2 * CLIP_Y}
-                              beatsActive={beatStripOnTrack}
-                              accentColor={clipStyle.accent}
-                              isSelected={isSelected}
-                              currentPercentage={
-                                previewElement.duration > 0
-                                  ? ((currentTime - previewElement.start) /
-                                      previewElement.duration) *
-                                    100
-                                  : 0
-                              }
-                              elementId={elementKey}
-                              selectedKeyframes={selectedKeyframes}
-                              onClickKeyframe={(_elId, target) =>
-                                onClickKeyframe?.(previewElement, target)
-                              }
-                              onShiftClickKeyframe={onShiftClickKeyframe}
-                              onContextMenuKeyframe={onContextMenuKeyframe}
-                              onMoveKeyframe={onMoveKeyframe}
-                              onSelectSegment={onSelectSegment}
-                              suppressClickRef={suppressClickRef}
-                            />
-                          )}
+                        {!showsLanes && keyframeCache?.get(elementKey) && (
+                          <TimelineClipDiamonds
+                            keyframesData={keyframeCache.get(elementKey)!}
+                            clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                            clipHeightPx={rowHeight - 2 * CLIP_Y}
+                            beatsActive={beatStripOnTrack}
+                            accentColor={clipStyle.accent}
+                            isSelected={isSelected}
+                            currentPercentage={
+                              previewElement.duration > 0
+                                ? ((currentTime - previewElement.start) / previewElement.duration) *
+                                  100
+                                : 0
+                            }
+                            elementId={elementKey}
+                            selectedKeyframes={selectedKeyframes}
+                            onClickKeyframe={(_elId, target) =>
+                              onClickKeyframe?.(previewElement, target)
+                            }
+                            onShiftClickKeyframe={onShiftClickKeyframe}
+                            onContextMenuKeyframe={onContextMenuKeyframe}
+                            onMoveKeyframe={onMoveKeyframe}
+                            onSelectSegment={onSelectSegment}
+                            suppressClickRef={suppressClickRef}
+                          />
+                        )}
                       </TimelineClip>
                     );
                     // Mounted for the track's keyframe clip in BOTH disclosure

package/src/player/components/useAutoExpandKeyframedClips.ts

@@ -1,7 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../store/playerStore";
-import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import { useStudioShellContextOptional } from "../../contexts/StudioContext";
 import { animationContributesLane } from "./TimelinePropertyLanes";
 
@@ -34,7 +33,6 @@ export function useAutoExpandKeyframedClips(gsapAnimations: Map<string, GsapAnim
   const projectId = useStudioShellContextOptional()?.projectId ?? null;
   const seen = useRef({ projectId, source: gsapAnimations, clips: new Set<string>() });
   useEffect(() => {
-    if (!STUDIO_KEYFRAMES_ENABLED) return;
     if (seen.current.projectId !== projectId) {
       const sourceChanged = seen.current.source !== gsapAnimations;
       seen.current = { projectId, source: gsapAnimations, clips: new Set() };

package/src/player/components/useTimelineTrackLayout.ts

@@ -2,7 +2,6 @@ import { useMemo, useRef } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { animationLaneGroups } from "./TimelinePropertyLanes";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 import type { DraggedClipState } from "./timelineClipDragTypes";
 import { useTimelineTrackDerivations } from "./useTimelineTrackDerivations";
 import {
@@ -90,10 +89,7 @@ function useTimelineRowHeights(
     });
     return {
       laneCounts,
-      rowHeights: trackHeights(
-        heightTracks,
-        STUDIO_KEYFRAMES_ENABLED ? expandedClipIds : undefined,
-      ),
+      rowHeights: trackHeights(heightTracks, expandedClipIds),
     };
   }, [expandedClipIds, gsapAnimations, tracks, selectedElementId, selectedElementIds]);
   const rowHeightsRef = useRef<readonly number[]>(rowHeights);

package/src/utils/studioUrlState.test.ts

@@ -34,12 +34,8 @@ describe("resolveMasterCompositionPath", () => {
 
 describe("normalizeStudioUrlPanelTab", () => {
   it("accepts slideshow and variables as valid tabs", () => {
-    expect(normalizeStudioUrlPanelTab("slideshow", { inspectorPanelsEnabled: true })).toBe(
-      "slideshow",
-    );
-    expect(normalizeStudioUrlPanelTab("variables", { inspectorPanelsEnabled: true })).toBe(
-      "variables",
-    );
+    expect(normalizeStudioUrlPanelTab("slideshow")).toBe("slideshow");
+    expect(normalizeStudioUrlPanelTab("variables")).toBe("variables");
   });
 });
 
@@ -184,9 +180,10 @@ describe("studio url state", () => {
     ).toBe("compositions/title.html");
   });
 
-  it("normalizes url tabs against feature flags", () => {
+  it("passes through every valid tab and rejects unknown ones", () => {
     expect(normalizeStudioUrlPanelTab("renders")).toBe("renders");
-    expect(normalizeStudioUrlPanelTab("layers", { inspectorPanelsEnabled: false })).toBe("renders");
+    expect(normalizeStudioUrlPanelTab("layers")).toBe("layers");
+    expect(normalizeStudioUrlPanelTab("nope" as never)).toBeNull();
   });
 
   it("hydrates seek first, preserves the initial url state, then restores selection", async () => {

package/src/utils/studioUrlState.ts

@@ -1,6 +1,5 @@
 import type { RightPanelTab } from "./studioHelpers";
 import { buildProjectHash, parseProjectHashRoute } from "./projectRouting";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
 import { roundTo3 } from "./rounding";
 
 export interface StudioUrlSelectionState {
@@ -34,17 +33,9 @@ export function resolveMasterCompositionPath(fileTree: string[]): string | null
   return fileTree.find((p) => p.endsWith(".html")) ?? null;
 }
 
-export function normalizeStudioUrlPanelTab(
-  tab: RightPanelTab | null,
-  options: {
-    inspectorPanelsEnabled?: boolean;
-  } = {},
-): RightPanelTab | null {
+export function normalizeStudioUrlPanelTab(tab: RightPanelTab | null): RightPanelTab | null {
   if (!tab) return null;
   if (!VALID_TABS.includes(tab)) return null;
-  const inspectorPanelsEnabled = options.inspectorPanelsEnabled ?? STUDIO_INSPECTOR_PANELS_ENABLED;
-
-  if (!inspectorPanelsEnabled && tab !== "renders") return "renders";
   return tab;
 }