@postrun/react 2.7.0 → 2.9.0

package/dist/index.cjs

@@ -15,6 +15,7 @@ var fi = require('react-icons/fi');
 var twitterText = require('twitter-text');
 var lu = require('react-icons/lu');
 var useEmblaCarousel = require('embla-carousel-react');
+var md = require('react-icons/md');
 var io5 = require('react-icons/io5');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -1124,6 +1125,38 @@ var ACTIONS = [
 function XPreviewActions() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: ROW, children: ACTIONS.map(({ label, Icon: Icon2 }) => /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 18, "aria-label": label, role: "img" }, label)) });
 }
+function twitterMediaUrl(src) {
+  try {
+    const url = new URL(src);
+    const extension = url.pathname.split(".").pop();
+    if (!extension) {
+      return src;
+    }
+    url.pathname = url.pathname.replace(`.${extension}`, "");
+    url.searchParams.set("format", extension);
+    url.searchParams.set("name", "small");
+    return url.toString();
+  } catch {
+    return src;
+  }
+}
+function rawSrcLookup(...lists) {
+  const map = /* @__PURE__ */ new Map();
+  for (const list of lists) {
+    for (const item of list) {
+      const poster = item.posterSrc ?? item.src;
+      map.set(twitterMediaUrl(item.src), item.src);
+      map.set(twitterMediaUrl(poster), poster);
+    }
+  }
+  return map;
+}
+function makeRawMediaImg(rawBySrc) {
+  return function RawMediaImg(props) {
+    const raw = typeof props.src === "string" ? rawBySrc.get(props.src) ?? props.src : props.src;
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { ...props, src: raw });
+  };
+}
 var {
   extractCashtagsWithIndices,
   extractHashtagsWithIndices,
@@ -1174,9 +1207,12 @@ function buildUser(author) {
   return {
     id_str: "",
     name: author.name,
-    profile_image_url_https: author.avatarUrl ?? PLACEHOLDER_AVATAR,
+    profile_image_url_https: author.avatar_url ?? PLACEHOLDER_AVATAR,
     profile_image_shape: "Circle",
-    screen_name: author.handle,
+    // `username`/`avatar_url` derive from the SDK Connection and are nullable.
+    screen_name: author.username ?? "",
+    // Legacy (pre-X-era) verification flag — always false for organic posts; the
+    // X Blue checkmark rides on `is_blue_verified`.
     verified: false,
     is_blue_verified: verified
   };
@@ -1239,7 +1275,11 @@ function buildQuoted(quote, hasQuoteId) {
   if (!quote && !hasQuoteId) {
     return void 0;
   }
-  const author = quote?.author ?? { name: "Quoted post", handle: "" };
+  const author = quote?.author ?? {
+    name: "Quoted post",
+    username: "",
+    avatar_url: null
+  };
   const body = quote?.body ?? "";
   const media = quote?.media ?? [];
   return {
@@ -1305,7 +1345,7 @@ function XPostPreviewImpl({
   showActions = true,
   className,
   style,
-  components
+  components: componentsProp
 }) {
   const resolvedMedia = useResolvedMedia(
     media,
@@ -1313,6 +1353,15 @@ function XPostPreviewImpl({
     altSignatureOf(variant.media)
   );
   const resolvedQuotedMedia = useResolvedMedia(quotedTweet?.media, void 0, "");
+  const components = react.useMemo(
+    () => ({
+      MediaImg: makeRawMediaImg(
+        rawSrcLookup(resolvedMedia, resolvedQuotedMedia)
+      ),
+      ...componentsProp
+    }),
+    [resolvedMedia, resolvedQuotedMedia, componentsProp]
+  );
   const tweet = react.useMemo(() => {
     const resolvedQuoted = quotedTweet ? {
       author: quotedTweet.author,
@@ -1355,6 +1404,8 @@ function XPostPreviewImpl({
   );
 }
 var XPostPreview = react.memo(XPostPreviewImpl);
+
+// src/preview/linkedin/theme.ts
 var LI_VAR = {
   bg: "--pr-li-bg",
   text: "--pr-li-text",
@@ -1362,53 +1413,21 @@ 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;
-  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
-  };
-}
-function usePrefersDark() {
-  const [dark, setDark] = react.useState(false);
-  react.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;
+var PALETTE_VARS = {
+  [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 paletteVars() {
+  return PALETTE_VARS;
 }
-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 {
@@ -1551,7 +1570,7 @@ function Header({ author, visibility, time = "Now" }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
-        src: author.avatarUrl ?? PLACEHOLDER_AVATAR2,
+        src: author.avatar_url ?? PLACEHOLDER_AVATAR2,
         alt: "",
         width: 48,
         height: 48,
@@ -1650,7 +1669,6 @@ function Tile({
     overlay ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "aria-hidden": false,
         style: {
           position: "absolute",
           inset: 0,
@@ -1821,7 +1839,18 @@ function linkify(text, colors, mentionNames) {
       );
     } else if (token.startsWith("#")) {
       nodes.push(
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: linkStyle(colors.accent), children: token }, key++)
+        // Preview-only hashtag: no real destination, so prevent the host SPA from
+        // navigating / scrolling to top on click.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: "#",
+            style: linkStyle(colors.accent),
+            onClick: (e) => e.preventDefault(),
+            children: token
+          },
+          key++
+        )
       );
     } else {
       nodes.push(
@@ -1839,32 +1868,41 @@ function PostBody({ text, mentionNames = [], colors }) {
   const [expanded, setExpanded] = react.useState(false);
   const isLong = text.length > FOLD_CHARS;
   const shown = isLong && !expanded ? truncateAtWord(text, FOLD_CHARS) : text;
+  const nodes = react.useMemo(
+    () => linkify(shown, colors, mentionNames),
+    [shown, colors, mentionNames]
+  );
+  const toggleStyle2 = {
+    background: "none",
+    border: "none",
+    padding: 0,
+    cursor: "pointer",
+    color: colors.muted,
+    fontWeight: 600,
+    fontSize: 14
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: BODY_STYLE, children: [
-    linkify(shown, colors, mentionNames),
-    isLong && !expanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "\u2026",
-      " ",
+    nodes,
+    isLong ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !expanded ? "\u2026 " : " ",
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          onClick: () => setExpanded(true),
-          style: {
-            background: "none",
-            border: "none",
-            padding: 0,
-            cursor: "pointer",
-            color: colors.muted,
-            fontWeight: 600,
-            fontSize: 14
-          },
-          children: "more"
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((v) => !v),
+          style: toggleStyle2,
+          children: expanded ? "see less" : "more"
         }
       )
     ] }) : null
   ] });
 }
 var FONT_STACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var BODY_COLORS = {
+  accent: varRef(LI_VAR.accent),
+  muted: varRef(LI_VAR.muted)
+};
 function LinkedInPostPreviewImpl({
   variant,
   author,
@@ -1875,20 +1913,19 @@ function LinkedInPostPreviewImpl({
   className,
   style
 }) {
-  const dark = useIsDark(theme);
   const resolvedMedia = useResolvedMedia(
     media,
     variant.media,
     altSignatureOf(variant.media)
   );
   const visibility = variant.settings?.visibility ?? "PUBLIC";
-  const mentionNames = (variant.settings?.mentions ?? []).map((m) => m.name);
-  const bodyColors = {
-    accent: varRef(LI_VAR.accent),
-    muted: varRef(LI_VAR.muted)
-  };
-  const cardStyle4 = {
-    ...paletteVars(dark),
+  const mentionNames = react.useMemo(
+    () => (variant.settings?.mentions ?? []).map((m) => m.name),
+    [variant.settings?.mentions]
+  );
+  const cardStyle5 = {
+    ...paletteVars(),
+    colorScheme: colorSchemeFor(theme),
     background: varRef(LI_VAR.bg),
     color: varRef(LI_VAR.text),
     border: `1px solid ${varRef(LI_VAR.border)}`,
@@ -1898,14 +1935,14 @@ function LinkedInPostPreviewImpl({
     fontFamily: FONT_STACK,
     ...style
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: cardStyle4, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       PostBody,
       {
         text: variant.body,
         mentionNames,
-        colors: bodyColors
+        colors: BODY_COLORS
       }
     ) }) : null,
     renderContent(variant, resolvedMedia),
@@ -1929,10 +1966,59 @@ function renderContent(variant, media) {
 }
 var INSET = { padding: "12px 16px 0" };
 var LinkedInPostPreview = react.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})`;
+}
+var PALETTE_VARS2 = {
+  [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 paletteVars2() {
+  return PALETTE_VARS2;
+}
+function colorSchemeFor2(theme) {
+  return theme === "auto" ? "light dark" : theme;
+}
+function Actions() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: leftStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiHeart, { size: 24, "aria-label": "Like", role: "img" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiMessageCircle, { size: 24, "aria-label": "Comment", role: "img" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiSend, { size: 24, "aria-label": "Share", role: "img" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(fi.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] = react.useState(false);
   const [overflowing, setOverflowing] = react.useState(false);
   const ref = react.useRef(null);
@@ -1941,56 +2027,418 @@ function Caption({ body }) {
     if (!el || expanded) {
       return;
     }
-    setOverflowing(el.scrollHeight > el.clientHeight + 1);
-  }, [body, expanded]);
-  const parts = body.split(TOKEN);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapStyle3, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: expanded ? expandedTextStyle : clampedTextStyle, children: parts.map(
-      (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: LINK_COLOR }, children: part }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i)
-    ) }),
+    const measure = () => setOverflowing(el.scrollHeight > el.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [expanded, children]);
+  const textStyle = expanded ? FULL : { ...FULL, ...clampStyle(lines) };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: textStyle, children }),
     overflowing || expanded ? /* @__PURE__ */ jsxRuntime.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",
-  fontFamily: "inherit"
+  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__ */ jsxRuntime.jsxs(
+    ExpandableText,
+    {
+      lines: 2,
+      toggleColor: varRef2(IG_VAR.muted),
+      style: wrapStyle3,
+      children: [
+        username ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
+          username,
+          " "
+        ] }) : null,
+        parts.map(
+          (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: varRef2(IG_VAR.accent) }, children: part }, i) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: frameStyle, children: media[0] ? /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item: media[0] }) : null });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(Carousel, { media });
+}
+function Tile2({ item }) {
+  if (item.kind === "video") {
+    return /* @__PURE__ */ jsxRuntime.jsx("video", { src: item.src, poster: item.posterSrc, controls: true, style: mediaStyle });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.src, alt: item.alt ?? "", style: mediaStyle });
+}
+function Carousel({ media }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel__default.default({ loop: false, align: "start" });
+  const [selected, setSelected] = react.useState(0);
+  const sync = react.useCallback((api) => {
+    setSelected(api.selectedScrollSnap());
+  }, []);
+  react.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__ */ jsxRuntime.jsxs("div", { style: frameStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", height: "100%" }, children: media.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item }) }, item.src)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pillStyle, children: [
+      selected + 1,
+      "/",
+      media.length
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: dotsStyle, children: media.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        style: { ...dotStyle, opacity: i === selected ? 1 : 0.5 }
+      },
+      `dot-${item.src}`
+    )) })
+  ] });
+}
+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__ */ jsxRuntime.jsxs("div", { style: rowStyle2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: author.avatar_url ?? PLACEHOLDER_AVATAR3,
+        alt: "",
+        width: 32,
+        height: 32,
+        style: avatarStyle
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0, display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: nameStyle, children: [
+        author.username ?? "",
+        author.verified ? /* @__PURE__ */ jsxRuntime.jsx(
+          md.MdVerified,
+          {
+            size: 13,
+            "aria-label": "Verified",
+            role: "img",
+            style: { color: "#3897f0", marginLeft: 3, flex: "0 0 auto" }
+          }
+        ) : null
+      ] }),
+      collaborators.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: collabStyle, children: [
+        "with ",
+        collaborators.map((c) => `@${c}`).join(", ")
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      fi.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,
+  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__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
+    first ? first.kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
+      "video",
+      {
+        src: first.src,
+        poster: first.posterSrc,
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        playsInline: true,
+        style: coverStyle2
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: first.src, alt: first.alt ?? "", style: coverStyle2 }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: scrimStyle }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: infoStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: authorRowStyle, children: [
+        username ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }) : null,
+        author.verified ? /* @__PURE__ */ jsxRuntime.jsx(md.MdVerified, { size: 13, "aria-label": "Verified", role: "img", style: { color: "#fff" } }) : null
+      ] }),
+      body ? /* @__PURE__ */ jsxRuntime.jsx(
+        ExpandableText,
+        {
+          lines: 2,
+          toggleColor: "rgba(255,255,255,0.7)",
+          style: captionStyle,
+          children: body
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: audioStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(md.MdMusicNote, { size: 14, "aria-hidden": true }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: audioName ?? "Original audio" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: railStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiHeart, { size: 26, "aria-label": "Like", role: "img" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiMessageCircle, { size: 26, "aria-label": "Comment", role: "img" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiSend, { size: 26, "aria-label": "Share", role: "img" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fi.FiBookmark, { size: 26, "aria-label": "Save", role: "img" }),
+      /* @__PURE__ */ jsxRuntime.jsx(fi.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
+};
+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";
+  if (isReel) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className, style: cardStyle5, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Header2, { author, collaborators }),
+    /* @__PURE__ */ jsxRuntime.jsx(FeedMedia, { media: resolvedMedia }),
+    /* @__PURE__ */ jsxRuntime.jsx(Actions, {}),
+    variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(Caption, { username: author.username, body: variant.body }) }) : null
+  ] });
+}
+var InstagramPostPreview = react.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__ */ jsxRuntime.jsx(ExpandableText, { lines: 2, toggleColor: "rgba(255,255,255,0.82)", style: wrapStyle4, children: parts.map(
+    (part, i) => IS_TOKEN2.test(part) ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: LINK_COLOR }, children: part }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i)
+  ) });
+}
+var wrapStyle4 = {
+  fontSize: 14,
+  lineHeight: 1.35
 };
 function Media2({
   media,
@@ -2010,7 +2458,7 @@ function Media2({
         muted: true,
         loop: true,
         playsInline: true,
-        style: coverStyle2
+        style: coverStyle3
       }
     );
   }
@@ -2037,11 +2485,11 @@ function PhotoCarousel({ media }) {
     };
   }, [emblaApi, sync]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "absolute", inset: 0 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle2 }) }, `${m.src}-${i}`)) }) }),
-    media.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: dotsStyle, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle3 }) }, `${m.src}-${i}`)) }) }),
+    media.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: dotsStyle2, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
-        style: { ...dotStyle, opacity: i === selected ? 1 : 0.4 }
+        style: { ...dotStyle2, opacity: i === selected ? 1 : 0.4 }
       },
       `dot-${m.src}-${i}`
     )) }) : null
@@ -2052,11 +2500,13 @@ function EmptyMedia() {
 }
 function ProcessingMedia() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: emptyStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: SHIMMER_KEYFRAME }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: shimmerStyle }),
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
   ] });
 }
-var coverStyle2 = {
+var SHIMMER_KEYFRAME = `@keyframes pr-tt-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`;
+var coverStyle3 = {
   position: "absolute",
   inset: 0,
   width: "100%",
@@ -2072,13 +2522,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%",
@@ -2087,7 +2537,7 @@ var dotsStyle = {
   gap: 5,
   alignItems: "center"
 };
-var dotStyle = {
+var dotStyle2 = {
   width: 6,
   height: 6,
   borderRadius: "50%",
@@ -2182,16 +2632,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__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle4, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: KEYFRAMES }),
     /* @__PURE__ */ jsxRuntime.jsx(Media2, { media: resolvedMedia, pending }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: scrimStyle }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: infoStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: scrimStyle2 }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: infoStyle2, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: usernameStyle, children: handle }),
-      variant.body ? /* @__PURE__ */ jsxRuntime.jsx(Caption, { body: variant.body }) : null,
+      variant.body ? /* @__PURE__ */ jsxRuntime.jsx(Caption2, { body: variant.body }) : null,
       label || isAigc ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelsStyle, children: [
-        label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle, children: label }) : null,
-        isAigc ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle, children: "Creator labeled as AI-generated" }) : null
+        label ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle2, children: label }) : null,
+        isAigc ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle2, children: "Creator labeled as AI-generated" }) : null
       ] }) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: musicRowStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx(io5.IoMusicalNotes, { size: 13 }),
@@ -2201,7 +2651,7 @@ function TikTokPostPreviewImpl({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: railStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: railStyle2, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: avatarWrapStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Avatar, { url: creator.avatar_url, name: creator.nickname }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { style: followBadgeStyle, children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, { size: 14 }) })
@@ -2222,14 +2672,14 @@ function RailAction({ icon, count }) {
 }
 function Avatar({ url, name }) {
   if (url) {
-    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: name, style: avatarStyle });
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: name, style: avatarStyle2 });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...avatarStyle, ...avatarFallbackStyle }, children: name.slice(0, 1).toUpperCase() });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...avatarStyle2, ...avatarFallbackStyle }, children: name.slice(0, 1).toUpperCase() });
 }
 function Disc({ url }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: discStyle, children: url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: "", style: discImgStyle }) : null });
 }
-var cardStyle3 = {
+var cardStyle4 = {
   position: "relative",
   width: "100%",
   maxWidth: 320,
@@ -2240,13 +2690,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,
@@ -2267,7 +2717,7 @@ var labelsStyle = {
   gap: 4,
   marginTop: 2
 };
-var pillStyle = {
+var pillStyle2 = {
   display: "inline-flex",
   alignItems: "center",
   background: "rgba(255,255,255,0.18)",
@@ -2284,7 +2734,7 @@ var musicRowStyle = {
   fontSize: 13,
   marginTop: 4
 };
-var railStyle = {
+var railStyle2 = {
   position: "absolute",
   right: 8,
   bottom: 14,
@@ -2298,7 +2748,7 @@ var avatarWrapStyle = {
   position: "relative",
   marginBottom: 8
 };
-var avatarStyle = {
+var avatarStyle2 = {
   width: 46,
   height: 46,
   borderRadius: "50%",
@@ -2361,6 +2811,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 = react.memo(TikTokPostPreviewImpl);
+
+// src/preview/tiktok/theme.ts
 var TT_VAR = {
   text: "--pr-tt-text",
   muted: "--pr-tt-muted",
@@ -2368,58 +2820,26 @@ 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;
-  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
-  };
-}
-function usePrefersDark2() {
-  const [dark, setDark] = react.useState(false);
-  react.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;
+var PALETTE_VARS3 = {
+  [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 paletteVars3() {
+  return PALETTE_VARS3;
 }
-function useIsDark2(theme) {
-  const prefersDark = usePrefersDark2();
-  if (theme === "auto") {
-    return prefersDark;
-  }
-  return theme === "dark";
+function colorSchemeFor3(theme) {
+  return theme === "auto" ? "light dark" : theme;
 }
-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,
@@ -2427,11 +2847,17 @@ function Row({
   control,
   htmlFor
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: label }),
-      sublabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
-    ] }),
+  const text = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: label }),
+    sublabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
+  ] });
+  const textStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle3, children: [
+    htmlFor ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, style: textStyle, children: text }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children: text }),
     control
   ] });
 }
@@ -2499,7 +2925,7 @@ function CheckRow({
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: label })
   ] });
 }
-var rowStyle = {
+var rowStyle3 = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2553,7 +2979,6 @@ function AudienceSelect({
   value,
   onChange
 }) {
-  const id = react.useId();
   const options = js.audiencePrivacyOptions(creatorInfo.privacy_options, value);
   const unselected = js.audienceUnselected(value);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
@@ -2561,7 +2986,7 @@ function AudienceSelect({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
-        id,
+        "aria-label": "Who can view this post",
         value: value.privacy_level ?? "",
         onChange: (e) => onChange({
           ...value,
@@ -2604,7 +3029,7 @@ function TikTokCaptionField({
   const max = js.captionMaxFor(postType);
   const count = value.length;
   const over = count > max;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...wrapStyle4, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...wrapStyle5, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelRowStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2612,7 +3037,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(),
@@ -2632,13 +3057,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,
@@ -2794,7 +3219,6 @@ function TikTokPublishPanel({
   className,
   style
 }) {
-  const dark = useIsDark2(theme);
   const isVideo = variant.post_type === "video";
   const captionOver = caption.length > js.captionMaxFor(variant.post_type);
   const mediaOk = mediaCountValid(variant.post_type, variant.media?.length ?? 0);
@@ -2804,9 +3228,10 @@ function TikTokPublishPanel({
     {
       className,
       style: {
-        ...paletteVars2(dark),
+        ...paletteVars3(),
+        colorScheme: colorSchemeFor3(theme),
         ...panelStyle,
-        color: varRef2(TT_VAR.text),
+        color: varRef3(TT_VAR.text),
         ...style
       },
       children: [
@@ -2911,10 +3336,12 @@ exports.CommercialDisclosure = CommercialDisclosure;
 exports.Connect = Connect;
 exports.Declaration = Declaration;
 exports.DocumentCard = DocumentCard;
+exports.InstagramPostPreview = InstagramPostPreview;
 exports.InteractionToggles = InteractionToggles;
 exports.LinkedInPostPreview = LinkedInPostPreview;
 exports.Poll = Poll;
 exports.PostrunProvider = PostrunProvider;
+exports.ReelPreview = ReelPreview;
 exports.TikTokCaptionField = TikTokCaptionField;
 exports.TikTokPostPreview = TikTokPostPreview;
 exports.TikTokPublishPanel = TikTokPublishPanel;