@orthacms/media-admin 0.0.0-reserve.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ortha CMS contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# @orthacms/media-admin
+
+Part of [Ortha CMS](https://github.com/ortha-source/ortha-cms).
+
+```sh
+npm install @orthacms/media-admin
+```

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MediaPlugin } from './lib/utils/mediaPlugin';
+export type { MediaAdminPlugin } from './lib/utils/mediaPlugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { MediaPlugin } from './lib/utils/mediaPlugin';

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

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+/** The set of actions offered for a single asset (each permission-gated). */
+export type AssetActionHandlers = {
+    onDownload: () => void;
+    onCopyLink: () => void;
+    onDuplicate: () => void;
+    onRename: () => void;
+    onMove: () => void;
+    onDelete: () => void;
+};
+/** One asset action, used as the discriminant of a single dispatch callback. */
+export type AssetActionKind = 'open' | 'download' | 'copyLink' | 'duplicate' | 'rename' | 'move' | 'delete';
+/**
+ * The per-asset action menu — Download, Copy link, Duplicate, Rename, Move, and
+ * a destructive Delete. Shared by the grid tile and the detail drawer so the
+ * action set stays identical everywhere. Write actions are hidden unless the
+ * caller passes the matching permission (`canCreate` for Duplicate, `canUpdate`
+ * for Rename/Move, `canDelete` for Delete). Pass `trigger` to override the
+ * default ⋯ button.
+ *
+ * There is deliberately **no "Open" item**. In the drawer it re-opened the
+ * drawer you were already reading — a visible no-op — and on the tile it
+ * duplicated the two controls that already open the detail (the thumbnail and
+ * the filename are both buttons). The `'open'` action kind still exists; those
+ * two controls dispatch it.
+ */
+export declare function AssetActionsMenu({ handlers, assetName, canCreate, canUpdate, canDelete, trigger, align }: {
+    handlers: AssetActionHandlers;
+    /** Names the default trigger ("Actions for hero.png"); omit in a drawer. */
+    assetName?: string;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+    trigger?: ReactNode;
+    align?: 'start' | 'center' | 'end';
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/AssetActionsMenu/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,6EAA6E;AAC7E,MAAM,MAAM,mBAAmB,GAAG;IAC9B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAEF,gFAAgF;AAChF,MAAM,MAAM,eAAe,GACrB,MAAM,GACN,UAAU,GACV,UAAU,GACV,WAAW,GACX,QAAQ,GACR,MAAM,GACN,QAAQ,CAAC;AAkCf;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACT,OAAO,EACP,KAAa,EAChB,EAAE;IACC,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;CACtC,+BAiEA"}

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

@@ -0,0 +1,57 @@
+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 { Copy, Download, FolderInput, Link2, MoreVertical, Pencil, Trash2 } from 'lucide-react';
+/** Intl descriptors for {@link AssetActionsMenu}, co-located. */
+const messages = defineMessages({
+    trigger: {
+        id: 'media.asset.actions.trigger',
+        defaultMessage: 'Asset actions'
+    },
+    /**
+     * The trigger's name when the caller knows which asset it belongs to. A
+     * grid of twenty tiles otherwise offers twenty buttons all called "Asset
+     * actions", which is the same defect the folder cards already fixed.
+     */
+    triggerFor: {
+        id: 'media.asset.actions.triggerFor',
+        defaultMessage: 'Actions for {name}'
+    },
+    download: {
+        id: 'media.asset.actions.download',
+        defaultMessage: 'Download'
+    },
+    copyLink: {
+        id: 'media.asset.actions.copyLink',
+        defaultMessage: 'Copy link'
+    },
+    duplicate: {
+        id: 'media.asset.actions.duplicate',
+        defaultMessage: 'Duplicate'
+    },
+    rename: { id: 'media.asset.actions.rename', defaultMessage: 'Rename' },
+    move: { id: 'media.asset.actions.move', defaultMessage: 'Move to…' },
+    delete: { id: 'media.asset.actions.delete', defaultMessage: 'Delete' }
+});
+/**
+ * The per-asset action menu — Download, Copy link, Duplicate, Rename, Move, and
+ * a destructive Delete. Shared by the grid tile and the detail drawer so the
+ * action set stays identical everywhere. Write actions are hidden unless the
+ * caller passes the matching permission (`canCreate` for Duplicate, `canUpdate`
+ * for Rename/Move, `canDelete` for Delete). Pass `trigger` to override the
+ * default ⋯ button.
+ *
+ * There is deliberately **no "Open" item**. In the drawer it re-opened the
+ * drawer you were already reading — a visible no-op — and on the tile it
+ * duplicated the two controls that already open the detail (the thumbnail and
+ * the filename are both buttons). The `'open'` action kind still exists; those
+ * two controls dispatch it.
+ */
+export function AssetActionsMenu({ handlers, assetName, canCreate, canUpdate, canDelete, trigger, align = 'end' }) {
+    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": assetName
+                        ? intl.formatMessage(messages.triggerFor, {
+                            name: assetName
+                        })
+                        : intl.formatMessage(messages.trigger), children: _jsx(MoreVertical, { "aria-hidden": true }) })) }), _jsxs(DropdownMenuContent, { align: align, className: "w-48", children: [_jsxs(DropdownMenuItem, { onSelect: handlers.onDownload, children: [_jsx(Download, { "aria-hidden": true }), intl.formatMessage(messages.download)] }), _jsxs(DropdownMenuItem, { onSelect: handlers.onCopyLink, children: [_jsx(Link2, { "aria-hidden": true }), intl.formatMessage(messages.copyLink)] }), canCreate ? (_jsxs(DropdownMenuItem, { onSelect: handlers.onDuplicate, children: [_jsx(Copy, { "aria-hidden": true }), intl.formatMessage(messages.duplicate)] })) : null, canUpdate ? (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { onSelect: handlers.onRename, children: [_jsx(Pencil, { "aria-hidden": true }), intl.formatMessage(messages.rename)] }), _jsxs(DropdownMenuItem, { onSelect: handlers.onMove, children: [_jsx(FolderInput, { "aria-hidden": true }), intl.formatMessage(messages.move)] })] })) : null, canDelete ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "text-destructive focus:text-destructive", onSelect: handlers.onDelete, children: [_jsx(Trash2, { "aria-hidden": true }), intl.formatMessage(messages.delete)] })] })) : null] })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+/**
+ * One label/value line in the detail drawer's metadata list — a muted term on
+ * the left and its value on the right, aligned as a `dt`/`dd` pair. Purely
+ * presentational; the drawer 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/AssetDetailDrawer/MetaRow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/AssetDetailDrawer/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/AssetDetailDrawer/MetaRow/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One label/value line in the detail drawer's metadata list — a muted term on
+ * the left and its value on the right, aligned as a `dt`/`dd` pair. Purely
+ * presentational; the drawer 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/AssetDetailDrawer/index.d.ts

@@ -0,0 +1,28 @@
+import type { MediaAsset } from '../../types/mediaAsset';
+import { type AssetActionKind } from '../AssetActionsMenu';
+/**
+ * The asset detail drawer — a right-hand panel with a large preview, primary
+ * Download / Copy link actions and the shared ⋯ menu, then a metadata list
+ * (type, size, dimensions, duration, format, location, uploader, timestamps),
+ * alt text, and tags. Open state is derived from `asset` (null → closed); every
+ * action dispatches up to the page.
+ *
+ * **Alt text is editable here** (with `media:update`) — it is the only route to
+ * an asset's description after upload. The section used to render `asset.alt`
+ * as read-only prose *and only when it was already set*, which meant an image
+ * that landed without a description could never acquire one from the admin,
+ * while the Insights alt-coverage card went on reporting the gap.
+ */
+export declare function AssetDetailDrawer({ asset, locationLabel, onOpenChange, onAction, onSaveAlt, canCreate, canUpdate, canDelete }: {
+    asset: MediaAsset | null;
+    /** Human name of the folder the asset lives in. */
+    locationLabel: string;
+    onOpenChange: (open: boolean) => 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;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/AssetDetailDrawer/index.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAIzD,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AA0C7E;;;;;;;;;;;;GAYG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACzB,mDAAmD;IACnD,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,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;CACtB,+BAqQA"}

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Badge, Button, Drawer, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, InputField, Separator } from '@orthacms/design-system';
+import { 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 AssetDetailDrawer}, co-located. */
+const messages = defineMessages({
+    close: { id: 'media.detail.close', defaultMessage: 'Close' },
+    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: 'Location' },
+    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' },
+    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' }
+});
+/**
+ * The asset detail drawer — a right-hand panel with a large preview, primary
+ * Download / Copy link actions and the shared ⋯ menu, then a metadata list
+ * (type, size, dimensions, duration, format, location, uploader, timestamps),
+ * alt text, and tags. Open state is derived from `asset` (null → closed); every
+ * action dispatches up to the page.
+ *
+ * **Alt text is editable here** (with `media:update`) — it is the only route to
+ * an asset's description after upload. The section used to render `asset.alt`
+ * as read-only prose *and only when it was already set*, which meant an image
+ * that landed without a description could never acquire one from the admin,
+ * while the Insights alt-coverage card went on reporting the gap.
+ */
+export function AssetDetailDrawer({ asset, locationLabel, onOpenChange, onAction, onSaveAlt, canCreate, canUpdate, canDelete }) {
+    const intl = useIntl();
+    const altId = useId();
+    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 assetId = asset?.id ?? null;
+    const assetAlt = asset?.alt ?? '';
+    useEffect(() => {
+        setAlt(assetAlt);
+    }, [assetId, assetAlt]);
+    const canEditAlt = canUpdate && !!onSaveAlt && asset?.kind === MEDIA_KIND.Image;
+    const altDirty = alt !== (asset?.alt ?? '');
+    const saveAlt = () => {
+        if (!asset || !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'
+    };
+    return (_jsx(Drawer, { direction: "right", open: asset !== null, onOpenChange: onOpenChange, children: _jsx(DrawerContent, { className: "flex flex-col", children: asset ? (_jsxs(_Fragment, { children: [_jsxs(DrawerHeader, { className: "flex flex-row items-center justify-between gap-3 border-b", children: [_jsx(DrawerTitle, { className: "min-w-0 truncate", children: asset.name }), _jsx(DrawerClose, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8 shrink-0 shadow-none", "aria-label": intl.formatMessage(messages.close), children: _jsx(X, { "aria-hidden": true }) }) })] }), _jsxs("div", { className: "flex-1 space-y-5 overflow-auto p-4", children: [_jsx(MediaThumbnail, { asset: asset, size: "preview", className: "aspect-video w-full rounded-xl", 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 }) }) })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground", 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) })] })] }), canEditAlt ? (_jsxs("div", { className: "space-y-2", children: [_jsx(InputField, { id: `asset-alt-${altId}`, label: intl.formatMessage(messages.altText), 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-xs font-semibold uppercase tracking-wide text-muted-foreground", children: intl.formatMessage(messages.altText) }), _jsx("p", { className: asset.alt
+                                            ? 'text-sm'
+                                            : 'text-sm text-muted-foreground', children: asset.alt ??
+                                            intl.formatMessage(messages.altMissing) })] })), asset.tags.length > 0 ? (_jsxs("div", { children: [_jsx(Separator, { className: "mb-3" }), _jsx("h3", { className: "mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", 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] })] })) : null }) }));
+}

