nuxt-media-library 0.0.59 → 0.0.61

package/README.md

@@ -53,7 +53,7 @@ export default defineNuxtConfig({
     // Only for direct browser uploads (proxyUploads: false): a public address.
     // publicBaseURL: 'https://media.example.com/v1',
     // false when your own server/api/media-library/[...].ts serves /manage
-    // (media grants, below). Default true: the module's /manage proxies.
+    // (below). Default true: the module's /manage proxies.
     // manageProxy: false,
     // Uploads always go through Nuxt server (/api/media-library/uploads/*)
     routes: {
@@ -66,17 +66,20 @@ export default defineNuxtConfig({
     partSize: 8 * 1024 * 1024,
     concurrency: 3,
     checksum: { algorithm: 'SHA-256', perPart: true, final: true },
-    // Sent to browsers too, except credentials: Authorization, Cookie,
-    // Proxy-Authorization and X-Api-Key stay server-side (the proxies add them).
-    headers: { 'X-Tenant': 'acme' },
+    // Optional. Sent to browsers too, except credentials: Authorization,
+    // Cookie, Proxy-Authorization and X-Api-Key stay server-side (only the
+    // /manage proxies add them, never /delivery). X-Tenant is not needed
+    // (the media library ignores it); it is still sent when set.
+    // headers: { 'X-Tenant': 'acme' },
   },
 })
 ```
 
 Nuxt puts the public runtime config in every page, so the module never copies
 `baseURL` or credential headers there. Set the media library's internal
-address and any service token only server-side
-(`NUXT_MEDIA_LIBRARY_BASE_URL`, `NUXT_MEDIA_LIBRARY_SERVICE_TOKEN`).
+address only server-side (`NUXT_MEDIA_LIBRARY_BASE_URL`). The Nuxt server
+issues no media grants and needs no service token: the MLMedia widgets read
+through each service's `resolve` backend (below).
 
 ### Nuxt usage
 
@@ -95,21 +98,63 @@ If you use the uploader component in Nuxt, provide config via the Nuxt plugin
 </template>
 ```
 
-### Authorizing `/manage` with media grants
+### Reading files through your services (`resolve` backends)
+
+The MLMedia widgets (`MLMediaGallery`, `MLMediaField`, the file picker, the
+editor) and the upload queue read files through the service that owns them.
+The service decides who may see what; the Nuxt server holds no media
+credential and issues no grants.
+
+```ts
+// nuxt.config.ts (or the service's layer)
+export default defineNuxtConfig({
+  mediaLibrary: {
+    backends: {
+      videos: {
+        upload: { start: '/api/videos/uploads' },
+        resolve: '/api/videos/media/resolve',
+      },
+    },
+  },
+})
+```
+
+```vue
+<MLMediaGallery v-model="lesson.mediaIds" backend="videos" />
+```
+
+```python
+# the videos service (pkg_media[fastapi])
+gate = AccessGate(client, can_access=lambda user, ids: videos.visible_media(user, ids))
+app.include_router(create_media_router(gate, get_current_user, prefix="/videos/media"))
+```
+
+- Request: `POST {resolve}` from the browser, same origin, with the user's
+  session (cookies), body `{ "assetIds": ["…"] }`. At most 100 ids per
+  request; the widgets split longer lists.
+- Response: `{ "items": [{ "assetId", "status", "asset", "error" }] }`, the
+  shape of the media library's `/manage/assets/resolve`. `status` is `ok`,
+  `not_found`, `forbidden` (the service's `can_access` refused) or `error`;
+  `asset` is set when `ok`. HLS/DASH links are reloaded before
+  `streamUrlExpiresIn` runs out, as before.
+- `backend` picks the route: the field, the gallery (also when it places
+  picked files by kind), the picker's already-attached files, the editor
+  (`useMLMediaEditor().open(id, { backend })`), `useMLMediaAssets(ids, { backend })`
+  and the upload queue's status polling all read there.
+- Without `backend`, or for a backend without `resolve`, they read through
+  Nuxt's own `/api/media-library/manage/assets/resolve` as before. An
+  unknown name shows the files as errors with a message naming it.
+- Still through Nuxt's own `/manage` proxy: the picker's library list and
+  its preview of listed files, and the processing stream.
+
+### Serving `/manage` yourself
 
 The module's server proxies forward `/api/media-library/manage/*` to the
-media library. Without an `authorize` hook they forward the browser's
-credentials (or your static headers) as before. With one, every `/manage`
-request is checked by your rules and sent upstream with a short-lived
-**media grant** scoped to exactly that request (server:
-`docs/security/media-grants.md`). Your app never re-implements the
-endpoints, and no long-lived credential reaches the media library from the
-browser.
-
-Turn off the module's built-in `/manage` proxies so your handler gets the
-requests. Their routes (`/api/media-library/manage/assets/**`…) are more
-specific than a catch-all file and would otherwise answer first, without
-`authorize` (the module warns at startup when it sees a shadowed catch-all):
+media library with the browser's credentials and your static `headers`.
+To add your own per-request credential, turn off the built-in `/manage`
+proxies (their routes are more specific than a catch-all file and would
+answer first; the module warns at startup when it sees a shadowed
+catch-all) and serve them from one file:
 
 ```ts
 // nuxt.config.ts
@@ -120,40 +165,25 @@ export default defineNuxtConfig({
 
 ```ts
 // server/api/media-library/[...].ts
-import { createMLCatchAllProxy, specFromNeed } from '@fritill-team/nuxt-media-library/server'
-
-const COVER = { kind: 'image', visibility: 'public', allowedMimeTypes: ['image/*'], maxSizeBytes: 5_000_000 }
+import { createMLCatchAllProxy } from 'nuxt-media-library/server'
 
 export default createMLCatchAllProxy({
-  async authorize(event, need) {
-    const user = await requireUser(event)              // your session
-    const subject = String(user.id)
-    if (need.scope === 'upload' && !need.sessionId) {  // creating an upload
-      return user.canUpload ? { scopes: ['upload'], profile: COVER, subject } : false
-    }
-    if (need.taskId) return false                      // or look up the task's asset
-    if (need.scope === 'manage:*') return user.isAdmin // tenant-wide list, stream
-    return (need.assetIds ?? []).every(id => user.canEdit(id))
-      ? { ...specFromNeed(need), subject }
-      : false
-  },
+  requestHeaders: async event => ({ Authorization: `Bearer ${await getAccessToken(event)}` }),
 })
 ```
 
-- `need`: `{ scope, method, path, assetIds?, taskId?, sessionId?, upload? }`
-  (`upload` is the create body: MIME type, size, file name).
-- Return `false` (403), `true` (the need as is), or a spec
-  `{ scopes, assetIds?, sessionIds?, profile?, subject?, ttlSeconds? }`.
-  Creating an upload needs a `profile`: kind, visibility and processing come
-  from it, not from the browser. `manage:*` is only accepted for requests
-  that need it.
-- Grants are issued with the private runtime config
-  `mediaLibrary.serviceToken` (`NUXT_MEDIA_LIBRARY_SERVICE_TOKEN`), or pass
-  `issueGrant(spec)` to get them from your backend (e.g. the Python
-  client's `create_grant_router`). They are cached per spec until shortly
-  before they expire; an upload's parts, finalize and abort reuse the grant
-  that created the session.
-- `/delivery` and the processing metadata routes are not affected.
+- Grant mode is gone: `createMLCatchAllProxy` and `createMLProxy` no longer
+  take `authorize` or `issueGrant`, and the private `mediaLibrary.serviceToken`
+  config is not read. Passing either option throws, so an app that relied
+  on them fails loudly instead of forwarding unchecked. Read files through
+  `resolve` backends instead.
+- `/delivery` never gets a credential from any source: not the static
+  credentials (a service token in `headers`), not the browser's own
+  `Authorization`, `Cookie`, `Proxy-Authorization` or `X-Api-Key` (a
+  signed-in user's token, which the media library refuses), and not one a
+  `requestHeaders` factory adds. Grants travel in `X-Media-Grants`; other
+  non-credential headers such as `X-Tenant` pass. `requestHeaders` still
+  sees the request's cookies, and `/manage` is unchanged.
 - With `manageProxy: false` the module still serves `/api/media-library/delivery/**`
   and, when `serviceUploads.proxy` is on, the service-upload pass-through.
   Your catch-all handles everything else under `/api/media-library`.
@@ -218,13 +248,10 @@ await $fetch(`/api/videos/lessons/${lessonId}/video`, { method: 'PUT', body: { s
   session's `GET`, parts `PUT`, `finalize` and `abort` to the private
   `mediaLibrary.baseURL`. It requires the browser's `Bearer mlg_…` grant and
   forwards it and `X-Tenant` untouched (the static `X-Tenant` when the
-  browser sends none). It never adds the service token, static auth headers
-  or a Nuxt-issued grant, drops cookies, and streams request bodies. Mount it
+  browser sends none, and only if one is configured). It never adds static
+  auth headers, drops cookies, and streams request bodies. Mount it
   yourself with `createMLServiceUploadsProxy()` from
   `nuxt-media-library/server` for another path.
-- Don't send these uploads through `createMLCatchAllProxy` with `authorize`:
-  grant mode replaces the browser's grant with its own, and the service's
-  `claim_upload` rejects the session.
 
 #### One layer per service, widgets by backend name
 
@@ -240,7 +267,8 @@ export default defineNuxtConfig({
     backends: {
       videos: {
         upload: { start: '/api/videos/uploads' }, // refresh defaults to `${start}/:sessionId/grant`
-        claim: '/api/videos/uploads/:sessionId/attach', // py_client on_attach
+        claim: '/api/videos/uploads/:sessionId/attach', // pkg_media on_attach
+        resolve: '/api/videos/media/resolve', // pkg_media create_media_router
       },
     },
   },
@@ -288,9 +316,10 @@ export default defineNuxtConfig({
   `(assetId, role, sessionId)`, field: `(assetId, sessionId)`), including
   files uploaded from the picker and chosen. Send both to the service's
   attach endpoint: its `claim_upload` needs them.
-- Processing progress uses `/api/media-library/manage/assets/resolve` and
-  the processing stream, so the app's proxy must allow `read` on a file the
-  user just uploaded.
+- Processing progress uses the processing stream and, when it is not
+  available, polls the backend's `resolve` route (Nuxt's own route without
+  one), so the service's `can_access` must let the user see a file they
+  just uploaded.
 - 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.
 
@@ -316,6 +345,62 @@ name, extension, MIME type, kind, size, duration, width, height and pages.
   has none yet.
 - `useMLMediaMeta(ids, getAsset)` gives the same map for your own lists.
 
+### Permalinks
+
+A permalink is a stable public address `{media host}/p/{name}` for a
+public asset (server `docs/api/permalinks.md`). Store the name, e.g.
+`users/42/avatar`, and re-point it when the file changes:
+
+```ts
+const { set, get, remove } = useMLPermalinks()
+const link = await set('users/42/avatar', assetId) // { name, assetId, url, createdAt, updatedAt }
+await get('users/42/avatar') // null when unknown
+```
+
+- The media library takes a **service token only**. The module's
+  `/api/media-library/manage/permalinks/{name}` proxy works when
+  `mediaLibrary.headers` carries one. Otherwise call
+  `PUT/GET/DELETE {baseURL}/manage/permalinks/{name}` from your server
+  (`permalinkPath(name)` from `/server`).
+- `isValidPermalinkName` checks a name the way the server does;
+  `permalinkUrl(mediaHost, name)` builds the public address.
+
+### Error messages, in the editor's language
+
+When a backend refuses a request it answers `{ detail, reason }`: `reason`
+is a stable code (py_client `UploadRejected`: `too_large`, `mime_type`,
+`context_mismatch`, …), `detail` English text. The widgets show, first that
+applies:
+
+1. the text for a known `reason`, in the editor's language;
+2. `detail` (a 422's first `msg`);
+3. the backend's inner `message`, then the status text;
+4. the place's own fallback ("Upload failed", "Could not add the file", …).
+
+The body is read whether the module's own proxy streamed it (`err.data`) or
+an app proxy rethrew it with h3 `createError({ data })` (`err.data.data`).
+The raw "[POST] url: 400" text is never shown.
+
+The language is the app's `@nuxtjs/i18n` locale, else `mediaLibrary.locale`;
+its language part picks the texts (`ar-SA` → `ar`). Built in: `en` and `ar`.
+An app can change any text, or add a language:
+
+```ts
+mediaLibrary: {
+  locale: 'ar',                      // without @nuxtjs/i18n
+  errorTexts: {
+    ar: {
+      reasons: { too_large: 'حجم هذا الملف أكبر من المسموح.' },
+      fallbacks: { upload: 'فشل رفع الملف' },
+    },
+  },
+},
+```
+
+A reason with no text in the editor's language uses the English one, then
+`detail`. `mediaErrorMessage(err, fallback, { locale, texts })` and
+`mlErrorMessage(err, fallback)` are exported for your own pages.
+
 ### Vue installation (non-Nuxt)
 
 ```bash

package/dist/module.d.mts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
 import { MediaBackends } from '../dist/runtime/utils/backends.js';
+import { MediaErrorTextsByLocale } from '../dist/runtime/utils/errorMessage.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -35,6 +36,11 @@ interface ModuleOptions {
         perPart?: boolean;
         final?: boolean;
     };
+    /**
+     * Static headers the `/manage` proxies add upstream. Optional. Credential
+     * headers stay server-side and never go to `/delivery`. `X-Tenant` is not
+     * needed (the media library ignores it); it is still sent when set.
+     */
     headers?: Record<string, string> | (() => Record<string, string>);
     /**
      * Uploads started by the app's backend services (`useMLServiceUpload`).
@@ -55,23 +61,35 @@ interface ModuleOptions {
     /**
      * The built-in `/api/media-library/manage/**` proxies (default `true`).
      * Set `false` when the app serves `/manage` itself, e.g. with
-     * `createMLCatchAllProxy({ authorize })` in
+     * `createMLCatchAllProxy({ requestHeaders })` in
      * `server/api/media-library/[...].ts`: the built-in routes are more
-     * specific than an app's catch-all and would otherwise answer first, so
-     * `authorize` would never run. `/delivery/**` and the service-upload
-     * pass-through are still registered.
+     * specific than an app's catch-all and would otherwise answer first.
+     * `/delivery/**` and the service-upload pass-through are still registered.
      */
     manageProxy?: boolean;
     /**
      * The backend registry: named places widgets upload to and read from
      * (`<MLMediaGallery backend="videos" />`). Each entry has a `kind`
      * (`media-library`, the default, or `media-kit`) and its routes: `upload`
-     * (`{ start, refresh? }`, py_client `create_upload_router`), `claim`
-     * (attach a finished upload, `/…/:sessionId/attach`). Each service's Nuxt
+     * (`{ start, refresh? }`, pkg_media `create_upload_router`), `claim`
+     * (attach a finished upload, `/…/:sessionId/attach`) and `resolve` (where
+     * widgets read its assets: `POST { assetIds }` with the user's session,
+     * pkg_media `create_media_router`). Each service's Nuxt
      * layer registers its own; Nuxt merges them. Paths only: each layer serves
      * its routes.
      */
     backends?: MediaBackends;
+    /**
+     * Language of the widgets' error texts when the app has no i18n locale
+     * (with @nuxtjs/i18n its active locale wins). Built in: `en`, `ar`.
+     */
+    locale?: string;
+    /**
+     * The app's error texts over the built-in ones, by language:
+     * `{ ar: { reasons: { too_large: '…' }, fallbacks: { upload: '…' } } }`.
+     * `reasons` are backend reason codes (py_client `UploadRejected`).
+     */
+    errorTexts?: MediaErrorTextsByLocale;
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.d.ts

@@ -1,6 +1,7 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import { ServiceUploadBackend } from '../dist/runtime/utils/uploader/serviceBackends.js';
 import { MediaBackends } from '../dist/runtime/utils/backends.js';
+import { MediaErrorTextsByLocale } from '../dist/runtime/utils/errorMessage.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
@@ -35,6 +36,11 @@ interface ModuleOptions {
         perPart?: boolean;
         final?: boolean;
     };
+    /**
+     * Static headers the `/manage` proxies add upstream. Optional. Credential
+     * headers stay server-side and never go to `/delivery`. `X-Tenant` is not
+     * needed (the media library ignores it); it is still sent when set.
+     */
     headers?: Record<string, string> | (() => Record<string, string>);
     /**
      * Uploads started by the app's backend services (`useMLServiceUpload`).
@@ -55,23 +61,35 @@ interface ModuleOptions {
     /**
      * The built-in `/api/media-library/manage/**` proxies (default `true`).
      * Set `false` when the app serves `/manage` itself, e.g. with
-     * `createMLCatchAllProxy({ authorize })` in
+     * `createMLCatchAllProxy({ requestHeaders })` in
      * `server/api/media-library/[...].ts`: the built-in routes are more
-     * specific than an app's catch-all and would otherwise answer first, so
-     * `authorize` would never run. `/delivery/**` and the service-upload
-     * pass-through are still registered.
+     * specific than an app's catch-all and would otherwise answer first.
+     * `/delivery/**` and the service-upload pass-through are still registered.
      */
     manageProxy?: boolean;
     /**
      * The backend registry: named places widgets upload to and read from
      * (`<MLMediaGallery backend="videos" />`). Each entry has a `kind`
      * (`media-library`, the default, or `media-kit`) and its routes: `upload`
-     * (`{ start, refresh? }`, py_client `create_upload_router`), `claim`
-     * (attach a finished upload, `/…/:sessionId/attach`). Each service's Nuxt
+     * (`{ start, refresh? }`, pkg_media `create_upload_router`), `claim`
+     * (attach a finished upload, `/…/:sessionId/attach`) and `resolve` (where
+     * widgets read its assets: `POST { assetIds }` with the user's session,
+     * pkg_media `create_media_router`). Each service's Nuxt
      * layer registers its own; Nuxt merges them. Paths only: each layer serves
      * its routes.
      */
     backends?: MediaBackends;
+    /**
+     * Language of the widgets' error texts when the app has no i18n locale
+     * (with @nuxtjs/i18n its active locale wins). Built in: `en`, `ar`.
+     */
+    locale?: string;
+    /**
+     * The app's error texts over the built-in ones, by language:
+     * `{ ar: { reasons: { too_large: '…' }, fallbacks: { upload: '…' } } }`.
+     * `reasons` are backend reason codes (py_client `UploadRejected`).
+     */
+    errorTexts?: MediaErrorTextsByLocale;
 }
 declare const SERVICE_UPLOADS_ROUTE = "/api/media-library/service-uploads";
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;

package/dist/module.json

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

package/dist/module.mjs

@@ -1,23 +1,13 @@
 import { existsSync, readdirSync } from 'node:fs';
 import { join } from 'node:path';
 import { defineNuxtModule, createResolver, addImportsDir, addComponentsDir, addServerHandler, useLogger, addPlugin } from '@nuxt/kit';
+import { browserHeaders } from '../dist/runtime/utils/credentialHeaders.js';
 import { normalizeBackends } from '../dist/runtime/utils/backends.js';
 export * from '../dist/runtime/types/resourcePolicy.js';
 export * from '../dist/runtime/types/uploader.js';
 export * from '../dist/runtime/types/preview.js';
 export * from '../dist/runtime/types/asset.js';
 
-const CREDENTIAL_HEADERS = ["authorization", "proxy-authorization", "cookie", "x-api-key"];
-function browserHeaders(headers) {
-  if (!headers || typeof headers !== "object") return { headers: {}, dropped: [] };
-  const kept = {};
-  const dropped = [];
-  for (const [name, value] of Object.entries(headers)) {
-    if (CREDENTIAL_HEADERS.includes(name.toLowerCase())) dropped.push(name);
-    else kept[name] = value;
-  }
-  return { headers: kept, dropped };
-}
 function browserBaseURL(existingPublic, publicBaseURL) {
   return existingPublic ?? publicBaseURL ?? "";
 }
@@ -128,9 +118,13 @@ const module$1 = defineNuxtModule({
         route: "/api/media-library/manage/processing/**",
         handler: resolver.resolve("./runtime/server/processing-proxy")
       });
+      addServerHandler({
+        route: "/api/media-library/manage/permalinks/**",
+        handler: resolver.resolve("./runtime/server/permalinks-proxy")
+      });
       const shadowed = appCatchAlls(nuxt.options._layers);
       if (shadowed.length) {
-        logger.warn(`${shadowed.join(", ")} will not receive /api/media-library/manage requests: the module's own /manage routes answer first. Set mediaLibrary.manageProxy: false to serve /manage from your handler (e.g. createMLCatchAllProxy({ authorize })).`);
+        logger.warn(`${shadowed.join(", ")} will not receive /api/media-library/manage requests: the module's own /manage routes answer first. Set mediaLibrary.manageProxy: false to serve /manage from your handler (e.g. createMLCatchAllProxy({ requestHeaders })).`);
       }
     }
     if (options.serviceUploads?.proxy) {
@@ -143,10 +137,7 @@ const module$1 = defineNuxtModule({
       ...existingPrivate,
       baseURL: existingPrivate.baseURL ?? envBaseURL ?? options.baseURL ?? "",
       routes: existingPrivate.routes ?? options.routes ?? routes,
-      headers: resolvedHeaders,
-      // Only read when a proxy has `authorize` and no `issueGrant` (media
-      // grants). Declared so NUXT_MEDIA_LIBRARY_SERVICE_TOKEN applies.
-      serviceToken: existingPrivate.serviceToken ?? ""
+      headers: resolvedHeaders
     };
     const publicHeaders = browserHeaders(existingPublic.headers ?? options.headers);
     if (publicHeaders.dropped.length) {
@@ -177,6 +168,9 @@ const module$1 = defineNuxtModule({
       // The backend registry (NUXT_PUBLIC_MEDIA_LIBRARY_BACKENDS): names widgets pass as `backend`.
       backends,
       // Older form, kept for code that reads it: each backend's upload routes.
+      // NUXT_PUBLIC_MEDIA_LIBRARY_LOCALE; the app's i18n locale wins at runtime.
+      locale: existingPublic.locale || options.locale || "",
+      errorTexts: { ...options.errorTexts, ...existingPublic.errorTexts },
       serviceUploadBackends: Object.fromEntries(
         Object.entries(backends).flatMap(([name, b]) => b.upload ? [[name, b.upload]] : [])
       )

package/dist/runtime/components/MLAssetManager/AssetOverview.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
 import { useMLResourcePolicy, Visibility } from "../../index";
+import { mlErrorMessage } from "../../utils/errorMessage";
 const props = defineProps({
   asset: { type: Object, required: true },
   manager: { type: Object, required: false }
@@ -71,7 +72,7 @@ async function changeVisibility(next) {
   try {
     await props.manager.updateAsset(props.asset.id, { visibility: next });
   } catch (err) {
-    visibilityError.value = err instanceof Error ? err.message : "Failed to update visibility";
+    visibilityError.value = mlErrorMessage(err, "updateVisibility");
   } finally {
     visibilityUpdating.value = false;
   }
@@ -138,7 +139,7 @@ async function loadPolicy() {
   try {
     policy.value = await policyApi.get(id);
   } catch (err) {
-    policyError.value = err instanceof Error ? err.message : "Failed to load policy";
+    policyError.value = mlErrorMessage(err, "loadPolicy");
     policy.value = null;
   } finally {
     policyLoading.value = false;

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
     readonly?: boolean;
     removeLabel?: string;
     usages?: Readonly<Record<string, MediaUsage[]>>;
+    backend?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (result: MediaEditorResult | null) => any;

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

@@ -5,7 +5,8 @@ defineProps({
   alt: { type: Object, required: false },
   readonly: { type: Boolean, required: false },
   removeLabel: { type: String, required: false },
-  usages: { type: Object, required: false }
+  usages: { type: Object, required: false },
+  backend: { type: [String, null], required: false }
 });
 const emit = defineEmits(["close"]);
 </script>
@@ -25,6 +26,7 @@ const emit = defineEmits(["close"]);
         :readonly="readonly"
         :remove-label="removeLabel"
         :usages="usages"
+        :backend="backend"
         @save="({ alt: a }) => emit('close', { action: 'save', alt: a })"
         @remove="(id) => emit('close', { action: 'remove', assetId: id })"
         @cancel="emit('close', null)"

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

@@ -13,6 +13,7 @@ type __VLS_Props = {
     readonly?: boolean;
     removeLabel?: string;
     usages?: Readonly<Record<string, MediaUsage[]>>;
+    backend?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (result: MediaEditorResult | null) => any;

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

@@ -12,6 +12,8 @@ type __VLS_Props = {
     removeLabel?: string;
     /** Where each file is used, per asset ID. Omit to hide the section. */
     usages?: Readonly<Record<string, MediaUsage[]>>;
+    /** The backend (`mediaLibrary.backends`) whose `resolve` route reads the files. */
+    backend?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     currentId: import("vue").ComputedRef<string>;
@@ -28,6 +30,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
         alt: Record<string, string>;
     }) => any) | undefined;
 }>, {
+    backend: string | null;
     usages: Readonly<Record<string, MediaUsage[]>>;
     siblings: readonly string[];
     alt: Readonly<Record<string, string>>;

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

@@ -8,7 +8,8 @@ const props = defineProps({
   alt: { type: Object, required: false, default: () => ({}) },
   readonly: { type: Boolean, required: false, default: false },
   removeLabel: { type: String, required: false, default: "" },
-  usages: { type: Object, required: false, default: void 0 }
+  usages: { type: Object, required: false, default: void 0 },
+  backend: { type: [String, null], required: false, default: null }
 });
 const emit = defineEmits(["save", "remove", "cancel"]);
 const list = computed(() => {
@@ -17,7 +18,7 @@ const list = computed(() => {
 });
 const index = ref(Math.max(0, list.value.indexOf(props.assetId)));
 const currentId = computed(() => list.value[index.value] ?? props.assetId);
-const library = useMLMediaAssets(list);
+const library = useMLMediaAssets(list, { backend: () => props.backend });
 const asset = computed(() => library.get(currentId.value));
 const lookup = computed(() => library.lookup(currentId.value));
 const name = computed(() => asset.value ? assetName(asset.value) : "");

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

@@ -12,6 +12,8 @@ type __VLS_Props = {
     removeLabel?: string;
     /** Where each file is used, per asset ID. Omit to hide the section. */
     usages?: Readonly<Record<string, MediaUsage[]>>;
+    /** The backend (`mediaLibrary.backends`) whose `resolve` route reads the files. */
+    backend?: string | null;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     currentId: import("vue").ComputedRef<string>;
@@ -28,6 +30,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
         alt: Record<string, string>;
     }) => any) | undefined;
 }>, {
+    backend: string | null;
     usages: Readonly<Record<string, MediaUsage[]>>;
     siblings: readonly string[];
     alt: Readonly<Record<string, string>>;

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

@@ -63,9 +63,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "public" | "restricted";
-    disabled: boolean;
+    visibility: "private" | "restricted" | "public";
     label: string;
+    disabled: boolean;
     backend: string | null;
     service: string | import("../../index.js").MediaServiceUpload | null;
     profile: string | null;

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

@@ -120,7 +120,8 @@ async function openEditor() {
   const result = await mediaEditor.open(id, {
     alt: alt.value ?? "",
     readonly: props.disabled,
-    removeLabel: props.removeLabel
+    removeLabel: props.removeLabel,
+    backend: props.backend
   });
   if (result?.action === "save") alt.value = result.alt[id] ?? "";
   else if (result?.action === "remove") field.clear();

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

@@ -63,9 +63,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
     "onUpdate:meta"?: ((value: MediaFileMeta | null) => any) | undefined;
 }>, {
-    visibility: "private" | "public" | "restricted";
-    disabled: boolean;
+    visibility: "private" | "restricted" | "public";
     label: string;
+    disabled: boolean;
     backend: string | null;
     service: string | import("../../index.js").MediaServiceUpload | null;
     profile: string | null;

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

@@ -62,7 +62,7 @@ function toggle(id) {
     choose(id);
   }
 }
-const pinned = useMLMediaAssets(() => initial);
+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);

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

@@ -76,10 +76,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:profiles"?: ((profiles: MediaGalleryProfiles) => any) | undefined;
 }>, {
     title: string;
-    visibility: "private" | "public" | "restricted";
+    visibility: "private" | "restricted" | "public";
     disabled: boolean;
     backend: string | null;
-    service: string | import("../../index.js").MediaServiceUpload | null;
+    service: string | import("#imports").MediaServiceUpload | null;
     profile: string | null;
     processingConfig: {
         stepOptions?: Record<string, Record<string, unknown>> | null;