@vibecuting/video-project-core 0.1.26 → 0.1.28

package/src/core/scene/photo/effects-photo/default-effects-photo-scene-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultEffectsPhotoScene, componentMetadata as baseComponentMetadata } from './default-effects-photo-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultEffectsPhotoSceneHorizontal',
+  description: 'Photo effects scene for 9:16 portrait previews with a vertical layout',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-effects-photo-scene-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultEffectsPhotoSceneHorizontal = VideoComponent(componentMetadata)(function DefaultEffectsPhotoSceneHorizontal(
+  props: ComponentProps<typeof DefaultEffectsPhotoScene>,
+) {
+  return <DefaultEffectsPhotoScene {...props} />
+})

package/src/core/scene/photo/effects-photo/default-effects-photo-scene-Landscape.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultEffectsPhotoScene, componentMetadata as baseComponentMetadata } from './default-effects-photo-scene'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultEffectsPhotoSceneLandscape',
+  description: 'Photo effects scene for 16:9 landscape previews with a wide cinematic layout',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-effects-photo-scene-Landscape.tsx',
+  aspectRatio: '16:9',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'landscape'])),
+}
+
+export const DefaultEffectsPhotoSceneLandscape = VideoComponent(componentMetadata)(function DefaultEffectsPhotoSceneLandscape(
+  props: ComponentProps<typeof DefaultEffectsPhotoScene>,
+) {
+  return <DefaultEffectsPhotoScene {...props} />
+})

package/src/core/scene/photo/effects-photo/default-effects-photo-scene.stories.tsx

@@ -0,0 +1,44 @@
+import { DefaultEffectsPhotoSceneLandscape } from './default-effects-photo-scene-Landscape'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+
+const meta = {
+  title: 'core/scene/photo/effects-photo/DefaultEffectsPhotoSceneLandscape',
+  component: DefaultEffectsPhotoSceneLandscape,
+  args: {
+    title: 'Golden Echo',
+    subtitle: 'Layered photo grading with glow, grain, warmth and a cinematic vignette.',
+    badge: 'Effects Photo',
+    imageSrc: photoUrl,
+    effects: [
+      { type: 'glow', intensity: 0.55 },
+      { type: 'vignette', intensity: 0.65 },
+      { type: 'grain', intensity: 0.12 },
+      { type: 'warmth', intensity: 0.18, hue: '#f59e0b' },
+    ],
+    accent: '#020617',
+    secondaryAccent: '#1d4ed8',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}
+
+export const Animated = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'animation',
+  },
+}
+
+export const Both = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+    scenePreviewMode: 'both',
+  },
+}

package/src/core/scene/photo/effects-photo/default-effects-photo-scene.tsx

