nuxt-ui-tools 1.7.0 → 1.8.0

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

@@ -0,0 +1,83 @@
+<script setup>
+import { useClipboard } from "@vueuse/core";
+import { computed, ref } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { tintFilePreviewJsonLine } from "../../utils/format";
+import FilePreviewButton from "../shell/file-preview-button.vue";
+import FilePreviewTools from "../shell/file-preview-tools.vue";
+const {
+  json,
+  text,
+  tools = true
+} = defineProps({
+  text: { type: String, required: true },
+  json: { type: Boolean, required: true },
+  facts: { type: Array, required: true },
+  tools: { type: Boolean, required: false }
+});
+const { t } = useUiToolsLocale();
+const wrap = ref(false);
+const clipboard = useClipboard({ copiedDuring: 1500, legacy: true });
+const source = computed(() => {
+  if (!json) return { formatted: false, text };
+  try {
+    return { formatted: true, text: JSON.stringify(JSON.parse(text), null, 2) };
+  } catch {
+    return { formatted: false, text };
+  }
+});
+const lines = computed(() => source.value.text.split(/\r?\n/u));
+const tinted = computed(
+  () => source.value.formatted ? lines.value.map(tintFilePreviewJsonLine) : null
+);
+</script>
+
+<template>
+  <div class="absolute inset-0 flex flex-col bg-default" data-file-preview-code="">
+    <div
+      class="nut-fp-code min-h-0 flex-1 overflow-auto font-mono text-[12.5px] leading-[1.65] text-default [tab-size:2]"
+    >
+      <div :class="['py-2.5', wrap ? '' : 'min-w-max']">
+        <div v-for="(line, position) in lines" :key="position" class="flex">
+          <span
+            class="sticky left-0 w-13 shrink-0 bg-default pe-3.5 text-end text-dimmed tabular-nums select-none"
+            aria-hidden="true"
+          >
+            {{ position + 1 }}
+          </span>
+          <!-- eslint-disable-next-line vue/no-v-html -- each line is escaped before tinting -->
+          <span
+            v-if="tinted"
+            :class="['pe-6', wrap ? 'break-all whitespace-pre-wrap' : 'whitespace-pre']"
+            v-html="tinted[position] || ' '"
+          />
+          <span v-else :class="['pe-6', wrap ? 'break-all whitespace-pre-wrap' : 'whitespace-pre']">
+            {{ line || " " }}
+          </span>
+        </div>
+      </div>
+    </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>{{ t("filePreview.text.lines", { count: lines.length.toLocaleString() }) }}</span>
+      <span v-if="source.formatted">{{ t("filePreview.text.formatted") }}</span>
+      <span v-for="fact in facts" :key="fact">{{ fact }}</span>
+    </div>
+
+    <FilePreviewTools v-if="tools">
+      <FilePreviewButton
+        icon="i-lucide-wrap-text"
+        :label="t('filePreview.text.wrap')"
+        :pressed="wrap"
+        @click="wrap = !wrap"
+      />
+      <FilePreviewButton
+        :icon="clipboard.copied.value ? 'i-lucide-check' : 'i-lucide-copy'"
+        :label="clipboard.copied.value ? t('filePreview.text.copied') : t('filePreview.text.copy')"
+        @click="clipboard.copy(source.text)"
+      />
+    </FilePreviewTools>
+  </div>
+</template>

package/dist/runtime/file-preview/components/renderers/file-preview-code.vue.d.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;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/file-preview/components/renderers/file-preview-text-loading.vue

