@jhits/plugin-blog 0.0.1

package/src/views/PostManager/PostManagerView.tsx

@@ -0,0 +1,280 @@
+/**
+ * Post Manager View
+ * Production-ready listing page for managing blog posts
+ * Follows dashboard earth-tone design system
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Plus, List, Grid3x3 } from 'lucide-react';
+import { PostListItem, PostStatus } from '../../types/post';
+import { PostStats } from './PostStats';
+import { PostFilters } from './PostFilters';
+import { PostTable } from './PostTable';
+import { PostCards } from './PostCards';
+import { EmptyState } from './EmptyState';
+import { apiToBlogPost, type APIBlogDocument } from '../../lib/mappers/apiMapper';
+
+export interface PostManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+
+type ViewMode = 'list' | 'cards';
+
+export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
+    const [posts, setPosts] = useState<PostListItem[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [search, setSearch] = useState('');
+    const [statusFilter, setStatusFilter] = useState<PostStatus | 'all'>('all');
+    const [categoryFilter, setCategoryFilter] = useState<string>('all');
+    const [viewMode, setViewMode] = useState<ViewMode>('list');
+
+    // Fetch posts from API
+    useEffect(() => {
+        const fetchPosts = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch('/api/plugin-blog?admin=true');
+                const data = await response.json();
+
+                if (data.blogs && Array.isArray(data.blogs)) {
+                    // Convert API format to PostListItem format
+                    const postListItems: PostListItem[] = data.blogs.map((doc: APIBlogDocument) => {
+                        const blogPost = apiToBlogPost(doc);
+                        // Extract image ID/filename from src URL
+                        // src can be: "/api/uploads/filename.jpg" or "filename.jpg" or a full URL
+                        let featuredImageId: string | undefined = undefined;
+                        if (blogPost.metadata.featuredImage?.src) {
+                            const src = blogPost.metadata.featuredImage.src;
+                            // If it's a URL, extract the filename
+                            if (src.includes('/')) {
+                                const parts = src.split('/');
+                                featuredImageId = parts[parts.length - 1];
+                            } else {
+                                // Already a filename/ID
+                                featuredImageId = src;
+                            }
+                        }
+                        // Extract category from metadata or hero block
+                        let category: string | undefined = undefined;
+                        if (blogPost.metadata.categories && blogPost.metadata.categories.length > 0) {
+                            category = blogPost.metadata.categories[0];
+                        } else {
+                            // Check hero block for category
+                            const heroBlock = blogPost.blocks.find(block => block.type === 'hero');
+                            if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
+                                const heroCategory = (heroBlock.data as any).category;
+                                if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
+                                    category = heroCategory.trim();
+                                }
+                            }
+                        }
+                        return {
+                            id: blogPost.id,
+                            title: blogPost.title,
+                            slug: blogPost.slug,
+                            status: blogPost.publication.status,
+                            date: blogPost.publication.date,
+                            excerpt: blogPost.metadata.excerpt,
+                            featuredImage: featuredImageId,
+                            authorId: blogPost.publication.authorId,
+                            updatedAt: blogPost.updatedAt,
+                            category: category,
+                        };
+                    });
+                    setPosts(postListItems);
+                }
+            } catch (error) {
+                console.error('Failed to fetch posts:', error);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchPosts();
+    }, []);
+
+    // Extract unique categories from posts
+    const categories = React.useMemo(() => {
+        const categorySet = new Set<string>();
+        posts.forEach(post => {
+            if (post.category && post.category.trim()) {
+                categorySet.add(post.category.trim());
+            }
+        });
+        return Array.from(categorySet).sort();
+    }, [posts]);
+
+    // Filter posts
+    const filteredPosts = React.useMemo(() => {
+        return posts.filter((post) => {
+            const matchesSearch =
+                search === '' ||
+                post.title.toLowerCase().includes(search.toLowerCase()) ||
+                post.excerpt?.toLowerCase().includes(search.toLowerCase()) ||
+                post.slug.toLowerCase().includes(search.toLowerCase());
+
+            const matchesStatus = statusFilter === 'all' || post.status === statusFilter;
+
+            const matchesCategory = categoryFilter === 'all' || post.category === categoryFilter;
+
+            return matchesSearch && matchesStatus && matchesCategory;
+        });
+    }, [posts, search, statusFilter, categoryFilter]);
+
+    // Action handlers
+    const handleCreatePost = () => {
+        // Navigate to editor route - the plugin router will handle this
+        // The route 'new' maps to the editor view
+        window.location.href = '/dashboard/blog/new';
+    };
+
+    const handleEdit = (postId: string) => {
+        // Find the post to get its slug
+        const post = posts.find(p => p.id === postId);
+        if (post) {
+            // Navigate to editor with slug (API uses slug, not ID)
+            window.location.href = `/dashboard/blog/editor/${post.slug}`;
+        }
+    };
+
+    const handlePreview = (postId: string) => {
+        // Open preview in new tab
+        window.open(`/dashboard/blog/preview/${postId}`, '_blank');
+    };
+
+    const handleDuplicate = (postId: string) => {
+        // TODO: Implement duplicate functionality
+        const post = posts.find((p) => p.id === postId);
+        if (post) {
+            const duplicated: PostListItem = {
+                ...post,
+                id: `duplicate-${Date.now()}`,
+                title: `${post.title} (Copy)`,
+                slug: `${post.slug}-copy-${Date.now()}`,
+                status: 'draft',
+                updatedAt: new Date().toISOString(),
+            };
+            setPosts((prev) => [...prev, duplicated]);
+        }
+    };
+
+    const handleDelete = async (postId: string) => {
+        if (confirm('Are you sure you want to delete this post?')) {
+            try {
+                const post = posts.find(p => p.id === postId);
+                if (post) {
+                    const response = await fetch(`/api/plugin-blog/${post.slug}`, {
+                        method: 'DELETE',
+                    });
+
+                    if (response.ok) {
+                        // Remove from local state
+                        setPosts((prev) => prev.filter((p) => p.id !== postId));
+                    } else {
+                        const error = await response.json();
+                        alert(error.error || 'Failed to delete post');
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to delete post:', error);
+                alert('Failed to delete post');
+            }
+        }
+    };
+
+    const hasActiveFilters = search !== '' || statusFilter !== 'all' || categoryFilter !== 'all';
+
+    return (
+        <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
+            {/* Header Section */}
+            <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+                <div>
+                    <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                        Blog Posts
+                    </h1>
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                        Manage your blog posts, drafts, and published content
+                    </p>
+                </div>
+
+                <button
+                    onClick={handleCreatePost}
+                    className="inline-flex items-center gap-2 px-6 py-3 bg-primary text-white rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-primary/90 transition-all shadow-lg shadow-primary/20"
+                >
+                    <Plus size={16} />
+                    New Post
+                </button>
+            </div>
+
+            {/* Stats Summary */}
+            <PostStats posts={posts} />
+
+            {/* Filters & Search Bar with View Toggle */}
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+                <PostFilters
+                    search={search}
+                    onSearchChange={setSearch}
+                    statusFilter={statusFilter}
+                    onStatusFilterChange={setStatusFilter}
+                    categoryFilter={categoryFilter}
+                    onCategoryFilterChange={setCategoryFilter}
+                    categories={categories}
+                />
+
+                {/* View Toggle */}
+                <div className="flex items-center gap-2 bg-neutral-100 dark:bg-neutral-800/50 rounded-full p-1 border border-neutral-300 dark:border-neutral-700">
+                    <button
+                        onClick={() => setViewMode('list')}
+                        className={`p-2 rounded-full transition-all ${viewMode === 'list'
+                                ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
+                                : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                            }`}
+                        title="List View"
+                    >
+                        <List size={18} />
+                    </button>
+                    <button
+                        onClick={() => setViewMode('cards')}
+                        className={`p-2 rounded-full transition-all ${viewMode === 'cards'
+                                ? 'bg-white dark:bg-neutral-900 text-primary shadow-sm'
+                                : 'text-neutral-500 dark:text-neutral-400 hover:text-neutral-950 dark:hover:text-white'
+                            }`}
+                        title="Card View"
+                    >
+                        <Grid3x3 size={18} />
+                    </button>
+                </div>
+            </div>
+
+            {/* Content */}
+            {loading ? (
+                <div className="flex items-center justify-center py-20">
+                    <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+                </div>
+            ) : filteredPosts.length === 0 ? (
+                <EmptyState hasFilters={hasActiveFilters} onCreatePost={handleCreatePost} />
+            ) : viewMode === 'list' ? (
+                <PostTable
+                    posts={filteredPosts}
+                    locale={locale}
+                    onEdit={handleEdit}
+                    onPreview={handlePreview}
+                    onDuplicate={handleDuplicate}
+                    onDelete={handleDelete}
+                />
+            ) : (
+                <PostCards
+                    posts={filteredPosts}
+                    locale={locale}
+                    onEdit={handleEdit}
+                    onPreview={handlePreview}
+                    onDuplicate={handleDuplicate}
+                    onDelete={handleDelete}
+                />
+            )}
+        </div>
+    );
+}

