Architecture

Architecture / 技术架构

Timeline Studio is a React and Vite browser application. Its editor is split by functional domain instead of relying on one monolithic controller.

Timeline Studio 是基于 React 与 Vite 的浏览器应用。编辑器按功能域拆分，而不是依赖单一的巨型控制器。

Major domains / 主要领域

• Editor UI: media workspace, preview stage, contextual inspectors, and timeline composition.

• Timeline model: contiguous Visuals sequencing plus freely timed overlays, captions, stickers, and audio lanes.

• Playback: native media playback optimized separately from React timeline state updates.

• Offline export: shared composition geometry, exact timestamp frame resolution, OfflineAudioContext mixing, and WebCodecs encoding.

• AI workers: ASR, vision, vocal separation, JoyVASA, and LivePortrait run in dedicated workers where appropriate.

• Persistence: portable .timeline projects, service-worker app shell, and revision-pinned model caching.

• 编辑器 UI： 媒体工作区、预览画布、上下文属性面板与时间线组合。

• 时间线模型： 连续主画面，以及自由定时的画中画、字幕、贴纸与音频轨。

• 播放： 原生媒体播放与 React 时间线状态更新分离优化。

• 离线导出： 共享合成几何、精确时间戳取帧、OfflineAudioContext 混音与 WebCodecs 编码。

• AI Worker： ASR、视觉、人声分离、JoyVASA 与 LivePortrait 按需运行在独立 Worker。

• 持久化： 可移植 .timeline 工程、Service Worker 应用外壳以及锁定版本的模型缓存。

Preview and export parity / 预览与导出一致性

Preview and export share layout and composition rules for transforms, contain/cover fitting, captions, masks, effects, stickers, overlays, keyframes, animations, and transitions. Real-time playback remains a separate path so editor responsiveness does not compromise deterministic export.

预览和导出共享变换、contain/cover、字幕、遮罩、效果、贴纸、画中画、关键帧、动画和转场规则。实时播放保持独立，避免编辑器响应性影响确定性导出。

Repository checks / 仓库检查

npm run lint
npm run typecheck
npm test
npm run build
npm run check