@orthacms/media-admin 0.11.0 → 0.13.0

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defineMessages, useIntl } from 'react-intl';
-import { Button, DensityProvider, InputGroup, InputGroupAddon, InputGroupInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@orthacms/design-system';
-import { FolderPlus, Search, UploadCloud } from 'lucide-react';
-import { KIND_FILTER_ALL, MEDIA_KIND, MEDIA_SORT } from '../../constants';
+import { DensityProvider, InputGroup, InputGroupAddon, InputGroupInput, SegmentedControl, SegmentedControlItem, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, cn } from '@orthacms/design-system';
+import { LayoutGrid, List, Search } from 'lucide-react';
+import { KIND_FILTER_ALL, MEDIA_KIND, MEDIA_SORT, MEDIA_VIEW } from '../../constants';
 /** Intl descriptors for {@link MediaToolbar}, co-located. */
 const messages = defineMessages({
     search: { id: 'media.toolbar.search', defaultMessage: 'Search assets' },
@@ -14,9 +14,9 @@ const messages = defineMessages({
         id: 'media.toolbar.kindLabel',
         defaultMessage: 'Filter by type'
     },
-    kindAll: { id: 'media.toolbar.kindAll', defaultMessage: 'All types' },
+    kindAll: { id: 'media.toolbar.kindAll', defaultMessage: 'All' },
     kindImage: { id: 'media.toolbar.kindImage', defaultMessage: 'Images' },
-    kindVideo: { id: 'media.toolbar.kindVideo', defaultMessage: 'Videos' },
+    kindVideo: { id: 'media.toolbar.kindVideo', defaultMessage: 'Video' },
     kindAudio: { id: 'media.toolbar.kindAudio', defaultMessage: 'Audio' },
     kindDocument: {
         id: 'media.toolbar.kindDocument',
@@ -48,15 +48,39 @@ const messages = defineMessages({
         id: 'media.toolbar.sortSmallest',
         defaultMessage: 'Smallest'
     },
-    newFolder: { id: 'media.toolbar.newFolder', defaultMessage: 'New folder' },
-    upload: { id: 'media.toolbar.upload', defaultMessage: 'Upload' }
+    viewLabel: { id: 'media.toolbar.viewLabel', defaultMessage: 'View' },
+    viewGrid: { id: 'media.toolbar.viewGrid', defaultMessage: 'Grid view' },
+    viewList: { id: 'media.toolbar.viewList', defaultMessage: 'List view' }
 });
+/** The type chips, in reading order — "All" first, the kinds after it. */
+const KIND_CHIPS = [
+    { value: KIND_FILTER_ALL, label: 'kindAll' },
+    { value: MEDIA_KIND.Image, label: 'kindImage' },
+    { value: MEDIA_KIND.Video, label: 'kindVideo' },
+    { value: MEDIA_KIND.Audio, label: 'kindAudio' },
+    { value: MEDIA_KIND.Document, label: 'kindDocument' },
+    { value: MEDIA_KIND.Archive, label: 'kindArchive' }
+];
 /**
- * The Media Library's control bar — a search box, a type filter, a sort select,
- * and (permission-gated) New folder + Upload actions. Fully controlled: every
- * value lives in the page's store and changes dispatch straight back up.
+ * The Media Library's control bar — the **type chips** (All · Images · Video ·
+ * Audio · Documents · Archives, one pressed at a time; the same pill the
+ * records table's status chips are) on the left, then a search box, a sort
+ * select and the Grid / List switch on the right. Fully controlled: every value
+ * lives in the page and changes dispatch straight back up. New folder and
+ * Upload are the page's top-bar actions, not this bar's.
  */
-export function MediaToolbar({ search, onSearchChange, kindFilter, onKindFilterChange, sort, onSortChange, onNewFolder, onUpload, canCreate }) {
+export function MediaToolbar({ search, onSearchChange, kindFilter, onKindFilterChange, sort, onSortChange, view, onViewChange }) {
     const intl = useIntl();
-    return (_jsx(DensityProvider, { density: "compact", children: _jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: [_jsxs(InputGroup, { className: "w-full shadow-none sm:w-auto sm:max-w-[280px] sm:flex-1", children: [_jsx(InputGroupAddon, { children: _jsx(Search, {}) }), _jsx(InputGroupInput, { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), "aria-label": intl.formatMessage(messages.search), placeholder: intl.formatMessage(messages.searchPlaceholder) })] }), _jsxs(Select, { value: kindFilter, onValueChange: (value) => onKindFilterChange(value), children: [_jsx(SelectTrigger, { className: "w-[150px] shadow-none", "aria-label": intl.formatMessage(messages.kindLabel), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: KIND_FILTER_ALL, children: intl.formatMessage(messages.kindAll) }), _jsx(SelectItem, { value: MEDIA_KIND.Image, children: intl.formatMessage(messages.kindImage) }), _jsx(SelectItem, { value: MEDIA_KIND.Video, children: intl.formatMessage(messages.kindVideo) }), _jsx(SelectItem, { value: MEDIA_KIND.Audio, children: intl.formatMessage(messages.kindAudio) }), _jsx(SelectItem, { value: MEDIA_KIND.Document, children: intl.formatMessage(messages.kindDocument) }), _jsx(SelectItem, { value: MEDIA_KIND.Archive, children: intl.formatMessage(messages.kindArchive) })] })] }), _jsxs(Select, { value: sort, onValueChange: (value) => onSortChange(value), children: [_jsx(SelectTrigger, { className: "w-[150px] shadow-none", "aria-label": intl.formatMessage(messages.sortLabel), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: MEDIA_SORT.Newest, children: intl.formatMessage(messages.sortNewest) }), _jsx(SelectItem, { value: MEDIA_SORT.Oldest, children: intl.formatMessage(messages.sortOldest) }), _jsx(SelectItem, { value: MEDIA_SORT.NameAsc, children: intl.formatMessage(messages.sortNameAsc) }), _jsx(SelectItem, { value: MEDIA_SORT.NameDesc, children: intl.formatMessage(messages.sortNameDesc) }), _jsx(SelectItem, { value: MEDIA_SORT.Largest, children: intl.formatMessage(messages.sortLargest) }), _jsx(SelectItem, { value: MEDIA_SORT.Smallest, children: intl.formatMessage(messages.sortSmallest) })] })] }), _jsx("div", { className: "ml-auto flex items-center gap-2 sm:gap-3", children: canCreate ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", className: "shadow-none", onClick: onNewFolder, children: [_jsx(FolderPlus, { "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: intl.formatMessage(messages.newFolder) })] }), _jsxs(Button, { onClick: onUpload, children: [_jsx(UploadCloud, { "aria-hidden": true }), intl.formatMessage(messages.upload)] })] })) : null })] }) }));
+    return (_jsx(DensityProvider, { density: "compact", children: _jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2", children: [_jsx("div", { role: "group", "aria-label": intl.formatMessage(messages.kindLabel), className: "flex flex-wrap items-center gap-1.5", children: KIND_CHIPS.map(({ value, label }) => {
+                        const on = kindFilter === value;
+                        return (_jsx("button", { type: "button", "aria-pressed": on, onClick: () => onKindFilterChange(value), className: cn('inline-flex h-7 items-center rounded-full border px-2.5 text-xs font-medium outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring', on
+                                ? 'border-foreground bg-foreground text-background'
+                                : 'bg-background text-foreground hover:bg-muted'), children: intl.formatMessage(messages[label]) }, value));
+                    }) }), _jsxs("div", { className: "flex w-full flex-wrap items-center gap-2 sm:ml-auto sm:w-auto", children: [_jsxs(InputGroup, { className: "w-full shadow-none sm:w-[200px]", children: [_jsx(InputGroupAddon, { children: _jsx(Search, {}) }), _jsx(InputGroupInput, { type: "search", value: search, onChange: (event) => onSearchChange(event.target.value), "aria-label": intl.formatMessage(messages.search), placeholder: intl.formatMessage(messages.searchPlaceholder) })] }), _jsxs(Select, { value: sort, onValueChange: (value) => onSortChange(value), children: [_jsx(SelectTrigger, { className: "w-[132px] shadow-none", "aria-label": intl.formatMessage(messages.sortLabel), children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: MEDIA_SORT.Newest, children: intl.formatMessage(messages.sortNewest) }), _jsx(SelectItem, { value: MEDIA_SORT.Oldest, children: intl.formatMessage(messages.sortOldest) }), _jsx(SelectItem, { value: MEDIA_SORT.NameAsc, children: intl.formatMessage(messages.sortNameAsc) }), _jsx(SelectItem, { value: MEDIA_SORT.NameDesc, children: intl.formatMessage(messages.sortNameDesc) }), _jsx(SelectItem, { value: MEDIA_SORT.Largest, children: intl.formatMessage(messages.sortLargest) }), _jsx(SelectItem, { value: MEDIA_SORT.Smallest, children: intl.formatMessage(messages.sortSmallest) })] })] }), _jsxs(SegmentedControl, { variant: "muted", value: view, 
+                            // A single toggle group reports '' when its pressed
+                            // item is pressed again; a view switch can't be off.
+                            onValueChange: (value) => {
+                                if (value)
+                                    onViewChange(value);
+                            }, "aria-label": intl.formatMessage(messages.viewLabel), children: [_jsx(SegmentedControlItem, { value: MEDIA_VIEW.Grid, "aria-label": intl.formatMessage(messages.viewGrid), className: "px-2", children: _jsx(LayoutGrid, { className: "size-4", "aria-hidden": true }) }), _jsx(SegmentedControlItem, { value: MEDIA_VIEW.List, "aria-label": intl.formatMessage(messages.viewList), className: "px-2", children: _jsx(List, { className: "size-4", "aria-hidden": true }) })] })] })] }) }));
 }

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { MediaFolder } from '../../types/mediaFolder';
 /**
  * The page top bar over the Media Library — the teal `Image` tile (matching the
@@ -11,10 +12,15 @@ import type { MediaFolder } from '../../types/mediaFolder';
  * the store's `breadcrumbs` and each one dispatches `onNavigate` rather than
  * linking. They are still `BreadcrumbLink`s over real `<button>`s — a control
  * that changes view without changing location is a button, not a link.
+ *
+ * `actions` (New folder, Upload) sit at the bar's right end, where every other
+ * admin page keeps its page-level actions.
  */
