@vibecuting/video-project-core 0.1.25 → 0.1.26

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

@@ -1 +1,3 @@
 export { Default3DScene } from './default-3d-scene'
+export { Default3DSceneLandscape, componentMetadata as Default3DSceneLandscapeMetadata } from './default-3d-scene-Landscape'
+export { Default3DSceneHorizontal, componentMetadata as Default3DSceneHorizontalMetadata } from './default-3d-scene-Horizontal'

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

@@ -0,0 +1,6 @@
+export { SlideFrame } from './slide-frame'
+export type { SlideFrameProps } from './slide-frame'
+export { getSlideTypographyScale } from './slide-typography'
+export type { SlideTypographyScale } from './slide-typography'
+export { getAdaptiveSlideGridLayout, getOverflowSafeSlideGridLayout } from './slide-grid'
+export type { SlideGridLayout, OverflowSafeSlideGridOptions } from './slide-grid'

package/src/core/scene/slide/_shared/slide-frame.tsx

@@ -0,0 +1,97 @@
+import type { CSSProperties, ReactNode } from 'react'
+
+import { AbsoluteFill } from 'remotion'
+
+import { SceneMotionStack } from '../../../../base'
+import { useResolvedSceneTheme, useSceneConfig } from '../../../../base'
+import type { SceneTheme } from '../../../../themes'
+import { useSceneRootProps } from '../../../../runtime/use-scene-root-props'
+
+export interface SlideFrameProps {
+  pluginKey: string
+  sceneId?: string
+  sceneName?: string
+  theme?: SceneTheme
+  className?: string
+  style?: CSSProperties
+  background?: CSSProperties['background']
+  children: ReactNode
+}
+
+export function SlideFrame({
+  pluginKey,
+  sceneId,
+  sceneName,
+  theme,
+  className,
+  style,
+  background,
+  children,
+}: SlideFrameProps) {
+  const sceneConfig = useSceneConfig()
+  const sceneTheme = useResolvedSceneTheme()
+  const resolvedTheme = sceneConfig.sceneToken ? undefined : (theme ?? sceneTheme)
+  const rootProps = useSceneRootProps({
+    pluginKey,
+    sceneId,
+    sceneName,
+    theme: resolvedTheme,
+    className,
+  })
+  return (
+    <AbsoluteFill
+      {...rootProps}
+      data-scene-display-mode={sceneConfig.sceneType}
+      data-scene-token={sceneConfig.sceneToken}
+      className={[
+        rootProps.className,
+        'vibecuting-slide-frame',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={{
+        ...rootProps.style,
+        background: background ?? 'var(--scene-bg)',
+        color: 'var(--scene-fg)',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      <style>{`
+        .vibecuting-slide-frame,
+        .vibecuting-slide-frame * {
+          box-sizing: border-box;
+        }
+
+        .vibecuting-slide-frame {
+          overflow: hidden;
+          min-width: 0;
+          min-height: 0;
+          position: relative;
+          isolation: isolate;
+        }
+
+        .vibecuting-slide-frame * {
+          max-width: 100%;
+        }
+
+        .vibecuting-slide-frame article,
+        .vibecuting-slide-frame aside,
+        .vibecuting-slide-frame section,
+        .vibecuting-slide-frame div,
+        .vibecuting-slide-frame pre,
+        .vibecuting-slide-frame table,
+        .vibecuting-slide-frame th,
+        .vibecuting-slide-frame td,
+        .vibecuting-slide-frame li {
+          border-radius: 0 !important;
+        }
+      `}</style>
+      <SceneMotionStack>{children}</SceneMotionStack>
+    </AbsoluteFill>
+  )
+}

package/src/core/scene/slide/_shared/slide-grid.ts

@@ -0,0 +1,97 @@
+export type SlideGridLayout = {
+  columns: number
+  gap: number
+  cardPaddingX: number
+  cardPaddingY: number
+  cardMinHeight: number
+}
+
+export function getAdaptiveSlideGridLayout(itemCount: number, maxColumns = 4): SlideGridLayout {
+  const count = Math.max(1, itemCount)
+  let columns = 1
+
+  if (count <= 1) {
+    columns = 1
+  } else if (count === 2) {
+    columns = Math.min(2, maxColumns)
+  } else if (count <= 4) {
+    columns = Math.min(2, maxColumns)
+  } else if (count <= 6) {
+    columns = Math.min(3, maxColumns)
+  } else {
+    columns = Math.min(maxColumns, Math.max(3, Math.ceil(Math.sqrt(count))))
+  }
+
+  const rows = Math.ceil(count / columns)
+  const compact = rows >= 3 || count >= 6
+  const tight = rows >= 4 || count >= 9
+
+  return {
+    columns,
+    gap: tight ? 12 : compact ? 14 : 18,
+    cardPaddingX: tight ? 16 : compact ? 20 : 24,
+    cardPaddingY: tight ? 14 : compact ? 18 : 24,
+    cardMinHeight: tight ? 120 : compact ? 160 : 200,
+  }
+}
+
+export type OverflowSafeSlideGridOptions = {
+  runtimeWidth?: number
+  runtimeHeight?: number
+  reservedWidth?: number
+  reservedHeight?: number
+  minCardWidth?: number
+  minCardHeight?: number
+}
+
+export function getOverflowSafeSlideGridLayout(
+  itemCount: number,
+  maxColumns = 4,
+  options: OverflowSafeSlideGridOptions = {},
+): SlideGridLayout {
+  const count = Math.max(1, Math.min(5, itemCount))
+  const candidateMaxColumns = Math.max(1, Math.min(maxColumns, count))
+
+  if (!options.runtimeHeight) {
+    return getAdaptiveSlideGridLayout(count, candidateMaxColumns)
+  }
+
+  const runtimeWidth = options.runtimeWidth ?? 0
+  const reservedWidth = options.reservedWidth ?? 0
+  const reservedHeight = options.reservedHeight ?? 300
+  const minCardWidth = options.minCardWidth ?? 180
+  const minCardHeight = options.minCardHeight ?? 112
+  const usableHeight = Math.max(0, options.runtimeHeight - reservedHeight)
+  const usableWidth = runtimeWidth > 0 ? Math.max(0, runtimeWidth - reservedWidth) : 0
+
+  for (let columns = candidateMaxColumns; columns >= 1; columns -= 1) {
+    const rows = Math.ceil(count / columns)
+    const compact = rows >= 3 || count >= 5
+    const tight = rows >= 4 || count >= 6
+    const gap = tight ? 12 : compact ? 14 : 18
+    const cardPaddingX = tight ? 16 : compact ? 20 : 24
+    const cardPaddingY = tight ? 14 : compact ? 18 : 24
+    const cardMinHeight = Math.floor((usableHeight - gap * (rows - 1)) / rows)
+    const cardMinWidth = usableWidth > 0 ? Math.floor((usableWidth - gap * (columns - 1)) / columns) : minCardWidth
+
+    if (cardMinHeight >= minCardHeight && cardMinWidth >= minCardWidth) {
+      return {
+        columns,
+        gap,
+        cardPaddingX,
+        cardPaddingY,
+        cardMinHeight: Math.max(56, cardMinHeight),
+      }
+    }
+  }
+
+  const fallbackRows = Math.ceil(count / 1)
+  const fallbackGap = fallbackRows >= 3 ? 12 : fallbackRows === 2 ? 14 : 18
+  return {
+    columns: 1,
+    gap: fallbackGap,
+    cardPaddingX: fallbackRows >= 3 ? 16 : fallbackRows === 2 ? 20 : 24,
+    cardPaddingY: fallbackRows >= 3 ? 14 : fallbackRows === 2 ? 18 : 24,
+    cardMinHeight: Math.max(56, Math.floor((usableHeight - fallbackGap * (fallbackRows - 1)) / fallbackRows)),
+  }
+}

package/src/core/scene/slide/_shared/slide-shared.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSlideTypographyScale } from './slide-typography'
+
+describe('slide shared primitives', () => {
+  it('computes typography scale from height', () => {
+    expect(getSlideTypographyScale(1080)).toMatchObject({
+      eyebrow: expect.any(Number),
+      title: expect.any(Number),
+      body: expect.any(Number),
+      caption: expect.any(Number),
+      statValue: expect.any(Number),
+    })
+  })
+})

package/src/core/scene/slide/_shared/slide-typography.ts

@@ -0,0 +1,17 @@
+export type SlideTypographyScale = {
+  eyebrow: number
+  title: number
+  body: number
+  caption: number
+  statValue: number
+}
+
+export function getSlideTypographyScale(height: number): SlideTypographyScale {
+  return {
+    eyebrow: Math.max(14, Math.round(height * 0.018)),
+    title: Math.max(42, Math.round(height * 0.064)),
+    body: Math.max(18, Math.round(height * 0.024)),
+    caption: Math.max(12, Math.round(height * 0.015)),
+    statValue: Math.max(28, Math.round(height * 0.05)),
+  }
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultAbstractBackgroundCoverSlideHorizontal } from './default-abstract-background-cover-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideHorizontal/Animated',
+  component: DefaultAbstractBackgroundCoverSlideHorizontal,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultAbstractBackgroundCoverSlideHorizontal } from './default-abstract-background-cover-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideHorizontal',
+  component: DefaultAbstractBackgroundCoverSlideHorizontal,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.tsx

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultAbstractBackgroundCoverSlide, componentMetadata as baseComponentMetadata } from './default-abstract-background-cover-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultAbstractBackgroundCoverSlideHorizontal',
+  description: "Abstract background cover slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultAbstractBackgroundCoverSlideHorizontal = VideoComponent(componentMetadata)(function DefaultAbstractBackgroundCoverSlideHorizontal(
+  props: ComponentProps<typeof DefaultAbstractBackgroundCoverSlide>,
+) {
+  return <DefaultAbstractBackgroundCoverSlide {...props} />
+})

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide-Landscape.tsx

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

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.animated.stories.tsx

