mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-14 18:01:20 +08:00
ukimsanov
d230b2dc43
What: the NLE shell layer, shipped unwired: NLEContext (provider extracted from NLELayout — composition stack, drill-down, pane sizing), PreviewPane, AssetPreviewOverlay + assetPreviewStore (hover-preview state), TimelineOverlays (context menus / edit modal / shortcut hint extracted from Timeline), timelineClipChildren, timelineClipDragTypes, and useTimelinePlayerLoop (playback loop extracted from useTimelinePlayer). Why: these are the extracted replacements for NLELayout/StudioPreviewArea and the oversized Timeline/useTimelinePlayer internals. Reviewing them as standalone components keeps the integration wiring PR to glue and deletes. How: new files only, tsc-clean against current main — they intentionally duplicate blocks of their still-alive originals (NLEContext↔NLELayout, TimelineOverlays↔Timeline, useTimelinePlayerLoop↔useTimelinePlayer); the originals are deleted or rewritten by the integration wiring PR, which resolves the duplication. Nothing imports these yet, so .fallowrc.jsonc gains TEMP(studio-dnd) entry registrations; studio-dnd/pr07 removes every one of them in the same diff that mounts the components. Test plan: tsc --noEmit in packages/studio; bunx vitest run (studio suite unchanged); fallow audit --base origin/main clean (duplication is warn-level; dead-file findings covered by the temporary entries).
@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