nuxt-media-library 0.0.48 → 0.0.49

package/dist/module.json

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

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

@@ -0,0 +1,60 @@
+import { type RejectedFile } from '../../utils/fileAccept.js';
+type __VLS_Props = {
+    /** Browser accept syntax ("image/*,.glb"). Build one from kinds with acceptForKinds(). */
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Larger files are rejected with reason "size". */
+    maxSize?: number | null;
+    /** How many more files fit. Extra files are rejected with reason "count". */
+    maxFiles?: number | null;
+    disabled?: boolean;
+    /**
+     * `area`: a dashed box with an upload button (fields, picker).
+     * `overlay`: wraps the default slot and only shows a highlight while files are dragged over it (gallery).
+     */
+    variant?: 'area' | 'overlay';
+    title?: string;
+    hint?: string;
+    /** The button that opens the computer's file dialog. Defaults to "Upload file(s)". */
+    buttonLabel?: string;
+    /** One short row instead of a box, for places where the drop zone is secondary (the picker). */
+    compact?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        isDragging: boolean;
+        open: () => void;
+    }) => unknown;
+    actions?: (props: {
+        open: () => void;
+    }) => unknown;
+};
+declare function open(): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    files: (files: File[]) => any;
+    rejected: (files: RejectedFile[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFiles?: ((files: File[]) => any) | undefined;
+    onRejected?: ((files: RejectedFile[]) => any) | undefined;
+}>, {
+    title: string;
+    accept: string;
+    maxSize: number | null;
+    variant: "area" | "overlay";
+    compact: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    maxFiles: number | null;
+    hint: string;
+    buttonLabel: string;
+}, {}, {}, {}, 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/Dropzone.vue

@@ -0,0 +1,137 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useFileUpload } from "#imports";
+import { formatBytes } from "../../utils/assetFormat";
+import { partitionFiles } from "../../utils/fileAccept";
+const props = defineProps({
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: true },
+  maxSize: { type: [Number, null], required: false, default: null },
+  maxFiles: { type: [Number, null], required: false, default: null },
+  disabled: { type: Boolean, required: false, default: false },
+  variant: { type: String, required: false, default: "area" },
+  title: { type: String, required: false, default: void 0 },
+  hint: { type: String, required: false, default: void 0 },
+  buttonLabel: { type: String, required: false, default: void 0 },
+  compact: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["files", "rejected"]);
+defineSlots();
+const { isDragging, dropzoneRef } = useFileUpload({
+  accept: "*",
+  multiple: true,
+  dropzone: true,
+  onUpdate: (files) => handle(files)
+});
+const input = ref();
+function handle(files) {
+  if (props.disabled || !files.length) return;
+  const max = props.multiple ? props.maxFiles : Math.min(1, props.maxFiles ?? 1);
+  const { accepted, rejected } = partitionFiles(files, { accept: props.accept, maxSize: props.maxSize, maxFiles: max });
+  if (accepted.length) emit("files", accepted);
+  if (rejected.length) emit("rejected", rejected);
+}
+function open() {
+  if (!props.disabled) input.value?.click();
+}
+function onInput(e) {
+  const el = e.target;
+  handle(Array.from(el.files ?? []));
+  el.value = "";
+}
+const carriesFiles = ref(false);
+function onDragEnter(e) {
+  carriesFiles.value = !!e.dataTransfer && Array.from(e.dataTransfer.types).includes("Files");
+}
+const active = computed(() => isDragging.value && carriesFiles.value && !props.disabled);
+const sizeHint = computed(() => props.maxSize ? `Up to ${formatBytes(props.maxSize)}` : "");
+defineExpose({ open });
+</script>
+
+<template>
+  <div
+    ref="dropzoneRef"
+    class="relative"
+    @dragenter.capture="onDragEnter"
+    :data-dragging="active || void 0"
+    :aria-disabled="disabled || void 0"
+  >
+    <input
+      ref="input"
+      type="file"
+      class="sr-only"
+      tabindex="-1"
+      aria-hidden="true"
+      :accept="accept === '*' ? void 0 : accept"
+      :multiple="multiple"
+      :disabled="disabled"
+      @change="onInput"
+    >
+
+    <template v-if="variant === 'overlay'">
+      <slot
+        :is-dragging="active"
+        :open="open"
+      />
+      <div
+        v-if="active"
+        class="pointer-events-none absolute inset-0 z-20 grid place-items-center rounded-[inherit] border-2 border-dashed border-primary bg-primary/10 backdrop-blur-[1px]"
+      >
+        <span class="flex items-center gap-2 rounded-md bg-default px-3 py-1.5 text-sm font-semibold text-primary shadow-sm">
+          <UIcon
+            name="i-lucide-upload"
+            class="size-4"
+          />
+          {{ title ?? "Drop to upload" }}
+        </span>
+      </div>
+    </template>
+
+    <div
+      v-else
+      class="flex items-center rounded-lg border-[1.5px] border-dashed text-center transition-colors motion-reduce:transition-none"
+      :class="[
+  compact ? 'flex-row flex-wrap justify-center gap-x-3 gap-y-1.5 px-3 py-2.5' : 'flex-col gap-2.5 px-4 py-5',
+  active ? 'border-primary bg-primary/10' : 'border-accented bg-default',
+  disabled ? 'opacity-60' : ''
+]"
+    >
+      <slot
+        :is-dragging="active"
+        :open="open"
+      >
+        <UIcon
+          v-if="!compact"
+          name="i-lucide-upload"
+          class="size-5"
+          :class="active ? 'text-primary' : 'text-dimmed'"
+        />
+        <p class="text-sm">
+          <span :class="compact ? 'text-muted' : 'font-semibold'">{{ title ?? (multiple ? "Drop files here" : "Drop a file 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="buttonLabel ?? (multiple ? 'Upload files' : 'Upload file')"
+            :disabled="disabled"
+            @click="open"
+          />
+          <slot
+            name="actions"
+            :open="open"
+          />
+        </div>
+        <p
+          v-if="hint || sizeHint"
+          class="text-xs text-dimmed"
+        >
+          {{ [hint, sizeHint].filter(Boolean).join(" \xB7 ") }}
+        </p>
+      </slot>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,60 @@
+import { type RejectedFile } from '../../utils/fileAccept.js';
+type __VLS_Props = {
+    /** Browser accept syntax ("image/*,.glb"). Build one from kinds with acceptForKinds(). */
+    accept?: string;
+    multiple?: boolean;
+    /** Bytes. Larger files are rejected with reason "size". */
+    maxSize?: number | null;
+    /** How many more files fit. Extra files are rejected with reason "count". */
+    maxFiles?: number | null;
+    disabled?: boolean;
+    /**
+     * `area`: a dashed box with an upload button (fields, picker).
+     * `overlay`: wraps the default slot and only shows a highlight while files are dragged over it (gallery).
+     */
+    variant?: 'area' | 'overlay';
+    title?: string;
+    hint?: string;
+    /** The button that opens the computer's file dialog. Defaults to "Upload file(s)". */
+    buttonLabel?: string;
+    /** One short row instead of a box, for places where the drop zone is secondary (the picker). */
+    compact?: boolean;
+};
+type __VLS_Slots = {
+    default?: (props: {
+        isDragging: boolean;
+        open: () => void;
+    }) => unknown;
+    actions?: (props: {
+        open: () => void;
+    }) => unknown;
+};
+declare function open(): void;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    open: typeof open;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    files: (files: File[]) => any;
+    rejected: (files: RejectedFile[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onFiles?: ((files: File[]) => any) | undefined;
+    onRejected?: ((files: RejectedFile[]) => any) | undefined;
+}>, {
+    title: string;
+    accept: string;
+    maxSize: number | null;
+    variant: "area" | "overlay";
+    compact: boolean;
+    disabled: boolean;
+    multiple: boolean;
+    maxFiles: number | null;
+    hint: string;
+    buttonLabel: string;
+}, {}, {}, {}, 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/Editor.d.vue.ts

@@ -0,0 +1,23 @@
+import type { MediaUsage } from './UsageList.vue.js';
+export type MediaEditorResult = {
+    action: 'save';
+    alt: Record<string, string>;
+} | {
+    action: 'remove';
+    assetId: string;
+};
+type __VLS_Props = {
+    assetId: string;
+    siblings?: readonly string[];
+    alt?: Readonly<Record<string, string>>;
+    readonly?: boolean;
+    removeLabel?: string;
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result: MediaEditorResult | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result: MediaEditorResult | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  assetId: { type: String, required: true },
+  siblings: { type: Array, required: false },
+  alt: { type: Object, required: false },
+  readonly: { type: Boolean, required: false },
+  removeLabel: { type: String, required: false },
+  usages: { type: Object, required: false }
+});
+const emit = defineEmits(["close"]);
+</script>
+
+<template>
+  <UModal
+    :title="readonly ? 'Preview' : 'Edit media'"
+    :close="{ onClick: () => emit('close', null) }"
+    :ui="{ content: 'sm:max-w-5xl', body: 'p-0 sm:p-0' }"
+    @update:open="(open) => !open && emit('close', null)"
+  >
+    <template #body>
+      <MLMediaEditorPanel
+        :asset-id="assetId"
+        :siblings="siblings"
+        :alt="alt"
+        :readonly="readonly"
+        :remove-label="removeLabel"
+        :usages="usages"
+        @save="({ alt: a }) => emit('close', { action: 'save', alt: a })"
+        @remove="(id) => emit('close', { action: 'remove', assetId: id })"
+        @cancel="emit('close', null)"
+      />
+    </template>
+  </UModal>
+</template>

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

@@ -0,0 +1,23 @@
+import type { MediaUsage } from './UsageList.vue.js';
+export type MediaEditorResult = {
+    action: 'save';
+    alt: Record<string, string>;
+} | {
+    action: 'remove';
+    assetId: string;
+};
+type __VLS_Props = {
+    assetId: string;
+    siblings?: readonly string[];
+    alt?: Readonly<Record<string, string>>;
+    readonly?: boolean;
+    removeLabel?: string;
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (result: MediaEditorResult | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((result: MediaEditorResult | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,38 @@
+import type { MediaUsage } from './UsageList.vue.js';
+type __VLS_Props = {
+    /** The file to show first. */
+    assetId: string;
+    /** The record's other files, in order. Enables previous / next. */
+    siblings?: readonly string[];
+    /** Current alt text per asset ID. Alt text lives on the host record, not the file. */
+    alt?: Readonly<Record<string, string>>;
+    /** Preview only: no alt editing, no Save. Used from the picker. */
+    readonly?: boolean;
+    /** Label for the remove button, e.g. "Remove from product". Empty hides it. */
+    removeLabel?: string;
+    /** Where each file is used, per asset ID. Omit to hide the section. */
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    currentId: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (assetId: string) => any;
+    cancel: () => any;
+    save: (result: {
+        alt: Record<string, string>;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((assetId: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: ((result: {
+        alt: Record<string, string>;
+    }) => any) | undefined;
+}>, {
+    usages: Readonly<Record<string, MediaUsage[]>>;
+    siblings: readonly string[];
+    alt: Readonly<Record<string, string>>;
+    readonly: boolean;
+    removeLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,220 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useMLMediaAssets } from "../../composables/useMLMediaAssets";
+import { assetName } from "../../utils/assetFormat";
+const props = defineProps({
+  assetId: { type: String, required: true },
+  siblings: { type: Array, required: false, default: () => [] },
+  alt: { type: Object, required: false, default: () => ({}) },
+  readonly: { type: Boolean, required: false, default: false },
+  removeLabel: { type: String, required: false, default: "" },
+  usages: { type: Object, required: false, default: void 0 }
+});
+const emit = defineEmits(["save", "remove", "cancel"]);
+const list = computed(() => {
+  const s = props.siblings.filter(Boolean);
+  return s.includes(props.assetId) ? s : [props.assetId, ...s];
+});
+const index = ref(Math.max(0, list.value.indexOf(props.assetId)));
+const currentId = computed(() => list.value[index.value] ?? props.assetId);
+const library = useMLMediaAssets(list);
+const asset = computed(() => library.get(currentId.value));
+const lookup = computed(() => library.lookup(currentId.value));
+const name = computed(() => asset.value ? assetName(asset.value) : "");
+const kind = computed(() => (asset.value?.kind ?? "").toLowerCase());
+const takesAlt = computed(() => kind.value === "image" || kind.value === "video");
+const alts = ref({ ...props.alt });
+const dirty = computed(() => list.value.some((id) => (alts.value[id] ?? "") !== (props.alt[id] ?? "")));
+const altModel = computed({
+  get: () => alts.value[currentId.value] ?? "",
+  set: (v) => {
+    alts.value = { ...alts.value, [currentId.value]: v };
+  }
+});
+const canPrev = computed(() => index.value > 0);
+const canNext = computed(() => index.value < list.value.length - 1);
+const go = (step) => {
+  index.value = Math.min(list.value.length - 1, Math.max(0, index.value + step));
+};
+function onKey(e) {
+  const t = e.target;
+  if (t && (t.tagName === "TEXTAREA" || t.tagName === "INPUT" || t.isContentEditable)) return;
+  if (e.key === "ArrowLeft" && canPrev.value) go(-1);
+  else if (e.key === "ArrowRight" && canNext.value) go(1);
+}
+const confirmRemove = ref(false);
+watch(currentId, () => {
+  confirmRemove.value = false;
+});
+const usagesHere = computed(() => props.usages?.[currentId.value]);
+const originalUrl = computed(() => asset.value?.previewUrl ?? null);
+defineExpose({ currentId });
+</script>
+
+<template>
+  <div
+    class="flex min-h-0 flex-col"
+    @keydown="onKey"
+  >
+    <div class="grid min-h-0 md:grid-cols-[minmax(0,1fr)_18rem]">
+      <!-- Stage -->
+      <div class="relative grid min-h-72 place-items-center bg-neutral-950 px-12 py-10 md:min-h-[26rem]">
+        <USkeleton
+          v-if="lookup === 'loading'"
+          class="aspect-[4/3] w-full max-w-lg rounded-md bg-white/10"
+        />
+        <div
+          v-else-if="!asset"
+          class="flex flex-col items-center gap-2 text-center text-sm text-neutral-300"
+        >
+          <UIcon
+            name="i-lucide-file-x"
+            class="size-8 text-neutral-400"
+          />
+          {{ lookup === "forbidden" ? "You don't have access to this file." : "This file could not be found." }}
+        </div>
+        <div
+          v-else
+          :key="currentId"
+          class="h-[min(52vh,26rem)] w-full max-w-2xl"
+        >
+          <MLAssetManagerAssetPreview :asset="asset" />
+        </div>
+
+        <UButton
+          v-if="list.length > 1"
+          icon="i-lucide-chevron-left"
+          color="neutral"
+          variant="soft"
+          class="absolute left-2 top-1/2 -translate-y-1/2 rounded-full"
+          aria-label="Previous file"
+          :disabled="!canPrev"
+          @click="go(-1)"
+        />
+        <UButton
+          v-if="list.length > 1"
+          icon="i-lucide-chevron-right"
+          color="neutral"
+          variant="soft"
+          class="absolute right-2 top-1/2 -translate-y-1/2 rounded-full"
+          aria-label="Next file"
+          :disabled="!canNext"
+          @click="go(1)"
+        />
+        <span
+          v-if="list.length > 1"
+          class="absolute bottom-2.5 left-1/2 -translate-x-1/2 text-xs text-neutral-300 tabular-nums"
+          aria-live="polite"
+        >{{ index + 1 }} of {{ list.length }}</span>
+      </div>
+
+      <!-- Side panel -->
+      <div class="flex min-w-0 flex-col gap-5 border-t border-default p-4 md:border-l md:border-t-0">
+        <div class="flex min-w-0 items-start gap-2">
+          <div class="flex min-w-0 flex-1 flex-col gap-1">
+            <span class="truncate text-sm font-semibold">{{ name || "\u2014" }}</span>
+            <div
+              v-if="asset"
+              class="flex flex-wrap gap-1"
+            >
+              <MLMediaKindBadge :kind="asset.kind" />
+              <MLMediaStatusBadge
+                v-if="asset.status !== 'ready'"
+                :status="asset.status"
+              />
+            </div>
+          </div>
+          <UButton
+            v-if="originalUrl"
+            :to="originalUrl"
+            target="_blank"
+            rel="noopener"
+            icon="i-lucide-external-link"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="Open the original in a new tab"
+          />
+        </div>
+
+        <UFormField
+          v-if="takesAlt && !readonly"
+          label="Alt text"
+          :help="kind === 'image' ? 'Describes the image for screen readers and search.' : 'Describes the video for screen readers.'"
+        >
+          <UTextarea
+            v-model="altModel"
+            :rows="3"
+            autoresize
+            class="w-full"
+            :placeholder="kind === 'image' ? 'e.g. Oak lounge chair, front view on a light background' : ''"
+          />
+        </UFormField>
+        <p
+          v-else-if="takesAlt && altModel"
+          class="text-sm"
+        >
+          <span class="block text-[11px] font-semibold uppercase tracking-wider text-dimmed">Alt text</span>
+          {{ altModel }}
+        </p>
+
+        <MLMediaFileFacts :asset="asset" />
+
+        <MLMediaUsageList
+          v-if="usagesHere"
+          :usages="usagesHere"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-wrap items-center gap-2 border-t border-default px-4 py-3">
+      <template v-if="removeLabel && !readonly">
+        <UButton
+          v-if="!confirmRemove"
+          color="error"
+          variant="ghost"
+          icon="i-lucide-x"
+          :label="removeLabel"
+          @click="confirmRemove = true"
+        />
+        <template v-else>
+          <span class="text-sm text-muted">The file stays in the library.</span>
+          <UButton
+            color="error"
+            variant="soft"
+            :label="removeLabel"
+            @click="emit('remove', currentId)"
+          />
+          <UButton
+            color="neutral"
+            variant="ghost"
+            label="Keep"
+            @click="confirmRemove = false"
+          />
+        </template>
+      </template>
+      <span class="me-auto" />
+      <template v-if="readonly">
+        <UButton
+          color="neutral"
+          variant="outline"
+          label="Close"
+          @click="emit('cancel')"
+        />
+      </template>
+      <template v-else>
+        <UButton
+          color="neutral"
+          variant="outline"
+          label="Cancel"
+          @click="emit('cancel')"
+        />
+        <UButton
+          label="Save"
+          :disabled="!dirty"
+          @click="emit('save', { alt: { ...alts } })"
+        />
+      </template>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,38 @@
+import type { MediaUsage } from './UsageList.vue.js';
+type __VLS_Props = {
+    /** The file to show first. */
+    assetId: string;
+    /** The record's other files, in order. Enables previous / next. */
+    siblings?: readonly string[];
+    /** Current alt text per asset ID. Alt text lives on the host record, not the file. */
+    alt?: Readonly<Record<string, string>>;
+    /** Preview only: no alt editing, no Save. Used from the picker. */
+    readonly?: boolean;
+    /** Label for the remove button, e.g. "Remove from product". Empty hides it. */
+    removeLabel?: string;
+    /** Where each file is used, per asset ID. Omit to hide the section. */
+    usages?: Readonly<Record<string, MediaUsage[]>>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    currentId: import("vue").ComputedRef<string>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (assetId: string) => any;
+    cancel: () => any;
+    save: (result: {
+        alt: Record<string, string>;
+    }) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((assetId: string) => any) | undefined;
+    onCancel?: (() => any) | undefined;
+    onSave?: ((result: {
+        alt: Record<string, string>;
+    }) => any) | undefined;
+}>, {
+    usages: Readonly<Record<string, MediaUsage[]>>;
+    siblings: readonly string[];
+    alt: Readonly<Record<string, string>>;
+    readonly: boolean;
+    removeLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;