@stacksjs/defaults 0.75.231 → 0.75.233

package/functions/dashboard-list.ts

@@ -0,0 +1,257 @@
+import type { Signal } from '@stacksjs/stx'
+import { state } from '@stacksjs/stx'
+
+/**
+ * Shared pieces of the dashboard's list screens.
+ *
+ * Seventeen list dashboards each wrote their own `previousPage` and
+ * `nextPage` (stacksjs/stacks#2918), in four different styles. Twelve of them
+ * mean the same thing - move a page number, keep it between one and the last
+ * page - and this is that, once.
+ */
+
+/** The shape `state()` returns, narrowed to what paging needs. */
+interface PageSignal {
+  (): number
+  set: (value: number) => void
+}
+
+export interface PageControls {
+  /** Back one page, never past the first. */
+  previousPage: () => void
+  /** Forward one page, never past the last. */
+  nextPage: () => void
+}
+
+/**
+ * Previous and next for a page number bounded by a last page.
+ *
+ * `lastPage` is an accessor rather than a number because every call site
+ * derives it, and reading it at click time is what keeps the clamp correct
+ * when a filter shrinks the result set under the reader's feet.
+ *
+ * Clamps rather than guards. The twelve call sites split between
+ * `page.set(Math.max(1, page() - 1))` and `if (page() > 1) page.set(page() - 1)`,
+ * which do the same thing from a user's point of view; clamping is the one
+ * that stays correct if a page number is ever set out of range by something
+ * other than these two functions.
+ *
+ * Not for the dashboards that page server-side. `Jobs/JobHistory` reloads
+ * inside its `nextPage`, and a navigation that triggers a fetch is a
+ * different thing wearing the same name.
+ */
+export function pageControls(page: PageSignal, lastPage: () => number): PageControls {
+  return {
+    previousPage: () => page.set(Math.max(1, page() - 1)),
+    nextPage: () => page.set(Math.min(Math.max(1, lastPage()), page() + 1)),
+  }
+}
+
+/** How a list screen decides what the current search matches. */
+export interface RecordsDashboardOptions<T> {
+  /**
+   * Rows matching `query`, which arrives trimmed and lowercased.
+   *
+   * The caller's, because the fields worth searching are the only part of a
+   * list dashboard that is genuinely about its own records.
+   */
+  filter: (records: T[], query: string) => T[]
+  /** Rows per page. Default 10, which is what all five callers used. */
+  perPage?: number
+  /**
+   * Whether two rows are the same row. Defaults to matching `id`, which is
+   * what every current caller means.
+   */
+  sameRecord?: (a: T, b: T) => boolean
+}
+
+export interface RecordsDashboard<T> {
+  records: Signal<T[]>
+  loading: Signal<boolean>
+  loadError: Signal<string>
+  search: Signal<string>
+  page: Signal<number>
+  perPage: Signal<number>
+  editorOpen: Signal<boolean>
+  editorMode: Signal<'create' | 'edit'>
+  editing: Signal<T | null>
+  saving: Signal<boolean>
+  editorError: Signal<string>
+  deleting: Signal<T | null>
+  deleteBusy: Signal<boolean>
+  deleteError: Signal<string>
+  filteredRecords: () => T[]
+  paginatedRecords: () => T[]
+  pageCount: () => number
+  previousPage: () => void
+  nextPage: () => void
+  /**
+   * Jump to a page, clamped into range.
+   *
+   * The five callers each wrote a bare `page.set(value)` and trusted the
+   * pagination component to emit only pages that exist. Clamping costs
+   * nothing when that is true and keeps the list rendering when it is not.
+   */
+  goToPage: (value: number) => void
+  /** Set the search and return to the first page, which is the only sane page to land on. */
+  handleSearch: (value: string) => void
+  openCreate: () => void
+  openEdit: (record: T) => void
+  /** Refuses while a save is in flight, so a half-written row cannot be abandoned by accident. */
+  closeEditor: () => void
+  requestDelete: (record: T) => void
+  closeDelete: () => void
+  /**
+   * Put a saved row into the list.
+   *
+   * `replacing` is the row the editor was opened on, or null for a create.
+   * Passed rather than inferred so the behaviour matches what the five
+   * callers did: an edit replaces in place and a create appends and jumps to
+   * the page the new row landed on.
+   */
+  upsert: (record: T, replacing: T | null) => void
+  /** Drop a row and pull the page back if that emptied the last one. */
+  remove: (record: T) => void
+  /** Pull `page` back into range after the row count changes under it. */
+  clampPage: () => void
+}
+
+/**
+ * The state and lifecycle every list screen in the dashboard repeats.
+ *
+ * Five Delivery dashboards carried byte-identical copies of fourteen signals,
+ * `handleSearch`, `openCreate`, `openEdit`, `closeEditor`, `requestDelete`,
+ * `closeDelete`, and the page arithmetic around saving and deleting
+ * (stacksjs/stacks#2918). Five copies of an off-by-one is four chances to be
+ * right in four places and wrong in the fifth.
+ *
+ * Deliberately not here: fetching, toasts, and the search predicate. Those
+ * differ per screen, and a composable that owned them would be a framework
+ * each caller had to fight. The caller writes its own `load`, `save` and
+ * `delete`, and calls `upsert`, `remove` and `clampPage` from inside them.
+ */
+export function useRecordsDashboard<T>(options: RecordsDashboardOptions<T>): RecordsDashboard<T> {
+  const sameRecord = options.sameRecord
+    ?? ((a: T, b: T) => (a as { id?: unknown }).id === (b as { id?: unknown }).id)
+
+  const records = state<T[]>([])
+  const loading = state(true)
+  const loadError = state('')
+  const search = state('')
+  const page = state(1)
+  const perPage = state(options.perPage ?? 10)
+  const editorOpen = state(false)
+  const editorMode = state<'create' | 'edit'>('create')
+  const editing = state<T | null>(null)
+  const saving = state(false)
+  const editorError = state('')
+  const deleting = state<T | null>(null)
+  const deleteBusy = state(false)
+  const deleteError = state('')
+
+  const filteredRecords = (): T[] => {
+    const query = search().trim().toLowerCase()
+    return query ? options.filter(records(), query) : records()
+  }
+
+  const pageCount = (): number => Math.max(1, Math.ceil(filteredRecords().length / perPage()))
+
+  const paginatedRecords = (): T[] => {
+    const start = (page() - 1) * perPage()
+    return filteredRecords().slice(start, start + perPage())
+  }
+
+  const clampPage = (): void => {
+    const lastPage = pageCount()
+    if (page() > lastPage)
+      page.set(lastPage)
+  }
+
+  const { previousPage, nextPage } = pageControls(page, pageCount)
+
+  const goToPage = (value: number): void => {
+    page.set(Math.min(Math.max(1, Math.trunc(value) || 1), pageCount()))
+  }
+
+  return {
+    records,
+    loading,
+    loadError,
+    search,
+    page,
+    perPage,
+    editorOpen,
+    editorMode,
+    editing,
+    saving,
+    editorError,
+    deleting,
+    deleteBusy,
+    deleteError,
+    filteredRecords,
+    paginatedRecords,
+    pageCount,
+    previousPage,
+    nextPage,
+    goToPage,
+
+    handleSearch(value: string): void {
+      search.set(value)
+      page.set(1)
+    },
+
+    openCreate(): void {
+      editing.set(null)
+      editorMode.set('create')
+      editorError.set('')
+      editorOpen.set(true)
+    },
+
+    openEdit(record: T): void {
+      editing.set(record)
+      editorMode.set('edit')
+      editorError.set('')
+      editorOpen.set(true)
+    },
+
+    closeEditor(): void {
+      if (saving())
+        return
+      editorOpen.set(false)
+      editing.set(null)
+      editorError.set('')
+    },
+
+    requestDelete(record: T): void {
+      deleting.set(record)
+      deleteError.set('')
+    },
+
+    closeDelete(): void {
+      if (deleteBusy())
+        return
+      deleting.set(null)
+      deleteError.set('')
+    },
+
+    upsert(record: T, replacing: T | null): void {
+      if (replacing) {
+        records.set(records().map(existing => sameRecord(existing, replacing) ? record : existing))
+        return
+      }
+      const next = [...records(), record]
+      records.set(next)
+      // Land on the page the new row is actually on, not the last page of the
+      // filtered view: a create while a search is active would otherwise jump
+      // somewhere the row is not.
+      page.set(Math.max(1, Math.ceil(next.length / perPage())))
+    },
+
+    remove(record: T): void {
+      records.set(records().filter(existing => !sameRecord(existing, record)))
+      clampPage()
+    },
+
+    clampPage,
+  }
+}

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.231",
+  "version": "0.75.233",
   "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.231",
