nuxt-media-library 0.0.44

package/dist/runtime/components/MLAssetManager/AssetPreviewAudio.vue.d.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source?: PreviewSource | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetPreviewDocument.d.vue.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source?: PreviewSource | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,39 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  source: { type: [Object, null], required: false }
+});
+const mime = computed(() => (props.asset.mime_type || props.asset.mimeType || "").toLowerCase());
+const isPdf = computed(() => mime.value === "application/pdf");
+const isText = computed(() => mime.value.startsWith("text/") || mime.value === "application/json");
+const src = computed(() => props.source?.src ?? props.asset.previewUrl ?? null);
+</script>
+
+<template>
+  <div class="w-full h-full bg-muted rounded-lg border border-default overflow-hidden relative">
+    <MLAssetManagerAssetPreviewFallback v-if="!src" :asset="asset" />
+    <iframe
+      v-else-if="isPdf || isText"
+      :key="src"
+      :src="src"
+      class="w-full h-full bg-white"
+      :title="asset.title || asset.original_filename || asset.id"
+    />
+    <div v-else class="w-full h-full flex flex-col items-center justify-center gap-3 p-4 text-center">
+      <UIcon name="i-lucide-file-text" class="text-primary text-3xl" />
+      <span class="text-xs font-bold text-default truncate max-w-full">
+        {{ asset.original_filename || asset.title }}
+      </span>
+      <span class="text-[10px] text-muted">{{ mime }}</span>
+      <UButton
+        :to="src"
+        target="_blank"
+        label="Open document"
+        icon="i-lucide-external-link"
+        size="xs"
+        variant="soft"
+      />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetPreviewDocument.vue.d.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source?: PreviewSource | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetPreviewFallback.d.vue.ts

@@ -0,0 +1,7 @@
+import type { AssetDetail } from "../../index.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,41 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  asset: { type: Object, required: true }
+});
+const icon = computed(() => {
+  const map = {
+    image: "i-lucide-image",
+    video: "i-lucide-play",
+    audio: "i-lucide-music",
+    document: "i-lucide-file-text",
+    archive: "i-lucide-archive",
+    font: "i-lucide-type",
+    model_3d: "i-lucide-box",
+    web_app: "i-lucide-globe",
+    image_batch: "i-lucide-images"
+  };
+  return map[(props.asset.kind || "").toLowerCase()] ?? "i-lucide-file";
+});
+const formattedSize = computed(() => {
+  const bytes = props.asset.bytes ?? props.asset.sizeBytes ?? props.asset.size_bytes;
+  if (!bytes) return "";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+});
+</script>
+
+<template>
+  <div class="w-full h-full bg-muted rounded-lg border border-default flex flex-col items-center justify-center relative overflow-hidden">
+    <div class="w-12 h-12 rounded-full bg-primary/10 border border-primary/30 flex items-center justify-center mb-3">
+      <UIcon :name="icon" class="text-primary text-2xl" />
+    </div>
+    <span class="text-sm font-bold text-default">
+      {{ asset.original_filename || asset.title || asset.id.slice(0, 12) }}
+    </span>
+    <span class="text-[10px] text-muted mt-0.5 tracking-wider">
+      {{ asset.mime_type || asset.mimeType }}{{ formattedSize ? ` \xB7 ${formattedSize}` : "" }}
+    </span>
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetPreviewFallback.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AssetDetail } from "../../index.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetPreviewImage.d.vue.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source?: PreviewSource | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,30 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  source: { type: [Object, null], required: false }
+});
+const errored = ref(false);
+const src = computed(() => {
+  if (props.source?.src) return props.source.src;
+  const thumb = props.asset.renditions?.find((r) => r.renditionType === "thumbnail" && r.status === "ready");
+  const variant = thumb?.variants?.find((v) => v.previewUrl) ?? null;
+  return variant?.previewUrl ?? thumb?.previewUrl ?? props.asset.previewUrl ?? null;
+});
+watch(src, () => {
+  errored.value = false;
+});
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center relative">
+    <MLAssetManagerAssetPreviewFallback v-if="!src || errored" :asset="asset" />
+    <img
+      v-else
+      :src="src"
+      :alt="asset.title || asset.original_filename || asset.id"
+      class="h-full w-auto max-w-full max-h-full object-contain bg-muted rounded-lg border border-default"
+      @error="errored = true"
+    >
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetPreviewImage.vue.d.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source?: PreviewSource | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetPreviewSidebar.d.vue.ts