@@ -0,0 +1,14 @@
+<script setup>
+const WIDTHS = [62, 84, 45, 91, 70, 38, 77, 58, 88, 49, 66, 80];
+</script>
+
+<template>
+  <div class="absolute inset-0 flex flex-col gap-2.5 bg-default px-6 py-5" aria-hidden="true">
+    <span
+      v-for="(width, position) in WIDTHS"
+      :key="position"
+      class="block h-2.5 animate-pulse rounded bg-accented"
+      :style="{ width: `${width}%` }"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,182 @@
+<script setup>
+import { useElementSize, useEventListener } from "@vueuse/core";
+import { computed, ref, shallowRef, useTemplateRef } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { onFilePreviewKey } from "../../composables/use-file-preview-shell";
+import FilePreviewButton from "../shell/file-preview-button.vue";
+import FilePreviewTools from "../shell/file-preview-tools.vue";
+const TRANSPARENT = /* @__PURE__ */ new Set(["apng", "avif", "gif", "ico", "png", "svg", "webp"]);
+const PADDING = 24;
+const MAX_ZOOM = 4;
+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 viewport = useTemplateRef("viewport");
+const { height, width } = useElementSize(viewport);
+const natural = shallowRef(null);
+const scale = ref(1);
+const offset = ref({ x: 0, y: 0 });
+const rotation = ref(0);
+const dragging = ref(false);
+const transparent = computed(
+  () => props.file.mime === "image/svg+xml" || TRANSPARENT.has(props.file.extension ?? "")
+);
+const turned = computed(() => rotation.value % 180 !== 0);
+const fit = computed(() => {
+  const size = natural.value;
+  if (!size || width.value <= 0 || height.value <= 0) return 1;
+  const shownWidth = turned.value ? size.height : size.width;
+  const shownHeight = turned.value ? size.width : size.height;
+  return Math.min(
+    (width.value - PADDING * 2) / shownWidth,
+    (height.value - PADDING * 2) / shownHeight,
+    1
+  );
+});
+const maxScale = computed(() => Math.max(MAX_ZOOM / fit.value, 2));
+const zoomed = computed(() => scale.value > 1.001);
+const percent = computed(() => `${Math.round(fit.value * scale.value * 100)}%`);
+const imageStyle = computed(() => {
+  const size = natural.value;
+  return {
+    height: size ? `${size.height * fit.value}px` : void 0,
+    transform: `translate(-50%, -50%) translate(${offset.value.x}px, ${offset.value.y}px) scale(${scale.value}) rotate(${rotation.value}deg)`,
+    width: size ? `${size.width * fit.value}px` : void 0
+  };
+});
+function zoomTo(next, point) {
+  const target = Math.min(Math.max(next, 1), maxScale.value);
+  const box = viewport.value?.getBoundingClientRect();
+  const x = point && box ? point.x - (box.left + box.width / 2) : 0;
+  const y = point && box ? point.y - (box.top + box.height / 2) : 0;
+  const ratio = target / scale.value;
+  offset.value = target <= 1.001 ? { x: 0, y: 0 } : { x: x - (x - offset.value.x) * ratio, y: y - (y - offset.value.y) * ratio };
+  scale.value = target <= 1.001 ? 1 : target;
+}
+function reset() {
+  scale.value = 1;
+  offset.value = { x: 0, y: 0 };
+}
+function rotate() {
+  rotation.value = (rotation.value + 90) % 360;
+  reset();
+}
+function handleLoad(event) {
+  if (!(event.target instanceof HTMLImageElement)) return;
+  const size = {
+    height: event.target.naturalHeight || 600,
+    width: event.target.naturalWidth || 800
+  };
+  natural.value = size;
+  emit("ready", [
+    { label: t("filePreview.fields.dimensions"), value: `${size.width} \xD7 ${size.height} px` }
+  ]);
+}
+function toggleZoom(event) {
+  if (zoomed.value) return reset();
+  zoomTo(Math.max(2.5, 1 / fit.value), { x: event.clientX, y: event.clientY });
+}
+function startDrag(event) {
+  if (!zoomed.value || !(event.currentTarget instanceof HTMLElement)) return;
+  const origin = { x: event.clientX - offset.value.x, y: event.clientY - offset.value.y };
+  const surface = event.currentTarget;
+  surface.setPointerCapture(event.pointerId);
+  dragging.value = true;
+  const move = (moved) => {
+    offset.value = { x: moved.clientX - origin.x, y: moved.clientY - origin.y };
+  };
+  const stop = () => {
+    dragging.value = false;
+    surface.removeEventListener("pointermove", move);
+    surface.removeEventListener("pointerup", stop);
+    surface.removeEventListener("pointercancel", stop);
+  };
+  surface.addEventListener("pointermove", move);
+  surface.addEventListener("pointerup", stop);
+  surface.addEventListener("pointercancel", stop);
+}
+useEventListener(
+  viewport,
+  "wheel",
+  (event) => {
+    event.preventDefault();
+    const speed = event.ctrlKey ? 0.01 : 18e-4;
+    zoomTo(scale.value * Math.exp(-event.deltaY * speed), { x: event.clientX, y: event.clientY });
+  },
+  { passive: false }
+);
+onFilePreviewKey(["+", "=", "-", "0", "r", "R"], (event) => {
+  if (event.key === "+" || event.key === "=") zoomTo(scale.value * 1.5);
+  else if (event.key === "-") zoomTo(scale.value / 1.5);
+  else if (event.key === "0") reset();
+  else rotate();
+});
+</script>
+
+<template>
+  <div
+    ref="viewport"
+    :class="[
+  'absolute inset-0 touch-none overflow-hidden select-none',
+  transparent ? 'nut-fp-checker' : '',
+  zoomed ? dragging ? 'cursor-grabbing' : 'cursor-grab' : 'cursor-zoom-in'
+]"
+    :data-file-preview-zoomed="zoomed ? '' : void 0"
+    data-file-preview-image=""
+    @dblclick="toggleZoom"
+    @pointerdown="startDrag"
+  >
+    <img
+      :src="url"
+      :alt="file.name"
+      draggable="false"
+      :class="[
+  'absolute top-1/2 left-1/2 max-w-none origin-center',
+  dragging ? '' : 'transition-transform duration-150 ease-out motion-reduce:transition-none',
+  natural ? '' : 'opacity-0',
+  transparent ? '' : 'shadow-[0_1px_3px_rgba(0,0,0,0.12)]'
+]"
+      :style="imageStyle"
+      @load="handleLoad"
+      @error="emit('error', { reason: 'decode' })"
+    />
+
+    <FilePreviewTools>
+      <FilePreviewButton
+        icon="i-lucide-zoom-out"
+        :label="t('filePreview.image.zoomOut')"
+        :kbds="['-']"
+        :disabled="!zoomed"
+        @click="zoomTo(scale / 1.5)"
+      />
+      <button
+        type="button"
+        class="min-w-12 rounded-md px-1.5 py-1 text-xs font-medium text-toned tabular-nums hover:bg-elevated"
+        :aria-label="t('filePreview.image.fit')"
+        :title="t('filePreview.image.fit')"
+        data-file-preview-zoom=""
+        @click="reset"
+      >
+        {{ percent }}
+      </button>
+      <FilePreviewButton
+        icon="i-lucide-zoom-in"
+        :label="t('filePreview.image.zoomIn')"
+        :kbds="['+']"
+        :disabled="scale >= maxScale"
+        @click="zoomTo(scale * 1.5)"
+      />
+      <FilePreviewButton
+        icon="i-lucide-rotate-cw"
+        :label="t('filePreview.image.rotate')"
+        :kbds="['R']"
+        @click="rotate"
+      />
+    </FilePreviewTools>
+  </div>
+</template>

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