+  "version": "0.75.233",
   "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.231",
+    "@stacksjs/mobile": "0.75.233",
     "@stacksjs/sanitizer": "^0.2.534",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",

package/project/storage/framework/types/browser-composables.d.ts

@@ -0,0 +1,56 @@
+// Hand-written, like `request-context.d.ts` beside it, and handed to
+// `stx typecheck` with `--lib` by the `typecheck:views` script.
+//
+// What a `<script client>` block can reach from stx's DEMAND-INLINE
+// composables (stacksjs/stacks#2918 follow-up). These are not ordinary
+// auto-imports: stx scans a client script for the names it calls and inlines
+// the implementation of just those, so they exist at runtime without an
+// import and are invisible to any checker that is only given the module
+// declarations. `node_modules/@stacksjs/stx/dist/composables/*.d.ts` declares
+// them as module exports, which is the wrong shape for a global, so nothing
+// typed them here.
+//
+// That is how `MembershipCard.stx` turned `typecheck:views` red while working
+// correctly in a browser: it calls `useMouse({ target, resetOnLeave })` and
+// subscribes, which is exactly the demand-inlined API, while the only
+// `useMouse` a checker could see was the unrelated no-argument one in
+// `browser-composables.d.ts`.
+//
+// Mirrors `dist/composables/use-mouse.d.ts` rather than inventing a shape. If
+// stx changes it, this drifts, and the symptom is a type error on code that
+// runs - so correct it here against that file rather than loosening it.
+
+export {}
+
+declare global {
+  interface StxMouseState {
+    x: number
+    y: number
+    pageX: number
+    pageY: number
+    clientX: number
+    clientY: number
+    movementX: number
+    movementY: number
+    buttons: number
+    isPressed: boolean
+    isInside: boolean
+  }
+
+  interface StxMouseOptions {
+    target?: Window | HTMLElement | null
+    touch?: boolean
+    resetOnLeave?: boolean
+    type?: 'page' | 'client' | 'screen' | 'movement'
+  }
+
+  interface StxMouseRef {
+    get: () => StxMouseState
+    /** Returns its own unsubscribe, which is what callers store. */
+    subscribe: (fn: (state: StxMouseState) => void) => () => void
+    stop: () => void
+  }
+
+  /** Reactive mouse or pointer position, globally or within a target. */
+  function useMouse(options?: StxMouseOptions): StxMouseRef
+}

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

