vitepress-plugin-filelist 0.3.0 → 0.4.0

package/dist/client/ssr/index.d.ts

@@ -25,12 +25,14 @@ interface FileListLabels {
   download: string;
   loaded: string;
   selected: string;
+  /** @deprecated No longer shown; the footer only shows loaded files and size. */
   unloaded: string;
   folderFailed: string;
   demoDownload: string;
   demoPreview: string;
   demoBatch: string;
   downloadFailed: string;
+  /** @deprecated Preview errors are shown in the dialog (`previewUnavailable`). */
   previewFailed: string;
   batchFailed: string;
   defaultZip: string;
@@ -51,6 +53,23 @@ interface FileListLabels {
   expand: string;
   /** Accessible name of the collapse button, `{name}`. */
   collapse: string;
+  /** Preview dialog: close button. */
+  close: string;
+  /** Preview dialog: previous / next previewable file. */
+  previous: string;
+  next: string;
+  /** Preview dialog: rotate image by 90°. */
+  rotate: string;
+  /** Preview dialog: toggle the image between fit-to-window and actual size. */
+  actualSize: string;
+  /** Preview dialog: file type that is not previewed (Office and others). */
+  previewUnsupported: string;
+  /** Preview dialog: preview failed (network, CORS, unsupported codec). */
+  previewUnavailable: string;
+  /** Preview dialog: PDF larger than the in-page limit, `{size}`. */
+  previewTooLarge: string;
+  /** Preview dialog: only the first `{size}` of a text file is shown. */
+  textTruncated: string;
 }
 interface FileListSource {
   /** OpenList path, directory or single file. */
@@ -212,6 +231,32 @@ export declare function totalSize(items: Array<{
   size?: number;
 }>): number;
 export declare function compareNodes(a: SortableNode, b: SortableNode, key: SortKey, ascending?: boolean): number;
+export type PreviewKind = 'image' | 'video' | 'audio' | 'text' | 'pdf' | 'none';
+/**
+ * How a file is shown in the preview dialog. Office documents and anything
+ * else the browser cannot render are `none` (info + download).
+ */
+export declare function previewKind(name: string): PreviewKind;
+export interface IframePreview {
+  label: string;
+  scheme: string;
+}
+/**
+ * Viewers from OpenList's public `iframe_previews` setting that match a file,
+ * in the order OpenList lists them. Keys are comma-separated extensions or a
+ * `/regex/flags` tested against the extension, as in OpenList's frontend.
+ */
+export declare function iframePreviewsFor(name: string, setting: string | undefined): IframePreview[];
+/**
+ * Fill an OpenList preview scheme: `$name`, `$url` (raw URL) and `$durl`
+ * (signed download URL), each optionally prefixed with `e` (URI-encode) or
+ * `b` (base64), e.g. `$e_url`, `$b_url`, `$e_durl`.
+ */
+export declare function fillPreviewUrl(scheme: string, args: {
+  name: string;
+  rawUrl: string;
+  downloadUrl: string;
+}): string;
 /**
  * Register `<FileList>` and `<VPFileList>` globally.
  *

package/dist/client/ssr/index.js

@@ -1,5 +1,5 @@
-import { computed, defineComponent, mergeProps, onBeforeUnmount, onMounted, ref, unref, useSSRContext } from "vue";
-import { ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderList, ssrRenderStyle } from "vue/server-renderer";
+import { computed, defineComponent, mergeProps, onBeforeUnmount, onMounted, ref, unref, useSSRContext, watch } from "vue";
+import { ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderList, ssrRenderStyle } from "vue/server-renderer";
 // src/client/locales.ts
 const fileListLocales = {
 	"zh-CN": {
@@ -43,7 +43,16 @@ const fileListLocales = {
 		selectAll: "全选",
 		selectItem: "选择 {name}",
 		expand: "展开 {name}",
-		collapse: "收起 {name}"
+		collapse: "收起 {name}",
+		close: "关闭",
+		previous: "上一个",
+		next: "下一个",
+		rotate: "旋转",
+		actualSize: "原始大小",
+		previewUnsupported: "该类型暂不支持在线预览，可下载后查看",
+		previewUnavailable: "该文件无法在页面内预览，可下载后查看",
+		previewTooLarge: "文件较大（{size}），请下载后查看",
+		textTruncated: "仅显示前 {size}，完整内容请下载"
 	},
 	"en-US": {
 		allFiles: "All files",
@@ -86,7 +95,16 @@ const fileListLocales = {
 		selectAll: "Select all",
 		selectItem: "Select {name}",
 		expand: "Expand {name}",
-		collapse: "Collapse {name}"
+		collapse: "Collapse {name}",
+		close: "Close",
+		previous: "Previous",
+		next: "Next",
+		rotate: "Rotate",
+		actualSize: "Actual size",
+		previewUnsupported: "This file type cannot be previewed here. Download it to view.",
+		previewUnavailable: "This file cannot be previewed in the page. Download it to view.",
+		previewTooLarge: "This file is large ({size}). Download it to view.",
+		textTruncated: "Showing the first {size} only. Download for the full file."
 	}
 };
 function formatLabel(template, values = {}) {
@@ -268,6 +286,376 @@ function compareNodes(a, b, key, ascending = true) {
 	else result = a.name.localeCompare(b.name, "zh-Hans-CN", { numeric: true });
 	return ascending ? result : -result;
 }
+const PREVIEW_EXTS = {
+	image: [
+		"png",
+		"jpg",
+		"jpeg",
+		"gif",
+		"webp",
+		"svg",
+		"bmp",
+		"ico",
+		"avif"
+	],
+	video: [
+		"mp4",
+		"webm",
+		"m4v",
+		"mov",
+		"ogv"
+	],
+	audio: [
+		"mp3",
+		"wav",
+		"ogg",
+		"oga",
+		"m4a",
+		"aac",
+		"flac",
+		"opus"
+	],
+	text: [
+		"txt",
+		"md",
+		"markdown",
+		"log",
+		"json",
+		"csv",
+		"tsv",
+		"xml",
+		"yml",
+		"yaml",
+		"toml",
+		"ini",
+		"conf",
+		"properties",
+		"js",
+		"mjs",
+		"cjs",
+		"ts",
+		"tsx",
+		"jsx",
+		"vue",
+		"css",
+		"scss",
+		"less",
+		"html",
+		"htm",
+		"py",
+		"java",
+		"kt",
+		"c",
+		"h",
+		"cpp",
+		"hpp",
+		"cs",
+		"go",
+		"rs",
+		"rb",
+		"php",
+		"sh",
+		"bat",
+		"ps1",
+		"sql",
+		"srt",
+		"vtt",
+		"ass",
+		"lrc",
+		"gitignore",
+		"env"
+	],
+	pdf: ["pdf"]
+};
+const PREVIEW_KINDS = {};
+for (const [kind, exts] of Object.entries(PREVIEW_EXTS)) for (const ext of exts) PREVIEW_KINDS[ext] = kind;
+function lowerExt(name) {
+	const dot = name.lastIndexOf(".");
+	return dot >= 0 ? name.slice(dot + 1).toLowerCase() : "";
+}
+/**
+* How a file is shown in the preview dialog. Office documents and anything
+* else the browser cannot render are `none` (info + download).
+*/
+function previewKind(name) {
+	return PREVIEW_KINDS[lowerExt(name)] ?? "none";
+}
+/**
+* Viewers from OpenList's public `iframe_previews` setting that match a file,
+* in the order OpenList lists them. Keys are comma-separated extensions or a
+* `/regex/flags` tested against the extension, as in OpenList's frontend.
+*/
+function iframePreviewsFor(name, setting) {
+	if (!setting) return [];
+	let parsed;
+	try {
+		parsed = JSON.parse(setting);
+	} catch {
+		return [];
+	}
+	if (!parsed || typeof parsed !== "object") return [];
+	const ext = lowerExt(name);
+	const out = [];
+	for (const [key, viewers] of Object.entries(parsed)) {
+		let hit = false;
+		if (key.startsWith("/")) {
+			const end = key.lastIndexOf("/");
+			try {
+				hit = end > 0 && new RegExp(key.slice(1, end), key.slice(end + 1)).test(ext);
+			} catch {
+				hit = false;
+			}
+		} else hit = key.split(",").map((item) => item.trim().toLowerCase()).includes(ext);
+		if (!hit || !viewers || typeof viewers !== "object") continue;
+		for (const [label, scheme] of Object.entries(viewers)) if (typeof scheme === "string" && /^https?:\/\//i.test(scheme)) out.push({
+			label,
+			scheme
+		});
+	}
+	return out;
+}
+function applyUrlOps(placeholder, url) {
+	const ops = placeholder.slice(1, placeholder.lastIndexOf("url")).replace(/d$/, "").match(/[eb]/g) ?? [];
+	let value = url;
+	for (const op of ops.reverse()) value = op === "e" ? encodeURIComponent(value) : btoa(String.fromCharCode(...new TextEncoder().encode(value)));
+	return value;
+}
+/**
+* Fill an OpenList preview scheme: `$name`, `$url` (raw URL) and `$durl`
+* (signed download URL), each optionally prefixed with `e` (URI-encode) or
+* `b` (base64), e.g. `$e_url`, `$b_url`, `$e_durl`.
+*/
+function fillPreviewUrl(scheme, args) {
+	return scheme.replace(/\$name/g, args.name).replace(/\$[eb_]*durl/g, (placeholder) => applyUrlOps(placeholder, args.downloadUrl)).replace(/\$[eb_]*url/g, (placeholder) => applyUrlOps(placeholder, args.rawUrl));
+}
+// src/client/PreviewDialog.vue
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "PreviewDialog",
+	__ssrInlineRender: true,
+	props: {
+		open: { type: Boolean },
+		file: {},
+		labels: {},
+		src: { default: "" },
+		viewer: { default: "" },
+		resolving: {
+			type: Boolean,
+			default: false
+		},
+		error: { default: "" },
+		demo: {
+			type: Boolean,
+			default: false
+		},
+		position: { default: 0 },
+		total: { default: 0 },
+		maxTextBytes: { default: 1048576 },
+		maxPdfBytes: { default: 52428800 }
+	},
+	emits: [
+		"close",
+		"prev",
+		"next",
+		"download"
+	],
+	setup(__props, { emit: __emit }) {
+		/**
+		* PreviewDialog.vue —— 文件预览弹窗（原生 <dialog>，不跳转页面）
+		*
+		* image / video / audio：原生标签；text：Range 读取前 maxTextBytes；
+		* pdf：OpenList `iframe_previews` 中的查看器，未配置时用浏览器自带阅读器（Blob）；
+		* 其它类型（含 Office）、失败、过大、演示模式：文件信息 + 下载。
+		*/
+		const props = __props;
+		function t(key, values) {
+			return formatLabel(props.labels[key], values);
+		}
+		const dialog = ref();
+		const kind = computed(() => props.file ? previewKind(props.file.name) : "none");
+		const loadingBody = ref(false);
+		const bodyFailed = ref(false);
+		const textContent = ref("");
+		const truncated = ref(false);
+		const blobUrl = ref("");
+		const rotation = ref(0);
+		const actualSize = ref(false);
+		let controller;
+		let loadSeq = 0;
+		const tooLarge = computed(() => kind.value === "pdf" && !props.viewer && (props.file?.size ?? 0) > props.maxPdfBytes);
+		const mode = computed(() => {
+			if (props.demo) return "demo";
+			if (props.error || bodyFailed.value) return "failed";
+			if (kind.value === "none") return "unsupported";
+			if (tooLarge.value) return "tooLarge";
+			return kind.value;
+		});
+		const busy = computed(() => !props.demo && kind.value !== "none" && !props.error && !bodyFailed.value && (props.resolving || loadingBody.value || !props.src && !tooLarge.value));
+		const infoMessage = computed(() => {
+			const file = props.file;
+			if (!file) return "";
+			if (mode.value === "demo") return t("demoPreview", { name: file.name });
+			if (mode.value === "tooLarge") return t("previewTooLarge", { size: formatSize(file.size) });
+			if (mode.value === "failed") return t("previewUnavailable");
+			return t("previewUnsupported");
+		});
+		function revokeBlob() {
+			if (blobUrl.value) URL.revokeObjectURL(blobUrl.value);
+			blobUrl.value = "";
+		}
+		function resetBody() {
+			controller?.abort();
+			controller = void 0;
+			loadSeq += 1;
+			revokeBlob();
+			loadingBody.value = false;
+			bodyFailed.value = false;
+			textContent.value = "";
+			truncated.value = false;
+			rotation.value = 0;
+			actualSize.value = false;
+		}
+		async function readPrefix(response, limit) {
+			const reader = response.body?.getReader();
+			if (!reader) {
+				const all = new Uint8Array(await response.arrayBuffer());
+				return {
+					bytes: all.slice(0, limit),
+					more: all.length > limit
+				};
+			}
+			const chunks = [];
+			let length = 0;
+			let more = false;
+			while (true) {
+				const { done, value } = await reader.read();
+				if (done) break;
+				chunks.push(value);
+				length += value.length;
+				if (length >= limit) {
+					more = length > limit;
+					await reader.cancel().catch(() => {});
+					break;
+				}
+			}
+			const bytes = new Uint8Array(Math.min(length, limit));
+			let offset = 0;
+			for (const chunk of chunks) {
+				const part = chunk.subarray(0, bytes.length - offset);
+				bytes.set(part, offset);
+				offset += part.length;
+				if (offset >= bytes.length) break;
+			}
+			return {
+				bytes,
+				more
+			};
+		}
+		async function loadBody() {
+			resetBody();
+			const file = props.file;
+			if (!props.open || !file || props.demo || !props.src || props.error) return;
+			if (kind.value !== "text" && !(kind.value === "pdf" && !props.viewer && !tooLarge.value)) return;
+			const seq = loadSeq;
+			controller = new AbortController();
+			loadingBody.value = true;
+			try {
+				if (kind.value === "text") {
+					const limit = props.maxTextBytes;
+					const response = await fetch(props.src, {
+						headers: { Range: `bytes=0-${limit - 1}` },
+						signal: controller.signal
+					});
+					if (!response.ok) throw new Error(`HTTP ${response.status}`);
+					const { bytes, more } = await readPrefix(response, limit);
+					if (seq !== loadSeq) return;
+					textContent.value = new TextDecoder("utf-8").decode(bytes);
+					truncated.value = more || file.size > limit;
+				} else {
+					const response = await fetch(props.src, { signal: controller.signal });
+					if (!response.ok) throw new Error(`HTTP ${response.status}`);
+					const buffer = await response.arrayBuffer();
+					if (seq !== loadSeq) return;
+					blobUrl.value = URL.createObjectURL(new Blob([buffer], { type: "application/pdf" }));
+				}
+			} catch {
+				if (seq === loadSeq && !controller?.signal.aborted) bodyFailed.value = true;
+			} finally {
+				if (seq === loadSeq) loadingBody.value = false;
+			}
+		}
+		watch(() => [
+			props.open,
+			props.file?.name,
+			props.src,
+			props.viewer,
+			props.error,
+			props.demo
+		], () => void loadBody(), { immediate: true });
+		watch(() => props.open, (open) => {
+			const el = dialog.value;
+			if (!el) return;
+			if (open && !el.open) {
+				if (typeof el.showModal === "function") el.showModal();
+				else el.setAttribute("open", "");
+			} else if (!open && el.open) {
+				if (typeof el.close === "function") el.close();
+				else el.removeAttribute("open");
+			}
+		}, { flush: "post" });
+		onBeforeUnmount(resetBody);
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<dialog${ssrRenderAttrs(mergeProps({
+				ref_key: "dialog",
+				ref: dialog,
+				class: "fl-preview",
+				"aria-label": __props.file?.name
+			}, _attrs))}>`);
+			if (__props.open && __props.file) {
+				_push(`<div class="fl-preview-panel"><header class="fl-preview-head"><span class="fl-type"${ssrRenderAttr("data-kind", unref(fileKind)(__props.file.name))} aria-hidden="true">${ssrInterpolate(unref(extOf)(__props.file.name) || "FILE")}</span><div class="fl-preview-title"><span class="fl-preview-name">${ssrInterpolate(__props.file.name)}</span><span class="fl-preview-meta">${ssrInterpolate(unref(formatSize)(__props.file.size))} · ${ssrInterpolate(unref(formatDate)(__props.file.modified))}</span></div>`);
+				if (__props.total > 1 || mode.value === "image" && !busy.value) {
+					_push(`<div class="fl-preview-tools fl-preview-nav">`);
+					if (__props.total > 1) _push(`<!--[--><button class="fl-preview-tool" type="button"${ssrRenderAttr("aria-label", t("previous"))}${ssrRenderAttr("title", t("previous"))}><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 6-6 6 6 6"></path></svg></button><span class="fl-preview-count">${ssrInterpolate(__props.position)} / ${ssrInterpolate(__props.total)}</span><button class="fl-preview-tool" type="button"${ssrRenderAttr("aria-label", t("next"))}${ssrRenderAttr("title", t("next"))}><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg></button><!--]-->`);
+					else _push(`<!---->`);
+					if (mode.value === "image" && !busy.value) {
+						_push(`<!--[--><button class="fl-preview-tool fl-preview-rotate" type="button"${ssrRenderAttr("aria-label", t("rotate"))}${ssrRenderAttr("title", t("rotate"))}><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7"></path><path d="M21 4v5h-5"></path></svg></button><button class="fl-preview-tool fl-preview-zoom" type="button"${ssrRenderAttr("aria-pressed", actualSize.value)}${ssrRenderAttr("aria-label", t("actualSize"))}${ssrRenderAttr("title", t("actualSize"))}><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path>`);
+						if (!actualSize.value) _push(`<path d="M11 8v6M8 11h6"></path>`);
+						else _push(`<path d="M8 11h6"></path>`);
+						_push(`</svg></button><!--]-->`);
+					} else _push(`<!---->`);
+					_push(`</div>`);
+				} else _push(`<!---->`);
+				_push(`<div class="fl-preview-tools fl-preview-actions">`);
+				if (!__props.demo) _push(`<button class="fl-preview-tool fl-preview-download" type="button"${ssrRenderAttr("aria-label", t("download"))}${ssrRenderAttr("title", t("download"))}><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg></button>`);
+				else _push(`<!---->`);
+				_push(`<button class="fl-preview-tool fl-preview-close" type="button" autofocus${ssrRenderAttr("aria-label", t("close"))}${ssrRenderAttr("title", t("close"))}><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12"></path><path d="M18 6 6 18"></path></svg></button></div></header><div class="fl-preview-body"${ssrRenderAttr("data-mode", busy.value ? "loading" : mode.value)}>`);
+				if (busy.value) _push(`<div class="fl-preview-status" role="status">${ssrInterpolate(t("loading"))}</div>`);
+				else if (mode.value === "image") _push(`<img class="${ssrRenderClass([{ "fl-preview-actual": actualSize.value }, "fl-preview-image"])}"${ssrRenderAttr("src", __props.src)}${ssrRenderAttr("alt", __props.file.name)} style="${ssrRenderStyle({ transform: rotation.value ? `rotate(${rotation.value}deg)` : void 0 })}">`);
+				else if (mode.value === "video") _push(`<video class="fl-preview-video"${ssrRenderAttr("src", __props.src)} controls playsinline preload="metadata"></video>`);
+				else if (mode.value === "audio") _push(`<audio class="fl-preview-audio"${ssrRenderAttr("src", __props.src)} controls preload="metadata"></audio>`);
+				else if (mode.value === "text") {
+					_push(`<div class="fl-preview-text">`);
+					if (truncated.value) _push(`<p class="fl-preview-note">${ssrInterpolate(t("textTruncated", { size: unref(formatSize)(__props.maxTextBytes) }))}</p>`);
+					else _push(`<!---->`);
+					_push(`<pre>${ssrInterpolate(textContent.value)}</pre></div>`);
+				} else if (mode.value === "pdf") _push(`<iframe class="fl-preview-frame"${ssrRenderAttr("src", __props.viewer || blobUrl.value)}${ssrRenderAttr("title", __props.file.name)}></iframe>`);
+				else {
+					_push(`<div class="fl-preview-info"><span class="fl-type fl-preview-badge"${ssrRenderAttr("data-kind", unref(fileKind)(__props.file.name))} aria-hidden="true">${ssrInterpolate(unref(extOf)(__props.file.name) || "FILE")}</span><p class="fl-preview-message">${ssrInterpolate(infoMessage.value)}</p>`);
+					if (!__props.demo) _push(`<button class="fl-btn fl-btn-primary" type="button"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg> ${ssrInterpolate(t("download"))}</button>`);
+					else _push(`<!---->`);
+					_push(`</div>`);
+				}
+				_push(`</div></div>`);
+			} else _push(`<!---->`);
+			_push(`</dialog>`);
+		};
+	}
+});
+const _sfc_setup$1 = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/PreviewDialog.vue");
+	return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
 // src/client/FileList.vue
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "FileList",
@@ -313,6 +701,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const sortKey = ref("name");
 		const sortAsc = ref(true);
 		const siteTitle = ref("");
