@orthacms/media-admin 0.11.0 → 0.12.0

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,19 @@
 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, justUploaded }: {
+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,

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,EACT,YAAoB,EACvB,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;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,+BAuEA"}
+{"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, justUploaded = false }) {
+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', justUploaded && 'ds-item-enter'), 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":"AAGA,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,+BAyDA"}
+{"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,23 +1,18 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { defineMessages, useIntl } from 'react-intl';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { useJustCreated } from '@orthacms/utils-admin';
 import { MEDIA_ASSETS_SCOPE } from '../../hooks/useUploadQueue';
-import { MediaFolderCard } from './MediaFolderCard';
 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();
+export function MediaGrid({ assets, selectedIds, activeId, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }) {
     const isJustUploaded = useJustCreated(MEDIA_ASSETS_SCOPE);
-    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), justUploaded: isJustUploaded(asset.id), onToggleSelect: onToggleSelect, onAction: onAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }, asset.id))) })] })) : null] }));
+    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,19 +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 — the image fades in over it
  * once loaded (`FadeInImage`) — and 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.
+ * 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;AAMzD;;;;;;;;;;GAUG;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

@@ -9,20 +9,21 @@ 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 — the image fades in over it
  * once loaded (`FadeInImage`) — and 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.
+ * 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(FadeInImage, { 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"}

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

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

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

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

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

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

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

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