@@ -0,0 +1,352 @@
+import { useMemo } from 'react'
+
+import { z } from 'zod'
+
+import { VideoComponent, defineScenePluginMetadata } from '@vibecuting/component-project-helper'
+import { Easing, Img, interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'
+
+import { BaseRemotionScene, type BaseRemotionSceneProps, useRemotionSceneRuntime, useSceneConfig } from '../../../../base'
+import { defineSceneComponent } from '../../../../plugins/scene-component'
+
+export type PhotoEffectType = 'vignette' | 'grain' | 'glow' | 'warmth' | 'soft-focus'
+
+export interface PhotoEffect {
+  type: PhotoEffectType
+  intensity?: number
+  hue?: string
+}
+
+export interface DefaultEffectsPhotoSceneProps extends BaseRemotionSceneProps {
+  sceneId?: string
+  sceneName?: string
+  title?: string
+  subtitle?: string
+  badge?: string
+  imageSrc: string
+  effects?: PhotoEffect[]
+  accent?: string
+  secondaryAccent?: string
+  textColor?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultEffectsPhotoScene',
+  description: 'Photo scene with layered Remotion effects and cinematic grading',
+  sourceFile: 'src/core/scene/photo/effects-photo/default-effects-photo-scene.tsx',
+  pluginKey: 'core.photo.effects-photo',
+  tags: ['scene', 'photo', 'effects', 'image', 'cinematic'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'custom',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultEffectsPhotoSceneProps',
+})
+
+function matchesEffect(effects: PhotoEffect[] | undefined, type: PhotoEffectType) {
+  return effects?.some((effect) => effect.type === type) ?? false
+}
+
+function effectIntensity(effects: PhotoEffect[] | undefined, type: PhotoEffectType, fallback: number) {
+  return effects?.find((effect) => effect.type === type)?.intensity ?? fallback
+}
+
+export const DefaultEffectsPhotoScene = VideoComponent(componentMetadata)(
+  defineSceneComponent({
+    family: 'custom',
+    propsSchema: z.object({
+      sceneId: z.string().optional(),
+      sceneName: z.string().optional(),
+      title: z.string().optional(),
+      subtitle: z.string().optional(),
+      badge: z.string().optional(),
+      imageSrc: z.string(),
+      effects: z
+        .array(
+          z.object({
+            type: z.enum(['vignette', 'grain', 'glow', 'warmth', 'soft-focus']),
+            intensity: z.number().min(0).max(1).optional(),
+            hue: z.string().optional(),
+          }),
+        )
+        .optional(),
+      accent: z.string().optional(),
+      secondaryAccent: z.string().optional(),
+      textColor: z.string().optional(),
+    }),
+    component: function DefaultEffectsPhotoScene({
+      id,
+      name,
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      badge,
+      imageSrc,
+      effects,
+      accent,
+      secondaryAccent,
+      textColor,
+    }: DefaultEffectsPhotoSceneProps) {
+      const runtime = useRemotionSceneRuntime()
+      const sceneConfig = useSceneConfig()
+      const frame = useCurrentFrame()
+      const { fps } = useVideoConfig()
+      const portrait = runtime.height > runtime.width
+      const animated = sceneConfig.sceneType === 'animation'
+      const animationProgress =
+        sceneConfig.sceneType === 'animation'
+          ? spring({
+              frame,
+              fps,
+              config: { damping: 22, mass: 0.8, stiffness: 130 },
+            })
+          : 1
+      const reveal = sceneConfig.sceneType === 'animation' ? spring({ frame, fps, delay: 6, config: { damping: 20, mass: 0.7, stiffness: 150 } }) : 1
+      const focusDrift = sceneConfig.sceneType === 'animation' ? Math.sin((frame / fps) * Math.PI * 0.75) : 0
+      const scale = 1.01 + (1 - animationProgress) * 0.06 + focusDrift * 0.008
+      const translateX = (1 - animationProgress) * (portrait ? -8 : -12) + focusDrift * (portrait ? 8 : 12)
+      const translateY = (1 - animationProgress) * 10 + focusDrift * 16
+      const titleSize = Math.round(runtime.height * (portrait ? 0.034 : 0.04))
+      const subtitleSize = Math.round(runtime.height * 0.017)
+      const framePaddingX = Math.round(runtime.width * (portrait ? 0.015 : 0.014))
+      const framePaddingY = Math.round(runtime.height * (portrait ? 0.014 : 0.012))
+      const frameLeft = framePaddingX
+      const frameTop = framePaddingY
+      const frameWidth = Math.max(1, runtime.width - framePaddingX * 2)
+      const frameHeight = Math.max(1, runtime.height - framePaddingY * 2)
+      const imageFilter = animated ? 'brightness(1.08) contrast(1.04) saturate(1.08)' : 'brightness(1.9) contrast(1.18) saturate(1.22)'
+      const vignette = matchesEffect(effects, 'vignette')
+      const grain = matchesEffect(effects, 'grain')
+      const glow = matchesEffect(effects, 'glow')
+      const warmth = matchesEffect(effects, 'warmth')
+      const softFocus = matchesEffect(effects, 'soft-focus')
+      const vignetteOpacity = effectIntensity(effects, 'vignette', 0.52) * (0.65 + reveal * 0.35)
+      const glowOpacity = effectIntensity(effects, 'glow', 0.45) * (0.7 + reveal * 0.3)
+      const grainOpacity = effectIntensity(effects, 'grain', 0.12)
+      const warmthHue = effects?.find((effect) => effect.type === 'warmth')?.hue ?? accent ?? '#f97316'
+      const focusOverlay = interpolate(reveal, [0, 1], [0, 1], {
+        easing: Easing.inOut(Easing.quad),
+        extrapolateLeft: 'clamp',
+        extrapolateRight: 'clamp',
+      })
+
+      const effectLayers = useMemo(
+        () => (
+          <>
+            {glow ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: '4%',
+                  opacity: glowOpacity * 0.55,
+                  filter: 'blur(20px) saturate(1.18) brightness(0.98)',
+                  transform: `scale(${1.03 + (1 - animationProgress) * 0.02})`,
+                  pointerEvents: 'none',
+                }}
+              >
+                <Img
+                  src={imageSrc}
+                  alt={title ?? 'Effects photo'}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                  }}
+                />
+              </div>
+            ) : null}
+            {softFocus ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  opacity: 0.18 + focusOverlay * 0.08,
+                  filter: 'blur(10px) saturate(1.04)',
+                  transform: `scale(${1.02 + focusOverlay * 0.01})`,
+                  pointerEvents: 'none',
+                }}
+              >
+                <Img
+                  src={imageSrc}
+                  alt={title ?? 'Effects photo'}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                  }}
+                />
+              </div>
+            ) : null}
+            {vignette ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background:
+                    'radial-gradient(circle at center, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 28%, rgba(2,6,23,0.14) 56%, rgba(2,6,23,0.46) 100%)',
+                  opacity: vignetteOpacity * 0.72,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {warmth ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  background: `linear-gradient(135deg, ${warmthHue} 0%, rgba(255,255,255,0.02) 36%, ${secondaryAccent ?? 'rgba(59,130,246,0.14)'} 100%)`,
+                  mixBlendMode: 'screen',
+                  opacity: 0.08 + focusOverlay * 0.08,
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+            {grain ? (
+              <div
+                aria-hidden="true"
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  opacity: grainOpacity,
+                  backgroundImage:
+                    'radial-gradient(rgba(255,255,255,0.35) 0.7px, transparent 0.7px), radial-gradient(rgba(0,0,0,0.3) 0.7px, transparent 0.7px)',
+                  backgroundSize: '4px 4px, 4px 4px',
+                  backgroundPosition: '0 0, 2px 2px',
+                  mixBlendMode: 'soft-light',
+                  pointerEvents: 'none',
+                }}
+              />
+            ) : null}
+          </>
+        ),
+        [
+          animationProgress,
+          focusOverlay,
+          grain,
+          grainOpacity,
+          glow,
+          glowOpacity,
+          imageSrc,
+          secondaryAccent,
+          softFocus,
+          title,
+          vignette,
+          vignetteOpacity,
+          warmth,
+          warmthHue,
+        ],
+      )
+
+      return (
+        <BaseRemotionScene
+          id={id ?? sceneId}
+          name={name ?? sceneName ?? title}
+          style={{
+            background:
+              portrait
+                ? `linear-gradient(180deg, ${accent ?? '#020617'} 0%, #000000 100%)`
+                : `radial-gradient(circle at 50% 18%, ${secondaryAccent ?? 'rgba(255,255,255,0.08)'} 0%, ${accent ?? '#020617'} 52%, #000000 100%)`,
+            color: textColor ?? '#f8fafc',
+            padding: Math.round(runtime.height * (portrait ? 0.02 : 0.03)),
+          }}
+        >
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              overflow: 'hidden',
+              border: '1px solid rgba(255,255,255,0.1)',
+              background: 'rgba(2,6,23,0.82)',
+              isolation: 'isolate',
+            }}
+          >
+            <div
+              style={{
+                position: 'absolute',
+                top: frameTop,
+                left: frameLeft,
+                width: frameWidth,
+                height: frameHeight,
+                border: animated ? '1px solid rgba(255,255,255,0.1)' : '1px solid rgba(255,255,255,0.16)',
+                boxShadow: animated ? '0 18px 56px rgba(0,0,0,0.24)' : '0 12px 32px rgba(0,0,0,0.14)',
+                backgroundColor: animated ? 'rgba(2,6,23,0.14)' : 'rgba(248,250,252,0.06)',
+                backgroundImage: `url(${imageSrc})`,
+                backgroundSize: 'cover',
+                backgroundPosition: `${50}% ${portrait ? 44 : 52}%`,
+                backgroundRepeat: 'no-repeat',
+                overflow: 'hidden',
+                filter: imageFilter,
+              }}
+            >
+            </div>
+
+            <div
+              style={{
+                position: 'absolute',
+                top: frameTop,
+                left: frameLeft,
+                width: frameWidth,
+                height: frameHeight,
+              }}
+            >
+              {effectLayers}
+            </div>
+
+            <div
+              aria-hidden="true"
+              style={{
+                position: 'absolute',
+                inset: 0,
+                background:
+                  'linear-gradient(180deg, rgba(2,6,23,0.04) 0%, rgba(2,6,23,0.12) 38%, rgba(2,6,23,0.52) 100%)',
+                pointerEvents: 'none',
+              }}
+            />
+
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'grid',
+                alignContent: 'space-between',
+                padding: Math.round(runtime.height * (portrait ? 0.02 : 0.03)),
+                zIndex: 2,
+                pointerEvents: 'none',
+              }}
+            >
+              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', gap: 12 }}>
+                <div
+                  style={{
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    border: '1px solid rgba(255,255,255,0.18)',
+                    background: 'rgba(2,6,23,0.6)',
+                    color: '#f8fafc',
+                    padding: '8px 12px',
+                    letterSpacing: '0.22em',
+                    textTransform: 'uppercase',
+                    fontSize: 11,
+                    lineHeight: 1,
+                  }}
+                >
+                  {badge ?? 'Effects Photo'}
+                </div>
+              </div>
+
+              <div style={{ display: 'grid', gap: 8, maxWidth: portrait ? '86%' : '58%' }}>
+                {title ? <div style={{ fontSize: titleSize, fontWeight: 800, letterSpacing: '-0.06em', lineHeight: 0.94 }}>{title}</div> : null}
+                {subtitle ? <div style={{ fontSize: subtitleSize, lineHeight: 1.45, opacity: 0.84 }}>{subtitle}</div> : null}
+              </div>
+            </div>
+          </div>
+        </BaseRemotionScene>
+      )
+    },
+  }),
+)

