@stacksjs/defaults 0.75.241 → 0.75.243

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

@@ -1,6 +1,6 @@
 ---
 name: stacks-actions
-description: Use when working with Stacks server actions - creating actions in app/Actions/, auto-generated API actions from the useApi model trait, the 672 default framework actions (auth, dashboard, commerce, content, deployment, jobs), action request/response handling, or action registration. Covers @stacksjs/actions and storage/framework/defaults/app/Actions/.
+description: Use when working with Stacks server actions - creating actions in app/Actions/, auto-generated API actions from the useApi model trait, the 673 default framework actions (auth, dashboard, commerce, content, deployment, jobs), action request/response handling, or action registration. Covers @stacksjs/actions and storage/framework/defaults/app/Actions/.
 license: MIT
 compatibility: Bun >= 1.3.0, TypeScript
 allowed-tools: Read Edit Write Bash Grep Glob

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

@@ -11,7 +11,7 @@ Browser runtime bindings are documented separately in `stacks-auto-imports`.
 | Package | Task guidance | Source entry | Retained tests |
 |---|---|---|---|
 | `@stacksjs/action-runner` | [`stacks-actions`](../stacks-actions/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/action-runner/src/index.ts) | 1 |
-| `@stacksjs/actions` | [`stacks-actions`](../stacks-actions/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/index.ts) | 74 |
+| `@stacksjs/actions` | [`stacks-actions`](../stacks-actions/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/index.ts) | 75 |
 | `@stacksjs/ai` | [`stacks-ai`](../stacks-ai/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/ai/src/index.ts) | 17 |
 | `@stacksjs/alias` | [`stacks-alias`](../stacks-alias/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/alias/src/index.ts) | 1 |
 | `@stacksjs/analytics` | [`stacks-analytics`](../stacks-analytics/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/analytics/src/index.ts) | 6 |
@@ -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) | 151 |
+| `@stacksjs/buddy` | [`stacks-buddy`](../stacks-buddy/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/buddy/src/index.ts) | 152 |
 | `@stacksjs/build` | [`stacks-build`](../stacks-build/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/build/src/index.ts) | 2 |
 | `@stacksjs/cache` | [`stacks-cache`](../stacks-cache/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/cache/src/index.ts) | 11 |
 | `@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 |
@@ -65,7 +65,7 @@ Browser runtime bindings are documented separately in `stacks-auto-imports`.
 | `@stacksjs/newsletter` | [`stacks-newsletter`](../stacks-newsletter/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/newsletter/src/index.ts) | 7 |
 | `@stacksjs/notifications` | [`stacks-notifications`](../stacks-notifications/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/notifications/src/index.ts) | 16 |
 | `@stacksjs/objects` | [`stacks-objects`](../stacks-objects/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/objects/src/index.ts) | 4 |
-| `@stacksjs/orm` | [`stacks-orm`](../stacks-orm/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/index.ts) | 62 |
+| `@stacksjs/orm` | [`stacks-orm`](../stacks-orm/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/index.ts) | 63 |
 | `@stacksjs/pagination` | [`stacks-pagination`](../stacks-pagination/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/pagination/src/index.ts) | 0 |
 | `@stacksjs/path` | [`stacks-path`](../stacks-path/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/path/src/index.ts) | 11 |
 | `@stacksjs/payments` | [`stacks-payments`](../stacks-payments/SKILL.md) | [entrypoint](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/payments/src/index.ts) | 28 |
@@ -119,7 +119,7 @@ Declared runtime exports: `BlogAdminError`, `DEFAULT_IOS_DEPENDENCIES`, `DEFAULT
 
 Local source modules: [src/action.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/action.ts), [src/add.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/add.ts), [src/blog-admin.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/blog-admin.ts), [src/build/ios-toolchain.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/build/ios-toolchain.ts), [src/commit.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/commit.ts), [src/dev/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/dev/index.ts), [src/discover-packages.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/discover-packages.ts), [src/generate/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/generate/index.ts), [src/github-release.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/github-release.ts), [src/helpers/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/helpers/index.ts), [src/library/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/library/index.ts), [src/lint/lint.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/lint/lint.ts), [src/lint/stx-gate.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/lint/stx-gate.ts), [src/make-command.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/make-command.ts), [src/make-job.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/make-job.ts), [src/make-policy.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/make-policy.ts), [src/make-resource.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/make-resource.ts), [src/make.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/make.ts), [src/scaffold-crud.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/scaffold-crud.ts), [src/setup/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/setup/index.ts), [src/stacks.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/stacks.ts), [src/upgrade/package-project.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/upgrade/package-project.ts), [src/upgrade/route-actions.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/src/upgrade/route-actions.ts).
 
