@orthacms/media-admin 0.10.3 → 0.12.0

package/dist/lib/components/AssetDetailPanel/MetaRow/index.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/**
+ * One label/value line in the details panel’s metadata list — a muted term on
+ * the left and its value on the right, aligned as a `dt`/`dd` pair. Purely
+ * presentational; the panel supplies localized labels and formatted values.
+ */
+export declare function MetaRow({ label, children }: {
+    label: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/AssetDetailPanel/MetaRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/AssetDetailPanel/MetaRow/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EACpB,KAAK,EACL,QAAQ,EACX,EAAE;IACC,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,SAAS,CAAC;CACvB,+BASA"}

package/dist/lib/components/AssetDetailPanel/MetaRow/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One label/value line in the details panel’s metadata list — a muted term on
+ * the left and its value on the right, aligned as a `dt`/`dd` pair. Purely
+ * presentational; the panel supplies localized labels and formatted values.
+ */
+export function MetaRow({ label, children }) {
+    return (_jsxs("div", { className: "flex items-start justify-between gap-4 py-2", children: [_jsx("dt", { className: "shrink-0 text-sm text-muted-foreground", children: label }), _jsx("dd", { className: "min-w-0 truncate text-right text-sm font-medium", children: children })] }));
+}

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

@@ -0,0 +1,35 @@
+import type { MediaAsset } from '../../types/mediaAsset';
+import { type AssetActionKind } from '../AssetActionsMenu';
+/**
+ * The asset details panel — a **non-modal** column beside the grid, not a
+ * drawer over it: the files stay visible and clickable while it is open, and
+ * clicking another one simply shows that file here. Under `lg` the page lays
+ * it over the browser instead (see the page), still without a focus trap.
+ *
+ * Its header names the file and carries Previous / Next (also ← / →, when focus
+ * isn't in a field or a menu) and Close (also Esc). Below: a large preview, the
+ * primary Download / Copy link actions and the shared ⋯ menu, the alt text —
+ * **editable here** with `media:update`, the only route to an image's
+ * description after upload — then the metadata list and tags.
+ *
+ * Opening moves focus to the panel (it is a labelled region); closing hands it
+ * back to whatever opened it, when that control is still on the page.
+ */
+export declare function AssetDetailPanel({ asset, locationLabel, onClose, onPrevious, onNext, onAction, onSaveAlt, canCreate, canUpdate, canDelete, className }: {
+    asset: MediaAsset;
+    /** Human name of the folder the asset lives in. */
+    locationLabel: string;
+    onClose: () => void;
+    /** Shows the previous file; omitted on the first one. */
+    onPrevious?: () => void;
+    /** Shows the next file; omitted on the last one. */
+    onNext?: () => void;
+    onAction: (kind: AssetActionKind, asset: MediaAsset) => void;
+    /** Persists the alt text; resolves whether the server accepted it. */
+    onSaveAlt?: (id: string, alt: string) => Promise<boolean>;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/AssetDetailPanel/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIzD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAkE7E;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,KAAK,EACL,aAAa,EACb,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,mDAAmD;IACnD,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,yDAAyD;IACzD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7D,sEAAsE;IACtE,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC1D,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BA+RA"}

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

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Badge, Button, InputField, Separator, cn } from '@orthacms/design-system';
+import { ChevronLeft, ChevronRight, Download, Link2, MoreVertical, X } from 'lucide-react';
+import { MEDIA_KIND } from '../../constants';
+import { formatBytes } from '../../utils/formatBytes';
+import { formatDuration } from '../../utils/formatDuration';
+import { buildAssetHandlers } from '../../utils/assetHandlers';
+import { AssetActionsMenu } from '../AssetActionsMenu';
+import { MediaKindBadge } from '../MediaKindBadge';
+import { MediaThumbnail } from '../MediaThumbnail';
+import { MetaRow } from './MetaRow';
+/** Intl descriptors for {@link AssetDetailPanel}, co-located. */
+const messages = defineMessages({
+    close: { id: 'media.detail.close', defaultMessage: 'Close' },
+    previous: { id: 'media.detail.previous', defaultMessage: 'Previous file' },
+    next: { id: 'media.detail.next', defaultMessage: 'Next file' },
+    download: { id: 'media.detail.download', defaultMessage: 'Download' },
+    copyLink: { id: 'media.detail.copyLink', defaultMessage: 'Copy link' },
+    more: { id: 'media.detail.more', defaultMessage: 'More actions' },
+    details: { id: 'media.detail.details', defaultMessage: 'Details' },
+    type: { id: 'media.detail.type', defaultMessage: 'Type' },
+    size: { id: 'media.detail.size', defaultMessage: 'Size' },
+    dimensions: { id: 'media.detail.dimensions', defaultMessage: 'Dimensions' },
+    duration: { id: 'media.detail.duration', defaultMessage: 'Duration' },
+    format: { id: 'media.detail.format', defaultMessage: 'Format' },
+    location: { id: 'media.detail.location', defaultMessage: 'Folder' },
+    uploadedBy: {
+        id: 'media.detail.uploadedBy',
+        defaultMessage: 'Uploaded by'
+    },
+    created: { id: 'media.detail.created', defaultMessage: 'Created' },
+    modified: { id: 'media.detail.modified', defaultMessage: 'Modified' },
+    altText: { id: 'media.detail.altText', defaultMessage: 'Alt text' },
+    altMissingBadge: {
+        id: 'media.detail.altMissingBadge',
+        defaultMessage: 'Missing'
+    },
+    altPlaceholder: {
+        id: 'media.detail.altPlaceholder',
+        defaultMessage: 'Describe this image'
+    },
+    altHint: {
+        id: 'media.detail.altHint',
+        defaultMessage: 'Read aloud in place of the image. Leave blank only if it is purely decorative.'
+    },
+    altSave: { id: 'media.detail.altSave', defaultMessage: 'Save alt text' },
+    altMissing: {
+        id: 'media.detail.altMissing',
+        defaultMessage: 'No alt text yet'
+    },
+    tags: { id: 'media.detail.tags', defaultMessage: 'Tags' },
+    keys: {
+        id: 'media.detail.keys',
+        defaultMessage: '← → move between files · Esc closes the panel'
+    }
+});
+/**
+ * Whether a key press belongs to whatever has focus rather than to the panel:
+ * typing in a field, a select or combobox, or anything inside an open menu or
+ * dialog (whose own Escape must close *it*, not the panel underneath).
+ */
+function ownedByFocus(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    if (target.isContentEditable)
+        return true;
+    if (/^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))
+        return true;
+    return !!target.closest('[role="menu"],[role="dialog"],[role="alertdialog"],[role="listbox"],[role="combobox"]');
+}
+/**
+ * The asset details panel — a **non-modal** column beside the grid, not a
+ * drawer over it: the files stay visible and clickable while it is open, and
+ * clicking another one simply shows that file here. Under `lg` the page lays
+ * it over the browser instead (see the page), still without a focus trap.
+ *
+ * Its header names the file and carries Previous / Next (also ← / →, when focus
+ * isn't in a field or a menu) and Close (also Esc). Below: a large preview, the
+ * primary Download / Copy link actions and the shared ⋯ menu, the alt text —
+ * **editable here** with `media:update`, the only route to an image's
+ * description after upload — then the metadata list and tags.
+ *
+ * Opening moves focus to the panel (it is a labelled region); closing hands it
+ * back to whatever opened it, when that control is still on the page.
+ */
+export function AssetDetailPanel({ asset, locationLabel, onClose, onPrevious, onNext, onAction, onSaveAlt, canCreate, canUpdate, canDelete, className }) {
+    const intl = useIntl();
+    const titleId = useId();
+    const altId = useId();
+    const panelRef = useRef(null);
+    const [alt, setAlt] = useState('');
+    const [saving, setSaving] = useState(false);
+    // Re-seed whenever a different asset opens, so the field never shows the
+    // previous asset's description over this one's.
+    const assetAlt = asset.alt ?? '';
+    useEffect(() => {
+        setAlt(assetAlt);
+    }, [asset.id, assetAlt]);
+    // Focus in on open, and back out on close. Mount-only on purpose: moving
+    // between files keeps the panel mounted and focus where the reader put it.
+    useEffect(() => {
+        const opener = document.activeElement instanceof HTMLElement
+            ? document.activeElement
+            : null;
+        panelRef.current?.focus();
+        return () => {
+            if (opener?.isConnected)
+                opener.focus();
+        };
+    }, []);
+    // ← / → / Esc from anywhere on the page, unless focus owns the key.
+    const keys = useRef({ onPrevious, onNext, onClose });
+    keys.current = { onPrevious, onNext, onClose };
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.defaultPrevented || event.altKey || event.metaKey)
+                return;
+            if (event.ctrlKey || ownedByFocus(event.target))
+                return;
+            const { onPrevious: prev, onNext: next, onClose: close } = keys.current;
+            if (event.key === 'ArrowLeft' && prev)
+                prev();
+            else if (event.key === 'ArrowRight' && next)
+                next();
+            else if (event.key === 'Escape')
+                close();
+            else
+                return;
+            event.preventDefault();
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => window.removeEventListener('keydown', onKeyDown);
+    }, []);
+    const isImage = asset.kind === MEDIA_KIND.Image;
+    const canEditAlt = canUpdate && !!onSaveAlt && isImage;
+    const altDirty = alt !== (asset.alt ?? '');
+    const missingAlt = isImage && !asset.alt?.trim();
+    const saveAlt = () => {
+        if (!onSaveAlt)
+            return;
+        setSaving(true);
+        void onSaveAlt(asset.id, alt).finally(() => setSaving(false));
+    };
+    const dateOpts = {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit'
+    };
+    const iconButton = 'size-7 shrink-0 shadow-none';
+    return (_jsxs("section", { ref: panelRef, tabIndex: -1, "aria-labelledby": titleId, className: cn('flex min-h-0 flex-col bg-background focus-visible:outline-none', className), children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-1 border-b px-4", children: [_jsx("h2", { id: titleId, className: "min-w-0 flex-1 truncate text-sm font-semibold", title: asset.name, children: asset.name }), _jsx(Button, { variant: "ghost", size: "icon", className: iconButton, disabled: !onPrevious, onClick: onPrevious, "aria-label": intl.formatMessage(messages.previous), children: _jsx(ChevronLeft, { "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "icon", className: iconButton, disabled: !onNext, onClick: onNext, "aria-label": intl.formatMessage(messages.next), children: _jsx(ChevronRight, { "aria-hidden": true }) }), _jsx(Button, { variant: "ghost", size: "icon", className: iconButton, onClick: onClose, "aria-label": intl.formatMessage(messages.close), children: _jsx(X, { "aria-hidden": true }) })] }), _jsxs("div", { className: "min-h-0 flex-1 space-y-5 overflow-auto p-4", children: [_jsx(MediaThumbnail, { asset: asset, size: "preview", className: "aspect-[4/3] w-full rounded-lg border", iconClassName: "size-12" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { className: "flex-1", onClick: () => onAction('download', asset), children: [_jsx(Download, { "aria-hidden": true }), intl.formatMessage(messages.download)] }), _jsxs(Button, { variant: "outline", className: "flex-1 shadow-none", onClick: () => onAction('copyLink', asset), children: [_jsx(Link2, { "aria-hidden": true }), intl.formatMessage(messages.copyLink)] }), _jsx(AssetActionsMenu, { handlers: buildAssetHandlers(asset, onAction), canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete, trigger: _jsx(Button, { variant: "outline", size: "icon", className: "shadow-none", "aria-label": intl.formatMessage(messages.more), children: _jsx(MoreVertical, { "aria-hidden": true }) }) })] }), isImage ? (canEditAlt ? (_jsxs("div", { className: "space-y-2", children: [_jsx(InputField, { id: `asset-alt-${altId}`, label: intl.formatMessage(messages.altText), labelAction: missingAlt ? (_jsx(Badge, { variant: "warning", size: "xs", children: intl.formatMessage(messages.altMissingBadge) })) : undefined, description: intl.formatMessage(messages.altHint), placeholder: intl.formatMessage(messages.altPlaceholder), value: alt, maxLength: 1000, onChange: (event) => setAlt(event.target.value) }), _jsx(Button, { size: "sm", variant: "outline", className: "shadow-none", disabled: !altDirty || saving, onClick: saveAlt, children: intl.formatMessage(messages.altSave) })] })) : (_jsxs("div", { children: [_jsx("h3", { className: "mb-1 text-sm font-medium", children: intl.formatMessage(messages.altText) }), _jsx("p", { className: asset.alt
+                                    ? 'text-sm'
+                                    : 'text-sm text-muted-foreground', children: asset.alt ??
+                                    intl.formatMessage(messages.altMissing) })] }))) : null, _jsxs("div", { children: [_jsx("h3", { className: "mb-1 text-sm font-medium", children: intl.formatMessage(messages.details) }), _jsxs("dl", { className: "divide-y", children: [_jsx(MetaRow, { label: intl.formatMessage(messages.type), children: _jsx(MediaKindBadge, { kind: asset.kind }) }), _jsx(MetaRow, { label: intl.formatMessage(messages.size), children: formatBytes(asset.size) }), asset.dimensions ? (_jsxs(MetaRow, { label: intl.formatMessage(messages.dimensions), children: [asset.dimensions.width, " \u00D7", ' ', asset.dimensions.height] })) : null, asset.duration ? (_jsx(MetaRow, { label: intl.formatMessage(messages.duration), children: formatDuration(asset.duration) })) : null, _jsx(MetaRow, { label: intl.formatMessage(messages.format), children: asset.mimeType }), _jsx(MetaRow, { label: intl.formatMessage(messages.location), children: locationLabel }), _jsx(MetaRow, { label: intl.formatMessage(messages.uploadedBy), children: asset.uploadedBy }), _jsx(MetaRow, { label: intl.formatMessage(messages.created), children: intl.formatDate(asset.createdAt, dateOpts) }), _jsx(MetaRow, { label: intl.formatMessage(messages.modified), children: intl.formatDate(asset.updatedAt, dateOpts) })] })] }), asset.tags.length > 0 ? (_jsxs("div", { children: [_jsx(Separator, { className: "mb-3" }), _jsx("h3", { className: "mb-2 text-sm font-medium", children: intl.formatMessage(messages.tags) }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: asset.tags.map((tag) => (_jsx(Badge, { variant: "outline", className: "font-normal", children: tag }, tag))) })] })) : null, _jsx("p", { className: "hidden text-center text-xs text-muted-foreground lg:block", children: intl.formatMessage(messages.keys) })] })] }));
+}

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

