mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-05 00:56:23 +00:00
Miguel Ángel
ffbc18ad31
Adds a Blocks tab to the Studio left sidebar with the full 78-item registry
catalog (58 blocks + 20 components). Users can browse by category, search by
title/description, preview CDN-hosted poster thumbnails with video-on-hover,
and install items on-demand with one click or drag-to-timeline.
Core changes:
- BlockCategory type + resolveBlockCategory() for 7 categories (Captions, VFX,
Transitions, Effects, Social, Data, Scenes)
- Registry API routes: GET /api/registry/blocks (catalog) + POST install
- StudioApiAdapter extended with listRegistryCatalog + installRegistryBlock
- Vite adapter reads from disk; CLI adapter fetches from GitHub (24h cache)
- BlockParam interface + params on 6 blocks for future parameter controls
Studio UI:
- 4th sidebar tab "Blocks" with responsive grid, category pills, search bar
- BlockCard: CDN poster thumbnail, video autoplay on hover, duration + WebGL badges
- On-demand install: blocks append as sub-compositions on timeline; components
overlay at start=0 spanning full duration with transparent background patching
- TIMELINE_BLOCK_MIME drag-and-drop to timeline
- BlockParamsPanel (Phase 3 scaffold) auto-opens for parameterized blocks
Registry manifests:
- All 58 blocks backfilled with preview: { video, poster } CDN URLs
- All 20 components normalized to object format + poster URLs added
- 6 blocks annotated with params (Liquid Glass/Background, Portal, Chart,
Logo Outro, Magnetic)
- flowchart-vertical preview generated and uploaded to CDN
34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { Hono } from "hono";
|
|
import type { StudioApiAdapter } from "./types.js";
|
|
import { registerProjectRoutes } from "./routes/projects.js";
|
|
import { registerFileRoutes } from "./routes/files.js";
|
|
import { registerPreviewRoutes } from "./routes/preview.js";
|
|
import { registerLintRoutes } from "./routes/lint.js";
|
|
import { registerRenderRoutes } from "./routes/render.js";
|
|
import { registerThumbnailRoutes } from "./routes/thumbnail.js";
|
|
import { registerWaveformRoutes } from "./routes/waveform.js";
|
|
import { registerFontRoutes } from "./routes/fonts.js";
|
|
import { registerRegistryRoutes } from "./routes/registry.js";
|
|
|
|
/**
|
|
* Create a Hono sub-app with all studio API routes.
|
|
*
|
|
* Both the vite dev server and CLI embedded server mount this app
|
|
* under /api, each providing their own adapter for host-specific behavior.
|
|
*/
|
|
export function createStudioApi(adapter: StudioApiAdapter): Hono {
|
|
const api = new Hono();
|
|
|
|
registerProjectRoutes(api, adapter);
|
|
registerFileRoutes(api, adapter);
|
|
registerPreviewRoutes(api, adapter);
|
|
registerLintRoutes(api, adapter);
|
|
registerRenderRoutes(api, adapter);
|
|
registerThumbnailRoutes(api, adapter);
|
|
registerWaveformRoutes(api, adapter);
|
|
registerFontRoutes(api);
|
|
registerRegistryRoutes(api, adapter);
|
|
|
|
return api;
|
|
}
|