hazo_collab_forms 1.9.1 → 1.9.2

package/dist/components/collab_form_file_upload.js

@@ -1,36 +1,31 @@
 /**
  * File upload component for collaboration forms
- * Provides drag-and-drop file upload, file list display, and file management
+ * Provides drag-and-drop file upload, file list display, and file management.
+ *
+ * Uses FileManagerCallbacks for upload/remove operations and FormFileAttachment
+ * as the data shape stored in form_data.
  */
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useRef, useState, useCallback } from 'react';
 import { cn } from '../utils/cn.js';
 import { use_logger } from '../logger/context.js';
-import { API_ENDPOINTS } from '../config/api_endpoints.js';
-import { HiTrash, HiPaperClip, HiPhotograph, HiDocument, HiDocumentText, HiCheckCircle, HiLockClosed, HiLockOpen } from 'react-icons/hi';
-import { FaSpinner } from 'react-icons/fa';
+import { HiTrash, HiPaperClip, HiPhotograph, HiDocument, HiDocumentText, HiLockClosed, HiLockOpen, HiRefresh } from 'react-icons/hi';
 /**
- * Get file icon based on file type
+ * Get file icon based on MIME type and filename
  */
-function get_file_icon(file_type, file_name) {
-    const extension = file_name.split('.').pop()?.toLowerCase() || '';
-    const mime_type = file_type.toLowerCase();
-    // Image types
-    if (mime_type.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(extension)) {
+function get_file_icon(mime_type, file_name) {
+    const extension = (file_name || '').split('.').pop()?.toLowerCase() || '';
+    const mime = (mime_type || '').toLowerCase();
+    if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(extension)) {
         return _jsx(HiPhotograph, { className: "h-8 w-8 text-blue-500" });
     }
-    // PDF
-    if (mime_type === 'application/pdf' || extension === 'pdf') {
+    if (mime === 'application/pdf' || extension === 'pdf') {
         return _jsx(HiDocument, { className: "h-8 w-8 text-red-500" });
     }
-    // Document types
-    if (mime_type.includes('document') ||
-        mime_type.includes('text') ||
-        ['doc', 'docx', 'txt', 'rtf', 'odt'].includes(extension)) {
+    if (mime.includes('document') || mime.includes('text') || ['doc', 'docx', 'txt', 'rtf', 'odt'].includes(extension)) {
         return _jsx(HiDocumentText, { className: "h-8 w-8 text-green-500" });
     }
-    // Default
     return _jsx(HiPaperClip, { className: "h-8 w-8 text-gray-500" });
 }
 /**
@@ -44,10 +39,26 @@ function format_file_size(bytes) {
     const i = Math.floor(Math.log(bytes) / Math.log(k));
     return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i];
 }
+/**
+ * Get status badge for a file
+ */
+function StatusBadge({ status }) {
+    if (!status || status === 'active')
+        return null;
+    const config = {
+        missing: { label: 'Missing', className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300' },
+        soft_deleted: { label: 'Deleted', className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300' },
+        orphaned: { label: 'Orphaned', className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-300' },
+    };
+    const cfg = config[status];
+    if (!cfg)
+        return null;
+    return (_jsx("span", { className: cn('text-[10px] px-1 py-0.5 rounded font-medium', cfg.className), children: cfg.label }));
+}
 /**
  * Collaboration form file upload component
  */
-export function CollabFormFileUpload({ field_id_final, accept_files_public = false, accept_files_private = false, files_dir, max_size, min_files, max_files = 10, file_accept, file_processor, file_validator, files: controlled_files, on_files_change, component_ref, upload_endpoint = API_ENDPOINTS.file_upload, private_files_permission, private_files: controlled_private_files, on_private_files_change, can_access_private_files: can_access_private_files_prop, }) {
+export function CollabFormFileUpload({ field_id_final, accept_files_public = false, accept_files_private = false, files_dir, max_size, min_files, max_files = 10, file_accept, file_validator, file_manager, files: controlled_files, on_files_change, private_files: controlled_private_files, on_private_files_change, private_files_permission, can_access_private_files: can_access_private_files_prop, show_file_status = false, allow_reupload = false, file_statuses = {}, scope_id, uploaded_by, }) {
     const logger = use_logger();
     const file_input_ref = useRef(null);
     const private_file_input_ref = useRef(null);
@@ -57,125 +68,64 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
     const [is_dragging_private, set_is_dragging_private] = useState(false);
     const [upload_errors, set_upload_errors] = useState({});
     const [uploading_files, set_uploading_files] = useState(new Set());
-    const [processing_files, set_processing_files] = useState(new Set());
-    const [processed_files, set_processed_files] = useState(new Set());
     const [has_permission, set_has_permission] = useState(false);
     const [permission_loading, set_permission_loading] = useState(true);
     // Use controlled files if provided, otherwise use internal state
     const files = controlled_files !== undefined ? controlled_files : internal_files;
     const is_controlled = controlled_files !== undefined;
-    // Use controlled private files if provided, otherwise use internal state
     const private_files = controlled_private_files !== undefined ? controlled_private_files : internal_private_files;
     const is_private_controlled = controlled_private_files !== undefined;
-    // Check permission using hazo_auth when accept_files_private is true
+    // Check permission for private files
     React.useEffect(() => {
         if (!accept_files_private) {
             set_permission_loading(false);
             set_has_permission(false);
             return;
         }
-        // If permission is provided via prop (e.g. from role-based resolution), use that
         if (can_access_private_files_prop !== undefined) {
             set_has_permission(can_access_private_files_prop);
             set_permission_loading(false);
             return;
         }
-        // Need private_files_permission for API check
-        if (!private_files_permission) {
-            set_permission_loading(false);
-            set_has_permission(false);
-            return;
-        }
-        // Otherwise, check via hazo_auth API
-        const check_permission = async () => {
-            try {
-                set_permission_loading(true);
-                const response = await fetch(API_ENDPOINTS.auth_get, {
-                    credentials: 'include',
-                });
-                if (response.ok) {
-                    const auth_data = await response.json();
-                    if (auth_data.authenticated && auth_data.permissions) {
-                        const has_perm = auth_data.permissions.includes(private_files_permission);
-                        set_has_permission(has_perm);
-                    }
-                    else {
-                        set_has_permission(false);
-                    }
-                }
-                else {
-                    set_has_permission(false);
-                }
-            }
-            catch (error) {
-                logger.warn('[CollabFormFileUpload] Error checking permission', {
-                    permission: private_files_permission,
-                    error: error instanceof Error ? error.message : String(error),
-                });
-                set_has_permission(false);
-            }
-            finally {
-                set_permission_loading(false);
-            }
-        };
-        check_permission();
-    }, [accept_files_private, private_files_permission, can_access_private_files_prop]);
-    // Determine if private files section should be shown
+        // Without explicit prop, default to false for private files
+        set_permission_loading(false);
+        set_has_permission(false);
+    }, [accept_files_private, can_access_private_files_prop]);
     const show_private_section = !!(accept_files_private && has_permission && !permission_loading);
     /**
      * Update files state (public files)
      */
     const update_files = useCallback((new_files) => {
-        // Ensure all files have visibility set to 'public'
-        const files_with_visibility = new_files.map(f => ({
-            ...f,
-            visibility: f.visibility || 'public',
-        }));
         if (!is_controlled) {
-            set_internal_files(files_with_visibility);
-        }
-        if (on_files_change) {
-            on_files_change(files_with_visibility);
+            set_internal_files(new_files);
         }
+        on_files_change?.(new_files);
     }, [is_controlled, on_files_change]);
     /**
      * Update private files state
      */
     const update_private_files = useCallback((new_files) => {
-        // Ensure all files have visibility set to 'private'
-        const files_with_visibility = new_files.map(f => ({
-            ...f,
-            visibility: 'private',
-        }));
         if (!is_private_controlled) {
-            set_internal_private_files(files_with_visibility);
-        }
-        if (on_private_files_change) {
-            on_private_files_change(files_with_visibility);
+            set_internal_private_files(new_files);
         }
+        on_private_files_change?.(new_files);
     }, [is_private_controlled, on_private_files_change]);
     /**
      * Toggle file visibility (move between public and private)
      */
     const toggle_file_visibility = useCallback((file_id, current_visibility) => {
         if (current_visibility === 'public') {
-            // Move from public to private
             const file_to_move = files.find(f => f.file_id === file_id);
             if (file_to_move) {
-                const new_public_files = files.filter(f => f.file_id !== file_id);
-                const moved_file = { ...file_to_move, visibility: 'private' };
-                update_files(new_public_files);
-                update_private_files([...private_files, moved_file]);
+                update_files(files.filter(f => f.file_id !== file_id));
+                update_private_files([...private_files, { ...file_to_move, visibility: 'private' }]);
             }
         }
         else {
-            // Move from private to public
             const file_to_move = private_files.find(f => f.file_id === file_id);
             if (file_to_move) {
-                const new_private_files = private_files.filter(f => f.file_id !== file_id);
-                const moved_file = { ...file_to_move, visibility: 'public' };
-                update_private_files(new_private_files);
-                update_files([...files, moved_file]);
+                update_private_files(private_files.filter(f => f.file_id !== file_id));
+                update_files([...files, { ...file_to_move, visibility: 'public' }]);
             }
         }
     }, [files, private_files, update_files, update_private_files]);
@@ -183,124 +133,68 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
      * Validate file before upload
      */
     const validate_file = useCallback((file) => {
-        // Run custom validator first (if provided)
         if (file_validator) {
             const custom_error = file_validator(file);
-            if (custom_error) {
+            if (custom_error)
                 return custom_error;
-            }
         }
-        // Check file count
         if (files.length >= max_files) {
             return `Maximum ${max_files} files allowed`;
         }
-        // Check file size
         if (max_size && file.size > max_size) {
             return `File size exceeds maximum of ${format_file_size(max_size)}`;
         }
-        // Check file type (if file_accept is specified)
         if (file_accept) {
-            const accept_patterns = file_accept.split(',').map((p) => p.trim());
+            const accept_patterns = file_accept.split(',').map(p => p.trim());
             const file_extension = '.' + file.name.split('.').pop()?.toLowerCase();
             const file_mime = file.type;
-            const matches = accept_patterns.some((pattern) => {
-                if (pattern.startsWith('.')) {
-                    // Extension match
+            const matches = accept_patterns.some(pattern => {
+                if (pattern.startsWith('.'))
                     return file_extension === pattern.toLowerCase();
-                }
-                else if (pattern.includes('/*')) {
-                    // MIME type wildcard (e.g., "image/*")
-                    const base_type = pattern.split('/')[0];
-                    return file_mime.startsWith(base_type + '/');
-                }
-                else {
-                    // Exact MIME type match
-                    return file_mime === pattern;
-                }
+                if (pattern.includes('/*'))
+                    return file_mime.startsWith(pattern.split('/')[0] + '/');
+                return file_mime === pattern;
             });
-            if (!matches) {
+            if (!matches)
                 return `File type not allowed. Accepted: ${file_accept}`;
-            }
         }
         return null;
     }, [files.length, max_files, max_size, file_accept, file_validator]);
     /**
-     * Upload file to server
+     * Upload file via file_manager.upload callback
      */
     const upload_file = useCallback(async (file, visibility = 'public') => {
-        const file_id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        const uploading_id = `${file_id}-${file.name}`;
+        const uploading_id = `${Date.now()}-${file.name}`;
         try {
-            set_uploading_files((prev) => new Set(prev).add(uploading_id));
-            const form_data = new FormData();
-            form_data.append('file', file);
-            form_data.append('field_id', field_id_final);
-            if (files_dir) {
-                form_data.append('files_dir', files_dir);
-            }
-            // Add visibility to the form data
-            form_data.append('visibility', visibility);
-            // Add required permission for private files (server-side validation)
-            if (visibility === 'private' && private_files_permission) {
-                form_data.append('required_permission', private_files_permission);
-            }
-            const response = await fetch(upload_endpoint, {
-                method: 'POST',
-                body: form_data,
-                credentials: 'include',
-            });
-            if (!response.ok) {
-                const error_data = await response.json().catch(() => ({ error: 'Upload failed' }));
-                throw new Error(error_data.error || `Upload failed: ${response.statusText}`);
-            }
-            const result = await response.json();
-            const file_data = {
-                file_path: result.file_path || result.path || '',
-                file_name: file.name,
-                file_size: file.size,
-                file_type: file.type,
-                file_id,
-                uploaded_at: new Date(),
+            set_uploading_files(prev => new Set(prev).add(uploading_id));
+            const attachment = await file_manager.upload(file, {
+                entity_type: 'form_field',
+                entity_id: field_id_final,
                 visibility,
-            };
-            // Call file processor if provided
-            if (file_processor && component_ref) {
-                set_processing_files((prev) => new Set(prev).add(file_data.file_id));
-                try {
-                    await file_processor(file_data, component_ref);
-                    set_processed_files((prev) => new Set(prev).add(file_data.file_id));
-                }
-                finally {
-                    set_processing_files((prev) => {
-                        const next = new Set(prev);
-                        next.delete(file_data.file_id);
-                        return next;
-                    });
-                }
-            }
-            set_upload_errors((prev) => {
+                scope_id,
+                uploaded_by,
+                metadata: files_dir ? { files_dir } : undefined,
+            });
+            set_upload_errors(prev => {
                 const next = { ...prev };
                 delete next[uploading_id];
                 return next;
             });
-            return file_data;
+            return attachment;
         }
         catch (error) {
             const error_message = error instanceof Error ? error.message : 'Upload failed';
-            set_upload_errors((prev) => ({
-                ...prev,
-                [uploading_id]: error_message,
-            }));
+            set_upload_errors(prev => ({ ...prev, [uploading_id]: error_message }));
             return null;
         }
         finally {
-            set_uploading_files((prev) => {
+            set_uploading_files(prev => {
                 const next = new Set(prev);
                 next.delete(uploading_id);
                 return next;
             });
         }
-    }, [field_id_final, files_dir, upload_endpoint, file_processor, component_ref, private_files_permission]);
+    }, [field_id_final, file_manager, files_dir, scope_id, uploaded_by]);
     /**
      * Handle file selection (public files)
      */
@@ -309,8 +203,7 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
             return;
         const files_to_upload = [];
         const errors = {};
-        // Validate all files first
-        Array.from(selected_files).forEach((file) => {
+        Array.from(selected_files).forEach(file => {
             const error = validate_file(file);
             if (error) {
                 errors[file.name] = error;
@@ -319,16 +212,14 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
                 files_to_upload.push(file);
             }
         });
-        // Set validation errors
         if (Object.keys(errors).length > 0) {
-            set_upload_errors((prev) => ({ ...prev, ...errors }));
+            set_upload_errors(prev => ({ ...prev, ...errors }));
         }
-        // Upload valid files as public
-        const upload_promises = files_to_upload.map((file) => upload_file(file, 'public'));
-        const uploaded_files = await Promise.all(upload_promises);
-        const successful_uploads = uploaded_files.filter((f) => f !== null);
-        if (successful_uploads.length > 0) {
-            update_files([...files, ...successful_uploads]);
+        const upload_promises = files_to_upload.map(file => upload_file(file, 'public'));
+        const uploaded = await Promise.all(upload_promises);
+        const successful = uploaded.filter((f) => f !== null);
+        if (successful.length > 0) {
+            update_files([...files, ...successful]);
         }
     }, [files, validate_file, upload_file, update_files]);
     /**
@@ -339,8 +230,7 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
             return;
         const files_to_upload = [];
         const errors = {};
-        // Validate all files first (use same validation as public)
-        Array.from(selected_files).forEach((file) => {
+        Array.from(selected_files).forEach(file => {
             const error = validate_file(file);
             if (error) {
                 errors[file.name] = error;
@@ -349,21 +239,17 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
                 files_to_upload.push(file);
             }
         });
-        // Set validation errors
         if (Object.keys(errors).length > 0) {
-            set_upload_errors((prev) => ({ ...prev, ...errors }));
+            set_upload_errors(prev => ({ ...prev, ...errors }));
         }
-        // Upload valid files as private
-        const upload_promises = files_to_upload.map((file) => upload_file(file, 'private'));
-        const uploaded_files = await Promise.all(upload_promises);
-        const successful_uploads = uploaded_files.filter((f) => f !== null);
-        if (successful_uploads.length > 0) {
-            update_private_files([...private_files, ...successful_uploads]);
+        const upload_promises = files_to_upload.map(file => upload_file(file, 'private'));
+        const uploaded = await Promise.all(upload_promises);
+        const successful = uploaded.filter((f) => f !== null);
+        if (successful.length > 0) {
+            update_private_files([...private_files, ...successful]);
         }
     }, [private_files, validate_file, upload_file, update_private_files]);
-    /**
-     * Handle drag and drop
-     */
+    // Drag handlers (public)
     const handle_drag_enter = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -384,9 +270,7 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
         set_is_dragging(false);
         handle_files_selected(e.dataTransfer.files);
     }, [handle_files_selected]);
-    /**
-     * Handle private drag and drop
-     */
+    // Drag handlers (private)
     const handle_private_drag_enter = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -403,104 +287,136 @@ export function CollabFormFileUpload({ field_id_final, accept_files_public = fal
         set_is_dragging_private(false);
         handle_private_files_selected(e.dataTransfer.files);
     }, [handle_private_files_selected]);
-    /**
-     * Handle file input change
-     */
+    // Input handlers
     const handle_input_change = useCallback((e) => {
         handle_files_selected(e.target.files);
-        // Reset input to allow selecting the same file again
-        if (file_input_ref.current) {
+        if (file_input_ref.current)
             file_input_ref.current.value = '';
-        }
     }, [handle_files_selected]);
-    /**
-     * Handle private file input change
-     */
     const handle_private_input_change = useCallback((e) => {
         handle_private_files_selected(e.target.files);
-        // Reset input to allow selecting the same file again
-        if (private_file_input_ref.current) {
+        if (private_file_input_ref.current)
             private_file_input_ref.current.value = '';
-        }
     }, [handle_private_files_selected]);
     /**
-     * Handle file delete (public files)
+     * Handle file delete — calls file_manager.remove then updates state
      */
-    const handle_delete_file = useCallback((file_id) => {
-        const new_files = files.filter((f) => f.file_id !== file_id);
-        // Check minimum files constraint
-        if (min_files !== undefined && new_files.length < min_files) {
-            set_upload_errors((prev) => ({
-                ...prev,
-                delete_error: `Minimum ${min_files} files required`,
-            }));
+    const handle_delete_file = useCallback(async (file_id) => {
+        const file = files.find(f => f.file_id === file_id);
+        if (!file)
+            return;
+        if (min_files !== undefined && files.length <= min_files) {
+            set_upload_errors(prev => ({ ...prev, delete_error: `Minimum ${min_files} files required` }));
             return;
         }
-        update_files(new_files);
-        set_upload_errors((prev) => {
-            const next = { ...prev };
-            delete next.delete_error;
-            return next;
-        });
-    }, [files, min_files, update_files]);
+        try {
+            await file_manager.remove(file.file_id, file.ref_id);
+        }
+        catch (error) {
+            logger.warn('[CollabFormFileUpload] Error removing file reference', {
+                file_id, ref_id: file.ref_id,
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+        update_files(files.filter(f => f.file_id !== file_id));
+        set_upload_errors(prev => { const next = { ...prev }; delete next.delete_error; return next; });
+    }, [files, min_files, update_files, file_manager, logger]);
     /**
      * Handle private file delete
      */
-    const handle_delete_private_file = useCallback((file_id) => {
-        const new_files = private_files.filter((f) => f.file_id !== file_id);
-        update_private_files(new_files);
-    }, [private_files, update_private_files]);
-    /**
-     * Get file URL - handles both public and private files
-     */
-    const get_file_url = useCallback((file_path, visibility) => {
-        if (file_path.startsWith('/')) {
-            return file_path;
+    const handle_delete_private_file = useCallback(async (file_id) => {
+        const file = private_files.find(f => f.file_id === file_id);
+        if (!file)
+            return;
+        try {
+            await file_manager.remove(file.file_id, file.ref_id);
         }
-        // For private files, use the private files endpoint with permission query
-        if (visibility === 'private' && private_files_permission) {
-            return `/api/collab-forms/private-files/${encodeURIComponent(file_path)}?permission=${encodeURIComponent(private_files_permission)}`;
+        catch (error) {
+            logger.warn('[CollabFormFileUpload] Error removing private file reference', {
+                file_id, ref_id: file.ref_id,
+                error: error instanceof Error ? error.message : String(error),
+            });
         }
-        return `/api/collab-forms/files/${encodeURIComponent(file_path)}`;
-    }, [private_files_permission]);
-    // Build accordion title based on which file types are enabled
+        update_private_files(private_files.filter(f => f.file_id !== file_id));
+    }, [private_files, update_private_files, file_manager, logger]);
+    /**
+     * Handle re-upload for a missing file
+     */
+    const handle_reupload = useCallback(async (original_file_id, visibility) => {
+        if (!file_manager.reupload)
+            return;
+        // Create a file input and trigger selection
+        const input = document.createElement('input');
+        input.type = 'file';
+        if (file_accept)
+            input.accept = file_accept;
+        input.onchange = async () => {
+            const file = input.files?.[0];
+            if (!file)
+                return;
+            const uploading_id = `reupload-${original_file_id}`;
+            set_uploading_files(prev => new Set(prev).add(uploading_id));
+            try {
+                const new_attachment = await file_manager.reupload(file, original_file_id, {
+                    entity_type: 'form_field',
+                    entity_id: field_id_final,
+                    visibility,
+                    scope_id,
+                    uploaded_by,
+                });
+                // Replace the old attachment with the new one
+                if (visibility === 'public') {
+                    update_files(files.map(f => f.file_id === original_file_id ? new_attachment : f));
+                }
+                else {
+                    update_private_files(private_files.map(f => f.file_id === original_file_id ? new_attachment : f));
+                }
+            }
+            catch (error) {
+                set_upload_errors(prev => ({
+                    ...prev,
+                    [uploading_id]: error instanceof Error ? error.message : 'Re-upload failed',
+                }));
+            }
+            finally {
+                set_uploading_files(prev => {
+                    const next = new Set(prev);
+                    next.delete(uploading_id);
+                    return next;
+                });
+            }
+        };
+        input.click();
+    }, [file_manager, field_id_final, file_accept, scope_id, uploaded_by, files, private_files, update_files, update_private_files]);
+    /**
+     * Get download URL for a file
+     */
+    const get_file_url = useCallback((attachment) => {
+        return file_manager.get_download_url(attachment.file_id, attachment.visibility);
+    }, [file_manager]);
+    // Build accordion title
     const accordion_title = accept_files_public && show_private_section
         ? `Files (${files.length} public, ${private_files.length} private)`
         : show_private_section && !accept_files_public
             ? private_files.length > 0 ? `Private Files (${private_files.length})` : 'Private Files'
             : files.length > 0 ? `Files (${files.length})` : 'Files';
-    // Always render wrapper div to maintain consistent DOM structure
-    // This prevents hydration mismatches when file settings change between server and client
-    return (_jsx("div", { className: "cls_collab_file_upload space-y-2", suppressHydrationWarning: true, children: (accept_files_public || accept_files_private) ? (
-        /* Dynamic import for Accordion - will be loaded by consuming app */
-        _jsx(FileUploadAccordion, { field_id_final: field_id_final, title: accordion_title, is_dragging: is_dragging, on_drag_enter: handle_drag_enter, on_drag_leave: handle_drag_leave, on_drag_over: handle_drag_over, on_drop: handle_drop, file_input_ref: file_input_ref, file_accept: file_accept, on_input_change: handle_input_change, files: files, uploading_files: uploading_files, processing_files: processing_files, processed_files: processed_files, upload_errors: upload_errors, get_file_url: get_file_url, on_file_delete: handle_delete_file, get_file_icon: get_file_icon, format_file_size: format_file_size, max_files: max_files, min_files: min_files, 
-            // File mode props
-            accept_files_public: accept_files_public, show_private_section: show_private_section, private_files: private_files, private_file_input_ref: private_file_input_ref, is_dragging_private: is_dragging_private, on_private_drag_enter: handle_private_drag_enter, on_private_drag_leave: handle_private_drag_leave, on_private_drop: handle_private_drop, on_private_input_change: handle_private_input_change, on_private_file_delete: handle_delete_private_file, on_toggle_visibility: toggle_file_visibility })) : null }));
+    return (_jsx("div", { className: "cls_collab_file_upload space-y-2", suppressHydrationWarning: true, children: (accept_files_public || accept_files_private) ? (_jsx(FileUploadAccordion, { field_id_final: field_id_final, title: accordion_title, is_dragging: is_dragging, on_drag_enter: handle_drag_enter, on_drag_leave: handle_drag_leave, on_drag_over: handle_drag_over, on_drop: handle_drop, file_input_ref: file_input_ref, file_accept: file_accept, on_input_change: handle_input_change, files: files, uploading_files: uploading_files, upload_errors: upload_errors, get_file_url: get_file_url, on_file_delete: handle_delete_file, format_file_size: format_file_size, max_files: max_files, min_files: min_files, accept_files_public: accept_files_public, show_private_section: show_private_section, private_files: private_files, private_file_input_ref: private_file_input_ref, is_dragging_private: is_dragging_private, on_private_drag_enter: handle_private_drag_enter, on_private_drag_leave: handle_private_drag_leave, on_private_drop: handle_private_drop, on_private_input_change: handle_private_input_change, on_private_file_delete: handle_delete_private_file, on_toggle_visibility: toggle_file_visibility, show_file_status: show_file_status, allow_reupload: allow_reupload, file_statuses: file_statuses, on_reupload: handle_reupload })) : null }));
 }
 /**
  * File upload accordion component with dynamic imports
  */
-function FileUploadAccordion({ field_id_final, title, is_dragging, on_drag_enter, on_drag_leave, on_drag_over, on_drop, file_input_ref, file_accept, on_input_change, files, uploading_files, processing_files, processed_files, upload_errors, get_file_url, on_file_delete, get_file_icon, format_file_size, max_files, min_files, 
-// File mode props
-accept_files_public = false, show_private_section = false, private_files = [], private_file_input_ref, is_dragging_private = false, on_private_drag_enter, on_private_drag_leave, on_private_drop, on_private_input_change, on_private_file_delete, on_toggle_visibility, }) {
+function FileUploadAccordion({ field_id_final, title, is_dragging, on_drag_enter, on_drag_leave, on_drag_over, on_drop, file_input_ref, file_accept, on_input_change, files, uploading_files, upload_errors, get_file_url, on_file_delete, format_file_size, max_files, min_files, accept_files_public = false, show_private_section = false, private_files = [], private_file_input_ref, is_dragging_private = false, on_private_drag_enter, on_private_drag_leave, on_private_drop, on_private_input_change, on_private_file_delete, on_toggle_visibility, show_file_status = false, allow_reupload = false, file_statuses = {}, on_reupload, }) {
     const logger = use_logger();
     const [AccordionComponents, set_accordion_components] = React.useState(null);
     const [is_loading, set_is_loading] = React.useState(true);
     const [is_mounted, set_is_mounted] = React.useState(false);
-    // Track client-side mounting to prevent hydration mismatch
-    React.useEffect(() => {
-        set_is_mounted(true);
-    }, []);
+    React.useEffect(() => { set_is_mounted(true); }, []);
     React.useEffect(() => {
-        // Only load accordion on client side
         if (!is_mounted)
             return;
-        // Dynamic import - components will be resolved by consuming app's bundler
         const load_accordion = async () => {
             try {
                 set_is_loading(true);
-                // Try to import from consuming app's components directory
-                // This path will be resolved by Next.js/webpack in the consuming app
                 // @ts-expect-error - These modules are provided by the consuming application
                 const accordion_module = await import('@/components/ui/accordion').catch(() => null);
                 if (accordion_module) {
@@ -528,42 +444,31 @@ accept_files_public = false, show_private_section = false, private_files = [], p
         };
         load_accordion();
     }, [is_mounted]);
-    // Always render consistent structure to prevent hydration mismatch
-    // During SSR and initial client render, show empty placeholder
-    // After mount and accordion load, show actual content
     if (!is_mounted || is_loading || !AccordionComponents) {
         return (_jsx("div", { className: "cls_collab_file_upload_loading text-sm text-muted-foreground", suppressHydrationWarning: true }));
     }
     const { Accordion, AccordionItem, AccordionTrigger, AccordionContent } = AccordionComponents;
-    // Default to open if files exist
     const default_value = files.length > 0 ? 'files' : undefined;
-    // Determine if files are required (min_files >= 1)
     const is_files_required = min_files !== undefined && min_files >= 1;
     /**
-     * Render a file item with optional visibility toggle
+     * Render a single file item
      */
-    const render_file_item = (file_data, visibility, delete_handler) => {
-        const is_uploading = Array.from(uploading_files).some((id) => id.startsWith(file_data.file_id));
-        const is_processing = processing_files.has(file_data.file_id);
-        const is_processed = processed_files.has(file_data.file_id);
-        return (_jsxs("div", { className: "cls_collab_file_item flex-shrink-0 w-24 flex flex-col items-center gap-1 p-2 border rounded-md hover:bg-muted transition-colors relative", children: [_jsxs("a", { href: get_file_url(file_data.file_path, visibility), target: "_blank", rel: "noopener noreferrer", className: cn("flex flex-col items-center gap-1 w-full", is_uploading && "pointer-events-none opacity-50"), "aria-disabled": is_uploading, children: [_jsxs("div", { className: "relative", children: [get_file_icon(file_data.file_type, file_data.file_name), is_processing && (_jsx("div", { className: "absolute -bottom-1 -right-1 bg-background rounded-full p-0.5 shadow-sm border border-border", children: _jsx(FaSpinner, { className: "h-3 w-3 animate-spin text-primary" }) }))] }), _jsx("span", { className: "text-xs text-center truncate w-full", title: file_data.file_name, children: file_data.file_name }), _jsx("span", { className: "text-xs text-muted-foreground", children: format_file_size(file_data.file_size) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [accept_files_public && show_private_section && on_toggle_visibility && (_jsx("button", { type: "button", onClick: () => on_toggle_visibility(file_data.file_id, visibility), className: cn("p-1 transition-colors", visibility === 'private'
+    const render_file_item = (attachment, visibility, delete_handler) => {
+        const is_uploading = Array.from(uploading_files).some(id => id.includes(attachment.file_id) || id.includes(attachment.file_name));
+        const file_status = file_statuses[attachment.file_id] ?? attachment.status;
+        const is_missing = file_status === 'missing';
+        return (_jsxs("div", { className: "cls_collab_file_item flex-shrink-0 w-24 flex flex-col items-center gap-1 p-2 border rounded-md hover:bg-muted transition-colors relative", children: [_jsxs("a", { href: get_file_url(attachment), target: "_blank", rel: "noopener noreferrer", className: cn("flex flex-col items-center gap-1 w-full", (is_uploading || is_missing) && "pointer-events-none opacity-50"), "aria-disabled": is_uploading || is_missing, children: [_jsx("div", { className: "relative", children: get_file_icon(attachment.mime_type, attachment.file_name) }), _jsx("span", { className: "text-xs text-center truncate w-full", title: attachment.file_name, children: attachment.file_name }), _jsx("span", { className: "text-xs text-muted-foreground", children: format_file_size(attachment.file_size) })] }), show_file_status && file_status && file_status !== 'active' && (_jsx(StatusBadge, { status: file_status })), _jsxs("div", { className: "flex items-center gap-1", children: [allow_reupload && is_missing && on_reupload && (_jsx("button", { type: "button", onClick: () => on_reupload(attachment.file_id, visibility), className: "text-blue-600 hover:text-blue-700 p-1", title: "Re-upload file", "aria-label": `Re-upload ${attachment.file_name}`, children: _jsx(HiRefresh, { className: "h-4 w-4" }) })), accept_files_public && show_private_section && on_toggle_visibility && (_jsx("button", { type: "button", onClick: () => on_toggle_visibility(attachment.file_id, visibility), className: cn("p-1 transition-colors", visibility === 'private'
                                 ? "text-amber-600 hover:text-amber-700"
-                                : "text-muted-foreground hover:text-foreground"), disabled: is_uploading, "aria-label": visibility === 'private' ? `Make ${file_data.file_name} public` : `Make ${file_data.file_name} private`, title: visibility === 'private' ? 'Make public' : 'Make private', children: visibility === 'private' ? (_jsx(HiLockClosed, { className: "h-4 w-4" })) : (_jsx(HiLockOpen, { className: "h-4 w-4" })) })), _jsx("button", { type: "button", onClick: () => delete_handler(file_data.file_id), className: "text-destructive hover:text-destructive/80 p-1", disabled: is_uploading, "aria-label": `Delete ${file_data.file_name}`, children: _jsx(HiTrash, { className: "h-4 w-4" }) }), is_processed && !is_processing && (_jsx(HiCheckCircle, { className: "h-4 w-4 text-green-500" }))] }), is_uploading && (_jsx("div", { className: "absolute inset-0 bg-background/50 flex items-center justify-center rounded-md", children: _jsx("div", { className: "text-xs text-muted-foreground", children: "Uploading..." }) }))] }, file_data.file_id));
+                                : "text-muted-foreground hover:text-foreground"), disabled: is_uploading, "aria-label": visibility === 'private' ? `Make ${attachment.file_name} public` : `Make ${attachment.file_name} private`, title: visibility === 'private' ? 'Make public' : 'Make private', children: visibility === 'private' ? (_jsx(HiLockClosed, { className: "h-4 w-4" })) : (_jsx(HiLockOpen, { className: "h-4 w-4" })) })), _jsx("button", { type: "button", onClick: () => delete_handler(attachment.file_id), className: "text-destructive hover:text-destructive/80 p-1", disabled: is_uploading, "aria-label": `Delete ${attachment.file_name}`, children: _jsx(HiTrash, { className: "h-4 w-4" }) })] }), is_uploading && (_jsx("div", { className: "absolute inset-0 bg-background/50 flex items-center justify-center rounded-md", children: _jsx("div", { className: "text-xs text-muted-foreground", children: "Uploading..." }) }))] }, attachment.file_id));
     };
     /**
      * Render file upload section (drop zone + file list)
      */
     const render_file_section = (section_type, section_files, section_is_dragging, section_on_drag_enter, section_on_drag_leave, section_on_drop, section_file_input_ref, section_on_input_change, section_on_delete, input_id_suffix) => (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('cls_collab_file_drop_zone border-2 border-dashed rounded-md p-4 text-center transition-colors', section_is_dragging
                     ? 'border-primary bg-primary/5'
-                    : 'border-input hover:border-primary/50 hover:bg-muted/50', section_files.length >= max_files && 'opacity-50 cursor-not-allowed'), onDragEnter: section_on_drag_enter, onDragLeave: section_on_drag_leave, onDragOver: on_drag_over, onDrop: section_on_drop, children: [_jsx("input", { ref: section_file_input_ref, type: "file", id: `${field_id_final}-${input_id_suffix}`, className: "hidden", accept: file_accept, multiple: true, onChange: section_on_input_change, disabled: section_files.length >= max_files }), _jsxs("label", { htmlFor: `${field_id_final}-${input_id_suffix}`, className: cn('cursor-pointer block', section_files.length >= max_files && 'cursor-not-allowed opacity-50'), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Drag and drop files here, or click to select" }), file_accept && (_jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: ["Accepted: ", file_accept] }))] })] }), section_files.length > 0 && (_jsx("div", { className: "cls_collab_file_list", children: _jsx("div", { className: "flex overflow-x-auto gap-2 pb-2", children: section_files.map((file_data) => render_file_item(file_data, section_type, section_on_delete)) }) }))] }));
-    // Wrap Accordion in div with suppressHydrationWarning to prevent React from checking children
-    // The Accordion content may differ between server and client due to dynamic imports
-    return (_jsx("div", { suppressHydrationWarning: true, children: _jsx(Accordion, { type: "single", collapsible: true, defaultValue: default_value, className: "w-full", children: _jsxs(AccordionItem, { value: "files", children: [_jsxs(AccordionTrigger, { className: "text-sm font-medium", children: [title, is_files_required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(AccordionContent, { children: _jsxs("div", { className: "space-y-4", children: [Object.keys(upload_errors).length > 0 && (_jsx("div", { className: "space-y-1", children: Object.entries(upload_errors).map(([key, error]) => (_jsx("p", { className: "text-sm text-destructive", children: error }, key))) })), accept_files_public && show_private_section ? (_jsxs(Accordion, { type: "multiple", defaultValue: ['public-files', 'private-files'], className: "w-full", children: [_jsxs(AccordionItem, { value: "public-files", className: "border-b-0", children: [_jsx(AccordionTrigger, { className: "text-sm font-medium py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiLockOpen, { className: "h-4 w-4 text-muted-foreground" }), _jsxs("span", { children: ["Public Files (", files.length, ")"] })] }) }), _jsx(AccordionContent, { className: "pb-4", children: render_file_section('public', files, is_dragging, on_drag_enter, on_drag_leave, on_drop, file_input_ref, on_input_change, on_file_delete, 'public-file-input') })] }), _jsxs(AccordionItem, { value: "private-files", className: "border-b-0", children: [_jsx(AccordionTrigger, { className: "text-sm font-medium py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiLockClosed, { className: "h-4 w-4 text-amber-600" }), _jsxs("span", { children: ["Private Files (", private_files.length, ")"] })] }) }), _jsx(AccordionContent, { className: "pb-4", children: private_file_input_ref && on_private_drag_enter && on_private_drag_leave && on_private_drop && on_private_input_change && on_private_file_delete && render_file_section('private', private_files, is_dragging_private, on_private_drag_enter, on_private_drag_leave, on_private_drop, private_file_input_ref, on_private_input_change, on_private_file_delete, 'private-file-input') })] })] })) : show_private_section && !accept_files_public ? (
-                                /* Private-only section UI */
-                                _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-amber-600 mb-2", children: [_jsx(HiLockClosed, { className: "h-4 w-4" }), _jsx("span", { className: "font-medium", children: "Private Files" })] }), private_file_input_ref && on_private_drag_enter && on_private_drag_leave && on_private_drop && on_private_input_change && on_private_file_delete && render_file_section('private', private_files, is_dragging_private, on_private_drag_enter, on_private_drag_leave, on_private_drop, private_file_input_ref, on_private_input_change, on_private_file_delete, 'private-file-input')] })) : accept_files_public ? (
-                                /* Public-only section UI (original behavior) */
-                                _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: cn('cls_collab_file_drop_zone border-2 border-dashed rounded-md p-6 text-center transition-colors', is_dragging
+                    : 'border-input hover:border-primary/50 hover:bg-muted/50', section_files.length >= max_files && 'opacity-50 cursor-not-allowed'), onDragEnter: section_on_drag_enter, onDragLeave: section_on_drag_leave, onDragOver: on_drag_over, onDrop: section_on_drop, children: [_jsx("input", { ref: section_file_input_ref, type: "file", id: `${field_id_final}-${input_id_suffix}`, className: "hidden", accept: file_accept, multiple: true, onChange: section_on_input_change, disabled: section_files.length >= max_files }), _jsxs("label", { htmlFor: `${field_id_final}-${input_id_suffix}`, className: cn('cursor-pointer block', section_files.length >= max_files && 'cursor-not-allowed opacity-50'), children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Drag and drop files here, or click to select" }), file_accept && (_jsxs("p", { className: "text-xs text-muted-foreground mt-1", children: ["Accepted: ", file_accept] }))] })] }), section_files.length > 0 && (_jsx("div", { className: "cls_collab_file_list", children: _jsx("div", { className: "flex overflow-x-auto gap-2 pb-2", children: section_files.map(attachment => render_file_item(attachment, section_type, section_on_delete)) }) }))] }));
+    return (_jsx("div", { suppressHydrationWarning: true, children: _jsx(Accordion, { type: "single", collapsible: true, defaultValue: default_value, className: "w-full", children: _jsxs(AccordionItem, { value: "files", children: [_jsxs(AccordionTrigger, { className: "text-sm font-medium", children: [title, is_files_required && _jsx("span", { className: "text-destructive ml-1", children: "*" })] }), _jsx(AccordionContent, { children: _jsxs("div", { className: "space-y-4", children: [Object.keys(upload_errors).length > 0 && (_jsx("div", { className: "space-y-1", children: Object.entries(upload_errors).map(([key, error]) => (_jsx("p", { className: "text-sm text-destructive", children: error }, key))) })), accept_files_public && show_private_section ? (_jsxs(Accordion, { type: "multiple", defaultValue: ['public-files', 'private-files'], className: "w-full", children: [_jsxs(AccordionItem, { value: "public-files", className: "border-b-0", children: [_jsx(AccordionTrigger, { className: "text-sm font-medium py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiLockOpen, { className: "h-4 w-4 text-muted-foreground" }), _jsxs("span", { children: ["Public Files (", files.length, ")"] })] }) }), _jsx(AccordionContent, { className: "pb-4", children: render_file_section('public', files, is_dragging, on_drag_enter, on_drag_leave, on_drop, file_input_ref, on_input_change, on_file_delete, 'public-file-input') })] }), _jsxs(AccordionItem, { value: "private-files", className: "border-b-0", children: [_jsx(AccordionTrigger, { className: "text-sm font-medium py-2", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(HiLockClosed, { className: "h-4 w-4 text-amber-600" }), _jsxs("span", { children: ["Private Files (", private_files.length, ")"] })] }) }), _jsx(AccordionContent, { className: "pb-4", children: private_file_input_ref && on_private_drag_enter && on_private_drag_leave && on_private_drop && on_private_input_change && on_private_file_delete && render_file_section('private', private_files, is_dragging_private, on_private_drag_enter, on_private_drag_leave, on_private_drop, private_file_input_ref, on_private_input_change, on_private_file_delete, 'private-file-input') })] })] })) : show_private_section && !accept_files_public ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm text-amber-600 mb-2", children: [_jsx(HiLockClosed, { className: "h-4 w-4" }), _jsx("span", { className: "font-medium", children: "Private Files" })] }), private_file_input_ref && on_private_drag_enter && on_private_drag_leave && on_private_drop && on_private_input_change && on_private_file_delete && render_file_section('private', private_files, is_dragging_private, on_private_drag_enter, on_private_drag_leave, on_private_drop, private_file_input_ref, on_private_input_change, on_private_file_delete, 'private-file-input')] })) : accept_files_public ? (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: cn('cls_collab_file_drop_zone border-2 border-dashed rounded-md p-6 text-center transition-colors', is_dragging
                                                 ? 'border-primary bg-primary/5'
-                                                : 'border-input hover:border-primary/50 hover:bg-muted/50', files.length >= max_files && 'opacity-50 cursor-not-allowed'), onDragEnter: on_drag_enter, onDragLeave: on_drag_leave, onDragOver: on_drag_over, onDrop: on_drop, children: [_jsx("input", { ref: file_input_ref, type: "file", id: `${field_id_final}-file-input`, className: "hidden", accept: file_accept, multiple: true, onChange: on_input_change, disabled: files.length >= max_files }), _jsx("label", { htmlFor: `${field_id_final}-file-input`, className: cn('cursor-pointer block', files.length >= max_files && 'cursor-not-allowed opacity-50'), children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Drag and drop files here, or click to select" }), file_accept && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Accepted: ", file_accept] }))] }) })] }), files.length > 0 && (_jsx("div", { className: "cls_collab_file_list space-y-2", children: _jsx("div", { className: "flex overflow-x-auto gap-2 pb-2", children: files.map((file_data) => render_file_item(file_data, 'public', on_file_delete)) }) }))] })) : null] }) })] }) }) }));
+                                                : 'border-input hover:border-primary/50 hover:bg-muted/50', files.length >= max_files && 'opacity-50 cursor-not-allowed'), onDragEnter: on_drag_enter, onDragLeave: on_drag_leave, onDragOver: on_drag_over, onDrop: on_drop, children: [_jsx("input", { ref: file_input_ref, type: "file", id: `${field_id_final}-file-input`, className: "hidden", accept: file_accept, multiple: true, onChange: on_input_change, disabled: files.length >= max_files }), _jsx("label", { htmlFor: `${field_id_final}-file-input`, className: cn('cursor-pointer block', files.length >= max_files && 'cursor-not-allowed opacity-50'), children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: "Drag and drop files here, or click to select" }), file_accept && (_jsxs("p", { className: "text-xs text-muted-foreground", children: ["Accepted: ", file_accept] }))] }) })] }), files.length > 0 && (_jsx("div", { className: "cls_collab_file_list space-y-2", children: _jsx("div", { className: "flex overflow-x-auto gap-2 pb-2", children: files.map(attachment => render_file_item(attachment, 'public', on_file_delete)) }) }))] })) : null] }) })] }) }) }));
 }
 //# sourceMappingURL=collab_form_file_upload.js.map