vitepress-plugin-filelist 0.7.2 → 0.8.0

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

@@ -136,12 +136,25 @@ interface FileListLabels {
   /** `{limit}` */
   zipBlockText: string;
   gotIt: string;
-  /** Last row of a long folder. `{count}` */
+  /** Last row of a long folder: how many are not shown yet. `{count}` */
   moreRemaining: string;
+  /** Pinned folder row: `{shown}` of `{total}`. */
+  moreShown: string;
+  /** “Show all”, short form for narrow lists. */
+  showAllShort: string;
+  /** Show the next page. `{count}` */
+  showNext: string;
+  /** Show the next page, short form for narrow lists. `{count}` */
+  showNextShort: string;
+  /** No longer shown (“Show next” replaces it); kept for existing overrides. */
   showMore: string;
   showAll: string;
   /** Fewer than a page left. `{count}` */
   showRest: string;
+  /** Pinned folder row: back to the first page. */
+  showLess: string;
+  /** Pinned folder row once everything is shown. `{count}` */
+  allShown: string;
 }
 interface FileListSource {
   /** OpenList path, directory or single file. */
@@ -174,7 +187,7 @@ interface FileListProps {
    */
   rememberPassword?: boolean;
   /**
-   * Rows shown per folder before “Show more”. Defaults to `200`; `0` shows
+   * Rows shown per folder before “Show more”. Defaults to `15`; `0` shows
    * everything. Data is still loaded in full; only rendering is limited.
    */
   pageSize?: number;

package/dist/client/ssr/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 _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	__name: "ConfirmDialog",
@@ -754,6 +830,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: [
@@ -901,7 +985,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",
@@ -997,7 +1087,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 = {}) {
@@ -1565,7 +1661,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: true
 		},
-		pageSize: { default: 200 },
+		pageSize: { default: 15 },
 		deepSearchLimit: { default: 500 },
 		deepSearch: { default: "manual" },
 		zipWarnSize: {},
@@ -1831,18 +1927,23 @@ 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 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);
@@ -1857,10 +1958,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) {
@@ -2047,7 +2208,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;
 			}
