@stacksjs/defaults 0.75.233 → 0.75.236

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

@@ -189,28 +189,16 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Print logs</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Inspect native Receipt records from configured print devices.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadPrintLogs"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export current page</Button>
-    </div>
-  </header>
+  <PageHeader title="Print logs" description="Inspect native Receipt records from configured print devices.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadPrintLogs"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export current page</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 
-  <section aria-label="Print log metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-4">
-    <template :for="item in metricCards()" :key="item.label">
-      <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-        <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
-        <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Print log metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <PrintLogBreakdown :records="records()" />
 

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

@@ -150,22 +150,18 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Product Waitlist</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Native WaitlistProduct records without simulated customers or activity.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
-        <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-      <Button :disabled="isLoading() || options().products.length === 0" @click="openAddDialog()">
-        <span class="h-4 w-4 i-hugeicons-add-01"></span>
-        Add entry
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Product Waitlist" description="Native WaitlistProduct records without simulated customers or activity.">
+  <div class="flex gap-2">
+    <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
+      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+    <Button :disabled="isLoading() || options().products.length === 0" @click="openAddDialog()">
+      <span class="h-4 w-4 i-hugeicons-add-01"></span>
+      Add entry
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
   <div :if="!isLoading() && options().products.length === 0" class="p-4 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">

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

@@ -207,22 +207,18 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Restaurant Waitlist</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted WaitlistRestaurant records and seating states.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
-        <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-      <Button :disabled="isLoading()" @click="openAddDialog()">
-        <span class="h-4 w-4 i-hugeicons-add-01"></span>
-        Add party
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Restaurant Waitlist" description="Manage persisted WaitlistRestaurant records and seating states.">
+  <div class="flex gap-2">
+    <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
+      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+    <Button :disabled="isLoading()" @click="openAddDialog()">
+      <span class="h-4 w-4 i-hugeicons-add-01"></span>
+      Add party
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

package/resources/components/Dashboard/Deployments/DeploymentList.stx

@@ -200,27 +200,23 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Deployments</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Deployment model records through the guarded dashboard API.</p>
-    </div>
-    <div class="flex gap-2 items-center">
-      <Button :disabled="isStarting() || isPreviewing()" variant="outline" @click="openDeploymentDialog('preview')">
-        Preview
-      </Button>
-      <Button :disabled="isStarting() || isPreviewing() || isRollingBack()" variant="secondary" @click="openRollback">
-        Rollback
-      </Button>
-      <Button :disabled="isStarting() || isPreviewing()" @click="openDeploymentDialog('deploy')">
-        Deploy
-      </Button>
-      <Button :loading="isLoading()" variant="secondary" @click="loadDeployments">
-        <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Deployments" description="Deployment model records through the guarded dashboard API.">
+  <div class="flex gap-2 items-center">
+    <Button :disabled="isStarting() || isPreviewing()" variant="outline" @click="openDeploymentDialog('preview')">
+      Preview
+    </Button>
+    <Button :disabled="isStarting() || isPreviewing() || isRollingBack()" variant="secondary" @click="openRollback">
+      Rollback
+    </Button>
+    <Button :disabled="isStarting() || isPreviewing()" @click="openDeploymentDialog('deploy')">
+      Deploy
+    </Button>
+    <Button :loading="isLoading()" variant="secondary" @click="loadDeployments">
+      <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

package/resources/components/Dashboard/Marketing/AbandonedCartsDashboard.stx

@@ -171,16 +171,12 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Abandoned Carts</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The audience that already chose the products. Every other campaign starts by guessing.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadCarts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button @click="openCompose()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-mail-send-01"></span>New recovery campaign</Button>
-    </div>
-  </header>
+  <PageHeader title="Abandoned Carts" description="The audience that already chose the products. Every other campaign starts by guessing.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadCarts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button @click="openCompose()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-mail-send-01"></span>New recovery campaign</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCarts()">Retry</Button></div>
 

package/resources/components/Dashboard/Marketing/CampaignsDashboard.stx

@@ -280,16 +280,12 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Campaigns</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage Campaign records with real audience and delivery aggregates.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadCampaigns()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add campaign</Button>
-    </div>
-  </header>
+  <PageHeader title="Campaigns" description="Manage Campaign records with real audience and delivery aggregates.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadCampaigns()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add campaign</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCampaigns()">Retry</Button></div>
 

package/resources/components/Dashboard/Marketing/MarketingListsDashboard.stx

