@medalsocial/meda 2.0.0 → 2.2.0

package/dist/post-preview/internal/use-swipe.js

@@ -0,0 +1,29 @@
+import { useCallback, useRef } from 'react';
+const SWIPE_THRESHOLD = 50;
+/**
+ * Touch swipe detection for carousel navigation. Tracks touchstart/touchend
+ * and fires onSwipeLeft / onSwipeRight when the horizontal delta exceeds
+ * SWIPE_THRESHOLD (50px). Returns event handlers to spread onto the
+ * swipeable container.
+ *
+ * Ported from `apps/web/src/components/composer/editors/use-swipe.ts`.
+ */
+export function useSwipe({ onSwipeLeft, onSwipeRight }) {
+    const touchStartX = useRef(null);
+    const onTouchStart = useCallback((e) => {
+        touchStartX.current = e.touches[0].clientX;
+    }, []);
+    const onTouchEnd = useCallback((e) => {
+        if (touchStartX.current === null)
+            return;
+        const deltaX = e.changedTouches[0].clientX - touchStartX.current;
+        touchStartX.current = null;
+        if (Math.abs(deltaX) < SWIPE_THRESHOLD)
+            return;
+        if (deltaX < 0)
+            onSwipeLeft();
+        else
+            onSwipeRight();
+    }, [onSwipeLeft, onSwipeRight]);
+    return { onTouchStart, onTouchEnd };
+}

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