-export declare function MediaTopBar({ breadcrumbs, onNavigate }: {
+export declare function MediaTopBar({ breadcrumbs, onNavigate, actions }: {
     /** Ancestor chain of the open folder, root-first (excludes the root itself). */
     breadcrumbs: MediaFolder[];
     onNavigate: (folderId: string) => void;
+    /** Page-level actions, drawn at the bar's right end. */
+    actions?: ReactNode;
 }): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaTopBar/index.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQ3D;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EACxB,WAAW,EACX,UAAU,EACb,EAAE;IACC,gFAAgF;IAChF,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,+BA4CA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaTopBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAevC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQ3D;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EACxB,WAAW,EACX,UAAU,EACV,OAAO,EACV,EAAE;IACC,gFAAgF;IAChF,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,wDAAwD;IACxD,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB,+BA6CA"}

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defineMessages, useIntl } from 'react-intl';
 import { Image } from 'lucide-react';
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, TopBar, TopBarIcon } from '@orthacms/design-system';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, TopBar, TopBarActions, TopBarIcon } from '@orthacms/design-system';
 import { ROOT_FOLDER_ID } from '../../constants';
 /** Intl descriptors for {@link MediaTopBar}, co-located. */
 const messages = defineMessages({
@@ -20,8 +20,11 @@ const messages = defineMessages({
  * the store's `breadcrumbs` and each one dispatches `onNavigate` rather than
  * linking. They are still `BreadcrumbLink`s over real `<button>`s — a control
  * that changes view without changing location is a button, not a link.
+ *
+ * `actions` (New folder, Upload) sit at the bar's right end, where every other
+ * admin page keeps its page-level actions.
  */
-export function MediaTopBar({ breadcrumbs, onNavigate }) {
+export function MediaTopBar({ breadcrumbs, onNavigate, actions }) {
     const intl = useIntl();
     const crumbs = [
         { id: ROOT_FOLDER_ID, name: intl.formatMessage(messages.root) },
@@ -31,5 +34,5 @@ export function MediaTopBar({ breadcrumbs, onNavigate }) {
     return (_jsxs(TopBar, { children: [_jsx(TopBarIcon, { className: "bg-teal-soft text-teal-soft-foreground", children: _jsx(Image, {}) }), _jsx(Breadcrumb, { "aria-label": intl.formatMessage(messages.nav), children: _jsx(BreadcrumbList, { className: "flex-nowrap font-medium", children: crumbs.map((crumb, index) => [
                         index > 0 ? (_jsx(BreadcrumbSeparator, {}, `${crumb.id}-sep`)) : null,
                         _jsx(BreadcrumbItem, { className: "min-w-0 whitespace-nowrap", children: index === last ? (_jsx(BreadcrumbPage, { className: "flex min-w-0 items-center font-medium", children: crumb.name })) : (_jsx(BreadcrumbLink, { asChild: true, children: _jsx("button", { type: "button", onClick: () => onNavigate(crumb.id), children: crumb.name }) })) }, crumb.id)
-                    ]) }) })] }));
+                    ]) }) }), actions ? _jsx(TopBarActions, { children: actions }) : null] }));
 }

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

