@orthacms/media-admin 0.11.0 → 0.13.0

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;AA2C7D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,WAAW,IAAI,gBAAgB,CAuJ9C"}

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

@@ -2,24 +2,25 @@ 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 { INSIGHTS_SECTION_IDS, INSIGHTS_SIGNAL_SLOT, INSIGHTS_WIDGET_SLOT } from '@orthacms/insights-admin';
 import { Image, Upload } from 'lucide-react';
 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 { MediaAltSignal } from '../../components/MediaAltSignal';
+import { MediaAltDrill } from '../../components/MediaAltDrill';
+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
@@ -52,31 +53,37 @@ export function MediaPlugin() {
                         id: 'insights.media.storageBreakdown',
                         section: INSIGHTS_SECTION_IDS.Reach,
                         order: 10,
-                        size: 'sm',
+                        size: 'md',
                         permission: MEDIA_READ,
                         titleId: 'media.insights.storageBreakdown.title',
-                        defaultTitle: "What's using the storage",
+                        defaultTitle: 'Storage',
                         Component: MediaStorageWidget
                     },
                     {
                         id: 'insights.media.uploads',
                         section: INSIGHTS_SECTION_IDS.Reach,
                         order: 20,
-                        size: 'sm',
+                        size: 'md',
                         permission: MEDIA_READ,
                         titleId: 'media.insights.uploads.title',
                         defaultTitle: 'Uploads',
                         Component: MediaUploadsWidget
-                    },
+                    }
+                ]
+            },
+            {
+                // The alt-text debt is a Needs-attention line now, opening the
+                // images behind it, rather than a card of its own.
+                slot: INSIGHTS_SIGNAL_SLOT,
+                items: [
                     {
-                        id: 'insights.media.alt',
-                        section: INSIGHTS_SECTION_IDS.Reach,
-                        order: 30,
-                        size: 'sm',
+                        id: 'media.alt',
+                        order: 40,
                         permission: MEDIA_READ,
-                        titleId: 'media.insights.alt.title',
+                        titleId: 'media.insights.signal.alt.title',
                         defaultTitle: 'Images missing alt text',
-                        Component: MediaAltTextWidget
+                        Component: MediaAltSignal,
+                        Drill: MediaAltDrill
                     }
                 ]
             },
@@ -102,23 +109,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 +164,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.13.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.13.0",
+        "@orthacms/content-admin": "^0.13.0",
+        "@orthacms/content-domain": "^0.13.0",
+        "@orthacms/design-system": "^0.13.0",
+        "@orthacms/identity-admin": "^0.13.0",
+        "@orthacms/insights-admin": "^0.13.0",
+        "@orthacms/utils-admin": "^0.13.0",
+        "@orthacms/workspaces-admin": "^0.13.0",
+        "@orthacms/wysiwyg-admin": "^0.13.0",
         "@tanstack/react-query": "^5.0.0",
         "lucide-react": "^1.17.0",
         "react-intl": "^7.0.0",