@orthacms/media-admin 0.10.3 → 0.12.0

package/dist/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.d.ts

@@ -1,17 +1,31 @@
 import type { MediaFolder } from '../../../types/mediaFolder';
+/** Callbacks a tree row dispatches up — navigation and the ⋯ menu's actions. */
+export type FolderTreeActions = {
+    onNavigate: (folderId: string) => void;
+    onRename: (folder: MediaFolder) => void;
+    onDelete: (folder: MediaFolder) => void;
+    canUpdate: boolean;
+    canDelete: boolean;
+};
 /**
  * One folder in the sidebar tree. A folder with sub-folders is a
  * design-system `Collapsible` (a chevron toggles its children under a left tree
  * line; Radix manages `aria-expanded`), starting expanded; a leaf folder gets a
  * matching spacer so names align. The name is a separate button that navigates
  * into the folder — clicking it never toggles the group — and the open folder is
- * highlighted. Navigation dispatches up.
+ * highlighted.
+ *
+ * The tree is the **only** place folders are drawn (the grid shows files), so
+ * each row carries the folder's ⋯ menu — Open / Rename / Delete — revealed on
+ * hover or focus and kept while it is open. With neither `media:update` nor
+ * `media:delete` the menu would hold only Open, which the row already is, so
+ * it is left out.
  */