@@ -1,10 +1,12 @@
 import type { UploadItem, UploadSummary } from '../../types/upload';
 /**
- * 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.
+ * The upload tray — a small card pinned to the **bottom-right** of the window
+ * with the batch headline ("Uploading 3 of 5 · 47%"), an overall size-weighted
+ * bar while anything is running, and one {@link MediaUploadRow} per file (the
+ * chevron folds the list away, leaving the headline). It floats outside the
+ * upload dialog and over the browser rather than pushing the grid down, so the
+ * dialog can close on submit and the user keeps browsing, selecting and
+ * queueing 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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaUploadBanner/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAqCpE;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB,sCAwGA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaUploadBanner/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAyCpE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,EAAE,aAAa,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;CACzB,sCA8HA"}

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

@@ -1,8 +1,8 @@
 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 { Button, Progress, cn } from '@orthacms/design-system';
+import { ChevronDown, UploadCloud, X } from 'lucide-react';
 import { UPLOAD_STATUS } from '../../constants';
 import { MediaUploadRow } from './MediaUploadRow';
 /** Intl descriptors for {@link MediaUploadBanner}, co-located. */
@@ -29,6 +29,10 @@ const messages = defineMessages({
         defaultMessage: 'Overall upload progress'
     },
     dismiss: { id: 'media.uploadBanner.dismiss', defaultMessage: 'Dismiss' },
+    collapse: {
+        id: 'media.uploadBanner.collapse',
+        defaultMessage: 'Show the files'
+    },
     /** Announced when one file in a batch fails — the row itself is silent. */
     failureAnnouncement: {
         id: 'media.uploadBanner.failureAnnouncement',
@@ -36,11 +40,13 @@ const messages = defineMessages({
     }
 });
 /**
- * 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.
+ * The upload tray — a small card pinned to the **bottom-right** of the window
+ * with the batch headline ("Uploading 3 of 5 · 47%"), an overall size-weighted
+ * bar while anything is running, and one {@link MediaUploadRow} per file (the
+ * chevron folds the list away, leaving the headline). It floats outside the
+ * upload dialog and over the browser rather than pushing the grid down, so the
+ * dialog can close on submit and the user keeps browsing, selecting and
+ * queueing 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
@@ -52,6 +58,7 @@ const messages = defineMessages({
  */
 export function MediaUploadBanner({ items, summary, onRetry, onCancel, onDismiss }) {
     const intl = useIntl();
+    const [open, setOpen] = useState(true);
     // 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
@@ -95,5 +102,5 @@ export function MediaUploadBanner({ items, summary, onRetry, onCancel, onDismiss
             : 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))) })] }));
