@postrun/react 2.6.0 → 2.8.0

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, memo, useMemo, useState, useEffect, useRef, useLayoutEffect, Fragment as Fragment$1, useCallback, createElement, useContext, useId } from 'react';
+import { createContext, memo, useMemo, useState, useEffect, Fragment as Fragment$1, useCallback, useRef, useLayoutEffect, createElement, useContext, useId } from 'react';
 import { useInfiniteQuery, useQuery, useMutation, QueryClient } from '@tanstack/react-query';
 import { xPollDurationLabel, linkedinPollDurationLabel, createPostrunClient, profilesList, profilesGet, profilesCreate, profilesUpdate, profilesDelete, connectionsConnect, connectionsListByProfile, connectionsGet, connectionsListAccounts, connectionsSelect, connectionsDelete, mediaGet, mediaList, mediaUpdate, mediaDelete, postsList, postsGet, postsCreate, buildCreatePost, isPostPlatform, failedVariants, isPublished, postsValidate, postsUpdate, postsDelete, tiktokCreatorInfo, audiencePrivacyOptions, audienceUnselected, tiktokPrivacyLabel, parsePrivacyLevel, TIKTOK_AUDIENCE_REQUIRED_HINT, captionMaxFor, commercialLabelNotice, commercialDisclosureIncomplete, setCommercialDisclosure, setBrandKind, TIKTOK_DISCLOSURE_REQUIRED_HINT, TIKTOK_BRANDED_CONTENT_POLICY_URL, TIKTOK_MUSIC_CONFIRMATION_URL, interactionRows, interactionValueKey, toggleInteraction, tiktokOptionsReady, TIKTOK_PROCESSING_NOTICE, brandedContentDeclared, mediaCreate, PostrunError } from '@postrun/js';
 export { TIKTOK_CAPTION_MAX, captionMaxFor } from '@postrun/js';
@@ -10,10 +10,11 @@ import pRetry, { AbortError } from 'p-retry';
 import axios, { isAxiosError } from 'axios';
 import { enrichTweet, TweetContainer, TweetHeader, TweetInReplyTo, TweetBody, TweetMedia, QuotedTweet } from 'react-tweet';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { FiMessageCircle, FiRepeat, FiHeart, FiBarChart2, FiShare, FiGlobe, FiUsers, FiThumbsUp, FiMessageSquare, FiSend, FiFileText } from 'react-icons/fi';
+import { FiMessageCircle, FiRepeat, FiHeart, FiBarChart2, FiShare, FiGlobe, FiUsers, FiThumbsUp, FiMessageSquare, FiSend, FiBookmark, FiMoreHorizontal, FiFileText } from 'react-icons/fi';
 import twitterText from 'twitter-text';
 import { LuBadgeCheck } from 'react-icons/lu';
 import useEmblaCarousel from 'embla-carousel-react';
+import { MdVerified, MdMusicNote } from 'react-icons/md';
 import { IoMusicalNotes } from 'react-icons/io5';
 
 // src/context.tsx
@@ -973,6 +974,42 @@ function useTikTokCreatorInfo(connectionId) {
     queryClient
   );
 }
+
+// src/preview/from-upload.ts
+function previewKind(item) {
+  const detected = item.media?.kind;
+  if (detected) {
+    return detected === "document" ? null : detected;
+  }
+  const mime = item.file.type;
+  if (mime === "image/gif") {
+    return "gif";
+  }
+  if (mime.startsWith("video/")) {
+    return "video";
+  }
+  if (mime.startsWith("image/")) {
+    return "image";
+  }
+  return null;
+}
+function toPreviewMedia(items) {
+  return items.flatMap((item) => {
+    const kind = previewKind(item);
+    if (!kind) {
+      return [];
+    }
+    return [
+      {
+        kind,
+        file: item.file,
+        width: item.media?.source?.width ?? void 0,
+        height: item.media?.source?.height ?? void 0,
+        alt: item.media?.alt_text ?? void 0
+      }
+    ];
+  });
+}
 function fileKey(file) {
   return file ? `${file.name}:${file.size}:${file.lastModified}` : "";
 }
@@ -1308,6 +1345,8 @@ function XPostPreviewImpl({
   );
 }
 var XPostPreview = memo(XPostPreviewImpl);
