@dirwell/theme-ledger 0.0.1-alpha.1 → 0.0.1

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { copyJsonObject, escapeHtml, projectListingEntry } from "@dirwell/core";
 import path from "node:path";
 import { render } from "svelte/server";
 import * as $ from "svelte/internal/server";
-import { onMount, untrack } from "svelte";
+import { onMount, tick, untrack } from "svelte";
 import { ListingDataError, loadListing, parseListingEntries } from "@dirwell/core/client";
 //#region ../shared-theme/src/page.ts
 const pageAsset = (theme, directory, page = 1) => `${theme}-page-${createHash("sha256").update(directory).digest("hex").slice(0, 24)}-${page}.json`;
@@ -36,7 +36,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",
@@ -79,6 +79,139 @@ function createThemePage(context, theme, title) {
 	};
 }
 //#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\"/>",
@@ -90,6 +223,250 @@ function entryIcon(kind) {
 	return `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths[kind]}</svg>`;
 }
 //#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 columnLabel(column, ui) {
+	return typeof column === "string" ? ui.labels[column] : column.label;
+}
+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) {
@@ -105,6 +482,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;
@@ -121,6 +517,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),
@@ -140,10 +547,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);
@@ -266,19 +673,11 @@ 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/App-server.mjs
 function Ledger($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		let { model: initialModel, header, row, footer } = $$props;
+		let { model: initialModel, header, row, actions, footer } = $$props;
 		const snapshot = untrack(() => restoreThemePage(initialModel, Boolean(import.meta.hot)));
 		let model = snapshot;
 		let entries = snapshot.entries;
@@ -294,7 +693,15 @@ function Ledger($$renderer, $$props) {
 		let ready = false;
 		let busy = false;
 		let error = "";
+		let failure = null;
 		let scrollTop = 0;
+		let viewportHeight = 800;
+		resolveCustomization(snapshot.ui).labels.beginArchive;
+		let ui = $.derived(() => resolveCustomization(model.ui));
+		let countParts = $.derived(() => label(ui(), complete() ? "entries" : "pageEntries", {
+			count: "__COUNT__",
+			total: model.total
+		}).split("__COUNT__"));
 		let heights = /* @__PURE__ */ new Map();
 		$.derived(() => ready && model.updatesHref ? new URL(model.updatesHref, document.baseURI).href : null);
 		let complete = $.derived(() => entries.length === model.total);
@@ -315,9 +722,40 @@ function Ledger($$renderer, $$props) {
 			}
 			return Math.max(0, low - 5);
 		});
-		let end = $.derived(() => virtual() ? Math.min(rows().length, start() + 35) : rows().length);
+		let end = $.derived(() => {
+			if (!virtual()) return rows().length;
+			let low = 0, high = rows().length;
+			while (low < high) {
+				const middle = low + high >> 1;
+				if (offsets()[middle + 1] <= scrollTop + viewportHeight) low = middle + 1;
+				else high = middle;
+			}
+			return Math.min(rows().length, Math.max(start() + 35, low + 5));
+		});
 		let navigation = 0;
 		let abort;
