@dirwell/theme-crosswave 0.0.1 → 0.0.3

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { a as ThemeAction, c as ThemeLabels, i as ThemePage, o as ThemeColumn, s as ThemeCustomization, t as FrameworkRenderer } from "./model-VZ01cfyg.mjs";
+import { a as ThemeAction, c as ThemeLabels, i as ThemePage, o as ThemeColumn, s as ThemeCustomization, t as FrameworkRenderer } from "./model-Bvw3-a6R.mjs";
 import { ExplorerTheme, ListingEntry } from "@dirwell/core";
 //#region src/icons.d.ts
 type CrosswaveIcon = "all" | "folder" | "image" | "audio" | "video" | "document" | "other" | "link" | "back" | "search" | "pause" | "play" | "controller";
@@ -26,6 +26,7 @@ export interface CrosswaveThemeOptions extends ThemeCustomization {
   readonly categories?: readonly CrosswaveCategory[];
   readonly color?: "azure" | "violet" | "amber" | "rose" | "jade" | "graphite";
   readonly gamepad?: boolean;
+  readonly archiveSearch?: boolean;
   readonly backgroundMotion?: boolean;
 }
 export declare function createCrosswaveTheme(options?: CrosswaveThemeOptions, renderer?: FrameworkRenderer): ExplorerTheme;

package/dist/index.mjs

@@ -1,7 +1,6 @@
 import { readFile } from "node:fs/promises";
 import { createHash } from "node:crypto";
 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, ssrRenderStyle } from "vue/server-renderer";
