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

package/dist/source/Crosswave.vue

@@ -16,18 +16,28 @@ import {
   applyThemeMetadata,
   restoreThemePage,
 } from "./shared/navigation.mjs";
+import { readView, createViewHistory } from "./shared/view-state.mjs";
 import { entryIcon } from "./shared/icons.mjs";
-import { directoryLike, size, modified } from "./shared/records.mjs";
+import { directoryLike, size } from "./shared/records.mjs";
+import {
+  resolveCustomization,
+  label,
+  formattedDate,
+  copyEntryAction,
+  publicDataValue,
+} from "./shared/customization.mjs";
 import { createWave } from "./wave.mjs";
 const props = defineProps({ model: { type: Object, required: true } }),
   model = shallowRef(restoreThemePage(props.model, Boolean(import.meta.hot))),
-  entries = shallowRef(model.value.entries);
+  entries = shallowRef(model.value.entries),
+  ui = computed(() => resolveCustomization(model.value.ui));
 const query = ref(""),
-  category = ref("all"),
+  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(""),
@@ -35,14 +45,20 @@ const query = ref(""),
   waveReady = ref(false),
   pendingUpdates = ref(null),
   canvas = ref(),
-  search = ref();
+  search = ref(),
+  listScroll = ref(),
+  footerElement = ref(),
+  scrollTop = ref(0),
+  viewportHeight = ref(400),
+  retryRequest = shallowRef(null),
+  heights = shallowRef(new Map());
 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) =>
-        (category.value === "all" || membership(entry).includes(category.value)) &&
+        membership(entry).includes(category.value) &&
         `${entry.name} ${entry.link?.target ?? ""}`
           .toLocaleLowerCase()
           .includes(query.value.trim().toLocaleLowerCase()),
@@ -50,9 +66,116 @@ const rows = computed(() =>
   ),
   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 ?? "All files",
+    () =>
+      model.value.categories.find((item) => item.id === category.value)?.label ??
+      ui.value.labels.allFiles,
   );
 const nodes = new Map();
+const virtual = computed(() => ready.value && rows.value.length > 500);
+const offsets = computed(() => {
+  const result = [0];
+  for (const entry of rows.value) result.push(result.at(-1) + (heights.value.get(entry.id) ?? 76));
+  return result;
+});
+const start = computed(() => {
+  if (!virtual.value) return 0;
+  const position = Math.max(0, scrollTop.value - (model.value.parentHref ? 76 : 0));
+  let low = 0,
+    high = rows.value.length;
+  while (low < high) {
+    const middle = (low + high) >> 1;
+    if (offsets.value[middle + 1] <= position) low = middle + 1;
+    else high = middle;
+  }
+  return Math.max(0, low - 5);
+});
+const end = computed(() => {
+  if (!virtual.value) return rows.value.length;
+  let low = 0,
+    high = rows.value.length;
+  while (low < high) {
+    const middle = (low + high) >> 1;
+    if (offsets.value[middle + 1] <= scrollTop.value + viewportHeight.value) low = middle + 1;
+    else high = middle;
+  }
+  return Math.min(rows.value.length, Math.max(start.value + 35, low + 5));
+});
+const visibleRows = computed(() => rows.value.slice(start.value, end.value));
+const heightCache = new Map();
+let rowObserver, layoutObserver, viewHistory, measuredWidth;
+function measureLayout() {
+  if (!listScroll.value) return;
+  const width = listScroll.value.clientWidth;
+  if (measuredWidth !== undefined && width !== measuredWidth) {
+    heightCache.clear();
+    heights.value = new Map(
+      [...nodes].map(([id, node]) => [id, node.getBoundingClientRect().height]),
+    );
+  }
+  measuredWidth = width;
+  const footerHeight = footerElement.value?.getBoundingClientRect().height ?? 82;
+  document.documentElement.style.setProperty("--cw-footer-height", footerHeight + "px");
+  const available = Math.max(
+    160,
+    innerHeight - listScroll.value.getBoundingClientRect().top - footerHeight - 24,
+  );
+  viewportHeight.value = available;
+  listScroll.value.style.setProperty("--cw-list-height", available + "px");
+}
+watch([virtual, () => model.value.path], () => nextTick(measureLayout));
+const viewDefaults = (page) => ({ query: "", category: page.categories[0]?.id ?? null });
+function saveView() {
+  if (!viewHistory) return;
+  viewHistory.save(
+    new URL(model.value.dataHref, document.baseURI).href,
+    model.value.path,
+    {
+      query: query.value,
+      category: category.value,
+      selected: selected.value,
+      windowY: window.scrollY,
+      listTop: listScroll.value?.scrollTop ?? 0,
+    },
+    viewDefaults(model.value),
+  );
+}
+function retry() {
+  if (failure.value === "folder" && retryRequest.value) openFolder(...retryRequest.value, true);
+  else openFolder(model.value.dataHref, location.href, false, true);
+}
+watchEffect((onCleanup) => {
+  if (!ready.value || busy.value) return;
+  const view = {
+    query: query.value,
+    category: category.value,
+    selected: selected.value,
+    listTop: scrollTop.value,
+  };
+  const dataHref = model.value.dataHref,
+    path = model.value.path,
+    defaults = viewDefaults(model.value);
+  const frame = requestAnimationFrame(() =>
+    viewHistory?.save(
+      new URL(dataHref, document.baseURI).href,
+      path,
+      { ...view, windowY: window.scrollY },
+      defaults,
+    ),
+  );
+  onCleanup(() => cancelAnimationFrame(frame));
+});
+function setNode(id, node) {
+  const old = nodes.get(id);
+  if (old && old !== node) rowObserver?.unobserve(old);
+  if (node) {
+    nodes.set(id, node);
+    rowObserver?.observe(node);
+  } else nodes.delete(id);
+}
+watch([query, category], () => {
+  scrollTop.value = 0;
+  if (listScroll.value) listScroll.value.scrollTop = 0;
+});
 let wave,
   gamepad,
   abort,