+    return (_jsxs("section", { "aria-label": intl.formatMessage(messages.region), className: "fixed bottom-4 right-4 z-30 w-80 max-w-[calc(100vw-2rem)] rounded-xl border bg-popover px-4 py-3 text-popover-foreground shadow-lg", 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 }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.collapse), "aria-expanded": open, onClick: () => setOpen((value) => !value), children: _jsx(ChevronDown, { "aria-hidden": true, className: cn('transition-transform duration-(--ds-duration-base) motion-reduce:transition-none', !open && 'rotate-180') }) }), 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: cn('mt-1 max-h-48 divide-y overflow-auto', !open && 'hidden'), children: items.map((item) => (_jsx(MediaUploadRow, { item: item, onRetry: onRetry, onCancel: onCancel }, item.id))) })] }));
 }

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

@@ -92,4 +92,17 @@ export declare const MEDIA_FOLDERS_PANEL: {
     readonly maxViewportRatio: 0.2;
     readonly cssVar: "--media-folders-width";
 };
+/**
+ * How the library draws the open folder's files: tiles, or the design-system
+ * table. Remembered per browser under {@link MEDIA_VIEW_STORAGE_KEY} — a
+ * reading preference, not shared state.
+ */
+export declare const MEDIA_VIEW: {
+    readonly Grid: "grid";
+    readonly List: "list";
+};
+/** One way of drawing the files. */
+export type MediaView = (typeof MEDIA_VIEW)[keyof typeof MEDIA_VIEW];
+/** Where the chosen {@link MediaView} is kept (`localStorage`). */
+export declare const MEDIA_VIEW_STORAGE_KEY = "orthacms.media.view";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;CAOtB,CAAC"}
+{"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;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;CAOtB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,oCAAoC;AACpC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,wBAAwB,CAAC"}

