@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/PostManager/PostTable.tsx

@@ -1,230 +0,0 @@
-/**
- * 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">
-                                            <button 
-                                                onClick={() => onEdit(post.id)} 
-                                                className="text-left w-full hover:cursor-pointer p-0 m-0 border-0 bg-transparent"
-                                            >
-                                                <h3 className="font-bold hover:underline text-neutral-950 dark:text-white mb-1 line-clamp-1 text-left">
-                                                    {post.title.trim()}
-                                                </h3>
-                                            </button>
-                                            <p className="text-xs text-neutral-500 dark:text-neutral-400 font-mono text-left">
-                                                /{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.d.ts

@@ -1,12 +0,0 @@
-/**
- * Post Manager View Exports
- */
-export { PostManagerView } from './PostManagerView';
-export type { PostManagerViewProps } from './PostManagerView';
-export { PostStats } from './PostStats';
-export { PostFilters } from './PostFilters';
-export { PostTable } from './PostTable';
-export { PostCards } from './PostCards';
-export { EmptyState } from './EmptyState';
-export { PostActionsMenu } from './PostActionsMenu';
-//# sourceMappingURL=index.d.ts.map

package/src/views/PostManager/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAG9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/src/views/PostManager/index.js

@@ -1,11 +0,0 @@
-/**
- * Post Manager View Exports
- */
-export { PostManagerView } 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/PostManager/index.ts

@@ -1,15 +0,0 @@
-/**
- * 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.d.ts

@@ -1,12 +0,0 @@
-/**
- * Preview Bridge View
- * Live preview of blog post
- * Follows dashboard earth-tone design system
- */
-export interface PreviewBridgeViewProps {
-    postId?: string;
-    siteId: string;
-    locale: string;
-}
-export declare function PreviewBridgeView({ postId, siteId, locale }: PreviewBridgeViewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PreviewBridgeView.d.ts.map

package/src/views/Preview/PreviewBridgeView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PreviewBridgeView.d.ts","sourceRoot":"","sources":["PreviewBridgeView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW,sBAAsB;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,sBAAsB,2CA6CnF"}

package/src/views/Preview/PreviewBridgeView.js

@@ -1,11 +0,0 @@
-/**
- * Preview Bridge View
- * Live preview of blog post
- * Follows dashboard earth-tone design system
- */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExternalLink, RefreshCw } from 'lucide-react';
-export function PreviewBridgeView({ postId, siteId, locale }) {
-    return (_jsxs("div", { className: "h-full w-full bg-white dark:bg-neutral-900 flex flex-col", children: [_jsxs("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", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter", children: "Preview" }), _jsx("p", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: postId ? `Previewing post: ${postId}` : 'Live preview of your post' })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("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", children: [_jsx(RefreshCw, { size: 14 }), "Refresh"] }), _jsxs("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", children: [_jsx(ExternalLink, { size: 14 }), "Open in New Tab"] })] })] }), _jsx("div", { className: "flex-1 overflow-hidden bg-neutral-100 dark:bg-neutral-800/30", children: _jsx("div", { className: "h-full w-full p-8", children: _jsx("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", children: _jsx("div", { className: "h-full w-full flex items-center justify-center", children: _jsxs("div", { className: "text-center", children: [_jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400 mb-2", children: "Preview will be rendered here" }), _jsx("p", { className: "text-xs text-neutral-400", children: "Using iframe or side-by-side panel" })] }) }) }) }) })] }));
-}

package/src/views/Preview/PreviewBridgeView.tsx

@@ -1,64 +0,0 @@
-/**
- * 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.d.ts

@@ -1,6 +0,0 @@
-/**
- * Preview Bridge View Exports
- */
-export { PreviewBridgeView } from './PreviewBridgeView';
-export type { PreviewBridgeViewProps } from './PreviewBridgeView';
-//# sourceMappingURL=index.d.ts.map

package/src/views/Preview/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/src/views/Preview/index.js

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

package/src/views/Preview/index.ts

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

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

@@ -1,10 +0,0 @@
-/**
- * Settings View - Development/Installation Screen
- * Allows manual configuration of plugin settings (darkMode, backgroundColors)
- */
-export interface SettingsViewProps {
-    siteId: string;
-    locale: string;
-}
-export declare function SettingsView({ siteId, locale }: SettingsViewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SettingsView.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsView.d.ts","sourceRoot":"","sources":["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"}

package/src/views/Settings/SettingsView.js

@@ -1,111 +0,0 @@
-/**
- * Settings View - Development/Installation Screen
- * Allows manual configuration of plugin settings (darkMode, backgroundColors)
- */
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Save, RotateCcw, Palette, Moon, Sun } from 'lucide-react';
-export function SettingsView({ siteId, locale }) {
-    // Get current config from window global
-    const getCurrentConfig = () => {
-        var _a, _b;
-        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
-            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-blog'];
-            return {
-                darkMode: (_a = pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.darkMode) !== null && _a !== void 0 ? _a : true,
-                backgroundColors: (_b = pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.backgroundColors) !== null && _b !== void 0 ? _b : {
-                    light: '#ffffff',
-                    dark: '#171717',
-                },
-            };
-        }
-        return {
-            darkMode: true,
-            backgroundColors: {
-                light: '#ffffff',
-                dark: '#171717',
-            },
-        };
-    };
-    const [darkMode, setDarkMode] = useState(getCurrentConfig().darkMode);
-    const [lightBg, setLightBg] = useState(getCurrentConfig().backgroundColors.light);
-    const [darkBg, setDarkBg] = useState(getCurrentConfig().backgroundColors.dark || '#171717');
-    const [hasChanges, setHasChanges] = useState(false);
-    const [saved, setSaved] = useState(false);
-    // Check for changes
-    useEffect(() => {
-        const current = getCurrentConfig();
-        const hasChanges = darkMode !== current.darkMode ||
-            lightBg !== current.backgroundColors.light ||
-            darkBg !== (current.backgroundColors.dark || '#171717');
-        setHasChanges(hasChanges);
-        setSaved(false);
-    }, [darkMode, lightBg, darkBg]);
-    // Save configuration
-    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'] = Object.assign(Object.assign({}, (window.__JHITS_PLUGIN_PROPS__['plugin-blog'] || {})), { 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);
-        }
-        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 },
-        });
-    };
-    // Reset to defaults
-    const handleReset = () => {
-        setDarkMode(true);
-        setLightBg('#ffffff');
-        setDarkBg('#171717');
-    };
-    // Load from localStorage on mount
-    useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        try {
-            const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
-            if (saved) {
-                const config = JSON.parse(saved);
-                setDarkMode((_a = config.darkMode) !== null && _a !== void 0 ? _a : true);
-                setLightBg((_c = (_b = config.backgroundColors) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : '#ffffff');
-                setDarkBg((_e = (_d = config.backgroundColors) === null || _d === void 0 ? void 0 : _d.dark) !== null && _e !== void 0 ? _e : '#171717');
-            }
-        }
-        catch (e) {
-            console.warn('[SettingsView] Failed to load from localStorage:', 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" })] })] })] }) }));
-}