@orthacms/media-admin 0.0.0-reserve.0

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

@@ -0,0 +1,99 @@
+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, Progress } from '@orthacms/design-system';
+import { UploadCloud, X } from 'lucide-react';
+import { UPLOAD_STATUS } from '../../constants';
+import { MediaUploadRow } from './MediaUploadRow';
+/** Intl descriptors for {@link MediaUploadBanner}, co-located. */
+const messages = defineMessages({
+    region: { id: 'media.uploadBanner.region', defaultMessage: 'Uploads' },
+    uploading: {
+        id: 'media.uploadBanner.uploading',
+        defaultMessage: 'Uploading {done} of {total} · {percent}%'
+    },
+    complete: {
+        id: 'media.uploadBanner.complete',
+        defaultMessage: '{count, plural, one {# file uploaded} other {# files uploaded}}'
+    },
+    someFailed: {
+        id: 'media.uploadBanner.someFailed',
+        defaultMessage: '{done, plural, one {# file uploaded} other {# files uploaded}}, {failed} failed'
+    },
+    allFailed: {
+        id: 'media.uploadBanner.allFailed',
+        defaultMessage: '{failed, plural, one {# upload failed} other {# uploads failed}}'
+    },
+    overall: {
+        id: 'media.uploadBanner.overall',
+        defaultMessage: 'Overall upload progress'
+    },
+    dismiss: { id: 'media.uploadBanner.dismiss', defaultMessage: 'Dismiss' },
+    /** Announced when one file in a batch fails — the row itself is silent. */
+    failureAnnouncement: {
+        id: 'media.uploadBanner.failureAnnouncement',
+        defaultMessage: '{name} failed to upload. {reason}'
+    }
+});
+/**
+ * The upload progress banner — the batch headline ("Uploading 3 of 5 · 47%"), an
+ * overall size-weighted bar while anything is running, and one
+ * {@link MediaUploadRow} per file. It sits above the browser rather than inside
+ * the upload dialog, so the dialog can close on submit and the user keeps
+ * browsing (and can queue more) while bytes move.
+ *
+ * `role="status"` sits on the **headline alone**, not the whole banner: a polite
+ * live region re-announces its entire contents on every change, so wrapping the
+ * file list would read all N rows aloud on each progress tick. Scoped to the
+ * headline, a screen-reader user hears "Uploading 3 of 5 · 47%" and then the
+ * completion, while per-file detail stays available to read on demand.
+ *
+ * Renders nothing when the queue is empty.
+ */
+export function MediaUploadBanner({ items, summary, onRetry, onCancel, onDismiss }) {
+    const intl = useIntl();
+    // Failures are announced from their own region. The headline's counts move
+    // when a file fails, but "3 of 5" never says *which* file or why — and the
+    // rows carrying that sentence sit outside the live region on purpose (a
+    // polite region over the list would re-read all N rows on every progress
+    // tick). One line per newly-failed file is the middle ground.
+    const announcedRef = useRef(new Set());
+    const [failureNotice, setFailureNotice] = useState('');
+    useEffect(() => {
+        const announced = announcedRef.current;
+        const fresh = items.filter((item) => item.status === UPLOAD_STATUS.Failed && !announced.has(item.id));
+        // A retry can fail again, so a row leaving `Failed` becomes announceable
+        // once more.
+        for (const item of items) {
+            if (item.status !== UPLOAD_STATUS.Failed)
+                announced.delete(item.id);
+        }
+        if (fresh.length === 0)
+            return;
+        for (const item of fresh)
+            announced.add(item.id);
+        setFailureNotice(fresh
+            .map((item) => intl.formatMessage(messages.failureAnnouncement, {
+            name: item.name,
+            reason: item.error ?? ''
+        }))
+            .join(' '));
+    }, [items, intl]);
+    if (items.length === 0)
+        return null;
+    const headline = summary.active
+        ? intl.formatMessage(messages.uploading, {
+            done: summary.done,
+            total: summary.total,
+            percent: summary.percent
+        })
+        : summary.failed > 0 && summary.done > 0
+            ? intl.formatMessage(messages.someFailed, {
+                done: summary.done,
+                failed: summary.failed
+            })
+            : summary.failed > 0
+                ? intl.formatMessage(messages.allFailed, { failed: summary.failed })
+                : intl.formatMessage(messages.complete, { count: summary.done });
+    return (_jsxs("section", { "aria-label": intl.formatMessage(messages.region), className: "mb-4 rounded-xl border bg-muted/40 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UploadCloud, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("p", { className: "min-w-0 flex-1 text-sm font-medium", role: "status", children: headline }), summary.active ? null : (_jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.dismiss), onClick: onDismiss, children: _jsx(X, { "aria-hidden": true }) }))] }), summary.active ? (_jsx(Progress, { value: summary.percent, className: "mt-2 h-1.5", "aria-label": intl.formatMessage(messages.overall) })) : null, _jsx("p", { className: "sr-only", role: "status", children: failureNotice }), _jsx("ul", { className: "mt-1 max-h-48 divide-y overflow-auto", children: items.map((item) => (_jsx(MediaUploadRow, { item: item, onRetry: onRetry, onCancel: onCancel }, item.id))) })] }));
+}

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

@@ -0,0 +1,7 @@
+/**
+ * Assets added per time bucket. Columns rather than a line: uploads are discrete
+ * tallies, and a line between two weekly counts would imply values that were
+ * never measured.
+ */
+export declare function MediaUploadsWidget(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaUploadsWidget/index.tsx"],"names":[],"mappings":"AAuDA;;;;GAIG;AACH,wBAAgB,kBAAkB,gCAqCjC"}

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { ColumnTrend, WidgetCard } from '@orthacms/insights-admin';
+import { useMediaUploads } from '../../hooks/useMediaInsights';
+/** Intl descriptors for the uploads widget, co-located here. */
+const messages = defineMessages({
+    title: {
+        id: 'media.insights.uploads.title',
+        defaultMessage: 'Uploads'
+    },
+    descriptionDay: {
+        id: 'media.insights.uploads.descriptionDay',
+        defaultMessage: 'Assets added per day'
+    },
+    descriptionWeek: {
+        id: 'media.insights.uploads.descriptionWeek',
+        defaultMessage: 'Assets added per week'
+    },
+    descriptionMonth: {
+        id: 'media.insights.uploads.descriptionMonth',
+        defaultMessage: 'Assets added per month'
+    },
+    tip: {
+        id: 'media.insights.uploads.tip',
+        defaultMessage: '{period} — {count, number} uploads'
+    },
+    ariaLabel: {
+        id: 'media.insights.uploads.ariaLabel',
+        defaultMessage: 'Assets uploaded over time, {total, number} across {points, number} periods.'
+    },
+    footer: {
+        id: 'media.insights.uploads.footer',
+        defaultMessage: '{total, number} uploaded this period.'
+    }
+});
+/** Description per bucket width, so the subtitle matches what is plotted. */
+const DESCRIPTION = {
+    day: messages.descriptionDay,
+    week: messages.descriptionWeek,
+    month: messages.descriptionMonth
+};
+/** Date format per bucket width — a month bucket labelled `12 Mar` reads wrong. */
+const LABEL_FORMAT = {
+    day: { day: 'numeric', month: 'short' },
+    week: { day: 'numeric', month: 'short' },
+    month: { month: 'short', year: '2-digit' }
+};
+/**
+ * Assets added per time bucket. Columns rather than a line: uploads are discrete
+ * tallies, and a line between two weekly counts would imply values that were
+ * never measured.
+ */
+export function MediaUploadsWidget() {
+    const intl = useIntl();
+    const { data, isPending, isError } = useMediaUploads();
+    const granularity = data?.granularity ?? 'week';
+    const points = (data?.points ?? []).map((point) => ({
+        label: intl.formatDate(point.bucket, LABEL_FORMAT[granularity]),
+        value: point.value
+    }));
+    return (_jsx(WidgetCard, { title: intl.formatMessage(messages.title), description: intl.formatMessage(DESCRIPTION[granularity]), footer: intl.formatMessage(messages.footer, {
+            total: data?.total ?? 0
+        }), isPending: isPending, isError: isError, isEmpty: points.length === 0, skeletonRows: 5, children: _jsx(ColumnTrend, { points: points, ariaLabel: intl.formatMessage(messages.ariaLabel, {
+                total: data?.total ?? 0,
+                points: points.length
+            }), describe: (point) => intl.formatMessage(messages.tip, {
+                period: point.label,
+                count: point.value
+            }) }) }));
+}

package/dist/lib/components/MoveAssetsDialog/DestinationOption/index.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+/**
+ * One selectable destination row inside {@link MoveAssetsDialog}'s radio list —
+ * an indented label wrapping a radio, a folder icon, and the name. The assets'
+ * current folder renders dimmed to signal it's a no-op target.
+ */
+export declare function DestinationOption({ value, depth, icon, label, current }: {
+    /** Folder id (or root id) this option selects. */
+    value: string;
+    /** Indent level below the root. */
+    depth: number;
+    /** Leading glyph (home for root, folder otherwise). */
+    icon: ReactNode;
+    /** Folder name. */
+    label: string;
+    /** Whether this is the assets' current folder (dimmed, no-op). */
+    current: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/MoveAssetsDialog/DestinationOption/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MoveAssetsDialog/DestinationOption/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACV,EAAE;IACC,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAC;IAChB,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,OAAO,EAAE,OAAO,CAAC;CACpB,+BAeA"}

package/dist/lib/components/MoveAssetsDialog/DestinationOption/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, RadioGroupItem, cn } from '@orthacms/design-system';
+/**
+ * One selectable destination row inside {@link MoveAssetsDialog}'s radio list —
+ * an indented label wrapping a radio, a folder icon, and the name. The assets'
+ * current folder renders dimmed to signal it's a no-op target.
+ */
+export function DestinationOption({ value, depth, icon, label, current }) {
+    return (_jsxs(Label, { htmlFor: `media-move-${value}`, className: cn('flex cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-sm font-normal hover:bg-accent', current && 'opacity-60'), style: { paddingLeft: `${depth * 16 + 8}px` }, children: [_jsx(RadioGroupItem, { id: `media-move-${value}`, value: value }), icon, _jsx("span", { className: "truncate", children: label })] }));
+}

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

@@ -0,0 +1,18 @@
+import type { MediaFolder } from '../../types/mediaFolder';
+/**
+ * Modal that picks a destination folder for the given assets. Offers the root
+ * ("All media") plus every folder as an indented radio list; the confirm is
+ * disabled until a destination other than the assets' current folder is chosen.
+ * The parent owns `open` and performs the move in `onMove`.
+ */
+export declare function MoveAssetsDialog({ open, onOpenChange, folders, count, currentFolderId, onMove }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    folders: MediaFolder[];
+    /** Number of assets being moved (for the description). */
+    count: number;
+    /** Folder the assets currently live in — preselected, and a no-op target. */
+    currentFolderId: string;
+    onMove: (folderId: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MoveAssetsDialog/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAiB3D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,KAAK,EACL,eAAe,EACf,MAAM,EACT,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,+BA6EA"}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, RadioGroup } from '@orthacms/design-system';
+import { Folder, Home } from 'lucide-react';
+import { ROOT_FOLDER_ID } from '../../constants';
+import { flattenFolderTree } from '../../utils/folderTree';
+import { DestinationOption } from './DestinationOption';
+/** Intl descriptors for {@link MoveAssetsDialog}, co-located. */
+const messages = defineMessages({
+    title: { id: 'media.move.title', defaultMessage: 'Move items' },
+    description: {
+        id: 'media.move.description',
+        defaultMessage: 'Choose a destination for {count, plural, one {# item} other {# items}}.'
+    },
+    root: { id: 'media.move.root', defaultMessage: 'All media' },
+    cancel: { id: 'media.move.cancel', defaultMessage: 'Cancel' },
+    move: { id: 'media.move.confirm', defaultMessage: 'Move here' }
+});
+/**
+ * Modal that picks a destination folder for the given assets. Offers the root
+ * ("All media") plus every folder as an indented radio list; the confirm is
+ * disabled until a destination other than the assets' current folder is chosen.
+ * The parent owns `open` and performs the move in `onMove`.
+ */
+export function MoveAssetsDialog({ open, onOpenChange, folders, count, currentFolderId, onMove }) {
+    const intl = useIntl();
+    const [target, setTarget] = useState(currentFolderId);
+    useEffect(() => {
+        if (open)
+            setTarget(currentFolderId);
+    }, [open, currentFolderId]);
+    const tree = flattenFolderTree(folders);
+    const submit = () => {
+        if (target === currentFolderId)
+            return;
+        onMove(target);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: intl.formatMessage(messages.title) }), _jsx(DialogDescription, { children: intl.formatMessage(messages.description, { count }) })] }), _jsxs(RadioGroup, { value: target, onValueChange: setTarget, className: "max-h-72 gap-0.5 overflow-auto rounded-lg border p-1", children: [_jsx(DestinationOption, { value: ROOT_FOLDER_ID, depth: 0, icon: _jsx(Home, { className: "size-4 text-muted-foreground", "aria-hidden": true }), label: intl.formatMessage(messages.root), current: currentFolderId === ROOT_FOLDER_ID }), tree.map(({ folder, depth }) => (_jsx(DestinationOption, { value: folder.id, depth: depth + 1, icon: _jsx(Folder, { className: "size-4 text-muted-foreground", "aria-hidden": true }), label: folder.name, current: currentFolderId === folder.id }, folder.id)))] }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { variant: "outline", onClick: () => onOpenChange(false), children: intl.formatMessage(messages.cancel) }), _jsx(Button, { onClick: submit, disabled: target === currentFolderId, children: intl.formatMessage(messages.move) })] })] }) }));
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Modal that collects a name and creates a folder in the current location. The
+ * parent owns `open` and performs the create in `onCreate`; the field seeds
+ * empty on each open and the confirm is disabled until it is non-blank.
+ */
+export declare function NewFolderDialog({ open, onOpenChange, locationLabel, onCreate }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Human name of the folder the new one lands in (e.g. "All media"). */
+    locationLabel: string;
+    onCreate: (name: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/NewFolderDialog/index.tsx"],"names":[],"mappings":"AA8BA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,wEAAwE;IACxE,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,+BA2DA"}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, InputField } from '@orthacms/design-system';
+/** Intl descriptors for {@link NewFolderDialog}, co-located. */
+const messages = defineMessages({
+    title: { id: 'media.newFolder.title', defaultMessage: 'New folder' },
+    description: {
+        id: 'media.newFolder.description',
+        defaultMessage: 'Folders help you organise assets. It will be created in {location}.'
+    },
+    label: { id: 'media.newFolder.label', defaultMessage: 'Folder name' },
+    placeholder: {
+        id: 'media.newFolder.placeholder',
+        defaultMessage: 'e.g. Campaign assets'
+    },
+    cancel: { id: 'media.newFolder.cancel', defaultMessage: 'Cancel' },
+    create: { id: 'media.newFolder.create', defaultMessage: 'Create folder' }
+});
+/**
+ * Modal that collects a name and creates a folder in the current location. The
+ * parent owns `open` and performs the create in `onCreate`; the field seeds
+ * empty on each open and the confirm is disabled until it is non-blank.
+ */
+export function NewFolderDialog({ open, onOpenChange, locationLabel, onCreate }) {
+    const intl = useIntl();
+    const [name, setName] = useState('');
+    useEffect(() => {
+        if (open)
+            setName('');
+    }, [open]);
+    const trimmed = name.trim();
+    const submit = () => {
+        if (!trimmed)
+            return;
+        onCreate(trimmed);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: intl.formatMessage(messages.title) }), _jsx(DialogDescription, { children: intl.formatMessage(messages.description, {
+                                location: locationLabel
+                            }) })] }), _jsxs("form", { onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [_jsx(InputField, { id: "media-new-folder-name", label: intl.formatMessage(messages.label), placeholder: intl.formatMessage(messages.placeholder), value: name, autoFocus: true, onChange: (event) => setName(event.target.value) }), _jsxs(DialogFooter, { className: "mt-6", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: intl.formatMessage(messages.cancel) }), _jsx(Button, { type: "submit", disabled: !trimmed, children: intl.formatMessage(messages.create) })] })] })] }) }));
+}

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

