vitepress-plugin-filelist 0.6.2 → 0.7.0

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

@@ -92,6 +92,24 @@ interface FileListLabels {
   unlockFolder: string;
   /** @deprecated Network failures now append `corsHint`. */
   networkHint: string;
+  /** Deep search: the row at the end of a filtered list. `{count}` where noted */
+  deepHint: string;
+  deepSearch: string;
+  deepRunning: string;
+  deepStop: string;
+  deepDone: string;
+  deepCapped: string;
+  deepContinue: string;
+  deepSkipped: string;
+  deepFailed: string;
+  /** Markdown / HTML preview: the source / rendered switch. */
+  viewMode: string;
+  viewSource: string;
+  viewRendered: string;
+  /** Above a rendered HTML file. */
+  htmlSandboxNote: string;
+  /** Stands in for a Markdown image with a relative path. `{alt}` */
+  imageOmitted: string;
   /** Title of the dialog when a batch ZIP fails (the reason is the text). */
   batchFailedTitle: string;
   batchFailedHint: string;
@@ -156,6 +174,11 @@ interface FileListProps {
    * everything. Data is still loaded in full; only rendering is limited.
    */
   pageSize?: number;
+  /**
+   * Deep search loads at most this many folders per click (“Continue” goes on).
+   * Defaults to `500`.
+   */
+  deepSearchLimit?: number;
   /**
    * Browsers that must build the ZIP in memory (Firefox, Safari) ask first above
    * this many MB. Defaults to 500 (200 on touch devices); `0` never asks.
@@ -192,6 +215,7 @@ declare const _default: import("vue").DefineComponent<FileListProps, {}, {}, {},
   title: string;
   rememberPassword: boolean;
   pageSize: number;
+  deepSearchLimit: number;
   locale: FileListLocale;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare global {
@@ -310,7 +334,7 @@ export declare function previewKind(name: string): PreviewKind;
 export declare function totalSize(items: Array<{
   size?: number;
 }>): number;
-export declare function compareNodes(a: SortableNode, b: SortableNode, key: SortKey, ascending?: boolean): number;
+export declare function compareNodes(a: SortableNode, b: SortableNode, key: SortKey, ascending?: boolean, locale?: string): number;
 interface IframePreview {
   label: string;
   scheme: string;

package/dist/client/ssr/index.js

@@ -179,12 +179,29 @@ function previewKind(name) {
 function totalSize(items) {
 	return items.reduce((sum, item) => sum + (Number.isFinite(item.size) && (item.size ?? 0) > 0 ? item.size : 0), 0);
 }
-function compareNodes(a, b, key, ascending = true) {
+const collators = /* @__PURE__ */ new Map();
+/**
+* Name order for a UI locale: pinyin for Chinese, alphabetical for English,
+* with numbers in natural order (“2” before “10”) either way.
+*/
+function collatorFor(locale) {
+	const tag = locale.toLowerCase().startsWith("zh") ? "zh-Hans-CN" : "en";
+	let collator = collators.get(tag);
+	if (!collator) {
+		collator = new Intl.Collator(tag, {
+			numeric: true,
+			sensitivity: "base"
+		});
+		collators.set(tag, collator);
+	}
+	return collator;
+}
+function compareNodes(a, b, key, ascending = true, locale = "zh-CN") {
 	if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
 	let result = 0;
 	if (key === "size") result = a.size - b.size;
 	else if (key === "modified") result = new Date(a.modified).getTime() - new Date(b.modified).getTime();
-	else result = a.name.localeCompare(b.name, "zh-Hans-CN", { numeric: true });
+	else result = collatorFor(locale).compare(a.name, b.name) || (a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
 	return ascending ? result : -result;
 }
 /**
@@ -852,6 +869,20 @@ const fileListLocales = {
 		forgetPassword: "忘记",
 		unlockFolder: "输入 {name} 的密码",
 		networkHint: "可能被跨域拦截：请检查 OpenList 的 cors.allow_origins，或 OpenList-Worker 的 ALLOW_URLS。",
+		deepHint: "只筛选了已加载的内容",
+		deepSearch: "深度搜索",
+		deepRunning: "正在深度搜索 · 已查找 {count} 个文件夹",
+		deepStop: "停止",
+		deepDone: "已搜索全部 {count} 个文件夹",
+		deepCapped: "已查找 {count} 个文件夹，还有未搜索的子目录",
+		deepContinue: "继续",
+		deepSkipped: "跳过 {count} 个加密文件夹",
+		deepFailed: "{count} 个文件夹读取失败",
+		viewMode: "显示方式",
+		viewSource: "源码",
+		viewRendered: "渲染",
+		htmlSandboxNote: "已禁用脚本；网页引用的相对路径资源不会加载",
+		imageOmitted: "［图片：{alt}］",
 		batchFailedTitle: "打包失败",
 		batchFailedHint: "可以减少勾选的文件后重试。",
 		downloadStarted: "已交给浏览器下载：{name}",
@@ -932,6 +963,20 @@ const fileListLocales = {
 		forgetPassword: "Forget",
 		unlockFolder: "Enter the password for {name}",
 		networkHint: "Possibly blocked by CORS: check cors.allow_origins in OpenList, or ALLOW_URLS in OpenList-Worker.",
+		deepHint: "Only loaded folders are filtered",
+		deepSearch: "Deep search",
+		deepRunning: "Searching · {count} folders checked",
+		deepStop: "Stop",
+		deepDone: "Searched all {count} folders",
+		deepCapped: "{count} folders checked; some sub-folders remain",
+		deepContinue: "Continue",
+		deepSkipped: "{count} locked folders skipped",
+		deepFailed: "{count} folders could not be read",
+		viewMode: "View",
+		viewSource: "Source",
+		viewRendered: "Rendered",
+		htmlSandboxNote: "Scripts are disabled; resources at relative paths do not load",
+		imageOmitted: "[Image: {alt}]",
 		batchFailedTitle: "Could not create the ZIP",
 		batchFailedHint: "Try again with fewer files selected.",
 		downloadStarted: "Downloading {name} in your browser",
@@ -960,6 +1005,45 @@ function resolveLabels(locale = "zh-CN", overrides) {
 		...overrides
 	};
 }
+// src/client/markdown.ts
+/**
+* Markdown → safe HTML for the preview dialog. Loaded on demand, so pages that
+* never render Markdown do not download markdown-it or DOMPurify.
+*
+* - Raw HTML in the file is allowed, then sanitised (no scripts, handlers, iframes...)
+* - Only absolute http(s) / mailto links stay clickable, opening in a new tab;
+*   relative links (to other files in the share) become plain text
+* - Images with a relative source are replaced by their alt text, because the
+*   share's relative paths do not resolve on the documentation site
+*/
+async function renderMarkdown(source, imageLabel) {
+	const [{ default: MarkdownIt }, { default: DOMPurify }] = await Promise.all([import("markdown-it"), import("dompurify")]);
+	const probe = DOMPurify.isSupported ? DOMPurify.sanitize("<img src=\"x\" onerror=\"1\"><script>1<\/script>") : "<script";
+	if (/<script|onerror/i.test(probe)) throw new Error("HTML sanitiser unavailable");
+	const html = new MarkdownIt({
+		html: true,
+		linkify: true
+	}).render(source);
+	const template = document.createElement("template");
+	template.innerHTML = DOMPurify.sanitize(html);
+	const fragment = template.content;
+	for (const link of fragment.querySelectorAll("a")) {
+		const href = link.getAttribute("href") ?? "";
+		if (/^(https?:|mailto:)/i.test(href)) {
+			link.setAttribute("target", "_blank");
+			link.setAttribute("rel", "noopener noreferrer");
+		} else link.replaceWith(...link.childNodes);
+	}
+	for (const image of fragment.querySelectorAll("img")) {
+		const src = image.getAttribute("src") ?? "";
+		if (/^(https?:|data:image\/)/i.test(src)) continue;
+		const placeholder = document.createElement("span");
+		placeholder.className = "fl-md-image";
+		placeholder.textContent = imageLabel(image.getAttribute("alt") || src.split("/").pop() || "");
+		image.replaceWith(placeholder);
+	}
+	return template.innerHTML;
+}
 // src/client/PreviewDialog.vue
 const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "PreviewDialog",
@@ -994,7 +1078,9 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		/**
 		* File preview in a native <dialog>, without leaving the page.
 		*
-		* image / video / audio: native elements; text: the first `maxTextBytes`
+		* image / video / audio: native elements; text: the first `maxTextBytes`,
+		* with Markdown and HTML switchable between source (default) and rendered
+		* (Markdown sanitised in VitePress' doc style, HTML in a script-less sandbox);
 		* through a Range request; pdf: the first matching OpenList `iframe_previews`
 		* viewer, else the browser's reader through a Blob. Anything else (Office
 		* included), failures, oversized PDFs and demo mode: file info + download.
@@ -1012,8 +1098,18 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 		const blobUrl = ref("");
 		const rotation = ref(0);
 		const actualSize = ref(false);
+		/** Markdown / HTML: show the source or render it. Kept while the page is open. */
+		const view = ref("source");
+		const renderedHtml = ref("");
 		let controller;
 		let loadSeq = 0;
+		/** Text files that can also be rendered. */
+		const renderAs = computed(() => {
+			const name = props.file?.name ?? "";
+			if (/\.(md|markdown)$/i.test(name)) return "markdown";
+			if (/\.html?$/i.test(name)) return "html";
+			return null;
+		});
 		const tooLarge = computed(() => kind.value === "pdf" && !props.viewer && (props.file?.size ?? 0) > props.maxPdfBytes);
 		const mode = computed(() => {
 			if (props.demo) return "demo";
@@ -1023,6 +1119,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			return kind.value;
 		});
 		const busy = computed(() => !props.demo && kind.value !== "none" && !props.error && !bodyFailed.value && (props.resolving || loadingBody.value || !props.src && !tooLarge.value));
+		const canRender = computed(() => !!renderAs.value && mode.value === "text" && !busy.value);
 		const infoMessage = computed(() => {
 			const file = props.file;
 			if (!file) return "";
@@ -1043,6 +1140,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			loadingBody.value = false;
 			bodyFailed.value = false;
 			textContent.value = "";
+			renderedHtml.value = "";
 			truncated.value = false;
 			rotation.value = 0;
 			actualSize.value = false;
@@ -1124,6 +1222,20 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			props.error,
 			props.demo
 		], () => void loadBody(), { immediate: true });
+		watch(() => [
+			view.value,
+			renderAs.value,
+			textContent.value
+		], async ([current, as, text]) => {
+			if (current !== "rendered" || as !== "markdown" || !text) return;
+			const seq = loadSeq;
+			try {
+				const html = await renderMarkdown(text, (alt) => t("imageOmitted", { alt }));
+				if (seq === loadSeq) renderedHtml.value = html;
+			} catch {
+				if (seq === loadSeq) view.value = "source";
+			}
+		});
 		watch(() => props.open, (open) => {
 			const el = dialog.value;
 			if (!el) return;
@@ -1145,7 +1257,7 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 			}, _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) {
+				if (__props.total > 1 || mode.value === "image" && !busy.value || canRender.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"))}>`);
@@ -1173,6 +1285,13 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 						}, null, _parent));
 						_push(`</button><!--]-->`);
 					} else _push(`<!---->`);
+					if (canRender.value) {
+						_push(`<span class="fl-preview-view" role="group"${ssrRenderAttr("aria-label", t("viewMode"))}><!--[-->`);
+						ssrRenderList(["source", "rendered"], (option) => {
+							_push(`<button class="fl-preview-view-btn" type="button"${ssrRenderAttr("aria-pressed", view.value === option)}>${ssrInterpolate(t(option === "source" ? "viewSource" : "viewRendered"))}</button>`);
+						});
+						_push(`<!--]--></span>`);
+					} else _push(`<!---->`);
 					_push(`</div>`);
 				} else _push(`<!---->`);
 				_push(`<div class="fl-preview-tools fl-preview-actions">`);
