@orthacms/media-admin 0.0.0-reserve.0

package/dist/lib/components/UploadDialog/index.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, cn } from '@orthacms/design-system';
+import { UploadCloud } from 'lucide-react';
+import { StagedFileRow } from './StagedFileRow';
+/** Stable default for `initialFiles`, so the seeding effect isn't re-run. */
+const NO_FILES = [];
+/** Intl descriptors for {@link UploadDialog}, co-located. */
+const messages = defineMessages({
+    title: { id: 'media.upload.title', defaultMessage: 'Upload assets' },
+    description: {
+        id: 'media.upload.description',
+        defaultMessage: 'Files upload to {location}.'
+    },
+    dropHere: {
+        id: 'media.upload.dropHere',
+        defaultMessage: 'Drag & drop files here'
+    },
+    or: { id: 'media.upload.or', defaultMessage: 'or' },
+    browse: { id: 'media.upload.browse', defaultMessage: 'Browse files' },
+    /**
+     * The `sr-only` input is still a tab stop, so it needs a name of its own —
+     * axe flagged it as an unlabelled form element the moment the dialog's
+     * staged state was scanned. Distinct from the visible "Browse files" button
+     * that clicks it, so the two don't read as duplicates.
+     */
+    fileInput: {
+        id: 'media.upload.fileInput',
+        defaultMessage: 'Choose files to upload'
+    },
+    /**
+     * No size is quoted. The cap is `config.plugins.media.maxUploadBytes`
+     * (50 MB by default) and the admin has no route that reports it, so the old
+     * "up to 250 MB each" was a number nothing checked — a 52 MB file staged
+     * happily and then 413'd after transferring in full.
+     */
+    hint: {
+        id: 'media.upload.hint',
+        defaultMessage: 'Images, video, audio, and documents.'
+    },
+    staged: {
+        id: 'media.upload.staged',
+        defaultMessage: '{count, plural, one {# file ready} other {# files ready}}'
+    },
+    cancel: { id: 'media.upload.cancel', defaultMessage: 'Cancel' },
+    confirm: {
+        id: 'media.upload.confirm',
+        defaultMessage: 'Upload {count, plural, one {# file} other {# files}}'
+    }
+});
+/**
+ * The upload modal — a drag-and-drop zone plus a multi-file picker that stages
+ * the chosen files into a removable, **previewed** list before committing:
+ * images render a real thumbnail off a local object URL (see
+ * {@link StagedFileRow}), other kinds a glyph, so a wrong file is caught before
+ * a byte moves. Files accumulate across several drops/picks.
+ *
+ * On confirm the parent's `onUpload` receives the real `File` objects and the
+ * dialog closes immediately — progress then lives in the caller's upload banner,
+ * not here, so the user can keep browsing (and queue more) while bytes move.
+ * Staged files reset whenever the dialog reopens, seeded from `initialFiles`.
+ *
+ * **Shared by both upload entry points** — the Media Library's toolbar and a
+ * content record's media field — so staging, previewing, and the copy are
+ * identical in the two places. The field narrows it with `multiple` / `accept` /
+ * its own `description` + `hint`; everything else is the same dialog.
+ */
+export function UploadDialog({ open, onOpenChange, locationLabel, description, hint, confirmLabel, accept, multiple = true, initialFiles = NO_FILES, collectAlt = false, onUpload }) {
+    const intl = useIntl();
+    const inputRef = useRef(null);
+    const [staged, setStaged] = useState([]);
+    const [dragging, setDragging] = useState(false);
+    useEffect(() => {
+        if (open) {
+            setStaged(initialFiles.map((file) => ({ file })));
+            setDragging(false);
+        }
+    }, [open, initialFiles]);
+    const addFiles = (files) => {
+        if (!files)
+            return;
+        const picked = Array.from(files).map((file) => ({ file }));
+        // A single-asset field holds one file: the newest pick replaces the last.
+        setStaged((prev) => multiple ? [...prev, ...picked] : picked.slice(0, 1));
+    };
+    const removeAt = (index) => {
+        setStaged((prev) => prev.filter((_, i) => i !== index));
+    };
+    const setAltAt = (index, alt) => {
+        setStaged((prev) => prev.map((item, i) => (i === index ? { ...item, alt } : item)));
+    };
+    const submit = () => {
+        if (staged.length === 0)
+            return;
+        onUpload(staged);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: intl.formatMessage(messages.title) }), _jsx(DialogDescription, { children: description ??
+                                intl.formatMessage(messages.description, {
+                                    location: locationLabel
+                                }) })] }), _jsxs("div", { onDragOver: (event) => {
+                        event.preventDefault();
+                        setDragging(true);
+                    }, onDragLeave: () => setDragging(false), onDrop: (event) => {
+                        event.preventDefault();
+                        setDragging(false);
+                        addFiles(event.dataTransfer.files);
+                    }, className: cn('flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors', dragging
+                        ? 'border-primary bg-primary/5'
+                        : 'border-border bg-muted/30'), children: [_jsx(UploadCloud, { className: "size-8 text-muted-foreground", "aria-hidden": true }), _jsx("p", { className: "text-sm font-medium", children: intl.formatMessage(messages.dropHere) }), _jsx("p", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.or) }), _jsx(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: () => inputRef.current?.click(), children: intl.formatMessage(messages.browse) }), _jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: hint ?? intl.formatMessage(messages.hint) }), _jsx("input", { ref: inputRef, type: "file", accept: accept, multiple: multiple, "aria-label": intl.formatMessage(messages.fileInput), className: "sr-only", onChange: (event) => {
+                                addFiles(event.target.files);
+                                event.target.value = '';
+                            } })] }), staged.length > 0 ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: intl.formatMessage(messages.staged, {
+                                count: staged.length
+                            }) }), _jsx("ul", { className: "flex max-h-56 flex-col gap-1 overflow-auto", children: staged.map((item, index) => (_jsx(StagedFileRow, { file: item.file, alt: item.alt ?? '', collectAlt: collectAlt, onAltChange: (value) => setAltAt(index, value), onRemove: () => removeAt(index) }, `${item.file.name}-${item.file.lastModified}-${index}`))) })] })) : null, _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: intl.formatMessage(messages.cancel) }), _jsx(Button, { onClick: submit, disabled: staged.length === 0, children: confirmLabel ??
+                                intl.formatMessage(messages.confirm, {
+                                    count: staged.length
+                                }) })] })] }) }));
+}

