@karibsen/eponyme 0.1.1 → 0.3.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,108 @@ 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.
+### Captcha
+
+Set `captcha: true` on the form, then install an adapter — Eponyme defines the contract
+but ships no provider:
+
+```bash
+pnpm add @karibsen/eponyme-captcha
+```
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@karibsen/eponyme', '@karibsen/eponyme-captcha'],
+  eponymeCaptcha: { siteKey: '<your-turnstile-site-key>' },
+})
+```
+
+Render the widget and bind its token; `useEponymeForm` sends it alongside the fields and
+the server verifies it before validating anything:
+
+```vue
+<script setup lang="ts">
+const { captchaToken, requiresCaptcha, submit } = useEponymeForm('contact')
+</script>
+
+<template>
+  <NuxtTurnstile v-if="requiresCaptcha" v-model="captchaToken" />
+</template>
+```
+
+**It fails closed.** Without an adapter, a form declaring `captcha: true` answers `500`
+rather than accepting submissions unprotected. A rejected token answers `422` with a
+`_form` error; the provider's reason stays in the server log, since telling a bot which
+check it failed only helps it.
+
+Writing an adapter for another provider means supplying a `name` and an
+`async verify(token, { ip })` returning `{ success, reason? }`, then pointing the
+`#eponyme/captcha` alias at it.
+
+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.3.0`. 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/eponyme.mjs

@@ -31,7 +31,8 @@ function form(options) {
     // Storing a submission has to be an explicit decision, so `custom` is the default.
     submission: { mode: options.submission?.mode ?? "custom" },
     honeypot,
-    maxBodyBytes: options.maxBodyBytes ?? DEFAULT_MAX_BODY_BYTES
+    maxBodyBytes: options.maxBodyBytes ?? DEFAULT_MAX_BODY_BYTES,
+    captcha: options.captcha ?? false
   };
 }
 

package/dist/module.d.mts

@@ -20,6 +20,12 @@ interface ModuleOptions {
         /** Fixed lifetime of an authenticated session. */
         sessionDurationDays?: number;
     };
+    /**
+     * How long a server instance may reuse content it has already read, in seconds.
+     * A save clears what it changed on its own instance, so this only bounds how long
+     * another instance can still serve the previous content. `0` disables the cache.
+     */
+    cacheSeconds?: number;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@karibsen/eponyme",
   "configKey": "eponyme",
-  "version": "0.1.1",
+  "version": "0.3.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';
@@ -15,6 +15,47 @@ const module$1 = defineNuxtModule({
     colorPresets: [],
     auth: {
       sessionDurationDays: 7
+    },
+    cacheSeconds: 5
+  },
+  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) {
@@ -30,41 +71,9 @@ 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);
+    nuxt.options.runtimeConfig.eponymeContent = {
+      cacheSeconds: options.cacheSeconds ?? 5
+    };
     const preparing = Boolean(nuxt.options._prepare);
     if (!options.prismaClient) {
       if (!preparing) throw new Error(`${pc.red("[Eponyme]")} eponyme.prismaClient is required.`);
@@ -125,6 +134,7 @@ Note that '~/' points at ${nuxt.options.srcDir}, so a server module needs '~~/'.
     nuxt.options.alias["#eponyme/prisma"] = prismaPath;
     const variablesPath = await findPath(resolve(nuxt.options.rootDir, "eponyme.variables.ts"));
     nuxt.options.alias["#eponyme/variables"] = variablesPath ?? resolver.resolve("./runtime/utils/empty-variables");
+    nuxt.options.alias["#eponyme/captcha"] ??= resolver.resolve("./runtime/utils/no-captcha");
     addTypeTemplate({
       filename: "types/eponyme-config.d.ts",
       getContents: () => `declare module '#eponyme/config' {
@@ -135,17 +145,26 @@ declare module '#eponyme/variables' {
   const variables: typeof import(${JSON.stringify(nuxt.options.alias["#eponyme/variables"])})['default']
   export default variables
 }
+declare module '#eponyme/captcha' {
+  const verifier: import('${resolver.resolve("./runtime/types/captcha")}').EponymeCaptchaVerifier
+  export default verifier
+}
 `
     });
     addServerHandler({ route: "/api/eponyme/**", handler: resolver.resolve("./runtime/server/api/eponyme/[name].get") });
     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>