nuxt-media-library 0.0.63 → 0.0.65

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

@@ -0,0 +1,98 @@
+import type { AssetDetail } from '../../types/asset.js';
+import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaEditorResult } from '../../composables/useMLMediaEditor.js';
+import { type MediaBrowserAction, type MediaBrowserRole } from '../../utils/browserActions.js';
+export type { MediaBrowserAction, MediaBrowserRole };
+type __VLS_Props = {
+    /**
+     * List only these asset IDs (resolved through `backend`'s `resolve`
+     * route, searched and filtered here) instead of the library. A pool the
+     * host owns, e.g. a course's files. null lists the library.
+     */
+    pickFrom?: readonly string[] | null;
+    /** Backend whose `resolve` route reads the files. Defaults to the upload backend. */
+    backend?: string | null;
+    /** Kinds that can be selected. Others are listed but dimmed. Empty means any. */
+    accept?: readonly string[] | string;
+    /** 'none' shows no checkboxes (a click previews); 'single' replaces; 'multi' adds up to `max`. */
+    selection?: 'none' | 'single' | 'multi';
+    /** Most files that can be selected in 'multi'. */
+    max?: number;
+    /** IDs listed first (when not searching), e.g. the files a record already has. */
+    pinned?: readonly string[];
+    /** Upload session settings; shows the dropzone. false hides it. */
+    upload?: MediaUploadOptions | false;
+    /** Bytes, for uploads. */
+    maxSize?: number | null;
+    /**
+     * What can be done to a file, from its menu and (for several) the bar over
+     * the selection: 'preview', 'edit', 'remove', 'delete',
+     * `{ key: 'assign', roles }`, or the host's own `{ key, label, … }`.
+     */
+    actions?: readonly MediaBrowserAction[];
+    /** Grid rows for a fixed-height body; the list scrolls inside it. */
+    bodyClass?: string;
+};
+type __VLS_Slots = {
+    /** Next to the search box, e.g. "Add from library". */
+    'toolbar'?: () => unknown;
+    /** Small labels on a card or row, e.g. "Used in 3 lessons". */
+    'card-badge'?: (p: {
+        asset: AssetDetail;
+    }) => unknown;
+    /** Extra controls on a card or row, next to its menu. */
+    'card-actions'?: (p: {
+        asset: AssetDetail;
+    }) => unknown;
+    /** Replaces the empty state. */
+    'empty'?: (p: {
+        filtering: boolean;
+    }) => unknown;
+    /** Under the list, outside the scroll, e.g. the picker's Done / Cancel. */
+    'footer'?: (p: {
+        selected: string[];
+        summary: string;
+        note: string | null;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Selected IDs, in the order they were chosen. Two-way and live. */
+    'selected'?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (assetIds: string[]) => any;
+    remove: (assetIds: string[]) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
+    action: (key: string, assetIds: string[], role?: string | undefined) => any;
+    edit: (assetId: string, result: MediaEditorResult | null) => any;
+    assign: (role: string, assetIds: string[]) => any;
+    "update:selected": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((assetIds: string[]) => any) | undefined;
+    onRemove?: ((assetIds: string[]) => any) | undefined;
+    onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onAction?: ((key: string, assetIds: string[], role?: string | undefined) => any) | undefined;
+    onEdit?: ((assetId: string, result: MediaEditorResult | null) => any) | undefined;
+    onAssign?: ((role: string, assetIds: string[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+}>, {
+    upload: MediaUploadOptions | false;
+    actions: readonly MediaBrowserAction[];
+    backend: string | null;
+    accept: readonly string[] | string;
+    max: number;
+    maxSize: number | null;
+    pickFrom: readonly string[] | null;
+    selection: "none" | "single" | "multi";
+    pinned: readonly string[];
+    bodyClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -32,6 +32,11 @@ type __VLS_Props = {
     picker?: boolean;
     /** Replaces the built-in picker, e.g. with the host's own dialog. */
     onPick?: () => void;
+    /**
+     * The picker lists only these asset IDs (resolved through the backend's
+     * `resolve` route) instead of the library. For backends without a library listing.
+     */
+    pickFrom?: readonly string[] | null;
     /** Show the eye button on the thumbnail, which opens the media editor. */
     editor?: boolean;
     /** Label for the editor's remove button. Empty hides it. */
@@ -78,12 +83,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     serviceBody: Record<string, unknown> | null;
     accept: readonly string[] | string;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     required: boolean;
     removeLabel: string;
+    onPick: () => void;
     hint: string;
     missingAlt: boolean;
     picker: boolean;
-    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -22,6 +22,7 @@ const props = defineProps({
   serviceBody: { type: [Object, null], required: false, default: null },
   picker: { type: Boolean, required: false, default: true },
   onPick: { type: Function, required: false, default: void 0 },
+  pickFrom: { type: [Array, null], required: false, default: null },
   editor: { type: Boolean, required: false, default: true },
   removeLabel: { type: String, required: false, default: "Remove from this field" },
   onOpen: { type: Function, required: false, default: void 0 }
@@ -101,6 +102,7 @@ async function pickExisting() {
     selected: [model.value],
     title: props.label ? `Select ${props.label.toLowerCase()}` : "Select file",
     maxSize: props.maxSize,
+    pickFrom: props.pickFrom,
     upload: uploadOptions.value,
     onUploaded: (id, sessionId) => sessions.set(id, sessionId)
   });

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

@@ -32,6 +32,11 @@ type __VLS_Props = {
     picker?: boolean;
     /** Replaces the built-in picker, e.g. with the host's own dialog. */
     onPick?: () => void;
+    /**
+     * The picker lists only these asset IDs (resolved through the backend's
+     * `resolve` route) instead of the library. For backends without a library listing.
+     */
+    pickFrom?: readonly string[] | null;
     /** Show the eye button on the thumbnail, which opens the media editor. */
     editor?: boolean;
     /** Label for the editor's remove button. Empty hides it. */
@@ -78,12 +83,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     serviceBody: Record<string, unknown> | null;
     accept: readonly string[] | string;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     required: boolean;
     removeLabel: string;
+    onPick: () => void;
     hint: string;
     missingAlt: boolean;
     picker: boolean;
-    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -5,6 +5,7 @@ type __VLS_Props = {
     selected?: readonly string[];
     title?: string;
     maxSize?: number | null;
+    pickFrom?: readonly string[] | null;
     upload?: MediaUploadOptions;
     onUploaded?: (assetId: string, sessionId: string | null) => void;
 };
@@ -19,6 +20,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     max: number;
     selected: readonly string[];
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     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

@@ -5,6 +5,7 @@ defineProps({
   selected: { type: Array, required: false, default: () => [] },
   title: { type: String, required: false, default: "Select file" },
   maxSize: { type: [Number, null], required: false, default: null },
+  pickFrom: { type: [Array, null], required: false, default: null },
   upload: { type: Object, required: false, default: () => ({}) },
   onUploaded: { type: Function, required: false, default: void 0 }
 });
@@ -25,6 +26,7 @@ const emit = defineEmits(["close"]);
         :max="max"
         :selected="selected"
         :max-size="maxSize"
+        :pick-from="pickFrom"
         :upload="upload"
         :on-uploaded="onUploaded"
         @done="(ids) => emit('close', ids)"

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

@@ -5,6 +5,7 @@ type __VLS_Props = {
     selected?: readonly string[];
     title?: string;
     maxSize?: number | null;
+    pickFrom?: readonly string[] | null;
     upload?: MediaUploadOptions;
     onUploaded?: (assetId: string, sessionId: string | null) => void;
 };
@@ -19,6 +20,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     max: number;
     selected: readonly string[];
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     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

@@ -1,4 +1,4 @@
-import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Kinds the caller takes. Others are listed but dimmed. Empty means any. */
     accept?: readonly string[] | string;
@@ -9,6 +9,11 @@ type __VLS_Props = {
     title?: string;
     /** Bytes, for uploads from the picker. */
     maxSize?: number | null;
+    /**
+     * List only these asset IDs (resolved through `upload.backend`'s `resolve`
+     * route) instead of the library. Search and the kind filter run here.
+     */
+    pickFrom?: readonly string[] | null;
     /** Upload session settings for files dropped into the picker. */
     upload?: MediaUploadOptions;
     /** A file uploaded from the picker exists in the library (with its upload session). */
@@ -29,6 +34,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     max: number;
     selected: readonly string[];
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,306 +1,56 @@
 <script setup>
-import { computed, ref, watch } from "vue";
-import { useMLMediaAssets } from "../../composables/useMLMediaAssets";
-import { useMLMediaBrowse } from "../../composables/useMLMediaBrowse";
-import { useMLMediaUpload } from "../../composables/useMLMediaUpload";
-import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
-import { assetKindMeta } from "../../utils/assetDisplay";
-import { acceptForKinds, describeKinds } from "../../utils/fileAccept";
-import { formatBytes } from "../../utils/assetFormat";
-const ALL_KINDS = ["image", "video", "audio", "document", "model_3d", "archive", "font", "web_app", "image_batch", "other"];
+import { computed, ref } from "vue";
+import MLMediaBrowser from "./Browser.vue";
 const props = defineProps({
   accept: { type: [Array, String], required: false, default: "" },
   max: { type: Number, required: false, default: Number.POSITIVE_INFINITY },
   selected: { type: Array, required: false, default: () => [] },
   title: { type: String, required: false, default: void 0 },
   maxSize: { type: [Number, null], required: false, default: null },
+  pickFrom: { type: [Array, null], required: false, default: null },
   upload: { type: Object, required: false, default: () => ({}) },
   onUploaded: { type: Function, required: false, default: void 0 },
   bodyClass: { type: String, required: false, default: "max-h-[min(60vh,560px)]" }
 });
 const emit = defineEmits(["done", "cancel"]);
-const acceptKinds = computed(() => {
-  const raw = typeof props.accept === "string" ? props.accept.split(",") : [...props.accept];
-  return raw.map((k) => k.trim().toLowerCase()).filter(Boolean);
-});
-const isAccepted = (kind) => !acceptKinds.value.length || acceptKinds.value.includes((kind ?? "").toLowerCase());
-const notAcceptedReason = computed(() => `Only ${describeKinds(acceptKinds.value)} can be chosen here`);
-const search = ref("");
-const view = ref("grid");
-const kindFilter = ref(acceptKinds.value.length === 1 ? [acceptKinds.value[0]] : []);
-const kindOptions = computed(
-  () => (acceptKinds.value.length ? acceptKinds.value : ALL_KINDS).map((k) => ({ label: assetKindMeta(k).label, value: k }))
-);
-const filtering = computed(() => !!search.value.trim() || kindFilter.value.length > 0);
-const browse = useMLMediaBrowse(() => ({ kind: kindFilter.value[0] ?? null, query: search.value }));
 const initial = [...props.selected];
 const chosen = ref([...initial]);
-const limitNote = ref(null);
-const single = computed(() => props.max === 1);
 const changed = computed(() => chosen.value.length !== initial.length || chosen.value.some((id, i) => id !== initial[i]));
-function isChosen(id) {
-  return !!id && chosen.value.includes(id);
-}
-function choose(id) {
-  limitNote.value = null;
-  if (single.value) {
-    chosen.value = [id];
-    return true;
-  }
-  if (chosen.value.length >= props.max) {
-    limitNote.value = `You can choose up to ${props.max}. Unselect one first.`;
-    return false;
-  }
-  chosen.value = [...chosen.value, id];
-  return true;
-}
-function toggle(id) {
-  if (isChosen(id)) {
-    limitNote.value = null;
-    chosen.value = chosen.value.filter((x) => x !== id);
-  } else {
-    choose(id);
-  }
-}
-const pinned = useMLMediaAssets(() => initial, { backend: () => props.upload?.backend });
-const pinnedAssets = computed(() => initial.map((id) => pinned.get(id)).filter((a) => !!a));
-const uploader = useMLMediaUpload(props.upload);
-const rejectNote = ref(null);
-function onFiles(files) {
-  rejectNote.value = null;
-  for (const file of files) {
-    const u = uploader.start(file);
-    void u.created.then((id) => {
-      if (!id) return;
-      u.attached = true;
-      props.onUploaded?.(id, u.sessionId);
-      if (!isChosen(id)) choose(id);
-    });
-  }
-}
-function onRejected(rejected) {
-  const first = rejected[0];
-  if (!first) return;
-  const more = rejected.length > 1 ? ` (and ${rejected.length - 1} more)` : "";
-  rejectNote.value = first.reason === "type" ? `${first.file.name}${more} can't be used here. Only ${describeKinds(acceptKinds.value)}.` : `${first.file.name}${more} is larger than ${props.maxSize ? formatBytes(props.maxSize) : "the limit"}.`;
-}
-const uploadIds = computed(() => new Set(uploader.uploads.value.map((u) => u.assetId).filter(Boolean)));
-const visibleUploads = computed(() => uploader.uploads.value.filter((u) => u.phase !== "canceled"));
-function uploadPhase(u) {
-  return u.phase === "uploading" || u.phase === "processing" || u.phase === "failed" ? u.phase : null;
-}
-const listed = computed(() => {
-  const pinnedIds = new Set(filtering.value ? [] : pinnedAssets.value.map((a) => a.id));
-  const rest = browse.items.value.filter((a) => !pinnedIds.has(a.id) && !uploadIds.value.has(a.id));
-  return filtering.value ? rest : [...pinnedAssets.value, ...rest];
-});
-const initialLoading = computed(() => browse.loading.value && !browse.items.value.length);
-const isEmpty = computed(() => !initialLoading.value && !listed.value.length && !visibleUploads.value.length);
-watch(kindFilter, () => {
-  limitNote.value = null;
-});
-const mediaEditor = useMLMediaEditor();
-function preview(id) {
-  void mediaEditor.open(id, { readonly: true, siblings: listed.value.map((a) => a.id) });
-}
-const footerText = computed(() => {
-  if (limitNote.value) return limitNote.value;
-  const n = chosen.value.length;
-  if (single.value) return n ? "1 selected" : "Nothing selected";
-  return Number.isFinite(props.max) ? `${n} of ${props.max} selected` : `${n} selected`;
-});
 </script>
 
 <template>
-  <div class="flex min-h-0 flex-col">
-    <div class="flex flex-col gap-3 border-b border-default p-4">
-      <div class="flex flex-wrap items-center gap-2">
-        <UInput
-          v-model="search"
-          icon="i-lucide-search"
-          placeholder="Search files"
-          class="min-w-0 flex-1 basis-56"
-          :loading="browse.loading.value && !!search"
-          aria-label="Search files"
+  <MLMediaBrowser
+    v-model:selected="chosen"
+    :pick-from="pickFrom"
+    :accept="accept"
+    :selection="max === 1 ? 'single' : 'multi'"
+    :max="max"
+    :pinned="initial"
+    :upload="upload"
+    :max-size="maxSize"
+    :actions="['preview']"
+    :body-class="bodyClass"
+    @uploaded="(id, sessionId) => props.onUploaded?.(id, sessionId)"
+  >
+    <template #footer="{ summary, note }">
+      <div class="flex flex-wrap items-center gap-2 border-t border-default px-4 py-3">
+        <span
+          class="me-auto text-sm"
+          :class="note ? 'text-warning' : 'text-muted'"
+          aria-live="polite"
+        >{{ summary }}</span>
+        <UButton
+          color="neutral"
+          variant="outline"
+          label="Cancel"
+          @click="emit('cancel')"
         />
-        <UFieldGroup size="md">
-          <UButton
-            icon="i-lucide-layout-grid"
-            color="neutral"
-            :variant="view === 'grid' ? 'soft' : 'outline'"
-            aria-label="Grid view"
-            :aria-pressed="view === 'grid'"
-            @click="view = 'grid'"
-          />
-          <UButton
-            icon="i-lucide-list"
-            color="neutral"
-            :variant="view === 'list' ? 'soft' : 'outline'"
-            aria-label="List view"
-            :aria-pressed="view === 'list'"
-            @click="view = 'list'"
-          />
-        </UFieldGroup>
-      </div>
-      <div
-        v-if="kindOptions.length > 1"
-        class="flex flex-wrap gap-1.5"
-      >
-        <MLMediaFilterPill
-          v-model="kindFilter"
-          label="File type"
-          :options="kindOptions"
-          single
+        <UButton
+          label="Done"
+          :disabled="!changed"
+          @click="emit('done', [...chosen])"
         />
       </div>
-    </div>
-
-    <div
-      class="flex min-h-0 flex-col gap-3 overflow-y-auto p-4"
-      :class="bodyClass"
-    >
-      <MLMediaDropzone
-        :accept="acceptForKinds(acceptKinds)"
-        :multiple="!single"
-        :max-size="maxSize"
-        compact
-        :title="single ? 'Drop a file to add it to the library' : 'Drop files to add them to the library'"
-        button-label="Upload from computer"
-        @files="onFiles"
-        @rejected="onRejected"
-      />
-      <p
-        v-if="rejectNote"
-        class="text-xs text-error"
-      >
-        {{ rejectNote }}
-      </p>
-
-      <UAlert
-        v-if="browse.error.value"
-        color="error"
-        variant="subtle"
-        icon="i-lucide-circle-alert"
-        :title="browse.error.value"
-        :actions="[{ label: 'Try again', color: 'neutral', variant: 'outline', onClick: () => browse.reload() }]"
-      />
-
-      <!-- Loading -->
-      <div
-        v-if="initialLoading"
-        class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-1.5"
-      >
-        <div
-          v-for="i in 12"
-          :key="i"
-          class="flex flex-col items-center gap-2 p-2.5"
-        >
-          <USkeleton class="aspect-square w-full max-w-28 rounded-md" />
-          <USkeleton class="h-3 w-3/4" />
-        </div>
-      </div>
-
-      <!-- Empty -->
-      <UEmpty
-        v-else-if="isEmpty && !browse.error.value"
-        variant="naked"
-        :icon="filtering ? 'i-lucide-search-x' : 'i-lucide-folder-open'"
-        :title="filtering ? 'No files match' : 'No files yet'"
-        :description="filtering ? 'Try another search or clear the file type.' : 'Drop files above to add the first one.'"
-      />
-
-      <!-- Grid -->
-      <div
-        v-else-if="view === 'grid'"
-        class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-1.5"
-      >
-        <MLMediaPickerCard
-          v-for="u in visibleUploads"
-          :key="u.key"
-          :src="u.localPreview"
-          :kind="u.kind"
-          :name="u.file.name"
-          :meta="u.phase === 'failed' ? u.error ?? 'Failed' : void 0"
-          :selected="isChosen(u.assetId)"
-          :disabled="!u.assetId || !isAccepted(u.kind)"
-          @toggle="u.assetId && toggle(u.assetId)"
-        >
-          <MLMediaProgressVeil
-            v-if="uploadPhase(u)"
-            :phase="uploadPhase(u)"
-            :progress="u.progress"
-            compact
-          />
-        </MLMediaPickerCard>
-        <MLMediaPickerCard
-          v-for="a in listed"
-          :key="a.id"
-          :asset="a"
-          :selected="isChosen(a.id)"
-          :disabled="!isAccepted(a.kind) || a.status === 'failed'"
-          :disabled-reason="a.status === 'failed' ? 'Processing failed for this file' : notAcceptedReason"
-          :on-preview="() => preview(a.id)"
-          @toggle="toggle(a.id)"
-        />
-      </div>
-
-      <!-- List -->
-      <div
-        v-else
-        class="flex flex-col divide-y divide-default overflow-hidden rounded-lg border border-default"
-      >
-        <MLMediaPickerRow
-          v-for="u in visibleUploads"
-          :key="u.key"
-          :src="u.localPreview"
-          :kind="u.kind"
-          :name="u.file.name"
-          :size="u.phase === 'uploading' ? `${Math.round(u.progress ?? 0)}%` : formatBytes(u.file.size)"
-          :date="u.phase === 'ready' ? 'Just now' : u.phase === 'failed' ? 'Failed' : 'Uploading'"
-          :selected="isChosen(u.assetId)"
-          :disabled="!u.assetId || !isAccepted(u.kind)"
-          @toggle="u.assetId && toggle(u.assetId)"
-        />
-        <MLMediaPickerRow
-          v-for="a in listed"
-          :key="a.id"
-          :asset="a"
-          :selected="isChosen(a.id)"
-          :disabled="!isAccepted(a.kind) || a.status === 'failed'"
-          :disabled-reason="a.status === 'failed' ? 'Processing failed for this file' : notAcceptedReason"
-          @toggle="toggle(a.id)"
-        />
-      </div>
-
-      <UButton
-        v-if="browse.hasMore.value && !initialLoading"
-        class="self-center"
-        color="neutral"
-        variant="outline"
-        size="sm"
-        label="Load more"
-        :loading="browse.loading.value"
-        @click="browse.loadMore()"
-      />
-    </div>
-
-    <div class="flex flex-wrap items-center gap-2 border-t border-default px-4 py-3">
-      <span
-        class="me-auto text-sm"
-        :class="limitNote ? 'text-warning' : 'text-muted'"
-        aria-live="polite"
-      >{{ footerText }}</span>
-      <UButton
-        color="neutral"
-        variant="outline"
-        label="Cancel"
-        @click="emit('cancel')"
-      />
-      <UButton
-        label="Done"
-        :disabled="!changed"
-        @click="emit('done', [...chosen])"
-      />
-    </div>
-  </div>
+    </template>
+  </MLMediaBrowser>
 </template>

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

@@ -1,4 +1,4 @@
-import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Kinds the caller takes. Others are listed but dimmed. Empty means any. */
     accept?: readonly string[] | string;
@@ -9,6 +9,11 @@ type __VLS_Props = {
     title?: string;
     /** Bytes, for uploads from the picker. */
     maxSize?: number | null;
+    /**
+     * List only these asset IDs (resolved through `upload.backend`'s `resolve`
+     * route) instead of the library. Search and the kind filter run here.
+     */
+    pickFrom?: readonly string[] | null;
     /** Upload session settings for files dropped into the picker. */
     upload?: MediaUploadOptions;
     /** A file uploaded from the picker exists in the library (with its upload session). */
@@ -29,6 +34,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     max: number;
     selected: readonly string[];
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     onUploaded: (assetId: string, sessionId: string | null) => void;
     bodyClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -47,6 +47,12 @@ type __VLS_Props = {
     serviceBody?: Record<string, unknown> | null;
     picker?: boolean;
     onPick?: () => void;
+    /**
+     * The picker lists only these asset IDs (resolved through the backend's
+     * `resolve` route, searched and filtered here) instead of the library.
+     * For backends without a library listing.
+     */
+    pickFrom?: readonly string[] | null;
     editor?: boolean;
     onOpen?: (assetId: string) => void;
 };
@@ -58,6 +64,12 @@ type __VLS_ModelProps = {
      * extension, MIME type, kind, size, duration, dimensions. Output only.
      */
     'meta'?: Record<string, MediaFileMeta>;
+    /**
+     * With `profiles`: files in the grid that no role holds (replaced out of
+     * their last role, or unchecked). They are not in `update:profiles`, so the
+     * page's save drops them; warn before saving. Set [] to clear.
+     */
+    'unplaced'?: string[];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -66,14 +78,18 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
     "update:meta": (value: Record<string, MediaFileMeta>) => any;
+    picked: (assetIds: string[], role: string) => any;
     "update:profiles": (profiles: MediaGalleryProfiles) => any;
+    "update:unplaced": (value: string[]) => 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;
+    onPicked?: ((assetIds: string[], role: string) => any) | undefined;
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
+    "onUpdate:unplaced"?: ((value: string[]) => any) | undefined;
 }>, {
     title: string;
     visibility: "private" | "restricted" | "public";
@@ -91,9 +107,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
+    onPick: () => void;
     hint: string;
     picker: boolean;
-    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
     featured: boolean;