@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/CanvasEditor/components/FeaturedMediaSection.tsx

@@ -1,341 +0,0 @@
-'use client';
-
-import React, { useState, useCallback, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Image as ImageIcon, Plus, X } from 'lucide-react';
-import { ImagePicker, Image } from '@jhits/plugin-images';
-import type { ImageMetadata } from '@jhits/plugin-images';
-import type { Block } from '../../../types/block';
-
-export interface FeaturedImage {
-    // Store only the semantic ID - plugin-images handles everything else
-    id?: string;
-    alt?: string;
-    // Transform values (stored locally for UI, but plugin-images API is source of truth)
-    brightness?: number;
-    blur?: number;
-    scale?: number;
-    positionX?: number;
-    positionY?: number;
-    // Indicates if this is a custom featured image (not synced from hero)
-    isCustom?: boolean;
-}
-
-export interface FeaturedMediaSectionProps {
-    featuredImage?: FeaturedImage;
-    heroBlock?: Block | null; // Hero block to get default image from
-    slug?: string; // Blog post slug for semantic ID
-    onUpdate: (image: FeaturedImage | undefined) => void;
-}
-
-/**
- * Featured Media Section Component
- * Handles featured image selection - completely independent from hero image
- * Featured image is a thumbnail used for blog post cards
- * Hero image is separate and managed in the hero block
- */
-export function FeaturedMediaSection({
-    featuredImage,
-    heroBlock,
-    slug,
-    onUpdate,
-}: FeaturedMediaSectionProps) {
-    const [showImagePicker, setShowImagePicker] = useState(false);
-    const [openEditorDirectly, setOpenEditorDirectly] = useState(false);
-    const [mounted, setMounted] = useState(false);
-
-    // Handle SSR - ensure we only render portal on client
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    // Create semantic ID for this featured image - plugin-images will handle everything
-    const semanticId = slug ? `blog-featured-${slug}` : `blog-featured-${Date.now()}`;
-    
-    // Use semantic ID from featuredImage if it exists, otherwise use generated one
-    // IMPORTANT: Always use the actual id from featuredImage if available, otherwise the semanticId
-    // This ensures the id is stable and doesn't change on re-renders
-    const imageId = featuredImage?.id || semanticId;
-    
-    // Ensure featuredImage always has an id when it exists
-    // This prevents the "missing featured image" issue on save
-    useEffect(() => {
-        if (featuredImage && !featuredImage.id) {
-            // If featuredImage exists but has no id, set it to the semanticId
-            onUpdate({
-                ...featuredImage,
-                id: semanticId,
-            });
-        }
-    }, [featuredImage, semanticId, onUpdate]);
-
-    // Get transform values from featuredImage or use defaults
-    const brightness = featuredImage?.brightness ?? 100;
-    const blur = featuredImage?.blur ?? 0;
-    const scale = featuredImage?.scale ?? 1.0;
-    const positionX = featuredImage?.positionX ?? 0;
-    const positionY = featuredImage?.positionY ?? 0;
-
-    // Handle image selection - create initial mapping and update blog metadata with semantic ID
-    // Plugin-images Image component will automatically resolve the semantic ID when it renders
-    const handleImageChange = useCallback(async (image: ImageMetadata | null) => {
-        if (image) {
-            // Extract filename from image URL for reference
-            const isUploadedImage = image.url.startsWith('/api/uploads/');
-            let filename = image.filename;
-            
-            if (!filename && isUploadedImage) {
-                // Extract filename from URL if not provided
-                filename = image.url.split('/api/uploads/')[1]?.split('?')[0] || image.id;
-            } else if (!filename) {
-                // For external URLs, use the image ID or extract from URL
-                filename = image.id || image.url.split('/').pop()?.split('?')[0] || `external-${Date.now()}`;
-            }
-            
-            // Create initial mapping in plugin-images API immediately
-            // This ensures the semantic ID resolves correctly
-            try {
-                const saveData = {
-                    id: imageId,
-                    filename: filename,
-                    scale: 1.0,
-                    positionX: 0,
-                    positionY: 0,
-                    brightness: 100,
-                    blur: 0,
-                };
-                
-                await fetch('/api/plugin-images/resolve', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(saveData),
-                });
-            } catch (error) {
-                console.error('[FeaturedMediaSection] Failed to create initial mapping:', error);
-                // Continue anyway - the mapping might be created later
-            }
-            
-            // Update blog metadata with semantic ID
-            onUpdate({
-                id: imageId,
-                alt: image.alt || image.filename,
-                brightness: 100,
-                blur: 0,
-                scale: 1.0,
-                positionX: 0,
-                positionY: 0,
-                isCustom: true,
-            } as FeaturedImage);
-        } else {
-            // If removed, set to undefined
-            onUpdate(undefined);
-        }
-        setShowImagePicker(false);
-    }, [imageId, onUpdate]);
-
-    // Handle editor save from ImagePicker - save to plugin-images API
-    const handleEditorSave = useCallback(async (
-        finalScale: number,
-        finalPositionX: number,
-        finalPositionY: number,
-        finalBrightness?: number,
-        finalBlur?: number
-    ) => {
-        if (!featuredImage?.id) return;
-
-        // Reset the auto-open flag immediately to prevent reopening
-        setOpenEditorDirectly(false);
-
-        // Get the actual filename from the API (resolve the semantic ID)
-        let filename = imageId; // Fallback to semantic ID
-        try {
-            const response = await fetch(`/api/plugin-images/resolve?id=${encodeURIComponent(imageId)}`);
-            if (response.ok) {
-                const data = await response.json();
-                filename = data.filename || imageId;
-            }
-        } catch (error) {
-            console.error('Failed to resolve filename:', error);
-        }
-
-        // Normalize position values
-        const normalizedPositionX = finalPositionX === -50 ? 0 : finalPositionX;
-        const normalizedPositionY = finalPositionY === -50 ? 0 : finalPositionY;
-        const finalBrightnessValue = finalBrightness ?? brightness;
-        const finalBlurValue = finalBlur ?? blur;
-
-        // Save to plugin-images API
-        try {
-            const saveData = {
-                id: imageId,
-                filename: filename,
-                scale: finalScale,
-                positionX: normalizedPositionX,
-                positionY: normalizedPositionY,
-                brightness: finalBrightnessValue,
-                blur: finalBlurValue,
-            };
-            
-            const response = await fetch('/api/plugin-images/resolve', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify(saveData),
-            });
-            
-            if (response.ok) {
-                // Update local featured image data - ensure id is preserved
-                onUpdate({
-                    ...featuredImage,
-                    id: featuredImage.id || imageId, // Ensure id is always preserved
-                    scale: finalScale,
-                    positionX: normalizedPositionX,
-                    positionY: normalizedPositionY,
-                    brightness: finalBrightnessValue,
-                    blur: finalBlurValue,
-                });
-                
-                // Dispatch event to notify Image components
-                window.dispatchEvent(new CustomEvent('image-mapping-updated', {
-                    detail: saveData
-                }));
-            }
-        } catch (error) {
-            console.error('Failed to save image transform:', error);
-        }
-    }, [imageId, featuredImage, brightness, blur, onUpdate]);
-
-    return (
-        <section>
-            <div className="flex items-center gap-3 mb-6">
-                <ImageIcon size={14} className="text-neutral-500 dark:text-neutral-400" />
-                <label className="text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black">
-                    Featured Media
-                </label>
-            </div>
-            {featuredImage?.id ? (
-                <div className="relative group">
-                    {/* Use Image component from plugin-images - it handles everything automatically */}
-                    {/* Blog component only handles the design/styling */}
-                    <div className="relative aspect-[16/10] bg-dashboard-bg rounded-3xl overflow-hidden border border-dashboard-border group/image">
-                        <Image
-                            id={imageId}
-                            alt={featuredImage?.alt || 'Featured image'}
-                            fill
-                            className="object-cover w-full h-full"
-                            editable={false} // Disable Image component's overlay - we'll use our own
-                            {...({
-                                brightness,
-                                blur,
-                                scale,
-                                positionX,
-                                positionY,
-                            } as any)}
-                        />
-                        {/* Custom edit overlay that opens ImagePicker editor */}
-                        <button
-                            onClick={() => {
-                                setOpenEditorDirectly(true);
-                                setShowImagePicker(true);
-                            }}
-                            className="absolute inset-0 z-30 flex items-center justify-center opacity-0 group-hover/image:opacity-100 transition-all duration-300 bg-neutral-900/40 dark:bg-neutral-900/60 backdrop-blur-[2px]"
-                        >
-                            <div className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-neutral-800 rounded-full shadow-xl">
-                                <ImageIcon size={14} className="text-primary" />
-                                <span className="text-[10px] font-bold uppercase tracking-widest">Edit</span>
-                            </div>
-                        </button>
-                    </div>
-                    <div className="mt-2 flex items-center gap-3">
-                        <button
-                            onClick={() => setShowImagePicker(true)}
-                            className="text-[10px] text-neutral-600 dark:text-neutral-400 hover:text-primary font-bold uppercase tracking-wider"
-                        >
-                            Change Image
-                        </button>
-                        <span className="text-[10px] text-neutral-400">•</span>
-                        <button
-                            onClick={() => onUpdate(undefined)}
-                            className="text-[10px] text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 font-bold uppercase tracking-wider"
-                        >
-                            Remove Image
-                        </button>
-                    </div>
-                </div>
-            ) : (
-                <div
-                    className="group relative aspect-[16/10] bg-dashboard-bg rounded-3xl border-2 border-dashed border-dashboard-border flex flex-col items-center justify-center text-neutral-400 dark:text-neutral-500 hover:bg-dashboard-card hover:border-primary cursor-pointer transition-all duration-300"
-                    onClick={() => setShowImagePicker(true)}
-                >
-                    <Plus size={24} strokeWidth={1} className="mb-3 group-hover:scale-110 transition-transform" />
-                    <span className="text-[9px] font-black uppercase tracking-widest">Assign Image</span>
-                </div>
-            )}
-
-            {/* Image Picker Modal */}
-            {showImagePicker && mounted && createPortal(
-                <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={() => {
-                    setShowImagePicker(false);
-                    setOpenEditorDirectly(false); // Reset flag when closing
-                }}>
-                    <div className="bg-white dark:bg-neutral-900 rounded-2xl w-full max-w-2xl mx-4 p-6 shadow-2xl max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
-                        <div className="flex items-center justify-between mb-6">
-                            <h3 className="text-lg font-bold text-neutral-900 dark:text-neutral-100">
-                                {openEditorDirectly ? 'Edit Featured Image' : 'Select Featured Image'}
-                            </h3>
-                            <button
-                                onClick={() => {
-                                    setShowImagePicker(false);
-                                    setOpenEditorDirectly(false); // Reset flag when closing
-                                }}
-                                className="p-2 hover:bg-dashboard-bg dark:hover:bg-neutral-800 rounded-lg transition-colors text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white"
-                                aria-label="Close"
-                            >
-                                <X size={20} className="transition-colors" />
-                            </button>
-                        </div>
-                        <ImagePicker
-                            value={featuredImage?.id ? imageId : undefined}
-                            onChange={handleImageChange}
-                            brightness={brightness}
-                            blur={blur}
-                            {...({
-                                scale,
-                                positionX,
-                                positionY,
-                            } as any)}
-                            onBrightnessChange={(val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate({
-                                        ...featuredImage,
-                                        id: featuredImage.id || imageId, // Ensure id is preserved
-                                        brightness: val,
-                                    });
-                                }
-                            }}
-                            onBlurChange={(val) => {
-                                // Update local state only - don't trigger save
-                                if (featuredImage) {
-                                    onUpdate({
-                                        ...featuredImage,
-                                        id: featuredImage.id || imageId, // Ensure id is preserved
-                                        blur: val,
-                                    });
-                                }
-                            }}
-                            onEditorSave={handleEditorSave}
-                            darkMode={false}
-                            showEffects={true} // Enable effects so editor can be used
-                            aspectRatio="16/10" // Thumbnail aspect ratio for blog cards
-                            borderRadius="rounded-3xl"
-                            objectFit="cover" // Cover for thumbnails
-                            objectPosition="center"
-                        />
-                    </div>
-                </div>,
-                document.body
-            )}
-        </section>
-    );
-}
-

