@orthacms/media-admin 0.0.0-reserve.0

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Folder } from 'lucide-react';
+import { FolderActionsMenu } from '../../FolderActionsMenu';
+/** Intl descriptors for {@link MediaFolderCard}, co-located. */
+const messages = defineMessages({
+    open: { id: 'media.folderCard.open', defaultMessage: 'Open folder {name}' },
+    count: {
+        id: 'media.folderCard.count',
+        defaultMessage: '{count, plural, one {# item} other {# items}}'
+    }
+});
+/**
+ * A folder tile in the grid — a folder glyph, name, and item count, with a hover
+ * ⋯ menu (Open / Rename / Delete). The tile body is a single button that opens
+ * the folder; the menu sits outside it so the two controls don't nest.
+ */
+export function MediaFolderCard({ folder, assetCount, onOpen, onRename, onDelete, canUpdate, canDelete }) {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "group relative rounded-xl border bg-card transition-colors hover:border-primary/40 hover:bg-accent/40", children: [_jsxs("button", { type: "button", onClick: () => onOpen(folder.id), onDoubleClick: () => onOpen(folder.id), "aria-label": intl.formatMessage(messages.open, {
+                    name: folder.name
+                }), className: "flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: _jsx(Folder, { className: "size-5", "aria-hidden": true }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-sm font-medium", children: folder.name }), _jsx("span", { className: "block text-xs text-muted-foreground", children: intl.formatMessage(messages.count, {
+                                    count: assetCount
+                                }) })] })] }), _jsx("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100", children: _jsx(FolderActionsMenu, { name: folder.name, onOpen: () => onOpen(folder.id), onRename: () => onRename(folder), onDelete: () => onDelete(folder), canUpdate: canUpdate, canDelete: canDelete }) })] }));
+}

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

@@ -0,0 +1,24 @@
+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
+ * 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[];
+    assets: MediaAsset[];
+    folderCounts: Map<string, number>;
+    selectedIds: Set<string>;
+    onOpenFolder: (folderId: string) => void;
+    onRenameFolder: (folder: MediaFolder) => void;
+    onDeleteFolder: (folder: MediaFolder) => void;
+    onToggleSelect: (id: string) => void;
+    onAssetAction: (kind: AssetActionKind, asset: MediaAsset) => void;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+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
+ * action are dispatched up to the page.
+ */
+export function MediaGrid({ folders, assets, folderCounts, selectedIds, onOpenFolder, onRenameFolder, onDeleteFolder, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }) {
+    const intl = useIntl();
+    const showLabels = folders.length > 0 && assets.length > 0;
+    return (_jsxs("div", { className: "space-y-6", children: [folders.length > 0 ? (_jsxs("section", { children: [showLabels ? (_jsx("h2", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: intl.formatMessage(messages.folders) })) : null, _jsx("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4", children: folders.map((folder) => (_jsx(MediaFolderCard, { folder: folder, assetCount: folderCounts.get(folder.id) ?? 0, onOpen: onOpenFolder, onRename: onRenameFolder, onDelete: onDeleteFolder, canUpdate: canUpdate, canDelete: canDelete }, folder.id))) })] })) : null, assets.length > 0 ? (_jsxs("section", { children: [showLabels ? (_jsx("h2", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: intl.formatMessage(messages.files) })) : null, _jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: assets.map((asset) => (_jsx(MediaAssetCard, { asset: asset, selected: selectedIds.has(asset.id), onToggleSelect: onToggleSelect, onAction: onAssetAction, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }, asset.id))) })] })) : null] }));
+}

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

