nuxt-media-library 0.0.48 → 0.0.49

package/dist/runtime/composables/useMLMediaUpload.js

@@ -0,0 +1,153 @@
+import { onBeforeUnmount, reactive, ref, watch } from "vue";
+import { $fetch } from "ofetch";
+import { ChunkUploader } from "../utils/uploader/uploader.js";
+import { kindForFile } from "../utils/fileAccept.js";
+import { useMLChunkUploader } from "./useMLChunkUploader.js";
+import { useMLProcessingStatus } from "./useMLProcessingStatus.js";
+let seq = 0;
+export function useMLMediaUpload(defaults = {}) {
+  const base = useMLChunkUploader(defaults.chunkUploader).config;
+  const cfg = base.proxyUploads ? { ...base, baseURL: "" } : base;
+  const { track } = useMLProcessingStatus();
+  const uploads = ref([]);
+  const cleanups = /* @__PURE__ */ new Map();
+  function start(file, overrides = {}) {
+    const opts = { ...defaults, ...overrides };
+    const kind = opts.kind ?? kindForFile(file);
+    const isVisual = file.type.startsWith("image/") || file.type.startsWith("video/");
+    const localPreview = isVisual && typeof URL !== "undefined" ? URL.createObjectURL(file) : null;
+    let uploader = null;
+    let stream = null;
+    let stopWatch = null;
+    let resolveCreated;
+    const upload = reactive({
+      key: `upload-${++seq}`,
+      file,
+      kind,
+      localPreview,
+      phase: "uploading",
+      progress: 0,
+      assetId: null,
+      error: null,
+      cancel,
+      retry,
+      created: new Promise((r) => {
+        resolveCreated = r;
+      })
+    });
+    function finish(phase, err = null) {
+      upload.phase = phase;
+      upload.error = err;
+      if (phase === "ready") upload.progress = 100;
+      stopWatch?.();
+      stopWatch = null;
+      stream?.close();
+      stream = null;
+    }
+    async function checkStatus() {
+      if (!upload.assetId) return null;
+      try {
+        const res = await $fetch(
+          "/api/media-library/manage/assets/resolve",
+          { method: "POST", body: { assetIds: [upload.assetId] } }
+        );
+        return res.items?.[0]?.asset?.status?.toLowerCase() ?? null;
+      } catch {
+        return null;
+      }
+    }
+    async function followProcessing(assetId) {
+      upload.phase = "processing";
+      upload.progress = null;
+      stream = track(assetId);
+      stopWatch = watch(
+        () => [stream?.progress.value, stream?.isComplete.value, stream?.isFailed.value, stream?.error.value],
+        async ([progress, complete, failed, dropped]) => {
+          if (upload.phase !== "processing") return;
+          if (complete) return finish("ready");
+          if (failed) return finish("failed", "Processing failed");
+          if (dropped) {
+            const status2 = await checkStatus();
+            if (status2 === "ready") finish("ready");
+            else if (status2 === "failed") finish("failed", "Processing failed");
+            else upload.progress = null;
+            return;
+          }
+          upload.progress = progress ? progress : null;
+        }
+      );
+      const status = await checkStatus();
+      if (upload.phase !== "processing") return;
+      if (status === "ready") finish("ready");
+      else if (status === "failed") finish("failed", "Processing failed");
+    }
+    async function run() {
+      uploader = new ChunkUploader(cfg);
+      upload.phase = "uploading";
+      upload.progress = 0;
+      upload.error = null;
+      const create = {
+        kind,
+        visibility: opts.visibility,
+        processing_config: opts.processingConfig,
+        collection_name: opts.collectionName ?? null,
+        ...opts.profile ? { profile: opts.profile } : {}
+      };
+      try {
+        const res = await uploader.uploadFile(file, {
+          create,
+          onProgress: (p) => {
+            upload.progress = p.percent;
+          }
+        });
+        const ids = Array.isArray(res?.finalize?.asset_ids) ? res.finalize.asset_ids : res?.finalize?.asset_id ? [res.finalize.asset_id] : [];
+        const assetId = ids[0] ?? null;
+        if (!assetId) {
+          finish("failed", "The upload finished but no file was created");
+          resolveCreated(null);
+          return;
+        }
+        upload.assetId = assetId;
+        resolveCreated(assetId);
+        await followProcessing(assetId);
+      } catch (err) {
+        if (upload.phase === "canceled") return;
+        finish("failed", err?.data?.message ?? err?.message ?? "Upload failed");
+        if (!upload.assetId) resolveCreated(null);
+      }
+    }
+    function cancel() {
+      if (upload.phase !== "uploading" && upload.phase !== "processing") return;
+      uploader?.abort();
+      finish("canceled");
+      if (!upload.assetId) resolveCreated(null);
+    }
+    function retry() {
+      if (upload.phase !== "failed") return;
+      if (upload.assetId) {
+        void followProcessing(upload.assetId);
+        return;
+      }
+      void run();
+    }
+    cleanups.set(upload.key, () => {
+      uploader?.abort();
+      stopWatch?.();
+      stream?.close();
+      if (localPreview) URL.revokeObjectURL(localPreview);
+    });
+    uploads.value = [...uploads.value, upload];
+    void run();
+    return upload;
+  }
+  function remove(upload) {
+    cleanups.get(upload.key)?.();
+    cleanups.delete(upload.key);
+    uploads.value = uploads.value.filter((u) => u.key !== upload.key);
+  }
+  onBeforeUnmount(() => {
+    cleanups.forEach((fn) => fn());
+    cleanups.clear();
+  });
+  return { uploads, start, remove };
+}

