feat(18-01): add the cabana money field (task 1)

- type: money on fields.yaml with currency or currencyFrom, scale (2..4,
  default 4) and max; boot fails naming the field on two sources, none,
  a bad scale or max, a column that is not a string or a Scanner/Valuer,
  or a currencyFrom that is not a string column
- a save answers 422 money.invalid, money.too_precise or money.too_large
  on the field and fills the accepted decimal string unchanged; the same
  check runs on controller, settings and relation child saves
- backend::lang money.* phrases in en and pl
- admin SPA: money.ts (parseMoneyInput, trimMoneyDisplay, formatMoney over
  Intl with the string itself), MoneyField.vue with the currency suffix,
  blur validation and the read-only box, preview through the control,
  the field scope on PreviewView; regenerated OpenAPI and TS types,
  rebuilt modules/boardwalk/dist
- acme.payments fixture with TestMoneyFieldCompile and the Docker
  TestMoneyFieldSmoke; forms.md Money section and cabana README

admin/src/components/form/PreviewField.vue

@@ -8,8 +8,8 @@ import { isPluginField, rendererForField } from './registry'
 // One field of the preview screen (UI-SPEC S3, D-11): a label and its value
 // as a dt/dd pair. Values are text, never disabled inputs, so they keep full
 // contrast and are read in order. Controls that already have a read-only
-// mode (datepicker, fileupload, permissioneditor), partials and plugin field
-// types (their element gets `disabled`) are rendered through their own
+// mode (datepicker, fileupload, permissioneditor, money), partials and plugin
+// field types (their element gets `disabled`) are rendered through their own
 // component with the field marked read-only.
 const props = defineProps<{
   field: FormField
@@ -21,7 +21,7 @@ const props = defineProps<{
 }>()
 
 /** Types rendered by their own control in its read-only mode. */
-const ownControl = new Set(['datepicker', 'fileupload', 'partial', 'permissioneditor', 'richeditor', 'repeater'])
+const ownControl = new Set(['datepicker', 'fileupload', 'partial', 'permissioneditor', 'richeditor', 'repeater', 'money'])
 
 const controlId = computed(() => `${props.idPrefix ?? 'preview'}-${props.field.name}`)
 const labelId = computed(() => `${controlId.value}-label`)

admin/src/components/form/fields/MoneyField.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue'
+import { CircleAlert } from '@lucide/vue'
+import { currentLocale, t } from '../../../app/i18n'
+import { decimalSeparator, formatMoney, parseMoneyInput, trimMoneyDisplay, type MoneyParseError } from '../../../app/money'
+import { controlAttributes, controlClass, type FieldControlProps } from '../control'
+import { FIELD_SCOPE } from '../formContext'
+
+// Exact-decimal amount control for `type: money` (UI-SPEC F1, D-07 with the
+// amended D-09 and D-10). The value is the server's decimal string or null;
+// it is never parsed into a number. A loaded value is shown with its
+// trailing zeros trimmed to two decimals and the locale's separator, and is
+// sent back byte-identical until the administrator edits it. Typing emits
+// the canonical dot string on every valid input and null on empty; a
+// malformed or too-precise text is emitted as typed (never rounded or
+// truncated), so the server's 422 stays the gate, and the error line shows
+// on blur. The currency suffix is the field's literal code or the live value
+// of the currencyFrom sibling; without a code the suffix is omitted.
+const props = defineProps<FieldControlProps>()
+const emit = defineEmits<{ 'update:modelValue': [value: string | null] }>()
+
+const scope = inject(FIELD_SCOPE, null)
+const scale = computed(() => props.field.scale ?? 4)
+const currency = computed(() => {
+  if (props.field.currencyFrom) {
+    const sibling = scope?.values.value[props.field.currencyFrom]
+    return typeof sibling === 'string' ? sibling.trim() : ''
+  }
+  return props.field.currency ?? ''
+})
+const readOnly = computed(() => {
+  const attribute = props.field.attributes?.readonly
+  return !!props.field.readOnly || (attribute !== undefined && attribute !== null && attribute !== false)
+})
+const attrs = computed(() => controlAttributes(props.field))
+const locale = computed(() => currentLocale.value)
+const separator = computed(() => decimalSeparator(locale.value))
+const currencyId = computed(() => `${props.controlId}-currency`)
+const errorId = computed(() => `${props.controlId}-money-error`)
+
+/** The stored string as the input shows it: trimmed, with the locale's separator. */
+function displayOf(value: unknown): string {
+  if (typeof value !== 'string' || value === '') {
+    return ''
+  }
+  return trimMoneyDisplay(value).replace('.', separator.value)
+}
+
+const text = ref(displayOf(props.modelValue))
+const error = ref<MoneyParseError | null>(null)
+// Errors show on blur, and while typing once one has shown.
+const showErrors = ref(false)
+let lastEmitted: string | null | undefined
+
+// A value set from outside (a load, a reset after save) replaces the draft;
+// the field's own emits do not.
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value !== lastEmitted) {
+      text.value = displayOf(value)
+      error.value = null
+      showErrors.value = false
+    }
+  },
+)
+
+/** What a draft emits: the canonical string, null, or the raw text when refused. */
+function emitted(draft: string): { value: string | null; error: MoneyParseError | null } {
+  const result = parseMoneyInput(draft, scale.value)
+  if (result.error === null) {
+    return result
+  }
+  return { value: draft.replace(/[\s ]/g, ''), error: result.error }
+}
+
+function onInput(event: Event): void {
+  text.value = (event.target as HTMLInputElement).value
+  const next = emitted(text.value)
+  if (showErrors.value) {
+    error.value = next.error
+  }
+  lastEmitted = next.value
+  emit('update:modelValue', next.value)
+}
+
+function onBlur(): void {
+  showErrors.value = true
+  error.value = emitted(text.value).error
+}
+
+const invalid = computed(() => !!props.invalid || error.value !== null)
+const errorText = computed(() =>
+  error.value === 'too_precise'
+    ? t('backend::lang.money.too_precise', { scale: scale.value })
+    : t('backend::lang.money.invalid'),
+)
+const formatted = computed(() =>
+  typeof props.modelValue === 'string' && props.modelValue !== ''
+    ? formatMoney(props.modelValue, currency.value, locale.value, scale.value)
+    : '',
+)
+const describedBy = computed(() =>
+  [props.describedBy ?? '', currency.value !== '' ? currencyId.value : '', error.value !== null ? errorId.value : '']
+    .filter(Boolean)
+    .join(' '),
+)
+</script>
+
+<template>
+  <div
+    v-if="readOnly"
+    :id="controlId"
+    data-money-readonly
+    :aria-describedby="describedBy || undefined"
+    class="flex h-input items-center justify-end rounded-control border border-border bg-subtle px-3.5 tabular-nums whitespace-nowrap"
+  >
+    <span v-if="formatted !== ''">{{ formatted }}</span>
+    <span v-else class="text-muted" data-empty>—</span>
+  </div>
+  <div v-else class="flex min-w-0 flex-col gap-1.5">
+    <div class="relative">
+      <input
+        :id="controlId"
+        v-bind="attrs"
+        :name="field.name"
+        type="text"
+        inputmode="decimal"
+        autocomplete="off"
+        spellcheck="false"
+        :value="text"
+        :required="field.required || undefined"
+        :aria-required="field.required ? 'true' : undefined"
+        :aria-invalid="invalid ? 'true' : undefined"
+        :aria-describedby="describedBy || undefined"
+        :class="[controlClass(invalid), currency !== '' ? 'pr-16' : 'pr-3.5']"
+        class="h-input text-right tabular-nums"
+        @input="onInput"
+        @blur="onBlur"
+      />
+      <span
+        v-if="currency !== ''"
+        data-money-currency
+        aria-hidden="true"
+        class="absolute inset-y-px right-px flex min-w-[52px] items-center justify-center rounded-r-control border-l border-border bg-subtle px-3 text-muted"
+        >{{ currency }}</span
+      >
+      <span v-if="currency !== ''" :id="currencyId" class="sr-only">{{
+        t('backend::lang.money.currency', { code: currency })
+      }}</span>
+    </div>
+    <p v-if="error !== null" :id="errorId" data-money-error class="flex items-center gap-1.5 text-[13px] text-danger">
+      <CircleAlert :size="14" class="shrink-0" aria-hidden="true" />
+      <span>{{ errorText }}</span>
+    </p>
+  </div>
+</template>

