@hyperframes/studio 0.7.81 → 0.7.83

package/src/components/renders/RenderQueue.tsx

@@ -1,6 +1,9 @@
-import { memo, useState, useRef, useEffect, useId } from "react";
+import { memo, useState, useRef, useEffect, useLayoutEffect, useId } from "react";
+import { createPortal } from "react-dom";
+import { CANVAS_DIMENSIONS } from "@hyperframes/parsers";
 import { RenderQueueItem } from "./RenderQueueItem";
 import { Button } from "../ui/Button";
+import { resolveFloatingPanelPosition, type FloatingPosition } from "../editor/floatingPanel";
 import type { RenderJob, ResolutionPreset } from "./useRenderQueue";
 import { getPersistedRenderSettings, persistRenderSettings } from "./renderSettings";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
@@ -53,17 +56,6 @@ const SCALE_LABEL: Record<RenderScale, string> = {
   "4k": "4K",
 };
 
-// Mirrors `CANVAS_DIMENSIONS` in @hyperframes/core. Studio can't import from
-// the core barrel (it transitively pulls in node:fs) and the values are stable.
-const CANVAS_DIMENSIONS: Record<ResolutionPreset, CompositionDimensions> = {
-  landscape: { width: 1920, height: 1080 },
-  portrait: { width: 1080, height: 1920 },
-  "landscape-4k": { width: 3840, height: 2160 },
-  "portrait-4k": { width: 2160, height: 3840 },
-  square: { width: 1080, height: 1080 },
-  "square-4k": { width: 2160, height: 2160 },
-};
-
 type CompAspect = "landscape" | "portrait" | "square";
 
 function compAspect(dims: CompositionDimensions | null | undefined): CompAspect {
@@ -142,12 +134,20 @@ const FORMAT_INFO: Record<"mp4" | "webm" | "mov", { label: string; desc: string
   },
 };
 
+// Estimated, like COLOR_PICKER_SIZE in propertyPanelColor: only the flip
+// decision uses the height, and the clamp keeps the panel on screen either way.
+const FORMAT_PANEL_SIZE = { width: 208, height: 150 };
+
 // Rich format guidance in a keyboard-reachable disclosure: the trigger is a
 // real button (focusable, labelled), the panel is tied to it via
 // aria-describedby, and Escape dismisses (WCAG 1.4.13). Content is too rich
 // for the one-line ui/Tooltip primitive, so this stays a local popover.
+// It renders in a portal because the right panel is overflow-hidden: an
+// in-flow absolute panel gets clipped at the panel edge.
 function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<FloatingPosition | null>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
   const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
   const panelId = useId();
 
@@ -161,6 +161,22 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
 
   useEffect(() => () => clearTimeout(timeoutRef.current), []);
 
