@stacksjs/defaults 0.70.362 → 0.70.365

package/resources/components/Dashboard/Content/AuthorsDashboard.stx

@@ -12,6 +12,13 @@ interface AuthorRecord {
   createdAt: string
 }
 
+interface AuthorDraft {
+  name: string
+  email: string
+  bio: string
+  avatar: string
+}
+
 const authors = state<AuthorRecord[]>([])
 const assignedPostCount = state(0)
 const loading = state(true)
@@ -19,10 +26,6 @@ const loadError = state('')
 const search = state('')
 const formOpen = state(false)
 const editingAuthor = state<AuthorRecord | null>(null)
-const name = state('')
-const email = state('')
-const bio = state('')
-const avatar = state('')
 const saving = state(false)
 const saveError = state('')
 const deletingAuthor = state<AuthorRecord | null>(null)
@@ -80,22 +83,15 @@ async function loadAuthors(): Promise<void> {
   }
 }
 
-function resetForm(author: AuthorRecord | null): void {
-  editingAuthor.set(author)
-  name.set(author?.name || '')
-  email.set(author?.email || '')
-  bio.set(author?.bio || '')
-  avatar.set(author?.avatar || '')
-  saveError.set('')
-}
-
 function openCreate(): void {
-  resetForm(null)
+  editingAuthor.set(null)
+  saveError.set('')
   formOpen.set(true)
 }
 
 function openEdit(author: AuthorRecord): void {
-  resetForm(author)
+  editingAuthor.set(author)
+  saveError.set('')
   formOpen.set(true)
 }
 
@@ -104,14 +100,14 @@ function closeForm(): void {
     formOpen.set(false)
 }
 
