vitepress-plugin-filelist 0.5.1 → 0.6.0

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

@@ -92,6 +92,29 @@ interface FileListLabels {
   unlockFolder: string;
   /** @deprecated Network failures now append `corsHint`. */
   networkHint: string;
+  /** Batch progress detail. `{done}` `{total}` sizes, `{files}` `{count}` file counts */
+  batchProgress: string;
+  /** Batch finished. `{name}` `{count}` `{size}` */
+  batchDone: string;
+  batchCanceled: string;
+  /** In-memory ZIP over `zipWarnSize`. `{size}` */
+  zipWarnTitle: string;
+  /** `{limit}` */
+  zipWarnText: string;
+  /** Desktop browsers that cannot stream: point to one that can. */
+  zipStreamTip: string;
+  zipContinue: string;
+  /** In-memory ZIP over `zipMaxSize`. `{size}` */
+  zipBlockTitle: string;
+  /** `{limit}` */
+  zipBlockText: string;
+  gotIt: string;
+  /** Last row of a long folder. `{count}` */
+  moreRemaining: string;
+  showMore: string;
+  showAll: string;
+  /** Fewer than a page left. `{count}` */
+  showRest: string;
 }
 interface FileListSource {
   /** OpenList path, directory or single file. */
@@ -123,6 +146,21 @@ interface FileListProps {
    * cleared when the tab closes). Defaults to `true`; `false` hides the option.
    */
   rememberPassword?: boolean;
+  /**
+   * Rows shown per folder before “Show more”. Defaults to `200`; `0` shows
+   * everything. Data is still loaded in full; only rendering is limited.
+   */
+  pageSize?: number;
+  /**
+   * Browsers that must build the ZIP in memory (Firefox, Safari) ask first above
+   * this many MB. Defaults to 500 (200 on touch devices); `0` never asks.
+   */
+  zipWarnSize?: number;
+  /**
+   * …and refuse above this many MB. Defaults to 2048 (1024 on touch devices);
+   * `0` means no limit. Chrome and Edge stream to disk and skip both checks.
+   */
+  zipMaxSize?: number;
   /** Built-in locale. Defaults to `zh-CN`. */
   locale?: FileListLocale;
   /** Per-key label overrides on top of the locale preset. */
@@ -148,6 +186,7 @@ declare const _default: import("vue").DefineComponent<FileListProps, {}, {}, {},
   password: string;
   title: string;
   rememberPassword: boolean;
+  pageSize: number;
   locale: FileListLocale;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare global {

package/dist/client/ssr/index.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, mergeProps, nextTick, onBeforeUnmount, onMounted, ref, unref, useId, useSSRContext, watch } from "vue";
+import { computed, defineComponent, mergeProps, nextTick, onBeforeUnmount, onMounted, reactive, ref, unref, useId, useSSRContext, watch } from "vue";
 import { ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderList, ssrRenderStyle } from "vue/server-renderer";
 // src/client/utils.ts
 function joinPath(parent, name) {
@@ -520,6 +520,60 @@ function createDemoApi(delay = 220) {
 		clearCache: () => {}
 	};
 }
+// src/client/ConfirmDialog.vue
+const _sfc_main$3 = /*@__PURE__*/ defineComponent({
+	__name: "ConfirmDialog",
+	__ssrInlineRender: true,
+	props: {
+		open: { type: Boolean },
+		title: {},
+		text: {},
+		tip: {},
+		confirmLabel: {},
+		cancelLabel: {}
+	},
+	emits: ["confirm", "close"],
+	setup(__props, { emit: __emit }) {
+		/** Small native <dialog> for a yes / no question or a notice (bottom sheet on phones). */
+		const props = __props;
+		const dialog = ref();
+		watch(() => props.open, (open) => {
+			const el = dialog.value;
+			if (!el) return;
+			if (open && !el.open) {
+				if (typeof el.showModal === "function") el.showModal();
+				else el.setAttribute("open", "");
+			} else if (!open && el.open) {
+				if (typeof el.close === "function") el.close();
+				else el.removeAttribute("open");
+			}
+		}, { flush: "post" });
+		return (_ctx, _push, _parent, _attrs) => {
+			_push(`<dialog${ssrRenderAttrs(mergeProps({
+				ref_key: "dialog",
+				ref: dialog,
+				class: "fl-confirm",
+				"aria-label": __props.title
+			}, _attrs))}>`);
+			if (__props.open) {
+				_push(`<div class="fl-confirm-panel"><p class="fl-confirm-title">${ssrInterpolate(__props.title)}</p><p class="fl-confirm-text">${ssrInterpolate(__props.text)}</p>`);
+				if (__props.tip) _push(`<p class="fl-confirm-text">${ssrInterpolate(__props.tip)}</p>`);
+				else _push(`<!---->`);
+				_push(`<div class="fl-confirm-actions">`);
+				if (__props.confirmLabel) _push(`<button class="fl-btn" type="button">${ssrInterpolate(__props.cancelLabel)}</button>`);
+				else _push(`<!---->`);
+				_push(`<button class="fl-btn fl-btn-primary" type="button" autofocus>${ssrInterpolate(__props.confirmLabel || __props.cancelLabel)}</button></div></div>`);
+			} else _push(`<!---->`);
+			_push(`</dialog>`);
+		};
+	}
+});
+const _sfc_setup$3 = _sfc_main$3.setup;
+_sfc_main$3.setup = (props, ctx) => {
+	const ssrContext = useSSRContext();
+	(ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("src/client/ConfirmDialog.vue");
+	return _sfc_setup$3 ? _sfc_setup$3(props, ctx) : void 0;
+};
 // src/client/download.ts
 /** Open a file URL; OpenList serves `/p/` and `/d/` as attachments, so this downloads. */
 function openUrl(url) {
@@ -531,6 +585,80 @@ function openUrl(url) {
 	anchor.click();
 	anchor.remove();
 }
+function saveBlob(blob, name) {
+	const href = URL.createObjectURL(blob);
+	const anchor = document.createElement("a");
+	anchor.href = href;
+	anchor.download = name;
+	document.body.appendChild(anchor);
+	anchor.click();
+	anchor.remove();
+	setTimeout(() => URL.revokeObjectURL(href), 3e4);
+}
+/** File-system-safe ZIP name from a title. */
+function zipFileName(title) {
+	return `${title.replace(/[\\/:*?"<>|]/g, "_")}.zip`;
+}
+/**
+* The ZIP as a stream: files are fetched one after another and passed through
+* as they arrive, stored without compression (most shared files are already
+* compressed). Clashing entry names get ` (2)`, ` (3)`...
+*/
+async function zipStream(files, options) {
+	const { makeZip } = await import("client-zip");
+	const progress = {
+		bytes: 0,
+		totalBytes: files.reduce((sum, file) => sum + (Number.isFinite(file.size) ? file.size : 0), 0),
+		files: 0,
+		totalFiles: files.length
+	};
+	const report = () => options.onProgress({ ...progress });
+	report();
+	async function* entries() {
+		const used = /* @__PURE__ */ new Set();
+		for (const file of files) {
+			const response = await fetch(await options.urlOf(file), { signal: options.signal });
+			if (!response.ok || !response.body) throw new Error(`${file.name}：HTTP ${response.status}`);
+			const counted = response.body.pipeThrough(new TransformStream({
+				transform(chunk, controller) {
+					progress.bytes += chunk.byteLength;
+					report();
+					controller.enqueue(chunk);
+				},
+				flush() {
+					progress.files += 1;
+					report();
+				}
+			}));
+			const modified = new Date(file.modified);
+			yield {
+				name: uniqueEntryName(zipEntryName(file.zipPath), used),
+				lastModified: Number.isNaN(modified.getTime()) ? void 0 : modified,
+				input: counted
+			};
+		}
+	}
+	return makeZip(entries());
+}
+/** Build the ZIP in memory (browsers without file streaming). */
+async function zipToBlob(files, options) {
+	const reader = (await zipStream(files, options)).getReader();
+	const chunks = [];
+	const abort = () => void reader.cancel(options.signal.reason).catch(() => {});
+	options.signal.addEventListener("abort", abort, { once: true });
+	if (options.signal.aborted) abort();
+	try {
+		for (;;) {
+			const { done, value } = await reader.read();
+			if (done) break;
+			chunks.push(value);
+		}
+	} finally {
+		options.signal.removeEventListener("abort", abort);
+	}
+	options.signal.throwIfAborted();
+	return new Blob(chunks, { type: "application/zip" });
+}
 // src/client/icons.ts
 /** Stroke icons on a 24×24 grid, drawn by `Icon.vue`. */
 const ICONS = {
@@ -692,7 +820,21 @@ const fileListLocales = {
 		remembered: "已记住",
 		forgetPassword: "忘记",
 		unlockFolder: "输入 {name} 的密码",
-		networkHint: "可能被跨域拦截：请检查 OpenList 的 cors.allow_origins，或 OpenList-Worker 的 ALLOW_URLS。"
+		networkHint: "可能被跨域拦截：请检查 OpenList 的 cors.allow_origins，或 OpenList-Worker 的 ALLOW_URLS。",
+		batchProgress: "{done} / {total} · {files} / {count} 个文件",
+		batchDone: "已打包 {name}（{count} 个文件，{size}）",
+		batchCanceled: "已取消下载",
+		zipWarnTitle: "文件较大（{size}）",
+		zipWarnText: "当前浏览器要先把文件全部放进内存再打包，超过 {limit} 可能失败或让页面崩溃。建议分批下载。",
+		zipStreamTip: "在 Chrome 或 Edge 中可以边下载边保存，不受大小限制。",
+		zipContinue: "仍然下载",
+		zipBlockTitle: "无法打包 {size}",
+		zipBlockText: "当前浏览器一次最多打包 {limit}，请分批勾选下载。",
+		gotIt: "知道了",
+		moreRemaining: "还有 {count} 项",
+		showMore: "显示更多",
+		showAll: "全部显示",
+		showRest: "显示剩余 {count} 项"
 	},
 	"en-US": {
 		allFiles: "All files",
@@ -755,7 +897,21 @@ 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."
+		networkHint: "Possibly blocked by CORS: check cors.allow_origins in OpenList, or ALLOW_URLS in OpenList-Worker.",
+		batchProgress: "{done} / {total} · {files} / {count} files",
+		batchDone: "Saved {name} ({count} files, {size})",
+		batchCanceled: "Download cancelled",
+		zipWarnTitle: "Large download ({size})",
+		zipWarnText: "This browser has to hold every file in memory to build the ZIP. Above {limit} it may fail or crash the page. Consider downloading in smaller batches.",
+		zipStreamTip: "Chrome and Edge save while downloading, with no size limit.",
+		zipContinue: "Download anyway",
+		zipBlockTitle: "Cannot zip {size}",
+		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}"
 	}
 };
 function formatLabel(template, values = {}) {
@@ -1242,6 +1398,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		pageSize: { default: 200 },
+		zipWarnSize: {},
+		zipMaxSize: {},
 		locale: { default: "zh-CN" },
 		labels: {}
 	},
@@ -1284,7 +1443,8 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const siteTitle = ref("");
 		const iframePreviews = ref("");
 		const batchBusy = ref(false);
-		const batchProgress = ref(0);
+		const zipProgress = ref(null);
+		let zipAbort = null;
 		let toastTimer;
 		/** The folder listed in single-path mode, as the parent of the top rows. */
 		const listedFolder = computed(() => ({
@@ -1444,6 +1604,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			errorMsg.value = "";
 			try {
 				roots.value = await buildTree();
+				shown.clear();
 				rootLock.value = null;
 				selected.value = /* @__PURE__ */ new Set();
 				api.value.clearCache();
@@ -1482,20 +1643,37 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				applySort(key, direction !== "desc");
 			}
 		});
-		const visible = computed(() => {
+		/** A “show more” row closing a folder whose children are cut at `pageSize`. */
+		const shown = reactive(/* @__PURE__ */ new Map());
+		function limitOf(key) {
+			const size = Math.max(0, Math.floor(props.pageSize ?? 200));
+			return size ? shown.get(key) ?? size : Number.POSITIVE_INFINITY;
+		}
+		function isMore(row) {
+			return "more" in row;
+		}
+		const rows = computed(() => {
 			const out = [];
 			const query = keyword.value.trim().toLowerCase();
 			const matches = (node) => !query || node.name.toLowerCase().includes(query) || node.is_dir && node.children.some(matches);
-			const walk = (nodes) => {
-				for (const node of nodes) {
-					if (!matches(node)) continue;
+			const walk = (nodes, key, depth) => {
+				const list = nodes.filter(matches);
+				const limit = query ? list.length : Math.min(list.length, limitOf(key));
+				for (const node of list.slice(0, limit)) {
 					out.push(node);
-					if (node.is_dir && (node.expanded || query) && node.children.length) walk(node.children);
+					if (node.is_dir && (node.expanded || query) && node.children.length) walk(node.children, node.path, node.depth + 1);
 				}
+				if (limit < list.length) out.push({
+					more: true,
+					key,
+					depth,
+					remaining: list.length - limit
+				});
 			};
-			walk(roots.value);
+			walk(roots.value, props.sources.length ? "" : props.path, 0);
 			return out;
 		});
+		const visible = computed(() => rows.value.filter((row) => !isMore(row)));
 		const stats = computed(() => folderStats(roots.value, selected.value));
 		const noStats = {
 			files: 0,
@@ -1534,6 +1712,52 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				showToast(t("downloadFailed", { message: errorText(error) }));
 			}
 		}
+		const zipNotice = ref(null);
+		/** Only desktop browsers get “use Chrome or Edge”; on iPhone every browser is Safari. */
+		const zipTip = computed(() => typeof window !== "undefined" && !window.matchMedia?.("(pointer: coarse)").matches ? t("zipStreamTip") : "");
+		function zipName() {
+			return zipFileName(props.title || t("defaultZip"));
+		}
+		async function zipInMemory(files) {
+			const name = zipName();
+			await runZip(files, async (options) => saveBlob(await zipToBlob(files, options), name), name);
+		}
+		function confirmZip() {
+			const notice = zipNotice.value;
+			zipNotice.value = null;
+			if (notice?.kind === "warn") zipInMemory(notice.files);
+		}
+		async function runZip(files, run, name) {
+			const controller = new AbortController();
+			zipAbort = controller;
+			batchBusy.value = true;
+			zipProgress.value = null;
+			try {
+				await run({
+					urlOf: fileUrlOf,
+					signal: controller.signal,
+					onProgress: (progress) => zipProgress.value = progress
+				});
+				showToast(t("batchDone", {
+					name,
+					count: files.length,
+					size: formatSize(totalSize(files))
+				}));
+				selected.value = /* @__PURE__ */ new Set();
+			} catch (error) {
+				showToast(controller.signal.aborted ? t("batchCanceled") : t("batchFailed", { message: errorText(error) }));
+			} finally {
+				zipAbort = null;
+				batchBusy.value = false;
+				zipProgress.value = null;
+			}
+		}
+		const zipPercent = computed(() => {
+			const progress = zipProgress.value;
+			if (!progress) return 0;
+			const ratio = progress.totalBytes ? progress.bytes / progress.totalBytes : progress.totalFiles ? progress.files / progress.totalFiles : 0;
+			return Math.min(100, Math.floor(ratio * 100));
+		});
 		/** Only types the dialog can actually render get a preview button. */
 		function canPreview(node) {
 			return !node.is_dir && previewKind(node.name) !== "none";
@@ -1605,6 +1829,7 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			window.addEventListener("resize", measureStickyTop, { passive: true });
 		});
 		onBeforeUnmount(() => {
+			zipAbort?.abort();
 			window.removeEventListener("resize", measureStickyTop);
 			clearTimeout(toastTimer);
 		});
@@ -1619,14 +1844,24 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				style: { "--fl-sticky-top-auto": `${stickyTop.value}px` },
 				"aria-busy": refreshing.value || loadingRoot.value
 			}, _attrs))}><div class="fl-bar">`);
-			if (selected.value.size) _push(`<div class="fl-selection" role="status"><span class="fl-selection-count">${ssrInterpolate(t("selected", { count: selected.value.size }))}</span><span class="fl-selection-size">${ssrInterpolate(t("totalSize", { size: unref(formatSize)(unref(totalSize)(selectedFiles.value)) }))}</span></div>`);
+			if (batchBusy.value) {
+				_push(`<div class="fl-selection" role="status"><span class="fl-selection-count">${ssrInterpolate(t("batching", { percent: zipPercent.value }))}</span>`);
+				if (zipProgress.value) _push(`<span class="fl-selection-size">${ssrInterpolate(t("batchProgress", {
+					done: unref(formatSize)(zipProgress.value.bytes),
+					total: unref(formatSize)(zipProgress.value.totalBytes),
+					files: zipProgress.value.files,
+					count: zipProgress.value.totalFiles
+				}))}</span>`);
+				else _push(`<!---->`);
+				_push(`<span class="fl-zip-bar" style="${ssrRenderStyle({ width: `${zipPercent.value}%` })}" aria-hidden="true"></span></div>`);
+			} else if (selected.value.size) _push(`<div class="fl-selection" role="status"><span class="fl-selection-count">${ssrInterpolate(t("selected", { count: selected.value.size }))}</span><span class="fl-selection-size">${ssrInterpolate(t("totalSize", { size: unref(formatSize)(unref(totalSize)(selectedFiles.value)) }))}</span></div>`);
 			else {
 				_push(`<div class="fl-title"><span class="fl-title-text">${ssrInterpolate(displayTitle.value)}</span>`);
 				if (demo.value) _push(`<span class="fl-demo-badge">${ssrInterpolate(t("demoBadge"))}</span>`);
 				else _push(`<!---->`);
 				_push(`</div>`);
 			}
-			if (selected.value.size) {
+			if (selected.value.size && !batchBusy.value) {
 				_push(`<button class="fl-clear" type="button"${ssrRenderAttr("aria-label", t("clearSelection"))}${ssrRenderAttr("title", t("clearSelection"))}>`);
 				_push(ssrRenderComponent(_sfc_main$2, {
 					class: "fl-clear-icon",
@@ -1646,18 +1881,19 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				size: 15
 			}, null, _parent));
 			_push(`</button></div>`);
-			if (selected.value.size) {
-				_push(`<button class="fl-btn fl-btn-primary" type="button"${ssrIncludeBooleanAttr(batchBusy.value) ? " disabled" : ""}>`);
+			if (batchBusy.value) _push(`<button class="fl-btn fl-zip-cancel" type="button">${ssrInterpolate(t("cancel"))}</button>`);
+			else if (selected.value.size) {
+				_push(`<button class="fl-btn fl-btn-primary" type="button">`);
 				_push(ssrRenderComponent(_sfc_main$2, {
 					name: "download",
 					size: 15
 				}, null, _parent));
-				_push(` ${ssrInterpolate(batchBusy.value ? t("batching", { percent: batchProgress.value }) : t("batch"))}</button>`);
+				_push(` ${ssrInterpolate(t("batch"))}</button>`);
 			} else _push(`<!---->`);
 			_push(`</div><div class="fl-row fl-head">`);
 			if (refreshing.value) _push(`<span class="fl-progress" aria-hidden="true"></span>`);
 			else _push(`<!---->`);
-			_push(`<label class="fl-cell fl-cell-check"><input type="checkbox"${ssrRenderAttr("aria-label", t("selectAll"))}${ssrIncludeBooleanAttr(allChecked.value) ? " checked" : ""}${ssrRenderAttr("indeterminate", someChecked.value)}></label><!--[-->`);
+			_push(`<label class="fl-cell fl-cell-check"><input type="checkbox"${ssrRenderAttr("aria-label", t("selectAll"))}${ssrIncludeBooleanAttr(batchBusy.value) ? " disabled" : ""}${ssrIncludeBooleanAttr(allChecked.value) ? " checked" : ""}${ssrRenderAttr("indeterminate", someChecked.value)}></label><!--[-->`);
 			ssrRenderList([
 				"name",
 				"size",
@@ -1697,105 +1933,124 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			} else if (visible.value.length === 0) _push(`<div class="fl-status">${ssrInterpolate(t("empty"))}</div>`);
 			else _push(`<!---->`);
 			_push(`<!--[-->`);
-			ssrRenderList(visible.value, (node, index) => {
-				_push(`<div class="${ssrRenderClass([{
-					"fl-row-dir": node.is_dir,
-					"fl-row-root": node.isRoot,
-					"fl-row-selected": !node.is_dir && selected.value.has(node.path),
-					"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) ? " 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, {
-						name: "lock",
-						size: 14
-					}, null, _parent));
-					_push(`</button>`);
-				} else if (node.is_dir) {
-					_push(`<button type="button" class="${ssrRenderClass([{ "fl-arrow-open": node.expanded }, "fl-arrow"])}"${ssrRenderAttr("aria-label", t(node.expanded ? "collapse" : "expand", { name: node.name }))}${ssrRenderAttr("aria-expanded", node.expanded)}>`);
-					_push(ssrRenderComponent(_sfc_main$2, {
-						name: "next",
-						size: 14
-					}, null, _parent));
-					_push(`</button>`);
-				} else _push(`<span class="fl-arrow-placeholder" aria-hidden="true"></span>`);
-				if (node.is_dir) _push(`<svg class="fl-folder-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>`);
-				else _push(`<span class="fl-type"${ssrRenderAttr("data-kind", unref(fileKind)(node.name))} aria-hidden="true">${ssrInterpolate(unref(extOf)(node.name) || "FILE")}</span>`);
-				_push(`<span class="fl-label"><span class="${ssrRenderClass([{ "fl-name-dir": node.is_dir }, "fl-name"])}">${ssrInterpolate(node.name)}</span><span class="fl-meta">`);
-				if (!node.is_dir) _push(`<!--[-->${ssrInterpolate(unref(formatSize)(node.size))} · ${ssrInterpolate(unref(formatDate)(node.modified))}<!--]-->`);
-				else if (node.loaded) _push(`<!--[-->${ssrInterpolate(t("folderItems", { count: statsOf(node).files }))} · ${ssrInterpolate(unref(formatSize)(statsOf(node).bytes))}<!--]-->`);
-				else _push(`<!---->`);
-				_push(`</span></span>`);
-				if (node.is_dir && node.loaded) _push(`<span class="fl-count">${ssrInterpolate(t("folderItems", { count: statsOf(node).files }))}</span>`);
-				else _push(`<!---->`);
-				if (node.lock?.prompting && node.lock.error) _push(`<span${ssrRenderAttr("id", `${unref(uid)}-error-${index}`)} class="fl-unlock-message" role="alert">${ssrInterpolate(unlockErrorText(node.lock.error))}</span>`);
-				else _push(`<!---->`);
-				if (!node.lock && unref(remembered).has(node.path)) {
-					_push(`<button class="fl-remembered" type="button"${ssrRenderAttr("aria-label", `${t("forgetPassword")} ${node.name}`)}${ssrRenderAttr("title", t("forgetPassword"))}>`);
-					_push(ssrRenderComponent(_sfc_main$2, {
-						name: "key",
-						size: 11
-					}, null, _parent));
-					_push(` ${ssrInterpolate(t("remembered"))} · ${ssrInterpolate(t("forgetPassword"))}</button>`);
-				} else _push(`<!---->`);
-				if (node.loading) _push(`<span class="fl-loading" aria-hidden="true">…</span>`);
-				else _push(`<!---->`);
-				_push(`</span>`);
-				if (node.lock?.prompting) {
-					_push(`<form class="fl-unlock fl-unlock-row">`);
-					_push(ssrRenderComponent(_sfc_main$2, {
-						class: "fl-unlock-lock",
-						name: "lock",
-						size: 18
-					}, null, _parent));
-					_push(`<input${ssrRenderAttr("value", node.lock.input)} type="password" autocomplete="off"${ssrRenderAttr("data-unlock", node.path)}${ssrRenderAttr("placeholder", node.lock.error ? unlockErrorText(node.lock.error) : t("passwordPlaceholder"))}${ssrRenderAttr("aria-label", t("passwordFor", { name: node.name }))}${ssrRenderAttr("aria-invalid", !!node.lock.error)}${ssrRenderAttr("aria-describedby", node.lock.error ? `${unref(uid)}-error-${index}` : void 0)}>`);
-					if (canRemember.value) {
-						_push(`<button class="fl-unlock-remember" type="button"${ssrRenderAttr("aria-pressed", node.lock.remember)}${ssrRenderAttr("aria-label", t("rememberPassword"))}${ssrRenderAttr("title", t("rememberPassword"))}>`);
-						_push(ssrRenderComponent(_sfc_main$2, { name: "key" }, null, _parent));
-						_push(`</button>`);
-					} else _push(`<!---->`);
-					_push(`<button class="fl-unlock-submit" type="submit"${ssrIncludeBooleanAttr(node.lock.busy || !node.lock.input) ? " disabled" : ""}>${ssrInterpolate(t("open"))}</button><button class="fl-unlock-cancel" type="button"${ssrRenderAttr("aria-label", t("cancel"))}${ssrRenderAttr("title", t("cancel"))}>`);
-					_push(ssrRenderComponent(_sfc_main$2, {
-						name: "close",
-						size: 14
-					}, null, _parent));
-					_push(`</button></form>`);
+			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>`);
 				} else {
-					_push(`<!--[--><span class="fl-cell fl-cell-size">${ssrInterpolate(node.is_dir ? "—" : unref(formatSize)(node.size))}</span><span class="fl-cell fl-cell-date">${ssrInterpolate(unref(formatDate)(node.modified))}</span><span class="fl-cell fl-cell-op">`);
+					_push(`<div class="${ssrRenderClass([{
+						"fl-row-dir": node.is_dir,
+						"fl-row-root": node.isRoot,
+						"fl-row-selected": !node.is_dir && selected.value.has(node.path),
+						"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>`);
 					if (node.lock) {
-						_push(`<button class="fl-action fl-arrow-end fl-lock" type="button"${ssrRenderAttr("aria-label", t("unlockFolder", { name: node.name }))}>`);
+						_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, {
 							name: "lock",
-							size: 18
+							size: 14
 						}, null, _parent));
 						_push(`</button>`);
 					} else if (node.is_dir) {
-						_push(`<button type="button" class="${ssrRenderClass([{ "fl-arrow-open": node.expanded }, "fl-action fl-arrow-end"])}"${ssrRenderAttr("aria-label", t(node.expanded ? "collapse" : "expand", { name: node.name }))}${ssrRenderAttr("aria-expanded", node.expanded)}>`);
+						_push(`<button type="button" class="${ssrRenderClass([{ "fl-arrow-open": node.expanded }, "fl-arrow"])}"${ssrRenderAttr("aria-label", t(node.expanded ? "collapse" : "expand", { name: node.name }))}${ssrRenderAttr("aria-expanded", node.expanded)}>`);
 						_push(ssrRenderComponent(_sfc_main$2, {
 							name: "next",
-							size: 18
+							size: 14
 						}, null, _parent));
 						_push(`</button>`);
-					} else {
-						_push(`<!--[-->`);
-						if (canPreview(node)) {
-							_push(`<button class="fl-action fl-preview-btn" type="button"${ssrRenderAttr("aria-label", `${t("preview")} ${node.name}`)}${ssrRenderAttr("title", t("preview"))}>`);
-							_push(ssrRenderComponent(_sfc_main$2, { name: "eye" }, null, _parent));
+					} else _push(`<span class="fl-arrow-placeholder" aria-hidden="true"></span>`);
+					if (node.is_dir) _push(`<svg class="fl-folder-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path></svg>`);
+					else _push(`<span class="fl-type"${ssrRenderAttr("data-kind", unref(fileKind)(node.name))} aria-hidden="true">${ssrInterpolate(unref(extOf)(node.name) || "FILE")}</span>`);
+					_push(`<span class="fl-label"><span class="${ssrRenderClass([{ "fl-name-dir": node.is_dir }, "fl-name"])}">${ssrInterpolate(node.name)}</span><span class="fl-meta">`);
+					if (!node.is_dir) _push(`<!--[-->${ssrInterpolate(unref(formatSize)(node.size))} · ${ssrInterpolate(unref(formatDate)(node.modified))}<!--]-->`);
+					else if (node.loaded) _push(`<!--[-->${ssrInterpolate(t("folderItems", { count: statsOf(node).files }))} · ${ssrInterpolate(unref(formatSize)(statsOf(node).bytes))}<!--]-->`);
+					else _push(`<!---->`);
+					_push(`</span></span>`);
+					if (node.is_dir && node.loaded) _push(`<span class="fl-count">${ssrInterpolate(t("folderItems", { count: statsOf(node).files }))}</span>`);
+					else _push(`<!---->`);
+					if (node.lock?.prompting && node.lock.error) _push(`<span${ssrRenderAttr("id", `${unref(uid)}-error-${index}`)} class="fl-unlock-message" role="alert">${ssrInterpolate(unlockErrorText(node.lock.error))}</span>`);
+					else _push(`<!---->`);
+					if (!node.lock && unref(remembered).has(node.path)) {
+						_push(`<button class="fl-remembered" type="button"${ssrRenderAttr("aria-label", `${t("forgetPassword")} ${node.name}`)}${ssrRenderAttr("title", t("forgetPassword"))}>`);
+						_push(ssrRenderComponent(_sfc_main$2, {
+							name: "key",
+							size: 11
+						}, null, _parent));
+						_push(` ${ssrInterpolate(t("remembered"))} · ${ssrInterpolate(t("forgetPassword"))}</button>`);
+					} else _push(`<!---->`);
+					if (node.loading) _push(`<span class="fl-loading" aria-hidden="true">…</span>`);
+					else _push(`<!---->`);
+					_push(`</span>`);
+					if (node.lock?.prompting) {
+						_push(`<form class="fl-unlock fl-unlock-row">`);
+						_push(ssrRenderComponent(_sfc_main$2, {
+							class: "fl-unlock-lock",
+							name: "lock",
+							size: 18
+						}, null, _parent));
+						_push(`<input${ssrRenderAttr("value", node.lock.input)} type="password" autocomplete="off"${ssrRenderAttr("data-unlock", node.path)}${ssrRenderAttr("placeholder", node.lock.error ? unlockErrorText(node.lock.error) : t("passwordPlaceholder"))}${ssrRenderAttr("aria-label", t("passwordFor", { name: node.name }))}${ssrRenderAttr("aria-invalid", !!node.lock.error)}${ssrRenderAttr("aria-describedby", node.lock.error ? `${unref(uid)}-error-${index}` : void 0)}>`);
+						if (canRemember.value) {
+							_push(`<button class="fl-unlock-remember" type="button"${ssrRenderAttr("aria-pressed", node.lock.remember)}${ssrRenderAttr("aria-label", t("rememberPassword"))}${ssrRenderAttr("title", t("rememberPassword"))}>`);
+							_push(ssrRenderComponent(_sfc_main$2, { name: "key" }, null, _parent));
 							_push(`</button>`);
 						} else _push(`<!---->`);
-						_push(`<button class="fl-action fl-download" type="button"${ssrRenderAttr("aria-label", `${t("download")} ${node.name}`)}${ssrRenderAttr("title", t("download"))}>`);
-						_push(ssrRenderComponent(_sfc_main$2, { name: "download" }, null, _parent));
-						_push(`</button><!--]-->`);
+						_push(`<button class="fl-unlock-submit" type="submit"${ssrIncludeBooleanAttr(node.lock.busy || !node.lock.input) ? " disabled" : ""}>${ssrInterpolate(t("open"))}</button><button class="fl-unlock-cancel" type="button"${ssrRenderAttr("aria-label", t("cancel"))}${ssrRenderAttr("title", t("cancel"))}>`);
+						_push(ssrRenderComponent(_sfc_main$2, {
+							name: "close",
+							size: 14
+						}, null, _parent));
+						_push(`</button></form>`);
+					} else {
+						_push(`<!--[--><span class="fl-cell fl-cell-size">${ssrInterpolate(node.is_dir ? "—" : unref(formatSize)(node.size))}</span><span class="fl-cell fl-cell-date">${ssrInterpolate(unref(formatDate)(node.modified))}</span><span class="fl-cell fl-cell-op">`);
+						if (node.lock) {
+							_push(`<button class="fl-action fl-arrow-end fl-lock" type="button"${ssrRenderAttr("aria-label", t("unlockFolder", { name: node.name }))}>`);
+							_push(ssrRenderComponent(_sfc_main$2, {
+								name: "lock",
+								size: 18
+							}, null, _parent));
+							_push(`</button>`);
+						} else if (node.is_dir) {
+							_push(`<button type="button" class="${ssrRenderClass([{ "fl-arrow-open": node.expanded }, "fl-action fl-arrow-end"])}"${ssrRenderAttr("aria-label", t(node.expanded ? "collapse" : "expand", { name: node.name }))}${ssrRenderAttr("aria-expanded", node.expanded)}>`);
+							_push(ssrRenderComponent(_sfc_main$2, {
+								name: "next",
+								size: 18
+							}, null, _parent));
+							_push(`</button>`);
+						} else {
+							_push(`<!--[-->`);
+							if (canPreview(node)) {
+								_push(`<button class="fl-action fl-preview-btn" type="button"${ssrRenderAttr("aria-label", `${t("preview")} ${node.name}`)}${ssrRenderAttr("title", t("preview"))}>`);
+								_push(ssrRenderComponent(_sfc_main$2, { name: "eye" }, null, _parent));
+								_push(`</button>`);
+							} else _push(`<!---->`);
+							_push(`<button class="fl-action fl-download" type="button"${ssrRenderAttr("aria-label", `${t("download")} ${node.name}`)}${ssrRenderAttr("title", t("download"))}>`);
+							_push(ssrRenderComponent(_sfc_main$2, { name: "download" }, null, _parent));
+							_push(`</button><!--]-->`);
+						}
+						_push(`</span><!--]-->`);
 					}
-					_push(`</span><!--]-->`);
+					_push(`</div>`);
 				}
-				_push(`</div>`);
+				_push(`<!--]-->`);
 			});
 			_push(`<!--]--><div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("totalSize", { size: unref(formatSize)(unref(totalSize)(allFiles.value)) }))}</span></div>`);
 			if (toast.value) _push(`<div class="fl-toast" role="status">${ssrInterpolate(toast.value)}</div>`);
 			else _push(`<!---->`);
+			_push(ssrRenderComponent(_sfc_main$3, {
+				open: !!zipNotice.value,
+				title: zipNotice.value ? t(zipNotice.value.kind === "warn" ? "zipWarnTitle" : "zipBlockTitle", { size: unref(formatSize)(zipNotice.value.size) }) : "",
+				text: zipNotice.value ? t(zipNotice.value.kind === "warn" ? "zipWarnText" : "zipBlockText", { limit: unref(formatSize)(zipNotice.value.limit) }) : "",
+				tip: zipTip.value,
+				"confirm-label": zipNotice.value?.kind === "warn" ? t("zipContinue") : void 0,
+				"cancel-label": zipNotice.value?.kind === "warn" ? t("cancel") : t("gotIt"),
+				onConfirm: confirmZip,
+				onClose: ($event) => zipNotice.value = null
+			}, null, _parent));
 			_push(ssrRenderComponent(_sfc_main$1, {
 				open: !!previewNode.value,
 				file: previewNode.value,