package/dist/lib/components/WysiwygLibrarySource/index.d.ts

@@ -0,0 +1,14 @@
+import type { WysiwygMediaSourceContext } from '@orthacms/wysiwyg-admin';
+/**
+ * The Media Library as a **rich-text media source** — the plugin's contribution
+ * to `WYSIWYG_MEDIA_SLOT`.
+ *
+ * It is the same {@link MediaPickerDialog} a media *field* opens, which is the
+ * point: browsing, searching, and folder navigation are one implementation, and
+ * an author moving between a media field and a body meets the same picker.
+ *
+ * `multiple` is on, because placing three images in a row is a normal thing to
+ * do in a body and re-opening the picker twice for it is not.
+ */
+export declare function WysiwygLibrarySource({ open, onOpenChange, accept, onInsert }: WysiwygMediaSourceContext): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/WysiwygLibrarySource/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/WysiwygLibrarySource/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAKzE;;;;;;;;;;GAUG;AACH,wBAAgB,oBAAoB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,QAAQ,EACX,EAAE,yBAAyB,+BAmB3B"}

package/dist/lib/components/WysiwygLibrarySource/index.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MediaPickerDialog } from '../MediaPickerDialog';
+import { toWysiwygEmbed } from '../../utils/toWysiwygEmbed';
+/**
+ * The Media Library as a **rich-text media source** — the plugin's contribution
+ * to `WYSIWYG_MEDIA_SLOT`.
+ *
+ * It is the same {@link MediaPickerDialog} a media *field* opens, which is the
+ * point: browsing, searching, and folder navigation are one implementation, and
+ * an author moving between a media field and a body meets the same picker.
+ *
+ * `multiple` is on, because placing three images in a row is a normal thing to
+ * do in a body and re-opening the picker twice for it is not.
+ */
+export function WysiwygLibrarySource({ open, onOpenChange, accept, onInsert }) {
+    return (_jsx(MediaPickerDialog, { open: open, onOpenChange: onOpenChange, multiple: true, 
+        // The editor's kinds, handed to the picker as its own restriction —
+        // so an audio file or a PDF is filtered out of the grid rather than
+        // being pickable and then silently dropped on insert.
+        accept: { kinds: [...accept] }, onConfirm: (assets) => {
+            const embeds = assets
+                .map(toWysiwygEmbed)
+                .filter((embed) => embed !== null);
+            if (embeds.length > 0)
+                onInsert(embeds);
+            onOpenChange(false);
+        } }));
+}

