mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
Vance Ingalls
4bcc7e1882
Deleting a clip refused its own save. The flow reads the file, POSTs `remove-element` — which rewrites the file server-side — then saves the duration shrink on top. That second write carried the content read at the start as its optimistic-concurrency expectation, but the server had already moved the file on, so it came back 409 "file conflict". The save queue pauses on a conflict rather than retry stale work, so the error surfaced and nothing persisted afterwards; the clip stayed on the timeline until a reload, since the store update runs after the save and the throw skipped it. The undo baseline and "what is on disk" were one value in saveProjectFilesWithHistory, which is right until a server-side mutation has already written part of the edit. They are now separable: `diskContent` says what to expect on disk, `readFile` still says what undo restores. Both delete paths pass what remove-element left behind. Measured in the studio, before and after: PUT /files/index.html 409 -> 200, no error toast, the clip leaves the timeline immediately, and undo still brings it back. Pre-existing — reproduced identically on the pre-session studio source.
@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