@michaelthielemann/kestrel 1.6.0 → 2.0.0

package/README.md

@@ -167,6 +167,7 @@ pnpm generate       # render the static public site to .output/public
 pnpm test           # node + happy-dom unit tests
 pnpm test:nuxt      # Nuxt-environment component tests
 pnpm test:e2e       # end-to-end tests (real dev server)
+pnpm lint           # ESLint (Nuxt-aware, generated from the playground)
 
 pnpm db:generate    # drizzle-kit: generate a migration
 pnpm db:migrate     # drizzle-kit: apply migrations
@@ -186,14 +187,17 @@ Two ways to produce the static output:
 
 - **One-shot:** `pnpm generate` → `.output/public` (the classic full rebuild).
 - **Runtime publisher (default):** a **production** run (`pnpm build && pnpm preview`, or
-  `node .output/server/index.mjs`) publishes on boot and incrementally re-publishes the affected pages on
-  every content write, into `output.dir` (default `.data/published`). Serve that dir with any static
-  server, e.g. `npx serve .data/published`.
+  `node .output/server/index.mjs`) publishes on boot and incrementally re-publishes the affected pages when
+  you press **Publish** in the editor, into `output.dir` (default `.data/published`). Saving is a DB write
+  and leaves the live page alone (unpublishing and deleting still take a page down at once) — see
+  [ADR-0008](docs/architecture-decisions.md), or set `output.publishOnSave: true` for the pre-2.0 behaviour
+  where every save republished. Serve that dir with any static server, e.g. `npx serve .data/published`.
 
 The runtime publisher is **intentionally disabled in `pnpm dev`** (a dev render would write un-hashed Vite
 HTML), so the static files only appear on a production run. In dev you instead get the **live preview**:
 public pages render straight from the running server, and an authenticated admin can open an unpublished
-page at its real URL (the "open in new tab" button in the editor). See
+page at its real URL (the "open in new tab" button in the editor) — with unsaved changes that button
+carries them along in a preview ticket rather than saving them. See
 [static-output.md](docs/static-output.md) for the full picture.
 
 ### Simulate a production deploy locally

package/layers/access/server/utils/grant-registry.ts

@@ -32,5 +32,5 @@ export function registeredGrants(): Readonly<Partial<Record<Role, Grant[]>>> {
 
 /** Test helper: drop all registered grants (the registry is a module singleton). */
 export function clearAccessGrants(): void {
-  for (const role of Object.keys(registered) as Role[]) delete registered[role]
+  for (const role of Object.keys(registered) as Role[]) Reflect.deleteProperty(registered, role)
 }

package/layers/access/server/utils/ip-allowlist.ts

@@ -42,7 +42,10 @@ function parseCidr(token: string): Cidr | null {
   const slash = token.indexOf('/')
   const base = ipv4ToInt(slash === -1 ? token : token.slice(0, slash))
   if (base === null) return null
-  const bits = slash === -1 ? 32 : Number(token.slice(slash + 1))
+  // `Number()` alone would widen a malformed prefix into a mask: '' → 0 → 0.0.0.0/0, and '0x10'/'1e1' → 16/10.
+  const bitsRaw = slash === -1 ? '32' : token.slice(slash + 1).trim()
+  if (!/^\d+$/.test(bitsRaw)) return null
+  const bits = Number(bitsRaw)
   if (!Number.isInteger(bits) || bits < 0 || bits > 32) return null
   const mask = bits === 0 ? 0 : (0xffffffff << (32 - bits)) >>> 0
   return { base: (base & mask) >>> 0, mask }

package/layers/admin/app/components/BlocksBody.vue

@@ -56,7 +56,8 @@ function onKeydown(e: KeyboardEvent) {
   const el = e.target as HTMLElement | null
   if (el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName))) return
   e.preventDefault()
-  isRedo ? ctx.redo() : ctx.undo()
+  if (isRedo) ctx.redo()
+  else ctx.undo()
 }
 onMounted(() => window.addEventListener('keydown', onKeydown))
 onUnmounted(() => window.removeEventListener('keydown', onKeydown))