@@ -0,0 +1,15 @@
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    groups: Array<{
+        label: string;
+        items: PreviewSource[];
+    }>;
+    selectedId: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,69 @@
+<script setup>
+defineProps({
+  groups: { type: Array, required: true },
+  selectedId: { type: [String, null], required: true }
+});
+const emit = defineEmits(["select"]);
+function kindIcon(kind) {
+  const map = {
+    image: "i-lucide-image",
+    video: "i-lucide-play",
+    audio: "i-lucide-music",
+    document: "i-lucide-file-text",
+    fallback: "i-lucide-file"
+  };
+  return map[kind] ?? "i-lucide-file";
+}
+</script>
+
+<template>
+  <div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-3">
+    <div v-for="g in groups" :key="g.label" class="space-y-1">
+      <div
+        class="text-[10px] uppercase tracking-wider font-semibold text-muted px-1"
+      >
+        {{ g.label }}
+      </div>
+      <button
+        v-for="item in g.items"
+        :key="item.id"
+        type="button"
+        class="w-full flex items-center gap-2 p-1.5 rounded-md border text-left transition-colors"
+        :class="
+  item.id === selectedId ? 'bg-primary/10 border-primary/40' : 'bg-default border-default hover:bg-elevated'
+"
+        @click="emit('select', item.id)"
+      >
+        <div
+          class="w-12 h-12 shrink-0 rounded bg-muted border border-default flex items-center justify-center overflow-hidden relative"
+        >
+          <img
+            v-if="item.thumb"
+            :src="item.thumb"
+            :alt="item.label"
+            class="w-full h-full object-cover"
+          />
+          <UIcon
+            v-else
+            :name="kindIcon(item.kind)"
+            class="text-muted text-lg"
+          />
+          <div
+            v-if="item.kind === 'video'"
+            class="absolute inset-0 flex items-center justify-center bg-black/30"
+          >
+            <UIcon name="i-lucide-play" class="text-white text-base" />
+          </div>
+        </div>
+        <div class="min-w-0 flex-1">
+          <div class="text-xs font-medium text-default truncate">
+            {{ item.label }}
+          </div>
+          <div v-if="item.sublabel" class="text-[10px] text-muted truncate">
+            {{ item.sublabel }}
+          </div>
+        </div>
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetPreviewSidebar.vue.d.ts