@@ -202,19 +202,15 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Email lists</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage EmailList records, signup policy, and real membership totals.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadLists()">
-        <span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-      <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add list</Button>
-    </div>
-  </header>
+  <PageHeader title="Email lists" description="Manage EmailList records, signup policy, and real membership totals.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadLists()">
+      <span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+    <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add list</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">
     <span>{{ loadError() }}</span>

package/resources/components/Dashboard/Marketing/SocialPostsDashboard.stx

@@ -195,16 +195,12 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Social posts</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create and schedule SocialPost records with persisted User ownership and platform metrics.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add post</Button>
-    </div>
-  </header>
+  <PageHeader title="Social posts" description="Create and schedule SocialPost records with persisted User ownership and platform metrics.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadPosts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add post</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadPosts()">Retry</Button></div>
   <div :if="summary().failed > 0" class="flex gap-3 items-start p-4 text-red-800 text-sm dark:text-red-200 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span class="shrink-0 mt-0.5 h-5 w-5 i-hugeicons-alert-02"></span><p>{{ summary().failed }} {{ summary().failed === 1 ? 'post has' : 'posts have' }} a failed status and may need review.</p></div>

package/resources/components/Dashboard/Queue/QueueDashboard.stx

@@ -82,22 +82,18 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Queue</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Recorded queue state and current-process worker metrics.</p>
-    </div>
-    <div class="flex gap-2 items-center">
-      <span :class="'inline-flex items-center px-2.5 py-1 font-medium text-xs rounded-full ' + (queueConnected() ? 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-950' : 'text-red-700 bg-red-100 dark:text-red-300 dark:bg-red-950')">
-        <span :class="'mr-1.5 h-1.5 w-1.5 rounded-full ' + (queueConnected() ? 'bg-green-500' : 'bg-red-500')"></span>
-        {{ queueConnected() ? 'Queue connected' : 'Queue unavailable' }}
-      </span>
-      <Button variant="secondary" :loading="isLoading()" @click="loadQueue">
-        <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Queue" description="Recorded queue state and current-process worker metrics.">
+  <div class="flex gap-2 items-center">
+    <span :class="'inline-flex items-center px-2.5 py-1 font-medium text-xs rounded-full ' + (queueConnected() ? 'text-green-700 bg-green-100 dark:text-green-300 dark:bg-green-950' : 'text-red-700 bg-red-100 dark:text-red-300 dark:bg-red-950')">
+      <span :class="'mr-1.5 h-1.5 w-1.5 rounded-full ' + (queueConnected() ? 'bg-green-500' : 'bg-red-500')"></span>
+      {{ queueConnected() ? 'Queue connected' : 'Queue unavailable' }}
+    </span>
+    <Button variant="secondary" :loading="isLoading()" @click="loadQueue">
+      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

package/resources/components/Dashboard/Realtime/RealtimeDashboard.stx