package/dist/lib/components/WysiwygUploadSource/index.d.ts

@@ -0,0 +1,25 @@
+import type { WysiwygMediaSourceContext } from '@orthacms/wysiwyg-admin';
+/**
+ * Upload as a **rich-text media source** — the plugin's second contribution to
+ * `WYSIWYG_MEDIA_SLOT`.
+ *
+ * Files go **into the Media Library** and are then placed in the text, rather
+ * than being embedded as data URIs or attached to the record alone. That is the
+ * behaviour a CMS wants: an image used in a body is an asset like any other —
+ * findable, reusable, replaceable — and a body full of base64 is unshippable.
+ *
+ * ### Why this uploads immediately, unlike a media *field*
+ *
+ * A media field defers its uploads to the record's save
+ * (`usePendingMediaUploads`), because a field holds an id and an abandoned edit
+ * would otherwise litter the library. A body holds a **URL**, and there is no
+ * URL until the bytes exist — so the upload has to happen now. The trade is
+ * real and one-directional: abandoning the edit leaves the asset in the
+ * library, where it is visible and deletable, rather than leaving the body
+ * pointing at nothing.
+ *
+ * Each file is its own request, so one failure costs one file: the rest still
+ * insert, and the toast names the one that didn't.
+ */
+export declare function WysiwygUploadSource({ open, onOpenChange, accept, onInsert }: WysiwygMediaSourceContext): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/WysiwygUploadSource/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/WysiwygUploadSource/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAoCzE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,QAAQ,EACX,EAAE,yBAAyB,+BAgE3B"}

