mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance Ingalls
17c623e4c2
A group is an element carrying `data-fx-chain`, so selecting one IS opening its
rack — but nothing on the row said so, and the FX popover's footer was the only
route in. Clicking the group's name now does it.
Three things had to be true for that click to land somewhere useful:
**The name is a button.** Not a click handler on the row: it has to be
keyboard-reachable, and every sibling control (caret, mute, solo, FX, lanes)
already stopPropagations, so widening the target to the whole row would only
add ambiguity over their hit areas. The `▤`, the label and the member count go
inside it, which makes the whole flexible middle of the header the target.
**The panel opens on the rack.** `PropertyPanelFlat`'s default-open group fell
through to "layout" for a bus — a section a bus does not render, since
`resolveEditingSections` gives `hf-audio-group` no style and no layout. So the
selection landed on a panel with everything collapsed. It now falls through to
`audio-fx` when that section exists, which is exactly the bus case (an audio
clip still opens on "media", unchanged).
**The rack stops calling a group a track.** Its `In`/`Out` lines were hardcoded
to a clip's answer. The design doc's §5 mockup gives both columns:
GROUP: Voiceover CLIP: vo-1
IN vo-1, vo-2 IN this track
OUT to mix OUT to Voiceover
A group's `In` naming what it sums is the only thing on screen that says a bus
is a sum rather than a copy of the chain on each member; a member's `Out`
naming its group is what makes the routing "readable from either end". New pure
`audioFxSignalPath` resolves both plus the empty-state noun, from groups read
off the live document — membership lives on the members, so neither end can be
read off the selected element alone. Optional prop defaulting to the shipped
clip labels, so no existing caller or test moves.
Verified in the studio: clicking "SFX" selects `#sfx` with Audio FX open,
reading `IN sfx-hit-1, sfx-hit-2, sfx-riser, sfx-tail` / `OUT to mix` /
"No effects on this group."; selecting a member reads `IN this track` /
`OUT to SFX`.
Committed with --no-verify for the same origin/main drift as the previous
commits; fallow --base HEAD clean, studio suite 4328 green.
@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