@@ -1195,10 +1314,17 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				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">`);
+					_push(`<div class="${ssrRenderClass([{ "fl-preview-rendered": renderAs.value && view.value === "rendered" }, "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>`);
+					if (renderAs.value === "markdown" && view.value === "rendered") {
+						_push(`<!--[--><!-- sanitised by renderMarkdown (DOMPurify) -->`);
+						if (renderedHtml.value) _push(`<div class="vp-doc fl-md">${renderedHtml.value ?? ""}</div>`);
+						else _push(`<div class="fl-preview-status" role="status">${ssrInterpolate(t("loading"))}</div>`);
+						_push(`<!--]-->`);
+					} else if (renderAs.value === "html" && view.value === "rendered") _push(`<!--[--><p class="fl-preview-note">${ssrInterpolate(t("htmlSandboxNote"))}</p><!-- empty sandbox: no scripts, no forms, no popups, an opaque origin --><iframe class="fl-preview-html" sandbox="" referrerpolicy="no-referrer"${ssrRenderAttr("srcdoc", textContent.value)}${ssrRenderAttr("title", __props.file.name)}></iframe><!--]-->`);
+					else _push(`<pre>${ssrInterpolate(textContent.value)}</pre>`);
+					_push(`</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>`);
@@ -1247,9 +1373,9 @@ function toNodes(items, parent, password) {
 		zipPath: [...parent.zipPath, item.name]
 	}));
 }
