nuxt-media-library 0.0.48 → 0.0.49

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

@@ -0,0 +1,422 @@
+<script setup>
+import { computed, nextTick, ref, watch } from "vue";
+import { useMLMediaGallery } from "../../composables/useMLMediaGallery";
+import { useMLFilePicker } from "../../composables/useMLFilePicker";
+import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { assetName } from "../../utils/assetFormat";
+import { assetThumbnailUrl } from "../../utils/assetThumbnail";
+import { acceptForKinds, partitionFiles } from "../../utils/fileAccept";
+import { GALLERY_TILE_TYPE } from "../../utils/galleryDrag";
+const props = defineProps({
+  accept: { type: [Array, String], required: false, default: "" },
+  max: { type: [Number, null], required: false, default: null },
+  maxSize: { type: [Number, null], required: false, default: null },
+  title: { type: String, required: false, default: "Media" },
+  hint: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false, default: false },
+  featured: { type: Boolean, required: false, default: true },
+  recordName: { type: String, required: false, default: "" },
+  visibility: { type: String, required: false, default: void 0 },
+  processingConfig: { type: Object, required: false, default: void 0 },
+  collectionName: { type: [String, null], required: false, default: null },
+  picker: { type: Boolean, required: false, default: true },
+  onPick: { type: Function, required: false, default: void 0 },
+  editor: { type: Boolean, required: false, default: true },
+  onOpen: { type: Function, required: false, default: void 0 },
+  profile: { type: [String, null], required: false, default: null },
+  removeLabel: { type: String, required: false, default: void 0 },
+  badges: { type: Function, required: false, default: void 0 },
+  tileMenu: { type: Function, required: false, default: void 0 },
+  highlight: { type: [Set, null], required: false, default: null },
+  onAdd: { type: Function, required: false, default: void 0 }
+});
+const model = defineModel({ type: Array, ...{ default: () => [] } });
+const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
+const emit = defineEmits(["uploaded"]);
+const gallery = useMLMediaGallery(model, {
+  accept: () => props.accept,
+  max: () => props.max,
+  maxSize: () => props.maxSize,
+  visibility: props.visibility,
+  processingConfig: props.processingConfig,
+  collectionName: props.collectionName,
+  profile: props.profile,
+  onUploaded: (id) => emit("uploaded", id),
+  onAdd: (id, tag) => props.onAdd?.(id, tag)
+});
+const { items, message, full, replaces } = gallery;
+const removeLabel = computed(() => props.removeLabel ?? (props.recordName ? `Remove from ${props.recordName}` : "Remove"));
+const showAddTile = computed(() => !props.disabled && !full.value && !(replaces.value && items.value.length > 0));
+const countLabel = computed(() => {
+  const n = model.value.length;
+  return Number.isFinite(gallery.limit.value) ? `${n} of ${gallery.limit.value}` : String(n);
+});
+const helpText = computed(() => {
+  if (props.hint) return props.hint;
+  const parts = [];
+  if (!replaces.value) parts.push("Drag to reorder.");
+  if (props.featured && !replaces.value) parts.push("The first file is the featured one.");
+  if (gallery.acceptLabel.value !== "any file") parts.push(`Takes ${gallery.acceptLabel.value}.`);
+  return parts.join(" ");
+});
+const selected = ref(/* @__PURE__ */ new Set());
+watch(model, (ids) => {
+  const keep = new Set(ids);
+  if ([...selected.value].some((id) => !keep.has(id))) selected.value = new Set([...selected.value].filter((id) => keep.has(id)));
+});
+function setSelected(id, on) {
+  const next = new Set(selected.value);
+  if (on) next.add(id);
+  else next.delete(id);
+  selected.value = next;
+}
+function removeSelected() {
+  gallery.remove([...selected.value]);
+  selected.value = /* @__PURE__ */ new Set();
+}
+function tilePhase(item) {
+  const p = item.upload?.phase;
+  if (p === "uploading" || p === "processing" || p === "failed") return p;
+  const s = item.asset?.status?.toLowerCase();
+  if (s === "processing" || s === "uploaded" || s === "pending") return "processing";
+  if (s === "failed") return "failed";
+  return null;
+}
+function tileSrc(item) {
+  if (item.upload?.localPreview && !assetThumbnailUrl(item.asset)) return item.upload.localPreview;
+  return void 0;
+}
+function tileName(item) {
+  if (item.lookup === "not_found" || item.lookup === "forbidden") return "Unavailable file";
+  return item.upload?.file.name ?? assetName(item.asset);
+}
+function tileKind(item) {
+  return item.asset?.kind ?? item.upload?.kind ?? null;
+}
+function missingAlt(item) {
+  return alt.value !== void 0 && !!item.id && (tileKind(item) ?? "").toLowerCase() === "image" && !alt.value[item.id]?.trim();
+}
+function onRetry(item) {
+  item.upload?.retry();
+}
+function onCancel(item) {
+  if (!item.upload) return;
+  if (item.id) item.upload.cancel();
+  else gallery.discard(item.upload);
+}
+const filePicker = useMLFilePicker();
+const mediaEditor = useMLMediaEditor();
+const canPick = computed(() => !props.disabled && (!!props.onPick || props.picker));
+async function pickExisting() {
+  if (props.onPick) return props.onPick();
+  const ids = await filePicker.open({
+    accept: props.accept,
+    max: gallery.limit.value,
+    selected: model.value,
+    title: `Select ${props.title.toLowerCase()}`,
+    maxSize: props.maxSize,
+    upload: { visibility: props.visibility, processingConfig: props.processingConfig, collectionName: props.collectionName, profile: props.profile }
+  });
+  if (ids) gallery.setFromPicker(ids);
+}
+function openFor(item) {
+  const id = item.id;
+  if (!id || !(props.onOpen || props.editor) || item.lookup !== "ok") return void 0;
+  return () => void openEditor(id);
+}
+async function openEditor(id) {
+  if (props.onOpen) return props.onOpen(id);
+  const result = await mediaEditor.open(id, {
+    siblings: model.value,
+    alt: alt.value ?? {},
+    readonly: props.disabled,
+    removeLabel: removeLabel.value
+  });
+  if (result?.action === "save") alt.value = { ...alt.value ?? {}, ...result.alt };
+  else if (result?.action === "remove") gallery.remove([result.assetId]);
+}
+const dragFrom = ref(null);
+const dragOver = ref(null);
+const announcement = ref("");
+const tileEls = ref({});
+const dropzone = ref(null);
+function onDragStart(e, index) {
+  const id = items.value[index]?.id;
+  if (!e.dataTransfer || !id) return;
+  dragFrom.value = index;
+  e.dataTransfer.effectAllowed = "copyMove";
+  e.dataTransfer.setData(GALLERY_TILE_TYPE, id);
+}
+function onDragOver(e, index) {
+  if (dragFrom.value === null || !e.dataTransfer?.types.includes(GALLERY_TILE_TYPE)) return;
+  e.preventDefault();
+  e.dataTransfer.dropEffect = "move";
+  dragOver.value = index;
+}
+function onDrop(e, index) {
+  if (dragFrom.value === null) return;
+  e.preventDefault();
+  moveAndAnnounce(dragFrom.value, index);
+  onDragEnd();
+}
+function onDragEnd() {
+  dragFrom.value = null;
+  dragOver.value = null;
+}
+function menuFor(item) {
+  if (!item.id || !props.tileMenu) return [];
+  return props.tileMenu(item.id, tileKind(item));
+}
+function highlightClass(item) {
+  if (!props.highlight) return "";
+  return item.id && props.highlight.has(item.id) ? "outline-2 outline-offset-2 outline-primary" : "opacity-35";
+}
+function uploadFiles(files, opts = {}) {
+  if (props.disabled) return;
+  const { accepted, rejected } = partitionFiles(files, {
+    accept: acceptForKinds(opts.accept ?? props.accept),
+    maxSize: opts.maxSize ?? props.maxSize,
+    maxFiles: opts.maxFiles
+  });
+  if (rejected.length) gallery.onRejected(rejected);
+  if (accepted.length) gallery.onFiles(accepted, { profile: opts.profile, tag: opts.tag });
+}
+defineExpose({ uploadFiles });
+function moveAndAnnounce(from, to) {
+  const id = model.value[from];
+  if (!id) return;
+  gallery.move(from, to);
+  const at = model.value.indexOf(id);
+  const item = items.value[at];
+  announcement.value = `${item ? tileName(item) : "File"} moved to position ${at + 1} of ${model.value.length}`;
+}
+async function onTileKey(e, index) {
+  if (!e.altKey || props.disabled || index >= model.value.length) return;
+  const step = e.key === "ArrowLeft" || e.key === "ArrowUp" ? -1 : e.key === "ArrowRight" || e.key === "ArrowDown" ? 1 : 0;
+  if (!step) return;
+  e.preventDefault();
+  const key = items.value[index]?.key;
+  moveAndAnnounce(index, index + step);
+  await nextTick();
+  if (key) tileEls.value[key]?.querySelector('[role="button"]')?.focus();
+}
+</script>
+
+<template>
+  <section
+    class="flex flex-col gap-3"
+    :aria-label="title"
+  >
+    <!-- Header -->
+    <div class="flex min-h-8 flex-wrap items-center gap-2">
+      <template v-if="selected.size">
+        <UCheckbox
+          :model-value="true"
+          aria-label="Clear selection"
+          @update:model-value="selected = /* @__PURE__ */ new Set()"
+        />
+        <span class="me-auto text-sm font-semibold">{{ selected.size }} selected</span>
+        <UButton
+          size="sm"
+          color="error"
+          variant="soft"
+          icon="i-lucide-x"
+          :label="removeLabel"
+          @click="removeSelected"
+        />
+      </template>
+      <template v-else>
+        <h4 class="text-sm font-semibold">
+          {{ title }}
+        </h4>
+        <span class="me-auto text-xs text-muted tabular-nums">{{ countLabel }}</span>
+        <UButton
+          v-if="model.length && !disabled && !full"
+          size="sm"
+          variant="ghost"
+          :icon="replaces ? 'i-lucide-replace' : 'i-lucide-upload'"
+          :label="replaces ? 'Replace' : 'Upload'"
+          @click="dropzone?.open()"
+        />
+        <UButton
+          v-if="canPick && model.length"
+          size="sm"
+          variant="ghost"
+          icon="i-lucide-layout-grid"
+          label="Select existing"
+          @click="pickExisting"
+        />
+      </template>
+    </div>
+
+    <slot name="toolbar" />
+
+    <MLMediaDropzone
+      ref="dropzone"
+      variant="overlay"
+      :accept="gallery.acceptAttr.value"
+      multiple
+      :max-files="gallery.remaining.value"
+      :max-size="maxSize"
+      :disabled="disabled || full"
+      title="Drop to add"
+      class="rounded-lg"
+      @files="gallery.onFiles"
+      @rejected="gallery.onRejected"
+    >
+      <template #default="{ open }">
+        <!-- Empty -->
+        <div
+          v-if="!items.length"
+          class="flex flex-col items-center gap-2.5 rounded-lg border-[1.5px] border-dashed border-accented px-4 py-8 text-center"
+        >
+          <UIcon
+            name="i-lucide-images"
+            class="size-6 text-dimmed"
+          />
+          <p class="text-sm">
+            <span class="font-semibold">{{ replaces ? "Drop a file here" : "Drop files here" }}</span>
+            <span class="text-muted"> or</span>
+          </p>
+          <div class="flex flex-wrap justify-center gap-1.5">
+            <UButton
+              size="sm"
+              color="neutral"
+              variant="outline"
+              icon="i-lucide-upload"
+              :label="replaces ? 'Upload file' : 'Upload files'"
+              :disabled="disabled"
+              @click="open"
+            />
+            <UButton
+              v-if="canPick"
+              size="sm"
+              color="neutral"
+              variant="outline"
+              icon="i-lucide-layout-grid"
+              label="Select existing"
+              @click="pickExisting"
+            />
+          </div>
+        </div>
+
+        <!-- Grid -->
+        <ul
+          v-else
+          class="grid grid-cols-3 gap-2.5 sm:grid-cols-4"
+          :aria-label="`${title}, ${countLabel}. Alt plus arrow keys move the focused file.`"
+        >
+          <li
+            v-for="(item, i) in items"
+            :key="item.key"
+            :ref="(el) => tileEls[item.key] = el"
+            class="relative min-w-0 rounded-lg transition-[opacity,outline-color] motion-reduce:transition-none"
+            :class="[
+  highlightClass(item),
+  (featured || replaces) && i === 0 ? 'col-span-2 row-span-2' : '',
+  dragFrom === i ? 'opacity-40' : '',
+  dragOver === i && dragFrom !== i ? 'outline-2 outline-offset-2 outline-primary' : ''
+]"
+            :draggable="!!item.id && !disabled"
+            @dragstart="onDragStart($event, i)"
+            @dragover="onDragOver($event, i)"
+            @dragleave="dragOver === i && (dragOver = null)"
+            @drop="onDrop($event, i)"
+            @dragend="onDragEnd"
+            @keydown="onTileKey($event, i)"
+          >
+            <MLMediaTile
+              :asset="item.asset"
+              :src="tileSrc(item)"
+              :kind="tileKind(item)"
+              :name="tileName(item)"
+              :missing-alt="missingAlt(item)"
+              :selectable="!!item.id && !disabled"
+              :selected="!!item.id && selected.has(item.id)"
+              :selecting="selected.size > 0"
+              :phase="tilePhase(item)"
+              :progress="item.upload?.progress ?? null"
+              :phase-detail="item.upload && !item.id ? item.upload.file.name : void 0"
+              :on-open="openFor(item)"
+              @update:selected="(v) => item.id && setSelected(item.id, v)"
+              @cancel="onCancel(item)"
+              @retry="onRetry(item)"
+            >
+              <div
+                v-if="item.id && badges?.(item.id).length"
+                class="pointer-events-none absolute left-8 top-1.5 z-10 flex max-w-[calc(100%-4.5rem)] flex-wrap gap-1"
+              >
+                <UBadge
+                  v-for="b in badges(item.id)"
+                  :key="b"
+                  :label="b"
+                  color="neutral"
+                  variant="solid"
+                  size="sm"
+                  class="truncate"
+                />
+              </div>
+              <UDropdownMenu
+                v-if="item.id && !disabled && menuFor(item).length"
+                :items="menuFor(item)"
+                :content="{ align: 'end' }"
+              >
+                <UButton
+                  icon="i-lucide-ellipsis"
+                  color="neutral"
+                  variant="solid"
+                  size="xs"
+                  square
+                  class="absolute bottom-1.5 right-9 z-20 rounded-md opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 motion-reduce:transition-none [@media(hover:none)]:opacity-100"
+                  :aria-label="`More actions for ${tileName(item)}`"
+                  @click.stop
+                />
+              </UDropdownMenu>
+              <UBadge
+                v-if="item.lookup === 'not_found' || item.lookup === 'forbidden'"
+                color="warning"
+                variant="solid"
+                size="sm"
+                label="Unavailable"
+                class="absolute bottom-1.5 left-1.5"
+              />
+            </MLMediaTile>
+          </li>
+
+          <li v-if="showAddTile">
+            <button
+              type="button"
+              class="flex aspect-square w-full flex-col items-center justify-center gap-1 rounded-lg border-[1.5px] border-dashed border-accented p-2 text-center text-xs text-muted transition-colors hover:border-primary hover:bg-primary/10 hover:text-primary motion-reduce:transition-none"
+              @click="canPick ? pickExisting() : open()"
+            >
+              <UIcon
+                name="i-lucide-plus"
+                class="size-5"
+              />
+              {{ replaces ? "Add file" : "Add media" }}
+              <span class="text-[11px] text-dimmed">{{ replaces ? "or drop one" : "or drop files" }}</span>
+            </button>
+          </li>
+        </ul>
+      </template>
+    </MLMediaDropzone>
+
+    <p
+      v-if="message"
+      class="text-xs text-error"
+      role="alert"
+    >
+      {{ message }}
+    </p>
+    <p
+      v-else-if="items.length"
+      class="text-xs text-dimmed"
+    >
+      {{ helpText }}
+    </p>
+    <span
+      class="sr-only"
+      aria-live="polite"
+    >{{ announcement }}</span>
+  </section>
+</template>

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