+		/** OpenList's public `iframe_previews` setting (JSON text). */
+		const iframePreviews = ref("");
 		const batchBusy = ref(false);
 		const batchProgress = ref(0);
 		const downloadCache = /* @__PURE__ */ new Map();
@@ -498,13 +888,47 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				refresh: false
 			}))?.content ?? [];
 		}
+		function absoluteUrl(raw) {
+			if (!raw) return "";
+			if (/^[a-z][a-z0-9+.-]*:\/\//i.test(raw)) return raw;
+			const root = baseUrl.value || (typeof window !== "undefined" ? window.location.origin : "");
+			try {
+				return new URL(raw, `${root}/`).href;
+			} catch {
+				return raw;
+			}
+		}
+		async function resolveUrl(node) {
+			if (demo.value) return "";
+			if (node.raw_url) return absoluteUrl(node.raw_url);
+			const cached = downloadCache.get(node.path);
+			if (cached) return cached;
+			let url = "";
+			try {
+				url = absoluteUrl((await request("/api/fs/get", {
+					path: node.path,
+					password: node.password || activePassword.value
+				}))?.raw_url ?? "");
+			} catch {
+				url = "";
+			}
+			if (!url) url = directUrl(node);
+			downloadCache.set(node.path, url);
+			return url;
+		}
+		/** OpenList's signed `/d/` download link for a file. */
+		function directUrl(node) {
+			return `${baseUrl.value}/d${encodePath(node.path)}${node.sign ? `?sign=${encodeURIComponent(node.sign)}` : ""}`;
+		}
 		async function loadSiteTitle() {
 			if (demo.value) return;
 			try {
 				const data = await request("/api/public/settings");
 				siteTitle.value = data?.site_title || data?.title || "";
+				iframePreviews.value = data?.iframe_previews || "";
 			} catch {
 				siteTitle.value = "";
+				iframePreviews.value = "";
 			}
 		}
 		function sortTree(nodes) {
@@ -675,20 +1099,75 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				resortAll();
 			}
 		});
