nuxt-media-library 0.0.65 → 0.0.67

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "media-library",
   "configKey": "mediaLibrary",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/MLMedia/Field.d.vue.ts

@@ -86,10 +86,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     pickFrom: readonly string[] | null;
     required: boolean;
     removeLabel: string;
-    onPick: () => void;
     hint: string;
     missingAlt: boolean;
     picker: boolean;
+    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/Field.vue.d.ts

@@ -86,10 +86,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     pickFrom: readonly string[] | null;
     required: boolean;
     removeLabel: string;
-    onPick: () => void;
     hint: string;
     missingAlt: boolean;
     picker: boolean;
+    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/Gallery.d.vue.ts

@@ -108,9 +108,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     max: number | null;
     maxSize: number | null;
     pickFrom: readonly string[] | null;
-    onPick: () => void;
     hint: string;
     picker: boolean;
+    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
     featured: boolean;

package/dist/runtime/components/MLMedia/Gallery.vue.d.ts

@@ -108,9 +108,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     max: number | null;
     maxSize: number | null;
     pickFrom: readonly string[] | null;
-    onPick: () => void;
     hint: string;
     picker: boolean;
+    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
     featured: boolean;

package/dist/runtime/components/MLMedia/GallerySection.d.vue.ts

@@ -104,9 +104,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     pickFrom: readonly string[] | null;
     removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
-    onPick: () => void;
     hint: string;
     picker: boolean;
+    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
     featured: boolean;

package/dist/runtime/components/MLMedia/GallerySection.vue

@@ -4,6 +4,7 @@ import { useMLMediaGallery } from "../../composables/useMLMediaGallery";
 import { useMLFilePicker } from "../../composables/useMLFilePicker";
 import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
 import { useMLMediaMeta } from "../../composables/useMLMediaMeta";
+import { useMLAssetStall } from "../../composables/useMLAssetStall";
 import { assetName } from "../../utils/assetFormat";
 import { assetThumbnailUrl } from "../../utils/assetThumbnail";
 import { acceptForKinds, partitionFiles } from "../../utils/fileAccept";
@@ -90,12 +91,24 @@ function removeSelected() {
   gallery.remove([...selected.value]);
   selected.value = /* @__PURE__ */ new Set();
 }
