nuxt-media-library 0.0.56 → 0.0.57

package/dist/module.json

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

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

@@ -36,6 +36,7 @@ const field = useMLMediaField(model, {
   profile: props.profile,
   service: props.service,
   serviceBody: props.serviceBody,
+  label: props.label || void 0,
   onUploaded: (id, sessionId) => emit("uploaded", id, sessionId)
 });
 const { state, asset, upload, message } = field;

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

@@ -72,6 +72,7 @@ function onFiles(files) {
     const u = uploader.start(file);
     void u.created.then((id) => {
       if (!id) return;
+      u.attached = true;
       props.onUploaded?.(id, u.sessionId);
       if (!isChosen(id)) choose(id);
     });

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

@@ -15,7 +15,11 @@ export type MediaGalleryProfiles = Record<string, MediaGalleryRole>;
 type __VLS_Props = {
     /** Roles of this usage. Omit for a single list driven by v-model. */
     profiles?: MediaGalleryProfiles | null;
-    /** Role new uploads and picked files go to. Defaults to the first role that holds more than one file. */
+    /**
+     * Role tried first for new uploads and picked files, when it takes their
+     * kind. Defaults to the first role that holds more than one file. Files of
+     * other kinds go to the first role that takes them.
+     */
     defaultRole?: string;
     accept?: readonly string[] | string;
     max?: number | null;

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

@@ -1,5 +1,7 @@
 <script setup>
 import { computed, ref, watch } from "vue";
+import { $fetch } from "ofetch";
+import { kindForFile } from "../../utils/fileAccept";
 import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
 import GallerySection from "./GallerySection.vue";
 const props = defineProps({
@@ -78,16 +80,108 @@ function setRole(id, key, on) {
 }
 const pendingRole = /* @__PURE__ */ new Map();
 const uploadedRole = /* @__PURE__ */ new Map();
+const roleAccept = (r) => r.accept ?? props.accept;
+const anyAccept = computed(() => {
+  const kinds = /* @__PURE__ */ new Set();
+  for (const r of roles.value) {
+    const a = roleAccept(r);
+    const list = (typeof a === "string" ? a.split(",") : [...a ?? []]).map((k) => k.trim().toLowerCase()).filter(Boolean);
+    if (!list.length) return "";
+    list.forEach((k) => kinds.add(k));
+  }
+  return [...kinds];
+});
+const anyMaxSize = computed(() => {
+  let max = 0;
+  for (const r of roles.value) {
+    const m = r.maxSize ?? props.maxSize;
+    if (m == null) return null;
+    max = Math.max(max, m);
+  }
+  return max || null;
+});
+const kindMatters = computed(() => {
+  const seen = new Set(roles.value.map((r) => JSON.stringify(roleAccept(r) ?? "")));
+  return seen.size > 1;
+});
+function roleForKind(kind, taken = /* @__PURE__ */ new Set()) {
+  const ordered = [...roles.value.filter((r) => r.key === defaultKey.value), ...roles.value.filter((r) => r.key !== defaultKey.value)];
+  const takes = ordered.filter((r) => kindAllowed(kind, roleAccept(r)));
+  const room = takes.find((r) => single(r) ? !taken.has(r.key) && !sel(r.key).length : r.max == null || sel(r.key).length < r.max);
+  return (room ?? takes[0])?.key ?? null;
+}
+const profileFor = (file) => {
+  const key = roleForKind(kindForFile(file));
+  return key ? props.profiles?.[key]?.profile ?? null : null;
+};
+function routeFiles(files) {
+  notice.value = null;
+  const taken = /* @__PURE__ */ new Set();
+  const groups = /* @__PURE__ */ new Map();
+  const left = [];
+  for (const file of files) {
+    const key = roleForKind(kindForFile(file), taken);
+    if (!key) {
+      left.push(file);
+      continue;
+    }
+    taken.add(key);
+    groups.set(key, [...groups.get(key) ?? [], file]);
+  }
+  for (const [key, list] of groups) {
+    const role = props.profiles[key];
+    grid.value?.uploadFiles(list, {
+      profile: role.profile ?? null,
+      tag: key,
+      accept: roleAccept(role),
+      maxSize: role.maxSize ?? props.maxSize,
+      maxFiles: single(role) ? 1 : role.max != null ? Math.max(0, role.max - sel(key).length) : void 0
+    });
+  }
+  if (left.length) notice.value = `${left[0].name}${left.length > 1 ? ` and ${left.length - 1} more` : ""} can't be used in any role here.`;
+}
+async function placeByKind(ids) {
+  let kinds = /* @__PURE__ */ new Map();
+  try {
+    const res = await $fetch(
+      "/api/media-library/manage/assets/resolve",
+      { method: "POST", body: { assetIds: ids } }
+    );
+    kinds = new Map(res.items.map((it, i) => [it.asset?.id ?? it.assetId ?? ids[i], it.asset?.kind?.toLowerCase() ?? null]));
+  } catch {
+  }
+  const taken = /* @__PURE__ */ new Set();
+  const changes = {};
+  for (const id of ids) {
+    const key = roleForKind(kinds.get(id) ?? null, taken) ?? defaultKey.value;
+    taken.add(key);
+    const placed = withFile(key, id, changes[key] ?? sel(key));
+    if (placed) changes[key] = placed;
+    const session = pendingEmit.get(id);
+    if (session !== void 0) {
+      pendingEmit.delete(id);
+      emit("uploaded", id, key, session);
+    }
+  }
+  if (Object.keys(changes).length) commit(changes);
+}
+const pendingEmit = /* @__PURE__ */ new Map();
 function onUnionUpdate(next) {
   notice.value = null;
   const keep = new Set(next);
   const before = new Set(union.value);
   const changes = {};
   for (const r of roles.value) changes[r.key] = sel(r.key).filter((id) => keep.has(id));
+  const unplaced = [];
   for (const id of next) {
     if (before.has(id)) continue;
-    const key = pendingRole.get(id) ?? defaultKey.value;
+    const tagged = pendingRole.get(id);
     pendingRole.delete(id);
+    if (!tagged && kindMatters.value) {
+      unplaced.push(id);
+      continue;
+    }
+    const key = tagged ?? defaultKey.value;
     const placed = withFile(key, id, changes[key]);
     if (placed) changes[key] = placed;
   }
@@ -96,6 +190,7 @@ function onUnionUpdate(next) {
     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);
 }
 function onAdd(id, tag) {
   const key = tag ?? defaultKey.value;
@@ -104,8 +199,13 @@ function onAdd(id, tag) {
   else pendingRole.set(id, key);
 }
 function onUploaded(id, sessionId) {
-  emit("uploaded", id, uploadedRole.get(id) ?? defaultKey.value, sessionId);
+  const key = uploadedRole.get(id);
   uploadedRole.delete(id);
+  if (!key && kindMatters.value && !union.value.includes(id)) {
+    pendingEmit.set(id, sessionId);
+    return;
+  }
+  emit("uploaded", id, key ?? defaultKey.value, sessionId);
 }
 const badges = (id) => roles.value.filter((r) => sel(r.key).includes(id)).map((r) => r.label);
 function tileMenu(id, kind) {
@@ -170,9 +270,11 @@ function chipCount(key, max) {
     :model-value="union"
     :title="title"
     :hint="hint"
-    :accept="defaultRole?.accept ?? accept"
-    :max-size="defaultRole?.maxSize ?? maxSize"
+    :accept="anyAccept"
+    :max-size="anyMaxSize"
     :profile="defaultRole?.profile ?? null"
+    :profile-for="profileFor"
+    :on-route-files="routeFiles"
     :service="service"
     :service-body="serviceBody"
     :disabled="disabled"

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

@@ -15,7 +15,11 @@ export type MediaGalleryProfiles = Record<string, MediaGalleryRole>;
 type __VLS_Props = {
     /** Roles of this usage. Omit for a single list driven by v-model. */
     profiles?: MediaGalleryProfiles | null;
-    /** Role new uploads and picked files go to. Defaults to the first role that holds more than one file. */
+    /**
+     * Role tried first for new uploads and picked files, when it takes their
+     * kind. Defaults to the first role that holds more than one file. Files of
+     * other kinds go to the first role that takes them.
+     */
     defaultRole?: string;
     accept?: readonly string[] | string;
     max?: number | null;

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

@@ -40,6 +40,10 @@ type __VLS_Props = {
     highlight?: ReadonlySet<string> | null;
     /** See useMLMediaGallery's onAdd. */
     onAdd?: (assetId: string, tag: string | undefined) => void;
+    /** Take new files instead of uploading them here (a gallery with roles routes them by kind). */
+    onRouteFiles?: (files: File[]) => void;
+    /** Upload profile per file, for uploads inside the picker. */
+    profileFor?: (file: File) => string | null | undefined;
 };
 /** Upload files with another profile than the list's own, e.g. from a role chip. */
 declare function uploadFiles(files: File[], opts?: {
@@ -87,6 +91,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     profile: string | null;
     service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    profileFor: (file: File) => string | null | undefined;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;
@@ -97,6 +102,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     recordName: string;
     badges: (assetId: string) => string[];
     tileMenu: (assetId: string, kind: string | null) => DropdownMenuItem[][];
+    onRouteFiles: (files: File[]) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -30,7 +30,9 @@ const props = defineProps({
   badges: { type: Function, required: false, default: void 0 },
   tileMenu: { type: Function, required: false, default: void 0 },
   highlight: { type: [Set, null], required: false, default: null },
-  onAdd: { type: Function, required: false, default: void 0 }
+  onAdd: { type: Function, required: false, default: void 0 },
+  onRouteFiles: { type: Function, required: false, default: void 0 },
+  profileFor: { type: Function, required: false, default: void 0 }
 });
 const model = defineModel({ type: Array, ...{ default: () => [] } });
 const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
@@ -45,6 +47,7 @@ const gallery = useMLMediaGallery(model, {
   profile: props.profile,
   service: props.service,
   serviceBody: props.serviceBody,
+  label: props.recordName ? `${props.title} of ${props.recordName}` : props.title,
   onUploaded: (id, sessionId) => emit("uploaded", id, sessionId),
   onAdd: (id, tag) => props.onAdd?.(id, tag)
 });
@@ -126,6 +129,7 @@ async function pickExisting() {
       processingConfig: props.processingConfig,
       collectionName: props.collectionName,
       profile: props.profile,
+      profileFor: props.profileFor,
       service: props.service,
       serviceBody: props.serviceBody
     },
@@ -199,6 +203,10 @@ function uploadFiles(files, opts = {}) {
   if (rejected.length) gallery.onRejected(rejected);
   if (accepted.length) gallery.onFiles(accepted, { profile: opts.profile, tag: opts.tag });
 }
+function onDropFiles(files) {
+  if (props.onRouteFiles) props.onRouteFiles(files);
+  else gallery.onFiles(files);
+}
 defineExpose({ uploadFiles });
 function moveAndAnnounce(from, to) {
   const id = model.value[from];
@@ -279,7 +287,7 @@ async function onTileKey(e, index) {
       :disabled="disabled || full"
       title="Drop to add"
       class="rounded-lg"
-      @files="gallery.onFiles"
+      @files="onDropFiles"
       @rejected="gallery.onRejected"
     >
       <template #default="{ open }">

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

@@ -40,6 +40,10 @@ type __VLS_Props = {
     highlight?: ReadonlySet<string> | null;
     /** See useMLMediaGallery's onAdd. */
     onAdd?: (assetId: string, tag: string | undefined) => void;
+    /** Take new files instead of uploading them here (a gallery with roles routes them by kind). */
+    onRouteFiles?: (files: File[]) => void;
+    /** Upload profile per file, for uploads inside the picker. */
+    profileFor?: (file: File) => string | null | undefined;
 };
 /** Upload files with another profile than the list's own, e.g. from a role chip. */
 declare function uploadFiles(files: File[], opts?: {
@@ -87,6 +91,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     profile: string | null;
     service: string | import("../../index.js").MediaServiceUpload | null;
     serviceBody: Record<string, unknown> | null;
+    profileFor: (file: File) => string | null | undefined;
     onAdd: (assetId: string, tag: string | undefined) => void;
     hint: string;
     picker: boolean;
@@ -97,6 +102,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     recordName: string;
     badges: (assetId: string) => string[];
     tileMenu: (assetId: string, kind: string | null) => DropdownMenuItem[][];
+    onRouteFiles: (files: File[]) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** 0–1, bytes sent. */
+    upload: number;
+    /** 0–1 done, or null while processing reports no progress (shown pulsing). */
+    processing?: number | null;
+    /** Processing has started (draws the second part). */
+    processingActive?: boolean;
+    /** warning: retrying or waiting for input; error: failed. */
+    tone?: 'normal' | 'warning' | 'error';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    processing: number | null;
+    processingActive: boolean;
+    tone: "normal" | "warning" | "error";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,33 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  upload: { type: Number, required: true },
+  processing: { type: [Number, null], required: false, default: null },
+  processingActive: { type: Boolean, required: false, default: false },
+  tone: { type: String, required: false, default: "normal" }
+});
+const clamp = (n) => Math.max(0, Math.min(1, n));
+const processColor = computed(() => props.tone === "error" ? "bg-error" : props.tone === "warning" ? "bg-warning" : "bg-secondary");
+</script>
+
+<template>
+  <div
+    class="flex gap-0.5"
+    aria-hidden="true"
+  >
+    <div class="h-1 flex-[3] overflow-hidden rounded-full bg-accented">
+      <div
+        class="h-full rounded-full bg-primary transition-[width] duration-300 motion-reduce:transition-none"
+        :style="{ width: `${clamp(upload) * 100}%` }"
+      />
+    </div>
+    <div class="h-1 flex-[2] overflow-hidden rounded-full bg-accented">
+      <div
+        v-if="processingActive"
+        class="h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none"
+        :class="[processColor, processing == null ? 'w-1/3 animate-pulse motion-reduce:animate-none' : '']"
+        :style="processing != null ? { width: `${Math.max(0.06, clamp(processing)) * 100}%` } : void 0"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    /** 0–1, bytes sent. */
+    upload: number;
+    /** 0–1 done, or null while processing reports no progress (shown pulsing). */
+    processing?: number | null;
+    /** Processing has started (draws the second part). */
+    processingActive?: boolean;
+    /** warning: retrying or waiting for input; error: failed. */
+    tone?: 'normal' | 'warning' | 'error';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    processing: number | null;
+    processingActive: boolean;
+    tone: "normal" | "warning" | "error";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,12 @@
+import type { MediaUpload } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    upload: MediaUpload;
+    expanded?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,242 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useToast } from "#imports";
+import { useMLUploadQueue } from "../../composables/useMLUploadQueue";
+import { assetKindMeta } from "../../utils/assetDisplay";
+import { formatBytes } from "../../utils/assetFormat";
+import { isBackgroundStep, stepLabel } from "../../utils/processingSteps";
+import UploadProgress from "./UploadProgress.vue";
+import UploadSteps from "./UploadSteps.vue";
+const props = defineProps({
+  upload: { type: Object, required: true },
+  expanded: { type: Boolean, required: false }
+});
+const emit = defineEmits(["toggle"]);
+const queue = useMLUploadQueue();
+const toast = useToast();
+const u = computed(() => props.upload);
+const kind = computed(() => assetKindMeta(u.value.kind));
+const TILE = {
+  primary: "bg-primary/10 text-primary",
+  secondary: "bg-secondary/10 text-secondary",
+  success: "bg-success/10 text-success",
+  info: "bg-info/10 text-info",
+  warning: "bg-warning/10 text-warning",
+  error: "bg-error/10 text-error",
+  neutral: "bg-elevated text-muted"
+};
+const tileClass = computed(() => u.value.phase === "failed" ? TILE.error : TILE[kind.value.color]);
+const preview = computed(() => u.value.localPreview && u.value.kind === "image" ? u.value.localPreview : null);
+const previewBroken = ref(false);
+const now = ref(Date.now());
+let timer = null;
+watch(() => u.value.phase === "processing", (on) => {
+  if (timer) clearInterval(timer);
+  timer = on ? setInterval(() => now.value = Date.now(), 1e3) : null;
+}, { immediate: true });
+onBeforeUnmount(() => timer && clearInterval(timer));
+const elapsed = computed(() => {
+  if (!u.value.processingSince) return "";
+  const secs = Math.max(0, Math.floor((now.value - u.value.processingSince) / 1e3));
+  return secs < 60 ? `${secs}s` : `${Math.floor(secs / 60)}m ${secs % 60}s`;
+});
+const where = computed(() => u.value.context?.label ?? "");
+const subtitle = computed(() => {
+  const x = u.value;
+  switch (x.phase) {
+    case "uploading": {
+      const p = x.progress ?? 0;
+      return [`Uploading ${Math.round(p)}%`, `${formatBytes(x.size * p / 100)} of ${formatBytes(x.size)}`, where.value].filter(Boolean).join(" \xB7 ");
+    }
+    case "processing": {
+      if (x.needsInput) return ["Needs your input", x.step && stepLabel(x.step)].filter(Boolean).join(" \xB7 ");
+      if (x.notice) return x.notice;
+      if (x.usable) return `Ready to use \xB7 finishing ${x.step && isBackgroundStep(x.step) ? stepLabel(x.step).toLowerCase() : "up"}`;
+      const at = x.stepIndex && x.stepTotal ? `step ${x.stepIndex} of ${x.stepTotal}` : null;
+      return ["Processing", at, x.step && stepLabel(x.step), elapsed.value].filter(Boolean).join(" \xB7 ");
+    }
+    case "ready":
+      if (x.orphaned) return `Uploaded, not added${where.value ? ` to ${where.value}` : ""}`;
+      return ["Ready to use", where.value].filter(Boolean).join(" \xB7 ");
+    case "failed":
+      if (x.assetId && x.failedStep) return `Failed at ${stepLabel(x.failedStep)}`;
+      return x.error ?? (x.assetId ? "Processing failed" : "Upload failed");
+    case "canceled":
+      return x.assetId ? "Stopped following; processing goes on in the library" : "Canceled";
+  }
+  return "";
+});
+const subtitleClass = computed(() => {
+  const x = u.value;
+  if (x.phase === "failed") return "text-error";
+  if (x.phase === "ready" && x.orphaned) return "text-warning";
+  if (x.phase === "ready" || x.phase === "processing" && x.usable) return "text-success";
+  if (x.needsInput || x.notice) return "text-warning";
+  return "text-muted";
+});
+const showBar = computed(() => u.value.phase === "uploading" || u.value.phase === "processing");
+const uploadShare = computed(() => u.value.phase === "uploading" ? (u.value.progress ?? 0) / 100 : 1);
+const processShare = computed(() => {
+  const x = u.value;
+  if (x.phase !== "processing") return null;
+  if (x.usable) return 1;
+  if (x.stepIndex && x.stepTotal) return (x.stepIndex - 1) / x.stepTotal;
+  return x.progress != null ? x.progress / 100 : null;
+});
+const tone = computed(() => u.value.needsInput || u.value.notice ? "warning" : "normal");
+const canExpand = computed(() => !!u.value.assetId && u.value.phase !== "canceled");
+const canShow = computed(() => !!u.value.context?.to && (u.value.phase === "ready" || u.value.usable));
+const finished = computed(() => ["ready", "canceled", "failed"].includes(u.value.phase));
+const retrying = ref(false);
+async function retryStep() {
+  retrying.value = true;
+  try {
+    await queue.retryStep(u.value);
+  } catch (err) {
+    const message = err?.data?.detail ?? err?.data?.message ?? err?.statusMessage ?? "Could not retry this step";
+    toast.add({ title: "Retry failed", description: String(message), color: "error" });
+  } finally {
+    retrying.value = false;
+  }
+}
+</script>
+
+<template>
+  <li
+    class="px-3 py-2.5"
+    :class="expanded ? 'bg-elevated/40' : ''"
+  >
+    <div class="flex items-center gap-2.5">
+      <!-- What it is -->
+      <div
+        class="flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-md"
+        :class="preview && !previewBroken ? 'bg-elevated' : tileClass"
+      >
+        <img
+          v-if="preview && !previewBroken"
+          :src="preview"
+          alt=""
+          class="size-full object-cover"
+          @error="previewBroken = true"
+        >
+        <UIcon
+          v-else
+          :name="u.phase === 'failed' ? 'i-lucide-file-warning' : kind.icon"
+          class="size-4"
+        />
+      </div>
+
+      <!-- Name and state -->
+      <div class="min-w-0 flex-1">
+        <p
+          class="truncate text-sm"
+          :title="u.file.name"
+        >
+          {{ u.file.name }}
+        </p>
+        <p
+          class="truncate text-xs"
+          :class="subtitleClass"
+          :title="subtitle"
+        >
+          {{ subtitle }}
+        </p>
+      </div>
+
+      <!-- State icon -->
+      <UIcon
+        v-if="u.phase === 'processing' && !u.needsInput"
+        :name="u.notice ? 'i-lucide-refresh-cw' : 'i-lucide-loader-circle'"
+        class="size-4 shrink-0 animate-spin motion-reduce:animate-none"
+        :class="u.notice ? 'text-warning' : 'text-secondary'"
+      />
+      <UIcon
+        v-else-if="u.phase === 'processing' && u.needsInput"
+        name="i-lucide-pencil-line"
+        class="size-4 shrink-0 text-warning"
+      />
+      <UIcon
+        v-else-if="u.phase === 'ready' && !u.orphaned"
+        name="i-lucide-circle-check"
+        class="size-4 shrink-0 text-success"
+      />
+
+      <!-- Actions -->
+      <UButton
+        v-if="u.phase === 'uploading'"
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        square
+        :aria-label="`Cancel ${u.file.name}`"
+        @click="u.cancel()"
+      />
+      <UButton
+        v-else-if="u.phase === 'failed' && !u.assetId"
+        icon="i-lucide-rotate-ccw"
+        color="neutral"
+        variant="outline"
+        size="xs"
+        label="Retry"
+        @click="u.retry()"
+      />
+      <UButton
+        v-else-if="u.phase === 'failed' && u.failedTaskId"
+        icon="i-lucide-rotate-ccw"
+        color="neutral"
+        variant="outline"
+        size="xs"
+        label="Retry step"
+        :loading="retrying"
+        @click="retryStep"
+      />
+      <UButton
+        v-if="canShow"
+        :to="u.context.to"
+        size="xs"
+        variant="link"
+        label="Show"
+        class="px-1"
+      />
+      <UButton
+        v-if="canExpand"
+        :icon="expanded ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        square
+        :aria-label="expanded ? `Hide steps for ${u.file.name}` : `Show steps for ${u.file.name}`"
+        :aria-expanded="expanded"
+        @click="emit('toggle')"
+      />
+      <UButton
+        v-if="finished"
+        icon="i-lucide-x"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        square
+        :aria-label="`Dismiss ${u.file.name}`"
+        @click="queue.dismiss(u)"
+      />
+    </div>
+
+    <UploadProgress
+      v-if="showBar"
+      class="ms-10.5 mt-2"
+      :upload="uploadShare"
+      :processing="processShare"
+      :processing-active="u.phase === 'processing'"
+      :tone="tone"
+    />
+
+    <UploadSteps
+      v-if="expanded && canExpand"
+      class="ms-10.5 mt-2"
+      :asset-id="u.assetId"
+      :kind="u.kind"
+      @complete="u.retry()"
+    />
+  </li>
+</template>

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

@@ -0,0 +1,12 @@
+import type { MediaUpload } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    upload: MediaUpload;
+    expanded?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,17 @@
+import type { ProcessingTask } from '../../types/asset.js';
+import type { ProcessingEvent } from '../../composables/useMLProcessingStatus.js';
+type __VLS_Props = {
+    task: ProcessingTask;
+    sseEvent?: ProcessingEvent | null;
+    /** Upstream step holding this one up (for waiting steps). */
+    blocker?: ProcessingTask | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: (taskId: string) => any;
+    configure: (taskId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRetry?: ((taskId: string) => any) | undefined;
+    onConfigure?: ((taskId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;