@@ -0,0 +1,13 @@
+/**
+ * A single-field rename modal reused for assets and folders. The parent supplies
+ * the current name and performs the rename in `onRename`; the field seeds from
+ * `currentName` each time it opens and the confirm is disabled while blank or
+ * unchanged. Selecting the text on open makes an in-place edit quick.
+ */
+export declare function RenameDialog({ open, onOpenChange, currentName, onRename }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    currentName: string;
+    onRename: (name: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/RenameDialog/index.tsx"],"names":[],"mappings":"AAoBA;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,+BAuDA"}

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

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, InputField } from '@orthacms/design-system';
+/** Intl descriptors for {@link RenameDialog}, co-located. */
+const messages = defineMessages({
+    title: { id: 'media.rename.title', defaultMessage: 'Rename' },
+    label: { id: 'media.rename.label', defaultMessage: 'Name' },
+    cancel: { id: 'media.rename.cancel', defaultMessage: 'Cancel' },
+    save: { id: 'media.rename.save', defaultMessage: 'Save' }
+});
+/**
+ * A single-field rename modal reused for assets and folders. The parent supplies
+ * the current name and performs the rename in `onRename`; the field seeds from
+ * `currentName` each time it opens and the confirm is disabled while blank or
+ * unchanged. Selecting the text on open makes an in-place edit quick.
+ */
+export function RenameDialog({ open, onOpenChange, currentName, onRename }) {
+    const intl = useIntl();
+    const [name, setName] = useState(currentName);
+    useEffect(() => {
+        if (open)
+            setName(currentName);
+    }, [open, currentName]);
+    const trimmed = name.trim();
+    const changed = trimmed.length > 0 && trimmed !== currentName;
+    const submit = () => {
+        if (!changed)
+            return;
+        onRename(trimmed);
+        onOpenChange(false);
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: intl.formatMessage(messages.title) }) }), _jsxs("form", { onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [_jsx(InputField, { id: "media-rename-name", label: intl.formatMessage(messages.label), value: name, autoFocus: true, onFocus: (event) => event.target.select(), onChange: (event) => setName(event.target.value) }), _jsxs(DialogFooter, { className: "mt-6", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: intl.formatMessage(messages.cancel) }), _jsx(Button, { type: "submit", disabled: !changed, children: intl.formatMessage(messages.save) })] })] })] }) }));
+}

