@postrun/react 2.7.0 → 2.8.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 }; }
@@ -1355,6 +1356,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 +1365,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] = 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;
-}
-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 {
@@ -1875,7 +1845,6 @@ function LinkedInPostPreviewImpl({
   className,
   style
 }) {
-  const dark = useIsDark(theme);
   const resolvedMedia = useResolvedMedia(
     media,
     variant.media,
@@ -1887,8 +1856,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)}`,
@@ -1898,7 +1868,7 @@ 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,
@@ -1929,10 +1899,58 @@ 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})`;
+}
+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__ */ 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);
@@ -1942,55 +1960,406 @@ function Caption({ body }) {
       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)
-    ) }),
+  }, [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"
+};
+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: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
+          username,
+          " "
+        ] }),
+        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, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item }) }, `${item.src}-${i}`)) }) }),
+    /* @__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}-${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__ */ 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,
-  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__ */ 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: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }),
+        author.verified ? /* @__PURE__ */ jsxRuntime.jsx(md.MdVerified, { size: 13, "aria-label": "Verified", role: "img", style: { color: "#fff" } }) : null
+      ] }),
+      body ? /* @__PURE__ */ jsxRuntime.jsx("div", { 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,
+  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__ */ 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 +2379,7 @@ function Media2({
         muted: true,
         loop: true,
         playsInline: true,
-        style: coverStyle2
+        style: coverStyle3
       }
     );
   }
@@ -2037,11 +2406,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
@@ -2056,7 +2425,7 @@ function ProcessingMedia() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
   ] });
 }
-var coverStyle2 = {
+var coverStyle3 = {
   position: "absolute",
   inset: 0,
   width: "100%",
@@ -2072,13 +2441,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 +2456,7 @@ var dotsStyle = {
   gap: 5,
   alignItems: "center"
 };
-var dotStyle = {
+var dotStyle2 = {
   width: 6,
   height: 6,
   borderRadius: "50%",
@@ -2182,16 +2551,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 +2570,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 +2591,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 +2609,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 +2636,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 +2653,7 @@ var musicRowStyle = {
   fontSize: 13,
   marginTop: 4
 };
-var railStyle = {
+var railStyle2 = {
   position: "absolute",
   right: 8,
   bottom: 14,
@@ -2298,7 +2667,7 @@ var avatarWrapStyle = {
   position: "relative",
   marginBottom: 8
 };
-var avatarStyle = {
+var avatarStyle2 = {
   width: 46,
   height: 46,
   borderRadius: "50%",
@@ -2361,6 +2730,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 +2739,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] = 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;
+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,
@@ -2427,7 +2765,7 @@ function Row({
   control,
   htmlFor
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle3, 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
@@ -2499,7 +2837,7 @@ function CheckRow({
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: label })
   ] });
 }
-var rowStyle = {
+var rowStyle3 = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
@@ -2604,7 +2942,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 +2950,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 +2970,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 +3132,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 +3141,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 +3249,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;