vitepress-plugin-filelist 0.2.3 → 0.3.0

package/dist/client/browser/index.js

@@ -1,5 +1,5 @@
 import "../style.css";
-import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelText, withDirectives, withKeys } from "vue";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, toDisplayString, unref, vModelSelect, vModelText, withDirectives, withKeys } from "vue";
 // 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;
@@ -160,83 +269,152 @@ function compareNodes(a, b, key, ascending = true) {
 	return ascending ? result : -result;
 }
 // src/client/FileList.vue
-const _hoisted_1 = { class: "fl-root" };
-const _hoisted_2 = { class: "fl-bar" };
-const _hoisted_3 = { class: "fl-title" };
-const _hoisted_4 = { class: "fl-title-text" };
+const _hoisted_1 = { class: "fl-bar" };
+const _hoisted_2 = {
+	key: 0,
+	class: "fl-selection",
+	role: "status"
+};
+const _hoisted_3 = { class: "fl-selection-count" };
+const _hoisted_4 = { class: "fl-selection-size" };
 const _hoisted_5 = {
+	key: 1,
+	class: "fl-title"
+};
+const _hoisted_6 = { class: "fl-title-text" };
+const _hoisted_7 = {
 	key: 0,
 	class: "fl-demo-badge"
 };
-const _hoisted_6 = { class: "fl-tools" };
-const _hoisted_7 = ["placeholder"];
-const _hoisted_8 = ["disabled"];
-const _hoisted_9 = {
+const _hoisted_8 = ["aria-label", "title"];
+const _hoisted_9 = { class: "fl-clear-text" };
+const _hoisted_10 = { class: "fl-tools" };
+const _hoisted_11 = { class: "fl-search" };
+const _hoisted_12 = ["placeholder", "aria-label"];
+const _hoisted_13 = ["aria-label", "title"];
+const _hoisted_14 = ["disabled"];
+const _hoisted_15 = {
 	key: 0,
 	class: "fl-password"
 };
-const _hoisted_10 = ["placeholder"];
-const _hoisted_11 = { class: "fl-row fl-head" };
-const _hoisted_12 = { class: "fl-cell fl-cell-check" };
-const _hoisted_13 = ["checked", ".indeterminate"];
-const _hoisted_14 = { class: "fl-sort" };
-const _hoisted_15 = { class: "fl-sort" };
-const _hoisted_16 = { class: "fl-sort" };
-const _hoisted_17 = {
+const _hoisted_16 = ["placeholder", "aria-label"];
+const _hoisted_17 = { class: "fl-row fl-head" };
+const _hoisted_18 = { class: "fl-cell fl-cell-check" };
+const _hoisted_19 = [
+	"aria-label",
+	"checked",
+	".indeterminate"
+];
+const _hoisted_20 = { class: "fl-cell fl-cell-name" };
+const _hoisted_21 = ["aria-sort"];
+const _hoisted_22 = {
+	class: "fl-sort",
+	"aria-hidden": "true"
+};
+const _hoisted_23 = { class: "fl-cell fl-cell-size" };
+const _hoisted_24 = {
+	class: "fl-sort",
+	"aria-hidden": "true"
+};
+const _hoisted_25 = { class: "fl-cell fl-cell-date" };
+const _hoisted_26 = {
+	class: "fl-sort",
+	"aria-hidden": "true"
+};
+const _hoisted_27 = { class: "fl-cell fl-cell-op" };
+const _hoisted_28 = { class: "fl-sort-select" };
+const _hoisted_29 = {
+	class: "fl-sort-current",
+	"aria-hidden": "true"
+};
+const _hoisted_30 = ["aria-label"];
+const _hoisted_31 = ["value"];
+const _hoisted_32 = {
 	key: 1,
 	class: "fl-status"
 };
-const _hoisted_18 = {
+const _hoisted_33 = {
 	key: 2,
 	class: "fl-status fl-error"
 };
-const _hoisted_19 = {
+const _hoisted_34 = {
 	key: 0,
 	class: "fl-hint"
 };
-const _hoisted_20 = {
+const _hoisted_35 = {
 	key: 1,
 	class: "fl-hint"
 };
-const _hoisted_21 = {
+const _hoisted_36 = {
 	key: 3,
 	class: "fl-status"
 };
-const _hoisted_22 = { class: "fl-cell fl-cell-check" };
-const _hoisted_23 = [
+const _hoisted_37 = { class: "fl-cell fl-cell-check" };
+const _hoisted_38 = [
+	"aria-label",
 	"checked",
 	".indeterminate",
 	"onChange"
 ];
-const _hoisted_24 = ["title"];
-const _hoisted_25 = ["onClick"];
-const _hoisted_26 = {
+const _hoisted_39 = ["title"];
+const _hoisted_40 = [
+	"aria-label",
+	"aria-expanded",
+	"onClick"
+];
+const _hoisted_41 = {
 	key: 1,
-	class: "fl-arrow-placeholder"
+	class: "fl-arrow-placeholder",
+	"aria-hidden": "true"
 };
-const _hoisted_27 = ["onClick"];
-const _hoisted_28 = {
-	key: 0,
-	class: "fl-folder-icon"
+const _hoisted_42 = {
+	key: 2,
+	class: "fl-folder-icon",
+	viewBox: "0 0 24 24",
+	width: "18",
+	height: "18",
+	"aria-hidden": "true"
 };
-const _hoisted_29 = {
-	key: 1,
-	class: "fl-ext-badge"
+const _hoisted_43 = ["data-kind"];
+const _hoisted_44 = { class: "fl-label" };
+const _hoisted_45 = ["onClick"];
+const _hoisted_46 = { class: "fl-meta" };
+const _hoisted_47 = {
+	key: 4,
+	class: "fl-count"
 };
-const _hoisted_30 = {
-	key: 2,
-	class: "fl-loading"
+const _hoisted_48 = {
+	key: 5,
+	class: "fl-loading",
+	"aria-hidden": "true"
 };
-const _hoisted_31 = { class: "fl-cell fl-cell-size" };
-const _hoisted_32 = { class: "fl-cell fl-cell-date" };
-const _hoisted_33 = { class: "fl-cell fl-cell-op" };
-const _hoisted_34 = ["title", "onClick"];
-const _hoisted_35 = ["title", "onClick"];
-const _hoisted_36 = { class: "fl-foot" };
-const _hoisted_37 = { key: 0 };
-const _hoisted_38 = {
+const _hoisted_49 = { class: "fl-cell fl-cell-size" };
+const _hoisted_50 = { class: "fl-cell fl-cell-date" };
+const _hoisted_51 = { class: "fl-cell fl-cell-op" };
+const _hoisted_52 = [
+	"aria-label",
+	"aria-expanded",
+	"onClick"
+];
+const _hoisted_53 = [
+	"aria-label",
+	"title",
+	"onClick"
+];
+const _hoisted_54 = [
+	"aria-label",
+	"title",
+	"onClick"
+];
+const _hoisted_55 = { class: "fl-foot" };
+const _hoisted_56 = {
+	key: 0,
+	class: "fl-foot-hint"
+};
+const _hoisted_57 = {
 	key: 4,
-	class: "fl-toast"
+	class: "fl-toast",
+	role: "status"
 };
 const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "FileList",
@@ -529,6 +707,9 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 				sortKey.value = key;
 				sortAsc.value = true;
 			}
+			resortAll();
+		}
+		function resortAll() {
 			if (props.sources.length) {
 				for (const root of roots.value) if (root.children.length) sortTree(root.children);
 			} else sortTree(roots.value);
@@ -684,6 +865,39 @@ 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 clearSelection() {
+			selected.value = /* @__PURE__ */ new Set();
+		}
+		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();
+			}
+		});
 		function toggleCheckAll() {
 			selected.value = allChecked.value ? /* @__PURE__ */ new Set() : new Set(allFiles.value.map((file) => file.path));
 		}
@@ -789,124 +1003,258 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 			loadRoot();
 		}
 		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, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [
-					_cache[5] || (_cache[5] = createElementVNode("span", { class: "fl-title-icon" }, "🗂️", -1)),
-					createElementVNode("span", _hoisted_4, toDisplayString(displayTitle.value), 1),
-					demo.value ? (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(t("demoBadge")), 1)) : createCommentVNode("v-if", true)
-				]), createElementVNode("div", _hoisted_6, [
-					withDirectives(createElementVNode("input", {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["fl-root", { "fl-selecting": selected.value.size > 0 }]),
+				style: normalizeStyle({ "--fl-sticky-top-auto": `${stickyTop.value}px` })
+			}, [
+				createElementVNode("div", _hoisted_1, [
+					selected.value.size ? (openBlock(), createElementBlock("div", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(t("selected", { count: selected.value.size })), 1), createElementVNode("span", _hoisted_4, toDisplayString(t("totalSize", { size: unref(formatSize)(selectedBytes.value) })), 1)])) : (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("span", _hoisted_6, toDisplayString(displayTitle.value), 1), demo.value ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(t("demoBadge")), 1)) : createCommentVNode("v-if", true)])),
+					selected.value.size ? (openBlock(), createElementBlock("button", {
+						key: 2,
+						class: "fl-clear",
+						type: "button",
+						"aria-label": t("clearSelection"),
+						title: t("clearSelection"),
+						onClick: clearSelection
+					}, [_cache[6] || (_cache[6] = createElementVNode("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"
+					}, [createElementVNode("path", { d: "M6 6l12 12" }), createElementVNode("path", { d: "M18 6 6 18" })], -1)), createElementVNode("span", _hoisted_9, toDisplayString(t("clear")), 1)], 8, _hoisted_8)) : createCommentVNode("v-if", true),
+					createElementVNode("div", _hoisted_10, [createElementVNode("label", _hoisted_11, [_cache[7] || (_cache[7] = createElementVNode("svg", {
+						viewBox: "0 0 24 24",
+						width: "15",
+						height: "15",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"aria-hidden": "true"
+					}, [createElementVNode("circle", {
+						cx: "11",
+						cy: "11",
+						r: "7"
+					}), createElementVNode("path", { d: "m20 20-3.5-3.5" })], -1)), withDirectives(createElementVNode("input", {
 						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => keyword.value = $event),
-						class: "fl-search",
 						type: "text",
-						placeholder: t("filter")
-					}, null, 8, _hoisted_7), [[vModelText, keyword.value]]),
-					createElementVNode("button", {
-						class: "fl-btn",
+						placeholder: t("filter"),
+						"aria-label": t("filter")
+					}, null, 8, _hoisted_12), [[vModelText, keyword.value]])]), createElementVNode("button", {
+						class: "fl-icon-btn",
 						type: "button",
+						"aria-label": t("refresh"),
+						title: t("refresh"),
 						onClick: loadRoot
-					}, toDisplayString(t("refresh")), 1),
-					createElementVNode("button", {
+					}, [..._cache[8] || (_cache[8] = [createElementVNode("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"
+					}, [createElementVNode("path", { d: "M21 12a9 9 0 1 1-3-6.7" }), createElementVNode("path", { d: "M21 4v5h-5" })], -1)])], 8, _hoisted_13)]),
+					selected.value.size ? (openBlock(), createElementBlock("button", {
+						key: 3,
 						class: "fl-btn fl-btn-primary",
 						type: "button",
-						disabled: selected.value.size === 0 || batchBusy.value,
+						disabled: batchBusy.value,
 						onClick: batchDownload
-					}, toDisplayString(batchBusy.value ? t("batching", { percent: batchProgress.value }) : selected.value.size ? t("batchCount", { count: selected.value.size }) : t("batch")), 9, _hoisted_8)
-				])]),
-				needsPassword.value ? (openBlock(), createElementBlock("div", _hoisted_9, [
+					}, [_cache[9] || (_cache[9] = createElementVNode("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"
+					}, [
+						createElementVNode("path", { d: "M12 3v12" }),
+						createElementVNode("path", { d: "m7 10 5 5 5-5" }),
+						createElementVNode("path", { d: "M5 21h14" })
+					], -1)), createTextVNode(" " + toDisplayString(batchBusy.value ? t("batching", { percent: batchProgress.value }) : t("batch")), 1)], 8, _hoisted_14)) : createCommentVNode("v-if", true)
+				]),
+				needsPassword.value ? (openBlock(), createElementBlock("div", _hoisted_15, [
 					createElementVNode("span", null, toDisplayString(t("passwordPrompt")), 1),
 					withDirectives(createElementVNode("input", {
 						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => passwordInput.value = $event),
 						type: "password",
 						placeholder: t("passwordPlaceholder"),
+						"aria-label": t("passwordPlaceholder"),
 						onKeyup: withKeys(submitPassword, ["enter"])
-					}, null, 40, _hoisted_10), [[vModelText, passwordInput.value]]),
+					}, null, 40, _hoisted_16), [[vModelText, passwordInput.value]]),
 					createElementVNode("button", {
 						class: "fl-btn fl-btn-primary",
 						type: "button",
 						onClick: submitPassword
 					}, toDisplayString(t("open")), 1)
 				])) : createCommentVNode("v-if", true),