package/dist/lib/components/UploadDialog/StagedFileRow/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * One staged (not yet uploaded) file in the upload dialog: a real thumbnail for
+ * an image, a kind glyph for anything else, the name + size, a remove button,
+ * and — when the caller collects it — an **Alt text** input for an image.
+ *
+ * Alt is asked for *here* rather than left to a later edit because this is the
+ * one moment the author is looking at the picture. The field is optional and
+ * never blocks the upload: an author who skips it lands where they landed
+ * before, and can still describe the asset from its detail drawer.
+ *
+ * The thumbnail is an **object URL** over the local `File` — no upload, no
+ * network. It is revoked when the row unmounts or the file changes; skipping
+ * that leaks the whole blob for the tab's lifetime, which matters when someone
+ * stages a few hundred megabytes of video and then removes it.
+ */
+export declare function StagedFileRow({ file, alt, collectAlt, onAltChange, onRemove }: {
+    file: File;
+    /** Current alt text for this staged file. */
+    alt?: string;
+    /** Renders the alt input (images only); off for callers that drop it. */
+    collectAlt?: boolean;
+    onAltChange?: (alt: string) => void;
+    onRemove: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/UploadDialog/StagedFileRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/UploadDialog/StagedFileRow/index.tsx"],"names":[],"mappings":"AAiDA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,GAAQ,EACR,UAAkB,EAClB,WAAW,EACX,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,IAAI,CAAC;IACX,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,+BAyEA"}

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, InputField } from '@orthacms/design-system';
+import { FileText, Film, Music, Package, X } from 'lucide-react';
+import { formatBytes } from '../../../utils/formatBytes';
+/** Intl descriptors for {@link StagedFileRow}, co-located. */
+const messages = defineMessages({
+    remove: { id: 'media.upload.removeFile', defaultMessage: 'Remove {name}' },
+    altLabel: { id: 'media.upload.altLabel', defaultMessage: 'Alt text' },
+    /**
+     * The accessible name, which repeats the file so a run of staged rows isn't
+     * five identically-named inputs. It **contains** the visible label, which is
+     * what WCAG 2.5.3 (Label in Name) asks for.
+     */
+    altLabelFor: {
+        id: 'media.upload.altLabelFor',
+        defaultMessage: 'Alt text for {name}'
+    },
+    altPlaceholder: {
+        id: 'media.upload.altPlaceholder',
+        defaultMessage: 'Describe this image'
+    },
+    altHint: {
+        id: 'media.upload.altHint',
+        defaultMessage: 'Optional. Leave blank only if the image is decorative — you can add it later from the asset’s details.'
+    }
+});
+/**
+ * The glyph shown for a non-image file, chosen from its MIME type. Deliberately
+ * a **local** coarse mapping and not a shared `kindFromMime`: the server owns
+ * the real classification (it's what ends up on the row), and this only has to
+ * pick an icon for a file that hasn't been uploaded yet.
+ */
+function glyphFor(type) {
+    if (type.startsWith('video/'))
+        return Film;
+    if (type.startsWith('audio/'))
+        return Music;
+    if (type === 'application/zip' ||
+        type === 'application/x-tar' ||
+        type === 'application/gzip') {
+        return Package;
+    }
+    return FileText;
+}
+/**
+ * One staged (not yet uploaded) file in the upload dialog: a real thumbnail for
+ * an image, a kind glyph for anything else, the name + size, a remove button,
+ * and — when the caller collects it — an **Alt text** input for an image.
+ *
+ * Alt is asked for *here* rather than left to a later edit because this is the
+ * one moment the author is looking at the picture. The field is optional and
+ * never blocks the upload: an author who skips it lands where they landed
+ * before, and can still describe the asset from its detail drawer.
+ *
+ * The thumbnail is an **object URL** over the local `File` — no upload, no
+ * network. It is revoked when the row unmounts or the file changes; skipping
+ * that leaks the whole blob for the tab's lifetime, which matters when someone
+ * stages a few hundred megabytes of video and then removes it.
+ */
+export function StagedFileRow({ file, alt = '', collectAlt = false, onAltChange, onRemove }) {
+    const intl = useIntl();
+    const altId = useId();
+    const [previewUrl, setPreviewUrl] = useState(null);
+    const isImage = file.type.startsWith('image/');
+    useEffect(() => {
+        if (!isImage) {
+            setPreviewUrl(null);
+            return;
+        }
+        const url = URL.createObjectURL(file);
+        setPreviewUrl(url);
+        return () => URL.revokeObjectURL(url);
+    }, [file, isImage]);
+    const Glyph = glyphFor(file.type);
+    return (_jsxs("li", { className: "flex flex-col gap-2 rounded-lg border bg-background px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: previewUrl ? (_jsx("img", { src: previewUrl, alt: "", className: "size-full object-cover" })) : (_jsx(Glyph, { className: "size-4 text-muted-foreground", "aria-hidden": true })) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: file.name }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatBytes(file.size) }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.remove, {
+                            name: file.name
+                        }), onClick: onRemove, children: _jsx(X, { "aria-hidden": true }) })] }), collectAlt && isImage ? (_jsx(InputField, { id: `staged-alt-${altId}`, label: intl.formatMessage(messages.altLabel), "aria-label": intl.formatMessage(messages.altLabelFor, {
+                    name: file.name
+                }), description: intl.formatMessage(messages.altHint), placeholder: intl.formatMessage(messages.altPlaceholder), value: alt, maxLength: 1000, onChange: (event) => onAltChange?.(event.target.value), fieldClassName: "gap-1", className: "h-8 text-sm" })) : null] }));
+}

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