-		const unloadedFolders = computed(() => {
-			let count = 0;
-			const walk = (nodes) => {
-				for (const node of nodes) {
-					if (node.is_dir && !node.loaded) count += 1;
-					if (node.children.length) walk(node.children);
-				}
-			};
-			walk(roots.value);
-			return count;
-		});
-		const previewable = /\.(?:pdf|png|jpe?g|gif|webp|svg|txt|md|json|mp3|wav|mp4|webm|mov)$/i;
+		function triggerUrl(url) {
+			const anchor = document.createElement("a");
+			anchor.href = url;
+			anchor.target = "_blank";
+			anchor.rel = "noopener";
+			document.body.appendChild(anchor);
+			anchor.click();
+			anchor.remove();
+		}
+		async function download(node) {
+			if (node.is_dir) return;
+			if (demo.value) {
+				showToast(t("demoDownload", { name: node.name }));
+				return;
+			}
+			try {
+				triggerUrl(await resolveUrl(node));
+			} catch (error) {
+				showToast(t("downloadFailed", { message: errorText(error) }));
+			}
+		}
+		/** Only types the dialog can actually render get a preview button. */
 		function canPreview(node) {
-			return !node.is_dir && previewable.test(node.name);
+			return !node.is_dir && previewKind(node.name) !== "none";
+		}
+		const previewNode = ref(null);
+		const previewSrc = ref("");
+		const previewViewer = ref("");
+		const previewResolving = ref(false);
+		const previewError = ref("");
+		let previewSeq = 0;
+		/** Previewable files in the order they are listed, for ← / →. */
+		const previewList = computed(() => visible.value.filter(canPreview));
+		const previewPosition = computed(() => previewNode.value ? previewList.value.indexOf(previewNode.value) + 1 : 0);
+		async function preview(node) {
+			const seq = ++previewSeq;
+			previewNode.value = node;
+			previewSrc.value = "";
+			previewViewer.value = "";
+			previewError.value = "";
+			previewResolving.value = false;
+			if (demo.value || !canPreview(node)) return;
+			previewResolving.value = true;
+			try {
+				const url = await resolveUrl(node);
+				if (seq !== previewSeq) return;
+				previewSrc.value = url;
+				if (previewKind(node.name) === "pdf") {
+					const viewer = iframePreviewsFor(node.name, iframePreviews.value)[0];
+					if (viewer) previewViewer.value = fillPreviewUrl(viewer.scheme, {
+						name: node.name,
+						rawUrl: url,
+						downloadUrl: directUrl(node)
+					});
+				}
+			} catch (error) {
+				if (seq === previewSeq) previewError.value = errorText(error);
+			} finally {
+				if (seq === previewSeq) previewResolving.value = false;
+			}
+		}
+		function stepPreview(delta) {
+			const list = previewList.value;
+			if (!list.length) return;
+			preview(list[((previewNode.value ? list.indexOf(previewNode.value) : -1) + delta + list.length) % list.length]);
+		}
+		function closePreview() {
+			previewSeq += 1;
+			previewNode.value = null;
 		}
 		const displayTitle = computed(() => props.title || siteTitle.value || (props.path === "/" ? t("allFiles") : props.path));
 		const stickyTop = ref(0);