@@ -0,0 +1,20 @@
+import { DefaultAbstractBackgroundCoverSlideLandscape } from './default-abstract-background-cover-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideLandscape/Animated',
+  component: DefaultAbstractBackgroundCoverSlideLandscape,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.stories.tsx

@@ -0,0 +1,19 @@
+import { DefaultAbstractBackgroundCoverSlideLandscape } from './default-abstract-background-cover-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/abstract-background-cover/DefaultAbstractBackgroundCoverSlideLandscape',
+  component: DefaultAbstractBackgroundCoverSlideLandscape,
+  args: {
+    kicker: 'Chapter 03',
+    title: 'The system in motion',
+    subtitle: 'A visual opener with more atmosphere than a plain title card.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}

package/src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.tsx

@@ -0,0 +1,69 @@
+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 DefaultAbstractBackgroundCoverSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  kicker?: string
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultAbstractBackgroundCoverSlide',
+  description: 'Abstract background cover slide',
+  sourceFile: 'src/core/scene/slide/abstract-background-cover/default-abstract-background-cover-slide.tsx',
+  pluginKey: 'core.slide.abstract-background-cover',
+  tags: ['scene', 'slide', 'cover', 'abstract'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultAbstractBackgroundCoverSlideProps',
+})
+
+export const DefaultAbstractBackgroundCoverSlide = 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(),
+      kicker: z.string().optional(),
+    }),
+    component: function DefaultAbstractBackgroundCoverSlide({ sceneId, sceneName, title, subtitle, kicker }: DefaultAbstractBackgroundCoverSlideProps) {
+      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="radial-gradient(circle at top left, #2563eb 0%, #020617 60%)">
+          <section style={{ display: 'grid', placeItems: 'center', width: '100%', height: '100%', padding: isPortrait ? '44px 28px' : '72px 88px', color: '#e2e8f0', textAlign: 'center' }}>
+            <div style={{ maxWidth: isPortrait ? 620 : 980 }}>
+              {kicker ? (
+                <SceneMotionLayer variant="hero-copy">
+                  <p style={{ margin: 0, fontSize: isPortrait ? scale.eyebrow * 0.9 : scale.eyebrow, letterSpacing: '0.34em', textTransform: 'uppercase', opacity: 0.66 }}>{kicker}</p>
+                </SceneMotionLayer>
+              ) : null}
+              <SceneMotionLayer variant="hero-title" delayIndex={1}>
+                <h1 style={{ margin: isPortrait ? '14px 0 0' : '20px 0 0', fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.06em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={2}>
+                  <p style={{ margin: isPortrait ? '16px auto 0' : '20px auto 0', maxWidth: isPortrait ? 560 : 760, fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.8 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/abstract-background-cover/index.ts

@@ -0,0 +1,4 @@
+export { DefaultAbstractBackgroundCoverSlide } from './default-abstract-background-cover-slide'
+export { componentMetadata } from './default-abstract-background-cover-slide'
+export { DefaultAbstractBackgroundCoverSlideLandscape, componentMetadata as DefaultAbstractBackgroundCoverSlideLandscapeMetadata } from './default-abstract-background-cover-slide-Landscape'
+export { DefaultAbstractBackgroundCoverSlideHorizontal, componentMetadata as DefaultAbstractBackgroundCoverSlideHorizontalMetadata } from './default-abstract-background-cover-slide-Horizontal'

package/src/core/scene/slide/agenda/default-agenda-slide-Horizontal.animated.stories.tsx

@@ -0,0 +1,26 @@
+import { DefaultAgendaSlideHorizontal } from './default-agenda-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideHorizontal/Animated',
+  component: DefaultAgendaSlideHorizontal,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

package/src/core/scene/slide/agenda/default-agenda-slide-Horizontal.stories.tsx

@@ -0,0 +1,25 @@
+import { DefaultAgendaSlideHorizontal } from './default-agenda-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideHorizontal',
+  component: DefaultAgendaSlideHorizontal,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import type { ComponentProps } from 'react'
+
+import { VideoComponent, type ScenePluginMetadata } from '@vibecuting/component-project-helper'
+
+import { DefaultAgendaSlide, componentMetadata as baseComponentMetadata } from './default-agenda-slide'
+
+export const componentMetadata: ScenePluginMetadata = {
+  ...baseComponentMetadata,
+  name: 'DefaultAgendaSlideHorizontal',
+  description: "Agenda and outline slide (Portrait 9:16 variant)",
+  sourceFile: 'src/core/scene/slide/agenda/default-agenda-slide-Horizontal.tsx',
+  aspectRatio: '9:16',
+  tags: Array.from(new Set([...(baseComponentMetadata.tags ?? []), 'horizontal'])),
+}
+
+export const DefaultAgendaSlideHorizontal = VideoComponent(componentMetadata)(function DefaultAgendaSlideHorizontal(
+  props: ComponentProps<typeof DefaultAgendaSlide>,
+) {
+  return <DefaultAgendaSlide {...props} />
+})

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

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

package/src/core/scene/slide/agenda/default-agenda-slide.animated.stories.tsx

@@ -0,0 +1,26 @@
+import { DefaultAgendaSlideLandscape } from './default-agenda-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideLandscape/Animated',
+  component: DefaultAgendaSlideLandscape,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '16:9',
+  },
+}

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

@@ -0,0 +1,25 @@
+import { DefaultAgendaSlideLandscape } from './default-agenda-slide-Landscape'
+
+const meta = {
+  title: 'core/scene/slide/agenda/DefaultAgendaSlideLandscape',
+  component: DefaultAgendaSlideLandscape,
+  args: {
+    title: 'Today’s Agenda',
+    subtitle: 'A clean outline slide for presentations and product reviews.',
+    items: [
+      { title: 'Set the context', detail: 'Why this matters and what changed.', active: true },
+      { title: 'Show the flow', detail: 'Walk through the new experience.' },
+      { title: 'Review outcomes', detail: 'Discuss metrics, risks, and next steps.' },
+      { title: 'Close with actions', detail: 'Assign owners and deadlines.' },
+    ],
+    footer: 'Quarterly review',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '16:9',
+  },
+}