@@ -0,0 +1,50 @@
+import type { StagedUpload } from '../../infrastructure/mediaGateway';
+/**
+ * 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 declare function UploadDialog({ open, onOpenChange, locationLabel, description, hint, confirmLabel, accept, multiple, initialFiles, collectAlt, onUpload }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Human name of the destination folder (e.g. "All media"). */
+    locationLabel: string;
+    /** Overrides the default "Files upload to {location}." sentence. */
+    description?: string;
+    /** Overrides the default size/type hint under the browse button. */
+    hint?: string;
+    /**
+     * Overrides the confirm button's "Upload {n} files". A media field stages the
+     * files (they upload with the record), so there the button attaches.
+     */
+    confirmLabel?: string;
+    /** `accept` attribute for the file input (best-effort; the server enforces). */
+    accept?: string;
+    /** False stages exactly one file — a later pick replaces it. */
+    multiple?: boolean;
+    /** Files to stage as the dialog opens (e.g. dropped onto a media field). */
+    initialFiles?: File[];
+    /**
+     * Offers an **Alt text** input on each staged image, sent with the upload.
+     *
+     * Off by default, and deliberately: only the library's queue forwards the
+     * description to the API. A caller that would drop it (a media field, whose
+     * files upload later with the record) must not ask for it — prompting for a
+     * description and then discarding it is worse than never asking.
+     */
+    collectAlt?: boolean;
+    onUpload: (uploads: StagedUpload[]) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/UploadDialog/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAmDtE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,QAAe,EACf,YAAuB,EACvB,UAAkB,EAClB,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,+DAA+D;IAC/D,aAAa,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oEAAoE;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;CAC/C,+BAmJA"}