@@ -0,0 +1,24 @@
+import type { ImgHTMLAttributes } from 'react';
+/** Props for {@link FadeInImage} — a plain `<img>`'s, `src` required. */
+export type FadeInImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+    src: string;
+};
+/**
+ * An `<img>` that fades in once its bytes have arrived, instead of painting
+ * top-down over the tile. Whatever sits behind it (the tile's gradient or
+ * muted fill) is the placeholder, so nothing shifts when it lands.
+ *
+ * Two cases would otherwise leave it invisible for good:
+ *
+ * - **A cached image** can finish before React attaches `onLoad`, so the event
+ *   never reaches us. It is already `complete` on mount, which the layout
+ *   effect reads before the first paint — no fade, no flash.
+ * - **A broken image** never fires `load`. `error` reveals it too: the alt text
+ *   (and the browser's broken-image glyph) is information, an empty tile is not.
+ *
+ * Visibility is keyed on the `src` that settled, so a tile reused for a
+ * different asset starts hidden again rather than showing the new image
+ * half-drawn. Reduced motion skips the fade, not the image.
+ */
+export declare function FadeInImage({ src, className, onLoad, onError, alt, ...props }: FadeInImageProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FadeInImage/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAkB,MAAM,OAAO,CAAC;AAG/D,yEAAyE;AACzE,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,GAAG;IACjE,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,EACxB,GAAG,EACH,SAAS,EACT,MAAM,EACN,OAAO,EACP,GAAG,EACH,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAiClB"}

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from 'react';
+import { cn } from '@orthacms/design-system';
+/**
+ * An `<img>` that fades in once its bytes have arrived, instead of painting
+ * top-down over the tile. Whatever sits behind it (the tile's gradient or
+ * muted fill) is the placeholder, so nothing shifts when it lands.
+ *
+ * Two cases would otherwise leave it invisible for good:
+ *
+ * - **A cached image** can finish before React attaches `onLoad`, so the event
+ *   never reaches us. It is already `complete` on mount, which the layout
+ *   effect reads before the first paint — no fade, no flash.
+ * - **A broken image** never fires `load`. `error` reveals it too: the alt text
+ *   (and the browser's broken-image glyph) is information, an empty tile is not.
+ *
+ * Visibility is keyed on the `src` that settled, so a tile reused for a
+ * different asset starts hidden again rather than showing the new image
+ * half-drawn. Reduced motion skips the fade, not the image.
+ */
+export function FadeInImage({ src, className, onLoad, onError, alt, ...props }) {
+    const ref = useRef(null);
+    const [settledSrc, setSettledSrc] = useState(null);
+    useLayoutEffect(() => {
+        if (ref.current?.complete)
+            setSettledSrc(src);
+    }, [src]);
+    const settle = (handler) => (event) => {
+        setSettledSrc(src);
+        handler?.(event);
+    };
+    const visible = settledSrc === src;
+    return (_jsx("img", { ...props, ref: ref, src: src, alt: alt, onLoad: settle(onLoad), onError: settle(onError), "data-loaded": visible ? 'true' : 'false', className: cn('transition-opacity duration-(--ds-duration-base) ease-(--ds-ease-out) motion-reduce:transition-none', visible ? 'opacity-100' : 'opacity-0', className) }));
+}

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

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
  * removes the folder and everything inside). Rename/Delete are hidden unless the
  * caller passes the matching permission. Pass `trigger` to override the default ⋯.
  */
