@lovett/ui 0.0.1

package/src/meta-previews/MetaStoryPreview.tsx

@@ -0,0 +1,1132 @@
+import React from 'react';
+import { ChevronUp, MoreHorizontal, X, Link2 } from 'lucide-react';
+import type { PreviewAdData, PreviewPlatform } from './types';
+import { ProfileAvatar } from './ProfileAvatar';
+import { CreativeMedia } from './CreativeMedia';
+
+interface MetaStoryPreviewProps {
+  platform: PreviewPlatform;
+  adData: PreviewAdData;
+  dominantColor?: string | undefined;
+  accentColor?: string | undefined;
+  isLight?: boolean | undefined;
+}
+
+/**
+ * Shared story header — consistent across FB Stories, IG Stories, Messenger Stories.
+ * Sized 10% smaller than Meta's actual preview for better fit in our grid.
+ */
+interface StoryHeaderProps {
+  platform: PreviewPlatform;
+  profileImage: string;
+  brandName: string;
+  username: string;
+  isLight?: boolean | undefined;
+}
+
+const StoryHeader: React.FC<StoryHeaderProps> = ({ platform, profileImage, brandName, username, isLight = false }) => {
+  const isIG = platform === 'instagram';
+  // Display name: IG uses username, FB/Messenger use full page name
+  const displayName = isIG ? username : brandName;
+  // Sub text: FB = "Ad", Messenger = "Sponsored", IG = none (but aligned to top like others)
+  const subText = platform === 'facebook' ? 'Ad' : platform === 'messenger' ? 'Sponsored' : null;
+  // Icons: FB = ellipsis + X, Messenger = ellipsis only, IG = ellipsis + X
+  const showClose = platform !== 'messenger';
+
+  // All story headers: 25% smaller than Meta's native sizes
+  const profileSize = 30;
+  const nameSize = 10;
+  const subSize = 9;
+  const iconBtnSize = 24;
+  const iconSize = 18;
+
+  // Dynamic contrast: dark text on light gradient backgrounds
+  const textColor = isLight ? 'rgb(28, 30, 33)' : 'rgb(255, 255, 255)';
+  const subTextColor = isLight ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.8)';
+  const iconColor = isLight ? 'rgb(28, 30, 33)' : 'rgb(255, 255, 255)';
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '14px',
+        left: '10px',
+        right: '10px',
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: '6px',
+        zIndex: 20,
+        filter: 'drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4))',
+      }}
+    >
+      {/* Profile Image */}
+      <div
+        style={{
+          width: `${profileSize}px`,
+          height: `${profileSize}px`,
+          borderRadius: '50%',
+          overflow: 'hidden',
+          flexShrink: 0,
+          border: '2px solid rgba(255, 255, 255, 0.2)',
+          marginTop: '1px',
+        }}
+      >
+        <ProfileAvatar
+          src={profileImage}
+          name={brandName}
+          fontSize={9}
+          color={textColor}
+          background="rgb(100, 100, 100)"
+        />
+      </div>
+
+      {/* Name + Sub text — aligned to top */}
+      <div style={{ flex: 1, minWidth: 0, paddingTop: '1px' }}>
+        <p
+          style={{
+            color: textColor,
+            fontSize: `${nameSize}px`,
+            fontWeight: 600,
+            lineHeight: `${Math.round(nameSize * 1.3)}px`,
+            margin: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {displayName}
+        </p>
+        {/* Sub text for FB/Messenger, empty line for IG to keep alignment */}
+        <p
+          style={{
+            color: subTextColor,
+            fontSize: `${subSize}px`,
+            fontWeight: 400,
+            lineHeight: `${Math.round(subSize * 1.3)}px`,
+            margin: 0,
+            visibility: subText ? 'visible' : 'hidden',
+          }}
+        >
+          {subText || '.'}
+        </p>
+      </div>
+
+      {/* Ellipsis */}
+      <button
+        style={{
+          width: `${iconBtnSize}px`,
+          height: `${iconBtnSize}px`,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          color: iconColor,
+          background: 'none',
+          border: 'none',
+          cursor: 'pointer',
+          flexShrink: 0,
+          padding: 0,
+        }}
+      >
+        <MoreHorizontal style={{ width: `${iconSize}px`, height: `${iconSize}px` }} />
+      </button>
+
+      {/* Close X — FB and IG only */}
+      {showClose && (
+        <button
+          style={{
+            width: `${iconBtnSize}px`,
+            height: `${iconBtnSize}px`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: iconColor,
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            flexShrink: 0,
+            padding: 0,
+          }}
+        >
+          <X style={{ width: `${iconSize}px`, height: `${iconSize}px` }} />
+        </button>
+      )}
+    </div>
+  );
+};
+
+/**
+ * Meta Stories Preview (Facebook/Instagram/Messenger)
+ * Exact styling extracted from Facebook Creative Hub
+ * Reference: creative-spec/references/META_DESIGN_TOKENS.md
+ * Sources: facebook-stories-singleimage-1080x1080.html, instagram-mobile-stories-singleimage-1080x1080.html
+ * Facebook Stories Container: 318x566px
+ * Instagram Stories Container: 320x567px (inner: 318x565px)
+ */
+export const MetaStoryPreview: React.FC<MetaStoryPreviewProps> = ({
+  platform,
+  adData,
+  dominantColor = 'rgb(40, 40, 40)',
+}) => {
+  const [progressKey, setProgressKey] = React.useState(0);
+  const [instagramFrame, setInstagramFrame] = React.useState<'default' | 'expanded'>('default');
+  const [isTextExpanded, setIsTextExpanded] = React.useState(false);
+
+  // Facebook Stories exact design tokens - extracted from Creative Hub
+  const fbStory = {
+    // Container — bumped 318 → 320 to match peer previews (Feed, Reel, IG Story)
+    // so the AdPreview canvas no longer renders FB Stories 2px narrower.
+    containerWidth: 320,
+    containerHeight: 569,
+    containerBorder: 'none',
+    fontFamily: 'system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif',
+    baseColor: 'rgb(28, 30, 33)',
+    baseFontSize: 12,
+    baseLineHeight: '16.08px',
+
+    // Background gradient (for 1:1 images centered) — dynamically matched to creative
+    backgroundGradient: `linear-gradient(to top, ${dominantColor}, rgb(255, 255, 255))`,
+
+    // Image
+    imageWidth: 318,
+    imageHeight: 318,
+    imageTop: 71, // Centers 1:1 image in 9:16 frame
+
+    // Bottom gradient overlay
+    bottomGradientTop: 399,
+    bottomGradientWidth: 318,
+    bottomGradientHeight: 167,
+    bottomGradient: 'linear-gradient(rgba(85, 85, 85, 0), rgba(85, 85, 85, 0.5))',
+
+    // Primary text overlay
+    textLeft: 15,
+    textRight: 15,
+    textTop: 419,
+    textWidth: 288,
+    textMaxWidth: 288,
+    textColor: 'rgb(255, 255, 255)',
+    textFont: 'Helvetica, Arial, sans-serif',
+    textSize: 14,
+    textWeight: 600,
+    textLineHeight: '19.6px',
+
+    // Progress bar
+    progressTop: 6,
+    progressLeft: 4,
+    progressRight: 4,
+    progressWidth: 310,
+    progressHeight: 2,
+    progressBg: 'rgba(255, 255, 255, 0.5)',
+    progressFillBg: 'rgb(255, 255, 255)',
+    progressRadius: 1,
+  };
+
+  // Instagram Stories design tokens
+  const igStory = {
+    // Container
+    containerWidth: 320,
+    containerHeight: 567,
+    innerWidth: 318,
+    innerHeight: 565,
+    containerBorder: 'none',
+    fontFamily: 'system-ui, -apple-system, "system-ui", ".SFNSText-Regular", sans-serif',
+    baseColor: 'rgb(28, 30, 33)',
+
+    // Background — dynamic gradient matched to creative
+    backgroundGradient: `linear-gradient(rgb(255, 255, 255), ${dominantColor})`,
+    overlayBg: 'rgba(0, 0, 0, 0.5)',
+
+    // Profile
+    profileSize: 28,
+    profileRadius: 14,
+    profileTop: 16,
+    profileLeft: 10,
+
+    // Username
+    usernameTop: 16,
+    usernameLeft: 46,
+    usernameWidth: 236,
+    usernameSize: 12,
+    usernameWeight: 700,
+    usernameLineHeight: '14px',
+    usernameColor: 'rgb(255, 255, 255)',
+
+    // Sponsored text at bottom
+    sponsoredTop: 535.602,
+    sponsoredPadding: '6px 6px 10px 12px',
+    sponsoredGradient: 'linear-gradient(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.2))',
+    sponsoredSize: 10,
+    sponsoredLineHeight: '13.4px',
+    sponsoredColor: 'rgb(255, 255, 255)',
+
+    // CTA button (sticker style)
+    ctaButtonBg: 'rgb(255, 255, 255)',
+    ctaButtonWidth: 145.648,
+    ctaButtonHeight: 29.6953,
+    ctaButtonRadius: 15,
+    ctaButtonPadding: '6px 12px 5.4px',
+    ctaButtonFont: '"Instagram Sans"',
+    ctaButtonSize: 27,
+    ctaButtonWeight: 400,
+    ctaButtonLineHeight: '29.7px',
+    ctaButtonColor: 'rgb(0, 0, 0)',
+    ctaIconColor: 'rgb(0, 149, 246)',
+
+    // Progress bar
+    progressTop: 6,
+    progressLeft: 4,
+    progressWidth: 310,
+    progressHeight: 2,
+    progressBg: 'rgba(255, 255, 255, 0.5)',
+    progressFillBg: 'rgb(255, 255, 255)',
+    progressRadius: 1,
+
+    // Caption text
+    captionFont: 'Tahoma, Helvetica, Arial, sans-serif',
+    captionSize: 13,
+    captionWeight: 700,
+    captionLineHeight: '18.2px',
+    captionColor: 'rgb(0, 0, 0)',
+    captionRadius: 4,
+    captionPadding: '2px 8px 5px',
+    captionWidth: 245.68,
+    captionTop: 10,
+    captionLeft: 26,
+
+    // Expanded view center info
+    centerTitleSize: 20,
+    centerTitleWeight: 700,
+    centerTitleLineHeight: '26.8px',
+    centerTitleColor: 'rgb(255, 255, 255)',
+    centerLinkSize: 12,
+    centerLinkWeight: 500,
+    centerLinkLineHeight: '16.08px',
+    centerLinkColor: 'rgb(255, 255, 255)',
+  };
+
+  const username = platform === 'instagram'
+    ? adData.brandName.toLowerCase().replace(/[^a-z0-9]/g, '')
+    : adData.brandName;
+
+  // Truncate text to 65 characters for Instagram Stories
+  const truncateInstagramText = (text: string, limit: number = 65) => {
+    if (!text || text.length <= limit) return text;
+    return text.substring(0, limit);
+  };
+
+  // Progress bar animation for Messenger and Facebook Stories
+  React.useEffect(() => {
+    if (platform === 'instagram') return;
+
+    const interval = setInterval(() => {
+      setProgressKey((prev) => prev + 1);
+    }, 7000); // Reset every 7 seconds
+
+    return () => clearInterval(interval);
+  }, [platform]);
+
+  // Instagram Stories animation cycle
+  React.useEffect(() => {
+    if (platform !== 'instagram') return;
+
+    const cycle = () => {
+      // Default view (0-5s)
+      setInstagramFrame('default');
+      setProgressKey((prev) => prev + 1);
+
+      setTimeout(() => {
+        // Expanded view (5-12s)
+        setInstagramFrame('expanded');
+      }, 5000);
+    };
+
+    // Start cycle immediately
+    cycle();
+
+    // Repeat every 12 seconds
+    const interval = setInterval(cycle, 12000);
+
+    return () => clearInterval(interval);
+  }, [platform]);
+
+  // Messenger Stories Layout
+  if (platform === 'messenger') {
+    return (
+      <div
+        className="meta-preview"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          fontFamily: fbStory.fontFamily,
+          fontSize: `${fbStory.baseFontSize}px`,
+          color: fbStory.baseColor,
+          lineHeight: fbStory.baseLineHeight,
+        }}
+      >
+        <div
+          style={{
+            position: 'relative',
+            width: `${fbStory.containerWidth}px`, maxWidth: '100%',
+            height: `${fbStory.containerHeight}px`,
+            backgroundColor: 'rgb(0, 0, 0)',
+            border: fbStory.containerBorder,
+            overflow: 'hidden',
+          }}
+        >
+          {/* Top scrim for progress bar / header visibility */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: '70px',
+              background: 'linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%)',
+              zIndex: 15,
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* Progress Bar */}
+          <div
+            style={{
+              position: 'absolute',
+              top: `${fbStory.progressTop}px`,
+              left: `${fbStory.progressLeft}px`,
+              right: `${fbStory.progressRight}px`,
+              width: `${fbStory.progressWidth}px`,
+              height: `${fbStory.progressHeight}px`,
+              backgroundColor: fbStory.progressBg,
+              borderRadius: `${fbStory.progressRadius}px`,
+              zIndex: 25,
+            }}
+          >
+            <div
+              key={progressKey}
+              style={{
+                height: `${fbStory.progressHeight}px`,
+                backgroundColor: fbStory.progressFillBg,
+                borderRadius: `${fbStory.progressRadius}px`,
+                animation: 'progressBar 7s linear forwards',
+              }}
+            />
+          </div>
+
+          <style>{`
+            @keyframes progressBar {
+              from { width: 0%; }
+              to { width: 100%; }
+            }
+          `}</style>
+
+          {/* Story Content */}
+          {adData.creativeImage && (
+            <CreativeMedia
+              src={adData.creativeImage}
+              mediaType={adData.creativeMediaType}
+              alt="Story ad"
+              autoPlay
+              showPlayOverlay={false}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: `${fbStory.containerWidth}px`, maxWidth: '100%',
+                height: `${fbStory.containerHeight}px`,
+                objectFit: 'contain',
+                backgroundColor: 'rgb(0, 0, 0)',
+              }}
+            />
+          )}
+
+          {/* Header — shared component */}
+          <StoryHeader platform="messenger" profileImage={adData.profileImage} brandName={adData.brandName} username={username} isLight={false} />
+
+          {/* Bottom CTA */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '20px',
+              left: '16px',
+              right: '16px',
+              zIndex: 10,
+            }}
+          >
+            {/* Up Arrow */}
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '12px' }}>
+              <ChevronUp style={{ width: '24px', height: '24px', color: 'rgb(255, 255, 255)' }} strokeWidth={3} />
+            </div>
+
+            {/* CTA Button - Pill shape, centered */}
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <a
+                href={adData.websiteUrl || '#'}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: 'inline-block',
+                  padding: '8px 24px',
+                  backgroundColor: 'rgb(255, 255, 255)',
+                  color: 'rgb(0, 0, 0)',
+                  borderRadius: '50px',
+                  fontWeight: 600,
+                  fontSize: '14px',
+                  textDecoration: 'none',
+                }}
+              >
+                {adData.callToAction}
+              </a>
+            </div>
+          </div>
+
+          {/* Placeholder if no image */}
+          {!adData.creativeImage && (
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <div style={{ textAlign: 'center', color: 'rgba(255, 255, 255, 0.6)' }}>
+                <div
+                  style={{
+                    width: '96px',
+                    height: '96px',
+                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                    borderRadius: '8px',
+                    margin: '0 auto 8px',
+                  }}
+                />
+                <p style={{ fontSize: '14px', margin: 0 }}>Messenger Story</p>
+                <p style={{ fontSize: '12px', margin: '4px 0 0' }}>9:16 Format</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Facebook Stories Layout
+  if (platform === 'facebook') {
+    return (
+      <div
+        className="meta-preview"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          height: '100%',
+          fontFamily: fbStory.fontFamily,
+          fontSize: `${fbStory.baseFontSize}px`,
+          color: fbStory.baseColor,
+          lineHeight: fbStory.baseLineHeight,
+        }}
+      >
+        <div
+          style={{
+            position: 'relative',
+            width: `${fbStory.containerWidth}px`, maxWidth: '100%',
+            height: `${fbStory.containerHeight}px`,
+            backgroundImage: fbStory.backgroundGradient,
+            border: fbStory.containerBorder,
+            overflow: 'hidden',
+          }}
+        >
+          {/* Top dark scrim — ensures progress bar and header are visible on light backgrounds */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: '70px',
+              background: 'linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%)',
+              zIndex: 15,
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* Progress Bar */}
+          <div
+            style={{
+              position: 'absolute',
+              top: `${fbStory.progressTop}px`,
+              left: `${fbStory.progressLeft}px`,
+              right: `${fbStory.progressRight}px`,
+              width: `${fbStory.progressWidth}px`,
+              height: `${fbStory.progressHeight}px`,
+              backgroundColor: fbStory.progressBg,
+              borderRadius: `${fbStory.progressRadius}px`,
+              zIndex: 25,
+            }}
+          >
+            <div
+              key={progressKey}
+              style={{
+                height: `${fbStory.progressHeight}px`,
+                backgroundColor: fbStory.progressFillBg,
+                borderRadius: `${fbStory.progressRadius}px`,
+                animation: 'progressBar 7s linear forwards',
+              }}
+            />
+          </div>
+
+          <style>{`
+            @keyframes progressBar {
+              from { width: 0%; }
+              to { width: 100%; }
+            }
+          `}</style>
+
+          {/* Header — shared component */}
+          <StoryHeader platform="facebook" profileImage={adData.profileImage} brandName={adData.brandName} username={username} isLight={false} />
+
+          {/* Bottom gradient overlay */}
+          <div
+            style={{
+              position: 'absolute',
+              top: `${fbStory.bottomGradientTop}px`,
+              width: `${fbStory.bottomGradientWidth}px`,
+              height: `${fbStory.bottomGradientHeight}px`,
+              backgroundImage: fbStory.bottomGradient,
+              zIndex: 5,
+            }}
+          />
+
+          {/* Story Image - centered for 1:1 */}
+          {adData.creativeImage && (
+            <CreativeMedia
+              src={adData.creativeImage}
+              mediaType={adData.creativeMediaType}
+              alt="Story ad"
+              autoPlay
+              showPlayOverlay={false}
+              style={{
+                position: 'relative',
+                top: `${fbStory.imageTop}px`,
+                width: `${fbStory.imageWidth}px`,
+                height: `${fbStory.imageHeight}px`,
+                objectFit: 'cover',
+                display: 'block',
+              }}
+            />
+          )}
+
+          {/* Primary Text Overlay */}
+          <div
+            style={{
+              position: 'absolute',
+              top: `${fbStory.textTop}px`,
+              left: `${fbStory.textLeft}px`,
+              right: `${fbStory.textRight}px`,
+              width: `${fbStory.textWidth}px`,
+              maxWidth: `${fbStory.textMaxWidth}px`,
+              color: fbStory.textColor,
+              fontFamily: fbStory.textFont,
+              fontSize: `${fbStory.textSize}px`,
+              fontWeight: fbStory.textWeight,
+              lineHeight: fbStory.textLineHeight,
+              textAlign: 'left',
+              zIndex: 10,
+            }}
+          >
+            {adData.primaryText && (
+              <span style={{ marginLeft: '11px' }}>
+                {adData.primaryText.length > 100
+                  ? adData.primaryText.substring(0, 100) + '...'
+                  : adData.primaryText}
+              </span>
+            )}
+          </div>
+
+          {/* Bottom CTA Area */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: '20px',
+              left: '16px',
+              right: '16px',
+              zIndex: 10,
+            }}
+          >
+            {/* Up Arrow */}
+            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: '12px' }}>
+              <ChevronUp style={{ width: '24px', height: '24px', color: 'rgb(255, 255, 255)' }} strokeWidth={3} />
+            </div>
+
+            {/* CTA Button - Rounded corners, centered */}
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <a
+                href={adData.websiteUrl || '#'}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  padding: '10px 20px',
+                  backgroundColor: 'rgb(255, 255, 255)',
+                  color: 'rgb(56, 88, 152)',
+                  borderRadius: '8px',
+                  fontWeight: 600,
+                  fontSize: '14px',
+                  textDecoration: 'none',
+                }}
+              >
+                <Link2 style={{ width: '20px', height: '20px' }} />
+                <span>{adData.callToAction}</span>
+              </a>
+            </div>
+          </div>
+
+          {/* Placeholder if no image */}
+          {!adData.creativeImage && (
+            <div
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <div style={{ textAlign: 'center', color: 'rgba(255, 255, 255, 0.6)' }}>
+                <div
+                  style={{
+                    width: '96px',
+                    height: '96px',
+                    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                    borderRadius: '8px',
+                    margin: '0 auto 8px',
+                  }}
+                />
+                <p style={{ fontSize: '14px', margin: 0 }}>Facebook Story</p>
+                <p style={{ fontSize: '12px', margin: '4px 0 0' }}>9:16 Format</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Instagram Stories Layout
+  return (
+    <div
+      className="meta-preview"
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '100%',
+        height: '100%',
+        fontFamily: igStory.fontFamily,
+        fontSize: '12px',
+        color: igStory.baseColor,
+      }}
+    >
+      <div
+        style={{
+          position: 'relative',
+          width: `${igStory.containerWidth}px`, maxWidth: '100%',
+          height: `${igStory.containerHeight}px`,
+          padding: '1px',
+        }}
+      >
+        <div
+          id="instagram_story_preview_frame"
+          style={{
+            position: 'relative',
+            width: `${igStory.innerWidth}px`, maxWidth: '100%',
+            height: `${igStory.innerHeight}px`,
+            backgroundImage: igStory.backgroundGradient,
+            border: igStory.containerBorder,
+            overflow: 'hidden',
+          }}
+        >
+          {/* Top scrim for progress bar / header visibility + bottom scrim for text */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: '70px',
+              background: 'linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 100%)',
+              zIndex: 15,
+              pointerEvents: 'none',
+            }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '120px',
+              background: 'linear-gradient(to top, rgba(0,0,0,0.25) 0%, transparent 100%)',
+              zIndex: 1,
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* Progress Bar - exact Instagram positioning */}
+          <div
+            style={{
+              position: 'absolute',
+              top: `${igStory.progressTop}px`,
+              left: `${igStory.progressLeft}px`,
+              width: `${igStory.progressWidth}px`,
+              height: `${igStory.progressHeight}px`,
+              backgroundColor: igStory.progressBg,
+              borderRadius: `${igStory.progressRadius}px`,
+              zIndex: 20,
+            }}
+          >
+            <div
+              key={progressKey}
+              style={{
+                height: `${igStory.progressHeight}px`,
+                backgroundColor: igStory.progressFillBg,
+                borderRadius: `${igStory.progressRadius}px`,
+                animation: 'progressBar 12s linear forwards',
+              }}
+            />
+          </div>
+
+          <style>{`
+            @keyframes progressBar {
+              from { width: 0%; }
+              to { width: 100%; }
+            }
+            @keyframes fadeUp {
+              from {
+                opacity: 0;
+                transform: translateY(20px);
+              }
+              to {
+                opacity: 1;
+                transform: translateY(0);
+              }
+            }
+            @keyframes fadeIn {
+              from { opacity: 0; }
+              to { opacity: 1; }
+            }
+          `}</style>
+
+          {/* Header — shared component */}
+          {/* Header always white — top scrim ensures visibility */}
+          <StoryHeader platform="instagram" profileImage={adData.profileImage} brandName={adData.brandName} username={username} isLight={false} />
+
+          {/* Story Image - centered at top: 50px margin */}
+          <div
+            style={{
+              position: 'relative',
+              width: `${igStory.innerWidth}px`, maxWidth: '100%',
+              marginTop: '50px',
+              zIndex: 5,
+            }}
+          >
+            {adData.creativeImage ? (
+              <CreativeMedia
+                src={adData.creativeImage}
+                mediaType={adData.creativeMediaType}
+                alt="Story ad"
+                autoPlay
+                showPlayOverlay={false}
+                style={{
+                  position: 'relative',
+                  width: `${igStory.innerWidth}px`, maxWidth: '100%',
+                  height: `${igStory.innerWidth}px`,
+                  objectFit: 'cover',
+                  display: 'block',
+                }}
+              />
+            ) : (
+              <div
+                style={{
+                  width: `${igStory.innerWidth}px`, maxWidth: '100%',
+                  height: `${igStory.innerWidth}px`,
+                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <div style={{ textAlign: 'center', color: 'rgba(255, 255, 255, 0.6)' }}>
+                  <div
+                    style={{
+                      width: '96px',
+                      height: '96px',
+                      backgroundColor: 'rgba(255, 255, 255, 0.2)',
+                      borderRadius: '8px',
+                      margin: '0 auto 8px',
+                    }}
+                  />
+                  <p style={{ fontSize: '14px', margin: 0 }}>Instagram Story</p>
+                  <p style={{ fontSize: '12px', margin: '4px 0 0' }}>9:16 Format</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Caption/Primary Text Area */}
+          {adData.primaryText && (
+            <div
+              style={{
+                position: 'absolute',
+                top: '400px',
+                left: `${igStory.captionLeft}px`,
+                width: `${igStory.captionWidth}px`,
+                padding: igStory.captionPadding,
+                fontFamily: igStory.captionFont,
+                fontSize: `${igStory.captionSize}px`,
+                fontWeight: igStory.captionWeight,
+                lineHeight: igStory.captionLineHeight,
+                color: igStory.captionColor,
+                borderRadius: `${igStory.captionRadius}px`,
+                zIndex: 10,
+              }}
+            >
+              {isTextExpanded ? (
+                adData.primaryText
+              ) : (
+                <>
+                  {truncateInstagramText(adData.primaryText, 50)}
+                  {adData.primaryText.length > 50 && (
+                    <button
+                      onClick={() => setIsTextExpanded(true)}
+                      style={{
+                        display: 'inline-block',
+                        background: 'none',
+                        border: 'none',
+                        color: igStory.captionColor,
+                        fontFamily: igStory.captionFont,
+                        fontSize: `${igStory.captionSize}px`,
+                        fontWeight: 700,
+                        cursor: 'pointer',
+                        opacity: 0.8,
+                      }}
+                    >
+                      more
+                    </button>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          {/* CTA Button Sticker - visible in default view */}
+          {instagramFrame === 'default' && (
+            <div
+              style={{
+                position: 'absolute',
+                bottom: '68px',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                zIndex: 10,
+              }}
+            >
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: igStory.ctaButtonPadding,
+                  backgroundColor: igStory.ctaButtonBg,
+                  borderRadius: `${igStory.ctaButtonRadius}px`,
+                  color: igStory.ctaButtonColor,
+                  fontFamily: igStory.ctaButtonFont,
+                  fontSize: '14px',
+                  fontWeight: igStory.ctaButtonWeight,
+                  textAlign: 'center',
+                }}
+              >
+                <div style={{ marginRight: '6px', color: igStory.ctaIconColor }}>
+                  <Link2 style={{ width: '16px', height: '16px' }} />
+                </div>
+                {adData.callToAction}
+              </div>
+            </div>
+          )}
+
+          {/* End scene — dark overlay with centered profile, name, URL, CTA */}
+          {instagramFrame === 'expanded' && (
+            <>
+              {/* Dark overlay that fades in */}
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  backgroundColor: 'rgba(0, 0, 0, 0.55)',
+                  zIndex: 30,
+                  animation: 'fadeIn 1.5s ease-out forwards',
+                  pointerEvents: 'none',
+                }}
+              />
+
+              {/* Centered content */}
+              <div
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  right: 0,
+                  bottom: '66px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  zIndex: 35,
+                  animation: 'fadeUp 0.8s ease-out 0.3s both',
+                }}
+              >
+                {/* Profile image */}
+                <div
+                  style={{
+                    width: '64px',
+                    height: '64px',
+                    borderRadius: '50%',
+                    overflow: 'hidden',
+                    marginBottom: '12px',
+                    border: '2px solid rgba(255, 255, 255, 0.3)',
+                  }}
+                >
+                  {adData.profileImage ? (
+                    <img
+                      src={adData.profileImage}
+                      alt={adData.brandName}
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                      onError={(e) => { e.currentTarget.style.display = 'none'; }}
+                    />
+                  ) : (
+                    <div
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        backgroundColor: 'rgb(80, 80, 80)',
+                        color: 'white',
+                        fontSize: '24px',
+                        fontWeight: 600,
+                      }}
+                    >
+                      {adData.brandName.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+                </div>
+
+                {/* Page name */}
+                <div
+                  style={{
+                    fontSize: '15px',
+                    fontWeight: 600,
+                    color: 'rgb(255, 255, 255)',
+                    textAlign: 'center',
+                    marginBottom: '2px',
+                  }}
+                >
+                  {adData.brandName}
+                </div>
+
+                {/* Display URL */}
+                <div
+                  style={{
+                    fontSize: '12px',
+                    fontWeight: 400,
+                    color: 'rgba(255, 255, 255, 0.7)',
+                    textAlign: 'center',
+                    marginBottom: '16px',
+                  }}
+                >
+                  {adData.displayLink}
+                </div>
+
+                {/* CTA Button */}
+                <div
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '8px 20px',
+                    backgroundColor: 'rgb(255, 255, 255)',
+                    borderRadius: '20px',
+                    color: 'rgb(0, 0, 0)',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    gap: '6px',
+                  }}
+                >
+                  <Link2 style={{ width: '14px', height: '14px' }} />
+                  {adData.callToAction}
+                </div>
+              </div>
+            </>
+          )}
+
+          {/* Bottom bar — Ad label + action icons (2026 IG Stories update) */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '48px',
+              minHeight: '48px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              paddingLeft: '16px',
+              paddingRight: '16px',
+              backgroundColor: 'rgb(0, 0, 0)',
+              zIndex: 25,
+            }}
+          >
+            <span
+              style={{
+                color: 'rgb(255, 255, 255)',
+                fontSize: '12px',
+                lineHeight: '18px',
+              }}
+            >
+              Ad
+            </span>
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+              }}
+            >
+              {/* Heart */}
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+              </svg>
+              {/* Comment */}
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+              </svg>
+              {/* Send / Share */}
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <line x1="22" y1="2" x2="11" y2="13" />
+                <polygon points="22 2 15 22 11 13 2 9 22 2" />
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+MetaStoryPreview.displayName = 'MetaStoryPreview';