package/dist/lib/components/EntryMediaTab/MediaFieldSection/index.d.ts

@@ -0,0 +1,28 @@
+import { type ContentField, type MediaRef } from '@orthacms/content-admin';
+import type { MediaPendingUploads } from '../../../types/pendingUpload';
+/**
+ * One media field as a **titled card** in the entry editor's Media tab —
+ * deliberately the same shape as the Relations tab's `RelationFieldSection`, so
+ * the two contributed tabs read as one editor: a header (label, required mark,
+ * the localized globe, a "Changed" pill, an error alert) over a one-line
+ * description of what the field holds, then the {@link MediaFieldControl}. An
+ * error tints the card's border, the same signal a relation card gives.
+ */
+export declare function MediaFieldSection({ field, error, changed, value, initialRefs, refsPending, uploads, readOnly, onChange, onBlur }: {
+    field: ContentField;
+    error?: string;
+    /** Whether the field has unsaved changes (drives the "Changed" badge). */
+    changed: boolean;
+    value: unknown;
+    /** Server-resolved refs for the already-saved ids. */
+    initialRefs?: MediaRef[];
+    /** Whether those refs are still loading (a tile waits rather than guesses). */
+    refsPending?: boolean;
+    /** Editor-level staging for files that upload with the record. */
+    uploads?: MediaPendingUploads;
+    /** Whether the entry editor is a read-only preview (no `content:update`). */
+    readOnly?: boolean;
+    onChange: (value: unknown) => void;
+    onBlur: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/EntryMediaTab/MediaFieldSection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/EntryMediaTab/MediaFieldSection/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEH,KAAK,YAAY,EACjB,KAAK,QAAQ,EAChB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAkCxE;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAC9B,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,WAAW,EACX,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,EACT,EAAE;IACC,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC;IACzB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACtB,+BA2GA"}

package/dist/lib/components/EntryMediaTab/MediaFieldSection/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { AlertCircle, Globe } from 'lucide-react';
+import { cn, Field, FieldDescription, FieldError, Tooltip, TooltipContent, TooltipTrigger } from '@orthacms/design-system';
+import { ChangedBadge } from '@orthacms/content-admin';
+import { MediaFieldControl } from '../../MediaFieldControl';
+/** Intl descriptors for {@link MediaFieldSection}, co-located. */
+const messages = defineMessages({
+    invalid: {
+        id: 'media.section.invalid',
+        defaultMessage: 'This field has an error'
+    },
+    localized: {
+        id: 'media.section.localized',
+        defaultMessage: 'This asset can differ per locale.'
+    },
+    localizedLabel: {
+        id: 'media.section.localizedLabel',
+        defaultMessage: 'Localized field'
+    },
+    descSingle: {
+        id: 'media.section.descSingle',
+        defaultMessage: 'One asset from the Media Library.'
+    },
+    descMultiple: {
+        id: 'media.section.descMultiple',
+        defaultMessage: 'Ordered list — assets are delivered in the order shown here.'
+    }
+});
+/** The display label for a field — its admin label, else its machine name. */
+function labelOf(field) {
+    const label = field.admin?.['label'];
+    return typeof label === 'string' && label ? label : field.name;
+}
+/**
+ * One media field as a **titled card** in the entry editor's Media tab —
+ * deliberately the same shape as the Relations tab's `RelationFieldSection`, so
+ * the two contributed tabs read as one editor: a header (label, required mark,
+ * the localized globe, a "Changed" pill, an error alert) over a one-line
+ * description of what the field holds, then the {@link MediaFieldControl}. An
+ * error tints the card's border, the same signal a relation card gives.
+ */
+export function MediaFieldSection({ field, error, changed, value, initialRefs, refsPending, uploads, readOnly, onChange, onBlur }) {
+    const intl = useIntl();
+    const controlId = `media-field-${field.name}`;
+    const errorId = `${controlId}-error`;
+    const titleId = `${controlId}-title`;
+    const description = field.admin?.['description'];
+    return (_jsxs(Field, { "data-invalid": !!error, "aria-labelledby": titleId, className: cn('gap-3 rounded-2xl border bg-card p-4', error && 'border-destructive/50'), children: [_jsx("div", { className: "flex items-start gap-2", children: _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("h2", { id: titleId, className: "text-sm font-medium", children: [labelOf(field), field.required ? (_jsx("span", { "aria-hidden": true, className: "text-destructive", children: "*" })) : null] }), field.localized ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "inline-flex shrink-0 rounded text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx(Globe, { "aria-hidden": true, className: "size-3.5" }), _jsx("span", { className: "sr-only", children: intl.formatMessage(messages.localizedLabel) })] }) }), _jsx(TooltipContent, { children: intl.formatMessage(messages.localized) })] })) : null, changed ? _jsx(ChangedBadge, {}) : null, error ? (_jsx(AlertCircle, { className: "size-4 shrink-0 text-destructive", "aria-label": intl.formatMessage(messages.invalid) })) : null] }), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: intl.formatMessage(field.multiple
+                                ? messages.descMultiple
+                                : messages.descSingle) })] }) }), _jsx(MediaFieldControl, { id: controlId, multiple: !!field.multiple, accept: field.accept, required: field.required, value: value, initialRefs: initialRefs, refsPending: refsPending, uploads: uploads, readOnly: readOnly, invalid: !!error, describedBy: error ? errorId : undefined, onChange: onChange, onBlur: onBlur }), !error && typeof description === 'string' ? (_jsx(FieldDescription, { children: description })) : null, error ? _jsx(FieldError, { id: errorId, children: error }) : null] }));
+}

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

