@karibsen/eponyme 0.1.0

package/dist/runtime/components/editor/EponymeFormPage.vue

@@ -0,0 +1,288 @@
+<script setup>
+import { useAsyncData, useRequestFetch } from "#app";
+import { FlexRender, createColumnHelper, getCoreRowModel, getSortedRowModel, useVueTable } from "@tanstack/vue-table";
+import { computed, ref, watch } from "vue";
+import { humanizeLabel } from "../../utils/humanize-label";
+import { useEponymeAuth } from "../../composables/useEponymeAuth";
+import EPBadge from "../ui/EPBadge.vue";
+import EPButton from "../ui/EPButton.vue";
+import EPDialog from "../ui/EPDialog.vue";
+const props = defineProps({
+  name: { type: String, required: true },
+  definition: { type: Object, required: true }
+});
+const requestFetch = useRequestFetch();
+const auth = useEponymeAuth();
+const managed = computed(() => props.definition.submission.mode === "managed");
+const page = ref(1);
+const sorting = ref([{ id: "createdAt", desc: true }]);
+const selected = ref();
+const clearing = ref(false);
+const label = computed(() => props.definition.label || humanizeLabel(props.name.split("/").at(-1) || props.name));
+const { data: response, pending, refresh } = useAsyncData(
+  () => `eponyme:form:${props.name}:${page.value}`,
+  () => managed.value ? requestFetch(`/api/eponyme-forms/${props.name}/submissions`, { query: { page: page.value } }) : Promise.resolve(void 0),
+  { watch: [page, () => props.name] }
+);
+const submissions = computed(() => response.value?.submissions ?? []);
+const total = computed(() => response.value?.total ?? 0);
+const perPage = computed(() => response.value?.perPage ?? 25);
+const pageCount = computed(() => Math.max(1, Math.ceil(total.value / perPage.value)));
+const columnHelper = createColumnHelper();
+const columns = computed(() => [
+  ...Object.entries(props.definition.fields).map(([fieldName, field]) => columnHelper.accessor(
+    (row) => formatValue(row.data[fieldName]),
+    {
+      id: fieldName,
+      header: humanizeLabel(fieldName, field.options.label),
+      cell: (info) => truncate(info.getValue())
+    }
+  )),
+  columnHelper.accessor((row) => row.createdAt, {
+    id: "createdAt",
+    header: "Received",
+    cell: (info) => formatDate(info.getValue())
+  })
+]);
+const table = useVueTable({
+  get data() {
+    return submissions.value;
+  },
+  get columns() {
+    return columns.value;
+  },
+  state: {
+    get sorting() {
+      return sorting.value;
+    }
+  },
+  onSortingChange: (updater) => {
+    sorting.value = typeof updater === "function" ? updater(sorting.value) : updater;
+  },
+  getCoreRowModel: getCoreRowModel(),
+  // Sorting is client-side, so it only reorders the page currently loaded.
+  getSortedRowModel: getSortedRowModel()
+});
+watch(() => props.name, () => {
+  page.value = 1;
+  selected.value = void 0;
+});
+function formatValue(value) {
+  if (value == null) return "";
+  if (Array.isArray(value)) return value.map((item) => formatValue(item)).join(", ");
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function truncate(value, maxLength = 60) {
+  const characters = [...value];
+  return characters.length <= maxLength ? value : `${characters.slice(0, maxLength - 1).join("")}\u2026`;
+}
+function formatDate(value) {
+  return new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
+}
+async function clearAll() {
+  if (!confirm(`Delete all ${total.value} submissions of \u201C${label.value}\u201D? This cannot be undone.`)) return;
+  clearing.value = true;
+  try {
+    await requestFetch(`/api/eponyme-forms/${props.name}/submissions`, { method: "DELETE" });
+    selected.value = void 0;
+    page.value = 1;
+    await refresh();
+  } finally {
+    clearing.value = false;
+  }
+}
+async function deleteSubmission(submission) {
+  if (!confirm("Delete this submission? This cannot be undone.")) return;
+  await requestFetch(`/api/eponyme-forms/${props.name}/submissions/${submission.id}`, { method: "DELETE" });
+  if (selected.value?.id === submission.id) selected.value = void 0;
+  if (submissions.value.length === 1 && page.value > 1) page.value -= 1;
+  else await refresh();
+}
+</script>
+
+<template>
+  <section class="ep:mx-auto ep:w-full ep:max-w-5xl ep:px-6 ep:py-8 ep:md:px-10 ep:md:py-12">
+    <header class="ep:flex ep:flex-wrap ep:items-start ep:justify-between ep:gap-4">
+      <div>
+        <p class="ep:m-0 ep:text-[11px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase">
+          Form
+        </p>
+        <h1 class="ep:mt-2 ep:mb-0 ep:text-3xl ep:font-semibold ep:tracking-tight ep:text-white">
+          {{ label }}
+        </h1>
+        <p
+          v-if="definition.description"
+          class="ep:mt-2 ep:mb-0 ep:text-sm ep:text-muted-ep"
+        >
+          {{ definition.description }}
+        </p>
+      </div>
+      <div class="ep:flex ep:items-center ep:gap-3">
+        <EPBadge :variant="managed ? 'success' : 'neutral'">
+          {{ definition.submission.mode }}
+        </EPBadge>
+        <EPButton
+          v-if="managed && auth.canEdit.value && total > 0"
+          size="sm"
+          variant="danger"
+          :loading="clearing"
+          @click="clearAll"
+        >
+          Clear all
+        </EPButton>
+      </div>
+    </header>
+
+    <div
+      v-if="!managed"
+      class="ep:mt-8 ep:rounded-xl ep:border ep:border-dashed ep:border-border-ep ep:p-8 ep:text-center"
+    >
+      <p class="ep:m-0 ep:text-sm ep:text-muted-ep">
+        This form uses the custom submission mode, so Eponyme does not store its submissions.
+      </p>
+      <p class="ep:mt-2 ep:mb-0 ep:text-xs ep:text-muted-ep">
+        Switch it to <code>submission: {{ "{" }} mode: 'managed' {{ "}" }}</code> to collect them here.
+      </p>
+    </div>
+    <p
+      v-else-if="pending"
+      class="ep:mt-8 ep:text-sm ep:text-muted-ep"
+    >
+      Loading…
+    </p>
+    <div
+      v-else-if="submissions.length"
+      class="ep:mt-8"
+    >
+      <div class="ep:overflow-x-auto ep:rounded-xl ep:bg-selected-ep/50">
+        <table class="ep:w-full ep:border-collapse ep:text-left ep:text-sm">
+          <thead>
+            <tr
+              v-for="headerGroup in table.getHeaderGroups()"
+              :key="headerGroup.id"
+            >
+              <th
+                v-for="header in headerGroup.headers"
+                :key="header.id"
+                scope="col"
+                class="ep:border-b ep:border-border-ep ep:p-3 ep:text-[11px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase"
+              >
+                <button
+                  type="button"
+                  class="ep:flex ep:cursor-pointer ep:items-center ep:gap-1 ep:border-0 ep:bg-transparent ep:p-0 ep:text-inherit ep:uppercase"
+                  :aria-sort="header.column.getIsSorted() === 'asc' ? 'ascending' : header.column.getIsSorted() === 'desc' ? 'descending' : 'none'"
+                  @click="header.column.toggleSorting()"
+                >
+                  <FlexRender
+                    :render="header.column.columnDef.header"
+                    :props="header.getContext()"
+                  />
+                  <span aria-hidden="true">{{ header.column.getIsSorted() === "asc" ? "\u2191" : header.column.getIsSorted() === "desc" ? "\u2193" : "" }}</span>
+                </button>
+              </th>
+              <th
+                scope="col"
+                class="ep:border-b ep:border-border-ep ep:p-3"
+              >
+                <span class="ep:sr-only">Actions</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in table.getRowModel().rows"
+              :key="row.id"
+              class="ep:group ep:border-b ep:border-border-ep/50 ep:last:border-0"
+            >
+              <td
+                v-for="cell in row.getVisibleCells()"
+                :key="cell.id"
+                class="ep:p-3 ep:align-top ep:text-white"
+              >
+                <button
+                  type="button"
+                  class="ep:cursor-pointer ep:border-0 ep:bg-transparent ep:p-0 ep:text-left ep:text-inherit"
+                  @click="selected = row.original"
+                >
+                  <FlexRender
+                    :render="cell.column.columnDef.cell"
+                    :props="cell.getContext()"
+                  />
+                </button>
+              </td>
+              <td class="ep:p-3 ep:text-right ep:align-top">
+                <EPButton
+                  v-if="auth.canEdit.value"
+                  size="sm"
+                  variant="danger"
+                  class="ep:opacity-0 ep:group-hover:opacity-100 ep:focus-visible:opacity-100"
+                  @click="deleteSubmission(row.original)"
+                >
+                  Delete
+                </EPButton>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div class="ep:mt-4 ep:flex ep:flex-wrap ep:items-center ep:justify-between ep:gap-3">
+        <p class="ep:m-0 ep:text-xs ep:text-muted-ep">
+          {{ total }} submission{{ total === 1 ? "" : "s" }} · page {{ page }} of {{ pageCount }}
+        </p>
+        <div class="ep:flex ep:gap-2">
+          <EPButton
+            size="sm"
+            :disabled="page <= 1"
+            @click="page -= 1"
+          >
+            Previous
+          </EPButton>
+          <EPButton
+            size="sm"
+            :disabled="page >= pageCount"
+            @click="page += 1"
+          >
+            Next
+          </EPButton>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      class="ep:mt-8 ep:rounded-xl ep:border ep:border-dashed ep:border-border-ep ep:p-8 ep:text-center"
+    >
+      <p class="ep:m-0 ep:text-sm ep:text-muted-ep">
+        No submissions yet.
+      </p>
+    </div>
+
+    <EPDialog
+      :open="Boolean(selected)"
+      title="Submission"
+      :description="selected ? formatDate(selected.createdAt) : ''"
+      @update:open="(value) => {
+  if (!value) selected = void 0;
+}"
+    >
+      <dl
+        v-if="selected"
+        class="ep:m-0 ep:grid ep:gap-4"
+      >
+        <div
+          v-for="(field, fieldName) in definition.fields"
+          :key="fieldName"
+        >
+          <dt class="ep:text-[11px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase">
+            {{ humanizeLabel(String(fieldName), field.options.label) }}
+          </dt>
+          <dd class="ep:m-0 ep:mt-1 ep:whitespace-pre-wrap ep:text-sm ep:text-white">
+            {{ formatValue(selected.data[fieldName]) || "\u2014" }}
+          </dd>
+        </div>
+      </dl>
+    </EPDialog>
+  </section>
+</template>