package/dist/lib/components/WysiwygUploadSource/index.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useQueryClient } from '@tanstack/react-query';
+import { toast } from '@orthacms/design-system';
+import { useCurrentWorkspace } from '@orthacms/workspaces-admin';
+import { ROOT_FOLDER_ID } from '../../constants';
+import { httpMediaGateway } from '../../infrastructure/httpMediaGateway';
+import { mediaKeys } from '../../infrastructure/mediaKeys';
+import { acceptsFile } from '../../utils/mediaAccept';
+import { toWysiwygEmbed } from '../../utils/toWysiwygEmbed';
+import { UploadDialog } from '../UploadDialog';
+const messages = defineMessages({
+    location: {
+        id: 'media.wysiwygUpload.location',
+        defaultMessage: 'All media'
+    },
+    description: {
+        id: 'media.wysiwygUpload.description',
+        defaultMessage: 'Files are added to the Media Library, then placed in the text.'
+    },
+    confirm: {
+        id: 'media.wysiwygUpload.confirm',
+        defaultMessage: 'Upload and insert'
+    },
+    rejected: {
+        id: 'media.wysiwygUpload.rejected',
+        defaultMessage: '{name} isn’t an image or a video, so it can’t go in the text.'
+    },
+    failed: {
+        id: 'media.wysiwygUpload.failed',
+        defaultMessage: 'Couldn’t upload {name}. Nothing was inserted for it.'
+    }
+});
+/** The file-picker `accept` matching the kinds a body can hold. */
+const FILE_ACCEPT = 'image/*,video/*';
+/**
+ * Upload as a **rich-text media source** — the plugin's second contribution to
+ * `WYSIWYG_MEDIA_SLOT`.
+ *
+ * Files go **into the Media Library** and are then placed in the text, rather
+ * than being embedded as data URIs or attached to the record alone. That is the
+ * behaviour a CMS wants: an image used in a body is an asset like any other —
+ * findable, reusable, replaceable — and a body full of base64 is unshippable.
+ *
+ * ### Why this uploads immediately, unlike a media *field*
+ *
+ * A media field defers its uploads to the record's save
+ * (`usePendingMediaUploads`), because a field holds an id and an abandoned edit
+ * would otherwise litter the library. A body holds a **URL**, and there is no
+ * URL until the bytes exist — so the upload has to happen now. The trade is
+ * real and one-directional: abandoning the edit leaves the asset in the
+ * library, where it is visible and deletable, rather than leaving the body
+ * pointing at nothing.
+ *
+ * Each file is its own request, so one failure costs one file: the rest still
+ * insert, and the toast names the one that didn't.
+ */
+export function WysiwygUploadSource({ open, onOpenChange, accept, onInsert }) {
+    const intl = useIntl();
+    const workspace = useCurrentWorkspace();
+    const queryClient = useQueryClient();
+    const [busy, setBusy] = useState(false);
+    const upload = async (files) => {
+        onOpenChange(false);
+        if (busy)
+            return;
+        setBusy(true);
+        // Checked before anything is sent: a PDF would upload fine and then be
+        // silently unusable, which reads as the editor losing the file.
+        const usable = files.filter((file) => {
+            if (acceptsFile({ kinds: [...accept] }, file))
+                return true;
+            toast.error(intl.formatMessage(messages.rejected, { name: file.name }));
+            return false;
+        });
+        let uploaded = false;
+        for (const file of usable) {
+            try {
+                const asset = await httpMediaGateway.uploadFile(ROOT_FOLDER_ID, file);
+                uploaded = true;
+                const embed = toWysiwygEmbed(asset);
+                // Inserted one at a time, in order, so a long batch appears as
+                // it lands rather than all at the end.
+                if (embed)
+                    onInsert([embed]);
+            }
+            catch {
+                toast.error(intl.formatMessage(messages.failed, { name: file.name }));
+            }
+        }
+        // The library is stale the moment anything landed — even if a later
+        // file failed.
+        if (uploaded) {
+            void queryClient.invalidateQueries({
+                queryKey: mediaKeys.all(workspace.id)
+            });
+        }
+        setBusy(false);
+    };
+    return (_jsx(UploadDialog, { open: open, onOpenChange: onOpenChange, locationLabel: intl.formatMessage(messages.location), description: intl.formatMessage(messages.description), confirmLabel: intl.formatMessage(messages.confirm), accept: FILE_ACCEPT, multiple: true, onUpload: (uploads) => void upload(uploads.map((staged) => staged.file)) }));
+}

