@orthacms/media-admin 0.11.0 → 0.12.0

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/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"}

package/dist/lib/pages/MediaLibraryPage/index.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Button, ConfirmDialog, Drawer, DrawerContent, DrawerTitle, ResizeHandle, cn, toast, useResizablePanel } from '@orthacms/design-system';
-import { PanelLeft } from 'lucide-react';
+import { FolderPlus, PanelLeft, UploadCloud } from 'lucide-react';
 import { useHasPermission } from '@orthacms/identity-admin';
-import { MEDIA_CREATE, MEDIA_DELETE, MEDIA_FOLDERS_PANEL, MEDIA_READ, MEDIA_UPDATE, ROOT_FOLDER_ID } from '../../constants';
+import { MEDIA_CREATE, MEDIA_DELETE, MEDIA_FOLDERS_PANEL, MEDIA_READ, MEDIA_UPDATE, MEDIA_VIEW, MEDIA_VIEW_STORAGE_KEY, ROOT_FOLDER_ID } from '../../constants';
 import { useMediaLibrary } from '../../hooks/useMediaLibrary';
 import { MediaFoldersNav } from '../../components/MediaFoldersNav';
 import { MediaTopBar } from '../../components/MediaTopBar';
@@ -12,9 +12,10 @@ import { MediaToolbar } from '../../components/MediaToolbar';
 import { MediaSelectionBar } from '../../components/MediaSelectionBar';
 import { MediaUploadBanner } from '../../components/MediaUploadBanner';
 import { MediaGrid } from '../../components/MediaGrid';
+import { MediaAssetTable } from '../../components/MediaAssetTable';
 import { MediaPagination } from '../../components/MediaPagination';
 import { MediaEmptyState } from '../../components/MediaEmptyState';
-import { AssetDetailDrawer } from '../../components/AssetDetailDrawer';
+import { AssetDetailPanel } from '../../components/AssetDetailPanel';
 import { NewFolderDialog } from '../../components/NewFolderDialog';
 import { RenameDialog } from '../../components/RenameDialog';
 import { MoveAssetsDialog } from '../../components/MoveAssetsDialog';