package/dist/lib/constants/index.js

@@ -86,3 +86,14 @@ export const MEDIA_FOLDERS_PANEL = {
     maxViewportRatio: 0.2,
     cssVar: '--media-folders-width'
 };
+/**
+ * How the library draws the open folder's files: tiles, or the design-system
+ * table. Remembered per browser under {@link MEDIA_VIEW_STORAGE_KEY} — a
+ * reading preference, not shared state.
+ */
+export const MEDIA_VIEW = {
+    Grid: 'grid',
+    List: 'list'
+};
+/** Where the chosen {@link MediaView} is kept (`localStorage`). */
+export const MEDIA_VIEW_STORAGE_KEY = 'orthacms.media.view';

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

@@ -11,6 +11,7 @@ export declare const mediaInsightsKeys: {
     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"];
+    altMissing: (workspaceId: string) => readonly ["media-insights", string, "alt-missing"];
 };
 /**
  * Loads assets and bytes per media kind.
@@ -29,4 +30,11 @@ export declare function useMediaUploads(): import("@tanstack/react-query").UseQu
  * whenever someone narrowed the range.
  */
 export declare function useMediaAltCoverage(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("../../infrastructure/mediaInsightsGateway").MediaAltCoverage>, Error>;
+/** How many images the alt-text drill-down lists. */
+export declare const ALT_DRILL_LIMIT = 20;
+/**
+ * Loads the images missing alt text, oldest upload first — the drill-down
+ * behind the Needs-attention line. Mounted only while its panel is open.
+ */
+export declare function useMediaAltMissing(): import("@tanstack/react-query").UseQueryResult<NoInfer<import("../../infrastructure/mediaInsightsGateway").MediaAltMissing>, Error>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +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"}
+{"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;8BAEC,MAAM;CAEnC,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,qIAgB9B;AAED,uEAAuE;AACvE,wBAAgB,eAAe,qIAiB9B;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,yIAgBlC;AAED,qDAAqD;AACrD,eAAO,MAAM,eAAe,KAAK,CAAC;AAElC;;;GAGG;AACH,wBAAgB,kBAAkB,wIAYjC"}

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

@@ -18,7 +18,8 @@ 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']
+    alt: (workspaceId) => ['media-insights', workspaceId, 'alt'],
+    altMissing: (workspaceId) => ['media-insights', workspaceId, 'alt-missing']
 };
 /**
  * Loads assets and bytes per media kind.
@@ -83,3 +84,21 @@ export function useMediaAltCoverage() {
         enabled: canRead
     });
 }
+/** How many images the alt-text drill-down lists. */
+export const ALT_DRILL_LIMIT = 20;
+/**
+ * Loads the images missing alt text, oldest upload first — the drill-down
+ * behind the Needs-attention line. Mounted only while its panel is open.
+ */
+export function useMediaAltMissing() {
+    const workspace = useCurrentWorkspace();
+    const canRead = useHasPermission(MEDIA_READ);
+    return useQuery({
+        queryKey: mediaInsightsKeys.altMissing(workspace.id),
+        queryFn: () => httpMediaInsightsGateway.altMissing(ALT_DRILL_LIMIT),
+        staleTime: STALE_TIME.Standard,
+        // One retry, as every Insights read (`[insights:I-16]`).
+        retry: 1,
+        enabled: canRead
+    });
+}

package/dist/lib/infrastructure/httpMediaInsightsGateway/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/httpMediaInsightsGateway/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAER,oBAAoB,EAGvB,MAAM,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,oBAkCtC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/httpMediaInsightsGateway/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGR,oBAAoB,EAGvB,MAAM,yBAAyB,CAAC;AAEjC;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,EAAE,oBA8CtC,CAAC"}

package/dist/lib/infrastructure/httpMediaInsightsGateway/index.js

@@ -31,5 +31,14 @@ export const httpMediaInsightsGateway = {
         catch (error) {
             throw toApiError(error);
         }
+    },
+    async altMissing(limit) {
+        try {
+            const { data } = await apiClient.get('/insights/media/alt/missing', { params: { limit } });
+            return data;
+        }
+        catch (error) {
+            throw toApiError(error);
+        }
     }
 };

package/dist/lib/infrastructure/mediaInsightsGateway/index.d.ts