+
+// src/preview/linkedin/theme.ts
 var LI_VAR = {
   bg: "--pr-li-bg",
   text: "--pr-li-text",
@@ -1315,53 +1354,20 @@ var LI_VAR = {
   border: "--pr-li-border",
   accent: "--pr-li-accent"
 };
-var LIGHT = {
-  bg: "#ffffff",
-  text: "rgba(0,0,0,0.9)",
-  muted: "rgba(0,0,0,0.6)",
-  border: "rgba(0,0,0,0.08)",
-  accent: "rgb(10,102,194)"
-};
-var DARK = {
-  bg: "#1b1f23",
-  text: "rgba(255,255,255,0.9)",
-  muted: "rgba(255,255,255,0.6)",
-  border: "rgba(255,255,255,0.15)",
-  accent: "rgb(112,181,249)"
-};
 function varRef(name) {
   return `var(${name})`;
 }
-function paletteVars(dark) {
-  const p = dark ? DARK : LIGHT;
+function paletteVars() {
   return {
-    "--pr-li-bg": p.bg,
-    "--pr-li-text": p.text,
-    "--pr-li-muted": p.muted,
-    "--pr-li-border": p.border,
-    "--pr-li-accent": p.accent
+    [LI_VAR.bg]: "light-dark(#ffffff, #1b1f23)",
+    [LI_VAR.text]: "light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9))",
+    [LI_VAR.muted]: "light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6))",
+    [LI_VAR.border]: "light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.15))",
+    [LI_VAR.accent]: "light-dark(rgb(10,102,194), rgb(112,181,249))"
   };
 }
-function usePrefersDark() {
-  const [dark, setDark] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    setDark(mq.matches);
-    const onChange = (event) => setDark(event.matches);
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, []);
-  return dark;
-}
-function useIsDark(theme) {
-  const prefersDark = usePrefersDark();
-  if (theme === "auto") {
-    return prefersDark;
-  }
-  return theme === "dark";
+function colorSchemeFor(theme) {
+  return theme === "auto" ? "light dark" : theme;
 }
 function domainOf(source) {
   try {
@@ -1828,7 +1834,6 @@ function LinkedInPostPreviewImpl({
   className,
   style
 }) {
-  const dark = useIsDark(theme);
   const resolvedMedia = useResolvedMedia(
     media,
     variant.media,
@@ -1840,8 +1845,9 @@ function LinkedInPostPreviewImpl({
     accent: varRef(LI_VAR.accent),
     muted: varRef(LI_VAR.muted)
   };
-  const cardStyle4 = {
-    ...paletteVars(dark),
+  const cardStyle5 = {
+    ...paletteVars(),
+    colorScheme: colorSchemeFor(theme),
     background: varRef(LI_VAR.bg),
     color: varRef(LI_VAR.text),
     border: `1px solid ${varRef(LI_VAR.border)}`,
@@ -1851,7 +1857,7 @@ function LinkedInPostPreviewImpl({
     fontFamily: FONT_STACK,
     ...style
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle4, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsx(
       PostBody,
@@ -1882,10 +1888,58 @@ function renderContent(variant, media) {
 }
 var INSET = { padding: "12px 16px 0" };
 var LinkedInPostPreview = memo(LinkedInPostPreviewImpl);
-var LINK_COLOR = "#8ab4ff";
-var TOKEN = /([#@][\p{L}\p{N}_.]+)/gu;
-var IS_TOKEN = /^[#@][\p{L}\p{N}_.]+$/u;
-function Caption({ body }) {
+
+// src/preview/instagram/theme.ts
+var IG_VAR = {
+  bg: "--pr-ig-bg",
+  text: "--pr-ig-text",
+  muted: "--pr-ig-muted",
+  border: "--pr-ig-border",
+  accent: "--pr-ig-accent"
+};
+function varRef2(name) {
+  return `var(${name})`;
+}
+function paletteVars2() {
+  return {
+    [IG_VAR.bg]: "light-dark(#ffffff, #000000)",
+    [IG_VAR.text]: "light-dark(#000000, #f5f5f5)",
+    [IG_VAR.muted]: "light-dark(#737373, #a8a8a8)",
+    [IG_VAR.border]: "light-dark(#dbdbdb, #262626)",
+    [IG_VAR.accent]: "light-dark(#00376b, #e0f1ff)"
+  };
+}
+function colorSchemeFor2(theme) {
+  return theme === "auto" ? "light dark" : theme;
+}
+function Actions() {
+  return /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: leftStyle, children: [
+      /* @__PURE__ */ jsx(FiHeart, { size: 24, "aria-label": "Like", role: "img" }),
+      /* @__PURE__ */ jsx(FiMessageCircle, { size: 24, "aria-label": "Comment", role: "img" }),
+      /* @__PURE__ */ jsx(FiSend, { size: 24, "aria-label": "Share", role: "img" })
+    ] }),
+    /* @__PURE__ */ jsx(FiBookmark, { size: 24, "aria-label": "Save", role: "img" })
+  ] });
+}
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "10px 12px 4px",
+  color: varRef2(IG_VAR.text)
+};
+var leftStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 16
+};
+function ExpandableText({
+  children,
+  lines = 2,
+  toggleColor,
+  style
+}) {
   const [expanded, setExpanded] = useState(false);
   const [overflowing, setOverflowing] = useState(false);
   const ref = useRef(null);
@@ -1895,55 +1949,406 @@ function Caption({ body }) {
       return;
     }
     setOverflowing(el.scrollHeight > el.clientHeight + 1);
-  }, [body, expanded]);
-  const parts = body.split(TOKEN);
-  return /* @__PURE__ */ jsxs("div", { style: wrapStyle3, children: [
-    /* @__PURE__ */ jsx("div", { ref, style: expanded ? expandedTextStyle : clampedTextStyle, children: parts.map(
-      (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsx("span", { style: { color: LINK_COLOR }, children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
-    ) }),
+  }, [expanded, children]);
+  const textStyle = expanded ? FULL : { ...FULL, ...clampStyle(lines) };
+  return /* @__PURE__ */ jsxs("div", { style, children: [
+    /* @__PURE__ */ jsx("div", { ref, style: textStyle, children }),
     overflowing || expanded ? /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         "aria-expanded": expanded,
-        "aria-label": expanded ? "Collapse caption" : "Expand caption",
+        "aria-label": expanded ? "Show less" : "Show more",
         onClick: () => setExpanded((v) => !v),
-        style: moreStyle,
+        style: { ...toggleStyle, color: toggleColor ?? "inherit" },
         children: expanded ? "less" : "more"
       }
     ) : null
   ] });
 }
-var wrapStyle3 = {
-  fontSize: 14,
-  lineHeight: 1.35
-};
-var clampedTextStyle = {
-  display: "-webkit-box",
-  WebkitLineClamp: 2,
-  WebkitBoxOrient: "vertical",
-  overflow: "hidden",
+var FULL = {
   whiteSpace: "pre-wrap",
   wordBreak: "break-word"
 };
-var expandedTextStyle = {
-  maxHeight: 180,
-  overflowY: "auto",
-  whiteSpace: "pre-wrap",
-  wordBreak: "break-word",
-  overscrollBehavior: "contain"
-};
-var moreStyle = {
+function clampStyle(lines) {
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: lines,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  };
+}
+var toggleStyle = {
   display: "inline-block",
   marginTop: 2,
   padding: 0,
   border: 0,
   background: "transparent",
-  color: "rgba(255,255,255,0.82)",
-  fontSize: 13,
+  font: "inherit",
+  fontWeight: 600,
+  cursor: "pointer"
+};
+var TOKEN = /([#@][\p{L}\p{N}_.]+)/gu;
+var IS_TOKEN = /^[#@][\p{L}\p{N}_.]+$/u;
+function Caption({
+  username,
+  body
+}) {
+  const parts = body.split(TOKEN);
+  return /* @__PURE__ */ jsxs(
+    ExpandableText,
+    {
+      lines: 2,
+      toggleColor: varRef2(IG_VAR.muted),
+      style: wrapStyle3,
+      children: [
+        /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+          username,
+          " "
+        ] }),
+        parts.map(
+          (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsx("span", { style: { color: varRef2(IG_VAR.accent) }, children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
+        )
+      ]
+    }
+  );
+}
+var wrapStyle3 = {
+  padding: "4px 12px 0",
+  fontSize: 14,
+  lineHeight: 1.4,
+  color: varRef2(IG_VAR.text)
+};
+function FeedMedia({ media }) {
+  if (media.length <= 1) {
+    return /* @__PURE__ */ jsx("div", { style: frameStyle, children: media[0] ? /* @__PURE__ */ jsx(Tile2, { item: media[0] }) : null });
+  }
+  return /* @__PURE__ */ jsx(Carousel, { media });
+}
+function Tile2({ item }) {
+  if (item.kind === "video") {
+    return /* @__PURE__ */ jsx("video", { src: item.src, poster: item.posterSrc, controls: true, style: mediaStyle });
+  }
+  return /* @__PURE__ */ jsx("img", { src: item.src, alt: item.alt ?? "", style: mediaStyle });
+}
+function Carousel({ media }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false, align: "start" });
+  const [selected, setSelected] = useState(0);
+  const sync = useCallback((api) => {
+    setSelected(api.selectedScrollSnap());
+  }, []);
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+    sync(emblaApi);
+    emblaApi.on("select", sync).on("reInit", sync);
+    return () => {
+      emblaApi.off("select", sync).off("reInit", sync);
+    };
+  }, [emblaApi, sync]);
+  return /* @__PURE__ */ jsxs("div", { style: frameStyle, children: [
+    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", height: "100%" }, children: media.map((item, i) => /* @__PURE__ */ jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsx(Tile2, { item }) }, `${item.src}-${i}`)) }) }),
+    /* @__PURE__ */ jsxs("div", { style: pillStyle, children: [
+      selected + 1,
+      "/",
+      media.length
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: dotsStyle, children: media.map((item, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: { ...dotStyle, opacity: i === selected ? 1 : 0.5 }
+      },
+      `dot-${item.src}-${i}`
+    )) })
+  ] });
+}
+var frameStyle = {
+  position: "relative",
+  width: "100%",
+  aspectRatio: "1 / 1",
+  background: "#000",
+  overflow: "hidden"
+};
+var mediaStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+var slideStyle = {
+  position: "relative",
+  flex: "0 0 100%",
+  minWidth: 0,
+  height: "100%"
+};
+var pillStyle = {
+  position: "absolute",
+  top: 12,
+  right: 12,
+  background: "rgba(0,0,0,0.6)",
+  color: "#fff",
+  fontSize: 12,
+  fontWeight: 600,
+  padding: "2px 9px",
+  borderRadius: 999
+};
+var dotsStyle = {
+  position: "absolute",
+  bottom: 10,
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  gap: 4
+};
+var dotStyle = {
+  width: 6,
+  height: 6,
+  borderRadius: "50%",
+  background: "#fff"
+};
+var PLACEHOLDER_AVATAR3 = "data:image/svg+xml;utf8," + encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="16" fill="#b3b3b3"/></svg>'
+);
+function Header2({
+  author,
+  collaborators
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: rowStyle2, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: author.avatar_url ?? PLACEHOLDER_AVATAR3,
+        alt: "",
+        width: 32,
+        height: 32,
+        style: avatarStyle
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxs("span", { style: nameStyle, children: [
+        author.username ?? "",
+        author.verified ? /* @__PURE__ */ jsx(
+          MdVerified,
+          {
+            size: 13,
+            "aria-label": "Verified",
+            role: "img",
+            style: { color: "#3897f0", marginLeft: 3, flex: "0 0 auto" }
+          }
+        ) : null
+      ] }),
+      collaborators.length > 0 ? /* @__PURE__ */ jsxs("span", { style: collabStyle, children: [
+        "with ",
+        collaborators.map((c) => `@${c}`).join(", ")
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx(
+      FiMoreHorizontal,
+      {
+        size: 18,
+        "aria-hidden": true,
+        style: { marginLeft: "auto", color: varRef2(IG_VAR.text) }
+      }
+    )
+  ] });
+}
+var rowStyle2 = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  padding: "10px 12px"
+};
+var avatarStyle = {
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  objectFit: "cover",
+  flex: "0 0 auto"
+};
+var nameStyle = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: 14,
   fontWeight: 600,
-  cursor: "pointer",
-  fontFamily: "inherit"
+  color: varRef2(IG_VAR.text),
+  lineHeight: 1.2
+};
+var collabStyle = {
+  fontSize: 12,
+  color: varRef2(IG_VAR.muted),
+  lineHeight: 1.2
+};
+function ReelPreview({
+  author,
+  body,
+  media,
+  audioName,
+  className,
+  style
+}) {
+  const first = media[0];
+  const username = author.username ?? "";
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
+    first ? first.kind === "video" ? /* @__PURE__ */ jsx(
+      "video",
+      {
+        src: first.src,
+        poster: first.posterSrc,
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        playsInline: true,
+        style: coverStyle2
+      }
+    ) : /* @__PURE__ */ jsx("img", { src: first.src, alt: first.alt ?? "", style: coverStyle2 }) : null,
+    /* @__PURE__ */ jsx("div", { style: scrimStyle }),
+    /* @__PURE__ */ jsxs("div", { style: infoStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: authorRowStyle, children: [
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }),
+        author.verified ? /* @__PURE__ */ jsx(MdVerified, { size: 13, "aria-label": "Verified", role: "img", style: { color: "#fff" } }) : null
+      ] }),
+      body ? /* @__PURE__ */ jsx("div", { style: captionStyle, children: body }) : null,
+      /* @__PURE__ */ jsxs("div", { style: audioStyle, children: [
+        /* @__PURE__ */ jsx(MdMusicNote, { size: 14, "aria-hidden": true }),
+        /* @__PURE__ */ jsx("span", { children: audioName ?? "Original audio" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: railStyle, children: [
+      /* @__PURE__ */ jsx(FiHeart, { size: 26, "aria-label": "Like", role: "img" }),
+      /* @__PURE__ */ jsx(FiMessageCircle, { size: 26, "aria-label": "Comment", role: "img" }),
+      /* @__PURE__ */ jsx(FiSend, { size: 26, "aria-label": "Share", role: "img" }),
+      /* @__PURE__ */ jsx(FiBookmark, { size: 26, "aria-label": "Save", role: "img" }),
+      /* @__PURE__ */ jsx(FiMoreHorizontal, { size: 22, "aria-hidden": true })
+    ] })
+  ] });
+}
+var cardStyle3 = {
+  position: "relative",
+  width: "100%",
+  maxWidth: 320,
+  aspectRatio: "9 / 16",
+  borderRadius: 12,
+  overflow: "hidden",
+  background: "#000",
+  color: "#fff",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+};
+var coverStyle2 = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+var scrimStyle = {
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%)",
+  pointerEvents: "none"
+};
+var infoStyle = {
+  position: "absolute",
+  left: 12,
+  right: 60,
+  bottom: 14,
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  textShadow: "0 1px 3px rgba(0,0,0,0.5)"
+};
+var authorRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 5
+};
+var captionStyle = {
+  fontSize: 13,
+  lineHeight: 1.35,
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+var audioStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  fontSize: 12
+};
+var railStyle = {
+  position: "absolute",
+  right: 8,
+  bottom: 16,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 18,
+  color: "#fff",
+  filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.4))"
+};
+function InstagramPostPreviewImpl({
+  variant,
+  author,
+  media,
+  theme = "auto",
+  className,
+  style
+}) {
+  const resolvedMedia = useResolvedMedia(
+    media,
+    variant.media,
+    altSignatureOf(variant.media)
+  );
+  const settings = variant.settings;
+  const isReel = variant.post_type === "reel" || settings?.media_type === "REELS";
+  if (isReel) {
+    return /* @__PURE__ */ jsx(
+      ReelPreview,
+      {
+        author,
+        body: variant.body ?? "",
+        media: resolvedMedia,
+        audioName: settings?.audio_name,
+        className,
+        style
+      }
+    );
+  }
+  const collaborators = settings?.collaborators ?? [];
+  const cardStyle5 = {
+    ...paletteVars2(),
+    colorScheme: colorSchemeFor2(theme),
+    background: varRef2(IG_VAR.bg),
+    color: varRef2(IG_VAR.text),
+    border: `1px solid ${varRef2(IG_VAR.border)}`,
+    borderRadius: 8,
+    maxWidth: 470,
+    overflow: "hidden",
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle5, children: [
+    /* @__PURE__ */ jsx(Header2, { author, collaborators }),
+    /* @__PURE__ */ jsx(FeedMedia, { media: resolvedMedia }),
+    /* @__PURE__ */ jsx(Actions, {}),
+    variant.body ? /* @__PURE__ */ jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsx(Caption, { username: author.username ?? "", body: variant.body }) }) : null
+  ] });
+}
+var InstagramPostPreview = memo(InstagramPostPreviewImpl);
+var LINK_COLOR = "#8ab4ff";
+var TOKEN2 = /([#@][\p{L}\p{N}_.]+)/gu;
+var IS_TOKEN2 = /^[#@][\p{L}\p{N}_.]+$/u;
+function Caption2({ body }) {
+  const parts = body.split(TOKEN2);
+  return /* @__PURE__ */ jsx(ExpandableText, { lines: 2, toggleColor: "rgba(255,255,255,0.82)", style: wrapStyle4, children: parts.map(
+    (part, i) => IS_TOKEN2.test(part) ? /* @__PURE__ */ jsx("span", { style: { color: LINK_COLOR }, children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
+  ) });
+}
+var wrapStyle4 = {
+  fontSize: 14,
+  lineHeight: 1.35
 };
 function Media2({
   media,
@@ -1963,7 +2368,7 @@ function Media2({
         muted: true,
         loop: true,
         playsInline: true,
-        style: coverStyle2
+        style: coverStyle3
       }
     );
   }
@@ -1990,11 +2395,11 @@ function PhotoCarousel({ media }) {
     };
   }, [emblaApi, sync]);
   return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0 }, children: [
-    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle2 }) }, `${m.src}-${i}`)) }) }),
-    media.length > 1 ? /* @__PURE__ */ jsx("div", { style: dotsStyle, children: media.map((m, i) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsx("div", { style: slideStyle2, children: /* @__PURE__ */ jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle3 }) }, `${m.src}-${i}`)) }) }),
+    media.length > 1 ? /* @__PURE__ */ jsx("div", { style: dotsStyle2, children: media.map((m, i) => /* @__PURE__ */ jsx(
       "span",
       {
-        style: { ...dotStyle, opacity: i === selected ? 1 : 0.4 }
+        style: { ...dotStyle2, opacity: i === selected ? 1 : 0.4 }
       },
       `dot-${m.src}-${i}`
     )) }) : null