package/layers/admin/app/components/CollectionEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { localePath } from '../../../core/app/utils/locale-path'
+import { PREVIEW_TOKEN_QUERY, PREVIEW_FALLBACK_PATH } from '../../../public/app/utils/preview-protocol'
 import { resolveCollectionEditor } from '../utils/editor-registry'
 import { editorFormContextKey } from '../utils/editor-form-context'
 import '../utils/register-builtin-editors'
@@ -17,6 +18,13 @@ const saved = ref(false)
 const { t } = useT()
 const toast = useToast()
 const f = useEditForm({ collection: props.collection, id: props.id, locale: props.localeParam, group: props.group })
+// `useEditForm` returns its refs/computeds synchronously (only its internal `init()` is async), so this
+// destructure is safe to read before `f.ready` resolves — pulled up here (rather than after the await
+// below, where it originally lived) so `defineExpose` can also run before that same await.
+const {
+  formError, saving, submit, dirty, editorType, pageLike, hasStatus,
+  savedStatus, undo, redo, canUndo, canRedo,
+} = f
 
 // Editor → field-widget context. MUST run BEFORE the top-level `await` below — after an await the setup
 // instance context is gone and `provide` silently no-ops. `id`/`saved` let a widget clean up an abandoned
@@ -71,17 +79,6 @@ provide(editorFormContextKey, {
   registerRevealError: (fn: () => void) => { revealError = fn },
 })
 
-await f.ready
-
-const {
-  formError, saving, submit, dirty, editorType, pageLike, hasStatus,
-  savedStatus, undo, redo, canUndo, canRedo,
-} = f
-
-// Which editor body renders (fields · blocks · an extension type). Resolved from the registry; an
-// unregistered type falls back to the visible EditorUnsupported panel.
-const bodyComponent = computed(() => resolveCollectionEditor(editorType.value))
-
 // Right dot of the editor Ampel: the live / generated state of THIS record's static page. Only a saved
 // pageLike record has one (a non-pageLike collection produces no static page; an unsaved `new` has no row).
 // Refreshed on mount and after each save (a save may (re)publish the page).
