@dirwell/theme-crosswave 0.0.1-alpha → 0.0.1

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { copyJsonObject, escapeHtml, projectListingEntry } from "@dirwell/core";
 import path from "node:path";
 import mime from "mime";
 import { computed, createSSRApp, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, unref, watch, watchEffect } from "vue";
-import { renderToString, ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderClass, ssrRenderDynamicAttr, ssrRenderList, ssrRenderSlot } from "vue/server-renderer";
+import { renderToString, ssrIncludeBooleanAttr, ssrInterpolate, ssrLooseContain, ssrLooseEqual, ssrRenderAttr, ssrRenderClass, ssrRenderDynamicAttr, ssrRenderList, ssrRenderSlot, ssrRenderStyle } from "vue/server-renderer";
 import { useGamepad } from "@vueuse/core";
 import { ListingDataError, loadListing, parseListingEntries } from "@dirwell/core/client";
 //#region ../shared-theme/src/page.ts
@@ -37,7 +37,7 @@ function createThemePage(context, theme, title) {
 		documentBaseHref: context.documentBaseHref,
 		directoryPath
 	};
-	const dataForDirectory = (logicalPath) => folderDataHref({
+	const dataForDirectory = (logicalPath) => context.hasPageForDirectory?.(logicalPath) === false ? null : folderDataHref({
 		id: logicalPath,
 		name: logicalPath,
 		kind: "directory",
@@ -255,6 +255,247 @@ function entryCategories(entry, type, categories) {
 	return categories.filter((category) => category.match === "all" || folder && category.match === "folders" || !folder && category.match === "other" && !specific.length || specific.includes(category));
 }
 //#endregion
+//#region ../shared-theme/src/customization.ts
+/** Small serializable inputs shared by official themes; layout stays theme-owned. */
+const defaultLabels = {
+	other: "other",
+	crosswaveKeyboardHelp: "Arrow keys navigate · Enter confirms · Backspace returns",
+	brokenLink: "broken link",
+	unavailableLink: "unavailable link",
+	cycleLink: "cycle link",
+	azure: "azure",
+	violet: "violet",
+	amber: "amber",
+	rose: "rose",
+	jade: "jade",
+	graphite: "graphite",
+	allFiles: "All files",
+	categoryFolders: "Folders",
+	categoryPhotos: "Photos",
+	categoryMusic: "Music",
+	categoryVideos: "Videos",
+	categoryDocuments: "Documents",
+	categoryOther: "Other",
+	indexOf: "Index of {path}",
+	home: "Home",
+	breadcrumb: "Breadcrumb",
+	archive: "File archive",
+	searchDirectory: "Search this directory",
+	searchFiles: "Search files",
+	search: "Search",
+	types: "Types",
+	directory: "directory",
+	file: "file",
+	link: "link",
+	folder: "Folder",
+	sort: "Sort",
+	name: "Name",
+	size: "Size",
+	modified: "Modified",
+	names: "Names",
+	natural: "Natural",
+	locale: "Locale",
+	unicode: "Unicode",
+	order: "Order",
+	ascending: "Ascending",
+	descending: "Descending",
+	directoriesFirst: "Folders first",
+	appearance: "Appearance",
+	system: "System",
+	light: "Light",
+	dark: "Dark",
+	searchArchive: "Search archive",
+	archiveSearchInput: "Search archive files",
+	entries: "{count} entries",
+	pageEntries: "{total} entries · {count} on this page",
+	loading: "Loading…",
+	noMatches: "No matching entries.",
+	empty: "This directory is empty.",
+	pagination: "Pagination",
+	previous: "Previous",
+	next: "Next",
+	page: "Page {page} of {pages}",
+	keyboardHelp: "Arrow keys select files · Home / End jump · / searches · Backspace opens parent",
+	modifiedTime: "Modified time",
+	close: "Close",
+	unknown: "Unknown",
+	unavailable: "Target unavailable",
+	beginArchive: "Enter a search to begin.",
+	searchingArchive: "Searching archive…",
+	archiveResults: "{count} results",
+	truncatedResults: "Showing {shown} of {count} results",
+	archiveError: "Could not load archive search. Try again.",
+	listingError: "Could not load complete directory data. Native page links remain available.",
+	folderError: "Could not open the folder. Its native link remains available.",
+	updatesError: "Live updates disconnected. Refresh to retry.",
+	retry: "Retry",
+	openNative: "Open folder directly",
+	categories: "File categories",
+	items: "{count} items",
+	filesIn: "Files in {path}",
+	controller: "Controller · Confirm / Back",
+	color: "Color",
+	pauseMotion: "Pause motion",
+	resumeMotion: "Resume motion",
+	copyLink: "Copy link",
+	copyPath: "Copy path",
+	download: "Download",
+	copied: "Copied.",
+	copyError: "Could not copy. Use the native link or select the path.",
+	repository: "Repository",
+	author: "by",
+	target: "Target",
+	newTab: "opens in a new tab"
+};
+function resolveCustomization(options = {}) {
+	const language = options.language === void 0 ? "en" : options.language, locale = options.locale === void 0 ? "en-US" : options.locale, timeZone = options.timeZone === void 0 ? "UTC" : options.timeZone;
+	for (const [key, value] of Object.entries({
+		language,
+		locale,
+		timeZone
+	})) if (typeof value !== "string" || !value) throw new TypeError(`${key} must be a non-empty string`);
+	new Intl.DateTimeFormat(locale, { timeZone });
+	const direction = options.direction ?? "ltr";
+	if (direction !== "ltr" && direction !== "rtl") throw new TypeError("direction must be ltr or rtl");
+	const labels = { ...defaultLabels };
+	if (options.labels !== void 0) {
+		if (typeof options.labels !== "object" || options.labels === null || Array.isArray(options.labels)) throw new TypeError("labels must be an object");
+		for (const [key, value] of Object.entries(options.labels)) {
+			if (!Object.hasOwn(labels, key) || typeof value !== "string") throw new TypeError(`Unsupported label or value: ${key}`);
+			Object.assign(labels, { [key]: value });
+		}
+	}
+	const brand = options.brand ?? {};
+	if (typeof brand !== "object" || brand === null || Array.isArray(brand)) throw new TypeError("brand must be an object");
+	for (const [key, value] of Object.entries(brand)) {
+		if (![
+			"name",
+			"logoUrl",
+			"logoAlt",
+			"footerText",
+			"footerUrl",
+			"faviconUrl"
+		].includes(key) || typeof value !== "string") throw new TypeError(`Unsupported brand option or value: ${key}`);
+		if (key.endsWith("Url") && !/^https?:\/\//i.test(value) && !(value.startsWith("/") && !value.startsWith("//"))) throw new TypeError(`brand.${key} must be an HTTP(S) or root-relative URL`);
+	}
+	const columns = options.columns ?? [
+		"name",
+		"size",
+		"modified"
+	];
+	if (!Array.isArray(columns) || !columns.includes("name")) throw new TypeError("columns must contain name and unique supported columns");
+	const columnIds = /* @__PURE__ */ new Set();
+	for (const column of columns) {
+		let id;
+		if (typeof column === "string") {
+			if (![
+				"name",
+				"size",
+				"modified"
+			].includes(column)) throw new TypeError("Unsupported column");
+			id = column;
+		} else {
+			if (typeof column !== "object" || column === null || Object.keys(column).some((key) => !["dataKey", "label"].includes(key)) || typeof column.dataKey !== "string" || !column.dataKey || typeof column.label !== "string" || !column.label) throw new TypeError("Data columns require dataKey and label");
+			id = "data:" + column.dataKey;
+		}
+		if (columnIds.has(id)) throw new TypeError("columns must contain unique supported columns");
+		columnIds.add(id);
+	}
+	const actions = options.actions ?? [];
+	if (!Array.isArray(actions) || new Set(actions).size !== actions.length || actions.some((key) => ![
+		"copy-link",
+		"copy-path",
+		"download"
+	].includes(key))) throw new TypeError("actions must contain unique supported actions");
+	const cssVariables = options.cssVariables ?? {};
+	if (typeof cssVariables !== "object" || cssVariables === null || Array.isArray(cssVariables)) throw new TypeError("cssVariables must be an object");
+	for (const [key, value] of Object.entries(cssVariables)) if (!/^--[a-zA-Z][a-zA-Z0-9_-]*$/.test(key) || typeof value !== "string" || /[{};<>]/.test(value)) throw new TypeError(`Invalid CSS variable: ${key}`);
+	return {
+		language,
+		dateOptions: {
+			...options.locale === void 0 ? {} : { locale: options.locale },
+			...options.timeZone === void 0 ? {} : { timeZone: options.timeZone }
+		},
+		direction,
+		locale,
+		timeZone,
+		labels,
+		brand: { ...brand },
+		columns: columns.map((column) => typeof column === "string" ? column : { ...column }),
+		actions: [...actions],
+		cssVariables: { ...cssVariables }
+	};
+}
+resolveCustomization();
+function label(ui, key, values = {}) {
+	return ui.labels[key].replace(/\{([a-zA-Z]+)\}/g, (match, name) => Object.hasOwn(values, name) ? String(values[name]) : match);
+}
+const dateFormats = /* @__PURE__ */ new Map();
+function formattedDate(value, ui, local = false) {
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return ui.labels.unknown;
+	if (ui.dateOptions.locale === void 0 && ui.dateOptions.timeZone === void 0) return local ? date.toLocaleString(void 0, {
+		dateStyle: "short",
+		timeStyle: "short"
+	}) : date.toISOString().slice(0, 16).replace("T", " ") + " UTC";
+	const locale = ui.dateOptions.locale, timeZone = ui.dateOptions.timeZone ?? (local ? void 0 : "UTC");
+	const key = String(locale) + "\0" + String(timeZone);
+	let formatter = dateFormats.get(key);
+	if (formatter === void 0) {
+		formatter = new Intl.DateTimeFormat(locale, {
+			timeZone,
+			dateStyle: "short",
+			timeStyle: "short"
+		});
+		if (dateFormats.size >= 32) dateFormats.delete(dateFormats.keys().next().value);
+		dateFormats.set(key, formatter);
+	}
+	return formatter.format(date);
+}
+function customizationCss(ui) {
+	const declarations = Object.entries(ui.cssVariables).map(([key, value]) => `${key}:${value}`).join(";");
+	return declarations ? `:root:root{${declarations}}${ui.cssVariables["--dw-font-family"] ? "body{font-family:var(--dw-font-family)}" : ""}` : "";
+}
+/** Publish only supplied customization instead of repeating defaults in every page. */
+function pickCustomization(options) {
+	const result = {};
+	for (const key of [
+		"language",
+		"direction",
+		"locale",
+		"timeZone",
+		"labels",
+		"brand",
+		"columns",
+		"actions",
+		"cssVariables"
+	]) if (options[key] !== void 0) {
+		const value = options[key];
+		Object.assign(result, { [key]: Array.isArray(value) ? value.map((item) => typeof item === "object" ? { ...item } : item) : typeof value === "object" && value !== null ? { ...value } : value });
+	}
+	return Object.keys(result).length ? result : void 0;
+}
+/** Built-in factories fail on typos instead of silently ignoring configuration. */
+function assertThemeOptions(value, extraKeys) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) throw new TypeError("Theme options must be an object");
+	const allowed = [
+		"language",
+		"direction",
+		"locale",
+		"timeZone",
+		"labels",
+		"brand",
+		"columns",
+		"actions",
+		"cssVariables",
+		...extraKeys
+	];
+	for (const key of Object.keys(value)) if (!allowed.includes(key)) throw new TypeError(`Unsupported theme option: ${key}`);
+}
+function publicDataValue(value) {
+	return value === void 0 || value === null ? "" : typeof value === "object" ? JSON.stringify(value) : String(value);
+}
+//#endregion
 //#region ../shared-theme/src/navigation.ts
 /** Folder snapshots resolve relative URLs before History changes the document URL. */
 async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false, attempt = 0) {
@@ -270,6 +511,25 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
 	const data = value;
 	if (data.version !== 1 || data.theme !== theme || typeof data.title !== "string" || typeof data.path !== "string" || !Number.isSafeInteger(data.total) || Number(data.total) < 0 || !Array.isArray(data.breadcrumbs)) throw new ListingDataError("Unsupported folder snapshot");
 	if (data.metadataHead !== void 0 && typeof data.metadataHead !== "string") throw new ListingDataError("Invalid folder metadata");
+	const sort = data.sort;
+	if (!sort || typeof sort !== "object" || ![
+		"name",
+		"size",
+		"modified"
+	].includes(String(sort.field)) || !["asc", "desc"].includes(String(sort.direction)) || ![
+		"natural",
+		"locale",
+		"unicode"
+	].includes(String(sort.nameMode)) || typeof sort.directoriesFirst !== "boolean") throw new ListingDataError("Invalid folder order");
+	if (theme === "crosswave") {
+		const categories = data.categories;
+		const ids = /* @__PURE__ */ new Set();
+		if (!Array.isArray(categories) || categories.length === 0 || categories.some((category) => {
+			if (typeof category !== "object" || category === null || typeof category.id !== "string" || !category.id || ids.has(category.id) || typeof category.label !== "string" || typeof category.svg !== "string") return true;
+			ids.add(category.id);
+			return false;
+		})) throw new ListingDataError("Invalid folder categories");
+	}
 	const base = document.querySelector("base")?.href ?? pageHref;
 	const link = (raw) => {
 		if (raw === null) return null;
@@ -286,6 +546,17 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
 		} } : {}
 	}));
 	if (entries.length > Number(data.total)) throw new ListingDataError("Invalid folder count");
