@orthacms/media-admin 0.0.0-reserve.0

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

@@ -0,0 +1,422 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { useHasPermission } from '@orthacms/identity-admin';
+import { toMediaValueRef } from '@orthacms/content-domain';
+import { MEDIA_CREATE, MEDIA_KIND, MEDIA_READ } from '../../constants';
+import { kindFromMime } from '../../utils/kindFromMime';
+import { acceptsFile, describeAccept } from '../../utils/mediaAccept';
+import { MediaPickerDialog } from '../MediaPickerDialog';
+import { UploadDialog } from '../UploadDialog';
+import { MediaFieldItem } from './MediaFieldItem';
+const messages = defineMessages({
+    select: { id: 'media.field.select', defaultMessage: 'Select from library' },
+    add: { id: 'media.field.add', defaultMessage: 'Add from library' },
+    upload: { id: 'media.field.upload', defaultMessage: 'Upload' },
+    replace: { id: 'media.field.replace', defaultMessage: 'Replace' },
+    attach: { id: 'media.field.attach', defaultMessage: 'Attach files' },
+    uploadTo: {
+        id: 'media.field.uploadTo',
+        defaultMessage: 'Files are attached now and uploaded to {location} when you save the record.'
+    },
+    stagedCount: {
+        id: 'media.field.stagedCount',
+        defaultMessage: '{count, plural, one {# file uploads on save} other {# files upload on save}}'
+    },
+    // No size is quoted: the cap is server config the admin cannot read, and
+    // the old "Up to 250 MB each" was five times the shipped 50 MB default.
+    uploadHintAccept: {
+        id: 'media.field.uploadHintAccept',
+        defaultMessage: 'This field accepts {what}.'
+    },
+    /**
+     * Names the panel so its drop affordance isn't sighted-mouse-only. The
+     * Upload button remains the keyboard route; this just says the drop exists.
+     */
+    dropZone: {
+        id: 'media.field.dropZone',
+        defaultMessage: 'Attached assets. Drop files here to attach them, or use the Upload button.'
+    },
+    dropZoneReadOnly: {
+        id: 'media.field.dropZoneReadOnly',
+        defaultMessage: 'Attached assets'
+    },
+    libraryRoot: { id: 'media.field.libraryRoot', defaultMessage: 'All media' },
+    emptySingle: {
+        id: 'media.field.emptySingle',
+        defaultMessage: 'No asset selected'
+    },
+    emptyMultiple: {
+        id: 'media.field.emptyMultiple',
+        defaultMessage: 'No assets attached'
+    },
+    emptyBody: {
+        id: 'media.field.emptyBody',
+        defaultMessage: 'Drop a file here, or pick one from the Media Library. New files upload when you save.'
+    },
+    emptyBodyPickOnly: {
+        id: 'media.field.emptyBodyPickOnly',
+        defaultMessage: 'Pick an asset from the Media Library.'
+    },
+    dropHere: {
+        id: 'media.field.dropHere',
+        defaultMessage: 'Drop to attach'
+    },
+    dropBody: {
+        id: 'media.field.dropBody',
+        defaultMessage: 'Dropped files open in the upload dialog first, so you can check them.'
+    },
+    accepts: { id: 'media.field.accepts', defaultMessage: 'Accepts {what}' },
+    count: {
+        id: 'media.field.count',
+        defaultMessage: '{count, plural, one {# asset attached} other {# assets attached}}'
+    },
+    uploadRejected: {
+        id: 'media.field.uploadRejected',
+        defaultMessage: '{name} is not an accepted file type for this field.'
+    },
+    noMediaAccess: {
+        id: 'media.field.noMediaAccess',
+        defaultMessage: 'You don’t have access to the Media Library, so this field can only be read.'
+    },
+    emptyReadOnly: {
+        id: 'media.field.emptyReadOnly',
+        defaultMessage: 'Nothing attached'
+    },
+    emptyBodyReadOnly: {
+        id: 'media.field.emptyBodyReadOnly',
+        defaultMessage: 'This field has no assets.'
+    }
+});
+/**
+ * Normalize the field value to an ordered list of {@link MediaValueRef}s.
+ *
+ * The value is `{ id, alt?, decorative? }` (or a list of them) since `ORT-83`,
+ * and a bare id or id array before that — both still arrive, so both are
+ * normalized here and the legacy form stays confined to the kernel's
+ * `toMediaValueRef`. A legacy value reads as "no alternative supplied", which is
+ * exactly what it is.
+ */
+function toRefs(value) {
+    return (Array.isArray(value) ? value : [value])
+        .map(toMediaValueRef)
+        .filter((ref) => ref !== null && !!ref.id);
+}
+/** The original-bytes route for an id we know nothing else about. */
+function rawUrl(id) {
+    return `/api/media/assets/${id}/raw`;
+}
+/** Whether a drag carries files (as opposed to text or an in-page element). */
+function dragHasFiles(transfer) {
+    return !!transfer && Array.from(transfer.types).includes('Files');
+}
+/**
+ * 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 function MediaFieldControl({ id, multiple, accept, value, initialRefs, refsPending, invalid, describedBy, required, uploads, readOnly = false, onChange, onBlur }) {
+    const intl = useIntl();
+    // Mirror the server's media matrix. Without these the controls still
+    // *render*, and the failure lands late and loud: a deferred upload 403s
+    // inside the save, which aborts the whole record write — so a missing
+    // permission would cost the user their unrelated edits too.
+    const canPickMedia = useHasPermission(MEDIA_READ);
+    const canUploadMedia = useHasPermission(MEDIA_CREATE);
+    const [pickerOpen, setPickerOpen] = useState(false);
+    const [uploadOpen, setUploadOpen] = useState(false);
+    // Files dropped on the panel, staged into the upload dialog when it opens —
+    // a drop gets the same preview-before-you-commit step as the Upload button.
+    const [dropped, setDropped] = useState([]);
+    const [dragging, setDragging] = useState(false);
+    // Nested elements fire dragleave as the pointer crosses them, so the highlight
+    // is held by a depth counter rather than the last event to arrive.
+    const dragDepth = useRef(0);
+    // Locally-known assets (just picked or uploaded), merged over the server refs
+    // so a freshly-added asset shows its real name/thumbnail before any refetch.
+    const [known, setKnown] = useState(new Map());
+    const refs = toRefs(value);
+    const ids = refs.map((ref) => ref.id);
+    // Staging is only offered when the user may actually upload; the presave
+    // step would otherwise fail the save on their behalf. A read-only record is
+    // the same argument one level up: there is no save to ride.
+    //
+    // This also disarms the drop zone, whose enter/drop handlers both bail on
+    // `!canStage` — so a read-only field can't be dropped onto.
+    const canStage = !!uploads && canUploadMedia && !readOnly;
+    const pending = uploads?.pending;
+    const displays = useMemo(() => {
+        const refs = new Map(initialRefs?.map((ref) => [ref.id, ref]));
+        return ids.map((assetId) => {
+            // A staged (not yet uploaded) file: everything is known locally, and
+            // an image previews straight off its object URL.
+            const staged = pending?.get(assetId);
+            if (staged)
+                return {
+                    id: assetId,
+                    name: staged.file.name,
+                    url: staged.previewUrl ?? '',
+                    kind: kindFromMime(staged.file.type),
+                    mimeType: staged.file.type,
+                    size: staged.file.size,
+                    pending: true
+                };
+            const local = known.get(assetId);
+            if (local)
+                return {
+                    id: assetId,
+                    name: local.name,
+                    // Tiles are small: prefer the derivative the server made.
+                    url: local.thumbUrl ?? local.previewUrl ?? local.url,
+                    originalUrl: local.url,
+                    kind: local.kind,
+                    mimeType: local.mimeType,
+                    size: local.size,
+                    dimensions: local.dimensions
+                };
+            const ref = refs.get(assetId);
+            if (ref)
+                return {
+                    id: assetId,
+                    name: ref.name,
+                    url: ref.thumbUrl ?? ref.previewUrl ?? ref.url,
+                    originalUrl: ref.url,
+                    kind: ref.kind,
+                    mimeType: ref.mimeType,
+                    missing: ref.missing
+                };
+            // Nothing known about this id. While the entry's media read is in
+            // flight, wait: guessing the raw route made every edit-mode open
+            // pull **full-size originals** to draw 180px tiles, and printed a
+            // uuid where the file name goes. Once the read has settled without
+            // a ref (it failed, or no media plugin is bound) waiting would
+            // never end — so fall back to the raw route and show *something*.
+            // The id names the controls either way, so "Remove …" stays unique.
+            if (refsPending)
+                return {
+                    id: assetId,
+                    name: assetId,
+                    url: '',
+                    kind: '',
+                    mimeType: '',
+                    resolving: true
+                };
+            return {
+                id: assetId,
+                name: assetId,
+                url: rawUrl(assetId),
+                kind: MEDIA_KIND.Image,
+                mimeType: ''
+            };
+        });
+    }, [ids, initialRefs, known, pending, refsPending]);
+    const remember = (assets) => {
+        setKnown((current) => {
+            const next = new Map(current);
+            for (const asset of assets)
+                next.set(asset.id, asset);
+            return next;
+        });
+    };
+    const setRefs = (nextRefs) => {
+        // Anything staged that just left the field is forgotten here — one place,
+        // so a remove, a replace, and a re-pick all release the preview blob (and
+        // stop the save uploading a file nothing references).
+        if (pending) {
+            const kept = new Set(nextRefs.map((ref) => ref.id));
+            for (const assetId of ids) {
+                if (!kept.has(assetId) && pending.has(assetId))
+                    uploads?.drop(assetId);
+            }
+        }
+        onChange(multiple ? nextRefs : (nextRefs[0] ?? null));
+        onBlur?.();
+    };
+    /** Attaching by id, keeping the alt text of anything already attached. */
+    const setIds = (nextIds) => {
+        const byId = new Map(refs.map((ref) => [ref.id, ref]));
+        setRefs(nextIds.map((assetId) => byId.get(assetId) ?? { id: assetId }));
+    };
+    /**
+     * Patches one usage's text alternative.
+     *
+     * `alt` and `decorative` are mutually exclusive by the kernel's validation —
+     * an image cannot be presentational *and* carry a description — so marking a
+     * usage decorative drops whatever was typed rather than leaving a value the
+     * publish gate would refuse. Un-marking it leaves the field empty, which is
+     * the honest state: the author has not answered yet.
+     */
+    const patchRef = (index, patch) => {
+        setRefs(refs.map((ref, at) => {
+            if (at !== index)
+                return ref;
+            const next = { ...ref, ...patch };
+            if (next.decorative === true)
+                delete next.alt;
+            if (next.decorative !== true)
+                delete next.decorative;
+            if (next.alt === '')
+                delete next.alt;
+            return next;
+        }));
+    };
+    const onPicked = (assets) => {
+        if (!assets.length)
+            return;
+        remember(assets);
+        if (multiple) {
+            // Append the newly-picked, skipping any already attached.
+            const existing = new Set(ids);
+            const added = assets
+                .map((a) => a.id)
+                .filter((assetId) => !existing.has(assetId));
+            setIds([...ids, ...added]);
+        }
+        else {
+            setIds(assets[0] ? [assets[0].id] : []);
+        }
+    };
+    /**
+     * Stage the confirmed files against the field — no request yet. Each gets a
+     * placeholder id that rides the form until the save uploads it. The field's
+     * own `accept` is enforced here on the file's MIME type (the server checks
+     * the real asset again on save), so a rejected file never reaches the value.
+     */
+    const onStaged = (files) => {
+        if (!uploads || !canStage)
+            return;
+        const allowed = [];
+        for (const file of files) {
+            if (acceptsFile(accept, file))
+                allowed.push(file);
+            else
+                toast.error(intl.formatMessage(messages.uploadRejected, {
+                    name: file.name
+                }));
+        }
+        if (!allowed.length)
+            return;
+        const staged = uploads.stage(multiple ? allowed : allowed.slice(0, 1));
+        setIds(multiple ? [...ids, ...staged] : staged.slice(0, 1));
+    };
+    /** Open the upload dialog, optionally pre-staged with dropped files. */
+    const openUploadWith = (files) => {
+        setDropped(multiple ? files : files.slice(0, 1));
+        setUploadOpen(true);
+    };
+    const removeAt = (index) => setIds(ids.filter((_, i) => i !== index));
+    const move = (index, delta) => {
+        const target = index + delta;
+        if (target < 0 || target >= ids.length)
+            return;
+        const next = [...ids];
+        [next[index], next[target]] = [next[target], next[index]];
+        setIds(next);
+    };
+    // Best-effort `accept` on the native file input (server still enforces).
+    const acceptAttr = useMemo(() => {
+        const mimes = accept?.mimeTypes ?? [];
+        const kinds = accept?.kinds ?? [];
+        const fromKinds = kinds
+            .filter((k) => k === MEDIA_KIND.Image ||
+            k === MEDIA_KIND.Video ||
+            k === MEDIA_KIND.Audio)
+            .map((k) => `${k}/*`);
+        const all = [...mimes, ...fromKinds];
+        return all.length ? all.join(',') : undefined;
+    }, [accept]);
+    const acceptHint = describeAccept(accept);
+    const isEmpty = displays.length === 0;
+    const stagedCount = displays.filter((item) => item.pending).length;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { role: "group", "aria-label": intl.formatMessage(canStage ? messages.dropZone : messages.dropZoneReadOnly), onDragEnter: (event) => {
+                    if (!dragHasFiles(event.dataTransfer) || !canStage)
+                        return;
+                    dragDepth.current += 1;
+                    setDragging(true);
+                }, onDragOver: (event) => {
+                    // Without this the browser opens the file instead of dropping.
+                    if (dragHasFiles(event.dataTransfer))
+                        event.preventDefault();
+                }, onDragLeave: () => {
+                    dragDepth.current = Math.max(0, dragDepth.current - 1);
+                    if (dragDepth.current === 0)
+                        setDragging(false);
+                }, onDrop: (event) => {
+                    if (!dragHasFiles(event.dataTransfer) || !canStage)
+                        return;
+                    event.preventDefault();
+                    dragDepth.current = 0;
+                    setDragging(false);
+                    // 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
+                        ? '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 }
+                            : {}), decorative: refs[index]?.decorative === true, onAltChange: readOnly
+                            ? undefined
+                            : (next) => patchRef(index, { alt: next }), onDecorativeChange: readOnly
+                            ? undefined
+                            : (next) => patchRef(index, {
+                                decorative: next
+                            }) }, `${item.id}-${index}`))) })) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [readOnly ? null : (_jsxs(_Fragment, { children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "shadow-none", id: id, "aria-required": required, "aria-invalid": invalid, "aria-describedby": describedBy, disabled: !canPickMedia, onClick: () => setPickerOpen(true), children: [_jsx(ImagePlus, { className: "size-4", "aria-hidden": true }), intl.formatMessage(!multiple && displays.length > 0
+                                        ? messages.replace
+                                        : multiple
+                                            ? messages.add
+                                            : messages.select)] }), canStage ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "shadow-none", onClick: () => openUploadWith([]), children: [_jsx(UploadCloud, { className: "size-4", "aria-hidden": true }), intl.formatMessage(messages.upload)] })) : null] })), _jsxs("p", { className: cn('ml-auto flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground', !stagedCount &&
+                            (!acceptHint || readOnly) &&
+                            (canPickMedia || readOnly) &&
+                            !(multiple && displays.length > 0) &&
+                            'hidden'), children: [stagedCount > 0 ? (_jsx("span", { className: "text-foreground", children: intl.formatMessage(messages.stagedCount, {
+                                    count: stagedCount
+                                }) })) : null, multiple && displays.length > 0 ? (_jsx("span", { children: intl.formatMessage(messages.count, {
+                                    count: displays.length
+                                }) })) : null, acceptHint && !readOnly ? (_jsx("span", { children: intl.formatMessage(messages.accepts, {
+                                    what: acceptHint
+                                }) })) : null, canPickMedia || readOnly ? null : (_jsx("span", { children: intl.formatMessage(messages.noMediaAccess) }))] })] }), pickerOpen ? (_jsx(MediaPickerDialog, { open: true, onOpenChange: setPickerOpen, multiple: multiple, accept: accept, attachedIds: ids, onConfirm: onPicked })) : null, readOnly ? null : (_jsx(UploadDialog, { open: uploadOpen, onOpenChange: setUploadOpen, locationLabel: intl.formatMessage(messages.libraryRoot), description: intl.formatMessage(messages.uploadTo, {
+                    location: intl.formatMessage(messages.libraryRoot)
+                }), hint: acceptHint
+                    ? intl.formatMessage(messages.uploadHintAccept, {
+                        what: acceptHint
+                    })
+                    : undefined, accept: acceptAttr, multiple: multiple, confirmLabel: intl.formatMessage(messages.attach), initialFiles: dropped, 
+                // No `collectAlt`: a field's files upload with the record, and
+                // this control has nowhere to carry a description that far.
+                onUpload: (uploads) => onStaged(uploads.map((upload) => upload.file)) }))] }));
+}