@@ -124,16 +124,12 @@ onDestroy(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Realtime</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Recorded Websocket model events and a native connection inspector.</p>
-    </div>
-    <Button variant="secondary" :loading="isLoading()" @click="loadRealtime">
-      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-      Refresh
-    </Button>
-  </header>
+  <PageHeader title="Realtime" description="Recorded Websocket model events and a native connection inspector.">
+  <Button variant="secondary" :loading="isLoading()" @click="loadRealtime">
+    <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+    Refresh
+  </Button>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

package/resources/components/Dashboard/Releases/ReleaseDashboard.stx

@@ -94,16 +94,12 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Releases</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Release model records and recorded download totals.</p>
-    </div>
-    <Button variant="secondary" :loading="isLoading()" @click="loadReleases">
-      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-      Refresh
-    </Button>
-  </header>
+  <PageHeader title="Releases" description="Release model records and recorded download totals.">
+  <Button variant="secondary" :loading="isLoading()" @click="loadReleases">
+    <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+    Refresh
+  </Button>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

package/resources/components/Dashboard/UI/MetricCards.stx

@@ -0,0 +1,32 @@
+<script client>
+/**
+ * The metric strip above a dashboard list.
+ *
+ * Twenty-two dashboards carried this markup verbatim (stacksjs/stacks#2917):
+ * the same card, the same classes, the same three lines. Five of them omit
+ * `detail`, which is the only variation and is why it is optional here.
+ *
+ * It renders the <section> rather than only the cards, which is not a
+ * stylistic choice. stx wraps every component render in a
+ * `data-stx-component-wrapper` div, so a component that emitted only the
+ * cards would become ONE child of the caller's grid and every card would
+ * stack inside a single cell. Owning the grid keeps the articles as its
+ * direct children, where the column classes can reach them.
+ *
+ * `columns` is a prop because the counts genuinely differ per screen: four,
+ * five, three, and two different responsive ramps across the callers.
+ */
+const items = useReactiveProp('items', [] as Array<{ label: string, value: string, detail?: string }>)
+const label = useReactiveProp('label', 'Metrics')
+const columns = useReactiveProp('columns', 'grid-cols-2 lg:grid-cols-4')
+</script>
+
+<section :aria-label="label()" :class="`grid gap-3 ${columns()}`">
+  <template :for="item in items()" :key="item.label">
+    <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
+      <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
+      <p :if="item.detail" class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
+    </article>
+  </template>
+</section>

package/resources/components/Dashboard/UI/PageHeader.stx

@@ -1,69 +1,28 @@
-<script server>
-interface PageHeaderProps {
-  title?: string
-  description?: string
-  backLink?: string
-  backLabel?: string
-}
-
-const { title = '', description = '', backLink = '', backLabel = 'Back' } = defineProps<PageHeaderProps>()
+<script client>
+/**
+ * The title block at the top of a dashboard screen.
+ *
+ * Thirty-five screens carried the same header, the same heading pair and the
+ * same two sets of classes (stacksjs/stacks#2917).
+ *
+ * The actions stay in the caller, inside the slot, and so does their wrapper.
+ * That is deliberate: the wrapper differs six ways across the callers (`flex
+ * gap-2`, `flex flex-wrap gap-2`, `flex gap-2 items-center` and three more),
+ * and a prop for it would be a class string passed through a component,
+ * which is worse than leaving the div where its author put it.
+ *
+ * Twenty-three other screens have a header that looks like this one and is
+ * shaped differently inside. They are deliberately NOT converted; see the
+ * issue for the count and the reason.
+ */
+const title = useReactiveProp('title', '')
+const description = useReactiveProp('description', '')
 </script>
-<div class="mb-6">
-  <!-- Back link -->
-  @if(backLink)
-    <a
-      href="{{ backLink }}"
-      class="inline-flex gap-1.5 items-center mb-3 text-sm text-stone-500 dark:text-neutral-400 hover:text-stone-700 dark:hover:text-neutral-200 transition-colors"
-    >
-      <div class="h-4 w-4 i-hugeicons-arrow-left-01"></div>
-      <span>{{ backLabel }}</span>
-    </a>
-  @endif
-
-  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div class="flex-1 min-w-0">
-      <!-- Title row -->
-      <div class="flex gap-3 items-center">
-        <slot name="icon" />
-        <div>
-          <h1 class="font-semibold text-2xl text-stone-900 truncate dark:text-white">
-            {{ title }}
-          </h1>
-          @if(description)
-            <p class="mt-1 text-sm text-stone-500 dark:text-neutral-400">
-              {{ description }}
-            </p>
-          @endif
-        </div>
-      </div>
-
-      <!-- Tags/badges slot -->
-      @if($slots.tags)
-        <div class="flex flex-wrap gap-2 mt-2">
-          <slot name="tags" />
-        </div>
-      @endif
-    </div>
 
-    <!-- Actions -->
-    @if($slots.actions)
-      <div class="flex flex-shrink-0 gap-2 items-center">
-        <slot name="actions" />
-      </div>
-    @endif
+<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+  <div>
+    <h1 class="font-bold text-2xl text-gray-900 dark:text-white">{{ title() }}</h1>
+    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ description() }}</p>
   </div>
-
-  <!-- Tabs slot -->
-  @if($slots.tabs)
-    <div class="mt-4 border-b border-stone-200 dark:border-neutral-700">
-      <slot name="tabs" />
-    </div>
-  @endif
-
-  <!-- Filters slot -->
-  @if($slots.filters)
-    <div class="mt-4">
-      <slot name="filters" />
-    </div>
-  @endif
-</div>
+  <slot />
+</header>

package/resources/components/Dashboard/UI/Table.stx

@@ -1,4 +1,5 @@
 <script client>
+import { formatCurrency } from '@stacksjs/commerce/money'
 /**
  * The data table.
  *
@@ -28,7 +29,43 @@ interface DashboardTableColumn {
    * formatter function because props cross an attribute boundary, where a
    * function does not survive.
    */