package/src/core/scene/photo/effects-photo/index.ts

@@ -0,0 +1,3 @@
+export { DefaultEffectsPhotoScene, componentMetadata as DefaultEffectsPhotoSceneMetadata } from './default-effects-photo-scene'
+export { DefaultEffectsPhotoSceneLandscape, componentMetadata as DefaultEffectsPhotoSceneLandscapeMetadata } from './default-effects-photo-scene-Landscape'
+export { DefaultEffectsPhotoSceneHorizontal, componentMetadata as DefaultEffectsPhotoSceneHorizontalMetadata } from './default-effects-photo-scene-Horizontal'

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

@@ -0,0 +1,25 @@
+export { DefaultLivePhotoScene, componentMetadata as DefaultLivePhotoSceneMetadata } from './default-live-photo-scene'
+export { DefaultLivePhotoSceneLandscape, componentMetadata as DefaultLivePhotoSceneLandscapeMetadata } from './default-live-photo-scene-Landscape'
+export { DefaultLivePhotoSceneHorizontal, componentMetadata as DefaultLivePhotoSceneHorizontalMetadata } from './default-live-photo-scene-Horizontal'
+export { DefaultPhotoWallScene, componentMetadata as DefaultPhotoWallSceneMetadata } from './default-photo-wall-scene'
+export { DefaultPhotoWallSceneLandscape, componentMetadata as DefaultPhotoWallSceneLandscapeMetadata } from './default-photo-wall-scene-Landscape'
+export { DefaultPhotoWallSceneHorizontal, componentMetadata as DefaultPhotoWallSceneHorizontalMetadata } from './default-photo-wall-scene-Horizontal'
+export { DefaultPhotoStripScene, componentMetadata as DefaultPhotoStripSceneMetadata } from './default-photo-strip-scene'
+export { DefaultPhotoStripSceneLandscape, componentMetadata as DefaultPhotoStripSceneLandscapeMetadata } from './default-photo-strip-scene-Landscape'
+export { DefaultPhotoStripSceneHorizontal, componentMetadata as DefaultPhotoStripSceneHorizontalMetadata } from './default-photo-strip-scene-Horizontal'
+export {
+  DefaultEffectsPhotoScene,
+  DefaultEffectsPhotoSceneLandscape,
+  DefaultEffectsPhotoSceneHorizontal,
+  DefaultEffectsPhotoSceneMetadata,
+  DefaultEffectsPhotoSceneLandscapeMetadata,
+  DefaultEffectsPhotoSceneHorizontalMetadata,
+} from './effects-photo'
+export {
+  Default3DVRPhotoScene,
+  Default3DVRPhotoSceneLandscape,
+  Default3DVRPhotoSceneHorizontal,
+  Default3DVRPhotoSceneMetadata,
+  Default3DVRPhotoSceneLandscapeMetadata,
+  Default3DVRPhotoSceneHorizontalMetadata,
+} from './3dvr-photo'

