nuxt-ui-tools 1.6.5 → 1.8.0

package/dist/runtime/file-preview/components/renderers/pdf-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/pdf-renderer.vue

@@ -0,0 +1,58 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import { useObjectUrl } from "@vueuse/core";
+import { computed, onMounted } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFilePreviewShell } from "../../composables/use-file-preview-shell";
+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 shell = useFilePreviewShell();
+const inline = globalThis.navigator?.pdfViewerEnabled !== false;
+const typed = computed(
+  () => props.blob ? new Blob([props.blob], { type: "application/pdf" }) : null
+);
+const objectUrl = useObjectUrl(typed);
+const source = computed(() => {
+  const base = objectUrl.value ?? props.url;
+  if (base.includes("#")) return base;
+  const page = shell.options.pdf?.page;
+  return `${base}#${page ? `page=${page}&` : ""}view=FitH`;
+});
+function openInTab() {
+  window.open(props.url, "_blank", "noopener");
+}
+onMounted(() => {
+  if (!inline) emit("ready");
+});
+</script>
+
+<template>
+  <iframe
+    v-if="inline"
+    :src="source"
+    :title="file.name"
+    class="absolute inset-0 size-full border-0 bg-(--nut-fp-document)"
+    data-file-preview-pdf=""
+    @load="emit('ready')"
+  />
+  <FilePreviewMessage
+    v-else
+    icon="i-lucide-file-text"
+    badge="PDF"
+    :title="t('filePreview.errors.pdfTitle')"
+    :description="t('filePreview.errors.pdfDescription')"
+  >
+    <UButton
+      icon="i-lucide-external-link"
+      :label="t('filePreview.errors.open')"
+      @click="openInTab"
+    />
+  </FilePreviewMessage>
+</template>