-async function saveAuthor(): Promise<void> {
+async function saveAuthor(draft: AuthorDraft): Promise<void> {
   const author = editingAuthor()
   saving.set(true)
   saveError.set('')
   try {
     await dashboardApi(author ? `/api/dashboard/authors/${author.id}` : '/api/dashboard/authors', {
       method: author ? 'PATCH' : 'POST',
-      body: { name: name().trim(), email: email().trim(), bio: bio().trim(), avatar: avatar().trim() },
+      body: draft,
     })
     formOpen.set(false)
     pushToast('success', author ? 'Author updated' : 'Author created')
@@ -135,6 +131,13 @@ function closeDelete(): void {
     deletingAuthor.set(null)
 }
 
+function deleteDescription(): string {
+  const author = deletingAuthor()
+  return author
+    ? `${author.name} will be removed. Their posts will be kept without an assigned author.`
+    : ''
+}
+
 async function deleteAuthor(): Promise<void> {
   const author = deletingAuthor()
   if (!author)
@@ -191,17 +194,22 @@ onMount(() => {
   </section>
 </div>
 
-<div :if="formOpen()" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close author dialog" class="absolute inset-0 bg-black/45" @click="closeForm()"></button>
-  <section role="dialog" aria-modal="true" :aria-label="editingAuthor() ? 'Edit author' : 'New author'" class="relative max-w-lg w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
-    <form @submit.prevent="saveAuthor">
-      <div class="p-6"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ editingAuthor() ? 'Edit author' : 'New author' }}</h2><div :if="saveError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ saveError() }}</div><div class="grid gap-4 mt-5"><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Name</span><input x-model="name" required minlength="5" maxlength="255" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Email</span><input x-model="email" type="email" required class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Bio</span><textarea x-model="bio" maxlength="500" rows="3" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"></textarea></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Avatar URL</span><input x-model="avatar" type="url" placeholder="https://example.com/avatar.jpg" class="mt-1 px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label></div></div>
-      <footer class="flex gap-2 justify-end px-6 py-4 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700"><Button :disabled="saving()" variant="secondary" @click="closeForm()">Cancel</Button><Button type="submit" :disabled="saving() || name().trim().length < 5 || !email().trim()" :loading="saving()">{{ editingAuthor() ? 'Save changes' : 'Create author' }}</Button></footer>
-    </form>
-  </section>
-</div>
-
-<div :if="Boolean(deletingAuthor())" class="flex fixed inset-y-0 right-0 z-[55] items-center justify-center p-4 dashboard-modal-layer">
-  <button type="button" aria-label="Close delete author dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
-  <section role="dialog" aria-modal="true" aria-label="Delete author?" class="relative p-6 max-w-md w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">Delete author?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400"><strong>{{ deletingAuthor()?.name || '' }}</strong> will be removed. Their posts will be kept without an assigned author.</p><div :if="deleteError()" role="alert" class="mt-4 p-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ deleteError() }}</div><div class="flex gap-2 justify-end mt-6"><Button :disabled="deleting()" variant="secondary" @click="closeDelete()">Cancel</Button><Button :loading="deleting()" variant="danger" @click="deleteAuthor()">Delete author</Button></div></section>
-</div>
+<AuthorEditorDialog
+  :open="formOpen()"
+  :author="editingAuthor()"
+  :busy="saving()"
+  :error="saveError()"
+  @close="closeForm"
+  @submit="saveAuthor"
+/>
+
+<ConfirmDialog
+  :isOpen="Boolean(deletingAuthor())"
+  title="Delete author?"
+  :description="deleteDescription()"
+  confirmLabel="Delete author"
+  :busy="deleting()"
+  :error="deleteError()"
+  @close="closeDelete"
+  @confirm="deleteAuthor"
+/>

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -168,101 +168,31 @@ export const blogUrl = publicApplicationUrl('/blog')
     </section>
   </div>
 
-  <!-- Editor -->
-<div x-show="isEditorOpen()" class="flex fixed inset-0 overflow-y-auto z-40 items-start justify-center p-4 sm:p-6 dashboard-modal-layer">
-    <div class="fixed inset-0 bg-neutral-950/60" @click="closeEditor()"></div>
-
-    <div role="dialog" aria-modal="true" aria-labelledby="editor-title" class="relative z-10 my-8 max-w-3xl w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
-      <div class="flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-800">
-        <h2 id="editor-title" class="font-semibold text-lg">{{ editingSlug() ? 'Edit post' : 'New post' }}</h2>
-        <Button variant="ghost" size="sm" iconOnly ariaLabel="Close editor" @click="closeEditor()">
-          <span class="block h-4 w-4 i-hugeicons-cancel-01"></span>
-        </Button>
-      </div>
-
-      <div class="overflow-y-auto p-5 space-y-4 max-h-[70vh]">
-        <div x-show="formError()" class="flex gap-2 items-start px-3 py-2 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-md dark:border-red-900">
-          <span class="shrink-0 mt-0.5 h-4 w-4 i-hugeicons-alert-02"></span>
-          <span>{{ formError() }}</span>
-        </div>
-
-        <div class="grid gap-4 sm:grid-cols-2">
-          <div class="flex flex-col gap-2 sm:col-span-2">
-            <label for="post-title" class="font-medium text-sm">Title</label>
-            <input id="post-title" type="text" x-model="formTitle" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
-          </div>
-
-          <div class="flex flex-col gap-2 sm:col-span-2">
-            <label for="post-slug" class="font-medium text-sm">Slug</label>
-            <input id="post-slug" type="text" x-model="formSlug" :placeholder="suggestedSlug()" class="placeholder-neutral-500 px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
-            <p class="text-neutral-500 text-xs dark:text-neutral-400">The file name and public URL: /blog/{{ formSlug() || suggestedSlug() || 'your-post' }}</p>
-          </div>
-
-          <div class="flex flex-col gap-2 sm:col-span-2">
-            <label for="post-description" class="font-medium text-sm">Description</label>
-            <input id="post-description" type="text" x-model="formDescription" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
-            <p class="text-neutral-500 text-xs dark:text-neutral-400">Used as the excerpt, the meta description, and the RSS summary.</p>
-          </div>
-
-          <div class="flex flex-col gap-2">
-            <label for="post-date" class="font-medium text-sm">Date</label>
-            <input id="post-date" type="date" x-model="formDate" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
-          </div>
-
-          <div class="flex flex-col gap-2">
-            <label for="post-author" class="font-medium text-sm">Author</label>
-            <input id="post-author" type="text" x-model="formAuthor" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
-          </div>
-
-          <div class="flex flex-col gap-2 sm:col-span-2">
-            <label for="post-poster" class="font-medium text-sm">Poster image</label>
-            <input id="post-poster" type="text" x-model="formPoster" placeholder="/assets/images/example.svg" class="placeholder-neutral-500 px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
-          </div>
-
-          <div class="flex flex-col gap-2 sm:col-span-2">
-            <label for="post-body" class="font-medium text-sm">Content</label>
-            <textarea id="post-body" x-model="formBody" rows="14" class="px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 resize-y"></textarea>
-            <p class="text-neutral-500 text-xs dark:text-neutral-400">Markdown. {{ bodyWordCount() }} words, about {{ bodyReadingTime() }} min read.</p>
-          </div>
-        </div>
-
-        <div class="flex flex-col gap-3 sm:flex-row sm:gap-6 pt-2 border-neutral-200 border-t dark:border-neutral-800">
-          <label class="flex gap-2 items-center text-sm">
-            <input type="checkbox" x-model="formDraft" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
-            <span>Draft, keep off the public blog</span>
-          </label>
-          <label class="flex gap-2 items-center text-sm">
-            <input type="checkbox" x-model="formFeatured" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
-            <span>Feature at the top of the listing</span>
-          </label>
-        </div>
-      </div>
-
-      <div class="flex gap-2 justify-end px-5 py-4 border-neutral-200 border-t dark:border-neutral-800">
-        <Button variant="secondary" :disabled="isSaving()" @click="closeEditor()">Cancel</Button>
-        <Button :loading="isSaving()" @click="submit()">
-          {{ isSaving() ? 'Saving' : 'Save post' }}
-        </Button>
-      </div>
-    </div>
-  </div>
-
-  <!-- Delete confirmation -->
-<div x-show="postToDelete()" class="flex fixed inset-0 z-50 items-center justify-center p-4 dashboard-modal-layer">
-    <div class="fixed inset-0 bg-neutral-950/60" @click="cancelDelete()"></div>
-
-    <div role="dialog" aria-modal="true" aria-labelledby="delete-title" class="relative z-10 p-5 max-w-md w-full bg-white dark:bg-neutral-900 border border-neutral-200 rounded-lg dark:border-neutral-800 shadow-xl">
-      <h2 id="delete-title" class="font-semibold text-lg">Delete this post?</h2>
-      <p class="mt-2 text-neutral-600 text-sm dark:text-neutral-300">
-        This deletes the file <code class="px-1 py-0.5 text-xs bg-neutral-100 dark:bg-neutral-800 rounded">content/blog/{{ deleteTargetSlug() }}.md</code>. It stays in git history until you commit the deletion.
-      </p>
-      <div class="flex gap-2 justify-end mt-5">
-        <Button variant="secondary" @click="cancelDelete()">Cancel</Button>
-        <Button variant="danger" @click="confirmDelete()">Delete post</Button>
-      </div>
-    </div>
-  </div>
 </div>
+
+<BlogPostEditorDialog
+  :open="isEditorOpen()"
+  :post="editingPost()"
+  :loadedBody="loadedBody()"
+  :bodyLoading="bodyLoading()"
+  :bodyLoadFailed="bodyLoadFailed()"
+  :busy="isSaving()"
+  :error="formError()"
+  @close="closeEditor"
+  @retry="retryEditorBody"
+  @submit="submit"
+/>
+
+<ConfirmDialog
+  :isOpen="Boolean(postToDelete())"
+  title="Delete this post?"
+  :description="deleteDescription()"
+  confirmLabel="Delete post"
+  :busy="isDeleting()"
+  :error="deleteError()"
+  @close="cancelDelete"
+  @confirm="confirmDelete"
+/>
 </template>
 
 <script client>
@@ -282,33 +212,28 @@ const loadError = state('')
 const searchQuery = state('')
 const statusFilter = state('all')
 
-// Editor state. `editingSlug` doubles as the mode flag: empty means "new post",
-// and it holds the ORIGINAL slug so a slug edit is sent as a rename.
 const isEditorOpen = state(false)
-const editingSlug = state('')
+const editingPost = state(null)
+const loadedBody = state('')
+const bodyLoading = state(false)
+const bodyLoadFailed = state(false)
 const formError = state('')
-const formTitle = state('')
-const formSlug = state('')
-const formDescription = state('')
-const formDate = state('')
-const formAuthor = state('')
-const formPoster = state('')
-const formBody = state('')
-const formDraft = state(false)
-const formFeatured = state(false)
 
 const postToDelete = state(null)
+const isDeleting = state(false)
+const deleteError = state('')
+let editorRequestId = 0
 
 function publicPostUrl(slug) {
   return `${publicBlogBaseUrl}/${encodeURIComponent(String(slug))}`
 }
 
-// Read by the delete dialog's copy; kept as a derived signal so the template
-// never has to reach through a possibly-null post.
-const deleteTargetSlug = derived(() => {
+const deleteDescription = derived(() => {
   const post = postToDelete()
 
-  return post ? post.slug : ''
+  return post
+    ? `Deletes content/blog/${post.slug}.md. The file stays in git history until you commit the deletion.`
+    : ''
 })
 
 const publishedCount = derived(() => posts().filter(p => !p.draft).length)
@@ -331,20 +256,6 @@ const filteredPosts = derived(() => {
   })
 })
 
-// Mirrors slugify() in blog-admin.ts so the placeholder matches what the server
-// will actually write when the slug field is left empty.
-function slugify(input) {
-  return String(input)
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-    .slice(0, 80)
-}
-
-const suggestedSlug = derived(() => slugify(formTitle()))
-const bodyWordCount = derived(() => formBody().split(/\s+/).filter(Boolean).length)
-const bodyReadingTime = derived(() => Math.max(1, Math.round(bodyWordCount() / 200)))
-
 function statusClass(draft) {
   return draft
     ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
@@ -368,78 +279,69 @@ function clearFilters() {
 }
 
 async function openEditor(post) {
+  const requestId = ++editorRequestId
   formError.set('')
-  editingSlug.set(post ? post.slug : '')
+  editingPost.set(post)
+  loadedBody.set('')
+  bodyLoading.set(Boolean(post))
+  bodyLoadFailed.set(false)
   isEditorOpen.set(true)
 
-  if (!post) {
-    formTitle.set('')
-    formSlug.set('')
-    formDescription.set('')
-    formDate.set(new Date().toISOString().slice(0, 10))
-    formAuthor.set('')
-    formPoster.set('')
-    formBody.set('')
-    formDraft.set(true)
-    formFeatured.set(false)
+  if (!post)
     return
-  }
 
-  // The list omits the markdown body, so fetch the full post. Seed the fields
-  // from the list row first so the editor is never blank while that request
-  // is in flight.
-  formTitle.set(post.title)
-  formSlug.set(post.slug)
-  formDescription.set(post.description)
-  formDate.set(post.date)
-  formAuthor.set(post.author)
-  formPoster.set(post.poster)
-  formDraft.set(post.draft)
-  formFeatured.set(post.featured)
-  formBody.set('')
+  await loadEditorBody(post, requestId)
+}
+
+async function loadEditorBody(post, requestId = ++editorRequestId) {
+  bodyLoading.set(true)
+  bodyLoadFailed.set(false)
+  formError.set('')
 
   try {
     const full = await fetchBlogPost(post.slug)
 
-    // Ignore a late response if the user already closed or switched posts.
-    if (isEditorOpen() && editingSlug() === post.slug)
-      formBody.set(full.body)
+    if (requestId === editorRequestId && isEditorOpen() && editingPost()?.slug === post.slug)
+      loadedBody.set(full.body)
   }
   catch (error) {
-    formError.set(`Couldn't load this post's content: ${error.message}`)
+    if (requestId === editorRequestId) {
+      bodyLoadFailed.set(true)
+      formError.set(`Couldn't load this post's content: ${error.message}`)
+    }
   }
+  finally {
+    if (requestId === editorRequestId && isEditorOpen() && editingPost()?.slug === post.slug)
+      bodyLoading.set(false)
+  }
+}
+
+function retryEditorBody() {
+  const post = editingPost()
+  if (post)
+    void loadEditorBody(post)
 }
 
 function closeEditor() {
+  if (isSaving())
+    return
+
   isEditorOpen.set(false)
-  editingSlug.set('')
+  editorRequestId += 1
+  editingPost.set(null)
+  loadedBody.set('')
+  bodyLoading.set(false)
+  bodyLoadFailed.set(false)
   formError.set('')
 }
 
-async function submit() {
-  if (!formTitle().trim()) {
-    formError.set('A title is required.')
-    return
-  }
-
+async function submit(draft) {
   isSaving.set(true)
   formError.set('')
 
   try {
-    const saved = await saveBlogPost({
-      slug: formSlug().trim() || suggestedSlug(),
-      title: formTitle().trim(),
-      description: formDescription().trim(),
-      date: formDate(),
-      author: formAuthor().trim(),
-      authorBio: '',
-      poster: formPoster().trim(),
-      featured: formFeatured(),
-      draft: formDraft(),
-      body: formBody(),
-    }, editingSlug())
-
-    const original = editingSlug()
+    const original = editingPost()?.slug || ''
+    const saved = await saveBlogPost(draft, original)
 
     posts.update(list => (original
       ? list.map(p => (p.slug === original ? saved : p))
@@ -457,11 +359,15 @@ async function submit() {
 }
 
 function askDelete(post) {
+  deleteError.set('')
   postToDelete.set(post)
 }
 
 function cancelDelete() {
-  postToDelete.set(null)
+  if (!isDeleting()) {
+    postToDelete.set(null)
+    deleteError.set('')
+  }
 }
 
 async function confirmDelete() {
@@ -469,14 +375,19 @@ async function confirmDelete() {
   if (!post)
     return
 
-  postToDelete.set(null)
+  isDeleting.set(true)
+  deleteError.set('')
 
   try {
     await deleteBlogPost(post.slug)
     posts.update(list => list.filter(p => p.slug !== post.slug))
+    postToDelete.set(null)
   }
   catch (error) {
-    loadError.set(`Couldn't delete "${post.title}": ${error.message}`)
+    deleteError.set(`Couldn't delete "${post.title}": ${error.message}`)
+  }
+  finally {
+    isDeleting.set(false)
   }
 }
 

package/resources/components/Dashboard/Content/BlogPostEditorDialog.stx

@@ -0,0 +1,195 @@
+<script client>
+interface BlogPostRecord {
+  slug: string
+  title: string
+  description: string
+  date: string
+  author: string
+  poster: string
+  draft: boolean
+  featured: boolean
+}
+
+interface BlogPostDraft {
+  slug: string
+  title: string
+  description: string
+  date: string
+  author: string
+  authorBio: string
+  poster: string
+  featured: boolean
+  draft: boolean
+  body: string
+}
+
+const open = useReactiveProp('open', false)
+const post = useReactiveProp('post', null as BlogPostRecord | null)
+const loadedBody = useReactiveProp('loadedBody', '')
+const bodyLoading = useReactiveProp('bodyLoading', false)
+const bodyLoadFailed = useReactiveProp('bodyLoadFailed', false)
+const busy = useReactiveProp('busy', false)
+const error = useReactiveProp('error', '')
+const title = state('')
+const slug = state('')
+const description = state('')
+const date = state('')
+const author = state('')
+const poster = state('')
+const body = state('')
+const draft = state(true)
+const featured = state(false)
+const emit = defineEmits()
+let wasOpen = false
+let activeSlug = ''
+
+function slugify(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80)
+}
+
+const suggestedSlug = derived(() => slugify(title()))
+const wordCount = derived(() => body().split(/\s+/).filter(Boolean).length)
+const readingTime = derived(() => Math.max(1, Math.round(wordCount() / 200)))
+const dialogTitle = derived(() => post() ? 'Edit post' : 'New post')
+const actionLabel = derived(() => post() ? 'Save post' : 'Create post')
+
+effect(() => {
+  const isOpen = open()
+  if (isOpen && !wasOpen) {
+    const record = post()
+    activeSlug = record?.slug || ''
+    title.set(record?.title || '')
+    slug.set(record?.slug || '')
+    description.set(record?.description || '')
+    date.set(record?.date || new Date().toISOString().slice(0, 10))
+    author.set(record?.author || '')
+    poster.set(record?.poster || '')
+    draft.set(record?.draft ?? true)
+    featured.set(Boolean(record?.featured))
+    body.set(record ? '' : loadedBody())
+  }
+  wasOpen = isOpen
+})
+
+effect(() => {
+  if (open() && post()?.slug === activeSlug && !bodyLoading())
+    body.set(loadedBody())
+})
+
+function valid(): boolean {
+  return title().trim().length > 0 && !bodyLoading() && !bodyLoadFailed()
+}
+
+function close(): void {
+  if (!busy())
+    emit('close')
+}
+
+function submit(): void {
+  if (!valid())
+    return
+
+  const postDraft: BlogPostDraft = {
+    slug: slug().trim() || suggestedSlug(),
+    title: title().trim(),
+    description: description().trim(),
+    date: date(),
+    author: author().trim(),
+    authorBio: '',
+    poster: poster().trim(),
+    featured: featured(),
+    draft: draft(),
+    body: body(),
+  }
+  emit('submit', postDraft)
+}
+</script>
+
+<Modal
+  :isOpen="open()"
+  :title="dialogTitle()"
+  description="Edit the markdown file and its publishing metadata together."
+  size="xl"
+  :closable="!busy()"
+  @close="close"
+>
+  <form id="blog-post-editor-form" class="grid gap-4" @submit.prevent="submit">
+    <div :if="error()" role="alert" class="flex flex-wrap gap-3 items-center justify-between px-3 py-2 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/40 border border-red-200 rounded-md dark:border-red-900">
+      <span class="flex gap-2 items-start min-w-0">
+        <span class="shrink-0 mt-0.5 h-4 w-4 i-hugeicons-alert-02"></span>
+        <span>{{ error() }}</span>
+      </span>
+      <Button :if="bodyLoadFailed()" variant="secondary" size="sm" @click="emit('retry')">Retry loading content</Button>
+    </div>
+
+    <div class="grid gap-4 sm:grid-cols-2">
+      <label class="flex flex-col gap-2 sm:col-span-2">
+        <span class="font-medium text-sm">Title</span>
+        <input x-model="title" name="title" type="text" required autofocus class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+      </label>
+
+      <label class="flex flex-col gap-2 sm:col-span-2">
+        <span class="font-medium text-sm">Slug</span>
+        <input x-model="slug" name="slug" type="text" :placeholder="suggestedSlug()" class="placeholder-neutral-500 px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+        <span class="text-neutral-500 text-xs dark:text-neutral-400">The file name and public URL: /blog/{{ slug() || suggestedSlug() || 'your-post' }}</span>
+      </label>
+
+      <label class="flex flex-col gap-2 sm:col-span-2">
+        <span class="font-medium text-sm">Description</span>
+        <input x-model="description" name="description" type="text" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+        <span class="text-neutral-500 text-xs dark:text-neutral-400">Used as the excerpt, meta description, and RSS summary.</span>
+      </label>
+
+      <label class="flex flex-col gap-2">
+        <span class="font-medium text-sm">Date</span>
+        <input x-model="date" name="date" type="date" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+      </label>
+
+      <label class="flex flex-col gap-2">
+        <span class="font-medium text-sm">Author</span>
+        <input x-model="author" name="author" type="text" class="px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+      </label>
+
+      <label class="flex flex-col gap-2 sm:col-span-2">
+        <span class="font-medium text-sm">Poster image</span>
+        <input x-model="poster" name="poster" type="text" placeholder="/assets/images/example.svg" class="placeholder-neutral-500 px-3 py-2 text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30" />
+      </label>
+
+      <label class="flex flex-col gap-2 sm:col-span-2">
+        <span class="flex items-center justify-between gap-3">
+          <span class="font-medium text-sm">Content</span>
+          <span :if="bodyLoading()" role="status" class="inline-flex gap-1.5 items-center text-neutral-500 text-xs dark:text-neutral-400">
+            <span class="h-3.5 w-3.5 animate-spin i-hugeicons-loading-03"></span>
+            Loading content
+          </span>
+        </span>
+        <textarea x-model="body" name="body" rows="14" :disabled="bodyLoading() || bodyLoadFailed()" class="px-3 py-2 font-mono text-neutral-900 text-sm dark:text-neutral-100 bg-white dark:bg-neutral-950 border border-neutral-300 outline-none rounded-md disabled:opacity-60 dark:border-neutral-700 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 resize-y"></textarea>
+        <span class="text-neutral-500 text-xs dark:text-neutral-400">Markdown. {{ wordCount() }} words, about {{ readingTime() }} min read.</span>
+      </label>
+    </div>
+
+    <div class="flex flex-col gap-3 sm:flex-row sm:gap-6 pt-2 border-neutral-200 border-t dark:border-neutral-800">
+      <label class="flex gap-2 items-center text-sm">
+        <input x-model="draft" name="draft" type="checkbox" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
+        <span>Draft, keep off the public blog</span>
+      </label>
+      <label class="flex gap-2 items-center text-sm">
+        <input x-model="featured" name="featured" type="checkbox" class="h-4 w-4 text-blue-600 border-neutral-300 rounded dark:border-neutral-600" />
+        <span>Feature at the top of the listing</span>
+      </label>
+    </div>
+  </form>
+
+  <template #footer>
+    <div class="flex gap-2 justify-end w-full">
+      <Button variant="secondary" :disabled="busy()" @click="close">Cancel</Button>
+      <Button type="submit" form="blog-post-editor-form" :disabled="!valid()" :loading="busy()">
+        {{ actionLabel() }}
+      </Button>
+    </div>
+  </template>
+</Modal>