@stacksjs/defaults 0.75.244 → 0.75.246

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'
+import { pushToast } from '@stacksjs/defaults/functions/toasts'
 
 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'
+import { fetchInboxActivity } from '@stacksjs/defaults/functions/inbox'
+import { fetchMailPreference, saveMailPreference } from '@stacksjs/defaults/functions/mail-preferences'
 
 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'
 
 interface EnvironmentFileIssue {
   line: number

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'
+  import { useRole } from '@stacksjs/defaults/views/dashboard/composables/useRole'
+  import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban'
 
   // 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'
+  import { kanbanStore } from '@stacksjs/defaults/views/dashboard/stores/kanban'
 
   // 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'
 import { useTimeoutFn } from '@stacksjs/composables'
 
 const kanban = kanbanStore

package/resources/components/Dashboard/Library/ComponentsDashboard.stx

@@ -1,4 +1,5 @@
 @import('../UI/Button')
+@import('../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -25,18 +26,28 @@ const totalBytes = state(0)
 const sourceRoot = state('resources/components')
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const selectedCategory = state('All')
 const dialogOpen = state(false)
 const saving = state(false)
 const saveError = state('')
 
-function visibleComponents(): ComponentRow[] {
-  const query = search().trim().toLowerCase()
-  return components().filter(component => (
-    (selectedCategory() === 'All' || component.category === selectedCategory())
-    && (!query || [component.name, component.path, component.category].some(value => value.toLowerCase().includes(query)))
-  ))
+const COLUMNS = [
+  { key: 'name', label: 'Component', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  // A neutral pill with no per-value styling, which is what a badge column
+  // renders when it is given no `badgeClasses`.
+  { key: 'category', label: 'Category', type: 'badge' as const, sortable: true },
+  { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-xs text-gray-500 dark:text-neutral-400' },
+  // `sizeLabel` is what the cell shows; `bytes` stays on the row so a future
+  // numeric sort has something to read.
+  { key: 'sizeLabel', label: 'Size', sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+  { key: 'updatedAt', label: 'Updated', type: 'datetime' as const, sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+]
+
+/** `UI/Table` owns the search, so this applies only the category filter. */
+function visibleComponents(): Array<ComponentRow & { sizeLabel: string }> {
+  return components()
+    .filter(component => selectedCategory() === 'All' || component.category === selectedCategory())
+    .map(component => ({ ...component, sizeLabel: formatBytes(component.bytes) }))
 }
 
 function formatBytes(bytes: number): string {
@@ -45,13 +56,6 @@ function formatBytes(bytes: number): string {
   return `${(bytes / 1024).toFixed(1)} kB`
 }
 
-function formatDate(value: string): string {
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
 async function loadComponents(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -167,73 +171,35 @@ onMount(() => {
   </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 min-w-0">
-        <span class="sr-only">Search components</span>
-        <input
-          x-model="search"
-          type="search"
-          placeholder="Search name, category, or path"
-          class="px-3 py-2 max-w-lg 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 category</span>
-        <select
-          x-model="selectedCategory"
-          aria-label="Filter by category"
-          class="px-3 py-2 w-full sm:w-48 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 :for="category in categories()" :value="category">{{ category }}</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">Component</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Category</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Path</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Size</th>
-            <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Updated</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>
-                Scanning component sources
-              </td>
-            </tr>
-          </template>
-          <template :else-if="visibleComponents().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-layout-table-01"></span>
-                <p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No components found</p>
-                <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create a component or adjust the filters.</p>
-              </td>
-            </tr>
-          </template>
-          <template :else>
-            <template :for="component in visibleComponents()">
-              <tr>
-                <td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ component.name }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">
-                  <span class="px-2 py-1 text-xs bg-gray-100 dark:bg-neutral-700 rounded-full" :text="component.category"></span>
-                </td>
-                <td class="px-4 py-3 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ component.path }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatBytes(component.bytes) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatDate(component.updatedAt) }}</td>
-              </tr>
-            </template>
-          </template>
-        </tbody>
-      </table>
-    </div>
+    <Table
+      :columns="COLUMNS"
+      :data="visibleComponents()"
+      :loading="loading()"
+      row-key="path"
+      searchable
+      search-placeholder="Search name, category, or path"
+      paginated
+      :page-size="25"
+      empty-title="No components found"
+      empty-description="Adjust the search or category filter."
+    >
+      <template #toolbar>
+        <label>
+          <span class="sr-only">Filter by category</span>
+          {{-- `x-text` rather than `{{ category }}`: an interpolation inside
+               slot content is preserved but never evaluated on the installed
+               stx, while the attribute forms read the loop variable fine.
+               See stacksjs/stx#2095. --}}
+          <select
+            x-model="selectedCategory"
+            aria-label="Filter by category"
+            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 :for="category in categories()" :value="category" x-text="category"></option>
+          </select>
+        </label>
+      </template>
+    </Table>
   </section>
 </div>
 

package/resources/components/Dashboard/Library/FunctionsDashboard.stx

@@ -1,4 +1,5 @@
 @import('../UI/Button')
+@import('../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -18,14 +19,21 @@ const totalBytes = state(0)
 const sourceRoot = state('resources/functions')
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const dialogOpen = state(false)
 const saving = state(false)
 const saveError = state('')
 
-function visibleFunctions(): FunctionRow[] {
-  const query = search().trim().toLowerCase()
-  return functions().filter(fn => !query || [fn.name, fn.path, fn.extension].some(value => value.toLowerCase().includes(query)))
+const COLUMNS = [
+  { key: 'name', label: 'Function', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-xs text-gray-500 dark:text-neutral-400' },
+  // `bytes` so it sorts numerically; `sizeLabel` is what the cell shows.
+  { key: 'sizeLabel', label: 'Size', sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+  { key: 'updatedAt', label: 'Updated', type: 'datetime' as const, sortable: true, class: 'text-gray-500 dark:text-neutral-400' },
+]
+
+/** `UI/Table` owns the search, so this only shapes the rows it reads. */
+function visibleFunctions(): Array<FunctionRow & { sizeLabel: string }> {
+  return functions().map(fn => ({ ...fn, sizeLabel: formatBytes(fn.bytes) }))
 }
 
 function formatBytes(bytes: number): string {
@@ -34,11 +42,6 @@ function formatBytes(bytes: number): string {
   return `${(bytes / 1024).toFixed(1)} kB`
 }
 
-function formatDate(value: string): string {
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat('en-US', { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
-
 async function loadFunctions(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -107,12 +110,18 @@ onMount(() => { void loadFunctions() })
   </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 functions</span><input x-model="search" type="search" placeholder="Search name or path" 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">Function</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Path</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Size</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Updated</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>Scanning function sources</td></tr></template>
-      <template :else-if="visibleFunctions().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-function"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No functions found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create a function or adjust the search.</p></td></tr></template>
-      <template :else><template :for="fn in visibleFunctions()"><tr><td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ fn.name }}</td><td class="px-4 py-3 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ fn.path }}</td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatBytes(fn.bytes) }}</td><td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-400">{{ formatDate(fn.updatedAt) }}</td></tr></template></template>
-    </tbody></table></div>
+    <Table
+      :columns="COLUMNS"
+      :data="visibleFunctions()"
+      :loading="loading()"
+      row-key="path"
+      searchable
+      search-placeholder="Search name or path"
+      paginated
+      :page-size="25"
+      empty-title="No functions found"
+      empty-description="Create a function or adjust the search."
+    />
   </section>
 </div>