-				createElementVNode("div", _hoisted_11, [
-					createElementVNode("span", _hoisted_12, [createElementVNode("input", {
+				createElementVNode("div", _hoisted_17, [
+					createElementVNode("label", _hoisted_18, [createElementVNode("input", {
 						type: "checkbox",
+						"aria-label": t("selectAll"),
 						checked: allChecked.value,
 						".indeterminate": someChecked.value,
 						onChange: toggleCheckAll
-					}, null, 40, _hoisted_13)]),
-					createElementVNode("span", {
-						class: "fl-cell fl-cell-name",
+					}, null, 40, _hoisted_19)]),
+					createElementVNode("span", _hoisted_20, [createElementVNode("button", {
+						class: "fl-sort-btn",
+						type: "button",
+						"aria-sort": sortKey.value === "name" ? sortAsc.value ? "ascending" : "descending" : void 0,
 						onClick: _cache[2] || (_cache[2] = ($event) => setSort("name"))
-					}, [createTextVNode(toDisplayString(t("columnName")), 1), createElementVNode("span", _hoisted_14, toDisplayString(sortKey.value === "name" ? sortAsc.value ? "▲" : "▼" : ""), 1)]),
-					createElementVNode("span", {
-						class: "fl-cell fl-cell-size",
+					}, [createTextVNode(toDisplayString(t("columnName")), 1), createElementVNode("span", _hoisted_22, toDisplayString(sortKey.value === "name" ? sortAsc.value ? "▲" : "▼" : ""), 1)], 8, _hoisted_21)]),
+					createElementVNode("span", _hoisted_23, [createElementVNode("button", {
+						class: "fl-sort-btn",
+						type: "button",
 						onClick: _cache[3] || (_cache[3] = ($event) => setSort("size"))
-					}, [createTextVNode(toDisplayString(t("columnSize")), 1), createElementVNode("span", _hoisted_15, toDisplayString(sortKey.value === "size" ? sortAsc.value ? "▲" : "▼" : ""), 1)]),
-					createElementVNode("span", {
-						class: "fl-cell fl-cell-date",
+					}, [createTextVNode(toDisplayString(t("columnSize")), 1), createElementVNode("span", _hoisted_24, toDisplayString(sortKey.value === "size" ? sortAsc.value ? "▲" : "▼" : ""), 1)])]),
+					createElementVNode("span", _hoisted_25, [createElementVNode("button", {
+						class: "fl-sort-btn",
+						type: "button",
 						onClick: _cache[4] || (_cache[4] = ($event) => setSort("modified"))
-					}, [createTextVNode(toDisplayString(t("columnDate")), 1), createElementVNode("span", _hoisted_16, toDisplayString(sortKey.value === "modified" ? sortAsc.value ? "▲" : "▼" : ""), 1)]),
-					_cache[6] || (_cache[6] = createElementVNode("span", { class: "fl-cell fl-cell-op" }, null, -1))
+					}, [createTextVNode(toDisplayString(t("columnDate")), 1), createElementVNode("span", _hoisted_26, toDisplayString(sortKey.value === "modified" ? sortAsc.value ? "▲" : "▼" : ""), 1)])]),
+					createElementVNode("span", _hoisted_27, [createElementVNode("label", _hoisted_28, [
+						createElementVNode("span", null, toDisplayString(t("sortBy")), 1),
+						createElementVNode("span", _hoisted_29, toDisplayString(sortOptions.value.find((option) => option.value === sortValue.value)?.label), 1),
+						withDirectives(createElementVNode("select", {
+							"onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => sortValue.value = $event),
+							"aria-label": t("sortBy")
+						}, [(openBlock(true), createElementBlock(Fragment, null, renderList(sortOptions.value, (option) => {
+							return openBlock(), createElementBlock("option", {
+								key: option.value,
+								value: option.value
+							}, toDisplayString(option.label), 9, _hoisted_31);
+						}), 128))], 8, _hoisted_30), [[vModelSelect, sortValue.value]])
+					])])
 				]),
-				loadingRoot.value ? (openBlock(), createElementBlock("div", _hoisted_17, toDisplayString(t("loading")), 1)) : errorMsg.value ? (openBlock(), createElementBlock("div", _hoisted_18, [
+				loadingRoot.value ? (openBlock(), createElementBlock("div", _hoisted_32, toDisplayString(t("loading")), 1)) : errorMsg.value ? (openBlock(), createElementBlock("div", _hoisted_33, [
 					createTextVNode(toDisplayString(t("loadFailed", { message: errorMsg.value })) + " ", 1),
-					/guest/i.test(errorMsg.value) ? (openBlock(), createElementBlock("p", _hoisted_19, toDisplayString(t("guestHint")), 1)) : createCommentVNode("v-if", true),
-					/failed to fetch|networkerror/i.test(errorMsg.value) ? (openBlock(), createElementBlock("p", _hoisted_20, toDisplayString(t("corsHint")), 1)) : createCommentVNode("v-if", true),
+					/guest/i.test(errorMsg.value) ? (openBlock(), createElementBlock("p", _hoisted_34, toDisplayString(t("guestHint")), 1)) : createCommentVNode("v-if", true),
+					/failed to fetch|networkerror/i.test(errorMsg.value) ? (openBlock(), createElementBlock("p", _hoisted_35, toDisplayString(t("corsHint")), 1)) : createCommentVNode("v-if", true),
 					createElementVNode("button", {
 						class: "fl-btn",
 						type: "button",
 						onClick: loadRoot
 					}, toDisplayString(t("retry")), 1)
-				])) : visible.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_21, toDisplayString(t("empty")), 1)) : createCommentVNode("v-if", true),
+				])) : visible.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_36, toDisplayString(t("empty")), 1)) : createCommentVNode("v-if", true),
 				(openBlock(true), createElementBlock(Fragment, null, renderList(visible.value, (node) => {
 					return openBlock(), createElementBlock("div", {
 						key: node.path,
 						class: normalizeClass(["fl-row", {
 							"fl-row-dir": node.is_dir,
 							"fl-row-root": node.isRoot,
-							"fl-row-selected": selected.value.has(node.path)
-						}])
+							"fl-row-selected": !node.is_dir && selected.value.has(node.path)
+						}]),
+						style: normalizeStyle({ "--fl-depth": node.depth })
 					}, [
-						createElementVNode("span", _hoisted_22, [createElementVNode("input", {
+						createElementVNode("label", _hoisted_37, [createElementVNode("input", {
 							type: "checkbox",
+							"aria-label": t("selectItem", { name: node.name }),
 							checked: isChecked(node),
 							".indeterminate": isIndeterminate(node),
 							onChange: ($event) => toggleCheck(node, $event)
-						}, null, 40, _hoisted_23)]),
+						}, null, 40, _hoisted_38)]),
 						createElementVNode("span", {
 							class: "fl-cell fl-cell-name",
-							title: node.isRoot ? node.path : void 0,
-							style: normalizeStyle({ paddingLeft: `${node.depth * 22}px` })
-						}, [node.is_dir ? (openBlock(), createElementBlock("button", {
+							title: node.isRoot ? node.path : void 0
+						}, [
+							_cache[12] || (_cache[12] = createElementVNode("span", {
+								class: "fl-indent",
+								"aria-hidden": "true"
+							}, null, -1)),
+							node.is_dir ? (openBlock(), createElementBlock("button", {
+								key: 0,
+								class: normalizeClass(["fl-arrow", { "fl-arrow-open": node.expanded }]),
+								type: "button",
+								"aria-label": t(node.expanded ? "collapse" : "expand", { name: node.name }),
+								"aria-expanded": node.expanded,
+								onClick: ($event) => toggleExpand(node)
+							}, [..._cache[10] || (_cache[10] = [createElementVNode("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"
+							}, [createElementVNode("path", { d: "m9 6 6 6-6 6" })], -1)])], 10, _hoisted_40)) : (openBlock(), createElementBlock("span", _hoisted_41)),
+							node.is_dir ? (openBlock(), createElementBlock("svg", _hoisted_42, [..._cache[11] || (_cache[11] = [createElementVNode("path", { d: "M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }, null, -1)])])) : (openBlock(), createElementBlock("span", {
+								key: 3,
+								class: "fl-type",
+								"data-kind": unref(fileKind)(node.name),
+								"aria-hidden": "true"
+							}, toDisplayString(unref(extOf)(node.name) || "FILE"), 9, _hoisted_43)),
+							createElementVNode("span", _hoisted_44, [createElementVNode("span", {
+								class: normalizeClass(["fl-name", { "fl-name-dir": node.is_dir }]),
+								onClick: ($event) => node.is_dir ? toggleExpand(node) : download(node)
+							}, toDisplayString(node.name), 11, _hoisted_45), createElementVNode("span", _hoisted_46, [node.is_dir ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [node.loaded ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createTextVNode(toDisplayString(t("folderItems", { count: folderFiles(node).length })) + " · " + toDisplayString(unref(formatSize)(unref(totalSize)(folderFiles(node)))), 1)], 64)) : createCommentVNode("v-if", true)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(unref(formatSize)(node.size)) + " · " + toDisplayString(unref(formatDate)(node.modified)), 1)], 64))])]),
+							node.is_dir && node.loaded ? (openBlock(), createElementBlock("span", _hoisted_47, toDisplayString(t("folderItems", { count: folderFiles(node).length })), 1)) : createCommentVNode("v-if", true),
+							node.loading ? (openBlock(), createElementBlock("span", _hoisted_48, "…")) : createCommentVNode("v-if", true)
+						], 8, _hoisted_39),
+						createElementVNode("span", _hoisted_49, toDisplayString(node.is_dir ? "—" : unref(formatSize)(node.size)), 1),
+						createElementVNode("span", _hoisted_50, toDisplayString(unref(formatDate)(node.modified)), 1),
+						createElementVNode("span", _hoisted_51, [node.is_dir ? (openBlock(), createElementBlock("button", {
 							key: 0,
-							class: normalizeClass(["fl-arrow", { "fl-arrow-open": node.expanded }]),
+							class: normalizeClass(["fl-action fl-arrow-end", { "fl-arrow-open": node.expanded }]),
 							type: "button",
+							"aria-label": t(node.expanded ? "collapse" : "expand", { name: node.name }),
+							"aria-expanded": node.expanded,
 							onClick: ($event) => toggleExpand(node)
-						}, "▸", 10, _hoisted_25)) : (openBlock(), createElementBlock("span", _hoisted_26)), createElementVNode("span", {
-							class: normalizeClass(["fl-name", { "fl-name-link": node.is_dir }]),
-							onClick: ($event) => node.is_dir ? toggleExpand(node) : download(node)
-						}, [
-							node.is_dir ? (openBlock(), createElementBlock("span", _hoisted_28, "📁")) : (openBlock(), createElementBlock("span", _hoisted_29, toDisplayString(unref(extOf)(node.name) || "FILE"), 1)),
-							createTextVNode(" " + toDisplayString(node.name) + " ", 1),
-							node.loading ? (openBlock(), createElementBlock("span", _hoisted_30, "…")) : createCommentVNode("v-if", true)
-						], 10, _hoisted_27)], 12, _hoisted_24),
-						createElementVNode("span", _hoisted_31, toDisplayString(node.is_dir ? "-" : unref(formatSize)(node.size)), 1),
-						createElementVNode("span", _hoisted_32, toDisplayString(unref(formatDate)(node.modified)), 1),
-						createElementVNode("span", _hoisted_33, [!node.is_dir ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [canPreview(node) ? (openBlock(), createElementBlock("button", {
+						}, [..._cache[13] || (_cache[13] = [createElementVNode("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"
+						}, [createElementVNode("path", { d: "m9 6 6 6-6 6" })], -1)])], 10, _hoisted_52)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [canPreview(node) ? (openBlock(), createElementBlock("button", {
 							key: 0,
-							class: "fl-download",
+							class: "fl-action fl-download",
 							type: "button",
+							"aria-label": `${t("preview")} ${node.name}`,
 							title: t("preview"),
 							onClick: ($event) => preview(node)
-						}, [..._cache[7] || (_cache[7] = [createElementVNode("svg", {
+						}, [..._cache[14] || (_cache[14] = [createElementVNode("svg", {
 							viewBox: "0 0 24 24",
-							width: "15",
-							height: "15",
+							width: "16",
+							height: "16",
 							fill: "none",
 							stroke: "currentColor",
 							"stroke-width": "2",
@@ -917,15 +1265,16 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							cx: "12",
 							cy: "12",
 							r: "3"
-						})], -1)])], 8, _hoisted_34)) : createCommentVNode("v-if", true), createElementVNode("button", {
-							class: "fl-download",
+						})], -1)])], 8, _hoisted_53)) : createCommentVNode("v-if", true), createElementVNode("button", {
+							class: "fl-action fl-download",
 							type: "button",
+							"aria-label": `${t("download")} ${node.name}`,
 							title: t("download"),
 							onClick: ($event) => download(node)
-						}, [..._cache[8] || (_cache[8] = [createElementVNode("svg", {
+						}, [..._cache[15] || (_cache[15] = [createElementVNode("svg", {
 							viewBox: "0 0 24 24",
-							width: "15",
-							height: "15",
+							width: "16",
+							height: "16",
 							fill: "none",
 							stroke: "currentColor",
 							"stroke-width": "2",
@@ -936,12 +1285,12 @@ const _sfc_main = /*@__PURE__*/ defineComponent({
 							createElementVNode("path", { d: "M12 3v12" }),
 							createElementVNode("path", { d: "m7 10 5 5 5-5" }),
 							createElementVNode("path", { d: "M5 21h14" })
-						], -1)])], 8, _hoisted_35)], 64)) : createCommentVNode("v-if", true)])
-					], 2);
+						], -1)])], 8, _hoisted_54)], 64))])
+					], 6);
 				}), 128)),