-export declare function MediaFolderTreeItem({ folder, folders, currentFolderId, counts, onNavigate }: {
+export declare function MediaFolderTreeItem({ folder, folders, currentFolderId, counts, actions }: {
     folder: MediaFolder;
     folders: MediaFolder[];
     currentFolderId: string;
     counts: Map<string, number>;
-    onNavigate: (folderId: string) => void;
+    actions: FolderTreeActions;
 }): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACb,EAAE;IACC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,+BAyFA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAY9D,gFAAgF;AAChF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,eAAe,EACf,MAAM,EACN,OAAO,EACV,EAAE;IACC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,OAAO,EAAE,iBAAiB,CAAC;CAC9B,+BAoGA"}

package/dist/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defineMessages, useIntl } from 'react-intl';
 import { Collapsible, CollapsibleContent, CollapsibleTrigger, cn } from '@orthacms/design-system';
 import { ChevronRight, Folder } from 'lucide-react';
+import { FolderActionsMenu } from '../../FolderActionsMenu';
 /** Intl descriptors for {@link MediaFolderTreeItem}, co-located. */
 const messages = defineMessages({
     toggle: { id: 'media.tree.toggle', defaultMessage: 'Toggle {name}' },
@@ -16,22 +17,31 @@ const messages = defineMessages({
  * line; Radix manages `aria-expanded`), starting expanded; a leaf folder gets a
  * matching spacer so names align. The name is a separate button that navigates
  * into the folder — clicking it never toggles the group — and the open folder is
- * highlighted. Navigation dispatches up.
+ * highlighted.
+ *
+ * The tree is the **only** place folders are drawn (the grid shows files), so
+ * each row carries the folder's ⋯ menu — Open / Rename / Delete — revealed on
+ * hover or focus and kept while it is open. With neither `media:update` nor
+ * `media:delete` the menu would hold only Open, which the row already is, so
+ * it is left out.
  */
-export function MediaFolderTreeItem({ folder, folders, currentFolderId, counts, onNavigate }) {
+export function MediaFolderTreeItem({ folder, folders, currentFolderId, counts, actions }) {
     const intl = useIntl();
     const children = folders
         .filter((f) => f.parentId === folder.id)
         .sort((a, b) => a.name.localeCompare(b.name));
     const hasChildren = children.length > 0;
     const active = currentFolderId === folder.id;
-    const nameButton = (_jsxs("button", { type: "button", onClick: () => onNavigate(folder.id), "aria-current": active ? 'true' : undefined, className: cn('flex min-w-0 flex-1 items-center gap-2 rounded-md py-1.5 pr-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', active ? 'font-medium text-primary' : 'text-foreground'), children: [_jsx(Folder, { className: cn('size-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: folder.name }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: intl.formatMessage(messages.count, {
+    const { onNavigate, canUpdate, canDelete } = actions;
+    const nameButton = (_jsxs("button", { type: "button", onClick: () => onNavigate(folder.id), "aria-current": active ? 'true' : undefined, className: cn('flex min-w-0 flex-1 items-center gap-2 rounded-md py-1.5 pr-1 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', active ? 'font-medium text-primary' : 'text-foreground'), children: [_jsx(Folder, { className: cn('size-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: folder.name }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: intl.formatMessage(messages.count, {
                     count: counts.get(folder.id) ?? 0
                 }) })] }));
+    const menu = canUpdate || canDelete ? (_jsx(FolderActionsMenu, { name: folder.name, onOpen: () => onNavigate(folder.id), onRename: () => actions.onRename(folder), onDelete: () => actions.onDelete(folder), canUpdate: canUpdate, canDelete: canDelete, triggerClassName: "mr-0.5 size-6 opacity-0 transition-opacity group-hover/row:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 [@media(hover:none)]:opacity-100" })) : null;
+    const rowClass = cn('group/row flex items-center gap-0.5 rounded-md pl-1 transition-colors', active ? 'bg-primary/10' : 'hover:bg-accent');
     if (!hasChildren) {
-        return (_jsx("li", { children: _jsxs("div", { className: cn('flex items-center gap-0.5 rounded-md pl-1 transition-colors', active ? 'bg-primary/10' : 'hover:bg-accent'), children: [_jsx("span", { className: "size-6 shrink-0", "aria-hidden": true }), nameButton] }) }));
+        return (_jsx("li", { children: _jsxs("div", { className: rowClass, children: [_jsx("span", { className: "size-6 shrink-0", "aria-hidden": true }), nameButton, menu] }) }));
     }
-    return (_jsx("li", { children: _jsxs(Collapsible, { defaultOpen: true, className: "group/folder", children: [_jsxs("div", { className: cn('flex items-center gap-0.5 rounded-md pl-1 transition-colors', active ? 'bg-primary/10' : 'hover:bg-accent'), children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": intl.formatMessage(messages.toggle, {
+    return (_jsx("li", { children: _jsxs(Collapsible, { defaultOpen: true, className: "group/folder", children: [_jsxs("div", { className: rowClass, children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": intl.formatMessage(messages.toggle, {
                                     name: folder.name
-                                }), className: "flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(ChevronRight, { className: "size-3.5 transition-transform duration-200 group-data-[state=open]/folder:rotate-90" }) }) }), nameButton] }), _jsx(CollapsibleContent, { children: _jsx("ul", { className: "ml-[0.85rem] mt-0.5 space-y-0.5 border-l border-border pl-1.5", children: children.map((child) => (_jsx(MediaFolderTreeItem, { folder: child, folders: folders, currentFolderId: currentFolderId, counts: counts, onNavigate: onNavigate }, child.id))) }) })] }) }));
+                                }), className: "flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(ChevronRight, { className: "size-3.5 transition-transform duration-200 group-data-[state=open]/folder:rotate-90" }) }) }), nameButton, menu] }), _jsx(CollapsibleContent, { children: _jsx("ul", { className: "ml-[0.85rem] mt-0.5 space-y-0.5 border-l border-border pl-1.5", children: children.map((child) => (_jsx(MediaFolderTreeItem, { folder: child, folders: folders, currentFolderId: currentFolderId, counts: counts, actions: actions }, child.id))) }) })] }) }));
 }

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

@@ -3,12 +3,13 @@ import type { MediaFolder } from '../../types/mediaFolder';
  * The Media Library's folder sidebar — a **flat** nav region sitting flush on the
  * page background (mirroring the Content Library sidebar), not a bordered island.
  * The page supplies the divider (`lg:border-r`) via `className`, so the mobile
- * drawer copy renders without one. An "All media" root entry sits above the
- * folder tree, where any folder with sub-folders is collapsible; a New folder
- * action closes the list. Highlights the open folder and dispatches navigation /
- * create up to the page.
+ * drawer copy renders without one. A "Folders" header carries a + (New folder);
+ * an "All media" root entry sits above the folder tree, where any folder with
+ * sub-folders is collapsible and every folder has its ⋯ menu (Rename / Delete)
+ * — the tree is the one place folders are drawn. Highlights the open folder and
+ * dispatches navigation / create / rename / delete up to the page.
  */
-export declare function MediaFoldersNav({ folders, currentFolderId, counts, rootCount, onNavigate, onNewFolder, canCreate, className }: {
+export declare function MediaFoldersNav({ folders, currentFolderId, counts, rootCount, onNavigate, onNewFolder, onRenameFolder, onDeleteFolder, canCreate, canUpdate, canDelete, className }: {
     folders: MediaFolder[];
     currentFolderId: string;
     counts: Map<string, number>;
@@ -16,7 +17,11 @@ export declare function MediaFoldersNav({ folders, currentFolderId, counts, root
     rootCount: number;
     onNavigate: (folderId: string) => void;
     onNewFolder: () => void;
+    onRenameFolder: (folder: MediaFolder) => void;
+    onDeleteFolder: (folder: MediaFolder) => void;
     canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
     className?: string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaFoldersNav/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAe3D;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,eAAe,EACf,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACZ,EAAE;IACC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BAmFA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaFoldersNav/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAe3D;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,eAAe,EACf,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,EACX,cAAc,EACd,cAAc,EACd,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BAsFA"}

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

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defineMessages, useIntl } from 'react-intl';
 import { Button, cn } from '@orthacms/design-system';
-import { FolderPlus, Home, Images } from 'lucide-react';
+import { Home, Plus } from 'lucide-react';
 import { ROOT_FOLDER_ID } from '../../constants';
 import { MediaFolderTreeItem } from './MediaFolderTreeItem';
 /** Intl descriptors for {@link MediaFoldersNav}, co-located. */
 const messages = defineMessages({
     nav: { id: 'media.nav.nav', defaultMessage: 'Folders' },
-    heading: { id: 'media.nav.heading', defaultMessage: 'Library' },
+    heading: { id: 'media.nav.heading', defaultMessage: 'Folders' },
     allMedia: { id: 'media.nav.allMedia', defaultMessage: 'All media' },
     allCount: {
         id: 'media.nav.allCount',
@@ -19,22 +19,30 @@ const messages = defineMessages({
  * The Media Library's folder sidebar — a **flat** nav region sitting flush on the
  * page background (mirroring the Content Library sidebar), not a bordered island.
  * The page supplies the divider (`lg:border-r`) via `className`, so the mobile
- * drawer copy renders without one. An "All media" root entry sits above the
- * folder tree, where any folder with sub-folders is collapsible; a New folder
- * action closes the list. Highlights the open folder and dispatches navigation /
- * create up to the page.
+ * drawer copy renders without one. A "Folders" header carries a + (New folder);
+ * an "All media" root entry sits above the folder tree, where any folder with
+ * sub-folders is collapsible and every folder has its ⋯ menu (Rename / Delete)
+ * — the tree is the one place folders are drawn. Highlights the open folder and
+ * dispatches navigation / create / rename / delete up to the page.
  */
-export function MediaFoldersNav({ folders, currentFolderId, counts, rootCount, onNavigate, onNewFolder, canCreate, className }) {
+export function MediaFoldersNav({ folders, currentFolderId, counts, rootCount, onNavigate, onNewFolder, onRenameFolder, onDeleteFolder, canCreate, canUpdate, canDelete, className }) {
     const intl = useIntl();
     const topLevel = folders
         .filter((f) => f.parentId === ROOT_FOLDER_ID)
         .sort((a, b) => a.name.localeCompare(b.name));
     const rootActive = currentFolderId === ROOT_FOLDER_ID;
-    return (_jsxs("nav", { "aria-label": intl.formatMessage(messages.nav), className: cn('flex h-full w-60 shrink-0 flex-col overflow-hidden', className), children: [_jsxs("div", { className: "flex items-center gap-2 p-2", children: [_jsx(Images, { className: "size-4 text-muted-foreground", "aria-hidden": true }), _jsx("h2", { className: "text-sm font-semibold tracking-[-0.01em]", children: intl.formatMessage(messages.heading) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-2", children: _jsxs("ul", { className: "space-y-0.5", children: [_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onNavigate(ROOT_FOLDER_ID), "aria-current": rootActive ? 'true' : undefined, className: cn('flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', rootActive
+    const actions = {
+        onNavigate,
+        onRename: onRenameFolder,
+        onDelete: onDeleteFolder,
+        canUpdate,
+        canDelete
+    };
+    return (_jsxs("nav", { "aria-label": intl.formatMessage(messages.nav), className: cn('flex h-full w-60 shrink-0 flex-col overflow-hidden', className), children: [_jsxs("div", { className: "flex h-10 items-center gap-2 pl-3 pr-2", children: [_jsx("h2", { className: "flex-1 text-xs font-medium text-muted-foreground", children: intl.formatMessage(messages.heading) }), canCreate ? (_jsx(Button, { variant: "ghost", size: "icon", className: "size-6 shadow-none", onClick: onNewFolder, "aria-label": intl.formatMessage(messages.newFolder), children: _jsx(Plus, { "aria-hidden": true }) })) : null] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-2", children: _jsxs("ul", { className: "space-y-0.5", children: [_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onNavigate(ROOT_FOLDER_ID), "aria-current": rootActive ? 'true' : undefined, className: cn('flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', rootActive
                                     ? 'bg-primary/10 font-medium text-primary'
                                     : 'text-foreground hover:bg-accent'), children: [_jsx(Home, { className: cn('size-4 shrink-0', rootActive
                                             ? 'text-primary'
                                             : 'text-muted-foreground'), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: intl.formatMessage(messages.allMedia) }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: intl.formatMessage(messages.allCount, {
                                             count: rootCount
-                                        }) })] }) }), topLevel.map((folder) => (_jsx(MediaFolderTreeItem, { folder: folder, folders: folders, currentFolderId: currentFolderId, counts: counts, onNavigate: onNavigate }, folder.id)))] }) }), canCreate ? (_jsx("div", { className: "p-2", children: _jsxs(Button, { variant: "outline", size: "sm", className: "w-full justify-start shadow-none", onClick: onNewFolder, children: [_jsx(FolderPlus, { "aria-hidden": true }), intl.formatMessage(messages.newFolder)] }) })) : null] }));
+                                        }) })] }) }), topLevel.map((folder) => (_jsx(MediaFolderTreeItem, { folder: folder, folders: folders, currentFolderId: currentFolderId, counts: counts, actions: actions }, folder.id)))] }) })] }));
 }

package/dist/lib/components/MediaGrid/MediaAssetCard/index.d.ts

@@ -1,14 +1,25 @@
 import type { MediaAsset } from '../../../types/mediaAsset';
 import { type AssetActionKind } from '../../AssetActionsMenu';
 /**
- * An asset tile in the grid — a gradient thumbnail with a hover ⋯ menu and a
+ * An asset tile in the grid — a 4:3 thumbnail with a hover ⋯ menu and a
  * selection checkbox (always visible once selected), over the name and a
- * size/dimensions line. Clicking the thumbnail or name opens the detail drawer;
- * the checkbox toggles selection. A selected tile gets a primary ring.
+ * dimensions · size line. A file with no picture shows its
+ * extension ("PDF", "MP4") under the kind glyph, and an image with no alt text
+ * says so on the tile, since that is the gap a library is usually swept for.
+ * Clicking the thumbnail or name opens the details panel; the checkbox toggles
+ * selection. A selected tile, and the one open in the panel, get a ring.
  */
-export declare function MediaAssetCard({ asset, selected, onToggleSelect, onAction, canCreate, canUpdate, canDelete }: {
+export declare function MediaAssetCard({ asset, selected, active, onToggleSelect, onAction, canCreate, canUpdate, canDelete, justUploaded }: {
     asset: MediaAsset;
     selected: boolean;
+    /** The tile's file is the one open in the details panel. */
+    active?: boolean;
+    /**
+     * The asset was just uploaded: the tile rises into its slot. Not
+     * `ds-flash` — its keyframes animate `background-color` to transparent,
+     * which would drop the tile's card background for the length of the fade.
+     */
+    justUploaded?: boolean;
     onToggleSelect: (id: string) => void;
     onAction: (kind: AssetActionKind, asset: MediaAsset) => void;
     canCreate: boolean;

package/dist/lib/components/MediaGrid/MediaAssetCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaGrid/MediaAssetCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAShF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAsEA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaGrid/MediaAssetCard/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAI5D,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAUhF;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAc,EACd,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,YAAoB,EACvB,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BA4FA"}

package/dist/lib/components/MediaGrid/MediaAssetCard/index.js

@@ -1,29 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defineMessages, useIntl } from 'react-intl';
-import { Checkbox, cn } from '@orthacms/design-system';
+import { Badge, Checkbox, cn } from '@orthacms/design-system';
+import { MEDIA_KIND } from '../../../constants';
 import { formatBytes } from '../../../utils/formatBytes';
 import { buildAssetHandlers } from '../../../utils/assetHandlers';
+import { fileExtension } from '../../../utils/fileExtension';
 import { AssetActionsMenu } from '../../AssetActionsMenu';
 import { MediaThumbnail } from '../../MediaThumbnail';
 /** Intl descriptors for {@link MediaAssetCard}, co-located. */
 const messages = defineMessages({
     open: { id: 'media.assetCard.open', defaultMessage: 'Open {name}' },
-    select: { id: 'media.assetCard.select', defaultMessage: 'Select {name}' }
+    select: { id: 'media.assetCard.select', defaultMessage: 'Select {name}' },
+    noAlt: { id: 'media.assetCard.noAlt', defaultMessage: 'No alt text' }
 });
 /**
- * An asset tile in the grid — a gradient thumbnail with a hover ⋯ menu and a
+ * An asset tile in the grid — a 4:3 thumbnail with a hover ⋯ menu and a
  * selection checkbox (always visible once selected), over the name and a
- * size/dimensions line. Clicking the thumbnail or name opens the detail drawer;
- * the checkbox toggles selection. A selected tile gets a primary ring.
+ * dimensions · size line. A file with no picture shows its
+ * extension ("PDF", "MP4") under the kind glyph, and an image with no alt text
+ * says so on the tile, since that is the gap a library is usually swept for.
+ * Clicking the thumbnail or name opens the details panel; the checkbox toggles
+ * selection. A selected tile, and the one open in the panel, get a ring.
  */
-export function MediaAssetCard({ asset, selected, onToggleSelect, onAction, canCreate, canUpdate, canDelete }) {
+export function MediaAssetCard({ asset, selected, active = false, onToggleSelect, onAction, canCreate, canUpdate, canDelete, justUploaded = false }) {
     const intl = useIntl();
     const handlers = buildAssetHandlers(asset, onAction);
-    return (_jsxs("div", { className: cn('group relative overflow-hidden rounded-xl border bg-card transition-shadow hover:shadow-md', selected && 'ring-2 ring-primary ring-offset-1'), children: [_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => onAction('open', asset), "aria-label": intl.formatMessage(messages.open, {
+    const isImage = asset.kind === MEDIA_KIND.Image;
+    const extension = isImage ? null : fileExtension(asset.name);
+    const missingAlt = isImage && !asset.alt?.trim();
+    const meta = [
+        // A clip's duration is already on its thumbnail.
+        asset.dimensions
+            ? `${asset.dimensions.width}×${asset.dimensions.height}`
+            : null,
+        formatBytes(asset.size)
+    ]
+        .filter(Boolean)
+        .join(' · ');
+    return (_jsxs("div", { "aria-current": active ? 'true' : undefined, className: cn('group relative overflow-hidden rounded-xl border bg-card transition-shadow hover:shadow-md', (selected || active) && 'ring-2 ring-primary ring-offset-1', justUploaded && 'ds-item-enter'), children: [_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => onAction('open', asset), "aria-label": intl.formatMessage(messages.open, {
                             name: asset.name
-                        }), className: "block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(MediaThumbnail, { asset: asset, className: "aspect-[4/3] w-full" }) }), _jsx("div", { className: cn('absolute left-2 top-2 rounded-md bg-background/80 p-0.5 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover:opacity-100', selected ? 'opacity-100' : 'opacity-0'), children: _jsx(Checkbox, { checked: selected, onCheckedChange: () => onToggleSelect(asset.id), "aria-label": intl.formatMessage(messages.select, {
+                        }), className: "block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(MediaThumbnail, { asset: asset, className: "aspect-[4/3] w-full", label: extension }) }), _jsx("div", { className: cn('absolute left-2 top-2 rounded-md bg-background/80 p-0.5 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover:opacity-100', selected ? 'opacity-100' : 'opacity-0'), children: _jsx(Checkbox, { checked: selected, onCheckedChange: () => onToggleSelect(asset.id), "aria-label": intl.formatMessage(messages.select, {
                                 name: asset.name
-                            }) }) }), _jsx("div", { className: "absolute right-2 top-2 rounded-md bg-background/80 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover:opacity-100 sm:opacity-0", children: _jsx(AssetActionsMenu, { handlers: handlers, assetName: asset.name, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }) })] }), _jsxs("div", { className: "p-3", children: [_jsx("button", { type: "button", onClick: () => onAction('open', asset), className: "block w-full truncate text-left text-sm font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: asset.name, children: asset.name }), _jsxs("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: [formatBytes(asset.size), asset.dimensions
-                                ? ` · ${asset.dimensions.width}×${asset.dimensions.height}`
-                                : null] })] })] }));
+                            }) }) }), _jsx("div", { className: "absolute right-2 top-2 rounded-md bg-background/80 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover:opacity-100 sm:opacity-0", children: _jsx(AssetActionsMenu, { handlers: handlers, assetName: asset.name, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }) }), missingAlt ? (_jsx(Badge, { variant: "warning", size: "xs", className: "pointer-events-none absolute bottom-2 left-2 shadow-sm", children: intl.formatMessage(messages.noAlt) })) : null] }), _jsxs("div", { className: "px-3 py-2.5", children: [_jsx("button", { type: "button", onClick: () => onAction('open', asset), className: "block w-full truncate text-left text-sm font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: asset.name, children: asset.name }), _jsx("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: meta })] })] }));
 }

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

@@ -1,20 +1,20 @@
 import type { MediaAsset } from '../../types/mediaAsset';
-import type { MediaFolder } from '../../types/mediaFolder';
 import type { AssetActionKind } from '../AssetActionsMenu';
 /**
- * The grid view of the open folder — a responsive grid of folder tiles above a
- * responsive grid of asset tiles, each under a small section label (shown only
- * when both kinds are present). Purely presentational: selection state and every
+ * The grid view of the open folder's files — a responsive grid of asset
+ * tiles. Folders are not tiles here: they live in the folder tree beside the
+ * grid (with their own ⋯ menu), so the grid is the folder's files alone.
+ *
+ * Columns follow the **pane's** width, not the viewport's (a container query),
+ * so opening the details panel beside the grid drops a column instead of
+ * squeezing every tile. Purely presentational: selection state and every
  * action are dispatched up to the page.
  */
-export declare function MediaGrid({ folders, assets, folderCounts, selectedIds, onOpenFolder, onRenameFolder, onDeleteFolder, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }: {
-    folders: MediaFolder[];
+export declare function MediaGrid({ assets, selectedIds, activeId, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }: {
     assets: MediaAsset[];
-    folderCounts: Map<string, number>;
     selectedIds: Set<string>;
-    onOpenFolder: (folderId: string) => void;
-    onRenameFolder: (folder: MediaFolder) => void;
-    onDeleteFolder: (folder: MediaFolder) => void;
+    /** The asset open in the details panel. */
+    activeId?: string | null;
     onToggleSelect: (id: string) => void;
     onAssetAction: (kind: AssetActionKind, asset: MediaAsset) => void;
     canCreate: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaGrid/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAU3D;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,EACtB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,cAAc,EACd,cAAc,EACd,cAAc,EACd,aAAa,EACb,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAuDA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaGrid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG3D;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EACtB,MAAM,EACN,WAAW,EACX,QAAQ,EACR,cAAc,EACd,aAAa,EACb,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,aAAa,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAClE,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAuBA"}

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

@@ -1,20 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { defineMessages, useIntl } from 'react-intl';
-import { MediaFolderCard } from './MediaFolderCard';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useJustCreated } from '@orthacms/utils-admin';
+import { MEDIA_ASSETS_SCOPE } from '../../hooks/useUploadQueue';
 import { MediaAssetCard } from './MediaAssetCard';
-/** Intl descriptors for {@link MediaGrid} section labels, co-located. */
-const messages = defineMessages({
-    folders: { id: 'media.grid.folders', defaultMessage: 'Folders' },
-    files: { id: 'media.grid.files', defaultMessage: 'Files' }
-});
 /**
- * The grid view of the open folder — a responsive grid of folder tiles above a
- * responsive grid of asset tiles, each under a small section label (shown only
- * when both kinds are present). Purely presentational: selection state and every
+ * The grid view of the open folder's files — a responsive grid of asset
+ * tiles. Folders are not tiles here: they live in the folder tree beside the
+ * grid (with their own ⋯ menu), so the grid is the folder's files alone.
+ *
+ * Columns follow the **pane's** width, not the viewport's (a container query),
+ * so opening the details panel beside the grid drops a column instead of
+ * squeezing every tile. Purely presentational: selection state and every
  * action are dispatched up to the page.
  */
-export function MediaGrid({ folders, assets, folderCounts, selectedIds, onOpenFolder, onRenameFolder, onDeleteFolder, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }) {
-    const intl = useIntl();
-    const showLabels = folders.length > 0 && assets.length > 0;
-    return (_jsxs("div", { className: "space-y-6", children: [folders.length > 0 ? (_jsxs("section", { children: [showLabels ? (_jsx("h2", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: intl.formatMessage(messages.folders) })) : null, _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: folders.map((folder) => (_jsx(MediaFolderCard, { folder: folder, assetCount: folderCounts.get(folder.id) ?? 0, onOpen: onOpenFolder, onRename: onRenameFolder, onDelete: onDeleteFolder, canUpdate: canUpdate, canDelete: canDelete }, folder.id))) })] })) : null, assets.length > 0 ? (_jsxs("section", { children: [showLabels ? (_jsx("h2", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: intl.formatMessage(messages.files) })) : null, _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: assets.map((asset) => (_jsx(MediaAssetCard, { asset: asset, selected: selectedIds.has(asset.id), onToggleSelect: onToggleSelect, onAction: onAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }, asset.id))) })] })) : null] }));
+export function MediaGrid({ assets, selectedIds, activeId, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }) {
+    const isJustUploaded = useJustCreated(MEDIA_ASSETS_SCOPE);
+    return (_jsx("div", { className: "@container", children: _jsx("div", { className: "grid grid-cols-2 gap-3 @lg:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5", children: assets.map((asset) => (_jsx(MediaAssetCard, { asset: asset, selected: selectedIds.has(asset.id), active: asset.id === activeId, justUploaded: isJustUploaded(asset.id), onToggleSelect: onToggleSelect, onAction: onAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }, asset.id))) }) }));
 }

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