@@ -0,0 +1,10 @@
+import { type MediaKind } from '../../constants';
+/**
+ * A small labelled badge for an asset {@link MediaKind} — a kind glyph beside its
+ * localized name. Shared by the list view and the detail drawer so the kind reads
+ * the same everywhere.
+ */
+export declare function MediaKindBadge({ kind }: {
+    kind: MediaKind;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaKindBadge/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAqB7D;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,+BAQ3D"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Badge } from '@orthacms/design-system';
+import { MEDIA_KIND } from '../../constants';
+import { MediaKindIcon } from '../MediaKindIcon';
+/** Intl descriptors for the asset-kind labels, co-located. */
+const messages = defineMessages({
+    image: { id: 'media.kind.image', defaultMessage: 'Image' },
+    video: { id: 'media.kind.video', defaultMessage: 'Video' },
+    audio: { id: 'media.kind.audio', defaultMessage: 'Audio' },
+    document: { id: 'media.kind.document', defaultMessage: 'Document' },
+    archive: { id: 'media.kind.archive', defaultMessage: 'Archive' }
+});
+/** Maps each kind to its label descriptor. */
+const KIND_LABEL = {
+    [MEDIA_KIND.Image]: messages.image,
+    [MEDIA_KIND.Video]: messages.video,
+    [MEDIA_KIND.Audio]: messages.audio,
+    [MEDIA_KIND.Document]: messages.document,
+    [MEDIA_KIND.Archive]: messages.archive
+};
+/**
+ * A small labelled badge for an asset {@link MediaKind} — a kind glyph beside its
+ * localized name. Shared by the list view and the detail drawer so the kind reads
+ * the same everywhere.
+ */
+export function MediaKindBadge({ kind }) {
+    const intl = useIntl();
+    return (_jsxs(Badge, { variant: "secondary", className: "gap-1 font-medium", children: [_jsx(MediaKindIcon, { kind: kind, className: "size-3" }), intl.formatMessage(KIND_LABEL[kind])] }));
+}

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

@@ -0,0 +1,11 @@
+import { type MediaKind } from '../../constants';
+/**
+ * Renders the icon that stands for an asset {@link MediaKind}. A tiny shared
+ * mapping so the kind glyph stays identical on tiles, list rows, and the detail
+ * drawer. Decorative by default — pass `aria-hidden` context from the parent.
+ */
+export declare function MediaKindIcon({ kind, className }: {
+    kind: MediaKind;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaKindIcon/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAW7D;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,IAAI,EACJ,SAAS,EACZ,EAAE;IACC,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BAGA"}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Archive, FileText, Image, Music, Video } from 'lucide-react';
+import { MEDIA_KIND } from '../../constants';
+/** The Lucide glyph representing each asset kind. */
+const KIND_ICON = {
+    [MEDIA_KIND.Image]: Image,
+    [MEDIA_KIND.Video]: Video,
+    [MEDIA_KIND.Audio]: Music,
+    [MEDIA_KIND.Document]: FileText,
+    [MEDIA_KIND.Archive]: Archive
+};
+/**
+ * Renders the icon that stands for an asset {@link MediaKind}. A tiny shared
+ * mapping so the kind glyph stays identical on tiles, list rows, and the detail
+ * drawer. Decorative by default — pass `aria-hidden` context from the parent.
+ */
+export function MediaKindIcon({ kind, className }) {
+    const Icon = KIND_ICON[kind];
+    return _jsx(Icon, { className: className, "aria-hidden": true });
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Full-page placeholder for the Media Library's lazy-route `Suspense` fallback,
+ * mounted in the workspace shell at `/workspaces/:id/media/*`.
+ *
+ * The bar is **real**, not a skeleton: it is the page's identity, and it is
+ * where the sidebar-reveal trigger lives when the app sidebar is collapsed, so
+ * it must paint before the chunk lands. It composes the `TopBar` primitives
+ * here rather than reusing {@link MediaTopBar} — that module reaches into the
+ * library's own internals and pulls ~19 kB into the eager graph, which is a
+ * poor trade for a placeholder. What it renders is the trail the real bar shows
+ * at the root folder, so nothing moves when the page takes over; the folder
+ * crumbs arrive with the data that names them.
+ *
+ * The body mirrors the page's two-column shell — the folder rail and the asset
+ * grid — so the columns don't jump into place on swap.
+ */
+export declare function MediaLibraryPageSkeleton(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaLibrarySkeleton/index.tsx"],"names":[],"mappings":"AAuCA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,wBAAwB,gCAyEvC"}

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

@@ -0,0 +1,43 @@
+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, BreadcrumbList, BreadcrumbPage, Skeleton, TopBar, TopBarIcon } from '@orthacms/design-system';
+/** Intl descriptors for the media-library skeleton, co-located here. */
+const messages = defineMessages({
+    nav: {
+        id: 'media.topbar.nav',
+        defaultMessage: 'Breadcrumb'
+    },
+    root: {
+        id: 'media.topbar.root',
+        defaultMessage: 'Media Library'
+    },
+    loading: {
+        id: 'media.skeleton.loading',
+        defaultMessage: 'Loading media library…'
+    }
+});
+/** A placeholder folder row in the nav rail. */
+function FolderRowSkeleton() {
+    return (_jsxs("div", { className: "flex items-center gap-2 px-2 py-1.5", children: [_jsx(Skeleton, { className: "size-4 shrink-0 rounded" }), _jsx(Skeleton, { className: "h-4 flex-1" }), _jsx(Skeleton, { className: "h-3 w-6 shrink-0" })] }));
+}
+/**
+ * Full-page placeholder for the Media Library's lazy-route `Suspense` fallback,
+ * mounted in the workspace shell at `/workspaces/:id/media/*`.
+ *
+ * The bar is **real**, not a skeleton: it is the page's identity, and it is
+ * where the sidebar-reveal trigger lives when the app sidebar is collapsed, so
+ * it must paint before the chunk lands. It composes the `TopBar` primitives
+ * here rather than reusing {@link MediaTopBar} — that module reaches into the
+ * library's own internals and pulls ~19 kB into the eager graph, which is a
+ * poor trade for a placeholder. What it renders is the trail the real bar shows
+ * at the root folder, so nothing moves when the page takes over; the folder
+ * crumbs arrive with the data that names them.
+ *
+ * The body mirrors the page's two-column shell — the folder rail and the asset
+ * grid — so the columns don't jump into place on swap.
+ */
+export function MediaLibraryPageSkeleton() {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [_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: _jsx(BreadcrumbItem, { className: "min-w-0 whitespace-nowrap", children: _jsx(BreadcrumbPage, { className: "flex min-w-0 items-center font-medium", children: intl.formatMessage(messages.root) }) }) }) })] }), _jsxs("div", { role: "status", className: "flex min-h-0 min-w-0 flex-1 flex-col lg:flex-row", children: [_jsx("span", { className: "sr-only", children: intl.formatMessage(messages.loading) }), _jsxs("div", { "aria-hidden": true, className: "hidden h-full w-60 shrink-0 flex-col overflow-hidden lg:flex lg:border-r", children: [_jsxs("div", { className: "flex items-center gap-2 p-2", children: [_jsx(Skeleton, { className: "size-4 shrink-0 rounded" }), _jsx(Skeleton, { className: "h-4 w-24" })] }), _jsx("div", { className: "flex flex-col gap-0.5 px-2", children: Array.from({ length: 6 }).map((_, index) => (_jsx(FolderRowSkeleton, {}, index))) })] }), _jsx("div", { "aria-hidden": true, className: "min-w-0 flex-1 overflow-hidden", children: _jsxs("div", { className: "p-4 sm:p-6", children: [_jsxs("div", { className: "mb-4 flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-8 w-48" }), _jsx(Skeleton, { className: "h-4 w-72 max-w-full" })] }), _jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-3", children: [_jsx(Skeleton, { className: "h-9 w-full sm:max-w-[320px]" }), _jsx(Skeleton, { className: "h-9 w-32" }), _jsx(Skeleton, { className: "ml-auto h-9 w-28" })] }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5", children: Array.from({ length: 10 }).map((_, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-xl border p-2", children: [_jsx(Skeleton, { className: "aspect-square w-full rounded-lg" }), _jsx(Skeleton, { className: "h-4 w-3/4" }), _jsx(Skeleton, { className: "h-3 w-1/2" })] }, index))) })] }) })] })] }));
+}

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

@@ -0,0 +1,26 @@
+/**
+ * The grid's footer bar: an assets-per-page selector and an "{from}–{to} of
+ * {total}" readout, with previous/next controls once there is more than one
+ * page. Mirrors the Members and Activity pagers so the three list surfaces
+ * behave the same.
+ *
+ * Real buttons rather than link-styled anchors, because the page is component
+ * state and not yet a URL — they disable cleanly at either end. (Moving this
+ * state into the query string belongs with the folder-deep-linking work, which
+ * has to put the open folder there too.)
+ *
+ * Rendered even at one page, so the per-page control and the count stay put
+ * instead of appearing and vanishing as a filter narrows the folder.
+ */
+export declare function MediaPagination({ page, pageCount, pageSize, total, onPageChange, onPageSizeChange }: {
+    /** 1-based current page. */
+    page: number;
+    /** How many pages the current search and filter produce; at least 1. */
+    pageCount: number;
+    pageSize: number;
+    /** Assets matching across the whole folder — not the number on screen. */
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaPagination/index.tsx"],"names":[],"mappings":"AAwCA;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAAC,EAC5B,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,gBAAgB,EACnB,EAAE;IACC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,wEAAwE;IACxE,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,+BAmFA"}

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button, Pagination, PaginationContent, PaginationItem, Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@orthacms/design-system';
+import { ASSETS_PAGE_SIZE_OPTIONS } from '../../constants';
+/** Intl descriptors for {@link MediaPagination}, co-located here. */
+const messages = defineMessages({
+    perPage: {
+        id: 'media.pagination.perPage',
+        defaultMessage: 'Assets per page'
+    },
+    range: {
+        id: 'media.pagination.range',
+        defaultMessage: '{from}–{to} of {total}'
+    },
+    previous: {
+        id: 'media.pagination.previous',
+        defaultMessage: 'Previous page'
+    },
+    next: {
+        id: 'media.pagination.next',
+        defaultMessage: 'Next page'
+    },
+    page: {
+        id: 'media.pagination.page',
+        defaultMessage: 'Page {page} of {pageCount}'
+    }
+});
+/**
+ * The grid's footer bar: an assets-per-page selector and an "{from}–{to} of
+ * {total}" readout, with previous/next controls once there is more than one
+ * page. Mirrors the Members and Activity pagers so the three list surfaces
+ * behave the same.
+ *
+ * Real buttons rather than link-styled anchors, because the page is component
+ * state and not yet a URL — they disable cleanly at either end. (Moving this
+ * state into the query string belongs with the folder-deep-linking work, which
+ * has to put the open folder there too.)
+ *
+ * Rendered even at one page, so the per-page control and the count stay put
+ * instead of appearing and vanishing as a filter narrows the folder.
+ */
+export function MediaPagination({ page, pageCount, pageSize, total, onPageChange, onPageSizeChange }) {
+    const intl = useIntl();
+    const perPageLabel = intl.formatMessage(messages.perPage);
+    const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
+    const to = Math.min(page * pageSize, total);
+    return (_jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: perPageLabel }), _jsxs(Select, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), children: [_jsx(SelectTrigger, { className: "h-8 w-[72px] rounded-lg shadow-none", "aria-label": perPageLabel, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { className: "rounded-lg shadow-none", children: _jsx(SelectGroup, { children: ASSETS_PAGE_SIZE_OPTIONS.map((size) => (_jsx(SelectItem, { value: String(size), children: size }, size))) }) })] })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: intl.formatMessage(messages.range, { from, to, total }) }), pageCount > 1 ? (_jsx(Pagination, { className: "mx-0 w-auto", children: _jsxs(PaginationContent, { className: "gap-3", children: [_jsx(PaginationItem, { children: _jsx(Button, { variant: "outline", size: "icon", className: "size-8 shadow-none", disabled: page <= 1, onClick: () => onPageChange(page - 1), "aria-label": intl.formatMessage(messages.previous), children: _jsx(ChevronLeft, {}) }) }), _jsx(PaginationItem, { children: _jsx("span", { className: "text-sm text-muted-foreground", children: intl.formatMessage(messages.page, {
+                                            page,
+                                            pageCount
+                                        }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { variant: "outline", size: "icon", className: "size-8 shadow-none", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), "aria-label": intl.formatMessage(messages.next), children: _jsx(ChevronRight, {}) }) })] }) })) : null] })] }));
+}

