vitepress-plugin-filelist 0.2.3 → 0.3.0

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

@@ -6,6 +6,7 @@ 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;
@@ -33,6 +34,23 @@ interface FileListLabels {
   previewFailed: string;
   batchFailed: string;
   defaultZip: string;
+  /** Text button that clears the selection (wide layout). */
+  clear: string;
+  /** Accessible name of the clear-selection button. */
+  clearSelection: string;
+  /** `{size}` total, used for the selection and the footer. */
+  totalSize: string;
+  /** `{count}` files inside a loaded folder. */
+  folderItems: string;
+  /** Label of the compact sort select shown in narrow containers. */
+  sortBy: string;
+  selectAll: string;
+  /** Accessible name of a row checkbox, `{name}`. */
+  selectItem: string;
+  /** Accessible name of the expand button, `{name}`. */
+  expand: string;
+  /** Accessible name of the collapse button, `{name}`. */
+  collapse: string;
 }
 interface FileListSource {
   /** OpenList path, directory or single file. */
@@ -186,6 +204,13 @@ export declare function uniqueEntryName(name: string, used: Set<string>): string
 export declare function formatSize(size: number): string;
 export declare function formatDate(iso: string): string;
 export declare function extOf(name: string): string;
+export type FileKind = 'doc' | 'sheet' | 'slide' | 'pdf' | 'image' | 'media' | 'archive' | 'code' | 'other';
+/** Rough file family, used to colour the type badge. */
+export declare function fileKind(name: string): FileKind;
+/** 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): number;
 /**
  * Register `<FileList>` and `<VPFileList>` globally.

package/dist/client/ssr/index.js

@@ -1,5 +1,5 @@
-import { computed, defineComponent, mergeProps, onMounted, ref, unref, useSSRContext } from "vue";
-import { ssrIncludeBooleanAttr, ssrInterpolate, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderList, ssrRenderStyle } from "vue/server-renderer";
+import { computed, defineComponent, mergeProps, onBeforeUnmount, onMounted, ref, unref, useSSRContext } from "vue";
+import { ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderList, ssrRenderStyle } from "vue/server-renderer";
 // src/client/locales.ts
 const fileListLocales = {
 	"zh-CN": {
@@ -7,7 +7,7 @@ const fileListLocales = {
 		demoBadge: "演示数据",
 		filter: "筛选文件名",
 		refresh: "刷新",
-		batch: "批量下载",
+		batch: "下载 ZIP",
 		batchCount: "批量下载（{count}）",
 		batching: "打包中 {percent}%",
 		passwordPrompt: "该目录受密码保护：",
@@ -34,7 +34,16 @@ const fileListLocales = {
 		downloadFailed: "下载失败：{message}",
 		previewFailed: "预览失败：{message}",
 		batchFailed: "打包失败：{message}",
-		defaultZip: "资源"
+		defaultZip: "资源",
+		clear: "清除",
+		clearSelection: "取消选择",
+		totalSize: "共 {size}",
+		folderItems: "{count} 项",
+		sortBy: "排序",
+		selectAll: "全选",
+		selectItem: "选择 {name}",
+		expand: "展开 {name}",
+		collapse: "收起 {name}"
 	},
 	"en-US": {
 		allFiles: "All files",
@@ -68,7 +77,16 @@ const fileListLocales = {
 		downloadFailed: "Download failed: {message}",
 		previewFailed: "Preview failed: {message}",
 		batchFailed: "Failed to create ZIP: {message}",
-		defaultZip: "resources"
+		defaultZip: "resources",
+		clear: "Clear",
+		clearSelection: "Clear selection",
+		totalSize: "{size} total",
+		folderItems: "{count} items",
+		sortBy: "Sort",
+		selectAll: "Select all",
+		selectItem: "Select {name}",
+		expand: "Expand {name}",
+		collapse: "Collapse {name}"
 	}
 };
 function formatLabel(template, values = {}) {
@@ -151,6 +169,97 @@ function extOf(name) {
 	const match = name.match(/\.([a-z0-9]+)$/i);
 	return match ? match[1].toUpperCase() : "";
 }
+const FILE_KINDS = {};
+for (const [kind, exts] of Object.entries({
+	doc: [
+		"doc",
+		"docx",
+		"odt",
+		"rtf",
+		"txt",
+		"md",
+		"pages",
+		"wps"
+	],
+	sheet: [
+		"xls",
+		"xlsx",
+		"ods",
+		"csv",
+		"tsv",
+		"numbers",
+		"et"
+	],
+	slide: [
+		"ppt",
+		"pptx",
+		"odp",
+		"key",
+		"dps"
+	],
+	pdf: ["pdf"],
+	image: [
+		"png",
+		"jpg",
+		"jpeg",
+		"gif",
+		"webp",
+		"svg",
+		"bmp",
+		"ico",
+		"avif",
+		"heic"
+	],
+	media: [
+		"mp3",
+		"wav",
+		"flac",
+		"aac",
+		"ogg",
+		"m4a",
+		"mp4",
+		"webm",
+		"mov",
+		"mkv",
+		"avi"
+	],
+	archive: [
+		"zip",
+		"rar",
+		"7z",
+		"tar",
+		"gz",
+		"tgz",
+		"bz2",
+		"xz",
+		"iso"
+	],
+	code: [
+		"js",
+		"ts",
+		"json",
+		"html",
+		"css",
+		"py",
+		"java",
+		"c",
+		"cpp",
+		"go",
+		"rs",
+		"sh",
+		"yml",
+		"yaml",
+		"xml"
+	]
+})) for (const ext of exts) FILE_KINDS[ext] = kind;
+/** Rough file family, used to colour the type badge. */
+function fileKind(name) {
+	return FILE_KINDS[extOf(name).toLowerCase()] ?? "other";
+}
+/** Sum of the `size` of the given entries, ignoring missing or invalid sizes. */
+function totalSize(items) {
+	return items.reduce((sum, item) => sum + (Number.isFinite(item.size) && (item.size ?? 0) > 0 ? item.size : 0), 0);
+}
 function compareNodes(a, b, key, ascending = true) {
 	if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
 	let result = 0;
@@ -415,6 +524,11 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				zipPath: [...zipParent, item.name]
 			}));
 		}