@@ -0,0 +1,102 @@
+import type { DropdownMenuItem } from '@nuxt/ui';
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    /** Asset kinds the list takes. Empty means any file. */
+    accept?: readonly string[] | string;
+    /** Most files on the record. */
+    max?: number | null;
+    /** Bytes, per file. */
+    maxSize?: number | null;
+    title?: string;
+    /** Under the grid. Defaults to how ordering works and what the list takes. */
+    hint?: string;
+    disabled?: boolean;
+    /** Show the first file larger, as the featured one. */
+    featured?: boolean;
+    /** Used in "Remove from …" labels, e.g. "product". */
+    recordName?: string;
+    visibility?: MediaUploadOptions['visibility'];
+    processingConfig?: MediaUploadOptions['processingConfig'];
+    collectionName?: string | null;
+    /** Show "Select existing", which opens the library picker. */
+    picker?: boolean;
+    onPick?: () => void;
+    /** Show the eye on each tile, which opens the media editor. */
+    editor?: boolean;
+    onOpen?: (assetId: string) => void;
+    /** Upload profile name for new files in this list. */
+    profile?: string | null;
+    /** Overrides the "Remove from …" label. */
+    removeLabel?: string;
+    /** Labels shown on a tile, e.g. its roles. */
+    badges?: (assetId: string) => string[];
+    /** Extra menu on each tile (⋯). */
+    tileMenu?: (assetId: string, kind: string | null) => DropdownMenuItem[][];
+    /** When set, these files are highlighted and the rest dimmed. */
+    highlight?: ReadonlySet<string> | null;
+    /** See useMLMediaGallery's onAdd. */
+    onAdd?: (assetId: string, tag: string | undefined) => void;
+};
+/** Upload files with another profile than the list's own, e.g. from a role chip. */
+declare function uploadFiles(files: File[], opts?: {
+    profile?: string | null;
+    tag?: string;
+    accept?: readonly string[] | string;
+    maxSize?: number | null;
+    maxFiles?: number;
+}): void;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+    /** Alt text per asset ID, stored on the host record. */
+    'alt'?: Record<string, string> | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_29: {};
+type __VLS_Slots = {} & {
+    toolbar?: (props: typeof __VLS_29) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    uploadFiles: typeof uploadFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (assetId: string) => any;
+    "update:modelValue": (value: string[]) => any;
+    "update:alt": (value: Record<string, string> | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onUploaded?: ((assetId: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+    "onUpdate:alt"?: ((value: Record<string, string> | undefined) => any) | undefined;
+}>, {
+    visibility: "private" | "restricted" | "public";
+    title: string;
+    profile: string | null;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    processingConfig: {
+        stepOptions?: Record<string, Record<string, unknown>> | null;
+        useFilenameAsAssetId?: boolean;
+        enableTranscription?: boolean;
+    };
+    collectionName: string | null;
+    disabled: boolean;
+    highlight: ReadonlySet<string> | null;
+    removeLabel: string;
+    max: number | null;
+    onAdd: (assetId: string, tag: string | undefined) => void;
+    hint: string;
+    picker: boolean;
+    onPick: () => void;
+    editor: boolean;
+    onOpen: (assetId: string) => void;
+    featured: boolean;
+    recordName: string;
+    badges: (assetId: string) => string[];
+    tileMenu: (assetId: string, kind: string | null) => DropdownMenuItem[][];
+}, {}, {}, {}, 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/KindBadge.d.vue.ts

@@ -0,0 +1,17 @@
+import type { BadgeProps } from '@nuxt/ui';
+type __VLS_Props = {
+    kind: string | null | undefined;
+    /** Show the kind's icon before the label. */
+    icon?: boolean;
+    /** Override the label, e.g. a file extension such as "PDF". */
+    label?: string;
+    size?: BadgeProps['size'];
+    variant?: BadgeProps['variant'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    variant: "solid" | "outline" | "soft" | "subtle";
+    icon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+<script setup>
+import { computed } from "vue";
+import { assetKindMeta } from "../../utils/assetDisplay";
+const props = defineProps({
+  kind: { type: null, required: true },
+  icon: { type: Boolean, required: false, default: false },
+  label: { type: String, required: false },
+  size: { type: null, required: false, default: "sm" },
+  variant: { type: null, required: false, default: "subtle" }
+});
+const meta = computed(() => assetKindMeta(props.kind));
+</script>
+
+<template>
+  <UBadge
+    :color="meta.color"
+    :variant="variant"
+    :size="size"
+    :icon="icon ? meta.icon : void 0"
+    :label="label ?? meta.label"
+  />
+</template>

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

@@ -0,0 +1,17 @@
+import type { BadgeProps } from '@nuxt/ui';
+type __VLS_Props = {
+    kind: string | null | undefined;
+    /** Show the kind's icon before the label. */
+    icon?: boolean;
+    /** Override the label, e.g. a file extension such as "PDF". */
+    label?: string;
+    size?: BadgeProps['size'];
+    variant?: BadgeProps['variant'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "md" | "xs" | "sm" | "lg" | "xl";
+    variant: "solid" | "outline" | "soft" | "subtle";
+    icon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MLMedia/MediaTile.d.vue.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;
+    };
+};