@@ -0,0 +1,15 @@
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    groups: Array<{
+        label: string;
+        items: PreviewSource[];
+    }>;
+    selectedId: string | null;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetPreviewVideo.d.vue.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source: PreviewSource;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,148 @@
+<script setup>
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  source: { type: Object, required: true }
+});
+const videoEl = ref(null);
+const errored = ref(false);
+const hlsInstance = shallowRef(null);
+const dashInstance = shallowRef(null);
+const poster = computed(() => props.source.thumb ?? null);
+const mime = computed(
+  () => props.asset.mime_type || props.asset.mimeType || ""
+);
+function destroyEngines() {
+  if (hlsInstance.value) {
+    try {
+      hlsInstance.value.destroy();
+    } catch {
+    }
+    hlsInstance.value = null;
+  }
+  if (dashInstance.value) {
+    try {
+      dashInstance.value.reset();
+    } catch {
+    }
+    dashInstance.value = null;
+  }
+}
+function isSafari() {
+  if (typeof navigator === "undefined") return false;
+  return /^(?:(?!chrome|android|crios|fxios|edg).)*safari/i.test(
+    navigator.userAgent
+  );
+}
+async function attachHls(src) {
+  const el = videoEl.value;
+  if (!el) return false;
+  try {
+    const mod = await import("hls.js");
+    const Hls = mod.default ?? mod;
+    if (Hls?.isSupported?.()) {
+      const hls = new Hls({ enableWorker: true, lowLatencyMode: false });
+      hls.loadSource(src);
+      hls.attachMedia(el);
+      hls.on(Hls.Events.ERROR, (_e, data) => {
+        if (data?.fatal) {
+          console.warn("[ML] HLS fatal error:", data?.details);
+          errored.value = true;
+        }
+      });
+      hlsInstance.value = hls;
+      return true;
+    }
+  } catch (e) {
+    console.warn("[ML] hls.js unavailable:", e?.message ?? e);
+  }
+  if (isSafari() && el.canPlayType("application/vnd.apple.mpegurl")) {
+    el.src = src;
+    return true;
+  }
+  return false;
+}
+async function attachDash(src) {
+  const el = videoEl.value;
+  if (!el) return false;
+  try {
+    const mod = await import("dashjs");
+    const dashjs = mod.default ?? mod;
+    const player = dashjs.MediaPlayer().create();
+    player.initialize(el, src, false);
+    player.on("error", (ev) => {
+      console.warn("[ML] DASH error:", ev?.error?.message);
+      errored.value = true;
+    });
+    dashInstance.value = player;
+    return true;
+  } catch (e) {
+    console.warn("[ML] dashjs unavailable:", e?.message ?? e);
+    return false;
+  }
+}
+async function setup() {
+  destroyEngines();
+  errored.value = false;
+  const el = videoEl.value;
+  const s = props.source;
+  if (!el || !s?.src) return;
+  el.removeAttribute("src");
+  el.load();
+  if (s.type === "hls") {
+    const ok = await attachHls(s.src);
+    if (!ok) errored.value = true;
+    return;
+  }
+  if (s.type === "dash") {
+    const ok = await attachDash(s.src);
+    if (!ok) errored.value = true;
+    return;
+  }
+  el.load();
+}
+watch(
+  () => [props.source?.id, props.source?.src, props.source?.type],
+  () => setup(),
+  { flush: "post" }
+);
+onMounted(setup);
+onBeforeUnmount(destroyEngines);
+function handleNativeError() {
+  console.warn("[ML] <video> error on source", props.source?.src);
+  errored.value = true;
+}
+</script>
+
+<template>
+  <div class="h-full w-fullve">
+    <MLAssetManagerAssetPreviewFallback
+      v-if="!source?.src || errored"
+      :asset="asset"
+    />
+    <video
+      v-else
+      :key="source.id"
+      ref="videoEl"
+      class="h-full w-auto max-w-full max-h-full object-contain bg-black rounded-lg border border-default"
+      controls
+      playsinline
+      preload="metadata"
+      :poster="poster || void 0"
+      @error="handleNativeError"
+    >
+      <source
+        v-if="source.type === 'progressive'"
+        :src="source.src"
+        :type="mime"
+      />
+    </video>
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetPreviewVideo.vue.d.ts

