@airoom/nextmin-react 0.1.0

package/dist/components/AdminApp.js

@@ -0,0 +1,134 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useMemo } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import { setSession, clearSession } from '../state/sessionSlice';
+import { AuthPage } from '../auth/AuthPage';
+import { Sidebar } from './Sidebar';
+import { NextMinRouter } from '../router/NextMinRouter';
+import { usePathname, useRouter } from 'next/navigation';
+import { AdminRouteNormalizer } from '../router/AdminRouteNormalizer';
+import { SectionLoader } from './SectionLoader';
+import { api } from '../lib/api';
+import { systemLoading, systemLoaded, systemFailed, } from '../state/nextMinSlice';
+function isJwtValid(token) {
+    if (!token)
+        return false;
+    const parts = token.split('.');
+    if (parts.length !== 3)
+        return true; // non-JWT token: treat as present
+    try {
+        const payload = JSON.parse(atob(parts[1].replace(/-/g, '+').replace(/_/g, '/')));
+        if (typeof payload?.exp === 'number') {
+            return payload.exp * 1000 > Date.now();
+        }
+        return true;
+    }
+    catch {
+        return true;
+    }
+}
+export function AdminApp() {
+    const dispatch = useDispatch();
+    const router = useRouter();
+    const pathname = usePathname();
+    const token = useSelector((s) => s?.session?.token ?? null);
+    const [hydrated, setHydrated] = useState(false);
+    // Hydrate session exactly once
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const t = localStorage.getItem('nextmin.token');
+            const u = localStorage.getItem('nextmin.user');
+            if (t && u) {
+                if (isJwtValid(t)) {
+                    dispatch(setSession({ token: t, user: JSON.parse(u) }));
+                }
+                else {
+                    // clear expired
+                    localStorage.removeItem('nextmin.token');
+                    localStorage.removeItem('nextmin.user');
+                    dispatch(clearSession());
+                }
+            }
+        }
+        catch { }
+        setHydrated(true);
+    }, [dispatch]);
+    useEffect(() => {
+        if (!hydrated || !haveToken)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                dispatch(systemLoading());
+                // take first Settings row (singleton)
+                const res = await api.list('settings', 0, 1);
+                const first = res?.data?.[0] ?? null;
+                const normalized = first == null
+                    ? null
+                    : {
+                        apiKey: first.apiKey ?? undefined,
+                        siteName: first.siteName ?? undefined,
+                        googleMapsKey: first.googleMapsKey ?? undefined,
+                        siteLogo: Array.isArray(first.siteLogo)
+                            ? first.siteLogo
+                            : typeof first.siteLogo === 'string' && first.siteLogo
+                                ? [first.siteLogo]
+                                : undefined,
+                    };
+                if (!cancelled)
+                    dispatch(systemLoaded(normalized));
+            }
+            catch (e) {
+                if (!cancelled)
+                    dispatch(systemFailed(e?.message || 'Failed to load settings'));
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [hydrated, dispatch]);
+    const localToken = useMemo(() => {
+        if (typeof window === 'undefined')
+            return null;
+        const t = localStorage.getItem('nextmin.token');
+        return isJwtValid(t) ? t : null;
+    }, [hydrated]); // re-read after hydration
+    const haveToken = Boolean(token || localToken);
+    const onAuthRoute = pathname?.startsWith('/admin/auth') ?? false;
+    // Redirect logic AFTER hydration, without rendering dashboard first
+    useEffect(() => {
+        if (!hydrated)
+            return;
+        // unauth & not on auth -> go to sign-in
+        if (!haveToken && !onAuthRoute) {
+            router.replace('/admin/auth/sign-in');
+            return;
+        }
+        // authed & on auth -> go to dashboard
+        if (haveToken && onAuthRoute) {
+            router.replace('/admin/dashboard');
+        }
+    }, [hydrated, haveToken, onAuthRoute, router]);
+    // 1) While hydrating: full screen loader
+    if (!hydrated) {
+        return _jsx(SectionLoader, { label: "Please wait..." });
+    }
+    // 2) Unauthed:
+    //    - on auth routes: show auth UI
+    //    - elsewhere: show loader while redirecting to sign-in
+    if (!haveToken) {
+        if (onAuthRoute)
+            return _jsx(AuthPage, {});
+        return _jsx(SectionLoader, { label: "Redirecting to sign in\u2026" });
+    }
+    // 3) Authed:
+    //    - if user manually hits /admin/auth/*, the effect will redirect; show loader to avoid flash
+    if (onAuthRoute) {
+        return _jsx(SectionLoader, { label: "Loading dashboard\u2026" });
+    }
+    // 4) Authed → Admin chrome + pages
+    return (_jsxs(_Fragment, { children: [_jsx(AdminRouteNormalizer, {}), _jsxs("div", { className: "grid grid-cols-[240px_1fr] h-[100dvh]", children: [_jsx(Sidebar, {}), _jsx("div", { className: "p-4 overflow-auto relative", children: _jsx(NextMinRouter, {}) })] })] }));
+}