+		let viewHistory;
+		let retryRequest = null;
+		const viewDefaults = (page) => ({
+			query: "",
+			sort: page.sort,
+			types: [
+				"directory",
+				"file",
+				"link"
+			]
+		});
+		function saveView() {
+			if (!viewHistory) return;
+			viewHistory.save(new URL(model.dataHref, document.baseURI).href, model.path, {
+				query,
+				types,
+				sort,
+				selected,
+				windowY: window.scrollY,
+				listTop: scrollTop
+			}, viewDefaults(model));
+		}
 		const isDirectory = directoryLike;
 		function safeHref(record) {
 			if (typeof location !== "undefined" && location.protocol === "file:" && isDirectory(record) && !record.exitsExplorer && record.href?.endsWith("/")) return record.href + "index.html";
@@ -334,38 +772,64 @@ function Ledger($$renderer, $$props) {
 				});
 				if (token === navigation && !local.signal.aborted) entries = loaded.entries;
 			} catch (cause) {
-				if (token === navigation && !local.signal.aborted) error = "Could not load complete directory data. Native page links remain available.";
+				if (token === navigation && !local.signal.aborted) {
+					error = ui().labels.listingError;
+					failure = "listing";
+				}
 			} finally {
 				if (token === navigation) busy = 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 = true;
 			error = "";
+			failure = null;
 			try {
-				const next = await fetchThemePage(dataHref, url, "ledger", local.signal, refresh);
+				const next = await fetchThemePage(dataHref, url, "ledger", 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) return;
+				if (!refresh) viewHistory.commit(next.dataHref, next.path, url, push);
 				model = next;
 				entries = nextEntries;
+				retryRequest = null;
 				if (!refresh) {
-					query = "";
-					selected = null;
-					scrollTop = 0;
+					const view = readView(url, "ledger", next.path, viewDefaults(next), [], restoreState);
+					query = view.query;
+					types = view.types;
+					sort = view.sort;
+					selected = view.selected;
+					scrollTop = view.listTop;
 				}
-				if (push) history.pushState({ dataHref: next.dataHref }, "", url);
 				applyThemeMetadata(next, url);
 				await hydrateData();
-				if (!refresh) window.scrollTo({ top: 0 });
+				if (!refresh) {
+					const view = readView(url, "ledger", next.path, viewDefaults(next), [], restoreState);
+					await tick();
+					if (selected && !rows().some((entry) => entry.id === selected)) selected = null;
+					window.scrollTo({ top: view.windowY });
+					if (restoreState && selected);
+				}
 			} catch (cause) {
-				if (token === navigation && !local.signal.aborted) error = "Could not open this folder. Open its native link or try again.";
+				if (token === navigation && !local.signal.aborted) {
+					error = ui().labels.folderError;
+					failure = "folder";
+					retryRequest = [
+						dataHref,
+						url,
+						push,
+						refresh,
+						restoreState
+					];
+					viewHistory?.rollback();
+				}
 			} finally {
 				if (token === navigation) busy = false;
 			}
@@ -377,6 +841,7 @@ function Ledger($$renderer, $$props) {
 			} catch {}
 		}
 		onMount(() => {
+			viewportHeight = innerHeight;
 			ready = true;
 			abort = new AbortController();
 			try {
@@ -387,9 +852,16 @@ function Ledger($$renderer, $$props) {
 					"dark"
 				].includes(stored)) scheme = stored;
 			} catch {}
-			history.replaceState({ dataHref: new URL(model.dataHref, document.baseURI).href }, "");
+			viewHistory = createViewHistory("ledger");
+			const view = readView(location.href, "ledger", model.path, viewDefaults(model), [], history.state);
+			query = view.query;
+			types = view.types;
+			sort = view.sort;
+			selected = view.selected;
+			scrollTop = view.listTop;
+			saveView();
 			const onPop = (event) => {
-				if (event.state?.dataHref) openFolder(event.state.dataHref, location.href, false);
+				if (event.state?.dataHref) openFolder(event.state.dataHref, location.href, false, false, event.state);
 				else location.reload();
 			};
 			window.addEventListener("popstate", onPop);
@@ -404,14 +876,19 @@ function Ledger($$renderer, $$props) {
 			$$renderer.push("<!--[0-->");
 			header($$renderer, { model });
 			$$renderer.push(`<!---->`);
-		} else $$renderer.push(`<!--[-1--><h1>${$.escape(model.title)}</h1> <span>File archive</span>`);
-		$$renderer.push(`<!--]--></div> <nav aria-label="Breadcrumb"><a${$.attr("href", model.rootHref)}>Home</a><!--[-->`);
+		} else {
+			$$renderer.push("<!--[-1-->");
+			if (ui().brand.logoUrl) $$renderer.push(`<!--[0--><img${$.attr("src", ui().brand.logoUrl)}${$.attr("alt", ui().brand.logoAlt ?? "")} width="40" height="40"/>`);
+			else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--> <h1>${$.escape(ui().brand.name ?? model.title)}</h1> <span>${$.escape(ui().labels.archive)}</span>`);
+		}
+		$$renderer.push(`<!--]--></div> <nav${$.attr("aria-label", ui().labels.breadcrumb)}><a${$.attr("href", model.rootHref)}>${$.escape(ui().labels.home)}</a><!--[-->`);
 		const each_array = $.ensure_array_like(model.breadcrumbs);
 		for (let $$index = 0, $$length = each_array.length; $$index < $$length; $$index++) {
 			let crumb = each_array[$$index];
 			$$renderer.push(`<!---->/ <a${$.attr("href", crumb.href)}>${$.escape(crumb.name)}</a>`);
 		}
-		$$renderer.push(`<!--]--></nav></header> <main data-explorer="" data-framework="svelte"${$.attr("aria-busy", busy)}><div class="toolbar"><label class="search-field">Search this directory<input type="search" placeholder="Search files"${$.attr("value", query)}${$.attr("disabled", !ready || !complete(), true)}/></label> <fieldset${$.attr("disabled", !ready || !complete(), true)}><legend>Types</legend><!--[-->`);
+		$$renderer.push(`<!--]--></nav></header> <main data-explorer="" data-framework="svelte"${$.attr("aria-busy", busy)}><div class="toolbar"><label class="search-field">${$.escape(ui().labels.searchDirectory)}<input type="search"${$.attr("placeholder", ui().labels.searchFiles)}${$.attr("value", query)}${$.attr("disabled", !ready || !complete(), true)}/></label> <fieldset${$.attr("disabled", !ready || !complete(), true)}><legend>${$.escape(ui().labels.types)}</legend><!--[-->`);
 		const each_array_1 = $.ensure_array_like([
 			"directory",
 			"file",
@@ -419,9 +896,9 @@ function Ledger($$renderer, $$props) {
 		]);
 		for (let $$index_1 = 0, $$length = each_array_1.length; $$index_1 < $$length; $$index_1++) {
 			let type = each_array_1[$$index_1];
-			$$renderer.push(`<label><input type="checkbox"${$.attr("checked", types.includes(type), true)}/>${$.escape(type)}</label>`);
+			$$renderer.push(`<label><input type="checkbox"${$.attr("checked", types.includes(type), true)}/>${$.escape(ui().labels[type])}</label>`);
 		}
-		$$renderer.push(`<!--]--></fieldset> <label>Sort`);
+		$$renderer.push(`<!--]--></fieldset> <label>${$.escape(ui().labels.sort)}`);
 		$$renderer.select({
 			value: sort.field,
 			disabled: !ready || !complete(),
@@ -431,16 +908,16 @@ function Ledger($$renderer, $$props) {
 			}
 		}, ($$renderer) => {
 			$$renderer.option({ value: "name" }, ($$renderer) => {
-				$$renderer.push(`Name`);
+				$$renderer.push(`${$.escape(ui().labels.name)}`);
 			});
 			$$renderer.option({ value: "size" }, ($$renderer) => {
-				$$renderer.push(`Size`);
+				$$renderer.push(`${$.escape(ui().labels.size)}`);
 			});
 			$$renderer.option({ value: "modified" }, ($$renderer) => {
-				$$renderer.push(`Modified`);
+				$$renderer.push(`${$.escape(ui().labels.modified)}`);
 			});
 		});
-		$$renderer.push(`</label> <label>Names`);
+		$$renderer.push(`</label> <label>${$.escape(ui().labels.names)}`);
 		$$renderer.select({
 			value: sort.nameMode,
 			disabled: !ready || !complete(),
@@ -450,16 +927,16 @@ function Ledger($$renderer, $$props) {
 			}
 		}, ($$renderer) => {
 			$$renderer.option({ value: "natural" }, ($$renderer) => {
-				$$renderer.push(`Natural`);
+				$$renderer.push(`${$.escape(ui().labels.natural)}`);
 			});
 			$$renderer.option({ value: "locale" }, ($$renderer) => {
-				$$renderer.push(`Locale`);
+				$$renderer.push(`${$.escape(ui().labels.locale)}`);
 			});
 			$$renderer.option({ value: "unicode" }, ($$renderer) => {
-				$$renderer.push(`Unicode`);
+				$$renderer.push(`${$.escape(ui().labels.unicode)}`);
 			});
 		});
-		$$renderer.push(`</label> <label>Order`);
+		$$renderer.push(`</label> <label>${$.escape(ui().labels.order)}`);
 		$$renderer.select({
 			value: sort.direction,
 			disabled: !ready || !complete(),
@@ -469,85 +946,134 @@ function Ledger($$renderer, $$props) {
 			}
 		}, ($$renderer) => {
 			$$renderer.option({ value: "asc" }, ($$renderer) => {
-				$$renderer.push(`Ascending`);
+				$$renderer.push(`${$.escape(ui().labels.ascending)}`);
 			});
 			$$renderer.option({ value: "desc" }, ($$renderer) => {
-				$$renderer.push(`Descending`);
+				$$renderer.push(`${$.escape(ui().labels.descending)}`);
 			});
 		});
-		$$renderer.push(`</label> <label><input type="checkbox"${$.attr("checked", sort.directoriesFirst, true)}${$.attr("disabled", !ready || !complete(), true)}/>Folders first</label> <label>Appearance`);
+		$$renderer.push(`</label> <label><input type="checkbox"${$.attr("checked", sort.directoriesFirst, true)}${$.attr("disabled", !ready || !complete(), true)}/>${$.escape(ui().labels.directoriesFirst)}</label> <label>${$.escape(ui().labels.appearance)}`);
 		$$renderer.select({
 			value: scheme,
 			disabled: !ready,
 			onchange: (event) => updateScheme(event.currentTarget.value)
 		}, ($$renderer) => {
 			$$renderer.option({ value: "system" }, ($$renderer) => {
-				$$renderer.push(`System`);
+				$$renderer.push(`${$.escape(ui().labels.system)}`);
 			});
 			$$renderer.option({ value: "light" }, ($$renderer) => {
-				$$renderer.push(`Light`);
+				$$renderer.push(`${$.escape(ui().labels.light)}`);
 			});
 			$$renderer.option({ value: "dark" }, ($$renderer) => {
-				$$renderer.push(`Dark`);
+				$$renderer.push(`${$.escape(ui().labels.dark)}`);
 			});
 		});
-		$$renderer.push(`</label> <button${$.attr("disabled", !ready || !model.searchIndexHref, true)}>Search archive</button></div> <section class="listing-card"><div class="listing-summary"><span data-visible-count="">${$.escape(complete() ? rows().length : entries.length)}</span> entries`);
-		if (!complete()) $$renderer.push(`<!--[0-->on this page · ${$.escape(model.total)} in directory`);
+		$$renderer.push(`</label> `);
+		if (model.searchIndexHref) $$renderer.push(`<!--[0--><button${$.attr("disabled", !ready || !model.searchIndexHref, true)}>${$.escape(ui().labels.searchArchive)}</button>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--></div> <section class="listing-card"><div class="listing-summary">${$.escape(countParts()[0])}<span data-visible-count="">${$.escape(complete() ? rows().length : entries.length)}</span>${$.escape(countParts().slice(1).join("__COUNT__"))}<span role="status" aria-live="polite">${$.escape(busy ? ui().labels.loading : error)}</span></div> `);
+		if (failure && failure !== "copy") $$renderer.push(`<!--[0--><button${$.attr("disabled", busy, true)}>${$.escape(ui().labels.retry)}</button>`);
 		else $$renderer.push("<!--[-1-->");
-		$$renderer.push(`<!--]--><span role="status" aria-live="polite">${$.escape(busy ? "Loading…" : error)}</span></div> <div class="entry-head"><span>Name</span><span>Size</span><span>Modified</span></div> <ul class="entry-list">`);
+		$$renderer.push(`<!--]--> `);
+		if (failure === "folder" && retryRequest) $$renderer.push(`<!--[0--><a${$.attr("href", retryRequest[1])}>${$.escape(ui().labels.openNative)}</a>`);
+		else $$renderer.push("<!--[-1-->");
+		$$renderer.push(`<!--]--> <div class="entry-head"${$.attr("data-custom-columns", Boolean(model.ui?.columns))}${$.attr_style("", { "grid-template-columns": model.ui?.columns ? ui().columns.map((column) => column === "name" ? "minmax(0,1fr)" : typeof column === "object" ? "minmax(0,12rem)" : "minmax(6rem,max-content)").join(" ") : void 0 })}><!--[-->`);
+		const each_array_2 = $.ensure_array_like(ui().columns);
+		for (let $$index_2 = 0, $$length = each_array_2.length; $$index_2 < $$length; $$index_2++) {
+			let column = each_array_2[$$index_2];
+			$$renderer.push(`<span>${$.escape(columnLabel(column, ui()))}</span>`);
+		}
+		$$renderer.push(`<!--]--></div> <ul class="entry-list">`);
 		if (model.parentHref) $$renderer.push(`<!--[0--><li class="entry"><a${$.attr("href", model.parentHref)}>../</a></li>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
 		if (start()) $$renderer.push(`<!--[0--><li aria-hidden="true"${$.attr_style("", { height: offsets()[start()] + "px" })}></li>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> <!--[-->`);
-		const each_array_2 = $.ensure_array_like(rows().slice(start(), end()));
-		for (let index = 0, $$length = each_array_2.length; index < $$length; index++) {
-			let entry = each_array_2[index];
-			$$renderer.push(`<li class="entry" data-entry=""${$.attr("data-id", entry.id)}${$.attr("data-order", start() + index)}${$.attr("data-active", selected === entry.id)}><span class="identity">`);
-			if (entry.href) {
-				$$renderer.push(`<!--[0--><a class="name"${$.attr("href", safeHref(entry))}${$.attr("target", entry.exitsExplorer ? "_blank" : void 0)}${$.attr("rel", entry.exitsExplorer ? "noopener" : void 0)}>`);
-				if (row) {
-					$$renderer.push("<!--[0-->");
-					row($$renderer, {
-						model,
-						entry,
-						selected: selected === entry.id
-					});
-					$$renderer.push(`<!---->`);
-				} else $$renderer.push(`<!--[-1--><span class="file-icon" aria-hidden="true">${$.html(entryIcon(entryType(entry)))}</span> ${$.escape(entry.name)}${$.escape(isDirectory(entry) ? "/" : "")}`);
-				$$renderer.push(`<!--]--></a>`);
-			} else {
-				$$renderer.push(`<!--[-1--><span>`);
-				if (row) {
+		const each_array_3 = $.ensure_array_like(rows().slice(start(), end()));
+		for (let index = 0, $$length = each_array_3.length; index < $$length; index++) {
+			let entry = each_array_3[index];
+			$$renderer.push(`<li class="entry" data-entry=""${$.attr("data-custom-columns", Boolean(model.ui?.columns))}${$.attr("data-id", entry.id)}${$.attr("data-order", start() + index)}${$.attr("data-active", selected === entry.id)}${$.attr_style("", { "grid-template-columns": model.ui?.columns ? ui().columns.map((column) => column === "name" ? "minmax(0,1fr)" : "minmax(6rem,max-content)").join(" ") : void 0 })}><!--[-->`);
+			const each_array_4 = $.ensure_array_like(ui().columns);
+			for (let $$index_3 = 0, $$length = each_array_4.length; $$index_3 < $$length; $$index_3++) {
+				let column = each_array_4[$$index_3];
+				if (column === "name") {
+					$$renderer.push(`<!--[0--><span class="identity">`);
+					if (entry.href) {
+						$$renderer.push(`<!--[0--><a class="name"${$.attr("href", safeHref(entry))}${$.attr("target", entry.exitsExplorer ? "_blank" : void 0)}${$.attr("rel", entry.exitsExplorer ? "noopener" : void 0)}>`);
+						if (row) {
+							$$renderer.push("<!--[0-->");
+							row($$renderer, {
+								model,
+								entry,
+								selected: selected === entry.id
+							});
+							$$renderer.push(`<!---->`);
+						} else $$renderer.push(`<!--[-1--><span class="file-icon" aria-hidden="true">${$.html(entryIcon(entryType(entry)))}</span> ${$.escape(entry.name)}${$.escape(isDirectory(entry) ? "/" : "")}`);
+						$$renderer.push(`<!--]--></a>`);
+					} else {
+						$$renderer.push(`<!--[-1--><span>`);
+						if (row) {
+							$$renderer.push("<!--[0-->");
+							row($$renderer, {
+								model,
+								entry,
+								selected: selected === entry.id
+							});
+							$$renderer.push(`<!---->`);
+						} else $$renderer.push(`<!--[-1-->${$.escape(entry.name)}`);
+						$$renderer.push(`<!--]--></span>`);
+					}
+					$$renderer.push(`<!--]-->`);
+					if (entry.link) $$renderer.push(`<!--[0--><small class="target">${$.escape(entry.link.unavailable ? ui().labels.unavailable + " · " : "→ ")}${$.escape(entry.link.target)}</small>`);
+					else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]--></span>`);
+				} else if (column === "size") $$renderer.push(`<!--[1--><span class="kind">${$.escape(isDirectory(entry) ? ui().labels.folder : size(entry.size))}</span>`);
+				else if (column === "modified") $$renderer.push(`<!--[2--><button class="timestamp-button"${$.attr("disabled", !ready, true)}><time${$.attr("datetime", entry.modifiedAt)}>${$.escape(formattedDate(entry.modifiedAt, ui(), ready))}</time></button>`);
+				else $$renderer.push(`<!--[-1--><span class="entry-data">${$.escape(publicDataValue(entry.data?.[column.dataKey]))}</span>`);
+				$$renderer.push(`<!--]-->`);
+			}
+			$$renderer.push(`<!--]--> `);
+			if (actions || ui().actions.length) {
+				$$renderer.push(`<!--[0--><span data-dirwell-actions="" style="grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.5rem">`);
+				if (actions) {
 					$$renderer.push("<!--[0-->");
-					row($$renderer, {
+					actions($$renderer, {
 						model,
 						entry,
 						selected: selected === entry.id
 					});
 					$$renderer.push(`<!---->`);
-				} else $$renderer.push(`<!--[-1-->${$.escape(entry.name)}`);
+				} else $$renderer.push("<!--[-1-->");
+				$$renderer.push(`<!--]--> <!--[-->`);
+				const each_array_5 = $.ensure_array_like(ui().actions);
+				for (let $$index_4 = 0, $$length = each_array_5.length; $$index_4 < $$length; $$index_4++) {
+					let action = each_array_5[$$index_4];
+					if (action === "download" && entry.href && !isDirectory(entry) && !entry.link?.unavailable) $$renderer.push(`<!--[0--><a${$.attr("href", safeHref(entry))} download="">${$.escape(ui().labels.download)}</a>`);
+					else if (action !== "download") $$renderer.push(`<!--[1--><button${$.attr("disabled", !ready || action === "copy-link" && !entry.href, true)}${$.attr("aria-label", (action === "copy-link" ? ui().labels.copyLink : ui().labels.copyPath) + ": " + entry.name)}>${$.escape(action === "copy-link" ? ui().labels.copyLink : ui().labels.copyPath)}</button>`);
+					else $$renderer.push("<!--[-1-->");
+					$$renderer.push(`<!--]-->`);
+				}
 				$$renderer.push(`<!--]--></span>`);
-			}
-			$$renderer.push(`<!--]-->`);
-			if (entry.link) $$renderer.push(`<!--[0--><small class="target">${$.escape(entry.link.unavailable ? "Target unavailable · " : "→ ")}${$.escape(entry.link.target)}</small>`);
-			else $$renderer.push("<!--[-1-->");
-			$$renderer.push(`<!--]--></span> <span class="kind">${$.escape(isDirectory(entry) ? "Folder" : size(entry.size))}</span> <button class="timestamp-button"${$.attr("disabled", !ready, true)}><time${$.attr("datetime", entry.modifiedAt)}>${$.escape(modified(entry.modifiedAt, ready))}</time></button></li>`);
+			} else $$renderer.push("<!--[-1-->");
+			$$renderer.push(`<!--]--></li>`);
 		}
 		$$renderer.push(`<!--]--> `);
 		if (end() < rows().length) $$renderer.push(`<!--[0--><li aria-hidden="true"${$.attr_style("", { height: offsets()[rows().length] - offsets()[end()] + "px" })}></li>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></ul> `);
-		if (rows().length === 0) $$renderer.push(`<!--[0--><p>No matching entries.</p>`);
+		if (rows().length === 0 && !busy) $$renderer.push(`<!--[0--><p>${$.escape(model.total === 0 ? ui().labels.empty : ui().labels.noMatches)}</p>`);
 		else $$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--></section> `);
 		if (model.page?.count > 1 && !complete()) {
-			$$renderer.push(`<!--[0--><nav aria-label="Pagination">`);
-			if (model.page.previousHref) $$renderer.push(`<!--[0--><a rel="prev"${$.attr("href", model.page.previousHref)}>Previous</a>`);
+			$$renderer.push(`<!--[0--><nav${$.attr("aria-label", ui().labels.pagination)}>`);
+			if (model.page.previousHref) $$renderer.push(`<!--[0--><a rel="prev"${$.attr("href", model.page.previousHref)}>${$.escape(ui().labels.previous)}</a>`);
 			else $$renderer.push("<!--[-1-->");
-			$$renderer.push(`<!--]--> Page ${$.escape(model.page.number)} of ${$.escape(model.page.count)} `);
-			if (model.page.nextHref) $$renderer.push(`<!--[0--><a rel="next"${$.attr("href", model.page.nextHref)}>Next</a>`);
+			$$renderer.push(`<!--]--> ${$.escape(label(ui(), "page", {
+				page: model.page.number,
+				pages: model.page.count
+			}))} `);
+			if (model.page.nextHref) $$renderer.push(`<!--[0--><a rel="next"${$.attr("href", model.page.nextHref)}>${$.escape(ui().labels.next)}</a>`);
 			else $$renderer.push("<!--[-1-->");
 			$$renderer.push(`<!--]--></nav>`);
 		} else $$renderer.push("<!--[-1-->");
@@ -556,8 +1082,12 @@ function Ledger($$renderer, $$props) {
 			$$renderer.push("<!--[0-->");
 			footer($$renderer, { model });
 			$$renderer.push(`<!---->`);
-		} else $$renderer.push(`<!--[-1--><p class="keyboard-help">Arrow keys select files · Home / End jump · / searches · Backspace opens
-      parent</p>`);
+		} else if (ui().brand.footerText) {
+			$$renderer.push(`<!--[1--><p class="brand-footer">`);
+			if (ui().brand.footerUrl) $$renderer.push(`<!--[0--><a${$.attr("href", ui().brand.footerUrl)}>${$.escape(ui().brand.footerText)}</a>`);
+			else $$renderer.push(`<!--[-1-->${$.escape(ui().brand.footerText)}`);
+			$$renderer.push(`<!--]--></p>`);
+		} else $$renderer.push(`<!--[-1--><p class="keyboard-help">${$.escape(ui().labels.keyboardHelp)}</p>`);
 		$$renderer.push(`<!--]--></main> `);
 		$$renderer.push("<!--[-1-->");
 		$$renderer.push(`<!--]--> `);
@@ -571,6 +1101,11 @@ const renderBody = (model) => render(Ledger, { props: { model } }).body;
 //#endregion
 //#region src/index.ts
 function createLedgerTheme(options = {}, renderer) {
+	assertThemeOptions(options, ["title", "archiveSearch"]);
+	if (options.title !== void 0 && (typeof options.title !== "string" || !options.title)) throw new TypeError("title must be a non-empty string");
+	if (options.archiveSearch !== void 0 && typeof options.archiveSearch !== "boolean") throw new TypeError("archiveSearch must be a boolean");
+	const ui = resolveCustomization(options);
+	const publishedUi = pickCustomization(options);
 	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,
@@ -579,17 +1114,19 @@ function createLedgerTheme(options = {}, renderer) {
 	}));
 	const theme = {
 		name: "ledger",
+		searchIndex: options.archiveSearch ?? true,
 		listing: { pagination: true },
 		entryData: (entry, context) => ({ folderDataHref: folderDataHref(entry, context, "ledger") }),
 		async render(context) {
 			const model = {
-				...createThemePage(context, theme, options.title ?? "Dirwell"),
-				searchIndexHref: context.searchIndexHref
+				...createThemePage(context, theme, options.title ?? ui.brand.name ?? "Dirwell"),
+				...publishedUi === void 0 ? {} : { ui: publishedUi },
+				searchIndexHref: theme.searchIndex === false ? null : context.searchIndexHref
 			};
 			const { script, scriptName, styles } = await loadResources();
 			const json = JSON.stringify(model).replaceAll("<", "\\u003c");
 			return {
-				html: `<!doctype html><html lang="en" data-theme="system"><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="ledger">${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-theme="system"><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="ledger">${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("ledger", model.path, model.page?.number ?? 1)]: JSON.stringify(model)