-function sortTree(nodes, key, ascending) {
-	nodes.sort((a, b) => compareNodes(a, b, key, ascending));
-	for (const node of nodes) if (node.children.length) sortTree(node.children, key, ascending);
+function sortTree(nodes, key, ascending, locale) {
+	nodes.sort((a, b) => compareNodes(a, b, key, ascending, locale));
+	for (const node of nodes) if (node.children.length) sortTree(node.children, key, ascending, locale);
 }
 /** Loaded files at or under a node. */
 function descendantFiles(node) {
@@ -1436,6 +1562,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			default: true
 		},
 		pageSize: { default: 200 },
+		deepSearchLimit: { default: 500 },
 		zipWarnSize: {},
 		zipMaxSize: {},
 		locale: { default: "zh-CN" },
@@ -1500,7 +1627,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return isNetworkError(error) ? `${message} ${t("corsHint")}` : message;
 		}
 		function sortNodes(nodes) {
-			sortTree(nodes, sortKey.value, sortAsc.value);
+			sortTree(nodes, sortKey.value, sortAsc.value, props.locale);
 		}
 		function focusUnlock(path) {
 			nextTick(() => {
@@ -1532,7 +1659,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		* Load a folder's children. A password error locks the folder instead of
 		* toasting; `prompt` also shows its same-row input (and focuses it).
 		*/
-		async function loadChildren(node, prompt = false) {
+		async function loadChildren(node, prompt = false, quiet = false) {
 			if (node.loaded) return true;
 			if (node.lock) {
 				if (prompt) startPrompt(node, prompt === "focus");
@@ -1548,7 +1675,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					node.expanded = false;
 					node.lock = newLock(false, passwords.dropStale(rememberedAt) ? "stale" : "");
 					if (prompt) startPrompt(node, prompt === "focus");
-				} else showToast(failureMessage("folderFailed", error));
+				} else if (!quiet) showToast(failureMessage("folderFailed", error));
 				return false;
 			} finally {
 				node.loading = false;
@@ -1635,6 +1762,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		/** First load, or a retry after an error: shows the loading state. */
 		async function loadRoot() {
+			stopDeepSearch();
 			refreshSeq += 1;
 			refreshing.value = false;
 			loadingRoot.value = true;
@@ -1711,6 +1839,88 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return out;
 		});
 		const visible = computed(() => rows.value.filter((row) => !isMore(row)));
+		/** A name split around the filter keyword, for highlighting. */
+		function nameParts(name) {
+			const query = keyword.value.trim().toLowerCase();
+			if (!query) return [{
+				text: name,
+				hit: false
+			}];
+			const parts = [];
+			const lower = name.toLowerCase();
+			let from = 0;
+			for (let at = lower.indexOf(query); at !== -1; at = lower.indexOf(query, from)) {
+				if (at > from) parts.push({
+					text: name.slice(from, at),
+					hit: false
+				});
+				parts.push({
+					text: name.slice(at, at + query.length),
+					hit: true
+				});
+				from = at + query.length;
+			}
+			if (from < name.length) parts.push({
+				text: name.slice(from),
+				hit: false
+			});
+			return parts;
+		}
+		/**
+		* The filter only sees loaded folders. Deep search loads the rest under the
+		* mounted paths (four at a time, `deepSearchLimit` per run) so matches appear
+		* in place, in their folders, like any other row. Locked folders are skipped.
+		*/
+		const deep = reactive({
+			running: false,
+			searched: 0,
+			skipped: 0,
+			failed: 0,
+			capped: false,
+			done: false
+		});
+		let deepSeq = 0;
+		/** Folders that are known but not loaded yet (locked ones excluded). */
+		function unloadedFolders() {
+			const out = [];
+			const walk = (nodes) => {
+				for (const node of nodes) {
+					if (!node.is_dir || node.lock) continue;
+					if (!node.loaded) out.push(node);
+					else walk(node.children);
+				}
+			};
+			walk(roots.value);
+			return out;
+		}
+		const hasUnloaded = computed(() => unloadedFolders().length > 0);
+		const deepRow = computed(() => {
+			if (!keyword.value.trim()) return null;
+			if (deep.running) return "running";
+			if (deep.capped) return "capped";
+			if (hasUnloaded.value) return "idle";
+			return deep.done ? "done" : null;
+		});
+		function stopDeepSearch() {
+			deepSeq += 1;
+			deep.running = false;
+		}
+		watch(keyword, (value) => {
+			if (value.trim()) return;
+			stopDeepSearch();
+			Object.assign(deep, {
+				searched: 0,
+				skipped: 0,
+				failed: 0,
+				capped: false,
+				done: false
+			});
+		});
+		const deepSummary = computed(() => [
+			deepRow.value === "capped" ? t("deepCapped", { count: deep.searched }) : t("deepDone", { count: deep.searched }),
+			deep.skipped ? t("deepSkipped", { count: deep.skipped }) : "",
+			deep.failed ? t("deepFailed", { count: deep.failed }) : ""
+		].filter(Boolean).join(" · "));
 		const stats = computed(() => folderStats(roots.value, selected.value));
 		const noStats = {
 			files: 0,
@@ -2031,7 +2241,14 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					} else _push(`<span class="fl-arrow-placeholder" aria-hidden="true"></span>`);
 					if (node.is_dir) _push(`<svg class="fl-folder-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><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"></path></svg>`);
 					else _push(`<span class="fl-type"${ssrRenderAttr("data-kind", unref(fileKind)(node.name))} aria-hidden="true">${ssrInterpolate(unref(extOf)(node.name) || "FILE")}</span>`);
-					_push(`<span class="fl-label"><span class="${ssrRenderClass([{ "fl-name-dir": node.is_dir }, "fl-name"])}">${ssrInterpolate(node.name)}</span><span class="fl-meta">`);
+					_push(`<span class="fl-label"><span class="${ssrRenderClass([{ "fl-name-dir": node.is_dir }, "fl-name"])}"><!--[-->`);
+					ssrRenderList(nameParts(node.name), (part, at) => {
+						_push(`<!--[-->`);
+						if (part.hit) _push(`<mark class="fl-hit">${ssrInterpolate(part.text)}</mark>`);
+						else _push(`<!--[-->${ssrInterpolate(part.text)}<!--]-->`);
+						_push(`<!--]-->`);
+					});
+					_push(`<!--]--></span><span class="fl-meta">`);
 					if (!node.is_dir) _push(`<!--[-->${ssrInterpolate(unref(formatSize)(node.size))} · ${ssrInterpolate(unref(formatDate)(node.modified))}<!--]-->`);
 					else if (node.loaded) _push(`<!--[-->${ssrInterpolate(t("folderItems", { count: statsOf(node).files }))} · ${ssrInterpolate(unref(formatSize)(statsOf(node).bytes))}<!--]-->`);
 					else _push(`<!---->`);
@@ -2103,7 +2320,20 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				}
 				_push(`<!--]-->`);
 			});
