nuxt-media-library 0.0.64 → 0.0.65

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

@@ -0,0 +1,98 @@
+import type { AssetDetail } from '../../types/asset.js';
+import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import { type MediaEditorResult } from '../../composables/useMLMediaEditor.js';
+import { type MediaBrowserAction, type MediaBrowserRole } from '../../utils/browserActions.js';
+export type { MediaBrowserAction, MediaBrowserRole };
+type __VLS_Props = {
+    /**
+     * List only these asset IDs (resolved through `backend`'s `resolve`
+     * route, searched and filtered here) instead of the library. A pool the
+     * host owns, e.g. a course's files. null lists the library.
+     */
+    pickFrom?: readonly string[] | null;
+    /** Backend whose `resolve` route reads the files. Defaults to the upload backend. */
+    backend?: string | null;
+    /** Kinds that can be selected. Others are listed but dimmed. Empty means any. */
+    accept?: readonly string[] | string;
+    /** 'none' shows no checkboxes (a click previews); 'single' replaces; 'multi' adds up to `max`. */
+    selection?: 'none' | 'single' | 'multi';
+    /** Most files that can be selected in 'multi'. */
+    max?: number;
+    /** IDs listed first (when not searching), e.g. the files a record already has. */
+    pinned?: readonly string[];
+    /** Upload session settings; shows the dropzone. false hides it. */
+    upload?: MediaUploadOptions | false;
+    /** Bytes, for uploads. */
+    maxSize?: number | null;
+    /**
+     * What can be done to a file, from its menu and (for several) the bar over
+     * the selection: 'preview', 'edit', 'remove', 'delete',
+     * `{ key: 'assign', roles }`, or the host's own `{ key, label, … }`.
+     */
+    actions?: readonly MediaBrowserAction[];
+    /** Grid rows for a fixed-height body; the list scrolls inside it. */
+    bodyClass?: string;
+};
+type __VLS_Slots = {
+    /** Next to the search box, e.g. "Add from library". */
+    'toolbar'?: () => unknown;
+    /** Small labels on a card or row, e.g. "Used in 3 lessons". */
+    'card-badge'?: (p: {
+        asset: AssetDetail;
+    }) => unknown;
+    /** Extra controls on a card or row, next to its menu. */
+    'card-actions'?: (p: {
+        asset: AssetDetail;
+    }) => unknown;
+    /** Replaces the empty state. */
+    'empty'?: (p: {
+        filtering: boolean;
+    }) => unknown;
+    /** Under the list, outside the scroll, e.g. the picker's Done / Cancel. */
+    'footer'?: (p: {
+        selected: string[];
+        summary: string;
+        note: string | null;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    /** Selected IDs, in the order they were chosen. Two-way and live. */
+    'selected'?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (assetIds: string[]) => any;
+    remove: (assetIds: string[]) => any;
+    uploaded: (assetId: string, sessionId: string | null) => any;
+    action: (key: string, assetIds: string[], role?: string | undefined) => any;
+    edit: (assetId: string, result: MediaEditorResult | null) => any;
+    assign: (role: string, assetIds: string[]) => any;
+    "update:selected": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onDelete?: ((assetIds: string[]) => any) | undefined;
+    onRemove?: ((assetIds: string[]) => any) | undefined;
+    onUploaded?: ((assetId: string, sessionId: string | null) => any) | undefined;
+    onAction?: ((key: string, assetIds: string[], role?: string | undefined) => any) | undefined;
+    onEdit?: ((assetId: string, result: MediaEditorResult | null) => any) | undefined;
+    onAssign?: ((role: string, assetIds: string[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: string[]) => any) | undefined;
+}>, {
+    upload: MediaUploadOptions | false;
+    actions: readonly MediaBrowserAction[];
+    backend: string | null;
+    accept: readonly string[] | string;
+    max: number;
+    maxSize: number | null;
+    pickFrom: readonly string[] | null;
+    selection: "none" | "single" | "multi";
+    pinned: readonly string[];
+    bodyClass: 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/Field.d.vue.ts

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

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

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

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

@@ -1,4 +1,4 @@
-import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Kinds the caller takes. Others are listed but dimmed. Empty means any. */
     accept?: readonly string[] | string;

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

@@ -1,13 +1,6 @@
 <script setup>
-import { computed, ref, watch } from "vue";
-import { useMLMediaAssets } from "../../composables/useMLMediaAssets";
-import { useMLMediaBrowse } from "../../composables/useMLMediaBrowse";
-import { useMLMediaUpload } from "../../composables/useMLMediaUpload";
-import { useMLMediaEditor } from "../../composables/useMLMediaEditor";
-import { assetKindMeta } from "../../utils/assetDisplay";
-import { acceptForKinds, describeKinds } from "../../utils/fileAccept";
-import { formatBytes } from "../../utils/assetFormat";
-const ALL_KINDS = ["image", "video", "audio", "document", "model_3d", "archive", "font", "web_app", "image_batch", "other"];
+import { computed, ref } from "vue";
+import MLMediaBrowser from "./Browser.vue";
 const props = defineProps({
   accept: { type: [Array, String], required: false, default: "" },
   max: { type: Number, required: false, default: Number.POSITIVE_INFINITY },
@@ -20,291 +13,44 @@ const props = defineProps({
   bodyClass: { type: String, required: false, default: "max-h-[min(60vh,560px)]" }
 });
 const emit = defineEmits(["done", "cancel"]);
-const acceptKinds = computed(() => {
-  const raw = typeof props.accept === "string" ? props.accept.split(",") : [...props.accept];
-  return raw.map((k) => k.trim().toLowerCase()).filter(Boolean);
-});
-const isAccepted = (kind) => !acceptKinds.value.length || acceptKinds.value.includes((kind ?? "").toLowerCase());
-const notAcceptedReason = computed(() => `Only ${describeKinds(acceptKinds.value)} can be chosen here`);
-const search = ref("");
-const view = ref("grid");
-const kindFilter = ref(acceptKinds.value.length === 1 ? [acceptKinds.value[0]] : []);
-const kindOptions = computed(
-  () => (acceptKinds.value.length ? acceptKinds.value : ALL_KINDS).map((k) => ({ label: assetKindMeta(k).label, value: k }))
-);
-const filtering = computed(() => !!search.value.trim() || kindFilter.value.length > 0);
-const browse = useMLMediaBrowse(
-  () => ({ kind: kindFilter.value[0] ?? null, query: search.value }),
-  props.pickFrom ? { ids: () => props.pickFrom ?? [], backend: () => props.upload?.backend } : {}
-);
 const initial = [...props.selected];
 const chosen = ref([...initial]);
-const limitNote = ref(null);
-const single = computed(() => props.max === 1);
 const changed = computed(() => chosen.value.length !== initial.length || chosen.value.some((id, i) => id !== initial[i]));
-function isChosen(id) {
-  return !!id && chosen.value.includes(id);
-}
-function choose(id) {
-  limitNote.value = null;
-  if (single.value) {
-    chosen.value = [id];
-    return true;
-  }
-  if (chosen.value.length >= props.max) {
-    limitNote.value = `You can choose up to ${props.max}. Unselect one first.`;
-    return false;
-  }
-  chosen.value = [...chosen.value, id];
-  return true;
-}
-function toggle(id) {
-  if (isChosen(id)) {
-    limitNote.value = null;
-    chosen.value = chosen.value.filter((x) => x !== id);
-  } else {
-    choose(id);
-  }
-}
-const pinned = useMLMediaAssets(() => initial, { backend: () => props.upload?.backend });
-const pinnedAssets = computed(() => initial.map((id) => pinned.get(id)).filter((a) => !!a));
-const uploader = useMLMediaUpload(props.upload);
-const rejectNote = ref(null);
-function onFiles(files) {
-  rejectNote.value = null;
-  for (const file of files) {
-    const u = uploader.start(file);
-    void u.created.then((id) => {
-      if (!id) return;
-      u.attached = true;
-      props.onUploaded?.(id, u.sessionId);
-      if (!isChosen(id)) choose(id);
-    });
-  }
-}
-function onRejected(rejected) {
-  const first = rejected[0];
-  if (!first) return;
-  const more = rejected.length > 1 ? ` (and ${rejected.length - 1} more)` : "";
-  rejectNote.value = first.reason === "type" ? `${first.file.name}${more} can't be used here. Only ${describeKinds(acceptKinds.value)}.` : `${first.file.name}${more} is larger than ${props.maxSize ? formatBytes(props.maxSize) : "the limit"}.`;
-}
-const uploadIds = computed(() => new Set(uploader.uploads.value.map((u) => u.assetId).filter(Boolean)));
-const visibleUploads = computed(() => uploader.uploads.value.filter((u) => u.phase !== "canceled"));
-function uploadPhase(u) {
-  return u.phase === "uploading" || u.phase === "processing" || u.phase === "failed" ? u.phase : null;
-}
-const listed = computed(() => {
-  const pinnedIds = new Set(filtering.value ? [] : pinnedAssets.value.map((a) => a.id));
-  const rest = browse.items.value.filter((a) => !pinnedIds.has(a.id) && !uploadIds.value.has(a.id));
-  return filtering.value ? rest : [...pinnedAssets.value, ...rest];
-});
-const initialLoading = computed(() => browse.loading.value && !browse.items.value.length);
-const isEmpty = computed(() => !initialLoading.value && !listed.value.length && !visibleUploads.value.length);
-watch(kindFilter, () => {
-  limitNote.value = null;
-});
-const mediaEditor = useMLMediaEditor();
-function preview(id) {
-  void mediaEditor.open(id, { readonly: true, siblings: listed.value.map((a) => a.id) });
-}
-const footerText = computed(() => {
-  if (limitNote.value) return limitNote.value;
-  const n = chosen.value.length;
-  if (single.value) return n ? "1 selected" : "Nothing selected";
-  return Number.isFinite(props.max) ? `${n} of ${props.max} selected` : `${n} selected`;
-});
 </script>
 
 <template>
-  <div class="flex min-h-0 flex-col">
-    <div class="flex flex-col gap-3 border-b border-default p-4">
-      <div class="flex flex-wrap items-center gap-2">
-        <UInput
-          v-model="search"
-          icon="i-lucide-search"
-          placeholder="Search files"
-          class="min-w-0 flex-1 basis-56"
-          :loading="browse.loading.value && !!search"
-          aria-label="Search files"
+  <MLMediaBrowser
+    v-model:selected="chosen"
+    :pick-from="pickFrom"
+    :accept="accept"
+    :selection="max === 1 ? 'single' : 'multi'"
+    :max="max"
+    :pinned="initial"
+    :upload="upload"
+    :max-size="maxSize"
+    :actions="['preview']"
+    :body-class="bodyClass"
+    @uploaded="(id, sessionId) => props.onUploaded?.(id, sessionId)"
+  >
+    <template #footer="{ summary, note }">
+      <div class="flex flex-wrap items-center gap-2 border-t border-default px-4 py-3">
+        <span
+          class="me-auto text-sm"
+          :class="note ? 'text-warning' : 'text-muted'"
+          aria-live="polite"
+        >{{ summary }}</span>
+        <UButton
+          color="neutral"
+          variant="outline"
+          label="Cancel"
+          @click="emit('cancel')"
         />
-        <UFieldGroup size="md">
-          <UButton
-            icon="i-lucide-layout-grid"
-            color="neutral"
-            :variant="view === 'grid' ? 'soft' : 'outline'"
-            aria-label="Grid view"
-            :aria-pressed="view === 'grid'"
-            @click="view = 'grid'"
-          />
-          <UButton
-            icon="i-lucide-list"
-            color="neutral"
-            :variant="view === 'list' ? 'soft' : 'outline'"
-            aria-label="List view"
-            :aria-pressed="view === 'list'"
-            @click="view = 'list'"
-          />
-        </UFieldGroup>
-      </div>
-      <div
-        v-if="kindOptions.length > 1"
-        class="flex flex-wrap gap-1.5"
-      >
-        <MLMediaFilterPill
-          v-model="kindFilter"
-          label="File type"
-          :options="kindOptions"
-          single
+        <UButton
+          label="Done"
+          :disabled="!changed"
+          @click="emit('done', [...chosen])"
         />
       </div>
-    </div>
-
-    <div
-      class="flex min-h-0 flex-col gap-3 overflow-y-auto p-4"
-      :class="bodyClass"
-    >
-      <MLMediaDropzone
-        :accept="acceptForKinds(acceptKinds)"
-        :multiple="!single"
-        :max-size="maxSize"
-        compact
-        :title="single ? 'Drop a file to add it to the library' : 'Drop files to add them to the library'"
-        button-label="Upload from computer"
-        @files="onFiles"
-        @rejected="onRejected"
-      />
-      <p
-        v-if="rejectNote"
-        class="text-xs text-error"
-      >
-        {{ rejectNote }}
-      </p>
-
-      <UAlert
-        v-if="browse.error.value"
-        color="error"
-        variant="subtle"
-        icon="i-lucide-circle-alert"
-        :title="browse.error.value"
-        :actions="[{ label: 'Try again', color: 'neutral', variant: 'outline', onClick: () => browse.reload() }]"
-      />
-
-      <!-- Loading -->
-      <div
-        v-if="initialLoading"
-        class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-1.5"
-      >
-        <div
-          v-for="i in 12"
-          :key="i"
-          class="flex flex-col items-center gap-2 p-2.5"
-        >
-          <USkeleton class="aspect-square w-full max-w-28 rounded-md" />
-          <USkeleton class="h-3 w-3/4" />
-        </div>
-      </div>
-
-      <!-- Empty -->
-      <UEmpty
-        v-else-if="isEmpty && !browse.error.value"
-        variant="naked"
-        :icon="filtering ? 'i-lucide-search-x' : 'i-lucide-folder-open'"
-        :title="filtering ? 'No files match' : 'No files yet'"
-        :description="filtering ? 'Try another search or clear the file type.' : 'Drop files above to add the first one.'"
-      />
-
-      <!-- Grid -->
-      <div
-        v-else-if="view === 'grid'"
-        class="grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-1.5"
-      >
-        <MLMediaPickerCard
-          v-for="u in visibleUploads"
-          :key="u.key"
-          :src="u.localPreview"
-          :kind="u.kind"
-          :name="u.file.name"
-          :meta="u.phase === 'failed' ? u.error ?? 'Failed' : void 0"
-          :selected="isChosen(u.assetId)"
-          :disabled="!u.assetId || !isAccepted(u.kind)"
-          @toggle="u.assetId && toggle(u.assetId)"
-        >
-          <MLMediaProgressVeil
-            v-if="uploadPhase(u)"
-            :phase="uploadPhase(u)"
-            :progress="u.progress"
-            compact
-          />
-        </MLMediaPickerCard>
-        <MLMediaPickerCard
-          v-for="a in listed"
-          :key="a.id"
-          :asset="a"
-          :selected="isChosen(a.id)"
-          :disabled="!isAccepted(a.kind) || a.status === 'failed'"
-          :disabled-reason="a.status === 'failed' ? 'Processing failed for this file' : notAcceptedReason"
-          :on-preview="() => preview(a.id)"
-          @toggle="toggle(a.id)"
-        />
-      </div>
-
-      <!-- List -->
-      <div
-        v-else
-        class="flex flex-col divide-y divide-default overflow-hidden rounded-lg border border-default"
-      >
-        <MLMediaPickerRow
-          v-for="u in visibleUploads"
-          :key="u.key"
-          :src="u.localPreview"
-          :kind="u.kind"
-          :name="u.file.name"
-          :size="u.phase === 'uploading' ? `${Math.round(u.progress ?? 0)}%` : formatBytes(u.file.size)"
-          :date="u.phase === 'ready' ? 'Just now' : u.phase === 'failed' ? 'Failed' : 'Uploading'"
-          :selected="isChosen(u.assetId)"
-          :disabled="!u.assetId || !isAccepted(u.kind)"
-          @toggle="u.assetId && toggle(u.assetId)"
-        />
-        <MLMediaPickerRow
-          v-for="a in listed"
-          :key="a.id"
-          :asset="a"
-          :selected="isChosen(a.id)"
-          :disabled="!isAccepted(a.kind) || a.status === 'failed'"
-          :disabled-reason="a.status === 'failed' ? 'Processing failed for this file' : notAcceptedReason"
-          @toggle="toggle(a.id)"
-        />
-      </div>
-
-      <UButton
-        v-if="browse.hasMore.value && !initialLoading"
-        class="self-center"
-        color="neutral"
-        variant="outline"
-        size="sm"
-        label="Load more"
-        :loading="browse.loading.value"
-        @click="browse.loadMore()"
-      />
-    </div>
-
-    <div class="flex flex-wrap items-center gap-2 border-t border-default px-4 py-3">
-      <span
-        class="me-auto text-sm"
-        :class="limitNote ? 'text-warning' : 'text-muted'"
-        aria-live="polite"
-      >{{ footerText }}</span>
-      <UButton
-        color="neutral"
-        variant="outline"
-        label="Cancel"
-        @click="emit('cancel')"
-      />
-      <UButton
-        label="Done"
-        :disabled="!changed"
-        @click="emit('done', [...chosen])"
-      />
-    </div>
-  </div>
+    </template>
+  </MLMediaBrowser>
 </template>

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

@@ -1,4 +1,4 @@
-import { type MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
+import type { MediaUploadOptions } from '../../composables/useMLMediaUpload.js';
 type __VLS_Props = {
     /** Kinds the caller takes. Others are listed but dimmed. Empty means any. */
     accept?: readonly string[] | string;

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

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

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

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

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

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

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

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

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

@@ -46,9 +46,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     phase: ProgressVeilPhase | null;
     selected: boolean;
+    selectable: boolean;
     missingAlt: boolean;
     onOpen: () => void;
-    selectable: boolean;
     selecting: boolean;
     phaseDetail: string;
     aspect: "square" | "landscape" | "portrait" | "video";

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

@@ -46,9 +46,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     phase: ProgressVeilPhase | null;
     selected: boolean;
+    selectable: boolean;
     missingAlt: boolean;
     onOpen: () => void;
-    selectable: boolean;
     selecting: boolean;
     phaseDetail: string;
     aspect: "square" | "landscape" | "portrait" | "video";

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

@@ -7,6 +7,8 @@ type __VLS_Props = {
     /** Second line. Defaults to the file extension. */
     meta?: string;
     selected?: boolean;
+    /** Shows the checkbox. False for a list without selection. */
+    selectable?: boolean;
     /** Dimmed and not selectable, e.g. a kind the calling field doesn't accept. */
     disabled?: boolean;
     disabledReason?: string;
@@ -16,6 +18,10 @@ type __VLS_Props = {
 type __VLS_Slots = {
     /** Overlays on the thumbnail, e.g. an upload veil. */
     default?: () => unknown;
+    /** Small labels over the top of the card, e.g. "Used in 3 lessons". */
+    badge?: () => unknown;
+    /** Controls in the top-right corner, e.g. a menu. Usable when the card is disabled. */
+    actions?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
@@ -29,6 +35,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     meta: string;
     selected: boolean;
+    selectable: boolean;
     disabledReason: string;
     onPreview: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -8,6 +8,7 @@ const props = defineProps({
   name: { type: String, required: false, default: void 0 },
   meta: { type: String, required: false, default: void 0 },
   selected: { type: Boolean, required: false, default: false },
+  selectable: { type: Boolean, required: false, default: true },
   disabled: { type: Boolean, required: false, default: false },
   disabledReason: { type: String, required: false, default: void 0 },
   onPreview: { type: Function, required: false, default: void 0 }
@@ -30,7 +31,7 @@ const isTall = computed(() => (resolvedKind.value ?? "").toLowerCase() === "docu
       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"
+      :aria-pressed="selectable ? selected : void 0"
       :disabled="disabled"
       @click="emit('toggle')"
     >
@@ -58,6 +59,7 @@ const isTall = computed(() => (resolvedKind.value ?? "").toLowerCase() === "docu
     </button>
 
     <span
+      v-if="selectable"
       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"
@@ -69,6 +71,20 @@ const isTall = computed(() => (resolvedKind.value ?? "").toLowerCase() === "docu
       />
     </span>
 
+    <div
+      v-if="$slots.badge"
+      class="pointer-events-none absolute right-9 top-2 flex flex-wrap gap-1"
+      :class="selectable ? 'left-8' : 'left-2'"
+    >
+      <slot name="badge" />
+    </div>
+    <div
+      v-if="$slots.actions"
+      class="absolute right-1.5 top-1.5 z-10 flex items-center gap-1"
+    >
+      <slot name="actions" />
+    </div>
+
     <MLMediaPreviewEye
       v-if="onPreview && !disabled"
       :name="resolvedName"

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

@@ -7,6 +7,8 @@ type __VLS_Props = {
     /** Second line. Defaults to the file extension. */
     meta?: string;
     selected?: boolean;
+    /** Shows the checkbox. False for a list without selection. */
+    selectable?: boolean;
     /** Dimmed and not selectable, e.g. a kind the calling field doesn't accept. */
     disabled?: boolean;
     disabledReason?: string;
@@ -16,6 +18,10 @@ type __VLS_Props = {
 type __VLS_Slots = {
     /** Overlays on the thumbnail, e.g. an upload veil. */
     default?: () => unknown;
+    /** Small labels over the top of the card, e.g. "Used in 3 lessons". */
+    badge?: () => unknown;
+    /** Controls in the top-right corner, e.g. a menu. Usable when the card is disabled. */
+    actions?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => any;
@@ -29,6 +35,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     disabled: boolean;
     meta: string;
     selected: boolean;
+    selectable: boolean;
     disabledReason: string;
     onPreview: () => void;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;