@lovett/ui 0.0.1

package/src/meta-previews/InstagramExplorePreview.tsx

@@ -0,0 +1,340 @@
+import React from 'react';
+import type { PreviewAdData } from './types';
+import { CreativeMedia } from './CreativeMedia';
+import { ProfileAvatar } from './ProfileAvatar';
+
+interface InstagramExplorePreviewProps {
+  adData: PreviewAdData;
+}
+
+export const InstagramExplorePreview: React.FC<InstagramExplorePreviewProps> = ({
+  adData,
+}) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>
+      <div
+        style={{
+          color: 'rgb(28, 30, 33)',
+          fontSize: '12px',
+          lineHeight: '16px',
+          position: 'relative',
+          width: '320px',
+          maxWidth: '100%',
+          backgroundColor: 'rgb(255, 255, 255)',
+        }}
+      >
+          <div style={{ height: '564px', overflow: 'hidden', width: '320px', maxWidth: '100%' }}>
+            <div
+              style={{
+                flexWrap: 'wrap',
+                height: '566px',
+                justifyContent: 'space-between',
+                width: '320px', maxWidth: '100%',
+                display: 'flex',
+              }}
+            >
+              {/* Column 1 - Single tall tile */}
+              <div
+                style={{
+                  backgroundColor: 'rgb(242, 242, 242)',
+                  height: '174px',
+                  marginBottom: '2px',
+                  position: 'relative',
+                  width: '106px',
+                }}
+              />
+
+              {/* Column 2 - Two tiles */}
+              <div style={{ height: '176px', width: '106px' }}>
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '68px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+
+              {/* Column 3 - Two tiles */}
+              <div style={{ height: '176px', width: '106px' }}>
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '68px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+
+              {/* Column 4 - Two tiles (placeholder) */}
+              <div style={{ height: '214px', width: '106px' }}>
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+
+              {/* Column 5 - Two tiles (AD TILE is first) */}
+              <div style={{ height: '214px', width: '106px' }}>
+                {/* AD TILE */}
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                >
+                  {/* Ad Image */}
+                  <div
+                    style={{
+                      height: '106px',
+                      overflow: 'hidden',
+                      position: 'relative',
+                      width: '106px',
+                      display: 'inline-block',
+                    }}
+                  >
+                    {adData.creativeImage ? (
+                      <CreativeMedia
+                        src={adData.creativeImage}
+                        mediaType={adData.creativeMediaType}
+                        alt="Ad creative"
+                        style={{
+                          height: '100%',
+                          objectFit: 'cover',
+                          position: 'absolute',
+                          width: '100%',
+                          zIndex: 0,
+                        }}
+                      />
+                    ) : (
+                      <div
+                        style={{
+                          height: '100%',
+                          width: '100%',
+                          backgroundColor: 'rgb(218, 220, 222)',
+                          display: 'flex',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <span style={{ fontSize: '10px', color: 'rgb(160, 160, 160)' }}>1:1</span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Gradient overlay */}
+                  <div
+                    style={{
+                      backgroundImage: 'linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4))',
+                      bottom: '24px',
+                      height: '84px',
+                      position: 'absolute',
+                      width: '100%',
+                    }}
+                  />
+
+                  {/* Content overlay */}
+                  <div
+                    style={{
+                      flexDirection: 'column',
+                      height: '100%',
+                      position: 'absolute',
+                      width: '100%',
+                      display: 'flex',
+                      top: 0,
+                      left: 0,
+                    }}
+                  >
+                    {/* Sponsored tag - top right */}
+                    <div
+                      style={{
+                        height: '18px',
+                        justifyContent: 'flex-end',
+                        width: '100%',
+                        display: 'flex',
+                      }}
+                    >
+                      <div style={{ height: '18px', width: '72px' }}>
+                        <div style={{ height: '16px', width: '72px' }}>
+                          <div
+                            style={{
+                              color: 'rgb(255, 255, 255)',
+                              fontWeight: 500,
+                              height: '16px',
+                              marginLeft: '2px',
+                              marginRight: '2px',
+                              marginTop: '6px',
+                              paddingLeft: '6px',
+                              paddingRight: '6px',
+                              width: '58px',
+                            }}
+                          >
+                            Sponsored
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Profile image - bottom left */}
+                    <div
+                      style={{
+                        height: '40px',
+                        justifyContent: 'flex-start',
+                        marginTop: 'auto',
+                        width: '40px',
+                        display: 'flex',
+                      }}
+                    >
+                      <div style={{ height: '40px', width: '36px' }}>
+                        <ProfileAvatar
+                          src={adData.profileImage}
+                          name={adData.brandName}
+                          fontSize={11}
+                          background="linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)"
+                          style={{
+                            height: '24px',
+                            width: '24px',
+                            marginLeft: '6px',
+                            marginRight: '6px',
+                            marginTop: '10px',
+                            borderRadius: '24px',
+                          }}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Second tile in this column */}
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+
+              {/* Column 6 - Two tiles */}
+              <div style={{ height: '214px', width: '106px' }}>
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+
+              {/* Column 7 - Single tall tile */}
+              <div
+                style={{
+                  backgroundColor: 'rgb(242, 242, 242)',
+                  height: '174px',
+                  marginBottom: '2px',
+                  position: 'relative',
+                  width: '106px',
+                }}
+              />
+
+              {/* Column 8 - Two tiles */}
+              <div style={{ height: '176px', width: '106px' }}>
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '68px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+
+              {/* Column 9 - Two tiles */}
+              <div style={{ height: '176px', width: '106px' }}>
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '106px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+                <div
+                  style={{
+                    backgroundColor: 'rgb(242, 242, 242)',
+                    height: '68px',
+                    marginBottom: '2px',
+                    position: 'relative',
+                    width: '106px',
+                  }}
+                />
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  );
+};

