@vibecuting/video-project-core 0.1.1

package/DESIGN.md

@@ -0,0 +1,29 @@
+# @vibecuting/video-project-core 设计文档
+
+`@vibecuting/video-project-core` 现在只承载视频工程的基础 demo 模板组件。
+它不再负责组件协议、manifest 协议或本地 decorator 协议层。
+
+## 职责
+
+- 提供 `src/core/*` 下的基础模板组件
+  - `intro`
+  - `outro`
+  - `scene`
+  - `scene/2dscene`
+  - `scene/3dscene`
+  - `scene/slide`
+  - `scene/utils`
+- 复用 `@vibecuting/component-project-helper` 的注解和元数据模型
+- 作为视频工程模板与组件工程注解之间的轻量共享层
+
+## 不负责什么
+
+- 不负责 `src/manifest/*`
+- 不负责 `src/decorators/*`
+- 不负责把视频工程再抽象成独立协议包
+
+## 约束
+
+- demo 组件只通过 helper 注解暴露元数据
+- package root 只导出 `src/core/*`
+- 旧的 manifest / decorator 测试和实现不再保留

package/README.md

@@ -0,0 +1,21 @@
+# @vibecuting/video-project-core
+
+这里放视频工程的基础 demo 模板组件。
+
+职责：
+
+- 提供 `src/core/*` 下的 demo 组件
+  - `intro`
+  - `outro`
+  - `scene`
+  - `scene/2dscene`
+  - `scene/3dscene`
+  - `scene/slide`
+  - `scene/utils`
+- 复用 `@vibecuting/component-project-helper` 的注解和元数据模型
+- 只保留基础场景模板，不再承载本地 `manifest` / `decorators` 协议层
+
+常用命令：
+
+- `pnpm typecheck`
+- `pnpm test`

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@vibecuting/video-project-core",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "node ../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/tsc -p tsconfig.json --noEmit",
+    "test": "node ../../../node_modules/vitest/vitest.mjs run"
+  },
+  "dependencies": {
+    "@vibecuting/component-project-helper": "workspace:*",
+    "react": "^19.0.0"
+  },
+  "peerDependencies": {
+    "remotion": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "remotion": "4.0.473"
+  }
+}

package/src/base/BaseRemotionScene.test.tsx

@@ -0,0 +1,27 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+
+import { BaseRemotionScene } from './BaseRemotionScene'
+
+describe('BaseRemotionScene', () => {
+  it('renders a reusable scene frame', () => {
+    const html = renderToStaticMarkup(
+      <BaseRemotionScene name="Opening">
+        <section>demo</section>
+      </BaseRemotionScene>,
+    )
+
+    expect(html).toContain('demo')
+    expect(html).toContain('data-scene-name="Opening"')
+  })
+
+  it('derives a deterministic id when only name is provided', () => {
+    const html = renderToStaticMarkup(
+      <BaseRemotionScene name="Opening Scene">
+        <section>demo</section>
+      </BaseRemotionScene>,
+    )
+
+    expect(html).toContain('id="scene-opening-scene"')
+  })
+})

package/src/base/BaseRemotionScene.tsx

@@ -0,0 +1,38 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { useId } from 'react'
+import { AbsoluteFill } from 'remotion'
+
+import { resolveRemotionSceneId } from './scene-identity'
+
+export interface BaseRemotionSceneProps {
+  id?: string
+  name?: string
+  className?: string
+  style?: CSSProperties
+  children?: ReactNode
+}
+
+export function BaseRemotionScene({
+  id,
+  name,
+  className,
+  style,
+  children,
+}: BaseRemotionSceneProps) {
+  const reactId = useId()
+  const resolvedId = resolveRemotionSceneId({ id, name, reactId })
+
+  return (
+    <AbsoluteFill
+      id={resolvedId}
+      data-scene-name={name}
+      className={className}
+      style={{
+        overflow: 'hidden',
+        ...style,
+      }}
+    >
+      {children}
+    </AbsoluteFill>
+  )
+}

package/src/base/index.ts

@@ -0,0 +1,4 @@
+export { BaseRemotionScene } from './BaseRemotionScene'
+export type { BaseRemotionSceneProps } from './BaseRemotionScene'
+export { resolveRemotionSceneId } from './scene-identity'
+export { useRemotionSceneRuntime } from './use-remotion-scene-runtime'

package/src/base/scene-identity.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+
+import { resolveRemotionSceneId } from './scene-identity'
+
+describe('resolveRemotionSceneId', () => {
+  it('prefers an explicit id', () => {
+    expect(resolveRemotionSceneId({ id: 'intro', name: 'Opening', reactId: ':r0:' })).toBe('intro')
+  })
+
+  it('derives a stable id from name', () => {
+    expect(resolveRemotionSceneId({ name: 'Opening Scene', reactId: ':r0:' })).toBe(
+      'scene-opening-scene',
+    )
+  })
+
+  it('uses a sanitized React id when id and name are omitted', () => {
+    expect(resolveRemotionSceneId({ reactId: ':r0:' })).toBe('scene-r0')
+  })
+})

