@stacksjs/defaults 0.75.243 → 0.75.245

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
@@ -23,7 +25,6 @@ const description = useReactiveProp('description', '')
 const records = state<TaxonomyRecord[]>([])
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const dialogOpen = state(false)
 const saving = state(false)
 const saveError = state('')
@@ -46,13 +47,41 @@ function normalize(record: any): TaxonomyRecord {
   }
 }
 
+/**
+ * Derived rather than constant: this component serves both categories and
+ * tags, and the fourth column is the post count for tags and the active state
+ * for categories - a different heading and a different value.
+ */
+function columns() {
+  return [
+    { key: 'name', label: 'Name', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+    { key: 'slug', label: 'Slug', sortable: true, class: 'font-mono text-gray-500 dark:text-neutral-400' },
+    { key: 'description', label: 'Description', emptyText: 'No description', class: 'max-w-md truncate text-gray-500 dark:text-neutral-400' },
+    {
+      key: 'stateLabel',
+      label: resource() === 'tags' ? 'Posts' : 'Status',
+      sortable: true,
+      class: 'text-gray-500 dark:text-neutral-400',
+    },
+  ]
+}
+
+const ROW_ACTIONS = [
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+/** `UI/Table` owns the search; the fourth cell is derived onto the row. */
 function visibleRecords(): TaxonomyRecord[] {
-  const query = search().trim().toLowerCase()
-  return records().filter(record => !query || [
-    record.name,
-    record.slug,
-    record.description,
-  ].some(value => value.toLowerCase().includes(query)))
+  return records().map(record => ({
+    ...record,
+    stateLabel: resource() === 'tags'
+      ? String(record.postCount)
+      : record.active ? 'Active' : 'Inactive',
+  })) as TaxonomyRecord[]
+}
+
+function handleRowAction(payload: { action: string, row: TaxonomyRecord }): void {
+  openDelete(payload.row)
 }
 
 function secondaryMetricLabel(): string {
@@ -184,17 +213,20 @@ onMount(() => {
   </section>
 
   <section class="overflow-hidden max-w-full min-w-0 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 {{ resource() }}</span><input x-model="search" type="search" :placeholder="'Search ' + resource()" 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 max-w-full w-full">
-      <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">Name</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Slug</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Description</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">{{ resource() === 'tags' ? 'Posts' : 'Status' }}</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 {{ resource() }}</td></tr></template>
-          <template :else-if="visibleRecords().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-tags"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No {{ resource() }} found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the search or create a {{ singular() }}.</p></td></tr></template>
-          <template :else><template :for="record in visibleRecords()"><tr><td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</td><td class="px-4 py-3 font-mono text-gray-500 text-sm dark:text-neutral-400">{{ record.slug }}</td><td class="px-4 py-3 max-w-md text-gray-500 text-sm truncate dark:text-neutral-400">{{ record.description || 'No description' }}</td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ resource() === 'tags' ? record.postCount : record.active ? 'Active' : 'Inactive' }}</td><td class="px-4 py-3 text-right"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + singular() + ' ' + record.name" @click="openDelete(record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></td></tr></template></template>
-        </tbody>
-      </table>
-    </div>
+    <Table
+      :columns="columns()"
+      :data="visibleRecords()"
+      :loading="loading()"
+      :row-actions="ROW_ACTIONS"
+      action-label-key="name"
+      searchable
+      :search-placeholder="'Search ' + resource()"
+      paginated
+      :page-size="25"
+      :empty-title="'No ' + resource() + ' found'"
+      :empty-description="'Adjust the search or create a ' + singular() + '.'"
+      @row-action="handleRowAction"
+    />
   </section>
 </div>
 

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
@@ -20,7 +22,6 @@ interface PageDraft {
 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 saving = state(false)
@@ -40,10 +41,45 @@ function normalize(record: any): PageRecord {
   }
 }
 
+const COLUMNS = [
+  { key: 'title', label: 'Page', sortable: true, subtitleKey: 'template', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'viewsLabel', label: 'Traffic', subtitleKey: 'conversionsLabel', class: 'text-gray-500 dark:text-neutral-400' },
+  {
+    key: 'publishState',
+    label: 'Publishing',
+    type: 'badge' as const,
+    sortable: true,
+    // Coloured by state, labelled with the date it happened - which is why
+    // `badgeLabels` cannot express it.
+    badgeLabelKey: 'publishedLabel',
+    badgeClasses: {
+      published: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+      draft: 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700',
+    },
+  },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit page', icon: 'i-hugeicons-edit-02' },
+  { action: 'delete', label: 'Delete page', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+/** `UI/Table` owns the search; the cells each read a field, so derive them. */
 function visiblePages(): PageRecord[] {
-  const query = search().trim().toLowerCase()
-  return pages().filter(page => !query || [page.title, page.template]
-    .some(value => value.toLowerCase().includes(query)))
+  return pages().map(page => ({
+    ...page,
+    viewsLabel: `${formatNumber(page.views)} views`,
+    conversionsLabel: `${formatNumber(page.conversions)} conversions`,
+    publishState: page.publishedAt ? 'published' : 'draft',
+    publishedLabel: formatDate(page.publishedAt),
+  })) as PageRecord[]
+}
+
+function handleRowAction(payload: { action: string, row: PageRecord }): void {
+  if (payload.action === 'edit')
+    openEdit(payload.row)
+  else
+    openDelete(payload.row)
 }
 
 function totalViews(): number {
@@ -179,12 +215,20 @@ onMount(() => {
   </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>
+    <Table
+      :columns="COLUMNS"
+      :data="visiblePages()"
+      :loading="loading()"
+      :row-actions="ROW_ACTIONS"
+      action-label-key="title"
+      searchable
+      search-placeholder="Search pages"
+      paginated
+      :page-size="25"
+      empty-title="No pages found"
+      empty-description="Adjust the search or create a page."
+      @row-action="handleRowAction"
+    />
   </section>
 </div>
 

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script server>
 import { publicApplicationUrl } from '../../../../functions/public-application-url'
 
@@ -43,7 +45,6 @@ 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)
@@ -88,12 +89,55 @@ function normalizeAuthor(record: any): AuthorRecord {
   return { id: String(record?.id || ''), name: String(record?.name || ''), email: String(record?.email || '') }
 }
 
+const COLUMNS = [
+  // Two slotted columns, so the single `cell` slot dispatches on `column.key`:
+  // the title carries a featured star and two quieter lines, and taxonomy
+  // labels its two lines "Categories:" and "Tags:".
+  { key: 'title', label: 'Post', sortable: true, slotted: true, class: 'max-w-md' },
+  { key: 'categoriesLabel', label: 'Taxonomy', slotted: true, class: 'max-w-xs' },
+  {
+    key: 'status',
+    label: 'Publishing',
+    type: 'badge' as const,
+    sortable: true,
+    subtitleKey: 'publishedLabel',
+    badgeClasses: {
+      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',
+    },
+  },
+  { key: 'views', label: 'Views', type: 'number' as const, sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit post', icon: 'i-hugeicons-edit-02' },
+  { action: 'delete', label: 'Delete post', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+/**
+ * `UI/Table` owns the search, so this applies only the status filter. The
+ * labels are derived onto the row because a slot body reads fields rather than
+ * calling back into the component.
+ */
 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))),
-  )
+  return posts()
+    .filter(post => statusFilter() === 'all' || post.status === statusFilter())
+    .map(post => ({
+      ...post,
+      summaryLabel: post.excerpt || post.content,
+      authorLabel: authorName(post),
+      categoriesLabel: optionNames(post.categoryIds, categories()),
+      tagsLabel: optionNames(post.tagIds, tags()),
+      publishedLabel: formatDate(post.publishedAt),
+    })) as PostRecord[]
+}
+
+function handleRowAction(payload: { action: string, row: PostRecord }): void {
+  if (payload.action === 'edit')
+    openEdit(payload.row)
+  else
+    openDelete(payload.row)
 }
 
 function postCount(value: PostStatus): number {
@@ -115,14 +159,6 @@ function formatDate(value: string): string {
   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'
 }
@@ -224,12 +260,47 @@ onMount(() => { void loadPosts() })
   </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" x-tooltip="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>
+    <Table
+      :columns="COLUMNS"
+      :data="visiblePosts()"
+      :loading="loading()"
+      :row-actions="ROW_ACTIONS"
+      action-label-key="title"
+      searchable
+      search-placeholder="Search title, excerpt, or content"
+      paginated
+      :page-size="25"
+      empty-title="No posts found"
+      empty-description="Adjust the search or status filter."
+      @row-action="handleRowAction"
+    >
+      <template #toolbar>
+        <label>
+          <span class="sr-only">Filter by status</span>
+          <select x-model="statusFilter" class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600">
+            <option value="all">All statuses</option>
+            <option value="published">Published</option>
+            <option value="draft">Draft</option>
+            <option value="archived">Archived</option>
+          </select>
+        </label>
+      </template>
+
+      <template #cell="{ row, column }">
+        <template :if="column.key === 'title'">
+          <div class="flex gap-2 items-center">
+            <p class="font-medium text-gray-900 text-sm truncate dark:text-white" x-text="row.title"></p>
+            <span :if="row.featured" x-tooltip="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" x-text="row.summaryLabel"></p>
+          <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500" x-text="row.authorLabel"></p>
+        </template>
+        <template :else>
+          <p class="text-gray-500 text-xs truncate dark:text-neutral-400"><span class="font-medium text-gray-700 dark:text-neutral-200">Categories:</span> <span x-text="row.categoriesLabel"></span></p>
+          <p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400"><span class="font-medium text-gray-700 dark:text-neutral-200">Tags:</span> <span x-text="row.tagsLabel"></span></p>
+        </template>
+      </template>
+    </Table>
   </section>
 </div>
 

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

@@ -1,6 +1,8 @@
+@import('../UI/Table')
+
 <script client>
-import { dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
-import { pushToast } from '~/storage/framework/defaults/functions/toasts'
+import { dashboardApi } from '@stacksjs/defaults/functions/dashboard-api.ts'
+import { pushToast } from '@stacksjs/defaults/functions/toasts.ts'
 
 interface PostRow {
   id: number
@@ -117,6 +119,42 @@ const filteredEntries = derived(() => {
   })
 })
 
+/**
+ * The score pill is banded by range, not by value, so `badgeClasses` is keyed
+ * on a derived band and `badgeLabelKey` puts the number itself in the pill.
+ */
+const SEO_ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit SEO for', icon: 'i-hugeicons-edit-02' },
+]
+
+const SEO_COLUMNS = [
+  { key: 'title', label: 'Post', sortable: true, subtitleKey: 'postMetaLabel', class: 'font-medium text-neutral-900 dark:text-white' },
+  { key: 'focus_keyword', label: 'Focus keyword', sortable: true, emptyText: 'Not set', class: 'text-neutral-600 dark:text-neutral-300' },
+  { key: 'meta_description', label: 'Meta description', emptyText: 'Not set', class: 'max-w-md truncate text-neutral-600 dark:text-neutral-300' },
+  {
+    key: 'scoreBand',
+    label: 'Score',
+    type: 'badge' as const,
+    align: 'right' as const,
+    sortable: true,
+    badgeLabelKey: 'score',
+    badgeClasses: {
+      good: 'bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200',
+      medium: 'bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200',
+      poor: 'bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200',
+    },
+  },
+  { key: 'updatedLabel', label: 'Updated', sortable: true, class: 'whitespace-nowrap text-neutral-500 dark:text-neutral-400' },
+]
+
+/** The page's own filter bar still owns search and the score filter. */
+const seoRows = derived(() => filteredEntries().map(entry => ({
+  ...entry,
+  postMetaLabel: `Post #${entry.id} \u00B7 ${entry.status || 'unknown'}`,
+  scoreBand: entry.score >= 80 ? 'good' : entry.score >= 50 ? 'medium' : 'poor',
+  updatedLabel: formatDate(entry.updated_at || entry.created_at),
+})))
+
 const totalPosts = derived(() => entries().length)
 const optimizedCount = derived(() => entries().filter(entry => entry.score >= 80).length)
 const needsWorkCount = derived(() => entries().filter(entry => entry.score < 50).length)
@@ -126,15 +164,6 @@ const avgScore = derived(() => {
   return Math.round(entries().reduce((total, entry) => total + entry.score, 0) / entries().length)
 })
 
-function scoreBadgeClass(score: number): string {
-  const base = 'inline-flex items-center px-2 py-0.5 font-semibold text-xs rounded-full'
-  if (score >= 80)
-    return `${base} bg-green-100 text-green-800 dark:bg-green-900/50 dark:text-green-200`
-  if (score >= 50)
-    return `${base} bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200`
-  return `${base} bg-red-100 text-red-800 dark:bg-red-900/50 dark:text-red-200`
-}
-
 function formatDate(value?: string | null): string {
   if (!value)
     return 'Not updated'
@@ -261,54 +290,27 @@ void loadEntries()
   @endif
 
   <Card variant="default" padding="none">
-    @if(loading())
-      <div class="flex items-center justify-center min-h-64 text-neutral-500 text-sm dark:text-neutral-400">
-        <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-        Loading post metadata
-      </div>
-    @elseif(filteredEntries().length === 0)
-      <div class="px-6 py-14 text-center">
-        <span class="inline-block h-8 w-8 text-neutral-400 i-hugeicons-search-remove"></span>
-        <h2 class="mt-3 font-semibold text-neutral-900 dark:text-white">No matching posts</h2>
-        <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">Adjust the search or score filter, or create a CMS post first.</p>
-      </div>
-    @else
-      <div class="overflow-x-auto">
-        <table class="min-w-full divide-neutral-200/60 divide-y dark:divide-white/5">
-          <thead class="bg-neutral-50 dark:bg-white/[0.03]">
-            <tr>
-              <th class="px-4 py-3 font-semibold text-left text-neutral-700 text-xs dark:text-neutral-300">Post</th>
-              <th class="px-4 py-3 font-semibold text-left text-neutral-700 text-xs dark:text-neutral-300">Focus keyword</th>
-              <th class="px-4 py-3 font-semibold text-left text-neutral-700 text-xs dark:text-neutral-300">Meta description</th>
-              <th class="px-4 py-3 font-semibold text-neutral-700 text-right text-xs dark:text-neutral-300">Score</th>
-              <th class="px-4 py-3 font-semibold text-left text-neutral-700 text-xs dark:text-neutral-300">Updated</th>
-              <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
-            </tr>
-          </thead>
-          <tbody class="divide-neutral-200/60 divide-y dark:divide-white/5">
-            <template :for="entry in filteredEntries">
-              <tr class="hover:bg-neutral-50 dark:hover:bg-white/[0.03]">
-                <td class="px-4 py-4">
-                  <div class="font-medium text-neutral-900 text-sm dark:text-white">{{ entry.title }}</div>
-                  <div class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Post #{{ entry.id }} · {{ entry.status || 'unknown' }}</div>
-                </td>
-                <td class="px-4 py-4 text-neutral-600 text-sm dark:text-neutral-300">{{ entry.focus_keyword || 'Not set' }}</td>
-                <td class="px-4 py-4">
-                  <div class="max-w-md text-neutral-600 text-sm truncate dark:text-neutral-300">{{ entry.meta_description || 'Not set' }}</div>
-                </td>
-                <td class="px-4 py-4 text-right">
-                  <span :class="scoreBadgeClass(entry.score)">{{ entry.score }}</span>
-                </td>
-                <td class="px-4 py-4 text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(entry.updated_at || entry.created_at) }}</td>
-                <td class="px-4 py-4 text-right">
-                  <Button variant="ghost" size="sm" @click="openEdit(entry)">Edit</Button>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
-    @endif
+    {{-- `UI/Table` renders its own loading and empty states, so the three-way
+         block this replaced is gone.
+
+         The edit control is a declarative `rowActions` icon rather than the
+         `actions` slot, which would have kept the "Edit" wording. The slot
+         hangs the page render outright on the installed stx - verified by
+         adding one to a working table, watching `/dependencies` stop
+         responding, and removing it again. See stacksjs/stx#2101. --}}
+    <Table
+      :columns="SEO_COLUMNS"
+      :data="seoRows()"
+      :loading="loading()"
+      row-key="id"
+      paginated
+      :page-size="25"
+      empty-title="No matching posts"
+      empty-description="Adjust the search or score filter, or create a CMS post first."
+      :row-actions="SEO_ROW_ACTIONS"
+      action-label-key="title"
+      @row-action="openEdit($event.row)"
+    />
   </Card>
 
   <SeoEditorDialog

package/resources/components/Dashboard/Email/InboxSettingsDashboard.stx

@@ -262,9 +262,9 @@ import type {
   MailTheme,
   NotificationSound,
   ReplyBehavior,
-} from '~/storage/framework/defaults/functions/mail-preferences'
-import { fetchInboxActivity } from '~/storage/framework/defaults/functions/inbox'
-import { fetchMailPreference, saveMailPreference } from '~/storage/framework/defaults/functions/mail-preferences'
+} from '@stacksjs/defaults/functions/mail-preferences.ts'
+import { fetchInboxActivity } from '@stacksjs/defaults/functions/inbox.ts'
+import { fetchMailPreference, saveMailPreference } from '@stacksjs/defaults/functions/mail-preferences.ts'
 
 interface SettingsSection {
   id: string

package/resources/components/Dashboard/Environment/EnvironmentDashboard.stx

@@ -1,5 +1,5 @@
 <script client>
-import { DashboardApiError, dashboardApi } from '~/storage/framework/defaults/functions/dashboard-api'
+import { DashboardApiError, dashboardApi } from '@stacksjs/defaults/functions/dashboard-api.ts'
 
 interface EnvironmentFileIssue {
   line: number

package/resources/components/Dashboard/Home/DashboardHome.stx

@@ -4,13 +4,20 @@ import { useDashboard } from '../../../../functions/dashboard'
 const dashboard = useDashboard()
 const loadingCards = [1, 2, 3, 4]
 
-const quickLinks = [
+/**
+ * `section` names the feature-backed dashboard section a card belongs to.
+ * A card with one is only offered when the server says that section exists -
+ * otherwise the home page links to pages the sidebar has hidden and that
+ * cannot load. See stacksjs/stacks#2928.
+ */
+const allQuickLinks = [
   {
     title: 'Blog',
     description: 'Manage persisted posts',
     href: '/content/dashboard',
     icon: 'i-hugeicons-book-open-01',
     tone: 'blue',
+    section: 'content',
   },
   {
     title: 'Commerce',
@@ -18,6 +25,7 @@ const quickLinks = [
     href: '/commerce/dashboard',
     icon: 'i-hugeicons-store-01',
     tone: 'green',
+    section: 'commerce',
   },
   {
     title: 'Cloud',
@@ -35,6 +43,16 @@ const quickLinks = [
   },
 ]
 
+/**
+ * Cards without a `section` are always offered. A card with one waits for the
+ * server to say that section exists, so the home page never links to a
+ * section the sidebar has hidden and whose pages cannot load.
+ */
+function quickLinks() {
+  const available = dashboard.sections.value
+  return allQuickLinks.filter(link => !link.section || available[link.section] !== false)
+}
+
 const resourceLinks = [
   {
     title: 'Documentation',
@@ -153,7 +171,7 @@ onMount(() => {
     </div>
   </section>
 
-  <QuickLinks class="mb-8" :links="quickLinks" />
+  <QuickLinks class="mb-8" :links="quickLinks()" />
 
   <div class="grid gap-6 grid-cols-1 lg:grid-cols-2 mt-8">
     <ServiceHealth :services="services()" :loading="dashboard.isLoading.value" />

package/resources/components/Dashboard/Kanban/KanbanBoardDashboard.stx

@@ -12,9 +12,9 @@
   // Both column reorder (drag the column header) and card reorder
   // (drag the card body) share the same /cards/reorder + /columns/reorder
   // mutations on the store.
-  import { useNavigation } from '~/storage/framework/defaults/views/dashboard/composables/useNavigation'
-  import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
-  import { kanbanStore } from '~/storage/framework/defaults/views/dashboard/stores/kanban'
+  import { useNavigation } from '@stacksjs/defaults/views/dashboard/composables/useNavigation.ts'
+  import { useRole } from '@stacksjs/defaults/views/dashboard/composables/useRole.ts'
+  import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban.ts'
 
   // The component owns its store dependency. Importing the definition creates
   // and registers the singleton before this component controller executes,

package/resources/components/Dashboard/Kanban/KanbanBoardsDashboard.stx

@@ -5,8 +5,8 @@
   // Follows #1838 conventions: no <script server>, no vanilla DOM
   // reads, all state via the store. Role gate via useRole() - the
   // surface is dev-mode-only (admins + devs see it, clients don't).
-  import { useRole } from '~/storage/framework/defaults/views/dashboard/composables/useRole'
-  import { kanbanStore } from '~/storage/framework/defaults/views/dashboard/stores/kanban'
+  import { useRole } from '@stacksjs/defaults/views/dashboard/composables/useRole.ts'
+  import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban.ts'
 
   // Keep the page component self-contained: the imported store definition is
   // registered before this controller runs on both direct and SPA navigation.

package/resources/components/Dashboard/Kanban/KanbanCardDialog.stx

@@ -1,5 +1,5 @@
 <script client>
-import { kanbanStore } from '~/storage/framework/defaults/views/dashboard/stores/kanban'
+import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban.ts'
 import { useTimeoutFn } from '@stacksjs/composables'
 
 const kanban = kanbanStore