@vibecuting/video-project-core 0.1.25 → 0.1.27

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

@@ -0,0 +1,115 @@
+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 } from '../../../../base'
+import { useRemotionSceneRuntime } from '../../../../base'
+import { getSlideTypographyScale, SlideFrame } from '../_shared'
+import type { DefaultSceneProps } from '../../../../scenes/default-scene-props'
+
+export interface DefaultImageHeroSlideProps extends DefaultSceneProps {
+  title: string
+  subtitle?: string
+  image?: ReactNode
+}
+
+export const componentMetadata = defineScenePluginMetadata({
+  resourceKind: 'scene',
+  name: 'DefaultImageHeroSlide',
+  description: 'Image-led hero slide',
+  sourceFile: 'src/core/scene/slide/image-hero/default-image-hero-slide.tsx',
+  pluginKey: 'core.slide.image-hero',
+  tags: ['scene', 'slide', 'hero', 'image'],
+  aspectRatio: '16:9',
+  sceneType: 'scene',
+  sceneFamily: 'slide',
+  rootLayout: 'absolute-fill',
+  propsTypeName: 'DefaultImageHeroSlideProps',
+})
+
+export const DefaultImageHeroSlide = 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 DefaultImageHeroSlide({
+      sceneId,
+      sceneName,
+      title,
+      subtitle,
+      image,
+    }: DefaultImageHeroSlideProps) {
+      const runtime = useRemotionSceneRuntime()
+      const isPortrait = runtime.height > runtime.width
+      const scale = getSlideTypographyScale(runtime.height)
+
+      return (
+        <SlideFrame
+          pluginKey={componentMetadata.pluginKey}
+          sceneId={sceneId}
+          sceneName={sceneName ?? title}
+          background="linear-gradient(135deg, #020617 0%, #0f172a 50%, #1d4ed8 100%)"
+        >
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'linear-gradient(90deg, rgba(2,6,23,0.88) 0%, rgba(2,6,23,0.34) 50%, rgba(2,6,23,0.75) 100%)',
+            }}
+          />
+          <section
+            style={{
+              position: 'relative',
+              zIndex: 1,
+              display: 'grid',
+              width: '100%',
+              height: '100%',
+              gridTemplateColumns: isPortrait ? '1fr' : '1fr 1.1fr',
+              alignItems: 'center',
+              gap: isPortrait ? 24 : 40,
+              padding: isPortrait ? '44px 28px' : '72px 88px',
+            }}
+          >
+            <div style={{ maxWidth: isPortrait ? 620 : 760 }}>
+              <SceneMotionLayer variant="hero-title">
+                <h1 style={{ margin: 0, fontSize: isPortrait ? scale.title * 0.78 : scale.title, lineHeight: 0.92, letterSpacing: '-0.06em' }}>{title}</h1>
+              </SceneMotionLayer>
+              {subtitle ? (
+                <SceneMotionLayer variant="hero-copy" delayIndex={1}>
+                  <p style={{ margin: isPortrait ? '14px 0 0' : '20px 0 0', fontSize: isPortrait ? scale.body * 0.9 : scale.body, lineHeight: 1.5, opacity: 0.84 }}>{subtitle}</p>
+                </SceneMotionLayer>
+              ) : null}
+            </div>
+            <SceneMotionLayer variant="panel" delayIndex={2}>
+              <div
+                style={{
+                  display: 'grid',
+                  placeItems: 'center',
+                  minHeight: isPortrait ? 320 : 540,
+                  borderRadius: 0,
+                  overflow: 'hidden',
+                  border: '1px solid rgba(148, 163, 184, 0.16)',
+                  background: 'rgba(15, 23, 42, 0.24)',
+                }}
+              >
+                {image ?? (
+                  <div style={{ fontSize: scale.caption, letterSpacing: '0.24em', textTransform: 'uppercase', opacity: 0.52 }}>
+                    Image Placeholder
+                  </div>
+                )}
+              </div>
+            </SceneMotionLayer>
+          </section>
+        </SlideFrame>
+      )
+    },
+  }),
+)

package/src/core/scene/slide/image-hero/index.ts

@@ -0,0 +1,4 @@
+export { DefaultImageHeroSlide } from './default-image-hero-slide'
+export { componentMetadata } from './default-image-hero-slide'
+export { DefaultImageHeroSlideLandscape, componentMetadata as DefaultImageHeroSlideLandscapeMetadata } from './default-image-hero-slide-Landscape'
+export { DefaultImageHeroSlideHorizontal, componentMetadata as DefaultImageHeroSlideHorizontalMetadata } from './default-image-hero-slide-Horizontal'

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

