@stacksjs/defaults 0.70.228 → 0.70.230

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

@@ -0,0 +1,199 @@
+<script client>
+import { dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+interface PageRecord {
+  id: string
+  title: string
+  template: string
+  views: number
+  conversions: number
+  publishedAt: string
+}
+
+const pages = state<PageRecord[]>([])
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const formOpen = state(false)
+const editingPage = state<PageRecord | null>(null)
+const title = state('')
+const template = state('default')
+const published = state(false)
+const saving = state(false)
+const saveError = state('')
+const deletingPage = state<PageRecord | null>(null)
+const deleting = state(false)
+const deleteError = state('')
+
+function normalize(record: any): PageRecord {
+  return {
+    id: String(record?.id || ''),
+    title: String(record?.title || ''),
+    template: String(record?.template || 'default'),
+    views: Number(record?.views || 0),
+    conversions: Number(record?.conversions || 0),
+    publishedAt: String(record?.published_at || ''),
+  }
+}
+
+function visiblePages(): PageRecord[] {
+  const query = search().trim().toLowerCase()
+  return pages().filter(page => !query || [page.title, page.template]
+    .some(value => value.toLowerCase().includes(query)))
+}
+
+function totalViews(): number {
+  return pages().reduce((sum, page) => sum + page.views, 0)
+}
+
+function totalConversions(): number {
+  return pages().reduce((sum, page) => sum + page.conversions, 0)
+}
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat('en-US').format(value)
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Draft'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date)
+}
+
+async function loadPages(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<{ pages?: unknown[] }>('/api/dashboard/pages')
+    if (!Array.isArray(data.pages))
+      throw new TypeError('Pages were not returned in the expected shape.')
+    pages.set(data.pages.map(normalize))
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+    pushToast('error', 'Could not load pages', { detail: loadError() })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function resetForm(page: PageRecord | null): void {
+  editingPage.set(page)
+  title.set(page?.title || '')
+  template.set(page?.template || 'default')
+  published.set(Boolean(page?.publishedAt))
+  saveError.set('')
+}
+
+function openCreate(): void {
+  resetForm(null)
+  formOpen.set(true)
+}
+
+function openEdit(page: PageRecord): void {
+  resetForm(page)
+  formOpen.set(true)
+}
+
+function closeForm(): void {
+  if (!saving())
+    formOpen.set(false)
+}
+
+async function savePage(): Promise<void> {
+  const page = editingPage()
+  saving.set(true)
+  saveError.set('')
+  try {
+    await dashboardApi(page ? `/api/dashboard/pages/${page.id}` : '/api/dashboard/pages', {
+      method: page ? 'PATCH' : 'POST',
+      body: { title: title().trim(), template: template(), published: published() },
+    })
+    formOpen.set(false)
+    pushToast('success', page ? 'Page updated' : 'Page created')
+    await loadPages()
+  }
+  catch (error) {
+    saveError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+function openDelete(page: PageRecord): void {
+  deletingPage.set(page)
+  deleteError.set('')
+}
+
+function closeDelete(): void {
+  if (!deleting())
+    deletingPage.set(null)
+}
+
+async function deletePage(): Promise<void> {
+  const page = deletingPage()
+  if (!page)
+    return
+  deleting.set(true)
+  deleteError.set('')
+  try {
+    await dashboardApi(`/api/dashboard/pages/${page.id}`, { method: 'DELETE' })
+    deletingPage.set(null)
+    pushToast('success', 'Page deleted')
+    await loadPages()
+  }
+  catch (error) {
+    deleteError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    deleting.set(false)
+  }
+}
+
+onMount(() => {
+  void loadPages()
+})
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div><p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p><h1 class="mt-1 font-bold text-2xl text-gray-900 dark:text-white">Pages</h1><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted CMS pages, templates, and publishing state.</p></div>
+    <div class="flex gap-2"><Button :loading="loading()" variant="secondary" @click="loadPages()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button><Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>New page</Button></div>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 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"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadPages()">Retry</Button></div>
+
+  <section aria-label="Page metrics" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ pages().length }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViews()) }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Conversions</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalConversions()) }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Newest</p><p class="mt-2 font-semibold text-gray-900 text-lg truncate dark:text-white">{{ pages()[0]?.title || 'None' }}</p></article>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <div class="p-4 border-b border-gray-200 dark:border-neutral-700"><label><span class="sr-only">Search pages</span><input x-model="search" type="search" placeholder="Search pages" class="px-3 py-2 max-w-md 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 class="overflow-x-auto"><table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700"><thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Page</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Traffic</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Publishing</th><th class="px-4 py-3"><span class="sr-only">Actions</span></th></tr></thead><tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+      <template :if="loading()"><tr><td colspan="4" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading pages</td></tr></template>
+      <template :else-if="visiblePages().length === 0"><tr><td colspan="4" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-file-02"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No pages found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the search or create a page.</p></td></tr></template>
+      <template :else><template :for="page in visiblePages()"><tr><td class="px-4 py-3"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ page.title }}</p><p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ page.template }}</p></td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400"><p>{{ formatNumber(page.views) }} views</p><p class="mt-1 text-xs">{{ formatNumber(page.conversions) }} conversions</p></td><td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (page.publishedAt ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40' : 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700')">{{ formatDate(page.publishedAt) }}</span></td><td class="px-4 py-3"><div class="flex justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit page ' + page.title" @click="openEdit(page)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete page ' + page.title" @click="openDelete(page)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td></tr></template></template>
+    </tbody></table></div>
+  </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 page dialog" class="absolute inset-0 bg-black/45" @click="closeForm()"></button>
+  <section role="dialog" aria-modal="true" :aria-label="editingPage() ? 'Edit page' : 'New page'" 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="savePage"><div class="p-6"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ editingPage() ? 'Edit page' : 'New page' }}</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">Title</span><input x-model="title" required minlength="3" 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">Template</span><select x-model="template" 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"><option value="default">Default</option><option value="landing">Landing</option><option value="blog">Blog</option><option value="contact">Contact</option></select></label><label class="flex gap-3 items-start p-3 bg-gray-50 dark:bg-neutral-900/50 border border-gray-200 rounded-lg dark:border-neutral-700"><input x-model="published" type="checkbox" class="mt-0.5 h-4 w-4 rounded" /><span><span class="block font-medium text-gray-700 text-sm dark:text-neutral-200">Published</span><span class="block mt-1 text-gray-500 text-xs dark:text-neutral-400">Published pages receive a timestamp. Clearing this returns the page to draft.</span></span></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() || title().trim().length < 3" :loading="saving()">{{ editingPage() ? 'Save changes' : 'Create page' }}</Button></footer></form>
+  </section>
+</div>
+
+<div :if="Boolean(deletingPage())" 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 page dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
+  <section role="dialog" aria-modal="true" aria-label="Delete page?" 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 page?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400"><strong>{{ deletingPage()?.title || '' }}</strong> will be permanently removed.</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="deletePage()">Delete page</Button></div></section>
+</div>

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