package/dist/runtime/file-preview/components/renderers/pdf-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/text-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/text-renderer.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFilePreviewText } from "../../composables/use-file-preview-text";
+import FilePreviewCode from "./file-preview-code.vue";
+import FilePreviewTextLoading from "./file-preview-text-loading.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 content = useFilePreviewText(props);
+const json = computed(
+  () => ["json", "jsonc"].includes(props.file.extension ?? "") || Boolean(props.file.mime?.includes("json"))
+);
+const facts = computed(() => content.notice.value ? [content.notice.value] : []);
+watch(
+  content.status,
+  (status) => {
+    if (status === "error")
+      emit("error", { message: content.error.value?.message, reason: "source" });
+    if (status !== "ready") return;
+    const lines = content.text.value.split(/\r?\n/u).length;
+    emit("ready", [{ label: t("filePreview.fields.lines"), value: lines.toLocaleString() }]);
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <FilePreviewCode
+    v-if="content.status.value === 'ready'"
+    :text="content.text.value"
+    :json="json"
+    :facts="facts"
+  />
+  <FilePreviewTextLoading v-else />
+</template>

package/dist/runtime/file-preview/components/renderers/text-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/video-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/video-renderer.vue

@@ -0,0 +1,110 @@
+<script setup>
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { useFullscreen, useMediaControls, useTimeoutFn } from "@vueuse/core";
+import { computed, ref, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { onFilePreviewKey, useFilePreviewShell } from "../../composables/use-file-preview-shell";
+import { formatFilePreviewDuration } from "../../utils/format";
+import MediaControls from "./media-controls.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 shell = useFilePreviewShell();
+const frame = useTemplateRef("frame");
+const video = useTemplateRef("video");
+const controls = useMediaControls(video, {
+  tracks: () => (props.file.file.tracks ?? []).map((track) => ({
+    default: track.default,
+    kind: track.kind ?? "subtitles",
+    label: track.label,
+    src: track.src,
+    srcLang: track.srcLang
+  }))
+});
+const fullscreen = useFullscreen(frame);
+const active = ref(true);
+const rest = useTimeoutFn(() => active.value = false, 2500);
+const started = computed(() => controls.playing.value || controls.currentTime.value > 0.05);
+const showControls = computed(() => !controls.playing.value || active.value);
+function wake() {
+  active.value = true;
+  rest.start();
+}
+function toggle() {
+  controls.playing.value = !controls.playing.value;
+  wake();
+}
+function handleMetadata() {
+  const element = video.value;
+  if (!element) return;
+  emit("ready", [
+    { label: t("filePreview.fields.duration"), value: formatFilePreviewDuration(element.duration) },
+    {
+      label: t("filePreview.fields.dimensions"),
+      value: `${element.videoWidth} \xD7 ${element.videoHeight} px`
+    }
+  ]);
+}
+function handleError() {
+  emit("error", { message: video.value?.error?.message || void 0, reason: "decode" });
+}
+onFilePreviewKey([" ", "k", "m", "f"], (event) => {
+  if (event.key === "m") controls.muted.value = !controls.muted.value;
+  else if (event.key === "f") void fullscreen.toggle();
+  else toggle();
+});
+</script>
+
+<template>
+  <div
+    ref="frame"
+    :class="['absolute inset-0 overflow-hidden bg-black', showControls ? '' : 'cursor-none']"
+    data-file-preview-video=""
+    @pointermove="wake"
+  >
+    <video
+      ref="video"
+      :src="url"
+      :poster="file.file.poster"
+      preload="metadata"
+      playsinline
+      class="size-full object-contain"
+      @click="toggle"
+      @dblclick="fullscreen.toggle()"
+      @loadedmetadata="handleMetadata"
+      @error="handleError"
+    />
+
+    <button
+      v-if="!started"
+      type="button"
+      class="absolute top-1/2 left-1/2 grid size-17 -translate-1/2 place-items-center rounded-full bg-black/55 ps-1 text-white transition hover:bg-black/70"
+      :aria-label="t('filePreview.media.play')"
+      data-file-preview-big-play=""
+      @click="toggle"
+    >
+      <UIcon name="i-lucide-play" class="size-7" />
+    </button>
+    <span
+      v-else-if="controls.waiting.value"
+      class="pointer-events-none absolute top-1/2 left-1/2 size-10 -translate-1/2 animate-spin rounded-full border-2 border-white/30 border-t-white"
+      aria-hidden="true"
+    />
+
+    <MediaControls
+      :class="[
+  'absolute inset-x-0 bottom-0 transition-opacity duration-200 motion-reduce:transition-none',
+  showControls ? 'opacity-100' : 'pointer-events-none opacity-0'
+]"
+      :controls="controls"
+      :fullscreen="fullscreen"
+      :compact="shell.narrow.value"
+      variant="video"
+    />
+  </div>
+</template>

package/dist/runtime/file-preview/components/renderers/video-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/shell/file-preview-button.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    icon: string;
+    label: string;
+    kbds?: string[];
+    pressed?: boolean;
+    disabled?: boolean;
+    /** `inverted` sits on dark media, such as video controls. */
+    tone?: 'default' | 'inverted';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/shell/file-preview-button.vue

@@ -0,0 +1,40 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
+const {
+  disabled = false,
+  kbds = void 0,
+  pressed = void 0,
+  tone = "default"
+} = defineProps({
+  icon: { type: String, required: true },
+  label: { type: String, required: true },
+  kbds: { type: Array, required: false },
+  pressed: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  tone: { type: String, required: false }
+});
+defineEmits(["click"]);
+defineOptions({ inheritAttrs: false });
+</script>
+
+<template>
+  <UTooltip :text="label" :kbds="kbds" :disabled="disabled" :content="{ side: 'bottom' }">
+    <UButton
+      v-bind="$attrs"
+      :icon="icon"
+      :aria-label="label"
+      :aria-pressed="pressed"
+      :disabled="disabled"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      square
+      :class="[
+  'shrink-0',
+  tone === 'inverted' ? 'text-white hover:bg-white/15 hover:text-white active:bg-white/20 disabled:bg-transparent' : pressed ? 'bg-elevated text-highlighted' : 'text-muted hover:text-highlighted'
+]"
+      @click="$emit('click', $event)"
+    />
+  </UTooltip>
+</template>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    icon: string;
+    label: string;
+    kbds?: string[];
+    pressed?: boolean;
+    disabled?: boolean;
+    /** `inverted` sits on dark media, such as video controls. */
+    tone?: 'default' | 'inverted';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/{form/components/renderer/form-field-error.d.vue.ts → file-preview/components/shell/file-preview-details.d.vue.ts}

@@ -1,6 +1,8 @@
 type __VLS_Props = {
-    path: readonly string[];
-    class?: string;
+    rows: readonly {
+        label: string;
+        value: string;
+    }[];
 };
 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;

package/dist/runtime/file-preview/components/shell/file-preview-details.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+defineProps({
+  rows: { type: Array, required: true }
+});
+const { t } = useUiToolsLocale();
+</script>
+
+<template>
+  <section
+    class="absolute top-3 right-3 z-20 w-[min(320px,calc(100%-24px))] rounded-xl border border-default bg-default px-4 py-3.5 shadow-lg"
+    :aria-label="t('filePreview.details')"
+    data-file-preview-details=""
+  >
+    <p class="m-0 mb-2 text-[11px] font-semibold tracking-wider text-muted uppercase">
+      {{ t("filePreview.details") }}
+    </p>
+    <dl class="m-0 grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-[13px]">
+      <template v-for="row in rows" :key="row.label">
+        <dt class="text-muted">{{ row.label }}</dt>
+        <dd class="m-0 text-toned tabular-nums [overflow-wrap:anywhere]">{{ row.value }}</dd>
+      </template>
+    </dl>
+  </section>
+</template>

package/dist/runtime/{form/components/renderer/form-field-error.vue.d.ts → file-preview/components/shell/file-preview-details.vue.d.ts}

@@ -1,6 +1,8 @@
 type __VLS_Props = {
-    path: readonly string[];
-    class?: string;
+    rows: readonly {
+        label: string;
+        value: string;
+    }[];
 };
 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;

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

@@ -0,0 +1,44 @@
+import type { FilePreviewAction, FilePreviewItem } from '../../types/index.js';
+type __VLS_Props = {
+    item: FilePreviewItem;
+    icon: string;
+    meta: string;
+    index: number;
+    total: number;
+    loop: boolean;
+    narrow: boolean;
+    canExpand: boolean;
+    expanded: boolean;
+    details: boolean;
+};
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    tools?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    previous: () => any;
+    details: () => any;
+    expand: () => any;
+    download: () => any;
+    open: () => any;
+    action: (action: FilePreviewAction) => any;
+    close: () => any;
+    next: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrevious?: (() => any) | undefined;
+    onDetails?: (() => any) | undefined;
+    onExpand?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onAction?: ((action: FilePreviewAction) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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/shell/file-preview-header.vue

@@ -0,0 +1,163 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { resolveFilePreviewText, splitFilePreviewName } from "../../utils/format";
+import FilePreviewButton from "./file-preview-button.vue";
+const props = defineProps({
+  item: { type: Object, required: true },
+  icon: { type: String, required: true },
+  meta: { type: String, required: true },
+  index: { type: Number, required: true },
+  total: { type: Number, required: true },
+  loop: { type: Boolean, required: true },
+  narrow: { type: Boolean, required: true },
+  canExpand: { type: Boolean, required: true },
+  expanded: { type: Boolean, required: true },
+  details: { type: Boolean, required: true }
+});
+const emit = defineEmits(["previous", "next", "close", "expand", "details", "download", "open", "action"]);
+const { t } = useUiToolsLocale();
+const name = computed(() => splitFilePreviewName(props.item.name || t("filePreview.untitled")));
+const downloadable = computed(() => props.item.file.download !== false);
+const actions = computed(() => props.item.file.actions ?? []);
+const menu = computed(() => [
+  [
+    { icon: "i-lucide-info", label: t("filePreview.details"), onSelect: () => emit("details") },
+    ...downloadable.value ? [
+      {
+        icon: "i-lucide-download",
+        label: t("filePreview.download"),
+        onSelect: () => emit("download")
+      }
+    ] : [],
+    {
+      icon: "i-lucide-external-link",
+      label: t("filePreview.openInNewTab"),
+      onSelect: () => emit("open")
+    }
+  ],
+  actions.value.map((action) => ({
+    icon: action.icon,
+    label: resolveFilePreviewText(action.label),
+    onSelect: () => emit("action", action)
+  }))
+]);
+</script>
+
+<template>
+  <header
+    class="flex min-h-14 shrink-0 items-center gap-1.5 border-b border-default bg-default py-2 ps-3.5 pe-2 sm:gap-2"
+    data-file-preview-header=""
+  >
+    <span
+      class="grid size-8 shrink-0 place-items-center rounded-lg border border-default bg-elevated text-toned"
+      aria-hidden="true"
+    >
+      <UIcon :name="icon" class="size-4" />
+    </span>
+    <div class="ms-0.5 min-w-0 flex-1">
+      <p
+        class="m-0 flex min-w-0 text-sm leading-5 font-semibold text-highlighted"
+        :title="item.name"
+        data-file-preview-name=""
+      >
+        <span class="overflow-hidden text-ellipsis whitespace-pre">{{ name.head }}</span>
+        <span class="shrink-0 whitespace-pre">{{ name.tail }}</span>
+      </p>
+      <p class="m-0 truncate text-xs text-muted tabular-nums" data-file-preview-meta="">
+        {{ meta }}
+      </p>
+    </div>
+
+    <template v-if="!narrow">
+      <div v-if="total > 1" class="flex shrink-0 items-center" data-file-preview-nav="">
+        <FilePreviewButton
+          icon="i-lucide-chevron-left"
+          :label="t('filePreview.previous')"
+          :kbds="['arrowleft']"
+          :disabled="!loop && index === 0"
+          @click="emit('previous')"
+        />
+        <span
+          class="min-w-11 text-center text-xs text-muted tabular-nums"
+          data-file-preview-counter=""
+        >
+          {{ t("filePreview.counter", { current: index + 1, total }) }}
+        </span>
+        <FilePreviewButton
+          icon="i-lucide-chevron-right"
+          :label="t('filePreview.next')"
+          :kbds="['arrowright']"
+          :disabled="!loop && index === total - 1"
+          @click="emit('next')"
+        />
+      </div>
+      <span v-if="total > 1" class="mx-1 h-5 w-px shrink-0 bg-(--ui-border)" aria-hidden="true" />
+      <slot name="tools" />
+      <FilePreviewButton
+        icon="i-lucide-info"
+        :label="t('filePreview.details')"
+        :pressed="details"
+        @click="emit('details')"
+      />
+      <template v-for="(action, position) in actions" :key="position">
+        <FilePreviewButton
+          v-if="action.icon"
+          :icon="action.icon"
+          :label="resolveFilePreviewText(action.label)"
+          @click="emit('action', action)"
+        />
+        <UButton
+          v-else
+          :label="resolveFilePreviewText(action.label)"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          class="shrink-0 text-toned"
+          @click="emit('action', action)"
+        />
+      </template>
+      <FilePreviewButton
+        v-if="downloadable"
+        icon="i-lucide-download"
+        :label="t('filePreview.download')"
+        @click="emit('download')"
+      />
+      <FilePreviewButton
+        icon="i-lucide-external-link"
+        :label="t('filePreview.openInNewTab')"
+        @click="emit('open')"
+      />
+      <span class="mx-1 h-5 w-px shrink-0 bg-(--ui-border)" aria-hidden="true" />
+      <FilePreviewButton
+        v-if="canExpand"
+        :icon="expanded ? 'i-lucide-minimize-2' : 'i-lucide-maximize-2'"
+        :label="expanded ? t('filePreview.restore') : t('filePreview.expand')"
+        @click="emit('expand')"
+      />
+    </template>
+    <UDropdownMenu v-else :items="menu" :content="{ align: 'end' }">
+      <UButton
+        icon="i-lucide-ellipsis"
+        :aria-label="t('filePreview.moreActions')"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        square
+        class="shrink-0 text-muted"
+        data-file-preview-menu=""
+      />
+    </UDropdownMenu>
+
+    <FilePreviewButton
+      icon="i-lucide-x"
+      :label="t('filePreview.close')"
+      :kbds="['escape']"
+      data-file-preview-close=""
+      @click="emit('close')"
+    />
+  </header>
+</template>

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

@@ -0,0 +1,44 @@
+import type { FilePreviewAction, FilePreviewItem } from '../../types/index.js';
+type __VLS_Props = {
+    item: FilePreviewItem;
+    icon: string;
+    meta: string;
+    index: number;
+    total: number;
+    loop: boolean;
+    narrow: boolean;
+    canExpand: boolean;
+    expanded: boolean;
+    details: boolean;
+};
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    tools?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    previous: () => any;
+    details: () => any;
+    expand: () => any;
+    download: () => any;
+    open: () => any;
+    action: (action: FilePreviewAction) => any;
+    close: () => any;
+    next: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrevious?: (() => any) | undefined;
+    onDetails?: (() => any) | undefined;
+    onExpand?: (() => any) | undefined;
+    onDownload?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onAction?: ((action: FilePreviewAction) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};