package/dist/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.d.ts

@@ -0,0 +1,17 @@
+import type { MediaFolder } from '../../../types/mediaFolder';
+/**
+ * One folder in the sidebar tree. A folder with sub-folders is a
+ * design-system `Collapsible` (a chevron toggles its children under a left tree
+ * line; Radix manages `aria-expanded`), starting expanded; a leaf folder gets a
+ * matching spacer so names align. The name is a separate button that navigates
+ * into the folder — clicking it never toggles the group — and the open folder is
+ * highlighted. Navigation dispatches up.
+ */
+export declare function MediaFolderTreeItem({ folder, folders, currentFolderId, counts, onNavigate }: {
+    folder: MediaFolder;
+    folders: MediaFolder[];
+    currentFolderId: string;
+    counts: Map<string, number>;
+    onNavigate: (folderId: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAW9D;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,MAAM,EACN,OAAO,EACP,eAAe,EACf,MAAM,EACN,UAAU,EACb,EAAE;IACC,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,+BAyFA"}

package/dist/lib/components/MediaFoldersNav/MediaFolderTreeItem/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, cn } from '@orthacms/design-system';
+import { ChevronRight, Folder } from 'lucide-react';
+/** Intl descriptors for {@link MediaFolderTreeItem}, co-located. */
+const messages = defineMessages({
+    toggle: { id: 'media.tree.toggle', defaultMessage: 'Toggle {name}' },
+    count: {
+        id: 'media.tree.count',
+        defaultMessage: '{count, plural, one {# item} other {# items}}'
+    }
+});
+/**
+ * One folder in the sidebar tree. A folder with sub-folders is a
+ * design-system `Collapsible` (a chevron toggles its children under a left tree
+ * line; Radix manages `aria-expanded`), starting expanded; a leaf folder gets a
+ * matching spacer so names align. The name is a separate button that navigates
+ * into the folder — clicking it never toggles the group — and the open folder is
+ * highlighted. Navigation dispatches up.
+ */
+export function MediaFolderTreeItem({ folder, folders, currentFolderId, counts, onNavigate }) {
+    const intl = useIntl();
+    const children = folders
+        .filter((f) => f.parentId === folder.id)
+        .sort((a, b) => a.name.localeCompare(b.name));
+    const hasChildren = children.length > 0;
+    const active = currentFolderId === folder.id;
+    const nameButton = (_jsxs("button", { type: "button", onClick: () => onNavigate(folder.id), "aria-current": active ? 'true' : undefined, className: cn('flex min-w-0 flex-1 items-center gap-2 rounded-md py-1.5 pr-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', active ? 'font-medium text-primary' : 'text-foreground'), children: [_jsx(Folder, { className: cn('size-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: folder.name }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: intl.formatMessage(messages.count, {
+                    count: counts.get(folder.id) ?? 0
+                }) })] }));
+    if (!hasChildren) {
+        return (_jsx("li", { children: _jsxs("div", { className: cn('flex items-center gap-0.5 rounded-md pl-1 transition-colors', active ? 'bg-primary/10' : 'hover:bg-accent'), children: [_jsx("span", { className: "size-6 shrink-0", "aria-hidden": true }), nameButton] }) }));
+    }
+    return (_jsx("li", { children: _jsxs(Collapsible, { defaultOpen: true, className: "group/folder", children: [_jsxs("div", { className: cn('flex items-center gap-0.5 rounded-md pl-1 transition-colors', active ? 'bg-primary/10' : 'hover:bg-accent'), children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": intl.formatMessage(messages.toggle, {
+                                    name: folder.name
+                                }), className: "flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(ChevronRight, { className: "size-3.5 transition-transform duration-200 group-data-[state=open]/folder:rotate-90" }) }) }), nameButton] }), _jsx(CollapsibleContent, { children: _jsx("ul", { className: "ml-[0.85rem] mt-0.5 space-y-0.5 border-l border-border pl-1.5", children: children.map((child) => (_jsx(MediaFolderTreeItem, { folder: child, folders: folders, currentFolderId: currentFolderId, counts: counts, onNavigate: onNavigate }, child.id))) }) })] }) }));
+}

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

@@ -0,0 +1,22 @@
+import type { MediaFolder } from '../../types/mediaFolder';
+/**
+ * The Media Library's folder sidebar — a **flat** nav region sitting flush on the
+ * page background (mirroring the Content Library sidebar), not a bordered island.
+ * The page supplies the divider (`lg:border-r`) via `className`, so the mobile
+ * drawer copy renders without one. An "All media" root entry sits above the
+ * folder tree, where any folder with sub-folders is collapsible; a New folder
+ * action closes the list. Highlights the open folder and dispatches navigation /
+ * create up to the page.
+ */
+export declare function MediaFoldersNav({ folders, currentFolderId, counts, rootCount, onNavigate, onNewFolder, canCreate, className }: {
+    folders: MediaFolder[];
+    currentFolderId: string;
+    counts: Map<string, number>;
+    /** Item count shown against the "All media" root row. */
+    rootCount: number;
+    onNavigate: (folderId: string) => void;
+    onNewFolder: () => void;
+    canCreate: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/MediaFoldersNav/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAe3D;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,EAC5B,OAAO,EACP,eAAe,EACf,MAAM,EACN,SAAS,EACT,UAAU,EACV,WAAW,EACX,SAAS,EACT,SAAS,EACZ,EAAE;IACC,OAAO,EAAE,WAAW,EAAE,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5B,yDAAyD;IACzD,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BAmFA"}

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Button, cn } from '@orthacms/design-system';
+import { FolderPlus, Home, Images } from 'lucide-react';
+import { ROOT_FOLDER_ID } from '../../constants';
+import { MediaFolderTreeItem } from './MediaFolderTreeItem';
+/** Intl descriptors for {@link MediaFoldersNav}, co-located. */
+const messages = defineMessages({
+    nav: { id: 'media.nav.nav', defaultMessage: 'Folders' },
+    heading: { id: 'media.nav.heading', defaultMessage: 'Library' },
+    allMedia: { id: 'media.nav.allMedia', defaultMessage: 'All media' },
+    allCount: {
+        id: 'media.nav.allCount',
+        defaultMessage: '{count, plural, one {# item} other {# items}}'
+    },
+    newFolder: { id: 'media.nav.newFolder', defaultMessage: 'New folder' }
+});
+/**
+ * The Media Library's folder sidebar — a **flat** nav region sitting flush on the
+ * page background (mirroring the Content Library sidebar), not a bordered island.
+ * The page supplies the divider (`lg:border-r`) via `className`, so the mobile
+ * drawer copy renders without one. An "All media" root entry sits above the
+ * folder tree, where any folder with sub-folders is collapsible; a New folder
+ * action closes the list. Highlights the open folder and dispatches navigation /
+ * create up to the page.
+ */
+export function MediaFoldersNav({ folders, currentFolderId, counts, rootCount, onNavigate, onNewFolder, canCreate, className }) {
+    const intl = useIntl();
+    const topLevel = folders
+        .filter((f) => f.parentId === ROOT_FOLDER_ID)
+        .sort((a, b) => a.name.localeCompare(b.name));
+    const rootActive = currentFolderId === ROOT_FOLDER_ID;
+    return (_jsxs("nav", { "aria-label": intl.formatMessage(messages.nav), className: cn('flex h-full w-60 shrink-0 flex-col overflow-hidden', className), children: [_jsxs("div", { className: "flex items-center gap-2 p-2", children: [_jsx(Images, { className: "size-4 text-muted-foreground", "aria-hidden": true }), _jsx("h2", { className: "text-sm font-semibold tracking-[-0.01em]", children: intl.formatMessage(messages.heading) })] }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-2", children: _jsxs("ul", { className: "space-y-0.5", children: [_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onNavigate(ROOT_FOLDER_ID), "aria-current": rootActive ? 'true' : undefined, className: cn('flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', rootActive
+                                    ? 'bg-primary/10 font-medium text-primary'
+                                    : 'text-foreground hover:bg-accent'), children: [_jsx(Home, { className: cn('size-4 shrink-0', rootActive
+                                            ? 'text-primary'
+                                            : 'text-muted-foreground'), "aria-hidden": true }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: intl.formatMessage(messages.allMedia) }), _jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: intl.formatMessage(messages.allCount, {
+                                            count: rootCount
+                                        }) })] }) }), topLevel.map((folder) => (_jsx(MediaFolderTreeItem, { folder: folder, folders: folders, currentFolderId: currentFolderId, counts: counts, onNavigate: onNavigate }, folder.id)))] }) }), canCreate ? (_jsx("div", { className: "p-2", children: _jsxs(Button, { variant: "outline", size: "sm", className: "w-full justify-start shadow-none", onClick: onNewFolder, children: [_jsx(FolderPlus, { "aria-hidden": true }), intl.formatMessage(messages.newFolder)] }) })) : null] }));
+}

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