package/src/views/PostManager/PostStats.tsx

@@ -0,0 +1,81 @@
+/**
+ * Post Stats Component
+ * Displays summary statistics for blog posts
+ */
+
+'use client';
+
+import React from 'react';
+import { FileText, CheckCircle2, Clock, Archive } from 'lucide-react';
+import { PostListItem, PostStatus } from '../../types/post';
+
+export interface PostStatsProps {
+    posts: PostListItem[];
+}
+
+export function PostStats({ posts }: PostStatsProps) {
+    const total = posts.length;
+    const published = posts.filter(p => p.status === 'published').length;
+    const drafts = posts.filter(p => p.status === 'draft').length;
+    const scheduled = posts.filter(p => p.status === 'scheduled').length;
+
+    const stats = [
+        {
+            label: 'Total Posts',
+            value: total,
+            icon: FileText,
+            color: 'text-neutral-600 dark:text-neutral-400',
+            bgColor: 'bg-neutral-100 dark:bg-neutral-800',
+        },
+        {
+            label: 'Published',
+            value: published,
+            icon: CheckCircle2,
+            color: 'text-green-600 dark:text-green-400',
+            bgColor: 'bg-green-500/10 dark:bg-green-500/20',
+        },
+        {
+            label: 'Drafts',
+            value: drafts,
+            icon: Clock,
+            color: 'text-amber-600 dark:text-amber-400',
+            bgColor: 'bg-amber-500/10 dark:bg-amber-500/20',
+        },
+        {
+            label: 'Scheduled',
+            value: scheduled,
+            icon: Archive,
+            color: 'text-blue-600 dark:text-blue-400',
+            bgColor: 'bg-blue-500/10 dark:bg-blue-500/20',
+        },
+    ];
+
+    return (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            {stats.map((stat) => {
+                const Icon = stat.icon;
+                return (
+                    <div
+                        key={stat.label}
+                        className={`p-4 rounded-2xl border border-neutral-300 dark:border-neutral-700 ${stat.bgColor}`}
+                    >
+                        <div className="flex items-center gap-3">
+                            <div className={`p-2 rounded-xl ${stat.bgColor}`}>
+                                <Icon className={`size-5 ${stat.color}`} />
+                            </div>
+                            <div>
+                                <p className="text-2xl font-black text-neutral-950 dark:text-white">
+                                    {stat.value}
+                                </p>
+                                <p className="text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
+                                    {stat.label}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+

package/src/views/PostManager/PostTable.tsx

@@ -0,0 +1,225 @@
+/**
+ * Post Table Component
+ * Professional table layout for displaying posts
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Calendar, User, UserCheck } from 'lucide-react';
+import { Image } from '@jhits/plugin-images';
+import { PostListItem, PostStatus } from '../../types/post';
+import { PostActionsMenu } from './PostActionsMenu';
+import { useSession } from 'next-auth/react';
+
+export interface PostTableProps {
+    posts: PostListItem[];
+    locale: string;
+    onEdit: (postId: string) => void;
+    onPreview: (postId: string) => void;
+    onDuplicate: (postId: string) => void;
+    onDelete: (postId: string) => void;
+}
+
+function getStatusBadgeColor(status: PostStatus) {
+    switch (status) {
+        case 'published':
+            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+        case 'draft':
+            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+        case 'archived':
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+        default:
+            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+    }
+}
+
+function formatDate(dateString: string | undefined, locale: string) {
+    if (!dateString) return 'No date';
+    return new Date(dateString).toLocaleDateString(locale, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+}
+
+export function PostTable({
+    posts,
+    locale,
+    onEdit,
+    onPreview,
+    onDuplicate,
+    onDelete,
+}: PostTableProps) {
+    const { data: session, status: sessionStatus } = useSession();
+    const currentUserId = (session?.user as any)?.id;
+    const [userMap, setUserMap] = useState<Record<string, string>>({});
+    
+    // Helper function to check if user is the owner
+    const isPostOwner = (post: PostListItem): boolean => {
+        if (sessionStatus === 'loading') return false; // Don't show actions while loading
+        if (!currentUserId || !post.authorId) return false;
+        // Convert both to strings for comparison to handle ObjectId vs string
+        return String(currentUserId) === String(post.authorId);
+    };
+
+    // Fetch users to map IDs to names
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                const response = await fetch('/api/users');
+                const users = await response.json();
+                if (Array.isArray(users)) {
+                    const map: Record<string, string> = {};
+                    users.forEach((user: { _id: string; name?: string; email?: string }) => {
+                        const id = user._id?.toString();
+                        if (id) {
+                            map[id] = user.name || user.email || 'Unknown';
+                        }
+                    });
+                    setUserMap(map);
+                }
+            } catch (error) {
+                console.error('Failed to fetch users:', error);
+            }
+        };
+        fetchUsers();
+    }, []);
+
+    const getAuthorName = (authorId?: string) => {
+        if (!authorId) return 'Unknown';
+        return userMap[authorId] || authorId;
+    };
+
+    return (
+        <div className="bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700 overflow-hidden">
+            <div className="overflow-x-auto">
+                <table className="w-full">
+                    <thead className="bg-neutral-200 dark:bg-neutral-900/50 border-b border-neutral-300 dark:border-neutral-700">
+                        <tr>
+                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Post
+                            </th>
+                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Author
+                            </th>
+                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Category
+                            </th>
+                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Status
+                            </th>
+                            <th className="px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Last Modified
+                            </th>
+                            <th className="px-6 py-4 text-right text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Actions
+                            </th>
+                        </tr>
+                    </thead>
+                    <tbody className="divide-y divide-neutral-300 dark:divide-neutral-700">
+                        {posts.map((post) => (
+                            <tr
+                                key={post.id}
+                                className="hover:bg-white dark:hover:bg-neutral-900/50 transition-colors cursor-pointer"
+                            >
+                                {/* Featured Image & Title */}
+                                <td className="px-6 py-4">
+                                    <div className="flex items-center gap-4">
+                                        {post.featuredImage ? (
+                                            <div className="w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 overflow-hidden flex-shrink-0 relative">
+                                                <Image
+                                                    id={post.featuredImage}
+                                                    alt={post.title}
+                                                    fill
+                                                    editable={false}
+                                                    className="w-full h-full object-cover"
+                                                />
+                                            </div>
+                                        ) : (
+                                            <div className="w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center flex-shrink-0">
+                                                <span className="text-xs text-neutral-400">No Image</span>
+                                            </div>
+                                        )}
+                                        <div className="min-w-0 flex-1">
+                                            <h3 className="font-bold text-neutral-950 dark:text-white mb-1 line-clamp-1">
+                                                {post.title}
+                                            </h3>
+                                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
+                                                /{post.slug}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </td>
+
+                                {/* Author */}
+                                <td className="px-6 py-4">
+                                    <div className="flex items-center gap-2">
+                                        {isPostOwner(post) ? (
+                                            <UserCheck size={14} className="text-primary" />
+                                        ) : (
+                                            <User size={14} className="text-neutral-400" />
+                                        )}
+                                        <span className={`text-sm ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`}>
+                                            {getAuthorName(post.authorId)}
+                                            {isPostOwner(post) && (
+                                                <span className="ml-2 text-xs text-primary/70">(Jij)</span>
+                                            )}
+                                        </span>
+                                    </div>
+                                </td>
+
+                                {/* Category */}
+                                <td className="px-6 py-4">
+                                    <span className="text-sm text-neutral-600 dark:text-neutral-400">
+                                        {post.category || 'Uncategorized'}
+                                    </span>
+                                </td>
+
+                                {/* Status Badge */}
+                                <td className="px-6 py-4">
+                                    <span
+                                        className={`inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border ${getStatusBadgeColor(post.status)}`}
+                                    >
+                                        {post.status}
+                                    </span>
+                                </td>
+
+                                {/* Last Modified */}
+                                <td className="px-6 py-4">
+                                    <div className="flex items-center gap-2">
+                                        <Calendar size={14} className="text-neutral-400" />
+                                        <span className="text-sm text-neutral-600 dark:text-neutral-400">
+                                            {formatDate(post.updatedAt, locale)}
+                                        </span>
+                                    </div>
+                                </td>
+
+                                {/* Actions Menu - Only show for own posts */}
+                                <td className="px-6 py-4">
+                                    {isPostOwner(post) ? (
+                                        <div className="flex items-center justify-end">
+                                            <PostActionsMenu
+                                                onEdit={() => onEdit(post.id)}
+                                                onPreview={() => onPreview(post.id)}
+                                                onDuplicate={() => onDuplicate(post.id)}
+                                                onDelete={() => onDelete(post.id)}
+                                            />
+                                        </div>
+                                    ) : (
+                                        <div className="flex items-center justify-end text-neutral-400 text-xs">
+                                            Alleen auteur
+                                        </div>
+                                    )}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+

package/src/views/PostManager/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Post Manager View Exports
+ */
+
+export { PostManagerView } from './PostManagerView';
+export type { PostManagerViewProps } from './PostManagerView';
+
+// Sub-components (for potential reuse)
+export { PostStats } from './PostStats';
+export { PostFilters } from './PostFilters';
+export { PostTable } from './PostTable';
+export { PostCards } from './PostCards';
+export { EmptyState } from './EmptyState';
+export { PostActionsMenu } from './PostActionsMenu';
+

package/src/views/Preview/PreviewBridgeView.tsx

@@ -0,0 +1,64 @@
+/**
+ * Preview Bridge View
+ * Live preview of blog post
+ * Follows dashboard earth-tone design system
+ */
+
+'use client';
+
+import React from 'react';
+import { ExternalLink, RefreshCw } from 'lucide-react';
+
+export interface PreviewBridgeViewProps {
+    postId?: string;
+    siteId: string;
+    locale: string;
+}
+
+export function PreviewBridgeView({ postId, siteId, locale }: PreviewBridgeViewProps) {
+    return (
+        <div className="h-full w-full bg-white dark:bg-neutral-900 flex flex-col">
+            {/* Header */}
+            <div className="flex items-center justify-between p-6 border-b border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800/50">
+                <div>
+                    <h1 className="text-xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter">
+                        Preview
+                    </h1>
+                    <p className="text-xs text-neutral-500 dark:text-neutral-400">
+                        {postId ? `Previewing post: ${postId}` : 'Live preview of your post'}
+                    </p>
+                </div>
+
+                <div className="flex items-center gap-3">
+                    <button className="inline-flex items-center gap-2 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-all">
+                        <RefreshCw size={14} />
+                        Refresh
+                    </button>
+                    <button className="inline-flex items-center gap-2 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-all">
+                        <ExternalLink size={14} />
+                        Open in New Tab
+                    </button>
+                </div>
+            </div>
+
+            {/* Preview Container */}
+            <div className="flex-1 overflow-hidden bg-neutral-100 dark:bg-neutral-800/30">
+                <div className="h-full w-full p-8">
+                    <div className="h-full w-full bg-white dark:bg-neutral-900 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700 overflow-hidden">
+                        <div className="h-full w-full flex items-center justify-center">
+                            <div className="text-center">
+                                <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
+                                    Preview will be rendered here
+                                </p>
+                                <p className="text-xs text-neutral-400">
+                                    Using iframe or side-by-side panel
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+

package/src/views/Preview/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Preview Bridge View Exports
+ */
+
+export { PreviewBridgeView } from './PreviewBridgeView';
+export type { PreviewBridgeViewProps } from './PreviewBridgeView';
+