package/dist/runtime/components/editor/EponymeFormPage.vue.d.ts

@@ -0,0 +1,8 @@
+import type { EponymeFormDefinitionBase } from '../../types/index.js';
+type __VLS_Props = {
+    name: string;
+    definition: EponymeFormDefinitionBase;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeHistoryDialog.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    open: boolean;
+    name: string;
+    canRestore?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    restored: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onRestored?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeHistoryDialog.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { useRequestFetch } from "#app";
+import { ref, watch } from "vue";
+import EPBadge from "../ui/EPBadge.vue";
+import EPButton from "../ui/EPButton.vue";
+import EPDialog from "../ui/EPDialog.vue";
+import { formatVersionDate, useEponymeHistory } from "../../composables/useEponymeHistory";
+const props = defineProps({
+  open: { type: Boolean, required: true },
+  name: { type: String, required: true },
+  canRestore: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["update:open", "restored"]);
+const requestFetch = useRequestFetch();
+const { history, pending, error, load } = useEponymeHistory(() => props.name);
+const restoring = ref();
+async function restore(version) {
+  if (!confirm(`Restore the version from ${formatVersionDate(version.createdAt)}?`)) return;
+  restoring.value = version.id;
+  error.value = "";
+  try {
+    await requestFetch(`/api/eponyme-history/${props.name}/${version.id}`, { method: "PATCH" });
+    emit("restored");
+    emit("update:open", false);
+  } catch {
+    error.value = "Unable to restore this version.";
+  } finally {
+    restoring.value = void 0;
+  }
+}
+watch(() => props.open, (open) => open && void load());
+</script>
+
+<template>
+  <EPDialog
+    :open="open"
+    title="Version history"
+    description="Restore an earlier draft or published version of this entry."
+    @update:open="emit('update:open', $event)"
+  >
+    <p
+      v-if="pending"
+      class="ep:text-sm ep:text-muted-ep"
+    >
+      Loading versions…
+    </p>
+    <p
+      v-else-if="error"
+      class="ep:text-sm ep:text-danger-ep"
+    >
+      {{ error }}
+    </p>
+    <p
+      v-else-if="!history.length"
+      class="ep:text-sm ep:text-muted-ep"
+    >
+      No saved versions yet.
+    </p>
+    <ol
+      v-else
+      class="ep:m-0 ep:grid ep:max-h-[55vh] ep:list-none ep:gap-2 ep:overflow-y-auto ep:p-0"
+    >
+      <li
+        v-for="version in history"
+        :key="version.id"
+        class="ep:flex ep:items-center ep:justify-between ep:gap-4 ep:rounded-xl ep:bg-selected-ep/40 ep:p-3"
+      >
+        <div class="ep:min-w-0">
+          <div class="ep:flex ep:flex-wrap ep:items-center ep:gap-2">
+            <EPBadge :variant="version.status === 'published' ? 'success' : 'warning'">
+              {{ version.action }}
+            </EPBadge>
+            <span class="ep:text-sm ep:font-medium ep:text-white">{{ formatVersionDate(version.createdAt) }}</span>
+          </div>
+          <p class="ep:mt-1 ep:mb-0 ep:text-xs ep:text-muted-ep">
+            Version #{{ version.id }} ·
+            <template v-if="version.user">
+              by {{ version.user.username }}
+            </template>
+            <template v-else>
+              author unknown
+            </template>
+          </p>
+        </div>
+        <EPButton
+          v-if="canRestore"
+          size="sm"
+          :loading="restoring === version.id"
+          :disabled="restoring !== void 0"
+          @click="restore(version)"
+        >
+          Restore
+        </EPButton>
+      </li>
+    </ol>
+  </EPDialog>
+</template>

package/dist/runtime/components/editor/EponymeHistoryDialog.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    open: boolean;
+    name: string;
+    canRestore?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    restored: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onRestored?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeNavigationLink.d.vue.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    to: string;
+    label: string;
+    variant?: 'sidebar' | 'breadcrumb' | 'card';
+    active?: boolean;
+    depth?: number;
+    folder?: boolean;
+    description?: string;
+    draft?: boolean;
+    collection?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymeNavigationLink.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed } from "vue";
+import EPButton from "../ui/EPButton.vue";
+const props = defineProps({
+  to: { type: String, required: true },
+  label: { type: String, required: true },
+  variant: { type: String, required: false, default: "sidebar" },
+  active: { type: Boolean, required: false, default: false },
+  depth: { type: Number, required: false, default: 0 },
+  folder: { type: Boolean, required: false, default: false },
+  description: { type: String, required: false, default: void 0 },
+  draft: { type: Boolean, required: false, default: false },
+  collection: { type: Boolean, required: false, default: false }
+});
+const sidebarLabel = computed(() => {
+  const maxLength = Math.max(18, 30 - props.depth * 3);
+  const characters = [...props.label];
+  if (characters.length <= maxLength) return props.label;
+  return `${characters.slice(0, maxLength - 1).join("")}\u2026`;
+});
+</script>
+
+<template>
+  <div
+    v-if="variant === 'sidebar'"
+    class="ep:relative ep:w-full ep:min-w-0"
+  >
+    <NuxtLink
+      :to="to"
+      :aria-current="active ? 'page' : void 0"
+      class="eponyme-sidebar-link ep:flex ep:w-full ep:max-w-full ep:min-w-0 ep:items-center ep:rounded-lg ep:py-2 ep:text-sm ep:no-underline"
+      :title="label"
+      :class="[
+  folder ? collection ? 'ep:pr-20 ep:font-medium' : 'ep:pr-10 ep:font-medium' : 'ep:pr-3',
+  active ? 'ep:bg-selected-ep ep:text-white ep:hover:bg-selected-ep' : folder ? 'ep:text-text-ep ep:hover:bg-selected-ep/50 ep:hover:text-white' : 'ep:text-muted-ep ep:hover:bg-selected-ep/50 ep:hover:text-white'
+]"
+      :style="{ paddingLeft: `${12 + depth * 14}px` }"
+    >
+      <span class="ep:flex ep:w-full ep:min-w-0 ep:items-center ep:gap-2 ep:overflow-hidden">
+        <span class="ep:block ep:min-w-0 ep:flex-1 ep:overflow-hidden ep:text-ellipsis ep:whitespace-nowrap">{{ sidebarLabel }}</span>
+        <span
+          v-if="draft"
+          class="ep:h-1.5 ep:w-1.5 ep:shrink-0 ep:rounded-full ep:bg-warning-ep"
+          title="Draft"
+          aria-label="Draft"
+        />
+      </span>
+    </NuxtLink>
+  </div>
+
+  <NuxtLink
+    v-else-if="variant === 'breadcrumb'"
+    :to="to"
+    class="ep:rounded-md ep:px-2 ep:py-1.5 ep:font-medium ep:text-muted-ep ep:no-underline ep:transition ep:hover:bg-selected-ep ep:hover:text-white"
+  >{{ label }}</NuxtLink>
+
+  <NuxtLink
+    v-else
+    :to="to"
+    :title="label"
+    class="ep:group ep:flex ep:min-h-4 ep:min-w-0 ep:items-center ep:justify-between ep:rounded-xl ep:bg-selected-ep ep:px-5 ep:py-4 ep:font-semibold ep:text-text-ep ep:no-underline ep:transition ep:hover:border-muted-ep ep:hover:bg-selected-ep/80"
+  >
+    <span class="ep:min-w-0 ep:flex-1">
+      <span class="ep:block ep:truncate ep:text-sm ep:text-white">{{ label }}</span>
+      <span
+        v-if="description"
+        class="ep:mt-1 ep:block ep:text-xs ep:font-medium ep:text-muted-ep"
+      >{{ description }}</span>
+    </span>
+    <EPButton
+      class="ep:group-hover:translate-x-1 ep:hover:bg-transparent ep:group-hover:text-white"
+      variant="ghost"
+      icon="mingcute:arrow-right-line"
+    />
+  </NuxtLink>
+</template>
+
+<style scoped>
+.eponyme-sidebar-link{transition:color .2s ease-out,background-color .2s ease-out}
+</style>