@@ -0,0 +1,329 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  DefaultAgendaSlide,
+  componentMetadata as abstractBackgroundCoverMetadata,
+  DefaultAbstractBackgroundCoverSlide,
+  componentMetadata as annotationMetadata,
+  DefaultAnnotationSlide,
+  DefaultBeforeAfterSlide,
+  DefaultChartSlide,
+  componentMetadata as beforeAfterMetadata,
+  componentMetadata as chartMetadata,
+  componentMetadata as chartSidecarMetadata,
+  DefaultChartSidecarSlide,
+  componentMetadata as chapterMetadata,
+  DefaultChapterSlide,
+  componentMetadata as calloutMetadata,
+  DefaultCalloutSlide,
+  componentMetadata as comparisonCardMetadata,
+  DefaultComparisonCardSlide,
+  componentMetadata as compactHeroMetadata,
+  DefaultCompactHeroSlide,
+  componentMetadata as coverLeftMetadata,
+  DefaultCoverLeftSlide,
+  componentMetadata as coverRightMetadata,
+  DefaultCoverRightSlide,
+  componentMetadata as comparisonMetadata,
+  DefaultComparisonSlide,
+  componentMetadata as codeSnippetMetadata,
+  DefaultCodeSnippetSlide,
+  componentMetadata as dataStoryMetadata,
+  DefaultDataStorySlide,
+  componentMetadata as coverMetadata,
+  DefaultCoverSlide,
+  componentMetadata as diagramMatrixMetadata,
+  DefaultDiagramMatrixSlide,
+  componentMetadata as customerLogoWallMetadata,
+  DefaultCustomerLogoWallSlide,
+  componentMetadata as deviceMockupMetadata,
+  DefaultDeviceMockupSlide,
+  componentMetadata as diagramMetadata,
+  DefaultDiagramSlide,
+  componentMetadata as geoMapMetadata,
+  DefaultGeoMapSlide,
+  componentMetadata as closingMetadata,
+  DefaultClosingSlide,
+  componentMetadata as featureCardsMetadata,
+  DefaultFeatureCardsSlide,
+  componentMetadata as featureGridMetadata,
+  DefaultFeatureGridSlide,
+  componentMetadata as featureListMetadata,
+  DefaultFeatureListSlide,
+  componentMetadata as galleryMetadata,
+  DefaultGallerySlide,
+  componentMetadata as photoAlbumMetadata,
+  DefaultPhotoAlbumSlide,
+  DefaultPhotoAlbumSingleSlide,
+  DefaultPhotoAlbumPairSlide,
+  DefaultPhotoAlbumMultiSlide,
+  componentMetadata as faqAccordionMetadata,
+  DefaultFAQAccordionSlide,
+  componentMetadata as faqMetadata,
+  DefaultFAQSlide,
+  componentMetadata as faqSidecarMetadata,
+  DefaultFAQSidecarSlide,
+  componentMetadata as heroMetadata,
+  DefaultHeroSlide,
+  componentMetadata as heroVariantMetadata,
+  DefaultHeroVariantSlide,
+  componentMetadata as imageHeroMetadata,
+  DefaultImageHeroSlide,
+  componentMetadata as personIntroMetadata,
+  DefaultPersonIntroSlide,
+  DefaultPersonIntroGroupSlide,
+  DefaultPersonIntroDuoSlide,
+  DefaultPersonIntroTrioSlide,
+  DefaultPersonIntroQuadSlide,
+  componentMetadata as interactiveDemoMetadata,
+  DefaultInteractiveDemoSlide,
+  componentMetadata as kpiDashboardMetadata,
+  DefaultKPIDashboardSlide,
+  componentMetadata as listHeroMetadata,
+  DefaultListHeroSlide,
+  componentMetadata as listMetadata,
+  DefaultListSlide,
+  componentMetadata as listWithIconsMetadata,
+  DefaultListWithIconsSlide,
+  componentMetadata as metricGridMetadata,
+  DefaultMetricGridSlide,
+  componentMetadata as metricCardsMetadata,
+  DefaultMetricCardsSlide,
+  componentMetadata as metricListMetadata,
+  DefaultMetricListSlide,
+  componentMetadata as metricShowcaseMetadata,
+  DefaultMetricShowcaseSlide,
+  componentMetadata as metricsStripMetadata,
+  DefaultMetricsStripSlide,
+  componentMetadata as flowDiagramMetadata,
+  DefaultFlowDiagramSlide,
+  componentMetadata as mapLocationMetadata,
+  DefaultMapLocationSlide,
+  componentMetadata as orgChartMetadata,
+  DefaultOrgChartSlide,
+  componentMetadata as videoShowcaseMetadata,
+  DefaultVideoShowcaseSlide,
+  DefaultVideoShowcaseMultiSlide,
+  componentMetadata as stackTimelineMetadata,
+  DefaultStackTimelineSlide,
+  componentMetadata as processMetadata,
+  DefaultProcessSlide,
+  componentMetadata as processCardsMetadata,
+  DefaultProcessCardsSlide,
+  componentMetadata as pricingMetadata,
+  DefaultPricingSlide,
+  componentMetadata as prosConsMetadata,
+  DefaultProsConsSlide,
+  componentMetadata as statWallMetadata,
+  DefaultStatWallSlide,
+  componentMetadata as quoteBannerMetadata,
+  DefaultQuoteBannerSlide,
+  componentMetadata as quoteSidecarMetadata,
+  DefaultQuoteSidecarSlide,
+  componentMetadata as screenshotComparisonMetadata,
+  DefaultScreenshotComparisonSlide,
+  componentMetadata as quoteMetadata,
+  DefaultQuoteSlide,
+  componentMetadata as splitCardMetadata,
+  DefaultSplitCardSlide,
+  componentMetadata as speakerNotesMetadata,
+  DefaultSpeakerNotesSlide,
+  componentMetadata as tableMetadata,
+  DefaultTableSlide,
+  componentMetadata as terminalMetadata,
+  DefaultTerminalSlide,
+  componentMetadata as testimonialGridMetadata,
+  DefaultTestimonialGridSlide,
+  componentMetadata as testimonialWallMetadata,
+  DefaultTestimonialWallSlide,
+  componentMetadata as statsMetadata,
+  DefaultStatsSlide,
+  componentMetadata as splitMetadata,
+  componentMetadata as splitHeroMetadata,
+  DefaultSplitHeroSlide,
+  DefaultSplitSlide,
+  componentMetadata as timelineMetadata,
+  componentMetadata as timelineCardsMetadata,
+  DefaultTimelineCardsSlide,
+  componentMetadata as timelineSplitMetadata,
+  DefaultTimelineSplitSlide,
+  componentMetadata as swimlaneTimelineMetadata,
+  DefaultSwimlaneTimelineSlide,
+  componentMetadata as titleWithImageMetadata,
+  DefaultTitleWithImageSlide,
+  componentMetadata as codeCalloutMetadata,
+  DefaultCodeCalloutSlide,
+  componentMetadata as mermaidDiagramMetadata,
+  DefaultMermaidDiagramSlide,
+  componentMetadata as agendaCardsMetadata,
+  DefaultAgendaCardsSlide,
+  DefaultTimelineSlide,
+  componentMetadata as threeColumnMetadata,
+  DefaultThreeColumnSlide,
+  getSlideTypographyScale,
+} from './index'
+
+describe('video-project-core slide exports', () => {
+  it('exports shared primitives and the slide families', () => {
+    expect(getSlideTypographyScale(1080).title).toBeGreaterThan(0)
+    expect(heroMetadata.sceneFamily).toBe('slide')
+    expect(imageHeroMetadata.sceneFamily).toBe('slide')
+    expect(splitMetadata.sceneFamily).toBe('slide')
+    expect(chapterMetadata.sceneFamily).toBe('slide')
+    expect(comparisonMetadata.sceneFamily).toBe('slide')
+    expect(coverMetadata.sceneFamily).toBe('slide')
+    expect(deviceMockupMetadata.sceneFamily).toBe('slide')
+    expect(closingMetadata.sceneFamily).toBe('slide')
+    expect(featureGridMetadata.sceneFamily).toBe('slide')
+    expect(featureListMetadata.sceneFamily).toBe('slide')
+    expect(faqMetadata.sceneFamily).toBe('slide')
+    expect(faqAccordionMetadata.sceneFamily).toBe('slide')
+    expect(faqSidecarMetadata.sceneFamily).toBe('slide')
+    expect(featureCardsMetadata.sceneFamily).toBe('slide')
+    expect(timelineMetadata.sceneFamily).toBe('slide')
+    expect(statsMetadata.sceneFamily).toBe('slide')
+    expect(beforeAfterMetadata.sceneFamily).toBe('slide')
+    expect(abstractBackgroundCoverMetadata.sceneFamily).toBe('slide')
+    expect(annotationMetadata.sceneFamily).toBe('slide')
+    expect(chartMetadata.sceneFamily).toBe('slide')
+    expect(chartSidecarMetadata.sceneFamily).toBe('slide')
+    expect(comparisonCardMetadata.sceneFamily).toBe('slide')
+    expect(compactHeroMetadata.sceneFamily).toBe('slide')
+    expect(coverLeftMetadata.sceneFamily).toBe('slide')
+    expect(coverRightMetadata.sceneFamily).toBe('slide')
+    expect(codeSnippetMetadata.sceneFamily).toBe('slide')
+    expect(calloutMetadata.sceneFamily).toBe('slide')
+    expect(dataStoryMetadata.sceneFamily).toBe('slide')
+    expect(customerLogoWallMetadata.sceneFamily).toBe('slide')
+    expect(diagramMetadata.sceneFamily).toBe('slide')
+    expect(geoMapMetadata.sceneFamily).toBe('slide')
+    expect(diagramMatrixMetadata.sceneFamily).toBe('slide')
+    expect(galleryMetadata.sceneFamily).toBe('slide')
+    expect(photoAlbumMetadata.sceneFamily).toBe('slide')
+    expect(kpiDashboardMetadata.sceneFamily).toBe('slide')
+    expect(heroVariantMetadata.sceneFamily).toBe('slide')
+    expect(interactiveDemoMetadata.sceneFamily).toBe('slide')
+    expect(listHeroMetadata.sceneFamily).toBe('slide')
+    expect(listMetadata.sceneFamily).toBe('slide')
+    expect(listWithIconsMetadata.sceneFamily).toBe('slide')
+    expect(metricGridMetadata.sceneFamily).toBe('slide')
+    expect(metricCardsMetadata.sceneFamily).toBe('slide')
+    expect(metricListMetadata.sceneFamily).toBe('slide')
+    expect(metricShowcaseMetadata.sceneFamily).toBe('slide')
+    expect(metricsStripMetadata.sceneFamily).toBe('slide')
+    expect(flowDiagramMetadata.sceneFamily).toBe('slide')
+    expect(mapLocationMetadata.sceneFamily).toBe('slide')
+    expect(orgChartMetadata.sceneFamily).toBe('slide')
+    expect(stackTimelineMetadata.sceneFamily).toBe('slide')
+    expect(pricingMetadata.sceneFamily).toBe('slide')
+    expect(prosConsMetadata.sceneFamily).toBe('slide')
+    expect(statWallMetadata.sceneFamily).toBe('slide')
+    expect(quoteBannerMetadata.sceneFamily).toBe('slide')
+    expect(quoteSidecarMetadata.sceneFamily).toBe('slide')
+    expect(screenshotComparisonMetadata.sceneFamily).toBe('slide')
+    expect(splitCardMetadata.sceneFamily).toBe('slide')
+    expect(terminalMetadata.sceneFamily).toBe('slide')
+    expect(testimonialGridMetadata.sceneFamily).toBe('slide')
+    expect(testimonialWallMetadata.sceneFamily).toBe('slide')
+    expect(speakerNotesMetadata.sceneFamily).toBe('slide')
+    expect(splitHeroMetadata.sceneFamily).toBe('slide')
+    expect(timelineCardsMetadata.sceneFamily).toBe('slide')
+    expect(timelineSplitMetadata.sceneFamily).toBe('slide')
+    expect(swimlaneTimelineMetadata.sceneFamily).toBe('slide')
+    expect(titleWithImageMetadata.sceneFamily).toBe('slide')
+    expect(mermaidDiagramMetadata.sceneFamily).toBe('slide')
+    expect(codeCalloutMetadata.sceneFamily).toBe('slide')
+    expect(agendaCardsMetadata.sceneFamily).toBe('slide')
+    expect(DefaultAgendaSlide).toBeTypeOf('function')
+    expect(DefaultAbstractBackgroundCoverSlide).toBeTypeOf('function')
+    expect(DefaultAnnotationSlide).toBeTypeOf('function')
+    expect(DefaultBeforeAfterSlide).toBeTypeOf('function')
+    expect(DefaultChartSlide).toBeTypeOf('function')
+    expect(DefaultChartSidecarSlide).toBeTypeOf('function')
+    expect(DefaultCalloutSlide).toBeTypeOf('function')
+    expect(DefaultComparisonCardSlide).toBeTypeOf('function')
+    expect(DefaultCompactHeroSlide).toBeTypeOf('function')
+    expect(DefaultCoverLeftSlide).toBeTypeOf('function')
+    expect(DefaultCoverRightSlide).toBeTypeOf('function')
+    expect(DefaultComparisonSlide).toBeTypeOf('function')
+    expect(DefaultCodeSnippetSlide).toBeTypeOf('function')
+    expect(DefaultDataStorySlide).toBeTypeOf('function')
+    expect(DefaultCoverSlide).toBeTypeOf('function')
+    expect(DefaultDiagramMatrixSlide).toBeTypeOf('function')
+    expect(DefaultCustomerLogoWallSlide).toBeTypeOf('function')
+    expect(DefaultDeviceMockupSlide).toBeTypeOf('function')
+    expect(DefaultDiagramSlide).toBeTypeOf('function')
+    expect(DefaultGeoMapSlide).toBeTypeOf('function')
+    expect(DefaultClosingSlide).toBeTypeOf('function')
+    expect(DefaultFeatureCardsSlide).toBeTypeOf('function')
+    expect(DefaultFeatureGridSlide).toBeTypeOf('function')
+    expect(DefaultFeatureListSlide).toBeTypeOf('function')
+    expect(DefaultGallerySlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumSlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumSingleSlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumPairSlide).toBeTypeOf('function')
+    expect(DefaultPhotoAlbumMultiSlide).toBeTypeOf('function')
+    expect(DefaultFAQAccordionSlide).toBeTypeOf('function')
+    expect(DefaultFAQSlide).toBeTypeOf('function')
+    expect(DefaultFAQSidecarSlide).toBeTypeOf('function')
+    expect(DefaultKPIDashboardSlide).toBeTypeOf('function')
+    expect(DefaultHeroVariantSlide).toBeTypeOf('function')
+    expect(DefaultInteractiveDemoSlide).toBeTypeOf('function')
+    expect(DefaultListHeroSlide).toBeTypeOf('function')
+    expect(DefaultListSlide).toBeTypeOf('function')
+    expect(DefaultListWithIconsSlide).toBeTypeOf('function')
+    expect(DefaultMetricGridSlide).toBeTypeOf('function')
+    expect(DefaultMetricCardsSlide).toBeTypeOf('function')
+    expect(DefaultMetricListSlide).toBeTypeOf('function')
+    expect(DefaultMetricShowcaseSlide).toBeTypeOf('function')
+    expect(DefaultMetricsStripSlide).toBeTypeOf('function')
+    expect(DefaultFlowDiagramSlide).toBeTypeOf('function')
+    expect(DefaultMapLocationSlide).toBeTypeOf('function')
+    expect(DefaultOrgChartSlide).toBeTypeOf('function')
+    expect(videoShowcaseMetadata.sceneFamily).toBe('slide')
+    expect(DefaultStackTimelineSlide).toBeTypeOf('function')
+    expect(DefaultPricingSlide).toBeTypeOf('function')
+    expect(DefaultProsConsSlide).toBeTypeOf('function')
+    expect(DefaultStatWallSlide).toBeTypeOf('function')
+    expect(DefaultQuoteBannerSlide).toBeTypeOf('function')
+    expect(DefaultQuoteSidecarSlide).toBeTypeOf('function')
+    expect(DefaultScreenshotComparisonSlide).toBeTypeOf('function')
+    expect(DefaultSplitCardSlide).toBeTypeOf('function')
+    expect(DefaultStatsSlide).toBeTypeOf('function')
+    expect(DefaultSpeakerNotesSlide).toBeTypeOf('function')
+    expect(DefaultSplitHeroSlide).toBeTypeOf('function')
+    expect(DefaultTerminalSlide).toBeTypeOf('function')
+    expect(DefaultTestimonialGridSlide).toBeTypeOf('function')
+    expect(DefaultTestimonialWallSlide).toBeTypeOf('function')
+    expect(DefaultTimelineCardsSlide).toBeTypeOf('function')
+    expect(DefaultTimelineSplitSlide).toBeTypeOf('function')
+    expect(DefaultSwimlaneTimelineSlide).toBeTypeOf('function')
+    expect(DefaultTitleWithImageSlide).toBeTypeOf('function')
+    expect(DefaultCodeCalloutSlide).toBeTypeOf('function')
+    expect(DefaultMermaidDiagramSlide).toBeTypeOf('function')
+    expect(DefaultAgendaCardsSlide).toBeTypeOf('function')
+    expect(DefaultTimelineSlide).toBeTypeOf('function')
+    expect(processMetadata.sceneFamily).toBe('slide')
+    expect(quoteMetadata.sceneFamily).toBe('slide')
+    expect(tableMetadata.sceneFamily).toBe('slide')
+    expect(DefaultProcessSlide).toBeTypeOf('function')
+    expect(processCardsMetadata.sceneFamily).toBe('slide')
+    expect(DefaultProcessCardsSlide).toBeTypeOf('function')
+    expect(DefaultQuoteSlide).toBeTypeOf('function')
+    expect(DefaultTableSlide).toBeTypeOf('function')
+    expect(threeColumnMetadata.sceneFamily).toBe('slide')
+    expect(DefaultHeroSlide).toBeTypeOf('function')
+    expect(DefaultImageHeroSlide).toBeTypeOf('function')
+    expect(personIntroMetadata.sceneFamily).toBe('slide')
+    expect(DefaultPersonIntroSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroGroupSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroDuoSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroTrioSlide).toBeTypeOf('function')
+    expect(DefaultPersonIntroQuadSlide).toBeTypeOf('function')
+    expect(DefaultSplitSlide).toBeTypeOf('function')
+    expect(DefaultChapterSlide).toBeTypeOf('function')
+    expect(DefaultThreeColumnSlide).toBeTypeOf('function')
+    expect(DefaultVideoShowcaseSlide).toBeTypeOf('function')
+    expect(DefaultVideoShowcaseMultiSlide).toBeTypeOf('function')
+  })
+})

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