+		function resortAll() {
+			if (props.sources.length) {
+				for (const root of roots.value) if (root.children.length) sortTree(root.children);
+			} else sortTree(roots.value);
+		}
 		function sourceName(path) {
 			const parts = path.split("/").filter(Boolean);
 			return parts[parts.length - 1] || path;
@@ -531,6 +645,36 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 		const allFiles = computed(() => roots.value.flatMap(descendantFiles));
 		const allChecked = computed(() => allFiles.value.length > 0 && allFiles.value.every((file) => selected.value.has(file.path)));
 		const someChecked = computed(() => !allChecked.value && allFiles.value.some((file) => selected.value.has(file.path)));
+		const selectedFiles = computed(() => allFiles.value.filter((file) => selected.value.has(file.path)));
+		const selectedBytes = computed(() => totalSize(selectedFiles.value));
+		const loadedBytes = computed(() => totalSize(allFiles.value));
+		function folderFiles(node) {
+			return node.is_dir && node.loaded ? descendantFiles(node) : [];
+		}
+		/** Compact sort control for narrow containers, where header cells are hidden. */
+		const sortOptions = computed(() => [
+			"name",
+			"size",
+			"modified"
+		].flatMap((key) => {
+			const label = t(key === "name" ? "columnName" : key === "size" ? "columnSize" : "columnDate");
+			return [{
+				value: `${key}:asc`,
+				label: `${label} ↑`
+			}, {
+				value: `${key}:desc`,
+				label: `${label} ↓`
+			}];
+		}));
+		const sortValue = computed({
+			get: () => `${sortKey.value}:${sortAsc.value ? "asc" : "desc"}`,
+			set: (value) => {
+				const [key, direction] = value.split(":");
+				sortKey.value = key;
+				sortAsc.value = direction !== "desc";
+				resortAll();
+			}
+		});
 		const unloadedFolders = computed(() => {
 			let count = 0;
 			const walk = (nodes) => {
@@ -547,18 +691,52 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			return !node.is_dir && previewable.test(node.name);
 		}
 		const displayTitle = computed(() => props.title || siteTitle.value || (props.path === "/" ? t("allFiles") : props.path));
+		const stickyTop = ref(0);
+		function measureStickyTop() {
+			if (typeof document === "undefined") return;
+			let top = 0;
+			for (const el of document.querySelectorAll(".VPNav, .VPLocalNav")) {
+				const style = getComputedStyle(el);
+				if (style.display === "none" || style.position !== "fixed" && style.position !== "sticky") continue;
+				top = Math.max(top, (Number.parseFloat(style.top) || 0) + el.offsetHeight);
+			}
+			stickyTop.value = top;
+		}
 		onMounted(() => {
 			loadRoot();
 			loadSiteTitle();
+			measureStickyTop();
+			window.addEventListener("resize", measureStickyTop, { passive: true });
+		});
+		onBeforeUnmount(() => {
+			window.removeEventListener("resize", measureStickyTop);
+			clearTimeout(toastTimer);
 		});
 		return (_ctx, _push, _parent, _attrs) => {
-			_push(`<div${ssrRenderAttrs(mergeProps({ class: "fl-root" }, _attrs))}><div class="fl-bar"><div class="fl-title"><span class="fl-title-icon">🗂️</span><span class="fl-title-text">${ssrInterpolate(displayTitle.value)}</span>`);
-			if (demo.value) _push(`<span class="fl-demo-badge">${ssrInterpolate(t("demoBadge"))}</span>`);
+			_push(`<div${ssrRenderAttrs(mergeProps({
+				class: ["fl-root", { "fl-selecting": selected.value.size > 0 }],
+				style: { "--fl-sticky-top-auto": `${stickyTop.value}px` }
+			}, _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)(selectedBytes.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) _push(`<button class="fl-clear" type="button"${ssrRenderAttr("aria-label", t("clearSelection"))}${ssrRenderAttr("title", t("clearSelection"))}><svg class="fl-clear-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12"></path><path d="M18 6 6 18"></path></svg><span class="fl-clear-text">${ssrInterpolate(t("clear"))}</span></button>`);
 			else _push(`<!---->`);
-			_push(`</div><div class="fl-tools"><input${ssrRenderAttr("value", keyword.value)} class="fl-search" type="text"${ssrRenderAttr("placeholder", t("filter"))}><button class="fl-btn" type="button">${ssrInterpolate(t("refresh"))}</button><button class="fl-btn fl-btn-primary" type="button"${ssrIncludeBooleanAttr(selected.value.size === 0 || batchBusy.value) ? " disabled" : ""}>${ssrInterpolate(batchBusy.value ? t("batching", { percent: batchProgress.value }) : selected.value.size ? t("batchCount", { count: selected.value.size }) : t("batch"))}</button></div></div>`);
-			if (needsPassword.value) _push(`<div class="fl-password"><span>${ssrInterpolate(t("passwordPrompt"))}</span><input${ssrRenderAttr("value", passwordInput.value)} type="password"${ssrRenderAttr("placeholder", t("passwordPlaceholder"))}><button class="fl-btn fl-btn-primary" type="button">${ssrInterpolate(t("open"))}</button></div>`);
+			_push(`<div class="fl-tools"><label class="fl-search"><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg><input${ssrRenderAttr("value", keyword.value)} type="text"${ssrRenderAttr("placeholder", t("filter"))}${ssrRenderAttr("aria-label", t("filter"))}></label><button class="fl-icon-btn" type="button"${ssrRenderAttr("aria-label", t("refresh"))}${ssrRenderAttr("title", t("refresh"))}><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-3-6.7"></path><path d="M21 4v5h-5"></path></svg></button></div>`);
+			if (selected.value.size) _push(`<button class="fl-btn fl-btn-primary" type="button"${ssrIncludeBooleanAttr(batchBusy.value) ? " disabled" : ""}><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg> ${ssrInterpolate(batchBusy.value ? t("batching", { percent: batchProgress.value }) : t("batch"))}</button>`);
+			else _push(`<!---->`);
+			_push(`</div>`);
+			if (needsPassword.value) _push(`<div class="fl-password"><span>${ssrInterpolate(t("passwordPrompt"))}</span><input${ssrRenderAttr("value", passwordInput.value)} type="password"${ssrRenderAttr("placeholder", t("passwordPlaceholder"))}${ssrRenderAttr("aria-label", t("passwordPlaceholder"))}><button class="fl-btn fl-btn-primary" type="button">${ssrInterpolate(t("open"))}</button></div>`);
 			else _push(`<!---->`);
-			_push(`<div class="fl-row fl-head"><span class="fl-cell fl-cell-check"><input type="checkbox"${ssrIncludeBooleanAttr(allChecked.value) ? " checked" : ""}${ssrRenderAttr("indeterminate", someChecked.value)}></span><span class="fl-cell fl-cell-name">${ssrInterpolate(t("columnName"))}<span class="fl-sort">${ssrInterpolate(sortKey.value === "name" ? sortAsc.value ? "▲" : "▼" : "")}</span></span><span class="fl-cell fl-cell-size">${ssrInterpolate(t("columnSize"))}<span class="fl-sort">${ssrInterpolate(sortKey.value === "size" ? sortAsc.value ? "▲" : "▼" : "")}</span></span><span class="fl-cell fl-cell-date">${ssrInterpolate(t("columnDate"))}<span class="fl-sort">${ssrInterpolate(sortKey.value === "modified" ? sortAsc.value ? "▲" : "▼" : "")}</span></span><span class="fl-cell fl-cell-op"></span></div>`);
+			_push(`<div class="fl-row fl-head"><label class="fl-cell fl-cell-check"><input type="checkbox"${ssrRenderAttr("aria-label", t("selectAll"))}${ssrIncludeBooleanAttr(allChecked.value) ? " checked" : ""}${ssrRenderAttr("indeterminate", someChecked.value)}></label><span class="fl-cell fl-cell-name"><button class="fl-sort-btn" type="button"${ssrRenderAttr("aria-sort", sortKey.value === "name" ? sortAsc.value ? "ascending" : "descending" : void 0)}>${ssrInterpolate(t("columnName"))}<span class="fl-sort" aria-hidden="true">${ssrInterpolate(sortKey.value === "name" ? sortAsc.value ? "▲" : "▼" : "")}</span></button></span><span class="fl-cell fl-cell-size"><button class="fl-sort-btn" type="button">${ssrInterpolate(t("columnSize"))}<span class="fl-sort" aria-hidden="true">${ssrInterpolate(sortKey.value === "size" ? sortAsc.value ? "▲" : "▼" : "")}</span></button></span><span class="fl-cell fl-cell-date"><button class="fl-sort-btn" type="button">${ssrInterpolate(t("columnDate"))}<span class="fl-sort" aria-hidden="true">${ssrInterpolate(sortKey.value === "modified" ? sortAsc.value ? "▲" : "▼" : "")}</span></button></span><span class="fl-cell fl-cell-op"><label class="fl-sort-select"><span>${ssrInterpolate(t("sortBy"))}</span><span class="fl-sort-current" aria-hidden="true">${ssrInterpolate(sortOptions.value.find((option) => option.value === sortValue.value)?.label)}</span><select${ssrRenderAttr("aria-label", t("sortBy"))}><!--[-->`);
+			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>`);
 			if (loadingRoot.value) _push(`<div class="fl-status">${ssrInterpolate(t("loading"))}</div>`);
 			else if (errorMsg.value) {
 				_push(`<div class="fl-status fl-error">${ssrInterpolate(t("loadFailed", { message: errorMsg.value }))} `);
@@ -574,30 +752,39 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				_push(`<div class="${ssrRenderClass([{
 					"fl-row-dir": node.is_dir,
 					"fl-row-root": node.isRoot,
-					"fl-row-selected": selected.value.has(node.path)
-				}, "fl-row"])}"><span class="fl-cell fl-cell-check"><input type="checkbox"${ssrIncludeBooleanAttr(isChecked(node)) ? " checked" : ""}${ssrRenderAttr("indeterminate", isIndeterminate(node))}></span><span class="fl-cell fl-cell-name"${ssrRenderAttr("title", node.isRoot ? node.path : void 0)} style="${ssrRenderStyle({ paddingLeft: `${node.depth * 22}px` })}">`);
-				if (node.is_dir) _push(`<button type="button" class="${ssrRenderClass([{ "fl-arrow-open": node.expanded }, "fl-arrow"])}">▸</button>`);
-				else _push(`<span class="fl-arrow-placeholder"></span>`);
-				_push(`<span class="${ssrRenderClass([{ "fl-name-link": node.is_dir }, "fl-name"])}">`);
-				if (node.is_dir) _push(`<span class="fl-folder-icon">📁</span>`);
-				else _push(`<span class="fl-ext-badge">${ssrInterpolate(unref(extOf)(node.name) || "FILE")}</span>`);
-				_push(` ${ssrInterpolate(node.name)} `);
-				if (node.loading) _push(`<span class="fl-loading">…</span>`);
+					"fl-row-selected": !node.is_dir && selected.value.has(node.path)
+				}, "fl-row"])}" style="${ssrRenderStyle({ "--fl-depth": node.depth })}"><label class="fl-cell fl-cell-check"><input type="checkbox"${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.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)}><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg></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(`<!--[-->`);
+					if (node.loaded) _push(`<!--[-->${ssrInterpolate(t("folderItems", { count: folderFiles(node).length }))} · ${ssrInterpolate(unref(formatSize)(unref(totalSize)(folderFiles(node))))}<!--]-->`);
+					else _push(`<!---->`);
+					_push(`<!--]-->`);
+				} else _push(`<!--[-->${ssrInterpolate(unref(formatSize)(node.size))} · ${ssrInterpolate(unref(formatDate)(node.modified))}<!--]-->`);
+				_push(`</span></span>`);
+				if (node.is_dir && node.loaded) _push(`<span class="fl-count">${ssrInterpolate(t("folderItems", { count: folderFiles(node).length }))}</span>`);
 				else _push(`<!---->`);