@@ -780,12 +1259,25 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				}
 				_push(`</span></div>`);
 			});
-			_push(`<!--]--><div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("totalSize", { size: unref(formatSize)(loadedBytes.value) }))}</span>`);
-			if (unloadedFolders.value) _push(`<span class="fl-foot-hint">${ssrInterpolate(t("unloaded", { count: unloadedFolders.value }))}</span>`);
-			else _push(`<!---->`);
-			_push(`</div>`);
+			_push(`<!--]--><div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("totalSize", { size: unref(formatSize)(loadedBytes.value) }))}</span></div>`);
 			if (toast.value) _push(`<div class="fl-toast" role="status">${ssrInterpolate(toast.value)}</div>`);
 			else _push(`<!---->`);
+			_push(ssrRenderComponent(_sfc_main$1, {
+				open: !!previewNode.value,
+				file: previewNode.value,
+				labels: text.value,
+				src: previewSrc.value,
+				viewer: previewViewer.value,
+				resolving: previewResolving.value,
+				error: previewError.value,
+				demo: demo.value,
+				position: previewPosition.value,
+				total: previewPosition.value ? previewList.value.length : 0,
+				onClose: closePreview,
+				onPrev: ($event) => stepPreview(-1),
+				onNext: ($event) => stepPreview(1),
+				onDownload: ($event) => previewNode.value && download(previewNode.value)
+			}, null, _parent));
 			_push(`</div>`);
 		};
 	}
@@ -817,4 +1309,4 @@ function enhanceAppWithFileList({ app }) {
 	if (!app._context.components.FileList) app.component("FileList", _sfc_main);
 	if (!app._context.components.VPFileList) app.component("VPFileList", _sfc_main);
 }
-export { _sfc_main as FileList, _sfc_main as VPFileList, compareNodes, encodePath, enhanceAppWithFileList, extOf, fileKind, fileListLocales, formatDate, formatLabel, formatSize, joinPath, resolveLabels, totalSize, uniqueEntryName, zipEntryName, zipSegment };
+export { _sfc_main as FileList, _sfc_main as VPFileList, compareNodes, encodePath, enhanceAppWithFileList, extOf, fileKind, fileListLocales, fillPreviewUrl, formatDate, formatLabel, formatSize, iframePreviewsFor, joinPath, previewKind, resolveLabels, totalSize, uniqueEntryName, zipEntryName, zipSegment };