-function tilePhase(item) {
+const uploadRunning = (item) => {
   const p = item.upload?.phase;
-  if (p === "uploading" || p === "processing" || p === "failed") return p;
+  return p === "uploading" || p === "processing" || p === "failed";
+};
+const stalls = useMLAssetStall(
+  () => items.value.filter((i) => i.id && !uploadRunning(i)).map((i) => i.id),
+  (id) => gallery.asset(id),
+  (ids) => gallery.refresh(ids)
+);
+const STUCK_HINT = "Remove it, or upload the file again.";
+function tileState(item) {
+  if (uploadRunning(item)) return { phase: item.upload.phase, detail: !item.id ? item.upload.file.name : void 0 };
   const s = item.asset?.status?.toLowerCase();
-  if (s === "processing" || s === "uploaded" || s === "pending") return "processing";
-  if (s === "failed") return "failed";
+  if (s === "failed") return { phase: "failed", label: "Processing failed", detail: STUCK_HINT };
+  const stall = stalls.stall(item.id);
+  if (stall === "not_started") return { phase: "stalled", label: "Processing didn't start", detail: STUCK_HINT };
+  if (stall === "stalled") return { phase: "stalled", label: "Processing stalled", detail: STUCK_HINT };
+  if (s === "processing" || s === "uploaded" || s === "pending") return { phase: "processing" };
   return null;
 }
 function tileSrc(item) {
@@ -375,9 +388,11 @@ async function onTileKey(e, index) {
               :selectable="!!item.id && !disabled"
               :selected="!!item.id && selected.has(item.id)"
               :selecting="selected.size > 0"
-              :phase="tilePhase(item)"
+              :phase="tileState(item)?.phase ?? null"
+              :phase-label="tileState(item)?.label"
+              :controls="uploadRunning(item)"
               :progress="item.upload?.progress ?? null"
-              :phase-detail="item.upload && !item.id ? item.upload.file.name : void 0"
+              :phase-detail="tileState(item)?.detail"
               :on-open="openFor(item)"
               @update:selected="(v) => item.id && setSelected(item.id, v)"
               @cancel="onCancel(item)"

package/dist/runtime/components/MLMedia/GallerySection.vue.d.ts

@@ -104,9 +104,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     pickFrom: readonly string[] | null;
     removeLabel: string;
     onAdd: (assetId: string, tag: string | undefined) => void;
-    onPick: () => void;
     hint: string;
     picker: boolean;
+    onPick: () => void;
     editor: boolean;
     onOpen: (assetId: string) => void;
     featured: boolean;

package/dist/runtime/components/MLMedia/MediaTile.d.vue.ts

@@ -17,7 +17,11 @@ type __VLS_Props = {
     /** Overlay for uploads and processing. Omit when the file is ready. */
     phase?: ProgressVeilPhase | null;
     progress?: number | null;
+    /** Replaces the phase's label, e.g. "Processing didn't start". */
+    phaseLabel?: string;
     phaseDetail?: string;
+    /** Show the veil's Cancel / Retry. Off for files with no upload running here. */
+    controls?: boolean;
     disabled?: boolean;
     /** Fixed shape for grid cells. */
     aspect?: 'square' | 'landscape' | 'portrait' | 'video';
@@ -46,10 +50,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     phase: ProgressVeilPhase | null;
     selected: boolean;
+    controls: boolean;
     selectable: boolean;
     missingAlt: boolean;
     onOpen: () => void;
     selecting: boolean;
+    phaseLabel: string;
     phaseDetail: string;
     aspect: "square" | "landscape" | "portrait" | "video";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/MediaTile.vue

@@ -13,7 +13,9 @@ const props = defineProps({
   selecting: { type: Boolean, required: false, default: false },
   phase: { type: [String, null], required: false, default: null },
   progress: { type: [Number, null], required: false, default: null },
+  phaseLabel: { type: String, required: false, default: void 0 },
   phaseDetail: { type: String, required: false, default: void 0 },
+  controls: { type: Boolean, required: false, default: true },
   disabled: { type: Boolean, required: false, default: false },
   aspect: { type: String, required: false, default: "square" },
   onOpen: { type: Function, required: false, default: void 0 }
@@ -85,9 +87,10 @@ function onKey(e) {
         v-if="phase"
         :phase="phase"
         :progress="progress"
+        :label="phaseLabel"
         :detail="phaseDetail"
-        :on-cancel="phase !== 'failed' ? () => emit('cancel') : void 0"
-        :on-retry="phase === 'failed' ? () => emit('retry') : void 0"
+        :on-cancel="controls && phase !== 'failed' ? () => emit('cancel') : void 0"
+        :on-retry="controls && phase === 'failed' ? () => emit('retry') : void 0"
       />
     </MLMediaThumbnail>
 

package/dist/runtime/components/MLMedia/MediaTile.vue.d.ts

@@ -17,7 +17,11 @@ type __VLS_Props = {
     /** Overlay for uploads and processing. Omit when the file is ready. */
     phase?: ProgressVeilPhase | null;
     progress?: number | null;
+    /** Replaces the phase's label, e.g. "Processing didn't start". */
+    phaseLabel?: string;
     phaseDetail?: string;
+    /** Show the veil's Cancel / Retry. Off for files with no upload running here. */
+    controls?: boolean;
     disabled?: boolean;
     /** Fixed shape for grid cells. */
     aspect?: 'square' | 'landscape' | 'portrait' | 'video';
@@ -46,10 +50,12 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     phase: ProgressVeilPhase | null;
     selected: boolean;
+    controls: boolean;
     selectable: boolean;
     missingAlt: boolean;
     onOpen: () => void;
     selecting: boolean;
+    phaseLabel: string;
     phaseDetail: string;
     aspect: "square" | "landscape" | "portrait" | "video";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLMedia/PickerRow.d.vue.ts

@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     name: string;
     disabled: boolean;
     selected: boolean;
-    date: string;
     selectable: boolean;
+    date: string;
     disabledReason: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/MLMedia/PickerRow.vue.d.ts

@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     name: string;
     disabled: boolean;
     selected: boolean;
-    date: string;
     selectable: boolean;
+    date: string;
     disabledReason: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/MLMedia/ProgressVeil.d.vue.ts

@@ -1,4 +1,5 @@
-export type ProgressVeilPhase = 'uploading' | 'processing' | 'failed';
+/** 'stalled': processing didn't start or stopped moving (no spinner, no bar). */
+export type ProgressVeilPhase = 'uploading' | 'processing' | 'failed' | 'stalled';
 type __VLS_Props = {
     phase: ProgressVeilPhase;
     /** 0–100. Null or omitted shows an indeterminate bar (e.g. a step with no progress events). */

package/dist/runtime/components/MLMedia/ProgressVeil.vue

@@ -12,13 +12,14 @@ const props = defineProps({
 const PHASES = {
   uploading: { label: "Uploading", color: "primary", icon: "i-lucide-upload" },
   processing: { label: "Processing", color: "warning", icon: "i-lucide-loader-circle" },
-  failed: { label: "Failed", color: "error", icon: "i-lucide-circle-alert" }
+  failed: { label: "Failed", color: "error", icon: "i-lucide-circle-alert" },
+  stalled: { label: "Stuck", color: "warning", icon: "i-lucide-clock-alert" }
 };
 const meta = computed(() => PHASES[props.phase]);
 const value = computed(() => props.progress == null ? null : Math.round(Math.min(100, Math.max(0, props.progress))));
 const heading = computed(() => {
   const text = props.label ?? meta.value.label;
-  return value.value != null && props.phase !== "failed" ? `${text} ${value.value}%` : text;
+  return value.value != null && props.phase !== "failed" && props.phase !== "stalled" ? `${text} ${value.value}%` : text;
 });
 </script>
 
@@ -35,7 +36,7 @@ const heading = computed(() => {
       class="w-full self-end"
     >
       <UProgress
-        v-if="phase !== 'failed'"
+        v-if="phase !== 'failed' && phase !== 'stalled'"
         :model-value="value"
         :color="meta.color"
         size="2xs"
@@ -43,7 +44,8 @@ const heading = computed(() => {
       <UIcon
         v-else
         :name="meta.icon"
-        class="mx-auto block size-4 text-error"
+        class="mx-auto block size-4"
+        :class="phase === 'stalled' ? 'text-warning' : 'text-error'"
       />
     </div>
 
@@ -56,7 +58,8 @@ const heading = computed(() => {
         class="size-4"
         :class="{
   'animate-spin motion-reduce:animate-none': phase === 'processing',
-  'text-error': phase === 'failed'
+  'text-error': phase === 'failed',
+  'text-warning': phase === 'stalled'
 }"
       />
       <span class="text-xs font-semibold tabular-nums">{{ heading }}</span>
@@ -65,7 +68,7 @@ const heading = computed(() => {
         class="w-full truncate text-xs text-muted"
       >{{ detail }}</span>
       <UProgress
-        v-if="phase !== 'failed'"
+        v-if="phase !== 'failed' && phase !== 'stalled'"
         :model-value="value"
         :color="meta.color"
         size="xs"
@@ -85,7 +88,7 @@ const heading = computed(() => {
           @click.stop="onRetry"
         />
         <UButton
-          v-if="onCancel && phase !== 'failed'"
+          v-if="onCancel && phase !== 'failed' && phase !== 'stalled'"
           size="xs"
           variant="ghost"
           color="neutral"

package/dist/runtime/components/MLMedia/ProgressVeil.vue.d.ts

@@ -1,4 +1,5 @@
-export type ProgressVeilPhase = 'uploading' | 'processing' | 'failed';
+/** 'stalled': processing didn't start or stopped moving (no spinner, no bar). */
+export type ProgressVeilPhase = 'uploading' | 'processing' | 'failed' | 'stalled';
 type __VLS_Props = {
     phase: ProgressVeilPhase;
     /** 0–100. Null or omitted shows an indeterminate bar (e.g. a step with no progress events). */

package/dist/runtime/components/MLProcessing/StepLayout.d.vue.ts

@@ -16,8 +16,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string;
     icon: string;
-    titleClass: string;
     iconClass: string;
+    titleClass: string;
     spinning: boolean;
     showBody: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLProcessing/StepLayout.vue.d.ts

@@ -16,8 +16,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string;
     icon: string;
-    titleClass: string;
     iconClass: string;
+    titleClass: string;
     spinning: boolean;
     showBody: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/MLProcessing/StepperItem.d.vue.ts

@@ -5,12 +5,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;
-    "update:options": (value: Record<string, any>) => any;
     run: () => any;
+    "update:options": (value: Record<string, any>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => any) | undefined;
-    "onUpdate:options"?: ((value: Record<string, any>) => any) | undefined;
     onRun?: (() => any) | undefined;
+    "onUpdate:options"?: ((value: Record<string, any>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/MLProcessing/StepperItem.vue.d.ts

@@ -5,12 +5,12 @@ type __VLS_Props = {
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     retry: () => any;
-    "update:options": (value: Record<string, any>) => any;
     run: () => any;
+    "update:options": (value: Record<string, any>) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRetry?: (() => any) | undefined;
-    "onUpdate:options"?: ((value: Record<string, any>) => any) | undefined;
     onRun?: (() => any) | undefined;
+    "onUpdate:options"?: ((value: Record<string, any>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,23 @@
+import { type MaybeRefOrGetter } from 'vue';
+import type { AssetDetail, DeliveryAsset } from '../types/asset.js';
+/** 'not_started': still uploaded / pending after a re-check. 'stalled': processing with no change for a long time. */
+export type AssetStall = 'not_started' | 'stalled';
+export interface UseMLAssetStallOptions {
+    /** Re-check interval, ms. */
+    pollMs?: number;
+    /** Processing with no change for this long is stalled, ms. */
+    stallMs?: number;
+}
+/**
+ * Watches files that came from the record still waiting for or in
+ * processing (not ones uploading here: their upload follows processing).
+ * The resolve answer has no timestamps, so this re-checks them every
+ * `pollMs` and judges by what it sees: still uploaded / pending after one
+ * re-check means processing didn't start; processing with nothing changed
+ * for `stallMs` means it stalled. Stuck files keep being re-checked, so
+ * they recover when the library catches up.
+ */
+export declare function useMLAssetStall(ids: MaybeRefOrGetter<readonly string[]>, asset: (id: string) => AssetDetail | DeliveryAsset | null, refresh: (ids: string[]) => Promise<void>, options?: UseMLAssetStallOptions): {
+    /** Why this file looks stuck, or null. */
+    stall: (id: string | null | undefined) => AssetStall | null;
+};

package/dist/runtime/composables/useMLAssetStall.js

@@ -0,0 +1,59 @@
+import { getCurrentScope, onScopeDispose, ref, toValue, watch } from "vue";
+const WAITING = /* @__PURE__ */ new Set(["pending", "uploaded"]);
+const BUSY = /* @__PURE__ */ new Set([...WAITING, "processing"]);
+function signature(asset) {
+  return [asset.status, ...(asset.renditions ?? []).map((r) => `${r.id}:${r.status}`)].join("|").toLowerCase();
+}
+export function useMLAssetStall(ids, asset, refresh, options = {}) {
+  const pollMs = options.pollMs ?? 2e4;
+  const stallMs = options.stallMs ?? 15 * 6e4;
+  const seen = /* @__PURE__ */ new Map();
+  const stalls = ref({});
+  let timer;
+  const watched = () => toValue(ids).filter((id) => {
+    const a = asset(id);
+    return !!a && BUSY.has(a.status?.toLowerCase());
+  });
+  function evaluate(rechecked) {
+    const now = Date.now();
+    const next = {};
+    const live = new Set(watched());
+    for (const id of [...seen.keys()]) if (!live.has(id)) seen.delete(id);
+    for (const id of live) {
+      const a = asset(id);
+      const sig = signature(a);
+      const prev = seen.get(id);
+      const entry = prev && prev.sig === sig ? { ...prev, checks: prev.checks + (rechecked ? 1 : 0) } : { sig, since: now, checks: 0 };
+      seen.set(id, entry);
+      if (WAITING.has(a.status.toLowerCase())) {
+        if (entry.checks >= 1) next[id] = "not_started";
+      } else if (now - entry.since >= stallMs) {
+        next[id] = "stalled";
+      }
+    }
+    if (JSON.stringify(next) !== JSON.stringify(stalls.value)) stalls.value = next;
+  }
+  async function tick() {
+    const list = watched();
+    if (!list.length) return stop();
+    try {
+      await refresh(list);
+    } catch {
+    }
+    evaluate(true);
+  }
+  function stop() {
+    clearInterval(timer);
+    timer = void 0;
+  }
+  watch(() => watched().map((id) => `${id}:${signature(asset(id))}`).join(","), () => {
+    evaluate(false);
+    if (watched().length && !timer && import.meta.client !== false) timer = setInterval(() => void tick(), pollMs);
+    if (!watched().length) stop();
+  }, { immediate: true });
+  if (getCurrentScope()) onScopeDispose(stop);
+  return {
+    /** Why this file looks stuck, or null. */
+    stall: (id) => id ? stalls.value[id] ?? null : null
+  };
+}

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

@@ -43,6 +43,8 @@ export declare function useMLMediaGallery(model: Ref<string[]>, options?: UseMLM
     items: import("vue").ComputedRef<GalleryItem[]>;
     /** The loaded asset for an ID in the list, if any. */
     asset: (id: string) => AssetDetail | null;
+    /** Reload some files' details from the library, e.g. to re-check their processing. */
+    refresh: (only: string[]) => Promise<void>;
     message: Ref<string | null, string | null>;
     remaining: import("vue").ComputedRef<number>;
     full: import("vue").ComputedRef<boolean>;

package/dist/runtime/composables/useMLMediaGallery.js

@@ -118,6 +118,8 @@ export function useMLMediaGallery(model, options = {}) {
     items,
     /** The loaded asset for an ID in the list, if any. */
     asset: (id) => library.get(id),
+    /** Reload some files' details from the library, e.g. to re-check their processing. */
+    refresh: (only) => library.refresh(only),
     message,
     remaining,
     full,

package/dist/runtime/composables/useMLUploadQueue.js

@@ -112,7 +112,7 @@ function createQueue() {
     upload.failedTaskId = null;
     upload.processingSince ??= Date.now();
     persist();
-    if (processing) {
+    if (processing && !upload.backend) {
       const s = processing.track(assetId);
       stream = s;
       stopWatch = watch(

package/package.json

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