@orthacms/media-admin 0.0.0-reserve.0

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@orthacms/design-system';
+import { FileSearch, ImagePlus, UploadCloud } from 'lucide-react';
+/** Intl descriptors for {@link MediaEmptyState}, co-located. */
+const messages = defineMessages({
+    emptyTitle: {
+        id: 'media.empty.emptyTitle',
+        defaultMessage: 'This folder is empty'
+    },
+    emptyBody: {
+        id: 'media.empty.emptyBody',
+        defaultMessage: 'Upload images, video, audio, or documents to get started.'
+    },
+    upload: { id: 'media.empty.upload', defaultMessage: 'Upload assets' },
+    noResultsTitle: {
+        id: 'media.empty.noResultsTitle',
+        defaultMessage: 'No matching assets'
+    },
+    noResultsBody: {
+        id: 'media.empty.noResultsBody',
+        defaultMessage: 'Try a different search term or clear the filters.'
+    },
+    clear: { id: 'media.empty.clear', defaultMessage: 'Clear filters' }
+});
+/**
+ * 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 function MediaEmptyState({ hasFilters, canCreate, onUpload, onClearFilters }) {
+    const intl = useIntl();
+    if (hasFilters) {
+        return (_jsxs(Empty, { className: "py-16", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(FileSearch, { "aria-hidden": true }) }), _jsx(EmptyTitle, { children: intl.formatMessage(messages.noResultsTitle) }), _jsx(EmptyDescription, { children: intl.formatMessage(messages.noResultsBody) })] }), _jsx(EmptyContent, { children: _jsx(Button, { variant: "outline", className: "shadow-none", onClick: onClearFilters, children: intl.formatMessage(messages.clear) }) })] }));
+    }
+    return (_jsxs(Empty, { className: "py-16", children: [_jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(ImagePlus, { "aria-hidden": true }) }), _jsx(EmptyTitle, { children: intl.formatMessage(messages.emptyTitle) }), _jsx(EmptyDescription, { children: intl.formatMessage(messages.emptyBody) })] }), canCreate ? (_jsx(EmptyContent, { children: _jsxs(Button, { onClick: onUpload, children: [_jsx(UploadCloud, { "aria-hidden": true }), intl.formatMessage(messages.upload)] }) })) : null] }));
+}

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

@@ -0,0 +1,34 @@
+import type { MediaFieldDisplay } from '../../../types/mediaFieldDisplay';
+/**
+ * One attached asset on a media field — a preview tile (the real image, else the
+ * asset's deterministic gradient behind its kind glyph) over the file name and
+ * what is known of its type / size / dimensions, with the per-item controls
+ * revealed on hover or focus: open in a new tab, remove, and — in an ordered
+ * multiple field — nudge up/down. A `missing` ref renders as an explicit warning
+ * tile instead of a broken preview, so a dead id can still be found and removed,
+ * and a `resolving` one (its ref still in flight) renders a placeholder rather
+ * than guessing a URL — a guess would fetch the full-size original.
+ *
+ * In a **read-only** editor the tile keeps its preview, its name, its metadata
+ * and its open-in-a-new-tab link, and drops remove + reorder. The position badge
+ * stays: order is part of what the field *holds*, not a control.
+ */
+export declare function MediaFieldItem({ item, index, total, multiple, readOnly, onRemove, onMove, alt, decorative, onAltChange, onDecorativeChange }: {
+    item: MediaFieldDisplay;
+    /** Zero-based position, shown (1-based) and used to gate the arrows. */
+    index: number;
+    total: number;
+    /** Ordered-multiple field: renders the position badge + reorder arrows. */
+    multiple: boolean;
+    /** Preview mode — drop the remove and reorder controls. */
+    readOnly?: boolean;
+    onRemove: () => void;
+    onMove: (delta: number) => void;
+    /** The text alternative stored on **this usage**, if any. */
+    alt?: string;
+    /** Whether this usage is marked purely presentational. */
+    decorative?: boolean;
+    onAltChange?: (next: string) => void;
+    onDecorativeChange?: (next: boolean) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { ArrowDown, ArrowUp, ExternalLink, FileWarning, Trash2 } from 'lucide-react';
+import { Button, Checkbox, Field, FieldLabel, Input, cn } from '@orthacms/design-system';
+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 { MediaKindIcon } from '../../MediaKindIcon';
+/** Intl descriptors for {@link MediaFieldItem}, co-located. */
+const messages = defineMessages({
+    altLabel: {
+        id: 'media.field.item.altLabel',
+        defaultMessage: 'Alt text for {name}'
+    },
+    altPlaceholder: {
+        id: 'media.field.item.altPlaceholder',
+        defaultMessage: 'Describe this image'
+    },
+    altMissing: {
+        id: 'media.field.item.altMissing',
+        defaultMessage: 'Needs alt text'
+    },
+    decorativeLabel: {
+        id: 'media.field.item.decorativeLabel',
+        defaultMessage: 'Decorative — no description needed'
+    },
+    remove: { id: 'media.fieldItem.remove', defaultMessage: 'Remove {name}' },
+    preview: {
+        id: 'media.fieldItem.preview',
+        defaultMessage: 'Open {name} in a new tab'
+    },
+    moveUp: { id: 'media.fieldItem.moveUp', defaultMessage: 'Move {name} up' },
+    moveDown: {
+        id: 'media.fieldItem.moveDown',
+        defaultMessage: 'Move {name} down'
+    },
+    unavailable: {
+        id: 'media.fieldItem.unavailable',
+        defaultMessage: 'Unavailable asset'
+    },
+    unavailableHint: {
+        id: 'media.fieldItem.unavailableHint',
+        defaultMessage: 'Deleted or out of workspace'
+    },
+    pending: {
+        id: 'media.fieldItem.pending',
+        defaultMessage: 'Uploads on save'
+    },
+    resolving: {
+        id: 'media.fieldItem.resolving',
+        defaultMessage: 'Loading asset…'
+    },
+    position: {
+        id: 'media.fieldItem.position',
+        defaultMessage: 'Position {index} of {total}'
+    }
+});
+/** `image/png` → `PNG`; the short type label under the file name. */
+function formatKind(mimeType) {
+    const subtype = mimeType.split('/')[1];
+    if (!subtype)
+        return null;
+    return subtype.split('+')[0]?.toUpperCase() ?? null;
+}
+/** The glyph kind for a ref's `kind` string, falling back for an unknown one. */
+function kindOf(kind) {
+    const known = Object.values(MEDIA_KIND);
+    return known.includes(kind) ? kind : MEDIA_KIND.Document;
+}
+/**
+ * One attached asset on a media field — a preview tile (the real image, else the
+ * asset's deterministic gradient behind its kind glyph) over the file name and
+ * what is known of its type / size / dimensions, with the per-item controls
+ * revealed on hover or focus: open in a new tab, remove, and — in an ordered
+ * multiple field — nudge up/down. A `missing` ref renders as an explicit warning
+ * tile instead of a broken preview, so a dead id can still be found and removed,
+ * and a `resolving` one (its ref still in flight) renders a placeholder rather
+ * than guessing a URL — a guess would fetch the full-size original.
+ *
+ * In a **read-only** editor the tile keeps its preview, its name, its metadata
+ * and its open-in-a-new-tab link, and drops remove + reorder. The position badge
+ * stays: order is part of what the field *holds*, not a control.
+ */
+export function MediaFieldItem({ item, index, total, multiple, readOnly = false, onRemove, onMove, alt, decorative = false, onAltChange, onDecorativeChange }) {
+    const intl = useIntl();
+    const altId = useId();
+    const asImage = item.kind === MEDIA_KIND.Image;
+    const meta = [
+        formatKind(item.mimeType),
+        typeof item.size === 'number' ? formatBytes(item.size) : null,
+        item.dimensions
+            ? `${item.dimensions.width}×${item.dimensions.height}`
+            : null
+    ]
+        .filter(Boolean)
+        .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, {
+                            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, {
+                                    name: item.name
+                                }), onClick: onRemove, children: _jsx(Trash2, { className: "size-3.5", "aria-hidden": true }) }))] }), multiple && total > 1 && !readOnly ? (_jsxs("div", { className: "absolute bottom-1.5 right-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: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-6", disabled: index === 0, "aria-label": intl.formatMessage(messages.moveUp, {
+                                    name: item.name
+                                }), onClick: () => onMove(-1), children: _jsx(ArrowUp, { className: "size-3.5", "aria-hidden": true }) }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-6", disabled: index === total - 1, "aria-label": intl.formatMessage(messages.moveDown, {
+                                    name: item.name
+                                }), onClick: () => onMove(1), children: _jsx(ArrowDown, { className: "size-3.5", "aria-hidden": true }) })] })) : null] }), _jsxs("div", { className: "min-w-0 px-2.5 py-2", children: [_jsx("p", { className: cn('truncate text-xs font-medium', item.missing && 'text-destructive', item.resolving && 'text-muted-foreground'), title: item.missing || item.resolving ? undefined : item.name, children: item.missing
+                            ? intl.formatMessage(messages.unavailable)
+                            : item.resolving
+                                ? intl.formatMessage(messages.resolving)
+                                : item.name }), _jsx("p", { className: "truncate text-[11px] text-muted-foreground", children: item.missing ? item.id : item.resolving ? '' : meta })] }), !readOnly && !item.missing && !item.resolving && onAltChange ? (_jsxs("div", { className: "flex flex-col gap-1.5 border-t px-2.5 py-2", children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: altId, className: "text-[11px]", children: intl.formatMessage(messages.altLabel, {
+                                    name: item.name
+                                }) }), _jsx(Input, { id: altId, value: alt ?? '', disabled: decorative, maxLength: MEDIA_ALT_MAX_LENGTH, placeholder: intl.formatMessage(messages.altPlaceholder), onChange: (event) => onAltChange(event.target.value), className: "h-7 text-xs" })] }), onDecorativeChange ? (_jsxs("label", { className: "text-muted-foreground flex items-center gap-1.5 text-[11px]", children: [_jsx(Checkbox, { checked: decorative, onCheckedChange: (next) => onDecorativeChange(next === true) }), intl.formatMessage(messages.decorativeLabel)] })) : null, !decorative && !(alt ?? '').trim() ? (_jsx("p", { className: "text-warning-soft-foreground text-[11px]", children: intl.formatMessage(messages.altMissing) })) : null] })) : null] }));
+}

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

