nuxt-ui-tools 1.23.0 → 1.25.0

package/dist/runtime/display/components/blocks/display-list.vue

@@ -0,0 +1,295 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { fileExtensionLabel, formatFileSize } from "../../../shared/utils/file";
+import { isString } from "../../../shared/utils/predicate";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayFilePreview } from "../../composables/use-display-file-preview";
+import { useDisplayIcons } from "../../composables/use-display-icons";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { useDisplayReveal } from "../../composables/use-display-reveal";
+import { useDisplayUrlActions } from "../../composables/use-display-url";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { displayContentText, isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { displayToneClass } from "../../utils/tone";
+import { downloadDisplayUrl, openDisplayUrl } from "../../utils/urls";
+import DisplayChip from "../parts/display-chip.vue";
+import DisplayEmptyLine from "../parts/display-empty-line.vue";
+import DisplayLoadError from "../parts/display-load-error.vue";
+import DisplayMore from "../parts/display-more.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "bullets",
+  title = void 0,
+  items,
+  columns = 2,
+  preview = true,
+  max = void 0,
+  step = void 0,
+  empty = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  items: { type: Array, required: true },
+  columns: { type: Number, required: false },
+  preview: { type: Boolean, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false },
+  max: { type: Number, required: false },
+  step: { type: Number, required: false },
+  empty: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true }
+});
+const LIST_CLASSES = {
+  bullets: "flex flex-col gap-1.5",
+  checks: "flex flex-col gap-1.5",
+  chips: "flex flex-wrap gap-1.5",
+  columns: "block",
+  files: "flex flex-col divide-y divide-muted rounded-[var(--nut-display-radius)] border border-default",
+  icons: "flex flex-col gap-1.5",
+  numbered: "flex flex-col gap-1.5",
+  steps: "flex flex-col"
+};
+const ITEM_CLASSES = {
+  bullets: "relative ps-4",
+  checks: "flex items-start gap-2",
+  chips: "inline-flex",
+  columns: "relative mb-1.5 break-inside-avoid ps-4",
+  files: "flex min-w-0 items-center gap-2.5 px-2.5 py-2",
+  icons: "flex items-start gap-2",
+  numbered: "flex items-start gap-2.5",
+  steps: "relative grid grid-cols-[1.375rem_minmax(0,1fr)] gap-x-2.5 pb-3 before:absolute before:start-[0.6875rem] before:top-6 before:bottom-0 before:w-px before:bg-[var(--ui-border)] last:pb-0 last:before:hidden"
+};
+const MARKER_CLASSES = {
+  bullets: "absolute start-1 top-[0.6em] size-1.5 rounded-full bg-[var(--ui-border-accented)]",
+  checks: "mt-0.5 size-4 shrink-0",
+  chips: "",
+  columns: "absolute start-1 top-[0.6em] size-1.5 rounded-full bg-[var(--ui-border-accented)]",
+  files: "grid h-8 w-7 shrink-0 place-items-center rounded-[4px] bg-[var(--nut-tone)] text-[8.5px] font-extrabold tracking-[0.02em] text-[var(--nut-tone-contrast)]",
+  icons: "mt-0.5 size-4 shrink-0 text-muted",
+  numbered: "grid size-5 shrink-0 place-items-center rounded-full bg-elevated text-[11px] font-bold text-toned",
+  steps: "grid size-5.5 place-items-center rounded-full text-[11px] font-bold"
+};
+const FILE_TONES = [
+  [["pdf"], "error"],
+  [["xls", "xlsx", "csv", "ods"], "success"],
+  [["doc", "docx", "odt", "txt", "md"], "info"],
+  [["png", "jpg", "jpeg", "gif", "webp", "svg", "avif"], "secondary"],
+  [["zip", "rar", "7z", "gz"], "warning"]
+];
+const { t, code } = useDisplayLocale();
+const icons = useDisplayIcons();
+const filePreview = useDisplayFilePreview();
+const links = useDisplayUrlActions();
+const appUi = useDisplayAppUi("list");
+const reveal = useDisplayReveal({ items: () => items, max: () => max, step: () => step });
+const files = computed(
+  () => items.map((item) => ({
+    item,
+    label: fileExtensionLabel({ name: fileName(item), type: item.type }),
+    size: item.size === void 0 ? void 0 : formatFileSize(item.size, code.value)
+  }))
+);
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      action: "ms-auto shrink-0",
+      description: variant === "files" ? "text-[11px] text-dimmed" : "text-xs text-muted",
+      empty: "",
+      item: ITEM_CLASSES[variant],
+      list: `m-0 list-none p-0 text-sm ${LIST_CLASSES[variant]}`,
+      marker: MARKER_CLASSES[variant],
+      meta: "ms-auto shrink-0 text-xs text-dimmed",
+      more: "self-start",
+      root: "flex min-w-0 flex-col gap-2",
+      text: variant === "files" ? "truncate font-medium text-highlighted" : "min-w-0 text-default",
+      title: "text-sm font-semibold text-toned"
+    },
+    appUi.value,
+    ui
+  )
+);
+const ordered = computed(() => variant === "numbered" || variant === "steps");
+function fileName(item) {
+  return item.name ?? displayContentText(item.text) ?? (isString(item.href) ? item.href : "");
+}
+function fileTone(item) {
+  const extension = fileName(item).split(".").at(-1)?.toLowerCase() ?? "";
+  return FILE_TONES.find(([extensions]) => extensions.includes(extension))?.[1] ?? "neutral";
+}
+function stepState(item) {
+  if (item.done) return "done";
+  return item.current ? "current" : "todo";
+}
+function stepClass(item) {
+  const state = stepState(item);
+  if (state === "done")
+    return "bg-[var(--nut-display-success-soft)] text-[var(--nut-display-success-ink)]";
+  if (state === "current")
+    return "bg-[var(--nut-tone)] text-[var(--nut-tone-contrast)] ring-3 ring-[var(--nut-tone-soft)]";
+  return "bg-elevated text-dimmed";
+}
+function openFile(event, index) {
+  const href = items[index]?.href;
+  if (!href) return;
+  const previewed = preview && filePreview.open(
+    items.flatMap(
+      (item) => item.href ? [{ mime: item.type, name: fileName(item), size: item.size, src: item.href }] : []
+    ),
+    items.slice(0, index).filter((item) => item.href).length
+  );
+  if (previewed) {
+    event.preventDefault();
+    return;
+  }
+  if (isString(href)) return;
+  event.preventDefault();
+  void links.run(`open-${index}`, () => openDisplayUrl(href));
+}
+function downloadFile(index) {
+  const item = items[index];
+  if (!item?.href) return;
+  const href = item.href;
+  void links.run(`download-${index}`, () => downloadDisplayUrl(href, fileName(item)));
+}
+</script>
+
+<template>
+  <DisplaySkeleton v-if="loading" :count="Math.min(Math.max(items.length, 2), 5)" />
+  <div v-else :class="classes.root" data-display="list" :data-variant="variant">
+    <div v-if="!isDisplayContentEmpty(title)" :class="classes.title">
+      <DisplayRender :content="title" />
+    </div>
+    <DisplayEmptyLine v-if="!items.length" :content="empty" :class="classes.empty" />
+    <component
+      :is="ordered ? 'ol' : 'ul'"
+      v-else
+      :class="classes.list"
+      :style="variant === 'columns' ? { columnCount: columns, columnGap: '1.25rem' } : void 0"
+    >
+      <li
+        v-for="(item, index) in reveal.visible.value"
+        :key="index"
+        :class="[
+  classes.item,
+  item.tone ? displayToneClass(item.tone) : displayToneClass('primary')
+]"
+        :data-state="
+  variant === 'steps' ? stepState(item) : variant === 'checks' ? item.done ? 'done' : 'todo' : void 0
+"
+      >
+        <template v-if="variant === 'chips'">
+          <DisplayChip
+            :chip="{ icon: item.icon, size: 'md', tone: item.tone ?? 'neutral' }"
+            :content="item.text"
+            :title="resolveDisplayText(item.tooltip)"
+          />
+        </template>
+        <template v-else-if="variant === 'files'">
+          <span :class="[classes.marker, displayToneClass(fileTone(item))]" aria-hidden="true">
+            {{ files[index]?.label }}
+          </span>
+          <div class="min-w-0 flex-1">
+            <div :class="classes.text">
+              <a
+                v-if="item.href"
+                :href="isString(item.href) ? item.href : '#'"
+                target="_blank"
+                rel="noopener"
+                class="hover:underline"
+                :aria-busy="links.pending.value === `open-${index}` || void 0"
+                @click="openFile($event, index)"
+              >
+                <DisplayRender :content="item.text" />
+              </a>
+              <DisplayRender v-else :content="item.text" />
+            </div>
+            <div
+              v-if="files[index]?.size || !isDisplayContentEmpty(item.description)"
+              :class="classes.description"
+            >
+              {{ files[index]?.size
+              }}<template v-if="files[index]?.size && !isDisplayContentEmpty(item.description)">
+                ·
+              </template>
+              <DisplayRender :content="item.description" />
+            </div>
+          </div>
+          <UButton
+            v-if="item.href"
+            :aria-label="t('display.download')"
+            :loading="
+  links.pending.value === `download-${index}` || links.pending.value === `open-${index}`
+"
+            icon="i-lucide-download"
+            color="neutral"
+            variant="ghost"
+            size="xs"
+            square
+            :class="classes.action"
+            data-display-download
+            @click="downloadFile(index)"
+          />
+        </template>
+        <template v-else>
+          <span
+            v-if="variant === 'bullets' || variant === 'columns'"
+            :class="classes.marker"
+            aria-hidden="true"
+          />
+          <span v-else-if="variant === 'numbered'" :class="classes.marker" aria-hidden="true">{{
+            index + 1
+          }}</span>
+          <UIcon
+            v-else-if="variant === 'icons'"
+            :name="item.icon ?? icons.chevronRight"
+            :class="[classes.marker, item.tone ? 'text-[var(--nut-tone-ink)]' : '']"
+          />
+          <UIcon
+            v-else-if="variant === 'checks'"
+            :name="item.done ? icons.success : 'i-lucide-circle'"
+            :class="[
+  classes.marker,
+  item.done ? 'text-[var(--nut-display-success-ink)]' : 'text-dimmed'
+]"
+          />
+          <span
+            v-else-if="variant === 'steps'"
+            :class="[classes.marker, stepClass(item)]"
+            aria-hidden="true"
+          >
+            <UIcon v-if="item.done" :name="icons.check" class="size-3" />
+            <template v-else>{{ index + 1 }}</template>
+          </span>
+          <div class="min-w-0 flex-1">
+            <div
+              :class="[
+  classes.text,
+  variant === 'steps' ? stepState(item) === 'todo' ? 'leading-[1.375rem] font-medium text-muted' : 'leading-[1.375rem] font-semibold text-highlighted' : '',
+  variant === 'checks' && !item.done ? 'text-muted' : ''
+]"
+            >
+              <DisplayRender :content="item.text" />
+            </div>
+            <div v-if="!isDisplayContentEmpty(item.description)" :class="classes.description">
+              <DisplayRender :content="item.description" />
+            </div>
+          </div>
+          <span v-if="!isDisplayContentEmpty(item.meta)" :class="classes.meta"
+            ><DisplayRender :content="item.meta"
+          /></span>
+        </template>
+      </li>
+    </component>
+    <DisplayLoadError v-if="links.failed.value" @retry="links.failed.value?.retry()" />
+    <DisplayMore
+      v-if="reveal.hidden.value"
+      :count="reveal.next.value"
+      :class="classes.more"
+      @reveal="reveal.reveal"
+    />
+  </div>
+</template>

