nuxt-media-library 0.0.44 → 0.0.49

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

@@ -0,0 +1,117 @@
+<script setup>
+import { computed } from "vue";
+import { assetDurationSeconds, assetName, formatDuration } from "../../utils/assetFormat";
+const props = defineProps({
+  asset: { type: [Object, null], required: false, default: null },
+  src: { type: [String, null], required: false, default: void 0 },
+  kind: { type: [String, null], required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  duration: { type: [Number, null], required: false, default: void 0 },
+  missingAlt: { type: Boolean, required: false, default: false },
+  selectable: { type: Boolean, required: false, default: false },
+  selected: { type: Boolean, required: false, default: false },
+  selecting: { type: Boolean, required: false, default: false },
+  phase: { type: [String, null], required: false, default: null },
+  progress: { type: [Number, null], required: false, default: null },
+  phaseDetail: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  aspect: { type: String, required: false, default: "square" },
+  onOpen: { type: Function, required: false, default: void 0 }
+});
+const emit = defineEmits(["update:selected", "cancel", "retry"]);
+defineSlots();
+const resolvedKind = computed(() => (props.kind !== void 0 ? props.kind : props.asset?.kind) ?? "");
+const resolvedName = computed(() => props.name ?? assetName(props.asset));
+const isImage = computed(() => resolvedKind.value.toLowerCase() === "image");
+const durationLabel = computed(() => formatDuration(props.duration !== void 0 ? props.duration : assetDurationSeconds(props.asset)));
+function onKey(e) {
+  if (props.disabled) return;
+  if (e.key === "Enter" && props.onOpen) {
+    e.preventDefault();
+    props.onOpen();
+  } else if (e.key === " " && props.selectable) {
+    e.preventDefault();
+    emit("update:selected", !props.selected);
+  }
+}
+</script>
+
+<template>
+  <div
+    class="group relative rounded-lg outline-offset-2 focus-visible:outline-2 focus-visible:outline-primary"
+    :class="[
+  selected ? 'ring-2 ring-primary' : '',
+  disabled ? 'pointer-events-none opacity-50' : selectable ? 'cursor-pointer' : ''
+]"
+    role="button"
+    :tabindex="disabled ? -1 : 0"
+    :aria-label="resolvedName"
+    :aria-pressed="selectable ? selected : void 0"
+    :aria-disabled="disabled || void 0"
+    @click="!disabled && selectable && emit('update:selected', !selected)"
+    @keydown="onKey"
+  >
+    <MLMediaThumbnail
+      :asset="asset"
+      :src="src"
+      :kind="resolvedKind"
+      :alt="resolvedName"
+      size="fill"
+      :aspect="aspect"
+    >
+      <MLMediaKindBadge
+        v-if="!isImage && resolvedKind"
+        :kind="resolvedKind"
+        size="sm"
+        variant="solid"
+        class="absolute bottom-1.5 left-1.5"
+      />
+      <span
+        v-if="durationLabel"
+        class="absolute bottom-1.5 right-1.5 rounded bg-black/70 px-1.5 font-mono text-[11px] text-white tabular-nums"
+      >{{ durationLabel }}</span>
+      <UBadge
+        v-if="missingAlt && isImage"
+        color="warning"
+        variant="solid"
+        size="sm"
+        label="No alt"
+        class="absolute right-1.5 top-1.5"
+      />
+
+      <slot />
+
+      <MLMediaProgressVeil
+        v-if="phase"
+        :phase="phase"
+        :progress="progress"
+        :detail="phaseDetail"
+        :on-cancel="phase !== 'failed' ? () => emit('cancel') : void 0"
+        :on-retry="phase === 'failed' ? () => emit('retry') : void 0"
+      />
+    </MLMediaThumbnail>
+
+    <MLMediaPreviewEye
+      v-if="onOpen && !disabled && phase !== 'uploading'"
+      :name="resolvedName"
+      :visible="selecting"
+      class="absolute bottom-1.5 right-1.5 z-20"
+      :class="durationLabel ? 'bottom-7' : ''"
+      @click="onOpen"
+    />
+
+    <div
+      v-if="selectable"
+      class="absolute left-1.5 top-1.5 z-20 flex rounded bg-default p-0.5 shadow-sm transition-opacity motion-reduce:transition-none"
+      :class="selected || selecting ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100'"
+      @click.stop
+    >
+      <UCheckbox
+        :model-value="selected"
+        :aria-label="`Select ${resolvedName}`"
+        tabindex="-1"
+        @update:model-value="(v) => emit('update:selected', v === true)"
+      />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,63 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+import type { ProgressVeilPhase } from './ProgressVeil.vue.js';
+type __VLS_Props = {
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    name?: string;
+    /** Seconds. Read from the asset's renditions when omitted. */
+    duration?: number | null;
+    /** Shows the "No alt" warning. Only meaningful for images; the host knows where alt text lives. */
+    missingAlt?: boolean;
+    /** Shows the selection checkbox on hover and focus; always visible once anything is selected. */
+    selectable?: boolean;
+    selected?: boolean;
+    /** Put the checkbox on screen without hovering, e.g. while the gallery is in selection mode. */
+    selecting?: boolean;
+    /** Overlay for uploads and processing. Omit when the file is ready. */
+    phase?: ProgressVeilPhase | null;
+    progress?: number | null;
+    phaseDetail?: string;
+    disabled?: boolean;
+    /** Fixed shape for grid cells. */
+    aspect?: 'square' | 'landscape' | 'portrait' | 'video';
+    /** Passing a listener shows the eye button, which opens the editor. Enter does the same. */
+    onOpen?: () => void;
+};
+type __VLS_Slots = {
+    /** Extra overlays, e.g. a drag handle or a "Featured" label. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    cancel: () => any;
+    retry: () => any;
+    "update:selected": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onCancel?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    progress: number | null;
+    name: string;
+    kind: string | null;
+    phase: ProgressVeilPhase | null;
+    disabled: boolean;
+    selected: boolean;
+    missingAlt: boolean;
+    onOpen: () => void;
+    duration: number | null;
+    selectable: boolean;
+    selecting: boolean;
+    phaseDetail: string;
+    aspect: "square" | "landscape" | "portrait" | "video";
+}, {}, {}, {}, 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/MLMedia/PickerCard.d.vue.ts

@@ -0,0 +1,42 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+type __VLS_Props = {
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    name?: string;
+    /** Second line. Defaults to the file extension. */
+    meta?: string;
+    selected?: boolean;
+    /** Dimmed and not selectable, e.g. a kind the calling field doesn't accept. */
+    disabled?: boolean;
+    disabledReason?: string;
+    /** Passing a listener shows the preview button on hover. */
+    onPreview?: () => void;
+};
+type __VLS_Slots = {
+    /** Overlays on the thumbnail, e.g. an upload veil. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    name: string;
+    kind: string | null;
+    disabled: boolean;
+    meta: string;
+    selected: boolean;
+    disabledReason: string;
+    onPreview: () => void;
+}, {}, {}, {}, 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/MLMedia/PickerCard.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { computed } from "vue";
+import { assetName, fileExtension } from "../../utils/assetFormat";
+const props = defineProps({
+  asset: { type: [Object, null], required: false, default: null },
+  src: { type: [String, null], required: false, default: void 0 },
+  kind: { type: [String, null], required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  meta: { type: String, required: false, default: void 0 },
+  selected: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  disabledReason: { type: String, required: false, default: void 0 },
+  onPreview: { type: Function, required: false, default: void 0 }
+});
+const emit = defineEmits(["toggle"]);
+defineSlots();
+const resolvedKind = computed(() => props.kind !== void 0 ? props.kind : props.asset?.kind);
+const resolvedName = computed(() => props.name ?? assetName(props.asset));
+const subtitle = computed(() => props.meta ?? fileExtension(resolvedName.value));
+const isTall = computed(() => (resolvedKind.value ?? "").toLowerCase() === "document");
+</script>
+
+<template>
+  <div
+    class="group relative rounded-lg"
+    :class="disabled ? 'opacity-40' : selected ? 'bg-elevated' : 'hover:bg-elevated'"
+    :title="disabled ? disabledReason : void 0"
+  >
+    <button
+      type="button"
+      class="flex w-full flex-col items-center gap-2 rounded-lg px-2.5 pb-2.5 pt-3 text-center outline-offset-2 focus-visible:outline-2 focus-visible:outline-primary"
+      :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
+      :aria-pressed="selected"
+      :disabled="disabled"
+      @click="emit('toggle')"
+    >
+      <span class="grid aspect-square w-full max-w-28 place-items-center rounded-md bg-default p-1 ring ring-default">
+        <MLMediaThumbnail
+          :asset="asset"
+          :src="src"
+          :kind="resolvedKind"
+          size="fill"
+          :aspect="isTall ? 'portrait' : 'landscape'"
+          :fit="isTall ? 'contain' : 'cover'"
+          :class="isTall ? 'w-3/4!' : ''"
+          class="rounded-sm! ring-0!"
+        >
+          <slot />
+        </MLMediaThumbnail>
+      </span>
+      <span class="flex w-full min-w-0 flex-col text-xs">
+        <span class="truncate">{{ resolvedName }}</span>
+        <span
+          v-if="subtitle"
+          class="text-muted"
+        >{{ subtitle }}</span>
+      </span>
+    </button>
+
+    <span
+      class="pointer-events-none absolute left-2 top-2 grid size-4 place-items-center rounded border-[1.5px]"
+      :class="selected ? 'border-inverted bg-inverted text-inverted' : 'border-accented bg-default'"
+      aria-hidden="true"
+    >
+      <UIcon
+        v-if="selected"
+        name="i-lucide-check"
+        class="size-3"
+      />
+    </span>
+
+    <MLMediaPreviewEye
+      v-if="onPreview && !disabled"
+      :name="resolvedName"
+      class="absolute bottom-12 right-2 z-10"
+      @click="onPreview"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+type __VLS_Props = {
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    name?: string;
+    /** Second line. Defaults to the file extension. */
+    meta?: string;
+    selected?: boolean;
+    /** Dimmed and not selectable, e.g. a kind the calling field doesn't accept. */
+    disabled?: boolean;
+    disabledReason?: string;
+    /** Passing a listener shows the preview button on hover. */
+    onPreview?: () => void;
+};
+type __VLS_Slots = {
+    /** Overlays on the thumbnail, e.g. an upload veil. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    name: string;
+    kind: string | null;
+    disabled: boolean;
+    meta: string;
+    selected: boolean;
+    disabledReason: string;
+    onPreview: () => void;
+}, {}, {}, {}, 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/MLMedia/PickerRow.d.vue.ts

@@ -0,0 +1,31 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+type __VLS_Props = {
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    name?: string;
+    /** Defaults to the asset's size. */
+    size?: string;
+    /** Defaults to the asset's created date. */
+    date?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    disabledReason?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {
+    size: string;
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    name: string;
+    kind: string | null;
+    disabled: boolean;
+    selected: boolean;
+    date: string;
+    disabledReason: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from "vue";
+import { assetName, assetSizeBytes, formatBytes, formatShortDate } from "../../utils/assetFormat";
+const props = defineProps({
+  asset: { type: [Object, null], required: false, default: null },
+  src: { type: [String, null], required: false, default: void 0 },
+  kind: { type: [String, null], required: false, default: void 0 },
+  name: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: void 0 },
+  date: { type: String, required: false, default: void 0 },
+  selected: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  disabledReason: { type: String, required: false, default: void 0 }
+});
+const emit = defineEmits(["toggle"]);
+const resolvedKind = computed(() => props.kind !== void 0 ? props.kind : props.asset?.kind);
+const resolvedName = computed(() => props.name ?? assetName(props.asset));
+const sizeLabel = computed(() => {
+  if (props.size !== void 0) return props.size;
+  const bytes = assetSizeBytes(props.asset);
+  return bytes ? formatBytes(bytes) : "";
+});
+const dateLabel = computed(() => {
+  if (props.date !== void 0) return props.date;
+  const a = props.asset;
+  return a && "created_at" in a ? formatShortDate(a.created_at || a.createdAt) : "";
+});
+</script>
+
+<template>
+  <button
+    type="button"
+    class="grid w-full grid-cols-[1rem_2.5rem_minmax(0,1fr)_auto] items-center gap-3 px-3 py-1.5 text-left text-sm outline-offset-[-2px] focus-visible:outline-2 focus-visible:outline-primary sm:grid-cols-[1rem_2.5rem_minmax(0,1fr)_auto_5rem_4.5rem]"
+    :class="[
+  selected ? 'bg-elevated' : 'hover:bg-elevated',
+  disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'
+]"
+    :aria-pressed="selected"
+    :disabled="disabled"
+    :title="disabled ? disabledReason : void 0"
+    @click="emit('toggle')"
+  >
+    <span
+      class="grid size-4 place-items-center rounded border-[1.5px]"
+      :class="selected ? 'border-inverted bg-inverted text-inverted' : 'border-accented bg-default'"
+      aria-hidden="true"
+    >
+      <UIcon
+        v-if="selected"
+        name="i-lucide-check"
+        class="size-3"
+      />
+    </span>
+    <MLMediaThumbnail
+      :asset="asset"
+      :src="src"
+      :kind="resolvedKind"
+      size="sm"
+    />
+    <span class="truncate">{{ resolvedName }}</span>
+    <MLMediaKindBadge :kind="resolvedKind" />
+    <span class="hidden text-right text-muted tabular-nums sm:block">{{ sizeLabel }}</span>
+    <span class="hidden text-right text-muted tabular-nums sm:block">{{ dateLabel }}</span>
+  </button>
+</template>

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