package/src/meta-previews/InstagramFeedCarousel.tsx

@@ -0,0 +1,245 @@
+import { memo, useState } from 'react'
+import { ProfileAvatar } from './ProfileAvatar'
+import type { CarouselViewProps } from './types'
+import { PREVIEW_DEFAULTS } from './defaults'
+
+/**
+ * Instagram Feed — CAROUSEL (presentational). ADR-119 Decision 1.
+ *
+ * Pure: no carousel controller, no crop system. Cards, active index + setter,
+ * and each slide's image (`renderImage(i)` slot) come from props. IG feed chrome
+ * around a full-width swipeable track: a `1/N` counter, dot indicators centered
+ * in the action row, and shared CTA / caption / engagement below. Square slides
+ * (Meta carousel is 1:1). Meta-exact hex — `packages/ui` is token-boundary
+ * exempt (ADR-119 D5).
+ */
+
+const WIDTH = 320
+const FONT =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+
+const IG_RING =
+  'linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)'
+
+const C = {
+  ink: 'rgb(38, 38, 38)',
+  sub: 'rgb(115, 115, 115)',
+  hair: 'rgb(239, 239, 239)',
+  imageBg: '#FAFAFA',
+  dot: 'rgb(196, 196, 196)',
+  dotActive: '#0095F6',
+}
+
+// Illustrative placeholder engagement — preview chrome, not live data.
+const LIKES = '234'
+const COMMENTS = 12
+const POSTED = '2 hours ago'
+
+export const InstagramFeedCarousel = memo(function InstagramFeedCarousel({
+  cards,
+  active,
+  onActive,
+  renderImage,
+  brandName,
+  profileImage,
+  primaryText,
+  callToAction,
+}: CarouselViewProps) {
+  const [expanded, setExpanded] = useState(false)
+
+  const maxIndex = Math.max(0, cards.length - 1)
+  const i = Math.min(Math.max(0, active), maxIndex)
+  const imageHeight = WIDTH // square slides
+  const translate = -(i * WIDTH)
+
+  const brand = brandName || PREVIEW_DEFAULTS.brandName
+  const handle = brand.trim().toLowerCase().replace(/\s+/g, '')
+  const caption = primaryText || PREVIEW_DEFAULTS.primaryText
+  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={profileImage} name={brand} 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' }}>
+            {brand}
+          </div>
+          <div style={{ fontSize: 12, lineHeight: '15px', color: C.sub }}>Sponsored</div>
+        </div>
+        <MenuDots />
+      </div>
+
+      {/* Image carousel */}
+      <div style={{ position: 'relative', width: WIDTH, height: imageHeight, overflow: 'hidden', background: C.imageBg }}>
+        <div style={{ display: 'flex', height: '100%', transform: `translateX(${translate}px)`, transition: 'transform 300ms cubic-bezier(0.22, 1, 0.36, 1)' }}>
+          {cards.map((card, k) => (
+            <div key={card.key} style={{ width: WIDTH, height: imageHeight, flexShrink: 0, overflow: 'hidden' }}>
+              {renderImage(k)}
+            </div>
+          ))}
+        </div>
+        {/* Counter pill */}
+        <div style={{ position: 'absolute', top: 10, right: 10, padding: '2px 9px', borderRadius: 11, background: 'rgba(0,0,0,0.55)', color: '#fff', fontSize: 12, fontWeight: 600 }}>
+          {i + 1}/{cards.length}
+        </div>
+        {i > 0 && <Arrow dir="left" onClick={() => onActive(i - 1)} top={imageHeight / 2} />}
+        {i < maxIndex && <Arrow dir="right" onClick={() => onActive(i + 1)} top={imageHeight / 2} />}
+      </div>
+
+      {/* CTA bar */}
+      <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 }}>{callToAction || PREVIEW_DEFAULTS.callToAction}</span>
+        <Chevron />
+      </button>
+
+      {/* Action row — heart/comment/share · dots (centered) · bookmark */}
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '9px 12px 5px' }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+          <Heart />
+          <CommentBubble />
+          <Send />
+        </div>
+        <div style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)', display: 'flex', alignItems: 'center', gap: 5 }}>
+          {cards.map((card, k) => (
+            <span key={card.key} style={{ width: 6, height: 6, borderRadius: '50%', background: k === i ? C.dotActive : C.dot }} />
+          ))}
+        </div>
+        <Bookmark />
+      </div>
+
+      {/* Likes */}
+      <div style={{ padding: '0 12px', fontSize: 13, fontWeight: 600, color: C.ink, lineHeight: '18px' }}>{LIKES} likes</div>
+
+      {/* Caption */}
+      {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 Arrow({ dir, onClick, top }: { dir: 'left' | 'right'; onClick: () => void; top: number }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={dir === 'left' ? 'Previous' : 'Next'}
+      style={{
+        position: 'absolute',
+        top,
+        transform: 'translateY(-50%)',
+        ...(dir === 'left' ? { left: 8 } : { right: 8 }),
+        width: 26,
+        height: 26,
+        borderRadius: '50%',
+        border: 0,
+        background: 'rgba(255,255,255,0.9)',
+        boxShadow: '0 1px 3px rgba(0,0,0,0.25)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        color: 'rgb(38,38,38)',
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" 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 MenuDots() {
+  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>
+  )
+}