@jhits/plugin-blog 0.0.3 → 0.0.5

package/package.json

@@ -1,57 +1,57 @@
 {
-    "name": "@jhits/plugin-blog",
-    "version": "0.0.3",
-    "description": "Professional blog management system for the JHITS ecosystem",
-    "publishConfig": {
-        "access": "public"
+  "name": "@jhits/plugin-blog",
+  "version": "0.0.5",
+  "description": "Professional blog management system for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
     },
-    "main": "./src/index.tsx",
-    "types": "./src/index.tsx",
-    "exports": {
-        ".": {
-            "types": "./src/index.tsx",
-            "default": "./src/index.tsx"
-        },
-        "./server": {
-            "types": "./src/index.server.ts",
-            "default": "./src/index.server.ts"
-        }
-    },
-    "dependencies": {
-        "@jhits/plugin-core": "^0.0.1",
-        "@jhits/plugin-content": "^0.0.1",
-        "@jhits/plugin-images": "^0.0.1",
-        "bcrypt": "^6.0.0",
-        "framer-motion": "^12.23.26",
-        "lucide-react": "^0.562.0",
-        "mongodb": "^7.0.0",
-        "next-auth": "^4.24.13"
-    },
-    "peerDependencies": {
-        "next": ">=15.0.0",
-        "next-intl": ">=4.0.0",
-        "next-themes": ">=0.4.0",
-        "react": ">=18.0.0",
-        "react-dom": ">=18.0.0"
-    },
-    "devDependencies": {
-        "@tailwindcss/postcss": "^4",
-        "@types/bcrypt": "^6.0.0",
-        "@types/node": "^20.19.27",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
-        "eslint": "^9",
-        "eslint-config-next": "16.1.1",
-        "next": "16.1.1",
-        "next-intl": "4.6.1",
-        "next-themes": "0.4.6",
-        "react": "19.2.3",
-        "react-dom": "19.2.3",
-        "tailwindcss": "^4",
-        "typescript": "^5"
-    },
-    "files": [
-        "src",
-        "package.json"
-    ]
-}
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "@jhits/plugin-core": "^0.0.1",
+    "@jhits/plugin-content": "^0.0.1",
+    "@jhits/plugin-images": "^0.0.1",
+    "bcrypt": "^6.0.0",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.562.0",
+    "mongodb": "^7.0.0",
+    "next-auth": "^4.24.13"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "next-intl": ">=4.0.0",
+    "next-themes": ">=0.4.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/bcrypt": "^6.0.0",
+    "@types/node": "^20.19.27",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.1",
+    "next": "16.1.1",
+    "next-intl": "4.6.1",
+    "next-themes": "0.4.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ]
+}

package/src/api/handler.ts

@@ -8,7 +8,6 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { APIBlogDocument, apiToBlogPost, editorStateToAPI } from '../lib/mappers/apiMapper';
 import { slugify } from '../lib/utils/slugify';
 
 export interface BlogApiConfig {
@@ -68,7 +67,7 @@ export async function GET(req: NextRequest, config: BlogApiConfig): Promise<Next
                 .find(query)
                 .sort({ 'publicationData.date': -1 })
                 .skip(skip)
-                .limit(limit)
+                .limit(isAdminView ? 0 : limit)
                 .toArray(),
             blogs.countDocuments(query),
         ]);