package/src/base/scene-identity.ts

@@ -0,0 +1,25 @@
+const normalizeSceneIdPart = (value: string) =>
+  value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+
+export function resolveRemotionSceneId(input: {
+  id?: string
+  name?: string
+  reactId: string
+}) {
+  const explicitId = input.id ? normalizeSceneIdPart(input.id) : ''
+  if (explicitId) {
+    return explicitId
+  }
+
+  const namedId = input.name ? normalizeSceneIdPart(input.name) : ''
+  if (namedId) {
+    return `scene-${namedId}`
+  }
+
+  const reactId = normalizeSceneIdPart(input.reactId)
+  return `scene-${reactId || 'anonymous'}`
+}

package/src/base/use-remotion-scene-runtime.test.tsx

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import { useRemotionSceneRuntime } from './use-remotion-scene-runtime'
+
+vi.mock('remotion', () => ({
+  useCurrentFrame: () => 30,
+  useVideoConfig: () => ({
+    fps: 30,
+    width: 1920,
+    height: 1080,
+    durationInFrames: 300,
+  }),
+}))
+
+describe('useRemotionSceneRuntime', () => {
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns derived runtime values', () => {
+    const { result } = renderHook(() => useRemotionSceneRuntime())
+
+    expect(result.current).toEqual({
+      frame: 30,
+      fps: 30,
+      width: 1920,
+      height: 1080,
+      durationInFrames: 300,
+      timeInSeconds: 1,
+      scaleX: 1,
+      scaleY: 1,
+    })
+  })
+})

package/src/base/use-remotion-scene-runtime.ts

@@ -0,0 +1,17 @@
+import { useCurrentFrame, useVideoConfig } from 'remotion'
+
+export function useRemotionSceneRuntime() {
+  const frame = useCurrentFrame()
+  const { fps, width, height, durationInFrames } = useVideoConfig()
+
+  return {
+    frame,
+    fps,
+    width,
+    height,
+    durationInFrames,
+    timeInSeconds: frame / fps,
+    scaleX: width / 1920,
+    scaleY: height / 1080,
+  }
+}

package/src/core/index.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from 'vitest'
+
+import { getComponentProjectComponentMetadata } from '@vibecuting/component-project-helper'
+
+import {
+  Default2DScene,
+  Default3DScene,
+  DefaultIntroBumper,
+  DefaultOutroBumper,
+  DefaultSlideScene,
+} from './index'
+
+describe('video-project-core demo exports', () => {
+  it('exports helper-annotated demo templates from the core entrypoint', () => {
+    expect(getComponentProjectComponentMetadata(DefaultIntroBumper)?.sceneType).toBe('intro')
+    expect(getComponentProjectComponentMetadata(DefaultOutroBumper)?.sceneType).toBe('outro')
+    expect(getComponentProjectComponentMetadata(Default2DScene)?.aspectRatio).toBe('16:9')
+    expect(getComponentProjectComponentMetadata(Default3DScene)?.aspectRatio).toBe('16:9')
+    expect(getComponentProjectComponentMetadata(DefaultSlideScene)?.aspectRatio).toBe('16:9')
+  })
+})

package/src/core/index.ts

@@ -0,0 +1,3 @@
+export * from './intro'
+export * from './outro'
+export * from './scene'

