@lovett/ui 0.0.1

package/src/meta-previews/InstagramFeedPreview.tsx

@@ -0,0 +1,259 @@
+import { memo, useState } from 'react'
+import type { PreviewAdData } from './types'
+import { CreativeMedia } from './CreativeMedia'
+import { ProfileAvatar } from './ProfileAvatar'
+import { withPreviewDefaults } from './defaults'
+
+/**
+ * Instagram Feed — single image (sponsored). GREENFIELD rebuild.
+ *
+ * Not the Creative-Hub export extraction. Faithful to the real IG sponsored-post
+ * chrome but built cleanly: a 320px card with natural full-width flow (no fixed
+ * 300px inner rows, no empty placeholder divs), Meta-exact hex (self-contained —
+ * no design tokens), and a system font stack. Layout, top → bottom:
+ *   header · creative · CTA bar · action row · caption
+ */
+
+interface InstagramFeedPreviewProps {
+  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 = {
+  ink: 'rgb(38, 38, 38)',
+  sub: 'rgb(115, 115, 115)',
+  hair: 'rgb(239, 239, 239)',
+  imageBg: '#FAFAFA',
+}
+
+// The IG story-ring gradient — used as the avatar letter-fallback fill.
+const IG_RING =
+  'linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)'
+
+// Illustrative placeholder engagement — these previews are mockups, not live
+// data (PreviewAdData carries no likes/comments/timestamp). Static on purpose.
+const LIKES = '234'
+const COMMENTS = 12
+const POSTED = '2 hours ago'
+
+export const InstagramFeedPreview = memo(function InstagramFeedPreview({
+  adData: rawAdData,
+  format,
+}: InstagramFeedPreviewProps) {
+  const adData = withPreviewDefaults(rawAdData)
+  const [expanded, setExpanded] = useState(false)
+
+  const imageHeight = format === '4:5' ? 400 : WIDTH // 1:1 → 320, 4:5 → 400
+  const caption = adData.primaryText ?? ''
+  const handle = adData.brandName.trim().toLowerCase().replace(/\s+/g, '')
+  const LIMIT = 100
+  const clipped = caption.length > LIMIT && !expanded
+
+  return (
+    <div style={{ width: WIDTH, background: '#fff', fontFamily: FONT, color: C.ink }}>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 12px' }}>
+        <div style={{ width: 30, height: 30, borderRadius: '50%', overflow: 'hidden', flexShrink: 0 }}>
+          <ProfileAvatar src={adData.profileImage} name={adData.brandName} fontSize={12} background={IG_RING} />
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div
+            style={{
+              fontSize: 13,
+              fontWeight: 600,
+              lineHeight: '16px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {adData.brandName}
+          </div>
+          <div style={{ fontSize: 12, lineHeight: '15px', color: C.sub }}>Sponsored</div>
+        </div>
+        <Dots />
+      </div>
+
+      {/* Creative */}
+      <div style={{ width: WIDTH, height: imageHeight, background: C.imageBg, 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>
+
+      {/* CTA bar — full-width tappable sponsored action */}
+      <button
+        type="button"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          width: '100%',
+          padding: '11px 14px',
+          border: 0,
+          borderBottom: `1px solid ${C.hair}`,
+          background: 'none',
+          cursor: 'pointer',
+          font: 'inherit',
+          textAlign: 'left',
+        }}
+      >
+        <span style={{ fontSize: 14, fontWeight: 600, color: C.ink }}>
+          {adData.callToAction || 'Learn more'}
+        </span>
+        <Chevron />
+      </button>
+
+      {/* Action row */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '9px 12px 5px',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          <Heart />
+          <CommentBubble />
+          <Send />
+        </div>
+        <Bookmark />
+      </div>
+
+      {/* Likes */}
+      <div style={{ padding: '0 12px', fontSize: 13, fontWeight: 600, color: C.ink, lineHeight: '18px' }}>
+        {LIKES} likes
+      </div>
+
+      {/* Caption — bold handle prefix + post text (darker + a touch heavier) */}
+      {caption && (
+        <div style={{ padding: '3px 12px 0', fontSize: 13, lineHeight: '18px', fontWeight: 400, color: 'rgb(20, 20, 20)' }}>
+          <span style={{ fontWeight: 600 }}>{handle}</span>{' '}
+          {clipped ? caption.slice(0, LIMIT).trimEnd() : caption}
+          {clipped && (
+            <button
+              type="button"
+              onClick={() => setExpanded(true)}
+              style={{
+                border: 0,
+                background: 'none',
+                padding: 0,
+                marginLeft: 4,
+                color: C.sub,
+                fontWeight: 400,
+                fontSize: 13,
+                cursor: 'pointer',
+                fontFamily: FONT,
+              }}
+            >
+              more
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Comments */}
+      <div style={{ padding: '5px 12px 0', fontSize: 13, color: C.sub }}>
+        View all {COMMENTS} comments
+      </div>
+
+      {/* Timestamp */}
+      <div style={{ padding: '4px 12px 12px', fontSize: 11, color: C.sub }}>
+        {POSTED}
+      </div>
+    </div>
+  )
+})
+
+/* ------------------------------- icons / bits ------------------------------- */
+
+const stroke = {
+  fill: 'none',
+  stroke: 'rgb(38, 38, 38)',
+  strokeWidth: 1.8,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+}
+
+function Dots() {
+  return (
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="rgb(38,38,38)" style={{ display: 'block', flexShrink: 0 }}>
+      <circle cx="5" cy="12" r="1.4" />
+      <circle cx="12" cy="12" r="1.4" />
+      <circle cx="19" cy="12" r="1.4" />
+    </svg>
+  )
+}
+
+function Chevron() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  )
+}
+
+function Heart() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <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>
+  )
+}
+
+function CommentBubble() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <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>
+  )
+}
+
+function Send() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke} style={{ display: 'block' }}>
+      <line x1="22" y1="2" x2="11" y2="13" />
+      <polygon points="22 2 15 22 11 13 2 9 22 2" />
+    </svg>
+  )
+}
+
+function Bookmark() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" {...stroke} style={{ display: 'block', flexShrink: 0 }}>
+      <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+    </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/MetaFeedCarousel.tsx