@@ -0,0 +1,9 @@
+import type { AssetDetail } from "../../index.js";
+import type { PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    source: PreviewSource;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/AssetRenditions.d.vue.ts

@@ -0,0 +1,8 @@
+import type { UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    assetId: string;
+    manager: UseMLAssetManagerReturn;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,148 @@
+<script setup>
+import { computed, onMounted, watch } from "vue";
+const props = defineProps({
+  assetId: { type: String, required: true },
+  manager: { type: Object, required: true }
+});
+const renditions = computed(() => props.manager.renditions.value);
+const loading = computed(() => props.manager.renditionsLoading.value);
+const grouped = computed(() => {
+  const groups = /* @__PURE__ */ new Map();
+  for (const r of renditions.value) {
+    const type = r.renditionType;
+    if (!groups.has(type)) groups.set(type, []);
+    groups.get(type).push(r);
+  }
+  return groups;
+});
+const typeIcon = (type) => {
+  const map = {
+    original: "i-lucide-file",
+    mp4: "i-lucide-film",
+    thumbnail: "i-lucide-images",
+    hls: "i-lucide-radio",
+    dash: "i-lucide-radio",
+    backup: "i-lucide-archive",
+    subtitle: "i-lucide-captions",
+    transcript: "i-lucide-text",
+    key_moments: "i-lucide-bookmark"
+  };
+  return map[type] ?? "i-lucide-file";
+};
+const statusColor = (status) => {
+  const map = {
+    ready: "success",
+    processing: "warning",
+    failed: "error",
+    pending: "neutral"
+  };
+  return map[status] ?? "neutral";
+};
+const accordionItems = computed(() => {
+  return Array.from(grouped.value.entries()).map(([type]) => ({
+    label: type.toUpperCase(),
+    icon: typeIcon(type),
+    value: type,
+    slot: type
+  }));
+});
+onMounted(() => {
+  props.manager.fetchRenditions(props.assetId);
+});
+watch(() => props.assetId, (id) => {
+  props.manager.fetchRenditions(id);
+});
+</script>
+
+<template>
+  <div>
+    <!-- Loading -->
+    <div v-if="loading" class="space-y-3">
+      <USkeleton v-for="i in 3" :key="i" class="h-12 w-full" />
+    </div>
+
+    <!-- Renditions accordion -->
+    <UAccordion v-else-if="accordionItems.length" :items="accordionItems" type="multiple">
+      <template v-for="[type, items] in grouped" :key="type" #[type]>
+        <!-- Thumbnail grid -->
+        <div v-if="type === 'thumbnail'" class="flex flex-wrap gap-3 p-3">
+          <div v-for="r in items" :key="r.id">
+            <div v-if="r.variants?.length" class="flex flex-wrap gap-2">
+              <div v-for="v in r.variants" :key="v.name" class="text-center">
+                <div class="w-16 h-16 rounded bg-muted flex items-center justify-center">
+                  <UIcon name="i-lucide-image" class="text-muted" />
+                </div>
+                <div class="text-[10px] text-muted mt-1">
+                  {{ v.width && v.height ? `${v.width}x${v.height}` : v.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- HLS/DASH variants table -->
+        <div v-else-if="type === 'hls' || type === 'dash'" class="p-3 space-y-2">
+          <div v-for="r in items" :key="r.id">
+            <div class="flex items-center gap-2 text-xs mb-2">
+              <UBadge :color="statusColor(r.status)" variant="subtle" size="xs">{{ r.status }}</UBadge>
+              <span class="text-muted">{{ r.entrypoint }}</span>
+              <span class="text-muted">{{ r.blobIds?.length ?? 0 }} blobs</span>
+            </div>
+            <div v-if="r.variants?.length" class="divide-y divide-default">
+              <div v-for="v in r.variants" :key="v.name" class="flex items-center justify-between py-1.5 text-xs">
+                <span class="font-medium text-default">{{ v.name }}</span>
+                <span class="text-muted">{{ v.width && v.height ? `${v.width}x${v.height}` : "" }}</span>
+                <span v-if="v.bitrateKbps" class="text-muted">{{ v.bitrateKbps }} kbps</span>
+                <span class="text-muted font-mono">{{ v.entrypoint }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- MP4 detail -->
+        <div v-else-if="type === 'mp4'" class="p-3 space-y-2">
+          <div v-for="r in items" :key="r.id" class="flex items-center justify-between py-1.5">
+            <div class="flex items-center gap-2 min-w-0">
+              <UBadge :color="statusColor(r.status)" variant="subtle" size="xs">{{ r.status }}</UBadge>
+              <span class="text-xs text-default truncate">{{ r.entrypoint }}</span>
+            </div>
+            <div class="flex items-center gap-3 text-xs text-muted shrink-0">
+              <span v-if="r.extras?.width && r.extras?.height">{{ r.extras.width }}x{{ r.extras.height }}</span>
+              <span v-if="r.extras?.codec_video">{{ r.extras.codec_video }}</span>
+              <span v-if="r.extras?.bitrate_kbps">{{ r.extras.bitrate_kbps }} kbps</span>
+              <span v-if="r.durationSeconds">{{ Math.round(r.durationSeconds) }}s</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Default list for other types -->
+        <div v-else class="p-3 space-y-2">
+          <div
+            v-for="r in items"
+            :key="r.id"
+            class="flex items-center justify-between py-1.5"
+          >
+            <div class="flex items-center gap-2 min-w-0">
+              <UBadge :color="statusColor(r.status)" variant="subtle" size="xs">{{ r.status }}</UBadge>
+              <span class="text-xs text-default truncate">{{ r.entrypoint || r.id.slice(0, 8) }}</span>
+            </div>
+            <div class="flex items-center gap-3 text-xs text-muted shrink-0">
+              <span v-if="r.durationSeconds">{{ Math.round(r.durationSeconds) }}s</span>
+              <span v-if="r.pages">{{ r.pages }} pages</span>
+              <span>{{ r.blobIds?.length ?? 0 }} files</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </UAccordion>
+
+    <!-- Empty state -->
+    <UEmpty
+      v-else
+      icon="i-lucide-images"
+      title="No renditions"
+      description="Renditions will appear here after processing completes."
+      size="sm"
+    />
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/AssetRenditions.vue.d.ts

@@ -0,0 +1,8 @@
+import type { UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    assetId: string;
+    manager: UseMLAssetManagerReturn;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLAssetManager/Processing.d.vue.ts

@@ -0,0 +1,8 @@
+import type { UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    assetId: string;
+    manager: UseMLAssetManagerReturn;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;