package/dist/lib/components/MediaPickerDialog/MediaPickerTile/index.d.ts

@@ -0,0 +1,17 @@
+import type { MediaAsset } from '../../../types/mediaAsset';
+/**
+ * One candidate asset in the {@link MediaPickerDialog} — a thumbnail over the
+ * file name and its size / dimensions, as a single toggle button (`aria-pressed`
+ * carries the selection to assistive tech). A selected tile takes the primary
+ * ring and a check; one already attached to the field is marked so the user
+ * doesn't pick a duplicate — it stays clickable, since in single mode re-picking
+ * the current asset is a legitimate no-op.
+ */
+export declare function MediaPickerTile({ asset, picked, attached, onToggle }: {
+    asset: MediaAsset;
+    picked: boolean;
+    /** Already on the field — rendered as a badge, still selectable. */
+    attached: boolean;
+    onToggle: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/MediaPickerDialog/MediaPickerTile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaPickerDialog/MediaPickerTile/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAgB5D;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,MAAM,EACN,QAAQ,EACR,QAAQ,EACX,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,oEAAoE;IACpE,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,+BAsDA"}

package/dist/lib/components/MediaPickerDialog/MediaPickerTile/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Check } from 'lucide-react';
+import { cn } from '@orthacms/design-system';
+import { formatBytes } from '../../../utils/formatBytes';
+import { MediaThumbnail } from '../../MediaThumbnail';
+/** Intl descriptors for {@link MediaPickerTile}, co-located. */
+const messages = defineMessages({
+    attached: {
+        id: 'media.pickerTile.attached',
+        defaultMessage: 'Attached'
+    },
+    attachedHint: {
+        id: 'media.pickerTile.attachedHint',
+        defaultMessage: '{name} — already attached to this field'
+    }
+});
+/**
+ * One candidate asset in the {@link MediaPickerDialog} — a thumbnail over the
+ * file name and its size / dimensions, as a single toggle button (`aria-pressed`
+ * carries the selection to assistive tech). A selected tile takes the primary
+ * ring and a check; one already attached to the field is marked so the user
+ * doesn't pick a duplicate — it stays clickable, since in single mode re-picking
+ * the current asset is a legitimate no-op.
+ */
+export function MediaPickerTile({ asset, picked, attached, onToggle }) {
+    const intl = useIntl();
+    const meta = [
+        formatBytes(asset.size),
+        asset.dimensions
+            ? `${asset.dimensions.width}×${asset.dimensions.height}`
+            : null
+    ]
+        .filter(Boolean)
+        .join(' · ');
+    return (_jsxs("button", { type: "button", "aria-pressed": picked, onClick: onToggle, title: attached
+            ? intl.formatMessage(messages.attachedHint, {
+                name: asset.name
+            })
+            : asset.name, className: cn('group/tile relative block w-full overflow-hidden rounded-lg border bg-card text-left transition hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1', picked
+            ? 'border-primary ring-2 ring-primary'
+            : 'hover:border-primary/40'), children: [_jsx(MediaThumbnail, { asset: asset, className: "aspect-[4/3] w-full" }), picked ? (_jsx("span", { className: "absolute right-1.5 top-1.5 grid size-5 place-items-center rounded-full bg-primary text-primary-foreground shadow-sm", children: _jsx(Check, { className: "size-3", "aria-hidden": true }) })) : null, attached ? (_jsx("span", { className: "absolute left-1.5 top-1.5 rounded bg-background/85 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground shadow-sm backdrop-blur", children: intl.formatMessage(messages.attached) })) : null, _jsxs("span", { className: "block min-w-0 px-2.5 py-2", children: [_jsx("span", { className: "block truncate text-xs font-medium", children: asset.name }), _jsx("span", { className: "block truncate text-[11px] text-muted-foreground", children: meta })] })] }));
+}

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

@@ -0,0 +1,21 @@
+import type { MediaAsset } from '../../types/mediaAsset';
+import { type MediaAccept } from '../../utils/mediaAccept';
+/**
+ * A modal picker over the Media Library for a content record's media field.
+ * Reuses {@link useMediaLibrary} for browsing — a breadcrumb + folder chips to
+ * walk the tree in **both** directions, plus search, a type filter, and a sort —
+ * and narrows the candidates to the field's `accept` restriction. Single mode
+ * selects exactly one (confirming on pick is avoided so the user can preview);
+ * multiple accumulates a set, marking what the field already holds. Fully
+ * controlled — the caller owns the field value.
+ */
+export declare function MediaPickerDialog({ open, onOpenChange, multiple, accept, attachedIds, onConfirm }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    multiple: boolean;
+    accept?: MediaAccept;
+    /** Ids already on the field — marked in the grid so a pick isn't a duplicate. */
+    attachedIds?: string[];
+    onConfirm: (assets: MediaAsset[]) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaPickerDialog/index.tsx"],"names":[],"mappings":"AA2CA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAwHzE;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,WAAW,EACX,SAAS,EACZ,EAAE;IACC,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,SAAS,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CAC7C,+BAuVA"}

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

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { FileSearch, Folder, Search, TriangleAlert } from 'lucide-react';
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, InputGroup, InputGroupAddon, InputGroupInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Skeleton } from '@orthacms/design-system';
+import { KIND_FILTER_ALL, MEDIA_KIND, MEDIA_SORT, PICKER_ASSETS_PAGE_SIZE, ROOT_FOLDER_ID } from '../../constants';
+import { useMediaLibrary } from '../../hooks/useMediaLibrary';
+import { acceptsAsset } from '../../utils/mediaAccept';
+import { MediaPickerTile } from './MediaPickerTile';
+const messages = defineMessages({
+    titleSingle: {
+        id: 'media.picker.titleSingle',
+        defaultMessage: 'Select an asset'
+    },
+    titleMultiple: {
+        id: 'media.picker.titleMultiple',
+        defaultMessage: 'Select assets'
+    },
+    descriptionSingle: {
+        id: 'media.picker.descriptionSingle',
+        defaultMessage: 'Browse the Media Library and pick the asset for this field.'
+    },
+    descriptionMultiple: {
+        id: 'media.picker.descriptionMultiple',
+        defaultMessage: 'Browse the Media Library and pick every asset to attach — they are added in the order you select them.'
+    },
+    search: { id: 'media.picker.search', defaultMessage: 'Search assets' },
+    searchPlaceholder: {
+        id: 'media.picker.searchPlaceholder',
+        defaultMessage: 'Search name or tag…'
+    },
+    root: { id: 'media.picker.root', defaultMessage: 'All media' },
+    breadcrumb: {
+        id: 'media.picker.breadcrumb',
+        defaultMessage: 'Folder path'
+    },
+    folders: { id: 'media.picker.folders', defaultMessage: 'Folders' },
+    kindLabel: {
+        id: 'media.picker.kindLabel',
+        defaultMessage: 'Filter by type'
+    },
+    kindAll: { id: 'media.picker.kindAll', defaultMessage: 'All types' },
+    kindImage: { id: 'media.picker.kindImage', defaultMessage: 'Images' },
+    kindVideo: { id: 'media.picker.kindVideo', defaultMessage: 'Videos' },
+    kindAudio: { id: 'media.picker.kindAudio', defaultMessage: 'Audio' },
+    kindDocument: {
+        id: 'media.picker.kindDocument',
+        defaultMessage: 'Documents'
+    },
+    kindArchive: { id: 'media.picker.kindArchive', defaultMessage: 'Archives' },
+    sortLabel: { id: 'media.picker.sortLabel', defaultMessage: 'Sort' },
+    sortNewest: {
+        id: 'media.picker.sortNewest',
+        defaultMessage: 'Newest first'
+    },
+    sortOldest: {
+        id: 'media.picker.sortOldest',
+        defaultMessage: 'Oldest first'
+    },
+    sortNameAsc: { id: 'media.picker.sortNameAsc', defaultMessage: 'Name A–Z' },
+    sortNameDesc: {
+        id: 'media.picker.sortNameDesc',
+        defaultMessage: 'Name Z–A'
+    },
+    emptyTitle: {
+        id: 'media.picker.emptyTitle',
+        defaultMessage: 'Nothing to pick here'
+    },
+    emptyBody: {
+        id: 'media.picker.emptyBody',
+        defaultMessage: 'This folder has no asset this field accepts. Try another folder, or upload a file from the field.'
+    },
+    filteredTitle: {
+        id: 'media.picker.filteredTitle',
+        defaultMessage: 'No matching assets'
+    },
+    filteredBody: {
+        id: 'media.picker.filteredBody',
+        defaultMessage: 'Try a different search term or clear the filters.'
+    },
+    clear: { id: 'media.picker.clear', defaultMessage: 'Clear filters' },
+    errorTitle: {
+        id: 'media.picker.errorTitle',
+        defaultMessage: 'Couldn’t load the library'
+    },
+    errorBody: {
+        id: 'media.picker.errorBody',
+        defaultMessage: 'The Media Library didn’t load — this isn’t the same as having no assets. Try again, or check that you have access to it.'
+    },
+    retry: { id: 'media.picker.retry', defaultMessage: 'Try again' },
+    cancel: { id: 'media.picker.cancel', defaultMessage: 'Cancel' },
+    confirmSingle: {
+        id: 'media.picker.confirmSingle',
+        defaultMessage: 'Select asset'
+    },
+    confirmMultiple: {
+        id: 'media.picker.confirmMultiple',
+        defaultMessage: 'Add selected'
+    },
+    selected: {
+        id: 'media.picker.selected',
+        defaultMessage: '{count, plural, one {# asset selected} other {# assets selected}}'
+    },
+    nothingSelected: {
+        id: 'media.picker.nothingSelected',
+        defaultMessage: 'Nothing selected yet'
+    }
+});
+/** The filter label for each asset kind, so the select can list only allowed ones. */
+const KIND_LABEL = {
+    [MEDIA_KIND.Image]: messages.kindImage,
+    [MEDIA_KIND.Video]: messages.kindVideo,
+    [MEDIA_KIND.Audio]: messages.kindAudio,
+    [MEDIA_KIND.Document]: messages.kindDocument,
+    [MEDIA_KIND.Archive]: messages.kindArchive
+};
+/** How many placeholder tiles stand in for the first, unknown-size page. */
+const SKELETON_TILES = 8;
+/**
+ * A modal picker over the Media Library for a content record's media field.
+ * Reuses {@link useMediaLibrary} for browsing — a breadcrumb + folder chips to
+ * walk the tree in **both** directions, plus search, a type filter, and a sort —
+ * and narrows the candidates to the field's `accept` restriction. Single mode
+ * selects exactly one (confirming on pick is avoided so the user can preview);
+ * multiple accumulates a set, marking what the field already holds. Fully
+ * controlled — the caller owns the field value.
+ */
+export function MediaPickerDialog({ open, onOpenChange, multiple, accept, attachedIds, onConfirm }) {
+    const intl = useIntl();
+    // No pager in this dialog: it is a picker, and the way you narrow it is by
+    // typing. One large page keeps that true — and the search reaching it is now
+    // the server's, so it finds a file anywhere in the folder rather than only
+    // among the ones that happened to load.
+    const library = useMediaLibrary(open, {
+        pageSize: PICKER_ASSETS_PAGE_SIZE
+    });
+    const [picked, setPicked] = useState(new Map());
+    const attached = useMemo(() => new Set(attachedIds ?? []), [attachedIds]);
+    // Candidates: the folder's search/kind-filtered assets, further restricted
+    // to what the field accepts (the server enforces this too, on save).
+    const candidates = useMemo(() => library.visibleAssets.filter((a) => acceptsAsset(accept, a)), [library.visibleAssets, accept]);
+    // Only the kinds this field can hold are worth filtering by; a field pinned
+    // to one kind gets no select at all (it would have a single option).
+    const kindOptions = useMemo(() => {
+        const all = Object.values(MEDIA_KIND);
+        if (accept?.mimeTypes?.length || !accept?.kinds?.length)
+            return all;
+        const allowed = accept.kinds;
+        return all.filter((kind) => allowed.includes(kind));
+    }, [accept]);
+    const hasFilters = !!library.search.trim() || library.kindFilter !== KIND_FILTER_ALL;
+    const clearFilters = () => {
+        library.setSearch('');
+        library.setKindFilter(KIND_FILTER_ALL);
+    };
+    const toggle = (asset) => {
+        setPicked((current) => {
+            const next = new Map(multiple ? current : []);
+            if (next.has(asset.id))
+                next.delete(asset.id);
+            else
+                next.set(asset.id, asset);
+            return next;
+        });
+    };
+    const close = () => {
+        setPicked(new Map());
+        // A search left over from the last visit would silently hide the library
+        // the next time the dialog opens.
+        clearFilters();
+        onOpenChange(false);
+    };
+    const confirm = () => {
+        onConfirm([...picked.values()]);
+        close();
+    };
+    const crumbs = [
+        { id: ROOT_FOLDER_ID, name: intl.formatMessage(messages.root) },
+        ...library.breadcrumbs.map((folder) => ({
+            id: folder.id,
+            name: folder.name
+        }))
+    ];
+    const lastCrumb = crumbs.length - 1;
+    return (_jsx(Dialog, { open: open, onOpenChange: (next) => (next ? null : close()), children: _jsxs(DialogContent, { className: "flex max-h-[85vh] w-[min(56rem,92vw)] max-w-none flex-col gap-4 overflow-hidden", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: intl.formatMessage(multiple
+                                ? messages.titleMultiple
+                                : messages.titleSingle) }), _jsx(DialogDescription, { children: intl.formatMessage(multiple
+                                ? messages.descriptionMultiple
+                                : messages.descriptionSingle) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(InputGroup, { className: "w-full shadow-none sm:w-auto sm:min-w-[16rem] sm:flex-1", children: [_jsx(InputGroupAddon, { children: _jsx(Search, {}) }), _jsx(InputGroupInput, { type: "search", value: library.search, onChange: (event) => library.setSearch(event.target.value), "aria-label": intl.formatMessage(messages.search), placeholder: intl.formatMessage(messages.searchPlaceholder) })] }), kindOptions.length > 1 ? (_jsxs(Select, { value: library.kindFilter, onValueChange: (value) => library.setKindFilter(value), children: [_jsx(SelectTrigger, { className: "w-[9.5rem] 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) }), kindOptions.map((kind) => (_jsx(SelectItem, { value: kind, children: intl.formatMessage(KIND_LABEL[kind]) }, kind)))] })] })) : null, _jsxs(Select, { value: library.sort, onValueChange: (value) => library.setSort(value), children: [_jsx(SelectTrigger, { className: "w-[9.5rem] 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(Breadcrumb, { "aria-label": intl.formatMessage(messages.breadcrumb), className: "min-h-8", children: _jsx(BreadcrumbList, { className: "text-xs", children: crumbs.map((crumb, index) => [
+                            index > 0 ? (_jsx(BreadcrumbSeparator, {}, `${crumb.id}-sep`)) : null,
+                            _jsx(BreadcrumbItem, { className: "min-w-0 whitespace-nowrap", children: index === lastCrumb ? (_jsx(BreadcrumbPage, { className: "font-medium", children: crumb.name })) : (_jsx(BreadcrumbLink, { asChild: true, children: _jsx("button", { type: "button", onClick: () => library.navigateTo(crumb.id), children: crumb.name }) })) }, crumb.id)
+                        ]) }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto rounded-lg border bg-muted/20 p-3", children: [library.childFolders.length > 0 ? (_jsx("ul", { "aria-label": intl.formatMessage(messages.folders), className: "mb-3 flex flex-wrap gap-1.5", children: library.childFolders.map((folder) => (_jsx("li", { children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "bg-card shadow-none", onClick: () => library.navigateTo(folder.id), children: [_jsx(Folder, { className: "size-3.5", "aria-hidden": true }), folder.name] }) }, folder.id))) })) : null, library.isError ? (
+                        /* An error is NOT the empty state: telling someone the
+                           folder has nothing they can pick, when the read
+                           actually failed (or they lack `media:read`), sends
+                           them off to hunt for assets that are right there. */
+                        _jsxs(Empty, { className: "py-10", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(TriangleAlert, { "aria-hidden": true }) }), _jsx(EmptyTitle, { className: "text-base", children: intl.formatMessage(messages.errorTitle) }), _jsx(EmptyDescription, { role: "alert", children: intl.formatMessage(messages.errorBody) })] }), _jsx(EmptyContent, { children: _jsx(Button, { type: "button", variant: "outline", className: "shadow-none", onClick: library.reload, children: intl.formatMessage(messages.retry) }) })] })) : library.isLoading ? (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: Array.from({ length: SKELETON_TILES }, (_, index) => (_jsx("li", { children: _jsx(Skeleton, { className: "aspect-[4/3] w-full rounded-lg" }) }, index))) })) : candidates.length === 0 ? (_jsxs(Empty, { className: "py-10", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(FileSearch, { "aria-hidden": true }) }), _jsx(EmptyTitle, { className: "text-base", children: intl.formatMessage(hasFilters
+                                                ? messages.filteredTitle
+                                                : messages.emptyTitle) }), _jsx(EmptyDescription, { children: intl.formatMessage(hasFilters
+                                                ? messages.filteredBody
+                                                : messages.emptyBody) })] }), hasFilters ? (_jsx(EmptyContent, { children: _jsx(Button, { type: "button", variant: "outline", className: "shadow-none", onClick: clearFilters, children: intl.formatMessage(messages.clear) }) })) : null] })) : (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4", children: candidates.map((asset) => (_jsx("li", { children: _jsx(MediaPickerTile, { asset: asset, picked: picked.has(asset.id), attached: attached.has(asset.id), onToggle: () => toggle(asset) }) }, asset.id))) }))] }), _jsxs(DialogFooter, { className: "items-center sm:justify-between", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: picked.size > 0
+                                ? intl.formatMessage(messages.selected, {
+                                    count: picked.size
+                                })
+                                : intl.formatMessage(messages.nothingSelected) }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: close, children: intl.formatMessage(messages.cancel) }), _jsx(Button, { type: "button", onClick: confirm, disabled: picked.size === 0, children: intl.formatMessage(multiple
+                                        ? messages.confirmMultiple
+                                        : messages.confirmSingle) })] })] })] }) }));
+}