mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
6de75fd4b4
Browser-verified the one surface that had never been run: a group and its members declared entirely inside a sub-composition. Both fixes written for that case were broken, and both of their tests passed — because I wrote fixtures that matched my assumption instead of the DOM. Membership never arrived. `hostElementState` inherits from the flat store twin, and a sub-comp that declares its own group keeps those members OUT of the flat store — the store held three elements (panel, sub-comp host, bed) and neither voice. So there was nothing to inherit from and no group row appeared at all. Membership now rides `DomClipChild`, captured during the DOM walk that is the only place holding the child's live element, with the flat twin still preferred when it exists. Routing never worked either. `getTimelineElementSourceFile` stops at the nearest `[data-composition-id]`, which for an inlined sub-composition is its own ROOT element — that carries the composition id but not the file. The file sits on the HOST above it: hf-audio-group#voiceover (no composition attrs) section#voices-root data-composition-id="voices" <- stopped here div#voices-host data-composition-file="...voices.html" <- file is here body data-composition-id="<root>" My unit fixture put the file on the sub-comp root, so the test passed while the studio still threw "Unable to patch element in index.html" on every mute, fader move and FX preset. The resolver climbs composition ancestors until one names a file, and returns undefined for a root-level group so the caller still falls back to activeCompPath. The new tests use the ancestor shape copied from a live preview, and both fixes were mutation-checked. Verified end to end in the studio: the group row appears with its members nested, mute writes `data-hidden` into compositions/voices.html and not index.html, unmute removes it, and the fader writes data-volume="0.35" to the same file. 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