package/dist/runtime/index.d.ts

@@ -6,8 +6,19 @@ export * from './composables/useMLAssetManager.js';
 export * from './composables/useMLAssetLibrary.js';
 export * from './composables/useMLAssetManagerPreview.js';
 export * from './composables/useElapsedTimer.js';
+export * from './composables/useMLMediaAssets.js';
+export * from './composables/useMLMediaUpload.js';
+export * from './composables/useMLMediaField.js';
+export * from './composables/useMLMediaBrowse.js';
+export * from './composables/useMLFilePicker.js';
+export * from './composables/useMLMediaEditor.js';
+export * from './composables/useMLMediaGallery.js';
 export * from './composables/resourcePolicy/useMLResourcePolicy.js';
 export * from './types/resourcePolicy.js';
 export * from './types/uploader.js';
 export * from './types/asset.js';
 export * from './utils/uploader/uploader.js';
+export * from './utils/assetDisplay.js';
+export * from './utils/assetThumbnail.js';
+export * from './utils/assetFormat.js';
+export * from './utils/fileAccept.js';

package/dist/runtime/index.js

@@ -6,8 +6,19 @@ export * from "./composables/useMLAssetManager.js";
 export * from "./composables/useMLAssetLibrary.js";
 export * from "./composables/useMLAssetManagerPreview.js";
 export * from "./composables/useElapsedTimer.js";
+export * from "./composables/useMLMediaAssets.js";
+export * from "./composables/useMLMediaUpload.js";
+export * from "./composables/useMLMediaField.js";
+export * from "./composables/useMLMediaBrowse.js";
+export * from "./composables/useMLFilePicker.js";
+export * from "./composables/useMLMediaEditor.js";
+export * from "./composables/useMLMediaGallery.js";
 export * from "./composables/resourcePolicy/useMLResourcePolicy.js";
 export * from "./types/resourcePolicy.js";
 export * from "./types/uploader.js";
 export * from "./types/asset.js";
 export * from "./utils/uploader/uploader.js";
+export * from "./utils/assetDisplay.js";
+export * from "./utils/assetThumbnail.js";
+export * from "./utils/assetFormat.js";
+export * from "./utils/fileAccept.js";