@@ -292,7 +291,7 @@ export async function PUT_BY_SLUG(
             const hasContent =
                 (contentBlocks && Array.isArray(contentBlocks) && contentBlocks.length > 0) ||
                 (content && Array.isArray(content) && content.length > 0);
-            
+
             // Collect all missing fields for better error messages
             const missingFields: string[] = [];
             if (!summary?.trim()) missingFields.push('summary');
@@ -303,7 +302,7 @@ export async function PUT_BY_SLUG(
                 missingFields.push('category');
             }
             if (!hasContent) missingFields.push('content');
-            
+
             if (missingFields.length > 0) {
                 console.log('[BlogAPI] PUT_BY_SLUG validation failed:', {
                     isPublishing,
@@ -316,9 +315,9 @@ export async function PUT_BY_SLUG(
                     contentLength: content?.length || 0,
                 });
                 return NextResponse.json(
-                    { 
+                    {
                         message: `Missing required fields for publishing: ${missingFields.join(', ')}`,
-                        missingFields 
+                        missingFields
                     },
                     { status: 400 }
                 );
@@ -341,7 +340,7 @@ export async function PUT_BY_SLUG(
         } else if (publicationData?.status === 'draft') {
             finalStatus = 'concept';
         }
-        
+
         const updateData = {
             title: title.trim(),
             summary: (summary || '').trim(),

package/src/api/router.ts

@@ -37,21 +37,18 @@ export async function handleBlogApi(
         getUserId: config.getUserId,
         collectionName: config.collectionName || 'blogs',
     });
-    
+
     const method = req.method;
     // Handle empty path array - means we're at /api/plugin-blog
     // Ensure path is always an array
     const safePath = Array.isArray(path) ? path : [];
     const route = safePath.length > 0 ? safePath[0] : '';
 
-    console.log(`[BlogApiRouter] method=${method}, path=${JSON.stringify(safePath)}, route=${route}, url=${req.url}`);
-    
     try {
         // Route: /api/plugin-blog (list/create) - empty path or 'list'
         // This handles both /api/plugin-blog and /api/plugin-blog?limit=3
         if (!route || route === 'list') {
             if (method === 'GET') {
-                console.log('[BlogApiRouter] Routing to BlogListHandler');
                 return await BlogListHandler(req, blogApiConfig);
             }
             if (method === 'POST') {

package/src/views/PostManager/PostActionsMenu.tsx

@@ -69,7 +69,7 @@ export function PostActionsMenu({
     const menuContent = isOpen && (
         <div
             ref={menuRef}
-            className="fixed w-48 bg-dashboard-card border border-dashboard-border rounded-2xl shadow-xl z-[9999] overflow-hidden"
+            className="fixed w-48 bg-dashboard-card border border-dashboard-border rounded-2xl shadow-xl z-9999 overflow-hidden"
             style={{
                 top: `${menuPosition.top}px`,
                 right: `${menuPosition.right}px`,

package/src/views/PostManager/PostManagerView.tsx

@@ -25,6 +25,7 @@ type ViewMode = 'list' | 'cards';
 
 export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
     const [posts, setPosts] = useState<PostListItem[]>([]);
+    const [totalPosts, setTotalPosts] = useState<number>(0);
     const [loading, setLoading] = useState(true);
     const [search, setSearch] = useState('');
     const [statusFilter, setStatusFilter] = useState<PostStatus | 'all'>('all');
@@ -85,6 +86,7 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                         };
                     });
                     setPosts(postListItems);
+                    setTotalPosts(data.total);
                 }
             } catch (error) {
                 console.error('Failed to fetch posts:', error);
@@ -173,6 +175,7 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                     if (response.ok) {
                         // Remove from local state
                         setPosts((prev) => prev.filter((p) => p.id !== postId));
+                        setTotalPosts(prev => prev - 1);
                     } else {
                         const error = await response.json();
                         alert(error.error || 'Failed to delete post');
@@ -210,7 +213,7 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
             </div>
 
             {/* Stats Summary */}
-            <PostStats posts={posts} />
+            <PostStats total={totalPosts} 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">
@@ -229,8 +232,8 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                     <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'
+                            ? '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"
                     >
@@ -239,8 +242,8 @@ export function PostManagerView({ siteId, locale }: PostManagerViewProps) {
                     <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'
+                            ? '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"
                     >

package/src/views/PostManager/PostStats.tsx

@@ -5,16 +5,16 @@
 
 'use client';
 
-import React from 'react';
 import { FileText, CheckCircle2, Clock, Archive } from 'lucide-react';
-import { PostListItem, PostStatus } from '../../types/post';
+import { PostListItem } from '../../types/post';
+import { ReactNode } from 'react';
 
 export interface PostStatsProps {
     posts: PostListItem[];
+    total: Number;
 }
 
-export function PostStats({ posts }: PostStatsProps) {
-    const total = posts.length;
+export function PostStats({ total, posts }: PostStatsProps) {
     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;
@@ -65,7 +65,7 @@ export function PostStats({ posts }: PostStatsProps) {
                             </div>
                             <div>
                                 <p className="text-2xl font-black text-neutral-950 dark:text-white">
-                                    {stat.value}
+                                    {stat.value as ReactNode}
                                 </p>
                                 <p className="text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">
                                     {stat.label}

package/src/views/PostManager/PostTable.tsx

@@ -56,7 +56,7 @@ export function PostTable({
     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
@@ -144,9 +144,11 @@ export function PostTable({
                                             </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>
+                                            <button onClick={() => onEdit(post.id)} className='hover:cursor-pointer'>
+                                                <h3 className="font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1">
+                                                    {post.title}
+                                                </h3>
+                                            </button>
                                             <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono">
                                                 /{post.slug}
                                             </p>

package/src/api/README.md

@@ -1,224 +0,0 @@
-# Blog API
-
-RESTful API handlers for blog posts, included in the `@jhits/plugin-blog` package.
-
-## Installation
-
-The API handlers are automatically available when you install `@jhits/plugin-blog`.
-
-## Setup
-
-### 1. Create API Route in Your App
-
-Create API routes in your Next.js app to mount the blog API handlers:
-
-**`src/app/api/blogs/route.ts`** - List and create blogs:
-```typescript
-import { NextRequest } from 'next/server';
-import { GET, POST, createBlogApiConfig } from '@jhits/plugin-blog/api';
-import clientPromise from '@/lib/mongodb';
-import { cookies } from 'next/headers';
-import jwt from 'jsonwebtoken';
-
-const JWT_SECRET = process.env.JWT_SECRET || 'secret';
-
-async function getUserId(req: NextRequest): Promise<string | null> {
-    try {
-        const cookieStore = await cookies();
-        const token = cookieStore.get('auth_token')?.value;
-        if (!token) return null;
-        const decoded = jwt.verify(token, JWT_SECRET) as { id: string };
-        return decoded.id;
-    } catch {
-        return null;
-    }
-}
-
-const config = createBlogApiConfig({
-    getDb: async () => clientPromise,
-    getUserId,
-    collectionName: 'blogs', // optional, defaults to 'blogs'
-});
-
-export async function GET(req: NextRequest) {
-    return GET(req, undefined, config);
-}
-
-export async function POST(req: NextRequest) {
-    return POST(req, undefined, config);
-}
-```
-
-**`src/app/api/blogs/[slug]/route.ts`** - Get, update, and delete by slug:
-```typescript
-import { NextRequest } from 'next/server';
-import { GET, PUT, DELETE, createBlogApiConfig } from '@jhits/plugin-blog/api';
-import clientPromise from '@/lib/mongodb';
-import { cookies } from 'next/headers';
-import jwt from 'jsonwebtoken';
-
-const JWT_SECRET = process.env.JWT_SECRET || 'secret';
-
-async function getUserId(req: NextRequest): Promise<string | null> {
-    try {
-        const cookieStore = await cookies();
-        const token = cookieStore.get('auth_token')?.value;
-        if (!token) return null;
-        const decoded = jwt.verify(token, JWT_SECRET) as { id: string };
-        return decoded.id;
-    } catch {
-        return null;
-    }
-}
-
-const config = createBlogApiConfig({
-    getDb: async () => clientPromise,
-    getUserId,
-    collectionName: 'blogs',
-});
-
-export async function GET(
-    req: NextRequest,
-    { params }: { params: Promise<{ slug: string }> }
-) {
-    return GET(req, { params }, config);
-}
-
-export async function PUT(
-    req: NextRequest,
-    { params }: { params: Promise<{ slug: string }> }
-) {
-    return PUT(req, { params }, config);
-}
-
-export async function DELETE(
-    req: NextRequest,
-    { params }: { params: Promise<{ slug: string }> }
-) {
-    return DELETE(req, { params }, config);
-}
-```
-
-## API Endpoints
-
-### GET /api/blogs
-List all blog posts.
-
-**Query Parameters:**
-- `limit` (number, default: 10) - Number of posts to return
-- `skip` (number, default: 0) - Number of posts to skip
-- `status` (string, optional) - Filter by status (`published`, `concept`, `draft`)
-- `admin` (boolean, default: false) - If true, returns all posts for authenticated user (including drafts)
-
-**Response:**
-```json
-{
-    "blogs": [...],
-    "total": 100
-}
-```
-
-### POST /api/blogs
-Create a new blog post.
-
-**Request Body:**
-```json
-{
-    "title": "My Blog Post",
-    "summary": "A brief summary",
-    "contentBlocks": [...],
-    "image": {
-        "src": "/uploads/image.jpg",
-        "alt": "Image alt text",
-        "brightness": 100,
-        "blur": 0
-    },
-    "categoryTags": {
-        "category": "Technology",
-        "tags": ["web", "development"]
-    },
-    "publicationData": {
-        "status": "concept" | "published",
-        "date": "2024-01-01T00:00:00.000Z"
-    },
-    "seo": {
-        "title": "SEO Title",
-        "description": "SEO Description",
-        "keywords": ["keyword1", "keyword2"],
-        "ogImage": "/uploads/og-image.jpg",
-        "canonicalUrl": "https://example.com/blog/my-post"
-    }
-}
-```
-
-**Response:**
-```json
-{
-    "message": "Draft saved successfully",
-    "blogId": "...",
-    "slug": "my-blog-post-draft-1234"
-}
-```
-
-### GET /api/blogs/[slug]
-Get a single blog post by slug.
-
-**Response:**
-```json
-{
-    "_id": "...",
-    "title": "My Blog Post",
-    "slug": "my-blog-post",
-    "contentBlocks": [...],
-    ...
-}
-```
-
-### PUT /api/blogs/[slug]
-Update a blog post by slug.
-
-**Request Body:** Same as POST /api/blogs
-
-**Response:**
-```json
-{
-    "message": "Blog updated successfully",
-    "slug": "updated-slug"
-}
-```
-
-### DELETE /api/blogs/[slug]
-Delete a blog post by slug.
-
-**Response:**
-```json
-{
-    "message": "Blog deleted successfully"
-}
-```
-
-## Security
-
-- All endpoints (except public GET) require authentication
-- Users can only access/modify their own posts
-- Published posts are visible to everyone
-- Drafts/concepts are only visible to the author
-
-## Error Responses
-
-All endpoints return standard HTTP status codes:
-- `200` - Success
-- `400` - Bad Request (validation errors)
-- `401` - Unauthorized (not authenticated)
-- `403` - Forbidden (not authorized)
-- `404` - Not Found
-- `500` - Internal Server Error
-
-Error response format:
-```json
-{
-    "error": "Error message",
-    "detail": "Detailed error information"
-}
-```
-

package/src/hooks/README.md

@@ -1,91 +0,0 @@
-# Blog Plugin Hooks
-
-React hooks for fetching blog data in client applications.
-
-## useBlogs
-
-Fetch a list of blog posts with automatic loading and error handling.
-
-### Usage
-
-```tsx
-import { useBlogs } from '@jhits/plugin-blog';
-
-function MyComponent() {
-    const { blogs, loading, error, total, refetch } = useBlogs({
-        limit: 10,
-        skip: 0,
-        status: 'published',
-        admin: false,
-        apiBaseUrl: '/api/blogs',
-    });
-
-    if (loading) return <div>Loading...</div>;
-    if (error) return <div>Error: {error}</div>;
-
-    return (
-        <div>
-            {blogs.map(blog => (
-                <div key={blog.id}>
-                    <h2>{blog.title}</h2>
-                    <p>{blog.excerpt}</p>
-                </div>
-            ))}
-        </div>
-    );
-}
-```
-
-### Options
-
-- `limit` (number, default: 10): Maximum number of posts to fetch
-- `skip` (number, default: 0): Number of posts to skip (for pagination)
-- `status` (string, optional): Filter by status ('published', 'draft', 'concept')
-- `admin` (boolean, default: false): Whether to fetch all posts for admin (includes drafts)
-- `apiBaseUrl` (string, default: '/api/blogs'): API base URL
-
-### Returns
-
-- `blogs` (PostListItem[]): Array of blog posts
-- `loading` (boolean): Whether data is currently loading
-- `error` (string | null): Error message if fetch failed
-- `total` (number): Total number of posts available
-- `refetch` (function): Function to manually refetch blogs
-
-## useBlog
-
-Fetch a single blog post by slug.
-
-### Usage
-
-```tsx
-import { useBlog } from '@jhits/plugin-blog';
-
-function BlogPost({ slug }: { slug: string }) {
-    const { blog, loading, error, refetch } = useBlog({ slug });
-
-    if (loading) return <div>Loading...</div>;
-    if (error) return <div>Error: {error}</div>;
-    if (!blog) return <div>Post not found</div>;
-
-    return (
-        <article>
-            <h1>{blog.title}</h1>
-            <div>{/* Render blog content */}</div>
-        </article>
-    );
-}
-```
-
-### Options
-
-- `slug` (string, required): Blog post slug
-- `apiBaseUrl` (string, default: '/api/blogs'): API base URL
-
-### Returns
-
-- `blog` (BlogPost | null): Blog post data
-- `loading` (boolean): Whether data is currently loading
-- `error` (string | null): Error message if fetch failed
-- `refetch` (function): Function to manually refetch the blog post
-

package/src/utils/README.md

@@ -1,75 +0,0 @@
-# Blog Plugin Client Utilities
-
-Helper functions for fetching blog data in client applications (non-React).
-
-## fetchBlogs
-
-Fetch blog posts from the API (returns a Promise).
-
-### Usage
-
-```ts
-import { fetchBlogs } from '@jhits/plugin-blog';
-
-async function loadBlogs() {
-    try {
-        const { blogs, total } = await fetchBlogs({
-            limit: 10,
-            skip: 0,
-            status: 'published',
-            admin: false,
-            apiBaseUrl: '/api/blogs',
-        });
-
-        console.log(`Found ${total} posts`);
-        blogs.forEach(blog => {
-            console.log(blog.title);
-        });
-    } catch (error) {
-        console.error('Failed to fetch blogs:', error);
-    }
-}
-```
-
-### Options
-
-- `limit` (number, default: 10): Maximum number of posts to fetch
-- `skip` (number, default: 0): Number of posts to skip (for pagination)
-- `status` (string, optional): Filter by status ('published', 'draft', 'concept')
-- `admin` (boolean, default: false): Whether to fetch all posts for admin (includes drafts)
-- `apiBaseUrl` (string, default: '/api/blogs'): API base URL
-
-### Returns
-
-Promise resolving to:
-- `blogs` (PostListItem[]): Array of blog posts
-- `total` (number): Total number of posts available
-
-## fetchBlog
-
-Fetch a single blog post by slug (returns a Promise).
-
-### Usage
-
-```ts
-import { fetchBlog } from '@jhits/plugin-blog';
-
-async function loadBlogPost(slug: string) {
-    try {
-        const blog = await fetchBlog({ slug });
-        console.log(blog.title);
-    } catch (error) {
-        console.error('Failed to fetch blog:', error);
-    }
-}
-```
-
-### Options
-
-- `slug` (string, required): Blog post slug
-- `apiBaseUrl` (string, default: '/api/blogs'): API base URL
-
-### Returns
-
-Promise resolving to a `BlogPost` object.
-

package/src/views/README.md

@@ -1,82 +0,0 @@
-# Blog Plugin Views
-
-## Directory Structure
-
-```
-src/views/
-├── PostManager/
-│   ├── PostManagerView.tsx    # Professional table layout for post management
-│   └── index.ts
-├── CanvasEditor/
-│   ├── CanvasEditorView.tsx   # Drag-and-drop block editor workspace
-│   └── index.ts
-├── SlugSEO/
-│   ├── SlugSEOManagerView.tsx # URL slug and SEO metadata management
-│   └── index.ts
-└── Preview/
-    ├── PreviewBridgeView.tsx  # Live preview of blog posts
-    └── index.ts
-```
-
-## Design System Compliance
-
-All views follow the dashboard's earth-tone design system:
-
-- **Colors**: Neutral palette (neutral-100 to neutral-900), primary (violet-700)
-- **Typography**: 
-  - Headings: `font-black uppercase tracking-tighter`
-  - Labels: `text-[10px] font-black uppercase tracking-widest`
-  - Body: `font-sans`
-- **Layout**: 
-  - Containers: `rounded-[2.5rem]`
-  - Padding: `p-8`
-  - Backgrounds: `bg-white dark:bg-neutral-900`
-- **Buttons**: `rounded-full`, uppercase, tracking-widest
-- **Borders**: `border-neutral-300 dark:border-neutral-700`
-
-## PostManagerView
-
-Professional table layout with:
-- Search and filter functionality
-- Status badges (published, draft, scheduled, archived)
-- Empty state with "Create Your First Post" CTA
-- Action buttons (Edit, Preview, Delete)
-- Mock data for development
-
-## CanvasEditorView
-
-Block editor workspace with:
-- Toolbar with Back, Preview, and Save buttons
-- Title input field
-- Block canvas area
-- Empty state for adding first block
-- Integrated with EditorProvider for state management
-
-## SlugSEOManagerView
-
-SEO management interface with:
-- URL slug editor with collision detection placeholder
-- Google-style search result preview
-- Meta description editor with character counter
-
-## PreviewBridgeView
-
-Live preview interface with:
-- Header with Refresh and Open in New Tab buttons
-- Preview container (ready for iframe or side-by-side panel)
-- Placeholder for preview rendering
-
-## Usage
-
-Views are imported and used in the main `BlogPlugin` router:
-
-```typescript
-import { PostManagerView } from './views/PostManager';
-import { CanvasEditorView } from './views/CanvasEditor';
-// ... etc
-
-// In router switch statement:
-case 'posts':
-    return <PostManagerView siteId={siteId} locale={locale} />;
-```
-