@orthacms/media-admin 0.10.3 → 0.12.0

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,12 @@
 import type { UploadItem, UploadSummary } from '../../types/upload';
 /**
- * The upload progress banner — the batch headline ("Uploading 3 of 5 · 47%"), an
- * overall size-weighted bar while anything is running, and one
- * {@link MediaUploadRow} per file. It sits above the browser rather than inside
- * the upload dialog, so the dialog can close on submit and the user keeps
- * browsing (and can queue more) while bytes move.
+ * The upload tray — a small card pinned to the **bottom-right** of the window
+ * with the batch headline ("Uploading 3 of 5 · 47%"), an overall size-weighted
+ * bar while anything is running, and one {@link MediaUploadRow} per file (the
+ * chevron folds the list away, leaving the headline). It floats outside the
+ * upload dialog and over the browser rather than pushing the grid down, so the
+ * dialog can close on submit and the user keeps browsing, selecting and
+ * queueing more while bytes move.
  *
  * `role="status"` sits on the **headline alone**, not the whole banner: a polite
  * live region re-announces its entire contents on every change, so wrapping the

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

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

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

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Button, Progress } from '@orthacms/design-system';
-import { UploadCloud, X } from 'lucide-react';
+import { Button, Progress, cn } from '@orthacms/design-system';
+import { ChevronDown, UploadCloud, X } from 'lucide-react';
 import { UPLOAD_STATUS } from '../../constants';
 import { MediaUploadRow } from './MediaUploadRow';
 /** Intl descriptors for {@link MediaUploadBanner}, co-located. */
@@ -29,6 +29,10 @@ const messages = defineMessages({
         defaultMessage: 'Overall upload progress'
     },
     dismiss: { id: 'media.uploadBanner.dismiss', defaultMessage: 'Dismiss' },
+    collapse: {
+        id: 'media.uploadBanner.collapse',
+        defaultMessage: 'Show the files'
+    },
     /** Announced when one file in a batch fails — the row itself is silent. */
     failureAnnouncement: {
         id: 'media.uploadBanner.failureAnnouncement',
@@ -36,11 +40,13 @@ const messages = defineMessages({
     }
 });
 /**
- * The upload progress banner — the batch headline ("Uploading 3 of 5 · 47%"), an
- * overall size-weighted bar while anything is running, and one
- * {@link MediaUploadRow} per file. It sits above the browser rather than inside
- * the upload dialog, so the dialog can close on submit and the user keeps
- * browsing (and can queue more) while bytes move.
+ * The upload tray — a small card pinned to the **bottom-right** of the window
+ * with the batch headline ("Uploading 3 of 5 · 47%"), an overall size-weighted
+ * bar while anything is running, and one {@link MediaUploadRow} per file (the
+ * chevron folds the list away, leaving the headline). It floats outside the
+ * upload dialog and over the browser rather than pushing the grid down, so the
+ * dialog can close on submit and the user keeps browsing, selecting and
+ * queueing more while bytes move.
  *
  * `role="status"` sits on the **headline alone**, not the whole banner: a polite
  * live region re-announces its entire contents on every change, so wrapping the
@@ -52,6 +58,7 @@ const messages = defineMessages({
  */
 export function MediaUploadBanner({ items, summary, onRetry, onCancel, onDismiss }) {
     const intl = useIntl();
+    const [open, setOpen] = useState(true);
     // Failures are announced from their own region. The headline's counts move
     // when a file fails, but "3 of 5" never says *which* file or why — and the
     // rows carrying that sentence sit outside the live region on purpose (a
@@ -95,5 +102,5 @@ export function MediaUploadBanner({ items, summary, onRetry, onCancel, onDismiss
             : summary.failed > 0
                 ? intl.formatMessage(messages.allFailed, { failed: summary.failed })
                 : intl.formatMessage(messages.complete, { count: summary.done });
-    return (_jsxs("section", { "aria-label": intl.formatMessage(messages.region), className: "mb-4 rounded-xl border bg-muted/40 px-4 py-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UploadCloud, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("p", { className: "min-w-0 flex-1 text-sm font-medium", role: "status", children: headline }), summary.active ? null : (_jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.dismiss), onClick: onDismiss, children: _jsx(X, { "aria-hidden": true }) }))] }), summary.active ? (_jsx(Progress, { value: summary.percent, className: "mt-2 h-1.5", "aria-label": intl.formatMessage(messages.overall) })) : null, _jsx("p", { className: "sr-only", role: "status", children: failureNotice }), _jsx("ul", { className: "mt-1 max-h-48 divide-y overflow-auto", children: items.map((item) => (_jsx(MediaUploadRow, { item: item, onRetry: onRetry, onCancel: onCancel }, item.id))) })] }));
+    return (_jsxs("section", { "aria-label": intl.formatMessage(messages.region), className: "fixed bottom-4 right-4 z-30 w-80 max-w-[calc(100vw-2rem)] rounded-xl border bg-popover px-4 py-3 text-popover-foreground shadow-lg", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UploadCloud, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }), _jsx("p", { className: "min-w-0 flex-1 text-sm font-medium", role: "status", children: headline }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.collapse), "aria-expanded": open, onClick: () => setOpen((value) => !value), children: _jsx(ChevronDown, { "aria-hidden": true, className: cn('transition-transform duration-(--ds-duration-base) motion-reduce:transition-none', !open && 'rotate-180') }) }), summary.active ? null : (_jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.dismiss), onClick: onDismiss, children: _jsx(X, { "aria-hidden": true }) }))] }), summary.active ? (_jsx(Progress, { value: summary.percent, className: "mt-2 h-1.5", "aria-label": intl.formatMessage(messages.overall) })) : null, _jsx("p", { className: "sr-only", role: "status", children: failureNotice }), _jsx("ul", { className: cn('mt-1 max-h-48 divide-y overflow-auto', !open && 'hidden'), children: items.map((item) => (_jsx(MediaUploadRow, { item: item, onRetry: onRetry, onCancel: onCancel }, item.id))) })] }));
 }