package/src/views/CanvasEditor/components/LibraryItem.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-export interface LibraryItemProps {
-    icon: React.ReactNode;
-    label: string;
-    blockType: string;
-    description?: string;
-    onAddBlock?: (blockType: string) => void;
-}
-/**
- * Reusable Library Item Component
- * Makes blocks draggable from the library and clickable to add at bottom
- */
-export declare function LibraryItem({ icon, label, blockType, description, onAddBlock }: LibraryItemProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=LibraryItem.d.ts.map

package/src/views/CanvasEditor/components/LibraryItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LibraryItem.d.ts","sourceRoot":"","sources":["LibraryItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAEhD,MAAM,WAAW,gBAAgB;IAC7B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC5C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,EACb,EAAE,gBAAgB,2CAwDlB"}

package/src/views/CanvasEditor/components/LibraryItem.js

@@ -1,43 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useRef } from 'react';
-/**
- * Reusable Library Item Component
- * Makes blocks draggable from the library and clickable to add at bottom
- */
-export function LibraryItem({ icon, label, blockType, description, onAddBlock }) {
-    const [hasDragged, setHasDragged] = useState(false);
-    const mouseDownRef = useRef(null);
-    const handleDragStart = (e) => {
-        e.dataTransfer.setData('block-type', blockType);
-        e.dataTransfer.effectAllowed = 'move';
-        setHasDragged(true); // Mark as dragged when drag starts
-    };
-    const handleMouseDown = (e) => {
-        // Track mouse position on mousedown
-        mouseDownRef.current = { x: e.clientX, y: e.clientY };
-        setHasDragged(false); // Reset drag state
-    };
-    const handleMouseMove = (e) => {
-        // If mouse moved more than 5px, consider it a drag
-        if (mouseDownRef.current) {
-            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
-            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
-            if (dx > 5 || dy > 5) {
-                setHasDragged(true);
-            }
-        }
-    };
-    const handleClick = (e) => {
-        // Only add block if we didn't drag
-        if (!hasDragged && onAddBlock) {
-            e.preventDefault();
-            e.stopPropagation();
-            onAddBlock(blockType);
-        }
-        // Reset state
-        mouseDownRef.current = null;
-        setTimeout(() => setHasDragged(false), 100);
-    };
-    return (_jsxs("div", { draggable: true, onDragStart: handleDragStart, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onClick: handleClick, className: "flex flex-col items-center justify-center p-5 rounded-2xl border border-dashboard-border bg-dashboard-card hover:border-primary hover:shadow-xl hover:shadow-primary/5 transition-all cursor-pointer group", children: [_jsx("div", { className: "text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary mb-3 transition-colors duration-300", children: React.cloneElement(icon, { strokeWidth: 1.5 }) }), _jsx("span", { className: "text-[9px] font-black uppercase tracking-[0.15em] text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors", children: label })] }));
-}