@@ -1,11 +1,15 @@
 /**
- * The bulk-action bar shown once one or more assets are selected — a "{n}
- * selected" count and, permission-gated, Download / Duplicate / Move / Delete,
- * with a Clear control. The count is visual only (the bar mounts/unmounts with
- * the selection); the page owns any spoken announcement.
+ * The bulk-action bar shown once one or more assets are selected — the
+ * design-system `SelectionBar` the records table uses too, floating at the
+ * bottom centre of the work area: "{n} selected of {total}", then
+ * (permission-gated) Move to… / Download / Duplicate, Delete after a divider,
+ * and a ✕ that clears the selection. The count is visual only (the bar
+ * mounts/unmounts with the selection); the page owns any spoken announcement.
  */
-export declare function MediaSelectionBar({ count, onDownload, onDuplicate, onMove, onDelete, onClear, canCreate, canUpdate, canDelete }: {
+export declare function MediaSelectionBar({ count, total, onDownload, onDuplicate, onMove, onDelete, onClear, canCreate, canUpdate, canDelete }: {
     count: number;
+    /** Every file matching the controls, across pages. */
+    total?: number;
     onDownload: () => void;
     onDuplicate: () => void;
     onMove: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaSelectionBar/index.tsx"],"names":[],"mappings":"AAiBA;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAgEA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaSelectionBar/index.tsx"],"names":[],"mappings":"AAuBA;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,UAAU,EACV,WAAW,EACX,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,MAAM,CAAC;IACd,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAuDA"}

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

@@ -1,26 +1,32 @@
-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 { defineMessages, useIntl } from 'react-intl';
-import { Button, Separator } from '@orthacms/design-system';
-import { Copy, Download, FolderInput, Trash2, X } from 'lucide-react';
+import { Button, SelectionBar, SelectionBarDivider } from '@orthacms/design-system';
+import { Copy, Download, FolderInput, Trash2 } from 'lucide-react';
 /** Intl descriptors for {@link MediaSelectionBar}, co-located. */
 const messages = defineMessages({
+    label: { id: 'media.selection.label', defaultMessage: 'Selection' },
     count: {
         id: 'media.selection.count',
         defaultMessage: '{count, plural, one {# selected} other {# selected}}'
     },
+    of: { id: 'media.selection.of', defaultMessage: 'of {total}' },
     download: { id: 'media.selection.download', defaultMessage: 'Download' },
     duplicate: { id: 'media.selection.duplicate', defaultMessage: 'Duplicate' },
-    move: { id: 'media.selection.move', defaultMessage: 'Move' },
+    move: { id: 'media.selection.move', defaultMessage: 'Move to…' },
     delete: { id: 'media.selection.delete', defaultMessage: 'Delete' },
     clear: { id: 'media.selection.clear', defaultMessage: 'Clear selection' }
 });
 /**
- * The bulk-action bar shown once one or more assets are selected — a "{n}
- * selected" count and, permission-gated, Download / Duplicate / Move / Delete,
- * with a Clear control. The count is visual only (the bar mounts/unmounts with
- * the selection); the page owns any spoken announcement.
+ * The bulk-action bar shown once one or more assets are selected — the
+ * design-system `SelectionBar` the records table uses too, floating at the
+ * bottom centre of the work area: "{n} selected of {total}", then
+ * (permission-gated) Move to… / Download / Duplicate, Delete after a divider,
+ * and a ✕ that clears the selection. The count is visual only (the bar
+ * mounts/unmounts with the selection); the page owns any spoken announcement.
  */
-export function MediaSelectionBar({ count, onDownload, onDuplicate, onMove, onDelete, onClear, canCreate, canUpdate, canDelete }) {
+export function MediaSelectionBar({ count, total, onDownload, onDuplicate, onMove, onDelete, onClear, canCreate, canUpdate, canDelete }) {
     const intl = useIntl();
-    return (_jsxs("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3 rounded-xl border bg-muted/40 px-4 py-2", children: [_jsx("span", { className: "text-sm font-medium", children: intl.formatMessage(messages.count, { count }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: onDownload, children: [_jsx(Download, { "aria-hidden": true }), intl.formatMessage(messages.download)] }), canCreate ? (_jsxs(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: onDuplicate, children: [_jsx(Copy, { "aria-hidden": true }), intl.formatMessage(messages.duplicate)] })) : null, canUpdate ? (_jsxs(Button, { variant: "outline", size: "sm", className: "shadow-none", onClick: onMove, children: [_jsx(FolderInput, { "aria-hidden": true }), intl.formatMessage(messages.move)] })) : null, canDelete ? (_jsxs(Button, { variant: "outline", size: "sm", className: "text-destructive shadow-none hover:text-destructive", onClick: onDelete, children: [_jsx(Trash2, { "aria-hidden": true }), intl.formatMessage(messages.delete)] })) : null, _jsx(Separator, { orientation: "vertical", className: "h-6" }), _jsxs(Button, { variant: "ghost", size: "sm", className: "shadow-none", onClick: onClear, children: [_jsx(X, { "aria-hidden": true }), intl.formatMessage(messages.clear)] })] })] }));
+    return (_jsxs(SelectionBar, { label: intl.formatMessage(messages.label), clearLabel: intl.formatMessage(messages.clear), onClear: onClear, count: _jsxs(_Fragment, { children: [_jsx("span", { className: "font-medium", children: intl.formatMessage(messages.count, { count }) }), total !== undefined ? (_jsx("span", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.of, {
+                        total: intl.formatNumber(total)
+                    }) })) : null] }), children: [canUpdate ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onMove, children: [_jsx(FolderInput, { "aria-hidden": true }), intl.formatMessage(messages.move)] })) : null, _jsxs(Button, { variant: "ghost", size: "sm", onClick: onDownload, children: [_jsx(Download, { "aria-hidden": true }), intl.formatMessage(messages.download)] }), canCreate ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: onDuplicate, children: [_jsx(Copy, { "aria-hidden": true }), intl.formatMessage(messages.duplicate)] })) : null, canDelete ? (_jsxs(_Fragment, { children: [_jsx(SelectionBarDivider, {}), _jsxs(Button, { variant: "ghost", size: "sm", className: "text-destructive hover:text-destructive", onClick: onDelete, children: [_jsx(Trash2, { "aria-hidden": true }), intl.formatMessage(messages.delete)] })] })) : null] }));
 }

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