package/dist/runtime/display/components/blocks/display-list.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayListProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayListProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-media.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayMediaProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayMediaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayMediaProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-media.vue

@@ -0,0 +1,326 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import ULink from "@nuxt/ui/components/Link.vue";
+import { computed, ref } from "vue";
+import { fileExtensionLabel, fileNameFromUrl, formatFileSize } from "../../../shared/utils/file";
+import { isString } from "../../../shared/utils/predicate";
+import { useDisplayAppUi } from "../../composables/use-display-config";
+import { useDisplayFilePreview } from "../../composables/use-display-file-preview";
+import { useDisplayLocale } from "../../composables/use-display-locale";
+import { useDisplayUrlActions, useResolvedDisplayUrl } from "../../composables/use-display-url";
+import { resolveDisplayClasses } from "../../utils/classes";
+import { isDisplayContentEmpty, resolveDisplayText } from "../../utils/content";
+import { downloadDisplayUrl, openDisplayUrl } from "../../utils/urls";
+import DisplayActions from "../parts/display-actions.vue";
+import DisplayLoadError from "../parts/display-load-error.vue";
+import DisplayRender from "../parts/display-render";
+import DisplaySkeleton from "../parts/display-skeleton.vue";
+const {
+  variant = "image",
+  src = void 0,
+  alt = void 0,
+  caption = void 0,
+  images = void 0,
+  max = 3,
+  thumbnail = void 0,
+  title = void 0,
+  duration = void 0,
+  name = void 0,
+  size = void 0,
+  type = void 0,
+  pages = void 0,
+  href = void 0,
+  description = void 0,
+  aspect = "16 / 9",
+  preview = true,
+  actions = void 0,
+  loading = false,
+  ui = void 0
+} = defineProps({
+  variant: { type: String, required: false },
+  src: { type: [String, Function], required: false },
+  alt: { type: String, required: false },
+  caption: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  images: { type: Array, required: false },
+  max: { type: Number, required: false },
+  thumbnail: { type: String, required: false },
+  title: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  duration: { type: [String, Number, Function], required: false },
+  name: { type: String, required: false },
+  size: { type: Number, required: false },
+  type: { type: String, required: false },
+  pages: { type: Number, required: false },
+  href: { type: [String, Function], required: false },
+  description: { type: [String, Number, Function, Object, Boolean, null, Array], required: false, skipCheck: true },
+  aspect: { type: String, required: false },
+  preview: { type: Boolean, required: false },
+  actions: { type: Array, required: false },
+  loading: { type: Boolean, required: false },
+  ui: { type: Object, required: false }
+});
+const { t, code } = useDisplayLocale();
+const filePreview = useDisplayFilePreview();
+const appUi = useDisplayAppUi("media");
+const playing = ref(false);
+const links = useDisplayUrlActions();
+const shown = useResolvedDisplayUrl(
+  () => variant === "image" || variant === "video" || variant === "gallery" && !images ? src : void 0
+);
+const gallery = computed(
+  () => images ?? (shown.url.value ? [{ alt, src: shown.url.value }] : [])
+);
+const tiles = computed(() => gallery.value.slice(0, Math.max(1, max)));
+const hiddenCount = computed(() => gallery.value.length - tiles.value.length);
+const fileName = computed(() => name ?? (isString(src) ? fileNameFromUrl(src) : ""));
+const documentMeta = computed(
+  () => [
+    fileExtensionLabel({ name: fileName.value, type }),
+    size === void 0 ? void 0 : formatFileSize(size, code.value),
+    pages === void 0 ? void 0 : t("display.pages", { count: pages })
+  ].filter(Boolean).join(" \xB7 ")
+);
+const documentActions = computed(
+  () => actions ?? (src ? [
+    {
+      icon: "i-lucide-eye",
+      label: t("display.open"),
+      loading: links.pending.value === "open",
+      onClick: openDocument
+    },
+    {
+      icon: "i-lucide-download",
+      label: t("display.download"),
+      loading: links.pending.value === "download",
+      onClick: downloadDocument
+    }
+  ] : [])
+);
+const domain = computed(() => {
+  if (!isString(href)) return "";
+  try {
+    return new URL(href).hostname.replace(/^www\./u, "");
+  } catch {
+    return href;
+  }
+});
+const galleryGrid = computed(() => {
+  const count = tiles.value.length;
+  if (count >= 3) return "grid-cols-[2fr_1fr] grid-rows-2 [&>*:first-child]:row-span-2";
+  return count === 2 ? "grid-cols-2" : "grid-cols-1";
+});
+const classes = computed(
+  () => resolveDisplayClasses(
+    {
+      actions: "mt-2 flex flex-wrap gap-1.5",
+      body: "min-w-0 flex-1",
+      caption: "flex items-center gap-1.5 text-xs text-muted",
+      description: "line-clamp-2 text-xs text-muted",
+      domain: "flex items-center gap-1.5 text-xs text-muted",
+      duration: "absolute end-2 bottom-2 rounded-[4px] bg-black/60 px-1.5 py-px text-[11px] font-semibold text-white",
+      frame: "relative w-full overflow-hidden rounded-[var(--nut-display-radius)] bg-elevated",
+      grid: `grid w-full gap-1 overflow-hidden rounded-[var(--nut-display-radius)] ${galleryGrid.value}`,
+      image: "size-full object-cover",
+      meta: "mt-0.5 text-xs text-dimmed",
+      name: "text-sm font-semibold break-all text-highlighted",
+      overflow: "absolute inset-0 grid place-items-center bg-black/50 text-base font-bold text-white",
+      page: "flex h-19 w-15 shrink-0 flex-col gap-1 overflow-hidden rounded-[4px] border border-default bg-white p-1.5",
+      play: "grid size-12 place-items-center rounded-full bg-white/90 text-black shadow-lg transition-transform group-hover:scale-105",
+      root: variant === "document" ? "flex min-w-0 gap-3 rounded-[var(--nut-display-radius)] border border-default p-2.5" : variant === "link" ? "flex min-w-0 overflow-hidden rounded-[var(--nut-display-radius)] border border-default transition-colors hover:bg-elevated" : "m-0 flex min-w-0 flex-col gap-1.5",
+      thumbnail: "w-24 shrink-0 object-cover",
+      tile: "relative min-h-0 overflow-hidden bg-elevated",
+      title: "text-sm font-semibold text-highlighted"
+    },
+    appUi.value,
+    ui
+  )
+);
+function openImages(index) {
+  if (!preview) return;
+  filePreview.open(
+    gallery.value.map((image) => ({ name: image.alt, src: image.src })),
+    index
+  );
+}
+function openDocument() {
+  if (!src) return;
+  if (preview && filePreview.open([{ mime: type, name: fileName.value, size, src }])) return;
+  void links.run("open", () => openDisplayUrl(src));
+}
+function downloadDocument() {
+  if (src) void links.run("download", () => downloadDisplayUrl(src, fileName.value || void 0));
+}
+function openLink() {
+  if (href) void links.run("open", () => openDisplayUrl(href));
+}
+</script>
+
+<template>
+  <DisplaySkeleton
+    v-if="loading"
+    :layout="variant === 'document' || variant === 'link' ? 'card' : 'media'"
+  />
+  <figure
+    v-else-if="variant === 'image'"
+    :class="classes.root"
+    data-display="media"
+    data-variant="image"
+  >
+    <component
+      :is="preview && filePreview.available ? 'button' : 'div'"
+      :type="preview && filePreview.available ? 'button' : void 0"
+      :class="[classes.frame, preview && filePreview.available ? 'cursor-zoom-in' : '']"
+      :style="{ aspectRatio: aspect }"
+      @click="openImages(0)"
+    >
+      <img
+        v-if="shown.url.value"
+        :src="shown.url.value"
+        :alt="alt ?? ''"
+        :class="classes.image"
+        loading="lazy"
+      />
+      <span v-else-if="shown.pending.value" class="nut-dash-shimmer absolute inset-0" />
+    </component>
+    <figcaption v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+      <DisplayRender :content="caption" />
+    </figcaption>
+  </figure>
+  <figure
+    v-else-if="variant === 'gallery'"
+    :class="classes.root"
+    data-display="media"
+    data-variant="gallery"
+  >
+    <div :class="classes.grid" :style="{ aspectRatio: aspect }">
+      <button
+        v-for="(image, index) in tiles"
+        :key="index"
+        type="button"
+        :class="[
+  classes.tile,
+  preview && filePreview.available ? 'cursor-zoom-in' : 'cursor-default'
+]"
+        @click="openImages(index)"
+      >
+        <img :src="image.src" :alt="image.alt ?? ''" :class="classes.image" loading="lazy" />
+        <span v-if="hiddenCount > 0 && index === tiles.length - 1" :class="classes.overflow"
+          >+{{ hiddenCount }}</span
+        >
+      </button>
+    </div>
+    <figcaption v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+      <DisplayRender :content="caption" />
+    </figcaption>
+  </figure>
+  <figure
+    v-else-if="variant === 'video'"
+    :class="classes.root"
+    data-display="media"
+    data-variant="video"
+  >
+    <div :class="[classes.frame, 'bg-black']" :style="{ aspectRatio: aspect }">
+      <video
+        v-if="playing || !thumbnail"
+        :src="shown.url.value"
+        :poster="thumbnail"
+        :autoplay="playing"
+        controls
+        preload="metadata"
+        :class="classes.image"
+      />
+      <button
+        v-else
+        type="button"
+        class="group absolute inset-0 grid cursor-pointer place-items-center"
+        :aria-label="t('display.play')"
+        @click="playing = true"
+      >
+        <img :src="thumbnail" alt="" :class="[classes.image, 'absolute inset-0']" />
+        <span class="absolute inset-0 bg-gradient-to-t from-black/55 to-transparent to-45%" />
+        <span :class="[classes.play, 'relative']"
+          ><UIcon name="i-lucide-play" class="size-5 translate-x-px"
+        /></span>
+        <span
+          v-if="!isDisplayContentEmpty(title)"
+          :class="[classes.title, 'absolute start-3 bottom-2 text-white']"
+        >
+          <DisplayRender :content="title" />
+        </span>
+        <span v-if="duration !== void 0" :class="classes.duration">{{
+          resolveDisplayText(duration)
+        }}</span>
+      </button>
+    </div>
+    <figcaption v-if="!isDisplayContentEmpty(caption)" :class="classes.caption">
+      <DisplayRender :content="caption" />
+    </figcaption>
+  </figure>
+  <div
+    v-else-if="variant === 'document'"
+    :class="classes.root"
+    data-display="media"
+    data-variant="document"
+  >
+    <img
+      v-if="thumbnail"
+      :src="thumbnail"
+      alt=""
+      :class="[classes.page, 'p-0 object-cover object-top']"
+    />
+    <div v-else :class="classes.page" aria-hidden="true">
+      <i class="mb-0.5 h-1 w-3/5 rounded-full bg-[var(--nut-display-primary)]" />
+      <i
+        v-for="width in [100, 92, 100, 78, 96, 60]"
+        :key="width"
+        class="h-0.5 rounded-full bg-[#e5e1db]"
+        :style="{ width: `${width}%` }"
+      />
+    </div>
+    <div :class="classes.body">
+      <div :class="classes.name">{{ fileName }}</div>
+      <div v-if="documentMeta" :class="classes.meta">{{ documentMeta }}</div>
+      <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+        <DisplayRender :content="description" />
+      </div>
+      <DisplayActions
+        v-if="documentActions.length"
+        :actions="documentActions"
+        size="xs"
+        :class="classes.actions"
+      />
+    </div>
+  </div>
+  <component
+    :is="isString(href) ? ULink : 'button'"
+    v-else
+    v-bind="isString(href) ? { target: '_blank', to: href } : { type: 'button' }"
+    :class="[classes.root, isString(href) ? '' : 'w-full cursor-pointer text-start']"
+    :aria-busy="links.pending.value === 'open' || void 0"
+    data-display="media"
+    data-variant="link"
+    @click="isString(href) ? void 0 : openLink()"
+  >
+    <div :class="[classes.body, 'px-3 py-2.5']">
+      <div v-if="domain" :class="classes.domain">
+        <UIcon name="i-lucide-globe" class="size-3.5 shrink-0" />{{ domain }}
+      </div>
+      <div :class="[classes.title, 'mt-0.5 flex items-center gap-1.5']">
+        <DisplayRender :content="title ?? (isString(href) ? href : void 0)" />
+        <UIcon
+          v-if="links.pending.value === 'open'"
+          name="i-lucide-loader-circle"
+          class="size-3.5 shrink-0 animate-spin text-muted"
+        />
+      </div>
+      <div v-if="!isDisplayContentEmpty(description)" :class="classes.description">
+        <DisplayRender :content="description" />
+      </div>
+    </div>
+    <img v-if="thumbnail" :src="thumbnail" alt="" :class="classes.thumbnail" loading="lazy" />
+  </component>
+  <DisplayLoadError
+    v-if="!loading && (links.failed.value || shown.failed.value)"
+    class="mt-1.5"
+    @retry="links.failed.value ? links.failed.value.retry() : shown.retry()"
+  />
+</template>

package/dist/runtime/display/components/blocks/display-media.vue.d.ts

@@ -0,0 +1,4 @@
+import type { DisplayMediaProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayMediaProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayMediaProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/display/components/blocks/display-meter.d.vue.ts

@@ -0,0 +1,4 @@
+import type { DisplayMeterProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<DisplayMeterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DisplayMeterProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;