@lovett/ui 0.0.1

package/src/meta-previews/MetaFeedPreview.tsx

@@ -0,0 +1,294 @@
+import { memo, useState } from 'react'
+import type { ReactNode } from 'react'
+import type { PreviewAdData } from './types'
+import { CreativeMedia } from './CreativeMedia'
+import { ProfileAvatar } from './ProfileAvatar'
+import { withPreviewDefaults } from './defaults'
+
+/**
+ * Facebook Feed — single image (sponsored). GREENFIELD rebuild.
+ *
+ * Not the Creative-Hub export extraction. Faithful to the real FB feed ad chrome
+ * but built cleanly: a 320px card with natural full-width flow (no fixed
+ * 300px / containerWidth-24 inner rows, no divider margins), Meta-exact hex
+ * (self-contained — no design tokens), a system font stack. Layout, top → bottom:
+ *   header · primary text · creative · link card · divider · action bar
+ */
+
+interface MetaFeedPreviewProps {
+  adData: PreviewAdData
+  format: '1:1' | '4:5' | '9:16'
+}
+
+const WIDTH = 320
+const FONT =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+
+const C = {
+  name: 'rgb(8, 8, 8)',
+  sub: 'rgb(101, 103, 107)',
+  body: 'rgb(0, 0, 0)',
+  seeMore: '#1877F2',
+  imageBg: '#F0F2F5',
+  imageEdge: 'rgba(0, 0, 0, 0.06)',
+  card: '#F7F8FA',
+  link: 'rgb(101, 103, 107)',
+  headline: 'rgb(28, 32, 40)',
+  desc: 'rgb(101, 103, 107)',
+  ctaBtnBg: 'rgb(228, 230, 235)',
+  ctaBtnInk: 'rgb(8, 8, 9)',
+  divider: 'rgb(219, 221, 224)',
+  action: 'rgb(97, 103, 112)',
+}
+
+export const MetaFeedPreview = memo(function MetaFeedPreview({
+  adData: rawAdData,
+  format,
+}: MetaFeedPreviewProps) {
+  const adData = withPreviewDefaults(rawAdData)
+  const [expanded, setExpanded] = useState(false)
+
+  const imageHeight = format === '4:5' ? 400 : WIDTH // 1:1 → 320, 4:5 → 400
+  const text = adData.primaryText ?? ''
+  const LIMIT = 125
+  const clipped = text.length > LIMIT && !expanded
+
+  return (
+    <div style={{ width: WIDTH, background: '#fff', fontFamily: FONT, color: C.body }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px' }}>
+        <div style={{ width: 40, height: 40, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
+          <ProfileAvatar src={adData.profileImage} name={adData.brandName} fontSize={15} />
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: 14,
+              fontWeight: 600,
+              lineHeight: '18px',
+              color: C.name,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {adData.brandName}
+          </div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 1, color: C.sub }}>
+            <span style={{ fontSize: 12, lineHeight: '15px' }}>Sponsored</span>
+            <span style={{ fontSize: 12 }}>·</span>
+            <Globe />
+          </div>
+        </div>
+        <Dots />
+      </div>
+
+      {/* Primary text */}
+      {text && (
+        <div style={{ padding: '0 12px 10px', fontSize: 14, fontWeight: 400, lineHeight: '19px', color: C.body, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+          {clipped ? text.slice(0, LIMIT).trimEnd() : text}
+          {clipped && (
+            <>
+              {'… '}
+              <button
+                type="button"
+                onClick={() => setExpanded(true)}
+                style={{ border: 0, background: 'none', padding: 0, color: C.seeMore, fontWeight: 600, fontSize: 14, cursor: 'pointer', fontFamily: FONT }}
+              >
+                See more
+              </button>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* Creative */}
+      <div
+        style={{
+          width: WIDTH,
+          height: imageHeight,
+          background: C.imageBg,
+          borderTop: `1px solid ${C.imageEdge}`,
+          borderBottom: `1px solid ${C.imageEdge}`,
+          overflow: 'hidden',
+        }}
+      >
+        {adData.creativeImage ? (
+          <CreativeMedia
+            src={adData.creativeImage}
+            mediaType={adData.creativeMediaType}
+            alt=""
+            style={{ width: WIDTH, height: imageHeight, objectFit: 'cover', display: 'block' }}
+          />
+        ) : (
+          <Placeholder format={format} />
+        )}
+      </div>
+
+      {/* Link card */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 12, background: C.card }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          {adData.displayLink && (
+            <div
+              style={{
+                fontSize: 12,
+                lineHeight: '16px',
+                color: C.link,
+                textTransform: 'uppercase',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {adData.displayLink}
+            </div>
+          )}
+          {adData.headline && (
+            <div
+              style={{
+                fontSize: 15,
+                fontWeight: 700,
+                lineHeight: '19px',
+                color: C.headline,
+                marginTop: 1,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+              }}
+            >
+              {adData.headline}
+            </div>
+          )}
+          {adData.description && (
+            <div
+              style={{
+                fontSize: 13,
+                lineHeight: '17px',
+                color: C.desc,
+                marginTop: 2,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {adData.description}
+            </div>
+          )}
+        </div>
+        <div
+          style={{
+            flexShrink: 0,
+            display: 'inline-flex',
+            alignItems: 'center',
+            height: 36,
+            padding: '0 14px',
+            borderRadius: 6,
+            background: C.ctaBtnBg,
+            fontSize: 14,
+            fontWeight: 600,
+            color: C.ctaBtnInk,
+            whiteSpace: 'nowrap',
+            cursor: 'pointer',
+          }}
+        >
+          {adData.callToAction || 'Learn more'}
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div style={{ height: 1, background: C.divider }} />
+
+      {/* Action bar */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around', padding: '6px 8px' }}>
+        <Action label="Like"><ThumbsUp /></Action>
+        <Action label="Comment"><Bubble /></Action>
+        <Action label="Share"><ShareArrow /></Action>
+      </div>
+    </div>
+  )
+})
+
+/* ------------------------------- icons / bits ------------------------------- */
+
+const stroke = {
+  fill: 'none',
+  stroke: C.action,
+  strokeWidth: 2,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+}
+
+function Action({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', cursor: 'pointer' }}>
+      {children}
+      <span style={{ fontSize: 13, fontWeight: 600, color: C.action }}>{label}</span>
+    </div>
+  )
+}
+
+function Dots() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill={C.sub} style={{ display: 'block', flexShrink: 0 }}>
+      <circle cx="5" cy="12" r="1.6" />
+      <circle cx="12" cy="12" r="1.6" />
+      <circle cx="19" cy="12" r="1.6" />
+    </svg>
+  )
+}
+
+function Globe() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill={C.sub} style={{ display: 'block' }}>
+      <path d="M8 0a8 8 0 1 0 8 8 8 8 0 0 0-8-8zm5.9 7H11a13 13 0 0 0-.9-4.4A6 6 0 0 1 13.9 7zM8 14c-.7 0-1.8-1.8-2-5h4c-.2 3.2-1.3 5-2 5zM6 7c.2-3.2 1.3-5 2-5s1.8 1.8 2 5zm-.1-4.4A13 13 0 0 0 5 7H2.1a6 6 0 0 1 3.8-4.4zM2.1 9H5a13 13 0 0 0 .9 4.4A6 6 0 0 1 2.1 9zm8 4.4a13 13 0 0 0 .9-4.4h2.9a6 6 0 0 1-3.8 4.4z" />
+    </svg>
+  )
+}
+
+function ThumbsUp() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+    </svg>
+  )
+}
+
+function Bubble() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  )
+}
+
+function ShareArrow() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+      <polyline points="16 6 12 2 8 6" />
+      <line x1="12" y1="2" x2="12" y2="15" />
+    </svg>
+  )
+}
+
+function Placeholder({ format }: { format: string }) {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        color: 'rgb(140, 140, 140)',
+      }}
+    >
+      <div style={{ width: 56, height: 56, borderRadius: 10, background: '#E4E6EB' }} />
+      <span style={{ fontSize: 13 }}>Ad creative · {format}</span>
+    </div>
+  )
+}

