@jhits/plugin-blog 0.0.19 → 0.0.20

package/dist/views/PostManager/PostManagerView.js

@@ -1,18 +1,16 @@
 /**
  * Post Manager View
- * Production-ready listing page for managing blog posts
- * Follows dashboard earth-tone design system
+ * Natural scroll layout with sticky header synchronization
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect } from 'react';
-import { Plus, List, Grid3x3 } from 'lucide-react';
+import { Plus, List, Grid3x3, Settings, Loader2, Zap } from 'lucide-react';
 import { PostStats } from './PostStats';
 import { PostFilters } from './PostFilters';
 import { PostTable } from './PostTable';
 import { PostCards } from './PostCards';
 import { EmptyState } from './EmptyState';
-import { apiToBlogPost } from '../../lib/mappers/apiMapper';
 const STORAGE_KEY_PREFIX = 'blog-view-mode';
 export function PostManagerView({ siteId, locale }) {
     const [posts, setPosts] = useState([]);
@@ -22,7 +20,6 @@ export function PostManagerView({ siteId, locale }) {
     const [statusFilter, setStatusFilter] = useState('all');
     const [categoryFilter, setCategoryFilter] = useState('all');
     const [currentLanguage, setCurrentLanguage] = useState(locale || 'nl');
-    // Load view mode preference from localStorage
     const getStoredViewMode = () => {
         if (typeof window === 'undefined')
             return 'list';
@@ -30,13 +27,11 @@ export function PostManagerView({ siteId, locale }) {
         return (stored === 'list' || stored === 'cards') ? stored : 'list';
     };
     const [viewMode, setViewMode] = useState(getStoredViewMode);
-    // Save view mode preference to localStorage when it changes
     useEffect(() => {
         if (typeof window !== 'undefined') {
             localStorage.setItem(`${STORAGE_KEY_PREFIX}-${siteId}`, viewMode);
         }
     }, [viewMode, siteId]);
-    // Fetch posts from API
     useEffect(() => {
         const fetchPosts = async () => {
             try {
@@ -44,39 +39,20 @@ export function PostManagerView({ siteId, locale }) {
                 const response = await fetch(`/api/plugin-blog?admin=true&language=${currentLanguage}`);
                 const data = await response.json();
                 if (data.blogs && Array.isArray(data.blogs)) {
-                    // Convert API format to PostListItem format
                     const postListItems = data.blogs.map((doc) => {
-                        const blogPost = apiToBlogPost(doc);
-                        // Use semantic ID (id) - plugin-images handles resolution
-                        // The id is the semantic ID (e.g., "blog-featured-{slug}") which plugin-images resolves
-                        const featuredImageId = blogPost.metadata.featuredImage?.id;
-                        // Extract category from metadata or hero block
-                        let category = 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.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,
-                            lang: blogPost.metadata.lang,
+                            id: doc.id,
+                            title: doc.title,
+                            slug: doc.slug,
+                            status: doc.status,
+                            date: doc.publication?.date,
+                            excerpt: doc.summary,
+                            featuredImage: doc.image?.id || doc.image?.src,
+                            authorId: doc.authorId,
+                            author: doc.author,
+                            updatedAt: doc.updatedAt || doc.publication?.date || doc.date || new Date().toISOString(),
+                            category: doc.categoryTags?.category,
+                            lang: doc.lang,
                             availableLanguages: doc.availableLanguages,
                             languages: doc.languages,
                         };
@@ -94,7 +70,6 @@ export function PostManagerView({ siteId, locale }) {
         };
         fetchPosts();
     }, [currentLanguage]);
-    // Extract unique categories from posts
     const categories = React.useMemo(() => {
         const categorySet = new Set();
         posts.forEach(post => {
@@ -104,7 +79,6 @@ export function PostManagerView({ siteId, locale }) {
         });
         return Array.from(categorySet).sort();
     }, [posts]);
-    // Extract unique languages from all posts
     const availableLanguages = React.useMemo(() => {
         const langSet = new Set();
         posts.forEach(post => {
@@ -114,14 +88,12 @@ export function PostManagerView({ siteId, locale }) {
             if (post.lang)
                 langSet.add(post.lang);
         });
-        // Always include the current locale/language to ensure it's selectable
         if (locale)
             langSet.add(locale);
         if (currentLanguage)
             langSet.add(currentLanguage);
         return Array.from(langSet).sort();
     }, [posts, locale, currentLanguage]);
-    // Filter posts
     const filteredPosts = React.useMemo(() => {
         return posts.filter((post) => {
             const matchesSearch = search === '' ||
@@ -133,68 +105,30 @@ export function PostManagerView({ siteId, locale }) {
             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 handleCreatePost = () => { window.location.href = '/dashboard/blog/new'; };
     const handleEdit = (postId) => {
-        // 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)
+        if (post)
             window.location.href = `/dashboard/blog/editor/${post.slug}`;
-        }
-    };
-    const handlePreview = (postId) => {
-        // Open preview in new tab
-        window.open(`/dashboard/blog/preview/${postId}`, '_blank');
-    };
-    const handleDuplicate = (postId) => {
-        // TODO: Implement duplicate functionality
-        const post = posts.find((p) => p.id === postId);
-        if (post) {
-            const duplicated = {
-                ...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 handlePreview = (postId) => { window.open(`/dashboard/blog/preview/${postId}`, '_blank'); };
+    const handleDuplicate = (postId) => { };
     const handleDelete = async (postId) => {
-        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));
-                        setTotalPosts(prev => prev - 1);
-                    }
-                    else {
-                        const error = await response.json();
-                        alert(error.error || 'Failed to delete post');
-                    }
+        if (confirm('Are you sure?')) {
+            const post = posts.find(p => p.id === postId);
+            if (post) {
+                const res = await fetch(`/api/plugin-blog/${post.slug}`, { method: 'DELETE' });
+                if (res.ok) {
+                    setPosts((prev) => prev.filter((p) => p.id !== postId));
+                    setTotalPosts(prev => prev - 1);
                 }
             }
-            catch (error) {
-                console.error('Failed to delete post:', error);
-                alert('Failed to delete post');
-            }
         }
     };
     const hasActiveFilters = search !== '' || statusFilter !== 'all' || categoryFilter !== 'all';
-    return (_jsxs("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2", children: "Blog Posts" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Manage your blog posts, drafts, and published content" })] }), _jsxs("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", children: [_jsx(Plus, { size: 16 }), "New Post"] })] }), _jsx(PostStats, { total: totalPosts, posts: posts }), _jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6", children: [_jsx(PostFilters, { search: search, onSearchChange: setSearch, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, categoryFilter: categoryFilter, onCategoryFilterChange: setCategoryFilter, categories: categories, language: currentLanguage, onLanguageChange: setCurrentLanguage, availableLanguages: availableLanguages }), _jsxs("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", children: [_jsx("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", children: _jsx(List, { size: 18 }) }), _jsx("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", children: _jsx(Grid3x3, { size: 18 }) })] })] }), loading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredPosts.length === 0 ? (_jsx(EmptyState, { hasFilters: hasActiveFilters, onCreatePost: handleCreatePost })) : viewMode === 'list' ? (_jsx(PostTable, { posts: filteredPosts, locale: locale, onEdit: handleEdit, onPreview: handlePreview, onDuplicate: handleDuplicate, onDelete: handleDelete })) : (_jsx(PostCards, { posts: filteredPosts, locale: locale, onEdit: handleEdit, onPreview: handlePreview, onDuplicate: handleDuplicate, onDelete: handleDelete }))] }));
+    return (_jsxs("div", { className: "w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 bg-transparent", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-end justify-between gap-8 px-2", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/15 border border-primary/30 text-primary text-[10px] font-bold uppercase tracking-wider shadow-sm", children: [_jsx(Zap, { size: 12, className: "fill-primary animate-pulse" }), _jsx("span", { children: "Editorial Content Control" })] }), _jsxs("div", { children: [_jsxs("h1", { className: "text-4xl font-bold text-dashboard-text tracking-tight leading-none mb-2", children: ["Blog ", _jsx("span", { className: "text-primary", children: "&" }), " Articles"] }), _jsx("p", { className: "text-sm text-dashboard-text-secondary font-medium max-w-md leading-relaxed opacity-80", children: "Create and manage your digital publications and stories across the ecosystem." })] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("button", { onClick: () => window.location.href = '/dashboard/blog/settings', className: "p-3.5 bg-dashboard-card/50 border border-dashboard-border/40 text-dashboard-text-secondary rounded-2xl hover:text-primary hover:border-primary/30 transition-all active:scale-95 shadow-sm", title: "Blog Settings", children: _jsx(Settings, { size: 18 }) }), _jsxs("button", { onClick: handleCreatePost, className: "group relative flex items-center gap-3 px-7 py-3.5 bg-primary text-white rounded-2xl text-[10px] font-bold uppercase tracking-widest overflow-hidden transition-all hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20", children: [_jsx(Plus, { size: 18, className: "relative z-10" }), _jsx("span", { className: "relative z-10", children: "Add New Post" })] })] })] }), _jsx("div", { className: "px-2", children: _jsx(PostStats, { total: totalPosts, posts: posts }) }), _jsx("div", { className: "sticky top-[-40px] lg:top-[-40px] z-40 bg-dashboard-bg/40 backdrop-blur-xl border-y border-dashboard-border/40 py-4 px-2 ml-[-8px] mr-[-8px]", children: _jsxs("div", { className: "flex flex-col lg:flex-row items-center gap-4", children: [_jsx(PostFilters, { search: search, onSearchChange: setSearch, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, categoryFilter: categoryFilter, onCategoryFilterChange: setCategoryFilter, categories: categories, language: currentLanguage, onLanguageChange: setCurrentLanguage, availableLanguages: availableLanguages }), _jsxs("div", { className: "flex items-center gap-1.5 p-1.5 bg-dashboard-card/50 rounded-xl border border-dashboard-border/40", children: [_jsx("button", { onClick: () => setViewMode('list'), className: `p-2.5 rounded-lg transition-all ${viewMode === 'list'
+                                        ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                        : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'}`, title: "List View", children: _jsx(List, { size: 18 }) }), _jsx("button", { onClick: () => setViewMode('cards'), className: `p-2.5 rounded-lg transition-all ${viewMode === 'cards'
+                                        ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                                        : 'text-dashboard-text-secondary hover:text-primary hover:bg-primary/5'}`, title: "Card View", children: _jsx(Grid3x3, { size: 18 }) })] })] }) }), _jsx("div", { className: "px-2 min-h-[400px] pb-32", children: loading ? (_jsxs("div", { className: "flex flex-col items-center justify-center py-32 gap-4", children: [_jsx(Loader2, { className: "animate-spin text-primary opacity-40", size: 40 }), _jsx("p", { className: "text-[10px] font-bold text-primary uppercase tracking-widest animate-pulse", children: "Loading Publications" })] })) : filteredPosts.length === 0 ? (_jsx(EmptyState, { hasFilters: hasActiveFilters, onCreatePost: handleCreatePost })) : viewMode === 'list' ? (_jsx(PostTable, { posts: filteredPosts, locale: locale, onEdit: handleEdit, onPreview: handlePreview, onDuplicate: handleDuplicate, onDelete: handleDelete })) : (_jsx(PostCards, { posts: filteredPosts, locale: locale, onEdit: handleEdit, onPreview: handlePreview, onDuplicate: handleDuplicate, onDelete: handleDelete })) })] }));
 }

package/dist/views/PostManager/PostStats.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostStats.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostStats.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,2CA+DzD"}
+{"version":3,"file":"PostStats.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostStats.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,2CAgEzD"}

package/dist/views/PostManager/PostStats.js

@@ -14,33 +14,33 @@ export function PostStats({ total, posts }) {
             label: 'Total Posts',
             value: total,
             icon: FileText,
-            color: 'text-neutral-600 dark:text-neutral-400',
-            bgColor: 'bg-neutral-100 dark:bg-neutral-800',
+            color: 'text-primary',
+            accent: 'bg-primary',
         },
         {
             label: 'Published',
             value: published,
             icon: CheckCircle2,
-            color: 'text-green-600 dark:text-green-400',
-            bgColor: 'bg-green-500/10 dark:bg-green-500/20',
+            color: 'text-emerald-500',
+            accent: 'bg-emerald-500',
         },
         {
             label: 'Drafts',
             value: drafts,
             icon: Clock,
-            color: 'text-amber-600 dark:text-amber-400',
-            bgColor: 'bg-amber-500/10 dark:bg-amber-500/20',
+            color: 'text-amber-500',
+            accent: 'bg-amber-500',
         },
         {
             label: 'Scheduled',
             value: scheduled,
             icon: Archive,
-            color: 'text-blue-600 dark:text-blue-400',
-            bgColor: 'bg-blue-500/10 dark:bg-blue-500/20',
+            color: 'text-blue-500',
+            accent: 'bg-blue-500',
         },
     ];
-    return (_jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4 mb-6", children: stats.map((stat) => {
+    return (_jsx("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-5", children: stats.map((stat) => {
             const Icon = stat.icon;
-            return (_jsx("div", { className: `p-4 rounded-2xl border border-neutral-300 dark:border-neutral-700 ${stat.bgColor}`, children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `p-2 rounded-xl ${stat.bgColor}`, children: _jsx(Icon, { className: `size-5 ${stat.color}` }) }), _jsxs("div", { children: [_jsx("p", { className: "text-2xl font-black text-neutral-950 dark:text-white", children: stat.value }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: stat.label })] })] }) }, stat.label));
+            return (_jsxs("div", { className: "bg-dashboard-card/50 border border-dashboard-border/40 p-5 rounded-2xl relative overflow-hidden group transition-all duration-500", children: [_jsx("div", { className: `absolute top-0 right-0 p-4 opacity-5 group-hover:scale-105 transition-all duration-700 ${stat.color}`, children: _jsx(Icon, { size: 80 }) }), _jsxs("div", { className: "relative z-10", children: [_jsxs("div", { className: "flex items-center gap-2 mb-1", children: [_jsx("div", { className: `size-1.5 rounded-full ${stat.accent} animate-pulse shadow-[0_0_8px_rgba(var(--color-primary),0.5)]` }), _jsx("label", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest block opacity-80", children: stat.label })] }), _jsx("p", { className: `text-3xl font-bold tracking-tight ${stat.color}`, children: stat.value })] })] }, stat.label));
         }) }));
 }

package/dist/views/PostManager/PostTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PostTable.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostTable.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,EAAE,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAK5D,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AA4BD,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GACX,EAAE,cAAc,2CAsLhB"}
+{"version":3,"file":"PostTable.d.ts","sourceRoot":"","sources":["../../../src/views/PostManager/PostTable.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,EAAE,YAAY,EAAc,MAAM,kBAAkB,CAAC;AAK5D,MAAM,WAAW,cAAc;IAC3B,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AA4BD,wBAAgB,SAAS,CAAC,EACtB,KAAK,EACL,MAAM,EACN,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,GACX,EAAE,cAAc,2CA2JhB"}

package/dist/views/PostManager/PostTable.js

@@ -4,26 +4,25 @@
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Calendar, User, UserCheck } from 'lucide-react';
-import { Image } from '@jhits/plugin-images';
+import { FileText, Tag } from 'lucide-react';
+import { Image as PluginImage } from '@jhits/plugin-images';
 import { PostActionsMenu } from './PostActionsMenu';
 import { LanguageFlags } from './LanguageFlags';
 import { useSession } from 'next-auth/react';
 function getStatusBadgeColor(status) {
     switch (status) {
         case 'published':
-            return 'bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20';
+            return 'bg-emerald-500 text-white border-emerald-400 shadow-sm';
         case 'draft':
-            return 'bg-amber-500/10 text-amber-700 dark:text-amber-400 border-amber-500/20';
+            return 'bg-amber-500 text-white border-amber-400 shadow-sm';
         case 'scheduled':
-            return 'bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20';
+            return 'bg-blue-500 text-white border-blue-400 shadow-sm';
         case 'archived':
-            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+            return 'bg-neutral-500 text-white border-neutral-400';
         case 'not-translated':
-            return 'bg-red-500/10 text-red-700 dark:text-red-400 border-red-500/20 italic';
+            return 'bg-red-500/10 text-red-500 border-red-500/20 italic';
         default:
-            return 'bg-neutral-500/10 text-neutral-700 dark:text-neutral-400 border-neutral-500/20';
+            return 'bg-neutral-500/10 text-neutral-500 border-neutral-500/20';
     }
 }
 function formatDate(dateString, locale) {
@@ -38,43 +37,27 @@ function formatDate(dateString, locale) {
 export function PostTable({ posts, locale, onEdit, onPreview, onDuplicate, onDelete, }) {
     const { data: session, status: sessionStatus } = useSession();
     const currentUserId = session?.user?.id;
-    const [userMap, setUserMap] = useState({});
     // Helper function to check if user is the owner
     const isPostOwner = (post) => {
         if (sessionStatus === 'loading')
-            return false; // Don't show actions while loading
+            return false;
         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 = {};
-                    users.forEach((user) => {
-                        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) => {
-        if (!authorId)
-            return 'Unknown';
-        return userMap[authorId] || authorId;
+    const getAuthorData = (post) => {
+        if (post.author) {
+            return {
+                name: post.author.name || 'Unknown Author',
+                image: post.author.image
+            };
+        }
+        return { name: 'Unknown Author' };
     };
-    return (_jsx("div", { className: "bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700 overflow-hidden", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { className: "bg-neutral-200 dark:bg-neutral-900/50 border-b border-neutral-300 dark:border-neutral-700", children: _jsxs("tr", { children: [_jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Post" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Author" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Category" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Languages" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Status" }), _jsx("th", { className: "px-6 py-4 text-left text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Last Modified" }), _jsx("th", { className: "px-6 py-4 text-right text-[10px] font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-neutral-300 dark:divide-neutral-700", children: posts.map((post) => (_jsxs("tr", { className: "hover:bg-white dark:hover:bg-neutral-900/50 transition-colors cursor-pointer", children: [_jsx("td", { className: "px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [post.featuredImage ? (_jsx("div", { className: "w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 overflow-hidden flex-shrink-0 relative", children: _jsx(Image, { id: post.featuredImage, alt: post.title, fill: true, editable: false, className: "w-full h-full object-cover" }) })) : (_jsx("div", { className: "w-16 h-16 rounded-xl bg-neutral-200 dark:bg-neutral-700 flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-xs text-neutral-400", children: "No Image" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("button", { onClick: () => onEdit(post.id), className: "text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent", children: _jsx("h3", { className: "font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1 text-left", children: post.title.trim() }) }), _jsxs("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 font-mono text-left", children: ["/", post.slug] })] })] }) }), _jsx("td", { className: "px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [isPostOwner(post) ? (_jsx(UserCheck, { size: 14, className: "text-primary" })) : (_jsx(User, { size: 14, className: "text-neutral-400" })), _jsxs("span", { className: `text-sm ${isPostOwner(post) ? 'text-primary font-semibold' : 'text-neutral-600 dark:text-neutral-400'}`, children: [getAuthorName(post.authorId), isPostOwner(post) && (_jsx("span", { className: "ml-2 text-xs text-primary/70", children: "(Jij)" }))] })] }) }), _jsx("td", { className: "px-6 py-4", children: _jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: post.category || 'Uncategorized' }) }), _jsx("td", { className: "px-6 py-4", children: _jsx(LanguageFlags, { post: post }) }), _jsx("td", { className: "px-6 py-4", children: _jsx("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-wider border ${getStatusBadgeColor(post.status)}`, children: post.status }) }), _jsx("td", { className: "px-6 py-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { size: 14, className: "text-neutral-400" }), _jsx("span", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: formatDate(post.updatedAt, locale) })] }) }), _jsx("td", { className: "px-6 py-4", children: isPostOwner(post) ? (_jsx("div", { className: "flex items-center justify-end", children: _jsx(PostActionsMenu, { onEdit: () => onEdit(post.id), onPreview: () => onPreview(post.id), onDuplicate: () => onDuplicate(post.id), onDelete: () => onDelete(post.id) }) })) : (_jsx("div", { className: "flex items-center justify-end text-neutral-400 text-xs", children: "Alleen auteur" })) })] }, post.id))) })] }) }) }));
+    return (_jsx("div", { className: "bg-dashboard-card/40 rounded-[2rem] overflow-hidden border border-dashboard-border/40 shadow-sm", children: _jsx("div", { className: "overflow-x-auto custom-scrollbar", children: _jsxs("table", { className: "w-full text-left border-collapse min-w-[1000px] lg:min-w-0", children: [_jsx("thead", { children: _jsxs("tr", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest border-b border-dashboard-border/40 bg-dashboard-bg/20", children: [_jsx("th", { className: "px-8 py-5", children: "Publication" }), _jsx("th", { className: "px-8 py-5 hidden lg:table-cell", children: "Author" }), _jsx("th", { className: "px-8 py-5 hidden xl:table-cell", children: "Category" }), _jsx("th", { className: "px-8 py-5", children: "Editions" }), _jsx("th", { className: "px-8 py-5", children: "Status" }), _jsx("th", { className: "px-8 py-5 hidden md:table-cell", children: "Modified" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border/30", children: posts.map((post) => {
+                            const owner = isPostOwner(post);
+                            const author = getAuthorData(post);
+                            const initials = author.name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+                            return (_jsxs("tr", { className: "group hover:bg-primary/[0.03] transition-colors", children: [_jsx("td", { className: "px-8 py-4", children: _jsxs("div", { className: "flex items-center gap-4", children: [post.featuredImage ? (_jsx("div", { className: `size-12 relative bg-dashboard-bg/50 rounded-xl overflow-hidden border transition-all shrink-0 ${owner ? 'border-primary/30' : 'border-dashboard-border/60'}`, children: _jsx(PluginImage, { id: post.featuredImage, alt: post.title, fill: true, editable: false, className: "object-cover" }) })) : (_jsx("div", { className: "size-12 rounded-xl bg-dashboard-bg/50 flex items-center justify-center border border-dashboard-border/60 opacity-20 shrink-0", children: _jsx(FileText, { size: 18 }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("button", { onClick: () => onEdit(post.id), className: "text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent group/title", children: _jsx("h3", { className: "font-bold text-dashboard-text text-sm tracking-tight group-hover/title:text-primary transition-colors truncate max-w-[200px] lg:max-w-[300px]", children: post.title.trim() }) }), _jsxs("p", { className: "text-[9px] font-mono text-dashboard-text-secondary/50 uppercase tracking-tight truncate max-w-[150px]", children: ["/", post.slug] })] })] }) }), _jsx("td", { className: "px-8 py-4 hidden lg:table-cell", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `size-8 rounded-lg flex items-center justify-center text-[10px] font-bold border transition-all overflow-hidden shrink-0 ${owner ? 'bg-primary text-white border-primary/20 shadow-lg shadow-primary/20' : 'bg-dashboard-bg/50 text-dashboard-text-secondary border-dashboard-border/60'}`, children: author.image ? (_jsx("img", { src: author.image, alt: author.name, className: "size-full object-cover", crossOrigin: "anonymous" })) : initials }), _jsxs("span", { className: `text-[10px] font-bold uppercase tracking-tight truncate max-w-[100px] ${owner ? 'text-primary' : 'text-dashboard-text/70'}`, children: [author.name, owner && _jsx("span", { className: "opacity-60 ml-0.5", children: "(YOU)" })] })] }) }), _jsx("td", { className: "px-8 py-4 hidden xl:table-cell", children: _jsxs("span", { className: "text-[10px] font-bold text-primary/80 uppercase tracking-widest flex items-center gap-1.5", children: [_jsx(Tag, { size: 10 }), post.category || 'Article'] }) }), _jsx("td", { className: "px-8 py-4", children: _jsx(LanguageFlags, { post: post }) }), _jsx("td", { className: "px-8 py-4", children: _jsx("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-[9px] font-bold uppercase tracking-wider border backdrop-blur-sm shadow-sm ${getStatusBadgeColor(post.status)}`, children: post.status === 'not-translated' ? 'Edition Missing' : post.status }) }), _jsx("td", { className: "px-8 py-4 hidden md:table-cell", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-[11px] font-semibold text-dashboard-text/80 uppercase tracking-tight", children: formatDate(post.updatedAt, locale) }), _jsx("span", { className: "text-[9px] font-bold text-dashboard-text-secondary/50 uppercase tracking-widest", children: "Last Edit" })] }) }), _jsx("td", { className: "px-8 py-4 text-right", children: owner ? (_jsx("div", { className: "flex items-center justify-end", children: _jsx(PostActionsMenu, { onEdit: () => onEdit(post.id), onPreview: () => onPreview(post.id), onDuplicate: () => onDuplicate(post.id), onDelete: () => onDelete(post.id) }) })) : (_jsx("span", { className: "text-[9px] font-bold text-dashboard-text-secondary/30 uppercase tracking-widest italic", children: "View Only" })) })] }, post.id));
+                        }) })] }) }) }));
 }

package/dist/views/Settings/SettingsView.d.ts

@@ -1,5 +1,5 @@
 /**
- * Settings View - Development/Installation Screen
+ * Settings View - Theme Configuration
  * Allows manual configuration of plugin settings (darkMode, backgroundColors)
  */
 export interface SettingsViewProps {

package/dist/views/Settings/SettingsView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAyRjE"}
+{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["../../../src/views/Settings/SettingsView.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,MAAM,WAAW,iBAAiB;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,2CAsKjE"}

package/dist/views/Settings/SettingsView.js

@@ -1,5 +1,5 @@
 /**
- * Settings View - Development/Installation Screen
+ * Settings View - Theme Configuration
  * Allows manual configuration of plugin settings (darkMode, backgroundColors)
  */
 'use client';
@@ -45,50 +45,31 @@ export function SettingsView({ siteId, locale }) {
     const handleSave = () => {
         if (typeof window === 'undefined')
             return;
-        // Initialize window global if needed
-        if (!window.__JHITS_PLUGIN_PROPS__) {
-            window.__JHITS_PLUGIN_PROPS__ = {};
-        }
         // Update configuration
-        window.__JHITS_PLUGIN_PROPS__['plugin-blog'] = {
-            ...(window.__JHITS_PLUGIN_PROPS__['plugin-blog'] || {}),
+        const config = {
             darkMode,
             backgroundColors: {
                 light: lightBg,
                 dark: darkBg,
             },
         };
-        // Also save to localStorage for persistence
-        try {
-            localStorage.setItem('__JHITS_PLUGIN_BLOG_CONFIG__', JSON.stringify({
-                darkMode,
-                backgroundColors: {
-                    light: lightBg,
-                    dark: darkBg,
-                },
-            }));
-        }
-        catch (e) {
-            console.warn('[SettingsView] Failed to save to localStorage:', e);
+        if (!window.__JHITS_PLUGIN_PROPS__) {
+            window.__JHITS_PLUGIN_PROPS__ = {};
         }
+        window.__JHITS_PLUGIN_PROPS__['plugin-blog'] = {
+            ...(window.__JHITS_PLUGIN_PROPS__['plugin-blog'] || {}),
+            ...config
+        };
+        localStorage.setItem('__JHITS_PLUGIN_BLOG_CONFIG__', JSON.stringify(config));
         setSaved(true);
         setTimeout(() => setSaved(false), 2000);
-        // Trigger a custom event to notify other components
-        window.dispatchEvent(new CustomEvent('blog-plugin-config-updated', {
-            detail: { darkMode, backgroundColors: { light: lightBg, dark: darkBg } }
-        }));
-        console.log('[SettingsView] Configuration saved:', {
-            darkMode,
-            backgroundColors: { light: lightBg, dark: darkBg },
-        });
+        window.dispatchEvent(new CustomEvent('blog-plugin-config-updated', { detail: config }));
     };
-    // Reset to defaults
     const handleReset = () => {
         setDarkMode(true);
         setLightBg('#ffffff');
         setDarkBg('#171717');
     };
-    // Load from localStorage on mount
     useEffect(() => {
         try {
             const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
@@ -99,15 +80,7 @@ export function SettingsView({ siteId, locale }) {
                 setDarkBg(config.backgroundColors?.dark ?? '#171717');
             }
         }
-        catch (e) {
-            console.warn('[SettingsView] Failed to load from localStorage:', e);
-        }
+        catch (e) { }
     }, []);
-    return (_jsx("div", { className: "min-h-screen bg-neutral-50 dark:bg-neutral-900 p-8", children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsxs("div", { className: "mb-8", children: [_jsx("h1", { className: "text-4xl font-black uppercase tracking-tighter text-neutral-950 dark:text-white mb-2", children: "Blog Plugin Settings" }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: "Configure editor appearance and behavior. Changes are applied immediately." })] }), _jsxs("div", { className: "bg-white dark:bg-neutral-800 rounded-[2.5rem] border border-neutral-200 dark:border-neutral-700 shadow-lg p-8", children: [_jsx("div", { className: "mb-8 pb-8 border-b border-neutral-200 dark:border-neutral-700", children: _jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [darkMode ? (_jsx(Moon, { className: "size-5 text-neutral-600 dark:text-neutral-400" })) : (_jsx(Sun, { className: "size-5 text-neutral-600 dark:text-neutral-400" })), _jsxs("div", { children: [_jsx("label", { className: "text-sm font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Dark Mode" }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-500 mt-1", children: "Enable dark mode for editor content area and wrappers" })] })] }), _jsx("button", { onClick: () => setDarkMode(!darkMode), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${darkMode
-                                            ? 'bg-primary'
-                                            : 'bg-neutral-300 dark:bg-neutral-600'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${darkMode ? 'translate-x-6' : 'translate-x-1'}` }) })] }) }), _jsxs("div", { className: "mb-8", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Palette, { className: "size-5 text-neutral-600 dark:text-neutral-400" }), _jsxs("div", { children: [_jsx("label", { className: "text-sm font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Background Colors" }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-500 mt-1", children: "Set custom background colors for the editor canvas" })] })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsxs("label", { className: "block text-[10px] font-black uppercase tracking-widest text-neutral-500 dark:text-neutral-500 mb-2", children: ["Light Mode Background ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "text", value: lightBg, onChange: (e) => setLightBg(e.target.value), placeholder: "#ffffff", className: "flex-1 bg-dashboard-card border border-dashboard-border p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all text-dashboard-text" }), _jsx("div", { className: "w-16 h-16 rounded-xl border-2 border-neutral-200 dark:border-neutral-700", style: { backgroundColor: lightBg } })] }), _jsx("p", { className: "text-xs text-neutral-400 dark:text-neutral-600 mt-1", children: "CSS color value (hex, rgb, or named color)" })] }), _jsxs("div", { children: [_jsxs("label", { className: "block text-[10px] font-black uppercase tracking-widest text-neutral-500 dark:text-neutral-500 mb-2", children: ["Dark Mode Background ", _jsx("span", { className: "text-neutral-400", children: "(Optional)" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("input", { type: "text", value: darkBg, onChange: (e) => setDarkBg(e.target.value), placeholder: "#171717", disabled: !darkMode, className: `flex-1 bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100 ${!darkMode ? 'opacity-50 cursor-not-allowed' : ''}` }), _jsx("div", { className: `w-16 h-16 rounded-xl border-2 border-neutral-200 dark:border-neutral-700 ${!darkMode ? 'opacity-50' : ''}`, style: { backgroundColor: darkBg } })] }), _jsx("p", { className: "text-xs text-neutral-400 dark:text-neutral-600 mt-1", children: "Only used when dark mode is enabled" })] })] })] }), _jsxs("div", { className: "mb-8 p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-700", children: [_jsx("label", { className: "block text-[10px] font-black uppercase tracking-widest text-neutral-500 dark:text-neutral-500 mb-3", children: "Preview" }), _jsx("div", { className: "h-32 rounded-xl border-2 border-dashed border-neutral-300 dark:border-neutral-700 flex items-center justify-center", style: {
-                                        backgroundColor: darkMode ? darkBg : lightBg,
-                                    }, children: _jsx("span", { className: "text-xs font-bold uppercase tracking-widest text-neutral-600 dark:text-neutral-400", children: "Editor Canvas Preview" }) })] }), _jsxs("div", { className: "flex items-center justify-between pt-6 border-t border-neutral-200 dark:border-neutral-700", children: [_jsxs("button", { onClick: handleReset, className: "px-6 py-3 rounded-full border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900/50 text-sm font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors flex items-center gap-2", children: [_jsx(RotateCcw, { className: "size-4" }), "Reset"] }), _jsxs("button", { onClick: handleSave, disabled: !hasChanges, className: `px-6 py-3 rounded-full text-sm font-black uppercase tracking-widest transition-all flex items-center gap-2 ${hasChanges
-                                        ? 'bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/20'
-                                        : 'bg-neutral-200 dark:bg-neutral-700 text-neutral-400 dark:text-neutral-600 cursor-not-allowed'}`, children: [_jsx(Save, { className: "size-4" }), saved ? 'Saved!' : 'Save Changes'] })] })] }), _jsxs("div", { className: "mt-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-2xl p-6", children: [_jsx("h3", { className: "text-sm font-black uppercase tracking-widest text-blue-900 dark:text-blue-300 mb-2", children: "How It Works" }), _jsxs("ul", { className: "text-xs text-blue-800 dark:text-blue-400 space-y-1 list-disc list-inside", children: [_jsxs("li", { children: ["Changes are saved to ", _jsx("code", { className: "bg-blue-100 dark:bg-blue-900/50 px-1 rounded", children: "window.__JHITS_PLUGIN_PROPS__" }), " and localStorage"] }), _jsx("li", { children: "Configuration persists across page refreshes" }), _jsx("li", { children: "To apply changes in the editor, navigate to a post editor page" }), _jsx("li", { children: "For production, configure these settings in your client app's blog config file" })] })] })] }) }));
+    return (_jsx("div", { className: "w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 bg-transparent", children: _jsxs("div", { className: "max-w-4xl", children: [_jsxs("div", { className: "mb-8 px-2", children: [_jsxs("h1", { className: "text-4xl font-bold text-dashboard-text tracking-tight leading-none mb-2", children: ["Blog ", _jsx("span", { className: "text-primary italic", children: "Configuration" })] }), _jsx("p", { className: "text-sm text-dashboard-text-secondary font-medium opacity-80", children: "Customize your editorial environment and visual preferences." })] }), _jsxs("div", { className: "bg-dashboard-card/40 backdrop-blur-xl rounded-[2.5rem] border border-dashboard-border/40 shadow-sm p-8 lg:p-10", children: [_jsx("div", { className: "mb-10 pb-8 border-b border-dashboard-border/30", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "size-10 rounded-xl bg-primary/10 flex items-center justify-center text-primary border border-primary/20", children: darkMode ? _jsx(Moon, { size: 20 }) : _jsx(Sun, { size: 20 }) }), _jsxs("div", { children: [_jsx("label", { className: "text-sm font-bold text-dashboard-text uppercase tracking-wider block", children: "Visual Mode" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary mt-0.5 opacity-70", children: "Synchronize editor with system preference" })] })] }), _jsx("button", { onClick: () => setDarkMode(!darkMode), className: `relative inline-flex h-6 w-11 items-center rounded-full transition-all ${darkMode ? 'bg-primary shadow-lg shadow-primary/20' : 'bg-neutral-300 dark:bg-neutral-700'}`, children: _jsx("span", { className: `inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${darkMode ? 'translate-x-6' : 'translate-x-1'}` }) })] }) }), _jsxs("div", { className: "mb-10", children: [_jsxs("div", { className: "flex items-center gap-4 mb-8", children: [_jsx("div", { className: "size-10 rounded-xl bg-amber-500/10 flex items-center justify-center text-amber-500 border border-amber-500/20", children: _jsx(Palette, { size: 20 }) }), _jsx("label", { className: "text-sm font-bold text-dashboard-text uppercase tracking-wider", children: "Canvas Aesthetics" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: [_jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "block text-[10px] font-bold uppercase tracking-[0.2em] text-dashboard-text-secondary ml-1 opacity-60 text-primary", children: "Light Protocol" }), _jsx("input", { type: "text", value: lightBg, onChange: e => setLightBg(e.target.value), className: "w-full bg-dashboard-bg/50 border border-dashboard-border/40 p-4 rounded-2xl text-sm font-semibold outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 text-dashboard-text transition-all" })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("label", { className: "block text-[10px] font-bold uppercase tracking-[0.2em] text-dashboard-text-secondary ml-1 opacity-60 text-primary", children: "Dark Protocol" }), _jsx("input", { type: "text", value: darkBg, onChange: e => setDarkBg(e.target.value), disabled: !darkMode, className: "w-full bg-dashboard-bg/50 border border-dashboard-border/40 p-4 rounded-2xl text-sm font-semibold outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 text-dashboard-text disabled:opacity-30 transition-all" })] })] })] }), _jsxs("div", { className: "flex items-center justify-between pt-8 border-t border-dashboard-border/30", children: [_jsxs("button", { onClick: handleReset, className: "px-6 py-3.5 rounded-2xl border border-dashboard-border/60 text-xs font-bold uppercase tracking-widest text-dashboard-text-secondary hover:text-dashboard-text hover:bg-dashboard-bg/50 transition-all active:scale-95", children: [_jsx(RotateCcw, { size: 14, className: "inline mr-2" }), " Restore Factory"] }), _jsxs("button", { onClick: handleSave, disabled: !hasChanges, className: `px-8 py-3.5 rounded-2xl text-xs font-bold uppercase tracking-widest transition-all flex items-center gap-2 ${hasChanges ? 'bg-primary text-white shadow-xl shadow-primary/25 hover:scale-[1.02]' : 'bg-neutral-100 dark:bg-neutral-800 text-dashboard-text-secondary opacity-40 cursor-not-allowed'}`, children: [_jsx(Save, { size: 16 }), " ", saved ? 'System Updated' : 'Commit Changes'] })] })] })] }) }));
 }

package/dist/views/SlugSEO/SlugSEOManagerView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlugSEOManagerView.d.ts","sourceRoot":"","sources":["../../../src/views/SlugSEO/SlugSEOManagerView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW,uBAAuB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,uBAAuB,2CA2ErF"}
+{"version":3,"file":"SlugSEOManagerView.d.ts","sourceRoot":"","sources":["../../../src/views/SlugSEO/SlugSEOManagerView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW,uBAAuB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,uBAAuB,2CA2FrF"}

package/dist/views/SlugSEO/SlugSEOManagerView.js

@@ -5,7 +5,7 @@
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Search, Link2, FileText } from 'lucide-react';
+import { Search, Link2, FileText, Globe } from 'lucide-react';
 export function SlugSEOManagerView({ postId, siteId, locale }) {
-    return (_jsx("div", { className: "h-full w-full bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: _jsxs("div", { className: "max-w-4xl mx-auto", children: [_jsx("h1", { className: "text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2", children: "Slug & SEO Manager" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 mb-8", children: postId ? `Managing SEO for post: ${postId}` : 'Manage URL slugs and SEO metadata' }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700", children: [_jsx("label", { className: "block text-sm font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-3", children: "URL Slug" }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Link2, { className: "text-neutral-400 size-5" }), _jsx("input", { type: "text", placeholder: "post-url-slug", className: "flex-1 px-4 py-3 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none" })] }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 mt-2", children: "Collision detection will appear here" })] }), _jsxs("div", { className: "p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700", children: [_jsx("label", { className: "block text-sm font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-3", children: "Search Result Preview" }), _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl p-4 border border-neutral-300 dark:border-neutral-700", children: [_jsxs("div", { className: "flex items-center gap-2 mb-2", children: [_jsx(Search, { size: 16, className: "text-neutral-400" }), _jsx("span", { className: "text-xs text-neutral-500", children: "Google Search Result" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("h3", { className: "text-lg text-blue-600 dark:text-blue-400 hover:underline cursor-pointer", children: "Post Title Will Appear Here" }), _jsx("p", { className: "text-sm text-green-700 dark:text-green-400", children: "https://example.com/blog/post-url-slug" }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400", children: "Meta description will appear here. This is what users see in search results." })] })] })] }), _jsxs("div", { className: "p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700", children: [_jsx("label", { className: "block text-sm font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-3", children: "Meta Description" }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(FileText, { className: "text-neutral-400 size-5 mt-1" }), _jsx("textarea", { placeholder: "Enter meta description for search engines...", rows: 4, className: "flex-1 px-4 py-3 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none resize-none" })] }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400 mt-2", children: "0 / 160 characters" })] })] })] }) }));
+    return (_jsx("div", { className: "w-full flex flex-col space-y-8 px-6 lg:px-10 py-6 lg:py-10 bg-transparent overflow-y-auto", children: _jsxs("div", { className: "max-w-4xl", children: [_jsxs("div", { className: "mb-8 px-2", children: [_jsxs("h1", { className: "text-4xl font-bold text-dashboard-text tracking-tight leading-none mb-2", children: ["Search ", _jsx("span", { className: "text-primary italic", children: "&" }), " Discovery"] }), _jsx("p", { className: "text-sm text-dashboard-text-secondary font-medium opacity-80", children: postId ? `Optimizing visibility for: ${postId}` : 'Manage URL architecture and search engine metadata' })] }), _jsxs("div", { className: "space-y-6", children: [_jsxs("div", { className: "p-8 bg-dashboard-card/40 backdrop-blur-xl rounded-[2.5rem] border border-dashboard-border/40 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4 ml-1", children: [_jsx(Link2, { className: "text-primary size-5" }), _jsx("label", { className: "block text-sm font-bold text-dashboard-text uppercase tracking-wider", children: "URL Identifier" })] }), _jsx("div", { className: "flex items-center gap-3", children: _jsx("input", { type: "text", placeholder: "article-url-slug", className: "flex-1 px-5 py-4 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-2xl text-sm font-semibold text-dashboard-text outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all" }) }), _jsx("p", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest mt-3 ml-1 opacity-50", children: "Automatic collision detection active" })] }), _jsxs("div", { className: "p-8 bg-dashboard-card/40 backdrop-blur-xl rounded-[2.5rem] border border-dashboard-border/40 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4 ml-1", children: [_jsx(Search, { className: "text-primary size-5" }), _jsx("label", { className: "block text-sm font-bold text-dashboard-text uppercase tracking-wider", children: "Search Engine Preview" })] }), _jsxs("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl p-6 border border-neutral-200 dark:border-neutral-800 shadow-inner", children: [_jsxs("div", { className: "flex items-center gap-2 mb-3", children: [_jsx("div", { className: "size-4 rounded-full bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center", children: _jsx(Globe, { size: 10, className: "text-neutral-400" }) }), _jsx("span", { className: "text-[10px] font-bold text-neutral-400 uppercase tracking-widest", children: "Global Result" })] }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("h3", { className: "text-xl text-blue-600 dark:text-blue-400 font-medium hover:underline cursor-pointer leading-tight", children: "Publication Title Will Appear Here" }), _jsx("p", { className: "text-sm text-emerald-700 dark:text-emerald-500 font-medium", children: "https://yourdomain.com/blog/article-url-slug" }), _jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 line-clamp-2", children: "Meta description will appear here. This is the snippet users see when discovering your content via search protocols." })] })] })] }), _jsxs("div", { className: "p-8 bg-dashboard-card/40 backdrop-blur-xl rounded-[2.5rem] border border-dashboard-border/40 shadow-sm", children: [_jsxs("div", { className: "flex items-center gap-3 mb-4 ml-1", children: [_jsx(FileText, { className: "text-primary size-5" }), _jsx("label", { className: "block text-sm font-bold text-dashboard-text uppercase tracking-wider", children: "Metadata Summary" })] }), _jsx("div", { className: "flex items-start gap-3", children: _jsx("textarea", { placeholder: "Enter meta description for indexing...", rows: 4, className: "flex-1 px-5 py-4 bg-dashboard-bg/50 border border-dashboard-border/40 rounded-2xl text-sm font-semibold text-dashboard-text outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all resize-none" }) }), _jsxs("div", { className: "flex justify-between items-center mt-3 px-1", children: [_jsx("p", { className: "text-[10px] font-bold text-dashboard-text-secondary uppercase tracking-widest opacity-50", children: "Recommended: 150-160 characters" }), _jsx("span", { className: "text-[10px] font-bold text-primary uppercase tracking-widest", children: "0 / 160" })] })] })] })] }) }));
 }