@@ -1 +1,169 @@
+export * from './_shared'
 export { DefaultSlideScene } from './default-slide-scene'
+
+export { DefaultAbstractBackgroundCoverSlide } from './abstract-background-cover'
+export { DefaultAgendaCardsSlide } from './agenda-cards'
+export { DefaultAgendaSlide } from './agenda'
+export { DefaultAnnotationSlide } from './annotation'
+export { DefaultBeforeAfterSlide } from './before-after'
+export { DefaultCalloutSlide } from './callout'
+export { DefaultChartSidecarSlide } from './chart-sidecar'
+export { DefaultChartSlide } from './chart'
+export { DefaultChapterSlide } from './chapter'
+export { DefaultClosingSlide } from './closing'
+export { DefaultCodeCalloutSlide } from './code-callout'
+export { DefaultCodeSnippetSlide } from './code-snippet'
+export { DefaultComparisonCardSlide } from './comparison-card'
+export { DefaultComparisonSlide } from './comparison'
+export { DefaultCompactHeroSlide } from './compact-hero'
+export { DefaultCoverLeftSlide } from './cover-left'
+export { DefaultCoverRightSlide } from './cover-right'
+export { DefaultCoverSlide } from './cover'
+export { DefaultCustomerLogoWallSlide } from './customer-logo-wall'
+export { DefaultDataStorySlide } from './data-story'
+export { DefaultDeviceMockupSlide } from './device-mockup'
+export { DefaultDiagramMatrixSlide } from './diagram-matrix'
+export { DefaultDiagramSlide } from './diagram'
+export { DefaultFAQAccordionSlide } from './faq-accordion'
+export { DefaultFAQSidecarSlide } from './faq-sidecar'
+export { DefaultFAQSlide } from './faq'
+export { DefaultFeatureCardsSlide } from './feature-cards'
+export { DefaultFeatureGridSlide } from './feature-grid'
+export { DefaultFeatureListSlide } from './feature-list'
+export { DefaultFlowDiagramSlide } from './flow-diagram'
+export { DefaultGallerySlide } from './gallery'
+export { DefaultPhotoAlbumSlide } from './photo-album'
+export { DefaultPhotoAlbumSingleSlide } from './photo-album'
+export { DefaultPhotoAlbumPairSlide } from './photo-album'
+export { DefaultPhotoAlbumMultiSlide } from './photo-album'
+export { DefaultGeoMapSlide } from './geo-map'
+export { DefaultHeroSlide } from './hero'
+export { DefaultHeroVariantSlide } from './hero-variant'
+export { DefaultImageHeroSlide } from './image-hero'
+export { DefaultPersonIntroSlide } from './person-intro'
+export { DefaultPersonIntroGroupSlide } from './person-intro'
+export { DefaultPersonIntroDuoSlide } from './person-intro'
+export { DefaultPersonIntroTrioSlide } from './person-intro'
+export { DefaultPersonIntroQuadSlide } from './person-intro'
+export { DefaultInteractiveDemoSlide } from './interactive-demo'
+export { DefaultKPIDashboardSlide } from './kpi-dashboard'
+export { DefaultListHeroSlide } from './list-hero'
+export { DefaultListSlide } from './list'
+export { DefaultListWithIconsSlide } from './list-with-icons'
+export { DefaultMapLocationSlide } from './map-location'
+export { DefaultMetricCardsSlide } from './metric-cards'
+export { DefaultMetricGridSlide } from './metric-grid'
+export { DefaultMetricListSlide } from './metric-list'
+export { DefaultMetricShowcaseSlide } from './metric-showcase'
+export { DefaultMetricsStripSlide } from './metrics-strip'
+export { DefaultMermaidDiagramSlide } from './mermaid-diagram'
+export { DefaultOrgChartSlide } from './org-chart'
+export { DefaultVideoShowcaseSlide } from './video-showcase'
+export { DefaultVideoShowcaseMultiSlide } from './video-showcase'
+export { DefaultPricingSlide } from './pricing'
+export { DefaultProcessCardsSlide } from './process-cards'
+export { DefaultProcessSlide } from './process'
+export { DefaultProsConsSlide } from './pros-cons'
+export { DefaultQuoteBannerSlide } from './quote-banner'
+export { DefaultQuoteSidecarSlide } from './quote-sidecar'
+export { DefaultQuoteSlide } from './quote'
+export { DefaultScreenshotComparisonSlide } from './screenshot-comparison'
+export { DefaultSpeakerNotesSlide } from './speaker-notes'
+export { DefaultSplitCardSlide } from './split-card'
+export { DefaultSplitHeroSlide } from './split-hero'
+export { DefaultSplitSlide } from './split'
+export { DefaultStackTimelineSlide } from './stack-timeline'
+export { DefaultStatWallSlide } from './stat-wall'
+export { DefaultStatsSlide } from './stats'
+export { DefaultSwimlaneTimelineSlide } from './swimlane-timeline'
+export { DefaultTableSlide } from './table'
+export { DefaultTestimonialGridSlide } from './testimonial-grid'
+export { DefaultTestimonialWallSlide } from './testimonial-wall'
+export { DefaultTerminalSlide } from './terminal'
+export { DefaultThreeColumnSlide } from './three-column'
+export { DefaultTimelineCardsSlide } from './timeline-cards'
+export { DefaultTimelineSlide } from './timeline'
+export { DefaultTimelineSplitSlide } from './timeline-split'
+export { DefaultTitleWithImageSlide } from './title-with-image'
+export { DefaultSlideSceneLandscape, componentMetadata as DefaultSlideSceneLandscapeMetadata } from './default-slide-scene-Landscape'
+export { DefaultSlideSceneHorizontal, componentMetadata as DefaultSlideSceneHorizontalMetadata } from './default-slide-scene-Horizontal'
+
+const slideSceneMetadata = { sceneFamily: 'slide' as const }
+
+export const componentMetadata = slideSceneMetadata
+export const abstractBackgroundCoverMetadata = slideSceneMetadata
+export const agendaCardsMetadata = slideSceneMetadata
+export const agendaMetadata = slideSceneMetadata
+export const annotationMetadata = slideSceneMetadata
+export const beforeAfterMetadata = slideSceneMetadata
+export const calloutMetadata = slideSceneMetadata
+export const chartSidecarMetadata = slideSceneMetadata
+export const chartMetadata = slideSceneMetadata
+export const chapterMetadata = slideSceneMetadata
+export const closingMetadata = slideSceneMetadata
+export const codeCalloutMetadata = slideSceneMetadata
+export const codeSnippetMetadata = slideSceneMetadata
+export const comparisonCardMetadata = slideSceneMetadata
+export const comparisonMetadata = slideSceneMetadata
+export const compactHeroMetadata = slideSceneMetadata
+export const coverLeftMetadata = slideSceneMetadata
+export const coverRightMetadata = slideSceneMetadata
+export const coverMetadata = slideSceneMetadata
+export const customerLogoWallMetadata = slideSceneMetadata
+export const dataStoryMetadata = slideSceneMetadata
+export const deviceMockupMetadata = slideSceneMetadata
+export const diagramMatrixMetadata = slideSceneMetadata
+export const diagramMetadata = slideSceneMetadata
+export const faqAccordionMetadata = slideSceneMetadata
+export const faqSidecarMetadata = slideSceneMetadata
+export const faqMetadata = slideSceneMetadata
+export const featureCardsMetadata = slideSceneMetadata
+export const featureGridMetadata = slideSceneMetadata
+export const featureListMetadata = slideSceneMetadata
+export const flowDiagramMetadata = slideSceneMetadata
+export const galleryMetadata = slideSceneMetadata
+export const photoAlbumMetadata = slideSceneMetadata
+export const geoMapMetadata = slideSceneMetadata
+export const heroMetadata = slideSceneMetadata
+export const heroVariantMetadata = slideSceneMetadata
+export const imageHeroMetadata = slideSceneMetadata
+export const personIntroMetadata = slideSceneMetadata
+export const interactiveDemoMetadata = slideSceneMetadata
+export const kpiDashboardMetadata = slideSceneMetadata
+export const listHeroMetadata = slideSceneMetadata
+export const listMetadata = slideSceneMetadata
+export const listWithIconsMetadata = slideSceneMetadata
+export const mapLocationMetadata = slideSceneMetadata
+export const metricCardsMetadata = slideSceneMetadata
+export const metricGridMetadata = slideSceneMetadata
+export const metricListMetadata = slideSceneMetadata
+export const metricShowcaseMetadata = slideSceneMetadata
+export const metricsStripMetadata = slideSceneMetadata
+export const mermaidDiagramMetadata = slideSceneMetadata
+export const orgChartMetadata = slideSceneMetadata
+export const videoShowcaseMetadata = slideSceneMetadata
+export const pricingMetadata = slideSceneMetadata
+export const processCardsMetadata = slideSceneMetadata
+export const processMetadata = slideSceneMetadata
+export const prosConsMetadata = slideSceneMetadata
+export const quoteBannerMetadata = slideSceneMetadata
+export const quoteSidecarMetadata = slideSceneMetadata
+export const quoteMetadata = slideSceneMetadata
+export const screenshotComparisonMetadata = slideSceneMetadata
+export const speakerNotesMetadata = slideSceneMetadata
+export const splitCardMetadata = slideSceneMetadata
+export const splitHeroMetadata = slideSceneMetadata
+export const splitMetadata = slideSceneMetadata
+export const stackTimelineMetadata = slideSceneMetadata
+export const statWallMetadata = slideSceneMetadata
+export const statsMetadata = slideSceneMetadata
+export const swimlaneTimelineMetadata = slideSceneMetadata
+export const tableMetadata = slideSceneMetadata
+export const testimonialGridMetadata = slideSceneMetadata
+export const testimonialWallMetadata = slideSceneMetadata
+export const terminalMetadata = slideSceneMetadata
+export const threeColumnMetadata = slideSceneMetadata
+export const timelineCardsMetadata = slideSceneMetadata
+export const timelineMetadata = slideSceneMetadata
+export const timelineSplitMetadata = slideSceneMetadata
+export const titleWithImageMetadata = slideSceneMetadata

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