-				createElementVNode("div", _hoisted_36, [createElementVNode("span", null, toDisplayString(t("loaded", { count: allFiles.value.length })) + " · " + toDisplayString(t("selected", { count: selected.value.size })), 1), unloadedFolders.value ? (openBlock(), createElementBlock("span", _hoisted_37, " · " + toDisplayString(t("unloaded", { count: unloadedFolders.value })), 1)) : createCommentVNode("v-if", true)]),
-				toast.value ? (openBlock(), createElementBlock("div", _hoisted_38, toDisplayString(toast.value), 1)) : createCommentVNode("v-if", true)
-			]);
+				createElementVNode("div", _hoisted_55, [createElementVNode("span", null, toDisplayString(t("loaded", { count: allFiles.value.length })) + " · " + toDisplayString(t("totalSize", { size: unref(formatSize)(loadedBytes.value) })), 1), unloadedFolders.value ? (openBlock(), createElementBlock("span", _hoisted_56, toDisplayString(t("unloaded", { count: unloadedFolders.value })), 1)) : createCommentVNode("v-if", true)]),
+				toast.value ? (openBlock(), createElementBlock("div", _hoisted_57, toDisplayString(toast.value), 1)) : createCommentVNode("v-if", true)
+			], 6);
 		};
 	}
 });
@@ -966,4 +1315,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 };