@@ -0,0 +1,275 @@
+<script client>
+import { dashboardApi } from '../../../../functions/dashboard-api'
+import { pushToast } from '../../../../functions/toasts'
+
+type PostStatus = 'draft' | 'published' | 'archived'
+interface OptionRecord { id: string, name: string, slug: string }
+interface AuthorRecord { id: string, name: string, email: string }
+interface PostRecord {
+  id: string
+  title: string
+  excerpt: string
+  content: string
+  poster: string
+  status: PostStatus
+  views: number
+  publishedAt: string
+  authorId: string
+  featured: boolean
+  categoryIds: string[]
+  tagIds: string[]
+}
+
+const posts = state<PostRecord[]>([])
+const categories = state<OptionRecord[]>([])
+const tags = state<OptionRecord[]>([])
+const authors = state<AuthorRecord[]>([])
+const loading = state(true)
+const loadError = state('')
+const search = state('')
+const statusFilter = state('all')
+
+const formOpen = state(false)
+const editingPost = state<PostRecord | null>(null)
+const title = state('')
+const excerpt = state('')
+const content = state('')
+const poster = state('')
+const status = state<PostStatus>('draft')
+const authorId = state('')
+const featured = state(false)
+const categoryIds = state<string[]>([])
+const tagIds = state<string[]>([])
+const saving = state(false)
+const saveError = state('')
+const deletingPost = state<PostRecord | null>(null)
+const deleting = state(false)
+const deleteError = state('')
+
+function list(value: unknown): string[] {
+  return Array.isArray(value) ? value.map(item => String(item)).filter(Boolean) : []
+}
+
+function normalizedStatus(value: unknown): PostStatus {
+  const normalized = String(value || 'draft').toLowerCase()
+  return normalized === 'published' || normalized === 'archived' ? normalized : 'draft'
+}
+
+function normalizePost(record: any): PostRecord {
+  return {
+    id: String(record?.id || ''),
+    title: String(record?.title || ''),
+    excerpt: String(record?.excerpt || ''),
+    content: String(record?.content || ''),
+    poster: String(record?.poster || ''),
+    status: normalizedStatus(record?.status),
+    views: Number(record?.views || 0),
+    publishedAt: String(record?.published_at || ''),
+    authorId: record?.author_id ? String(record.author_id) : '',
+    featured: Boolean(record?.featured ?? record?.is_featured),
+    categoryIds: list(record?.categoryIds ?? record?.category_ids),
+    tagIds: list(record?.tagIds ?? record?.tag_ids),
+  }
+}
+
+function normalizeOption(record: any): OptionRecord {
+  return { id: String(record?.id || ''), name: String(record?.name || ''), slug: String(record?.slug || '') }
+}
+
+function normalizeAuthor(record: any): AuthorRecord {
+  return { id: String(record?.id || ''), name: String(record?.name || ''), email: String(record?.email || '') }
+}
+
+function visiblePosts(): PostRecord[] {
+  const query = search().trim().toLowerCase()
+  return posts().filter(post =>
+    (statusFilter() === 'all' || post.status === statusFilter())
+    && (!query || [post.title, post.excerpt, post.content].some(value => value.toLowerCase().includes(query))),
+  )
+}
+
+function postCount(value: PostStatus): number {
+  return posts().filter(post => post.status === value).length
+}
+
+function totalViews(): number {
+  return posts().reduce((sum, post) => sum + post.views, 0)
+}
+
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat('en-US').format(value)
+}
+
+function formatDate(value: string): string {
+  if (!value)
+    return 'Not published'
+  const date = new Date(value)
+  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(date)
+}
+
+function statusClass(value: PostStatus): string {
+  return `inline-flex px-2 py-1 font-medium text-xs rounded-full ${({
+    published: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+    draft: 'text-yellow-700 dark:text-yellow-300 bg-yellow-50 dark:bg-yellow-950/40',
+    archived: 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700',
+  }[value])}`
+}
+
+function authorName(post: PostRecord): string {
+  return post.authorId ? authors().find(author => author.id === post.authorId)?.name || 'Unknown author' : 'No author'
+}
+
+function optionNames(ids: string[], options: OptionRecord[]): string {
+  const names = ids.map(id => options.find(option => option.id === id)?.name).filter((name): name is string => Boolean(name))
+  return names.length ? names.join(', ') : 'None'
+}
+
+async function loadPosts(): Promise<void> {
+  loading.set(true)
+  loadError.set('')
+  try {
+    const data = await dashboardApi<{ posts?: unknown[], categories?: unknown[], tags?: unknown[], authors?: unknown[] }>('/api/dashboard/posts')
+    if (!Array.isArray(data.posts) || !Array.isArray(data.categories) || !Array.isArray(data.tags) || !Array.isArray(data.authors))
+      throw new TypeError('Posts were not returned in the expected shape.')
+    posts.set(data.posts.map(normalizePost))
+    categories.set(data.categories.map(normalizeOption))
+    tags.set(data.tags.map(normalizeOption))
+    authors.set(data.authors.map(normalizeAuthor))
+  }
+  catch (error) {
+    loadError.set(error instanceof Error ? error.message : String(error))
+    pushToast('error', 'Could not load posts', { detail: loadError() })
+  }
+  finally {
+    loading.set(false)
+  }
+}
+
+function resetForm(post: PostRecord | null): void {
+  editingPost.set(post)
+  title.set(post?.title || '')
+  excerpt.set(post?.excerpt || '')
+  content.set(post?.content || '')
+  poster.set(post?.poster || '')
+  status.set(post?.status || 'draft')
+  authorId.set(post?.authorId || '')
+  featured.set(Boolean(post?.featured))
+  categoryIds.set(post ? [...post.categoryIds] : [])
+  tagIds.set(post ? [...post.tagIds] : [])
+  saveError.set('')
+}
+
+function openCreate(): void { resetForm(null); formOpen.set(true) }
+function openEdit(post: PostRecord): void { resetForm(post); formOpen.set(true) }
+function closeForm(): void { if (!saving()) formOpen.set(false) }
+function openDelete(post: PostRecord): void { deletingPost.set(post); deleteError.set('') }
+function closeDelete(): void { if (!deleting()) deletingPost.set(null) }
+
+function formValid(): boolean {
+  const excerptLength = excerpt().trim().length
+  return title().trim().length >= 3 && title().trim().length <= 255
+    && content().trim().length >= 10 && content().length <= 100000
+    && (excerptLength === 0 || excerptLength >= 10) && excerpt().length <= 500
+}
+
+async function savePost(): Promise<void> {
+  const post = editingPost()
+  saving.set(true)
+  saveError.set('')
+  try {
+    await dashboardApi(post ? `/api/dashboard/posts/${post.id}` : '/api/dashboard/posts', {
+      method: post ? 'PATCH' : 'POST',
+      body: {
+        title: title().trim(),
+        excerpt: excerpt().trim(),
+        content: content().trim(),
+        poster: poster().trim(),
+        status: status(),
+        authorId: authorId() || null,
+        featured: featured(),
+        categoryIds: categoryIds(),
+        tagIds: tagIds(),
+      },
+    })
+    formOpen.set(false)
+    pushToast('success', post ? 'Post updated' : 'Post created')
+    await loadPosts()
+  }
+  catch (error) {
+    saveError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    saving.set(false)
+  }
+}
+
+async function deletePost(): Promise<void> {
+  const post = deletingPost()
+  if (!post)
+    return
+  deleting.set(true)
+  deleteError.set('')
+  try {
+    await dashboardApi(`/api/dashboard/posts/${post.id}`, { method: 'DELETE' })
+    deletingPost.set(null)
+    pushToast('success', 'Post deleted')
+    await loadPosts()
+  }
+  catch (error) {
+    deleteError.set(error instanceof Error ? error.message : String(error))
+  }
+  finally {
+    deleting.set(false)
+  }
+}
+
+onMount(() => { void loadPosts() })
+</script>
+
+<div class="space-y-6">
+  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div><p class="font-semibold text-blue-600 text-xs tracking-wide uppercase dark:text-blue-400">CMS</p><h1 class="mt-1 font-bold text-2xl text-gray-900 dark:text-white">Posts</h1><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted articles, publishing, authors, and native taxonomies.</p></div>
+    <div class="flex flex-wrap gap-2"><Button href="/blog" target="_blank" rel="noreferrer" variant="secondary"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-view"></span>View blog</Button><Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button><Button @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>New post</Button></div>
+  </header>
+
+  <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 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"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadPosts()">Retry</Button></div>
+
+  <section aria-label="Post metrics" class="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Total</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ posts().length }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Published</p><p class="mt-2 font-semibold text-2xl text-green-700 dark:text-green-300">{{ postCount('published') }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Drafts</p><p class="mt-2 font-semibold text-2xl text-yellow-700 dark:text-yellow-300">{{ postCount('draft') }}</p></article>
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Views</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ formatNumber(totalViews()) }}</p></article>
+  </section>
+
+  <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+    <div class="flex flex-col gap-3 sm:flex-row p-4 border-b border-gray-200 dark:border-neutral-700"><label class="flex-1"><span class="sr-only">Search posts</span><input x-model="search" type="search" placeholder="Search title, excerpt, or content" class="px-3 py-2 max-w-xl 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="sr-only">Filter by status</span><select x-model="statusFilter" class="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"><option value="all">All statuses</option><option value="published">Published</option><option value="draft">Draft</option><option value="archived">Archived</option></select></label></div>
+    <div class="overflow-x-auto"><table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700"><thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Post</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Taxonomy</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Publishing</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Views</th><th class="px-4 py-3"><span class="sr-only">Actions</span></th></tr></thead><tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
+      <template :if="loading()"><tr><td colspan="5" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading posts</td></tr></template>
+      <template :else-if="visiblePosts().length === 0"><tr><td colspan="5" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-quill-write-02"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No posts found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or create a post.</p></td></tr></template>
+      <template :else><template :for="post in visiblePosts()"><tr><td class="px-4 py-3 max-w-md"><div class="flex gap-2 items-center"><p class="font-medium text-gray-900 text-sm truncate dark:text-white">{{ post.title }}</p><span :if="post.featured" title="Featured" class="flex-shrink-0 h-4 w-4 text-amber-500 i-hugeicons-star"></span></div><p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ post.excerpt || post.content }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ authorName(post) }}</p></td><td class="px-4 py-3 max-w-xs text-gray-500 text-xs dark:text-neutral-400"><p class="truncate"><span class="font-medium text-gray-700 dark:text-neutral-200">Categories:</span> {{ optionNames(post.categoryIds, categories()) }}</p><p class="mt-1 truncate"><span class="font-medium text-gray-700 dark:text-neutral-200">Tags:</span> {{ optionNames(post.tagIds, tags()) }}</p></td><td class="px-4 py-3"><span :class="statusClass(post.status)">{{ post.status }}</span><p class="mt-2 text-gray-400 text-xs dark:text-neutral-500">{{ formatDate(post.publishedAt) }}</p></td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatNumber(post.views) }}</td><td class="px-4 py-3"><div class="flex justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit post ' + post.title" @click="openEdit(post)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete post ' + post.title" @click="openDelete(post)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td></tr></template></template>
+    </tbody></table></div>
+  </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 post editor" class="absolute inset-0 bg-black/45" @click="closeForm()"></button>
+  <section role="dialog" aria-modal="true" :aria-label="editingPost() ? 'Edit post' : 'New post'" class="flex relative flex-col max-h-[calc(100dvh-2rem)] max-w-4xl w-full bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700 shadow-xl">
+    <form class="flex flex-col min-h-0" @submit.prevent="savePost()">
+      <header class="px-6 py-4 border-b border-gray-200 dark:border-neutral-700"><h2 class="font-semibold text-gray-900 text-lg dark:text-white">{{ editingPost() ? 'Edit post' : 'New post' }}</h2><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Content, ownership, and taxonomies are persisted together.</p></header>
+      <div class="overflow-y-auto p-6"><div :if="saveError()" role="alert" class="mb-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-5">
+        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Title</span><input x-model.trim="title" required minlength="3" 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>
+        <div class="grid gap-4 sm:grid-cols-3"><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Status</span><select x-model="status" 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"><option value="draft">Draft</option><option value="published">Published</option><option value="archived">Archived</option></select></label><label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Author</span><select x-model="authorId" 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"><option value="">No author</option><template :for="author in authors()"><option :value="author.id">{{ author.name }} ({{ author.email }})</option></template></select></label><label class="flex gap-3 items-center self-end px-3 py-2 min-h-10 bg-gray-50 dark:bg-neutral-900/60 border border-gray-200 rounded-md dark:border-neutral-700"><input x-model="featured" type="checkbox" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Featured post</span></label></div>
+        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Poster URL</span><input x-model.trim="poster" type="url" maxlength="255" placeholder="https://example.com/poster.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>
+        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Excerpt</span><textarea x-model="excerpt" rows="3" maxlength="500" placeholder="Optional, at least 10 characters when provided" 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><span class="block mt-1 text-gray-400 text-xs">{{ excerpt().length }}/500</span></label>
+        <label><span class="font-medium text-gray-700 text-sm dark:text-neutral-200">Content</span><textarea x-model="content" required minlength="10" maxlength="100000" rows="10" class="mt-1 px-3 py-2 w-full font-mono 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><span class="block mt-1 text-gray-400 text-xs">{{ content().length }}/100000</span></label>
+        <div class="grid gap-4 lg:grid-cols-2"><fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700"><legend class="px-1 font-semibold text-gray-700 text-sm dark:text-neutral-200">Categories, {{ categoryIds().length }} selected</legend><div :if="categories().length === 0" class="text-gray-500 text-sm dark:text-neutral-400">No categories available.</div><div :else class="grid gap-2"><template :for="categoryOption in categories()"><label class="flex gap-2 items-center"><input x-model="categoryIds" type="checkbox" :value="categoryOption.id" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="text-gray-700 text-sm dark:text-neutral-200">{{ categoryOption.name }}</span></label></template></div></fieldset><fieldset class="p-4 border border-gray-200 rounded-lg dark:border-neutral-700"><legend class="px-1 font-semibold text-gray-700 text-sm dark:text-neutral-200">Tags, {{ tagIds().length }} selected</legend><div :if="tags().length === 0" class="text-gray-500 text-sm dark:text-neutral-400">No tags available.</div><div :else class="grid gap-2 sm:grid-cols-2"><template :for="tag in tags()"><label class="flex gap-2 items-center"><input x-model="tagIds" type="checkbox" :value="tag.id" class="h-4 w-4 text-blue-600 border-gray-300 rounded" /><span class="text-gray-700 text-sm dark:text-neutral-200">{{ tag.name }}</span></label></template></div></fieldset></div>
+      </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() || !formValid()" :loading="saving()">{{ editingPost() ? 'Save changes' : 'Create post' }}</Button></footer>
+    </form>
+  </section>
+</div>
+
+<div :if="Boolean(deletingPost())" 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 post dialog" class="absolute inset-0 bg-black/45" @click="closeDelete()"></button>
+  <section role="dialog" aria-modal="true" aria-label="Delete post?" 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 post?</h2><p class="mt-2 text-gray-500 text-sm dark:text-neutral-400"><strong>{{ deletingPost()?.title || '' }}</strong> and its category and tag links will be permanently removed.</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="deletePost()">Delete post</Button></div></section>
+</div>