@@ -0,0 +1,21 @@
+import { DefaultInteractiveDemoSlideHorizontal } from './default-interactive-demo-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/interactive-demo/DefaultInteractiveDemoSlideHorizontal/Animated',
+  component: DefaultInteractiveDemoSlideHorizontal,
+  args: {
+    title: 'Interactive Demo',
+    subtitle: 'Use this slide to walk through a product interaction step by step.',
+    steps: ['Open the workspace', 'Pick a template', 'Preview the output', 'Export the result'],
+    note: 'Replace this box with a screen capture or animated mockup.',
+  },
+}
+
+export default meta
+
+export const Animated = {
+  parameters: {
+    scenePreviewMode: 'animation',
+    scenePreviewAspectRatio: '9:16',
+  },
+}

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

@@ -0,0 +1,20 @@
+import { DefaultInteractiveDemoSlideHorizontal } from './default-interactive-demo-slide-Horizontal'
+
+const meta = {
+  title: 'core/scene/slide/interactive-demo/DefaultInteractiveDemoSlideHorizontal',
+  component: DefaultInteractiveDemoSlideHorizontal,
+  args: {
+    title: 'Interactive Demo',
+    subtitle: 'Use this slide to walk through a product interaction step by step.',
+    steps: ['Open the workspace', 'Pick a template', 'Preview the output', 'Export the result'],
+    note: 'Replace this box with a screen capture or animated mockup.',
+  },
+}
+
+export default meta
+
+export const Default = {
+  parameters: {
+    scenePreviewAspectRatio: '9:16',
+  },
+}