nuxt-media-library 0.0.44

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

@@ -0,0 +1,251 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useMLResourcePolicy } from "../../index";
+import { buildAcceptAttribute, isFileMimeAllowed } from "../../composables/resourcePolicy/mimeUtils";
+const props = defineProps({
+  resourceType: { type: String, required: true },
+  collectionName: { type: [String, null], required: false },
+  chunkUploader: { type: [Object, String], required: false },
+  titleText: { type: String, required: false, default: "Upload your files" },
+  hintText: { type: String, required: false, default: "Drag and drop your files here" },
+  clickText: { type: String, required: false, default: "(or click to select files)" },
+  ariaLabelText: { type: String, required: false, default: "Upload files by clicking or dragging them here" },
+  emptyStateIconText: { type: String, required: false, default: "\u2B06" },
+  policyErrorText: { type: String, required: false, default: "Failed to load resource policy." },
+  policyLoadingText: { type: String, required: false, default: "Resource policy not loaded yet." },
+  uploadErrorText: { type: String, required: false, default: "Upload failed. Please try again." },
+  singleFileErrorText: { type: String, required: false, default: "Only one file is allowed for this policy." },
+  fileTypeErrorText: { type: String, required: false, default: "File type is not allowed." },
+  fileTooLargeText: { type: String, required: false, default: "File is larger than the maximum allowed size." },
+  fileTooSmallText: { type: String, required: false, default: "File is smaller than the minimum allowed size." }
+});
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const uploading = ref(false);
+const errorMessage = ref(null);
+const policy = ref(null);
+const policyError = ref(null);
+const fileInput = ref(null);
+const isDragging = ref(false);
+const items = ref([]);
+async function loadPolicy(resourceType, collectionName, forceRefresh = false) {
+  if (!forceRefresh) {
+    policy.value = null;
+    items.value = [];
+    uploading.value = false;
+  }
+  policyError.value = null;
+  errorMessage.value = null;
+  if (!resourceType) return;
+  try {
+    const resourcePolicy = useMLResourcePolicy();
+    const fetcher = forceRefresh ? resourcePolicy.refreshByTypeCollection : resourcePolicy.findByTypeCollection;
+    policy.value = await fetcher(resourceType, collectionName);
+  } catch (err) {
+    console.error("Failed to load resource policy", err);
+    policyError.value = props.policyErrorText;
+  }
+}
+const onVisibilityChange = () => {
+  if (typeof document === "undefined") return;
+  if (document.visibilityState === "visible" && props.resourceType) {
+    loadPolicy(props.resourceType, props.collectionName, true);
+  }
+};
+onMounted(() => {
+  loadPolicy(props.resourceType, props.collectionName, true);
+  if (typeof document !== "undefined") {
+    document.addEventListener("visibilitychange", onVisibilityChange);
+  }
+});
+onBeforeUnmount(() => {
+  if (typeof document !== "undefined") {
+    document.removeEventListener("visibilitychange", onVisibilityChange);
+  }
+});
+watch(
+  () => [props.resourceType, props.collectionName],
+  ([newType, newCollection]) => {
+    if (newType) loadPolicy(newType, newCollection, true);
+  }
+);
+const acceptTypes = computed(() => {
+  const allowed = policy.value?.file_constraints?.allowed_mime_types;
+  return allowed?.length ? buildAcceptAttribute(allowed) : void 0;
+});
+const allowMultiple = computed(() => {
+  const allow = policy.value?.file_constraints?.allow_multiple;
+  return Boolean(allow);
+});
+const validateFile = (file) => {
+  const constraints = policy.value?.file_constraints;
+  if (!constraints) return null;
+  if (constraints.allowed_mime_types?.length) {
+    if (!isFileMimeAllowed(file, constraints.allowed_mime_types)) {
+      return props.fileTypeErrorText;
+    }
+  }
+  if (constraints.max_size_bytes != null && file.size > constraints.max_size_bytes) {
+    return props.fileTooLargeText;
+  }
+  if (constraints.min_size_bytes != null && file.size < constraints.min_size_bytes) {
+    return props.fileTooSmallText;
+  }
+  return null;
+};
+const triggerFileSelect = () => fileInput.value?.click();
+const handleFiles = async (fileList) => {
+  const list = Array.from(fileList);
+  if (!allowMultiple.value && list.length > 1) {
+    errorMessage.value = props.singleFileErrorText;
+    return;
+  }
+  const selected = allowMultiple.value ? list : list.slice(0, 1);
+  if (!selected.length) return;
+  if (policyError.value) {
+    errorMessage.value = policyError.value;
+    return;
+  }
+  if (!policy.value) {
+    errorMessage.value = props.policyLoadingText;
+    return;
+  }
+  for (const file of selected) {
+    const validationError = validateFile(file);
+    if (validationError) {
+      errorMessage.value = validationError;
+      return;
+    }
+  }
+  items.value = selected.map((file) => ({
+    id: `${Date.now()}-${file.name}-${Math.random().toString(16).slice(2)}`,
+    file,
+    status: "uploading"
+  }));
+  errorMessage.value = null;
+  uploading.value = true;
+};
+const onPick = (e) => {
+  const input = e.target;
+  if (!input?.files?.length) return;
+  handleFiles(input.files);
+  input.value = "";
+};
+const onDrop = (event) => {
+  event.preventDefault();
+  isDragging.value = false;
+  if (event.dataTransfer?.files?.length) {
+    handleFiles(event.dataTransfer.files);
+  }
+};
+const checkAllDone = () => {
+  if (items.value.every((i) => i.status !== "pending" && i.status !== "uploading")) {
+    uploading.value = false;
+  }
+};
+const onItemError = (item, msg) => {
+  item.status = "error";
+  item.message = msg;
+  errorMessage.value = msg;
+  uploading.value = false;
+};
+const onItemCanceled = (item) => {
+  item.status = "error";
+  uploading.value = false;
+};
+const onItemRemove = (item) => {
+  const idx = items.value.findIndex((i) => i.id === item.id);
+  if (idx >= 0) items.value.splice(idx, 1);
+  if (items.value.length === 0) uploading.value = false;
+  updateModelValue();
+};
+const updateModelValue = () => {
+  const assetIds = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of items.value) {
+    if (!item.assetIds?.length) continue;
+    for (const id of item.assetIds) {
+      if (seen.has(id)) continue;
+      seen.add(id);
+      assetIds.push(id);
+    }
+  }
+  model.value = assetIds;
+};
+const onItemUploadedWithAssets = (item, assetIds) => {
+  item.status = "uploaded";
+  item.assetIds = assetIds;
+  checkAllDone();
+  updateModelValue();
+};
+const reset = () => {
+  items.value = [];
+  uploading.value = false;
+  errorMessage.value = null;
+  model.value = [];
+};
+const isBusy = () => uploading.value || items.value.some(
+  (i) => i.status === "pending" || i.status === "uploading"
+);
+defineExpose({ reset, isBusy });
+</script>
+
+<template>
+  <div class="relative ml-uploader-root">
+    <MLUploaderPolicyPopover :policy="policy"/>
+    <div
+      class=" flex flex-col items-center justify-center w-full p-6 mx-auto bg-default border-2 border-dashed rounded-lg shadow-md transition-all duration-300"
+      :class="isDragging ? 'border-primary bg-[color-mix(in srgb, var(--ui-primary) 12%, var(--ui-bg))]' : 'border-[var(--ui-border)]'"
+      role="button"
+      tabindex="0"
+      :aria-label="props.ariaLabelText"
+      @dragover.prevent="isDragging = true"
+      @dragleave="isDragging = false"
+      @drop.prevent="onDrop"
+      @click="triggerFileSelect"
+    >
+
+      <h2 class="text-lg font-medium text-default mb-4">{{ props.titleText }}</h2>
+
+      <div
+        v-if="items.length === 0 && !isDragging"
+        class="flex flex-col items-center justify-center w-full h-40 cursor-pointer hover:bg-muted rounded-lg"
+      >
+        <div class="w-12 h-12 mb-2 text-default">{{ props.emptyStateIconText }}</div>
+        <p class="text-sm text-default">{{ props.hintText }}</p>
+        <p class="text-xs text-default">{{ props.clickText }}</p>
+      </div>
+
+      <div v-else
+           class="w-full flex flex-wrap justify-center items-center gap-2 hover:bg-muted rounded-lg p-2">
+        <MLUploaderItem
+          v-for="item in items"
+          :key="item.id"
+          :file="item.file"
+          :policy="policy"
+          :resource-type="props.resourceType"
+          :collection-name="props.collectionName"
+          :chunk-uploader="props.chunkUploader"
+          :upload-failed-text="props.uploadErrorText"
+          @uploaded="(assetIds) => onItemUploadedWithAssets(item, assetIds)"
+          @error="(msg) => onItemError(item, msg)"
+          @canceled="() => onItemCanceled(item)"
+          @remove="() => onItemRemove(item)"
+        />
+      </div>
+
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        :multiple="allowMultiple"
+        :accept="acceptTypes"
+        @change="onPick"
+      />
+    </div>
+  </div>
+
+  <div class="space-y-2 mt-3">
+    <div v-if="policyError" class="text-sm text-(--ui-danger)">{{ policyError }}</div>
+    <div v-if="errorMessage" class="text-sm text-(--ui-danger)">{{ errorMessage }}</div>
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+type __VLS_Props = {
+    resourceType: string;
+    collectionName?: string | null;
+    chunkUploader?: Record<string, any> | string;
+    titleText?: string;
+    hintText?: string;
+    clickText?: string;
+    ariaLabelText?: string;
+    emptyStateIconText?: string;
+    policyErrorText?: string;
+    policyLoadingText?: string;
+    uploadErrorText?: string;
+    singleFileErrorText?: string;
+    fileTypeErrorText?: string;
+    fileTooLargeText?: string;
+    fileTooSmallText?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    reset: () => void;
+    isBusy: () => boolean;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {
+    fileTypeErrorText: string;
+    fileTooLargeText: string;
+    fileTooSmallText: string;
+    titleText: string;
+    hintText: string;
+    clickText: string;
+    ariaLabelText: string;
+    emptyStateIconText: string;
+    policyErrorText: string;
+    policyLoadingText: string;
+    uploadErrorText: string;
+    singleFileErrorText: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/composables/resourcePolicy/mimeUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const getFileExtension: (file: File) => string;
+export declare const inferMimeFromExtension: (ext: string) => string[];
+export declare const isFileMimeAllowed: (file: File, allowedMimeTypes: string[]) => boolean;
+export declare const buildAcceptAttribute: (allowedMimeTypes: string[]) => string | undefined;

package/dist/runtime/composables/resourcePolicy/mimeUtils.js

@@ -0,0 +1,71 @@
+const MIME_TO_EXTENSIONS = {
+  "application/zip": ["zip"],
+  "application/x-zip-compressed": ["zip"],
+  "application/x-7z-compressed": ["7z"],
+  "application/x-rar-compressed": ["rar"],
+  "application/vnd.rar": ["rar"],
+  "application/x-tar": ["tar"],
+  "application/gzip": ["gz", "gzip"],
+  "application/pdf": ["pdf"],
+  "application/json": ["json"],
+  "application/msword": ["doc"],
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ["docx"],
+  "application/vnd.ms-excel": ["xls"],
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": ["xlsx"],
+  "application/vnd.ms-powerpoint": ["ppt"],
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": ["pptx"],
+  "text/plain": ["txt"],
+  "text/csv": ["csv"],
+  "text/html": ["html", "htm"],
+  "text/markdown": ["md", "markdown"],
+  "image/jpeg": ["jpg", "jpeg"],
+  "image/png": ["png"],
+  "image/gif": ["gif"],
+  "image/webp": ["webp"],
+  "image/svg+xml": ["svg"],
+  "image/heic": ["heic"],
+  "image/heif": ["heif"],
+  "video/mp4": ["mp4", "m4v"],
+  "video/webm": ["webm"],
+  "video/quicktime": ["mov"],
+  "video/x-matroska": ["mkv"],
+  "audio/mpeg": ["mp3"],
+  "audio/wav": ["wav"],
+  "audio/x-wav": ["wav"],
+  "audio/ogg": ["ogg"],
+  "audio/mp4": ["m4a"],
+  "audio/aac": ["aac"]
+};
+export const getFileExtension = (file) => {
+  const name = file.name || "";
+  const dot = name.lastIndexOf(".");
+  if (dot < 0 || dot === name.length - 1) return "";
+  return name.slice(dot + 1).toLowerCase();
+};
+export const inferMimeFromExtension = (ext) => {
+  if (!ext) return [];
+  const matches = [];
+  for (const [mime, extensions] of Object.entries(MIME_TO_EXTENSIONS)) {
+    if (extensions.includes(ext)) matches.push(mime);
+  }
+  return matches;
+};
+export const isFileMimeAllowed = (file, allowedMimeTypes) => {
+  if (!allowedMimeTypes.length) return true;
+  const allowed = new Set(allowedMimeTypes);
+  if (file.type && allowed.has(file.type)) return true;
+  if (file.type) return false;
+  const inferred = inferMimeFromExtension(getFileExtension(file));
+  return inferred.some((m) => allowed.has(m));
+};
+export const buildAcceptAttribute = (allowedMimeTypes) => {
+  if (!allowedMimeTypes.length) return void 0;
+  const tokens = /* @__PURE__ */ new Set();
+  for (const mime of allowedMimeTypes) {
+    tokens.add(mime);
+    for (const ext of MIME_TO_EXTENSIONS[mime] || []) {
+      tokens.add(`.${ext}`);
+    }
+  }
+  return Array.from(tokens).join(",");
+};

package/dist/runtime/composables/resourcePolicy/useMLResourcePolicy.d.ts

@@ -0,0 +1,17 @@
+import type { CreateResourcePolicyRequest, ResourcePolicyListQuery, ResourcePolicyResponse, UpdateResourcePolicyRequest } from '../../types/resourcePolicy.js';
+type HeadersInput = Record<string, string> | (() => Record<string, string>);
+interface UseResourcePolicyOptions {
+    headers?: HeadersInput;
+}
+export declare const useMLResourcePolicy: (options?: UseResourcePolicyOptions) => {
+    createOrUpdate: (data: CreateResourcePolicyRequest) => Promise<ResourcePolicyResponse>;
+    list: (query?: ResourcePolicyListQuery) => Promise<ResourcePolicyResponse[]>;
+    get: (policyId: string) => Promise<ResourcePolicyResponse>;
+    findByTypeCollection: (resourceType: string, collectionName?: string | null) => Promise<ResourcePolicyResponse>;
+    refreshByTypeCollection: (resourceType: string, collectionName?: string | null) => Promise<ResourcePolicyResponse>;
+    update: (policyId: string, data: UpdateResourcePolicyRequest) => Promise<ResourcePolicyResponse>;
+    remove: (policyId: string, hard?: boolean) => Promise<undefined>;
+    invalidate: (policy: Pick<ResourcePolicyResponse, "id" | "resource_type" | "collection_name">) => void;
+    invalidateAll: () => void;
+};
+export {};

package/dist/runtime/composables/resourcePolicy/useMLResourcePolicy.js

@@ -0,0 +1,150 @@
+import { useRuntimeConfig } from "#app";
+import { $fetch } from "ofetch";
+const POLICY_CACHE_TTL_MS = 6e4;
+const policyCache = /* @__PURE__ */ new Map();
+const policyByTypeCache = /* @__PURE__ */ new Map();
+const typeCollectionKey = (resourceType, collectionName) => `${resourceType}::${collectionName ?? ""}`;
+const readCache = (map, key) => {
+  const entry = map.get(key);
+  if (!entry) return void 0;
+  if (entry.expiresAt <= Date.now()) {
+    map.delete(key);
+    return void 0;
+  }
+  return entry.value;
+};
+const writeCache = (map, key, value) => {
+  map.set(key, { value, expiresAt: Date.now() + POLICY_CACHE_TTL_MS });
+};
+const invalidatePolicy = (policy) => {
+  policyCache.delete(policy.id);
+  policyByTypeCache.delete(typeCollectionKey(policy.resource_type, policy.collection_name));
+};
+const invalidateAllPolicies = () => {
+  policyCache.clear();
+  policyByTypeCache.clear();
+};
+const camelToSnake = (key) => key.replace(/[A-Z]/g, (c) => `_${c.toLowerCase()}`);
+const normalizeKeysToSnake = (value) => {
+  if (Array.isArray(value)) return value.map(normalizeKeysToSnake);
+  if (value && typeof value === "object" && value.constructor === Object) {
+    const out = {};
+    for (const [k, v] of Object.entries(value)) {
+      out[camelToSnake(k)] = normalizeKeysToSnake(v);
+    }
+    return out;
+  }
+  return value;
+};
+const normalizePolicyResponse = (policy) => {
+  if (!policy || typeof policy !== "object") return policy;
+  return {
+    ...policy,
+    file_constraints: normalizeKeysToSnake(policy.file_constraints),
+    permission_requirements: normalizeKeysToSnake(policy.permission_requirements),
+    processing_config: normalizeKeysToSnake(policy.processing_config)
+  };
+};
+const resolveHeaders = (headers) => {
+  if (!headers) return {};
+  return typeof headers === "function" ? headers() : headers;
+};
+export const useMLResourcePolicy = (options = {}) => {
+  const config = useRuntimeConfig();
+  const proxyPrefix = "/api/media-library/manage/resource-policies";
+  const publicHeaders = config.public?.mediaLibrary?.headers;
+  const headers = {
+    ...resolveHeaders(publicHeaders),
+    ...resolveHeaders(options.headers)
+  };
+  const request = (path, init = {}) => {
+    const initHeaders = init.headers instanceof Headers ? Object.fromEntries(init.headers.entries()) : init.headers || {};
+    return $fetch(path, {
+      headers: {
+        ...headers,
+        ...initHeaders
+      },
+      ...init
+    });
+  };
+  const fetchByTypeCollection = async (resourceType, collectionName) => {
+    const policies = await request(proxyPrefix, {
+      method: "GET",
+      query: { resource_type: resourceType, is_active: true }
+    });
+    const target = collectionName ?? null;
+    const match = policies.find((p) => (p.collection_name ?? null) === target);
+    if (!match) {
+      throw new Error(
+        `No active resource policy found for resource_type="${resourceType}" collection_name="${target ?? ""}"`
+      );
+    }
+    return normalizePolicyResponse(match);
+  };
+  return {
+    createOrUpdate: async (data) => {
+      const policy = normalizePolicyResponse(await request(proxyPrefix, {
+        method: "POST",
+        body: data
+      }));
+      invalidatePolicy(policy);
+      return policy;
+    },
+    list: async (query) => {
+      const policies = await request(proxyPrefix, {
+        method: "GET",
+        query
+      });
+      return policies.map(normalizePolicyResponse);
+    },
+    get: async (policyId) => {
+      const cached = readCache(policyCache, policyId);
+      if (cached) return cached;
+      const policy = normalizePolicyResponse(await request(`${proxyPrefix}/${policyId}`, {
+        method: "GET"
+      }));
+      writeCache(policyCache, policyId, policy);
+      return policy;
+    },
+    findByTypeCollection: async (resourceType, collectionName) => {
+      const key = typeCollectionKey(resourceType, collectionName);
+      const cached = readCache(policyByTypeCache, key);
+      if (cached) return cached;
+      const match = await fetchByTypeCollection(resourceType, collectionName);
+      writeCache(policyByTypeCache, key, match);
+      writeCache(policyCache, match.id, match);
+      return match;
+    },
+    refreshByTypeCollection: async (resourceType, collectionName) => {
+      const key = typeCollectionKey(resourceType, collectionName);
+      policyByTypeCache.delete(key);
+      const match = await fetchByTypeCollection(resourceType, collectionName);
+      writeCache(policyByTypeCache, key, match);
+      writeCache(policyCache, match.id, match);
+      return match;
+    },
+    update: async (policyId, data) => {
+      const policy = normalizePolicyResponse(await request(`${proxyPrefix}/${policyId}`, {
+        method: "PUT",
+        body: data
+      }));
+      invalidatePolicy(policy);
+      return policy;
+    },
+    remove: async (policyId, hard = false) => {
+      const cached = policyCache.get(policyId)?.value;
+      const result = await request(`${proxyPrefix}/${policyId}`, {
+        method: "DELETE",
+        query: { hard }
+      });
+      if (cached) {
+        invalidatePolicy(cached);
+      } else {
+        policyCache.delete(policyId);
+      }
+      return result;
+    },
+    invalidate: invalidatePolicy,
+    invalidateAll: invalidateAllPolicies
+  };
+};

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

@@ -0,0 +1,13 @@
+import { type Ref } from 'vue';
+declare function formatDuration(ms: number): string;
+/**
+ * Live-ticking elapsed time for running processing steps.
+ *
+ * While `isRunning` is true, `elapsed` updates every second.
+ * When `isRunning` becomes false, the timer stops and shows the final value.
+ */
+export declare function useElapsedTimer(startedAt: Ref<string | null>, isRunning: Ref<boolean>): {
+    elapsed: Ref<string, string>;
+    formatDuration: typeof formatDuration;
+};
+export {};

package/dist/runtime/composables/useElapsedTimer.js

@@ -0,0 +1,46 @@
+import { ref, watch, onUnmounted } from "vue";
+function formatDuration(ms) {
+  if (ms < 0) ms = 0;
+  const secs = Math.floor(ms / 1e3);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  return `${mins}m ${secs % 60}s`;
+}
+function parseUtc(iso) {
+  if (!iso.endsWith("Z") && !iso.includes("+") && !/\d{2}:\d{2}$/.test(iso.slice(-6))) {
+    return (/* @__PURE__ */ new Date(iso + "Z")).getTime();
+  }
+  return new Date(iso).getTime();
+}
+export function useElapsedTimer(startedAt, isRunning) {
+  const elapsed = ref("");
+  let timer = null;
+  function tick() {
+    if (!startedAt.value) {
+      elapsed.value = "";
+      return;
+    }
+    const start = parseUtc(startedAt.value);
+    elapsed.value = formatDuration(Date.now() - start);
+  }
+  function startTimer() {
+    stopTimer();
+    tick();
+    timer = setInterval(tick, 1e3);
+  }
+  function stopTimer() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+  watch(isRunning, (running) => {
+    if (running) startTimer();
+    else {
+      stopTimer();
+      tick();
+    }
+  }, { immediate: true });
+  onUnmounted(stopTimer);
+  return { elapsed, formatDuration };
+}

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

@@ -0,0 +1,31 @@
+import { type Ref } from 'vue';
+import type { AssetDetail } from '../types/asset.js';
+export type AssetKind = 'image' | 'video' | 'audio' | 'document' | 'web_app' | 'other' | 'archive' | 'font' | 'model_3d' | 'image_batch';
+export type AssetStatus = 'pending' | 'uploaded' | 'processing' | 'awaiting_input' | 'ready' | 'failed' | 'archived' | 'deleted';
+export interface AssetLibraryFilters {
+    kind?: AssetKind | null;
+    status?: AssetStatus | null;
+    query?: string | null;
+    resourcePolicyId?: string | null;
+    /** When provided, resolves these specific asset IDs instead of listing. Pagination is ignored. */
+    ids?: string[] | null;
+}
+export interface UseMLAssetLibraryOptions {
+    filters?: AssetLibraryFilters;
+    pageSize?: number;
+    /** Set to false to skip the initial fetch. Default: true. */
+    immediate?: boolean;
+}
+export interface UseMLAssetLibraryReturn {
+    items: Ref<AssetDetail[]>;
+    total: Ref<number>;
+    page: Ref<number>;
+    pageSize: Ref<number>;
+    loading: Ref<boolean>;
+    error: Ref<string | null>;
+    filters: Ref<AssetLibraryFilters>;
+    fetch: () => Promise<void>;
+    setPage: (page: number) => void;
+    setFilters: (filters: Partial<AssetLibraryFilters>) => void;
+}
+export declare function useMLAssetLibrary(options?: UseMLAssetLibraryOptions): UseMLAssetLibraryReturn;

package/dist/runtime/composables/useMLAssetLibrary.js

@@ -0,0 +1,53 @@
+import { ref, watch } from "vue";
+import { $fetch } from "ofetch";
+export function useMLAssetLibrary(options = {}) {
+  const items = ref([]);
+  const total = ref(0);
+  const page = ref(1);
+  const pageSize = ref(options.pageSize ?? 20);
+  const loading = ref(false);
+  const error = ref(null);
+  const filters = ref(options.filters ?? {});
+  async function fetch() {
+    loading.value = true;
+    error.value = null;
+    try {
+      if (filters.value.ids?.length) {
+        const result = await $fetch("/api/media-library/manage/assets/resolve", {
+          method: "POST",
+          body: { assetIds: filters.value.ids }
+        });
+        items.value = (result.items ?? []).flatMap((i) => i.status === "ok" && i.asset ? [i.asset] : []);
+        total.value = items.value.length;
+      } else {
+        const query = {
+          page: String(page.value),
+          pageSize: String(pageSize.value)
+        };
+        if (filters.value.kind) query.kind = filters.value.kind;
+        if (filters.value.status) query.status = filters.value.status;
+        if (filters.value.query) query.query = filters.value.query;
+        if (filters.value.resourcePolicyId) query.resourcePolicyId = filters.value.resourcePolicyId;
+        const result = await $fetch(
+          "/api/media-library/manage/assets",
+          { query }
+        );
+        items.value = result.items ?? [];
+        total.value = result.total ?? 0;
+      }
+    } catch (err) {
+      error.value = err?.message ?? "Failed to load assets";
+    } finally {
+      loading.value = false;
+    }
+  }
+  function setPage(p) {
+    page.value = p;
+  }
+  function setFilters(f) {
+    filters.value = { ...filters.value, ...f };
+    page.value = 1;
+  }
+  watch([filters, page], () => fetch(), { deep: true, immediate: options.immediate !== false });
+  return { items, total, page, pageSize, loading, error, filters, fetch, setPage, setFilters };
+}