@@ -2151,7 +2312,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);
@@ -2200,10 +2361,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, _push, _parent, _attrs) => {
@@ -2287,7 +2453,30 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			ssrRenderList(sortOptions.value, (option) => {
 				_push(`<option${ssrRenderAttr("value", option.value)}${ssrIncludeBooleanAttr(Array.isArray(sortValue.value) ? ssrLooseContain(sortValue.value, option.value) : ssrLooseEqual(sortValue.value, option.value)) ? " selected" : ""}>${ssrInterpolate(option.label)}</option>`);
 			});
-			_push(`<!--]--></select></label></span></div>`);
+			_push(`<!--]--></select></label></span></div><!-- While scrolling through a long folder, its row stays at the top with “show less”. --><div class="fl-pin-anchor" style="${ssrRenderStyle({ "--fl-pin-offset": `${pinOffset.value}px` })}">`);
+			if (pinned.value) {
+				_push(`<div class="fl-pin" style="${ssrRenderStyle({ "--fl-depth": Math.max(pinned.value.depth, 0) })}"><span class="fl-cell fl-cell-check"></span><span class="fl-cell fl-cell-name">`);
+				if (pinned.value.depth >= 0) _push(`<span class="fl-indent" aria-hidden="true"></span>`);
+				else _push(`<!---->`);
+				if (pinned.value.depth >= 0) {
+					_push(`<span class="fl-pin-arrow" aria-hidden="true">`);
+					_push(ssrRenderComponent(_sfc_main$2, {
+						name: "next",
+						size: 14
+					}, null, _parent));
+					_push(`</span>`);
+				} else _push(`<!---->`);
+				_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><span class="fl-pin-name">${ssrInterpolate(pinnedName.value)}</span><span class="fl-pin-count">${ssrInterpolate(pinned.value.shown < pinned.value.total ? t("moreShown", {
+					shown: pinned.value.shown,
+					total: pinned.value.total
+				}) : t("allShown", { count: pinned.value.total }))}</span></span><button class="fl-pin-less" type="button">${ssrInterpolate(t("showLess"))}`);
+				_push(ssrRenderComponent(_sfc_main$2, {
+					name: "up",
+					size: 12
+				}, null, _parent));
+				_push(`</button></div>`);
+			} else _push(`<!---->`);
+			_push(`</div>`);
 			if (loadingRoot.value) _push(`<div class="fl-status">${ssrInterpolate(t("loading"))}</div>`);
 			else if (rootLock.value) {
 				_push(`<form class="${ssrRenderClass([{ "fl-unlock-error": rootLock.value.error }, "fl-unlock-root"])}">`);
@@ -2318,10 +2507,10 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			ssrRenderList(rows.value, (node, index) => {
 				_push(`<!--[-->`);
 				if (isMore(node)) {
-					_push(`<div class="fl-row fl-more" style="${ssrRenderStyle({ "--fl-depth": node.depth })}"><span class="fl-cell fl-cell-check"></span><span class="fl-cell fl-more-cell"><span class="fl-indent" aria-hidden="true"></span><span class="fl-more-count">${ssrInterpolate(t("moreRemaining", { count: node.remaining }))}</span>`);
-					if (node.remaining > (__props.pageSize || 0)) _push(`<!--[--><button class="fl-more-btn" type="button">${ssrInterpolate(t("showMore"))}<span class="fl-more-page">${ssrInterpolate(` ${t("folderItems", { count: __props.pageSize })}`)}</span></button><button class="fl-more-btn fl-more-all" type="button">${ssrInterpolate(t("showAll"))}</button><!--]-->`);
-					else _push(`<button class="fl-more-btn" type="button">${ssrInterpolate(t("showRest", { count: node.remaining }))}</button>`);
-					_push(`</span></div>`);
+					_push(`<div class="fl-row fl-more" style="${ssrRenderStyle({ "--fl-depth": node.depth })}"><span class="fl-cell fl-cell-check"></span><span class="fl-cell fl-more-cell"><!-- Reads as one more row of the folder: “⋯” in the type column, the count where names start. --><span class="fl-indent" aria-hidden="true"></span><span class="fl-arrow-placeholder" aria-hidden="true"></span><span class="fl-more-tag" aria-hidden="true">⋯</span><span class="fl-more-count">${ssrInterpolate(t("moreRemaining", { count: node.remaining }))}</span><span class="fl-more-actions">`);
+					if (node.remaining > (__props.pageSize || 0)) _push(`<!--[--><button class="fl-more-link" type="button"${ssrRenderAttr("aria-label", t("showNext", { count: __props.pageSize }))}><span class="fl-more-long">${ssrInterpolate(t("showNext", { count: __props.pageSize }))}</span><span class="fl-more-short" aria-hidden="true">${ssrInterpolate(t("showNextShort", { count: __props.pageSize }))}</span></button><button class="fl-more-link fl-more-all" type="button"${ssrRenderAttr("aria-label", t("showAll"))}><span class="fl-more-long">${ssrInterpolate(t("showAll"))}</span><span class="fl-more-short" aria-hidden="true">${ssrInterpolate(t("showAllShort"))}</span></button><!--]-->`);
+					else _push(`<button class="fl-more-link fl-more-all" type="button">${ssrInterpolate(t("showRest", { count: node.remaining }))}</button>`);
+					_push(`</span></span></div>`);
 				} else {
 					_push(`<div class="${ssrRenderClass([{
 						"fl-row-dir": node.is_dir,
@@ -2330,7 +2519,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 						"fl-row-locked": !!node.lock,
 						"fl-row-prompting": node.lock?.prompting,
 						"fl-row-error": node.lock?.prompting && !!node.lock.error
-					}, "fl-row"])}" style="${ssrRenderStyle({ "--fl-depth": node.depth })}"><label class="fl-cell fl-cell-check"><input type="checkbox"${ssrIncludeBooleanAttr(!!node.lock || batchBusy.value) ? " disabled" : ""}${ssrRenderAttr("aria-label", t("selectItem", { name: node.name }))}${ssrIncludeBooleanAttr(isChecked(node)) ? " checked" : ""}${ssrRenderAttr("indeterminate", isIndeterminate(node))}></label><span class="fl-cell fl-cell-name"${ssrRenderAttr("title", node.isRoot ? node.path : void 0)}><span class="fl-indent" aria-hidden="true"></span>`);
+					}, "fl-row"])}" style="${ssrRenderStyle({ "--fl-depth": node.depth })}"${ssrRenderAttr("data-path", node.path)}><label class="fl-cell fl-cell-check"><input type="checkbox"${ssrIncludeBooleanAttr(!!node.lock || batchBusy.value) ? " disabled" : ""}${ssrRenderAttr("aria-label", t("selectItem", { name: node.name }))}${ssrIncludeBooleanAttr(isChecked(node)) ? " checked" : ""}${ssrRenderAttr("indeterminate", isIndeterminate(node))}></label><span class="fl-cell fl-cell-name"${ssrRenderAttr("title", node.isRoot ? node.path : void 0)}><span class="fl-indent" aria-hidden="true"></span>`);
 					if (node.lock) {
 						_push(`<button class="fl-arrow fl-lock" type="button"${ssrRenderAttr("aria-label", t("unlockFolder", { name: node.name }))}${ssrRenderAttr("title", t("unlockFolder", { name: node.name }))}>`);
 						_push(ssrRenderComponent(_sfc_main$2, {
@@ -2463,7 +2652,7 @@ 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,

package/dist/client/style.css

@@ -826,47 +826,138 @@
 /* ---------------- long folders ---------------- */
 
 .fl-more {
-  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-2);
 }
 
 .fl-more-cell {
   grid-column: 2 / -1;
-  gap: 12px;
+  /* the same gaps as a file's name cell, so the tag and count line up with its type and name */
+  gap: 8px;
   align-self: stretch;
 }
 
-.fl-more-cell .fl-indent {
-  /* line the row up with the folder's files (arrow + icon columns) */
-  margin-right: 36px;
+/* “⋯” in the file-type column: the size of .fl-type */
+.fl-more-tag {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 20px;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--vp-c-text-3);
+  letter-spacing: 1px;
+  background: var(--vp-c-default-soft);
+  border-radius: 4px;
 }
 
 .fl-more-count {
+  min-width: 0;
+  overflow: hidden;
   font-size: 13px;
-  color: var(--vp-c-text-2);
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.fl-more-btn {
+/* the short forms are for narrow lists */
+.fl-more-short {
+  display: none;
+}
+
+.fl-more-actions {
+  display: flex;
+  flex: none;
+  gap: 2px;
+  align-items: center;
+  margin-left: auto;
+}
+
+.fl-more-link {
   height: 28px;
-  padding: 0 12px;
+  padding: 0 8px;
   font-size: 13px;
-  font-weight: 600;
   color: var(--vp-c-brand-1);
   white-space: nowrap;
   cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+}
+
+.fl-more-all {
+  font-weight: 600;
+}
+
+/* hover only where there is a pointer, so a tap does not leave a mark behind */
+@media (hover: hover) {
+  .fl-more-link:hover,
+  .fl-pin-less:hover {
+    background: var(--vp-c-default-soft);
+  }
+}
+
+/* the folder row pinned at the top while scrolling through a long folder */
+.fl-pin-anchor {
+  position: sticky;
+  top: calc(var(--fl-sticky) + var(--fl-pin-offset, 0px));
+  z-index: 5;
+  height: 0;
+}
+
+.fl-pin {
+  position: absolute;
+  inset: 0 0 auto;
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: var(--fl-row-h);
+  padding: 0 8px;
   background: var(--vp-c-bg);
-  border: 1px solid var(--vp-c-brand-soft);
-  border-radius: 7px;
+  border-bottom: 1px solid var(--vp-c-divider);
+  box-shadow: 0 6px 12px -8px rgb(0 0 0 / 25%);
 }
 
-.fl-more-btn:hover {
-  border-color: var(--vp-c-brand-1);
+.fl-pin-arrow {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  color: var(--vp-c-text-2);
+  transform: rotate(90deg);
 }
 
-.fl-more-all {
-  font-weight: 400;
-  background: transparent;
-  border-color: transparent;
+.fl-pin-name {
+  min-width: 0;
+  overflow: hidden;
+  font-weight: 500;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fl-pin-count {
+  flex: none;
+  font-size: 12px;
+  color: var(--vp-c-text-2);
+  white-space: nowrap;
+}
+
+.fl-pin-less {
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  height: 26px;
+  padding: 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--vp-c-brand-1);
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--vp-c-brand-soft);
+  border: 0;
+  border-radius: 13px;
 }
 
 /* ---------------- filter and deep search ---------------- */
@@ -1127,31 +1218,63 @@
     border-radius: 10px;
   }
 
-  .fl-more-cell {
-    gap: 4px;
-  }
-
-  .fl-more-cell .fl-indent {
-    margin-right: 10px;
+  .fl-more-tag {
+    width: 36px;
+    height: 22px;
   }
 
   .fl-more-count {
     flex: 1 1 auto;
   }
 
-  .fl-more-btn {
-    height: 44px;
-    padding: 0 12px;
+  .fl-more-long {
+    display: none;
+  }
+
+  .fl-more-short {
+    display: inline;
+  }
+
+  /* smaller to look at, still a 44px target */
+  .fl-more-link {
+    position: relative;
+    height: 32px;
+    padding: 0 10px;
     font-size: 14px;
-    border-radius: 10px;
   }
 
-  .fl-more-page {
+  .fl-more-link::after {
+    position: absolute;
+    inset: -6px 0;
+    content: '';
+  }
+
+  .fl-pin {
+    grid-template-columns: 44px minmax(0, 1fr) auto;
+    padding: 0 8px 0 0;
+  }
+
+  .fl-pin-count {
     display: none;
   }
 
+  .fl-pin-less {
+    position: relative;
+    height: 32px;
+    padding: 0 12px;
+    font-size: 13px;
+    border-radius: 16px;
+  }
+
+  .fl-pin-less::after {
+    position: absolute;
+    inset: -6px 0;
+    content: '';
+  }
+
   /* rows (container queries cannot restyle .fl-root itself) */
-  .fl-row {
+  .fl-row,
+  .fl-pin {
     --fl-indent: 16px;
     --fl-row-h: 56px;
     --fl-cols: 44px minmax(0, 1fr) auto;
@@ -1221,6 +1344,7 @@
 
   .fl-arrow,
   .fl-arrow-placeholder,
+  .fl-pin-arrow,
   .fl-count {
     display: none;
   }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "vitepress-plugin-filelist",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "packageManager": "pnpm@11.25.0",
   "type": "module",
   "description": "OpenList file browser for VitePress: tree view, batch ZIP download, i18n, password and token support.",
   "author": "nrjycyd",
   "license": "MIT",
-  "homepage": "https://github.com/nrjycyd/vitepress-plugin-filelist#readme",
+  "homepage": "https://nrjycyd.github.io/vitepress-plugin-filelist/",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nrjycyd/vitepress-plugin-filelist.git"