feat(studio): consolidate into single OSS-ready NLE editor#7
Closed
miguel-heygen wants to merge 1 commit intofeat/core-compilerfrom
Closed
feat(studio): consolidate into single OSS-ready NLE editor#7miguel-heygen wants to merge 1 commit intofeat/core-compilerfrom
miguel-heygen wants to merge 1 commit intofeat/core-compilerfrom
Conversation
Replace legacy frontend/backend split with single Vite-powered package. Absorb @hyperframes/ui-player into studio/src/player/. Features: - NLE layout: preview + timeline + composition drill-down (3 levels) - Source editor with CodeMirror (HTML/CSS/JS) - Bundled preview via @hyperframes/core/compiler - File watcher for hot reload on external edits - Playback speed control (0.25x-2x) - Extensible via slots (previewOverlay, timelineFooter) - Path traversal protection on all API endpoints - Support both hf-*/magic-edit-* postMessage sources
Collaborator
Author
|
Warning This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
This stack of pull requests is managed by Graphite. Learn more about stacking. |
This was referenced Mar 21, 2026
Merged
2 tasks
miguel-heygen
added a commit
that referenced
this pull request
Apr 7, 2026
## Summary Adds critical rendering constraints to the `hyperframes` skill discovered from eval analysis of 27 agent-generated compositions. These guardrails prevent agents from producing compositions that technically work but render poorly. ## What it fixes | Rule Added | Eval Prompts Affected | Issue | | --- | --- | --- | | Ban `repeat: -1` | #20 loading-spinner (2.0/5) | Infinite timeline broke capture engine | | Ban async timeline construction | #16 particle-logo (2.6/5) | Timeline empty at capture time | | Min font size 16px (labels), 20px (body) | #7, #8, #13, #14, #15, #19 | Illegible text after encoding | | Ban full-screen dark linear gradients | #3, #5, #10, #14 | H.264 color banding | | `<link>` fonts over CSS `@import` | #7, #24 | Font loading race conditions | ## Changes - **Rules section**: Added `repeat: -1` ban, async timeline ban, items 8-9 to "Never do" list - **Typography section**: Expanded font size guidance with specific minimums per text role (headlines, body, labels) - **New "Backgrounds and Color" section**: Guidance on avoiding gradient banding - **Output Checklist**: 5 new items covering all new constraints ## Test plan - [ ] Run eval with updated skill and compare avg quality scores - [x] Skill renders correctly in `/hyperframes` invocation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Consolidate
@hyperframes/studiofrom a split frontend/backend architecture into a single Vite-powered package. Absorb@hyperframes/ui-player(Player, Timeline, PlayerControls, Zustand store) directly intostudio/src/player/. Remove all agent-specific and infinite canvas code — the package is now a clean, embeddable NLE editor.Why
The old studio had separate
studio/frontendandstudio/backendpackages with a Hono server, making it heavy to run and impossible to use standalone. Thehyperframes devCLI command needs a single self-contained editor that starts instantly. For OSS, the studio must work without archive, producer, or any HeyGen infrastructure.How
devProjectApi) that serves project files, bundled HTML previews, and handles file writes — no separate backend process needed@hyperframes/core/compiler(bundleToSingleHtml) injects the HyperFrames runtime and inlines sub-compositions at serve timePlayer.tsx,Timeline.tsx,PlayerControls.tsx,useTimelinePlayerhook, andplayerStoremoved intostudio/src/player/NLELayout.tsx): resizable preview + timeline split with composition drill-down up to 3 levels deep (Premiere-style breadcrumb navigation)previewOverlayandtimelineFooterprops allow archive to inject agent cursors, highlights, and activity tracks without any agent code in studio itselftimeScale()+ runtime bridgeset-playback-rateisSafePath()guard on all endpoints that resolve user-controlled paths, 403 on write attempts that escape the project directoryhf-parent/hf-previewandmagic-edit-parent/magic-edit-previewto support the CDN runtime__clipManifestisn't available (no runtime), parsesdata-startattributes directly from the iframe DOM to populate the timelineNotable decisions:
useState(() => { fetch(...) })anti-pattern replaced withuseEffectsourcePatcher.tsfixed withescapeRegex()helperclassNameused only for cliplabel(human-readable), notid(must be unique)dev-server.tsremoved (Vite plugin replaces it entirely)Test plan
cd packages/studio && pnpm devstarts the studio on localhostsed -i) triggers hot reload via file watcher__node__indexclips from sub-compositions don't leak into root timeline