@@ -94,28 +91,133 @@ const liveStatus = usePublishStatus({
 // Carries "poll the live status on mount" across the create→navigate remount (see usePendingPublishPoll).
 const pendingPoll = usePendingPublishPoll()
 
+// ---- publish + external preview -------------------------------------------------------------------
+// Saving persists to the DB and leaves the live site alone; publishing writes the static file(s). The two
+// are separate buttons because they are separate decisions (ADR-0008) — you can save a page a dozen times
+// while the published version stays exactly as it was.
+const publishing = ref(false)
+const previewOpening = ref(false)
+// `output.publishOnSave` turns the split off again (a save republishes, as before 2.0) — then a Publish
+// button would have nothing to do, so the hosts hide it. Reported by /api/publish-status; unknown (a
+// never-saved record, which does not fetch it) reads as the default, i.e. the button stays.
+const publishOnSave = computed(() => liveStatus.data.value.publishOnSave === true)
+const canPublish = computed(() => !publishOnSave.value)
+
+/** Save (a publish publishes what you SEE), promote a draft, then write the output. */
+async function publish() {
+  if (publishing.value || saving.value) return
+  publishing.value = true
+  try {
+    // Pressing Publish IS the publish intent, so a draft is promoted here rather than sending the user to
+    // the status select first. A statusless collection has nothing to promote.
+    if (hasStatus.value && f.values.status !== 'published') f.setField('status', 'published')
+    const r = await submit()
+    if (!r.ok) {
+      revealError?.()
+      toast.error(formError.value || t('editor.saveFailed'))
+      return
+    }
+    saved.value = true
+    // The saved row's id, whatever the route param says — `single`/`new` are not ids.
+    const id = (r.record as { id?: number } | null)?.id ?? Number(props.id)
+    if (!Number.isInteger(id)) return
+    const since = liveStatus.data.value.updatedAt ?? null
+    // Awaited BEFORE `saved` is emitted: on a new record that emit navigates to the record's own URL and
+    // tears this instance down, which would cut the request short.
+    const res = await $fetch<{ generates: boolean; drafts: number[] }>('/api/publish', {
+      method: 'POST', body: { collection: props.collection, id },
+    }).catch(() => null)
+    // A create navigates to the new record's URL (a full remount), so this instance is gone before its
+    // poll could run — hand the intent to the arriving one instead.
+    if (props.id === 'new') pendingPoll.value = pageLike.value && !!res?.generates
+    emit('saved', r.record)
+    if (!res) { toast.error(t('editor.publishFailed')); return }
+    if (res.drafts.length) { toast.info(t('editor.publishDraft')); return }
+    if (!res.generates) { toast.info(t('editor.publishNotGenerated')); return }
+    toast.success(t('toast.published'))
+    void liveStatus.refreshUntilSettled({ since })
+  } finally {
+    publishing.value = false
+  }
+}
+
+/**
+ * Open the record in a new tab. Unsaved edits travel as a preview TICKET (a token in the URL) instead of
+ * being written to the DB: previewing must never be an unasked-for save. A saved, unmodified record just
+ * opens its URL.
+ *
+ * The tab is opened SYNCHRONOUSLY (about:blank) and redirected once the ticket is minted — a popup opened
+ * after an await is a popup blocker's textbook case. That costs `noopener`, which the direct path keeps;
+ * the target is our own origin either way.
+ */
+async function openPreview() {
+  const url = previewUrl.value
+  if (!dirty.value && props.id !== 'new' && url) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+    return
+  }
+  const tab = window.open('', '_blank')
+  previewOpening.value = true
+  try {
+    const ticket = await $fetch<{ token: string }>('/api/preview', {
+      method: 'POST',
+      body: {
+        collection: props.collection,
+        id: Number.isInteger(Number(props.id)) ? Number(props.id) : null, // 'new' / 'single' have no id
+        locale: f.locale.value,
+        values: f.buildBody(),
+      },
+    }).catch(() => null)
+    if (!ticket) {
+      tab?.close()
+      toast.error(t('editor.previewFailed'))
+      return
+    }
+    // No public URL (never saved, blank slug, non-pageLike) → the dedicated preview page renders the
+    // ticket in the real public app instead.
+    const base = url ?? `${PREVIEW_FALLBACK_PATH}?locale=${encodeURIComponent(f.locale.value)}`
+    const target = `${base}${base.includes('?') ? '&' : '?'}${PREVIEW_TOKEN_QUERY}=${encodeURIComponent(ticket.token)}`
+    if (tab) tab.location.replace(target)
+    else window.open(target, '_blank', 'noopener,noreferrer') // popup blocked → try once more, directly
+  } finally {
+    previewOpening.value = false
+  }
+}
+
 // The record-editor page renders the action toolbar (Save/Cancel/Delete + Undo/Redo) in its header: it
 // submits this form by id (formId), reads the in-flight `saving` for the button state, drives the
 // unsaved-changes guard off `dirty`, and the undo/redo controls off the history API exposed here.
 // The exposed shape IS the `EditorExpose` contract (utils/editor-expose.ts) — keep them in sync.
-defineExpose({ dirty, saving, undo, redo, canUndo, canRedo, hasStatus, status, savedStatus, previewUrl, pageLike, live: liveStatus.data, recordTitle: heading })
+// MUST run BEFORE the `await f.ready` below — Vue does not guarantee an async setup component's expose is
+// wired if `defineExpose` runs after a top-level await (the parent's template ref may resolve first).
+defineExpose({
+  dirty, saving, undo, redo, canUndo, canRedo, hasStatus, status, savedStatus, previewUrl, pageLike,
+  live: liveStatus.data, recordTitle: heading, publish, publishing, canPublish, openPreview, previewOpening,
+})
+
+await f.ready
+
+// Which editor body renders (fields · blocks · an extension type). Resolved from the registry; an
+// unregistered type falls back to the visible EditorUnsupported panel.
+const bodyComponent = computed(() => resolveCollectionEditor(editorType.value))
 
 async function onSave() {
+  // Read BEFORE the save: a successful submit rebaselines, after which the saved status is the new one.
+  const wasPublished = savedStatus.value === 'published'
   const r = await submit()
   if (r.ok) {
     saved.value = true
-    // The save may have (re)published the page. A PUBLISHED page republishes asynchronously (a debounced
-    // queue) in prod, so poll the right lamp until it settles (Live / Error) rather than catching only the
-    // in-flight state; `since` is the pre-save row timestamp so a stale prior success/error can't settle the
-    // poll early. A DRAFT produces no file → a single refresh (to reflect the draft / cleared row).
-    const wasNew = props.id === 'new'
-    const isDraft = hasStatus.value && status.value === 'draft'
+    // A save publishes nothing (ADR-0008), so there is no in-flight republish to poll for — one refresh,
+    // which is what turns the right lamp to "Outdated": still live, now an older version than the record.
+    // An unpublish is the exception the write path still acts on, and its prune is enqueued the same
+    // debounced way, so that case polls until the row clears.
+    // …with one exception in each direction: an unpublish IS acted on at save time (its prune rides the same
+    // debounced queue), and with `publishOnSave` every save republishes, so both poll until the row settles.
+    const unpublished = hasStatus.value && wasPublished && status.value === 'draft'
+    const settles = unpublished || (publishOnSave.value && status.value !== 'draft')
     const since = liveStatus.data.value.updatedAt ?? null
-    // A create navigates the editor to the new record's URL (a full remount), so this `new` instance is
-    // torn down before its poll could run — hand the intent to the arriving instance instead.
-    if (wasNew) pendingPoll.value = pageLike.value && !isDraft
     emit('saved', r.record)
-    if (!wasNew) void (isDraft ? liveStatus.refresh() : liveStatus.refreshUntilSettled({ since }))
+    if (props.id !== 'new') void (settles ? liveStatus.refreshUntilSettled({ since }) : liveStatus.refresh())
     return
   }
   // Save failed — let the active body reveal the problem (the blocks body focuses the offending block /

package/layers/admin/app/components/CollectionList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { SerializedCollection } from '../../../core/server/utils/serialize-collection'
 import { sortDirection, type FilterCell } from '../utils/list-query'
-import { type ListColumn } from '../utils/list-columns'
+import type { ListColumn } from '../utils/list-columns'
 import { PER_PAGE_OPTIONS } from '../../../core/app/utils/list-limits'
 import type { BatchDeleteReport } from '../utils/collection-ops'
 import { OPS_BY_KIND, DEFAULT_OP, type FilterKind, type FilterOp } from '../../../core/app/utils/filter-ops'
@@ -19,7 +19,6 @@ const collection = computed(() => props.schema.name)
 const label = computed(() => resolveLocalized(props.schema.label?.singular, lang.value) ?? props.schema.name)
 // Prefer the collection's complete per-locale "create" phrase; fall back to the generic template.
 const newLabel = computed(() => resolveLocalized(props.schema.label?.new, lang.value) ?? t('common.new', { label: label.value }))
-const translatable = computed(() => !!props.schema.translatable && props.schema.mode === 'multi')
 const localeQuery = computed(() => (props.locale ? `?locale=${props.locale}` : ''))
 
 // Configurable columns (persisted per-collection). The select + row-action columns are CHROME — fixed
@@ -56,7 +55,7 @@ watch([filterableColumns, () => JSON.stringify(filter.value)], () => {
     const cm = filter.value[c.key]
     draft[c.key] = { op: cm?.op ?? DEFAULT_OP[c.filterKind ?? 'text'], value: cm?.value ?? '' }
   }
-  for (const key of Object.keys(draft)) if (!cols.some((c) => c.key === key)) delete draft[key]
+  for (const key of Object.keys(draft)) if (!cols.some((c) => c.key === key)) Reflect.deleteProperty(draft, key)
 }, { immediate: true })
 
 function opsFor(c: ListColumn): readonly FilterOp[] {
@@ -205,6 +204,9 @@ async function fetchRows() {
 }
 
 const totalPages = computed(() => Math.max(1, Math.ceil(total.value / perPage.value)))
+// The per-page `<select>` is hand-rolled directly in this template (no UiField/UiCheckbox wrapper), so the
+// label↔control association needs an explicit pair for static a11y analysis to see it.
+const perPageId = useId()
 
 // Filters: edited in the Filter panel (a value change debounces; an operator change commits at once), shown
 // as removable chips in the bar. `commitDrafts` builds a fresh clause map from the non-empty draft cells and
@@ -460,6 +462,7 @@ await fetchRows()
             @click="togglePanel('columns', $event)"
           >{{ t('list.columns') }}</UiButton>
           <div v-if="openPanel === 'columns'" id="list-columns-panel" class="list__panel">
+            <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -- native wrapping label around a custom UiCheckbox; no `for`/`id` pair needed, invisible to static analysis -->
             <label v-for="c in available" :key="c.key" class="list__col-row">
               <UiCheckbox
                 class="list__col-check"
@@ -620,9 +623,10 @@ await fetchRows()
       <UiButton type="button" size="sm" :disabled="page <= 1" @click="prev">{{ t('list.prev') }}</UiButton>
       <span class="list__page">{{ t('list.page', { page, totalPages, total }) }}</span>
       <UiButton type="button" size="sm" :disabled="page >= totalPages" @click="next">{{ t('list.next') }}</UiButton>
-      <label class="list__perpage">
+      <label class="list__perpage" :for="perPageId">
         <span class="list__perpage-label">{{ t('list.perPage') }}</span>
         <select
+          :id="perPageId"
           class="list__perpage-select"
           :value="perPage"
           :aria-label="t('list.perPage')"

package/layers/admin/app/components/EditorStatus.vue

@@ -63,6 +63,11 @@ const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; wo
   if (s === 'error')
     return { tone: 'red', word: t('editorStatus.word.error'), detail: t('editorStatus.live.error'), when: updatedAtLabel.value, error: props.live?.error ?? '' }
   if (s === 'success') {
+    // Saved after the last publish: the file IS live, but it is an older version of this record. Saving no
+    // longer republishes (ADR-0008), so this is the normal state of a page being worked on — amber, not red.
+    if (props.live?.pending) {
+      return { tone: 'amber', word: t('editorStatus.word.outdated'), detail: t('editorStatus.live.outdated'), when: updatedAtLabel.value }
+    }
     // Where the file actually landed — surface local vs S3 in the tooltip ("stored on S3").
     const onS3 = (props.live?.target ?? props.live?.driver) === 's3'
     return { tone: 'green', word: t('editorStatus.word.live'), detail: t(onS3 ? 'editorStatus.live.liveS3' : 'editorStatus.live.liveLocal'), when: updatedAtLabel.value }
@@ -71,6 +76,12 @@ const live = computed<{ tone: 'green' | 'red' | 'amber' | 'blue' | 'neutral'; wo
   // static output off) → a calm neutral "Not built". Unknown (undefined) → assume a publish is in flight.
   if (props.live?.generates === false)
     return { tone: 'neutral', word: t('editorStatus.word.notBuilt'), detail: t('editorStatus.live.notBuilt') }
+  // Never published, and a save no longer enqueues anything (ADR-0008) — so nothing is in flight and
+  // nothing will be until someone presses Publish. Reporting progress here would point the user at a
+  // spinner instead of at the one action that changes it. With `publishOnSave` a save DOES republish, so
+  // there the in-flight reading is the right one.
+  if (props.live?.neverPublished && !props.live?.publishOnSave)
+    return { tone: 'blue', word: t('editorStatus.word.notPublished'), detail: t('editorStatus.live.notPublished') }
   return { tone: 'amber', word: t('editorStatus.word.generating'), detail: t('editorStatus.live.pending') }
 })
 </script>

package/layers/admin/app/components/SeoFields.vue

@@ -90,6 +90,7 @@ const socialImageField = { type: 'media', options: { accept: 'image' } } as Fiel
       </template>
     </UiField>
 
+    <!-- eslint-disable-next-line vuejs-accessibility/label-has-for -- native wrapping label around a custom UiCheckbox; no `for`/`id` pair needed, invisible to static analysis -->
     <label class="seo-fields__noindex">
       <UiCheckbox
         :model-value="!!value.noindex"

package/layers/admin/app/components/SingletonEditor.vue

@@ -4,7 +4,7 @@
 // CollectionEditor's form by id; `saving`/`dirty` come from the editor's exposed state.
 import type { EditorExpose } from '../utils/editor-expose'
 
-const props = defineProps<{ collection: string; title: string; localeParam?: string }>()
+defineProps<{ collection: string; title: string; localeParam?: string }>()
 
 const { t } = useT()
 const toast = useToast()
@@ -17,10 +17,8 @@ function onSaved() {
   toast.success(t('toast.saved'))
 }
 
-function openPreview() {
-  const url = editorRef.value?.previewUrl
-  if (url) window.open(url, '_blank', 'noopener,noreferrer')
-}
+// Unsaved edits preview through a ticket instead of a save; the editor owns both paths (ADR-0008).
+const previewTitle = computed(() => t(editorRef.value?.dirty ? 'editor.previewUnsaved' : 'editor.openInNewTab'))
 
 // Guard in-app navigation away from unsaved changes — both record-change AND same-record `?locale`
 // switches (the LocaleBar's singleton locale switch reuses this route record → onBeforeRouteUpdate).
@@ -35,8 +33,10 @@ useUnsavedGuard(() => editorRef.value?.dirty ?? false, () => t('editor.discardCo
       <div class="singleton__actions">
         <UiButton type="button" variant="ghost" size="sm" icon="undo" :disabled="saving || !editorRef?.canUndo" :title="t('history.undo')" :aria-label="t('history.undo')" @click="editorRef?.undo()" />
         <UiButton type="button" variant="ghost" size="sm" icon="redo" :disabled="saving || !editorRef?.canRedo" :title="t('history.redo')" :aria-label="t('history.redo')" @click="editorRef?.redo()" />
-        <UiButton v-if="editorRef?.previewUrl" type="button" variant="ghost" size="sm" icon="external-link" :title="t('editor.openInNewTab')" :aria-label="t('editor.openInNewTab')" @click="openPreview" />
+        <UiButton type="button" variant="ghost" size="sm" icon="external-link" :title="previewTitle" :aria-label="previewTitle" :loading="editorRef?.previewOpening" @click="editorRef?.openPreview()" />
         <UiButton type="submit" :form="EDITOR_FORM_ID" variant="primary" size="sm" icon="check" :loading="saving">{{ t('common.save') }}</UiButton>
+        <!-- Publishing is its own decision: Save persists, Publish writes the static page (ADR-0008). -->
+        <UiButton v-if="editorRef?.canPublish !== false" type="button" variant="secondary" size="sm" icon="upload" :loading="editorRef?.publishing" :disabled="saving" @click="editorRef?.publish()">{{ t('common.publish') }}</UiButton>
         <EditorStatus class="singleton__ampel" :dirty="editorRef?.dirty ?? false" :saving="saving" :has-status="editorRef?.hasStatus ?? false" :status="editorRef?.status" :saved-status="editorRef?.savedStatus" :page-like="editorRef?.pageLike ?? false" :live="editorRef?.live" />
       </div>
     </div>

package/layers/admin/app/composables/useCollectionOps.ts

@@ -45,9 +45,21 @@ export function useCollectionOps(collection: MaybeRefOrGetter<string>, onChanged
 
   const confirmDelete = (ids: number[]) => bulk('delete', ids)
   const duplicate = (ids: number[]) => bulk('duplicate', ids)
-  /** Persist a new status; the server's write pipeline (emitWrite) turns that into a publish/unpublish. */
-  const setStatus = (ids: number[], status: 'published' | 'draft') =>
-    bulk(status === 'published' ? 'publish' : 'unpublish', ids)
+  /**
+   * Persist a new status and, for a publish, write the static output too (ADR-0008). Two calls because
+   * they are two things: the bulk endpoint owns the DB write (validation, all-or-nothing, write events),
+   * `/api/publish` owns the render. Unpublishing needs no second call — the write event prunes the pages
+   * on its own, since taking a page offline must never wait for a separate action.
+   */
+  const setStatus = async (ids: number[], status: 'published' | 'draft'): Promise<BulkResult> => {
+    const res = await bulk(status === 'published' ? 'publish' : 'unpublish', ids)
+    if (status === 'published') {
+      // Best-effort: the records ARE published (the state the list shows); a failed render surfaces on the
+      // record's own status lamp, and re-pressing Publish retries it.
+      await $fetch('/api/publish', { method: 'POST', body: { collection: name(), ids } }).catch(() => null)
+    }
+    return res
+  }
 
   return { busy, error, previewDelete, confirmDelete, duplicate, setStatus }
 }

package/layers/admin/app/composables/useEditForm.ts

@@ -95,8 +95,8 @@ export function useEditForm(opts: UseEditFormOptions) {
   function restore(snap: Record<string, unknown>) {
     const fresh = snapshot(snap)
     for (const k of Object.keys(fresh)) values[k] = fresh[k]
-    for (const k of Object.keys(values)) if (!(k in fresh)) delete values[k]
-    for (const k of Object.keys(errors)) delete errors[k]
+    for (const k of Object.keys(values)) if (!(k in fresh)) Reflect.deleteProperty(values, k)
+    for (const k of Object.keys(errors)) Reflect.deleteProperty(errors, k)
     blockErrors.value = {}
     formError.value = ''
     coalesceKey = ''
@@ -304,7 +304,7 @@ export function useEditForm(opts: UseEditFormOptions) {
     // Clear the whole map, not just declared-field errors: `path`/`seo`/`status` are system columns
     // (never in `fields.value`), so a stale server error on one of them would otherwise survive a
     // later successful save. `validateAll` below repopulates every declared-field error fresh.
-    for (const k of Object.keys(errors)) delete errors[k]
+    for (const k of Object.keys(errors)) Reflect.deleteProperty(errors, k)
     // Client-side validation failed: surface the same banner the server path raises, so the failure is
     // never silent — the offending field's inline error can sit in an unmounted pane (blocks editor).
     if (!validateAll()) {
@@ -366,6 +366,9 @@ export function useEditForm(opts: UseEditFormOptions) {
     ready,
     setField,
     validateAll,
+    // The wire body a save would send — also what a preview ticket carries, so an external tab renders
+    // exactly what a save would have stored (ADR-0008).
+    buildBody,
     submit,
     undo,
     redo,

package/layers/admin/app/composables/useListColumns.ts

@@ -39,7 +39,7 @@ export function useListColumns(schema: Ref<SerializedCollection>) {
 
   function reset() {
     const next = { ...store.value }
-    delete next[schema.value.name]
+    Reflect.deleteProperty(next, schema.value.name)
     store.value = next
   }
 

package/layers/admin/app/composables/usePublishStatus.ts

@@ -9,6 +9,15 @@ export interface PublishStatusData {
   updatedAt?: string | null
   /** Which output the last attempt wrote to — `'local'` dir or `'s3'` bucket; null when no row yet. */
   target?: 'local' | 's3' | null
+  /** The record was saved after its page was last published — the live file is an older version of it.
+   *  The normal working state while editing, since a save no longer republishes (ADR-0008). */
+  pending?: boolean
+  /** The consumer opted out of the save/publish split (`output.publishOnSave`): a save republishes on its
+   *  own, so the editor offers no Publish button and never reports unpublished changes. */
+  publishOnSave?: boolean
+  /** The page has no publish row at all. Distinct from "a publish is in flight": with the split on, a save
+   *  enqueues nothing, so this state only ends when someone presses Publish. */
+  neverPublished?: boolean
   /** Whether the runtime publisher actually produces files in THIS environment (prod + `output.auto`).
    *  `false` in dev / with static output off → a page can never turn "Live" here, so don't poll for it. */
   generates?: boolean

package/layers/admin/app/pages/admin/[collection]/[id].vue

@@ -43,12 +43,10 @@ const heading = computed(() =>
       : t('editor.editRecord', { collection: singular.value, id }),
 )
 
-// Open the record's real public URL in a new tab — the live preview (drafts included, served to the
-// authenticated admin by the public render path). Withheld until there's a saved, routable page.
-function openPreview() {
-  const url = editorRef.value?.previewUrl
-  if (url) window.open(url, '_blank', 'noopener,noreferrer')
-}
+// The external-tab button always works now: with unsaved edits it opens a preview TICKET (no save, no
+// publish), otherwise the record's own URL — so the tooltip has to say which of the two you'd get.
+const previewTitle = computed(() => t(editorRef.value?.dirty ? 'editor.previewUnsaved' : 'editor.openInNewTab'))
+
 const skipGuard = ref(false)
 
 // Delete flows through the shared batch op + the same confirm dialog the list uses, so the delete logic
@@ -120,10 +118,12 @@ async function confirmDelete() {
       <div class="record__actions">
         <UiButton type="button" variant="ghost" size="sm" icon="undo" :disabled="saving || !editorRef?.canUndo" :title="t('history.undo')" :aria-label="t('history.undo')" @click="editorRef?.undo()" />
         <UiButton type="button" variant="ghost" size="sm" icon="redo" :disabled="saving || !editorRef?.canRedo" :title="t('history.redo')" :aria-label="t('history.redo')" @click="editorRef?.redo()" />
-        <UiButton v-if="editorRef?.previewUrl" type="button" variant="ghost" size="sm" icon="external-link" :title="t('editor.openInNewTab')" :aria-label="t('editor.openInNewTab')" @click="openPreview" />
+        <UiButton type="button" variant="ghost" size="sm" icon="external-link" :title="previewTitle" :aria-label="previewTitle" :loading="editorRef?.previewOpening" @click="editorRef?.openPreview()" />
         <UiButton type="button" variant="secondary" size="sm" icon="x" :disabled="saving" @click="toList">{{ t('common.cancel') }}</UiButton>
         <UiButton v-if="id !== 'new'" variant="danger" size="sm" icon="trash" :loading="deleting" @click="onDelete">{{ t('common.delete') }}</UiButton>
         <UiButton type="submit" :form="EDITOR_FORM_ID" variant="primary" size="sm" icon="check" :loading="saving">{{ t('common.save') }}</UiButton>
+        <!-- Publishing is its own decision: Save persists, Publish writes the static page (ADR-0008). -->
+        <UiButton v-if="editorRef?.canPublish !== false" type="button" variant="secondary" size="sm" icon="upload" :loading="editorRef?.publishing" :disabled="saving" @click="editorRef?.publish()">{{ t('common.publish') }}</UiButton>
         <EditorStatus class="record__ampel" :dirty="editorRef?.dirty ?? false" :saving="saving" :has-status="editorRef?.hasStatus ?? false" :status="editorRef?.status" :saved-status="editorRef?.savedStatus" :page-like="editorRef?.pageLike ?? false" :live="editorRef?.live" />
       </div>
     </div>