@@ -24,10 +25,12 @@ import { useDocumentTitle } from '@orthacms/utils-admin';
 /** Intl descriptors for the Media Library page + its toasts, co-located. */
 const messages = defineMessages({
     title: { id: 'media.page.title', defaultMessage: 'Media Library' },
-    subtitle: {
-        id: 'media.page.subtitle',
-        defaultMessage: '{count, plural, one {# item} other {# items}} in {location}'
+    fileCount: {
+        id: 'media.page.fileCount',
+        defaultMessage: '{count, plural, one {# file} other {# files}}'
     },
+    newFolder: { id: 'media.page.newFolder', defaultMessage: 'New folder' },
+    upload: { id: 'media.page.upload', defaultMessage: 'Upload' },
     allMedia: { id: 'media.page.allMedia', defaultMessage: 'All media' },
     noAccess: {
         id: 'media.page.noAccess',
@@ -133,19 +136,31 @@ const messages = defineMessages({
  * nothing.
  */
 const FOCUS_RECLAIM_MS = 1_000;
+/** The remembered view, or the grid — storage can be absent or refuse. */
+function readView() {
+    try {
+        const stored = window.localStorage.getItem(MEDIA_VIEW_STORAGE_KEY);
+        return stored === MEDIA_VIEW.List ? MEDIA_VIEW.List : MEDIA_VIEW.Grid;
+    }
+    catch {
+        return MEDIA_VIEW.Grid;
+    }
+}
 /**
  * The Media Library, mounted inside the workspace shell at
  * `/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
@@ -179,6 +194,16 @@ export function MediaLibraryPage() {
     const [deleteTarget, setDeleteTarget] = useState(null);
     /** A confirmed delete is in flight — the dialog shows a spinner meanwhile. */
     const [deleting, setDeleting] = useState(false);
+    const [view, setViewState] = useState(readView);
+    const setView = (next) => {
+        setViewState(next);
+        try {
+            window.localStorage.setItem(MEDIA_VIEW_STORAGE_KEY, next);
+        }
+        catch {
+            // A private window or blocked storage: the choice lasts the visit.
+        }
+    };
     /**
      * Puts focus on the grid and **keeps** it there for a few frames.
      *
@@ -213,14 +238,29 @@ export function MediaLibraryPage() {
         ? store.currentFolder.name
         : intl.formatMessage(messages.allMedia);
     const hasFilters = store.search.trim() !== '' || store.kindFilter !== 'all';
-    // Sub-folders belong to the folder, not to a page of its assets, so they are
-    // drawn once on the first page rather than repeating above every page of
-    // files. On any later page the grid is assets alone.
-    const showFolders = store.page === 1;
-    const visibleFolders = showFolders ? store.childFolders : [];
-    // Emptiness is now a fact about the whole folder, not about what happened to
-    // load: `total` counts every asset matching the search and filter across it.
-    const isEmpty = visibleFolders.length === 0 && store.total === 0;
+    // Emptiness is a fact about the whole folder, not about what happened to
+    // load: `total` counts every asset matching the search and filter across
+    // it. Sub-folders don't count — they are drawn in the tree, not the grid.
+    const isEmpty = store.total === 0;
+    // The details panel steps through the files on screen, in their order.
+    const detailIndex = store.detailAsset
+        ? store.visibleAssets.findIndex((a) => a.id === store.detailAsset?.id)
+        : -1;
+    const previousAsset = detailIndex > 0 ? store.visibleAssets[detailIndex - 1] : undefined;
+    const nextAsset = detailIndex >= 0 ? store.visibleAssets[detailIndex + 1] : undefined;
+    // The table's header checkbox: select the page, or clear it when it's all
+    // selected already.
+    const toggleAllOnPage = () => {
+        const page = store.visibleAssets;
+        if (page.length > 0 && page.every((a) => store.selectedIds.has(a.id))) {
+            store.clearSelection();
+            return;
+        }
+        for (const asset of page) {
+            if (!store.selectedIds.has(asset.id))
+                store.toggleSelect(asset.id);
+        }
+    };
     // Triggers a browser download for one asset (its bytes stream from the
     // `media:read`-gated raw route). Shared by the row action and bulk download.
     const downloadAsset = (asset) => {
@@ -231,7 +271,7 @@ export function MediaLibraryPage() {
         link.click();
         link.remove();
     };
-    // A single dispatcher every card / row / drawer forwards asset actions to.
+    // A single dispatcher every tile / row / panel forwards asset actions to.
     const handleAssetAction = (kind, asset) => {
         switch (kind) {
             case 'open':
@@ -348,14 +388,13 @@ export function MediaLibraryPage() {
     if (store.isError) {
         return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col items-center justify-center gap-3 p-6 text-center", children: [_jsx("p", { className: "max-w-sm text-sm text-muted-foreground", role: "alert", children: intl.formatMessage(messages.loadError) }), _jsx(Button, { variant: "outline", onClick: store.reload, children: intl.formatMessage(messages.retry) })] }));
     }
-    return (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx(MediaTopBar, { breadcrumbs: store.breadcrumbs, onNavigate: store.navigateTo }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col lg:flex-row", children: [_jsx("div", { className: "border-b p-3 lg:hidden", children: _jsxs(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: () => setNavOpen(true), children: [_jsx(PanelLeft, { "aria-hidden": true }), intl.formatMessage(messages.openNav)] }) }), _jsxs("div", { ref: foldersPanel.ref, style: foldersPanel.style, className: "relative hidden shrink-0 lg:flex", children: [_jsx(MediaFoldersNav, { className: "w-(--media-folders-width) border-r", folders: store.folders, currentFolderId: store.currentFolderId, counts: store.folderCounts, rootCount: store.folderCounts.get(ROOT_FOLDER_ID) ?? 0, onNavigate: store.navigateTo, onNewFolder: () => setNewFolderOpen(true), canCreate: canCreate }), _jsx(ResizeHandle, { ...foldersPanel.handleProps, edge: "right", label: intl.formatMessage(messages.resizeNav) })] }), _jsx("div", { className: "min-w-0 flex-1 overflow-auto", children: _jsxs("div", { className: "p-4 sm:p-6", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.01em]", children: store.currentFolder
+    return (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_jsx(MediaTopBar, { breadcrumbs: store.breadcrumbs, onNavigate: store.navigateTo, actions: canCreate ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: () => setNewFolderOpen(true), children: [_jsx(FolderPlus, { "aria-hidden": true }), _jsx("span", { className: "hidden sm:inline", children: intl.formatMessage(messages.newFolder) })] }), _jsxs(Button, { size: "sm", onClick: () => setUploadOpen(true), children: [_jsx(UploadCloud, { "aria-hidden": true }), intl.formatMessage(messages.upload)] })] })) : null }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col lg:flex-row", children: [_jsx("div", { className: "border-b p-3 lg:hidden", children: _jsxs(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: () => setNavOpen(true), children: [_jsx(PanelLeft, { "aria-hidden": true }), intl.formatMessage(messages.openNav)] }) }), _jsxs("div", { ref: foldersPanel.ref, style: foldersPanel.style, className: "relative hidden shrink-0 lg:flex", children: [_jsx(MediaFoldersNav, { className: "w-(--media-folders-width) border-r", folders: store.folders, currentFolderId: store.currentFolderId, counts: store.folderCounts, rootCount: store.folderCounts.get(ROOT_FOLDER_ID) ?? 0, onNavigate: store.navigateTo, onNewFolder: () => setNewFolderOpen(true), onRenameFolder: handleRenameFolder, onDeleteFolder: handleDeleteFolder, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }), _jsx(ResizeHandle, { ...foldersPanel.handleProps, edge: "right", label: intl.formatMessage(messages.resizeNav) })] }), _jsx("div", { className: "min-w-0 flex-1 overflow-auto", children: _jsxs("div", { className: cn('px-4 py-6 sm:px-8', selectedIds.length > 0 && 'pb-24'), children: [_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "text-2xl font-semibold tracking-[-0.01em]", children: store.currentFolder
                                                 ? store.currentFolder.name
-                                                : intl.formatMessage(messages.title) }), _jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: intl.formatMessage(messages.subtitle, {
-                                                count: store.total,
-                                                location: locationLabel
-                                            }) })] }), _jsx(MediaToolbar, { search: store.search, onSearchChange: store.setSearch, kindFilter: store.kindFilter, onKindFilterChange: store.setKindFilter, sort: store.sort, onSortChange: store.setSort, onNewFolder: () => setNewFolderOpen(true), onUpload: () => setUploadOpen(true), canCreate: canCreate }), _jsx("p", { className: "sr-only", "aria-live": "polite", children: intl.formatMessage(messages.selection, {
+                                                : intl.formatMessage(messages.title) }), _jsx("p", { className: "mt-0.5 text-[13px] text-muted-foreground", children: intl.formatMessage(messages.fileCount, {
+                                                count: store.total
+                                            }) })] }), _jsx(MediaToolbar, { search: store.search, onSearchChange: store.setSearch, kindFilter: store.kindFilter, onKindFilterChange: store.setKindFilter, sort: store.sort, onSortChange: store.setSort, view: view, onViewChange: setView }), _jsx("p", { className: "sr-only", "aria-live": "polite", children: intl.formatMessage(messages.selection, {
                                         count: selectedIds.length
-                                    }) }), _jsx(MediaUploadBanner, { items: store.uploadItems, summary: store.uploadSummary, onRetry: store.retryUpload, onCancel: store.cancelUpload, onDismiss: store.dismissUploads }), selectedIds.length > 0 ? (_jsx(MediaSelectionBar, { count: selectedIds.length, onDownload: () => {
+                                    }) }), _jsx(MediaUploadBanner, { items: store.uploadItems, summary: store.uploadSummary, onRetry: store.retryUpload, onCancel: store.cancelUpload, onDismiss: store.dismissUploads }), selectedIds.length > 0 ? (_jsx(MediaSelectionBar, { count: selectedIds.length, total: store.total, onDownload: () => {
                                         store.selectedAssets.forEach(downloadAsset);
                                         toast.success(intl.formatMessage(messages.tDownload, {
                                             name: `${selectedIds.length} files`
@@ -375,21 +414,28 @@ export function MediaLibraryPage() {
                                     }), onClear: store.clearSelection, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete })) : null, _jsx("section", { ref: gridRef, tabIndex: -1, "aria-label": intl.formatMessage(messages.assetsRegion), "aria-busy": store.isRefreshing, className: cn('transition-opacity duration-(--ds-duration-base) motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', store.isRefreshing && 'opacity-60 delay-150'), children: isEmpty ? (_jsx(MediaEmptyState, { hasFilters: hasFilters, canCreate: canCreate, onUpload: () => setUploadOpen(true), onClearFilters: () => {
                                             store.setSearch('');
                                             store.setKindFilter('all');
-                                        } })) : (_jsx(MediaGrid, { folders: visibleFolders, assets: store.visibleAssets, folderCounts: store.folderCounts, selectedIds: store.selectedIds, onOpenFolder: store.navigateTo, onRenameFolder: handleRenameFolder, onDeleteFolder: handleDeleteFolder, onToggleSelect: store.toggleSelect, onAssetAction: handleAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete })) }), store.total > 0 ? (_jsx(MediaPagination, { page: store.page, pageCount: store.pageCount, pageSize: store.pageSize, total: store.total, onPageChange: store.setPage, onPageSizeChange: store.setPageSize })) : null] }) })] }), _jsx(Drawer, { direction: "left", open: navOpen, onOpenChange: setNavOpen, shouldScaleBackground: false, children: _jsxs(DrawerContent, { className: "data-[vaul-drawer-direction=left]:w-72", children: [_jsx(DrawerTitle, { className: "sr-only", children: intl.formatMessage(messages.navTitle) }), _jsx(MediaFoldersNav, { className: "w-full", folders: store.folders, currentFolderId: store.currentFolderId, counts: store.folderCounts, rootCount: store.folderCounts.get(ROOT_FOLDER_ID) ?? 0, onNavigate: (folderId) => {
+                                        } })) : view === MEDIA_VIEW.List ? (_jsx(MediaAssetTable, { assets: store.visibleAssets, selectedIds: store.selectedIds, activeId: store.detailAsset?.id, onToggleSelect: store.toggleSelect, onToggleAll: toggleAllOnPage, onAction: handleAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete })) : (_jsx(MediaGrid, { assets: store.visibleAssets, selectedIds: store.selectedIds, activeId: store.detailAsset?.id, onToggleSelect: store.toggleSelect, onAssetAction: handleAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete })) }), store.total > 0 ? (_jsx(MediaPagination, { page: store.page, pageCount: store.pageCount, pageSize: store.pageSize, total: store.total, onPageChange: store.setPage, onPageSizeChange: store.setPageSize })) : null] }) }), store.detailAsset ? (_jsx(AssetDetailPanel, { className: "fixed inset-0 z-40 lg:static lg:z-auto lg:w-[340px] lg:shrink-0 lg:border-l", asset: store.detailAsset, locationLabel: locationLabel, onClose: store.closeDetail, onPrevious: previousAsset
+                            ? () => store.openDetail(previousAsset.id)
+                            : undefined, onNext: nextAsset
+                            ? () => store.openDetail(nextAsset.id)
+                            : undefined, onAction: handleAssetAction, onSaveAlt: (id, alt) => store.setAssetAlt(id, alt).then((ok) => {
+                            if (ok) {
+                                toast.success(intl.formatMessage(messages.tAltSaved));
+                            }
+                            return ok;
+                        }), canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete })) : null] }), _jsx(Drawer, { direction: "left", open: navOpen, onOpenChange: setNavOpen, shouldScaleBackground: false, children: _jsxs(DrawerContent, { className: "data-[vaul-drawer-direction=left]:w-72", children: [_jsx(DrawerTitle, { className: "sr-only", children: intl.formatMessage(messages.navTitle) }), _jsx(MediaFoldersNav, { className: "w-full", folders: store.folders, currentFolderId: store.currentFolderId, counts: store.folderCounts, rootCount: store.folderCounts.get(ROOT_FOLDER_ID) ?? 0, onNavigate: (folderId) => {
                                 store.navigateTo(folderId);
                                 setNavOpen(false);
                             }, onNewFolder: () => {
                                 setNavOpen(false);
                                 setNewFolderOpen(true);
-                            }, canCreate: canCreate })] }) }), _jsx(AssetDetailDrawer, { asset: store.detailAsset, locationLabel: locationLabel, onOpenChange: (open) => {
-                    if (!open)
-                        store.closeDetail();
-                }, onAction: handleAssetAction, onSaveAlt: (id, alt) => store.setAssetAlt(id, alt).then((ok) => {
-                    if (ok) {
-                        toast.success(intl.formatMessage(messages.tAltSaved));
-                    }
-                    return ok;
-                }), canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }), _jsx(NewFolderDialog, { open: newFolderOpen, onOpenChange: setNewFolderOpen, locationLabel: locationLabel, onCreate: (name) => {
+                            }, onRenameFolder: (folder) => {
+                                setNavOpen(false);
+                                handleRenameFolder(folder);
+                            }, onDeleteFolder: (folder) => {
+                                setNavOpen(false);
+                                handleDeleteFolder(folder);
+                            }, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete })] }) }), _jsx(NewFolderDialog, { open: newFolderOpen, onOpenChange: setNewFolderOpen, locationLabel: locationLabel, onCreate: (name) => {
                     void store.createFolder(name).then((ok) => {
                         if (ok) {
                             toast.success(intl.formatMessage(messages.tCreated, { name }));

package/dist/lib/utils/fileExtension/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The short, upper-cased extension of a file name (`report-q3.pdf` → `PDF`),
+ * or `null` when there is none worth showing — no dot, a leading-dot name
+ * like `.env`, or a "extension" too long to be one. Labels the tiles and rows
+ * of files that have no picture to show, where a glyph alone can't tell a
+ * PDF from a DOCX.
+ */
+export declare function fileExtension(name: string): string | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/utils/fileExtension/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/fileExtension/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAKzD"}

package/dist/lib/utils/fileExtension/index.js

@@ -0,0 +1,14 @@
+/**
+ * The short, upper-cased extension of a file name (`report-q3.pdf` → `PDF`),
+ * or `null` when there is none worth showing — no dot, a leading-dot name
+ * like `.env`, or a "extension" too long to be one. Labels the tiles and rows
+ * of files that have no picture to show, where a glyph alone can't tell a
+ * PDF from a DOCX.
+ */
+export function fileExtension(name) {
+    const dot = name.lastIndexOf('.');
+    if (dot <= 0 || dot === name.length - 1)
+        return null;
+    const ext = name.slice(dot + 1);
+    return ext.length > 5 ? null : ext.toUpperCase();
+}

package/dist/lib/utils/mediaPlugin/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/mediaPlugin/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AA4C7D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,gBAAgB,CAqJ9C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/mediaPlugin/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAyC7D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,gBAAgB,CAiJ9C"}

package/dist/lib/utils/mediaPlugin/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { lazyPage } from '@orthacms/utils-admin';
 import { WORKSPACE_ROUTE_SLOT, WORKSPACE_NAV_SLOT } from '@orthacms/workspaces-admin';
-import { CONTENT_FIELD_TYPE, ENTRY_PRESAVE_SLOT, ENTRY_TAB, ENTRY_TAB_SLOT } from '@orthacms/content-admin';
+import { CONTENT_FIELD_TYPE, ENTRY_FIELD_CONTROL_SLOT, ENTRY_PRESAVE_SLOT } from '@orthacms/content-admin';
 import { WYSIWYG_MEDIA_SLOT } from '@orthacms/wysiwyg-admin';
 import { INSIGHTS_SECTION_IDS, INSIGHTS_WIDGET_SLOT } from '@orthacms/insights-admin';
 import { Image, Upload } from 'lucide-react';
@@ -10,16 +10,16 @@ import { MediaStorageStat } from '../../components/MediaStorageStat';
 import { MediaStorageWidget } from '../../components/MediaStorageWidget';
 import { MediaUploadsWidget } from '../../components/MediaUploadsWidget';
 import { MediaAltTextWidget } from '../../components/MediaAltTextWidget';
-import { EntryMediaTab } from '../../components/EntryMediaTab';
+import { MediaFieldInput } from '../../components/MediaFieldInput';
 import { MediaLibraryPageSkeleton } from '../../components/MediaLibrarySkeleton';
 import { WysiwygLibrarySource } from '../../components/WysiwygLibrarySource';
 import { WysiwygUploadSource } from '../../components/WysiwygUploadSource';
 import { MEDIA_PRESAVE_ID, usePendingMediaUploads } from '../../hooks/usePendingMediaUploads';
 import { MEDIA_READ } from '../../constants';
 const MediaLibraryPage = lazyPage(() => import('../../pages/MediaLibraryPage'), 'MediaLibraryPage');
-/** The Media tab applies to any type that declares a media field. */
-function hasMediaField(schema) {
-    return schema.fields.some((field) => field.type === CONTENT_FIELD_TYPE.Media);
+/** The media control owns every `media` field, wherever the form draws it. */
+function isMediaField(field) {
+    return field.type === CONTENT_FIELD_TYPE.Media;
 }
 /**
  * Creates the admin-side Media Library plugin. It lives **strictly inside a
@@ -102,23 +102,19 @@ export function MediaPlugin() {
                     }
                 ]
             },
-            // The entry editor's Media tab — rendered by content-admin's
-            // ENTRY_TAB_SLOT only when the open type has a media field, so the
-            // tab appears exactly where media applies. Its `slug` is content's
-            // own `media` tab route, already accepted by the tab router.
+            // A media field's control in the entry form. It used to be a Media
+            // tab of its own; the field now sits in the schema's order with the
+            // rest (ADR-0022), and content draws its label row and error.
+            // `composite`: the control is several buttons, so the field is
+            // named as a group rather than by a label on one of them.
             {
-                slot: ENTRY_TAB_SLOT,
+                slot: ENTRY_FIELD_CONTROL_SLOT,
                 items: [
                     {
-                        id: 'media.entry.tab',
-                        slug: ENTRY_TAB.Media,
-                        label: {
-                            id: 'media.tab.label',
-                            defaultMessage: 'Media'
-                        },
-                        order: 10,
-                        appliesTo: hasMediaField,
-                        Component: EntryMediaTab
+                        id: 'media.entry.field',
+                        appliesTo: isMediaField,
+                        composite: true,
+                        Component: MediaFieldInput
                     }
                 ]
             },
@@ -161,7 +157,7 @@ export function MediaPlugin() {
             // runs inside the record's save and puts them in the library then,
             // so an abandoned edit leaves no orphan assets behind. It also owns
             // the staging state, mounted above the tab body (a route) so it
-            // survives switching tabs.
+            // survives the form remounting.
             {
                 slot: ENTRY_PRESAVE_SLOT,
                 items: [

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@orthacms/media-admin",
-    "version": "0.11.0",
+    "version": "0.12.0",
     "description": "@orthacms/media-admin — part of Ortha CMS.",
     "license": "MIT",
     "homepage": "https://orthacms.com",
@@ -25,15 +25,15 @@
         "dist"
     ],
     "dependencies": {
-        "@orthacms/bootstrap-admin": "^0.11.0",
-        "@orthacms/content-admin": "^0.11.0",
-        "@orthacms/content-domain": "^0.11.0",
-        "@orthacms/design-system": "^0.11.0",
-        "@orthacms/identity-admin": "^0.11.0",
-        "@orthacms/insights-admin": "^0.11.0",
-        "@orthacms/utils-admin": "^0.11.0",
-        "@orthacms/workspaces-admin": "^0.11.0",
-        "@orthacms/wysiwyg-admin": "^0.11.0",
+        "@orthacms/bootstrap-admin": "^0.12.0",
+        "@orthacms/content-admin": "^0.12.0",
+        "@orthacms/content-domain": "^0.12.0",
+        "@orthacms/design-system": "^0.12.0",
+        "@orthacms/identity-admin": "^0.12.0",
+        "@orthacms/insights-admin": "^0.12.0",
+        "@orthacms/utils-admin": "^0.12.0",
+        "@orthacms/workspaces-admin": "^0.12.0",
+        "@orthacms/wysiwyg-admin": "^0.12.0",
         "@tanstack/react-query": "^5.0.0",
         "lucide-react": "^1.17.0",
         "react-intl": "^7.0.0",