vitepress-plugin-filelist 0.7.2 → 0.8.0

package/dist/client/browser/index.js

@@ -353,6 +353,56 @@ function createOpenListApi(base, token) {
 		}
 	};
 }
+// src/client/demoSamples.ts
+const SAMPLE_FOLDER = "/示例文件";
+const SAMPLES = {
+	"使用说明.md": {
+		type: "text/markdown",
+		body: "# 使用说明\n\n这是 **vitepress-plugin-filelist** 演示数据自带的 Markdown 文件。\n\n## 试一试\n\n- 点右上角“渲染”，按 VitePress 正文样式显示\n- 用 ← / → 切换到同一目录里的其它文件\n- 勾选“示例文件”文件夹，点“下载 ZIP”打包\n\n| 文件 | 类型 |\n| --- | --- |\n| 讲义.pdf | PDF |\n| 课程海报.svg | 图片 |\n| 网页示例.html | 网页 |\n\n> 接入 OpenList 后，这里显示的就是网盘里的真实文件。\n\n更多说明见 [文档站](https://nrjycyd.github.io/vitepress-plugin-filelist/)。\n"
+	},
+	"网页示例.html": {
+		type: "text/html",
+		body: "<!doctype html>\n<html lang=\"zh-CN\">\n<head>\n<meta charset=\"utf-8\">\n<title>网页示例</title>\n<style>\n  body { font-family: system-ui, sans-serif; margin: 24px; line-height: 1.6; color: #1f2937; }\n  h1 { color: #3451b2; }\n  .card { padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; }\n</style>\n</head>\n<body>\n<h1>网页示例</h1>\n<p>切换到“渲染”后，这个网页在沙盒中显示：带样式，但脚本不会运行。</p>\n<div class=\"card\">下面的按钮由脚本控制，在沙盒里点了没有反应。</div>\n<p><button onclick=\"alert('脚本运行了')\">点我</button></p>\n<script>document.body.dataset.ran = 'yes'<\/script>\n</body>\n</html>\n"
+	},
+	"课程海报.svg": {
+		type: "image/svg+xml",
+		body: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"450\" viewBox=\"0 0 800 450\">\n<defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#3451b2\"/><stop offset=\"1\" stop-color=\"#5672cd\"/></linearGradient></defs>\n<rect width=\"800\" height=\"450\" fill=\"url(#g)\"/>\n<circle cx=\"660\" cy=\"90\" r=\"120\" fill=\"#ffffff\" opacity=\"0.08\"/>\n<circle cx=\"120\" cy=\"420\" r=\"160\" fill=\"#ffffff\" opacity=\"0.06\"/>\n<text x=\"64\" y=\"190\" font-family=\"system-ui, sans-serif\" font-size=\"56\" font-weight=\"700\" fill=\"#ffffff\">课程海报</text>\n<text x=\"64\" y=\"250\" font-family=\"system-ui, sans-serif\" font-size=\"26\" fill=\"#dfe5ff\">线性代数 · 2026 秋季学期</text>\n<text x=\"64\" y=\"380\" font-family=\"system-ui, sans-serif\" font-size=\"18\" fill=\"#dfe5ff\">vitepress-plugin-filelist 演示图片</text>\n</svg>\n"
+	},
+	"讲义.pdf": {
+		type: "application/pdf",
+		body: "%PDF-1.4\n1 0 obj\n<< /Type /Catalog /Pages 2 0 R >>\nendobj\n2 0 obj\n<< /Type /Pages /Kids [3 0 R] /Count 1 >>\nendobj\n3 0 obj\n<< /Type /Page /Parent 2 0 R /MediaBox [0 0 595 842] /Resources << /Font << /F1 4 0 R >> >> /Contents 5 0 R >>\nendobj\n4 0 obj\n<< /Type /Font /Subtype /Type1 /BaseFont /Helvetica >>\nendobj\n5 0 obj\n<< /Length 257 >>\nstream\nBT\n/F1 20 Tf\n72 760 Td\n(FileList sample PDF) Tj\n/F1 12 Tf\n0 -22 Td\n() Tj\n0 -22 Td\n(This small PDF ships with the demo data of) Tj\n0 -22 Td\n(vitepress-plugin-filelist, so preview, download) Tj\n0 -22 Td\n(and ZIP can be tried without an OpenList server.) Tj\nET\nendstream\nendobj\nxref\n0 6\n0000000000 65535 f \n0000000009 00000 n \n0000000058 00000 n \n0000000115 00000 n \n0000000241 00000 n \n0000000311 00000 n \ntrailer\n<< /Size 6 /Root 1 0 R >>\nstartxref\n619\n%%EOF\n"
+	},
+	"课程表.txt": {
+		type: "text/plain",
+		body: "课程表（演示文本）\n\n周一  08:00  线性代数        教 301\n周三  10:00  线性代数习题课  教 205\n周五  14:00  答疑            图书馆 2 楼\n\n纯文本文件只读取前 1 MB，按原样显示。\n"
+	}
+};
+const SAMPLE_NAMES = Object.keys(SAMPLES);
+/** Size in bytes of a sample, as UTF-8. */
+function sampleSize(name) {
+	return new TextEncoder().encode(SAMPLES[name].body).byteLength;
+}
+function nameOf(path) {
+	const name = path.slice(6);
+	return path.startsWith(`/示例文件/`) && name in SAMPLES ? name : void 0;
+}
+/** Whether a demo path is one of the sample files (which have a real URL). */
+function isSample(path) {
+	return nameOf(path) !== void 0;
+}
+const urls = /* @__PURE__ */ new Map();
+/** A blob: URL for a sample file, `''` for any other path or outside a browser. */
+function sampleUrl(path) {
+	const name = nameOf(path);
+	if (!name || typeof URL.createObjectURL !== "function") return "";
+	let url = urls.get(name);
+	if (!url) {
+		const { type, body } = SAMPLES[name];
+		url = URL.createObjectURL(new Blob([body], { type: `${type};charset=utf-8` }));
+		urls.set(name, url);
+	}
+	return url;
+}
 // src/client/demo.ts
 /** Built-in sample data, used when no `base` is given. */
 const TREE = {
@@ -392,8 +442,32 @@ const TREE = {
 			size: 0,
 			is_dir: true,
 			modified: "2026-10-20T18:00:00+08:00"
+		},
+		{
+			name: "示例文件",
+			size: 0,
+			is_dir: true,
+			modified: "2026-11-11T09:00:00+08:00"
+		},
+		{
+			name: "照片（260 张）",
+			size: 0,
+			is_dir: true,
+			modified: "2026-10-01T12:00:00+08:00"
 		}
 	],
