@vibecuting/video-project-core 0.1.25 → 0.1.26

package/src/core/scene/slide/title-with-image/default-title-with-image-slide-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultTitleWithImageSlide, componentMetadata as baseComponentMetadata } from './default-title-with-image-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultTitleWithImageSlideLandscape',
+  description: "Title with image slide (Landscape 16:9 variant)",
+  sourceFile: 'src/core/scene/slide/title-with-image/default-title-with-image-slide-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultTitleWithImageSlideLandscape = VideoComponent(componentMetadata)(function DefaultTitleWithImageSlideLandscape(
+  props: ComponentProps<typeof DefaultTitleWithImageSlide>,
+) {
+  return <DefaultTitleWithImageSlide {...props} />
+})

package/src/core/scene/slide/title-with-image/default-title-with-image-slide.animated.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultTitleWithImageSlideLandscape } from './default-title-with-image-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/title-with-image/DefaultTitleWithImageSlideLandscape/Animated',
+  component: DefaultTitleWithImageSlideLandscape,
+  args: {
+    title: 'Title with Image',
+    subtitle: 'A title slide paired with a visual block.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/title-with-image/default-title-with-image-slide.stories.tsx

@@ -0,0 +1,18 @@
+import { DefaultTitleWithImageSlideLandscape } from './default-title-with-image-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/title-with-image/DefaultTitleWithImageSlideLandscape',
+  component: DefaultTitleWithImageSlideLandscape,
+  args: {
+    title: 'Title with Image',
+    subtitle: 'A title slide paired with a visual block.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/title-with-image/default-title-with-image-slide.tsx

@@ -0,0 +1,71 @@
+import type { ReactNode } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+import { SceneMotionLayer, useRemotionSceneRuntime } from '../../../../base'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+import { SlideFrame, getSlideTypographyScale } from '../_shared'
+
+export interface DefaultTitleWithImageSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  image?: ReactNode
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultTitleWithImageSlide',
+  description: 'Title with image slide',
+  sourceFile: 'src/core/scene/slide/title-with-image/default-title-with-image-slide.tsx',
+  pluginKey: 'core.slide.title-with-image',
+  tags: ['scene', 'slide', 'title-with-image'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultTitleWithImageSlideProps',
+})
+
+export const DefaultTitleWithImageSlide = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'slide',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().min(1),
+      subtitle: z.string().optional(),
+      image: z.any().optional(),
+    }),
+    component: function DefaultTitleWithImageSlide({ sceneId, sceneName, title, subtitle, image }: DefaultTitleWithImageSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const { height, width } = runtime
+      const isPortrait = height > width
+      const scale = getSlideTypographyScale(height)
+
+      return (
+        <SlideFrame pluginKey={componentMetadata.pluginKey} sceneId={sceneId} sceneName={sceneName ?? title} background="#ffffff">
+          <section style={{ display: 'grid', gridTemplateColumns: isPortrait ? '1fr' : '1fr 1.1fr', gap: isPortrait ? 20 : 28, width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '64px 80px', color: '#0f172a', alignItems: 'stretch' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', minWidth: 0 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.05em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                  <p style={{ margin: '14px 0 0', maxWidth: isPortrait ? 560 : 520, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.45, opacity: 0.8 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div style={{ minHeight: isPortrait ? 280 : 360, borderRadius: 0, overflow: 'hidden', border: '1px solid rgba(148,163,184,0.24)', background: '#f8fafc', display: 'grid', placeItems: 'center' }}>
+                {image ?? <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.56 }}>Image</div>}
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/title-with-image/index.ts

@@ -0,0 +1,4 @@
+export { DefaultTitleWithImageSlide } from './default-title-with-image-slide'
+export { componentMetadata } from './default-title-with-image-slide'
+export { DefaultTitleWithImageSlideLandscape, componentMetadata as DefaultTitleWithImageSlideLandscapeMetadata } from './default-title-with-image-slide-Landscape'
+export { DefaultTitleWithImageSlideHorizontal, componentMetadata as DefaultTitleWithImageSlideHorizontalMetadata } from './default-title-with-image-slide-Horizontal'

package/src/runtime/use-scene-root-props.ts

@@ -1,6 +1,7 @@
 import type { CSSProperties } from 'react'
 import { useId } from 'react'
 
+import { useSceneConfig, useResolvedSceneTheme } from '../base'
 import type { SceneTheme, SceneThemeStyle } from '../themes'
 
 export type SceneRootOptions = {
@@ -16,16 +17,23 @@ export function useSceneRootProps(options: SceneRootOptions): {
   id: string
   'data-scene-plugin': string
   'data-scene-name'?: string
+  'data-scene-display-mode': 'static' | 'animation'
+  'data-scene-token'?: string
   className: string
   style: CSSProperties
 } {
   const reactId = useId()
+  const sceneConfig = useSceneConfig()
+  const resolvedTheme = useResolvedSceneTheme()
+  const themeVariables = sceneConfig.sceneToken ? undefined : (options.theme ?? resolvedTheme)
   const id = options.sceneId ?? `${options.pluginKey}-${reactId.replace(/:/g, '')}`
 
   return {
     id,
     'data-scene-plugin': options.pluginKey,
     'data-scene-name': options.sceneName,
+    'data-scene-display-mode': sceneConfig.sceneType,
+    'data-scene-token': sceneConfig.sceneToken,
     className: [
       'box-border flex h-full w-full flex-col overflow-hidden',
       'bg-[var(--scene-bg)] text-[var(--scene-fg)]',
@@ -36,7 +44,7 @@ export function useSceneRootProps(options: SceneRootOptions): {
       .filter(Boolean)
       .join(' '),
     style: {
-      ...(options.theme?.variables ?? {}),
+      ...(themeVariables?.variables ?? {}),
       ...(options.style ?? {}),
     },
   }

package/src/scenes/default-scene-props.ts

@@ -20,8 +20,8 @@ export type DefaultSceneProps = {
   subtitle?: string
   description?: string
   eyebrow?: string
-  items?: SceneItem[]
-  media?: SceneMedia
+  items?: unknown[]
+  media?: unknown
   accent?: string
   theme?: SceneTheme
 }

package/src/storybook/SceneViewport.tsx

@@ -0,0 +1,179 @@
+import type { ReactNode } from 'react'
+import { useEffect, useMemo, useState } from 'react'
+
+import { AnimationSceneProvider, DEFAULT_SCENE_IN_FRAMES, StaticSceneProvider } from '../base'
+import { getSceneThemeOption } from './scene-theme-options'
+import { RemotionPreviewProvider } from './remotion-preview'
+
+type PreviewSize = {
+  width: number
+  height: number
+}
+
+type ScenePreviewMode = 'static' | 'animation' | 'both'
+type ScenePreviewAspectRatio = '16:9' | '9:16'
+
+function resolveBasePreviewSize(aspectRatio: ScenePreviewAspectRatio) {
+  return aspectRatio === '9:16'
+    ? { width: 720, height: 1280 }
+    : { width: 1280, height: 720 }
+}
+
+function fitPreviewSize(baseSize: PreviewSize, viewportWidth: number, viewportHeight: number) {
+  const safeWidth = Math.max(320, viewportWidth - 48)
+  const safeHeight = Math.max(240, viewportHeight - 48)
+  const widthScale = safeWidth / baseSize.width
+  const heightScale = safeHeight / baseSize.height
+  const scale = Math.min(1, widthScale, heightScale)
+
+  return {
+    width: Math.max(320, Math.floor(baseSize.width * scale)),
+    height: Math.max(240, Math.floor(baseSize.height * scale)),
+  }
+}
+
+function useViewportSize() {
+  const [viewportSize, setViewportSize] = useState(() => ({
+    width: typeof window === 'undefined' ? 1280 : window.innerWidth,
+    height: typeof window === 'undefined' ? 720 : window.innerHeight,
+  }))
+
+  useEffect(() => {
+    const updateSize = () => {
+      setViewportSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      })
+    }
+
+    updateSize()
+    window.addEventListener('resize', updateSize)
+    return () => window.removeEventListener('resize', updateSize)
+  }, [])
+
+  return viewportSize
+}
+
+export function SceneViewport({
+  children,
+  width,
+  height,
+  mode = 'static',
+  aspectRatio = '16:9',
+  themeKey,
+}: {
+  children: ReactNode
+  width: number
+  height: number
+  mode?: ScenePreviewMode
+  aspectRatio?: ScenePreviewAspectRatio
+  themeKey?: string
+}) {
+  const viewportSize = useViewportSize()
+  const sceneTheme = useMemo(() => getSceneThemeOption(themeKey).theme, [themeKey])
+  const baseSize = useMemo(() => resolveBasePreviewSize(aspectRatio), [aspectRatio])
+  const fittedSize = useMemo(
+    () => fitPreviewSize({ width, height }, viewportSize.width, viewportSize.height),
+    [height, viewportSize.height, viewportSize.width, width],
+  )
+  const [animatedFrame, setAnimatedFrame] = useState(0)
+  const frame = mode === 'static' ? 0 : animatedFrame
+
+  useEffect(() => {
+    if (mode === 'static') return undefined
+
+    let raf = 0
+    let start = 0
+    const fps = 30
+
+    const loop = (time: number) => {
+      if (!start) {
+        start = time
+      }
+      const elapsedSeconds = (time - start) / 1000
+      const nextFrame = Math.floor(elapsedSeconds * fps) % DEFAULT_SCENE_IN_FRAMES
+      setAnimatedFrame(nextFrame)
+      raf = window.requestAnimationFrame(loop)
+    }
+
+    raf = window.requestAnimationFrame(loop)
+    return () => window.cancelAnimationFrame(raf)
+  }, [mode])
+
+  const renderScene = (sceneMode: 'static' | 'animation', content: ReactNode) => {
+    const SceneConfigWrapper = sceneMode === 'animation' ? AnimationSceneProvider : StaticSceneProvider
+    const availableWidth =
+      mode === 'both'
+        ? Math.max(320, Math.floor((viewportSize.width - 96 - 24) / 2))
+        : fittedSize.width
+    const availableHeight = mode === 'both' ? Math.max(240, viewportSize.height - 120) : fittedSize.height
+    const paneSize = fitPreviewSize(baseSize, availableWidth, availableHeight)
+
+    return (
+      <SceneConfigWrapper sceneInFrames={DEFAULT_SCENE_IN_FRAMES} sceneTheme={sceneTheme}>
+        <RemotionPreviewProvider
+          value={{
+            frame: sceneMode === 'animation' ? frame : 0,
+            fps: 30,
+            width: paneSize.width,
+            height: paneSize.height,
+            durationInFrames: DEFAULT_SCENE_IN_FRAMES,
+          }}
+        >
+          <div
+            style={{
+              width: paneSize.width,
+              height: paneSize.height,
+              boxShadow: '0 28px 80px rgba(15, 23, 42, 0.45)',
+              borderRadius: 0,
+              overflow: 'hidden',
+              background: '#020617',
+            }}
+          >
+            {content}
+          </div>
+        </RemotionPreviewProvider>
+      </SceneConfigWrapper>
+    )
+  }
+
+  return (
+    <div
+      style={{
+        width: '100vw',
+        height: '100vh',
+        overflow: 'hidden',
+        display: 'grid',
+        placeItems: 'center',
+        background:
+          'radial-gradient(circle at top, rgba(15, 23, 42, 0.96) 0%, rgba(2, 6, 23, 1) 60%, rgba(15, 23, 42, 1) 100%)',
+        padding: 24,
+        boxSizing: 'border-box',
+      }}
+    >
+      {mode === 'both' ? (
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+            gap: 24,
+            alignItems: 'center',
+          }}
+        >
+          <div style={{ display: 'grid', gap: 12, justifyItems: 'center' }}>
+            <div style={{ color: '#e2e8f0', fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.72 }}>Static</div>
+            {renderScene('static', children)}
+          </div>
+          <div style={{ display: 'grid', gap: 12, justifyItems: 'center' }}>
+            <div style={{ color: '#e2e8f0', fontSize: 12, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.72 }}>Animation</div>
+            {renderScene('animation', children)}
+          </div>
+        </div>
+      ) : (
+        renderScene(mode, children)
+      )}
+    </div>
+  )
+}

package/src/storybook/component-project-helper.ts

@@ -0,0 +1,94 @@
+type MetadataKind = 'scene' | 'theme' | 'transition'
+
+type BaseMetadata = {
+  resourceKind: MetadataKind
+  pluginKey: string
+}
+
+type SceneMetadata = BaseMetadata & {
+  resourceKind: 'scene'
+  sceneFamily?: string
+}
+
+type ThemeMetadata = BaseMetadata & {
+  resourceKind: 'theme'
+}
+
+type TransitionMetadata = BaseMetadata & {
+  resourceKind: 'transition'
+  transitionKind?: 'transition' | 'overlay'
+}
+
+const metadataStore = new WeakMap<object, BaseMetadata>()
+
+function attachMetadata<T extends object, M extends BaseMetadata>(target: T, metadata: M): T {
+  metadataStore.set(target, metadata)
+  return target
+}
+
+function getMetadata<T extends BaseMetadata>(target: unknown, kind?: MetadataKind): T | undefined {
+  if (!target || (typeof target !== 'object' && typeof target !== 'function')) {
+    return undefined
+  }
+
+  const metadata = metadataStore.get(target as object)
+  if (!metadata) {
+    return undefined
+  }
+
+  if (kind && metadata.resourceKind !== kind) {
+    return undefined
+  }
+
+  return metadata as T
+}
+
+function makeAnnotation<M extends BaseMetadata>(kind: MetadataKind) {
+  return (metadata: M) => {
+    const normalized = metadata
+
+    return function annotate<T extends object>(target: T) {
+      return attachMetadata(target, normalized)
+    }
+  }
+}
+
+export const VIDEO_RESOURCE_METADATA_KEY = Symbol.for(
+  '@vibecuting/video-project-core/storybook-video-resource-metadata',
+)
+
+export const VideoComponent = makeAnnotation<SceneMetadata>('scene')
+export const ThemeComponent = makeAnnotation<ThemeMetadata>('theme')
+export const TransitionComponent = makeAnnotation<TransitionMetadata>('transition')
+
+export function defineComponentProjectComponentMetadata<T>(metadata: T) {
+  return metadata
+}
+
+export function defineScenePluginMetadata<T extends SceneMetadata>(metadata: T) {
+  return metadata
+}
+
+export function defineThemePluginMetadata<T extends ThemeMetadata>(metadata: T) {
+  return metadata
+}
+
+export function defineTransitionPluginMetadata<T extends TransitionMetadata>(metadata: T) {
+  return metadata
+}
+
+export function getComponentProjectComponentMetadata(target: unknown) {
+  return getMetadata(target, 'scene')
+}
+
+export function getScenePluginMetadata(target: unknown) {
+  return getMetadata(target, 'scene')
+}
+
+export function getThemePluginMetadata(target: unknown) {
+  return getMetadata(target, 'theme')
+}
+
+export function getTransitionPluginMetadata(target: unknown) {
+  return getMetadata(target, 'transition')
+}

package/src/storybook/remotion-preview.tsx

@@ -0,0 +1,116 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { createContext, useContext } from 'react'
+
+type RemotionPreviewValue = {
+  frame: number
+  fps: number
+  width: number
+  height: number
+  durationInFrames: number
+}
+
+const defaultValue: RemotionPreviewValue = {
+  frame: 0,
+  fps: 30,
+  width: 1280,
+  height: 720,
+  durationInFrames: 150,
+}
+
+const RemotionPreviewContext = createContext<RemotionPreviewValue>(defaultValue)
+
+export function RemotionPreviewProvider({
+  value,
+  children,
+}: {
+  value: RemotionPreviewValue
+  children: ReactNode
+}) {
+  return <RemotionPreviewContext.Provider value={value}>{children}</RemotionPreviewContext.Provider>
+}
+
+export function useCurrentFrame() {
+  return useContext(RemotionPreviewContext).frame
+}
+
+export function useVideoConfig() {
+  const value = useContext(RemotionPreviewContext)
+
+  return {
+    fps: value.fps,
+    width: value.width,
+    height: value.height,
+    durationInFrames: value.durationInFrames,
+    id: 'storybook-preview',
+    defaultProps: {},
+    props: {},
+    compositionStart: 0,
+    compositionEnd: value.durationInFrames,
+    durationInFramesInSection: value.durationInFrames,
+    numberOfShards: 1,
+    defaultEncodingSettings: {},
+  }
+}
+
+type SpringConfig = {
+  damping?: number
+  mass?: number
+  stiffness?: number
+  durationInFrames?: number
+  delay?: number
+}
+
+function clamp01(value: number) {
+  if (value < 0) {
+    return 0
+  }
+  if (value > 1) {
+    return 1
+  }
+  return value
+}
+
+export function spring({
+  frame,
+  fps,
+  config,
+}: {
+  frame: number
+  fps: number
+  config?: SpringConfig
+}) {
+  const delay = config?.delay ?? 0
+  const durationInFrames = config?.durationInFrames ?? fps
+  const damping = config?.damping ?? 18
+  const stiffness = config?.stiffness ?? 110
+  const mass = config?.mass ?? 1
+  const progress = Math.max(0, frame - delay) / Math.max(1, durationInFrames)
+  const eased = 1 - Math.exp(-progress * (damping / Math.max(0.001, mass)))
+  const wobble = Math.sin(progress * Math.PI * (stiffness / 55)) * 0.015
+
+  return clamp01(eased + wobble)
+}
+
+export function AbsoluteFill({
+  children,
+  style,
+  ...rest
+}: {
+  children?: ReactNode
+  style?: CSSProperties
+  [key: string]: unknown
+}) {
+  return (
+    <div
+      {...rest}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      {children}
+    </div>
+  )
+}

package/src/storybook/scene-story.ts

@@ -0,0 +1,21 @@
+export function createSceneStoryVariants() {
+  return {
+    Landscape: {},
+    Horizontal: {
+      parameters: {
+        scenePreviewAspectRatio: '9:16' as const,
+      },
+    },
+    AnimatedLandscape: {
+      parameters: {
+        scenePreviewMode: 'animation' as const,
+      },
+    },
+    AnimatedHorizontal: {
+      parameters: {
+        scenePreviewMode: 'animation' as const,
+        scenePreviewAspectRatio: '9:16' as const,
+      },
+    },
+  }
+}

package/src/storybook/scene-theme-options.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+
+import { editorialDarkTheme, editorialLightTheme, editorialWarmTheme } from '../themes'
+import { getSceneThemeOption, sceneThemeOptions } from './scene-theme-options'
+
+describe('scene-theme-options', () => {
+  it('exposes the built-in theme list', () => {
+    expect(sceneThemeOptions).toHaveLength(3)
+    expect(sceneThemeOptions[0]?.theme).toBe(editorialDarkTheme)
+    expect(sceneThemeOptions[1]?.theme).toBe(editorialLightTheme)
+    expect(sceneThemeOptions[2]?.theme).toBe(editorialWarmTheme)
+  })
+
+  it('falls back to the default theme when the key is unknown', () => {
+    expect(getSceneThemeOption('unknown').theme).toBe(editorialDarkTheme)
+  })
+})

package/src/storybook/scene-theme-options.ts

@@ -0,0 +1,34 @@
+import { editorialDarkTheme, editorialLightTheme, editorialWarmTheme } from '../themes'
+import type { SceneTheme } from '../themes'
+
+export type SceneThemeOption = {
+  key: string
+  label: string
+  theme: SceneTheme
+}
+
+export const sceneThemeOptions: SceneThemeOption[] = [
+  {
+    key: editorialDarkTheme.key,
+    label: editorialDarkTheme.name,
+    theme: editorialDarkTheme,
+  },
+  {
+    key: editorialLightTheme.key,
+    label: editorialLightTheme.name,
+    theme: editorialLightTheme,
+  },
+  {
+    key: editorialWarmTheme.key,
+    label: editorialWarmTheme.name,
+    theme: editorialWarmTheme,
+  },
+]
+
+export function getSceneThemeOption(key?: string) {
+  if (!key) {
+    return sceneThemeOptions[0]
+  }
+
+  return sceneThemeOptions.find((option) => option.key === key) ?? sceneThemeOptions[0]
+}