mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
Vance IngallsandClaude Opus 5
a05f16c5e6
Selecting two audio clips offered "Group selection", which is the layout grouper: it wraps the members in a positioned <div> at their bounding box, rebases each child's left/top against that origin, and adopts the topmost member's z-index. None of that means anything for audio. An <audio> clip has no box — offsetWidth/Height are 0 — so the wrapper came out `width: 0px; height: 0px` with inline left/top written onto elements that are never laid out, and the composition gained a <div> standing for nothing audible. Confirmed against `wrapElementsInHtml` directly: it matched and wrapped, producing exactly that. Refused in `handleGroupSelection`, which is where the G shortcut also lands — a hidden button cannot gate a keystroke. The panel withholds the button as well, so the refusal is not the first the author hears of it. The message names the alternative rather than only declining: audio's answer to "these clips belong together" is an <hf-audio-group> bus, which the timeline's own FX pointer already creates. A mixed selection is refused too — the wrapper would take the audio in with the rest. `isAudioDomElement` sits beside `isAudioTimelineElement` and delegates to it, so the selection layer and the timeline cannot drift into disagreeing about what counts as audio. Six tests across both entry points, each mutation-checked. 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