package/src/views/CanvasEditor/components/LibraryItem.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import React, { useState, useRef } from 'react';
-
-export interface LibraryItemProps {
-    icon: React.ReactNode;
-    label: string;
-    blockType: string;
-    description?: string;
-    onAddBlock?: (blockType: string) => void;
-}
-
-/**
- * Reusable Library Item Component
- * Makes blocks draggable from the library and clickable to add at bottom
- */
-export function LibraryItem({
-    icon,
-    label,
-    blockType,
-    description,
-    onAddBlock
-}: LibraryItemProps) {
-    const [hasDragged, setHasDragged] = useState(false);
-    const mouseDownRef = useRef<{ x: number; y: number } | null>(null);
-
-    const handleDragStart = (e: React.DragEvent) => {
-        e.dataTransfer.setData('block-type', blockType);
-        e.dataTransfer.effectAllowed = 'move';
-        setHasDragged(true); // Mark as dragged when drag starts
-    };
-
-    const handleMouseDown = (e: React.MouseEvent) => {
-        // Track mouse position on mousedown
-        mouseDownRef.current = { x: e.clientX, y: e.clientY };
-        setHasDragged(false); // Reset drag state
-    };
-
-    const handleMouseMove = (e: React.MouseEvent) => {
-        // If mouse moved more than 5px, consider it a drag
-        if (mouseDownRef.current) {
-            const dx = Math.abs(e.clientX - mouseDownRef.current.x);
-            const dy = Math.abs(e.clientY - mouseDownRef.current.y);
-            if (dx > 5 || dy > 5) {
-                setHasDragged(true);
-            }
-        }
-    };
-
-    const handleClick = (e: React.MouseEvent) => {
-        // Only add block if we didn't drag
-        if (!hasDragged && onAddBlock) {
-            e.preventDefault();
-            e.stopPropagation();
-            onAddBlock(blockType);
-        }
-        // Reset state
-        mouseDownRef.current = null;
-        setTimeout(() => setHasDragged(false), 100);
-    };
-
-    return (
-        <div
-            draggable
-            onDragStart={handleDragStart}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onClick={handleClick}
-            className="flex flex-col items-center justify-center p-5 rounded-2xl border border-dashboard-border bg-dashboard-card hover:border-primary hover:shadow-xl hover:shadow-primary/5 transition-all cursor-pointer group"
-        >
-            <div className="text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary mb-3 transition-colors duration-300">
-                {React.cloneElement(icon as React.ReactElement, { strokeWidth: 1.5 } as any)}
-            </div>
-            <span className="text-[9px] font-black uppercase tracking-[0.15em] text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-950 dark:group-hover:text-white transition-colors">
-                {label}
-            </span>
-        </div>
-    );
-}
-

