@orthacms/media-admin 0.0.0-reserve.0

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

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+export declare function MediaSelectionBar({ count, onDownload, onDuplicate, onMove, onDelete, onClear, canCreate, canUpdate, canDelete }: {
+    count: number;
+    onDownload: () => void;
+    onDuplicate: () => void;
+    onMove: () => void;
+    onDelete: () => void;
+    onClear: () => void;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+/** Intl descriptors for {@link MediaSelectionBar}, co-located. */
+const messages = defineMessages({
+    count: {
+        id: 'media.selection.count',
+        defaultMessage: '{count, plural, one {# selected} other {# selected}}'
+    },
+    download: { id: 'media.selection.download', defaultMessage: 'Download' },
+    duplicate: { id: 'media.selection.duplicate', defaultMessage: 'Duplicate' },
+    move: { id: 'media.selection.move', defaultMessage: 'Move' },
+    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.
+ */
+export function MediaSelectionBar({ count, 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)] })] })] }));
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Total media storage for the workspace.
+ *
+ * `formatBytes` returns a value and its unit as one string, so the figure and
+ * the unit are split here rather than passed to `unit` — keeping the number in
+ * the tabular figure style while the unit stays secondary.
+ */
+export declare function MediaStorageStat(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaStorageStat/index.tsx"],"names":[],"mappings":"AAiBA;;;;;;GAMG;AACH,wBAAgB,gBAAgB,gCAmB/B"}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { StatWidget } from '@orthacms/insights-admin';
+import { useMediaStorage } from '../../hooks/useMediaInsights';
+import { formatBytes } from '../../utils/formatBytes';
+/** Intl descriptors for the storage stat tile, co-located here. */
+const messages = defineMessages({
+    label: {
+        id: 'media.insights.storage.label',
+        defaultMessage: 'Media storage'
+    },
+    assets: {
+        id: 'media.insights.storage.assets',
+        defaultMessage: '{count, number} assets'
+    }
+});
+/**
+ * Total media storage for the workspace.
+ *
+ * `formatBytes` returns a value and its unit as one string, so the figure and
+ * the unit are split here rather than passed to `unit` — keeping the number in
+ * the tabular figure style while the unit stays secondary.
+ */
+export function MediaStorageStat() {
+    const intl = useIntl();
+    const { data, isPending, isError } = useMediaStorage();
+    const [amount, unit] = formatBytes(data?.totalBytes ?? 0).split(' ');
+    return (_jsx(StatWidget, { label: intl.formatMessage(messages.label), value: amount, unit: unit, delta: intl.formatMessage(messages.assets, {
+            count: data?.totalCount ?? 0
+        }), deltaTone: "flat", isPending: isPending, isError: isError }));
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Storage by media kind, measured in **bytes**.
+ *
+ * Bars are bytes and only bytes. An earlier draft scaled the bar by asset count
+ * while the readout showed size, which put two different measures on one row and
+ * made the widget's whole point — that a few videos outweigh thousands of images
+ * — impossible to see.
+ */
+export declare function MediaStorageWidget(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaStorageWidget/index.tsx"],"names":[],"mappings":"AAsDA;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,gCA4DjC"}

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { BarRows, WidgetCard } from '@orthacms/insights-admin';
+import { useMediaStorage } from '../../hooks/useMediaInsights';
+import { formatBytes } from '../../utils/formatBytes';
+/** Intl descriptors for the storage widget, co-located here. */
+const messages = defineMessages({
+    title: {
+        id: 'media.insights.storageBreakdown.title',
+        defaultMessage: "What's using the storage"
+    },
+    description: {
+        id: 'media.insights.storageBreakdown.description',
+        defaultMessage: '{bytes} across {count, number} assets'
+    },
+    tip: {
+        id: 'media.insights.storageBreakdown.tip',
+        defaultMessage: '{kind} — {bytes} across {count, number} assets'
+    },
+    footer: {
+        id: 'media.insights.storageBreakdown.footer',
+        defaultMessage: '{kind} is {countShare}% of the assets and {byteShare}% of the storage.'
+    },
+    image: { id: 'media.insights.kind.image', defaultMessage: 'Image' },
+    video: { id: 'media.insights.kind.video', defaultMessage: 'Video' },
+    audio: { id: 'media.insights.kind.audio', defaultMessage: 'Audio' },
+    document: {
+        id: 'media.insights.kind.document',
+        defaultMessage: 'Document'
+    },
+    archive: { id: 'media.insights.kind.archive', defaultMessage: 'Archive' }
+});
+/**
+ * Ramp steps by rank, deepest first.
+ *
+ * Here the ramp genuinely does encode magnitude — the rows arrive sorted by
+ * bytes — so colour and length say the same thing. That is the one case where
+ * ranking the ramp is correct rather than misleading.
+ */
+const RANK_TONES = ['q5', 'q4', 'q3', 'q2', 'q1'];
+/** Falls back to the raw kind if the server ever adds one the UI doesn't know. */
+function kindLabel(kind, intl) {
+    const descriptor = messages[kind];
+    return descriptor ? intl.formatMessage(descriptor) : kind;
+}
+/**
+ * Storage by media kind, measured in **bytes**.
+ *
+ * Bars are bytes and only bytes. An earlier draft scaled the bar by asset count
+ * while the readout showed size, which put two different measures on one row and
+ * made the widget's whole point — that a few videos outweigh thousands of images
+ * — impossible to see.
+ */
+export function MediaStorageWidget() {
+    const intl = useIntl();
+    const { data, isPending, isError } = useMediaStorage();
+    const kinds = data?.kinds ?? [];
+    const max = Math.max(...kinds.map((kind) => kind.bytes), 0);
+    const rows = kinds.map((kind, index) => {
+        const label = kindLabel(kind.kind, intl);
+        return {
+            id: kind.kind,
+            label,
+            segments: [
+                {
+                    id: kind.kind,
+                    value: kind.bytes,
+                    tone: RANK_TONES[index] ?? 'q1',
+                    label: intl.formatMessage(messages.tip, {
+                        kind: label,
+                        bytes: formatBytes(kind.bytes),
+                        count: kind.count
+                    })
+                }
+            ],
+            readout: formatBytes(kind.bytes)
+        };
+    });
+    // The heaviest kind is the one worth calling out, and it is first because
+    // the server sorts by bytes.
+    const heaviest = kinds[0];
+    const footer = heaviest && data && data.totalBytes > 0 && data.totalCount > 0
+        ? intl.formatMessage(messages.footer, {
+            kind: kindLabel(heaviest.kind, intl),
+            countShare: Math.round((heaviest.count / data.totalCount) * 100),
+            byteShare: Math.round((heaviest.bytes / data.totalBytes) * 100)
+        })
+        : undefined;
+    return (_jsx(WidgetCard, { title: intl.formatMessage(messages.title), description: intl.formatMessage(messages.description, {
+            bytes: formatBytes(data?.totalBytes ?? 0),
+            count: data?.totalCount ?? 0
+        }), footer: footer, isPending: isPending, isError: isError, isEmpty: kinds.length === 0, skeletonRows: 5, children: _jsx(BarRows, { rows: rows, max: max }) }));
+}

package/dist/lib/components/MediaTable/MediaAssetRow/index.d.ts

@@ -0,0 +1,17 @@
+import type { MediaAsset } from '../../../types/mediaAsset';
+import { type AssetActionKind } from '../../AssetActionsMenu';
+/**
+ * One asset row in the list view — a leading select checkbox, a mini thumbnail +
+ * clickable name, the kind badge, size, dimensions, and last-modified date, plus
+ * the shared ⋯ menu. Clicking the name opens the detail drawer.
+ */
+export declare function MediaAssetRow({ asset, selected, onToggleSelect, onAction, canCreate, canUpdate, canDelete }: {
+    asset: MediaAsset;
+    selected: boolean;
+    onToggleSelect: (id: string) => void;
+    onAction: (kind: AssetActionKind, asset: MediaAsset) => void;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/MediaTable/MediaAssetRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaTable/MediaAssetRow/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,EAEH,KAAK,eAAe,EACvB,MAAM,wBAAwB,CAAC;AAWhC;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BA6EA"}

package/dist/lib/components/MediaTable/MediaFolderRow/index.d.ts

@@ -0,0 +1,16 @@
+import type { MediaFolder } from '../../../types/mediaFolder';
+/**
+ * One folder row in the list view — a folder glyph + clickable name that opens
+ * the folder, a "Folder" badge, and its item count, with the shared folder ⋯
+ * menu. Folders aren't selectable, so the leading checkbox cell stays empty.
+ */
+export declare function MediaFolderRow({ folder, assetCount, onOpen, onRename, onDelete, canUpdate, canDelete }: {
+    folder: MediaFolder;
+    assetCount: number;
+    onOpen: (folderId: string) => void;
+    onRename: (folder: MediaFolder) => void;
+    onDelete: (folder: MediaFolder) => void;
+    canUpdate: boolean;
+    canDelete: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/MediaTable/MediaFolderRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaTable/MediaFolderRow/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAc9D;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,UAAU,EACV,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACZ,EAAE;IACC,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BA+DA"}

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

@@ -0,0 +1,26 @@
+import type { MediaAsset } from '../../types/mediaAsset';
+import type { MediaFolder } from '../../types/mediaFolder';
+import type { AssetActionKind } from '../AssetActionsMenu';
+/**
+ * The list view of the open folder — a table with folder rows above asset rows.
+ * The header carries a select-all checkbox (toggling every visible asset) and
+ * columns that progressively hide on narrower viewports. Purely presentational:
+ * selection and actions dispatch up to the page.
+ */
+export declare function MediaTable({ folders, assets, folderCounts, selectedIds, allSelected, onToggleAll, onOpenFolder, onRenameFolder, onDeleteFolder, onToggleSelect, onAssetAction, canCreate, canUpdate, canDelete }: {
+    folders: MediaFolder[];
+    assets: MediaAsset[];
+    folderCounts: Map<string, number>;
+    selectedIds: Set<string>;
+    allSelected: boolean;
+    onToggleAll: () => void;
+    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/MediaTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaTable/index.tsx"],"names":[],"mappings":"AASA,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;AAe3D;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACvB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,WAAW,EACX,WAAW,EACX,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,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,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,+BAuEA"}

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

@@ -0,0 +1,19 @@
+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
+ * original when no derivative exists (e.g. SVG). A deterministic gradient tile
+ * sits underneath as the backdrop / loading state; non-image kinds show it with
+ * a centred kind glyph. Video/audio get a play affordance and a duration pill.
+ * Sized entirely by the parent via `className` (aspect + radius), so it serves
+ * tiles, list rows, and the drawer.
+ */
+export declare function MediaThumbnail({ asset, className, iconClassName, size }: {
+    asset: MediaAsset;
+    className?: string;
+    iconClassName?: string;
+    /** Which derivative to prefer — the grid uses `thumb`, the drawer `preview`. */
+    size?: 'thumb' | 'preview';
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Play } from 'lucide-react';
+import { cn } from '@orthacms/design-system';
+import { MEDIA_KIND } from '../../constants';
+import { assetGradient } from '../../utils/assetGradient';
+import { formatDuration } from '../../utils/formatDuration';
+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
+ * original when no derivative exists (e.g. SVG). A deterministic gradient tile
+ * sits underneath as the backdrop / loading state; non-image kinds show it with
+ * a centred kind glyph. Video/audio get a play affordance and a duration pill.
+ * Sized entirely by the parent via `className` (aspect + radius), so it serves
+ * tiles, list rows, and the drawer.
+ */
+export function MediaThumbnail({ asset, className, iconClassName, size = 'thumb' }) {
+    const isImage = asset.kind === MEDIA_KIND.Image;
+    const isPlayable = asset.kind === MEDIA_KIND.Video || asset.kind === MEDIA_KIND.Audio;
+    // Prefer the requested derivative, then the other, then the original.
+    const imageSrc = size === 'preview'
+        ? (asset.previewUrl ?? asset.thumbUrl ?? asset.url)
+        : (asset.thumbUrl ?? asset.previewUrl ?? asset.url);
+    return (_jsxs("div", { className: cn('relative flex items-center justify-center overflow-hidden bg-muted', className), style: { backgroundImage: assetGradient(asset.id) }, children: [_jsx("div", { className: "absolute inset-0 bg-black/5", "aria-hidden": true }), isImage ? (_jsx("img", { src: imageSrc, alt: asset.alt ?? '', loading: "lazy", className: "absolute inset-0 size-full object-cover" })) : (_jsx(MediaKindIcon, { kind: asset.kind, className: cn('relative size-8 text-white/90 drop-shadow-sm', iconClassName) })), isPlayable ? (_jsxs("span", { className: "absolute bottom-1.5 right-1.5 inline-flex items-center gap-1 rounded-md bg-black/55 px-1.5 py-0.5 text-[11px] font-medium text-white", children: [_jsx(Play, { className: "size-3 fill-current", "aria-hidden": true }), asset.duration ? formatDuration(asset.duration) : null] })) : null] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaToolbar/index.tsx"],"names":[],"mappings":"AAaA,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,+BA0GA"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, 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';
+/** Intl descriptors for {@link MediaToolbar}, co-located. */
+const messages = defineMessages({
+    search: { id: 'media.toolbar.search', defaultMessage: 'Search assets' },
+    searchPlaceholder: {
+        id: 'media.toolbar.searchPlaceholder',
+        defaultMessage: 'Search name or tag…'
+    },
+    kindLabel: {
+        id: 'media.toolbar.kindLabel',
+        defaultMessage: 'Filter by type'
+    },
+    kindAll: { id: 'media.toolbar.kindAll', defaultMessage: 'All types' },
+    kindImage: { id: 'media.toolbar.kindImage', defaultMessage: 'Images' },
+    kindVideo: { id: 'media.toolbar.kindVideo', defaultMessage: 'Videos' },
+    kindAudio: { id: 'media.toolbar.kindAudio', defaultMessage: 'Audio' },
+    kindDocument: {
+        id: 'media.toolbar.kindDocument',
+        defaultMessage: 'Documents'
+    },
+    kindArchive: {
+        id: 'media.toolbar.kindArchive',
+        defaultMessage: 'Archives'
+    },
+    sortLabel: { id: 'media.toolbar.sortLabel', defaultMessage: 'Sort' },
+    sortNewest: {
+        id: 'media.toolbar.sortNewest',
+        defaultMessage: 'Newest first'
+    },
+    sortOldest: {
+        id: 'media.toolbar.sortOldest',
+        defaultMessage: 'Oldest first'
+    },
+    sortNameAsc: {
+        id: 'media.toolbar.sortNameAsc',
+        defaultMessage: 'Name A–Z'
+    },
+    sortNameDesc: {
+        id: 'media.toolbar.sortNameDesc',
+        defaultMessage: 'Name Z–A'
+    },
+    sortLargest: { id: 'media.toolbar.sortLargest', defaultMessage: 'Largest' },
+    sortSmallest: {
+        id: 'media.toolbar.sortSmallest',
+        defaultMessage: 'Smallest'
+    },
+    newFolder: { id: 'media.toolbar.newFolder', defaultMessage: 'New folder' },
+    upload: { id: 'media.toolbar.upload', defaultMessage: 'Upload' }
+});
+/**
+ * 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.
+ */
+export function MediaToolbar({ search, onSearchChange, kindFilter, onKindFilterChange, sort, onSortChange, onNewFolder, onUpload, canCreate }) {
+    const intl = useIntl();
+    return (_jsxs("div", { className: "mb-4 flex flex-wrap items-center gap-2 sm:gap-3", 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 })] }));
+}

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

@@ -0,0 +1,20 @@
+import type { MediaFolder } from '../../types/mediaFolder';
+/**
+ * The page top bar over the Media Library — the teal `Image` tile (matching the
+ * plugin's workspace-nav entry) beside a breadcrumb tracing the open location:
+ * Media Library › each ancestor folder › the open folder. Sticky to the top of
+ * the page, spanning the folder sidebar and the browser both, the same
+ * page-context header every other admin page carries.
+ *
+ * Unlike the Content Library's bar this one is **not** route-derived: folder
+ * navigation here is component state, not a URL segment, so the crumbs come from
+ * 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.
+ */
+export declare function MediaTopBar({ breadcrumbs, onNavigate }: {
+    /** Ancestor chain of the open folder, root-first (excludes the root itself). */
+    breadcrumbs: MediaFolder[];
+    onNavigate: (folderId: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,35 @@
+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 { ROOT_FOLDER_ID } from '../../constants';
+/** Intl descriptors for {@link MediaTopBar}, co-located. */
+const messages = defineMessages({
+    nav: { id: 'media.topbar.nav', defaultMessage: 'Breadcrumb' },
+    root: { id: 'media.topbar.root', defaultMessage: 'Media Library' }
+});
+/**
+ * The page top bar over the Media Library — the teal `Image` tile (matching the
+ * plugin's workspace-nav entry) beside a breadcrumb tracing the open location:
+ * Media Library › each ancestor folder › the open folder. Sticky to the top of
+ * the page, spanning the folder sidebar and the browser both, the same
+ * page-context header every other admin page carries.
+ *
+ * Unlike the Content Library's bar this one is **not** route-derived: folder
+ * navigation here is component state, not a URL segment, so the crumbs come from
+ * 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.
+ */
+export function MediaTopBar({ breadcrumbs, onNavigate }) {
+    const intl = useIntl();
+    const crumbs = [
+        { id: ROOT_FOLDER_ID, name: intl.formatMessage(messages.root) },
+        ...breadcrumbs.map((folder) => ({ id: folder.id, name: folder.name }))
+    ];
+    const last = crumbs.length - 1;
+    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)
+                    ]) }) })] }));
+}

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

@@ -0,0 +1,14 @@
+import type { UploadItem } from '../../../types/upload';
+/**
+ * One file's row in the upload banner: its name and size, a right-hand status
+ * (a live percentage, a tick, or the failure reason), and — while it is running
+ * — a thin progress bar. A failed or cancelled row offers **Retry**; a pending
+ * or in-flight one offers **Cancel**. A settled row offers neither, so the
+ * control column doesn't flicker as the batch drains.
+ */
+export declare function MediaUploadRow({ item, onRetry, onCancel }: {
+    item: UploadItem;
+    onRetry: (id: string) => void;
+    onCancel: (id: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaUploadBanner/MediaUploadRow/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAiBxD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,OAAO,EACP,QAAQ,EACX,EAAE;IACC,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC,+BA6FA"}

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

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Progress, Spinner, cn } from '@orthacms/design-system';
+import { AlertCircle, Check, RotateCcw, X } from 'lucide-react';
+import { UPLOAD_STATUS } from '../../../constants';
+import { formatBytes } from '../../../utils/formatBytes';
+/** Intl descriptors for {@link MediaUploadRow}, co-located. */
+const messages = defineMessages({
+    waiting: { id: 'media.uploadRow.waiting', defaultMessage: 'Waiting…' },
+    done: { id: 'media.uploadRow.done', defaultMessage: 'Uploaded' },
+    cancelled: { id: 'media.uploadRow.cancelled', defaultMessage: 'Cancelled' },
+    percent: { id: 'media.uploadRow.percent', defaultMessage: '{percent}%' },
+    progressLabel: {
+        id: 'media.uploadRow.progressLabel',
+        defaultMessage: 'Upload progress for {name}'
+    },
+    retry: { id: 'media.uploadRow.retry', defaultMessage: 'Retry {name}' },
+    cancel: { id: 'media.uploadRow.cancel', defaultMessage: 'Cancel {name}' }
+});
+/**
+ * One file's row in the upload banner: its name and size, a right-hand status
+ * (a live percentage, a tick, or the failure reason), and — while it is running
+ * — a thin progress bar. A failed or cancelled row offers **Retry**; a pending
+ * or in-flight one offers **Cancel**. A settled row offers neither, so the
+ * control column doesn't flicker as the batch drains.
+ */
+export function MediaUploadRow({ item, onRetry, onCancel }) {
+    const intl = useIntl();
+    const isFailed = item.status === UPLOAD_STATUS.Failed;
+    const isDone = item.status === UPLOAD_STATUS.Done;
+    const isCancelled = item.status === UPLOAD_STATUS.Cancelled;
+    const isUploading = item.status === UPLOAD_STATUS.Uploading;
+    const isPending = item.status === UPLOAD_STATUS.Pending;
+    return (_jsxs("li", { className: "flex flex-col gap-1 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [isDone ? (_jsx(Check, { className: "size-4 shrink-0 text-primary", "aria-hidden": true })) : isFailed ? (_jsx(AlertCircle, { className: "size-4 shrink-0 text-destructive", "aria-hidden": true })) : isUploading ? (_jsx(Spinner, { className: "size-4 shrink-0", "aria-hidden": true })) : (_jsx("span", { className: "size-4 shrink-0", "aria-hidden": true })), _jsx("span", { className: cn('min-w-0 flex-1 truncate', isCancelled && 'text-muted-foreground line-through'), children: item.name }), _jsx("span", { className: cn('shrink-0 text-xs tabular-nums text-muted-foreground', isFailed && 'text-destructive'), children: isFailed
+                            ? (item.error ?? formatBytes(item.size))
+                            : isDone
+                                ? intl.formatMessage(messages.done)
+                                : isCancelled
+                                    ? intl.formatMessage(messages.cancelled)
+                                    : isPending
+                                        ? intl.formatMessage(messages.waiting)
+                                        : intl.formatMessage(messages.percent, {
+                                            percent: item.progress
+                                        }) }), isFailed || isCancelled ? (_jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.retry, {
+                            name: item.name
+                        }), onClick: () => onRetry(item.id), children: _jsx(RotateCcw, { "aria-hidden": true }) })) : isDone ? null : (_jsx(Button, { variant: "ghost", size: "icon", className: "size-7 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.cancel, {
+                            name: item.name
+                        }), onClick: () => onCancel(item.id), children: _jsx(X, { "aria-hidden": true }) }))] }), isUploading ? (_jsx(Progress, { value: item.progress, className: "h-1", "aria-label": intl.formatMessage(messages.progressLabel, {
+                    name: item.name
+                }) })) : null] }));
+}

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

@@ -0,0 +1,24 @@
+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.
+ *
+ * `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
+ * file list would read all N rows aloud on each progress tick. Scoped to the
+ * headline, a screen-reader user hears "Uploading 3 of 5 · 47%" and then the
+ * completion, while per-file detail stays available to read on demand.
+ *
+ * Renders nothing when the queue is empty.
+ */
+export declare function MediaUploadBanner({ items, summary, onRetry, onCancel, onDismiss }: {
+    items: UploadItem[];
+    summary: UploadSummary;
+    onRetry: (id: string) => void;
+    onCancel: (id: string) => void;
+    onDismiss: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}