@dirwell/theme-crosswave 0.0.1 → 0.0.3

package/dist/{model-VZ01cfyg.d.mts → model-Bvw3-a6R.d.mts}

@@ -125,7 +125,7 @@ interface ThemePage$1 {
   readonly title: string;
   readonly metadataHead?: string;
   readonly path: string;
-  readonly rootHref: string;
+  readonly rootHref: string | null;
   readonly parentHref: string | null;
   readonly parentDataHref: string | null;
   readonly rootDataHref: string | null;
@@ -133,13 +133,15 @@ interface ThemePage$1 {
   readonly manifestHref: string | null;
   readonly listingRevision?: string;
   readonly updatesHref: string | null;
+  readonly searchQueryHref?: string | null;
+  readonly searchRefreshIntervalMs?: number;
   readonly total: number;
   readonly entries: readonly ListingEntry[];
   readonly sort: Required<SortOptions>;
   readonly page: ListingPage | null;
   readonly breadcrumbs: readonly {
     readonly name: string;
-    readonly href: string;
+    readonly href: string | null;
     readonly dataHref: string | null;
   }[];
 }
@@ -169,4 +171,4 @@ interface RowContext {
 }
 //#endregion
 export { ThemeAction as a, ThemeLabels as c, ThemePage as i, ListingEntry$1 as n, ThemeColumn as o, RowContext as r, ThemeCustomization as s, FrameworkRenderer as t };
-//# sourceMappingURL=model-VZ01cfyg.d.mts.map
+//# sourceMappingURL=model-Bvw3-a6R.d.mts.map

package/dist/model.d.mts

@@ -1,2 +1,2 @@
-import { i as ThemePage, n as ListingEntry, r as RowContext, t as FrameworkRenderer } from "./model-VZ01cfyg.mjs";
+import { i as ThemePage, n as ListingEntry, r as RowContext, t as FrameworkRenderer } from "./model-Bvw3-a6R.mjs";
 export { FrameworkRenderer, type ListingEntry, RowContext, ThemePage };

package/dist/source/Crosswave.vue

@@ -9,6 +9,7 @@ import {
   watch,
   nextTick,
 } from "vue";
+import { queryLiveArchive } from "./shared/live-search.mjs";
 import { useGamepad } from "@vueuse/core";
 import { loadListing } from "@dirwell/core/client";
 import {
@@ -52,6 +53,93 @@ const query = ref(""),
   viewportHeight = ref(400),
   retryRequest = shallowRef(null),
   heights = shallowRef(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 ?? 2000);
+  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 : [];
@@ -186,15 +274,7 @@ let wave,
   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,
@@ -308,6 +388,7 @@ function navigateLink(event, href, dataHref) {
   openFolder(dataHref, new URL(href, document.baseURI).href, true);
 }
 async function openEntry(event, entry) {
+  selected.value = entry.id;
   saveView();
   const href = entry.presentation?.folderDataHref;
   if (
@@ -369,6 +450,7 @@ function parent() {
   }
 }
 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;
   const editing = /INPUT|TEXTAREA|SELECT/.test(event.target?.tagName ?? "");
@@ -401,6 +483,7 @@ function keyboard(event) {
   }
 }
 function controller(value) {
+  if (archiveOpen.value) return;
   pad.value = !!value;
   if (!value) {
     pressed.clear();
@@ -628,6 +711,7 @@ watchEffect(() => {
   }
 });
 onBeforeUnmount(() => {
+  archiveAbort?.abort();
   disposed = true;
   document.body.removeAttribute("data-cw-enhanced");
   abort?.abort();
@@ -725,6 +809,15 @@ onBeforeUnmount(() => {
           ><span>{{ ui.labels.search }}</span
           ><input ref="search" type="search" v-model="query" :disabled="!ready || !complete"
         /></label>
+        <button
+          class="cw-archive-trigger"
+          ref="archiveTrigger"
+          v-if="model.searchQueryHref"
+          :disabled="!ready"
+          @click="archiveOpen = true"
+        >
+          {{ ui.labels.searchArchive }}
+        </button>
       </div>
       <div
         class="cw-list-scroll"
@@ -756,7 +849,7 @@ onBeforeUnmount(() => {
             <a
               v-if="entry.href"
               class="cw-entry"
-              :href="safeHref(entry)"
+              :href="entry.href"
               :target="entry.exitsExplorer ? '_blank' : undefined"
               :rel="entry.exitsExplorer ? 'noopener' : undefined"
               @click="openEntry($event, entry)"
@@ -826,7 +919,7 @@ onBeforeUnmount(() => {
                     !directoryLike(entry) &&
                     !entry.link?.unavailable
                   "
-                  :href="safeHref(entry)"
+                  :href="entry.href"
                   download
                   >{{ ui.labels.download }}</a
                 >
@@ -914,4 +1007,35 @@ onBeforeUnmount(() => {
       {{ paused ? ui.labels.resumeMotion : ui.labels.pauseMotion }}
     </button>
   </footer>
+  <dialog
+    v-if="archiveOpen"
+    ref="archiveDialog"
+    class="cw-archive"
+    :aria-label="ui.labels.searchArchive"
+    @close="archiveOpen = false"
+    @keydown.esc.prevent.stop="archiveOpen = false"
+  >
+    <h2>{{ ui.labels.searchArchive }}</h2>
+    <input
+      ref="archiveInput"
+      type="search"
+      v-model="archiveQuery"
+      :aria-label="ui.labels.archiveSearchInput"
+    />
+    <p role="status">{{ archiveStatus }}</p>
+    <button v-if="archiveFailed" @click="searchArchive">{{ ui.labels.retry }}</button>
+    <ul>
+      <li v-for="record in archiveRows" :key="record.path">
+        <a
+          v-if="record.href"
+          :href="record.href"
+          :target="record.exitsExplorer ? '_blank' : undefined"
+          :rel="record.exitsExplorer ? 'noopener' : undefined"
+          >{{ record.path }}</a
+        >
+        <span v-else>{{ record.path }}</span>
+      </li>
+    </ul>
+    <button @click="archiveOpen = false">{{ ui.labels.close }}</button>
+  </dialog>
 </template>

package/dist/source/shared/live-search.mjs

@@ -0,0 +1,28 @@
+// ../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");
+  const 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"
+    };
+  });
+  return { records, truncated: data.truncated };
+}
+export {
+  queryLiveArchive
+};

package/dist/source/shared/navigation.mjs

@@ -402,6 +402,7 @@ async function fetchThemePage(dataHref, pageHref, theme, signal, fresh = false,
     resolveCustomization(data.ui);
   const result = {
     ...data,
+    searchQueryHref: link(data.searchQueryHref ?? null),
     updatesHref: link(data.updatesHref ?? null),
     entries,
     dataHref: source.href,

package/dist/styles.css

@@ -14,7 +14,7 @@
 .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-credits{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;font-weight:400;letter-spacing:normal;color:var(--cw-muted)}.cw-credits a{display:inline-flex;align-items:center;min-height:24px;padding-inline:2px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#edf4fc66}.cw-credits a:hover{text-decoration-color:currentColor}.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:calc(var(--cw-footer-height,82px) + 8px);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(scripting:enabled){@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}}
 @media(max-width:680px){.cw-top{padding:22px 20px 12px;flex-wrap:wrap;gap:16px;min-height:104px}.cw-brand{font-size:18px}.cw-clock{order:1;font-size:11px}.cw-location{order:2;width:100%;font-size:12px;gap:8px}.cw-stage{padding:0 16px;margin:12px auto 100px;display:block}.cw-rail{margin:0 -8px 8px;padding:12px 8px 20px}.cw-categories{padding-left:0;gap:14px}.cw-browser{padding-left:0}.cw-category{min-width:76px;min-height:83px;padding:10px 2px;gap:10px}.cw-category svg{width:33px;height:33px}.cw-category span{font-size:12px}.cw-category small{right:5px}.cw-list-head{padding:0 12px;margin-bottom:8px}.cw-directory{gap:12px}.cw-directory h2{font-size:16px}.cw-search{margin-left:46px;width:calc(100% - 46px);min-height:44px}.cw-search input,.cw-search button{min-height:44px}.cw-list-scroll{max-height:none;min-height:150px;padding:8px 2px 18px}.cw-entry{gap:20px;padding:14px 12px;min-height:78px}.cw-entry-icon{width:36px;min-width:36px}.cw-entry-icon svg{width:29px;height:29px}.cw-name{font-size:17px}.cw-detail{display:none!important}.cw-row-date{display:block}.cw-bottom{padding:16px 20px;min-height:76px;gap:12px}.cw-key-help{display:none!important}.cw-appearance{width:100%;justify-content:space-between}.cw-appearance select,.cw-appearance button{min-height:44px}.cw-controller{position:absolute;bottom:calc(var(--cw-footer-height,76px) + 4px);right:20px;background:var(--cw-bottom);padding:6px 9px;border-radius:4px;max-width:calc(100% - 40px)}.cw-notice{left:20px;right:20px;bottom:calc(var(--cw-footer-height,82px) + 8px)}.cw-noscript{padding:0 24px 24px}}
@@ -22,6 +22,24 @@ body:not([data-cw-enhanced]) .cw-browser{padding-left:0}body:not([data-cw-enhanc
 .cw-list-scroll[data-virtual=true]{max-height:var(--cw-list-height,calc(100svh - 365px));min-height:160px}.cw-stage{margin-bottom:calc(var(--cw-footer-height,82px) + 24px)}
 @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}.cw-row.cw-selected .cw-entry,.cw-category.cw-active,.cw-category:hover{transform:none}}
 
+.cw-archive-trigger { min-height: 44px; padding: 8px 12px; color: var(--cw-text); background: transparent; border: 1px solid var(--cw-muted); border-radius: 4px; }
+.cw-archive {
+  width: min(42rem, calc(100vw - 2rem));
+  max-height: calc(100dvh - 2rem);
+  overflow: auto;
+  padding: 1.5rem;
+  color: var(--cw-text);
+  background: var(--cw-bottom);
+  border: 1px solid var(--cw-muted);
+  border-radius: 1rem;
+}
+.cw-archive::backdrop { background: #000a; }
+.cw-archive input { width: 100%; min-height: 2.75rem; }
+.cw-archive a { color: var(--cw-muted); overflow-wrap: anywhere; }
+.cw-archive button { min-height: 2.75rem; margin-block: .5rem; }
+.cw-archive li { margin-block: .75rem; }
+
+
 .cw-directory{flex-wrap:wrap;gap:.35rem}.cw-list-head h2{font-size:17px;font-weight:400;margin:0}.cw-list-head [data-cw-count]{font-size:12px;color:var(--cw-muted)}
 .cw-motion{display:flex;align-items:center;background:transparent;border:1px solid #d7e9ff33;border-radius:4px;font-size:12px;min-height:44px;padding:6px 12px;white-space:nowrap}
 .cw-appearance{min-width:0}.cw-appearance select{max-width:116px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dirwell/theme-crosswave",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Vue-owned media navigation with VueUse gamepad support.",
   "homepage": "https://vp-tw.github.io/dirwell/themes/",
   "bugs": {
@@ -38,7 +38,7 @@
     "tag": "latest"
   },
   "dependencies": {
-    "@dirwell/core": "0.0.1",
+    "@dirwell/core": "0.0.3",
     "@vue/server-renderer": "3.5.43",
     "@vueuse/core": "15.0.0",
     "mime": "4.1.0",