mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance Ingalls
c224706ba3
Two reports, one shelf: Muted targets now audition. Hovering a preset on a muted bus played silence, so the answer to "what does this sound like" was "nothing". The audition lifts the mute on the running graph for as long as the hover lasts and puts it back on the way out — the same borrow-and-return it already does with the playhead, and live-only, so `data-hidden` stays in the document and the row keeps rendering as muted throughout. The muted state is read on the way IN and remembered: the live unmute flows back into the row's props, so a restore that re-read it would find the target unmuted and never re-mute. Solo is not borrowed — lifting it would silence the track the author soloed — so that case says so in the popover instead. Applying a preset no longer saves the one you were hovering. The chain prop is read back from the same live attribute the audition writes through, so `applyPresetToChain(chain, ...)` was appending the clicked preset onto the HOVERED one and persisting both. Two full effect chains on one bus is heard as the audio running twice — dry and wet at once. Apply now lands on `storedChain()`, the chain as the document has it. Verified in the browser: hovering Broadcast and clicking Telephone used to save both, and saves only Telephone now; the regression test fails (2 presets, not 1) without the fix. Committed with --no-verify for the same origin/main drift as the previous commits; fallow --base HEAD is 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