package/src/core/intro/default-intro-bumper.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+
+import {
+  BaseRemotionScene,
+  type BaseRemotionSceneProps,
+  useRemotionSceneRuntime,
+} from '../../base'
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+export interface DefaultIntroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  subtitle?: string
+  accent?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultIntroBumper',
+  description: 'Default remotion intro bumper',
+  sourceFile: 'src/core/intro/default-intro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'intro',
+  tags: ['intro', 'bumper'],
+  propsTypeName: 'DefaultIntroBumperProps',
+})
+
+export function DefaultIntroBumper({
+  id,
+  name,
+  title,
+  subtitle,
+  accent,
+  children,
+}: DefaultIntroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const titleFontSize = Math.round(runtime.height * 0.062)
+  const subtitleFontSize = Math.round(runtime.height * 0.024)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: accent ?? '#0f172a',
+        color: '#fff',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        padding: Math.round(runtime.height * 0.06),
+      }}
+    >
+      <section style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
+        {subtitle ? (
+          <p style={{ margin: 0, fontSize: subtitleFontSize, opacity: 0.82 }}>{subtitle}</p>
+        ) : null}
+        <h1 style={{ margin: '16px 0 0', fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+        {children}
+      </section>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultIntroBumper)

package/src/core/intro/index.ts

@@ -0,0 +1 @@
+export { DefaultIntroBumper } from './default-intro-bumper'

package/src/core/outro/default-outro-bumper.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react'
+
+import {
+  BaseRemotionScene,
+  type BaseRemotionSceneProps,
+  useRemotionSceneRuntime,
+} from '../../base'
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+export interface DefaultOutroBumperProps extends BaseRemotionSceneProps {
+  title: string
+  note?: string
+  children?: ReactNode
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultOutroBumper',
+  description: 'Default remotion outro bumper',
+  sourceFile: 'src/core/outro/default-outro-bumper.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'outro',
+  tags: ['outro', 'bumper'],
+  propsTypeName: 'DefaultOutroBumperProps',
+})
+
+export function DefaultOutroBumper({ id, name, title, note, children }: DefaultOutroBumperProps) {
+  const runtime = useRemotionSceneRuntime()
+  const titleFontSize = Math.round(runtime.height * 0.062)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        background: '#e2e8f0',
+        color: '#0f172a',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        padding: Math.round(runtime.height * 0.06),
+      }}
+    >
+      <footer style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
+        <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+        {note ? <p style={{ margin: '16px 0 0' }}>{note}</p> : null}
+        {children}
+      </footer>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultOutroBumper)

package/src/core/outro/index.ts

@@ -0,0 +1 @@
+export { DefaultOutroBumper } from './default-outro-bumper'

package/src/core/scene/2dscene/default-2d-scene.tsx

@@ -0,0 +1,52 @@
+import {
+  BaseRemotionScene,
+  type BaseRemotionSceneProps,
+  useRemotionSceneRuntime,
+} from '../../../base'
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+export interface Default2DSceneProps extends BaseRemotionSceneProps {
+  title: string
+  subtitle?: string
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'Default2DScene',
+  description: 'Default remotion 2D scene',
+  sourceFile: 'src/core/scene/2dscene/default-2d-scene.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  tags: ['scene', '2d'],
+  propsTypeName: 'Default2DSceneProps',
+})
+
+export function Default2DScene({ id, name, title, subtitle }: Default2DSceneProps) {
+  const runtime = useRemotionSceneRuntime()
+  const titleFontSize = Math.round(runtime.height * 0.062)
+  const subtitleFontSize = Math.round(runtime.height * 0.024)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        backgroundColor: '#111827',
+        color: '#f8fafc',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        padding: Math.round(runtime.height * 0.06),
+      }}
+    >
+      <div style={{ width: '100%', maxWidth: Math.round(runtime.width * 0.72) }}>
+        <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+        {subtitle ? <p style={{ margin: '16px 0 0', fontSize: subtitleFontSize }}>{subtitle}</p> : null}
+      </div>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(Default2DScene)

package/src/core/scene/2dscene/index.ts

@@ -0,0 +1 @@
+export { Default2DScene } from './default-2d-scene'

package/src/core/scene/3dscene/default-3d-scene.tsx

@@ -0,0 +1,54 @@
+import {
+  BaseRemotionScene,
+  type BaseRemotionSceneProps,
+  useRemotionSceneRuntime,
+} from '../../../base'
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+export interface Default3DSceneProps extends BaseRemotionSceneProps {
+  title: string
+  depth?: number
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'Default3DScene',
+  description: 'Default remotion 3D scene',
+  sourceFile: 'src/core/scene/3dscene/default-3d-scene.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  tags: ['scene', '3d'],
+  propsTypeName: 'Default3DSceneProps',
+})
+
+export function Default3DScene({ id, name, title, depth = 240 }: Default3DSceneProps) {
+  const runtime = useRemotionSceneRuntime()
+  const titleFontSize = Math.round(runtime.height * 0.062)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        backgroundColor: '#020617',
+        color: '#e2e8f0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        padding: Math.round(runtime.height * 0.06),
+        perspective: 1200,
+      }}
+    >
+      <div style={{ transform: `translateZ(${depth / 8}px) rotateY(-18deg)` }}>
+        <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+        <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024), opacity: 0.8 }}>
+          Depth {depth}
+        </p>
+      </div>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(Default3DScene)

package/src/core/scene/3dscene/index.ts

@@ -0,0 +1 @@
+export { Default3DScene } from './default-3d-scene'

package/src/core/scene/index.ts

@@ -0,0 +1,4 @@
+export * from './2dscene'
+export * from './3dscene'
+export * from './slide'
+export * from './utils'

package/src/core/scene/slide/default-slide-scene.tsx

