@stacksjs/defaults 0.75.263 → 0.75.264

package/ai/skills/stacks-browse/SKILL.md

@@ -121,6 +121,7 @@ On a failed step, execution stops and the report retains its number and error,
 the completed steps, final page state and requested screenshot.
 Use `{"action":"assert","selector":"...","absent":true}` to verify that an element is missing or hidden after an interaction.
 Use `{"action":"assert","selector":"button","text":"Save","focused":true}` to verify keyboard focus and focus restoration.
+For asynchronous results, use `{"action":"assert","selector":"button","text":"Sound on","timeoutMs":2000}`. This observes the actual visible result until it matches or the bounded budget expires. Ordinary assertions remain immediate. Only assertions accept `timeoutMs`, an integer from 0 to 30000; protocol and evaluation failures are not retried.
 
 ### Crawl (whole-site browser audit)
 ```bash

package/ai/skills/stacks-browse/scripts/browse.ts

@@ -600,9 +600,12 @@ interface ScenarioStep {
   key?: string
   ms?: number
   settle?: number
+  timeoutMs?: number
 }
 
-function parseScenarioStep(value: string): ScenarioStep {
+class ScenarioAssertionError extends Error {}
+
+export function parseScenarioStep(value: string): ScenarioStep {
   let parsed: unknown
   try {
     parsed = JSON.parse(value)
@@ -633,11 +636,41 @@ function parseScenarioStep(value: string): ScenarioStep {
     throw new TypeError('Scenario action "press" requires a key.')
   if (action === 'wait' && (!Number.isFinite(step.ms) || Number(step.ms) < 0 || Number(step.ms) > 30_000))
     throw new TypeError('Scenario action "wait" requires ms between 0 and 30000.')
+  if (step.timeoutMs !== undefined && (action !== 'assert' || !Number.isSafeInteger(step.timeoutMs) || Number(step.timeoutMs) < 0 || Number(step.timeoutMs) > 30_000))
+    throw new TypeError('Scenario timeoutMs is supported only by assert actions and must be an integer between 0 and 30000.')
 
   return step as unknown as ScenarioStep
 }
 
-async function runScenarioStep(cdp: Cdp, step: ScenarioStep): Promise<Record<string, unknown>> {
+export async function runScenarioStep(cdp: Pick<Cdp, 'send'>, step: ScenarioStep): Promise<Record<string, unknown>> {
+  if (step.action === 'assert' && step.timeoutMs) {
+    const deadline = performance.now() + step.timeoutMs
+    let last: ScenarioAssertionError | undefined
+    const expired = () => new Error(`${last?.message || `Scenario assert failed (${step.selector || ''})`}; timed out after ${step.timeoutMs}ms`)
+    while (true) {
+      const budget = deadline - performance.now()
+      if (budget <= 0) throw expired()
+      let timeout: ReturnType<typeof setTimeout> | undefined
+      try {
+        const expiry = Promise.withResolvers<never>()
+        timeout = setTimeout(() => expiry.reject(expired()), budget)
+        const answer = await Promise.race([
+          runScenarioStep(cdp, { ...step, timeoutMs: 0 }),
+          expiry.promise,
+        ])
+        if (performance.now() > deadline) throw expired()
+        return answer
+      }
+      catch (error) {
+        if (!(error instanceof ScenarioAssertionError)) throw error
+        last = error
+        const remaining = deadline - performance.now()
+        if (remaining <= 0) throw error
+        await Bun.sleep(Math.min(50, remaining))
+      }
+      finally { if (timeout !== undefined) clearTimeout(timeout) }
+    }
+  }
   if (step.action === 'wait') {
     await Bun.sleep(Number(step.ms))
     return { action: step.action, ms: Number(step.ms), ok: true }
@@ -740,8 +773,11 @@ async function runScenarioStep(cdp: Cdp, step: ScenarioStep): Promise<Record<str
     returnByValue: true,
   })
   const value = result.result?.value as Record<string, unknown> | undefined
-  if (!value?.ok)
+  if (!value?.ok) {
+    if (step.action === 'assert' && value)
+      throw new ScenarioAssertionError(`Scenario assert failed: ${String(value.error || 'unknown error')} (${step.selector || ''})`)
     throw new Error(`Scenario ${step.action} failed: ${String(value?.error || 'unknown error')} (${step.selector || step.key || ''})`)
+  }
   if (step.action === 'click') {
     const point = value.clickPoint as { x: number, y: number }
     await cdp.send('Input.dispatchMouseEvent', { type: 'mousePressed', x: point.x, y: point.y, button: 'left', clickCount: 1 })
@@ -1196,7 +1232,7 @@ async function main() {
   }
 }
 
-main().catch((e) => {
+if (import.meta.main) main().catch((e) => {
   console.error('browse error:', e?.message || e)
   process.exit(1)
 })

package/ai/skills/stacks-native/CATALOG.md

@@ -21,7 +21,7 @@ Browser runtime bindings are documented separately in `stacks-auto-imports`.
 | `@stacksjs/auth` | [`stacks-auth`](../stacks-auth/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/auth/src/index.ts) | 119 |
 | `@stacksjs/browser` | [`stacks-browser`](../stacks-browser/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/browser/src/index.ts) | 8 |
 | `@stacksjs/browser-extension` | [`stacks-browser-extension`](../stacks-browser-extension/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/browser-extension/src/index.ts) | 7 |
-| `@stacksjs/buddy` | [`stacks-buddy`](../stacks-buddy/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/index.ts) | 161 |
+| `@stacksjs/buddy` | [`stacks-buddy`](../stacks-buddy/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/index.ts) | 162 |
 | `@stacksjs/build` | [`stacks-build`](../stacks-build/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/build/src/index.ts) | 3 |
 | `@stacksjs/cache` | [`stacks-cache`](../stacks-cache/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/cache/src/index.ts) | 14 |
 | `@stacksjs/calendar-api` | [`stacks-calendar`](../stacks-calendar/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/calendar-api/src/index.ts) | 2 |
@@ -215,7 +215,7 @@ Read the entrypoint and package export map for re-exported or type-only surfaces
 
 Local source modules: [src/commands/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/commands/index.ts).
 
-Evidence directory: [161 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [162 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/build
 

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.263",
+  "version": "0.75.264",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.263",
+  "version": "0.75.264",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.263",
-    "@stacksjs/sanitizer": "0.2.661",
-    "@stacksjs/stx": "0.2.661",
+    "@stacksjs/mobile": "0.75.264",
+    "@stacksjs/sanitizer": "0.2.663",
+    "@stacksjs/stx": "0.2.663",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

package/resources/components/Dashboard/Auth/AccessTokens.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { authStore } from '../../../../views/dashboard/stores/auth'
@@ -59,11 +61,31 @@ function tokenStatus(token: AccessTokenRow): 'active' | 'expired' {
   return new Date(token.expires_at).getTime() <= Date.now() ? 'expired' : 'active'
 }
 
-function statusClass(token: AccessTokenRow): string {
-  return tokenStatus(token) === 'active'
-    ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
-    : 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
-}
+const TOKEN_COLUMNS = [
+  { key: 'name', label: 'Token', sortable: true, subtitleKey: 'createdLabel', class: 'font-medium text-neutral-900 dark:text-white' },
+  { key: 'scopesLabel', label: 'Scopes', slotted: true },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+      expired: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+    },
+    badgeLabels: { active: 'Active', expired: 'Expired' },
+  },
+  { key: 'expires_at', label: 'Expires', align: 'right' as const, sortable: true, slotted: true, searchable: false },
+]
+
+const tokenRows = derived(() => tokens().map(token => ({
+  ...token,
+  createdLabel: `Created ${formatDate(token.created_at)}`,
+  // Searchable text for the scope pills the cell draws.
+  scopesLabel: token.scopes.join(' '),
+  status: tokenStatus(token),
+  expiresLabel: formatDate(token.expires_at),
+})))
 
 function formatDate(value: string | null): string {
   if (!value)
@@ -270,38 +292,36 @@ onMount(() => {
       </template>
     </EmptyState>
 
-    <div :if="!loading() && !authenticationRequired() && tokens().length > 0" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
-          <tr>
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Token</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Scopes</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Expires</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Action</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <tr :for="token in tokens()">
-            <td class="pl-5 pr-4 py-3.5">
-              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ token.name }}</p>
-              <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Created {{ formatDate(token.created_at) }}</p>
-            </td>
-            <td class="px-4 py-3.5">
-              <div class="flex flex-wrap gap-1">
-                <span :for="scope in token.scopes" class="inline-flex px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded">{{ scope }}</span>
-              </div>
-            </td>
-            <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs capitalize rounded ' + statusClass(token)">{{ tokenStatus(token) }}</span></td>
-            <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(token.expires_at) }}</td>
-            <td class="pr-5 py-3.5 text-right whitespace-nowrap">
-              <Button variant="danger" size="sm" :loading="revoking() === token.id" @click="confirmingRevoke.set(token.id)">
-                {{ revoking() === token.id ? 'Revoking...' : 'Revoke' }}
-              </Button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    {{--
+      The page keeps its loading, sign-in and empty states; the table brings
+      sorting and paging. Scopes are slotted for their pills and expiry for
+      "Never", so it sorts on the date itself.
+    --}}
+    <div :if="!loading() && !authenticationRequired() && tokens().length > 0">
+      <Table :columns="TOKEN_COLUMNS" :data="tokenRows()" paginated :page-size="25">
+        <template #cell="{ row, column }">
+          <template :if="column.key === 'scopesLabel'">
+            <div class="flex flex-wrap gap-1">
+              <template :for="scope in row.scopes" :key="scope">
+                <span class="inline-flex px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded" x-text="scope"></span>
+              </template>
+            </div>
+          </template>
+          <template :else>
+            <span class="text-neutral-500 text-xs whitespace-nowrap dark:text-neutral-400" x-text="row.expiresLabel"></span>
+          </template>
+        </template>
+        <template #actions="{ row }">
+          <div class="text-right whitespace-nowrap">
+            <template :if="revoking() === row.id">
+              <Button variant="danger" size="sm" loading>Revoking...</Button>
+            </template>
+            <template :else>
+              <Button variant="danger" size="sm" @click="confirmingRevoke.set(row.id)">Revoke</Button>
+            </template>
+          </div>
+        </template>
+      </Table>
     </div>
   </Card>
 

package/resources/components/Dashboard/Billing/BillingTransactionHistory.stx

@@ -1,13 +1,27 @@
+@import('../UI/Table')
+
 <script client>
 import type { BillingTransaction } from '../../../../functions/billing/dashboard'
 
 const transactions = useReactiveProp('transactions', [] as BillingTransaction[])
 
-function amount(transaction: BillingTransaction): string {
-  if (transaction.amount === null)
-    return 'Not reported'
-  return `${new Intl.NumberFormat().format(transaction.amount)} minor units`
-}
+const COLUMNS = [
+  { key: 'name', label: 'Transaction', sortable: true, emptyText: 'Unnamed transaction', subtitleKey: 'description', class: 'font-medium text-gray-900 max-w-lg dark:text-white' },
+  {
+    key: 'typeLabel',
+    label: 'Type',
+    type: 'badge' as const,
+    sortable: true,
+  },
+  { key: 'amountLabel', label: 'Amount', class: 'whitespace-nowrap', searchable: false },
+  { key: 'providerId', label: 'Provider reference', emptyText: 'Not reported', class: 'font-mono text-xs' },
+]
+
+const rows = derived(() => transactions().map(transaction => ({
+  ...transaction,
+  typeLabel: (transaction.type || 'unknown').replace(/\b\w/g, letter => letter.toUpperCase()),
+  amountLabel: transaction.amount === null ? 'Not reported' : `${new Intl.NumberFormat().format(transaction.amount)} minor units`,
+})))
 </script>
 
 <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
@@ -19,32 +33,12 @@ function amount(transaction: BillingTransaction): string {
     <span class="h-5 w-5 text-gray-400 i-hugeicons-transaction-history"></span>
   </header>
 
-  <div :if="transactions().length === 0" class="px-6 py-14 text-center">
-    <span class="inline-block h-7 w-7 text-gray-400 i-hugeicons-receipt-dollar"></span>
-    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No transactions recorded</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Successful persisted billing transactions will appear here.</p>
-  </div>
-
-  <div :else 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 scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Transaction</th>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Type</th>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Amount</th>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Provider reference</th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="transaction in transactions()" :key="transaction.id">
-          <tr>
-            <td class="px-5 py-4 max-w-lg"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ transaction.name || 'Unnamed transaction' }}</p><p :if="transaction.description" class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ transaction.description }}</p></td>
-            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ transaction.type || 'unknown' }}</span></td>
-            <td class="px-5 py-4 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ amount(transaction) }}</td>
-            <td class="px-5 py-4 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ transaction.providerId || 'Not reported' }}</td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
+  <Table
+    :columns="COLUMNS"
+    :data="rows()"
+    paginated
+    :page-size="25"
+    empty-title="No transactions recorded"
+    empty-description="Successful persisted billing transactions will appear here."
+  />
 </section>

package/resources/components/Dashboard/Commerce/CommercePaymentsTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import { formatCurrency } from '@stacksjs/commerce/money'
@@ -6,61 +8,95 @@ const records = useReactiveProp('records', [] as PaymentRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
+/** `partiallyRefunded` and `bank_transfer` as words, each capitalized. */
 function label(value: string): string {
-  return value.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-}
-
-function money(value: number, currency: string): string {
-  return formatCurrency(value, currency)
-}
-
-function date(value: string): string {
-  const parsed = new Date(value.includes('T') ? value : value.replace(' ', 'T'))
-  return !value || Number.isNaN(parsed.getTime())
-    ? 'Unknown'
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(parsed)
+  return value.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ').replace(/\b\w/g, letter => letter.toUpperCase())
 }
 
-function statusClass(status: string): string {
+/**
+ * The status pill's colour, which is a tone rather than the status itself so
+ * that every status the ledger has not named still reads as pending, as the
+ * hand-rolled pill did.
+ */
+function statusTone(status: string): string {
   if (status === 'completed' || status === 'succeeded')
-    return 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40'
+    return 'settled'
   if (status === 'failed')
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+    return 'failed'
   if (status === 'refunded' || status === 'partiallyRefunded')
-    return 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40'
-  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'refunded'
+  return 'pending'
+}
+
+/**
+ * Only the amount is slotted, for its refund line, whose colour says whether
+ * the refund was recorded. The rest are values with a second line, which is
+ * `subtitleKey`.
+ */
+const COLUMNS = [
+  { key: 'paymentLabel', label: 'Payment', sortable: true, subtitleKey: 'referenceLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'billingLabel', label: 'Billing', sortable: true, subtitleKey: 'orderLabel' },
+  { key: 'amount', label: 'Amount', sortable: true, slotted: true },
+  // Capitalized in `label()` rather than with a class, which would reach the
+  // processor line beneath it too.
+  { key: 'methodLabel', label: 'Method', sortable: true, subtitleKey: 'processorLabel' },
+  {
+    key: 'statusTone',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'statusLabel',
+    badgeClasses: {
+      settled: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40',
+      failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      refunded: 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40',
+      pending: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View payment', icon: 'i-hugeicons-view' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  paymentLabel: `#${record.id}`,
+  referenceLabel: record.referenceNumber || record.transactionId || 'No reference',
+  billingLabel: record.billingEmail || 'No billing email',
+  orderLabel: record.orderId ? `Order #${record.orderId}` : 'No linked order',
+  amountLabel: formatCurrency(record.amount, record.currency),
+  refundLabel: record.refundAmount > 0 ? `Refunded ${formatCurrency(record.refundAmount, record.currency)}` : '',
+  refundMissing: record.refundAmount <= 0 && record.status === 'refunded' && !record.refundRecorded,
+  methodLabel: label(record.method),
+  processorLabel: record.cardBrand || record.cardLastFour
+    ? [record.cardBrand, record.cardLastFour].filter(Boolean).join(' · ')
+    : record.paymentProvider || 'No processor details',
+  statusTone: statusTone(record.status),
+  statusLabel: label(record.status),
+})))
+
+function handleRowAction(payload: { action: string, row: PaymentRecord }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <div :if="loading() && records().length === 0" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>Loading payments</div>
-  <div :else-if="records().length === 0" class="px-6 py-16 text-center"><span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-credit-card"></span><p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No payments found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters to inspect another part of the native ledger.</p></div>
-  <div :else 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 scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Payment</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Billing</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Amount</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Method</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Status</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Created</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs dark:text-neutral-300"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">#{{ record.id }}</p><p class="mt-1 max-w-44 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.referenceNumber || record.transactionId || 'No reference' }}</p></td>
-            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.billingEmail || 'No billing email' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.orderId ? 'Order #' + record.orderId : 'No linked order' }}</p></td>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ money(record.amount, record.currency) }}</p><p :if="record.refundAmount > 0" class="mt-1 text-violet-600 text-xs dark:text-violet-300">Refunded {{ money(record.refundAmount, record.currency) }}</p><p :else-if="record.status === 'refunded' && !record.refundRecorded" class="mt-1 text-amber-600 text-xs dark:text-amber-300">Refund amount not recorded</p></td>
-            <td class="px-4 py-4"><p class="capitalize text-gray-700 text-sm dark:text-neutral-200">{{ label(record.method) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.cardBrand }}<span :if="record.cardLastFour"> · {{ record.cardLastFour }}</span><span :if="!record.cardBrand && !record.cardLastFour">{{ record.paymentProvider || 'No processor details' }}</span></p></td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(record.status)">{{ label(record.status) }}</span></td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ date(record.createdAt) }}</td>
-            <td class="px-4 py-4 text-right"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View payment ' + record.id" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="id"
+  paginated
+  :page-size="25"
+  empty-title="No payments found"
+  empty-description="Adjust the filters to inspect another part of the native ledger."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.amountLabel"></p>
+    <p :if="row.refundLabel" class="mt-1 text-violet-600 text-xs dark:text-violet-300" x-text="row.refundLabel"></p>
+    <p :if="row.refundMissing" class="mt-1 text-amber-600 text-xs dark:text-amber-300">Refund amount not recorded</p>
+  </template>
+</Table>