vitepress-plugin-filelist 0.7.2 → 0.9.0

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

@@ -6,8 +6,6 @@ interface FileListLabels {
   filter: string;
   refresh: string;
   batch: string;
-  /** @deprecated No longer shown; the selection count lives in the toolbar. */
-  batchCount: string;
   batching: string;
   passwordPrompt: string;
   passwordPlaceholder: string;
@@ -27,15 +25,11 @@ interface FileListLabels {
   download: string;
   loaded: string;
   selected: string;
-  /** @deprecated No longer shown; the footer only shows loaded files and size. */
-  unloaded: string;
   folderFailed: string;
   demoDownload: string;
   demoPreview: string;
   demoBatch: string;
   downloadFailed: string;
-  /** @deprecated Preview errors are shown in the dialog (`previewUnavailable`). */
-  previewFailed: string;
   batchFailed: string;
   defaultZip: string;
   /** Text button that clears the selection (wide layout). */
@@ -90,8 +84,6 @@ interface FileListLabels {
   forgetPassword: string;
   /** Lock button on a folder that needs a password. `{name}` */
   unlockFolder: string;
-  /** @deprecated Network failures now append `corsHint`. */
-  networkHint: string;
   /** Deep search: the row at the end of a filtered list. `{count}` where noted */
   deepHint: string;
   deepSearch: string;
@@ -136,12 +128,23 @@ 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;
-  showMore: 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;
   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 +177,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;
@@ -203,17 +206,6 @@ interface FileListProps {
   /** Per-key label overrides on top of the locale preset. */
   labels?: Partial<FileListLabels>;
 }
-/** Shape of one entry returned by `POST /api/fs/list`. */
-interface OpenListEntry {
-  name: string;
-  size: number;
-  is_dir: boolean;
-  modified: string;
-  created?: string;
-  sign?: string;
-  thumb?: string;
-  type?: number;
-}
 declare const _default: import("vue").DefineComponent<FileListProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FileListProps> & Readonly<{}>, {
   base: string;
   path: string;
@@ -305,66 +297,6 @@ declare global {
 export declare const fileListLocales: Record<FileListLocale, FileListLabels>;
 export declare function formatLabel(template: string, values?: Record<string, string | number>): string;
 export declare function resolveLabels(locale?: FileListLocale, overrides?: Partial<FileListLabels>): FileListLabels;
-interface SortableNode {
-  name: string;
-  size: number;
-  is_dir: boolean;
-  modified: string;
-}
-type SortKey = 'name' | 'size' | 'modified';
-export declare function joinPath(parent: string, name: string): string;
-export declare function encodePath(path: string): string;
-/**
- * Make one path segment safe as a ZIP entry segment: no separators,
- * no `.` / `..` traversal, no empty names.
- */
-export declare function zipSegment(name: string): string;
-/** Join path segments into a ZIP entry name, sanitising each segment. */
-export declare function zipEntryName(segments: string[]): string;
-/**
- * Return `name`, or `name (2)`, `name (3)`... when it is already in `used`.
- * The suffix goes before the extension of the last segment. Adds the result to `used`.
- */
-export declare function uniqueEntryName(name: string, used: Set<string>): string;
-/** Human-readable size. `0` reads `0 B`; missing, negative or invalid sizes read `-`. */
-export declare function formatSize(size: number): string;
-export declare function formatDate(iso: string): string;
-/** Upper-case extension for the type badge, e.g. `PDF`. */
-export declare function extOf(name: string): string;
-type FileKind = 'doc' | 'sheet' | 'slide' | 'pdf' | 'image' | 'media' | 'archive' | 'code' | 'other';
-type PreviewKind = 'image' | 'video' | 'audio' | 'text' | 'pdf' | 'none';
-/** Rough file family, used to colour the type badge. */
-export declare function fileKind(name: string): FileKind;
-/**
- * How a file is shown in the preview dialog. Office documents and anything
- * else the browser cannot render are `none` (info + download).
- */
-export declare function previewKind(name: string): PreviewKind;
-/** Sum of the `size` of the given entries, ignoring missing or invalid sizes. */
-export declare function totalSize(items: Array<{
-  size?: number;
-}>): number;
-export declare function compareNodes(a: SortableNode, b: SortableNode, key: SortKey, ascending?: boolean, locale?: string): number;
-interface IframePreview {
-  label: string;
-  scheme: string;
-}
-/**
- * Viewers from OpenList's public `iframe_previews` setting that match a file,
- * in the order OpenList lists them. Keys are comma-separated extensions or a
- * `/regex/flags` tested against the extension, as in OpenList's frontend.
- */
-export declare function iframePreviewsFor(name: string, setting: string | undefined): IframePreview[];
-/**
- * Fill an OpenList preview scheme: `$name`, `$url` (raw URL) and `$durl`
- * (signed download URL), each optionally prefixed with `e` (URI-encode) or
- * `b` (base64), e.g. `$e_url`, `$b_url`, `$e_durl`.
- */
-export declare function fillPreviewUrl(scheme: string, args: {
-  name: string;
-  rawUrl: string;
-  downloadUrl: string;
-}): string;
 /**
  * Register `<FileList>` and `<VPFileList>` globally.
  *
@@ -382,4 +314,4 @@ export declare function fillPreviewUrl(scheme: string, args: {
  * ```
  */
 export declare function enhanceAppWithFileList({ app }: EnhanceAppContext): void;
-export { type FileKind, _default as FileList, _default as VPFileList, type FileListLabels, type FileListLocale, type FileListProps, type FileListSource, type IframePreview, type OpenListEntry, type PreviewKind, type SortKey, type SortableNode };
+export { _default as FileList, _default as VPFileList, type FileListLabels, type FileListLocale, type FileListProps, type FileListSource };

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,46 @@ 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/devWarnings.ts
+const SECURITY_DOC = "https://nrjycyd.github.io/vitepress-plugin-filelist/guide/security";
+/** Props a page wrote that end up, readable by anyone, in the built site. */
+function publicSecrets(props) {
+	const found = [];
+	if (props.token) found.push("token");
+	if (props.password || props.sources?.some((source) => source.password)) found.push("password");
+	return found;
+}
+/**
+* Development builds only. The site's Vite replaces `import.meta.env` in
+* dependencies too (`DEV` is true under `vitepress dev`, false in a build);
+* without a bundler there is no `env` and this is not a development build.
+*/
+function isDevBuild() {
+	return import.meta.env?.DEV === true;
+}
+let warned = false;
+/**
+* While the site runs in development, say once per page load that `token` and
+* `password` written in Markdown are public. Production builds stay silent.
+* Returns whether it warned.
+*/
+function warnPublicSecrets(props, locale, dev = isDevBuild()) {
+	if (warned || !dev) return false;
+	const found = publicSecrets(props);
+	if (!found.length) return false;
+	warned = true;
+	const names = found.join(" / ");
+	console.warn(locale === "en-US" ? `[vitepress-plugin-filelist] This page sets ${names} on <FileList>. It is copied as is into the built site, where every visitor can read it. Prefer a guest account limited to a base path. ${SECURITY_DOC} (shown in development only)` : `[vitepress-plugin-filelist] 本页的 <FileList> 写了 ${names}：它会原样进入构建后的网页，所有访客都能看到。建议改用限定基础路径的 guest 账户。${SECURITY_DOC}（仅开发时提示）`);
+	return true;
+}
 // src/client/ConfirmDialog.vue
 const _sfc_main$3 = /*@__PURE__*/ defineComponent({
 	__name: "ConfirmDialog",
@@ -754,6 +862,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: [
@@ -813,7 +929,6 @@ const fileListLocales = {
 		filter: "筛选文件名",
 		refresh: "刷新",
 		batch: "下载 ZIP",
-		batchCount: "批量下载（{count}）",
 		batching: "打包中 {percent}%",
 		passwordPrompt: "该目录受密码保护：",
 		passwordPlaceholder: "输入密码",
@@ -831,13 +946,11 @@ const fileListLocales = {
 		download: "下载",
 		loaded: "{count} 个已加载文件",
 		selected: "已选 {count} 项",
-		unloaded: "{count} 个目录未展开，未计入全选",
 		folderFailed: "打开文件夹失败：{message}",
 		demoDownload: "演示模式：接入 OpenList 后会下载「{name}」",
 		demoPreview: "演示模式：接入 OpenList 后可预览「{name}」",
 		demoBatch: "演示模式：将打包已勾选的 {count} 个文件",
 		downloadFailed: "下载失败：{message}",
-		previewFailed: "预览失败：{message}",
 		batchFailed: "打包失败：{message}",
 		defaultZip: "资源",
 		clear: "清除",
@@ -868,7 +981,6 @@ const fileListLocales = {
 		remembered: "已记住",
 		forgetPassword: "忘记",
 		unlockFolder: "输入 {name} 的密码",
-		networkHint: "可能被跨域拦截：请检查 OpenList 的 cors.allow_origins，或 OpenList-Worker 的 ALLOW_URLS。",
 		deepHint: "只筛选了已加载的内容，",
 		deepSearch: "尝试深度搜索",
 		deepRunning: "正在深度搜索 · 已查找 {count} 个文件夹",
@@ -899,9 +1011,14 @@ const fileListLocales = {
 		zipBlockText: "当前浏览器一次最多打包 {limit}，请分批勾选下载。",
 		gotIt: "知道了",
 		moreRemaining: "还有 {count} 项",
-		showMore: "显示更多",
 		showAll: "全部显示",
-		showRest: "显示剩余 {count} 项"
+		showRest: "显示剩余 {count} 项",
+		showLess: "收起",
+		allShown: "已显示全部 {count} 项",
+		moreShown: "已显示 {shown} / {total} 项",
+		showAllShort: "全部",
+		showNext: "再显示 {count} 项",
+		showNextShort: "+{count}"
 	},
 	"en-US": {
 		allFiles: "All files",
@@ -909,7 +1026,6 @@ const fileListLocales = {
 		filter: "Filter files",
 		refresh: "Refresh",
 		batch: "Download ZIP",
-		batchCount: "Download ZIP ({count})",
 		batching: "Zipping {percent}%",
 		passwordPrompt: "This folder is password protected:",
 		passwordPlaceholder: "Folder password",
@@ -927,13 +1043,11 @@ const fileListLocales = {
 		download: "Download",
 		loaded: "{count} loaded file(s)",
 		selected: "{count} selected",
-		unloaded: "{count} folder(s) not expanded, excluded from select-all",
 		folderFailed: "Failed to open folder: {message}",
 		demoDownload: "Demo mode: \"{name}\" will download once OpenList is connected.",
 		demoPreview: "Demo mode: \"{name}\" will preview once OpenList is connected.",
 		demoBatch: "Demo mode: {count} selected file(s) would be zipped.",
 		downloadFailed: "Download failed: {message}",
-		previewFailed: "Preview failed: {message}",
 		batchFailed: "Failed to create ZIP: {message}",
 		defaultZip: "resources",
 		clear: "Clear",
@@ -964,7 +1078,6 @@ const fileListLocales = {
 		remembered: "Remembered",
 		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: "Try deep search",
 		deepRunning: "Searching · {count} folders checked",
@@ -995,9 +1108,14 @@ const fileListLocales = {
 		zipBlockText: "This browser can zip at most {limit} at once. Select fewer files.",
 		gotIt: "OK",
 		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 +1683,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 +1949,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 +1980,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 +2230,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 +2334,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);
@@ -2195,15 +2378,21 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			stickyTop.value = top;
 		}
 		onMounted(() => {
+			warnPublicSecrets(props, props.locale);
 			passwords.sync();
 			loadRoot();
 			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 +2476,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 +2530,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 +2542,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 +2675,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,
@@ -2502,4 +2714,4 @@ function enhanceAppWithFileList({ app }) {
 	if (!app._context.components.FileList) app.component("FileList", _sfc_main);
 	if (!app._context.components.VPFileList) app.component("VPFileList", _sfc_main);
 }
-export { _sfc_main as FileList, _sfc_main as VPFileList, compareNodes, encodePath, enhanceAppWithFileList, extOf, fileKind, fileListLocales, fillPreviewUrl, formatDate, formatLabel, formatSize, iframePreviewsFor, joinPath, previewKind, resolveLabels, totalSize, uniqueEntryName, zipEntryName, zipSegment };
+export { _sfc_main as FileList, _sfc_main as VPFileList, enhanceAppWithFileList, fileListLocales, formatLabel, resolveLabels };