nuxt-media-library 0.0.44 → 0.0.49

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

@@ -0,0 +1,25 @@
+export type ProgressVeilPhase = 'uploading' | 'processing' | 'failed';
+type __VLS_Props = {
+    phase: ProgressVeilPhase;
+    /** 0–100. Null or omitted shows an indeterminate bar (e.g. a step with no progress events). */
+    progress?: number | null;
+    /** Replaces the phase label, e.g. "Transcoding". */
+    label?: string;
+    /** Second line, usually the file name. */
+    detail?: string;
+    /** Bar only, no text. For thumbnails smaller than ~80px. */
+    compact?: boolean;
+    /** Passing a listener shows the matching button. */
+    onCancel?: () => void;
+    onRetry?: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    progress: number | null;
+    label: string;
+    compact: boolean;
+    onCancel: () => void;
+    onRetry: () => void;
+    detail: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+import type { BadgeProps } from '@nuxt/ui';
+type __VLS_Props = {
+    status: string | null | undefined;
+    /** 0–100. Shown after the label while the asset is processing. */
+    progress?: number | null;
+    icon?: boolean;
+    size?: BadgeProps['size'];
+    variant?: BadgeProps['variant'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    progress: number | null;
+    variant: "solid" | "outline" | "soft" | "subtle";
+    icon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,31 @@
+<script setup>
+import { computed } from "vue";
+import { assetStatusMeta } from "../../utils/assetDisplay";
+const props = defineProps({
+  status: { type: null, required: true },
+  progress: { type: [Number, null], required: false, default: null },
+  icon: { type: Boolean, required: false, default: false },
+  size: { type: null, required: false, default: "sm" },
+  variant: { type: null, required: false, default: "subtle" }
+});
+const meta = computed(() => assetStatusMeta(props.status));
+const isProcessing = computed(() => (props.status ?? "").toLowerCase() === "processing");
+const label = computed(() => {
+  if (isProcessing.value && props.progress != null) {
+    return `${meta.value.label} ${Math.round(Math.min(100, Math.max(0, props.progress)))}%`;
+  }
+  return meta.value.label;
+});
+</script>
+
+<template>
+  <UBadge
+    :color="meta.color"
+    :variant="variant"
+    :size="size"
+    :label="label"
+    :ui="{ leadingIcon: isProcessing ? 'animate-spin motion-reduce:animate-none' : void 0 }"
+    :icon="icon ? meta.icon : void 0"
+    class="tabular-nums"
+  />
+</template>

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

@@ -0,0 +1,17 @@
+import type { BadgeProps } from '@nuxt/ui';
+type __VLS_Props = {
+    status: string | null | undefined;
+    /** 0–100. Shown after the label while the asset is processing. */
+    progress?: number | null;
+    icon?: boolean;
+    size?: BadgeProps['size'];
+    variant?: BadgeProps['variant'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    progress: number | null;
+    variant: "solid" | "outline" | "soft" | "subtle";
+    icon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,36 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fill';
+type Aspect = 'square' | 'landscape' | 'portrait' | 'video';
+type __VLS_Props = {
+    /** Resolves src and kind for you. Explicit src / kind win over it. */
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    alt?: string;
+    /** Fixed sizes for lists and fields; `fill` takes the parent's width (tiles, cards). */
+    size?: Size;
+    aspect?: Aspect;
+    /** `contain` letterboxes, for documents and logos that must not be cropped. */
+    fit?: 'cover' | 'contain';
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: Size;
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    kind: string | null;
+    alt: string;
+    aspect: Aspect;
+    fit: "cover" | "contain";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { assetKindMeta } from "../../utils/assetDisplay";
+import { assetThumbnailUrl } from "../../utils/assetThumbnail";
+const props = defineProps({
+  asset: { type: [Object, null], required: false, default: null },
+  src: { type: [String, null], required: false, default: void 0 },
+  kind: { type: [String, null], required: false, default: void 0 },
+  alt: { type: String, required: false, default: "" },
+  size: { type: String, required: false, default: "md" },
+  aspect: { type: String, required: false, default: "square" },
+  fit: { type: String, required: false, default: "cover" }
+});
+const resolvedSrc = computed(() => props.src !== void 0 ? props.src : assetThumbnailUrl(props.asset));
+const resolvedKind = computed(() => props.kind !== void 0 ? props.kind : props.asset?.kind);
+const meta = computed(() => assetKindMeta(resolvedKind.value));
+const state = ref("idle");
+watch(resolvedSrc, (src) => {
+  state.value = src ? "loading" : "idle";
+}, { immediate: true });
+const sizeClass = {
+  xs: "w-8",
+  sm: "w-10",
+  md: "w-20",
+  lg: "w-32",
+  xl: "w-48",
+  fill: "w-full"
+};
+const iconClass = {
+  xs: "size-4",
+  sm: "size-5",
+  md: "size-7",
+  lg: "size-10",
+  xl: "size-12",
+  fill: "size-[28%] max-w-16 max-h-16"
+};
+const aspectClass = {
+  square: "aspect-square",
+  landscape: "aspect-[4/3]",
+  portrait: "aspect-[3/4]",
+  video: "aspect-video"
+};
+const radiusClass = computed(() => props.size === "xs" || props.size === "sm" ? "rounded-md" : "rounded-lg");
+</script>
+
+<template>
+  <div
+    class="relative max-w-full shrink-0 overflow-hidden bg-elevated ring ring-default"
+    :class="[sizeClass[size], aspectClass[aspect], radiusClass]"
+    role="img"
+    :aria-label="alt || meta.label"
+    :data-state="state"
+  >
+    <img
+      v-if="resolvedSrc && state !== 'error'"
+      :src="resolvedSrc"
+      alt=""
+      loading="lazy"
+      decoding="async"
+      draggable="false"
+      class="size-full transition-opacity duration-200 motion-reduce:transition-none"
+      :class="[fit === 'cover' ? 'object-cover' : 'object-contain', state === 'loaded' ? 'opacity-100' : 'opacity-0']"
+      @load="state = 'loaded'"
+      @error="state = 'error'"
+    >
+
+    <USkeleton
+      v-if="state === 'loading'"
+      class="absolute inset-0 rounded-none"
+    />
+
+    <div
+      v-if="state === 'idle' || state === 'error'"
+      class="absolute inset-0 grid place-items-center text-dimmed"
+    >
+      <UIcon
+        :name="meta.icon"
+        :class="iconClass[size]"
+      />
+    </div>
+
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,36 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'fill';
+type Aspect = 'square' | 'landscape' | 'portrait' | 'video';
+type __VLS_Props = {
+    /** Resolves src and kind for you. Explicit src / kind win over it. */
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    alt?: string;
+    /** Fixed sizes for lists and fields; `fill` takes the parent's width (tiles, cards). */
+    size?: Size;
+    aspect?: Aspect;
+    /** `contain` letterboxes, for documents and logos that must not be cropped. */
+    fit?: 'cover' | 'contain';
+};
+declare var __VLS_11: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_11) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: Size;
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    kind: string | null;
+    alt: string;
+    aspect: Aspect;
+    fit: "cover" | "contain";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,26 @@
+export interface MediaUsage {
+    /** Record type as the host names it: "Product", "Course", "Page". */
+    type: string;
+    /** Which record and field: "Oak lounge chair · media 1". */
+    label: string;
+    /** Host app, when files are shared across apps. */
+    app?: string;
+    /** Link to the record in the host app. */
+    to?: string;
+}
+type __VLS_Props = {
+    usages: MediaUsage[];
+    loading?: boolean;
+    /** Shown above the list. Defaults to "Used in N places". */
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (usage: MediaUsage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((usage: MediaUsage) => any) | undefined;
+}>, {
+    loading: boolean;
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  usages: { type: Array, required: true },
+  loading: { type: Boolean, required: false, default: false },
+  title: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["select"]);
+const heading = computed(() => props.title ?? (props.usages.length === 0 ? "Not used" : `Used in ${props.usages.length} ${props.usages.length === 1 ? "place" : "places"}`));
+</script>
+
+<template>
+  <section class="flex flex-col gap-1.5">
+    <h4 class="text-[11px] font-semibold uppercase tracking-wider text-dimmed">
+      {{ loading ? "Used in" : heading }}
+    </h4>
+
+    <div
+      v-if="loading"
+      class="flex flex-col gap-1.5"
+    >
+      <USkeleton
+        v-for="i in 2"
+        :key="i"
+        class="h-5 w-full"
+      />
+    </div>
+
+    <p
+      v-else-if="!usages.length"
+      class="text-xs text-muted"
+    >
+      No records point to this file. It can be deleted safely.
+    </p>
+
+    <ul
+      v-else
+      class="flex flex-col gap-0.5"
+    >
+      <li
+        v-for="(u, i) in usages"
+        :key="`${u.type}:${u.label}:${i}`"
+      >
+        <component
+          :is="u.to ? 'a' : 'button'"
+          :href="u.to"
+          :type="u.to ? void 0 : 'button'"
+          class="-mx-1.5 flex w-[calc(100%+0.75rem)] min-w-0 items-center gap-2 rounded-md px-1.5 py-1 text-left text-xs hover:bg-elevated"
+          @click="emit('select', u)"
+        >
+          <UBadge
+            color="neutral"
+            variant="subtle"
+            size="sm"
+            :label="u.type"
+          />
+          <span class="min-w-0 flex-1 truncate">{{ u.label }}</span>
+          <span
+            v-if="u.app"
+            class="shrink-0 text-muted"
+          >{{ u.app }}</span>
+        </component>
+      </li>
+    </ul>
+  </section>
+</template>

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

@@ -0,0 +1,26 @@
+export interface MediaUsage {
+    /** Record type as the host names it: "Product", "Course", "Page". */
+    type: string;
+    /** Which record and field: "Oak lounge chair · media 1". */
+    label: string;
+    /** Host app, when files are shared across apps. */
+    app?: string;
+    /** Link to the record in the host app. */
+    to?: string;
+}
+type __VLS_Props = {
+    usages: MediaUsage[];
+    loading?: boolean;
+    /** Shown above the list. Defaults to "Used in N places". */
+    title?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (usage: MediaUsage) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((usage: MediaUsage) => any) | undefined;
+}>, {
+    loading: boolean;
+    title: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLProcessing/StepLayout.d.vue.ts

@@ -16,8 +16,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string;
     icon: string;
-    titleClass: string;
     iconClass: string;
+    titleClass: string;
     spinning: boolean;
     showBody: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLProcessing/StepLayout.vue.d.ts

@@ -16,8 +16,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string;
     icon: string;
-    titleClass: string;
     iconClass: string;
+    titleClass: string;
     spinning: boolean;
     showBody: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLUploader/Item.d.vue.ts

@@ -12,14 +12,14 @@ type __VLS_Props = {
     uploadFailedText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    remove: () => any;
     error: (message: string) => any;
+    remove: () => any;
     progress: (percent: number) => any;
     uploaded: (assetIds: string[]) => any;
     canceled: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRemove?: (() => any) | undefined;
     onError?: ((message: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
     onProgress?: ((percent: number) => any) | undefined;
     onUploaded?: ((assetIds: string[]) => any) | undefined;
     onCanceled?: (() => any) | undefined;

package/dist/runtime/components/MLUploader/Item.vue.d.ts

@@ -12,14 +12,14 @@ type __VLS_Props = {
     uploadFailedText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    remove: () => any;
     error: (message: string) => any;
+    remove: () => any;
     progress: (percent: number) => any;
     uploaded: (assetIds: string[]) => any;
     canceled: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onRemove?: (() => any) | undefined;
     onError?: ((message: string) => any) | undefined;
+    onRemove?: (() => any) | undefined;
     onProgress?: ((percent: number) => any) | undefined;
     onUploaded?: ((assetIds: string[]) => any) | undefined;
     onCanceled?: (() => any) | undefined;

package/dist/runtime/composables/useMLAssetPreview.js

@@ -1,10 +1,13 @@
 import { ref } from "vue";
 import { $fetch } from "ofetch";
+import { mediaGrantHeaders } from "./useMLMediaGrants.js";
+import { onMediaGrantsAdded } from "../utils/grants/listeners.js";
 const assets = ref({});
 const pending = ref(/* @__PURE__ */ new Set());
 const broken = ref(/* @__PURE__ */ new Set());
 const forbidden = ref(/* @__PURE__ */ new Set());
 const loading = ref(false);
+const lockedByGrant = /* @__PURE__ */ new Set();
 function computeSources(asset) {
   const sources = [];
   for (const rendition of asset.renditions ?? []) {
@@ -62,9 +65,13 @@ async function fetchAssets(ids) {
   try {
     const result = await $fetch("/api/media-library/delivery/assets/resolve", {
       method: "POST",
-      body: { assetIds: targetIds }
+      body: { assetIds: targetIds },
+      headers: mediaGrantHeaders()
     });
     for (const item of result.items ?? []) {
+      if (item.status === "forbidden") {
+        lockedByGrant.add(item.assetId);
+      }
       if (item.status !== "ok" || !item.asset) {
         broken.value.add(item.assetId);
         continue;
@@ -135,6 +142,15 @@ async function flushPending() {
   pending.value.clear();
   await fetchAssets(ids);
 }
+onMediaGrantsAdded(() => {
+  if (!lockedByGrant.size) return;
+  for (const id of lockedByGrant) {
+    broken.value.delete(id);
+    pending.value.add(id);
+  }
+  lockedByGrant.clear();
+  if (import.meta.client) scheduleFetch();
+});
 export const useMLAssetPreview = () => {
   return {
     assets,

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

@@ -0,0 +1,20 @@
+import type { MediaUploadOptions } from './useMLMediaUpload.js';
+export interface FilePickerOpenOptions {
+    /** Kinds the caller takes. Others are listed but dimmed. */
+    accept?: readonly string[] | string;
+    /** Most files that can be chosen. 1 makes it a single choice. */
+    max?: number;
+    /** IDs already attached. Listed first and checked; the result keeps their order. */
+    selected?: readonly (string | null | undefined)[];
+    title?: string;
+    /** Bytes, for uploads from inside the picker. */
+    maxSize?: number | null;
+    upload?: MediaUploadOptions;
+}
+/**
+ * Opens the library dialog. `open()` resolves with the chosen asset IDs in
+ * order, or null when the user cancels. Needs <UApp> (it provides overlays).
+ */
+export declare function useMLFilePicker(): {
+    open: (options?: FilePickerOpenOptions) => Promise<string[] | null>;
+};

package/dist/runtime/composables/useMLFilePicker.js

@@ -0,0 +1,17 @@
+import { defineAsyncComponent } from "vue";
+import { useOverlay } from "#imports";
+const LazyFilePicker = defineAsyncComponent(() => import("../components/MLMedia/FilePicker.vue"));
+export function useMLFilePicker() {
+  const overlay = useOverlay();
+  async function open(options = {}) {
+    const { selected, ...rest } = options;
+    const picker = overlay.create(LazyFilePicker, { destroyOnClose: true });
+    const instance = picker.open({
+      ...rest,
+      selected: (selected ?? []).filter((id) => !!id)
+    });
+    const result = await instance.result;
+    return Array.isArray(result) ? result : null;
+  }
+  return { open };
+}

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

@@ -0,0 +1,19 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { AssetDetail } from '../types/asset.js';
+export type MediaAssetLookup = 'ok' | 'not_found' | 'forbidden' | 'error';
+/**
+ * Details for a list of asset IDs, kept in step with the list. Only IDs not
+ * already loaded are requested. Runs in the browser only: the management
+ * proxy needs the viewer's session, and rendering the loading state on both
+ * sides keeps hydration stable.
+ */
+export declare function useMLMediaAssets(ids: MaybeRefOrGetter<readonly (string | null | undefined)[]>): {
+    assets: import("vue").Ref<Record<string, AssetDetail>, Record<string, AssetDetail>>;
+    lookups: import("vue").Ref<Record<string, MediaAssetLookup>, Record<string, MediaAssetLookup>>;
+    error: import("vue").Ref<string | null, string | null>;
+    /** True until every wanted ID has an answer (also during SSR and hydration). */
+    loading: import("vue").ComputedRef<boolean>;
+    get: (id: string | null | undefined) => AssetDetail | null;
+    lookup: (id: string | null | undefined) => MediaAssetLookup | "loading" | null;
+    refresh: (only?: string[]) => Promise<void>;
+};

package/dist/runtime/composables/useMLMediaAssets.js

@@ -0,0 +1,56 @@
+import { computed, onMounted, ref, toValue, watch } from "vue";
+import { $fetch } from "ofetch";
+export function useMLMediaAssets(ids) {
+  const assets = ref({});
+  const lookups = ref({});
+  const pending = ref(/* @__PURE__ */ new Set());
+  const error = ref(null);
+  const mounted = ref(false);
+  const wanted = computed(() => [...new Set(toValue(ids).filter((id) => !!id))]);
+  async function load(list) {
+    if (!list.length) return;
+    pending.value = /* @__PURE__ */ new Set([...pending.value, ...list]);
+    error.value = null;
+    try {
+      const res = await $fetch("/api/media-library/manage/assets/resolve", {
+        method: "POST",
+        body: { assetIds: list }
+      });
+      const nextAssets = { ...assets.value };
+      const nextLookups = { ...lookups.value };
+      for (const item of res.items ?? []) {
+        nextLookups[item.assetId] = item.status;
+        if (item.status === "ok" && item.asset) nextAssets[item.assetId] = item.asset;
+      }
+      assets.value = nextAssets;
+      lookups.value = nextLookups;
+    } catch (err) {
+      error.value = err?.data?.message ?? err?.message ?? "Could not load files";
+      lookups.value = { ...lookups.value, ...Object.fromEntries(list.map((id) => [id, "error"])) };
+    } finally {
+      const next = new Set(pending.value);
+      list.forEach((id) => next.delete(id));
+      pending.value = next;
+    }
+  }
+  function refresh(only) {
+    return load(only ?? wanted.value);
+  }
+  onMounted(() => {
+    mounted.value = true;
+  });
+  watch([wanted, mounted], ([list, isMounted]) => {
+    if (!isMounted) return;
+    void load(list.filter((id) => !(id in lookups.value) && !pending.value.has(id)));
+  }, { immediate: true });
+  return {
+    assets,
+    lookups,
+    error,
+    /** True until every wanted ID has an answer (also during SSR and hydration). */
+    loading: computed(() => !mounted.value || wanted.value.some((id) => !(id in lookups.value))),
+    get: (id) => id ? assets.value[id] ?? null : null,
+    lookup: (id) => !id ? null : lookups.value[id] ?? "loading",
+    refresh
+  };
+}