package/src/meta-previews/MetaInstreamPreview.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { ThumbsUp, MessageCircle, Share2, MoreHorizontal, X } from 'lucide-react';
+import { CreativeMedia } from './CreativeMedia';
+import type { PreviewAdData } from './types';
+
+interface MetaInstreamPreviewProps {
+  adData: PreviewAdData;
+}
+
+export const MetaInstreamPreview: React.FC<MetaInstreamPreviewProps> = ({
+  adData,
+}) => {
+  // Truncate text helper
+  const truncateText = (text: string, limit: number) => {
+    if (!text || text.length <= limit) return text;
+    return text.substring(0, limit);
+  };
+
+  return (
+    <div className="meta-preview w-full h-full">
+      <div
+        className="bg-white rounded-md overflow-hidden w-full h-full flex flex-col"
+        style={{}}
+      >
+        {/* Skeleton Header */}
+        <div className="p-3 flex items-center gap-2.5">
+          <div className="w-10 h-10 rounded-full bg-gray-200 animate-pulse flex-shrink-0" />
+          <div className="flex-1 min-w-0">
+            <div className="h-3 bg-gray-200 rounded w-32 mb-2 animate-pulse" />
+            <div className="h-2 bg-gray-200 rounded w-24 animate-pulse" />
+          </div>
+          <button className="w-8 h-8 flex items-center justify-center text-gray-400">
+            <MoreHorizontal className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Main Video/Image Creative - Square 1:1 */}
+        <div className="relative w-full" style={{ paddingBottom: '100%' }}>
+          {adData.creativeImage ? (
+            <CreativeMedia
+              src={adData.creativeImage}
+              mediaType={adData.creativeMediaType}
+              alt="In-stream ad"
+              className="absolute inset-0 w-full h-full object-cover"
+              autoPlay
+            />
+          ) : (
+            <div className="absolute inset-0 bg-gray-100 flex items-center justify-center">
+              <div className="text-center text-gray-400">
+                <div className="w-16 h-16 bg-gray-200 rounded-lg mx-auto mb-2" />
+                <p className="text-sm">1:1 Video</p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Thumbnail Section */}
+        <div className="p-3 border-t border-gray-200">
+          <div className="flex gap-3">
+            {/* Thumbnail */}
+            <div className="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-gray-100">
+              {adData.creativeImage ? (
+                <CreativeMedia
+                  src={adData.creativeImage}
+                  mediaType={adData.creativeMediaType}
+                  alt="Thumbnail"
+                  className="w-full h-full object-cover"
+                  showPlayOverlay={false}
+                />
+              ) : (
+                <div className="w-full h-full bg-gray-200" />
+              )}
+            </div>
+
+            {/* Ad Content */}
+            <div className="flex-1 min-w-0">
+              {/* Headline */}
+              <h3 className="font-semibold text-sm text-gray-900 mb-1 line-clamp-2">
+                {truncateText(adData.headline, 60)}...
+              </h3>
+
+              {/* Sponsored + Display Link */}
+              <div className="flex items-center gap-1 text-xs text-gray-500 mb-1">
+                <span>Sponsored</span>
+                <span>·</span>
+                <span className="truncate">{adData.displayLink}</span>
+              </div>
+
+              {/* Primary Text - truncated */}
+              <p className="text-xs text-gray-600 line-clamp-2">
+                {truncateText(adData.primaryText, 80)}...
+              </p>
+            </div>
+
+            {/* X and Ellipsis buttons */}
+            <div className="flex flex-col gap-1 flex-shrink-0">
+              <button className="w-6 h-6 flex items-center justify-center text-gray-400 hover:text-gray-600">
+                <X className="w-4 h-4" />
+              </button>
+              <button className="w-6 h-6 flex items-center justify-center text-gray-400 hover:text-gray-600">
+                <MoreHorizontal className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Skeleton engagement section */}
+        <div className="px-3 py-2 border-t border-gray-200">
+          <div className="flex items-center gap-4">
+            <div className="h-2 bg-gray-200 rounded w-16 animate-pulse" />
+            <div className="h-2 bg-gray-200 rounded w-20 animate-pulse" />
+          </div>
+        </div>
+
+        {/* Action Buttons */}
+        <div className="px-3 py-2 border-t border-gray-200">
+          <div className="flex items-center justify-around">
+            <button className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors">
+              <ThumbsUp className="w-5 h-5" />
+              <span className="text-sm font-medium">Like</span>
+            </button>
+            <button className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors">
+              <MessageCircle className="w-5 h-5" />
+              <span className="text-sm font-medium">Comment</span>
+            </button>
+            <button className="flex items-center gap-2 px-4 py-2 text-gray-600 hover:bg-gray-50 rounded-md transition-colors">
+              <Share2 className="w-5 h-5" />
+              <span className="text-sm font-medium">Share</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};