@medalsocial/meda 2.0.0 → 2.1.0

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

@@ -0,0 +1,31 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export type InstagramPostType = 'feed' | 'carousel' | 'reel' | 'story';
+export interface InstagramLabels {
+    placeholder: string;
+    justNow: string;
+    likes: (count: number) => string;
+    addImage: string;
+    moreOptions: string;
+    like: string;
+    comment: string;
+    share: string;
+    save: string;
+    carouselPrev: string;
+    carouselNext: string;
+    carouselCounter: (current: number, total: number) => string;
+    reelLabel: string;
+    reelAudio: string;
+    storyLabel: string;
+    storySendMessage: string;
+}
+export declare const DEFAULT_INSTAGRAM_LABELS: InstagramLabels;
+export interface InstagramPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<InstagramLabels>;
+    /** Override the layout. Auto-detects to `carousel` for >1 media. */
+    instagramPostType?: InstagramPostType;
+}
+/**
+ * Instagram preview supporting Feed / Carousel / Reel / Story layouts.
+ * Auto-detects `carousel` when more than one media URL is present.
+ */
+export declare function InstagramPreview({ displayName, username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, instagramPostType, }: InstagramPreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Bookmark, ChevronLeft, ChevronRight, Heart, MessageCircle, MoreHorizontal, Music, Send, } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+import { useSwipe } from '../internal/use-swipe.js';
+export const DEFAULT_INSTAGRAM_LABELS = {
+    placeholder: 'Write a caption...',
+    justNow: 'Just now',
+    likes: (count) => `${count} likes`,
+    addImage: 'Add an image to preview',
+    moreOptions: 'More options',
+    like: 'Like',
+    comment: 'Comment',
+    share: 'Share',
+    save: 'Save',
+    carouselPrev: 'Previous slide',
+    carouselNext: 'Next slide',
+    carouselCounter: (current, total) => `${current} / ${total}`,
+    reelLabel: 'Reels',
+    reelAudio: 'Original audio',
+    storyLabel: 'Story',
+    storySendMessage: 'Send message',
+};
+/**
+ * Instagram preview supporting Feed / Carousel / Reel / Story layouts.
+ * Auto-detects `carousel` when more than one media URL is present.
+ */
+export function InstagramPreview({ displayName, username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, instagramPostType, }) {
+    const l = { ...DEFAULT_INSTAGRAM_LABELS, ...labels };
+    const formattedUsername = username.startsWith('@') ? username.slice(1) : username;
+    const hasMedia = mediaUrls !== undefined && mediaUrls.length > 0;
+    const postType = instagramPostType ?? (mediaUrls && mediaUrls.length > 1 ? 'carousel' : 'feed');
+    if (postType === 'reel') {
+        return (_jsx(ReelPreview, { displayName: displayName, username: formattedUsername, avatarUrl: avatarUrl, content: content, mediaUrl: hasMedia ? mediaUrls[0] : undefined, labels: l, className: className }));
+    }
+    if (postType === 'story') {
+        return (_jsx(StoryPreview, { displayName: displayName, username: formattedUsername, avatarUrl: avatarUrl, mediaUrl: hasMedia ? mediaUrls[0] : undefined, labels: l, className: className }));
+    }
+    return (_jsx(FeedPreview, { displayName: displayName, username: formattedUsername, avatarUrl: avatarUrl, content: content, mediaUrls: mediaUrls, editable: editable, onContentChange: onContentChange, isCarousel: postType === 'carousel', labels: l, className: className }));
+}
+// ---------------------------------------------------------------------------
+// Feed / Carousel layout
+// ---------------------------------------------------------------------------
+function FeedPreview({ displayName, username, avatarUrl, content, mediaUrls, editable, onContentChange, isCarousel, labels, className, }) {
+    const hasMedia = mediaUrls !== undefined && mediaUrls.length > 0;
+    const [carouselIndex, setCarouselIndex] = useState(0);
+    const goToPrev = useCallback(() => {
+        setCarouselIndex((prev) => Math.max(0, prev - 1));
+    }, []);
+    const goToNext = useCallback(() => {
+        if (!mediaUrls)
+            return;
+        setCarouselIndex((prev) => Math.min(mediaUrls.length - 1, prev + 1));
+    }, [mediaUrls]);
+    const swipe = useSwipe({ onSwipeLeft: goToNext, onSwipeRight: goToPrev });
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "instagram", "data-instagram-post-type": isCarousel ? 'carousel' : 'feed', className: cn('@container bg-white text-gray-900 @[420px]:text-[15px] dark:bg-black dark:text-white', className), children: [_jsxs("div", { className: "flex items-center justify-between p-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-8 w-8 ring-2 ring-pink-500 ring-offset-2" }), _jsx("p", { className: "font-semibold text-[14px]", children: username })] }), _jsx("button", { type: "button", "aria-label": labels.moreOptions, className: "-m-2 inline-flex min-h-11 min-w-11 items-center justify-center p-2", children: _jsx(MoreHorizontal, { className: "h-5 w-5" }) })] }), hasMedia ? (_jsxs("div", { "data-slot": "instagram-carousel-track", className: "relative aspect-square bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500", style: { touchAction: 'pan-y' }, ...(isCarousel && mediaUrls.length > 1
+                    ? {
+                        role: 'region',
+                        'aria-label': labels.carouselCounter(carouselIndex + 1, mediaUrls.length),
+                        tabIndex: 0,
+                        onKeyDown: (event) => {
+                            if (event.key === 'ArrowLeft') {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                goToPrev();
+                            }
+                            else if (event.key === 'ArrowRight') {
+                                event.preventDefault();
+                                event.stopPropagation();
+                                goToNext();
+                            }
+                        },
+                    }
+                    : {}), ...swipe, children: [_jsx("img", { src: mediaUrls[isCarousel ? carouselIndex : 0], alt: "Post", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }), isCarousel && mediaUrls.length > 1 && (_jsxs(_Fragment, { children: [carouselIndex > 0 && (_jsx("button", { type: "button", onClick: goToPrev, "aria-label": labels.carouselPrev, className: "-translate-y-1/2 absolute top-1/2 left-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) })), carouselIndex < mediaUrls.length - 1 && (_jsx("button", { type: "button", onClick: goToNext, "aria-label": labels.carouselNext, className: "-translate-y-1/2 absolute top-1/2 right-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })), _jsx("div", { className: "absolute top-3 right-3 rounded-full bg-black/60 px-2.5 py-0.5 font-medium text-white text-xs", children: labels.carouselCounter(carouselIndex + 1, mediaUrls.length) }), _jsxs("div", { className: "-translate-x-1/2 absolute bottom-4 left-1/2 flex gap-1", children: [mediaUrls.slice(0, 5).map((url, i) => (_jsx("button", { type: "button", "aria-label": `Go to slide ${i + 1}`, ...(i === carouselIndex ? { 'aria-current': 'true' } : {}), onClick: () => setCarouselIndex(i), className: cn(
+                                        // Visible dot stays small; expand the touch target via padding so the
+                                        // hit area is at least 44x44px without breaking the IG visual.
+                                        'inline-flex min-h-11 min-w-11 items-center justify-center p-2'), children: _jsx("span", { "aria-hidden": "true", className: cn('h-1.5 w-1.5 rounded-full transition-colors', i === carouselIndex ? 'bg-blue-500' : 'bg-white/60') }) }, url))), mediaUrls.length > 5 && (_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-white/40", "aria-hidden": "true" }))] })] }))] })) : (_jsx(MediaPlaceholder, { label: labels.addImage })), _jsxs("div", { className: "p-3", children: [_jsxs("div", { className: "mb-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { type: "button", "aria-label": labels.like, className: "-m-1 inline-flex min-h-11 min-w-11 items-center justify-center p-1 hover:opacity-60", children: _jsx(Heart, { className: "h-6 w-6" }) }), _jsx("button", { type: "button", "aria-label": labels.comment, className: "-m-1 inline-flex min-h-11 min-w-11 items-center justify-center p-1 hover:opacity-60", children: _jsx(MessageCircle, { className: "-scale-x-100 h-6 w-6" }) }), _jsx("button", { type: "button", "aria-label": labels.share, className: "-m-1 inline-flex min-h-11 min-w-11 items-center justify-center p-1 hover:opacity-60", children: _jsx(Send, { className: "-rotate-12 h-6 w-6" }) })] }), _jsx("button", { type: "button", "aria-label": labels.save, className: "-m-1 inline-flex min-h-11 min-w-11 items-center justify-center p-1 hover:opacity-60", children: _jsx(Bookmark, { className: "h-6 w-6" }) })] }), _jsx("p", { className: "mb-1 font-semibold text-[14px]", children: labels.likes(0) }), _jsxs("div", { className: "text-[14px]", children: [_jsx("span", { className: "mr-1 font-semibold", children: username }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: labels.placeholder, className: "mt-1 inline min-h-[40px] w-full text-[14px] text-gray-900 placeholder:text-gray-500" })) : (_jsx("span", { className: "whitespace-pre-wrap break-words", children: content }))] }), _jsx("p", { className: "mt-2 text-[10px] text-gray-400 uppercase tracking-wide", children: labels.justNow })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Reel layout
+// ---------------------------------------------------------------------------
+function ReelPreview({ displayName, username, avatarUrl, content, mediaUrl, labels, className, }) {
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "instagram", "data-instagram-post-type": "reel", className: cn('@container relative aspect-[9/16] overflow-hidden rounded-lg bg-black @[420px]:rounded-xl', className), children: [mediaUrl ? (_jsx("img", { src: mediaUrl, alt: "Reel", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-b from-gray-800 to-gray-900", children: _jsxs("div", { className: "text-center text-gray-500", children: [_jsx("div", { className: "mx-auto mb-2 h-16 w-16 rounded-full border-2 border-gray-600 border-dashed" }), _jsx("p", { className: "text-sm", children: labels.reelLabel })] }) })), _jsx("div", { className: "absolute top-4 right-3 font-semibold text-sm text-white drop-shadow-lg", children: labels.reelLabel }), _jsxs("div", { className: "absolute right-3 bottom-20 flex flex-col items-center gap-5", children: [_jsxs("button", { type: "button", "aria-label": labels.like, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-0.5", children: [_jsx(Heart, { className: "h-7 w-7 text-white drop-shadow-lg" }), _jsx("span", { className: "text-[11px] text-white drop-shadow-lg", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": labels.comment, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-0.5", children: [_jsx(MessageCircle, { className: "-scale-x-100 h-7 w-7 text-white drop-shadow-lg" }), _jsx("span", { className: "text-[11px] text-white drop-shadow-lg", children: "0" })] }), _jsx("button", { type: "button", "aria-label": labels.share, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-0.5", children: _jsx(Send, { className: "-rotate-12 h-7 w-7 text-white drop-shadow-lg" }) }), _jsx("button", { type: "button", "aria-label": labels.moreOptions, className: "inline-flex min-h-11 min-w-11 flex-col items-center gap-0.5", children: _jsx(MoreHorizontal, { className: "h-7 w-7 text-white drop-shadow-lg" }) }), _jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-8 w-8 rounded-md border-2 border-white/40" })] }), _jsxs("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent p-4 pb-5", 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-semibold text-sm text-white", children: username })] }), content ? _jsx("p", { className: "line-clamp-2 text-sm text-white/90", children: content }) : null, _jsxs("div", { className: "mt-3 flex items-center gap-2", children: [_jsx(Music, { className: "h-3 w-3 text-white/80", "aria-hidden": "true" }), _jsxs("p", { className: "flex-1 truncate text-white/80 text-xs", children: [labels.reelAudio, " \u00B7 ", username] })] })] })] }));
+}
+// ---------------------------------------------------------------------------
+// Story layout
+// ---------------------------------------------------------------------------
+function StoryPreview({ displayName, username, avatarUrl, mediaUrl, labels, className, }) {
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "instagram", "data-instagram-post-type": "story", className: cn('@container relative aspect-[9/16] overflow-hidden rounded-lg bg-black @[420px]:rounded-xl', className), children: [mediaUrl ? (_jsx("img", { src: mediaUrl, alt: "Story", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-gradient-to-b from-gray-800 to-gray-900", children: _jsxs("div", { className: "text-center text-gray-500", children: [_jsx("div", { className: "mx-auto mb-2 h-16 w-16 rounded-full border-2 border-gray-600 border-dashed" }), _jsx("p", { className: "text-sm", children: labels.storyLabel })] }) })), _jsx("div", { className: "absolute inset-x-0 top-0 px-2 pt-2", children: _jsx("div", { className: "h-0.5 w-full overflow-hidden rounded-full bg-white/30", children: _jsx("div", { className: "h-full w-1/3 rounded-full bg-white" }) }) }), _jsxs("div", { className: "absolute inset-x-0 top-3 flex items-center gap-2 px-4 pt-1", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-8 w-8 ring-2 ring-white/60" }), _jsx("span", { className: "font-semibold text-sm text-white drop-shadow-lg", children: username }), _jsx("span", { className: "text-white/70 text-xs drop-shadow-lg", children: labels.justNow }), _jsx("div", { className: "ml-auto", children: _jsx(MoreHorizontal, { className: "h-5 w-5 text-white drop-shadow-lg", "aria-hidden": "true" }) })] }), _jsx("div", { className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/50 to-transparent p-4 pt-8", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex-1 rounded-full border border-white/40 px-4 py-2", children: _jsx("span", { className: "text-sm text-white/60", children: labels.storySendMessage }) }), _jsx(Heart, { className: "h-6 w-6 text-white", "aria-hidden": "true" }), _jsx(Send, { className: "-rotate-12 h-6 w-6 text-white", "aria-hidden": "true" })] }) })] }));
+}
+// ---------------------------------------------------------------------------
+// Shared
+// ---------------------------------------------------------------------------
+function MediaPlaceholder({ label }) {
+    return (_jsx("div", { className: "flex aspect-square items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200", children: _jsxs("div", { className: "text-center text-gray-400", children: [_jsx("svg", { className: "mx-auto mb-2 h-16 w-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }), _jsx("p", { className: "text-sm", children: label })] }) }));
+}

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

@@ -0,0 +1,52 @@
+import { type ReactNode } from 'react';
+import type { PostPreviewBaseProps } from '../types.js';
+/**
+ * LinkedIn mention metadata. Wire format used by the LinkedIn share API:
+ * `@[Name](urn:li:person:abc)` is rendered as a plain `Name` token in the
+ * UI but the spans here let consumers persist the mention range +
+ * URN reference.
+ */
+export interface LinkedInMentionData {
+    /** Zero-based start offset within the post content. */
+    offset: number;
+    /** Length of the rendered name in the post content. */
+    length: number;
+    /** LinkedIn URN, e.g. `urn:li:person:ABC123`. */
+    urn: string;
+    /** Display name to highlight. */
+    name: string;
+}
+export interface LinkedInMentionPickerContext {
+    query: string;
+    onPick: (mention: LinkedInMentionData) => void;
+    onCancel: () => void;
+}
+export interface LinkedInLabels {
+    placeholder: string;
+    now: string;
+    moreOptions: string;
+    comments: (count: number) => string;
+    reposts: (count: number) => string;
+    like: string;
+    comment: string;
+    repost: string;
+    send: string;
+}
+export declare const DEFAULT_LINKEDIN_LABELS: LinkedInLabels;
+export interface LinkedInPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<LinkedInLabels>;
+    /** Mention spans to highlight in rendered content. */
+    mentions?: LinkedInMentionData[];
+    /** Called when the user picks a new mention via `renderMentionPicker`. */
+    onMentionsChange?: (mentions: LinkedInMentionData[]) => void;
+    /** 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: LinkedInMentionPickerContext) => ReactNode;
+}
+/**
+ * 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.
+ */
+export declare function LinkedInPreview({ displayName, username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, mentions, onMentionsChange, renderMentionPicker, }: LinkedInPreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,131 @@
+'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;
+        if (!ta)
+            return;
+        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;
+        if (!ta)
+            return;
+        const start = triggerStartRef.current;
+        if (start === null)
+            return;
+        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.
+ */
+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);
+    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 })] })] })] }));
+}
+function LinkedInMultiImageGrid({ mediaUrls }) {
+    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,42 @@
+'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" }) })] })] }) }));
+}
+function renderBody({ poll, editable, content, onContentChange, labels, }) {
+    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,24 @@
+'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.
+ */
+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;
+    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,23 @@
+'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.
+ */
+export function TikTokPreview({ displayName, username, avatarUrl, content, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_TIKTOK_LABELS, ...labels };
+    const formattedUsername = username.startsWith('@') ? username : `@${username}`;
+    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;