@vp-tw/dirwell 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/index.d.mts

@@ -36,9 +36,30 @@ interface DefaultThemeOptions {
 export declare function createDefaultTheme(options?: DefaultThemeOptions): ExplorerTheme;
 export declare const defaultTheme: ExplorerTheme;
 //#endregion
+//#region src/theme-crosswave/icons.d.ts
+type CrosswaveIcon = "all" | "folder" | "image" | "audio" | "video" | "document" | "other" | "link" | "back" | "search" | "pause" | "play" | "controller";
+//#endregion
+//#region src/theme-crosswave/categories.d.ts
+type CrosswaveCategoryIcon = CrosswaveIcon | {
+  readonly svg: string;
+};
+type CrosswaveCategoryMatch = "all" | "folders" | "other" | {
+  readonly extensions?: readonly string[];
+  readonly mimeTypes?: readonly string[];
+};
+interface CrosswaveCategory {
+  readonly id: string;
+  readonly label: string;
+  readonly icon?: CrosswaveCategoryIcon;
+  readonly match: CrosswaveCategoryMatch;
+}
+/** Default rail definitions. Supply a mapped/filtered copy to change labels, order, or visibility. */
+export declare const defaultCrosswaveCategories: readonly CrosswaveCategory[];
+//#endregion
 //#region src/theme-crosswave.d.ts
 type CrosswaveColor = "azure" | "violet" | "amber" | "rose" | "jade" | "graphite";
 interface CrosswaveThemeOptions {
+  readonly categories?: readonly CrosswaveCategory[];
   readonly color?: CrosswaveColor;
   readonly backgroundMotion?: boolean;
   readonly pageTransitions?: boolean;
@@ -55,5 +76,5 @@ interface PlainThemeOptions {
 /** A no-icon, no-script theme that leaves navigation and controls to the browser. */
 export declare function createPlainTheme(options?: PlainThemeOptions): ExplorerTheme;
 //#endregion
-export { type BreadcrumbItem, type BreadcrumbsProps, type CrosswaveColor, type CrosswaveThemeOptions, type DefaultThemeIconSet, type DefaultThemeIconVariant, type DefaultThemeRuntimeConfig, type DirectoryData, type DirwellConfig, type DirwellConfigContext, type DirwellConfigInput, type DirwellThemeComponentOverrides, type DirwellThemeComponents, type EmptyStateProps, type EntryKind, type EntryListItem, type EntryListProps, type EntryNavigation, type EntryRowProps, type ExplorerTheme, type FileMetadata, type FileSystemEntry, type FileTimes, type FooterProps, type GenerateOptions, type IconName, type IconProps, type NameSortMode, type OutputNameResolver, type PageShellProps, type PlainThemeOptions, type RenderedPage, type SortDirection, type SortField, type SortOptions, type SymlinkMetadata, type ThemeContext, type ToolbarProps, defineConfig, loadDirwellConfig, resolveGenerateOptions, resolveThemeComponents };
+export { type BreadcrumbItem, type BreadcrumbsProps, type CrosswaveCategory, type CrosswaveCategoryIcon, type CrosswaveCategoryMatch, type CrosswaveColor, type CrosswaveThemeOptions, type DefaultThemeIconSet, type DefaultThemeIconVariant, type DefaultThemeRuntimeConfig, type DirectoryData, type DirwellConfig, type DirwellConfigContext, type DirwellConfigInput, type DirwellThemeComponentOverrides, type DirwellThemeComponents, type EmptyStateProps, type EntryKind, type EntryListItem, type EntryListProps, type EntryNavigation, type EntryRowProps, type ExplorerTheme, type FileMetadata, type FileSystemEntry, type FileTimes, type FooterProps, type GenerateOptions, type IconName, type IconProps, type NameSortMode, type OutputNameResolver, type PageShellProps, type PlainThemeOptions, type RenderedPage, type SortDirection, type SortField, type SortOptions, type SymlinkMetadata, type ThemeContext, type ToolbarProps, defineConfig, loadDirwellConfig, resolveGenerateOptions, resolveThemeComponents };
 //# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -2,6 +2,8 @@ import { a as readGeneratedPage, c as resolveThemeProject, d as utcTimestamp, f
 import { t as resolveThemeComponents } from "./theme-components-CXzvdQY-.mjs";
 import { t as createExplorerDevServer } from "./dev-server-Q7NC1wiB.mjs";
 import { readFile } from "node:fs/promises";
+import { createHash } from "node:crypto";
+import mime from "mime";
 //#region src/theme-crosswave/icons.ts
 const paths = {
 	all: "<rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" rx=\"1\"/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" rx=\"1\"/>",
@@ -23,6 +25,171 @@ function crosswaveIcon(name) {
 	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[name]}</svg>`;
 }
 //#endregion
+//#region src/theme-crosswave/categories.ts
+const documents = [
+	"text/*",
+	"application/pdf",
+	"application/json",
+	"application/*+json",
+	"application/xml",
+	"application/*+xml",
+	"application/msword",
+	"application/rtf",
+	"application/sql",
+	"application/epub+zip",
+	"application/vnd.ms-excel",
+	"application/vnd.ms-powerpoint",
+	"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+	"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+	"application/vnd.openxmlformats-officedocument.presentationml.presentation"
+];
+/** Default rail definitions. Supply a mapped/filtered copy to change labels, order, or visibility. */
+const defaultCrosswaveCategories = Object.freeze([
+	{
+		id: "all",
+		label: "All files",
+		icon: "all",
+		match: "all"
+	},
+	{
+		id: "folder",
+		label: "Folders",
+		icon: "folder",
+		match: "folders"
+	},
+	{
+		id: "image",
+		label: "Photos",
+		icon: "image",
+		match: { mimeTypes: ["image/*"] }
+	},
+	{
+		id: "audio",
+		label: "Music",
+		icon: "audio",
+		match: { mimeTypes: ["audio/*", "application/vnd.apple.mpegurl"] }
+	},
+	{
+		id: "video",
+		label: "Videos",
+		icon: "video",
+		match: { mimeTypes: ["video/*"] }
+	},
+	{
+		id: "document",
+		label: "Documents",
+		icon: "document",
+		match: { mimeTypes: documents }
+	},
+	{
+		id: "other",
+		label: "Other",
+		icon: "other",
+		match: "other"
+	}
+].map((category) => Object.freeze({
+	...category,
+	match: typeof category.match === "string" ? category.match : Object.freeze({
+		...category.match.extensions ? { extensions: Object.freeze([...category.match.extensions]) } : {},
+		...category.match.mimeTypes ? { mimeTypes: Object.freeze([...category.match.mimeTypes]) } : {}
+	})
+})));
+const record = (value) => value !== null && typeof value === "object" && !Array.isArray(value);
+function strings(value, normalize) {
+	if (value === void 0) return void 0;
+	if (!Array.isArray(value)) throw new TypeError("Crosswave category rules must be arrays of strings");
+	return Object.freeze([...new Set(Array.from(value, (item) => {
+		if (typeof item !== "string") throw new TypeError("Crosswave category rules must be arrays of strings");
+		return normalize(item);
+	}))]);
+}
+function extension(value) {
+	const normalized = value.toLowerCase().replace(/^\./, "");
+	if (!/^[a-z0-9+_-]+(?:\.[a-z0-9+_-]+)*$/.test(normalized)) throw new TypeError(`Invalid Crosswave extension: ${value}`);
+	return normalized;
+}
+function mediaType(value) {
+	const normalized = value.toLowerCase();
+	if (!/^[a-z0-9!#$&^_.+-]+\/(?:[a-z0-9!#$&^_.+-]+|\*|\*\+[a-z0-9!#$&^_.-]+)$/.test(normalized)) throw new TypeError(`Invalid Crosswave MIME pattern: ${value}`);
+	return normalized;
+}
+function match(value) {
+	if (value === "all" || value === "folders" || value === "other") return value;
+	if (!record(value) || Object.keys(value).some((key) => !["extensions", "mimeTypes"].includes(key))) throw new TypeError("Crosswave match must be all, folders, other, or extension/MIME rules");
+	const extensions = strings(value.extensions, extension);
+	const mimeTypes = strings(value.mimeTypes, mediaType);
+	if (!extensions?.length && !mimeTypes?.length) throw new TypeError("Crosswave category needs at least one matching rule");
+	return Object.freeze({
+		...extensions ? { extensions } : {},
+		...mimeTypes ? { mimeTypes } : {}
+	});
+}
+function icon(value, rule) {
+	if (value === void 0) return crosswaveIcon(rule === "all" ? "all" : rule === "folders" ? "folder" : "other");
+	if (typeof value === "string" && isCrosswaveIcon(value)) return crosswaveIcon(value);
+	if (record(value) && typeof value.svg === "string" && /^\s*<svg\b/i.test(value.svg) && /<\/svg>\s*$/i.test(value.svg)) return value.svg.replace(/<svg\b/i, "<svg aria-hidden=\"true\"");
+	throw new TypeError("Crosswave icon must be a built-in icon name or trusted SVG markup");
+}
+function isCrosswaveIcon(value) {
+	return [
+		"all",
+		"folder",
+		"image",
+		"audio",
+		"video",
+		"document",
+		"other",
+		"link",
+		"back",
+		"search",
+		"pause",
+		"play",
+		"controller"
+	].includes(value);
+}
+function resolveCrosswaveCategories(value) {
+	const input = value === void 0 ? defaultCrosswaveCategories : value;
+	if (!Array.isArray(input) || !input.length) throw new TypeError("Crosswave categories must be a nonempty array");
+	const ids = /* @__PURE__ */ new Set();
+	return Object.freeze(Array.from(input).map((category) => {
+		if (!record(category) || typeof category.id !== "string" || !/^[a-z][a-z0-9_-]{0,63}$/.test(category.id)) throw new TypeError("Crosswave category id must be a lowercase identifier");
+		if (ids.has(category.id)) throw new TypeError(`Duplicate Crosswave category id: ${category.id}`);
+		ids.add(category.id);
+		if (typeof category.label !== "string" || !category.label.trim()) throw new TypeError("Crosswave category label must be nonempty");
+		const rule = match(category.match);
+		return Object.freeze({
+			id: category.id,
+			label: category.label,
+			svg: icon(category.icon, rule),
+			match: rule
+		});
+	}));
+}
+function matchesMimeType(pattern, type) {
+	if (pattern === type) return true;
+	const [group, subtype] = pattern.split("/");
+	if (!subtype || !type.startsWith(`${group}/`)) return false;
+	return subtype === "*" || subtype.startsWith("*+") && type.endsWith(subtype.slice(1));
+}
+function entryMimeType(entry) {
+	if (entry.kind === "directory" || entry.symlink?.targetKind === "directory") return null;
+	return mime.getType(`./${entry.name}`) ?? (entry.symlink?.targetKind === "file" && !entry.symlink.isBroken && !entry.symlink.isOutsideRoot && !entry.symlink.isTargetExcluded && entry.symlink.targetRelativePath ? mime.getType(`./${entry.symlink.targetRelativePath}`) : null);
+}
+function entryCategory(entry, type) {
+	if (entry.kind === "directory" || entry.symlink?.targetKind === "directory") return "folder";
+	if (type?.startsWith("image/")) return "image";
+	if (type?.startsWith("audio/") || type === "application/vnd.apple.mpegurl") return "audio";
+	if (type?.startsWith("video/")) return "video";
+	if (type && documents.some((pattern) => matchesMimeType(pattern, type))) return "document";
+	return "other";
+}
+function entryCategories(entry, type, categories) {
+	const folder = entry.kind === "directory" || entry.symlink?.targetKind === "directory";
+	const filename = entry.name.toLowerCase();
+	const specific = categories.filter((category) => typeof category.match !== "string" && !folder && (category.match.extensions?.some((ext) => filename.endsWith(`.${ext}`)) || type && category.match.mimeTypes?.some((pattern) => matchesMimeType(pattern, type))));
+	return categories.filter((category) => category.match === "all" || folder && category.match === "folders" || !folder && category.match === "other" && !specific.length || specific.includes(category));
+}
+//#endregion
 //#region src/theme-crosswave/styles.ts
 const crosswaveStyles = String.raw`
 :root{color-scheme:dark;--cw-top:#2b4f85;--cw-bottom:#091a3a;--cw-text:#f7fbff;--cw-muted:#edf4fc;--cw-focus:#fff;--cw-ease:cubic-bezier(.16,1,.3,1);font-family:"Segoe UI",Helvetica,Arial,sans-serif;font-synthesis:none}
@@ -35,6 +202,7 @@ const crosswaveStyles = String.raw`
 .cw-list-scroll{max-height:calc(100svh - 365px);min-height:220px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#d6e8fa66 transparent;padding:14px 12px 24px 8px;scroll-padding-block:20px;overscroll-behavior:contain}.cw-list-scroll::-webkit-scrollbar{width:5px}.cw-list-scroll::-webkit-scrollbar-thumb{background:#d6e8fa66;border-radius:4px}.cw-files{list-style:none;padding:0;margin:0}.cw-row{margin:0;min-height:76px;padding:0}.cw-entry{display:flex;align-items:center;gap:25px;padding:14px 18px;min-height:76px;transition:background .2s,opacity .2s,transform .3s var(--cw-ease);border-radius:7px}.cw-entry-icon{display:flex;width:42px;min-width:42px;align-items:center;justify-content:center;transition:transform .3s var(--cw-ease);filter:drop-shadow(0 3px 2px #08192c66)}.cw-entry-icon svg{width:34px;height:34px}.cw-entry-label{min-width:0;display:block}.cw-name{display:block;font-size:18px;font-weight:400;line-height:1.4;overflow-wrap:anywhere;text-shadow:0 2px 3px #07192b66}.cw-row-meta{display:block;font-size:11px;color:var(--cw-muted);margin-top:3px}.cw-row-date{display:none;font-size:11px;color:var(--cw-muted);margin-top:4px}.cw-target{display:block;font-size:11px;color:var(--cw-muted);overflow-wrap:anywhere;margin-top:4px}.cw-row.cw-selected .cw-entry{background:linear-gradient(90deg,#f4f9ff08,#f4f9ff04);transform:translateX(5px)}.cw-row.cw-selected .cw-entry-icon{transform:scale(1.22)}.cw-row.cw-selected .cw-name{color:#fff}.cw-row:hover .cw-entry{background:#eef7ff08}.cw-unavailable{color:var(--cw-muted)}.cw-notice{position:fixed;bottom:90px;left:48px;right:24px;z-index:3;margin:0;background:var(--cw-bottom);border-radius:4px;font-size:12px;color:var(--cw-muted);padding:12px 24px;max-width:52ch}.cw-empty{padding:36px 28px;color:var(--cw-muted);font-size:15px}.cw-detail{min-width:0;align-self:center;padding:20px 0 28px;view-transition-name:cw-detail}.cw-detail-symbol{margin-bottom:28px;filter:drop-shadow(0 12px 12px #04152e44)}.cw-detail-symbol svg{width:110px;height:110px;stroke-width:.8;opacity:.9}.cw-detail h2{font-size:25px;font-weight:300;margin:0 0 7px;overflow-wrap:anywhere;line-height:1.3;letter-spacing:-.015em}.cw-detail>p{font-size:12px;color:var(--cw-muted);margin:0 0 25px}.cw-detail dl{margin:0;font-size:12px}.cw-detail dl>div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;margin-bottom:10px}.cw-detail dt{color:var(--cw-muted)}.cw-detail dd{margin:0;overflow-wrap:anywhere}.cw-open{display:inline-flex;margin-top:24px;min-height:44px;align-items:center;font-size:14px;border-bottom:1px solid #e8f1ff88;gap:12px}.cw-open:hover{border-bottom-color:#fff}.cw-open:after{content:"";display:block;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
 .cw-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 48px;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(0deg,var(--cw-bottom),transparent);min-height:82px}.cw-key-help{display:flex;gap:20px;flex-wrap:wrap;font-size:11px;color:var(--cw-muted)}kbd{font:inherit;color:#fff;margin-right:5px}.cw-appearance{display:flex;align-items:center;gap:16px;flex:none}.cw-appearance select{background:#0b193b70;border:1px solid #d7e9ff33;padding:7px 24px 7px 10px;border-radius:4px;max-width:116px;font-size:12px;min-height:36px}.cw-appearance button{display:flex;align-items:center;gap:8px;background:transparent;font-size:12px;min-height:40px;padding:6px 0}.cw-appearance button svg{width:16px;height:16px}.cw-controller{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--cw-muted)}.cw-controller svg{width:22px;height:22px}.cw-noscript{padding:0 48px 24px;color:var(--cw-muted);font-size:13px}
 body:not([data-cw-enhanced]) .cw-browser{padding-left:0}body:not([data-cw-enhanced]) .cw-stage{display:block;margin-top:20px}body:not([data-cw-enhanced]) .cw-list-scroll{max-height:none;min-height:0}body:not([data-cw-enhanced]) .cw-parent-placeholder{display:none}body:not([data-cw-enhanced]) .cw-bottom{display:none}
+.cw-navigation-notice{position:fixed;z-index:5;left:48px;right:24px;bottom:90px;background:var(--cw-bottom);color:var(--cw-text);padding:12px 16px;border-radius:4px;font-size:13px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.cw-navigation-notice[hidden]{display:none}.cw-navigation-notice button,.cw-navigation-notice a{background:none;min-height:44px;padding:6px 12px;border:1px solid var(--cw-muted);border-radius:4px}.cw-transition-layer *{animation:none!important;transition:none!important}.cw-transition-layer [data-cw-status]{display:none}
 @view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation:none}::view-transition-old(cw-background),::view-transition-new(cw-background){animation-duration:420ms}::view-transition-old(cw-browser),::view-transition-old(cw-detail){animation:cw-out 180ms ease-in both}::view-transition-new(cw-browser),::view-transition-new(cw-detail){animation:cw-in 420ms var(--cw-ease) both}::view-transition-old(cw-header),::view-transition-new(cw-header){animation-duration:240ms}@keyframes cw-out{to{opacity:0;transform:translateX(-22px);filter:blur(3px)}}@keyframes cw-in{from{opacity:0;transform:translateX(32px);filter:blur(5px)}}:root[data-cw-transitions=false]::view-transition-group(*){animation-duration:0s}:root[data-cw-transitions=false]::view-transition-old(*),:root[data-cw-transitions=false]::view-transition-new(*){animation:none}.cw-category-changing .cw-files{animation:cw-category-in 260ms var(--cw-ease)}@keyframes cw-category-in{from{opacity:.35;transform:translateX(12px)}}
 @media(min-width:1500px){.cw-stage{margin-top:55px}.cw-categories{gap:48px}.cw-category{min-width:112px}.cw-list-scroll{max-height:calc(100svh - 405px)}}
 @media(max-width:1000px){.cw-top{padding:24px 30px;gap:22px}.cw-stage{padding:0 36px;column-gap:35px}.cw-categories{padding-left:44px;gap:20px}.cw-browser{padding-left:44px}.cw-category{min-width:82px}.cw-list-head{flex-wrap:wrap;gap:8px}.cw-search{margin-left:52px;width:calc(100% - 52px)}.cw-list-scroll{max-height:calc(100svh - 390px)}.cw-bottom{padding:20px 30px}.cw-key-help{gap:12px}.cw-detail h2{font-size:21px}.cw-clock{font-size:12px}}
@@ -45,63 +213,13 @@ body:not([data-cw-enhanced]) .cw-browser{padding-left:0}body:not([data-cw-enhanc
 //#endregion
 //#region src/theme-crosswave.ts
 const runtime = await readFile(new URL("./crosswave-runtime.js", import.meta.url), "utf8");
-const categories = [
-	["all", "All files"],
-	["folder", "Folders"],
-	["image", "Photos"],
-	["audio", "Music"],
-	["video", "Videos"],
-	["document", "Documents"],
-	["other", "Other"]
-];
-const extensions = Object.fromEntries([
-	...[
-		"png",
-		"jpg",
-		"jpeg",
-		"webp",
-		"gif",
-		"avif",
-		"svg",
-		"bmp",
-		"heic"
-	].map((x) => [x, "image"]),
-	...[
-		"mp3",
-		"wav",
-		"ogg",
-		"flac",
-		"m4a",
-		"aac",
-		"aiff",
-		"opus"
-	].map((x) => [x, "audio"]),
-	...[
-		"mp4",
-		"webm",
-		"mov",
-		"mkv",
-		"avi",
-		"m4v"
-	].map((x) => [x, "video"]),
-	...[
-		"txt",
-		"md",
-		"pdf",
-		"json",
-		"csv",
-		"html",
-		"xml",
-		"doc",
-		"docx",
-		"rtf",
-		"yaml",
-		"yml"
-	].map((x) => [x, "document"])
-]);
-function category(entry) {
-	if (entry.kind === "directory" || entry.symlink?.targetKind === "directory") return "folder";
-	return extensions[entry.name.split(".").at(-1)?.toLowerCase() ?? ""] ?? "other";
+function pageAsset(relativePath) {
+	return `crosswave-page-${createHash("sha256").update(relativePath).digest("hex").slice(0, 24)}.js`;
+}
+function navigationData(context, relativePath, href) {
+	const asset = pageAsset(relativePath);
+	const dataHref = context.mode === "mpa" ? context.assetHref(asset) : `${href.endsWith("/") ? href : href.slice(0, href.lastIndexOf("/") + 1)}${asset}`;
+	return ` data-cw-page="${escapeHtml(dataHref)}" data-cw-path="${escapeHtml(relativePath)}"`;
 }
 function size(bytes) {
 	const units = [
@@ -123,19 +241,22 @@ function status$1(entry) {
 	if (entry.kind === "directory") return "Folder";
 	return "File";
 }
-function row(entry, context, index) {
+function row(entry, context, index, categories) {
 	const href = context.hrefFor(entry);
-	const type = category(entry);
+	const mimeType = entryMimeType(entry);
+	const type = entryCategory(entry, mimeType);
+	const matches = entryCategories(entry, mimeType, categories);
 	const icon = entry.kind === "symlink" ? "link" : type;
+	const svg = crosswaveIcon(icon);
 	const label = `${entry.name}${type === "folder" ? "/" : ""}`;
 	const unavailable = entry.symlink?.isOutsideRoot || entry.symlink?.isTargetExcluded || entry.symlink?.isBroken;
 	const bytes = type === "folder" ? "Folder" : size(entry.metadata.size);
 	const instant = new Date(entry.metadata.times.modifiedAt);
 	const modified = Number.isNaN(instant.getTime()) ? "Unknown" : `${instant.toISOString().slice(0, 16).replace("T", " ")} UTC`;
 	const target = entry.symlink === null ? "" : `<span class="cw-target">${escapeHtml(entry.symlink.target)}</span>`;
-	const data = `data-cw-entry data-category="${type}" data-icon="${icon}" data-name="${escapeHtml(entry.name)}" data-path="${escapeHtml(entry.relativePath)}" data-size="${escapeHtml(bytes)}" data-modified="${modified}" data-status="${escapeHtml(status$1(entry))}" data-exits="${context.exitsExplorerFor(entry)}"`;
-	const contents = `<span class="cw-entry-icon">${crosswaveIcon(icon)}</span><span class="cw-entry-label"><span class="cw-name">${escapeHtml(label)}</span>${target}<span class="cw-row-meta">${escapeHtml(status$1(entry))}${type === "folder" || unavailable ? "" : ` · ${bytes}`}</span><span class="cw-row-date">Modified ${modified}</span></span>`;
-	return `<li class="cw-row${index === 0 ? " cw-selected" : ""}" ${data}>${href === null ? `<span class="cw-entry cw-unavailable">${contents}</span>` : `<a class="cw-entry" href="${escapeHtml(href)}"${context.exitsExplorerFor(entry) ? " target=\"_blank\" rel=\"noopener\"" : " data-cw-navigation"}>${contents}</a>`}</li>`;
+	const data = `data-cw-entry data-category="${type}" data-cw-categories="${matches.map((category) => category.id).join(" ")}" data-icon="${icon}" data-name="${escapeHtml(entry.name)}" data-path="${escapeHtml(entry.relativePath)}" data-size="${escapeHtml(bytes)}" data-modified="${modified}" data-status="${escapeHtml(status$1(entry))}" data-exits="${context.exitsExplorerFor(entry)}"`;
+	const contents = `<span class="cw-entry-icon">${svg}</span><span class="cw-entry-label"><span class="cw-name">${escapeHtml(label)}</span>${target}<span class="cw-row-meta">${escapeHtml(status$1(entry))}${type === "folder" || unavailable ? "" : ` · ${bytes}`}</span><span class="cw-row-date">Modified ${modified}</span></span>`;
+	return `<li class="cw-row${index === 0 ? " cw-selected" : ""}" ${data}>${href === null ? `<span class="cw-entry cw-unavailable">${contents}</span>` : `<a class="cw-entry" href="${escapeHtml(href)}"${context.exitsExplorerFor(entry) ? " target=\"_blank\" rel=\"noopener\"" : ` data-cw-navigation${navigationData(context, entry.symlink?.targetRelativePath ?? entry.relativePath, href)}`}>${contents}</a>`}</li>`;
 }
 /** PSP-inspired media navigation with original wave graphics and ordinary static links. */
 function createCrosswaveTheme(options = {}) {
@@ -154,6 +275,8 @@ function createCrosswaveTheme(options = {}) {
 		"gamepad"
 	]) if (options[key] !== void 0 && typeof options[key] !== "boolean") throw new TypeError(`${key} must be a boolean`);
 	const project = resolveThemeProject(options.project);
+	const categories = resolveCrosswaveCategories(options.categories);
+	const categoryConfig = createHash("sha256").update(JSON.stringify(categories)).digest("hex").slice(0, 24);
 	return {
 		name: "crosswave",
 		searchIndex: false,
@@ -162,21 +285,32 @@ function createCrosswaveTheme(options = {}) {
 			const path = directory.current.relativePath || "/";
 			const parent = directory.parent === null ? null : context.hrefForDirectory(directory.parent.relativePath);
 			const segments = directory.current.relativePath.split("/").filter(Boolean);
-			const breadcrumbs = segments.map((segment, i) => i === segments.length - 1 ? `<span aria-current="page">${escapeHtml(segment)}</span>` : `<a data-cw-navigation href="${escapeHtml(context.hrefForDirectory(segments.slice(0, i + 1).join("/")))}">${escapeHtml(segment)}</a>`).join("<span class=\"cw-separator\" aria-hidden=\"true\">/</span>");
-			const tabs = categories.map(([type, label], i) => `<button role="tab" id="cw-tab-${type}" aria-selected="${i === 0}" aria-controls="cw-panel" tabindex="${i === 0 ? 0 : -1}" data-cw-category="${type}" class="cw-category${i === 0 ? " cw-active" : ""}">${crosswaveIcon(type)}<span>${label}</span><small data-cw-category-count="${type}"></small></button>`).join("");
-			return {
-				html: `<!doctype html>
+			const breadcrumbs = segments.map((segment, i) => i === segments.length - 1 ? `<span aria-current="page">${escapeHtml(segment)}</span>` : `<a data-cw-navigation${navigationData(context, segments.slice(0, i + 1).join("/"), context.hrefForDirectory(segments.slice(0, i + 1).join("/")))} href="${escapeHtml(context.hrefForDirectory(segments.slice(0, i + 1).join("/")))}">${escapeHtml(segment)}</a>`).join("<span class=\"cw-separator\" aria-hidden=\"true\">/</span>");
+			const tabs = categories.map(({ id: type, label, svg }, i) => `<button role="tab" id="cw-tab-${type}" aria-selected="${i === 0}" aria-controls="cw-panel" tabindex="${i === 0 ? 0 : -1}" data-cw-category="${type}" class="cw-category${i === 0 ? " cw-active" : ""}">${svg}<span>${escapeHtml(label)}</span><small data-cw-category-count="${type}"></small></button>`).join("");
+			const html = `<!doctype html>
 <html lang="en" data-cw-color="${color}" data-cw-motion="${options.backgroundMotion !== false}" data-cw-transitions="${options.pageTransitions !== false}" data-cw-gamepad="${options.gamepad !== false}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${context.documentBaseHref === null ? "" : `<base href="${escapeHtml(context.documentBaseHref)}">`}<title>${escapeHtml(path)} · ${escapeHtml(project.name)} · Crosswave</title><link rel="stylesheet" href="${escapeHtml(context.assetHref("crosswave.css"))}"><script src="${escapeHtml(context.assetHref("crosswave.js"))}"><\/script></head>
 <body><a class="cw-skip" href="${escapeHtml(context.hrefForDirectory(directory.current.relativePath))}#cw-panel">Skip to files</a><div class="cw-background" aria-hidden="true"><canvas id="cw-wave"></canvas><svg class="cw-fallback-wave" viewBox="0 0 1440 900" preserveAspectRatio="none"><path d="M-80 570C220 300 370 690 760 450S1260 290 1510 510"/><path d="M-80 540C220 640 400 330 820 470S1240 620 1510 360"/></svg></div>
-<header class="cw-top"><a class="cw-brand" data-cw-navigation href="${escapeHtml(context.hrefForDirectory(""))}">${escapeHtml(project.name)}<span>Crosswave</span></a><nav class="cw-location" aria-label="Location"><a data-cw-navigation href="${escapeHtml(context.hrefForDirectory(""))}">Home</a>${breadcrumbs ? `<span class="cw-separator" aria-hidden="true">/</span>${breadcrumbs}` : ""}</nav><time class="cw-clock" aria-label="Current time" hidden></time></header>
-<main class="cw-stage" data-cw-root="${escapeHtml(context.hrefForDirectory(""))}"><h1 class="cw-sr">Files in ${escapeHtml(path)}</h1><nav class="cw-rail" aria-label="File categories" hidden><div class="cw-categories" role="tablist" aria-label="File categories">${tabs}</div></nav>
-<section class="cw-browser" id="cw-panel" aria-label="Files"><div class="cw-list-head"><div class="cw-directory">${parent === null ? "<span class=\"cw-parent-placeholder\"></span>" : `<a class="cw-parent" data-cw-parent data-cw-navigation href="${escapeHtml(parent)}" aria-label="Parent directory">${crosswaveIcon("back")}</a>`}<h2 data-cw-heading>All files</h2><span data-cw-count>${directory.entries.length} items</span></div><div class="cw-search" hidden>${crosswaveIcon("search")}<label class="cw-sr" for="cw-search">Search this folder</label><input id="cw-search" type="search" placeholder="Search this folder" autocomplete="off" spellcheck="false"><button type="button" data-cw-clear hidden>Clear</button></div></div>
-<div class="cw-list-scroll"><ul class="cw-files">${directory.entries.map((entry, i) => row(entry, context, i)).join("")}</ul><p class="cw-empty" data-cw-empty${directory.entries.length ? " hidden" : ""}>${directory.entries.length ? "No files match this search." : "This folder is empty."}</p></div><p class="cw-sr" role="status" aria-live="polite" data-cw-status></p></section>
+<header class="cw-top"><a class="cw-brand" data-cw-navigation${navigationData(context, "", context.hrefForDirectory(""))} href="${escapeHtml(context.hrefForDirectory(""))}">${escapeHtml(project.name)}<span>Crosswave</span></a><nav class="cw-location" aria-label="Location"><a data-cw-navigation${navigationData(context, "", context.hrefForDirectory(""))} href="${escapeHtml(context.hrefForDirectory(""))}">Home</a>${breadcrumbs ? `<span class="cw-separator" aria-hidden="true">/</span>${breadcrumbs}` : ""}</nav><time class="cw-clock" aria-label="Current time" hidden></time></header>
+<main class="cw-stage" data-cw-root="${escapeHtml(context.hrefForDirectory(""))}" data-cw-path="${escapeHtml(directory.current.relativePath)}" data-cw-page="${escapeHtml(context.assetHref(pageAsset(directory.current.relativePath)))}" data-cw-file="${escapeHtml(context.outputName)}" data-cw-category-config="${categoryConfig}"><h1 class="cw-sr">Files in ${escapeHtml(path)}</h1><nav class="cw-rail" aria-label="File categories" hidden><div class="cw-categories" role="tablist" aria-label="File categories">${tabs}</div></nav>
+<section class="cw-browser" id="cw-panel" aria-label="Files"><div class="cw-list-head"><div class="cw-directory">${parent === null ? "<span class=\"cw-parent-placeholder\"></span>" : `<a class="cw-parent" data-cw-parent data-cw-navigation${navigationData(context, directory.parent?.relativePath ?? "", parent)} href="${escapeHtml(parent)}" aria-label="Parent directory">${crosswaveIcon("back")}</a>`}<h2 data-cw-heading>All files</h2><span data-cw-count>${directory.entries.length} items</span></div><div class="cw-search" hidden>${crosswaveIcon("search")}<label class="cw-sr" for="cw-search">Search this folder</label><input id="cw-search" type="search" placeholder="Search this folder" autocomplete="off" spellcheck="false"><button type="button" data-cw-clear hidden>Clear</button></div></div>
+<div class="cw-list-scroll"><ul class="cw-files">${directory.entries.map((entry, i) => row(entry, context, i, categories)).join("")}</ul><p class="cw-empty" data-cw-empty${directory.entries.length ? " hidden" : ""}>${directory.entries.length ? "No files match this search." : "This folder is empty."}</p></div><p class="cw-sr" role="status" aria-live="polite" data-cw-status></p></section>
 <aside class="cw-detail" aria-label="Selected file details" hidden><div class="cw-detail-symbol" data-cw-detail-icon></div><h2 data-cw-detail-name></h2><p data-cw-detail-status></p><dl><div><dt>Path</dt><dd data-cw-detail-path></dd></div><div><dt>Size</dt><dd data-cw-detail-size></dd></div><div><dt>Modified</dt><dd data-cw-detail-modified></dd></div></dl><a class="cw-open" data-cw-open>Open file</a></aside></main>
-<footer class="cw-bottom"><span class="cw-key-help" hidden><span><kbd>Arrow keys</kbd> Navigate</span><span><kbd>Enter</kbd> Open</span><span><kbd>Backspace</kbd> Parent</span></span><span class="cw-controller" role="status" hidden>${crosswaveIcon("controller")}<span data-cw-controller-label></span></span><div class="cw-appearance" hidden><label class="cw-sr" for="cw-color">Background color</label><select id="cw-color" aria-label="Background color"><option value="azure">Azure</option><option value="violet">Violet</option><option value="amber">Amber</option><option value="rose">Rose</option><option value="jade">Jade</option><option value="graphite">Graphite</option></select><button data-cw-motion aria-pressed="false" type="button">${crosswaveIcon("pause")}<span>Pause waves</span></button></div></footer><noscript><p class="cw-noscript">All files are available below. Categories, search, animated waves, and controller navigation need JavaScript.</p></noscript></body></html>`,
+<footer class="cw-bottom"><span class="cw-key-help" hidden><span><kbd>Arrow keys</kbd> Navigate</span><span><kbd>Enter</kbd> Open</span><span><kbd>Backspace</kbd> Parent</span></span><span class="cw-controller" role="status" hidden>${crosswaveIcon("controller")}<span data-cw-controller-label></span></span><div class="cw-appearance" hidden><label class="cw-sr" for="cw-color">Background color</label><select id="cw-color" aria-label="Background color"><option value="azure">Azure</option><option value="violet">Violet</option><option value="amber">Amber</option><option value="rose">Rose</option><option value="jade">Jade</option><option value="graphite">Graphite</option></select><button data-cw-motion aria-pressed="false" type="button">${crosswaveIcon("pause")}<span>Pause waves</span></button></div></footer><noscript><p class="cw-noscript">All files are available below. Categories, search, animated waves, and controller navigation need JavaScript.</p></noscript></body></html>`;
+			const asset = pageAsset(directory.current.relativePath);
+			const payload = JSON.stringify({
+				version: 1,
+				id: asset,
+				path: directory.current.relativePath,
+				outputName: context.outputName,
+				baseHref: context.documentBaseHref,
+				html
+			});
+			return {
+				html,
 				assets: {
 					"crosswave.css": crosswaveStyles,
-					"crosswave.js": runtime
+					"crosswave.js": runtime,
+					[asset]: `window.dispatchEvent(new CustomEvent("dirwell:crosswave-page",{detail:${payload}}));`
 				}
 			};
 		}
@@ -251,6 +385,6 @@ function createPlainTheme(options = {}) {
 	};
 }
 //#endregion
-export { compareEntries, createCrosswaveTheme, createDefaultTheme, createExplorerDevServer, createPlainTheme, defaultOutputName, defaultTheme, defaultThemeComponents, defineConfig, escapeHtml, generateExplorer, loadDirwellConfig, readGeneratedPage, resolveGenerateOptions, resolveThemeComponents };
+export { compareEntries, createCrosswaveTheme, createDefaultTheme, createExplorerDevServer, createPlainTheme, defaultCrosswaveCategories, defaultOutputName, defaultTheme, defaultThemeComponents, defineConfig, escapeHtml, generateExplorer, loadDirwellConfig, readGeneratedPage, resolveGenerateOptions, resolveThemeComponents };
 
 //# sourceMappingURL=index.mjs.map