@plumix/plugin-media 0.1.0

package/dist/admin/MediaLibrary.js

@@ -0,0 +1,698 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useInfiniteQuery, useMutation, useQueryClient, } from "@tanstack/react-query";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, Input, Skeleton, } from "plumix/admin/ui";
+import { Trans, useLingui } from "plumix/i18n";
+// Descriptors that need runtime indirection — used outside JSX (aria
+// strings, native attribute values). JSX-text strings stay inline at
+// their `<Trans>` callsite for extraction discoverability.
+const M = {
+    titleLibrary: {
+        id: "plugin.media.library.title.library",
+        message: "Media Library",
+    },
+    titlePicker: {
+        id: "plugin.media.library.title.picker",
+        message: "Select media",
+    },
+    pickItemAria: {
+        id: "plugin.media.library.pickItemAria",
+        message: "Pick {title}",
+        comment: "title: the media item's display title",
+    },
+    openDetailsAria: {
+        id: "plugin.media.library.openDetailsAria",
+        message: "Open details for {title}",
+        comment: "title: the media item's display title",
+    },
+    closeDetailsAria: {
+        id: "plugin.media.detail.closeAria",
+        message: "Close details",
+    },
+    describeImage: {
+        id: "plugin.media.detail.altPlaceholderImage",
+        message: "Describe this image…",
+    },
+    describeAsset: {
+        id: "plugin.media.detail.altPlaceholderOther",
+        message: "Add a description…",
+    },
+    confirmDeleteDescription: {
+        id: "plugin.media.detail.deleteDescription",
+        message: '"{title}" will be removed permanently. Pages or posts that embed it will show a broken link.',
+        comment: "title: the media item being deleted",
+    },
+    uploadingFiles: {
+        id: "plugin.media.upload.progress",
+        message: "Uploading {count, plural, one {# file} other {# files}}…",
+        comment: "count: number of files currently uploading",
+    },
+    searchPlaceholder: {
+        id: "plugin.media.library.searchPlaceholder",
+        message: "Search by filename…",
+    },
+};
+const PAGE_SIZE = 24;
+const UPLOAD_CONCURRENCY = 4;
+// `MEDIA_LIST_KEY` is parametric over `accept` so the picker grid
+// stays in its own cache slot — the page-mode library and a picker
+// scoped to `accept: "image/"` never poison each other's data.
+function mediaListKey(accept, search) {
+    return ["media", "list", accept ?? null, search];
+}
+// Matches the admin's DebouncedSearchInput interval for list-screen parity.
+const SEARCH_DEBOUNCE_MS = 250;
+// Local debounce — the admin shell's DebouncedSearchInput lives behind
+// the `@/` alias and isn't part of the plugin-facing surface.
+function useDebouncedValue(value, delayMs) {
+    const [debounced, setDebounced] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setDebounced(value);
+        }, delayMs);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delayMs]);
+    return debounced;
+}
+// Resolve a media URL to absolute form for copy/display. The plugin
+// emits relative `/_plumix/media/serve/<id>` URLs in binding-only
+// mode (no `publicUrlBase`); they work for `<img src=...>` on the
+// admin page itself but break the moment a user copies the URL into
+// an email, an external editor, or a different origin's post body.
+// `Copy URL` MUST hand back something pasteable.
+function toAbsoluteUrl(url) {
+    if (url.startsWith("http://") || url.startsWith("https://"))
+        return url;
+    if (typeof window === "undefined")
+        return url;
+    try {
+        return new URL(url, window.location.origin).toString();
+    }
+    catch {
+        return url;
+    }
+}
+async function runWithConcurrency(items, limit, worker) {
+    let cursor = 0;
+    const next = async () => {
+        const i = cursor++;
+        if (i >= items.length)
+            return;
+        const item = items[i];
+        if (item !== undefined)
+            await worker(item);
+        return next();
+    };
+    await Promise.all(Array.from({ length: Math.min(limit, items.length) }, () => next()));
+}
+function toSelection(item) {
+    return {
+        id: String(item.id),
+        url: item.url,
+        alt: item.alt,
+        mime: item.mime,
+        filename: item.title,
+        width: item.width,
+        height: item.height,
+    };
+}
+// Hand-rolled oRPC POST. Plugin `media/*` procedures don't surface in the
+// admin's typed client (`AppRouterClient` covers core only), so we speak
+// the StandardRPC envelope `{ json, meta: [] }` directly.
+// The subdirectory mount the host exposes (see plumix-globals), used to prefix
+// the worker-routed `/_plumix/...` URLs this file builds in two scopes.
+function pluginBasePath() {
+    return (globalThis.plumix?.basePath ?? "");
+}
+async function rpcCall(procedure, input) {
+    const res = await fetch(`${pluginBasePath()}/_plumix/rpc/${procedure}`, {
+        method: "POST",
+        headers: {
+            "content-type": "application/json",
+            "x-plumix-request": "1",
+        },
+        body: JSON.stringify({ json: input, meta: [] }),
+    });
+    const envelope = (await res.json().catch(() => null));
+    if (!res.ok) {
+        const error = envelope?.json;
+        const reason = error?.data?.reason ?? error?.message ?? `rpc_${String(res.status)}`;
+        // eslint-disable-next-line no-restricted-syntax -- admin-side rpc envelope rethrow; server-derived message is the discriminator
+        throw new Error(reason);
+    }
+    return envelope?.json;
+}
+// Browser PUT with progress reporting. `fetch()` in 2026 still doesn't
+// expose request-body progress; XMLHttpRequest's `upload.onprogress` is
+// the only portable signal. The signed headers must be echoed verbatim.
+function putWithProgress(url, method, headers, body, onProgress) {
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open(method, url);
+        for (const [name, value] of Object.entries(headers)) {
+            xhr.setRequestHeader(name, value);
+        }
+        xhr.upload.onprogress = (event) => {
+            if (event.lengthComputable)
+                onProgress(event.loaded, event.total);
+        };
+        xhr.onload = () => {
+            if (xhr.status >= 200 && xhr.status < 300)
+                resolve();
+            else
+                reject(new Error(`upload_failed_${String(xhr.status)}`));
+        };
+        xhr.onerror = () => reject(new Error("upload_network_error"));
+        xhr.send(body);
+    });
+}
+function useMediaUpload(invalidateList) {
+    const [pending, setPending] = useState([]);
+    const [errorMsg, setErrorMsg] = useState(null);
+    const uploadOne = useCallback(async (file) => {
+        const slot = {
+            id: crypto.randomUUID(),
+            name: file.name,
+            progress: 0,
+        };
+        setPending((prev) => [...prev, slot]);
+        try {
+            const init = await rpcCall("media/createUploadUrl", {
+                filename: file.name,
+                contentType: file.type,
+                size: file.size,
+            });
+            try {
+                // Same-origin worker route needs the CSRF header that the
+                // dispatcher enforces on `/_plumix/*`. R2 (cross-origin) must
+                // NOT receive it — extra headers would break SigV4.
+                const headers = init.uploadUrl.startsWith("/")
+                    ? { ...init.headers, "x-plumix-request": "1" }
+                    : init.headers;
+                await putWithProgress(init.uploadUrl, init.method, headers, file, (loaded, total) => {
+                    setPending((prev) => prev.map((p) => p.id === slot.id ? { ...p, progress: loaded / total } : p));
+                });
+                await rpcCall("media/confirm", { id: init.mediaId });
+            }
+            catch (error) {
+                await tryCleanupDraft(init.mediaId);
+                throw error;
+            }
+        }
+        catch (error) {
+            setErrorMsg(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setPending((prev) => prev.filter((p) => p.id !== slot.id));
+        }
+    }, []);
+    const startUpload = useCallback(async (files) => {
+        if (files.length === 0)
+            return;
+        // Cap parallelism so a 50-file drop doesn't fire 50 simultaneous
+        // RPCs / XHRs. Browsers throttle to ~6 connections per origin
+        // anyway; pulling work off a small pool gives proper backpressure.
+        await runWithConcurrency(files, UPLOAD_CONCURRENCY, uploadOne);
+        invalidateList();
+    }, [uploadOne, invalidateList]);
+    return { pending, errorMsg, setErrorMsg, startUpload };
+}
+// Generic intersection-observer-on-sentinel hook. Re-binds when the
+// data length changes so we don't miss the next intersection after a
+// page lands.
+function useInfiniteScrollSentinel(sentinelRef, hasNextPage, isFetchingNextPage, fetchNextPage, dataLength) {
+    useEffect(() => {
+        const node = sentinelRef.current;
+        if (!node)
+            return;
+        if (!hasNextPage)
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0]?.isIntersecting && !isFetchingNextPage) {
+                // The callback may be async (e.g. React Query's fetchNextPage)
+                // — discard the promise so eslint's no-misused-promises stays
+                // happy and we don't accidentally await inside the observer.
+                void fetchNextPage();
+            }
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [sentinelRef, hasNextPage, isFetchingNextPage, fetchNextPage, dataLength]);
+}
+export function MediaLibrary({ mode = "page", accept, onSelect, onCancel, } = {}) {
+    const queryClient = useQueryClient();
+    const { i18n } = useLingui();
+    const [dragging, setDragging] = useState(false);
+    const sentinelRef = useRef(null);
+    const isPicker = mode === "picker";
+    const [search, setSearch] = useState("");
+    const debouncedSearch = useDebouncedValue(search.trim(), SEARCH_DEBOUNCE_MS);
+    const queryKey = mediaListKey(accept, debouncedSearch);
+    const list = useInfiniteQuery({
+        queryKey,
+        initialPageParam: 0,
+        queryFn: ({ pageParam }) => rpcCall("media/list", {
+            limit: PAGE_SIZE,
+            offset: pageParam,
+            // `accept` only flows through in picker mode. Page mode shows
+            // the full library regardless.
+            ...(isPicker && accept !== undefined ? { accept } : {}),
+            ...(debouncedSearch ? { search: debouncedSearch } : {}),
+        }),
+        getNextPageParam: (last, allPages) => last.hasMore ? allPages.length * PAGE_SIZE : undefined,
+    });
+    const items = useMemo(() => list.data?.pages.flatMap((p) => p.items) ?? [], [list.data?.pages]);
+    const invalidateList = useCallback(() => {
+        void queryClient.invalidateQueries({ queryKey });
+    }, [queryClient, queryKey]);
+    // `list.fetchNextPage` is a stable React Query callback. Passing it
+    // directly (rather than wrapping it in a fresh arrow each render)
+    // keeps the IntersectionObserver from being torn down + rebuilt on
+    // every parent re-render.
+    useInfiniteScrollSentinel(sentinelRef, list.hasNextPage, list.isFetchingNextPage, list.fetchNextPage, list.data?.pages.length);
+    const { pending, errorMsg, setErrorMsg, startUpload } = useMediaUpload(invalidateList);
+    const remove = useMutation({
+        mutationFn: (id) => rpcCall("media/delete", { id }),
+        onSuccess: invalidateList,
+        onError: (error) => setErrorMsg(error instanceof Error ? error.message : String(error)),
+    });
+    const update = useMutation({
+        mutationFn: (input) => rpcCall("media/update", input),
+        onSuccess: invalidateList,
+        onError: (error) => setErrorMsg(error instanceof Error ? error.message : String(error)),
+    });
+    // Drop anywhere on the page — including the empty state, the loading
+    // state, and the gaps between cards. The grid div used to own these
+    // handlers, but it only renders when items exist; on a fresh install
+    // the user lands on the empty state and dropping a file did nothing.
+    const dropProps = {
+        onDragOver: (e) => {
+            if (!hasFiles(e))
+                return;
+            e.preventDefault();
+            setDragging(true);
+        },
+        onDragLeave: (e) => {
+            // `dragleave` fires on every child boundary cross — ignore unless
+            // the cursor actually left the root container.
+            if (e.currentTarget.contains(e.relatedTarget))
+                return;
+            setDragging(false);
+        },
+        onDrop: (e) => {
+            e.preventDefault();
+            setDragging(false);
+            const files = Array.from(e.dataTransfer.files);
+            void startUpload(files);
+        },
+    };
+    // Keep `selectedItem` in state, not derived from `items`. The list
+    // refetches on every mutation; deriving would make the drawer
+    // disappear silently when the row briefly drops out of the page
+    // window or while a refetch is in flight. We refresh from the list
+    // by id when a fresh copy is available, never null it from absence.
+    //
+    // setState-in-effect is the intentional pattern here: we DO want the
+    // mirrored copy so the drawer survives a refetch window. The settled-
+    // and-gone branch is the only path that nulls.
+    const [selectedItem, setSelectedItem] = useState(null);
+    useEffect(() => {
+        if (selectedItem === null)
+            return;
+        const fresh = items.find((it) => it.id === selectedItem.id);
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- mirroring is intentional; see block comment above.
+        if (fresh && fresh !== selectedItem)
+            setSelectedItem(fresh);
+        // If the row was deleted (not in items AND list is settled), close.
+        if (!fresh && list.status === "success" && !list.isFetching) {
+            setSelectedItem(null);
+        }
+    }, [items, list.status, list.isFetching, selectedItem]);
+    // Picker-mode selection (single-pick). Hybrid click model:
+    //   - single click → set this id as the picked one (footer enables)
+    //   - double click → confirm + close (auto-close)
+    // Footer "Use selection" is the keyboard-friendly confirmation.
+    // Hold the whole item, not just its id: the footer confirm must resolve a
+    // full selection even after a search/scroll evicts it from the loaded page.
+    const [pickerSelected, setPickerSelected] = useState(null);
+    const handleCardActivate = useCallback((item) => {
+        if (isPicker) {
+            setPickerSelected(item);
+            return;
+        }
+        setSelectedItem(item);
+    }, [isPicker]);
+    const handleCardConfirm = useCallback((item) => {
+        if (!isPicker)
+            return;
+        onSelect?.(toSelection(item));
+    }, [isPicker, onSelect]);
+    // ESC closes the detail drawer. Depend on the boolean `open` flag
+    // (primitive) so the listener doesn't tear down/rebind on every
+    // refresh of `selectedItem`.
+    const drawerOpen = selectedItem !== null;
+    useEffect(() => {
+        if (!drawerOpen)
+            return;
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                setSelectedItem(null);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [drawerOpen]);
+    return (_jsxs("div", { "data-testid": "media-library", "data-mode": mode, className: "relative flex min-h-full gap-6", ...dropProps, children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-6", children: [_jsxs("header", { className: "flex items-center justify-between", children: [_jsx("h1", { "data-testid": "media-library-title", className: `${isPicker ? "text-xl" : "text-2xl"} font-semibold`, children: isPicker ? i18n._(M.titlePicker) : i18n._(M.titleLibrary) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "search", role: "searchbox", value: search, onChange: (e) => {
+                                            setSearch(e.target.value);
+                                        }, placeholder: i18n._(M.searchPlaceholder), "aria-label": i18n._(M.searchPlaceholder), maxLength: 200, "data-testid": "media-library-search", className: "w-56" }), _jsx(UploadButton, { onSelect: (files) => void startUpload(files) })] })] }), pending.length > 0 && _jsx(UploadProgressBar, { pending: pending }), list.status === "pending" && _jsx(MediaSkeletonGrid, {}), list.status === "error" && (_jsx("div", { role: "alert", "data-testid": "media-library-error", className: "text-destructive text-sm", children: _jsx(Trans, { id: "plugin.media.library.failedToLoad", message: "Failed to load media." }) })), list.status === "success" &&
+                        items.length === 0 &&
+                        (debouncedSearch ? (_jsx("p", { "data-testid": "media-library-no-matches", className: "text-muted-foreground text-sm", children: _jsx(Trans, { id: "plugin.media.library.noMatches", message: "No files match your search." }) })) : (_jsx(Dropzone, { onSelect: (files) => void startUpload(files), highlight: dragging }))), list.status === "success" && items.length > 0 && (_jsx("div", { "data-testid": "media-library-grid", className: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4", children: items.map((item) => {
+                            const selected = isPicker
+                                ? pickerSelected?.id === item.id
+                                : selectedItem?.id === item.id;
+                            return (_jsx(MediaCard, { item: item, selected: selected, onActivate: () => handleCardActivate(item), 
+                                // Page mode: double-click is idempotent with single-
+                                // click (open detail). Picker mode: confirm + close.
+                                onConfirm: isPicker
+                                    ? () => handleCardConfirm(item)
+                                    : () => handleCardActivate(item), ariaActionLabel: isPicker
+                                    ? i18n._(M.pickItemAria.id, { title: item.title }, { message: M.pickItemAria.message })
+                                    : i18n._(M.openDetailsAria.id, { title: item.title }, { message: M.openDetailsAria.message }) }, item.id));
+                        }) })), _jsx("div", { ref: sentinelRef, "data-testid": "media-library-sentinel" }), list.isFetchingNextPage && (_jsx("div", { "data-testid": "media-library-loading-more", className: "text-muted-foreground text-center text-sm", children: _jsx(Trans, { id: "plugin.media.library.loadingMore", message: "Loading more\u2026" }) })), dragging && items.length > 0 && (_jsx("div", { "data-testid": "media-library-drop-overlay", "aria-hidden": "true", className: "border-primary pointer-events-none absolute inset-4 rounded-lg border-2 border-dashed bg-white/5" })), isPicker && (_jsxs("footer", { "data-testid": "media-library-picker-footer", className: "bg-background sticky bottom-0 -mx-2 flex items-center justify-end gap-2 border-t px-2 py-3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onCancel?.(), "data-testid": "media-library-picker-cancel", children: _jsx(Trans, { id: "plugin.media.library.pickerCancel", message: "Cancel" }) }), _jsx(Button, { type: "button", size: "sm", disabled: pickerSelected === null, onClick: () => {
+                                    if (pickerSelected)
+                                        onSelect?.(toSelection(pickerSelected));
+                                }, "data-testid": "media-library-picker-confirm", children: _jsx(Trans, { id: "plugin.media.library.pickerUseSelection", message: "Use selection" }) })] }))] }), !isPicker && selectedItem && (_jsx(MediaDetailDrawer, { item: selectedItem, onClose: () => setSelectedItem(null), onAltChange: (alt) => update.mutate({ id: selectedItem.id, alt }), onDelete: () => {
+                    // Confirmation handled inside the drawer's ConfirmDialog;
+                    // by the time we get here the user already confirmed.
+                    const id = selectedItem.id;
+                    setSelectedItem(null);
+                    remove.mutate(id);
+                } })), errorMsg && (_jsx(ErrorBanner, { testIdRoot: "media-library-banner-error", message: friendlyError(errorMsg, (d) => i18n._(d)), onDismiss: () => setErrorMsg(null) }))] }));
+}
+function hasFiles(e) {
+    return Array.from(e.dataTransfer.types).includes("Files");
+}
+// Map opaque RPC `reason` codes to actionable, translatable text. The
+// error banner is the only surface a user sees when an upload fails —
+// raw reasons like `mime_mismatch` read like 404s. Several codes share
+// a descriptor (`payload_too_large` + `rpc_413` etc.) — the translator
+// translates one message, the lookup serves it for every aliased code.
+const ERROR_DESCRIPTORS = {
+    storageNotConfigured: {
+        id: "plugin.media.error.storageNotConfigured",
+        message: "No storage adapter is wired up — set `storage:` in plumix.config.ts.",
+    },
+    payloadTooLarge: {
+        id: "plugin.media.error.payloadTooLarge",
+        message: "File exceeds the configured maxUploadSize.",
+    },
+    unsupportedMediaType: {
+        id: "plugin.media.error.unsupportedMediaType",
+        message: "This file type isn't allowed by the media plugin's acceptedTypes.",
+    },
+    mimeMismatch: {
+        id: "plugin.media.error.mimeMismatch",
+        message: "The uploaded bytes don't match the declared file type.",
+    },
+    objectNotFound: {
+        id: "plugin.media.error.objectNotFound",
+        message: "Upload didn't reach storage — check your bucket's CORS rules.",
+    },
+    alreadyConfirmed: {
+        id: "plugin.media.error.alreadyConfirmed",
+        message: "This upload was already confirmed by another tab or device.",
+    },
+    serverCouldntProcess: {
+        id: "plugin.media.error.serverCouldntProcess",
+        message: "Server couldn't process this upload. Try again.",
+    },
+    contentLengthRequired: {
+        id: "plugin.media.error.contentLengthRequired",
+        message: "Upload missing Content-Length — your browser/proxy may be using chunked transfer.",
+    },
+    csrfTokenMissing: {
+        id: "plugin.media.error.csrfTokenMissing",
+        message: "Request blocked by CSRF check. Reload the page and try again.",
+    },
+};
+const FRIENDLY_ERRORS = {
+    storage_not_configured: ERROR_DESCRIPTORS.storageNotConfigured,
+    payload_too_large: ERROR_DESCRIPTORS.payloadTooLarge,
+    rpc_413: ERROR_DESCRIPTORS.payloadTooLarge,
+    unsupported_media_type: ERROR_DESCRIPTORS.unsupportedMediaType,
+    rpc_415: ERROR_DESCRIPTORS.unsupportedMediaType,
+    content_type_mismatch: ERROR_DESCRIPTORS.unsupportedMediaType,
+    mime_mismatch: ERROR_DESCRIPTORS.mimeMismatch,
+    object_not_found: ERROR_DESCRIPTORS.objectNotFound,
+    already_confirmed: ERROR_DESCRIPTORS.alreadyConfirmed,
+    media_meta_invalid: ERROR_DESCRIPTORS.serverCouldntProcess,
+    db_insert_failed: ERROR_DESCRIPTORS.serverCouldntProcess,
+    storage_put_failed: ERROR_DESCRIPTORS.serverCouldntProcess,
+    content_length_required: ERROR_DESCRIPTORS.contentLengthRequired,
+    csrf_token_missing: ERROR_DESCRIPTORS.csrfTokenMissing,
+};
+/**
+ * Resolve a server `reason` code to a translated string. Returns the
+ * raw code when no descriptor matches (developer-facing fallback).
+ */
+function friendlyError(raw, render) {
+    const descriptor = FRIENDLY_ERRORS[raw];
+    return descriptor ? render(descriptor) : raw;
+}
+function ErrorBanner({ testIdRoot, message, onDismiss, }) {
+    return (_jsxs("div", { role: "alert", "data-testid": testIdRoot, className: "text-destructive flex items-center justify-between gap-3 text-sm", children: [_jsx("span", { children: message }), _jsx(Button, { type: "button", variant: "link", size: "sm", "data-testid": `${testIdRoot}-dismiss`, onClick: onDismiss, className: "text-destructive h-auto p-0 text-xs", children: _jsx(Trans, { id: "plugin.media.banner.dismiss", message: "Dismiss" }) })] }));
+}
+async function tryCleanupDraft(mediaId) {
+    try {
+        await rpcCall("media/delete", { id: mediaId });
+    }
+    catch {
+        // Best-effort — server-side draft GC will catch it.
+    }
+}
+// First-impression empty state. Mirrors the shape of CF R2's bucket
+// dashboard: a dashed-border drop target with cloud-up glyph and an
+// inline "select from computer" picker. The page-wide drop handlers
+// already cover the entire library, but a visible target on the empty
+// state tells the user the library accepts files at all — without it
+// the page reads as "nothing to do here".
+function Dropzone({ onSelect, highlight, }) {
+    return (_jsxs("label", { "data-testid": "media-library-dropzone", "data-active": highlight ? "true" : undefined, className: `flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed px-4 py-16 text-center transition-colors duration-150 ${highlight ? "border-primary bg-white/5" : "border-border bg-transparent"}`, children: [_jsx("input", { type: "file", multiple: true, className: "sr-only", onChange: (event) => {
+                    const files = Array.from(event.target.files ?? []);
+                    if (files.length > 0)
+                        onSelect(files);
+                    event.target.value = "";
+                } }), _jsx(CloudUploadGlyph, {}), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "m-0 text-sm font-medium", children: _jsx(Trans, { id: "plugin.media.dropzone.headline", message: "Your library is empty. Add files to get started." }) }), _jsx("p", { className: "text-muted-foreground m-0 text-xs", children: _jsx(Trans, { id: "plugin.media.dropzone.subline", message: "Drag and drop or <0>select from computer</0>", components: {
+                                0: _jsx("span", { className: "underline" }),
+                            } }) })] })] }));
+}
+function CloudUploadGlyph() {
+    return (_jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "text-muted-foreground size-12", children: [_jsx("path", { d: "M16 16l-4-4-4 4" }), _jsx("path", { d: "M12 12v9" }), _jsx("path", { d: "M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3" })] }));
+}
+function UploadButton({ onSelect, }) {
+    return (_jsxs("label", { "data-testid": "media-library-upload", className: "bg-card hover:bg-muted cursor-pointer rounded border px-4 py-2 text-sm", children: [_jsx("input", { type: "file", multiple: true, className: "sr-only", onChange: (event) => {
+                    const files = Array.from(event.target.files ?? []);
+                    if (files.length > 0)
+                        onSelect(files);
+                    event.target.value = "";
+                } }), _jsx(Trans, { id: "plugin.media.upload.button", message: "Upload" })] }));
+}
+function UploadProgressBar({ pending, }) {
+    const total = pending.reduce((sum, p) => sum + p.progress, 0);
+    const ratio = total / pending.length;
+    const pct = Math.round(ratio * 100);
+    return (_jsxs("div", { "data-testid": "media-library-progress", className: "border-border bg-card flex flex-col gap-1.5 rounded-md border px-4 py-3 text-xs", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { children: _jsx(Trans, { id: "plugin.media.upload.progress", message: "Uploading {count, plural, one {# file} other {# files}}\u2026", values: { count: pending.length }, comment: "count: number of files currently uploading" }) }), _jsxs("span", { "data-testid": "media-library-progress-pct", children: [pct, "%"] })] }), _jsx("div", { className: "h-1.5 w-full overflow-hidden rounded-sm bg-white/10", children: _jsx("div", { className: "bg-primary h-full transition-[width] duration-200 ease-in-out", style: { width: `${String(pct)}%` } }) })] }));
+}
+function MediaCard({ item, selected, onActivate, onConfirm, ariaActionLabel, }) {
+    const { i18n } = useLingui();
+    const isImage = item.mime.startsWith("image/");
+    return (_jsxs("article", { "data-testid": `media-card-${String(item.id)}`, "data-selected": selected ? "true" : undefined, className: `border-border bg-card relative flex cursor-pointer flex-col gap-2 rounded-lg border p-3 ${selected ? "outline-primary outline-2 outline-offset-1" : ""}`, onClick: onActivate, onDoubleClick: onConfirm, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onActivate();
+            }
+        }, role: "button", tabIndex: 0, "aria-label": ariaActionLabel, children: [_jsxs("div", { className: "bg-muted relative flex aspect-square w-full items-center justify-center overflow-hidden rounded-sm", children: [isImage ? (_jsx(ImageWithFallback, { src: item.thumbnailUrl, alt: item.alt ?? item.title, mime: item.mime, testId: `media-card-${String(item.id)}-thumb` })) : (_jsx(FileGlyph, { mime: item.mime })), _jsx(FileTypeBadge, { mime: item.mime })] }), _jsx("div", { "data-testid": `media-card-${String(item.id)}-title`, className: "truncate text-sm", title: item.title, children: item.title }), _jsxs("div", { className: "flex gap-2 text-[0.7rem] opacity-60", children: [_jsx("span", { children: formatShortDate(i18n.locale, item.uploadedAt) }), _jsx("span", { children: "\u00B7" }), _jsx("span", { children: formatSize(i18n.locale, item.size) })] })] }));
+}
+function MediaSkeletonGrid() {
+    // Same grid shape as the populated state so the layout is stable
+    // across the loading → loaded transition (no shift, no reflow).
+    const placeholders = Array.from({ length: 8 }, (_, i) => i);
+    return (_jsx("div", { "data-testid": "media-library-loading", className: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4", children: placeholders.map((i) => (_jsxs("div", { "aria-hidden": "true", className: "border-border bg-card flex flex-col gap-2 rounded-lg border p-3", children: [_jsx(Skeleton, { className: "aspect-square w-full rounded-sm" }), _jsx(Skeleton, { className: "h-3.5 w-[70%] rounded-sm" }), _jsx(Skeleton, { className: "h-[0.7rem] w-[40%] rounded-sm" })] }, i))) }));
+}
+function FileTypeBadge({ mime }) {
+    const label = badgeLabel(mime);
+    if (!label)
+        return null;
+    return (_jsx("span", { className: "absolute end-2 top-2 rounded-sm bg-black/75 px-1.5 py-0.5 text-[0.65rem] font-semibold tracking-wider text-white", children: label }));
+}
+const EXACT_BADGE_LABELS = {
+    "application/pdf": "PDF",
+    "application/msword": "DOC",
+    "application/vnd.ms-excel": "XLS",
+    "application/vnd.ms-powerpoint": "PPT",
+    "application/zip": "ZIP",
+};
+const SUBSTRING_BADGE_LABELS = [
+    ["wordprocessingml", "DOCX"],
+    ["spreadsheetml", "XLSX"],
+    ["presentationml", "PPTX"],
+];
+function badgeLabel(mime) {
+    const exact = EXACT_BADGE_LABELS[mime];
+    if (exact)
+        return exact;
+    const sub = SUBSTRING_BADGE_LABELS.find(([needle]) => mime.includes(needle));
+    if (sub)
+        return sub[1];
+    const tail = mime.split("/")[1] ?? "";
+    return tail.replace(/^x-/, "").toUpperCase().slice(0, 5);
+}
+function formatShortDate(locale, iso) {
+    // Locale comes from `i18n.locale`, NOT browser default — a German user
+    // on a Spanish-default browser sees German chrome but otherwise would
+    // see Spanish dates. `.toUpperCase()` is skipped — Turkish dotless-i
+    // breaks; the card grid is already small-caps via CSS.
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(locale, {
+        month: "short",
+        day: "numeric",
+    }).format(d);
+}
+function formatLongDate(locale, iso) {
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(locale, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    }).format(d);
+}
+function MediaDetailDrawer({ item, onClose, onAltChange, onDelete, }) {
+    const { i18n } = useLingui();
+    const [copied, setCopied] = useState(false);
+    const [confirmingDelete, setConfirmingDelete] = useState(false);
+    const isImage = item.mime.startsWith("image/");
+    const absoluteUrl = toAbsoluteUrl(item.url);
+    const copy = useCallback(async () => {
+        try {
+            await navigator.clipboard.writeText(absoluteUrl);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            /* user can copy from the visible URL */
+        }
+    }, [absoluteUrl]);
+    return (_jsxs("aside", { "data-testid": "media-detail-drawer", className: "border-border bg-card sticky top-8 flex max-h-[calc(100vh-4rem)] w-80 flex-shrink-0 flex-col self-start overflow-y-auto rounded-lg border", children: [_jsxs("div", { className: "border-border flex items-center justify-between border-b px-4 py-3", children: [_jsx("span", { className: "text-xs tracking-wider opacity-70", children: _jsx(Trans, { id: "plugin.media.detail.heading", message: "ASSET DETAILS" }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: onClose, "aria-label": i18n._(M.closeDetailsAria), "data-testid": "media-detail-close", className: "text-base leading-none", children: "\u00D7" })] }), _jsx("div", { className: "bg-muted aspect-square w-full overflow-hidden", children: isImage ? (_jsx("img", { src: item.thumbnailUrl, alt: item.alt ?? item.title, className: "size-full object-contain" })) : (_jsx(FileGlyph, { mime: item.mime })) }), _jsxs("div", { className: "flex flex-col gap-4 p-4", children: [_jsx("div", { children: _jsx("h2", { className: "m-0 text-base font-semibold break-all", children: item.title }) }), _jsx(DetailField, { label: _jsx(Trans, { id: "plugin.media.detail.field.assetType", message: "ASSET TYPE" }), value: item.mime }), _jsx(DetailField, { label: _jsx(Trans, { id: "plugin.media.detail.field.fileSize", message: "FILE SIZE" }), value: formatSize(i18n.locale, item.size) }), _jsx(DetailField, { label: _jsx(Trans, { id: "plugin.media.detail.field.uploaded", message: "UPLOADED" }), value: formatLongDate(i18n.locale, item.uploadedAt) }), _jsxs("div", { children: [_jsx(DetailLabel, { children: _jsx(Trans, { id: "plugin.media.detail.field.altText", message: "ALT TEXT" }) }), _jsx(AltEditor, { cardId: item.id, testIdPrefix: "media-detail", value: item.alt ?? "", placeholder: isImage ? i18n._(M.describeImage) : i18n._(M.describeAsset), onSave: onAltChange })] }), _jsxs("div", { children: [_jsx(DetailLabel, { children: _jsx(Trans, { id: "plugin.media.detail.field.url", message: "URL" }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("code", { "data-testid": "media-detail-url", className: "flex-1 truncate text-[0.7rem] break-all opacity-85", title: absoluteUrl, children: absoluteUrl }), _jsx(Button, { type: "button", variant: "outline", size: "xs", onClick: () => void copy(), "data-testid": "media-detail-copy", className: "flex-shrink-0 text-[0.7rem]", children: copied ? (_jsx(Trans, { id: "plugin.media.detail.copied", message: "Copied" })) : (_jsx(Trans, { id: "plugin.media.detail.copy", message: "Copy" })) })] })] }), _jsxs("div", { className: "border-border flex gap-2 border-t pt-2", children: [_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "flex-1", children: _jsx("a", { 
+                                    // Always go through the worker serve route with
+                                    // ?attachment=1 — the HTML `download` attribute is ignored
+                                    // cross-origin (e.g. when `publicUrlBase` is configured),
+                                    // but the route always sends `Content-Disposition:
+                                    // attachment` for this query param, so downloads work
+                                    // regardless of which mode `item.url` is in.
+                                    href: `${pluginBasePath()}/_plumix/media/serve/${String(item.id)}?attachment=1`, download: item.title, "data-testid": "media-detail-download", children: _jsx(Trans, { id: "plugin.media.detail.download", message: "Download" }) }) }), _jsx(Button, { type: "button", variant: "outline", size: "sm", "data-testid": "media-detail-delete", onClick: () => setConfirmingDelete(true), className: "flex-1", children: _jsx(Trans, { id: "plugin.media.detail.delete", message: "Delete" }) })] })] }), confirmingDelete && (_jsx(ConfirmDialog, { title: _jsx(Trans, { id: "plugin.media.detail.deleteTitle", message: "Delete this asset?" }), description: i18n._(M.confirmDeleteDescription.id, { title: item.title }, { message: M.confirmDeleteDescription.message }), confirmLabel: _jsx(Trans, { id: "plugin.media.detail.deleteConfirm", message: "Delete" }), danger: true, onCancel: () => setConfirmingDelete(false), onConfirm: () => {
+                    setConfirmingDelete(false);
+                    onDelete();
+                } }))] }));
+}
+function ConfirmDialog({ title, description, confirmLabel, danger = false, onCancel, onConfirm, }) {
+    // Mounted only while confirming (parent renders conditionally), so the
+    // dialog is always open while present; closing via ESC, the overlay, or
+    // Cancel routes through `onOpenChange` → `onCancel`. Radix handles the
+    // focus trap + ESC that this component used to wire by hand.
+    return (_jsx(AlertDialog, { open: true, onOpenChange: (next) => {
+            if (!next)
+                onCancel();
+        }, children: _jsxs(AlertDialogContent, { "data-testid": "confirm-dialog-overlay", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { "data-testid": "confirm-dialog-title", children: title }), description ? (_jsx(AlertDialogDescription, { children: description })) : null] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { "data-testid": "confirm-dialog-cancel", children: _jsx(Trans, { id: "plugin.media.dialog.cancel", message: "Cancel" }) }), _jsx(AlertDialogAction, { "data-testid": "confirm-dialog-confirm", variant: danger ? "destructive" : "default", onClick: onConfirm, children: confirmLabel ?? (_jsx(Trans, { id: "plugin.media.dialog.confirm", message: "Confirm" })) })] })] }) }));
+}
+function DetailLabel({ children }) {
+    return (_jsx("div", { className: "mb-1 text-[0.7rem] tracking-wider opacity-60", children: children }));
+}
+function DetailField({ label, value, }) {
+    return (_jsxs("div", { children: [_jsx(DetailLabel, { children: label }), _jsx("div", { className: "text-sm break-words", children: value })] }));
+}
+function AltEditor({ cardId, testIdPrefix = "media-card", value, placeholder, onSave, }) {
+    const [draft, setDraft] = useState(value);
+    const [savedFlash, setSavedFlash] = useState(false);
+    const dirtyRef = useRef(false);
+    // Track the last value WE saved so we can recognise it when it
+    // round-trips back via list refetch and not stomp the user's draft.
+    // The naive "if not dirty, sync" approach raced: between commit
+    // (which clears dirty) and the refetch arriving with the new value,
+    // a re-render would set draft back to the OLD value because the
+    // effect ran before the refetch updated `value`.
+    const lastSavedRef = useRef(value);
+    useEffect(() => {
+        if (value === lastSavedRef.current)
+            return; // our own save came back
+        if (!dirtyRef.current)
+            setDraft(value); // external update, not editing
+    }, [value]);
+    const commit = useCallback(() => {
+        dirtyRef.current = false;
+        if (draft !== value) {
+            lastSavedRef.current = draft;
+            onSave(draft);
+            setSavedFlash(true);
+            setTimeout(() => setSavedFlash(false), 1200);
+        }
+    }, [draft, value, onSave]);
+    return (_jsxs("div", { className: "relative", children: [_jsx(Input, { "data-testid": `${testIdPrefix}-${String(cardId)}-alt`, type: "text", value: draft, placeholder: placeholder, onChange: (e) => {
+                    dirtyRef.current = true;
+                    setDraft(e.target.value);
+                }, onBlur: commit, onKeyDown: (e) => {
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        commit();
+                        e.currentTarget.blur();
+                    }
+                    else if (e.key === "Escape") {
+                        // Discard edit + restore canonical value, no save.
+                        e.preventDefault();
+                        dirtyRef.current = false;
+                        setDraft(value);
+                        e.currentTarget.blur();
+                    }
+                } }), savedFlash && (_jsx("span", { "data-testid": `${testIdPrefix}-${String(cardId)}-alt-saved`, "aria-live": "polite", className: "text-primary pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 text-[0.65rem]", children: _jsx(Trans, { id: "plugin.media.altEditor.saved", message: "\u2713 Saved" }) }))] }));
+}
+function FileGlyph({ mime }) {
+    return (_jsx("div", { className: "text-muted-foreground flex size-full items-center justify-center text-xl font-semibold tracking-widest", children: mimeGlyph(mime) }));
+}
+// Image with avatar-style fallback. Shows a shimmer skeleton while
+// loading, fades the image in once `onLoad` fires, falls back to the
+// file glyph if the image errors. Container has a fixed aspect ratio
+// so there's no layout shift between skeleton → image.
+function ImageWithFallback({ src, alt, mime, testId, }) {
+    const [state, setState] = useState("loading");
+    return (_jsxs(_Fragment, { children: [state !== "loaded" && (_jsx("div", { "aria-hidden": "true", className: `absolute inset-0 flex items-center justify-center ${state === "error" ? "bg-muted" : "animate-pulse bg-white/10"}`, children: state === "error" && _jsx(FileGlyph, { mime: mime }) })), _jsx("img", { "data-testid": testId, src: src, alt: alt, loading: "lazy", decoding: "async", onLoad: () => setState("loaded"), onError: () => setState("error"), className: `block size-full object-cover transition-opacity duration-200 ${state === "loaded" ? "opacity-100" : "opacity-0"}` })] }));
+}
+function mimeGlyph(mime) {
+    if (mime.startsWith("video/"))
+        return "VID";
+    if (mime.startsWith("audio/"))
+        return "AUD";
+    if (mime === "application/pdf")
+        return "PDF";
+    if (mime.includes("zip"))
+        return "ZIP";
+    if (mime.startsWith("text/"))
+        return "TXT";
+    return "DOC";
+}
+function formatSize(locale, bytes) {
+    // Unit labels (B/KB/MB) are SI/IEC and conventionally untranslated;
+    // the locale governs decimal separator (German "1,5 MB" vs US "1.5 MB").
+    if (typeof bytes !== "number" || !Number.isFinite(bytes))
+        return "—";
+    const nf = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 });
+    if (bytes < 1024)
+        return `${nf.format(bytes)} B`;
+    if (bytes < 1024 * 1024)
+        return `${nf.format(bytes / 1024)} KB`;
+    return `${nf.format(bytes / 1024 / 1024)} MB`;
+}
+//# sourceMappingURL=MediaLibrary.js.map