nuxt-ui-tools 1.6.5 → 1.8.0

package/dist/runtime/dashboard/types/runtime.d.ts

@@ -4,6 +4,7 @@ import type { LazyTextValue } from '../../shared/types/utils.js';
 import type { DashboardOptionsMenuBindings } from './controls.js';
 import type { DashboardFilterBuilder, DashboardFilterLike, DashboardOption } from './filters.js';
 import type { DashboardCondition, DashboardSourceLike, DashboardStage } from './resource.js';
+import type { DashboardViewBadge } from './schema.js';
 /**
  * Runtime (type-erased) view of the schema. The public schema types carry precise generics; the
  * runtime reads the same objects through these shapes after one normalization step.
@@ -48,6 +49,8 @@ export interface DashboardRuntimeSchema extends DashboardRuntimeScopeInput {
     defaultView?: string;
     /** Views in declaration order. Each input is the object the schema declared. */
     views: [key: string, view: DashboardRuntimeScopeInput][];
+    /** Badges of the view tabs, read from the root data. */
+    badges?: (context: DashboardRuntimeDeriveContext) => Record<string, DashboardViewBadge>;
 }
 /**
  * Option list behind one filter control, static or remote. Both option composables return this

package/dist/runtime/dashboard/types/schema.d.ts

@@ -78,6 +78,7 @@ export interface DashboardSchema<TFilters extends DashboardFilterMap = Dashboard
     readonly derive?: (context: never) => TDerive;
     readonly views?: TViews;
     readonly defaultView?: keyof TViews & string;
+    readonly badges?: (context: never) => DashboardViewBadges<keyof TViews & string>;
 }
 /** Structural constraint every schema returned by `defineDashboardSchema` satisfies. */
 export interface DashboardSchemaLike {
@@ -89,6 +90,7 @@ export interface DashboardSchemaLike {
     readonly derive?: (context: never) => DashboardDeriveMap;
     readonly views?: DashboardViewMap;
     readonly defaultView?: string;
+    readonly badges?: (context: never) => DashboardViewBadges<string>;
 }
 /** Structural constraint every view returned by `defineDashboardView` satisfies. */
 export interface DashboardViewLike {
@@ -152,9 +154,29 @@ export interface DashboardScopeMembers<TFilters> {
     /** Refetches every active query of this scope. */
     refresh(): Promise<void>;
 }
+/** What a view's `badge` returns: a count or a short text; empty values show nothing. */
+export type DashboardViewBadge = number | string | null | undefined;
+/** Badges of a dashboard's views, by view key; a view left out shows none. */
+export type DashboardViewBadges<TKey extends string> = {
+    readonly [K in TKey]?: DashboardViewBadge;
+};
+/** Context received by a schema's `badges`: the data of its root queries and derived values. */
+export interface DashboardBadgesContext<TFilters, TSources> {
+    data: DashboardSourceData<TSources>;
+    filters: Readonly<DashboardFilterValues<TFilters>>;
+}
+/** One tab of a dashboard's views. */
+export interface DashboardViewItem<TKey extends string> {
+    value: TKey;
+    label: string;
+    /** The view's badge (see the schema's `badges`), when it shows something. */
+    badge?: number | string;
+}
 export interface DashboardViewMeta<TKey extends string> {
     readonly key: TKey;
     readonly label: string;
+    /** The view's badge (see the schema's `badges`), when it shows something. */
+    readonly badge: number | string | undefined;
     /** The view is the current one. */
     readonly active: boolean;
     /** The view's `enabled` condition holds. A disabled view has no tab and cannot be current. */
@@ -170,10 +192,7 @@ export interface DashboardViewController<TKey extends string> {
      */
     current: TKey;
     /** Enabled views in declaration order, ready for `UTabs` items. */
-    readonly items: readonly {
-        value: TKey;
-        label: string;
-    }[];
+    readonly items: readonly DashboardViewItem<TKey>[];
 }
 /** Handle of one view: its queries, derived values and filters (`consumption.filters.year`). */
 export type DashboardViewHandle<TView, TKey extends string> = Prettify<InferQueries<TView> & DashboardDerivedResources<InferDerive<TView>> & DashboardScopeMembers<InferFilters<TView>> & {

package/dist/runtime/dashboard/types/ui.d.ts

@@ -46,6 +46,21 @@ export interface DashboardStatUi {
     /** Line under the progress bar: goal and completion. */
     goal?: string;
 }
+export interface DashboardDetailsUi {
+    /** The description list: a grid of fields. */
+    grid?: string;
+    /** One field; carries `data-empty` while its value is empty. */
+    item?: string;
+    label?: string;
+    value?: string;
+    /** Dash or `placeholder` of an empty value. */
+    placeholder?: string;
+    hint?: string;
+    /** Link of an item with `to`. */
+    link?: string;
+    /** Copy button of an item with `copy`. */
+    copy?: string;
+}
 export interface DashboardStatsUi {
     /** Grid of the figures. */
     grid?: string;
@@ -219,12 +234,21 @@ export interface DashboardChipsUi {
 export interface DashboardPageUi {
     /** The page, and its scroll container: the tabs and filters stick to its top. */
     root?: string;
+    /** Carries `data-leading` while the `#leading` slot is filled. */
     header?: string;
+    /** Around the `#eyebrow` slot, above the title. */
+    eyebrow?: string;
+    /** Around the `#leading` slot (an avatar or a logo), beside the title and its line. */
+    leading?: string;
     title?: string;
     /** Today's date and when the data was fetched, under the title. */
     description?: string;
     /** Page actions and the refresh control. */
     actions?: string;
+    /** Around the `#banner` slot, between the header and the pinned band. */
+    banner?: string;
+    /** Around the `#details` slot: a full-width row closing the header (key facts of an entity). */
+    details?: string;
     /** Pinned band of the tabs and the filter bar. Carries `data-stuck` once content scrolls under it. */
     toolbar?: string;
     tabs?: string;
@@ -237,6 +261,8 @@ export interface DashboardViewTabsUi {
     /** The strip: it scrolls sideways when the tabs overflow. */
     root?: string;
     tab?: string;
+    /** Count or text of a view's `badge`, after the tab label. */
+    badge?: string;
 }
 /**
  * App-wide dashboard theming, read from `appConfig.nuxtUiTools.dashboard`.
@@ -258,6 +284,7 @@ export interface DashboardUiConfig {
     grid?: DashboardGridUi;
     stat?: DashboardStatUi;
     stats?: DashboardStatsUi;
+    details?: DashboardDetailsUi;
     gauge?: DashboardGaugeUi;
     legend?: DashboardLegendUi;
     total?: DashboardTotalUi;

package/dist/runtime/dashboard/utils/schema.js

@@ -16,6 +16,7 @@ export function resolveDashboardRuntimeSchema(schema) {
   const views = Object.entries(input.views ?? {});
   return {
     autoRefresh: input.autoRefresh,
+    badges: input.badges,
     defaultView: input.defaultView ?? views[0]?.[0],
     derive: input.derive,
     filters: input.filters,

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;