@dirwell/theme-crosswave 0.0.1 → 0.0.2

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-Dr7YgDTv.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

@@ -68,6 +68,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 +259,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 +591,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 +988,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();
@@ -1156,6 +1254,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 +1285,7 @@ var App_server_default = {
 			}
 		}
 		function controller(value) {
+			if (archiveOpen.value) return;
 			pad.value = !!value;
 			if (!value) {
 				pressed.clear();
@@ -1384,6 +1484,7 @@ var App_server_default = {
 			}
 		});
 		onBeforeUnmount(() => {
+			archiveAbort?.abort();
 			disposed = true;
 			document.body.removeAttribute("data-cw-enhanced");
 			abort?.abort();
@@ -1418,7 +1519,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>`);
@@ -1531,7 +1635,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 +1664,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 +1676,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 +1715,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,