nuxt-ui-tools 1.7.0 → 1.8.0

package/dist/module.json

@@ -5,7 +5,7 @@
   "configKey": "nuxtUiTools",
   "docs": "https://ui.nuxt.com/docs/getting-started/installation/nuxt",
   "name": "nuxt-ui-tools",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -81,6 +81,17 @@ function getPublicComponents(runtimeDir, options) {
       global: options.global,
       name: `${prefix}Dashboard${part}`
     })),
+    // File preview
+    {
+      filePath: `${runtimeDir}/file-preview/components/provider/file-preview-provider.vue`,
+      global: options.global,
+      name: `${prefix}FilePreviewProvider`
+    },
+    {
+      filePath: `${runtimeDir}/file-preview/components/shell/file-preview-tools.vue`,
+      global: options.global,
+      name: `${prefix}FilePreviewTools`
+    },
     // Form
     {
       filePath: `${runtimeDir}/form/components/root/form.vue`,
@@ -173,6 +184,11 @@ function setupImports(runtimeDir) {
       { from: "dashboard", name: "useDashboardView" },
       { from: "dashboard", name: "resolveDashboardComparisonRange" }
     ]),
+    // File preview
+    ...withRuntime(runtimeDir, [
+      { from: "file-preview", name: "defineFilePreviewRenderer" },
+      { from: "file-preview", name: "useFilePreview" }
+    ]),
     // Form
     ...withRuntime(runtimeDir, [
       { from: "form", name: "defineFormField" },
@@ -355,6 +371,7 @@ const viewportDefaults = {
 };
 const publicRuntimeDomains = [
   "dashboard",
+  "file-preview",
   "form",
   "i18n",
   "query-prefetch",
@@ -425,6 +442,7 @@ const module$1 = defineNuxtModule({
     setupComponents(resolve("./runtime"), options);
     addPlugin(resolve("./runtime/query-prefetch/plugins/link-prefetch.client"));
     addPlugin(resolve("./runtime/form/plugins/form-api"));
+    addPlugin(resolve("./runtime/file-preview/plugins/file-preview-api"));
     addVitePlugin({
       enforce: "pre",
       name: "nuxt-ui-tools:query-prefetch-macro",

package/dist/runtime/file-preview/components/provider/file-preview-host.d.vue.ts

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

package/dist/runtime/file-preview/components/provider/file-preview-host.vue

@@ -0,0 +1,147 @@
+<script setup>
+import UDrawer from "@nuxt/ui/components/Drawer.vue";
+import UModal from "@nuxt/ui/components/Modal.vue";
+import { useLocalStorage } from "@vueuse/core";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import {
+  getResponsiveValue,
+  useResponsiveValue
+} from "../../../shared/composables/use-responsive-value";
+import { useFilePreview } from "../../composables/use-file-preview-api";
+import { largestFilePreviewContainer, normalizeFilePreviewContainer } from "../../utils/container";
+import { findFilePreviewRenderer } from "../../utils/renderers";
+import FilePreviewShell from "../shell/file-preview-shell.vue";
+const DRAWER_MIN_WIDTH = 420;
+const DRAWER_GUTTER = 56;
+const props = defineProps({
+  instance: { type: Object, required: true }
+});
+const { t } = useUiToolsLocale();
+const api = useFilePreview();
+const expanded = ref(false);
+const drawerWidth = useLocalStorage("nut-file-preview-drawer-width", 940);
+const width = useResponsiveValue("narrow md:wide");
+const narrow = computed(() => width.value === "narrow");
+const renderers = computed(
+  () => props.instance.files.value.map(
+    (item) => findFilePreviewRenderer((item.rendition ?? item).kind, api.renderers.value)
+  )
+);
+const base = computed(() => {
+  const explicit = props.instance.options.mode;
+  const modes = explicit ? [explicit] : renderers.value.map((renderer) => renderer.mode ?? "modal");
+  return largestFilePreviewContainer(
+    modes.map((mode) => normalizeFilePreviewContainer(getResponsiveValue(mode, "string")))
+  );
+});
+const container = computed(() => expanded.value ? "fullscreen" : base.value);
+const compact = computed(
+  () => base.value === "modal" && renderers.value.every((renderer) => renderer.compact === true)
+);
+const canExpand = computed(() => !narrow.value && (base.value !== "fullscreen" || expanded.value));
+const title = computed(() => {
+  const item = props.instance.files.value[props.instance.index.value];
+  return item?.name || t("filePreview.untitled");
+});
+const drawerContent = computed(() => ({
+  disableOutsidePointerEvents: void 0,
+  style: {
+    width: expanded.value ? "100vw" : `min(${Math.max(DRAWER_MIN_WIDTH, drawerWidth.value)}px, calc(100vw - ${DRAWER_GUTTER}px))`
+  }
+}));
+function close() {
+  props.instance.handle.close();
+}
+function handleOpen(open) {
+  if (!open) close();
+}
+function handleDrawerAnimation(open) {
+  if (!open) props.instance.dispose();
+}
+function resize(event) {
+  if (expanded.value || !(event.currentTarget instanceof HTMLElement)) return;
+  const handle = event.currentTarget;
+  handle.setPointerCapture(event.pointerId);
+  const move = (moved) => {
+    drawerWidth.value = Math.round(
+      Math.min(
+        window.innerWidth - DRAWER_GUTTER,
+        Math.max(DRAWER_MIN_WIDTH, window.innerWidth - moved.clientX)
+      )
+    );
+  };
+  const stop = () => {
+    handle.removeEventListener("pointermove", move);
+    handle.removeEventListener("pointerup", stop);
+    handle.removeEventListener("pointercancel", stop);
+  };
+  handle.addEventListener("pointermove", move);
+  handle.addEventListener("pointerup", stop);
+  handle.addEventListener("pointercancel", stop);
+}
+</script>
+
+<template>
+  <UDrawer
+    v-if="base === 'drawer'"
+    :open="instance.open.value"
+    :title="title"
+    :description="title"
+    direction="right"
+    :handle="false"
+    :content="drawerContent"
+    :ui="{
+  overlay: 'bg-(--nut-fp-veil)',
+  content: 'h-dvh max-w-none overflow-hidden rounded-none border-s border-default p-0',
+  container: 'size-full p-0'
+}"
+    @update:open="handleOpen"
+    @animation-end="handleDrawerAnimation"
+  >
+    <template #content>
+      <div
+        v-if="!expanded"
+        class="absolute inset-y-0 start-0 z-30 w-1.5 cursor-col-resize touch-none transition-colors hover:bg-primary/40"
+        aria-hidden="true"
+        data-file-preview-resize=""
+        @pointerdown="resize"
+      />
+      <FilePreviewShell
+        :instance="instance"
+        :container="container"
+        :narrow="narrow"
+        :can-expand="canExpand"
+        :expanded="expanded"
+        @close="close"
+        @expand="expanded = !expanded"
+      />
+    </template>
+  </UDrawer>
+
+  <UModal
+    v-else
+    :open="instance.open.value"
+    :title="title"
+    :description="title"
+    :fullscreen="container === 'fullscreen'"
+    :ui="{
+  overlay: 'bg-(--nut-fp-veil)',
+  content: container === 'fullscreen' ? 'h-dvh max-w-none overflow-hidden rounded-none p-0' : compact ? 'h-auto max-h-[calc(100dvh-32px)] w-[min(468px,calc(100%-32px))] max-w-none overflow-hidden rounded-xl p-0' : 'h-[min(780px,calc(100dvh-48px))] w-[min(1080px,calc(100%-48px))] max-w-none overflow-hidden rounded-xl p-0'
+}"
+    @update:open="handleOpen"
+    @after:leave="instance.dispose()"
+  >
+    <template #content>
+      <FilePreviewShell
+        :instance="instance"
+        :container="container"
+        :narrow="narrow"
+        :can-expand="canExpand"
+        :expanded="expanded"
+        @close="close"
+        @expand="expanded = !expanded"
+      />
+    </template>
+  </UModal>
+</template>

package/dist/runtime/file-preview/components/provider/file-preview-host.vue.d.ts

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

package/dist/runtime/file-preview/components/provider/file-preview-provider.d.vue.ts

@@ -0,0 +1,21 @@
+import type { FilePreviewMarkdownRenderer } from '../../types/index.js';
+type __VLS_Props = {
+    /**
+     * Renders markdown files as HTML in the markdown preview. It must return sanitized HTML. Without
+     * it, markdown files show their source.
+     */
+    markdown?: FilePreviewMarkdownRenderer | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/file-preview/components/provider/file-preview-provider.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { onBeforeUnmount, onMounted, provide } from "vue";
+import { provideFilePreview } from "../../composables/use-file-preview-api";
+import { filePreviewMarkdownKey } from "../../composables/use-file-preview-shell";
+import FilePreviewHost from "./file-preview-host.vue";
+const { markdown = null } = defineProps({
+  markdown: { type: [Function, null], required: false }
+});
+const filePreview = provideFilePreview();
+const { instances } = filePreview;
+let detach = null;
+provide(filePreviewMarkdownKey, markdown);
+onMounted(() => {
+  detach = filePreview.attach();
+});
+onBeforeUnmount(() => detach?.());
+</script>
+
+<template>
+  <slot />
+
+  <FilePreviewHost v-for="instance in instances" :key="instance.id" :instance="instance" />
+</template>

package/dist/runtime/file-preview/components/provider/file-preview-provider.vue.d.ts

@@ -0,0 +1,21 @@
+import type { FilePreviewMarkdownRenderer } from '../../types/index.js';
+type __VLS_Props = {
+    /**
+     * Renders markdown files as HTML in the markdown preview. It must return sanitized HTML. Without
+     * it, markdown files show their source.
+     */
+    markdown?: FilePreviewMarkdownRenderer | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/file-preview/components/renderers/audio-renderer.d.vue.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewRendererProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<FilePreviewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any;
+    error: (error: import("../../types/index.js").FilePreviewRendererError) => any;
+}, string, import("vue").PublicProps, Readonly<FilePreviewRendererProps> & Readonly<{
+    onReady?: ((details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any) | undefined;
+    onError?: ((error: import("../../types/index.js").FilePreviewRendererError) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/audio-renderer.vue

@@ -0,0 +1,83 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useMediaControls } from "@vueuse/core";
+import { computed, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { onFilePreviewKey } from "../../composables/use-file-preview-shell";
+import { formatFilePreviewDuration } from "../../utils/format";
+import MediaControls from "./media-controls.vue";
+const BARS = Array.from(
+  { length: 28 },
+  (_, index) => 18 + Math.abs(Math.sin(index * 1.3) * Math.cos(index * 0.4)) * 62
+);
+defineProps({
+  file: { type: Object, required: true },
+  url: { type: String, required: true },
+  blob: { type: null, required: true },
+  container: { type: String, required: true }
+});
+const emit = defineEmits(["ready", "error"]);
+const { t } = useUiToolsLocale();
+const audio = useTemplateRef("audio");
+const controls = useMediaControls(audio);
+const duration = computed(
+  () => controls.duration.value > 0 ? formatFilePreviewDuration(controls.duration.value) : null
+);
+function handleMetadata() {
+  const element = audio.value;
+  if (!element) return;
+  emit("ready", [
+    { label: t("filePreview.fields.duration"), value: formatFilePreviewDuration(element.duration) }
+  ]);
+}
+onFilePreviewKey([" ", "k", "m"], (event) => {
+  if (event.key === "m") controls.muted.value = !controls.muted.value;
+  else controls.playing.value = !controls.playing.value;
+});
+</script>
+
+<template>
+  <div class="flex size-full items-center justify-center p-5" data-file-preview-audio="">
+    <div class="flex w-full max-w-md flex-col gap-4">
+      <div
+        class="relative flex h-36 items-center justify-center gap-[3px] overflow-hidden rounded-xl bg-linear-135 from-[#3b2f4a] via-[#b8466e] to-primary px-6"
+        aria-hidden="true"
+      >
+        <img
+          v-if="file.file.poster"
+          :src="file.file.poster"
+          alt=""
+          class="absolute inset-0 size-full object-cover"
+        />
+        <template v-else>
+          <i
+            v-for="(height, position) in BARS"
+            :key="position"
+            :class="[
+  'block w-1 rounded-full bg-white/80',
+  controls.playing.value ? 'nut-fp-equalizer' : ''
+]"
+            :style="{ height: `${height}px`, animationDelay: `${position % 7 * -0.13}s` }"
+          />
+          <UIcon
+            name="i-lucide-audio-lines"
+            class="absolute right-3 bottom-3 size-4 text-white/70"
+          />
+        </template>
+      </div>
+      <div class="min-w-0">
+        <p class="m-0 truncate text-sm font-semibold text-highlighted">{{ file.name }}</p>
+        <p v-if="duration" class="m-0 text-xs text-muted tabular-nums">{{ duration }}</p>
+      </div>
+      <audio
+        ref="audio"
+        :src="url"
+        preload="metadata"
+        class="hidden"
+        @loadedmetadata="handleMetadata"
+        @error="emit('error', { reason: 'decode' })"
+      />
+      <MediaControls :controls="controls" variant="audio" compact />
+    </div>
+  </div>
+</template>

package/dist/runtime/file-preview/components/renderers/audio-renderer.vue.d.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewRendererProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<FilePreviewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any;
+    error: (error: import("../../types/index.js").FilePreviewRendererError) => any;
+}, string, import("vue").PublicProps, Readonly<FilePreviewRendererProps> & Readonly<{
+    onReady?: ((details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any) | undefined;
+    onError?: ((error: import("../../types/index.js").FilePreviewRendererError) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/csv-renderer.d.vue.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewRendererProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<FilePreviewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any;
+    error: (error: import("../../types/index.js").FilePreviewRendererError) => any;
+}, string, import("vue").PublicProps, Readonly<FilePreviewRendererProps> & Readonly<{
+    onReady?: ((details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any) | undefined;
+    onError?: ((error: import("../../types/index.js").FilePreviewRendererError) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/csv-renderer.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFilePreviewText } from "../../composables/use-file-preview-text";
+import { parseCsv } from "../../utils/csv";
+import FilePreviewTextLoading from "./file-preview-text-loading.vue";
+const MAX_ROWS = 1e3;
+const NUMBER = /^-?[\d\s  .,]+%?$/u;
+const props = defineProps({
+  file: { type: Object, required: true },
+  url: { type: String, required: true },
+  blob: { type: null, required: true },
+  container: { type: String, required: true }
+});
+const emit = defineEmits(["ready", "error"]);
+const { t } = useUiToolsLocale();
+const content = useFilePreviewText(props);
+const table = computed(() => {
+  const parsed = parseCsv(content.text.value, {
+    delimiter: props.file.extension === "tsv" ? "	" : void 0,
+    maxRows: MAX_ROWS + 1
+  });
+  const [head = [], ...rows] = parsed.rows;
+  const width = Math.max(head.length, ...rows.map((row) => row.length));
+  const columns = Array.from({ length: width }, (_, index) => head[index] ?? "");
+  const numeric = columns.map((_, index) => {
+    const values = rows.map((row) => (row[index] ?? "").trim()).filter(Boolean);
+    return values.length > 0 && values.every((value) => NUMBER.test(value));
+  });
+  return { columns, complete: parsed.complete, delimiter: parsed.delimiter, numeric, rows };
+});
+const facts = computed(
+  () => [
+    t("filePreview.csv.rows", { count: table.value.rows.length.toLocaleString() }),
+    t("filePreview.csv.columns", { count: table.value.columns.length }),
+    t("filePreview.csv.delimiter", {
+      value: table.value.delimiter === "	" ? t("filePreview.csv.tab") : table.value.delimiter
+    }),
+    content.notice.value
+  ].filter((fact) => fact !== null)
+);
+watch(
+  content.status,
+  (status) => {
+    if (status === "error")
+      emit("error", { message: content.error.value?.message, reason: "source" });
+    if (status !== "ready") return;
+    emit("ready", [
+      { label: t("filePreview.fields.rows"), value: table.value.rows.length.toLocaleString() },
+      { label: t("filePreview.fields.columns"), value: String(table.value.columns.length) }
+    ]);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <div
+    v-if="content.status.value === 'ready'"
+    class="absolute inset-0 flex flex-col bg-default"
+    data-file-preview-csv=""
+  >
+    <div class="min-h-0 flex-1 overflow-auto">
+      <table class="min-w-full border-separate border-spacing-0 text-[12.5px] tabular-nums">
+        <thead>
+          <tr>
+            <th
+              class="sticky top-0 left-0 z-20 min-w-10 border-e border-b border-default bg-elevated px-3 py-1.5 text-end font-normal text-dimmed"
+              scope="col"
+            >
+              #
+            </th>
+            <th
+              v-for="(column, index) in table.columns"
+              :key="index"
+              scope="col"
+              :class="[
+  'sticky top-0 z-10 max-w-72 truncate border-e border-b border-default bg-elevated px-3 py-1.5 font-semibold whitespace-nowrap text-toned',
+  table.numeric[index] ? 'text-end' : 'text-start'
+]"
+            >
+              {{ column }}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(row, rowIndex) in table.rows" :key="rowIndex" class="hover:bg-elevated/60">
+            <td
+              class="sticky left-0 z-10 border-e border-b border-(--ui-border-muted) bg-elevated px-3 py-1.5 text-end text-dimmed"
+            >
+              {{ rowIndex + 1 }}
+            </td>
+            <td
+              v-for="(_, index) in table.columns"
+              :key="index"
+              :title="row[index]"
+              :class="[
+  'max-w-72 truncate border-e border-b border-(--ui-border-muted) px-3 py-1.5 whitespace-nowrap text-default',
+  table.numeric[index] ? 'text-end' : 'text-start'
+]"
+            >
+              {{ row[index] ?? "" }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div
+      class="flex shrink-0 flex-wrap gap-x-3.5 gap-y-1 border-t border-default bg-elevated px-3.5 py-1.5 text-[11.5px] text-muted tabular-nums"
+      data-file-preview-facts=""
+    >
+      <span v-for="fact in facts" :key="fact">{{ fact }}</span>
+    </div>
+  </div>
+  <FilePreviewTextLoading v-else />
+</template>

package/dist/runtime/file-preview/components/renderers/csv-renderer.vue.d.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewRendererProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<FilePreviewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any;
+    error: (error: import("../../types/index.js").FilePreviewRendererError) => any;
+}, string, import("vue").PublicProps, Readonly<FilePreviewRendererProps> & Readonly<{
+    onReady?: ((details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any) | undefined;
+    onError?: ((error: import("../../types/index.js").FilePreviewRendererError) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/fallback-renderer.d.vue.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewRendererProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<FilePreviewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any;
+    error: (error: import("../../types/index.js").FilePreviewRendererError) => any;
+}, string, import("vue").PublicProps, Readonly<FilePreviewRendererProps> & Readonly<{
+    onReady?: ((details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any) | undefined;
+    onError?: ((error: import("../../types/index.js").FilePreviewRendererError) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/fallback-renderer.vue

@@ -0,0 +1,41 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { computed, onMounted } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFilePreview } from "../../composables/use-file-preview-api";
+import { downloadFilePreviewItem } from "../../utils/download";
+import { findFilePreviewRenderer } from "../../utils/renderers";
+import FilePreviewMessage from "../shell/file-preview-message.vue";
+const props = defineProps({
+  file: { type: Object, required: true },
+  url: { type: String, required: true },
+  blob: { type: null, required: true },
+  container: { type: String, required: true }
+});
+const emit = defineEmits(["ready", "error"]);
+const { t } = useUiToolsLocale();
+const api = useFilePreview();
+const icon = computed(() => findFilePreviewRenderer(props.file.kind, api.renderers.value).icon);
+const extension = computed(() => props.file.extension?.toUpperCase() ?? null);
+onMounted(() => emit("ready"));
+</script>
+
+<template>
+  <FilePreviewMessage
+    :icon="icon"
+    :badge="extension"
+    :title="t('filePreview.fallback.title')"
+    :description="
+  extension ? t('filePreview.fallback.description', { extension }) : t('filePreview.fallback.descriptionUnnamed')
+"
+    data-file-preview-fallback=""
+  >
+    <UButton
+      v-if="file.file.download !== false"
+      icon="i-lucide-download"
+      :label="t('filePreview.download')"
+      data-file-preview-download=""
+      @click="downloadFilePreviewItem(file)"
+    />
+  </FilePreviewMessage>
+</template>

package/dist/runtime/file-preview/components/renderers/fallback-renderer.vue.d.ts

@@ -0,0 +1,10 @@
+import type { FilePreviewRendererProps } from '../../types/index.js';
+declare const __VLS_export: import("vue").DefineComponent<FilePreviewRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any;
+    error: (error: import("../../types/index.js").FilePreviewRendererError) => any;
+}, string, import("vue").PublicProps, Readonly<FilePreviewRendererProps> & Readonly<{
+    onReady?: ((details?: readonly import("../../types/index.js").FilePreviewDetail[] | undefined) => any) | undefined;
+    onError?: ((error: import("../../types/index.js").FilePreviewRendererError) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/file-preview-code.d.vue.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    text: string;
+    json: boolean;
+    facts: readonly string[];
+    tools?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;