mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 04:38:33 +00:00
Vance Ingalls
fb24ecac22
Review feedback on #2497 (Rames D Jusso) found a real gap: the exclusivity this PR introduced only applied to the direct in-panel tab click, which calls setExclusiveRightInspectorPane. Every OTHER caller that reaches setRightPanelTab("design"|"layers") — element select (useDomSelection.ts), closing block-params (App.tsx), the header Inspector button (StudioHeader.tsx), and even this PR's own "!inspectorTabActive" entry branch in handleInspectorPaneButtonClick — went through trackedSetRightPanelTab's old unconditional additive `{...panes, [tab]: true}`, reproducing the exact "both tabs highlight, only one renders" bug this PR claims to fix. Confirmed via the reviewer's traced repro: fresh boot, click Layers tab while no inspector tab is yet active → rightInspectorPanes ends up {design:true, layers:true}. Fixed at the reviewer's preferred choke point: trackedSetRightPanelTab itself is now flat-aware, applying the same exclusive-radio update setExclusiveRightInspectorPane does whenever STUDIO_FLAT_INSPECTOR_ENABLED is on, falling back to the legacy additive update otherwise. This closes the gap for every current and future caller of setRightPanelTab, not just the one call site this PR touched. New usePanelLayout.test.ts cases pin both directions: setRightPanelTab stays additive under flat=off (legacy split-view behavior unchanged), and enforces exclusivity under flat=on even when called directly (not through the tab-click handler) — using the vi.doMock(manualEditingAvailability) pattern already established in PropertyPanel.test.tsx for flag-dependent module state. Full studio suite (2643 tests) green; typecheck/oxlint/oxfmt clean.
@hyperframes/studio
Browser-based composition editor UI for Hyperframes. Provides a visual timeline, code editor, and live preview for building video compositions.
Install
npm install @hyperframes/studio
What it does
The studio is a React application with:
- Visual timeline — drag, resize, and arrange elements on tracks
- Code editor — edit HTML and GSAP scripts with CodeMirror (syntax highlighting, autocomplete)
- Live preview — see changes in real time as you edit
- Composition inspector — view and modify element properties
Development
The studio is embedded in the hyperframes preview command. To develop the studio UI itself:
cd packages/studio
bun run dev # Start Vite dev server
bun run build # Build for production
bun run typecheck # Type-check
Tech stack
- React 18/19, Zustand (state management)
- CodeMirror 6 (editor)
- Tailwind CSS (styling)
- Vite (bundler)
- Phosphor Icons
Documentation
Full documentation: hyperframes.heygen.com/packages/studio
Related packages
@hyperframes/core— types and parsers used by the editorhyperframes— CLI that serves the studio viahyperframes preview