vitepress-plugin-filelist 0.3.0 → 0.4.0

package/dist/client/browser/index.js

@@ -1,5 +1,5 @@
 import "../style.css";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelSelect, vModelText, withDirectives, withKeys } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelSelect, vModelText, watch, withDirectives, withKeys } from "vue";
 // 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,595 @@ 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 _hoisted_1$1 = ["aria-label"];
+const _hoisted_2$1 = {
+	key: 0,
+	class: "fl-preview-panel"
+};
+const _hoisted_3$1 = { class: "fl-preview-head" };
+const _hoisted_4$1 = ["data-kind"];
+const _hoisted_5$1 = { class: "fl-preview-title" };
+const _hoisted_6$1 = { class: "fl-preview-name" };
+const _hoisted_7$1 = { class: "fl-preview-meta" };
+const _hoisted_8$1 = {
+	key: 0,
+	class: "fl-preview-tools fl-preview-nav"
+};
+const _hoisted_9$1 = ["aria-label", "title"];
+const _hoisted_10$1 = { class: "fl-preview-count" };
+const _hoisted_11$1 = ["aria-label", "title"];
+const _hoisted_12$1 = ["aria-label", "title"];
+const _hoisted_13$1 = [
+	"aria-pressed",
+	"aria-label",
+	"title"
+];
+const _hoisted_14$1 = {
+	viewBox: "0 0 24 24",
+	width: "17",
+	height: "17",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"aria-hidden": "true"
+};
+const _hoisted_15$1 = {
+	key: 0,
+	d: "M11 8v6M8 11h6"
+};
+const _hoisted_16$1 = {
+	key: 1,
+	d: "M8 11h6"
+};
+const _hoisted_17$1 = { class: "fl-preview-tools fl-preview-actions" };
+const _hoisted_18$1 = ["aria-label", "title"];
+const _hoisted_19$1 = ["aria-label", "title"];
+const _hoisted_20$1 = ["data-mode"];
+const _hoisted_21$1 = {
+	key: 0,
+	class: "fl-preview-status",
+	role: "status"
+};
+const _hoisted_22$1 = ["src", "alt"];
+const _hoisted_23$1 = ["src"];
+const _hoisted_24$1 = ["src"];
+const _hoisted_25$1 = {
+	key: 4,
+	class: "fl-preview-text"
+};
+const _hoisted_26$1 = {
+	key: 0,
+	class: "fl-preview-note"
+};
+const _hoisted_27$1 = ["src", "title"];
+const _hoisted_28$1 = {
+	key: 6,
+	class: "fl-preview-info"
+};
+const _hoisted_29$1 = ["data-kind"];
+const _hoisted_30$1 = { class: "fl-preview-message" };
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
+	__name: "PreviewDialog",
+	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;
+		const emit = __emit;
+		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);
+		function onNativeClose() {
+			if (props.open) emit("close");
+		}
+		function onBackdrop(event) {
+			if (event.target === dialog.value) emit("close");
+		}
+		function onKeydown(event) {
+			if (props.total < 2) return;
+			const target = event.target;
+			if (target && /^(INPUT|TEXTAREA|SELECT|VIDEO|AUDIO)$/.test(target.tagName)) return;
+			if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				emit("prev");
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				emit("next");
+			}
+		}
+		function markFailed() {
+			bodyFailed.value = true;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("dialog", {
+				ref_key: "dialog",
+				ref: dialog,
+				class: "fl-preview",
+				"aria-label": __props.file?.name,
+				onClose: onNativeClose,
+				onClick: onBackdrop,
+				onKeydown
+			}, [__props.open && __props.file ? (openBlock(), createElementBlock("div", _hoisted_2$1, [createElementVNode("header", _hoisted_3$1, [
+				createElementVNode("span", {
+					class: "fl-type",
+					"data-kind": unref(fileKind)(__props.file.name),
+					"aria-hidden": "true"
+				}, toDisplayString(unref(extOf)(__props.file.name) || "FILE"), 9, _hoisted_4$1),
+				createElementVNode("div", _hoisted_5$1, [createElementVNode("span", _hoisted_6$1, toDisplayString(__props.file.name), 1), createElementVNode("span", _hoisted_7$1, toDisplayString(unref(formatSize)(__props.file.size)) + " · " + toDisplayString(unref(formatDate)(__props.file.modified)), 1)]),
+				__props.total > 1 || mode.value === "image" && !busy.value ? (openBlock(), createElementBlock("div", _hoisted_8$1, [__props.total > 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					createElementVNode("button", {
+						class: "fl-preview-tool",
+						type: "button",
+						"aria-label": t("previous"),
+						title: t("previous"),
+						onClick: _cache[0] || (_cache[0] = ($event) => emit("prev"))
+					}, [..._cache[7] || (_cache[7] = [createElementVNode("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"
+					}, [createElementVNode("path", { d: "m15 6-6 6 6 6" })], -1)])], 8, _hoisted_9$1),
+					createElementVNode("span", _hoisted_10$1, toDisplayString(__props.position) + " / " + toDisplayString(__props.total), 1),
+					createElementVNode("button", {
+						class: "fl-preview-tool",
+						type: "button",
+						"aria-label": t("next"),
+						title: t("next"),
+						onClick: _cache[1] || (_cache[1] = ($event) => emit("next"))
+					}, [..._cache[8] || (_cache[8] = [createElementVNode("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"
+					}, [createElementVNode("path", { d: "m9 6 6 6-6 6" })], -1)])], 8, _hoisted_11$1)
+				], 64)) : createCommentVNode("v-if", true), mode.value === "image" && !busy.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createElementVNode("button", {
+					class: "fl-preview-tool fl-preview-rotate",
+					type: "button",
+					"aria-label": t("rotate"),
+					title: t("rotate"),
+					onClick: _cache[2] || (_cache[2] = ($event) => rotation.value = (rotation.value + 90) % 360)
+				}, [..._cache[9] || (_cache[9] = [createElementVNode("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"
+				}, [createElementVNode("path", { d: "M21 12a9 9 0 1 1-3-6.7" }), createElementVNode("path", { d: "M21 4v5h-5" })], -1)])], 8, _hoisted_12$1), createElementVNode("button", {
+					class: "fl-preview-tool fl-preview-zoom",
+					type: "button",
+					"aria-pressed": actualSize.value,
+					"aria-label": t("actualSize"),
+					title: t("actualSize"),
+					onClick: _cache[3] || (_cache[3] = ($event) => actualSize.value = !actualSize.value)
+				}, [(openBlock(), createElementBlock("svg", _hoisted_14$1, [
+					_cache[10] || (_cache[10] = createElementVNode("circle", {
+						cx: "11",
+						cy: "11",
+						r: "7"
+					}, null, -1)),
+					_cache[11] || (_cache[11] = createElementVNode("path", { d: "m20 20-3.5-3.5" }, null, -1)),
+					!actualSize.value ? (openBlock(), createElementBlock("path", _hoisted_15$1)) : (openBlock(), createElementBlock("path", _hoisted_16$1))
+				]))], 8, _hoisted_13$1)], 64)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_17$1, [!__props.demo ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "fl-preview-tool fl-preview-download",
+					type: "button",
+					"aria-label": t("download"),
+					title: t("download"),
+					onClick: _cache[4] || (_cache[4] = ($event) => emit("download"))
+				}, [..._cache[12] || (_cache[12] = [createElementVNode("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"
+				}, [
+					createElementVNode("path", { d: "M12 3v12" }),
+					createElementVNode("path", { d: "m7 10 5 5 5-5" }),
+					createElementVNode("path", { d: "M5 21h14" })
+				], -1)])], 8, _hoisted_18$1)) : createCommentVNode("v-if", true), createElementVNode("button", {
+					class: "fl-preview-tool fl-preview-close",
+					type: "button",
+					autofocus: "",
+					"aria-label": t("close"),
+					title: t("close"),
+					onClick: _cache[5] || (_cache[5] = ($event) => emit("close"))
+				}, [..._cache[13] || (_cache[13] = [createElementVNode("svg", {
+					viewBox: "0 0 24 24",
+					width: "18",
+					height: "18",
+					fill: "none",
+					stroke: "currentColor",
+					"stroke-width": "2.2",
+					"stroke-linecap": "round",
+					"aria-hidden": "true"
+				}, [createElementVNode("path", { d: "M6 6l12 12" }), createElementVNode("path", { d: "M18 6 6 18" })], -1)])], 8, _hoisted_19$1)])
+			]), createElementVNode("div", {
+				class: "fl-preview-body",
+				"data-mode": busy.value ? "loading" : mode.value
+			}, [busy.value ? (openBlock(), createElementBlock("div", _hoisted_21$1, toDisplayString(t("loading")), 1)) : mode.value === "image" ? (openBlock(), createElementBlock("img", {
+				key: 1,
+				class: normalizeClass(["fl-preview-image", { "fl-preview-actual": actualSize.value }]),
+				src: __props.src,
+				alt: __props.file.name,
+				style: normalizeStyle({ transform: rotation.value ? `rotate(${rotation.value}deg)` : void 0 }),
+				onError: markFailed
+			}, null, 46, _hoisted_22$1)) : mode.value === "video" ? (openBlock(), createElementBlock("video", {
+				key: 2,
+				class: "fl-preview-video",
+				src: __props.src,
+				controls: "",
+				playsinline: "",
+				preload: "metadata",
+				onError: markFailed
+			}, null, 40, _hoisted_23$1)) : mode.value === "audio" ? (openBlock(), createElementBlock("audio", {
+				key: 3,
+				class: "fl-preview-audio",
+				src: __props.src,
+				controls: "",
+				preload: "metadata",
+				onError: markFailed
+			}, null, 40, _hoisted_24$1)) : mode.value === "text" ? (openBlock(), createElementBlock("div", _hoisted_25$1, [truncated.value ? (openBlock(), createElementBlock("p", _hoisted_26$1, toDisplayString(t("textTruncated", { size: unref(formatSize)(__props.maxTextBytes) })), 1)) : createCommentVNode("v-if", true), createElementVNode("pre", null, toDisplayString(textContent.value), 1)])) : mode.value === "pdf" ? (openBlock(), createElementBlock("iframe", {
+				key: 5,
+				class: "fl-preview-frame",
+				src: __props.viewer || blobUrl.value,
+				title: __props.file.name
+			}, null, 8, _hoisted_27$1)) : (openBlock(), createElementBlock("div", _hoisted_28$1, [
+				createElementVNode("span", {
+					class: "fl-type fl-preview-badge",
+					"data-kind": unref(fileKind)(__props.file.name),
+					"aria-hidden": "true"
+				}, toDisplayString(unref(extOf)(__props.file.name) || "FILE"), 9, _hoisted_29$1),
+				createElementVNode("p", _hoisted_30$1, toDisplayString(infoMessage.value), 1),
+				!__props.demo ? (openBlock(), createElementBlock("button", {
+					key: 0,
+					class: "fl-btn fl-btn-primary",
+					type: "button",
+					onClick: _cache[6] || (_cache[6] = ($event) => emit("download"))
+				}, [_cache[14] || (_cache[14] = createElementVNode("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"
+				}, [
+					createElementVNode("path", { d: "M12 3v12" }),
+					createElementVNode("path", { d: "m7 10 5 5 5-5" }),
+					createElementVNode("path", { d: "M5 21h14" })
+				], -1)), createTextVNode(" " + toDisplayString(t("download")), 1)])) : createCommentVNode("v-if", true)
+			]))], 8, _hoisted_20$1)])) : createCommentVNode("v-if", true)], 40, _hoisted_1$1);
+		};
+	}
+});
 // src/client/FileList.vue
 const _hoisted_1 = { class: "fl-bar" };
 const _hoisted_2 = {
@@ -408,10 +1015,6 @@ const _hoisted_54 = [
 ];
 const _hoisted_55 = { class: "fl-foot" };
 const _hoisted_56 = {
-	key: 0,
-	class: "fl-foot-hint"
-};
-const _hoisted_57 = {
 	key: 4,
 	class: "fl-toast",
 	role: "status"
@@ -459,6 +1062,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();
@@ -668,20 +1273,23 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			} catch {
 				url = "";
 			}
-			if (!url) {
-				const encoded = node.path.split("/").map(encodeURIComponent).join("/");
-				url = `${baseUrl.value}/d${encoded}${node.sign ? `?sign=${encodeURIComponent(node.sign)}` : ""}`;
-			}
+			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) {
@@ -901,17 +1509,6 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		function toggleCheckAll() {
 			selected.value = allChecked.value ? /* @__PURE__ */ new Set() : new Set(allFiles.value.map((file) => file.path));
 		}
-		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;
-		});
 		function triggerUrl(url) {
 			const anchor = document.createElement("a");
 			anchor.href = url;
@@ -943,21 +1540,55 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				showToast(t("downloadFailed", { message: errorText(error) }));
 			}
 		}
