nuxt-media-library 0.0.62 → 0.0.64

package/README.md

@@ -217,7 +217,7 @@ The module auto-imports the helpers that read it (a structural type,
 | `mlMediaSrcset(media)` | `srcset` from `media.sources`, or `undefined` |
 | `mlPlayableSource(media, { preferFile? })` | `{ src, type: 'hls' \| 'progressive' }`: the HLS ladder, else the file; `null` when locked or not ready |
 | `mlIsPlayableVideo(media)` | a video the viewer can play now |
-| `useMLMediaRenewal(media, renew, { marginSeconds? })` | calls `renew` 5 minutes (default) before tokened links expire; browser only |
+| `useMLMediaRenewal(media, renew, { marginSeconds?, retrySeconds? })` | calls `renew` 5 minutes (default) before tokened links expire, and again every 30 s (default) while it fails; browser only |
 
 ```vue
 <script setup lang="ts">

package/dist/module.json

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

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,6 +83,7 @@ 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;
     hint: string;

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,6 +83,7 @@ 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;
     hint: string;

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

@@ -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

@@ -14,6 +14,7 @@ const props = defineProps({
   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)]" }
@@ -32,7 +33,10 @@ 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 browse = useMLMediaBrowse(
+  () => ({ kind: kindFilter.value[0] ?? null, query: search.value }),
+  props.pickFrom ? { ids: () => props.pickFrom ?? [], backend: () => props.upload?.backend } : {}
+);
 const initial = [...props.selected];
 const chosen = ref([...initial]);
 const limitNote = ref(null);

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

@@ -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,6 +107,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

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

@@ -6,6 +6,7 @@ import { watchMediaMeta } from "../../composables/useMLMediaMeta";
 import { kindForFile } from "../../utils/fileAccept";
 import { backendsFromConfig, resolveAssetsUrl } from "../../utils/backends";
 import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
+import { nextUnplaced } from "../../utils/galleryRoles";
 import GallerySection from "./GallerySection.vue";
 const props = defineProps({
   profiles: { type: [Object, null], required: false, default: null },
@@ -27,13 +28,23 @@ 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 },
   onOpen: { type: Function, required: false, default: void 0 }
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
 const meta = defineModel("meta", { type: Object, ...{ default: () => ({}) } });
-const emit = defineEmits(["uploaded", "update:profiles", "meta"]);
+const unplacedModel = defineModel("unplaced", { type: Array, ...{ default: () => [] } });
+const unplaced = ref([...unplacedModel.value]);
+const sameIds = (a, b) => a.length === b.length && a.every((id, i) => id === b[i]);
+watch(unplacedModel, (v) => {
+  if (!sameIds(v, unplaced.value)) unplaced.value = [...v];
+});
+watch(unplaced, (v) => {
+  if (!sameIds(v, unplacedModel.value)) unplacedModel.value = [...v];
+});
+const emit = defineEmits(["uploaded", "picked", "update:profiles", "meta"]);
 const sectionMeta = ref({});
 watchMediaMeta(computed(() => sectionMeta.value), (all) => {
   meta.value = all;
@@ -52,16 +63,22 @@ watch(() => props.profiles, (p) => {
   const next = {};
   for (const [key, r] of Object.entries(p ?? {})) next[key] = [...r.selected ?? []];
   selections.value = next;
+  const placed = new Set(Object.values(next).flat());
+  if (unplaced.value.some((id) => placed.has(id))) unplaced.value = unplaced.value.filter((id) => !placed.has(id));
 }, { immediate: true, deep: true });
 const sel = (key) => selections.value[key] ?? [];
 const union = computed(() => {
   const seen = /* @__PURE__ */ new Set();
   const ordered = [...roles.value.filter(single), ...roles.value.filter((r) => !single(r))];
   for (const r of ordered) for (const id of sel(r.key)) seen.add(id);
+  for (const id of unplaced.value) seen.add(id);
   return [...seen];
 });
-function commit(changes) {
+function commit(changes, removed = /* @__PURE__ */ new Set()) {
+  const before = selections.value;
   selections.value = { ...selections.value, ...changes };
+  const left = nextUnplaced(before, selections.value, unplaced.value, removed);
+  if (!sameIds(left, unplaced.value)) unplaced.value = left;
   const out = {};
   for (const [k, r] of Object.entries(props.profiles ?? {})) out[k] = { ...r, selected: [...sel(k)] };
   emit("update:profiles", out);
@@ -174,21 +191,44 @@ async function placeByKind(ids) {
     }
   }
   if (Object.keys(changes).length) commit(changes);
+  for (const id of ids) awaitingKind.delete(id);
+  const picked = ids.filter((id) => pendingPicked.delete(id));
+  if (picked.length) emitPicked(picked);
 }
 const pendingEmit = /* @__PURE__ */ new Map();
+const awaitingKind = /* @__PURE__ */ new Set();
+const pendingPicked = /* @__PURE__ */ new Set();
+function emitPicked(ids) {
+  const byRole = /* @__PURE__ */ new Map();
+  for (const id of ids) {
+    const role = roles.value.find((r) => sel(r.key).includes(id));
+    if (role) byRole.set(role.key, [...byRole.get(role.key) ?? [], id]);
+  }
+  for (const [key, list] of byRole) emit("picked", list, key);
+}
+function onPicked(ids) {
+  const now = [];
+  for (const id of ids) {
+    if (awaitingKind.has(id)) pendingPicked.add(id);
+    else now.push(id);
+  }
+  if (now.length) emitPicked(now);
+}
 function onUnionUpdate(next) {
   notice.value = null;
   const keep = new Set(next);
   const before = new Set(union.value);
+  const removed = new Set(union.value.filter((id) => !keep.has(id)));
   const changes = {};
   for (const r of roles.value) changes[r.key] = sel(r.key).filter((id) => keep.has(id));
-  const unplaced = [];
+  const needKind = [];
   for (const id of next) {
     if (before.has(id)) continue;
     const tagged = pendingRole.get(id);
     pendingRole.delete(id);
     if (!tagged && kindMatters.value) {
-      unplaced.push(id);
+      needKind.push(id);
+      awaitingKind.add(id);
       continue;
     }
     const key = tagged ?? defaultKey.value;
@@ -199,8 +239,10 @@ function onUnionUpdate(next) {
   for (const r of roles.value) {
     if (!single(r)) changes[r.key] = [...changes[r.key]].sort((a, b) => (pos.get(a) ?? 0) - (pos.get(b) ?? 0));
   }
-  commit(changes);
-  if (unplaced.length) void placeByKind(unplaced);
+  const order = unplaced.value.filter((id) => keep.has(id)).sort((a, b) => (pos.get(a) ?? 0) - (pos.get(b) ?? 0));
+  if (!sameIds(order, unplaced.value)) unplaced.value = order;
+  commit(changes, removed);
+  if (needKind.length) void placeByKind(needKind);
 }
 function onAdd(id, tag) {
   const key = tag ?? defaultKey.value;
@@ -217,7 +259,10 @@ function onUploaded(id, sessionId) {
   }
   emit("uploaded", id, key ?? defaultKey.value, sessionId);
 }
-const badges = (id) => roles.value.filter((r) => sel(r.key).includes(id)).map((r) => r.label);
+const badges = (id) => {
+  const labels = roles.value.filter((r) => sel(r.key).includes(id)).map((r) => r.label);
+  return labels.length || !unplaced.value.includes(id) ? labels : ["Not used"];
+};
 function tileMenu(id, kind) {
   return [
     [
@@ -297,6 +342,7 @@ function chipCount(key, max) {
     :collection-name="collectionName"
     :picker="picker"
     :on-pick="onPick"
+    :pick-from="pickFrom"
     :editor="editor"
     :on-open="onOpen"
     :badges="badges"
@@ -305,6 +351,7 @@ function chipCount(key, max) {
     :on-add="onAdd"
     @update:model-value="onUnionUpdate"
     @uploaded="onUploaded"
+    @picked="onPicked"
     @meta="(m) => sectionMeta = m"
   >
     <template #toolbar>
@@ -370,9 +417,11 @@ function chipCount(key, max) {
     :service-body="serviceBody"
     :picker="picker"
     :on-pick="onPick"
+    :pick-from="pickFrom"
     :editor="editor"
     :on-open="onOpen"
     @uploaded="(id, sessionId) => emit('uploaded', id, '', sessionId)"
+    @picked="(ids) => emit('picked', ids, '')"
     @meta="(m) => sectionMeta = m"
   />
 </template>

package/dist/runtime/components/MLMedia/Gallery.vue.d.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,6 +107,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     hint: string;
     picker: boolean;
     onPick: () => void;

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

@@ -22,6 +22,8 @@ type __VLS_Props = {
     /** Show "Select existing", which opens the library picker. */
     picker?: boolean;
     onPick?: () => void;
+    /** The picker lists only these asset IDs instead of the library. */
+    pickFrom?: readonly string[] | null;
     /** Show the eye on each tile, which opens the media editor. */
     editor?: boolean;
     onOpen?: (assetId: string) => void;
@@ -73,11 +75,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     meta: (meta: Record<string, MediaFileMeta>) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    picked: (assetIds: string[]) => 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;
+    onPicked?: ((assetIds: string[]) => any) | undefined;
 }>, {
     title: string;
     visibility: "private" | "restricted" | "public";
@@ -97,6 +101,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;

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

@@ -22,6 +22,7 @@ const props = defineProps({
   collectionName: { type: [String, 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 },
   onOpen: { type: Function, required: false, default: void 0 },
   profile: { type: [String, null], required: false, default: null },
@@ -38,7 +39,7 @@ const props = defineProps({
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
-const emit = defineEmits(["uploaded", "meta"]);
+const emit = defineEmits(["uploaded", "picked", "meta"]);
 const gallery = useMLMediaGallery(model, {
   accept: () => props.accept,
   max: () => props.max,
@@ -132,6 +133,7 @@ async function pickExisting() {
     selected: model.value,
     title: `Select ${props.title.toLowerCase()}`,
     maxSize: props.maxSize,
+    pickFrom: props.pickFrom,
     upload: {
       visibility: props.visibility,
       processingConfig: props.processingConfig,
@@ -146,9 +148,12 @@ async function pickExisting() {
   });
   if (!ids) return;
   gallery.setFromPicker(ids);
-  for (const id of ids) {
-    if (!before.has(id) && sessions.has(id)) emit("uploaded", id, sessions.get(id) ?? null);
+  const added = ids.filter((id) => !before.has(id));
+  for (const id of added) {
+    if (sessions.has(id)) emit("uploaded", id, sessions.get(id) ?? null);
   }
+  const picked = added.filter((id) => !sessions.has(id));
+  if (picked.length) emit("picked", picked);
 }
 function openFor(item) {
   const id = item.id;

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

@@ -22,6 +22,8 @@ type __VLS_Props = {
     /** Show "Select existing", which opens the library picker. */
     picker?: boolean;
     onPick?: () => void;
+    /** The picker lists only these asset IDs instead of the library. */
+    pickFrom?: readonly string[] | null;
     /** Show the eye on each tile, which opens the media editor. */
     editor?: boolean;
     onOpen?: (assetId: string) => void;
@@ -73,11 +75,13 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     meta: (meta: Record<string, MediaFileMeta>) => any;
     "update:modelValue": (value: string[]) => any;
     "update:alt": (value: Record<string, string> | undefined) => any;
+    picked: (assetIds: string[]) => 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;
+    onPicked?: ((assetIds: string[]) => any) | undefined;
 }>, {
     title: string;
     visibility: "private" | "restricted" | "public";
@@ -97,6 +101,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     accept: readonly string[] | string;
     max: number | null;
     maxSize: number | null;
+    pickFrom: readonly string[] | null;
     removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;

package/dist/runtime/composables/useMLFilePicker.d.ts

@@ -7,6 +7,12 @@ export interface FilePickerOpenOptions {
     /** IDs already attached. Listed first and checked; the result keeps their order. */
     selected?: readonly (string | null | undefined)[];
     title?: string;
+    /**
+     * List only these asset IDs (resolved through `upload.backend`'s `resolve`
+     * route, searched and filtered in the browser) instead of the library.
+     * For backends without a library listing. null or omitted lists the library.
+     */
+    pickFrom?: readonly string[] | null;
     /** Bytes, for uploads from inside the picker. */
     maxSize?: number | null;
     upload?: MediaUploadOptions;

package/dist/runtime/composables/useMLMediaBrowse.d.ts

@@ -6,14 +6,34 @@ export interface MediaBrowseFilters {
     status?: string | null;
     query?: string | null;
 }
+export interface MediaBrowseOptions {
+    pageSize?: number;
+    debounceMs?: number;
+    /**
+     * Browse only these asset IDs instead of the library: they are resolved
+     * through `backend`'s `resolve` route and filtered here, with no call to
+     * the library's list. For backends that have no listing.
+     */
+    ids?: MaybeRefOrGetter<readonly string[]>;
+    /** Backend whose `resolve` route answers for `ids` (see useMLMediaAssets). */
+    backend?: MaybeRefOrGetter<string | null | undefined>;
+}
+/** The assets that match `filters`, in the given order (kind and status exact, query in the name). */
+export declare function filterBrowseAssets(assets: readonly AssetDetail[], filters: MediaBrowseFilters): AssetDetail[];
 /**
  * The library as a growing list: page 1 on filter change, more on loadMore().
- * Search text is debounced. Browser only, like useMLMediaAssets.
+ * Search text is debounced. Browser only, like useMLMediaAssets. With
+ * `ids`, a fixed set of files instead (see MediaBrowseOptions).
  */
-export declare function useMLMediaBrowse(filters: MaybeRefOrGetter<MediaBrowseFilters>, opts?: {
-    pageSize?: number;
-    debounceMs?: number;
-}): {
+export declare function useMLMediaBrowse(filters: MaybeRefOrGetter<MediaBrowseFilters>, opts?: MediaBrowseOptions): {
+    items: import("vue").ComputedRef<AssetDetail[]>;
+    total: import("vue").ComputedRef<number>;
+    error: import("vue").Ref<string | null, string | null>;
+    loading: import("vue").ComputedRef<boolean>;
+    hasMore: import("vue").ComputedRef<boolean>;
+    loadMore: () => void;
+    reload: () => Promise<void>;
+} | {
     items: import("vue").Ref<{
         id: string;
         kind: string;

package/dist/runtime/composables/useMLMediaBrowse.js

@@ -1,7 +1,18 @@
 import { computed, onBeforeUnmount, onMounted, ref, toValue, watch } from "vue";
 import { $fetch } from "ofetch";
+import { assetName } from "../utils/assetFormat.js";
 import { mlErrorMessage } from "../utils/errorMessage.js";
+import { useMLMediaAssets } from "./useMLMediaAssets.js";
+export function filterBrowseAssets(assets, filters) {
+  const kind = filters.kind?.toLowerCase();
+  const status = filters.status?.toLowerCase();
+  const query = filters.query?.trim().toLowerCase();
+  return assets.filter(
+    (a) => (!kind || (a.kind ?? "").toLowerCase() === kind) && (!status || (a.status ?? "").toLowerCase() === status) && (!query || assetName(a).toLowerCase().includes(query))
+  );
+}
 export function useMLMediaBrowse(filters, opts = {}) {
+  if (opts.ids !== void 0) return browseIds(filters, opts.ids, opts.backend);
   const pageSize = opts.pageSize ?? 30;
   const debounceMs = opts.debounceMs ?? 300;
   const items = ref([]);
@@ -71,3 +82,18 @@ export function useMLMediaBrowse(filters, opts = {}) {
     reload
   };
 }
+function browseIds(filters, ids, backend) {
+  const pool = useMLMediaAssets(ids, { backend });
+  const all = computed(() => toValue(ids).map((id) => pool.get(id)).filter((a) => !!a));
+  const items = computed(() => filterBrowseAssets(all.value, toValue(filters)));
+  return {
+    items,
+    total: computed(() => items.value.length),
+    error: pool.error,
+    loading: pool.loading,
+    hasMore: computed(() => false),
+    loadMore: () => {
+    },
+    reload: () => pool.refresh()
+  };
+}

package/dist/runtime/composables/useMLMediaRenewal.d.ts

@@ -3,13 +3,18 @@ import type { MLEmbeddedMedia } from '../types/embeddedMedia.js';
 export interface UseMLMediaRenewalOptions {
     /** Seconds before expiry to renew. Default 300. */
     marginSeconds?: number;
+    /**
+     * Seconds to wait before trying again when `renew` rejects (a transient
+     * network error must not let the links expire mid-playback). Default 30.
+     */
+    retrySeconds?: number;
 }
 /**
  * The renewal loop without the client guard: watches `media` and calls
  * `renew` shortly before its links expire. Returns a stop function. Prefer
  * `useMLMediaRenewal`, which runs this in the browser only.
  */
-export declare function watchMLMediaRenewal(media: MaybeRefOrGetter<MLEmbeddedMedia | null | undefined>, renew: () => Promise<unknown>, { marginSeconds }?: UseMLMediaRenewalOptions): () => void;
+export declare function watchMLMediaRenewal(media: MaybeRefOrGetter<MLEmbeddedMedia | null | undefined>, renew: () => Promise<unknown>, { marginSeconds, retrySeconds }?: UseMLMediaRenewalOptions): () => void;
 /**
  * Keeps embedded media links alive: tokened links expire (`expiresIn`), so
  * shortly before they do this calls `renew`, which re-fetches the record and

package/dist/runtime/composables/useMLMediaRenewal.js

@@ -1,20 +1,31 @@
 import { onScopeDispose, toValue, watch } from "vue";
 import { refreshDelay } from "../utils/streamUrls.js";
 const DEFAULT_MARGIN_SECONDS = 300;
-export function watchMLMediaRenewal(media, renew, { marginSeconds = DEFAULT_MARGIN_SECONDS } = {}) {
+const DEFAULT_RETRY_SECONDS = 30;
+export function watchMLMediaRenewal(media, renew, { marginSeconds = DEFAULT_MARGIN_SECONDS, retrySeconds = DEFAULT_RETRY_SECONDS } = {}) {
   let timer = null;
+  let generation = 0;
   const clear = () => {
+    generation++;
     if (timer) clearTimeout(timer);
     timer = null;
   };
+  const arm = (delay) => {
+    const current = generation;
+    timer = setTimeout(() => {
+      timer = null;
+      renew().catch((err) => {
+        console.warn("[nuxt-media-library] media renewal failed, retrying:", err);
+        if (current === generation) arm(retrySeconds * 1e3);
+      });
+    }, delay);
+  };
   const stopWatch = watch(() => toValue(media), (current) => {
     clear();
     const now = Date.now();
     const delay = refreshDelay(current?.expiresIn, now, now, marginSeconds);
     if (delay == null) return;
-    timer = setTimeout(() => {
-      renew().catch((err) => console.warn("[nuxt-media-library] media renewal failed:", err));
-    }, delay);
+    arm(delay);
   }, { immediate: true });
   return () => {
     stopWatch();

package/dist/runtime/utils/galleryRoles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The unplaced files after a role change. A file that lost its last role
+ * (replaced in a one-file role, or unchecked) stays on the record, unplaced,
+ * until it gets a role again or is removed. Order: those already unplaced,
+ * then newly unplaced ones in the order they were held.
+ */
+export declare function nextUnplaced(before: Record<string, readonly string[]>, after: Record<string, readonly string[]>, unplaced: readonly string[], removed?: ReadonlySet<string>): string[];

package/dist/runtime/utils/galleryRoles.js

@@ -0,0 +1,11 @@
+export function nextUnplaced(before, after, unplaced, removed = /* @__PURE__ */ new Set()) {
+  const placed = new Set(Object.values(after).flat());
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const id of [...unplaced, ...Object.values(before).flat()]) {
+    if (seen.has(id) || placed.has(id) || removed.has(id)) continue;
+    seen.add(id);
+    out.push(id);
+  }
+  return out;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-media-library",
-  "version": "0.0.62",
+  "version": "0.0.64",
   "description": "Nuxt module for media library management — chunked uploads, asset previews, and resource policies",
   "repository": {
     "type": "git",
@@ -73,6 +73,7 @@
     "@nuxt/test-utils": "^3.21.0",
     "@nuxt/ui": "4.3.0",
     "@types/node": "latest",
+    "@vitejs/plugin-vue": "^6.0.6",
     "dashjs": "^5.1.1",
     "eslint": "^9.39.2",
     "hls.js": "^1.6.16",