@@ -0,0 +1,18 @@
+import type { MediaAsset } from '../../../types/mediaAsset';
+import { type AssetActionKind } from '../../AssetActionsMenu';
+/**
+ * An asset tile in the grid — a gradient thumbnail with a hover ⋯ menu and a
+ * selection checkbox (always visible once selected), over the name and a
+ * size/dimensions line. Clicking the thumbnail or name opens the detail drawer;
+ * the checkbox toggles selection. A selected tile gets a primary ring.
+ */
+export declare function MediaAssetCard({ asset, selected, onToggleSelect, onAction, canCreate, canUpdate, canDelete }: {
+    asset: MediaAsset;
+    selected: boolean;
+    onToggleSelect: (id: string) => void;
+    onAction: (kind: AssetActionKind, asset: MediaAsset) => void;
+    canCreate: boolean;
+    canUpdate: boolean;
+    canDelete: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaGrid/MediaAssetCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAG5D,OAAO,EAAoB,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAShF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,QAAQ,EACR,SAAS,EACT,SAAS,EACT,SAAS,EACZ,EAAE;IACC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAC7D,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAsEA"}

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defineMessages, useIntl } from 'react-intl';
+import { Checkbox, cn } from '@orthacms/design-system';
+import { formatBytes } from '../../../utils/formatBytes';
+import { buildAssetHandlers } from '../../../utils/assetHandlers';
+import { AssetActionsMenu } from '../../AssetActionsMenu';
+import { MediaThumbnail } from '../../MediaThumbnail';
+/** Intl descriptors for {@link MediaAssetCard}, co-located. */
+const messages = defineMessages({
+    open: { id: 'media.assetCard.open', defaultMessage: 'Open {name}' },
+    select: { id: 'media.assetCard.select', defaultMessage: 'Select {name}' }
+});
+/**
+ * An asset tile in the grid — a gradient thumbnail with a hover ⋯ menu and a
+ * selection checkbox (always visible once selected), over the name and a
+ * size/dimensions line. Clicking the thumbnail or name opens the detail drawer;
+ * the checkbox toggles selection. A selected tile gets a primary ring.
+ */
+export function MediaAssetCard({ asset, selected, onToggleSelect, onAction, canCreate, canUpdate, canDelete }) {
+    const intl = useIntl();
+    const handlers = buildAssetHandlers(asset, onAction);
+    return (_jsxs("div", { className: cn('group relative overflow-hidden rounded-xl border bg-card transition-shadow hover:shadow-md', selected && 'ring-2 ring-primary ring-offset-1'), children: [_jsxs("div", { className: "relative", children: [_jsx("button", { type: "button", onClick: () => onAction('open', asset), "aria-label": intl.formatMessage(messages.open, {
+                            name: asset.name
+                        }), className: "block w-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx(MediaThumbnail, { asset: asset, className: "aspect-[4/3] w-full" }) }), _jsx("div", { className: cn('absolute left-2 top-2 rounded-md bg-background/80 p-0.5 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover:opacity-100', selected ? 'opacity-100' : 'opacity-0'), children: _jsx(Checkbox, { checked: selected, onCheckedChange: () => onToggleSelect(asset.id), "aria-label": intl.formatMessage(messages.select, {
+                                name: asset.name
+                            }) }) }), _jsx("div", { className: "absolute right-2 top-2 rounded-md bg-background/80 shadow-sm backdrop-blur transition-opacity focus-within:opacity-100 group-hover:opacity-100 sm:opacity-0", children: _jsx(AssetActionsMenu, { handlers: handlers, assetName: asset.name, canCreate: canCreate, canUpdate: canUpdate, canDelete: canDelete }) })] }), _jsxs("div", { className: "p-3", children: [_jsx("button", { type: "button", onClick: () => onAction('open', asset), className: "block w-full truncate text-left text-sm font-medium hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", title: asset.name, children: asset.name }), _jsxs("p", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: [formatBytes(asset.size), asset.dimensions
+                                ? ` · ${asset.dimensions.width}×${asset.dimensions.height}`
+                                : null] })] })] }));
+}

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

@@ -0,0 +1,16 @@
+import type { MediaFolder } from '../../../types/mediaFolder';
+/**
+ * A folder tile in the grid — a folder glyph, name, and item count, with a hover
+ * ⋯ menu (Open / Rename / Delete). The tile body is a single button that opens
+ * the folder; the menu sits outside it so the two controls don't nest.
+ */
+export declare function MediaFolderCard({ folder, assetCount, onOpen, onRename, onDelete, canUpdate, canDelete }: {
+    folder: MediaFolder;
+    assetCount: number;
+    onOpen: (folderId: string) => void;
+    onRename: (folder: MediaFolder) => void;
+    onDelete: (folder: MediaFolder) => void;
+    canUpdate: boolean;
+    canDelete: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/components/MediaGrid/MediaFolderCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAY9D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC5B,MAAM,EACN,UAAU,EACV,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACZ,EAAE;IACC,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,OAAO,CAAC;CACtB,+BAwCA"}