@@ -2009,7 +2414,7 @@ function ProcessingMedia() {
     /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
   ] });
 }
-var coverStyle2 = {
+var coverStyle3 = {
   position: "absolute",
   inset: 0,
   width: "100%",
@@ -2025,13 +2430,13 @@ var containerStyle = {
   display: "flex",
   height: "100%"
 };
-var slideStyle = {
+var slideStyle2 = {
   position: "relative",
   flex: "0 0 100%",
   minWidth: 0,
   height: "100%"
 };
-var dotsStyle = {
+var dotsStyle2 = {
   position: "absolute",
   bottom: 124,
   left: "50%",
@@ -2040,7 +2445,7 @@ var dotsStyle = {
   gap: 5,
   alignItems: "center"
 };
-var dotStyle = {
+var dotStyle2 = {
   width: 6,
   height: 6,
   borderRadius: "50%",
@@ -2135,16 +2540,16 @@ function TikTokPostPreviewImpl({
   const label = commercialLabel(variant.settings);
   const isAigc = Boolean(variant.settings?.is_aigc);
   const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...cardStyle4, ...style }, children: [
     /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
     /* @__PURE__ */ jsx(Media2, { media: resolvedMedia, pending }),
-    /* @__PURE__ */ jsx("div", { style: scrimStyle }),
-    /* @__PURE__ */ jsxs("div", { style: infoStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: scrimStyle2 }),
+    /* @__PURE__ */ jsxs("div", { style: infoStyle2, children: [
       /* @__PURE__ */ jsx("div", { style: usernameStyle, children: handle }),
-      variant.body ? /* @__PURE__ */ jsx(Caption, { body: variant.body }) : null,
+      variant.body ? /* @__PURE__ */ jsx(Caption2, { body: variant.body }) : null,
       label || isAigc ? /* @__PURE__ */ jsxs("div", { style: labelsStyle, children: [
-        label ? /* @__PURE__ */ jsx("span", { style: pillStyle, children: label }) : null,
-        isAigc ? /* @__PURE__ */ jsx("span", { style: pillStyle, children: "Creator labeled as AI-generated" }) : null
+        label ? /* @__PURE__ */ jsx("span", { style: pillStyle2, children: label }) : null,
+        isAigc ? /* @__PURE__ */ jsx("span", { style: pillStyle2, children: "Creator labeled as AI-generated" }) : null
       ] }) : null,
       /* @__PURE__ */ jsxs("div", { style: musicRowStyle, children: [
         /* @__PURE__ */ jsx(IoMusicalNotes, { size: 13 }),
@@ -2154,7 +2559,7 @@ function TikTokPostPreviewImpl({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { style: railStyle, children: [
+    /* @__PURE__ */ jsxs("div", { style: railStyle2, children: [
       /* @__PURE__ */ jsxs("div", { style: avatarWrapStyle, children: [
         /* @__PURE__ */ jsx(Avatar, { url: creator.avatar_url, name: creator.nickname }),
         /* @__PURE__ */ jsx("span", { style: followBadgeStyle, children: /* @__PURE__ */ jsx(PlusIcon, { size: 14 }) })
@@ -2175,14 +2580,14 @@ function RailAction({ icon, count }) {
 }
 function Avatar({ url, name }) {
   if (url) {
-    return /* @__PURE__ */ jsx("img", { src: url, alt: name, style: avatarStyle });
+    return /* @__PURE__ */ jsx("img", { src: url, alt: name, style: avatarStyle2 });
   }
-  return /* @__PURE__ */ jsx("div", { style: { ...avatarStyle, ...avatarFallbackStyle }, children: name.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsx("div", { style: { ...avatarStyle2, ...avatarFallbackStyle }, children: name.slice(0, 1).toUpperCase() });
 }
 function Disc({ url }) {
   return /* @__PURE__ */ jsx("div", { style: discStyle, children: url ? /* @__PURE__ */ jsx("img", { src: url, alt: "", style: discImgStyle }) : null });
 }
-var cardStyle3 = {
+var cardStyle4 = {
   position: "relative",
   width: "100%",
   maxWidth: 320,
@@ -2193,13 +2598,13 @@ var cardStyle3 = {
   color: "#fff",
   fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
 };
-var scrimStyle = {
+var scrimStyle2 = {
   position: "absolute",
   inset: 0,
   background: "linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%)",
   pointerEvents: "none"
 };
-var infoStyle = {
+var infoStyle2 = {
   position: "absolute",
   left: 14,
   right: 70,
@@ -2220,7 +2625,7 @@ var labelsStyle = {
   gap: 4,
   marginTop: 2
 };
-var pillStyle = {
+var pillStyle2 = {
   display: "inline-flex",
   alignItems: "center",
   background: "rgba(255,255,255,0.18)",
@@ -2237,7 +2642,7 @@ var musicRowStyle = {
   fontSize: 13,
   marginTop: 4
 };
-var railStyle = {
+var railStyle2 = {
   position: "absolute",
   right: 8,
   bottom: 14,
@@ -2251,7 +2656,7 @@ var avatarWrapStyle = {
   position: "relative",
   marginBottom: 8
 };
-var avatarStyle = {
+var avatarStyle2 = {
   width: 46,
   height: 46,
   borderRadius: "50%",
@@ -2314,6 +2719,8 @@ var discImgStyle = {
 };
 var KEYFRAMES = `@keyframes pr-tt-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pr-tt-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`;
 var TikTokPostPreview = memo(TikTokPostPreviewImpl);
+
+// src/preview/tiktok/theme.ts
 var TT_VAR = {
   text: "--pr-tt-text",
   muted: "--pr-tt-muted",
@@ -2321,58 +2728,25 @@ var TT_VAR = {
   accent: "--pr-tt-accent",
   switchOff: "--pr-tt-switch-off"
 };
-var LIGHT2 = {
-  text: "rgba(0,0,0,0.9)",
-  muted: "rgba(0,0,0,0.55)",
-  border: "rgba(0,0,0,0.12)",
-  accent: "#fe2c55",
-  switchOff: "rgba(0,0,0,0.18)"
-};
-var DARK2 = {
-  text: "rgba(255,255,255,0.92)",
-  muted: "#8a8a92",
-  border: "rgba(255,255,255,0.14)",
-  accent: "#fe2c55",
-  switchOff: "rgba(255,255,255,0.22)"
-};
-function varRef2(name) {
+function varRef3(name) {
   return `var(${name})`;
 }
-function paletteVars2(dark) {
-  const p = dark ? DARK2 : LIGHT2;
+function paletteVars3() {
   return {
-    [TT_VAR.text]: p.text,
-    [TT_VAR.muted]: p.muted,
-    [TT_VAR.border]: p.border,
-    [TT_VAR.accent]: p.accent,
-    [TT_VAR.switchOff]: p.switchOff
+    [TT_VAR.text]: "light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.92))",
+    [TT_VAR.muted]: "light-dark(rgba(0,0,0,0.55), #8a8a92)",
+    [TT_VAR.border]: "light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.14))",
+    [TT_VAR.accent]: "#fe2c55",
+    [TT_VAR.switchOff]: "light-dark(rgba(0,0,0,0.18), rgba(255,255,255,0.22))"
   };
 }
-function usePrefersDark2() {
-  const [dark, setDark] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mq = window.matchMedia("(prefers-color-scheme: dark)");
-    setDark(mq.matches);
-    const onChange = (event) => setDark(event.matches);
-    mq.addEventListener("change", onChange);
-    return () => mq.removeEventListener("change", onChange);
-  }, []);
-  return dark;
+function colorSchemeFor3(theme) {
+  return theme === "auto" ? "light dark" : theme;
 }
-function useIsDark2(theme) {
-  const prefersDark = usePrefersDark2();
-  if (theme === "auto") {
-    return prefersDark;
-  }
-  return theme === "dark";
-}
-var MUTED2 = varRef2(TT_VAR.muted);
-var BORDER = varRef2(TT_VAR.border);
-var ACCENT = varRef2(TT_VAR.accent);
-var SWITCH_OFF = varRef2(TT_VAR.switchOff);
+var MUTED2 = varRef3(TT_VAR.muted);
+var BORDER = varRef3(TT_VAR.border);
+var ACCENT = varRef3(TT_VAR.accent);
+var SWITCH_OFF = varRef3(TT_VAR.switchOff);
 var ON = "#34c759";
 function Row({
   label,
@@ -2380,7 +2754,7 @@ function Row({
   control,
   htmlFor
 }) {
-  return /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { style: rowStyle3, children: [
     /* @__PURE__ */ jsxs("label", { htmlFor, style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: label }),
       sublabel ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
@@ -2452,7 +2826,7 @@ function CheckRow({
     /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: label })
   ] });
 }
-var rowStyle = {
+var rowStyle3 = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2557,7 +2931,7 @@ function TikTokCaptionField({
   const max = captionMaxFor(postType);
   const count = value.length;
   const over = count > max;
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...wrapStyle4, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...wrapStyle5, ...style }, children: [
     /* @__PURE__ */ jsxs("div", { style: labelRowStyle, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
       /* @__PURE__ */ jsxs(
@@ -2565,7 +2939,7 @@ function TikTokCaptionField({
         {
           style: {
             ...countStyle,
-            color: over ? varRef2(TT_VAR.accent) : varRef2(TT_VAR.muted)
+            color: over ? varRef3(TT_VAR.accent) : varRef3(TT_VAR.muted)
           },
           children: [
             count.toLocaleString(),
@@ -2585,13 +2959,13 @@ function TikTokCaptionField({
         rows: 4,
         style: {
           ...textareaStyle,
-          borderColor: over ? varRef2(TT_VAR.accent) : varRef2(TT_VAR.border)
+          borderColor: over ? varRef3(TT_VAR.accent) : varRef3(TT_VAR.border)
         }
       }
     )
   ] });
 }
-var wrapStyle4 = {
+var wrapStyle5 = {
   display: "flex",
   flexDirection: "column",
   gap: 6,
@@ -2747,7 +3121,6 @@ function TikTokPublishPanel({
   className,
   style
 }) {
-  const dark = useIsDark2(theme);
   const isVideo = variant.post_type === "video";
   const captionOver = caption.length > captionMaxFor(variant.post_type);
   const mediaOk = mediaCountValid(variant.post_type, variant.media?.length ?? 0);
@@ -2757,9 +3130,10 @@ function TikTokPublishPanel({
     {
       className,
       style: {
-        ...paletteVars2(dark),
+        ...paletteVars3(),
+        colorScheme: colorSchemeFor3(theme),
         ...panelStyle,
-        color: varRef2(TT_VAR.text),
+        color: varRef3(TT_VAR.text),
         ...style
       },
       children: [
@@ -2850,6 +3224,6 @@ var postButtonStyle = {
   transition: "opacity 160ms ease"
 };
 
-export { ArticleCard, AudienceSelect, CommercialDisclosure, Connect, Declaration, DocumentCard, InteractionToggles, LinkedInPostPreview, Poll, PostrunProvider, TikTokCaptionField, TikTokPostPreview, TikTokPublishPanel, UploadError, XPoll, XPostPreview, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, useCalendar, useConnect, useConnection, useConnections, useCreatePost, useCreateProfile, useDeleteMedia, useDeletePost, useDeleteProfile, useDisconnect, useDiscoverableAccounts, useInfiniteList, useMedia, useMediaInfinite, useMediaList, useMediaUpload, usePost, usePostrun, usePosts, usePostsInfinite, useProfile, useProfiles, useProfilesInfinite, useSelectAccount, useTikTokCreatorInfo, useUpdateMedia, useUpdatePost, useUpdateProfile, useValidatePost };
+export { ArticleCard, AudienceSelect, CommercialDisclosure, Connect, Declaration, DocumentCard, InstagramPostPreview, InteractionToggles, LinkedInPostPreview, Poll, PostrunProvider, ReelPreview, TikTokCaptionField, TikTokPostPreview, TikTokPublishPanel, UploadError, XPoll, XPostPreview, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, toPreviewMedia, useCalendar, useConnect, useConnection, useConnections, useCreatePost, useCreateProfile, useDeleteMedia, useDeletePost, useDeleteProfile, useDisconnect, useDiscoverableAccounts, useInfiniteList, useMedia, useMediaInfinite, useMediaList, useMediaUpload, usePost, usePostrun, usePosts, usePostsInfinite, useProfile, useProfiles, useProfilesInfinite, useSelectAccount, useTikTokCreatorInfo, useUpdateMedia, useUpdatePost, useUpdateProfile, useValidatePost };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map