nuxt-media-library 0.0.58 → 0.0.59

package/README.md

@@ -294,6 +294,28 @@ export default defineNuxtConfig({
 - There is no default backend: each layer's widgets name theirs. The module
   only stores the paths; each layer's own routes reach its service.
 
+### File meta from the widgets
+
+`MLMediaField` and `MLMediaGallery` report what they know about their files:
+name, extension, MIME type, kind, size, duration, width, height and pages.
+
+```vue
+<MLMediaField v-model="lesson.videoId" v-model:meta="videoMeta" @meta="m => console.log(m?.durationSeconds)" />
+
+<MLMediaGallery v-model="post.mediaIds" v-model:meta="mediaMeta" @meta="(assetId, m) => …" />
+```
+
+- `v-model:meta` is output only: `MediaFileMeta | null` on the field, a map
+  by asset ID on the gallery (every role). `@meta` fires per file that
+  changed, with null when it left.
+- A file uploaded in this tab is read in the browser right away
+  (`source: 'local'`, duration and size from a hidden video, audio or image
+  element). The media library's data replaces it once loaded
+  (`source: 'server'`); values it has no rendition for yet stay local.
+- A file needs an asset ID before it has meta: during the byte upload it
+  has none yet.
+- `useMLMediaMeta(ids, getAsset)` gives the same map for your own lists.
+
 ### Vue installation (non-Nuxt)
 
 ```bash

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "media-library",
   "configKey": "mediaLibrary",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/MLMedia/Field.d.vue.ts

@@ -1,3 +1,4 @@
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
@@ -42,34 +43,43 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
     /** Alt text for the file, stored on the host record. Edited in the media editor. */
     'alt'?: string | undefined;
+    /**
+     * The file's meta (name, extension, MIME type, kind, size, duration,
+     * dimensions), or null when empty. Output only: the field writes it.
+     */
+    'meta'?: MediaFileMeta | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
+    "update:meta": (value: MediaFileMeta | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
-    label: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    maxSize: number | null;
-    required: boolean;
-    removeLabel: string;
+    label: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    required: boolean;
+    removeLabel: string;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

package/dist/runtime/components/MLMedia/Field.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { useMLMediaField } from "../../composables/useMLMediaField";
 import { useMLFilePicker } from "../../composables/useMLFilePicker";
 import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { useMLMediaMeta } from "../../composables/useMLMediaMeta";
 import { assetDimensions, assetDurationSeconds, assetName, assetSizeBytes, formatBytes, formatDuration } from "../../utils/assetFormat";
 const props = defineProps({
   accept: { type: [Array, String], required: false, default: "" },
@@ -27,7 +28,8 @@ const props = defineProps({
 });
 const model = defineModel({ type: [String, null], ...{ default: null } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded"]);
+const meta = defineModel("meta", { type: [Object, null], ...{ default: null } });
+const emit = defineEmits(["uploaded", "meta"]);
 const field = useMLMediaField(model, {
   accept: () => props.accept,
   maxSize: () => props.maxSize,
@@ -42,6 +44,13 @@ const field = useMLMediaField(model, {
   onUploaded: (id, sessionId) => emit("uploaded", id, sessionId)
 });
 const { state, asset, upload, message } = field;
+const metaById = useMLMediaMeta(() => [model.value], (id) => id === model.value ? asset.value : null);
+const currentMeta = computed(() => model.value ? metaById.value[model.value] ?? null : null);
+watch(() => JSON.stringify(currentMeta.value), (now, before) => {
+  if (now === before || before === void 0 && !currentMeta.value) return;
+  meta.value = currentMeta.value;
+  emit("meta", currentMeta.value);
+}, { immediate: true });
 const helpText = computed(() => {
   if (props.hint) return props.hint;
   const parts = [field.acceptLabel.value === "any file" ? "" : `Takes ${field.acceptLabel.value}`];

package/dist/runtime/components/MLMedia/Field.vue.d.ts

@@ -1,3 +1,4 @@
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
@@ -42,34 +43,43 @@ type __VLS_ModelProps = {
     modelValue?: string | null;
     /** Alt text for the file, stored on the host record. Edited in the media editor. */
     'alt'?: string | undefined;
+    /**
+     * The file's meta (name, extension, MIME type, kind, size, duration,
+     * dimensions), or null when empty. Output only: the field writes it.
+     */
+    'meta'?: MediaFileMeta | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string | null) => any;
     "update:alt": (value: string | undefined) => any;
+    "update:meta": (value: MediaFileMeta | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
-    label: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    maxSize: number | null;
-    required: boolean;
-    removeLabel: string;
+    label: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    required: boolean;
+    removeLabel: string;
     hint: string;
     missingAlt: boolean;
     picker: boolean;

package/dist/runtime/components/MLMedia/FileFacts.d.vue.ts

@@ -10,8 +10,8 @@ type __VLS_Props = {
     title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    asset: AssetDetail | DeliveryAsset | null;
     title: string;
+    asset: AssetDetail | DeliveryAsset | null;
     items: AssetFact[];
     extra: AssetFact[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/FileFacts.vue.d.ts

@@ -10,8 +10,8 @@ type __VLS_Props = {
     title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    asset: AssetDetail | DeliveryAsset | null;
     title: string;
+    asset: AssetDetail | DeliveryAsset | null;
     items: AssetFact[];
     extra: AssetFact[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/FilePicker.d.vue.ts

@@ -14,11 +14,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onClose?: ((ids: string[] | null) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/MLMedia/FilePicker.vue.d.ts

@@ -14,11 +14,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onClose?: ((ids: string[] | null) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/MLMedia/FilePickerPanel.d.vue.ts

@@ -24,11 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onDone?: ((ids: string[]) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/FilePickerPanel.vue.d.ts

@@ -24,11 +24,11 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onDone?: ((ids: string[]) => any) | undefined;
 }>, {
     title: string;
+    upload: MediaUploadOptions;
     accept: readonly string[] | string;
     max: number;
     selected: readonly string[];
     maxSize: number | null;
-    upload: MediaUploadOptions;
     onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/Gallery.d.vue.ts

@@ -1,4 +1,5 @@
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 export interface MediaGalleryRole {
     /** Shown on chips, badges and menus, e.g. "Cover". */
     label: string;
@@ -52,35 +53,44 @@ type __VLS_Props = {
 type __VLS_ModelProps = {
     modelValue?: string[];
     'alt'?: Record<string, string> | undefined;
+    /**
+     * Meta of every file in the gallery (all roles), by asset ID: name,
+     * extension, MIME type, kind, size, duration, dimensions. Output only.
+     */
+    'meta'?: Record<string, MediaFileMeta>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, role: string, sessionId: string | null) => any;
+    meta: (assetId: string, meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    "update:meta": (value: Record<string, MediaFileMeta>) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, role: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((assetId: string, meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

package/dist/runtime/components/MLMedia/Gallery.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
 import { $fetch } from "ofetch";
+import { watchMediaMeta } from "../../composables/useMLMediaMeta";
 import { kindForFile } from "../../utils/fileAccept";
 import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
 import GallerySection from "./GallerySection.vue";
@@ -29,7 +30,12 @@ const props = defineProps({
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded", "update:profiles"]);
+const meta = defineModel("meta", { type: Object, ...{ default: () => ({}) } });
+const emit = defineEmits(["uploaded", "update:profiles", "meta"]);
+const sectionMeta = ref({});
+watchMediaMeta(computed(() => sectionMeta.value), (all) => {
+  meta.value = all;
+}, (id, m) => emit("meta", id, m));
 const roles = computed(() => Object.entries(props.profiles ?? {}).map(([key, r]) => ({ key, ...r })));
 const hasRoles = computed(() => roles.value.length > 0);
 const single = (r) => r.max === 1;
@@ -296,6 +302,7 @@ function chipCount(key, max) {
     :on-add="onAdd"
     @update:model-value="onUnionUpdate"
     @uploaded="onUploaded"
+    @meta="(m) => sectionMeta = m"
   >
     <template #toolbar>
       <div class="flex flex-col gap-1.5">
@@ -363,5 +370,6 @@ function chipCount(key, max) {
     :editor="editor"
     :on-open="onOpen"
     @uploaded="(id, sessionId) => emit('uploaded', id, '', sessionId)"
+    @meta="(m) => sectionMeta = m"
   />
 </template>

package/dist/runtime/components/MLMedia/Gallery.vue.d.ts

@@ -1,4 +1,5 @@
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 export interface MediaGalleryRole {
     /** Shown on chips, badges and menus, e.g. "Cover". */
     label: string;
@@ -52,35 +53,44 @@ type __VLS_Props = {
 type __VLS_ModelProps = {
     modelValue?: string[];
     'alt'?: Record<string, string> | undefined;
+    /**
+     * Meta of every file in the gallery (all roles), by asset ID: name,
+     * extension, MIME type, kind, size, duration, dimensions. Output only.
+     */
+    'meta'?: Record<string, MediaFileMeta>;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, role: string, sessionId: string | null) => any;
+    meta: (assetId: string, meta: MediaFileMeta | null) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    "update:meta": (value: Record<string, MediaFileMeta>) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, role: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((assetId: string, meta: MediaFileMeta | null) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+    "onUpdate:meta"?: ((value: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

package/dist/runtime/components/MLMedia/GallerySection.d.vue.ts

@@ -1,5 +1,6 @@
 import type { DropdownMenuItem } from '@nuxt/ui';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 type __VLS_Props = {
     /** Asset kinds the list takes. Empty means any file. */
     accept?: readonly string[] | string;
@@ -69,32 +70,34 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     uploadFiles: typeof uploadFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: Record<string, MediaFileMeta>) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
     highlight: ReadonlySet<string> | null;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
-    removeLabel: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
+    profileFor: (file: File) => string | null | undefined;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
-    profileFor: (file: File) => string | null | undefined;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
+    removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;

package/dist/runtime/components/MLMedia/GallerySection.vue

@@ -3,6 +3,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { useMLMediaGallery } from "../../composables/useMLMediaGallery";
 import { useMLFilePicker } from "../../composables/useMLFilePicker";
 import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { useMLMediaMeta } from "../../composables/useMLMediaMeta";
 import { assetName } from "../../utils/assetFormat";
 import { assetThumbnailUrl } from "../../utils/assetThumbnail";
 import { acceptForKinds, partitionFiles } from "../../utils/fileAccept";
@@ -37,7 +38,7 @@ const props = defineProps({
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded"]);
+const emit = defineEmits(["uploaded", "meta"]);
 const gallery = useMLMediaGallery(model, {
   accept: () => props.accept,
   max: () => props.max,
@@ -54,6 +55,11 @@ const gallery = useMLMediaGallery(model, {
   onAdd: (id, tag) => props.onAdd?.(id, tag)
 });
 const { items, message, full, replaces } = gallery;
+const metaById = useMLMediaMeta(model, (id) => gallery.asset(id));
+watch(() => JSON.stringify(metaById.value), (now, before) => {
+  if (before === void 0 && now === "{}") return;
+  emit("meta", metaById.value);
+}, { immediate: true });
 const removeLabel = computed(() => props.removeLabel ?? (props.recordName ? `Remove from ${props.recordName}` : "Remove"));
 const showAddTile = computed(() => !props.disabled && !full.value && !(replaces.value && items.value.length > 0));
 const countLabel = computed(() => {

package/dist/runtime/components/MLMedia/GallerySection.vue.d.ts

@@ -1,5 +1,6 @@
 import type { DropdownMenuItem } from '@nuxt/ui';
 import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaFileMeta } from '../../composables/useMLMediaMeta.js';
 type __VLS_Props = {
     /** Asset kinds the list takes. Empty means any file. */
     accept?: readonly string[] | string;
@@ -69,32 +70,34 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     uploadFiles: typeof uploadFiles;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     uploaded: (assetId: string, sessionId: string | null) => any;
+    meta: (meta: Record<string, MediaFileMeta>) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onMeta?: ((meta: Record<string, MediaFileMeta>) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
 }>, {
-    visibility: "private" | "restricted" | "public";
     title: string;
+    visibility: "private" | "public" | "restricted";
     disabled: boolean;
     highlight: ReadonlySet<string> | null;
-    accept: readonly string[] | string;
-    max: number | null;
-    maxSize: number | null;
-    removeLabel: string;
+    backend: string | null;
+    service: string | import("../../index.js").MediaServiceUpload | null;
+    profile: string | null;
+    profileFor: (file: File) => string | null | undefined;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;
         useFilenameAsAssetId?: boolean;
         enableTranscription?: boolean;
     };
     collectionName: string | null;
-    profile: string | null;
-    backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
-    profileFor: (file: File) => string | null | undefined;
+    accept: readonly string[] | string;
+    max: number | null;
+    maxSize: number | null;
+    removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;

package/dist/runtime/components/MLMedia/MediaTile.d.vue.ts

@@ -37,15 +37,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onRetry?: (() => any) | undefined;
     "onUpdate:selected"?: ((value: boolean) => any) | undefined;
 }>, {
+    kind: string | null;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
     progress: number | null;
-    name: string;
-    kind: string | null;
     duration: number | null;
     disabled: boolean;
-    selected: boolean;
+    name: string;
     phase: ProgressVeilPhase | null;
+    selected: boolean;
     missingAlt: boolean;
     onOpen: () => void;
     selectable: boolean;

package/dist/runtime/components/MLMedia/MediaTile.vue.d.ts

@@ -37,15 +37,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onRetry?: (() => any) | undefined;
     "onUpdate:selected"?: ((value: boolean) => any) | undefined;
 }>, {
+    kind: string | null;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
     progress: number | null;
-    name: string;
-    kind: string | null;
     duration: number | null;
     disabled: boolean;
-    selected: boolean;
+    name: string;
     phase: ProgressVeilPhase | null;
+    selected: boolean;
     missingAlt: boolean;
     onOpen: () => void;
     selectable: boolean;

package/dist/runtime/components/MLMedia/PickerCard.d.vue.ts

@@ -22,13 +22,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
+    kind: string | null;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    name: string;
-    kind: string | null;
     disabled: boolean;
-    selected: boolean;
+    name: string;
     meta: string;
+    selected: boolean;
     disabledReason: string;
     onPreview: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/PickerCard.vue.d.ts

@@ -22,13 +22,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
+    kind: string | null;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    name: string;
-    kind: string | null;
     disabled: boolean;
-    selected: boolean;
+    name: string;
     meta: string;
+    selected: boolean;
     disabledReason: string;
     onPreview: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/PickerRow.d.vue.ts

@@ -17,12 +17,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: (() => any) | undefined;
 }>, {
+    kind: string | null;
     size: string;
     asset: AssetDetail | DeliveryAsset | null;
     src: string | null;
-    name: string;
-    kind: string | null;
     disabled: boolean;
+    name: string;
     selected: boolean;
     date: string;
     disabledReason: string;