+	[SAMPLE_FOLDER]: SAMPLE_NAMES.map((name) => ({
+		name,
+		size: sampleSize(name),
+		is_dir: false,
+		modified: "2026-11-11T09:00:00+08:00"
+	})),
+	"/照片（260 张）": Array.from({ length: 260 }, (_, index) => ({
+		name: `IMG_${String(index + 1).padStart(4, "0")}.jpg`,
+		size: 2e6 + index * 7919 % 15e5,
+		is_dir: false,
+		modified: "2026-10-01T12:00:00+08:00"
+	})),
 	"/assignments": [{
 		name: "线代作业参考答案",
 		size: 0,
@@ -514,7 +588,7 @@ function guard(path, password) {
 function parentOf(path) {
 	return path.slice(0, path.lastIndexOf("/")) || "/";
 }
-/** Demo OpenList: same API, no network; files have no URL. */
+/** Demo OpenList: same API, no network; only the sample files have a URL. */
 function createDemoApi(delay = 220) {
 	return {
 		async list(path, password) {
@@ -533,12 +607,14 @@ function createDemoApi(delay = 220) {
 			title: "",
 			iframePreviews: ""
 		}),
-		fileUrl: async () => "",
+		fileUrl: async (file) => sampleUrl(file.path),
 		directUrl: () => "",
-		isAttachmentUrl: () => false,
+		isAttachmentUrl: (url) => url.startsWith("blob:"),
 		clearCache: () => {}
 	};
 }
+/** Whether a demo file can really be previewed, downloaded and zipped. */
+const isDemoFile = isSample;
 // src/client/ConfirmDialog.vue
 const _hoisted_1$3 = ["aria-label"];
 const _hoisted_2$3 = {
@@ -801,6 +877,14 @@ const ICONS = {
 		stroke: 2.2,
 		paths: ["m15 6-6 6 6 6"]
 	},
+	down: {
+		stroke: 2.4,
+		paths: ["m6 9 6 6 6-6"]
+	},
+	up: {
+		stroke: 2.4,
+		paths: ["m18 15-6-6-6 6"]
+	},
 	zoomIn: {
 		stroke: 2,
 		paths: [
@@ -948,7 +1032,13 @@ const fileListLocales = {
 		moreRemaining: "还有 {count} 项",
 		showMore: "显示更多",
 		showAll: "全部显示",
-		showRest: "显示剩余 {count} 项"
+		showRest: "显示剩余 {count} 项",
+		showLess: "收起",
+		allShown: "已显示全部 {count} 项",
+		moreShown: "已显示 {shown} / {total} 项",
+		showAllShort: "全部",
+		showNext: "再显示 {count} 项",
+		showNextShort: "+{count}"
 	},
 	"en-US": {
 		allFiles: "All files",
@@ -1044,7 +1134,13 @@ const fileListLocales = {
 		moreRemaining: "{count} more",
 		showMore: "Show more",
 		showAll: "Show all",
-		showRest: "Show the remaining {count}"
+		showRest: "Show the remaining {count}",
+		showLess: "Show less",
+		allShown: "All {count} shown",
+		moreShown: "Showing {shown} of {total}",
+		showAllShort: "All",
+		showNext: "Show {count} more",
+		showNextShort: "+{count}"
 	}
 };
 function formatLabel(template, values = {}) {
@@ -1813,73 +1909,97 @@ const _hoisted_27 = {
 };
 const _hoisted_28 = ["aria-label"];
 const _hoisted_29 = ["value"];
-const _hoisted_30 = {
+const _hoisted_30 = { class: "fl-cell fl-cell-name" };
+const _hoisted_31 = {
+	key: 0,
+	class: "fl-indent",
+	"aria-hidden": "true"
+};
+const _hoisted_32 = {
+	key: 1,
+	class: "fl-pin-arrow",
+	"aria-hidden": "true"
+};
+const _hoisted_33 = { class: "fl-pin-name" };
+const _hoisted_34 = { class: "fl-pin-count" };
+const _hoisted_35 = {
 	key: 0,
 	class: "fl-status"
 };
-const _hoisted_31 = ["for"];
-const _hoisted_32 = ["id"];
-const _hoisted_33 = { class: "fl-unlock" };
-const _hoisted_34 = [
+const _hoisted_36 = ["for"];
+const _hoisted_37 = ["id"];
+const _hoisted_38 = { class: "fl-unlock" };
+const _hoisted_39 = [
 	"id",
 	"data-unlock",
 	"placeholder",
 	"aria-invalid",
 	"aria-describedby"
 ];
-const _hoisted_35 = [
+const _hoisted_40 = [
 	"aria-pressed",
 	"aria-label",
 	"title"
 ];
-const _hoisted_36 = ["disabled"];
-const _hoisted_37 = {
+const _hoisted_41 = ["disabled"];
+const _hoisted_42 = {
 	key: 2,
 	class: "fl-status fl-error"
 };
-const _hoisted_38 = {
+const _hoisted_43 = {
 	key: 0,
 	class: "fl-hint"
 };
-const _hoisted_39 = {
+const _hoisted_44 = {
 	key: 1,
 	class: "fl-hint"
 };
-const _hoisted_40 = {
+const _hoisted_45 = {
 	key: 3,
 	class: "fl-status"
 };
-const _hoisted_41 = { class: "fl-cell fl-more-cell" };
-const _hoisted_42 = { class: "fl-more-count" };
-const _hoisted_43 = ["onClick"];
-const _hoisted_44 = { class: "fl-more-page" };
-const _hoisted_45 = ["onClick"];
-const _hoisted_46 = ["onClick"];
-const _hoisted_47 = { class: "fl-cell fl-cell-check" };
-const _hoisted_48 = [
+const _hoisted_46 = { class: "fl-cell fl-more-cell" };
+const _hoisted_47 = { class: "fl-more-count" };
+const _hoisted_48 = { class: "fl-more-actions" };
+const _hoisted_49 = ["aria-label", "onClick"];
+const _hoisted_50 = { class: "fl-more-long" };
+const _hoisted_51 = {
+	class: "fl-more-short",
+	"aria-hidden": "true"
+};
+const _hoisted_52 = ["aria-label", "onClick"];
+const _hoisted_53 = { class: "fl-more-long" };
+const _hoisted_54 = {
+	class: "fl-more-short",
+	"aria-hidden": "true"
+};
+const _hoisted_55 = ["onClick"];
+const _hoisted_56 = ["data-path"];
+const _hoisted_57 = { class: "fl-cell fl-cell-check" };
+const _hoisted_58 = [
 	"disabled",
 	"aria-label",
 	"checked",
 	".indeterminate",
 	"onChange"
 ];
-const _hoisted_49 = ["title"];
-const _hoisted_50 = [
+const _hoisted_59 = ["title"];
+const _hoisted_60 = [
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_51 = [
+const _hoisted_61 = [
 	"aria-label",
 	"aria-expanded",
 	"onClick"
 ];
-const _hoisted_52 = {
+const _hoisted_62 = {
 	key: 2,
 	class: "fl-arrow-placeholder",
 	"aria-hidden": "true"
 };
-const _hoisted_53 = {
+const _hoisted_63 = {
 	key: 3,
 	class: "fl-folder-icon",
 	viewBox: "0 0 24 24",
@@ -1887,39 +2007,39 @@ const _hoisted_53 = {
 	height: "18",
 	"aria-hidden": "true"
 };
-const _hoisted_54 = ["data-kind"];
-const _hoisted_55 = { class: "fl-label" };
-const _hoisted_56 = ["onClick"];
-const _hoisted_57 = {
+const _hoisted_64 = ["data-kind"];
+const _hoisted_65 = { class: "fl-label" };
+const _hoisted_66 = ["onClick"];
+const _hoisted_67 = {
 	key: 0,
 	class: "fl-hit"
 };
-const _hoisted_58 = { class: "fl-meta" };
-const _hoisted_59 = {
+const _hoisted_68 = { class: "fl-meta" };
+const _hoisted_69 = {
 	key: 2,
 	class: "fl-locked-note"
 };
-const _hoisted_60 = {
+const _hoisted_70 = {
 	key: 5,
 	class: "fl-locked-note fl-locked-hint"
 };
-const _hoisted_61 = {
+const _hoisted_71 = {
 	key: 6,
 	class: "fl-count"
 };
-const _hoisted_62 = ["id"];
-const _hoisted_63 = [
+const _hoisted_72 = ["id"];
+const _hoisted_73 = [
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_64 = {
+const _hoisted_74 = {
 	key: 9,
 	class: "fl-loading",
 	"aria-hidden": "true"
 };
-const _hoisted_65 = ["onSubmit", "onKeydown"];
-const _hoisted_66 = [
+const _hoisted_75 = ["onSubmit", "onKeydown"];
+const _hoisted_76 = [
 	"onUpdate:modelValue",
 	"data-unlock",
 	"placeholder",
@@ -1927,50 +2047,50 @@ const _hoisted_66 = [
 	"aria-invalid",
 	"aria-describedby"
 ];
-const _hoisted_67 = [
+const _hoisted_77 = [
 	"aria-pressed",
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_68 = ["disabled"];
-const _hoisted_69 = [
+const _hoisted_78 = ["disabled"];
+const _hoisted_79 = [
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_70 = { class: "fl-cell fl-cell-size" };
-const _hoisted_71 = { class: "fl-cell fl-cell-date" };
-const _hoisted_72 = { class: "fl-cell fl-cell-op" };
-const _hoisted_73 = ["aria-label", "onClick"];
-const _hoisted_74 = [
+const _hoisted_80 = { class: "fl-cell fl-cell-size" };
+const _hoisted_81 = { class: "fl-cell fl-cell-date" };
+const _hoisted_82 = { class: "fl-cell fl-cell-op" };
+const _hoisted_83 = ["aria-label", "onClick"];
+const _hoisted_84 = [
 	"aria-label",
 	"aria-expanded",
 	"onClick"
 ];
-const _hoisted_75 = [
+const _hoisted_85 = [
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_76 = [
+const _hoisted_86 = [
 	"aria-label",
 	"title",
 	"onClick"
 ];
-const _hoisted_77 = {
+const _hoisted_87 = {
 	key: 4,
 	class: "fl-deep",
 	role: "status"
 };
-const _hoisted_78 = { class: "fl-deep-text" };
-const _hoisted_79 = {
+const _hoisted_88 = { class: "fl-deep-text" };
+const _hoisted_89 = {
 	key: 0,
 	class: "fl-deep-bar",
 	"aria-hidden": "true"
 };
-const _hoisted_80 = { class: "fl-foot" };
-const _hoisted_81 = {
+const _hoisted_90 = { class: "fl-foot" };
+const _hoisted_91 = {
 	key: 5,
 	class: "fl-toast",
 	role: "status"
@@ -1994,7 +2114,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: true
 		},
-		pageSize: { default: 200 },
+		pageSize: { default: 15 },
 		deepSearchLimit: { default: 500 },
 		deepSearch: { default: "manual" },
 		zipWarnSize: {},
@@ -2341,6 +2461,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			if (!node.is_dir) return;
 			if (node.expanded) {
 				node.expanded = false;
+				for (const key of [...shown.keys()]) if (isWithin(key, node.path)) shown.delete(key);
 				return;
 			}
 			node.expanded = await loadChildren(node, "focus");
@@ -2376,22 +2497,37 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				applySort(key, direction !== "desc");
 			}
 		});
-		/** A “show more” row closing a folder whose children are cut at `pageSize`. */
+		/** The row closing a long folder while its children are cut at `pageSize`. */
 		const shown = reactive(/* @__PURE__ */ new Map());
+		function pageSizeOf() {
+			return Math.max(0, Math.floor(props.pageSize ?? 15));
+		}
 		function limitOf(key) {
-			const size = Math.max(0, Math.floor(props.pageSize ?? 200));
+			const size = pageSizeOf();
 			return size ? shown.get(key) ?? size : Number.POSITIVE_INFINITY;
 		}
 		function showMore(row, all) {
-			const size = Math.max(1, Math.floor(props.pageSize ?? 200));
+			const size = Math.max(1, pageSizeOf());
 			shown.set(row.key, all ? Number.POSITIVE_INFINITY : limitOf(row.key) + size);
 		}
+		/** Back to the first page; the folder's row (or the list's top) comes back into view. */
+		async function showLess(key) {
+			shown.delete(key);
+			pinned.value = null;
+			await nextTick();
+			const root = rootEl.value;
+			if (!root) return;
+			const target = rowElement(key) ?? root;
+			if (target.getBoundingClientRect().top < stickyTop.value) target.scrollIntoView({ block: "start" });
+		}
 		function isMore(row) {
 			return "more" in row;
 		}
-		const rows = computed(() => {
+		const layout = computed(() => {
 			const out = [];
+			const long = [];
 			const query = keyword.value.trim().toLowerCase();
+			const size = pageSizeOf();
 			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);
@@ -2406,10 +2542,70 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					depth,
 					remaining: list.length - limit
 				});
+				let end = out.length - 1;
+				while (end >= 0 && isMore(out[end])) end -= 1;
+				const last = out[end];
+				if (!query && size > 0 && limit > size && last && !isMore(last)) long.push({
+					key,
+					depth: depth - 1,
+					shown: limit,
+					total: list.length,
+					last: last.path
+				});
 			};
 			walk(roots.value, props.sources.length ? "" : props.path, 0);
-			return out;
+			return {
+				rows: out,
+				long
+			};
 		});
+		const rows = computed(() => layout.value.rows);
+		const pinned = ref(null);
+		/** Height of the sticky selection bar above the pinned row (narrow lists only). */
+		const pinOffset = ref(0);
+		function rowElement(path) {
+			return [...rootEl.value?.querySelectorAll("[data-path]") ?? []].find((el) => el.dataset.path === path);
+		}
+		/** The pinned folder's name: its own, or for a single path's top level, the list's title. */
+		const pinnedName = computed(() => {
+			const folder = pinned.value;
+			if (!folder) return "";
+			if (folder.depth < 0) return props.title || folder.key.split("/").filter(Boolean).pop() || "/";
+			const find = (nodes) => {
+				for (const node of nodes) {
+					if (node.path === folder.key) return node;
+					const inner = isWithin(folder.key, node.path) ? find(node.children) : void 0;
+					if (inner) return inner;
+				}
+			};
+			return find(roots.value)?.name ?? "";
+		});
+		/** Pin the innermost long folder whose own row has scrolled away while its files are still on screen. */
+		function updatePin() {
+			const root = rootEl.value;
+			if (!root) return;
+			const bar = root.querySelector(".fl-bar");
+			pinOffset.value = bar && getComputedStyle(bar).position === "sticky" ? bar.offsetHeight : 0;
+			const top = stickyTop.value + pinOffset.value;
+			const rowHeight = root.querySelector(".fl-head")?.offsetHeight ?? 40;
+			let found = null;
+			for (const folder of layout.value.long) {
+				const head = folder.depth < 0 ? root.querySelector(".fl-head") : rowElement(folder.key);
+				const last = rowElement(folder.last);
+				if (!head || !last) continue;
+				if (head.getBoundingClientRect().bottom <= top && last.getBoundingClientRect().bottom > top + rowHeight && (!found || folder.depth > found.depth)) found = folder;
+			}
+			pinned.value = found;
+		}
+		let pinFrame = 0;
+		function schedulePin() {
+			if (pinFrame) return;
+			pinFrame = requestAnimationFrame(() => {
+				pinFrame = 0;
+				updatePin();
+			});
+		}
+		watch(layout, () => void nextTick(schedulePin));
 		const visible = computed(() => rows.value.filter((row) => !isMore(row)));
 		/** A name split around the filter keyword, for highlighting. */
 		function nameParts(name) {
@@ -2653,7 +2849,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		}
 		async function download(node) {
 			if (node.is_dir) return;
-			if (demo.value) {
+			if (demo.value && !isDemoFile(node.path)) {
 				showToast(t("demoDownload", { name: node.name }));
 				return;
 			}
@@ -2711,7 +2907,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		async function batchDownload() {
 			const files = selectedFiles.value;
 			if (!files.length || batchBusy.value) return;
-			if (demo.value) {
+			if (demo.value && !files.every((file) => isDemoFile(file.path))) {
 				showToast(t("demoBatch", { count: files.length }));
 				return;
 			}
@@ -2809,7 +3005,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			previewViewer.value = "";
 			previewError.value = "";
 			previewResolving.value = false;
-			if (demo.value || !canPreview(node)) return;
+			if (demo.value && !isDemoFile(node.path) || !canPreview(node)) return;
 			previewResolving.value = true;
 			try {
 				const url = await fileUrlOf(node);
@@ -2858,10 +3054,15 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			loadSettings();
 			measureStickyTop();
 			window.addEventListener("resize", measureStickyTop, { passive: true });
+			window.addEventListener("scroll", schedulePin, { passive: true });
+			window.addEventListener("resize", schedulePin, { passive: true });
 		});
 		onBeforeUnmount(() => {
 			zipAbort?.abort();
 			window.removeEventListener("resize", measureStickyTop);
+			window.removeEventListener("scroll", schedulePin);
+			window.removeEventListener("resize", schedulePin);
+			cancelAnimationFrame(pinFrame);
 			clearTimeout(toastTimer);
 		});
 		return (_ctx, _cache) => {
@@ -2990,7 +3191,45 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						}), 128))], 8, _hoisted_28), [[vModelSelect, sortValue.value]])
 					])])
 				]),
-				loadingRoot.value ? (openBlock(), createElementBlock("div", _hoisted_30, toDisplayString(t("loading")), 1)) : rootLock.value ? (openBlock(), createElementBlock("form", {
+				createCommentVNode(" While scrolling through a long folder, its row stays at the top with “show less”. "),
+				createElementVNode("div", {
+					class: "fl-pin-anchor",
+					style: normalizeStyle({ "--fl-pin-offset": `${pinOffset.value}px` })
+				}, [pinned.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: "fl-pin",
+					style: normalizeStyle({ "--fl-depth": Math.max(pinned.value.depth, 0) })
+				}, [
+					_cache[11] || (_cache[11] = createElementVNode("span", { class: "fl-cell fl-cell-check" }, null, -1)),
+					createElementVNode("span", _hoisted_30, [
+						pinned.value.depth >= 0 ? (openBlock(), createElementBlock("span", _hoisted_31)) : createCommentVNode("v-if", true),
+						pinned.value.depth >= 0 ? (openBlock(), createElementBlock("span", _hoisted_32, [createVNode(_sfc_main$2, {
+							name: "next",
+							size: 14
+						})])) : createCommentVNode("v-if", true),
+						_cache[10] || (_cache[10] = createElementVNode("svg", {
+							class: "fl-folder-icon",
+							viewBox: "0 0 24 24",
+							width: "18",
+							height: "18",
+							"aria-hidden": "true"
+						}, [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" })], -1)),
+						createElementVNode("span", _hoisted_33, toDisplayString(pinnedName.value), 1),
+						createElementVNode("span", _hoisted_34, toDisplayString(pinned.value.shown < pinned.value.total ? t("moreShown", {
+							shown: pinned.value.shown,
+							total: pinned.value.total
+						}) : t("allShown", { count: pinned.value.total })), 1)
+					]),
+					createElementVNode("button", {
+						class: "fl-pin-less",
+						type: "button",
+						onClick: _cache[3] || (_cache[3] = ($event) => showLess(pinned.value.key))
+					}, [createTextVNode(toDisplayString(t("showLess")), 1), createVNode(_sfc_main$2, {
+						name: "up",
+						size: 12
+					})])
+				], 4)) : createCommentVNode("v-if", true)], 4),
+				loadingRoot.value ? (openBlock(), createElementBlock("div", _hoisted_35, toDisplayString(t("loading")), 1)) : rootLock.value ? (openBlock(), createElementBlock("form", {
 					key: 1,
 					class: normalizeClass(["fl-unlock-root", { "fl-unlock-error": rootLock.value.error }]),
 					onSubmit: withModifiers(submitRootUnlock, ["prevent"])
@@ -3002,24 +3241,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					createElementVNode("label", {
 						class: "fl-unlock-label",
 						for: `${unref(uid)}-root`
-					}, toDisplayString(t("passwordPrompt")), 9, _hoisted_31),
+					}, toDisplayString(t("passwordPrompt")), 9, _hoisted_36),
 					rootLock.value.error ? (openBlock(), createElementBlock("span", {
 						key: 0,
 						id: `${unref(uid)}-root-error`,
 						class: "fl-unlock-message",
 						role: "alert"
-					}, toDisplayString(unlockErrorText(rootLock.value.error)), 9, _hoisted_32)) : createCommentVNode("v-if", true),
-					createElementVNode("span", _hoisted_33, [
+					}, toDisplayString(unlockErrorText(rootLock.value.error)), 9, _hoisted_37)) : createCommentVNode("v-if", true),
+					createElementVNode("span", _hoisted_38, [
 						withDirectives(createElementVNode("input", {
 							id: `${unref(uid)}-root`,
-							"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => rootLock.value.input = $event),
+							"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => rootLock.value.input = $event),
 							type: "password",
 							autocomplete: "off",
 							"data-unlock": __props.path,
 							placeholder: t("passwordPlaceholder"),
 							"aria-invalid": !!rootLock.value.error,
 							"aria-describedby": rootLock.value.error ? `${unref(uid)}-root-error` : void 0
-						}, null, 8, _hoisted_34), [[vModelText, rootLock.value.input]]),
+						}, null, 8, _hoisted_39), [[vModelText, rootLock.value.input]]),
 						canRemember.value ? (openBlock(), createElementBlock("button", {
 							key: 0,
 							class: "fl-unlock-remember",
@@ -3027,49 +3266,60 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"aria-pressed": rootLock.value.remember,
 							"aria-label": t("rememberPassword"),
 							title: t("rememberPassword"),
-							onClick: _cache[4] || (_cache[4] = ($event) => rootLock.value.remember = !rootLock.value.remember)
-						}, [createVNode(_sfc_main$2, { name: "key" })], 8, _hoisted_35)) : createCommentVNode("v-if", true),
+							onClick: _cache[5] || (_cache[5] = ($event) => rootLock.value.remember = !rootLock.value.remember)
+						}, [createVNode(_sfc_main$2, { name: "key" })], 8, _hoisted_40)) : createCommentVNode("v-if", true),
 						createElementVNode("button", {
 							class: "fl-unlock-submit",
 							type: "submit",
 							disabled: rootLock.value.busy || !rootLock.value.input
-						}, toDisplayString(t("open")), 9, _hoisted_36)
+						}, toDisplayString(t("open")), 9, _hoisted_41)
 					])
-				], 34)) : errorMsg.value ? (openBlock(), createElementBlock("div", _hoisted_37, [
+				], 34)) : errorMsg.value ? (openBlock(), createElementBlock("div", _hoisted_42, [
 					createTextVNode(toDisplayString(t("loadFailed", { message: errorMsg.value })) + " ", 1),
-					/guest/i.test(errorMsg.value) ? (openBlock(), createElementBlock("div", _hoisted_38, toDisplayString(t("guestHint")), 1)) : createCommentVNode("v-if", true),
-					unref(isNetworkError)(errorMsg.value) ? (openBlock(), createElementBlock("div", _hoisted_39, toDisplayString(t("corsHint")), 1)) : createCommentVNode("v-if", true),
+					/guest/i.test(errorMsg.value) ? (openBlock(), createElementBlock("div", _hoisted_43, toDisplayString(t("guestHint")), 1)) : createCommentVNode("v-if", true),
+					unref(isNetworkError)(errorMsg.value) ? (openBlock(), createElementBlock("div", _hoisted_44, toDisplayString(t("corsHint")), 1)) : createCommentVNode("v-if", true),
 					createElementVNode("button", {
 						class: "fl-btn",
 						type: "button",
 						onClick: loadRoot
 					}, toDisplayString(t("retry")), 1)
-				])) : visible.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_40, toDisplayString(t("empty")), 1)) : createCommentVNode("v-if", true),
+				])) : visible.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_45, toDisplayString(t("empty")), 1)) : createCommentVNode("v-if", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (node, index) => {
 					return openBlock(), createElementBlock(Fragment, { key: isMore(node) ? `more:${node.key}` : node.path }, [isMore(node) ? (openBlock(), createElementBlock("div", {
 						key: 0,
 						class: "fl-row fl-more",
 						style: normalizeStyle({ "--fl-depth": node.depth })
-					}, [_cache[10] || (_cache[10] = createElementVNode("span", { class: "fl-cell fl-cell-check" }, null, -1)), createElementVNode("span", _hoisted_41, [
-						_cache[9] || (_cache[9] = createElementVNode("span", {
+					}, [_cache[15] || (_cache[15] = createElementVNode("span", { class: "fl-cell fl-cell-check" }, null, -1)), createElementVNode("span", _hoisted_46, [
+						createCommentVNode(" Reads as one more row of the folder: “⋯” in the type column, the count where names start. "),
+						_cache[12] || (_cache[12] = createElementVNode("span", {
 							class: "fl-indent",
 							"aria-hidden": "true"
 						}, null, -1)),
-						createElementVNode("span", _hoisted_42, toDisplayString(t("moreRemaining", { count: node.remaining })), 1),
-						node.remaining > (__props.pageSize || 0) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
-							class: "fl-more-btn",
+						_cache[13] || (_cache[13] = createElementVNode("span", {
+							class: "fl-arrow-placeholder",
+							"aria-hidden": "true"
+						}, null, -1)),
+						_cache[14] || (_cache[14] = createElementVNode("span", {
+							class: "fl-more-tag",
+							"aria-hidden": "true"
+						}, "⋯", -1)),
+						createElementVNode("span", _hoisted_47, toDisplayString(t("moreRemaining", { count: node.remaining })), 1),
+						createElementVNode("span", _hoisted_48, [node.remaining > (__props.pageSize || 0) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("button", {
+							class: "fl-more-link",
 							type: "button",
+							"aria-label": t("showNext", { count: __props.pageSize }),
 							onClick: ($event) => showMore(node, false)
-						}, [createTextVNode(toDisplayString(t("showMore")), 1), createElementVNode("span", _hoisted_44, toDisplayString(` ${t("folderItems", { count: __props.pageSize })}`), 1)], 8, _hoisted_43), createElementVNode("button", {
-							class: "fl-more-btn fl-more-all",
+						}, [createElementVNode("span", _hoisted_50, toDisplayString(t("showNext", { count: __props.pageSize })), 1), createElementVNode("span", _hoisted_51, toDisplayString(t("showNextShort", { count: __props.pageSize })), 1)], 8, _hoisted_49), createElementVNode("button", {
+							class: "fl-more-link fl-more-all",
 							type: "button",
+							"aria-label": t("showAll"),
 							onClick: ($event) => showMore(node, true)
-						}, toDisplayString(t("showAll")), 9, _hoisted_45)], 64)) : (openBlock(), createElementBlock("button", {
+						}, [createElementVNode("span", _hoisted_53, toDisplayString(t("showAll")), 1), createElementVNode("span", _hoisted_54, toDisplayString(t("showAllShort")), 1)], 8, _hoisted_52)], 64)) : (openBlock(), createElementBlock("button", {
 							key: 1,
-							class: "fl-more-btn",
+							class: "fl-more-link fl-more-all",
 							type: "button",
 							onClick: ($event) => showMore(node, true)
-						}, toDisplayString(t("showRest", { count: node.remaining })), 9, _hoisted_46))
+						}, toDisplayString(t("showRest", { count: node.remaining })), 9, _hoisted_55))])
 					])], 4)) : (openBlock(), createElementBlock("div", {
 						key: 1,
 						class: normalizeClass(["fl-row", {
@@ -3080,21 +3330,22 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							"fl-row-prompting": node.lock?.prompting,
 							"fl-row-error": node.lock?.prompting && !!node.lock.error
 						}]),
-						style: normalizeStyle({ "--fl-depth": node.depth })
+						style: normalizeStyle({ "--fl-depth": node.depth }),
+						"data-path": node.path
 					}, [
-						createElementVNode("label", _hoisted_47, [createElementVNode("input", {
+						createElementVNode("label", _hoisted_57, [createElementVNode("input", {
 							type: "checkbox",
 							disabled: !!node.lock || batchBusy.value,
 							"aria-label": t("selectItem", { name: node.name }),
 							checked: isChecked(node),
 							".indeterminate": isIndeterminate(node),
 							onChange: ($event) => toggleCheck(node, $event)
-						}, null, 40, _hoisted_48)]),
+						}, null, 40, _hoisted_58)]),
 						createElementVNode("span", {
 							class: "fl-cell fl-cell-name",
 							title: node.isRoot ? node.path : void 0
 						}, [
-							_cache[12] || (_cache[12] = createElementVNode("span", {
+							_cache[17] || (_cache[17] = createElementVNode("span", {
 								class: "fl-indent",
 								"aria-hidden": "true"
 							}, null, -1)),
@@ -3108,7 +3359,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, [createVNode(_sfc_main$2, {
 								name: "lock",
 								size: 14
-							})], 8, _hoisted_50)) : node.is_dir ? (openBlock(), createElementBlock("button", {
+							})], 8, _hoisted_60)) : node.is_dir ? (openBlock(), createElementBlock("button", {
 								key: 1,
 								class: normalizeClass(["fl-arrow", { "fl-arrow-open": node.expanded }]),
 								type: "button",
@@ -3118,27 +3369,27 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, [createVNode(_sfc_main$2, {
 								name: "next",
 								size: 14
-							})], 10, _hoisted_51)) : (openBlock(), createElementBlock("span", _hoisted_52)),
-							node.is_dir ? (openBlock(), createElementBlock("svg", _hoisted_53, [..._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", {
+							})], 10, _hoisted_61)) : (openBlock(), createElementBlock("span", _hoisted_62)),
+							node.is_dir ? (openBlock(), createElementBlock("svg", _hoisted_63, [..._cache[16] || (_cache[16] = [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: 4,
 								class: "fl-type",
 								"data-kind": unref(fileKind)(node.name),
 								"aria-hidden": "true"
-							}, toDisplayString(unref(extOf)(node.name) || "FILE"), 9, _hoisted_54)),
-							createElementVNode("span", _hoisted_55, [createElementVNode("span", {
+							}, toDisplayString(unref(extOf)(node.name) || "FILE"), 9, _hoisted_64)),
+							createElementVNode("span", _hoisted_65, [createElementVNode("span", {
 								class: normalizeClass(["fl-name", { "fl-name-dir": node.is_dir }]),
 								onClick: ($event) => node.lock || node.is_dir ? toggleExpand(node) : download(node)
 							}, [(openBlock(true), createElementBlock(Fragment, null, renderList(nameParts(node.name), (part, at) => {
-								return openBlock(), createElementBlock(Fragment, { key: at }, [part.hit ? (openBlock(), createElementBlock("mark", _hoisted_57, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
-							}), 128))], 10, _hoisted_56), createElementVNode("span", _hoisted_58, [!node.is_dir ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(formatSize)(node.size)) + " · " + toDisplayString(unref(formatDate)(node.modified)), 1)], 64)) : node.loaded ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(t("folderItems", { count: statsOf(node).files })) + " · " + toDisplayString(unref(formatSize)(statsOf(node).bytes)), 1)], 64)) : lockedInSearch(node) ? (openBlock(), createElementBlock("span", _hoisted_59, toDisplayString(t("deepLocked")), 1)) : createCommentVNode("v-if", true)])]),
-							lockedInSearch(node) && !node.lock?.prompting ? (openBlock(), createElementBlock("span", _hoisted_60, toDisplayString(t("deepLocked")), 1)) : createCommentVNode("v-if", true),
-							node.is_dir && node.loaded ? (openBlock(), createElementBlock("span", _hoisted_61, toDisplayString(t("folderItems", { count: statsOf(node).files })), 1)) : createCommentVNode("v-if", true),
+								return openBlock(), createElementBlock(Fragment, { key: at }, [part.hit ? (openBlock(), createElementBlock("mark", _hoisted_67, toDisplayString(part.text), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(part.text), 1)], 64))], 64);
+							}), 128))], 10, _hoisted_66), createElementVNode("span", _hoisted_68, [!node.is_dir ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(unref(formatSize)(node.size)) + " · " + toDisplayString(unref(formatDate)(node.modified)), 1)], 64)) : node.loaded ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(t("folderItems", { count: statsOf(node).files })) + " · " + toDisplayString(unref(formatSize)(statsOf(node).bytes)), 1)], 64)) : lockedInSearch(node) ? (openBlock(), createElementBlock("span", _hoisted_69, toDisplayString(t("deepLocked")), 1)) : createCommentVNode("v-if", true)])]),
+							lockedInSearch(node) && !node.lock?.prompting ? (openBlock(), createElementBlock("span", _hoisted_70, toDisplayString(t("deepLocked")), 1)) : createCommentVNode("v-if", true),
+							node.is_dir && node.loaded ? (openBlock(), createElementBlock("span", _hoisted_71, toDisplayString(t("folderItems", { count: statsOf(node).files })), 1)) : createCommentVNode("v-if", true),
 							node.lock?.prompting && node.lock.error ? (openBlock(), createElementBlock("span", {
 								key: 7,
 								id: `${unref(uid)}-error-${index}`,
 								class: "fl-unlock-message",
 								role: "alert"
-							}, toDisplayString(unlockErrorText(node.lock.error)), 9, _hoisted_62)) : createCommentVNode("v-if", true),
+							}, toDisplayString(unlockErrorText(node.lock.error)), 9, _hoisted_72)) : createCommentVNode("v-if", true),
 							!node.lock && unref(remembered).has(node.path) ? (openBlock(), createElementBlock("button", {
 								key: 8,
 								class: "fl-remembered",
@@ -3149,9 +3400,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, [createVNode(_sfc_main$2, {
 								name: "key",
 								size: 11
-							}), createTextVNode(" " + toDisplayString(t("remembered")) + " · " + toDisplayString(t("forgetPassword")), 1)], 8, _hoisted_63)) : createCommentVNode("v-if", true),
-							node.loading ? (openBlock(), createElementBlock("span", _hoisted_64, "…")) : createCommentVNode("v-if", true)
-						], 8, _hoisted_49),
+							}), createTextVNode(" " + toDisplayString(t("remembered")) + " · " + toDisplayString(t("forgetPassword")), 1)], 8, _hoisted_73)) : createCommentVNode("v-if", true),
+							node.loading ? (openBlock(), createElementBlock("span", _hoisted_74, "…")) : createCommentVNode("v-if", true)
+						], 8, _hoisted_59),
 						node.lock?.prompting ? (openBlock(), createElementBlock("form", {
 							key: 0,
 							class: "fl-unlock fl-unlock-row",
@@ -3172,7 +3423,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"aria-label": t("passwordFor", { name: node.name }),
 								"aria-invalid": !!node.lock.error,
 								"aria-describedby": node.lock.error ? `${unref(uid)}-error-${index}` : void 0
-							}, null, 8, _hoisted_66), [[vModelText, node.lock.input]]),
+							}, null, 8, _hoisted_76), [[vModelText, node.lock.input]]),
 							canRemember.value ? (openBlock(), createElementBlock("button", {
 								key: 0,
 								class: "fl-unlock-remember",
@@ -3181,12 +3432,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 								"aria-label": t("rememberPassword"),
 								title: t("rememberPassword"),
 								onClick: ($event) => node.lock.remember = !node.lock.remember
-							}, [createVNode(_sfc_main$2, { name: "key" })], 8, _hoisted_67)) : createCommentVNode("v-if", true),
+							}, [createVNode(_sfc_main$2, { name: "key" })], 8, _hoisted_77)) : createCommentVNode("v-if", true),
 							createElementVNode("button", {
 								class: "fl-unlock-submit",
 								type: "submit",
 								disabled: node.lock.busy || !node.lock.input
-							}, toDisplayString(t("open")), 9, _hoisted_68),
+							}, toDisplayString(t("open")), 9, _hoisted_78),
 							createElementVNode("button", {
 								class: "fl-unlock-cancel",
 								type: "button",
@@ -3196,11 +3447,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, [createVNode(_sfc_main$2, {
 								name: "close",
 								size: 14
-							})], 8, _hoisted_69)
-						], 40, _hoisted_65)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-							createElementVNode("span", _hoisted_70, toDisplayString(node.is_dir ? "—" : unref(formatSize)(node.size)), 1),
-							createElementVNode("span", _hoisted_71, toDisplayString(unref(formatDate)(node.modified)), 1),
-							createElementVNode("span", _hoisted_72, [node.lock ? (openBlock(), createElementBlock("button", {
+							})], 8, _hoisted_79)
+						], 40, _hoisted_75)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+							createElementVNode("span", _hoisted_80, toDisplayString(node.is_dir ? "—" : unref(formatSize)(node.size)), 1),
+							createElementVNode("span", _hoisted_81, toDisplayString(unref(formatDate)(node.modified)), 1),
+							createElementVNode("span", _hoisted_82, [node.lock ? (openBlock(), createElementBlock("button", {
 								key: 0,
 								class: "fl-action fl-arrow-end fl-lock",
 								type: "button",
@@ -3209,7 +3460,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, [createVNode(_sfc_main$2, {
 								name: "lock",
 								size: 18
-							})], 8, _hoisted_73)) : node.is_dir ? (openBlock(), createElementBlock("button", {
+							})], 8, _hoisted_83)) : node.is_dir ? (openBlock(), createElementBlock("button", {
 								key: 1,
 								class: normalizeClass(["fl-action fl-arrow-end", { "fl-arrow-open": node.expanded }]),
 								type: "button",
@@ -3219,24 +3470,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							}, [createVNode(_sfc_main$2, {
 								name: "next",
 								size: 18
-							})], 10, _hoisted_74)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [canPreview(node) ? (openBlock(), createElementBlock("button", {
+							})], 10, _hoisted_84)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [canPreview(node) ? (openBlock(), createElementBlock("button", {
 								key: 0,
 								class: "fl-action fl-preview-btn",
 								type: "button",
 								"aria-label": `${t("preview")} ${node.name}`,
 								title: t("preview"),
 								onClick: ($event) => preview(node)
-							}, [createVNode(_sfc_main$2, { name: "eye" })], 8, _hoisted_75)) : createCommentVNode("v-if", true), createElementVNode("button", {
+							}, [createVNode(_sfc_main$2, { name: "eye" })], 8, _hoisted_85)) : createCommentVNode("v-if", true), createElementVNode("button", {
 								class: "fl-action fl-download",
 								type: "button",
 								"aria-label": `${t("download")} ${node.name}`,
 								title: t("download"),
 								onClick: ($event) => download(node)
-							}, [createVNode(_sfc_main$2, { name: "download" })], 8, _hoisted_76)], 64))])
+							}, [createVNode(_sfc_main$2, { name: "download" })], 8, _hoisted_86)], 64))])
 						], 64))
