feat(cms): add VDO Frame Scrubber block with isolated sequence library

packages/types/index.ts

@@ -1337,6 +1337,30 @@ export const CinematicStoryScrollSectionPayloadSchema = z.object({
 }).passthrough();
 export type CinematicStoryScrollSectionPayload = z.infer<typeof CinematicStoryScrollSectionPayloadSchema>;
 
+export const VdoFrameScrubberSectionPayloadSchema = z.object({
+  folderPath: z.string().optional().default('/frame-sequences/chrome-sprocket-428h'),
+  pattern: z.string().optional().default('frame-{index}.webp'),
+  padding: z.number().optional().default(3),
+  totalFrames: z.number().optional().default(432),
+  fps: z.number().optional().default(24),
+  durationSeconds: z.number().optional().default(18),
+  eyebrow: z.string().optional(),
+  title: z.string().optional(),
+  subtitle: z.string().optional(),
+  instruction: z.string().optional(),
+  productName: z.string().optional(),
+  productBadge: z.string().optional(),
+  endCtaTitle: z.string().optional(),
+  endCtaButtonText: z.string().optional(),
+  endCtaLink: z.string().optional(),
+  theme: z.enum(['dark', 'light']).optional().default('dark'),
+  accentColor: z.string().optional().default('#d5ff63'),
+  productId: z.union([z.number(), z.string(), z.null()]).optional(),
+  paddingTop: z.string().optional(),
+  paddingBottom: z.string().optional(),
+}).passthrough();
+export type VdoFrameScrubberSectionPayload = z.infer<typeof VdoFrameScrubberSectionPayloadSchema>;
+
 export const Interactive360ShowcaseSectionPayloadSchema = z.object({
   spriteSheetUrl: z.string().optional().default('/images/3d/sprocket-views.png'),
   detailImageUrl: z.string().optional().default('/images/3d/sprocket-detail.png'),
@@ -1389,7 +1413,7 @@ export const PAGE_SECTION_TYPES = [
   'USP_BAR', 'PRODUCT_MAIN', 'PRODUCT_DETAILS', 'PRODUCT_SPECS',
   'PRODUCT_REVIEWS', 'RELATED_PRODUCTS', 'CUSTOM',
   'HERO_MINIMAL', 'HERO_SPLIT_MINIMAL', 'HERO_VIDEO_MINIMAL', 'BANNER_MINIMAL', 'ANNOUNCEMENT_BAR_MINIMAL', 'USP_MINIMAL',
-  'CINEMATIC_STORY_SCROLL', 'APPLE_SHOWCASE', 'INTERACTIVE_360_SHOWCASE'
+  'CINEMATIC_STORY_SCROLL', 'APPLE_SHOWCASE', 'INTERACTIVE_360_SHOWCASE', 'VDO_FRAME_SCRUBBER'
 ] as const;
 export type SectionType = typeof PAGE_SECTION_TYPES[number];
 
@@ -1441,6 +1465,7 @@ export const PAGE_SECTION_LOCALIZED_PATHS: Record<SectionType, readonly string[]
   CINEMATIC_STORY_SCROLL: ['endCtaTitle', 'endCtaButtonText'],
   APPLE_SHOWCASE: ['endCtaTitle', 'endCtaButtonText'],
   INTERACTIVE_360_SHOWCASE: ['eyebrow', 'title', 'subtitle', 'detailKicker', 'detailTitle', 'detailCaption', 'productName', 'endCtaTitle', 'endCtaButtonText'],
+  VDO_FRAME_SCRUBBER: ['eyebrow', 'title', 'subtitle', 'instruction', 'productName', 'endCtaTitle', 'endCtaButtonText'],
 };
 
 export const PAGE_SECTION_PAYLOAD_SCHEMAS: Record<SectionType, z.ZodType> = {
@@ -1491,6 +1516,7 @@ export const PAGE_SECTION_PAYLOAD_SCHEMAS: Record<SectionType, z.ZodType> = {
   CINEMATIC_STORY_SCROLL: CinematicStoryScrollSectionPayloadSchema,
   APPLE_SHOWCASE: AppleShowcaseSectionPayloadSchema,
   INTERACTIVE_360_SHOWCASE: Interactive360ShowcaseSectionPayloadSchema,
+  VDO_FRAME_SCRUBBER: VdoFrameScrubberSectionPayloadSchema,
 };
 
 export const PRODUCT_DETAIL_SECTION_TYPES = [