-				_push(`</span></span><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.is_dir) {
+				if (node.loading) _push(`<span class="fl-loading" aria-hidden="true">…</span>`);
+				else _push(`<!---->`);
+				_push(`</span><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.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)}><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 6 6 6-6 6"></path></svg></button>`);
+				else {
 					_push(`<!--[-->`);
-					if (canPreview(node)) _push(`<button class="fl-download" type="button"${ssrRenderAttr("title", t("preview"))}><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg></button>`);
+					if (canPreview(node)) _push(`<button class="fl-action fl-download" type="button"${ssrRenderAttr("aria-label", `${t("preview")} ${node.name}`)}${ssrRenderAttr("title", t("preview"))}><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg></button>`);
 					else _push(`<!---->`);
-					_push(`<button class="fl-download" type="button"${ssrRenderAttr("title", t("download"))}><svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg></button><!--]-->`);
-				} else _push(`<!---->`);
+					_push(`<button class="fl-action fl-download" type="button"${ssrRenderAttr("aria-label", `${t("download")} ${node.name}`)}${ssrRenderAttr("title", t("download"))}><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"></path><path d="m7 10 5 5 5-5"></path><path d="M5 21h14"></path></svg></button><!--]-->`);
+				}
 				_push(`</span></div>`);
 			});
