feat: daily timeline advanced UI and calendar integration

src/components/shared/LivePreviewCanvas.tsx

@@ -32,6 +32,8 @@ export interface LivePreviewCanvasProps {
   onSceneChange?: (sceneId: string) => void;
   /** External player ref */
   playerRef?: React.RefObject<BradlyPlayerRef>;
+  /** Optional variation ID to apply */
+  variationId?: string;
   /** Status label (e.g. "Listo" / "Faltan campos") */
   statusLabel?: string;
   /** Whether all required fields are complete */
@@ -69,6 +71,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
   statusLabel,
   isComplete = false,
   videoDurations,
+  variationId,
 }) => {
   const internalRef = useRef<BradlyPlayerRef>(null);
   const playerRef = externalRef || internalRef;
@@ -85,7 +88,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
 
   // Compile template to timeline (reactive to fieldData + mediaFits)
   const compiled = useMemo(() => {
-    const result = compileExpressToTimeline(template, fieldData, designMD, brand, videoDurations);
+    const result = compileExpressToTimeline(template, fieldData, designMD, brand, videoDurations, variationId);
     // Strip transitions and apply mediaFit overrides
     result.elements = result.elements.map(el => {
       const fieldId = el.sourceFieldId;
@@ -100,7 +103,7 @@ export const LivePreviewCanvas: React.FC<LivePreviewCanvasProps> = ({
       };
     });
     return result;
-  }, [template, fieldData, designMD, brand, mediaFits, containBgColors, videoDurations]);
+  }, [template, fieldData, designMD, brand, mediaFits, containBgColors, videoDurations, variationId]);
 
   const playerInputProps = useMemo(() => ({
     designMD,