package/src/core/scene/photo/photo-storybook.test.tsx

@@ -0,0 +1,112 @@
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('remotion', async () => import('../../../storybook/remotion-preview'))
+
+import { SceneViewport } from '../../../storybook/SceneViewport'
+import { Default3DVRPhotoSceneLandscape } from './3dvr-photo/default-3dvr-photo-scene-Landscape'
+import { DefaultEffectsPhotoSceneLandscape } from './effects-photo/default-effects-photo-scene-Landscape'
+
+const photoUrl = 'https://heyaai-statics-1342239856.cos.ap-guangzhou.myqcloud.com/tmp/premium_photo-1779404552087-0f905162376f-121.jpeg'
+const { renderToStaticMarkup } = require('/data/projects/foldspace-stack-apps/vibecuting/packages/@vibecuting/video-project-core/node_modules/.pnpm/react-dom@19.2.7_react@19.2.7/node_modules/react-dom/server')
+
+describe('photo scene storybook rendering', () => {
+  it('renders 3dvr-photo in storybook preview', () => {
+    const html = renderToStaticMarkup(
+      <SceneViewport width={1280} height={720} aspectRatio="16:9" mode="static">
+        <Default3DVRPhotoSceneLandscape
+          title="Stereo Window"
+          subtitle="3D camera controls over a still frame with subtle orbit, pitch and depth."
+          badge="3D VR Photo"
+          imageSrc={photoUrl}
+          yaw={12}
+          pitch={4}
+          roll={0}
+          perspective={980}
+          zoom={1}
+          depth={26}
+          focusX={0.5}
+          focusY={0.45}
+          accent="#020617"
+          secondaryAccent="#1d4ed8"
+        />
+      </SceneViewport>,
+    )
+
+    expect(html).toContain('Stereo Window')
+    expect(html).toContain(photoUrl)
+  })
+
+  it('renders 3dvr-photo animation preview in storybook preview', () => {
+    const html = renderToStaticMarkup(
+      <SceneViewport width={1280} height={720} aspectRatio="16:9" mode="animation">
+        <Default3DVRPhotoSceneLandscape
+          title="Stereo Window"
+          subtitle="3D camera controls over a still frame with subtle orbit, pitch and depth."
+          badge="3D VR Photo"
+          imageSrc={photoUrl}
+          yaw={12}
+          pitch={4}
+          roll={0}
+          perspective={980}
+          zoom={1}
+          depth={26}
+          focusX={0.5}
+          focusY={0.45}
+          accent="#020617"
+          secondaryAccent="#1d4ed8"
+        />
+      </SceneViewport>,
+    )
+
+    expect(html).toContain('Stereo Window')
+    expect(html).toContain(photoUrl)
+  })
+
+  it('renders effects-photo in storybook preview', () => {
+    const html = renderToStaticMarkup(
+      <SceneViewport width={1280} height={720} aspectRatio="16:9" mode="static">
+        <DefaultEffectsPhotoSceneLandscape
+          title="Golden Echo"
+          subtitle="Layered photo grading with glow, grain, warmth and a cinematic vignette."
+          badge="Effects Photo"
+          imageSrc={photoUrl}
+          effects={[
+            { type: 'glow', intensity: 0.55 },
+            { type: 'vignette', intensity: 0.65 },
+            { type: 'grain', intensity: 0.12 },
+            { type: 'warmth', intensity: 0.18, hue: '#f59e0b' },
+          ]}
+          accent="#020617"
+          secondaryAccent="#1d4ed8"
+        />
+      </SceneViewport>,
+    )
+
+    expect(html).toContain('Golden Echo')
+    expect(html).toContain(photoUrl)
+  })
+
+  it('renders effects-photo animation preview in storybook preview', () => {
+    const html = renderToStaticMarkup(
+      <SceneViewport width={1280} height={720} aspectRatio="16:9" mode="animation">
+        <DefaultEffectsPhotoSceneLandscape
+          title="Golden Echo"
+          subtitle="Layered photo grading with glow, grain, warmth and a cinematic vignette."
+          badge="Effects Photo"
+          imageSrc={photoUrl}
+          effects={[
+            { type: 'glow', intensity: 0.55 },
+            { type: 'vignette', intensity: 0.65 },
+            { type: 'grain', intensity: 0.12 },
+            { type: 'warmth', intensity: 0.18, hue: '#f59e0b' },
+          ]}
+          accent="#020617"
+          secondaryAccent="#1d4ed8"
+        />
+      </SceneViewport>,
+    )
+
+    expect(html).toContain('Golden Echo')
+    expect(html).toContain(photoUrl)
+  })
+})

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