@@ -35,6 +35,21 @@ export type MediaAltCoverage = {
  * The port over the media Insights endpoints — one method per widget, mirroring
  * one route per widget. {@link httpMediaInsightsGateway} is the implementation.
  */
+/** One image with no alt text. */
+export type MediaAltMissingAsset = {
+    id: string;
+    name: string;
+    folderId: string | null;
+    /** Who uploaded it — resolved against the workspace roster. */
+    uploadedBy: string;
+    /** ISO upload timestamp. */
+    createdAt: string;
+};
+/** The images behind the "missing alt text" figure, oldest upload first. */
+export type MediaAltMissing = {
+    total: number;
+    assets: MediaAltMissingAsset[];
+};
 export type MediaInsightsGateway = {
     /** `GET /insights/media/storage` — assets and bytes per kind. */
     storage(): Promise<MediaStorage>;
@@ -42,5 +57,7 @@ export type MediaInsightsGateway = {
     uploads(days: number): Promise<MediaUploads>;
     /** `GET /insights/media/alt` — alt-text coverage across images. */
     altCoverage(): Promise<MediaAltCoverage>;
+    /** `GET /insights/media/alt/missing` — the images, oldest upload first. */
+    altMissing(limit: number): Promise<MediaAltMissing>;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/infrastructure/mediaInsightsGateway/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/mediaInsightsGateway/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,sCAAsC;AACtC,MAAM,MAAM,cAAc,GAAG;IACzB,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,YAAY,GAAG;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,YAAY,GAAG;IACvB,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAC/B,iEAAiE;IACjE,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC;IACjC,+DAA+D;IAC/D,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7C,mEAAmE;IACnE,WAAW,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAAC;CAC5C,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/infrastructure/mediaInsightsGateway/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,sCAAsC;AACtC,MAAM,MAAM,cAAc,GAAG;IACzB,4DAA4D;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,qDAAqD;AACrD,MAAM,MAAM,YAAY,GAAG;IACvB,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,uCAAuC;AACvC,MAAM,MAAM,YAAY,GAAG;IACvB,MAAM,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IACtC,KAAK,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,kCAAkC;AAClC,MAAM,MAAM,oBAAoB,GAAG;IAC/B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,+DAA+D;IAC/D,UAAU,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,SAAS,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,4EAA4E;AAC5E,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,oBAAoB,EAAE,CAAC;CAClC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IAC/B,iEAAiE;IACjE,OAAO,IAAI,OAAO,CAAC,YAAY,CAAC,CAAC;IACjC,+DAA+D;IAC/D,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;IAC7C,mEAAmE;IACnE,WAAW,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACzC,2EAA2E;IAC3E,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;CACvD,CAAC"}

package/dist/lib/pages/MediaLibraryPage/index.d.ts

@@ -3,14 +3,16 @@
  * `/workspaces/:id/media`. `useMediaLibrary` is the store — folders and the open
  * folder's assets come from `@orthacms/media-server`, and every action (browse
  * folders, upload, create folder, rename, duplicate, move, delete, filter, sort,
- * open the detail drawer) runs against the API, firing a toast per action —
+ * open the details panel) runs against the API, firing a toast per action —
  * except uploads, whose status lives in the `MediaUploadBanner`. Controls gate
  * on the real `media:*` matrix via `useHasPermission`.
  *
  * A sticky `MediaTopBar` heads the page (the shared icon-tile + breadcrumb
- * header every admin page carries), spanning both panes. Below it sits a
- * two-pane layout — a folders sidebar beside the asset browser — plus the detail
- * drawer and the create/rename/move/upload dialogs. Both panes sit
+ * header every admin page carries, with New folder / Upload at its right end),
+ * spanning every pane. Below it: the folder tree, the file browser (title, type
+ * chips + search + sort + Grid/List, the selection bar, then tiles or the
+ * table) and — while a file is open — the non-modal details panel as a third
+ * column; plus the create/rename/move/upload dialogs. The panes sit
  * **flush on the canvas** (no muted board, no bordered island), mirroring the
  * Content Library's work area: the sidebar is divided by a hairline `border-r`
  * and each pane scrolls independently. Sized with `flex-1` against the workspace

package/dist/lib/pages/MediaLibraryPage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/MediaLibraryPage/index.tsx"],"names":[],"mappings":"AA+KA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,gBAAgB,gCAwlB/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/pages/MediaLibraryPage/index.tsx"],"names":[],"mappings":"AA8LA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,gBAAgB,gCAorB/B"}