package/dist/lib/components/UploadDialog/StagedFileRow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/UploadDialog/StagedFileRow/index.tsx"],"names":[],"mappings":"AAiDA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,GAAQ,EACR,UAAkB,EAClB,WAAW,EACX,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,IAAI,CAAC;IACX,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,+BAyEA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/UploadDialog/StagedFileRow/index.tsx"],"names":[],"mappings":"AAkDA;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,GAAQ,EACR,UAAkB,EAClB,WAAW,EACX,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,IAAI,CAAC;IACX,6CAA6C;IAC7C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,+BAyEA"}

package/dist/lib/components/UploadDialog/StagedFileRow/index.js

@@ -4,6 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { Button, InputField } from '@orthacms/design-system';
 import { FileText, Film, Music, Package, X } from 'lucide-react';
 import { formatBytes } from '../../../utils/formatBytes';
+import { FadeInImage } from '../../FadeInImage';
 /** Intl descriptors for {@link StagedFileRow}, co-located. */
 const messages = defineMessages({
     remove: { id: 'media.upload.removeFile', defaultMessage: 'Remove {name}' },
@@ -74,7 +75,7 @@ export function StagedFileRow({ file, alt = '', collectAlt = false, onAltChange,
         return () => URL.revokeObjectURL(url);
     }, [file, isImage]);
     const Glyph = glyphFor(file.type);
-    return (_jsxs("li", { className: "flex flex-col gap-2 rounded-lg border bg-background px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: previewUrl ? (_jsx("img", { src: previewUrl, alt: "", className: "size-full object-cover" })) : (_jsx(Glyph, { className: "size-4 text-muted-foreground", "aria-hidden": true })) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: file.name }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatBytes(file.size) }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.remove, {
+    return (_jsxs("li", { className: "flex flex-col gap-2 rounded-lg border bg-background px-3 py-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted", children: previewUrl ? (_jsx(FadeInImage, { src: previewUrl, alt: "", className: "size-full object-cover" })) : (_jsx(Glyph, { className: "size-4 text-muted-foreground", "aria-hidden": true })) }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: file.name }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: formatBytes(file.size) }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.remove, {
                             name: file.name
                         }), onClick: onRemove, children: _jsx(X, { "aria-hidden": true }) })] }), collectAlt && isImage ? (_jsx(InputField, { id: `staged-alt-${altId}`, label: intl.formatMessage(messages.altLabel), "aria-label": intl.formatMessage(messages.altLabelFor, {
                     name: file.name

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

@@ -79,4 +79,30 @@ export declare const MEDIA_SORT: {
 };
 /** One asset-ordering option. */
 export type MediaSort = (typeof MEDIA_SORT)[keyof typeof MEDIA_SORT];
+/**
+ * The folders column's entry in the shell's panel layout, and its bounds in
+ * pixels. Resizable on a desktop only — below `lg` the folders open in a
+ * drawer, which has no edge to drag.
+ */
+export declare const MEDIA_FOLDERS_PANEL: {
+    readonly id: "media.folders";
+    readonly defaultWidth: 240;
+    readonly minWidth: 192;
+    readonly maxWidth: 384;
+    readonly maxViewportRatio: 0.2;
+    readonly cssVar: "--media-folders-width";
+};
+/**
+ * How the library draws the open folder's files: tiles, or the design-system
+ * table. Remembered per browser under {@link MEDIA_VIEW_STORAGE_KEY} — a
+ * reading preference, not shared state.
+ */
+export declare const MEDIA_VIEW: {
+    readonly Grid: "grid";
+    readonly List: "list";
+};
+/** One way of drawing the files. */
+export type MediaView = (typeof MEDIA_VIEW)[keyof typeof MEDIA_VIEW];
+/** Where the chosen {@link MediaView} is kept (`localStorage`). */
+export declare const MEDIA_VIEW_STORAGE_KEY = "orthacms.media.view";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/constants/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,+EAA+E;AAC/E,eAAO,MAAM,UAAU,eAAe,CAAC;AAEvC,qDAAqD;AACrD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,6DAA6D;AAC7D,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,wDAAwD;AACxD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,4EAA4E;AAC5E,eAAO,MAAM,cAAc,SAAS,CAAC;AAErC,0CAA0C;AAC1C,eAAO,MAAM,aAAa;IACtB,8CAA8C;;IAE9C,6BAA6B;;;;IAI7B,8CAA8C;;CAExC,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,4EAA4E;AAC5E,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,eAAe,QAAQ,CAAC;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,iEAAiE;AACjE,eAAO,MAAM,wBAAwB,UAAe,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0CAA0C;AAC1C,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/constants/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,+EAA+E;AAC/E,eAAO,MAAM,UAAU,eAAe,CAAC;AAEvC,qDAAqD;AACrD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,6DAA6D;AAC7D,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C,wDAAwD;AACxD,eAAO,MAAM,YAAY,iBAAiB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,UAAU,CAAC;AAErC,4EAA4E;AAC5E,eAAO,MAAM,cAAc,SAAS,CAAC;AAErC,0CAA0C;AAC1C,eAAO,MAAM,aAAa;IACtB,8CAA8C;;IAE9C,6BAA6B;;;;IAI7B,8CAA8C;;CAExC,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAEpC,4EAA4E;AAC5E,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,eAAe,QAAQ,CAAC;AAErC;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C,iEAAiE;AACjE,eAAO,MAAM,wBAAwB,UAAe,CAAC;AAErD;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAE3C,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAEtC,0CAA0C;AAC1C,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAC;AAEX,iCAAiC;AACjC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB;;;;;;;CAOtB,CAAC;AAEX;;;;GAIG;AACH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,oCAAoC;AACpC,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAErE,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,wBAAwB,CAAC"}

package/dist/lib/constants/index.js

@@ -73,3 +73,27 @@ export const MEDIA_SORT = {
     Largest: 'largest',
     Smallest: 'smallest'
 };
+/**
+ * The folders column's entry in the shell's panel layout, and its bounds in
+ * pixels. Resizable on a desktop only — below `lg` the folders open in a
+ * drawer, which has no edge to drag.
+ */
+export const MEDIA_FOLDERS_PANEL = {
+    id: 'media.folders',
+    defaultWidth: 240,
+    minWidth: 192,
+    maxWidth: 384,
+    maxViewportRatio: 0.2,
+    cssVar: '--media-folders-width'
+};
+/**
+ * How the library draws the open folder's files: tiles, or the design-system
+ * table. Remembered per browser under {@link MEDIA_VIEW_STORAGE_KEY} — a
+ * reading preference, not shared state.
+ */
+export const MEDIA_VIEW = {
+    Grid: 'grid',
+    List: 'list'
+};
+/** Where the chosen {@link MediaView} is kept (`localStorage`). */
+export const MEDIA_VIEW_STORAGE_KEY = 'orthacms.media.view';

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

@@ -1,5 +1,7 @@
 import type { UploadItem, UploadSummary } from '../../types/upload';
 import type { StagedUpload } from '../../infrastructure/mediaGateway';
+/** The `justCreated` scope of the library's asset tiles. */
+export declare const MEDIA_ASSETS_SCOPE = "media-assets";
 /**
  * The Media Library's upload queue: turns a set of picked files into a list of
  * progress-tracked items, uploading at most {@link UPLOAD_CONCURRENCY} at once.

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useUploadQueue/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAiBtE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,IAAI;;;uBAiHrD,YAAY,EAAE;gBAsBnB,MAAM;iBAeN,MAAM;;EAuElB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/hooks/useUploadQueue/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAGpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAiBtE,4DAA4D;AAC5D,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,IAAI;;;uBA4HrD,YAAY,EAAE;gBAsBnB,MAAM;iBAeN,MAAM;;EAuElB"}

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

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import { markJustCreated } from '@orthacms/utils-admin';
 import { UPLOAD_CONCURRENCY, UPLOAD_STATUS } from '../../constants';
 import { httpMediaGateway } from '../../infrastructure/httpMediaGateway';
 import { apiMessage } from '../../infrastructure/apiMessage';
@@ -16,6 +17,8 @@ const SETTLED = [
     UPLOAD_STATUS.Failed,
     UPLOAD_STATUS.Cancelled
 ];
+/** The `justCreated` scope of the library's asset tiles. */
+export const MEDIA_ASSETS_SCOPE = 'media-assets';
 /**
  * The Media Library's upload queue: turns a set of picked files into a list of
  * progress-tracked items, uploading at most {@link UPLOAD_CONCURRENCY} at once.
@@ -51,6 +54,8 @@ export function useUploadQueue(folderId, onUploaded) {
     const activeRef = useRef(0);
     /** Whether the current batch has produced a success worth invalidating for. */
     const successRef = useRef(false);
+    /** Ids of the assets this batch created, marked when the batch settles. */
+    const createdRef = useRef([]);
     const nextIdRef = useRef(0);
     // `pump` and `runOne` call each other; the ref breaks the cycle without
     // rebuilding either callback on every render.
@@ -73,6 +78,14 @@ export function useUploadQueue(folderId, onUploaded) {
         if (activeRef.current === 0 && waitingRef.current.length === 0) {
             if (successRef.current) {
                 successRef.current = false;
+                // Marked here rather than per file: the mark lasts a few
+                // seconds, and the grid only learns of the files from the one
+                // refetch this triggers — a long batch would outlive marks
+                // set as each file landed.
+                for (const assetId of createdRef.current) {
+                    markJustCreated(MEDIA_ASSETS_SCOPE, assetId);
+                }
+                createdRef.current = [];
                 onUploadedRef.current();
             }
         }
@@ -93,8 +106,9 @@ export function useUploadQueue(folderId, onUploaded) {
             signal: controller.signal,
             onProgress: (percent) => patch(id, { progress: percent })
         })
-            .then(() => {
+            .then((asset) => {
             successRef.current = true;
+            createdRef.current.push(asset.id);
             patch(id, {
                 status: UPLOAD_STATUS.Done,
                 progress: 100,

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

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

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

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