+  // Positioned once on open, so it does not follow panel scroll. The popover
+  // is hover-lived; add a scroll listener only if that ever shows up.
+  useLayoutEffect(() => {
+    if (!open) return;
+    const el = triggerRef.current;
+    if (!el) return;
+    setPosition(
+      resolveFloatingPanelPosition(
+        el.getBoundingClientRect(),
+        { width: window.innerWidth, height: window.innerHeight },
+        FORMAT_PANEL_SIZE,
+        { offset: 6 },
+      ),
+    );
+  }, [open]);
+
   useEffect(() => {
     if (!open) return;
     const onKeyDown = (e: KeyboardEvent) => {
@@ -173,7 +189,7 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
   const info = FORMAT_INFO[format];
 
   return (
-    <div className="relative" onPointerEnter={show} onPointerLeave={hide}>
+    <div ref={triggerRef} className="relative" onPointerEnter={show} onPointerLeave={hide}>
       <button
         type="button"
         aria-label="About video formats"
@@ -200,27 +216,32 @@ function FormatInfoTooltip({ format }: { format: "mp4" | "webm" | "mov" }) {
           <line x1="12" y1="17" x2="12.01" y2="17" />
         </svg>
       </button>
-      {open && (
-        <div
-          id={panelId}
-          role="tooltip"
-          className="absolute top-full right-0 mt-1.5 w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-50"
-        >
-          <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
-          <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
-          <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
-            {(["mp4", "mov", "webm"] as const)
-              .filter((f) => f !== format)
-              .map((f) => (
-                <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
-                  <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
-                  {" — "}
-                  {FORMAT_INFO[f].desc}
-                </p>
-              ))}
-          </div>
-        </div>
-      )}
+      {open &&
+        createPortal(
+          <div
+            id={panelId}
+            role="tooltip"
+            onPointerEnter={show}
+            onPointerLeave={hide}
+            className="fixed w-52 p-2 rounded bg-panel-input border border-neutral-700 shadow-lg z-[200]"
+            style={{ left: position?.left ?? -9999, top: position?.top ?? -9999 }}
+          >
+            <p className="text-[10px] font-semibold text-panel-text-1 mb-0.5">{info.label}</p>
+            <p className="text-[9px] text-panel-text-3 leading-tight">{info.desc}</p>
+            <div className="mt-1.5 pt-1.5 border-t border-neutral-800">
+              {(["mp4", "mov", "webm"] as const)
+                .filter((f) => f !== format)
+                .map((f) => (
+                  <p key={f} className="text-[9px] text-panel-text-4 leading-relaxed">
+                    <span className="text-panel-text-3 font-medium">{FORMAT_INFO[f].label}</span>
+                    {" — "}
+                    {FORMAT_INFO[f].desc}
+                  </p>
+                ))}
+            </div>
+          </div>,
+          document.body,
+        )}
     </div>
   );
 }
@@ -254,7 +275,7 @@ function FormatExportButton({
   const persisted = getPersistedRenderSettings();
   const [format, setFormat] = useState<"mp4" | "webm" | "mov">(persisted.format);
   const [quality, setQuality] = useState<"draft" | "standard" | "high">(persisted.quality);
-  const [resolution, setResolution] = useState<ResolutionPreset | "auto">("auto");
+  const [resolution, setResolution] = useState<RenderScale>("auto");
   const [fps, setFps] = useState<24 | 30 | 60>(persisted.fps);
 
   // MOV (ProRes) is a fixed-quality codec — quality selector has no effect.
@@ -290,7 +311,7 @@ function FormatExportButton({
           <span className="text-[10px] text-panel-text-4">Resolution</span>
           <select
             value={resolution}
-            onChange={(e) => setResolution(e.target.value as ResolutionPreset | "auto")}
+            onChange={(e) => setResolution(e.target.value as RenderScale)}
             disabled={isRendering}
             className={selectCls}
           >
@@ -352,8 +373,9 @@ function FormatExportButton({
           // loading already disables the button; this guard also stops a
           // double-click in the same frame from enqueueing two renders.
           if (isRendering) return;
-          trackStudioEvent("render_start", { format, quality, resolution, fps });
-          void onStartRender(format, quality, resolution, fps);
+          const outputResolution = resolveResolution(resolution, compositionDimensions);
+          trackStudioEvent("render_start", { format, quality, resolution: outputResolution, fps });
+          void onStartRender(format, quality, outputResolution, fps);
         }}
         className="w-full text-[11px] font-semibold"
       >

package/src/components/renders/useRenderQueue.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import type { CanvasResolution } from "@hyperframes/parsers";
 import { trackStudioRenderStart } from "../../telemetry/events";
 import { getAnonymousId } from "../../telemetry/config";
 import { generateId } from "../../utils/generateId";
@@ -14,17 +15,10 @@ export interface RenderJob {
   durationMs?: number;
 }
 
-// Mirrors `CanvasResolution` from @hyperframes/core. Kept local because
-// studio's tsconfig doesn't include node types, and the core barrel
-// transitively pulls in modules with `node:fs` imports. Drift risk is
-// low (6 string literals kept in sync manually with CANVAS_DIMENSIONS).
-export type ResolutionPreset =
-  | "landscape"
-  | "portrait"
-  | "landscape-4k"
-  | "portrait-4k"
-  | "square"
-  | "square-4k";
+// The CLI consumes this same source through @hyperframes/core's re-export.
+// Importing from the browser-safe parsers package avoids the core barrel's
+// Node-only transitive modules without duplicating the preset union in Studio.
+export type ResolutionPreset = CanvasResolution;
 
 export interface StartRenderOptions {
   fps?: number;

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() };