mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
be71b59523
The group row now reads like every other gutter row: caret, then the name and its member count, then every control anchored to the right edge — FX and the automation toggle in one right-aligned group, sharing the same column as a member track's own. Same reasoning as the track headers a commit ago. The second line existed to keep five controls from squeezing the label, but the name truncates on its own and the controls are `shrink-0`, so they hold the edge and the name gives way instead. Two things had to give for `ml-auto` to work: - `GroupNameButton` lost its `flex-1`, and with it the spacer span that used to eat the slack to keep the count beside the name. The row's control group owns the slack now; leaving either in place pushed the controls — and the count, which rides inside that button — off the edge. - The name button gained `h-6`. At its natural 17px it centred 4px lower than the 24px buttons beside it, so the four controls sat on three different baselines. All four now measure top 12, height 24. Nothing asserted this header's shape, so the group side had none of the protection the track side got: the test checks three children, the controls in an `ml-auto` group, and the count NOT in it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@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