-  type?: 'text' | 'number' | 'currency' | 'date' | 'boolean'
+  type?: 'text' | 'number' | 'currency' | 'date' | 'boolean' | 'badge'
+  /**
+   * For a `badge` column: the classes each value wears. A value with no
+   * entry gets a neutral pill, so a new status never renders unstyled.
+   *
+   * A map rather than a function because props cross an attribute boundary,
+   * which a function does not survive - the same reason `type` is a string.
+   */
+  badgeClasses?: Record<string, string>
+  /**
+   * For a `badge` column: what each value reads as, when the stored value is
+   * not the word to show. `active` displaying as "Available" is a real case
+   * and is not derivable from the value.
+   *
+   * Without an entry the value is humanised: `on_delivery` becomes
+   * "On delivery".
+   */
+  badgeLabels?: Record<string, string>
+  /**
+   * What an empty cell reads as. Defaults to `-`.
+   *
+   * Per column because the right word is specific: a shipping table wants
+   * "No minimum" for an absent free-shipping threshold, which is a statement
+   * about the rate rather than missing data.
+   */
+  emptyText?: string
+  /**
+   * Fixed ISO code for a `currency` column, when every row is the same
+   * currency. Defaults to USD, which is what this column did before it
+   * could be told otherwise.
+   */
+  currency?: string
+  /**
+   * Row field holding the ISO code, when currency varies per row. Wins over
+   * `currency` when both are given and the row actually carries one.
+   */
+  currencyKey?: string
   width?: string
   class?: string
   /** Hidden until switched on in the column menu. */
@@ -106,13 +143,24 @@ function rawValue(row: DashboardTableRow, key: string): any {
 function displayValue(row: DashboardTableRow, column: DashboardTableColumn): string {
   const value = rawValue(row, column.key)
   if (value === null || value === undefined || value === '')
-    return '-'
+    return column.emptyText ?? '-'
 
   if (column.type === 'currency') {
     const amount = Number(value)
-    return Number.isFinite(amount)
-      ? amount.toLocaleString(undefined, { style: 'currency', currency: 'USD' })
-      : String(value)
+    if (!Number.isFinite(amount))
+      return String(value)
+
+    // Through @stacksjs/commerce/money, not Intl directly. Stacks stores
+    // money in MINOR units, so formatting the stored number as if it were
+    // major multiplies every amount by the currency's exponent: a 1200 cent
+    // base rate rendered as $1,200.00 instead of $12.00 (stacksjs/stacks#2916).
+    //
+    // And the exponent is per currency, not always 100 - JPY and KRW have
+    // none - so dividing here rather than delegating would be a second bug
+    // behind the first. `currencyExponent` is the only thing that knows.
+    const perRow = column.currencyKey ? rawValue(row, column.currencyKey) : undefined
+    const code = typeof perRow === 'string' && perRow ? perRow : column.currency
+    return formatCurrency(amount, code)
   }
   if (column.type === 'number') {
     const amount = Number(value)
@@ -160,6 +208,30 @@ const filtered = derived(() => {
 })
 
 /** Nulls sort last in both directions: "missing" is not a small value. */
+const BADGE_BASE = 'inline-flex px-2.5 py-1 font-medium text-xs ring-1 ring-inset rounded-full'
+const BADGE_NEUTRAL = 'bg-stone-100 text-stone-600 ring-stone-500/20 dark:bg-white/5 dark:text-neutral-300 dark:ring-white/10'
+
+/** The pill's classes for this row's value, neutral when the value is unmapped. */
+function badgeClass(row: DashboardTableRow, column: DashboardTableColumn): string {
+  const key = String(rawValue(row, column.key) ?? '')
+  return `${BADGE_BASE} ${column.badgeClasses?.[key] ?? BADGE_NEUTRAL}`
+}
+
+/** The pill's text: the mapped label, else the value with its underscores read as spaces. */
+function badgeLabel(row: DashboardTableRow, column: DashboardTableColumn): string {
+  const value = rawValue(row, column.key)
+  if (value === null || value === undefined || value === '')
+    return column.emptyText ?? '-'
+
+  const key = String(value)
+  const mapped = column.badgeLabels?.[key]
+  if (mapped)
+    return mapped
+
+  const words = key.replaceAll('_', ' ')
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
 function compare(a: any, b: any, type: DashboardTableColumn['type']): number {
   const aMissing = a === null || a === undefined || a === ''
   const bMissing = b === null || b === undefined || b === ''
@@ -570,7 +642,8 @@ function cellClass(column: DashboardTableColumn, index: number): string {
             <template :for="(column, columnIndex) in visibleColumns()">
               <td :class="cellClass(column, columnIndex)">
                 <slot name="cell" :row="row" :column="column" :value="row[column.key]">
-                  {{ displayValue(row, column) }}
+                  <span :if="column.type === 'badge'" :class="badgeClass(row, column)">{{ badgeLabel(row, column) }}</span>
+                  <span :if="column.type !== 'badge'">{{ displayValue(row, column) }}</span>
                 </slot>
               </td>
             </template>