uplofile 0.1.0

package/dist/index.cjs

@@ -0,0 +1,423 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactSlot = require('@radix-ui/react-slot');
+var react = require('react');
+
+const uid = ()=>Math.random().toString(36).slice(2, 10) + Date.now().toString(36).slice(-4);
+
+const UploaderCtx = /*#__PURE__*/ react.createContext(null);
+const Root = ({ multiple = true, initial = [], onChange, upload, removeMode = 'optimistic', onRemove, accept = 'image/*', name = 'images', maxCount, disabled, children })=>{
+    const [items, setItems] = react.useState([]);
+    const controllers = react.useRef(new Map());
+    const removeControllers = react.useRef(new Map());
+    const inputRef = react.useRef(null);
+    // Hydrate initial items from the server and keep them marked as done
+    react.useEffect(()=>{
+        const arr = initial ?? [];
+        if (!Array.isArray(arr)) return;
+        const mapped = arr.map((it)=>{
+            return {
+                uid: it.uid || it.id,
+                id: it.id,
+                name: it.name,
+                url: it.url,
+                status: 'done'
+            };
+        });
+        // Only hydrate if the user hasn't already added/modified items locally
+        setItems((prev)=>prev.length === 0 ? mapped : prev);
+    }, [
+        initial
+    ]);
+    const hiddenInputValue = react.useMemo(()=>{
+        const done = items.filter((i)=>i.status === 'done' && i.url);
+        return JSON.stringify(done.map(({ uid: _u, previewUrl: _p, file: _f, status: _s, progress: _pr, error: _e, ...rest })=>rest));
+    }, [
+        items
+    ]);
+    const emitChange = react.useCallback((next)=>{
+        setItems((prev)=>{
+            const nextState = typeof next === 'function' ? next(prev) : next;
+            if (onChange) Promise.resolve(onChange(nextState)).catch(()=>{});
+            return nextState;
+        });
+    }, [
+        onChange
+    ]);
+    const startUpload = react.useCallback(async (item)=>{
+        if (!item.file) return;
+        const controller = new AbortController();
+        controllers.current.set(item.uid, controller);
+        const setProgress = (pct)=>{
+            emitChange((items)=>items.map((it)=>it.uid === item.uid ? {
+                        ...it,
+                        progress: Math.max(0, Math.min(100, pct))
+                    } : it));
+        };
+        emitChange((items)=>items.map((it)=>it.uid === item.uid ? {
+                    ...it,
+                    status: 'uploading',
+                    error: undefined
+                } : it));
+        try {
+            const result = await upload(item.file, controller.signal, setProgress);
+            emitChange((items)=>items.map((it)=>{
+                    if (it.uid !== item.uid) return it;
+                    // Revoke the local objectURL preview to avoid memory leaks
+                    if (it.previewUrl && it.previewUrl.startsWith('blob:')) {
+                        try {
+                            URL.revokeObjectURL(it.previewUrl);
+                        } catch  {
+                        /*fail silently*/ }
+                    }
+                    const serverPreview = result.preview || result.url;
+                    console.log({
+                        result
+                    });
+                    return {
+                        ...it,
+                        status: 'done',
+                        url: result.url,
+                        id: result.id,
+                        previewUrl: serverPreview,
+                        progress: 100
+                    };
+                }));
+        } catch (err) {
+            const wasAborted = controller.signal.aborted;
+            emitChange((items)=>items.map((it)=>it.uid === item.uid ? {
+                        ...it,
+                        status: wasAborted ? 'canceled' : 'error',
+                        error: wasAborted ? undefined : err?.message || 'Upload failed'
+                    } : it));
+        } finally{
+            controllers.current.delete(item.uid);
+        }
+    }, [
+        emitChange,
+        upload
+    ]);
+    const selectFiles = react.useCallback((files)=>{
+        if (!files || files.length === 0) return;
+        const selected = Array.from(files);
+        const remaining = maxCount ? Math.max(0, maxCount - items.filter((i)=>i.status !== 'canceled').length) : undefined;
+        const toUse = typeof remaining === 'number' ? selected.slice(0, remaining) : selected;
+        const newItems = toUse.map((file)=>({
+                uid: uid(),
+                name: file.name,
+                file,
+                previewUrl: URL.createObjectURL(file),
+                status: 'idle',
+                progress: 0
+            }));
+        emitChange([
+            ...items,
+            ...newItems
+        ]);
+        newItems.forEach((it)=>startUpload(it));
+    }, [
+        emitChange,
+        items,
+        maxCount,
+        startUpload
+    ]);
+    const onInputChange = react.useCallback((e)=>{
+        selectFiles(e.target.files);
+        e.currentTarget.value = '';
+    }, [
+        selectFiles
+    ]);
+    const onDrop = react.useCallback((e)=>{
+        e.preventDefault();
+        if (disabled) return;
+        selectFiles(e.dataTransfer.files);
+    }, [
+        disabled,
+        selectFiles
+    ]);
+    const onDragOver = react.useCallback((e)=>e.preventDefault(), []);
+    const actions = react.useMemo(()=>({
+            cancel: (uidStr)=>{
+                const ctrl = controllers.current.get(uidStr);
+                ctrl?.abort();
+            },
+            remove: async (uidStr)=>{
+                const item = items.find((i)=>i.uid === uidStr);
+                if (!item) return;
+                // abort any in-flight upload first
+                controllers.current.get(uidStr)?.abort();
+                // If no server-side removal needed or not uploaded yet, just remove
+                if (!onRemove || item.status !== 'done') {
+                    emitChange((list)=>list.filter((i)=>i.uid !== uidStr));
+                    return;
+                }
+                const ctrl = new AbortController();
+                removeControllers.current.set(uidStr, ctrl);
+                if (removeMode === 'optimistic') {
+                    const prev = items;
+                    // remove from UI immediately
+                    emitChange((list)=>list.filter((i)=>i.uid !== uidStr));
+                    try {
+                        await onRemove(item, ctrl.signal);
+                    } catch  {
+                        // rollback UI if server delete fails
+                        emitChange(prev);
+                    } finally{
+                        removeControllers.current.delete(uidStr);
+                    }
+                } else {
+                    // strict: mark as removing, wait for API, then remove
+                    emitChange((list)=>list.map((it)=>it.uid === uidStr ? {
+                                ...it,
+                                status: 'removing'
+                            } : it));
+                    try {
+                        await onRemove(item, ctrl.signal);
+                        emitChange((list)=>list.filter((i)=>i.uid !== uidStr));
+                    } catch  {
+                        // revert to done if delete fails
+                        emitChange((list)=>list.map((it)=>it.uid === uidStr ? {
+                                    ...it,
+                                    status: 'done'
+                                } : it));
+                    } finally{
+                        removeControllers.current.delete(uidStr);
+                    }
+                }
+            },
+            retry: (uidStr)=>{
+                const item = items.find((i)=>i.uid === uidStr);
+                if (!item) return;
+                if (item.file) {
+                    void startUpload({
+                        ...item,
+                        status: 'idle',
+                        error: undefined,
+                        progress: 0
+                    });
+                    emitChange((items)=>items.map((it)=>it.uid === uidStr ? {
+                                ...it,
+                                status: 'idle',
+                                error: undefined,
+                                progress: 0
+                            } : it));
+                }
+            }
+        }), [
+        emitChange,
+        items,
+        onRemove,
+        removeMode,
+        startUpload
+    ]);
+    react.useEffect(()=>()=>{
+            items.forEach((i)=>i.previewUrl && URL.revokeObjectURL(i.previewUrl));
+            controllers.current.forEach((c)=>c.abort());
+        }, []);
+    const ctx = {
+        items,
+        disabled,
+        multiple,
+        accept,
+        actions,
+        openFileDialog: ()=>inputRef.current?.click(),
+        fileInputProps: {
+            ref: inputRef,
+            onChange: onInputChange,
+            accept,
+            multiple,
+            disabled
+        },
+        getDropzoneProps: ()=>({
+                role: 'button',
+                tabIndex: 0,
+                onDrop,
+                onDragOver,
+                onKeyDown: (e)=>{
+                    if (disabled) return;
+                    if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click();
+                },
+                'data-disabled': disabled ? '' : undefined,
+                'data-multiple': multiple ? '' : undefined
+            }),
+        hiddenInputValue,
+        name
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(UploaderCtx.Provider, {
+        value: ctx,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            "data-part": "root",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("input", {
+                    type: "file",
+                    hidden: true,
+                    ...ctx.fileInputProps
+                }),
+                children
+            ]
+        })
+    });
+};
+
+const useImageUploader = ()=>{
+    const ctx = react.useContext(UploaderCtx);
+    if (!ctx) throw new Error("ImageUploader components must be used within <ImageUploader.Root>");
+    return ctx;
+};
+
+const Dropzone = ({ asChild, ...rest })=>{
+    const { getDropzoneProps } = useImageUploader();
+    const Comp = asChild ? reactSlot.Slot : "div";
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
+        "data-part": "dropzone",
+        ...getDropzoneProps(),
+        ...rest
+    });
+};
+
+const Preview = ({ render, className })=>{
+    const { items, actions } = useImageUploader();
+    if (render && typeof render === 'function') {
+        return render({
+            items,
+            actions
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "data-part": "preview",
+        className: className,
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4",
+            children: items.map((item)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    onClick: (e)=>e.stopPropagation(),
+                    className: "relative overflow-hidden rounded-xl border",
+                    "data-state": item.status,
+                    children: [
+                        item.url || item.previewUrl ? /*#__PURE__*/ jsxRuntime.jsx("img", {
+                            src: item.url || item.previewUrl,
+                            alt: item.name,
+                            className: "h-32 w-full object-cover"
+                        }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "flex h-32 w-full items-center justify-center text-xs text-gray-500",
+                            children: "No preview"
+                        }),
+                        item.status === 'uploading' && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "absolute bottom-0 left-0 right-0 h-1 bg-gray-200",
+                            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "h-full bg-black/80",
+                                style: {
+                                    width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%`
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-2",
+                            children: [
+                                item.status === 'uploading' && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    type: "button",
+                                    className: "rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
+                                    onClick: ()=>actions.cancel(item.uid),
+                                    children: "Cancel"
+                                }),
+                                (item.status === 'error' || item.status === 'canceled') && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    type: "button",
+                                    className: "rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
+                                    onClick: ()=>actions.retry(item.uid),
+                                    children: "Retry"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("button", {
+                                    type: "button",
+                                    className: "rounded-xl bg-black/50 px-2 py-1 text-xs text-white",
+                                    onClick: ()=>actions.remove(item.uid),
+                                    children: "Remove"
+                                })
+                            ]
+                        })
+                    ]
+                }, item.uid))
+        })
+    });
+};
+const HiddenInput = ({ name })=>{
+    const { hiddenInputValue, name: defaultName } = useImageUploader();
+    return /*#__PURE__*/ jsxRuntime.jsx("input", {
+        type: "hidden",
+        name: name ?? defaultName,
+        value: hiddenInputValue
+    });
+};
+const Cancel = ({ uid, asChild, ...rest })=>{
+    const { actions } = useImageUploader();
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
+        onClick: (e)=>{
+            e.stopPropagation();
+            actions.cancel(uid);
+        },
+        ...rest
+    });
+};
+const Retry = ({ uid, asChild, ...rest })=>{
+    const { actions } = useImageUploader();
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
+        onClick: (e)=>{
+            e.stopPropagation();
+            actions.retry(uid);
+        },
+        ...rest
+    });
+};
+const Remove = ({ uid, asChild, ...rest })=>{
+    const { actions } = useImageUploader();
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
+        onClick: (e)=>{
+            e.stopPropagation();
+            actions.remove(uid);
+        },
+        ...rest
+    });
+};
+
+const Trigger = ({ asChild, children, render, ...rest })=>{
+    const { openFileDialog, disabled, items } = useImageUploader();
+    const Comp = asChild ? reactSlot.Slot : 'button';
+    const uploading = items.filter((i)=>i.status === 'uploading');
+    const uploadingCount = uploading.length;
+    const doneCount = items.filter((i)=>i.status === 'done').length;
+    const errorCount = items.filter((i)=>i.status === 'error').length;
+    const totalProgress = uploadingCount ? Math.round(uploading.reduce((acc, it)=>acc + (typeof it.progress === 'number' ? it.progress : 0), 0) / uploadingCount) : undefined;
+    const api = {
+        items,
+        isUploading: uploadingCount > 0,
+        uploadingCount,
+        doneCount,
+        errorCount,
+        totalProgress,
+        open: openFileDialog
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(Comp, {
+        type: asChild ? undefined : 'button',
+        "aria-disabled": disabled,
+        "data-part": "trigger",
+        onClick: (e)=>{
+            if (disabled) return;
+            rest.onClick?.(e);
+            openFileDialog();
+        },
+        ...rest,
+        children: render ? render(api) : children
+    });
+};
+
+exports.Cancel = Cancel;
+exports.Dropzone = Dropzone;
+exports.HiddenInput = HiddenInput;
+exports.Preview = Preview;
+exports.Remove = Remove;
+exports.Retry = Retry;
+exports.Root = Root;
+exports.Trigger = Trigger;
+exports.useImageUploader = useImageUploader;

package/dist/index.d.mts

@@ -0,0 +1,114 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { HTMLAttributes, PropsWithChildren, RefObject, ChangeEvent, DragEvent, ButtonHTMLAttributes } from 'react';
+
+declare const Dropzone: ({ asChild, ...rest }: {
+    asChild?: boolean;
+} & HTMLAttributes<HTMLElement>) => react_jsx_runtime.JSX.Element;
+
+type UploadStatus = "idle" | "uploading" | "done" | "error" | "canceled" | "removing";
+type UploadFileItem = {
+    uid: string;
+    id?: string;
+    name: string;
+    url?: string;
+    previewUrl?: string;
+    file?: File;
+    status: UploadStatus;
+    progress?: number;
+    error?: string;
+    data?: any;
+};
+type UploadResult = {
+    url: string;
+    id?: string;
+};
+type RootProps = PropsWithChildren<{
+    multiple?: boolean;
+    initial?: Array<Pick<UploadFileItem, "uid" | "id" | "name" | "url">>;
+    /**
+     * optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.
+     * strict: call onRemove first; only remove from UI if it succeeds.
+     */
+    removeMode?: "optimistic" | "strict";
+    name?: string;
+    maxCount?: number;
+    disabled?: boolean;
+    accept?: string;
+    onChange?: (items: UploadFileItem[]) => Promise<void> | void;
+    upload: (file: File, signal: AbortSignal, setProgress?: (pct: number) => void) => Promise<UploadResult>;
+    onRemove?: (item: UploadFileItem, signal: AbortSignal) => Promise<void>;
+}>;
+type ItemActions = {
+    cancel: (uid: string) => void;
+    remove: (uid: string) => void;
+    retry: (uid: string) => void;
+};
+type ImageUploaderContextValue = {
+    items: UploadFileItem[];
+    disabled?: boolean;
+    multiple: boolean;
+    accept: string;
+    actions: ItemActions;
+    openFileDialog: () => void;
+    fileInputProps: {
+        ref: RefObject<HTMLInputElement>;
+        onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+        accept: string;
+        multiple: boolean;
+        disabled?: boolean;
+    };
+    getDropzoneProps: () => {
+        role: string;
+        tabIndex: number;
+        onDrop: (e: DragEvent) => void;
+        onDragOver: (e: DragEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        "data-disabled"?: string;
+        "data-multiple"?: string;
+    };
+    hiddenInputValue: string;
+    name: string;
+};
+type TriggerRenderProps = {
+    items: UploadFileItem[];
+    isUploading: boolean;
+    uploadingCount: number;
+    doneCount: number;
+    errorCount: number;
+    totalProgress?: number;
+    open: () => void;
+};
+type PreviewRenderProps = {
+    items: UploadFileItem[];
+    actions: ItemActions;
+};
+
+type Props = {
+    render?: (api: PreviewRenderProps) => React.ReactNode;
+    className?: string;
+};
+declare const Preview: ({ render, className }: Props) => string | number | boolean | react_jsx_runtime.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+declare const HiddenInput: ({ name }: {
+    name?: string;
+}) => react_jsx_runtime.JSX.Element;
+type ButtonProps = {
+    uid: string;
+    asChild?: boolean;
+} & ButtonHTMLAttributes<HTMLButtonElement>;
+declare const Cancel: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Retry: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Remove: ({ uid, asChild, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare const Trigger: ({ asChild, children, render, ...rest }: PropsWithChildren<{
+    asChild?: boolean;
+    render?: (api: TriggerRenderProps) => React.ReactNode;
+    children?: React.ReactNode | ((api: TriggerRenderProps) => React.ReactNode);
+} & React.HTMLAttributes<HTMLElement>>) => react_jsx_runtime.JSX.Element;
+
+declare const Root: ({ multiple, initial, onChange, upload, removeMode, onRemove, accept, name, maxCount, disabled, children, }: RootProps) => react_jsx_runtime.JSX.Element;
+
+declare const useImageUploader: () => ImageUploaderContextValue;
+
+export { Cancel, Dropzone, HiddenInput, Preview, Remove, Retry, Root, Trigger, useImageUploader };
+export type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem, UploadResult };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sources":["../src/components/dropzone.tsx","../src/types.ts","../src/components/preview.tsx","../src/components/trigger.tsx","../src/context.tsx","../src/hook.ts"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { HTMLAttributes } from \"react\";\n\nimport { useImageUploader } from \"../hook\";\n\nexport const Dropzone = ({\n  asChild,\n  ...rest\n}: { asChild?: boolean } & HTMLAttributes<HTMLElement>) => {\n  const { getDropzoneProps } = useImageUploader();\n  const Comp: any = asChild ? Slot : \"div\";\n  return <Comp data-part=\"dropzone\" {...getDropzoneProps()} {...rest} />;\n};\n","import type {\n  ChangeEvent,\n  DragEvent,\n  PropsWithChildren,\n  RefObject,\n} from \"react\";\n\nexport type UploadStatus =\n  | \"idle\"\n  | \"uploading\"\n  | \"done\"\n  | \"error\"\n  | \"canceled\"\n  | \"removing\";\n\nexport type UploadFileItem = {\n  uid: string;\n  id?: string;\n  name: string;\n  url?: string;\n  previewUrl?: string;\n  file?: File;\n  status: UploadStatus;\n  progress?: number;\n  error?: string;\n  data?: any;\n};\n\nexport type UploadResult = { url: string; id?: string };\n\nexport type RootProps = PropsWithChildren<{\n  multiple?: boolean;\n  initial?: Array<Pick<UploadFileItem, \"uid\" | \"id\" | \"name\" | \"url\">>;\n  /**\n   * optimistic (default): remove from UI immediately, call onRemove in the background; if it fails, restore the item and show error.\n   * strict: call onRemove first; only remove from UI if it succeeds.\n   */\n  removeMode?: \"optimistic\" | \"strict\";\n  name?: string;\n  maxCount?: number;\n  disabled?: boolean;\n  accept?: string;\n  onChange?: (items: UploadFileItem[]) => Promise<void> | void;\n  upload: (\n    file: File,\n    signal: AbortSignal,\n    setProgress?: (pct: number) => void,\n  ) => Promise<UploadResult>;\n  onRemove?: (item: UploadFileItem, signal: AbortSignal) => Promise<void>;\n}>;\n\nexport type ItemActions = {\n  cancel: (uid: string) => void;\n  remove: (uid: string) => void;\n  retry: (uid: string) => void;\n};\n\nexport type ImageUploaderContextValue = {\n  items: UploadFileItem[];\n  disabled?: boolean;\n  multiple: boolean;\n  accept: string;\n  actions: ItemActions;\n  openFileDialog: () => void;\n  fileInputProps: {\n    ref: RefObject<HTMLInputElement>;\n    onChange: (e: ChangeEvent<HTMLInputElement>) => void;\n    accept: string;\n    multiple: boolean;\n    disabled?: boolean;\n  };\n  getDropzoneProps: () => {\n    role: string;\n    tabIndex: number;\n    onDrop: (e: DragEvent) => void;\n    onDragOver: (e: DragEvent) => void;\n    onKeyDown: (e: KeyboardEvent) => void;\n    \"data-disabled\"?: string;\n    \"data-multiple\"?: string;\n  };\n  hiddenInputValue: string;\n  name: string;\n};\n\nexport type TriggerRenderProps = {\n  items: UploadFileItem[];\n  isUploading: boolean;\n  uploadingCount: number;\n  doneCount: number;\n  errorCount: number;\n  totalProgress?: number;\n  open: () => void;\n};\n\nexport type PreviewRenderProps = {\n  items: UploadFileItem[];\n  actions: ItemActions;\n};\n","import { Slot } from '@radix-ui/react-slot'\nimport React, { ButtonHTMLAttributes } from 'react'\n\nimport { useImageUploader } from '../hook'\n\nimport type { PreviewRenderProps } from '../types'\n\ntype Props = {\n  render?: (api: PreviewRenderProps) => React.ReactNode\n  className?: string\n}\n\nexport const Preview = ({ render, className }: Props) => {\n  const { items, actions } = useImageUploader()\n\n  if (render && typeof render === 'function') {\n    return render({ items, actions })\n  }\n\n  return (\n    <div data-part=\"preview\" className={className}>\n      <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4\">\n        {items.map((item) => (\n          <div\n            key={item.uid}\n            onClick={(e) => e.stopPropagation()}\n            className=\"relative overflow-hidden rounded-xl border\"\n            data-state={item.status}\n          >\n            {item.url || item.previewUrl ? (\n              <img\n                src={item.url || item.previewUrl}\n                alt={item.name}\n                className=\"h-32 w-full object-cover\"\n              />\n            ) : (\n              <div className=\"flex h-32 w-full items-center justify-center text-xs text-gray-500\">\n                No preview\n              </div>\n            )}\n            {item.status === 'uploading' && (\n              <div className=\"absolute bottom-0 left-0 right-0 h-1 bg-gray-200\">\n                <div\n                  className=\"h-full bg-black/80\"\n                  style={{ width: `${Math.max(0, Math.min(100, item.progress ?? 0))}%` }}\n                />\n              </div>\n            )}\n            <div className=\"absolute inset-x-0 bottom-0 flex justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-2\">\n              {item.status === 'uploading' && (\n                <button\n                  type=\"button\"\n                  className=\"rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n                  onClick={() => actions.cancel(item.uid)}\n                >\n                  Cancel\n                </button>\n              )}\n              {(item.status === 'error' || item.status === 'canceled') && (\n                <button\n                  type=\"button\"\n                  className=\"rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n                  onClick={() => actions.retry(item.uid)}\n                >\n                  Retry\n                </button>\n              )}\n              <button\n                type=\"button\"\n                className=\"rounded-xl bg-black/50 px-2 py-1 text-xs text-white\"\n                onClick={() => actions.remove(item.uid)}\n              >\n                Remove\n              </button>\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport const HiddenInput = ({ name }: { name?: string }) => {\n  const { hiddenInputValue, name: defaultName } = useImageUploader()\n  return <input type=\"hidden\" name={name ?? defaultName} value={hiddenInputValue} />\n}\n\ntype ButtonProps = {\n  uid: string\n  asChild?: boolean\n} & ButtonHTMLAttributes<HTMLButtonElement>\n\nexport const Cancel = ({ uid, asChild, ...rest }: ButtonProps) => {\n  const { actions } = useImageUploader()\n  const Comp: any = asChild ? Slot : 'button'\n  return (\n    <Comp\n      onClick={(e: { stopPropagation: () => void }) => {\n        e.stopPropagation()\n        actions.cancel(uid)\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport const Retry = ({ uid, asChild, ...rest }: ButtonProps) => {\n  const { actions } = useImageUploader()\n  const Comp: any = asChild ? Slot : 'button'\n  return (\n    <Comp\n      onClick={(e: { stopPropagation: () => void }) => {\n        e.stopPropagation()\n        actions.retry(uid)\n      }}\n      {...rest}\n    />\n  )\n}\n\nexport const Remove = ({ uid, asChild, ...rest }: ButtonProps) => {\n  const { actions } = useImageUploader()\n  const Comp: any = asChild ? Slot : 'button'\n  return (\n    <Comp\n      onClick={(e: { stopPropagation: () => void }) => {\n        e.stopPropagation()\n        actions.remove(uid)\n      }}\n      {...rest}\n    />\n  )\n}\n","import { Slot } from '@radix-ui/react-slot'\nimport React, { PropsWithChildren } from 'react'\n\nimport { useImageUploader } from '../hook'\nimport type { TriggerRenderProps } from '../types'\n\nexport const Trigger = ({\n  asChild,\n  children,\n  render,\n  ...rest\n}: PropsWithChildren<\n  {\n    asChild?: boolean\n    render?: (api: TriggerRenderProps) => React.ReactNode\n    children?: React.ReactNode | ((api: TriggerRenderProps) => React.ReactNode)\n  } & React.HTMLAttributes<HTMLElement>\n>) => {\n  const { openFileDialog, disabled, items } = useImageUploader()\n  const Comp: any = asChild ? Slot : 'button'\n\n  const uploading = items.filter((i) => i.status === 'uploading')\n  const uploadingCount = uploading.length\n  const doneCount = items.filter((i) => i.status === 'done').length\n  const errorCount = items.filter((i) => i.status === 'error').length\n  const totalProgress = uploadingCount\n    ? Math.round(\n        uploading.reduce(\n          (acc, it) => acc + (typeof it.progress === 'number' ? it.progress : 0),\n          0\n        ) / uploadingCount\n      )\n    : undefined\n\n  const api: TriggerRenderProps = {\n    items,\n    isUploading: uploadingCount > 0,\n    uploadingCount,\n    doneCount,\n    errorCount,\n    totalProgress,\n    open: openFileDialog,\n  }\n\n  return (\n    <Comp\n      type={asChild ? undefined : 'button'}\n      aria-disabled={disabled}\n      data-part=\"trigger\"\n      onClick={(e: any) => {\n        if (disabled) return\n        ;(rest as any).onClick?.(e)\n        openFileDialog()\n      }}\n      {...rest}\n    >\n      {render ? render(api) : children}\n    </Comp>\n  )\n}\n","import type { DragEvent, RefObject } from 'react'\nimport React, { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { ImageUploaderContextValue, ItemActions, RootProps, UploadFileItem } from './types'\nimport { uid } from './utils'\n\nexport const UploaderCtx = createContext<ImageUploaderContextValue | null>(null)\n\nexport const Root = ({\n  multiple = true,\n  initial = [],\n  onChange,\n  upload,\n  removeMode = 'optimistic',\n  onRemove,\n  accept = 'image/*',\n  name = 'images',\n  maxCount,\n  disabled,\n  children,\n}: RootProps) => {\n  const [items, setItems] = useState<UploadFileItem[]>([])\n  const controllers = useRef(new Map<string, AbortController>())\n  const removeControllers = useRef(new Map<string, AbortController>())\n  const inputRef = useRef<HTMLInputElement | null>(null)\n\n  // Hydrate initial items from the server and keep them marked as done\n  useEffect(() => {\n    const arr = initial ?? []\n    if (!Array.isArray(arr)) return\n\n    const mapped: UploadFileItem[] = arr.map((it) => {\n      return {\n        uid: it.uid || it.id,\n        id: it.id,\n        name: it.name,\n        url: it.url,\n        status: 'done',\n      } as UploadFileItem\n    })\n\n    // Only hydrate if the user hasn't already added/modified items locally\n    setItems((prev) => (prev.length === 0 ? mapped : prev))\n  }, [initial])\n\n  const hiddenInputValue = useMemo(() => {\n    const done = items.filter((i) => i.status === 'done' && i.url)\n    return JSON.stringify(\n      done.map(\n        ({ uid: _u, previewUrl: _p, file: _f, status: _s, progress: _pr, error: _e, ...rest }) =>\n          rest\n      )\n    )\n  }, [items])\n\n  const emitChange = useCallback(\n    (next: UploadFileItem[] | ((prev: UploadFileItem[]) => UploadFileItem[])) => {\n      setItems((prev) => {\n        const nextState = typeof next === 'function' ? (next as any)(prev) : next\n        if (onChange) Promise.resolve(onChange(nextState)).catch(() => {})\n        return nextState\n      })\n    },\n    [onChange]\n  )\n\n  const startUpload = useCallback(\n    async (item: UploadFileItem) => {\n      if (!item.file) return\n      const controller = new AbortController()\n      controllers.current.set(item.uid, controller)\n\n      const setProgress = (pct: number) => {\n        emitChange((items) =>\n          items.map((it) =>\n            it.uid === item.uid ? { ...it, progress: Math.max(0, Math.min(100, pct)) } : it\n          )\n        )\n      }\n\n      emitChange((items) =>\n        items.map((it) =>\n          it.uid === item.uid ? { ...it, status: 'uploading', error: undefined } : it\n        )\n      )\n\n      try {\n        const result = await upload(item.file, controller.signal, setProgress)\n        emitChange((items) =>\n          items.map((it) => {\n            if (it.uid !== item.uid) return it\n            // Revoke the local objectURL preview to avoid memory leaks\n            if (it.previewUrl && it.previewUrl.startsWith('blob:')) {\n              try {\n                URL.revokeObjectURL(it.previewUrl)\n              } catch {\n                /*fail silently*/\n              }\n            }\n            const serverPreview = (result as any).preview || result.url\n            console.log({ result })\n            return {\n              ...it,\n              status: 'done',\n              url: result.url,\n              id: result.id,\n              previewUrl: serverPreview,\n              progress: 100,\n            }\n          })\n        )\n      } catch (err: any) {\n        const wasAborted = controller.signal.aborted\n        emitChange((items) =>\n          items.map((it) =>\n            it.uid === item.uid\n              ? {\n                  ...it,\n                  status: wasAborted ? 'canceled' : 'error',\n                  error: wasAborted ? undefined : err?.message || 'Upload failed',\n                }\n              : it\n          )\n        )\n      } finally {\n        controllers.current.delete(item.uid)\n      }\n    },\n    [emitChange, upload]\n  )\n\n  const selectFiles = useCallback(\n    (files: FileList | null) => {\n      if (!files || files.length === 0) return\n      const selected = Array.from(files)\n      const remaining = maxCount\n        ? Math.max(0, maxCount - items.filter((i) => i.status !== 'canceled').length)\n        : undefined\n      const toUse = typeof remaining === 'number' ? selected.slice(0, remaining) : selected\n\n      const newItems: UploadFileItem[] = toUse.map((file) => ({\n        uid: uid(),\n        name: file.name,\n        file,\n        previewUrl: URL.createObjectURL(file),\n        status: 'idle',\n        progress: 0,\n      }))\n\n      emitChange([...items, ...newItems])\n      newItems.forEach((it) => startUpload(it))\n    },\n    [emitChange, items, maxCount, startUpload]\n  )\n\n  const onInputChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      selectFiles(e.target.files)\n      e.currentTarget.value = ''\n    },\n    [selectFiles]\n  )\n\n  const onDrop = useCallback(\n    (e: DragEvent) => {\n      e.preventDefault()\n      if (disabled) return\n      selectFiles(e.dataTransfer.files)\n    },\n    [disabled, selectFiles]\n  )\n\n  const onDragOver = useCallback((e: DragEvent) => e.preventDefault(), [])\n\n  const actions: ItemActions = useMemo(\n    () => ({\n      cancel: (uidStr: string) => {\n        const ctrl = controllers.current.get(uidStr)\n        ctrl?.abort()\n      },\n      remove: async (uidStr: string) => {\n        const item = items.find((i) => i.uid === uidStr)\n        if (!item) return\n\n        // abort any in-flight upload first\n        controllers.current.get(uidStr)?.abort()\n\n        // If no server-side removal needed or not uploaded yet, just remove\n        if (!onRemove || item.status !== 'done') {\n          emitChange((list) => list.filter((i) => i.uid !== uidStr))\n          return\n        }\n\n        const ctrl = new AbortController()\n        removeControllers.current.set(uidStr, ctrl)\n\n        if (removeMode === 'optimistic') {\n          const prev = items\n          // remove from UI immediately\n          emitChange((list) => list.filter((i) => i.uid !== uidStr))\n          try {\n            await onRemove(item, ctrl.signal)\n          } catch {\n            // rollback UI if server delete fails\n            emitChange(prev)\n          } finally {\n            removeControllers.current.delete(uidStr)\n          }\n        } else {\n          // strict: mark as removing, wait for API, then remove\n          emitChange((list) =>\n            list.map((it) => (it.uid === uidStr ? { ...it, status: 'removing' as const } : it))\n          )\n          try {\n            await onRemove(item, ctrl.signal)\n            emitChange((list) => list.filter((i) => i.uid !== uidStr))\n          } catch {\n            // revert to done if delete fails\n            emitChange((list) =>\n              list.map((it) => (it.uid === uidStr ? { ...it, status: 'done' as const } : it))\n            )\n          } finally {\n            removeControllers.current.delete(uidStr)\n          }\n        }\n      },\n      retry: (uidStr: string) => {\n        const item = items.find((i) => i.uid === uidStr)\n        if (!item) return\n        if (item.file) {\n          void startUpload({ ...item, status: 'idle', error: undefined, progress: 0 })\n          emitChange((items) =>\n            items.map((it) =>\n              it.uid === uidStr ? { ...it, status: 'idle', error: undefined, progress: 0 } : it\n            )\n          )\n        }\n      },\n    }),\n    [emitChange, items, onRemove, removeMode, startUpload]\n  )\n\n  useEffect(\n    () => () => {\n      items.forEach((i) => i.previewUrl && URL.revokeObjectURL(i.previewUrl))\n      controllers.current.forEach((c) => c.abort())\n    },\n    []\n  )\n\n  const ctx: ImageUploaderContextValue = {\n    items,\n    disabled,\n    multiple,\n    accept,\n    actions,\n    openFileDialog: () => inputRef.current?.click(),\n    fileInputProps: {\n      ref: inputRef as RefObject<HTMLInputElement>,\n      onChange: onInputChange,\n      accept,\n      multiple,\n      disabled,\n    },\n    getDropzoneProps: () => ({\n      role: 'button',\n      tabIndex: 0,\n      onDrop,\n      onDragOver,\n      onKeyDown: (e) => {\n        if (disabled) return\n        if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click()\n      },\n      'data-disabled': disabled ? '' : undefined,\n      'data-multiple': multiple ? '' : undefined,\n    }),\n    hiddenInputValue,\n    name,\n  }\n\n  return (\n    <UploaderCtx.Provider value={ctx}>\n      <div data-part=\"root\">\n        <input type=\"file\" hidden {...ctx.fileInputProps} />\n        {children}\n      </div>\n    </UploaderCtx.Provider>\n  )\n}\n","import { useContext } from 'react'\n\nimport { UploaderCtx } from './context'\n\nexport const useImageUploader = () => {\n  const ctx = useContext(UploaderCtx);\n  if (!ctx) throw new Error(\"ImageUploader components must be used within <ImageUploader.Root>\");\n  return ctx;\n};"],"names":[],"mappings":";;;AACO;AACP;AACA;;ACFO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO;AACP;AACA;AACA;;AC3EA;AACA;AACA;AACA;AACO;AACA;AACP;AACA;AACA;AACA;AACA;AACA;AACO;AACA;AACA;;ACdA;AACP;AACA;AACA;AACA;;ACHO;;ACHA;;;"}