nuxt-media-library 0.0.60 → 0.0.62

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,46 +165,108 @@ 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`.
 
+### Showing media on public pages (embedded media)
+
+Public pages never resolve an asset id. Each service puts the media into its
+own response (Python: `pkg_media`'s `MediaEmbedder`, or `StrawberryMedia` for
+GraphQL), having decided who may see what. The page renders the fields it gets:
+
+```ts
+interface EmbeddedMedia {          // from the service's GraphQL schema (codegen)
+  assetId: string
+  kind: 'image' | 'video' | 'audio' | 'document' | 'other'
+  url: string | null               // the file; null when denied or not ready
+  poster: string | null            // the one image to show; set even when denied
+  sources: { url: string, width: number, height?: number | null }[]  // poster sizes
+  streams: { hls?: string | null, dash?: string | null } | null
+  width?: number | null; height?: number | null; alt?: string | null
+  expiresIn: number | null         // seconds until the first link expires; null = never
+  public: boolean                  // every link tokenless (cache-safe)
+}
+```
+
+The module auto-imports the helpers that read it (a structural type,
+`MLEmbeddedMedia`, so any codegen type fits):
+
+| Helper | Gives |
+|---|---|
+| `mlMediaPoster(media, fallback?)` | the image to show, else `fallback` |
+| `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 |
+
+```vue
+<script setup lang="ts">
+const { data: item } = await useAsyncData('article', fetchArticle)
+// Re-fetch before the links expire and swap in only `media`.
+useMLMediaRenewal(() => item.value?.media, async () => {
+  const fresh = await fetchArticle()
+  if (item.value && fresh?.media) item.value = { ...item.value, media: fresh.media }
+})
+const source = computed(() => mlPlayableSource(item.value?.media))
+</script>
+
+<template>
+  <!-- `sizes` is the box's widest rendered width. -->
+  <img
+    :src="mlMediaPoster(item?.media, '/placeholder.jpg')"
+    :srcset="mlMediaSrcset(item?.media)"
+    sizes="(min-width: 1024px) 420px, 100vw"
+    alt=""
+    loading="lazy"
+  >
+  <!-- A video: the app's own player (hls.js for type 'hls'). -->
+  <AppVideoPlayer v-if="source" :src="source.src" :type="source.type" :poster="item?.media?.poster" />
+</template>
+```
+
+- **Locked or missing:** `url` and `streams` are null; show `poster` (and a
+  paywall). No call to the media library can do better.
+- **Renewal:** tokened links expire (`expiresIn`). `useMLMediaRenewal` fetches the
+  record again before then; swap in only the new `media` and resume the player at
+  its playhead (key the player on its source).
+- **SEO:** pass `media.poster` (and the service's embedded share image) to your
+  SEO helper as URLs; the HTML rendered on the server then carries them.
+- **Caching:** a response with a tokened link is per user (`public: false`);
+  don't cache it at the edge.
+- `useMLAssetPreview`, `<MLPreviewProvider>` and `v-asset` resolve ids in the
+  browser through `/delivery`. They are **deprecated** (a warning in dev) and go
+  with `/delivery`; so do read grants (below).
+
+Design and rulings: [`docs/design/embedded-media.md`](docs/design/embedded-media.md).
+Moving a service and its layer over, step by step:
+[`docs/design/embedded-media-migration-guide.md`](docs/design/embedded-media-migration-guide.md).
+
 ### Showing assets of several services: read grants
 
+> **Deprecated** with `/delivery`: public pages show embedded media instead
+> (see above), and no grant is needed.
+
+
 Every link comes from the media library; each service decides only for its
 own assets by returning a read grant (`mlg_…`, e.g. the Python client's
 `client.grants.read(ids)`) with the data that references them. Hand the
@@ -218,13 +325,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 +344,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 +393,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 +422,26 @@ 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`

package/dist/module.d.mts

@@ -36,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`).
@@ -56,19 +61,20 @@ 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.
      */

package/dist/module.d.ts

@@ -36,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`).
@@ -56,19 +61,20 @@ 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.
      */

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "media-library",
   "configKey": "mediaLibrary",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "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 { defineNuxtModule, createResolver, addImportsDir, addImports, 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 ?? "";
 }
@@ -63,6 +53,10 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     const runtimeDir = resolver.resolve("./runtime");
     addImportsDir(resolver.resolve("runtime/composables"));
+    addImports(["mlMediaPoster", "mlMediaSrcset", "mlPlayableSource", "mlIsPlayableVideo"].map((name) => ({
+      name,
+      from: resolver.resolve("runtime/utils/embeddedMedia")
+    })));
     nuxt.options.build.transpile ||= [];
     nuxt.options.build.transpile.push(runtimeDir);
     const existingPrivate = nuxt.options.runtimeConfig.mediaLibrary || {};
@@ -128,9 +122,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 +141,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) {

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;