package/dist/lib/constants/index.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Shared string constants for the Media Library, kept here so route segments,
+ * layout keys, and enum-like option values live in one place instead of being
+ * repeated as magic literals across the page, sidebar, toolbar, and dialogs.
+ */
+/** Permission required to browse media. Mirrors the (future) server matrix. */
+export declare const MEDIA_READ = "media:read";
+/** Permission required to upload / create assets. */
+export declare const MEDIA_CREATE = "media:create";
+/** Permission required to rename / move / replace assets. */
+export declare const MEDIA_UPDATE = "media:update";
+/** Permission required to delete assets and folders. */
+export declare const MEDIA_DELETE = "media:delete";
+/**
+ * Path segment under the workspace shell where the Media Library mounts
+ * (`/workspaces/:id/media`). Shared by the plugin's slot contribution and the
+ * page so they can never drift apart.
+ */
+export declare const MEDIA_SEGMENT = "media";
+/** The synthetic root folder id — the library's top level ("All media"). */
+export declare const ROOT_FOLDER_ID = "root";
+/** Where one queued upload has got to. */
+export declare const UPLOAD_STATUS: {
+    /** Queued, waiting for a concurrency slot. */
+    readonly Pending: "pending";
+    /** Bytes are on the wire. */
+    readonly Uploading: "uploading";
+    readonly Done: "done";
+    readonly Failed: "failed";
+    /** Aborted by the user before it finished. */
+    readonly Cancelled: "cancelled";
+};
+/** One queued upload's state. */
+export type UploadStatus = (typeof UPLOAD_STATUS)[keyof typeof UPLOAD_STATUS];
+/**
+ * How many files upload at once. Above ~3 the browser queues the rest anyway
+ * (per-host connection limits) while each one's progress bar crawls, which
+ * reads as a stall; a small pool keeps every active bar visibly moving.
+ */
+export declare const UPLOAD_CONCURRENCY = 3;
+/** The kinds of asset the library recognises, driving icons and filters. */
+export declare const MEDIA_KIND: {
+    readonly Image: "image";
+    readonly Video: "video";
+    readonly Audio: "audio";
+    readonly Document: "document";
+    readonly Archive: "archive";
+};
+/** One recognised asset kind. */
+export type MediaKind = (typeof MEDIA_KIND)[keyof typeof MEDIA_KIND];
+/** The special "no filter" sentinel for the kind filter control. */
+export declare const KIND_FILTER_ALL = "all";
+/**
+ * Assets per page in the library grid, and the sizes the pager offers.
+ *
+ * 24 matches the server's own default and divides evenly by the grid's column
+ * counts (2/3/4/5), so a full page never leaves a ragged last row. The server
+ * caps a page at 100, so nothing above it is offered.
+ */
+export declare const DEFAULT_ASSETS_PAGE_SIZE = 24;
+/** The page sizes the library's pager offers, smallest first. */
+export declare const ASSETS_PAGE_SIZE_OPTIONS: number[];
+/**
+ * Assets fetched by a surface that browses without a pager — the picker
+ * dialog, which narrows by searching rather than by paging. The server's
+ * ceiling, so it is one request whatever the folder holds.
+ */
+export declare const PICKER_ASSETS_PAGE_SIZE = 100;
+/** How long the search box waits after a keystroke before it queries. */
+export declare const SEARCH_DEBOUNCE_MS = 300;
+/** How the visible assets are ordered. */
+export declare const MEDIA_SORT: {
+    readonly NameAsc: "name-asc";
+    readonly NameDesc: "name-desc";
+    readonly Newest: "newest";
+    readonly Oldest: "oldest";
+    readonly Largest: "largest";
+    readonly Smallest: "smallest";
+};
+/** One asset-ordering option. */
+export type MediaSort = (typeof MEDIA_SORT)[keyof typeof MEDIA_SORT];
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/constants/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/constants/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,+EAA+E;AAC/E,eAAO,MAAM,UAAU,eAAe,CAAC;AAEvC,qDAAqD;AACrD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,6DAA6D;AAC7D,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,wDAAwD;AACxD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,4EAA4E;AAC5E,eAAO,MAAM,cAAc,SAAS,CAAC;AAErC,0CAA0C;AAC1C,eAAO,MAAM,aAAa;IACtB,8CAA8C;;IAE9C,6BAA6B;;;;IAI7B,8CAA8C;;CAExC,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,4EAA4E;AAC5E,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,eAAe,QAAQ,CAAC;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,iEAAiE;AACjE,eAAO,MAAM,wBAAwB,UAAe,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0CAA0C;AAC1C,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC"}

package/dist/lib/constants/index.js

