@postrun/react 2.3.0 → 2.4.0

package/dist/index.js

@@ -1,7 +1,8 @@
 "use client";
-import { createContext, memo, useMemo, useState, useEffect, Fragment as Fragment$1, useRef, createElement, useContext, useCallback } from 'react';
+import { createContext, memo, useMemo, useState, useEffect, useRef, useLayoutEffect, Fragment as Fragment$1, useCallback, createElement, useContext, useId } from 'react';
 import { useInfiniteQuery, useQuery, useMutation, QueryClient } from '@tanstack/react-query';
-import { 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, mediaCreate, PostrunError } from '@postrun/js';
+import { 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';
 import Nango, { AuthError } from '@nangohq/frontend';
 import pWaitFor, { TimeoutError } from 'p-wait-for';
 import pLimit from 'p-limit';
@@ -12,6 +13,8 @@ import { FiMessageCircle, FiRepeat, FiHeart, FiBarChart2, FiShare, FiGlobe, FiUs
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import twitterText from 'twitter-text';
 import { LuBadgeCheck } from 'react-icons/lu';
+import useEmblaCarousel from 'embla-carousel-react';
+import { IoMusicalNotes } from 'react-icons/io5';
 
 // src/context.tsx
 function createDefaultQueryClient() {
@@ -1041,7 +1044,7 @@ var ACTIONS = [
   { label: "Share", Icon: FiShare }
 ];
 function XPreviewActions() {
-  return /* @__PURE__ */ jsx("div", { style: ROW, children: ACTIONS.map(({ label, Icon }) => /* @__PURE__ */ jsx(Icon, { size: 18, "aria-label": label, role: "img" }, label)) });
+  return /* @__PURE__ */ jsx("div", { style: ROW, children: ACTIONS.map(({ label, Icon: Icon2 }) => /* @__PURE__ */ jsx(Icon2, { size: 18, "aria-label": label, role: "img" }, label)) });
 }
 var {
   extractCashtagsWithIndices,
@@ -1351,8 +1354,8 @@ var ACTIONS2 = [
   { label: "Send", Icon: FiSend }
 ];
 function EngagementBar() {
-  return /* @__PURE__ */ jsx("div", { style: ROW2, children: ACTIONS2.map(({ label, Icon }) => /* @__PURE__ */ jsxs("span", { style: ITEM, children: [
-    /* @__PURE__ */ jsx(Icon, { size: 20, "aria-hidden": true }),
+  return /* @__PURE__ */ jsx("div", { style: ROW2, children: ACTIONS2.map(({ label, Icon: Icon2 }) => /* @__PURE__ */ jsxs("span", { style: ITEM, children: [
+    /* @__PURE__ */ jsx(Icon2, { size: 20, "aria-hidden": true }),
     label
   ] }, label)) });
 }
@@ -1658,7 +1661,7 @@ function LinkedInPostPreviewImpl({
     accent: varRef(LI_VAR.accent),
     muted: varRef(LI_VAR.muted)
   };
-  const cardStyle = {
+  const cardStyle2 = {
     ...paletteVars(dark),
     background: varRef(LI_VAR.bg),
     color: varRef(LI_VAR.text),
@@ -1669,7 +1672,7 @@ function LinkedInPostPreviewImpl({
     fontFamily: FONT_STACK,
     ...style
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle2, children: [
     /* @__PURE__ */ jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsx(
       PostBody,
@@ -1684,7 +1687,974 @@ function LinkedInPostPreviewImpl({
   ] });
 }
 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 }) {
+  const [expanded, setExpanded] = useState(false);
+  const [overflowing, setOverflowing] = useState(false);
+  const ref = useRef(null);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || expanded) {
+      return;
+    }
+    setOverflowing(el.scrollHeight > el.clientHeight + 1);
+  }, [body, expanded]);
+  const parts = body.split(TOKEN);
+  return /* @__PURE__ */ jsxs("div", { style: wrapStyle, 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)
+    ) }),
+    overflowing || expanded ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-expanded": expanded,
+        "aria-label": expanded ? "Collapse caption" : "Expand caption",
+        onClick: () => setExpanded((v) => !v),
+        style: moreStyle,
+        children: expanded ? "less" : "more"
+      }
+    ) : null
+  ] });
+}
+var wrapStyle = {
+  fontSize: 14,
+  lineHeight: 1.35
+};
+var clampedTextStyle = {
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word"
+};
+var expandedTextStyle = {
+  maxHeight: 180,
+  overflowY: "auto",
+  whiteSpace: "pre-wrap",
+  wordBreak: "break-word",
+  overscrollBehavior: "contain"
+};
+var moreStyle = {
+  display: "inline-block",
+  marginTop: 2,
+  padding: 0,
+  border: 0,
+  background: "transparent",
+  color: "rgba(255,255,255,0.82)",
+  fontSize: 13,
+  fontWeight: 600,
+  cursor: "pointer",
+  fontFamily: "inherit"
+};
+function Media2({
+  media,
+  pending = false
+}) {
+  const [first] = media;
+  if (!first) {
+    return pending ? /* @__PURE__ */ jsx(ProcessingMedia, {}) : /* @__PURE__ */ jsx(EmptyMedia, {});
+  }
+  if (first.kind === "video") {
+    return /* @__PURE__ */ jsx(
+      "video",
+      {
+        src: first.src,
+        poster: first.posterSrc,
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        playsInline: true,
+        style: coverStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(PhotoCarousel, { media });
+}
+function PhotoCarousel({ media }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: "start",
+    containScroll: "trimSnaps"
+  });
+  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: { 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: coverStyle }) }, `${m.src}-${i}`)) }) }),
+    media.length > 1 ? /* @__PURE__ */ jsx("div", { style: dotsStyle, children: media.map((m, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: { ...dotStyle, opacity: i === selected ? 1 : 0.4 }
+      },
+      `dot-${m.src}-${i}`
+    )) }) : null
+  ] });
+}
+function EmptyMedia() {
+  return /* @__PURE__ */ jsx("div", { style: emptyStyle, children: "No media yet" });
+}
+function ProcessingMedia() {
+  return /* @__PURE__ */ jsxs("div", { style: emptyStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: shimmerStyle }),
+    /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
+  ] });
+}
+var coverStyle = {
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+var viewportStyle = {
+  position: "absolute",
+  inset: 0,
+  overflow: "hidden"
+};
+var containerStyle = {
+  display: "flex",
+  height: "100%"
+};
+var slideStyle = {
+  position: "relative",
+  flex: "0 0 100%",
+  minWidth: 0,
+  height: "100%"
+};
+var dotsStyle = {
+  position: "absolute",
+  bottom: 124,
+  left: "50%",
+  transform: "translateX(-50%)",
+  display: "flex",
+  gap: 5,
+  alignItems: "center"
+};
+var dotStyle = {
+  width: 6,
+  height: 6,
+  borderRadius: "50%",
+  background: "#fff",
+  transition: "opacity 160ms ease"
+};
+var emptyStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "rgba(255,255,255,0.55)",
+  fontSize: 13,
+  background: "linear-gradient(180deg,#1c1c20,#101013)",
+  overflow: "hidden"
+};
+var shimmerStyle = {
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%)",
+  backgroundSize: "200% 100%",
+  animation: "pr-tt-shimmer 1.4s ease-in-out infinite"
+};
+var Icon = ({
+  size = 24,
+  viewBox,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: size,
+    height: size,
+    viewBox,
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...rest,
+    children
+  }
+);
+var HeartIcon = (p) => /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 24 24", ...p, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.5 2.25C10.5 2.25 12 4.25 12 4.25C12 4.25 13.5 2.25 16.5 2.25C20 2.25 22.5 4.99999 22.5 8.5C22.5 12.5 19.2311 16.0657 16.25 18.75C14.4095 20.4072 13 21.5 12 21.5C11 21.5 9.55051 20.3989 7.75 18.75C4.81949 16.0662 1.5 12.5 1.5 8.5C1.5 4.99999 4 2.25 7.5 2.25Z"
+  }
+) });
+var CommentIcon = (p) => /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 48 48", ...p, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 21.5c0-10.22 9.88-18 22-18s22 7.78 22 18c0 5.63-3.19 10.74-7.32 14.8a43.6 43.6 0 0 1-14.14 9.1A1.5 1.5 0 0 1 22.5 44v-5.04C11.13 38.4 2 31.34 2 21.5M14 25a3 3 0 1 0 0-6 3 3 0 0 0 0 6m10 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6m13-3a3 3 0 1 1-6 0 3 3 0 0 1 6 0"
+  }
+) });
+var BookmarkIcon = (p) => /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 24 24", ...p, children: /* @__PURE__ */ jsx("path", { d: "M4 4.5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v15.13a1 1 0 0 1-1.555.831l-6.167-4.12a.5.5 0 0 0-.556 0l-6.167 4.12A1 1 0 0 1 4 19.63z" }) });
+var ShareIcon = (p) => /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 20 20", ...p, children: /* @__PURE__ */ jsx(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.938 3.175a.674.674 0 0 1 1.138-.488l6.526 6.215c.574.547.554 1.47-.043 1.991l-6.505 5.676a.674.674 0 0 1-1.116-.508V13.49s-6.985-1.258-9.225 2.854c-.209.384-1.023.518-.857-1.395.692-3.52 2.106-9.017 10.082-9.017z"
+  }
+) });
+var PlusIcon = (p) => /* @__PURE__ */ jsx(Icon, { viewBox: "0 0 48 48", ...p, children: /* @__PURE__ */ jsx("path", { d: "M26 7a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v15H7a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h15v15a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V26h15a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H26V7Z" }) });
+var DASH = "\u2011\u2011\u2011";
+function commercialLabel(settings) {
+  if (settings?.brand_content_toggle) {
+    return "Paid partnership";
+  }
+  if (settings?.brand_organic_toggle) {
+    return "Promotional content";
+  }
+  return null;
+}
+function TikTokPostPreviewImpl({
+  variant,
+  creatorInfo,
+  media,
+  className,
+  style
+}) {
+  const resolvedMedia = useResolvedMedia(
+    media,
+    variant.media,
+    altSignatureOf(variant.media)
+  );
+  const { creator } = creatorInfo;
+  const handle = creator.username || creator.nickname;
+  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: { ...cardStyle, ...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: usernameStyle, children: handle }),
+      variant.body ? /* @__PURE__ */ jsx(Caption, { 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
+      ] }) : null,
+      /* @__PURE__ */ jsxs("div", { style: musicRowStyle, children: [
+        /* @__PURE__ */ jsx(IoMusicalNotes, { size: 13 }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Original sound - ",
+          creator.nickname
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: railStyle, 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 }) })
+      ] }),
+      /* @__PURE__ */ jsx(RailAction, { icon: /* @__PURE__ */ jsx(HeartIcon, { size: 30 }), count: DASH }),
+      /* @__PURE__ */ jsx(RailAction, { icon: /* @__PURE__ */ jsx(CommentIcon, { size: 30 }), count: DASH }),
+      /* @__PURE__ */ jsx(RailAction, { icon: /* @__PURE__ */ jsx(BookmarkIcon, { size: 28 }), count: DASH }),
+      /* @__PURE__ */ jsx(RailAction, { icon: /* @__PURE__ */ jsx(ShareIcon, { size: 28 }), count: DASH }),
+      /* @__PURE__ */ jsx(Disc, { url: creator.avatar_url })
+    ] })
+  ] });
+}
+function RailAction({ icon, count }) {
+  return /* @__PURE__ */ jsxs("div", { style: railActionStyle, children: [
+    /* @__PURE__ */ jsx("span", { style: railIconStyle, children: icon }),
+    /* @__PURE__ */ jsx("span", { style: railCountStyle, children: count })
+  ] });
+}
+function Avatar({ url, name }) {
+  if (url) {
+    return /* @__PURE__ */ jsx("img", { src: url, alt: name, style: avatarStyle });
+  }
+  return /* @__PURE__ */ jsx("div", { style: { ...avatarStyle, ...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 cardStyle = {
+  position: "relative",
+  width: "100%",
+  maxWidth: 320,
+  aspectRatio: "9 / 16",
+  borderRadius: 16,
+  overflow: "hidden",
+  background: "#000",
+  color: "#fff",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+};
+var scrimStyle = {
+  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 = {
+  position: "absolute",
+  left: 14,
+  right: 70,
+  bottom: 14,
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  textShadow: "0 1px 3px rgba(0,0,0,0.5)"
+};
+var usernameStyle = {
+  fontWeight: 600,
+  fontSize: 16
+};
+var labelsStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: 4,
+  marginTop: 2
+};
+var pillStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  background: "rgba(255,255,255,0.18)",
+  color: "#fff",
+  fontSize: 11,
+  fontWeight: 500,
+  padding: "2px 7px",
+  borderRadius: 4
+};
+var musicRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  fontSize: 13,
+  marginTop: 4
+};
+var railStyle = {
+  position: "absolute",
+  right: 8,
+  bottom: 14,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  color: "#fff"
+};
+var avatarWrapStyle = {
+  position: "relative",
+  marginBottom: 8
+};
+var avatarStyle = {
+  width: 46,
+  height: 46,
+  borderRadius: "50%",
+  objectFit: "cover",
+  display: "block",
+  border: "1px solid rgba(255,255,255,0.2)"
+};
+var avatarFallbackStyle = {
+  display: "grid",
+  placeItems: "center",
+  background: "#3a3a40",
+  color: "#fff",
+  fontSize: 18,
+  fontWeight: 700
+};
+var followBadgeStyle = {
+  position: "absolute",
+  bottom: -9,
+  left: "50%",
+  transform: "translateX(-50%)",
+  width: 19,
+  height: 19,
+  borderRadius: "50%",
+  background: "#fe2c55",
+  color: "#fff",
+  display: "grid",
+  placeItems: "center"
+};
+var railActionStyle = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 3
+};
+var railIconStyle = {
+  display: "grid",
+  placeItems: "center",
+  filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.4))"
+};
+var railCountStyle = {
+  fontSize: 12,
+  fontWeight: 600,
+  textShadow: "0 1px 2px rgba(0,0,0,0.4)"
+};
+var discStyle = {
+  width: 44,
+  height: 44,
+  borderRadius: "50%",
+  background: "radial-gradient(circle, #555 0 36%, #111 37% 100%)",
+  display: "grid",
+  placeItems: "center",
+  marginTop: 2,
+  animation: "pr-tt-spin 4s linear infinite"
+};
+var discImgStyle = {
+  width: 22,
+  height: 22,
+  borderRadius: "50%",
+  objectFit: "cover"
+};
+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);
+var TT_VAR = {
+  text: "--pr-tt-text",
+  muted: "--pr-tt-muted",
+  border: "--pr-tt-border",
+  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) {
+  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] = 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 useIsDark2(theme) {
+  const prefersDark = usePrefersDark2();
+  if (theme === "auto") {
+    return prefersDark;
+  }
+  return theme === "dark";
+}
+var MUTED = varRef2(TT_VAR.muted);
+var BORDER = varRef2(TT_VAR.border);
+var ACCENT = varRef2(TT_VAR.accent);
+var SWITCH_OFF = varRef2(TT_VAR.switchOff);
+var ON = "#34c759";
+function Row({
+  label,
+  sublabel,
+  control,
+  htmlFor
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: rowStyle, 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: MUTED }, children: sublabel }) : null
+    ] }),
+    control
+  ] });
+}
+function Switch({
+  checked,
+  onChange,
+  disabled,
+  id,
+  ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id,
+      "aria-label": ariaLabel,
+      "aria-checked": checked,
+      disabled,
+      onClick: () => onChange(!checked),
+      style: {
+        ...switchTrackStyle,
+        background: checked ? ON : SWITCH_OFF,
+        opacity: disabled ? 0.4 : 1,
+        cursor: disabled ? "not-allowed" : "pointer"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            ...switchKnobStyle,
+            transform: checked ? "translateX(16px)" : "translateX(0)"
+          }
+        }
+      )
+    }
+  );
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx("div", { style: sectionLabelStyle, children });
+}
+function Hint({ children }) {
+  return /* @__PURE__ */ jsx("p", { style: hintStyle, children });
+}
+function Notice({ children }) {
+  return /* @__PURE__ */ jsx("p", { style: noticeStyle, children });
+}
+function CheckRow({
+  label,
+  checked,
+  onChange
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("label", { htmlFor: id, style: checkRowStyle, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        checked,
+        onChange: (e) => onChange(e.target.checked),
+        style: { accentColor: ACCENT, width: 16, height: 16 }
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: label })
+  ] });
+}
+var rowStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 12,
+  minHeight: 36
+};
+var switchTrackStyle = {
+  position: "relative",
+  width: 40,
+  height: 24,
+  borderRadius: 999,
+  border: 0,
+  padding: 2,
+  flex: "0 0 auto",
+  transition: "background 160ms ease"
+};
+var switchKnobStyle = {
+  display: "block",
+  width: 20,
+  height: 20,
+  borderRadius: "50%",
+  background: "#fff",
+  boxShadow: "0 1px 2px rgba(0,0,0,0.3)",
+  transition: "transform 160ms ease"
+};
+var sectionLabelStyle = {
+  fontSize: 13,
+  fontWeight: 600
+};
+var hintStyle = {
+  margin: 0,
+  fontSize: 12,
+  color: ACCENT,
+  lineHeight: 1.4
+};
+var noticeStyle = {
+  margin: 0,
+  fontSize: 12,
+  color: MUTED,
+  lineHeight: 1.4
+};
+var checkRowStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 10,
+  cursor: "pointer"
+};
+var TOKENS = { MUTED, BORDER, ACCENT};
+function AudienceSelect({
+  creatorInfo,
+  value,
+  onChange
+}) {
+  const id = useId();
+  const options = audiencePrivacyOptions(creatorInfo.privacy_options, value);
+  const unselected = audienceUnselected(value);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(SectionLabel, { children: "Who can view this post" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        value: value.privacy_level ?? "",
+        onChange: (e) => onChange({
+          ...value,
+          // Validate against the OFFERED (filtered) options, not the full set —
+          // so a manipulated value (e.g. SELF_ONLY while branded) can't slip in.
+          privacy_level: parsePrivacyLevel(e.target.value, options)
+        }),
+        style: selectStyle,
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select who can view this post" }),
+          options.map((level) => /* @__PURE__ */ jsx("option", { value: level, children: tiktokPrivacyLabel(level) }, level))
+        ]
+      }
+    ),
+    unselected ? /* @__PURE__ */ jsx(Hint, { children: TIKTOK_AUDIENCE_REQUIRED_HINT }) : null
+  ] });
+}
+var selectStyle = {
+  width: "100%",
+  appearance: "none",
+  background: "transparent",
+  color: "inherit",
+  border: `1px solid ${TOKENS.BORDER}`,
+  borderRadius: 10,
+  padding: "10px 12px",
+  fontSize: 14,
+  fontFamily: "inherit",
+  outline: "none",
+  cursor: "pointer"
+};
+function TikTokCaptionField({
+  value,
+  onChange,
+  postType,
+  placeholder = "Describe your post\u2026",
+  className,
+  style
+}) {
+  const id = useId();
+  const max = captionMaxFor(postType);
+  const count = value.length;
+  const over = count > max;
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...wrapStyle2, ...style }, children: [
+    /* @__PURE__ */ jsxs("div", { style: labelRowStyle, children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          style: {
+            ...countStyle,
+            color: over ? varRef2(TT_VAR.accent) : varRef2(TT_VAR.muted)
+          },
+          children: [
+            count.toLocaleString(),
+            " / ",
+            max.toLocaleString()
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        placeholder,
+        rows: 4,
+        style: {
+          ...textareaStyle,
+          borderColor: over ? varRef2(TT_VAR.accent) : varRef2(TT_VAR.border)
+        }
+      }
+    )
+  ] });
+}
+var wrapStyle2 = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 6,
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+};
+var labelRowStyle = {
+  display: "flex",
+  alignItems: "baseline",
+  justifyContent: "space-between"
+};
+var labelStyle = {
+  fontSize: 13,
+  fontWeight: 600,
+  color: "inherit"
+};
+var countStyle = {
+  fontSize: 12,
+  fontVariantNumeric: "tabular-nums"
+};
+var textareaStyle = {
+  width: "100%",
+  resize: "vertical",
+  background: "transparent",
+  color: "inherit",
+  border: "1px solid rgba(255,255,255,0.14)",
+  borderRadius: 10,
+  padding: "10px 12px",
+  fontSize: 14,
+  lineHeight: 1.4,
+  fontFamily: "inherit",
+  outline: "none",
+  boxSizing: "border-box"
+};
+function CommercialDisclosure({
+  value,
+  onChange
+}) {
+  const labelNotice = commercialLabelNotice(value);
+  const incomplete = commercialDisclosureIncomplete(value);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(SectionLabel, { children: "Disclose post content" }),
+    /* @__PURE__ */ jsx(
+      Row,
+      {
+        label: "Disclose commercial content",
+        sublabel: "Turn on if this post promotes a brand, product, or service.",
+        control: /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: value.commercial_disclosure,
+            ariaLabel: "Disclose commercial content",
+            onChange: (next) => onChange(setCommercialDisclosure(value, next))
+          }
+        )
+      }
+    ),
+    value.commercial_disclosure ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, paddingLeft: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        CheckRow,
+        {
+          label: "Your brand",
+          checked: value.your_brand,
+          onChange: (next) => onChange(setBrandKind(value, "your_brand", next))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CheckRow,
+        {
+          label: "Branded content",
+          checked: value.branded_content,
+          onChange: (next) => onChange(setBrandKind(value, "branded_content", next))
+        }
+      ),
+      incomplete ? /* @__PURE__ */ jsx(Hint, { children: TIKTOK_DISCLOSURE_REQUIRED_HINT }) : null,
+      labelNotice ? /* @__PURE__ */ jsx(Notice, { children: labelNotice }) : null
+    ] }) : null
+  ] });
+}
+function Declaration({ brandedContent }) {
+  return /* @__PURE__ */ jsxs("p", { style: declarationStyle, children: [
+    "By posting, you agree to TikTok's",
+    " ",
+    brandedContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DeclarationLink, { href: TIKTOK_BRANDED_CONTENT_POLICY_URL, children: "Branded Content Policy" }),
+      " ",
+      "and",
+      " "
+    ] }) : null,
+    /* @__PURE__ */ jsx(DeclarationLink, { href: TIKTOK_MUSIC_CONFIRMATION_URL, children: "Music Usage Confirmation" }),
+    "."
+  ] });
+}
+function DeclarationLink({ href, children }) {
+  return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer", style: linkStyle2, children });
+}
+var declarationStyle = {
+  margin: 0,
+  fontSize: 12,
+  color: TOKENS.MUTED,
+  lineHeight: 1.45
+};
+var linkStyle2 = {
+  color: "inherit",
+  textDecoration: "underline"
+};
+function InteractionToggles({
+  creatorInfo,
+  value,
+  onChange,
+  isVideo
+}) {
+  const rows = interactionRows(creatorInfo, isVideo);
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    /* @__PURE__ */ jsx(SectionLabel, { children: "Allow users to" }),
+    rows.map((row) => {
+      const on = Boolean(value[interactionValueKey(row.key)]);
+      return /* @__PURE__ */ jsx(
+        Row,
+        {
+          label: row.label,
+          sublabel: row.disabled ? "Turned off by this creator" : void 0,
+          control: /* @__PURE__ */ jsx(
+            Switch,
+            {
+              checked: !row.disabled && on,
+              disabled: row.disabled,
+              ariaLabel: `Allow ${row.label}`,
+              onChange: (next) => onChange(toggleInteraction(value, row.key, next))
+            }
+          )
+        },
+        row.key
+      );
+    })
+  ] });
+}
+function mediaCountValid(postType, count) {
+  if (postType === "carousel") {
+    return count >= 2 && count <= 35;
+  }
+  return count === 1;
+}
+function TikTokPublishPanel({
+  variant,
+  creatorInfo,
+  caption,
+  onCaptionChange,
+  options,
+  onOptionsChange,
+  onPost,
+  posting = false,
+  theme = "auto",
+  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);
+  const ready = !captionOver && mediaOk && tiktokOptionsReady(options);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        ...paletteVars2(dark),
+        ...panelStyle,
+        color: varRef2(TT_VAR.text),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          TikTokCaptionField,
+          {
+            value: caption,
+            onChange: onCaptionChange,
+            postType: variant.post_type
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(AudienceSelect, { creatorInfo, value: options, onChange: onOptionsChange }),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(
+          InteractionToggles,
+          {
+            creatorInfo,
+            value: options,
+            onChange: onOptionsChange,
+            isVideo
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(CommercialDisclosure, { value: options, onChange: onOptionsChange }),
+        isVideo ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Divider, {}),
+          /* @__PURE__ */ jsx(
+            Row,
+            {
+              label: "AI-generated content",
+              sublabel: "Disclose if this video was created or substantially edited with AI.",
+              control: /* @__PURE__ */ jsx(
+                Switch,
+                {
+                  checked: options.aigc,
+                  ariaLabel: "AI-generated content",
+                  onChange: (next) => onOptionsChange({ ...options, aigc: next })
+                }
+              )
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(Divider, {}),
+        /* @__PURE__ */ jsx(Notice, { children: TIKTOK_PROCESSING_NOTICE }),
+        /* @__PURE__ */ jsx(Declaration, { brandedContent: brandedContentDeclared(options) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled: !ready || posting,
+            onClick: onPost,
+            style: {
+              ...postButtonStyle,
+              opacity: !ready || posting ? 0.5 : 1,
+              cursor: !ready || posting ? "not-allowed" : "pointer"
+            },
+            children: posting ? "Posting\u2026" : "Post"
+          }
+        )
+      ]
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx("div", { style: dividerStyle });
+}
+var panelStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 16,
+  width: "100%",
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+};
+var dividerStyle = {
+  height: 1,
+  background: TOKENS.BORDER
+};
+var postButtonStyle = {
+  width: "100%",
+  border: 0,
+  borderRadius: 10,
+  background: TOKENS.ACCENT,
+  color: "#fff",
+  fontSize: 15,
+  fontWeight: 600,
+  padding: "12px 16px",
+  transition: "opacity 160ms ease"
+};
 
-export { Connect, LinkedInPostPreview, PostrunProvider, UploadError, 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 { AudienceSelect, CommercialDisclosure, Connect, Declaration, InteractionToggles, LinkedInPostPreview, PostrunProvider, TikTokCaptionField, TikTokPostPreview, TikTokPublishPanel, UploadError, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map