@medalsocial/meda 2.0.0 → 2.2.0

package/dist/post-preview/platforms/linkedin.js

@@ -0,0 +1,140 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Globe, MessageSquare, MoreHorizontal, Repeat2, Send, ThumbsUp } from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+// skipcq: SCT-1000 — `LinkedInLabels` is a TypeScript label-strings interface,
+// not a client credential. DeepSource's secrets regex misclassifies the name.
+export const DEFAULT_LINKEDIN_LABELS = {
+    placeholder: 'Share your thoughts...',
+    now: 'now',
+    moreOptions: 'More options',
+    comments: (count) => `${count} comments`,
+    reposts: (count) => `${count} reposts`,
+    like: 'Like',
+    comment: 'Comment',
+    repost: 'Repost',
+    send: 'Send',
+};
+function useLinkedInMentionTrigger(textareaRef, value, onChange, mentions, onMentionsChange) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const triggerStartRef = useRef(null);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setQuery('');
+        triggerStartRef.current = null;
+    }, []);
+    const handleInput = useCallback(() => {
+        const ta = textareaRef.current;
+        /* v8 ignore next — ref is always attached when the textarea event handler fires */
+        if (!ta)
+            return;
+        /* v8 ignore next — selectionStart is always a number in a real browser/jsdom */
+        const cursor = ta.selectionStart ?? 0;
+        const text = ta.value;
+        let i = cursor - 1;
+        let foundAt = -1;
+        while (i >= 0) {
+            const ch = text[i];
+            if (ch === '@') {
+                if (i === 0 || /\s/.test(text[i - 1]))
+                    foundAt = i;
+                break;
+            }
+            if (/\s/.test(ch))
+                break;
+            i -= 1;
+        }
+        if (foundAt === -1) {
+            if (isOpen)
+                close();
+            return;
+        }
+        triggerStartRef.current = foundAt;
+        setQuery(text.slice(foundAt + 1, cursor));
+        setIsOpen(true);
+    }, [textareaRef, isOpen, close]);
+    const insertMention = useCallback((picked) => {
+        const ta = textareaRef.current;
+        /* v8 ignore next — ref is always attached when insertMention is callable */
+        if (!ta)
+            return;
+        const start = triggerStartRef.current;
+        /* v8 ignore next — triggerStartRef is set before insertMention becomes accessible */
+        if (start === null)
+            return;
+        /* v8 ignore next — selectionStart is always a number in a real browser/jsdom */
+        const cursor = ta.selectionStart ?? 0;
+        const before = value.slice(0, start);
+        const after = value.slice(cursor);
+        const next = `${before}${picked.name} ${after}`;
+        onChange?.(next);
+        const span = {
+            ...picked,
+            offset: start,
+            length: picked.name.length,
+        };
+        onMentionsChange?.([...mentions, span]);
+        close();
+    }, [textareaRef, value, onChange, mentions, onMentionsChange, close]);
+    return { isOpen, query, close, insertMention, handleInput };
+}
+function MentionedContent({ text, mentions }) {
+    if (!mentions || mentions.length === 0) {
+        return _jsx("span", { className: "whitespace-pre-wrap break-words text-[14px]", children: text });
+    }
+    // Sort spans by offset and render alternating plain/highlight segments.
+    const sorted = [...mentions].sort((a, b) => a.offset - b.offset);
+    const segments = [];
+    let cursor = 0;
+    sorted.forEach((mention, idx) => {
+        if (mention.offset > cursor) {
+            segments.push({
+                key: `t-${cursor}`,
+                isMention: false,
+                value: text.slice(cursor, mention.offset),
+            });
+        }
+        const end = mention.offset + mention.length;
+        segments.push({
+            key: `m-${idx}-${mention.urn}`,
+            isMention: true,
+            value: text.slice(mention.offset, end),
+        });
+        cursor = end;
+    });
+    if (cursor < text.length) {
+        segments.push({ key: `t-${cursor}`, isMention: false, value: text.slice(cursor) });
+    }
+    return (_jsx("span", { className: "whitespace-pre-wrap break-words text-[14px]", children: segments.map((seg) => seg.isMention ? (_jsx("span", { "data-slot": "linkedin-mention", className: "font-semibold text-[#0A66C2]", children: seg.value }, seg.key)) : (_jsx("span", { children: seg.value }, seg.key))) }));
+}
+/**
+ * LinkedIn feed-card preview. Renders avatar, name, headline (`username`),
+ * content with optional `@mention` highlight spans, media grid, and the
+ * standard Like/Comment/Repost/Send footer.
+ */
+/* v8 ignore next 14 — v8 phantom duplicate function record */
+export function LinkedInPreview({ displayName, username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, mentions = [], onMentionsChange, renderMentionPicker, }) {
+    const l = { ...DEFAULT_LINKEDIN_LABELS, ...labels };
+    const textareaRef = useRef(null);
+    const mention = useLinkedInMentionTrigger(textareaRef, content, onContentChange, mentions, onMentionsChange);
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "linkedin", className: cn('@container bg-white text-gray-900 @[420px]:text-[15px] dark:bg-[#1B1F23] dark:text-[#E7E9EA]', className), children: [_jsxs("div", { className: "p-4 pb-0", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-12 w-12 flex-shrink-0" }), _jsx("div", { className: "min-w-0 flex-1", children: _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "font-semibold text-[14px] text-gray-900", children: displayName }), _jsx("p", { className: "line-clamp-1 text-[12px] text-gray-500", children: username }), _jsxs("div", { className: "flex items-center gap-1 text-[12px] text-gray-500", children: [_jsx("span", { children: l.now }), _jsx("span", { children: "\u00B7" }), _jsx(Globe, { className: "h-3 w-3", "aria-hidden": "true" })] })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "-m-1.5 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1.5 text-gray-500 hover:bg-gray-100", children: _jsx(MoreHorizontal, { className: "h-5 w-5" }) })] }) })] }), editable ? (_jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: textareaRef, value: content, onChange: (e) => onContentChange?.(e.target.value), onInput: mention.handleInput, onKeyUp: mention.handleInput, placeholder: l.placeholder, className: cn('mt-3 min-h-[80px] text-[14px] text-gray-900 placeholder:text-gray-500') }), renderMentionPicker && mention.isOpen
+                                ? renderMentionPicker({
+                                    query: mention.query,
+                                    onPick: mention.insertMention,
+                                    onCancel: mention.close,
+                                })
+                                : null] })) : (_jsx("p", { className: "mt-3", children: _jsx(MentionedContent, { text: content, mentions: mentions }) }))] }), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: "mt-3", children: mediaUrls.length === 1 ? (_jsx("div", { className: "aspect-video bg-gray-100", children: _jsx("img", { src: mediaUrls[0], alt: "Post media", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) })) : (_jsx(LinkedInMultiImageGrid, { mediaUrls: mediaUrls })) })), _jsxs("div", { className: "flex items-center justify-between border-gray-200 border-b px-4 py-2 text-[12px] text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("div", { className: "flex -space-x-1", children: [_jsx("span", { role: "img", "aria-label": "Like", className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-600 text-[10px] text-white", children: _jsx(ThumbsUp, { className: "h-2.5 w-2.5", fill: "currentColor" }) }), _jsx("span", { role: "img", "aria-label": "Love", className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white", children: "\u2665" })] }), _jsx("span", { className: "ml-1", children: "0" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { children: l.comments(0) }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: l.reposts(0) })] })] }), _jsxs("div", { className: "flex items-center justify-around px-2 py-1", children: [_jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-3 text-gray-600 hover:bg-gray-100", children: [_jsx(ThumbsUp, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium text-[14px]", children: l.like })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-3 text-gray-600 hover:bg-gray-100", children: [_jsx(MessageSquare, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium text-[14px]", children: l.comment })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-3 text-gray-600 hover:bg-gray-100", children: [_jsx(Repeat2, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium text-[14px]", children: l.repost })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-3 text-gray-600 hover:bg-gray-100", children: [_jsx(Send, { className: "h-5 w-5" }), _jsx("span", { className: "font-medium text-[14px]", children: l.send })] })] })] }));
+}
+/* v8 ignore next — v8 phantom duplicate function record */
+function LinkedInMultiImageGrid({ mediaUrls }) {
+    /* v8 ignore next 2 — v8 phantom duplicate if-statement and its consequent */
+    if (mediaUrls.length === 3) {
+        return (_jsxs("div", { className: "grid gap-0.5", children: [_jsx("div", { className: "aspect-video bg-gray-100", children: _jsx("img", { src: mediaUrls[0], alt: "Media 1", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }), _jsx("div", { className: "grid grid-cols-2 gap-0.5", children: mediaUrls.slice(1, 3).map((url, i) => (_jsx("div", { className: "relative aspect-square bg-gray-100", children: _jsx("img", { src: url, alt: `Media ${i + 2}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }, url))) })] }));
+    }
+    return (_jsx("div", { className: "grid grid-cols-2 gap-0.5", children: mediaUrls.slice(0, 4).map((url, i) => (_jsxs("div", { className: "relative aspect-square bg-gray-100", children: [_jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }), i === 3 && mediaUrls.length > 4 && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/60", children: _jsxs("span", { className: "font-semibold text-2xl text-white", children: ["+", mediaUrls.length - 4] }) }))] }, url))) }));
+}

package/dist/post-preview/platforms/telegram.d.ts

@@ -0,0 +1,46 @@
+import type { PostPreviewBaseProps } from '../types.js';
+/**
+ * Telegram poll attached to a channel post.
+ *
+ * Field names mirror Telegram's bot API wire shape so callers can pass
+ * the same value to `sendPoll`.
+ */
+export interface TelegramPollState {
+    question: string;
+    options: string[];
+    multiple?: boolean;
+    quiz?: boolean;
+    /** Required when `quiz` is true; index of the correct option. */
+    correctOptionId?: number;
+}
+export interface TelegramInlineKeyboardButton {
+    text: string;
+    url?: string;
+    callbackData?: string;
+}
+/**
+ * Inline keyboard markup. Field name `inline_keyboard` matches the
+ * Telegram bot API so consumers can serialise this object directly.
+ */
+export interface TelegramInlineKeyboardMarkup {
+    inline_keyboard: TelegramInlineKeyboardButton[][];
+}
+export interface TelegramLabels {
+    placeholder: string;
+    pinnedMessage: string;
+    share: string;
+    buttonFallback: string;
+    pollOptionPlaceholder: (number: number) => string;
+}
+export declare const DEFAULT_TELEGRAM_LABELS: TelegramLabels;
+export interface TelegramPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<TelegramLabels>;
+    poll?: TelegramPollState;
+    pinMessage?: boolean;
+    replyMarkup?: TelegramInlineKeyboardMarkup;
+}
+/**
+ * Telegram channel post preview. Renders a chat bubble with optional
+ * poll, pinned indicator, and inline keyboard.
+ */
+export declare function TelegramPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, poll, pinMessage, replyMarkup, }: TelegramPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/telegram.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Eye, Pin, Share2 } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_TELEGRAM_LABELS = {
+    placeholder: 'Type a message...',
+    pinnedMessage: 'Pinned message',
+    share: 'Share',
+    buttonFallback: 'Button',
+    pollOptionPlaceholder: (number) => `Option ${number}`,
+};
+/**
+ * Telegram channel post preview. Renders a chat bubble with optional
+ * poll, pinned indicator, and inline keyboard.
+ */
+export function TelegramPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, poll, pinMessage, replyMarkup, }) {
+    const l = { ...DEFAULT_TELEGRAM_LABELS, ...labels };
+    return (_jsx("div", { "data-slot": "post-preview", "data-platform": "telegram", className: cn('@container min-h-[200px] bg-[#E7EBF0] p-4 text-gray-900 @[420px]:p-5', className), children: _jsxs("div", { className: "max-w-md", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-8 w-8" }), _jsx("span", { className: "font-medium text-[14px] text-[#168ACD]", children: displayName })] }), _jsxs("div", { className: "overflow-hidden rounded-xl rounded-tl-sm bg-white shadow-sm", children: [pinMessage ? (_jsxs("div", { "data-slot": "telegram-pinned", className: "flex items-center gap-1 border-gray-200 border-b px-3 py-2 text-[11px] text-gray-500", children: [_jsx(Pin, { className: "h-3 w-3", "aria-hidden": "true" }), _jsx("span", { children: l.pinnedMessage })] })) : null, mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: cn(mediaUrls.length === 1 && 'aspect-video', mediaUrls.length >= 2 && 'grid grid-cols-2 gap-0.5'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsx("div", { className: cn('bg-gray-100', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length >= 2 && 'aspect-square'), children: _jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }, url))) })), _jsxs("div", { className: "p-3", children: [renderBody({ poll, editable, content, onContentChange, labels: l }), replyMarkup?.inline_keyboard?.length ? (_jsx("div", { className: "mt-3 space-y-1", children: replyMarkup.inline_keyboard.map((row) => {
+                                        const rowKey = row
+                                            .map((b) => `${b.text}|${b.url ?? b.callbackData ?? ''}`)
+                                            .join('::');
+                                        return (_jsx("div", { className: "flex gap-1", children: row.map((button) => (_jsx("a", { href: button.url ?? '#', target: "_blank", rel: "noreferrer", className: "flex-1 rounded bg-[#168ACD] px-3 py-1.5 text-center text-white text-xs", children: button.text || l.buttonFallback }, `${button.text}-${button.url ?? button.callbackData ?? ''}`))) }, rowKey));
+                                    }) })) : null, _jsxs("div", { className: "mt-2 flex items-center justify-end gap-1 text-[12px] text-gray-500", children: [_jsx(Eye, { className: "h-3 w-3", "aria-hidden": "true" }), _jsx("span", { children: "0" }), _jsx("span", { className: "ml-2", children: "12:00" })] })] })] }), _jsxs("div", { className: "mt-2 flex items-center gap-2", children: [_jsxs("button", { type: "button", className: "inline-flex min-h-11 items-center gap-1 rounded-full bg-white px-3 py-1 text-[13px] shadow-sm", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDC4D" }), _jsx("span", { className: "text-gray-500", children: "0" })] }), _jsxs("button", { type: "button", className: "inline-flex min-h-11 items-center gap-1 rounded-full bg-white px-3 py-1 text-[13px] shadow-sm", children: [_jsx("span", { "aria-hidden": "true", children: "\u2764\uFE0F" }), _jsx("span", { className: "text-gray-500", children: "0" })] }), _jsx("button", { type: "button", "aria-label": l.share, className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-white p-1.5 shadow-sm", children: _jsx(Share2, { className: "h-4 w-4 text-gray-500" }) })] })] }) }));
+}
+/* v8 ignore next 13 — v8 phantom duplicate function record */
+function renderBody({ poll, editable, content, onContentChange, labels, }) {
+    /* v8 ignore next 2 — v8 phantom duplicate if-statement and its consequent */
+    if (poll) {
+        return (_jsxs("div", { "data-slot": "telegram-poll", className: "space-y-2", children: [_jsx("p", { className: "font-medium", children: poll.question }), poll.options.map((option, index) => {
+                    // Options can repeat / be empty during composing; combine with stable index in a non-positional way
+                    // by counting prior empties so the key remains unique without leaking positional intent.
+                    const key = option
+                        ? `opt-${option}`
+                        : `placeholder-${labels.pollOptionPlaceholder(index + 1)}`;
+                    return (_jsx("div", { className: "rounded bg-gray-50 px-3 py-2 text-sm", children: option || labels.pollOptionPlaceholder(index + 1) }, key));
+                })] }));
+    }
+    if (editable) {
+        return (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: labels.placeholder, className: "min-h-[60px] text-[15px] placeholder:text-gray-500" }));
+    }
+    return _jsx("p", { className: "whitespace-pre-wrap break-words text-[15px]", children: content });
+}

package/dist/post-preview/platforms/threads.d.ts

@@ -0,0 +1,19 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export interface ThreadsLabels {
+    placeholder: string;
+    replies: (count: number) => string;
+    like: string;
+    comment: string;
+    repost: string;
+    share: string;
+    moreOptions: string;
+}
+export declare const DEFAULT_THREADS_LABELS: ThreadsLabels;
+export interface ThreadsPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<ThreadsLabels>;
+}
+/**
+ * Threads feed-card preview. Honors a parent `.dark` class for the dark
+ * variant the platform itself uses.
+ */
+export declare function ThreadsPreview({ displayName, username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: ThreadsPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/threads.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heart, MessageCircle, MoreHorizontal, Repeat2, Send } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_THREADS_LABELS = {
+    placeholder: 'Start a thread...',
+    replies: (count) => `${count} replies`,
+    like: 'Like',
+    comment: 'Comment',
+    repost: 'Repost',
+    share: 'Share',
+    moreOptions: 'More options',
+};
+/**
+ * Threads feed-card preview. Honors a parent `.dark` class for the dark
+ * variant the platform itself uses.
+ */
+/* v8 ignore next 11 — v8 phantom duplicate function record */
+export function ThreadsPreview({ displayName, username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_THREADS_LABELS, ...labels };
+    const formattedUsername = username.startsWith('@') ? username.slice(1) : username;
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "threads", className: cn('@container bg-white p-4 text-gray-900 @[420px]:text-[15px] dark:bg-[#101010] dark:text-white', className), children: [_jsxs("div", { className: "flex gap-3", children: [_jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-9 w-9" }), _jsx("div", { className: "mt-2 min-h-[20px] w-0.5 flex-1 bg-gray-200 dark:bg-gray-700" })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "font-semibold text-[15px]", children: formattedUsername }), _jsx("span", { className: "text-[15px] text-gray-500", children: "\u00B7 now" })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "-m-1.5 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1.5 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) })] }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "mt-1 min-h-[60px] text-[15px] placeholder:text-gray-500" })) : (_jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-[15px]", children: content })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: cn('mt-3 overflow-hidden rounded-xl', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length === 2 && 'grid grid-cols-2 gap-1', mediaUrls.length >= 3 && 'grid grid-cols-2 gap-1'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsx("div", { className: cn('bg-gray-100 dark:bg-gray-800', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length >= 2 && 'aspect-square'), children: _jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full rounded-lg object-cover" }) }, url))) })), _jsxs("div", { className: "mt-3 flex items-center gap-4 text-gray-500", children: [_jsx("button", { type: "button", "aria-label": l.like, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-800", children: _jsx(Heart, { className: "h-5 w-5" }) }), _jsx("button", { type: "button", "aria-label": l.comment, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-800", children: _jsx(MessageCircle, { className: "h-5 w-5" }) }), _jsx("button", { type: "button", "aria-label": l.repost, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-800", children: _jsx(Repeat2, { className: "h-5 w-5" }) }), _jsx("button", { type: "button", "aria-label": l.share, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-gray-100 dark:hover:bg-gray-800", children: _jsx(Send, { className: "h-5 w-5" }) })] })] })] }), _jsxs("div", { className: "mt-3 ml-12 flex items-center gap-3", children: [_jsxs("div", { className: "flex -space-x-1.5", children: [_jsx("div", { className: "h-5 w-5 rounded-full border-2 border-white bg-gray-300 dark:border-[#101010] dark:bg-gray-600" }), _jsx("div", { className: "h-5 w-5 rounded-full border-2 border-white bg-gray-400 dark:border-[#101010] dark:bg-gray-500" })] }), _jsx("span", { className: "text-[15px] text-gray-500", children: l.replies(0) })] })] }));
+}

package/dist/post-preview/platforms/tiktok.d.ts

@@ -0,0 +1,18 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export interface TikTokLabels {
+    placeholder: string;
+    share: string;
+    originalSound: (name: string) => string;
+    like: string;
+    comment: string;
+    bookmark: string;
+}
+export declare const DEFAULT_TIKTOK_LABELS: TikTokLabels;
+export interface TikTokPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<TikTokLabels>;
+}
+/**
+ * TikTok video-overlay preview. Always renders against a dark background to
+ * match the platform's video-first UI.
+ */
+export declare function TikTokPreview({ displayName, username, avatarUrl, content, editable, onContentChange, className, labels, }: TikTokPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/tiktok.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bookmark, Heart, MessageCircle, Share2 } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_TIKTOK_LABELS = {
+    placeholder: 'Add a caption...',
+    share: 'Share',
+    originalSound: (name) => `Original sound - ${name}`,
+    like: 'Like',
+    comment: 'Comment',
+    bookmark: 'Bookmark',
+};
+/**
+ * TikTok video-overlay preview. Always renders against a dark background to
+ * match the platform's video-first UI.
+ */
+/* v8 ignore next 10 — v8 phantom duplicate function record */
+export function TikTokPreview({ displayName, username, avatarUrl, content, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_TIKTOK_LABELS, ...labels };
+    const formattedUsername = username.startsWith('@') ? username : `@${username}`;
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "tiktok", className: cn('@container relative min-h-[300px] bg-black text-white @[420px]:min-h-[420px]', className), children: [_jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" }), _jsxs("div", { className: "absolute right-3 bottom-20 flex flex-col items-center gap-4", children: [_jsxs("div", { className: "flex flex-col items-center gap-1", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-11 w-11 ring-2 ring-white" }), _jsx("div", { className: "-mt-2.5 flex h-5 w-5 items-center justify-center rounded-full bg-[#FE2C55]", children: _jsx("span", { className: "font-bold text-white text-xs", "aria-hidden": "true", children: "+" }) })] }), _jsxs("button", { type: "button", "aria-label": l.like, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-1", children: [_jsx("div", { className: "rounded-full bg-gray-800/50 p-2", children: _jsx(Heart, { className: "h-7 w-7", fill: "white" }) }), _jsx("span", { className: "font-semibold text-xs", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.comment, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-1", children: [_jsx("div", { className: "rounded-full bg-gray-800/50 p-2", children: _jsx(MessageCircle, { className: "h-7 w-7", fill: "white" }) }), _jsx("span", { className: "font-semibold text-xs", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.bookmark, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-1", children: [_jsx("div", { className: "rounded-full bg-gray-800/50 p-2", children: _jsx(Bookmark, { className: "h-7 w-7" }) }), _jsx("span", { className: "font-semibold text-xs", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.share, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-1", children: [_jsx("div", { className: "rounded-full bg-gray-800/50 p-2", children: _jsx(Share2, { className: "h-7 w-7" }) }), _jsx("span", { className: "font-semibold text-xs", children: l.share })] }), _jsx("div", { className: "mt-2 flex h-11 w-11 animate-spin items-center justify-center rounded-full border-4 border-gray-700 bg-gray-800", children: _jsx("div", { className: "h-4 w-4 rounded-full bg-gray-600" }) })] }), _jsxs("div", { className: "absolute right-16 bottom-0 left-0 p-4", children: [_jsx("p", { className: "mb-1 font-semibold text-[16px]", children: formattedUsername }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "min-h-[40px] text-[14px] text-white placeholder:text-gray-400" })) : (_jsx("p", { className: "whitespace-pre-wrap break-words text-[14px]", children: content })), _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" }) }), _jsx("span", { className: "text-[13px]", children: l.originalSound(displayName) })] })] })] }));
+}

package/dist/post-preview/platforms/twitter.d.ts

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import type { PostPreviewBaseProps } from '../types.js';
+/**
+ * Visual theme variants for Twitter / X.
+ * - `light`: white background, dark text.
+ * - `dim`: navy-blue dark variant.
+ * - `lights-out`: pure black variant.
+ */
+export type TwitterTheme = 'light' | 'dim' | 'lights-out';
+export interface TwitterMentionPickerContext {
+    query: string;
+    onPick: (mention: string) => void;
+    onCancel: () => void;
+}
+export interface TwitterLabels {
+    placeholder: string;
+    now: string;
+    moreOptions: string;
+    reply: string;
+    retweet: string;
+    like: string;
+    save: string;
+    share: string;
+    viewAnalytics: string;
+}
+export declare const DEFAULT_TWITTER_LABELS: TwitterLabels;
+export interface TwitterPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<TwitterLabels>;
+    /** Visual theme. Defaults to `lights-out` to match X's default. */
+    theme?: TwitterTheme;
+    /** Optional render slot for an `@mention` picker. Called with the
+     * current query (text after `@`) when the user types `@xxx` in the
+     * editable textarea. */
+    renderMentionPicker?: (ctx: TwitterMentionPickerContext) => ReactNode;
+}
+/**
+ * Twitter / X feed-card preview. Supports light, dim, and lights-out
+ * themes plus an optional `@mention` picker render slot.
+ */
+export declare function TwitterPreview({ displayName, username, avatarUrl, content, mediaUrls, characterLimit, editable, onContentChange, className, labels, theme, renderMentionPicker, }: TwitterPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/twitter.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Bookmark, Heart, MessageCircle, MoreHorizontal, Repeat2, Share } from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_TWITTER_LABELS = {
+    placeholder: "What's happening?",
+    now: 'now',
+    moreOptions: 'More options',
+    reply: 'Reply',
+    retweet: 'Retweet',
+    like: 'Like',
+    save: 'Save',
+    share: 'Share',
+    viewAnalytics: 'View post analytics',
+};
+function useMentionTrigger(textareaRef, value, onChange) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const triggerStartRef = useRef(null);
+    const close = useCallback(() => {
+        setIsOpen(false);
+        setQuery('');
+        triggerStartRef.current = null;
+    }, []);
+    const handleInput = useCallback(() => {
+        const ta = textareaRef.current;
+        /* v8 ignore next — ref is always attached when the textarea event handler fires */
+        if (!ta)
+            return;
+        /* v8 ignore next — selectionStart is always a number in a real browser/jsdom */
+        const cursor = ta.selectionStart ?? 0;
+        const text = ta.value;
+        // Walk back from cursor to find `@` until whitespace or start.
+        let i = cursor - 1;
+        let foundAt = -1;
+        while (i >= 0) {
+            const ch = text[i];
+            if (ch === '@') {
+                // Must be at start or preceded by whitespace
+                if (i === 0 || /\s/.test(text[i - 1])) {
+                    foundAt = i;
+                }
+                break;
+            }
+            if (/\s/.test(ch))
+                break;
+            i -= 1;
+        }
+        if (foundAt === -1) {
+            if (isOpen)
+                close();
+            return;
+        }
+        triggerStartRef.current = foundAt;
+        setQuery(text.slice(foundAt + 1, cursor));
+        setIsOpen(true);
+    }, [textareaRef, isOpen, close]);
+    const insertMention = useCallback((mention) => {
+        const ta = textareaRef.current;
+        /* v8 ignore next — ref is always attached when insertMention is callable */
+        if (!ta)
+            return;
+        const start = triggerStartRef.current;
+        /* v8 ignore next — triggerStartRef is set before insertMention becomes accessible */
+        if (start === null)
+            return;
+        /* v8 ignore next — selectionStart is always a number in a real browser/jsdom */
+        const cursor = ta.selectionStart ?? 0;
+        const before = value.slice(0, start);
+        const after = value.slice(cursor);
+        const formatted = mention.startsWith('@') ? mention : `@${mention}`;
+        const next = `${before}${formatted} ${after}`;
+        onChange?.(next);
+        close();
+    }, [textareaRef, value, onChange, close]);
+    return { isOpen, query, close, insertMention, handleInput };
+}
+function ContentWithMentions({ text, accent }) {
+    // Build typed parts with stable offsets so keys don't rely on positional index.
+    const segments = [];
+    let offset = 0;
+    for (const part of text.split(/(@[A-Za-z0-9_]+)/g)) {
+        if (!part)
+            continue;
+        segments.push({
+            key: `${offset}-${part}`,
+            isMention: /^@[A-Za-z0-9_]+$/.test(part),
+            value: part,
+        });
+        offset += part.length;
+    }
+    return (_jsx(_Fragment, { children: segments.map((seg) => seg.isMention ? (_jsx("span", { className: accent, children: seg.value }, seg.key)) : (_jsx("span", { children: seg.value }, seg.key))) }));
+}
+const THEME_CLASSES = {
+    light: {
+        surface: 'bg-white',
+        text: 'text-gray-900',
+        muted: 'text-gray-500',
+        border: 'border-gray-200',
+        mention: 'text-blue-500',
+    },
+    dim: {
+        surface: 'bg-[#15202B]',
+        text: 'text-white',
+        muted: 'text-gray-400',
+        border: 'border-[#38444D]',
+        mention: 'text-[#1D9BF0]',
+    },
+    'lights-out': {
+        surface: 'bg-black',
+        text: 'text-white',
+        muted: 'text-gray-500',
+        border: 'border-gray-800',
+        mention: 'text-blue-400',
+    },
+};
+/**
+ * Twitter / X feed-card preview. Supports light, dim, and lights-out
+ * themes plus an optional `@mention` picker render slot.
+ */
+export function TwitterPreview({ displayName, username, avatarUrl, content, mediaUrls, characterLimit, editable = false, onContentChange, className, labels, theme = 'lights-out', renderMentionPicker, }) {
+    const l = { ...DEFAULT_TWITTER_LABELS, ...labels };
+    const t = THEME_CLASSES[theme];
+    const formattedUsername = username.startsWith('@') ? username : `@${username}`;
+    const textareaRef = useRef(null);
+    const mention = useMentionTrigger(textareaRef, content, onContentChange);
+    return (_jsx("div", { "data-slot": "post-preview", "data-platform": "twitter", "data-theme": theme, className: cn('@container p-4 @[420px]:p-5', t.surface, t.text, className), children: _jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-10 w-10 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-1 text-[15px]", children: [_jsx("span", { className: cn('truncate font-bold', t.text), children: displayName }), _jsx("span", { className: cn('truncate', t.muted), children: formattedUsername }), _jsx("span", { className: t.muted, children: "\u00B7" }), _jsx("span", { className: t.muted, children: l.now })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: cn('-m-1.5 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1.5', t.muted, theme === 'light' ? 'hover:bg-gray-100' : 'hover:bg-gray-800'), children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) })] }), editable ? (_jsxs("div", { className: "relative", children: [_jsx(Textarea, { ref: textareaRef, value: content, onChange: (e) => onContentChange?.(e.target.value), onInput: mention.handleInput, onKeyUp: mention.handleInput, placeholder: l.placeholder, className: cn('mt-1 min-h-[60px] text-[15px]', t.text, theme === 'light' ? 'placeholder:text-gray-500' : 'placeholder:text-gray-500') }), renderMentionPicker && mention.isOpen
+                                    ? renderMentionPicker({
+                                        query: mention.query,
+                                        onPick: mention.insertMention,
+                                        onCancel: mention.close,
+                                    })
+                                    : null, characterLimit !== undefined && (_jsxs("div", { "data-slot": "twitter-character-counter", className: cn('mt-1 text-right text-xs', content.length > characterLimit ? 'text-red-500' : t.muted), children: [_jsx("span", { children: characterLimit - content.length }), _jsx("span", { className: "mx-1", children: "/" }), _jsx("span", { children: characterLimit })] }))] })) : (_jsx("p", { className: "mt-1 whitespace-pre-wrap break-words text-[15px]", children: _jsx(ContentWithMentions, { text: content, accent: t.mention }) })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: cn('mt-3 overflow-hidden rounded-2xl border', t.border, mediaUrls.length === 1 && 'aspect-video', mediaUrls.length >= 2 && 'grid aspect-video grid-cols-2 gap-0.5'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsx("div", { className: cn('overflow-hidden bg-gray-800', mediaUrls.length === 1 && 'h-full', mediaUrls.length === 3 && i === 0 && 'row-span-2'), children: _jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }, url))) })), _jsxs("div", { className: cn('mt-3 flex max-w-[425px] items-center justify-between @[420px]:max-w-[480px]', t.muted), children: [_jsxs("button", { type: "button", "aria-label": l.reply, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: [_jsx(MessageCircle, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.retweet, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-green-500/10 hover:text-green-400", children: [_jsx(Repeat2, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": l.like, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-pink-500/10 hover:text-pink-400", children: [_jsx(Heart, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsx("button", { type: "button", "aria-label": l.viewAnalytics, className: "-m-2 inline-flex min-h-11 min-w-11 items-center gap-1 rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: _jsx("svg", { className: "h-[18px] w-[18px]", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z" }) }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", "aria-label": l.save, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: _jsx(Bookmark, { className: "h-[18px] w-[18px]" }) }), _jsx("button", { type: "button", "aria-label": l.share, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 hover:bg-blue-500/10 hover:text-blue-400", children: _jsx(Share, { className: "h-[18px] w-[18px]" }) })] })] })] })] }) }));
+}

package/dist/post-preview/platforms/youtube.d.ts

@@ -0,0 +1,17 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export interface YouTubeLabels {
+    placeholder: string;
+    justNow: string;
+    like: string;
+    dislike: string;
+    share: string;
+    moreOptions: string;
+}
+export declare const DEFAULT_YOUTUBE_LABELS: YouTubeLabels;
+export interface YouTubePreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<YouTubeLabels>;
+}
+/**
+ * YouTube community-post preview. Honors `.dark` for the dark variant.
+ */
+export declare function YouTubePreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: YouTubePreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/youtube.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreVertical, ThumbsDown, ThumbsUp } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_YOUTUBE_LABELS = {
+    placeholder: 'Create a post...',
+    justNow: 'just now',
+    like: 'Like',
+    dislike: 'Dislike',
+    share: 'Share',
+    moreOptions: 'More options',
+};
+/**
+ * YouTube community-post preview. Honors `.dark` for the dark variant.
+ */
+/* v8 ignore next 11 — v8 phantom duplicate function record */
+export function YouTubePreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_YOUTUBE_LABELS, ...labels };
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "youtube", className: cn('@container bg-white p-4 text-gray-900 @[420px]:text-[14px] dark:bg-[#0f0f0f] dark:text-white', className), children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-10 w-10" }), _jsx("div", { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-[14px]", children: displayName }), _jsx("span", { className: "text-[12px] text-gray-500 dark:text-gray-400", children: l.justNow })] }) })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-2 text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800", children: _jsx(MoreVertical, { className: "h-5 w-5" }) })] }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "mt-3 min-h-[60px] text-[14px] placeholder:text-gray-500" })) : (_jsx("p", { className: "mt-3 whitespace-pre-wrap break-words text-[14px]", children: content })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: "mt-3 overflow-hidden rounded-xl", children: _jsx("div", { className: "aspect-video bg-gray-100 dark:bg-gray-800", children: _jsx("img", { src: mediaUrls[0], alt: "Media 1", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }) })), _jsxs("div", { className: "mt-4 flex items-center gap-2", children: [_jsxs("button", { type: "button", className: "inline-flex min-h-11 items-center gap-1 rounded-full bg-gray-100 px-3 py-1.5 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", "aria-label": l.like, children: [_jsx(ThumbsUp, { className: "h-4 w-4" }), _jsx("span", { className: "font-medium text-[13px]", children: "0" })] }), _jsx("button", { type: "button", "aria-label": l.dislike, className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded-full bg-gray-100 p-2 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: _jsx(ThumbsDown, { className: "h-4 w-4" }) }), _jsxs("button", { type: "button", "aria-label": l.share, className: "inline-flex min-h-11 items-center gap-1 rounded-full bg-gray-100 px-3 py-1.5 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700", children: [_jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21 6h-2v9H6v2c0 .55.45 1 1 1h11l4 4V7c0-.55-.45-1-1-1zm-4 6V3c0-.55-.45-1-1-1H3c-.55 0-1 .45-1 1v14l4-4h10c.55 0 1-.45 1-1z" }) }), _jsx("span", { className: "font-medium text-[13px]", children: "0" })] })] })] }));
+}

package/dist/post-preview/post-preview.d.ts

@@ -0,0 +1,29 @@
+import type * as React from 'react';
+import type { BlueSkyPreviewProps, DiscordPreviewProps, FacebookPreviewProps, GenericPreviewProps, GoogleBusinessPreviewProps, InstagramPreviewProps, LinkedInPreviewProps, TelegramPreviewProps, ThreadsPreviewProps, TikTokPreviewProps, TwitterPreviewProps, YouTubePreviewProps } from './platforms/index.js';
+import type { PostPreviewSlots } from './types.js';
+export type PostPreviewProps = PostPreviewSlots & (({
+    platform: 'instagram';
+} & InstagramPreviewProps) | ({
+    platform: 'twitter';
+} & TwitterPreviewProps) | ({
+    platform: 'facebook';
+} & FacebookPreviewProps) | ({
+    platform: 'linkedin';
+} & LinkedInPreviewProps) | ({
+    platform: 'tiktok';
+} & TikTokPreviewProps) | ({
+    platform: 'youtube';
+} & YouTubePreviewProps) | ({
+    platform: 'threads';
+} & ThreadsPreviewProps) | ({
+    platform: 'bluesky';
+} & BlueSkyPreviewProps) | ({
+    platform: 'discord';
+} & DiscordPreviewProps) | ({
+    platform: 'telegram';
+} & TelegramPreviewProps) | ({
+    platform: 'google_business';
+} & GoogleBusinessPreviewProps) | ({
+    platform: 'generic';
+} & GenericPreviewProps));
+export declare function PostPreview(props: PostPreviewProps): React.ReactElement;