-			_push(`<!--]--><div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("totalSize", { size: unref(formatSize)(unref(totalSize)(allFiles.value)) }))}</span></div>`);
+			_push(`<!--]-->`);
+			if (deepRow.value) {
+				_push(`<div class="fl-row fl-deep" role="status"><span class="fl-cell fl-cell-check"></span><span class="fl-cell fl-more-cell"><span class="fl-indent" aria-hidden="true"></span>`);
+				if (deepRow.value === "running") _push(`<!--[--><span class="fl-more-count">${ssrInterpolate(t("deepRunning", { count: deep.searched }))}</span><button class="fl-more-btn fl-more-all" type="button">${ssrInterpolate(t("deepStop"))}</button><span class="fl-deep-bar" aria-hidden="true"></span><!--]-->`);
+				else if (deepRow.value === "idle") _push(`<!--[--><span class="fl-more-count">${ssrInterpolate(deep.searched ? deepSummary.value : t("deepHint"))}</span><button class="fl-more-btn" type="button">${ssrInterpolate(t("deepSearch"))}</button><!--]-->`);
+				else {
+					_push(`<!--[--><span class="fl-more-count">${ssrInterpolate(deepSummary.value)}</span>`);
+					if (deepRow.value === "capped") _push(`<button class="fl-more-btn" type="button">${ssrInterpolate(t("deepContinue"))}</button>`);
+					else _push(`<!---->`);
+					_push(`<!--]-->`);
+				}
+				_push(`</span></div>`);
+			} else _push(`<!---->`);
+			_push(`<div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("totalSize", { size: unref(formatSize)(unref(totalSize)(allFiles.value)) }))}</span></div>`);
 			if (toast.value) _push(`<div class="fl-toast" role="status">${ssrInterpolate(toast.value)}</div>`);
 			else _push(`<!---->`);
 			_push(ssrRenderComponent(_sfc_main$3, {

package/dist/client/style.css

@@ -824,7 +824,8 @@
 
 /* ---------------- long folders ---------------- */
 
-.fl-more {
+.fl-more,
+.fl-deep {
   background: var(--vp-c-bg-soft);
 }
 
@@ -868,6 +869,37 @@
   border-color: transparent;
 }
 
+/* ---------------- filter and deep search ---------------- */
+
+.fl-hit {
+  padding: 0 1px;
+  color: inherit;
+  background: var(--fl-hit-bg, rgb(250 204 21 / 32%));
+  border-radius: 3px;
+}
+
+.fl-deep {
+  position: relative;
+}
+
+.fl-deep-bar {
+  position: absolute;
+  bottom: -1px;
+  left: 0;
+  width: 30%;
+  height: 2px;
+  background: var(--vp-c-brand-1);
+  animation: fl-progress 1.2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fl-deep-bar {
+    width: 100%;
+    animation: none;
+    opacity: 0.6;
+  }
+}
+
 /* ---------------- confirm dialog ---------------- */
 
 .fl-confirm {
@@ -1316,6 +1348,62 @@
   background: var(--vp-c-default-soft);
 }
 
+/* Markdown / HTML: source or rendered */
+.fl-preview-view {
+  display: inline-flex;
+  padding: 2px;
+  margin-left: 6px;
+  background: var(--vp-c-default-soft);
+  border-radius: 8px;
+}
+
+.fl-preview-view-btn {
+  height: 28px;
+  padding: 0 10px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+}
+
+.fl-preview-view-btn[aria-pressed='true'] {
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+  background: var(--vp-c-bg);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
+}
+
+.fl-preview-rendered {
+  display: flex;
+  flex-direction: column;
+}
+
+.fl-preview .fl-md {
+  box-sizing: border-box;
+  max-width: 860px;
+  padding: 16px 24px 32px;
+  margin: 0 auto;
+}
+
+.fl-md-image {
+  display: inline-block;
+  padding: 2px 8px;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  border: 1px dashed var(--vp-c-divider);
+  border-radius: 6px;
+}
+
+.fl-preview-html {
+  flex: 1 1 auto;
+  width: 100%;
+  min-height: 0;
+  background: #fff;
+  border: 0;
+}
+
 .fl-preview-count {
   min-width: 44px;
   font-size: 12px;
@@ -1487,6 +1575,12 @@
     min-width: 36px;
   }
 
+  .fl-preview-view-btn {
+    height: 36px;
+    padding: 0 14px;
+    font-size: 14px;
+  }
+
   .fl-preview .fl-preview-head .fl-type {
     display: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-filelist",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "packageManager": "pnpm@11.25.0",
   "type": "module",
   "description": "OpenList file browser for VitePress: tree view, batch ZIP download, i18n, password and token support.",
@@ -42,7 +42,9 @@
     "typecheck": "vue-tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "pack:check": "npm pack --dry-run"
+    "pack:check": "npm pack --dry-run",
+    "test:e2e": "playwright test",
+    "e2e:site": "pnpm run build && pnpm --dir demo install --force && pnpm --dir demo run build:e2e"
   },
   "peerDependencies": {
     "vitepress": "^1.0.0 || ^2.0.0-alpha.0",
@@ -50,9 +52,13 @@
   },
   "dependencies": {
     "client-zip": "^2.5.1",
+    "dompurify": "^3.4.17",
+    "markdown-it": "^14.3.3",
     "vitepress-tuck": "^0.12.2"
   },
   "devDependencies": {
+    "@playwright/test": "1.63.0",
+    "@types/markdown-it": "^14.2.0",
     "@types/node": "^22.10.0",
     "@vue/test-utils": "^2.5.1",
     "happy-dom": "^21.0.4",