@@ -2,18 +2,22 @@ import type { MediaAsset } from '../../types/mediaAsset';
 /**
  * The visual preview for an asset. Image assets render a real thumbnail served
  * from the media API — the small `thumb` derivative by default, or the larger
- * `preview` when `size="preview"` (the detail drawer) — falling back to the
+ * `preview` when `size="preview"` (the details panel) — falling back to the
  * original when no derivative exists (e.g. SVG). A deterministic gradient tile
- * sits underneath as the backdrop / loading state; non-image kinds show it with
- * a centred kind glyph. Video/audio get a play affordance and a duration pill.
- * Sized entirely by the parent via `className` (aspect + radius), so it serves
- * tiles, list rows, and the drawer.
+ * sits underneath as the backdrop / loading state — the image fades in over it
+ * once loaded (`FadeInImage`) — and non-image kinds show it with a centred kind
+ * glyph, over a short `label` (the grid passes the file's extension, so a PDF
+ * and a DOCX don't look alike). Video/audio get a play affordance and a
+ * duration pill. Sized entirely by the parent via `className` (aspect +
+ * radius), so it serves tiles, list rows, and the panel.
  */
-export declare function MediaThumbnail({ asset, className, iconClassName, size }: {
+export declare function MediaThumbnail({ asset, className, iconClassName, label, size }: {
     asset: MediaAsset;
     className?: string;
     iconClassName?: string;
-    /** Which derivative to prefer — the grid uses `thumb`, the drawer `preview`. */
+    /** Text under a non-image's glyph, e.g. `PDF`. Ignored for images. */
+    label?: string | null;
+    /** Which derivative to prefer — the grid uses `thumb`, the panel `preview`. */
     size?: 'thumb' | 'preview';
 }): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaThumbnail/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzD;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,aAAa,EACb,IAAc,EACjB,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gFAAgF;IAChF,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B,+BA4CA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaThumbnail/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAMzD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,aAAa,EACb,KAAK,EACL,IAAc,EACjB,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sEAAsE;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC9B,+BAsDA"}

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

@@ -4,23 +4,26 @@ import { cn } from '@orthacms/design-system';
 import { MEDIA_KIND } from '../../constants';
 import { assetGradient } from '../../utils/assetGradient';
 import { formatDuration } from '../../utils/formatDuration';
+import { FadeInImage } from '../FadeInImage';
 import { MediaKindIcon } from '../MediaKindIcon';
 /**
  * The visual preview for an asset. Image assets render a real thumbnail served
  * from the media API — the small `thumb` derivative by default, or the larger
- * `preview` when `size="preview"` (the detail drawer) — falling back to the
+ * `preview` when `size="preview"` (the details panel) — falling back to the
  * original when no derivative exists (e.g. SVG). A deterministic gradient tile
- * sits underneath as the backdrop / loading state; non-image kinds show it with
- * a centred kind glyph. Video/audio get a play affordance and a duration pill.
- * Sized entirely by the parent via `className` (aspect + radius), so it serves
- * tiles, list rows, and the drawer.
+ * sits underneath as the backdrop / loading state — the image fades in over it
+ * once loaded (`FadeInImage`) — and non-image kinds show it with a centred kind
+ * glyph, over a short `label` (the grid passes the file's extension, so a PDF
+ * and a DOCX don't look alike). Video/audio get a play affordance and a
+ * duration pill. Sized entirely by the parent via `className` (aspect +
+ * radius), so it serves tiles, list rows, and the panel.
  */
-export function MediaThumbnail({ asset, className, iconClassName, size = 'thumb' }) {
+export function MediaThumbnail({ asset, className, iconClassName, label, size = 'thumb' }) {
     const isImage = asset.kind === MEDIA_KIND.Image;
     const isPlayable = asset.kind === MEDIA_KIND.Video || asset.kind === MEDIA_KIND.Audio;
     // Prefer the requested derivative, then the other, then the original.
     const imageSrc = size === 'preview'
         ? (asset.previewUrl ?? asset.thumbUrl ?? asset.url)
         : (asset.thumbUrl ?? asset.previewUrl ?? asset.url);
-    return (_jsxs("div", { className: cn('relative flex items-center justify-center overflow-hidden bg-muted', className), style: { backgroundImage: assetGradient(asset.id) }, children: [_jsx("div", { className: "absolute inset-0 bg-black/5", "aria-hidden": true }), isImage ? (_jsx("img", { src: imageSrc, alt: asset.alt ?? '', loading: "lazy", className: "absolute inset-0 size-full object-cover" })) : (_jsx(MediaKindIcon, { kind: asset.kind, className: cn('relative size-8 text-white/90 drop-shadow-sm', iconClassName) })), isPlayable ? (_jsxs("span", { className: "absolute bottom-1.5 right-1.5 inline-flex items-center gap-1 rounded-md bg-black/55 px-1.5 py-0.5 text-[11px] font-medium text-white", children: [_jsx(Play, { className: "size-3 fill-current", "aria-hidden": true }), asset.duration ? formatDuration(asset.duration) : null] })) : null] }));
+    return (_jsxs("div", { className: cn('relative flex items-center justify-center overflow-hidden bg-muted', className), style: { backgroundImage: assetGradient(asset.id) }, children: [_jsx("div", { className: "absolute inset-0 bg-black/5", "aria-hidden": true }), isImage ? (_jsx(FadeInImage, { src: imageSrc, alt: asset.alt ?? '', loading: "lazy", className: "absolute inset-0 size-full object-cover" })) : (_jsxs("span", { className: "relative flex flex-col items-center gap-1.5", children: [_jsx(MediaKindIcon, { kind: asset.kind, className: cn('size-8 text-white/90 drop-shadow-sm', iconClassName) }), label ? (_jsx("span", { className: "text-xs font-semibold tracking-wide text-white drop-shadow-sm", "aria-hidden": true, children: label })) : null] })), isPlayable ? (_jsxs("span", { className: "absolute bottom-1.5 right-1.5 inline-flex items-center gap-1 rounded-md bg-black/55 px-1.5 py-0.5 text-[11px] font-medium text-white", children: [_jsx(Play, { className: "size-3 fill-current", "aria-hidden": true }), asset.duration ? formatDuration(asset.duration) : null] })) : null] }));
 }

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

@@ -1,19 +1,21 @@
-import { type MediaSort } from '../../constants';
+import { type MediaSort, type MediaView } from '../../constants';
 import type { KindFilter } from '../../hooks/useMediaLibrary';
 /**
- * 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 declare function MediaToolbar({ search, onSearchChange, kindFilter, onKindFilterChange, sort, onSortChange, onNewFolder, onUpload, canCreate }: {
+export declare function MediaToolbar({ search, onSearchChange, kindFilter, onKindFilterChange, sort, onSortChange, view, onViewChange }: {
     search: string;
     onSearchChange: (value: string) => void;
     kindFilter: KindFilter;
     onKindFilterChange: (value: KindFilter) => void;
     sort: MediaSort;
     onSortChange: (value: MediaSort) => void;
-    onNewFolder: () => void;
-    onUpload: () => void;
-    canCreate: boolean;
+    view: MediaView;
+    onViewChange: (value: MediaView) => void;
 }): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaToolbar/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAIH,KAAK,SAAS,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAmD9D;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,QAAQ,EACR,SAAS,EACZ,EAAE;IACC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;CACtB,+BA8GA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaToolbar/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EACd,KAAK,SAAS,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AA8D9D;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,EACzB,MAAM,EACN,cAAc,EACd,UAAU,EACV,kBAAkB,EAClB,IAAI,EACJ,YAAY,EACZ,IAAI,EACJ,YAAY,EACf,EAAE;IACC,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,UAAU,CAAC;IACvB,kBAAkB,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAChD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACzC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CAC5C,+BAiHA"}