-			_push(`<!--]--><div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("selected", { count: selected.value.size }))}</span>`);
-			if (unloadedFolders.value) _push(`<span> · ${ssrInterpolate(t("unloaded", { count: unloadedFolders.value }))}</span>`);
+			_push(`<!--]--><div class="fl-foot"><span>${ssrInterpolate(t("loaded", { count: allFiles.value.length }))} · ${ssrInterpolate(t("totalSize", { size: unref(formatSize)(loadedBytes.value) }))}</span>`);
+			if (unloadedFolders.value) _push(`<span class="fl-foot-hint">${ssrInterpolate(t("unloaded", { count: unloadedFolders.value }))}</span>`);
 			else _push(`<!---->`);
 			_push(`</div>`);
-			if (toast.value) _push(`<div class="fl-toast">${ssrInterpolate(toast.value)}</div>`);
+			if (toast.value) _push(`<div class="fl-toast" role="status">${ssrInterpolate(toast.value)}</div>`);
 			else _push(`<!---->`);
 			_push(`</div>`);
 		};
@@ -630,4 +817,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, fileListLocales, formatDate, formatLabel, formatSize, joinPath, resolveLabels, uniqueEntryName, zipEntryName, zipSegment };
+export { _sfc_main as FileList, _sfc_main as VPFileList, compareNodes, encodePath, enhanceAppWithFileList, extOf, fileKind, fileListLocales, formatDate, formatLabel, formatSize, joinPath, resolveLabels, totalSize, uniqueEntryName, zipEntryName, zipSegment };