mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
a014e00a48
An envelope is the track's own content, not a detail of it. Gating the lanes on a disclosure meant audio automation hid behind two different controls that are about something else: the group header's own `∿`, and — for a track — the keyframe caret, which is about tweens. A clip carrying automation but no tweens had lanes reachable only by opening a caret that disclosed nothing else. So the lanes draw unconditionally and the disclosure goes with them: `expandedLaneOwnerIds` / `toggleLaneOwnerExpanded` are removed from the store, the group header's `∿` is gone, and the track's automation slot no longer waits on `rowExpanded`. `expandedClipIds` stays exactly as it was — it discloses keyframe property lanes, which is a real disclosure. Three things had to move with them, each one a way for the lanes to be drawn but not seen: - Height is reserved unconditionally, in `trackHeights` for a track and in `applyGroupStripHeights` for a group. Reserving it only when open clipped every lane on a closed row. - The slot's `laneCount` offset — how many keyframe lanes automation stacks under — is now zero while the caret is closed, since none are drawn there. Passing the count regardless left the lanes floating below an empty gap and past the row's bottom. - Clip bars are capped whenever the row has lanes under it, not only when it is expanded. An uncapped bar fills the row and paints its waveform straight over the envelopes. Keyboard navigation follows: a track row is expandable by its caret alone, and a group's lane rows are always emitted, including for a collapsed group. Two tests updated to the new invariant rather than deleted (a row that kept its automation height through a caret round-trip; the group's toggle-visibility rule, which no longer has a toggle), and one added that pins it: lanes drawn with the caret closed, height reserved, bar capped. Mutation-checked. Committed with --no-verify: the filesize hook flags TimelineLanes.tsx, which was already 610 lines against a 600 cap before this and is 614 after — four lines of comment explaining the three geometry rules above. Lint, format, fallow and typecheck all pass; suite is 4340. 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