@@ -0,0 +1,31 @@
+import type { AssetDetail, DeliveryAsset } from '../../types/asset.js';
+type __VLS_Props = {
+    asset?: AssetDetail | DeliveryAsset | null;
+    src?: string | null;
+    kind?: string | null;
+    name?: string;
+    /** Defaults to the asset's size. */
+    size?: string;
+    /** Defaults to the asset's created date. */
+    date?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    disabledReason?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggle: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onToggle?: (() => any) | undefined;
+}>, {
+    size: string;
+    asset: AssetDetail | DeliveryAsset | null;
+    src: string | null;
+    name: string;
+    kind: string | null;
+    disabled: boolean;
+    selected: boolean;
+    date: string;
+    disabledReason: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    /** File name, for the accessible label. */
+    name?: string;
+    /** Keep it visible without hovering (touch screens, selection mode). */
+    visible?: boolean;
+};
+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;
+}>, {
+    name: string;
+    visible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+<script setup>
+defineProps({
+  name: { type: String, required: false, default: "" },
+  visible: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["click"]);
+</script>
+
+<template>
+  <UButton
+    icon="i-lucide-eye"
+    color="info"
+    variant="solid"
+    size="xs"
+    square
+    class="rounded-md shadow-sm transition-opacity motion-reduce:transition-none"
+    :class="visible ? 'opacity-100' : 'opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 [@media(hover:none)]:opacity-100'"
+    :aria-label="name ? `Preview ${name}` : 'Preview'"
+    @click.stop="emit('click')"
+  />
+</template>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    /** File name, for the accessible label. */
+    name?: string;
+    /** Keep it visible without hovering (touch screens, selection mode). */
+    visible?: boolean;
+};
+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;
+}>, {
+    name: string;
+    visible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,25 @@
+export type ProgressVeilPhase = 'uploading' | 'processing' | 'failed';
+type __VLS_Props = {
+    phase: ProgressVeilPhase;
+    /** 0–100. Null or omitted shows an indeterminate bar (e.g. a step with no progress events). */
+    progress?: number | null;
+    /** Replaces the phase label, e.g. "Transcoding". */
+    label?: string;
+    /** Second line, usually the file name. */
+    detail?: string;
+    /** Bar only, no text. For thumbnails smaller than ~80px. */
+    compact?: boolean;
+    /** Passing a listener shows the matching button. */
+    onCancel?: () => void;
+    onRetry?: () => void;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    progress: number | null;
+    label: string;
+    compact: boolean;
+    onCancel: () => void;
+    onRetry: () => void;
+    detail: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,98 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  phase: { type: String, required: true },
+  progress: { type: [Number, null], required: false, default: null },
+  label: { type: String, required: false, default: void 0 },
+  detail: { type: String, required: false, default: void 0 },
+  compact: { type: Boolean, required: false, default: false },
+  onCancel: { type: Function, required: false, default: void 0 },
+  onRetry: { type: Function, required: false, default: void 0 }
+});
+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" }
+};
+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;
+});
+</script>
+
+<template>
+  <div
+    class="absolute inset-0 z-10 grid place-items-center bg-default/70 backdrop-blur-[2px]"
+    :class="compact ? 'p-1' : 'p-2'"
+    role="status"
+    aria-live="polite"
+    :aria-label="detail ? `${heading}: ${detail}` : heading"
+  >
+    <div
+      v-if="compact"
+      class="w-full self-end"
+    >
+      <UProgress
+        v-if="phase !== 'failed'"
+        :model-value="value"
+        :color="meta.color"
+        size="2xs"
+      />
+      <UIcon
+        v-else
+        :name="meta.icon"
+        class="mx-auto block size-4 text-error"
+      />
+    </div>
+
+    <div
+      v-else
+      class="flex w-full max-w-40 flex-col items-center gap-1.5 text-center"
+    >
+      <UIcon
+        :name="meta.icon"
+        class="size-4"
+        :class="{
+  'animate-spin motion-reduce:animate-none': phase === 'processing',
+  'text-error': phase === 'failed'
+}"
+      />
+      <span class="text-xs font-semibold tabular-nums">{{ heading }}</span>
+      <span
+        v-if="detail"
+        class="w-full truncate text-xs text-muted"
+      >{{ detail }}</span>
+      <UProgress
+        v-if="phase !== 'failed'"
+        :model-value="value"
+        :color="meta.color"
+        size="xs"
+        class="w-4/5"
+      />
+      <div
+        v-if="onCancel || onRetry"
+        class="flex gap-1"
+      >
+        <UButton
+          v-if="onRetry && phase === 'failed'"
+          size="xs"
+          variant="soft"
+          color="neutral"
+          icon="i-lucide-rotate-ccw"
+          label="Retry"
+          @click.stop="onRetry"
+        />
+        <UButton
+          v-if="onCancel && phase !== 'failed'"
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          label="Cancel"
+          @click.stop="onCancel"
+        />
+      </div>
+    </div>
+  </div>
+</template>