@@ -0,0 +1,15 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export interface BlueSkyLabels {
+    placeholder: string;
+    share: string;
+    moreOptions: string;
+}
+export declare const DEFAULT_BLUESKY_LABELS: BlueSkyLabels;
+export interface BlueSkyPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<BlueSkyLabels>;
+}
+/**
+ * BlueSky feed-card preview. Auto-formats the username with `.bsky.social`
+ * if no domain is present.
+ */
+export declare function BlueSkyPreview({ displayName, username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: BlueSkyPreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heart, MessageCircle, MoreHorizontal, Repeat2, Share } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_BLUESKY_LABELS = {
+    placeholder: "What's up?",
+    share: 'Share',
+    moreOptions: 'More options',
+};
+/**
+ * BlueSky feed-card preview. Auto-formats the username with `.bsky.social`
+ * if no domain is present.
+ */
+export function BlueSkyPreview({ displayName, username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_BLUESKY_LABELS, ...labels };
+    const handle = username.startsWith('@') ? username.slice(1) : username;
+    const formattedHandle = handle.includes('.') ? handle : `${handle}.bsky.social`;
+    return (_jsx("div", { "data-slot": "post-preview", "data-platform": "bluesky", className: cn('@container bg-white p-4 text-gray-900 @[420px]:text-[15px]', className), children: _jsxs("div", { className: "flex gap-3", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-11 w-11 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-baseline gap-1", children: [_jsx("span", { className: "cursor-pointer font-bold text-[15px] text-gray-900 hover:underline", children: displayName }), _jsxs("span", { className: "text-[14px] text-gray-500", children: ["@", formattedHandle] }), _jsx("span", { className: "text-[14px] text-gray-400", 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-400 hover:bg-gray-100", 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] text-gray-900 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 border border-gray-200', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length === 2 && 'grid grid-cols-2 gap-0.5', mediaUrls.length >= 3 && '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', mediaUrls.length >= 3 && '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: "mt-3 flex items-center gap-1 text-gray-500", children: [_jsxs("button", { type: "button", "aria-label": "Comments", className: "-ml-2 inline-flex min-h-11 min-w-11 items-center gap-1.5 rounded-full p-2 hover:bg-blue-50 hover:text-[#1185FE]", children: [_jsx(MessageCircle, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": "Repost", className: "inline-flex min-h-11 min-w-11 items-center gap-1.5 rounded-full p-2 hover:bg-green-50 hover:text-green-600", children: [_jsx(Repeat2, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", children: "0" })] }), _jsxs("button", { type: "button", "aria-label": "Like", className: "inline-flex min-h-11 min-w-11 items-center gap-1.5 rounded-full p-2 hover:bg-red-50 hover:text-red-500", children: [_jsx(Heart, { className: "h-[18px] w-[18px]" }), _jsx("span", { className: "text-[13px]", 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 p-2 hover:bg-blue-50 hover:text-[#1185FE]", children: _jsx(Share, { className: "h-[18px] w-[18px]" }) })] })] })] }) }));
+}

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

@@ -0,0 +1,44 @@
+import type { PostPreviewBaseProps } from '../types.js';
+/**
+ * Discord embed draft. Mirrors the Discord webhook embed shape.
+ */
+export interface DiscordEmbedDraft {
+    title?: string;
+    description?: string;
+    /** 0xRRGGBB integer (Discord wire format). */
+    color?: number;
+    url?: string;
+    thumbnailUrl?: string;
+    imageUrl?: string;
+    authorName?: string;
+    authorIconUrl?: string;
+    fields?: Array<{
+        name: string;
+        value: string;
+        inline?: boolean;
+    }>;
+    footerText?: string;
+    /** ISO 8601 timestamp. */
+    timestamp?: string;
+}
+export interface DiscordLabels {
+    placeholder: string;
+    timestamp: string;
+    embedsSuppressed: string;
+    reply: string;
+    close: string;
+    moreOptions: string;
+    addReaction: string;
+}
+export declare const DEFAULT_DISCORD_LABELS: DiscordLabels;
+export interface DiscordPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<DiscordLabels>;
+    embeds?: DiscordEmbedDraft[];
+    /** Hide rendered embeds (matches Discord's "Suppress Embeds" message option). */
+    suppressEmbeds?: boolean;
+}
+/**
+ * Discord channel message preview. Renders the user message followed by
+ * any embeds (unless `suppressEmbeds` is true).
+ */
+export declare function DiscordPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, embeds, suppressEmbeds, }: DiscordPreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal, Plus, Smile } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_DISCORD_LABELS = {
+    placeholder: 'Message #channel',
+    timestamp: 'Today at 12:00 PM',
+    embedsSuppressed: 'Embeds are hidden in this preview.',
+    reply: 'React',
+    close: 'Close',
+    moreOptions: 'More options',
+    addReaction: 'Add reaction',
+};
+/**
+ * Discord channel message preview. Renders the user message followed by
+ * any embeds (unless `suppressEmbeds` is true).
+ */
+export function DiscordPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, embeds, suppressEmbeds, }) {
+    const l = { ...DEFAULT_DISCORD_LABELS, ...labels };
+    const visibleEmbeds = (embeds ?? []).filter((embed) => [embed.title, embed.description, embed.url, embed.imageUrl].some((field) => typeof field === 'string' && field.trim().length > 0));
+    return (_jsx("div", { "data-slot": "post-preview", "data-platform": "discord", className: cn('@container min-h-[150px] bg-white text-[#313338] @[420px]:text-[15px]', className), children: _jsxs("div", { className: "group relative px-4 py-1 hover:bg-[#F2F3F5]", children: [_jsxs("div", { className: "-top-4 absolute right-4 hidden items-center rounded border border-[#DDDEE1] bg-white shadow-lg group-hover:flex", children: [_jsx("button", { type: "button", "aria-label": l.reply, className: "inline-flex min-h-11 min-w-11 items-center justify-center p-1.5 text-[#747681] hover:bg-[#F2F3F5] hover:text-[#313338]", children: _jsx(Smile, { className: "h-5 w-5" }) }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "inline-flex min-h-11 min-w-11 items-center justify-center p-1.5 text-[#747681] hover:bg-[#F2F3F5] hover:text-[#313338]", children: _jsx(MoreHorizontal, { className: "h-5 w-5" }) })] }), _jsxs("div", { className: "flex gap-4 py-0.5", children: [_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "mt-0.5 h-10 w-10 flex-shrink-0" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("span", { className: "cursor-pointer font-medium text-[#060607] text-[15px] hover:underline", children: displayName }), _jsx("span", { className: "text-[#5C5E66] text-[11px]", children: l.timestamp })] }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "mt-0.5 min-h-[40px] text-[#313338] text-[15px] placeholder:text-[#747681]" })) : (_jsx("p", { className: "mt-0.5 whitespace-pre-wrap break-words text-[#313338] text-[15px]", children: content })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: "mt-2 max-w-md", children: _jsx("div", { className: cn('overflow-hidden rounded', mediaUrls.length === 1 && 'max-w-[400px]', mediaUrls.length >= 2 && 'grid max-w-[400px] grid-cols-2 gap-1'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsx("div", { className: cn('overflow-hidden rounded bg-[#F2F3F5]', 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 cursor-pointer object-cover hover:opacity-90" }) }, url))) }) })), !suppressEmbeds && visibleEmbeds.length > 0 && (_jsx("div", { "data-slot": "discord-embeds", className: "mt-3 flex max-w-[520px] flex-col gap-2", children: visibleEmbeds.map((embed, index) => (_jsx(DiscordEmbedCard, { embed: embed }, embedKey(embed, index)))) })), suppressEmbeds && (_jsx("p", { "data-slot": "discord-embeds-suppressed", className: "mt-2 text-[#5C5E66] text-xs", children: l.embedsSuppressed })), _jsxs("div", { className: "mt-2 flex items-center gap-1", children: [_jsxs("button", { type: "button", className: "flex min-h-11 items-center gap-1 rounded border border-transparent bg-[#F2F3F5] px-3 py-0.5 text-[14px] hover:border-[#5865F2] hover:bg-[#E8E9EB]", children: [_jsx("span", { "aria-hidden": "true", children: "\uD83D\uDC4D" }), _jsx("span", { className: "text-[#5C5E66] text-[12px]", children: "1" })] }), _jsx("button", { type: "button", "aria-label": l.addReaction, className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded border border-transparent bg-[#F2F3F5] hover:border-[#5865F2] hover:bg-[#E8E9EB]", children: _jsx(Plus, { className: "h-4 w-4 text-[#747681]" }) })] })] })] })] }) }));
+}
+function embedKey(embed, index) {
+    return `${embed.title ?? ''}::${embed.url ?? ''}::${embed.imageUrl ?? ''}::${index}`;
+}
+/* v8 ignore next — v8 phantom duplicate function record */
+function DiscordEmbedCard({ embed }) {
+    const accent = typeof embed.color === 'number' ? `#${embed.color.toString(16).padStart(6, '0')}` : '#5865f2';
+    const href = embed.url?.trim();
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "discord-embed", className: "overflow-hidden rounded-md border border-[#DDDEE1] border-l-4 bg-[#F2F3F5]", style: { borderLeftColor: accent }, children: [_jsxs("div", { className: "p-3", children: [embed.title ? (_jsx("p", { className: "font-medium text-[#060607] text-sm", children: href ? (_jsx("a", { href: href, target: "_blank", rel: "noreferrer", className: "hover:underline", children: embed.title })) : (embed.title) })) : null, embed.description ? (_jsx("p", { className: "mt-1 whitespace-pre-wrap text-[#313338] text-sm", children: embed.description })) : null, href ? _jsx("p", { className: "mt-2 truncate text-[#0068e0] text-xs", children: href }) : null] }), embed.imageUrl ? (_jsx("img", { src: embed.imageUrl, alt: embed.title ?? 'Discord embed', loading: "lazy", decoding: "async", className: "w-full object-cover" })) : null] }));
+}

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

@@ -0,0 +1,23 @@
+import type { PostPreviewBaseProps } from '../types.js';
+/**
+ * Facebook preview labels. Override individual entries via the `labels` prop.
+ */
+export interface FacebookLabels {
+    justNow: string;
+    placeholder: string;
+    comments: (count: number) => string;
+    shares: (count: number) => string;
+    like: string;
+    comment: string;
+    share: string;
+    moreOptions: string;
+}
+export declare const DEFAULT_FACEBOOK_LABELS: FacebookLabels;
+export interface FacebookPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<FacebookLabels>;
+}
+/**
+ * Facebook feed-card preview. Renders displayName, avatar, content, optional
+ * media grid, and the standard Like/Comment/Share footer.
+ */
+export declare function FacebookPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: FacebookPreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Globe, MessageCircle, MoreHorizontal, Share2, 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_FACEBOOK_LABELS = {
+    justNow: 'Just now',
+    placeholder: "What's on your mind?",
+    comments: (count) => `${count} comments`,
+    shares: (count) => `${count} shares`,
+    like: 'Like',
+    comment: 'Comment',
+    share: 'Share',
+    moreOptions: 'More options',
+};
+/**
+ * Facebook feed-card preview. Renders displayName, avatar, content, optional
+ * media grid, and the standard Like/Comment/Share footer.
+ */
+/* v8 ignore next 11 — v8 phantom duplicate function record */
+export function FacebookPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_FACEBOOK_LABELS, ...labels };
+    /* v8 ignore next — v8 phantom duplicate function body record at this position */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "facebook", className: cn('@container bg-white text-gray-900 @[420px]:text-[15px] dark:bg-[#242526] dark:text-[#E4E6EB]', className), children: [_jsxs("div", { className: "p-4", 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" }), _jsxs("div", { children: [_jsx("p", { className: "cursor-pointer font-semibold text-[15px] text-gray-900 hover:underline", children: displayName }), _jsxs("div", { className: "flex items-center gap-1 text-[13px] text-gray-500", children: [_jsx("span", { children: l.justNow }), _jsx("span", { children: "\u00B7" }), _jsx(Globe, { className: "h-3 w-3", "aria-hidden": "true" })] })] })] }), _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-500 hover:bg-gray-100", children: _jsx(MoreHorizontal, { 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-[15px] text-gray-900 placeholder:text-gray-500" })) : (_jsx("p", { className: "mt-3 whitespace-pre-wrap break-words text-[15px]", children: content }))] }), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: cn('bg-gray-100', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length === 2 && 'grid grid-cols-2 gap-0.5', mediaUrls.length === 3 && 'grid grid-cols-2 gap-0.5', mediaUrls.length >= 4 && 'grid grid-cols-2 gap-0.5'), children: mediaUrls.slice(0, 4).map((url, i) => (_jsxs("div", { className: cn('relative bg-gray-200', mediaUrls.length === 1 && 'aspect-video', mediaUrls.length === 2 && 'aspect-square', mediaUrls.length === 3 && i === 0 && 'row-span-2', mediaUrls.length >= 4 && 'aspect-square'), children: [_jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }), mediaUrls.length > 4 && i === 3 && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: _jsxs("span", { className: "font-semibold text-2xl text-white", children: ["+", mediaUrls.length - 4] }) }))] }, url))) })), _jsxs("div", { className: "flex items-center justify-between px-4 py-2 text-[13px] text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsxs("div", { className: "flex -space-x-1", children: [_jsx("div", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-full bg-[#1877F2]", children: _jsx(ThumbsUp, { className: "h-2.5 w-2.5 text-white", fill: "currentColor" }) }), _jsx("div", { className: "flex h-[18px] w-[18px] items-center justify-center rounded-full bg-red-500", children: _jsx("span", { className: "text-[10px]", "aria-hidden": "true", children: "\u2665" }) })] }), _jsx("span", { children: "0" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { children: l.comments(0) }), _jsx("span", { children: l.shares(0) })] })] }), _jsx("div", { className: "mx-4 border-gray-200 border-t" }), _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-2 text-gray-600 hover:bg-gray-100", children: [_jsx(ThumbsUp, { className: "h-5 w-5" }), _jsx("span", { className: "font-semibold text-[15px]", children: l.like })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-2 text-gray-600 hover:bg-gray-100", children: [_jsx(MessageCircle, { className: "h-5 w-5" }), _jsx("span", { className: "font-semibold text-[15px]", children: l.comment })] }), _jsxs("button", { type: "button", className: "flex min-h-11 flex-1 items-center justify-center gap-2 rounded-lg py-2 text-gray-600 hover:bg-gray-100", children: [_jsx(Share2, { className: "h-5 w-5" }), _jsx("span", { className: "font-semibold text-[15px]", children: l.share })] })] })] }));
+}

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

@@ -0,0 +1,22 @@
+import type { PlatformId, PostPreviewBaseProps } from '../types.js';
+export interface GenericLabels {
+    placeholderTemplate: (platform: string) => string;
+    badgeTemplate: (platform: string) => string;
+    moreOptions: string;
+}
+export declare const DEFAULT_GENERIC_LABELS: GenericLabels;
+export interface GenericPreviewProps extends PostPreviewBaseProps {
+    /**
+     * The platform this preview represents. Accepts a known `PlatformId` (in
+     * which case the per-platform display name is used) or any free-form
+     * string for unknown platforms.
+     */
+    platform: PlatformId | (string & {});
+    labels?: Partial<GenericLabels>;
+}
+/**
+ * Generic preview. Used as a fallback for any platform without a dedicated
+ * component. Layout is intentionally neutral so it composes well inside
+ * `PlatformChrome` if a consumer wants to add device framing.
+ */
+export declare function GenericPreview({ platform, displayName, username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: GenericPreviewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MoreHorizontal } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Avatar } from '../internal/avatar.js';
+import { PLATFORM_META } from '../internal/platform-meta.js';
+import { Textarea } from '../internal/textarea.js';
+export const DEFAULT_GENERIC_LABELS = {
+    placeholderTemplate: (platform) => `Write your ${platform} post...`,
+    badgeTemplate: (platform) => `${platform} preview`,
+    moreOptions: 'More options',
+};
+function resolvePlatformName(platform) {
+    if (platform in PLATFORM_META) {
+        return PLATFORM_META[platform].displayName;
+    }
+    return platform;
+}
+/**
+ * Generic preview. Used as a fallback for any platform without a dedicated
+ * component. Layout is intentionally neutral so it composes well inside
+ * `PlatformChrome` if a consumer wants to add device framing.
+ */
+/* v8 ignore next 12 — v8 phantom duplicate function record */
+export function GenericPreview({ platform, displayName, username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_GENERIC_LABELS, ...labels };
+    const platformName = resolvePlatformName(platform);
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "generic", "data-generic-platform": platform, className: cn('@container bg-white p-4 text-gray-900 @[420px]:text-[14px] dark:bg-neutral-950 dark:text-neutral-100', 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 gap-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "truncate font-semibold text-[14px]", children: displayName }), _jsxs("span", { className: "truncate text-[13px] text-gray-500", children: ["@", username] })] }), _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-neutral-800", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) })] }), editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholderTemplate(platformName), className: "mt-2 min-h-[60px] text-[14px] placeholder:text-gray-500" })) : (_jsx("p", { className: "mt-2 whitespace-pre-wrap break-words text-[14px]", children: content })), mediaUrls && mediaUrls.length > 0 && (_jsx("div", { className: "mt-3 overflow-hidden rounded-lg", children: mediaUrls.length === 1 ? (_jsx("div", { className: "aspect-video bg-gray-200", children: _jsx("img", { src: mediaUrls[0], alt: "Post media", loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) })) : (_jsx("div", { className: "grid grid-cols-2 gap-1", children: mediaUrls.slice(0, 4).map((url, i) => (_jsx("div", { className: "aspect-square bg-gray-200", children: _jsx("img", { src: url, alt: `Media ${i + 1}`, loading: "lazy", decoding: "async", className: "h-full w-full object-cover" }) }, url))) })) }))] })] }), _jsx("div", { className: "mt-3 border-gray-200 border-t pt-3 dark:border-neutral-800", children: _jsx("p", { className: "text-gray-500 text-xs", children: l.badgeTemplate(platformName) }) })] }));
+}

package/dist/post-preview/platforms/google-business.d.ts

@@ -0,0 +1,18 @@
+import type { PostPreviewBaseProps } from '../types.js';
+export interface GoogleBusinessLabels {
+    placeholder: string;
+    postedJustNow: string;
+    learnMore: string;
+    like: string;
+    share: string;
+    moreOptions: string;
+}
+export declare const DEFAULT_GOOGLE_BUSINESS_LABELS: GoogleBusinessLabels;
+export interface GoogleBusinessPreviewProps extends PostPreviewBaseProps {
+    labels?: Partial<GoogleBusinessLabels>;
+}
+/**
+ * Google Business Profile update-post preview. Renders the business name,
+ * timestamp, content, optional media, and a Learn-more CTA button.
+ */
+export declare function GoogleBusinessPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable, onContentChange, className, labels, }: GoogleBusinessPreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/post-preview/platforms/google-business.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Building2, ExternalLink, MoreVertical, 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_GOOGLE_BUSINESS_LABELS = {
+    placeholder: 'Share an update about your business...',
+    postedJustNow: 'Posted just now',
+    learnMore: 'Learn more',
+    like: 'Like',
+    share: 'Share',
+    moreOptions: 'More options',
+};
+/**
+ * Google Business Profile update-post preview. Renders the business name,
+ * timestamp, content, optional media, and a Learn-more CTA button.
+ */
+/* v8 ignore next 11 — v8 phantom duplicate function record */
+export function GoogleBusinessPreview({ displayName, username: _username, avatarUrl, content, mediaUrls, editable = false, onContentChange, className, labels, }) {
+    const l = { ...DEFAULT_GOOGLE_BUSINESS_LABELS, ...labels };
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    return (_jsxs("div", { "data-slot": "post-preview", "data-platform": "google_business", className: cn('@container overflow-hidden rounded-lg border border-gray-200 bg-white text-gray-900 @[420px]:text-[14px] dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-100', className), children: [_jsxs("div", { className: "flex items-start justify-between p-4", children: [_jsxs("div", { className: "flex gap-3", children: [avatarUrl ? (_jsx(Avatar, { src: avatarUrl, displayName: displayName, className: "h-10 w-10 rounded" })) : (_jsx("span", { role: "img", "aria-label": displayName, className: "inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded bg-[#4285F4] text-white", children: _jsx(Building2, { className: "h-5 w-5" }) })), _jsxs("div", { children: [_jsx("p", { className: "font-medium text-[14px] text-gray-900", children: displayName }), _jsx("p", { className: "text-[12px] text-gray-500", children: l.postedJustNow })] })] }), _jsx("button", { type: "button", "aria-label": l.moreOptions, className: "inline-flex min-h-11 min-w-11 items-center justify-center rounded-full p-1 text-gray-500 hover:bg-gray-100", children: _jsx(MoreVertical, { className: "h-5 w-5" }) })] }), _jsx("div", { className: "px-4 pb-3", children: editable ? (_jsx(Textarea, { value: content, onChange: (e) => onContentChange?.(e.target.value), placeholder: l.placeholder, className: "min-h-[80px] text-[14px] text-gray-900 placeholder:text-gray-500" })) : (_jsx("p", { className: "whitespace-pre-wrap break-words text-[14px]", children: content })) }), mediaUrls && mediaUrls.length > 0 && (_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("div", { className: "border-gray-100 border-t p-4", children: _jsxs("button", { type: "button", className: "flex min-h-11 w-full items-center justify-center gap-2 rounded-md bg-[#1A73E8] px-4 py-2 font-medium text-[14px] text-white hover:bg-[#1557B0]", children: [_jsx("span", { children: l.learnMore }), _jsx(ExternalLink, { className: "h-4 w-4" })] }) }), _jsxs("div", { className: "flex items-center gap-4 px-4 pb-4", children: [_jsxs("button", { type: "button", className: "inline-flex min-h-11 items-center gap-1.5 text-gray-600 hover:text-[#1A73E8]", "aria-label": l.like, children: [_jsx(ThumbsUp, { className: "h-4 w-4" }), _jsx("span", { className: "text-[13px]", children: l.like })] }), _jsxs("button", { type: "button", "aria-label": l.share, className: "inline-flex min-h-11 items-center gap-1.5 text-gray-600 hover:text-[#1A73E8]", children: [_jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z" }) }), _jsx("span", { className: "text-[13px]", children: l.share })] })] })] }));
+}

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

@@ -0,0 +1,24 @@
+export type { BlueSkyLabels, BlueSkyPreviewProps } from './bluesky.js';
+export { BlueSkyPreview, DEFAULT_BLUESKY_LABELS } from './bluesky.js';
+export type { DiscordEmbedDraft, DiscordLabels, DiscordPreviewProps, } from './discord.js';
+export { DEFAULT_DISCORD_LABELS, DiscordPreview } from './discord.js';
+export type { FacebookLabels, FacebookPreviewProps } from './facebook.js';
+export { DEFAULT_FACEBOOK_LABELS, FacebookPreview } from './facebook.js';
+export type { GenericLabels, GenericPreviewProps } from './generic.js';
+export { DEFAULT_GENERIC_LABELS, GenericPreview } from './generic.js';
+export type { GoogleBusinessLabels, GoogleBusinessPreviewProps, } from './google-business.js';
+export { DEFAULT_GOOGLE_BUSINESS_LABELS, GoogleBusinessPreview, } from './google-business.js';
+export type { InstagramLabels, InstagramPostType, InstagramPreviewProps, } from './instagram.js';
+export { DEFAULT_INSTAGRAM_LABELS, InstagramPreview } from './instagram.js';
+export type { LinkedInLabels, LinkedInMentionData, LinkedInMentionPickerContext, LinkedInPreviewProps, } from './linkedin.js';
+export { DEFAULT_LINKEDIN_LABELS, LinkedInPreview } from './linkedin.js';
+export type { TelegramInlineKeyboardButton, TelegramInlineKeyboardMarkup, TelegramLabels, TelegramPollState, TelegramPreviewProps, } from './telegram.js';
+export { DEFAULT_TELEGRAM_LABELS, TelegramPreview } from './telegram.js';
+export type { ThreadsLabels, ThreadsPreviewProps } from './threads.js';
+export { DEFAULT_THREADS_LABELS, ThreadsPreview } from './threads.js';
+export type { TikTokLabels, TikTokPreviewProps } from './tiktok.js';
+export { DEFAULT_TIKTOK_LABELS, TikTokPreview } from './tiktok.js';
+export type { TwitterLabels, TwitterMentionPickerContext, TwitterPreviewProps, TwitterTheme, } from './twitter.js';
+export { DEFAULT_TWITTER_LABELS, TwitterPreview } from './twitter.js';
+export type { YouTubeLabels, YouTubePreviewProps } from './youtube.js';
+export { DEFAULT_YOUTUBE_LABELS, YouTubePreview } from './youtube.js';

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

@@ -0,0 +1,13 @@
+// Re-exports for the post-preview platforms barrel.
+export { BlueSkyPreview, DEFAULT_BLUESKY_LABELS } from './bluesky.js';
+export { DEFAULT_DISCORD_LABELS, DiscordPreview } from './discord.js';
+export { DEFAULT_FACEBOOK_LABELS, FacebookPreview } from './facebook.js';
+export { DEFAULT_GENERIC_LABELS, GenericPreview } from './generic.js';
+export { DEFAULT_GOOGLE_BUSINESS_LABELS, GoogleBusinessPreview, } from './google-business.js';
+export { DEFAULT_INSTAGRAM_LABELS, InstagramPreview } from './instagram.js';
+export { DEFAULT_LINKEDIN_LABELS, LinkedInPreview } from './linkedin.js';
+export { DEFAULT_TELEGRAM_LABELS, TelegramPreview } from './telegram.js';
+export { DEFAULT_THREADS_LABELS, ThreadsPreview } from './threads.js';
+export { DEFAULT_TIKTOK_LABELS, TikTokPreview } from './tiktok.js';
+export { DEFAULT_TWITTER_LABELS, TwitterPreview } from './twitter.js';
+export { DEFAULT_YOUTUBE_LABELS, YouTubePreview } from './youtube.js';

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,104 @@
+'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(() => {
+        /* v8 ignore next — mediaUrls is always defined when goToNext is reachable (carousel requires >1 url) */
+        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
+// ---------------------------------------------------------------------------
+/* v8 ignore next 17 — v8 phantom duplicate function record */
+function ReelPreview({ displayName, username, avatarUrl, content, mediaUrl, labels, className, }) {
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    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
+// ---------------------------------------------------------------------------
+/* v8 ignore next 15 — v8 phantom duplicate function record */
+function StoryPreview({ displayName, username, avatarUrl, mediaUrl, labels, className, }) {
+    /* v8 ignore next — v8 phantom duplicate function body record */
+    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;