@@ -0,0 +1,11 @@
+import { type EntryTabContext } from '@orthacms/content-admin';
+/**
+ * The entry editor's **Media tab**, contributed by the media plugin through
+ * content-admin's `ENTRY_TAB_SLOT`. Renders one {@link MediaFieldSection} per
+ * media field on the type — the same titled-card shape the Relations tab uses —
+ * bound to the editor's shared form, so a change here rides Save, the publish
+ * gate, and the 422→field mapping exactly like a General-tab field. Media values
+ * live in the entry `values` bag; this tab is only their rendering surface.
+ */
+export declare function EntryMediaTab(ctx: EntryTabContext): import("react").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/EntryMediaTab/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAEH,KAAK,eAAe,EACvB,MAAM,yBAAyB,CAAC;AAajC;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,eAAe,sCA0CjD"}

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { CONTENT_FIELD_TYPE } from '@orthacms/content-admin';
+import { MEDIA_PRESAVE_ID } from '../../hooks/usePendingMediaUploads';
+import { MediaFieldSection } from './MediaFieldSection';
+const messages = defineMessages({
+    subtitle: {
+        id: 'media.tab.subtitle',
+        defaultMessage: 'Attach images and files from the Media Library, or upload new ones — uploads are added to the library too.'
+    }
+});
+/**
+ * The entry editor's **Media tab**, contributed by the media plugin through
+ * content-admin's `ENTRY_TAB_SLOT`. Renders one {@link MediaFieldSection} per
+ * media field on the type — the same titled-card shape the Relations tab uses —
+ * bound to the editor's shared form, so a change here rides Save, the publish
+ * gate, and the 422→field mapping exactly like a General-tab field. Media values
+ * live in the entry `values` bag; this tab is only their rendering surface.
+ */
+export function EntryMediaTab(ctx) {
+    const intl = useIntl();
+    const { schema, form, mediaRefs, mediaRefsPending, readOnly } = ctx;
+    // The plugin's own presave handle — the staging for files chosen here, held
+    // above this panel (which unmounts on every tab switch) and uploaded by the
+    // save. A tab reads only its own key from `presave`.
+    const uploads = ctx.presave[MEDIA_PRESAVE_ID];
+    const fields = schema.fields.filter((field) => field.type === CONTENT_FIELD_TYPE.Media);
+    if (fields.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [readOnly ? null : (_jsx("p", { className: "text-sm text-muted-foreground", children: intl.formatMessage(messages.subtitle) })), fields.map((field) => (_jsx(MediaFieldSection, { field: field, error: form.errorFor(field.name), changed: form.isFieldDirty(field.name), value: form.values[field.name], initialRefs: mediaRefs[field.name], refsPending: mediaRefsPending, uploads: uploads, readOnly: readOnly, onChange: (value) => form.setValue(field.name, value), onBlur: () => form.touch(field.name) }, field.name)))] }));
+}

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+/**
+ * The per-folder action menu — Open, Rename, and a destructive Delete (which
+ * 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 }: {
+    /**
+     * 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
+     * "Folder actions" with nothing to tell them apart.
+     */
+    name: string;
+    onOpen: () => void;
+    onRename: () => void;
+    onDelete: () => void;
+    canUpdate: boolean;
+    canDelete: boolean;
+    trigger?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+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 { FolderOpen, MoreVertical, Pencil, Trash2 } from 'lucide-react';
+/** Intl descriptors for {@link FolderActionsMenu}, co-located. */
+const messages = defineMessages({
+    trigger: {
+        id: 'media.folder.actions.trigger',
+        defaultMessage: 'Actions for {name}'
+    },
+    open: { id: 'media.folder.actions.open', defaultMessage: 'Open' },
+    rename: { id: 'media.folder.actions.rename', defaultMessage: 'Rename' },
+    delete: { id: 'media.folder.actions.delete', defaultMessage: 'Delete' }
+});
+/**
+ * The per-folder action menu — Open, Rename, and a destructive Delete (which
+ * 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 }) {
+    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, {
+                        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/MediaAltTextWidget/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * How many of the workspace's images carry alt text.
+ *
+ * The missing count is the headline rather than the coverage percentage: "794
+ * images need alt text" is a job someone can pick up, where "68% covered" is a
+ * score. The meter carries the proportion for context.
+ */
+export declare function MediaAltTextWidget(): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { AlertCircle, Check } from 'lucide-react';
+import { WidgetCard, WidgetChip, toneBackground } from '@orthacms/insights-admin';
+import { useMediaAltCoverage } from '../../hooks/useMediaInsights';
+/** Intl descriptors for the alt-text widget, co-located here. */
+const messages = defineMessages({
+    title: {
+        id: 'media.insights.alt.title',
+        defaultMessage: 'Images missing alt text'
+    },
+    description: {
+        id: 'media.insights.alt.description',
+        defaultMessage: 'Accessibility debt in the library'
+    },
+    covered: {
+        id: 'media.insights.alt.covered',
+        defaultMessage: 'All covered'
+    },
+    share: {
+        id: 'media.insights.alt.share',
+        defaultMessage: '{percent}% uncovered'
+    },
+    summary: {
+        id: 'media.insights.alt.summary',
+        defaultMessage: 'of {images, number} images'
+    },
+    hasAlt: {
+        id: 'media.insights.alt.hasAlt',
+        defaultMessage: 'Has alt · {count, number}'
+    },
+    missing: {
+        id: 'media.insights.alt.missing',
+        defaultMessage: 'Missing · {count, number}'
+    },
+    meter: {
+        id: 'media.insights.alt.meter',
+        defaultMessage: '{percent}% of images have alt text; {missing, number} do not.'
+    }
+});
+/**
+ * How many of the workspace's images carry alt text.
+ *
+ * The missing count is the headline rather than the coverage percentage: "794
+ * images need alt text" is a job someone can pick up, where "68% covered" is a
+ * score. The meter carries the proportion for context.
+ */
+export function MediaAltTextWidget() {
+    const intl = useIntl();
+    const { data, isPending, isError } = useMediaAltCoverage();
+    const images = data?.images ?? 0;
+    const missing = data?.missing ?? 0;
+    const withAlt = data?.withAlt ?? 0;
+    const missingPercent = images > 0 ? Math.round((missing / images) * 100) : 0;
+    const coveredPercent = 100 - missingPercent;
+    return (_jsx(WidgetCard, { title: intl.formatMessage(messages.title), description: intl.formatMessage(messages.description), action: missing === 0 ? (_jsx(WidgetChip, { tone: "ok", icon: Check, children: intl.formatMessage(messages.covered) })) : (_jsx(WidgetChip, { tone: "warn", icon: AlertCircle, children: intl.formatMessage(messages.share, {
+                percent: missingPercent
+            }) })), isPending: isPending, isError: isError, isEmpty: images === 0, skeletonRows: 3, children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-3xl font-semibold tracking-[-0.025em] tabular-nums", children: intl.formatNumber(missing) }), _jsx("div", { className: "text-xs text-muted-foreground", children: intl.formatMessage(messages.summary, { images }) })] }), _jsxs("div", { className: "flex h-2 gap-[2px] overflow-hidden rounded-full bg-muted", role: "img", "aria-label": intl.formatMessage(messages.meter, {
+                        percent: coveredPercent,
+                        missing
+                    }), children: [_jsx("span", { className: `block rounded-full ${toneBackground('series-1')}`, style: { width: `${coveredPercent}%` } }), _jsx("span", { className: "block rounded-full bg-warning", style: { width: `${missingPercent}%` } })] }), _jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [_jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: `block size-2 rounded-[2px] ${toneBackground('series-1')}` }), intl.formatMessage(messages.hasAlt, {
+                                    count: withAlt
+                                })] }), _jsxs("span", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "block size-2 rounded-[2px] bg-warning" }), intl.formatMessage(messages.missing, {
+                                    count: missing
+                                })] })] })] }) }));
+}

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