@@ -0,0 +1,78 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { useFilePreviewShell } from "../../composables/use-file-preview-shell";
+import { useFilePreviewText } from "../../composables/use-file-preview-text";
+import FilePreviewTools from "../shell/file-preview-tools.vue";
+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 shell = useFilePreviewShell();
+const content = useFilePreviewText(props);
+const view = ref(shell.markdown ? "preview" : "source");
+const html = ref(null);
+const facts = computed(() => content.notice.value ? [content.notice.value] : []);
+watch(
+  content.status,
+  async (status) => {
+    if (status === "error")
+      emit("error", { message: content.error.value?.message, reason: "source" });
+    if (status !== "ready") return;
+    if (shell.markdown) {
+      try {
+        html.value = await shell.markdown(content.text.value);
+      } catch {
+        view.value = "source";
+      }
+    }
+    emit("ready");
+  },
+  { immediate: true }
+);
+</script>
+
+<template>
+  <template v-if="content.status.value === 'ready'">
+    <div
+      v-if="view === 'preview' && html !== null"
+      class="absolute inset-0 overflow-auto bg-default px-6 py-7 sm:px-10"
+      data-file-preview-markdown=""
+    >
+      <!-- eslint-disable-next-line vue/no-v-html -- the app's markdown renderer returns sanitized HTML -->
+      <article class="nut-fp-prose mx-auto max-w-[68ch]" v-html="html" />
+    </div>
+    <FilePreviewCode
+      v-else
+      :text="content.text.value"
+      :json="false"
+      :facts="facts"
+      :tools="view === 'source'"
+    />
+
+    <FilePreviewTools v-if="shell.markdown">
+      <div class="flex gap-0.5 rounded-md border border-default bg-elevated p-0.5" role="group">
+        <button
+          v-for="option in ['preview', 'source']"
+          :key="option"
+          type="button"
+          :aria-pressed="view === option"
+          :class="[
+  'rounded px-2 py-0.5 text-xs font-medium transition',
+  view === option ? 'bg-default text-highlighted shadow-xs ring ring-default' : 'text-muted hover:text-highlighted'
+]"
+          @click="view = option"
+        >
+          {{ t(`filePreview.markdown.${option}`) }}
+        </button>
+      </div>
+    </FilePreviewTools>
+  </template>
+  <FilePreviewTextLoading v-else />
+</template>