@@ -0,0 +1,61 @@
+import type { MediaRef } from '@orthacms/content-admin';
+import type { MediaPendingUploads } from '../../types/pendingUpload';
+import { type MediaAccept } from '../../utils/mediaAccept';
+/**
+ * The editor control for one media field — a single asset or an ordered list.
+ * The attached assets render as preview tiles ({@link MediaFieldItem}, resolved
+ * from the server-provided refs or a just-picked/uploaded asset) inside a panel
+ * that doubles as a **drop zone**. Below it sit **Select from library** (the
+ * {@link MediaPickerDialog}) and **Upload**, plus the field's accept hint and, in
+ * multiple mode, the attached count.
+ *
+ * **Choosing a file uploads nothing.** The {@link UploadDialog} — the Media
+ * Library's own modal, reused whole — stages and previews the files (a drop on
+ * the panel opens it pre-staged), and confirming only *stages* them: they get a
+ * placeholder id, render as "Pending upload" tiles, and the bytes move when the
+ * record is **saved or published** (`usePendingMediaUploads`, the plugin's
+ * presave contribution). So abandoning an edit leaves nothing behind in the
+ * library, and a record plus its new assets land as one commit.
+ *
+ * Fully controlled: the parent (the Media tab, bound to the entry form) owns the
+ * value as an asset id or id array.
+ *
+ * **Read-only** (the reader has no `content:update`/`content:create` on the
+ * record) reduces it to the tiles: no drop zone, no Select/Upload row, no
+ * remove or reorder on a tile. Note this is a *content* permission, distinct
+ * from the `media:*` gates below — a user may hold every media permission there
+ * is and still not be allowed to change **this record**, and attaching an asset
+ * to a record is a write to the record.
+ */
+export declare function MediaFieldControl({ id, multiple, accept, value, initialRefs, refsPending, invalid, describedBy, required, uploads, readOnly, onChange, onBlur }: {
+    id: string;
+    multiple: boolean;
+    accept?: MediaAccept;
+    value: unknown;
+    /** Server-resolved refs for pre-existing ids (names / thumbnails / missing). */
+    initialRefs?: MediaRef[];
+    /**
+     * Whether the entry's media read is still in flight. Distinguishes "not
+     * resolved **yet**" (wait, render a placeholder) from "resolved to nothing"
+     * (the read failed or no media plugin is bound — fall back to the raw route
+     * rather than waiting forever).
+     */
+    refsPending?: boolean;
+    invalid?: boolean;
+    describedBy?: string;
+    required?: boolean;
+    /**
+     * The editor-level staging for not-yet-uploaded files. Absent when no presave
+     * contribution is mounted — the control then offers library picking only,
+     * rather than an Upload button that could never commit.
+     */
+    uploads?: MediaPendingUploads;
+    /**
+     * Preview mode — the entry editor is read-only, so the field shows what is
+     * attached and offers no way to change it.
+     */
+    readOnly?: boolean;
+    onChange: (value: unknown) => void;
+    onBlur?: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

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