-Evidence directory: [74 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [75 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/actions/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/ai
 
@@ -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: [151 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: [152 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
 
@@ -633,7 +633,7 @@ Declared runtime exports: `Activity`, `AnalyticsEvent`, `Auction`, `AuctionItem`
 
 Local source modules: [src/auto-crud.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/auto-crud.ts), [src/batch-loader.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/batch-loader.ts), [src/db.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/db.ts), [src/define-model.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/define-model.ts), [src/extend-model.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/extend-model.ts), [src/gdpr/index.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/gdpr/index.ts), [src/generate-database-schema.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/generate-database-schema.ts), [src/locked-row.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/locked-row.ts), [src/messaging.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/messaging.ts), [src/model-types.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/model-types.ts), [src/ownership.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/ownership.ts), [src/paginator-request.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/paginator-request.ts), [src/row-token.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/row-token.ts), [src/subquery.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/subquery.ts), [src/traits/audit.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/audit.ts), [src/traits/billable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/billable.ts), [src/traits/categorizable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/categorizable.ts), [src/traits/commentable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/commentable.ts), [src/traits/likeable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/likeable.ts), [src/traits/taggable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/traits/taggable.ts), [src/transaction.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/transaction.ts), [src/types.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/types.ts), [src/utils/encrypted.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/utils/encrypted.ts), [src/utils/prunable.ts](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/src/utils/prunable.ts).
 
-Evidence directory: [62 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
+Evidence directory: [63 retained tests](https://github.com/stacksjs/stacks/blob/main/storage/framework/core/orm/tests). These files are evidence pointers, not a claim that all tests were run for this catalog.
 
 ### @stacksjs/pagination
 

package/app/Actions/Dashboard/hq-read.ts

@@ -0,0 +1,144 @@
+import type { DashboardHqDriverOptions } from '@stacksjs/types'
+
+/**
+ * The one way a dashboard section talks to a hosted HQ product.
+ *
+ * `dashboard-provider.ts` decides *which* provider a section reads from and
+ * guarantees that a remote one cannot take the page down. This module is the
+ * other half: how a remote read is actually performed, so that each domain
+ * driver is a path and a shape rather than its own copy of base-URL joining,
+ * header handling and failure translation.
+ *
+ * Everything here exists to make one of `readThroughProvider`'s three degrade
+ * paths real:
+ *
+ *   it rejects         — an unreachable host, a non-2xx answer, or a body that
+ *                        is not JSON, all raised as {@link HqReadError}
+ *   it never answers   — a hung connection, aborted at `timeoutMs`. Nothing
+ *                        else in the seam imposes a deadline, so without this
+ *                        the "never answers" case was documented rather than
+ *                        handled: the request simply hung and took the
+ *                        section's request with it
+ *   the wrong shape    — left to the caller, which knows what its section
+ *                        renders; this module parses JSON and no more
+ *
+ * The read key only ever travels in `Authorization`. A URL is logged by
+ * proxies, kept in browser history and attached to error reports, and a
+ * read-scoped key is still a credential, so it never becomes a query
+ * parameter even though several hosted APIs would accept one.
+ */
+
+/** How long a hosted read may take before it is treated as unreachable. */
+export const HQ_DEFAULT_TIMEOUT_MS = 10_000
+
+/** The upper bound on a configured timeout, so one cannot hold a section open. */
+export const HQ_MAX_TIMEOUT_MS = 60_000
+
+/**
+ * A hosted read that did not produce a payload.
+ *
+ * Carries `status` when the product answered and the answer was not a 2xx, so
+ * an operator reading the log can tell a misconfigured key (401/403) from a
+ * wrong project id (404) from the product being unwell (5xx). `status` is
+ * absent when no answer arrived at all.
+ */
+export class HqReadError extends Error {
+  readonly status?: number
+  readonly url: string
+
+  constructor(message: string, url: string, status?: number) {
+    super(message)
+    this.name = 'HqReadError'
+    this.url = url
+    this.status = status
+  }
+}
+
+/** Whether the options carry enough to attempt a read at all. */
+export function hqConfigured(options: DashboardHqDriverOptions | null | undefined): boolean {
+  return Boolean(options?.baseUrl && options?.token)
+}
+
+/**
+ * `base` and `path` joined into one URL, with exactly one slash between them.
+ *
+ * A base URL is hand-written in a config file, so it arrives with or without
+ * a trailing slash, and a driver's path is written as a literal that reads
+ * best with a leading one. Both spellings have to land on the same address.
+ */
+export function hqUrl(base: string, path: string, query?: Record<string, string | number | undefined>): string {
+  const url = new URL(path.replace(/^\/+/, ''), base.endsWith('/') ? base : `${base}/`)
+  for (const [key, value] of Object.entries(query ?? {})) {
+    if (value !== undefined && value !== '')
+      url.searchParams.set(key, String(value))
+  }
+  return url.toString()
+}
+
+/** A configured timeout, clamped so neither a typo nor a zero disables it. */
+export function hqTimeout(options: DashboardHqDriverOptions | null | undefined): number {
+  const asked = Number(options?.timeoutMs)
+  if (!Number.isFinite(asked) || asked <= 0)
+    return HQ_DEFAULT_TIMEOUT_MS
+  return Math.min(HQ_MAX_TIMEOUT_MS, asked)
+}
+
+/**
+ * One read from a hosted HQ product, as JSON.
+ *
+ * Throws {@link HqReadError} for every failure, which is what the caller
+ * wants: `readThroughProvider` turns a rejection into the section's empty
+ * payload with a reason, so a driver never has to handle a failure itself.
+ *
+ * `fetchImpl` exists for tests. Nothing in the application passes it.
+ */
+export async function hqRead<T = unknown>(
+  options: DashboardHqDriverOptions | null | undefined,
+  path: string,
+  query?: Record<string, string | number | undefined>,
+  fetchImpl: typeof fetch = fetch,
+): Promise<T> {
+  if (!hqConfigured(options)) {
+    // Not a network failure, and worth saying so differently: a section that
+    // reads empty because nobody filled in a base URL is a configuration
+    // mistake an operator can fix, not an outage to wait out.
+    throw new HqReadError('The hosted provider has no baseUrl and token configured.', '')
+  }
+
+  const url = hqUrl(options!.baseUrl!, path, query)
+  let answer: Response
+  try {
+    answer = await fetchImpl(url, {
+      headers: {
+        // The read key, and only here. See the note at the top of this file.
+        authorization: `Bearer ${options!.token}`,
+        accept: 'application/json',
+      },
+      signal: AbortSignal.timeout(hqTimeout(options)),
+    })
+  }
+  catch (cause) {
+    // An abort and a refused connection are the same thing to a section: no
+    // data arrived. They are told apart in the message so the log is useful.
+    const aborted = (cause as { name?: string })?.name === 'TimeoutError'
+      || (cause as { name?: string })?.name === 'AbortError'
+    throw new HqReadError(
+      aborted
+        ? `The hosted provider did not answer within ${hqTimeout(options)}ms.`
+        : `The hosted provider could not be reached: ${(cause as Error)?.message ?? String(cause)}`,
+      url,
+    )
+  }
+
+  if (!answer.ok)
+    throw new HqReadError(`The hosted provider answered ${answer.status}.`, url, answer.status)
+
+  try {
+    return await answer.json() as T
+  }
+  catch {
+    // A 2xx that is not JSON is usually a sign-in page or a proxy's error
+    // document, which is a configuration problem wearing a success code.
+    throw new HqReadError('The hosted provider answered with something that is not JSON.', url, answer.status)
+  }
+}

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.241",
+  "version": "0.75.243",
   "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.241",
+  "version": "0.75.243",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.241",
+    "@stacksjs/mobile": "0.75.243",
     "@stacksjs/sanitizer": "^0.2.534",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { ManufacturerRecord } from '../../../../app/Actions/Dashboard/Commerce/manufacturer-records'
 
@@ -5,67 +7,62 @@ const records = useReactiveProp('records', [] as ManufacturerRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const normalized = /^\d{4}-\d{2}-\d{2} \d/.test(value)
-    ? `${value.replace(' ', 'T')}Z`
-    : value
-  const date = new Date(normalized)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+/**
+ * `featured` becomes a flag badge beside the name rather than the starred line
+ * it used to be under it. The information is the same and it reads as a table
+ * column; the star is dropped because a `cell` slot cannot carry markup yet
+ * (stacksjs/stx#2095, stacksjs/stx#2096).
+ *
+ * `createdAt` is a `date` column, and `UI/Table` now normalises SQLite's
+ * space-separated timestamps the way this component used to do for itself.
+ */
+const COLUMNS = [
+  { key: 'name', label: 'Manufacturer', sortable: true, emptyText: 'Unnamed manufacturer', class: 'min-w-48 font-medium text-gray-900 dark:text-white' },
+  {
+    key: 'featuredFlag',
+    label: '',
+    type: 'badge' as const,
+    emptyText: '',
+    badgeClasses: { featured: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40' },
+    badgeLabels: { featured: 'Featured' },
+    searchable: false,
+  },
+  { key: 'description', label: 'Description', emptyText: 'No description recorded.', class: 'max-w-md min-w-64 line-clamp-2 text-gray-500 dark:text-neutral-400' },
+  { key: 'country', label: 'Country', sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+  { key: 'productCount', label: 'Products', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono' },
+  { key: 'createdAt', label: 'Created', type: 'date' as const, sortable: true, class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
+
+/** A badge column maps a row field, so the flag needs one. */
+const rows = derived(() => records().map(record => ({
+  ...record,
+  featuredFlag: record.featured ? 'featured' : '',
+})))
+
+function handleRowAction(payload: { action: string, row: ManufacturerRecord }): 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 p-10 text-gray-500 text-sm dark:text-neutral-400">
-    <span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>
-    Loading manufacturers
-  </div>
-  <div :else-if="records().length === 0" class="p-10 text-center">
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No manufacturers found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a manufacturer or adjust the current filters.</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 uppercase dark:text-neutral-400">Manufacturer</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Description</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Country</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Products</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Created</th>
-          <th scope="col" class="relative px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr class="hover:bg-gray-50/60 dark:hover:bg-neutral-700/40">
-            <td class="px-4 py-4 min-w-48">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name || 'Unnamed manufacturer' }}</p>
-              <span :if="record.featured" class="inline-flex items-center mt-1 font-medium text-blue-700 text-xs dark:text-blue-300">
-                <span class="mr-1 h-3.5 w-3.5 i-hugeicons-star"></span>
-                Featured
-              </span>
-            </td>
-            <td class="px-4 py-4 max-w-md min-w-64 text-gray-500 text-sm dark:text-neutral-400">
-              <p class="line-clamp-2">{{ record.description || 'No description recorded.' }}</p>
-            </td>
-            <td class="px-4 py-4 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ record.country || 'Not recorded' }}</td>
-            <td class="px-4 py-4 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ record.productCount }}</td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + record.name" @click="emit('edit', record)">
-                <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-              </Button>
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + record.name" @click="emit('delete', record)">
-                <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-              </Button>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard already owns the
+  search box and the filter selects, and a second set inside the table would
+  duplicate them. Paging is what was missing, and Table brings it.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="name"
+  paginated
+  :page-size="25"
+  empty-title="No manufacturers found"
+  empty-description="Add a manufacturer or adjust the current filters."
+  @row-action="handleRowAction"
+/>

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { ProductUnitRecord } from '../../../../app/Actions/Dashboard/Commerce/product-unit-records'
 
@@ -5,67 +7,63 @@ const records = useReactiveProp('records', [] as ProductUnitRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Unknown'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
-}
-</script>
+/**
+ * No slots. `UI/Table`'s `cell` and `actions` slots cannot be used yet -
+ * slot content loses its `{{ … }}` (stacksjs/stx#2095) and `stx typecheck`
+ * rejects every scoped slot prop (stacksjs/stx#2096) - so the two custom
+ * cells here are expressed as column options instead: `subtitleKey` for the
+ * abbreviation under the name, and a flag `badge` column for the default
+ * marker.
+ */
+const COLUMNS = [
+  { key: 'name', label: 'Unit', sortable: true, subtitleKey: 'abbreviation', class: 'font-medium text-gray-900 dark:text-white' },
+  {
+    key: 'defaultFlag',
+    label: '',
+    type: 'badge' as const,
+    // A flag rather than a status: only the default unit is marked, and the
+    // rest of the column stays blank.
+    emptyText: '',
+    badgeClasses: { default: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40' },
+    badgeLabels: { default: 'Default' },
+    searchable: false,
+  },
+  { key: 'type', label: 'Type', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'productName', label: 'Product', sortable: true, emptyText: 'Unassigned' },
+  { key: 'description', label: 'Description', class: 'max-w-sm', emptyText: 'No description' },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, class: 'whitespace-nowrap' },
+]
 
-<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 product units
-  </div>
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
 
-  <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-package"></span>
-    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No product units found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a ProductUnit record.</p>
-  </div>
+/** `defaultFlag` carries the badge value, since a badge column maps a row field. */
+const rows = derived(() => records().map(record => ({
+  ...record,
+  defaultFlag: record.isDefault ? 'default' : '',
+})))
+
+function handleRowAction(payload: { action: string, row: ProductUnitRecord }): void {
+  emit(payload.action, payload.row)
+}
+</script>
 
-  <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">Unit</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Type</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Product</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Description</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 class="align-top">
-            <td class="px-4 py-4">
-              <div class="flex gap-2 items-center">
-                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
-                <span :if="record.isDefault" class="px-2 py-0.5 font-medium text-emerald-700 text-xs dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 rounded-full">Default</span>
-              </div>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.abbreviation }}</p>
-            </td>
-            <td class="px-4 py-4 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ record.type }}</td>
-            <td class="px-4 py-4 text-gray-600 text-sm dark:text-neutral-300">{{ record.productName || 'Unassigned' }}</td>
-            <td class="px-4 py-4 max-w-sm text-gray-600 text-sm dark:text-neutral-300">{{ record.description || 'No description' }}</td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            <td class="px-4 py-4">
-              <div class="flex gap-1 justify-end">
-                <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + record.name" @click="emit('edit', record)">
-                  <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-                </Button>
-                <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + record.name" @click="emit('delete', record)">
-                  <span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span>
-                </Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard already owns the
+  search box and the filter selects, and a second set inside the table would
+  duplicate them. Paging is what was missing, and Table brings it.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="name"
+  paginated
+  :page-size="25"
+  empty-title="No product units found"
+  empty-description="Adjust the filters or add a ProductUnit record."
+  @row-action="handleRowAction"
+/>