package/src/views/CanvasEditor/components/PrivacySettingsSection.d.ts

@@ -1,15 +0,0 @@
-export interface PrivacySettings {
-    isPrivate?: boolean;
-    password?: string;
-    sharedWithUsers?: string[];
-}
-export interface PrivacySettingsSectionProps {
-    privacy?: PrivacySettings;
-    onUpdate: (privacy: PrivacySettings) => void;
-}
-/**
- * Privacy Settings Section Component
- * Handles privacy settings: private, password-protected, share with users
- */
-export declare function PrivacySettingsSection({ privacy, onUpdate, }: PrivacySettingsSectionProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=PrivacySettingsSection.d.ts.map

package/src/views/CanvasEditor/components/PrivacySettingsSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PrivacySettingsSection.d.ts","sourceRoot":"","sources":["PrivacySettingsSection.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,eAAe;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,2BAA2B;IACxC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;CAChD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACnC,OAAO,EACP,QAAQ,GACX,EAAE,2BAA2B,2CA2L7B"}

package/src/views/CanvasEditor/components/PrivacySettingsSection.js

@@ -1,63 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Shield, Key, Users } from 'lucide-react';
-/**
- * Privacy Settings Section Component
- * Handles privacy settings: private, password-protected, share with users
- */
-export function PrivacySettingsSection({ privacy, onUpdate, }) {
-    var _a;
-    const [users, setUsers] = useState([]);
-    const [loadingUsers, setLoadingUsers] = useState(false);
-    const [showPasswordInput, setShowPasswordInput] = useState(false);
-    const [passwordValue, setPasswordValue] = useState((privacy === null || privacy === void 0 ? void 0 : privacy.password) || '');
-    const [showUserSelector, setShowUserSelector] = useState(false);
-    // Fetch users from plugin-users
-    useEffect(() => {
-        const fetchUsers = async () => {
-            try {
-                setLoadingUsers(true);
-                const res = await fetch('/api/users');
-                const data = await res.json();
-                if (Array.isArray(data)) {
-                    setUsers(data);
-                }
-            }
-            catch (err) {
-                console.error('Failed to load users', err);
-            }
-            finally {
-                setLoadingUsers(false);
-            }
-        };
-        fetchUsers();
-    }, []);
-    const handlePrivacyToggle = (isPrivate) => {
-        onUpdate(Object.assign(Object.assign(Object.assign({}, privacy), { isPrivate }), (isPrivate ? {} : { password: undefined, sharedWithUsers: undefined })));
-    };
-    const handlePasswordChange = (password) => {
-        setPasswordValue(password);
-        onUpdate(Object.assign(Object.assign({}, privacy), { password: password || undefined }));
-    };
-    const handleUserToggle = (userId) => {
-        const currentUsers = (privacy === null || privacy === void 0 ? void 0 : privacy.sharedWithUsers) || [];
-        const newUsers = currentUsers.includes(userId)
-            ? currentUsers.filter(id => id !== userId)
-            : [...currentUsers, userId];
-        onUpdate(Object.assign(Object.assign({}, privacy), { sharedWithUsers: newUsers.length > 0 ? newUsers : undefined }));
-    };
-    return (_jsxs("section", { className: "pt-8 border-t border-neutral-200 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-3 mb-6", children: [_jsx(Shield, { size: 14, className: "text-neutral-500 dark:text-neutral-400" }), _jsx("label", { className: "text-[10px] uppercase tracking-[0.2em] text-neutral-500 dark:text-neutral-400 font-black", children: "Privacy Settings" })] }), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1", children: "Make Private" }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: "Hide from public view" })] }), _jsx("button", { onClick: () => handlePrivacyToggle(!(privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate)), className: `relative w-12 h-6 rounded-full transition-colors ${(privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) ? 'bg-primary' : 'bg-neutral-300 dark:bg-neutral-700'}`, children: _jsx("div", { className: `absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform ${(privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) ? 'translate-x-6' : 'translate-x-0'}` }) })] }), (privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1", children: "Password Protection" }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: "Require password to view" })] }), _jsx("button", { onClick: () => {
-                                            setShowPasswordInput(!showPasswordInput);
-                                            if (!showPasswordInput && !privacy.password) {
-                                                setPasswordValue('');
-                                            }
-                                        }, className: `p-1.5 rounded-lg transition-colors ${privacy.password || showPasswordInput
-                                            ? 'bg-primary/10 text-primary'
-                                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'}`, children: _jsx(Key, { size: 14 }) })] }), (showPasswordInput || privacy.password) && (_jsx("input", { type: "password", value: passwordValue, onChange: (e) => handlePasswordChange(e.target.value), placeholder: "Enter password", className: "w-full px-3 py-2 text-xs bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 rounded-lg outline-none focus:border-primary transition-all dark:text-neutral-100" }))] })), (privacy === null || privacy === void 0 ? void 0 : privacy.isPrivate) && (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("label", { className: "text-[10px] text-neutral-700 dark:text-neutral-300 font-bold block mb-1", children: "Share with Users" }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: "Grant access to specific users" })] }), _jsx("button", { onClick: () => setShowUserSelector(!showUserSelector), className: `p-1.5 rounded-lg transition-colors ${(((_a = privacy.sharedWithUsers) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 || showUserSelector
-                                            ? 'bg-primary/10 text-primary'
-                                            : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-400'}`, children: _jsx(Users, { size: 14 }) })] }), showUserSelector && (_jsx("div", { className: "bg-dashboard-bg rounded-lg p-3 border border-dashboard-border max-h-48 overflow-y-auto", children: loadingUsers ? (_jsx("p", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Loading users..." })) : users.length === 0 ? (_jsx("p", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "No users found" })) : (_jsx("div", { className: "space-y-2", children: users.map((user) => {
-                                        var _a;
-                                        return (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer hover:bg-dashboard-bg p-2 rounded transition-colors", children: [_jsx("input", { type: "checkbox", checked: ((_a = privacy.sharedWithUsers) === null || _a === void 0 ? void 0 : _a.includes(user._id)) || false, onChange: () => handleUserToggle(user._id), className: "rounded border-neutral-300 dark:border-neutral-700 text-primary focus:ring-primary" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-[10px] font-bold text-neutral-700 dark:text-neutral-300 truncate", children: user.name }), _jsx("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400 truncate", children: user.email })] })] }, user._id));
-                                    }) })) })), privacy.sharedWithUsers && privacy.sharedWithUsers.length > 0 && (_jsxs("p", { className: "text-[9px] text-neutral-500 dark:text-neutral-400", children: ["Shared with ", privacy.sharedWithUsers.length, " user", privacy.sharedWithUsers.length !== 1 ? 's' : ''] }))] }))] })] }));
-}