@@ -0,0 +1,75 @@
+/**
+ * Shared string constants for the Media Library, kept here so route segments,
+ * layout keys, and enum-like option values live in one place instead of being
+ * repeated as magic literals across the page, sidebar, toolbar, and dialogs.
+ */
+/** Permission required to browse media. Mirrors the (future) server matrix. */
+export const MEDIA_READ = 'media:read';
+/** Permission required to upload / create assets. */
+export const MEDIA_CREATE = 'media:create';
+/** Permission required to rename / move / replace assets. */
+export const MEDIA_UPDATE = 'media:update';
+/** Permission required to delete assets and folders. */
+export const MEDIA_DELETE = 'media:delete';
+/**
+ * Path segment under the workspace shell where the Media Library mounts
+ * (`/workspaces/:id/media`). Shared by the plugin's slot contribution and the
+ * page so they can never drift apart.
+ */
+export const MEDIA_SEGMENT = 'media';
+/** The synthetic root folder id — the library's top level ("All media"). */
+export const ROOT_FOLDER_ID = 'root';
+/** Where one queued upload has got to. */
+export const UPLOAD_STATUS = {
+    /** Queued, waiting for a concurrency slot. */
+    Pending: 'pending',
+    /** Bytes are on the wire. */
+    Uploading: 'uploading',
+    Done: 'done',
+    Failed: 'failed',
+    /** Aborted by the user before it finished. */
+    Cancelled: 'cancelled'
+};
+/**
+ * How many files upload at once. Above ~3 the browser queues the rest anyway
+ * (per-host connection limits) while each one's progress bar crawls, which
+ * reads as a stall; a small pool keeps every active bar visibly moving.
+ */
+export const UPLOAD_CONCURRENCY = 3;
+/** The kinds of asset the library recognises, driving icons and filters. */
+export const MEDIA_KIND = {
+    Image: 'image',
+    Video: 'video',
+    Audio: 'audio',
+    Document: 'document',
+    Archive: 'archive'
+};
+/** The special "no filter" sentinel for the kind filter control. */
+export const KIND_FILTER_ALL = 'all';
+/**
+ * Assets per page in the library grid, and the sizes the pager offers.
+ *
+ * 24 matches the server's own default and divides evenly by the grid's column
+ * counts (2/3/4/5), so a full page never leaves a ragged last row. The server
+ * caps a page at 100, so nothing above it is offered.
+ */
+export const DEFAULT_ASSETS_PAGE_SIZE = 24;
+/** The page sizes the library's pager offers, smallest first. */
+export const ASSETS_PAGE_SIZE_OPTIONS = [24, 48, 96];
+/**
+ * Assets fetched by a surface that browses without a pager — the picker
+ * dialog, which narrows by searching rather than by paging. The server's
+ * ceiling, so it is one request whatever the folder holds.
+ */
+export const PICKER_ASSETS_PAGE_SIZE = 100;
+/** How long the search box waits after a keystroke before it queries. */
+export const SEARCH_DEBOUNCE_MS = 300;
+/** How the visible assets are ordered. */
+export const MEDIA_SORT = {
+    NameAsc: 'name-asc',
+    NameDesc: 'name-desc',
+    Newest: 'newest',
+    Oldest: 'oldest',
+    Largest: 'largest',
+    Smallest: 'smallest'
+};