package/dist/runtime/utils/assetDisplay.d.ts

@@ -0,0 +1,8 @@
+export type AssetBadgeColor = 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
+export interface AssetDisplayMeta {
+    label: string;
+    color: AssetBadgeColor;
+    icon: string;
+}
+export declare function assetKindMeta(kind: string | null | undefined): AssetDisplayMeta;
+export declare function assetStatusMeta(status: string | null | undefined): AssetDisplayMeta;

package/dist/runtime/utils/assetDisplay.js

@@ -0,0 +1,29 @@
+const KINDS = {
+  image: { label: "Image", color: "info", icon: "i-lucide-image" },
+  image_batch: { label: "Image set", color: "info", icon: "i-lucide-images" },
+  video: { label: "Video", color: "secondary", icon: "i-lucide-film" },
+  audio: { label: "Audio", color: "warning", icon: "i-lucide-music" },
+  document: { label: "Document", color: "success", icon: "i-lucide-file-text" },
+  archive: { label: "Archive", color: "neutral", icon: "i-lucide-archive" },
+  font: { label: "Font", color: "neutral", icon: "i-lucide-type" },
+  model_3d: { label: "3D", color: "neutral", icon: "i-lucide-box" },
+  web_app: { label: "Web app", color: "neutral", icon: "i-lucide-globe" },
+  other: { label: "File", color: "neutral", icon: "i-lucide-file" }
+};
+const STATUSES = {
+  pending: { label: "Pending", color: "neutral", icon: "i-lucide-clock" },
+  uploaded: { label: "Uploaded", color: "info", icon: "i-lucide-cloud-check" },
+  processing: { label: "Processing", color: "warning", icon: "i-lucide-loader-circle" },
+  ready: { label: "Ready", color: "success", icon: "i-lucide-circle-check" },
+  failed: { label: "Failed", color: "error", icon: "i-lucide-circle-alert" },
+  archived: { label: "Archived", color: "neutral", icon: "i-lucide-archive" }
+};
+const titleCase = (s) => s.replace(/_/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+export function assetKindMeta(kind) {
+  const key = (kind ?? "").toLowerCase();
+  return KINDS[key] ?? { ...KINDS.other, label: key ? titleCase(key) : KINDS.other.label };
+}
+export function assetStatusMeta(status) {
+  const key = (status ?? "").toLowerCase();
+  return STATUSES[key] ?? { label: key ? titleCase(key) : "Unknown", color: "neutral", icon: "i-lucide-circle-help" };
+}

package/dist/runtime/utils/assetFormat.d.ts

@@ -0,0 +1,30 @@
+import type { AssetDetail, DeliveryAsset } from '../types/asset.js';
+type AnyAsset = AssetDetail | DeliveryAsset;
+/** 1536 → "1.5 KB". Binary units, one decimal above bytes. */
+export declare function formatBytes(bytes: number | null | undefined): string;
+/** 32 → "0:32", 2467 → "41:07", 3725 → "1:02:05". */
+export declare function formatDuration(seconds: number | null | undefined): string;
+/** "chair.Front.PNG" → "PNG". Empty when there is no extension. */
+export declare function fileExtension(name: string | null | undefined): string;
+/**
+ * Short date for lists: "Sep 25", or "Sep 25, 2024" outside the current year.
+ * Locale and timezone are fixed by default so server and browser render the
+ * same text (otherwise SSR hydration mismatches).
+ */
+export declare function formatShortDate(iso: string | null | undefined, now?: Date, locale?: string, timeZone?: string): string;
+export declare function assetName(asset: AnyAsset | null | undefined): string;
+export declare function assetSizeBytes(asset: AnyAsset | null | undefined): number | null;
+/** Longest duration any rendition reports (video, audio). */
+export declare function assetDurationSeconds(asset: AnyAsset | null | undefined): number | null;
+/** Largest width × height any rendition variant reports. */
+export declare function assetDimensions(asset: AnyAsset | null | undefined): {
+    width: number;
+    height: number;
+} | null;
+export interface AssetFact {
+    label: string;
+    value: string;
+}
+/** The facts the editor side panel lists. Missing values are left out, not shown as "—". */
+export declare function assetFacts(asset: AnyAsset | null | undefined): AssetFact[];
+export {};

package/dist/runtime/utils/assetFormat.js

@@ -0,0 +1,69 @@
+export function formatBytes(bytes) {
+  if (!bytes || bytes < 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.min(units.length - 1, Math.floor(Math.log(bytes) / Math.log(1024)));
+  return `${(bytes / 1024 ** i).toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
+}
+export function formatDuration(seconds) {
+  if (seconds == null || !Number.isFinite(seconds) || seconds < 0) return "";
+  const s = Math.round(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = String(s % 60).padStart(2, "0");
+  return h ? `${h}:${String(m).padStart(2, "0")}:${sec}` : `${m}:${sec}`;
+}
+export function fileExtension(name) {
+  const match = /\.([a-z0-9]{1,8})$/i.exec(name ?? "");
+  return match ? match[1].toUpperCase() : "";
+}
+export function formatShortDate(iso, now = /* @__PURE__ */ new Date(), locale = "en-US", timeZone = "UTC") {
+  if (!iso) return "";
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  const opts = { month: "short", day: "numeric", timeZone };
+  if (d.getUTCFullYear() !== now.getUTCFullYear()) opts.year = "numeric";
+  return d.toLocaleDateString(locale, opts);
+}
+export function assetName(asset) {
+  if (!asset) return "";
+  const filename = "original_filename" in asset ? asset.original_filename || asset.originalFilename : void 0;
+  return filename || asset.title || asset.id.slice(0, 8);
+}
+export function assetSizeBytes(asset) {
+  if (!asset || !("size_bytes" in asset)) return null;
+  return asset.size_bytes ?? asset.sizeBytes ?? asset.bytes ?? null;
+}
+export function assetDurationSeconds(asset) {
+  const all = (asset?.renditions ?? []).map((r) => "durationSeconds" in r ? r.durationSeconds : null).filter((n) => n != null);
+  return all.length ? Math.max(...all) : null;
+}
+export function assetDimensions(asset) {
+  let best = null;
+  for (const r of asset?.renditions ?? []) {
+    for (const v of r.variants ?? []) {
+      if (v.width && v.height && (!best || v.width * v.height > best.width * best.height)) {
+        best = { width: v.width, height: v.height };
+      }
+    }
+  }
+  return best;
+}
+export function assetFacts(asset) {
+  if (!asset) return [];
+  const facts = [];
+  const size = assetSizeBytes(asset);
+  if (size) facts.push({ label: "Size", value: formatBytes(size) });
+  const dims = assetDimensions(asset);
+  if (dims) facts.push({ label: "Dimensions", value: `${dims.width} \xD7 ${dims.height}` });
+  const duration = assetDurationSeconds(asset);
+  if (duration) facts.push({ label: "Duration", value: formatDuration(duration) });
+  const pages = (asset.renditions ?? []).map((r) => "pages" in r ? r.pages : null).find((p) => p);
+  if (pages) facts.push({ label: "Pages", value: String(pages) });
+  const ext = fileExtension(assetName(asset));
+  const mime = "mime_type" in asset ? asset.mime_type || asset.mimeType : asset.mimeType;
+  if (ext || mime) facts.push({ label: "Type", value: ext || mime });
+  const created = "created_at" in asset ? asset.created_at || asset.createdAt : void 0;
+  const date = formatShortDate(created);
+  if (date) facts.push({ label: "Added", value: date });
+  return facts;
+}

package/dist/runtime/utils/assetThumbnail.d.ts

@@ -0,0 +1,11 @@
+import type { AssetDetail, DeliveryAsset } from '../types/asset.js';
+type ThumbnailSource = Pick<AssetDetail, 'kind' | 'renditions'> & Partial<Pick<AssetDetail, 'previewUrl' | 'mime_type' | 'mimeType'>> | Pick<DeliveryAsset, 'kind' | 'renditions' | 'mimeType'> & {
+    previewUrl?: string | null;
+};
+/**
+ * Best small image for an asset: the thumbnail rendition (its first variant
+ * with a URL, else the rendition's own URL), then the original for images.
+ * Null means "show the kind icon".
+ */
+export declare function assetThumbnailUrl(asset: ThumbnailSource | null | undefined): string | null;
+export {};

package/dist/runtime/utils/assetThumbnail.js

@@ -0,0 +1,14 @@
+const READY = /* @__PURE__ */ new Set(["ready", "completed", "succeeded"]);
+export function assetThumbnailUrl(asset) {
+  if (!asset) return null;
+  for (const r of asset.renditions ?? []) {
+    if (r.renditionType !== "thumbnail" || !READY.has((r.status ?? "").toLowerCase())) continue;
+    const variant = (r.variants ?? []).find((v) => v.previewUrl);
+    const url = variant?.previewUrl ?? r.previewUrl;
+    if (url) return url;
+  }
+  const kind = (asset.kind ?? "").toLowerCase();
+  const mime = ("mime_type" in asset ? asset.mime_type : void 0) ?? asset.mimeType ?? "";
+  if ((kind === "image" || mime.startsWith("image/")) && asset.previewUrl) return asset.previewUrl;
+  return null;
+}

package/dist/runtime/utils/fileAccept.d.ts

@@ -0,0 +1,26 @@
+/** ["image", "video"] → "image/*,video/*". Unknown kinds or "other" mean anything. */
+export declare function acceptForKinds(kinds: readonly string[] | string | null | undefined): string;
+export declare function matchesAccept(file: Pick<File, 'name' | 'type'>, accept: string | null | undefined): boolean;
+export type FileRejectReason = 'type' | 'size' | 'count';
+export interface RejectedFile {
+    file: File;
+    reason: FileRejectReason;
+}
+export interface FileFilterOptions {
+    accept?: string | null;
+    /** Bytes. */
+    maxSize?: number | null;
+    /** How many more files fit. Files past it are rejected with reason "count". */
+    maxFiles?: number | null;
+}
+export declare function partitionFiles(files: readonly File[], opts?: FileFilterOptions): {
+    accepted: File[];
+    rejected: RejectedFile[];
+};
+/**
+ * The asset kind an upload session should declare for a file. Policy-less
+ * sessions must send `kind`; the service no longer infers it.
+ */
+export declare function kindForFile(file: Pick<File, 'name' | 'type'>): string;
+/** "image,video" → "images and videos", for messages such as "This field takes …". */
+export declare function describeKinds(kinds: readonly string[] | string | null | undefined): string;

package/dist/runtime/utils/fileAccept.js

@@ -0,0 +1,104 @@
+const KIND_ACCEPT = {
+  image: ["image/*"],
+  image_batch: ["image/*"],
+  video: ["video/*"],
+  audio: ["audio/*"],
+  document: ["application/pdf", ".doc", ".docx", ".ppt", ".pptx", ".xls", ".xlsx", ".odt", ".txt", ".csv", ".md", ".rtf"],
+  archive: [".zip", ".tar", ".gz", ".tgz", ".7z", ".rar"],
+  font: ["font/*", ".ttf", ".otf", ".woff", ".woff2"],
+  model_3d: ["model/*", ".glb", ".gltf", ".obj", ".fbx", ".stl", ".usdz"],
+  web_app: [".zip"]
+};
+export function acceptForKinds(kinds) {
+  const list = typeof kinds === "string" ? kinds.split(",") : kinds ?? [];
+  const parts = /* @__PURE__ */ new Set();
+  for (const raw of list) {
+    const k = raw.trim().toLowerCase();
+    if (!k) continue;
+    const accept = KIND_ACCEPT[k];
+    if (!accept) return "*";
+    accept.forEach((a) => parts.add(a));
+  }
+  return parts.size ? [...parts].join(",") : "*";
+}
+export function matchesAccept(file, accept) {
+  if (!accept || accept.trim() === "*") return true;
+  const name = file.name.toLowerCase();
+  const type = (file.type || "").toLowerCase();
+  return accept.split(",").map((a) => a.trim().toLowerCase()).filter(Boolean).some((rule) => {
+    if (rule === "*" || rule === "*/*") return true;
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}
+export function partitionFiles(files, opts = {}) {
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (!matchesAccept(file, opts.accept)) rejected.push({ file, reason: "type" });
+    else if (opts.maxSize && file.size > opts.maxSize) rejected.push({ file, reason: "size" });
+    else if (opts.maxFiles != null && accepted.length >= opts.maxFiles) rejected.push({ file, reason: "count" });
+    else accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+const EXT_KIND = {
+  pdf: "document",
+  doc: "document",
+  docx: "document",
+  ppt: "document",
+  pptx: "document",
+  xls: "document",
+  xlsx: "document",
+  odt: "document",
+  txt: "document",
+  csv: "document",
+  md: "document",
+  rtf: "document",
+  zip: "archive",
+  tar: "archive",
+  gz: "archive",
+  tgz: "archive",
+  "7z": "archive",
+  rar: "archive",
+  ttf: "font",
+  otf: "font",
+  woff: "font",
+  woff2: "font",
+  glb: "model_3d",
+  gltf: "model_3d",
+  obj: "model_3d",
+  fbx: "model_3d",
+  stl: "model_3d",
+  usdz: "model_3d"
+};
+export function kindForFile(file) {
+  const type = (file.type || "").toLowerCase();
+  for (const k of ["image", "video", "audio"]) {
+    if (type.startsWith(`${k}/`)) return k;
+  }
+  if (type === "application/pdf" || type.startsWith("text/")) return "document";
+  if (type.startsWith("font/")) return "font";
+  if (type.startsWith("model/")) return "model_3d";
+  const ext = /\.([a-z0-9]{1,8})$/i.exec(file.name)?.[1]?.toLowerCase() ?? "";
+  return EXT_KIND[ext] ?? "other";
+}
+export function describeKinds(kinds) {
+  const NAMES = {
+    image: "images",
+    image_batch: "image sets",
+    video: "videos",
+    audio: "audio",
+    document: "documents",
+    archive: "archives",
+    font: "fonts",
+    model_3d: "3D models",
+    web_app: "web apps",
+    other: "any file"
+  };
+  const list = (typeof kinds === "string" ? kinds.split(",") : kinds ?? []).map((k) => k.trim().toLowerCase()).filter(Boolean);
+  if (!list.length) return "any file";
+  const names = list.map((k) => NAMES[k] ?? k.replace(/_/g, " "));
+  return names.length === 1 ? names[0] : `${names.slice(0, -1).join(", ")} and ${names.at(-1)}`;
+}

package/dist/runtime/utils/galleryDrag.d.ts

@@ -0,0 +1,2 @@
+/** dataTransfer type for a gallery tile being dragged (reorder, or onto a role chip). */
+export declare const GALLERY_TILE_TYPE = "application/x-ml-media-tile";

package/dist/runtime/utils/galleryDrag.js

@@ -0,0 +1 @@
+export const GALLERY_TILE_TYPE = "application/x-ml-media-tile";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-media-library",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "description": "Nuxt module for media library management — chunked uploads, asset previews, and resource policies",
   "repository": {
     "type": "git",