nuxt-media-library 0.0.44

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

@@ -0,0 +1,156 @@
+<script setup>
+import { computed, ref, toRef } from "vue";
+import { useMLAssetManagerPreview } from "../../composables/useMLAssetManagerPreview";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  manager: { type: Object, required: true },
+  allowReupload: { type: Boolean, required: false }
+});
+const emit = defineEmits(["deleted"]);
+const activeTab = ref("preview");
+const confirmOpen = ref(false);
+const deleting = ref(false);
+const isProcessing = computed(
+  () => props.asset.status === "processing"
+);
+const preview = useMLAssetManagerPreview(toRef(props, "asset"));
+const tabItems = computed(() => [
+  {
+    label: "Preview",
+    value: "preview",
+    slot: "preview",
+    icon: "i-lucide-play"
+  },
+  { label: "Overview", value: "overview", slot: "overview" },
+  {
+    label: "Processing",
+    value: "processing",
+    slot: "processing",
+    badge: isProcessing.value ? { color: "warning", label: "\u25CF" } : void 0
+  }
+]);
+async function handleDelete() {
+  deleting.value = true;
+  try {
+    await props.manager.deleteAsset(props.asset.id);
+    confirmOpen.value = false;
+    emit("deleted", props.asset.id);
+  } catch (err) {
+    console.error("Failed to delete asset", err);
+  } finally {
+    deleting.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="h-full flex flex-col">
+    <!-- Navbar -->
+    <div
+      class="flex items-center justify-between px-4 py-2 border-b border-default shrink-0"
+    >
+      <span class="text-xs text-muted truncate">{{
+        asset.original_filename || asset.id.slice(0, 12)
+      }}</span>
+      <UButton
+        icon="i-lucide-trash-2"
+        label="Delete & Reupload"
+        variant="ghost"
+        color="error"
+        size="xs"
+        @click="confirmOpen = true"
+      />
+    </div>
+
+    <!-- Tabs (tab bar fixed, content scrollable) -->
+    <UTabs
+      v-model="activeTab"
+      :items="tabItems"
+      :unmount-on-hide="false"
+      variant="link"
+      size="sm"
+      class="w-full flex-1 flex flex-col"
+      :ui="{
+  list: 'px-6 border-b border-default shrink-0',
+  content: 'flex-1 '
+}"
+    >
+      <template #preview>
+        <div class="p-4 h-127.5 max-h-127.5 overflow-hidden">
+          <div class="w-full h-full min-h-0 flex gap-3 overflow-hidden">
+            <div class="flex-1 min-w-0 h-full min-h-0">
+              <MLAssetManagerAssetPreview
+                :asset="asset"
+                :source="preview.selected.value"
+              />
+            </div>
+            <aside
+              v-if="preview.sources.value.length > 1"
+              class="w-56 shrink-0 h-full min-h-0 rounded-lg border border-default bg-elevated/40 overflow-hidden flex"
+            >
+              <MLAssetManagerAssetPreviewSidebar
+                :groups="preview.groups.value"
+                :selected-id="preview.selectedId.value"
+                @select="preview.select"
+              />
+            </aside>
+          </div>
+        </div>
+      </template>
+      <template #overview>
+        <div class="p-6">
+          <MLAssetManagerAssetOverview :asset="asset" :manager="manager" />
+        </div>
+      </template>
+      <template #processing>
+        <div class="p-6">
+          <MLAssetManagerProcessing :asset-id="asset.id" :manager="manager" />
+        </div>
+      </template>
+    </UTabs>
+
+    <!-- Delete confirmation modal -->
+    <UModal v-model:open="confirmOpen">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <div class="flex items-center gap-3">
+            <div
+              class="w-10 h-10 rounded-full bg-error/10 flex items-center justify-center"
+            >
+              <UIcon name="i-lucide-trash-2" class="text-error text-lg" />
+            </div>
+            <div>
+              <h3 class="text-sm font-semibold text-default">
+                Delete this asset?
+              </h3>
+              <p class="text-xs text-muted mt-0.5">
+                This will permanently delete
+                <strong>{{
+                  asset.original_filename || asset.id.slice(0, 12)
+                }}</strong>
+                and all its renditions. You can then upload a new file.
+              </p>
+            </div>
+          </div>
+          <div class="flex justify-end gap-2">
+            <UButton
+              label="Cancel"
+              variant="ghost"
+              color="neutral"
+              size="sm"
+              @click="confirmOpen = false"
+            />
+            <UButton
+              label="Delete & Reupload"
+              color="error"
+              size="sm"
+              icon="i-lucide-trash-2"
+              :loading="deleting"
+              @click="handleDelete"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+import type { AssetDetail, UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    manager: UseMLAssetManagerReturn;
+    /** Show delete & reupload action (slot mode) */
+    allowReupload?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    deleted: (assetId: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDeleted?: ((assetId: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,15 @@
+import type { AssetDetail } from "../../index.js";
+import type { ProcessingStream } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    assets: AssetDetail[];
+    selectedAssetId: string | null;
+    loading: boolean;
+    processingStreams: Map<string, ProcessingStream>;
+};
+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/AssetList.vue

@@ -0,0 +1,41 @@
+<script setup>
+defineProps({
+  assets: { type: Array, required: true },
+  selectedAssetId: { type: [String, null], required: true },
+  loading: { type: Boolean, required: true },
+  processingStreams: { type: Map, required: true }
+});
+const emit = defineEmits(["select"]);
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <!-- Loading skeleton -->
+    <template v-if="loading">
+      <div v-for="i in 5" :key="i" class="h-16 flex items-center px-3 gap-3">
+        <USkeleton class="w-10 h-10 rounded-lg shrink-0" />
+        <div class="flex-1 space-y-1.5">
+          <USkeleton class="h-3.5 w-3/4" />
+          <USkeleton class="h-3 w-1/2" />
+        </div>
+      </div>
+    </template>
+
+    <!-- Asset cards -->
+    <template v-else-if="assets.length">
+      <MLAssetManagerAssetCard
+        v-for="asset in assets"
+        :key="asset.id"
+        :asset="asset"
+        :selected="asset.id === selectedAssetId"
+        :processing-stream="processingStreams.get(asset.id)"
+        @click="emit('select', asset.id)"
+      />
+    </template>
+
+    <!-- Empty -->
+    <div v-else class="flex-1 flex items-center justify-center p-4">
+      <span class="text-sm text-muted">No assets found</span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,15 @@
+import type { AssetDetail } from "../../index.js";
+import type { ProcessingStream } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    assets: AssetDetail[];
+    selectedAssetId: string | null;
+    loading: boolean;
+    processingStreams: Map<string, ProcessingStream>;
+};
+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/AssetOverview.d.vue.ts

@@ -0,0 +1,8 @@
+import type { AssetDetail, UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    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/AssetOverview.vue

@@ -0,0 +1,321 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useMLResourcePolicy, Visibility } from "../../index";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  manager: { type: Object, required: false }
+});
+const policyApi = useMLResourcePolicy();
+const formattedSize = computed(() => {
+  const bytes = props.asset.sizeBytes ?? props.asset.size_bytes;
+  if (!bytes) return "0 B";
+  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]}`;
+});
+const timeAgo = (dateStr) => {
+  if (!dateStr) return "\u2014";
+  const diff = Date.now() - new Date(dateStr).getTime();
+  const mins = Math.floor(diff / 6e4);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ago`;
+};
+const hash = computed(
+  () => props.asset.hashSha256 ?? props.asset.hash_sha256 ?? null
+);
+const truncatedHash = computed(() => {
+  if (!hash.value) return "\u2014";
+  return hash.value.slice(0, 12) + "\u2026";
+});
+const copyHash = async () => {
+  if (hash.value) {
+    await navigator.clipboard.writeText(hash.value);
+  }
+};
+const VISIBILITY_ICONS = {
+  PUBLIC: "i-lucide-globe",
+  PRIVATE: "i-lucide-lock",
+  RESTRICTED: "i-lucide-key-round"
+};
+const visibilityIcon = computed(() => {
+  return VISIBILITY_ICONS[props.asset.visibility?.toUpperCase()] ?? "i-lucide-eye";
+});
+const visibilityUpdating = ref(false);
+const visibilityError = ref(null);
+const visibilityOptions = [
+  { value: Visibility.Public, label: "Public", icon: VISIBILITY_ICONS.PUBLIC },
+  { value: Visibility.Private, label: "Private", icon: VISIBILITY_ICONS.PRIVATE },
+  { value: Visibility.RESTRICTED, label: "Restricted", icon: VISIBILITY_ICONS.RESTRICTED }
+];
+const visibilityMenuItems = computed(() => [
+  visibilityOptions.map((opt) => ({
+    label: opt.label,
+    icon: opt.icon,
+    checked: props.asset.visibility?.toLowerCase() === opt.value,
+    type: "checkbox",
+    onSelect: (e) => {
+      e.preventDefault();
+      void changeVisibility(opt.value);
+    }
+  }))
+]);
+async function changeVisibility(next) {
+  if (!props.manager) return;
+  if (props.asset.visibility?.toLowerCase() === next) return;
+  visibilityUpdating.value = true;
+  visibilityError.value = null;
+  try {
+    await props.manager.updateAsset(props.asset.id, { visibility: next });
+  } catch (err) {
+    visibilityError.value = err instanceof Error ? err.message : "Failed to update visibility";
+  } finally {
+    visibilityUpdating.value = false;
+  }
+}
+const statusColor = computed(() => {
+  const map = {
+    ready: "success",
+    processing: "warning",
+    failed: "error",
+    uploaded: "info",
+    pending: "neutral"
+  };
+  return map[props.asset.status] ?? "neutral";
+});
+const metaRows = computed(() => [
+  { label: "Status", key: "status" },
+  { label: "Kind", value: props.asset.kind },
+  { label: "Visibility", key: "visibility" },
+  { label: "Title", value: props.asset.title || "\u2014" },
+  { label: "Filename", value: props.asset.originalFilename || props.asset.original_filename || "\u2014" },
+  { label: "MIME Type", value: props.asset.mimeType || props.asset.mime_type || "\u2014" },
+  { label: "File Size", value: formattedSize.value },
+  { label: "Content Hash", key: "hash" },
+  { label: "Created", value: timeAgo(props.asset.createdAt ?? props.asset.created_at) }
+]);
+const accordionItems = computed(() => [
+  {
+    label: "Storage",
+    icon: "i-lucide-hard-drive",
+    value: "storage",
+    slot: "storage"
+  },
+  {
+    label: "Resource Policy",
+    icon: "i-lucide-shield",
+    value: "resource-policy",
+    slot: "resource-policy"
+  }
+]);
+const blobId = computed(
+  () => props.asset.blobId ?? props.asset.blob_id ?? props.asset.primary_blob_id ?? null
+);
+const resourcePolicyId = computed(
+  () => props.asset.resourcePolicyId ?? props.asset.resource_policy_id ?? null
+);
+const previewUrl = computed(() => props.asset.previewUrl ?? null);
+const previewUrlType = computed(() => props.asset.previewUrlType ?? null);
+const previewExpiresIn = computed(() => {
+  const sec = props.asset.previewUrlExpiresIn;
+  if (sec == null) return "\u2014";
+  if (sec < 60) return `${sec}s`;
+  if (sec < 3600) return `${Math.round(sec / 60)}m`;
+  return `${Math.round(sec / 3600)}h`;
+});
+const renditionsCount = computed(() => props.asset.renditions?.length ?? 0);
+const policy = ref(null);
+const policyLoading = ref(false);
+const policyError = ref(null);
+async function loadPolicy() {
+  const id = resourcePolicyId.value;
+  if (!id) return;
+  policyLoading.value = true;
+  policyError.value = null;
+  try {
+    policy.value = await policyApi.get(id);
+  } catch (err) {
+    policyError.value = err instanceof Error ? err.message : "Failed to load policy";
+    policy.value = null;
+  } finally {
+    policyLoading.value = false;
+  }
+}
+watch(resourcePolicyId, (id) => {
+  policy.value = null;
+  if (id) loadPolicy();
+}, { immediate: true });
+const policyMaxSize = computed(() => {
+  const max = policy.value?.file_constraints?.max_size_bytes;
+  if (!max) return "\u2014";
+  const units = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(max) / Math.log(1024));
+  return `${(max / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+});
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p v-if="visibilityError" class="text-xs text-error">{{ visibilityError }}</p>
+    <!-- Metadata grid -->
+    <div class="divide-y divide-default">
+      <div
+        v-for="row in metaRows"
+        :key="row.label"
+        class="flex items-center justify-between py-2 px-1"
+      >
+        <span class="text-xs text-muted uppercase tracking-wide">{{ row.label }}</span>
+        <template v-if="row.key === 'status'">
+          <UBadge :color="statusColor" variant="subtle" size="xs">{{ asset.status }}</UBadge>
+        </template>
+        <template v-else-if="row.key === 'visibility'">
+          <UDropdownMenu
+            v-if="manager"
+            :items="visibilityMenuItems"
+            :popper="{ placement: 'bottom-end' }"
+          >
+            <UButton
+              :icon="visibilityUpdating ? 'i-lucide-loader-circle' : visibilityIcon"
+              :label="asset.visibility"
+              :loading="visibilityUpdating"
+              variant="ghost"
+              color="neutral"
+              size="xs"
+              trailing-icon="i-lucide-chevron-down"
+              :ui="{ leadingIcon: visibilityUpdating ? 'animate-spin' : '' }"
+            />
+          </UDropdownMenu>
+          <span v-else class="flex items-center gap-1 text-xs text-default">
+            <UIcon :name="visibilityIcon" class="text-sm" />
+            {{ asset.visibility }}
+          </span>
+        </template>
+        <template v-else-if="row.key === 'hash'">
+          <UTooltip :text="hash || 'No hash'">
+            <span class="flex items-center gap-1 text-xs font-mono text-default cursor-pointer" @click="copyHash">
+              {{ truncatedHash }}
+              <UIcon name="i-lucide-copy" class="text-muted text-sm" />
+            </span>
+          </UTooltip>
+        </template>
+        <template v-else>
+          <span class="text-xs text-default">{{ row.value }}</span>
+        </template>
+      </div>
+    </div>
+
+    <!-- Collapsible sections -->
+    <UAccordion :items="accordionItems" type="multiple">
+      <template #storage>
+        <div class="p-3 space-y-3 text-xs">
+          <div>
+            <span class="text-muted block mb-0.5">Blob ID</span>
+            <span class="font-mono break-all">{{ blobId || "\u2014" }}</span>
+          </div>
+          <div class="grid grid-cols-2 gap-3">
+            <div>
+              <span class="text-muted block mb-0.5">Preview URL Type</span>
+              <span>{{ previewUrlType || "\u2014" }}</span>
+            </div>
+            <div>
+              <span class="text-muted block mb-0.5">Preview Expires In</span>
+              <span>{{ previewExpiresIn }}</span>
+            </div>
+            <div>
+              <span class="text-muted block mb-0.5">Renditions</span>
+              <span>{{ renditionsCount }}</span>
+            </div>
+            <div>
+              <span class="text-muted block mb-0.5">File Size</span>
+              <span>{{ formattedSize }}</span>
+            </div>
+          </div>
+          <div v-if="previewUrl">
+            <span class="text-muted block mb-0.5">Preview URL</span>
+            <a
+              :href="previewUrl"
+              target="_blank"
+              rel="noopener"
+              class="font-mono break-all text-primary hover:underline"
+            >
+              {{ previewUrl }}
+            </a>
+          </div>
+        </div>
+      </template>
+      <template #resource-policy>
+        <div class="p-3 text-xs">
+          <div v-if="!resourcePolicyId" class="text-muted">No policy attached.</div>
+          <div v-else-if="policyLoading" class="text-muted flex items-center gap-2">
+            <UIcon name="i-lucide-loader-circle" class="animate-spin" />
+            Loading policy\u2026
+          </div>
+          <div v-else-if="policyError" class="text-error">{{ policyError }}</div>
+          <div v-else-if="policy" class="space-y-3">
+            <div class="grid grid-cols-2 gap-3">
+              <div>
+                <span class="text-muted block mb-0.5">Resource Type</span>
+                <span>{{ policy.resource_type }}</span>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Collection</span>
+                <span>{{ policy.collection_name || "\u2014" }}</span>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Kind</span>
+                <span>{{ policy.kind }}</span>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Visibility</span>
+                <span>{{ policy.visibility }}</span>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Active</span>
+                <UBadge
+                  :color="policy.is_active ? 'success' : 'neutral'"
+                  variant="subtle"
+                  size="xs"
+                >
+                  {{ policy.is_active ? "Yes" : "No" }}
+                </UBadge>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Version</span>
+                <span>v{{ policy.version }}</span>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Max Size</span>
+                <span>{{ policyMaxSize }}</span>
+              </div>
+              <div>
+                <span class="text-muted block mb-0.5">Auto Process</span>
+                <span>{{ policy.processing_config?.auto_process ? "Yes" : "No" }}</span>
+              </div>
+            </div>
+            <div v-if="policy.file_constraints?.allowed_mime_types?.length">
+              <span class="text-muted block mb-1">Allowed MIME Types</span>
+              <div class="flex flex-wrap gap-1">
+                <UBadge
+                  v-for="mime in policy.file_constraints.allowed_mime_types"
+                  :key="mime"
+                  variant="soft"
+                  color="neutral"
+                  size="xs"
+                >
+                  {{ mime }}
+                </UBadge>
+              </div>
+            </div>
+            <div>
+              <span class="text-muted block mb-0.5">Policy ID</span>
+              <span class="font-mono break-all text-muted">{{ policy.id }}</span>
+            </div>
+          </div>
+        </div>
+      </template>
+    </UAccordion>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+import type { AssetDetail, UseMLAssetManagerReturn } from "../../index.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    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/AssetPreview.d.vue.ts

@@ -0,0 +1,10 @@
+import type { AssetDetail } from "../../index.js";
+import { type PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    /** When provided, drives which source is rendered. Otherwise an internal default is picked. */
+    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/AssetPreview.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed, toRef } from "vue";
+import { useMLAssetManagerPreview } from "../../composables/useMLAssetManagerPreview";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  source: { type: [Object, null], required: false }
+});
+const internal = useMLAssetManagerPreview(toRef(props, "asset"));
+const current = computed(() => props.source ?? internal.selected.value);
+</script>
+
+<template>
+  <MLAssetManagerAssetPreviewImage v-if="current?.kind === 'image'" :asset="asset" :source="current" />
+  <MLAssetManagerAssetPreviewVideo v-else-if="current?.kind === 'video'" :asset="asset" :source="current" />
+  <MLAssetManagerAssetPreviewAudio v-else-if="current?.kind === 'audio'" :asset="asset" :source="current" />
+  <MLAssetManagerAssetPreviewDocument v-else-if="current?.kind === 'document'" :asset="asset" :source="current" />
+  <MLAssetManagerAssetPreviewFallback v-else :asset="asset" />
+</template>

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

@@ -0,0 +1,10 @@
+import type { AssetDetail } from "../../index.js";
+import { type PreviewSource } from "../../composables/useMLAssetManagerPreview.js";
+type __VLS_Props = {
+    asset: AssetDetail;
+    /** When provided, drives which source is rendered. Otherwise an internal default is picked. */
+    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/AssetPreviewAudio.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/AssetPreviewAudio.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  asset: { type: Object, required: true },
+  source: { type: [Object, null], required: false }
+});
+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 flex flex-col items-center justify-center gap-3 p-4">
+    <div class="w-12 h-12 rounded-full bg-primary/10 border border-primary/30 flex items-center justify-center">
+      <UIcon name="i-lucide-music" class="text-primary text-2xl" />
+    </div>
+    <span class="text-xs font-bold text-default truncate max-w-full">
+      {{ asset.original_filename || asset.title || asset.id.slice(0, 12) }}
+    </span>
+    <MLAssetManagerAssetPreviewFallback v-if="!src" :asset="asset" class="hidden" />
+    <audio v-else :key="src" :src="src" controls preload="metadata" class="w-full max-w-md" />
+  </div>
+</template>