-export declare function FolderActionsMenu({ name, onOpen, onRename, onDelete, canUpdate, canDelete, trigger }: {
+export declare function FolderActionsMenu({ name, onOpen, onRename, onDelete, canUpdate, canDelete, trigger, triggerClassName }: {
     /**
      * The folder this menu acts on — its name goes in the trigger's accessible
      * name, so a grid of folders doesn't present a row of buttons all called
@@ -17,5 +17,7 @@ export declare function FolderActionsMenu({ name, onOpen, onRename, onDelete, ca
     canUpdate: boolean;
     canDelete: boolean;
     trigger?: ReactNode;
+    /** Extra classes for the default ⋯ trigger (the tree's smaller one). */
+    triggerClassName?: string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FolderActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAuBvC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACV,EAAE;IACC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB,+BA6CA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/FolderActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAwBvC;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,OAAO,EACP,gBAAgB,EACnB,EAAE;IACC;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC7B,+BA6CA"}

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { defineMessages, useIntl } from 'react-intl';
-import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@orthacms/design-system';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, cn } from '@orthacms/design-system';
 import { FolderOpen, MoreVertical, Pencil, Trash2 } from 'lucide-react';
 /** Intl descriptors for {@link FolderActionsMenu}, co-located. */
 const messages = defineMessages({
@@ -17,9 +17,9 @@ const messages = defineMessages({
  * removes the folder and everything inside). Rename/Delete are hidden unless the
  * caller passes the matching permission. Pass `trigger` to override the default ⋯.
  */
-export function FolderActionsMenu({ name, onOpen, onRename, onDelete, canUpdate, canDelete, trigger }) {
+export function FolderActionsMenu({ name, onOpen, onRename, onDelete, canUpdate, canDelete, trigger, triggerClassName }) {
     const intl = useIntl();
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: trigger ?? (_jsx(Button, { variant: "ghost", size: "icon", className: "size-8 shadow-none", "aria-label": intl.formatMessage(messages.trigger, {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: trigger ?? (_jsx(Button, { variant: "ghost", size: "icon", className: cn('size-8 shadow-none', triggerClassName), "aria-label": intl.formatMessage(messages.trigger, {
                         name
                     }), children: _jsx(MoreVertical, { "aria-hidden": true }) })) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [_jsxs(DropdownMenuItem, { onSelect: onOpen, children: [_jsx(FolderOpen, { "aria-hidden": true }), intl.formatMessage(messages.open)] }), canUpdate ? (_jsxs(DropdownMenuItem, { onSelect: onRename, children: [_jsx(Pencil, { "aria-hidden": true }), intl.formatMessage(messages.rename)] })) : null, canDelete ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onSelect: onDelete, children: [_jsx(Trash2, { "aria-hidden": true }), intl.formatMessage(messages.delete)] })] })) : null] })] }));
 }

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

@@ -0,0 +1,25 @@
+import type { MediaAsset } from '../../types/mediaAsset';
+import { type AssetActionKind } from '../AssetActionsMenu';
+/**
+ * The list view of the open folder's files — the design-system `Table`, used
+ * exactly as every other admin table uses it (no restyled cells), one row per
+ * asset: a select checkbox, a small thumbnail beside the name (a button that
+ * opens the details panel, named "Open {name}" as the grid tile is), the
+ * type, size, dimensions or duration, uploader and date, and the shared ⋯
+ * menu. The header checkbox selects or clears every file on the page.
+ * Presentational: selection and every action dispatch up to the page.
+ */
+export declare function MediaAssetTable({ assets, selectedIds, activeId, onToggleSelect, onToggleAll, onAction, canCreate, canUpdate, canDelete }: {
+    assets: MediaAsset[];
+    selectedIds: Set<string>;
+    /** The asset open in the details panel, marked as the current row. */
+    activeId?: string | null;
+    onToggleSelect: (id: string) => void;
+    /** Select every row on the page, or clear them all when all are selected. */
+    onToggleAll: () => 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/MediaAssetTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaAssetTable/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAyB7E;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,WAAW,EACX,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,MAAM,EAAE,UAAU,EAAE,CAAC;IACrB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACzB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,6EAA6E;IAC7E,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,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,+BA0IA"}

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Badge, Checkbox, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@orthacms/design-system';
+import { MEDIA_KIND } from '../../constants';
+import { buildAssetHandlers } from '../../utils/assetHandlers';
+import { fileExtension } from '../../utils/fileExtension';
+import { formatBytes } from '../../utils/formatBytes';
+import { formatDuration } from '../../utils/formatDuration';
+import { AssetActionsMenu } from '../AssetActionsMenu';
+import { MediaThumbnail } from '../MediaThumbnail';
+/** Intl descriptors for {@link MediaAssetTable}, co-located. */
+const messages = defineMessages({
+    label: { id: 'media.table.label', defaultMessage: 'Files' },
+    selectAll: {
+        id: 'media.table.selectAll',
+        defaultMessage: 'Select all files on this page'
+    },
+    select: { id: 'media.table.select', defaultMessage: 'Select {name}' },
+    open: { id: 'media.table.open', defaultMessage: 'Open {name}' },
+    name: { id: 'media.table.name', defaultMessage: 'Name' },
+    type: { id: 'media.table.type', defaultMessage: 'Type' },
+    size: { id: 'media.table.size', defaultMessage: 'Size' },
+    dimensions: { id: 'media.table.dimensions', defaultMessage: 'Dimensions' },
+    uploadedBy: {
+        id: 'media.table.uploadedBy',
+        defaultMessage: 'Uploaded by'
+    },
+    date: { id: 'media.table.date', defaultMessage: 'Date' },
+    actions: { id: 'media.table.actions', defaultMessage: 'Actions' },
+    noAlt: { id: 'media.table.noAlt', defaultMessage: 'No alt text' }
+});
+/**
+ * The list view of the open folder's files — the design-system `Table`, used
+ * exactly as every other admin table uses it (no restyled cells), one row per
+ * asset: a select checkbox, a small thumbnail beside the name (a button that
+ * opens the details panel, named "Open {name}" as the grid tile is), the
+ * type, size, dimensions or duration, uploader and date, and the shared ⋯
+ * menu. The header checkbox selects or clears every file on the page.
+ * Presentational: selection and every action dispatch up to the page.
+ */
+export function MediaAssetTable({ assets, selectedIds, activeId, onToggleSelect, onToggleAll, onAction, canCreate, canUpdate, canDelete }) {
+    const intl = useIntl();
+    const selectedHere = assets.filter((a) => selectedIds.has(a.id)).length;
+    const allChecked = selectedHere === 0
+        ? false
+        : selectedHere === assets.length
+            ? true
+            : 'indeterminate';
+    return (_jsxs(Table, { "aria-label": intl.formatMessage(messages.label), children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-9", children: _jsx(Checkbox, { checked: allChecked, onCheckedChange: onToggleAll, "aria-label": intl.formatMessage(messages.selectAll) }) }), _jsx(TableHead, { children: intl.formatMessage(messages.name) }), _jsx(TableHead, { children: intl.formatMessage(messages.type) }), _jsx(TableHead, { className: "text-right", children: intl.formatMessage(messages.size) }), _jsx(TableHead, { className: "hidden md:table-cell", children: intl.formatMessage(messages.dimensions) }), _jsx(TableHead, { className: "hidden lg:table-cell", children: intl.formatMessage(messages.uploadedBy) }), _jsx(TableHead, { className: "hidden sm:table-cell", children: intl.formatMessage(messages.date) }), _jsx(TableHead, { className: "w-10", children: _jsx("span", { className: "sr-only", children: intl.formatMessage(messages.actions) }) })] }) }), _jsx(TableBody, { children: assets.map((asset) => {
+                    const selected = selectedIds.has(asset.id);
+                    const missingAlt = asset.kind === MEDIA_KIND.Image && !asset.alt?.trim();
+                    return (_jsxs(TableRow, { "data-state": selected ? 'selected' : undefined, "aria-current": asset.id === activeId ? 'true' : undefined, children: [_jsx(TableCell, { children: _jsx(Checkbox, { checked: selected, onCheckedChange: () => onToggleSelect(asset.id), "aria-label": intl.formatMessage(messages.select, { name: asset.name }) }) }), _jsx(TableCell, { className: "max-w-0 w-full min-w-48", children: _jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx(MediaThumbnail, { asset: asset, className: "h-6 w-8 shrink-0 rounded", iconClassName: "size-3.5" }), _jsx("button", { type: "button", onClick: () => onAction('open', asset), "aria-label": intl.formatMessage(messages.open, { name: asset.name }), title: asset.name, className: "min-w-0 truncate text-left font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: asset.name }), missingAlt ? (_jsx(Badge, { variant: "warning", size: "xs", className: "shrink-0", children: intl.formatMessage(messages.noAlt) })) : null] }) }), _jsx(TableCell, { className: "whitespace-nowrap text-muted-foreground", children: fileExtension(asset.name) ?? asset.mimeType }), _jsx(TableCell, { className: "whitespace-nowrap text-right tabular-nums", children: formatBytes(asset.size) }), _jsx(TableCell, { className: "hidden whitespace-nowrap text-muted-foreground md:table-cell", children: asset.dimensions
+                                    ? `${asset.dimensions.width}×${asset.dimensions.height}`
+                                    : asset.duration
+                                        ? formatDuration(asset.duration)
+                                        : '—' }), _jsx(TableCell, { className: "hidden whitespace-nowrap lg:table-cell", children: asset.uploadedBy }), _jsx(TableCell, { className: "hidden whitespace-nowrap text-muted-foreground sm:table-cell", children: intl.formatDate(asset.createdAt, {
+                                    month: 'short',
+                                    day: 'numeric',
+                                    year: 'numeric'
+                                }) }), _jsx(TableCell, { className: "text-right", children: _jsx(AssetActionsMenu, { handlers: buildAssetHandlers(asset, onAction), assetName: asset.name, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }) })] }, asset.id));
+                }) })] }));
+}

