nuxt-media-library 0.0.44

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

@@ -0,0 +1,84 @@
+<script setup>
+import { computed, ref, onMounted, watch } from "vue";
+import { useMLResourcePolicy } from "../../composables/resourcePolicy/useMLResourcePolicy";
+const props = defineProps({
+  assetId: { type: String, required: true },
+  manager: { type: Object, required: true }
+});
+const resourcePolicy = useMLResourcePolicy();
+const policy = ref(null);
+const policyLoading = ref(false);
+const videoUrl = ref(null);
+const asset = computed(() => props.manager.selectedAsset.value);
+const policyId = computed(
+  () => asset.value?.resourcePolicyId ?? asset.value?.resource_policy_id ?? null
+);
+async function loadPolicy() {
+  if (!policyId.value) {
+    policy.value = null;
+    return;
+  }
+  policyLoading.value = true;
+  try {
+    policy.value = await resourcePolicy.get(policyId.value);
+  } catch {
+    policy.value = null;
+  } finally {
+    policyLoading.value = false;
+  }
+}
+async function resolveVideoUrl() {
+  if (!asset.value || asset.value.kind !== "video") {
+    videoUrl.value = null;
+    return;
+  }
+  try {
+    const result = await $fetch(
+      `/api/media-library/delivery/assets/${encodeURIComponent(props.assetId)}`
+    );
+    videoUrl.value = result.downloadUrl ?? null;
+  } catch {
+    videoUrl.value = null;
+  }
+}
+onMounted(() => {
+  loadPolicy();
+  resolveVideoUrl();
+});
+watch(policyId, loadPolicy);
+watch(() => props.assetId, resolveVideoUrl);
+const showStepper = computed(() => {
+  if (policyLoading.value) return false;
+  if (!policy.value) return !policyId.value;
+  return policy.value.processing_config?.auto_process === false;
+});
+function onComplete() {
+  props.manager.refresh(props.assetId);
+}
+function onFailed() {
+  props.manager.refresh(props.assetId);
+}
+</script>
+
+<template>
+  <div>
+    <USkeleton v-if="policyLoading" class="h-40 w-full" />
+
+    <MLProcessingStepper
+      v-else-if="showStepper"
+      :asset-id="assetId"
+      :asset-kind="asset?.kind"
+      :download-url="videoUrl"
+      @complete="onComplete"
+      @failed="onFailed"
+    />
+
+    <MLProcessingPipeline
+      v-else
+      :asset-id="assetId"
+      :asset-status="asset?.status"
+      @complete="onComplete"
+      @failed="onFailed"
+    />
+  </div>
+</template>

package/dist/runtime/components/MLAssetManager/Processing.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/SlotCard.d.vue.ts

