vitepress-plugin-filelist 0.7.0 → 0.7.2

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

@@ -102,6 +102,10 @@ interface FileListLabels {
   deepContinue: string;
   deepSkipped: string;
   deepFailed: string;
+  /** Beside a locked folder shown in deep search results. */
+  deepLocked: string;
+  /** The × in the filter box. */
+  clearFilter: string;
   /** Markdown / HTML preview: the source / rendered switch. */
   viewMode: string;
   viewSource: string;
@@ -179,6 +183,11 @@ interface FileListProps {
    * Defaults to `500`.
    */
   deepSearchLimit?: number;
+  /**
+   * `manual` (default): “Try deep search” starts deep search mode.
+   * `auto`: typing a keyword starts it at once (for small mounts).
+   */
+  deepSearch?: 'manual' | 'auto';
   /**
    * 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.
@@ -216,6 +225,7 @@ declare const _default: import("vue").DefineComponent<FileListProps, {}, {}, {},
   rememberPassword: boolean;
   pageSize: number;
   deepSearchLimit: number;
+  deepSearch: "manual" | "auto";
   locale: FileListLocale;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare global {

package/dist/client/ssr/index.js

@@ -575,8 +575,8 @@ const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 				"aria-label": __props.title
 			}, _attrs))}>`);
 			if (__props.open) {
-				_push(`<div class="fl-confirm-panel"><p class="fl-confirm-title">${ssrInterpolate(__props.title)}</p><p class="fl-confirm-text">${ssrInterpolate(__props.text)}</p>`);
-				if (__props.tip) _push(`<p class="fl-confirm-text">${ssrInterpolate(__props.tip)}</p>`);
+				_push(`<div class="fl-confirm-panel"><div class="fl-confirm-title">${ssrInterpolate(__props.title)}</div><div class="fl-confirm-text">${ssrInterpolate(__props.text)}</div>`);
+				if (__props.tip) _push(`<div class="fl-confirm-text">${ssrInterpolate(__props.tip)}</div>`);
 				else _push(`<!---->`);
 				_push(`<div class="fl-confirm-actions">`);
 				if (__props.confirmLabel) _push(`<button class="fl-btn" type="button">${ssrInterpolate(__props.cancelLabel)}</button>`);
@@ -869,8 +869,8 @@ const fileListLocales = {
 		forgetPassword: "忘记",
 		unlockFolder: "输入 {name} 的密码",
 		networkHint: "可能被跨域拦截：请检查 OpenList 的 cors.allow_origins，或 OpenList-Worker 的 ALLOW_URLS。",
-		deepHint: "只筛选了已加载的内容",
-		deepSearch: "深度搜索",
+		deepHint: "只筛选了已加载的内容，",
+		deepSearch: "尝试深度搜索",
 		deepRunning: "正在深度搜索 · 已查找 {count} 个文件夹",
 		deepStop: "停止",
 		deepDone: "已搜索全部 {count} 个文件夹",
@@ -878,6 +878,8 @@ const fileListLocales = {
 		deepContinue: "继续",
 		deepSkipped: "跳过 {count} 个加密文件夹",
 		deepFailed: "{count} 个文件夹读取失败",
+		deepLocked: "未搜索（需要密码）",
+		clearFilter: "清除筛选",
 		viewMode: "显示方式",
 		viewSource: "源码",
 		viewRendered: "渲染",
@@ -963,8 +965,8 @@ 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",
+		deepHint: "Only loaded folders are filtered. ",
+		deepSearch: "Try deep search",
 		deepRunning: "Searching · {count} folders checked",
 		deepStop: "Stop",
 		deepDone: "Searched all {count} folders",
@@ -972,6 +974,8 @@ const fileListLocales = {
 		deepContinue: "Continue",
 		deepSkipped: "{count} locked folders skipped",
 		deepFailed: "{count} folders could not be read",
+		deepLocked: "Not searched (password needed)",
+		clearFilter: "Clear filter",
 		viewMode: "View",
 		viewSource: "Source",
 		viewRendered: "Rendered",
@@ -1315,19 +1319,19 @@ const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 				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="${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>`);
+					if (truncated.value) _push(`<div class="fl-preview-note">${ssrInterpolate(t("textTruncated", { size: unref(formatSize)(__props.maxTextBytes) }))}</div>`);
 					else _push(`<!---->`);
 					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 if (renderAs.value === "html" && view.value === "rendered") _push(`<!--[--><div class="fl-preview-note">${ssrInterpolate(t("htmlSandboxNote"))}</div><!-- 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>`);
+					_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><div class="fl-preview-message">${ssrInterpolate(infoMessage.value)}</div>`);
 					if (!__props.demo) {
 						_push(`<button class="fl-btn fl-btn-primary" type="button">`);
 						_push(ssrRenderComponent(_sfc_main$2, {
@@ -1563,6 +1567,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		},
 		pageSize: { default: 200 },
 		deepSearchLimit: { default: 500 },
+		deepSearch: { default: "manual" },
 		zipWarnSize: {},
 		zipMaxSize: {},
 		locale: { default: "zh-CN" },
@@ -1722,6 +1727,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				zipPath: [item.is_dir ? name : item.name || sourceName(path)]
 			};
 		}
+		/** Run at most `size` tasks at once. */
+		function concurrency(size) {
+			let active = 0;
+			const waiting = [];
+			return async (task) => {
+				if (active >= size) await new Promise((resolve) => waiting.push(resolve));
+				active += 1;
+				try {
+					return await task();
+				} finally {
+					active -= 1;
+					waiting.shift()?.();
+				}
+			};
+		}
 		class RootLockedError extends Error {
 			rememberedAt;
 			constructor(rememberedAt) {
@@ -1733,7 +1753,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		* Build a fresh tree. `expandedPaths` re-opens those folders (refresh keeps
 		* what was open); without it the configured `expanded` defaults apply.
 		*/
-		async function buildTree(expandedPaths) {
+		async function buildTree(expandedPaths, loadedPaths) {
 			let nodes;
 			if (props.sources.length) nodes = await Promise.all(props.sources.map((source) => loadSourceRoot(source, expandedPaths ? expandedPaths.has(source.path) : source.expanded ?? props.expanded)));
 			else {
@@ -1744,13 +1764,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					throw isPasswordError(error) ? new RootLockedError(rememberedAt) : error;
 				}
 			}
+			const limit = concurrency(4);
 			const open = async (list) => {
-				for (const node of list) {
-					const wanted = node.expanded || expandedPaths?.has(node.path);
-					if (!node.is_dir || node.lock || !wanted) continue;
-					node.expanded = await loadChildren(node, "show");
-					if (node.expanded && expandedPaths) await open(node.children);
-				}
+				await Promise.all(list.map(async (node) => {
+					const wanted = !!(node.expanded || expandedPaths?.has(node.path));
+					const keep = !!loadedPaths?.has(node.path);
+					if (!node.is_dir || node.lock || !(wanted || keep)) return;
+					const ok = await limit(() => loadChildren(node, wanted ? "show" : false, !wanted));
+					node.expanded = wanted && ok;
+					if (ok && (expandedPaths || loadedPaths)) await open(node.children);
+				}));
 			};
 			await open(nodes);
 			return nodes;
@@ -1820,7 +1843,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const rows = computed(() => {
 			const out = [];
 			const query = keyword.value.trim().toLowerCase();
-			const matches = (node) => !query || node.name.toLowerCase().includes(query) || node.is_dir && node.children.some(matches);
+			const matches = (node) => !query || node.name.toLowerCase().includes(query) || node.is_dir && (node.children.some(matches) || deepMode.value && !!node.lock);
 			const walk = (nodes, key, depth) => {
 				const list = nodes.filter(matches);
 				const limit = query ? list.length : Math.min(list.length, limitOf(key));
@@ -1874,11 +1897,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const deep = reactive({
 			running: false,
 			searched: 0,
-			skipped: 0,
 			failed: 0,
 			capped: false,
 			done: false
 		});
+		/**
+		* Deep search mode: entered by “Try deep search” (or at once with
+		* `deep-search="auto"`), left by clearing the filter. While on, new keywords,
+		* refreshes and newly unlocked folders are searched without asking again.
+		*/
+		const deepMode = ref(false);
 		let deepSeq = 0;
 		/** Folders that are known but not loaded yet (locked ones excluded). */
 		function unloadedFolders() {
@@ -1898,27 +1926,97 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!keyword.value.trim()) return null;
 			if (deep.running) return "running";
 			if (deep.capped) return "capped";
-			if (hasUnloaded.value) return "idle";
+			if (!deepMode.value) return hasUnloaded.value ? "idle" : null;
 			return deep.done ? "done" : null;
 		});
+		/** “Try deep search”, “Continue”, and the automatic runs of deep search mode. */
+		async function deepSearch() {
+			deepMode.value = true;
+			const seq = ++deepSeq;
+			const limit = Math.max(1, Math.floor(props.deepSearchLimit ?? 500));
+			const runStart = deep.searched;
+			Object.assign(deep, {
+				running: true,
+				capped: false,
+				done: false
+			});
+			let wave = unloadedFolders();
+			while (wave.length && seq === deepSeq) {
+				const next = [];
+				const queue = [...wave];
+				const worker = async () => {
+					for (let node = queue.shift(); node && seq === deepSeq; node = queue.shift()) {
+						if (deep.searched - runStart >= limit) return;
+						deep.searched += 1;
+						if (!await loadChildren(node, false, true)) {
+							if (!node.lock) deep.failed += 1;
+							continue;
+						}
+						for (const child of node.children) if (child.is_dir && !child.loaded && !child.lock) next.push(child);
+					}
+				};
+				await Promise.all(Array.from({ length: Math.min(4, queue.length) }, worker));
+				if (deep.searched - runStart >= limit) break;
+				wave = next;
+			}
+			if (seq !== deepSeq) return;
+			deep.running = false;
+			deep.capped = hasUnloaded.value && deep.searched - runStart >= limit;
+			deep.done = !deep.capped;
+		}
+		/** Pause a run (internal: refresh, reload). */
 		function stopDeepSearch() {
 			deepSeq += 1;
 			deep.running = false;
 		}
 		watch(keyword, (value) => {
-			if (value.trim()) return;
+			if (value.trim()) {
+				if (props.deepSearch === "auto") deepMode.value = true;
+				return;
+			}
 			stopDeepSearch();
+			deepMode.value = false;
 			Object.assign(deep, {
 				searched: 0,
-				skipped: 0,
 				failed: 0,
 				capped: false,
 				done: false
 			});
 		});
+		watch(() => deepMode.value && hasUnloaded.value && !deep.running && !deep.capped && !refreshing.value, (ready) => {
+			if (ready) deepSearch();
+		});
+		/**
+		* Counted from the tree, so a refresh that re-reads the same folders shows the
+		* same numbers: folders read (or found locked), and the locked ones.
+		*/
+		const folderCounts = computed(() => {
+			const counts = {
+				checked: 0,
+				locked: 0
+			};
+			const walk = (nodes) => {
+				for (const node of nodes) {
+					if (!node.is_dir) continue;
+					if (node.lock) {
+						counts.checked += 1;
+						counts.locked += 1;
+					} else if (node.loaded) {
+						counts.checked += 1;
+						walk(node.children);
+					}
+				}
+			};
+			walk(roots.value);
+			return counts;
+		});
+		const lockedFolders = computed(() => folderCounts.value.locked);
+		function lockedInSearch(node) {
+			return deepMode.value && !!node.lock && !!keyword.value.trim();
+		}
 		const deepSummary = computed(() => [
-			deepRow.value === "capped" ? t("deepCapped", { count: deep.searched }) : t("deepDone", { count: deep.searched }),
-			deep.skipped ? t("deepSkipped", { count: deep.skipped }) : "",
+			t(deepRow.value === "capped" ? "deepCapped" : "deepDone", { count: folderCounts.value.checked }),
+			lockedFolders.value ? t("deepSkipped", { count: lockedFolders.value }) : "",
 			deep.failed ? t("deepFailed", { count: deep.failed }) : ""
 		].filter(Boolean).join(" · "));
 		const stats = computed(() => folderStats(roots.value, selected.value));
@@ -2150,7 +2248,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				name: "search",
 				size: 15
 			}, null, _parent));
-			_push(`<input${ssrRenderAttr("value", keyword.value)} type="text"${ssrRenderAttr("placeholder", t("filter"))}${ssrRenderAttr("aria-label", t("filter"))}></label><button class="${ssrRenderClass([{ "fl-spinning": refreshing.value }, "fl-icon-btn fl-refresh"])}" type="button"${ssrIncludeBooleanAttr(refreshing.value || loadingRoot.value) ? " disabled" : ""}${ssrRenderAttr("aria-label", refreshing.value ? t("refreshing") : t("refresh"))}${ssrRenderAttr("title", refreshing.value ? t("refreshing") : t("refresh"))}>`);
+			_push(`<input${ssrRenderAttr("value", keyword.value)} type="text"${ssrRenderAttr("placeholder", t("filter"))}${ssrRenderAttr("aria-label", t("filter"))}>`);
+			if (keyword.value) {
+				_push(`<button class="fl-search-clear" type="button"${ssrRenderAttr("aria-label", t("clearFilter"))}${ssrRenderAttr("title", t("clearFilter"))}>`);
+				_push(ssrRenderComponent(_sfc_main$2, {
+					name: "close",
+					size: 12
+				}, null, _parent));
+				_push(`</button>`);
+			} else _push(`<!---->`);
+			_push(`</label><button class="${ssrRenderClass([{ "fl-spinning": refreshing.value }, "fl-icon-btn fl-refresh"])}" type="button"${ssrIncludeBooleanAttr(refreshing.value || loadingRoot.value) ? " disabled" : ""}${ssrRenderAttr("aria-label", refreshing.value ? t("refreshing") : t("refresh"))}${ssrRenderAttr("title", refreshing.value ? t("refreshing") : t("refresh"))}>`);
 			_push(ssrRenderComponent(_sfc_main$2, {
 				name: "refresh",
 				size: 15
@@ -2200,9 +2307,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				_push(`<button class="fl-unlock-submit" type="submit"${ssrIncludeBooleanAttr(rootLock.value.busy || !rootLock.value.input) ? " disabled" : ""}>${ssrInterpolate(t("open"))}</button></span></form>`);
 			} else if (errorMsg.value) {
 				_push(`<div class="fl-status fl-error">${ssrInterpolate(t("loadFailed", { message: errorMsg.value }))} `);
-				if (/guest/i.test(errorMsg.value)) _push(`<p class="fl-hint">${ssrInterpolate(t("guestHint"))}</p>`);
+				if (/guest/i.test(errorMsg.value)) _push(`<div class="fl-hint">${ssrInterpolate(t("guestHint"))}</div>`);
 				else _push(`<!---->`);
-				if (unref(isNetworkError)(errorMsg.value)) _push(`<p class="fl-hint">${ssrInterpolate(t("corsHint"))}</p>`);
+				if (unref(isNetworkError)(errorMsg.value)) _push(`<div class="fl-hint">${ssrInterpolate(t("corsHint"))}</div>`);
 				else _push(`<!---->`);
 				_push(`<button class="fl-btn" type="button">${ssrInterpolate(t("retry"))}</button></div>`);
 			} else if (visible.value.length === 0) _push(`<div class="fl-status">${ssrInterpolate(t("empty"))}</div>`);
@@ -2251,8 +2358,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					_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 if (lockedInSearch(node)) _push(`<span class="fl-locked-note">${ssrInterpolate(t("deepLocked"))}</span>`);
 					else _push(`<!---->`);
 					_push(`</span></span>`);
+					if (lockedInSearch(node) && !node.lock?.prompting) _push(`<span class="fl-locked-note fl-locked-hint">${ssrInterpolate(t("deepLocked"))}</span>`);
+					else _push(`<!---->`);
 					if (node.is_dir && node.loaded) _push(`<span class="fl-count">${ssrInterpolate(t("folderItems", { count: statsOf(node).files }))}</span>`);
 					else _push(`<!---->`);
 					if (node.lock?.prompting && node.lock.error) _push(`<span${ssrRenderAttr("id", `${unref(uid)}-error-${index}`)} class="fl-unlock-message" role="alert">${ssrInterpolate(unlockErrorText(node.lock.error))}</span>`);
@@ -2322,16 +2432,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			});
 			_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>`);
+				_push(`<div class="fl-deep" role="status"><div class="fl-deep-text">`);
+				if (deepRow.value === "running") _push(`<!--[-->${ssrInterpolate(t("deepRunning", { count: folderCounts.value.checked }))} · <button class="fl-deep-link" type="button">${ssrInterpolate(t("deepStop"))}</button><!--]-->`);
+				else if (deepRow.value === "idle") _push(`<!--[-->${ssrInterpolate(t("deepHint"))}<button class="fl-deep-link" type="button">${ssrInterpolate(t("deepSearch"))}</button><!--]-->`);
+				else if (deepRow.value === "capped") _push(`<!--[-->${ssrInterpolate(deepSummary.value)} · <button class="fl-deep-link" type="button">${ssrInterpolate(t("deepContinue"))}</button><!--]-->`);
+				else _push(`<!--[-->${ssrInterpolate(deepSummary.value)}<!--]-->`);
+				_push(`</div>`);
+				if (deepRow.value === "running") _push(`<span class="fl-deep-bar" aria-hidden="true"></span>`);
+				else _push(`<!---->`);
+				_push(`</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>`);

package/dist/client/style.css

@@ -771,6 +771,7 @@
 .fl-hint {
   margin: 6px 0 0;
   font-size: 12px;
+  line-height: 1.5;
   color: var(--vp-c-text-2);
 }
 
@@ -824,8 +825,7 @@
 
 /* ---------------- long folders ---------------- */
 
-.fl-more,
-.fl-deep {
+.fl-more {
   background: var(--vp-c-bg-soft);
 }
 
@@ -878,8 +878,69 @@
   border-radius: 3px;
 }
 
+.fl-search-clear {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  color: var(--vp-c-text-2);
+  cursor: pointer;
+  background: var(--vp-c-default-soft);
+  border: 0;
+  border-radius: 50%;
+}
+
+.fl-search-clear:hover {
+  color: var(--vp-c-text-1);
+}
+
+/* the status line closing a filtered list: centred, wraps, never overflows */
 .fl-deep {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 40px;
+  padding: 8px 16px;
+  text-align: center;
+  background: var(--vp-c-bg-soft);
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.fl-deep-text {
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+
+.fl-deep-link {
+  padding: 0;
+  font: inherit;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+
+.fl-deep-link:hover {
+  color: var(--vp-c-brand-2);
+}
+
+.fl-locked-note {
+  font-size: 12px;
+  color: var(--fl-lock-fg);
+  white-space: nowrap;
+}
+
+.fl-locked-hint {
+  margin-left: 8px;
 }
 
 .fl-deep-bar {
@@ -925,6 +986,7 @@
 .fl-confirm-title {
   margin: 0 0 10px;
   font-size: 16px;
+  line-height: 1.5;
   font-weight: 600;
 }
 
@@ -963,7 +1025,31 @@
     flex: 1 1 auto;
     width: auto;
     height: 40px;
-    padding: 0 12px;
+    padding: 0 4px 0 12px;
+  }
+
+  .fl-search-clear {
+    width: 36px;
+    height: 36px;
+    background: transparent;
+  }
+
+  .fl-deep {
+    min-height: 48px;
+  }
+
+  .fl-deep-text {
+    font-size: 14px;
+  }
+
+  /* a taller tap target without changing the line */
+  .fl-deep-link {
+    padding: 11px 2px;
+    margin: -11px 0;
+  }
+
+  .fl-locked-hint {
+    display: none;
   }
 
   /* 16px keeps iOS Safari from zooming in on focus */
@@ -1476,6 +1562,7 @@
   margin: 0;
   padding: 8px 20px;
   font-size: 12px;
+  line-height: 1.5;
   color: var(--vp-c-text-2);
   background: var(--vp-c-bg-soft);
   border-bottom: 1px solid var(--vp-c-divider);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress-plugin-filelist",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "packageManager": "pnpm@11.25.0",
   "type": "module",
   "description": "OpenList file browser for VitePress: tree view, batch ZIP download, i18n, password and token support.",