package/dist/lib/components/MediaFieldControl/MediaFieldItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaFieldControl/MediaFieldItem/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAoE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,WAAW,EACX,kBAAkB,EACrB,EAAE;IACC,IAAI,EAAE,iBAAiB,CAAC;IACxB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,+BAsOA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaFieldControl/MediaFieldItem/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAqE1E;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAgB,EAChB,QAAQ,EACR,MAAM,EACN,GAAG,EACH,UAAkB,EAClB,WAAW,EACX,kBAAkB,EACrB,EAAE;IACC,IAAI,EAAE,iBAAiB,CAAC;IACxB,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,QAAQ,EAAE,OAAO,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,6DAA6D;IAC7D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,+BAsOA"}

package/dist/lib/components/MediaFieldControl/MediaFieldItem/index.js

@@ -7,6 +7,7 @@ import { MEDIA_ALT_MAX_LENGTH } from '@orthacms/content-domain';
 import { MEDIA_KIND } from '../../../constants';
 import { assetGradient } from '../../../utils/assetGradient';
 import { formatBytes } from '../../../utils/formatBytes';
+import { FadeInImage } from '../../FadeInImage';
 import { MediaKindIcon } from '../../MediaKindIcon';
 /** Intl descriptors for {@link MediaFieldItem}, co-located. */
 const messages = defineMessages({
@@ -98,7 +99,7 @@ export function MediaFieldItem({ item, index, total, multiple, readOnly = false,
         .join(' · ');
     return (_jsxs("li", { className: cn('group/item relative overflow-hidden rounded-lg border bg-card transition-shadow hover:shadow-md', item.missing && 'border-destructive/50', (item.pending || item.resolving) && 'border-dashed'), children: [_jsxs("div", { className: "relative aspect-[4/3] w-full overflow-hidden bg-muted", style: !item.missing && !item.resolving && !asImage
                     ? { backgroundImage: assetGradient(item.id) }
-                    : undefined, children: [item.resolving ? (_jsx("span", { className: "flex size-full animate-pulse items-center justify-center bg-muted text-[11px] text-muted-foreground", children: intl.formatMessage(messages.resolving) })) : item.missing ? (_jsxs("span", { className: "flex size-full flex-col items-center justify-center gap-1 bg-destructive/5 px-2 text-center text-destructive", children: [_jsx(FileWarning, { className: "size-6", "aria-hidden": true }), _jsx("span", { className: "text-[11px] font-medium leading-tight", children: intl.formatMessage(messages.unavailableHint) })] })) : asImage ? (_jsx("img", { src: item.url, alt: item.name, loading: "lazy", className: "absolute inset-0 size-full object-cover" })) : (_jsx("span", { className: "flex size-full items-center justify-center", children: _jsx(MediaKindIcon, { kind: kindOf(item.kind), className: "size-8 text-white/90 drop-shadow-sm" }) })), multiple ? (_jsx("span", { className: "absolute left-1.5 top-1.5 grid size-5 place-items-center rounded bg-black/60 text-[11px] font-medium tabular-nums text-white", title: intl.formatMessage(messages.position, {
+                    : undefined, children: [item.resolving ? (_jsx("span", { className: "flex size-full animate-pulse items-center justify-center bg-muted text-[11px] text-muted-foreground", children: intl.formatMessage(messages.resolving) })) : item.missing ? (_jsxs("span", { className: "flex size-full flex-col items-center justify-center gap-1 bg-destructive/5 px-2 text-center text-destructive", children: [_jsx(FileWarning, { className: "size-6", "aria-hidden": true }), _jsx("span", { className: "text-[11px] font-medium leading-tight", children: intl.formatMessage(messages.unavailableHint) })] })) : asImage ? (_jsx(FadeInImage, { src: item.url, alt: item.name, loading: "lazy", className: "absolute inset-0 size-full object-cover" })) : (_jsx("span", { className: "flex size-full items-center justify-center", children: _jsx(MediaKindIcon, { kind: kindOf(item.kind), className: "size-8 text-white/90 drop-shadow-sm" }) })), multiple ? (_jsx("span", { className: "absolute left-1.5 top-1.5 grid size-5 place-items-center rounded bg-black/60 text-[11px] font-medium tabular-nums text-white", title: intl.formatMessage(messages.position, {
                             index: index + 1,
                             total
                         }), children: index + 1 })) : null, item.pending ? (_jsx("span", { className: "absolute bottom-1.5 left-1.5 rounded bg-warning-soft px-1.5 py-0.5 text-[10px] font-medium leading-none text-warning-soft-foreground shadow-sm", children: intl.formatMessage(messages.pending) })) : null, _jsxs("div", { className: "absolute right-1.5 top-1.5 flex items-center gap-0.5 rounded-md bg-background/85 p-0.5 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover/item:opacity-100 sm:opacity-0", children: [item.missing || item.pending || item.resolving ? null : (_jsx(Button, { asChild: true, variant: "ghost", size: "icon", className: "size-6", children: _jsx("a", { href: item.originalUrl ?? item.url, target: "_blank", rel: "noreferrer", "aria-label": intl.formatMessage(messages.preview, { name: item.name }), children: _jsx(ExternalLink, { className: "size-3.5", "aria-hidden": true }) }) })), readOnly ? null : (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-6 text-muted-foreground hover:bg-destructive/10 hover:text-destructive", "aria-label": intl.formatMessage(messages.remove, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaFieldControl/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,EAGH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAqHjC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,MAAM,EACT,EAAE;IACC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,gFAAgF;IAChF,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC;IACzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,+BA0dA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaFieldControl/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,OAAO,EAGH,KAAK,WAAW,EACnB,MAAM,yBAAyB,CAAC;AAqHjC;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,EAAE,EACF,QAAQ,EACR,MAAM,EACN,KAAK,EACL,WAAW,EACX,WAAW,EACX,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,MAAM,EACT,EAAE;IACC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,OAAO,CAAC;IACf,gFAAgF;IAChF,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC;IACzB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,+BAmeA"}

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { ImagePlus, UploadCloud } from 'lucide-react';
-import { Button, cn, Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, toast } from '@orthacms/design-system';
+import { Button, cn, toast } from '@orthacms/design-system';
 import { useHasPermission } from '@orthacms/identity-admin';
 import { toMediaValueRef } from '@orthacms/content-domain';
 import { MEDIA_CREATE, MEDIA_KIND, MEDIA_READ } from '../../constants';
@@ -373,19 +373,24 @@ export function MediaFieldControl({ id, multiple, accept, value, initialRefs, re
                     // Straight into the same dialog the Upload button opens, so
                     // a drop is reviewed before it's staged.
                     openUploadWith(Array.from(event.dataTransfer.files));
-                }, className: cn('rounded-xl border bg-muted/20 p-3 transition-colors', isEmpty && 'border-dashed', invalid && 'border-destructive/60', dragging && 'border-primary bg-primary/5'), children: isEmpty ? (_jsx(Empty, { className: "gap-4 p-6 md:p-8", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: dragging ? (_jsx(UploadCloud, { "aria-hidden": true })) : (_jsx(ImagePlus, { "aria-hidden": true })) }), _jsx(EmptyTitle, { className: "text-base", children: readOnly
-                                    ? intl.formatMessage(messages.emptyReadOnly)
-                                    : dragging
-                                        ? intl.formatMessage(messages.dropHere)
-                                        : intl.formatMessage(multiple
-                                            ? messages.emptyMultiple
-                                            : messages.emptySingle) }), _jsx(EmptyDescription, { children: intl.formatMessage(readOnly
-                                    ? messages.emptyBodyReadOnly
-                                    : dragging
-                                        ? messages.dropBody
-                                        : canStage
-                                            ? messages.emptyBody
-                                            : messages.emptyBodyPickOnly) })] }) })) : (_jsx("ul", { className: cn('grid gap-3', multiple
+                }, className: cn('rounded-lg border bg-muted/20 transition-colors', isEmpty ? 'border-dashed px-2 py-1' : 'p-3', invalid && 'border-destructive/60', dragging && 'border-primary bg-primary/5'), children: isEmpty ? (
+                // One line, not a centred empty-state card: the field sits
+                // in the record's form among single-line inputs now, and a
+                // 200px block for "nothing attached" outweighed the fields
+                // around it.
+                _jsxs("div", { "data-testid": "media-field-empty", className: "flex min-h-9 flex-wrap items-center gap-x-2 gap-y-0.5 px-1 text-sm", children: [dragging ? (_jsx(UploadCloud, { "aria-hidden": true, className: "size-4 shrink-0 text-primary" })) : (_jsx(ImagePlus, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" })), _jsx("span", { className: "font-medium", children: readOnly
+                                ? intl.formatMessage(messages.emptyReadOnly)
+                                : dragging
+                                    ? intl.formatMessage(messages.dropHere)
+                                    : intl.formatMessage(multiple
+                                        ? messages.emptyMultiple
+                                        : messages.emptySingle) }), _jsx("span", { className: "text-muted-foreground", children: intl.formatMessage(readOnly
+                                ? messages.emptyBodyReadOnly
+                                : dragging
+                                    ? messages.dropBody
+                                    : canStage
+                                        ? messages.emptyBody
+                                        : messages.emptyBodyPickOnly) })] })) : (_jsx("ul", { className: cn('grid gap-3', multiple
                         ? 'grid-cols-2 sm:grid-cols-3 xl:grid-cols-4'
                         : 'grid-cols-1 sm:max-w-[15rem]'), children: displays.map((item, index) => (_jsx(MediaFieldItem, { item: item, index: index, total: displays.length, multiple: multiple, readOnly: readOnly, onRemove: () => removeAt(index), onMove: (delta) => move(index, delta), ...(refs[index]?.alt !== undefined
                             ? { alt: refs[index].alt }

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

@@ -0,0 +1,19 @@
+import type { EntryFieldControlContext } from '@orthacms/content-admin';
+/**
+ * A media field **in the entry form**, contributed through content-admin's
+ * `ENTRY_FIELD_CONTROL_SLOT`. It used to be a titled card on a Media tab of
+ * its own; a media field is a field with its own control, so it now sits in
+ * the schema's order beside the rest (ADR-0022), and content draws its label
+ * row (label, required mark, locale mark, "Changed"), description and error
+ * like any other field's.
+ *
+ * The item is registered `composite`, so the field is named as a group by
+ * that label — the control is several buttons, and a `<label for>` would
+ * rename the one it pointed at.
+ *
+ * The staged uploads come from the plugin's own presave handle, held above the
+ * form so they outlive any remount; the saved ids' display refs come from the
+ * editor's one media read.
+ */
+export declare function MediaFieldInput({ field, id, value, error, describedBy, readOnly, onChange, onBlur, mediaRefs, mediaRefsPending, presave }: EntryFieldControlContext): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaFieldInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAMxE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,eAAe,CAAC,EAC5B,KAAK,EACL,EAAE,EACF,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,OAAO,EACV,EAAE,wBAAwB,+BAqB1B"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MEDIA_PRESAVE_ID } from '../../hooks/usePendingMediaUploads';
+import { MediaFieldControl } from '../MediaFieldControl';
+/**
+ * A media field **in the entry form**, contributed through content-admin's
+ * `ENTRY_FIELD_CONTROL_SLOT`. It used to be a titled card on a Media tab of
+ * its own; a media field is a field with its own control, so it now sits in
+ * the schema's order beside the rest (ADR-0022), and content draws its label
+ * row (label, required mark, locale mark, "Changed"), description and error
+ * like any other field's.
+ *
+ * The item is registered `composite`, so the field is named as a group by
+ * that label — the control is several buttons, and a `<label for>` would
+ * rename the one it pointed at.
+ *
+ * The staged uploads come from the plugin's own presave handle, held above the
+ * form so they outlive any remount; the saved ids' display refs come from the
+ * editor's one media read.
+ */
+export function MediaFieldInput({ field, id, value, error, describedBy, readOnly, onChange, onBlur, mediaRefs, mediaRefsPending, presave }) {
+    const uploads = presave?.[MEDIA_PRESAVE_ID];
+    return (_jsx(MediaFieldControl, { id: id, multiple: !!field.multiple, accept: field.accept, required: field.required, value: value, initialRefs: mediaRefs, refsPending: mediaRefsPending, uploads: uploads, readOnly: readOnly, invalid: !!error, describedBy: describedBy, onChange: onChange, onBlur: onBlur ?? (() => undefined) }));
+}