@@ -5,6 +5,7 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-category-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CategoryIndexResponse {
   records: CommerceCategoryRecord[]
@@ -230,13 +231,7 @@ async function deleteCategory(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadCategories()

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

@@ -1,5 +1,6 @@
 <script client>
 import type { CommerceCategoryRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-category-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -113,10 +114,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -5,6 +5,7 @@ import type {
   CouponStatus,
 } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -104,10 +105,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -8,6 +8,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CouponIndexResponse {
   records: CouponRecord[]
@@ -241,13 +242,7 @@ async function deleteCoupon(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadCoupons()

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

@@ -1,6 +1,7 @@
 <script client>
 import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -72,10 +73,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -6,6 +6,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CustomerIndexResponse {
   records: CommerceCustomerRecord[]
@@ -243,13 +244,7 @@ async function deleteCustomer(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadCustomers()

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

@@ -1,6 +1,7 @@
 <script client>
 import type { GiftCardRecord, GiftCardStatus } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -148,10 +149,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -7,6 +7,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface GiftCardIndexResponse {
   records: GiftCardRecord[]
@@ -257,13 +258,7 @@ async function deleteGiftCard(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadGiftCards()

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

@@ -1,5 +1,6 @@
 <script client>
 import type { ManufacturerRecord } from '../../../../app/Actions/Dashboard/Commerce/manufacturer-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -41,10 +42,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -4,6 +4,7 @@ import type {
   OrderCustomerOption,
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-order-records'
 import { minorToInput, moneyInputError, moneyInputStep, parseMoneyInput } from '@stacksjs/commerce/money'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -108,10 +109,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const fieldLabel = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${fieldLabel.charAt(0).toUpperCase()}${fieldLabel.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -7,6 +7,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface OrderIndexResponse {
   records: CommerceOrderRecord[]
@@ -284,13 +285,7 @@ async function deleteOrder(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadOrders()

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

@@ -1,4 +1,5 @@
 <script client>
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 import type {
   CommerceProductRecord,
   ProductOption,
@@ -108,10 +109,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const fieldLabel = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${fieldLabel.charAt(0).toUpperCase()}${fieldLabel.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -8,6 +8,7 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface ProductIndexResponse {
   records: CommerceProductRecord[]
@@ -259,13 +260,7 @@ async function deleteProduct(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadProducts()

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

@@ -1,5 +1,6 @@
 <script client>
 import type { ReviewRecord } from '../../../../app/Actions/Dashboard/Commerce/review-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const review = useReactiveProp('review', null as ReviewRecord | null)
@@ -42,10 +43,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -1,5 +1,6 @@
 <script client>
 import type { TaxRateRecord } from '../../../../app/Actions/Dashboard/Commerce/tax-rate-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 const open = useReactiveProp('open', false)
 const mode = useReactiveProp('mode', 'add')
@@ -59,10 +60,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>