admin/src/components/form/registry.ts

@@ -28,6 +28,8 @@
 // a nested FormGrid, labelled as a group. It renders FormGrid, so it sits on
 // an import cycle with this module; only this module imports it, so this
 // module always evaluates first and the binding is complete here.
+// Phase 18 adds the money control (D-07): an exact decimal string value
+// with a currency suffix, formatted by locale only for reading.
 import type { Component } from 'vue'
 import type { FormField } from '../../api/types'
 import CheckboxField from './fields/CheckboxField.vue'
@@ -48,6 +50,7 @@ import SwitchField from './fields/SwitchField.vue'
 import TextField from './fields/TextField.vue'
 import TextareaField from './fields/TextareaField.vue'
 import MarkdownField from './fields/MarkdownField.vue'
+import MoneyField from './fields/MoneyField.vue'
 import MLTextField from './fields/MLTextField.vue'
 import MLTextareaField from './fields/MLTextareaField.vue'
 import MLMarkdownField from './fields/MLMarkdownField.vue'
@@ -89,6 +92,7 @@ const renderers = new Map<string, Component>([
   ['mlmarkdown', MLMarkdownField],
   ['richeditor', RichEditorField],
   ['repeater', RepeaterField],
+  ['money', MoneyField],
 ])
 
 /** Types whose control shows the label itself (toggle cards, relation manager). */