+	if (data.page !== null) {
+		const page = data.page;
+		if (!page || typeof page !== "object" || !Number.isSafeInteger(page.number) || Number(page.number) < 1 || !Number.isSafeInteger(page.count) || Number(page.count) < Number(page.number) || !Number.isSafeInteger(page.offset) || Number(page.offset) < 0 || Number(page.offset) > Number(data.total) || page.total !== data.total) throw new ListingDataError("Invalid folder pagination");
+		data.page = {
+			...page,
+			href: link(page.href),
+			previousHref: link(page.previousHref),
+			nextHref: link(page.nextHref)
+		};
+	}
+	if (data.ui !== void 0) resolveCustomization(data.ui);
 	const result = {
 		...data,
 		updatesHref: link(data.updatesHref ?? null),
@@ -305,10 +576,10 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
 			};
 		})
 	};
-	if (fresh && result.manifestHref) {
+	if (result.manifestHref) {
 		const loaded = await loadListing(result.manifestHref, {
 			signal,
-			cache: "no-store"
+			cache: fresh ? "no-store" : "default"
 		});
 		if (loaded.manifest.total !== data.total || data.listingRevision !== void 0 && loaded.manifest.revision !== data.listingRevision) {
 			if (attempt < 2) return fetchThemePage(dataHref, pageHref, theme, signal, true, attempt + 1);
@@ -376,6 +647,139 @@ function applyThemeMetadata(page, pageHref) {
 	}
 }
 //#endregion
+//#region ../shared-theme/src/view-state.ts
+const supportedTypes = [
+	"directory",
+	"file",
+	"link"
+];
+function validSort(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const sort = value;
+	return [
+		"name",
+		"size",
+		"modified"
+	].includes(String(sort.field)) && ["asc", "desc"].includes(String(sort.direction)) && [
+		"natural",
+		"locale",
+		"unicode"
+	].includes(String(sort.nameMode)) && typeof sort.directoriesFirst === "boolean";
+}
+function position(value) {
+	return typeof value === "number" && Number.isFinite(value) ? Math.max(0, Math.min(value, 1e9)) : 0;
+}
+/** URL controls are shareable; selection and scroll belong only to one history entry. */
+function readView(href, theme, path, defaults, categories = [], historyState = null) {
+	const params = new URL(href).searchParams;
+	const result = {
+		...defaults,
+		query: (params.get("dw.q") ?? "").slice(0, 4096),
+		selected: null,
+		windowY: 0,
+		listTop: 0
+	};
+	if (theme === "ledger") {
+		const parts = params.get("dw.sort")?.split(":");
+		if (parts?.length === 4) {
+			const sort = {
+				field: parts[0],
+				direction: parts[1],
+				nameMode: parts[2],
+				directoriesFirst: parts[3] === "folders"
+			};
+			if (["folders", "mixed"].includes(parts[3]) && validSort(sort)) result.sort = sort;
+		}
+		if (params.has("dw.types")) {
+			const types = params.get("dw.types").split(",").filter(Boolean);
+			if (types.every((type) => supportedTypes.includes(type))) result.types = [...new Set(types)];
+		}
+	} else {
+		const category = params.get("dw.category");
+		if (category !== null && categories.includes(category)) result.category = category;
+	}
+	if (typeof historyState === "object" && historyState !== null && "dirwell" in historyState) {
+		const state = historyState.dirwell;
+		if (typeof state === "object" && state !== null && "version" in state && state.version === 1 && "theme" in state && state.theme === theme && "path" in state && state.path === path && "view" in state && typeof state.view === "object" && state.view !== null) {
+			const view = state.view;
+			result.selected = typeof view.selected === "string" && view.selected.length <= 4096 ? view.selected : null;
+			result.windowY = position(view.windowY);
+			result.listTop = position(view.listTop);
+		}
+	}
+	return result;
+}
+function viewHref(href, theme, view, defaults) {
+	const url = new URL(href);
+	for (const key of [
+		"dw.q",
+		"dw.sort",
+		"dw.types",
+		"dw.category"
+	]) url.searchParams.delete(key);
+	if (view.query) url.searchParams.set("dw.q", view.query.slice(0, 4096));
+	if (theme === "ledger") {
+		if (view.sort && [
+			"field",
+			"direction",
+			"nameMode",
+			"directoriesFirst"
+		].some((key) => view.sort[key] !== defaults.sort?.[key])) {
+			const sort = view.sort;
+			url.searchParams.set("dw.sort", `${sort.field}:${sort.direction}:${sort.nameMode}:${sort.directoriesFirst ? "folders" : "mixed"}`);
+		}
+		if (view.types && supportedTypes.some((type) => view.types.includes(type) !== (defaults.types ?? supportedTypes).includes(type))) url.searchParams.set("dw.types", view.types.join(","));
+	} else if (view.category && view.category !== defaults.category) url.searchParams.set("dw.category", view.category);
+	return url.href;
+}
+/** History failures never require discarding a successfully loaded view. */
+function createViewHistory(theme) {
+	let committedHref = location.href;
+	let committedState = history.state;
+	const stateFor = (dataHref, path, view) => ({
+		...typeof history.state === "object" && history.state !== null ? history.state : {},
+		dataHref,
+		dirwell: {
+			version: 1,
+			theme,
+			path,
+			...view === void 0 ? {} : { view: {
+				query: view.query,
+				...view.sort === void 0 ? {} : { sort: { ...view.sort } },
+				...view.types === void 0 ? {} : { types: [...view.types] },
+				category: view.category ?? null,
+				selected: view.selected ?? null,
+				windowY: view.windowY ?? 0,
+				listTop: view.listTop ?? 0
+			} }
+		}
+	});
+	return {
+		save(dataHref, path, view, defaults) {
+			if (location.href !== committedHref) return;
+			const href = viewHref(committedHref, theme, view, defaults);
+			const state = stateFor(dataHref, path, view);
+			try {
+				history.replaceState(state, "", href);
+				committedHref = href;
+				committedState = state;
+			} catch {}
+		},
+		commit(dataHref, path, href, push) {
+			const state = stateFor(dataHref, path);
+			if (push) history.pushState(state, "", href);
+			else history.replaceState(state, "", href);
+			committedHref = href;
+			committedState = state;
+		},
+		rollback() {
+			if (location.href !== committedHref) try {
+				history.replaceState(committedState, "", committedHref);
+			} catch {}
+		}
+	};
+}
+//#endregion
 //#region ../shared-theme/src/icons.ts
 const paths = {
 	directory: "<path d=\"M3 7V5h6l2 3h10v12H3Z\"/><path d=\"M3 10h18\"/>",
@@ -404,14 +808,6 @@ function size(bytes) {
 	}
 	return `${value.toFixed(index === 0 || value >= 100 ? 0 : 1)} ${units[index]}`;
 }
-function modified(value, local = false) {
-	const date = new Date(value);
-	if (Number.isNaN(date.getTime())) return "Unknown";
-	return local ? date.toLocaleString(void 0, {
-		dateStyle: "short",
-		timeStyle: "short"
-	}) : `${date.toISOString().slice(0, 16).replace("T", " ")} UTC`;
-}
 //#endregion
 //#region .generated/wave.mjs
 function createWave(canvas, colors, root, moving, onReady) {
@@ -557,11 +953,89 @@ var App_server_default = {
 		required: true
 	} },
 	setup(__props) {
-		const props = __props, model = shallowRef(restoreThemePage(props.model, Boolean(import.meta.hot))), entries = shallowRef(model.value.entries);
-		const query = ref(""), category = ref("all"), selected = ref(null), ready = ref(false), busy = ref(false), error = ref(""), color = ref(props.model.color), paused = ref(!props.model.backgroundMotion), clock = ref(""), pad = ref(false), waveReady = ref(false), pendingUpdates = ref(null), canvas = ref(), search = ref();
+		const props = __props, model = shallowRef(restoreThemePage(props.model, Boolean(import.meta.hot))), entries = shallowRef(model.value.entries), ui = computed(() => resolveCustomization(model.value.ui));
+		const query = ref(""), category = ref(model.value.categories[0]?.id ?? null), selected = ref(null), ready = ref(false), busy = ref(false), error = ref(""), failure = ref(null), color = ref(props.model.color), paused = ref(!props.model.backgroundMotion), clock = ref(""), pad = ref(false), waveReady = ref(false), pendingUpdates = ref(null), canvas = ref(), search = ref(), listScroll = ref(), footerElement = ref(), scrollTop = ref(0), viewportHeight = ref(400), retryRequest = shallowRef(null), heights = shallowRef(/* @__PURE__ */ new Map());
 		const complete = computed(() => entries.value.length === model.value.total), membership = (entry) => Array.isArray(entry.presentation?.categories) ? entry.presentation.categories : [];
-		const rows = computed(() => entries.value.filter((entry) => (category.value === "all" || membership(entry).includes(category.value)) && `${entry.name} ${entry.link?.target ?? ""}`.toLocaleLowerCase().includes(query.value.trim().toLocaleLowerCase()))), active = computed(() => rows.value.find((entry) => entry.id === selected.value) ?? rows.value[0]), heading = computed(() => model.value.categories.find((item) => item.id === category.value)?.label ?? "All files");
+		const rows = computed(() => entries.value.filter((entry) => membership(entry).includes(category.value) && `${entry.name} ${entry.link?.target ?? ""}`.toLocaleLowerCase().includes(query.value.trim().toLocaleLowerCase()))), active = computed(() => rows.value.find((entry) => entry.id === selected.value) ?? rows.value[0]), heading = computed(() => model.value.categories.find((item) => item.id === category.value)?.label ?? ui.value.labels.allFiles);
 		const nodes = /* @__PURE__ */ new Map();
+		const virtual = computed(() => ready.value && rows.value.length > 500);
+		const offsets = computed(() => {
+			const result = [0];
+			for (const entry of rows.value) result.push(result.at(-1) + (heights.value.get(entry.id) ?? 76));
+			return result;
+		});
+		const start = computed(() => {
+			if (!virtual.value) return 0;
+			const position = Math.max(0, scrollTop.value - (model.value.parentHref ? 76 : 0));
+			let low = 0, high = rows.value.length;
+			while (low < high) {
+				const middle = low + high >> 1;
+				if (offsets.value[middle + 1] <= position) low = middle + 1;
+				else high = middle;
+			}
+			return Math.max(0, low - 5);
+		});
+		const end = computed(() => {
+			if (!virtual.value) return rows.value.length;
+			let low = 0, high = rows.value.length;
+			while (low < high) {
+				const middle = low + high >> 1;
+				if (offsets.value[middle + 1] <= scrollTop.value + viewportHeight.value) low = middle + 1;
+				else high = middle;
+			}
+			return Math.min(rows.value.length, Math.max(start.value + 35, low + 5));
+		});
+		const visibleRows = computed(() => rows.value.slice(start.value, end.value));
+		const heightCache = /* @__PURE__ */ new Map();
+		let rowObserver, layoutObserver, viewHistory, measuredWidth;
+		function measureLayout() {
+			if (!listScroll.value) return;
+			const width = listScroll.value.clientWidth;
+			if (measuredWidth !== void 0 && width !== measuredWidth) {
+				heightCache.clear();
+				heights.value = new Map([...nodes].map(([id, node]) => [id, node.getBoundingClientRect().height]));
+			}
+			measuredWidth = width;
+			const footerHeight = footerElement.value?.getBoundingClientRect().height ?? 82;
+			document.documentElement.style.setProperty("--cw-footer-height", footerHeight + "px");
+			const available = Math.max(160, innerHeight - listScroll.value.getBoundingClientRect().top - footerHeight - 24);
+			viewportHeight.value = available;
+			listScroll.value.style.setProperty("--cw-list-height", available + "px");
+		}
+		watch([virtual, () => model.value.path], () => nextTick(measureLayout));
+		const viewDefaults = (page) => ({
+			query: "",
+			category: page.categories[0]?.id ?? null
+		});
+		function saveView() {
+			if (!viewHistory) return;
+			viewHistory.save(new URL(model.value.dataHref, document.baseURI).href, model.value.path, {
+				query: query.value,
+				category: category.value,
+				selected: selected.value,
+				windowY: window.scrollY,
+				listTop: listScroll.value?.scrollTop ?? 0
+			}, viewDefaults(model.value));
+		}
+		watchEffect((onCleanup) => {
+			if (!ready.value || busy.value) return;
+			const view = {
+				query: query.value,
+				category: category.value,
+				selected: selected.value,
+				listTop: scrollTop.value
+			};
+			const dataHref = model.value.dataHref, path = model.value.path, defaults = viewDefaults(model.value);
+			const frame = requestAnimationFrame(() => viewHistory?.save(new URL(dataHref, document.baseURI).href, path, {
+				...view,
+				windowY: window.scrollY
+			}, defaults));
+			onCleanup(() => cancelAnimationFrame(frame));
+		});
+		watch([query, category], () => {
+			scrollTop.value = 0;
+			if (listScroll.value) listScroll.value.scrollTop = 0;
+		});
 		let wave, gamepad, abort, navigation = 0, timer, lastPad = 0, pressed = /* @__PURE__ */ new Set(), disposed = false, padIdentity = null, motionQuery;
 		function safeHref(entry) {
 			return typeof location !== "undefined" && location.protocol === "file:" && directoryLike(entry) && !entry.exitsExplorer && entry.href?.endsWith("/") ? entry.href + "index.html" : entry.href;
@@ -577,67 +1051,113 @@ var App_server_default = {
 				});
 				if (token === navigation && !local.signal.aborted && !disposed) entries.value = data.entries;
 			} catch (cause) {
-				if (token === navigation && !local.signal.aborted) error.value = "Could not load complete directory data. Native page links remain available.";
+				if (token === navigation && !local.signal.aborted) {
+					error.value = ui.value.labels.listingError;
+					failure.value = "listing";
+				}
 			} finally {
 				if (token === navigation) busy.value = false;
 			}
 		}
-		async function openFolder(dataHref, url, push, refresh = false) {
+		async function openFolder(dataHref, url, push, refresh = false, restoreState = null, fresh = false) {
+			if (push) saveView();
 			const token = ++navigation;
 			abort?.abort();
 			const local = abort = new AbortController();
 			busy.value = true;
 			error.value = "";
+			failure.value = null;
 			try {
-				const next = await fetchThemePage(dataHref, url, "crosswave", local.signal, refresh);
+				const next = await fetchThemePage(dataHref, url, "crosswave", local.signal, refresh || fresh);
 				let nextEntries = next.entries;
 				if (refresh && next.manifestHref && nextEntries.length !== next.total) nextEntries = (await loadListing(next.manifestHref, {
 					signal: local.signal,
 					cache: "no-store"
 				})).entries;
 				if (token !== navigation || local.signal.aborted || disposed) return;
+				if (!refresh) viewHistory.commit(next.dataHref, next.path, url, push);
+				if (next.path !== model.value.path) {
+					heightCache.set(model.value.path, heights.value);
+					if (heightCache.size > 8) heightCache.delete(heightCache.keys().next().value);
+					heights.value = heightCache.get(next.path) ?? /* @__PURE__ */ new Map();
+				}
 				model.value = next;
+				retryRequest.value = null;
 				entries.value = nextEntries;
 				if (!refresh) {
-					query.value = "";
-					selected.value = null;
-					category.value = "all";
+					const view = readView(url, "crosswave", next.path, viewDefaults(next), next.categories.map((item) => item.id), restoreState);
+					query.value = view.query;
+					selected.value = view.selected;
+					category.value = view.category;
 				}
-				if (push) history.pushState({ dataHref: next.dataHref }, "", url);
 				applyThemeMetadata(next, url);
 				await loadComplete();
+				if (!refresh) {
+					const view = readView(url, "crosswave", next.path, viewDefaults(next), next.categories.map((item) => item.id), restoreState);
+					await nextTick();
+					if (selected.value && !rows.value.some((entry) => entry.id === selected.value)) selected.value = null;
+					scrollTop.value = view.listTop;
+					if (listScroll.value) listScroll.value.scrollTop = view.listTop;
+					await nextTick();
+					window.scrollTo({ top: view.windowY });
+					if (restoreState && selected.value) nodes.get(selected.value)?.querySelector("a")?.focus({ preventScroll: true });
+				}
 			} catch (cause) {
-				if (token === navigation && !local.signal.aborted) error.value = "Could not open the folder. Its native link remains available.";
+				if (token === navigation && !local.signal.aborted) {
+					error.value = ui.value.labels.folderError;
+					failure.value = "folder";
+					retryRequest.value = [
+						dataHref,
+						url,
+						push,
+						refresh,
+						restoreState
+					];
+					viewHistory?.rollback();
+				}
 			} finally {
 				if (token === navigation) busy.value = false;
 			}
 		}
 		async function move(index) {
-			const entry = rows.value[Math.max(0, Math.min(rows.value.length - 1, index))];
+			const target = Math.max(0, Math.min(rows.value.length - 1, index));
+			const entry = rows.value[target];
 			if (!entry) return;
 			selected.value = entry.id;
+			if (virtual.value) {
+				scrollTop.value = Math.max(0, offsets.value[target] - 100 + (model.value.parentHref ? 76 : 0));
+				if (listScroll.value) listScroll.value.scrollTop = scrollTop.value;
+			}
 			await nextTick();
 			const node = nodes.get(entry.id);
 			node?.querySelector("a")?.focus({ preventScroll: true });
 			node?.scrollIntoView({ block: "nearest" });
 		}
-		function stepCategory(delta) {
+		async function stepCategory(delta) {
+			if (ui.value.direction === "rtl") delta = -delta;
+			const moveFocus = document.activeElement?.getAttribute("role") === "tab";
 			const items = model.value.categories, index = items.findIndex((item) => item.id === category.value);
 			category.value = items[(index + delta + items.length) % items.length].id;
 			selected.value = null;
+			if (moveFocus) {
+				await nextTick();
+				document.getElementById("cw-tab-" + category.value)?.focus({ preventScroll: true });
+			}
 		}
-		function confirm() {
+		async function confirm() {
 			if (!active.value || busy.value) return;
+			await move(rows.value.findIndex((entry) => entry.id === active.value.id));
 			(nodes.get(active.value.id)?.querySelector("a"))?.click();
 		}
 		function parent() {
 			if (model.value.parentHref) {
-				if (location.protocol === "file:") location.href = model.value.parentHref;
+				if (location.protocol === "file:" || typeof model.value.parentDataHref !== "string") location.href = model.value.parentHref;
 				else openFolder(model.value.parentDataHref, new URL(model.value.parentHref, document.baseURI).href, true);
 			}
 		}
 		function keyboard(event) {
 			if (event.isComposing || event.altKey || event.ctrlKey || event.metaKey) return;
+			if (event.target?.closest?.("[data-dirwell-actions]")) return;
 			if (/INPUT|TEXTAREA|SELECT/.test(event.target?.tagName ?? "")) {
 				if (event.key === "Escape") query.value = "";
 				return;
@@ -736,7 +1256,7 @@ var App_server_default = {
 				.38
 			]
 		};
-		const onPop = (event) => event.state?.dataHref ? openFolder(event.state.dataHref, location.href, false) : location.reload();
+		const onPop = (event) => event.state?.dataHref ? openFolder(event.state.dataHref, location.href, false, false, event.state) : location.reload();
 		const suspend = () => {
 			gamepad?.pause();
 			controller(null);
@@ -757,7 +1277,36 @@ var App_server_default = {
 			ready.value = true;
 			document.body.setAttribute("data-cw-enhanced", "");
 			abort = new AbortController();
-			history.replaceState({ dataHref: new URL(model.value.dataHref, document.baseURI).href }, "");
+			if (typeof ResizeObserver !== "undefined") {
+				rowObserver = new ResizeObserver((observations) => {
+					const next = new Map(heights.value);
+					let changed = false;
+					for (const observation of observations) {
+						const id = observation.target.dataset.id;
+						const height = observation.target.getBoundingClientRect().height;
+						if (height > 0 && next.get(id) !== height) {
+							next.set(id, height);
+							changed = true;
+						}
+					}
+					if (changed) heights.value = next;
+				});
+				for (const node of nodes.values()) rowObserver.observe(node);
+				layoutObserver = new ResizeObserver(measureLayout);
+				if (footerElement.value) layoutObserver.observe(footerElement.value);
+				const header = document.querySelector("[data-dirwell-theme='crosswave'] .cw-top");
+				if (header) layoutObserver.observe(header);
+			}
+			measureLayout();
+			window.addEventListener("resize", measureLayout);
+			viewHistory = createViewHistory("crosswave");
+			const view = readView(location.href, "crosswave", model.value.path, viewDefaults(model.value), model.value.categories.map((item) => item.id), history.state);
+			query.value = view.query;
+			category.value = view.category;
+			selected.value = view.selected;
+			scrollTop.value = view.listTop;
+			if (listScroll.value) listScroll.value.scrollTop = view.listTop;
+			saveView();
 			try {
 				const stored = localStorage.getItem("dirwell-crosswave-color");
 				if (Object.hasOwn(colors, stored)) color.value = stored;
@@ -785,7 +1334,8 @@ var App_server_default = {
 				gamepad.resume();
 				watchEffect(() => controller(gamepad.gamepads.value.find((value) => value.connected && value.mapping === "standard") ?? null), { flush: "sync" });
 			}
-			const updateClock = () => clock.value = (/* @__PURE__ */ new Date()).toLocaleTimeString([], {
+			const updateClock = () => clock.value = (/* @__PURE__ */ new Date()).toLocaleTimeString(ui.value.dateOptions.locale, {
+				timeZone: ui.value.dateOptions.timeZone,
 				hour: "2-digit",
 				minute: "2-digit"
 			});
@@ -804,9 +1354,15 @@ var App_server_default = {
 			if (!href || typeof EventSource === "undefined") return;
 			const updates = new EventSource(href);
 			updates.onmessage = () => pendingUpdates.value = href;
-			updates.onerror = () => error.value = "Live updates disconnected. Refresh to retry.";
+			updates.onerror = () => {
+				error.value = ui.value.labels.updatesError;
+				failure.value = "updates";
+			};
 			updates.onopen = () => {
-				if (error.value.startsWith("Live updates")) error.value = "";
+				if (failure.value === "updates") {
+					error.value = "";
+					failure.value = null;
+				}
 			};
 			onCleanup(() => updates.close());
 		});
@@ -831,6 +1387,9 @@ var App_server_default = {
 			disposed = true;
 			document.body.removeAttribute("data-cw-enhanced");
 			abort?.abort();
+			rowObserver?.disconnect();
+			layoutObserver?.disconnect();
+			window.removeEventListener("resize", measureLayout);
 			gamepad?.pause();
 			wave?.dispose();
 			clearInterval(timer);
@@ -844,25 +1403,29 @@ var App_server_default = {
 		return (_ctx, _push, _parent, _attrs) => {
 			_push(`<!--[--><div class="cw-background"${ssrRenderAttr("data-ready", waveReady.value ? true : void 0)}><canvas aria-hidden="true"></canvas><svg class="cw-fallback-wave" aria-hidden="true" viewBox="0 0 1200 600"><path d="M-100 400 Q400 150 1300 340"></path></svg></div><header class="cw-top"><div class="cw-brand">`);
 			ssrRenderSlot(_ctx.$slots, "header", { model: model.value }, () => {
-				_push(`<a${ssrRenderAttr("href", model.value.rootHref)}>${ssrInterpolate(model.value.title)}</a>`);
+				if (ui.value.brand.logoUrl) _push(`<img${ssrRenderAttr("src", ui.value.brand.logoUrl)}${ssrRenderAttr("alt", ui.value.brand.logoAlt ?? "")} width="40" height="40">`);
+				else _push(`<!---->`);
+				_push(`<a${ssrRenderAttr("href", model.value.rootHref)}>${ssrInterpolate(ui.value.brand.name ?? model.value.title)}</a>`);
 			}, _push, _parent);
-			_push(`</div><nav class="cw-location" aria-label="Breadcrumb"><a${ssrRenderAttr("href", model.value.rootHref)}>Home</a><!--[-->`);
+			_push(`</div><nav class="cw-location"${ssrRenderAttr("aria-label", ui.value.labels.breadcrumb)}><a${ssrRenderAttr("href", model.value.rootHref)}>${ssrInterpolate(ui.value.labels.home)}</a><!--[-->`);
 			ssrRenderList(model.value.breadcrumbs, (crumb) => {
 				_push(`<!--[--> / <a${ssrRenderAttr("href", crumb.href)}>${ssrInterpolate(crumb.name)}</a><!--]-->`);
 			});
 			_push(`<!--]--></nav>`);
 			if (ready.value) _push(`<div class="cw-clock">${ssrInterpolate(clock.value)}</div>`);
 			else _push(`<!---->`);
-			_push(`</header><main class="cw-stage" data-framework="vue"${ssrRenderAttr("aria-busy", busy.value)}><h1 class="cw-sr">Files in ${ssrInterpolate(model.value.path || "/")}</h1><nav class="cw-rail" aria-label="File categories"${ssrRenderDynamicAttr("hidden", !ready.value)}><div class="cw-categories" role="tablist"><!--[-->`);
+			_push(`</header><main class="cw-stage" data-framework="vue"${ssrRenderAttr("aria-busy", busy.value)}><h1 class="cw-sr">${ssrInterpolate(unref(label)(ui.value, "filesIn", { path: model.value.path || "/" }))}</h1><nav class="cw-rail"${ssrRenderAttr("aria-label", ui.value.labels.categories)}${ssrRenderDynamicAttr("hidden", !ready.value)}><div class="cw-categories" role="tablist"><!--[-->`);
 			ssrRenderList(model.value.categories, (item) => {
 				_push(`<button role="tab"${ssrRenderAttr("id", "cw-tab-" + item.id)} aria-controls="cw-panel"${ssrRenderAttr("aria-selected", category.value === item.id)}${ssrRenderAttr("tabindex", category.value === item.id ? 0 : -1)} class="${ssrRenderClass(["cw-category", { "cw-active": category.value === item.id }])}"${ssrIncludeBooleanAttr(!complete.value) ? " disabled" : ""}><span>${item.svg ?? ""}</span><span>${ssrInterpolate(item.label)}</span><small>${ssrInterpolate(entries.value.filter((entry) => membership(entry).includes(item.id)).length)}</small></button>`);
 			});
-			_push(`<!--]--></div></nav><section class="cw-browser" id="cw-panel" role="tabpanel"${ssrRenderAttr("aria-labelledby", "cw-tab-" + category.value)}><div class="cw-list-head"><div class="cw-directory"><h2>${ssrInterpolate(heading.value)}</h2><span data-cw-count>${ssrInterpolate(complete.value ? rows.value.length : entries.value.length)} items</span></div><label class="cw-search">Search<input type="search"${ssrRenderAttr("value", query.value)}${ssrIncludeBooleanAttr(!ready.value || !complete.value) ? " disabled" : ""}></label></div><div class="cw-list-scroll"><ul class="cw-files">`);
+			_push(`<!--]--></div></nav><section class="cw-browser" id="cw-panel" role="tabpanel"${ssrRenderAttr("aria-labelledby", "cw-tab-" + category.value)}><div class="cw-list-head"><div class="cw-directory"><h2>${ssrInterpolate(heading.value)}</h2><span data-cw-count>${ssrInterpolate(unref(label)(ui.value, "items", { count: complete.value ? rows.value.length : entries.value.length }))}</span></div><label class="cw-search"><span>${ssrInterpolate(ui.value.labels.search)}</span><input type="search"${ssrRenderAttr("value", query.value)}${ssrIncludeBooleanAttr(!ready.value || !complete.value) ? " disabled" : ""}></label></div><div class="cw-list-scroll"${ssrRenderAttr("data-virtual", virtual.value)}><ul class="cw-files">`);
 			if (model.value.parentHref) _push(`<li class="cw-row"><a${ssrRenderAttr("href", model.value.parentHref)} class="cw-entry">../</a></li>`);
 			else _push(`<!---->`);
+			if (start.value) _push(`<li aria-hidden="true" style="${ssrRenderStyle({ height: offsets.value[start.value] + "px" })}"></li>`);
+			else _push(`<!---->`);
 			_push(`<!--[-->`);
-			ssrRenderList(rows.value, (entry) => {
-				_push(`<li class="${ssrRenderClass(["cw-row", { "cw-selected": active.value?.id === entry.id }])}" data-cw-entry${ssrRenderAttr("data-id", entry.id)}>`);
+			ssrRenderList(visibleRows.value, (entry, visibleIndex) => {
+				_push(`<li${ssrRenderAttr("aria-posinset", start.value + visibleIndex + 1)}${ssrRenderAttr("aria-setsize", rows.value.length)} class="${ssrRenderClass(["cw-row", { "cw-selected": active.value?.id === entry.id }])}" data-cw-entry${ssrRenderAttr("data-custom-columns", Boolean(model.value.ui?.columns))}${ssrRenderAttr("data-id", entry.id)}>`);
 				if (entry.href) {
 					_push(`<a class="cw-entry"${ssrRenderAttr("href", safeHref(entry))}${ssrRenderAttr("target", entry.exitsExplorer ? "_blank" : void 0)}${ssrRenderAttr("rel", entry.exitsExplorer ? "noopener" : void 0)}>`);
 					ssrRenderSlot(_ctx.$slots, "row", {
@@ -870,10 +1433,22 @@ var App_server_default = {
 						entry,
 						selected: selected.value === entry.id
 					}, () => {
-						_push(`<span class="cw-entry-icon" aria-hidden="true">${unref(entryIcon)(entry.kind === "symlink" ? "link" : unref(directoryLike)(entry) ? "directory" : "file") ?? ""}</span><span class="cw-entry-label"><span class="cw-name">${ssrInterpolate(entry.name)}${ssrInterpolate(unref(directoryLike)(entry) ? "/" : "")}</span>`);
-						if (entry.link) _push(`<span class="cw-target">${ssrInterpolate(entry.link.target)}</span>`);
-						else _push(`<!---->`);
-						_push(`<span class="cw-row-meta">${ssrInterpolate(entry.link?.unavailable ? "Target unavailable" : entry.kind)} · ${ssrInterpolate(unref(directoryLike)(entry) ? "Folder" : unref(size)(entry.size))}</span><span class="cw-row-date">Modified ${ssrInterpolate(unref(modified)(entry.modifiedAt))}</span></span>`);
+						_push(`<span class="cw-entry-icon" aria-hidden="true">${unref(entryIcon)(entry.kind === "symlink" ? "link" : unref(directoryLike)(entry) ? "directory" : "file") ?? ""}</span><span class="cw-entry-label"><!--[-->`);
+						ssrRenderList(ui.value.columns, (column) => {
+							_push(`<!--[-->`);
+							if (column === "name") _push(`<span class="cw-name">${ssrInterpolate(entry.name)}${ssrInterpolate(unref(directoryLike)(entry) ? "/" : "")}</span>`);
+							else _push(`<!---->`);
+							if (entry.link && column === "name") _push(`<span class="cw-target">${ssrInterpolate(entry.link.target)}</span>`);
+							else _push(`<!---->`);
+							if (column === "size") _push(`<span class="cw-row-meta">${ssrInterpolate(entry.link?.unavailable ? ui.value.labels.unavailable : ui.value.labels[entry.kind === "symlink" ? "link" : entry.kind])} · ${ssrInterpolate(unref(directoryLike)(entry) ? ui.value.labels.folder : unref(size)(entry.size))}</span>`);
+							else _push(`<!---->`);
+							if (column === "modified") _push(`<span class="cw-row-date">${ssrInterpolate(ui.value.labels.modified)} ${ssrInterpolate(unref(formattedDate)(entry.modifiedAt, ui.value, ready.value))}</span>`);
+							else _push(`<!---->`);
+							if (typeof column === "object") _push(`<span class="cw-data-value">${ssrInterpolate(column.label)}: ${ssrInterpolate(unref(publicDataValue)(entry.data?.[column.dataKey]))}</span>`);
+							else _push(`<!---->`);
+							_push(`<!--]-->`);
+						});
+						_push(`<!--]--></span>`);
 					}, _push, _parent);
 					_push(`</a>`);
 				} else {
@@ -887,40 +1462,76 @@ var App_server_default = {
 					}, _push, _parent);
 					_push(`</span>`);
 				}
+				if (ui.value.actions.length || _ctx.$slots.actions) {
+					_push(`<span data-dirwell-actions class="cw-row-actions">`);
+					ssrRenderSlot(_ctx.$slots, "actions", {
+						model: model.value,
+						entry,
+						selected: selected.value === entry.id
+					}, null, _push, _parent);
+					_push(`<!--[-->`);
+					ssrRenderList(ui.value.actions, (action) => {
+						_push(`<!--[-->`);
+						if (action === "download" && entry.href && !unref(directoryLike)(entry) && !entry.link?.unavailable) _push(`<a${ssrRenderAttr("href", safeHref(entry))} download>${ssrInterpolate(ui.value.labels.download)}</a>`);
+						else if (action !== "download") _push(`<button${ssrIncludeBooleanAttr(!ready.value || action === "copy-link" && !entry.href) ? " disabled" : ""}${ssrRenderAttr("aria-label", (action === "copy-link" ? ui.value.labels.copyLink : ui.value.labels.copyPath) + ": " + entry.name)}>${ssrInterpolate(action === "copy-link" ? ui.value.labels.copyLink : ui.value.labels.copyPath)}</button>`);
+						else _push(`<!---->`);
+						_push(`<!--]-->`);
+					});
+					_push(`<!--]--></span>`);
+				} else _push(`<!---->`);
 				_push(`</li>`);
 			});
-			_push(`<!--]--></ul>`);
-			if (!rows.value.length) _push(`<p class="cw-empty">No matching files.</p>`);
+			_push(`<!--]-->`);
+			if (end.value < rows.value.length) _push(`<li aria-hidden="true" style="${ssrRenderStyle({ height: offsets.value[rows.value.length] - offsets.value[end.value] + "px" })}"></li>`);
+			else _push(`<!---->`);
+			_push(`</ul>`);
+			if (!rows.value.length && !busy.value) _push(`<p class="cw-empty">${ssrInterpolate(model.value.total === 0 ? ui.value.labels.empty : ui.value.labels.noMatches)}</p>`);
 			else _push(`<!---->`);
 			_push(`</div></section>`);
 			if (ready.value && active.value) {
-				_push(`<aside class="cw-detail"><h2>${ssrInterpolate(active.value.name)}</h2><p>${ssrInterpolate(active.value.kind)} · ${ssrInterpolate(unref(directoryLike)(active.value) ? "Folder" : unref(size)(active.value.size))}</p><p>${ssrInterpolate(unref(modified)(active.value.modifiedAt))}</p>`);
+				_push(`<aside class="cw-detail"><h2>${ssrInterpolate(active.value.name)}</h2>`);
+				if (ui.value.columns.includes("size")) _push(`<p>${ssrInterpolate(ui.value.labels[active.value.kind === "symlink" ? "link" : active.value.kind])} · ${ssrInterpolate(unref(directoryLike)(active.value) ? ui.value.labels.folder : unref(size)(active.value.size))}</p>`);
+				else _push(`<!---->`);
+				if (ui.value.columns.includes("modified")) _push(`<p>${ssrInterpolate(unref(formattedDate)(active.value.modifiedAt, ui.value, ready.value))}</p>`);
+				else _push(`<!---->`);
 				if (active.value.link) _push(`<p>${ssrInterpolate(active.value.link.target)}</p>`);
 				else _push(`<!---->`);
 				_push(`</aside>`);
 			} else _push(`<!---->`);
-			_push(`<p role="status" aria-live="polite">${ssrInterpolate(busy.value ? "Loading…" : error.value)}</p>`);
+			_push(`<p role="status" aria-live="polite">${ssrInterpolate(busy.value ? ui.value.labels.loading : error.value)}</p>`);
+			if (failure.value && failure.value !== "copy") _push(`<button${ssrIncludeBooleanAttr(busy.value) ? " disabled" : ""}>${ssrInterpolate(ui.value.labels.retry)}</button>`);
+			else _push(`<!---->`);
+			if (failure.value === "folder" && retryRequest.value) _push(`<a${ssrRenderAttr("href", retryRequest.value[1])}>${ssrInterpolate(ui.value.labels.openNative)}</a>`);
+			else _push(`<!---->`);
 			if (model.value.page?.count > 1 && !complete.value) {
-				_push(`<nav aria-label="Pagination">`);
-				if (model.value.page.previousHref) _push(`<a${ssrRenderAttr("href", model.value.page.previousHref)} rel="prev">Previous</a>`);
+				_push(`<nav${ssrRenderAttr("aria-label", ui.value.labels.pagination)}>`);
+				if (model.value.page.previousHref) _push(`<a${ssrRenderAttr("href", model.value.page.previousHref)} rel="prev">${ssrInterpolate(ui.value.labels.previous)}</a>`);
 				else _push(`<!---->`);
-				_push(` Page ${ssrInterpolate(model.value.page.number)} of ${ssrInterpolate(model.value.page.count)} `);
-				if (model.value.page.nextHref) _push(`<a${ssrRenderAttr("href", model.value.page.nextHref)} rel="next">Next</a>`);
+				_push(` ${ssrInterpolate(unref(label)(ui.value, "page", {
+					page: model.value.page.number,
+					pages: model.value.page.count
+				}))} `);
+				if (model.value.page.nextHref) _push(`<a${ssrRenderAttr("href", model.value.page.nextHref)} rel="next">${ssrInterpolate(ui.value.labels.next)}</a>`);
 				else _push(`<!---->`);
 				_push(`</nav>`);
 			} else _push(`<!---->`);
-			_push(`</main><footer class="cw-bottom"><div class="cw-key-help">`);
+			_push(`</main><footer class="cw-bottom"><div class="${ssrRenderClass(ui.value.brand.footerText || _ctx.$slots.footer ? "cw-custom-footer" : "cw-key-help")}">`);
 			ssrRenderSlot(_ctx.$slots, "footer", { model: model.value }, () => {
-				_push(`Arrow keys navigate · Enter confirms · Backspace returns`);
+				if (ui.value.brand.footerText) {
+					_push(`<!--[-->`);
+					if (ui.value.brand.footerUrl) _push(`<a${ssrRenderAttr("href", ui.value.brand.footerUrl)}>${ssrInterpolate(ui.value.brand.footerText)}</a>`);
+					else _push(`<span>${ssrInterpolate(ui.value.brand.footerText)}</span>`);
+					_push(`<!--]-->`);
+				} else _push(`<!--[-->${ssrInterpolate(ui.value.labels.crosswaveKeyboardHelp)}<!--]-->`);
 			}, _push, _parent);
 			_push(`</div>`);
-			if (pad.value) _push(`<div class="cw-controller">Controller · Confirm / Back</div>`);
+			if (pad.value) _push(`<div class="cw-controller">${ssrInterpolate(ui.value.labels.controller)}</div>`);
 			else _push(`<!---->`);
-			_push(`<label class="cw-appearance">Color<select${ssrIncludeBooleanAttr(!ready.value) ? " disabled" : ""}><!--[-->`);
+			_push(`<label class="cw-appearance">${ssrInterpolate(ui.value.labels.color)}<select${ssrIncludeBooleanAttr(!ready.value) ? " disabled" : ""}><!--[-->`);
 			ssrRenderList(Object.keys(colors), (name) => {
-				_push(`<option${ssrIncludeBooleanAttr(Array.isArray(color.value) ? ssrLooseContain(color.value, null) : ssrLooseEqual(color.value, null)) ? " selected" : ""}>${ssrInterpolate(name)}</option>`);
+				_push(`<option${ssrRenderAttr("value", name)}${ssrIncludeBooleanAttr(Array.isArray(color.value) ? ssrLooseContain(color.value, name) : ssrLooseEqual(color.value, name)) ? " selected" : ""}>${ssrInterpolate(ui.value.labels[name])}</option>`);
 			});
-			_push(`<!--]--></select></label><button class="cw-motion"${ssrIncludeBooleanAttr(!ready.value) ? " disabled" : ""}>${ssrInterpolate(paused.value ? "Resume motion" : "Pause motion")}</button></footer><!--]-->`);
+			_push(`<!--]--></select></label><button class="cw-motion"${ssrIncludeBooleanAttr(!ready.value) ? " disabled" : ""}>${ssrInterpolate(paused.value ? ui.value.labels.resumeMotion : ui.value.labels.pauseMotion)}</button></footer><!--]-->`);
 		};
 	}
 };
@@ -930,7 +1541,44 @@ const renderBody = (model) => renderToString(createSSRApp(App_server_default, {
 //#endregion
 //#region src/index.ts
 function createCrosswaveTheme(options = {}, renderer) {
-	const categories = resolveCrosswaveCategories(options.categories);
+	assertThemeOptions(options, [
+		"title",
+		"categories",
+		"color",
+		"gamepad",
+		"backgroundMotion"
+	]);
+	if (options.title !== void 0 && (typeof options.title !== "string" || !options.title)) throw new TypeError("title must be a non-empty string");
+	if (options.color !== void 0 && ![
+		"azure",
+		"violet",
+		"amber",
+		"rose",
+		"jade",
+		"graphite"
+	].includes(options.color)) throw new TypeError("Unsupported Crosswave color");
+	for (const key of ["gamepad", "backgroundMotion"]) if (options[key] !== void 0 && typeof options[key] !== "boolean") throw new TypeError(`${key} must be a boolean`);
+	const ui = resolveCustomization(options);
+	const publishedUi = pickCustomization(options);
+	const categoryLabels = {
+		all: ui.labels.allFiles,
+		folder: ui.labels.categoryFolders,
+		image: ui.labels.categoryPhotos,
+		audio: ui.labels.categoryMusic,
+		video: ui.labels.categoryVideos,
+		document: ui.labels.categoryDocuments,
+		other: ui.labels.categoryOther
+	};
+	const categories = resolveCrosswaveCategories(options.categories ?? defaultCrosswaveCategories.map((category) => ({
+		...category,
+		label: categoryLabels[category.id] ?? category.label
+	})));
+	let resources;
+	const loadResources = () => resources ??= Promise.all([renderer?.clientScript ?? readFile(new URL("./client.js", import.meta.url), "utf8"), readFile(new URL("./styles.css", import.meta.url), "utf8")]).then(([script, styles]) => ({
+		script,
+		styles,
+		scriptName: `crosswave-client-${createHash("sha256").update(script).digest("hex").slice(0, 16)}.js`
+	}));
 	const theme = {
 		name: "crosswave",
 		searchIndex: false,
@@ -942,7 +1590,8 @@ function createCrosswaveTheme(options = {}, renderer) {
 		}),
 		async render(context) {
 			const model = {
-				...createThemePage(context, theme, options.title ?? "Dirwell"),
+				...createThemePage(context, theme, options.title ?? ui.brand.name ?? "Dirwell"),
+				...publishedUi === void 0 ? {} : { ui: publishedUi },
 				categories: categories.map(({ id, label, svg }) => ({
 					id,
 					label,
@@ -952,11 +1601,10 @@ function createCrosswaveTheme(options = {}, renderer) {
 				gamepad: options.gamepad ?? true,
 				backgroundMotion: options.backgroundMotion ?? true
 			};
-			const script = renderer?.clientScript ?? await readFile(new URL("./client.js", import.meta.url), "utf8"), styles = await readFile(new URL("./styles.css", import.meta.url), "utf8");
-			const scriptName = `crosswave-client-${createHash("sha256").update(script).digest("hex").slice(0, 16)}.js`;
+			const { script, scriptName, styles } = await loadResources();
 			const json = JSON.stringify(model).replaceAll("<", "\\u003c");
 			return {
-				html: `<!doctype html><html lang="en" data-cw-color="${escapeHtml(model.color)}" data-cw-motion="${model.backgroundMotion}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${context.documentBaseHref === null ? "" : `<base href="${escapeHtml(context.documentBaseHref)}">`}${context.metadata?.head ?? `<title>${escapeHtml(model.title)}</title>`}<style>${styles}${renderer?.styles ?? ""}</style></head><body><div data-dirwell-theme="crosswave">${await (renderer?.renderBody ?? renderBody)(model)}</div><script type="application/json" id="dirwell-page-data">${json}<\/script><script ${renderer?.clientType === "module" ? "type=\"module\"" : "defer"} src="${escapeHtml(context.assetHref(scriptName))}"><\/script></body></html>`,
+				html: `<!doctype html><html lang="${escapeHtml(ui.language)}" dir="${ui.direction}" data-cw-color="${escapeHtml(model.color)}" data-cw-motion="${model.backgroundMotion}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${context.documentBaseHref === null ? "" : `<base href="${escapeHtml(context.documentBaseHref)}">`}${context.metadata?.head ?? `<title>${escapeHtml(model.title)}</title>`}${ui.brand.faviconUrl ? `<link rel="icon" href="${escapeHtml(ui.brand.faviconUrl)}">` : ""}<style>${styles}${renderer?.styles ?? ""}${customizationCss(ui)}</style></head><body><div data-dirwell-theme="crosswave">${await (renderer?.renderBody ?? renderBody)(model)}</div><script type="application/json" id="dirwell-page-data">${json}<\/script><script ${renderer?.clientType === "module" ? "type=\"module\"" : "defer"} src="${escapeHtml(context.assetHref(scriptName))}"><\/script></body></html>`,
 				assets: {
 					[scriptName]: script,
 					[pageAsset("crosswave", model.path, model.page?.number ?? 1)]: JSON.stringify(model)