package/dist/components/ConfirmDialog.d.ts

@@ -0,0 +1,12 @@
+type ConfirmDialogProps = {
+    isOpen: boolean;
+    title: string;
+    description?: string;
+    confirmText?: string;
+    cancelText?: string;
+    isLoading?: boolean;
+    onConfirm: () => void | Promise<void>;
+    onClose: () => void;
+};
+export declare function ConfirmDialog({ isOpen, title, description, confirmText, cancelText, isLoading, onConfirm, onClose, }: ConfirmDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ConfirmDialog.js

@@ -0,0 +1,6 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, } from '@heroui/react';
+export function ConfirmDialog({ isOpen, title, description, confirmText = 'Delete', cancelText = 'Cancel', isLoading, onConfirm, onClose, }) {
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "md", placement: "center", children: _jsx(ModalContent, { children: _jsxs(_Fragment, { children: [_jsx(ModalHeader, { className: "flex flex-col gap-1", children: title }), description && (_jsx(ModalBody, { children: _jsx("p", { className: "text-foreground/80", children: description }) })), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, isDisabled: isLoading, children: cancelText }), _jsx(Button, { color: "danger", onPress: onConfirm, isLoading: isLoading, startContent: !isLoading ? (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6l-1 14H6L5 6" }), _jsx("path", { d: "M10 11v6" }), _jsx("path", { d: "M14 11v6" })] })) : null, children: confirmText })] })] }) }) }));
+}

package/dist/components/FileUploader.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+type UploadResponseItem = {
+    provider: string;
+    bucket?: string;
+    key: string;
+    url: string;
+    etag?: string;
+    contentType?: string;
+    size?: number;
+    metadata?: Record<string, string>;
+    originalName?: string;
+};
+export type UploaderValue = string | string[] | null;
+export type FileUploaderProps = {
+    name: string;
+    label?: string;
+    endpoint?: string;
+    getAuthHeaders?: () => Promise<Record<string, string>> | Record<string, string>;
+    accept?: string | string[];
+    multiple?: boolean;
+    maxFilesCount?: number;
+    maxSizeBytes?: number;
+    value?: UploaderValue;
+    onChange: (next: UploaderValue) => void;
+    mapResult?: (it: UploadResponseItem) => string;
+    description?: string;
+    disabled?: boolean;
+    required?: boolean;
+    className?: string;
+};
+export declare const FileUploader: React.FC<FileUploaderProps>;
+export {};

package/dist/components/FileUploader.js

@@ -0,0 +1,480 @@
+// packages/nextmin-react/src/components/FileUploader.tsx
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Progress, Tooltip, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button, } from '@heroui/react';
+const KB = 1024;
+const MB = 1024 * KB;
+const DEFAULT_MAX = 50 * MB;
+const DEFAULT_ENDPOINT = ((process.env.NEXT_PUBLIC_NEXTMIN_API_URL || '') + '/files').replace(/\/+$/, '') || '/files';
+const PlusTile = ({ text = 'Upload', invalid = false, }) => (_jsxs("div", { className: `flex flex-col items-center justify-center h-full${invalid ? ' text-danger' : ' text-default-700'}`, children: [_jsx("svg", { fill: "currentColor", width: "28", height: "28", viewBox: "0 0 24 24", "aria-hidden": true, className: "mb-1", children: _jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }), _jsx("div", { className: "text-sm", children: text })] }));
+const TrashIcon = (props) => (_jsx("svg", { fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "size-4", ...props, "aria-hidden": true, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" }) }));
+const uid = () => Math.random().toString(36).slice(2);
+const encodeKeyForPath = (key) => key.split('/').map(encodeURIComponent).join('/');
+const extractKeyFromUrl = (url) => {
+    try {
+        const u = new URL(url, typeof window !== 'undefined' ? window.location.origin : 'http://x');
+        const idx = u.pathname.toLowerCase().indexOf('/uploads/');
+        if (idx >= 0)
+            return decodeURIComponent(u.pathname.slice(idx + 1));
+        const m = u.pathname.match(/\/?(uploads\/.+)$/i);
+        return m ? decodeURIComponent(m[1]) : null;
+    }
+    catch {
+        const m = url.match(/\/?(uploads\/.+)$/i);
+        return m ? decodeURIComponent(m[1]) : null;
+    }
+};
+const defaultAuthHeaders = () => {
+    if (typeof window === 'undefined')
+        return {};
+    let token;
+    let apiKey;
+    try {
+        const raw = localStorage.getItem('nextmin.user');
+        if (raw) {
+            const u = JSON.parse(raw);
+            token = u?.token ?? u?.data?.token;
+        }
+    }
+    catch { }
+    token = token ?? localStorage.getItem('nextmin.token') ?? undefined;
+    apiKey =
+        localStorage.getItem('nextmin.apiKey') ??
+            process.env.NEXT_PUBLIC_NEXTMIN_API_KEY;
+    const h = {};
+    if (token)
+        h.Authorization = `Bearer ${token}`;
+    if (apiKey)
+        h['x-api-key'] = apiKey;
+    return h;
+};
+const normalizeAccept = (input) => {
+    if (!input)
+        return undefined;
+    const raw = Array.isArray(input)
+        ? input
+        : String(input)
+            .split(',')
+            .map((s) => s.trim())
+            .filter(Boolean);
+    return raw.map((t) => {
+        const x = t.toLowerCase();
+        if (x === 'images/*')
+            return 'image/*';
+        if (x === 'videos/*')
+            return 'video/*';
+        if (x === 'audios/*')
+            return 'audio/*';
+        return x;
+    });
+};
+const shallowEqArr = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+// Treat only valid URLs/data/blobs as safe preview refs
+function isSafeFileRef(s) {
+    const str = (s ?? '').trim();
+    if (!str)
+        return false;
+    if (/^(https?:\/\/|data:image\/|blob:)/i.test(str))
+        return true;
+    const noQuery = str.replace(/[?#].*$/, '');
+    return /\.(png|jpe?g|gif|webp|svg|bmp|ico|tiff?|avif)$/i.test(noQuery);
+}
+// Normalize incoming controlled value into an array of strings for comparison
+function normalizeToArray(v) {
+    if (Array.isArray(v))
+        return v.filter((s) => typeof s === 'string');
+    if (typeof v === 'string' && v)
+        return [v];
+    return [];
+}
+export const FileUploader = ({ name, label, endpoint = DEFAULT_ENDPOINT, getAuthHeaders = defaultAuthHeaders, accept, multiple = false, maxFilesCount, maxSizeBytes = DEFAULT_MAX, value, onChange, mapResult = (it) => it.url, description, disabled, required, className, }) => {
+    const containerRef = useRef(null);
+    const pickerRef = useRef(null);
+    // **NO readOnly/disabled** -> participates in native validation
+    const validatorRef = useRef(null); // represents required / max files
+    const pendingRef = useRef(null); // blocks while uploading
+    const [items, setItems] = useState([]);
+    const itemsRef = useRef([]);
+    useEffect(() => {
+        itemsRef.current = items;
+    }, [items]);
+    const [error, setError] = useState(null);
+    const [touched, setTouched] = useState(false);
+    const [confirmId, setConfirmId] = useState(null);
+    const [confirmBusy, setConfirmBusy] = useState(false);
+    // === Seed from controlled value BUT ONLY IF DIFFERENT ===
+    useEffect(() => {
+        const wanted = normalizeToArray(value ?? null).filter(isSafeFileRef);
+        // current 'done' urls
+        const currentDone = itemsRef.current
+            .filter((i) => i.status === 'done' && i.uploaded?.url)
+            .map((i) => i.uploaded.url);
+        // if equal (same order + urls), do nothing (avoid re-render loop)
+        if (shallowEqArr(wanted, currentDone))
+            return;
+        if (wanted.length === 0) {
+            // remove only seeded/done; keep uploading/canceled/error queue intact
+            setItems((prev) => prev.filter((i) => i.status !== 'done'));
+            return;
+        }
+        // Seed only when different
+        setItems((prev) => {
+            const uploading = prev.filter((p) => p.status !== 'done');
+            const seeded = wanted.map((v) => ({
+                id: `v-${v}`,
+                name: v.split('/').pop() || 'file',
+                size: 0,
+                type: undefined,
+                progress: 100,
+                status: 'done',
+                uploaded: { provider: '', key: extractKeyFromUrl(v) ?? '', url: v },
+                previewUrl: v,
+            }));
+            return [...seeded, ...uploading];
+        });
+    }, [value]);
+    // === Derived state ===
+    const doneItems = items.filter((i) => i.status === 'done' && i.uploaded);
+    const doneCount = doneItems.length;
+    const hasPending = items.some((i) => i.status === 'uploading' || i.status === 'idle');
+    // Capacity / accept / size
+    const limitCount = multiple
+        ? typeof maxFilesCount === 'number' && maxFilesCount >= 1
+            ? maxFilesCount
+            : Infinity
+        : 1;
+    const activeCount = items.filter((i) => i.status !== 'canceled').length;
+    const uploadingOrIdle = items.some((i) => i.status === 'uploading' || i.status === 'idle');
+    const remainingCapacity = Math.max(0, limitCount - activeCount);
+    const showPlusPlaceholder = !disabled && remainingCapacity > 0 && !uploadingOrIdle;
+    const acceptTokens = useMemo(() => normalizeAccept(accept), [accept]);
+    const acceptAttr = useMemo(() => acceptTokens?.join(',') || undefined, [acceptTokens]);
+    const oversize = (f) => f.size > (maxSizeBytes || DEFAULT_MAX);
+    const typeAllowed = (f) => {
+        if (!acceptTokens || !acceptTokens.length)
+            return true;
+        return acceptTokens.some((p) => {
+            if (p.endsWith('/*'))
+                return f.type.startsWith(p.slice(0, -1));
+            if (p.startsWith('.'))
+                return f.name.toLowerCase().endsWith(p.toLowerCase());
+            return f.type === p;
+        });
+    };
+    // === Validation ===
+    const computeError = () => {
+        if (hasPending)
+            return 'Please wait for uploads to finish.';
+        if (required && doneCount < 1)
+            return 'Please fill out this field.';
+        if (Number.isFinite(limitCount) && doneCount > limitCount) {
+            return `You can upload up to ${limitCount} file(s).`;
+        }
+        return null;
+    };
+    // Keep native validity in sync (CRITICAL: inputs are NOT readOnly)
+    useEffect(() => {
+        const err = computeError();
+        if (validatorRef.current) {
+            const valueStr = err == null
+                ? multiple
+                    ? doneItems
+                        .map((d) => d.uploaded?.url || '')
+                        .filter(Boolean)
+                        .join(',')
+                    : doneItems[0]?.uploaded?.url || 'ok'
+                : '';
+            validatorRef.current.value = valueStr;
+            validatorRef.current.setCustomValidity(err ?? '');
+        }
+        if (pendingRef.current) {
+            const pendMsg = hasPending ? 'Please wait for uploads to finish.' : '';
+            pendingRef.current.value = hasPending ? '' : 'ok';
+            pendingRef.current.setCustomValidity(pendMsg);
+        }
+        if (touched)
+            setError(err);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [doneCount, hasPending, required, limitCount, multiple, items, touched]);
+    // Show errors on submit (capture), like HeroUI Input
+    useEffect(() => {
+        const form = containerRef.current?.closest('form');
+        if (!form)
+            return;
+        const onSubmitCapture = () => {
+            const err = computeError();
+            setTouched(true);
+            setError(err);
+            validatorRef.current?.reportValidity();
+            pendingRef.current?.reportValidity();
+        };
+        form.addEventListener('submit', onSubmitCapture, true);
+        return () => form.removeEventListener('submit', onSubmitCapture, true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [required, limitCount, hasPending, doneCount]);
+    // Sequential upload worker
+    const workerBusy = useRef(false);
+    useEffect(() => {
+        if (workerBusy.current)
+            return;
+        if (itemsRef.current.some((i) => i.status === 'uploading'))
+            return;
+        const nextIdle = itemsRef.current.find((i) => i.status === 'idle');
+        if (!nextIdle)
+            return;
+        workerBusy.current = true;
+        uploadOne(nextIdle.id)
+            .catch(() => { })
+            .finally(() => {
+            workerBusy.current = false;
+            setTimeout(() => {
+                if (itemsRef.current.some((i) => i.status === 'idle')) {
+                    setItems((prev) => [...prev]);
+                }
+            }, 0);
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items]);
+    // Emit AFTER render with stable shape to avoid loop:
+    // - multiple === true  → always string[]
+    // - multiple === false → string | null
+    const lastEmittedRef = useRef(null);
+    useEffect(() => {
+        const doneVals = doneItems.map((i) => mapResult(i.uploaded));
+        if (multiple) {
+            const currArr = normalizeToArray(value ?? null);
+            if (shallowEqArr(doneVals, currArr))
+                return; // already in sync
+            if (lastEmittedRef.current && Array.isArray(lastEmittedRef.current)) {
+                if (shallowEqArr(doneVals, lastEmittedRef.current))
+                    return;
+            }
+            lastEmittedRef.current = doneVals;
+            onChange(doneVals);
+            return;
+        }
+        // single
+        const nextSingle = doneVals[0] ?? null;
+        const currSingle = typeof value === 'string' ? value : null;
+        if (nextSingle === currSingle)
+            return;
+        if (lastEmittedRef.current === nextSingle)
+            return;
+        lastEmittedRef.current = nextSingle;
+        onChange(nextSingle);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [items, multiple]);
+    // Stage file
+    const stageAndQueue = (files) => {
+        if (!files.length)
+            return;
+        const limitCount = multiple
+            ? typeof maxFilesCount === 'number' && maxFilesCount >= 1
+                ? maxFilesCount
+                : Infinity
+            : 1;
+        const activeCount = itemsRef.current.filter((i) => i.status !== 'canceled').length;
+        const remainingCapacity = Math.max(0, limitCount - activeCount);
+        if (remainingCapacity <= 0) {
+            setTouched(true);
+            setError(Number.isFinite(limitCount)
+                ? `You can upload up to ${limitCount} file(s).`
+                : 'Upload limit reached.');
+            return;
+        }
+        const f = files[0];
+        if (oversize(f)) {
+            setTouched(true);
+            setError(`File too large. Max ${((maxSizeBytes || DEFAULT_MAX) / MB).toFixed(1)} MB`);
+            return;
+        }
+        if (!typeAllowed(f)) {
+            setTouched(true);
+            setError(`File type not allowed${acceptAttr ? ` (${acceptAttr})` : ''}`);
+            return;
+        }
+        const staged = {
+            id: uid(),
+            file: f,
+            name: f.name,
+            size: f.size,
+            type: f.type,
+            progress: 0,
+            status: 'idle',
+            previewUrl: URL.createObjectURL(f),
+        };
+        setError(null);
+        if (!multiple) {
+            setItems((prev) => {
+                prev.forEach((p) => p.xhr?.abort());
+                prev.forEach((p) => {
+                    if (p.previewUrl?.startsWith('blob:'))
+                        URL.revokeObjectURL(p.previewUrl);
+                });
+                return [staged];
+            });
+        }
+        else {
+            setItems((prev) => [...prev, staged]);
+        }
+    };
+    // Upload one
+    const uploadOne = async (id) => {
+        const item = itemsRef.current.find((i) => i.id === id);
+        if (!item || !item.file)
+            return;
+        const headers = await Promise.resolve(getAuthHeaders());
+        await new Promise((resolve) => {
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', endpoint);
+            for (const [k, v] of Object.entries(headers))
+                xhr.setRequestHeader(k, v);
+            const form = new FormData();
+            // @ts-ignore backend expects 'file'
+            form.append('file', item.file);
+            xhr.upload.onprogress = (ev) => {
+                if (!ev.lengthComputable)
+                    return;
+                const pct = Math.round((ev.loaded / ev.total) * 100);
+                setItems((prev) => prev.map((x) => x.id === id ? { ...x, progress: pct, status: 'uploading', xhr } : x));
+            };
+            xhr.onerror = () => {
+                setItems((prev) => prev.map((x) => x.id === id
+                    ? {
+                        ...x,
+                        status: 'error',
+                        error: 'Network error',
+                        xhr: undefined,
+                    }
+                    : x));
+                resolve();
+            };
+            xhr.onabort = () => {
+                setItems((prev) => prev.map((x) => x.id === id ? { ...x, status: 'canceled', xhr: undefined } : x));
+                resolve();
+            };
+            xhr.onload = () => {
+                try {
+                    const json = JSON.parse(xhr.responseText);
+                    if (!json?.success ||
+                        !Array.isArray(json.data) ||
+                        json.data.length === 0) {
+                        throw new Error(json?.message || `Upload failed (${xhr.status})`);
+                    }
+                    const uploaded = json.data[0];
+                    setItems((prev) => prev.map((x) => x.id === id
+                        ? {
+                            ...x,
+                            status: 'done',
+                            progress: 100,
+                            uploaded,
+                            xhr: undefined,
+                            previewUrl: uploaded.url || x.previewUrl,
+                        }
+                        : x));
+                }
+                catch (e) {
+                    setItems((prev) => prev.map((x) => x.id === id
+                        ? {
+                            ...x,
+                            status: 'error',
+                            error: e?.message || 'Upload failed',
+                            xhr: undefined,
+                        }
+                        : x));
+                }
+                resolve();
+            };
+            setItems((prev) => prev.map((x) => x.id === id ? { ...x, status: 'uploading', progress: 0, xhr } : x));
+            xhr.send(form);
+        });
+    };
+    // Delete
+    const reallyRemove = async (id) => {
+        const it = itemsRef.current.find((x) => x.id === id);
+        if (!it)
+            return;
+        const key = it.uploaded?.key ||
+            (it.previewUrl ? extractKeyFromUrl(it.previewUrl) : null);
+        if (key) {
+            try {
+                setItems((prev) => prev.map((x) => (x.id === id ? { ...x, status: 'deleting' } : x)));
+                const headers = await Promise.resolve(getAuthHeaders());
+                const resp = await fetch(`${endpoint}/${encodeKeyForPath(key)}`, {
+                    method: 'DELETE',
+                    headers,
+                });
+                if (!resp.ok) {
+                    const t = await resp.text();
+                    throw new Error(t || `Delete failed (${resp.status})`);
+                }
+            }
+            catch (e) {
+                setItems((prev) => prev.map((x) => x.id === id
+                    ? { ...x, status: 'error', error: e?.message || 'Delete failed' }
+                    : x));
+                return;
+            }
+        }
+        else if (it.xhr) {
+            it.xhr.abort();
+        }
+        if (it.previewUrl?.startsWith('blob:'))
+            URL.revokeObjectURL(it.previewUrl);
+        setItems((prev) => prev.filter((x) => x.id !== id));
+        if (touched)
+            setError(computeError());
+    };
+    const requestDelete = (id) => setConfirmId(id);
+    // DOM events
+    const onInputChange = (e) => {
+        const files = Array.from(e.target.files ?? []);
+        e.currentTarget.value = '';
+        stageAndQueue(files);
+    };
+    const onDrop = (e) => {
+        e.preventDefault();
+        const files = Array.from(e.dataTransfer.files ?? []);
+        stageAndQueue(files);
+    };
+    const isInvalid = !!error;
+    return (_jsxs("div", { ref: containerRef, className: className, role: "group", "aria-labelledby": label ? `${name}-label` : undefined, "aria-invalid": isInvalid || undefined, "aria-describedby": isInvalid ? `${name}-error` : undefined, "data-invalid": isInvalid ? '' : undefined, children: [label ? (_jsxs("label", { id: `${name}-label`, className: `block text-sm mb-1 ${isInvalid ? 'text-danger' : 'text-small'}`, htmlFor: `uploader-${name}`, children: [label, " ", required ? _jsx("span", { className: "text-danger", children: "*" }) : null] })) : null, _jsx("input", { ref: validatorRef, type: "text", name: `${name}__value`, value: doneItems
+                    .map((d) => d.uploaded?.url || '')
+                    .filter(Boolean)
+                    .join(','), onChange: () => { }, required: !!required, className: "sr-only", "aria-hidden": true, onInvalid: (e) => {
+                    e.preventDefault(); // suppress browser tooltip
+                    setTouched(true);
+                    setError(computeError());
+                } }), _jsx("input", { ref: pendingRef, type: "text", name: `${name}__pending`, value: hasPending ? '' : 'ok', onChange: () => { }, className: "sr-only", "aria-hidden": true, onInvalid: (e) => {
+                    e.preventDefault();
+                    setTouched(true);
+                    setError('Please wait for uploads to finish.');
+                } }), _jsx("input", { ref: pickerRef, type: "file", accept: acceptTokens?.join(','), multiple: multiple, onChange: onInputChange, hidden: true, disabled: disabled, name: name, id: `uploader-${name}` }), _jsxs("div", { className: "grid gap-3 grid-cols-3", onDragOver: (e) => e.preventDefault(), onDrop: onDrop, children: [items.map((it) => (_jsxs("div", { className: 'relative aspect-square rounded-xl overflow-hidden border bg-default-50 ' +
+                            (isInvalid ? 'border-danger text-danger' : 'border-default-200'), children: [it.previewUrl ? (_jsx("img", { src: it.previewUrl, alt: it.name, className: "w-full h-full object-cover" })) : (_jsx("div", { className: "w-full h-full flex items-center justify-center text-xs text-default-600", children: it.name })), it.status === 'uploading' ? (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items=end p-2", children: _jsx(Progress, { "aria-label": "upload", size: "sm", value: it.progress, className: "w-full" }) })) : null, it.status === 'deleting' ? (_jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center text-white text-xs", children: "Deleting\u2026" })) : null, it.status === 'error' ? (_jsx("div", { className: "absolute bottom-0 left-0 right-0 bg-danger text-white text-xs px-2 py-1", children: it.error || 'Upload failed' })) : null, _jsx("div", { className: "absolute top-1 right-1 flex gap-1", children: it.status === 'uploading' ? (_jsx(Tooltip, { content: "Cancel", children: _jsx("button", { type: "button", onClick: () => itemsRef.current.find((x) => x.id === it.id)?.xhr?.abort(), className: "bg-white/80 hover:bg-white text-xs px-2 py-1 rounded", "aria-label": "Cancel upload", children: "\u2715" }) })) : it.status === 'error' ? (_jsx(Tooltip, { content: "Retry", children: _jsx("button", { type: "button", onClick: () => uploadOne(it.id), className: "bg-white/80 hover:bg-white text-xs px-2 py-1 rounded", "aria-label": "Retry upload", children: "Retry" }) })) : (_jsx(Tooltip, { content: "Delete", children: _jsx(Button, { variant: "ghost", color: "danger", isIconOnly: true, size: "sm", onPress: () => requestDelete(it.id), isDisabled: it.status === 'deleting', "aria-label": "Delete file", children: _jsx(TrashIcon, {}) }) })) })] }, it.id))), showPlusPlaceholder ? (_jsx("button", { type: "button", onClick: () => pickerRef.current?.click(), disabled: disabled, className: 'aspect-square rounded-xl border-2 border-dashed transition-colors flex items-center justify-center ' +
+                            (isInvalid
+                                ? 'border-danger hover:border-danger text-danger'
+                                : 'border-default-300 hover:border-primary hover:bg-primary-50'), "aria-label": "Upload file", children: _jsx(PlusTile, { invalid: isInvalid }) })) : null] }), _jsx("div", { className: "mt-2 text-xs", "aria-live": "polite", children: error ? (_jsx("span", { id: `${name}-error`, className: "text-danger", children: error })) : (_jsx("span", { className: "text-default-500", children: description ??
+                        `Max ${((maxSizeBytes || DEFAULT_MAX) / MB).toFixed(1)}MB` +
+                            (acceptAttr ? ` • ${acceptAttr}` : '') +
+                            (multiple && Number.isFinite(limitCount)
+                                ? ` • up to ${limitCount} file(s)`
+                                : '') })) }), _jsx(Modal, { isOpen: !!confirmId, onOpenChange: (open) => !open && !confirmBusy && setConfirmId(null), children: _jsx(ModalContent, { children: (onClose) => {
+                        const target = confirmId
+                            ? items.find((x) => x.id === confirmId)
+                            : undefined;
+                        const hasServerKey = !!target?.uploaded?.key ||
+                            !!(target?.previewUrl && extractKeyFromUrl(target.previewUrl));
+                        return (_jsxs(_Fragment, { children: [_jsx(ModalHeader, { className: "flex flex-col gap-1", children: "Delete file" }), _jsxs(ModalBody, { children: [_jsx("p", { className: "text-sm", children: hasServerKey
+                                                ? 'This will permanently delete the file from storage.'
+                                                : 'This will remove the file from the list.' }), _jsx("p", { className: "text-xs text-default-500", children: target?.name ?? '' })] }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "flat", onPress: onClose, isDisabled: confirmBusy, children: "Cancel" }), _jsx(Button, { color: "danger", onPress: async () => {
+                                                if (!confirmId)
+                                                    return;
+                                                setConfirmBusy(true);
+                                                await reallyRemove(confirmId);
+                                                setConfirmBusy(false);
+                                                setConfirmId(null);
+                                                onClose();
+                                            }, isLoading: confirmBusy, children: "Delete" })] })] }));
+                    } }) })] }));
+};