@stacksjs/defaults 0.75.231 → 0.75.236

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

@@ -5,6 +5,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Marketing/marketing-list-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface MarketingListIndexResponse {
   records: MarketingListRecord[]
@@ -193,15 +194,7 @@ async function deleteList(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  if (page() > 1)
-    page.set(page() - 1)
-}
-
-function nextPage(): void {
-  if (page() < totalPages())
-    page.set(page() + 1)
-}
+const { previousPage, nextPage } = pageControls(page, totalPages)
 
 onMount(() => {
   void loadLists()
@@ -209,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

@@ -6,6 +6,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Marketing/social-post-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface SocialPostIndexResponse {
   records: SocialPostRecord[]
@@ -186,15 +187,7 @@ async function deletePost(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  if (page() > 1)
-    page.set(page() - 1)
-}
-
-function nextPage(): void {
-  if (page() < totalPages())
-    page.set(page() + 1)
-}
+const { previousPage, nextPage } = pageControls(page, totalPages)
 
 onMount(() => {
   void loadPosts()
@@ -202,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>

package/resources/plugins/preloader.ts

@@ -88,7 +88,15 @@ const isRepl = !process.argv[1]
 // otherwise valid. Postinstall scripts are bootstrap work and must stay independent
 // of the application runtime preloader.
 const isPostinstall = process.env.npm_lifecycle_event === 'postinstall'
-const skipPreloader = isRepl || isPostinstall || (args.length > 0 && fastCommands.some(cmd => args[0] === cmd || args[0].startsWith(`${cmd}:`)))
+// runAction starts these framework files directly, with flags rather than a
+// Buddy command in argv[2]. They only inspect/release repository metadata.
+// Match the framework's source and published layouts, never an app action
+// which happens to have the same basename and needs its application globals.
+const entrypoint = (process.argv[1] ?? '').replaceAll('\\', '/')
+const repositoryAction = '(?:release|bump|generate/lib-entries)\\.[jt]s'
+const isRepositoryAction = new RegExp(`(?:^|/)storage/framework/core/actions/src/${repositoryAction}$`).test(entrypoint)
+  || new RegExp(`(?:^|/)(?:node_modules|pantry)/@stacksjs/actions/(?:src|dist(?:/src)?)/${repositoryAction}$`).test(entrypoint)
+const skipPreloader = isRepl || isPostinstall || isRepositoryAction || (args.length > 0 && fastCommands.some(cmd => args[0] === cmd || args[0].startsWith(`${cmd}:`)))
 
 if (!skipPreloader) {
   // Detect production/deployment commands and set environment accordingly BEFORE loading env files