ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-11 06:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(studio): remove fully rolled-out studio feature flags (#2889)

Browse Source 
## What

Removes six Studio feature flags that have been default-`true` for 7+ weeks. Each is reachable under two env names, so this deletes **12 `VITE_STUDIO_*` env vars**:

| Flag constant | Env names removed | Default-on since |
|---|---|---|
| `STUDIO_PREVIEW_MANUAL_EDITING_ENABLED` | `VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING`, `VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED` | 2026-05-12 |
| `STUDIO_INSPECTOR_PANELS_ENABLED` (+ its `STUDIO_PREVIEW_SELECTION_ENABLED` alias) | `VITE_STUDIO_ENABLE_INSPECTOR_PANELS`, `VITE_STUDIO_INSPECTOR_PANELS_ENABLED` | 2026-05-12 |
| `STUDIO_BLOCKS_PANEL_ENABLED` | `VITE_STUDIO_ENABLE_BLOCKS_PANEL`, `VITE_STUDIO_BLOCKS_PANEL_ENABLED` | 2026-05-18 |
| `STUDIO_GSAP_PANEL_ENABLED` | `VITE_STUDIO_ENABLE_GSAP_PANEL`, `VITE_STUDIO_GSAP_PANEL_ENABLED` | 2026-05-28 |
| `STUDIO_KEYFRAMES_ENABLED` | `VITE_STUDIO_ENABLE_KEYFRAMES`, `VITE_STUDIO_KEYFRAMES_ENABLED` | 2026-06-05 |
| `STUDIO_RAZOR_TOOL_ENABLED` | `VITE_STUDIO_ENABLE_RAZOR_TOOL`, `VITE_STUDIO_RAZOR_TOOL_ENABLED` | 2026-06-10 |

## Why

Every one of these shipped as a rollout gate, went to `true`, and then stayed. Because none of them was ever flipped back, the `false` branch was unreachable in practice while still costing a real import, a real conditional, and a real "what happens if this is off?" question at ~90 call sites across 25 files.

The bigger cost is what the dead branch kept alive. Removing the flags also removes the disabled-Studio code paths that only existed to serve them:

- the greyed-out, `disabled`, "Manual editing is temporarily disabled" Inspector button in `StudioHeader` (and the `STUDIO_MANUAL_EDITING_DISABLED_TITLE` constant behind it)
- the inspector-off reset `useEffect` in `useDomSelection`, which force-cleared selection and redirected the right panel to Renders
- three selection kill-switch early-returns in `useDomSelection` (`applyDomSelection`, `handleTimelineElementSelect`, `applyMarqueeSelection`)
- the tab-redirect branch in `normalizeStudioUrlPanelTab`, whose `options.inspectorPanelsEnabled` parameter had no production caller at all (only tests passed it)

## How

No behavior change: every flag was removed by keeping its default-`true` side.

The call-site edits are three mechanical boolean shapes (`X && rest` → `rest`, `rest && X` → `rest`, `!X || rest` → `rest`), applied by script for uniformity. Everything else (ternaries, `if` guards, unreachable blocks, JSX wrappers that had no other condition) was done by hand and the whole diff was read line by line afterwards.

`resolveStudioBooleanEnvFlag` and the `import.meta.env` / `window.__HF_STUDIO_ENV__` plumbing stay: three flags still use them (`STUDIO_FLAT_INSPECTOR_ENABLED`, `STUDIO_SDK_CUTOVER_ENABLED`, `STUDIO_SDK_RESOLVER_SHADOW_ENABLED`). Its unit tests kept their coverage but now exercise a live flag pair instead of retired env names, so no dead `VITE_STUDIO_*` string is left in the repo.

Net **-191 lines** (236 insertions, 427 deletions across 25 files); most insertions are reindentation of JSX that lost a wrapper.

### Deliberately not in scope

Flags authored by other people are untouched, even where they look similarly settled:

- `VITE_STUDIO_ENABLE_FLAT_INSPECTOR` / `VITE_STUDIO_FLAT_INSPECTOR_ENABLED` (default true, but not mine)
- `VITE_STUDIO_SDK_CUTOVER_ENABLED`, `VITE_STUDIO_SDK_CUTOVER_FAMILIES`, `VITE_STUDIO_SDK_RESOLVER_SHADOW_ENABLED` (SDK cutover canary, still soaking)
- `VITE_HYPERFRAMES_NO_TELEMETRY`

Mine but genuinely long-lived configuration rather than rollout gates, so they stay: `VITE_STUDIO_DISCOVERY_PORTS`, `VITE_HYPERFRAMES_FEEDBACK_INTERVAL`, `VITE_HYPERFRAMES_NO_FEEDBACK` (a documented user opt-out), plus the `HYPERFRAMES_*` binary paths, API URLs, cache sizes, and timeouts.

`VITE_STUDIO_ENABLE_MOTION_PANEL` / `VITE_STUDIO_MOTION_PANEL_ENABLED` were already retired from production code before this PR; they only survived as placeholder names inside the resolver's unit tests, and this PR swaps those out.

## Test plan

- [x] Unit tests added/updated - dropped the two tests asserting removed flag defaults; retargeted the `resolveStudioBooleanEnvFlag` cases at a live flag pair; updated `studioUrlState` tests for the narrowed `normalizeStudioUrlPanelTab` signature (now also asserts an unknown tab returns `null`).
- [x] Manual testing performed - see below.
- [ ] Documentation updated (if applicable) - not needed; no removed name appears in `docs/`, `skills/`, or `registry/`. (`docs/changelog.mdx` has one historical entry naming `STUDIO_KEYFRAMES_ENABLED`; changelog history is left as written.)

```
packages/studio: bunx vitest run          # 280 files, 3116 tests pass, 1 skipped
packages/studio: bunx tsc --noEmit        # clean
bun run build                             # green (all packages)
bunx oxlint  <25 changed files>           # 0 warnings, 0 errors
bunx oxfmt --check <25 changed files>     # clean
```

Two extra checks, because part of this diff was script-generated:

1. Zero references to any removed flag constant or env name remain anywhere outside `docs/changelog.mdx`.
2. Diffed every string literal in each changed non-test file against `origin/main`. The only differences are the intended removals: the 12 env names, `"Manual editing is temporarily disabled"`, the `"cursor-not-allowed …"` disabled class, the 3-column `"1fr 1fr 1fr"` grid, and the `"renders"` redirect literals. No user-facing label, tooltip, or class string changed by accident.
This commit is contained in:
Miguel Ángel
2026-07-30 02:00:05 +02:00
committed by GitHub
parent 860954d71c
commit cef3b86c95
25 changed files with 236 additions and 427 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/studio/src/App.tsx
+2 -5
View File
@@ -43,7 +43,6 @@ import {
import type { DomEditSelection } from "./components/editor/domEditing";
import { StudioHeader } from "./components/StudioHeader";
import { useGestureCommit } from "./hooks/useGestureCommit";
import { STUDIO_KEYFRAMES_ENABLED } from "./components/editor/manualEditingAvailability";
import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
import { EditorShell } from "./components/EditorShell";
@@ -263,9 +262,7 @@ export function StudioApp() {
onUngroupSelection: () => domEditSessionRef.current.handleUngroupSelection(),
activeCompPath,
forceReloadSdkSession: sdkHandle.forceReload,
onToggleRecording: STUDIO_KEYFRAMES_ENABLED
? () => handleToggleRecordingRef.current()
: undefined,
onToggleRecording: () => handleToggleRecordingRef.current(),
});
const sidebarTabRef = useRef({
select: (t: SidebarTab) => leftSidebarRef.current?.selectTab(t),
@@ -367,7 +364,7 @@ export function StudioApp() {
isGestureRecordingRef,
});
handleToggleRecordingRef.current = handleToggleRecording;
const recordingToggle = STUDIO_KEYFRAMES_ENABLED ? handleToggleRecording : undefined;
const recordingToggle = handleToggleRecording;
const canvasRectRef = useRef<DOMRect | null>(null);
useLayoutEffect(() => {
if (gestureState !== "recording" || !previewIframe) {
packages/studio/src/components/StudioHeader.tsx
+3 -18
View File
@@ -1,9 +1,5 @@
import { useRef, type MouseEvent } from "react";
import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
import {
STUDIO_INSPECTOR_PANELS_ENABLED,
STUDIO_MANUAL_EDITING_DISABLED_TITLE,
} from "./editor/manualEditingAvailability";
import { getHistoryShortcutLabel } from "../utils/studioHelpers";
import { useStudioShellContext } from "../contexts/StudioContext";
import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
@@ -328,16 +324,10 @@ export function StudioHeader({
<span>{capturing ? "Capturing…" : "Capture"}</span>
</a>
</Tooltip>
<Tooltip
label={
STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
}
side="bottom"
>
<Tooltip label="Inspector" side="bottom">
<button
type="button"
onClick={() => {
if (!STUDIO_INSPECTOR_PANELS_ENABLED) return;
if (rightCollapsed || !inspectorPanelActive) {
trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
setRightPanelTab("design");
@@ -349,18 +339,13 @@ export function StudioHeader({
// the panel shouldn't deselect the element.
setRightCollapsed(true);
}}
disabled={!STUDIO_INSPECTOR_PANELS_ENABLED}
aria-pressed={inspectorButtonActive}
className={`h-7 flex items-center gap-1.5 px-2.5 rounded-md text-[11px] font-medium border transition-colors active:scale-[0.98] ${
inspectorButtonActive
? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
: STUDIO_INSPECTOR_PANELS_ENABLED
? "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
: "cursor-not-allowed border-transparent text-neutral-700"
: "text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800 border-transparent"
}`}
aria-label={
STUDIO_INSPECTOR_PANELS_ENABLED ? "Inspector" : STUDIO_MANUAL_EDITING_DISABLED_TITLE
}
aria-label="Inspector"
>
<svg
width="12"
packages/studio/src/components/StudioRightPanel.tsx
+14 -22
View File
@@ -10,10 +10,7 @@ import { PanelTabButton } from "./PanelTabButton";
import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
import type { RenderJob } from "./renders/useRenderQueue";
import type { BlockParam } from "@hyperframes/core/registry";
import {
STUDIO_FLAT_INSPECTOR_ENABLED,
STUDIO_INSPECTOR_PANELS_ENABLED,
} from "./editor/manualEditingAvailability";
import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./editor/manualEditingAvailability";
import type { Composition } from "@hyperframes/sdk";
import type { EditHistoryKind } from "../utils/editHistory";
import { useSlideshowPersist, type UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
@@ -229,8 +226,7 @@ export function StudioRightPanel({
setRightPanelTab,
});
const designPaneOpen = inspectorTabActive && rightInspectorPanes.design && designPanelActive;
const layersPaneOpen =
inspectorTabActive && rightInspectorPanes.layers && STUDIO_INSPECTOR_PANELS_ENABLED;
const layersPaneOpen = inspectorTabActive && rightInspectorPanes.layers;
const handleInspectorPaneButtonClick = (pane: "design" | "layers") => {
if (!inspectorTabActive) {
@@ -483,22 +479,18 @@ export function StudioRightPanel({
) : (
<>
<div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
{STUDIO_INSPECTOR_PANELS_ENABLED && (
<>
<PanelTabButton
label="Design"
tooltip="Element styles and properties"
active={designPaneOpen}
onClick={() => handleInspectorPaneButtonClick("design")}
/>
<PanelTabButton
label="Layers"
tooltip="Composition layer stack"
active={layersPaneOpen}
onClick={() => handleInspectorPaneButtonClick("layers")}
/>
</>
)}
<PanelTabButton
label="Design"
tooltip="Element styles and properties"
active={designPaneOpen}
onClick={() => handleInspectorPaneButtonClick("design")}
/>
<PanelTabButton
label="Layers"
tooltip="Composition layer stack"
active={layersPaneOpen}
onClick={() => handleInspectorPaneButtonClick("layers")}
/>
<PanelTabButton
label={renderJobs.length > 0 ? `Renders (${renderJobs.length})` : "Renders"}
tooltip="Render queue and exports"
packages/studio/src/components/TimelineToolbar.tsx
+120 -132
View File
@@ -15,10 +15,6 @@ import {
} from "../player/components/timelineZoom";
import { useTimelineZoom } from "../player/components/useTimelineZoom";
import { usePlayerStore, type TimelineElement } from "../player";
import {
STUDIO_KEYFRAMES_ENABLED,
STUDIO_RAZOR_TOOL_ENABLED,
} from "./editor/manualEditingAvailability";
import { Tooltip } from "./ui";
import { Scissors } from "../icons/SystemIcons";
import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
@@ -135,7 +131,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
// Wire the "Add keyframe (K)" shortcut the toolbar advertises. Active only when
// there's a keyframeable selection; otherwise K stays JKL-pause in playback.
useKeyframeKeyboard({
enabled: STUDIO_KEYFRAMES_ENABLED && Boolean(onToggleKeyframe),
enabled: Boolean(onToggleKeyframe),
onAddKeyframe: onToggleKeyframe,
});
@@ -170,36 +166,32 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
<div className="border-b border-neutral-800/60">
<div className="flex items-center justify-between px-2 py-0.5">
<div className="flex items-center gap-0.5">
{STUDIO_RAZOR_TOOL_ENABLED && (
<>
<Tooltip label="Selection tool (V)">
<button
type="button"
onClick={() => setActiveTool("select")}
aria-label="Selection tool"
aria-pressed={activeTool === "select"}
className={activeTool === "select" ? flatActive : flatIdle}
>
<svg width="16" height="16" viewBox="0 0 12 12" fill="currentColor">
<path d="M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" />
</svg>
</button>
</Tooltip>
<Tooltip label="Razor tool (B) — Shift+click splits all tracks">
<button
type="button"
onClick={() => setActiveTool("razor")}
aria-label="Razor tool"
aria-pressed={activeTool === "razor"}
className={activeTool === "razor" ? flatActive : flatIdle}
>
<Scissors size={16} />
</button>
</Tooltip>
{/* Divider: tool-mode | editing-actions */}
<div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
</>
)}
<Tooltip label="Selection tool (V)">
<button
type="button"
onClick={() => setActiveTool("select")}
aria-label="Selection tool"
aria-pressed={activeTool === "select"}
className={activeTool === "select" ? flatActive : flatIdle}
>
<svg width="16" height="16" viewBox="0 0 12 12" fill="currentColor">
<path d="M2 0.5L10 6L6.5 6.5L8.5 11L6.5 11.5L4.5 7L2 9Z" />
</svg>
</button>
</Tooltip>
<Tooltip label="Razor tool (B) — Shift+click splits all tracks">
<button
type="button"
onClick={() => setActiveTool("razor")}
aria-label="Razor tool"
aria-pressed={activeTool === "razor"}
className={activeTool === "razor" ? flatActive : flatIdle}
>
<Scissors size={16} />
</button>
</Tooltip>
{/* Divider: tool-mode | editing-actions */}
<div aria-hidden="true" className="mx-1 h-4 w-px bg-neutral-800" />
<Tooltip label={timelineSnapEnabled ? "Snapping on (N)" : "Snapping off (N)"}>
<button
type="button"
@@ -211,111 +203,107 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
<Magnet size={16} weight="bold" aria-hidden="true" />
</button>
</Tooltip>
{STUDIO_KEYFRAMES_ENABLED && (
// Always rendered (CapCut-style): with no keyframeable selection the
// button fades to a disabled state instead of unmounting, so the
// toolbar layout never shifts.
<Tooltip
label={
{/* Always rendered (CapCut-style): with no keyframeable selection the
button fades to a disabled state instead of unmounting, so the
toolbar layout never shifts. */}
<Tooltip
label={
keyframePathEndpoint
? "Motion path endpoints cannot be removed"
: !onToggleKeyframe
? "Select an animated element to add keyframes"
: keyframeIsMotionPath
? keyframeWillExtend
? "Extend motion path to playhead (K)"
: keyframeState === "active"
? "Remove waypoint from motion path (K)"
: "Add waypoint to motion path (K)"
: keyframeState === "active"
? "Remove keyframe at playhead (K)"
: keyframeState === "inactive"
? keyframeWillExtend
? "Add keyframe at playhead, extends animation (K)"
: "Add keyframe at playhead (K)"
: "Add keyframe (K)"
}
>
<button
type="button"
disabled={!onToggleKeyframe}
onClick={onToggleKeyframe}
aria-label={
keyframePathEndpoint
? "Motion path endpoints cannot be removed"
: !onToggleKeyframe
? "Select an animated element to add keyframes"
: keyframeIsMotionPath
? keyframeWillExtend
? "Extend motion path to playhead (K)"
: keyframeState === "active"
? "Remove waypoint from motion path (K)"
: "Add waypoint to motion path (K)"
: keyframeState === "active"
? "Remove keyframe at playhead (K)"
? "Motion path endpoint"
: keyframeIsMotionPath
? keyframeState === "active"
? "Remove motion path waypoint"
: keyframeWillExtend
? "Extend motion path to playhead"
: "Add motion path waypoint"
: keyframeState === "active"
? "Remove keyframe at playhead"
: "Add keyframe at playhead"
}
className={
!onToggleKeyframe
? flatDisabled
: `${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
keyframeState === "active"
? "text-studio-accent"
: keyframeState === "inactive"
? keyframeWillExtend
? "Add keyframe at playhead, extends animation (K)"
: "Add keyframe at playhead (K)"
: "Add keyframe (K)"
? "text-neutral-400 hover:text-studio-accent"
: "text-neutral-600 hover:text-neutral-400"
}`
}
>
<button
type="button"
disabled={!onToggleKeyframe}
onClick={onToggleKeyframe}
aria-label={
keyframePathEndpoint
? "Motion path endpoint"
: keyframeIsMotionPath
? keyframeState === "active"
? "Remove motion path waypoint"
: keyframeWillExtend
? "Extend motion path to playhead"
: "Add motion path waypoint"
: keyframeState === "active"
? "Remove keyframe at playhead"
: "Add keyframe at playhead"
}
className={
!onToggleKeyframe
? flatDisabled
: `${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
keyframeState === "active"
? "text-studio-accent"
: keyframeState === "inactive"
? "text-neutral-400 hover:text-studio-accent"
: "text-neutral-600 hover:text-neutral-400"
}`
}
>
<svg width="16" height="16" viewBox="0 0 10 10" fill="currentColor">
{keyframeState === "active" ? (
<path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
) : (
<path
d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
fill="none"
stroke="currentColor"
strokeWidth="1.2"
/>
)}
</svg>
</button>
</Tooltip>
)}
{STUDIO_KEYFRAMES_ENABLED && (
<Tooltip
label={
<svg width="16" height="16" viewBox="0 0 10 10" fill="currentColor">
{keyframeState === "active" ? (
<path d="M5 0.5L9.5 5L5 9.5L0.5 5Z" />
) : (
<path
d="M5 1.2L8.8 5L5 8.8L1.2 5Z"
fill="none"
stroke="currentColor"
strokeWidth="1.2"
/>
)}
</svg>
</button>
</Tooltip>
<Tooltip
label={
autoKeyframeEnabled
? "Auto-record manual edits as keyframes (click to turn off)"
: "Manual edits will not be recorded as keyframes (click to turn on)"
}
>
<button
type="button"
onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
aria-label="Auto-record manual edits as keyframes"
aria-pressed={autoKeyframeEnabled}
className={`${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
autoKeyframeEnabled
? "Auto-record manual edits as keyframes (click to turn off)"
: "Manual edits will not be recorded as keyframes (click to turn on)"
}
? "text-red-400 hover:text-red-300"
: "text-neutral-600 hover:text-neutral-400"
}`}
>
<button
type="button"
onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
aria-label="Auto-record manual edits as keyframes"
aria-pressed={autoKeyframeEnabled}
className={`${flatBtn} active:scale-[0.98] hover:bg-white/[0.06] ${
autoKeyframeEnabled
? "text-red-400 hover:text-red-300"
: "text-neutral-600 hover:text-neutral-400"
}`}
>
<svg width="16" height="16" viewBox="0 0 10 10" fill="none">
{/* Same diamond outline as the Add-keyframe icon, with a
<svg width="16" height="16" viewBox="0 0 10 10" fill="none">
{/* Same diamond outline as the Add-keyframe icon, with a
record-style dot inside: filled = auto-recording,
hollow = manual edits won't be keyframed. */}
<path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
<circle
cx="5"
cy="5"
r="1.8"
fill={autoKeyframeEnabled ? "currentColor" : "none"}
stroke="currentColor"
strokeWidth="1"
/>
</svg>
</button>
</Tooltip>
)}
<path d="M5 0.7L9.3 5L5 9.3L0.7 5Z" stroke="currentColor" strokeWidth="1" />
<circle
cx="5"
cy="5"
r="1.8"
fill={autoKeyframeEnabled ? "currentColor" : "none"}
stroke="currentColor"
strokeWidth="1"
/>
</svg>
</button>
</Tooltip>
{onSplitElement &&
(() => {
// Render the button unconditionally (disabled when unusable):
packages/studio/src/components/editor/PropertyPanel.test.tsx
+2 -3
View File
@@ -447,9 +447,8 @@ describe("PropertyPanel — Motion group (Plan 3b)", () => {
it(
"hides the effect list (showEffects off) when the GSAP edit handlers are absent",
async () => {
// STUDIO_GSAP_PANEL_ENABLED defaults on, but none of the five required
// edit handlers are supplied here, so the effect-list half of the
// double-gate stays closed — only the Timing row shows.
// None of the five required edit handlers are supplied here, so the
// effect list stays closed — only the Timing row shows.
const { host, root } = await renderPanel(true, animatedElement());
openFlatGroup(host, "Motion");
const openGroup = openGroupText(host);
packages/studio/src/components/editor/PropertyPanel.tsx
+7 -12
View File
@@ -26,11 +26,7 @@ import { TextSection, StyleSections } from "./propertyPanelSections";
import { GsapAnimationSection } from "./GsapAnimationSection";
import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
import { KeyframeNavigation } from "./KeyframeNavigation";
import {
STUDIO_FLAT_INSPECTOR_ENABLED,
STUDIO_GSAP_PANEL_ENABLED,
STUDIO_KEYFRAMES_ENABLED,
} from "./manualEditingAvailability";
import { STUDIO_FLAT_INSPECTOR_ENABLED } from "./manualEditingAvailability";
import { PropertyPanelFlat } from "./PropertyPanelFlat";
import { createGsapLivePreview } from "./gsapLivePreview";
import { usePlayerStore, liveTime } from "../../player";
@@ -396,7 +392,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
onCommit={(next) => commitManualOffset("x", next)}
/>
</div>
{STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
{gsapAnimId && (
<KeyframeNavigation
property="x"
keyframes={navKeyframes}
@@ -423,7 +419,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
onCommit={(next) => commitManualOffset("y", next)}
/>
</div>
{STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
{gsapAnimId && (
<KeyframeNavigation
property="y"
keyframes={navKeyframes}
@@ -450,7 +446,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
onCommit={(next) => commitManualSize("width", next)}
/>
</div>
{STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
{gsapAnimId && (
<KeyframeNavigation
property="width"
keyframes={navKeyframes}
@@ -477,7 +473,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
onCommit={(next) => commitManualSize("height", next)}
/>
</div>
{STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
{gsapAnimId && (
<KeyframeNavigation
property="height"
keyframes={navKeyframes}
@@ -503,7 +499,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
onCommit={(next) => commitManualRotation(next.replace("°", ""))}
/>
</div>
{STUDIO_KEYFRAMES_ENABLED && gsapAnimId && (
{gsapAnimId && (
<KeyframeNavigation
property="rotation"
keyframes={navKeyframes}
@@ -551,8 +547,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
</Section>
)}
{STUDIO_GSAP_PANEL_ENABLED &&
onUpdateGsapProperty &&
{onUpdateGsapProperty &&
onUpdateGsapMeta &&
onDeleteGsapAnimation &&
onAddGsapProperty &&
packages/studio/src/components/editor/PropertyPanelFlat.tsx
-2
View File
@@ -16,7 +16,6 @@ import { FlatMediaSection } from "./propertyPanelFlatMediaSection";
import { deriveElementTiming } from "./propertyPanelFlatTimingDerivation";
import { createGsapLivePreview } from "./gsapLivePreview";
import { formatTextFieldPreview } from "./propertyPanelSections";
import { STUDIO_GSAP_PANEL_ENABLED } from "./manualEditingAvailability";
import { useColorGradingController } from "./useColorGradingController";
import { usePlayerStore } from "../../player";
import {
@@ -224,7 +223,6 @@ export function PropertyPanelFlat({
// Match the legacy Motion gate while preserving TypeScript narrowing.
const showMotionTiming = Boolean(sections.timing);
const gsapEffectHandlers =
STUDIO_GSAP_PANEL_ENABLED &&
onUpdateGsapProperty &&
onUpdateGsapMeta &&
onDeleteGsapAnimation &&
packages/studio/src/components/editor/manualEditingAvailability.test.ts
+13 -40
View File
@@ -16,35 +16,18 @@ describe("manual editing availability", () => {
vi.resetModules();
});
it("enables inspector selection and manual dragging by default", async () => {
const availability = await loadAvailabilityWithEnv({});
expect(availability.STUDIO_PREVIEW_MANUAL_EDITING_ENABLED).toBe(true);
expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(true);
expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(true);
});
it("disables preview selection when the inspector panel flag is explicitly off", async () => {
const availability = await loadAvailabilityWithEnv({
VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "0",
});
expect(availability.STUDIO_INSPECTOR_PANELS_ENABLED).toBe(false);
expect(availability.STUDIO_PREVIEW_SELECTION_ENABLED).toBe(false);
});
it("enables feature flags with explicit truthy env values", () => {
expect(
resolveStudioBooleanEnvFlag(
{ VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING: "true" },
["VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING"],
{ VITE_STUDIO_ENABLE_FLAT_INSPECTOR: "true" },
["VITE_STUDIO_ENABLE_FLAT_INSPECTOR"],
false,
),
).toBe(true);
expect(
resolveStudioBooleanEnvFlag(
{ VITE_STUDIO_ENABLE_MOTION_PANEL: "1" },
["VITE_STUDIO_ENABLE_MOTION_PANEL"],
{ VITE_STUDIO_SDK_CUTOVER_ENABLED: "1" },
["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
false,
),
).toBe(true);
@@ -53,15 +36,15 @@ describe("manual editing availability", () => {
it("disables feature flags with explicit falsy env values", () => {
expect(
resolveStudioBooleanEnvFlag(
{ VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING: "off" },
["VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING"],
{ VITE_STUDIO_ENABLE_FLAT_INSPECTOR: "off" },
["VITE_STUDIO_ENABLE_FLAT_INSPECTOR"],
true,
),
).toBe(false);
expect(
resolveStudioBooleanEnvFlag(
{ VITE_STUDIO_ENABLE_MOTION_PANEL: "0" },
["VITE_STUDIO_ENABLE_MOTION_PANEL"],
{ VITE_STUDIO_SDK_CUTOVER_ENABLED: "0" },
["VITE_STUDIO_SDK_CUTOVER_ENABLED"],
true,
),
).toBe(false);
@@ -70,18 +53,8 @@ describe("manual editing availability", () => {
it("supports legacy flag aliases after the preferred name", () => {
expect(
resolveStudioBooleanEnvFlag(
{ VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED: "yes" },
[
"VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING",
"VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED",
],
false,
),
).toBe(true);
expect(
resolveStudioBooleanEnvFlag(
{ VITE_STUDIO_MOTION_PANEL_ENABLED: "enabled" },
["VITE_STUDIO_ENABLE_MOTION_PANEL", "VITE_STUDIO_MOTION_PANEL_ENABLED"],
{ VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "yes" },
["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
false,
),
).toBe(true);
@@ -91,10 +64,10 @@ describe("manual editing availability", () => {
expect(
resolveStudioBooleanEnvFlag(
{
VITE_STUDIO_ENABLE_INSPECTOR_PANELS: "off",
VITE_STUDIO_INSPECTOR_PANELS_ENABLED: "on",
VITE_STUDIO_ENABLE_FLAT_INSPECTOR: "off",
VITE_STUDIO_FLAT_INSPECTOR_ENABLED: "on",
},
["VITE_STUDIO_ENABLE_INSPECTOR_PANELS", "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],
["VITE_STUDIO_ENABLE_FLAT_INSPECTOR", "VITE_STUDIO_FLAT_INSPECTOR_ENABLED"],
true,
),
).toBe(false);
packages/studio/src/components/editor/manualEditingAvailability.ts
-41
View File
@@ -1,7 +1,5 @@
export type StudioFeatureFlagEnv = Record<string, boolean | string | undefined>;
const STUDIO_PREVIEW_MANUAL_DRAGGING_ENV = "VITE_STUDIO_ENABLE_PREVIEW_MANUAL_DRAGGING";
const STUDIO_INSPECTOR_PANELS_ENV = "VITE_STUDIO_ENABLE_INSPECTOR_PANELS";
const TRUTHY_ENV_VALUES = new Set(["1", "true", "yes", "on", "enabled"]);
const FALSY_ENV_VALUES = new Set(["0", "false", "no", "off", "disabled"]);
@@ -40,44 +38,6 @@ const runtimeEnv =
: {};
const env = { ...(import.meta.env ?? {}), ...runtimeEnv } as StudioFeatureFlagEnv;
export const STUDIO_PREVIEW_MANUAL_EDITING_ENABLED = resolveStudioBooleanEnvFlag(
env,
[STUDIO_PREVIEW_MANUAL_DRAGGING_ENV, "VITE_STUDIO_PREVIEW_MANUAL_EDITING_ENABLED"],
true,
);
export const STUDIO_INSPECTOR_PANELS_ENABLED = resolveStudioBooleanEnvFlag(
env,
[STUDIO_INSPECTOR_PANELS_ENV, "VITE_STUDIO_INSPECTOR_PANELS_ENABLED"],
true,
);
export const STUDIO_BLOCKS_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
env,
["VITE_STUDIO_ENABLE_BLOCKS_PANEL", "VITE_STUDIO_BLOCKS_PANEL_ENABLED"],
true,
);
export const STUDIO_GSAP_PANEL_ENABLED = resolveStudioBooleanEnvFlag(
env,
["VITE_STUDIO_ENABLE_GSAP_PANEL", "VITE_STUDIO_GSAP_PANEL_ENABLED"],
true,
);
export const STUDIO_KEYFRAMES_ENABLED = resolveStudioBooleanEnvFlag(
env,
["VITE_STUDIO_ENABLE_KEYFRAMES", "VITE_STUDIO_KEYFRAMES_ENABLED"],
true,
);
export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
env,
["VITE_STUDIO_ENABLE_RAZOR_TOOL", "VITE_STUDIO_RAZOR_TOOL_ENABLED"],
true,
);
export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
// Stage 7 Step 3c: SDK cutover — routes inline-style ops through SDK dispatch
// instead of the server patch-element API. Default false; enable via
// VITE_STUDIO_SDK_CUTOVER_ENABLED=true. Requires SDK session to be open.
@@ -114,5 +74,4 @@ export const STUDIO_FLAT_INSPECTOR_ENABLED = resolveStudioBooleanEnvFlag(
true,
);
export const STUDIO_MANUAL_EDITING_DISABLED_TITLE = "Manual editing is temporarily disabled";
import { resolveEnabledSdkFamilies } from "../../utils/sdkCutoverPolicy";
packages/studio/src/components/editor/propertyPanel3dTransform.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { useState } from "react";
import type { DomEditSelection } from "./domEditingTypes";
import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
import { MetricField } from "./propertyPanelPrimitives";
import { KeyframeNavigation } from "./KeyframeNavigation";
import { formatPxMetricValue, parsePxMetricValue, RESPONSIVE_GRID } from "./propertyPanelHelpers";
@@ -259,7 +258,7 @@ function Transform3dField({
}}
/>
</div>
{STUDIO_KEYFRAMES_ENABLED && (gsapAnimId || onCommitAnimatedProperty) && (
{(gsapAnimId || onCommitAnimatedProperty) && (
<KeyframeNavigation
property={prop}
keyframes={ctx.gsapKeyframes}
packages/studio/src/components/editor/propertyPanelFlatLayoutSection.tsx
+1 -2
View File
@@ -2,7 +2,6 @@ import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
import { FlatRow, FlatSegmentedRow, FlatSelectRow } from "./propertyPanelFlatPrimitives";
import { KeyframeNavigation } from "./KeyframeNavigation";
import { formatPxMetricValue } from "./propertyPanelHelpers";
import { STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
import { resolveValueTier } from "./propertyPanelValueTier";
import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
import type { DomEditSelection } from "./domEditingTypes";
@@ -69,7 +68,7 @@ function KeyframeGutter({
| "onConvertToKeyframes"
>) {
const track = useTrackDesignInput();
if (!STUDIO_KEYFRAMES_ENABLED || !gsapAnimId) return null;
if (!gsapAnimId) return null;
const hasKeyframesOnProp = Boolean(navKeyframes?.some((kf) => property in kf.properties));
return (
<span data-flat-kf-gutter="true" style={{ opacity: hasKeyframesOnProp ? 1 : 0.3 }}>
packages/studio/src/components/nle/PreviewOverlays.tsx
+8 -20
View File
@@ -4,12 +4,6 @@ import { DomEditOverlay } from "../editor/DomEditOverlay";
import { MotionPathOverlay } from "../editor/MotionPathOverlay";
import { SnapToolbar } from "../editor/SnapToolbar";
import { useCompositionDimensions } from "../../hooks/useCompositionDimensions";
import {
STUDIO_INSPECTOR_PANELS_ENABLED,
STUDIO_KEYFRAMES_ENABLED,
STUDIO_PREVIEW_MANUAL_EDITING_ENABLED,
STUDIO_PREVIEW_SELECTION_ENABLED,
} from "../editor/manualEditingAvailability";
import { useStudioPlaybackContext, useStudioShellContext } from "../../contexts/StudioContext";
import {
useDomEditActionsContext,
@@ -203,21 +197,17 @@ export function PreviewOverlays({
return <CaptionOverlay iframeRef={previewIframeRef} />;
}
if (!STUDIO_INSPECTOR_PANELS_ENABLED) return null;
return (
<>
<DomEditOverlay
iframeRef={previewIframeRef}
activeCompositionPath={activeCompPath}
hoverSelection={
STUDIO_PREVIEW_SELECTION_ENABLED && !captionEditMode && !compositionLoading && !isPlaying
? domEditHoverSelection
: null
!captionEditMode && !compositionLoading && !isPlaying ? domEditHoverSelection : null
}
selection={shouldShowSelectedDomBounds ? domEditSelection : null}
groupSelections={shouldShowSelectedDomBounds ? domEditGroupSelections : []}
allowCanvasMovement={STUDIO_PREVIEW_MANUAL_EDITING_ENABLED && !isGestureRecording}
allowCanvasMovement={!isGestureRecording}
onCanvasMouseDown={handlePreviewCanvasMouseDown}
onCanvasPointerMove={handlePreviewCanvasPointerMove}
onCanvasPointerLeave={handlePreviewCanvasPointerLeave}
@@ -273,14 +263,12 @@ export function PreviewOverlays({
onMarqueeSelect={applyMarqueeSelection}
/>
<SnapToolbar onSnapChange={setSnapPrefs} />
{STUDIO_KEYFRAMES_ENABLED && (
<MotionPathOverlay
iframeRef={previewIframeRef}
selection={shouldShowMotionPath ? domEditSelection : null}
compositionSize={compositionDimensions}
isPlaying={isPlaying}
/>
)}
<MotionPathOverlay
iframeRef={previewIframeRef}
selection={shouldShowMotionPath ? domEditSelection : null}
compositionSize={compositionDimensions}
isPlaying={isPlaying}
/>
{gestureOverlay}
</>
);
packages/studio/src/components/sidebar/LeftSidebar.tsx
+15 -22
View File
@@ -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} />
)}
packages/studio/src/hooks/useAppHotkeys.ts
+1 -2
View File
@@ -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");
packages/studio/src/hooks/useDomEditPreviewSync.ts
+1 -2
View File
@@ -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;
packages/studio/src/hooks/useDomEditWiring.ts
+2 -3
View File
@@ -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 }
packages/studio/src/hooks/useDomSelection.ts
-27
View File
@@ -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,
packages/studio/src/hooks/usePreviewInteraction.ts
+2 -3
View File
@@ -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;
}
packages/studio/src/hooks/useStudioContextValue.ts
+3 -7
View File
@@ -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.
packages/studio/src/player/components/Timeline.tsx
+1 -2
View File
@@ -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.
packages/studio/src/player/components/TimelineLanes.tsx
+33 -35
View File
@@ -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
packages/studio/src/player/components/useAutoExpandKeyframedClips.ts
-2
View File
@@ -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() };
packages/studio/src/player/components/useTimelineTrackLayout.ts
+1 -5
View File
@@ -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);
packages/studio/src/utils/studioUrlState.test.ts
+5 -8
View File
@@ -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 () => {
packages/studio/src/utils/studioUrlState.ts
+1 -10
View File
@@ -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;
}