-		const previewable = /\.(?:pdf|png|jpe?g|gif|webp|svg|txt|md|json|mp3|wav|mp4|webm|mov)$/i;
+		/** 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) {
-			if (demo.value) {
-				showToast(t("demoPreview", { name: node.name }));
-				return;
-			}
+			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 {
-				window.open(await resolveUrl(node), "_blank", "noopener");
+				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) {
-				showToast(t("previewFailed", { message: errorText(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;
+		}
 		async function batchDownload() {
 			const files = allFiles.value.filter((file) => selected.value.has(file.path));
 			if (!files.length) return;
@@ -1038,7 +1669,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"aria-label": t("clearSelection"),
 						title: t("clearSelection"),
 						onClick: clearSelection
-					}, [_cache[6] || (_cache[6] = createElementVNode("svg", {
+					}, [_cache[9] || (_cache[9] = createElementVNode("svg", {
 						class: "fl-clear-icon",
 						viewBox: "0 0 24 24",
 						width: "18",
@@ -1049,7 +1680,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"stroke-linecap": "round",
 						"aria-hidden": "true"
 					}, [createElementVNode("path", { d: "M6 6l12 12" }), createElementVNode("path", { d: "M18 6 6 18" })], -1)), createElementVNode("span", _hoisted_9, toDisplayString(t("clear")), 1)], 8, _hoisted_8)) : createCommentVNode("v-if", true),
-					createElementVNode("div", _hoisted_10, [createElementVNode("label", _hoisted_11, [_cache[7] || (_cache[7] = createElementVNode("svg", {
+					createElementVNode("div", _hoisted_10, [createElementVNode("label", _hoisted_11, [_cache[10] || (_cache[10] = createElementVNode("svg", {
 						viewBox: "0 0 24 24",
 						width: "15",
 						height: "15",
@@ -1073,7 +1704,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"aria-label": t("refresh"),
 						title: t("refresh"),
 						onClick: loadRoot
-					}, [..._cache[8] || (_cache[8] = [createElementVNode("svg", {
+					}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
 						viewBox: "0 0 24 24",
 						width: "15",
 						height: "15",
@@ -1090,7 +1721,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						type: "button",
 						disabled: batchBusy.value,
 						onClick: batchDownload
-					}, [_cache[9] || (_cache[9] = createElementVNode("svg", {
+					}, [_cache[12] || (_cache[12] = createElementVNode("svg", {
 						viewBox: "0 0 24 24",
 						width: "15",
 						height: "15",
@@ -1190,7 +1821,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							class: "fl-cell fl-cell-name",
 							title: node.isRoot ? node.path : void 0
 						}, [
-							_cache[12] || (_cache[12] = createElementVNode("span", {
+							_cache[15] || (_cache[15] = createElementVNode("span", {
 								class: "fl-indent",
 								"aria-hidden": "true"
 							}, null, -1)),
@@ -1201,7 +1832,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"aria-label": t(node.expanded ? "collapse" : "expand", { name: node.name }),
 								"aria-expanded": node.expanded,
 								onClick: ($event) => toggleExpand(node)
-							}, [..._cache[10] || (_cache[10] = [createElementVNode("svg", {
+							}, [..._cache[13] || (_cache[13] = [createElementVNode("svg", {
 								viewBox: "0 0 24 24",
 								width: "14",
 								height: "14",
@@ -1212,7 +1843,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"stroke-linejoin": "round",
 								"aria-hidden": "true"
 							}, [createElementVNode("path", { d: "m9 6 6 6-6 6" })], -1)])], 10, _hoisted_40)) : (openBlock(), createElementBlock("span", _hoisted_41)),
-							node.is_dir ? (openBlock(), createElementBlock("svg", _hoisted_42, [..._cache[11] || (_cache[11] = [createElementVNode("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }, null, -1)])])) : (openBlock(), createElementBlock("span", {
+							node.is_dir ? (openBlock(), createElementBlock("svg", _hoisted_42, [..._cache[14] || (_cache[14] = [createElementVNode("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }, null, -1)])])) : (openBlock(), createElementBlock("span", {
 								key: 3,
 								class: "fl-type",
 								"data-kind": unref(fileKind)(node.name),
@@ -1234,7 +1865,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"aria-label": t(node.expanded ? "collapse" : "expand", { name: node.name }),
 							"aria-expanded": node.expanded,
 							onClick: ($event) => toggleExpand(node)
-						}, [..._cache[13] || (_cache[13] = [createElementVNode("svg", {
+						}, [..._cache[16] || (_cache[16] = [createElementVNode("svg", {
 							viewBox: "0 0 24 24",
 							width: "18",
 							height: "18",
@@ -1251,7 +1882,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"aria-label": `${t("preview")} ${node.name}`,
 							title: t("preview"),
 							onClick: ($event) => preview(node)
-						}, [..._cache[14] || (_cache[14] = [createElementVNode("svg", {
+						}, [..._cache[17] || (_cache[17] = [createElementVNode("svg", {
 							viewBox: "0 0 24 24",
 							width: "16",
 							height: "16",
@@ -1271,7 +1902,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"aria-label": `${t("download")} ${node.name}`,
 							title: t("download"),
 							onClick: ($event) => download(node)
-						}, [..._cache[15] || (_cache[15] = [createElementVNode("svg", {
+						}, [..._cache[18] || (_cache[18] = [createElementVNode("svg", {
 							viewBox: "0 0 24 24",
 							width: "16",
 							height: "16",
@@ -1288,8 +1919,35 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						], -1)])], 8, _hoisted_54)], 64))])
 					], 6);
 				}), 128)),
-				createElementVNode("div", _hoisted_55, [createElementVNode("span", null, toDisplayString(t("loaded", { count: allFiles.value.length })) + " · " + toDisplayString(t("totalSize", { size: unref(formatSize)(loadedBytes.value) })), 1), unloadedFolders.value ? (openBlock(), createElementBlock("span", _hoisted_56, toDisplayString(t("unloaded", { count: unloadedFolders.value })), 1)) : createCommentVNode("v-if", true)]),
-				toast.value ? (openBlock(), createElementBlock("div", _hoisted_57, toDisplayString(toast.value), 1)) : createCommentVNode("v-if", true)
+				createElementVNode("div", _hoisted_55, [createElementVNode("span", null, toDisplayString(t("loaded", { count: allFiles.value.length })) + " · " + toDisplayString(t("totalSize", { size: unref(formatSize)(loadedBytes.value) })), 1)]),
+				toast.value ? (openBlock(), createElementBlock("div", _hoisted_56, toDisplayString(toast.value), 1)) : createCommentVNode("v-if", true),
+				createVNode(_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: _cache[6] || (_cache[6] = ($event) => stepPreview(-1)),
+					onNext: _cache[7] || (_cache[7] = ($event) => stepPreview(1)),
+					onDownload: _cache[8] || (_cache[8] = ($event) => previewNode.value && download(previewNode.value))
+				}, null, 8, [
+					"open",
+					"file",
+					"labels",
+					"src",
+					"viewer",
+					"resolving",
+					"error",
+					"demo",
+					"position",
+					"total"
+				])
 			], 6);
 		};
 	}
@@ -1315,4 +1973,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 };