@@ -11,20 +10,9 @@ import { ListingDataError, loadListing, parseListingEntries } from "@dirwell/cor
 const pageAsset = (theme, directory, page = 1) => `${theme}-page-${createHash("sha256").update(directory).digest("hex").slice(0, 24)}-${page}.json`;
 function folderDataHref(entry, context, theme) {
 	if (entry.exitsExplorer || entry.href === null || !(entry.kind === "directory" || entry.link?.targetKind === "directory")) return null;
-	const fake = "https://dirwell.invalid/";
-	const base = new URL(context.documentBaseHref ?? `${context.directoryPath ? context.directoryPath + "/" : ""}`, fake);
-	const root = new URL(context.hrefForDirectory(""), base);
-	const target = new URL(entry.href, base);
-	const rootPath = root.pathname.endsWith("/") ? root.pathname : root.pathname.slice(0, root.pathname.lastIndexOf("/") + 1);
-	const directoryPath = target.pathname.endsWith("/") ? target.pathname : target.pathname.slice(0, target.pathname.lastIndexOf("/") + 1);
-	const logical = directoryPath.slice(rootPath.length).split("/").filter(Boolean).map(decodeURIComponent).join("/");
-	const filename = pageAsset(theme, logical);
-	if (context.pageDataHref !== void 0) return context.pageDataHref(theme, logical, 1);
-	if (context.mode === "mpa") return context.assetHref(filename);
-	const href = new URL(filename, new URL(directoryPath, target));
-	if (href.origin !== new URL(fake).origin) return href.href;
-	if (context.documentBaseHref === null && !entry.href.startsWith("/")) return path.posix.relative(context.directoryPath || ".", path.posix.join(logical, filename)).split("/").map((segment) => segment === ".." || segment === "." ? segment : encodeURIComponent(segment)).join("/");
-	return href.pathname;
+	const logical = context.directoryPathForEntry(entry.id);
+	if (logical === null) return null;
+	return context.pageDataHref?.(theme, logical, 1) ?? context.assetHrefForDirectory(logical, pageAsset(theme, logical));
 }
 function createThemePage(context, theme, title) {
 	const directoryPath = context.directory.current.relativePath;
@@ -33,20 +21,13 @@ function createThemePage(context, theme, title) {
 		mode: context.mode,
 		outputName: context.outputName,
 		assetHref: context.assetHref,
+		assetHrefForDirectory: context.assetHrefForDirectory,
+		directoryPathForEntry: context.directoryPathForEntry,
 		hrefForDirectory: context.hrefForDirectory,
 		documentBaseHref: context.documentBaseHref,
 		directoryPath
 	};
-	const dataForDirectory = (logicalPath) => context.hasPageForDirectory?.(logicalPath) === false ? null : folderDataHref({
-		id: logicalPath,
-		name: logicalPath,
-		kind: "directory",
-		href: context.hrefForDirectory(logicalPath),
-		exitsExplorer: false,
-		size: 0,
-		modifiedAt: "",
-		link: null
-	}, safeContext, theme.name);
+	const dataForDirectory = (logicalPath) => context.hasPageForDirectory?.(logicalPath) === false ? null : context.pageDataHref?.(theme.name, logicalPath, 1) ?? context.assetHrefForDirectory(logicalPath, pageAsset(theme.name, logicalPath));
 	const entries = context.directory.entries.map((entry) => {
 		const record = projectListingEntry(entry, context);
 		return theme.entryData === void 0 ? record : {
@@ -68,6 +49,10 @@ function createThemePage(context, theme, title) {
 		manifestHref: context.listing?.manifestHref ?? null,
 		...context.listing ? { listingRevision: context.listing.revision } : {},
 		updatesHref: context.updatesHref ?? null,
+		...context.searchQueryHref ? {
+			searchQueryHref: context.searchQueryHref,
+			searchRefreshIntervalMs: context.searchRefreshIntervalMs
+		} : {},
 		total: context.listing?.page.total ?? entries.length,
 		entries,
 		sort: context.sort,
@@ -255,6 +240,34 @@ 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/live-search.ts
+async function queryLiveArchive(href, query, signal) {
+	const url = new URL(href, document.baseURI);
+	if (url.origin !== location.origin) throw new Error("Unsafe search endpoint");
+	url.searchParams.set("q", query);
+	const response = await fetch(url, {
+		signal,
+		cache: "no-store"
+	});
+	if (!response.ok) throw new Error("Archive search unavailable");
+	const data = await response.json();
+	if (typeof data !== "object" || data === null || !("version" in data) || data.version !== 1 || !("results" in data) || !Array.isArray(data.results) || data.results.length > 1e4 || !("truncated" in data) || typeof data.truncated !== "boolean") throw new Error("Invalid archive results");
+	return {
+		records: data.results.map((entry) => {
+			if (typeof entry !== "object" || entry === null || !("name" in entry) || typeof entry.name !== "string" || !("path" in entry) || typeof entry.path !== "string" || !("kind" in entry) || !["file", "directory"].includes(String(entry.kind)) || !("href" in entry) || entry.href !== null && typeof entry.href !== "string") throw new Error("Invalid archive record");
+			const target = entry.href === null ? null : new URL(entry.href, url);
+			if (target && !["http:", "https:"].includes(target.protocol)) throw new Error("Unsafe archive link");
+			return {
+				name: entry.name,
+				path: entry.path,
+				href: target?.href ?? null,
+				exitsExplorer: entry.kind !== "directory"
+			};
+		}),
+		truncated: data.truncated
+	};
+}
+//#endregion
 //#region ../shared-theme/src/customization.ts
 /** Small serializable inputs shared by official themes; layout stays theme-owned. */
 const defaultLabels = {
@@ -559,6 +572,7 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
 	if (data.ui !== void 0) resolveCustomization(data.ui);
 	const result = {
 		...data,
+		searchQueryHref: link(data.searchQueryHref ?? null),
 		updatesHref: link(data.updatesHref ?? null),
 		entries,
 		dataHref: source.href,
@@ -955,6 +969,71 @@ var App_server_default = {
 	setup(__props) {
 		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 archiveOpen = ref(false), archiveQuery = ref(""), archiveRows = shallowRef([]), archiveStatus = ref(""), archiveFailed = ref(false), archiveTrigger = ref(), archiveDialog = ref(), archiveInput = ref();
+		let archiveAbort, archiveRequest = 0, archivePending = false, archiveDebouncing = false;
+		async function searchArchive() {
+			const token = ++archiveRequest;
+			archiveAbort?.abort();
+			const local = archiveAbort = new AbortController();
+			archiveFailed.value = false;
+			if (!archiveQuery.value.trim()) {
+				archiveRows.value = [];
+				archiveStatus.value = ui.value.labels.beginArchive;
+				return;
+			}
+			archiveStatus.value = ui.value.labels.searchingArchive;
+			archivePending = true;
+			try {
+				const result = await queryLiveArchive(model.value.searchQueryHref, archiveQuery.value.trim(), local.signal);
+				if (local.signal.aborted || token !== archiveRequest) return;
+				archiveRows.value = result.records;
+				archiveStatus.value = result.truncated ? label(ui.value, "truncatedResults", {
+					shown: result.records.length,
+					count: result.records.length + "+"
+				}) : label(ui.value, "archiveResults", { count: result.records.length });
+			} catch {
+				if (local.signal.aborted || token !== archiveRequest) return;
+				archiveRows.value = [];
+				archiveStatus.value = ui.value.labels.archiveError;
+				archiveFailed.value = true;
+			} finally {
+				if (token === archiveRequest) archivePending = false;
+			}
+		}
+		watch([archiveOpen, archiveQuery], (_, __, cleanup) => {
+			archiveAbort?.abort();
+			archiveRequest++;
+			archivePending = false;
+			if (!archiveOpen.value) return;
+			archiveDebouncing = true;
+			const debounce = setTimeout(() => {
+				archiveDebouncing = false;
+				searchArchive();
+			}, 300);
+			cleanup(() => {
+				clearTimeout(debounce);
+				archiveDebouncing = false;
+			});
+		});
+		watch(archiveOpen, async (open, _, cleanup) => {
+			if (!open) {
+				await nextTick();
+				archiveTrigger.value?.focus();
+				return;
+			}
+			await nextTick();
+			if (!archiveOpen.value) return;
+			archiveDialog.value?.showModal();
+			archiveInput.value?.focus();
+			const timer = setInterval(() => {
+				if (document.visibilityState === "visible" && archiveQuery.value.trim() && !archivePending && !archiveDebouncing) searchArchive();
+			}, model.value.searchRefreshIntervalMs ?? 2e3);
+			cleanup(() => {
+				clearInterval(timer);
+				archiveAbort?.abort();
+				archiveRequest++;
+			});
+		});
 		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) => 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();
@@ -1037,9 +1116,6 @@ var App_server_default = {
 			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;
-		}
 		async function loadComplete() {
 			if (complete.value || !model.value.manifestHref || location.protocol === "file:") return;
 			const local = abort, token = navigation;
@@ -1156,6 +1232,7 @@ var App_server_default = {
 			}
 		}
 		function keyboard(event) {
+			if (archiveOpen.value) return;
 			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 ?? "")) {
@@ -1186,6 +1263,7 @@ var App_server_default = {
 			}
 		}
 		function controller(value) {
+			if (archiveOpen.value) return;
 			pad.value = !!value;
 			if (!value) {
 				pressed.clear();
@@ -1384,6 +1462,7 @@ var App_server_default = {
 			}
 		});
 		onBeforeUnmount(() => {
+			archiveAbort?.abort();
 			disposed = true;
 			document.body.removeAttribute("data-cw-enhanced");
 			abort?.abort();
@@ -1418,7 +1497,10 @@ var App_server_default = {
 			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(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">`);
+			_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>`);
+			if (model.value.searchQueryHref) _push(`<button class="cw-archive-trigger"${ssrIncludeBooleanAttr(!ready.value) ? " disabled" : ""}>${ssrInterpolate(ui.value.labels.searchArchive)}</button>`);
+			else _push(`<!---->`);
+			_push(`</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>`);
@@ -1427,7 +1509,7 @@ var App_server_default = {
 			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)}>`);
+					_push(`<a class="cw-entry"${ssrRenderAttr("href", entry.href)}${ssrRenderAttr("target", entry.exitsExplorer ? "_blank" : void 0)}${ssrRenderAttr("rel", entry.exitsExplorer ? "noopener" : void 0)}>`);
 					ssrRenderSlot(_ctx.$slots, "row", {
 						model: model.value,
 						entry,
@@ -1472,7 +1554,7 @@ var App_server_default = {
 					_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>`);
+						if (action === "download" && entry.href && !unref(directoryLike)(entry) && !entry.link?.unavailable) _push(`<a${ssrRenderAttr("href", entry.href)} 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(`<!--]-->`);
@@ -1531,7 +1613,21 @@ var App_server_default = {
 			ssrRenderList(Object.keys(colors), (name) => {
 				_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 ? ui.value.labels.resumeMotion : ui.value.labels.pauseMotion)}</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>`);
+			if (archiveOpen.value) {
+				_push(`<dialog class="cw-archive"${ssrRenderAttr("aria-label", ui.value.labels.searchArchive)}><h2>${ssrInterpolate(ui.value.labels.searchArchive)}</h2><input type="search"${ssrRenderAttr("value", archiveQuery.value)}${ssrRenderAttr("aria-label", ui.value.labels.archiveSearchInput)}><p role="status">${ssrInterpolate(archiveStatus.value)}</p>`);
+				if (archiveFailed.value) _push(`<button>${ssrInterpolate(ui.value.labels.retry)}</button>`);
+				else _push(`<!---->`);
+				_push(`<ul><!--[-->`);
+				ssrRenderList(archiveRows.value, (record) => {
+					_push(`<li>`);
+					if (record.href) _push(`<a${ssrRenderAttr("href", record.href)}${ssrRenderAttr("target", record.exitsExplorer ? "_blank" : void 0)}${ssrRenderAttr("rel", record.exitsExplorer ? "noopener" : void 0)}>${ssrInterpolate(record.path)}</a>`);
+					else _push(`<span>${ssrInterpolate(record.path)}</span>`);
+					_push(`</li>`);
+				});
+				_push(`<!--]--></ul><button>${ssrInterpolate(ui.value.labels.close)}</button></dialog>`);
+			} else _push(`<!---->`);
+			_push(`<!--]-->`);
 		};
 	}
 };
@@ -1546,7 +1642,8 @@ function createCrosswaveTheme(options = {}, renderer) {
 		"categories",
 		"color",
 		"gamepad",
-		"backgroundMotion"
+		"backgroundMotion",
+		"archiveSearch"
 	]);
 	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 && ![
@@ -1557,7 +1654,11 @@ function createCrosswaveTheme(options = {}, renderer) {
 		"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`);
+	for (const key of [
+		"gamepad",
+		"backgroundMotion",
+		"archiveSearch"
+	]) 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 = {
@@ -1592,6 +1693,7 @@ function createCrosswaveTheme(options = {}, renderer) {
 			const model = {
 				...createThemePage(context, theme, options.title ?? ui.brand.name ?? "Dirwell"),
 				...publishedUi === void 0 ? {} : { ui: publishedUi },
+				searchQueryHref: options.archiveSearch === false ? null : context.searchQueryHref ?? null,
 				categories: categories.map(({ id, label, svg }) => ({
 					id,
 					label,