-					], 6))], 64);
+					], 14, _hoisted_56))], 64);
 				}), 128)),
-				deepRow.value ? (openBlock(), createElementBlock("div", _hoisted_77, [createElementVNode("div", _hoisted_78, [deepRow.value === "running" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(t("deepRunning", { count: folderCounts.value.checked })) + " · ", 1), createElementVNode("button", {
+				deepRow.value ? (openBlock(), createElementBlock("div", _hoisted_87, [createElementVNode("div", _hoisted_88, [deepRow.value === "running" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(t("deepRunning", { count: folderCounts.value.checked })) + " · ", 1), createElementVNode("button", {
 					class: "fl-deep-link",
 					type: "button",
 					onClick: pauseDeepSearch
@@ -3248,9 +3499,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					class: "fl-deep-link",
 					type: "button",
 					onClick: deepSearch
-				}, toDisplayString(t("deepContinue")), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(deepSummary.value), 1)], 64))]), deepRow.value === "running" ? (openBlock(), createElementBlock("span", _hoisted_79)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_80, [createElementVNode("span", null, toDisplayString(t("loaded", { count: allFiles.value.length })) + " · " + toDisplayString(t("totalSize", { size: unref(formatSize)(unref(totalSize)(allFiles.value)) })), 1)]),
-				toast.value ? (openBlock(), createElementBlock("div", _hoisted_81, toDisplayString(toast.value), 1)) : createCommentVNode("v-if", true),
+				}, toDisplayString(t("deepContinue")), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 3 }, [createTextVNode(toDisplayString(deepSummary.value), 1)], 64))]), deepRow.value === "running" ? (openBlock(), createElementBlock("span", _hoisted_89)) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				createElementVNode("div", _hoisted_90, [createElementVNode("span", null, toDisplayString(t("loaded", { count: allFiles.value.length })) + " · " + toDisplayString(t("totalSize", { size: unref(formatSize)(unref(totalSize)(allFiles.value)) })), 1)]),
+				toast.value ? (openBlock(), createElementBlock("div", _hoisted_91, toDisplayString(toast.value), 1)) : createCommentVNode("v-if", true),
 				createVNode(_sfc_main$3, {
 					open: !!zipDialog.value,
 					title: zipDialog.value?.title ?? "",
@@ -3259,7 +3510,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					"confirm-label": zipDialog.value?.confirm,
 					"cancel-label": zipDialog.value?.cancel ?? "",
 					onConfirm: confirmZip,
-					onClose: _cache[5] || (_cache[5] = ($event) => zipNotice.value = null)
+					onClose: _cache[6] || (_cache[6] = ($event) => zipNotice.value = null)
 				}, null, 8, [
 					"open",
 					"title",
@@ -3276,13 +3527,13 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 					viewer: previewViewer.value,
 					resolving: previewResolving.value,
 					error: previewError.value,
-					demo: demo.value,
+					demo: demo.value && !!previewNode.value && !unref(isDemoFile)(previewNode.value.path),
 					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))
+					onPrev: _cache[7] || (_cache[7] = ($event) => stepPreview(-1)),
+					onNext: _cache[8] || (_cache[8] = ($event) => stepPreview(1)),
+					onDownload: _cache[9] || (_cache[9] = ($event) => previewNode.value && download(previewNode.value))
 				}, null, 8, [
 					"open",
 					"file",