@@ -0,0 +1,11 @@
+import type { MediaFolder } from '../../types/mediaFolder';
+/**
+ * The folder path above the browser — "All media" followed by each ancestor up
+ * to the open folder, chevron-separated. Every crumb but the last is a button
+ * that navigates to that folder; the last is the current location (not a link).
+ */
+export declare function MediaBreadcrumbs({ breadcrumbs, onNavigate }: {
+    breadcrumbs: MediaFolder[];
+    onNavigate: (folderId: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaBreadcrumbs/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQ3D;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,EAC7B,WAAW,EACX,UAAU,EACb,EAAE;IACC,WAAW,EAAE,WAAW,EAAE,CAAC;IAC3B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,+BA8CA"}

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

@@ -0,0 +1,13 @@
+/**
+ * The browser's empty state. When a search/filter is active it offers to clear
+ * them; otherwise (a genuinely empty folder) it invites an upload — the upload
+ * CTA shows only when the user may create. The page decides which variant via
+ * `hasFilters`.
+ */
+export declare function MediaEmptyState({ hasFilters, canCreate, onUpload, onClearFilters }: {
+    hasFilters: boolean;
+    canCreate: boolean;
+    onUpload: () => void;
+    onClearFilters: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaEmptyState/index.tsx"],"names":[],"mappings":"AAmCA;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC5B,UAAU,EACV,SAAS,EACT,QAAQ,EACR,cAAc,EACjB,EAAE;IACC,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC9B,+BAqDA"}