package/dist/runtime/components/editor/EponymeNavigationLink.vue.d.ts

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    to: string;
+    label: string;
+    variant?: 'sidebar' | 'breadcrumb' | 'card';
+    active?: boolean;
+    depth?: number;
+    folder?: boolean;
+    description?: string;
+    draft?: boolean;
+    collection?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymePageNavigation.d.vue.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    basePath: string;
+    current: string;
+    entries: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymePageNavigation.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  basePath: { type: String, required: true },
+  current: { type: String, required: true },
+  entries: { type: Array, required: true }
+});
+const currentIndex = computed(() => props.entries.indexOf(props.current));
+const previous = computed(() => currentIndex.value > 0 ? props.entries[currentIndex.value - 1] : void 0);
+const next = computed(() => currentIndex.value >= 0 ? props.entries[currentIndex.value + 1] : void 0);
+function path(name) {
+  return `${props.basePath.replace(/\/$/, "")}/${name}`;
+}
+function label(name) {
+  return (name.split("/").at(-1) ?? name).replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+}
+</script>
+
+<template>
+  <nav
+    v-if="previous || next"
+    class="ep:mx-auto ep:grid ep:max-w-3xl ep:grid-cols-1 ep:gap-3 ep:px-6 ep:pb-10 ep:md:grid-cols-2 ep:md:px-10 ep:md:pb-12"
+    aria-label="Entry pagination"
+  >
+    <NuxtLink
+      v-if="previous"
+      :to="path(previous)"
+      class="ep:group ep:flex ep:min-w-0 ep:items-center ep:gap-3 ep:rounded-xl ep:bg-selected-ep/40 ep:px-5 ep:py-4 ep:text-left ep:no-underline ep:transition ep:hover:border-muted-ep ep:hover:bg-selected-ep"
+    >
+      <span
+        class="ep:text-lg ep:text-muted-ep ep:transition ep:group-hover:-translate-x-1 ep:group-hover:text-white"
+        aria-hidden="true"
+      >←</span>
+      <span class="ep:min-w-0">
+        <span class="ep:block ep:text-[10px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase">Previous</span>
+        <span class="ep:mt-1 ep:block ep:truncate ep:text-sm ep:font-semibold ep:text-white">{{ label(previous) }}</span>
+      </span>
+    </NuxtLink>
+    <span
+      v-else
+      class="ep:hidden ep:md:block"
+    />
+    <NuxtLink
+      v-if="next"
+      :to="path(next)"
+      class="ep:group ep:flex ep:min-w-0 ep:items-center ep:justify-end ep:gap-3 ep:rounded-xl ep:bg-selected-ep/40 ep:px-5 ep:py-4 ep:text-right ep:no-underline ep:transition ep:hover:border-muted-ep ep:hover:bg-selected-ep"
+    >
+      <span class="ep:min-w-0">
+        <span class="ep:block ep:text-[10px] ep:font-semibold ep:tracking-widest ep:text-muted-ep ep:uppercase">Next</span>
+        <span class="ep:mt-1 ep:block ep:truncate ep:text-sm ep:font-semibold ep:text-white">{{ label(next) }}</span>
+      </span>
+      <span
+        class="ep:text-lg ep:text-muted-ep ep:transition ep:group-hover:translate-x-1 ep:group-hover:text-white"
+        aria-hidden="true"
+      >→</span>
+    </NuxtLink>
+  </nav>
+</template>

package/dist/runtime/components/editor/EponymePageNavigation.vue.d.ts

@@ -0,0 +1,8 @@
+type __VLS_Props = {
+    basePath: string;
+    current: string;
+    entries: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/editor/EponymePreviewPanel.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    name: string;
+    /** Public route of the site rendering this entry, from `eponyme.previewPaths`. */
+    path: string;
+    open: boolean;
+};
+declare function reload(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    reload: typeof reload;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;