@maxal_studio/kratosjs-react 1.0.0

package/dist/components/FileUploadField.js

@@ -0,0 +1,478 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { getFieldError } from '../utils/fieldErrors';
+import { useDropzone } from 'react-dropzone';
+import { Check, Upload, File, Trash2, Loader2 } from 'lucide-react';
+import { HintDisplay } from './utils/HintDisplay';
+import { ViewFieldWrapper } from './utils/ViewFieldWrapper';
+import { MediaPreviewModal } from './utils/MediaPreviewModal';
+import { authenticatedFetch } from '../api/authenticatedFetch';
+import { useValidation } from '../hooks/useValidation';
+import { translate } from '../i18n/activeLocale';
+/**
+ * Generate a unique ID for file tracking
+ */
+const generateId = () => `file-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+/**
+ * Convert File to base64 string
+ */
+const fileToBase64 = (file) => {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            const result = reader.result;
+            resolve(result.split(',')[1]);
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+};
+/**
+ * Format bytes to human readable size
+ */
+const formatFileSize = (bytes) => {
+    if (bytes === 0)
+        return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
+};
+/**
+ * Check if a URL points to an image
+ */
+const isImageUrl = (url) => {
+    if (!url)
+        return false;
+    if (url.startsWith('blob:'))
+        return true;
+    return /\.(jpg|jpeg|png|gif|webp|svg|bmp)$/i.test(url);
+};
+/**
+ * Check if a URL points to a video
+ */
+const isVideoUrl = (url) => {
+    if (!url)
+        return false;
+    return /\.(mp4|webm|ogg|mov|m4v)$/i.test(url);
+};
+/**
+ * Check if a URL points to an audio file
+ */
+const isAudioUrl = (url) => {
+    if (!url)
+        return false;
+    return /\.(mp3|wav|ogg|m4a)$/i.test(url);
+};
+function FileUploadViewField({ label, value }) {
+    const [previewOpen, setPreviewOpen] = useState(false);
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const [previewType, setPreviewType] = useState('image');
+    const displayValue = value || null;
+    const filesArray = Array.isArray(displayValue) ? displayValue : displayValue ? [displayValue] : [];
+    if (filesArray.length === 0) {
+        return _jsx(ViewFieldWrapper, { label: label, children: "-" });
+    }
+    const openPreview = (url, type) => {
+        setPreviewUrl(url);
+        setPreviewType(type);
+        setPreviewOpen(true);
+    };
+    return (_jsxs(ViewFieldWrapper, { label: label, children: [_jsx("div", { className: "flex flex-wrap gap-4", children: filesArray.map((file, index) => {
+                    const fileUrl = typeof file === 'object' && file !== null ? file.url || file.key : file;
+                    if (!fileUrl) {
+                        return null;
+                    }
+                    const image = isImageUrl(fileUrl);
+                    const video = isVideoUrl(fileUrl);
+                    if (video) {
+                        return (_jsx("div", { className: "relative", children: _jsx("video", { src: fileUrl, controls: true, className: "w-72 h-44 rounded-lg border border-border object-cover bg-black", onClick: e => {
+                                    e.stopPropagation();
+                                    openPreview(fileUrl, 'video');
+                                } }) }, index));
+                    }
+                    if (image) {
+                        return (_jsx("div", { className: "relative", children: _jsx("img", { src: fileUrl, alt: `${label || translate('core:common.image')} ${index + 1}`, className: "w-40 h-40 object-cover rounded-lg border border-border cursor-pointer hover:opacity-80 transition-opacity", onClick: () => openPreview(fileUrl, 'image') }) }, index));
+                    }
+                    return (_jsxs("div", { className: "flex items-center gap-2 p-2 border border-border rounded-lg bg-surface", children: [_jsx(File, { size: 20, className: "text-fg-secondary" }), _jsx("span", { className: "text-sm text-fg", children: typeof file === 'object' && file !== null
+                                    ? file.key || translate('core:common.file')
+                                    : translate('core:common.file') })] }, index));
+                }) }), previewUrl && (_jsx(MediaPreviewModal, { isOpen: previewOpen, onClose: () => setPreviewOpen(false), mediaUrl: previewUrl, mediaType: previewType, title: label, autoplay: previewType === 'video', controls: true }))] }));
+}
+export function FileUploadField({ name, label, helperText, hint, hintIcon, hintColor, acceptedFileTypes = [], maxSize, minSize, multiple = false, maxFiles, disabled, required, visibility, directory, bucket, apiBaseUrl, resource, mode, value, validation, operation, }) {
+    // View mode: render formatted display (with image/video preview)
+    if (mode === 'view') {
+        return _jsx(FileUploadViewField, { label: label, value: value });
+    }
+    const { setValue, watch, register, formState: { errors: formErrors }, } = useFormContext();
+    const [files, setFiles] = useState([]);
+    const [errors, setErrors] = useState([]);
+    const initializedRef = useRef(false);
+    // Preview state for edit mode
+    const [editPreviewOpen, setEditPreviewOpen] = useState(false);
+    const [editPreviewUrl, setEditPreviewUrl] = useState(null);
+    const [editPreviewType, setEditPreviewType] = useState('image');
+    const currentValue = watch(name);
+    // Evaluate validation conditions with form context
+    const validationResult = useValidation(validation?.rules || [], operation, name);
+    const isRequired = validationResult.required !== undefined;
+    const fieldError = getFieldError(formErrors, name);
+    // Register field with React Hook Form for validation
+    React.useEffect(() => {
+        register(name, validationResult);
+    }, [register, name, validationResult]);
+    // Compute endpoints
+    // Use generic media endpoint if no resource is provided, otherwise use resource-specific endpoint
+    const uploadEndpoint = useMemo(() => {
+        if (!apiBaseUrl)
+            return null;
+        if (resource) {
+            return `${apiBaseUrl}/${resource}/media/upload`;
+        }
+        return `${apiBaseUrl}/media/upload`;
+    }, [apiBaseUrl, resource]);
+    const deleteEndpoint = useMemo(() => {
+        if (!apiBaseUrl)
+            return null;
+        if (resource) {
+            return `${apiBaseUrl}/${resource}/media/delete`;
+        }
+        return `${apiBaseUrl}/media/delete`;
+    }, [apiBaseUrl, resource]);
+    /**
+     * Initialize from existing value (server sends { url, key } objects)
+     * Only runs once on mount if there's an initial value
+     */
+    useEffect(() => {
+        if (initializedRef.current)
+            return;
+        if (!currentValue)
+            return;
+        initializedRef.current = true;
+        const existingFiles = [];
+        const keys = [];
+        const processItem = (item) => {
+            if (!item)
+                return null;
+            // New format: { key, bucket, url }
+            if (typeof item === 'object' && item.key) {
+                keys.push(item.key);
+                return {
+                    id: generateId(),
+                    key: item.key,
+                    bucket: item.bucket,
+                    url: item.url || item.key, // Use url if available, fallback to key
+                    status: 'existing',
+                };
+            }
+            // String form: treat the value as a storage key
+            if (typeof item === 'string') {
+                keys.push(item);
+                return {
+                    id: generateId(),
+                    key: item,
+                    url: item,
+                    status: 'existing',
+                };
+            }
+            return null;
+        };
+        if (Array.isArray(currentValue)) {
+            currentValue.forEach(item => {
+                const fileItem = processItem(item);
+                if (fileItem)
+                    existingFiles.push(fileItem);
+            });
+        }
+        else {
+            const fileItem = processItem(currentValue);
+            if (fileItem)
+                existingFiles.push(fileItem);
+        }
+        setFiles(existingFiles);
+        // Set form value to just keys (don't validate on initial load)
+        setValue(name, multiple ? keys : keys[0] || null, { shouldValidate: false });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Only run once on mount
+    /**
+     * Upload a single file to the server
+     */
+    const uploadFile = useCallback(async (file) => {
+        if (!uploadEndpoint) {
+            console.warn('No upload endpoint configured');
+            return null;
+        }
+        try {
+            const base64 = await fileToBase64(file);
+            const response = await authenticatedFetch(uploadEndpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    file: base64,
+                    filename: file.name,
+                    contentType: file.type,
+                    fieldName: name,
+                    isArray: multiple,
+                    path: directory,
+                    visibility,
+                    bucket, // Pass bucket adapter name
+                }),
+            }, apiBaseUrl);
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(`Upload failed: ${error.message || response.statusText}`);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Upload error:', error);
+            return null;
+        }
+    }, [uploadEndpoint, name, multiple, directory, visibility]);
+    /**
+     * Delete a file from bucket
+     */
+    const deleteFromStorage = useCallback(async (payload) => {
+        if (!deleteEndpoint)
+            return true;
+        try {
+            const body = typeof payload === 'string' ? { key: payload } : payload;
+            const response = await authenticatedFetch(deleteEndpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            }, apiBaseUrl);
+            return response.ok;
+        }
+        catch (error) {
+            console.error('Delete error:', error);
+            return false;
+        }
+    }, [deleteEndpoint]);
+    /**
+     * Update form value with current keys
+     * Backend will automatically detect deletions by comparing with existing record
+     */
+    const updateFormValue = useCallback((fileList) => {
+        // Get keys from uploaded/existing files
+        const keys = fileList
+            .filter(f => f.key && (f.status === 'uploaded' || f.status === 'existing'))
+            .map(f => f.key);
+        // Set main field value - backend will detect deletions automatically
+        // Trigger validation when value changes
+        if (multiple) {
+            setValue(name, keys.length > 0 ? keys : [], { shouldValidate: true });
+        }
+        else {
+            setValue(name, keys[0] || null, { shouldValidate: true });
+        }
+    }, [multiple, name, setValue]);
+    /**
+     * Handle file drop/selection
+     */
+    const onDrop = useCallback(async (acceptedFiles, rejectedFiles) => {
+        setErrors([]);
+        // Handle rejected files
+        const newErrors = [];
+        rejectedFiles.forEach(({ file, errors: fileErrors }) => {
+            fileErrors.forEach((error) => {
+                switch (error.code) {
+                    case 'file-too-large':
+                        newErrors.push(`${file.name}: File is too large`);
+                        break;
+                    case 'file-too-small':
+                        newErrors.push(`${file.name}: File is too small`);
+                        break;
+                    case 'file-invalid-type':
+                        newErrors.push(`${file.name}: Invalid file type`);
+                        break;
+                    case 'too-many-files':
+                        newErrors.push(`Too many files. Maximum is ${maxFiles}`);
+                        break;
+                    default:
+                        newErrors.push(`${file.name}: ${error.message}`);
+                }
+            });
+        });
+        if (newErrors.length > 0) {
+            setErrors(newErrors);
+            return;
+        }
+        if (acceptedFiles.length === 0)
+            return;
+        // Create file items with pending status
+        const newFileItems = acceptedFiles.map(file => ({
+            id: generateId(),
+            file,
+            blobUrl: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,
+            status: 'pending',
+        }));
+        // Handle single file replacement
+        let updatedFiles;
+        if (!multiple) {
+            // Clean up existing file
+            const existingFile = files[0];
+            if (existingFile) {
+                // Revoke blob URL
+                if (existingFile.blobUrl) {
+                    URL.revokeObjectURL(existingFile.blobUrl);
+                }
+                if (existingFile.key && existingFile.status === 'uploaded') {
+                    // Delete immediately (not saved yet) - backend will handle existing files
+                    const deletePayload = existingFile.bucket
+                        ? { key: existingFile.key, bucket: existingFile.bucket }
+                        : { key: existingFile.key };
+                    deleteFromStorage(deletePayload);
+                }
+                // Note: For existing files, backend will detect deletion automatically
+            }
+            updatedFiles = newFileItems;
+        }
+        else {
+            updatedFiles = [...files, ...newFileItems];
+        }
+        // Update state with pending files
+        setFiles(updatedFiles);
+        // Upload files
+        if (uploadEndpoint) {
+            // Mark files as uploading
+            setFiles(prev => prev.map(f => newFileItems.find(nf => nf.id === f.id) ? { ...f, status: 'uploading' } : f));
+            // Upload all new files and collect results
+            const uploadResults = [];
+            for (const fileItem of newFileItems) {
+                const result = await uploadFile(fileItem.file);
+                uploadResults.push({ id: fileItem.id, result });
+            }
+            // Build the final file list
+            const finalFiles = [];
+            // Start with existing/previously uploaded files (for multiple mode)
+            if (multiple) {
+                for (const f of updatedFiles) {
+                    // Keep files that aren't part of this upload batch
+                    if (!newFileItems.find(nf => nf.id === f.id)) {
+                        finalFiles.push(f);
+                    }
+                }
+            }
+            // Add newly uploaded files with their results
+            for (const fileItem of newFileItems) {
+                const uploadResult = uploadResults.find(r => r.id === fileItem.id);
+                if (uploadResult?.result?.data?.url && uploadResult?.result?.data?.key) {
+                    // Revoke blob URL since we have server URL now
+                    if (fileItem.blobUrl) {
+                        URL.revokeObjectURL(fileItem.blobUrl);
+                    }
+                    // Create new object explicitly to avoid any issues with spread
+                    // Extract bucket from formatted data if available
+                    const bucketName = bucket;
+                    finalFiles.push({
+                        id: fileItem.id,
+                        file: fileItem.file,
+                        key: uploadResult.result.data.key,
+                        bucket: bucketName,
+                        url: uploadResult.result.data.url,
+                        status: 'uploaded',
+                    });
+                }
+                else {
+                    finalFiles.push({
+                        id: fileItem.id,
+                        file: fileItem.file,
+                        blobUrl: fileItem.blobUrl,
+                        status: 'error',
+                        error: 'Upload failed',
+                    });
+                }
+            }
+            // Update state and form value separately (not inside setFiles callback)
+            setFiles(finalFiles);
+            updateFormValue(finalFiles);
+        }
+        else {
+            // No upload endpoint - just update state
+            setFiles(updatedFiles);
+        }
+    }, [files, multiple, maxFiles, uploadEndpoint, uploadFile, deleteFromStorage, updateFormValue]);
+    /**
+     * Remove a file
+     * Backend will automatically detect deletions by comparing with existing record
+     */
+    const removeFile = useCallback(async (fileId) => {
+        const fileToRemove = files.find(f => f.id === fileId);
+        if (!fileToRemove)
+            return;
+        // Revoke blob URL
+        if (fileToRemove.blobUrl) {
+            URL.revokeObjectURL(fileToRemove.blobUrl);
+        }
+        if (fileToRemove.key && fileToRemove.status === 'uploaded') {
+            // Delete immediately (not saved to DB yet) - backend will handle existing files
+            const deletePayload = fileToRemove.bucket
+                ? { key: fileToRemove.key, bucket: fileToRemove.bucket }
+                : { key: fileToRemove.key };
+            const deleted = await deleteFromStorage(deletePayload);
+            if (!deleted) {
+                setErrors(['Failed to delete file from bucket']);
+                return;
+            }
+        }
+        // Note: For existing files, backend will detect deletion automatically
+        // Update files state
+        const updatedFiles = files.filter(f => f.id !== fileId);
+        setFiles(updatedFiles);
+        // Update form value - backend will detect deletions
+        updateFormValue(updatedFiles);
+    }, [files, deleteFromStorage, updateFormValue]);
+    // Calculate upload limits
+    const validFileCount = files.filter(f => f.status !== 'error').length;
+    const maxAllowed = multiple ? maxFiles || Infinity : 1;
+    const remainingSlots = Math.max(0, maxAllowed - validFileCount);
+    const isAtLimit = remainingSlots <= 0;
+    // Dropzone config
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({
+        onDrop,
+        accept: acceptedFileTypes.length > 0
+            ? acceptedFileTypes.reduce((acc, type) => ({ ...acc, [type]: [] }), {})
+            : undefined,
+        maxSize: maxSize ? maxSize * 1024 : undefined,
+        minSize: minSize ? minSize * 1024 : undefined,
+        multiple,
+        maxFiles: remainingSlots,
+        disabled: disabled || isAtLimit,
+    });
+    // Get display URL for a file
+    const getDisplayUrl = (file) => file.url || file.blobUrl;
+    // Get display name for a file
+    const getDisplayName = (file) => {
+        if (file.file?.name)
+            return file.file.name;
+        if (file.url)
+            return file.url.split('/').pop() || 'File';
+        if (file.key)
+            return file.key.split('/').pop() || 'File';
+        return 'File';
+    };
+    const openEditPreview = (url, type) => {
+        setEditPreviewUrl(url);
+        setEditPreviewType(type);
+        setEditPreviewOpen(true);
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs("label", { className: "block text-sm font-medium text-gray-700 dark:text-gray-300", children: [label, isRequired && _jsx("span", { className: "text-red-500 dark:text-red-400 ml-1", children: "*" })] })), helperText && _jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: helperText }), _jsx(HintDisplay, { hint: hint, hintIcon: hintIcon, hintColor: hintColor }), isAtLimit ? (_jsxs("div", { className: "border-2 border-dashed rounded-lg p-6 text-center border-border bg-gray-50 dark:bg-gray-800/50", children: [_jsx(Check, { className: "mx-auto h-12 w-12 text-green-500 dark:text-green-400", strokeWidth: 1.5 }), _jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: multiple ? (_jsxs(_Fragment, { children: ["Maximum of ", _jsx("span", { className: "font-semibold", children: maxFiles }), " files reached"] })) : (_jsx(_Fragment, { children: translate('core:file.uploaded') })) }), _jsxs("p", { className: "mt-1 text-xs text-gray-500", children: ["Remove ", multiple ? 'a file' : 'the file', " to upload a new one"] })] })) : (_jsxs("div", { ...getRootProps(), className: `
+						border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors
+						${isDragActive ? 'border-accent bg-accent-soft dark:bg-accent-soft' : 'border-border hover:border-gray-400'}
+						${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+					`, children: [_jsx("input", { ...getInputProps() }), _jsx(Upload, { className: "mx-auto h-12 w-12 text-gray-400 dark:text-gray-500", strokeWidth: 1.5 }), _jsx("p", { className: "mt-2 text-sm text-gray-600 dark:text-gray-400", children: isDragActive ? (_jsx("span", { className: "font-semibold text-accent", children: translate('core:file.drop_here') })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "font-semibold text-accent", children: translate('core:file.click_to_upload') }), ' ', "or drag and drop"] })) }), _jsxs("p", { className: "mt-1 text-xs text-gray-500", children: [acceptedFileTypes.length > 0 ? acceptedFileTypes.join(', ') : 'Any file type', maxSize && ` • Max ${maxSize}KB`, multiple && maxFiles && ` • ${validFileCount}/${maxFiles} files`] })] })), (errors.length > 0 || fieldError) && (_jsxs("div", { className: "space-y-1", children: [errors.map((error, index) => (_jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }, index))), fieldError && (_jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: fieldError.message }))] })), files.length > 0 && (_jsx("div", { className: "space-y-2 mt-4", children: files.map(file => {
+                    const displayUrl = getDisplayUrl(file);
+                    const displayName = getDisplayName(file);
+                    const isImage = (displayUrl && isImageUrl(displayUrl)) || file.file?.type?.startsWith('image/');
+                    const isVideo = (displayUrl && isVideoUrl(displayUrl)) || file.file?.type?.startsWith('video/');
+                    const isAudio = (displayUrl && isAudioUrl(displayUrl)) || file.file?.type?.startsWith('audio/');
+                    const isLoading = file.status === 'pending' || file.status === 'uploading';
+                    const hasError = file.status === 'error';
+                    return (_jsxs("div", { className: `flex items-center justify-between p-3 bg-muted rounded-lg border border-border
+									${isLoading ? 'opacity-60' : ''}
+									${hasError ? 'border-red-500 dark:border-red-400' : ''}
+								`, children: [_jsxs("div", { className: "flex items-center space-x-3 flex-1 min-w-0", children: [displayUrl && (isImage || isVideo || isAudio) ? (_jsx("button", { type: "button", onClick: () => openEditPreview(displayUrl, isVideo ? 'video' : isAudio ? 'audio' : 'image'), className: "h-14 w-14 rounded overflow-hidden flex items-center justify-center bg-muted hover:opacity-80 transition-opacity", children: isImage ? (_jsx("img", { src: displayUrl, alt: displayName, className: "h-full w-full object-cover" })) : isVideo ? (_jsx("div", { className: "h-full w-full flex items-center justify-center bg-black text-white text-xs", children: _jsx("span", { className: "px-1", children: translate('core:file.video') }) })) : (_jsx("div", { className: "h-full w-full flex items-center justify-center bg-linear-to-r from-blue-600 to-purple-600 text-white text-xs", children: _jsx("span", { className: "px-1", children: translate('core:file.audio') }) })) })) : (_jsx("div", { className: "h-10 w-10 bg-muted rounded flex items-center justify-center", children: _jsx(File, { className: "h-6 w-6 text-gray-400 dark:text-gray-500" }) })), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate", children: displayName }), file.status === 'pending' && (_jsxs("p", { className: "text-xs text-gray-500 flex items-center gap-1", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Waiting..."] })), file.status === 'uploading' && (_jsxs("p", { className: "text-xs text-accent flex items-center gap-1", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), "Uploading..."] })), file.status === 'error' && (_jsx("p", { className: "text-xs text-red-500 dark:text-red-400", children: file.error || translate('core:common.error') })), file.status === 'uploaded' && (_jsx("p", { className: "text-xs text-green-500 dark:text-green-400", children: translate('core:file.saved') })), file.status === 'existing' && (_jsx("p", { className: "text-xs text-green-500 dark:text-green-400", children: translate('core:file.saved') })), file.file && file.status !== 'error' && (_jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: formatFileSize(file.file.size) }))] })] }), _jsx("button", { type: "button", onClick: () => removeFile(file.id), className: "ml-3 text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 focus:outline-none", disabled: disabled || isLoading, children: _jsx(Trash2, { className: "h-5 w-5" }) })] }, file.id));
+                }) })), editPreviewUrl && (_jsx(MediaPreviewModal, { isOpen: editPreviewOpen, onClose: () => setEditPreviewOpen(false), mediaUrl: editPreviewUrl, mediaType: editPreviewType, title: typeof label === 'string' ? label : undefined, autoplay: editPreviewType === 'video' || editPreviewType === 'audio', controls: true }))] }));
+}

package/dist/components/GlobalSearch.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface GlobalSearchResult {
+    _id: string;
+    title: string;
+    featuredImage?: {
+        url: string;
+        key: string;
+        bucket: string;
+    };
+    record: Record<string, unknown>;
+}
+export interface GlobalSearchResourceResults {
+    label: string;
+    pluralLabel: string;
+    icon?: string;
+    results: GlobalSearchResult[];
+}
+export interface GlobalSearchProps {
+    apiBaseUrl: string;
+    onResultClick?: (resourceSlug: string, recordId: string) => void;
+}
+export declare function GlobalSearch({ apiBaseUrl, onResultClick }: GlobalSearchProps): React.JSX.Element;