package/dist/runtime/file-preview/components/renderers/markdown-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/media-controls.d.vue.ts

@@ -0,0 +1,10 @@
+import type { useFullscreen, useMediaControls } from '@vueuse/core';
+type __VLS_Props = {
+    controls: ReturnType<typeof useMediaControls>;
+    variant: 'video' | 'audio';
+    fullscreen?: ReturnType<typeof useFullscreen> | null;
+    compact?: 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;

package/dist/runtime/file-preview/components/renderers/media-controls.vue

@@ -0,0 +1,145 @@
+<script setup>
+import UButton from "@nuxt/ui/components/Button.vue";
+import UDropdownMenu from "@nuxt/ui/components/DropdownMenu.vue";
+import USlider from "@nuxt/ui/components/Slider.vue";
+import { computed } from "vue";
+import { useUiToolsLocale } from "../../../i18n/use-locale";
+import { formatFilePreviewDuration } from "../../utils/format";
+import FilePreviewButton from "../shell/file-preview-button.vue";
+const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+const props = defineProps({
+  controls: { type: null, required: true },
+  variant: { type: String, required: true },
+  fullscreen: { type: null, required: false },
+  compact: { type: Boolean, required: false }
+});
+const { t } = useUiToolsLocale();
+const tone = computed(() => props.variant === "video" ? "inverted" : "default");
+const time = computed(
+  () => `${formatFilePreviewDuration(props.controls.currentTime.value)} / ${formatFilePreviewDuration(props.controls.duration.value)}`
+);
+const silent = computed(() => props.controls.muted.value || props.controls.volume.value === 0);
+const captions = computed(() => props.controls.selectedTrack.value !== -1);
+const sliderUi = computed(
+  () => props.variant === "video" ? { range: "bg-white", thumb: "bg-white ring-white", track: "bg-white/30" } : void 0
+);
+const rates = computed(
+  () => RATES.map((rate) => ({
+    checked: props.controls.rate.value === rate,
+    label: `${rate}\xD7`,
+    onSelect: () => {
+      props.controls.rate.value = rate;
+    },
+    type: "checkbox"
+  }))
+);
+function toggle() {
+  props.controls.playing.value = !props.controls.playing.value;
+}
+function seek(value) {
+  const next = Array.isArray(value) ? value[0] : value;
+  if (next !== void 0) props.controls.currentTime.value = next;
+}
+function setVolume(value) {
+  const next = Array.isArray(value) ? value[0] : value;
+  if (next === void 0) return;
+  props.controls.volume.value = next;
+  props.controls.muted.value = next === 0;
+}
+function toggleCaptions() {
+  if (captions.value) props.controls.disableTrack();
+  else props.controls.enableTrack(0);
+}
+</script>
+
+<template>
+  <div
+    :class="[
+  'flex items-center gap-1',
+  variant === 'video' ? 'bg-linear-to-t from-black/75 via-black/40 to-transparent px-2.5 pt-10 pb-2 text-white' : 'rounded-full border border-default bg-elevated py-1 ps-1 pe-2 text-toned'
+]"
+    data-file-preview-media-controls=""
+  >
+    <FilePreviewButton
+      :icon="controls.playing.value ? 'i-lucide-pause' : 'i-lucide-play'"
+      :label="controls.playing.value ? t('filePreview.media.pause') : t('filePreview.media.play')"
+      :kbds="['space']"
+      :tone="tone"
+      data-file-preview-play=""
+      @click="toggle"
+    />
+    <span class="shrink-0 px-1 text-xs whitespace-nowrap tabular-nums" data-file-preview-time="">
+      {{ time }}
+    </span>
+    <USlider
+      :model-value="controls.currentTime.value"
+      :min="0"
+      :max="Math.max(controls.duration.value, 0.1)"
+      :step="0.1"
+      size="xs"
+      color="neutral"
+      :aria-label="t('filePreview.media.seek')"
+      :ui="sliderUi"
+      class="mx-1.5 min-w-16 flex-1"
+      @update:model-value="seek"
+    />
+    <FilePreviewButton
+      :icon="silent ? 'i-lucide-volume-x' : 'i-lucide-volume-2'"
+      :label="silent ? t('filePreview.media.unmute') : t('filePreview.media.mute')"
+      :kbds="['M']"
+      :tone="tone"
+      @click="controls.muted.value = !controls.muted.value"
+    />
+    <USlider
+      v-if="!compact"
+      :model-value="silent ? 0 : controls.volume.value"
+      :min="0"
+      :max="1"
+      :step="0.05"
+      size="xs"
+      color="neutral"
+      :aria-label="t('filePreview.media.volume')"
+      :ui="sliderUi"
+      class="w-16 shrink-0"
+      @update:model-value="setVolume"
+    />
+    <UDropdownMenu :items="rates" :content="{ align: 'end', side: 'top' }">
+      <UButton
+        :label="`${controls.rate.value}\xD7`"
+        :aria-label="t('filePreview.media.speed')"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        :class="[
+  'min-w-10 shrink-0 justify-center text-xs tabular-nums',
+  variant === 'video' ? 'text-white hover:bg-white/15 hover:text-white' : 'text-muted'
+]"
+      />
+    </UDropdownMenu>
+    <FilePreviewButton
+      v-if="controls.tracks.value.length > 0"
+      icon="i-lucide-captions"
+      :label="t('filePreview.media.captions')"
+      :pressed="captions"
+      :tone="tone"
+      @click="toggleCaptions"
+    />
+    <FilePreviewButton
+      v-if="variant === 'video' && controls.supportsPictureInPicture"
+      icon="i-lucide-picture-in-picture-2"
+      :label="t('filePreview.media.pictureInPicture')"
+      :tone="tone"
+      @click="controls.togglePictureInPicture()"
+    />
+    <FilePreviewButton
+      v-if="fullscreen?.isSupported.value"
+      :icon="fullscreen.isFullscreen.value ? 'i-lucide-minimize' : 'i-lucide-maximize'"
+      :label="
+  fullscreen.isFullscreen.value ? t('filePreview.media.exitFullscreen') : t('filePreview.media.fullscreen')
+"
+      :kbds="['F']"
+      :tone="tone"
+      @click="fullscreen.toggle()"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+import type { useFullscreen, useMediaControls } from '@vueuse/core';
+type __VLS_Props = {
+    controls: ReturnType<typeof useMediaControls>;
+    variant: 'video' | 'audio';
+    fullscreen?: ReturnType<typeof useFullscreen> | null;
+    compact?: 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;

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;