visualfries 0.1.0 → 0.1.3

package/dist/schemas/scene/components.js

@@ -1,7 +1,8 @@
 import { z } from 'zod';
 import { isValidColor } from './utils.js';
 import { EffectBaseShape, EffectShape as BaseEffectShape, BlurEffectShape, ShadowShape as StructuredShadowShape, OutlineShape as StructuredOutlineShape, ColorTypeShape, GradientDefinitionShape } from './properties.js';
-import { AnimationPresetShape, AnimationReferenceShape } from './animations.js';
+import { AnimationReferenceShape } from './animations.js';
+import { coerceValidNumber, coerceNumber, coercePositiveNumber, coerceNormalizedNumber, coerceNonNegativeNumber, coerceInteger } from './utils.js';
 // Utility functions
 const toFixed3 = (val) => parseFloat(val.toFixed(3));
 const toFixed3Optional = (val) => {
@@ -19,14 +20,14 @@ export const StructuredFontSizeShape = z.union([
         .transform((val) => ({ value: val, unit: 'px' })),
     z.object({
         value: z.number().positive(),
-        unit: z.enum(['px', 'em', 'rem', '%']).default('px')
+        unit: z.enum(['px', 'em', 'rem', '%']).prefault('px')
     })
 ]);
 export const StructuredEmSizeShape = z.union([
     z.number().transform((val) => ({ value: val, unit: 'em' })),
     z.object({
         value: z.number(),
-        unit: z.enum(['px', 'em', 'rem', '%']).default('em')
+        unit: z.enum(['px', 'em', 'rem', '%']).prefault('em')
     })
 ]);
 const FontWeightShape = z.enum([
@@ -74,10 +75,10 @@ export const TextAppearanceShape = z.object({
         color: ColorTypeShape.nullable().optional(),
         backgroundColor: ColorTypeShape.nullable().optional(),
         fontWeight: FontWeightShape.optional(),
-        scale: z.number().positive().optional(),
-        backgroundPaddingX: z.number().min(0).optional(),
-        backgroundPaddingY: z.number().min(0).optional(),
-        backgroundBorderRadius: z.number().min(0).optional()
+        scale: coercePositiveNumber().optional(),
+        backgroundPaddingX: coerceNonNegativeNumber().optional(),
+        backgroundPaddingY: coerceNonNegativeNumber().optional(),
+        backgroundBorderRadius: coerceNonNegativeNumber().optional()
     })
         .nullable()
         .optional(),
@@ -87,20 +88,20 @@ export const TextAppearanceShape = z.object({
         color: ColorTypeShape.nullable().optional(),
         backgroundColor: ColorTypeShape.nullable().optional(),
         fontWeight: FontWeightShape.optional(),
-        scale: z.number().positive().optional(),
-        backgroundPaddingX: z.number().min(0).optional(),
-        backgroundPaddingY: z.number().min(0).optional(),
-        backgroundBorderRadius: z.number().min(0).optional()
+        scale: coercePositiveNumber().optional(),
+        backgroundPaddingX: coerceNonNegativeNumber().optional(),
+        backgroundPaddingY: coerceNonNegativeNumber().optional(),
+        backgroundBorderRadius: coerceNonNegativeNumber().optional()
     })
         .nullable()
         .optional(),
     highlightColors: z.array(ColorTypeShape).nullable().optional()
 });
 const BgShape = z.object({
-    enabled: z.boolean().default(false),
+    enabled: z.boolean().prefault(false),
     color: ColorTypeShape,
-    target: z.enum(['wrapper', 'element']).default('wrapper').optional(),
-    radius: z.number().min(0).default(0).optional()
+    target: z.enum(['wrapper', 'element']).prefault('wrapper').optional(),
+    radius: z.number().min(0).prefault(0).optional()
 });
 export const BackgroundShape = z.union([BgShape, ColorTypeShape]).transform((value) => {
     if (typeof value === 'object' && value !== null && 'enabled' in value) {
@@ -117,31 +118,96 @@ export const BackgroundShape = z.union([BgShape, ColorTypeShape]).transform((val
  * General appearance schema for all components
  */
 export const AppearanceShape = z.object({
-    x: z.number(),
-    y: z.number(),
-    width: z.number().positive(),
-    height: z.number().positive(),
-    offsetX: z.number().optional(), // 0 = left, 132 = 132px from left
-    offsetY: z.number().optional(), // 0 = top, 132 = 132px from top
-    opacity: z.number().min(0).max(1).default(1).optional(),
-    rotation: z.number().default(0).optional(),
-    scaleX: z.number().default(1).optional(),
-    scaleY: z.number().default(1).optional(),
-    background: BackgroundShape.nullable().default(null).optional(), // ColorTypeShape
+    x: coerceValidNumber(),
+    y: coerceValidNumber(),
+    width: coercePositiveNumber(),
+    height: coercePositiveNumber(),
+    offsetX: coerceValidNumber().optional(), // 0 = left, 132 = 132px from left
+    offsetY: coerceValidNumber().optional(), // 0 = top, 132 = 132px from top
+    opacity: coerceNormalizedNumber().prefault(1).optional(),
+    rotation: coerceValidNumber().prefault(0).optional(),
+    scaleX: coerceValidNumber().prefault(1).optional(),
+    scaleY: coerceValidNumber().prefault(1).optional(),
+    background: BackgroundShape.nullable().prefault(null).optional(), // ColorTypeShape
     // Text-specific appearance properties
     text: TextAppearanceShape.optional(),
     // Optional alignment properties
     verticalAlign: z.enum(['top', 'center', 'bottom']).optional(),
     horizontalAlign: z.enum(['left', 'center', 'right']).optional(),
     // not optimal but to prevent linter errors. This is for subtitles only
-    backgroundAlwaysVisible: z.boolean().default(false).optional()
+    backgroundAlwaysVisible: z.boolean().prefault(false).optional()
+});
+/**
+ * Specialized appearance shapes for different component types
+ * These are NOT exported to reduce .d.ts file size - they're only used internally
+ */
+/**
+ * Text-focused appearance shape for TEXT components
+ */
+const TextFocusedAppearanceShape = AppearanceShape.extend({
+    text: TextAppearanceShape,
+    verticalAlign: z.enum(['top', 'center', 'bottom']).optional(),
+    horizontalAlign: z.enum(['left', 'center', 'right']).optional()
+});
+/**
+ * Shape appearance for SHAPE components
+ */
+const ShapeAppearanceShape = AppearanceShape.extend({
+    color: ColorTypeShape.optional() // fill color
+});
+/**
+ * Color appearance for COLOR components
+ */
+const ColorAppearanceShape = AppearanceShape.extend({
+    background: z.string().refine(isValidColor, {
+        error: 'Invalid color format for ColorComponent background'
+    })
+});
+/**
+ * Gradient appearance for GRADIENT components
+ */
+const GradientAppearanceShape = AppearanceShape.extend({
+    background: GradientDefinitionShape // Requires a gradient type in background
+});
+/**
+ * AI Emoji shape for subtitle components
+ */
+export const AIEmojiShape = z.object({
+    text: z.string(),
+    emoji: z.string(),
+    startAt: coerceValidNumber(),
+    endAt: coerceValidNumber(),
+    componentId: z.string().optional()
+}).refine((data) => data.startAt <= data.endAt, {
+    error: 'endAt must be greater than or equal to startAt',
+    path: ['endAt']
+});
+/**
+ * Subtitle appearance for SUBTITLES components
+ */
+const SubtitleAppearanceShape = AppearanceShape.extend({
+    text: TextAppearanceShape,
+    verticalAlign: z.enum(['top', 'center', 'bottom']).optional(),
+    horizontalAlign: z.enum(['left', 'center', 'right']).optional(),
+    hasAIEmojis: z.boolean().prefault(false).optional(),
+    aiEmojisPlacement: z.enum(['top', 'bottom']).prefault('top').optional(),
+    aiEmojisPlacementOffset: coerceValidNumber().prefault(30).optional(),
+    aiEmojis: z.array(AIEmojiShape).optional(),
+    highlighterColor1: ColorTypeShape.optional(),
+    highlighterColor2: ColorTypeShape.optional(),
+    highlighterColor3: ColorTypeShape.optional()
 });
 /**
  * Timeline structure for components
  */
-export const ComponentTimelineShape = z.object({
-    startAt: z.number().min(0).transform(toFixed3),
-    endAt: z.number().min(0).transform(toFixed3)
+export const ComponentTimelineShape = z
+    .object({
+    startAt: coerceNonNegativeNumber().transform(toFixed3),
+    endAt: coerceNonNegativeNumber().transform(toFixed3)
+})
+    .refine((t) => t.startAt <= t.endAt, {
+    message: 'timeline endAt must be ≥ startAt',
+    path: ['endAt']
 });
 /**
  * Animation structure
@@ -149,35 +215,50 @@ export const ComponentTimelineShape = z.object({
 export const AnimationShape = z.object({
     id: z.string(),
     name: z.string(),
-    startAt: z.number().min(0).optional(),
+    startAt: coerceNonNegativeNumber().optional(),
     animation: AnimationReferenceShape,
-    enabled: z.boolean().default(true).optional()
+    enabled: z.boolean().prefault(true).optional()
 });
 /**
  * Source metadata for media components
  */
 export const SourceMetadataShape = z.object({
-    width: z.number().positive().optional(),
-    height: z.number().positive().optional(),
-    duration: z.number().min(0).optional(),
+    width: coercePositiveNumber().optional(),
+    height: coercePositiveNumber().optional(),
+    duration: coerceNonNegativeNumber().optional(),
     format: z.string().optional(),
     codec: z.string().optional(),
-    bitrate: z.number().positive().optional(),
-    fps: z.number().positive().optional(),
+    bitrate: coercePositiveNumber().optional(),
+    fps: coercePositiveNumber().optional(),
     hasAudio: z.boolean().optional()
 });
 /**
  * Component source definition
  */
-export const ComponentSourceShape = z.object({
-    url: z.string().url().optional(), // might have assetId. However should be required for video and other components
-    streamUrl: z.string().url().optional(),
+export const ComponentSourceShape = z
+    .object({
+    url: z.url().optional(), // might have assetId. However should be required for video and other components
+    streamUrl: z.url().optional(),
     assetId: z.string().optional(),
     languageCode: z.string().optional(),
-    startAt: z.number().min(0).optional().transform(toFixed3Optional),
-    endAt: z.number().min(0).optional().transform(toFixed3Optional),
+    startAt: coerceNonNegativeNumber().transform(toFixed3Optional).optional(),
+    endAt: coerceNonNegativeNumber().transform(toFixed3Optional).optional(),
     metadata: SourceMetadataShape.optional(),
     transcriptFormat: z.string().optional()
+})
+    .refine((data) => {
+    // Only validate if both startAt and endAt are present and not null
+    if (data.startAt !== undefined &&
+        data.startAt !== null &&
+        data.endAt !== undefined &&
+        data.endAt !== null) {
+        return data.startAt <= data.endAt;
+    }
+    // If either is undefined or null, validation passes
+    return true;
+}, {
+    message: 'endAt must be greater than or equal to startAt',
+    path: ['endAt'] // Error targets the endAt field
 });
 /**
  * Timing anchor for components that need synchronization (like subtitles)
@@ -187,32 +268,32 @@ export const TimingAnchorShape = z.object({
     assetId: z.string().optional(),
     layerId: z.string().optional(),
     componentId: z.string().optional(),
-    offset: z.number().default(0)
+    offset: coerceValidNumber().prefault(0)
 });
 /**
  * Layout split effect schema
  */
 export const LayoutSplitEffectShape = EffectBaseShape.extend({
     type: z.literal('layoutSplit'),
-    pieces: z.number().int().positive().optional(),
-    sceneWidth: z.number().positive().optional(),
-    sceneHeight: z.number().positive().optional(),
-    chunks: z.array(z.record(z.any())).optional()
+    pieces: coerceInteger(1).optional(),
+    sceneWidth: coercePositiveNumber().optional(),
+    sceneHeight: coercePositiveNumber().optional(),
+    chunks: z.array(z.record(z.string(), z.any())).optional()
 });
 /**
  * Rotation randomizer effect schema
  */
 export const RotationRandomizerEffectShape = EffectBaseShape.extend({
     type: z.literal('rotationRandomizer'),
-    maxRotation: z.number().default(2),
-    animate: z.boolean().default(true),
-    seed: z.number().int().optional()
+    maxRotation: coerceValidNumber().prefault(2),
+    animate: z.boolean().prefault(true),
+    seed: coerceInteger().optional()
 });
 export const FillBackgroundBlurEffectShape = z.object({
     type: z.literal('fillBackgroundBlur'),
-    enabled: z.boolean().default(true),
+    enabled: z.boolean().prefault(true),
     // Using the hardcoded value from PixiSplitScreenDisplayObjectHook.ts as default
-    blurAmount: z.number().min(0).default(50)
+    blurAmount: coerceNonNegativeNumber().prefault(50)
     // Note: intensity and blendMode might not be applicable here, keeping it simple.
 });
 /**
@@ -244,7 +325,7 @@ export const ComponentEffectShape = z.union([
     TextOutlineEffectShape
 ]);
 const ComponentEffectsShape = z.object({
-    enabled: z.boolean().optional().default(true), // Globally enable/disable all effects?
+    enabled: z.boolean().optional().prefault(true), // Globally enable/disable all effects?
     map: z
         .union([
         z.record(z.string().min(1), // Key: Effect name/ID (e.g., "mainBlur", "rotator")
@@ -260,17 +341,18 @@ const ComponentEffectsShape = z.object({
         // If it's already an object, return as is
         return val;
     })
-        .default({}) // Default to an empty object if no effects
+        .prefault({}) // Default to an empty object if no effects
 });
 const ComponentAnimationsShape = z.object({
-    enabled: z.boolean().optional().default(true), // Globally enable/disable all animations?
-    list: z.array(AnimationShape).default([]),
-    subtitlesSeed: z.number().int().optional()
+    enabled: z.boolean().optional().prefault(true), // Globally enable/disable all animations?
+    list: z.array(AnimationShape).prefault([]),
+    subtitlesSeed: z.int().optional()
 });
 /**
- * Base component schema that all component types will extend
+ * Base component schema without appearance (to reduce type duplication)
+ * Each component type will add its own specialized appearance
  */
-export const ComponentBaseShape = z.object({
+const ComponentBaseWithoutAppearanceShape = z.object({
     id: z.string(),
     name: z.string().optional(),
     type: z.enum([
@@ -285,77 +367,96 @@ export const ComponentBaseShape = z.object({
         'SUBTITLES'
     ]),
     timeline: ComponentTimelineShape,
-    appearance: AppearanceShape,
-    animations: ComponentAnimationsShape.default({}),
-    effects: ComponentEffectsShape.default({}),
-    visible: z.boolean().default(true),
-    order: z.number().default(0),
+    animations: ComponentAnimationsShape.prefault({}),
+    effects: ComponentEffectsShape.prefault({}),
+    visible: z.boolean().prefault(true),
+    order: coerceValidNumber().prefault(0),
     checksum: z.string().optional()
 });
+/**
+ * Base component schema that all component types will extend
+ * @deprecated Use ComponentBaseWithoutAppearanceShape and add appearance per component
+ */
+export const ComponentBaseShape = ComponentBaseWithoutAppearanceShape.extend({
+    appearance: AppearanceShape
+});
 /**
  * Text component schema
  */
-export const TextComponentShape = ComponentBaseShape.extend({
+export const TextComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('TEXT'),
     text: z.string(),
-    isAIEmoji: z.boolean().default(false).optional(),
-    appearance: AppearanceShape.extend({
-        text: TextAppearanceShape,
-        verticalAlign: z.enum(['top', 'center', 'bottom']).optional(),
-        horizontalAlign: z.enum(['left', 'center', 'right']).optional()
-    })
+    isAIEmoji: z.boolean().prefault(false).optional(),
+    appearance: TextFocusedAppearanceShape
 }).strict();
 /**
  * Image component schema
  */
-export const ImageComponentShape = ComponentBaseShape.extend({
+export const ImageComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('IMAGE'),
     source: ComponentSourceShape,
+    appearance: AppearanceShape,
     crop: z
         .object({
-        xPercent: z.number().min(0).max(1).default(0),
-        yPercent: z.number().min(0).max(1).default(0),
-        widthPercent: z.number().min(0).max(1).default(1),
-        heightPercent: z.number().min(0).max(1).default(1)
+        xPercent: coerceNormalizedNumber().prefault(0),
+        yPercent: coerceNormalizedNumber().prefault(0),
+        widthPercent: coerceNormalizedNumber().prefault(1),
+        heightPercent: coerceNormalizedNumber().prefault(1)
     })
         .optional()
 }).strict();
 /**
  * GIF component schema
  */
-export const GifComponentShape = ComponentBaseShape.extend({
+export const GifComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('GIF'),
     source: ComponentSourceShape,
+    appearance: AppearanceShape,
     playback: z
         .object({
-        loop: z.boolean().default(true),
-        speed: z.number().positive().default(1)
+        loop: z.boolean().prefault(true),
+        speed: coercePositiveNumber().prefault(1)
     })
         .optional()
 }).strict();
 /**
  * Video component schema
  */
-export const VideoComponentShape = ComponentBaseShape.extend({
+export const VideoComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('VIDEO'),
     source: ComponentSourceShape,
-    volume: z.number().min(0).max(1).default(1),
-    muted: z.boolean().default(false),
+    appearance: AppearanceShape,
+    volume: coerceNormalizedNumber().prefault(1),
+    muted: z.boolean().prefault(false),
     playback: z
         .object({
-        autoplay: z.boolean().default(true),
-        loop: z.boolean().default(false),
-        playbackRate: z.number().positive().default(1),
-        startAt: z.number().min(0).default(0),
-        endAt: z.number().optional()
+        autoplay: z.boolean().prefault(true),
+        loop: z.boolean().prefault(false),
+        playbackRate: coercePositiveNumber().prefault(1),
+        startAt: coerceNonNegativeNumber().prefault(0),
+        endAt: coerceValidNumber().optional()
+    })
+        .refine((data) => {
+        // Only validate if both startAt and endAt are present and not null
+        if (data.startAt !== undefined &&
+            data.startAt !== null &&
+            data.endAt !== undefined &&
+            data.endAt !== null) {
+            return data.startAt <= data.endAt;
+        }
+        // If either is undefined or null, validation passes
+        return true;
+    }, {
+        error: 'endAt must be greater than or equal to startAt',
+        path: ['endAt']
     })
         .optional(),
     crop: z
         .object({
-        x: z.number().default(0),
-        y: z.number().default(0),
-        width: z.number().min(0).max(1).default(1),
-        height: z.number().min(0).max(1).default(1)
+        x: coerceValidNumber().prefault(0),
+        y: coerceValidNumber().prefault(0),
+        width: coerceNormalizedNumber().prefault(1),
+        height: coerceNormalizedNumber().prefault(1)
     })
         .optional()
 }).strict();
@@ -364,23 +465,25 @@ export const VideoComponentShape = ComponentBaseShape.extend({
  */
 export const LinearProgressConfigShape = z.object({
     type: z.literal('linear'),
-    direction: z.enum(['horizontal', 'vertical']).default('horizontal'),
-    reverse: z.boolean().default(false).optional(),
-    anchor: z.enum(['start', 'center', 'end']).default('start').optional()
+    direction: z.enum(['horizontal', 'vertical']).prefault('horizontal'),
+    reverse: z.boolean().prefault(false).optional(),
+    anchor: z.enum(['start', 'center', 'end']).prefault('start').optional()
 });
 export const PerimeterProgressConfigShape = z.object({
     type: z.literal('perimeter'),
-    startCorner: z.enum(['top-left', 'top-right', 'bottom-right', 'bottom-left']).default('top-left'),
-    clockwise: z.boolean().default(true).optional(),
-    strokeWidth: z.number().positive().default(4).optional()
+    startCorner: z
+        .enum(['top-left', 'top-right', 'bottom-right', 'bottom-left'])
+        .prefault('top-left'),
+    clockwise: z.boolean().prefault(true).optional(),
+    strokeWidth: coercePositiveNumber().prefault(4).optional()
 });
 export const RadialProgressConfigShape = z.object({
     type: z.literal('radial'),
-    startAngle: z.number().default(-90).optional(), // -90 = top (12 o'clock), 0 = right (3 o'clock)
-    clockwise: z.boolean().default(true).optional(),
-    innerRadius: z.number().min(0).max(1).default(0).optional(), // 0 = filled circle, >0 = ring/donut
-    strokeWidth: z.number().positive().optional(), // For ring style
-    capStyle: z.enum(['butt', 'round', 'square']).default('round').optional()
+    startAngle: coerceValidNumber().prefault(-90).optional(), // -90 = top (12 o'clock), 0 = right (3 o'clock)
+    clockwise: z.boolean().prefault(true).optional(),
+    innerRadius: coerceNormalizedNumber().prefault(0).optional(), // 0 = filled circle, >0 = ring/donut
+    strokeWidth: coercePositiveNumber().optional(), // For ring style
+    capStyle: z.enum(['butt', 'round', 'square']).prefault('round').optional()
 });
 export const DoubleProgressConfigShape = z.object({
     type: z.literal('double'),
@@ -388,8 +491,8 @@ export const DoubleProgressConfigShape = z.object({
         .array(z.object({
         direction: z.enum(['horizontal', 'vertical']),
         position: z.enum(['top', 'bottom', 'left', 'right']),
-        reverse: z.boolean().default(false).optional(),
-        offset: z.number().default(0).optional() // Offset from edge in pixels
+        reverse: z.boolean().prefault(false).optional(),
+        offset: coerceValidNumber().prefault(0).optional() // Offset from edge in pixels
     }))
         .min(2)
         .max(4) // At least 2 paths, max 4 for performance
@@ -397,8 +500,8 @@ export const DoubleProgressConfigShape = z.object({
 export const CustomProgressConfigShape = z.object({
     type: z.literal('custom'),
     pathData: z.string(), // SVG path data for custom progress shapes
-    strokeWidth: z.number().positive().default(4).optional(),
-    capStyle: z.enum(['butt', 'round', 'square']).default('round').optional()
+    strokeWidth: coercePositiveNumber().prefault(4).optional(),
+    capStyle: z.enum(['butt', 'round', 'square']).prefault('round').optional()
 });
 /**
  * Union of all progress configuration types
@@ -413,13 +516,13 @@ export const ProgressConfigShape = z.discriminatedUnion('type', [
 /**
  * Shape component schema for basic geometric shapes
  */
-export const ShapeComponentShape = ComponentBaseShape.extend({
+export const ShapeComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('SHAPE'),
     shape: z.union([
         // Progress shape with specialized configuration
         z.object({
             type: z.literal('progress'),
-            progressConfig: ProgressConfigShape.optional().default({
+            progressConfig: ProgressConfigShape.optional().prefault({
                 type: 'linear',
                 direction: 'horizontal',
                 reverse: false,
@@ -435,69 +538,44 @@ export const ShapeComponentShape = ComponentBaseShape.extend({
             cornerRadius: z.number().min(0).optional() // For rectangle
         })
     ]),
-    appearance: AppearanceShape.extend({
-        color: ColorTypeShape.optional() // fill color
-    })
+    appearance: ShapeAppearanceShape
 }).strict();
 /**
  * Audio component schema
  */
-export const AudioComponentShape = ComponentBaseShape.extend({
+export const AudioComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('AUDIO'),
     source: ComponentSourceShape,
-    volume: z.number().min(0).max(1).default(1),
-    muted: z.boolean().default(false)
+    appearance: AppearanceShape,
+    volume: coerceNormalizedNumber().prefault(1),
+    muted: z.boolean().prefault(false)
 }).strict();
 /**
  * Color component schema
  */
-export const ColorComponentShape = ComponentBaseShape.extend({
+export const ColorComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('COLOR'),
-    appearance: AppearanceShape.extend({
-        background: z
-            .string()
-            .refine(isValidColor, { message: 'Invalid color format for ColorComponent background' })
-    })
+    appearance: ColorAppearanceShape
 }).strict();
 /**
  * Gradient component schema
  */
-export const GradientComponentShape = ComponentBaseShape.extend({
+export const GradientComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('GRADIENT'),
-    appearance: AppearanceShape.extend({
-        background: GradientDefinitionShape // Requires a gradient type in background
-    })
+    appearance: GradientAppearanceShape
 }).strict();
 /**
  * Subtitles component schema
  */
-export const AIEmojiShape = z.object({
-    text: z.string(),
-    emoji: z.string(),
-    startAt: z.number(),
-    endAt: z.number(),
-    componentId: z.string().optional()
-});
-export const SubtitleComponentShape = ComponentBaseShape.extend({
+export const SubtitleComponentShape = ComponentBaseWithoutAppearanceShape.extend({
     type: z.literal('SUBTITLES'),
-    source: ComponentSourceShape.extend({
-        url: z.string().url().optional()
+    source: ComponentSourceShape.safeExtend({
+        url: z.url().optional()
         // Subtitles might need specific source fields, e.g., format
     }).optional(),
     timingAnchor: TimingAnchorShape,
     text: z.string().optional(), // Optional: if text is directly embedded
-    appearance: AppearanceShape.extend({
-        text: TextAppearanceShape,
-        verticalAlign: z.enum(['top', 'center', 'bottom']).optional(),
-        horizontalAlign: z.enum(['left', 'center', 'right']).optional(),
-        hasAIEmojis: z.boolean().default(false).optional(),
-        aiEmojisPlacement: z.enum(['top', 'bottom']).default('top').optional(),
-        aiEmojisPlacementOffset: z.number().default(30).optional(),
-        aiEmojis: z.array(AIEmojiShape).optional(),
-        highlighterColor1: ColorTypeShape.optional(),
-        highlighterColor2: ColorTypeShape.optional(),
-        highlighterColor3: ColorTypeShape.optional()
-    })
+    appearance: SubtitleAppearanceShape
 }).strict();
 /**
  * Union of all component types for polymorphic handling