@@ -84,45 +207,95 @@ async function loadComplete() {
     });
     if (token === navigation && !local.signal.aborted && !disposed) entries.value = data.entries;
   } catch (cause) {
-    if (token === navigation && !local.signal.aborted)
-      error.value = "Could not load complete directory data. Native page links remain available.";
+    if (token === navigation && !local.signal.aborted) {
+      error.value = ui.value.labels.listingError;
+      failure.value = "listing";
+    }
   } finally {
     if (token === navigation) busy.value = 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.value = true;
   error.value = "";
+  failure.value = null;
   try {
-    const next = await fetchThemePage(dataHref, url, "crosswave", local.signal, refresh);
+    const next = await fetchThemePage(dataHref, url, "crosswave", 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 || disposed) return;
+    if (!refresh) viewHistory.commit(next.dataHref, next.path, url, push);
+    if (next.path !== model.value.path) {
+      heightCache.set(model.value.path, heights.value);
+      if (heightCache.size > 8) heightCache.delete(heightCache.keys().next().value);
+      heights.value = heightCache.get(next.path) ?? new Map();
+    }
     model.value = next;
+    retryRequest.value = null;
     entries.value = nextEntries;
     if (!refresh) {
-      query.value = "";
-      selected.value = null;
-      category.value = "all";
+      const view = readView(
+        url,
+        "crosswave",
+        next.path,
+        viewDefaults(next),
+        next.categories.map((item) => item.id),
+        restoreState,
+      );
+      query.value = view.query;
+      selected.value = view.selected;
+      category.value = view.category;
     }
-    if (push) history.pushState({ dataHref: next.dataHref }, "", url);
     applyThemeMetadata(next, url);
     await loadComplete();
+    if (!refresh) {
+      const view = readView(
+        url,
+        "crosswave",
+        next.path,
+        viewDefaults(next),
+        next.categories.map((item) => item.id),
+        restoreState,
+      );
+      await nextTick();
+      if (selected.value && !rows.value.some((entry) => entry.id === selected.value))
+        selected.value = null;
+      scrollTop.value = view.listTop;
+      if (listScroll.value) listScroll.value.scrollTop = view.listTop;
+      await nextTick();
+      window.scrollTo({ top: view.windowY });
+      if (restoreState && selected.value)
+        nodes.get(selected.value)?.querySelector("a")?.focus({ preventScroll: true });
+    }
   } catch (cause) {
-    if (token === navigation && !local.signal.aborted)
-      error.value = "Could not open the folder. Its native link remains available.";
+    if (token === navigation && !local.signal.aborted) {
+      error.value = ui.value.labels.folderError;
+      failure.value = "folder";
+      retryRequest.value = [dataHref, url, push, refresh, restoreState];
+      viewHistory?.rollback();
+    }
   } finally {
     if (token === navigation) busy.value = false;
   }
 }
 function navigateLink(event, href, dataHref) {
   if (
+    typeof href !== "string" ||
+    typeof dataHref !== "string" ||
     event?.altKey ||
     event?.ctrlKey ||
     event?.metaKey ||
@@ -135,6 +308,7 @@ function navigateLink(event, href, dataHref) {
   openFolder(dataHref, new URL(href, document.baseURI).href, true);
 }
 async function openEntry(event, entry) {
+  saveView();
   const href = entry.presentation?.folderDataHref;
   if (
     entry.exitsExplorer ||
@@ -151,28 +325,41 @@ async function openEntry(event, entry) {
   await openFolder(href, new URL(entry.href, document.baseURI).href, true);
 }
 async function move(index) {
-  const entry = rows.value[Math.max(0, Math.min(rows.value.length - 1, index))];
+  const target = Math.max(0, Math.min(rows.value.length - 1, index));
+  const entry = rows.value[target];
   if (!entry) return;
   selected.value = entry.id;
+  if (virtual.value) {
+    scrollTop.value = Math.max(0, offsets.value[target] - 100 + (model.value.parentHref ? 76 : 0));
+    if (listScroll.value) listScroll.value.scrollTop = scrollTop.value;
+  }
   await nextTick();
   const node = nodes.get(entry.id);
   node?.querySelector("a")?.focus({ preventScroll: true });
   node?.scrollIntoView({ block: "nearest" });
 }
-function stepCategory(delta) {
+async function stepCategory(delta) {
+  if (ui.value.direction === "rtl") delta = -delta;
+  const moveFocus = document.activeElement?.getAttribute("role") === "tab";
   const items = model.value.categories,
     index = items.findIndex((item) => item.id === category.value);
   category.value = items[(index + delta + items.length) % items.length].id;
   selected.value = null;
+  if (moveFocus) {
+    await nextTick();
+    document.getElementById("cw-tab-" + category.value)?.focus({ preventScroll: true });
+  }
 }
-function confirm() {
+async function confirm() {
   if (!active.value || busy.value) return;
+  await move(rows.value.findIndex((entry) => entry.id === active.value.id));
   const anchor = nodes.get(active.value.id)?.querySelector("a");
   anchor?.click();
 }
 function parent() {
   if (model.value.parentHref) {
-    if (location.protocol === "file:") location.href = model.value.parentHref;
+    if (location.protocol === "file:" || typeof model.value.parentDataHref !== "string")
+      location.href = model.value.parentHref;
     else
       openFolder(
         model.value.parentDataHref,
@@ -183,6 +370,7 @@ function parent() {
 }
 function keyboard(event) {
   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 ?? "");
   if (editing) {
     if (event.key === "Escape") query.value = "";
@@ -276,7 +464,7 @@ const colors = {
 };
 const onPop = (event) =>
   event.state?.dataHref
-    ? openFolder(event.state.dataHref, location.href, false)
+    ? openFolder(event.state.dataHref, location.href, false, false, event.state)
     : location.reload();
 const suspend = () => {
   gamepad?.pause();
@@ -298,7 +486,43 @@ onMounted(() => {
   ready.value = true;
   document.body.setAttribute("data-cw-enhanced", "");
   abort = new AbortController();
-  history.replaceState({ dataHref: new URL(model.value.dataHref, document.baseURI).href }, "");
+  if (typeof ResizeObserver !== "undefined") {
+    rowObserver = new ResizeObserver((observations) => {
+      const next = new Map(heights.value);
+      let changed = false;
+      for (const observation of observations) {
+        const id = observation.target.dataset.id;
+        const height = observation.target.getBoundingClientRect().height;
+        if (height > 0 && next.get(id) !== height) {
+          next.set(id, height);
+          changed = true;
+        }
+      }
+      if (changed) heights.value = next;
+    });
+    for (const node of nodes.values()) rowObserver.observe(node);
+    layoutObserver = new ResizeObserver(measureLayout);
+    if (footerElement.value) layoutObserver.observe(footerElement.value);
+    const header = document.querySelector("[data-dirwell-theme='crosswave'] .cw-top");
+    if (header) layoutObserver.observe(header);
+  }
+  measureLayout();
+  window.addEventListener("resize", measureLayout);
+  viewHistory = createViewHistory("crosswave");
+  const view = readView(
+    location.href,
+    "crosswave",
+    model.value.path,
+    viewDefaults(model.value),
+    model.value.categories.map((item) => item.id),
+    history.state,
+  );
+  query.value = view.query;
+  category.value = view.category;
+  selected.value = view.selected;
+  scrollTop.value = view.listTop;
+  if (listScroll.value) listScroll.value.scrollTop = view.listTop;
+  saveView();
   try {
     const stored = localStorage.getItem("dirwell-crosswave-color");
     if (Object.hasOwn(colors, stored)) color.value = stored;
@@ -347,7 +571,11 @@ onMounted(() => {
     );
   }
   const updateClock = () =>
-    (clock.value = new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }));
+    (clock.value = new Date().toLocaleTimeString(ui.value.dateOptions.locale, {
+      timeZone: ui.value.dateOptions.timeZone,
+      hour: "2-digit",
+      minute: "2-digit",
+    }));
   updateClock();
   timer = setInterval(updateClock, 1000);
   window.addEventListener("keydown", keyboard);
@@ -368,9 +596,15 @@ watch(
     if (!href || typeof EventSource === "undefined") return;
     const updates = new EventSource(href);
     updates.onmessage = () => (pendingUpdates.value = href);
-    updates.onerror = () => (error.value = "Live updates disconnected. Refresh to retry.");
+    updates.onerror = () => {
+      error.value = ui.value.labels.updatesError;
+      failure.value = "updates";
+    };
     updates.onopen = () => {
-      if (error.value.startsWith("Live updates")) error.value = "";
+      if (failure.value === "updates") {
+        error.value = "";
+        failure.value = null;
+      }
     };
     onCleanup(() => updates.close());
   },
@@ -397,6 +631,9 @@ onBeforeUnmount(() => {
   disposed = true;
   document.body.removeAttribute("data-cw-enhanced");
   abort?.abort();
+  rowObserver?.disconnect();
+  layoutObserver?.disconnect();
+  window.removeEventListener("resize", measureLayout);
   gamepad?.pause();
   wave?.dispose();
   clearInterval(timer);
@@ -418,16 +655,24 @@ onBeforeUnmount(() => {
   <header class="cw-top">
     <div class="cw-brand">
       <slot name="header" :model="model">
+        <img
+          v-if="ui.brand.logoUrl"
+          :src="ui.brand.logoUrl"
+          :alt="ui.brand.logoAlt ?? ''"
+          width="40"
+          height="40"
+        />
         <a
           :href="model.rootHref"
           @click="navigateLink($event, model.rootHref, model.rootDataHref)"
-          >{{ model.title }}</a
+          >{{ ui.brand.name ?? model.title }}</a
         ></slot
       >
     </div>
-    <nav class="cw-location" aria-label="Breadcrumb">
-      <a :href="model.rootHref" @click="navigateLink($event, model.rootHref, model.rootDataHref)"
-        >Home</a
+    <nav class="cw-location" :aria-label="ui.labels.breadcrumb">
+      <a :href="model.rootHref" @click="navigateLink($event, model.rootHref, model.rootDataHref)">{{
+        ui.labels.home
+      }}</a
       ><template v-for="crumb in model.breadcrumbs" :key="crumb.href">
         /
         <a :href="crumb.href" @click="navigateLink($event, crumb.href, crumb.dataHref)">{{
@@ -438,8 +683,8 @@ onBeforeUnmount(() => {
     <div class="cw-clock" v-if="ready">{{ clock }}</div>
   </header>
   <main class="cw-stage" data-framework="vue" :aria-busy="busy">
-    <h1 class="cw-sr">Files in {{ model.path || "/" }}</h1>
-    <nav class="cw-rail" aria-label="File categories" :hidden="!ready">
+    <h1 class="cw-sr">{{ label(ui, "filesIn", { path: model.path || "/" }) }}</h1>
+    <nav class="cw-rail" :aria-label="ui.labels.categories" :hidden="!ready">
       <div class="cw-categories" role="tablist">
         <button
           v-for="item in model.categories"
@@ -472,13 +717,21 @@ onBeforeUnmount(() => {
       <div class="cw-list-head">
         <div class="cw-directory">
           <h2>{{ heading }}</h2>
-          <span data-cw-count>{{ complete ? rows.length : entries.length }} items</span>
+          <span data-cw-count>{{
+            label(ui, "items", { count: complete ? rows.length : entries.length })
+          }}</span>
         </div>
         <label class="cw-search"
-          >Search<input ref="search" type="search" v-model="query" :disabled="!ready || !complete"
+          ><span>{{ ui.labels.search }}</span
+          ><input ref="search" type="search" v-model="query" :disabled="!ready || !complete"
         /></label>
       </div>
-      <div class="cw-list-scroll">
+      <div
+        class="cw-list-scroll"
+        :data-virtual="virtual"
+        ref="listScroll"
+        @scroll="scrollTop = $event.currentTarget.scrollTop"
+      >
         <ul class="cw-files">
           <li v-if="model.parentHref" class="cw-row">
             <a
@@ -488,12 +741,16 @@ onBeforeUnmount(() => {
               >../</a
             >
           </li>
+          <li v-if="start" aria-hidden="true" :style="{ height: offsets[start] + 'px' }"></li>
           <li
-            v-for="entry in rows"
+            v-for="(entry, visibleIndex) in visibleRows"
             :key="entry.id"
-            :ref="(node) => (node ? nodes.set(entry.id, node) : nodes.delete(entry.id))"
+            :ref="(node) => setNode(entry.id, node)"
+            :aria-posinset="start + visibleIndex + 1"
+            :aria-setsize="rows.length"
             :class="['cw-row', { 'cw-selected': active?.id === entry.id }]"
             data-cw-entry
+            :data-custom-columns="Boolean(model.ui?.columns)"
             :data-id="entry.id"
           >
             <a
@@ -519,13 +776,30 @@ onBeforeUnmount(() => {
                   "
                 ></span>
                 <span class="cw-entry-label">
-                  <span class="cw-name">{{ entry.name }}{{ directoryLike(entry) ? "/" : "" }}</span>
-                  <span v-if="entry.link" class="cw-target">{{ entry.link.target }}</span>
-                  <span class="cw-row-meta"
-                    >{{ entry.link?.unavailable ? "Target unavailable" : entry.kind }} ·
-                    {{ directoryLike(entry) ? "Folder" : size(entry.size) }}</span
+                  <template
+                    v-for="column in ui.columns"
+                    :key="typeof column === 'string' ? column : column.dataKey"
+                    ><span v-if="column === 'name'" class="cw-name"
+                      >{{ entry.name }}{{ directoryLike(entry) ? "/" : "" }}</span
+                    >
+                    <span v-if="entry.link && column === 'name'" class="cw-target">{{
+                      entry.link.target
+                    }}</span>
+                    <span v-if="column === 'size'" class="cw-row-meta"
+                      >{{
+                        entry.link?.unavailable
+                          ? ui.labels.unavailable
+                          : ui.labels[entry.kind === "symlink" ? "link" : entry.kind]
+                      }}
+                      · {{ directoryLike(entry) ? ui.labels.folder : size(entry.size) }}</span
+                    >
+                    <span v-if="column === 'modified'" class="cw-row-date"
+                      >{{ ui.labels.modified }}
+                      {{ formattedDate(entry.modifiedAt, ui, ready) }}</span
+                    ><span v-if="typeof column === 'object'" class="cw-data-value"
+                      >{{ column.label }}: {{ publicDataValue(entry.data?.[column.dataKey]) }}</span
+                    ></template
                   >
-                  <span class="cw-row-date">Modified {{ modified(entry.modifiedAt) }}</span>
                 </span></slot
               ></a
             ><span v-else class="cw-entry cw-unavailable"
@@ -533,37 +807,111 @@ onBeforeUnmount(() => {
                 entry.name
               }}</slot></span
             >
+            <span
+              v-if="ui.actions.length || $slots.actions"
+              data-dirwell-actions
+              class="cw-row-actions"
+            >
+              <slot
+                name="actions"
+                :model="model"
+                :entry="entry"
+                :selected="selected === entry.id"
+              />
+              <template v-for="action in ui.actions" :key="action">
+                <a
+                  v-if="
+                    action === 'download' &&
+                    entry.href &&
+                    !directoryLike(entry) &&
+                    !entry.link?.unavailable
+                  "
+                  :href="safeHref(entry)"
+                  download
+                  >{{ ui.labels.download }}</a
+                >
+                <button
+                  v-else-if="action !== 'download'"
+                  :disabled="!ready || (action === 'copy-link' && !entry.href)"
+                  :aria-label="
+                    (action === 'copy-link' ? ui.labels.copyLink : ui.labels.copyPath) +
+                    ': ' +
+                    entry.name
+                  "
+                  @click="
+                    async () => {
+                      try {
+                        await copyEntryAction(action, entry);
+                        error = ui.labels.copied;
+                        failure = null;
+                      } catch {
+                        error = ui.labels.copyError;
+                        failure = 'copy';
+                      }
+                    }
+                  "
+                >
+                  {{ action === "copy-link" ? ui.labels.copyLink : ui.labels.copyPath }}
+                </button>
+              </template>
+            </span>
           </li>
+          <li
+            v-if="end < rows.length"
+            aria-hidden="true"
+            :style="{ height: offsets[rows.length] - offsets[end] + 'px' }"
+          ></li>
         </ul>
-        <p class="cw-empty" v-if="!rows.length">No matching files.</p>
+        <p class="cw-empty" v-if="!rows.length && !busy">
+          {{ model.total === 0 ? ui.labels.empty : ui.labels.noMatches }}
+        </p>
       </div>
     </section>
     <aside class="cw-detail" v-if="ready && active">
       <h2>{{ active.name }}</h2>
-      <p>{{ active.kind }} · {{ directoryLike(active) ? "Folder" : size(active.size) }}</p>
-      <p>{{ modified(active.modifiedAt) }}</p>
+      <p v-if="ui.columns.includes('size')">
+        {{ ui.labels[active.kind === "symlink" ? "link" : active.kind] }} ·
+        {{ directoryLike(active) ? ui.labels.folder : size(active.size) }}
+      </p>
+      <p v-if="ui.columns.includes('modified')">
+        {{ formattedDate(active.modifiedAt, ui, ready) }}
+      </p>
       <p v-if="active.link">{{ active.link.target }}</p>
     </aside>
-    <p role="status" aria-live="polite">{{ busy ? "Loading…" : error }}</p>
-    <nav v-if="model.page?.count > 1 && !complete" aria-label="Pagination">
-      <a v-if="model.page.previousHref" :href="model.page.previousHref" rel="prev">Previous</a> Page
-      {{ model.page.number }} of {{ model.page.count }}
-      <a v-if="model.page.nextHref" :href="model.page.nextHref" rel="next">Next</a>
+    <p role="status" aria-live="polite">{{ busy ? ui.labels.loading : error }}</p>
+    <button v-if="failure && failure !== 'copy'" :disabled="busy" @click="retry">
+      {{ ui.labels.retry }}
+    </button>
+    <a v-if="failure === 'folder' && retryRequest" :href="retryRequest[1]">{{
+      ui.labels.openNative
+    }}</a>
+    <nav v-if="model.page?.count > 1 && !complete" :aria-label="ui.labels.pagination">
+      <a v-if="model.page.previousHref" :href="model.page.previousHref" rel="prev">{{
+        ui.labels.previous
+      }}</a>
+      {{ label(ui, "page", { page: model.page.number, pages: model.page.count }) }}
+      <a v-if="model.page.nextHref" :href="model.page.nextHref" rel="next">{{ ui.labels.next }}</a>
     </nav>
   </main>
-  <footer class="cw-bottom">
-    <div class="cw-key-help">
+  <footer class="cw-bottom" ref="footerElement">
+    <div :class="ui.brand.footerText || $slots.footer ? 'cw-custom-footer' : 'cw-key-help'">
       <slot name="footer" :model="model"
-        >Arrow keys navigate · Enter confirms · Backspace returns</slot
+        ><template v-if="ui.brand.footerText"
+          ><a v-if="ui.brand.footerUrl" :href="ui.brand.footerUrl">{{ ui.brand.footerText }}</a
+          ><span v-else>{{ ui.brand.footerText }}</span></template
+        ><template v-else>{{ ui.labels.crosswaveKeyboardHelp }}</template></slot
       >
     </div>
-    <div class="cw-controller" v-if="pad">Controller · Confirm / Back</div>
+    <div class="cw-controller" v-if="pad">{{ ui.labels.controller }}</div>
     <label class="cw-appearance"
-      >Color<select v-model="color" :disabled="!ready">
-        <option v-for="name in Object.keys(colors)" :key="name">{{ name }}</option>
+      >{{ ui.labels.color
+      }}<select v-model="color" :disabled="!ready">
+        <option v-for="name in Object.keys(colors)" :key="name" :value="name">
+          {{ ui.labels[name] }}
+        </option>
       </select></label
     ><button class="cw-motion" :disabled="!ready" @click="paused = !paused">
-      {{ paused ? "Resume motion" : "Pause motion" }}
+      {{ paused ? ui.labels.resumeMotion : ui.labels.pauseMotion }}
     </button>
   </footer>
 </template>