package/dist/lib/hooks/useMediaInsights/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Query keys for the media Insights caches.
+ *
+ * Workspace-scoped for the same reason as every other media key: the workspace
+ * only reaches the server as an ambient header, which is never sent on a cache
+ * hit — so without the id in the key, switching workspaces would serve the
+ * previous one's numbers and never refetch.
+ */
+export declare const mediaInsightsKeys: {
+    all: (workspaceId: string) => readonly ["media-insights", string];
+    storage: (workspaceId: string) => readonly ["media-insights", string, "storage"];
+    uploads: (workspaceId: string, days: number) => readonly ["media-insights", string, "uploads", number];
+    alt: (workspaceId: string) => readonly ["media-insights", string, "alt"];
+};
+/**
+ * Loads assets and bytes per media kind.
+ *
+ * Both the Overview storage tile and the full storage widget call this; one
+ * query key means one request serves both while each keeps its own state.
+ */
+export declare function useMediaStorage(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("../../infrastructure/mediaInsightsGateway").MediaStorage>, Error>;
+/** Loads assets uploaded per time bucket across the selected range. */
+export declare function useMediaUploads(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("../../infrastructure/mediaInsightsGateway").MediaUploads>, Error>;
+/**
+ * Loads alt-text coverage across the workspace's images.
+ *
+ * Takes no range: accessibility debt is a standing total, not something that
+ * happened in the last 30 days, and windowing it would make the number shrink
+ * whenever someone narrowed the range.
+ */
+export declare function useMediaAltCoverage(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("../../infrastructure/mediaInsightsGateway").MediaAltCoverage>, Error>;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/hooks/useMediaInsights/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useMediaInsights/index.ts"],"names":[],"mappings":"AAUA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB;uBACP,MAAM;2BACF,MAAM;2BAEN,MAAM,QAAQ,MAAM;uBAExB,MAAM;CAE5B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,qIAgB9B;AAED,uEAAuE;AACvE,wBAAgB,eAAe,qIAiB9B;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,yIAgBlC"}

package/dist/lib/hooks/useMediaInsights/index.js

@@ -0,0 +1,85 @@
+import { useQuery } from '@tanstack/react-query';
+import { STALE_TIME } from '@orthacms/utils-admin';
+import { useCurrentWorkspace } from '@orthacms/workspaces-admin';
+import { useHasPermission } from '@orthacms/identity-admin';
+import { useInsightsRange } from '@orthacms/insights-admin';
+import { httpMediaInsightsGateway } from '../../infrastructure/httpMediaInsightsGateway';
+/** Permission every media Insights read is gated on. */
+const MEDIA_READ = 'media:read';
+/**
+ * Query keys for the media Insights caches.
+ *
+ * Workspace-scoped for the same reason as every other media key: the workspace
+ * only reaches the server as an ambient header, which is never sent on a cache
+ * hit — so without the id in the key, switching workspaces would serve the
+ * previous one's numbers and never refetch.
+ */
+export const mediaInsightsKeys = {
+    all: (workspaceId) => ['media-insights', workspaceId],
+    storage: (workspaceId) => ['media-insights', workspaceId, 'storage'],
+    uploads: (workspaceId, days) => ['media-insights', workspaceId, 'uploads', days],
+    alt: (workspaceId) => ['media-insights', workspaceId, 'alt']
+};
+/**
+ * Loads assets and bytes per media kind.
+ *
+ * Both the Overview storage tile and the full storage widget call this; one
+ * query key means one request serves both while each keeps its own state.
+ */
+export function useMediaStorage() {
+    const workspace = useCurrentWorkspace();
+    const canRead = useHasPermission(MEDIA_READ);
+    return useQuery({
+        queryKey: mediaInsightsKeys.storage(workspace.id),
+        queryFn: () => httpMediaInsightsGateway.storage(),
+        staleTime: STALE_TIME.Standard,
+        // One retry, not TanStack's default three. A widget that cannot load
+        // must SAY so, and three attempts with exponential backoff leave it
+        // sitting on a skeleton for about seven seconds first — on a page whose
+        // whole premise is that one failing card degrades alone, that reads as
+        // a hang rather than a failure. One retry still covers a transient blip.
+        retry: 1,
+        enabled: canRead
+    });
+}
+/** Loads assets uploaded per time bucket across the selected range. */
+export function useMediaUploads() {
+    const workspace = useCurrentWorkspace();
+    const { days } = useInsightsRange();
+    const canRead = useHasPermission(MEDIA_READ);
+    return useQuery({
+        queryKey: mediaInsightsKeys.uploads(workspace.id, days),
+        queryFn: () => httpMediaInsightsGateway.uploads(days),
+        staleTime: STALE_TIME.Standard,
+        // One retry, not TanStack's default three. A widget that cannot load
+        // must SAY so, and three attempts with exponential backoff leave it
+        // sitting on a skeleton for about seven seconds first — on a page whose
+        // whole premise is that one failing card degrades alone, that reads as
+        // a hang rather than a failure. One retry still covers a transient blip.
+        retry: 1,
+        enabled: canRead
+    });
+}
+/**
+ * Loads alt-text coverage across the workspace's images.
+ *
+ * Takes no range: accessibility debt is a standing total, not something that
+ * happened in the last 30 days, and windowing it would make the number shrink
+ * whenever someone narrowed the range.
+ */
+export function useMediaAltCoverage() {
+    const workspace = useCurrentWorkspace();
+    const canRead = useHasPermission(MEDIA_READ);
+    return useQuery({
+        queryKey: mediaInsightsKeys.alt(workspace.id),
+        queryFn: () => httpMediaInsightsGateway.altCoverage(),
+        staleTime: STALE_TIME.Standard,
+        // One retry, not TanStack's default three. A widget that cannot load
+        // must SAY so, and three attempts with exponential backoff leave it
+        // sitting on a skeleton for about seven seconds first — on a page whose
+        // whole premise is that one failing card degrades alone, that reads as
+        // a hang rather than a failure. One retry still covers a transient blip.
+        retry: 1,
+        enabled: canRead
+    });
+}