@karibsen/eponyme 0.1.1 → 0.2.0

package/README.md

@@ -15,11 +15,13 @@ Define your content in `eponyme.config.ts`. Eponyme provides defaults, validatio
 - Declarative defaults and validation
 - Conditional fields, character counters, and sortable arrays
 - Private drafts with explicit publishing
-- Collections for articles, pages, and other repeatable content
+- Collections for articles, pages, and other repeatable content, with sorting, limiting and pagination
 - Public forms with typed schemas, server-side validation, and stored submissions
+- Content variables such as `{{ currentYear }}`, resolved when the page is served
 - Persistent version history with dashboard restoration
 - Draft previews for configured public routes
 - A general sitemap metadata endpoint for configured public routes
+- Content export and import between environments, guarded by a schema fingerprint
 - A generated dashboard at `/__eponyme`
 - Server sessions with `owner`, `editor`, and `viewer` roles
 - PostgreSQL and Prisma persistence using JSONB
@@ -89,6 +91,7 @@ export default defineEponymeConfig({
         href: '/contact',
         type: 'internal',
         openInNewTab: false,
+        download: false,
       },
     }),
     published: field.boolean({
@@ -171,12 +174,14 @@ Add the required models to your Prisma schema:
 
 ```prisma
 model Eponyme {
-  name      String   @id
-  data      Json     @db.JsonB
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
+  name      String    @id
+  data      Json      @db.JsonB
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime?
   versions  EponymeVersion[]
 
+  @@index([deletedAt])
   @@map("eponyme_entries")
 }
 
@@ -241,6 +246,9 @@ model EponymeFormSubmission {
 
 Run the migration with the workflow used by your application.
 
+Upgrading from 0.1.1 requires one migration: `Eponyme.deletedAt`, which backs the trash.
+Deleting a collection entry no longer destroys it.
+
 The playground includes the same models in `playground/prisma/schema.prisma`. Copy `playground/.env.example` to `playground/.env`, set `DATABASE_URL`, then run:
 
 ```bash
@@ -346,6 +354,27 @@ GET /api/eponyme-collections/articles?orderBy=date&order=desc&take=4
 `take` is capped at 200, and an unknown `orderBy` answers `400` with the accepted keys
 rather than returning an arbitrary order.
 
+### Trash
+
+Deleting a collection entry moves it to a trash rather than destroying it. The entry
+disappears from the dashboard, from the public API and from the sitemap, but its content
+and its whole version history are kept, so it can be brought back.
+
+The collection page lists the trash behind a **Trash** button and offers **Restore** and
+**Delete for good**. Restoring is available to editors and owners; deleting for good is
+reserved to owners, since it is the only irreversible content operation — the entry's
+history goes with it.
+
+```http
+GET    /api/eponyme-trash/articles                 # trashed entries of a collection
+PATCH  /api/eponyme-trash/articles/my-article      # restore
+DELETE /api/eponyme-trash/articles/my-article      # delete for good, owner only
+```
+
+A trashed entry keeps its row, so it keeps its slug. Creating an entry with that slug is
+refused with a message pointing at the trash rather than silently overwriting what is
+waiting there. Restore the entry or delete it for good to free its slug.
+
 ## Entries
 
 `useEponyme()` is auto-imported and infers its data from `eponyme.config.ts`:
@@ -379,6 +408,33 @@ The dashboard uses explicit saves. `Ctrl+S` or `Cmd+S` stores a draft. Publish r
 
 The `errors` ref contains field errors returned with HTTP `422`. Eponyme creates missing singleton rows from configured defaults. It also reconciles stored JSONB data when fields are added or removed from the schema.
 
+### Export and import
+
+The dashboard overview at `/__eponyme` carries **Export** and **Import**, so content
+prepared on one environment can be moved to another instead of being retyped.
+
+Export downloads a JSON file holding every singleton and every live collection entry
+with its complete state — draft, published version, status and publication date — plus a
+fingerprint of the schema each entry was written against. The trash, form submissions and
+users are never part of it.
+
+Import applies that file on top of the current content: each entry it carries overwrites
+its counterpart, entries it does not mention are left untouched, and nothing is ever
+deleted. Before the first write, the fingerprints are compared with the local
+configuration; a single divergence refuses the whole file and names what diverged, so an
+import can never land half of its entries into a schema that no longer matches. The
+dashboard first runs the import as a dry run and shows what it would create, overwrite
+and skip. An entry whose slug waits in the trash is skipped rather than resurrected.
+
+Every imported entry is written to the version history, so an import stays reversible
+entry by entry from the timeline.
+
+```http
+GET  /api/eponyme-export             # editors and owners
+POST /api/eponyme-import             # owners only
+POST /api/eponyme-import?dryRun=1    # report the counts without writing
+```
+
 ## Content variables
 
 Editors can drop `{{ currentYear }}` into any text or rich-text field. Variables are
@@ -612,17 +668,75 @@ Two protections apply to the public submission route:
 - a **body size limit**, 64 KB by default, configurable with `maxBodyBytes`. An oversized
   body is refused with `413` before it is parsed.
 
-Rate limiting, CAPTCHA support and file uploads are not implemented yet.
+A captcha is not part of the module. A public form is a normal POST route, so adding
+Turnstile, hCaptcha or anything else is done in the host application: render the widget
+on the page, send its token, and verify it in your own handler before calling
+`validateEponymeForm()`.
+
+Rate limiting and file uploads are not implemented yet.
+
+## Hooks
+
+Eponyme emits Nitro hooks around every content write and form submission. Listen to
+them from a server plugin:
+
+```ts
+// server/plugins/eponyme.ts
+export default defineNitroPlugin((nitroApp) => {
+  nitroApp.hooks.hook('eponyme:entry:published', async ({ name, collection, data }) => {
+    await purgeCdnCache(collection ? `/${collection.name}/${collection.slug}` : `/${name}`)
+  })
+
+  nitroApp.hooks.hook('eponyme:form:submitted', async ({ form, data, id }) => {
+    if (form === 'contact') await sendEmail(data)
+  })
+})
+```
+
+| Hook | When |
+|---|---|
+| `eponyme:entry:beforeSave` | Before a draft save or a publication |
+| `eponyme:entry:saved` | After a draft save |
+| `eponyme:entry:published` | After a publication |
+| `eponyme:entry:restored` | After a history version was restored |
+| `eponyme:entry:trashed` | After a collection entry was moved to the trash |
+| `eponyme:entry:untrashed` | After a collection entry was taken back out of the trash |
+| `eponyme:entry:purged` | After a collection entry and its history were deleted for good |
+| `eponyme:form:beforeSubmit` | Before a managed submission is stored |
+| `eponyme:form:submitted` | After a managed submission was stored |
+
+The `before` hooks can **reject or amend** the operation. Throwing rejects it with a
+`422` carrying your message, which is the way to enforce a rule the schema cannot
+express. Mutating `context.data` changes what gets written:
+
+```ts
+nitroApp.hooks.hook('eponyme:entry:beforeSave', ({ data, collection }) => {
+  if (collection?.name === 'articles' && !data.excerpt) throw new Error('An excerpt is required.')
+  data.updatedBy = 'automation'
+})
+```
+
+`eponyme:form:beforeSubmit` runs **after** validation, so a listener never sees a
+payload the schema would have rejected.
+
+The other hooks are notifications: the write already happened, so a listener that
+throws is logged and swallowed. A failing webhook must not report a successful save as
+an error the editor cannot act on.
+
+Entries belonging to a collection carry `collection: { name, slug }`, so a listener can
+branch without re-parsing the entry name. The three trash hooks only ever concern
+collection entries, so their `collection` is always present; they carry no content, since
+a trash move leaves the entry itself untouched.
 
 ## Current status
 
-Eponyme is at version `0.1.0`. It is ready for controlled projects and production pilots. A few workflows still need hardening before a broad public release:
+Eponyme is at version `0.1.1`. It is ready for controlled projects and production pilots. A few workflows still need hardening before a broad public release:
 
-- Dynamic preview routes for collection entries
-- Reliable preview version switching and cache invalidation
-- Client revision tokens for long-running concurrent edits
-- Recoverable deletion
-- Public form submissions
+- Client revision tokens for long-running concurrent edits: the current `updatedAt` check protects overlapping writes within one request, not two editors who loaded the same older revision. A deletion is not guarded by a revision either
+- Retention controls for the trash: entries stay there until someone empties it
+- Rate limiting and file uploads for public forms
+- Filtering, export and retention controls for stored submissions
+- Pagination or a sitemap index beyond 50,000 URLs
 
 ## Development
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@karibsen/eponyme",
   "configKey": "eponyme",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, useLogger, createResolver, installModule, findPath, addImports, addImportsDir, addServerImports, addRouteMiddleware, addTypeTemplate, addServerHandler, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, useLogger, createResolver, findPath, addImports, addImportsDir, addServerImports, addRouteMiddleware, addTypeTemplate, addServerHandler, addServerPlugin } from '@nuxt/kit';
 import pc from 'picocolors';
 import tailwindcss from '@tailwindcss/vite';
 import { resolve } from 'node:path';
@@ -17,6 +17,46 @@ const module$1 = defineNuxtModule({
       sessionDurationDays: 7
     }
   },
+  moduleDependencies: {
+    "@nuxt/icon": {
+      overrides: {
+        serverBundle: { collections: ["mingcute"] },
+        clientBundle: {
+          icons: [
+            "mingcute:history-anticlockwise-line",
+            "mingcute:eye-2-line",
+            "mingcute:layout-leftbar-close-line",
+            "mingcute:layout-leftbar-open-line",
+            "mingcute:down-small-line",
+            "mingcute:search-line",
+            "mingcute:close-line",
+            "mingcute:arrow-right-line",
+            "mingcute:align-arrow-right-line",
+            "mingcute:link-2-line",
+            "mingcute:settings-3-line",
+            "mingcute:code-line",
+            "mingcute:refresh-2-line",
+            "mingcute:external-link-line",
+            "mingcute:paragraph-line",
+            "mingcute:heading-2-line",
+            "mingcute:heading-3-line",
+            "mingcute:bold-line",
+            "mingcute:italic-line",
+            "mingcute:strikethrough-line",
+            "mingcute:link-line",
+            "mingcute:pic-line",
+            "mingcute:list-check-line",
+            "mingcute:list-ordered-line",
+            "mingcute:quote-left-line",
+            "mingcute:back-2-line",
+            "mingcute:forward-2-line",
+            "mingcute:download-2-line",
+            "mingcute:upload-2-line"
+          ]
+        }
+      }
+    }
+  },
   async setup(options, nuxt) {
     const logger = useLogger("eponyme");
     const resolver = createResolver(import.meta.url);
@@ -30,41 +70,6 @@ const module$1 = defineNuxtModule({
     nuxt.options.runtimeConfig.eponymeAuth = {
       sessionDurationDays: options.auth?.sessionDurationDays ?? 7
     };
-    await installModule("@nuxt/icon", {
-      serverBundle: { collections: ["mingcute"] },
-      clientBundle: {
-        // Explicit list: an icon missing here is not bundled and renders blank in production.
-        icons: [
-          "mingcute:history-anticlockwise-line",
-          "mingcute:eye-2-line",
-          "mingcute:layout-leftbar-close-line",
-          "mingcute:layout-leftbar-open-line",
-          "mingcute:down-small-line",
-          "mingcute:search-line",
-          "mingcute:close-line",
-          "mingcute:arrow-right-line",
-          "mingcute:align-arrow-right-line",
-          "mingcute:link-2-line",
-          "mingcute:settings-3-line",
-          "mingcute:code-line",
-          "mingcute:refresh-2-line",
-          "mingcute:external-link-line",
-          "mingcute:paragraph-line",
-          "mingcute:heading-2-line",
-          "mingcute:heading-3-line",
-          "mingcute:bold-line",
-          "mingcute:italic-line",
-          "mingcute:strikethrough-line",
-          "mingcute:link-line",
-          "mingcute:pic-line",
-          "mingcute:list-check-line",
-          "mingcute:list-ordered-line",
-          "mingcute:quote-left-line",
-          "mingcute:back-2-line",
-          "mingcute:forward-2-line"
-        ]
-      }
-    }, nuxt);
     const preparing = Boolean(nuxt.options._prepare);
     if (!options.prismaClient) {
       if (!preparing) throw new Error(`${pc.red("[Eponyme]")} eponyme.prismaClient is required.`);
@@ -141,11 +146,16 @@ declare module '#eponyme/variables' {
     addServerHandler({ route: "/api/eponyme/**", method: "patch", handler: resolver.resolve("./runtime/server/api/eponyme/[name].patch") });
     addServerHandler({ route: "/api/eponyme-statuses", handler: resolver.resolve("./runtime/server/api/eponyme-statuses.get") });
     addServerHandler({ route: "/api/eponyme-sitemap", handler: resolver.resolve("./runtime/server/api/eponyme-sitemap.get") });
+    addServerHandler({ route: "/api/eponyme-export", handler: resolver.resolve("./runtime/server/api/eponyme-export.get") });
+    addServerHandler({ route: "/api/eponyme-import", method: "post", handler: resolver.resolve("./runtime/server/api/eponyme-import.post") });
     addServerHandler({ route: "/api/eponyme-history/**", handler: resolver.resolve("./runtime/server/api/eponyme-history/[path].get") });
     addServerHandler({ route: "/api/eponyme-history/**", method: "patch", handler: resolver.resolve("./runtime/server/api/eponyme-history/[path].patch") });
     addServerHandler({ route: "/api/eponyme-collections/**", handler: resolver.resolve("./runtime/server/api/eponyme-collections/[path].get") });
     addServerHandler({ route: "/api/eponyme-collections/**", method: "post", handler: resolver.resolve("./runtime/server/api/eponyme-collections/[path].post") });
     addServerHandler({ route: "/api/eponyme-collections/**", method: "delete", handler: resolver.resolve("./runtime/server/api/eponyme-collections/[path].delete") });
+    addServerHandler({ route: "/api/eponyme-trash/**", handler: resolver.resolve("./runtime/server/api/eponyme-trash/[path].get") });
+    addServerHandler({ route: "/api/eponyme-trash/**", method: "patch", handler: resolver.resolve("./runtime/server/api/eponyme-trash/[path].patch") });
+    addServerHandler({ route: "/api/eponyme-trash/**", method: "delete", handler: resolver.resolve("./runtime/server/api/eponyme-trash/[path].delete") });
     addServerHandler({ route: "/api/eponyme-forms/**", handler: resolver.resolve("./runtime/server/api/eponyme-forms/[path].get") });
     addServerHandler({ route: "/api/eponyme-forms/**", method: "post", handler: resolver.resolve("./runtime/server/api/eponyme-forms/[path].post") });
     addServerHandler({ route: "/api/eponyme-forms/**", method: "delete", handler: resolver.resolve("./runtime/server/api/eponyme-forms/[path].delete") });

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

@@ -3,11 +3,11 @@ import { useAsyncData, useRequestFetch, useRoute, useRouter, useState } from "#a
 import { computed, ref, watch } from "vue";
 import { normalizeSlug } from "../../utils/normalize-slug";
 import { useEponymeAuth } from "../../composables/useEponymeAuth";
-import EPBadge from "../ui/EPBadge.vue";
 import EPButton from "../ui/EPButton.vue";
 import EPDialog from "../ui/EPDialog.vue";
 import EPFormField from "../ui/EPFormField.vue";
 import EPInputText from "../ui/EPInputText.vue";
+import { EPONYME_DATE_LOCALE } from "../../utils/date-locale";
 const props = defineProps({
   basePath: { type: String, required: true },
   name: { type: String, required: true },
@@ -24,12 +24,19 @@ const slugTouched = ref(false);
 const errors = ref({});
 const collectionEntries = useState("eponyme:collection-entries", () => ({}));
 const endpoint = computed(() => `/api/eponyme-collections/${props.name}`);
+const trashEndpoint = computed(() => `/api/eponyme-trash/${props.name}`);
 const auth = useEponymeAuth();
+const view = ref("entries");
 const { data: response, pending, refresh } = useAsyncData(
   `eponyme:collection:${props.name}`,
   () => requestFetch(endpoint.value, { query: { version: "draft", raw: 1 } })
 );
+const { data: trashResponse, refresh: refreshTrash } = useAsyncData(
+  `eponyme:collection-trash:${props.name}`,
+  () => auth.canEdit.value ? requestFetch(trashEndpoint.value) : Promise.resolve({ entries: [] })
+);
 const entries = computed(() => response.value?.entries ?? []);
+const trashEntries = computed(() => trashResponse.value?.entries ?? []);
 const label = computed(() => props.definition.label || humanize(props.name.split("/").at(-1) || props.name));
 watch(title, (value) => {
   if (!slugTouched.value) slug.value = normalizeSlug(value);
@@ -87,12 +94,23 @@ async function createEntry() {
   }
 }
 async function deleteEntry(entry) {
-  if (!confirm(`Delete \u201C${entry.title}\u201D? This cannot be undone.`)) return;
+  if (!confirm(`Move \u201C${entry.title}\u201D to the trash? Its slug stays reserved until you restore it or delete it for good.`)) return;
   await requestFetch(`${endpoint.value}/${entry.slug}`, { method: "DELETE" });
-  await refresh();
+  await Promise.all([refresh(), refreshTrash()]);
+}
+async function restoreEntry(entry) {
+  await requestFetch(`${trashEndpoint.value}/${entry.slug}`, { method: "PATCH" });
+  await Promise.all([refresh(), refreshTrash()]);
+  if (!trashEntries.value.length) view.value = "entries";
+}
+async function purgeEntry(entry) {
+  if (!confirm(`Permanently delete \u201C${entry.title}\u201D? Its content and its whole history are lost. This cannot be undone.`)) return;
+  await requestFetch(`${trashEndpoint.value}/${entry.slug}`, { method: "DELETE" });
+  await refreshTrash();
+  if (!trashEntries.value.length) view.value = "entries";
 }
 function formatDate(value) {
-  return value ? new Intl.DateTimeFormat(void 0, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value)) : "";
+  return value ? new Intl.DateTimeFormat(EPONYME_DATE_LOCALE, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value)) : "";
 }
 </script>
 
@@ -113,17 +131,65 @@ function formatDate(value) {
           {{ definition.description }}
         </p>
       </div>
-      <EPButton
-        v-if="auth.canEdit.value"
-        variant="primary"
-        @click="createOpen = true"
-      >
-        + New {{ humanize(name.split("/").at(-1) || "entry").replace(/s$/, "") }}
-      </EPButton>
+      <div class="ep:flex ep:flex-wrap ep:items-center ep:gap-2">
+        <EPButton
+          v-if="auth.canEdit.value && trashEntries.length"
+          size="md"
+          :variant="view === 'trash' ? 'primary' : 'secondary'"
+          @click="view = view === 'trash' ? 'entries' : 'trash'"
+        >
+          Trash ({{ trashEntries.length }})
+        </EPButton>
+        <EPButton
+          v-if="auth.canEdit.value"
+          variant="primary"
+          @click="createOpen = true"
+        >
+          + New {{ humanize(name.split("/").at(-1) || "entry").replace(/s$/, "") }}
+        </EPButton>
+      </div>
     </header>
 
+    <div
+      v-if="view === 'trash'"
+      class="ep:mt-8 ep:grid ep:gap-3"
+    >
+      <p class="ep:m-0 ep:text-sm ep:text-muted-ep">
+        Trashed entries keep their history and their slug. Restore one to bring it back.
+      </p>
+      <article
+        v-for="entry in trashEntries"
+        :key="entry.slug"
+        class="ep:flex ep:flex-wrap ep:items-center ep:justify-between ep:gap-3 ep:rounded-xl ep:bg-selected-ep/50 ep:p-4"
+      >
+        <div
+          class="ep:min-w-0 ep:flex-1"
+          :title="entry.title"
+        >
+          <span class="ep:block ep:min-w-0 ep:overflow-hidden ep:text-ellipsis ep:whitespace-nowrap ep:text-sm ep:font-semibold ep:text-white">{{ truncateTitle(entry.title) }}</span>
+          <span class="ep:mt-1 ep:block ep:text-xs ep:text-muted-ep">{{ entry.deletedAt ? `Deleted ${formatDate(entry.deletedAt)}` : "Deleted" }}</span>
+        </div>
+        <div class="ep:flex ep:shrink-0 ep:gap-2">
+          <EPButton
+            size="sm"
+            @click="restoreEntry(entry)"
+          >
+            Restore
+          </EPButton>
+          <EPButton
+            v-if="auth.isOwner.value"
+            size="sm"
+            variant="danger"
+            @click="purgeEntry(entry)"
+          >
+            Delete for good
+          </EPButton>
+        </div>
+      </article>
+    </div>
+
     <p
-      v-if="pending"
+      v-else-if="pending"
       class="ep:mt-8 ep:text-sm ep:text-muted-ep"
     >
       Loading…
@@ -144,18 +210,14 @@ function formatDate(value) {
         >
           <span class="ep:flex ep:min-w-0 ep:items-center ep:gap-2">
             <span class="ep:min-w-0 ep:flex-1 ep:overflow-hidden ep:text-ellipsis ep:whitespace-nowrap ep:text-sm ep:font-semibold ep:text-white">{{ truncateTitle(entry.title) }}</span>
-            <EPBadge
-              class="ep:shrink-0"
-              :variant="entry.status === 'draft' ? 'warning' : 'success'"
-            >{{ entry.status }}</EPBadge>
           </span>
-          <span class="ep:mt-1 ep:block ep:text-xs ep:text-muted-ep">/{{ entry.slug }}<template v-if="entry.updatedAt"> · {{ formatDate(entry.updatedAt) }}</template></span>
+          <span class="ep:mt-1 ep:block ep:text-xs ep:text-muted-ep ep:capitalize">{{ entry.status }}<template v-if="entry.updatedAt"> · {{ formatDate(entry.updatedAt) }}</template></span>
         </NuxtLink>
         <EPButton
           v-if="auth.canEdit.value"
           size="sm"
           variant="danger"
-          class="ep:opacity-0 ep:group-hover:opacity-100 ep:focus-visible:opacity-100"
+          class="ep:shrink-0 ep:md:opacity-0 ep:md:group-hover:opacity-100 ep:md:focus-visible:opacity-100"
           @click="deleteEntry(entry)"
         >
           Delete

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

@@ -64,10 +64,10 @@ watch(eponymeData, (value) => {
     data.value = next;
     savedData.value = cloneData(next);
   }
-}, { immediate: true });
+}, { immediate: true, flush: "sync" });
 watch(status, (value) => {
   entryStatuses.value = { ...entryStatuses.value, [props.name]: value };
-}, { immediate: true });
+}, { immediate: true, flush: "sync" });
 function cloneData(value) {
   return JSON.parse(JSON.stringify(value));
 }

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

@@ -7,6 +7,7 @@ import { useEponymeAuth } from "../../composables/useEponymeAuth";
 import EPBadge from "../ui/EPBadge.vue";
 import EPButton from "../ui/EPButton.vue";
 import EPDialog from "../ui/EPDialog.vue";
+import { EPONYME_DATE_LOCALE } from "../../utils/date-locale";
 const props = defineProps({
   name: { type: String, required: true },
   definition: { type: Object, required: true }
@@ -35,7 +36,10 @@ const columns = computed(() => [
     {
       id: fieldName,
       header: humanizeLabel(fieldName, field.options.label),
-      cell: (info) => truncate(info.getValue())
+      // Never empty: SSR emits nothing for an empty string while the client still
+      // builds a text node, which hydrates as a missing child. The dash also makes
+      // an unanswered optional field readable instead of looking like a broken cell.
+      cell: (info) => truncate(info.getValue()) || "\u2014"
     }
   )),
   columnHelper.accessor((row) => row.createdAt, {
@@ -79,7 +83,7 @@ function truncate(value, maxLength = 60) {
   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));
+  return new Intl.DateTimeFormat(EPONYME_DATE_LOCALE, { 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;
@@ -184,7 +188,7 @@ async function deleteSubmission(submission) {
               </th>
               <th
                 scope="col"
-                class="ep:border-b ep:border-border-ep ep:p-3"
+                class="ep:relative ep:border-b ep:border-border-ep ep:p-3"
               >
                 <span class="ep:sr-only">Actions</span>
               </th>

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

@@ -6,6 +6,8 @@ import EponymeNavigationLink from "./EponymeNavigationLink.vue";
 import EponymeSidebarTree from "./EponymeSidebarTree.vue";
 import { useEponymeConfig } from "../../composables/useEponymeConfig";
 import { getEponymeCollections, getEponymeForms, getEponymeSchemas } from "../../utils/get-eponyme-schemas";
+import { buildEponymeNavigationTree } from "../../utils/build-navigation-tree";
+import { filterEponymeNavigationTree } from "../../utils/filter-navigation-tree";
 import { useEponymeAuth } from "../../composables/useEponymeAuth";
 import EPAvatar from "../ui/EPAvatar.vue";
 import EPButton from "../ui/EPButton.vue";
@@ -55,6 +57,12 @@ onKeyStroke("k", (event) => {
   if (!event.metaKey && !event.ctrlKey) return;
   event.preventDefault();
   searchInput.value?.$el?.focus();
+  searchInput.value?.$el?.select();
+});
+onKeyStroke("Escape", () => {
+  if (!isFiltering.value) return;
+  searchQuery.value = "";
+  searchInput.value?.$el?.blur();
 });
 const navigation = computed(() => {
   const items = [];
@@ -86,38 +94,15 @@ const navigation = computed(() => {
   }
   return items;
 });
-const navigationTree = computed(() => {
-  const root = [];
-  function addPath(pathValue, finalKind, configuredLabel) {
-    const parts = pathValue.split("/");
-    let children = root;
-    for (let index = 0; index < parts.length; index++) {
-      const part = parts[index];
-      const path = parts.slice(0, index + 1).join("/");
-      const kind = index === parts.length - 1 ? finalKind : "folder";
-      let node = children.find((item) => item.path === path);
-      if (!node) {
-        node = { kind, path, label: index === parts.length - 1 && configuredLabel ? configuredLabel : label(part), children: [] };
-        children.push(node);
-      } else if (index === parts.length - 1) {
-        node.kind = finalKind;
-        if (configuredLabel) node.label = configuredLabel;
-      }
-      children = node.children;
-    }
-  }
-  for (const entry of Object.keys(getEponymeSchemas(config))) addPath(entry, "entry");
-  for (const [name, definition] of Object.entries(collections)) {
-    addPath(name, "collection", definition.label);
-    for (const entry of collectionEntries.value[name] ?? []) addPath(`${name}/${entry.slug}`, "entry", entry.title);
-  }
-  for (const [name, definition] of Object.entries(forms)) addPath(name, "form", definition.label);
-  return root;
-});
+const navigationTree = computed(() => buildEponymeNavigationTree({
+  schemas: getEponymeSchemas(config),
+  collections,
+  forms,
+  collectionEntries: collectionEntries.value
+}));
+const isFiltering = computed(() => searchQuery.value.trim().length > 0);
+const filteredTree = computed(() => filterEponymeNavigationTree(navigationTree.value, searchQuery.value));
 const openFolders = useState(`eponyme:open-folders:${normalizedBasePath.value}`, () => navigation.value.filter((item) => item.kind === "folder").map((item) => item.path));
-function label(name) {
-  return name.replace(/[-_]/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
-}
 function entryPath(name) {
   return `${normalizedBasePath.value}/${name}`;
 }
@@ -204,14 +189,21 @@ watch(() => route.path, () => {
         Editables
       </div>
       <EponymeSidebarTree
-        :nodes="navigationTree"
+        :nodes="filteredTree"
         :base-path="normalizedBasePath"
         :current-path="route.path"
         :statuses="statuses"
         :open-folders="openFolders"
+        :force-open="isFiltering"
         :can-edit="auth.canEdit.value"
         @update:open-folders="openFolders = $event"
       />
+      <p
+        v-if="isFiltering && !filteredTree.length"
+        class="ep:m-0 ep:px-3 ep:py-2 ep:text-xs ep:text-muted-ep"
+      >
+        No match for “{{ searchQuery }}”.
+      </p>
     </nav>
     <div
       v-if="!collapsed && auth.user.value"

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

@@ -6,6 +6,8 @@ type __VLS_Props = {
     currentPath: string;
     statuses: Record<string, EponymeStatus>;
     openFolders: string[];
+    /** Reveals every folder while a search is active, without touching `openFolders`. */
+    forceOpen?: boolean;
     canEdit?: boolean;
     depth?: number;
 };

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

@@ -8,6 +8,7 @@ const props = defineProps({
   currentPath: { type: String, required: true },
   statuses: { type: Object, required: true },
   openFolders: { type: Array, required: true },
+  forceOpen: { type: Boolean, required: false, default: false },
   canEdit: { type: Boolean, required: false, default: false },
   depth: { type: Number, required: false, default: 0 }
 });
@@ -16,7 +17,7 @@ function entryPath(path) {
   return `${props.basePath}/${path}`;
 }
 function isOpen(path) {
-  return props.openFolders.includes(path);
+  return props.forceOpen || props.openFolders.includes(path);
 }
 function setOpen(path, open) {
   const next = new Set(props.openFolders);
@@ -66,6 +67,7 @@ function setOpen(path, open) {
           :current-path="currentPath"
           :statuses="statuses"
           :open-folders="openFolders"
+          :force-open="forceOpen"
           :can-edit="canEdit"
           :depth="depth + 1"
           @update:open-folders="emit('update:openFolders', $event)"

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

@@ -6,6 +6,8 @@ type __VLS_Props = {
     currentPath: string;
     statuses: Record<string, EponymeStatus>;
     openFolders: string[];
+    /** Reveals every folder while a search is active, without touching `openFolders`. */
+    forceOpen?: boolean;
     canEdit?: boolean;
     depth?: number;
 };