@@ -4,3 +4,30 @@ export { getSlideTypographyScale } from './slide-typography'
 export type { SlideTypographyScale } from './slide-typography'
 export { getAdaptiveSlideGridLayout, getOverflowSafeSlideGridLayout } from './slide-grid'
 export type { SlideGridLayout, OverflowSafeSlideGridOptions } from './slide-grid'
+export {
+  MediaTemplateSection,
+  clampTextLines,
+  columnRailStyle,
+  createTileStyle,
+  fitMediaStyle,
+  getPhotoGridLayout,
+  getProfileHeroLayout,
+  getVideoPosterRailLayout,
+  gridStyle,
+  renderMediaBadge,
+  renderMediaPlaceholder,
+  safeFullSizeStyle,
+  stackContentStyle,
+} from './media-templates'
+export type {
+  MediaTemplateRuntime,
+  MediaTileStyle,
+  PhotoGridLayout,
+  PhotoGridTemplateItem,
+  ProfileHeroLayout,
+  ProfileHeroStat,
+  ProfileHeroTemplateItem,
+  VideoPosterRailLayout,
+  VideoPosterRailItem,
+  MediaTemplateSectionProps,
+} from './media-templates'

package/src/core/scene/slide/_shared/media-templates.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  getPhotoGridLayout,
+  getProfileHeroLayout,
+  getVideoPosterRailLayout,
+} from './media-templates'
+
+describe('media template layouts', () => {
+  it('keeps photo grids compact and inside portrait bounds', () => {
+    const layout = getPhotoGridLayout(5, { width: 1080, height: 1920 })
+
+    expect(layout).toMatchObject({
+      columns: 2,
+      rows: 3,
+      visibleItems: 5,
+      mediaAspectRatio: '4 / 3',
+    })
+    expect(layout.cardMinHeight).toBeGreaterThanOrEqual(120)
+    expect(layout.gap).toBeLessThanOrEqual(18)
+  })
+
+  it('switches poster rails to a stacked column in portrait scenes', () => {
+    const layout = getVideoPosterRailLayout(4, { width: 1080, height: 1920 })
+
+    expect(layout).toMatchObject({
+      railDirection: 'column',
+      columns: 1,
+      rows: 4,
+      visibleItems: 4,
+      posterAspectRatio: '9 / 16',
+    })
+    expect(layout.posterMinHeight).toBeGreaterThanOrEqual(128)
+    expect(layout.posterMinWidth).toBeGreaterThanOrEqual(220)
+  })
+
+  it('reserves enough room for profile hero content on landscape scenes', () => {
+    const layout = getProfileHeroLayout({ width: 1920, height: 1080 }, 3)
+
+    expect(layout).toMatchObject({
+      columns: 2,
+      statColumns: 3,
+    })
+    expect(layout.avatarSize).toBeGreaterThanOrEqual(120)
+    expect(layout.bodyMaxWidth).toBeLessThan(1920)
+  })
+})