import { type ChangeEvent, useRef } from 'react' import type { MediaClient, MediaItem } from './client.js' import { useMediaLibrary } from './useMediaLibrary.js' import { useUpload } from './useUpload.js' export interface MediaLibraryProps { client: MediaClient onSelect(item: MediaItem): void className?: string allowDelete?: boolean } export function MediaLibrary({ client, onSelect, className, allowDelete = true }: MediaLibraryProps) { const lib = useMediaLibrary(client) const up = useUpload(client) const inputRef = useRef(null) const onFile = async (e: ChangeEvent) => { const file = e.target.files?.[0] if (!file) return try { await up.upload(file) await lib.refresh() } catch { // up.error surfaces a host rejection (UploadRejectedError) — the region renders it below. // (A re-entrant UploadInFlightError can't occur here: input is disabled while up.uploading.) } finally { if (inputRef.current) inputRef.current.value = '' } } // WCAG 2.4.3: deleting the focused item removes its button from the DOM. Restore focus // to a stable in-component target (the upload input) after remove settles, so focus never // falls to . lib.remove never rejects (it surfaces failures via lib.error), so this // runs on both success and failure — focus lands on the always-rendered input either way. const onDelete = async (key: string) => { await lib.remove(key) inputRef.current?.focus() } return (
{up.error ?

{up.error.message}

: null}
{lib.error ?

{lib.error.message}

: null} {!lib.loading && !lib.error && lib.items.length === 0 ? (

No media yet. Upload an image to begin.

) : (
    {lib.items.map((item) => (
  • {allowDelete ? ( ) : null}
    • ))}
)} {lib.hasMore ? ( ) : null}
) }