@@ -0,0 +1,228 @@
+import { memo, useState } from 'react'
+import type { ReactNode } from 'react'
+import { ProfileAvatar } from './ProfileAvatar'
+import type { CarouselViewProps } from './types'
+import { PREVIEW_DEFAULTS } from './defaults'
+
+/**
+ * Facebook Feed — CAROUSEL (presentational). ADR-119 Decision 1.
+ *
+ * Pure: no carousel controller, no crop system. The card list, active index +
+ * setter, and each card's image (`renderImage(i)` slot) all come from props, so
+ * the same view serves the controller-driven form (CropFrame slot) and static
+ * surfaces (plain <img> slot). Standard FB feed chrome around a peeking card
+ * strip; each card = image slot + footer (headline, description, shared CTA).
+ * Meta-exact hex — `packages/ui` is token-boundary exempt (ADR-119 D5).
+ */
+
+const WIDTH = 320
+const CARD_W = 232
+const GAP = 8
+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',
+  cardBorder: 'rgba(0, 0, 0, 0.1)',
+  headline: 'rgb(28, 32, 40)',
+  ctaBtnBg: 'rgb(228, 230, 235)',
+  ctaBtnInk: 'rgb(8, 8, 9)',
+  divider: 'rgb(219, 221, 224)',
+  action: 'rgb(97, 103, 112)',
+}
+
+export const MetaFeedCarousel = memo(function MetaFeedCarousel({
+  cards,
+  active,
+  onActive,
+  renderImage,
+  brandName,
+  profileImage,
+  primaryText,
+  callToAction,
+}: CarouselViewProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  const brand = brandName || PREVIEW_DEFAULTS.brandName
+  const cta = callToAction || PREVIEW_DEFAULTS.callToAction
+  const maxIndex = Math.max(0, cards.length - 1)
+  const i = Math.min(Math.max(0, active), maxIndex)
+  const translate = -(i * (CARD_W + GAP))
+
+  const text = primaryText || PREVIEW_DEFAULTS.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={profileImage} name={brand} 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' }}>
+            {brand}
+          </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>
+        <MenuDots />
+      </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>
+      )}
+
+      {/* Card strip */}
+      <div style={{ position: 'relative', overflow: 'hidden', padding: '2px 0 10px' }}>
+        <div style={{ display: 'flex', gap: GAP, paddingLeft: 12, transform: `translateX(${translate}px)`, transition: 'transform 280ms cubic-bezier(0.22, 1, 0.36, 1)' }}>
+          {cards.map((card, k) => (
+            <div key={card.key} style={{ width: CARD_W, flexShrink: 0, border: `1px solid ${C.cardBorder}`, borderRadius: 8, overflow: 'hidden', background: '#fff' }}>
+              <div style={{ width: '100%', height: CARD_W, background: C.imageBg, overflow: 'hidden' }}>
+                {renderImage(k)}
+              </div>
+              <div style={{ padding: '10px 12px' }}>
+                <div style={{ fontSize: 13, fontWeight: 700, lineHeight: '17px', color: C.headline, overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
+                  {card.headline || PREVIEW_DEFAULTS.headline}
+                </div>
+                {card.description && (
+                  <div style={{ fontSize: 12, lineHeight: '16px', color: C.sub, marginTop: 2, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {card.description}
+                  </div>
+                )}
+                <div style={{ marginTop: 10, display: 'inline-flex', alignItems: 'center', height: 30, padding: '0 12px', borderRadius: 6, background: C.ctaBtnBg, color: C.ctaBtnInk, fontSize: 13, fontWeight: 600 }}>
+                  {cta}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {i > 0 && <Arrow dir="left" onClick={() => onActive(i - 1)} />}
+        {i < maxIndex && <Arrow dir="right" onClick={() => onActive(i + 1)} />}
+      </div>
+
+      {/* Divider */}
+      <div style={{ height: 1, background: C.divider }} />
+
+      {/* Action bar */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-around', padding: '6px 8px' }}>
+        <FbAction label="Like"><ThumbsUp /></FbAction>
+        <FbAction label="Comment"><Bubble /></FbAction>
+        <FbAction label="Share"><ShareArrow /></FbAction>
+      </div>
+    </div>
+  )
+})
+
+/* ------------------------------- icons / bits ------------------------------- */
+
+const stroke = {
+  fill: 'none',
+  stroke: C.action,
+  strokeWidth: 2,
+  strokeLinecap: 'round' as const,
+  strokeLinejoin: 'round' as const,
+}
+
+function Arrow({ dir, onClick }: { dir: 'left' | 'right'; onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={dir === 'left' ? 'Previous' : 'Next'}
+      style={{
+        position: 'absolute',
+        top: CARD_W / 2 + 2,
+        transform: 'translateY(-50%)',
+        ...(dir === 'left' ? { left: 8 } : { right: 8 }),
+        width: 30,
+        height: 30,
+        borderRadius: '50%',
+        border: 0,
+        background: '#fff',
+        boxShadow: '0 1px 4px rgba(0,0,0,0.28)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        color: 'rgb(8,8,8)',
+      }}
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" style={{ display: 'block' }}>
+        {dir === 'left' ? <polyline points="15 18 9 12 15 6" /> : <polyline points="9 18 15 12 9 6" />}
+      </svg>
+    </button>
+  )
+}
+
+function FbAction({ 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 MenuDots() {
+  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>
+  )
+}