nuxt-media-library 0.0.44 → 0.0.49

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;

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

@@ -0,0 +1,65 @@
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
+    accept?: readonly string[] | string;
+    label?: string;
+    /** Under the field. Defaults to what the field accepts and its size limit. */
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Bytes. */
+    maxSize?: number | null;
+    /** Shows "No alt text" on a filled image field. Alt text lives on the host record. */
+    missingAlt?: boolean;
+    /** Upload session settings for new files. */
+    visibility?: MediaUploadOptions['visibility'];
+    processingConfig?: MediaUploadOptions['processingConfig'];
+    collectionName?: string | null;
+    /** Show "Select existing", which opens the library picker. */
+    picker?: boolean;
+    /** Replaces the built-in picker, e.g. with the host's own dialog. */
+    onPick?: () => void;
+    /** Show the eye button on the thumbnail, which opens the media editor. */
+    editor?: boolean;
+    /** Label for the editor's remove button. Empty hides it. */
+    removeLabel?: string;
+    /** Replaces the built-in editor. Receives the asset ID. */
+    onOpen?: (assetId: string) => void;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+    /** Alt text for the file, stored on the host record. Edited in the media editor. */
+    'alt'?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (assetId: string) => any;
+    "update:modelValue": (value: string | null) => any;
+    "update:alt": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onUploaded?: ((assetId: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    visibility: "private" | "restricted" | "public";
+    label: string;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    processingConfig: {
+        stepOptions?: Record<string, Record<string, unknown>> | null;
+        useFilenameAsAssetId?: boolean;
+        enableTranscription?: boolean;
+    };
+    collectionName: string | null;
+    disabled: boolean;
+    required: boolean;
+    removeLabel: string;
+    hint: string;
+    missingAlt: boolean;
+    picker: boolean;
+    onPick: () => void;
+    editor: boolean;
+    onOpen: (assetId: string) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,282 @@
+<script setup>
+import { computed } from "vue";
+import { useMLMediaField } from "../../composables/useMLMediaField";
+import { useMLFilePicker } from "../../composables/useMLFilePicker";
+import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
+import { assetDimensions, assetDurationSeconds, assetName, assetSizeBytes, formatBytes, formatDuration } from "../../utils/assetFormat";
+const props = defineProps({
+  accept: { type: [Array, String], required: false, default: "" },
+  label: { type: String, required: false, default: void 0 },
+  hint: { type: String, required: false, default: void 0 },
+  required: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  maxSize: { type: [Number, null], required: false, default: null },
+  missingAlt: { type: Boolean, required: false, default: false },
+  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 },
+  removeLabel: { type: String, required: false, default: "Remove from this field" },
+  onOpen: { type: Function, required: false, default: void 0 }
+});
+const model = defineModel({ type: [String, null], ...{ default: null } });
+const alt = defineModel("alt", { type: null, ...{ default: void 0 } });
+const emit = defineEmits(["uploaded"]);
+const field = useMLMediaField(model, {
+  accept: () => props.accept,
+  maxSize: () => props.maxSize,
+  visibility: props.visibility,
+  processingConfig: props.processingConfig,
+  collectionName: props.collectionName,
+  onUploaded: (id) => emit("uploaded", id)
+});
+const { state, asset, upload, message } = field;
+const helpText = computed(() => {
+  if (props.hint) return props.hint;
+  const parts = [field.acceptLabel.value === "any file" ? "" : `Takes ${field.acceptLabel.value}`];
+  if (props.maxSize) parts.push(`up to ${formatBytes(props.maxSize)}`);
+  return parts.filter(Boolean).join(" ").replace(/^./, (c) => c.toUpperCase());
+});
+const name = computed(() => upload.value?.file.name ?? assetName(asset.value));
+const kind = computed(() => upload.value?.kind ?? asset.value?.kind ?? null);
+const isImage = computed(() => (kind.value ?? "").toLowerCase() === "image");
+const details = computed(() => {
+  const u = upload.value;
+  if (u && state.value === "uploading") {
+    if (u.phase === "failed") return u.error ?? "Upload failed";
+    if (u.phase === "processing") return u.progress != null ? `Processing ${Math.round(u.progress)}%` : "Processing\u2026";
+    return `Uploading ${Math.round(u.progress ?? 0)}% \xB7 ${formatBytes(u.file.size)}`;
+  }
+  const a = asset.value;
+  if (!a) return "";
+  const dims = assetDimensions(a);
+  const duration = assetDurationSeconds(a);
+  return [
+    formatBytes(assetSizeBytes(a)),
+    dims ? `${dims.width} \xD7 ${dims.height}` : "",
+    duration ? formatDuration(duration) : ""
+  ].filter(Boolean).join(" \xB7 ");
+});
+const veilPhase = computed(() => {
+  const p = upload.value?.phase;
+  return state.value === "uploading" && (p === "uploading" || p === "processing" || p === "failed") ? p : null;
+});
+const filePicker = useMLFilePicker();
+const canPick = computed(() => !!props.onPick || props.picker);
+async function pickExisting() {
+  if (props.onPick) return props.onPick();
+  const ids = await filePicker.open({
+    accept: props.accept,
+    max: 1,
+    selected: [model.value],
+    title: props.label ? `Select ${props.label.toLowerCase()}` : "Select file",
+    maxSize: props.maxSize,
+    upload: { visibility: props.visibility, processingConfig: props.processingConfig, collectionName: props.collectionName }
+  });
+  if (ids) {
+    field.clearMessage();
+    model.value = ids[0] ?? null;
+  }
+}
+const mediaEditor = useMLMediaEditor();
+const canOpen = computed(() => state.value === "filled" && !!model.value && (!!props.onOpen || props.editor));
+const showNoAlt = computed(() => isImage.value && (props.missingAlt || alt.value !== void 0 && !alt.value.trim()));
+async function openEditor() {
+  const id = model.value;
+  if (!canOpen.value || !id) return;
+  if (props.onOpen) return props.onOpen(id);
+  const result = await mediaEditor.open(id, {
+    alt: alt.value ?? "",
+    readonly: props.disabled,
+    removeLabel: props.removeLabel
+  });
+  if (result?.action === "save") alt.value = result.alt[id] ?? "";
+  else if (result?.action === "remove") field.clear();
+}
+function changeItems(open) {
+  return [
+    { label: "Upload new", icon: "i-lucide-upload", onSelect: open },
+    { label: "Select existing", icon: "i-lucide-layout-grid", onSelect: () => void pickExisting() }
+  ];
+}
+</script>
+
+<template>
+  <UFormField
+    :label="label"
+    :required="required"
+    :help="message ? void 0 : helpText || void 0"
+    :error="message ?? void 0"
+  >
+    <!-- Empty -->
+    <MLMediaDropzone
+      v-if="state === 'empty'"
+      :accept="field.acceptAttr.value"
+      :multiple="false"
+      :max-size="maxSize"
+      :disabled="disabled"
+      @files="field.onFiles"
+      @rejected="field.onRejected"
+    >
+      <template
+        v-if="canPick"
+        #actions
+      >
+        <UButton
+          size="sm"
+          color="neutral"
+          variant="outline"
+          icon="i-lucide-layout-grid"
+          label="Select existing"
+          :disabled="disabled"
+          @click="pickExisting"
+        />
+      </template>
+    </MLMediaDropzone>
+
+    <!-- Loading the current file -->
+    <div
+      v-else-if="state === 'loading'"
+      class="flex items-center gap-3 rounded-lg border border-default p-2"
+    >
+      <USkeleton class="aspect-[4/3] w-20 rounded-md" />
+      <div class="flex flex-1 flex-col gap-1.5">
+        <USkeleton class="h-3.5 w-2/3" />
+        <USkeleton class="h-3 w-1/3" />
+      </div>
+    </div>
+
+    <!-- Filled, uploading, or pointing at a file that is gone -->
+    <MLMediaDropzone
+      v-else
+      variant="overlay"
+      :accept="field.acceptAttr.value"
+      :multiple="false"
+      :max-size="maxSize"
+      :disabled="disabled || state === 'uploading'"
+      title="Drop to replace"
+      class="rounded-lg"
+      @files="field.onFiles"
+      @rejected="field.onRejected"
+    >
+      <template #default="{ open }">
+        <div
+          class="flex items-center gap-3 rounded-lg border p-2"
+          :class="state === 'missing' ? 'border-warning/50 bg-warning/5' : 'border-default bg-default'"
+        >
+          <div class="group relative shrink-0">
+            <MLMediaThumbnail
+              :asset="upload?.localPreview ? null : asset"
+              :src="upload?.localPreview ?? void 0"
+              :kind="kind"
+              size="md"
+              aspect="landscape"
+            >
+              <MLMediaProgressVeil
+                v-if="veilPhase"
+                :phase="veilPhase"
+                :progress="upload?.progress ?? null"
+                compact
+              />
+            </MLMediaThumbnail>
+            <MLMediaPreviewEye
+              v-if="canOpen"
+              :name="name"
+              class="absolute bottom-1 right-1 z-20"
+              @click="openEditor"
+            />
+          </div>
+
+          <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+            <span
+              v-if="state === 'missing'"
+              class="text-sm font-semibold"
+            >File unavailable</span>
+            <span
+              v-else
+              class="truncate text-sm font-semibold"
+            >{{ name }}</span>
+            <span
+              v-if="state === 'missing'"
+              class="text-xs text-muted"
+            >It was deleted, or you don't have access to it.</span>
+            <span
+              v-else
+              class="truncate text-xs tabular-nums"
+              :class="upload?.phase === 'failed' ? 'text-error' : 'text-muted'"
+            >{{ details }}</span>
+            <span
+              v-if="state === 'filled' && showNoAlt"
+              class="text-xs text-warning"
+            >No alt text</span>
+          </div>
+
+          <div
+            v-if="!disabled"
+            class="flex shrink-0 items-center gap-0.5"
+          >
+            <template v-if="state === 'uploading'">
+              <UButton
+                v-if="upload?.phase === 'failed'"
+                size="sm"
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-rotate-ccw"
+                label="Retry"
+                @click="upload?.retry()"
+              />
+              <UButton
+                v-if="upload?.phase === 'failed'"
+                size="sm"
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-x"
+                aria-label="Remove"
+                @click="field.clear()"
+              />
+              <UButton
+                v-else
+                size="sm"
+                color="neutral"
+                variant="ghost"
+                label="Cancel"
+                @click="upload?.cancel()"
+              />
+            </template>
+            <template v-else>
+              <UDropdownMenu
+                v-if="canPick"
+                :items="changeItems(open)"
+                :content="{ align: 'end' }"
+              >
+                <UButton
+                  size="sm"
+                  variant="ghost"
+                  label="Change"
+                  trailing-icon="i-lucide-chevron-down"
+                />
+              </UDropdownMenu>
+              <UButton
+                v-else
+                size="sm"
+                variant="ghost"
+                label="Change"
+                @click="open"
+              />
+              <UButton
+                size="sm"
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-x"
+                :aria-label="`Remove ${name || 'file'}`"
+                @click="field.clear()"
+              />
+            </template>
+          </div>
+        </div>
+      </template>
+    </MLMediaDropzone>
+  </UFormField>
+</template>

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

@@ -0,0 +1,65 @@
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+type __VLS_Props = {
+    /** Asset kinds the field takes: ['image'], "image,video". Empty means any file. */
+    accept?: readonly string[] | string;
+    label?: string;
+    /** Under the field. Defaults to what the field accepts and its size limit. */
+    hint?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Bytes. */
+    maxSize?: number | null;
+    /** Shows "No alt text" on a filled image field. Alt text lives on the host record. */
+    missingAlt?: boolean;
+    /** Upload session settings for new files. */
+    visibility?: MediaUploadOptions['visibility'];
+    processingConfig?: MediaUploadOptions['processingConfig'];
+    collectionName?: string | null;
+    /** Show "Select existing", which opens the library picker. */
+    picker?: boolean;
+    /** Replaces the built-in picker, e.g. with the host's own dialog. */
+    onPick?: () => void;
+    /** Show the eye button on the thumbnail, which opens the media editor. */
+    editor?: boolean;
+    /** Label for the editor's remove button. Empty hides it. */
+    removeLabel?: string;
+    /** Replaces the built-in editor. Receives the asset ID. */
+    onOpen?: (assetId: string) => void;
+};
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+    /** Alt text for the file, stored on the host record. Edited in the media editor. */
+    'alt'?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    uploaded: (assetId: string) => any;
+    "update:modelValue": (value: string | null) => any;
+    "update:alt": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onUploaded?: ((assetId: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    "onUpdate:alt"?: ((value: string | undefined) => any) | undefined;
+}>, {
+    visibility: "private" | "restricted" | "public";
+    label: string;
+    accept: readonly string[] | string;
+    maxSize: number | null;
+    processingConfig: {
+        stepOptions?: Record<string, Record<string, unknown>> | null;
+        useFilenameAsAssetId?: boolean;
+        enableTranscription?: boolean;
+    };
+    collectionName: string | null;
+    disabled: boolean;
+    required: boolean;
+    removeLabel: string;
+    hint: string;
+    missingAlt: boolean;
+    picker: boolean;
+    onPick: () => void;
+    editor: boolean;
+    onOpen: (assetId: string) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;