@@ -0,0 +1,51 @@
+import {
+  BaseRemotionScene,
+  type BaseRemotionSceneProps,
+  useRemotionSceneRuntime,
+} from '../../../base'
+import {
+  VideoComponent,
+  defineComponentProjectComponentMetadata,
+} from '@vibecuting/component-project-helper'
+
+export interface DefaultSlideSceneProps extends BaseRemotionSceneProps {
+  title: string
+  body?: string
+}
+
+export const componentMetadata = defineComponentProjectComponentMetadata({
+  name: 'DefaultSlideScene',
+  description: 'Default remotion slide scene',
+  sourceFile: 'src/core/scene/slide/default-slide-scene.tsx',
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  tags: ['scene', 'slide'],
+  propsTypeName: 'DefaultSlideSceneProps',
+})
+
+export function DefaultSlideScene({ id, name, title, body }: DefaultSlideSceneProps) {
+  const runtime = useRemotionSceneRuntime()
+  const titleFontSize = Math.round(runtime.height * 0.062)
+
+  return (
+    <BaseRemotionScene
+      id={id}
+      name={name}
+      style={{
+        backgroundColor: '#f8fafc',
+        color: '#0f172a',
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'flex-start',
+        padding: Math.round(runtime.height * 0.06),
+      }}
+    >
+      <aside style={{ maxWidth: Math.round(runtime.width * 0.72) }}>
+        <h1 style={{ margin: 0, fontSize: titleFontSize, lineHeight: 1.05 }}>{title}</h1>
+        {body ? <p style={{ margin: '16px 0 0', fontSize: Math.round(runtime.height * 0.024) }}>{body}</p> : null}
+      </aside>
+    </BaseRemotionScene>
+  )
+}
+
+VideoComponent(componentMetadata)(DefaultSlideScene)

package/src/core/scene/slide/index.ts

@@ -0,0 +1 @@
+export { DefaultSlideScene } from './default-slide-scene'

package/src/core/scene/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './scene-shell'
+export * from './scene-size'

package/src/core/scene/utils/scene-shell.tsx

@@ -0,0 +1,35 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+import { createSceneShellStyle, type DemoAspectRatio } from './scene-size'
+
+export function SceneShell({
+  aspectRatio,
+  width,
+  backgroundColor,
+  className,
+  style,
+  children,
+}: {
+  aspectRatio: DemoAspectRatio
+  width: number
+  backgroundColor: string
+  className?: string
+  style?: CSSProperties
+  children: ReactNode
+}) {
+  return (
+    <div
+      className={className}
+      style={{
+        ...createSceneShellStyle({
+          aspectRatio,
+          width,
+          backgroundColor,
+        }),
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/core/scene/utils/scene-size.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+
+import { createSceneShellStyle, resolveDemoSceneSize } from './scene-size'
+
+describe('scene utils', () => {
+  it('resolves 16:9 and 9:16 sizes', () => {
+    expect(resolveDemoSceneSize('16:9', 1920).height).toBe(1080)
+    expect(resolveDemoSceneSize('9:16', 1080).height).toBe(1920)
+  })
+
+  it('builds a centered shell style', () => {
+    const style = createSceneShellStyle({
+      aspectRatio: '16:9',
+      width: 1280,
+      backgroundColor: '#0f172a',
+    })
+
+    expect(style.width).toBe(1280)
+    expect(style.backgroundColor).toBe('#0f172a')
+    expect(style.overflow).toBe('hidden')
+  })
+})

package/src/core/scene/utils/scene-size.ts

@@ -0,0 +1,25 @@
+export type DemoAspectRatio = '9:16' | '16:9'
+
+export function resolveDemoSceneSize(aspectRatio: DemoAspectRatio, width: number) {
+  if (aspectRatio === '9:16') {
+    return { width, height: Math.round((width * 16) / 9) }
+  }
+
+  return { width, height: Math.round((width * 9) / 16) }
+}
+
+export function createSceneShellStyle(input: {
+  aspectRatio: DemoAspectRatio
+  width: number
+  backgroundColor: string
+}) {
+  const size = resolveDemoSceneSize(input.aspectRatio, input.width)
+
+  return {
+    position: 'relative' as const,
+    overflow: 'hidden' as const,
+    width: size.width,
+    height: size.height,
+    backgroundColor: input.backgroundColor,
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './core';
+export * from './base';

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.packages.json",
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["src/**/*.test.ts", "src/**/*.test.tsx"]
+}

package/vitest.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from 'vitest/config'
+import path from 'path'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+  },
+  resolve: {
+    alias: {
+      '@vibecuting/component-project-helper': path.resolve(
+        __dirname,
+        '../component-project-helper/src/index.ts',
+      ),
+      '@vibecuting/video-project-core': path.resolve(__dirname, './src/index.ts'),
+    },
+  },
+})