@@ -0,0 +1,17 @@
+import type { AssetSlot, AssetDetail } from "../../index.js";
+import type { ProcessingStream } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    item: AssetSlot;
+    asset: AssetDetail | null;
+    selected: boolean;
+    processingStream?: ProcessingStream;
+    /** Total assets in slot (multi-mode). Defaults derived from item. */
+    count?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from "vue";
+import { getSlotAssetIds, isMultiSlot } from "../../types/asset";
+const props = defineProps({
+  item: { type: Object, required: true },
+  asset: { type: [Object, null], required: true },
+  selected: { type: Boolean, required: true },
+  processingStream: { type: Object, required: false },
+  count: { type: Number, required: false }
+});
+const emit = defineEmits(["click"]);
+const isMulti = computed(() => isMultiSlot(props.item));
+const slotCount = computed(() => props.count ?? getSlotAssetIds(props.item).length);
+const hasAsset = computed(() => slotCount.value > 0 && !!props.asset);
+const isProcessing = computed(() => !!props.processingStream?.isProcessing.value);
+const processingProgress = computed(() => props.processingStream?.progress.value ?? 0);
+const statusColor = computed(() => {
+  if (!hasAsset.value) return "neutral";
+  const map = {
+    ready: "success",
+    processing: "warning",
+    failed: "error",
+    uploaded: "info",
+    pending: "neutral"
+  };
+  return map[props.asset.status] ?? "neutral";
+});
+const statusLabel = computed(() => {
+  if (!hasAsset.value) return "EMPTY";
+  if (isMulti.value) return `${slotCount.value} ASSET${slotCount.value === 1 ? "" : "S"}`;
+  const map = {
+    ready: "READY",
+    processing: "PROC",
+    failed: "FAIL",
+    uploaded: "UPLOADED",
+    pending: "PENDING"
+  };
+  return map[props.asset.status] ?? props.asset.status?.toUpperCase();
+});
+const icon = computed(() => {
+  if (!hasAsset.value) return "i-lucide-upload";
+  const map = {
+    IMAGE: "i-lucide-image",
+    VIDEO: "i-lucide-film",
+    AUDIO: "i-lucide-music",
+    DOCUMENT: "i-lucide-file-text",
+    ARCHIVE: "i-lucide-archive"
+  };
+  return map[props.asset.kind?.toUpperCase()] ?? "i-lucide-file";
+});
+</script>
+
+<template>
+  <div
+    class="flex items-center px-3 gap-3 cursor-pointer transition-colors"
+    :class="[
+  selected ? 'bg-elevated/50 border-l-3 border-primary' : 'hover:bg-elevated/50 border-l-3 border-transparent',
+  isProcessing ? 'py-2' : 'h-16'
+]"
+    @click="emit('click')"
+  >
+    <!-- Icon -->
+    <div class="w-10 h-10 rounded-lg shrink-0 flex items-center justify-center overflow-hidden relative"
+      :class="hasAsset ? 'bg-muted' : 'bg-muted/50 border border-dashed border-default'"
+    >
+      <UIcon :name="icon" class="text-muted text-lg" />
+      <div v-if="isProcessing" class="absolute top-0.5 right-0.5 w-2 h-2 rounded-full bg-warning animate-pulse" />
+    </div>
+
+    <!-- Info -->
+    <div class="flex flex-col min-w-0 flex-1">
+      <span class="text-sm font-bold truncate text-default">{{ item.label }}</span>
+      <div class="flex items-center gap-1 mt-0.5">
+        <UBadge :color="statusColor" :variant="isProcessing ? 'solid' : 'subtle'" size="sm">
+          {{ statusLabel }}
+        </UBadge>
+      </div>
+      <UProgress
+        v-if="isProcessing"
+        :model-value="processingProgress"
+        size="2xs"
+        color="warning"
+        class="mt-1"
+      />
+      <span v-else-if="hasAsset && isMulti && slotCount > 1" class="text-[10px] text-muted mt-0.5 truncate">
+        {{ asset.original_filename || asset.id.slice(0, 12) }} + {{ slotCount - 1 }} more
+      </span>
+      <span v-else-if="hasAsset" class="text-[10px] text-muted mt-0.5 truncate">
+        {{ asset.original_filename || asset.id.slice(0, 12) }}
+      </span>
+      <span v-else class="text-[10px] text-muted mt-0.5">Click to upload</span>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { AssetSlot, AssetDetail } from "../../index.js";
+import type { ProcessingStream } from "../../composables/useMLProcessingStatus.js";
+type __VLS_Props = {
+    item: AssetSlot;
+    asset: AssetDetail | null;
+    selected: boolean;
+    processingStream?: ProcessingStream;
+    /** Total assets in slot (multi-mode). Defaults derived from item. */
+    count?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,14 @@
+import type { AssetSlot } from "../../index.js";
+type __VLS_Props = {
+    /** Browse mode: list of asset IDs */
+    assetIds?: string[];
+    /** Slot mode: structured items with labels and resource policies */
+    items?: AssetSlot[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:items": (items: AssetSlot[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:items"?: ((items: AssetSlot[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,328 @@
+<script setup>
+import { computed, reactive, ref, watch } from "vue";
+import { useMLAssetManager } from "../../index";
+import { getSlotAssetIds, isMultiSlot } from "../../types/asset";
+const props = defineProps({
+  assetIds: { type: Array, required: false },
+  items: { type: Array, required: false }
+});
+const emit = defineEmits(["update:items"]);
+const isSlotMode = computed(() => !!props.items);
+const selectedSlotIndex = ref(null);
+const selectedSlot = computed(() => {
+  if (!isSlotMode.value || selectedSlotIndex.value === null) return null;
+  return props.items[selectedSlotIndex.value] ?? null;
+});
+const resolvedAssetIds = computed(() => {
+  if (props.items) {
+    return props.items.flatMap((s) => getSlotAssetIds(s));
+  }
+  return props.assetIds ?? [];
+});
+const manager = useMLAssetManager(resolvedAssetIds);
+const slotAddMode = ref(false);
+const selectedSlotIds = computed(
+  () => selectedSlot.value ? getSlotAssetIds(selectedSlot.value) : []
+);
+const selectedSlotIsMulti = computed(
+  () => selectedSlot.value ? isMultiSlot(selectedSlot.value) : false
+);
+function selectSlot(index) {
+  const slot = props.items?.[index];
+  if (!slot) return;
+  selectedSlotIndex.value = index;
+  slotAddMode.value = false;
+  const ids = getSlotAssetIds(slot);
+  if (ids.length && ids[0]) {
+    manager.select(ids[0]);
+  } else {
+    manager.select(null);
+    if (isMultiSlot(slot)) slotAddMode.value = true;
+  }
+}
+function selectAsset(assetId) {
+  manager.select(assetId);
+}
+function selectAssetInSlot(assetId) {
+  slotAddMode.value = false;
+  manager.select(assetId);
+}
+function startAddInSlot() {
+  slotAddMode.value = true;
+  manager.select(null);
+  const idx = selectedSlotIndex.value;
+  if (idx !== null) {
+    uploaderModels[idx] = [];
+    uploaderRefs[idx]?.reset?.();
+  }
+}
+watch(
+  isSlotMode,
+  (val) => {
+    if (val && props.items?.length && selectedSlotIndex.value === null) {
+      selectSlot(0);
+    }
+  },
+  { immediate: true }
+);
+async function onSlotUploaded(slotIndex, uploadedIds) {
+  if (!props.items) return;
+  const current = props.items[slotIndex];
+  if (!current) return;
+  const updated = [...props.items];
+  if (isMultiSlot(current)) {
+    const existing = current.assetIds ?? [];
+    const next = [...existing, ...uploadedIds.filter((id) => id && !existing.includes(id))];
+    updated[slotIndex] = { ...current, assetIds: next };
+  } else {
+    const assetId = uploadedIds[0] || "";
+    if (!assetId) return;
+    updated[slotIndex] = {
+      label: current.label,
+      resourceType: current.resourceType,
+      collectionName: current.collectionName ?? null,
+      assetId
+    };
+  }
+  emit("update:items", updated);
+  for (const id of uploadedIds) {
+    if (id) await manager.refresh(id);
+  }
+  const first = uploadedIds[0];
+  const uploaderRef = uploaderRefs[slotIndex];
+  const stillBusy = uploaderRef?.isBusy?.() ?? false;
+  if (first && selectedSlotIndex.value === slotIndex && !stillBusy) {
+    slotAddMode.value = false;
+    manager.select(first);
+  }
+}
+function onSlotAssetDeleted(assetId) {
+  if (selectedSlotIndex.value === null || !props.items) return;
+  const updated = [...props.items];
+  const current = updated[selectedSlotIndex.value];
+  if (!current) return;
+  if (isMultiSlot(current)) {
+    const remaining = (current.assetIds ?? []).filter((id) => id !== assetId);
+    updated[selectedSlotIndex.value] = { ...current, assetIds: remaining };
+    emit("update:items", updated);
+    if (remaining.length && remaining[0]) {
+      manager.select(remaining[0]);
+    } else {
+      manager.select(null);
+      slotAddMode.value = true;
+    }
+  } else if (current.assetId === assetId) {
+    updated[selectedSlotIndex.value] = {
+      label: current.label,
+      resourceType: current.resourceType,
+      collectionName: current.collectionName ?? null,
+      assetId: ""
+    };
+    emit("update:items", updated);
+  }
+}
+const search = ref("");
+const filteredAssets = computed(() => {
+  const all = Array.from(manager.assets.value.values());
+  if (!search.value) return all;
+  const q = search.value.toLowerCase();
+  return all.filter((a) => {
+    const name = (a.original_filename || a.title || a.id).toLowerCase();
+    return name.includes(q);
+  });
+});
+const showUploader = computed(() => {
+  if (!isSlotMode.value || !selectedSlot.value) return false;
+  if (isMultiSlot(selectedSlot.value)) return slotAddMode.value;
+  return !selectedSlot.value.assetId;
+});
+const uploaderModels = reactive({});
+const uploaderRefs = reactive({});
+const visitedUploaderSlots = ref([]);
+function ensureUploaderForCurrentSlot() {
+  const idx = selectedSlotIndex.value;
+  if (idx === null) return;
+  if (!visitedUploaderSlots.value.includes(idx)) {
+    visitedUploaderSlots.value.push(idx);
+  }
+  if (!(idx in uploaderModels)) uploaderModels[idx] = [];
+}
+watch(
+  showUploader,
+  (v) => {
+    if (v) ensureUploaderForCurrentSlot();
+  },
+  { immediate: true }
+);
+function handleUploaderUpdate(slotIndex, ids) {
+  uploaderModels[slotIndex] = ids;
+  if (ids.length) onSlotUploaded(slotIndex, ids);
+}
+</script>
+
+<template>
+  <div class="w-full h-full flex gap-4">
+    <!-- Left card: List -->
+    <aside
+      class="w-72 shrink-0 bg-default border border-default rounded-lg flex flex-col"
+    >
+      <header
+        class="h-10 flex items-center justify-between px-4 border-b border-default shrink-0"
+      >
+        <span class="text-sm font-bold tracking-tight text-default">
+          {{ isSlotMode ? "Slots" : "Assets" }}
+        </span>
+        <UButton
+          icon="i-lucide-refresh-cw"
+          variant="ghost"
+          color="neutral"
+          size="xs"
+          @click="manager.refresh()"
+        />
+      </header>
+
+      <!-- Search only in browse mode -->
+      <div v-if="!isSlotMode" class="p-2 border-b border-default shrink-0">
+        <UInput
+          v-model="search"
+          icon="i-lucide-search"
+          placeholder="Search assets..."
+          size="sm"
+          class="w-full"
+        />
+      </div>
+
+      <div class="flex-1 overflow-x-hidden">
+        <!-- Slot mode sidebar -->
+        <template v-if="isSlotMode && items">
+          <MLAssetManagerSlotCard
+            v-for="(slot, idx) in items"
+            :key="`${slot.label}-${idx}`"
+            :item="slot"
+            :asset="
+  getSlotAssetIds(slot).length ? manager.assets.value.get(getSlotAssetIds(slot)[0]) ?? null : null
+"
+            :count="getSlotAssetIds(slot).length"
+            :selected="selectedSlotIndex === idx"
+            :processing-stream="
+  getSlotAssetIds(slot).map((id2) => manager.processingStreams.get(id2)).find((s) => s)
+"
+            @click="selectSlot(idx)"
+          />
+        </template>
+
+        <!-- Browse mode sidebar -->
+        <template v-else>
+          <MLAssetManagerAssetList
+            :assets="filteredAssets"
+            :selected-asset-id="manager.selectedAssetId.value"
+            :loading="manager.loading.value"
+            :processing-streams="manager.processingStreams"
+            @select="selectAsset"
+          />
+        </template>
+      </div>
+    </aside>
+
+    <!-- Right card: Detail / Uploader -->
+    <main
+      class="flex-1 min-w-0 bg-default border border-default rounded-lg flex flex-col"
+    >
+      <!-- Multi-slot thumbnail strip -->
+      <div
+        v-if="
+  isSlotMode && selectedSlot && selectedSlotIsMulti && selectedSlotIds.length
+"
+        class="flex items-center gap-2 px-3 py-2 border-b border-default shrink-0 overflow-x-auto"
+      >
+        <button
+          v-for="id in selectedSlotIds"
+          :key="id"
+          type="button"
+          class="w-14 h-14 shrink-0 rounded-md border bg-elevated/40 overflow-hidden flex items-center justify-center transition relative"
+          :class="
+  !slotAddMode && manager.selectedAssetId.value === id ? 'border-primary ring-2 ring-primary' : 'border-default hover:border-muted'
+"
+          :title="manager.assets.value.get(id)?.original_filename ?? id"
+          @click="selectAssetInSlot(id)"
+        >
+          <img
+            v-if="manager.assets.value.get(id)?.previewUrl"
+            :src="manager.assets.value.get(id).previewUrl"
+            :alt="manager.assets.value.get(id)?.original_filename ?? ''"
+            class="w-full h-full object-cover"
+          >
+          <UIcon v-else name="i-lucide-file" class="text-muted text-lg" />
+          <span
+            v-if="manager.processingStreams.get(id)?.isProcessing.value"
+            class="absolute top-1 right-1 w-2 h-2 rounded-full bg-warning animate-pulse"
+          />
+        </button>
+        <button
+          type="button"
+          class="w-14 h-14 shrink-0 rounded-md border-2 border-dashed flex flex-col items-center justify-center text-muted hover:text-default hover:border-default transition"
+          :class="
+  slotAddMode ? 'border-primary text-primary' : 'border-default'
+"
+          title="Add more"
+          @click="startAddInSlot"
+        >
+          <UIcon name="i-lucide-plus" class="text-base" />
+          <span class="text-[9px] mt-0.5">Add</span>
+        </button>
+      </div>
+
+      <!-- Slot mode: persistent per-slot uploaders. Each visited slot keeps
+           its MLUploaderWidget mounted so in-flight uploads survive when the
+           user switches slots or views an asset detail. -->
+      <div
+        v-for="idx in visitedUploaderSlots"
+        v-show="showUploader && selectedSlotIndex === idx"
+        :key="`slot-uploader-${idx}`"
+        class="flex-1 overflow-y-auto p-6"
+      >
+        <div v-if="props.items?.[idx]" class="mb-4">
+          <h3 class="text-sm font-semibold text-default">
+            {{ props.items[idx].label }}
+          </h3>
+          <p class="text-xs text-muted mt-1">
+            {{
+              isMultiSlot(props.items[idx]) && (props.items[idx].assetIds?.length ?? 0) ? "Upload more files for this slot" : "Upload a file for this slot"
+            }}
+          </p>
+        </div>
+        <MLUploaderWidget
+          v-if="props.items?.[idx]"
+          :ref="(el) => {
+  uploaderRefs[idx] = el;
+}"
+          :model-value="uploaderModels[idx] || []"
+          :resource-type="props.items[idx].resourceType"
+          :collection-name="props.items[idx].collectionName"
+          @update:model-value="(v) => handleUploaderUpdate(idx, v)"
+        />
+      </div>
+
+      <!-- Asset detail -->
+      <div v-if="!showUploader && manager.selectedAsset.value" class="flex-1 min-h-0">
+        <MLAssetManagerAssetDetail
+          :asset="manager.selectedAsset.value"
+          :manager="manager"
+          :allow-reupload="isSlotMode"
+          @deleted="onSlotAssetDeleted"
+        />
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="!showUploader" class="flex-1 min-h-0 flex items-center justify-center">
+        <UEmpty
+          icon="i-lucide-mouse-pointer-click"
+          :title="isSlotMode ? 'Select a slot' : 'Select an asset'"
+          :description="
+  isSlotMode ? 'Choose a slot from the list to upload or view details.' : 'Choose an asset from the list to view its details.'
+"
+        />
+      </div>
+    </main>
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+import type { AssetSlot } from "../../index.js";
+type __VLS_Props = {
+    /** Browse mode: list of asset IDs */
+    assetIds?: string[];
+    /** Slot mode: structured items with labels and resource policies */
+    items?: AssetSlot[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:items": (items: AssetSlot[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:items"?: ((items: AssetSlot[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLPreviewProvider.d.vue.ts

@@ -0,0 +1,31 @@
+type __VLS_Props = {
+    assetId?: string | null;
+    fallbackSrc?: string | null;
+    autoRegister?: boolean;
+};
+declare var __VLS_1: {
+    asset: import("../types/preview.js").AssetPreview | undefined;
+    src: string | null;
+    broken: boolean;
+    forbidden: boolean;
+    loading: boolean;
+    renditions: import("..").DeliveryRendition[];
+    sources: import("../types/preview.js").AssetSource[];
+    thumbnailUrl: string | null;
+    status: string | null;
+    refresh: () => Promise<void>;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    autoRegister: boolean;
+}, {}, {}, {}, 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/MLPreviewProvider.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useMLAssetPreview } from "../composables/useMLAssetPreview";
+const props = defineProps({
+  assetId: { type: [String, null], required: false },
+  fallbackSrc: { type: [String, null], required: false },
+  autoRegister: { type: Boolean, required: false, default: true }
+});
+const assetsStore = useMLAssetPreview();
+const asset = computed(
+  () => props.assetId ? assetsStore.getAsset(props.assetId) : void 0
+);
+const src = computed(() => {
+  if (asset.value?.url) return asset.value.url;
+  return props.fallbackSrc ?? null;
+});
+const broken = computed(() => assetsStore.isBroken(props.assetId));
+const forbidden = computed(() => assetsStore.isForbidden(props.assetId));
+const loading = computed(() => assetsStore.loading.value);
+const renditions = computed(() => asset.value?.renditions ?? []);
+const sources = computed(() => asset.value?.sources ?? []);
+const thumbnailUrl = computed(() => sources.value.find((s) => s.renditionType === "thumbnail")?.url ?? null);
+const status = computed(() => asset.value?.metadata?.status ?? null);
+const refresh = async () => {
+  if (!props.assetId || import.meta.server) return;
+  await assetsStore.ensureAssets([props.assetId]);
+};
+watch(
+  () => props.assetId,
+  (id) => {
+    if (!props.autoRegister || !id || import.meta.server) return;
+    assetsStore.register(id);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <slot
+    :asset="asset"
+    :src="src"
+    :broken="broken"
+    :forbidden="forbidden"
+    :loading="loading"
+    :renditions="renditions"
+    :sources="sources"
+    :thumbnailUrl="thumbnailUrl"
+    :status="status"
+    :refresh="refresh"
+  />
+</template>